Skip to content

卡
卡车调度系统
Commit 1d5a1453 authored by xxx's avatar xxx
Browse files
Options

1

parent 5c50a052
Hide whitespace changes
Inline Side-by-side
Showing with 109 additions and 35 deletions
src/views/MLargeScreen/components/carManagement/index.vue
View file @ 1d5a1453
......@@ -133,11 +133,7 @@
<div>{{truckDynamicListData.number ? truckDynamicListData.number : '无'}}</div>
</div>
<div class="truckDynamicContent1">
<div class="truckDynamicRateStyle">
<div style="color:white;font-size:19px;">{{truckDynamicListData.rate ? truckDynamicListData.rate : 0}}%</div>
<div style="color:white;font-size:15px;">完成度</div>
</div>
<el-progress type="circle" :percentage="parseInt(truckDynamicListData.rate ? truckDynamicListData.rate : 0)" :color="'#2B91E2'" :stroke-width="10" :width="90" :height="90" :show-text='false'></el-progress>
<div id="kachedongtaiRateId" class="kachedongtaiRateClass"></div>
<div style="text-align: center;">
<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>
......@@ -456,8 +452,8 @@ export default {
arr1.push(item.number);
arr2.push(item[this.truckRankListData.selectFieldText]);
})
this.truckRankListData.driverName = arr1.reverse();
this.truckRankListData.driverSeriesData = arr2.reverse();
this.truckRankListData.driverName = arr1;
this.truckRankListData.driverSeriesData = arr2;
this.truckChangeEcharts();
})
}else if(this.truckRankListData.selectTimeText == 'week'){
......@@ -468,8 +464,8 @@ export default {
arr1.push(item.number);
arr2.push(item[this.truckRankListData.selectFieldText]);
})
this.truckRankListData.driverName = arr1.reverse();
this.truckRankListData.driverSeriesData = arr2.reverse();
this.truckRankListData.driverName = arr1;
this.truckRankListData.driverSeriesData = arr2;
this.truckChangeEcharts();
})
}else if(this.truckRankListData.selectTimeText == 'month'){
......@@ -480,8 +476,8 @@ export default {
arr1.push(item.number);
arr2.push(item[this.truckRankListData.selectFieldText]);
})
this.truckRankListData.driverName = arr1.reverse();
this.truckRankListData.driverSeriesData = arr2.reverse();
this.truckRankListData.driverName = arr1;
this.truckRankListData.driverSeriesData = arr2;
this.truckChangeEcharts();
})
}
......@@ -607,8 +603,8 @@ export default {
arr1.push(item.number);
arr2.push(item[this.truckRankListData.selectFieldText]);
})
this.truckRankListData.driverName = arr1.reverse();
this.truckRankListData.driverSeriesData = arr2.reverse();
this.truckRankListData.driverName = arr1;
this.truckRankListData.driverSeriesData = arr2;
this.truckChangeEcharts();
})
}else if(this.truckRankListData.selectTimeText == 'week'){
......@@ -619,8 +615,8 @@ export default {
arr1.push(item.number);
arr2.push(item[this.truckRankListData.selectFieldText]);
})
this.truckRankListData.driverName = arr1.reverse();
this.truckRankListData.driverSeriesData = arr2.reverse();
this.truckRankListData.driverName = arr1;
this.truckRankListData.driverSeriesData = arr2;
this.truckChangeEcharts();
})
}else if(this.truckRankListData.selectTimeText == 'month'){
......@@ -631,8 +627,8 @@ export default {
arr1.push(item.number);
arr2.push(item[this.truckRankListData.selectFieldText]);
})
this.truckRankListData.driverName = arr1.reverse();
this.truckRankListData.driverSeriesData = arr2.reverse();
this.truckRankListData.driverName = arr1;
this.truckRankListData.driverSeriesData = arr2;
this.truckChangeEcharts();
})
}
......@@ -776,8 +772,8 @@ export default {
arr1.push(item.number);
arr2.push(item[this.truckRankListData.selectFieldText]);
})
this.truckRankListData.driverName = arr1.reverse();
this.truckRankListData.driverSeriesData = arr2.reverse();
this.truckRankListData.driverName = arr1;
this.truckRankListData.driverSeriesData = arr2;
this.truckChangeEcharts();
})
}else if(text == 'week'){
......@@ -788,8 +784,8 @@ export default {
arr1.push(item.number);
arr2.push(item[this.truckRankListData.selectFieldText]);
})
this.truckRankListData.driverName = arr1.reverse();
this.truckRankListData.driverSeriesData = arr2.reverse();
this.truckRankListData.driverName = arr1;
this.truckRankListData.driverSeriesData = arr2;
this.truckChangeEcharts();
})
}else if(text == 'month'){
......@@ -800,8 +796,8 @@ export default {
arr1.push(item.number);
arr2.push(item[this.truckRankListData.selectFieldText]);
})
this.truckRankListData.driverName = arr1.reverse();
this.truckRankListData.driverSeriesData = arr2.reverse();
this.truckRankListData.driverName = arr1;
this.truckRankListData.driverSeriesData = arr2;
this.truckChangeEcharts();
})
}
......@@ -831,8 +827,8 @@ export default {
arr1.push(item.number);
arr2.push(item[this.truckRankListData.selectFieldText]);
})
this.truckRankListData.driverName = arr1.reverse();
this.truckRankListData.driverSeriesData = arr2.reverse();
this.truckRankListData.driverName = arr1;
this.truckRankListData.driverSeriesData = arr2;
this.truckChangeEcharts();
})
}else if(this.truckRankListData.selectTimeText == 'week'){
......@@ -843,8 +839,8 @@ export default {
arr1.push(item.number);
arr2.push(item[this.truckRankListData.selectFieldText]);
})
this.truckRankListData.driverName = arr1.reverse();
this.truckRankListData.driverSeriesData = arr2.reverse();
this.truckRankListData.driverName = arr1;
this.truckRankListData.driverSeriesData = arr2;
this.truckChangeEcharts();
})
}else if(this.truckRankListData.selectTimeText == 'month'){
......@@ -855,8 +851,8 @@ export default {
arr1.push(item.number);
arr2.push(item[this.truckRankListData.selectFieldText]);
})
this.truckRankListData.driverName = arr1.reverse();
this.truckRankListData.driverSeriesData = arr2.reverse();
this.truckRankListData.driverName = arr1;
this.truckRankListData.driverSeriesData = arr2;
this.truckChangeEcharts();
})
}
......@@ -1000,10 +996,90 @@ export default {
this.truckDynamicListData.endTime = res[0].endTime;
this.truckDynamicListData.loadArea = res[0].loadArea;
this.truckDynamicListData.unloadArea = res[0].unloadArea;
this.kachedongtaiEcharts();
}
this.truckDynamicListData.num2 = this.truckDynamicListData.num2 + 1;
})
},
kachedongtaiEcharts(){
var maxValue = 100;//进度条最大值
echarts.init(document.getElementById('kachedongtaiRateId')).dispose();
var pipe = echarts.init(document.getElementById('kachedongtaiRateId'));
var option = {
//环形中间文字
graphic: [
//第一行文字
//内容 + 位置
{
type: 'text',
left: 'center',
top: '30%',
style: {
//value当前进度
text: this.truckDynamicListData.rate ? this.truckDynamicListData.rate + '%' : 0 + '%',
textAlign: 'center',
fill: 'white',
fontSize: 22
}
},
//第二行文字
//内容 + 位置
{
type: 'text',
left: 'center',
top: '55%',
style: {
//maxValue进度条最大值
text: '完成度',
textAlign: 'center',
fill: 'white',
fontSize: 14
}
}
],
series: [{
type: 'pie',
radius: ['100%', '80%'],//['外圆大小', '内圆大小']
center: ['50%', '50%'],//圆心位置['左右'， '上下']
hoverAnimation: false,//取消鼠标悬停动画
animationEasing: 'cubicOut',//设置动画缓动效果
//取消显示饼图自带数据线条
labelLine: {
normal: {
show: false
}
},
//增加阴影效果
itemStyle: {
normal: {
shadowBlur: 200,
shadowColor: 'rgba(44, 196, 196, 0.8)'
}
},
data: [
//value当前进度 + 颜色
{
value: this.truckDynamicListData.rate ? this.truckDynamicListData.rate : 0,
itemStyle: {
normal: {
color: 'rgb(0,151,229)'
}
}
},
//(maxValue进度条最大值 - value当前进度) + 颜色
{
value: maxValue - parseInt(this.truckDynamicListData.rate ? this.truckDynamicListData.rate : 0),
itemStyle: {
normal: {
color: 'rgb(34,250,226)'
}
}
}
]
}]
};
pipe.setOption(option);
},
//铲车动态
dianchandongtai(){
let num1 = parseInt(this.forkliftkDynamicListData.data.length) - 1;
......@@ -1103,6 +1179,10 @@ export default {
</script>
<style scoped>
.kachedongtaiRateClass{
height: 90px;
width: 90px;
}
.carManScrView{
width: 100%;
height: 100%;
......@@ -1314,12 +1394,6 @@ export default {
font-weight: 600;
justify-content: space-evenly;
}
.truckDynamicRateStyle{
position: absolute;
left: 3vw;
top: 2.5vh;
text-align: center;
}
.carDynamicContent1{
width: 100%;
height: 7vh;
......
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