Skip to content

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

修改

parent bd2d82b1
Show whitespace changes
Inline Side-by-side
Showing with 760 additions and 76 deletions
src/assets/js/common.js
View file @ 76946ce8
...@@ -1724,7 +1724,15 @@ var HttpReq = function(){ ...@@ -1724,7 +1724,15 @@ var HttpReq = function(){
//大屏——数据总览——获取天气 //大屏——数据总览——获取天气
getWeatherInforQuery: function(param){ getWeatherInforQuery: function(param){
return request({ return request({
url: 'http://wthrcdn.etouch.cn/weather_mini?city=济南', url: '/api/Weather',
method: 'get',
params:param,
})
},
//大屏——数据总览——车辆工时
carWorkInforQuery: function(param){
return request({
url: '/api/Gongshi',
method: 'get', method: 'get',
params:param, params:param,
}) })
......
src/views/MLargeScreen/components/carManagement/index.vue
View file @ 76946ce8
<template> <template>
<div class="carManView"> <div class="carManScrView" v-if="whetherShow">
车辆管理 <div class="carManScrView_leftView">
<!-- 车辆运行状况 -->
<div>
<div class="carManScrView_leftView_title">车辆运行状况</div>
<div class="carManScrView_leftView_content" style="position: relative;">
<div id="carWorkingStateEcharts"></div>
</div>
</div>
<!-- 卡车排行榜-->
<div>
<div class="carManScrView_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="carManScrView_leftView_content">
<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>
</div>
</div>
<!-- 电铲排行榜-->
<div>
<div class="carManScrView_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="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>
<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>
<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 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>
</div>
</div>
</div>
<div class="carManScrView_rightView">
<!-- 卡车动态 -->
<div>
<div class="carManScrView_rightView_title">卡车动态</div>
<div class="carManScrView_rightView_content">
</div>
</div>
<!-- 电铲动态-->
<div>
<div class="carManScrView_rightView_title">电铲动态</div>
<div class="carManScrView_rightView_content">
</div>
</div>
<!-- 其他车动态 -->
<div>
<div class="carManScrView_rightView_title">其他车动态</div>
<div class="carManScrView_rightView_content">
</div>
</div>
</div>
</div> </div>
</template> </template>
<script> <script>
import { Tools, HttpReq, Dates} from '@/assets/js/common.js';
import * as echarts from 'echarts';
export default { export default {
data() { data() {
return { return {
whetherShow:false,
//时间
currentTime:{
day:'',
month:'',
year:'',
},
//车辆运行状况
carWorkingStateData:{
online:[],
offline:[],
},
//卡车排行榜
truckRankListData:{
carclass:'卡车',
selectTimeText:'day',
selectFieldText:'juli',
listData:[],
selectTimeDate:'',
},
//电铲排行榜
forkLiftRankListData:{
carclass:'电铲',
selectTimeText:'day',
selectFieldText:'time',
listData:[],
selectTimeDate:'',
},
} }
}, },
mounted() { }, mounted() { },
methods: { methods: {
loadData(){ loadData(){
console.log('车辆管理'); this.whetherShow = true;
this.dayCurrentTimeFn();
this.monthCurrentTimeFn();
this.yearCurrentTimeFn();
this.$nextTick(()=>{
//获取车辆运行状况
HttpReq.truckDispatching.screenDriverInformationQuery({size:9999}).then((res) => {
let kache1 = [];
let kachezaixian = [];
let kachelixian = [];
let dianchan1 = [];
let dianchanzaixian = [];
let dianchanlixian = [];
let qitache1 = [];
let qitachezaixian = [];
let qitachelixian = [];
let zaixianAllNum = [];
let lixianAllNum = [];
if(res.code == 200){
res.data.content.forEach((item)=>{
if(item.carclass == '卡车'){
kache1.push(item);
}else if(item.carclass == '电铲'){
dianchan1.push(item);
}else{
qitache1.push(item);
}
})
kache1.forEach((item)=>{
if(item.status == 1){
kachezaixian.push(item);
}else{
kachelixian.push(item);
}
})
dianchan1.forEach((item)=>{
if(item.status == 1){
dianchanzaixian.push(item);
}else{
dianchanlixian.push(item);
}
})
qitache1.forEach((item)=>{
if(item.status == 1){
qitachezaixian.push(item);
}else{
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.truckRankListData.selectTimeDate = this.currentTime.day;
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.screenDriverInformationQuery(truckQuery1).then((res) => {
if(res.code == 200){
this.truckRankListData.listData = res.data.content;
}
})
})
//获取电铲排行榜
this.forkLiftRankListData.selectTimeDate = this.currentTime.day;
let forkLiftQuery1 = {};
forkLiftQuery1.size = 10;
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;
}
})
})
//卡车动态
})
},
//车辆运行状况
carWorkingStateEcharts(){
let that = this;
var myChart = echarts.init(document.getElementById('carWorkingStateEcharts'));
var option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legend: {
textStyle:{
color: 'white',
fontSize:16,
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'category',
data: ['卡车状态', '电铲状态', '其他车辆'],
axisLabel: {
show: true,
textStyle: {
color: 'white',
fontSize:16,
}
},
axisLine: {
lineStyle: {
color: 'white',
width: 1
}
},
},
yAxis: {
type: 'value',
axisLabel: {
show: true,
textStyle: {
color: 'white',
fontSize:16,
}
},
axisLine: {
lineStyle: {
color: 'white',
width: 0
}
},
},
series: [
{
name: '车辆离线',
type: 'bar',
data: that.carWorkingStateData.offline,
barWidth: 20,
itemStyle: {
color: '#14F3C5'
},
},
{
name: '车辆在线',
type: 'bar',
data: that.carWorkingStateData.online,
barWidth: 20,
itemStyle: {
color: '#2195FD'
},
}
]
};
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.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;
}
if(text == 'month'){
this.forkLiftRankListData.selectTimeDate = this.currentTime.month;
}
if(text == 'year'){
this.forkLiftRankListData.selectTimeDate = this.currentTime.year;
}
},
//电铲切换字段排序
forkLiftChangeField(text){
this.forkLiftRankListData.selectFieldText = text;
let forkLiftQuery1 = {};
forkLiftQuery1.size = 10;
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;
}
})
})
},
//获取当前时间
dayCurrentTimeFn(){
var date = new Date();
var year = date.getFullYear(); //年 ,从 Date 对象以四位数字返回年份
var month = date.getMonth() + 1; //月 ,从 Date 对象返回月份 (0 ~ 11) ,date.getMonth()比实际月份少 1 个月
var day = date.getDate(); //日 ,从 Date 对象返回一个月中的某一天 (1 ~ 31)
//修改月份格式
if (month >= 1 && month <= 9) {
month = "0" + month;
}
//修改日期格式
if (day >= 0 && day <= 9) {
day = "0" + day;
}
let currentFormatDate = year + "-" + month + "-" + day;
this.currentTime.day = currentFormatDate;
},
monthCurrentTimeFn(){
var date = new Date();
var year = date.getFullYear(); //年 ,从 Date 对象以四位数字返回年份
var month = date.getMonth() + 1; //月 ,从 Date 对象返回月份 (0 ~ 11) ,date.getMonth()比实际月份少 1 个月
//修改月份格式
if (month >= 1 && month <= 9) {
month = "0" + month;
}
let currentFormatDate = year + "-" + month;
this.currentTime.month = currentFormatDate;
},
yearCurrentTimeFn(){
var date = new Date();
var year = date.getFullYear(); //年 ,从 Date 对象以四位数字返回年份
let currentFormatDate = year;
this.currentTime.year = currentFormatDate;
}, },
}, },
} }
</script> </script>
<style> <style scoped>
.carManView{ .carManScrView{
width: 100%; width: 100%;
height: 100%; height: 100%;
overflow: hidden; overflow: hidden;
background-color: aliceblue; display: flex;
justify-content: space-between;
}
.carManScrView_leftView{
height: 100%;
width: 20%;
}
.carManScrView_rightView{
height: 100%;
width: 20%;
}
.carManScrView_leftView>div{
width: 100%;
height: 32vh;
background:no-repeat center center url('~@/assets/images/cutGraph/yuanjianjuxing1.png');
background-size:100% 100%;
padding: 5px 7px;
box-sizing: border-box;
overflow: hidden;
}
.carManScrView_rightView>div{
width: 100%;
height: 32vh;
background:no-repeat center center url('~@/assets/images/cutGraph/yuanjianjuxing1.png');
background-size:100% 100%;
padding: 5px 7px;
box-sizing: border-box;
overflow: hidden;
}
.carManScrView_leftView_title,.carManScrView_rightView_title{
margin-bottom: 5px;
width: 100%;
height: 3.5vh;
background:no-repeat center center url('~@/assets/images/cutGraph/biaoti1.png');
background-size:100% 100%;
padding-left: 10px;
box-sizing: border-box;
font-size: 18px;
line-height: 3.5vh;
color: #FAFAFB;
letter-spacing: 1px;
text-shadow: 1px 1px 1px #92CBFF;
}
.carManScrView_leftView_content,.carManScrView_rightView_content{
width: 100%;
height: 27vh;
}
.rolling{
height: 13.5vh;
overflow-y:auto;
scrollbar-width: none;
}
.rolling::-webkit-scrollbar {
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;
}
.carManScrView_leftView_content_views2{
display: flex;
justify-content: space-between;
}
.carManScrView_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;
}
.carManScrView_leftView_content_views3{
width: 100%;
height: 24vh;
overflow-y:auto;
scrollbar-width: none;
}
.carManScrView_leftView_content_views3::-webkit-scrollbar {
display: none;
}
.carManScrView_leftView_content_views3>div>div{
font: 18px;
font-weight: 600;
display: flex;
justify-content: space-evenly;
}
.carManScrView_leftView_content_views3>div>div>div{
margin-top: 7px;
}
#carWorkingStateEcharts{
width: 100%;
height: 28vh;
} }
</style> </style>
\ No newline at end of file
src/views/MLargeScreen/components/dataScreening/index.vue
View file @ 76946ce8
...@@ -222,24 +222,23 @@ ...@@ -222,24 +222,23 @@
<div class="dataScrView_rightView_title">气象数据</div> <div class="dataScrView_rightView_title">气象数据</div>
<div class="dataScrView_rightView_content"> <div class="dataScrView_rightView_content">
<div class="todayWeather1"> <div class="todayWeather1">
<div style="font-size:40px;margin-right:30px;">{{weatherData.today.qiwen}}℃</div> <div style="font-size:40px;margin-right:30px;">{{(parseInt(weatherData.today.high.slice(3,5)) + parseInt(weatherData.today.low.slice(3,5))) / 2}}℃</div>
<img src="../../../../assets/images/cutGraph/sunny.png" height="30"> <img :src=" weatherData.today.type == '晴' ? weatherPic.sunnyPic : weatherData.today.type == '多云' ? weatherPic.cloudyPic : weatherPic.overcastPic " height="25">
<div style="font-size:18px;">{{weatherData.today.tianqiText}} / {{currentTime.day}}</div> <div style="font-size:18px;">{{weatherData.today.type}} / {{currentTime.day}}</div>
</div> </div>
<div class="todayWeather2"> <div class="todayWeather2">
<div v-for="(item,index) in weatherData.futureDay" :key="index"> <div v-for="(item,index) in weatherData.forecastData" :key="index">
<div style="color:#D0DAFF;">{{item.riqi}}</div> <div style="color:#D0DAFF;font-size:13px;margin-bottom:5px;">{{item.date}}</div>
<!-- <img :src=" '../../../../assets/images/cutGraph/' + item.tianqi + '.png' " height="30"> --> <img :src="item.type == '晴' ? weatherPic.sunnyPic : item.type == '多云' ? weatherPic.cloudyPic : weatherPic.overcastPic " height="25">
<img src="../../../../assets/images/cutGraph/sunny.png" height="30"> <div style="color:#D0DAFF;font-size:15px;margin-top:5px;">{{(item.low.slice(3,6)) + '-' +(item.high.slice(3,6))}}</div>
<div style="color:#D0DAFF;">{{item.qiwen}}℃</div>
</div> </div>
</div> </div>
<div class="todayWeather3"> <div class="todayWeather3">
<img src="../../../../assets/images/cutGraph/fengli1.png" height="45"> <img src="../../../../assets/images/cutGraph/fengli1.png" height="45">
<div>风力：{{weatherData.today.fengli}}级</div> <div>风力：{{weatherData.today.fengli.slice(9,10)}}级</div>
<div> <div>
<div>温度：{{weatherData.today.qiwen}}℃</div> <div>温度：{{(parseInt(weatherData.today.high.slice(3,5)) + parseInt(weatherData.today.low.slice(3,5))) / 2}}℃</div>
<div>湿度：{{weatherData.today.shidu}}%</div> <div>湿度：{{(parseInt(weatherData.today.high.slice(3,5)) + parseInt(weatherData.today.low.slice(3,5))) / 2}}%</div>
</div> </div>
</div> </div>
</div> </div>
...@@ -250,8 +249,8 @@ ...@@ -250,8 +249,8 @@
<div>车辆工时</div> <div>车辆工时</div>
<div class="driverTitleDateStyle"> <div class="driverTitleDateStyle">
<div :class="carWorkTimeData.selectTimeText == 'day' ? 'driverTitleDateStyle_son1' : 'driverTitleDateStyle_son2' " @click="carWorkTimeChangeTime('day')">日</div> <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 :class="carWorkTimeData.selectTimeText == 'month' ? 'driverTitleDateStyle_son1' : 'driverTitleDateStyle_son2' " @click="carWorkTimeChangeTime('month')">年</div> <div :class="carWorkTimeData.selectTimeText == 'year' ? 'driverTitleDateStyle_son1' : 'driverTitleDateStyle_son2' " @click="carWorkTimeChangeTime('year')">年</div>
</div> </div>
</div> </div>
<div class="dataScrView_rightView_content"> <div class="dataScrView_rightView_content">
...@@ -261,11 +260,10 @@ ...@@ -261,11 +260,10 @@
<img src="../../../../assets/images/cutGraph/huoyunqiche1.png"> <img src="../../../../assets/images/cutGraph/huoyunqiche1.png">
</div> </div>
<div class="carPicStyle2"> <div class="carPicStyle2">
<div style="margin-top:0.5vh;font-size:17px;">{{item.carName}}</div> <div style="margin-top:0.5vh;font-size:17px;">{{item.cartype}}</div>
<div style="font-size:14px;margin-top:1.5vh;">总工时：<b>{{item.workTime}}</b>H</div> <div style="font-size:14px;margin-top:1.5vh;">总工时：<b>{{item.gongshi}}</b>H</div>
<div style="font-size:14px;margin-top:1vh;">闲置率：<b>{{item.unused}}</b>%</div> <div style="font-size:14px;margin-top:1vh;">闲置率：<b>{{item.xianzhi}}</b>%</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
...@@ -275,19 +273,52 @@ ...@@ -275,19 +273,52 @@
<div class="dataScrView_rightView_title">矿石开采效率</div> <div class="dataScrView_rightView_title">矿石开采效率</div>
<div class="dataScrView_rightView_content"> <div class="dataScrView_rightView_content">
<div class="dataScrView_rightView_content_view1"> <div class="dataScrView_rightView_content_view1">
<el-progress type="circle" :percentage="outputMineData.day.rate" :stroke-width="7" :width="80" :height="80"></el-progress> <div class="dataScrView_rightView_content_view1_rate1">
<div style="color:white;margin-left:15px;">当前日产量：<span style="color:#02F7EF;">{{outputMineData.day.output}}吨</span></div> <div style="color:#06BEFA;">比率</div>
<div style="color:white;">28%</div>
</div>
<el-progress type="circle" :percentage="outputMineData.day.rate" :stroke-width="7" :width="80" :height="80" :show-text='false'></el-progress>
<div style="color:white;">
<div>日总开采量</div>
<div style="color:#A6F6F9;font-size:20px;"><span style="color:#06BEFA;">1000</span> T</div>
</div>
<div style="color:white;">
<div>日总里程</div>
<div style="color:#A6F6F9;font-size:20px;"><span style="color:#06BEFA;">300</span> KM</div>
</div>
</div> </div>
<div class="dataScrView_rightView_content_view1"> <div class="dataScrView_rightView_content_view1">
<div style="color:white;margin-left:15px;">当前月产量：<span style="color:#02F7EF;">{{outputMineData.month.output}}吨</span></div> <div class="dataScrView_rightView_content_view1_rate2">
<el-progress type="circle" :percentage="outputMineData.month.rate" :stroke-width="7" :width="80" :height="80"></el-progress> <div style="color:#03FEFE;">比率</div>
<div style="color:white;">28%</div>
</div>
<div style="color:white;">
<div>司机日总工作时长</div>
<div style="color:#A6F6F9;font-size:20px;"><span style="color:#03FEFE;">1000</span> H</div>
</div>
<div style="color:white;">
<div>日总开采量</div>
<div style="color:#A6F6F9;font-size:20px;"><span style="color:#03FEFE;">300</span> T</div>
</div>
<el-progress type="circle" :percentage="outputMineData.month.rate" :stroke-width="7" :width="80" :height="80" :show-text='false'></el-progress>
</div>
</div>
</div>
<!-- 实时报警 -->
<div>
<div class="dataScrView_rightView_title">实时报警</div>
<div class="dataScrView_rightView_content">
<div class="realAlarmStyle">
<div v-for="(item,index) in realAlarmStyleData.listData" :key="index">
<img src="../../../../assets/images/cutGraph/jingshikaobei1.png">
<div style="color:#A6F6F9;margin-left:10px;">
<div>{{item.alarmexplain}}</div>
<div>{{item.createTime}}</div>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</template> </template>
...@@ -295,11 +326,20 @@ ...@@ -295,11 +326,20 @@
<script> <script>
import { Tools, HttpReq, Dates} from '@/assets/js/common.js'; import { Tools, HttpReq, Dates} from '@/assets/js/common.js';
import * as echarts from 'echarts'; import * as echarts from 'echarts';
import sunnyPic from '../../../../assets/images/cutGraph/sunny.png'
import cloudyPic from '../../../../assets/images/cutGraph/cloudy.png'
import overcastPic from '../../../../assets/images/cutGraph/overcast.png'
export default { export default {
data() { data() {
return { return {
whetherShow:false, whetherShow:false,
//天气图片
weatherPic:{
sunnyPic:sunnyPic,
cloudyPic:cloudyPic,
overcastPic:overcastPic,
},
//时间 //时间
currentTime:{ currentTime:{
day:'', day:'',
...@@ -308,9 +348,9 @@ export default { ...@@ -308,9 +348,9 @@ export default {
}, },
//产量数据以及中间图表数据 //产量数据以及中间图表数据
outputMineData:{ outputMineData:{
day:{output:'',rate:'',dayPlan:'',}, day:{output:'',rate:0,dayPlan:'',},
month:{output:'',rate:'',dayPlan:'',}, month:{output:'',rate:0,dayPlan:'',},
year:{output:'',rate:'',dayPlan:'',}, year:{output:'',rate:0,dayPlan:'',},
}, },
//司机信息 //司机信息
driverData:{ driverData:{
...@@ -343,29 +383,53 @@ export default { ...@@ -343,29 +383,53 @@ export default {
}, },
//天气数据 //天气数据
weatherData:{ weatherData:{
today:{qiwen:'23',fengli:'3',tianqi:'sunny',tianqiText:'晴',shidu:'32'}, forecastData:[],
futureDay:[ today:{
{riqi:'03.24',tianqi:'overcast',qiwen:'15'}, high:'高温 20℃',
{riqi:'03.24',tianqi:'cloudy',qiwen:'15'}, low:'高温 20℃',
{riqi:'03.24',tianqi:'sunny',qiwen:'15'}, type:'多云',
{riqi:'03.24',tianqi:'cloudy',qiwen:'15'}, fengli:'<![CDATA[3级]]>',
{riqi:'03.24',tianqi:'overcast',qiwen:'15'}, },
],
}, },
//车辆工时 //车辆工时
carWorkTimeData:{ carWorkTimeData:{
selectTimeText:'day', selectTimeText:'day',
listData:[ listData:[],
{carName:'卡车',workTime:166,unused:'41',},
{carName:'电铲',workTime:166,unused:'41',},
{carName:'其他车辆',workTime:166,unused:'41',},
],
selectTimeDate:'', selectTimeDate:'',
}, },
//矿石开采效率 //矿石开采效率
exploitationEfficiencyData:{ exploitationEfficiencyData:{
}, },
//实时报警
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',
},
],
}
} }
}, },
mounted() { }, mounted() { },
...@@ -493,12 +557,35 @@ export default { ...@@ -493,12 +557,35 @@ export default {
//中间echarts图表 //中间echarts图表
this.centerEcharts(); this.centerEcharts();
//获取天气 //获取天气
// HttpReq.truckDispatching.getWeatherInforQuery().then((res) => { HttpReq.truckDispatching.getWeatherInforQuery({cityName:'济南'}).then((res) => {
// if(true){ if(res.code == 200){
// console.log(res); 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;
}
}
})
//矿石开采效率
//实时报警
HttpReq.truckDispatching.callPoliceQuery({status:1}).then((res) => {
if(res.code == 200){
this.realAlarmStyleData.listData = res.data.content;
}
})
}) })
}, },
...@@ -508,6 +595,12 @@ export default { ...@@ -508,6 +595,12 @@ export default {
if(text == 'day'){ if(text == 'day'){
this.truckRankListData.selectTimeDate = this.currentTime.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){ truckChangeField(text){
...@@ -531,6 +624,12 @@ export default { ...@@ -531,6 +624,12 @@ export default {
if(text == 'day'){ if(text == 'day'){
this.forkLiftRankListData.selectTimeDate = this.currentTime.day; this.forkLiftRankListData.selectTimeDate = this.currentTime.day;
} }
if(text == 'month'){
this.forkLiftRankListData.selectTimeDate = this.currentTime.month;
}
if(text == 'year'){
this.forkLiftRankListData.selectTimeDate = this.currentTime.year;
}
}, },
//电铲切换字段排序 //电铲切换字段排序
forkLiftChangeField(text){ forkLiftChangeField(text){
...@@ -635,24 +734,21 @@ export default { ...@@ -635,24 +734,21 @@ export default {
if(text == 'year'){ if(text == 'year'){
this.carWorkTimeData.selectTimeDate = this.currentTime.year; this.carWorkTimeData.selectTimeDate = this.currentTime.year;
} }
HttpReq.truckDispatching.carWorkInforQuery({riqi:this.carWorkTimeData.selectTimeDate}).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;
}
}
})
}, },
//获取当前时间 //获取当前时间
dayCurrentTimeFn(){ dayCurrentTimeFn(){
var date = new Date(); var date = new Date();
...@@ -691,7 +787,7 @@ export default { ...@@ -691,7 +787,7 @@ export default {
} }
</script> </script>
<style> <style scoped>
.el-progress__text{ .el-progress__text{
color:white; color:white;
font-weight: 600; font-weight: 600;
...@@ -956,7 +1052,7 @@ dd>div{ ...@@ -956,7 +1052,7 @@ dd>div{
box-sizing: border-box; box-sizing: border-box;
} }
.todayWeather2{ .todayWeather2{
margin-top: 5px; margin-top: 10px;
width: 100%; width: 100%;
height: 8vh; height: 8vh;
display: flex; display: flex;
...@@ -1010,10 +1106,37 @@ dd>div{ ...@@ -1010,10 +1106,37 @@ dd>div{
overflow: hidden; overflow: hidden;
} }
.dataScrView_rightView_content_view1{ .dataScrView_rightView_content_view1{
margin-bottom: 7px; position: relative;
margin-top: 1vh;
display: flex; display: flex;
align-items: center; align-items: center;
font-size: 20px; font-weight: 600;
justify-content: space-evenly; justify-content: space-evenly;
} }
.dataScrView_rightView_content_view1_rate1{
position: absolute;
left: 3.1vw;
top: 2.4vh;
}
.dataScrView_rightView_content_view1_rate2{
position: absolute;
right: 2.3vw;
top: 2.4vh;
}
.realAlarmStyle{
width: 100%;
height: 19vh;
overflow-y:auto;
scrollbar-width: none;
}
.realAlarmStyle::-webkit-scrollbar {
display: none;
}
.realAlarmStyle>div{
width: 100%;
height: 5vh;
border-bottom: 1px solid #03FEFE;
display: flex;
align-items: center;
}
</style> </style>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment