Commit 3aa6f4b2 authored by zhanglw's avatar zhanglw

首页运载量图表

parent 239d6ee4
...@@ -2062,7 +2062,8 @@ var HttpReq = function(){ ...@@ -2062,7 +2062,8 @@ var HttpReq = function(){
//大屏——数据总览——中间下方图表 //大屏——数据总览——中间下方图表
apiPlanTime1Query: function(param){ apiPlanTime1Query: function(param){
return request({ return request({
url: '/api/Plan/time', // url: '/api/Plan/time',
url: '/api/carManager/productionByHour',
method: 'get', method: 'get',
params:param, params:param,
}) })
......
...@@ -134,7 +134,7 @@ ...@@ -134,7 +134,7 @@
<div class="voiceAppContent_4"> <div class="voiceAppContent_4">
<button class="voiceAppContent_4_btns" @click="openVoiceView('广播')">广播</button> <button class="voiceAppContent_4_btns" @click="openVoiceView('广播')">广播</button>
<button class="voiceAppContent_4_btns" @click="openVoiceView('紧急通知')">紧急通知</button> <button class="voiceAppContent_4_btns" @click="openVoiceView('紧急通知')">紧急通知</button>
<button class="voiceAppContent_4_btns">下班</button> <button class="voiceAppContent_4_btns" @click="openVoiceView('下班')">下班</button>
</div> </div>
</div> </div>
</div> </div>
...@@ -188,7 +188,9 @@ ...@@ -188,7 +188,9 @@
</div> </div>
<!-- 录音弹窗 --> <!-- 录音弹窗 -->
<div class="peopleScheAssembly" v-if="voiceViewShow"> <div class="peopleScheAssembly" v-if="voiceViewShow">
<div style="color:white;font-size:14px;margin-bottom:1vh;font-size: 18px;font-weight: 600;">车辆调度<span style="font-size:14px">{{curPaItem.pointName}}</span></div> <div style="color:white;font-size:14px;margin-bottom:1vh;font-size: 18px;font-weight: 600;">{{actionType==='下班'?'车辆下班':'车辆调度'}}
<!-- <span style="font-size:14px">{{curPaItem.pointName}}</span>-->
</div>
<el-select v-show="actionType!=='通话'" v-model="selectCarFleet" placeholder="请选择车队" style="width:100%;margin:5px" @change="toSearchFn()" :popper-append-to-body="false"> <el-select v-show="actionType!=='通话'" v-model="selectCarFleet" placeholder="请选择车队" style="width:100%;margin:5px" @change="toSearchFn()" :popper-append-to-body="false">
<el-option v-for="(item,index) in carFleetData" :key="index" :label="item.name" :value="item.name" style="font-size:14px;"></el-option> <el-option v-for="(item,index) in carFleetData" :key="index" :label="item.name" :value="item.name" style="font-size:14px;"></el-option>
</el-select> </el-select>
...@@ -238,7 +240,8 @@ ...@@ -238,7 +240,8 @@
</div> </div>
</div> </div>
<div class="voiceAppContent_4"> <div class="voiceAppContent_4">
<button class="voiceAppContent_4_btns" @click="closeVoiceView()">关闭录音</button> <button v-show="actionType==='下班'" class="voiceAppContent_4_btns" @click="closeVoiceView(1)">下班</button>
<button class="voiceAppContent_4_btns" @click="closeVoiceView()">关闭</button>
</div> </div>
</div> </div>
</div> </div>
...@@ -366,8 +369,11 @@ export default { ...@@ -366,8 +369,11 @@ export default {
//开启录音 //开启录音
this.recOpen(); this.recOpen();
}, },
closeVoiceView(){ closeVoiceView(isXb){
this.voiceViewShow=false; this.voiceViewShow=false;
if(isXb){
}
//结束录音 //结束录音
this.recClose() this.recClose()
}, },
......
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
<div class="dataScrView_centerView_title"> <div class="dataScrView_centerView_title">
<div :class="centerViewData.moduleText == 'centerModule1' ? 'centerModuleSelectStyle' : ''" @click="centerSelectFn('centerModule1')">产量数据</div> <div :class="centerViewData.moduleText == 'centerModule1' ? 'centerModuleSelectStyle' : ''" @click="centerSelectFn('centerModule1')">产量数据</div>
<div :class="centerViewData.moduleText == 'centerModule2' ? 'centerModuleSelectStyle' : ''" @click="centerSelectFn('centerModule2')">运载数据</div> <div :class="centerViewData.moduleText == 'centerModule2' ? 'centerModuleSelectStyle' : ''" @click="centerSelectFn('centerModule2')">运载数据</div>
<div :class="centerViewData.moduleText == 'centerModule3' ? 'centerModuleSelectStyle' : ''" @click="centerSelectFn('centerModule3')">装载数据</div> <!-- <div :class="centerViewData.moduleText == 'centerModule3' ? 'centerModuleSelectStyle' : ''" @click="centerSelectFn('centerModule3')">装载数据</div>-->
</div> </div>
<div class="dataScrView_centerView_planNum" v-if="centerViewData.moduleText == 'centerModule1'"> <div class="dataScrView_centerView_planNum" v-if="centerViewData.moduleText == 'centerModule1'">
<div> <div>
...@@ -162,7 +162,7 @@ export default { ...@@ -162,7 +162,7 @@ export default {
//中间模块选择 //中间模块选择
centerViewData:{ centerViewData:{
moduleText:'centerModule1', moduleText:'centerModule1',
xAxisData:['7:00', '8:00', '9:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00'], xAxisData:['00:00','01:00','02:00','03:00','04:00','05:00','06:00','07:00', '08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00','20:00','21:00','22:00','23:00'],
seriesData:[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], seriesData:[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
}, },
} }
...@@ -171,274 +171,274 @@ export default { ...@@ -171,274 +171,274 @@ export default {
this.loadData(); this.loadData();
}, },
methods:{ methods:{
loadData(){ loadData() {
//获取采区当前日产量 //获取采区当前日产量
HttpReq.truckDispatching.apiPlanDayQuery().then((res) => { HttpReq.truckDispatching.apiPlanDayQuery().then((res) => {
let undueArray = {}; let undueArray = {};
if(res.length == 0 || JSON.stringify(res[0]) == '{}'){ if (res.length == 0 || JSON.stringify(res[0]) == '{}') {
undueArray.eff = 0; undueArray.eff = 0;
undueArray.finish = 0; undueArray.finish = 0;
undueArray.plan = 0; undueArray.plan = 0;
}else{ } else {
if(res[0].eff == ''){ if (res[0].eff == '') {
undueArray.eff = 0; undueArray.eff = 0;
undueArray.finish = res[0].finish; undueArray.finish = res[0].finish;
undueArray.plan = res[0].plan; undueArray.plan = res[0].plan;
}else{ } else {
undueArray.eff = parseFloat(res[0].eff) * 100; undueArray.eff = parseFloat(res[0].eff) * 100;
undueArray.finish = res[0].finish; undueArray.finish = res[0].finish;
undueArray.plan = res[0].plan; undueArray.plan = res[0].plan;
} }
}
this.outputMineData.day = undueArray;
})
//获取采区当前月产量
HttpReq.truckDispatching.apiPlanMonthQuery().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 {
undueArray.eff = parseFloat(res[0].eff) * 100;
undueArray.finish = res[0].finish;
undueArray.plan = res[0].plan;
}
}
this.outputMineData.month = undueArray;
})
//获取采区当前年产量
HttpReq.truckDispatching.apiPlanYearQuery().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 {
undueArray.eff = parseFloat(res[0].eff) * 100;
undueArray.finish = res[0].finish;
undueArray.plan = res[0].plan;
}
}
this.outputMineData.year = undueArray;
})
//中间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 = res.data || [];
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 = res[0].allmil ? parseFloat(res[0].allmil).toFixed(3) : 0;
this.carryCenterData.dayAllCarNum = res[0].num;
this.carryCenterData.singleAverageTime = parseFloat(res[0].time).toFixed(2);
this.carryCenterData.singleAverageMil = res[0].averagemil ? parseFloat(res[0].averagemil).toFixed(3) : 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;
}
})
this.DPcomputer5BoxTimer = setInterval(() => {
//获取采区当前日产量
HttpReq.truckDispatching.apiPlanDayQuery().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 {
undueArray.eff = parseFloat(res[0].eff) * 100;
undueArray.finish = res[0].finish;
undueArray.plan = res[0].plan;
}
}
this.outputMineData.day = undueArray;
})
//获取采区当前月产量
HttpReq.truckDispatching.apiPlanMonthQuery().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 {
undueArray.eff = parseFloat(res[0].eff) * 100;
undueArray.finish = res[0].finish;
undueArray.plan = res[0].plan;
}
}
this.outputMineData.month = undueArray;
})
//获取采区当前年产量
HttpReq.truckDispatching.apiPlanYearQuery().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 {
undueArray.eff = parseFloat(res[0].eff) * 100;
undueArray.finish = res[0].finish;
undueArray.plan = res[0].plan;
}
}
this.outputMineData.year = undueArray;
})
//中间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 = res.data || [];
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 = res[0].allmil ? parseFloat(res[0].allmil).toFixed(3) : 0;
this.carryCenterData.dayAllCarNum = res[0].num;
this.carryCenterData.singleAverageTime = parseFloat(res[0].time).toFixed(2);
this.carryCenterData.singleAverageMil = res[0].averagemil ? parseFloat(res[0].averagemil).toFixed(3) : 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;
}
})
}, 10000)
},
//中间模块选择
centerSelectFn(text) {
this.centerViewData.moduleText = text;
},
//中间模块Echarts
centerEcharts() {
echarts.init(document.getElementById('centerEchartsView')).dispose();
var myChart = echarts.init(document.getElementById('centerEchartsView'));
var option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
grid: {
top: '35%',
left: '1%',
right: '1%',
bottom: '2%',
containLabel: true
},
xAxis: [
{
type: 'category',
data: this.centerViewData.xAxisData,
// axisTick: {
// alignWithLabel: true
// },
// axisPointer: {
// type: 'shadow'
// },
axisLabel: {
show: true,
textStyle: {
color: 'white'
} }
this.outputMineData.day = undueArray; },
}) axisLine: {
//获取采区当前月产量 lineStyle: {
HttpReq.truckDispatching.apiPlanMonthQuery().then((res) => { color: 'white',
let undueArray = {}; width: 1
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{
undueArray.eff = parseFloat(res[0].eff) * 100;
undueArray.finish = res[0].finish;
undueArray.plan = res[0].plan;
}
} }
this.outputMineData.month = undueArray; }
}) }
//获取采区当前年产量 ],
HttpReq.truckDispatching.apiPlanYearQuery().then((res) => { yAxis: [
let undueArray = {}; {
if(res.length == 0 || JSON.stringify(res[0]) == '{}'){ type: 'value',
undueArray.eff = 0; axisLabel: {
undueArray.finish = 0; show: true,
undueArray.plan = 0; textStyle: {
}else{ color: 'white'
if(res[0].eff == ''){
undueArray.eff = 0;
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; },
}) splitLine: {
//中间echarts图表 lineStyle: {
HttpReq.truckDispatching.apiPlanTime1Query().then((res) => { // 使用深浅的间隔色
let arr3 = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]; color: ['rgba(255,255,255,0.3)']
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 = res[0].allmil ? parseFloat(res[0].allmil).toFixed(3) : 0;
this.carryCenterData.dayAllCarNum = res[0].num;
this.carryCenterData.singleAverageTime = parseFloat(res[0].time).toFixed(2);
this.carryCenterData.singleAverageMil = res[0].averagemil ? parseFloat(res[0].averagemil).toFixed(3) : 0;
} }
}) },
//中间echarts装载数据 axisLine: {
HttpReq.truckDispatching.apiPlanZMonth1Query().then((res) => { lineStyle: {
if(res.length != 0){ color: 'white',
this.loadCenterData.dayAllLoad1 = res[0].finish; width: 0
this.loadCenterData.dayAverageLoad1 = parseFloat(res[0].pfin).toFixed(2);
this.loadCenterData.dayAllTime = res[0].time;
this.loadCenterData.dayLoadCarNum = res[0].num;
} }
}) }
}
this.DPcomputer5BoxTimer = setInterval(() => { ],
//获取采区当前日产量 series: [
HttpReq.truckDispatching.apiPlanDayQuery().then((res) => { {
let undueArray = {}; name: '重量(吨)',
if(res.length == 0 || JSON.stringify(res[0]) == '{}'){ type: 'bar',
undueArray.eff = 0; barWidth: 20,
undueArray.finish = 0; data: this.centerViewData.seriesData,
undueArray.plan = 0; itemStyle: {
}else{ color: '#01CBF6'
if(res[0].eff == ''){ },
undueArray.eff = 0; }
undueArray.finish = res[0].finish; ]
undueArray.plan = res[0].plan; };
}else{ option && myChart.setOption(option);
undueArray.eff = parseFloat(res[0].eff) * 100; },
undueArray.finish = res[0].finish;
undueArray.plan = res[0].plan;
}
}
this.outputMineData.day = undueArray;
})
//获取采区当前月产量
HttpReq.truckDispatching.apiPlanMonthQuery().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{
undueArray.eff = parseFloat(res[0].eff) * 100;
undueArray.finish = res[0].finish;
undueArray.plan = res[0].plan;
}
}
this.outputMineData.month = undueArray;
})
//获取采区当前年产量
HttpReq.truckDispatching.apiPlanYearQuery().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{
undueArray.eff = parseFloat(res[0].eff) * 100;
undueArray.finish = res[0].finish;
undueArray.plan = res[0].plan;
}
}
this.outputMineData.year = undueArray;
})
//中间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 = res[0].allmil ? parseFloat(res[0].allmil).toFixed(3) : 0;
this.carryCenterData.dayAllCarNum = res[0].num;
this.carryCenterData.singleAverageTime = parseFloat(res[0].time).toFixed(2);
this.carryCenterData.singleAverageMil = res[0].averagemil ? parseFloat(res[0].averagemil).toFixed(3) : 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;
}
})
},10000)
},
//中间模块选择
centerSelectFn(text){
this.centerViewData.moduleText = text;
},
//中间模块Echarts
centerEcharts(){
echarts.init(document.getElementById('centerEchartsView')).dispose();
var myChart = echarts.init(document.getElementById('centerEchartsView'));
var option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
grid: {
top: '35%',
left: '1%',
right: '1%',
bottom: '2%',
containLabel: true
},
xAxis: [
{
type: 'category',
data: this.centerViewData.xAxisData,
axisTick: {
alignWithLabel: true
},
axisPointer: {
type: 'shadow'
},
axisLabel: {
show: true,
textStyle: {
color: 'white'
}
},
axisLine: {
lineStyle: {
color: 'white',
width: 1
}
}
}
],
yAxis: [
{
type: 'value',
axisLabel: {
show: true,
textStyle: {
color: 'white'
}
},
splitLine: {
lineStyle: {
// 使用深浅的间隔色
color: ['rgba(255,255,255,0.3)']
}
},
axisLine: {
lineStyle: {
color: 'white',
width: 0
}
}
}
],
series: [
{
name: '重量(吨)',
type: 'bar',
barWidth: 20,
data: this.centerViewData.seriesData,
itemStyle: {
color: '#01CBF6'
},
}
]
};
option && myChart.setOption(option);
},
}, },
beforeDestroy(){ beforeDestroy(){
if(this.DPcomputer5BoxTimer) { if(this.DPcomputer5BoxTimer) {
...@@ -524,4 +524,4 @@ export default { ...@@ -524,4 +524,4 @@ export default {
height: 18vh; height: 18vh;
position: absolute; position: absolute;
} }
</style> </style>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment