Skip to content

K
kd_control
Commit 30b11f22 authored by zhanglw's avatar zhanglw
Browse files
Options

卡车动态

parent 8ea0f8fb
Hide whitespace changes
Inline Side-by-side
Showing with 1141 additions and 1103 deletions
src/assets/js/common.js
View file @ 30b11f22
......@@ -2387,7 +2387,7 @@ var HttpReq = function(){
//大屏智能调度——车辆区域分布
getLargeScreenfenbu1: function(param){
return request({
url: '/api/Dispatch/areaCar',
url: '/api/dispatchScreen/carLocationDistribution',
method: 'get',
params:param
})
......@@ -2395,7 +2395,7 @@ var HttpReq = function(){
//大屏智能调度——采区车铲比
getLargeScreenchechanbi1: function(param){
return request({
url: '/api/Dispatch/areaCarShovel',
url: '/api/dispatchScreen/cheChanRatio',
method: 'get',
params:param
})
......@@ -3082,6 +3082,32 @@ var HttpReq = function(){
data: data,
})
},
//大屏车辆调度信息
dpCarDispatchInformation: function(param){
return request({
url: '/api/dispatchScreen/todayCarDispatchInformation',
method: 'get',
params:param,
})
},
//大屏卡车动态
dpKcDynamics: function(param){
return request({
url: '/api/carManager/kcDynamics',
method: 'get',
params:param,
})
},
//大屏铲车动态
dpCcDynamics: function(param){
return request({
url: '/api/carManager/ccDynamics',
method: 'get',
params:param,
})
},
},
......
src/components/ezuikit/EZUIKitJs.vue
View file @ 30b11f22
......@@ -847,9 +847,10 @@ export default {
height: 94.5vh;
overflow: hidden;
background-color: white;
position: relative;
position: absolute;
left: 20vw;
top: 0;
z-index: 3;
border-left: 1px solid gainsboro;
}
.video111 .iframeSingle {
width: 60vw;
......
src/components/ezuikit/carsEZUIKitJs.vue
View file @ 30b11f22
......@@ -898,9 +898,11 @@ export default {
height: 94.5vh;
overflow: hidden;
background-color: white;
position: relative;
position: absolute;
left: 20vw;
top: 0;
z-index: 3;
border-left: 1px solid gainsboro;
/*border-left: 1px solid gainsboro;*/
}
.video111 .iframeSingle {
width: 60vw;
......
src/views/MLargeScreen/components/smallComponents/DPcomputer13.vue
View file @ 30b11f22
<template>
<div class="DPcomputer13Box">
<!-- 卡车动态 -->
<div class="carManScrView_rightView_title">卡车动态</div>
<div class="carManScrView_rightView_content">
<div class="carDynamicTitleStyle">
<img src="../../../../assets/images/cutGraph/huoche11.png" height="28">
<div>{{truckDynamicListData.number ? truckDynamicListData.number : '无'}}</div>
</div>
<div class="xuanzekuang1">
<el-select v-model="xuanzekuangValue" placeholder="请选择" style="width:5vw;" @change="xuanzekuang1Fn()" :popper-append-to-body="false">
<el-option v-for="item in truckDynamicListData.data" :key="item.number" :label="item.number" :value="item.number"></el-option>
</el-select>
</div>
<div class="truckDynamicContent1">
<div id="kachedongtaiRateId" class="kachedongtaiRateClass"></div>
<div style="text-align: center;">
<div style="font-size:14px;color:white;">今日运载量</div>
<div style="font-size:20px;color:#05F7FC;">{{truckDynamicListData.carry ? truckDynamicListData.carry : 0}}<span style="font-size:14px;">t</span></div>
<div style="font-size:14px;color:white;">今日工时</div>
<div style="font-size:20px;color:#05F7FC;">{{truckDynamicListData.workTime ? truckDynamicListData.workTime : 0}}<span style="font-size:14px;">h</span></div>
</div>
<div style="text-align: center;">
<div style="font-size:14px;color:white;">今日完成度</div>
<div style="font-size:20px;color:#05F7FC;">{{truckDynamicListData.rate ? truckDynamicListData.rate : 0}}<span style="font-size:14px;">%</span></div>
<div style="font-size:14px;color:white;">今日里程</div>
<div style="font-size:20px;color:#05F7FC;">{{truckDynamicListData.mil ? truckDynamicListData.mil : 0}}<span style="font-size:14px;">km</span></div>
</div>
</div>
<div class="carDynamicContent1">
<div>
<img src="../../../../assets/images/cutGraph/mokuaikaobei4.png">
<div>开始工作时间</div>
<div>{{truckDynamicListData.startTime ? truckDynamicListData.startTime : '无'}}</div>
</div>
<div>
<img src="../../../../assets/images/cutGraph/mokuaikaobei4.png">
<div>结束工作时间</div>
<div>{{truckDynamicListData.endTime ? truckDynamicListData.endTime : '无'}}</div>
</div>
</div>
<div class="carDynamicContent2">
<img src="../../../../assets/images/cutGraph/tuiyuan1.png">
<div>
<div style="color:white;text-align: center;">{{truckDynamicListData.loadArea ? truckDynamicListData.loadArea : '无'}}</div>
<img src="../../../../assets/images/cutGraph/zu2603.png">
<div style="color:white;text-align: center;">{{truckDynamicListData.unloadArea ? truckDynamicListData.unloadArea : '无'}}</div>
</div>
<img src="../../../../assets/images/cutGraph/tuiyuan2.png">
</div>
<div class="DPcomputer13Box">
<!-- 卡车动态 -->
<div class="carManScrView_rightView_title">卡车动态</div>
<div class="carManScrView_rightView_content">
<div class="carDynamicTitleStyle">
<img src="../../../../assets/images/cutGraph/huoche11.png" height="28">
<div>{{ truckDynamicListData.number ? truckDynamicListData.number : '无' }}</div>
</div>
<div class="xuanzekuang1">
<el-select v-model="xuanzekuangValue" placeholder="请选择" style="width:5vw;" @change="xuanzekuang1Fn()"
:popper-append-to-body="false">
<el-option v-for="item in truckDynamicListData.data" :key="item.number" :label="item.number"
:value="item.number"></el-option>
</el-select>
</div>
<div class="truckDynamicContent1">
<div id="kachedongtaiRateId" class="kachedongtaiRateClass"></div>
<div style="text-align: center;">
<div style="font-size:14px;color:white;">今日运载量</div>
<div style="font-size:20px;color:#05F7FC;">
{{ truckDynamicListData.carry ? truckDynamicListData.carry : 0 }}<span style="font-size:14px;">t</span>
</div>
<div style="font-size:14px;color:white;">今日工时</div>
<div style="font-size:20px;color:#05F7FC;">
{{ truckDynamicListData.workTime ? truckDynamicListData.workTime : 0 }}<span
style="font-size:14px;">h</span></div>
</div>
<div style="text-align: center;">
<div style="font-size:14px;color:white;">今日效率</div>
<div style="font-size:20px;color:#05F7FC;">
{{ truckDynamicListData.rate ? truckDynamicListData.rate : 0 }}<span style="font-size:14px;">t/h</span>
</div>
<div style="font-size:14px;color:white;">今日里程</div>
<div style="font-size:20px;color:#05F7FC;">{{ truckDynamicListData.mil ? truckDynamicListData.mil : 0 }}<span
style="font-size:14px;">km</span></div>
</div>
</div>
<div class="carDynamicContent1">
<div>
<img src="../../../../assets/images/cutGraph/mokuaikaobei4.png">
<div>订单开始时间</div>
<div>{{ truckDynamicListData.startTime ? truckDynamicListData.startTime : '无' }}</div>
</div>
<div>
<img src="../../../../assets/images/cutGraph/mokuaikaobei4.png">
<div>预计完成时间</div>
<div>{{ truckDynamicListData.endTime ? truckDynamicListData.endTime : '无' }}</div>
</div>
</div>
<div class="carDynamicContent2">
<img src="../../../../assets/images/cutGraph/tuiyuan1.png">
<div>
<div style="color:white;text-align: center;">
{{ truckDynamicListData.loadArea ? truckDynamicListData.loadArea : '' }}
</div>
<img src="../../../../assets/images/cutGraph/zu2603.png">
<div style="color:white;text-align: center;">
{{ truckDynamicListData.unloadArea ? truckDynamicListData.unloadArea : '' }}
</div>
</div>
<img src="../../../../assets/images/cutGraph/tuiyuan2.png">
</div>
</div>
</div>
</template>
<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 {
data(){
return {
DPcomputer13BoxTimer:null,
xuanzekuangValue:'',
//卡车动态
truckDynamicListData:{
data:[],
num2:0,
number:'无',
rate:0,
carry:0,
workTime:0,
mil:0,
startTime:'无',
endTime:'无',
loadArea:'无',
unloadArea:'无',
},
data() {
return {
DPcomputer13BoxTimer: null,
xuanzekuangValue: '',
//卡车动态
truckDynamicListData: {
data: [],
num2: 0,
number: '无',
rate: 0,
carry: 0,
workTime: 0,
mil: 0,
startTime: '无',
endTime: '无',
loadArea: '',
unloadArea: '',
},
}
},
mounted() {
this.loadData();
},
methods: {
loadData() {
//获取车辆信息
HttpReq.truckDispatching.carInformationQuery({size: 9999}).then((res) => {
let arr1 = [];
if (res.code == 200) {
res.data.content.forEach((item, index) => {
if (item.carclass == '卡车') {
arr1.push(item);
}
})
}
this.truckDynamicListData.data = arr1;
this.truckDynamicListData.num2 = 0;
this.kachedongtai();
this.DPcomputer13BoxTimer = setInterval(() => {
this.kachedongtai();
}, 20000)
})
},
mounted(){
this.loadData();
},
methods:{
loadData(){
//获取车辆信息
HttpReq.truckDispatching.carInformationQuery({size:9999}).then((res) => {
let arr1 = [];
if(res.code == 200){
res.data.content.forEach((item,index)=>{
if(item.carclass == '卡车'){
arr1.push(item);
}
})
}
this.truckDynamicListData.data = arr1;
this.truckDynamicListData.num2 = 0;
this.kachedongtai();
this.DPcomputer13BoxTimer = setInterval(() => {
this.kachedongtai();
},20000)
})
},
//卡车动态
kachedongtai(){
let num1 = parseInt(this.truckDynamicListData.data.length) - 1;
//获取车辆实时数据
if(this.truckDynamicListData.num2 <= num1){
//卡车动态
kachedongtai() {
let num1 = parseInt(this.truckDynamicListData.data.length) - 1;
//获取车辆实时数据
if (this.truckDynamicListData.num2 <= num1) {
}else{
this.truckDynamicListData.num2 = 0;
} else {
this.truckDynamicListData.num2 = 0;
}
if (this.truckDynamicListData.data == 0) {
return
}
this.truckDynamicListData.number = this.truckDynamicListData.data[this.truckDynamicListData.num2].number;
this.initData();
},
initData(){
HttpReq.truckDispatching.dpKcDynamics({carNumber: this.truckDynamicListData.number}).then((res) => {
if (res.data) {
let d=res.data;
this.truckDynamicListData.orderNumber = d.orderNumber;
this.truckDynamicListData.rate = d.todayEfficiency;
this.truckDynamicListData.carry = d.todayWeight;
this.truckDynamicListData.workTime = d.todayWorkingHours;
this.truckDynamicListData.mil = d.todayMil;
this.truckDynamicListData.startTime = d.orderStartTime;
this.truckDynamicListData.endTime = d.orderExpectedCompletionTime;
this.truckDynamicListData.loadArea = d.cPoint;
this.truckDynamicListData.unloadArea = d.xPoint;
} else {
this.truckDynamicListData.rate = 0;
this.truckDynamicListData.carry = 0;
this.truckDynamicListData.workTime = 0;
this.truckDynamicListData.mil = 0;
this.truckDynamicListData.startTime = '无';
this.truckDynamicListData.endTime = '无';
this.truckDynamicListData.loadArea = '';
this.truckDynamicListData.unloadArea = '';
}
this.kachedongtaiEcharts();
})
},
kachedongtaiEcharts() {
var maxValue = 100;//进度条最大值
echarts.init(document.getElementById('kachedongtaiRateId')).dispose();
var pipe = echarts.init(document.getElementById('kachedongtaiRateId'));
var option = {
//环形中间文字
graphic: [
//第一行文字
//内容 + 位置
{
type: 'text',
left: 'center',
top: '30%',
style: {
//value当前进度
text: '订单数',
textAlign: 'center',
fill: 'white',
fontSize: 18
}
},
//第二行文字
//内容 + 位置
{
type: 'text',
left: 'center',
top: '55%',
style: {
//maxValue进度条最大值
text: this.truckDynamicListData.orderNumber||0,
textAlign: 'center',
fill: 'white',
fontSize: 14
}
}
],
series: [{
type: 'pie',
radius: ['100%', '88%'],//['外圆大小', '内圆大小']
center: ['50%', '50%'],//圆心位置['左右'， '上下']
hoverAnimation: false,//取消鼠标悬停动画
animationEasing: 'cubicOut',//设置动画缓动效果
//取消显示饼图自带数据线条
labelLine: {
normal: {
show: false
}
if(this.truckDynamicListData.data == 0){
return
},
//增加阴影效果
itemStyle: {
normal: {
shadowBlur: 200,
shadowColor: 'rgba(44, 196, 196, 0.8)'
}
this.truckDynamicListData.number = this.truckDynamicListData.data[this.truckDynamicListData.num2].number;
HttpReq.truckDispatching.apiManmadesRealQuery1({number:this.truckDynamicListData.number}).then((res) => {
if(res.length != 0){
this.truckDynamicListData.rate = res[0].rate;
this.truckDynamicListData.carry = res[0].carry;
this.truckDynamicListData.workTime = res[0].workTime;
this.truckDynamicListData.mil = res[0].mil;
this.truckDynamicListData.startTime = res[0].startTime;
this.truckDynamicListData.endTime = res[0].endTime;
this.truckDynamicListData.loadArea = res[0].loadArea;
this.truckDynamicListData.unloadArea = res[0].unloadArea;
}else{
this.truckDynamicListData.rate = 0;
this.truckDynamicListData.carry = 0;
this.truckDynamicListData.workTime = 0;
this.truckDynamicListData.mil = 0;
this.truckDynamicListData.startTime = '无';
this.truckDynamicListData.endTime = '无';
this.truckDynamicListData.loadArea = '无';
this.truckDynamicListData.unloadArea = '无';
},
data: [
//value当前进度 + 颜色
{
value: 0,
itemStyle: {
normal: {
color: 'rgb(2,220,251)'
}
this.kachedongtaiEcharts();
this.truckDynamicListData.num2 = this.truckDynamicListData.num2 + 1;
})
},
kachedongtaiEcharts(){
var maxValue = 100;//进度条最大值
echarts.init(document.getElementById('kachedongtaiRateId')).dispose();
var pipe = echarts.init(document.getElementById('kachedongtaiRateId'));
var option = {
//环形中间文字
graphic: [
//第一行文字
//内容 + 位置
{
type: 'text',
left: 'center',
top: '30%',
style: {
//value当前进度
text: this.truckDynamicListData.rate ? this.truckDynamicListData.rate + '%' : 0 + '%',
textAlign: 'center',
fill: 'white',
fontSize: 18
}
},
//第二行文字
//内容 + 位置
{
type: 'text',
left: 'center',
top: '55%',
style: {
//maxValue进度条最大值
text: '完成度',
textAlign: 'center',
fill: 'white',
fontSize: 14
}
}
],
series: [{
type: 'pie',
radius: ['100%', '80%'],//['外圆大小', '内圆大小']
center: ['50%', '50%'],//圆心位置['左右'， '上下']
hoverAnimation: false,//取消鼠标悬停动画
animationEasing: 'cubicOut',//设置动画缓动效果
//取消显示饼图自带数据线条
labelLine: {
normal: {
show: false
}
},
//增加阴影效果
itemStyle: {
normal: {
shadowBlur: 200,
shadowColor: 'rgba(44, 196, 196, 0.8)'
}
},
data: [
//value当前进度 + 颜色
{
value: this.truckDynamicListData.rate ? (parseFloat(this.truckDynamicListData.rate) > 100 ? 100 : this.truckDynamicListData.rate) : 0,
itemStyle: {
normal: {
color: 'rgb(2,220,251)'
}
}
},
//(maxValue进度条最大值 - value当前进度) + 颜色
{
value: maxValue - parseInt(this.truckDynamicListData.rate ? (parseFloat(this.truckDynamicListData.rate) > 100 ? 100 : this.truckDynamicListData.rate) : 0),
itemStyle: {
normal: {
color: 'rgb(0,34,125)'
}
}
}
]
}]
};
pipe.setOption(option);
},
//切换车牌号
xuanzekuang1Fn(){
this.truckDynamicListData.number = this.xuanzekuangValue;
HttpReq.truckDispatching.apiManmadesRealQuery1({number:this.truckDynamicListData.number}).then((res) => {
if(res.length != 0){
this.truckDynamicListData.rate = res[0].rate;
this.truckDynamicListData.carry = res[0].carry;
this.truckDynamicListData.workTime = res[0].workTime;
this.truckDynamicListData.mil = res[0].mil;
this.truckDynamicListData.startTime = res[0].startTime;
this.truckDynamicListData.endTime = res[0].endTime;
this.truckDynamicListData.loadArea = res[0].loadArea;
this.truckDynamicListData.unloadArea = res[0].unloadArea;
}else{
this.truckDynamicListData.rate = 0;
this.truckDynamicListData.carry = 0;
this.truckDynamicListData.workTime = 0;
this.truckDynamicListData.mil = 0;
this.truckDynamicListData.startTime = '无';
this.truckDynamicListData.endTime = '无';
this.truckDynamicListData.loadArea = '无';
this.truckDynamicListData.unloadArea = '无';
}
},
//(maxValue进度条最大值 - value当前进度) + 颜色
{
value: maxValue,
itemStyle: {
normal: {
color: 'rgb(2,220,251)'//'rgb(0,34,125)'
}
this.kachedongtaiEcharts();
})
},
}
}
]
}]
};
pipe.setOption(option);
},
beforeDestroy(){
if(this.DPcomputer13BoxTimer) {
clearInterval(this.DPcomputer13BoxTimer);
this.DPcomputer13BoxTimer = null;
}
//切换车牌号
xuanzekuang1Fn() {
this.truckDynamicListData.number = this.xuanzekuangValue;
this.initData();
},
},
beforeDestroy() {
if (this.DPcomputer13BoxTimer) {
clearInterval(this.DPcomputer13BoxTimer);
this.DPcomputer13BoxTimer = null;
}
}
}
</script>
<style scoped>
/deep/.el-input--small {
/deep/ .el-input--small {
opacity: 0;
}
/deep/.el-select-dropdown__list {
/deep/ .el-select-dropdown__list {
padding: 0;
max-height: 180px;
overflow-y: auto;
}
/deep/.el-select-dropdown__list::-webkit-scrollbar {
/deep/ .el-select-dropdown__list::-webkit-scrollbar {
display: none;
}
.el-select-dropdown__item.hover, .el-select-dropdown__item:hover {
background-color: #021445 !important;
color: #31E5F5;
}
.el-select-dropdown__item.selected{
.el-select-dropdown__item.selected {
background-color: #021445 !important;
color: #31E5F5;
font-weight: 800;
......@@ -284,95 +284,107 @@ export default {
}
</style>
<style scoped>
*{
* {
margin: 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;
.DPcomputer13Box {
width: 20vw;
height: 32vh;
background-color: rgba(32, 42, 67, 0.95);
padding: 5px 7px;
box-sizing: border-box;
overflow: hidden;
}
.DPcomputer13Box .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;
.DPcomputer13Box .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;
}
.DPcomputer13Box .carManScrView_rightView_content{
width: 100%;
height: 27vh;
position: relative;
.DPcomputer13Box .carManScrView_rightView_content {
width: 100%;
height: 27vh;
position: relative;
}
.DPcomputer13Box .carDynamicTitleStyle{
display: flex;
width: 100%;
height: 3.5vh;
align-items: center;
.DPcomputer13Box .carDynamicTitleStyle {
display: flex;
width: 100%;
height: 3.5vh;
align-items: center;
}
.DPcomputer13Box .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;
.DPcomputer13Box .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;
}
.DPcomputer13Box .truckDynamicContent1{
position: relative;
margin-top: 1vh;
display: flex;
align-items: center;
font-weight: 600;
justify-content: space-evenly;
.DPcomputer13Box .truckDynamicContent1 {
position: relative;
margin-top: 1vh;
display: flex;
align-items: center;
font-weight: 600;
justify-content: space-evenly;
}
.DPcomputer13Box .kachedongtaiRateClass{
height: 90px;
width: 90px;
.DPcomputer13Box .kachedongtaiRateClass {
height: 90px;
width: 90px;
}
.DPcomputer13Box .carDynamicContent1{
width: 100%;
height: 7vh;
.DPcomputer13Box .carDynamicContent1 {
width: 100%;
height: 7vh;
}
.DPcomputer13Box .carDynamicContent1>div{
color: #06EFFE;
margin-top: 5px;
display: flex;
justify-content: space-around;
align-items: center;
.DPcomputer13Box .carDynamicContent1 > div {
color: #06EFFE;
margin-top: 5px;
display: flex;
justify-content: space-around;
align-items: center;
}
.DPcomputer13Box .carDynamicContent2{
width: 100%;
height: 5vh;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0px 10px;
box-sizing: border-box;
color: #03BFFD;
.DPcomputer13Box .carDynamicContent2 {
width: 100%;
height: 5vh;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0px 10px;
box-sizing: border-box;
color: #03BFFD;
}
.DPcomputer13Box .carDynamicContent2>span{
transform: rotateZ(90deg);
font-size: 30px;
.DPcomputer13Box .carDynamicContent2 > span {
transform: rotateZ(90deg);
font-size: 30px;
}
.DPcomputer13Box .xuanzekuang1{
position: absolute;
top: 0.1vh;
left: 3vw;
.DPcomputer13Box .xuanzekuang1 {
position: absolute;
top: 0.1vh;
left: 3vw;
}
</style>
src/views/MLargeScreen/components/smallComponents/DPcomputer14.vue
View file @ 30b11f22
<template>
<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="xuanzekuang1">
<el-select v-model="xuanzekuangValue" placeholder="请选择" style="width:5vw;" @change="xuanzekuang1Fn()" :popper-append-to-body="false">
<el-option v-for="item in forkliftkDynamicListData.data" :key="item.number" :label="item.number" :value="item.number"></el-option>
</el-select>
</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>今日效率</div>
<div class="ForkliftDynamicContent1_son1">
{{
forkliftkDynamicListData.workTime != 0 ?
(forkliftkDynamicListData.rate ?
(parseFloat(forkliftkDynamicListData.rate) / parseFloat(forkliftkDynamicListData.workTime)).toFixed(0)
: 0)
: (forkliftkDynamicListData.rate == 0) ? 0 : 100
}}%
</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 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="xuanzekuang1">
<el-select v-model="xuanzekuangValue" placeholder="请选择" style="width:5vw;" @change="xuanzekuang1Fn()"
:popper-append-to-body="false">
<el-option v-for="item in forkliftkDynamicListData.data" :key="item.number" :label="item.number"
:value="item.number"></el-option>
</el-select>
</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>今日效率T/H</div>
<div class="ForkliftDynamicContent1_son1">
{{
forkliftkDynamicListData.workTime != 0 ?
(forkliftkDynamicListData.rate ?
(parseFloat(forkliftkDynamicListData.rate) / parseFloat(forkliftkDynamicListData.workTime)).toFixed(0)
: 0)
: (forkliftkDynamicListData.rate == 0) ? 0 : 100
}}
</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>
</template>
<script>
import { Tools, HttpReq, CAMap} from '@/assets/js/common.js';
import {Tools, HttpReq, CAMap} from '@/assets/js/common.js';
export default {
data(){
return {
DPcomputer14BoxTimer:null,
xuanzekuangValue:'',
//铲车动态
forkliftkDynamicListData:{
data:[],
num2:0,
number:'无',
rate:0,
carry:0,
workTime:0,
mil:0,
startTime:'无',
endTime:'无',
loadArea:'无',
unloadArea:'无',
},
data() {
return {
DPcomputer14BoxTimer: null,
xuanzekuangValue: '',
//铲车动态
forkliftkDynamicListData: {
data: [],
num2: 0,
number: '无',
rate: 0,
carry: 0,
workTime: 0,
mil: 0,
startTime: '无',
endTime: '无',
loadArea: '',
unloadArea: '',
},
}
},
mounted() {
this.loadData();
},
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)
})
},
mounted(){
this.loadData();
},
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){
//铲车动态
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.data.length != 0){
this.forkliftkDynamicListData.rate = res.data[0].carry;
this.forkliftkDynamicListData.carry = res.data[0].carry;
this.forkliftkDynamicListData.workTime = res.data[0].workTime;
this.forkliftkDynamicListData.mil = res.data[0].mil;
this.forkliftkDynamicListData.startTime = res.data[0].startTime;
this.forkliftkDynamicListData.endTime = res.data[0].endTime;
this.forkliftkDynamicListData.loadArea = res.data[0].loadArea;
this.forkliftkDynamicListData.unloadArea = res.data[0].unloadArea;
}else{
this.forkliftkDynamicListData.rate = 0;
this.forkliftkDynamicListData.carry = 0;
this.forkliftkDynamicListData.workTime = 0;
this.forkliftkDynamicListData.mil = 0;
this.forkliftkDynamicListData.startTime = '无';
this.forkliftkDynamicListData.endTime = '无';
this.forkliftkDynamicListData.loadArea = '无';
this.forkliftkDynamicListData.unloadArea = '无';
}
this.forkliftkDynamicListData.num2 = this.forkliftkDynamicListData.num2 + 1;
})
},
//切换车牌号
xuanzekuang1Fn(){
this.forkliftkDynamicListData.number = this.xuanzekuangValue;
HttpReq.truckDispatching.apiManmadesChancheRealQuery1({number:this.forkliftkDynamicListData.number}).then((res) => {
if(res.data.length != 0){
this.forkliftkDynamicListData.rate = res.data[0].carry;
this.forkliftkDynamicListData.carry = res.data[0].carry;
this.forkliftkDynamicListData.workTime = res.data[0].workTime;
this.forkliftkDynamicListData.mil = res.data[0].mil;
this.forkliftkDynamicListData.startTime = res.data[0].startTime;
this.forkliftkDynamicListData.endTime = res.data[0].endTime;
this.forkliftkDynamicListData.loadArea = res.data[0].loadArea;
this.forkliftkDynamicListData.unloadArea = res.data[0].unloadArea;
}else{
this.forkliftkDynamicListData.rate = 0;
this.forkliftkDynamicListData.carry = 0;
this.forkliftkDynamicListData.workTime = 0;
this.forkliftkDynamicListData.mil = 0;
this.forkliftkDynamicListData.startTime = '无';
this.forkliftkDynamicListData.endTime = '无';
this.forkliftkDynamicListData.loadArea = '无';
this.forkliftkDynamicListData.unloadArea = '无';
}
})
},
} else {
this.forkliftkDynamicListData.num2 = 0;
}
if (this.forkliftkDynamicListData.data == 0) {
return
}
this.forkliftkDynamicListData.number = this.forkliftkDynamicListData.data[this.forkliftkDynamicListData.num2].number;
this.initData();
},
initData(){
HttpReq.truckDispatching.dpCcDynamics({carNumber: this.forkliftkDynamicListData.number}).then((res) => {
if (res.data) {
let d=res.data;
this.forkliftkDynamicListData.rate = d.todayEfficiency;
this.forkliftkDynamicListData.carry = d.todayWeight;
this.forkliftkDynamicListData.workTime = d.todayWorkingHours;
this.forkliftkDynamicListData.startTime = d.zcStartTime;
this.forkliftkDynamicListData.endTime = d.zcExpectedCompletionTime;
this.forkliftkDynamicListData.loadArea = d.cPoint;
} else {
this.forkliftkDynamicListData.rate = 0;
this.forkliftkDynamicListData.carry = 0;
this.forkliftkDynamicListData.workTime = 0;
this.forkliftkDynamicListData.mil = 0;
this.forkliftkDynamicListData.startTime = '无';
this.forkliftkDynamicListData.endTime = '无';
this.forkliftkDynamicListData.loadArea = '';
this.forkliftkDynamicListData.unloadArea = '';
}
this.forkliftkDynamicListData.num2 = this.forkliftkDynamicListData.num2 + 1;
})
},
beforeDestroy(){
if(this.DPcomputer14BoxTimer) {
clearInterval(this.DPcomputer14BoxTimer);
this.DPcomputer14BoxTimer = null;
}
//切换车牌号
xuanzekuang1Fn() {
this.forkliftkDynamicListData.number = this.xuanzekuangValue;
this.initData();
},
},
beforeDestroy() {
if (this.DPcomputer14BoxTimer) {
clearInterval(this.DPcomputer14BoxTimer);
this.DPcomputer14BoxTimer = null;
}
}
}
</script>
<style scoped>
/deep/.el-input--small {
/deep/ .el-input--small {
opacity: 0;
}
/deep/.el-select-dropdown__list {
/deep/ .el-select-dropdown__list {
padding: 0;
max-height: 180px;
overflow-y: auto;
}
/deep/.el-select-dropdown__list::-webkit-scrollbar {
/deep/ .el-select-dropdown__list::-webkit-scrollbar {
display: none;
}
.el-select-dropdown__item.hover, .el-select-dropdown__item:hover {
background-color: #021445 !important;
color: #31E5F5;
}
.el-select-dropdown__item.selected{
.el-select-dropdown__item.selected {
background-color: #021445 !important;
color: #31E5F5;
font-weight: 800;
......@@ -209,106 +206,119 @@ export default {
}
</style>
<style scoped>
*{
* {
margin: 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 {
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_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;
position: relative;
.DPcomputer14Box .carManScrView_rightView_content {
width: 100%;
height: 27vh;
position: relative;
}
.DPcomputer14Box .carDynamicTitleStyle{
display: flex;
width: 100%;
height: 3.5vh;
align-items: center;
.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 .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 {
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 > 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: 20px;
background:no-repeat center center url('~@/assets/images/cutGraph/bilikuang1.png');
background-size:100% 100%;
.DPcomputer14Box .ForkliftDynamicContent1_son1 {
margin: 0px auto;
width: 4.3vw;
height: 4.3vw;
line-height: 4.3vw;
font-size: 20px;
background: no-repeat center center url('~@/assets/images/cutGraph/bilikuang1.png');
background-size: 100% 100%;
}
.DPcomputer14Box .carDynamicContent1{
width: 100%;
height: 7vh;
.DPcomputer14Box .carDynamicContent1 {
width: 100%;
height: 7vh;
}
.DPcomputer14Box .carDynamicContent1>div{
color: #06EFFE;
margin-top: 5px;
display: flex;
justify-content: space-around;
align-items: center;
.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 {
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;
.DPcomputer14Box .carDynamicContent2 > span {
transform: rotateZ(90deg);
font-size: 30px;
}
.DPcomputer14Box .xuanzekuang1{
position: absolute;
top: 0.1vh;
left: 3vw;
/*opacity: 0;*/
.DPcomputer14Box .xuanzekuang1 {
position: absolute;
top: 0.1vh;
left: 3vw;
/*opacity: 0;*/
}
</style>
src/views/MLargeScreen/components/smallComponents/DPcomputer15.vue
View file @ 30b11f22
......@@ -41,9 +41,9 @@
<div class="carDynamicContent2">
<img src="../../../../assets/images/cutGraph/tuiyuan1.png">
<div>
<div style="color:white;text-align: center;">{{otherCarDynamicListData.loadArea ? otherCarDynamicListData.loadArea : '无'}}</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 style="color:white;text-align: center;">{{otherCarDynamicListData.unloadArea ? otherCarDynamicListData.unloadArea : ''}}</div>
</div>
<img src="../../../../assets/images/cutGraph/tuiyuan2.png">
</div>
......@@ -71,8 +71,8 @@ export default {
mil:0,
startTime:'无',
endTime:'无',
loadArea:'无',
unloadArea:'无',
loadArea:'',
unloadArea:'',
},
}
},
......@@ -135,8 +135,8 @@ export default {
this.otherCarDynamicListData.mil = 0;
this.otherCarDynamicListData.startTime = '无';
this.otherCarDynamicListData.endTime = '无';
this.otherCarDynamicListData.loadArea = '无';
this.otherCarDynamicListData.unloadArea = '无';
this.otherCarDynamicListData.loadArea = '';
this.otherCarDynamicListData.unloadArea = '';
}
this.otherCarDynamicListData.num2 = this.otherCarDynamicListData.num2 + 1;
})
......@@ -161,8 +161,8 @@ export default {
this.otherCarDynamicListData.mil = 0;
this.otherCarDynamicListData.startTime = '无';
this.otherCarDynamicListData.endTime = '无';
this.otherCarDynamicListData.loadArea = '无';
this.otherCarDynamicListData.unloadArea = '无';
this.otherCarDynamicListData.loadArea = '';
this.otherCarDynamicListData.unloadArea = '';
}
})
},
......
src/views/MLargeScreen/components/smallComponents/DPcomputer18.vue
View file @ 30b11f22
<template>
<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 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;">{{ numberOfDispatching }}</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;">{{ numberOfDispatched }}</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 dispatchingDetails" :key="index">
<div>{{ item.carNumber }}</div>
<div>{{ item.startArea }}</div>
<div>{{ item.status}}</div>
<div>{{ item.endArea }}</div>
<div>{{ formatTime(item.dispatchingTime) }}</div>
</dd>
</dl>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import { Tools, HttpReq, CAMap} from '@/assets/js/common.js';
import {Tools, HttpReq, CAMap} from '@/assets/js/common.js';
export default {
data(){
return {
DPcomputer18BoxTimer:null,
dispatchLoadingNum:0, //智能调度进行中
dispatchFinishNum:0, //智能调度已完成
dispatchDetailsList:[], //智能调度情况表
data() {
return {
DPcomputer18BoxTimer: null,
numberOfDispatching: 0, //智能调度进行中
numberOfDispatched: 0, //智能调度已完成
dispatchingDetails: [], //智能调度情况表
}
},
mounted() {
this.loadData();
this.DPcomputer18BoxTimer = setInterval(() => {
this.loadData();
}, 10000)
},
methods: {
loadData() {
HttpReq.truckDispatching.dpCarDispatchInformation().then((res) => {
if(res.data){
this.numberOfDispatching=res.data.numberOfDispatching;
this.numberOfDispatched=res.data.numberOfDispatched;
this.dispatchingDetails=res.data.dispatchingDetails;
}
})
},
mounted(){
this.loadData();
},
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(){
if(this.DPcomputer18BoxTimer) {
clearInterval(this.DPcomputer18BoxTimer);
this.DPcomputer18BoxTimer = null;
}
formatTime(t) {
let d = new Date(t);
return `${('0' + (d.getHours() + 1)).substr(-2)}:${('0' + (d.getMonth() + 1)).substr(-2)}:${('0' + (d.getSeconds())).substr(-2)}`;
}
},
beforeDestroy() {
if (this.DPcomputer18BoxTimer) {
clearInterval(this.DPcomputer18BoxTimer);
this.DPcomputer18BoxTimer = null;
}
}
}
</script>
<style scoped>
*{
* {
margin: 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 {
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_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 {
width: 100%;
}
.DPcomputer18Box .intelligentSchScrView_rightView_content_1_top{
width: 100%;
display: flex;
justify-content: space-between;
.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_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 {
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 {
text-align: center;
height: 21.5vh;
overflow-y: auto;
scrollbar-width: none;
}
.DPcomputer18Box .intelligentSchScrView_rightView_content_1_bottom_rolling::-webkit-scrollbar {
display: none;
display: none;
}
.DPcomputer18Box dl{
display:table;
width:100%;
.DPcomputer18Box dl {
display: table;
width: 100%;
}
.DPcomputer18Box dt{
margin-top: 20px;
display:table-row;
background-color: #274088;
.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 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 {
display: table-row;
}
.DPcomputer18Box dd>div{
display:table-cell;
vertical-align: middle;
padding:5px 1px;
font-size: 13px;
color: #A6F6F9;
.DPcomputer18Box dd > div {
display: table-cell;
vertical-align: middle;
padding: 5px 1px;
font-size: 13px;
color: #A6F6F9;
}
</style>
src/views/MLargeScreen/components/smallComponents/DPcomputer19.vue
View file @ 30b11f22
<template>
<div class="DPcomputer19Box">
<!-- 车辆区域分布-->
<div class="intelligentSchScrView_rightView_title">车辆区域分布</div>
<div class="intelligentSchScrView_rightView_content">
<div id="carsAreaDistributionView"></div>
</div>
<div class="DPcomputer19Box">
<!-- 车辆区域分布-->
<div class="intelligentSchScrView_rightView_title">车辆区域分布</div>
<div class="intelligentSchScrView_rightView_content">
<div id="carsAreaDistributionView"></div>
</div>
</div>
</template>
<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 {
data(){
return {
DPcomputer19BoxTimer:null,
//车辆区域分布Echarts
carsAreaDistributionData:{
name:[],
kache:[],
chanche:[],
qitache:[],
},
data() {
return {
DPcomputer19BoxTimer: null,
//车辆区域分布Echarts
carsAreaDistributionData: {
name: [],
kache: [],
chanche: [],
qitache: [],
},
}
},
mounted() {
this.loadData();
this.DPcomputer19BoxTimer = setInterval(() => {
this.loadData();
}, 60000)
},
methods: {
loadData() {
//车辆区域分布Echarts
HttpReq.truckDispatching.getLargeScreenfenbu1().then((res) => {
if (res.code == 200) {
let name = [];
let kache = [];
let chanche = [];
let qitache = [];
res.data.forEach((item, index) => {
name.push(item.area);
kache.push(item.kcNumber);
chanche.push(item.ccNumber);
qitache.push(item.otherNumber);
})
this.carsAreaDistributionData.name = name;
this.carsAreaDistributionData.kache = kache;
this.carsAreaDistributionData.chanche = chanche;
this.carsAreaDistributionData.qitache = qitache;
this.carsAreaDistributionEcharts();
}
},
mounted(){
this.loadData();
},
methods:{
loadData(){
//车辆区域分布Echarts
HttpReq.truckDispatching.getLargeScreenfenbu1({size:9999}).then((res) => {
if(res.code == 200){
let name = [];
let kache = [];
let chanche = [];
let qitache = [];
res.data.forEach((item,index)=>{
name.push(item.name);
kache.push(item.truck);
chanche.push(item.shovel);
qitache.push(item.other);
})
this.carsAreaDistributionData.name = name;
this.carsAreaDistributionData.kache = kache;
this.carsAreaDistributionData.chanche = chanche;
this.carsAreaDistributionData.qitache = qitache;
this.carsAreaDistributionEcharts();
}
})
this.DPcomputer19BoxTimer = setInterval(() => {
//车辆区域分布Echarts
HttpReq.truckDispatching.getLargeScreenfenbu1({size:9999}).then((res) => {
if(res.code == 200){
let name = [];
let kache = [];
let chanche = [];
let qitache = [];
res.data.forEach((item,index)=>{
name.push(item.name);
kache.push(item.truck);
chanche.push(item.shovel);
qitache.push(item.other);
})
this.carsAreaDistributionData.name = name;
this.carsAreaDistributionData.kache = kache;
this.carsAreaDistributionData.chanche = chanche;
this.carsAreaDistributionData.qitache = qitache;
this.carsAreaDistributionEcharts();
}
})
},10000)
})
},
//车辆区域分布Echarts
carsAreaDistributionEcharts() {
let xZoom=Math.ceil(4/this.carsAreaDistributionData.name.length*100);
if(xZoom>100){
xZoom=100
}
echarts.init(document.getElementById('carsAreaDistributionView')).dispose();
var myChart = echarts.init(document.getElementById('carsAreaDistributionView'));
var option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legend: {
textStyle: {
color: 'white',
fontSize: 16,
}
},
grid: {
top: '13%',
left: '1%',
right: '1%',
bottom: '3%',
containLabel: true
},
//车辆区域分布Echarts
carsAreaDistributionEcharts(){
echarts.init(document.getElementById('carsAreaDistributionView')).dispose();
var myChart = echarts.init(document.getElementById('carsAreaDistributionView'));
var option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legend: {
textStyle:{
color: 'white',
fontSize:16,
}
},
grid: {
top: '13%',
left: '1%',
right: '1%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'category',
data: this.carsAreaDistributionData.name,
axisLabel: {
show: true,
textStyle: {
color: '#A6F6F9',
fontSize:14,
}
},
axisLine: {
lineStyle: {
color: '#A6F6F9',
width: 1
}
},
},
yAxis: {
type: 'value',
minInterval: 1,
axisLabel: {
show: true,
textStyle: {
color: '#A6F6F9',
fontSize:14,
}
},
axisLine: {
lineStyle: {
color: '#A6F6F9',
width: 0
}
},
},
series: [
{
name: '卡车',
type: 'bar',
stack: 'total',
label: {
show: true
},
data: this.carsAreaDistributionData.kache,
barWidth: 30,
itemStyle: {
color: '#2BBFA8'
},
},
{
name: '铲车',
type: 'bar',
stack: 'total',
label: {
show: true
},
data: this.carsAreaDistributionData.chanche,
barWidth: 35,
itemStyle: {
color: '#DB972D'
},
},
{
name: '其他车辆',
type: 'bar',
stack: 'total',
label: {
show: true
},
data: this.carsAreaDistributionData.qitache,
barWidth: 35,
itemStyle: {
color: '#158DFD'
},
}
]
};
option && myChart.setOption(option);
dataZoom: [
{
type: 'inside',
start: 0,
end: xZoom
},
{
start: 0,
end: xZoom,
show: false,
}
],
xAxis: {
type: 'category',
data: this.carsAreaDistributionData.name,
axisLabel: {
interval: 0,
show: true,
textStyle: {
color: '#A6F6F9',
fontSize: 12,
}
},
axisLine: {
lineStyle: {
color: '#A6F6F9',
width: 1
}
},
},
yAxis: {
type: 'value',
minInterval: 1,
axisLabel: {
show: true,
textStyle: {
color: '#A6F6F9',
fontSize: 14,
}
},
axisLine: {
lineStyle: {
color: '#A6F6F9',
width: 0
}
},
},
series: [
{
name: '卡车',
type: 'bar',
data: this.carsAreaDistributionData.kache,
itemStyle: {
color: '#2BBFA8'
},
},
{
name: '铲车',
type: 'bar',
data: this.carsAreaDistributionData.chanche,
itemStyle: {
color: '#DB972D'
},
},
{
name: '其他车辆',
type: 'bar',
data: this.carsAreaDistributionData.qitache,
itemStyle: {
color: '#158DFD'
},
}
]
};
option && myChart.setOption(option);
},
beforeDestroy(){
if(this.DPcomputer19BoxTimer) {
clearInterval(this.DPcomputer19BoxTimer);
this.DPcomputer19BoxTimer = null;
}
},
beforeDestroy() {
if (this.DPcomputer19BoxTimer) {
clearInterval(this.DPcomputer19BoxTimer);
this.DPcomputer19BoxTimer = null;
}
}
}
</script>
<style scoped>
*{
* {
margin: 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;
.DPcomputer19Box {
width: 20vw;
height: 32vh;
background-color: rgba(32, 42, 67, 0.95);
padding: 5px 7px;
box-sizing: border-box;
overflow: hidden;
}
.DPcomputer19Box .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;
.DPcomputer19Box .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;
}
.DPcomputer19Box .intelligentSchScrView_rightView_content{
width: 100%;
.DPcomputer19Box .intelligentSchScrView_rightView_content {
width: 100%;
}
.DPcomputer19Box #carsAreaDistributionView{
width: 19vw;
height: 27.5vh;
.DPcomputer19Box #carsAreaDistributionView {
width: 19vw;
height: 27.5vh;
}
</style>
\ No newline at end of file
</style>
src/views/MLargeScreen/components/smallComponents/DPcomputer20.vue
View file @ 30b11f22
<template>
<div class="DPcomputer20Box">
<!-- 各装点车铲比 -->
<div class="intelligentSchScrView_rightView_title">各装点车铲比</div>
<div class="intelligentSchScrView_rightView_content">
<div id="carsProportionView"></div>
</div>
<div class="DPcomputer20Box">
<!-- 各装点车铲比 -->
<div class="intelligentSchScrView_rightView_title">各装点车铲比</div>
<div class="intelligentSchScrView_rightView_content">
<div id="carsProportionView"></div>
</div>
</div>
</template>
<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 {
data(){
return {
DPcomputer20BoxTimer:null,
//各装点车铲比Echarts
carsProportionData:[],
data() {
return {
DPcomputer20BoxTimer: null,
//各装点车铲比Echarts
carsAreaDistributionData: {
name: [],
values: [],
},
}
},
mounted() {
this.loadData();
this.DPcomputer19BoxTimer = setInterval(() => {
this.loadData();
}, 10000)
},
methods: {
loadData() {
//各装点车铲比Echarts
HttpReq.truckDispatching.getLargeScreenchechanbi1().then((res) => {
if (res.code == 200) {
let name = [];
let values = [];
res.data.forEach((item, index) => {
name.push(item.area);
values.push(item.ratio);
})
this.carsAreaDistributionData.name = name;
this.carsAreaDistributionData.values = values;
this.carsProportionEcharts();
}
})
},
mounted(){
this.loadData();
},
methods:{
loadData(){
//各装点车铲比Echarts
HttpReq.truckDispatching.getLargeScreenchechanbi1({size:9999}).then((res) => {
if(res.code == 200){
this.carsProportionData = res.data;
this.carsProportionEcharts();
}
})
this.DPcomputer20BoxTimer = setInterval(() => {
//各装点车铲比Echarts
HttpReq.truckDispatching.getLargeScreenchechanbi1({size:9999}).then((res) => {
if(res.code == 200){
this.carsProportionData = res.data;
this.carsProportionEcharts();
}
})
},10000)
//各装点车铲比Echarts
carsProportionEcharts() {
echarts.init(document.getElementById('carsProportionView')).dispose();
var myChart = echarts.init(document.getElementById('carsProportionView'));
let xZoom=Math.ceil(4/this.carsAreaDistributionData.name.length*100);
if(xZoom>100){
xZoom=100
}
var option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
//各装点车铲比Echarts
carsProportionEcharts(){
echarts.init(document.getElementById('carsProportionView')).dispose();
var myChart = echarts.init(document.getElementById('carsProportionView'));
var option;
const data = [this.carsProportionData];
option = {
grid: {
top:'13%',
left: '2%',
right: '13%',
bottom: '5%',
containLabel: true
},
xAxis: {
name: '铲车',
nameTextStyle: { fontSize: 14 },
splitLine: {
show: false,
lineStyle: {
type: 'dashed'
}
},
axisLabel: {
show: true,
textStyle: {
color: '#A6F6F9',
fontSize:14,
},
},
axisLine: {
lineStyle: {
color: '#A6F6F9',
width: 1
}
},
},
yAxis: {
name: '卡车',
nameTextStyle: { fontSize: 14 },
splitLine: {
lineStyle: {
type: 'dashed'
}
},
scale: true,
axisLabel: {
show: true,
textStyle: {
color: '#A6F6F9',
fontSize:14,
}
},
axisLine: {
lineStyle: {
color: '#A6F6F9',
width: 0
}
},
},
series: [
{
data: data[0],
type: 'scatter',
symbolSize: 15,
emphasis: {
focus: 'series',
label: {
show: true,
formatter: function (param) {
return param.data[2];
},
position: 'top',
fontSize:16,
}
},
itemStyle: {
color: '#4BF3F9',
}
}
]
};
option && myChart.setOption(option);
// legend: {
// textStyle: {
// color: 'white',
// fontSize: 16,
// }
// },
grid: {
top: '10%',
left: '1%',
right: '1%',
bottom: '5%',
containLabel: true
},
dataZoom: [
{
type: 'inside',
start: 0,
end: xZoom
},
{
start: 0,
end: xZoom,
show: false,
}
],
xAxis: {
type: 'category',
data: this.carsAreaDistributionData.name,
axisLabel: {
interval: 0,
show: true,
textStyle: {
color: '#A6F6F9',
fontSize: 12,
}
},
axisLine: {
lineStyle: {
color: '#A6F6F9',
width: 1
}
},
},
yAxis: {
type: 'value',
minInterval: 1,
axisLabel: {
show: true,
textStyle: {
color: '#A6F6F9',
fontSize: 14,
}
},
axisLine: {
lineStyle: {
color: '#A6F6F9',
width: 0
}
},
},
series: [
{
name: '车铲比',
type: 'bar',
data: this.carsAreaDistributionData.values,
barWidth: 35,
itemStyle: {
color: '#00FFFF'
},
},
]
};
option && myChart.setOption(option);
},
beforeDestroy(){
if(this.DPcomputer20BoxTimer) {
clearInterval(this.DPcomputer20BoxTimer);
this.DPcomputer20BoxTimer = null;
}
},
beforeDestroy() {
if (this.DPcomputer20BoxTimer) {
clearInterval(this.DPcomputer20BoxTimer);
this.DPcomputer20BoxTimer = null;
}
}
}
</script>
<style scoped>
*{
* {
margin: 0;
padding: 0;
}
.DPcomputer20Box{
width: 20vw;
height: 32vh;
background-color: rgba(32,42,67,0.95);
padding: 5px 7px;
box-sizing: border-box;
overflow: hidden;
.DPcomputer20Box {
width: 20vw;
height: 32vh;
background-color: rgba(32, 42, 67, 0.95);
padding: 5px 7px;
box-sizing: border-box;
overflow: hidden;
}
.DPcomputer20Box .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;
.DPcomputer20Box .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;
}
.DPcomputer20Box .intelligentSchScrView_rightView_content{
width: 100%;
.DPcomputer20Box .intelligentSchScrView_rightView_content {
width: 100%;
}
.DPcomputer20Box #carsProportionView{
width: 19vw;
height: 27.5vh;
.DPcomputer20Box #carsProportionView {
width: 19vw;
height: 27.5vh;
}
</style>
\ No newline at end of file
</style>
src/views/MLargeScreen/index.vue
View file @ 30b11f22
......@@ -70,7 +70,7 @@
<!-- </div>-->
<!-- 嵌入三维地图页面 -->
<!-- <iframe :src="url" frameborder="0" class="mapcontainer1"></iframe>-->
<iframe ref="iframe" src="http://39.164.225.220:5001//#/Index" frameborder="0" class="mapcontainer1"></iframe>
<!-- <iframe ref="iframe" src="http://39.164.225.220:5001//#/Index" frameborder="0" class="mapcontainer1"></iframe>-->
<!-- <iframe ref="iframe" src="http://192.168.3.38:3002/#/Index" frameborder="0" class="mapcontainer1"></iframe>-->
<!-- 单个车辆视频监控 -->
......
src/views/productionPlanManagement/productionPlan/index.vue
View file @ 30b11f22
......@@ -225,8 +225,13 @@ export default {
showPlanDateSlot() {
this.showDateSlot = !this.showDateSlot;
document.getElementById("planSlotBtn").blur();
this.planSDate = this.showYear + '-' + this.showMonth + '-01';
this.planEDate = this.showYear + '-' + this.showMonth + '-'+this.monthDays(this.showYear, this.showMonth);
let d=new Date();
if(d.getMonth()+1===Number(this.showMonth)){
this.planSDate = this.showYear + '-' + this.showMonth + '-' + ('0' + d.getDate()).substr(-2);
}else{
this.planSDate = this.showYear + '-' + this.showMonth + '-01';
}
this.planEDate = this.showYear + '-' + this.showMonth + '-'+this.monthDays(Number(this.showYear), Number(this.showMonth)-1);
this.planData = [];
HttpReq.truckDispatching.tPlanGetOneDayPlanByTime({}).then((res) => {
if (res.code == 200) {
......
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