mes-lqqt-ui/src/views/deviceConsole/robotic/index.vue
2024-05-21 10:48:49 +08:00

556 lines
15 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<div class="app-container">
<el-row :gutter="20">
<el-col :span="4"
><div class="grid-content bg-purple">
<div
class="grid-content three"
style="height: 750px; border-radius: 10px"
>
<!-- 选择设备 -->
<el-container style="padding: 0">
<el-header
class="smallHeader"
style="height: 40px; line-height: 40px"
>选择设备
</el-header>
<el-main class="smallmain tableBox">
<p v-if="intelligent.length == 0" class="nodata">暂无数据</p>
<div class="tagBox" v-else>
<el-button
style="width: 100%"
v-for="item in intelligent"
:key="item"
@click="handleClose(item)"
>{{ item.machineryName }}</el-button
>
</div>
</el-main>
</el-container>
</div>
</div></el-col
>
<el-col :span="14"
><div class="grid-content bg-purple">
<div>
<el-image :src="img"></el-image>
</div>
<div
style="
border: 1px solid rgb(217 216 216);
height: 60px;
width: 30%;
border-radius: 30px;
margin-left: 32%;
"
>
<p
v-if="Powersupply"
style="
font-size: 20px;
color: rgb(158, 158, 158);
margin: 19px;
text-align: center;
"
>
Power down
</p>
<p
v-else
style="
font-size: 20px;
color: rgb(158, 158, 158);
margin: 19px;
text-align: center;
"
>
Power on
</p>
</div>
<div
style="
border: 1px solid rgb(217, 216, 216);
height: 100px;
width: 30%;
border-radius: 50px;
margin-left: 32%;
margin-top: 2%;
background: rgba(204, 204, 221, 0.2);
"
>
<p
style="
font-size: 14px;
color: rgb(158, 158, 158);
margin: 0px;
text-align: center;
"
>
Control
</p>
<div style="margin-top: 2%">
<el-row type="flex" class="row-bg" justify="center">
<el-col :span="4"
><div class="grid-content bg-purple">
<div v-if="elimage">
<el-button @click="upbutton"
><el-image
:src="sd"
style="width: 20px; height: 20px"
></el-image
></el-button>
<p
style="
margin: auto;
margin-left: 25%;
font-size: 14px;
color: #9e9e9e;
"
>
上电
</p>
</div>
<div v-else>
<el-button @click="downbutton">
<el-image
:src="xd"
style="width: 20px; height: 20px"
></el-image>
</el-button>
<p
style="
margin: auto;
margin-left: 25%;
font-size: 14px;
color: #9e9e9e;
"
>
下电
</p>
</div>
</div></el-col
>
<el-col :span="6"
><div class="grid-content bg-purple-light"></div
></el-col>
<el-col :span="5"
><div class="grid-content bg-purple">
<div>
<el-button>
<el-image
:src="fw"
style="width: 20px; height: 20px"
></el-image>
</el-button>
<p
style="
margin: auto;
margin-left: 25%;
font-size: 14px;
color: #9e9e9e;
"
>
复位
</p>
</div>
</div>
</el-col>
</el-row>
</div>
</div>
</div></el-col
>
<el-col :span="5"
><div class="grid-content bg-purple">
<div
class="grid-content three"
style="width: 330px; height: 335px; border-radius: 10px"
>
<el-header
class="smallHeader"
style="height: 40px; line-height: 40px"
>Robot Operation Panel
</el-header>
<div style="margin: 6px">
<el-radio-group
v-model="radio4"
size="mini"
style="display: flex"
>
<el-radio-button :label="1">j1轴</el-radio-button>
<el-radio-button :label="2">j2轴</el-radio-button>
<el-radio-button :label="3">j3轴</el-radio-button>
<el-radio-button :label="4">j4轴</el-radio-button>
<el-radio-button :label="5">j5轴</el-radio-button>
<el-radio-button :label="6">j6轴</el-radio-button>
</el-radio-group>
</div>
<div
style="
width: 90%;
height: 120px;
margin: auto;
border-radius: 10px;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
"
>
<el-header
class="smallHeader"
style="height: 30px; line-height: 30px"
>Coordinate
</el-header>
<div style="margin: 20px 10px">
<el-row type="flex" class="row-bg" justify="space-around">
<el-col :span="6"
><div
class="grid-content bg-purple"
style="text-align: center"
>
X:{{ 123 }}
</div></el-col
>
<el-col :span="6"
><div
class="grid-content bg-purple-light"
style="text-align: center"
>
Y:{{ 123 }}
</div></el-col
>
<el-col :span="6"
><div
class="grid-content bg-purple"
style="text-align: center"
>
Z:{{ 123 }}
</div></el-col
>
</el-row>
</div>
<div style="margin: 20px 10px">
<el-row type="flex" class="row-bg" justify="space-around">
<el-col :span="6"
><div
class="grid-content bg-purple"
style="text-align: center"
>
A:{{ 123 }}
</div></el-col
>
<el-col :span="6"
><div
class="grid-content bg-purple-light"
style="text-align: center"
>
B:{{ 123 }}
</div></el-col
>
<el-col :span="6"
><div
class="grid-content bg-purple"
style="text-align: center"
>
C:{{ 123 }}
</div></el-col
>
</el-row>
</div>
</div>
<div
style="
width: 90%;
height: 88px;
margin: auto;
margin-top: 20px;
border-radius: 10px;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
"
>
<el-header
class="smallHeader"
style="height: 30px; line-height: 30px"
>
Standard
</el-header>
<div style="margin: 20px 20px">Speed limit:{{ 1 }}</div>
</div>
</div>
</div></el-col
>
</el-row>
</div>
</template>
<script>
import { listMachinery } from "@/api/mes/dv/machinery";
import { listMachinerytype } from "@/api/mes/dv/machinerytype";
import axios from "axios";
export default {
data() {
return {
intelligent: [],
intelligentData: {},
// 遮罩层
loading: true,
id: "",
imgdata: true,
timer: null,
machineryTypeOptions: [],
machinerydata: {
pageNum: 1,
pageSize: 10,
machineryTypeId: "",
},
elimage: true,
Powersupply: true,
radio4: "1",
img: require("../../../assets/images/robotic.png"),
sd: require("../../../assets/images/shangdian.png"),
xd: require("../../../assets/images/weishangdian.png"),
fw: require("../../../assets/images/fuwei-02.png"),
};
},
created() {
this.getList();
},
mounted() {
// 定时刷新
this.timer = setInterval(() => {
if (this.id != "") {
this.setInterval();
}
}, 1500);
// 通过$once来监听定时器在beforeDestroy钩子可以被清除。
this.$once("hook:beforeDestroy", () => {
clearInterval(this.timer);
});
},
methods: {
/** 查询列表 */
getList() {
this.loading = true;
listMachinerytype().then((response) => {
var data = "";
response.data.forEach((item) => {
if (item.machineryTypeCode == "M_TYPE_002") {
data = item.machineryTypeId;
}
});
this.machinerydata.machineryTypeId = data;
this.listMachineryitem();
});
},
listMachineryitem() {
listMachinery(this.machinerydata).then((response) => {
response.rows.forEach((item) => {
if (item.ip != null) {
this.intelligent.push(item);
}
});
this.loading = false;
});
},
handleClose(item) {
this.id = item.machineryId;
this.setInterval();
},
setInterval() {
// axios
// .get("http://192.168.50.191:8077/manage/modbus/data", {
// params: {
// id: this.id,
// },
// })
// .then((res) => {
// this.intelligentData = res.data.data;
// });
},
upbutton() {
if (this.id != "") {
axios
// .get("http://192.168.2.104:8077/manage/robot/powerOn", {
.get("http://192.168.50.191:8077/manage/robot/powerOn", {
params: {
id: this.id,
},
})
.then((res) => {
if (res.data.code === 200) {
this.elimage = false;
this.Powersupply = false;
this.$modal.msgSuccess("上电成功");
} else {
this.$message.error(res.data.msg);
}
});
} else {
this.$message({
message: "请选择设备",
type: "warning",
});
}
},
downbutton() {
if (this.id != "") {
axios
// .get("http://192.168.2.104:8077/manage/robot/powerOff", {
.get("http://192.168.50.191:8077/manage/robot/powerOff", {
params: {
id: this.id,
},
})
.then((res) => {
if (res.data.code === 200) {
this.elimage = true;
this.Powersupply = true;
this.$modal.msgSuccess("下电成功");
} else {
this.$message.error(res.data.msg);
}
});
} else {
this.$message({
message: "请选择设备",
type: "warning",
});
}
},
},
};
</script>
<style lang="scss" scoped>
.app-containers ::-webkit-scrollbar {
display: none;
}
::-webkit-scrollbar {
width: 0 !important;
}
::-webkit-scrollbar {
width: 0 !important;
height: 0;
}
.el-button + .el-button {
margin-left: 0px !important;
}
.image {
width: 300px;
height: 200px;
}
.one,
.three,
.two {
height: 510px;
width: 100%;
overflow: scroll;
border: solid 1px #dadada;
}
.one {
width: 95%;
}
.two {
border: 1px solid transparent;
}
.three {
width: 99%;
box-sizing: border-box;
margin-left: 5%;
}
.title {
line-height: 24px;
font-size: 18px;
color: #302933;
padding-bottom: 5px;
border-bottom: solid 1px #dadada;
margin-bottom: 15px;
margin-top: -23px;
}
.el-main,
.smallmain {
padding: 0;
}
.smallHeader {
background-color: #e0e8f0;
position: relative;
color: #7a8289;
font-weight: 700;
}
.content {
position: relative;
width: 70%;
margin: 0 auto 20px;
background: url("../../../assets/images/machine.png") no-repeat center;
background-size: 100% 100%;
}
.but1 {
position: absolute;
right: 20px;
top: 4px;
}
.open,
.smallmain >>> .el-tree-node:focus > .el-tree-node__content {
background-color: #83bff8 !important;
}
.smallmain >>> .el-tree-node__content:hover {
background-color: #dadada;
}
.smallmain
>>> .el-tree--highlight-current
.el-tree-node.is-current
> .el-tree-node__content {
background-color: #83bff8;
}
.tableBox >>> .el-table {
margin: 0;
}
.radio {
position: relative;
}
.nodata {
width: 100%;
text-align: center;
line-height: 40px;
height: 40px;
}
.tagBox {
width: 100%;
}
.tag {
width: 100%;
height: 38px;
}
.tagItem {
display: inline-block;
width: calc(100% / 3.2);
text-align: center;
margin-top: 5px;
/* 单行文本溢出省略号 */
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
::v-deep .el-tag .el-icon-close {
top: -9px;
}
.wrapBox >>> .el-table__body tr.current-row > td {
background-color: #83bff8 !important;
}
.wrapBox >>> .el-table tbody tr:hover > td {
background-color: #dadada;
}
::v-deep .el-tag {
margin-left: 0px;
}
</style>