Skip to content

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

1

parent 45f88de8
Hide whitespace changes
Inline Side-by-side
Showing with 389 additions and 15 deletions
src/views/MLargeScreen/components/smallComponents/DPcomputer10.vue
View file @ 0690f55a
<template> <template>
<div> <div class="DPcomputer10Box">
<!-- 车辆运行状况 -->
<div class="carManScrView_leftView_title">车辆运行状况</div>
<div class="carManScrView_leftView_content" style="position: relative;">
<div style="width:100%;height: 1.5vh;display: flex;font-size: 15px;justify-content: right;align-items: center;">
<div style="width:1.5vh;height: 1.5vh;background-color: #14F3C5;margin-right: 10px;border-radius: 2px;"></div>
<div style="color:#A6F6F9;margin-right: 10px;">车辆离线</div>
<div style="width:1.5vh;height: 1.5vh;background-color: #2195FD;margin-right: 10px;border-radius: 2px;"></div>
<div style="color:#A6F6F9;margin-right: 10px;">车辆在线</div>
</div>
<div>
<div style="margin-top:5px;">
<span style="color:#02F7EF;margin-left: 4vw;">{{carWorkingStateData.kacheonline}}</span>
<span style="color:#2195FD;margin-left: 13vw;">{{carWorkingStateData.kacheoffline}}</span>
</div>
<div style="display: flex;">
<div style="color:#A6F6F9;font-size: 15px;">卡车状态</div>
<div style="display: flex;width: 80%;margin-left: 0.5vw;border: #02F7EF 0.5px solid;border-radius: 3px;">
<div :style="'height:1.7vh;border-top-left-radius: 3px;border-bottom-left-radius: 3px;background-color: #14F3C5;width:' + (carWorkingStateData.kacheonline/(carWorkingStateData.kacheonline + carWorkingStateData.kacheoffline)) * 100 + '%;'"></div>
<div :style="'height:1.7vh;border-top-right-radius: 3px;border-bottom-right-radius: 3px;background-color: #2195FD;width:' + (carWorkingStateData.kacheoffline/(carWorkingStateData.kacheonline + carWorkingStateData.kacheoffline)) * 100 + '%;'"></div>
</div>
</div>
</div>
<div>
<div style="margin-top:5px;">
<span style="color:#02F7EF;margin-left: 4vw;">{{carWorkingStateData.chancheonline}}</span>
<span style="color:#2195FD;margin-left: 13vw;">{{carWorkingStateData.chancheoffline}}</span>
</div>
<div style="display: flex;">
<div style="color:#A6F6F9;font-size: 15px;">铲车状态</div>
<div style="display: flex;width: 80%;margin-left: 0.5vw;border: #02F7EF 0.5px solid;border-radius: 3px;">
<div :style="'height:1.7vh;border-top-left-radius: 3px;border-bottom-left-radius: 3px;background-color: #14F3C5;width:' + (carWorkingStateData.chancheonline/(carWorkingStateData.chancheonline + carWorkingStateData.chancheoffline)) * 100 + '%;'"></div>
<div :style="'height:1.7vh;border-top-right-radius: 3px;border-bottom-right-radius: 3px;background-color: #2195FD;width:' + (carWorkingStateData.chancheoffline/(carWorkingStateData.chancheonline + carWorkingStateData.chancheoffline)) * 100 + '%;'"></div>
</div>
</div>
</div>
<div>
<div style="margin-top:5px;">
<span style="color:#02F7EF;margin-left: 4vw;">{{carWorkingStateData.qitacheonline}}</span>
<span style="color:#2195FD;margin-left: 13vw;">{{carWorkingStateData.qitacheoffline}}</span>
</div>
<div style="display: flex;">
<div style="color:#A6F6F9;font-size: 15px;">其他车辆</div>
<div style="display: flex;width: 80%;margin-left: 0.5vw;border: #02F7EF 0.5px solid;border-radius: 3px;">
<div :style="'height:1.7vh;border-top-left-radius: 3px;border-bottom-left-radius: 3px;background-color: #14F3C5;width:' + (carWorkingStateData.qitacheonline/(carWorkingStateData.qitacheonline + carWorkingStateData.qitacheoffline)) * 100 + '%;'"></div>
<div :style="'height:1.7vh;border-top-right-radius: 3px;border-bottom-right-radius: 3px;background-color: #2195FD;width:' + (carWorkingStateData.qitacheoffline/(carWorkingStateData.qitacheonline + carWorkingStateData.qitacheoffline)) * 100 + '%;'"></div>
</div>
</div>
</div>
<div ref="chartPanel" id="chart-panel" style="width:100%;height: 12vh;"></div>
</div>
</div> </div>
</template> </template>
...@@ -11,15 +60,141 @@ import { Tools, HttpReq, CAMap} from '@/assets/js/common.js'; ...@@ -11,15 +60,141 @@ import { Tools, HttpReq, CAMap} from '@/assets/js/common.js';
export default { export default {
data(){ data(){
return { return {
DPcomputer10BoxTimer:null,
//车辆运行状况
carWorkingStateData:{
kacheonline:0,
kacheoffline:0,
chancheonline:0,
chancheoffline:0,
qitacheonline:0,
qitacheoffline:0,
optionData: [
{
name: "卡车",
value: 0,
itemStyle: {
opacity: 0.2,
color: "#8FDFFE",
},
},
{
name: "铲车",
value: 0,
itemStyle: {
opacity: 0.2,
color: "#00A8FF",
},
}
],
},
} }
}, },
mounted(){}, mounted(){
this.loadData();
},
methods:{ methods:{
loadData(){
},
//车辆运行状况
draw3d() {
// 基于准备好的dom，初始化echarts实例
echarts.init(document.getElementById('chart-panel')).dispose();
let chartPanel = echarts.init(document.getElementById("chart-panel"));
for (let i = 0; i < this.carWorkingStateData.optionData.length; i++) {
delete this.carWorkingStateData.optionData[i].itemStyle.opacity;
}
// 传入数据生成 option
let series = getPie3D(this.carWorkingStateData.optionData, 0);
let option = {
tooltip: {
formatter: (params) => {
// console.log(params)
if (
params.seriesName !== "mouseoutSeries" &&
params.seriesName !== "pie2d"
) {
return `<div style="padding:0 0px">${params.seriesName}：${(
option.series[params.seriesIndex].pieData.proportion * 100
).toFixed(2)}%</div>`;
}
},
},
xAxis3D: {
min: -1,
max: 1,
},
yAxis3D: {
min: -1,
max: 1,
},
zAxis3D: {
min: -1,
max: 1,
},
grid3D: {
show: false, //是否显示三维笛卡尔坐标系。
boxHeight: 20, //三维笛卡尔坐标系在三维场景中的高度
top: "1%",
// bottom: "80%",
// environment: "#021041", //背景
viewControl: {
//用于鼠标的旋转，缩放等视角控制
alpha: 25, //角度
distance: 200, //调整视角到主体的距离，类似调整zoom 重要
rotateSensitivity: 0, //设置为0无法旋转
zoomSensitivity: 0, //设置为0无法缩放
panSensitivity: 0, //设置为0无法平移
autoRotate: false, //自动旋转
},
},
series: series,
};
chartPanel.setOption(option);
//是否需要label指引线，如果要就添加一个透明的2d饼状图并调整角度使得labelLine和3d的饼状图对齐，并再次setOption
option.series.push({
name: "pie2d",
type: "pie",
label: {
color: "#00D7E9",
fontSize: 16,
// position: 'inner',
// formatter: "{b}\n\n",
// padding: [0, -40],
formatter: (item) => {
// console.log(item)
return item.data.name + ":" + item.data.value + "辆" + "";
},
},
labelLine: {
length: 50,
length2: 30,
lineStyle: {
color: "#ffffff",
width: 1.5,
},
},
startAngle: 30, //起始角度，支持范围[0, 360]。 //重要
clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
radius: ["50%", "50%"],
center: ["50%", "50%"],
data: this.carWorkingStateData.optionData,
itemStyle: {
opacity: 0,
},
top: "15%",
avoidLabelOverlap: true, //防止标签重叠
});
chartPanel.setOption(option);
},
}, },
beforeDestroy(){ beforeDestroy(){
if(this.DPcomputer10BoxTimer) {
clearInterval(this.DPcomputer10BoxTimer);
this.DPcomputer10BoxTimer = null;
}
} }
} }
</script> </script>
...@@ -29,5 +204,30 @@ export default { ...@@ -29,5 +204,30 @@ export default {
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
.DPcomputer10Box{
width: 20vw;
height: 32vh;
background-color: rgba(32,42,67,0.95);
padding: 5px 7px;
box-sizing: border-box;
overflow: hidden;
}
.DPcomputer10Box .carManScrView_leftView_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;
}
.DPcomputer10Box .carManScrView_leftView_content{
width: 100%;
height: 27vh;
}
</style> </style>
\ No newline at end of file
src/views/MLargeScreen/components/smallComponents/DPcomputer8.vue
View file @ 0690f55a
<template> <template>
<div class="DPcomputer8Box"> <div class="DPcomputer8Box">
<!-- 矿石开采效率 -->
<div class="dataScrView_rightView_title">矿石开采效率</div>
<div class="dataScrView_rightView_content">
<div class="dataScrView_rightView_content_view1 guanhulanseditu">
<div id='liquidEchart1' class="dataScrView_rightView_content_view1_rate1"></div>
<div style="color:white;">
<div style="color:#A6F6F9;font-size:20px;"><span style="color:#06BEFA;">{{exploitationEfficiencyData.dayYield1}}</span> T</div>
<div>日总开采量</div>
</div>
<div style="color:white;">
<div style="color:#A6F6F9;font-size:20px;"><span style="color:#06BEFA;">{{exploitationEfficiencyData.dayMil1}}</span> KM</div>
<div>日总里程</div>
</div>
</div>
<div class="dataScrView_rightView_content_view1 guanhulvseditu">
<div style="color:white;">
<div style="color:#A6F6F9;font-size:20px;"><span style="color:#03FEFE;">{{exploitationEfficiencyData.dayWorkTime2}}</span> H</div>
<div>司机日总工作时长</div>
</div>
<div style="color:white;">
<div style="color:#A6F6F9;font-size:20px;"><span style="color:#03FEFE;">{{exploitationEfficiencyData.dayYield2}}</span> T</div>
<div>日总开采量</div>
</div>
<div id='liquidEchart2' class="dataScrView_rightView_content_view1_rate2"></div>
</div>
</div>
</div> </div>
</template> </template>
...@@ -14,7 +39,15 @@ export default { ...@@ -14,7 +39,15 @@ export default {
data(){ data(){
return { return {
DPcomputer8BoxTimer:null, DPcomputer8BoxTimer:null,
//矿石开采效率
exploitationEfficiencyData:{
rate1:[0.5],
dayYield1:50,
dayMil1:30,
rate2:[0.5],
dayWorkTime2:8,
dayYield2:50,
},
} }
}, },
mounted(){ mounted(){
...@@ -22,7 +55,15 @@ export default { ...@@ -22,7 +55,15 @@ export default {
}, },
methods:{ methods:{
loadData(){ loadData(){
//矿石开采效率
this.initLiquidEchart1();
this.initLiquidEchart2();
this.DPcomputer8BoxTimer = setInterval(() => {
//矿石开采效率
this.initLiquidEchart1();
this.initLiquidEchart2();
},10000)
}, },
//矿石开采效率 //矿石开采效率
initLiquidEchart1(){ initLiquidEchart1(){
...@@ -158,4 +199,48 @@ export default { ...@@ -158,4 +199,48 @@ export default {
box-sizing: border-box; box-sizing: border-box;
overflow: hidden; overflow: hidden;
} }
.DPcomputer8Box .dataScrView_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;
}
.DPcomputer8Box .dataScrView_rightView_content{
width: 100%;
height: 19vh;
}
.DPcomputer8Box .dataScrView_rightView_content_view1{
position: relative;
margin-top: 1vh;
display: flex;
align-items: center;
font-weight: 600;
justify-content: space-evenly;
}
.DPcomputer8Box .dataScrView_rightView_content_view1_rate1{
height: 80px;
width: 80px;
}
.DPcomputer8Box .dataScrView_rightView_content_view1_rate2{
height: 80px;
width: 80px;
}
.DPcomputer8Box .guanhulanseditu{
background:no-repeat center center url('~@/assets/images/cutGraph/juxinglanse.png');
background-size:100% 85%;
margin-right: 5%;
}
.DPcomputer8Box .guanhulvseditu{
background:no-repeat center center url('~@/assets/images/cutGraph/juxinglvse.png');
background-size:100% 90%;
margin-left: 5%;
}
</style> </style>
\ No newline at end of file
src/views/MLargeScreen/components/smallComponents/DPcomputer9.vue
View file @ 0690f55a
<template> <template>
<div> <div class="DPcomputer9Box">
<!-- 实时报警 -->
<div class="dataScrView_rightView_title">实时报警</div>
<div class="dataScrView_rightView_content">
<div class="realAlarmStyle">
<div v-for="(item,index) in realAlarmStyleData.listData" :key="index">
<img v-if="index % 4 == 0" src="../../../../assets/images/cutGraph/jingshikaobei1.png">
<img v-else-if="index % 3 == 0" src="../../../../assets/images/cutGraph/jingshikaobei2.png">
<img v-else-if="index % 2 == 0" src="../../../../assets/images/cutGraph/jingshikaobei3.png">
<img v-else src="../../../../assets/images/cutGraph/jingshikaobei4.png">
<div style="color:#A6F6F9;margin-left:10px;">
<div>{{item.alarmexplain ? item.alarmexplain : item.number + item.carbreak}}</div>
<div>{{item.createTime}}</div>
</div>
</div>
</div>
</div>
</div> </div>
</template> </template>
...@@ -11,15 +26,48 @@ import { Tools, HttpReq, CAMap} from '@/assets/js/common.js'; ...@@ -11,15 +26,48 @@ import { Tools, HttpReq, CAMap} from '@/assets/js/common.js';
export default { export default {
data(){ data(){
return { return {
DPcomputer9BoxTimer:null,
//实时报警
realAlarmStyleData:{
listData:[],
}
} }
}, },
mounted(){}, mounted(){
this.loadData();
},
methods:{ methods:{
loadData(){
//实时报警
HttpReq.truckDispatching.callPoliceQuery({status:1,size:9999}).then((res) => {
if(res.code == 200){
HttpReq.truckDispatching.carFaultQuery({status:1,size:9999,sort:'createTime,desc'}).then((res1) => {
if(res1.code == 200){
this.realAlarmStyleData.listData = res.data.content.concat(res1.data.content);
}
})
}
})
this.DPcomputer9BoxTimer = setInterval(() => {
//实时报警
HttpReq.truckDispatching.callPoliceQuery({status:1,size:9999}).then((res) => {
if(res.code == 200){
HttpReq.truckDispatching.carFaultQuery({status:1,size:9999,sort:'createTime,desc'}).then((res1) => {
if(res1.code == 200){
this.realAlarmStyleData.listData = res.data.content.concat(res1.data.content);
}
})
}
})
},10000)
},
}, },
beforeDestroy(){ beforeDestroy(){
if(this.DPcomputer9BoxTimer) {
clearInterval(this.DPcomputer9BoxTimer);
this.DPcomputer9BoxTimer = null;
}
} }
} }
</script> </script>
...@@ -29,5 +77,46 @@ export default { ...@@ -29,5 +77,46 @@ export default {
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
.DPcomputer9Box{
width: 20vw;
height: 23.5vh;
background-color: rgba(32,42,67,0.95);
padding: 5px 7px;
box-sizing: border-box;
overflow: hidden;
}
.DPcomputer9Box .dataScrView_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;
}
.DPcomputer9Box .dataScrView_rightView_content{
width: 100%;
height: 19vh;
}
.DPcomputer9Box .realAlarmStyle{
width: 100%;
height: 19vh;
overflow-y:auto;
scrollbar-width: none;
}
.DPcomputer9Box .realAlarmStyle::-webkit-scrollbar {
display: none;
}
.DPcomputer9Box .realAlarmStyle>div{
width: 100%;
height: 5vh;
border-bottom: 1px solid #03FEFE;
display: flex;
align-items: center;
}
</style> </style>
\ No newline at end of file
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