Commit 30b11f22 authored by zhanglw's avatar zhanglw

卡车动态

parent 8ea0f8fb
......@@ -2387,7 +2387,7 @@ var HttpReq = function(){
//大屏智能调度——车辆区域分布
getLargeScreenfenbu1: function(param){
return request({
url: '/api/Dispatch/areaCar',
url: '/api/dispatchScreen/carLocationDistribution',
method: 'get',
params:param
})
......@@ -2395,7 +2395,7 @@ var HttpReq = function(){
//大屏智能调度——采区车铲比
getLargeScreenchechanbi1: function(param){
return request({
url: '/api/Dispatch/areaCarShovel',
url: '/api/dispatchScreen/cheChanRatio',
method: 'get',
params:param
})
......@@ -3082,6 +3082,32 @@ var HttpReq = function(){
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 {
height: 94.5vh;
overflow: hidden;
background-color: white;
position: relative;
position: absolute;
left: 20vw;
top: 0;
z-index: 3;
border-left: 1px solid gainsboro;
}
.video111 .iframeSingle {
width: 60vw;
......
......@@ -898,9 +898,11 @@ export default {
height: 94.5vh;
overflow: hidden;
background-color: white;
position: relative;
position: absolute;
left: 20vw;
top: 0;
z-index: 3;
border-left: 1px solid gainsboro;
/*border-left: 1px solid gainsboro;*/
}
.video111 .iframeSingle {
width: 60vw;
......
......@@ -41,9 +41,9 @@
<div class="carDynamicContent2">
<img src="../../../../assets/images/cutGraph/tuiyuan1.png">
<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">
<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>
<img src="../../../../assets/images/cutGraph/tuiyuan2.png">
</div>
......@@ -71,8 +71,8 @@ export default {
mil:0,
startTime:'',
endTime:'',
loadArea:'',
unloadArea:'',
loadArea:'',
unloadArea:'',
},
}
},
......@@ -135,8 +135,8 @@ export default {
this.otherCarDynamicListData.mil = 0;
this.otherCarDynamicListData.startTime = '';
this.otherCarDynamicListData.endTime = '';
this.otherCarDynamicListData.loadArea = '';
this.otherCarDynamicListData.unloadArea = '';
this.otherCarDynamicListData.loadArea = '';
this.otherCarDynamicListData.unloadArea = '';
}
this.otherCarDynamicListData.num2 = this.otherCarDynamicListData.num2 + 1;
})
......@@ -161,8 +161,8 @@ export default {
this.otherCarDynamicListData.mil = 0;
this.otherCarDynamicListData.startTime = '';
this.otherCarDynamicListData.endTime = '';
this.otherCarDynamicListData.loadArea = '';
this.otherCarDynamicListData.unloadArea = '';
this.otherCarDynamicListData.loadArea = '';
this.otherCarDynamicListData.unloadArea = '';
}
})
},
......
<template>
<div class="DPcomputer20Box">
<!-- 各装点车铲比 -->
<div class="intelligentSchScrView_rightView_title">各装点车铲比</div>
<div class="intelligentSchScrView_rightView_content">
<div id="carsProportionView"></div>
</div>
<div class="DPcomputer20Box">
<!-- 各装点车铲比 -->
<div class="intelligentSchScrView_rightView_title">各装点车铲比</div>
<div class="intelligentSchScrView_rightView_content">
<div id="carsProportionView"></div>
</div>
</div>
</template>
<script>
import { Tools, HttpReq, CAMap} from '@/assets/js/common.js';
import {Tools, HttpReq, CAMap} from '@/assets/js/common.js';
import * as echarts from 'echarts';
export default {
data(){
return {
DPcomputer20BoxTimer:null,
//各装点车铲比Echarts
carsProportionData:[],
data() {
return {
DPcomputer20BoxTimer: null,
//各装点车铲比Echarts
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(){
this.loadData();
},
methods:{
loadData(){
//各装点车铲比Echarts
HttpReq.truckDispatching.getLargeScreenchechanbi1({size:9999}).then((res) => {
if(res.code == 200){
this.carsProportionData = res.data;
this.carsProportionEcharts();
}
})
this.DPcomputer20BoxTimer = setInterval(() => {
//各装点车铲比Echarts
HttpReq.truckDispatching.getLargeScreenchechanbi1({size:9999}).then((res) => {
if(res.code == 200){
this.carsProportionData = res.data;
this.carsProportionEcharts();
}
})
},10000)
//各装点车铲比Echarts
carsProportionEcharts() {
echarts.init(document.getElementById('carsProportionView')).dispose();
var myChart = echarts.init(document.getElementById('carsProportionView'));
let xZoom=Math.ceil(4/this.carsAreaDistributionData.name.length*100);
if(xZoom>100){
xZoom=100
}
var option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
//各装点车铲比Echarts
carsProportionEcharts(){
echarts.init(document.getElementById('carsProportionView')).dispose();
var myChart = echarts.init(document.getElementById('carsProportionView'));
var option;
const data = [this.carsProportionData];
option = {
grid: {
top:'13%',
left: '2%',
right: '13%',
bottom: '5%',
containLabel: true
},
xAxis: {
name: '铲车',
nameTextStyle: { fontSize: 14 },
splitLine: {
show: false,
lineStyle: {
type: 'dashed'
}
},
axisLabel: {
show: true,
textStyle: {
color: '#A6F6F9',
fontSize:14,
},
},
axisLine: {
lineStyle: {
color: '#A6F6F9',
width: 1
}
},
},
yAxis: {
name: '卡车',
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);
// legend: {
// textStyle: {
// color: 'white',
// fontSize: 16,
// }
// },
grid: {
top: '10%',
left: '1%',
right: '1%',
bottom: '5%',
containLabel: true
},
dataZoom: [
{
type: 'inside',
start: 0,
end: xZoom
},
{
start: 0,
end: xZoom,
show: false,
}
],
xAxis: {
type: 'category',
data: this.carsAreaDistributionData.name,
axisLabel: {
interval: 0,
show: true,
textStyle: {
color: '#A6F6F9',
fontSize: 12,
}
},
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',
data: this.carsAreaDistributionData.values,
barWidth: 35,
itemStyle: {
color: '#00FFFF'
},
},
]
};
option && myChart.setOption(option);
},
beforeDestroy(){
if(this.DPcomputer20BoxTimer) {
clearInterval(this.DPcomputer20BoxTimer);
this.DPcomputer20BoxTimer = null;
}
},
beforeDestroy() {
if (this.DPcomputer20BoxTimer) {
clearInterval(this.DPcomputer20BoxTimer);
this.DPcomputer20BoxTimer = null;
}
}
}
</script>
<style scoped>
*{
* {
margin: 0;
padding: 0;
}
.DPcomputer20Box{
width: 20vw;
height: 32vh;
background-color: rgba(32,42,67,0.95);
padding: 5px 7px;
box-sizing: border-box;
overflow: hidden;
.DPcomputer20Box {
width: 20vw;
height: 32vh;
background-color: rgba(32, 42, 67, 0.95);
padding: 5px 7px;
box-sizing: border-box;
overflow: hidden;
}
.DPcomputer20Box .intelligentSchScrView_rightView_title{
margin-bottom: 5px;
width: 100%;
height: 3.5vh;
background:no-repeat center center url('~@/assets/images/cutGraph/biaoti1.png');
background-size:100% 100%;
padding-left: 10px;
box-sizing: border-box;
font-size: 18px;
line-height: 3.5vh;
color: #FAFAFB;
letter-spacing: 1px;
text-shadow: 1px 1px 1px #92CBFF;
.DPcomputer20Box .intelligentSchScrView_rightView_title {
margin-bottom: 5px;
width: 100%;
height: 3.5vh;
background: no-repeat center center url('~@/assets/images/cutGraph/biaoti1.png');
background-size: 100% 100%;
padding-left: 10px;
box-sizing: border-box;
font-size: 18px;
line-height: 3.5vh;
color: #FAFAFB;
letter-spacing: 1px;
text-shadow: 1px 1px 1px #92CBFF;
}
.DPcomputer20Box .intelligentSchScrView_rightView_content{
width: 100%;
.DPcomputer20Box .intelligentSchScrView_rightView_content {
width: 100%;
}
.DPcomputer20Box #carsProportionView{
width: 19vw;
height: 27.5vh;
.DPcomputer20Box #carsProportionView {
width: 19vw;
height: 27.5vh;
}
</style>
\ No newline at end of file
</style>
......@@ -70,7 +70,7 @@
<!-- </div>-->
<!-- 嵌入三维地图页面 -->
<!-- <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>-->
<!-- 单个车辆视频监控 -->
......
......@@ -225,8 +225,13 @@ export default {
showPlanDateSlot() {
this.showDateSlot = !this.showDateSlot;
document.getElementById("planSlotBtn").blur();
this.planSDate = this.showYear + '-' + this.showMonth + '-01';
this.planEDate = this.showYear + '-' + this.showMonth + '-'+this.monthDays(this.showYear, this.showMonth);
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.planEDate = this.showYear + '-' + this.showMonth + '-'+this.monthDays(Number(this.showYear), Number(this.showMonth)-1);
this.planData = [];
HttpReq.truckDispatching.tPlanGetOneDayPlanByTime({}).then((res) => {
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