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 @@
},
"cameraController": {
"zoomFactor": 3.0,
"minimumZoomDistance": 200,
"minimumZoomDistance": 100,
"maximumZoomDistance": 50000000,
"enableRotate": true,
"enableTranslate": true,
......
src/assets/js/common.js
View file @ fcbbe8e9
......@@ -1171,14 +1171,14 @@ var HttpReq = function(){
//绩效统计——日报——区域产量报表采区
caiquAreaQueryDay: function(param){
return request({
url: '/api/Panel',
url: 'api/PlanNew/Day',
method: 'get',
params:param,
})
},
caiquAreaAddDay: function(data){
return request({
url: '/api/Panel',
url: 'api/PlanNew/Day',
method: 'POST',
data:data,
}).then((res) => {
......@@ -1187,14 +1187,14 @@ var HttpReq = function(){
},
caiquAreaUpdateDay: function(data){
return request({
url: '/api/Panel',
url: 'api/PlanNew/Day',
method: 'PUT',
data:data,
})
},
caiquAreaDelDay: function(data){
return request({
url: '/api/Panel',
url: 'api/PlanNew/Day',
method: 'Delete',
data:data,
})
......@@ -1419,14 +1419,14 @@ var HttpReq = function(){
//绩效统计——月报——区域产量报表采区
caiquAreaQueryMonth: function(param){
return request({
url: '/api/PanelMonth',
url: '/api/PlanNew/Month',
method: 'get',
params:param,
})
},
caiquAreaAddMonth: function(data){
return request({
url: '/api/PanelMonth',
url: '/api/PlanNew/Month',
method: 'POST',
data:data,
}).then((res) => {
......@@ -1435,14 +1435,14 @@ var HttpReq = function(){
},
caiquAreaUpdateMonth: function(data){
return request({
url: '/api/PanelMonth',
url: '/api/PlanNew/Month',
method: 'PUT',
data:data,
})
},
caiquAreaDelMonth: function(data){
return request({
url: '/api/PanelMonth',
url: '/api/PlanNew/Month',
method: 'Delete',
data:data,
})
......@@ -1667,14 +1667,14 @@ var HttpReq = function(){
//绩效统计——年报——区域产量报表采区
caiquAreaQueryYear: function(param){
return request({
url: '/api/PanelYear',
url: 'api/PlanNew/Year',
method: 'get',
params:param,
})
},
caiquAreaAddYear: function(data){
return request({
url: '/api/PanelYear',
url: 'api/PlanNew/Year',
method: 'POST',
data:data,
}).then((res) => {
......@@ -1683,14 +1683,14 @@ var HttpReq = function(){
},
caiquAreaUpdateYear: function(data){
return request({
url: '/api/PanelYear',
url: 'api/PlanNew/Year',
method: 'PUT',
data:data,
})
},
caiquAreaDelYear: function(data){
return request({
url: '/api/PanelYear',
url: 'api/PlanNew/Year',
method: 'Delete',
data:data,
})
......@@ -1967,6 +1967,76 @@ var HttpReq = function(){
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){
return request({
......@@ -2038,6 +2108,14 @@ var HttpReq = function(){
params:param,
})
},
//大屏——车辆信息弹框——车辆实时数据
screenCarInforCarRealQuery2: function(param){
return request({
url: '/api/CarPeop/realtime',
method: 'get',
params:param,
})
},
//大屏——地图的增删改查
screenMapSetUpQuery: function(param){
return request({
......@@ -2181,6 +2259,14 @@ var HttpReq = function(){
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 {
//模型配置
const graphic = new mars3d.graphic.ModelPrimitive({
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,
minimumPixelSize: 50,
// 高亮时的样式（默认为鼠标移入，也可以指定type:'click'单击高亮），构造后也可以openHighlight、closeHighlight方法来手动调用
......
src/components/mars3d/Map2.vue
View file @ fcbbe8e9
......@@ -236,7 +236,7 @@ export default {
pixelOffset: new Cesium.Cartesian2(10, -25), //偏移量
},
model: {
url: '//data.mars3d.cn/gltf/imap/1d4f63111fc9499dac5cee2286ad7bb3/gltf/gltf2.gltf',
url: '//data.mars3d.cn/gltf/mars/car/tufangche.glb',
scale: 1,
minimumPixelSize: 50,
},
......
src/views/MLargeScreen/components/carManagement/index.vue
View file @ fcbbe8e9
......@@ -6,7 +6,52 @@
<div>
<div class="carManScrView_leftView_title">车辆运行状况</div>
<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>
<!-- 卡车排行榜-->
......@@ -23,43 +68,10 @@
<div class="carManScrView_leftView_content_views2">
<div :class="truckRankListData.selectFieldText == 'juli' ? '' : 'selectFieldStyle' " @click="truckChangeField('juli')">运输距离</div>
<div :class="truckRankListData.selectFieldText == 'time' ? '' : 'selectFieldStyle' " @click="truckChangeField('time')">工作时长</div>
<div :class="truckRankListData.selectFieldText == 'yunzai' ? '' : 'selectFieldStyle' " @click="truckChangeField('yunzai')">运载量</div>
<div :class="truckRankListData.selectFieldText == 'jiedan' ? '' : 'selectFieldStyle' " @click="truckChangeField('jiedan')">接单数</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 :class="truckRankListData.selectFieldText == 'zcar' ? '' : 'selectFieldStyle' " @click="truckChangeField('zcar')">运载量</div>
<div :class="truckRankListData.selectFieldText == 'waiting' ? '' : 'selectFieldStyle' " @click="truckChangeField('waiting')">接单数</div>
</div>
<div class="carManScrView_leftView_content_views3" id="carManScrView_leftView_content_views3_1"></div>
</div>
</div>
<!-- 铲车排行榜-->
......@@ -75,33 +87,36 @@
<div class="carManScrView_leftView_content">
<div class="carManScrView_leftView_content_views2">
<div :class="forkLiftRankListData.selectFieldText == 'time' ? '' : 'selectFieldStyle' " @click="forkLiftChangeField('time')">工作时长</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 == 'average' ? '' : 'selectFieldStyle' " @click="forkLiftChangeField('average')">平均时长</div>
<div :class="forkLiftRankListData.selectFieldText == 'zcar' ? '' : 'selectFieldStyle' " @click="forkLiftChangeField('zcar')">装车量</div>
<div :class="forkLiftRankListData.selectFieldText == 'waiting' ? '' : 'selectFieldStyle' " @click="forkLiftChangeField('waiting')">装车数</div>
</div>
<div class="carManScrView_leftView_content_views3">
<div v-if="forkLiftRankListData.selectFieldText == 'time'">
<div v-for="(item,index) in forkLiftRankListData.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 class="carManScrView_leftView_content_views3" v-if="forkLiftRankListData.selectFieldText == 'time'">
<div v-for="(item,index) in forkLiftRankListData.listData" :key="index" :class="'forkliftRankTwo' + (index + 1)">
<div style="color:#BCF0FE;">{{item.number}}</div>
<div style="color:#1AC9FF;">{{item.time}}H</div>
<div style="color:#BCF0FE;">{{item.createTime}}</div>
</div>
<div v-if="forkLiftRankListData.selectFieldText == 'yunzai'">
<div v-for="(item,index) in forkLiftRankListData.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 class="carManScrView_leftView_content_views3" v-if="forkLiftRankListData.selectFieldText == 'average'">
<div v-for="(item,index) in forkLiftRankListData.listData" :key="index" :class="'forkliftRankTwo' + (index + 1)">
<div style="color:#BCF0FE;">{{item.number}}</div>
<div style="color:#1AC9FF;">{{item.average}}H</div>
<div style="color:#BCF0FE;">{{item.createTime}}</div>
</div>
<div v-if="forkLiftRankListData.selectFieldText == 'jiedan'">
<div v-for="(item,index) in forkLiftRankListData.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 class="carManScrView_leftView_content_views3" v-if="forkLiftRankListData.selectFieldText == 'zcar'">
<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.zcar}}吨</div>
<div style="color:#BCF0FE;">{{item.createTime}}</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>
......@@ -115,47 +130,46 @@
<div class="carManScrView_rightView_content">
<div class="carDynamicTitleStyle">
<img src="../../../../assets/images/cutGraph/huoche11.png" height="28">
<div>{{truckDynamicListData.number}}</div>
<div>{{truckDynamicListData.number ? truckDynamicListData.number : '无'}}</div>
</div>
<div class="truckDynamicContent1">
<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>
<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="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: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 style="text-align: center;">
<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: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 class="carDynamicContent1">
<div>
<img src="../../../../assets/images/cutGraph/mokuaikaobei4.png">
<div>开始工作时间</div>
<div>{{truckDynamicListData.startTime}}</div>
<div>{{truckDynamicListData.startTime ? truckDynamicListData.startTime : '无'}}</div>
</div>
<div>
<img src="../../../../assets/images/cutGraph/mokuaikaobei4.png">
<div>结束工作时间</div>
<div>{{truckDynamicListData.endTime}}</div>
<div>{{truckDynamicListData.endTime ? truckDynamicListData.endTime : '无'}}</div>
</div>
</div>
<div class="carDynamicContent2">
<img src="../../../../assets/images/cutGraph/tuiyuan1.png">
<span class="el-icon-sort"></span>
<div>
<div style="color:white;">{{truckDynamicListData.loadArea}}</div>
<div style="color:white;">{{truckDynamicListData.unloadArea}}</div>
<div style="color:white;text-align: center;">{{truckDynamicListData.loadArea ? truckDynamicListData.loadArea : '无'}}</div>
<img src="../../../../assets/images/cutGraph/zu2603.png">
<div style="color:white;text-align: center;">{{truckDynamicListData.unloadArea ? truckDynamicListData.unloadArea : '无'}}</div>
</div>
<span class="el-icon-sort"></span>
<img src="../../../../assets/images/cutGraph/tuiyuan2.png">
</div>
</div>
......@@ -166,42 +180,41 @@
<div class="carManScrView_rightView_content">
<div class="carDynamicTitleStyle">
<img src="../../../../assets/images/cutGraph/huoche11.png" height="28">
<div>{{forkliftkDynamicListData.number}}</div>
<div>{{forkliftkDynamicListData.number ? forkliftkDynamicListData.number : '无'}}</div>
</div>
<div class="ForkliftDynamicContent1">
<div>
<div>今日完成量</div>
<div class="ForkliftDynamicContent1_son1">{{forkliftkDynamicListData.rate}}%</div>
<div class="ForkliftDynamicContent1_son1">{{forkliftkDynamicListData.rate ? forkliftkDynamicListData.rate : 0}}%</div>
</div>
<div>
<div>今日工时/H</div>
<div class="ForkliftDynamicContent1_son1">{{forkliftkDynamicListData.workTime}}</div>
<div class="ForkliftDynamicContent1_son1">{{forkliftkDynamicListData.workTime ? forkliftkDynamicListData.workTime : 0}}</div>
</div>
<div>
<div>今日里程/Km</div>
<div class="ForkliftDynamicContent1_son1">{{forkliftkDynamicListData.mileage}}</div>
<div class="ForkliftDynamicContent1_son1">{{forkliftkDynamicListData.mileage ? forkliftkDynamicListData.mileage : 0}}</div>
</div>
</div>
<div class="carDynamicContent1">
<div>
<img src="../../../../assets/images/cutGraph/mokuaikaobei4.png">
<div>开始工作时间</div>
<div>{{forkliftkDynamicListData.startTime}}</div>
<div>{{forkliftkDynamicListData.startTime ? forkliftkDynamicListData.startTime : '无'}}</div>
</div>
<div>
<img src="../../../../assets/images/cutGraph/mokuaikaobei4.png">
<div>结束工作时间</div>
<div>{{forkliftkDynamicListData.endTime}}</div>
<div>{{forkliftkDynamicListData.endTime ? forkliftkDynamicListData.endTime : '无'}}</div>
</div>
</div>
<div class="carDynamicContent2">
<img src="../../../../assets/images/cutGraph/tuiyuan1.png">
<span class="el-icon-sort"></span>
<div>
<div style="color:white;">{{forkliftkDynamicListData.loadArea}}</div>
<div style="color:white;">{{forkliftkDynamicListData.unloadArea}}</div>
<div style="color:white;text-align: center;">{{forkliftkDynamicListData.loadArea ? forkliftkDynamicListData.loadArea : '无'}}</div>
<img src="../../../../assets/images/cutGraph/zu2603.png">
<div style="color:white;text-align: center;">{{forkliftkDynamicListData.unloadArea ? forkliftkDynamicListData.unloadArea : '无'}}</div>
</div>
<span class="el-icon-sort"></span>
<img src="../../../../assets/images/cutGraph/tuiyuan2.png">
</div>
</div>
......@@ -212,42 +225,41 @@
<div class="carManScrView_rightView_content">
<div class="carDynamicTitleStyle">
<img src="../../../../assets/images/cutGraph/huoche11.png" height="28">
<div>{{otherCarDynamicListData.number}}</div>
<div>{{otherCarDynamicListData.number ? otherCarDynamicListData.number : '无'}}</div>
</div>
<div class="otherCarDynamicContent1">
<div>
<div>今日完成量</div>
<div class="otherCarDynamicContent1_son1">{{otherCarDynamicListData.rate}}%</div>
<div class="otherCarDynamicContent1_son1">{{otherCarDynamicListData.rate ? otherCarDynamicListData.rate : 0}}%</div>
</div>
<div>
<div>今日工时/H</div>
<div class="otherCarDynamicContent1_son1">{{otherCarDynamicListData.workTime}}</div>
<div class="otherCarDynamicContent1_son1">{{otherCarDynamicListData.workTime ? otherCarDynamicListData.workTime : 0}}</div>
</div>
<div>
<div>今日里程/Km</div>
<div class="otherCarDynamicContent1_son1">{{otherCarDynamicListData.mileage}}</div>
<div class="otherCarDynamicContent1_son1">{{otherCarDynamicListData.mileage ? otherCarDynamicListData.mileage : 0}}</div>
</div>
</div>
<div class="carDynamicContent1">
<div>
<img src="../../../../assets/images/cutGraph/mokuaikaobei4.png">
<div>开始工作时间</div>
<div>{{otherCarDynamicListData.startTime}}</div>
<div>{{otherCarDynamicListData.startTime ? otherCarDynamicListData.startTime : '无'}}</div>
</div>
<div>
<img src="../../../../assets/images/cutGraph/mokuaikaobei4.png">
<div>结束工作时间</div>
<div>{{otherCarDynamicListData.endTime}}</div>
<div>{{otherCarDynamicListData.endTime ? otherCarDynamicListData.endTime : '无'}}</div>
</div>
</div>
<div class="carDynamicContent2">
<img src="../../../../assets/images/cutGraph/tuiyuan1.png">
<span class="el-icon-sort"></span>
<div>
<div style="color:white;">{{otherCarDynamicListData.loadArea}}</div>
<div style="color:white;">{{otherCarDynamicListData.unloadArea}}</div>
<div style="color:white;text-align: center;">{{otherCarDynamicListData.loadArea ? otherCarDynamicListData.loadArea : '无'}}</div>
<img src="../../../../assets/images/cutGraph/zu2603.png">
<div style="color:white;text-align: center;">{{otherCarDynamicListData.unloadArea ? otherCarDynamicListData.unloadArea : '无'}}</div>
</div>
<span class="el-icon-sort"></span>
<img src="../../../../assets/images/cutGraph/tuiyuan2.png">
</div>
</div>
......@@ -260,6 +272,8 @@
<script>
import { Tools, HttpReq, Dates} from '@/assets/js/common.js';
import * as echarts from 'echarts';
import "echarts-gl";
import { getPie3D } from "../../../components/echarts/bingtu3d";
export default {
data() {
......@@ -274,16 +288,41 @@ export default {
},
//车辆运行状况
carWorkingStateData:{
online:[],
offline:[],
kacheonline:0,
kacheoffline:0,
chancheonline:0,
chancheoffline:0,
qitacheonline:0,
qitacheoffline:0,
optionData: [
{
name: "卡车",
value: 0,
itemStyle: {
opacity: 0.2,
color: "#8FDFFE",
},
},
{
name: "铲车",
value: 0,
itemStyle: {
opacity: 0.2,
color: "#00A8FF",
},
}
],
},
//卡车排行榜
truckRankListData:{
echartsX:'Km',
carclass:'卡车',
selectTimeText:'day',
selectFieldText:'juli',
listData:[],
selectTimeDate:'',
driverName:[],
driverSeriesData:[],
driverName1:['kfdfdf','dsdsd1','dsdsd55'],
driverSeriesData1:[20,50,10],
},
//铲车排行榜
forkLiftRankListData:{
......@@ -291,7 +330,6 @@ export default {
selectTimeText:'day',
selectFieldText:'time',
listData:[],
selectTimeDate:'',
},
//卡车动态
truckDynamicListData:{
......@@ -355,8 +393,6 @@ export default {
let qitache1 = [];
let qitachezaixian = [];
let qitachelixian = [];
let zaixianAllNum = [];
let lixianAllNum = [];
if(res.code == 200){
res.data.content.forEach((item)=>{
if(item.carclass == '卡车'){
......@@ -367,6 +403,8 @@ export default {
qitache1.push(item);
}
})
this.carWorkingStateData.optionData[0].value = kache1.length;
this.carWorkingStateData.optionData[1].value = dianchan1.length;
kache1.forEach((item)=>{
if(item.status == 1){
kachezaixian.push(item);
......@@ -388,47 +426,83 @@ export default {
qitachelixian.push(item);
}
})
zaixianAllNum.push(kachezaixian.length);
zaixianAllNum.push(dianchanzaixian.length);
zaixianAllNum.push(qitachezaixian.length);
lixianAllNum.push(kachelixian.length);
lixianAllNum.push(dianchanlixian.length);
lixianAllNum.push(qitachelixian.length);
this.carWorkingStateData.online = zaixianAllNum;
this.carWorkingStateData.offline = lixianAllNum;
//绘制车辆运行状况图表
this.$nextTick(()=>{
this.carWorkingStateEcharts();
})
this.carWorkingStateData.kacheonline = kachezaixian.length;
this.carWorkingStateData.chancheonline = dianchanzaixian.length;
this.carWorkingStateData.qitacheonline = qitachezaixian.length;
this.carWorkingStateData.kacheoffline = kachelixian.length;
this.carWorkingStateData.chancheoffline = dianchanlixian.length;
this.carWorkingStateData.qitacheoffline = qitachelixian.length;
this.draw3d();
this.$nextTick(() => {
let parent = document.getElementById("chart-panel"); // 获取父元素
let canvas = parent.getElementsByTagName("canvas"); // 获取父元素下面的所有canvas元素
canvas[1].style.transform = "rotateX(30deg)";
});
}
})
//获取卡车排行榜
this.truckRankListData.selectTimeDate = this.currentTime.day;
let truckQuery1 = {};
truckQuery1.size = 10;
truckQuery1.size = 7;
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;
}
})
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();
})
}
})
//获取铲车排行榜
this.forkLiftRankListData.selectTimeDate = this.currentTime.day;
let forkLiftQuery1 = {};
forkLiftQuery1.size = 10;
forkLiftQuery1.size = 5;
forkLiftQuery1.sort = this.forkLiftRankListData.selectFieldText + ',desc';
forkLiftQuery1.carclass = this.forkLiftRankListData.carclass;
forkLiftQuery1.createTime = this.forkLiftRankListData.selectTimeDate;
this.$nextTick(()=>{
HttpReq.truckDispatching.carInformationQuery(forkLiftQuery1).then((res) => {
if(res.code == 200){
this.forkLiftRankListData.listData = res.data.content;
}
})
if(this.forkLiftRankListData.selectTimeText == 'day'){
HttpReq.truckDispatching.apiManmadesDay1Query(forkLiftQuery1).then((res) => {
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) => {
......@@ -470,8 +544,6 @@ export default {
let qitache1 = [];
let qitachezaixian = [];
let qitachelixian = [];
let zaixianAllNum = [];
let lixianAllNum = [];
if(res.code == 200){
res.data.content.forEach((item)=>{
if(item.carclass == '卡车'){
......@@ -482,6 +554,8 @@ export default {
qitache1.push(item);
}
})
this.carWorkingStateData.optionData[0].value = kache1.length;
this.carWorkingStateData.optionData[1].value = dianchan1.length;
kache1.forEach((item)=>{
if(item.status == 1){
kachezaixian.push(item);
......@@ -503,48 +577,85 @@ export default {
qitachelixian.push(item);
}
})
zaixianAllNum.push(kachezaixian.length);
zaixianAllNum.push(dianchanzaixian.length);
zaixianAllNum.push(qitachezaixian.length);
lixianAllNum.push(kachelixian.length);
lixianAllNum.push(dianchanlixian.length);
lixianAllNum.push(qitachelixian.length);
this.carWorkingStateData.online = zaixianAllNum;
this.carWorkingStateData.offline = lixianAllNum;
//绘制车辆运行状况图表
this.$nextTick(()=>{
this.carWorkingStateEcharts();
})
this.carWorkingStateData.kacheonline = kachezaixian.length;
this.carWorkingStateData.chancheonline = dianchanzaixian.length;
this.carWorkingStateData.qitacheonline = qitachezaixian.length;
this.carWorkingStateData.kacheoffline = kachelixian.length;
this.carWorkingStateData.chancheoffline = dianchanlixian.length;
this.carWorkingStateData.qitacheoffline = qitachelixian.length;
this.draw3d();
this.$nextTick(() => {
let parent = document.getElementById("chart-panel"); // 获取父元素
let canvas = parent.getElementsByTagName("canvas"); // 获取父元素下面的所有canvas元素
canvas[1].style.transform = "rotateX(30deg)";
});
}
})
//获取卡车排行榜
this.truckRankListData.selectTimeDate = this.currentTime.day;
let truckQuery1 = {};
truckQuery1.size = 10;
truckQuery1.size = 7;
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;
}
})
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();
})
}
})
//获取铲车排行榜
this.forkLiftRankListData.selectTimeDate = this.currentTime.day;
let forkLiftQuery1 = {};
forkLiftQuery1.size = 10;
forkLiftQuery1.size = 5;
forkLiftQuery1.sort = this.forkLiftRankListData.selectFieldText + ',desc';
forkLiftQuery1.carclass = this.forkLiftRankListData.carclass;
forkLiftQuery1.createTime = this.forkLiftRankListData.selectTimeDate;
this.$nextTick(()=>{
HttpReq.truckDispatching.carInformationQuery(forkLiftQuery1).then((res) => {
if(res.code == 200){
this.forkLiftRankListData.listData = res.data.content;
}
})
if(this.forkLiftRankListData.selectTimeText == 'day'){
HttpReq.truckDispatching.apiManmadesDay1Query(forkLiftQuery1).then((res) => {
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)
})
})
......@@ -557,10 +668,202 @@ export default {
},
//车辆运行状况
carWorkingStateEcharts(){
let that = this;
echarts.init(document.getElementById('carWorkingStateEcharts')).dispose();
var myChart = echarts.init(document.getElementById('carWorkingStateEcharts'));
draw3d() {
// 基于准备好的dom，初始化echarts实例
echarts.init(document.getElementById('chart-panel')).dispose();
let chartPanel = echarts.init(document.getElementById("chart-panel"));
for (let i = 0; i < this.carWorkingStateData.optionData.length; i++) {
delete this.carWorkingStateData.optionData[i].itemStyle.opacity;
}
// 传入数据生成 option
let series = getPie3D(this.carWorkingStateData.optionData, 0);
let option = {
tooltip: {
formatter: (params) => {
// console.log(params)
if (
params.seriesName !== "mouseoutSeries" &&
params.seriesName !== "pie2d"
) {
return `<div style="padding:0 0px">${params.seriesName}：${(
option.series[params.seriesIndex].pieData.proportion * 100
).toFixed(2)}%</div>`;
}
},
},
xAxis3D: {
min: -1,
max: 1,
},
yAxis3D: {
min: -1,
max: 1,
},
zAxis3D: {
min: -1,
max: 1,
},
grid3D: {
show: false, //是否显示三维笛卡尔坐标系。
boxHeight: 20, //三维笛卡尔坐标系在三维场景中的高度
top: "1%",
// bottom: "80%",
// environment: "#021041", //背景
viewControl: {
//用于鼠标的旋转，缩放等视角控制
alpha: 25, //角度
distance: 200, //调整视角到主体的距离，类似调整zoom 重要
rotateSensitivity: 0, //设置为0无法旋转
zoomSensitivity: 0, //设置为0无法缩放
panSensitivity: 0, //设置为0无法平移
autoRotate: false, //自动旋转
},
},
series: series,
};
chartPanel.setOption(option);
//是否需要label指引线，如果要就添加一个透明的2d饼状图并调整角度使得labelLine和3d的饼状图对齐，并再次setOption
option.series.push({
name: "pie2d",
type: "pie",
label: {
color: "#00D7E9",
fontSize: 16,
// position: 'inner',
// formatter: "{b}\n\n",
// padding: [0, -40],
formatter: (item) => {
// console.log(item)
return item.data.name + ":" + item.data.value + "辆" + "";
},
},
labelLine: {
length: 50,
length2: 30,
lineStyle: {
color: "#ffffff",
width: 1.5,
},
},
startAngle: 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 = {
tooltip: {
trigger: 'axis',
......@@ -568,130 +871,108 @@ export default {
type: 'shadow'
}
},
legend: {
textStyle:{
color: 'white',
fontSize:16,
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
top:'18%',
left: '1%',
bottom: '0%',
containLabel: true
},
xAxis: {
type: 'category',
data: ['卡车状态', '铲车状态', '其他车辆'],
name:this.truckRankListData.echartsX,
type: 'value',
boundaryGap: [0, 0.01],
axisLabel: {
show: true,
textStyle: {
color: 'white',
fontSize:16,
color: '#BFF7FF'
}
},
axisLine: {
lineStyle: {
color: 'white',
color: '#BFF7FF',
width: 1
}
},
}
},
yAxis: {
type: 'value',
name:'车牌号',
type: 'category',
data: this.truckRankListData.driverName,
axisLabel: {
show: true,
textStyle: {
color: 'white',
fontSize:16,
color: '#BFF7FF'
}
},
axisLine: {
lineStyle: {
color: 'white',
width: 0
color: '#BFF7FF',
width: 0
}
},
}
},
series: [
{
name: '车辆离线',
type: 'bar',
data: that.carWorkingStateData.offline,
barWidth: 20,
barWidth: 12,
itemStyle: {
color: '#14F3C5'
},
},
{
name: '车辆在线',
type: 'bar',
data: that.carWorkingStateData.online,
barWidth: 20,
itemStyle: {
color: '#2195FD'
},
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);
},
//卡车切换时间
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){
this.forkLiftRankListData.selectTimeText = text;
let forkLiftQuery1 = {};
forkLiftQuery1.size = 5;
forkLiftQuery1.sort = this.forkLiftRankListData.selectFieldText + ',desc';
forkLiftQuery1.carclass = this.forkLiftRankListData.carclass;
if(text == 'day'){
this.forkLiftRankListData.selectTimeDate = this.currentTime.day;
HttpReq.truckDispatching.apiManmadesDay1Query(forkLiftQuery1).then((res) => {
this.forkLiftRankListData.listData = res;
})
}
if(text == 'month'){
this.forkLiftRankListData.selectTimeDate = this.currentTime.month;
if(text == 'week'){
HttpReq.truckDispatching.apiManmadesZhou1Query(forkLiftQuery1).then((res) => {
this.forkLiftRankListData.listData = res;
})
}
if(text == 'year'){
this.forkLiftRankListData.selectTimeDate = this.currentTime.year;
if(text == 'month'){
HttpReq.truckDispatching.apiManmadesMou1Query(forkLiftQuery1).then((res) => {
this.forkLiftRankListData.listData = res;
})
}
},
//铲车切换字段排序
forkLiftChangeField(text){
this.forkLiftRankListData.selectFieldText = text;
let forkLiftQuery1 = {};
forkLiftQuery1.size = 10;
forkLiftQuery1.size = 5;
forkLiftQuery1.sort = this.forkLiftRankListData.selectFieldText + ',desc';
forkLiftQuery1.carclass = this.forkLiftRankListData.carclass;
forkLiftQuery1.createTime = this.forkLiftRankListData.selectTimeDate;
this.$nextTick(()=>{
HttpReq.truckDispatching.carInformationQuery(forkLiftQuery1).then((res) => {
if(res.code == 200){
this.forkLiftRankListData.listData = res.data.content;
}
})
if(this.forkLiftRankListData.selectTimeText == 'day'){
HttpReq.truckDispatching.apiManmadesDay1Query(forkLiftQuery1).then((res) => {
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 {
return
}
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.data.totalElements == 0){
this.truckDynamicListData.rate = 0;
this.truckDynamicListData.carry = 0;
this.truckDynamicListData.workTime = 0;
this.truckDynamicListData.mileage = 0;
this.truckDynamicListData.startTime = '无';
this.truckDynamicListData.endTime = '无';
this.truckDynamicListData.loadArea = '无';
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.rate = res.data.rate;
this.truckDynamicListData.carry = res.data.carry;
this.truckDynamicListData.workTime = res.data.workTime;
this.truckDynamicListData.mileage = res.data.mileage;
this.truckDynamicListData.startTime = res.data.startTime;
this.truckDynamicListData.endTime = res.data.endTime;
this.truckDynamicListData.loadArea = res.data.loadArea;
this.truckDynamicListData.unloadArea = res.data.unloadArea;
}
this.truckDynamicListData.num2 = this.truckDynamicListData.num2 + 1;
})
......@@ -745,27 +1015,16 @@ export default {
return
}
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.data.totalElements == 0){
this.forkliftkDynamicListData.rate = 0;
this.forkliftkDynamicListData.carry = 0;
this.forkliftkDynamicListData.workTime = 0;
this.forkliftkDynamicListData.mileage = 0;
this.forkliftkDynamicListData.startTime = '无';
this.forkliftkDynamicListData.endTime = '无';
this.forkliftkDynamicListData.loadArea = '无';
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.rate = res.data.rate;
this.forkliftkDynamicListData.carry = res.data.carry;
this.forkliftkDynamicListData.workTime = res.data.workTime;
this.forkliftkDynamicListData.mileage = res.data.mileage;
this.forkliftkDynamicListData.startTime = res.data.startTime;
this.forkliftkDynamicListData.endTime = res.data.endTime;
this.forkliftkDynamicListData.loadArea = res.data.loadArea;
this.forkliftkDynamicListData.unloadArea = res.data.unloadArea;
}
this.forkliftkDynamicListData.num2 = this.forkliftkDynamicListData.num2 + 1;
})
......@@ -783,27 +1042,16 @@ export default {
return
}
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.data.totalElements == 0){
this.otherCarDynamicListData.rate = 0;
this.otherCarDynamicListData.carry = 0;
this.otherCarDynamicListData.workTime = 0;
this.otherCarDynamicListData.mileage = 0;
this.otherCarDynamicListData.startTime = '无';
this.otherCarDynamicListData.endTime = '无';
this.otherCarDynamicListData.loadArea = '无';
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.rate = res.data.rate;
this.otherCarDynamicListData.carry = res.data.carry;
this.otherCarDynamicListData.workTime = res.data.workTime;
this.otherCarDynamicListData.mileage = res.data.mileage;
this.otherCarDynamicListData.startTime = res.data.startTime;
this.otherCarDynamicListData.endTime = res.data.endTime;
this.otherCarDynamicListData.loadArea = res.data.loadArea;
this.otherCarDynamicListData.unloadArea = res.data.unloadArea;
}
this.otherCarDynamicListData.num2 = this.otherCarDynamicListData.num2 + 1;
})
......@@ -858,17 +1106,18 @@ export default {
height: 100%;
overflow: hidden;
position: absolute;
z-index: 1;
display: flex;
justify-content: space-between;
}
.carManScrView_leftView{
height: 100%;
width: 20%;
z-index: 3;
}
.carManScrView_rightView{
height: 100%;
width: 20%;
z-index: 3;
}
.carManScrView_leftView>div{
width: 100%;
......@@ -977,18 +1226,65 @@ export default {
.carManScrView_leftView_content_views3::-webkit-scrollbar {
display: none;
}
.carManScrView_leftView_content_views3>div>div{
font: 18px;
font-weight: 600;
.forkliftRankTwo1{
margin-top: 1vh;
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/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{
margin-top: 7px;
.forkliftRankTwo4{
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%;
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{
display: flex;
......@@ -1064,10 +1360,10 @@ export default {
margin: 0px auto;
width: 4.3vw;
height: 4.3vw;
border: 4px solid #06EFFE;
border-radius: 50%;
line-height: 3.8vw;
line-height: 4.3vw;
font-size: 24px;
background:no-repeat center center url('~@/assets/images/cutGraph/bilikuang.png');
background-size:100% 100%;
}
.otherCarDynamicContent1{
margin-top: 0.3vh;
......@@ -1086,9 +1382,9 @@ export default {
margin: 0px auto;
width: 4vw;
height: 4vw;
border: 4px solid #06EFFE;
border-radius: 50%;
line-height: 3.5vw;
line-height: 4vw;
font-size: 24px;
background:no-repeat center center url('~@/assets/images/cutGraph/bilikuang.png');
background-size:100% 100%;
}
</style>
\ No newline at end of file
src/views/MLargeScreen/components/dataAnalysis/index.vue
View file @ fcbbe8e9
......@@ -12,12 +12,7 @@
<div>
<div class="dataAnalysisScrView_leftView_title">各采区日产量排名</div>
<div class="dataAnalysisScrView_leftView_content">
<div class="outputRankView">
<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 class="outputRankView" id="outputRankView"></div>
</div>
</div>
<!-- 各采区当月完成率-->
......@@ -42,8 +37,8 @@
<div>装卸点平均时长</div>
<div class="loadAndUnloadTitleDateStyle">
<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 == 'year' ? 'loadAndUnloadDateStyle_son1' : 'loadAndUnloadDateStyle_son2' " @click="loadAndUnloadChangeTime('year')">年</div>
</div>
</div>
<div class="dataAnalysisScrView_rightView_content" style="position: relative;">
......@@ -56,12 +51,12 @@
<div>矿石产量比</div>
<div class="oreProportionTitleDateStyle">
<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 == 'year' ? 'oreProportionDateStyle_son1' : 'oreProportionDateStyle_son2' " @click="oreProportionChangeTime('year')">年</div>
</div>
</div>
<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>
<!-- 报警路障申报统计 -->
......@@ -85,11 +80,15 @@
<script>
import { Tools, HttpReq, Dates} from '@/assets/js/common.js';
import * as echarts from 'echarts';
import "echarts-gl";
import { getPie3D } from "../../../components/echarts/bingtu3d";
export default {
data() {
return {
whetherShow:false,
dataAnalysisTimer:null,
//时间
currentTime:{
day:'',
......@@ -97,15 +96,12 @@ export default {
year:'',
},
//采取产量统计
echarts1Data:[
{ value: 104, name: 'Ca2o' },
{ value: 735, name: 'Ca3o' },
{ value: 580, name: 'Ca4o' },
{ value: 484, name: 'Ca5o' },
{ value: 300, name: 'Ca6o' }
],
echarts1Data:[],
//各采区日产量排名
outputRankData:[],
outputRankData:{
caiquName:[],
caiquSeriesData:[],
},
//各采区当月完成率
echarts2Data:{
caiquName:[],
......@@ -115,9 +111,9 @@ export default {
},
//月生产完成效率
echarts3Data:{
caiquName:['采区一', '采区二', '采区三', '采区四'],
wanchengNum:[20,25,48,63],
jihuaNum:[30,50,60,70],
caiquName:[],
wanchengNum:[],
jihuaNum:[],
},
//装卸点平均时长
loadAndUnloadListData:{
......@@ -131,6 +127,24 @@ export default {
selectTimeText:'day',
selectTimeDate:'',
proportionData:[],
optionData:[
{
name: "矿石",
value: 85,
itemStyle: {
opacity: 0.2,
color: "#8FDFFE",
},
},
{
name: "挖石",
value: 15,
itemStyle: {
opacity: 0.2,
color: "#00A8FF",
},
}
]
},
//报警路障申报统计
echarts6Data:[],
......@@ -139,7 +153,6 @@ export default {
xiedianName:[],
outputNum:[],
},
}
},
methods: {
......@@ -152,71 +165,180 @@ export default {
this.$nextTick(()=>{
//采取产量统计图表
this.echarts1Fn();
//各采区日产量排名
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) => {
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 = {};
a1.value = item.num;
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.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,createTime:this.currentTime.day,}).then((res) => {
HttpReq.truckDispatching.breakDownQueryDay({size:9999}).then((res) => {
let that = this;
if(res.code == 200){
//报警路障申报统计过度数组
......@@ -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{
if(this.dataAnalysisTimer) {
clearInterval(this.dataAnalysisTimer);
}
this.whetherShow = false;
}
}
},
//采取产量统计
echarts1Fn(){
var myChart = echarts.init(document.getElementById('echarts1View'));
var option = {
echarts1_1Fn(){
// 基于准备好的dom，初始化echarts实例
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: {
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: {
data: this.echarts1Data,
top:'center',
orient: 'vertical',
top: 'center',
right: 'right',
textStyle:{
color:'white',
fontSize:16,
}
right: '7%',
textStyle: {
color: "#fff",
fontSize: 14,
},
},
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: [
{
name: '产量(吨)',
type: 'pie',
radius: ['40%', '85%'],
avoidLabelOverlap: false,
label: {
show: true,
position: 'inner',
formatter: '({d}%)'
},
labelLine: {
show: false
type: 'bar',
barWidth: 12,
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
{ offset: 0, color: '#23FFE2' },
{ offset: 1, color: '#0F86EB' }
])
},
data: this.echarts1Data,
data: this.outputRankData.caiquSeriesData,
}
]
};
option && myChart.setOption(option);
},
//排行榜进度条文字转换
progressFormat(number){
let num = parseFloat(number) * 10
return num;
},
//各采区当月完成率
echarts2Fn(){
echarts.init(document.getElementById('echarts2View')).dispose();
var myChart = echarts.init(document.getElementById('echarts2View'));
var option = {
tooltip: {
......@@ -330,6 +806,12 @@ export default {
fontSize:15,
}
},
grid: {
left: '1%',
right: '2%',
bottom: '20%',
containLabel: true
},
xAxis: [
{
type: 'category',
......@@ -356,8 +838,8 @@ export default {
type: 'value',
name: '产量(T)',
min: 0,
max: 1000,
interval: 200,
max: 10000,
interval: 2000,
axisLabel: {
formatter: '{value}',
show: true,
......@@ -448,6 +930,7 @@ export default {
},
//月生产完成效率
echarts3Fn(){
echarts.init(document.getElementById('echarts3View')).dispose();
var myChart = echarts.init(document.getElementById('echarts3View'));
var option = {
tooltip: {
......@@ -483,10 +966,8 @@ export default {
}
},
yAxis: {
min: 0,
max: 100,
type: 'value',
name: '完成率(%)',
name: '完成量',
nameTextStyle: { fontSize: 14 },
axisLabel: {
show: true,
......@@ -526,14 +1007,12 @@ export default {
};
option && myChart.setOption(option);
},
//装卸点平均时长
//装卸点平均时长切换
loadAndUnloadChangeTime(text){
this.loadAndUnloadListData.selectTimeText = text;
if(text == 'day'){
this.loadAndUnloadListData.selectTimeDate = this.currentTime.day;
HttpReq.truckDispatching.xiequAreaQueryDay({size:9999,createTime:this.loadAndUnloadListData.selectTimeDate,}).then((res) => {
HttpReq.truckDispatching.xiequAreaQueryDay({createTime:this.currentTime.day}).then((res) => {
if(res.code == 200){
console.log(res.data.content);
let caiquName = [];
let workTime = [];
res.data.content.forEach((item,index)=>{
......@@ -546,11 +1025,9 @@ export default {
}
})
}
if(text == 'month'){
this.loadAndUnloadListData.selectTimeDate = this.currentTime.month;
HttpReq.truckDispatching.xiequAreaQueryMonth({size:9999,createTime:this.loadAndUnloadListData.selectTimeDate,}).then((res) => {
if(text == 'week'){
HttpReq.truckDispatching.xiequAreaQueryMonth({createTime:this.currentTime.month}).then((res) => {
if(res.code == 200){
console.log(res.data.content);
let caiquName = [];
let workTime = [];
res.data.content.forEach((item,index)=>{
......@@ -563,11 +1040,9 @@ export default {
}
})
}
if(text == 'year'){
this.loadAndUnloadListData.selectTimeDate = this.currentTime.year;
HttpReq.truckDispatching.xiequAreaQueryYear({size:9999,createTime:this.loadAndUnloadListData.selectTimeDate,}).then((res) => {
if(text == 'month'){
HttpReq.truckDispatching.xiequAreaQueryYear({createTime:this.currentTime.year}).then((res) => {
if(res.code == 200){
console.log(res.data.content);
let caiquName = [];
let workTime = [];
res.data.content.forEach((item,index)=>{
......@@ -582,6 +1057,7 @@ export default {
}
},
echarts4Fn(){
echarts.init(document.getElementById('echarts4View')).dispose();
var myChart = echarts.init(document.getElementById('echarts4View'));
var option = {
tooltip: {
......@@ -641,87 +1117,174 @@ export default {
};
option && myChart.setOption(option);
},
//矿石产量比
//矿石产量比切换
oreProportionChangeTime(text){
this.oreProportionListData.selectTimeText = text;
if(text == 'day'){
this.oreProportionListData.selectTimeDate = this.currentTime.day;
HttpReq.truckDispatching.screenOreProportionDayQuery({size:9999,createTime:this.oreProportionListData.selectTimeDate,}).then((res) => {
if(res.code == 200){
let centerArray = [];
res.data.content.forEach((item,index)=>{
let a1 = {};
a1.value = item.num;
a1.name = item.name;
centerArray.push(a1);
})
this.oreProportionListData.proportionData = centerArray;
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(text == 'month'){
this.oreProportionListData.selectTimeDate = this.currentTime.month;
HttpReq.truckDispatching.screenOreProportionMonthQuery({size:9999,createTime:this.oreProportionListData.selectTimeDate,}).then((res) => {
if(text == 'week'){
HttpReq.truckDispatching.screenOreProportionMonthQuery().then((res) => {
if(res.code == 200){
let centerArray = [];
res.data.content.forEach((item,index)=>{
let a1 = {};
a1.value = item.num;
a1.name = item.name;
centerArray.push(a1);
})
this.oreProportionListData.proportionData = centerArray;
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(text == 'year'){
this.oreProportionListData.selectTimeDate = this.currentTime.year;
HttpReq.truckDispatching.screenOreProportionYearQuery({size:9999,createTime:this.oreProportionListData.selectTimeDate,}).then((res) => {
if(text == 'month'){
HttpReq.truckDispatching.screenOreProportionYearQuery().then((res) => {
if(res.code == 200){
let centerArray = [];
res.data.content.forEach((item,index)=>{
let a1 = {};
a1.value = item.num;
a1.name = item.name;
centerArray.push(a1);
})
this.oreProportionListData.proportionData = centerArray;
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();
}
}
})
}
},
echarts5Fn(){
var myChart = echarts.init(document.getElementById('echarts5View'));
var option = {
// 基于准备好的dom，初始化echarts实例
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: {
trigger: 'item'
},
color:['#1999D5', '#E68220','rgb(24,228,240)','#F3EF76','#F5335C'],
series: [
{
name:'产量(吨)',
type: 'pie',
radius: '50%',
label: {
show: true,
formatter: '{b}({d}%)',
color:'white',
fontSize:'14',
},
labelLine: {
show: true
},
data: this.oreProportionListData.proportionData,
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>`;
}
]
},
},
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(){
echarts.init(document.getElementById('echarts6View')).dispose();
var myChart = echarts.init(document.getElementById('echarts6View'));
var option = {
tooltip: {
......@@ -758,11 +1321,18 @@ export default {
},
//卸货点卸货量统计
echarts7Fn(){
echarts.init(document.getElementById('echarts7View')).dispose();
var myChart = echarts.init(document.getElementById('echarts7View'));
var option = {
tooltip: {
trigger: 'axis',
},
grid: {
left: '3%',
right: '8%',
bottom: '20%',
containLabel: true
},
xAxis: [
{
type: 'category',
......@@ -808,10 +1378,12 @@ export default {
data: this.echarts7Data.outputNum,
barWidth: 10,
itemStyle: {
normal: {
color: '#09EDFB'
}
}
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: '#00B7FF' },
{ offset: 1, color: '#2244AC' }
])
},
}
]
};
......@@ -853,13 +1425,17 @@ export default {
this.currentTime.year = currentFormatDate;
},
},
beforeDestroy() {
if(this.dataAnalysisTimer) {
clearInterval(this.dataAnalysisTimer);
}
},
}
</script>
<style scoped>
.dataAnalysisScrView{
position: absolute;
z-index: 1;
width: 100%;
height: 100%;
overflow: hidden;
......@@ -869,15 +1445,12 @@ export default {
.dataAnalysisScrView_leftView{
height: 100%;
width: 20%;
}
.dataAnalysisScrView_centerView{
height: 100%;
width: 60%;
position: relative;
z-index: 3;
}
.dataAnalysisScrView_rightView{
height: 100%;
width: 20%;
z-index: 3;
}
.dataAnalysisScrView_leftView>div{
width: 100%;
......@@ -978,21 +1551,16 @@ dd>div{
border-radius: 5px;
cursor: pointer;
}
#echarts1View{
position: absolute;
left: -5vh;
width: 100%;
height: 19vh;
left: -10vh;
top: -7vh;
width: 120%;
height: 27vh;
}
.outputRankView{
width: 100%;
height: 18.5vh;
overflow-y:auto;
scrollbar-width: none;
}
.outputRankView::-webkit-scrollbar {
display: none;
}
.l-left{
font-size:16px;
......@@ -1007,9 +1575,6 @@ dd>div{
.el-progress{
width: 70%;
}
.outputRankView >>> .el-progress__text{
color:white;
}
#echarts2View{
position: absolute;
left: 0vh;
......
src/views/MLargeScreen/components/dataScreening/index.vue
View file @ fcbbe8e9
......@@ -6,16 +6,37 @@
<div class="dataScrView_leftView_title">采区产量统计</div>
<div class="dataScrView_leftView_content">
<div class="dataScrView_leftView_content_view1">
<el-progress type="circle" :percentage="outputMineData.day.rate" :stroke-width="7" :width="60" :height="60"></el-progress>
<div style="color:white;margin-left:15px;">当前日产量：<span style="color:#02F7EF;">{{outputMineData.day.output}}吨</span></div>
<div class="dataScrView_leftView_content_view1_son1">{{parseInt(outputMineData.day.eff)}}%</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 class="dataScrView_leftView_content_view1">
<el-progress type="circle" :percentage="outputMineData.month.rate" :stroke-width="7" :width="60" :height="60"></el-progress>
<div style="color:white;margin-left:15px;">当前月产量：<span style="color:#02F7EF;">{{outputMineData.month.output}}吨</span></div>
<div class="dataScrView_leftView_content_view1_son1">{{parseInt(outputMineData.month.eff)}}%</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 class="dataScrView_leftView_content_view1">
<el-progress type="circle" :percentage="outputMineData.year.rate" :stroke-width="7" :width="60" :height="60"></el-progress>
<div style="color:white;margin-left:15px;">当前年产量：<span style="color:#02F7EF;">{{outputMineData.year.output}}吨</span></div>
<div class="dataScrView_leftView_content_view1_son1">{{parseInt(outputMineData.year.eff)}}%</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>
......@@ -81,40 +102,7 @@
<div :class="truckRankListData.selectFieldText == 'yunzai' ? '' : 'selectFieldStyle' " @click="truckChangeField('yunzai')">运载量</div>
<div :class="truckRankListData.selectFieldText == 'jiedan' ? '' : 'selectFieldStyle' " @click="truckChangeField('jiedan')">接单数</div>
</div>
<div class="dataScrView_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.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 class="dataScrView_leftView_content_views3" id="dataScrView_leftView_content_views3_1"></div>
</div>
</div>
<!-- 铲车司机排行榜-->
......@@ -130,33 +118,36 @@
<div class="dataScrView_leftView_content">
<div class="dataScrView_leftView_content_views2">
<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 == 'jiedan' ? '' : 'selectFieldStyle' " @click="forkLiftChangeField('jiedan')">装车数</div>
</div>
<div class="dataScrView_leftView_content_views3">
<div v-if="forkLiftRankListData.selectFieldText == 'time'">
<div v-for="(item,index) in forkLiftRankListData.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 class="dataScrView_leftView_content_views3" v-if="forkLiftRankListData.selectFieldText == 'time'">
<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.time}}h</div>
<div style="color:#BCF0FE;">{{item.createTime}}</div>
</div>
<div v-if="forkLiftRankListData.selectFieldText == 'yunzai'">
<div v-for="(item,index) in forkLiftRankListData.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 class="dataScrView_leftView_content_views3" v-if="forkLiftRankListData.selectFieldText == 'average'">
<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.average}}h</div>
<div style="color:#BCF0FE;">{{item.createTime}}</div>
</div>
<div v-if="forkLiftRankListData.selectFieldText == 'jiedan'">
<div v-for="(item,index) in forkLiftRankListData.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 class="dataScrView_leftView_content_views3" v-if="forkLiftRankListData.selectFieldText == 'yunzai'">
<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.yunzai}}吨</div>
<div style="color:#BCF0FE;">{{item.createTime}}</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>
......@@ -169,50 +160,124 @@
<div :class="centerViewData.moduleText == 'centerModule2' ? 'centerModuleSelectStyle' : ''" @click="centerSelectFn('centerModule2')">运载数据</div>
<div :class="centerViewData.moduleText == 'centerModule3' ? 'centerModuleSelectStyle' : ''" @click="centerSelectFn('centerModule3')">装载数据</div>
</div>
<div class="dataScrView_centerView_planNum">
<div class="dataScrView_centerView_planNum" v-if="centerViewData.moduleText == 'centerModule1'">
<div>
<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:#FFFFFF;font-size:14px;">今日计划量</div>
<div style="color:#00E9FD;font-size:16px;font-weight:600;">{{outputMineData.day.plan}}吨</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;">{{outputMineData.day.output}}吨</div>
<div style="color:#FFFFFF;font-size:14px;">今日完成量</div>
<div style="color:#00E9FD;font-size:16px;font-weight:600;">{{outputMineData.day.finish}}吨</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;">{{outputMineData.day.rate}}%</div>
<div style="color:#FFFFFF;font-size:14px;">今日完成率</div>
<div style="color:#00E9FD;font-size:16px;font-weight:600;">{{parseInt(outputMineData.day.eff)}}%</div>
</div>
<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;">{{outputMineData.month.dayPlan}}吨</div>
<div style="color:#FFFFFF;font-size:14px;">当月计划量</div>
<div style="color:#00E9FD;font-size:16px;font-weight:600;">{{outputMineData.month.plan}}吨</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;">{{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>
<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;">{{outputMineData.month.rate}}%</div>
<div style="color:#FFFFFF;font-size:14px;">单次运载平均里程</div>
<div style="color:#00E9FD;font-size:16px;font-weight:600;">{{carryCenterData.singleAverageMil}}KM</div>
</div>
<img src="../../../../assets/images/cutGraph/wanchenglv1.png">
</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>
</div>
......@@ -302,9 +367,12 @@
<div class="dataScrView_rightView_content">
<div class="realAlarmStyle">
<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>{{item.alarmexplain}}</div>
<div>{{item.alarmexplain ? item.alarmexplain : item.number + item.carbreak}}</div>
<div>{{item.createTime}}</div>
</div>
</div>
......@@ -343,9 +411,25 @@ export default {
},
//产量数据以及中间图表数据
outputMineData:{
day:{output:'',rate:0,dayPlan:'',},
month:{output:'',rate:0,dayPlan:'',},
year:{output:'',rate:0,dayPlan:'',},
day:{finish:'0',eff:0,plan:'0',},
month:{finish:'0',eff:0,plan:'0',},
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:{
......@@ -356,11 +440,12 @@ export default {
},
//卡车排行榜
truckRankListData:{
echartsX:'Km',
carclass:'卡车',
selectTimeText:'day',
selectFieldText:'juli',
listData:[],
selectTimeDate:'',
driverName:[],
driverSeriesData:[],
},
//铲车排行榜
forkLiftRankListData:{
......@@ -368,13 +453,12 @@ export default {
selectTimeText:'day',
selectFieldText:'time',
listData:[],
selectTimeDate:'',
},
//中间模块选择
centerViewData:{
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'],
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:{
......@@ -394,41 +478,16 @@ export default {
},
//矿石开采效率
exploitationEfficiencyData:{
rate1:[0.5],
dayYield1:1000,
dayMil1:300,
rate2:[0.5],
dayWorkTime2:1000,
dayYield2:300,
rate1:[0.4],
dayYield1:51,
dayMil1:32,
rate2:[0.2],
dayWorkTime2:8,
dayYield2:51,
},
//实时报警
realAlarmStyleData:{
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',
},
],
listData:[],
}
}
},
......@@ -442,70 +501,76 @@ export default {
this.$nextTick(()=>{
//获取采区当前日产量
HttpReq.truckDispatching.caiquAreaQueryDay({size:1,createTime:this.currentTime.day}).then((res) => {
if(res.code == 200){
let undueArray = {};
if(res.data.totalElements == 0){
undueArray.rate = 0;
undueArray.output = 0;
undueArray.dayPlan = 0;
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{
if(res.data.content[0].rate == ''){
undueArray.rate = 0;
undueArray.output = res.data.content[0].output;
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;
}
undueArray.eff = parseFloat(res[0].eff) * 100;
undueArray.finish = res[0].finish;
undueArray.plan = res[0].plan;
}
this.outputMineData.day = undueArray;
}
this.outputMineData.day = undueArray;
})
//获取采区当前月产量
HttpReq.truckDispatching.caiquAreaQueryMonth({size:1,createTime:this.currentTime.month}).then((res) => {
if(res.code == 200){
let undueArray = {};
if(res.data.totalElements == 0){
undueArray.rate = 0;
undueArray.output = 0;
undueArray.dayPlan = 0;
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{
if(res.data.content[0].rate == ''){
undueArray.rate = 0;
undueArray.output = res.data.content[0].output;
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;
}
undueArray.eff = parseFloat(res[0].eff) * 100;
undueArray.finish = res[0].finish;
undueArray.plan = res[0].plan;
}
this.outputMineData.month = undueArray;
}
this.outputMineData.month = undueArray;
})
//获取采区当前年产量
HttpReq.truckDispatching.caiquAreaQueryYear({size:1,createTime:this.currentTime.year}).then((res) => {
if(res.code == 200){
let undueArray = {};
if(res.data.totalElements == 0){
undueArray.rate = 0;
undueArray.output = 0;
undueArray.dayPlan = 0;
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{
if(res.data.content[0].rate == ''){
undueArray.rate = 0;
undueArray.output = res.data.content[0].output;
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;
}
undueArray.eff = parseFloat(res[0].eff) * 100;
undueArray.finish = res[0].finish;
undueArray.plan = res[0].plan;
}
this.outputMineData.year = undueArray;
}
this.outputMineData.year = undueArray;
})
//获取司机信息
HttpReq.truckDispatching.screenDriverInformationQuery({size:9999}).then((res) => {
......@@ -527,35 +592,98 @@ export default {
}
})
//获取卡车排行榜
this.truckRankListData.selectTimeDate = this.currentTime.day;
let truckQuery1 = {};
truckQuery1.size = 5;
truckQuery1.sort = this.truckRankListData.selectFieldText + ',desc';
truckQuery1.carclass = this.truckRankListData.carclass;
truckQuery1.createTime = this.truckRankListData.selectTimeDate;
this.$nextTick(()=>{
HttpReq.truckDispatching.screenDriverInformationQuery(truckQuery1).then((res) => {
if(res.code == 200){
this.truckRankListData.listData = res.data.content;
}
})
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();
})
}
})
//获取铲车排行榜
this.forkLiftRankListData.selectTimeDate = this.currentTime.day;
let forkLiftQuery1 = {};
forkLiftQuery1.size = 5;
forkLiftQuery1.sort = this.forkLiftRankListData.selectFieldText + ',desc';
forkLiftQuery1.carclass = this.forkLiftRankListData.carclass;
forkLiftQuery1.createTime = this.forkLiftRankListData.selectTimeDate;
this.$nextTick(()=>{
HttpReq.truckDispatching.screenDriverInformationQuery(forkLiftQuery1).then((res) => {
if(res.code == 200){
this.forkLiftRankListData.listData = res.data.content;
}
})
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图表
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) => {
if(res.code == 200){
......@@ -582,17 +710,240 @@ export default {
this.initLiquidEchart1();
this.initLiquidEchart2();
//实时报警
HttpReq.truckDispatching.callPoliceQuery({status:1}).then((res) => {
HttpReq.truckDispatching.callPoliceQuery({status:1,size:9999}).then((res) => {
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(() => {
//获取采区当前日产量
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)
})
}else{
if(this.dataScreeningTimer) {
......@@ -605,14 +956,46 @@ export default {
//卡车切换时间
truckChangeTime(text){
this.truckRankListData.selectTimeText = text;
let truckQuery1 = {};
truckQuery1.size = 5;
truckQuery1.sort = this.truckRankListData.selectFieldText + ',desc';
truckQuery1.carclass = this.truckRankListData.carclass;
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;
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(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 {
truckQuery1.size = 5;
truckQuery1.sort = this.truckRankListData.selectFieldText + ',desc';
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(()=>{
HttpReq.truckDispatching.screenDriverInformationQuery(truckQuery1).then((res) => {
if(res.code == 200){
this.truckRankListData.listData = res.data.content;
}
})
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();
})
}
})
},
//卡车排行榜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){
this.forkLiftRankListData.selectTimeText = text;
let forkLiftQuery1 = {};
forkLiftQuery1.size = 5;
forkLiftQuery1.sort = this.forkLiftRankListData.selectFieldText + ',desc';
forkLiftQuery1.carclass = this.forkLiftRankListData.carclass;
if(text == 'day'){
this.forkLiftRankListData.selectTimeDate = this.currentTime.day;
HttpReq.truckDispatching.kaChanRankListDayQuery(forkLiftQuery1).then((res) => {
this.forkLiftRankListData.listData = res;
})
}
if(text == 'month'){
this.forkLiftRankListData.selectTimeDate = this.currentTime.month;
if(text == 'week'){
HttpReq.truckDispatching.kaChanRankListZhouQuery(forkLiftQuery1).then((res) => {
this.forkLiftRankListData.listData = res;
})
}
if(text == 'year'){
this.forkLiftRankListData.selectTimeDate = this.currentTime.year;
if(text == 'month'){
HttpReq.truckDispatching.kaChanRankListMouQuery(forkLiftQuery1).then((res) => {
this.forkLiftRankListData.listData = res;
})
}
},
//铲车切换字段排序
......@@ -651,13 +1153,20 @@ export default {
forkLiftQuery1.size = 5;
forkLiftQuery1.sort = this.forkLiftRankListData.selectFieldText + ',desc';
forkLiftQuery1.carclass = this.forkLiftRankListData.carclass;
forkLiftQuery1.createTime = this.forkLiftRankListData.selectTimeDate;
this.$nextTick(()=>{
HttpReq.truckDispatching.screenDriverInformationQuery(forkLiftQuery1).then((res) => {
if(res.code == 200){
this.forkLiftRankListData.listData = res.data.content;
}
})
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;
})
}
})
},
//中间模块选择
......@@ -772,10 +1281,12 @@ export default {
this.chartsLiquid.setOption({
series: [{
type: 'liquidFill',
name: '比率\n' + this.exploitationEfficiencyData.rate1 * 100 + '%',
radius: '70px',
data: this.exploitationEfficiencyData.rate1,
label: {
normal: {
formatter: '{a}',
color: '#05ADFB',
insideColor: '#fff',
textStyle: {
......@@ -825,10 +1336,12 @@ export default {
this.chartsLiquid.setOption({
series: [{
type: 'liquidFill',
name: '比率\n' + this.exploitationEfficiencyData.rate2 * 100 + '%',
radius: '70px',
data: this.exploitationEfficiencyData.rate2,
label: {
normal: {
formatter: '{a}',
color: 'rgb(3, 254, 254)',
insideColor: '#fff',
textStyle: {
......@@ -915,13 +1428,27 @@ export default {
</script>
<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{
color:white;
font-weight: 600;
}
.dataScrView{
position: absolute;
z-index: 1;
width: 100%;
height: 100%;
overflow: hidden;
......@@ -931,6 +1458,7 @@ export default {
.dataScrView_leftView{
height: 100%;
width: 20%;
z-index: 3;
}
.dataScrView_centerView{
height: 100%;
......@@ -940,12 +1468,11 @@ export default {
.dataScrView_rightView{
height: 100%;
width: 20%;
z-index: 3;
}
.dataScrView_leftView>div{
width: 100%;
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);
padding: 5px 7px;
box-sizing: border-box;
......@@ -954,8 +1481,6 @@ export default {
.dataScrView_rightView>div{
width: 100%;
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);
padding: 5px 7px;
box-sizing: border-box;
......@@ -985,6 +1510,16 @@ export default {
align-items: center;
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{
width: 100%;
display: flex;
......@@ -1108,14 +1643,65 @@ dd>div{
.dataScrView_leftView_content_views3::-webkit-scrollbar {
display: none;
}
.dataScrView_leftView_content_views3>div>div{
font: 18px;
font-weight: 600;
.forkliftRank1{
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/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{
margin-top: 7px;
.forkliftRank3{
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{
position: absolute;
......@@ -1126,6 +1712,7 @@ dd>div{
padding: 5px 7px;
box-sizing: border-box;
overflow: hidden;
z-index: 3;
}
.dataScrView_centerView_title{
margin-bottom: 5px;
......
src/views/MLargeScreen/components/intelligentSchedul/index.vue
View file @ fcbbe8e9
......@@ -1169,7 +1169,6 @@ export default {
<style scoped>
.intelligentSchScrView{
position: absolute;
z-index: 1;
width: 100%;
height: 100%;
overflow: hidden;
......@@ -1179,10 +1178,12 @@ export default {
.intelligentSchScrView_leftView{
height: 100%;
width: 20%;
z-index: 3;
}
.intelligentSchScrView_rightView{
height: 100%;
width: 20%;
z-index: 3;
}
.intelligentSchScrView_leftView1{
width: 100%;
......
src/views/MLargeScreen/index.vue
View file @ fcbbe8e9
......@@ -34,7 +34,8 @@
<kaungEZUIKitJs v-if="kaungEZUIKitJsShow"/>
</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_closePic" @click="closeMonitorCoverFn"></div>
......@@ -42,7 +43,6 @@
<video id="monitorCover1Id" width="1300" height="700" muted autoplay></video>
</div>
</div>
</div>
</template>
......@@ -97,7 +97,7 @@ export default {
this.timer = setInterval(() => {
this.setNowTimes();
}, 1000)
window.addEventListener('message', this.handleMessage);
// window.addEventListener('message', this.handleMessage);
},
methods: {
loadData() {
......@@ -318,6 +318,7 @@ export default {
top: 0px;
position: absolute;
overflow: hidden;
z-index: 2;
}
.bigScreenView{
width: 100vw;
......@@ -331,7 +332,7 @@ export default {
background:no-repeat center center url('~@/assets/images/cutGraph/top_title.png');
background-size:100% 100%;
position: relative;
z-index: 1;
z-index: 3;
}
.content_view{
width: 100%;
......@@ -343,7 +344,7 @@ export default {
.videoSelectView{
position: absolute;
top: 5.5vh;
z-index: 1;
z-index: 3;
width: 100%;
height: 5.5vh;
background-color: rgb(102,204,255);
......@@ -360,7 +361,7 @@ export default {
.jiankongView{
position: absolute;
top: 11vh;
z-index: 1;
z-index: 3;
width: 100%;
}
.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 @@
<div class="content" style="margin-top:15px;">
<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="dayPlan" label="日计划量" align="center"></el-table-column>
<el-table-column prop="output" label="实际日产量" align="center"></el-table-column>
<el-table-column prop="rate" label="完成率" align="center"></el-table-column>
<el-table-column prop="nowPlan" label="日计划量" align="center"></el-table-column>
<el-table-column prop="total" 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="shovel" label="铲车车数" align="center"></el-table-column>
<el-table-column prop="lorry" label="卡车车数" align="center"></el-table-column>
......@@ -77,11 +77,9 @@ export default {
this.$nextTick(()=>{
HttpReq.truckDispatching.caiquAreaQueryDay(param).then((res) => {
if(res.code == 200){
this.loading = false;
this.tableData = res.data.content;
this.total = res.data.totalElements;
}
this.loading = false;
this.tableData = res;
this.total = res.length;
})
})
......
src/views/performanceStatistics/caiquOutput/month/index.vue
View file @ fcbbe8e9
......@@ -23,9 +23,9 @@
<div class="content" style="margin-top:15px;">
<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="dayPlan" label="月计划量" align="center"></el-table-column>
<el-table-column prop="output" label="实际月产量" align="center"></el-table-column>
<el-table-column prop="rate" label="完成率" align="center"></el-table-column>
<el-table-column prop="nowPlan" label="月计划量" align="center"></el-table-column>
<el-table-column prop="total" 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="shovel" label="铲车车数" align="center"></el-table-column>
<el-table-column prop="lorry" label="卡车车数" align="center"></el-table-column>
......@@ -77,11 +77,9 @@ export default {
this.$nextTick(()=>{
HttpReq.truckDispatching.caiquAreaQueryMonth(param).then((res) => {
if(res.code == 200){
this.loading = false;
this.tableData = res.data.content;
this.total = res.data.totalElements;
}
this.loading = false;
this.tableData = res;
this.total = res.length;
})
})
......
src/views/performanceStatistics/caiquOutput/year/index.vue
View file @ fcbbe8e9
......@@ -23,9 +23,9 @@
<div class="content" style="margin-top:15px;">
<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="dayPlan" label="年计划量" align="center"></el-table-column>
<el-table-column prop="output" label="实际年产量" align="center"></el-table-column>
<el-table-column prop="rate" label="完成率" align="center"></el-table-column>
<el-table-column prop="nowPlan" label="年计划量" align="center"></el-table-column>
<el-table-column prop="total" 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="shovel" label="铲车车数" align="center"></el-table-column>
<el-table-column prop="lorry" label="卡车车数" align="center"></el-table-column>
......@@ -77,11 +77,9 @@ export default {
this.$nextTick(()=>{
HttpReq.truckDispatching.caiquAreaQueryYear(param).then((res) => {
if(res.code == 200){
this.loading = false;
this.tableData = res.data.content;
this.total = res.data.totalElements;
}
this.loading = false;
this.tableData = res;
this.total = res.length;
})
})
......
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