Skip to content

S
shld-databoard-ui
Commit 29cfe24a authored by 谢章伟's avatar 谢章伟
Browse files
Options

安全质量大屏

parent 022d4f12
Show whitespace changes
Inline Side-by-side
Showing with 398 additions and 27 deletions
src/module/databoard/databoard/safe-quality.vue
View file @ 29cfe24a
......@@ -2,49 +2,140 @@
<div class="main">
<div class="full_page">
<!-- 左-->
<div class="trade_left" style="width: 18%">
<div class="trade_left" style="width: 20%">
<div style="height: 37%;" >
<display-board style="display: flex; justify-content: space-between; height: 98%;" title="安全">
<div style="padding-top: 2rem;">
<winners-list style="height: 96%;overflow: auto;" :mouseHand="true" @click.native="goArBar" id="safe_list" :rows="arSafeList"/>
</div>
</display-board>
</div>
<div style="height: 37%;" >
<display-board style="display: flex; justify-content: space-between; height: 98%;" title="质量">
<div style="padding-top: 2rem;">
<winners-list style="height: 96%;overflow: auto;" :mouseHand="true" @click.native="goArBar" id="quality_list" :rows="arQualityList"/>
</div>
</display-board>
</div>
<div style="height: 26%;" >
<display-board style="display: flex; justify-content: space-between; height: 98%;" title="人员情况表">
<div >
<div style="height: 100px;width: 200px" ref="bar"></div>
<div style="height: 100%;width: 100%;padding-top: 1rem;">
<div style="height: 100%;width: 100%" ref="people"></div>
</div>
</display-board>
</div>
</div>
<!--中-->
<div class="trade_middle" style="border: none;box-shadow: none;width: 54%;padding-left: 0.5rem">
<display-board style="height: 76%">
</display-board>
<div style="display: flex; justify-content: space-between; height: 20%;">
<div style="display: flex; justify-content: space-between; height: 23%; padding-top: 2rem;" >
<showcase style="width: 16%;" title="当日订单量">
<title-content-mark
style="float:left;width: 100%;height: 50%;color: #5eeef4;padding: 0 15%;font-size: 16px;"
content-style="font-size: 14px;" mark-style="font-size: 10px;" :content="drddl.weight+ ' 万吨'"
/>
<title-content-mark style="float:left;width: 100%;height: 50%;color: #5eeef4;padding: 0 15%;"
content-style="font-size: 14px;" mark-style="font-size: 10px;"
:content="drddl.amount+' 万元'" />
</showcase>
<showcase style="width: 16%;" title="当日运单量" :mouseHand="true" @click.native="routerTo('/department-shipment')">
<title-content-mark
style="float:left;width: 100%;height: 50%;color: #5eeef4;padding: 0 15%;font-size: 16px;"
content-style="font-size: 14px;" mark-style="font-size: 10px;" :content="drydl.count + ' 车'"
/>
<title-content-mark style="float:left;width: 100%;height: 50%;color: #5eeef4;padding: 0 15%;"
content-style="font-size: 14px;" mark-style="font-size: 10px;"
:content="drydl.weight + ' 万吨'" />
</showcase>
<showcase style="width: 16%;" title="当日完成量">
<title-content-mark
style="float:left;width: 100%;height: 50%;color: #5eeef4;padding: 0 15%;font-size: 16px;"
content-style="font-size: 14px;" mark-style="font-size: 10px;" :content="drwcl.weight+ ' 万吨'"
/>
<title-content-mark style="float:left;width: 100%;height: 50%;color: #5eeef4;padding: 0 15%;"
content-style="font-size: 14px;" mark-style="font-size: 10px;"
:content="drwcl.amount+ ' 万元'" />
</showcase>
<showcase style="width: 16%;" title="余量">
<title-content-mark
style="float:left;width: 100%;height: 50%;color: #5eeef4;padding: 0 15%;font-size: 16px;"
content-style="font-size: 14px;" mark-style="font-size: 10px;" :content="yl.weight+ ' 万吨'" />
<title-content-mark style="float:left;width: 100%;height: 50%;color: #5eeef4;padding: 0 15%;"
content-style="font-size: 14px;" mark-style="font-size: 10px;"
:content="yl.amount+ ' 万元'" />
</showcase>
<showcase style="width: 16%;" title="流失客户" :mouseHand="true" @click.native="routerTo('/lost-add-customer',2)">
<title-content-mark
style="float:left;width: 100%;height: 50%;color: #5eeef4;padding: 0 15%;font-size: 16px;"
content-style="font-size: 14px;" mark-style="font-size: 10px;" :content="lskh.weight+' 万吨'"
/>
<title-content-mark style="float:left;width: 100%;height: 50%;color: #5eeef4;padding: 0 15%;"
content-style="font-size: 14px;" mark-style="font-size: 10px;"
:content="lskh.amount+ ' 万元'" />
</showcase>
<showcase style="width: 16%;" title="新增客户" :mouseHand="true" @click.native="routerTo('/lost-add-customer',1)">
<title-content-mark
style="float:left;width: 100%;height: 50%;color: #5eeef4;padding: 0 15%;font-size: 16px;"
content-style="font-size: 14px;" mark-style="font-size: 10px;" :content="xzkh.weight+ ' 万吨'"
/>
<title-content-mark style="float:left;width: 100%;height: 50%;color: #5eeef4;padding: 0 15%;"
content-style="font-size: 14px;" mark-style="font-size: 10px;"
:content="xzkh.amount + ' 万元'" />
</showcase>
</div>
</div>
<!-- 右-->
<div class="trade_right" style="width: 26%;;padding-left: 0.5rem">
<div class="trade_right" style="width: 24%;;padding-left: 0.5rem">
<div style="height: 33%;" >
<display-board style="display: flex; justify-content: space-between; height: 98%;" title="汽运">
<div style="height: 36%;display: flex;justify-content: space-evenly;padding-top: 1.5rem">
<simple-card style="width:100%;height: 100%">
<title-content-mark style="color: #5eeef4;display: inline-block;font-size: 14px;" :title="arCarSum[0].title+'：'+arCarSum[0].value"/>
<title-content-mark style="display: inline-block;padding-left: 6rem;font-size: 14px" :title-style="{color:'red',paddingLeft: '2rem'}" :title="arCarSum[1].title+'：'+arCarSum[1].value"/>
</simple-card>
</div>
<div style="height: 70%;width: 100%;padding-right: 2rem">
<div >
<title-content-mark style="padding-bottom: 0px" :title="barTitle+'：'+carPlan+'%'" :title-style="{fontSize:'22px'}" is-bold is-center/>
</div>
<div style="height: 100%;width: 100%" ref="car"></div>
</div>
</display-board>
</div>
<div style="height: 33%;" >
<display-board style="display: flex; justify-content: space-between; height: 98%;" title="水运">
<div style="height: 36%;display: flex;justify-content: space-evenly;padding-top: 1.5rem">
<simple-card style="width:100%;height: 100%">
<title-content-mark style="color: #5eeef4;display: inline-block;font-size: 14px;" :title="arCarSum[0].title+'：'+arCarSum[0].value"/>
<title-content-mark style="display: inline-block;padding-left: 6rem;font-size: 14px" :title-style="{color:'red',paddingLeft: '2rem'}" :title="arCarSum[1].title+'：'+arCarSum[1].value"/>
</simple-card>
</div>
<div style="height: 70%;width: 100%;padding-right: 2rem">
<div >
<title-content-mark style="padding-bottom: 0px" :title="barTitle+'：'+carPlan+'%'" :title-style="{fontSize:'22px'}" is-bold is-center/>
</div>
<div style="height: 100%;width: 100%" ref="ship"></div>
</div>
</display-board>
</div>
<div style="height: 34%;" >
<display-board style="display: flex; justify-content: space-between; height: 98%;" title="铁运">
<div style="height: 36%;display: flex;justify-content: space-evenly;padding-top: 1.5rem">
<simple-card style="width:100%;height: 100%">
<title-content-mark style="color: #5eeef4;display: inline-block;font-size: 14px;" :title="arCarSum[0].title+'：'+arCarSum[0].value"/>
<title-content-mark style="display: inline-block;padding-left: 6rem;font-size: 14px" :title-style="{color:'red',paddingLeft: '2rem'}" :title="arCarSum[1].title+'：'+arCarSum[1].value"/>
</simple-card>
</div>
<div style="height: 70%;width: 100%;padding-right: 2rem">
<div >
<title-content-mark style="padding-bottom: 0px" :title="barTitle+'：'+carPlan+'%'" :title-style="{fontSize:'22px'}" is-bold is-center/>
</div>
<div style="height: 100%;width: 100%" ref="train"></div>
</div>
</display-board>
</div>
</div>
......@@ -55,19 +146,289 @@
import DisplayBoard from "../components/container/display-board.vue";
import WinnersList from "../components/card/winners-list.vue";
import * as echarts from "echarts";
import SimpleCard from "../components/card/simple-card.vue";
import TitleContentMark from "../components/layout/title-content-mark.vue";
import Showcase from "../components/container/showcase.vue";
export default {
name: "SafeQuality",
components: {
DisplayBoard,
SimpleCard,
TitleContentMark,
Showcase,
WinnersList
},
data() {
return {
arSafeList:[{'title':"aaaaaaaaaaaaaaaaaaa"},{'title':"aaaaaaaaaaaaaaaaaaa"},{'title':"aaaaaaaaaaaaaaaaaaa"},{'title':"aaaaaaaaaaaaaaaaaaa"},{'title':"aaaaaaaaaaaaaaaaaaa"}],
arQualityList:[{'title':"bbbbbbbbbbbbbbb"},{'title':"bbbbbbbbbbbbbbb"},{'title':"bbbbbbbbbbbbbbb"},{'title':"aaaaaaaaaaaaaaaaaaa"},{'title':"aaaaaaaaaaaaaaaaaaa"}],
people_options:{
arSafeList:[{title:"火灾事故-111111"},{title:"急救事故-222222"},{title:"交通事故-333333"},{title:"其他事故-888888"},{title:"急救事故-22222"}],
arQualityList:[{title:"发往广东高强钢内部受损"},{title:"发往广东高强钢内部受损"},{title:"发往广东高强钢内部受损"},{title:"发往广东高强钢内部受损"},{title:"发往广东高强钢内部受损"}],
arCarSum:[
{title:'当班车数',value:'1350'},
{title:'异常车数',value:'0'}
],
arShipSum:[
{title:'当班船数',value:'1350'},
{title:'异常船数',value:'0'}
],
arTrainSum:[
{title:'当班数',value:'1350'},
{title:'异常数',value:'0'}
],
barTitle:'今日计划完成',
carPlan:'89',
lskh: {
weight: "2,000",
amount: "20,000",
},
xzkh: {
weight: "2,000",
amount: "20,000",
},
drddl: {
weight: "2,000",
amount: "20,000",
},
drydl: {
count: "2,000",
weight: "20,000",
},
drwcl: {
weight: "2,000",
amount: "20,000",
},
yl: {
weight: "2,000",
amount: "20,000",
},
people_options: {
tooltip: {
trigger: 'axis'
},
textStyle: {
color: "#FFFFFF",
fontSize: "12"
},
grid: {
containLabel: true,
top: "10%",
bottom: '0'
},
yAxis: {
type: "value",
splitLine: {
lineStyle: {
color: "#1E2C58"
}
},
},
xAxis: {
data: ['在编', '出勤', '请假'],
axisLabel: {
color: "#FFFFFF",
fontSize: "12",
},
axisTick: {
show: false
}
},
series: [{
type: 'bar',
xAxisIndex: null,
smooth: true,
itemStyle:{
color:new echarts.graphic.LinearGradient(
0, 0, 0, 1, // 渐变方向从上到下
[
{ offset: 0, color: '#83bff6' }, // 柱图顶部颜色
{ offset: 0.5, color: '#188df0' }, // 柱图中间颜色
{ offset: 1, color: '#188df0' } // 柱图底部颜色
]
),
barBorderRadius:[3,3,0,0] ,
},
barWidth: '30%',
barGap: '20%',
emphasis: {
focus: 'series'
},
data: [19,11,33]
}]
},
car_options: {
tooltip: {
trigger: 'axis'
},
textStyle: {
color: "#FFFFFF",
fontSize: "12"
},
grid: {
containLabel: true,
top: "10%",
bottom: '0'
},
yAxis: {
show:false
},
xAxis: {
data: ['计划量', '完成量', '余量'],
axisLabel: {
color: "#FFFFFF",
fontSize: "12",
},
axisTick: {
show: false
},
axisLine:{
show:false
}
},
series: [{
type: 'bar',
xAxisIndex: null,
smooth: true,
itemStyle:{
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1, // 渐变方向从上到下
[
{ offset: 0, color: '#83bff6' }, // 柱图顶部颜色
{ offset: 0.5, color: '#188df0' }, // 柱图中间颜色
{ offset: 1, color: '#188df0' } // 柱图底部颜色
]
),
barBorderRadius:[3,3,3,3] ,
},
label:{
show:true,
position:'top',
formatter: '{c}吨',
color:'#FFFFFF',
},
barWidth: '30%',
barGap: '10%',
emphasis: {
focus: 'series'
},
data: [19,11,33]
}]
},
ship_options: {
tooltip: {
trigger: 'axis'
},
textStyle: {
color: "#FFFFFF",
fontSize: "12"
},
grid: {
containLabel: true,
top: "10%",
bottom: '0'
},
yAxis: {
show:false
},
xAxis: {
data: ['计划量', '完成量', '余量'],
axisLabel: {
color: "#FFFFFF",
fontSize: "12",
},
axisTick: {
show: false
},
axisLine:{
show:false
}
},
series: [{
type: 'bar',
xAxisIndex: null,
smooth: true,
itemStyle:{
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1, // 渐变方向从上到下
[
{ offset: 0, color: '#83bff6' }, // 柱图顶部颜色
{ offset: 0.5, color: '#188df0' }, // 柱图中间颜色
{ offset: 1, color: '#188df0' } // 柱图底部颜色
]
),
barBorderRadius:[3,3,3,3] ,
},
label:{
show:true,
position:'top',
formatter: '{c}吨',
color:'#FFFFFF',
},
barWidth: '30%',
barGap: '10%',
emphasis: {
focus: 'series'
},
data: [19,11,33]
}]
},
train_options: {
tooltip: {
trigger: 'axis'
},
textStyle: {
color: "#FFFFFF",
fontSize: "12"
},
grid: {
containLabel: true,
top: "10%",
bottom: '0'
},
yAxis: {
show:false
},
xAxis: {
data: ['计划量', '完成量', '余量'],
axisLabel: {
color: "#FFFFFF",
fontSize: "12",
},
axisTick: {
show: false
},
axisLine:{
show:false
}
},
series: [{
type: 'bar',
xAxisIndex: null,
smooth: true,
itemStyle:{
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1, // 渐变方向从上到下
[
{ offset: 0, color: '#83bff6' }, // 柱图顶部颜色
{ offset: 0.5, color: '#188df0' }, // 柱图中间颜色
{ offset: 1, color: '#188df0' } // 柱图底部颜色
]
),
barBorderRadius:[3,3,3,3] ,
},
label:{
show:true,
position:'top',
formatter: '{c}吨',
color:'#FFFFFF',
},
barWidth: '30%',
barGap: '10%',
emphasis: {
focus: 'series'
},
data: [19,11,33]
}]
},
}
},
methods: {
......@@ -76,27 +437,37 @@ export default {
this.getPeopleInfos();
},
getPeopleInfos(){
// var seriesBar = [];
// seriesBar.push(adapterSeriesDataBar(null, "在编", [10,20]));
// seriesBar.push(adapterSeriesDataBar(null, "出勤", [15]));
// seriesBar.push(adapterSeriesDataBar(null, "请假", [8]));
//
// this.peopleInfoOption.series = seriesBar;
// let barDom = this.$refs.bar;
// let chart=echarts.init(barDom);
// chart.setOption(this.peopleInfoOption);
this.people.setOption(this.people_options);
this.car.setOption(this.car_options);
this.ship.setOption(this.ship_options);
this.train.setOption(this.train_options);
},
routerTo(path, code) {
this.$router.push({path: path, query: {code: code}});
},
resizeChart() {
if (this.chart) {
this.chart.resize();
}
}
},
mounted() {
setTimeout(() => {
let peopleDom = this.$refs.people;
this.people = echarts.init(peopleDom);
let carDom = this.$refs.car;
this.car = echarts.init(carDom);
let shipDom = this.$refs.ship;
this.ship = echarts.init(shipDom);
let barDom = this.$refs.bar;
this.bar = echarts.init(barDom);
let trainDom = this.$refs.train;
this.train = echarts.init(trainDom);
}, 500);
this.refreshData();
window.addEventListener('resize', this.resizeChart);
},500);
},
beforeDestroy() {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment