Skip to content

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

修改

parent 8b6d0aeb
Show whitespace changes
Inline Side-by-side
Showing with 344 additions and 9 deletions
src/assets/js/common.js
View file @ c965b260
......@@ -1713,7 +1713,14 @@ var HttpReq = function(){
data:data,
})
},
//大屏——数据总览——司机信息
screenDriverInformationQuery: function(param){
return request({
url: '/api/Driver',
method: 'get',
params:param,
})
},
......
src/views/MLargeScreen/components/dataScreening/index.vue
View file @ c965b260
<template>
<div class="dataScrView">
<div class="dataScrView" v-if="whetherShow">
<div class="dataScrView_leftView">
<!-- 采区产量统计 -->
<div>
<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>
<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>
<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>
</div>
</div>
<!-- 司机信息 -->
<div>
<div class="dataScrView_leftView_title">司机信息</div>
<div class="dataScrView_leftView_content">
<div class="driverInforViewsStyle">
<div class="driverTotalnumberStyle">
<img src="../../../../assets/images/cutGraph/siji11.png">
<div>
<div style="text-align: center;font-size:15px;">司机总人数</div>
<div style="text-align: center;font-size:18px;">{{driverData.totalNumber}}</div>
</div>
</div>
<div class="presentDrivernumberStyle">
<div style="color:#3DFBEB;">
<div style="text-align: center;font-size:15px;">当前工作人数</div>
<div style="text-align: center;font-size:18px;">{{driverData.workersNumber}}</div>
</div>
<div style="color:#F7E518;">
<div style="text-align: center;font-size:15px;">当前休息人数</div>
<div style="text-align: center;font-size:18px;">{{driverData.restNumber}}</div>
</div>
</div>
</div>
<div class="driverInforListStyle">
<div class="rolling">
<div class="table-box">
<dl>
<dt>
<div>司机姓名</div>
<div>驾驶车辆</div>
<div>驾驶时长</div>
<div>计划结束时间</div>
</dt>
<dd v-for="(item,index) in driverData.driverTableData" :key="index">
<div>{{item.name}}</div>
<div>{{item.car}}</div>
<div>{{item.time}}</div>
<div>{{item.endTime}}</div>
</dd>
</dl>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="dataScrView_centerView">
</div>
<div>
<div class="dataScrView_rightView">
</div>
</div>
</template>
<script>
import { Tools, HttpReq, Dates} from '@/assets/js/common.js';
export default {
data() {
return {
whetherShow:false,
//采区产量统计
currentTime:{ //时间
day:'',
month:'',
year:'',
},
outputMineData:{ //产量数据
day:{output:'',rate:'',},
month:{output:'',rate:'',},
year:{output:'',rate:'',},
},
//司机信息
driverData:{
totalNumber:0,
workersNumber:0,
restNumber:0,
driverTableData:[],
},
}
},
mounted() { },
methods: {
loadData(){
console.log('数据总览');
this.whetherShow = true;
this.dayCurrentTimeFn();
this.monthCurrentTimeFn();
this.yearCurrentTimeFn();
this.$nextTick(()=>{
//获取采区当前日产量
HttpReq.truckDispatching.caiquAreaQueryDay({size:1,addTime:this.currentTime.day}).then((res) => {
if(res.code == 200){
let undueArray = {};
if(res.data.totalElements == 0){
undueArray.rate = 0;
undueArray.output = 0;
}else{
if(res.data.content[0].rate == ''){
undueArray.rate = 0;
undueArray.output = res.data.content[0].output;
alert(1)
}else{
undueArray.rate = parseFloat(res.data.content[0].rate) * 100;
undueArray.output = res.data.content[0].output;
}
}
this.outputMineData.day = undueArray;
}
})
//获取采区当前月产量
HttpReq.truckDispatching.caiquAreaQueryMonth({size:1,addTime:this.currentTime.month}).then((res) => {
if(res.code == 200){
let undueArray = {};
if(res.data.totalElements == 0){
undueArray.rate = 0;
undueArray.output = 0;
}else{
if(res.data.content[0].rate == ''){
undueArray.rate = 0;
undueArray.output = res.data.content[0].output;
}else{
undueArray.rate = parseFloat(res.data.content[0].rate) * 100;
undueArray.output = res.data.content[0].output;
}
}
this.outputMineData.month = undueArray;
}
})
//获取采区当前年产量
HttpReq.truckDispatching.caiquAreaQueryYear({size:1,addTime:this.currentTime.year}).then((res) => {
if(res.code == 200){
let undueArray = {};
if(res.data.totalElements == 0){
undueArray.rate = 0;
undueArray.output = 0;
}else{
if(res.data.content[0].rate == ''){
undueArray.rate = 0;
undueArray.output = res.data.content[0].output;
}else{
undueArray.rate = parseFloat(res.data.content[0].rate) * 100;
undueArray.output = res.data.content[0].output;
}
}
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;
}
})
})
},
//获取当前时间
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>
<style>
.el-progress__text{
color:white;
font-weight: 600;
}
.dataScrView{
width: 100%;
height: 100%;
overflow: hidden;
display: flex;
justify-content: space-between;
}
.dataScrView_leftView{
height: 100%;
width: 20%;
}
.dataScrView_centerView{
height: 100%;
width: 60%;
background-color: wheat;
}
.dataScrView_rightView{
height: 100%;
width: 20%;
background-color: skyblue;
}
.dataScrView_leftView>div{
width: 100%;
height: 23.5vh;
background:no-repeat center center url('~@/assets/images/cutGraph/yuanjianjuxing1.png');
background-size:100% 100%;
padding: 5px 7px;
box-sizing: border-box;
overflow: hidden;
}
.dataScrView_rightView>div{
width: 100%;
height: 23.5vh;
background:no-repeat center center url('~@/assets/images/cutGraph/yuanjianjuxing1.png');
background-size:100% 100%;
padding: 5px 7px;
box-sizing: border-box;
overflow: hidden;
}
.dataScrView_leftView_title,.dataScrView_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;
}
.dataScrView_leftView_content,.dataScrView_rightView_content{
width: 100%;
height: 19vh;
}
.dataScrView_leftView_content_view1{
margin-bottom: 7px;
display: flex;
align-items: center;
font-size: 20px;
}
.driverInforViewsStyle{
width: 100%;
display: flex;
justify-content: space-between;
}
.driverTotalnumberStyle{
width: 40%;
height: 5vh;
background:no-repeat center center url('~@/assets/images/cutGraph/sijirenshu1.png');
background-size:100% 100%;
display: flex;
align-items: center;
justify-content: space-evenly;
color: white;
}
.presentDrivernumberStyle{
width: 59%;
height: 5vh;
background:no-repeat center center url('~@/assets/images/cutGraph/dangqianrenshu1.png');
background-size:100% 100%;
display: flex;
align-items: center;
justify-content: space-evenly;
}
.driverInforListStyle{
text-align: center;
}
.table-box{
margin-top: -10px;
}
dl{
display:table;
width:100%;
}
dt{
margin-top: 20px;
display:table-row;
background-color: #274088;
}
dt>div{
display:table-cell;
padding:5px 3px;
font-size: 15px;
font-weight: 500;
color: rgb(24,228,240);
}
dd{
display:table-row;
}
dd>div{
display:table-cell;
padding:5px 3px;
font-size: 14px;
color: rgb(24,228,240);
}
.rolling{
height: 13.5vh;
overflow-y:auto;
scrollbar-width: none;
}
.rolling::-webkit-scrollbar {
display: none;
}
</style>
\ No newline at end of file
src/views/MLargeScreen/index.vue
View file @ c965b260
......@@ -110,7 +110,7 @@ export default {
let sec = String(myDate.getSeconds() < 10 ? '0' + myDate.getSeconds() : myDate.getSeconds());
let weeks = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
let week = weeks[wk];
this.currentTime = yy + '-' + mm + '-' + dd + ' ' + hou + ':' + min + ':' + sec;
this.currentTime = yy + '/' + mm + '/' + dd + ' ' + hou + ':' + min + ':' + sec;
},
},
destroyed(){
......
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