Skip to content

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

修改

parent d02e086f
Hide whitespace changes
Inline Side-by-side
Showing with 127 additions and 23 deletions
src/views/MLargeScreen/components/dataScreening/index.vue
View file @ d41bd207
...@@ -273,34 +273,26 @@ ...@@ -273,34 +273,26 @@
<div class="dataScrView_rightView_title">矿石开采效率</div> <div class="dataScrView_rightView_title">矿石开采效率</div>
<div class="dataScrView_rightView_content"> <div class="dataScrView_rightView_content">
<div class="dataScrView_rightView_content_view1 guanhulanseditu"> <div class="dataScrView_rightView_content_view1 guanhulanseditu">
<div class="dataScrView_rightView_content_view1_rate1"> <div id='liquidEchart1' class="dataScrView_rightView_content_view1_rate1"></div>
<div style="color:#06BEFA;">比率</div>
<div style="color:white;">28%</div>
</div>
<el-progress type="circle" :percentage="outputMineData.day.rate" :stroke-width="7" :width="80" :height="80" :show-text='false'></el-progress>
<div style="color:white;"> <div style="color:white;">
<div style="color:#A6F6F9;font-size:20px;"><span style="color:#06BEFA;">1000</span> T</div> <div style="color:#A6F6F9;font-size:20px;"><span style="color:#06BEFA;">{{exploitationEfficiencyData.dayYield1}}</span> T</div>
<div>日总开采量</div> <div>日总开采量</div>
</div> </div>
<div style="color:white;"> <div style="color:white;">
<div style="color:#A6F6F9;font-size:20px;"><span style="color:#06BEFA;">300</span> KM</div> <div style="color:#A6F6F9;font-size:20px;"><span style="color:#06BEFA;">{{exploitationEfficiencyData.dayMil1}}</span> KM</div>
<div>日总里程</div> <div>日总里程</div>
</div> </div>
</div> </div>
<div class="dataScrView_rightView_content_view1 guanhulvseditu"> <div class="dataScrView_rightView_content_view1 guanhulvseditu">
<div class="dataScrView_rightView_content_view1_rate2">
<div style="color:#03FEFE;">比率</div>
<div style="color:white;">28%</div>
</div>
<div style="color:white;"> <div style="color:white;">
<div style="color:#A6F6F9;font-size:20px;"><span style="color:#03FEFE;">1000</span> H</div> <div style="color:#A6F6F9;font-size:20px;"><span style="color:#03FEFE;">{{exploitationEfficiencyData.dayWorkTime2}}</span> H</div>
<div>司机日总工作时长</div> <div>司机日总工作时长</div>
</div> </div>
<div style="color:white;"> <div style="color:white;">
<div style="color:#A6F6F9;font-size:20px;"><span style="color:#03FEFE;">300</span> T</div> <div style="color:#A6F6F9;font-size:20px;"><span style="color:#03FEFE;">{{exploitationEfficiencyData.dayYield2}}</span> T</div>
<div>日总开采量</div> <div>日总开采量</div>
</div> </div>
<el-progress type="circle" :percentage="outputMineData.month.rate" :stroke-width="7" :width="80" :height="80" :show-text='false'></el-progress> <div id='liquidEchart2' class="dataScrView_rightView_content_view1_rate2"></div>
</div> </div>
</div> </div>
</div> </div>
...@@ -329,6 +321,7 @@ import * as echarts from 'echarts'; ...@@ -329,6 +321,7 @@ import * as echarts from 'echarts';
import sunnyPic from '../../../../assets/images/cutGraph/sunny.png' import sunnyPic from '../../../../assets/images/cutGraph/sunny.png'
import cloudyPic from '../../../../assets/images/cutGraph/cloudy.png' import cloudyPic from '../../../../assets/images/cutGraph/cloudy.png'
import overcastPic from '../../../../assets/images/cutGraph/overcast.png' import overcastPic from '../../../../assets/images/cutGraph/overcast.png'
import 'echarts-liquidfill'; // 引入水球图的组件
export default { export default {
data() { data() {
...@@ -401,7 +394,12 @@ export default { ...@@ -401,7 +394,12 @@ export default {
}, },
//矿石开采效率 //矿石开采效率
exploitationEfficiencyData:{ exploitationEfficiencyData:{
rate1:[0.5],
dayYield1:1000,
dayMil1:300,
rate2:[0.5],
dayWorkTime2:1000,
dayYield2:300,
}, },
//实时报警 //实时报警
realAlarmStyleData:{ realAlarmStyleData:{
...@@ -581,7 +579,8 @@ export default { ...@@ -581,7 +579,8 @@ export default {
} }
}) })
//矿石开采效率 //矿石开采效率
this.initLiquidEchart1();
this.initLiquidEchart2();
//实时报警 //实时报警
HttpReq.truckDispatching.callPoliceQuery({status:1}).then((res) => { HttpReq.truckDispatching.callPoliceQuery({status:1}).then((res) => {
if(res.code == 200){ if(res.code == 200){
...@@ -764,6 +763,113 @@ export default { ...@@ -764,6 +763,113 @@ export default {
} }
}) })
}, },
//矿石开采效率
initLiquidEchart1(){
echarts.init(document.getElementById('liquidEchart1')).dispose();
setTimeout(() => {
this.chartsLiquid = echarts.init(document.getElementById('liquidEchart1'));
// 把配置和数据放这里
this.chartsLiquid.setOption({
series: [{
type: 'liquidFill',
radius: '70px',
data: this.exploitationEfficiencyData.rate1,
label: {
normal: {
color: '#05ADFB',
insideColor: '#fff',
textStyle: {
fontSize: 18,
}
}
},
backgroundStyle: {
color: '#012861',
borderWidth: "1.5", // 内边框
borderColor: "rgb(6, 190, 250)"
},
color: [{
type: 'linear',
x: 0,
y: 1,
x2: 0,
y2: 0,
colorStops: [{
offset: 1,
color: ["rgb(6, 190, 250)"], // 0% 处的颜色
}, {
offset: 0,
color: ["rgb(6, 190, 250)"], // 100% 处的颜色
}],
global: false // 缺省为 false
}],
outline: {
show: true,
borderDistance: 0,
itemStyle: {
borderColor: '#012861',
borderWidth: 5,
shadowBlur: 5,
shadowColor: 'rgb(6, 190, 250)'
},
}
}]
});
}, 50)
},
initLiquidEchart2(){
echarts.init(document.getElementById('liquidEchart2')).dispose();
setTimeout(() => {
this.chartsLiquid = echarts.init(document.getElementById('liquidEchart2'));
// 把配置和数据放这里
this.chartsLiquid.setOption({
series: [{
type: 'liquidFill',
radius: '70px',
data: this.exploitationEfficiencyData.rate2,
label: {
normal: {
color: 'rgb(3, 254, 254)',
insideColor: '#fff',
textStyle: {
fontSize: 18,
}
}
},
backgroundStyle: {
color: '#012861',
borderWidth: "1.5", // 内边框
borderColor: "rgb(3, 254, 254)"
},
color: [{
type: 'linear',
x: 0,
y: 1,
x2: 0,
y2: 0,
colorStops: [{
offset: 1,
color: ["rgb(3, 254, 254)"], // 0% 处的颜色
}, {
offset: 0,
color: ["rgb(3, 254, 254)"], // 100% 处的颜色
}],
global: false // 缺省为 false
}],
outline: {
show: true,
borderDistance: 0,
itemStyle: {
borderColor: '#012861',
borderWidth: 5,
shadowBlur: 5,
shadowColor: 'rgb(3, 254, 254)'
},
}
}]
});
}, 50)
},
//获取当前时间 //获取当前时间
dayCurrentTimeFn(){ dayCurrentTimeFn(){
...@@ -1138,18 +1244,16 @@ dd>div{ ...@@ -1138,18 +1244,16 @@ dd>div{
justify-content: space-evenly; justify-content: space-evenly;
} }
.dataScrView_rightView_content_view1_rate1{ .dataScrView_rightView_content_view1_rate1{
position: absolute; height: 80px;
left: 3.1vw; width: 80px;
top: 2.4vh;
} }
.dataScrView_rightView_content_view1_rate2{ .dataScrView_rightView_content_view1_rate2{
position: absolute; height: 80px;
right: 2.3vw; width: 80px;
top: 2.4vh;
} }
.guanhulanseditu{ .guanhulanseditu{
background:no-repeat center center url('~@/assets/images/cutGraph/juxinglanse.png'); background:no-repeat center center url('~@/assets/images/cutGraph/juxinglanse.png');
background-size:100% 90%; background-size:100% 85%;
margin-right: 5%; margin-right: 5%;
} }
.guanhulvseditu{ .guanhulvseditu{
......
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