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;
......
...@@ -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 = '';
} }
}) })
}, },
......
<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
...@@ -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();
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