Skip to content

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

1

parent cfd18d2e
Hide whitespace changes
Inline Side-by-side
Showing with 304 additions and 10 deletions
src/views/MLargeScreen/components/smallComponents/DPcomputer4.vue
View file @ ff8e7e4e
<template> <template>
<div class="DPcomputer4Box"> <div class="DPcomputer4Box">
<!-- 铲车司机排行榜-->
<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 == 'average' ? '' : 'selectFieldStyle' " @click="forkLiftChangeField('average')">平均时长</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" v-if="forkLiftRankListData.selectFieldText == 'time'">
<div v-for="(item,index) in forkLiftRankListData.listData" :key="index" :class="'forkliftRank' + (index + 1)">
<div style="color:#BCF0FE;">{{item.driver}}</div>
<div style="color:#1AC9FF;">{{item.time}}h</div>
<div style="color:#BCF0FE;">{{item.createTime}}</div>
</div>
</div>
<div class="dataScrView_leftView_content_views3" v-if="forkLiftRankListData.selectFieldText == 'average'">
<div v-for="(item,index) in forkLiftRankListData.listData" :key="index" :class="'forkliftRank' + (index + 1)">
<div style="color:#BCF0FE;">{{item.driver}}</div>
<div style="color:#1AC9FF;">{{item.average}}h</div>
<div style="color:#BCF0FE;">{{item.createTime}}</div>
</div>
</div>
<div class="dataScrView_leftView_content_views3" v-if="forkLiftRankListData.selectFieldText == 'yunzai'">
<div v-for="(item,index) in forkLiftRankListData.listData" :key="index" :class="'forkliftRank' + (index + 1)">
<div style="color:#BCF0FE;">{{item.driver}}</div>
<div style="color:#1AC9FF;">{{item.yunzai}}吨</div>
<div style="color:#BCF0FE;">{{item.createTime}}</div>
</div>
</div>
<div class="dataScrView_leftView_content_views3" v-if="forkLiftRankListData.selectFieldText == 'jiedan'">
<div v-for="(item,index) in forkLiftRankListData.listData" :key="index" :class="'forkliftRank' + (index + 1)">
<div style="color:#BCF0FE;">{{item.driver}}</div>
<div style="color:#1AC9FF;">{{item.jiedan}}辆</div>
<div style="color:#BCF0FE;">{{item.createTime}}</div>
</div>
</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 {
DPcomputer4BoxTimer:null, DPcomputer4BoxTimer: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.kaChanRankListDayQuery(forkLiftQuery1).then((res) => {
this.forkLiftRankListData.listData = res;
})
}else if(this.forkLiftRankListData.selectTimeText == 'week'){
HttpReq.truckDispatching.kaChanRankListZhouQuery(forkLiftQuery1).then((res) => {
this.forkLiftRankListData.listData = res;
})
}else if(this.forkLiftRankListData.selectTimeText == 'month'){
HttpReq.truckDispatching.kaChanRankListMouQuery(forkLiftQuery1).then((res) => {
this.forkLiftRankListData.listData = res;
})
}
})
this.DPcomputer4BoxTimer = 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.kaChanRankListDayQuery(forkLiftQuery1).then((res) => {
this.forkLiftRankListData.listData = res;
})
}else if(this.forkLiftRankListData.selectTimeText == 'week'){
HttpReq.truckDispatching.kaChanRankListZhouQuery(forkLiftQuery1).then((res) => {
this.forkLiftRankListData.listData = res;
})
}else if(this.forkLiftRankListData.selectTimeText == 'month'){
HttpReq.truckDispatching.kaChanRankListMouQuery(forkLiftQuery1).then((res) => {
this.forkLiftRankListData.listData = res;
})
}
})
},10000)
},
//铲车切换时间
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.kaChanRankListDayQuery(forkLiftQuery1).then((res) => {
this.forkLiftRankListData.listData = res;
})
}
if(text == 'week'){
HttpReq.truckDispatching.kaChanRankListZhouQuery(forkLiftQuery1).then((res) => {
this.forkLiftRankListData.listData = res;
})
}
if(text == 'month'){
HttpReq.truckDispatching.kaChanRankListMouQuery(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.kaChanRankListDayQuery(forkLiftQuery1).then((res) => {
this.forkLiftRankListData.listData = res;
})
}else if(this.forkLiftRankListData.selectTimeText == 'week'){
HttpReq.truckDispatching.kaChanRankListZhouQuery(forkLiftQuery1).then((res) => {
this.forkLiftRankListData.listData = res;
})
}else if(this.forkLiftRankListData.selectTimeText == 'month'){
HttpReq.truckDispatching.kaChanRankListMouQuery(forkLiftQuery1).then((res) => {
this.forkLiftRankListData.listData = res;
})
}
})
},
}
}, },
beforeDestroy(){ beforeDestroy(){
if(this.DPcomputer4BoxTimer) { if(this.DPcomputer4BoxTimer) {
...@@ -46,4 +184,142 @@ export default { ...@@ -46,4 +184,142 @@ export default {
box-sizing: border-box; box-sizing: border-box;
overflow: hidden; overflow: hidden;
} }
.DPcomputer4Box .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;
}
.DPcomputer4Box .truck_titleStyle{
display: flex;
justify-content: space-between;
padding-right: 4vw;
}
.DPcomputer4Box .driverTitleDateStyle{
display: flex;
color: #06EFFE;
font-size: 16px;
text-shadow: 0px 0px 0px;
height: 3.5vh;
align-items: center;
}
.DPcomputer4Box .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;
}
.DPcomputer4Box .driverTitleDateStyle_son2{
height: 2.5vh;
line-height: 2.5vh;
margin-right: 5px;
padding:0px 5px;
box-sizing: border-box;
border-radius: 5px;
cursor: pointer;
}
.DPcomputer4Box .dataScrView_leftView_content{
width: 100%;
height: 19vh;
}
.DPcomputer4Box .dataScrView_leftView_content_views2{
display: flex;
justify-content: space-between;
}
.DPcomputer4Box .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;
}
.DPcomputer4Box .selectFieldStyle{
opacity: 0.7;
}
.DPcomputer4Box .dataScrView_leftView_content_views3{
width: 100%;
height: 16vh;
overflow-y:auto;
scrollbar-width: none;
}
.DPcomputer4Box .dataScrView_leftView_content_views3::-webkit-scrollbar {
display: none;
}
.DPcomputer4Box .forkliftRank1{
margin-top: 0.5vh;
display: flex;
justify-content: space-evenly;
width: 100%;
height: 2.5vh;
line-height: 2.5vh;
background:no-repeat center center url('~@/assets/images/cutGraph/list1.png');
background-size:100% 100%;
padding-left: 4vw;
box-sizing: border-box;
}
.DPcomputer4Box .forkliftRank2{
margin-top: 0.5vh;
display: flex;
justify-content: space-evenly;
width: 100%;
height: 2.5vh;
line-height: 2.5vh;
background:no-repeat center center url('~@/assets/images/cutGraph/list2.png');
background-size:100% 100%;
padding-left: 4vw;
box-sizing: border-box;
}
.DPcomputer4Box .forkliftRank3{
margin-top: 0.5vh;
display: flex;
justify-content: space-evenly;
width: 100%;
height: 2.5vh;
line-height: 2.5vh;
background:no-repeat center center url('~@/assets/images/cutGraph/list3.png');
background-size:100% 100%;
padding-left: 4vw;
box-sizing: border-box;
}
.DPcomputer4Box .forkliftRank4{
margin-top: 0.5vh;
display: flex;
justify-content: space-evenly;
width: 100%;
height: 2.5vh;
line-height: 2.5vh;
background:no-repeat center center url('~@/assets/images/cutGraph/list4.png');
background-size:100% 100%;
padding-left: 4vw;
box-sizing: border-box;
}
.DPcomputer4Box .forkliftRank5{
margin-top: 0.5vh;
display: flex;
justify-content: space-evenly;
width: 100%;
height: 2.5vh;
line-height: 2.5vh;
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/DPcomputer5.vue
View file @ ff8e7e4e
<template> <template>
<div> <div class="DPcomputer5Box">
<!-- 数据统计图表 -->
</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 {
DPcomputer5BoxTimer:null,
} }
}, },
mounted(){}, mounted(){
this.loadData();
},
methods:{ methods:{
loadData(){
}
}, },
beforeDestroy(){ beforeDestroy(){
if(this.DPcomputer5BoxTimer) {
clearInterval(this.DPcomputer5BoxTimer);
this.DPcomputer5BoxTimer = null;
}
} }
} }
</script> </script>
...@@ -29,5 +38,14 @@ export default { ...@@ -29,5 +38,14 @@ export default {
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
.DPcomputer5Box{
width: 60vw;
height: 23.5vh;
background-color: rgba(32,42,67,0.95);
padding: 5px 7px;
box-sizing: border-box;
overflow: hidden;
z-index: 3;
position: relative;
}
</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