<template>
|
<div>
|
<Modal
|
:value="visible"
|
title="AGV状态"
|
draggable
|
sticky
|
:mask="false"
|
@on-visible-change="visibleChange"
|
:footer-hide="true"
|
:width="500"
|
>
|
<div class="order clearfix">
|
<!-- agv信息 -->
|
<div class="width-50">
|
<div class="network">
|
<div class="circle" :class="agvState"></div>
|
{{ info.state }}
|
</div>
|
<div class="wifi">
|
<Icon type="ios-wifi" />
|
111ms
|
</div>
|
<div class="agvs">
|
<div class="agv">
|
<div class="energy">
|
<Progress :percent="info.energyLevel" />
|
</div>
|
<div class="interface">
|
<Icon type="md-locate" :size="50" />
|
<div class="name">{{ info.name }}</div>
|
</div>
|
<!-- <div class="ip">IP:127.0.0.1</div> -->
|
</div>
|
</div>
|
</div>
|
<!-- 订单信息 -->
|
<div class="width-50">
|
<div class="no">订单:{{ order.name || "无" }}</div>
|
<div class="state">{{ order.state }}</div>
|
<div class="btns">
|
<div class="btn" @click="cancelOrder">
|
<Icon type="md-close" :size="30" />
|
<span>取消</span>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="vehicle">
|
<div class="svg">
|
<div class="relative">
|
<MonitorModalAGVSVG></MonitorModalAGVSVG>
|
<div class="origin">
|
<div class="rect active" style="top: 2px; left: 20px">
|
一键移除
|
</div>
|
<div class="rect" style="top: 27px; left: 115px">关闭</div>
|
<div class="rect" style="top: 26px; left: 245px">检验并就绪</div>
|
<div class="rect active" style="top: 27px; left: 350px">
|
一键重置
|
</div>
|
<div class="rect" style="top: 150px; left: 30px">使用数量</div>
|
<div class="rect" style="top: 133px; left: 125px">启动</div>
|
<div class="rect active" style="top: 150px; left: 250px">
|
一键加车
|
</div>
|
<div class="rect" style="top: 150px; left: 350px">加入调度</div>
|
<div class="circle" style="top: 65px; left: -14px">系统外</div>
|
<div class="circle" style="top: 65px; left: 70px">离线</div>
|
<div class="circle" style="top: 65px; left: 181px">在线</div>
|
<div class="circle" style="top: 65px; left: 297px">就绪</div>
|
<div class="circle active" style="top: 65px; left: 410px">
|
调度
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="detail">
|
<div class="btn" @click="showDetailModal">
|
<Icon type="ios-alert-outline" :size="30" />
|
<span>车辆信息</span>
|
</div>
|
<div class="btn" @click="showIntegrationLevelModal">
|
<Icon type="ios-flash" :size="30" />
|
<span>设置环境等级</span>
|
</div>
|
<div class="btn" @click="showPositionModal">
|
<Icon type="logo-buffer" :size="30" />
|
<span>设置点位</span>
|
</div>
|
<div class="btn" @click="showStateModal">
|
<Icon type="md-build" :size="30" />
|
<span>设置状态</span>
|
</div>
|
<div class="btn" @click="showErrorModal" :selectedAGVName="selectedAGVName">
|
<Icon type="md-build" :size="30" />
|
<span>查看异常</span>
|
</div>
|
</div>
|
<div class="fun">
|
<div class="title">故障: {{ info.error_msg }}</div>
|
<div class="btn" @click="clear">
|
<Icon type="ios-trash-outline" :size="30" />
|
<span>清错</span>
|
</div>
|
<div class="btn" @click="enable">
|
<Icon type="ios-refresh" :size="30" />
|
<span>使能</span>
|
</div>
|
<div class="btn" @click="disable">
|
<Icon type="ios-exit-outline" :size="30" />
|
<span>未使能</span>
|
</div>
|
<div class="btn" @click="showOrderIndex">
|
<Icon type="md-sync" :size="30" />
|
<span>获取订单名</span>
|
</div>
|
<div class="btn" @click="clearOrderIndex">
|
<Icon type="ios-document-outline" :size="30" />
|
<span>清空订单名</span>
|
</div>
|
</div>
|
</Modal>
|
<MonitorModalDetail
|
v-model="detailModalVisible"
|
:selectedAGVName="selectedAGVName"
|
></MonitorModalDetail>
|
<MonitorModalIntegrationLevel
|
v-model="integrationLevelModalVisible"
|
@ok="setIntegrationLevel"
|
></MonitorModalIntegrationLevel>
|
<MonitorModalPosition
|
v-model="positionModalVisible"
|
@ok="setPosition"
|
></MonitorModalPosition>
|
<MonitorModalState
|
v-model="stateModalVisible"
|
@ok="setState"
|
></MonitorModalState>
|
<MonitorModalError v-model="errorModalVisible"></MonitorModalError>
|
</div>
|
</template>
|
|
<script>
|
import { webConfig, checkAdmin } from "@/utils";
|
import HttpRequest from "@/api/request.js";
|
import MonitorModalAGVSVG from "./svg";
|
import MonitorModalDetail from "./detail";
|
import MonitorModalIntegrationLevel from "./integration-level";
|
import MonitorModalPosition from "./position";
|
import MonitorModalState from "./state";
|
import MonitorModalError from "./error";
|
export default {
|
name: "MonitorModalAGV",
|
components: {
|
MonitorModalAGVSVG,
|
MonitorModalDetail,
|
MonitorModalIntegrationLevel,
|
MonitorModalPosition,
|
MonitorModalState,
|
MonitorModalError,
|
},
|
model: {
|
prop: "visible",
|
event: "visible-change",
|
},
|
props: {
|
visible: Boolean,
|
selectedAGVName: String,
|
},
|
data() {
|
return {
|
httpRequest: new HttpRequest(webConfig.apiUrl),
|
info: {
|
name: "",
|
properties: {},
|
length: 0,
|
energyLevelGood: 0,
|
energyLevelCritical: 0,
|
energyLevel: 0,
|
integrationLevel: "",
|
procState: "",
|
transportOrder: "",
|
currentPosition: "",
|
state: "",
|
error: "",
|
error_msg: "",
|
},
|
order: {
|
name: "",
|
state: "",
|
},
|
detailModalVisible: false,
|
integrationLevelModalVisible: false,
|
positionModalVisible: false,
|
stateModalVisible: false,
|
errorModalVisible: false,
|
isAdmin: checkAdmin(),
|
};
|
},
|
computed: {
|
agvState() {
|
let state = {
|
error: false,
|
success: false,
|
warning: false,
|
};
|
if (this.info.state == "IDLE" || this.info.state == "EXECUTING")
|
state.success = true;
|
else if (this.info.state == "CHARGING") state.warning = true;
|
else state.error = true;
|
return state;
|
},
|
},
|
methods: {
|
visibleChange(value) {
|
this.$emit("visible-change", value);
|
},
|
cancelOrder() {
|
if (!this.isAdmin) return;
|
if (!this.order.name) {
|
this.$Message.warning("当前无订单");
|
return;
|
}
|
this.httpRequest
|
.post(`transportOrders/withdrawalOrder/${this.order.name}/true`)
|
.then(() => {
|
this.$Message.success("操作成功");
|
})
|
.catch((err) => {
|
this.$Message.error({ content: err, duration: 10 });
|
});
|
},
|
clear() {
|
if (!this.isAdmin) return;
|
this.httpRequest
|
.post(`vehicles/abnormal/${this.info.name}`)
|
.then(() => {
|
this.$Message.success("操作成功");
|
})
|
.catch((err) => {
|
this.$Message.error({ content: err, duration: 10 });
|
});
|
},
|
enable() {
|
if (!this.isAdmin) return;
|
this.httpRequest
|
.post(`vehicles/enable/${this.selectedAGVName}`)
|
.then(() => {
|
this.$Message.success("操作成功");
|
})
|
.catch((err) => {
|
this.$Message.error({ content: err, duration: 10 });
|
});
|
},
|
disable() {
|
if (!this.isAdmin) return;
|
this.httpRequest
|
.post(`vehicles/disable/${this.selectedAGVName}`)
|
.then(() => {
|
this.$Message.success("操作成功");
|
})
|
.catch((err) => {
|
this.$Message.error({ content: err, duration: 10 });
|
});
|
},
|
showOrderIndex() {
|
this.httpRequest
|
.get(`vehicles/getVehicleIndex/${this.selectedAGVName}`)
|
.then((res) => {
|
this.$Modal.info({
|
title: "order index",
|
content: res,
|
});
|
})
|
.catch((err) => {
|
this.$Message.error({ content: err, duration: 10 });
|
});
|
},
|
clearOrderIndex() {
|
if (!this.isAdmin) return;
|
this.httpRequest
|
.post(`vehicles/clearVehicleIndex/${this.selectedAGVName}`)
|
.then(() => {
|
this.$Message.success("操作成功");
|
})
|
.catch((err) => {
|
this.$Message.error({ content: err, duration: 10 });
|
});
|
},
|
showDetailModal() {
|
this.detailModalVisible = true;
|
},
|
showIntegrationLevelModal() {
|
if (!this.isAdmin) return;
|
this.integrationLevelModalVisible = true;
|
},
|
setIntegrationLevel(integrationLevel) {
|
this.httpRequest
|
.post(
|
`vehicles/setVehicleIntegrationLevel/${this.selectedAGVName}/${integrationLevel}`
|
)
|
.then(() => {
|
this.$Message.success("操作成功");
|
})
|
.catch((err) => {
|
this.$Message.error({ content: err, duration: 10 });
|
});
|
},
|
showPositionModal() {
|
if (!this.isAdmin) return;
|
this.positionModalVisible = true;
|
},
|
setPosition(position) {
|
this.httpRequest
|
.post(`vehicles/setVehiclePosition/${this.selectedAGVName}/${position}`)
|
.then(() => {
|
this.$Message.success("操作成功");
|
})
|
.catch((err) => {
|
this.$Message.error({ content: err, duration: 10 });
|
});
|
},
|
showStateModal() {
|
if (!this.isAdmin) return;
|
this.stateModalVisible = true;
|
},
|
setState(state) {
|
this.httpRequest
|
.post(`vehicles/setVehicleState/${this.selectedAGVName}/${state}`)
|
.then(() => {
|
this.$Message.success("操作成功");
|
})
|
.catch((err) => {
|
this.$Message.error({ content: err, duration: 10 });
|
});
|
},
|
showErrorModal() {
|
this.errorModalVisible = true;
|
},
|
reset() {
|
// 车辆信息
|
this.info.name = this.selectedAGVName;
|
this.info.properties = {};
|
this.info.length = 0;
|
this.info.energyLevelGood = 0;
|
this.info.energyLevelCritical = 0;
|
this.info.energyLevel = 0;
|
this.info.integrationLevel = "";
|
this.info.procState = "";
|
this.info.transportOrder = "";
|
this.info.currentPosition = "";
|
this.info.state = "";
|
// 异常信息
|
this.info.error = "";
|
this.info.error_msg = "";
|
// 订单信息
|
this.order.name = "";
|
this.order.state = "";
|
},
|
},
|
watch: {
|
visible(value) {
|
// 监控visible的值，每当模态框显示，不管selectedAGVName的值是否改变都刷新数据
|
if (value && this.selectedAGVName) {
|
this.reset();
|
// 车辆信息
|
this.httpRequest
|
.get(`vehicles/${this.selectedAGVName}`)
|
.then((res) => {
|
this.info.name = res.name;
|
this.info.properties = res.properties;
|
this.info.length = res.length;
|
this.info.energyLevelGood = res.energyLevelGood;
|
this.info.energyLevelCritical = res.energyLevelCritical;
|
this.info.energyLevel = res.energyLevel;
|
this.info.integrationLevel = res.integrationLevel;
|
this.info.procState = res.procState;
|
this.info.transportOrder = res.transportOrder;
|
this.info.currentPosition = res.currentPosition;
|
this.info.state = res.state;
|
|
// 订单信息
|
if (this.info.transportOrder) {
|
this.httpRequest
|
.get(`transportOrders/${this.info.transportOrder}`)
|
.then((res) => {
|
this.order.name = res.name;
|
this.order.state = res.state;
|
})
|
.catch((err) => {
|
this.$Message.error({ content: err, duration: 10 });
|
});
|
}
|
})
|
.catch((err) => {
|
this.$Message.error({ content: err, duration: 10 });
|
});
|
// 异常信息
|
this.httpRequest
|
.get(`vehicles/abnormal/${this.selectedAGVName}`)
|
.then((data, res) => {
|
this.info.error = res.data;
|
this.info.error_msg = res.msg;
|
})
|
.catch((err) => {
|
this.$Message.error({ content: err, duration: 10 });
|
});
|
}
|
},
|
},
|
};
|
</script>
|
|
<style lang="less" scoped>
|
.order {
|
height: 140px;
|
.clearfix:after {
|
content: "";
|
display: table;
|
clear: both;
|
}
|
.width-50 {
|
width: 50%;
|
height: 100%;
|
float: left;
|
&:first-child {
|
padding-right: 16px;
|
border-right: 1px solid #57a3f3;
|
}
|
&:last-child {
|
padding-left: 16px;
|
border-left: 1px solid #57a3f3;
|
}
|
}
|
.network {
|
font-size: 12px;
|
display: inline-block;
|
.circle {
|
width: 9px;
|
height: 9px;
|
border-radius: 100%;
|
display: inline-block;
|
background-color: #000000;
|
&.error {
|
background-color: #ed4014;
|
}
|
&.success {
|
background-color: #19be6b;
|
}
|
&.warning {
|
background-color: #ff9900;
|
}
|
}
|
}
|
.wifi {
|
float: right;
|
color: #19be6b;
|
display: none;
|
}
|
.agvs {
|
.agv {
|
width: 50%;
|
text-align: center;
|
.energy {
|
width: 100px;
|
margin: 0 auto;
|
position: relative;
|
left: 17px;
|
}
|
.ip {
|
color: #2d8cf0;
|
}
|
}
|
}
|
.no,
|
.state {
|
font-size: 13px;
|
}
|
.btns {
|
padding-top: 3px;
|
}
|
}
|
.vehicle {
|
margin: 6px 0;
|
padding: 0 6px;
|
border-top: 2px solid #57a3f3;
|
display: none;
|
.svg {
|
margin: 6px 0;
|
width: 100%;
|
height: 100%;
|
}
|
.relative {
|
position: relative;
|
width: 100%;
|
height: 100%;
|
}
|
.rect {
|
width: 60px;
|
height: 28px;
|
line-height: 28px;
|
border: 1px solid #000;
|
font-size: 12px;
|
text-align: center;
|
background-color: #fff;
|
color: #000;
|
position: absolute;
|
white-space: nowrap;
|
&.active {
|
background-color: #2d8cf0;
|
color: #fff;
|
cursor: pointer;
|
&:hover {
|
background-color: #2b85e4;
|
}
|
}
|
}
|
.circle {
|
width: 60px;
|
height: 60px;
|
line-height: 60px;
|
border: 1px solid #000;
|
border-radius: 100%;
|
font-size: 12px;
|
text-align: center;
|
background-color: #fff;
|
color: #000;
|
position: absolute;
|
&.active {
|
background-color: #2d8cf0;
|
color: #fff;
|
}
|
}
|
.origin {
|
position: absolute;
|
top: 0;
|
left: 0;
|
width: 456px;
|
height: 200px;
|
}
|
}
|
.detail {
|
margin: 6px 0;
|
padding-top: 6px;
|
border-top: 2px solid #57a3f3;
|
}
|
.fun {
|
padding-top: 6px;
|
border-top: 2px solid #57a3f3;
|
.title {
|
font-size: 13px;
|
margin-bottom: 9px;
|
}
|
.divider {
|
margin: 9px 0;
|
border-top: 2px solid #57a3f3;
|
}
|
}
|
.order .btn,
|
.detail .btn,
|
.fun .btn {
|
margin-right: 9px;
|
width: 78px;
|
height: 78px;
|
background-color: #2d8cf0;
|
color: #fff;
|
border: 2px solid #666;
|
border-radius: 100%;
|
cursor: pointer;
|
text-align: center;
|
font-size: 12px;
|
padding-top: 12px;
|
display: inline-block;
|
&:hover {
|
background-color: #2b85e4;
|
}
|
span {
|
display: inline-block;
|
width: 100%;
|
white-space: nowrap;
|
transform: translateY(-4px) scale(0.9);
|
}
|
}
|
</style>
|
