Skip to content

K
kd_control
Commit 27e5ba9a authored by zhanglw's avatar zhanglw
Browse files
Options

铲车排行榜

parent 3aa6f4b2
Hide whitespace changes
Inline Side-by-side
Showing with 722 additions and 1085 deletions
src/assets/js/common.js
View file @ 27e5ba9a
...@@ -1992,7 +1992,8 @@ var HttpReq = function(){ ...@@ -1992,7 +1992,8 @@ var HttpReq = function(){
//大屏——数据总览——采区产量统计——日产量 //大屏——数据总览——采区产量统计——日产量
apiPlanDayQuery: function(param){ apiPlanDayQuery: function(param){
return request({ return request({
url: '/api/Plan/Day', // url: '/api/Plan/Day',
url: '/api/carManager/clData',
method: 'get', method: 'get',
params:param, params:param,
}) })
...@@ -2087,7 +2088,8 @@ var HttpReq = function(){ ...@@ -2087,7 +2088,8 @@ var HttpReq = function(){
//大屏——车辆管理——卡车铲车排行榜day //大屏——车辆管理——卡车铲车排行榜day
apiManmadesDay1Query: function(param){ apiManmadesDay1Query: function(param){
return request({ return request({
url: '/api/Manmades/Day', // url: '/api/Manmades/Day',
url: '/api/carManager/kcTop',
method: 'get', method: 'get',
params:param, params:param,
}) })
...@@ -2096,6 +2098,7 @@ var HttpReq = function(){ ...@@ -2096,6 +2098,7 @@ var HttpReq = function(){
apiManmadesZhou1Query: function(param){ apiManmadesZhou1Query: function(param){
return request({ return request({
url: '/api/Manmades/Zhou', url: '/api/Manmades/Zhou',
// url: '/api/carManager/kcTopDay',
method: 'get', method: 'get',
params:param, params:param,
}) })
...@@ -2104,6 +2107,7 @@ var HttpReq = function(){ ...@@ -2104,6 +2107,7 @@ var HttpReq = function(){
apiManmadesMou1Query: function(param){ apiManmadesMou1Query: function(param){
return request({ return request({
url: '/api/Manmades/Mou', url: '/api/Manmades/Mou',
// url: '/api/carManager/kcTopDay',
method: 'get', method: 'get',
params:param, params:param,
}) })
...@@ -2558,7 +2562,8 @@ var HttpReq = function(){ ...@@ -2558,7 +2562,8 @@ var HttpReq = function(){
//大屏组件4铲车排行榜接口 //大屏组件4铲车排行榜接口
apiManmadeschanjiedanDayQuery: function(param){ apiManmadeschanjiedanDayQuery: function(param){
return request({ return request({
url: '/api/Manmades/chanjiedanDay', // url: '/api/Manmades/chanjiedanDay',
url: '/api/carManager/ccTop',
method: 'get', method: 'get',
params:param, params:param,
}) })
......
src/views/MLargeScreen/components/smallComponents/DPcomputer11.vue
View file @ 27e5ba9a
<template> <template>
<div class="DPcomputer11Box"> <div class="DPcomputer11Box">
<!-- 卡车排行榜--> <!-- 卡车排行榜-->
<div class="carManScrView_leftView_title truck_titleStyle"> <div class="carManScrView_leftView_title truck_titleStyle">
<div>卡车排行榜</div> <div>卡车排行榜</div>
<div class="driverTitleDateStyle"> <div class="driverTitleDateStyle">
<div :class="truckRankListData.selectTimeText == 'day' ? 'driverTitleDateStyle_son1' : 'driverTitleDateStyle_son2' " @click="truckChangeTime('day')">日</div> <div
<div :class="truckRankListData.selectTimeText == 'week' ? 'driverTitleDateStyle_son1' : 'driverTitleDateStyle_son2' " @click="truckChangeTime('week')">周</div> :class="truckRankListData.selectTimeText == 'day' ? 'driverTitleDateStyle_son1' : 'driverTitleDateStyle_son2' "
<div :class="truckRankListData.selectTimeText == 'month' ? 'driverTitleDateStyle_son1' : 'driverTitleDateStyle_son2' " @click="truckChangeTime('month')">月</div> @click="truckChangeTime('day')">日
</div>
</div> </div>
<div class="carManScrView_leftView_content"> <div
<div class="carManScrView_leftView_content_views2"> :class="truckRankListData.selectTimeText == 'week' ? 'driverTitleDateStyle_son1' : 'driverTitleDateStyle_son2' "
<div :class="truckRankListData.selectFieldText == 'juli' ? '' : 'selectFieldStyle' " @click="truckChangeField('juli')">运输距离</div> @click="truckChangeTime('week')">周
<div :class="truckRankListData.selectFieldText == 'time' ? '' : 'selectFieldStyle' " @click="truckChangeField('time')">工作时长</div>
<div :class="truckRankListData.selectFieldText == 'zcar' ? '' : 'selectFieldStyle' " @click="truckChangeField('zcar')">运载量</div>
<div :class="truckRankListData.selectFieldText == 'waiting' ? '' : 'selectFieldStyle' " @click="truckChangeField('waiting')">接单数</div>
</div>
<div class="carManScrView_leftView_content_views3" id="carManScrView_leftView_content_views3_1"></div>
</div> </div>
<div
:class="truckRankListData.selectTimeText == 'month' ? 'driverTitleDateStyle_son1' : 'driverTitleDateStyle_son2' "
@click="truckChangeTime('month')">月
</div>
</div>
</div> </div>
<div class="carManScrView_leftView_content">
<div class="carManScrView_leftView_content_views2">
<div :class="truckRankListData.selectFieldText == 'juli' ? '' : 'selectFieldStyle' "
@click="truckChangeField('juli')">运输距离
</div>
<div :class="truckRankListData.selectFieldText == 'time' ? '' : 'selectFieldStyle' "
@click="truckChangeField('time')">工作时长
</div>
<div :class="truckRankListData.selectFieldText == 'yunZaiNumber' ? '' : 'selectFieldStyle' "
@click="truckChangeField('yunZaiNumber')">运载量
</div>
<div :class="truckRankListData.selectFieldText == 'jieDanNumber' ? '' : 'selectFieldStyle' "
@click="truckChangeField('jieDanNumber')">接单数
</div>
</div>
<div class="carManScrView_leftView_content_views3" id="carManScrView_leftView_content_views3_1"></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 {
DPcomputer11BoxTimer:null, DPcomputer11BoxTimer: null,
//卡车排行榜 //卡车排行榜
truckRankListData:{ truckRankListData: {
echartsX:'Km', echartsX: 'Km',
carclass:'卡车', carclass: '卡车',
selectTimeText:'day', selectTimeText: 'day',
selectFieldText:'juli', selectFieldText: 'juli',
driverName:[], driverName: [],
driverSeriesData:[], driverSeriesData: [],
driverName1:['kfdfdf','dsdsd1','dsdsd55'], driverName1: ['kfdfdf', 'dsdsd1', 'dsdsd55'],
driverSeriesData1:[20,50,10], driverSeriesData1: [20, 50, 10],
}, },
} }
},
mounted() {
this.DPcomputer11BoxTimer = setInterval(() => {
this.loadData();
}, 10000)
this.loadData();
},
methods: {
loadData() {
let that = this;
let truckQuery1 = {};
truckQuery1.size = 7;
truckQuery1.sort = this.truckRankListData.selectFieldText;
truckQuery1.carclass = this.truckRankListData.carclass;
truckQuery1.duration = this.truckRankListData.selectTimeText;
this.$nextTick(() => {
HttpReq.truckDispatching.apiManmadesDay1Query(truckQuery1).then((res) => {
let arr1 = [];
let arr2 = [];
if(res.data && res.data.length){
res.data.reverse().forEach((item, index) => {
arr1.push(item.carNumber);
arr2.push(item.data);
})
}else{
arr1.push('暂无数据');
arr2.push(0);
}
this.truckRankListData.driverName = arr1;
this.truckRankListData.driverSeriesData = arr2;
this.truckChangeEcharts();
})
})
}, },
mounted(){ //卡车切换时间
this.loadData(); truckChangeTime(text) {
this.truckRankListData.selectTimeText = text;
this.loadData();
}, },
methods:{ //卡车切换字段排序
loadData(){ truckChangeField(text) {
let that = this; let that = this;
let truckQuery1 = {}; this.truckRankListData.selectFieldText = text;
truckQuery1.size = 7; let truckQuery1 = {};
truckQuery1.sort = this.truckRankListData.selectFieldText; truckQuery1.size = 7;
truckQuery1.carclass = this.truckRankListData.carclass; truckQuery1.sort = this.truckRankListData.selectFieldText;
this.$nextTick(()=>{ truckQuery1.carclass = this.truckRankListData.carclass;
if(this.truckRankListData.selectTimeText == 'day'){ if (text == 'juli') {
HttpReq.truckDispatching.apiManmadesDay1Query(truckQuery1).then((res) => { this.truckRankListData.echartsX = 'km';
let arr1 = []; } else if (text == 'time') {
let arr2 = []; this.truckRankListData.echartsX = 'min';
let transitionRes = res.sort(function(a,b){ } else if (text == 'yunZaiNumber') {
return a[that.truckRankListData.selectFieldText] - b[that.truckRankListData.selectFieldText]; this.truckRankListData.echartsX = '吨';
}) } else if (text == 'jieDanNumber') {
transitionRes.forEach((item,index)=>{ this.truckRankListData.echartsX = '次';
arr1.push(item.number); }
arr2.push(item[this.truckRankListData.selectFieldText]); this.loadData();
}) },
this.truckRankListData.driverName = arr1; //卡车排行榜Echarts
this.truckRankListData.driverSeriesData = arr2; truckChangeEcharts() {
this.truckChangeEcharts(); echarts.init(document.getElementById('carManScrView_leftView_content_views3_1')).dispose();
}) var myChart = echarts.init(document.getElementById('carManScrView_leftView_content_views3_1'));
}else if(this.truckRankListData.selectTimeText == 'week'){ var option = {
HttpReq.truckDispatching.apiManmadesZhou1Query(truckQuery1).then((res) => { tooltip: {
let arr1 = []; trigger: 'axis',
let arr2 = []; axisPointer: {
let transitionRes = res.sort(function(a,b){ type: 'shadow'
return a[that.truckRankListData.selectFieldText] - b[that.truckRankListData.selectFieldText]; }
}) },
transitionRes.forEach((item,index)=>{ grid: {
arr1.push(item.number); top: '18%',
arr2.push(item[this.truckRankListData.selectFieldText]); left: '1%',
}) bottom: '0%',
this.truckRankListData.driverName = arr1; containLabel: true
this.truckRankListData.driverSeriesData = arr2;
this.truckChangeEcharts();
})
}else if(this.truckRankListData.selectTimeText == 'month'){
HttpReq.truckDispatching.apiManmadesMou1Query(truckQuery1).then((res) => {
let arr1 = [];
let arr2 = [];
let transitionRes = res.sort(function(a,b){
return a[that.truckRankListData.selectFieldText] - b[that.truckRankListData.selectFieldText];
})
transitionRes.forEach((item,index)=>{
arr1.push(item.number);
arr2.push(item[this.truckRankListData.selectFieldText]);
})
this.truckRankListData.driverName = arr1;
this.truckRankListData.driverSeriesData = arr2;
this.truckChangeEcharts();
})
}
})
this.DPcomputer11BoxTimer = setInterval(() => {
//获取卡车排行榜
let truckQuery1 = {};
truckQuery1.size = 7;
truckQuery1.sort = this.truckRankListData.selectFieldText;
truckQuery1.carclass = this.truckRankListData.carclass;
this.$nextTick(()=>{
if(this.truckRankListData.selectTimeText == 'day'){
HttpReq.truckDispatching.apiManmadesDay1Query(truckQuery1).then((res) => {
let arr1 = [];
let arr2 = [];
let transitionRes = res.sort(function(a,b){
return a[that.truckRankListData.selectFieldText] - b[that.truckRankListData.selectFieldText];
})
transitionRes.forEach((item,index)=>{
arr1.push(item.number);
arr2.push(item[this.truckRankListData.selectFieldText]);
})
this.truckRankListData.driverName = arr1;
this.truckRankListData.driverSeriesData = arr2;
this.truckChangeEcharts();
})
}else if(this.truckRankListData.selectTimeText == 'week'){
HttpReq.truckDispatching.apiManmadesZhou1Query(truckQuery1).then((res) => {
let arr1 = [];
let arr2 = [];
let transitionRes = res.sort(function(a,b){
return a[that.truckRankListData.selectFieldText] - b[that.truckRankListData.selectFieldText];
})
transitionRes.forEach((item,index)=>{
arr1.push(item.number);
arr2.push(item[this.truckRankListData.selectFieldText]);
})
this.truckRankListData.driverName = arr1;
this.truckRankListData.driverSeriesData = arr2;
this.truckChangeEcharts();
})
}else if(this.truckRankListData.selectTimeText == 'month'){
HttpReq.truckDispatching.apiManmadesMou1Query(truckQuery1).then((res) => {
let arr1 = [];
let arr2 = [];
let transitionRes = res.sort(function(a,b){
return a[that.truckRankListData.selectFieldText] - b[that.truckRankListData.selectFieldText];
})
transitionRes.forEach((item,index)=>{
arr1.push(item.number);
arr2.push(item[this.truckRankListData.selectFieldText]);
})
this.truckRankListData.driverName = arr1;
this.truckRankListData.driverSeriesData = arr2;
this.truckChangeEcharts();
})
}
})
},10000)
}, },
//卡车切换时间 xAxis: {
truckChangeTime(text){ name: this.truckRankListData.echartsX,
let that = this; type: 'value',
this.truckRankListData.selectTimeText = text; boundaryGap: [0, 0.01],
let truckQuery1 = {}; axisLabel: {
truckQuery1.size = 7; show: true,
truckQuery1.sort = this.truckRankListData.selectFieldText; textStyle: {
truckQuery1.carclass = this.truckRankListData.carclass; color: '#BFF7FF'
if(text == 'day'){
HttpReq.truckDispatching.apiManmadesDay1Query(truckQuery1).then((res) => {
let arr1 = [];
let arr2 = [];
let transitionRes = res.sort(function(a,b){
return a[that.truckRankListData.selectFieldText] - b[that.truckRankListData.selectFieldText];
})
transitionRes.forEach((item,index)=>{
arr1.push(item.number);
arr2.push(item[this.truckRankListData.selectFieldText]);
})
this.truckRankListData.driverName = arr1;
this.truckRankListData.driverSeriesData = arr2;
this.truckChangeEcharts();
})
}else if(text == 'week'){
HttpReq.truckDispatching.apiManmadesZhou1Query(truckQuery1).then((res) => {
let arr1 = [];
let arr2 = [];
let transitionRes = res.sort(function(a,b){
return a[that.truckRankListData.selectFieldText] - b[that.truckRankListData.selectFieldText];
})
transitionRes.forEach((item,index)=>{
arr1.push(item.number);
arr2.push(item[this.truckRankListData.selectFieldText]);
})
this.truckRankListData.driverName = arr1;
this.truckRankListData.driverSeriesData = arr2;
this.truckChangeEcharts();
})
}else if(text == 'month'){
HttpReq.truckDispatching.apiManmadesMou1Query(truckQuery1).then((res) => {
let arr1 = [];
let arr2 = [];
let transitionRes = res.sort(function(a,b){
return a[that.truckRankListData.selectFieldText] - b[that.truckRankListData.selectFieldText];
})
transitionRes.forEach((item,index)=>{
arr1.push(item.number);
arr2.push(item[this.truckRankListData.selectFieldText]);
})
this.truckRankListData.driverName = arr1;
this.truckRankListData.driverSeriesData = arr2;
this.truckChangeEcharts();
})
} }
},
axisLine: {
lineStyle: {
color: '#BFF7FF',
width: 1
}
}
}, },
//卡车切换字段排序 yAxis: {
truckChangeField(text){ name: '车牌号',
let that = this; type: 'category',
this.truckRankListData.selectFieldText = text; data: this.truckRankListData.driverName,
let truckQuery1 = {}; axisLabel: {
truckQuery1.size = 7; show: true,
truckQuery1.sort = this.truckRankListData.selectFieldText; textStyle: {
truckQuery1.carclass = this.truckRankListData.carclass; color: '#BFF7FF'
if(text == 'juli'){
this.truckRankListData.echartsX = 'km';
}else if(text == 'time'){
this.truckRankListData.echartsX = 'H';
}else if(text == 'zcar'){
this.truckRankListData.echartsX = '吨';
}else if(text == 'waiting'){
this.truckRankListData.echartsX = '次';
} }
this.$nextTick(()=>{ },
if(this.truckRankListData.selectTimeText == 'day'){ axisLine: {
HttpReq.truckDispatching.apiManmadesDay1Query(truckQuery1).then((res) => { lineStyle: {
let arr1 = []; color: '#BFF7FF',
let arr2 = []; width: 0
let transitionRes = res.sort(function(a,b){ }
return a[that.truckRankListData.selectFieldText] - b[that.truckRankListData.selectFieldText]; }
})
transitionRes.forEach((item,index)=>{
arr1.push(item.number);
arr2.push(item[this.truckRankListData.selectFieldText]);
})
this.truckRankListData.driverName = arr1;
this.truckRankListData.driverSeriesData = arr2;
this.truckChangeEcharts();
})
}else if(this.truckRankListData.selectTimeText == 'week'){
HttpReq.truckDispatching.apiManmadesZhou1Query(truckQuery1).then((res) => {
let arr1 = [];
let arr2 = [];
let transitionRes = res.sort(function(a,b){
return a[that.truckRankListData.selectFieldText] - b[that.truckRankListData.selectFieldText];
})
transitionRes.forEach((item,index)=>{
arr1.push(item.number);
arr2.push(item[this.truckRankListData.selectFieldText]);
})
this.truckRankListData.driverName = arr1;
this.truckRankListData.driverSeriesData = arr2;
this.truckChangeEcharts();
})
}else if(this.truckRankListData.selectTimeText == 'month'){
HttpReq.truckDispatching.apiManmadesMou1Query(truckQuery1).then((res) => {
let arr1 = [];
let arr2 = [];
let transitionRes = res.sort(function(a,b){
return a[that.truckRankListData.selectFieldText] - b[that.truckRankListData.selectFieldText];
})
transitionRes.forEach((item,index)=>{
arr1.push(item.number);
arr2.push(item[this.truckRankListData.selectFieldText]);
})
this.truckRankListData.driverName = arr1;
this.truckRankListData.driverSeriesData = arr2;
this.truckChangeEcharts();
})
}
})
}, },
//卡车排行榜Echarts series: [
truckChangeEcharts(){ {
echarts.init(document.getElementById('carManScrView_leftView_content_views3_1')).dispose(); type: 'bar',
var myChart = echarts.init(document.getElementById('carManScrView_leftView_content_views3_1')); barWidth: 12,
var option = { itemStyle: {
tooltip: { color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
trigger: 'axis', {offset: 0, color: '#23FFE2'},
axisPointer: { {offset: 1, color: '#0F86EB'}
type: 'shadow' ])
}
},
grid: {
top:'18%',
left: '1%',
bottom: '0%',
containLabel: true
},
xAxis: {
name:this.truckRankListData.echartsX,
type: 'value',
boundaryGap: [0, 0.01],
axisLabel: {
show: true,
textStyle: {
color: '#BFF7FF'
}
},
axisLine: {
lineStyle: {
color: '#BFF7FF',
width: 1
}
}
},
yAxis: {
name:'车牌号',
type: 'category',
data: this.truckRankListData.driverName,
axisLabel: {
show: true,
textStyle: {
color: '#BFF7FF'
}
},
axisLine: {
lineStyle: {
color: '#BFF7FF',
width: 0
}
}
},
series: [
{
type: 'bar',
barWidth: 12,
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
{ offset: 0, color: '#23FFE2' },
{ offset: 1, color: '#0F86EB' }
])
},
data: this.truckRankListData.driverSeriesData,
}
]
};
option && myChart.setOption(option); },
}, data: this.truckRankListData.driverSeriesData,
}
]
};
option && myChart.setOption(option);
}, },
beforeDestroy(){ },
if(this.DPcomputer11BoxTimer) { beforeDestroy() {
clearInterval(this.DPcomputer11BoxTimer); if (this.DPcomputer11BoxTimer) {
this.DPcomputer11BoxTimer = null; clearInterval(this.DPcomputer11BoxTimer);
} this.DPcomputer11BoxTimer = null;
} }
}
} }
</script> </script>
<style scoped> <style scoped>
*{ * {
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
.DPcomputer11Box{
width: 20vw; .DPcomputer11Box {
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;
} }
.DPcomputer11Box .carManScrView_leftView_title{
margin-bottom: 5px; .DPcomputer11Box .carManScrView_leftView_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;
} }
.DPcomputer11Box .truck_titleStyle{
display: flex; .DPcomputer11Box .truck_titleStyle {
justify-content: space-between; display: flex;
padding-right: 4vw; justify-content: space-between;
padding-right: 4vw;
} }
.DPcomputer11Box .driverTitleDateStyle{
display: flex; .DPcomputer11Box .driverTitleDateStyle {
color: #06EFFE; display: flex;
font-size: 16px; color: #06EFFE;
text-shadow: 0px 0px 0px; font-size: 16px;
height: 3.5vh; text-shadow: 0px 0px 0px;
align-items: center; height: 3.5vh;
align-items: center;
} }
.DPcomputer11Box .driverTitleDateStyle_son1{
height: 2.5vh; .DPcomputer11Box .driverTitleDateStyle_son1 {
line-height: 2.5vh; height: 2.5vh;
margin-right: 5px; line-height: 2.5vh;
padding:0px 5px; margin-right: 5px;
background-color: #2DB3BB; padding: 0px 5px;
box-sizing: border-box; background-color: #2DB3BB;
border-radius: 5px; box-sizing: border-box;
cursor: pointer; border-radius: 5px;
cursor: pointer;
} }
.DPcomputer11Box .driverTitleDateStyle_son2{
height: 2.5vh; .DPcomputer11Box .driverTitleDateStyle_son2 {
line-height: 2.5vh; height: 2.5vh;
margin-right: 5px; line-height: 2.5vh;
padding:0px 5px; margin-right: 5px;
box-sizing: border-box; padding: 0px 5px;
border-radius: 5px; box-sizing: border-box;
cursor: pointer; border-radius: 5px;
cursor: pointer;
} }
.DPcomputer11Box .carManScrView_rightView_content{
width: 100%; .DPcomputer11Box .carManScrView_rightView_content {
height: 27vh; width: 100%;
height: 27vh;
} }
.DPcomputer11Box .carManScrView_leftView_content_views2{
display: flex; .DPcomputer11Box .carManScrView_leftView_content_views2 {
justify-content: space-between; display: flex;
justify-content: space-between;
} }
.DPcomputer11Box .carManScrView_leftView_content_views2>div{
height: 2.5vh; .DPcomputer11Box .carManScrView_leftView_content_views2 > div {
width: 24%; height: 2.5vh;
font-size: 15px; width: 24%;
border:2px solid #01A6FC; font-size: 15px;
border-radius: 5px; border: 2px solid #01A6FC;
color: #06EFFE; border-radius: 5px;
line-height: 2.2vh; color: #06EFFE;
text-align: center; line-height: 2.2vh;
cursor: pointer; text-align: center;
font-weight: 600; cursor: pointer;
font-weight: 600;
} }
.DPcomputer11Box .selectFieldStyle{
opacity: 0.7; .DPcomputer11Box .selectFieldStyle {
opacity: 0.7;
} }
.DPcomputer11Box .carManScrView_leftView_content_views3{
width: 100%; .DPcomputer11Box .carManScrView_leftView_content_views3 {
height: 24vh; width: 100%;
overflow-y:auto; height: 24vh;
scrollbar-width: none; overflow-y: auto;
scrollbar-width: none;
} }
.DPcomputer11Box .carManScrView_leftView_content_views3::-webkit-scrollbar { .DPcomputer11Box .carManScrView_leftView_content_views3::-webkit-scrollbar {
display: none; display: none;
} }
</style> </style>
\ No newline at end of file
src/views/MLargeScreen/components/smallComponents/DPcomputer12.vue
View file @ 27e5ba9a
<template> <template>
<div class="DPcomputer12Box"> <div class="DPcomputer12Box">
<!-- 铲车排行榜--> <!-- 铲车排行榜-->
<div class="carManScrView_leftView_title truck_titleStyle"> <div class="carManScrView_leftView_title truck_titleStyle">
<div>铲车排行榜</div> <div>铲车排行榜</div>
<div class="driverTitleDateStyle"> <div class="driverTitleDateStyle">
<div :class="forkLiftRankListData.selectTimeText == 'day' ? 'driverTitleDateStyle_son1' : 'driverTitleDateStyle_son2' " @click="forkLiftChangeTime('day')">日</div> <div
<div :class="forkLiftRankListData.selectTimeText == 'week' ? 'driverTitleDateStyle_son1' : 'driverTitleDateStyle_son2' " @click="forkLiftChangeTime('week')">周</div> :class="forkLiftRankListData.selectTimeText == 'day' ? 'driverTitleDateStyle_son1' : 'driverTitleDateStyle_son2' "
<div :class="forkLiftRankListData.selectTimeText == 'month' ? 'driverTitleDateStyle_son1' : 'driverTitleDateStyle_son2' " @click="forkLiftChangeTime('month')">月</div> @click="forkLiftChangeTime('day')">日
</div>
</div> </div>
<div class="carManScrView_leftView_content"> <div
<div class="carManScrView_leftView_content_views2"> :class="forkLiftRankListData.selectTimeText == 'week' ? 'driverTitleDateStyle_son1' : 'driverTitleDateStyle_son2' "
<div :class="forkLiftRankListData.selectFieldText == 'time' ? '' : 'selectFieldStyle' " @click="forkLiftChangeField('time')">工作时长</div> @click="forkLiftChangeTime('week')">周
<div :class="forkLiftRankListData.selectFieldText == 'average' ? '' : 'selectFieldStyle' " @click="forkLiftChangeField('average')">平均时长</div>
<div :class="forkLiftRankListData.selectFieldText == 'yunzai' ? '' : 'selectFieldStyle' " @click="forkLiftChangeField('yunzai')">装车量</div>
<div :class="forkLiftRankListData.selectFieldText == 'jiedan' ? '' : 'selectFieldStyle' " @click="forkLiftChangeField('jiedan')">装车数</div>
</div>
<div class="carManScrView_leftView_content_views3" v-if="forkLiftRankListData.selectFieldText == 'time'">
<div v-for="(item,index) in forkLiftRankListData.listData" :key="index" :class="'forkliftRankTwo' + (index + 1)">
<div style="color:#BCF0FE;width: 45%;">{{item.car}}</div>
<div style="color:#1AC9FF;width: 39%;">{{item.time}}H</div>
<!-- <div style="color:#BCF0FE;">{{item.createTime}}</div> -->
</div>
</div>
<div class="carManScrView_leftView_content_views3" v-if="forkLiftRankListData.selectFieldText == 'average'">
<div v-for="(item,index) in forkLiftRankListData.listData" :key="index" :class="'forkliftRankTwo' + (index + 1)">
<div style="color:#BCF0FE;width: 45%;">{{item.car}}</div>
<div style="color:#1AC9FF;width: 39%;">{{item.average}}H</div>
<!-- <div style="color:#BCF0FE;">{{item.createTime}}</div> -->
</div>
</div>
<div class="carManScrView_leftView_content_views3" v-if="forkLiftRankListData.selectFieldText == 'yunzai'">
<div v-for="(item,index) in forkLiftRankListData.listData" :key="index" :class="'forkliftRankTwo' + (index + 1)">
<div style="color:#BCF0FE;width: 45%;">{{item.car}}</div>
<div style="color:#1AC9FF;width: 39%;">{{item.yunzai}}吨</div>
<!-- <div style="color:#BCF0FE;">{{item.createTime}}</div> -->
</div>
</div>
<div class="carManScrView_leftView_content_views3" v-if="forkLiftRankListData.selectFieldText == 'jiedan'">
<div v-for="(item,index) in forkLiftRankListData.listData" :key="index" :class="'forkliftRankTwo' + (index + 1)">
<div style="color:#BCF0FE;width: 45%;">{{item.car}}</div>
<div style="color:#1AC9FF;width: 39%;">{{item.jiedan}}辆</div>
<!-- <div style="color:#BCF0FE;">{{item.createTime}}</div> -->
</div>
</div>
</div> </div>
<div
:class="forkLiftRankListData.selectTimeText == 'month' ? 'driverTitleDateStyle_son1' : 'driverTitleDateStyle_son2' "
@click="forkLiftChangeTime('month')">月
</div>
</div>
</div> </div>
<div class="carManScrView_leftView_content">
<div class="carManScrView_leftView_content_views2">
<div :class="forkLiftRankListData.selectFieldText == 'workTime' ? '' : 'selectFieldStyle' "
@click="forkLiftChangeField('workTime')">工作时长
</div>
<div :class="forkLiftRankListData.selectFieldText == 'aveTime' ? '' : 'selectFieldStyle' "
@click="forkLiftChangeField('aveTime')">平均时长
</div>
<div :class="forkLiftRankListData.selectFieldText == 'loadingCapacity' ? '' : 'selectFieldStyle' "
@click="forkLiftChangeField('loadingCapacity')">装车量
</div>
<div :class="forkLiftRankListData.selectFieldText == 'loadingTimes' ? '' : 'selectFieldStyle' "
@click="forkLiftChangeField('loadingTimes')">装车数
</div>
</div>
<div class="carManScrView_leftView_content_views3" v-if="forkLiftRankListData.selectFieldText == 'workTime'">
<div v-for="(item,index) in forkLiftRankListData.listData" :key="index"
:class="'forkliftRankTwo' + (index + 1)">
<div style="color:#BCF0FE;width: 45%;">{{ item.carNumber }}</div>
<div style="color:#1AC9FF;width: 39%;">{{ item.data }}min</div>
<!-- <div style="color:#BCF0FE;">{{item.createTime}}</div> -->
</div>
</div>
<div class="carManScrView_leftView_content_views3" v-if="forkLiftRankListData.selectFieldText == 'aveTime'">
<div v-for="(item,index) in forkLiftRankListData.listData" :key="index"
:class="'forkliftRankTwo' + (index + 1)">
<div style="color:#BCF0FE;width: 45%;">{{ item.carNumber }}</div>
<div style="color:#1AC9FF;width: 39%;">{{ item.data }}min</div>
<!-- <div style="color:#BCF0FE;">{{item.createTime}}</div> -->
</div>
</div>
<div class="carManScrView_leftView_content_views3" v-if="forkLiftRankListData.selectFieldText == 'loadingCapacity'">
<div v-for="(item,index) in forkLiftRankListData.listData" :key="index"
:class="'forkliftRankTwo' + (index + 1)">
<div style="color:#BCF0FE;width: 45%;">{{ item.carNumber }}</div>
<div style="color:#1AC9FF;width: 39%;">{{ item.data }}吨</div>
<!-- <div style="color:#BCF0FE;">{{item.createTime}}</div> -->
</div>
</div>
<div class="carManScrView_leftView_content_views3" v-if="forkLiftRankListData.selectFieldText == 'loadingTimes'">
<div v-for="(item,index) in forkLiftRankListData.listData" :key="index"
:class="'forkliftRankTwo' + (index + 1)">
<div style="color:#BCF0FE;width: 45%;">{{ item.carNumber }}</div>
<div style="color:#1AC9FF;width: 39%;">{{ item.data }}辆</div>
<!-- <div style="color:#BCF0FE;">{{item.createTime}}</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 {
DPcomputer12BoxTimer:null, DPcomputer12BoxTimer: null,
//铲车排行榜 //铲车排行榜
forkLiftRankListData:{ forkLiftRankListData: {
carclass:'铲车', carclass: '铲车',
selectTimeText:'day', selectTimeText: 'day',
selectFieldText:'time', selectFieldText: 'workTime',
listData:[], listData: [
}, {carNumber:'',data:0},
} {carNumber:'',data:0},
{carNumber:'',data:0},
{carNumber:'',data:0},
{carNumber:'',data:0}
],
},
}
},
mounted() {
this.loadData();
this.DPcomputer12BoxTimer = setInterval(() => {
this.loadData();
}, 20000)
},
methods: {
loadData() {
//获取铲车排行榜
let forkLiftQuery1 = {};
forkLiftQuery1.size = 5;
forkLiftQuery1.sort = this.forkLiftRankListData.selectFieldText;
forkLiftQuery1.carclass = this.forkLiftRankListData.carclass;
forkLiftQuery1.duration = this.forkLiftRankListData.selectTimeText;
this.$nextTick(() => {
HttpReq.truckDispatching.apiManmadeschanjiedanDayQuery(forkLiftQuery1).then((res) => {
if(res.data && res.data.length){
this.forkLiftRankListData.listData = res.data;
}else{
this.forkLiftRankListData.listData = [{carNumber:'',data:0},{carNumber:'',data:0},{carNumber:'',data:0},{carNumber:'',data:0},{carNumber:'',data:0}];
}
})
})
}, },
mounted(){ //铲车切换时间
this.loadData(); forkLiftChangeTime(text) {
this.forkLiftRankListData.selectTimeText = text;
this.loadData();
}, },
methods:{ //铲车切换字段排序
loadData(){ forkLiftChangeField(text) {
let that = this; this.forkLiftRankListData.selectFieldText = text;
//获取铲车排行榜 this.loadData();
let forkLiftQuery1 = {};
forkLiftQuery1.size = 5;
forkLiftQuery1.sort = this.forkLiftRankListData.selectFieldText;
forkLiftQuery1.carclass = this.forkLiftRankListData.carclass;
this.$nextTick(()=>{
if(this.forkLiftRankListData.selectTimeText == 'day'){
HttpReq.truckDispatching.apiManmadeschanjiedanDayQuery(forkLiftQuery1).then((res) => {
let transitionRes = res.sort(function(a,b){
return b[that.forkLiftRankListData.selectFieldText] - a[that.forkLiftRankListData.selectFieldText];
})
this.forkLiftRankListData.listData = transitionRes;
})
}else if(this.forkLiftRankListData.selectTimeText == 'week'){
HttpReq.truckDispatching.apiManmadesChanjiedanZhouQuery(forkLiftQuery1).then((res) => {
let transitionRes = res.sort(function(a,b){
return b[that.forkLiftRankListData.selectFieldText] - a[that.forkLiftRankListData.selectFieldText];
})
this.forkLiftRankListData.listData = transitionRes;
})
}else if(this.forkLiftRankListData.selectTimeText == 'month'){
HttpReq.truckDispatching.apiManmadesChanjiedanMouQuery(forkLiftQuery1).then((res) => {
let transitionRes = res.sort(function(a,b){
return b[that.forkLiftRankListData.selectFieldText] - a[that.forkLiftRankListData.selectFieldText];
})
this.forkLiftRankListData.listData = transitionRes;
})
}
})
this.DPcomputer12BoxTimer = setInterval(() => {
//获取铲车排行榜
let forkLiftQuery1 = {};
forkLiftQuery1.size = 5;
forkLiftQuery1.sort = this.forkLiftRankListData.selectFieldText;
forkLiftQuery1.carclass = this.forkLiftRankListData.carclass;
this.$nextTick(()=>{
if(this.forkLiftRankListData.selectTimeText == 'day'){
HttpReq.truckDispatching.apiManmadeschanjiedanDayQuery(forkLiftQuery1).then((res) => {
let transitionRes = res.sort(function(a,b){
return b[that.forkLiftRankListData.selectFieldText] - a[that.forkLiftRankListData.selectFieldText];
})
this.forkLiftRankListData.listData = transitionRes;
})
}else if(this.forkLiftRankListData.selectTimeText == 'week'){
HttpReq.truckDispatching.apiManmadesChanjiedanZhouQuery(forkLiftQuery1).then((res) => {
let transitionRes = res.sort(function(a,b){
return b[that.forkLiftRankListData.selectFieldText] - a[that.forkLiftRankListData.selectFieldText];
})
this.forkLiftRankListData.listData = transitionRes;
})
}else if(this.forkLiftRankListData.selectTimeText == 'month'){
HttpReq.truckDispatching.apiManmadesChanjiedanMouQuery(forkLiftQuery1).then((res) => {
let transitionRes = res.sort(function(a,b){
return b[that.forkLiftRankListData.selectFieldText] - a[that.forkLiftRankListData.selectFieldText];
})
this.forkLiftRankListData.listData = transitionRes;
})
}
})
},20000)
},
//铲车切换时间
forkLiftChangeTime(text){
let that = this;
this.forkLiftRankListData.selectTimeText = text;
let forkLiftQuery1 = {};
forkLiftQuery1.size = 5;
forkLiftQuery1.sort = this.forkLiftRankListData.selectFieldText;
forkLiftQuery1.carclass = this.forkLiftRankListData.carclass;
if(text == 'day'){
HttpReq.truckDispatching.apiManmadeschanjiedanDayQuery(forkLiftQuery1).then((res) => {
let transitionRes = res.sort(function(a,b){
return b[that.forkLiftRankListData.selectFieldText] - a[that.forkLiftRankListData.selectFieldText];
})
this.forkLiftRankListData.listData = transitionRes;
})
}
if(text == 'week'){
HttpReq.truckDispatching.apiManmadesChanjiedanZhouQuery(forkLiftQuery1).then((res) => {
let transitionRes = res.sort(function(a,b){
return b[that.forkLiftRankListData.selectFieldText] - a[that.forkLiftRankListData.selectFieldText];
})
this.forkLiftRankListData.listData = transitionRes;
})
}
if(text == 'month'){
HttpReq.truckDispatching.apiManmadesChanjiedanMouQuery(forkLiftQuery1).then((res) => {
let transitionRes = res.sort(function(a,b){
return b[that.forkLiftRankListData.selectFieldText] - a[that.forkLiftRankListData.selectFieldText];
})
this.forkLiftRankListData.listData = transitionRes;
})
}
},
//铲车切换字段排序
forkLiftChangeField(text){
let that = this;
this.forkLiftRankListData.selectFieldText = text;
let forkLiftQuery1 = {};
forkLiftQuery1.size = 5;
forkLiftQuery1.sort = this.forkLiftRankListData.selectFieldText;
forkLiftQuery1.carclass = this.forkLiftRankListData.carclass;
this.$nextTick(()=>{
if(this.forkLiftRankListData.selectTimeText == 'day'){
HttpReq.truckDispatching.apiManmadeschanjiedanDayQuery(forkLiftQuery1).then((res) => {
let transitionRes = res.sort(function(a,b){
return b[that.forkLiftRankListData.selectFieldText] - a[that.forkLiftRankListData.selectFieldText];
})
this.forkLiftRankListData.listData = transitionRes;
})
}else if(this.forkLiftRankListData.selectTimeText == 'week'){
HttpReq.truckDispatching.apiManmadesChanjiedanZhouQuery(forkLiftQuery1).then((res) => {
let transitionRes = res.sort(function(a,b){
return b[that.forkLiftRankListData.selectFieldText] - a[that.forkLiftRankListData.selectFieldText];
})
this.forkLiftRankListData.listData = transitionRes;
})
}else if(this.forkLiftRankListData.selectTimeText == 'month'){
HttpReq.truckDispatching.apiManmadesChanjiedanMouQuery(forkLiftQuery1).then((res) => {
let transitionRes = res.sort(function(a,b){
return b[that.forkLiftRankListData.selectFieldText] - a[that.forkLiftRankListData.selectFieldText];
})
this.forkLiftRankListData.listData = transitionRes;
})
}
})
},
}, },
beforeDestroy(){ },
if(this.DPcomputer12BoxTimer) { beforeDestroy() {
clearInterval(this.DPcomputer12BoxTimer); if (this.DPcomputer12BoxTimer) {
this.DPcomputer12BoxTimer = null; clearInterval(this.DPcomputer12BoxTimer);
} this.DPcomputer12BoxTimer = null;
} }
}
} }
</script> </script>
<style scoped> <style scoped>
*{ * {
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
.DPcomputer12Box{
width: 20vw; .DPcomputer12Box {
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;
} }
.DPcomputer12Box .carManScrView_leftView_title{
margin-bottom: 5px; .DPcomputer12Box .carManScrView_leftView_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;
} }
.DPcomputer12Box .truck_titleStyle{
display: flex; .DPcomputer12Box .truck_titleStyle {
justify-content: space-between; display: flex;
padding-right: 4vw; justify-content: space-between;
padding-right: 4vw;
} }
.DPcomputer12Box .driverTitleDateStyle{
display: flex; .DPcomputer12Box .driverTitleDateStyle {
color: #06EFFE; display: flex;
font-size: 16px; color: #06EFFE;
text-shadow: 0px 0px 0px; font-size: 16px;
height: 3.5vh; text-shadow: 0px 0px 0px;
align-items: center; height: 3.5vh;
align-items: center;
} }
.DPcomputer12Box .driverTitleDateStyle_son1{
height: 2.5vh; .DPcomputer12Box .driverTitleDateStyle_son1 {
line-height: 2.5vh; height: 2.5vh;
margin-right: 5px; line-height: 2.5vh;
padding:0px 5px; margin-right: 5px;
background-color: #2DB3BB; padding: 0px 5px;
box-sizing: border-box; background-color: #2DB3BB;
border-radius: 5px; box-sizing: border-box;
cursor: pointer; border-radius: 5px;
cursor: pointer;
} }
.DPcomputer12Box .driverTitleDateStyle_son2{
height: 2.5vh; .DPcomputer12Box .driverTitleDateStyle_son2 {
line-height: 2.5vh; height: 2.5vh;
margin-right: 5px; line-height: 2.5vh;
padding:0px 5px; margin-right: 5px;
box-sizing: border-box; padding: 0px 5px;
border-radius: 5px; box-sizing: border-box;
cursor: pointer; border-radius: 5px;
cursor: pointer;
} }
.DPcomputer12Box .carManScrView_leftView_content{
width: 100%; .DPcomputer12Box .carManScrView_leftView_content {
height: 27vh; width: 100%;
height: 27vh;
} }
.DPcomputer12Box .carManScrView_leftView_content_views2{
display: flex; .DPcomputer12Box .carManScrView_leftView_content_views2 {
justify-content: space-between; display: flex;
justify-content: space-between;
} }
.DPcomputer12Box .carManScrView_leftView_content_views2>div{
height: 2.5vh; .DPcomputer12Box .carManScrView_leftView_content_views2 > div {
width: 24%; height: 2.5vh;
font-size: 15px; width: 24%;
border:2px solid #01A6FC; font-size: 15px;
border-radius: 5px; border: 2px solid #01A6FC;
color: #06EFFE; border-radius: 5px;
line-height: 2.2vh; color: #06EFFE;
text-align: center; line-height: 2.2vh;
cursor: pointer; text-align: center;
font-weight: 600; cursor: pointer;
font-weight: 600;
} }
.DPcomputer12Box .selectFieldStyle{
opacity: 0.7; .DPcomputer12Box .selectFieldStyle {
opacity: 0.7;
} }
.DPcomputer12Box .carManScrView_leftView_content_views3{
width: 100%; .DPcomputer12Box .carManScrView_leftView_content_views3 {
height: 24vh; width: 100%;
overflow-y:auto; height: 24vh;
scrollbar-width: none; overflow-y: auto;
scrollbar-width: none;
} }
.DPcomputer12Box .carManScrView_leftView_content_views3::-webkit-scrollbar { .DPcomputer12Box .carManScrView_leftView_content_views3::-webkit-scrollbar {
display: none; display: none;
} }
.DPcomputer12Box .forkliftRankTwo1{
margin-top: 1vh; .DPcomputer12Box .forkliftRankTwo1 {
margin-bottom: 1.5vh; margin-top: 1vh;
display: flex; margin-bottom: 1.5vh;
justify-content: space-evenly; display: flex;
width: 100%; justify-content: space-evenly;
height: 3vh; width: 100%;
line-height: 3vh; height: 3vh;
background:no-repeat center center url('~@/assets/images/cutGraph/list1.png'); line-height: 3vh;
background-size:100% 100%; background: no-repeat center center url('~@/assets/images/cutGraph/list1.png');
padding-left: 4vw; background-size: 100% 100%;
box-sizing: border-box; padding-left: 4vw;
text-align: center; box-sizing: border-box;
text-align: center;
} }
.DPcomputer12Box .forkliftRankTwo2{
margin-bottom: 1.5vh; .DPcomputer12Box .forkliftRankTwo2 {
display: flex; margin-bottom: 1.5vh;
justify-content: space-evenly; display: flex;
width: 100%; justify-content: space-evenly;
height: 3vh; width: 100%;
line-height: 3vh; height: 3vh;
background:no-repeat center center url('~@/assets/images/cutGraph/list2.png'); line-height: 3vh;
background-size:100% 100%; background: no-repeat center center url('~@/assets/images/cutGraph/list2.png');
padding-left: 4vw; background-size: 100% 100%;
box-sizing: border-box; padding-left: 4vw;
text-align: center; box-sizing: border-box;
text-align: center;
} }
.DPcomputer12Box .forkliftRankTwo3{
margin-bottom: 1.5vh; .DPcomputer12Box .forkliftRankTwo3 {
display: flex; margin-bottom: 1.5vh;
justify-content: space-evenly; display: flex;
width: 100%; justify-content: space-evenly;
height: 3vh; width: 100%;
line-height: 3vh; height: 3vh;
background:no-repeat center center url('~@/assets/images/cutGraph/list3.png'); line-height: 3vh;
background-size:100% 100%; background: no-repeat center center url('~@/assets/images/cutGraph/list3.png');
padding-left: 4vw; background-size: 100% 100%;
box-sizing: border-box; padding-left: 4vw;
text-align: center; box-sizing: border-box;
text-align: center;
} }
.DPcomputer12Box .forkliftRankTwo4{
margin-bottom: 1.5vh; .DPcomputer12Box .forkliftRankTwo4 {
display: flex; margin-bottom: 1.5vh;
justify-content: space-evenly; display: flex;
width: 100%; justify-content: space-evenly;
height: 3vh; width: 100%;
line-height: 3vh; height: 3vh;
background:no-repeat center center url('~@/assets/images/cutGraph/list4.png'); line-height: 3vh;
background-size:100% 100%; background: no-repeat center center url('~@/assets/images/cutGraph/list4.png');
padding-left: 4vw; background-size: 100% 100%;
box-sizing: border-box; padding-left: 4vw;
text-align: center; box-sizing: border-box;
text-align: center;
} }
.DPcomputer12Box .forkliftRankTwo5{
display: flex; .DPcomputer12Box .forkliftRankTwo5 {
justify-content: space-evenly; display: flex;
width: 100%; justify-content: space-evenly;
height: 3vh; width: 100%;
line-height: 3vh; height: 3vh;
background:no-repeat center center url('~@/assets/images/cutGraph/list5.png'); line-height: 3vh;
background-size:100% 100%; background: no-repeat center center url('~@/assets/images/cutGraph/list5.png');
padding-left: 4vw; background-size: 100% 100%;
box-sizing: border-box; padding-left: 4vw;
text-align: center; box-sizing: border-box;
text-align: center;
} }
</style> </style>
\ No newline at end of file
src/views/MLargeScreen/components/smallComponents/DPcomputer5.vue
View file @ 27e5ba9a
...@@ -4,48 +4,47 @@ ...@@ -4,48 +4,47 @@
<div class="dataScrView_centerView_title"> <div class="dataScrView_centerView_title">
<div :class="centerViewData.moduleText == 'centerModule1' ? 'centerModuleSelectStyle' : ''" @click="centerSelectFn('centerModule1')">产量数据</div> <div :class="centerViewData.moduleText == 'centerModule1' ? 'centerModuleSelectStyle' : ''" @click="centerSelectFn('centerModule1')">产量数据</div>
<div :class="centerViewData.moduleText == 'centerModule2' ? 'centerModuleSelectStyle' : ''" @click="centerSelectFn('centerModule2')">运载数据</div> <div :class="centerViewData.moduleText == 'centerModule2' ? 'centerModuleSelectStyle' : ''" @click="centerSelectFn('centerModule2')">运载数据</div>
<!-- <div :class="centerViewData.moduleText == 'centerModule3' ? 'centerModuleSelectStyle' : ''" @click="centerSelectFn('centerModule3')">装载数据</div>-->
</div> </div>
<div class="dataScrView_centerView_planNum" v-if="centerViewData.moduleText == 'centerModule1'"> <div class="dataScrView_centerView_planNum" v-if="centerViewData.moduleText == 'centerModule1'">
<div> <div>
<div> <div>
<div style="color:#FFFFFF;font-size:14px;">今日计划量</div> <div style="color:#FFFFFF;font-size:14px;">今日计划量</div>
<div style="color:#00E9FD;font-size:16px;font-weight:600;">{{outputMineData.day.plan}}吨</div> <div style="color:#00E9FD;font-size:16px;font-weight:600;">{{clData.todayPlan}}</div>
</div> </div>
<img src="../../../../assets/images/cutGraph/renwujihua1.png"> <img src="../../../../assets/images/cutGraph/renwujihua1.png">
</div> </div>
<div> <div>
<div> <div>
<div style="color:#FFFFFF;font-size:14px;">今日完成量</div> <div style="color:#FFFFFF;font-size:14px;">今日完成量</div>
<div style="color:#00E9FD;font-size:16px;font-weight:600;">{{outputMineData.day.finish}}吨</div> <div style="color:#00E9FD;font-size:16px;font-weight:600;">{{clData.todayComplete}}</div>
</div> </div>
<img src="../../../../assets/images/cutGraph/mubiaoguanli1.png"> <img src="../../../../assets/images/cutGraph/mubiaoguanli1.png">
</div> </div>
<div> <div>
<div> <div>
<div style="color:#FFFFFF;font-size:14px;">今日完成率</div> <div style="color:#FFFFFF;font-size:14px;">今日完成率</div>
<div style="color:#00E9FD;font-size:16px;font-weight:600;">{{parseInt(outputMineData.day.eff)}}%</div> <div style="color:#00E9FD;font-size:16px;font-weight:600;">{{clData.todayCompleteRate}}</div>
</div> </div>
<img src="../../../../assets/images/cutGraph/wancheng1.png"> <img src="../../../../assets/images/cutGraph/wancheng1.png">
</div> </div>
<div> <div>
<div> <div>
<div style="color:#FFFFFF;font-size:14px;">当月计划量</div> <div style="color:#FFFFFF;font-size:14px;">当月计划量</div>
<div style="color:#00E9FD;font-size:16px;font-weight:600;">{{outputMineData.month.plan}}吨</div> <div style="color:#00E9FD;font-size:16px;font-weight:600;">{{clData.toMonthPlan}}</div>
</div> </div>
<img src="../../../../assets/images/cutGraph/jihuarenwu2.png"> <img src="../../../../assets/images/cutGraph/jihuarenwu2.png">
</div> </div>
<div> <div>
<div> <div>
<div style="color:#FFFFFF;font-size:14px;">当月累计完成量</div> <div style="color:#FFFFFF;font-size:14px;">当月累计完成量</div>
<div style="color:#00E9FD;font-size:16px;font-weight:600;">{{outputMineData.month.finish}}吨</div> <div style="color:#00E9FD;font-size:16px;font-weight:600;">{{clData.toMonthComplete}}</div>
</div> </div>
<img src="../../../../assets/images/cutGraph/zichantongji1.png"> <img src="../../../../assets/images/cutGraph/zichantongji1.png">
</div> </div>
<div> <div>
<div> <div>
<div style="color:#FFFFFF;font-size:14px;">当月完成率</div> <div style="color:#FFFFFF;font-size:14px;">当月完成率</div>
<div style="color:#00E9FD;font-size:16px;font-weight:600;">{{parseInt(outputMineData.month.eff)}}%</div> <div style="color:#00E9FD;font-size:16px;font-weight:600;">{{clData.toMonthCompleteRate}}</div>
</div> </div>
<img src="../../../../assets/images/cutGraph/wanchenglv1.png"> <img src="../../../../assets/images/cutGraph/wanchenglv1.png">
</div> </div>
...@@ -54,76 +53,46 @@ ...@@ -54,76 +53,46 @@
<div> <div>
<div> <div>
<div style="color:#FFFFFF;font-size:14px;">今日总运载量</div> <div style="color:#FFFFFF;font-size:14px;">今日总运载量</div>
<div style="color:#00E9FD;font-size:16px;font-weight:600;">{{carryCenterData.dayAllCarry1}}吨</div> <div style="color:#00E9FD;font-size:16px;font-weight:600;">{{clData.yunZaiTotal}}</div>
</div> </div>
<img src="../../../../assets/images/cutGraph/renwujihua1.png"> <img src="../../../../assets/images/cutGraph/renwujihua1.png">
</div> </div>
<div> <div>
<div> <div>
<div style="color:#FFFFFF;font-size:14px;">今日平均运载量</div> <div style="color:#FFFFFF;font-size:14px;">今日平均运载量</div>
<div style="color:#00E9FD;font-size:16px;font-weight:600;">{{carryCenterData.dayAverageCarry1}}吨/小时</div> <div style="color:#00E9FD;font-size:16px;font-weight:600;">{{clData.yunZaiAveHour}}</div>
</div> </div>
<img src="../../../../assets/images/cutGraph/mubiaoguanli1.png"> <img src="../../../../assets/images/cutGraph/mubiaoguanli1.png">
</div> </div>
<div> <div>
<div> <div>
<div style="color:#FFFFFF;font-size:14px;">今日总里程数</div> <div style="color:#FFFFFF;font-size:14px;">今日总里程数</div>
<div style="color:#00E9FD;font-size:16px;font-weight:600;">{{carryCenterData.dayAllMil1}}KM</div> <div style="color:#00E9FD;font-size:16px;font-weight:600;">{{clData.milTotal}}</div>
</div> </div>
<img src="../../../../assets/images/cutGraph/wancheng1.png"> <img src="../../../../assets/images/cutGraph/wancheng1.png">
</div> </div>
<div> <div>
<div> <div>
<div style="color:#FFFFFF;font-size:14px;">今日总车数</div> <div style="color:#FFFFFF;font-size:14px;">今日总车数</div>
<div style="color:#00E9FD;font-size:16px;font-weight:600;">{{carryCenterData.dayAllCarNum ? carryCenterData.dayAllCarNum : 0}}辆</div> <div style="color:#00E9FD;font-size:16px;font-weight:600;">{{clData.trainsTotal}}</div>
</div> </div>
<img src="../../../../assets/images/cutGraph/jihuarenwu2.png"> <img src="../../../../assets/images/cutGraph/jihuarenwu2.png">
</div> </div>
<div> <div>
<div> <div>
<div style="color:#FFFFFF;font-size:14px;">单次运载平均时长</div> <div style="color:#FFFFFF;font-size:14px;">单次运载平均时长</div>
<div style="color:#00E9FD;font-size:16px;font-weight:600;">{{carryCenterData.singleAverageTime}}H</div> <div style="color:#00E9FD;font-size:16px;font-weight:600;">{{clData.aveSingleTransportTime}}</div>
</div> </div>
<img src="../../../../assets/images/cutGraph/zichantongji1.png"> <img src="../../../../assets/images/cutGraph/zichantongji1.png">
</div> </div>
<div> <div>
<div> <div>
<div style="color:#FFFFFF;font-size:14px;">单次运载平均里程</div> <div style="color:#FFFFFF;font-size:14px;">单次运载平均里程</div>
<div style="color:#00E9FD;font-size:16px;font-weight:600;">{{carryCenterData.singleAverageMil}}KM</div> <div style="color:#00E9FD;font-size:16px;font-weight:600;">{{clData.aveSingleTransportMil}}</div>
</div> </div>
<img src="../../../../assets/images/cutGraph/wanchenglv1.png"> <img src="../../../../assets/images/cutGraph/wanchenglv1.png">
</div> </div>
</div> </div>
<div class="dataScrView_centerView_planNum3" v-if="centerViewData.moduleText == 'centerModule3'">
<div>
<div>
<div style="color:#FFFFFF;font-size:14px;">今日装载量</div>
<div style="color:#00E9FD;font-size:16px;font-weight:600;">{{loadCenterData.dayAllLoad1}}吨</div>
</div>
<img src="../../../../assets/images/cutGraph/renwujihua1.png">
</div>
<div>
<div>
<div style="color:#FFFFFF;font-size:14px;">今日平均装载量</div>
<div style="color:#00E9FD;font-size:16px;font-weight:600;">{{loadCenterData.dayAverageLoad1}}吨/小时</div>
</div>
<img src="../../../../assets/images/cutGraph/mubiaoguanli1.png">
</div>
<div>
<div>
<div style="color:#FFFFFF;font-size:14px;">今日总工时</div>
<div style="color:#00E9FD;font-size:16px;font-weight:600;">{{loadCenterData.dayAllTime}}H</div>
</div>
<img src="../../../../assets/images/cutGraph/wancheng1.png">
</div>
<div>
<div>
<div style="color:#FFFFFF;font-size:14px;">今日装载车数</div>
<div style="color:#00E9FD;font-size:16px;font-weight:600;">{{loadCenterData.dayLoadCarNum ? loadCenterData.dayLoadCarNum : 0}}辆</div>
</div>
<img src="../../../../assets/images/cutGraph/jihuarenwu2.png">
</div>
</div>
<div id="centerEchartsView"></div> <div id="centerEchartsView"></div>
</div> </div>
</template> </template>
...@@ -134,318 +103,182 @@ import * as echarts from 'echarts'; ...@@ -134,318 +103,182 @@ import * as echarts from 'echarts';
export default { export default {
data(){ data() {
return { return {
DPcomputer5BoxTimer:null, DPcomputer5BoxTimer: null,
//产量数据以及中间图表数据 //产量数据以及中间图表数据
outputMineData:{ outputMineData: {
day:{finish:'0',eff:0,plan:'0',}, day: {finish: '0', eff: 0, plan: '0',},
month:{finish:'0',eff:0,plan:'0',}, month: {finish: '0', eff: 0, plan: '0',},
year:{finish:'0',eff:0,plan:'0',}, year: {finish: '0', eff: 0, plan: '0',},
}, },
//运载数据以及中间图表数据 //运载数据以及中间图表数据
carryCenterData:{ carryCenterData: {
dayAllCarry1:0, dayAllCarry1: 0,
dayAverageCarry1:0, dayAverageCarry1: 0,
dayAllMil1:0, dayAllMil1: 0,
dayAllCarNum:0, dayAllCarNum: 0,
singleAverageTime:0, singleAverageTime: 0,
singleAverageMil:0, singleAverageMil: 0,
}, },
//装载数据据以及中间图表数据 //装载数据据以及中间图表数据
loadCenterData:{ loadCenterData: {
dayAllLoad1:0, dayAllLoad1: 0,
dayAverageLoad1:0, dayAverageLoad1: 0,
dayAllTime:0, dayAllTime: 0,
dayLoadCarNum:0, dayLoadCarNum: 0,
}, },
//中间模块选择 //中间模块选择
centerViewData:{ centerViewData: {
moduleText:'centerModule1', moduleText: 'centerModule1',
xAxisData:['00:00','01:00','02:00','03:00','04:00','05:00','06:00','07:00', '08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00','20:00','21:00','22:00','23:00'], xAxisData: ['00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00', '07:00', '08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00', '21:00', '22:00', '23:00'],
seriesData:[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], seriesData: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
}, },
clData:{
toMonthComplete: "暂无数据",
toMonthCompleteRate: "暂无数据",
toMonthPlan: "暂无数据",
todayComplete: "暂无数据",
todayCompleteRate: "暂无数据",
todayPlan: "暂无数据",
yunZaiTotal: "暂无数据",
yunZaiAveHour: "暂无数据",
milTotal: "暂无数据",
trainsTotal: "暂无数据",
aveSingleTransportTime: "暂无数据",
aveSingleTransportMil: "暂无数据",
},
}
},
mounted() {
this.loadData();
this.DPcomputer5BoxTimer = setInterval(() => {
this.loadData();
}, 10000)
},
methods: {
loadData() {
//获取采区当前日产量
HttpReq.truckDispatching.apiPlanDayQuery().then((res) => {
this.clData = res.data;
})
//中间echarts图表
HttpReq.truckDispatching.apiPlanTime1Query().then((res) => {
this.centerViewData.seriesData = res.data || [];
this.centerEcharts();
})
//中间echarts运载数据
HttpReq.truckDispatching.apiPlanZDay1Query().then((res) => {
if (res.length != 0) {
this.carryCenterData.dayAllCarry1 = res[0].finish;
this.carryCenterData.dayAverageCarry1 = parseFloat(res[0].pfin).toFixed(2);
this.carryCenterData.dayAllMil1 = res[0].allmil ? parseFloat(res[0].allmil).toFixed(3) : 0;
this.carryCenterData.dayAllCarNum = res[0].num;
this.carryCenterData.singleAverageTime = parseFloat(res[0].time).toFixed(2);
this.carryCenterData.singleAverageMil = res[0].averagemil ? parseFloat(res[0].averagemil).toFixed(3) : 0;
}
})
//中间echarts装载数据
HttpReq.truckDispatching.apiPlanZMonth1Query().then((res) => {
if (res.length != 0) {
this.loadCenterData.dayAllLoad1 = res[0].finish;
this.loadCenterData.dayAverageLoad1 = parseFloat(res[0].pfin).toFixed(2);
this.loadCenterData.dayAllTime = res[0].time;
this.loadCenterData.dayLoadCarNum = res[0].num;
} }
})
}, },
mounted(){ //中间模块选择
this.loadData(); centerSelectFn(text) {
this.centerViewData.moduleText = text;
this.loadData();
}, },
methods:{ //中间模块Echarts
loadData() { centerEcharts() {
//获取采区当前日产量 echarts.init(document.getElementById('centerEchartsView')).dispose();
HttpReq.truckDispatching.apiPlanDayQuery().then((res) => { var myChart = echarts.init(document.getElementById('centerEchartsView'));
let undueArray = {}; var option = {
if (res.length == 0 || JSON.stringify(res[0]) == '{}') { tooltip: {
undueArray.eff = 0; trigger: 'axis',
undueArray.finish = 0; axisPointer: {
undueArray.plan = 0; type: 'shadow'
} else {
if (res[0].eff == '') {
undueArray.eff = 0;
undueArray.finish = res[0].finish;
undueArray.plan = res[0].plan;
} else {
undueArray.eff = parseFloat(res[0].eff) * 100;
undueArray.finish = res[0].finish;
undueArray.plan = res[0].plan;
}
}
this.outputMineData.day = undueArray;
})
//获取采区当前月产量
HttpReq.truckDispatching.apiPlanMonthQuery().then((res) => {
let undueArray = {};
if (res.length == 0 || JSON.stringify(res[0]) == '{}') {
undueArray.eff = 0;
undueArray.finish = 0;
undueArray.plan = 0;
} else {
if (res[0].eff == '') {
undueArray.eff = 0;
undueArray.finish = res[0].finish;
undueArray.plan = res[0].plan;
} else {
undueArray.eff = parseFloat(res[0].eff) * 100;
undueArray.finish = res[0].finish;
undueArray.plan = res[0].plan;
}
}
this.outputMineData.month = undueArray;
})
//获取采区当前年产量
HttpReq.truckDispatching.apiPlanYearQuery().then((res) => {
let undueArray = {};
if (res.length == 0 || JSON.stringify(res[0]) == '{}') {
undueArray.eff = 0;
undueArray.finish = 0;
undueArray.plan = 0;
} else {
if (res[0].eff == '') {
undueArray.eff = 0;
undueArray.finish = res[0].finish;
undueArray.plan = res[0].plan;
} else {
undueArray.eff = parseFloat(res[0].eff) * 100;
undueArray.finish = res[0].finish;
undueArray.plan = res[0].plan;
}
}
this.outputMineData.year = undueArray;
})
//中间echarts图表
HttpReq.truckDispatching.apiPlanTime1Query().then((res) => {
// let arr3 = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
// res.forEach((item, index) => {
// arr3.splice(parseInt(item.hour) - 7, 1, parseFloat(item.finish));
// })
this.centerViewData.seriesData = res.data || [];
this.centerEcharts();
})
//中间echarts运载数据
HttpReq.truckDispatching.apiPlanZDay1Query().then((res) => {
if (res.length != 0) {
this.carryCenterData.dayAllCarry1 = res[0].finish;
this.carryCenterData.dayAverageCarry1 = parseFloat(res[0].pfin).toFixed(2);
this.carryCenterData.dayAllMil1 = res[0].allmil ? parseFloat(res[0].allmil).toFixed(3) : 0;
this.carryCenterData.dayAllCarNum = res[0].num;
this.carryCenterData.singleAverageTime = parseFloat(res[0].time).toFixed(2);
this.carryCenterData.singleAverageMil = res[0].averagemil ? parseFloat(res[0].averagemil).toFixed(3) : 0;
} }
}) },
//中间echarts装载数据 grid: {
HttpReq.truckDispatching.apiPlanZMonth1Query().then((res) => { top: '35%',
if (res.length != 0) { left: '1%',
this.loadCenterData.dayAllLoad1 = res[0].finish; right: '1%',
this.loadCenterData.dayAverageLoad1 = parseFloat(res[0].pfin).toFixed(2); bottom: '2%',
this.loadCenterData.dayAllTime = res[0].time; containLabel: true
this.loadCenterData.dayLoadCarNum = res[0].num; },
} xAxis: [
}) {
type: 'category',
this.DPcomputer5BoxTimer = setInterval(() => { data: this.centerViewData.xAxisData,
//获取采区当前日产量 // axisTick: {
HttpReq.truckDispatching.apiPlanDayQuery().then((res) => { // alignWithLabel: true
let undueArray = {}; // },
if (res.length == 0 || JSON.stringify(res[0]) == '{}') { // axisPointer: {
undueArray.eff = 0; // type: 'shadow'
undueArray.finish = 0; // },
undueArray.plan = 0; axisLabel: {
} else { show: true,
if (res[0].eff == '') { textStyle: {
undueArray.eff = 0; color: 'white'
undueArray.finish = res[0].finish;
undueArray.plan = res[0].plan;
} else {
undueArray.eff = parseFloat(res[0].eff) * 100;
undueArray.finish = res[0].finish;
undueArray.plan = res[0].plan;
} }
} },
this.outputMineData.day = undueArray; axisLine: {
}) lineStyle: {
//获取采区当前月产量 color: 'white',
HttpReq.truckDispatching.apiPlanMonthQuery().then((res) => { width: 1
let undueArray = {};
if (res.length == 0 || JSON.stringify(res[0]) == '{}') {
undueArray.eff = 0;
undueArray.finish = 0;
undueArray.plan = 0;
} else {
if (res[0].eff == '') {
undueArray.eff = 0;
undueArray.finish = res[0].finish;
undueArray.plan = res[0].plan;
} else {
undueArray.eff = parseFloat(res[0].eff) * 100;
undueArray.finish = res[0].finish;
undueArray.plan = res[0].plan;
} }
} }
this.outputMineData.month = undueArray; }
}) ],
//获取采区当前年产量 yAxis: [
HttpReq.truckDispatching.apiPlanYearQuery().then((res) => { {
let undueArray = {}; type: 'value',
if (res.length == 0 || JSON.stringify(res[0]) == '{}') { axisLabel: {
undueArray.eff = 0; show: true,
undueArray.finish = 0; textStyle: {
undueArray.plan = 0; color: 'white'
} else {
if (res[0].eff == '') {
undueArray.eff = 0;
undueArray.finish = res[0].finish;
undueArray.plan = res[0].plan;
} else {
undueArray.eff = parseFloat(res[0].eff) * 100;
undueArray.finish = res[0].finish;
undueArray.plan = res[0].plan;
} }
} },
this.outputMineData.year = undueArray; splitLine: {
}) lineStyle: {
//中间echarts图表 // 使用深浅的间隔色
HttpReq.truckDispatching.apiPlanTime1Query().then((res) => { color: ['rgba(255,255,255,0.3)']
// let arr3 = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
// res.forEach((item,index)=>{
// arr3.splice(parseInt(item.hour) - 7,1, parseFloat(item.finish));
// })
this.centerViewData.seriesData = res.data || [];
this.centerEcharts();
})
//中间echarts运载数据
HttpReq.truckDispatching.apiPlanZDay1Query().then((res) => {
if (res.length != 0) {
this.carryCenterData.dayAllCarry1 = res[0].finish;
this.carryCenterData.dayAverageCarry1 = parseFloat(res[0].pfin).toFixed(2);
this.carryCenterData.dayAllMil1 = res[0].allmil ? parseFloat(res[0].allmil).toFixed(3) : 0;
this.carryCenterData.dayAllCarNum = res[0].num;
this.carryCenterData.singleAverageTime = parseFloat(res[0].time).toFixed(2);
this.carryCenterData.singleAverageMil = res[0].averagemil ? parseFloat(res[0].averagemil).toFixed(3) : 0;
}
})
//中间echarts装载数据
HttpReq.truckDispatching.apiPlanZMonth1Query().then((res) => {
if (res.length != 0) {
this.loadCenterData.dayAllLoad1 = res[0].finish;
this.loadCenterData.dayAverageLoad1 = parseFloat(res[0].pfin).toFixed(2);
this.loadCenterData.dayAllTime = res[0].time;
this.loadCenterData.dayLoadCarNum = res[0].num;
}
})
}, 10000)
},
//中间模块选择
centerSelectFn(text) {
this.centerViewData.moduleText = text;
},
//中间模块Echarts
centerEcharts() {
echarts.init(document.getElementById('centerEchartsView')).dispose();
var myChart = echarts.init(document.getElementById('centerEchartsView'));
var option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
grid: {
top: '35%',
left: '1%',
right: '1%',
bottom: '2%',
containLabel: true
},
xAxis: [
{
type: 'category',
data: this.centerViewData.xAxisData,
// axisTick: {
// alignWithLabel: true
// },
// axisPointer: {
// type: 'shadow'
// },
axisLabel: {
show: true,
textStyle: {
color: 'white'
}
},
axisLine: {
lineStyle: {
color: 'white',
width: 1
}
} }
} },
], axisLine: {
yAxis: [ lineStyle: {
{ color: 'white',
type: 'value', width: 0
axisLabel: {
show: true,
textStyle: {
color: 'white'
}
},
splitLine: {
lineStyle: {
// 使用深浅的间隔色
color: ['rgba(255,255,255,0.3)']
}
},
axisLine: {
lineStyle: {
color: 'white',
width: 0
}
} }
} }
], }
series: [ ],
{ series: [
name: '重量(吨)', {
type: 'bar', name: '重量(吨)',
barWidth: 20, type: 'bar',
data: this.centerViewData.seriesData, barWidth: 20,
itemStyle: { data: this.centerViewData.seriesData,
color: '#01CBF6' itemStyle: {
}, color: '#01CBF6'
} },
] }
}; ]
option && myChart.setOption(option); };
}, option && myChart.setOption(option);
}, },
beforeDestroy(){ },
if(this.DPcomputer5BoxTimer) { beforeDestroy() {
clearInterval(this.DPcomputer5BoxTimer); if (this.DPcomputer5BoxTimer) {
this.DPcomputer5BoxTimer = null; clearInterval(this.DPcomputer5BoxTimer);
} this.DPcomputer5BoxTimer = null;
} }
}
} }
</script> </script>
......
src/views/personnelPositioning/beacon/index.vue
View file @ 27e5ba9a
...@@ -196,6 +196,12 @@ export default { ...@@ -196,6 +196,12 @@ export default {
cancelForm() { cancelForm() {
this.visible = false; this.visible = false;
this.$refs.formViewRef.resetFields(); this.$refs.formViewRef.resetFields();
this.formData = {
beaconame: '',
beaconumber: '',
xcoordinate: '',
ycoordinate: '',
}
}, },
tableRowClassName({row, rowIndex}) { tableRowClassName({row, rowIndex}) {
}, },
......
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