Commit 30b11f22 authored by zhanglw's avatar zhanglw

卡车动态

parent 8ea0f8fb
...@@ -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,
})
},
}, },
......
...@@ -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;
......
...@@ -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;
......
...@@ -5,46 +5,59 @@ ...@@ -5,46 +5,59 @@
<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-option v-for="item in truckDynamicListData.data" :key="item.number" :label="item.number"
:value="item.number"></el-option>
</el-select> </el-select>
</div> </div>
<div class="truckDynamicContent1"> <div class="truckDynamicContent1">
<div id="kachedongtaiRateId" class="kachedongtaiRateClass"></div> <div id="kachedongtaiRateId" class="kachedongtaiRateClass"></div>
<div style="text-align: center;"> <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.carry ? truckDynamicListData.carry : 0}}<span style="font-size:14px;">t</span></div> <div style="font-size:20px;color:#05F7FC;">
{{ truckDynamicListData.carry ? truckDynamicListData.carry : 0 }}<span style="font-size:14px;">t</span>
</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.workTime ? truckDynamicListData.workTime : 0}}<span style="font-size:14px;">h</span></div> <div style="font-size:20px;color:#05F7FC;">
{{ truckDynamicListData.workTime ? truckDynamicListData.workTime : 0 }}<span
style="font-size:14px;">h</span></div>
</div> </div>
<div style="text-align: center;"> <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.rate ? truckDynamicListData.rate : 0}}<span style="font-size:14px;">%</span></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: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 style="font-size:20px;color:#05F7FC;">{{ truckDynamicListData.mil ? truckDynamicListData.mil : 0 }}<span
style="font-size:14px;">km</span></div>
</div> </div>
</div> </div>
<div class="carDynamicContent1"> <div class="carDynamicContent1">
<div> <div>
<img src="../../../../assets/images/cutGraph/mokuaikaobei4.png"> <img src="../../../../assets/images/cutGraph/mokuaikaobei4.png">
<div>开始工作时间</div> <div>订单开始时间</div>
<div>{{truckDynamicListData.startTime ? truckDynamicListData.startTime : ''}}</div> <div>{{ truckDynamicListData.startTime ? truckDynamicListData.startTime : '' }}</div>
</div> </div>
<div> <div>
<img src="../../../../assets/images/cutGraph/mokuaikaobei4.png"> <img src="../../../../assets/images/cutGraph/mokuaikaobei4.png">
<div>结束工作时间</div> <div>预计完成时间</div>
<div>{{truckDynamicListData.endTime ? truckDynamicListData.endTime : ''}}</div> <div>{{ truckDynamicListData.endTime ? truckDynamicListData.endTime : '' }}</div>
</div> </div>
</div> </div>
<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;">{{truckDynamicListData.loadArea ? truckDynamicListData.loadArea : ''}}</div> <div style="color:white;text-align: center;">
{{ truckDynamicListData.loadArea ? truckDynamicListData.loadArea : '' }}
</div>
<img src="../../../../assets/images/cutGraph/zu2603.png"> <img src="../../../../assets/images/cutGraph/zu2603.png">
<div style="color:white;text-align: center;">{{truckDynamicListData.unloadArea ? truckDynamicListData.unloadArea : ''}}</div> <div style="color:white;text-align: center;">
{{ truckDynamicListData.unloadArea ? truckDynamicListData.unloadArea : '' }}
</div>
</div> </div>
<img src="../../../../assets/images/cutGraph/tuiyuan2.png"> <img src="../../../../assets/images/cutGraph/tuiyuan2.png">
</div> </div>
...@@ -53,42 +66,42 @@ ...@@ -53,42 +66,42 @@
</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(){ mounted() {
this.loadData(); this.loadData();
}, },
methods:{ methods: {
loadData(){ loadData() {
//获取车辆信息 //获取车辆信息
HttpReq.truckDispatching.carInformationQuery({size:9999}).then((res) => { HttpReq.truckDispatching.carInformationQuery({size: 9999}).then((res) => {
let arr1 = []; let arr1 = [];
if(res.code == 200){ if (res.code == 200) {
res.data.content.forEach((item,index)=>{ res.data.content.forEach((item, index) => {
if(item.carclass == '卡车'){ if (item.carclass == '卡车') {
arr1.push(item); arr1.push(item);
} }
}) })
...@@ -98,47 +111,51 @@ export default { ...@@ -98,47 +111,51 @@ export default {
this.kachedongtai(); this.kachedongtai();
this.DPcomputer13BoxTimer = setInterval(() => { this.DPcomputer13BoxTimer = setInterval(() => {
this.kachedongtai(); this.kachedongtai();
},20000) }, 20000)
}) })
}, },
//卡车动态 //卡车动态
kachedongtai(){ kachedongtai() {
let num1 = parseInt(this.truckDynamicListData.data.length) - 1; let num1 = parseInt(this.truckDynamicListData.data.length) - 1;
//获取车辆实时数据 //获取车辆实时数据
if(this.truckDynamicListData.num2 <= num1){ if (this.truckDynamicListData.num2 <= num1) {
}else{ } else {
this.truckDynamicListData.num2 = 0; this.truckDynamicListData.num2 = 0;
} }
if(this.truckDynamicListData.data == 0){ if (this.truckDynamicListData.data == 0) {
return return
} }
this.truckDynamicListData.number = this.truckDynamicListData.data[this.truckDynamicListData.num2].number; this.truckDynamicListData.number = this.truckDynamicListData.data[this.truckDynamicListData.num2].number;
HttpReq.truckDispatching.apiManmadesRealQuery1({number:this.truckDynamicListData.number}).then((res) => { this.initData();
if(res.length != 0){ },
this.truckDynamicListData.rate = res[0].rate; initData(){
this.truckDynamicListData.carry = res[0].carry; HttpReq.truckDispatching.dpKcDynamics({carNumber: this.truckDynamicListData.number}).then((res) => {
this.truckDynamicListData.workTime = res[0].workTime; if (res.data) {
this.truckDynamicListData.mil = res[0].mil; let d=res.data;
this.truckDynamicListData.startTime = res[0].startTime; this.truckDynamicListData.orderNumber = d.orderNumber;
this.truckDynamicListData.endTime = res[0].endTime; this.truckDynamicListData.rate = d.todayEfficiency;
this.truckDynamicListData.loadArea = res[0].loadArea; this.truckDynamicListData.carry = d.todayWeight;
this.truckDynamicListData.unloadArea = res[0].unloadArea; this.truckDynamicListData.workTime = d.todayWorkingHours;
}else{ 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.rate = 0;
this.truckDynamicListData.carry = 0; this.truckDynamicListData.carry = 0;
this.truckDynamicListData.workTime = 0; this.truckDynamicListData.workTime = 0;
this.truckDynamicListData.mil = 0; this.truckDynamicListData.mil = 0;
this.truckDynamicListData.startTime = ''; this.truckDynamicListData.startTime = '';
this.truckDynamicListData.endTime = ''; this.truckDynamicListData.endTime = '';
this.truckDynamicListData.loadArea = ''; this.truckDynamicListData.loadArea = '';
this.truckDynamicListData.unloadArea = ''; this.truckDynamicListData.unloadArea = '';
} }
this.kachedongtaiEcharts(); this.kachedongtaiEcharts();
this.truckDynamicListData.num2 = this.truckDynamicListData.num2 + 1;
}) })
}, },
kachedongtaiEcharts(){ kachedongtaiEcharts() {
var maxValue = 100;//进度条最大值 var maxValue = 100;//进度条最大值
echarts.init(document.getElementById('kachedongtaiRateId')).dispose(); echarts.init(document.getElementById('kachedongtaiRateId')).dispose();
var pipe = echarts.init(document.getElementById('kachedongtaiRateId')); var pipe = echarts.init(document.getElementById('kachedongtaiRateId'));
...@@ -153,7 +170,7 @@ export default { ...@@ -153,7 +170,7 @@ export default {
top: '30%', top: '30%',
style: { style: {
//value当前进度 //value当前进度
text: this.truckDynamicListData.rate ? this.truckDynamicListData.rate + '%' : 0 + '%', text: '订单数',
textAlign: 'center', textAlign: 'center',
fill: 'white', fill: 'white',
fontSize: 18 fontSize: 18
...@@ -167,7 +184,7 @@ export default { ...@@ -167,7 +184,7 @@ export default {
top: '55%', top: '55%',
style: { style: {
//maxValue进度条最大值 //maxValue进度条最大值
text: '完成度', text: this.truckDynamicListData.orderNumber||0,
textAlign: 'center', textAlign: 'center',
fill: 'white', fill: 'white',
fontSize: 14 fontSize: 14
...@@ -176,7 +193,7 @@ export default { ...@@ -176,7 +193,7 @@ export default {
], ],
series: [{ series: [{
type: 'pie', type: 'pie',
radius: ['100%', '80%'],//['外圆大小', '内圆大小'] radius: ['100%', '88%'],//['外圆大小', '内圆大小']
center: ['50%', '50%'],//圆心位置['左右', '上下'] center: ['50%', '50%'],//圆心位置['左右', '上下']
hoverAnimation: false,//取消鼠标悬停动画 hoverAnimation: false,//取消鼠标悬停动画
animationEasing: 'cubicOut',//设置动画缓动效果 animationEasing: 'cubicOut',//设置动画缓动效果
...@@ -196,7 +213,7 @@ export default { ...@@ -196,7 +213,7 @@ export default {
data: [ data: [
//value当前进度 + 颜色 //value当前进度 + 颜色
{ {
value: this.truckDynamicListData.rate ? (parseFloat(this.truckDynamicListData.rate) > 100 ? 100 : this.truckDynamicListData.rate) : 0, value: 0,
itemStyle: { itemStyle: {
normal: { normal: {
color: 'rgb(2,220,251)' color: 'rgb(2,220,251)'
...@@ -205,10 +222,10 @@ export default { ...@@ -205,10 +222,10 @@ export default {
}, },
//(maxValue进度条最大值 - value当前进度) + 颜色 //(maxValue进度条最大值 - value当前进度) + 颜色
{ {
value: maxValue - parseInt(this.truckDynamicListData.rate ? (parseFloat(this.truckDynamicListData.rate) > 100 ? 100 : this.truckDynamicListData.rate) : 0), value: maxValue,
itemStyle: { itemStyle: {
normal: { normal: {
color: 'rgb(0,34,125)' color: 'rgb(2,220,251)'//'rgb(0,34,125)'
} }
} }
} }
...@@ -218,34 +235,13 @@ export default { ...@@ -218,34 +235,13 @@ export default {
pipe.setOption(option); pipe.setOption(option);
}, },
//切换车牌号 //切换车牌号
xuanzekuang1Fn(){ xuanzekuang1Fn() {
this.truckDynamicListData.number = this.xuanzekuangValue; this.truckDynamicListData.number = this.xuanzekuangValue;
HttpReq.truckDispatching.apiManmadesRealQuery1({number:this.truckDynamicListData.number}).then((res) => { this.initData();
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();
})
}, },
}, },
beforeDestroy(){ beforeDestroy() {
if(this.DPcomputer13BoxTimer) { if (this.DPcomputer13BoxTimer) {
clearInterval(this.DPcomputer13BoxTimer); clearInterval(this.DPcomputer13BoxTimer);
this.DPcomputer13BoxTimer = null; this.DPcomputer13BoxTimer = null;
} }
...@@ -254,22 +250,26 @@ export default { ...@@ -254,22 +250,26 @@ export default {
</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,24 +284,26 @@ export default { ...@@ -284,24 +284,26 @@ export default {
} }
</style> </style>
<style scoped> <style scoped>
*{ * {
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
.DPcomputer13Box{
.DPcomputer13Box {
width: 20vw; width: 20vw;
height: 32vh; height: 32vh;
background-color: rgba(32,42,67,0.95); background-color: rgba(32, 42, 67, 0.95);
padding: 5px 7px; padding: 5px 7px;
box-sizing: border-box; box-sizing: border-box;
overflow: hidden; overflow: hidden;
} }
.DPcomputer13Box .carManScrView_rightView_title{
.DPcomputer13Box .carManScrView_rightView_title {
margin-bottom: 5px; margin-bottom: 5px;
width: 100%; width: 100%;
height: 3.5vh; height: 3.5vh;
background:no-repeat center center url('~@/assets/images/cutGraph/biaoti1.png'); background: no-repeat center center url('~@/assets/images/cutGraph/biaoti1.png');
background-size:100% 100%; background-size: 100% 100%;
padding-left: 10px; padding-left: 10px;
box-sizing: border-box; box-sizing: border-box;
font-size: 18px; font-size: 18px;
...@@ -310,30 +312,34 @@ export default { ...@@ -310,30 +312,34 @@ export default {
letter-spacing: 1px; letter-spacing: 1px;
text-shadow: 1px 1px 1px #92CBFF; text-shadow: 1px 1px 1px #92CBFF;
} }
.DPcomputer13Box .carManScrView_rightView_content{
.DPcomputer13Box .carManScrView_rightView_content {
width: 100%; width: 100%;
height: 27vh; height: 27vh;
position: relative; position: relative;
} }
.DPcomputer13Box .carDynamicTitleStyle{
.DPcomputer13Box .carDynamicTitleStyle {
display: flex; display: flex;
width: 100%; width: 100%;
height: 3.5vh; height: 3.5vh;
align-items: center; align-items: center;
} }
.DPcomputer13Box .carDynamicTitleStyle>div{
.DPcomputer13Box .carDynamicTitleStyle > div {
margin-left: 10px; margin-left: 10px;
height: 3.5vh; height: 3.5vh;
width: 6vw; width: 6vw;
background:no-repeat center center url('~@/assets/images/cutGraph/xingzhuang9kaobei2.png'); background: no-repeat center center url('~@/assets/images/cutGraph/xingzhuang9kaobei2.png');
background-size:100% 100%; background-size: 100% 100%;
line-height: 3.5vh; line-height: 3.5vh;
text-align: center; text-align: center;
color: #06EFFE; color: #06EFFE;
font-weight: 600; font-weight: 600;
font-size: 17px; font-size: 17px;
} }
.DPcomputer13Box .truckDynamicContent1{
.DPcomputer13Box .truckDynamicContent1 {
position: relative; position: relative;
margin-top: 1vh; margin-top: 1vh;
display: flex; display: flex;
...@@ -341,22 +347,26 @@ export default { ...@@ -341,22 +347,26 @@ export default {
font-weight: 600; font-weight: 600;
justify-content: space-evenly; justify-content: space-evenly;
} }
.DPcomputer13Box .kachedongtaiRateClass{
.DPcomputer13Box .kachedongtaiRateClass {
height: 90px; height: 90px;
width: 90px; width: 90px;
} }
.DPcomputer13Box .carDynamicContent1{
.DPcomputer13Box .carDynamicContent1 {
width: 100%; width: 100%;
height: 7vh; height: 7vh;
} }
.DPcomputer13Box .carDynamicContent1>div{
.DPcomputer13Box .carDynamicContent1 > div {
color: #06EFFE; color: #06EFFE;
margin-top: 5px; margin-top: 5px;
display: flex; display: flex;
justify-content: space-around; justify-content: space-around;
align-items: center; align-items: center;
} }
.DPcomputer13Box .carDynamicContent2{
.DPcomputer13Box .carDynamicContent2 {
width: 100%; width: 100%;
height: 5vh; height: 5vh;
display: flex; display: flex;
...@@ -366,11 +376,13 @@ export default { ...@@ -366,11 +376,13 @@ export default {
box-sizing: border-box; box-sizing: border-box;
color: #03BFFD; color: #03BFFD;
} }
.DPcomputer13Box .carDynamicContent2>span{
.DPcomputer13Box .carDynamicContent2 > span {
transform: rotateZ(90deg); transform: rotateZ(90deg);
font-size: 30px; font-size: 30px;
} }
.DPcomputer13Box .xuanzekuang1{
.DPcomputer13Box .xuanzekuang1 {
position: absolute; position: absolute;
top: 0.1vh; top: 0.1vh;
left: 3vw; left: 3vw;
......
...@@ -5,24 +5,30 @@ ...@@ -5,24 +5,30 @@
<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-option v-for="item in forkliftkDynamicListData.data" :key="item.number" :label="item.number"
:value="item.number"></el-option>
</el-select> </el-select>
</div> </div>
<div class="ForkliftDynamicContent1"> <div class="ForkliftDynamicContent1">
<div> <div>
<div>今日完成量</div> <div>今日完成量</div>
<div class="ForkliftDynamicContent1_son1">{{forkliftkDynamicListData.rate ? forkliftkDynamicListData.rate : 0}}</div> <div class="ForkliftDynamicContent1_son1">
{{ forkliftkDynamicListData.rate ? forkliftkDynamicListData.rate : 0 }}
</div>
</div> </div>
<div> <div>
<div>今日工时/H</div> <div>今日工时/H</div>
<div class="ForkliftDynamicContent1_son1">{{forkliftkDynamicListData.workTime ? forkliftkDynamicListData.workTime : 0}}</div> <div class="ForkliftDynamicContent1_son1">
{{ forkliftkDynamicListData.workTime ? forkliftkDynamicListData.workTime : 0 }}
</div>
</div> </div>
<div> <div>
<div>今日效率</div> <div>今日效率T/H</div>
<div class="ForkliftDynamicContent1_son1"> <div class="ForkliftDynamicContent1_son1">
{{ {{
forkliftkDynamicListData.workTime != 0 ? forkliftkDynamicListData.workTime != 0 ?
...@@ -30,28 +36,32 @@ ...@@ -30,28 +36,32 @@
(parseFloat(forkliftkDynamicListData.rate) / parseFloat(forkliftkDynamicListData.workTime)).toFixed(0) (parseFloat(forkliftkDynamicListData.rate) / parseFloat(forkliftkDynamicListData.workTime)).toFixed(0)
: 0) : 0)
: (forkliftkDynamicListData.rate == 0) ? 0 : 100 : (forkliftkDynamicListData.rate == 0) ? 0 : 100
}}% }}
</div> </div>
</div> </div>
</div> </div>
<div class="carDynamicContent1"> <div class="carDynamicContent1">
<div> <div>
<img src="../../../../assets/images/cutGraph/mokuaikaobei4.png"> <img src="../../../../assets/images/cutGraph/mokuaikaobei4.png">
<div>开始工作时间</div> <div>开始装车时间</div>
<div>{{forkliftkDynamicListData.startTime ? forkliftkDynamicListData.startTime : ''}}</div> <div>{{ forkliftkDynamicListData.startTime ? forkliftkDynamicListData.startTime : '' }}</div>
</div> </div>
<div> <div>
<img src="../../../../assets/images/cutGraph/mokuaikaobei4.png"> <img src="../../../../assets/images/cutGraph/mokuaikaobei4.png">
<div>结束工作时间</div> <div>预计完成时间</div>
<div>{{forkliftkDynamicListData.endTime ? forkliftkDynamicListData.endTime : ''}}</div> <div>{{ forkliftkDynamicListData.endTime ? forkliftkDynamicListData.endTime : '' }}</div>
</div> </div>
</div> </div>
<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;">{{forkliftkDynamicListData.loadArea ? forkliftkDynamicListData.loadArea : ''}}</div> <div style="color:white;text-align: center;">
{{ forkliftkDynamicListData.loadArea ? forkliftkDynamicListData.loadArea : '' }}
</div>
<img src="../../../../assets/images/cutGraph/zu2603.png"> <img src="../../../../assets/images/cutGraph/zu2603.png">
<div style="color:white;text-align: center;">{{forkliftkDynamicListData.unloadArea ? forkliftkDynamicListData.unloadArea : ''}}</div> <div style="color:white;text-align: center;">
{{ forkliftkDynamicListData.unloadArea ? forkliftkDynamicListData.unloadArea : '' }}
</div>
</div> </div>
<img src="../../../../assets/images/cutGraph/tuiyuan2.png"> <img src="../../../../assets/images/cutGraph/tuiyuan2.png">
</div> </div>
...@@ -60,41 +70,41 @@ ...@@ -60,41 +70,41 @@
</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(){ mounted() {
this.loadData(); this.loadData();
}, },
methods:{ methods: {
loadData(){ loadData() {
//获取车辆信息 //获取车辆信息
HttpReq.truckDispatching.carInformationQuery({size:9999}).then((res) => { HttpReq.truckDispatching.carInformationQuery({size: 9999}).then((res) => {
let arr2 = []; let arr2 = [];
if(res.code == 200){ if (res.code == 200) {
res.data.content.forEach((item,index)=>{ res.data.content.forEach((item, index) => {
if(item.carclass == '铲车'){ if (item.carclass == '铲车') {
arr2.push(item); arr2.push(item);
} }
}) })
...@@ -104,73 +114,56 @@ export default { ...@@ -104,73 +114,56 @@ export default {
this.dianchandongtai(); this.dianchandongtai();
this.DPcomputer14BoxTimer = setInterval(() => { this.DPcomputer14BoxTimer = setInterval(() => {
this.dianchandongtai(); this.dianchandongtai();
},20000) }, 20000)
}) })
}, },
//铲车动态 //铲车动态
dianchandongtai(){ dianchandongtai() {
let num1 = parseInt(this.forkliftkDynamicListData.data.length) - 1; let num1 = parseInt(this.forkliftkDynamicListData.data.length) - 1;
//获取车辆实时数据 //获取车辆实时数据
if(this.forkliftkDynamicListData.num2 <= num1){ 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.endTime = d.zcExpectedCompletionTime;
this.forkliftkDynamicListData.loadArea = d.cPoint;
} else {
this.forkliftkDynamicListData.rate = 0; this.forkliftkDynamicListData.rate = 0;
this.forkliftkDynamicListData.carry = 0; this.forkliftkDynamicListData.carry = 0;
this.forkliftkDynamicListData.workTime = 0; this.forkliftkDynamicListData.workTime = 0;
this.forkliftkDynamicListData.mil = 0; this.forkliftkDynamicListData.mil = 0;
this.forkliftkDynamicListData.startTime = ''; this.forkliftkDynamicListData.startTime = '';
this.forkliftkDynamicListData.endTime = ''; this.forkliftkDynamicListData.endTime = '';
this.forkliftkDynamicListData.loadArea = ''; this.forkliftkDynamicListData.loadArea = '';
this.forkliftkDynamicListData.unloadArea = ''; this.forkliftkDynamicListData.unloadArea = '';
} }
this.forkliftkDynamicListData.num2 = this.forkliftkDynamicListData.num2 + 1; this.forkliftkDynamicListData.num2 = this.forkliftkDynamicListData.num2 + 1;
}) })
}, },
//切换车牌号 //切换车牌号
xuanzekuang1Fn(){ xuanzekuang1Fn() {
this.forkliftkDynamicListData.number = this.xuanzekuangValue; this.forkliftkDynamicListData.number = this.xuanzekuangValue;
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;
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(){ beforeDestroy() {
if(this.DPcomputer14BoxTimer) { if (this.DPcomputer14BoxTimer) {
clearInterval(this.DPcomputer14BoxTimer); clearInterval(this.DPcomputer14BoxTimer);
this.DPcomputer14BoxTimer = null; this.DPcomputer14BoxTimer = null;
} }
...@@ -179,22 +172,26 @@ export default { ...@@ -179,22 +172,26 @@ export default {
</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,24 +206,26 @@ export default { ...@@ -209,24 +206,26 @@ export default {
} }
</style> </style>
<style scoped> <style scoped>
*{ * {
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
.DPcomputer14Box{
.DPcomputer14Box {
width: 20vw; width: 20vw;
height: 32vh; height: 32vh;
background-color: rgba(32,42,67,0.95); background-color: rgba(32, 42, 67, 0.95);
padding: 5px 7px; padding: 5px 7px;
box-sizing: border-box; box-sizing: border-box;
overflow: hidden; overflow: hidden;
} }
.DPcomputer14Box .carManScrView_rightView_title{
.DPcomputer14Box .carManScrView_rightView_title {
margin-bottom: 5px; margin-bottom: 5px;
width: 100%; width: 100%;
height: 3.5vh; height: 3.5vh;
background:no-repeat center center url('~@/assets/images/cutGraph/biaoti1.png'); background: no-repeat center center url('~@/assets/images/cutGraph/biaoti1.png');
background-size:100% 100%; background-size: 100% 100%;
padding-left: 10px; padding-left: 10px;
box-sizing: border-box; box-sizing: border-box;
font-size: 18px; font-size: 18px;
...@@ -235,30 +234,34 @@ export default { ...@@ -235,30 +234,34 @@ export default {
letter-spacing: 1px; letter-spacing: 1px;
text-shadow: 1px 1px 1px #92CBFF; text-shadow: 1px 1px 1px #92CBFF;
} }
.DPcomputer14Box .carManScrView_rightView_content{
.DPcomputer14Box .carManScrView_rightView_content {
width: 100%; width: 100%;
height: 27vh; height: 27vh;
position: relative; position: relative;
} }
.DPcomputer14Box .carDynamicTitleStyle{
.DPcomputer14Box .carDynamicTitleStyle {
display: flex; display: flex;
width: 100%; width: 100%;
height: 3.5vh; height: 3.5vh;
align-items: center; align-items: center;
} }
.DPcomputer14Box .carDynamicTitleStyle>div{
.DPcomputer14Box .carDynamicTitleStyle > div {
margin-left: 10px; margin-left: 10px;
height: 3.5vh; height: 3.5vh;
width: 6vw; width: 6vw;
background:no-repeat center center url('~@/assets/images/cutGraph/xingzhuang9kaobei2.png'); background: no-repeat center center url('~@/assets/images/cutGraph/xingzhuang9kaobei2.png');
background-size:100% 100%; background-size: 100% 100%;
line-height: 3.5vh; line-height: 3.5vh;
text-align: center; text-align: center;
color: #06EFFE; color: #06EFFE;
font-weight: 600; font-weight: 600;
font-size: 17px; font-size: 17px;
} }
.DPcomputer14Box .ForkliftDynamicContent1{
.DPcomputer14Box .ForkliftDynamicContent1 {
margin-top: 0.3vh; margin-top: 0.3vh;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
...@@ -266,32 +269,37 @@ export default { ...@@ -266,32 +269,37 @@ export default {
height: 10vh; height: 10vh;
font-size: 15px; font-size: 15px;
} }
.DPcomputer14Box .ForkliftDynamicContent1>div{
.DPcomputer14Box .ForkliftDynamicContent1 > div {
width: 33%; width: 33%;
text-align: center; text-align: center;
color: white; color: white;
} }
.DPcomputer14Box .ForkliftDynamicContent1_son1{
.DPcomputer14Box .ForkliftDynamicContent1_son1 {
margin: 0px auto; margin: 0px auto;
width: 4.3vw; width: 4.3vw;
height: 4.3vw; height: 4.3vw;
line-height: 4.3vw; line-height: 4.3vw;
font-size: 20px; font-size: 20px;
background:no-repeat center center url('~@/assets/images/cutGraph/bilikuang1.png'); background: no-repeat center center url('~@/assets/images/cutGraph/bilikuang1.png');
background-size:100% 100%; background-size: 100% 100%;
} }
.DPcomputer14Box .carDynamicContent1{
.DPcomputer14Box .carDynamicContent1 {
width: 100%; width: 100%;
height: 7vh; height: 7vh;
} }
.DPcomputer14Box .carDynamicContent1>div{
.DPcomputer14Box .carDynamicContent1 > div {
color: #06EFFE; color: #06EFFE;
margin-top: 5px; margin-top: 5px;
display: flex; display: flex;
justify-content: space-around; justify-content: space-around;
align-items: center; align-items: center;
} }
.DPcomputer14Box .carDynamicContent2{
.DPcomputer14Box .carDynamicContent2 {
width: 100%; width: 100%;
height: 5vh; height: 5vh;
display: flex; display: flex;
...@@ -301,11 +309,13 @@ export default { ...@@ -301,11 +309,13 @@ export default {
box-sizing: border-box; box-sizing: border-box;
color: #03BFFD; color: #03BFFD;
} }
.DPcomputer14Box .carDynamicContent2>span{
.DPcomputer14Box .carDynamicContent2 > span {
transform: rotateZ(90deg); transform: rotateZ(90deg);
font-size: 30px; font-size: 30px;
} }
.DPcomputer14Box .xuanzekuang1{
.DPcomputer14Box .xuanzekuang1 {
position: absolute; position: absolute;
top: 0.1vh; top: 0.1vh;
left: 3vw; left: 3vw;
......
...@@ -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 = '';
} }
}) })
}, },
......
...@@ -8,14 +8,14 @@ ...@@ -8,14 +8,14 @@
<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>
<div> <div>
<img src="../../../../assets/images/cutGraph/wanchengle1.png"> <img src="../../../../assets/images/cutGraph/wanchengle1.png">
<div style="color:#01EDF7;text-align: center;"> <div style="color:#01EDF7;text-align: center;">
<div style="font-size:16px;">已经完成的</div> <div style="font-size:16px;">已经完成的</div>
<div style="font-size:22px;">{{dispatchFinishNum}}</div> <div style="font-size:22px;">{{ numberOfDispatched }}</div>
</div> </div>
</div> </div>
</div> </div>
...@@ -26,16 +26,16 @@ ...@@ -26,16 +26,16 @@
<dt> <dt>
<div>车牌号</div> <div>车牌号</div>
<div>起点</div> <div>起点</div>
<div>调度时间</div>
<div>状态</div> <div>状态</div>
<div>目的地</div> <div>目标</div>
<div>时间</div>
</dt> </dt>
<dd v-for="(item,index) in dispatchDetailsList" :key="index"> <dd v-for="(item,index) in dispatchingDetails" :key="index">
<div>{{item.carNo}}</div> <div>{{ item.carNumber }}</div>
<div>{{item.startAdr}}</div> <div>{{ item.startArea }}</div>
<div>{{item.createTime}}</div> <div>{{ item.status}}</div>
<div>{{item.status == 0 ? '接单中' : item.status == 1 ? '已完成' : '未完成'}}</div> <div>{{ item.endArea }}</div>
<div>{{item.destination}}</div> <div>{{ formatTime(item.dispatchingTime) }}</div>
</dd> </dd>
</dl> </dl>
</div> </div>
...@@ -46,71 +46,41 @@ ...@@ -46,71 +46,41 @@
</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(){ mounted() {
this.loadData(); this.loadData();
},
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(() => { this.DPcomputer18BoxTimer = setInterval(() => {
//智能调度情况 this.loadData();
HttpReq.truckDispatching.getLargeScreen1({size:100,sort:'createTime,desc'}).then((res) => { }, 10000)
this.dispatchDetailsList = res; },
}) methods: {
//获取智能调度情况中的进行中数量 loadData() {
HttpReq.truckDispatching.getLargeScreenUnder1({size:9999}).then((res) => { HttpReq.truckDispatching.dpCarDispatchInformation().then((res) => {
if(res.length == 0){ if(res.data){
this.dispatchLoadingNum = 0; this.numberOfDispatching=res.data.numberOfDispatching;
}else{ this.numberOfDispatched=res.data.numberOfDispatched;
this.dispatchLoadingNum = res[0].under; this.dispatchingDetails=res.data.dispatchingDetails;
}
})
//获取智能调度情况中的已完成数量
HttpReq.truckDispatching.getLargeScreenRound1({size:9999}).then((res) => {
if(res.length == 0){
this.dispatchFinishNum = 0;
}else{
this.dispatchFinishNum = res[0].round;
} }
}) })
}, 10000)
}, },
formatTime(t) {
let d = new Date(t);
return `${('0' + (d.getHours() + 1)).substr(-2)}:${('0' + (d.getMonth() + 1)).substr(-2)}:${('0' + (d.getSeconds())).substr(-2)}`;
}
}, },
beforeDestroy(){ beforeDestroy() {
if(this.DPcomputer18BoxTimer) { if (this.DPcomputer18BoxTimer) {
clearInterval(this.DPcomputer18BoxTimer); clearInterval(this.DPcomputer18BoxTimer);
this.DPcomputer18BoxTimer = null; this.DPcomputer18BoxTimer = null;
} }
...@@ -119,24 +89,26 @@ export default { ...@@ -119,24 +89,26 @@ export default {
</script> </script>
<style scoped> <style scoped>
*{ * {
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
.DPcomputer18Box{
.DPcomputer18Box {
width: 20vw; width: 20vw;
height: 32vh; height: 32vh;
background-color: rgba(32,42,67,0.95); background-color: rgba(32, 42, 67, 0.95);
padding: 5px 7px; padding: 5px 7px;
box-sizing: border-box; box-sizing: border-box;
overflow: hidden; overflow: hidden;
} }
.DPcomputer18Box .intelligentSchScrView_rightView_title{
.DPcomputer18Box .intelligentSchScrView_rightView_title {
margin-bottom: 5px; margin-bottom: 5px;
width: 100%; width: 100%;
height: 3.5vh; height: 3.5vh;
background:no-repeat center center url('~@/assets/images/cutGraph/biaoti1.png'); background: no-repeat center center url('~@/assets/images/cutGraph/biaoti1.png');
background-size:100% 100%; background-size: 100% 100%;
padding-left: 10px; padding-left: 10px;
box-sizing: border-box; box-sizing: border-box;
font-size: 18px; font-size: 18px;
...@@ -145,59 +117,70 @@ export default { ...@@ -145,59 +117,70 @@ export default {
letter-spacing: 1px; letter-spacing: 1px;
text-shadow: 1px 1px 1px #92CBFF; text-shadow: 1px 1px 1px #92CBFF;
} }
.DPcomputer18Box .intelligentSchScrView_rightView_content{
.DPcomputer18Box .intelligentSchScrView_rightView_content {
width: 100%; width: 100%;
} }
.DPcomputer18Box .intelligentSchScrView_rightView_content_1_top{
.DPcomputer18Box .intelligentSchScrView_rightView_content_1_top {
width: 100%; width: 100%;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
} }
.DPcomputer18Box .intelligentSchScrView_rightView_content_1_top>div{
.DPcomputer18Box .intelligentSchScrView_rightView_content_1_top > div {
width: 49%; width: 49%;
height: 6vh; height: 6vh;
background:no-repeat center center url('~@/assets/images/cutGraph/sijirenshu1.png'); background: no-repeat center center url('~@/assets/images/cutGraph/sijirenshu1.png');
background-size:100% 100%; background-size: 100% 100%;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-evenly; justify-content: space-evenly;
} }
.DPcomputer18Box .intelligentSchScrView_rightView_content_1_bottom{
.DPcomputer18Box .intelligentSchScrView_rightView_content_1_bottom {
width: 100%; width: 100%;
height: 21.5vh; height: 21.5vh;
} }
.DPcomputer18Box .intelligentSchScrView_rightView_content_1_bottom_rolling{
.DPcomputer18Box .intelligentSchScrView_rightView_content_1_bottom_rolling {
text-align: center; text-align: center;
height: 21.5vh; height: 21.5vh;
overflow-y:auto; overflow-y: auto;
scrollbar-width: none; 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{
.DPcomputer18Box dt {
margin-top: 20px; margin-top: 20px;
display:table-row; display: table-row;
background-color: #274088; background-color: #274088;
} }
.DPcomputer18Box dt>div{
display:table-cell; .DPcomputer18Box dt > div {
padding:5px 3px; display: table-cell;
padding: 5px 3px;
font-size: 16px; font-size: 16px;
font-weight: 500; font-weight: 500;
color: rgb(24,228,240); color: rgb(24, 228, 240);
} }
.DPcomputer18Box dd{
display:table-row; .DPcomputer18Box dd {
display: table-row;
} }
.DPcomputer18Box dd>div{
display:table-cell; .DPcomputer18Box dd > div {
display: table-cell;
vertical-align: middle; vertical-align: middle;
padding:5px 1px; padding: 5px 1px;
font-size: 13px; font-size: 13px;
color: #A6F6F9; color: #A6F6F9;
} }
......
...@@ -9,62 +9,43 @@ ...@@ -9,62 +9,43 @@
</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(){ mounted() {
this.loadData(); 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(() => { this.DPcomputer19BoxTimer = setInterval(() => {
this.loadData();
}, 60000)
},
methods: {
loadData() {
//车辆区域分布Echarts //车辆区域分布Echarts
HttpReq.truckDispatching.getLargeScreenfenbu1({size:9999}).then((res) => { HttpReq.truckDispatching.getLargeScreenfenbu1().then((res) => {
if(res.code == 200){ if (res.code == 200) {
let name = []; let name = [];
let kache = []; let kache = [];
let chanche = []; let chanche = [];
let qitache = []; let qitache = [];
res.data.forEach((item,index)=>{ res.data.forEach((item, index) => {
name.push(item.name); name.push(item.area);
kache.push(item.truck); kache.push(item.kcNumber);
chanche.push(item.shovel); chanche.push(item.ccNumber);
qitache.push(item.other); qitache.push(item.otherNumber);
}) })
this.carsAreaDistributionData.name = name; this.carsAreaDistributionData.name = name;
this.carsAreaDistributionData.kache = kache; this.carsAreaDistributionData.kache = kache;
...@@ -73,11 +54,14 @@ export default { ...@@ -73,11 +54,14 @@ export default {
this.carsAreaDistributionEcharts(); this.carsAreaDistributionEcharts();
} }
}) })
},10000)
}, },
//车辆区域分布Echarts //车辆区域分布Echarts
carsAreaDistributionEcharts(){ carsAreaDistributionEcharts() {
let xZoom=Math.ceil(4/this.carsAreaDistributionData.name.length*100);
if(xZoom>100){
xZoom=100
}
echarts.init(document.getElementById('carsAreaDistributionView')).dispose(); echarts.init(document.getElementById('carsAreaDistributionView')).dispose();
var myChart = echarts.init(document.getElementById('carsAreaDistributionView')); var myChart = echarts.init(document.getElementById('carsAreaDistributionView'));
var option = { var option = {
...@@ -88,9 +72,9 @@ export default { ...@@ -88,9 +72,9 @@ export default {
} }
}, },
legend: { legend: {
textStyle:{ textStyle: {
color: 'white', color: 'white',
fontSize:16, fontSize: 16,
} }
}, },
grid: { grid: {
...@@ -100,14 +84,27 @@ export default { ...@@ -100,14 +84,27 @@ export default {
bottom: '3%', bottom: '3%',
containLabel: true containLabel: true
}, },
dataZoom: [
{
type: 'inside',
start: 0,
end: xZoom
},
{
start: 0,
end: xZoom,
show: false,
}
],
xAxis: { xAxis: {
type: 'category', type: 'category',
data: this.carsAreaDistributionData.name, data: this.carsAreaDistributionData.name,
axisLabel: { axisLabel: {
interval: 0,
show: true, show: true,
textStyle: { textStyle: {
color: '#A6F6F9', color: '#A6F6F9',
fontSize:14, fontSize: 12,
} }
}, },
axisLine: { axisLine: {
...@@ -124,7 +121,7 @@ export default { ...@@ -124,7 +121,7 @@ export default {
show: true, show: true,
textStyle: { textStyle: {
color: '#A6F6F9', color: '#A6F6F9',
fontSize:14, fontSize: 14,
} }
}, },
axisLine: { axisLine: {
...@@ -138,12 +135,8 @@ export default { ...@@ -138,12 +135,8 @@ export default {
{ {
name: '卡车', name: '卡车',
type: 'bar', type: 'bar',
stack: 'total',
label: {
show: true
},
data: this.carsAreaDistributionData.kache, data: this.carsAreaDistributionData.kache,
barWidth: 30,
itemStyle: { itemStyle: {
color: '#2BBFA8' color: '#2BBFA8'
}, },
...@@ -151,12 +144,8 @@ export default { ...@@ -151,12 +144,8 @@ export default {
{ {
name: '铲车', name: '铲车',
type: 'bar', type: 'bar',
stack: 'total',
label: {
show: true
},
data: this.carsAreaDistributionData.chanche, data: this.carsAreaDistributionData.chanche,
barWidth: 35,
itemStyle: { itemStyle: {
color: '#DB972D' color: '#DB972D'
}, },
...@@ -164,12 +153,8 @@ export default { ...@@ -164,12 +153,8 @@ export default {
{ {
name: '其他车辆', name: '其他车辆',
type: 'bar', type: 'bar',
stack: 'total',
label: {
show: true
},
data: this.carsAreaDistributionData.qitache, data: this.carsAreaDistributionData.qitache,
barWidth: 35,
itemStyle: { itemStyle: {
color: '#158DFD' color: '#158DFD'
}, },
...@@ -180,8 +165,8 @@ export default { ...@@ -180,8 +165,8 @@ export default {
}, },
}, },
beforeDestroy(){ beforeDestroy() {
if(this.DPcomputer19BoxTimer) { if (this.DPcomputer19BoxTimer) {
clearInterval(this.DPcomputer19BoxTimer); clearInterval(this.DPcomputer19BoxTimer);
this.DPcomputer19BoxTimer = null; this.DPcomputer19BoxTimer = null;
} }
...@@ -190,24 +175,26 @@ export default { ...@@ -190,24 +175,26 @@ export default {
</script> </script>
<style scoped> <style scoped>
*{ * {
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
.DPcomputer19Box{
.DPcomputer19Box {
width: 20vw; width: 20vw;
height: 32vh; height: 32vh;
background-color: rgba(32,42,67,0.95); background-color: rgba(32, 42, 67, 0.95);
padding: 5px 7px; padding: 5px 7px;
box-sizing: border-box; box-sizing: border-box;
overflow: hidden; overflow: hidden;
} }
.DPcomputer19Box .intelligentSchScrView_rightView_title{
.DPcomputer19Box .intelligentSchScrView_rightView_title {
margin-bottom: 5px; margin-bottom: 5px;
width: 100%; width: 100%;
height: 3.5vh; height: 3.5vh;
background:no-repeat center center url('~@/assets/images/cutGraph/biaoti1.png'); background: no-repeat center center url('~@/assets/images/cutGraph/biaoti1.png');
background-size:100% 100%; background-size: 100% 100%;
padding-left: 10px; padding-left: 10px;
box-sizing: border-box; box-sizing: border-box;
font-size: 18px; font-size: 18px;
...@@ -216,10 +203,12 @@ export default { ...@@ -216,10 +203,12 @@ export default {
letter-spacing: 1px; letter-spacing: 1px;
text-shadow: 1px 1px 1px #92CBFF; text-shadow: 1px 1px 1px #92CBFF;
} }
.DPcomputer19Box .intelligentSchScrView_rightView_content{
.DPcomputer19Box .intelligentSchScrView_rightView_content {
width: 100%; width: 100%;
} }
.DPcomputer19Box #carsAreaDistributionView{
.DPcomputer19Box #carsAreaDistributionView {
width: 19vw; width: 19vw;
height: 27.5vh; height: 27.5vh;
} }
......
...@@ -9,72 +9,94 @@ ...@@ -9,72 +9,94 @@
</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(){ mounted() {
this.loadData();
this.DPcomputer19BoxTimer = setInterval(() => {
this.loadData(); this.loadData();
}, 10000)
}, },
methods:{ methods: {
loadData(){ loadData() {
//各装点车铲比Echarts //各装点车铲比Echarts
HttpReq.truckDispatching.getLargeScreenchechanbi1({size:9999}).then((res) => { HttpReq.truckDispatching.getLargeScreenchechanbi1().then((res) => {
if(res.code == 200){ if (res.code == 200) {
this.carsProportionData = res.data; let name = [];
this.carsProportionEcharts(); let values = [];
} res.data.forEach((item, index) => {
name.push(item.area);
values.push(item.ratio);
}) })
this.carsAreaDistributionData.name = name;
this.DPcomputer20BoxTimer = setInterval(() => { this.carsAreaDistributionData.values = values;
//各装点车铲比Echarts
HttpReq.truckDispatching.getLargeScreenchechanbi1({size:9999}).then((res) => {
if(res.code == 200){
this.carsProportionData = res.data;
this.carsProportionEcharts(); this.carsProportionEcharts();
} }
}) })
},10000)
}, },
//各装点车铲比Echarts //各装点车铲比Echarts
carsProportionEcharts(){ carsProportionEcharts() {
echarts.init(document.getElementById('carsProportionView')).dispose(); echarts.init(document.getElementById('carsProportionView')).dispose();
var myChart = echarts.init(document.getElementById('carsProportionView')); var myChart = echarts.init(document.getElementById('carsProportionView'));
var option; let xZoom=Math.ceil(4/this.carsAreaDistributionData.name.length*100);
if(xZoom>100){
const data = [this.carsProportionData]; xZoom=100
option = { }
var option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
// legend: {
// textStyle: {
// color: 'white',
// fontSize: 16,
// }
// },
grid: { grid: {
top:'13%', top: '10%',
left: '2%', left: '1%',
right: '13%', right: '1%',
bottom: '5%', bottom: '5%',
containLabel: true containLabel: true
}, },
xAxis: { dataZoom: [
name: '铲车', {
nameTextStyle: { fontSize: 14 }, type: 'inside',
splitLine: { start: 0,
end: xZoom
},
{
start: 0,
end: xZoom,
show: false, show: false,
lineStyle: {
type: 'dashed'
} }
}, ],
xAxis: {
type: 'category',
data: this.carsAreaDistributionData.name,
axisLabel: { axisLabel: {
interval: 0,
show: true, show: true,
textStyle: { textStyle: {
color: '#A6F6F9', color: '#A6F6F9',
fontSize:14, fontSize: 12,
}, }
}, },
axisLine: { axisLine: {
lineStyle: { lineStyle: {
...@@ -84,19 +106,13 @@ export default { ...@@ -84,19 +106,13 @@ export default {
}, },
}, },
yAxis: { yAxis: {
name: '卡车', type: 'value',
nameTextStyle: { fontSize: 14 }, minInterval: 1,
splitLine: {
lineStyle: {
type: 'dashed'
}
},
scale: true,
axisLabel: { axisLabel: {
show: true, show: true,
textStyle: { textStyle: {
color: '#A6F6F9', color: '#A6F6F9',
fontSize:14, fontSize: 14,
} }
}, },
axisLine: { axisLine: {
...@@ -108,31 +124,21 @@ export default { ...@@ -108,31 +124,21 @@ export default {
}, },
series: [ series: [
{ {
data: data[0], name: '车铲比',
type: 'scatter', type: 'bar',
symbolSize: 15, data: this.carsAreaDistributionData.values,
emphasis: { barWidth: 35,
focus: 'series', itemStyle: {
label: { color: '#00FFFF'
show: true,
formatter: function (param) {
return param.data[2];
}, },
position: 'top',
fontSize:16,
}
}, },
itemStyle: {
color: '#4BF3F9',
}
}
] ]
}; };
option && myChart.setOption(option); option && myChart.setOption(option);
}, },
}, },
beforeDestroy(){ beforeDestroy() {
if(this.DPcomputer20BoxTimer) { if (this.DPcomputer20BoxTimer) {
clearInterval(this.DPcomputer20BoxTimer); clearInterval(this.DPcomputer20BoxTimer);
this.DPcomputer20BoxTimer = null; this.DPcomputer20BoxTimer = null;
} }
...@@ -141,24 +147,26 @@ export default { ...@@ -141,24 +147,26 @@ export default {
</script> </script>
<style scoped> <style scoped>
*{ * {
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
.DPcomputer20Box{
.DPcomputer20Box {
width: 20vw; width: 20vw;
height: 32vh; height: 32vh;
background-color: rgba(32,42,67,0.95); background-color: rgba(32, 42, 67, 0.95);
padding: 5px 7px; padding: 5px 7px;
box-sizing: border-box; box-sizing: border-box;
overflow: hidden; overflow: hidden;
} }
.DPcomputer20Box .intelligentSchScrView_rightView_title{
.DPcomputer20Box .intelligentSchScrView_rightView_title {
margin-bottom: 5px; margin-bottom: 5px;
width: 100%; width: 100%;
height: 3.5vh; height: 3.5vh;
background:no-repeat center center url('~@/assets/images/cutGraph/biaoti1.png'); background: no-repeat center center url('~@/assets/images/cutGraph/biaoti1.png');
background-size:100% 100%; background-size: 100% 100%;
padding-left: 10px; padding-left: 10px;
box-sizing: border-box; box-sizing: border-box;
font-size: 18px; font-size: 18px;
...@@ -167,10 +175,12 @@ export default { ...@@ -167,10 +175,12 @@ export default {
letter-spacing: 1px; letter-spacing: 1px;
text-shadow: 1px 1px 1px #92CBFF; text-shadow: 1px 1px 1px #92CBFF;
} }
.DPcomputer20Box .intelligentSchScrView_rightView_content{
.DPcomputer20Box .intelligentSchScrView_rightView_content {
width: 100%; width: 100%;
} }
.DPcomputer20Box #carsProportionView{
.DPcomputer20Box #carsProportionView {
width: 19vw; width: 19vw;
height: 27.5vh; height: 27.5vh;
} }
......
...@@ -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>-->
<!-- 单个车辆视频监控 --> <!-- 单个车辆视频监控 -->
......
...@@ -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();
let d=new Date();
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.planSDate = this.showYear + '-' + this.showMonth + '-01';
this.planEDate = this.showYear + '-' + this.showMonth + '-'+this.monthDays(this.showYear, this.showMonth); }
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