Skip to content

卡
卡车调度系统
Commit cfd18d2e authored by xxx's avatar xxx
Browse files
Options

1

parent 97550108
Show whitespace changes
Inline Side-by-side
Showing with 595 additions and 16 deletions
src/views/MLargeScreen/components/smallComponents/DPcomputer2.vue
View file @ cfd18d2e
<template> <template>
<div class="DPcomputer2Box">
<!-- 司机信息 -->
<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>
<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>
</template> </template>
...@@ -11,19 +53,71 @@ import { Tools, HttpReq, CAMap} from '@/assets/js/common.js'; ...@@ -11,19 +53,71 @@ import { Tools, HttpReq, CAMap} from '@/assets/js/common.js';
export default { export default {
data(){ data(){
return { return {
DPcomputer2BoxTimer:null,
//司机信息
driverData:{
totalNumber:0,
workersNumber:0,
restNumber:0,
driverTableData:[],
},
} }
}, },
mounted(){ mounted(){
this.loadData();
}, },
methods:{ methods:{
loadData(){ loadData(){
//获取司机信息
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;
}
})
this.DPcomputer2BoxTimer = setInterval(() => {
//获取司机信息
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;
}
})
},10000)
}, },
}, },
beforeDestroy(){ beforeDestroy(){
if(this.DPcomputer2BoxTimer) {
clearInterval(this.DPcomputer2BoxTimer);
this.DPcomputer2BoxTimer = null;
}
} }
} }
</script> </script>
...@@ -33,5 +127,93 @@ export default { ...@@ -33,5 +127,93 @@ export default {
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
.DPcomputer2Box{
width: 20vw;
height: 23.5vh;
background-color: rgba(32,42,67,0.95);
padding: 5px 7px;
box-sizing: border-box;
overflow: hidden;
}
.DPcomputer2Box .dataScrView_leftView_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;
}
.DPcomputer2Box .dataScrView_leftView_content{
width: 100%;
height: 19vh;
}
.DPcomputer2Box .driverInforViewsStyle{
width: 100%;
display: flex;
justify-content: space-between;
}
.DPcomputer2Box .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;
}
.DPcomputer2Box .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;
}
.DPcomputer2Box .driverInforListStyle{
text-align: center;
}
.DPcomputer2Box .rolling{
height: 13.5vh;
overflow-y:auto;
scrollbar-width: none;
}
.DPcomputer2Box .rolling::-webkit-scrollbar {
display: none;
}
/* .DPcomputer2Box .table-box{
margin-top: -10px;
} */
.DPcomputer2Box dl{
display:table;
width:100%;
}
.DPcomputer2Box dt{
margin-top: 20px;
display:table-row;
background-color: #274088;
}
.DPcomputer2Box dt>div{
display:table-cell;
padding:5px 3px;
font-size: 15px;
font-weight: 500;
color: rgb(24,228,240);
}
.DPcomputer2Box dd{
display:table-row;
}
.DPcomputer2Box dd>div{
display:table-cell;
padding:5px 3px;
font-size: 14px;
color: rgb(24,228,240);
}
</style> </style>
\ No newline at end of file
src/views/MLargeScreen/components/smallComponents/DPcomputer3.vue
View file @ cfd18d2e
<template> <template>
<div> <div class="DPcomputer3Box">
<!-- 卡车司机排行榜-->
<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" id="dataScrView_leftView_content_views3_1"></div>
</div>
</div> </div>
</template> </template>
<script> <script>
import { Tools, HttpReq, CAMap} from '@/assets/js/common.js'; import { Tools, HttpReq, CAMap} from '@/assets/js/common.js';
import * as echarts from 'echarts';
export default { export default {
data(){ data(){
return { return {
DPcomputer3BoxTimer:null,
//卡车排行榜
truckRankListData:{
echartsX:'Km',
carclass:'卡车',
selectTimeText:'day',
selectFieldText:'juli',
driverName:[],
driverSeriesData:[],
},
} }
}, },
mounted(){}, mounted(){
this.loadData();
},
methods:{ methods:{
loadData(){
//获取卡车排行榜
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();
})
}
})
this.DPcomputer3BoxTimer = setInterval(() => {
//获取卡车排行榜
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();
})
}
})
},10000)
}, },
beforeDestroy(){ //卡车切换时间
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'){
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();
})
}
},
//卡车切换字段排序
truckChangeField(text){
this.truckRankListData.selectFieldText = text;
let truckQuery1 = {};
truckQuery1.size = 5;
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 == 'yunzai'){
this.truckRankListData.echartsX = '吨';
}else if(text == 'jiedan'){
this.truckRankListData.echartsX = '次';
}
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();
})
}
})
},
//卡车排行榜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);
},
},
beforeDestroy(){
if(this.DPcomputer3BoxTimer) {
clearInterval(this.DPcomputer3BoxTimer);
this.DPcomputer3BoxTimer = null;
}
} }
} }
</script> </script>
...@@ -29,5 +325,90 @@ export default { ...@@ -29,5 +325,90 @@ export default {
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
.DPcomputer3Box{
width: 20vw;
height: 23.5vh;
background-color: rgba(32,42,67,0.95);
padding: 5px 7px;
box-sizing: border-box;
overflow: hidden;
}
.DPcomputer3Box .dataScrView_leftView_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;
}
.DPcomputer3Box .truck_titleStyle{
display: flex;
justify-content: space-between;
padding-right: 4vw;
}
.DPcomputer3Box .driverTitleDateStyle{
display: flex;
color: #06EFFE;
font-size: 16px;
text-shadow: 0px 0px 0px;
height: 3.5vh;
align-items: center;
}
.DPcomputer3Box .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;
}
.DPcomputer3Box .driverTitleDateStyle_son2{
height: 2.5vh;
line-height: 2.5vh;
margin-right: 5px;
padding:0px 5px;
box-sizing: border-box;
border-radius: 5px;
cursor: pointer;
}
.DPcomputer3Box .dataScrView_leftView_content{
width: 100%;
height: 19vh;
}
.DPcomputer3Box .dataScrView_leftView_content_views2{
display: flex;
justify-content: space-between;
}
.DPcomputer3Box .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;
}
.DPcomputer3Box .selectFieldStyle{
opacity: 0.7;
}
.DPcomputer3Box .dataScrView_leftView_content_views3{
width: 100%;
height: 16vh;
overflow-y:auto;
scrollbar-width: none;
}
.DPcomputer3Box .dataScrView_leftView_content_views3::-webkit-scrollbar {
display: none;
}
</style> </style>
\ No newline at end of file
src/views/MLargeScreen/components/smallComponents/DPcomputer4.vue
View file @ cfd18d2e
<template> <template>
<div> <div class="DPcomputer4Box">
</div> </div>
</template> </template>
<script> <script>
import { Tools, HttpReq, CAMap} from '@/assets/js/common.js'; import { Tools, HttpReq, CAMap} from '@/assets/js/common.js';
import * as echarts from 'echarts';
export default { export default {
data(){ data(){
return { return {
DPcomputer4BoxTimer:null,
} }
}, },
mounted(){}, mounted(){
this.loadData();
},
methods:{ methods:{
loadData(){
}
}, },
beforeDestroy(){ beforeDestroy(){
if(this.DPcomputer4BoxTimer) {
clearInterval(this.DPcomputer4BoxTimer);
this.DPcomputer4BoxTimer = null;
}
} }
} }
</script> </script>
...@@ -29,5 +38,12 @@ export default { ...@@ -29,5 +38,12 @@ export default {
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
.DPcomputer4Box{
width: 20vw;
height: 23.5vh;
background-color: rgba(32,42,67,0.95);
padding: 5px 7px;
box-sizing: border-box;
overflow: hidden;
}
</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