<template>
|
<Modal
|
:value="visible"
|
title="车辆信息"
|
draggable
|
sticky
|
:mask="false"
|
@on-visible-change="visibleChange"
|
:footer-hide="true"
|
:width="600"
|
>
|
<div class="vehicle">
|
<section>
|
<div class="title">详情</div>
|
<div class="line">
|
<div class="width-50">车辆名称:{{detail.name}}</div>
|
<div class="width-50">车辆长度:{{detail.length}}</div>
|
</div>
|
<div class="line">
|
<div class="width-50">电量最大阈值:{{detail.energyLevelGood}}</div>
|
<div class="width-50">电量最小阈值:{{detail.energyLevelCritical}}</div>
|
</div>
|
<div class="line">
|
<div class="width-50">剩余电量:{{detail.energyLevel}}</div>
|
<div class="width-50">车辆集成等级:{{detail.integrationLevel}}</div>
|
</div>
|
<div class="line">
|
<div class="width-50">处理订单状态:{{detail.procState}}</div>
|
<div class="width-50">正在处理的订单:{{detail.transportOrder}}</div>
|
</div>
|
<div class="line">
|
<div class="width-50">车辆现在的位置:{{detail.currentPosition}}</div>
|
<div class="width-50">车辆状态:{{detail.state}}</div>
|
</div>
|
<div class="line">
|
<div class="width-50"></div>
|
</div>
|
</section>
|
</div>
|
</Modal>
|
</template>
|
|
<script>
|
import { webConfig } from "@/utils";
|
import HttpRequest from "@/api/request.js";
|
export default {
|
name: "MonitorModalAGVDetail",
|
model: {
|
prop: "visible",
|
event: "visible-change",
|
},
|
props: {
|
visible: Boolean,
|
selectedAGVName: String,
|
},
|
data() {
|
return {
|
httpRequest: new HttpRequest(webConfig.apiUrl),
|
detail: {
|
name: "",
|
properties: "",
|
length: 0,
|
energyLevelGood: 0,
|
energyLevelCritical: 0,
|
energyLevel: 0,
|
integrationLevel: "",
|
procState: "",
|
transportOrder: "",
|
currentPosition: "",
|
state: "",
|
},
|
};
|
},
|
methods: {
|
visibleChange(value) {
|
this.$emit("visible-change", value);
|
},
|
reset() {
|
this.detail.name = "";
|
this.detail.properties = "";
|
this.detail.length = 0;
|
this.detail.energyLevelGood = 0;
|
this.detail.energyLevelCritical = 0;
|
this.detail.energyLevel = 0;
|
this.detail.integrationLevel = "";
|
this.detail.procState = "";
|
this.detail.transportOrder = "";
|
this.detail.currentPosition = "";
|
this.detail.state = "";
|
},
|
},
|
watch: {
|
selectedAGVName(name) {
|
if (name) {
|
this.reset();
|
this.httpRequest
|
.get(`vehicles/${name}`)
|
.then((res) => {
|
this.detail.name = res.name;
|
this.detail.properties = res.properties;
|
this.detail.length = res.length;
|
this.detail.energyLevelGood = res.energyLevelGood;
|
this.detail.energyLevelCritical = res.energyLevelCritical;
|
this.detail.energyLevel = res.energyLevel;
|
this.detail.integrationLevel = res.integrationLevel;
|
this.detail.procState = res.procState;
|
this.detail.transportOrder = res.transportOrder;
|
this.detail.currentPosition = res.currentPosition;
|
this.detail.state = res.state;
|
})
|
.catch((err) => {
|
this.$Message.error({ content: err, duration: 10 });
|
});
|
}
|
},
|
},
|
};
|
</script>
|
|
<style lang="less" scoped>
|
.vehicle {
|
section {
|
margin-bottom: 9px;
|
.title {
|
padding-left: 9px;
|
border-left: 3px solid #57a3f3;
|
height: 28px;
|
line-height: 28px;
|
font-size: 16px;
|
margin-bottom: 9px;
|
}
|
.line {
|
height: 30px;
|
line-height: 30px;
|
padding: 0 6px;
|
&:after {
|
content: "";
|
display: table;
|
clear: both;
|
}
|
&:nth-child(2n) {
|
background-color: #dbecff;
|
}
|
.width-50 {
|
width: 50%;
|
float: left;
|
}
|
}
|
.btns {
|
&:after {
|
content: "";
|
display: table;
|
clear: both;
|
}
|
.btn {
|
width: 160px;
|
background-color: #7691aa;
|
color: #ffffff;
|
margin-right: 20px;
|
margin-bottom: 9px;
|
line-height: 30px;
|
text-align: center;
|
border-radius: 3px;
|
float: left;
|
cursor: pointer;
|
&:hover {
|
background-color: #51687e;
|
}
|
}
|
}
|
}
|
}
|
</style>
|
