Skip to content

K
kd_control
Commit 30b11f22 authored by zhanglw's avatar zhanglw
Browse files
Options

卡车动态

parent 8ea0f8fb
Hide whitespace changes
Inline Side-by-side
Showing with 1141 additions and 1103 deletions
src/assets/js/common.js
View file @ 30b11f22
...@@ -2387,7 +2387,7 @@ var HttpReq = function(){ ...@@ -2387,7 +2387,7 @@ var HttpReq = function(){
//大屏智能调度——车辆区域分布 //大屏智能调度——车辆区域分布
getLargeScreenfenbu1: function(param){ getLargeScreenfenbu1: function(param){
return request({ return request({
url: '/api/Dispatch/areaCar', url: '/api/dispatchScreen/carLocationDistribution',
method: 'get', method: 'get',
params:param params:param
}) })
...@@ -2395,7 +2395,7 @@ var HttpReq = function(){ ...@@ -2395,7 +2395,7 @@ var HttpReq = function(){
//大屏智能调度——采区车铲比 //大屏智能调度——采区车铲比
getLargeScreenchechanbi1: function(param){ getLargeScreenchechanbi1: function(param){
return request({ return request({
url: '/api/Dispatch/areaCarShovel', url: '/api/dispatchScreen/cheChanRatio',
method: 'get', method: 'get',
params:param params:param
}) })
...@@ -3082,6 +3082,32 @@ var HttpReq = function(){ ...@@ -3082,6 +3082,32 @@ var HttpReq = function(){
data: data, data: data,
}) })
}, },
//大屏车辆调度信息
dpCarDispatchInformation: function(param){
return request({
url: '/api/dispatchScreen/todayCarDispatchInformation',
method: 'get',
params:param,
})
},
//大屏卡车动态
dpKcDynamics: function(param){
return request({
url: '/api/carManager/kcDynamics',
method: 'get',
params:param,
})
},
//大屏铲车动态
dpCcDynamics: function(param){
return request({
url: '/api/carManager/ccDynamics',
method: 'get',
params:param,
})
},
}, },
......
src/components/ezuikit/EZUIKitJs.vue
View file @ 30b11f22
...@@ -847,9 +847,10 @@ export default { ...@@ -847,9 +847,10 @@ export default {
height: 94.5vh; height: 94.5vh;
overflow: hidden; overflow: hidden;
background-color: white; background-color: white;
position: relative; position: absolute;
left: 20vw;
top: 0;
z-index: 3; z-index: 3;
border-left: 1px solid gainsboro;
} }
.video111 .iframeSingle { .video111 .iframeSingle {
width: 60vw; width: 60vw;
......
src/components/ezuikit/carsEZUIKitJs.vue
View file @ 30b11f22
...@@ -898,9 +898,11 @@ export default { ...@@ -898,9 +898,11 @@ export default {
height: 94.5vh; height: 94.5vh;
overflow: hidden; overflow: hidden;
background-color: white; background-color: white;
position: relative; position: absolute;
left: 20vw;
top: 0;
z-index: 3; z-index: 3;
border-left: 1px solid gainsboro; /*border-left: 1px solid gainsboro;*/
} }
.video111 .iframeSingle { .video111 .iframeSingle {
width: 60vw; width: 60vw;
......
src/views/MLargeScreen/components/smallComponents/DPcomputer13.vue
View file @ 30b11f22
<template> <template>
<div class="DPcomputer13Box"> <div class="DPcomputer13Box">
<!-- 卡车动态 --> <!-- 卡车动态 -->
<div class="carManScrView_rightView_title">卡车动态</div> <div class="carManScrView_rightView_title">卡车动态</div>
<div class="carManScrView_rightView_content"> <div class="carManScrView_rightView_content">
<div class="carDynamicTitleStyle"> <div class="carDynamicTitleStyle">
<img src="../../../../assets/images/cutGraph/huoche11.png" height="28"> <img src="../../../../assets/images/cutGraph/huoche11.png" height="28">
<div>{{truckDynamicListData.number ? truckDynamicListData.number : '无'}}</div> <div>{{ truckDynamicListData.number ? truckDynamicListData.number : '无' }}</div>
</div> </div>
<div class="xuanzekuang1"> <div class="xuanzekuang1">
<el-select v-model="xuanzekuangValue" placeholder="请选择" style="width:5vw;" @change="xuanzekuang1Fn()" :popper-append-to-body="false"> <el-select v-model="xuanzekuangValue" placeholder="请选择" style="width:5vw;" @change="xuanzekuang1Fn()"
<el-option v-for="item in truckDynamicListData.data" :key="item.number" :label="item.number" :value="item.number"></el-option> :popper-append-to-body="false">
</el-select> <el-option v-for="item in truckDynamicListData.data" :key="item.number" :label="item.number"
</div> :value="item.number"></el-option>
<div class="truckDynamicContent1"> </el-select>
<div id="kachedongtaiRateId" class="kachedongtaiRateClass"></div> </div>
<div style="text-align: center;"> <div class="truckDynamicContent1">
<div style="font-size:14px;color:white;">今日运载量</div> <div id="kachedongtaiRateId" class="kachedongtaiRateClass"></div>
<div style="font-size:20px;color:#05F7FC;">{{truckDynamicListData.carry ? truckDynamicListData.carry : 0}}<span style="font-size:14px;">t</span></div> <div style="text-align: center;">
<div style="font-size:14px;color:white;">今日工时</div> <div style="font-size:14px;color:white;">今日运载量</div>
<div style="font-size:20px;color:#05F7FC;">{{truckDynamicListData.workTime ? truckDynamicListData.workTime : 0}}<span style="font-size:14px;">h</span></div> <div style="font-size:20px;color:#05F7FC;">
</div> {{ truckDynamicListData.carry ? truckDynamicListData.carry : 0 }}<span style="font-size:14px;">t</span>
<div style="text-align: center;"> </div>
<div style="font-size:14px;color:white;">今日完成度</div> <div style="font-size:14px;color:white;">今日工时</div>
<div style="font-size:20px;color:#05F7FC;">{{truckDynamicListData.rate ? truckDynamicListData.rate : 0}}<span style="font-size:14px;">%</span></div> <div style="font-size:20px;color:#05F7FC;">
<div style="font-size:14px;color:white;">今日里程</div> {{ truckDynamicListData.workTime ? truckDynamicListData.workTime : 0 }}<span
<div style="font-size:20px;color:#05F7FC;">{{truckDynamicListData.mil ? truckDynamicListData.mil : 0}}<span style="font-size:14px;">km</span></div> style="font-size:14px;">h</span></div>
</div>
</div>
<div class="carDynamicContent1">
<div>
<img src="../../../../assets/images/cutGraph/mokuaikaobei4.png">
<div>开始工作时间</div>
<div>{{truckDynamicListData.startTime ? truckDynamicListData.startTime : '无'}}</div>
</div>
<div>
<img src="../../../../assets/images/cutGraph/mokuaikaobei4.png">
<div>结束工作时间</div>
<div>{{truckDynamicListData.endTime ? truckDynamicListData.endTime : '无'}}</div>
</div>
</div>
<div class="carDynamicContent2">
<img src="../../../../assets/images/cutGraph/tuiyuan1.png">
<div>
<div style="color:white;text-align: center;">{{truckDynamicListData.loadArea ? truckDynamicListData.loadArea : '无'}}</div>
<img src="../../../../assets/images/cutGraph/zu2603.png">
<div style="color:white;text-align: center;">{{truckDynamicListData.unloadArea ? truckDynamicListData.unloadArea : '无'}}</div>
</div>
<img src="../../../../assets/images/cutGraph/tuiyuan2.png">
</div>
</div> </div>
<div style="text-align: center;">
<div style="font-size:14px;color:white;">今日效率</div>
<div style="font-size:20px;color:#05F7FC;">
{{ truckDynamicListData.rate ? truckDynamicListData.rate : 0 }}<span style="font-size:14px;">t/h</span>
</div>
<div style="font-size:14px;color:white;">今日里程</div>
<div style="font-size:20px;color:#05F7FC;">{{ truckDynamicListData.mil ? truckDynamicListData.mil : 0 }}<span
style="font-size:14px;">km</span></div>
</div>
</div>
<div class="carDynamicContent1">
<div>
<img src="../../../../assets/images/cutGraph/mokuaikaobei4.png">
<div>订单开始时间</div>
<div>{{ truckDynamicListData.startTime ? truckDynamicListData.startTime : '无' }}</div>
</div>
<div>
<img src="../../../../assets/images/cutGraph/mokuaikaobei4.png">
<div>预计完成时间</div>
<div>{{ truckDynamicListData.endTime ? truckDynamicListData.endTime : '无' }}</div>
</div>
</div>
<div class="carDynamicContent2">
<img src="../../../../assets/images/cutGraph/tuiyuan1.png">
<div>
<div style="color:white;text-align: center;">
{{ truckDynamicListData.loadArea ? truckDynamicListData.loadArea : '' }}
</div>
<img src="../../../../assets/images/cutGraph/zu2603.png">
<div style="color:white;text-align: center;">
{{ truckDynamicListData.unloadArea ? truckDynamicListData.unloadArea : '' }}
</div>
</div>
<img src="../../../../assets/images/cutGraph/tuiyuan2.png">
</div>
</div> </div>
</div>
</template> </template>
<script> <script>
import { Tools, HttpReq, CAMap} from '@/assets/js/common.js'; import {Tools, HttpReq, CAMap} from '@/assets/js/common.js';
import * as echarts from 'echarts'; import * as echarts from 'echarts';
export default { export default {
data(){ data() {
return { return {
DPcomputer13BoxTimer:null, DPcomputer13BoxTimer: null,
xuanzekuangValue:'', xuanzekuangValue: '',
//卡车动态 //卡车动态
truckDynamicListData:{ truckDynamicListData: {
data:[], data: [],
num2:0, num2: 0,
number:'无', number: '无',
rate:0, rate: 0,
carry:0, carry: 0,
workTime:0, workTime: 0,
mil:0, mil: 0,
startTime:'无', startTime: '无',
endTime:'无', endTime: '无',
loadArea:'无', loadArea: '',
unloadArea:'无', unloadArea: '',
}, },
}
},
mounted() {
this.loadData();
},
methods: {
loadData() {
//获取车辆信息
HttpReq.truckDispatching.carInformationQuery({size: 9999}).then((res) => {
let arr1 = [];
if (res.code == 200) {
res.data.content.forEach((item, index) => {
if (item.carclass == '卡车') {
arr1.push(item);
}
})
} }
this.truckDynamicListData.data = arr1;
this.truckDynamicListData.num2 = 0;
this.kachedongtai();
this.DPcomputer13BoxTimer = setInterval(() => {
this.kachedongtai();
}, 20000)
})
}, },
mounted(){ //卡车动态
this.loadData(); kachedongtai() {
}, let num1 = parseInt(this.truckDynamicListData.data.length) - 1;
methods:{ //获取车辆实时数据
loadData(){ if (this.truckDynamicListData.num2 <= num1) {
//获取车辆信息
HttpReq.truckDispatching.carInformationQuery({size:9999}).then((res) => {
let arr1 = [];
if(res.code == 200){
res.data.content.forEach((item,index)=>{
if(item.carclass == '卡车'){
arr1.push(item);
}
})
}
this.truckDynamicListData.data = arr1;
this.truckDynamicListData.num2 = 0;
this.kachedongtai();
this.DPcomputer13BoxTimer = setInterval(() => {
this.kachedongtai();
},20000)
})
},
//卡车动态
kachedongtai(){
let num1 = parseInt(this.truckDynamicListData.data.length) - 1;
//获取车辆实时数据
if(this.truckDynamicListData.num2 <= num1){
}else{ } else {
this.truckDynamicListData.num2 = 0; this.truckDynamicListData.num2 = 0;
}
if (this.truckDynamicListData.data == 0) {
return
}
this.truckDynamicListData.number = this.truckDynamicListData.data[this.truckDynamicListData.num2].number;
this.initData();
},
initData(){
HttpReq.truckDispatching.dpKcDynamics({carNumber: this.truckDynamicListData.number}).then((res) => {
if (res.data) {
let d=res.data;
this.truckDynamicListData.orderNumber = d.orderNumber;
this.truckDynamicListData.rate = d.todayEfficiency;
this.truckDynamicListData.carry = d.todayWeight;
this.truckDynamicListData.workTime = d.todayWorkingHours;
this.truckDynamicListData.mil = d.todayMil;
this.truckDynamicListData.startTime = d.orderStartTime;
this.truckDynamicListData.endTime = d.orderExpectedCompletionTime;
this.truckDynamicListData.loadArea = d.cPoint;
this.truckDynamicListData.unloadArea = d.xPoint;
} else {
this.truckDynamicListData.rate = 0;
this.truckDynamicListData.carry = 0;
this.truckDynamicListData.workTime = 0;
this.truckDynamicListData.mil = 0;
this.truckDynamicListData.startTime = '无';
this.truckDynamicListData.endTime = '无';
this.truckDynamicListData.loadArea = '';
this.truckDynamicListData.unloadArea = '';
}
this.kachedongtaiEcharts();
})
},
kachedongtaiEcharts() {
var maxValue = 100;//进度条最大值
echarts.init(document.getElementById('kachedongtaiRateId')).dispose();
var pipe = echarts.init(document.getElementById('kachedongtaiRateId'));
var option = {
//环形中间文字
graphic: [
//第一行文字
//内容 + 位置
{
type: 'text',
left: 'center',
top: '30%',
style: {
//value当前进度
text: '订单数',
textAlign: 'center',
fill: 'white',
fontSize: 18
}
},
//第二行文字
//内容 + 位置
{
type: 'text',
left: 'center',
top: '55%',
style: {
//maxValue进度条最大值
text: this.truckDynamicListData.orderNumber||0,
textAlign: 'center',
fill: 'white',
fontSize: 14
}
}
],
series: [{
type: 'pie',
radius: ['100%', '88%'],//['外圆大小', '内圆大小']
center: ['50%', '50%'],//圆心位置['左右'， '上下']
hoverAnimation: false,//取消鼠标悬停动画
animationEasing: 'cubicOut',//设置动画缓动效果
//取消显示饼图自带数据线条
labelLine: {
normal: {
show: false
} }
if(this.truckDynamicListData.data == 0){ },
return //增加阴影效果
itemStyle: {
normal: {
shadowBlur: 200,
shadowColor: 'rgba(44, 196, 196, 0.8)'
} }
this.truckDynamicListData.number = this.truckDynamicListData.data[this.truckDynamicListData.num2].number; },
HttpReq.truckDispatching.apiManmadesRealQuery1({number:this.truckDynamicListData.number}).then((res) => { data: [
if(res.length != 0){ //value当前进度 + 颜色
this.truckDynamicListData.rate = res[0].rate; {
this.truckDynamicListData.carry = res[0].carry; value: 0,
this.truckDynamicListData.workTime = res[0].workTime; itemStyle: {
this.truckDynamicListData.mil = res[0].mil; normal: {
this.truckDynamicListData.startTime = res[0].startTime; color: 'rgb(2,220,251)'
this.truckDynamicListData.endTime = res[0].endTime;
this.truckDynamicListData.loadArea = res[0].loadArea;
this.truckDynamicListData.unloadArea = res[0].unloadArea;
}else{
this.truckDynamicListData.rate = 0;
this.truckDynamicListData.carry = 0;
this.truckDynamicListData.workTime = 0;
this.truckDynamicListData.mil = 0;
this.truckDynamicListData.startTime = '无';
this.truckDynamicListData.endTime = '无';
this.truckDynamicListData.loadArea = '无';
this.truckDynamicListData.unloadArea = '无';
} }
this.kachedongtaiEcharts(); }
this.truckDynamicListData.num2 = this.truckDynamicListData.num2 + 1; },
}) //(maxValue进度条最大值 - value当前进度) + 颜色
}, {
kachedongtaiEcharts(){ value: maxValue,
var maxValue = 100;//进度条最大值 itemStyle: {
echarts.init(document.getElementById('kachedongtaiRateId')).dispose(); normal: {
var pipe = echarts.init(document.getElementById('kachedongtaiRateId')); color: 'rgb(2,220,251)'//'rgb(0,34,125)'
var option = {
//环形中间文字
graphic: [
//第一行文字
//内容 + 位置
{
type: 'text',
left: 'center',
top: '30%',
style: {
//value当前进度
text: this.truckDynamicListData.rate ? this.truckDynamicListData.rate + '%' : 0 + '%',
textAlign: 'center',
fill: 'white',
fontSize: 18
}
},
//第二行文字
//内容 + 位置
{
type: 'text',
left: 'center',
top: '55%',
style: {
//maxValue进度条最大值
text: '完成度',
textAlign: 'center',
fill: 'white',
fontSize: 14
}
}
],
series: [{
type: 'pie',
radius: ['100%', '80%'],//['外圆大小', '内圆大小']
center: ['50%', '50%'],//圆心位置['左右'， '上下']
hoverAnimation: false,//取消鼠标悬停动画
animationEasing: 'cubicOut',//设置动画缓动效果
//取消显示饼图自带数据线条
labelLine: {
normal: {
show: false
}
},
//增加阴影效果
itemStyle: {
normal: {
shadowBlur: 200,
shadowColor: 'rgba(44, 196, 196, 0.8)'
}
},
data: [
//value当前进度 + 颜色
{
value: this.truckDynamicListData.rate ? (parseFloat(this.truckDynamicListData.rate) > 100 ? 100 : this.truckDynamicListData.rate) : 0,
itemStyle: {
normal: {
color: 'rgb(2,220,251)'
}
}
},
//(maxValue进度条最大值 - value当前进度) + 颜色
{
value: maxValue - parseInt(this.truckDynamicListData.rate ? (parseFloat(this.truckDynamicListData.rate) > 100 ? 100 : this.truckDynamicListData.rate) : 0),
itemStyle: {
normal: {
color: 'rgb(0,34,125)'
}
}
}
]
}]
};
pipe.setOption(option);
},
//切换车牌号
xuanzekuang1Fn(){
this.truckDynamicListData.number = this.xuanzekuangValue;
HttpReq.truckDispatching.apiManmadesRealQuery1({number:this.truckDynamicListData.number}).then((res) => {
if(res.length != 0){
this.truckDynamicListData.rate = res[0].rate;
this.truckDynamicListData.carry = res[0].carry;
this.truckDynamicListData.workTime = res[0].workTime;
this.truckDynamicListData.mil = res[0].mil;
this.truckDynamicListData.startTime = res[0].startTime;
this.truckDynamicListData.endTime = res[0].endTime;
this.truckDynamicListData.loadArea = res[0].loadArea;
this.truckDynamicListData.unloadArea = res[0].unloadArea;
}else{
this.truckDynamicListData.rate = 0;
this.truckDynamicListData.carry = 0;
this.truckDynamicListData.workTime = 0;
this.truckDynamicListData.mil = 0;
this.truckDynamicListData.startTime = '无';
this.truckDynamicListData.endTime = '无';
this.truckDynamicListData.loadArea = '无';
this.truckDynamicListData.unloadArea = '无';
} }
this.kachedongtaiEcharts(); }
}) }
}, ]
}]
};
pipe.setOption(option);
}, },
beforeDestroy(){ //切换车牌号
if(this.DPcomputer13BoxTimer) { xuanzekuang1Fn() {
clearInterval(this.DPcomputer13BoxTimer); this.truckDynamicListData.number = this.xuanzekuangValue;
this.DPcomputer13BoxTimer = null; this.initData();
} },
},
beforeDestroy() {
if (this.DPcomputer13BoxTimer) {
clearInterval(this.DPcomputer13BoxTimer);
this.DPcomputer13BoxTimer = null;
} }
}
} }
</script> </script>
<style scoped> <style scoped>
/deep/.el-input--small { /deep/ .el-input--small {
opacity: 0; opacity: 0;
} }
/deep/.el-select-dropdown__list {
/deep/ .el-select-dropdown__list {
padding: 0; padding: 0;
max-height: 180px; max-height: 180px;
overflow-y: auto; overflow-y: auto;
} }
/deep/.el-select-dropdown__list::-webkit-scrollbar {
/deep/ .el-select-dropdown__list::-webkit-scrollbar {
display: none; display: none;
} }
.el-select-dropdown__item.hover, .el-select-dropdown__item:hover { .el-select-dropdown__item.hover, .el-select-dropdown__item:hover {
background-color: #021445 !important; background-color: #021445 !important;
color: #31E5F5; color: #31E5F5;
} }
.el-select-dropdown__item.selected{
.el-select-dropdown__item.selected {
background-color: #021445 !important; background-color: #021445 !important;
color: #31E5F5; color: #31E5F5;
font-weight: 800; font-weight: 800;
...@@ -284,95 +284,107 @@ export default { ...@@ -284,95 +284,107 @@ export default {
} }
</style> </style>
<style scoped> <style scoped>
*{ * {
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
.DPcomputer13Box{
width: 20vw; .DPcomputer13Box {
height: 32vh; width: 20vw;
background-color: rgba(32,42,67,0.95); height: 32vh;
padding: 5px 7px; background-color: rgba(32, 42, 67, 0.95);
box-sizing: border-box; padding: 5px 7px;
overflow: hidden; box-sizing: border-box;
overflow: hidden;
} }
.DPcomputer13Box .carManScrView_rightView_title{
margin-bottom: 5px; .DPcomputer13Box .carManScrView_rightView_title {
width: 100%; margin-bottom: 5px;
height: 3.5vh; width: 100%;
background:no-repeat center center url('~@/assets/images/cutGraph/biaoti1.png'); height: 3.5vh;
background-size:100% 100%; background: no-repeat center center url('~@/assets/images/cutGraph/biaoti1.png');
padding-left: 10px; background-size: 100% 100%;
box-sizing: border-box; padding-left: 10px;
font-size: 18px; box-sizing: border-box;
line-height: 3.5vh; font-size: 18px;
color: #FAFAFB; line-height: 3.5vh;
letter-spacing: 1px; color: #FAFAFB;
text-shadow: 1px 1px 1px #92CBFF; letter-spacing: 1px;
text-shadow: 1px 1px 1px #92CBFF;
} }
.DPcomputer13Box .carManScrView_rightView_content{
width: 100%; .DPcomputer13Box .carManScrView_rightView_content {
height: 27vh; width: 100%;
position: relative; height: 27vh;
position: relative;
} }
.DPcomputer13Box .carDynamicTitleStyle{
display: flex; .DPcomputer13Box .carDynamicTitleStyle {
width: 100%; display: flex;
height: 3.5vh; width: 100%;
align-items: center; height: 3.5vh;
align-items: center;
} }
.DPcomputer13Box .carDynamicTitleStyle>div{
margin-left: 10px; .DPcomputer13Box .carDynamicTitleStyle > div {
height: 3.5vh; margin-left: 10px;
width: 6vw; height: 3.5vh;
background:no-repeat center center url('~@/assets/images/cutGraph/xingzhuang9kaobei2.png'); width: 6vw;
background-size:100% 100%; background: no-repeat center center url('~@/assets/images/cutGraph/xingzhuang9kaobei2.png');
line-height: 3.5vh; background-size: 100% 100%;
text-align: center; line-height: 3.5vh;
color: #06EFFE; text-align: center;
font-weight: 600; color: #06EFFE;
font-size: 17px; font-weight: 600;
font-size: 17px;
} }
.DPcomputer13Box .truckDynamicContent1{
position: relative; .DPcomputer13Box .truckDynamicContent1 {
margin-top: 1vh; position: relative;
display: flex; margin-top: 1vh;
align-items: center; display: flex;
font-weight: 600; align-items: center;
justify-content: space-evenly; font-weight: 600;
justify-content: space-evenly;
} }
.DPcomputer13Box .kachedongtaiRateClass{
height: 90px; .DPcomputer13Box .kachedongtaiRateClass {
width: 90px; height: 90px;
width: 90px;
} }
.DPcomputer13Box .carDynamicContent1{
width: 100%; .DPcomputer13Box .carDynamicContent1 {
height: 7vh; width: 100%;
height: 7vh;
} }
.DPcomputer13Box .carDynamicContent1>div{
color: #06EFFE; .DPcomputer13Box .carDynamicContent1 > div {
margin-top: 5px; color: #06EFFE;
display: flex; margin-top: 5px;
justify-content: space-around; display: flex;
align-items: center; justify-content: space-around;
align-items: center;
} }
.DPcomputer13Box .carDynamicContent2{
width: 100%; .DPcomputer13Box .carDynamicContent2 {
height: 5vh; width: 100%;
display: flex; height: 5vh;
justify-content: space-between; display: flex;
align-items: center; justify-content: space-between;
padding: 0px 10px; align-items: center;
box-sizing: border-box; padding: 0px 10px;
color: #03BFFD; box-sizing: border-box;
color: #03BFFD;
} }
.DPcomputer13Box .carDynamicContent2>span{
transform: rotateZ(90deg); .DPcomputer13Box .carDynamicContent2 > span {
font-size: 30px; transform: rotateZ(90deg);
font-size: 30px;
} }
.DPcomputer13Box .xuanzekuang1{
position: absolute; .DPcomputer13Box .xuanzekuang1 {
top: 0.1vh; position: absolute;
left: 3vw; top: 0.1vh;
left: 3vw;
} }
</style> </style>
src/views/MLargeScreen/components/smallComponents/DPcomputer14.vue
View file @ 30b11f22
<template> <template>
<div class="DPcomputer14Box"> <div class="DPcomputer14Box">
<!-- 铲车动态--> <!-- 铲车动态-->
<div class="carManScrView_rightView_title">铲车动态</div> <div class="carManScrView_rightView_title">铲车动态</div>
<div class="carManScrView_rightView_content"> <div class="carManScrView_rightView_content">
<div class="carDynamicTitleStyle"> <div class="carDynamicTitleStyle">
<img src="../../../../assets/images/cutGraph/huoche11.png" height="28"> <img src="../../../../assets/images/cutGraph/huoche11.png" height="28">
<div>{{forkliftkDynamicListData.number ? forkliftkDynamicListData.number : '无'}}</div> <div>{{ forkliftkDynamicListData.number ? forkliftkDynamicListData.number : '无' }}</div>
</div> </div>
<div class="xuanzekuang1"> <div class="xuanzekuang1">
<el-select v-model="xuanzekuangValue" placeholder="请选择" style="width:5vw;" @change="xuanzekuang1Fn()" :popper-append-to-body="false"> <el-select v-model="xuanzekuangValue" placeholder="请选择" style="width:5vw;" @change="xuanzekuang1Fn()"
<el-option v-for="item in forkliftkDynamicListData.data" :key="item.number" :label="item.number" :value="item.number"></el-option> :popper-append-to-body="false">
</el-select> <el-option v-for="item in forkliftkDynamicListData.data" :key="item.number" :label="item.number"
</div> :value="item.number"></el-option>
<div class="ForkliftDynamicContent1"> </el-select>
<div> </div>
<div>今日完成量</div> <div class="ForkliftDynamicContent1">
<div class="ForkliftDynamicContent1_son1">{{forkliftkDynamicListData.rate ? forkliftkDynamicListData.rate : 0}}</div> <div>
</div> <div>今日完成量</div>
<div> <div class="ForkliftDynamicContent1_son1">
<div>今日工时/H</div> {{ forkliftkDynamicListData.rate ? forkliftkDynamicListData.rate : 0 }}
<div class="ForkliftDynamicContent1_son1">{{forkliftkDynamicListData.workTime ? forkliftkDynamicListData.workTime : 0}}</div> </div>
</div>
<div>
<div>今日效率</div>
<div class="ForkliftDynamicContent1_son1">
{{
forkliftkDynamicListData.workTime != 0 ?
(forkliftkDynamicListData.rate ?
(parseFloat(forkliftkDynamicListData.rate) / parseFloat(forkliftkDynamicListData.workTime)).toFixed(0)
: 0)
: (forkliftkDynamicListData.rate == 0) ? 0 : 100
}}%
</div>
</div>
</div>
<div class="carDynamicContent1">
<div>
<img src="../../../../assets/images/cutGraph/mokuaikaobei4.png">
<div>开始工作时间</div>
<div>{{forkliftkDynamicListData.startTime ? forkliftkDynamicListData.startTime : '无'}}</div>
</div>
<div>
<img src="../../../../assets/images/cutGraph/mokuaikaobei4.png">
<div>结束工作时间</div>
<div>{{forkliftkDynamicListData.endTime ? forkliftkDynamicListData.endTime : '无'}}</div>
</div>
</div>
<div class="carDynamicContent2">
<img src="../../../../assets/images/cutGraph/tuiyuan1.png">
<div>
<div style="color:white;text-align: center;">{{forkliftkDynamicListData.loadArea ? forkliftkDynamicListData.loadArea : '无'}}</div>
<img src="../../../../assets/images/cutGraph/zu2603.png">
<div style="color:white;text-align: center;">{{forkliftkDynamicListData.unloadArea ? forkliftkDynamicListData.unloadArea : '无'}}</div>
</div>
<img src="../../../../assets/images/cutGraph/tuiyuan2.png">
</div>
</div> </div>
<div>
<div>今日工时/H</div>
<div class="ForkliftDynamicContent1_son1">
{{ forkliftkDynamicListData.workTime ? forkliftkDynamicListData.workTime : 0 }}
</div>
</div>
<div>
<div>今日效率T/H</div>
<div class="ForkliftDynamicContent1_son1">
{{
forkliftkDynamicListData.workTime != 0 ?
(forkliftkDynamicListData.rate ?
(parseFloat(forkliftkDynamicListData.rate) / parseFloat(forkliftkDynamicListData.workTime)).toFixed(0)
: 0)
: (forkliftkDynamicListData.rate == 0) ? 0 : 100
}}
</div>
</div>
</div>
<div class="carDynamicContent1">
<div>
<img src="../../../../assets/images/cutGraph/mokuaikaobei4.png">
<div>开始装车时间</div>
<div>{{ forkliftkDynamicListData.startTime ? forkliftkDynamicListData.startTime : '无' }}</div>
</div>
<div>
<img src="../../../../assets/images/cutGraph/mokuaikaobei4.png">
<div>预计完成时间</div>
<div>{{ forkliftkDynamicListData.endTime ? forkliftkDynamicListData.endTime : '无' }}</div>
</div>
</div>
<div class="carDynamicContent2">
<img src="../../../../assets/images/cutGraph/tuiyuan1.png">
<div>
<div style="color:white;text-align: center;">
{{ forkliftkDynamicListData.loadArea ? forkliftkDynamicListData.loadArea : '' }}
</div>
<img src="../../../../assets/images/cutGraph/zu2603.png">
<div style="color:white;text-align: center;">
{{ forkliftkDynamicListData.unloadArea ? forkliftkDynamicListData.unloadArea : '' }}
</div>
</div>
<img src="../../../../assets/images/cutGraph/tuiyuan2.png">
</div>
</div> </div>
</div>
</template> </template>
<script> <script>
import { Tools, HttpReq, CAMap} from '@/assets/js/common.js'; import {Tools, HttpReq, CAMap} from '@/assets/js/common.js';
export default { export default {
data(){ data() {
return { return {
DPcomputer14BoxTimer:null, DPcomputer14BoxTimer: null,
xuanzekuangValue:'', xuanzekuangValue: '',
//铲车动态 //铲车动态
forkliftkDynamicListData:{ forkliftkDynamicListData: {
data:[], data: [],
num2:0, num2: 0,
number:'无', number: '无',
rate:0, rate: 0,
carry:0, carry: 0,
workTime:0, workTime: 0,
mil:0, mil: 0,
startTime:'无', startTime: '无',
endTime:'无', endTime: '无',
loadArea:'无', loadArea: '',
unloadArea:'无', unloadArea: '',
}, },
}
},
mounted() {
this.loadData();
},
methods: {
loadData() {
//获取车辆信息
HttpReq.truckDispatching.carInformationQuery({size: 9999}).then((res) => {
let arr2 = [];
if (res.code == 200) {
res.data.content.forEach((item, index) => {
if (item.carclass == '铲车') {
arr2.push(item);
}
})
} }
this.forkliftkDynamicListData.data = arr2;
this.forkliftkDynamicListData.num2 = 0;
this.dianchandongtai();
this.DPcomputer14BoxTimer = setInterval(() => {
this.dianchandongtai();
}, 20000)
})
}, },
mounted(){ //铲车动态
this.loadData(); dianchandongtai() {
}, let num1 = parseInt(this.forkliftkDynamicListData.data.length) - 1;
methods:{ //获取车辆实时数据
loadData(){ if (this.forkliftkDynamicListData.num2 <= num1) {
//获取车辆信息
HttpReq.truckDispatching.carInformationQuery({size:9999}).then((res) => {
let arr2 = [];
if(res.code == 200){
res.data.content.forEach((item,index)=>{
if(item.carclass == '铲车'){
arr2.push(item);
}
})
}
this.forkliftkDynamicListData.data = arr2;
this.forkliftkDynamicListData.num2 = 0;
this.dianchandongtai();
this.DPcomputer14BoxTimer = setInterval(() => {
this.dianchandongtai();
},20000)
})
},
//铲车动态
dianchandongtai(){
let num1 = parseInt(this.forkliftkDynamicListData.data.length) - 1;
//获取车辆实时数据
if(this.forkliftkDynamicListData.num2 <= num1){
}else{ } else {
this.forkliftkDynamicListData.num2 = 0; this.forkliftkDynamicListData.num2 = 0;
} }
if(this.forkliftkDynamicListData.data == 0){ if (this.forkliftkDynamicListData.data == 0) {
return return
} }
this.forkliftkDynamicListData.number = this.forkliftkDynamicListData.data[this.forkliftkDynamicListData.num2].number; this.forkliftkDynamicListData.number = this.forkliftkDynamicListData.data[this.forkliftkDynamicListData.num2].number;
HttpReq.truckDispatching.apiManmadesChancheRealQuery1({number:this.forkliftkDynamicListData.number}).then((res) => { this.initData();
if(res.data.length != 0){
this.forkliftkDynamicListData.rate = res.data[0].carry; },
this.forkliftkDynamicListData.carry = res.data[0].carry; initData(){
this.forkliftkDynamicListData.workTime = res.data[0].workTime; HttpReq.truckDispatching.dpCcDynamics({carNumber: this.forkliftkDynamicListData.number}).then((res) => {
this.forkliftkDynamicListData.mil = res.data[0].mil; if (res.data) {
this.forkliftkDynamicListData.startTime = res.data[0].startTime; let d=res.data;
this.forkliftkDynamicListData.endTime = res.data[0].endTime; this.forkliftkDynamicListData.rate = d.todayEfficiency;
this.forkliftkDynamicListData.loadArea = res.data[0].loadArea; this.forkliftkDynamicListData.carry = d.todayWeight;
this.forkliftkDynamicListData.unloadArea = res.data[0].unloadArea; this.forkliftkDynamicListData.workTime = d.todayWorkingHours;
}else{ this.forkliftkDynamicListData.startTime = d.zcStartTime;
this.forkliftkDynamicListData.rate = 0; this.forkliftkDynamicListData.endTime = d.zcExpectedCompletionTime;
this.forkliftkDynamicListData.carry = 0; this.forkliftkDynamicListData.loadArea = d.cPoint;
this.forkliftkDynamicListData.workTime = 0; } else {
this.forkliftkDynamicListData.mil = 0; this.forkliftkDynamicListData.rate = 0;
this.forkliftkDynamicListData.startTime = '无'; this.forkliftkDynamicListData.carry = 0;
this.forkliftkDynamicListData.endTime = '无'; this.forkliftkDynamicListData.workTime = 0;
this.forkliftkDynamicListData.loadArea = '无'; this.forkliftkDynamicListData.mil = 0;
this.forkliftkDynamicListData.unloadArea = '无'; this.forkliftkDynamicListData.startTime = '无';
} this.forkliftkDynamicListData.endTime = '无';
this.forkliftkDynamicListData.num2 = this.forkliftkDynamicListData.num2 + 1; this.forkliftkDynamicListData.loadArea = '';
}) this.forkliftkDynamicListData.unloadArea = '';
}, }
//切换车牌号 this.forkliftkDynamicListData.num2 = this.forkliftkDynamicListData.num2 + 1;
xuanzekuang1Fn(){ })
this.forkliftkDynamicListData.number = this.xuanzekuangValue;
HttpReq.truckDispatching.apiManmadesChancheRealQuery1({number:this.forkliftkDynamicListData.number}).then((res) => {
if(res.data.length != 0){
this.forkliftkDynamicListData.rate = res.data[0].carry;
this.forkliftkDynamicListData.carry = res.data[0].carry;
this.forkliftkDynamicListData.workTime = res.data[0].workTime;
this.forkliftkDynamicListData.mil = res.data[0].mil;
this.forkliftkDynamicListData.startTime = res.data[0].startTime;
this.forkliftkDynamicListData.endTime = res.data[0].endTime;
this.forkliftkDynamicListData.loadArea = res.data[0].loadArea;
this.forkliftkDynamicListData.unloadArea = res.data[0].unloadArea;
}else{
this.forkliftkDynamicListData.rate = 0;
this.forkliftkDynamicListData.carry = 0;
this.forkliftkDynamicListData.workTime = 0;
this.forkliftkDynamicListData.mil = 0;
this.forkliftkDynamicListData.startTime = '无';
this.forkliftkDynamicListData.endTime = '无';
this.forkliftkDynamicListData.loadArea = '无';
this.forkliftkDynamicListData.unloadArea = '无';
}
})
},
}, },
beforeDestroy(){ //切换车牌号
if(this.DPcomputer14BoxTimer) { xuanzekuang1Fn() {
clearInterval(this.DPcomputer14BoxTimer); this.forkliftkDynamicListData.number = this.xuanzekuangValue;
this.DPcomputer14BoxTimer = null; this.initData();
} },
},
beforeDestroy() {
if (this.DPcomputer14BoxTimer) {
clearInterval(this.DPcomputer14BoxTimer);
this.DPcomputer14BoxTimer = null;
} }
}
} }
</script> </script>
<style scoped> <style scoped>
/deep/.el-input--small { /deep/ .el-input--small {
opacity: 0; opacity: 0;
} }
/deep/.el-select-dropdown__list {
/deep/ .el-select-dropdown__list {
padding: 0; padding: 0;
max-height: 180px; max-height: 180px;
overflow-y: auto; overflow-y: auto;
} }
/deep/.el-select-dropdown__list::-webkit-scrollbar {
/deep/ .el-select-dropdown__list::-webkit-scrollbar {
display: none; display: none;
} }
.el-select-dropdown__item.hover, .el-select-dropdown__item:hover { .el-select-dropdown__item.hover, .el-select-dropdown__item:hover {
background-color: #021445 !important; background-color: #021445 !important;
color: #31E5F5; color: #31E5F5;
} }
.el-select-dropdown__item.selected{
.el-select-dropdown__item.selected {
background-color: #021445 !important; background-color: #021445 !important;
color: #31E5F5; color: #31E5F5;
font-weight: 800; font-weight: 800;
...@@ -209,106 +206,119 @@ export default { ...@@ -209,106 +206,119 @@ export default {
} }
</style> </style>
<style scoped> <style scoped>
*{ * {
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
.DPcomputer14Box{
width: 20vw; .DPcomputer14Box {
height: 32vh; width: 20vw;
background-color: rgba(32,42,67,0.95); height: 32vh;
padding: 5px 7px; background-color: rgba(32, 42, 67, 0.95);
box-sizing: border-box; padding: 5px 7px;
overflow: hidden; box-sizing: border-box;
overflow: hidden;
} }
.DPcomputer14Box .carManScrView_rightView_title{
margin-bottom: 5px; .DPcomputer14Box .carManScrView_rightView_title {
width: 100%; margin-bottom: 5px;
height: 3.5vh; width: 100%;
background:no-repeat center center url('~@/assets/images/cutGraph/biaoti1.png'); height: 3.5vh;
background-size:100% 100%; background: no-repeat center center url('~@/assets/images/cutGraph/biaoti1.png');
padding-left: 10px; background-size: 100% 100%;
box-sizing: border-box; padding-left: 10px;
font-size: 18px; box-sizing: border-box;
line-height: 3.5vh; font-size: 18px;
color: #FAFAFB; line-height: 3.5vh;
letter-spacing: 1px; color: #FAFAFB;
text-shadow: 1px 1px 1px #92CBFF; letter-spacing: 1px;
text-shadow: 1px 1px 1px #92CBFF;
} }
.DPcomputer14Box .carManScrView_rightView_content{
width: 100%; .DPcomputer14Box .carManScrView_rightView_content {
height: 27vh; width: 100%;
position: relative; height: 27vh;
position: relative;
} }
.DPcomputer14Box .carDynamicTitleStyle{
display: flex; .DPcomputer14Box .carDynamicTitleStyle {
width: 100%; display: flex;
height: 3.5vh; width: 100%;
align-items: center; height: 3.5vh;
align-items: center;
} }
.DPcomputer14Box .carDynamicTitleStyle>div{
margin-left: 10px; .DPcomputer14Box .carDynamicTitleStyle > div {
height: 3.5vh; margin-left: 10px;
width: 6vw; height: 3.5vh;
background:no-repeat center center url('~@/assets/images/cutGraph/xingzhuang9kaobei2.png'); width: 6vw;
background-size:100% 100%; background: no-repeat center center url('~@/assets/images/cutGraph/xingzhuang9kaobei2.png');
line-height: 3.5vh; background-size: 100% 100%;
text-align: center; line-height: 3.5vh;
color: #06EFFE; text-align: center;
font-weight: 600; color: #06EFFE;
font-size: 17px; font-weight: 600;
font-size: 17px;
} }
.DPcomputer14Box .ForkliftDynamicContent1{
margin-top: 0.3vh; .DPcomputer14Box .ForkliftDynamicContent1 {
display: flex; margin-top: 0.3vh;
justify-content: space-between; display: flex;
width: 100%; justify-content: space-between;
height: 10vh; width: 100%;
font-size: 15px; height: 10vh;
font-size: 15px;
} }
.DPcomputer14Box .ForkliftDynamicContent1>div{
width: 33%; .DPcomputer14Box .ForkliftDynamicContent1 > div {
text-align: center; width: 33%;
color: white; text-align: center;
color: white;
} }
.DPcomputer14Box .ForkliftDynamicContent1_son1{
margin: 0px auto; .DPcomputer14Box .ForkliftDynamicContent1_son1 {
width: 4.3vw; margin: 0px auto;
height: 4.3vw; width: 4.3vw;
line-height: 4.3vw; height: 4.3vw;
font-size: 20px; line-height: 4.3vw;
background:no-repeat center center url('~@/assets/images/cutGraph/bilikuang1.png'); font-size: 20px;
background-size:100% 100%; background: no-repeat center center url('~@/assets/images/cutGraph/bilikuang1.png');
background-size: 100% 100%;
} }
.DPcomputer14Box .carDynamicContent1{
width: 100%; .DPcomputer14Box .carDynamicContent1 {
height: 7vh; width: 100%;
height: 7vh;
} }
.DPcomputer14Box .carDynamicContent1>div{
color: #06EFFE; .DPcomputer14Box .carDynamicContent1 > div {
margin-top: 5px; color: #06EFFE;
display: flex; margin-top: 5px;
justify-content: space-around; display: flex;
align-items: center; justify-content: space-around;
align-items: center;
} }
.DPcomputer14Box .carDynamicContent2{
width: 100%; .DPcomputer14Box .carDynamicContent2 {
height: 5vh; width: 100%;
display: flex; height: 5vh;
justify-content: space-between; display: flex;
align-items: center; justify-content: space-between;
padding: 0px 10px; align-items: center;
box-sizing: border-box; padding: 0px 10px;
color: #03BFFD; box-sizing: border-box;
color: #03BFFD;
} }
.DPcomputer14Box .carDynamicContent2>span{
transform: rotateZ(90deg); .DPcomputer14Box .carDynamicContent2 > span {
font-size: 30px; transform: rotateZ(90deg);
font-size: 30px;
} }
.DPcomputer14Box .xuanzekuang1{
position: absolute; .DPcomputer14Box .xuanzekuang1 {
top: 0.1vh; position: absolute;
left: 3vw; top: 0.1vh;
/*opacity: 0;*/ left: 3vw;
/*opacity: 0;*/
} }
</style> </style>
src/views/MLargeScreen/components/smallComponents/DPcomputer15.vue
View file @ 30b11f22
...@@ -41,9 +41,9 @@ ...@@ -41,9 +41,9 @@
<div class="carDynamicContent2"> <div class="carDynamicContent2">
<img src="../../../../assets/images/cutGraph/tuiyuan1.png"> <img src="../../../../assets/images/cutGraph/tuiyuan1.png">
<div> <div>
<div style="color:white;text-align: center;">{{otherCarDynamicListData.loadArea ? otherCarDynamicListData.loadArea : '无'}}</div> <div style="color:white;text-align: center;">{{otherCarDynamicListData.loadArea ? otherCarDynamicListData.loadArea : ''}}</div>
<img src="../../../../assets/images/cutGraph/zu2603.png"> <img src="../../../../assets/images/cutGraph/zu2603.png">
<div style="color:white;text-align: center;">{{otherCarDynamicListData.unloadArea ? otherCarDynamicListData.unloadArea : '无'}}</div> <div style="color:white;text-align: center;">{{otherCarDynamicListData.unloadArea ? otherCarDynamicListData.unloadArea : ''}}</div>
</div> </div>
<img src="../../../../assets/images/cutGraph/tuiyuan2.png"> <img src="../../../../assets/images/cutGraph/tuiyuan2.png">
</div> </div>
...@@ -71,8 +71,8 @@ export default { ...@@ -71,8 +71,8 @@ export default {
mil:0, mil:0,
startTime:'无', startTime:'无',
endTime:'无', endTime:'无',
loadArea:'无', loadArea:'',
unloadArea:'无', unloadArea:'',
}, },
} }
}, },
...@@ -135,8 +135,8 @@ export default { ...@@ -135,8 +135,8 @@ export default {
this.otherCarDynamicListData.mil = 0; this.otherCarDynamicListData.mil = 0;
this.otherCarDynamicListData.startTime = '无'; this.otherCarDynamicListData.startTime = '无';
this.otherCarDynamicListData.endTime = '无'; this.otherCarDynamicListData.endTime = '无';
this.otherCarDynamicListData.loadArea = '无'; this.otherCarDynamicListData.loadArea = '';
this.otherCarDynamicListData.unloadArea = '无'; this.otherCarDynamicListData.unloadArea = '';
} }
this.otherCarDynamicListData.num2 = this.otherCarDynamicListData.num2 + 1; this.otherCarDynamicListData.num2 = this.otherCarDynamicListData.num2 + 1;
}) })
...@@ -161,8 +161,8 @@ export default { ...@@ -161,8 +161,8 @@ export default {
this.otherCarDynamicListData.mil = 0; this.otherCarDynamicListData.mil = 0;
this.otherCarDynamicListData.startTime = '无'; this.otherCarDynamicListData.startTime = '无';
this.otherCarDynamicListData.endTime = '无'; this.otherCarDynamicListData.endTime = '无';
this.otherCarDynamicListData.loadArea = '无'; this.otherCarDynamicListData.loadArea = '';
this.otherCarDynamicListData.unloadArea = '无'; this.otherCarDynamicListData.unloadArea = '';
} }
}) })
}, },
......
src/views/MLargeScreen/components/smallComponents/DPcomputer18.vue
View file @ 30b11f22
<template> <template>
<div class="DPcomputer18Box"> <div class="DPcomputer18Box">
<!-- 智能调度信息 --> <!-- 智能调度信息 -->
<div class="intelligentSchScrView_rightView_title">车辆调度信息</div> <div class="intelligentSchScrView_rightView_title">车辆调度信息</div>
<div class="intelligentSchScrView_rightView_content"> <div class="intelligentSchScrView_rightView_content">
<div class="intelligentSchScrView_rightView_content_1_top"> <div class="intelligentSchScrView_rightView_content_1_top">
<div> <div>
<img src="../../../../assets/images/cutGraph/zhengzaijinxing1.png"> <img src="../../../../assets/images/cutGraph/zhengzaijinxing1.png">
<div style="color:#F8D909;text-align: center;"> <div style="color:#F8D909;text-align: center;">
<div style="font-size:16px;">正在派送中</div> <div style="font-size:16px;">正在派送中</div>
<div style="font-size:22px;">{{dispatchLoadingNum}}</div> <div style="font-size:22px;">{{ numberOfDispatching }}</div>
</div> </div>
</div>
<div>
<img src="../../../../assets/images/cutGraph/wanchengle1.png">
<div style="color:#01EDF7;text-align: center;">
<div style="font-size:16px;">已经完成的</div>
<div style="font-size:22px;">{{dispatchFinishNum}}</div>
</div>
</div>
</div>
<div class="intelligentSchScrView_rightView_content_1_bottom">
<div class="intelligentSchScrView_rightView_content_1_bottom_rolling">
<div class="table-box">
<dl>
<dt>
<div>车牌号</div>
<div>起点</div>
<div>调度时间</div>
<div>状态</div>
<div>目的地</div>
</dt>
<dd v-for="(item,index) in dispatchDetailsList" :key="index">
<div>{{item.carNo}}</div>
<div>{{item.startAdr}}</div>
<div>{{item.createTime}}</div>
<div>{{item.status == 0 ? '接单中' : item.status == 1 ? '已完成' : '未完成'}}</div>
<div>{{item.destination}}</div>
</dd>
</dl>
</div>
</div>
</div>
</div> </div>
<div>
<img src="../../../../assets/images/cutGraph/wanchengle1.png">
<div style="color:#01EDF7;text-align: center;">
<div style="font-size:16px;">已经完成的</div>
<div style="font-size:22px;">{{ numberOfDispatched }}</div>
</div>
</div>
</div>
<div class="intelligentSchScrView_rightView_content_1_bottom">
<div class="intelligentSchScrView_rightView_content_1_bottom_rolling">
<div class="table-box">
<dl>
<dt>
<div>车牌号</div>
<div>起点</div>
<div>状态</div>
<div>目标</div>
<div>时间</div>
</dt>
<dd v-for="(item,index) in dispatchingDetails" :key="index">
<div>{{ item.carNumber }}</div>
<div>{{ item.startArea }}</div>
<div>{{ item.status}}</div>
<div>{{ item.endArea }}</div>
<div>{{ formatTime(item.dispatchingTime) }}</div>
</dd>
</dl>
</div>
</div>
</div>
</div> </div>
</div>
</template> </template>
<script> <script>
import { Tools, HttpReq, CAMap} from '@/assets/js/common.js'; import {Tools, HttpReq, CAMap} from '@/assets/js/common.js';
export default { export default {
data(){ data() {
return { return {
DPcomputer18BoxTimer:null, DPcomputer18BoxTimer: null,
dispatchLoadingNum:0, //智能调度进行中 numberOfDispatching: 0, //智能调度进行中
dispatchFinishNum:0, //智能调度已完成 numberOfDispatched: 0, //智能调度已完成
dispatchDetailsList:[], //智能调度情况表 dispatchingDetails: [], //智能调度情况表
}
},
mounted() {
this.loadData();
this.DPcomputer18BoxTimer = setInterval(() => {
this.loadData();
}, 10000)
},
methods: {
loadData() {
HttpReq.truckDispatching.dpCarDispatchInformation().then((res) => {
if(res.data){
this.numberOfDispatching=res.data.numberOfDispatching;
this.numberOfDispatched=res.data.numberOfDispatched;
this.dispatchingDetails=res.data.dispatchingDetails;
} }
})
}, },
mounted(){ formatTime(t) {
this.loadData(); let d = new Date(t);
}, return `${('0' + (d.getHours() + 1)).substr(-2)}:${('0' + (d.getMonth() + 1)).substr(-2)}:${('0' + (d.getSeconds())).substr(-2)}`;
methods:{
loadData(){
//智能调度情况
HttpReq.truckDispatching.getLargeScreen1({size:100,sort:'createTime,desc'}).then((res) => {
this.dispatchDetailsList = res;
})
//获取智能调度情况中的进行中数量
HttpReq.truckDispatching.getLargeScreenUnder1({size:9999}).then((res) => {
if(res.length == 0){
this.dispatchLoadingNum = 0;
}else{
this.dispatchLoadingNum = res[0].under;
}
})
//获取智能调度情况中的已完成数量
HttpReq.truckDispatching.getLargeScreenRound1({size:9999}).then((res) => {
if(res.length == 0){
this.dispatchFinishNum = 0;
}else{
this.dispatchFinishNum = res[0].round;
}
})
this.DPcomputer18BoxTimer = setInterval(() => {
//智能调度情况
HttpReq.truckDispatching.getLargeScreen1({size:100,sort:'createTime,desc'}).then((res) => {
this.dispatchDetailsList = res;
})
//获取智能调度情况中的进行中数量
HttpReq.truckDispatching.getLargeScreenUnder1({size:9999}).then((res) => {
if(res.length == 0){
this.dispatchLoadingNum = 0;
}else{
this.dispatchLoadingNum = res[0].under;
}
})
//获取智能调度情况中的已完成数量
HttpReq.truckDispatching.getLargeScreenRound1({size:9999}).then((res) => {
if(res.length == 0){
this.dispatchFinishNum = 0;
}else{
this.dispatchFinishNum = res[0].round;
}
})
}, 10000)
},
},
beforeDestroy(){
if(this.DPcomputer18BoxTimer) {
clearInterval(this.DPcomputer18BoxTimer);
this.DPcomputer18BoxTimer = null;
}
} }
},
beforeDestroy() {
if (this.DPcomputer18BoxTimer) {
clearInterval(this.DPcomputer18BoxTimer);
this.DPcomputer18BoxTimer = null;
}
}
} }
</script> </script>
<style scoped> <style scoped>
*{ * {
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
.DPcomputer18Box{
width: 20vw; .DPcomputer18Box {
height: 32vh; width: 20vw;
background-color: rgba(32,42,67,0.95); height: 32vh;
padding: 5px 7px; background-color: rgba(32, 42, 67, 0.95);
box-sizing: border-box; padding: 5px 7px;
overflow: hidden; box-sizing: border-box;
overflow: hidden;
} }
.DPcomputer18Box .intelligentSchScrView_rightView_title{
margin-bottom: 5px; .DPcomputer18Box .intelligentSchScrView_rightView_title {
width: 100%; margin-bottom: 5px;
height: 3.5vh; width: 100%;
background:no-repeat center center url('~@/assets/images/cutGraph/biaoti1.png'); height: 3.5vh;
background-size:100% 100%; background: no-repeat center center url('~@/assets/images/cutGraph/biaoti1.png');
padding-left: 10px; background-size: 100% 100%;
box-sizing: border-box; padding-left: 10px;
font-size: 18px; box-sizing: border-box;
line-height: 3.5vh; font-size: 18px;
color: #FAFAFB; line-height: 3.5vh;
letter-spacing: 1px; color: #FAFAFB;
text-shadow: 1px 1px 1px #92CBFF; letter-spacing: 1px;
text-shadow: 1px 1px 1px #92CBFF;
} }
.DPcomputer18Box .intelligentSchScrView_rightView_content{
width: 100%; .DPcomputer18Box .intelligentSchScrView_rightView_content {
width: 100%;
} }
.DPcomputer18Box .intelligentSchScrView_rightView_content_1_top{
width: 100%; .DPcomputer18Box .intelligentSchScrView_rightView_content_1_top {
display: flex; width: 100%;
justify-content: space-between; display: flex;
justify-content: space-between;
} }
.DPcomputer18Box .intelligentSchScrView_rightView_content_1_top>div{
width: 49%; .DPcomputer18Box .intelligentSchScrView_rightView_content_1_top > div {
height: 6vh; width: 49%;
background:no-repeat center center url('~@/assets/images/cutGraph/sijirenshu1.png'); height: 6vh;
background-size:100% 100%; background: no-repeat center center url('~@/assets/images/cutGraph/sijirenshu1.png');
display: flex; background-size: 100% 100%;
align-items: center; display: flex;
justify-content: space-evenly; align-items: center;
justify-content: space-evenly;
} }
.DPcomputer18Box .intelligentSchScrView_rightView_content_1_bottom{
width: 100%; .DPcomputer18Box .intelligentSchScrView_rightView_content_1_bottom {
height: 21.5vh; width: 100%;
height: 21.5vh;
} }
.DPcomputer18Box .intelligentSchScrView_rightView_content_1_bottom_rolling{
text-align: center; .DPcomputer18Box .intelligentSchScrView_rightView_content_1_bottom_rolling {
height: 21.5vh; text-align: center;
overflow-y:auto; height: 21.5vh;
scrollbar-width: none; overflow-y: auto;
scrollbar-width: none;
} }
.DPcomputer18Box .intelligentSchScrView_rightView_content_1_bottom_rolling::-webkit-scrollbar { .DPcomputer18Box .intelligentSchScrView_rightView_content_1_bottom_rolling::-webkit-scrollbar {
display: none; display: none;
} }
.DPcomputer18Box dl{
display:table; .DPcomputer18Box dl {
width:100%; display: table;
width: 100%;
} }
.DPcomputer18Box dt{
margin-top: 20px; .DPcomputer18Box dt {
display:table-row; margin-top: 20px;
background-color: #274088; display: table-row;
background-color: #274088;
} }
.DPcomputer18Box dt>div{
display:table-cell; .DPcomputer18Box dt > div {
padding:5px 3px; display: table-cell;
font-size: 16px; padding: 5px 3px;
font-weight: 500; font-size: 16px;
color: rgb(24,228,240); font-weight: 500;
color: rgb(24, 228, 240);
} }
.DPcomputer18Box dd{
display:table-row; .DPcomputer18Box dd {
display: table-row;
} }
.DPcomputer18Box dd>div{
display:table-cell; .DPcomputer18Box dd > div {
vertical-align: middle; display: table-cell;
padding:5px 1px; vertical-align: middle;
font-size: 13px; padding: 5px 1px;
color: #A6F6F9; font-size: 13px;
color: #A6F6F9;
} }
</style> </style>
src/views/MLargeScreen/components/smallComponents/DPcomputer19.vue
View file @ 30b11f22
<template> <template>
<div class="DPcomputer19Box"> <div class="DPcomputer19Box">
<!-- 车辆区域分布--> <!-- 车辆区域分布-->
<div class="intelligentSchScrView_rightView_title">车辆区域分布</div> <div class="intelligentSchScrView_rightView_title">车辆区域分布</div>
<div class="intelligentSchScrView_rightView_content"> <div class="intelligentSchScrView_rightView_content">
<div id="carsAreaDistributionView"></div> <div id="carsAreaDistributionView"></div>
</div>
</div> </div>
</div>
</template> </template>
<script> <script>
import { Tools, HttpReq, CAMap} from '@/assets/js/common.js'; import {Tools, HttpReq, CAMap} from '@/assets/js/common.js';
import * as echarts from 'echarts'; import * as echarts from 'echarts';
export default { export default {
data(){ data() {
return { return {
DPcomputer19BoxTimer:null, DPcomputer19BoxTimer: null,
//车辆区域分布Echarts //车辆区域分布Echarts
carsAreaDistributionData:{ carsAreaDistributionData: {
name:[], name: [],
kache:[], kache: [],
chanche:[], chanche: [],
qitache:[], qitache: [],
}, },
}
},
mounted() {
this.loadData();
this.DPcomputer19BoxTimer = setInterval(() => {
this.loadData();
}, 60000)
},
methods: {
loadData() {
//车辆区域分布Echarts
HttpReq.truckDispatching.getLargeScreenfenbu1().then((res) => {
if (res.code == 200) {
let name = [];
let kache = [];
let chanche = [];
let qitache = [];
res.data.forEach((item, index) => {
name.push(item.area);
kache.push(item.kcNumber);
chanche.push(item.ccNumber);
qitache.push(item.otherNumber);
})
this.carsAreaDistributionData.name = name;
this.carsAreaDistributionData.kache = kache;
this.carsAreaDistributionData.chanche = chanche;
this.carsAreaDistributionData.qitache = qitache;
this.carsAreaDistributionEcharts();
} }
}, })
mounted(){
this.loadData();
},
methods:{
loadData(){
//车辆区域分布Echarts
HttpReq.truckDispatching.getLargeScreenfenbu1({size:9999}).then((res) => {
if(res.code == 200){
let name = [];
let kache = [];
let chanche = [];
let qitache = [];
res.data.forEach((item,index)=>{
name.push(item.name);
kache.push(item.truck);
chanche.push(item.shovel);
qitache.push(item.other);
})
this.carsAreaDistributionData.name = name;
this.carsAreaDistributionData.kache = kache;
this.carsAreaDistributionData.chanche = chanche;
this.carsAreaDistributionData.qitache = qitache;
this.carsAreaDistributionEcharts();
}
})
this.DPcomputer19BoxTimer = setInterval(() => {
//车辆区域分布Echarts
HttpReq.truckDispatching.getLargeScreenfenbu1({size:9999}).then((res) => {
if(res.code == 200){
let name = [];
let kache = [];
let chanche = [];
let qitache = [];
res.data.forEach((item,index)=>{
name.push(item.name);
kache.push(item.truck);
chanche.push(item.shovel);
qitache.push(item.other);
})
this.carsAreaDistributionData.name = name;
this.carsAreaDistributionData.kache = kache;
this.carsAreaDistributionData.chanche = chanche;
this.carsAreaDistributionData.qitache = qitache;
this.carsAreaDistributionEcharts();
}
})
},10000)
},
//车辆区域分布Echarts
carsAreaDistributionEcharts() {
let xZoom=Math.ceil(4/this.carsAreaDistributionData.name.length*100);
if(xZoom>100){
xZoom=100
}
echarts.init(document.getElementById('carsAreaDistributionView')).dispose();
var myChart = echarts.init(document.getElementById('carsAreaDistributionView'));
var option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legend: {
textStyle: {
color: 'white',
fontSize: 16,
}
},
grid: {
top: '13%',
left: '1%',
right: '1%',
bottom: '3%',
containLabel: true
}, },
//车辆区域分布Echarts dataZoom: [
carsAreaDistributionEcharts(){ {
echarts.init(document.getElementById('carsAreaDistributionView')).dispose(); type: 'inside',
var myChart = echarts.init(document.getElementById('carsAreaDistributionView')); start: 0,
var option = { end: xZoom
tooltip: { },
trigger: 'axis', {
axisPointer: { start: 0,
type: 'shadow' end: xZoom,
} show: false,
}, }
legend: { ],
textStyle:{ xAxis: {
color: 'white', type: 'category',
fontSize:16, data: this.carsAreaDistributionData.name,
} axisLabel: {
}, interval: 0,
grid: { show: true,
top: '13%', textStyle: {
left: '1%', color: '#A6F6F9',
right: '1%', fontSize: 12,
bottom: '3%', }
containLabel: true },
}, axisLine: {
xAxis: { lineStyle: {
type: 'category', color: '#A6F6F9',
data: this.carsAreaDistributionData.name, width: 1
axisLabel: { }
show: true, },
textStyle: {
color: '#A6F6F9',
fontSize:14,
}
},
axisLine: {
lineStyle: {
color: '#A6F6F9',
width: 1
}
},
},
yAxis: {
type: 'value',
minInterval: 1,
axisLabel: {
show: true,
textStyle: {
color: '#A6F6F9',
fontSize:14,
}
},
axisLine: {
lineStyle: {
color: '#A6F6F9',
width: 0
}
},
},
series: [
{
name: '卡车',
type: 'bar',
stack: 'total',
label: {
show: true
},
data: this.carsAreaDistributionData.kache,
barWidth: 30,
itemStyle: {
color: '#2BBFA8'
},
},
{
name: '铲车',
type: 'bar',
stack: 'total',
label: {
show: true
},
data: this.carsAreaDistributionData.chanche,
barWidth: 35,
itemStyle: {
color: '#DB972D'
},
},
{
name: '其他车辆',
type: 'bar',
stack: 'total',
label: {
show: true
},
data: this.carsAreaDistributionData.qitache,
barWidth: 35,
itemStyle: {
color: '#158DFD'
},
}
]
};
option && myChart.setOption(option);
}, },
yAxis: {
type: 'value',
minInterval: 1,
axisLabel: {
show: true,
textStyle: {
color: '#A6F6F9',
fontSize: 14,
}
},
axisLine: {
lineStyle: {
color: '#A6F6F9',
width: 0
}
},
},
series: [
{
name: '卡车',
type: 'bar',
data: this.carsAreaDistributionData.kache,
itemStyle: {
color: '#2BBFA8'
},
},
{
name: '铲车',
type: 'bar',
data: this.carsAreaDistributionData.chanche,
itemStyle: {
color: '#DB972D'
},
},
{
name: '其他车辆',
type: 'bar',
data: this.carsAreaDistributionData.qitache,
itemStyle: {
color: '#158DFD'
},
}
]
};
option && myChart.setOption(option);
}, },
beforeDestroy(){
if(this.DPcomputer19BoxTimer) { },
clearInterval(this.DPcomputer19BoxTimer); beforeDestroy() {
this.DPcomputer19BoxTimer = null; if (this.DPcomputer19BoxTimer) {
} clearInterval(this.DPcomputer19BoxTimer);
this.DPcomputer19BoxTimer = null;
} }
}
} }
</script> </script>
<style scoped> <style scoped>
*{ * {
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
.DPcomputer19Box{
width: 20vw; .DPcomputer19Box {
height: 32vh; width: 20vw;
background-color: rgba(32,42,67,0.95); height: 32vh;
padding: 5px 7px; background-color: rgba(32, 42, 67, 0.95);
box-sizing: border-box; padding: 5px 7px;
overflow: hidden; box-sizing: border-box;
overflow: hidden;
} }
.DPcomputer19Box .intelligentSchScrView_rightView_title{
margin-bottom: 5px; .DPcomputer19Box .intelligentSchScrView_rightView_title {
width: 100%; margin-bottom: 5px;
height: 3.5vh; width: 100%;
background:no-repeat center center url('~@/assets/images/cutGraph/biaoti1.png'); height: 3.5vh;
background-size:100% 100%; background: no-repeat center center url('~@/assets/images/cutGraph/biaoti1.png');
padding-left: 10px; background-size: 100% 100%;
box-sizing: border-box; padding-left: 10px;
font-size: 18px; box-sizing: border-box;
line-height: 3.5vh; font-size: 18px;
color: #FAFAFB; line-height: 3.5vh;
letter-spacing: 1px; color: #FAFAFB;
text-shadow: 1px 1px 1px #92CBFF; letter-spacing: 1px;
text-shadow: 1px 1px 1px #92CBFF;
} }
.DPcomputer19Box .intelligentSchScrView_rightView_content{
width: 100%; .DPcomputer19Box .intelligentSchScrView_rightView_content {
width: 100%;
} }
.DPcomputer19Box #carsAreaDistributionView{
width: 19vw; .DPcomputer19Box #carsAreaDistributionView {
height: 27.5vh; width: 19vw;
height: 27.5vh;
} }
</style> </style>
\ No newline at end of file
src/views/MLargeScreen/components/smallComponents/DPcomputer20.vue
View file @ 30b11f22
<template> <template>
<div class="DPcomputer20Box"> <div class="DPcomputer20Box">
<!-- 各装点车铲比 --> <!-- 各装点车铲比 -->
<div class="intelligentSchScrView_rightView_title">各装点车铲比</div> <div class="intelligentSchScrView_rightView_title">各装点车铲比</div>
<div class="intelligentSchScrView_rightView_content"> <div class="intelligentSchScrView_rightView_content">
<div id="carsProportionView"></div> <div id="carsProportionView"></div>
</div>
</div> </div>
</div>
</template> </template>
<script> <script>
import { Tools, HttpReq, CAMap} from '@/assets/js/common.js'; import {Tools, HttpReq, CAMap} from '@/assets/js/common.js';
import * as echarts from 'echarts'; import * as echarts from 'echarts';
export default { export default {
data(){ data() {
return { return {
DPcomputer20BoxTimer:null, DPcomputer20BoxTimer: null,
//各装点车铲比Echarts //各装点车铲比Echarts
carsProportionData:[], carsAreaDistributionData: {
name: [],
values: [],
},
}
},
mounted() {
this.loadData();
this.DPcomputer19BoxTimer = setInterval(() => {
this.loadData();
}, 10000)
},
methods: {
loadData() {
//各装点车铲比Echarts
HttpReq.truckDispatching.getLargeScreenchechanbi1().then((res) => {
if (res.code == 200) {
let name = [];
let values = [];
res.data.forEach((item, index) => {
name.push(item.area);
values.push(item.ratio);
})
this.carsAreaDistributionData.name = name;
this.carsAreaDistributionData.values = values;
this.carsProportionEcharts();
} }
})
}, },
mounted(){ //各装点车铲比Echarts
this.loadData(); carsProportionEcharts() {
}, echarts.init(document.getElementById('carsProportionView')).dispose();
methods:{ var myChart = echarts.init(document.getElementById('carsProportionView'));
loadData(){ let xZoom=Math.ceil(4/this.carsAreaDistributionData.name.length*100);
//各装点车铲比Echarts if(xZoom>100){
HttpReq.truckDispatching.getLargeScreenchechanbi1({size:9999}).then((res) => { xZoom=100
if(res.code == 200){ }
this.carsProportionData = res.data; var option = {
this.carsProportionEcharts(); tooltip: {
} trigger: 'axis',
}) axisPointer: {
type: 'shadow'
this.DPcomputer20BoxTimer = setInterval(() => { }
//各装点车铲比Echarts
HttpReq.truckDispatching.getLargeScreenchechanbi1({size:9999}).then((res) => {
if(res.code == 200){
this.carsProportionData = res.data;
this.carsProportionEcharts();
}
})
},10000)
}, },
//各装点车铲比Echarts // legend: {
carsProportionEcharts(){ // textStyle: {
echarts.init(document.getElementById('carsProportionView')).dispose(); // color: 'white',
var myChart = echarts.init(document.getElementById('carsProportionView')); // fontSize: 16,
var option; // }
// },
const data = [this.carsProportionData]; grid: {
option = { top: '10%',
grid: { left: '1%',
top:'13%', right: '1%',
left: '2%', bottom: '5%',
right: '13%', containLabel: true
bottom: '5%', },
containLabel: true dataZoom: [
}, {
xAxis: { type: 'inside',
name: '铲车', start: 0,
nameTextStyle: { fontSize: 14 }, end: xZoom
splitLine: { },
show: false, {
lineStyle: { start: 0,
type: 'dashed' end: xZoom,
} show: false,
}, }
axisLabel: { ],
show: true, xAxis: {
textStyle: { type: 'category',
color: '#A6F6F9', data: this.carsAreaDistributionData.name,
fontSize:14, axisLabel: {
}, interval: 0,
}, show: true,
axisLine: { textStyle: {
lineStyle: { color: '#A6F6F9',
color: '#A6F6F9', fontSize: 12,
width: 1 }
} },
}, axisLine: {
}, lineStyle: {
yAxis: { color: '#A6F6F9',
name: '卡车', width: 1
nameTextStyle: { fontSize: 14 }, }
splitLine: { },
lineStyle: {
type: 'dashed'
}
},
scale: true,
axisLabel: {
show: true,
textStyle: {
color: '#A6F6F9',
fontSize:14,
}
},
axisLine: {
lineStyle: {
color: '#A6F6F9',
width: 0
}
},
},
series: [
{
data: data[0],
type: 'scatter',
symbolSize: 15,
emphasis: {
focus: 'series',
label: {
show: true,
formatter: function (param) {
return param.data[2];
},
position: 'top',
fontSize:16,
}
},
itemStyle: {
color: '#4BF3F9',
}
}
]
};
option && myChart.setOption(option);
}, },
yAxis: {
type: 'value',
minInterval: 1,
axisLabel: {
show: true,
textStyle: {
color: '#A6F6F9',
fontSize: 14,
}
},
axisLine: {
lineStyle: {
color: '#A6F6F9',
width: 0
}
},
},
series: [
{
name: '车铲比',
type: 'bar',
data: this.carsAreaDistributionData.values,
barWidth: 35,
itemStyle: {
color: '#00FFFF'
},
},
]
};
option && myChart.setOption(option);
}, },
beforeDestroy(){ },
if(this.DPcomputer20BoxTimer) { beforeDestroy() {
clearInterval(this.DPcomputer20BoxTimer); if (this.DPcomputer20BoxTimer) {
this.DPcomputer20BoxTimer = null; clearInterval(this.DPcomputer20BoxTimer);
} this.DPcomputer20BoxTimer = null;
} }
}
} }
</script> </script>
<style scoped> <style scoped>
*{ * {
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
.DPcomputer20Box{
width: 20vw; .DPcomputer20Box {
height: 32vh; width: 20vw;
background-color: rgba(32,42,67,0.95); height: 32vh;
padding: 5px 7px; background-color: rgba(32, 42, 67, 0.95);
box-sizing: border-box; padding: 5px 7px;
overflow: hidden; box-sizing: border-box;
overflow: hidden;
} }
.DPcomputer20Box .intelligentSchScrView_rightView_title{
margin-bottom: 5px; .DPcomputer20Box .intelligentSchScrView_rightView_title {
width: 100%; margin-bottom: 5px;
height: 3.5vh; width: 100%;
background:no-repeat center center url('~@/assets/images/cutGraph/biaoti1.png'); height: 3.5vh;
background-size:100% 100%; background: no-repeat center center url('~@/assets/images/cutGraph/biaoti1.png');
padding-left: 10px; background-size: 100% 100%;
box-sizing: border-box; padding-left: 10px;
font-size: 18px; box-sizing: border-box;
line-height: 3.5vh; font-size: 18px;
color: #FAFAFB; line-height: 3.5vh;
letter-spacing: 1px; color: #FAFAFB;
text-shadow: 1px 1px 1px #92CBFF; letter-spacing: 1px;
text-shadow: 1px 1px 1px #92CBFF;
} }
.DPcomputer20Box .intelligentSchScrView_rightView_content{
width: 100%; .DPcomputer20Box .intelligentSchScrView_rightView_content {
width: 100%;
} }
.DPcomputer20Box #carsProportionView{
width: 19vw; .DPcomputer20Box #carsProportionView {
height: 27.5vh; width: 19vw;
height: 27.5vh;
} }
</style> </style>
\ No newline at end of file
src/views/MLargeScreen/index.vue
View file @ 30b11f22
...@@ -70,7 +70,7 @@ ...@@ -70,7 +70,7 @@
<!-- </div>--> <!-- </div>-->
<!-- 嵌入三维地图页面 --> <!-- 嵌入三维地图页面 -->
<!-- <iframe :src="url" frameborder="0" class="mapcontainer1"></iframe>--> <!-- <iframe :src="url" frameborder="0" class="mapcontainer1"></iframe>-->
<iframe ref="iframe" src="http://39.164.225.220:5001//#/Index" frameborder="0" class="mapcontainer1"></iframe> <!-- <iframe ref="iframe" src="http://39.164.225.220:5001//#/Index" frameborder="0" class="mapcontainer1"></iframe>-->
<!-- <iframe ref="iframe" src="http://192.168.3.38:3002/#/Index" frameborder="0" class="mapcontainer1"></iframe>--> <!-- <iframe ref="iframe" src="http://192.168.3.38:3002/#/Index" frameborder="0" class="mapcontainer1"></iframe>-->
<!-- 单个车辆视频监控 --> <!-- 单个车辆视频监控 -->
......
src/views/productionPlanManagement/productionPlan/index.vue
View file @ 30b11f22
...@@ -225,8 +225,13 @@ export default { ...@@ -225,8 +225,13 @@ export default {
showPlanDateSlot() { showPlanDateSlot() {
this.showDateSlot = !this.showDateSlot; this.showDateSlot = !this.showDateSlot;
document.getElementById("planSlotBtn").blur(); document.getElementById("planSlotBtn").blur();
this.planSDate = this.showYear + '-' + this.showMonth + '-01'; let d=new Date();
this.planEDate = this.showYear + '-' + this.showMonth + '-'+this.monthDays(this.showYear, this.showMonth); if(d.getMonth()+1===Number(this.showMonth)){
this.planSDate = this.showYear + '-' + this.showMonth + '-' + ('0' + d.getDate()).substr(-2);
}else{
this.planSDate = this.showYear + '-' + this.showMonth + '-01';
}
this.planEDate = this.showYear + '-' + this.showMonth + '-'+this.monthDays(Number(this.showYear), Number(this.showMonth)-1);
this.planData = []; this.planData = [];
HttpReq.truckDispatching.tPlanGetOneDayPlanByTime({}).then((res) => { HttpReq.truckDispatching.tPlanGetOneDayPlanByTime({}).then((res) => {
if (res.code == 200) { if (res.code == 200) {
......
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