Skip to content

卡
卡车调度系统
Commit fcbbe8e9 authored by SQL_Mou's avatar SQL_Mou
Browse files
Options

Merge branch 'master' of http://h.gemho.cn:7099/caicaicai/truckDispatching

parents 41a9b5c0 8f58a429
Hide whitespace changes
Inline Side-by-side
Showing with 2496 additions and 782 deletions
public/config/config.json
View file @ fcbbe8e9
...@@ -20,7 +20,7 @@ ...@@ -20,7 +20,7 @@
}, },
"cameraController": { "cameraController": {
"zoomFactor": 3.0, "zoomFactor": 3.0,
"minimumZoomDistance": 200, "minimumZoomDistance": 100,
"maximumZoomDistance": 50000000, "maximumZoomDistance": 50000000,
"enableRotate": true, "enableRotate": true,
"enableTranslate": true, "enableTranslate": true,
......
src/assets/js/common.js
View file @ fcbbe8e9
...@@ -1171,14 +1171,14 @@ var HttpReq = function(){ ...@@ -1171,14 +1171,14 @@ var HttpReq = function(){
//绩效统计——日报——区域产量报表采区 //绩效统计——日报——区域产量报表采区
caiquAreaQueryDay: function(param){ caiquAreaQueryDay: function(param){
return request({ return request({
url: '/api/Panel', url: 'api/PlanNew/Day',
method: 'get', method: 'get',
params:param, params:param,
}) })
}, },
caiquAreaAddDay: function(data){ caiquAreaAddDay: function(data){
return request({ return request({
url: '/api/Panel', url: 'api/PlanNew/Day',
method: 'POST', method: 'POST',
data:data, data:data,
}).then((res) => { }).then((res) => {
...@@ -1187,14 +1187,14 @@ var HttpReq = function(){ ...@@ -1187,14 +1187,14 @@ var HttpReq = function(){
}, },
caiquAreaUpdateDay: function(data){ caiquAreaUpdateDay: function(data){
return request({ return request({
url: '/api/Panel', url: 'api/PlanNew/Day',
method: 'PUT', method: 'PUT',
data:data, data:data,
}) })
}, },
caiquAreaDelDay: function(data){ caiquAreaDelDay: function(data){
return request({ return request({
url: '/api/Panel', url: 'api/PlanNew/Day',
method: 'Delete', method: 'Delete',
data:data, data:data,
}) })
...@@ -1419,14 +1419,14 @@ var HttpReq = function(){ ...@@ -1419,14 +1419,14 @@ var HttpReq = function(){
//绩效统计——月报——区域产量报表采区 //绩效统计——月报——区域产量报表采区
caiquAreaQueryMonth: function(param){ caiquAreaQueryMonth: function(param){
return request({ return request({
url: '/api/PanelMonth', url: '/api/PlanNew/Month',
method: 'get', method: 'get',
params:param, params:param,
}) })
}, },
caiquAreaAddMonth: function(data){ caiquAreaAddMonth: function(data){
return request({ return request({
url: '/api/PanelMonth', url: '/api/PlanNew/Month',
method: 'POST', method: 'POST',
data:data, data:data,
}).then((res) => { }).then((res) => {
...@@ -1435,14 +1435,14 @@ var HttpReq = function(){ ...@@ -1435,14 +1435,14 @@ var HttpReq = function(){
}, },
caiquAreaUpdateMonth: function(data){ caiquAreaUpdateMonth: function(data){
return request({ return request({
url: '/api/PanelMonth', url: '/api/PlanNew/Month',
method: 'PUT', method: 'PUT',
data:data, data:data,
}) })
}, },
caiquAreaDelMonth: function(data){ caiquAreaDelMonth: function(data){
return request({ return request({
url: '/api/PanelMonth', url: '/api/PlanNew/Month',
method: 'Delete', method: 'Delete',
data:data, data:data,
}) })
...@@ -1667,14 +1667,14 @@ var HttpReq = function(){ ...@@ -1667,14 +1667,14 @@ var HttpReq = function(){
//绩效统计——年报——区域产量报表采区 //绩效统计——年报——区域产量报表采区
caiquAreaQueryYear: function(param){ caiquAreaQueryYear: function(param){
return request({ return request({
url: '/api/PanelYear', url: 'api/PlanNew/Year',
method: 'get', method: 'get',
params:param, params:param,
}) })
}, },
caiquAreaAddYear: function(data){ caiquAreaAddYear: function(data){
return request({ return request({
url: '/api/PanelYear', url: 'api/PlanNew/Year',
method: 'POST', method: 'POST',
data:data, data:data,
}).then((res) => { }).then((res) => {
...@@ -1683,14 +1683,14 @@ var HttpReq = function(){ ...@@ -1683,14 +1683,14 @@ var HttpReq = function(){
}, },
caiquAreaUpdateYear: function(data){ caiquAreaUpdateYear: function(data){
return request({ return request({
url: '/api/PanelYear', url: 'api/PlanNew/Year',
method: 'PUT', method: 'PUT',
data:data, data:data,
}) })
}, },
caiquAreaDelYear: function(data){ caiquAreaDelYear: function(data){
return request({ return request({
url: '/api/PanelYear', url: 'api/PlanNew/Year',
method: 'Delete', method: 'Delete',
data:data, data:data,
}) })
...@@ -1967,6 +1967,76 @@ var HttpReq = function(){ ...@@ -1967,6 +1967,76 @@ var HttpReq = function(){
params:param, params:param,
}) })
}, },
//大屏——数据总览——卡车铲车排行榜
kaChanRankListDayQuery: function(param){
return request({
url: '/api/Manmades/jiedanDay',
method: 'get',
params:param,
})
},
kaChanRankListZhouQuery: function(param){
return request({
url: '/api/Manmades/jiedanZhou',
method: 'get',
params:param,
})
},
kaChanRankListMouQuery: function(param){
return request({
url: '/api/Manmades/jiedanMou',
method: 'get',
params:param,
})
},
//大屏——数据总览——中间下方图表
apiPlanTime1Query: function(param){
return request({
url: '/api/Plan/time',
method: 'get',
params:param,
})
},
//大屏——数据总览——运载数据
apiPlanZDay1Query: function(param){
return request({
url: '/api/Plan/ZDay',
method: 'get',
params:param,
})
},
//大屏——数据总览——装载数据
apiPlanZMonth1Query: function(param){
return request({
url: '/api/Plan/ZMonth',
method: 'get',
params:param,
})
},
//大屏——车辆管理——卡车铲车排行榜day
apiManmadesDay1Query: function(param){
return request({
url: '/api/Manmades/Day',
method: 'get',
params:param,
})
},
//大屏——车辆管理——卡车铲车排行榜week
apiManmadesZhou1Query: function(param){
return request({
url: '/api/Manmades/Zhou',
method: 'get',
params:param,
})
},
//大屏——车辆管理——卡车铲车排行榜month
apiManmadesMou1Query: function(param){
return request({
url: '/api/Manmades/Mou',
method: 'get',
params:param,
})
},
//大屏——智能调度——近期通知列表 //大屏——智能调度——近期通知列表
recentNoticeQuery: function(param){ recentNoticeQuery: function(param){
return request({ return request({
...@@ -2038,6 +2108,14 @@ var HttpReq = function(){ ...@@ -2038,6 +2108,14 @@ var HttpReq = function(){
params:param, params:param,
}) })
}, },
//大屏——车辆信息弹框——车辆实时数据
screenCarInforCarRealQuery2: function(param){
return request({
url: '/api/CarPeop/realtime',
method: 'get',
params:param,
})
},
//大屏——地图的增删改查 //大屏——地图的增删改查
screenMapSetUpQuery: function(param){ screenMapSetUpQuery: function(param){
return request({ return request({
...@@ -2181,6 +2259,14 @@ var HttpReq = function(){ ...@@ -2181,6 +2259,14 @@ var HttpReq = function(){
params:param params:param
}) })
}, },
//大屏数据分析——采区产量统计
getApiHl1: function(param){
return request({
url: '/api/Hl',
method: 'get',
params:param
})
},
......
src/components/mars3d/Map.vue
View file @ fcbbe8e9
...@@ -200,7 +200,8 @@ export default { ...@@ -200,7 +200,8 @@ export default {
//模型配置 //模型配置
const graphic = new mars3d.graphic.ModelPrimitive({ const graphic = new mars3d.graphic.ModelPrimitive({
style: { style: {
url: carclass == '铲车' ? '//data.mars3d.cn/gltf/mars/car/wajueji.glb' : '//data.mars3d.cn/gltf/imap/1d4f63111fc9499dac5cee2286ad7bb3/gltf/gltf2.gltf', //url: carclass == '铲车' ? '//data.mars3d.cn/gltf/mars/car/wajueji.glb' : '//data.mars3d.cn/gltf/imap/1d4f63111fc9499dac5cee2286ad7bb3/gltf/gltf2.gltf',
url: carclass == '铲车' ? '//data.mars3d.cn/gltf/mars/car/wajueji.glb' : '//data.mars3d.cn/gltf/mars/car/tufangche.glb',
scale: 2, scale: 2,
minimumPixelSize: 50, minimumPixelSize: 50,
// 高亮时的样式（默认为鼠标移入，也可以指定type:'click'单击高亮），构造后也可以openHighlight、closeHighlight方法来手动调用 // 高亮时的样式（默认为鼠标移入，也可以指定type:'click'单击高亮），构造后也可以openHighlight、closeHighlight方法来手动调用
......
src/components/mars3d/Map2.vue
View file @ fcbbe8e9
...@@ -236,7 +236,7 @@ export default { ...@@ -236,7 +236,7 @@ export default {
pixelOffset: new Cesium.Cartesian2(10, -25), //偏移量 pixelOffset: new Cesium.Cartesian2(10, -25), //偏移量
}, },
model: { model: {
url: '//data.mars3d.cn/gltf/imap/1d4f63111fc9499dac5cee2286ad7bb3/gltf/gltf2.gltf', url: '//data.mars3d.cn/gltf/mars/car/tufangche.glb',
scale: 1, scale: 1,
minimumPixelSize: 50, minimumPixelSize: 50,
}, },
......
src/views/MLargeScreen/components/carManagement/index.vue
View file @ fcbbe8e9
...@@ -6,7 +6,52 @@ ...@@ -6,7 +6,52 @@
<div> <div>
<div class="carManScrView_leftView_title">车辆运行状况</div> <div class="carManScrView_leftView_title">车辆运行状况</div>
<div class="carManScrView_leftView_content" style="position: relative;"> <div class="carManScrView_leftView_content" style="position: relative;">
<div id="carWorkingStateEcharts"></div> <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> </div>
<!-- 卡车排行榜--> <!-- 卡车排行榜-->
...@@ -23,43 +68,10 @@ ...@@ -23,43 +68,10 @@
<div class="carManScrView_leftView_content_views2"> <div class="carManScrView_leftView_content_views2">
<div :class="truckRankListData.selectFieldText == 'juli' ? '' : 'selectFieldStyle' " @click="truckChangeField('juli')">运输距离</div> <div :class="truckRankListData.selectFieldText == 'juli' ? '' : 'selectFieldStyle' " @click="truckChangeField('juli')">运输距离</div>
<div :class="truckRankListData.selectFieldText == 'time' ? '' : 'selectFieldStyle' " @click="truckChangeField('time')">工作时长</div> <div :class="truckRankListData.selectFieldText == 'time' ? '' : 'selectFieldStyle' " @click="truckChangeField('time')">工作时长</div>
<div :class="truckRankListData.selectFieldText == 'yunzai' ? '' : 'selectFieldStyle' " @click="truckChangeField('yunzai')">运载量</div> <div :class="truckRankListData.selectFieldText == 'zcar' ? '' : 'selectFieldStyle' " @click="truckChangeField('zcar')">运载量</div>
<div :class="truckRankListData.selectFieldText == 'jiedan' ? '' : 'selectFieldStyle' " @click="truckChangeField('jiedan')">接单数</div> <div :class="truckRankListData.selectFieldText == 'waiting' ? '' : 'selectFieldStyle' " @click="truckChangeField('waiting')">接单数</div>
</div>
<div class="carManScrView_leftView_content_views3">
<div v-if="truckRankListData.selectFieldText == 'juli'">
<div v-for="(item,index) in truckRankListData.listData" :key="index">
<div style="color:#1DF9FC;">{{index + 1}}</div>
<div style="color:#BCF0FE;">{{item.car}}</div>
<div style="color:#1AC9FF;">{{item.juli}}KM</div>
<div style="color:#BCF0FE;">{{item.createTime}}</div>
</div>
</div>
<div v-if="truckRankListData.selectFieldText == 'time'">
<div v-for="(item,index) in truckRankListData.listData" :key="index">
<div style="color:#1DF9FC;">{{index + 1}}</div>
<div style="color:#BCF0FE;">{{item.car}}</div>
<div style="color:#1AC9FF;">{{item.time}}H</div>
<div style="color:#BCF0FE;">{{item.createTime}}</div>
</div>
</div>
<div v-if="truckRankListData.selectFieldText == 'yunzai'">
<div v-for="(item,index) in truckRankListData.listData" :key="index">
<div style="color:#1DF9FC;">{{index + 1}}</div>
<div style="color:#BCF0FE;">{{item.car}}</div>
<div style="color:#1AC9FF;">{{item.yunzai}}</div>
<div style="color:#BCF0FE;">{{item.createTime}}</div>
</div>
</div>
<div v-if="truckRankListData.selectFieldText == 'jiedan'">
<div v-for="(item,index) in truckRankListData.listData" :key="index">
<div style="color:#1DF9FC;">{{index + 1}}</div>
<div style="color:#BCF0FE;">{{item.car}}</div>
<div style="color:#1AC9FF;">{{item.jiedan}}</div>
<div style="color:#BCF0FE;">{{item.createTime}}</div>
</div>
</div>
</div> </div>
<div class="carManScrView_leftView_content_views3" id="carManScrView_leftView_content_views3_1"></div>
</div> </div>
</div> </div>
<!-- 铲车排行榜--> <!-- 铲车排行榜-->
...@@ -75,33 +87,36 @@ ...@@ -75,33 +87,36 @@
<div class="carManScrView_leftView_content"> <div class="carManScrView_leftView_content">
<div class="carManScrView_leftView_content_views2"> <div class="carManScrView_leftView_content_views2">
<div :class="forkLiftRankListData.selectFieldText == 'time' ? '' : 'selectFieldStyle' " @click="forkLiftChangeField('time')">工作时长</div> <div :class="forkLiftRankListData.selectFieldText == 'time' ? '' : 'selectFieldStyle' " @click="forkLiftChangeField('time')">工作时长</div>
<div :class="forkLiftRankListData.selectFieldText == 'yunzai' ? '' : 'selectFieldStyle' " @click="forkLiftChangeField('yunzai')">装车量</div> <div :class="forkLiftRankListData.selectFieldText == 'average' ? '' : 'selectFieldStyle' " @click="forkLiftChangeField('average')">平均时长</div>
<div :class="forkLiftRankListData.selectFieldText == 'jiedan' ? '' : 'selectFieldStyle' " @click="forkLiftChangeField('jiedan')">装车数</div> <div :class="forkLiftRankListData.selectFieldText == 'zcar' ? '' : 'selectFieldStyle' " @click="forkLiftChangeField('zcar')">装车量</div>
<div :class="forkLiftRankListData.selectFieldText == 'waiting' ? '' : 'selectFieldStyle' " @click="forkLiftChangeField('waiting')">装车数</div>
</div> </div>
<div class="carManScrView_leftView_content_views3"> <div class="carManScrView_leftView_content_views3" v-if="forkLiftRankListData.selectFieldText == 'time'">
<div v-if="forkLiftRankListData.selectFieldText == 'time'"> <div v-for="(item,index) in forkLiftRankListData.listData" :key="index" :class="'forkliftRankTwo' + (index + 1)">
<div v-for="(item,index) in forkLiftRankListData.listData" :key="index"> <div style="color:#BCF0FE;">{{item.number}}</div>
<div style="color:#1DF9FC;">{{index + 1}}</div> <div style="color:#1AC9FF;">{{item.time}}H</div>
<div style="color:#BCF0FE;">{{item.car}}</div> <div style="color:#BCF0FE;">{{item.createTime}}</div>
<div style="color:#1AC9FF;">{{item.time}}H</div>
<div style="color:#BCF0FE;">{{item.createTime}}</div>
</div>
</div> </div>
<div v-if="forkLiftRankListData.selectFieldText == 'yunzai'"> </div>
<div v-for="(item,index) in forkLiftRankListData.listData" :key="index"> <div class="carManScrView_leftView_content_views3" v-if="forkLiftRankListData.selectFieldText == 'average'">
<div style="color:#1DF9FC;">{{index + 1}}</div> <div v-for="(item,index) in forkLiftRankListData.listData" :key="index" :class="'forkliftRankTwo' + (index + 1)">
<div style="color:#BCF0FE;">{{item.car}}</div> <div style="color:#BCF0FE;">{{item.number}}</div>
<div style="color:#1AC9FF;">{{item.yunzai}}</div> <div style="color:#1AC9FF;">{{item.average}}H</div>
<div style="color:#BCF0FE;">{{item.createTime}}</div> <div style="color:#BCF0FE;">{{item.createTime}}</div>
</div>
</div> </div>
<div v-if="forkLiftRankListData.selectFieldText == 'jiedan'"> </div>
<div v-for="(item,index) in forkLiftRankListData.listData" :key="index"> <div class="carManScrView_leftView_content_views3" v-if="forkLiftRankListData.selectFieldText == 'zcar'">
<div style="color:#1DF9FC;">{{index + 1}}</div> <div v-for="(item,index) in forkLiftRankListData.listData" :key="index" :class="'forkliftRankTwo' + (index + 1)">
<div style="color:#BCF0FE;">{{item.car}}</div> <div style="color:#BCF0FE;">{{item.number}}</div>
<div style="color:#1AC9FF;">{{item.jiedan}}</div> <div style="color:#1AC9FF;">{{item.zcar}}吨</div>
<div style="color:#BCF0FE;">{{item.createTime}}</div> <div style="color:#BCF0FE;">{{item.createTime}}</div>
</div> </div>
</div>
<div class="carManScrView_leftView_content_views3" v-if="forkLiftRankListData.selectFieldText == 'waiting'">
<div v-for="(item,index) in forkLiftRankListData.listData" :key="index" :class="'forkliftRankTwo' + (index + 1)">
<div style="color:#BCF0FE;">{{item.number}}</div>
<div style="color:#1AC9FF;">{{item.waiting}}辆</div>
<div style="color:#BCF0FE;">{{item.createTime}}</div>
</div> </div>
</div> </div>
</div> </div>
...@@ -115,47 +130,46 @@ ...@@ -115,47 +130,46 @@
<div class="carManScrView_rightView_content"> <div class="carManScrView_rightView_content">
<div class="carDynamicTitleStyle"> <div class="carDynamicTitleStyle">
<img src="../../../../assets/images/cutGraph/huoche11.png" height="28"> <img src="../../../../assets/images/cutGraph/huoche11.png" height="28">
<div>{{truckDynamicListData.number}}</div> <div>{{truckDynamicListData.number ? truckDynamicListData.number : '无'}}</div>
</div> </div>
<div class="truckDynamicContent1"> <div class="truckDynamicContent1">
<div class="truckDynamicRateStyle"> <div class="truckDynamicRateStyle">
<div style="color:white;font-size:20px;">{{truckDynamicListData.rate}}%</div> <div style="color:white;font-size:19px;">{{truckDynamicListData.rate ? truckDynamicListData.rate : 0}}%</div>
<div style="color:white;font-size:15px;">完成度</div> <div style="color:white;font-size:15px;">完成度</div>
</div> </div>
<el-progress type="circle" :percentage="parseInt(truckDynamicListData.rate)" :stroke-width="7" :width="90" :height="90" :show-text='false'></el-progress> <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 style="text-align: center;"> <div style="text-align: center;">
<div style="font-size:14px;color:white;">今日运载量</div> <div style="font-size:14px;color:white;">今日运载量</div>
<div style="font-size:20px;color:#05F7FC;">{{truckDynamicListData.carry}}<span style="font-size:14px;">T</span></div> <div style="font-size:20px;color:#05F7FC;">{{truckDynamicListData.carry ? truckDynamicListData.carry : 0}}<span style="font-size:14px;">t</span></div>
<div style="font-size:14px;color:white;">今日工时</div> <div style="font-size:14px;color:white;">今日工时</div>
<div style="font-size:20px;color:#05F7FC;">{{truckDynamicListData.workTime}}<span style="font-size:14px;">H</span></div> <div style="font-size:20px;color:#05F7FC;">{{truckDynamicListData.workTime ? truckDynamicListData.workTime : 0}}<span style="font-size:14px;">h</span></div>
</div> </div>
<div style="text-align: center;"> <div style="text-align: center;">
<div style="font-size:14px;color:white;">今日完成度</div> <div style="font-size:14px;color:white;">今日完成度</div>
<div style="font-size:20px;color:#05F7FC;">{{truckDynamicListData.rate}}<span style="font-size:14px;">%</span></div> <div style="font-size:20px;color:#05F7FC;">{{truckDynamicListData.rate ? truckDynamicListData.rate : 0}}<span style="font-size:14px;">%</span></div>
<div style="font-size:14px;color:white;">今日里程</div> <div style="font-size:14px;color:white;">今日里程</div>
<div style="font-size:20px;color:#05F7FC;">{{truckDynamicListData.mileage}}<span style="font-size:14px;">KM</span></div> <div style="font-size:20px;color:#05F7FC;">{{truckDynamicListData.mileage ? truckDynamicListData.mileage : 0}}<span style="font-size:14px;">km</span></div>
</div> </div>
</div> </div>
<div class="carDynamicContent1"> <div class="carDynamicContent1">
<div> <div>
<img src="../../../../assets/images/cutGraph/mokuaikaobei4.png"> <img src="../../../../assets/images/cutGraph/mokuaikaobei4.png">
<div>开始工作时间</div> <div>开始工作时间</div>
<div>{{truckDynamicListData.startTime}}</div> <div>{{truckDynamicListData.startTime ? truckDynamicListData.startTime : '无'}}</div>
</div> </div>
<div> <div>
<img src="../../../../assets/images/cutGraph/mokuaikaobei4.png"> <img src="../../../../assets/images/cutGraph/mokuaikaobei4.png">
<div>结束工作时间</div> <div>结束工作时间</div>
<div>{{truckDynamicListData.endTime}}</div> <div>{{truckDynamicListData.endTime ? truckDynamicListData.endTime : '无'}}</div>
</div> </div>
</div> </div>
<div class="carDynamicContent2"> <div class="carDynamicContent2">
<img src="../../../../assets/images/cutGraph/tuiyuan1.png"> <img src="../../../../assets/images/cutGraph/tuiyuan1.png">
<span class="el-icon-sort"></span>
<div> <div>
<div style="color:white;">{{truckDynamicListData.loadArea}}</div> <div style="color:white;text-align: center;">{{truckDynamicListData.loadArea ? truckDynamicListData.loadArea : '无'}}</div>
<div style="color:white;">{{truckDynamicListData.unloadArea}}</div> <img src="../../../../assets/images/cutGraph/zu2603.png">
<div style="color:white;text-align: center;">{{truckDynamicListData.unloadArea ? truckDynamicListData.unloadArea : '无'}}</div>
</div> </div>
<span class="el-icon-sort"></span>
<img src="../../../../assets/images/cutGraph/tuiyuan2.png"> <img src="../../../../assets/images/cutGraph/tuiyuan2.png">
</div> </div>
</div> </div>
...@@ -166,42 +180,41 @@ ...@@ -166,42 +180,41 @@
<div class="carManScrView_rightView_content"> <div class="carManScrView_rightView_content">
<div class="carDynamicTitleStyle"> <div class="carDynamicTitleStyle">
<img src="../../../../assets/images/cutGraph/huoche11.png" height="28"> <img src="../../../../assets/images/cutGraph/huoche11.png" height="28">
<div>{{forkliftkDynamicListData.number}}</div> <div>{{forkliftkDynamicListData.number ? forkliftkDynamicListData.number : '无'}}</div>
</div> </div>
<div class="ForkliftDynamicContent1"> <div class="ForkliftDynamicContent1">
<div> <div>
<div>今日完成量</div> <div>今日完成量</div>
<div class="ForkliftDynamicContent1_son1">{{forkliftkDynamicListData.rate}}%</div> <div class="ForkliftDynamicContent1_son1">{{forkliftkDynamicListData.rate ? forkliftkDynamicListData.rate : 0}}%</div>
</div> </div>
<div> <div>
<div>今日工时/H</div> <div>今日工时/H</div>
<div class="ForkliftDynamicContent1_son1">{{forkliftkDynamicListData.workTime}}</div> <div class="ForkliftDynamicContent1_son1">{{forkliftkDynamicListData.workTime ? forkliftkDynamicListData.workTime : 0}}</div>
</div> </div>
<div> <div>
<div>今日里程/Km</div> <div>今日里程/Km</div>
<div class="ForkliftDynamicContent1_son1">{{forkliftkDynamicListData.mileage}}</div> <div class="ForkliftDynamicContent1_son1">{{forkliftkDynamicListData.mileage ? forkliftkDynamicListData.mileage : 0}}</div>
</div> </div>
</div> </div>
<div class="carDynamicContent1"> <div class="carDynamicContent1">
<div> <div>
<img src="../../../../assets/images/cutGraph/mokuaikaobei4.png"> <img src="../../../../assets/images/cutGraph/mokuaikaobei4.png">
<div>开始工作时间</div> <div>开始工作时间</div>
<div>{{forkliftkDynamicListData.startTime}}</div> <div>{{forkliftkDynamicListData.startTime ? forkliftkDynamicListData.startTime : '无'}}</div>
</div> </div>
<div> <div>
<img src="../../../../assets/images/cutGraph/mokuaikaobei4.png"> <img src="../../../../assets/images/cutGraph/mokuaikaobei4.png">
<div>结束工作时间</div> <div>结束工作时间</div>
<div>{{forkliftkDynamicListData.endTime}}</div> <div>{{forkliftkDynamicListData.endTime ? forkliftkDynamicListData.endTime : '无'}}</div>
</div> </div>
</div> </div>
<div class="carDynamicContent2"> <div class="carDynamicContent2">
<img src="../../../../assets/images/cutGraph/tuiyuan1.png"> <img src="../../../../assets/images/cutGraph/tuiyuan1.png">
<span class="el-icon-sort"></span>
<div> <div>
<div style="color:white;">{{forkliftkDynamicListData.loadArea}}</div> <div style="color:white;text-align: center;">{{forkliftkDynamicListData.loadArea ? forkliftkDynamicListData.loadArea : '无'}}</div>
<div style="color:white;">{{forkliftkDynamicListData.unloadArea}}</div> <img src="../../../../assets/images/cutGraph/zu2603.png">
<div style="color:white;text-align: center;">{{forkliftkDynamicListData.unloadArea ? forkliftkDynamicListData.unloadArea : '无'}}</div>
</div> </div>
<span class="el-icon-sort"></span>
<img src="../../../../assets/images/cutGraph/tuiyuan2.png"> <img src="../../../../assets/images/cutGraph/tuiyuan2.png">
</div> </div>
</div> </div>
...@@ -212,42 +225,41 @@ ...@@ -212,42 +225,41 @@
<div class="carManScrView_rightView_content"> <div class="carManScrView_rightView_content">
<div class="carDynamicTitleStyle"> <div class="carDynamicTitleStyle">
<img src="../../../../assets/images/cutGraph/huoche11.png" height="28"> <img src="../../../../assets/images/cutGraph/huoche11.png" height="28">
<div>{{otherCarDynamicListData.number}}</div> <div>{{otherCarDynamicListData.number ? otherCarDynamicListData.number : '无'}}</div>
</div> </div>
<div class="otherCarDynamicContent1"> <div class="otherCarDynamicContent1">
<div> <div>
<div>今日完成量</div> <div>今日完成量</div>
<div class="otherCarDynamicContent1_son1">{{otherCarDynamicListData.rate}}%</div> <div class="otherCarDynamicContent1_son1">{{otherCarDynamicListData.rate ? otherCarDynamicListData.rate : 0}}%</div>
</div> </div>
<div> <div>
<div>今日工时/H</div> <div>今日工时/H</div>
<div class="otherCarDynamicContent1_son1">{{otherCarDynamicListData.workTime}}</div> <div class="otherCarDynamicContent1_son1">{{otherCarDynamicListData.workTime ? otherCarDynamicListData.workTime : 0}}</div>
</div> </div>
<div> <div>
<div>今日里程/Km</div> <div>今日里程/Km</div>
<div class="otherCarDynamicContent1_son1">{{otherCarDynamicListData.mileage}}</div> <div class="otherCarDynamicContent1_son1">{{otherCarDynamicListData.mileage ? otherCarDynamicListData.mileage : 0}}</div>
</div> </div>
</div> </div>
<div class="carDynamicContent1"> <div class="carDynamicContent1">
<div> <div>
<img src="../../../../assets/images/cutGraph/mokuaikaobei4.png"> <img src="../../../../assets/images/cutGraph/mokuaikaobei4.png">
<div>开始工作时间</div> <div>开始工作时间</div>
<div>{{otherCarDynamicListData.startTime}}</div> <div>{{otherCarDynamicListData.startTime ? otherCarDynamicListData.startTime : '无'}}</div>
</div> </div>
<div> <div>
<img src="../../../../assets/images/cutGraph/mokuaikaobei4.png"> <img src="../../../../assets/images/cutGraph/mokuaikaobei4.png">
<div>结束工作时间</div> <div>结束工作时间</div>
<div>{{otherCarDynamicListData.endTime}}</div> <div>{{otherCarDynamicListData.endTime ? otherCarDynamicListData.endTime : '无'}}</div>
</div> </div>
</div> </div>
<div class="carDynamicContent2"> <div class="carDynamicContent2">
<img src="../../../../assets/images/cutGraph/tuiyuan1.png"> <img src="../../../../assets/images/cutGraph/tuiyuan1.png">
<span class="el-icon-sort"></span>
<div> <div>
<div style="color:white;">{{otherCarDynamicListData.loadArea}}</div> <div style="color:white;text-align: center;">{{otherCarDynamicListData.loadArea ? otherCarDynamicListData.loadArea : '无'}}</div>
<div style="color:white;">{{otherCarDynamicListData.unloadArea}}</div> <img src="../../../../assets/images/cutGraph/zu2603.png">
<div style="color:white;text-align: center;">{{otherCarDynamicListData.unloadArea ? otherCarDynamicListData.unloadArea : '无'}}</div>
</div> </div>
<span class="el-icon-sort"></span>
<img src="../../../../assets/images/cutGraph/tuiyuan2.png"> <img src="../../../../assets/images/cutGraph/tuiyuan2.png">
</div> </div>
</div> </div>
...@@ -260,6 +272,8 @@ ...@@ -260,6 +272,8 @@
<script> <script>
import { Tools, HttpReq, Dates} from '@/assets/js/common.js'; import { Tools, HttpReq, Dates} from '@/assets/js/common.js';
import * as echarts from 'echarts'; import * as echarts from 'echarts';
import "echarts-gl";
import { getPie3D } from "../../../components/echarts/bingtu3d";
export default { export default {
data() { data() {
...@@ -274,16 +288,41 @@ export default { ...@@ -274,16 +288,41 @@ export default {
}, },
//车辆运行状况 //车辆运行状况
carWorkingStateData:{ carWorkingStateData:{
online:[], kacheonline:0,
offline:[], 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",
},
}
],
}, },
//卡车排行榜 //卡车排行榜
truckRankListData:{ truckRankListData:{
echartsX:'Km',
carclass:'卡车', carclass:'卡车',
selectTimeText:'day', selectTimeText:'day',
selectFieldText:'juli', selectFieldText:'juli',
listData:[], driverName:[],
selectTimeDate:'', driverSeriesData:[],
driverName1:['kfdfdf','dsdsd1','dsdsd55'],
driverSeriesData1:[20,50,10],
}, },
//铲车排行榜 //铲车排行榜
forkLiftRankListData:{ forkLiftRankListData:{
...@@ -291,7 +330,6 @@ export default { ...@@ -291,7 +330,6 @@ export default {
selectTimeText:'day', selectTimeText:'day',
selectFieldText:'time', selectFieldText:'time',
listData:[], listData:[],
selectTimeDate:'',
}, },
//卡车动态 //卡车动态
truckDynamicListData:{ truckDynamicListData:{
...@@ -355,8 +393,6 @@ export default { ...@@ -355,8 +393,6 @@ export default {
let qitache1 = []; let qitache1 = [];
let qitachezaixian = []; let qitachezaixian = [];
let qitachelixian = []; let qitachelixian = [];
let zaixianAllNum = [];
let lixianAllNum = [];
if(res.code == 200){ if(res.code == 200){
res.data.content.forEach((item)=>{ res.data.content.forEach((item)=>{
if(item.carclass == '卡车'){ if(item.carclass == '卡车'){
...@@ -367,6 +403,8 @@ export default { ...@@ -367,6 +403,8 @@ export default {
qitache1.push(item); qitache1.push(item);
} }
}) })
this.carWorkingStateData.optionData[0].value = kache1.length;
this.carWorkingStateData.optionData[1].value = dianchan1.length;
kache1.forEach((item)=>{ kache1.forEach((item)=>{
if(item.status == 1){ if(item.status == 1){
kachezaixian.push(item); kachezaixian.push(item);
...@@ -388,47 +426,83 @@ export default { ...@@ -388,47 +426,83 @@ export default {
qitachelixian.push(item); qitachelixian.push(item);
} }
}) })
zaixianAllNum.push(kachezaixian.length); this.carWorkingStateData.kacheonline = kachezaixian.length;
zaixianAllNum.push(dianchanzaixian.length); this.carWorkingStateData.chancheonline = dianchanzaixian.length;
zaixianAllNum.push(qitachezaixian.length); this.carWorkingStateData.qitacheonline = qitachezaixian.length;
lixianAllNum.push(kachelixian.length); this.carWorkingStateData.kacheoffline = kachelixian.length;
lixianAllNum.push(dianchanlixian.length); this.carWorkingStateData.chancheoffline = dianchanlixian.length;
lixianAllNum.push(qitachelixian.length); this.carWorkingStateData.qitacheoffline = qitachelixian.length;
this.carWorkingStateData.online = zaixianAllNum; this.draw3d();
this.carWorkingStateData.offline = lixianAllNum; this.$nextTick(() => {
//绘制车辆运行状况图表 let parent = document.getElementById("chart-panel"); // 获取父元素
this.$nextTick(()=>{ let canvas = parent.getElementsByTagName("canvas"); // 获取父元素下面的所有canvas元素
this.carWorkingStateEcharts(); canvas[1].style.transform = "rotateX(30deg)";
}) });
} }
}) })
//获取卡车排行榜 //获取卡车排行榜
this.truckRankListData.selectTimeDate = this.currentTime.day;
let truckQuery1 = {}; let truckQuery1 = {};
truckQuery1.size = 10; truckQuery1.size = 7;
truckQuery1.sort = this.truckRankListData.selectFieldText + ',desc'; truckQuery1.sort = this.truckRankListData.selectFieldText + ',desc';
truckQuery1.carclass = this.truckRankListData.carclass; truckQuery1.carclass = this.truckRankListData.carclass;
truckQuery1.createTime = this.truckRankListData.selectTimeDate;
this.$nextTick(()=>{ this.$nextTick(()=>{
HttpReq.truckDispatching.carInformationQuery(truckQuery1).then((res) => { if(this.truckRankListData.selectTimeText == 'day'){
if(res.code == 200){ HttpReq.truckDispatching.apiManmadesDay1Query(truckQuery1).then((res) => {
this.truckRankListData.listData = res.data.content; let arr1 = [];
} let arr2 = [];
}) res.forEach((item,index)=>{
arr1.push(item.number);
arr2.push(item[this.truckRankListData.selectFieldText]);
})
this.truckRankListData.driverName = arr1.reverse();
this.truckRankListData.driverSeriesData = arr2.reverse();
this.truckChangeEcharts();
})
}else if(this.truckRankListData.selectTimeText == 'week'){
HttpReq.truckDispatching.apiManmadesZhou1Query(truckQuery1).then((res) => {
let arr1 = [];
let arr2 = [];
res.forEach((item,index)=>{
arr1.push(item.number);
arr2.push(item[this.truckRankListData.selectFieldText]);
})
this.truckRankListData.driverName = arr1.reverse();
this.truckRankListData.driverSeriesData = arr2.reverse();
this.truckChangeEcharts();
})
}else if(this.truckRankListData.selectTimeText == 'month'){
HttpReq.truckDispatching.apiManmadesMou1Query(truckQuery1).then((res) => {
let arr1 = [];
let arr2 = [];
res.forEach((item,index)=>{
arr1.push(item.number);
arr2.push(item[this.truckRankListData.selectFieldText]);
})
this.truckRankListData.driverName = arr1.reverse();
this.truckRankListData.driverSeriesData = arr2.reverse();
this.truckChangeEcharts();
})
}
}) })
//获取铲车排行榜 //获取铲车排行榜
this.forkLiftRankListData.selectTimeDate = this.currentTime.day;
let forkLiftQuery1 = {}; let forkLiftQuery1 = {};
forkLiftQuery1.size = 10; forkLiftQuery1.size = 5;
forkLiftQuery1.sort = this.forkLiftRankListData.selectFieldText + ',desc'; forkLiftQuery1.sort = this.forkLiftRankListData.selectFieldText + ',desc';
forkLiftQuery1.carclass = this.forkLiftRankListData.carclass; forkLiftQuery1.carclass = this.forkLiftRankListData.carclass;
forkLiftQuery1.createTime = this.forkLiftRankListData.selectTimeDate;
this.$nextTick(()=>{ this.$nextTick(()=>{
HttpReq.truckDispatching.carInformationQuery(forkLiftQuery1).then((res) => { if(this.forkLiftRankListData.selectTimeText == 'day'){
if(res.code == 200){ HttpReq.truckDispatching.apiManmadesDay1Query(forkLiftQuery1).then((res) => {
this.forkLiftRankListData.listData = res.data.content; this.forkLiftRankListData.listData = res;
} })
}) }else if(this.forkLiftRankListData.selectTimeText == 'week'){
HttpReq.truckDispatching.apiManmadesZhou1Query(forkLiftQuery1).then((res) => {
this.forkLiftRankListData.listData = res;
})
}else if(this.forkLiftRankListData.selectTimeText == 'month'){
HttpReq.truckDispatching.apiManmadesMou1Query(forkLiftQuery1).then((res) => {
this.forkLiftRankListData.listData = res;
})
}
}) })
//获取车辆信息 //获取车辆信息
HttpReq.truckDispatching.carInformationQuery({size:9999}).then((res) => { HttpReq.truckDispatching.carInformationQuery({size:9999}).then((res) => {
...@@ -470,8 +544,6 @@ export default { ...@@ -470,8 +544,6 @@ export default {
let qitache1 = []; let qitache1 = [];
let qitachezaixian = []; let qitachezaixian = [];
let qitachelixian = []; let qitachelixian = [];
let zaixianAllNum = [];
let lixianAllNum = [];
if(res.code == 200){ if(res.code == 200){
res.data.content.forEach((item)=>{ res.data.content.forEach((item)=>{
if(item.carclass == '卡车'){ if(item.carclass == '卡车'){
...@@ -482,6 +554,8 @@ export default { ...@@ -482,6 +554,8 @@ export default {
qitache1.push(item); qitache1.push(item);
} }
}) })
this.carWorkingStateData.optionData[0].value = kache1.length;
this.carWorkingStateData.optionData[1].value = dianchan1.length;
kache1.forEach((item)=>{ kache1.forEach((item)=>{
if(item.status == 1){ if(item.status == 1){
kachezaixian.push(item); kachezaixian.push(item);
...@@ -503,48 +577,85 @@ export default { ...@@ -503,48 +577,85 @@ export default {
qitachelixian.push(item); qitachelixian.push(item);
} }
}) })
zaixianAllNum.push(kachezaixian.length); this.carWorkingStateData.kacheonline = kachezaixian.length;
zaixianAllNum.push(dianchanzaixian.length); this.carWorkingStateData.chancheonline = dianchanzaixian.length;
zaixianAllNum.push(qitachezaixian.length); this.carWorkingStateData.qitacheonline = qitachezaixian.length;
lixianAllNum.push(kachelixian.length); this.carWorkingStateData.kacheoffline = kachelixian.length;
lixianAllNum.push(dianchanlixian.length); this.carWorkingStateData.chancheoffline = dianchanlixian.length;
lixianAllNum.push(qitachelixian.length); this.carWorkingStateData.qitacheoffline = qitachelixian.length;
this.carWorkingStateData.online = zaixianAllNum; this.draw3d();
this.carWorkingStateData.offline = lixianAllNum; this.$nextTick(() => {
//绘制车辆运行状况图表 let parent = document.getElementById("chart-panel"); // 获取父元素
this.$nextTick(()=>{ let canvas = parent.getElementsByTagName("canvas"); // 获取父元素下面的所有canvas元素
this.carWorkingStateEcharts(); canvas[1].style.transform = "rotateX(30deg)";
}) });
} }
}) })
//获取卡车排行榜 //获取卡车排行榜
this.truckRankListData.selectTimeDate = this.currentTime.day;
let truckQuery1 = {}; let truckQuery1 = {};
truckQuery1.size = 10; truckQuery1.size = 7;
truckQuery1.sort = this.truckRankListData.selectFieldText + ',desc'; truckQuery1.sort = this.truckRankListData.selectFieldText + ',desc';
truckQuery1.carclass = this.truckRankListData.carclass; truckQuery1.carclass = this.truckRankListData.carclass;
truckQuery1.createTime = this.truckRankListData.selectTimeDate;
this.$nextTick(()=>{ this.$nextTick(()=>{
HttpReq.truckDispatching.carInformationQuery(truckQuery1).then((res) => { if(this.truckRankListData.selectTimeText == 'day'){
if(res.code == 200){ HttpReq.truckDispatching.apiManmadesDay1Query(truckQuery1).then((res) => {
this.truckRankListData.listData = res.data.content; let arr1 = [];
} let arr2 = [];
}) res.forEach((item,index)=>{
arr1.push(item.number);
arr2.push(item[this.truckRankListData.selectFieldText]);
})
this.truckRankListData.driverName = arr1.reverse();
this.truckRankListData.driverSeriesData = arr2.reverse();
this.truckChangeEcharts();
})
}else if(this.truckRankListData.selectTimeText == 'week'){
HttpReq.truckDispatching.apiManmadesZhou1Query(truckQuery1).then((res) => {
let arr1 = [];
let arr2 = [];
res.forEach((item,index)=>{
arr1.push(item.number);
arr2.push(item[this.truckRankListData.selectFieldText]);
})
this.truckRankListData.driverName = arr1.reverse();
this.truckRankListData.driverSeriesData = arr2.reverse();
this.truckChangeEcharts();
})
}else if(this.truckRankListData.selectTimeText == 'month'){
HttpReq.truckDispatching.apiManmadesMou1Query(truckQuery1).then((res) => {
let arr1 = [];
let arr2 = [];
res.forEach((item,index)=>{
arr1.push(item.number);
arr2.push(item[this.truckRankListData.selectFieldText]);
})
this.truckRankListData.driverName = arr1.reverse();
this.truckRankListData.driverSeriesData = arr2.reverse();
this.truckChangeEcharts();
})
}
}) })
//获取铲车排行榜 //获取铲车排行榜
this.forkLiftRankListData.selectTimeDate = this.currentTime.day;
let forkLiftQuery1 = {}; let forkLiftQuery1 = {};
forkLiftQuery1.size = 10; forkLiftQuery1.size = 5;
forkLiftQuery1.sort = this.forkLiftRankListData.selectFieldText + ',desc'; forkLiftQuery1.sort = this.forkLiftRankListData.selectFieldText + ',desc';
forkLiftQuery1.carclass = this.forkLiftRankListData.carclass; forkLiftQuery1.carclass = this.forkLiftRankListData.carclass;
forkLiftQuery1.createTime = this.forkLiftRankListData.selectTimeDate;
this.$nextTick(()=>{ this.$nextTick(()=>{
HttpReq.truckDispatching.carInformationQuery(forkLiftQuery1).then((res) => { if(this.forkLiftRankListData.selectTimeText == 'day'){
if(res.code == 200){ HttpReq.truckDispatching.apiManmadesDay1Query(forkLiftQuery1).then((res) => {
this.forkLiftRankListData.listData = res.data.content; this.forkLiftRankListData.listData = res;
} })
}) }else if(this.forkLiftRankListData.selectTimeText == 'week'){
HttpReq.truckDispatching.apiManmadesZhou1Query(forkLiftQuery1).then((res) => {
this.forkLiftRankListData.listData = res;
})
}else if(this.forkLiftRankListData.selectTimeText == 'month'){
HttpReq.truckDispatching.apiManmadesMou1Query(forkLiftQuery1).then((res) => {
this.forkLiftRankListData.listData = res;
})
}
}) })
}, 20000) }, 20000)
}) })
}) })
...@@ -557,10 +668,202 @@ export default { ...@@ -557,10 +668,202 @@ export default {
}, },
//车辆运行状况 //车辆运行状况
carWorkingStateEcharts(){ draw3d() {
let that = this; // 基于准备好的dom，初始化echarts实例
echarts.init(document.getElementById('carWorkingStateEcharts')).dispose(); echarts.init(document.getElementById('chart-panel')).dispose();
var myChart = echarts.init(document.getElementById('carWorkingStateEcharts')); 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: 10, //起始角度，支持范围[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);
},
//卡车切换时间
truckChangeTime(text){
this.truckRankListData.selectTimeText = text;
let truckQuery1 = {};
truckQuery1.size = 7;
truckQuery1.sort = this.truckRankListData.selectFieldText + ',desc';
truckQuery1.carclass = this.truckRankListData.carclass;
if(text == 'day'){
HttpReq.truckDispatching.apiManmadesDay1Query(truckQuery1).then((res) => {
let arr1 = [];
let arr2 = [];
res.forEach((item,index)=>{
arr1.push(item.number);
arr2.push(item[this.truckRankListData.selectFieldText]);
})
this.truckRankListData.driverName = arr1.reverse();
this.truckRankListData.driverSeriesData = arr2.reverse();
this.truckChangeEcharts();
})
}else if(text == 'week'){
HttpReq.truckDispatching.apiManmadesZhou1Query(truckQuery1).then((res) => {
let arr1 = [];
let arr2 = [];
res.forEach((item,index)=>{
arr1.push(item.number);
arr2.push(item[this.truckRankListData.selectFieldText]);
})
this.truckRankListData.driverName = arr1.reverse();
this.truckRankListData.driverSeriesData = arr2.reverse();
this.truckChangeEcharts();
})
}else if(text == 'month'){
HttpReq.truckDispatching.apiManmadesMou1Query(truckQuery1).then((res) => {
let arr1 = [];
let arr2 = [];
res.forEach((item,index)=>{
arr1.push(item.number);
arr2.push(item[this.truckRankListData.selectFieldText]);
})
this.truckRankListData.driverName = arr1.reverse();
this.truckRankListData.driverSeriesData = arr2.reverse();
this.truckChangeEcharts();
})
}
},
//卡车切换字段排序
truckChangeField(text){
this.truckRankListData.selectFieldText = text;
let truckQuery1 = {};
truckQuery1.size = 7;
truckQuery1.sort = this.truckRankListData.selectFieldText + ',desc';
truckQuery1.carclass = this.truckRankListData.carclass;
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'){
HttpReq.truckDispatching.apiManmadesDay1Query(truckQuery1).then((res) => {
let arr1 = [];
let arr2 = [];
res.forEach((item,index)=>{
arr1.push(item.number);
arr2.push(item[this.truckRankListData.selectFieldText]);
})
this.truckRankListData.driverName = arr1.reverse();
this.truckRankListData.driverSeriesData = arr2.reverse();
this.truckChangeEcharts();
})
}else if(this.truckRankListData.selectTimeText == 'week'){
HttpReq.truckDispatching.apiManmadesZhou1Query(truckQuery1).then((res) => {
let arr1 = [];
let arr2 = [];
res.forEach((item,index)=>{
arr1.push(item.number);
arr2.push(item[this.truckRankListData.selectFieldText]);
})
this.truckRankListData.driverName = arr1.reverse();
this.truckRankListData.driverSeriesData = arr2.reverse();
this.truckChangeEcharts();
})
}else if(this.truckRankListData.selectTimeText == 'month'){
HttpReq.truckDispatching.apiManmadesMou1Query(truckQuery1).then((res) => {
let arr1 = [];
let arr2 = [];
res.forEach((item,index)=>{
arr1.push(item.number);
arr2.push(item[this.truckRankListData.selectFieldText]);
})
this.truckRankListData.driverName = arr1.reverse();
this.truckRankListData.driverSeriesData = arr2.reverse();
this.truckChangeEcharts();
})
}
})
},
//卡车排行榜Echarts
truckChangeEcharts(){
echarts.init(document.getElementById('carManScrView_leftView_content_views3_1')).dispose();
var myChart = echarts.init(document.getElementById('carManScrView_leftView_content_views3_1'));
var option = { var option = {
tooltip: { tooltip: {
trigger: 'axis', trigger: 'axis',
...@@ -568,130 +871,108 @@ export default { ...@@ -568,130 +871,108 @@ export default {
type: 'shadow' type: 'shadow'
} }
}, },
legend: {
textStyle:{
color: 'white',
fontSize:16,
}
},
grid: { grid: {
left: '3%', top:'18%',
right: '4%', left: '1%',
bottom: '3%', bottom: '0%',
containLabel: true containLabel: true
}, },
xAxis: { xAxis: {
type: 'category', name:this.truckRankListData.echartsX,
data: ['卡车状态', '铲车状态', '其他车辆'], type: 'value',
boundaryGap: [0, 0.01],
axisLabel: { axisLabel: {
show: true, show: true,
textStyle: { textStyle: {
color: 'white', color: '#BFF7FF'
fontSize:16,
} }
}, },
axisLine: { axisLine: {
lineStyle: { lineStyle: {
color: 'white', color: '#BFF7FF',
width: 1 width: 1
} }
}, }
}, },
yAxis: { yAxis: {
type: 'value', name:'车牌号',
type: 'category',
data: this.truckRankListData.driverName,
axisLabel: { axisLabel: {
show: true, show: true,
textStyle: { textStyle: {
color: 'white', color: '#BFF7FF'
fontSize:16,
} }
}, },
axisLine: { axisLine: {
lineStyle: { lineStyle: {
color: 'white', color: '#BFF7FF',
width: 0 width: 0
} }
}, }
}, },
series: [ series: [
{ {
name: '车辆离线',
type: 'bar', type: 'bar',
data: that.carWorkingStateData.offline, barWidth: 12,
barWidth: 20,
itemStyle: { itemStyle: {
color: '#14F3C5' color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
}, { offset: 0, color: '#23FFE2' },
}, { offset: 1, color: '#0F86EB' }
{ ])
name: '车辆在线',
type: 'bar', },
data: that.carWorkingStateData.online, data: this.truckRankListData.driverSeriesData,
barWidth: 20,
itemStyle: {
color: '#2195FD'
},
} }
] ]
}; };
option && myChart.setOption(option); option && myChart.setOption(option);
}, },
//卡车切换时间
truckChangeTime(text){
this.truckRankListData.selectTimeText = text;
if(text == 'day'){
this.truckRankListData.selectTimeDate = this.currentTime.day;
}
if(text == 'month'){
this.truckRankListData.selectTimeDate = this.currentTime.month;
}
if(text == 'year'){
this.truckRankListData.selectTimeDate = this.currentTime.year;
}
},
//卡车切换字段排序
truckChangeField(text){
this.truckRankListData.selectFieldText = text;
let truckQuery1 = {};
truckQuery1.size = 10;
truckQuery1.sort = this.truckRankListData.selectFieldText + ',desc';
truckQuery1.carclass = this.truckRankListData.carclass;
truckQuery1.createTime = this.truckRankListData.selectTimeDate;
this.$nextTick(()=>{
HttpReq.truckDispatching.carInformationQuery(truckQuery1).then((res) => {
if(res.code == 200){
this.truckRankListData.listData = res.data.content;
}
})
})
},
//铲车切换时间 //铲车切换时间
forkLiftChangeTime(text){ forkLiftChangeTime(text){
this.forkLiftRankListData.selectTimeText = text; this.forkLiftRankListData.selectTimeText = text;
let forkLiftQuery1 = {};
forkLiftQuery1.size = 5;
forkLiftQuery1.sort = this.forkLiftRankListData.selectFieldText + ',desc';
forkLiftQuery1.carclass = this.forkLiftRankListData.carclass;
if(text == 'day'){ if(text == 'day'){
this.forkLiftRankListData.selectTimeDate = this.currentTime.day; HttpReq.truckDispatching.apiManmadesDay1Query(forkLiftQuery1).then((res) => {
this.forkLiftRankListData.listData = res;
})
} }
if(text == 'month'){ if(text == 'week'){
this.forkLiftRankListData.selectTimeDate = this.currentTime.month; HttpReq.truckDispatching.apiManmadesZhou1Query(forkLiftQuery1).then((res) => {
this.forkLiftRankListData.listData = res;
})
} }
if(text == 'year'){ if(text == 'month'){
this.forkLiftRankListData.selectTimeDate = this.currentTime.year; HttpReq.truckDispatching.apiManmadesMou1Query(forkLiftQuery1).then((res) => {
this.forkLiftRankListData.listData = res;
})
} }
}, },
//铲车切换字段排序 //铲车切换字段排序
forkLiftChangeField(text){ forkLiftChangeField(text){
this.forkLiftRankListData.selectFieldText = text; this.forkLiftRankListData.selectFieldText = text;
let forkLiftQuery1 = {}; let forkLiftQuery1 = {};
forkLiftQuery1.size = 10; forkLiftQuery1.size = 5;
forkLiftQuery1.sort = this.forkLiftRankListData.selectFieldText + ',desc'; forkLiftQuery1.sort = this.forkLiftRankListData.selectFieldText + ',desc';
forkLiftQuery1.carclass = this.forkLiftRankListData.carclass; forkLiftQuery1.carclass = this.forkLiftRankListData.carclass;
forkLiftQuery1.createTime = this.forkLiftRankListData.selectTimeDate;
this.$nextTick(()=>{ this.$nextTick(()=>{
HttpReq.truckDispatching.carInformationQuery(forkLiftQuery1).then((res) => { if(this.forkLiftRankListData.selectTimeText == 'day'){
if(res.code == 200){ HttpReq.truckDispatching.apiManmadesDay1Query(forkLiftQuery1).then((res) => {
this.forkLiftRankListData.listData = res.data.content; this.forkLiftRankListData.listData = res;
} })
}) }else if(this.forkLiftRankListData.selectTimeText == 'week'){
HttpReq.truckDispatching.apiManmadesZhou1Query(forkLiftQuery1).then((res) => {
this.forkLiftRankListData.listData = res;
})
}else if(this.forkLiftRankListData.selectTimeText == 'month'){
HttpReq.truckDispatching.apiManmadesMou1Query(forkLiftQuery1).then((res) => {
this.forkLiftRankListData.listData = res;
})
}
}) })
}, },
//卡车动态 //卡车动态
...@@ -707,27 +988,16 @@ export default { ...@@ -707,27 +988,16 @@ export default {
return return
} }
this.truckDynamicListData.number = this.truckDynamicListData.data[this.truckDynamicListData.num2].number; this.truckDynamicListData.number = this.truckDynamicListData.data[this.truckDynamicListData.num2].number;
HttpReq.truckDispatching.screenCarInforCarRealQuery({number:this.truckDynamicListData.number}).then((res) => { HttpReq.truckDispatching.screenCarInforCarRealQuery2({number:this.truckDynamicListData.number}).then((res) => {
if(res.code == 200){ if(res.code == 200){
if(res.data.totalElements == 0){ this.truckDynamicListData.rate = res.data.rate;
this.truckDynamicListData.rate = 0; this.truckDynamicListData.carry = res.data.carry;
this.truckDynamicListData.carry = 0; this.truckDynamicListData.workTime = res.data.workTime;
this.truckDynamicListData.workTime = 0; this.truckDynamicListData.mileage = res.data.mileage;
this.truckDynamicListData.mileage = 0; this.truckDynamicListData.startTime = res.data.startTime;
this.truckDynamicListData.startTime = '无'; this.truckDynamicListData.endTime = res.data.endTime;
this.truckDynamicListData.endTime = '无'; this.truckDynamicListData.loadArea = res.data.loadArea;
this.truckDynamicListData.loadArea = '无'; this.truckDynamicListData.unloadArea = res.data.unloadArea;
this.truckDynamicListData.unloadArea = '无';
}else{
this.truckDynamicListData.rate = res.data.content[0].rate;
this.truckDynamicListData.carry = res.data.content[0].carry;
this.truckDynamicListData.workTime = res.data.content[0].workTime;
this.truckDynamicListData.mileage = res.data.content[0].mileage;
this.truckDynamicListData.startTime = res.data.content[0].startTime;
this.truckDynamicListData.endTime = res.data.content[0].endTime;
this.truckDynamicListData.loadArea = res.data.content[0].loadArea;
this.truckDynamicListData.unloadArea = res.data.content[0].unloadArea;
}
} }
this.truckDynamicListData.num2 = this.truckDynamicListData.num2 + 1; this.truckDynamicListData.num2 = this.truckDynamicListData.num2 + 1;
}) })
...@@ -745,27 +1015,16 @@ export default { ...@@ -745,27 +1015,16 @@ export default {
return return
} }
this.forkliftkDynamicListData.number = this.forkliftkDynamicListData.data[this.forkliftkDynamicListData.num2].number; this.forkliftkDynamicListData.number = this.forkliftkDynamicListData.data[this.forkliftkDynamicListData.num2].number;
HttpReq.truckDispatching.screenCarInforCarRealQuery({number:this.forkliftkDynamicListData.number}).then((res) => { HttpReq.truckDispatching.screenCarInforCarRealQuery2({number:this.forkliftkDynamicListData.number}).then((res) => {
if(res.code == 200){ if(res.code == 200){
if(res.data.totalElements == 0){ this.forkliftkDynamicListData.rate = res.data.rate;
this.forkliftkDynamicListData.rate = 0; this.forkliftkDynamicListData.carry = res.data.carry;
this.forkliftkDynamicListData.carry = 0; this.forkliftkDynamicListData.workTime = res.data.workTime;
this.forkliftkDynamicListData.workTime = 0; this.forkliftkDynamicListData.mileage = res.data.mileage;
this.forkliftkDynamicListData.mileage = 0; this.forkliftkDynamicListData.startTime = res.data.startTime;
this.forkliftkDynamicListData.startTime = '无'; this.forkliftkDynamicListData.endTime = res.data.endTime;
this.forkliftkDynamicListData.endTime = '无'; this.forkliftkDynamicListData.loadArea = res.data.loadArea;
this.forkliftkDynamicListData.loadArea = '无'; this.forkliftkDynamicListData.unloadArea = res.data.unloadArea;
this.forkliftkDynamicListData.unloadArea = '无';
}else{
this.forkliftkDynamicListData.rate = res.data.content[0].rate;
this.forkliftkDynamicListData.carry = res.data.content[0].carry;
this.forkliftkDynamicListData.workTime = res.data.content[0].workTime;
this.forkliftkDynamicListData.mileage = res.data.content[0].mileage;
this.forkliftkDynamicListData.startTime = res.data.content[0].startTime;
this.forkliftkDynamicListData.endTime = res.data.content[0].endTime;
this.forkliftkDynamicListData.loadArea = res.data.content[0].loadArea;
this.forkliftkDynamicListData.unloadArea = res.data.content[0].unloadArea;
}
} }
this.forkliftkDynamicListData.num2 = this.forkliftkDynamicListData.num2 + 1; this.forkliftkDynamicListData.num2 = this.forkliftkDynamicListData.num2 + 1;
}) })
...@@ -783,27 +1042,16 @@ export default { ...@@ -783,27 +1042,16 @@ export default {
return return
} }
this.otherCarDynamicListData.number = this.otherCarDynamicListData.data[this.otherCarDynamicListData.num2].number; this.otherCarDynamicListData.number = this.otherCarDynamicListData.data[this.otherCarDynamicListData.num2].number;
HttpReq.truckDispatching.screenCarInforCarRealQuery({number:this.otherCarDynamicListData.number}).then((res) => { HttpReq.truckDispatching.screenCarInforCarRealQuery2({number:this.otherCarDynamicListData.number}).then((res) => {
if(res.code == 200){ if(res.code == 200){
if(res.data.totalElements == 0){ this.otherCarDynamicListData.rate = res.data.rate;
this.otherCarDynamicListData.rate = 0; this.otherCarDynamicListData.carry = res.data.carry;
this.otherCarDynamicListData.carry = 0; this.otherCarDynamicListData.workTime = res.data.workTime;
this.otherCarDynamicListData.workTime = 0; this.otherCarDynamicListData.mileage = res.data.mileage;
this.otherCarDynamicListData.mileage = 0; this.otherCarDynamicListData.startTime = res.data.startTime;
this.otherCarDynamicListData.startTime = '无'; this.otherCarDynamicListData.endTime = res.data.endTime;
this.otherCarDynamicListData.endTime = '无'; this.otherCarDynamicListData.loadArea = res.data.loadArea;
this.otherCarDynamicListData.loadArea = '无'; this.otherCarDynamicListData.unloadArea = res.data.unloadArea;
this.otherCarDynamicListData.unloadArea = '无';
}else{
this.otherCarDynamicListData.rate = res.data.content[0].rate;
this.otherCarDynamicListData.carry = res.data.content[0].carry;
this.otherCarDynamicListData.workTime = res.data.content[0].workTime;
this.otherCarDynamicListData.mileage = res.data.content[0].mileage;
this.otherCarDynamicListData.startTime = res.data.content[0].startTime;
this.otherCarDynamicListData.endTime = res.data.content[0].endTime;
this.otherCarDynamicListData.loadArea = res.data.content[0].loadArea;
this.otherCarDynamicListData.unloadArea = res.data.content[0].unloadArea;
}
} }
this.otherCarDynamicListData.num2 = this.otherCarDynamicListData.num2 + 1; this.otherCarDynamicListData.num2 = this.otherCarDynamicListData.num2 + 1;
}) })
...@@ -858,17 +1106,18 @@ export default { ...@@ -858,17 +1106,18 @@ export default {
height: 100%; height: 100%;
overflow: hidden; overflow: hidden;
position: absolute; position: absolute;
z-index: 1;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
} }
.carManScrView_leftView{ .carManScrView_leftView{
height: 100%; height: 100%;
width: 20%; width: 20%;
z-index: 3;
} }
.carManScrView_rightView{ .carManScrView_rightView{
height: 100%; height: 100%;
width: 20%; width: 20%;
z-index: 3;
} }
.carManScrView_leftView>div{ .carManScrView_leftView>div{
width: 100%; width: 100%;
...@@ -977,18 +1226,65 @@ export default { ...@@ -977,18 +1226,65 @@ export default {
.carManScrView_leftView_content_views3::-webkit-scrollbar { .carManScrView_leftView_content_views3::-webkit-scrollbar {
display: none; display: none;
} }
.carManScrView_leftView_content_views3>div>div{ .forkliftRankTwo1{
font: 18px; margin-top: 1vh;
font-weight: 600; margin-bottom: 1.5vh;
display: flex; display: flex;
justify-content: space-evenly; justify-content: space-evenly;
width: 100%;
height: 3vh;
line-height: 3vh;
background:no-repeat center center url('~@/assets/images/cutGraph/list1.png');
background-size:100% 100%;
padding-left: 4vw;
box-sizing: border-box;
}
.forkliftRankTwo2{
margin-bottom: 1.5vh;
display: flex;
justify-content: space-evenly;
width: 100%;
height: 3vh;
line-height: 3vh;
background:no-repeat center center url('~@/assets/images/cutGraph/list2.png');
background-size:100% 100%;
padding-left: 4vw;
box-sizing: border-box;
}
.forkliftRankTwo3{
margin-bottom: 1.5vh;
display: flex;
justify-content: space-evenly;
width: 100%;
height: 3vh;
line-height: 3vh;
background:no-repeat center center url('~@/assets/images/cutGraph/list3.png');
background-size:100% 100%;
padding-left: 4vw;
box-sizing: border-box;
} }
.carManScrView_leftView_content_views3>div>div>div{ .forkliftRankTwo4{
margin-top: 7px; margin-bottom: 1.5vh;
display: flex;
justify-content: space-evenly;
width: 100%;
height: 3vh;
line-height: 3vh;
background:no-repeat center center url('~@/assets/images/cutGraph/list4.png');
background-size:100% 100%;
padding-left: 4vw;
box-sizing: border-box;
} }
#carWorkingStateEcharts{ .forkliftRankTwo5{
display: flex;
justify-content: space-evenly;
width: 100%; width: 100%;
height: 28vh; height: 3vh;
line-height: 3vh;
background:no-repeat center center url('~@/assets/images/cutGraph/list5.png');
background-size:100% 100%;
padding-left: 4vw;
box-sizing: border-box;
} }
.carDynamicTitleStyle{ .carDynamicTitleStyle{
display: flex; display: flex;
...@@ -1064,10 +1360,10 @@ export default { ...@@ -1064,10 +1360,10 @@ export default {
margin: 0px auto; margin: 0px auto;
width: 4.3vw; width: 4.3vw;
height: 4.3vw; height: 4.3vw;
border: 4px solid #06EFFE; line-height: 4.3vw;
border-radius: 50%;
line-height: 3.8vw;
font-size: 24px; font-size: 24px;
background:no-repeat center center url('~@/assets/images/cutGraph/bilikuang.png');
background-size:100% 100%;
} }
.otherCarDynamicContent1{ .otherCarDynamicContent1{
margin-top: 0.3vh; margin-top: 0.3vh;
...@@ -1086,9 +1382,9 @@ export default { ...@@ -1086,9 +1382,9 @@ export default {
margin: 0px auto; margin: 0px auto;
width: 4vw; width: 4vw;
height: 4vw; height: 4vw;
border: 4px solid #06EFFE; line-height: 4vw;
border-radius: 50%;
line-height: 3.5vw;
font-size: 24px; font-size: 24px;
background:no-repeat center center url('~@/assets/images/cutGraph/bilikuang.png');
background-size:100% 100%;
} }
</style> </style>
\ No newline at end of file
src/views/MLargeScreen/components/dataAnalysis/index.vue
View file @ fcbbe8e9
...@@ -12,12 +12,7 @@ ...@@ -12,12 +12,7 @@
<div> <div>
<div class="dataAnalysisScrView_leftView_title">各采区日产量排名</div> <div class="dataAnalysisScrView_leftView_title">各采区日产量排名</div>
<div class="dataAnalysisScrView_leftView_content"> <div class="dataAnalysisScrView_leftView_content">
<div class="outputRankView"> <div class="outputRankView" id="outputRankView"></div>
<div v-for="(item, index) in outputRankData" :key="index" style="display:flex;margin-bottom:15px;padding:0px 10px 0px 0px">
<div class="l-left">{{item.name}}</div>
<el-progress :stroke-width="10" :percentage="parseInt(item.output) / 10" :format="progressFormat" style="color:white;"></el-progress>
</div>
</div>
</div> </div>
</div> </div>
<!-- 各采区当月完成率--> <!-- 各采区当月完成率-->
...@@ -42,8 +37,8 @@ ...@@ -42,8 +37,8 @@
<div>装卸点平均时长</div> <div>装卸点平均时长</div>
<div class="loadAndUnloadTitleDateStyle"> <div class="loadAndUnloadTitleDateStyle">
<div :class="loadAndUnloadListData.selectTimeText == 'day' ? 'loadAndUnloadDateStyle_son1' : 'loadAndUnloadDateStyle_son2' " @click="loadAndUnloadChangeTime('day')">日</div> <div :class="loadAndUnloadListData.selectTimeText == 'day' ? 'loadAndUnloadDateStyle_son1' : 'loadAndUnloadDateStyle_son2' " @click="loadAndUnloadChangeTime('day')">日</div>
<div :class="loadAndUnloadListData.selectTimeText == 'week' ? 'loadAndUnloadDateStyle_son1' : 'loadAndUnloadDateStyle_son2' " @click="loadAndUnloadChangeTime('week')">周</div>
<div :class="loadAndUnloadListData.selectTimeText == 'month' ? 'loadAndUnloadDateStyle_son1' : 'loadAndUnloadDateStyle_son2' " @click="loadAndUnloadChangeTime('month')">月</div> <div :class="loadAndUnloadListData.selectTimeText == 'month' ? 'loadAndUnloadDateStyle_son1' : 'loadAndUnloadDateStyle_son2' " @click="loadAndUnloadChangeTime('month')">月</div>
<div :class="loadAndUnloadListData.selectTimeText == 'year' ? 'loadAndUnloadDateStyle_son1' : 'loadAndUnloadDateStyle_son2' " @click="loadAndUnloadChangeTime('year')">年</div>
</div> </div>
</div> </div>
<div class="dataAnalysisScrView_rightView_content" style="position: relative;"> <div class="dataAnalysisScrView_rightView_content" style="position: relative;">
...@@ -56,12 +51,12 @@ ...@@ -56,12 +51,12 @@
<div>矿石产量比</div> <div>矿石产量比</div>
<div class="oreProportionTitleDateStyle"> <div class="oreProportionTitleDateStyle">
<div :class="oreProportionListData.selectTimeText == 'day' ? 'oreProportionDateStyle_son1' : 'oreProportionDateStyle_son2' " @click="oreProportionChangeTime('day')">日</div> <div :class="oreProportionListData.selectTimeText == 'day' ? 'oreProportionDateStyle_son1' : 'oreProportionDateStyle_son2' " @click="oreProportionChangeTime('day')">日</div>
<div :class="oreProportionListData.selectTimeText == 'week' ? 'oreProportionDateStyle_son1' : 'oreProportionDateStyle_son2' " @click="oreProportionChangeTime('week')">周</div>
<div :class="oreProportionListData.selectTimeText == 'month' ? 'oreProportionDateStyle_son1' : 'oreProportionDateStyle_son2' " @click="oreProportionChangeTime('month')">月</div> <div :class="oreProportionListData.selectTimeText == 'month' ? 'oreProportionDateStyle_son1' : 'oreProportionDateStyle_son2' " @click="oreProportionChangeTime('month')">月</div>
<div :class="oreProportionListData.selectTimeText == 'year' ? 'oreProportionDateStyle_son1' : 'oreProportionDateStyle_son2' " @click="oreProportionChangeTime('year')">年</div>
</div> </div>
</div> </div>
<div class="dataAnalysisScrView_rightView_content" style="position: relative;"> <div class="dataAnalysisScrView_rightView_content" style="position: relative;">
<div id="echarts5View"></div> <div id="echarts5View" ref="chartPanel" style="width:100%;height: 18vh;margin-top: 4vh;"></div>
</div> </div>
</div> </div>
<!-- 报警路障申报统计 --> <!-- 报警路障申报统计 -->
...@@ -85,11 +80,15 @@ ...@@ -85,11 +80,15 @@
<script> <script>
import { Tools, HttpReq, Dates} from '@/assets/js/common.js'; import { Tools, HttpReq, Dates} from '@/assets/js/common.js';
import * as echarts from 'echarts'; import * as echarts from 'echarts';
import "echarts-gl";
import { getPie3D } from "../../../components/echarts/bingtu3d";
export default { export default {
data() { data() {
return { return {
whetherShow:false, whetherShow:false,
dataAnalysisTimer:null,
//时间 //时间
currentTime:{ currentTime:{
day:'', day:'',
...@@ -97,15 +96,12 @@ export default { ...@@ -97,15 +96,12 @@ export default {
year:'', year:'',
}, },
//采取产量统计 //采取产量统计
echarts1Data:[ echarts1Data:[],
{ value: 104, name: 'Ca2o' },
{ value: 735, name: 'Ca3o' },
{ value: 580, name: 'Ca4o' },
{ value: 484, name: 'Ca5o' },
{ value: 300, name: 'Ca6o' }
],
//各采区日产量排名 //各采区日产量排名
outputRankData:[], outputRankData:{
caiquName:[],
caiquSeriesData:[],
},
//各采区当月完成率 //各采区当月完成率
echarts2Data:{ echarts2Data:{
caiquName:[], caiquName:[],
...@@ -115,9 +111,9 @@ export default { ...@@ -115,9 +111,9 @@ export default {
}, },
//月生产完成效率 //月生产完成效率
echarts3Data:{ echarts3Data:{
caiquName:['采区一', '采区二', '采区三', '采区四'], caiquName:[],
wanchengNum:[20,25,48,63], wanchengNum:[],
jihuaNum:[30,50,60,70], jihuaNum:[],
}, },
//装卸点平均时长 //装卸点平均时长
loadAndUnloadListData:{ loadAndUnloadListData:{
...@@ -131,6 +127,24 @@ export default { ...@@ -131,6 +127,24 @@ export default {
selectTimeText:'day', selectTimeText:'day',
selectTimeDate:'', selectTimeDate:'',
proportionData:[], proportionData:[],
optionData:[
{
name: "矿石",
value: 85,
itemStyle: {
opacity: 0.2,
color: "#8FDFFE",
},
},
{
name: "挖石",
value: 15,
itemStyle: {
opacity: 0.2,
color: "#00A8FF",
},
}
]
}, },
//报警路障申报统计 //报警路障申报统计
echarts6Data:[], echarts6Data:[],
...@@ -139,7 +153,6 @@ export default { ...@@ -139,7 +153,6 @@ export default {
xiedianName:[], xiedianName:[],
outputNum:[], outputNum:[],
}, },
} }
}, },
methods: { methods: {
...@@ -152,71 +165,180 @@ export default { ...@@ -152,71 +165,180 @@ export default {
this.$nextTick(()=>{ this.$nextTick(()=>{
//采取产量统计图表 //采取产量统计图表
this.echarts1Fn(); HttpReq.truckDispatching.getApiHl1().then((res) => {
//各采区日产量排名
HttpReq.truckDispatching.caiquAreaQueryDay({size:10,createTime:this.currentTime.day,sort:'output,desc',}).then((res) => {
if(res.code == 200){
this.outputRankData = res.data.content;
}
})
//各采区当月完成率
HttpReq.truckDispatching.caiquAreaQueryMonth({size:9999,createTime:this.currentTime.month,}).then((res) => {
if(res.code == 200){
let caiquName = [];
let wanchengNum = [];
let jihuaNum = [];
let wanchengRate = [];
res.data.content.forEach((item,index)=>{
caiquName.push(item.name);
wanchengNum.push(item.output);
jihuaNum.push(item.dayPlan);
wanchengRate.push(parseFloat(item.rate) * 100);
})
this.echarts2Data.caiquName = caiquName;
this.echarts2Data.wanchengNum = wanchengNum;
this.echarts2Data.jihuaNum = jihuaNum;
this.echarts2Data.wanchengRate = wanchengRate;
this.echarts2Fn();
}
})
//月生产完成效率
this.echarts3Fn();
//装卸点平均时长 卸货点卸货量统计
HttpReq.truckDispatching.xiequAreaQueryDay({size:9999,createTime:this.currentTime.day,}).then((res) => {
if(res.code == 200){
let caiquName = [];
let workTime = [];
let outputNum7 = [];
res.data.content.forEach((item,index)=>{
caiquName.push(item.name);
workTime.push(item.worktime);
outputNum7.push(item.output);
})
this.loadAndUnloadListData.caiquName = caiquName;
this.loadAndUnloadListData.timeData = workTime;
this.echarts4Fn();
//卸货点卸货量统计
this.echarts7Data.xiedianName = caiquName;
this.echarts7Data.outputNum = outputNum7;
this.echarts7Fn();
}
})
//矿石产量比
HttpReq.truckDispatching.screenOreProportionDayQuery({size:9999,createTime:this.currentTime.day,}).then((res) => {
if(res.code == 200){ if(res.code == 200){
let colorARR = ['#00A8FF','#8FDFFE','#F4F03A','#F5335C','#E68220','#00A8FF','#8FDFFE','#F4F03A','#F5335C','#E68220'];
let centerArray = []; let centerArray = [];
res.data.content.forEach((item,index)=>{ res.data.content.forEach((item,index)=>{
let a1 = {}; let a1 = {};
a1.value = item.num; let a2 = {};
a1.name = item.name; a1.name = item.name;
a1.value = item.num;
a2.opacity = 0.2,
a2.color = colorARR[index],
a1.itemStyle = a2;
centerArray.push(a1); centerArray.push(a1);
}) })
this.oreProportionListData.proportionData = centerArray; this.echarts1Data = centerArray;
this.echarts5Fn();
} }
this.echarts1_1Fn();
}) })
//各采区日产量排名
HttpReq.truckDispatching.caiquAreaQueryDay({size:6,sort:'total,desc'}).then((res) => {
let eh2_arr1 = [];
let eh2_arr2 = [];
res.forEach((item)=>{
eh2_arr1.push(item.name);
eh2_arr2.push(item.total);
})
this.outputRankData.caiquName = eh2_arr1.reverse();
this.outputRankData.caiquSeriesData = eh2_arr2.reverse();
this.echarts2_1Fn();
})
//各采区当月完成率 和 月生产完成效率
HttpReq.truckDispatching.caiquAreaQueryMonth().then((res) => {
console.log(res);
let eh2_1_arr1 = [];
let eh2_1_arr2 = [];
let eh2_1_arr3 = [];
let eh2_1_arr4 = [];
res.forEach((item)=>{
eh2_1_arr1.push(item.name);
eh2_1_arr2.push(item.total);
eh2_1_arr3.push(item.nowPlan);
eh2_1_arr4.push(item.ratio);
})
this.echarts2Data.caiquName = eh2_1_arr1;
this.echarts2Data.wanchengNum = eh2_1_arr2;
this.echarts2Data.jihuaNum = eh2_1_arr3;
this.echarts2Data.wanchengRate = eh2_1_arr4;
this.echarts3Data.caiquName = eh2_1_arr1;
this.echarts3Data.wanchengNum = eh2_1_arr2;
this.echarts3Data.jihuaNum = eh2_1_arr3;
this.echarts2Fn();
this.echarts3Fn();
})
//装卸点平均时长
if(this.loadAndUnloadListData.selectTimeText == 'day'){
HttpReq.truckDispatching.xiequAreaQueryDay({createTime:this.currentTime.day}).then((res) => {
if(res.code == 200){
let caiquName = [];
let workTime = [];
res.data.content.forEach((item,index)=>{
caiquName.push(item.name);
workTime.push(item.worktime);
})
this.loadAndUnloadListData.caiquName = caiquName;
this.loadAndUnloadListData.timeData = workTime;
this.echarts4Fn();
}
})
}
if(this.loadAndUnloadListData.selectTimeText == 'week'){
HttpReq.truckDispatching.xiequAreaQueryMonth({createTime:this.currentTime.month}).then((res) => {
if(res.code == 200){
let caiquName = [];
let workTime = [];
res.data.content.forEach((item,index)=>{
caiquName.push(item.name);
workTime.push(item.worktime);
})
this.loadAndUnloadListData.caiquName = caiquName;
this.loadAndUnloadListData.timeData = workTime;
this.echarts4Fn();
}
})
}
if(this.loadAndUnloadListData.selectTimeText == 'month'){
HttpReq.truckDispatching.xiequAreaQueryYear({createTime:this.currentTime.year}).then((res) => {
if(res.code == 200){
let caiquName = [];
let workTime = [];
res.data.content.forEach((item,index)=>{
caiquName.push(item.name);
workTime.push(item.worktime);
})
this.loadAndUnloadListData.caiquName = caiquName;
this.loadAndUnloadListData.timeData = workTime;
this.echarts4Fn();
}
})
}
//矿石产量比
if(this.oreProportionListData.selectTimeText == 'day'){
HttpReq.truckDispatching.screenOreProportionDayQuery().then((res) => {
if(res.code == 200){
if(res.data.totalElements == 0){
this.oreProportionListData.proportionData = this.oreProportionListData.optionData;
}else{
let colorARR = ['#00A8FF','#8FDFFE','#F4F03A','#F5335C','#E68220','#00A8FF','#8FDFFE','#F4F03A','#F5335C','#E68220'];
let centerArray = [];
res.data.content.forEach((item,index)=>{
let a1 = {};
let a2 = {};
a1.name = item.name;
a1.value = item.num;
a2.opacity = 0.2,
a2.color = colorARR[index],
a1.itemStyle = a2;
centerArray.push(a1);
})
this.oreProportionListData.proportionData = centerArray;
}
this.echarts5Fn();
}
})
}
if(this.oreProportionListData.selectTimeText == 'week'){
HttpReq.truckDispatching.screenOreProportionMonthQuery().then((res) => {
if(res.code == 200){
if(res.data.totalElements == 0){
this.oreProportionListData.proportionData = this.oreProportionListData.optionData;
}else{
let colorARR = ['#00A8FF','#8FDFFE','#F4F03A','#F5335C','#E68220','#00A8FF','#8FDFFE','#F4F03A','#F5335C','#E68220'];
let centerArray = [];
res.data.content.forEach((item,index)=>{
let a1 = {};
let a2 = {};
a1.name = item.name;
a1.value = item.num;
a2.opacity = 0.2,
a2.color = colorARR[index],
a1.itemStyle = a2;
centerArray.push(a1);
})
this.oreProportionListData.proportionData = centerArray;
}
this.echarts5Fn();
}
})
}
if(this.oreProportionListData.selectTimeText == 'month'){
HttpReq.truckDispatching.screenOreProportionYearQuery().then((res) => {
if(res.code == 200){
if(res.data.totalElements == 0){
this.oreProportionListData.proportionData = this.oreProportionListData.optionData;
}else{
let colorARR = ['#00A8FF','#8FDFFE','#F4F03A','#F5335C','#E68220','#00A8FF','#8FDFFE','#F4F03A','#F5335C','#E68220'];
let centerArray = [];
res.data.content.forEach((item,index)=>{
let a1 = {};
let a2 = {};
a1.name = item.name;
a1.value = item.num;
a2.opacity = 0.2,
a2.color = colorARR[index],
a1.itemStyle = a2;
centerArray.push(a1);
})
this.oreProportionListData.proportionData = centerArray;
}
this.echarts5Fn();
}
})
}
//报警路障申报统计 //报警路障申报统计
HttpReq.truckDispatching.breakDownQueryDay({size:9999,createTime:this.currentTime.day,}).then((res) => { HttpReq.truckDispatching.breakDownQueryDay({size:9999}).then((res) => {
let that = this; let that = this;
if(res.code == 200){ if(res.code == 200){
//报警路障申报统计过度数组 //报警路障申报统计过度数组
...@@ -268,56 +390,410 @@ export default { ...@@ -268,56 +390,410 @@ export default {
}) })
} }
}) })
//卸货点卸货量统计
HttpReq.truckDispatching.xiequAreaQueryDay({createTime:this.currentTime.month}).then((res) => {
if(res.code == 200){
let xiedianName = [];
let outputNum = [];
res.data.content.forEach((item,index)=>{
xiedianName.push(item.name);
outputNum.push(item.outputNum);
})
this.echarts7Data.xiedianName = xiedianName;
this.echarts7Data.outputNum = outputNum;
this.echarts7Fn();
}
})
//定时器
this.dataAnalysisTimer = setInterval(() => {
//采取产量统计图表
HttpReq.truckDispatching.getApiHl1().then((res) => {
if(res.code == 200){
let colorARR = ['#00A8FF','#8FDFFE','#F4F03A','#F5335C','#E68220','#00A8FF','#8FDFFE','#F4F03A','#F5335C','#E68220'];
let centerArray = [];
res.data.content.forEach((item,index)=>{
let a1 = {};
let a2 = {};
a1.name = item.name;
a1.value = item.num;
a2.opacity = 0.2,
a2.color = colorARR[index],
a1.itemStyle = a2;
centerArray.push(a1);
})
this.echarts1Data = centerArray;
}
this.echarts1_1Fn();
})
//各采区日产量排名
HttpReq.truckDispatching.caiquAreaQueryDay({size:6,sort:'total,desc'}).then((res) => {
let eh2_arr1 = [];
let eh2_arr2 = [];
res.forEach((item)=>{
eh2_arr1.push(item.name);
eh2_arr2.push(item.total);
})
this.outputRankData.caiquName = eh2_arr1.reverse();
this.outputRankData.caiquSeriesData = eh2_arr2.reverse();
this.echarts2_1Fn();
})
//各采区当月完成率 和 月生产完成效率
HttpReq.truckDispatching.caiquAreaQueryMonth().then((res) => {
console.log(res);
let eh2_1_arr1 = [];
let eh2_1_arr2 = [];
let eh2_1_arr3 = [];
let eh2_1_arr4 = [];
res.forEach((item)=>{
eh2_1_arr1.push(item.name);
eh2_1_arr2.push(item.total);
eh2_1_arr3.push(item.nowPlan);
eh2_1_arr4.push(item.ratio);
})
this.echarts2Data.caiquName = eh2_1_arr1;
this.echarts2Data.wanchengNum = eh2_1_arr2;
this.echarts2Data.jihuaNum = eh2_1_arr3;
this.echarts2Data.wanchengRate = eh2_1_arr4;
this.echarts3Data.caiquName = eh2_1_arr1;
this.echarts3Data.wanchengNum = eh2_1_arr2;
this.echarts3Data.jihuaNum = eh2_1_arr3;
this.echarts2Fn();
this.echarts3Fn();
})
//装卸点平均时长
if(this.loadAndUnloadListData.selectTimeText == 'day'){
HttpReq.truckDispatching.xiequAreaQueryDay({createTime:this.currentTime.day}).then((res) => {
if(res.code == 200){
let caiquName = [];
let workTime = [];
res.data.content.forEach((item,index)=>{
caiquName.push(item.name);
workTime.push(item.worktime);
})
this.loadAndUnloadListData.caiquName = caiquName;
this.loadAndUnloadListData.timeData = workTime;
this.echarts4Fn();
}
})
}
if(this.loadAndUnloadListData.selectTimeText == 'week'){
HttpReq.truckDispatching.xiequAreaQueryMonth({createTime:this.currentTime.month}).then((res) => {
if(res.code == 200){
let caiquName = [];
let workTime = [];
res.data.content.forEach((item,index)=>{
caiquName.push(item.name);
workTime.push(item.worktime);
})
this.loadAndUnloadListData.caiquName = caiquName;
this.loadAndUnloadListData.timeData = workTime;
this.echarts4Fn();
}
})
}
if(this.loadAndUnloadListData.selectTimeText == 'month'){
HttpReq.truckDispatching.xiequAreaQueryYear({createTime:this.currentTime.year}).then((res) => {
if(res.code == 200){
let caiquName = [];
let workTime = [];
res.data.content.forEach((item,index)=>{
caiquName.push(item.name);
workTime.push(item.worktime);
})
this.loadAndUnloadListData.caiquName = caiquName;
this.loadAndUnloadListData.timeData = workTime;
this.echarts4Fn();
}
})
}
//矿石产量比
if(this.oreProportionListData.selectTimeText == 'day'){
HttpReq.truckDispatching.screenOreProportionDayQuery().then((res) => {
if(res.code == 200){
if(res.data.totalElements == 0){
this.oreProportionListData.proportionData = this.oreProportionListData.optionData;
}else{
let colorARR = ['#00A8FF','#8FDFFE','#F4F03A','#F5335C','#E68220','#00A8FF','#8FDFFE','#F4F03A','#F5335C','#E68220'];
let centerArray = [];
res.data.content.forEach((item,index)=>{
let a1 = {};
let a2 = {};
a1.name = item.name;
a1.value = item.num;
a2.opacity = 0.2,
a2.color = colorARR[index],
a1.itemStyle = a2;
centerArray.push(a1);
})
this.oreProportionListData.proportionData = centerArray;
}
this.echarts5Fn();
}
})
}
if(this.oreProportionListData.selectTimeText == 'week'){
HttpReq.truckDispatching.screenOreProportionMonthQuery().then((res) => {
if(res.code == 200){
if(res.data.totalElements == 0){
this.oreProportionListData.proportionData = this.oreProportionListData.optionData;
}else{
let colorARR = ['#00A8FF','#8FDFFE','#F4F03A','#F5335C','#E68220','#00A8FF','#8FDFFE','#F4F03A','#F5335C','#E68220'];
let centerArray = [];
res.data.content.forEach((item,index)=>{
let a1 = {};
let a2 = {};
a1.name = item.name;
a1.value = item.num;
a2.opacity = 0.2,
a2.color = colorARR[index],
a1.itemStyle = a2;
centerArray.push(a1);
})
this.oreProportionListData.proportionData = centerArray;
}
this.echarts5Fn();
}
})
}
if(this.oreProportionListData.selectTimeText == 'month'){
HttpReq.truckDispatching.screenOreProportionYearQuery().then((res) => {
if(res.code == 200){
if(res.data.totalElements == 0){
this.oreProportionListData.proportionData = this.oreProportionListData.optionData;
}else{
let colorARR = ['#00A8FF','#8FDFFE','#F4F03A','#F5335C','#E68220','#00A8FF','#8FDFFE','#F4F03A','#F5335C','#E68220'];
let centerArray = [];
res.data.content.forEach((item,index)=>{
let a1 = {};
let a2 = {};
a1.name = item.name;
a1.value = item.num;
a2.opacity = 0.2,
a2.color = colorARR[index],
a1.itemStyle = a2;
centerArray.push(a1);
})
this.oreProportionListData.proportionData = centerArray;
}
this.echarts5Fn();
}
})
}
//报警路障申报统计
HttpReq.truckDispatching.breakDownQueryDay({size:9999}).then((res) => {
let that = this;
if(res.code == 200){
//报警路障申报统计过度数组
let alarmBreakArray = [];
let breakObj1 = {};
breakObj1.name = '车辆故障';
breakObj1.value = res.data.totalElements;
alarmBreakArray.push(breakObj1);
//获取报警信息
HttpReq.truckDispatching.callPoliceQuery({size:9999,}).then((res) => {
if(res.code == 200){
let alarmObj1 = {};
let alarmArray1 = [];
let alarmObj2 = {};
let alarmArray2 = [];
let alarmObj3 = {};
let alarmArray3 = [];
let alarmObj4 = {};
let alarmArray4 = [];
res.data.content.forEach((item,index)=>{
if(item.alarmclass == '超速'){
alarmArray1.push(item);
}else if(item.alarmclass == '无故停车'){
alarmArray2.push(item);
}else if(item.alarmclass == '驾离电子围栏'){
alarmArray3.push(item);
}else if(item.alarmclass == '驶入电子围栏'){
alarmArray4.push(item);
}
})
alarmObj1.name = '超速';
alarmObj1.value = alarmArray1.length;
alarmObj2.name = '无故停车';
alarmObj2.value = alarmArray2.length;
alarmObj3.name = '驾离电子围栏';
alarmObj3.value = alarmArray3.length;
alarmObj4.name = '驶入电子围栏';
alarmObj4.value = alarmArray4.length;
alarmBreakArray.push(alarmObj1);
alarmBreakArray.push(alarmObj2);
alarmBreakArray.push(alarmObj3);
alarmBreakArray.push(alarmObj4);
that.echarts6Data = alarmBreakArray;
this.$nextTick(()=>{
that.echarts6Fn();
})
}
})
}
})
//卸货点卸货量统计
HttpReq.truckDispatching.xiequAreaQueryDay({createTime:this.currentTime.month}).then((res) => {
if(res.code == 200){
let xiedianName = [];
let outputNum = [];
res.data.content.forEach((item,index)=>{
xiedianName.push(item.name);
outputNum.push(item.outputNum);
})
this.echarts7Data.xiedianName = xiedianName;
this.echarts7Data.outputNum = outputNum;
this.echarts7Fn();
}
})
},10000)
}) })
}else{ }else{
if(this.dataAnalysisTimer) {
clearInterval(this.dataAnalysisTimer);
}
this.whetherShow = false; this.whetherShow = false;
} }
}, },
//采取产量统计 //采取产量统计
echarts1Fn(){ echarts1_1Fn(){
var myChart = echarts.init(document.getElementById('echarts1View')); // 基于准备好的dom，初始化echarts实例
var option = { echarts.init(document.getElementById('echarts1View')).dispose();
let chartPanel = echarts.init(document.getElementById("echarts1View"));
for (let i = 0; i < this.echarts1Data.length; i++) {
delete this.echarts1Data[i].itemStyle.opacity;
}
// 传入数据生成 option
let series = getPie3D(this.echarts1Data, 2);
let option = {
tooltip: { tooltip: {
trigger: 'item' formatter: (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>`;
}
},
}, },
legend: { legend: {
data: this.echarts1Data,
top:'center',
orient: 'vertical', orient: 'vertical',
top: 'center', right: '7%',
right: 'right', textStyle: {
textStyle:{ color: "#fff",
color:'white', fontSize: 14,
fontSize:16, },
} },
xAxis3D: {
min: -1,
max: 1,
},
yAxis3D: {
min: -1,
max: 1,
},
zAxis3D: {
min: -1,
max: 1,
},
grid3D: {
show: false, //是否显示三维笛卡尔坐标系。
boxHeight: 15, //三维笛卡尔坐标系在三维场景中的高度
top: "1%",
// bottom: "80%",
// environment: "#021041", //背景
viewControl: {
//用于鼠标的旋转，缩放等视角控制
alpha: 40, //角度
distance: 210, //调整视角到主体的距离，类似调整zoom 重要
rotateSensitivity: 0, //设置为0无法旋转
zoomSensitivity: 0, //设置为0无法缩放
panSensitivity: 0, //设置为0无法平移
autoRotate: false, //自动旋转
},
},
series: series,
};
chartPanel.setOption(option);
},
//各采区日产量排名
echarts2_1Fn(){
echarts.init(document.getElementById('outputRankView')).dispose();
var myChart = echarts.init(document.getElementById('outputRankView'));
var option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
grid: {
top:'5%',
left: '1%',
bottom: '0%',
containLabel: true
},
xAxis: {
name:'吨',
type: 'value',
boundaryGap: [0, 0.01],
axisLabel: {
show: true,
textStyle: {
color: '#BFF7FF'
}
},
axisLine: {
lineStyle: {
color: '#BFF7FF',
width: 1
}
}
},
yAxis: {
type: 'category',
data: this.outputRankData.caiquName,
axisLabel: {
show: true,
textStyle: {
color: '#BFF7FF'
}
},
axisLine: {
lineStyle: {
color: '#BFF7FF',
width: 0
}
}
}, },
color:['#1999D5', '#E68220','rgb(24,228,240)','#F3EF76','#F5335C'],
series: [ series: [
{ {
name: '产量(吨)', type: 'bar',
type: 'pie', barWidth: 12,
radius: ['40%', '85%'], itemStyle: {
avoidLabelOverlap: false, color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
label: { { offset: 0, color: '#23FFE2' },
show: true, { offset: 1, color: '#0F86EB' }
position: 'inner', ])
formatter: '({d}%)'
},
labelLine: {
show: false
}, },
data: this.echarts1Data, data: this.outputRankData.caiquSeriesData,
} }
] ]
}; };
option && myChart.setOption(option); option && myChart.setOption(option);
}, },
//排行榜进度条文字转换
progressFormat(number){
let num = parseFloat(number) * 10
return num;
},
//各采区当月完成率 //各采区当月完成率
echarts2Fn(){ echarts2Fn(){
echarts.init(document.getElementById('echarts2View')).dispose();
var myChart = echarts.init(document.getElementById('echarts2View')); var myChart = echarts.init(document.getElementById('echarts2View'));
var option = { var option = {
tooltip: { tooltip: {
...@@ -330,6 +806,12 @@ export default { ...@@ -330,6 +806,12 @@ export default {
fontSize:15, fontSize:15,
} }
}, },
grid: {
left: '1%',
right: '2%',
bottom: '20%',
containLabel: true
},
xAxis: [ xAxis: [
{ {
type: 'category', type: 'category',
...@@ -356,8 +838,8 @@ export default { ...@@ -356,8 +838,8 @@ export default {
type: 'value', type: 'value',
name: '产量(T)', name: '产量(T)',
min: 0, min: 0,
max: 1000, max: 10000,
interval: 200, interval: 2000,
axisLabel: { axisLabel: {
formatter: '{value}', formatter: '{value}',
show: true, show: true,
...@@ -448,6 +930,7 @@ export default { ...@@ -448,6 +930,7 @@ export default {
}, },
//月生产完成效率 //月生产完成效率
echarts3Fn(){ echarts3Fn(){
echarts.init(document.getElementById('echarts3View')).dispose();
var myChart = echarts.init(document.getElementById('echarts3View')); var myChart = echarts.init(document.getElementById('echarts3View'));
var option = { var option = {
tooltip: { tooltip: {
...@@ -483,10 +966,8 @@ export default { ...@@ -483,10 +966,8 @@ export default {
} }
}, },
yAxis: { yAxis: {
min: 0,
max: 100,
type: 'value', type: 'value',
name: '完成率(%)', name: '完成量',
nameTextStyle: { fontSize: 14 }, nameTextStyle: { fontSize: 14 },
axisLabel: { axisLabel: {
show: true, show: true,
...@@ -526,14 +1007,12 @@ export default { ...@@ -526,14 +1007,12 @@ export default {
}; };
option && myChart.setOption(option); option && myChart.setOption(option);
}, },
//装卸点平均时长 //装卸点平均时长切换
loadAndUnloadChangeTime(text){ loadAndUnloadChangeTime(text){
this.loadAndUnloadListData.selectTimeText = text; this.loadAndUnloadListData.selectTimeText = text;
if(text == 'day'){ if(text == 'day'){
this.loadAndUnloadListData.selectTimeDate = this.currentTime.day; HttpReq.truckDispatching.xiequAreaQueryDay({createTime:this.currentTime.day}).then((res) => {
HttpReq.truckDispatching.xiequAreaQueryDay({size:9999,createTime:this.loadAndUnloadListData.selectTimeDate,}).then((res) => {
if(res.code == 200){ if(res.code == 200){
console.log(res.data.content);
let caiquName = []; let caiquName = [];
let workTime = []; let workTime = [];
res.data.content.forEach((item,index)=>{ res.data.content.forEach((item,index)=>{
...@@ -546,11 +1025,9 @@ export default { ...@@ -546,11 +1025,9 @@ export default {
} }
}) })
} }
if(text == 'month'){ if(text == 'week'){
this.loadAndUnloadListData.selectTimeDate = this.currentTime.month; HttpReq.truckDispatching.xiequAreaQueryMonth({createTime:this.currentTime.month}).then((res) => {
HttpReq.truckDispatching.xiequAreaQueryMonth({size:9999,createTime:this.loadAndUnloadListData.selectTimeDate,}).then((res) => {
if(res.code == 200){ if(res.code == 200){
console.log(res.data.content);
let caiquName = []; let caiquName = [];
let workTime = []; let workTime = [];
res.data.content.forEach((item,index)=>{ res.data.content.forEach((item,index)=>{
...@@ -563,11 +1040,9 @@ export default { ...@@ -563,11 +1040,9 @@ export default {
} }
}) })
} }
if(text == 'year'){ if(text == 'month'){
this.loadAndUnloadListData.selectTimeDate = this.currentTime.year; HttpReq.truckDispatching.xiequAreaQueryYear({createTime:this.currentTime.year}).then((res) => {
HttpReq.truckDispatching.xiequAreaQueryYear({size:9999,createTime:this.loadAndUnloadListData.selectTimeDate,}).then((res) => {
if(res.code == 200){ if(res.code == 200){
console.log(res.data.content);
let caiquName = []; let caiquName = [];
let workTime = []; let workTime = [];
res.data.content.forEach((item,index)=>{ res.data.content.forEach((item,index)=>{
...@@ -582,6 +1057,7 @@ export default { ...@@ -582,6 +1057,7 @@ export default {
} }
}, },
echarts4Fn(){ echarts4Fn(){
echarts.init(document.getElementById('echarts4View')).dispose();
var myChart = echarts.init(document.getElementById('echarts4View')); var myChart = echarts.init(document.getElementById('echarts4View'));
var option = { var option = {
tooltip: { tooltip: {
...@@ -641,87 +1117,174 @@ export default { ...@@ -641,87 +1117,174 @@ export default {
}; };
option && myChart.setOption(option); option && myChart.setOption(option);
}, },
//矿石产量比 //矿石产量比切换
oreProportionChangeTime(text){ oreProportionChangeTime(text){
this.oreProportionListData.selectTimeText = text; this.oreProportionListData.selectTimeText = text;
if(text == 'day'){ if(text == 'day'){
this.oreProportionListData.selectTimeDate = this.currentTime.day; HttpReq.truckDispatching.screenOreProportionDayQuery().then((res) => {
HttpReq.truckDispatching.screenOreProportionDayQuery({size:9999,createTime:this.oreProportionListData.selectTimeDate,}).then((res) => { if(res.code == 200){
if(res.code == 200){ if(res.data.totalElements == 0){
let centerArray = []; this.oreProportionListData.proportionData = this.oreProportionListData.optionData;
res.data.content.forEach((item,index)=>{ }else{
let a1 = {}; let colorARR = ['#00A8FF','#8FDFFE','#F4F03A','#F5335C','#E68220','#00A8FF','#8FDFFE','#F4F03A','#F5335C','#E68220'];
a1.value = item.num; let centerArray = [];
a1.name = item.name; res.data.content.forEach((item,index)=>{
centerArray.push(a1); let a1 = {};
}) let a2 = {};
this.oreProportionListData.proportionData = centerArray; a1.name = item.name;
a1.value = item.num;
a2.opacity = 0.2,
a2.color = colorARR[index],
a1.itemStyle = a2;
centerArray.push(a1);
})
this.oreProportionListData.proportionData = centerArray;
}
this.echarts5Fn(); this.echarts5Fn();
} }
}) })
} }
if(text == 'month'){ if(text == 'week'){
this.oreProportionListData.selectTimeDate = this.currentTime.month; HttpReq.truckDispatching.screenOreProportionMonthQuery().then((res) => {
HttpReq.truckDispatching.screenOreProportionMonthQuery({size:9999,createTime:this.oreProportionListData.selectTimeDate,}).then((res) => {
if(res.code == 200){ if(res.code == 200){
let centerArray = []; if(res.data.totalElements == 0){
res.data.content.forEach((item,index)=>{ this.oreProportionListData.proportionData = this.oreProportionListData.optionData;
let a1 = {}; }else{
a1.value = item.num; let colorARR = ['#00A8FF','#8FDFFE','#F4F03A','#F5335C','#E68220','#00A8FF','#8FDFFE','#F4F03A','#F5335C','#E68220'];
a1.name = item.name; let centerArray = [];
centerArray.push(a1); res.data.content.forEach((item,index)=>{
}) let a1 = {};
this.oreProportionListData.proportionData = centerArray; let a2 = {};
a1.name = item.name;
a1.value = item.num;
a2.opacity = 0.2,
a2.color = colorARR[index],
a1.itemStyle = a2;
centerArray.push(a1);
})
this.oreProportionListData.proportionData = centerArray;
}
this.echarts5Fn(); this.echarts5Fn();
} }
}) })
} }
if(text == 'year'){ if(text == 'month'){
this.oreProportionListData.selectTimeDate = this.currentTime.year; HttpReq.truckDispatching.screenOreProportionYearQuery().then((res) => {
HttpReq.truckDispatching.screenOreProportionYearQuery({size:9999,createTime:this.oreProportionListData.selectTimeDate,}).then((res) => {
if(res.code == 200){ if(res.code == 200){
let centerArray = []; if(res.data.totalElements == 0){
res.data.content.forEach((item,index)=>{ this.oreProportionListData.proportionData = this.oreProportionListData.optionData;
let a1 = {}; }else{
a1.value = item.num; let colorARR = ['#00A8FF','#8FDFFE','#F4F03A','#F5335C','#E68220','#00A8FF','#8FDFFE','#F4F03A','#F5335C','#E68220'];
a1.name = item.name; let centerArray = [];
centerArray.push(a1); res.data.content.forEach((item,index)=>{
}) let a1 = {};
this.oreProportionListData.proportionData = centerArray; let a2 = {};
a1.name = item.name;
a1.value = item.num;
a2.opacity = 0.2,
a2.color = colorARR[index],
a1.itemStyle = a2;
centerArray.push(a1);
})
this.oreProportionListData.proportionData = centerArray;
}
this.echarts5Fn(); this.echarts5Fn();
} }
}) })
} }
}, },
echarts5Fn(){ echarts5Fn(){
var myChart = echarts.init(document.getElementById('echarts5View')); // 基于准备好的dom，初始化echarts实例
var option = { echarts.init(document.getElementById('echarts5View')).dispose();
let chartPanel = echarts.init(document.getElementById("echarts5View"));
for (let i = 0; i < this.oreProportionListData.proportionData.length; i++) {
delete this.oreProportionListData.proportionData[i].itemStyle.opacity;
}
// 传入数据生成 option
let series = getPie3D(this.oreProportionListData.proportionData, 0);
let option = {
tooltip: { tooltip: {
trigger: 'item' formatter: (params) => {
}, if (
color:['#1999D5', '#E68220','rgb(24,228,240)','#F3EF76','#F5335C'], params.seriesName !== "mouseoutSeries" &&
series: [ params.seriesName !== "pie2d"
{ ) {
name:'产量(吨)', return `<div style="padding:0 0px">${params.seriesName}：${(
type: 'pie', option.series[params.seriesIndex].pieData.proportion * 100
radius: '50%', ).toFixed(2)}%</div>`;
label: {
show: true,
formatter: '{b}({d}%)',
color:'white',
fontSize:'14',
},
labelLine: {
show: true
},
data: this.oreProportionListData.proportionData,
} }
] },
},
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: 210, //调整视角到主体的距离，类似调整zoom 重要
rotateSensitivity: 0, //设置为0无法旋转
zoomSensitivity: 0, //设置为0无法缩放
panSensitivity: 0, //设置为0无法平移
autoRotate: false, //自动旋转
},
},
series: series,
}; };
option && myChart.setOption(option); 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) => {
return item.data.name + ":" + item.data.value + "%" + "";
},
},
labelLine: {
length: 50,
length2: 30,
lineStyle: {
color: "#ffffff",
width: 1.5,
},
},
startAngle: 350, //起始角度，支持范围[0, 360]。 //重要
clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
radius: ["25%", "50%"],
center: ["50%", "50%"],
data: this.oreProportionListData.proportionData,
itemStyle: {
opacity: 0,
},
top: "10%",
avoidLabelOverlap: true, //防止标签重叠
});
chartPanel.setOption(option);
}, },
//报警路障申报统计 //报警路障申报统计
echarts6Fn(){ echarts6Fn(){
echarts.init(document.getElementById('echarts6View')).dispose();
var myChart = echarts.init(document.getElementById('echarts6View')); var myChart = echarts.init(document.getElementById('echarts6View'));
var option = { var option = {
tooltip: { tooltip: {
...@@ -758,11 +1321,18 @@ export default { ...@@ -758,11 +1321,18 @@ export default {
}, },
//卸货点卸货量统计 //卸货点卸货量统计
echarts7Fn(){ echarts7Fn(){
echarts.init(document.getElementById('echarts7View')).dispose();
var myChart = echarts.init(document.getElementById('echarts7View')); var myChart = echarts.init(document.getElementById('echarts7View'));
var option = { var option = {
tooltip: { tooltip: {
trigger: 'axis', trigger: 'axis',
}, },
grid: {
left: '3%',
right: '8%',
bottom: '20%',
containLabel: true
},
xAxis: [ xAxis: [
{ {
type: 'category', type: 'category',
...@@ -808,10 +1378,12 @@ export default { ...@@ -808,10 +1378,12 @@ export default {
data: this.echarts7Data.outputNum, data: this.echarts7Data.outputNum,
barWidth: 10, barWidth: 10,
itemStyle: { itemStyle: {
normal: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
color: '#09EDFB' { offset: 0, color: '#00B7FF' },
} { offset: 1, color: '#2244AC' }
} ])
},
} }
] ]
}; };
...@@ -853,13 +1425,17 @@ export default { ...@@ -853,13 +1425,17 @@ export default {
this.currentTime.year = currentFormatDate; this.currentTime.year = currentFormatDate;
}, },
}, },
beforeDestroy() {
if(this.dataAnalysisTimer) {
clearInterval(this.dataAnalysisTimer);
}
},
} }
</script> </script>
<style scoped> <style scoped>
.dataAnalysisScrView{ .dataAnalysisScrView{
position: absolute; position: absolute;
z-index: 1;
width: 100%; width: 100%;
height: 100%; height: 100%;
overflow: hidden; overflow: hidden;
...@@ -869,15 +1445,12 @@ export default { ...@@ -869,15 +1445,12 @@ export default {
.dataAnalysisScrView_leftView{ .dataAnalysisScrView_leftView{
height: 100%; height: 100%;
width: 20%; width: 20%;
} z-index: 3;
.dataAnalysisScrView_centerView{
height: 100%;
width: 60%;
position: relative;
} }
.dataAnalysisScrView_rightView{ .dataAnalysisScrView_rightView{
height: 100%; height: 100%;
width: 20%; width: 20%;
z-index: 3;
} }
.dataAnalysisScrView_leftView>div{ .dataAnalysisScrView_leftView>div{
width: 100%; width: 100%;
...@@ -978,21 +1551,16 @@ dd>div{ ...@@ -978,21 +1551,16 @@ dd>div{
border-radius: 5px; border-radius: 5px;
cursor: pointer; cursor: pointer;
} }
#echarts1View{ #echarts1View{
position: absolute; position: absolute;
left: -5vh; left: -10vh;
width: 100%; top: -7vh;
height: 19vh; width: 120%;
height: 27vh;
} }
.outputRankView{ .outputRankView{
width: 100%; width: 100%;
height: 18.5vh; height: 18.5vh;
overflow-y:auto;
scrollbar-width: none;
}
.outputRankView::-webkit-scrollbar {
display: none;
} }
.l-left{ .l-left{
font-size:16px; font-size:16px;
...@@ -1007,9 +1575,6 @@ dd>div{ ...@@ -1007,9 +1575,6 @@ dd>div{
.el-progress{ .el-progress{
width: 70%; width: 70%;
} }
.outputRankView >>> .el-progress__text{
color:white;
}
#echarts2View{ #echarts2View{
position: absolute; position: absolute;
left: 0vh; left: 0vh;
......
src/views/MLargeScreen/components/dataScreening/index.vue
View file @ fcbbe8e9
...@@ -6,16 +6,37 @@ ...@@ -6,16 +6,37 @@
<div class="dataScrView_leftView_title">采区产量统计</div> <div class="dataScrView_leftView_title">采区产量统计</div>
<div class="dataScrView_leftView_content"> <div class="dataScrView_leftView_content">
<div class="dataScrView_leftView_content_view1"> <div class="dataScrView_leftView_content_view1">
<el-progress type="circle" :percentage="outputMineData.day.rate" :stroke-width="7" :width="60" :height="60"></el-progress> <div class="dataScrView_leftView_content_view1_son1">{{parseInt(outputMineData.day.eff)}}%</div>
<div style="color:white;margin-left:15px;">当前日产量：<span style="color:#02F7EF;">{{outputMineData.day.output}}吨</span></div> <div style="color:white;margin-left:15px;font-size: 16px;">
<div>日产量</div>
<div class="outside-div1">
<div v-for="(item,index) in parseInt(parseInt(outputMineData.day.eff) / 10)" :key="index" class="inside-div1"></div>
</div>
当前日产量：
<span style="color:#02F7EF;">{{outputMineData.day.finish}}吨</span>
</div>
</div> </div>
<div class="dataScrView_leftView_content_view1"> <div class="dataScrView_leftView_content_view1">
<el-progress type="circle" :percentage="outputMineData.month.rate" :stroke-width="7" :width="60" :height="60"></el-progress> <div class="dataScrView_leftView_content_view1_son1">{{parseInt(outputMineData.month.eff)}}%</div>
<div style="color:white;margin-left:15px;">当前月产量：<span style="color:#02F7EF;">{{outputMineData.month.output}}吨</span></div> <div style="color:white;margin-left:15px;font-size: 16px;">
<div>月产量</div>
<div class="outside-div1">
<div v-for="(item,index) in parseInt(parseInt(outputMineData.month.eff) / 10)" :key="index" class="inside-div1"></div>
</div>
当前月产量：
<span style="color:#02F7EF;">{{outputMineData.month.finish}}吨</span>
</div>
</div> </div>
<div class="dataScrView_leftView_content_view1"> <div class="dataScrView_leftView_content_view1">
<el-progress type="circle" :percentage="outputMineData.year.rate" :stroke-width="7" :width="60" :height="60"></el-progress> <div class="dataScrView_leftView_content_view1_son1">{{parseInt(outputMineData.year.eff)}}%</div>
<div style="color:white;margin-left:15px;">当前年产量：<span style="color:#02F7EF;">{{outputMineData.year.output}}吨</span></div> <div style="color:white;margin-left:15px;font-size: 16px;">
<div>年产量</div>
<div class="outside-div1">
<div v-for="(item,index) in parseInt(parseInt(outputMineData.year.eff) / 10)" :key="index" class="inside-div1"></div>
</div>
当前年产量：
<span style="color:#02F7EF;">{{outputMineData.year.finish}}吨</span>
</div>
</div> </div>
</div> </div>
</div> </div>
...@@ -81,40 +102,7 @@ ...@@ -81,40 +102,7 @@
<div :class="truckRankListData.selectFieldText == 'yunzai' ? '' : 'selectFieldStyle' " @click="truckChangeField('yunzai')">运载量</div> <div :class="truckRankListData.selectFieldText == 'yunzai' ? '' : 'selectFieldStyle' " @click="truckChangeField('yunzai')">运载量</div>
<div :class="truckRankListData.selectFieldText == 'jiedan' ? '' : 'selectFieldStyle' " @click="truckChangeField('jiedan')">接单数</div> <div :class="truckRankListData.selectFieldText == 'jiedan' ? '' : 'selectFieldStyle' " @click="truckChangeField('jiedan')">接单数</div>
</div> </div>
<div class="dataScrView_leftView_content_views3"> <div class="dataScrView_leftView_content_views3" id="dataScrView_leftView_content_views3_1"></div>
<div v-if="truckRankListData.selectFieldText == 'juli'">
<div v-for="(item,index) in truckRankListData.listData" :key="index">
<div style="color:#1DF9FC;">{{index + 1}}</div>
<div style="color:#BCF0FE;">{{item.name}}</div>
<div style="color:#1AC9FF;">{{item.juli}}KM</div>
<div style="color:#BCF0FE;">{{item.createTime}}</div>
</div>
</div>
<div v-if="truckRankListData.selectFieldText == 'time'">
<div v-for="(item,index) in truckRankListData.listData" :key="index">
<div style="color:#1DF9FC;">{{index + 1}}</div>
<div style="color:#BCF0FE;">{{item.name}}</div>
<div style="color:#1AC9FF;">{{item.time}}H</div>
<div style="color:#BCF0FE;">{{item.createTime}}</div>
</div>
</div>
<div v-if="truckRankListData.selectFieldText == 'yunzai'">
<div v-for="(item,index) in truckRankListData.listData" :key="index">
<div style="color:#1DF9FC;">{{index + 1}}</div>
<div style="color:#BCF0FE;">{{item.name}}</div>
<div style="color:#1AC9FF;">{{item.yunzai}}</div>
<div style="color:#BCF0FE;">{{item.createTime}}</div>
</div>
</div>
<div v-if="truckRankListData.selectFieldText == 'jiedan'">
<div v-for="(item,index) in truckRankListData.listData" :key="index">
<div style="color:#1DF9FC;">{{index + 1}}</div>
<div style="color:#BCF0FE;">{{item.name}}</div>
<div style="color:#1AC9FF;">{{item.jiedan}}</div>
<div style="color:#BCF0FE;">{{item.createTime}}</div>
</div>
</div>
</div>
</div> </div>
</div> </div>
<!-- 铲车司机排行榜--> <!-- 铲车司机排行榜-->
...@@ -130,33 +118,36 @@ ...@@ -130,33 +118,36 @@
<div class="dataScrView_leftView_content"> <div class="dataScrView_leftView_content">
<div class="dataScrView_leftView_content_views2"> <div class="dataScrView_leftView_content_views2">
<div :class="forkLiftRankListData.selectFieldText == 'time' ? '' : 'selectFieldStyle' " @click="forkLiftChangeField('time')">工作时长</div> <div :class="forkLiftRankListData.selectFieldText == 'time' ? '' : 'selectFieldStyle' " @click="forkLiftChangeField('time')">工作时长</div>
<div :class="forkLiftRankListData.selectFieldText == 'average' ? '' : 'selectFieldStyle' " @click="forkLiftChangeField('average')">平均时长</div>
<div :class="forkLiftRankListData.selectFieldText == 'yunzai' ? '' : 'selectFieldStyle' " @click="forkLiftChangeField('yunzai')">装车量</div> <div :class="forkLiftRankListData.selectFieldText == 'yunzai' ? '' : 'selectFieldStyle' " @click="forkLiftChangeField('yunzai')">装车量</div>
<div :class="forkLiftRankListData.selectFieldText == 'jiedan' ? '' : 'selectFieldStyle' " @click="forkLiftChangeField('jiedan')">装车数</div> <div :class="forkLiftRankListData.selectFieldText == 'jiedan' ? '' : 'selectFieldStyle' " @click="forkLiftChangeField('jiedan')">装车数</div>
</div> </div>
<div class="dataScrView_leftView_content_views3"> <div class="dataScrView_leftView_content_views3" v-if="forkLiftRankListData.selectFieldText == 'time'">
<div v-if="forkLiftRankListData.selectFieldText == 'time'"> <div v-for="(item,index) in forkLiftRankListData.listData" :key="index" :class="'forkliftRank' + (index + 1)">
<div v-for="(item,index) in forkLiftRankListData.listData" :key="index"> <div style="color:#BCF0FE;">{{item.driver}}</div>
<div style="color:#1DF9FC;">{{index + 1}}</div> <div style="color:#1AC9FF;">{{item.time}}h</div>
<div style="color:#BCF0FE;">{{item.name}}</div> <div style="color:#BCF0FE;">{{item.createTime}}</div>
<div style="color:#1AC9FF;">{{item.time}}H</div>
<div style="color:#BCF0FE;">{{item.createTime}}</div>
</div>
</div> </div>
<div v-if="forkLiftRankListData.selectFieldText == 'yunzai'"> </div>
<div v-for="(item,index) in forkLiftRankListData.listData" :key="index"> <div class="dataScrView_leftView_content_views3" v-if="forkLiftRankListData.selectFieldText == 'average'">
<div style="color:#1DF9FC;">{{index + 1}}</div> <div v-for="(item,index) in forkLiftRankListData.listData" :key="index" :class="'forkliftRank' + (index + 1)">
<div style="color:#BCF0FE;">{{item.name}}</div> <div style="color:#BCF0FE;">{{item.driver}}</div>
<div style="color:#1AC9FF;">{{item.yunzai}}</div> <div style="color:#1AC9FF;">{{item.average}}h</div>
<div style="color:#BCF0FE;">{{item.createTime}}</div> <div style="color:#BCF0FE;">{{item.createTime}}</div>
</div>
</div> </div>
<div v-if="forkLiftRankListData.selectFieldText == 'jiedan'"> </div>
<div v-for="(item,index) in forkLiftRankListData.listData" :key="index"> <div class="dataScrView_leftView_content_views3" v-if="forkLiftRankListData.selectFieldText == 'yunzai'">
<div style="color:#1DF9FC;">{{index + 1}}</div> <div v-for="(item,index) in forkLiftRankListData.listData" :key="index" :class="'forkliftRank' + (index + 1)">
<div style="color:#BCF0FE;">{{item.name}}</div> <div style="color:#BCF0FE;">{{item.driver}}</div>
<div style="color:#1AC9FF;">{{item.jiedan}}</div> <div style="color:#1AC9FF;">{{item.yunzai}}吨</div>
<div style="color:#BCF0FE;">{{item.createTime}}</div> <div style="color:#BCF0FE;">{{item.createTime}}</div>
</div> </div>
</div>
<div class="dataScrView_leftView_content_views3" v-if="forkLiftRankListData.selectFieldText == 'jiedan'">
<div v-for="(item,index) in forkLiftRankListData.listData" :key="index" :class="'forkliftRank' + (index + 1)">
<div style="color:#BCF0FE;">{{item.driver}}</div>
<div style="color:#1AC9FF;">{{item.jiedan}}辆</div>
<div style="color:#BCF0FE;">{{item.createTime}}</div>
</div> </div>
</div> </div>
</div> </div>
...@@ -169,50 +160,124 @@ ...@@ -169,50 +160,124 @@
<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 :class="centerViewData.moduleText == 'centerModule3' ? 'centerModuleSelectStyle' : ''" @click="centerSelectFn('centerModule3')">装载数据</div>
</div> </div>
<div class="dataScrView_centerView_planNum"> <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.dayPlan}}吨</div> <div style="color:#00E9FD;font-size:16px;font-weight:600;">{{outputMineData.day.plan}}吨</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.output}}吨</div> <div style="color:#00E9FD;font-size:16px;font-weight:600;">{{outputMineData.day.finish}}吨</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;">{{outputMineData.day.rate}}%</div> <div style="color:#00E9FD;font-size:16px;font-weight:600;">{{parseInt(outputMineData.day.eff)}}%</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.dayPlan}}吨</div> <div style="color:#00E9FD;font-size:16px;font-weight:600;">{{outputMineData.month.plan}}吨</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.output}}吨</div> <div style="color:#00E9FD;font-size:16px;font-weight:600;">{{outputMineData.month.finish}}吨</div>
</div>
<img src="../../../../assets/images/cutGraph/zichantongji1.png">
</div>
<div>
<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>
<img src="../../../../assets/images/cutGraph/wanchenglv1.png">
</div>
</div>
<div class="dataScrView_centerView_planNum" v-if="centerViewData.moduleText == 'centerModule2'">
<div>
<div>
<div style="color:#FFFFFF;font-size:14px;">今日总运载量</div>
<div style="color:#00E9FD;font-size:16px;font-weight:600;">{{carryCenterData.dayAllCarry1}}吨</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;">{{carryCenterData.dayAverageCarry1}}吨/小时</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;">{{carryCenterData.dayAllMil1}}KM</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;">{{carryCenterData.dayAllCarNum}}辆</div>
</div>
<img src="../../../../assets/images/cutGraph/jihuarenwu2.png">
</div>
<div>
<div>
<div style="color:#FFFFFF;font-size:14px;">单次运载平均时长</div>
<div style="color:#00E9FD;font-size:16px;font-weight:600;">{{carryCenterData.singleAverageTime}}H</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;">{{outputMineData.month.rate}}%</div> <div style="color:#00E9FD;font-size:16px;font-weight:600;">{{carryCenterData.singleAverageMil}}KM</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_planNum" 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}}辆</div>
</div>
<img src="../../../../assets/images/cutGraph/jihuarenwu2.png">
</div>
</div>
<div id="centerEchartsView"></div> <div id="centerEchartsView"></div>
</div> </div>
</div> </div>
...@@ -302,9 +367,12 @@ ...@@ -302,9 +367,12 @@
<div class="dataScrView_rightView_content"> <div class="dataScrView_rightView_content">
<div class="realAlarmStyle"> <div class="realAlarmStyle">
<div v-for="(item,index) in realAlarmStyleData.listData" :key="index"> <div v-for="(item,index) in realAlarmStyleData.listData" :key="index">
<img src="../../../../assets/images/cutGraph/jingshikaobei1.png"> <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 style="color:#A6F6F9;margin-left:10px;">
<div>{{item.alarmexplain}}</div> <div>{{item.alarmexplain ? item.alarmexplain : item.number + item.carbreak}}</div>
<div>{{item.createTime}}</div> <div>{{item.createTime}}</div>
</div> </div>
</div> </div>
...@@ -343,9 +411,25 @@ export default { ...@@ -343,9 +411,25 @@ export default {
}, },
//产量数据以及中间图表数据 //产量数据以及中间图表数据
outputMineData:{ outputMineData:{
day:{output:'',rate:0,dayPlan:'',}, day:{finish:'0',eff:0,plan:'0',},
month:{output:'',rate:0,dayPlan:'',}, month:{finish:'0',eff:0,plan:'0',},
year:{output:'',rate:0,dayPlan:'',}, year:{finish:'0',eff:0,plan:'0',},
},
//运载数据以及中间图表数据
carryCenterData:{
dayAllCarry1:0,
dayAverageCarry1:0,
dayAllMil1:0,
dayAllCarNum:0,
singleAverageTime:0,
singleAverageMil:0,
},
//装载数据据以及中间图表数据
loadCenterData:{
dayAllLoad1:0,
dayAverageLoad1:0,
dayAllTime:0,
dayLoadCarNum:0,
}, },
//司机信息 //司机信息
driverData:{ driverData:{
...@@ -356,11 +440,12 @@ export default { ...@@ -356,11 +440,12 @@ export default {
}, },
//卡车排行榜 //卡车排行榜
truckRankListData:{ truckRankListData:{
echartsX:'Km',
carclass:'卡车', carclass:'卡车',
selectTimeText:'day', selectTimeText:'day',
selectFieldText:'juli', selectFieldText:'juli',
listData:[], driverName:[],
selectTimeDate:'', driverSeriesData:[],
}, },
//铲车排行榜 //铲车排行榜
forkLiftRankListData:{ forkLiftRankListData:{
...@@ -368,13 +453,12 @@ export default { ...@@ -368,13 +453,12 @@ export default {
selectTimeText:'day', selectTimeText:'day',
selectFieldText:'time', selectFieldText:'time',
listData:[], listData:[],
selectTimeDate:'',
}, },
//中间模块选择 //中间模块选择
centerViewData:{ centerViewData:{
moduleText:'centerModule1', moduleText:'centerModule1',
xAxisData:['7:00', '8:00', '9:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00'], xAxisData:['7:00', '8:00', '9:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00'],
seriesData:[10, 52, 200, 334, 390, 330, 220,10, 52, 200, 334, 390, 330], seriesData:[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
}, },
//天气数据 //天气数据
weatherData:{ weatherData:{
...@@ -394,41 +478,16 @@ export default { ...@@ -394,41 +478,16 @@ export default {
}, },
//矿石开采效率 //矿石开采效率
exploitationEfficiencyData:{ exploitationEfficiencyData:{
rate1:[0.5], rate1:[0.4],
dayYield1:1000, dayYield1:51,
dayMil1:300, dayMil1:32,
rate2:[0.5], rate2:[0.2],
dayWorkTime2:1000, dayWorkTime2:8,
dayYield2:300, dayYield2:51,
}, },
//实时报警 //实时报警
realAlarmStyleData:{ realAlarmStyleData:{
listData:[ listData:[],
{
content:'运载区入口处有不明障碍物体在路口',
time:'2021-10-19 12:23',
},
{
content:'运载区入口处有不明障碍物体在路口',
time:'2021-10-19 12:23',
},
{
content:'运载区入口处有不明障碍物体在路口',
time:'2021-10-19 12:23',
},
{
content:'运载区入口处有不明障碍物体在路口',
time:'2021-10-19 12:23',
},
{
content:'运载区入口处有不明障碍物体在路口',
time:'2021-10-19 12:23',
},
{
content:'运载区入口处有不明障碍物体在路口',
time:'2021-10-19 12:23',
},
],
} }
} }
}, },
...@@ -442,70 +501,76 @@ export default { ...@@ -442,70 +501,76 @@ export default {
this.$nextTick(()=>{ this.$nextTick(()=>{
//获取采区当前日产量 //获取采区当前日产量
HttpReq.truckDispatching.caiquAreaQueryDay({size:1,createTime:this.currentTime.day}).then((res) => { HttpReq.truckDispatching.caiquAreaQueryDay().then((res) => {
if(res.code == 200){ let undueArray = {};
let undueArray = {}; if(res.length == 0 || JSON.stringify(res[0]) == '{}'){
if(res.data.totalElements == 0){ undueArray.eff = 0;
undueArray.rate = 0; undueArray.finish = 0;
undueArray.output = 0; undueArray.plan = 0;
undueArray.dayPlan = 0; }else{
if(res[0].eff == ''){
undueArray.eff = 0;
undueArray.finish = res[0].finish;
undueArray.plan = res[0].plan;
}else if(res[0].eff >= 1){
undueArray.eff = 100;
undueArray.finish = res[0].finish;
undueArray.plan = res[0].plan;
}else{ }else{
if(res.data.content[0].rate == ''){ undueArray.eff = parseFloat(res[0].eff) * 100;
undueArray.rate = 0; undueArray.finish = res[0].finish;
undueArray.output = res.data.content[0].output; undueArray.plan = res[0].plan;
undueArray.dayPlan = res.data.content[0].dayPlan;
}else{
undueArray.rate = parseFloat(res.data.content[0].rate) * 100;
undueArray.output = res.data.content[0].output;
undueArray.dayPlan = res.data.content[0].dayPlan;
}
} }
this.outputMineData.day = undueArray;
} }
this.outputMineData.day = undueArray;
}) })
//获取采区当前月产量 //获取采区当前月产量
HttpReq.truckDispatching.caiquAreaQueryMonth({size:1,createTime:this.currentTime.month}).then((res) => { HttpReq.truckDispatching.caiquAreaQueryMonth().then((res) => {
if(res.code == 200){ let undueArray = {};
let undueArray = {}; if(res.length == 0 || JSON.stringify(res[0]) == '{}'){
if(res.data.totalElements == 0){ undueArray.eff = 0;
undueArray.rate = 0; undueArray.finish = 0;
undueArray.output = 0; undueArray.plan = 0;
undueArray.dayPlan = 0; }else{
if(res[0].eff == ''){
undueArray.eff = 0;
undueArray.finish = res[0].finish;
undueArray.plan = res[0].plan;
}else if(res[0].eff >= 1){
undueArray.eff = 100;
undueArray.finish = res[0].finish;
undueArray.plan = res[0].plan;
}else{ }else{
if(res.data.content[0].rate == ''){ undueArray.eff = parseFloat(res[0].eff) * 100;
undueArray.rate = 0; undueArray.finish = res[0].finish;
undueArray.output = res.data.content[0].output; undueArray.plan = res[0].plan;
undueArray.dayPlan = res.data.content[0].dayPlan;
}else{
undueArray.rate = parseFloat(res.data.content[0].rate) * 100;
undueArray.output = res.data.content[0].output;
undueArray.dayPlan = res.data.content[0].dayPlan;
}
} }
this.outputMineData.month = undueArray;
} }
this.outputMineData.month = undueArray;
}) })
//获取采区当前年产量 //获取采区当前年产量
HttpReq.truckDispatching.caiquAreaQueryYear({size:1,createTime:this.currentTime.year}).then((res) => { HttpReq.truckDispatching.caiquAreaQueryYear().then((res) => {
if(res.code == 200){ let undueArray = {};
let undueArray = {}; if(res.length == 0 || JSON.stringify(res[0]) == '{}'){
if(res.data.totalElements == 0){ undueArray.eff = 0;
undueArray.rate = 0; undueArray.finish = 0;
undueArray.output = 0; undueArray.plan = 0;
undueArray.dayPlan = 0; }else{
if(res[0].eff == ''){
undueArray.eff = 0;
undueArray.finish = res[0].finish;
undueArray.plan = res[0].plan;
}else if(res[0].eff >= 1){
undueArray.eff = 100;
undueArray.finish = res[0].finish;
undueArray.plan = res[0].plan;
}else{ }else{
if(res.data.content[0].rate == ''){ undueArray.eff = parseFloat(res[0].eff) * 100;
undueArray.rate = 0; undueArray.finish = res[0].finish;
undueArray.output = res.data.content[0].output; undueArray.plan = res[0].plan;
undueArray.dayPlan = res.data.content[0].dayPlan;
}else{
undueArray.rate = parseFloat(res.data.content[0].rate) * 100;
undueArray.output = res.data.content[0].output;
undueArray.dayPlan = res.data.content[0].dayPlan;
}
} }
this.outputMineData.year = undueArray;
} }
this.outputMineData.year = undueArray;
}) })
//获取司机信息 //获取司机信息
HttpReq.truckDispatching.screenDriverInformationQuery({size:9999}).then((res) => { HttpReq.truckDispatching.screenDriverInformationQuery({size:9999}).then((res) => {
...@@ -527,35 +592,98 @@ export default { ...@@ -527,35 +592,98 @@ export default {
} }
}) })
//获取卡车排行榜 //获取卡车排行榜
this.truckRankListData.selectTimeDate = this.currentTime.day;
let truckQuery1 = {}; let truckQuery1 = {};
truckQuery1.size = 5; truckQuery1.size = 5;
truckQuery1.sort = this.truckRankListData.selectFieldText + ',desc'; truckQuery1.sort = this.truckRankListData.selectFieldText + ',desc';
truckQuery1.carclass = this.truckRankListData.carclass; truckQuery1.carclass = this.truckRankListData.carclass;
truckQuery1.createTime = this.truckRankListData.selectTimeDate;
this.$nextTick(()=>{ this.$nextTick(()=>{
HttpReq.truckDispatching.screenDriverInformationQuery(truckQuery1).then((res) => { if(this.truckRankListData.selectTimeText == 'day'){
if(res.code == 200){ HttpReq.truckDispatching.kaChanRankListDayQuery(truckQuery1).then((res) => {
this.truckRankListData.listData = res.data.content; let arr1 = [];
} let arr2 = [];
}) res.forEach((item,index)=>{
arr1.push(item.driver);
arr2.push(item[this.truckRankListData.selectFieldText]);
})
this.truckRankListData.driverName = arr1.reverse();
this.truckRankListData.driverSeriesData = arr2.reverse();
this.truckChangeEcharts();
})
}else if(this.truckRankListData.selectTimeText == 'week'){
HttpReq.truckDispatching.kaChanRankListZhouQuery(truckQuery1).then((res) => {
let arr1 = [];
let arr2 = [];
res.forEach((item,index)=>{
arr1.push(item.driver);
arr2.push(item[this.truckRankListData.selectFieldText]);
})
this.truckRankListData.driverName = arr1.reverse();
this.truckRankListData.driverSeriesData = arr2.reverse();
this.truckChangeEcharts();
})
}else if(this.truckRankListData.selectTimeText == 'month'){
HttpReq.truckDispatching.kaChanRankListMouQuery(truckQuery1).then((res) => {
let arr1 = [];
let arr2 = [];
res.forEach((item,index)=>{
arr1.push(item.driver);
arr2.push(item[this.truckRankListData.selectFieldText]);
})
this.truckRankListData.driverName = arr1.reverse();
this.truckRankListData.driverSeriesData = arr2.reverse();
this.truckChangeEcharts();
})
}
}) })
//获取铲车排行榜 //获取铲车排行榜
this.forkLiftRankListData.selectTimeDate = this.currentTime.day;
let forkLiftQuery1 = {}; let forkLiftQuery1 = {};
forkLiftQuery1.size = 5; forkLiftQuery1.size = 5;
forkLiftQuery1.sort = this.forkLiftRankListData.selectFieldText + ',desc'; forkLiftQuery1.sort = this.forkLiftRankListData.selectFieldText + ',desc';
forkLiftQuery1.carclass = this.forkLiftRankListData.carclass; forkLiftQuery1.carclass = this.forkLiftRankListData.carclass;
forkLiftQuery1.createTime = this.forkLiftRankListData.selectTimeDate;
this.$nextTick(()=>{ this.$nextTick(()=>{
HttpReq.truckDispatching.screenDriverInformationQuery(forkLiftQuery1).then((res) => { if(this.forkLiftRankListData.selectTimeText == 'day'){
if(res.code == 200){ HttpReq.truckDispatching.kaChanRankListDayQuery(forkLiftQuery1).then((res) => {
this.forkLiftRankListData.listData = res.data.content; this.forkLiftRankListData.listData = res;
} })
}) }else if(this.forkLiftRankListData.selectTimeText == 'week'){
HttpReq.truckDispatching.kaChanRankListZhouQuery(forkLiftQuery1).then((res) => {
this.forkLiftRankListData.listData = res;
})
}else if(this.forkLiftRankListData.selectTimeText == 'month'){
HttpReq.truckDispatching.kaChanRankListMouQuery(forkLiftQuery1).then((res) => {
this.forkLiftRankListData.listData = res;
})
}
}) })
//中间echarts图表 //中间echarts图表
this.centerEcharts(); 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 = arr3;
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 = 0;
this.carryCenterData.dayAllCarNum = res[0].num;
this.carryCenterData.singleAverageTime = parseFloat(res[0].time).toFixed(2);
this.carryCenterData.singleAverageMil = 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;
}
})
//获取天气 //获取天气
HttpReq.truckDispatching.getWeatherInforQuery({cityName:'济南'}).then((res) => { HttpReq.truckDispatching.getWeatherInforQuery({cityName:'济南'}).then((res) => {
if(res.code == 200){ if(res.code == 200){
...@@ -582,17 +710,240 @@ export default { ...@@ -582,17 +710,240 @@ export default {
this.initLiquidEchart1(); this.initLiquidEchart1();
this.initLiquidEchart2(); this.initLiquidEchart2();
//实时报警 //实时报警
HttpReq.truckDispatching.callPoliceQuery({status:1}).then((res) => { HttpReq.truckDispatching.callPoliceQuery({status:1,size:9999}).then((res) => {
if(res.code == 200){ if(res.code == 200){
this.realAlarmStyleData.listData = res.data.content; 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.dataScreeningTimer = setInterval(() => { this.dataScreeningTimer = setInterval(() => {
//获取采区当前日产量
HttpReq.truckDispatching.caiquAreaQueryDay().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 if(res[0].eff >= 1){
undueArray.eff = 100;
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.caiquAreaQueryMonth().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 if(res[0].eff >= 1){
undueArray.eff = 100;
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.caiquAreaQueryYear().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 if(res[0].eff >= 1){
undueArray.eff = 100;
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;
})
//获取司机信息
HttpReq.truckDispatching.screenDriverInformationQuery({size:9999}).then((res) => {
if(res.code == 200){
//司机信息处理
let workerTemporary = [];
let restTemporary = [];
res.data.content.forEach((item) => {
if(item.status == 1){
workerTemporary.push(item);
}else{
restTemporary.push(item);
}
});
this.driverData.totalNumber = res.data.totalElements;
this.driverData.driverTableData = workerTemporary;
this.driverData.workersNumber = workerTemporary.length;
this.driverData.restNumber = restTemporary.length;
}
})
//获取卡车排行榜
let truckQuery1 = {};
truckQuery1.size = 5;
truckQuery1.sort = this.truckRankListData.selectFieldText + ',desc';
truckQuery1.carclass = this.truckRankListData.carclass;
this.$nextTick(()=>{
if(this.truckRankListData.selectTimeText == 'day'){
HttpReq.truckDispatching.kaChanRankListDayQuery(truckQuery1).then((res) => {
let arr1 = [];
let arr2 = [];
res.forEach((item,index)=>{
arr1.push(item.driver);
arr2.push(item[this.truckRankListData.selectFieldText]);
})
this.truckRankListData.driverName = arr1.reverse();
this.truckRankListData.driverSeriesData = arr2.reverse();
this.truckChangeEcharts();
})
}else if(this.truckRankListData.selectTimeText == 'week'){
HttpReq.truckDispatching.kaChanRankListZhouQuery(truckQuery1).then((res) => {
let arr1 = [];
let arr2 = [];
res.forEach((item,index)=>{
arr1.push(item.driver);
arr2.push(item[this.truckRankListData.selectFieldText]);
})
this.truckRankListData.driverName = arr1.reverse();
this.truckRankListData.driverSeriesData = arr2.reverse();
this.truckChangeEcharts();
})
}else if(this.truckRankListData.selectTimeText == 'month'){
HttpReq.truckDispatching.kaChanRankListMouQuery(truckQuery1).then((res) => {
let arr1 = [];
let arr2 = [];
res.forEach((item,index)=>{
arr1.push(item.driver);
arr2.push(item[this.truckRankListData.selectFieldText]);
})
this.truckRankListData.driverName = arr1.reverse();
this.truckRankListData.driverSeriesData = arr2.reverse();
this.truckChangeEcharts();
})
}
})
//获取铲车排行榜
let forkLiftQuery1 = {};
forkLiftQuery1.size = 5;
forkLiftQuery1.sort = this.forkLiftRankListData.selectFieldText + ',desc';
forkLiftQuery1.carclass = this.forkLiftRankListData.carclass;
this.$nextTick(()=>{
if(this.forkLiftRankListData.selectTimeText == 'day'){
HttpReq.truckDispatching.kaChanRankListDayQuery(forkLiftQuery1).then((res) => {
this.forkLiftRankListData.listData = res;
})
}else if(this.forkLiftRankListData.selectTimeText == 'week'){
HttpReq.truckDispatching.kaChanRankListZhouQuery(forkLiftQuery1).then((res) => {
this.forkLiftRankListData.listData = res;
})
}else if(this.forkLiftRankListData.selectTimeText == 'month'){
HttpReq.truckDispatching.kaChanRankListMouQuery(forkLiftQuery1).then((res) => {
this.forkLiftRankListData.listData = res;
})
}
})
//中间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 = arr3;
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 = 0;
this.carryCenterData.dayAllCarNum = res[0].num;
this.carryCenterData.singleAverageTime = parseFloat(res[0].time).toFixed(2);
this.carryCenterData.singleAverageMil = 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;
}
})
//获取天气
HttpReq.truckDispatching.getWeatherInforQuery({cityName:'济南'}).then((res) => {
if(res.code == 200){
let data1 = JSON.parse(res.msg).data.forecast;
this.weatherData.forecastData = data1;
this.weatherData.today = data1[0];
}
})
//车辆工时
HttpReq.truckDispatching.carWorkInforQuery({riqi:this.currentTime.day}).then((res) => {
if(res.code == 200){
if(res.data.totalElements == 0){
this.carWorkTimeData.listData = [
{cartype:'卡车',gongshi:0,xianzhi:0},
{cartype:'铲车',gongshi:0,xianzhi:0},
{cartype:'其他车辆',gongshi:0,xianzhi:0},
];
}else{
this.carWorkTimeData.listData = res.data.content;
}
}
})
//矿石开采效率
this.initLiquidEchart1();
this.initLiquidEchart2();
//实时报警
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) }, 10000)
}) })
}else{ }else{
if(this.dataScreeningTimer) { if(this.dataScreeningTimer) {
...@@ -605,14 +956,46 @@ export default { ...@@ -605,14 +956,46 @@ export default {
//卡车切换时间 //卡车切换时间
truckChangeTime(text){ truckChangeTime(text){
this.truckRankListData.selectTimeText = text; this.truckRankListData.selectTimeText = text;
let truckQuery1 = {};
truckQuery1.size = 5;
truckQuery1.sort = this.truckRankListData.selectFieldText + ',desc';
truckQuery1.carclass = this.truckRankListData.carclass;
if(text == 'day'){ if(text == 'day'){
this.truckRankListData.selectTimeDate = this.currentTime.day; HttpReq.truckDispatching.kaChanRankListDayQuery(truckQuery1).then((res) => {
} let arr1 = [];
if(text == 'month'){ let arr2 = [];
this.truckRankListData.selectTimeDate = this.currentTime.month; res.forEach((item,index)=>{
} arr1.push(item.driver);
if(text == 'year'){ arr2.push(item[this.truckRankListData.selectFieldText]);
this.truckRankListData.selectTimeDate = this.currentTime.year; })
this.truckRankListData.driverName = arr1.reverse();
this.truckRankListData.driverSeriesData = arr2.reverse();
this.truckChangeEcharts();
})
}else if(text == 'week'){
HttpReq.truckDispatching.kaChanRankListZhouQuery(truckQuery1).then((res) => {
let arr1 = [];
let arr2 = [];
res.forEach((item,index)=>{
arr1.push(item.driver);
arr2.push(item[this.truckRankListData.selectFieldText]);
})
this.truckRankListData.driverName = arr1.reverse();
this.truckRankListData.driverSeriesData = arr2.reverse();
this.truckChangeEcharts();
})
}else if(text == 'month'){
HttpReq.truckDispatching.kaChanRankListMouQuery(truckQuery1).then((res) => {
let arr1 = [];
let arr2 = [];
res.forEach((item,index)=>{
arr1.push(item.driver);
arr2.push(item[this.truckRankListData.selectFieldText]);
})
this.truckRankListData.driverName = arr1.reverse();
this.truckRankListData.driverSeriesData = arr2.reverse();
this.truckChangeEcharts();
})
} }
}, },
//卡车切换字段排序 //卡车切换字段排序
...@@ -622,26 +1005,145 @@ export default { ...@@ -622,26 +1005,145 @@ export default {
truckQuery1.size = 5; truckQuery1.size = 5;
truckQuery1.sort = this.truckRankListData.selectFieldText + ',desc'; truckQuery1.sort = this.truckRankListData.selectFieldText + ',desc';
truckQuery1.carclass = this.truckRankListData.carclass; truckQuery1.carclass = this.truckRankListData.carclass;
truckQuery1.createTime = this.truckRankListData.selectTimeDate; if(text == 'juli'){
this.truckRankListData.echartsX = 'km';
}else if(text == 'time'){
this.truckRankListData.echartsX = 'H';
}else if(text == 'yunzai'){
this.truckRankListData.echartsX = '吨';
}else if(text == 'jiedan'){
this.truckRankListData.echartsX = '次';
}
this.$nextTick(()=>{ this.$nextTick(()=>{
HttpReq.truckDispatching.screenDriverInformationQuery(truckQuery1).then((res) => { if(this.truckRankListData.selectTimeText == 'day'){
if(res.code == 200){ HttpReq.truckDispatching.kaChanRankListDayQuery(truckQuery1).then((res) => {
this.truckRankListData.listData = res.data.content; let arr1 = [];
} let arr2 = [];
}) res.forEach((item,index)=>{
arr1.push(item.driver);
arr2.push(item[this.truckRankListData.selectFieldText]);
})
this.truckRankListData.driverName = arr1.reverse();
this.truckRankListData.driverSeriesData = arr2.reverse();
this.truckChangeEcharts();
})
}else if(this.truckRankListData.selectTimeText == 'week'){
HttpReq.truckDispatching.kaChanRankListZhouQuery(truckQuery1).then((res) => {
let arr1 = [];
let arr2 = [];
res.forEach((item,index)=>{
arr1.push(item.driver);
arr2.push(item[this.truckRankListData.selectFieldText]);
})
this.truckRankListData.driverName = arr1.reverse();
this.truckRankListData.driverSeriesData = arr2.reverse();
this.truckChangeEcharts();
})
}else if(this.truckRankListData.selectTimeText == 'month'){
HttpReq.truckDispatching.kaChanRankListMouQuery(truckQuery1).then((res) => {
let arr1 = [];
let arr2 = [];
res.forEach((item,index)=>{
arr1.push(item.driver);
arr2.push(item[this.truckRankListData.selectFieldText]);
})
this.truckRankListData.driverName = arr1.reverse();
this.truckRankListData.driverSeriesData = arr2.reverse();
this.truckChangeEcharts();
})
}
}) })
}, },
//卡车排行榜Echarts
truckChangeEcharts(){
echarts.init(document.getElementById('dataScrView_leftView_content_views3_1')).dispose();
var myChart = echarts.init(document.getElementById('dataScrView_leftView_content_views3_1'));
var option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
grid: {
top:'22%',
left: '1%',
bottom: '-2%',
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);
},
//铲车切换时间 //铲车切换时间
forkLiftChangeTime(text){ forkLiftChangeTime(text){
this.forkLiftRankListData.selectTimeText = text; this.forkLiftRankListData.selectTimeText = text;
let forkLiftQuery1 = {};
forkLiftQuery1.size = 5;
forkLiftQuery1.sort = this.forkLiftRankListData.selectFieldText + ',desc';
forkLiftQuery1.carclass = this.forkLiftRankListData.carclass;
if(text == 'day'){ if(text == 'day'){
this.forkLiftRankListData.selectTimeDate = this.currentTime.day; HttpReq.truckDispatching.kaChanRankListDayQuery(forkLiftQuery1).then((res) => {
this.forkLiftRankListData.listData = res;
})
} }
if(text == 'month'){ if(text == 'week'){
this.forkLiftRankListData.selectTimeDate = this.currentTime.month; HttpReq.truckDispatching.kaChanRankListZhouQuery(forkLiftQuery1).then((res) => {
this.forkLiftRankListData.listData = res;
})
} }
if(text == 'year'){ if(text == 'month'){
this.forkLiftRankListData.selectTimeDate = this.currentTime.year; HttpReq.truckDispatching.kaChanRankListMouQuery(forkLiftQuery1).then((res) => {
this.forkLiftRankListData.listData = res;
})
} }
}, },
//铲车切换字段排序 //铲车切换字段排序
...@@ -651,13 +1153,20 @@ export default { ...@@ -651,13 +1153,20 @@ export default {
forkLiftQuery1.size = 5; forkLiftQuery1.size = 5;
forkLiftQuery1.sort = this.forkLiftRankListData.selectFieldText + ',desc'; forkLiftQuery1.sort = this.forkLiftRankListData.selectFieldText + ',desc';
forkLiftQuery1.carclass = this.forkLiftRankListData.carclass; forkLiftQuery1.carclass = this.forkLiftRankListData.carclass;
forkLiftQuery1.createTime = this.forkLiftRankListData.selectTimeDate;
this.$nextTick(()=>{ this.$nextTick(()=>{
HttpReq.truckDispatching.screenDriverInformationQuery(forkLiftQuery1).then((res) => { if(this.forkLiftRankListData.selectTimeText == 'day'){
if(res.code == 200){ HttpReq.truckDispatching.kaChanRankListDayQuery(forkLiftQuery1).then((res) => {
this.forkLiftRankListData.listData = res.data.content; this.forkLiftRankListData.listData = res;
} })
}) }else if(this.forkLiftRankListData.selectTimeText == 'week'){
HttpReq.truckDispatching.kaChanRankListZhouQuery(forkLiftQuery1).then((res) => {
this.forkLiftRankListData.listData = res;
})
}else if(this.forkLiftRankListData.selectTimeText == 'month'){
HttpReq.truckDispatching.kaChanRankListMouQuery(forkLiftQuery1).then((res) => {
this.forkLiftRankListData.listData = res;
})
}
}) })
}, },
//中间模块选择 //中间模块选择
...@@ -772,10 +1281,12 @@ export default { ...@@ -772,10 +1281,12 @@ export default {
this.chartsLiquid.setOption({ this.chartsLiquid.setOption({
series: [{ series: [{
type: 'liquidFill', type: 'liquidFill',
name: '比率\n' + this.exploitationEfficiencyData.rate1 * 100 + '%',
radius: '70px', radius: '70px',
data: this.exploitationEfficiencyData.rate1, data: this.exploitationEfficiencyData.rate1,
label: { label: {
normal: { normal: {
formatter: '{a}',
color: '#05ADFB', color: '#05ADFB',
insideColor: '#fff', insideColor: '#fff',
textStyle: { textStyle: {
...@@ -825,10 +1336,12 @@ export default { ...@@ -825,10 +1336,12 @@ export default {
this.chartsLiquid.setOption({ this.chartsLiquid.setOption({
series: [{ series: [{
type: 'liquidFill', type: 'liquidFill',
name: '比率\n' + this.exploitationEfficiencyData.rate2 * 100 + '%',
radius: '70px', radius: '70px',
data: this.exploitationEfficiencyData.rate2, data: this.exploitationEfficiencyData.rate2,
label: { label: {
normal: { normal: {
formatter: '{a}',
color: 'rgb(3, 254, 254)', color: 'rgb(3, 254, 254)',
insideColor: '#fff', insideColor: '#fff',
textStyle: { textStyle: {
...@@ -915,13 +1428,27 @@ export default { ...@@ -915,13 +1428,27 @@ export default {
</script> </script>
<style scoped> <style scoped>
/* 进度条样式 */
.outside-div1{
width: 15vw;
height: 20px;
border: 1px solid #91A9FF;
display: flex;
align-items: center;
}
.inside-div1{
margin-left: 0.13vw;
width: 9%;
height: 12px;
background-color: #02EEF7;
}
.el-progress__text{ .el-progress__text{
color:white; color:white;
font-weight: 600; font-weight: 600;
} }
.dataScrView{ .dataScrView{
position: absolute; position: absolute;
z-index: 1;
width: 100%; width: 100%;
height: 100%; height: 100%;
overflow: hidden; overflow: hidden;
...@@ -931,6 +1458,7 @@ export default { ...@@ -931,6 +1458,7 @@ export default {
.dataScrView_leftView{ .dataScrView_leftView{
height: 100%; height: 100%;
width: 20%; width: 20%;
z-index: 3;
} }
.dataScrView_centerView{ .dataScrView_centerView{
height: 100%; height: 100%;
...@@ -940,12 +1468,11 @@ export default { ...@@ -940,12 +1468,11 @@ export default {
.dataScrView_rightView{ .dataScrView_rightView{
height: 100%; height: 100%;
width: 20%; width: 20%;
z-index: 3;
} }
.dataScrView_leftView>div{ .dataScrView_leftView>div{
width: 100%; width: 100%;
height: 23.5vh; height: 23.5vh;
/* background:no-repeat center center url('~@/assets/images/cutGraph/yuanjianjuxing1.png');
background-size:100% 100%; */
background-color: rgba(32,42,67,0.8); background-color: rgba(32,42,67,0.8);
padding: 5px 7px; padding: 5px 7px;
box-sizing: border-box; box-sizing: border-box;
...@@ -954,8 +1481,6 @@ export default { ...@@ -954,8 +1481,6 @@ export default {
.dataScrView_rightView>div{ .dataScrView_rightView>div{
width: 100%; width: 100%;
height: 23.5vh; height: 23.5vh;
/* background:no-repeat center center url('~@/assets/images/cutGraph/yuanjianjuxing1.png');
background-size:100% 100%; */
background-color: rgba(32,42,67,0.8); background-color: rgba(32,42,67,0.8);
padding: 5px 7px; padding: 5px 7px;
box-sizing: border-box; box-sizing: border-box;
...@@ -985,6 +1510,16 @@ export default { ...@@ -985,6 +1510,16 @@ export default {
align-items: center; align-items: center;
font-size: 20px; font-size: 20px;
} }
.dataScrView_leftView_content_view1_son1{
width: 5.5vh;
height: 5.5vh;
background:no-repeat center center url('~@/assets/images/cutGraph/bilikuang.png');
background-size:100% 100%;
line-height: 5.5vh;
text-align: center;
color: white;
font-size: 16px;
}
.driverInforViewsStyle{ .driverInforViewsStyle{
width: 100%; width: 100%;
display: flex; display: flex;
...@@ -1108,14 +1643,65 @@ dd>div{ ...@@ -1108,14 +1643,65 @@ dd>div{
.dataScrView_leftView_content_views3::-webkit-scrollbar { .dataScrView_leftView_content_views3::-webkit-scrollbar {
display: none; display: none;
} }
.dataScrView_leftView_content_views3>div>div{ .forkliftRank1{
font: 18px; margin-top: 0.5vh;
font-weight: 600;
display: flex; display: flex;
justify-content: space-evenly; justify-content: space-evenly;
width: 100%;
height: 2.5vh;
line-height: 2.5vh;
background:no-repeat center center url('~@/assets/images/cutGraph/list1.png');
background-size:100% 100%;
padding-left: 4vw;
box-sizing: border-box;
}
.forkliftRank2{
margin-top: 0.5vh;
display: flex;
justify-content: space-evenly;
width: 100%;
height: 2.5vh;
line-height: 2.5vh;
background:no-repeat center center url('~@/assets/images/cutGraph/list2.png');
background-size:100% 100%;
padding-left: 4vw;
box-sizing: border-box;
} }
.dataScrView_leftView_content_views3>div>div>div{ .forkliftRank3{
margin-top: 7px; margin-top: 0.5vh;
display: flex;
justify-content: space-evenly;
width: 100%;
height: 2.5vh;
line-height: 2.5vh;
background:no-repeat center center url('~@/assets/images/cutGraph/list3.png');
background-size:100% 100%;
padding-left: 4vw;
box-sizing: border-box;
}
.forkliftRank4{
margin-top: 0.5vh;
display: flex;
justify-content: space-evenly;
width: 100%;
height: 2.5vh;
line-height: 2.5vh;
background:no-repeat center center url('~@/assets/images/cutGraph/list4.png');
background-size:100% 100%;
padding-left: 4vw;
box-sizing: border-box;
}
.forkliftRank5{
margin-top: 0.5vh;
display: flex;
justify-content: space-evenly;
width: 100%;
height: 2.5vh;
line-height: 2.5vh;
background:no-repeat center center url('~@/assets/images/cutGraph/list5.png');
background-size:100% 100%;
padding-left: 4vw;
box-sizing: border-box;
} }
.dataScrView_centerView>div{ .dataScrView_centerView>div{
position: absolute; position: absolute;
...@@ -1126,6 +1712,7 @@ dd>div{ ...@@ -1126,6 +1712,7 @@ dd>div{
padding: 5px 7px; padding: 5px 7px;
box-sizing: border-box; box-sizing: border-box;
overflow: hidden; overflow: hidden;
z-index: 3;
} }
.dataScrView_centerView_title{ .dataScrView_centerView_title{
margin-bottom: 5px; margin-bottom: 5px;
......
src/views/MLargeScreen/components/intelligentSchedul/index.vue
View file @ fcbbe8e9
...@@ -1169,7 +1169,6 @@ export default { ...@@ -1169,7 +1169,6 @@ export default {
<style scoped> <style scoped>
.intelligentSchScrView{ .intelligentSchScrView{
position: absolute; position: absolute;
z-index: 1;
width: 100%; width: 100%;
height: 100%; height: 100%;
overflow: hidden; overflow: hidden;
...@@ -1179,10 +1178,12 @@ export default { ...@@ -1179,10 +1178,12 @@ export default {
.intelligentSchScrView_leftView{ .intelligentSchScrView_leftView{
height: 100%; height: 100%;
width: 20%; width: 20%;
z-index: 3;
} }
.intelligentSchScrView_rightView{ .intelligentSchScrView_rightView{
height: 100%; height: 100%;
width: 20%; width: 20%;
z-index: 3;
} }
.intelligentSchScrView_leftView1{ .intelligentSchScrView_leftView1{
width: 100%; width: 100%;
......
src/views/MLargeScreen/index.vue
View file @ fcbbe8e9
...@@ -34,7 +34,8 @@ ...@@ -34,7 +34,8 @@
<kaungEZUIKitJs v-if="kaungEZUIKitJsShow"/> <kaungEZUIKitJs v-if="kaungEZUIKitJsShow"/>
</div> </div>
<!-- 嵌入三维地图页面 --> <!-- 嵌入三维地图页面 -->
<iframe src="http://8.143.203.103:9092/#/Index" frameborder="0" class="mapcontainer1"></iframe> <!-- <iframe src="http://8.143.203.103:9092/#/Index" frameborder="0" class="mapcontainer1"></iframe> -->
<!-- <iframe src="http://192.168.0.101:3003/#/Index" frameborder="0" class="mapcontainer1"></iframe> -->
<!-- 单个车辆视频监控 --> <!-- 单个车辆视频监控 -->
<div class="monitorCover1" v-show="monitorCover1Show"> <div class="monitorCover1" v-show="monitorCover1Show">
<div class="monitorCover1_closePic" @click="closeMonitorCoverFn"></div> <div class="monitorCover1_closePic" @click="closeMonitorCoverFn"></div>
...@@ -42,7 +43,6 @@ ...@@ -42,7 +43,6 @@
<video id="monitorCover1Id" width="1300" height="700" muted autoplay></video> <video id="monitorCover1Id" width="1300" height="700" muted autoplay></video>
</div> </div>
</div> </div>
</div> </div>
</template> </template>
...@@ -97,7 +97,7 @@ export default { ...@@ -97,7 +97,7 @@ export default {
this.timer = setInterval(() => { this.timer = setInterval(() => {
this.setNowTimes(); this.setNowTimes();
}, 1000) }, 1000)
window.addEventListener('message', this.handleMessage); // window.addEventListener('message', this.handleMessage);
}, },
methods: { methods: {
loadData() { loadData() {
...@@ -318,6 +318,7 @@ export default { ...@@ -318,6 +318,7 @@ export default {
top: 0px; top: 0px;
position: absolute; position: absolute;
overflow: hidden; overflow: hidden;
z-index: 2;
} }
.bigScreenView{ .bigScreenView{
width: 100vw; width: 100vw;
...@@ -331,7 +332,7 @@ export default { ...@@ -331,7 +332,7 @@ export default {
background:no-repeat center center url('~@/assets/images/cutGraph/top_title.png'); background:no-repeat center center url('~@/assets/images/cutGraph/top_title.png');
background-size:100% 100%; background-size:100% 100%;
position: relative; position: relative;
z-index: 1; z-index: 3;
} }
.content_view{ .content_view{
width: 100%; width: 100%;
...@@ -343,7 +344,7 @@ export default { ...@@ -343,7 +344,7 @@ export default {
.videoSelectView{ .videoSelectView{
position: absolute; position: absolute;
top: 5.5vh; top: 5.5vh;
z-index: 1; z-index: 3;
width: 100%; width: 100%;
height: 5.5vh; height: 5.5vh;
background-color: rgb(102,204,255); background-color: rgb(102,204,255);
...@@ -360,7 +361,7 @@ export default { ...@@ -360,7 +361,7 @@ export default {
.jiankongView{ .jiankongView{
position: absolute; position: absolute;
top: 11vh; top: 11vh;
z-index: 1; z-index: 3;
width: 100%; width: 100%;
} }
.top_titl_left{ .top_titl_left{
......
src/views/components/echarts/bingtu3d.js 0 → 100644
View file @ fcbbe8e9
// 生成模拟 3D 饼图的配置项
// pieData（object）：饼图数据
// internalDiameterRatio（0~1之间的浮点数）：内径/外径的值（默认值 1/2），当该值等于 0 时，
// heigth配置每个数据生成的高度
export function getPie3D(pieData, internalDiameterRatio, height) {
let series = [];
let sumValue = 0;
let startValue = 0;
let endValue = 0;
let legendData = [];
let k =
typeof internalDiameterRatio !== "undefined"
? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
: 1 / 3;
//console.log(k) //internalDiameterRatio==>2时,k=-0.3333333333333333
// 计算比例
let total = 0;
for (let i = 0; i < pieData.length; i++) {
pieData[i].value=Number(pieData[i].value)
// console.log(Number(pieData[i].value))
total += Number(pieData[i].value);
}
// console.log(total)
for (let i = 0; i < pieData.length; i++) {
pieData[i].proportion =parseFloat(pieData[i].value / total).toFixed(4);
// console.log(pieData[i].proportion)
}
// 为每一个饼图数据，生成一个 series-surface 配置
for (let i = 0; i < pieData.length; i++) {
sumValue += pieData[i].value;
let seriesItem = {
name:
typeof pieData[i].name === "undefined"
? `series${i}`
: pieData[i].name,
type: "surface",
parametric: true,
wireframe: {
show: false,
},
pieData: pieData[i],
pieStatus: {
selected: pieData[i].selected?pieData[i].selected:false,
hovered: pieData[i].hovered?pieData[i].hovered:false,
k: k,
},
};
if (typeof pieData[i].itemStyle != "undefined") {
let itemStyle = {};
typeof pieData[i].itemStyle.color != "undefined"
? (itemStyle.color = pieData[i].itemStyle.color)
: null;
typeof pieData[i].itemStyle.opacity != "undefined"
? (itemStyle.opacity = pieData[i].itemStyle.opacity)
: null;
seriesItem.itemStyle = itemStyle;
}
series.push(seriesItem);
}
// 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
// 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
for (let i = 0; i < series.length; i++) {
endValue = startValue + series[i].pieData.value;
// console.log(series[i]);
series[i].pieData.startRatio = startValue / sumValue;
series[i].pieData.endRatio = endValue / sumValue;
series[i].parametricEquation = getParametricEquation(
series[i].pieData.startRatio,
series[i].pieData.endRatio,
series[i].pieStatus.selected,
series[i].pieStatus.hovered,
k,
height ? series[i].pieData.proportion *height: 1 //自己自定义传入高度，每个类型按比例生成高度
// series[i].pieData.value ==>这个是饼图默认自己生成高度
// 1 设置为1所有的扇形高度都一样高
);
startValue = endValue;
legendData.push(series[i].name);
}
// console.log(series);
return series;
}
// startRatio（浮点数）: 当前扇形起始比例，取值区间[0, endRatio)
// endRatio（浮点数）: 当前扇形结束比例，取值区间(startRatio, 1]
// isSelected（布尔值）: 是否选中，效果参照二维饼图选中效果（单选）
// isHovered（布尔值）: 是否放大，效果接近二维饼图高亮（放大）效果（未能实现阴影）
// k（0~1之间的浮点数）：用于参数方程的一个参数，取值 0~1 之间，通过「内径 / 外径」的值换算而来。
//height配置3d扇形高度
export function getParametricEquation(
startRatio,
endRatio,
isSelected,
isHovered,
k,
height
) {
// 计算
let midRatio = (startRatio + endRatio) / 2;
let startRadian = startRatio * Math.PI * 2;
let endRadian = endRatio * Math.PI * 2;
let midRadian = midRatio * Math.PI * 2;
// 如果只有一个扇形，则不实现选中效果。
if (startRatio === 0 && endRatio === 1) {
isSelected = false;
}
// 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
k = typeof k !== "undefined" ? k : 1 / 3;
// 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
let offsetX = isSelected ? Math.cos(midRadian) * 0.2 : 0;
let offsetY = isSelected ? Math.sin(midRadian) * 0.2 : 0;
// 计算高亮效果的放大比例（未高亮，则比例为 1）
let hoverRate = isHovered ? 1.05 : 1;
// 返回曲面参数方程
return {
u: {
min: -Math.PI,
max: Math.PI * 3,
step: Math.PI / 32,
},
v: {
min: 0,
max: Math.PI * 2,
step: Math.PI / 20,
},
x: function (u, v) {
if (u < startRadian) {
return (
offsetX +
Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
);
}
if (u > endRadian) {
return (
offsetX +
Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
);
}
return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
},
y: function (u, v) {
if (u < startRadian) {
return (
offsetY +
Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
);
}
if (u > endRadian) {
return (
offsetY +
Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
);
}
return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
},
z: function (u, v) {
if (u < -Math.PI * 0.5) {
return Math.sin(u);
}
if (u > Math.PI * 2.5) {
return Math.sin(u);
}
return Math.sin(v) > 0 ? 1 * height : -1;
},
};
}
src/views/performanceStatistics/caiquOutput/day/index.vue
View file @ fcbbe8e9
...@@ -23,9 +23,9 @@ ...@@ -23,9 +23,9 @@
<div class="content" style="margin-top:15px;"> <div class="content" style="margin-top:15px;">
<el-table :data="tableData" v-loading="loading" border style="width:auto" :row-class-name="tableRowClassName"> <el-table :data="tableData" v-loading="loading" border style="width:auto" :row-class-name="tableRowClassName">
<el-table-column prop="name" label="采区" align="center"></el-table-column> <el-table-column prop="name" label="采区" align="center"></el-table-column>
<el-table-column prop="dayPlan" label="日计划量" align="center"></el-table-column> <el-table-column prop="nowPlan" label="日计划量" align="center"></el-table-column>
<el-table-column prop="output" label="实际日产量" align="center"></el-table-column> <el-table-column prop="total" label="实际日产量" align="center"></el-table-column>
<el-table-column prop="rate" label="完成率" align="center"></el-table-column> <el-table-column prop="ratio" label="完成率" align="center"></el-table-column>
<el-table-column prop="worktime" label="铲车工作时间(h)" align="center"></el-table-column> <el-table-column prop="worktime" label="铲车工作时间(h)" align="center"></el-table-column>
<el-table-column prop="shovel" label="铲车车数" align="center"></el-table-column> <el-table-column prop="shovel" label="铲车车数" align="center"></el-table-column>
<el-table-column prop="lorry" label="卡车车数" align="center"></el-table-column> <el-table-column prop="lorry" label="卡车车数" align="center"></el-table-column>
...@@ -77,11 +77,9 @@ export default { ...@@ -77,11 +77,9 @@ export default {
this.$nextTick(()=>{ this.$nextTick(()=>{
HttpReq.truckDispatching.caiquAreaQueryDay(param).then((res) => { HttpReq.truckDispatching.caiquAreaQueryDay(param).then((res) => {
if(res.code == 200){ this.loading = false;
this.loading = false; this.tableData = res;
this.tableData = res.data.content; this.total = res.length;
this.total = res.data.totalElements;
}
}) })
}) })
......
src/views/performanceStatistics/caiquOutput/month/index.vue
View file @ fcbbe8e9
...@@ -23,9 +23,9 @@ ...@@ -23,9 +23,9 @@
<div class="content" style="margin-top:15px;"> <div class="content" style="margin-top:15px;">
<el-table :data="tableData" v-loading="loading" border style="width:auto" :row-class-name="tableRowClassName"> <el-table :data="tableData" v-loading="loading" border style="width:auto" :row-class-name="tableRowClassName">
<el-table-column prop="name" label="采区" align="center"></el-table-column> <el-table-column prop="name" label="采区" align="center"></el-table-column>
<el-table-column prop="dayPlan" label="月计划量" align="center"></el-table-column> <el-table-column prop="nowPlan" label="月计划量" align="center"></el-table-column>
<el-table-column prop="output" label="实际月产量" align="center"></el-table-column> <el-table-column prop="total" label="实际月产量" align="center"></el-table-column>
<el-table-column prop="rate" label="完成率" align="center"></el-table-column> <el-table-column prop="ratio" label="完成率" align="center"></el-table-column>
<el-table-column prop="worktime" label="铲车工作时间(h)" align="center"></el-table-column> <el-table-column prop="worktime" label="铲车工作时间(h)" align="center"></el-table-column>
<el-table-column prop="shovel" label="铲车车数" align="center"></el-table-column> <el-table-column prop="shovel" label="铲车车数" align="center"></el-table-column>
<el-table-column prop="lorry" label="卡车车数" align="center"></el-table-column> <el-table-column prop="lorry" label="卡车车数" align="center"></el-table-column>
...@@ -77,11 +77,9 @@ export default { ...@@ -77,11 +77,9 @@ export default {
this.$nextTick(()=>{ this.$nextTick(()=>{
HttpReq.truckDispatching.caiquAreaQueryMonth(param).then((res) => { HttpReq.truckDispatching.caiquAreaQueryMonth(param).then((res) => {
if(res.code == 200){ this.loading = false;
this.loading = false; this.tableData = res;
this.tableData = res.data.content; this.total = res.length;
this.total = res.data.totalElements;
}
}) })
}) })
......
src/views/performanceStatistics/caiquOutput/year/index.vue
View file @ fcbbe8e9
...@@ -23,9 +23,9 @@ ...@@ -23,9 +23,9 @@
<div class="content" style="margin-top:15px;"> <div class="content" style="margin-top:15px;">
<el-table :data="tableData" v-loading="loading" border style="width:auto" :row-class-name="tableRowClassName"> <el-table :data="tableData" v-loading="loading" border style="width:auto" :row-class-name="tableRowClassName">
<el-table-column prop="name" label="采区" align="center"></el-table-column> <el-table-column prop="name" label="采区" align="center"></el-table-column>
<el-table-column prop="dayPlan" label="年计划量" align="center"></el-table-column> <el-table-column prop="nowPlan" label="年计划量" align="center"></el-table-column>
<el-table-column prop="output" label="实际年产量" align="center"></el-table-column> <el-table-column prop="total" label="实际年产量" align="center"></el-table-column>
<el-table-column prop="rate" label="完成率" align="center"></el-table-column> <el-table-column prop="ratio" label="完成率" align="center"></el-table-column>
<el-table-column prop="worktime" label="铲车工作时间(h)" align="center"></el-table-column> <el-table-column prop="worktime" label="铲车工作时间(h)" align="center"></el-table-column>
<el-table-column prop="shovel" label="铲车车数" align="center"></el-table-column> <el-table-column prop="shovel" label="铲车车数" align="center"></el-table-column>
<el-table-column prop="lorry" label="卡车车数" align="center"></el-table-column> <el-table-column prop="lorry" label="卡车车数" align="center"></el-table-column>
...@@ -77,11 +77,9 @@ export default { ...@@ -77,11 +77,9 @@ export default {
this.$nextTick(()=>{ this.$nextTick(()=>{
HttpReq.truckDispatching.caiquAreaQueryYear(param).then((res) => { HttpReq.truckDispatching.caiquAreaQueryYear(param).then((res) => {
if(res.code == 200){ this.loading = false;
this.loading = false; this.tableData = res;
this.tableData = res.data.content; this.total = res.length;
this.total = res.data.totalElements;
}
}) })
}) })
......
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