Skip to content

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

1

parent 0690f55a
Hide whitespace changes
Inline Side-by-side
Showing with 530 additions and 11 deletions
src/views/MLargeScreen/components/smallComponents/DPcomputer10.vue
View file @ 6142c3e9
......@@ -55,6 +55,9 @@
<script>
import { Tools, HttpReq, CAMap} from '@/assets/js/common.js';
import * as echarts from 'echarts';
import "echarts-gl";
import { getPie3D } from "../../../components/echarts/bingtu3d";
export default {
......@@ -95,6 +98,125 @@ export default {
},
methods:{
loadData(){
//获取车辆运行状况
HttpReq.truckDispatching.carInformationQuery({size:9999}).then((res) => {
let kache1 = [];
let kachezaixian = [];
let kachelixian = [];
let dianchan1 = [];
let dianchanzaixian = [];
let dianchanlixian = [];
let qitache1 = [];
let qitachezaixian = [];
let qitachelixian = [];
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);
}
})
this.carWorkingStateData.optionData[0].value = kache1.length;
this.carWorkingStateData.optionData[1].value = dianchan1.length;
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);
}
})
this.carWorkingStateData.kacheonline = kachezaixian.length;
this.carWorkingStateData.chancheonline = dianchanzaixian.length;
this.carWorkingStateData.qitacheonline = qitachezaixian.length;
this.carWorkingStateData.kacheoffline = kachelixian.length;
this.carWorkingStateData.chancheoffline = dianchanlixian.length;
this.carWorkingStateData.qitacheoffline = qitachelixian.length;
this.draw3d();
this.$nextTick(() => {
let parent = document.getElementById("chart-panel"); // 获取父元素
let canvas = parent.getElementsByTagName("canvas"); // 获取父元素下面的所有canvas元素
canvas[1].style.transform = "rotateX(30deg)";
});
}
})
this.DPcomputer10BoxTimer = setInterval(() => {
//获取车辆运行状况
HttpReq.truckDispatching.carInformationQuery({size:9999}).then((res) => {
let kache1 = [];
let kachezaixian = [];
let kachelixian = [];
let dianchan1 = [];
let dianchanzaixian = [];
let dianchanlixian = [];
let qitache1 = [];
let qitachezaixian = [];
let qitachelixian = [];
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);
}
})
this.carWorkingStateData.optionData[0].value = kache1.length;
this.carWorkingStateData.optionData[1].value = dianchan1.length;
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);
}
})
this.carWorkingStateData.kacheonline = kachezaixian.length;
this.carWorkingStateData.chancheonline = dianchanzaixian.length;
this.carWorkingStateData.qitacheonline = qitachezaixian.length;
this.carWorkingStateData.kacheoffline = kachelixian.length;
this.carWorkingStateData.chancheoffline = dianchanlixian.length;
this.carWorkingStateData.qitacheoffline = qitachelixian.length;
this.draw3d();
this.$nextTick(() => {
let parent = document.getElementById("chart-panel"); // 获取父元素
let canvas = parent.getElementsByTagName("canvas"); // 获取父元素下面的所有canvas元素
canvas[1].style.transform = "rotateX(30deg)";
});
}
})
},10000)
},
//车辆运行状况
......
src/views/MLargeScreen/components/smallComponents/DPcomputer11.vue
View file @ 6142c3e9
<template>
<div>
<div class="DPcomputer11Box">
<!-- 卡车排行榜-->
<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 == 'zcar' ? '' : 'selectFieldStyle' " @click="truckChangeField('zcar')">运载量</div>
<div :class="truckRankListData.selectFieldText == 'waiting' ? '' : 'selectFieldStyle' " @click="truckChangeField('waiting')">接单数</div>
</div>
<div class="carManScrView_leftView_content_views3" id="carManScrView_leftView_content_views3_1"></div>
</div>
</div>
</template>
<script>
import { Tools, HttpReq, CAMap} from '@/assets/js/common.js';
import * as echarts from 'echarts';
export default {
data(){
return {
DPcomputer11BoxTimer:null,
//卡车排行榜
truckRankListData:{
echartsX:'Km',
carclass:'卡车',
selectTimeText:'day',
selectFieldText:'juli',
driverName:[],
driverSeriesData:[],
driverName1:['kfdfdf','dsdsd1','dsdsd55'],
driverSeriesData1:[20,50,10],
},
}
},
mounted(){},
mounted(){
this.loadData();
},
methods:{
loadData(){
let truckQuery1 = {};
truckQuery1.size = 7;
truckQuery1.sort = this.truckRankListData.selectFieldText + '';
truckQuery1.carclass = this.truckRankListData.carclass;
this.$nextTick(()=>{
if(this.truckRankListData.selectTimeText == 'day'){
HttpReq.truckDispatching.apiManmadesDay1Query(truckQuery1).then((res) => {
let arr1 = [];
let arr2 = [];
res.forEach((item,index)=>{
arr1.push(item.number);
arr2.push(item[this.truckRankListData.selectFieldText]);
})
this.truckRankListData.driverName = arr1;
this.truckRankListData.driverSeriesData = arr2;
this.truckChangeEcharts();
})
}else if(this.truckRankListData.selectTimeText == 'week'){
HttpReq.truckDispatching.apiManmadesZhou1Query(truckQuery1).then((res) => {
let arr1 = [];
let arr2 = [];
res.forEach((item,index)=>{
arr1.push(item.number);
arr2.push(item[this.truckRankListData.selectFieldText]);
})
this.truckRankListData.driverName = arr1;
this.truckRankListData.driverSeriesData = arr2;
this.truckChangeEcharts();
})
}else if(this.truckRankListData.selectTimeText == 'month'){
HttpReq.truckDispatching.apiManmadesMou1Query(truckQuery1).then((res) => {
let arr1 = [];
let arr2 = [];
res.forEach((item,index)=>{
arr1.push(item.number);
arr2.push(item[this.truckRankListData.selectFieldText]);
})
this.truckRankListData.driverName = arr1;
this.truckRankListData.driverSeriesData = arr2;
this.truckChangeEcharts();
})
}
})
this.DPcomputer11BoxTimer = setInterval(() => {
//获取卡车排行榜
let truckQuery1 = {};
truckQuery1.size = 7;
truckQuery1.sort = this.truckRankListData.selectFieldText + '';
truckQuery1.carclass = this.truckRankListData.carclass;
this.$nextTick(()=>{
if(this.truckRankListData.selectTimeText == 'day'){
HttpReq.truckDispatching.apiManmadesDay1Query(truckQuery1).then((res) => {
let arr1 = [];
let arr2 = [];
res.forEach((item,index)=>{
arr1.push(item.number);
arr2.push(item[this.truckRankListData.selectFieldText]);
})
this.truckRankListData.driverName = arr1;
this.truckRankListData.driverSeriesData = arr2;
this.truckChangeEcharts();
})
}else if(this.truckRankListData.selectTimeText == 'week'){
HttpReq.truckDispatching.apiManmadesZhou1Query(truckQuery1).then((res) => {
let arr1 = [];
let arr2 = [];
res.forEach((item,index)=>{
arr1.push(item.number);
arr2.push(item[this.truckRankListData.selectFieldText]);
})
this.truckRankListData.driverName = arr1;
this.truckRankListData.driverSeriesData = arr2;
this.truckChangeEcharts();
})
}else if(this.truckRankListData.selectTimeText == 'month'){
HttpReq.truckDispatching.apiManmadesMou1Query(truckQuery1).then((res) => {
let arr1 = [];
let arr2 = [];
res.forEach((item,index)=>{
arr1.push(item.number);
arr2.push(item[this.truckRankListData.selectFieldText]);
})
this.truckRankListData.driverName = arr1;
this.truckRankListData.driverSeriesData = arr2;
this.truckChangeEcharts();
})
}
})
},10000)
},
//卡车切换时间
truckChangeTime(text){
this.truckRankListData.selectTimeText = text;
let truckQuery1 = {};
truckQuery1.size = 7;
truckQuery1.sort = this.truckRankListData.selectFieldText + '';
truckQuery1.carclass = this.truckRankListData.carclass;
if(text == 'day'){
HttpReq.truckDispatching.apiManmadesDay1Query(truckQuery1).then((res) => {
let arr1 = [];
let arr2 = [];
res.forEach((item,index)=>{
arr1.push(item.number);
arr2.push(item[this.truckRankListData.selectFieldText]);
})
this.truckRankListData.driverName = arr1;
this.truckRankListData.driverSeriesData = arr2;
this.truckChangeEcharts();
})
}else if(text == 'week'){
HttpReq.truckDispatching.apiManmadesZhou1Query(truckQuery1).then((res) => {
let arr1 = [];
let arr2 = [];
res.forEach((item,index)=>{
arr1.push(item.number);
arr2.push(item[this.truckRankListData.selectFieldText]);
})
this.truckRankListData.driverName = arr1;
this.truckRankListData.driverSeriesData = arr2;
this.truckChangeEcharts();
})
}else if(text == 'month'){
HttpReq.truckDispatching.apiManmadesMou1Query(truckQuery1).then((res) => {
let arr1 = [];
let arr2 = [];
res.forEach((item,index)=>{
arr1.push(item.number);
arr2.push(item[this.truckRankListData.selectFieldText]);
})
this.truckRankListData.driverName = arr1;
this.truckRankListData.driverSeriesData = arr2;
this.truckChangeEcharts();
})
}
},
//卡车切换字段排序
truckChangeField(text){
this.truckRankListData.selectFieldText = text;
let truckQuery1 = {};
truckQuery1.size = 7;
truckQuery1.sort = this.truckRankListData.selectFieldText + '';
truckQuery1.carclass = this.truckRankListData.carclass;
if(text == 'juli'){
this.truckRankListData.echartsX = 'km';
}else if(text == 'time'){
this.truckRankListData.echartsX = 'H';
}else if(text == 'zcar'){
this.truckRankListData.echartsX = '吨';
}else if(text == 'waiting'){
this.truckRankListData.echartsX = '次';
}
this.$nextTick(()=>{
if(this.truckRankListData.selectTimeText == 'day'){
HttpReq.truckDispatching.apiManmadesDay1Query(truckQuery1).then((res) => {
let arr1 = [];
let arr2 = [];
res.forEach((item,index)=>{
arr1.push(item.number);
arr2.push(item[this.truckRankListData.selectFieldText]);
})
this.truckRankListData.driverName = arr1;
this.truckRankListData.driverSeriesData = arr2;
this.truckChangeEcharts();
})
}else if(this.truckRankListData.selectTimeText == 'week'){
HttpReq.truckDispatching.apiManmadesZhou1Query(truckQuery1).then((res) => {
let arr1 = [];
let arr2 = [];
res.forEach((item,index)=>{
arr1.push(item.number);
arr2.push(item[this.truckRankListData.selectFieldText]);
})
this.truckRankListData.driverName = arr1;
this.truckRankListData.driverSeriesData = arr2;
this.truckChangeEcharts();
})
}else if(this.truckRankListData.selectTimeText == 'month'){
HttpReq.truckDispatching.apiManmadesMou1Query(truckQuery1).then((res) => {
let arr1 = [];
let arr2 = [];
res.forEach((item,index)=>{
arr1.push(item.number);
arr2.push(item[this.truckRankListData.selectFieldText]);
})
this.truckRankListData.driverName = arr1;
this.truckRankListData.driverSeriesData = arr2;
this.truckChangeEcharts();
})
}
})
},
//卡车排行榜Echarts
truckChangeEcharts(){
echarts.init(document.getElementById('carManScrView_leftView_content_views3_1')).dispose();
var myChart = echarts.init(document.getElementById('carManScrView_leftView_content_views3_1'));
var option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
grid: {
top:'18%',
left: '1%',
bottom: '0%',
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.DPcomputer11BoxTimer) {
clearInterval(this.DPcomputer11BoxTimer);
this.DPcomputer11BoxTimer = null;
}
}
}
</script>
......@@ -29,5 +325,90 @@ export default {
margin: 0;
padding: 0;
}
.DPcomputer11Box{
width: 20vw;
height: 32vh;
background-color: rgba(32,42,67,0.95);
padding: 5px 7px;
box-sizing: border-box;
overflow: hidden;
}
.DPcomputer11Box .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;
}
.DPcomputer11Box .truck_titleStyle{
display: flex;
justify-content: space-between;
padding-right: 4vw;
}
.DPcomputer11Box .driverTitleDateStyle{
display: flex;
color: #06EFFE;
font-size: 16px;
text-shadow: 0px 0px 0px;
height: 3.5vh;
align-items: center;
}
.DPcomputer11Box .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;
}
.DPcomputer11Box .driverTitleDateStyle_son2{
height: 2.5vh;
line-height: 2.5vh;
margin-right: 5px;
padding:0px 5px;
box-sizing: border-box;
border-radius: 5px;
cursor: pointer;
}
.DPcomputer11Box .carManScrView_rightView_content{
width: 100%;
height: 27vh;
}
.DPcomputer11Box .carManScrView_leftView_content_views2{
display: flex;
justify-content: space-between;
}
.DPcomputer11Box .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;
}
.DPcomputer11Box .selectFieldStyle{
opacity: 0.7;
}
.DPcomputer11Box .carManScrView_leftView_content_views3{
width: 100%;
height: 24vh;
overflow-y:auto;
scrollbar-width: none;
}
.DPcomputer11Box .carManScrView_leftView_content_views3::-webkit-scrollbar {
display: none;
}
</style>
\ No newline at end of file
src/views/MLargeScreen/components/smallComponents/DPcomputer12.vue
View file @ 6142c3e9
<template>
<div>
<div class="DPcomputer12Box">
<!-- 铲车排行榜-->
</div>
</template>
......@@ -11,15 +12,23 @@ import { Tools, HttpReq, CAMap} from '@/assets/js/common.js';
export default {
data(){
return {
DPcomputer12BoxTimer:null,
}
},
mounted(){},
mounted(){
this.loadData();
},
methods:{
loadData(){
},
},
beforeDestroy(){
if(this.DPcomputer12BoxTimer) {
clearInterval(this.DPcomputer12BoxTimer);
this.DPcomputer12BoxTimer = null;
}
}
}
</script>
......@@ -29,5 +38,12 @@ export default {
margin: 0;
padding: 0;
}
.DPcomputer12Box{
width: 20vw;
height: 32vh;
background-color: rgba(32,42,67,0.95);
padding: 5px 7px;
box-sizing: border-box;
overflow: hidden;
}
</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