Skip to content

卡
卡车调度系统
Commit 13fa28ad authored by xxx's avatar xxx
Browse files
Options

1

parent ff8e7e4e
Hide whitespace changes
Inline Side-by-side
Showing with 523 additions and 7 deletions
src/views/MLargeScreen/components/smallComponents/DPcomputer5.vue
View file @ 13fa28ad
<template> <template>
<div class="DPcomputer5Box"> <div class="DPcomputer5Box">
<!-- 数据统计图表 --> <!-- 数据统计图表 -->
<div class="dataScrView_centerView_title">
<div :class="centerViewData.moduleText == 'centerModule1' ? 'centerModuleSelectStyle' : ''" @click="centerSelectFn('centerModule1')">产量数据</div>
<div :class="centerViewData.moduleText == 'centerModule2' ? 'centerModuleSelectStyle' : ''" @click="centerSelectFn('centerModule2')">运载数据</div>
<div :class="centerViewData.moduleText == 'centerModule3' ? 'centerModuleSelectStyle' : ''" @click="centerSelectFn('centerModule3')">装载数据</div>
</div>
<div class="dataScrView_centerView_planNum" v-if="centerViewData.moduleText == 'centerModule1'">
<div>
<div>
<div style="color:#FFFFFF;font-size:14px;">今日计划量</div>
<div style="color:#00E9FD;font-size:16px;font-weight:600;">{{outputMineData.day.plan}}吨</div>
</div>
<img src="../../../../assets/images/cutGraph/renwujihua1.png">
</div>
<div>
<div>
<div style="color:#FFFFFF;font-size:14px;">今日完成量</div>
<div style="color:#00E9FD;font-size:16px;font-weight:600;">{{outputMineData.day.finish}}吨</div>
</div>
<img src="../../../../assets/images/cutGraph/mubiaoguanli1.png">
</div>
<div>
<div>
<div style="color:#FFFFFF;font-size:14px;">今日完成率</div>
<div style="color:#00E9FD;font-size:16px;font-weight:600;">{{parseInt(outputMineData.day.eff)}}%</div>
</div>
<img src="../../../../assets/images/cutGraph/wancheng1.png">
</div>
<div>
<div>
<div style="color:#FFFFFF;font-size:14px;">当月计划量</div>
<div style="color:#00E9FD;font-size:16px;font-weight:600;">{{outputMineData.month.plan}}吨</div>
</div>
<img src="../../../../assets/images/cutGraph/jihuarenwu2.png">
</div>
<div>
<div>
<div style="color:#FFFFFF;font-size:14px;">当月累计完成量</div>
<div style="color:#00E9FD;font-size:16px;font-weight:600;">{{outputMineData.month.finish}}吨</div>
</div>
<img src="../../../../assets/images/cutGraph/zichantongji1.png">
</div>
<div>
<div>
<div style="color:#FFFFFF;font-size:14px;">当月完成率</div>
<div style="color:#00E9FD;font-size:16px;font-weight:600;">{{parseInt(outputMineData.month.eff)}}%</div>
</div>
<img src="../../../../assets/images/cutGraph/wanchenglv1.png">
</div>
</div>
<div class="dataScrView_centerView_planNum" v-if="centerViewData.moduleText == 'centerModule2'">
<div>
<div>
<div style="color:#FFFFFF;font-size:14px;">今日总运载量</div>
<div style="color:#00E9FD;font-size:16px;font-weight:600;">{{carryCenterData.dayAllCarry1}}吨</div>
</div>
<img src="../../../../assets/images/cutGraph/renwujihua1.png">
</div>
<div>
<div>
<div style="color:#FFFFFF;font-size:14px;">今日平均运载量</div>
<div style="color:#00E9FD;font-size:16px;font-weight:600;">{{carryCenterData.dayAverageCarry1}}吨/小时</div>
</div>
<img src="../../../../assets/images/cutGraph/mubiaoguanli1.png">
</div>
<div>
<div>
<div style="color:#FFFFFF;font-size:14px;">今日总里程数</div>
<div style="color:#00E9FD;font-size:16px;font-weight:600;">{{carryCenterData.dayAllMil1}}KM</div>
</div>
<img src="../../../../assets/images/cutGraph/wancheng1.png">
</div>
<div>
<div>
<div style="color:#FFFFFF;font-size:14px;">今日总车数</div>
<div style="color:#00E9FD;font-size:16px;font-weight:600;">{{carryCenterData.dayAllCarNum}}辆</div>
</div>
<img src="../../../../assets/images/cutGraph/jihuarenwu2.png">
</div>
<div>
<div>
<div style="color:#FFFFFF;font-size:14px;">单次运载平均时长</div>
<div style="color:#00E9FD;font-size:16px;font-weight:600;">{{carryCenterData.singleAverageTime}}H</div>
</div>
<img src="../../../../assets/images/cutGraph/zichantongji1.png">
</div>
<div>
<div>
<div style="color:#FFFFFF;font-size:14px;">单次运载平均里程</div>
<div style="color:#00E9FD;font-size:16px;font-weight:600;">{{carryCenterData.singleAverageMil}}KM</div>
</div>
<img src="../../../../assets/images/cutGraph/wanchenglv1.png">
</div>
</div>
<div class="dataScrView_centerView_planNum3" v-if="centerViewData.moduleText == 'centerModule3'">
<div>
<div>
<div style="color:#FFFFFF;font-size:14px;">今日装载量</div>
<div style="color:#00E9FD;font-size:16px;font-weight:600;">{{loadCenterData.dayAllLoad1}}吨</div>
</div>
<img src="../../../../assets/images/cutGraph/renwujihua1.png">
</div>
<div>
<div>
<div style="color:#FFFFFF;font-size:14px;">今日平均装载量</div>
<div style="color:#00E9FD;font-size:16px;font-weight:600;">{{loadCenterData.dayAverageLoad1}}吨/小时</div>
</div>
<img src="../../../../assets/images/cutGraph/mubiaoguanli1.png">
</div>
<div>
<div>
<div style="color:#FFFFFF;font-size:14px;">今日总工时</div>
<div style="color:#00E9FD;font-size:16px;font-weight:600;">{{loadCenterData.dayAllTime}}H</div>
</div>
<img src="../../../../assets/images/cutGraph/wancheng1.png">
</div>
<div>
<div>
<div style="color:#FFFFFF;font-size:14px;">今日装载车数</div>
<div style="color:#00E9FD;font-size:16px;font-weight:600;">{{loadCenterData.dayLoadCarNum}}辆</div>
</div>
<img src="../../../../assets/images/cutGraph/jihuarenwu2.png">
</div>
</div>
<div id="centerEchartsView"></div>
</div> </div>
</template> </template>
...@@ -14,6 +137,34 @@ export default { ...@@ -14,6 +137,34 @@ export default {
data(){ data(){
return { return {
DPcomputer5BoxTimer:null, DPcomputer5BoxTimer:null,
//产量数据以及中间图表数据
outputMineData:{
day:{finish:'0',eff:0,plan:'0',},
month:{finish:'0',eff:0,plan:'0',},
year:{finish:'0',eff:0,plan:'0',},
},
//运载数据以及中间图表数据
carryCenterData:{
dayAllCarry1:0,
dayAverageCarry1:0,
dayAllMil1:0,
dayAllCarNum:0,
singleAverageTime:0,
singleAverageMil:0,
},
//装载数据据以及中间图表数据
loadCenterData:{
dayAllLoad1:0,
dayAverageLoad1:0,
dayAllTime:0,
dayLoadCarNum:0,
},
//中间模块选择
centerViewData:{
moduleText:'centerModule1',
xAxisData:['7:00', '8:00', '9:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00'],
seriesData:[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
},
} }
}, },
mounted(){ mounted(){
...@@ -21,8 +172,297 @@ export default { ...@@ -21,8 +172,297 @@ export default {
}, },
methods:{ methods:{
loadData(){ loadData(){
//获取采区当前日产量
HttpReq.truckDispatching.apiPlanDayQuery().then((res) => {
let undueArray = {};
if(res.length == 0 || JSON.stringify(res[0]) == '{}'){
undueArray.eff = 0;
undueArray.finish = 0;
undueArray.plan = 0;
}else{
if(res[0].eff == ''){
undueArray.eff = 0;
undueArray.finish = res[0].finish;
undueArray.plan = res[0].plan;
}else if(res[0].eff >= 1){
undueArray.eff = 100;
undueArray.finish = res[0].finish;
undueArray.plan = res[0].plan;
}else{
undueArray.eff = parseFloat(res[0].eff) * 100;
undueArray.finish = res[0].finish;
undueArray.plan = res[0].plan;
}
}
this.outputMineData.day = undueArray;
})
//获取采区当前月产量
HttpReq.truckDispatching.apiPlanMonthQuery().then((res) => {
let undueArray = {};
if(res.length == 0 || JSON.stringify(res[0]) == '{}'){
undueArray.eff = 0;
undueArray.finish = 0;
undueArray.plan = 0;
}else{
if(res[0].eff == ''){
undueArray.eff = 0;
undueArray.finish = res[0].finish;
undueArray.plan = res[0].plan;
}else if(res[0].eff >= 1){
undueArray.eff = 100;
undueArray.finish = res[0].finish;
undueArray.plan = res[0].plan;
}else{
undueArray.eff = parseFloat(res[0].eff) * 100;
undueArray.finish = res[0].finish;
undueArray.plan = res[0].plan;
}
}
this.outputMineData.month = undueArray;
})
//获取采区当前年产量
HttpReq.truckDispatching.apiPlanYearQuery().then((res) => {
let undueArray = {};
if(res.length == 0 || JSON.stringify(res[0]) == '{}'){
undueArray.eff = 0;
undueArray.finish = 0;
undueArray.plan = 0;
}else{
if(res[0].eff == ''){
undueArray.eff = 0;
undueArray.finish = res[0].finish;
undueArray.plan = res[0].plan;
}else if(res[0].eff >= 1){
undueArray.eff = 100;
undueArray.finish = res[0].finish;
undueArray.plan = res[0].plan;
}else{
undueArray.eff = parseFloat(res[0].eff) * 100;
undueArray.finish = res[0].finish;
undueArray.plan = res[0].plan;
}
}
this.outputMineData.year = undueArray;
})
//中间echarts图表
HttpReq.truckDispatching.apiPlanTime1Query().then((res) => {
let arr3 = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
res.forEach((item,index)=>{
arr3.splice(parseInt(item.hour) - 7,1, parseFloat(item.finish));
})
this.centerViewData.seriesData = arr3;
this.centerEcharts();
})
//中间echarts运载数据
HttpReq.truckDispatching.apiPlanZDay1Query().then((res) => {
if(res.length != 0){
this.carryCenterData.dayAllCarry1 = res[0].finish;
this.carryCenterData.dayAverageCarry1 = parseFloat(res[0].pfin).toFixed(2);
this.carryCenterData.dayAllMil1 = 0;
this.carryCenterData.dayAllCarNum = res[0].num;
this.carryCenterData.singleAverageTime = parseFloat(res[0].time).toFixed(2);
this.carryCenterData.singleAverageMil = 0;
}
})
//中间echarts装载数据
HttpReq.truckDispatching.apiPlanZMonth1Query().then((res) => {
if(res.length != 0){
this.loadCenterData.dayAllLoad1 = res[0].finish;
this.loadCenterData.dayAverageLoad1 = parseFloat(res[0].pfin).toFixed(2);
this.loadCenterData.dayAllTime = res[0].time;
this.loadCenterData.dayLoadCarNum = res[0].num;
}
})
} this.DPcomputer5BoxTimer = setInterval(() => {
//获取采区当前日产量
HttpReq.truckDispatching.apiPlanDayQuery().then((res) => {
let undueArray = {};
if(res.length == 0 || JSON.stringify(res[0]) == '{}'){
undueArray.eff = 0;
undueArray.finish = 0;
undueArray.plan = 0;
}else{
if(res[0].eff == ''){
undueArray.eff = 0;
undueArray.finish = res[0].finish;
undueArray.plan = res[0].plan;
}else if(res[0].eff >= 1){
undueArray.eff = 100;
undueArray.finish = res[0].finish;
undueArray.plan = res[0].plan;
}else{
undueArray.eff = parseFloat(res[0].eff) * 100;
undueArray.finish = res[0].finish;
undueArray.plan = res[0].plan;
}
}
this.outputMineData.day = undueArray;
})
//获取采区当前月产量
HttpReq.truckDispatching.apiPlanMonthQuery().then((res) => {
let undueArray = {};
if(res.length == 0 || JSON.stringify(res[0]) == '{}'){
undueArray.eff = 0;
undueArray.finish = 0;
undueArray.plan = 0;
}else{
if(res[0].eff == ''){
undueArray.eff = 0;
undueArray.finish = res[0].finish;
undueArray.plan = res[0].plan;
}else if(res[0].eff >= 1){
undueArray.eff = 100;
undueArray.finish = res[0].finish;
undueArray.plan = res[0].plan;
}else{
undueArray.eff = parseFloat(res[0].eff) * 100;
undueArray.finish = res[0].finish;
undueArray.plan = res[0].plan;
}
}
this.outputMineData.month = undueArray;
})
//获取采区当前年产量
HttpReq.truckDispatching.apiPlanYearQuery().then((res) => {
let undueArray = {};
if(res.length == 0 || JSON.stringify(res[0]) == '{}'){
undueArray.eff = 0;
undueArray.finish = 0;
undueArray.plan = 0;
}else{
if(res[0].eff == ''){
undueArray.eff = 0;
undueArray.finish = res[0].finish;
undueArray.plan = res[0].plan;
}else if(res[0].eff >= 1){
undueArray.eff = 100;
undueArray.finish = res[0].finish;
undueArray.plan = res[0].plan;
}else{
undueArray.eff = parseFloat(res[0].eff) * 100;
undueArray.finish = res[0].finish;
undueArray.plan = res[0].plan;
}
}
this.outputMineData.year = undueArray;
})
//中间echarts图表
HttpReq.truckDispatching.apiPlanTime1Query().then((res) => {
let arr3 = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
res.forEach((item,index)=>{
arr3.splice(parseInt(item.hour) - 7,1, parseFloat(item.finish));
})
this.centerViewData.seriesData = arr3;
this.centerEcharts();
})
//中间echarts运载数据
HttpReq.truckDispatching.apiPlanZDay1Query().then((res) => {
if(res.length != 0){
this.carryCenterData.dayAllCarry1 = res[0].finish;
this.carryCenterData.dayAverageCarry1 = parseFloat(res[0].pfin).toFixed(2);
this.carryCenterData.dayAllMil1 = 0;
this.carryCenterData.dayAllCarNum = res[0].num;
this.carryCenterData.singleAverageTime = parseFloat(res[0].time).toFixed(2);
this.carryCenterData.singleAverageMil = 0;
}
})
//中间echarts装载数据
HttpReq.truckDispatching.apiPlanZMonth1Query().then((res) => {
if(res.length != 0){
this.loadCenterData.dayAllLoad1 = res[0].finish;
this.loadCenterData.dayAverageLoad1 = parseFloat(res[0].pfin).toFixed(2);
this.loadCenterData.dayAllTime = res[0].time;
this.loadCenterData.dayLoadCarNum = res[0].num;
}
})
},10000)
},
//中间模块选择
centerSelectFn(text){
this.centerViewData.moduleText = text;
},
//中间模块Echarts
centerEcharts(){
echarts.init(document.getElementById('centerEchartsView')).dispose();
var myChart = echarts.init(document.getElementById('centerEchartsView'));
var option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
grid: {
top: '35%',
left: '1%',
right: '1%',
bottom: '2%',
containLabel: true
},
xAxis: [
{
type: 'category',
data: this.centerViewData.xAxisData,
axisTick: {
alignWithLabel: true
},
axisPointer: {
type: 'shadow'
},
axisLabel: {
show: true,
textStyle: {
color: 'white'
}
},
axisLine: {
lineStyle: {
color: 'white',
width: 1
}
}
}
],
yAxis: [
{
type: 'value',
axisLabel: {
show: true,
textStyle: {
color: 'white'
}
},
splitLine: {
lineStyle: {
// 使用深浅的间隔色
color: ['rgba(255,255,255,0.3)']
}
},
axisLine: {
lineStyle: {
color: 'white',
width: 0
}
}
}
],
series: [
{
name: '重量(吨)',
type: 'bar',
barWidth: 20,
data: this.centerViewData.seriesData,
itemStyle: {
color: '#01CBF6'
},
}
]
};
option && myChart.setOption(option);
},
}, },
beforeDestroy(){ beforeDestroy(){
if(this.DPcomputer5BoxTimer) { if(this.DPcomputer5BoxTimer) {
...@@ -48,4 +488,64 @@ export default { ...@@ -48,4 +488,64 @@ export default {
z-index: 3; z-index: 3;
position: relative; position: relative;
} }
.DPcomputer5Box .dataScrView_centerView_title{
margin-bottom: 5px;
width: 100%;
height: 3.5vh;
background:no-repeat center center url('~@/assets/images/cutGraph/changtianbiaoti2.png');
background-size:100% 100%;
padding-left: 10px;
box-sizing: border-box;
font-size: 18px;
line-height: 3.5vh;
color: #FAFAFB;
letter-spacing: 1px;
text-shadow: 1px 1px 1px #92CBFF;
display: flex;
}
.DPcomputer5Box .dataScrView_centerView_title>div{
margin: 0px 20px;
cursor: pointer;
}
.DPcomputer5Box .centerModuleSelectStyle{
color: #1DF9FC;
border-bottom: 3px solid #1DF9FC;
}
.DPcomputer5Box .dataScrView_centerView_planNum{
width: 100%;
height: 5vh;
display: flex;
justify-content: space-between;
}
.DPcomputer5Box .dataScrView_centerView_planNum>div{
width: 16%;
height: 100%;
background-color: rgba(10,53,107,0.6);
border-radius: 5px;
display: flex;
justify-content: space-around;
align-items: center;
}
.DPcomputer5Box .dataScrView_centerView_planNum3{
width: 100%;
height: 5vh;
display: flex;
}
.DPcomputer5Box .dataScrView_centerView_planNum3>div{
width: 16%;
height: 100%;
background-color: rgba(10,53,107,0.6);
border-radius: 5px;
display: flex;
justify-content: space-around;
align-items: center;
margin-right: 0.5vw;
}
.DPcomputer5Box #centerEchartsView{
overflow: hidden;
top: 5vh;
width: 100%;
height: 18vh;
position: absolute;
}
</style> </style>
\ No newline at end of file
src/views/MLargeScreen/components/smallComponents/DPcomputer6.vue
View file @ 13fa28ad
<template> <template>
<div> <div class="DPcomputer6Box">
<!-- 气象数据 -->
</div> </div>
</template> </template>
...@@ -11,15 +12,23 @@ import { Tools, HttpReq, CAMap} from '@/assets/js/common.js'; ...@@ -11,15 +12,23 @@ import { Tools, HttpReq, CAMap} from '@/assets/js/common.js';
export default { export default {
data(){ data(){
return { return {
DPcomputer6BoxTimer:null,
} }
}, },
mounted(){}, mounted(){
this.loadData();
},
methods:{ methods:{
loadData(){
},
}, },
beforeDestroy(){ beforeDestroy(){
if(this.DPcomputer6BoxTimer) {
clearInterval(this.DPcomputer6BoxTimer);
this.DPcomputer6BoxTimer = null;
}
} }
} }
</script> </script>
...@@ -29,5 +38,12 @@ export default { ...@@ -29,5 +38,12 @@ export default {
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
.DPcomputer6Box{
width: 20vw;
height: 23.5vh;
background-color: rgba(32,42,67,0.95);
padding: 5px 7px;
box-sizing: border-box;
overflow: hidden;
}
</style> </style>
\ No newline at end of file
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