Skip to content

卡
卡车调度系统
Commit bd2d82b1 authored by caicaicai's avatar caicaicai
Browse files
Options

修改

parent c965b260
Hide whitespace changes
Inline Side-by-side
Showing with 676 additions and 14 deletions
src/assets/js/common.js
View file @ bd2d82b1
...@@ -1721,6 +1721,14 @@ var HttpReq = function(){ ...@@ -1721,6 +1721,14 @@ var HttpReq = function(){
params:param, params:param,
}) })
}, },
//大屏——数据总览——获取天气
getWeatherInforQuery: function(param){
return request({
url: 'http://wthrcdn.etouch.cn/weather_mini?city=济南',
method: 'get',
params:param,
})
},
......
src/views/MLargeScreen/components/dataScreening/index.vue
View file @ bd2d82b1
...@@ -64,11 +64,229 @@ ...@@ -64,11 +64,229 @@
</div> </div>
</div> </div>
</div> </div>
<!-- 卡车司机排行榜-->
<div>
<div class="dataScrView_leftView_title truck_titleStyle">
<div>卡车司机排行榜</div>
<div class="driverTitleDateStyle">
<div :class="truckRankListData.selectTimeText == 'day' ? 'driverTitleDateStyle_son1' : 'driverTitleDateStyle_son2' " @click="truckChangeTime('day')">日</div>
<div :class="truckRankListData.selectTimeText == 'week' ? 'driverTitleDateStyle_son1' : 'driverTitleDateStyle_son2' " @click="truckChangeTime('week')">周</div>
<div :class="truckRankListData.selectTimeText == 'month' ? 'driverTitleDateStyle_son1' : 'driverTitleDateStyle_son2' " @click="truckChangeTime('month')">月</div>
</div>
</div>
<div class="dataScrView_leftView_content">
<div class="dataScrView_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="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>
</div>
<!-- 电铲司机排行榜-->
<div>
<div class="dataScrView_leftView_title truck_titleStyle">
<div>电铲司机排行榜</div>
<div class="driverTitleDateStyle">
<div :class="forkLiftRankListData.selectTimeText == 'day' ? 'driverTitleDateStyle_son1' : 'driverTitleDateStyle_son2' " @click="forkLiftChangeTime('day')">日</div>
<div :class="forkLiftRankListData.selectTimeText == 'week' ? 'driverTitleDateStyle_son1' : 'driverTitleDateStyle_son2' " @click="forkLiftChangeTime('week')">周</div>
<div :class="forkLiftRankListData.selectTimeText == 'month' ? 'driverTitleDateStyle_son1' : 'driverTitleDateStyle_son2' " @click="forkLiftChangeTime('month')">月</div>
</div>
</div>
<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 == '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>
<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 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>
</div>
</div>
</div> </div>
<div class="dataScrView_centerView"> <div class="dataScrView_centerView">
<div class="position: relative;">
<div class="dataScrView_centerView_title">
<div :class="centerViewData.moduleText == 'centerModule1' ? 'centerModuleSelectStyle' : ''" @click="centerSelectFn('centerModule1')">产量数据</div>
<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>
<div>
<div style="color:#FFFFFF;font-size:14px;">今日目标计划量</div>
<div style="color:#00E9FD;font-size:16px;font-weight:600;">{{outputMineData.day.dayPlan}}吨</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>
<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>
<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>
<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>
<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>
<img src="../../../../assets/images/cutGraph/wanchenglv1.png">
</div>
</div>
<div id="centerEchartsView"></div>
</div>
</div> </div>
<div class="dataScrView_rightView"> <div class="dataScrView_rightView">
<!-- 气象数据 -->
<div>
<div class="dataScrView_rightView_title">气象数据</div>
<div class="dataScrView_rightView_content">
<div class="todayWeather1">
<div style="font-size:40px;margin-right:30px;">{{weatherData.today.qiwen}}℃</div>
<img src="../../../../assets/images/cutGraph/sunny.png" height="30">
<div style="font-size:18px;">{{weatherData.today.tianqiText}} / {{currentTime.day}}</div>
</div>
<div class="todayWeather2">
<div v-for="(item,index) in weatherData.futureDay" :key="index">
<div style="color:#D0DAFF;">{{item.riqi}}</div>
<!-- <img :src=" '../../../../assets/images/cutGraph/' + item.tianqi + '.png' " height="30"> -->
<img src="../../../../assets/images/cutGraph/sunny.png" height="30">
<div style="color:#D0DAFF;">{{item.qiwen}}℃</div>
</div>
</div>
<div class="todayWeather3">
<img src="../../../../assets/images/cutGraph/fengli1.png" height="45">
<div>风力：{{weatherData.today.fengli}}级</div>
<div>
<div>温度：{{weatherData.today.qiwen}}℃</div>
<div>湿度：{{weatherData.today.shidu}}%</div>
</div>
</div>
</div>
</div>
<!-- 车辆工时-->
<div>
<div class="dataScrView_rightView_title truck_titleStyle">
<div>车辆工时</div>
<div class="driverTitleDateStyle">
<div :class="carWorkTimeData.selectTimeText == 'day' ? 'driverTitleDateStyle_son1' : 'driverTitleDateStyle_son2' " @click="carWorkTimeChangeTime('day')">日</div>
<div :class="carWorkTimeData.selectTimeText == 'week' ? 'driverTitleDateStyle_son1' : 'driverTitleDateStyle_son2' " @click="carWorkTimeChangeTime('week')">月</div>
<div :class="carWorkTimeData.selectTimeText == 'month' ? 'driverTitleDateStyle_son1' : 'driverTitleDateStyle_son2' " @click="carWorkTimeChangeTime('month')">年</div>
</div>
</div>
<div class="dataScrView_rightView_content">
<div class="carWorkTimeStyle">
<div v-for="(item,index) in carWorkTimeData.listData" :key="index">
<div class="carPicStyle1">
<img src="../../../../assets/images/cutGraph/huoyunqiche1.png">
</div>
<div class="carPicStyle2">
<div style="margin-top:0.5vh;font-size:17px;">{{item.carName}}</div>
<div style="font-size:14px;margin-top:1.5vh;">总工时：<b>{{item.workTime}}</b>H</div>
<div style="font-size:14px;margin-top:1vh;">闲置率：<b>{{item.unused}}</b>%</div>
</div>
</div>
</div>
</div>
</div>
<!-- 矿石开采效率 -->
<div>
<div class="dataScrView_rightView_title">矿石开采效率</div>
<div class="dataScrView_rightView_content">
<div class="dataScrView_rightView_content_view1">
<el-progress type="circle" :percentage="outputMineData.day.rate" :stroke-width="7" :width="80" :height="80"></el-progress>
<div style="color:white;margin-left:15px;">当前日产量：<span style="color:#02F7EF;">{{outputMineData.day.output}}吨</span></div>
</div>
<div class="dataScrView_rightView_content_view1">
<div style="color:white;margin-left:15px;">当前月产量：<span style="color:#02F7EF;">{{outputMineData.month.output}}吨</span></div>
<el-progress type="circle" :percentage="outputMineData.month.rate" :stroke-width="7" :width="80" :height="80"></el-progress>
</div>
</div>
</div>
</div> </div>
</div> </div>
...@@ -76,21 +294,23 @@ ...@@ -76,21 +294,23 @@
<script> <script>
import { Tools, HttpReq, Dates} from '@/assets/js/common.js'; import { Tools, HttpReq, Dates} from '@/assets/js/common.js';
import * as echarts from 'echarts';
export default { export default {
data() { data() {
return { return {
whetherShow:false, whetherShow:false,
//采区产量统计 //时间
currentTime:{ //时间 currentTime:{
day:'', day:'',
month:'', month:'',
year:'', year:'',
}, },
outputMineData:{ //产量数据 //产量数据以及中间图表数据
day:{output:'',rate:'',}, outputMineData:{
month:{output:'',rate:'',}, day:{output:'',rate:'',dayPlan:'',},
year:{output:'',rate:'',}, month:{output:'',rate:'',dayPlan:'',},
year:{output:'',rate:'',dayPlan:'',},
}, },
//司机信息 //司机信息
driverData:{ driverData:{
...@@ -98,6 +318,53 @@ export default { ...@@ -98,6 +318,53 @@ export default {
workersNumber:0, workersNumber:0,
restNumber:0, restNumber:0,
driverTableData:[], driverTableData:[],
},
//卡车排行榜
truckRankListData:{
carclass:'卡车',
selectTimeText:'day',
selectFieldText:'juli',
listData:[],
selectTimeDate:'',
},
//电铲排行榜
forkLiftRankListData:{
carclass:'电铲',
selectTimeText:'day',
selectFieldText:'time',
listData:[],
selectTimeDate:'',
},
//中间模块选择
centerViewData:{
moduleText:'centerModule1',
detailedDataDay:{},
detailedDataMonth:{},
},
//天气数据
weatherData:{
today:{qiwen:'23',fengli:'3',tianqi:'sunny',tianqiText:'晴',shidu:'32'},
futureDay:[
{riqi:'03.24',tianqi:'overcast',qiwen:'15'},
{riqi:'03.24',tianqi:'cloudy',qiwen:'15'},
{riqi:'03.24',tianqi:'sunny',qiwen:'15'},
{riqi:'03.24',tianqi:'cloudy',qiwen:'15'},
{riqi:'03.24',tianqi:'overcast',qiwen:'15'},
],
},
//车辆工时
carWorkTimeData:{
selectTimeText:'day',
listData:[
{carName:'卡车',workTime:166,unused:'41',},
{carName:'电铲',workTime:166,unused:'41',},
{carName:'其他车辆',workTime:166,unused:'41',},
],
selectTimeDate:'',
},
//矿石开采效率
exploitationEfficiencyData:{
}, },
} }
}, },
...@@ -105,7 +372,6 @@ export default { ...@@ -105,7 +372,6 @@ export default {
methods: { methods: {
loadData(){ loadData(){
this.whetherShow = true; this.whetherShow = true;
this.dayCurrentTimeFn(); this.dayCurrentTimeFn();
this.monthCurrentTimeFn(); this.monthCurrentTimeFn();
this.yearCurrentTimeFn(); this.yearCurrentTimeFn();
...@@ -118,14 +384,16 @@ export default { ...@@ -118,14 +384,16 @@ export default {
if(res.data.totalElements == 0){ if(res.data.totalElements == 0){
undueArray.rate = 0; undueArray.rate = 0;
undueArray.output = 0; undueArray.output = 0;
undueArray.dayPlan = 0;
}else{ }else{
if(res.data.content[0].rate == ''){ if(res.data.content[0].rate == ''){
undueArray.rate = 0; undueArray.rate = 0;
undueArray.output = res.data.content[0].output; undueArray.output = res.data.content[0].output;
alert(1) undueArray.dayPlan = res.data.content[0].dayPlan;
}else{ }else{
undueArray.rate = parseFloat(res.data.content[0].rate) * 100; undueArray.rate = parseFloat(res.data.content[0].rate) * 100;
undueArray.output = res.data.content[0].output; undueArray.output = res.data.content[0].output;
undueArray.dayPlan = res.data.content[0].dayPlan;
} }
} }
this.outputMineData.day = undueArray; this.outputMineData.day = undueArray;
...@@ -138,13 +406,16 @@ export default { ...@@ -138,13 +406,16 @@ export default {
if(res.data.totalElements == 0){ if(res.data.totalElements == 0){
undueArray.rate = 0; undueArray.rate = 0;
undueArray.output = 0; undueArray.output = 0;
undueArray.dayPlan = 0;
}else{ }else{
if(res.data.content[0].rate == ''){ if(res.data.content[0].rate == ''){
undueArray.rate = 0; undueArray.rate = 0;
undueArray.output = res.data.content[0].output; undueArray.output = res.data.content[0].output;
undueArray.dayPlan = res.data.content[0].dayPlan;
}else{ }else{
undueArray.rate = parseFloat(res.data.content[0].rate) * 100; undueArray.rate = parseFloat(res.data.content[0].rate) * 100;
undueArray.output = res.data.content[0].output; undueArray.output = res.data.content[0].output;
undueArray.dayPlan = res.data.content[0].dayPlan;
} }
} }
this.outputMineData.month = undueArray; this.outputMineData.month = undueArray;
...@@ -157,13 +428,16 @@ export default { ...@@ -157,13 +428,16 @@ export default {
if(res.data.totalElements == 0){ if(res.data.totalElements == 0){
undueArray.rate = 0; undueArray.rate = 0;
undueArray.output = 0; undueArray.output = 0;
undueArray.dayPlan = 0;
}else{ }else{
if(res.data.content[0].rate == ''){ if(res.data.content[0].rate == ''){
undueArray.rate = 0; undueArray.rate = 0;
undueArray.output = res.data.content[0].output; undueArray.output = res.data.content[0].output;
undueArray.dayPlan = res.data.content[0].dayPlan;
}else{ }else{
undueArray.rate = parseFloat(res.data.content[0].rate) * 100; undueArray.rate = parseFloat(res.data.content[0].rate) * 100;
undueArray.output = res.data.content[0].output; undueArray.output = res.data.content[0].output;
undueArray.dayPlan = res.data.content[0].dayPlan;
} }
} }
this.outputMineData.year = undueArray; this.outputMineData.year = undueArray;
...@@ -172,6 +446,7 @@ export default { ...@@ -172,6 +446,7 @@ export default {
//获取司机信息 //获取司机信息
HttpReq.truckDispatching.screenDriverInformationQuery({size:9999}).then((res) => { HttpReq.truckDispatching.screenDriverInformationQuery({size:9999}).then((res) => {
if(res.code == 200){ if(res.code == 200){
//司机信息处理
let workerTemporary = []; let workerTemporary = [];
let restTemporary = []; let restTemporary = [];
res.data.content.forEach((item) => { res.data.content.forEach((item) => {
...@@ -185,14 +460,199 @@ export default { ...@@ -185,14 +460,199 @@ export default {
this.driverData.driverTableData = workerTemporary; this.driverData.driverTableData = workerTemporary;
this.driverData.workersNumber = workerTemporary.length; this.driverData.workersNumber = workerTemporary.length;
this.driverData.restNumber = restTemporary.length; this.driverData.restNumber = restTemporary.length;
} }
}) })
//获取卡车排行榜
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;
}
})
})
//获取电铲排行榜
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;
}
})
})
//中间echarts图表
this.centerEcharts();
//获取天气
// HttpReq.truckDispatching.getWeatherInforQuery().then((res) => {
// if(true){
// console.log(res);
// }
// })
})
},
//卡车切换时间
truckChangeTime(text){
this.truckRankListData.selectTimeText = text;
if(text == 'day'){
this.truckRankListData.selectTimeDate = this.currentTime.day;
}
},
//卡车切换字段排序
truckChangeField(text){
this.truckRankListData.selectFieldText = text;
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;
}
})
}) })
}, },
//电铲切换时间
forkLiftChangeTime(text){
this.forkLiftRankListData.selectTimeText = text;
if(text == 'day'){
this.forkLiftRankListData.selectTimeDate = this.currentTime.day;
}
},
//电铲切换字段排序
forkLiftChangeField(text){
this.forkLiftRankListData.selectFieldText = text;
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;
}
})
})
},
//中间模块选择
centerSelectFn(text){
this.centerViewData.moduleText = text;
},
//中间模块Echarts
centerEcharts(){
var myChart = echarts.init(document.getElementById('centerEchartsView'));
var option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [
{
type: 'category',
data: ['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'],
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'
}
},
axisLine: {
lineStyle: {
color: 'white',
width: 0
}
}
}
],
series: [
{
name: '数据(吨)',
type: 'bar',
barWidth: 20,
data: [10, 52, 200, 334, 390, 330, 220,10, 52, 200, 334, 390, 330],
itemStyle: {
color: '#01CBF6'
},
}
]
};
option && myChart.setOption(option);
},
//车辆工时切换时间
carWorkTimeChangeTime(text){
this.carWorkTimeData.selectTimeText = text;
if(text == 'day'){
this.carWorkTimeData.selectTimeDate = this.currentTime.day;
}
if(text == 'month'){
this.carWorkTimeData.selectTimeDate = this.currentTime.month;
}
if(text == 'year'){
this.carWorkTimeData.selectTimeDate = this.currentTime.year;
}
},
//获取当前时间 //获取当前时间
dayCurrentTimeFn(){ dayCurrentTimeFn(){
var date = new Date(); var date = new Date();
...@@ -250,12 +710,11 @@ export default { ...@@ -250,12 +710,11 @@ export default {
.dataScrView_centerView{ .dataScrView_centerView{
height: 100%; height: 100%;
width: 60%; width: 60%;
background-color: wheat; position: relative;
} }
.dataScrView_rightView{ .dataScrView_rightView{
height: 100%; height: 100%;
width: 20%; width: 20%;
background-color: skyblue;
} }
.dataScrView_leftView>div{ .dataScrView_leftView>div{
width: 100%; width: 100%;
...@@ -362,4 +821,199 @@ dd>div{ ...@@ -362,4 +821,199 @@ dd>div{
.rolling::-webkit-scrollbar { .rolling::-webkit-scrollbar {
display: none; display: none;
} }
.truck_titleStyle{
display: flex;
justify-content: space-between;
padding-right: 4vw;
}
.driverTitleDateStyle{
display: flex;
color: #06EFFE;
font-size: 16px;
text-shadow: 0px 0px 0px;
height: 3.5vh;
align-items: center;
}
.driverTitleDateStyle_son1{
height: 2.5vh;
line-height: 2.5vh;
margin-right: 5px;
padding:0px 5px;
background-color: #2DB3BB;
box-sizing: border-box;
border-radius: 5px;
cursor: pointer;
}
.driverTitleDateStyle_son2{
height: 2.5vh;
line-height: 2.5vh;
margin-right: 5px;
padding:0px 5px;
box-sizing: border-box;
border-radius: 5px;
cursor: pointer;
}
.dataScrView_leftView_content_views2{
display: flex;
justify-content: space-between;
}
.dataScrView_leftView_content_views2>div{
height: 2.5vh;
width: 24%;
font-size: 15px;
border:2px solid #01A6FC;
border-radius: 5px;
color: #06EFFE;
line-height: 2.2vh;
text-align: center;
cursor: pointer;
font-weight: 600;
}
.selectFieldStyle{
opacity: 0.7;
}
.dataScrView_leftView_content_views3{
width: 100%;
height: 16vh;
overflow-y:auto;
scrollbar-width: none;
}
.dataScrView_leftView_content_views3::-webkit-scrollbar {
display: none;
}
.dataScrView_leftView_content_views3>div>div{
font: 18px;
font-weight: 600;
display: flex;
justify-content: space-evenly;
}
.dataScrView_leftView_content_views3>div>div>div{
margin-top: 7px;
}
.dataScrView_centerView>div{
position: absolute;
bottom: 0px;
width: 100%;
height: 23.5vh;
background:no-repeat center center url('~@/assets/images/cutGraph/yuanjianjuxingkaobei2.png');
background-size:100% 100%;
padding: 5px 7px;
box-sizing: border-box;
overflow: hidden;
}
.dataScrView_centerView_title{
margin-bottom: 5px;
width: 100%;
height: 3.5vh;
background:no-repeat center center url('~@/assets/images/cutGraph/changtianbiaoti2.png');
background-size:100% 100%;
padding-left: 10px;
box-sizing: border-box;
font-size: 18px;
line-height: 3.5vh;
color: #FAFAFB;
letter-spacing: 1px;
text-shadow: 1px 1px 1px #92CBFF;
display: flex;
}
.dataScrView_centerView_title>div{
margin: 0px 20px;
cursor: pointer;
}
.centerModuleSelectStyle{
color: #1DF9FC;
border-bottom: 3px solid #1DF9FC;
}
.dataScrView_centerView_planNum{
width: 100%;
height: 5vh;
display: flex;
justify-content: space-between;
}
.dataScrView_centerView_planNum>div{
width: 16%;
height: 100%;
background-color: rgba(10,53,107,0.6);
border-radius: 5px;
display: flex;
justify-content: space-around;
align-items: center;
}
#centerEchartsView{
overflow: hidden;
top: 5vh;
width: 100%;
height: 18vh;
position: absolute;
}
.todayWeather1{
width: 100%;
height: 4vh;
display: flex;
color: #03FEFE;
align-items: center;
padding: 0px 5px;
box-sizing: border-box;
}
.todayWeather2{
margin-top: 5px;
width: 100%;
height: 8vh;
display: flex;
justify-content: space-between;
padding: 0px 5px;
box-sizing: border-box;
text-align: center;
}
.todayWeather3{
margin-top: 5px;
width: 100%;
height: 5vh;
display: flex;
justify-content: space-between;
padding: 0px 5px;
box-sizing: border-box;
align-items: center;
color: #03FEFE;
}
.carWorkTimeStyle{
width: 100%;
height: 100%;
display: flex;
justify-content: space-between;
}
.carWorkTimeStyle>div{
width: 33%;
}
.carPicStyle1{
width: 3.5vw;
height: 3.5vw;
border: 3px solid #03FEFE;
border-radius: 50%;
margin: 0px auto;
position: relative;
}
.carPicStyle1>img{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
.carPicStyle2{
width: 5vw;
height: 10vh;
margin: 10px auto;
background:no-repeat center center url('~@/assets/images/cutGraph/zu2388.png');
background-size:100% 100%;
text-align: center;
color: #03FEFE;
overflow: hidden;
}
.dataScrView_rightView_content_view1{
margin-bottom: 7px;
display: flex;
align-items: center;
font-size: 20px;
justify-content: space-evenly;
}
</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