Skip to content

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

1

parent 30e057f7
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 1091 additions and 34 deletions
src/views/MLargeScreen/components/smallComponents/DPcomputer14.vue
View file @ 1867c7be
<template> <template>
<div> <div class="DPcomputer14Box">
<!-- 铲车动态-->
<div class="carManScrView_rightView_title">铲车动态</div>
<div class="carManScrView_rightView_content">
<div class="carDynamicTitleStyle">
<img src="../../../../assets/images/cutGraph/huoche11.png" height="28">
<div>{{forkliftkDynamicListData.number ? forkliftkDynamicListData.number : '无'}}</div>
</div>
<div class="ForkliftDynamicContent1">
<div>
<div>今日完成量</div>
<div class="ForkliftDynamicContent1_son1">{{forkliftkDynamicListData.rate ? forkliftkDynamicListData.rate : 0}}%</div>
</div>
<div>
<div>今日工时/H</div>
<div class="ForkliftDynamicContent1_son1">{{forkliftkDynamicListData.workTime ? forkliftkDynamicListData.workTime : 0}}</div>
</div>
<div>
<div>今日里程/Km</div>
<div class="ForkliftDynamicContent1_son1">{{forkliftkDynamicListData.mil ? forkliftkDynamicListData.mil : 0}}</div>
</div>
</div>
<div class="carDynamicContent1">
<div>
<img src="../../../../assets/images/cutGraph/mokuaikaobei4.png">
<div>开始工作时间</div>
<div>{{forkliftkDynamicListData.startTime ? forkliftkDynamicListData.startTime : '无'}}</div>
</div>
<div>
<img src="../../../../assets/images/cutGraph/mokuaikaobei4.png">
<div>结束工作时间</div>
<div>{{forkliftkDynamicListData.endTime ? forkliftkDynamicListData.endTime : '无'}}</div>
</div>
</div>
<div class="carDynamicContent2">
<img src="../../../../assets/images/cutGraph/tuiyuan1.png">
<div>
<div style="color:white;text-align: center;">{{forkliftkDynamicListData.loadArea ? forkliftkDynamicListData.loadArea : '无'}}</div>
<img src="../../../../assets/images/cutGraph/zu2603.png">
<div style="color:white;text-align: center;">{{forkliftkDynamicListData.unloadArea ? forkliftkDynamicListData.unloadArea : '无'}}</div>
</div>
<img src="../../../../assets/images/cutGraph/tuiyuan2.png">
</div>
</div>
</div> </div>
</template> </template>
...@@ -11,15 +53,79 @@ import { Tools, HttpReq, CAMap} from '@/assets/js/common.js'; ...@@ -11,15 +53,79 @@ import { Tools, HttpReq, CAMap} from '@/assets/js/common.js';
export default { export default {
data(){ data(){
return { return {
DPcomputer14BoxTimer:null,
//铲车动态
forkliftkDynamicListData:{
data:[],
num2:0,
number:'无',
rate:0,
carry:0,
workTime:0,
mil:0,
startTime:'无',
endTime:'无',
loadArea:'无',
unloadArea:'无',
},
} }
}, },
mounted(){}, mounted(){
this.loadData();
},
methods:{ methods:{
loadData(){
//获取车辆信息
HttpReq.truckDispatching.carInformationQuery({size:9999}).then((res) => {
let arr2 = [];
if(res.code == 200){
res.data.content.forEach((item,index)=>{
if(item.carclass == '铲车'){
arr2.push(item);
}
})
}
this.forkliftkDynamicListData.data = arr2;
this.forkliftkDynamicListData.num2 = 0;
this.dianchandongtai();
this.DPcomputer14BoxTimer = setInterval(() => {
this.dianchandongtai();
},20000)
})
},
//铲车动态
dianchandongtai(){
let num1 = parseInt(this.forkliftkDynamicListData.data.length) - 1;
//获取车辆实时数据
if(this.forkliftkDynamicListData.num2 <= num1){
}else{
this.forkliftkDynamicListData.num2 = 0;
}
if(this.forkliftkDynamicListData.data == 0){
return
}
this.forkliftkDynamicListData.number = this.forkliftkDynamicListData.data[this.forkliftkDynamicListData.num2].number;
HttpReq.truckDispatching.apiManmadesChancheRealQuery1({number:this.forkliftkDynamicListData.number}).then((res) => {
if(res.length != 0){
this.forkliftkDynamicListData.rate = res[0].rate;
this.forkliftkDynamicListData.carry = res[0].carry;
this.forkliftkDynamicListData.workTime = res[0].workTime;
this.forkliftkDynamicListData.mil = res[0].mil;
this.forkliftkDynamicListData.startTime = res[0].startTime;
this.forkliftkDynamicListData.endTime = res[0].endTime;
this.forkliftkDynamicListData.loadArea = res[0].loadArea;
this.forkliftkDynamicListData.unloadArea = res[0].unloadArea;
}
this.forkliftkDynamicListData.num2 = this.forkliftkDynamicListData.num2 + 1;
})
},
}, },
beforeDestroy(){ beforeDestroy(){
if(this.DPcomputer14BoxTimer) {
clearInterval(this.DPcomputer14BoxTimer);
this.DPcomputer14BoxTimer = null;
}
} }
} }
</script> </script>
...@@ -29,5 +135,95 @@ export default { ...@@ -29,5 +135,95 @@ export default {
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
.DPcomputer14Box{
width: 20vw;
height: 32vh;
background-color: rgba(32,42,67,0.95);
padding: 5px 7px;
box-sizing: border-box;
overflow: hidden;
}
.DPcomputer14Box .carManScrView_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;
}
.DPcomputer14Box .carManScrView_rightView_content{
width: 100%;
height: 27vh;
}
.DPcomputer14Box .carDynamicTitleStyle{
display: flex;
width: 100%;
height: 3.5vh;
align-items: center;
}
.DPcomputer14Box .carDynamicTitleStyle>div{
margin-left: 10px;
height: 3.5vh;
width: 6vw;
background:no-repeat center center url('~@/assets/images/cutGraph/xingzhuang9kaobei2.png');
background-size:100% 100%;
line-height: 3.5vh;
text-align: center;
color: #06EFFE;
font-weight: 600;
font-size: 17px;
}
.DPcomputer14Box .ForkliftDynamicContent1{
margin-top: 0.3vh;
display: flex;
justify-content: space-between;
width: 100%;
height: 10vh;
font-size: 15px;
}
.DPcomputer14Box .ForkliftDynamicContent1>div{
width: 33%;
text-align: center;
color: white;
}
.DPcomputer14Box .ForkliftDynamicContent1_son1{
margin: 0px auto;
width: 4.3vw;
height: 4.3vw;
line-height: 4.3vw;
font-size: 24px;
background:no-repeat center center url('~@/assets/images/cutGraph/bilikuang.png');
background-size:100% 100%;
}
.DPcomputer14Box .carDynamicContent1{
width: 100%;
height: 7vh;
}
.DPcomputer14Box .carDynamicContent1>div{
color: #06EFFE;
margin-top: 5px;
display: flex;
justify-content: space-around;
align-items: center;
}
.DPcomputer14Box .carDynamicContent2{
width: 100%;
height: 5vh;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0px 10px;
box-sizing: border-box;
color: #03BFFD;
}
.DPcomputer14Box .carDynamicContent2>span{
transform: rotateZ(90deg);
font-size: 30px;
}
</style> </style>
\ No newline at end of file
src/views/MLargeScreen/components/smallComponents/DPcomputer15.vue
View file @ 1867c7be
<template> <template>
<div> <div class="DPcomputer15Box">
<!-- 其他车动态 -->
<div class="carManScrView_rightView_title">其他车动态</div>
<div class="carManScrView_rightView_content">
<div class="carDynamicTitleStyle">
<img src="../../../../assets/images/cutGraph/huoche11.png" height="28">
<div>{{otherCarDynamicListData.number ? otherCarDynamicListData.number : '无'}}</div>
</div>
<div class="otherCarDynamicContent1">
<div>
<div>今日完成量</div>
<div class="otherCarDynamicContent1_son1">{{otherCarDynamicListData.rate ? otherCarDynamicListData.rate : 0}}%</div>
</div>
<div>
<div>今日工时/H</div>
<div class="otherCarDynamicContent1_son1">{{otherCarDynamicListData.workTime ? otherCarDynamicListData.workTime : 0}}</div>
</div>
<div>
<div>今日里程/Km</div>
<div class="otherCarDynamicContent1_son1">{{otherCarDynamicListData.mil ? otherCarDynamicListData.mil : 0}}</div>
</div>
</div>
<div class="carDynamicContent1">
<div>
<img src="../../../../assets/images/cutGraph/mokuaikaobei4.png">
<div>开始工作时间</div>
<div>{{otherCarDynamicListData.startTime ? otherCarDynamicListData.startTime : '无'}}</div>
</div>
<div>
<img src="../../../../assets/images/cutGraph/mokuaikaobei4.png">
<div>结束工作时间</div>
<div>{{otherCarDynamicListData.endTime ? otherCarDynamicListData.endTime : '无'}}</div>
</div>
</div>
<div class="carDynamicContent2">
<img src="../../../../assets/images/cutGraph/tuiyuan1.png">
<div>
<div style="color:white;text-align: center;">{{otherCarDynamicListData.loadArea ? otherCarDynamicListData.loadArea : '无'}}</div>
<img src="../../../../assets/images/cutGraph/zu2603.png">
<div style="color:white;text-align: center;">{{otherCarDynamicListData.unloadArea ? otherCarDynamicListData.unloadArea : '无'}}</div>
</div>
<img src="../../../../assets/images/cutGraph/tuiyuan2.png">
</div>
</div>
</div> </div>
</template> </template>
...@@ -11,15 +53,85 @@ import { Tools, HttpReq, CAMap} from '@/assets/js/common.js'; ...@@ -11,15 +53,85 @@ import { Tools, HttpReq, CAMap} from '@/assets/js/common.js';
export default { export default {
data(){ data(){
return { return {
DPcomputer15BoxTimer:null,
//其他车动态
otherCarDynamicListData:{
data:[],
num2:0,
number:'无',
rate:0,
carry:0,
workTime:0,
mil:0,
startTime:'无',
endTime:'无',
loadArea:'无',
unloadArea:'无',
},
} }
}, },
mounted(){}, mounted(){
this.loadData();
},
methods:{ methods:{
loadData(){
//获取车辆信息
HttpReq.truckDispatching.carInformationQuery({size:9999}).then((res) => {
let arr1 = [];
let arr2 = [];
let arr3 = [];
if(res.code == 200){
res.data.content.forEach((item,index)=>{
if(item.carclass == '卡车'){
arr1.push(item);
}else if(item.carclass == '铲车'){
arr2.push(item);
}else{
arr3.push(item);
}
})
}
this.otherCarDynamicListData.data = arr3;
this.otherCarDynamicListData.num2 = 0;
this.qitachedongtai();
this.DPcomputer15BoxTimer = setInterval(() => {
this.qitachedongtai();
},20000)
})
},
//其他车动态
qitachedongtai(){
let num1 = parseInt(this.otherCarDynamicListData.data.length) - 1;
//获取车辆实时数据
if(this.otherCarDynamicListData.num2 <= num1){
}else{
this.otherCarDynamicListData.num2 = 0;
}
if(this.otherCarDynamicListData.data == 0){
return
}
this.otherCarDynamicListData.number = this.otherCarDynamicListData.data[this.otherCarDynamicListData.num2].number;
HttpReq.truckDispatching.apiManmadesRealQuery1({number:this.otherCarDynamicListData.number}).then((res) => {
if(res.length != 0){
this.otherCarDynamicListData.rate = res[0].rate;
this.otherCarDynamicListData.carry = res[0].carry;
this.otherCarDynamicListData.workTime = res[0].workTime;
this.otherCarDynamicListData.mil = res[0].mil;
this.otherCarDynamicListData.startTime = res[0].startTime;
this.otherCarDynamicListData.endTime = res[0].endTime;
this.otherCarDynamicListData.loadArea = res[0].loadArea;
this.otherCarDynamicListData.unloadArea = res[0].unloadArea;
}
this.otherCarDynamicListData.num2 = this.otherCarDynamicListData.num2 + 1;
})
},
}, },
beforeDestroy(){ beforeDestroy(){
if(this.DPcomputer15BoxTimer) {
clearInterval(this.DPcomputer15BoxTimer);
this.DPcomputer15BoxTimer = null;
}
} }
} }
</script> </script>
...@@ -29,5 +141,95 @@ export default { ...@@ -29,5 +141,95 @@ export default {
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
.DPcomputer15Box{
width: 20vw;
height: 32vh;
background-color: rgba(32,42,67,0.95);
padding: 5px 7px;
box-sizing: border-box;
overflow: hidden;
}
.DPcomputer15Box .carManScrView_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;
}
.DPcomputer15Box .carManScrView_rightView_content{
width: 100%;
height: 27vh;
}
.DPcomputer15Box .carDynamicTitleStyle{
display: flex;
width: 100%;
height: 3.5vh;
align-items: center;
}
.DPcomputer15Box .carDynamicTitleStyle>div{
margin-left: 10px;
height: 3.5vh;
width: 6vw;
background:no-repeat center center url('~@/assets/images/cutGraph/xingzhuang9kaobei2.png');
background-size:100% 100%;
line-height: 3.5vh;
text-align: center;
color: #06EFFE;
font-weight: 600;
font-size: 17px;
}
.DPcomputer15Box .otherCarDynamicContent1{
margin-top: 0.3vh;
display: flex;
justify-content: space-between;
width: 100%;
height: 9vh;
font-size: 15px;
}
.DPcomputer15Box .otherCarDynamicContent1>div{
width: 33%;
text-align: center;
color: white;
}
.DPcomputer15Box .otherCarDynamicContent1_son1{
margin: 0px auto;
width: 4vw;
height: 4vw;
line-height: 4vw;
font-size: 24px;
background:no-repeat center center url('~@/assets/images/cutGraph/bilikuang.png');
background-size:100% 100%;
}
.DPcomputer15Box .carDynamicContent1{
width: 100%;
height: 7vh;
}
.DPcomputer15Box .carDynamicContent1>div{
color: #06EFFE;
margin-top: 5px;
display: flex;
justify-content: space-around;
align-items: center;
}
.DPcomputer15Box .carDynamicContent2{
width: 100%;
height: 5vh;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0px 10px;
box-sizing: border-box;
color: #03BFFD;
}
.DPcomputer15Box .carDynamicContent2>span{
transform: rotateZ(90deg);
font-size: 30px;
}
</style> </style>
\ No newline at end of file
src/views/MLargeScreen/components/smallComponents/DPcomputer17.vue
View file @ 1867c7be
<template> <template>
<div> <div class="DPcomputer17Box">
<!-- 近期通知列表-->
<div class="intelligentSchScrView_leftView_title">近期通知列表</div>
<div class="intelligentSchScrView_leftView_content">
<div class="rolling">
<div class="table-box">
<dl>
<dt>
<div>通知类型</div>
<div>开始时间</div>
<div>录音回放</div>
</dt>
<dd v-for="(item,index) in recentNoticeData" :key="index">
<div>{{item.noticeClass}}</div>
<div>{{item.createTime}}</div>
<div style="cursor: pointer;text-decoration:underline;" @click="item.noticeClass == '智能调度' ? '' : item.noticeClass == '人工调度' ? '' : selectSituation(item)">{{item.noticeClass == '智能调度' ? '无录音' : item.noticeClass == '人工调度' ? '无录音' : '录音播放'}}</div>
</dd>
</dl>
</div>
</div>
</div>
</div> </div>
</template> </template>
...@@ -11,15 +30,158 @@ import { Tools, HttpReq, CAMap} from '@/assets/js/common.js'; ...@@ -11,15 +30,158 @@ import { Tools, HttpReq, CAMap} from '@/assets/js/common.js';
export default { export default {
data(){ data(){
return { return {
DPcomputer17BoxTimer:null,
recentNoticeData:[], //近期通知列表
} }
}, },
mounted(){}, mounted(){
this.loadData();
},
methods:{ methods:{
loadData(){
//近期通知列表
HttpReq.truckDispatching.recentNoticeQuery({size:50,sort:'id,desc'}).then((res) => {
if(res.code == 200){
this.recentNoticeData = res.data.content;
};
})
this.DPcomputer17BoxTimer = setInterval(() => {
//近期通知列表
HttpReq.truckDispatching.recentNoticeQuery({size:50,sort:'id,desc'}).then((res) => {
if(res.code == 200){
this.recentNoticeData = res.data.content;
};
})
},10000)
},
//播放语音
selectSituation(item){
if(!item.videoContent){
this.$notify({
title: '无语音数据！',
type: 'warning',
duration: 2500
});
}else{
//注意base64的最后面中括号和引号是不转译的
let bstr = this.dataURItoBlob(item.videoContent);
const reader1 = new FileReader();
reader1.readAsArrayBuffer(bstr);
reader1.onload = (e) => {
const bufer = e.srcElement.result;
const blob = this.addWavHeader(bufer, 16000, 16, 1);
this.srcUrl = (window.URL||webkitURL).createObjectURL(blob);
};
}
},
//解析base64编码到blob流
dataURItoBlob(base64Data) {
//console.log(base64Data);
var byteString;
if(base64Data.split(',')[0].indexOf('base64') >= 0)
byteString = atob(base64Data.split(',')[1]);//base64 解码
else{
byteString = unescape(base64Data.split(',')[1]);
}
var mimeString = base64Data.split(',')[0].split(':')[1].split(';')[0];//mime类型 -- image/png
// var arrayBuffer = new ArrayBuffer(byteString.length); //创建缓冲数组
// var ia = new Uint8Array(arrayBuffer);//创建视图
var ia = new Uint8Array(byteString.length);//创建视图
for(var i = 0; i < byteString.length; i++) {
ia[i] = byteString.charCodeAt(i);
}
var blob = new Blob([ia], {
type: mimeString
});
return blob;
},
//blob流转base64编码
blobToDataURI(blob) {
let that = this;
var reader = new FileReader();
reader.readAsDataURL(blob);
reader.onload = function(){
that.resultBlob = reader.result;
}
},
addWavHeader(samples, sampleRateTmp, sampleBits, channelCount) {
const dataLength = samples.byteLength;
/* 新的buffer类，预留44bytes的heaer空间 */
const buffer = new ArrayBuffer(44 + dataLength);
/* 转为 Dataview, 利用API来填充字节 */
const view = new DataView(buffer);
let offset = 0;
/* ChunkID, 4 bytes, 资源交换文件标识符 */
this.writeString(view, offset, 'RIFF'); offset += 4;
/* ChunkSize, 4 bytes, 下个地址开始到文件尾总字节数,即文件大小-8 */
view.setUint32(offset, /* 32 */ 36 + dataLength, true); offset += 4;
/* Format, 4 bytes, WAV文件标志 */
this.writeString(view, offset, 'WAVE'); offset += 4;
/* Subchunk1 ID, 4 bytes, 波形格式标志 */
this.writeString(view, offset, 'fmt '); offset += 4;
/* Subchunk1 Size, 4 bytes, 过滤字节,一般为 0x10 = 16 */
view.setUint32(offset, 16, true); offset += 4;
/* Audio Format, 2 bytes, 格式类别 (PCM形式采样数据) */
view.setUint16(offset, 1, true); offset += 2;
/* Num Channels, 2 bytes, 通道数 */
view.setUint16(offset, channelCount, true); offset += 2;
/* SampleRate, 4 bytes, 采样率,每秒样本数,表示每个通道的播放速度 */
view.setUint32(offset, sampleRateTmp, true); offset += 4;
/* ByteRate, 4 bytes, 波形数据传输率 (每秒平均字节数) 通道数×每秒数据位数×每样本数据位/8 */
view.setUint32(offset, sampleRateTmp * channelCount * (sampleBits / 8), true); offset += 4;
/* BlockAlign, 2 bytes, 快数据调整数 采样一次占用字节数 通道数×每样本的数据位数/8 */
view.setUint16(offset, channelCount * (sampleBits / 8), true); offset += 2;
/* BitsPerSample, 2 bytes, 每样本数据位数 */
view.setUint16(offset, sampleBits, true); offset += 2;
/* Subchunk2 ID, 4 bytes, 数据标识符 */
this.writeString(view, offset, 'data'); offset += 4;
/* Subchunk2 Size, 4 bytes, 采样数据总数,即数据总大小-44 */
view.setUint32(offset, dataLength, true); offset += 4;
if (sampleBits === 16) {
this.floatTo16BitPCM(view, samples);
} else if (sampleBits === 8) {
this.floatTo8BitPCM(view, samples);
} else {
this.floatTo32BitPCM(view, samples);
}
return new Blob([view], { type: 'audio/wav' });
},
writeString(view, offset, string) {
for (let i = 0; i < string.length; i += 1) {
view.setUint8(offset + i, string.charCodeAt(i));
}
},
floatTo32BitPCM(output, input) {
const oinput = new Int32Array(input);
let newoffset = 44;
for (let i = 0; i < oinput.length; i += 1, newoffset += 4) {
output.setInt32(newoffset, oinput[i], true);
}
},
floatTo16BitPCM(output, input) {
const oinput = new Int16Array(input);
let newoffset = 44;
for (let i = 0; i < oinput.length; i += 1, newoffset += 2) {
output.setInt16(newoffset, oinput[i], true);
}
},
floatTo8BitPCM(output, input) {
const oinput = new Int8Array(input);
let newoffset = 44;
for (let i = 0; i < oinput.length; i += 1, newoffset += 1) {
output.setInt8(newoffset, oinput[i], true);
}
},
}, },
beforeDestroy(){ beforeDestroy(){
if(this.DPcomputer17BoxTimer) {
clearInterval(this.DPcomputer17BoxTimer);
this.DPcomputer17BoxTimer = null;
}
} }
} }
</script> </script>
...@@ -29,5 +191,63 @@ export default { ...@@ -29,5 +191,63 @@ export default {
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
.DPcomputer17Box{
width: 20vw;
height: 32vh;
background-color: rgba(32,42,67,0.95);
padding: 5px 7px;
box-sizing: border-box;
overflow: hidden;
}
.DPcomputer17Box .intelligentSchScrView_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;
}
.DPcomputer17Box .intelligentSchScrView_leftView_content{
width: 100%;
}
.DPcomputer17Box .rolling{
text-align: center;
height: 26vh;
overflow-y:auto;
scrollbar-width: none;
}
.DPcomputer17Box .rolling::-webkit-scrollbar {
display: none;
}
.DPcomputer17Box dl{
display:table;
width:100%;
}
.DPcomputer17Box dt{
margin-top: 20px;
display:table-row;
background-color: #274088;
}
.DPcomputer17Box dt>div{
display:table-cell;
padding:7px 3px;
font-size: 16px;
font-weight: 500;
color: rgb(24,228,240);
}
.DPcomputer17Box dd{
display:table-row;
}
.DPcomputer17Box dd>div{
display:table-cell;
padding:5px 3px;
font-size: 15px;
color: #A6F6F9;
}
</style> </style>
\ No newline at end of file
src/views/MLargeScreen/components/smallComponents/DPcomputer18.vue
View file @ 1867c7be
<template> <template>
<div> <div class="DPcomputer18Box">
<!-- 智能调度信息 -->
<div class="intelligentSchScrView_rightView_title">智能调度信息</div>
<div class="intelligentSchScrView_rightView_content">
<div class="intelligentSchScrView_rightView_content_1_top">
<div>
<img src="../../../../assets/images/cutGraph/zhengzaijinxing1.png">
<div style="color:#F8D909;text-align: center;">
<div style="font-size:16px;">正在派送中</div>
<div style="font-size:22px;">{{dispatchLoadingNum}}</div>
</div>
</div>
<div>
<img src="../../../../assets/images/cutGraph/wanchengle1.png">
<div style="color:#01EDF7;text-align: center;">
<div style="font-size:16px;">已经完成的</div>
<div style="font-size:22px;">{{dispatchFinishNum}}</div>
</div>
</div>
</div>
<div class="intelligentSchScrView_rightView_content_1_bottom">
<div class="intelligentSchScrView_rightView_content_1_bottom_rolling">
<div class="table-box">
<dl>
<dt>
<div>车牌号</div>
<div>起点</div>
<div>调度时间</div>
<div>状态</div>
<div>目的地</div>
</dt>
<dd v-for="(item,index) in dispatchDetailsList" :key="index">
<div>{{item.carNo}}</div>
<div>{{item.startAdr}}</div>
<div>{{item.createTime}}</div>
<div>{{item.status == 0 ? '接单中' : item.status == 1 ? '已完成' : '未完成'}}</div>
<div>{{item.destination}}</div>
</dd>
</dl>
</div>
</div>
</div>
</div>
</div> </div>
</template> </template>
...@@ -11,15 +52,68 @@ import { Tools, HttpReq, CAMap} from '@/assets/js/common.js'; ...@@ -11,15 +52,68 @@ import { Tools, HttpReq, CAMap} from '@/assets/js/common.js';
export default { export default {
data(){ data(){
return { return {
DPcomputer18BoxTimer:null,
dispatchLoadingNum:0, //智能调度进行中
dispatchFinishNum:0, //智能调度已完成
dispatchDetailsList:[], //智能调度情况表
} }
}, },
mounted(){}, mounted(){
this.loadData();
},
methods:{ methods:{
loadData(){
//智能调度情况
HttpReq.truckDispatching.getLargeScreen1({size:100,sort:'createTime,desc'}).then((res) => {
this.dispatchDetailsList = res;
})
//获取智能调度情况中的进行中数量
HttpReq.truckDispatching.getLargeScreenUnder1({size:9999}).then((res) => {
if(res.length == 0){
this.dispatchLoadingNum = 0;
}else{
this.dispatchLoadingNum = res[0].under;
}
})
//获取智能调度情况中的已完成数量
HttpReq.truckDispatching.getLargeScreenRound1({size:9999}).then((res) => {
if(res.length == 0){
this.dispatchFinishNum = 0;
}else{
this.dispatchFinishNum = res[0].round;
}
})
this.DPcomputer18BoxTimer = setInterval(() => {
//智能调度情况
HttpReq.truckDispatching.getLargeScreen1({size:100,sort:'createTime,desc'}).then((res) => {
this.dispatchDetailsList = res;
})
//获取智能调度情况中的进行中数量
HttpReq.truckDispatching.getLargeScreenUnder1({size:9999}).then((res) => {
if(res.length == 0){
this.dispatchLoadingNum = 0;
}else{
this.dispatchLoadingNum = res[0].under;
}
})
//获取智能调度情况中的已完成数量
HttpReq.truckDispatching.getLargeScreenRound1({size:9999}).then((res) => {
if(res.length == 0){
this.dispatchFinishNum = 0;
}else{
this.dispatchFinishNum = res[0].round;
}
})
}, 10000)
},
}, },
beforeDestroy(){ beforeDestroy(){
if(this.DPcomputer18BoxTimer) {
clearInterval(this.DPcomputer18BoxTimer);
this.DPcomputer18BoxTimer = null;
}
} }
} }
</script> </script>
...@@ -29,5 +123,81 @@ export default { ...@@ -29,5 +123,81 @@ export default {
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
.DPcomputer18Box{
width: 20vw;
height: 32vh;
background-color: rgba(32,42,67,0.95);
padding: 5px 7px;
box-sizing: border-box;
overflow: hidden;
}
.DPcomputer18Box .intelligentSchScrView_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;
}
.DPcomputer18Box .intelligentSchScrView_rightView_content{
width: 100%;
}
.DPcomputer18Box .intelligentSchScrView_rightView_content_1_top{
width: 100%;
display: flex;
justify-content: space-between;
}
.DPcomputer18Box .intelligentSchScrView_rightView_content_1_top>div{
width: 49%;
height: 6vh;
background:no-repeat center center url('~@/assets/images/cutGraph/sijirenshu1.png');
background-size:100% 100%;
display: flex;
align-items: center;
justify-content: space-evenly;
}
.DPcomputer18Box .intelligentSchScrView_rightView_content_1_bottom{
width: 100%;
height: 21.5vh;
}
.DPcomputer18Box .intelligentSchScrView_rightView_content_1_bottom_rolling{
text-align: center;
height: 21.5vh;
overflow-y:auto;
scrollbar-width: none;
}
.DPcomputer18Box .intelligentSchScrView_rightView_content_1_bottom_rolling::-webkit-scrollbar {
display: none;
}
.DPcomputer18Box dl{
display:table;
width:100%;
}
.DPcomputer18Box dt{
margin-top: 20px;
display:table-row;
background-color: #274088;
}
.DPcomputer18Box dt>div{
display:table-cell;
padding:5px 3px;
font-size: 16px;
font-weight: 500;
color: rgb(24,228,240);
}
.DPcomputer18Box dd{
display:table-row;
}
.DPcomputer18Box dd>div{
display:table-cell;
padding:5px 1px;
font-size: 13px;
color: #A6F6F9;
}
</style> </style>
\ No newline at end of file
src/views/MLargeScreen/components/smallComponents/DPcomputer19.vue
View file @ 1867c7be
<template> <template>
<div> <div class="DPcomputer19Box">
<!-- 车辆区域分布-->
</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 {
DPcomputer19BoxTimer:null,
} }
}, },
mounted(){}, mounted(){
this.loadData();
},
methods:{ methods:{
loadData(){
},
}, },
beforeDestroy(){ beforeDestroy(){
if(this.DPcomputer19BoxTimer) {
clearInterval(this.DPcomputer19BoxTimer);
this.DPcomputer19BoxTimer = null;
}
} }
} }
</script> </script>
...@@ -29,5 +39,12 @@ export default { ...@@ -29,5 +39,12 @@ export default {
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
.DPcomputer19Box{
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