Skip to content

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

1

parent 6142c3e9
Show whitespace changes
Inline Side-by-side
Showing with 299 additions and 7 deletions
src/views/MLargeScreen/components/smallComponents/DPcomputer12.vue
View file @ 30e057f7
<template> <template>
<div class="DPcomputer12Box"> <div class="DPcomputer12Box">
<!-- 铲车排行榜--> <!-- 铲车排行榜-->
<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 == 'average' ? '' : 'selectFieldStyle' " @click="forkLiftChangeField('average')">平均时长</div>
<div :class="forkLiftRankListData.selectFieldText == 'zcar' ? '' : 'selectFieldStyle' " @click="forkLiftChangeField('zcar')">装车量</div>
<div :class="forkLiftRankListData.selectFieldText == 'waiting' ? '' : 'selectFieldStyle' " @click="forkLiftChangeField('waiting')">装车数</div>
</div>
<div class="carManScrView_leftView_content_views3" v-if="forkLiftRankListData.selectFieldText == 'time'">
<div v-for="(item,index) in forkLiftRankListData.listData" :key="index" :class="'forkliftRankTwo' + (index + 1)">
<div style="color:#BCF0FE;">{{item.number}}</div>
<div style="color:#1AC9FF;">{{item.time}}H</div>
<div style="color:#BCF0FE;">{{item.createTime}}</div>
</div>
</div>
<div class="carManScrView_leftView_content_views3" v-if="forkLiftRankListData.selectFieldText == 'average'">
<div v-for="(item,index) in forkLiftRankListData.listData" :key="index" :class="'forkliftRankTwo' + (index + 1)">
<div style="color:#BCF0FE;">{{item.number}}</div>
<div style="color:#1AC9FF;">{{item.average}}H</div>
<div style="color:#BCF0FE;">{{item.createTime}}</div>
</div>
</div>
<div class="carManScrView_leftView_content_views3" v-if="forkLiftRankListData.selectFieldText == 'zcar'">
<div v-for="(item,index) in forkLiftRankListData.listData" :key="index" :class="'forkliftRankTwo' + (index + 1)">
<div style="color:#BCF0FE;">{{item.number}}</div>
<div style="color:#1AC9FF;">{{item.zcar}}吨</div>
<div style="color:#BCF0FE;">{{item.createTime}}</div>
</div>
</div>
<div class="carManScrView_leftView_content_views3" v-if="forkLiftRankListData.selectFieldText == 'waiting'">
<div v-for="(item,index) in forkLiftRankListData.listData" :key="index" :class="'forkliftRankTwo' + (index + 1)">
<div style="color:#BCF0FE;">{{item.number}}</div>
<div style="color:#1AC9FF;">{{item.waiting}}辆</div>
<div style="color:#BCF0FE;">{{item.createTime}}</div>
</div>
</div>
</div>
</div> </div>
</template> </template>
...@@ -13,7 +56,13 @@ export default { ...@@ -13,7 +56,13 @@ export default {
data(){ data(){
return { return {
DPcomputer12BoxTimer:null, DPcomputer12BoxTimer:null,
//铲车排行榜
forkLiftRankListData:{
carclass:'铲车',
selectTimeText:'day',
selectFieldText:'time',
listData:[],
},
} }
}, },
mounted(){ mounted(){
...@@ -21,8 +70,97 @@ export default { ...@@ -21,8 +70,97 @@ export default {
}, },
methods:{ methods:{
loadData(){ loadData(){
//获取铲车排行榜
let forkLiftQuery1 = {};
forkLiftQuery1.size = 5;
forkLiftQuery1.sort = this.forkLiftRankListData.selectFieldText + ',desc';
forkLiftQuery1.carclass = this.forkLiftRankListData.carclass;
this.$nextTick(()=>{
if(this.forkLiftRankListData.selectTimeText == 'day'){
HttpReq.truckDispatching.apiManmadesDay1Query(forkLiftQuery1).then((res) => {
this.forkLiftRankListData.listData = res;
})
}else if(this.forkLiftRankListData.selectTimeText == 'week'){
HttpReq.truckDispatching.apiManmadesZhou1Query(forkLiftQuery1).then((res) => {
this.forkLiftRankListData.listData = res;
})
}else if(this.forkLiftRankListData.selectTimeText == 'month'){
HttpReq.truckDispatching.apiManmadesMou1Query(forkLiftQuery1).then((res) => {
this.forkLiftRankListData.listData = res;
})
}
})
this.DPcomputer12BoxTimer = setInterval(() => {
//获取铲车排行榜
let forkLiftQuery1 = {};
forkLiftQuery1.size = 5;
forkLiftQuery1.sort = this.forkLiftRankListData.selectFieldText + ',desc';
forkLiftQuery1.carclass = this.forkLiftRankListData.carclass;
this.$nextTick(()=>{
if(this.forkLiftRankListData.selectTimeText == 'day'){
HttpReq.truckDispatching.apiManmadesDay1Query(forkLiftQuery1).then((res) => {
this.forkLiftRankListData.listData = res;
})
}else if(this.forkLiftRankListData.selectTimeText == 'week'){
HttpReq.truckDispatching.apiManmadesZhou1Query(forkLiftQuery1).then((res) => {
this.forkLiftRankListData.listData = res;
})
}else if(this.forkLiftRankListData.selectTimeText == 'month'){
HttpReq.truckDispatching.apiManmadesMou1Query(forkLiftQuery1).then((res) => {
this.forkLiftRankListData.listData = res;
})
}
})
},20000)
}, },
//铲车切换时间
forkLiftChangeTime(text){
this.forkLiftRankListData.selectTimeText = text;
let forkLiftQuery1 = {};
forkLiftQuery1.size = 5;
forkLiftQuery1.sort = this.forkLiftRankListData.selectFieldText + ',desc';
forkLiftQuery1.carclass = this.forkLiftRankListData.carclass;
if(text == 'day'){
HttpReq.truckDispatching.apiManmadesDay1Query(forkLiftQuery1).then((res) => {
this.forkLiftRankListData.listData = res;
})
}
if(text == 'week'){
HttpReq.truckDispatching.apiManmadesZhou1Query(forkLiftQuery1).then((res) => {
this.forkLiftRankListData.listData = res;
})
}
if(text == 'month'){
HttpReq.truckDispatching.apiManmadesMou1Query(forkLiftQuery1).then((res) => {
this.forkLiftRankListData.listData = res;
})
}
},
//铲车切换字段排序
forkLiftChangeField(text){
this.forkLiftRankListData.selectFieldText = text;
let forkLiftQuery1 = {};
forkLiftQuery1.size = 5;
forkLiftQuery1.sort = this.forkLiftRankListData.selectFieldText + ',desc';
forkLiftQuery1.carclass = this.forkLiftRankListData.carclass;
this.$nextTick(()=>{
if(this.forkLiftRankListData.selectTimeText == 'day'){
HttpReq.truckDispatching.apiManmadesDay1Query(forkLiftQuery1).then((res) => {
this.forkLiftRankListData.listData = res;
})
}else if(this.forkLiftRankListData.selectTimeText == 'week'){
HttpReq.truckDispatching.apiManmadesZhou1Query(forkLiftQuery1).then((res) => {
this.forkLiftRankListData.listData = res;
})
}else if(this.forkLiftRankListData.selectTimeText == 'month'){
HttpReq.truckDispatching.apiManmadesMou1Query(forkLiftQuery1).then((res) => {
this.forkLiftRankListData.listData = res;
})
}
})
},
}, },
beforeDestroy(){ beforeDestroy(){
if(this.DPcomputer12BoxTimer) { if(this.DPcomputer12BoxTimer) {
...@@ -46,4 +184,142 @@ export default { ...@@ -46,4 +184,142 @@ export default {
box-sizing: border-box; box-sizing: border-box;
overflow: hidden; overflow: hidden;
} }
.DPcomputer12Box .carManScrView_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;
}
.DPcomputer12Box .truck_titleStyle{
display: flex;
justify-content: space-between;
padding-right: 4vw;
}
.DPcomputer12Box .driverTitleDateStyle{
display: flex;
color: #06EFFE;
font-size: 16px;
text-shadow: 0px 0px 0px;
height: 3.5vh;
align-items: center;
}
.DPcomputer12Box .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;
}
.DPcomputer12Box .driverTitleDateStyle_son2{
height: 2.5vh;
line-height: 2.5vh;
margin-right: 5px;
padding:0px 5px;
box-sizing: border-box;
border-radius: 5px;
cursor: pointer;
}
.DPcomputer12Box .carManScrView_leftView_content{
width: 100%;
height: 27vh;
}
.DPcomputer12Box .carManScrView_leftView_content_views2{
display: flex;
justify-content: space-between;
}
.DPcomputer12Box .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;
}
.DPcomputer12Box .selectFieldStyle{
opacity: 0.7;
}
.DPcomputer12Box .carManScrView_leftView_content_views3{
width: 100%;
height: 24vh;
overflow-y:auto;
scrollbar-width: none;
}
.DPcomputer12Box .carManScrView_leftView_content_views3::-webkit-scrollbar {
display: none;
}
.DPcomputer12Box .forkliftRankTwo1{
margin-top: 1vh;
margin-bottom: 1.5vh;
display: flex;
justify-content: space-evenly;
width: 100%;
height: 3vh;
line-height: 3vh;
background:no-repeat center center url('~@/assets/images/cutGraph/list1.png');
background-size:100% 100%;
padding-left: 4vw;
box-sizing: border-box;
}
.DPcomputer12Box .forkliftRankTwo2{
margin-bottom: 1.5vh;
display: flex;
justify-content: space-evenly;
width: 100%;
height: 3vh;
line-height: 3vh;
background:no-repeat center center url('~@/assets/images/cutGraph/list2.png');
background-size:100% 100%;
padding-left: 4vw;
box-sizing: border-box;
}
.DPcomputer12Box .forkliftRankTwo3{
margin-bottom: 1.5vh;
display: flex;
justify-content: space-evenly;
width: 100%;
height: 3vh;
line-height: 3vh;
background:no-repeat center center url('~@/assets/images/cutGraph/list3.png');
background-size:100% 100%;
padding-left: 4vw;
box-sizing: border-box;
}
.DPcomputer12Box .forkliftRankTwo4{
margin-bottom: 1.5vh;
display: flex;
justify-content: space-evenly;
width: 100%;
height: 3vh;
line-height: 3vh;
background:no-repeat center center url('~@/assets/images/cutGraph/list4.png');
background-size:100% 100%;
padding-left: 4vw;
box-sizing: border-box;
}
.DPcomputer12Box .forkliftRankTwo5{
display: flex;
justify-content: space-evenly;
width: 100%;
height: 3vh;
line-height: 3vh;
background:no-repeat center center url('~@/assets/images/cutGraph/list5.png');
background-size:100% 100%;
padding-left: 4vw;
box-sizing: border-box;
}
</style> </style>
\ No newline at end of file
src/views/MLargeScreen/components/smallComponents/DPcomputer13.vue
View file @ 30e057f7
<template> <template>
<div> <div class="DPcomputer13Box">
<!-- 卡车动态 -->
</div> </div>
</template> </template>
...@@ -11,15 +12,23 @@ import { Tools, HttpReq, CAMap} from '@/assets/js/common.js'; ...@@ -11,15 +12,23 @@ import { Tools, HttpReq, CAMap} from '@/assets/js/common.js';
export default { export default {
data(){ data(){
return { return {
DPcomputer13BoxTimer:null,
} }
}, },
mounted(){}, mounted(){
this.loadData();
},
methods:{ methods:{
loadData(){
}, },
},
beforeDestroy(){ beforeDestroy(){
if(this.DPcomputer13BoxTimer) {
clearInterval(this.DPcomputer13BoxTimer);
this.DPcomputer13BoxTimer = null;
}
} }
} }
</script> </script>
...@@ -29,5 +38,12 @@ export default { ...@@ -29,5 +38,12 @@ export default {
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
.DPcomputer13Box{
width: 20vw;
height: 32vh;
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