zyh
This commit is contained in:
unknown
parent
6922c1ba30
commit
78d1316124
|
|
@ -0,0 +1,331 @@
|
|||
<template>
|
||||
<div id="app">
|
||||
|
||||
<router-view></router-view>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ceshi from "./components/ceshi.vue";
|
||||
import { Alert } from "element-ui";
|
||||
import { queryallanswer } from "./api/answer";
|
||||
export default {
|
||||
name: "App",
|
||||
data() {
|
||||
return {
|
||||
grade: 0,
|
||||
DB_IotLite_yx: [],
|
||||
CHGYWG_yx: [],
|
||||
CHGYWG_wx: [],
|
||||
DB_IotLite_wx: [],
|
||||
CKFWQ_yx: [],
|
||||
CKFWQ_wx: [],
|
||||
GYWZ_yx: [],
|
||||
GYWZ_wx: [],
|
||||
YDPZYM_wgpz: [],
|
||||
YDPZYM_wgwh: [],
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.queryallanswer();
|
||||
},
|
||||
methods: {
|
||||
// 请求正确答案
|
||||
async queryallanswer() {
|
||||
let { data } = await queryallanswer();
|
||||
console.log(JSON.parse(JSON.stringify(data.data)));
|
||||
let arr = [];
|
||||
arr = data.data;
|
||||
arr.forEach((item) => {
|
||||
if (item.mark == "DB-IotLite_yx") {
|
||||
this.DB_IotLite_yx = JSON.parse(item.answer);
|
||||
}
|
||||
if (item.mark == "CHGYWG_yx") {
|
||||
this.CHGYWG_yx = JSON.parse(item.answer);
|
||||
}
|
||||
if (item.mark == "CHGYWG_wx") {
|
||||
this.CHGYWG_wx = JSON.parse(item.answer);
|
||||
}
|
||||
if (item.mark == "DB_IotLite_wx") {
|
||||
this.DB_IotLite_wx = JSON.parse(item.answer);
|
||||
}
|
||||
if (item.mark == "CKFWQ_yx") {
|
||||
this.CKFWQ_yx = JSON.parse(item.answer);
|
||||
}
|
||||
if (item.mark == "CKFWQ_wx") {
|
||||
this.CKFWQ_wx = JSON.parse(item.answer);
|
||||
}
|
||||
if (item.mark == "GYWZ_yx") {
|
||||
this.GYWZ_yx = JSON.parse(item.answer);
|
||||
}
|
||||
if (item.mark == "GYWZ_wx") {
|
||||
this.GYWZ_wx = JSON.parse(item.answer);
|
||||
}
|
||||
if (item.mark == "YDPZYM_wgpz") {
|
||||
this.YDPZYM_wgpz = JSON.parse(item.answer);
|
||||
}
|
||||
if (item.mark == "YDPZYM_wgwh") {
|
||||
this.YDPZYM_wgwh = JSON.parse(item.answer);
|
||||
}
|
||||
});
|
||||
},
|
||||
// console.log(arr);
|
||||
// let obj = {
|
||||
// cjdpz_beilv: "2",
|
||||
// cjdpz_cjsjlx: "uint16",
|
||||
// cjdpz_dxsx: "只读131111",
|
||||
// cjdpz_jcqdz: "8195",
|
||||
// cjdpz_mc: "产量",
|
||||
// cjdpz_sjq: "4X (Holding Register)",
|
||||
// cjdpz_tagid: "MachinePamHID910",
|
||||
// cjdpz_zjx: "Null",
|
||||
// ippz_dns_by: "114.114.114.114",
|
||||
// ippz_dns_sx: "8.8.8.8",
|
||||
// ippz_ip: "192.168.32.3",
|
||||
// ippz_mac: "3C:2D:50:20:30:3D",
|
||||
// ippz_mrwg: "192.168.32.1",
|
||||
// ippz_wangkou: "ETH1",
|
||||
// ippz_zwym: "255.255.255.192",
|
||||
// mqtt_cjd_sbmc: "有线区精雕1",
|
||||
// mqtt_cjd_tagid: "MachinePamHID910",
|
||||
// mqtt_ip: "124.70.210.118",
|
||||
// mqtt_port: "1883",
|
||||
// mqtt_qiyong: "1",
|
||||
// mqtt_qos: "qos1",
|
||||
// mqtt_retained: "0",
|
||||
// mqtt_scms: "周期上传",
|
||||
// mqtt_sczq: "5",
|
||||
// mqtt_sjgl: "采集成功",
|
||||
// mqtt_sssjfbzt: "dbzn/gateway/iotlite/2000808010",
|
||||
// mqtt_wgsn: "2000808010",
|
||||
// sbpz_jdzxz: "1",
|
||||
// sbpz_jysb: "0",
|
||||
// sbpz_mac: "3C:2D:50:20:30:3D",
|
||||
// sbpz_sbid: "有线区加工设备1",
|
||||
// sbpz_sbmc: "有线区精雕1",
|
||||
// tdpz_050F: "auto",
|
||||
// tdpz_0610: "auto",
|
||||
// tdpz_cfcs: "3",
|
||||
// tdpz_cjsylxdz: "1",
|
||||
// tdpz_cssj: "500",
|
||||
// tdpz_dxzkb: "1:1",
|
||||
// tdpz_ip: "192.168.32.2",
|
||||
// tdpz_jgsj: "500",
|
||||
// tdpz_lxsj: "0",
|
||||
// tdpz_port: "502",
|
||||
// tdpz_qdmc: "ModbusTCPClient",
|
||||
// tdpz_td: "网口",
|
||||
// tdpz_tdmc: "有线区Channel1",
|
||||
// tdpz_watchtime: "1",
|
||||
// wgpz_wgid: "LAN-BOX1",
|
||||
// wgpz_wglx: "MODBUS网关",
|
||||
// wgpz_wgmc: "有线区网关1",
|
||||
// };
|
||||
// let newArr = [
|
||||
// {
|
||||
// cskey: "MachinePamHID917",
|
||||
// csname: "主轴转速",
|
||||
// pcz: "100",
|
||||
// sdz: "2000",
|
||||
// sfbjbz: "是",
|
||||
// sfyxbz: "是",
|
||||
// sswg: "lan-box2",
|
||||
// xsws: "0",
|
||||
// },
|
||||
// {
|
||||
// cskey: "MachinePamHID910",
|
||||
// csname: "产量",
|
||||
// pcz: "5",
|
||||
// sdz: "20",
|
||||
// sfbjbz: "是",
|
||||
// sfyxbz: "是",
|
||||
// sswg: "lan-box1",
|
||||
// xsws: "0",
|
||||
// },
|
||||
// {
|
||||
// cskey: "MachinePamHID909",
|
||||
// csname: "急停状态",
|
||||
// pcz: "0",
|
||||
// sdz: "1",
|
||||
// sfbjbz: "是",
|
||||
// sfyxbz: "是",
|
||||
// sswg: "wlan-box1",
|
||||
// xsws: "0",
|
||||
// },
|
||||
// {
|
||||
// cskey: "MachinePamHID928",
|
||||
// csname: "切削速度",
|
||||
// pcz: "50",
|
||||
// sdz: "500",
|
||||
// sfbjbz: "是",
|
||||
// sfyxbz: "是",
|
||||
// sswg: "wlan-box2",
|
||||
// xsws: "0",
|
||||
// },
|
||||
// ];
|
||||
// // console.log(this.getAllGrades(arr[0].answer, obj, arr[0].r1));
|
||||
// console.log(this.getAllGrades(newArr, newArr, arr[9].r1));
|
||||
// // this.getAllGrades(arr[9].answer, newArr, arr[9].r1);
|
||||
// },
|
||||
// obj1:答案对象 obj：用户对象 r1 模块分数
|
||||
// getAllGrades(obj1, obj2, r1) {
|
||||
// var arr = [];
|
||||
// let grade = 0;
|
||||
// if (!Array.isArray(obj1)) {
|
||||
// const keys = Object.keys(obj1);
|
||||
// for (let key of keys) {
|
||||
// if (obj1[key] !== obj2[key]) {
|
||||
// arr.push({
|
||||
// [key]: {
|
||||
// answer: obj1[key],
|
||||
// user: obj2[key],
|
||||
// },
|
||||
// });
|
||||
// }
|
||||
// }
|
||||
// if (arr.length > 0) {
|
||||
// grade = 0;
|
||||
// } else {
|
||||
// grade = r1;
|
||||
// }
|
||||
// } else {
|
||||
// if (obj1.length !== obj2.length) {
|
||||
// return false;
|
||||
// }
|
||||
// let flagArr = [];
|
||||
// for (let i = 0; i < obj1.length; i++) {
|
||||
// for (let j = 0; j < obj2.length; j++) {
|
||||
// let flag = this.isArrEqual(
|
||||
// Object.values(obj1[i]),
|
||||
// Object.values(obj2[j])
|
||||
// );
|
||||
// flagArr.push(flag);
|
||||
// }
|
||||
// }
|
||||
// let counter = 0;
|
||||
// let target = true;
|
||||
// for (let a of flagArr) {
|
||||
// if (a == target) {
|
||||
// counter++;
|
||||
// }
|
||||
// }
|
||||
// if (counter == obj1.length) {
|
||||
// grade = r1;
|
||||
// console.log(grade);
|
||||
// } else {
|
||||
// grade = 0;
|
||||
// }
|
||||
// }
|
||||
// // 返回此模块分数以及错误的字段;
|
||||
// return {
|
||||
// arr,
|
||||
// grade: Number(grade),
|
||||
// };
|
||||
// },
|
||||
// isArrEqual(arr1, arr2) {
|
||||
// return (
|
||||
// arr1.length === arr2.length && arr1.every((ele) => arr2.includes(ele))
|
||||
// );
|
||||
// },
|
||||
},
|
||||
mounted() {},
|
||||
components: {},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#app {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
/* background-color: white !important; */
|
||||
}
|
||||
|
||||
.v-modal {
|
||||
position: static;
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
.el-dialog__header,
|
||||
.el-table {
|
||||
background-image: url(./assets/image/bg.png);
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.el-dialog__body {
|
||||
color: #ffffff !important;
|
||||
background-image: url(./assets/image/bg.png);
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.el-dialog__footer {
|
||||
text-align: center;
|
||||
background-image: url(./assets/image/bg.png);
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.el-form-item label {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.el-dialog,
|
||||
.el-pager li,
|
||||
.tree_menu {
|
||||
color: #ffffff;
|
||||
background-image: url(./assets/image/bg.png);
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
/* //将el-dialog__header、el-dialog__body、el-dialog__footer背景设置为透明 */
|
||||
.el-dialog__header .el-dialog__title,
|
||||
.el-dialog__headerbtn .el-dialog__close {
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
.el-dialog__header {
|
||||
color: #ffffff;
|
||||
background-image: url(./assets/image/bg.png);
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.el-dialog__body {
|
||||
color: #ffffff;
|
||||
background-image: url(./assets/image/bg.png);
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.el-dialog__footer {
|
||||
text-align: center;
|
||||
background-image: url(./assets/image/bg.png);
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.el-form-item label {
|
||||
color: white;
|
||||
}
|
||||
|
||||
// .el-button {
|
||||
// width: 80px;
|
||||
// height: 30px;
|
||||
// line-height: 0.5 !important;
|
||||
// }
|
||||
|
||||
/* .el-tree-node__content:hover {
|
||||
background-image: url(./assets/image/bg.png);
|
||||
background-size: cover;
|
||||
}
|
||||
.el-tree-node.is-current>.el-tree-node__content {
|
||||
background-image: url(./assets/image/bg.png);
|
||||
background-size: cover;
|
||||
}
|
||||
.el-tree-node:focus>.el-tree-node__content {
|
||||
background-image: url(./assets/image/bg.png);
|
||||
background-size: cover;
|
||||
} */
|
||||
|
||||
/* 弹窗 */
|
||||
</style>
|
||||
|
|
@ -0,0 +1,331 @@
|
|||
<template>
|
||||
<div id="app">
|
||||
<ceshi></ceshi>
|
||||
<router-view></router-view>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ceshi from "./components/ceshi.vue";
|
||||
import { Alert } from "element-ui";
|
||||
import { queryallanswer } from "./api/answer";
|
||||
export default {
|
||||
name: "App",
|
||||
data() {
|
||||
return {
|
||||
grade: 0,
|
||||
DB_IotLite_yx: [],
|
||||
CHGYWG_yx: [],
|
||||
CHGYWG_wx: [],
|
||||
DB_IotLite_wx: [],
|
||||
CKFWQ_yx: [],
|
||||
CKFWQ_wx: [],
|
||||
GYWZ_yx: [],
|
||||
GYWZ_wx: [],
|
||||
YDPZYM_wgpz: [],
|
||||
YDPZYM_wgwh: [],
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.queryallanswer();
|
||||
},
|
||||
methods: {
|
||||
// 请求正确答案
|
||||
async queryallanswer() {
|
||||
let { data } = await queryallanswer();
|
||||
console.log(JSON.parse(JSON.stringify(data.data)));
|
||||
let arr = [];
|
||||
arr = data.data;
|
||||
arr.forEach((item) => {
|
||||
if (item.mark == "DB-IotLite_yx") {
|
||||
this.DB_IotLite_yx = JSON.parse(item.answer);
|
||||
}
|
||||
if (item.mark == "CHGYWG_yx") {
|
||||
this.CHGYWG_yx = JSON.parse(item.answer);
|
||||
}
|
||||
if (item.mark == "CHGYWG_wx") {
|
||||
this.CHGYWG_wx = JSON.parse(item.answer);
|
||||
}
|
||||
if (item.mark == "DB_IotLite_wx") {
|
||||
this.DB_IotLite_wx = JSON.parse(item.answer);
|
||||
}
|
||||
if (item.mark == "CKFWQ_yx") {
|
||||
this.CKFWQ_yx = JSON.parse(item.answer);
|
||||
}
|
||||
if (item.mark == "CKFWQ_wx") {
|
||||
this.CKFWQ_wx = JSON.parse(item.answer);
|
||||
}
|
||||
if (item.mark == "GYWZ_yx") {
|
||||
this.GYWZ_yx = JSON.parse(item.answer);
|
||||
}
|
||||
if (item.mark == "GYWZ_wx") {
|
||||
this.GYWZ_wx = JSON.parse(item.answer);
|
||||
}
|
||||
if (item.mark == "YDPZYM_wgpz") {
|
||||
this.YDPZYM_wgpz = JSON.parse(item.answer);
|
||||
}
|
||||
if (item.mark == "YDPZYM_wgwh") {
|
||||
this.YDPZYM_wgwh = JSON.parse(item.answer);
|
||||
}
|
||||
});
|
||||
},
|
||||
// console.log(arr);
|
||||
// let obj = {
|
||||
// cjdpz_beilv: "2",
|
||||
// cjdpz_cjsjlx: "uint16",
|
||||
// cjdpz_dxsx: "只读131111",
|
||||
// cjdpz_jcqdz: "8195",
|
||||
// cjdpz_mc: "产量",
|
||||
// cjdpz_sjq: "4X (Holding Register)",
|
||||
// cjdpz_tagid: "MachinePamHID910",
|
||||
// cjdpz_zjx: "Null",
|
||||
// ippz_dns_by: "114.114.114.114",
|
||||
// ippz_dns_sx: "8.8.8.8",
|
||||
// ippz_ip: "192.168.32.3",
|
||||
// ippz_mac: "3C:2D:50:20:30:3D",
|
||||
// ippz_mrwg: "192.168.32.1",
|
||||
// ippz_wangkou: "ETH1",
|
||||
// ippz_zwym: "255.255.255.192",
|
||||
// mqtt_cjd_sbmc: "有线区精雕1",
|
||||
// mqtt_cjd_tagid: "MachinePamHID910",
|
||||
// mqtt_ip: "124.70.210.118",
|
||||
// mqtt_port: "1883",
|
||||
// mqtt_qiyong: "1",
|
||||
// mqtt_qos: "qos1",
|
||||
// mqtt_retained: "0",
|
||||
// mqtt_scms: "周期上传",
|
||||
// mqtt_sczq: "5",
|
||||
// mqtt_sjgl: "采集成功",
|
||||
// mqtt_sssjfbzt: "dbzn/gateway/iotlite/2000808010",
|
||||
// mqtt_wgsn: "2000808010",
|
||||
// sbpz_jdzxz: "1",
|
||||
// sbpz_jysb: "0",
|
||||
// sbpz_mac: "3C:2D:50:20:30:3D",
|
||||
// sbpz_sbid: "有线区加工设备1",
|
||||
// sbpz_sbmc: "有线区精雕1",
|
||||
// tdpz_050F: "auto",
|
||||
// tdpz_0610: "auto",
|
||||
// tdpz_cfcs: "3",
|
||||
// tdpz_cjsylxdz: "1",
|
||||
// tdpz_cssj: "500",
|
||||
// tdpz_dxzkb: "1:1",
|
||||
// tdpz_ip: "192.168.32.2",
|
||||
// tdpz_jgsj: "500",
|
||||
// tdpz_lxsj: "0",
|
||||
// tdpz_port: "502",
|
||||
// tdpz_qdmc: "ModbusTCPClient",
|
||||
// tdpz_td: "网口",
|
||||
// tdpz_tdmc: "有线区Channel1",
|
||||
// tdpz_watchtime: "1",
|
||||
// wgpz_wgid: "LAN-BOX1",
|
||||
// wgpz_wglx: "MODBUS网关",
|
||||
// wgpz_wgmc: "有线区网关1",
|
||||
// };
|
||||
// let newArr = [
|
||||
// {
|
||||
// cskey: "MachinePamHID917",
|
||||
// csname: "主轴转速",
|
||||
// pcz: "100",
|
||||
// sdz: "2000",
|
||||
// sfbjbz: "是",
|
||||
// sfyxbz: "是",
|
||||
// sswg: "lan-box2",
|
||||
// xsws: "0",
|
||||
// },
|
||||
// {
|
||||
// cskey: "MachinePamHID910",
|
||||
// csname: "产量",
|
||||
// pcz: "5",
|
||||
// sdz: "20",
|
||||
// sfbjbz: "是",
|
||||
// sfyxbz: "是",
|
||||
// sswg: "lan-box1",
|
||||
// xsws: "0",
|
||||
// },
|
||||
// {
|
||||
// cskey: "MachinePamHID909",
|
||||
// csname: "急停状态",
|
||||
// pcz: "0",
|
||||
// sdz: "1",
|
||||
// sfbjbz: "是",
|
||||
// sfyxbz: "是",
|
||||
// sswg: "wlan-box1",
|
||||
// xsws: "0",
|
||||
// },
|
||||
// {
|
||||
// cskey: "MachinePamHID928",
|
||||
// csname: "切削速度",
|
||||
// pcz: "50",
|
||||
// sdz: "500",
|
||||
// sfbjbz: "是",
|
||||
// sfyxbz: "是",
|
||||
// sswg: "wlan-box2",
|
||||
// xsws: "0",
|
||||
// },
|
||||
// ];
|
||||
// // console.log(this.getAllGrades(arr[0].answer, obj, arr[0].r1));
|
||||
// console.log(this.getAllGrades(newArr, newArr, arr[9].r1));
|
||||
// // this.getAllGrades(arr[9].answer, newArr, arr[9].r1);
|
||||
// },
|
||||
// obj1:答案对象 obj：用户对象 r1 模块分数
|
||||
// getAllGrades(obj1, obj2, r1) {
|
||||
// var arr = [];
|
||||
// let grade = 0;
|
||||
// if (!Array.isArray(obj1)) {
|
||||
// const keys = Object.keys(obj1);
|
||||
// for (let key of keys) {
|
||||
// if (obj1[key] !== obj2[key]) {
|
||||
// arr.push({
|
||||
// [key]: {
|
||||
// answer: obj1[key],
|
||||
// user: obj2[key],
|
||||
// },
|
||||
// });
|
||||
// }
|
||||
// }
|
||||
// if (arr.length > 0) {
|
||||
// grade = 0;
|
||||
// } else {
|
||||
// grade = r1;
|
||||
// }
|
||||
// } else {
|
||||
// if (obj1.length !== obj2.length) {
|
||||
// return false;
|
||||
// }
|
||||
// let flagArr = [];
|
||||
// for (let i = 0; i < obj1.length; i++) {
|
||||
// for (let j = 0; j < obj2.length; j++) {
|
||||
// let flag = this.isArrEqual(
|
||||
// Object.values(obj1[i]),
|
||||
// Object.values(obj2[j])
|
||||
// );
|
||||
// flagArr.push(flag);
|
||||
// }
|
||||
// }
|
||||
// let counter = 0;
|
||||
// let target = true;
|
||||
// for (let a of flagArr) {
|
||||
// if (a == target) {
|
||||
// counter++;
|
||||
// }
|
||||
// }
|
||||
// if (counter == obj1.length) {
|
||||
// grade = r1;
|
||||
// console.log(grade);
|
||||
// } else {
|
||||
// grade = 0;
|
||||
// }
|
||||
// }
|
||||
// // 返回此模块分数以及错误的字段;
|
||||
// return {
|
||||
// arr,
|
||||
// grade: Number(grade),
|
||||
// };
|
||||
// },
|
||||
// isArrEqual(arr1, arr2) {
|
||||
// return (
|
||||
// arr1.length === arr2.length && arr1.every((ele) => arr2.includes(ele))
|
||||
// );
|
||||
// },
|
||||
},
|
||||
mounted() {},
|
||||
components: {},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#app {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
/* background-color: white !important; */
|
||||
}
|
||||
|
||||
.v-modal {
|
||||
position: static;
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
.el-dialog__header,
|
||||
.el-table {
|
||||
background-image: url(./assets/image/bg.png);
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.el-dialog__body {
|
||||
color: #ffffff !important;
|
||||
background-image: url(./assets/image/bg.png);
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.el-dialog__footer {
|
||||
text-align: center;
|
||||
background-image: url(./assets/image/bg.png);
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.el-form-item label {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.el-dialog,
|
||||
.el-pager li,
|
||||
.tree_menu {
|
||||
color: #ffffff;
|
||||
background-image: url(./assets/image/bg.png);
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
/* //将el-dialog__header、el-dialog__body、el-dialog__footer背景设置为透明 */
|
||||
.el-dialog__header .el-dialog__title,
|
||||
.el-dialog__headerbtn .el-dialog__close {
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
.el-dialog__header {
|
||||
color: #ffffff;
|
||||
background-image: url(./assets/image/bg.png);
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.el-dialog__body {
|
||||
color: #ffffff;
|
||||
background-image: url(./assets/image/bg.png);
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.el-dialog__footer {
|
||||
text-align: center;
|
||||
background-image: url(./assets/image/bg.png);
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.el-form-item label {
|
||||
color: white;
|
||||
}
|
||||
|
||||
// .el-button {
|
||||
// width: 80px;
|
||||
// height: 30px;
|
||||
// line-height: 0.5 !important;
|
||||
// }
|
||||
|
||||
/* .el-tree-node__content:hover {
|
||||
background-image: url(./assets/image/bg.png);
|
||||
background-size: cover;
|
||||
}
|
||||
.el-tree-node.is-current>.el-tree-node__content {
|
||||
background-image: url(./assets/image/bg.png);
|
||||
background-size: cover;
|
||||
}
|
||||
.el-tree-node:focus>.el-tree-node__content {
|
||||
background-image: url(./assets/image/bg.png);
|
||||
background-size: cover;
|
||||
} */
|
||||
|
||||
/* 弹窗 */
|
||||
</style>
|
||||
|
|
@ -0,0 +1,334 @@
|
|||
<template>
|
||||
<div id="app">
|
||||
<ceshi></ceshi>
|
||||
<router-view></router-view>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ceshi from "./components/ceshi.vue";
|
||||
import { Alert } from "element-ui";
|
||||
import { queryallanswer } from "./api/answer";
|
||||
export default {
|
||||
name: "App",
|
||||
components:{
|
||||
ceshi
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
grade: 0,
|
||||
DB_IotLite_yx: [],
|
||||
CHGYWG_yx: [],
|
||||
CHGYWG_wx: [],
|
||||
DB_IotLite_wx: [],
|
||||
CKFWQ_yx: [],
|
||||
CKFWQ_wx: [],
|
||||
GYWZ_yx: [],
|
||||
GYWZ_wx: [],
|
||||
YDPZYM_wgpz: [],
|
||||
YDPZYM_wgwh: [],
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.queryallanswer();
|
||||
},
|
||||
methods: {
|
||||
// 请求正确答案
|
||||
async queryallanswer() {
|
||||
let { data } = await queryallanswer();
|
||||
console.log(JSON.parse(JSON.stringify(data.data)));
|
||||
let arr = [];
|
||||
arr = data.data;
|
||||
arr.forEach((item) => {
|
||||
if (item.mark == "DB-IotLite_yx") {
|
||||
this.DB_IotLite_yx = JSON.parse(item.answer);
|
||||
}
|
||||
if (item.mark == "CHGYWG_yx") {
|
||||
this.CHGYWG_yx = JSON.parse(item.answer);
|
||||
}
|
||||
if (item.mark == "CHGYWG_wx") {
|
||||
this.CHGYWG_wx = JSON.parse(item.answer);
|
||||
}
|
||||
if (item.mark == "DB_IotLite_wx") {
|
||||
this.DB_IotLite_wx = JSON.parse(item.answer);
|
||||
}
|
||||
if (item.mark == "CKFWQ_yx") {
|
||||
this.CKFWQ_yx = JSON.parse(item.answer);
|
||||
}
|
||||
if (item.mark == "CKFWQ_wx") {
|
||||
this.CKFWQ_wx = JSON.parse(item.answer);
|
||||
}
|
||||
if (item.mark == "GYWZ_yx") {
|
||||
this.GYWZ_yx = JSON.parse(item.answer);
|
||||
}
|
||||
if (item.mark == "GYWZ_wx") {
|
||||
this.GYWZ_wx = JSON.parse(item.answer);
|
||||
}
|
||||
if (item.mark == "YDPZYM_wgpz") {
|
||||
this.YDPZYM_wgpz = JSON.parse(item.answer);
|
||||
}
|
||||
if (item.mark == "YDPZYM_wgwh") {
|
||||
this.YDPZYM_wgwh = JSON.parse(item.answer);
|
||||
}
|
||||
});
|
||||
},
|
||||
// console.log(arr);
|
||||
// let obj = {
|
||||
// cjdpz_beilv: "2",
|
||||
// cjdpz_cjsjlx: "uint16",
|
||||
// cjdpz_dxsx: "只读131111",
|
||||
// cjdpz_jcqdz: "8195",
|
||||
// cjdpz_mc: "产量",
|
||||
// cjdpz_sjq: "4X (Holding Register)",
|
||||
// cjdpz_tagid: "MachinePamHID910",
|
||||
// cjdpz_zjx: "Null",
|
||||
// ippz_dns_by: "114.114.114.114",
|
||||
// ippz_dns_sx: "8.8.8.8",
|
||||
// ippz_ip: "192.168.32.3",
|
||||
// ippz_mac: "3C:2D:50:20:30:3D",
|
||||
// ippz_mrwg: "192.168.32.1",
|
||||
// ippz_wangkou: "ETH1",
|
||||
// ippz_zwym: "255.255.255.192",
|
||||
// mqtt_cjd_sbmc: "有线区精雕1",
|
||||
// mqtt_cjd_tagid: "MachinePamHID910",
|
||||
// mqtt_ip: "124.70.210.118",
|
||||
// mqtt_port: "1883",
|
||||
// mqtt_qiyong: "1",
|
||||
// mqtt_qos: "qos1",
|
||||
// mqtt_retained: "0",
|
||||
// mqtt_scms: "周期上传",
|
||||
// mqtt_sczq: "5",
|
||||
// mqtt_sjgl: "采集成功",
|
||||
// mqtt_sssjfbzt: "dbzn/gateway/iotlite/2000808010",
|
||||
// mqtt_wgsn: "2000808010",
|
||||
// sbpz_jdzxz: "1",
|
||||
// sbpz_jysb: "0",
|
||||
// sbpz_mac: "3C:2D:50:20:30:3D",
|
||||
// sbpz_sbid: "有线区加工设备1",
|
||||
// sbpz_sbmc: "有线区精雕1",
|
||||
// tdpz_050F: "auto",
|
||||
// tdpz_0610: "auto",
|
||||
// tdpz_cfcs: "3",
|
||||
// tdpz_cjsylxdz: "1",
|
||||
// tdpz_cssj: "500",
|
||||
// tdpz_dxzkb: "1:1",
|
||||
// tdpz_ip: "192.168.32.2",
|
||||
// tdpz_jgsj: "500",
|
||||
// tdpz_lxsj: "0",
|
||||
// tdpz_port: "502",
|
||||
// tdpz_qdmc: "ModbusTCPClient",
|
||||
// tdpz_td: "网口",
|
||||
// tdpz_tdmc: "有线区Channel1",
|
||||
// tdpz_watchtime: "1",
|
||||
// wgpz_wgid: "LAN-BOX1",
|
||||
// wgpz_wglx: "MODBUS网关",
|
||||
// wgpz_wgmc: "有线区网关1",
|
||||
// };
|
||||
// let newArr = [
|
||||
// {
|
||||
// cskey: "MachinePamHID917",
|
||||
// csname: "主轴转速",
|
||||
// pcz: "100",
|
||||
// sdz: "2000",
|
||||
// sfbjbz: "是",
|
||||
// sfyxbz: "是",
|
||||
// sswg: "lan-box2",
|
||||
// xsws: "0",
|
||||
// },
|
||||
// {
|
||||
// cskey: "MachinePamHID910",
|
||||
// csname: "产量",
|
||||
// pcz: "5",
|
||||
// sdz: "20",
|
||||
// sfbjbz: "是",
|
||||
// sfyxbz: "是",
|
||||
// sswg: "lan-box1",
|
||||
// xsws: "0",
|
||||
// },
|
||||
// {
|
||||
// cskey: "MachinePamHID909",
|
||||
// csname: "急停状态",
|
||||
// pcz: "0",
|
||||
// sdz: "1",
|
||||
// sfbjbz: "是",
|
||||
// sfyxbz: "是",
|
||||
// sswg: "wlan-box1",
|
||||
// xsws: "0",
|
||||
// },
|
||||
// {
|
||||
// cskey: "MachinePamHID928",
|
||||
// csname: "切削速度",
|
||||
// pcz: "50",
|
||||
// sdz: "500",
|
||||
// sfbjbz: "是",
|
||||
// sfyxbz: "是",
|
||||
// sswg: "wlan-box2",
|
||||
// xsws: "0",
|
||||
// },
|
||||
// ];
|
||||
// // console.log(this.getAllGrades(arr[0].answer, obj, arr[0].r1));
|
||||
// console.log(this.getAllGrades(newArr, newArr, arr[9].r1));
|
||||
// // this.getAllGrades(arr[9].answer, newArr, arr[9].r1);
|
||||
// },
|
||||
// obj1:答案对象 obj：用户对象 r1 模块分数
|
||||
// getAllGrades(obj1, obj2, r1) {
|
||||
// var arr = [];
|
||||
// let grade = 0;
|
||||
// if (!Array.isArray(obj1)) {
|
||||
// const keys = Object.keys(obj1);
|
||||
// for (let key of keys) {
|
||||
// if (obj1[key] !== obj2[key]) {
|
||||
// arr.push({
|
||||
// [key]: {
|
||||
// answer: obj1[key],
|
||||
// user: obj2[key],
|
||||
// },
|
||||
// });
|
||||
// }
|
||||
// }
|
||||
// if (arr.length > 0) {
|
||||
// grade = 0;
|
||||
// } else {
|
||||
// grade = r1;
|
||||
// }
|
||||
// } else {
|
||||
// if (obj1.length !== obj2.length) {
|
||||
// return false;
|
||||
// }
|
||||
// let flagArr = [];
|
||||
// for (let i = 0; i < obj1.length; i++) {
|
||||
// for (let j = 0; j < obj2.length; j++) {
|
||||
// let flag = this.isArrEqual(
|
||||
// Object.values(obj1[i]),
|
||||
// Object.values(obj2[j])
|
||||
// );
|
||||
// flagArr.push(flag);
|
||||
// }
|
||||
// }
|
||||
// let counter = 0;
|
||||
// let target = true;
|
||||
// for (let a of flagArr) {
|
||||
// if (a == target) {
|
||||
// counter++;
|
||||
// }
|
||||
// }
|
||||
// if (counter == obj1.length) {
|
||||
// grade = r1;
|
||||
// console.log(grade);
|
||||
// } else {
|
||||
// grade = 0;
|
||||
// }
|
||||
// }
|
||||
// // 返回此模块分数以及错误的字段;
|
||||
// return {
|
||||
// arr,
|
||||
// grade: Number(grade),
|
||||
// };
|
||||
// },
|
||||
// isArrEqual(arr1, arr2) {
|
||||
// return (
|
||||
// arr1.length === arr2.length && arr1.every((ele) => arr2.includes(ele))
|
||||
// );
|
||||
// },
|
||||
},
|
||||
mounted() {},
|
||||
components: {},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#app {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
/* background-color: white !important; */
|
||||
}
|
||||
|
||||
.v-modal {
|
||||
position: static;
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
.el-dialog__header,
|
||||
.el-table {
|
||||
background-image: url(./assets/image/bg.png);
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.el-dialog__body {
|
||||
color: #ffffff !important;
|
||||
background-image: url(./assets/image/bg.png);
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.el-dialog__footer {
|
||||
text-align: center;
|
||||
background-image: url(./assets/image/bg.png);
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.el-form-item label {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.el-dialog,
|
||||
.el-pager li,
|
||||
.tree_menu {
|
||||
color: #ffffff;
|
||||
background-image: url(./assets/image/bg.png);
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
/* //将el-dialog__header、el-dialog__body、el-dialog__footer背景设置为透明 */
|
||||
.el-dialog__header .el-dialog__title,
|
||||
.el-dialog__headerbtn .el-dialog__close {
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
.el-dialog__header {
|
||||
color: #ffffff;
|
||||
background-image: url(./assets/image/bg.png);
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.el-dialog__body {
|
||||
color: #ffffff;
|
||||
background-image: url(./assets/image/bg.png);
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.el-dialog__footer {
|
||||
text-align: center;
|
||||
background-image: url(./assets/image/bg.png);
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.el-form-item label {
|
||||
color: white;
|
||||
}
|
||||
|
||||
// .el-button {
|
||||
// width: 80px;
|
||||
// height: 30px;
|
||||
// line-height: 0.5 !important;
|
||||
// }
|
||||
|
||||
/* .el-tree-node__content:hover {
|
||||
background-image: url(./assets/image/bg.png);
|
||||
background-size: cover;
|
||||
}
|
||||
.el-tree-node.is-current>.el-tree-node__content {
|
||||
background-image: url(./assets/image/bg.png);
|
||||
background-size: cover;
|
||||
}
|
||||
.el-tree-node:focus>.el-tree-node__content {
|
||||
background-image: url(./assets/image/bg.png);
|
||||
background-size: cover;
|
||||
} */
|
||||
|
||||
/* 弹窗 */
|
||||
</style>
|
||||
|
|
@ -0,0 +1,334 @@
|
|||
<template>
|
||||
<div id="app">
|
||||
<ceshi></ceshi>
|
||||
<router-view></router-view>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ceshi from "./components/ceshi.vue";
|
||||
import { Alert } from "element-ui";
|
||||
import { queryallanswer } from "./api/answer";
|
||||
export default {
|
||||
name: "App",
|
||||
components:{
|
||||
ceshi
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
grade: 0,
|
||||
DB_IotLite_yx: [],
|
||||
CHGYWG_yx: [],
|
||||
CHGYWG_wx: [],
|
||||
DB_IotLite_wx: [],
|
||||
CKFWQ_yx: [],
|
||||
CKFWQ_wx: [],
|
||||
GYWZ_yx: [],
|
||||
GYWZ_wx: [],
|
||||
YDPZYM_wgpz: [],
|
||||
YDPZYM_wgwh: [],
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.queryallanswer();
|
||||
},
|
||||
methods: {
|
||||
// 请求正确答案
|
||||
async queryallanswer() {
|
||||
let { data } = await queryallanswer();
|
||||
console.log(JSON.parse(JSON.stringify(data.data)));
|
||||
let arr = [];
|
||||
arr = data.data;
|
||||
arr.forEach((item) => {
|
||||
if (item.mark == "DB-IotLite_yx") {
|
||||
this.DB_IotLite_yx = JSON.parse(item.answer);
|
||||
}
|
||||
if (item.mark == "CHGYWG_yx") {
|
||||
this.CHGYWG_yx = JSON.parse(item.answer);
|
||||
}
|
||||
if (item.mark == "CHGYWG_wx") {
|
||||
this.CHGYWG_wx = JSON.parse(item.answer);
|
||||
}
|
||||
if (item.mark == "DB_IotLite_wx") {
|
||||
this.DB_IotLite_wx = JSON.parse(item.answer);
|
||||
}
|
||||
if (item.mark == "CKFWQ_yx") {
|
||||
this.CKFWQ_yx = JSON.parse(item.answer);
|
||||
}
|
||||
if (item.mark == "CKFWQ_wx") {
|
||||
this.CKFWQ_wx = JSON.parse(item.answer);
|
||||
}
|
||||
if (item.mark == "GYWZ_yx") {
|
||||
this.GYWZ_yx = JSON.parse(item.answer);
|
||||
}
|
||||
if (item.mark == "GYWZ_wx") {
|
||||
this.GYWZ_wx = JSON.parse(item.answer);
|
||||
}
|
||||
if (item.mark == "YDPZYM_wgpz") {
|
||||
this.YDPZYM_wgpz = JSON.parse(item.answer);
|
||||
}
|
||||
if (item.mark == "YDPZYM_wgwh") {
|
||||
this.YDPZYM_wgwh = JSON.parse(item.answer);
|
||||
}
|
||||
});
|
||||
},
|
||||
// console.log(arr);
|
||||
// let obj = {
|
||||
// cjdpz_beilv: "2",
|
||||
// cjdpz_cjsjlx: "uint16",
|
||||
// cjdpz_dxsx: "只读131111",
|
||||
// cjdpz_jcqdz: "8195",
|
||||
// cjdpz_mc: "产量",
|
||||
// cjdpz_sjq: "4X (Holding Register)",
|
||||
// cjdpz_tagid: "MachinePamHID910",
|
||||
// cjdpz_zjx: "Null",
|
||||
// ippz_dns_by: "114.114.114.114",
|
||||
// ippz_dns_sx: "8.8.8.8",
|
||||
// ippz_ip: "192.168.32.3",
|
||||
// ippz_mac: "3C:2D:50:20:30:3D",
|
||||
// ippz_mrwg: "192.168.32.1",
|
||||
// ippz_wangkou: "ETH1",
|
||||
// ippz_zwym: "255.255.255.192",
|
||||
// mqtt_cjd_sbmc: "有线区精雕1",
|
||||
// mqtt_cjd_tagid: "MachinePamHID910",
|
||||
// mqtt_ip: "124.70.210.118",
|
||||
// mqtt_port: "1883",
|
||||
// mqtt_qiyong: "1",
|
||||
// mqtt_qos: "qos1",
|
||||
// mqtt_retained: "0",
|
||||
// mqtt_scms: "周期上传",
|
||||
// mqtt_sczq: "5",
|
||||
// mqtt_sjgl: "采集成功",
|
||||
// mqtt_sssjfbzt: "dbzn/gateway/iotlite/2000808010",
|
||||
// mqtt_wgsn: "2000808010",
|
||||
// sbpz_jdzxz: "1",
|
||||
// sbpz_jysb: "0",
|
||||
// sbpz_mac: "3C:2D:50:20:30:3D",
|
||||
// sbpz_sbid: "有线区加工设备1",
|
||||
// sbpz_sbmc: "有线区精雕1",
|
||||
// tdpz_050F: "auto",
|
||||
// tdpz_0610: "auto",
|
||||
// tdpz_cfcs: "3",
|
||||
// tdpz_cjsylxdz: "1",
|
||||
// tdpz_cssj: "500",
|
||||
// tdpz_dxzkb: "1:1",
|
||||
// tdpz_ip: "192.168.32.2",
|
||||
// tdpz_jgsj: "500",
|
||||
// tdpz_lxsj: "0",
|
||||
// tdpz_port: "502",
|
||||
// tdpz_qdmc: "ModbusTCPClient",
|
||||
// tdpz_td: "网口",
|
||||
// tdpz_tdmc: "有线区Channel1",
|
||||
// tdpz_watchtime: "1",
|
||||
// wgpz_wgid: "LAN-BOX1",
|
||||
// wgpz_wglx: "MODBUS网关",
|
||||
// wgpz_wgmc: "有线区网关1",
|
||||
// };
|
||||
// let newArr = [
|
||||
// {
|
||||
// cskey: "MachinePamHID917",
|
||||
// csname: "主轴转速",
|
||||
// pcz: "100",
|
||||
// sdz: "2000",
|
||||
// sfbjbz: "是",
|
||||
// sfyxbz: "是",
|
||||
// sswg: "lan-box2",
|
||||
// xsws: "0",
|
||||
// },
|
||||
// {
|
||||
// cskey: "MachinePamHID910",
|
||||
// csname: "产量",
|
||||
// pcz: "5",
|
||||
// sdz: "20",
|
||||
// sfbjbz: "是",
|
||||
// sfyxbz: "是",
|
||||
// sswg: "lan-box1",
|
||||
// xsws: "0",
|
||||
// },
|
||||
// {
|
||||
// cskey: "MachinePamHID909",
|
||||
// csname: "急停状态",
|
||||
// pcz: "0",
|
||||
// sdz: "1",
|
||||
// sfbjbz: "是",
|
||||
// sfyxbz: "是",
|
||||
// sswg: "wlan-box1",
|
||||
// xsws: "0",
|
||||
// },
|
||||
// {
|
||||
// cskey: "MachinePamHID928",
|
||||
// csname: "切削速度",
|
||||
// pcz: "50",
|
||||
// sdz: "500",
|
||||
// sfbjbz: "是",
|
||||
// sfyxbz: "是",
|
||||
// sswg: "wlan-box2",
|
||||
// xsws: "0",
|
||||
// },
|
||||
// ];
|
||||
// // console.log(this.getAllGrades(arr[0].answer, obj, arr[0].r1));
|
||||
// console.log(this.getAllGrades(newArr, newArr, arr[9].r1));
|
||||
// // this.getAllGrades(arr[9].answer, newArr, arr[9].r1);
|
||||
// },
|
||||
// obj1:答案对象 obj：用户对象 r1 模块分数
|
||||
// getAllGrades(obj1, obj2, r1) {
|
||||
// var arr = [];
|
||||
// let grade = 0;
|
||||
// if (!Array.isArray(obj1)) {
|
||||
// const keys = Object.keys(obj1);
|
||||
// for (let key of keys) {
|
||||
// if (obj1[key] !== obj2[key]) {
|
||||
// arr.push({
|
||||
// [key]: {
|
||||
// answer: obj1[key],
|
||||
// user: obj2[key],
|
||||
// },
|
||||
// });
|
||||
// }
|
||||
// }
|
||||
// if (arr.length > 0) {
|
||||
// grade = 0;
|
||||
// } else {
|
||||
// grade = r1;
|
||||
// }
|
||||
// } else {
|
||||
// if (obj1.length !== obj2.length) {
|
||||
// return false;
|
||||
// }
|
||||
// let flagArr = [];
|
||||
// for (let i = 0; i < obj1.length; i++) {
|
||||
// for (let j = 0; j < obj2.length; j++) {
|
||||
// let flag = this.isArrEqual(
|
||||
// Object.values(obj1[i]),
|
||||
// Object.values(obj2[j])
|
||||
// );
|
||||
// flagArr.push(flag);
|
||||
// }
|
||||
// }
|
||||
// let counter = 0;
|
||||
// let target = true;
|
||||
// for (let a of flagArr) {
|
||||
// if (a == target) {
|
||||
// counter++;
|
||||
// }
|
||||
// }
|
||||
// if (counter == obj1.length) {
|
||||
// grade = r1;
|
||||
// console.log(grade);
|
||||
// } else {
|
||||
// grade = 0;
|
||||
// }
|
||||
// }
|
||||
// // 返回此模块分数以及错误的字段;
|
||||
// return {
|
||||
// arr,
|
||||
// grade: Number(grade),
|
||||
// };
|
||||
// },
|
||||
// isArrEqual(arr1, arr2) {
|
||||
// return (
|
||||
// arr1.length === arr2.length && arr1.every((ele) => arr2.includes(ele))
|
||||
// );
|
||||
// },
|
||||
},
|
||||
mounted() {},
|
||||
components: {},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#app {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
/* background-color: white !important; */
|
||||
}
|
||||
|
||||
.v-modal {
|
||||
position: static;
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
.el-dialog__header,
|
||||
.el-table {
|
||||
background-image: url(./assets/image/bg.png);
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.el-dialog__body {
|
||||
color: #ffffff !important;
|
||||
background-image: url(./assets/image/bg.png);
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.el-dialog__footer {
|
||||
text-align: center;
|
||||
background-image: url(./assets/image/bg.png);
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.el-form-item label {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.el-dialog,
|
||||
.el-pager li,
|
||||
.tree_menu {
|
||||
color: #ffffff;
|
||||
background-image: url(./assets/image/bg.png);
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
/* //将el-dialog__header、el-dialog__body、el-dialog__footer背景设置为透明 */
|
||||
.el-dialog__header .el-dialog__title,
|
||||
.el-dialog__headerbtn .el-dialog__close {
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
.el-dialog__header {
|
||||
color: #ffffff;
|
||||
background-image: url(./assets/image/bg.png);
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.el-dialog__body {
|
||||
color: #ffffff;
|
||||
background-image: url(./assets/image/bg.png);
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.el-dialog__footer {
|
||||
text-align: center;
|
||||
background-image: url(./assets/image/bg.png);
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.el-form-item label {
|
||||
color: white;
|
||||
}
|
||||
|
||||
// .el-button {
|
||||
// width: 80px;
|
||||
// height: 30px;
|
||||
// line-height: 0.5 !important;
|
||||
// }
|
||||
|
||||
/* .el-tree-node__content:hover {
|
||||
background-image: url(./assets/image/bg.png);
|
||||
background-size: cover;
|
||||
}
|
||||
.el-tree-node.is-current>.el-tree-node__content {
|
||||
background-image: url(./assets/image/bg.png);
|
||||
background-size: cover;
|
||||
}
|
||||
.el-tree-node:focus>.el-tree-node__content {
|
||||
background-image: url(./assets/image/bg.png);
|
||||
background-size: cover;
|
||||
} */
|
||||
|
||||
/* 弹窗 */
|
||||
</style>
|
||||
|
|
@ -0,0 +1,334 @@
|
|||
<template>
|
||||
<div id="app">
|
||||
<ceshi></ceshi>
|
||||
<router-view></router-view>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// import ceshi from "./components/ceshi.vue";
|
||||
import { Alert } from "element-ui";
|
||||
import { queryallanswer } from "./api/answer";
|
||||
export default {
|
||||
name: "App",
|
||||
components:{
|
||||
ceshi
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
grade: 0,
|
||||
DB_IotLite_yx: [],
|
||||
CHGYWG_yx: [],
|
||||
CHGYWG_wx: [],
|
||||
DB_IotLite_wx: [],
|
||||
CKFWQ_yx: [],
|
||||
CKFWQ_wx: [],
|
||||
GYWZ_yx: [],
|
||||
GYWZ_wx: [],
|
||||
YDPZYM_wgpz: [],
|
||||
YDPZYM_wgwh: [],
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.queryallanswer();
|
||||
},
|
||||
methods: {
|
||||
// 请求正确答案
|
||||
async queryallanswer() {
|
||||
let { data } = await queryallanswer();
|
||||
console.log(JSON.parse(JSON.stringify(data.data)));
|
||||
let arr = [];
|
||||
arr = data.data;
|
||||
arr.forEach((item) => {
|
||||
if (item.mark == "DB-IotLite_yx") {
|
||||
this.DB_IotLite_yx = JSON.parse(item.answer);
|
||||
}
|
||||
if (item.mark == "CHGYWG_yx") {
|
||||
this.CHGYWG_yx = JSON.parse(item.answer);
|
||||
}
|
||||
if (item.mark == "CHGYWG_wx") {
|
||||
this.CHGYWG_wx = JSON.parse(item.answer);
|
||||
}
|
||||
if (item.mark == "DB_IotLite_wx") {
|
||||
this.DB_IotLite_wx = JSON.parse(item.answer);
|
||||
}
|
||||
if (item.mark == "CKFWQ_yx") {
|
||||
this.CKFWQ_yx = JSON.parse(item.answer);
|
||||
}
|
||||
if (item.mark == "CKFWQ_wx") {
|
||||
this.CKFWQ_wx = JSON.parse(item.answer);
|
||||
}
|
||||
if (item.mark == "GYWZ_yx") {
|
||||
this.GYWZ_yx = JSON.parse(item.answer);
|
||||
}
|
||||
if (item.mark == "GYWZ_wx") {
|
||||
this.GYWZ_wx = JSON.parse(item.answer);
|
||||
}
|
||||
if (item.mark == "YDPZYM_wgpz") {
|
||||
this.YDPZYM_wgpz = JSON.parse(item.answer);
|
||||
}
|
||||
if (item.mark == "YDPZYM_wgwh") {
|
||||
this.YDPZYM_wgwh = JSON.parse(item.answer);
|
||||
}
|
||||
});
|
||||
},
|
||||
// console.log(arr);
|
||||
// let obj = {
|
||||
// cjdpz_beilv: "2",
|
||||
// cjdpz_cjsjlx: "uint16",
|
||||
// cjdpz_dxsx: "只读131111",
|
||||
// cjdpz_jcqdz: "8195",
|
||||
// cjdpz_mc: "产量",
|
||||
// cjdpz_sjq: "4X (Holding Register)",
|
||||
// cjdpz_tagid: "MachinePamHID910",
|
||||
// cjdpz_zjx: "Null",
|
||||
// ippz_dns_by: "114.114.114.114",
|
||||
// ippz_dns_sx: "8.8.8.8",
|
||||
// ippz_ip: "192.168.32.3",
|
||||
// ippz_mac: "3C:2D:50:20:30:3D",
|
||||
// ippz_mrwg: "192.168.32.1",
|
||||
// ippz_wangkou: "ETH1",
|
||||
// ippz_zwym: "255.255.255.192",
|
||||
// mqtt_cjd_sbmc: "有线区精雕1",
|
||||
// mqtt_cjd_tagid: "MachinePamHID910",
|
||||
// mqtt_ip: "124.70.210.118",
|
||||
// mqtt_port: "1883",
|
||||
// mqtt_qiyong: "1",
|
||||
// mqtt_qos: "qos1",
|
||||
// mqtt_retained: "0",
|
||||
// mqtt_scms: "周期上传",
|
||||
// mqtt_sczq: "5",
|
||||
// mqtt_sjgl: "采集成功",
|
||||
// mqtt_sssjfbzt: "dbzn/gateway/iotlite/2000808010",
|
||||
// mqtt_wgsn: "2000808010",
|
||||
// sbpz_jdzxz: "1",
|
||||
// sbpz_jysb: "0",
|
||||
// sbpz_mac: "3C:2D:50:20:30:3D",
|
||||
// sbpz_sbid: "有线区加工设备1",
|
||||
// sbpz_sbmc: "有线区精雕1",
|
||||
// tdpz_050F: "auto",
|
||||
// tdpz_0610: "auto",
|
||||
// tdpz_cfcs: "3",
|
||||
// tdpz_cjsylxdz: "1",
|
||||
// tdpz_cssj: "500",
|
||||
// tdpz_dxzkb: "1:1",
|
||||
// tdpz_ip: "192.168.32.2",
|
||||
// tdpz_jgsj: "500",
|
||||
// tdpz_lxsj: "0",
|
||||
// tdpz_port: "502",
|
||||
// tdpz_qdmc: "ModbusTCPClient",
|
||||
// tdpz_td: "网口",
|
||||
// tdpz_tdmc: "有线区Channel1",
|
||||
// tdpz_watchtime: "1",
|
||||
// wgpz_wgid: "LAN-BOX1",
|
||||
// wgpz_wglx: "MODBUS网关",
|
||||
// wgpz_wgmc: "有线区网关1",
|
||||
// };
|
||||
// let newArr = [
|
||||
// {
|
||||
// cskey: "MachinePamHID917",
|
||||
// csname: "主轴转速",
|
||||
// pcz: "100",
|
||||
// sdz: "2000",
|
||||
// sfbjbz: "是",
|
||||
// sfyxbz: "是",
|
||||
// sswg: "lan-box2",
|
||||
// xsws: "0",
|
||||
// },
|
||||
// {
|
||||
// cskey: "MachinePamHID910",
|
||||
// csname: "产量",
|
||||
// pcz: "5",
|
||||
// sdz: "20",
|
||||
// sfbjbz: "是",
|
||||
// sfyxbz: "是",
|
||||
// sswg: "lan-box1",
|
||||
// xsws: "0",
|
||||
// },
|
||||
// {
|
||||
// cskey: "MachinePamHID909",
|
||||
// csname: "急停状态",
|
||||
// pcz: "0",
|
||||
// sdz: "1",
|
||||
// sfbjbz: "是",
|
||||
// sfyxbz: "是",
|
||||
// sswg: "wlan-box1",
|
||||
// xsws: "0",
|
||||
// },
|
||||
// {
|
||||
// cskey: "MachinePamHID928",
|
||||
// csname: "切削速度",
|
||||
// pcz: "50",
|
||||
// sdz: "500",
|
||||
// sfbjbz: "是",
|
||||
// sfyxbz: "是",
|
||||
// sswg: "wlan-box2",
|
||||
// xsws: "0",
|
||||
// },
|
||||
// ];
|
||||
// // console.log(this.getAllGrades(arr[0].answer, obj, arr[0].r1));
|
||||
// console.log(this.getAllGrades(newArr, newArr, arr[9].r1));
|
||||
// // this.getAllGrades(arr[9].answer, newArr, arr[9].r1);
|
||||
// },
|
||||
// obj1:答案对象 obj：用户对象 r1 模块分数
|
||||
// getAllGrades(obj1, obj2, r1) {
|
||||
// var arr = [];
|
||||
// let grade = 0;
|
||||
// if (!Array.isArray(obj1)) {
|
||||
// const keys = Object.keys(obj1);
|
||||
// for (let key of keys) {
|
||||
// if (obj1[key] !== obj2[key]) {
|
||||
// arr.push({
|
||||
// [key]: {
|
||||
// answer: obj1[key],
|
||||
// user: obj2[key],
|
||||
// },
|
||||
// });
|
||||
// }
|
||||
// }
|
||||
// if (arr.length > 0) {
|
||||
// grade = 0;
|
||||
// } else {
|
||||
// grade = r1;
|
||||
// }
|
||||
// } else {
|
||||
// if (obj1.length !== obj2.length) {
|
||||
// return false;
|
||||
// }
|
||||
// let flagArr = [];
|
||||
// for (let i = 0; i < obj1.length; i++) {
|
||||
// for (let j = 0; j < obj2.length; j++) {
|
||||
// let flag = this.isArrEqual(
|
||||
// Object.values(obj1[i]),
|
||||
// Object.values(obj2[j])
|
||||
// );
|
||||
// flagArr.push(flag);
|
||||
// }
|
||||
// }
|
||||
// let counter = 0;
|
||||
// let target = true;
|
||||
// for (let a of flagArr) {
|
||||
// if (a == target) {
|
||||
// counter++;
|
||||
// }
|
||||
// }
|
||||
// if (counter == obj1.length) {
|
||||
// grade = r1;
|
||||
// console.log(grade);
|
||||
// } else {
|
||||
// grade = 0;
|
||||
// }
|
||||
// }
|
||||
// // 返回此模块分数以及错误的字段;
|
||||
// return {
|
||||
// arr,
|
||||
// grade: Number(grade),
|
||||
// };
|
||||
// },
|
||||
// isArrEqual(arr1, arr2) {
|
||||
// return (
|
||||
// arr1.length === arr2.length && arr1.every((ele) => arr2.includes(ele))
|
||||
// );
|
||||
// },
|
||||
},
|
||||
mounted() {},
|
||||
components: {},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#app {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
/* background-color: white !important; */
|
||||
}
|
||||
|
||||
.v-modal {
|
||||
position: static;
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
.el-dialog__header,
|
||||
.el-table {
|
||||
background-image: url(./assets/image/bg.png);
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.el-dialog__body {
|
||||
color: #ffffff !important;
|
||||
background-image: url(./assets/image/bg.png);
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.el-dialog__footer {
|
||||
text-align: center;
|
||||
background-image: url(./assets/image/bg.png);
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.el-form-item label {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.el-dialog,
|
||||
.el-pager li,
|
||||
.tree_menu {
|
||||
color: #ffffff;
|
||||
background-image: url(./assets/image/bg.png);
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
/* //将el-dialog__header、el-dialog__body、el-dialog__footer背景设置为透明 */
|
||||
.el-dialog__header .el-dialog__title,
|
||||
.el-dialog__headerbtn .el-dialog__close {
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
.el-dialog__header {
|
||||
color: #ffffff;
|
||||
background-image: url(./assets/image/bg.png);
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.el-dialog__body {
|
||||
color: #ffffff;
|
||||
background-image: url(./assets/image/bg.png);
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.el-dialog__footer {
|
||||
text-align: center;
|
||||
background-image: url(./assets/image/bg.png);
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.el-form-item label {
|
||||
color: white;
|
||||
}
|
||||
|
||||
// .el-button {
|
||||
// width: 80px;
|
||||
// height: 30px;
|
||||
// line-height: 0.5 !important;
|
||||
// }
|
||||
|
||||
/* .el-tree-node__content:hover {
|
||||
background-image: url(./assets/image/bg.png);
|
||||
background-size: cover;
|
||||
}
|
||||
.el-tree-node.is-current>.el-tree-node__content {
|
||||
background-image: url(./assets/image/bg.png);
|
||||
background-size: cover;
|
||||
}
|
||||
.el-tree-node:focus>.el-tree-node__content {
|
||||
background-image: url(./assets/image/bg.png);
|
||||
background-size: cover;
|
||||
} */
|
||||
|
||||
/* 弹窗 */
|
||||
</style>
|
||||
|
|
@ -0,0 +1,329 @@
|
|||
<template>
|
||||
<div id="app">
|
||||
<router-view></router-view>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Alert } from "element-ui";
|
||||
import { queryallanswer } from "./api/answer";
|
||||
export default {
|
||||
name: "App",
|
||||
data() {
|
||||
return {
|
||||
grade: 0,
|
||||
DB_IotLite_yx: [],
|
||||
CHGYWG_yx: [],
|
||||
CHGYWG_wx: [],
|
||||
DB_IotLite_wx: [],
|
||||
CKFWQ_yx: [],
|
||||
CKFWQ_wx: [],
|
||||
GYWZ_yx: [],
|
||||
GYWZ_wx: [],
|
||||
YDPZYM_wgpz: [],
|
||||
YDPZYM_wgwh: [],
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.queryallanswer();
|
||||
},
|
||||
methods: {
|
||||
// 请求正确答案
|
||||
async queryallanswer() {
|
||||
let { data } = await queryallanswer();
|
||||
console.log(JSON.parse(JSON.stringify(data.data)));
|
||||
let arr = [];
|
||||
arr = data.data;
|
||||
arr.forEach((item) => {
|
||||
if (item.mark == "DB-IotLite_yx") {
|
||||
this.DB_IotLite_yx = JSON.parse(item.answer);
|
||||
}
|
||||
if (item.mark == "CHGYWG_yx") {
|
||||
this.CHGYWG_yx = JSON.parse(item.answer);
|
||||
}
|
||||
if (item.mark == "CHGYWG_wx") {
|
||||
this.CHGYWG_wx = JSON.parse(item.answer);
|
||||
}
|
||||
if (item.mark == "DB_IotLite_wx") {
|
||||
this.DB_IotLite_wx = JSON.parse(item.answer);
|
||||
}
|
||||
if (item.mark == "CKFWQ_yx") {
|
||||
this.CKFWQ_yx = JSON.parse(item.answer);
|
||||
}
|
||||
if (item.mark == "CKFWQ_wx") {
|
||||
this.CKFWQ_wx = JSON.parse(item.answer);
|
||||
}
|
||||
if (item.mark == "GYWZ_yx") {
|
||||
this.GYWZ_yx = JSON.parse(item.answer);
|
||||
}
|
||||
if (item.mark == "GYWZ_wx") {
|
||||
this.GYWZ_wx = JSON.parse(item.answer);
|
||||
}
|
||||
if (item.mark == "YDPZYM_wgpz") {
|
||||
this.YDPZYM_wgpz = JSON.parse(item.answer);
|
||||
}
|
||||
if (item.mark == "YDPZYM_wgwh") {
|
||||
this.YDPZYM_wgwh = JSON.parse(item.answer);
|
||||
}
|
||||
});
|
||||
},
|
||||
// console.log(arr);
|
||||
// let obj = {
|
||||
// cjdpz_beilv: "2",
|
||||
// cjdpz_cjsjlx: "uint16",
|
||||
// cjdpz_dxsx: "只读131111",
|
||||
// cjdpz_jcqdz: "8195",
|
||||
// cjdpz_mc: "产量",
|
||||
// cjdpz_sjq: "4X (Holding Register)",
|
||||
// cjdpz_tagid: "MachinePamHID910",
|
||||
// cjdpz_zjx: "Null",
|
||||
// ippz_dns_by: "114.114.114.114",
|
||||
// ippz_dns_sx: "8.8.8.8",
|
||||
// ippz_ip: "192.168.32.3",
|
||||
// ippz_mac: "3C:2D:50:20:30:3D",
|
||||
// ippz_mrwg: "192.168.32.1",
|
||||
// ippz_wangkou: "ETH1",
|
||||
// ippz_zwym: "255.255.255.192",
|
||||
// mqtt_cjd_sbmc: "有线区精雕1",
|
||||
// mqtt_cjd_tagid: "MachinePamHID910",
|
||||
// mqtt_ip: "124.70.210.118",
|
||||
// mqtt_port: "1883",
|
||||
// mqtt_qiyong: "1",
|
||||
// mqtt_qos: "qos1",
|
||||
// mqtt_retained: "0",
|
||||
// mqtt_scms: "周期上传",
|
||||
// mqtt_sczq: "5",
|
||||
// mqtt_sjgl: "采集成功",
|
||||
// mqtt_sssjfbzt: "dbzn/gateway/iotlite/2000808010",
|
||||
// mqtt_wgsn: "2000808010",
|
||||
// sbpz_jdzxz: "1",
|
||||
// sbpz_jysb: "0",
|
||||
// sbpz_mac: "3C:2D:50:20:30:3D",
|
||||
// sbpz_sbid: "有线区加工设备1",
|
||||
// sbpz_sbmc: "有线区精雕1",
|
||||
// tdpz_050F: "auto",
|
||||
// tdpz_0610: "auto",
|
||||
// tdpz_cfcs: "3",
|
||||
// tdpz_cjsylxdz: "1",
|
||||
// tdpz_cssj: "500",
|
||||
// tdpz_dxzkb: "1:1",
|
||||
// tdpz_ip: "192.168.32.2",
|
||||
// tdpz_jgsj: "500",
|
||||
// tdpz_lxsj: "0",
|
||||
// tdpz_port: "502",
|
||||
// tdpz_qdmc: "ModbusTCPClient",
|
||||
// tdpz_td: "网口",
|
||||
// tdpz_tdmc: "有线区Channel1",
|
||||
// tdpz_watchtime: "1",
|
||||
// wgpz_wgid: "LAN-BOX1",
|
||||
// wgpz_wglx: "MODBUS网关",
|
||||
// wgpz_wgmc: "有线区网关1",
|
||||
// };
|
||||
// let newArr = [
|
||||
// {
|
||||
// cskey: "MachinePamHID917",
|
||||
// csname: "主轴转速",
|
||||
// pcz: "100",
|
||||
// sdz: "2000",
|
||||
// sfbjbz: "是",
|
||||
// sfyxbz: "是",
|
||||
// sswg: "lan-box2",
|
||||
// xsws: "0",
|
||||
// },
|
||||
// {
|
||||
// cskey: "MachinePamHID910",
|
||||
// csname: "产量",
|
||||
// pcz: "5",
|
||||
// sdz: "20",
|
||||
// sfbjbz: "是",
|
||||
// sfyxbz: "是",
|
||||
// sswg: "lan-box1",
|
||||
// xsws: "0",
|
||||
// },
|
||||
// {
|
||||
// cskey: "MachinePamHID909",
|
||||
// csname: "急停状态",
|
||||
// pcz: "0",
|
||||
// sdz: "1",
|
||||
// sfbjbz: "是",
|
||||
// sfyxbz: "是",
|
||||
// sswg: "wlan-box1",
|
||||
// xsws: "0",
|
||||
// },
|
||||
// {
|
||||
// cskey: "MachinePamHID928",
|
||||
// csname: "切削速度",
|
||||
// pcz: "50",
|
||||
// sdz: "500",
|
||||
// sfbjbz: "是",
|
||||
// sfyxbz: "是",
|
||||
// sswg: "wlan-box2",
|
||||
// xsws: "0",
|
||||
// },
|
||||
// ];
|
||||
// // console.log(this.getAllGrades(arr[0].answer, obj, arr[0].r1));
|
||||
// console.log(this.getAllGrades(newArr, newArr, arr[9].r1));
|
||||
// // this.getAllGrades(arr[9].answer, newArr, arr[9].r1);
|
||||
// },
|
||||
// obj1:答案对象 obj：用户对象 r1 模块分数
|
||||
// getAllGrades(obj1, obj2, r1) {
|
||||
// var arr = [];
|
||||
// let grade = 0;
|
||||
// if (!Array.isArray(obj1)) {
|
||||
// const keys = Object.keys(obj1);
|
||||
// for (let key of keys) {
|
||||
// if (obj1[key] !== obj2[key]) {
|
||||
// arr.push({
|
||||
// [key]: {
|
||||
// answer: obj1[key],
|
||||
// user: obj2[key],
|
||||
// },
|
||||
// });
|
||||
// }
|
||||
// }
|
||||
// if (arr.length > 0) {
|
||||
// grade = 0;
|
||||
// } else {
|
||||
// grade = r1;
|
||||
// }
|
||||
// } else {
|
||||
// if (obj1.length !== obj2.length) {
|
||||
// return false;
|
||||
// }
|
||||
// let flagArr = [];
|
||||
// for (let i = 0; i < obj1.length; i++) {
|
||||
// for (let j = 0; j < obj2.length; j++) {
|
||||
// let flag = this.isArrEqual(
|
||||
// Object.values(obj1[i]),
|
||||
// Object.values(obj2[j])
|
||||
// );
|
||||
// flagArr.push(flag);
|
||||
// }
|
||||
// }
|
||||
// let counter = 0;
|
||||
// let target = true;
|
||||
// for (let a of flagArr) {
|
||||
// if (a == target) {
|
||||
// counter++;
|
||||
// }
|
||||
// }
|
||||
// if (counter == obj1.length) {
|
||||
// grade = r1;
|
||||
// console.log(grade);
|
||||
// } else {
|
||||
// grade = 0;
|
||||
// }
|
||||
// }
|
||||
// // 返回此模块分数以及错误的字段;
|
||||
// return {
|
||||
// arr,
|
||||
// grade: Number(grade),
|
||||
// };
|
||||
// },
|
||||
// isArrEqual(arr1, arr2) {
|
||||
// return (
|
||||
// arr1.length === arr2.length && arr1.every((ele) => arr2.includes(ele))
|
||||
// );
|
||||
// },
|
||||
},
|
||||
mounted() {},
|
||||
components: {},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#app {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
/* background-color: white !important; */
|
||||
}
|
||||
|
||||
.v-modal {
|
||||
position: static;
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
.el-dialog__header,
|
||||
.el-table {
|
||||
background-image: url(./assets/image/bg.png);
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.el-dialog__body {
|
||||
color: #ffffff !important;
|
||||
background-image: url(./assets/image/bg.png);
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.el-dialog__footer {
|
||||
text-align: center;
|
||||
background-image: url(./assets/image/bg.png);
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.el-form-item label {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.el-dialog,
|
||||
.el-pager li,
|
||||
.tree_menu {
|
||||
color: #ffffff;
|
||||
background-image: url(./assets/image/bg.png);
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
/* //将el-dialog__header、el-dialog__body、el-dialog__footer背景设置为透明 */
|
||||
.el-dialog__header .el-dialog__title,
|
||||
.el-dialog__headerbtn .el-dialog__close {
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
.el-dialog__header {
|
||||
color: #ffffff;
|
||||
background-image: url(./assets/image/bg.png);
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.el-dialog__body {
|
||||
color: #ffffff;
|
||||
background-image: url(./assets/image/bg.png);
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.el-dialog__footer {
|
||||
text-align: center;
|
||||
background-image: url(./assets/image/bg.png);
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.el-form-item label {
|
||||
color: white;
|
||||
}
|
||||
|
||||
// .el-button {
|
||||
// width: 80px;
|
||||
// height: 30px;
|
||||
// line-height: 0.5 !important;
|
||||
// }
|
||||
|
||||
/* .el-tree-node__content:hover {
|
||||
background-image: url(./assets/image/bg.png);
|
||||
background-size: cover;
|
||||
}
|
||||
.el-tree-node.is-current>.el-tree-node__content {
|
||||
background-image: url(./assets/image/bg.png);
|
||||
background-size: cover;
|
||||
}
|
||||
.el-tree-node:focus>.el-tree-node__content {
|
||||
background-image: url(./assets/image/bg.png);
|
||||
background-size: cover;
|
||||
} */
|
||||
|
||||
/* 弹窗 */
|
||||
</style>
|
||||
|
|
@ -0,0 +1,191 @@
|
|||
<template>
|
||||
<div>
|
||||
<div>
|
||||
<el-dialog title="新建网关" :visible.sync="outerVisible" width="382px" v-loading="loading">
|
||||
<el-form :model="formData" :rules="rules" ref="formData" label-width="85px" class="demo-ruleForm">
|
||||
<el-form-item label="网关名称:" prop="wgpz_wgmc">
|
||||
<el-select v-model="formData.wgpz_wgmc" placeholder="有线区网关1" style="width: 200px">
|
||||
<el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="网关ID:" prop="wgpz_wgid">
|
||||
<el-select v-model="formData.wgpz_wgid" placeholder="LAN-BOX1" style="width: 200px">
|
||||
<el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="网关类型:" prop="wgpz_wglx">
|
||||
<el-select v-model="formData.wgpz_wglx" placeholder="lot Life 网关" style="width: 200px">
|
||||
<el-option v-for="item in options3" :key="item.value" :label="item.label" :value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<el-dialog width="382px" title="系统提示" :visible.sync="innerVisible" append-to-body>
|
||||
<p class="inner_content" style="color: #fff !important">
|
||||
请确认选择的网关类型与网关实体一致:否则该工程无法下载至实体网关
|
||||
</p>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="innerConfirm('formData')">确定</el-button>
|
||||
<el-button @click="innerVisible = false">取 消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
<div slot="footer" class="dialog-footer-outer">
|
||||
<el-button type="primary" @click="saveInfo('formData')">保存</el-button>
|
||||
<el-button @click="outerVisible = false">取 消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { SaveUserAnswer, GetUserAnswer } from "@/api/user";
|
||||
export default {
|
||||
name: "DataAcquire",
|
||||
|
||||
data() {
|
||||
return {
|
||||
loading: false,
|
||||
options1: [
|
||||
{
|
||||
value: "有线区网关1",
|
||||
label: "有线区网关1",
|
||||
},
|
||||
{
|
||||
value: "无线区网关1",
|
||||
label: "无线区网关1",
|
||||
},
|
||||
],
|
||||
options2: [
|
||||
{
|
||||
value: "LAN-BOX1",
|
||||
label: "LAN-BOX1",
|
||||
},
|
||||
{
|
||||
value: "WLAN-BOX1",
|
||||
label: "WLAN-BOX1",
|
||||
},
|
||||
],
|
||||
options3: [
|
||||
{
|
||||
value: "loT Lite网关",
|
||||
label: "loT Lite网关",
|
||||
},
|
||||
{
|
||||
value: "MODBUS网关",
|
||||
label: "MODBUS网关",
|
||||
},
|
||||
{
|
||||
value: "BACNET网关",
|
||||
label: "BACNET网关",
|
||||
},
|
||||
{
|
||||
value: "OPC UA网关",
|
||||
label: "OPC UA网关",
|
||||
},
|
||||
{
|
||||
value: "OPC DA网关",
|
||||
label: "OPC DA网关",
|
||||
},
|
||||
{
|
||||
value: "loT网关",
|
||||
label: "loT网关",
|
||||
},
|
||||
],
|
||||
value: "",
|
||||
formData: {
|
||||
wgpz_wgmc: "有线区网关1",
|
||||
wgpz_wgid: "LAN-BOX1",
|
||||
wgpz_wglx: "loT网关",
|
||||
},
|
||||
rules: {
|
||||
wgpz_wgmc: [
|
||||
{ required: true, message: "请选择网关名称", trigger: "blur" },
|
||||
],
|
||||
wgpz_wgid: [
|
||||
{ required: true, message: "请选择网关id", trigger: "blur" },
|
||||
],
|
||||
wgpz_wglx: [
|
||||
{ required: true, message: "请选择网关类型", trigger: "blur" },
|
||||
],
|
||||
},
|
||||
outerVisible: true,
|
||||
innerVisible: false,
|
||||
};
|
||||
},
|
||||
|
||||
mounted() { },
|
||||
|
||||
methods: {
|
||||
saveInfo(formName) {
|
||||
this.$refs[formName].validate((valid) => {
|
||||
if (valid) {
|
||||
// alert('submit!');
|
||||
this.innerVisible = true;
|
||||
} else {
|
||||
console.log("error submit!!");
|
||||
return false;
|
||||
}
|
||||
});
|
||||
},
|
||||
async innerConfirm() {
|
||||
this.outerVisible = false;
|
||||
this.innerVisible = false;
|
||||
let datas = sessionStorage.getItem("DB-IotLite_wx");
|
||||
console.log(JSON.parse(datas));
|
||||
this.formdata = { ...JSON.parse(datas), ...this.formdata };
|
||||
console.log(this.formdata);
|
||||
let res = await SaveUserAnswer({
|
||||
mark: "DB-IotLite_wx",
|
||||
user_id: "USER202307301109254198",
|
||||
mark_value: JSON.stringify(this.formdata),
|
||||
});
|
||||
if (res.status == 200) {
|
||||
this.$message({
|
||||
message: '保存成功',
|
||||
type: 'success'
|
||||
});
|
||||
}
|
||||
console.log(res);
|
||||
console.log(JSON.parse(res.data.data.mark_value));
|
||||
sessionStorage.setItem("DB-IotLite_wx", JSON.stringify(this.formdata));
|
||||
this.$router.replace("/channelconfig");
|
||||
},
|
||||
async getUserAnswer() {
|
||||
this.loading = true;
|
||||
let res2 = await GetUserAnswer({
|
||||
mark: "DB-IotLite_yx",
|
||||
user_id: "USER202307301109254198",
|
||||
});
|
||||
this.loading = false;
|
||||
console.log(res2);
|
||||
let res3 = JSON.parse(res2.data.data.mark_value);
|
||||
this.formData.wgpz_wgid = res3.wgpz_wgid;
|
||||
console.log(this.formData.wgpz_wgid);
|
||||
this.formData.wgpz_wgmc = res3.wgpz_wgmc;
|
||||
this.formData.wgpz_wglx = res3.wgpz_wglx;
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.getUserAnswer();
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.data_acquire {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.inner_content {
|
||||
margin-left: 30px;
|
||||
width: 280px;
|
||||
height: 40px;
|
||||
// color: rgba(255, 255, 255, 0);
|
||||
font-size: 14px;
|
||||
text-align: left;
|
||||
font-family: "SourceHanSansSC-regular";
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,191 @@
|
|||
<template>
|
||||
<div>
|
||||
<div>
|
||||
<el-dialog title="新建网关" :visible.sync="outerVisible" width="382px" v-loading="loading">
|
||||
<el-form :model="formData" :rules="rules" ref="formData" label-width="85px" class="demo-ruleForm">
|
||||
<el-form-item label="网关名称:" prop="wgpz_wgmc">
|
||||
<el-select v-model="formData.wgpz_wgmc" placeholder="有线区网关1" style="width: 200px">
|
||||
<el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="网关ID:" prop="wgpz_wgid">
|
||||
<el-select v-model="formData.wgpz_wgid" placeholder="LAN-BOX1" style="width: 200px">
|
||||
<el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="网关类型:" prop="wgpz_wglx">
|
||||
<el-select v-model="formData.wgpz_wglx" placeholder="lot Life 网关" style="width: 200px">
|
||||
<el-option v-for="item in options3" :key="item.value" :label="item.label" :value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<el-dialog width="382px" title="系统提示" :visible.sync="innerVisible" append-to-body>
|
||||
<p class="inner_content" style="color: #fff !important">
|
||||
请确认选择的网关类型与网关实体一致:否则该工程无法下载至实体网关
|
||||
</p>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="innerConfirm('formData')">确定</el-button>
|
||||
<el-button @click="innerVisible = false">取 消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
<div slot="footer" class="dialog-footer-outer">
|
||||
<el-button type="primary" @click="saveInfo('formData')">保存</el-button>
|
||||
<el-button @click="outerVisible = false">取 消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { SaveUserAnswer, GetUserAnswer } from "@/api/user";
|
||||
export default {
|
||||
name: "DataAcquire",
|
||||
|
||||
data() {
|
||||
return {
|
||||
loading: false,
|
||||
options1: [
|
||||
{
|
||||
value: "有线区网关1",
|
||||
label: "有线区网关1",
|
||||
},
|
||||
{
|
||||
value: "无线区网关1",
|
||||
label: "无线区网关1",
|
||||
},
|
||||
],
|
||||
options2: [
|
||||
{
|
||||
value: "LAN-BOX1",
|
||||
label: "LAN-BOX1",
|
||||
},
|
||||
{
|
||||
value: "WLAN-BOX1",
|
||||
label: "WLAN-BOX1",
|
||||
},
|
||||
],
|
||||
options3: [
|
||||
{
|
||||
value: "loT Lite网关",
|
||||
label: "loT Lite网关",
|
||||
},
|
||||
{
|
||||
value: "MODBUS网关",
|
||||
label: "MODBUS网关",
|
||||
},
|
||||
{
|
||||
value: "BACNET网关",
|
||||
label: "BACNET网关",
|
||||
},
|
||||
{
|
||||
value: "OPC UA网关",
|
||||
label: "OPC UA网关",
|
||||
},
|
||||
{
|
||||
value: "OPC DA网关",
|
||||
label: "OPC DA网关",
|
||||
},
|
||||
{
|
||||
value: "loT网关",
|
||||
label: "loT网关",
|
||||
},
|
||||
],
|
||||
value: "",
|
||||
formData: {
|
||||
wgpz_wgmc: "有线区网关1",
|
||||
wgpz_wgid: "LAN-BOX1",
|
||||
wgpz_wglx: "loT网关",
|
||||
},
|
||||
rules: {
|
||||
wgpz_wgmc: [
|
||||
{ required: true, message: "请选择网关名称", trigger: "blur" },
|
||||
],
|
||||
wgpz_wgid: [
|
||||
{ required: true, message: "请选择网关id", trigger: "blur" },
|
||||
],
|
||||
wgpz_wglx: [
|
||||
{ required: true, message: "请选择网关类型", trigger: "blur" },
|
||||
],
|
||||
},
|
||||
outerVisible: true,
|
||||
innerVisible: false,
|
||||
};
|
||||
},
|
||||
|
||||
mounted() { },
|
||||
|
||||
methods: {
|
||||
saveInfo(formName) {
|
||||
this.$refs[formName].validate((valid) => {
|
||||
if (valid) {
|
||||
// alert('submit!');
|
||||
this.innerVisible = true;
|
||||
} else {
|
||||
console.log("error submit!!");
|
||||
return false;
|
||||
}
|
||||
});
|
||||
},
|
||||
async innerConfirm() {
|
||||
this.outerVisible = false;
|
||||
this.innerVisible = false;
|
||||
let datas = sessionStorage.getItem("DB-IotLite_wx");
|
||||
console.log(JSON.parse(datas));
|
||||
this.formdata = { ...JSON.parse(datas), ...this.formdata };
|
||||
console.log(this.formdata);
|
||||
let res = await SaveUserAnswer({
|
||||
mark: "DB-IotLite_wx",
|
||||
user_id: "USER202307301109254198",
|
||||
mark_value: JSON.stringify(this.formdata),
|
||||
});
|
||||
if (res.status == 200) {
|
||||
this.$message({
|
||||
message: '保存成功',
|
||||
type: 'success'
|
||||
});
|
||||
}
|
||||
console.log(res);
|
||||
console.log(JSON.parse(res.data.data.mark_value));
|
||||
sessionStorage.setItem("DB-IotLite_wx", JSON.stringify(this.formdata));
|
||||
this.$router.replace("/channelconfig");
|
||||
},
|
||||
async getUserAnswer() {
|
||||
this.loading = true;
|
||||
let res2 = await GetUserAnswer({
|
||||
mark: "DB-IotLite_yx",
|
||||
user_id: "USER202307301109254198",
|
||||
});
|
||||
this.loading = false;
|
||||
console.log(res2);
|
||||
let res3 = JSON.parse(res2.data.data.mark_value);
|
||||
this.formData.wgpz_wgid = res3.wgpz_wgid;
|
||||
console.log(this.formData.wgpz_wgid);
|
||||
this.formData.wgpz_wgmc = res3.wgpz_wgmc;
|
||||
this.formData.wgpz_wglx = res3.wgpz_wglx;
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.getUserAnswer();
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.data_acquire {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.inner_content {
|
||||
margin-left: 30px;
|
||||
width: 280px;
|
||||
height: 40px;
|
||||
// color: rgba(255, 255, 255, 0);
|
||||
font-size: 14px;
|
||||
text-align: left;
|
||||
font-family: "SourceHanSansSC-regular";
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,193 @@
|
|||
<template>
|
||||
<div>
|
||||
<div>
|
||||
<el-dialog title="新建网关" :visible.sync="outerVisible" width="382px" v-loading="loading">
|
||||
<el-form :model="formData" :rules="rules" ref="formData" label-width="85px" class="demo-ruleForm">
|
||||
<el-form-item label="网关名称:" prop="wgpz_wgmc">
|
||||
<el-select v-model="formData.wgpz_wgmc" placeholder="有线区网关1" style="width: 200px">
|
||||
<el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="网关ID:" prop="wgpz_wgid">
|
||||
<el-select v-model="formData.wgpz_wgid" placeholder="LAN-BOX1" style="width: 200px">
|
||||
<el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="网关类型:" prop="wgpz_wglx">
|
||||
<el-select v-model="formData.wgpz_wglx" placeholder="lot Life 网关" style="width: 200px">
|
||||
<el-option v-for="item in options3" :key="item.value" :label="item.label" :value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<el-dialog width="382px" title="系统提示" :visible.sync="innerVisible" append-to-body>
|
||||
<p class="inner_content" style="color: #fff !important">
|
||||
请确认选择的网关类型与网关实体一致:否则该工程无法下载至实体网关
|
||||
</p>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="innerConfirm('formData')">确定</el-button>
|
||||
<el-button @click="innerVisible = false">取 消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
<div slot="footer" class="dialog-footer-outer">
|
||||
<el-button type="primary" @click="saveInfo('formData')">保存</el-button>
|
||||
<el-button @click="outerVisible = false">取 消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { SaveUserAnswer, GetUserAnswer } from "@/api/user";
|
||||
export default {
|
||||
name: "TestDataAcquisition",
|
||||
|
||||
data() {
|
||||
return {
|
||||
loading: false,
|
||||
options1: [
|
||||
{
|
||||
value: "有线区网关1",
|
||||
label: "有线区网关1",
|
||||
},
|
||||
{
|
||||
value: "无线区网关1",
|
||||
label: "无线区网关1",
|
||||
},
|
||||
],
|
||||
options2: [
|
||||
{
|
||||
value: "LAN-BOX1",
|
||||
label: "LAN-BOX1",
|
||||
},
|
||||
{
|
||||
value: "WLAN-BOX1",
|
||||
label: "WLAN-BOX1",
|
||||
},
|
||||
],
|
||||
options3: [
|
||||
{
|
||||
value: "loT Lite网关",
|
||||
label: "loT Lite网关",
|
||||
},
|
||||
{
|
||||
value: "MODBUS网关",
|
||||
label: "MODBUS网关",
|
||||
},
|
||||
{
|
||||
value: "BACNET网关",
|
||||
label: "BACNET网关",
|
||||
},
|
||||
{
|
||||
value: "OPC UA网关",
|
||||
label: "OPC UA网关",
|
||||
},
|
||||
{
|
||||
value: "OPC DA网关",
|
||||
label: "OPC DA网关",
|
||||
},
|
||||
{
|
||||
value: "loT网关",
|
||||
label: "loT网关",
|
||||
},
|
||||
],
|
||||
value: "",
|
||||
formData: {
|
||||
wgpz_wgmc: "有线区网关1",
|
||||
wgpz_wgid: "LAN-BOX1",
|
||||
wgpz_wglx: "loT网关",
|
||||
},
|
||||
rules: {
|
||||
wgpz_wgmc: [
|
||||
{ required: true, message: "请选择网关名称", trigger: "blur" },
|
||||
],
|
||||
wgpz_wgid: [
|
||||
{ required: true, message: "请选择网关id", trigger: "blur" },
|
||||
],
|
||||
wgpz_wglx: [
|
||||
{ required: true, message: "请选择网关类型", trigger: "blur" },
|
||||
],
|
||||
},
|
||||
outerVisible: true,
|
||||
innerVisible: false,
|
||||
};
|
||||
},
|
||||
|
||||
mounted() { },
|
||||
|
||||
methods: {
|
||||
saveInfo(formName) {
|
||||
this.$refs[formName].validate((valid) => {
|
||||
if (valid) {
|
||||
// alert('submit!');
|
||||
this.innerVisible = true;
|
||||
} else {
|
||||
console.log("error submit!!");
|
||||
return false;
|
||||
}
|
||||
});
|
||||
},
|
||||
async innerConfirm() {
|
||||
this.outerVisible = false;
|
||||
this.innerVisible = false;
|
||||
let datas = sessionStorage.getItem("DB-IotLite_yx");
|
||||
console.log(JSON.parse(datas));
|
||||
this.formdata = { ...JSON.parse(datas), ...this.formdata };
|
||||
console.log(this.formdata);
|
||||
let res = await SaveUserAnswer({
|
||||
mark: "DB-IotLite_yx",
|
||||
user_id: "USER202307301109254198",
|
||||
mark_value: JSON.stringify(this.formdata),
|
||||
});
|
||||
if (res.status == 200) {
|
||||
this.$message({
|
||||
message: '保存成功',
|
||||
type: 'success'
|
||||
});
|
||||
}
|
||||
console.log(res);
|
||||
console.log(JSON.parse(res.data.data.mark_value));
|
||||
sessionStorage.setItem("DB-IotLite_yx", JSON.stringify(this.formdata));
|
||||
this.$router.replace("/channelconfig");
|
||||
},
|
||||
async getUserAnswer() {
|
||||
this.loading = true;
|
||||
let res2 = await GetUserAnswer({
|
||||
mark: "DB-IotLite_yx",
|
||||
user_id: "USER202307301109254198",
|
||||
});
|
||||
this.loading = false;
|
||||
console.log(res2);
|
||||
let res3 = JSON.parse(res2.data.data.mark_value);
|
||||
if (res3.wgpz_wgid) {
|
||||
this.formData.wgpz_wgid = res3.wgpz_wgid;
|
||||
console.log(this.formData.wgpz_wgid);
|
||||
this.formData.wgpz_wgmc = res3.wgpz_wgmc;
|
||||
this.formData.wgpz_wglx = res3.wgpz_wglx;
|
||||
}
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.getUserAnswer();
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.data_acquire {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.inner_content {
|
||||
margin-left: 30px;
|
||||
width: 280px;
|
||||
height: 40px;
|
||||
// color: rgba(255, 255, 255, 0);
|
||||
font-size: 14px;
|
||||
text-align: left;
|
||||
font-family: "SourceHanSansSC-regular";
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,193 @@
|
|||
<template>
|
||||
<div>
|
||||
<div>
|
||||
<el-dialog title="新建网关" :visible.sync="outerVisible" width="382px" v-loading="loading">
|
||||
<el-form :model="formData" :rules="rules" ref="formData" label-width="85px" class="demo-ruleForm">
|
||||
<el-form-item label="网关名称:" prop="wgpz_wgmc">
|
||||
<el-select v-model="formData.wgpz_wgmc" placeholder="有线区网关1" style="width: 200px">
|
||||
<el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="网关ID:" prop="wgpz_wgid">
|
||||
<el-select v-model="formData.wgpz_wgid" placeholder="LAN-BOX1" style="width: 200px">
|
||||
<el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="网关类型:" prop="wgpz_wglx">
|
||||
<el-select v-model="formData.wgpz_wglx" placeholder="lot Life 网关" style="width: 200px">
|
||||
<el-option v-for="item in options3" :key="item.value" :label="item.label" :value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<el-dialog width="382px" title="系统提示" :visible.sync="innerVisible" append-to-body>
|
||||
<p class="inner_content" style="color: #fff !important">
|
||||
请确认选择的网关类型与网关实体一致:否则该工程无法下载至实体网关
|
||||
</p>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="innerConfirm('formData')">确定</el-button>
|
||||
<el-button @click="innerVisible = false">取 消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
<div slot="footer" class="dialog-footer-outer">
|
||||
<el-button type="primary" @click="saveInfo('formData')">保存</el-button>
|
||||
<el-button @click="outerVisible = false">取 消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { SaveUserAnswer, GetUserAnswer } from "@/api/user";
|
||||
export default {
|
||||
name: "TestDataAcquisition",
|
||||
|
||||
data() {
|
||||
return {
|
||||
loading: false,
|
||||
options1: [
|
||||
{
|
||||
value: "有线区网关1",
|
||||
label: "有线区网关1",
|
||||
},
|
||||
{
|
||||
value: "无线区网关1",
|
||||
label: "无线区网关1",
|
||||
},
|
||||
],
|
||||
options2: [
|
||||
{
|
||||
value: "LAN-BOX1",
|
||||
label: "LAN-BOX1",
|
||||
},
|
||||
{
|
||||
value: "WLAN-BOX1",
|
||||
label: "WLAN-BOX1",
|
||||
},
|
||||
],
|
||||
options3: [
|
||||
{
|
||||
value: "loT Lite网关",
|
||||
label: "loT Lite网关",
|
||||
},
|
||||
{
|
||||
value: "MODBUS网关",
|
||||
label: "MODBUS网关",
|
||||
},
|
||||
{
|
||||
value: "BACNET网关",
|
||||
label: "BACNET网关",
|
||||
},
|
||||
{
|
||||
value: "OPC UA网关",
|
||||
label: "OPC UA网关",
|
||||
},
|
||||
{
|
||||
value: "OPC DA网关",
|
||||
label: "OPC DA网关",
|
||||
},
|
||||
{
|
||||
value: "loT网关",
|
||||
label: "loT网关",
|
||||
},
|
||||
],
|
||||
value: "",
|
||||
formData: {
|
||||
wgpz_wgmc: "有线区网关1",
|
||||
wgpz_wgid: "LAN-BOX1",
|
||||
wgpz_wglx: "loT网关",
|
||||
},
|
||||
rules: {
|
||||
wgpz_wgmc: [
|
||||
{ required: true, message: "请选择网关名称", trigger: "blur" },
|
||||
],
|
||||
wgpz_wgid: [
|
||||
{ required: true, message: "请选择网关id", trigger: "blur" },
|
||||
],
|
||||
wgpz_wglx: [
|
||||
{ required: true, message: "请选择网关类型", trigger: "blur" },
|
||||
],
|
||||
},
|
||||
outerVisible: true,
|
||||
innerVisible: false,
|
||||
};
|
||||
},
|
||||
|
||||
mounted() { },
|
||||
|
||||
methods: {
|
||||
saveInfo(formName) {
|
||||
this.$refs[formName].validate((valid) => {
|
||||
if (valid) {
|
||||
// alert('submit!');
|
||||
this.innerVisible = true;
|
||||
} else {
|
||||
console.log("error submit!!");
|
||||
return false;
|
||||
}
|
||||
});
|
||||
},
|
||||
async innerConfirm() {
|
||||
this.outerVisible = false;
|
||||
this.innerVisible = false;
|
||||
let datas = sessionStorage.getItem("DB-IotLite_yx");
|
||||
console.log(JSON.parse(datas));
|
||||
this.formdata = { ...JSON.parse(datas), ...this.formdata };
|
||||
console.log(this.formdata);
|
||||
let res = await SaveUserAnswer({
|
||||
mark: "DB-IotLite_yx",
|
||||
user_id: "USER202307301109254198",
|
||||
mark_value: JSON.stringify(this.formdata),
|
||||
});
|
||||
if (res.status == 200) {
|
||||
this.$message({
|
||||
message: '保存成功',
|
||||
type: 'success'
|
||||
});
|
||||
}
|
||||
console.log(res);
|
||||
console.log(JSON.parse(res.data.data.mark_value));
|
||||
sessionStorage.setItem("DB-IotLite_yx", JSON.stringify(this.formdata));
|
||||
this.$router.replace("/channelconfig");
|
||||
},
|
||||
async getUserAnswer() {
|
||||
this.loading = true;
|
||||
let res2 = await GetUserAnswer({
|
||||
mark: "DB-IotLite_yx",
|
||||
user_id: "USER202307301109254198",
|
||||
});
|
||||
this.loading = false;
|
||||
console.log(res2);
|
||||
let res3 = JSON.parse(res2.data.data.mark_value);
|
||||
if (res3.wgpz_wgid) {
|
||||
this.formData.wgpz_wgid = res3.wgpz_wgid;
|
||||
console.log(this.formData.wgpz_wgid);
|
||||
this.formData.wgpz_wgmc = res3.wgpz_wgmc;
|
||||
this.formData.wgpz_wglx = res3.wgpz_wglx;
|
||||
}
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.getUserAnswer();
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.data_acquire {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.inner_content {
|
||||
margin-left: 30px;
|
||||
width: 280px;
|
||||
height: 40px;
|
||||
// color: rgba(255, 255, 255, 0);
|
||||
font-size: 14px;
|
||||
text-align: left;
|
||||
font-family: "SourceHanSansSC-regular";
|
||||
}
|
||||
</style>
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,927 @@
|
|||
<!-- 网关通道 -->
|
||||
<template>
|
||||
<div>
|
||||
<!-- v-click-outside="closeMenu" -->
|
||||
<div>
|
||||
<div class="tree_menu" v-show="dialogVisible">
|
||||
<el-tree
|
||||
:data="$store.state.tree"
|
||||
:props="defaultProps"
|
||||
default-expand-all
|
||||
@node-contextmenu="rightClick"
|
||||
@node-click="treeNodeClick"
|
||||
ref="tree"
|
||||
>
|
||||
<span class="custom-tree-node" slot-scope="{ node, data }">
|
||||
<template v-if="data.editing == 1">
|
||||
<el-button
|
||||
type="mini"
|
||||
v-if="flag"
|
||||
style="right: 50px; top: 0; position: absolute; border: none"
|
||||
@click.stop="done"
|
||||
>完成</el-button
|
||||
>
|
||||
<el-button
|
||||
type="mini"
|
||||
style="right: 0; top: 0; position: absolute; border: none"
|
||||
@click.stop="edit"
|
||||
>编辑</el-button
|
||||
>
|
||||
<span v-if="!flag">{{ data.label }}</span>
|
||||
<el-input
|
||||
v-else
|
||||
style="width: 150px"
|
||||
v-model="gateway"
|
||||
></el-input>
|
||||
</template>
|
||||
<template v-else>{{ data.label }}</template>
|
||||
</span>
|
||||
</el-tree>
|
||||
<!-- 树形控件右键组件 -->
|
||||
<div v-show="menuShow" class="tree_rightmenu" :style="{ ...rightMenu }">
|
||||
<el-menu
|
||||
class="el-menu-vertical-demo"
|
||||
@select="selectMenuNode"
|
||||
default-active="#0078FE"
|
||||
>
|
||||
<el-menu-item id="menuitem" index="1" style="font-size: 12px">
|
||||
<span slot="title">新建通道</span>
|
||||
</el-menu-item>
|
||||
<el-menu-item index="2" style="font-size: 12px">
|
||||
<span slot="title">取 消</span>
|
||||
</el-menu-item>
|
||||
</el-menu>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pas_params">
|
||||
<el-dialog
|
||||
title="通道参数设置"
|
||||
:visible.sync="add_passage"
|
||||
width="765px"
|
||||
v-loading="Loading"
|
||||
>
|
||||
<el-form
|
||||
:model="FormData"
|
||||
:label-position="labelPosition"
|
||||
:rules="rules"
|
||||
ref="ruleForm"
|
||||
>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item
|
||||
label="通道名称:"
|
||||
:label-width="formLabelWidth"
|
||||
prop="tdpz_tdmc"
|
||||
>
|
||||
<el-select
|
||||
v-model="FormData.tdpz_tdmc"
|
||||
placeholder=""
|
||||
style="width: 200px; height: 30px"
|
||||
>
|
||||
<el-option
|
||||
v-for="(item, index) in options1"
|
||||
:key="index"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item
|
||||
label="通道:"
|
||||
:label-width="formLabelWidth"
|
||||
prop="tdpz_td"
|
||||
>
|
||||
<el-select
|
||||
v-model="FormData.tdpz_td"
|
||||
placeholder=""
|
||||
style="width: 200px; height: 30px"
|
||||
>
|
||||
<el-option
|
||||
v-for="(item, index) in options2"
|
||||
:key="index"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item
|
||||
label="驱动名称:"
|
||||
:label-width="formLabelWidth"
|
||||
prop="tdpz_qdmc"
|
||||
>
|
||||
<el-row>
|
||||
<el-col :span="18">
|
||||
<el-input
|
||||
v-model="FormData.tdpz_qdmc"
|
||||
placeholder=""
|
||||
style="width: 200px; height: 30px"
|
||||
></el-input>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-button
|
||||
style="width: 50px; height: 30px"
|
||||
@click="getDriveName"
|
||||
>...</el-button
|
||||
>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item
|
||||
label="IP地址:"
|
||||
:label-width="formLabelWidth"
|
||||
prop="tdpz_ip"
|
||||
>
|
||||
<el-row>
|
||||
<el-col :span="5">
|
||||
<el-input
|
||||
v-model="tdpz_ip1"
|
||||
style="width: 43px; height: 30px"
|
||||
></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1" style="color: #fff">. </el-col>
|
||||
<el-col :span="5">
|
||||
<el-input
|
||||
v-model="tdpz_ip2"
|
||||
style="width: 43px; height: 30px"
|
||||
></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1" style="color: #fff">.</el-col>
|
||||
<el-col :span="5">
|
||||
<el-input
|
||||
v-model="tdpz_ip3"
|
||||
style="width: 43px; height: 30px"
|
||||
></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1" style="color: #fff">.</el-col>
|
||||
<el-col :span="5">
|
||||
<el-input
|
||||
v-model="tdpz_ip4"
|
||||
style="width: 43px; height: 30px"
|
||||
></el-input>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item
|
||||
label="端口号:"
|
||||
:label-width="formLabelWidth"
|
||||
prop="tdpz_port"
|
||||
>
|
||||
<el-input
|
||||
v-model="FormData.tdpz_port"
|
||||
placeholder=""
|
||||
style="width: 200px; height: 30px"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item
|
||||
label="超过时间(ms):"
|
||||
:label-width="formLabelWidth"
|
||||
prop="tdpz_cssj"
|
||||
>
|
||||
<el-input
|
||||
v-model="FormData.tdpz_cssj"
|
||||
placeholder=""
|
||||
style="width: 200px; height: 30px"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item
|
||||
label="间隔时间(ms):"
|
||||
:label-width="formLabelWidth"
|
||||
prop="tdpz_jgsj"
|
||||
>
|
||||
<el-input
|
||||
v-model="FormData.tdpz_jgsj"
|
||||
placeholder=""
|
||||
style="width: 200px; height: 30px"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item
|
||||
label="轮询时间(ms):"
|
||||
:label-width="formLabelWidth"
|
||||
prop="tdpz_lxsj"
|
||||
>
|
||||
<el-input
|
||||
v-model="FormData.tdpz_lxsj"
|
||||
placeholder=""
|
||||
style="width: 200px; height: 30px"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item
|
||||
label="重复次数:"
|
||||
:label-width="formLabelWidth"
|
||||
prop="tdpz_cfcs"
|
||||
>
|
||||
<el-input
|
||||
v-model="FormData.tdpz_cfcs"
|
||||
placeholder=""
|
||||
style="width: 200px; height: 30px"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<div class="super_parmams">
|
||||
<h3>高级参数</h3>
|
||||
<div>
|
||||
<i class="el-icon-caret-bottom" v-if="is_retract"></i>
|
||||
<i class="el-icon-caret-top" v-else="is_retract"></i>
|
||||
<el-button
|
||||
type="text"
|
||||
plain
|
||||
@click="getRetract"
|
||||
style="
|
||||
width: 28px;
|
||||
border: none;
|
||||
color: rgba(16, 16, 16, 1);
|
||||
font-size: 14px;
|
||||
text-align: left;
|
||||
"
|
||||
>
|
||||
收起</el-button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div class="super_con" v-show="is_retract">
|
||||
<el-form
|
||||
:label-position="labelPosition"
|
||||
:rules="rules"
|
||||
ref="ruleForm"
|
||||
>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item>
|
||||
<el-checkbox v-model="FormData.tdpz_watchtime"
|
||||
>watch time(s)</el-checkbox
|
||||
>
|
||||
<el-input
|
||||
v-model="input1"
|
||||
placeholder=""
|
||||
style="width: 200px; height: 30px"
|
||||
:disabled="isdisabled"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item>
|
||||
<el-checkbox v-model="FormData.tdpz_cjsylxdz"
|
||||
>采集使用连续地址</el-checkbox
|
||||
>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="读写占空比:" :label-width="formLabelWidth">
|
||||
<el-row>
|
||||
<el-col :span="10">
|
||||
<el-input
|
||||
v-model="tdpz_dxzkb1"
|
||||
style="width: 91px; height: 30px"
|
||||
></el-input>
|
||||
</el-col>
|
||||
<el-col :span="4">: </el-col>
|
||||
<el-col :span="10">
|
||||
<el-input
|
||||
v-model="tdpz_dxzkb2"
|
||||
style="width: 91px; height: 30px"
|
||||
></el-input>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="05/0F:" :label-width="formLabelWidth">
|
||||
<el-row>
|
||||
<el-col :span="8"
|
||||
><el-radio v-model="FormData.tdpz_050F" label="auto"
|
||||
>auto</el-radio
|
||||
></el-col
|
||||
>
|
||||
<el-col :span="8"
|
||||
><el-radio v-model="FormData.tdpz_050F" label="05"
|
||||
>05</el-radio
|
||||
></el-col
|
||||
>
|
||||
<el-col :span="8"
|
||||
><el-radio v-model="FormData.tdpz_050F" label="0F"
|
||||
>0F</el-radio
|
||||
></el-col
|
||||
>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="06/10:" :label-width="formLabelWidth">
|
||||
<el-row>
|
||||
<el-col :span="8"
|
||||
><el-radio v-model="FormData.tdpz_0610" label="auto"
|
||||
>auto</el-radio
|
||||
></el-col
|
||||
>
|
||||
<el-col :span="8"
|
||||
><el-radio v-model="FormData.tdpz_0610" label="06"
|
||||
>06</el-radio
|
||||
></el-col
|
||||
>
|
||||
<el-col :span="8"
|
||||
><el-radio v-model="FormData.tdpz_0610" label="10"
|
||||
>10</el-radio
|
||||
></el-col
|
||||
>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</div>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="saveGate">保 存</el-button>
|
||||
<el-button @click="add_passage = false">取 消</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
<div class="drvieName_All" v-show="diag_drive">
|
||||
<div class="title">
|
||||
<p class="title_l">协议选择</p>
|
||||
<i class="el-icon-close title_r" @click="diag_drive = false"></i>
|
||||
</div>
|
||||
<el-divider></el-divider>
|
||||
<el-tree
|
||||
:data="datas2"
|
||||
:props="defaultProps"
|
||||
@node-click="handleDetailClick"
|
||||
default-expand-all
|
||||
></el-tree>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { SaveUserAnswer, GetUserAnswer } from "@/api/user";
|
||||
import { Loading } from "element-ui";
|
||||
|
||||
export default {
|
||||
name: "TestTreeView",
|
||||
|
||||
data() {
|
||||
return {
|
||||
flag: false,
|
||||
gateway: JSON.parse(localStorage.getItem("tree"))[0].label,
|
||||
FormData: {
|
||||
tdpz_tdmc: "有线区Channel1",
|
||||
tdpz_td: "网口",
|
||||
tdpz_qdmc: "ModbusTCPClient",
|
||||
tdpz_port: "",
|
||||
tdpz_cssj: "",
|
||||
tdpz_jgsj: "",
|
||||
tdpz_lxsj: "",
|
||||
tdpz_cfcs: "",
|
||||
tdpz_watchtime: true,
|
||||
tdpz_cjsylxdz: false,
|
||||
tdpz_dxzkb: "",
|
||||
tdpz_050F: "auto",
|
||||
tdpz_0610: "auto",
|
||||
},
|
||||
tdpz_dxzkb1: "1",
|
||||
tdpz_dxzkb2: "1",
|
||||
tdpz_ip1: "",
|
||||
tdpz_ip2: "",
|
||||
tdpz_ip3: "",
|
||||
tdpz_ip4: "",
|
||||
options1: [
|
||||
{
|
||||
value: "有线区Channel1",
|
||||
label: "有线区Channel1",
|
||||
},
|
||||
{
|
||||
value: "无线区Channel1",
|
||||
label: "无线区Channel1",
|
||||
},
|
||||
],
|
||||
options2: [
|
||||
{
|
||||
value: "网口",
|
||||
label: "网口",
|
||||
},
|
||||
{
|
||||
value: "串口",
|
||||
label: "串口",
|
||||
},
|
||||
],
|
||||
value1: "有线区Channel1",
|
||||
value2: "网口",
|
||||
diag_drive: false,
|
||||
isdisabled: true,
|
||||
radio: "1",
|
||||
is_retract: true,
|
||||
labelPosition: "left",
|
||||
formLabelWidth: "116px",
|
||||
input1: 192,
|
||||
add_passage: false,
|
||||
rightMenu: "",
|
||||
dialogVisible: true,
|
||||
menuShow: false,
|
||||
datas: [],
|
||||
datas2: [
|
||||
{
|
||||
label: "通用标准",
|
||||
children: [
|
||||
{
|
||||
label: "ModbusTCPClient",
|
||||
},
|
||||
{
|
||||
label: "ModbusRTU_over_TCP",
|
||||
},
|
||||
{
|
||||
label: "OPCUAClient",
|
||||
},
|
||||
{
|
||||
label: "OPCDAClient",
|
||||
},
|
||||
{
|
||||
label: "MQTTClient",
|
||||
},
|
||||
{
|
||||
label: "OPCXMLDAClient",
|
||||
},
|
||||
{
|
||||
label: "环保212协议网口监听",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "PLC",
|
||||
children: [
|
||||
{
|
||||
label: "Slemens S7-200 Network",
|
||||
},
|
||||
{
|
||||
label: "Slemens S7-300 Network",
|
||||
},
|
||||
{
|
||||
label: "Slemens S7-400 Network",
|
||||
},
|
||||
{
|
||||
label: "Slemens S7-1200 Network",
|
||||
},
|
||||
{
|
||||
label: "Slemens S7-1500 Network",
|
||||
},
|
||||
{
|
||||
label: "EtherNet/IP CIP协议(AB OMR ON)",
|
||||
},
|
||||
{
|
||||
label: "MC_Qna-3E(三菱 基恩士 松下)",
|
||||
},
|
||||
{
|
||||
label: "MC_A-1E_Binary",
|
||||
},
|
||||
{
|
||||
label: "OMRON-FINS",
|
||||
},
|
||||
{
|
||||
label: "横河PLC",
|
||||
},
|
||||
{
|
||||
label: "西门子FetchWirte",
|
||||
},
|
||||
{
|
||||
label: "富机 FUJI_SPH_NET",
|
||||
},
|
||||
{
|
||||
label: "基恩士上位链路通讯",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "智能建筑",
|
||||
children: [],
|
||||
},
|
||||
{
|
||||
label: "厂家定制",
|
||||
children: [],
|
||||
},
|
||||
{
|
||||
label: "电力行业标准",
|
||||
children: [
|
||||
{
|
||||
label: "IEC104",
|
||||
},
|
||||
{
|
||||
label: "DLT645_over_TCP",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "CNC数控",
|
||||
children: [],
|
||||
},
|
||||
{
|
||||
label: "私有协议",
|
||||
children: [],
|
||||
},
|
||||
],
|
||||
defaultProps: {
|
||||
children: "children",
|
||||
label: "label",
|
||||
},
|
||||
rules: {
|
||||
tdpz_tdmc: [
|
||||
{ required: true, message: "请输入通道名称", trigger: "change" },
|
||||
],
|
||||
tdpz_td: [{ required: true, message: "请输入通道", trigger: "change" }],
|
||||
tdpz_qdmc: [
|
||||
{ required: true, message: "请输入驱动名称", trigger: "change" },
|
||||
],
|
||||
tdpz_ip: [{ required: true, message: "请输入ip地址", trigger: "blur" }],
|
||||
tdpz_port: [
|
||||
{ required: true, message: "请输入端口号", trigger: "blur" },
|
||||
],
|
||||
tdpz_cssj: [
|
||||
{ required: true, message: "请输入超出时间", trigger: "blur" },
|
||||
],
|
||||
tdpz_jgsj: [
|
||||
{ required: true, message: "请输入间隔时间", trigger: "blur" },
|
||||
],
|
||||
tdpz_lxsj: [
|
||||
{ required: true, message: "请输入轮询时间", trigger: "blur" },
|
||||
],
|
||||
tdpz_cfcs: [
|
||||
{ required: true, message: "请输入重复次数", trigger: "blur" },
|
||||
],
|
||||
},
|
||||
};
|
||||
},
|
||||
created() {
|
||||
console.log(this.$store.state.tree);
|
||||
},
|
||||
methods: {
|
||||
//编辑
|
||||
edit(event) {
|
||||
this.flag = true;
|
||||
},
|
||||
//完成编辑
|
||||
done(event) {
|
||||
this.flag = false;
|
||||
let tree = this.$store.state.tree;
|
||||
tree[0].label = this.gateway;
|
||||
this.$store.commit("setTree", tree);
|
||||
},
|
||||
rightClick(e, data, node) {
|
||||
this.menuShow = false;
|
||||
this.menuShow = true;
|
||||
e.preventDefault(); //关闭浏览器右键默认事件
|
||||
this.rightMenu = { top: e.pageY + "px", left: e.pageX + "px" };
|
||||
document.addEventListener("click", (ev) => {
|
||||
ev.stopImmediatePropagation();
|
||||
if (ev.target !== document.querySelector(".el-menu-item.is-active")) {
|
||||
this.foo();
|
||||
}
|
||||
});
|
||||
},
|
||||
// 点击时候的判断,判断是否为新增网关
|
||||
selectMenuNode(index, indexPath) {
|
||||
console.log(index);
|
||||
if (index == 1) {
|
||||
this.add_passage = true;
|
||||
}
|
||||
},
|
||||
foo() {
|
||||
// 取消鼠标监听事件 菜单栏
|
||||
this.menuShow = false;
|
||||
document.removeEventListener("click", this.foo); // 关掉监听，
|
||||
},
|
||||
treeNodeClick(key) {
|
||||
// console.log
|
||||
this.foo();
|
||||
},
|
||||
// 收起点击事件的判断
|
||||
getRetract() {
|
||||
if (this.is_retract == true) {
|
||||
this.is_retract = false;
|
||||
} else {
|
||||
this.is_retract = true;
|
||||
}
|
||||
},
|
||||
getDriveName() {
|
||||
this.diag_drive = true;
|
||||
},
|
||||
Merge(value, value1, value2, value3, value4) {
|
||||
value = value1 + "." + value2 + "." + value3 + "." + value4;
|
||||
return value;
|
||||
},
|
||||
async saveGate() {
|
||||
|
||||
this.add_passage = false;
|
||||
var obj ={
|
||||
tdpz_tdmc:this.FormData.tdpz_tdmc,
|
||||
tdpz_td:this.FormData.tdpz_td,
|
||||
tdpz_qdmc:this.FormData.tdpz_qdmc,
|
||||
tdpz_port:this.FormData.tdpz_port,
|
||||
tdpz_ccsj:this.FormData.tdpz_cssj,
|
||||
tdpz_jgsj:this.FormData.tdpz_jgsj,
|
||||
tdpz_lxsj:this.FormData.tdpz_lxsj,
|
||||
tdpz_cfcs:this.FormData.tdpz_cfcs,
|
||||
tdpz_watchtime:String(Number(this.FormData.tdpz_watchtime)),
|
||||
tdpz_cjsylxdz:String(Number(this.FormData.tdpz_cjsylxdz)),
|
||||
tdpz_dxzkb:this.tdpz_dxzkb1+":"+this.tdpz_dxzkb2,
|
||||
tdpz_050F:this.FormData.tdpz_050F,
|
||||
tdpz_0610:this.FormData.tdpz_0610,
|
||||
}
|
||||
this.FormData.tdpz_dxzkb = this.tdpz_dxzkb1 + ":" + this.tdpz_dxzkb2;
|
||||
this.FormData.tdpz_watchtime = String(
|
||||
Number(this.FormData.tdpz_watchtime)
|
||||
);
|
||||
this.FormData.tdpz_cjsylxdz = String(Number(this.FormData.tdpz_cjsylxdz));
|
||||
this.FormData.tdpz_ip = this.Merge(
|
||||
this.FormData.tdpz_ip,
|
||||
this.tdpz_ip1,
|
||||
this.tdpz_ip2,
|
||||
this.tdpz_ip3,
|
||||
this.tdpz_ip4
|
||||
);
|
||||
let datas = sessionStorage.getItem("DB-IotLite_yx");
|
||||
this.FormData = { ...JSON.parse(datas), ...this.FormData };
|
||||
let res = await SaveUserAnswer({
|
||||
mark: "DB-IotLite_yx",
|
||||
user_id: "USER202307301109254198",
|
||||
mark_value: JSON.stringify(this.FormData),
|
||||
});
|
||||
sessionStorage.setItem("DB-IotLite_yx", JSON.stringify(this.FormData));
|
||||
console.log(res);
|
||||
console.log(res.data.data.mark_value);
|
||||
// this.$router.push("/dbcollectdevice");
|
||||
},
|
||||
handleDetailClick(data, node, value) {
|
||||
console.log(data.label);
|
||||
this.FormData.tdpz_qdmc = data.label;
|
||||
this.diag_drive = false;
|
||||
},
|
||||
async GetUserAnswer() {
|
||||
let answer = await GetUserAnswer({
|
||||
mark: "DB-IotLite_yx",
|
||||
user_id: "USER202307301109254198",
|
||||
});
|
||||
console.log(answer);
|
||||
let obj = JSON.parse(answer.data.data.mark_value);
|
||||
console.log(obj);
|
||||
// this.FormData.
|
||||
if (obj.tdpz_dxzkb) {
|
||||
this.tdpz_dxzkb1 = obj.tdpz_dxzkb.split(":")[0];
|
||||
this.tdpz_dxzkb2 = obj.tdpz_dxzkb.split(":")[1];
|
||||
}
|
||||
this.FormData.tdpz_watchtime = Boolean(obj.tdpz_watchtime);
|
||||
// console.log(this.FormData.tdpz_watchtime);
|
||||
this.FormData.tdpz_cjsylxdz = Boolean(obj.tdpz_cjsylxdz);
|
||||
if (obj.tdpz_ip) {
|
||||
this.tdpz_ip1 = obj.tdpz_ip.split(".")[0];
|
||||
this.tdpz_ip2 = obj.tdpz_ip.split(".")[1];
|
||||
this.tdpz_ip3 = obj.tdpz_ip.split(".")[2];
|
||||
this.tdpz_ip4 = obj.tdpz_ip.split(".")[3];
|
||||
}
|
||||
this.FormData.tdpz_tdmc = obj.tdpz_tdmc;
|
||||
this.FormData.tdpz_td = obj.tdpz_td;
|
||||
this.FormData.tdpz_qdmc = obj.tdpz_qdmc;
|
||||
this.FormData.tdpz_050F = obj.tdpz_050F;
|
||||
this.FormData.tdpz_0610 = obj.tdpz_0610;
|
||||
this.FormData.tdpz_port = obj.tdpz_port;
|
||||
this.FormData.tdpz_cssj = obj.tdpz_cssj;
|
||||
this.FormData.tdpz_jgsj = obj.tdpz_jgsj;
|
||||
this.FormData.tdpz_lxsj = obj.tdpz_lxsj;
|
||||
this.FormData.tdpz_cfcs = obj.tdpz_cfcs;
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.Loading = true;
|
||||
this.GetUserAnswer();
|
||||
this.Loading = false;
|
||||
// let res2 = GetUserAnswer()
|
||||
},
|
||||
|
||||
watch: {
|
||||
// "FormData.tdpz_watchtime": {
|
||||
// handler(old) {
|
||||
// if (old) {
|
||||
// this.isdisabled = false;
|
||||
// } else {
|
||||
// this.isdisabled = true;
|
||||
// }
|
||||
// },
|
||||
// },
|
||||
"FormData.tdpz_watchtime"(newval) {
|
||||
console.log(newval);
|
||||
if (newval) {
|
||||
this.isdisabled = true;
|
||||
} else {
|
||||
this.isdisabled = false;
|
||||
}
|
||||
},
|
||||
},
|
||||
directives: {
|
||||
clickoutside: {
|
||||
bind: function (el, binding, vnode) {
|
||||
function documentHandler(e) {
|
||||
if (el.contains(e.target)) {
|
||||
return false;
|
||||
}
|
||||
if (binding.expression) {
|
||||
binding.value(e);
|
||||
}
|
||||
}
|
||||
el._vueClickOutside_ = documentHandler;
|
||||
document.addEventListener("click", documentHandler);
|
||||
},
|
||||
unbind: function (el, binding) {
|
||||
document.removeEventListener("click", el._vueClickOutside_);
|
||||
delete el._vueClickOutside_;
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.tree_menu {
|
||||
position: absolute;
|
||||
width: 286px;
|
||||
left: 64px;
|
||||
top: 104px;
|
||||
width: 286px;
|
||||
height: 753px;
|
||||
line-height: 20px;
|
||||
border-radius: 3px;
|
||||
background-color: rgba(255, 255, 255, 1);
|
||||
text-align: center;
|
||||
border: 1px solid rgba(220, 220, 220, 1);
|
||||
}
|
||||
|
||||
.tree_rightmenu {
|
||||
position: fixed;
|
||||
width: 120px;
|
||||
border: 1px solid rgba(0, 0, 0, 0.15);
|
||||
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.super_parmams {
|
||||
display: flex;
|
||||
color: #fff !important;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: 668px;
|
||||
|
||||
i {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
/deep/ .pas_params {
|
||||
.el-col-12:last-child {
|
||||
padding-right: 150px;
|
||||
}
|
||||
|
||||
.el-col-12:first-child {
|
||||
padding-right: 38px;
|
||||
}
|
||||
|
||||
.el-input__inner {
|
||||
height: 30px;
|
||||
text-align: left;
|
||||
padding: 0px 8px;
|
||||
}
|
||||
|
||||
.el-row {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
|
||||
.el-col-1 {
|
||||
color: #fff !important;
|
||||
text-align: center;
|
||||
line-height: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.el-col-6 {
|
||||
height: 40px;
|
||||
top: 6px;
|
||||
left: 77px;
|
||||
position: relative;
|
||||
width: 50px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.super_con {
|
||||
.el-col-12:last-child {
|
||||
padding-right: 28px;
|
||||
}
|
||||
|
||||
.el-col-12:first-child {
|
||||
padding-right: 42px;
|
||||
}
|
||||
|
||||
.el-input__inner {
|
||||
text-align: left;
|
||||
padding: 0 8px;
|
||||
}
|
||||
|
||||
.el-row {
|
||||
color: #fff !important;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
|
||||
.el-col-4 {
|
||||
padding-left: 5px;
|
||||
width: 14px;
|
||||
text-align: center;
|
||||
line-height: 4px;
|
||||
height: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.el-dialog__footer {
|
||||
padding: 18px 1.25rem 50px;
|
||||
}
|
||||
|
||||
.dialog-footer {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
bottom: 45px;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
/deep/ .drvieName_All {
|
||||
position: absolute;
|
||||
left: 1408px;
|
||||
top: 140px;
|
||||
width: 435px;
|
||||
max-height: 720px;
|
||||
z-index: 10000;
|
||||
border: 1px solid #f5f5f5;
|
||||
|
||||
.title {
|
||||
background-color: #fff;
|
||||
padding: 5px 6px 5px 25px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.title_l {
|
||||
width: 103px;
|
||||
height: 26px;
|
||||
color: rgba(16, 16, 16, 1);
|
||||
font-size: 18px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.title_r {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
line-height: 24px;
|
||||
cursor: pointer;
|
||||
color: rgba(111, 103, 103, 1);
|
||||
}
|
||||
}
|
||||
|
||||
// h3 {
|
||||
// padding-bottom: 10px;
|
||||
// background-color: #fff;
|
||||
// }
|
||||
|
||||
.el-divider--horizontal {
|
||||
margin: 0px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,916 @@
|
|||
<!-- 网关通道 -->
|
||||
<template>
|
||||
<div>
|
||||
<!-- v-click-outside="closeMenu" -->
|
||||
<div>
|
||||
<div class="tree_menu" v-show="dialogVisible">
|
||||
<el-tree
|
||||
:data="$store.state.tree"
|
||||
:props="defaultProps"
|
||||
default-expand-all
|
||||
@node-contextmenu="rightClick"
|
||||
@node-click="treeNodeClick"
|
||||
ref="tree"
|
||||
>
|
||||
<span class="custom-tree-node" slot-scope="{ node, data }">
|
||||
<template v-if="data.editing == 1">
|
||||
<el-button
|
||||
type="mini"
|
||||
v-if="flag"
|
||||
style="right: 50px; top: 0; position: absolute; border: none"
|
||||
@click.stop="done"
|
||||
>完成</el-button
|
||||
>
|
||||
<el-button
|
||||
type="mini"
|
||||
style="right: 0; top: 0; position: absolute; border: none"
|
||||
@click.stop="edit"
|
||||
>编辑</el-button
|
||||
>
|
||||
<span v-if="!flag">{{ data.label }}</span>
|
||||
<el-input
|
||||
v-else
|
||||
style="width: 150px"
|
||||
v-model="gateway"
|
||||
></el-input>
|
||||
</template>
|
||||
<template v-else>{{ data.label }}</template>
|
||||
</span>
|
||||
</el-tree>
|
||||
<!-- 树形控件右键组件 -->
|
||||
<div v-show="menuShow" class="tree_rightmenu" :style="{ ...rightMenu }">
|
||||
<el-menu
|
||||
class="el-menu-vertical-demo"
|
||||
@select="selectMenuNode"
|
||||
default-active="#0078FE"
|
||||
>
|
||||
<el-menu-item id="menuitem" index="1" style="font-size: 12px">
|
||||
<span slot="title">新建通道</span>
|
||||
</el-menu-item>
|
||||
<el-menu-item index="2" style="font-size: 12px">
|
||||
<span slot="title">取 消</span>
|
||||
</el-menu-item>
|
||||
</el-menu>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pas_params">
|
||||
<el-dialog
|
||||
title="通道参数设置"
|
||||
:visible.sync="add_passage"
|
||||
width="765px"
|
||||
v-loading="Loading"
|
||||
>
|
||||
<el-form
|
||||
:model="FormData"
|
||||
:label-position="labelPosition"
|
||||
:rules="rules"
|
||||
ref="ruleForm"
|
||||
>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item
|
||||
label="通道名称:"
|
||||
:label-width="formLabelWidth"
|
||||
prop="tdpz_tdmc"
|
||||
>
|
||||
<el-select
|
||||
v-model="FormData.tdpz_tdmc"
|
||||
placeholder=""
|
||||
style="width: 200px; height: 30px"
|
||||
>
|
||||
<el-option
|
||||
v-for="(item, index) in options1"
|
||||
:key="index"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item
|
||||
label="通道:"
|
||||
:label-width="formLabelWidth"
|
||||
prop="tdpz_td"
|
||||
>
|
||||
<el-select
|
||||
v-model="FormData.tdpz_td"
|
||||
placeholder=""
|
||||
style="width: 200px; height: 30px"
|
||||
>
|
||||
<el-option
|
||||
v-for="(item, index) in options2"
|
||||
:key="index"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item
|
||||
label="驱动名称:"
|
||||
:label-width="formLabelWidth"
|
||||
prop="tdpz_qdmc"
|
||||
>
|
||||
<el-row>
|
||||
<el-col :span="18">
|
||||
<el-input
|
||||
v-model="FormData.tdpz_qdmc"
|
||||
placeholder=""
|
||||
style="width: 200px; height: 30px"
|
||||
></el-input>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-button
|
||||
style="width: 50px; height: 30px"
|
||||
@click="getDriveName"
|
||||
>...</el-button
|
||||
>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item
|
||||
label="IP地址:"
|
||||
:label-width="formLabelWidth"
|
||||
prop="tdpz_ip"
|
||||
>
|
||||
<el-row>
|
||||
<el-col :span="5">
|
||||
<el-input
|
||||
v-model="tdpz_ip1"
|
||||
style="width: 43px; height: 30px"
|
||||
></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1" style="color: #fff">. </el-col>
|
||||
<el-col :span="5">
|
||||
<el-input
|
||||
v-model="tdpz_ip2"
|
||||
style="width: 43px; height: 30px"
|
||||
></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1" style="color: #fff">.</el-col>
|
||||
<el-col :span="5">
|
||||
<el-input
|
||||
v-model="tdpz_ip3"
|
||||
style="width: 43px; height: 30px"
|
||||
></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1" style="color: #fff">.</el-col>
|
||||
<el-col :span="5">
|
||||
<el-input
|
||||
v-model="tdpz_ip4"
|
||||
style="width: 43px; height: 30px"
|
||||
></el-input>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item
|
||||
label="端口号:"
|
||||
:label-width="formLabelWidth"
|
||||
prop="tdpz_port"
|
||||
>
|
||||
<el-input
|
||||
v-model="FormData.tdpz_port"
|
||||
placeholder=""
|
||||
style="width: 200px; height: 30px"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item
|
||||
label="超过时间(ms):"
|
||||
:label-width="formLabelWidth"
|
||||
prop="tdpz_cssj"
|
||||
>
|
||||
<el-input
|
||||
v-model="FormData.tdpz_cssj"
|
||||
placeholder=""
|
||||
style="width: 200px; height: 30px"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item
|
||||
label="间隔时间(ms):"
|
||||
:label-width="formLabelWidth"
|
||||
prop="tdpz_jgsj"
|
||||
>
|
||||
<el-input
|
||||
v-model="FormData.tdpz_jgsj"
|
||||
placeholder=""
|
||||
style="width: 200px; height: 30px"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item
|
||||
label="轮询时间(ms):"
|
||||
:label-width="formLabelWidth"
|
||||
prop="tdpz_lxsj"
|
||||
>
|
||||
<el-input
|
||||
v-model="FormData.tdpz_lxsj"
|
||||
placeholder=""
|
||||
style="width: 200px; height: 30px"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item
|
||||
label="重复次数:"
|
||||
:label-width="formLabelWidth"
|
||||
prop="tdpz_cfcs"
|
||||
>
|
||||
<el-input
|
||||
v-model="FormData.tdpz_cfcs"
|
||||
placeholder=""
|
||||
style="width: 200px; height: 30px"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<div class="super_parmams">
|
||||
<h3>高级参数</h3>
|
||||
<div>
|
||||
<i class="el-icon-caret-bottom" v-if="is_retract"></i>
|
||||
<i class="el-icon-caret-top" v-else="is_retract"></i>
|
||||
<el-button
|
||||
type="text"
|
||||
plain
|
||||
@click="getRetract"
|
||||
style="
|
||||
width: 28px;
|
||||
border: none;
|
||||
color: rgba(16, 16, 16, 1);
|
||||
font-size: 14px;
|
||||
text-align: left;
|
||||
"
|
||||
>
|
||||
收起</el-button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div class="super_con" v-show="is_retract">
|
||||
<el-form
|
||||
:label-position="labelPosition"
|
||||
:rules="rules"
|
||||
ref="ruleForm"
|
||||
>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item>
|
||||
<el-checkbox v-model="FormData.tdpz_watchtime"
|
||||
>watch time(s)</el-checkbox
|
||||
>
|
||||
<el-input
|
||||
v-model="input1"
|
||||
placeholder=""
|
||||
style="width: 200px; height: 30px"
|
||||
:disabled="isdisabled"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item>
|
||||
<el-checkbox v-model="FormData.tdpz_cjsylxdz"
|
||||
>采集使用连续地址</el-checkbox
|
||||
>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="读写占空比:" :label-width="formLabelWidth">
|
||||
<el-row>
|
||||
<el-col :span="10">
|
||||
<el-input
|
||||
v-model="tdpz_dxzkb1"
|
||||
style="width: 91px; height: 30px"
|
||||
></el-input>
|
||||
</el-col>
|
||||
<el-col :span="4">: </el-col>
|
||||
<el-col :span="10">
|
||||
<el-input
|
||||
v-model="tdpz_dxzkb2"
|
||||
style="width: 91px; height: 30px"
|
||||
></el-input>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="05/0F:" :label-width="formLabelWidth">
|
||||
<el-row>
|
||||
<el-col :span="8"
|
||||
><el-radio v-model="FormData.tdpz_050F" label="auto"
|
||||
>auto</el-radio
|
||||
></el-col
|
||||
>
|
||||
<el-col :span="8"
|
||||
><el-radio v-model="FormData.tdpz_050F" label="05"
|
||||
>05</el-radio
|
||||
></el-col
|
||||
>
|
||||
<el-col :span="8"
|
||||
><el-radio v-model="FormData.tdpz_050F" label="0F"
|
||||
>0F</el-radio
|
||||
></el-col
|
||||
>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="06/10:" :label-width="formLabelWidth">
|
||||
<el-row>
|
||||
<el-col :span="8"
|
||||
><el-radio v-model="FormData.tdpz_0610" label="auto"
|
||||
>auto</el-radio
|
||||
></el-col
|
||||
>
|
||||
<el-col :span="8"
|
||||
><el-radio v-model="FormData.tdpz_0610" label="06"
|
||||
>06</el-radio
|
||||
></el-col
|
||||
>
|
||||
<el-col :span="8"
|
||||
><el-radio v-model="FormData.tdpz_0610" label="10"
|
||||
>10</el-radio
|
||||
></el-col
|
||||
>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</div>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="saveGate">保 存</el-button>
|
||||
<el-button @click="add_passage = false">取 消</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
<div class="drvieName_All" v-show="diag_drive">
|
||||
<div class="title">
|
||||
<p class="title_l">协议选择</p>
|
||||
<i class="el-icon-close title_r" @click="diag_drive = false"></i>
|
||||
</div>
|
||||
<el-divider></el-divider>
|
||||
<el-tree
|
||||
:data="datas2"
|
||||
:props="defaultProps"
|
||||
@node-click="handleDetailClick"
|
||||
default-expand-all
|
||||
></el-tree>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { SaveUserAnswer, GetUserAnswer } from "@/api/user";
|
||||
import { Loading } from "element-ui";
|
||||
|
||||
export default {
|
||||
name: "TestTreeView",
|
||||
|
||||
data() {
|
||||
return {
|
||||
flag: false,
|
||||
gateway: JSON.parse(localStorage.getItem("tree"))[0].label,
|
||||
FormData: {
|
||||
tdpz_tdmc: "有线区Channel1",
|
||||
tdpz_td: "网口",
|
||||
tdpz_qdmc: "ModbusTCPClient",
|
||||
tdpz_port: "",
|
||||
tdpz_cssj: "",
|
||||
tdpz_jgsj: "",
|
||||
tdpz_lxsj: "",
|
||||
tdpz_cfcs: "",
|
||||
tdpz_watchtime: true,
|
||||
tdpz_cjsylxdz: false,
|
||||
tdpz_dxzkb: "",
|
||||
tdpz_050F: "auto",
|
||||
tdpz_0610: "auto",
|
||||
},
|
||||
tdpz_dxzkb1: "1",
|
||||
tdpz_dxzkb2: "1",
|
||||
tdpz_ip1: "",
|
||||
tdpz_ip2: "",
|
||||
tdpz_ip3: "",
|
||||
tdpz_ip4: "",
|
||||
options1: [
|
||||
{
|
||||
value: "有线区Channel1",
|
||||
label: "有线区Channel1",
|
||||
},
|
||||
{
|
||||
value: "无线区Channel1",
|
||||
label: "无线区Channel1",
|
||||
},
|
||||
],
|
||||
options2: [
|
||||
{
|
||||
value: "网口",
|
||||
label: "网口",
|
||||
},
|
||||
{
|
||||
value: "串口",
|
||||
label: "串口",
|
||||
},
|
||||
],
|
||||
value1: "有线区Channel1",
|
||||
value2: "网口",
|
||||
diag_drive: false,
|
||||
isdisabled: true,
|
||||
radio: "1",
|
||||
is_retract: true,
|
||||
labelPosition: "left",
|
||||
formLabelWidth: "116px",
|
||||
input1: 192,
|
||||
add_passage: false,
|
||||
rightMenu: "",
|
||||
dialogVisible: true,
|
||||
menuShow: false,
|
||||
datas: [],
|
||||
datas2: [
|
||||
{
|
||||
label: "通用标准",
|
||||
children: [
|
||||
{
|
||||
label: "ModbusTCPClient",
|
||||
},
|
||||
{
|
||||
label: "ModbusRTU_over_TCP",
|
||||
},
|
||||
{
|
||||
label: "OPCUAClient",
|
||||
},
|
||||
{
|
||||
label: "OPCDAClient",
|
||||
},
|
||||
{
|
||||
label: "MQTTClient",
|
||||
},
|
||||
{
|
||||
label: "OPCXMLDAClient",
|
||||
},
|
||||
{
|
||||
label: "环保212协议网口监听",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "PLC",
|
||||
children: [
|
||||
{
|
||||
label: "Slemens S7-200 Network",
|
||||
},
|
||||
{
|
||||
label: "Slemens S7-300 Network",
|
||||
},
|
||||
{
|
||||
label: "Slemens S7-400 Network",
|
||||
},
|
||||
{
|
||||
label: "Slemens S7-1200 Network",
|
||||
},
|
||||
{
|
||||
label: "Slemens S7-1500 Network",
|
||||
},
|
||||
{
|
||||
label: "EtherNet/IP CIP协议(AB OMR ON)",
|
||||
},
|
||||
{
|
||||
label: "MC_Qna-3E(三菱 基恩士 松下)",
|
||||
},
|
||||
{
|
||||
label: "MC_A-1E_Binary",
|
||||
},
|
||||
{
|
||||
label: "OMRON-FINS",
|
||||
},
|
||||
{
|
||||
label: "横河PLC",
|
||||
},
|
||||
{
|
||||
label: "西门子FetchWirte",
|
||||
},
|
||||
{
|
||||
label: "富机 FUJI_SPH_NET",
|
||||
},
|
||||
{
|
||||
label: "基恩士上位链路通讯",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "智能建筑",
|
||||
children: [],
|
||||
},
|
||||
{
|
||||
label: "厂家定制",
|
||||
children: [],
|
||||
},
|
||||
{
|
||||
label: "电力行业标准",
|
||||
children: [
|
||||
{
|
||||
label: "IEC104",
|
||||
},
|
||||
{
|
||||
label: "DLT645_over_TCP",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "CNC数控",
|
||||
children: [],
|
||||
},
|
||||
{
|
||||
label: "私有协议",
|
||||
children: [],
|
||||
},
|
||||
],
|
||||
defaultProps: {
|
||||
children: "children",
|
||||
label: "label",
|
||||
},
|
||||
rules: {
|
||||
tdpz_tdmc: [
|
||||
{ required: true, message: "请输入通道名称", trigger: "change" },
|
||||
],
|
||||
tdpz_td: [{ required: true, message: "请输入通道", trigger: "change" }],
|
||||
tdpz_qdmc: [
|
||||
{ required: true, message: "请输入驱动名称", trigger: "change" },
|
||||
],
|
||||
tdpz_ip: [{ required: true, message: "请输入ip地址", trigger: "blur" }],
|
||||
tdpz_port: [
|
||||
{ required: true, message: "请输入端口号", trigger: "blur" },
|
||||
],
|
||||
tdpz_cssj: [
|
||||
{ required: true, message: "请输入超出时间", trigger: "blur" },
|
||||
],
|
||||
tdpz_jgsj: [
|
||||
{ required: true, message: "请输入间隔时间", trigger: "blur" },
|
||||
],
|
||||
tdpz_lxsj: [
|
||||
{ required: true, message: "请输入轮询时间", trigger: "blur" },
|
||||
],
|
||||
tdpz_cfcs: [
|
||||
{ required: true, message: "请输入重复次数", trigger: "blur" },
|
||||
],
|
||||
},
|
||||
};
|
||||
},
|
||||
created() {
|
||||
console.log(this.$store.state.tree);
|
||||
},
|
||||
methods: {
|
||||
//编辑
|
||||
edit(event) {
|
||||
this.flag = true;
|
||||
},
|
||||
//完成编辑
|
||||
done(event) {
|
||||
this.flag = false;
|
||||
let tree = this.$store.state.tree;
|
||||
tree[0].label = this.gateway;
|
||||
this.$store.commit("setTree", tree);
|
||||
},
|
||||
rightClick(e, data, node) {
|
||||
this.menuShow = false;
|
||||
this.menuShow = true;
|
||||
e.preventDefault(); //关闭浏览器右键默认事件
|
||||
this.rightMenu = { top: e.pageY + "px", left: e.pageX + "px" };
|
||||
document.addEventListener("click", (ev) => {
|
||||
ev.stopImmediatePropagation();
|
||||
if (ev.target !== document.querySelector(".el-menu-item.is-active")) {
|
||||
this.foo();
|
||||
}
|
||||
});
|
||||
},
|
||||
// 点击时候的判断,判断是否为新增网关
|
||||
selectMenuNode(index, indexPath) {
|
||||
console.log(index);
|
||||
if (index == 1) {
|
||||
this.add_passage = true;
|
||||
}
|
||||
},
|
||||
foo() {
|
||||
// 取消鼠标监听事件 菜单栏
|
||||
this.menuShow = false;
|
||||
document.removeEventListener("click", this.foo); // 关掉监听，
|
||||
},
|
||||
treeNodeClick(key) {
|
||||
// console.log
|
||||
this.foo();
|
||||
},
|
||||
// 收起点击事件的判断
|
||||
getRetract() {
|
||||
if (this.is_retract == true) {
|
||||
this.is_retract = false;
|
||||
} else {
|
||||
this.is_retract = true;
|
||||
}
|
||||
},
|
||||
getDriveName() {
|
||||
this.diag_drive = true;
|
||||
},
|
||||
Merge(value, value1, value2, value3, value4) {
|
||||
value = value1 + "." + value2 + "." + value3 + "." + value4;
|
||||
return value;
|
||||
},
|
||||
async saveGate() {
|
||||
|
||||
this.add_passage = false;
|
||||
var obj ={
|
||||
tdpz_tdmc:this.FormData.tdpz_tdmc,
|
||||
tdpz_td:this.FormData.tdpz_td,
|
||||
tdpz_qdmc:this.FormData.tdpz_qdmc,
|
||||
tdpz_port:this.FormData.tdpz_port,
|
||||
tdpz_ccsj:this.FormData.tdpz_cssj,
|
||||
tdpz_jgsj:this.FormData.tdpz_jgsj,
|
||||
tdpz_ip:this.tdpz_ip1+"."+this.tdpz_ip2+"."+this.tdpz_ip3+"."+this.tdpz_ip4,
|
||||
tdpz_lxsj:this.FormData.tdpz_lxsj,
|
||||
tdpz_cfcs:this.FormData.tdpz_cfcs,
|
||||
tdpz_watchtime:String(Number(this.FormData.tdpz_watchtime)),
|
||||
tdpz_cjsylxdz:String(Number(this.FormData.tdpz_cjsylxdz)),
|
||||
tdpz_dxzkb:this.tdpz_dxzkb1+":"+this.tdpz_dxzkb2,
|
||||
tdpz_050F:this.FormData.tdpz_050F,
|
||||
tdpz_0610:this.FormData.tdpz_0610,
|
||||
}
|
||||
let datas = sessionStorage.getItem("DB-IotLite_yx");
|
||||
datas = { ...JSON.parse(datas), ...obj};
|
||||
let res = await SaveUserAnswer({
|
||||
mark: "DB-IotLite_yx",
|
||||
user_id: "USER202307301109254198",
|
||||
mark_value: JSON.stringify(this.FormData),
|
||||
});
|
||||
sessionStorage.setItem("DB-IotLite_yx", JSON.stringify(this.FormData));
|
||||
console.log(res);
|
||||
console.log(res.data.data.mark_value);
|
||||
// this.$router.push("/dbcollectdevice");
|
||||
},
|
||||
handleDetailClick(data, node, value) {
|
||||
console.log(data.label);
|
||||
this.FormData.tdpz_qdmc = data.label;
|
||||
this.diag_drive = false;
|
||||
},
|
||||
async GetUserAnswer() {
|
||||
let answer = await GetUserAnswer({
|
||||
mark: "DB-IotLite_yx",
|
||||
user_id: "USER202307301109254198",
|
||||
});
|
||||
console.log(answer);
|
||||
let obj = JSON.parse(answer.data.data.mark_value);
|
||||
console.log(obj);
|
||||
// this.FormData.
|
||||
if (obj.tdpz_dxzkb) {
|
||||
this.tdpz_dxzkb1 = obj.tdpz_dxzkb.split(":")[0];
|
||||
this.tdpz_dxzkb2 = obj.tdpz_dxzkb.split(":")[1];
|
||||
}
|
||||
this.FormData.tdpz_watchtime = Boolean(obj.tdpz_watchtime);
|
||||
// console.log(this.FormData.tdpz_watchtime);
|
||||
this.FormData.tdpz_cjsylxdz = Boolean(obj.tdpz_cjsylxdz);
|
||||
if (obj.tdpz_ip) {
|
||||
this.tdpz_ip1 = obj.tdpz_ip.split(".")[0];
|
||||
this.tdpz_ip2 = obj.tdpz_ip.split(".")[1];
|
||||
this.tdpz_ip3 = obj.tdpz_ip.split(".")[2];
|
||||
this.tdpz_ip4 = obj.tdpz_ip.split(".")[3];
|
||||
}
|
||||
this.FormData.tdpz_tdmc = obj.tdpz_tdmc;
|
||||
this.FormData.tdpz_td = obj.tdpz_td;
|
||||
this.FormData.tdpz_qdmc = obj.tdpz_qdmc;
|
||||
this.FormData.tdpz_050F = obj.tdpz_050F;
|
||||
this.FormData.tdpz_0610 = obj.tdpz_0610;
|
||||
this.FormData.tdpz_port = obj.tdpz_port;
|
||||
this.FormData.tdpz_cssj = obj.tdpz_cssj;
|
||||
this.FormData.tdpz_jgsj = obj.tdpz_jgsj;
|
||||
this.FormData.tdpz_lxsj = obj.tdpz_lxsj;
|
||||
this.FormData.tdpz_cfcs = obj.tdpz_cfcs;
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.Loading = true;
|
||||
this.GetUserAnswer();
|
||||
this.Loading = false;
|
||||
// let res2 = GetUserAnswer()
|
||||
},
|
||||
|
||||
watch: {
|
||||
// "FormData.tdpz_watchtime": {
|
||||
// handler(old) {
|
||||
// if (old) {
|
||||
// this.isdisabled = false;
|
||||
// } else {
|
||||
// this.isdisabled = true;
|
||||
// }
|
||||
// },
|
||||
// },
|
||||
"FormData.tdpz_watchtime"(newval) {
|
||||
console.log(newval);
|
||||
if (newval) {
|
||||
this.isdisabled = true;
|
||||
} else {
|
||||
this.isdisabled = false;
|
||||
}
|
||||
},
|
||||
},
|
||||
directives: {
|
||||
clickoutside: {
|
||||
bind: function (el, binding, vnode) {
|
||||
function documentHandler(e) {
|
||||
if (el.contains(e.target)) {
|
||||
return false;
|
||||
}
|
||||
if (binding.expression) {
|
||||
binding.value(e);
|
||||
}
|
||||
}
|
||||
el._vueClickOutside_ = documentHandler;
|
||||
document.addEventListener("click", documentHandler);
|
||||
},
|
||||
unbind: function (el, binding) {
|
||||
document.removeEventListener("click", el._vueClickOutside_);
|
||||
delete el._vueClickOutside_;
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.tree_menu {
|
||||
position: absolute;
|
||||
width: 286px;
|
||||
left: 64px;
|
||||
top: 104px;
|
||||
width: 286px;
|
||||
height: 753px;
|
||||
line-height: 20px;
|
||||
border-radius: 3px;
|
||||
background-color: rgba(255, 255, 255, 1);
|
||||
text-align: center;
|
||||
border: 1px solid rgba(220, 220, 220, 1);
|
||||
}
|
||||
|
||||
.tree_rightmenu {
|
||||
position: fixed;
|
||||
width: 120px;
|
||||
border: 1px solid rgba(0, 0, 0, 0.15);
|
||||
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.super_parmams {
|
||||
display: flex;
|
||||
color: #fff !important;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: 668px;
|
||||
|
||||
i {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
/deep/ .pas_params {
|
||||
.el-col-12:last-child {
|
||||
padding-right: 150px;
|
||||
}
|
||||
|
||||
.el-col-12:first-child {
|
||||
padding-right: 38px;
|
||||
}
|
||||
|
||||
.el-input__inner {
|
||||
height: 30px;
|
||||
text-align: left;
|
||||
padding: 0px 8px;
|
||||
}
|
||||
|
||||
.el-row {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
|
||||
.el-col-1 {
|
||||
color: #fff !important;
|
||||
text-align: center;
|
||||
line-height: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.el-col-6 {
|
||||
height: 40px;
|
||||
top: 6px;
|
||||
left: 77px;
|
||||
position: relative;
|
||||
width: 50px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.super_con {
|
||||
.el-col-12:last-child {
|
||||
padding-right: 28px;
|
||||
}
|
||||
|
||||
.el-col-12:first-child {
|
||||
padding-right: 42px;
|
||||
}
|
||||
|
||||
.el-input__inner {
|
||||
text-align: left;
|
||||
padding: 0 8px;
|
||||
}
|
||||
|
||||
.el-row {
|
||||
color: #fff !important;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
|
||||
.el-col-4 {
|
||||
padding-left: 5px;
|
||||
width: 14px;
|
||||
text-align: center;
|
||||
line-height: 4px;
|
||||
height: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.el-dialog__footer {
|
||||
padding: 18px 1.25rem 50px;
|
||||
}
|
||||
|
||||
.dialog-footer {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
bottom: 45px;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
/deep/ .drvieName_All {
|
||||
position: absolute;
|
||||
left: 1408px;
|
||||
top: 140px;
|
||||
width: 435px;
|
||||
max-height: 720px;
|
||||
z-index: 10000;
|
||||
border: 1px solid #f5f5f5;
|
||||
|
||||
.title {
|
||||
background-color: #fff;
|
||||
padding: 5px 6px 5px 25px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.title_l {
|
||||
width: 103px;
|
||||
height: 26px;
|
||||
color: rgba(16, 16, 16, 1);
|
||||
font-size: 18px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.title_r {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
line-height: 24px;
|
||||
cursor: pointer;
|
||||
color: rgba(111, 103, 103, 1);
|
||||
}
|
||||
}
|
||||
|
||||
// h3 {
|
||||
// padding-bottom: 10px;
|
||||
// background-color: #fff;
|
||||
// }
|
||||
|
||||
.el-divider--horizontal {
|
||||
margin: 0px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,916 @@
|
|||
<!-- 网关通道 -->
|
||||
<template>
|
||||
<div>
|
||||
<!-- v-click-outside="closeMenu" -->
|
||||
<div>
|
||||
<div class="tree_menu" v-show="dialogVisible">
|
||||
<el-tree
|
||||
:data="$store.state.tree"
|
||||
:props="defaultProps"
|
||||
default-expand-all
|
||||
@node-contextmenu="rightClick"
|
||||
@node-click="treeNodeClick"
|
||||
ref="tree"
|
||||
>
|
||||
<span class="custom-tree-node" slot-scope="{ node, data }">
|
||||
<template v-if="data.editing == 1">
|
||||
<el-button
|
||||
type="mini"
|
||||
v-if="flag"
|
||||
style="right: 50px; top: 0; position: absolute; border: none"
|
||||
@click.stop="done"
|
||||
>完成</el-button
|
||||
>
|
||||
<el-button
|
||||
type="mini"
|
||||
style="right: 0; top: 0; position: absolute; border: none"
|
||||
@click.stop="edit"
|
||||
>编辑</el-button
|
||||
>
|
||||
<span v-if="!flag">{{ data.label }}</span>
|
||||
<el-input
|
||||
v-else
|
||||
style="width: 150px"
|
||||
v-model="gateway"
|
||||
></el-input>
|
||||
</template>
|
||||
<template v-else>{{ data.label }}</template>
|
||||
</span>
|
||||
</el-tree>
|
||||
<!-- 树形控件右键组件 -->
|
||||
<div v-show="menuShow" class="tree_rightmenu" :style="{ ...rightMenu }">
|
||||
<el-menu
|
||||
class="el-menu-vertical-demo"
|
||||
@select="selectMenuNode"
|
||||
default-active="#0078FE"
|
||||
>
|
||||
<el-menu-item id="menuitem" index="1" style="font-size: 12px">
|
||||
<span slot="title">新建通道</span>
|
||||
</el-menu-item>
|
||||
<el-menu-item index="2" style="font-size: 12px">
|
||||
<span slot="title">取 消</span>
|
||||
</el-menu-item>
|
||||
</el-menu>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pas_params">
|
||||
<el-dialog
|
||||
title="通道参数设置"
|
||||
:visible.sync="add_passage"
|
||||
width="765px"
|
||||
v-loading="Loading"
|
||||
>
|
||||
<el-form
|
||||
:model="FormData"
|
||||
:label-position="labelPosition"
|
||||
:rules="rules"
|
||||
ref="ruleForm"
|
||||
>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item
|
||||
label="通道名称:"
|
||||
:label-width="formLabelWidth"
|
||||
prop="tdpz_tdmc"
|
||||
>
|
||||
<el-select
|
||||
v-model="FormData.tdpz_tdmc"
|
||||
placeholder=""
|
||||
style="width: 200px; height: 30px"
|
||||
>
|
||||
<el-option
|
||||
v-for="(item, index) in options1"
|
||||
:key="index"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item
|
||||
label="通道:"
|
||||
:label-width="formLabelWidth"
|
||||
prop="tdpz_td"
|
||||
>
|
||||
<el-select
|
||||
v-model="FormData.tdpz_td"
|
||||
placeholder=""
|
||||
style="width: 200px; height: 30px"
|
||||
>
|
||||
<el-option
|
||||
v-for="(item, index) in options2"
|
||||
:key="index"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item
|
||||
label="驱动名称:"
|
||||
:label-width="formLabelWidth"
|
||||
prop="tdpz_qdmc"
|
||||
>
|
||||
<el-row>
|
||||
<el-col :span="18">
|
||||
<el-input
|
||||
v-model="FormData.tdpz_qdmc"
|
||||
placeholder=""
|
||||
style="width: 200px; height: 30px"
|
||||
></el-input>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-button
|
||||
style="width: 50px; height: 30px"
|
||||
@click="getDriveName"
|
||||
>...</el-button
|
||||
>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item
|
||||
label="IP地址:"
|
||||
:label-width="formLabelWidth"
|
||||
prop="tdpz_ip"
|
||||
>
|
||||
<el-row>
|
||||
<el-col :span="5">
|
||||
<el-input
|
||||
v-model="tdpz_ip1"
|
||||
style="width: 43px; height: 30px"
|
||||
></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1" style="color: #fff">. </el-col>
|
||||
<el-col :span="5">
|
||||
<el-input
|
||||
v-model="tdpz_ip2"
|
||||
style="width: 43px; height: 30px"
|
||||
></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1" style="color: #fff">.</el-col>
|
||||
<el-col :span="5">
|
||||
<el-input
|
||||
v-model="tdpz_ip3"
|
||||
style="width: 43px; height: 30px"
|
||||
></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1" style="color: #fff">.</el-col>
|
||||
<el-col :span="5">
|
||||
<el-input
|
||||
v-model="tdpz_ip4"
|
||||
style="width: 43px; height: 30px"
|
||||
></el-input>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item
|
||||
label="端口号:"
|
||||
:label-width="formLabelWidth"
|
||||
prop="tdpz_port"
|
||||
>
|
||||
<el-input
|
||||
v-model="FormData.tdpz_port"
|
||||
placeholder=""
|
||||
style="width: 200px; height: 30px"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item
|
||||
label="超过时间(ms):"
|
||||
:label-width="formLabelWidth"
|
||||
prop="tdpz_cssj"
|
||||
>
|
||||
<el-input
|
||||
v-model="FormData.tdpz_cssj"
|
||||
placeholder=""
|
||||
style="width: 200px; height: 30px"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item
|
||||
label="间隔时间(ms):"
|
||||
:label-width="formLabelWidth"
|
||||
prop="tdpz_jgsj"
|
||||
>
|
||||
<el-input
|
||||
v-model="FormData.tdpz_jgsj"
|
||||
placeholder=""
|
||||
style="width: 200px; height: 30px"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item
|
||||
label="轮询时间(ms):"
|
||||
:label-width="formLabelWidth"
|
||||
prop="tdpz_lxsj"
|
||||
>
|
||||
<el-input
|
||||
v-model="FormData.tdpz_lxsj"
|
||||
placeholder=""
|
||||
style="width: 200px; height: 30px"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item
|
||||
label="重复次数:"
|
||||
:label-width="formLabelWidth"
|
||||
prop="tdpz_cfcs"
|
||||
>
|
||||
<el-input
|
||||
v-model="FormData.tdpz_cfcs"
|
||||
placeholder=""
|
||||
style="width: 200px; height: 30px"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<div class="super_parmams">
|
||||
<h3>高级参数</h3>
|
||||
<div>
|
||||
<i class="el-icon-caret-bottom" v-if="is_retract"></i>
|
||||
<i class="el-icon-caret-top" v-else="is_retract"></i>
|
||||
<el-button
|
||||
type="text"
|
||||
plain
|
||||
@click="getRetract"
|
||||
style="
|
||||
width: 28px;
|
||||
border: none;
|
||||
color: rgba(16, 16, 16, 1);
|
||||
font-size: 14px;
|
||||
text-align: left;
|
||||
"
|
||||
>
|
||||
收起</el-button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div class="super_con" v-show="is_retract">
|
||||
<el-form
|
||||
:label-position="labelPosition"
|
||||
:rules="rules"
|
||||
ref="ruleForm"
|
||||
>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item>
|
||||
<el-checkbox v-model="FormData.tdpz_watchtime"
|
||||
>watch time(s)</el-checkbox
|
||||
>
|
||||
<el-input
|
||||
v-model="input1"
|
||||
placeholder=""
|
||||
style="width: 200px; height: 30px"
|
||||
:disabled="isdisabled"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item>
|
||||
<el-checkbox v-model="FormData.tdpz_cjsylxdz"
|
||||
>采集使用连续地址</el-checkbox
|
||||
>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="读写占空比:" :label-width="formLabelWidth">
|
||||
<el-row>
|
||||
<el-col :span="10">
|
||||
<el-input
|
||||
v-model="tdpz_dxzkb1"
|
||||
style="width: 91px; height: 30px"
|
||||
></el-input>
|
||||
</el-col>
|
||||
<el-col :span="4">: </el-col>
|
||||
<el-col :span="10">
|
||||
<el-input
|
||||
v-model="tdpz_dxzkb2"
|
||||
style="width: 91px; height: 30px"
|
||||
></el-input>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="05/0F:" :label-width="formLabelWidth">
|
||||
<el-row>
|
||||
<el-col :span="8"
|
||||
><el-radio v-model="FormData.tdpz_050F" label="auto"
|
||||
>auto</el-radio
|
||||
></el-col
|
||||
>
|
||||
<el-col :span="8"
|
||||
><el-radio v-model="FormData.tdpz_050F" label="05"
|
||||
>05</el-radio
|
||||
></el-col
|
||||
>
|
||||
<el-col :span="8"
|
||||
><el-radio v-model="FormData.tdpz_050F" label="0F"
|
||||
>0F</el-radio
|
||||
></el-col
|
||||
>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="06/10:" :label-width="formLabelWidth">
|
||||
<el-row>
|
||||
<el-col :span="8"
|
||||
><el-radio v-model="FormData.tdpz_0610" label="auto"
|
||||
>auto</el-radio
|
||||
></el-col
|
||||
>
|
||||
<el-col :span="8"
|
||||
><el-radio v-model="FormData.tdpz_0610" label="06"
|
||||
>06</el-radio
|
||||
></el-col
|
||||
>
|
||||
<el-col :span="8"
|
||||
><el-radio v-model="FormData.tdpz_0610" label="10"
|
||||
>10</el-radio
|
||||
></el-col
|
||||
>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</div>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="saveGate">保 存</el-button>
|
||||
<el-button @click="add_passage = false">取 消</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
<div class="drvieName_All" v-show="diag_drive">
|
||||
<div class="title">
|
||||
<p class="title_l">协议选择</p>
|
||||
<i class="el-icon-close title_r" @click="diag_drive = false"></i>
|
||||
</div>
|
||||
<el-divider></el-divider>
|
||||
<el-tree
|
||||
:data="datas2"
|
||||
:props="defaultProps"
|
||||
@node-click="handleDetailClick"
|
||||
default-expand-all
|
||||
></el-tree>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { SaveUserAnswer, GetUserAnswer } from "@/api/user";
|
||||
import { Loading } from "element-ui";
|
||||
|
||||
export default {
|
||||
name: "TestTreeView",
|
||||
|
||||
data() {
|
||||
return {
|
||||
flag: false,
|
||||
gateway: JSON.parse(localStorage.getItem("tree"))[0].label,
|
||||
FormData: {
|
||||
tdpz_tdmc: "有线区Channel1",
|
||||
tdpz_td: "网口",
|
||||
tdpz_qdmc: "ModbusTCPClient",
|
||||
tdpz_port: "",
|
||||
tdpz_cssj: "",
|
||||
tdpz_jgsj: "",
|
||||
tdpz_lxsj: "",
|
||||
tdpz_cfcs: "",
|
||||
tdpz_watchtime: true,
|
||||
tdpz_cjsylxdz: false,
|
||||
tdpz_dxzkb: "",
|
||||
tdpz_050F: "auto",
|
||||
tdpz_0610: "auto",
|
||||
},
|
||||
tdpz_dxzkb1: "1",
|
||||
tdpz_dxzkb2: "1",
|
||||
tdpz_ip1: "",
|
||||
tdpz_ip2: "",
|
||||
tdpz_ip3: "",
|
||||
tdpz_ip4: "",
|
||||
options1: [
|
||||
{
|
||||
value: "有线区Channel1",
|
||||
label: "有线区Channel1",
|
||||
},
|
||||
{
|
||||
value: "无线区Channel1",
|
||||
label: "无线区Channel1",
|
||||
},
|
||||
],
|
||||
options2: [
|
||||
{
|
||||
value: "网口",
|
||||
label: "网口",
|
||||
},
|
||||
{
|
||||
value: "串口",
|
||||
label: "串口",
|
||||
},
|
||||
],
|
||||
value1: "有线区Channel1",
|
||||
value2: "网口",
|
||||
diag_drive: false,
|
||||
isdisabled: true,
|
||||
radio: "1",
|
||||
is_retract: true,
|
||||
labelPosition: "left",
|
||||
formLabelWidth: "116px",
|
||||
input1: 192,
|
||||
add_passage: false,
|
||||
rightMenu: "",
|
||||
dialogVisible: true,
|
||||
menuShow: false,
|
||||
datas: [],
|
||||
datas2: [
|
||||
{
|
||||
label: "通用标准",
|
||||
children: [
|
||||
{
|
||||
label: "ModbusTCPClient",
|
||||
},
|
||||
{
|
||||
label: "ModbusRTU_over_TCP",
|
||||
},
|
||||
{
|
||||
label: "OPCUAClient",
|
||||
},
|
||||
{
|
||||
label: "OPCDAClient",
|
||||
},
|
||||
{
|
||||
label: "MQTTClient",
|
||||
},
|
||||
{
|
||||
label: "OPCXMLDAClient",
|
||||
},
|
||||
{
|
||||
label: "环保212协议网口监听",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "PLC",
|
||||
children: [
|
||||
{
|
||||
label: "Slemens S7-200 Network",
|
||||
},
|
||||
{
|
||||
label: "Slemens S7-300 Network",
|
||||
},
|
||||
{
|
||||
label: "Slemens S7-400 Network",
|
||||
},
|
||||
{
|
||||
label: "Slemens S7-1200 Network",
|
||||
},
|
||||
{
|
||||
label: "Slemens S7-1500 Network",
|
||||
},
|
||||
{
|
||||
label: "EtherNet/IP CIP协议(AB OMR ON)",
|
||||
},
|
||||
{
|
||||
label: "MC_Qna-3E(三菱 基恩士 松下)",
|
||||
},
|
||||
{
|
||||
label: "MC_A-1E_Binary",
|
||||
},
|
||||
{
|
||||
label: "OMRON-FINS",
|
||||
},
|
||||
{
|
||||
label: "横河PLC",
|
||||
},
|
||||
{
|
||||
label: "西门子FetchWirte",
|
||||
},
|
||||
{
|
||||
label: "富机 FUJI_SPH_NET",
|
||||
},
|
||||
{
|
||||
label: "基恩士上位链路通讯",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "智能建筑",
|
||||
children: [],
|
||||
},
|
||||
{
|
||||
label: "厂家定制",
|
||||
children: [],
|
||||
},
|
||||
{
|
||||
label: "电力行业标准",
|
||||
children: [
|
||||
{
|
||||
label: "IEC104",
|
||||
},
|
||||
{
|
||||
label: "DLT645_over_TCP",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "CNC数控",
|
||||
children: [],
|
||||
},
|
||||
{
|
||||
label: "私有协议",
|
||||
children: [],
|
||||
},
|
||||
],
|
||||
defaultProps: {
|
||||
children: "children",
|
||||
label: "label",
|
||||
},
|
||||
rules: {
|
||||
tdpz_tdmc: [
|
||||
{ required: true, message: "请输入通道名称", trigger: "change" },
|
||||
],
|
||||
tdpz_td: [{ required: true, message: "请输入通道", trigger: "change" }],
|
||||
tdpz_qdmc: [
|
||||
{ required: true, message: "请输入驱动名称", trigger: "change" },
|
||||
],
|
||||
tdpz_ip: [{ required: true, message: "请输入ip地址", trigger: "blur" }],
|
||||
tdpz_port: [
|
||||
{ required: true, message: "请输入端口号", trigger: "blur" },
|
||||
],
|
||||
tdpz_cssj: [
|
||||
{ required: true, message: "请输入超出时间", trigger: "blur" },
|
||||
],
|
||||
tdpz_jgsj: [
|
||||
{ required: true, message: "请输入间隔时间", trigger: "blur" },
|
||||
],
|
||||
tdpz_lxsj: [
|
||||
{ required: true, message: "请输入轮询时间", trigger: "blur" },
|
||||
],
|
||||
tdpz_cfcs: [
|
||||
{ required: true, message: "请输入重复次数", trigger: "blur" },
|
||||
],
|
||||
},
|
||||
};
|
||||
},
|
||||
created() {
|
||||
console.log(this.$store.state.tree);
|
||||
},
|
||||
methods: {
|
||||
//编辑
|
||||
edit(event) {
|
||||
this.flag = true;
|
||||
},
|
||||
//完成编辑
|
||||
done(event) {
|
||||
this.flag = false;
|
||||
let tree = this.$store.state.tree;
|
||||
tree[0].label = this.gateway;
|
||||
this.$store.commit("setTree", tree);
|
||||
},
|
||||
rightClick(e, data, node) {
|
||||
this.menuShow = false;
|
||||
this.menuShow = true;
|
||||
e.preventDefault(); //关闭浏览器右键默认事件
|
||||
this.rightMenu = { top: e.pageY + "px", left: e.pageX + "px" };
|
||||
document.addEventListener("click", (ev) => {
|
||||
ev.stopImmediatePropagation();
|
||||
if (ev.target !== document.querySelector(".el-menu-item.is-active")) {
|
||||
this.foo();
|
||||
}
|
||||
});
|
||||
},
|
||||
// 点击时候的判断,判断是否为新增网关
|
||||
selectMenuNode(index, indexPath) {
|
||||
console.log(index);
|
||||
if (index == 1) {
|
||||
this.add_passage = true;
|
||||
}
|
||||
},
|
||||
foo() {
|
||||
// 取消鼠标监听事件 菜单栏
|
||||
this.menuShow = false;
|
||||
document.removeEventListener("click", this.foo); // 关掉监听，
|
||||
},
|
||||
treeNodeClick(key) {
|
||||
// console.log
|
||||
this.foo();
|
||||
},
|
||||
// 收起点击事件的判断
|
||||
getRetract() {
|
||||
if (this.is_retract == true) {
|
||||
this.is_retract = false;
|
||||
} else {
|
||||
this.is_retract = true;
|
||||
}
|
||||
},
|
||||
getDriveName() {
|
||||
this.diag_drive = true;
|
||||
},
|
||||
Merge(value, value1, value2, value3, value4) {
|
||||
value = value1 + "." + value2 + "." + value3 + "." + value4;
|
||||
return value;
|
||||
},
|
||||
async saveGate() {
|
||||
|
||||
this.add_passage = false;
|
||||
var obj ={
|
||||
tdpz_tdmc:this.FormData.tdpz_tdmc,
|
||||
tdpz_td:this.FormData.tdpz_td,
|
||||
tdpz_qdmc:this.FormData.tdpz_qdmc,
|
||||
tdpz_port:this.FormData.tdpz_port,
|
||||
tdpz_ccsj:this.FormData.tdpz_cssj,
|
||||
tdpz_jgsj:this.FormData.tdpz_jgsj,
|
||||
tdpz_ip:this.tdpz_ip1+"."+this.tdpz_ip2+"."+this.tdpz_ip3+"."+this.tdpz_ip4,
|
||||
tdpz_lxsj:this.FormData.tdpz_lxsj,
|
||||
tdpz_cfcs:this.FormData.tdpz_cfcs,
|
||||
tdpz_watchtime:String(Number(this.FormData.tdpz_watchtime)),
|
||||
tdpz_cjsylxdz:String(Number(this.FormData.tdpz_cjsylxdz)),
|
||||
tdpz_dxzkb:this.tdpz_dxzkb1+":"+this.tdpz_dxzkb2,
|
||||
tdpz_050F:this.FormData.tdpz_050F,
|
||||
tdpz_0610:this.FormData.tdpz_0610,
|
||||
}
|
||||
let datas = sessionStorage.getItem("DB-IotLite_yx");
|
||||
datas = { ...JSON.parse(datas), ...obj};
|
||||
let res = await SaveUserAnswer({
|
||||
mark: "DB-IotLite_yx",
|
||||
user_id: "USER202307301109254198",
|
||||
mark_value: JSON.stringify(datas),
|
||||
});
|
||||
sessionStorage.setItem("DB-IotLite_yx", JSON.stringify(this.FormData));
|
||||
console.log(res);
|
||||
console.log(res.data.data.mark_value);
|
||||
// this.$router.push("/dbcollectdevice");
|
||||
},
|
||||
handleDetailClick(data, node, value) {
|
||||
console.log(data.label);
|
||||
this.FormData.tdpz_qdmc = data.label;
|
||||
this.diag_drive = false;
|
||||
},
|
||||
async GetUserAnswer() {
|
||||
let answer = await GetUserAnswer({
|
||||
mark: "DB-IotLite_yx",
|
||||
user_id: "USER202307301109254198",
|
||||
});
|
||||
console.log(answer);
|
||||
let obj = JSON.parse(answer.data.data.mark_value);
|
||||
console.log(obj);
|
||||
// this.FormData.
|
||||
if (obj.tdpz_dxzkb) {
|
||||
this.tdpz_dxzkb1 = obj.tdpz_dxzkb.split(":")[0];
|
||||
this.tdpz_dxzkb2 = obj.tdpz_dxzkb.split(":")[1];
|
||||
}
|
||||
this.FormData.tdpz_watchtime = Boolean(obj.tdpz_watchtime);
|
||||
// console.log(this.FormData.tdpz_watchtime);
|
||||
this.FormData.tdpz_cjsylxdz = Boolean(obj.tdpz_cjsylxdz);
|
||||
if (obj.tdpz_ip) {
|
||||
this.tdpz_ip1 = obj.tdpz_ip.split(".")[0];
|
||||
this.tdpz_ip2 = obj.tdpz_ip.split(".")[1];
|
||||
this.tdpz_ip3 = obj.tdpz_ip.split(".")[2];
|
||||
this.tdpz_ip4 = obj.tdpz_ip.split(".")[3];
|
||||
}
|
||||
this.FormData.tdpz_tdmc = obj.tdpz_tdmc;
|
||||
this.FormData.tdpz_td = obj.tdpz_td;
|
||||
this.FormData.tdpz_qdmc = obj.tdpz_qdmc;
|
||||
this.FormData.tdpz_050F = obj.tdpz_050F;
|
||||
this.FormData.tdpz_0610 = obj.tdpz_0610;
|
||||
this.FormData.tdpz_port = obj.tdpz_port;
|
||||
this.FormData.tdpz_cssj = obj.tdpz_cssj;
|
||||
this.FormData.tdpz_jgsj = obj.tdpz_jgsj;
|
||||
this.FormData.tdpz_lxsj = obj.tdpz_lxsj;
|
||||
this.FormData.tdpz_cfcs = obj.tdpz_cfcs;
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.Loading = true;
|
||||
this.GetUserAnswer();
|
||||
this.Loading = false;
|
||||
// let res2 = GetUserAnswer()
|
||||
},
|
||||
|
||||
watch: {
|
||||
// "FormData.tdpz_watchtime": {
|
||||
// handler(old) {
|
||||
// if (old) {
|
||||
// this.isdisabled = false;
|
||||
// } else {
|
||||
// this.isdisabled = true;
|
||||
// }
|
||||
// },
|
||||
// },
|
||||
"FormData.tdpz_watchtime"(newval) {
|
||||
console.log(newval);
|
||||
if (newval) {
|
||||
this.isdisabled = true;
|
||||
} else {
|
||||
this.isdisabled = false;
|
||||
}
|
||||
},
|
||||
},
|
||||
directives: {
|
||||
clickoutside: {
|
||||
bind: function (el, binding, vnode) {
|
||||
function documentHandler(e) {
|
||||
if (el.contains(e.target)) {
|
||||
return false;
|
||||
}
|
||||
if (binding.expression) {
|
||||
binding.value(e);
|
||||
}
|
||||
}
|
||||
el._vueClickOutside_ = documentHandler;
|
||||
document.addEventListener("click", documentHandler);
|
||||
},
|
||||
unbind: function (el, binding) {
|
||||
document.removeEventListener("click", el._vueClickOutside_);
|
||||
delete el._vueClickOutside_;
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.tree_menu {
|
||||
position: absolute;
|
||||
width: 286px;
|
||||
left: 64px;
|
||||
top: 104px;
|
||||
width: 286px;
|
||||
height: 753px;
|
||||
line-height: 20px;
|
||||
border-radius: 3px;
|
||||
background-color: rgba(255, 255, 255, 1);
|
||||
text-align: center;
|
||||
border: 1px solid rgba(220, 220, 220, 1);
|
||||
}
|
||||
|
||||
.tree_rightmenu {
|
||||
position: fixed;
|
||||
width: 120px;
|
||||
border: 1px solid rgba(0, 0, 0, 0.15);
|
||||
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.super_parmams {
|
||||
display: flex;
|
||||
color: #fff !important;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: 668px;
|
||||
|
||||
i {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
/deep/ .pas_params {
|
||||
.el-col-12:last-child {
|
||||
padding-right: 150px;
|
||||
}
|
||||
|
||||
.el-col-12:first-child {
|
||||
padding-right: 38px;
|
||||
}
|
||||
|
||||
.el-input__inner {
|
||||
height: 30px;
|
||||
text-align: left;
|
||||
padding: 0px 8px;
|
||||
}
|
||||
|
||||
.el-row {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
|
||||
.el-col-1 {
|
||||
color: #fff !important;
|
||||
text-align: center;
|
||||
line-height: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.el-col-6 {
|
||||
height: 40px;
|
||||
top: 6px;
|
||||
left: 77px;
|
||||
position: relative;
|
||||
width: 50px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.super_con {
|
||||
.el-col-12:last-child {
|
||||
padding-right: 28px;
|
||||
}
|
||||
|
||||
.el-col-12:first-child {
|
||||
padding-right: 42px;
|
||||
}
|
||||
|
||||
.el-input__inner {
|
||||
text-align: left;
|
||||
padding: 0 8px;
|
||||
}
|
||||
|
||||
.el-row {
|
||||
color: #fff !important;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
|
||||
.el-col-4 {
|
||||
padding-left: 5px;
|
||||
width: 14px;
|
||||
text-align: center;
|
||||
line-height: 4px;
|
||||
height: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.el-dialog__footer {
|
||||
padding: 18px 1.25rem 50px;
|
||||
}
|
||||
|
||||
.dialog-footer {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
bottom: 45px;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
/deep/ .drvieName_All {
|
||||
position: absolute;
|
||||
left: 1408px;
|
||||
top: 140px;
|
||||
width: 435px;
|
||||
max-height: 720px;
|
||||
z-index: 10000;
|
||||
border: 1px solid #f5f5f5;
|
||||
|
||||
.title {
|
||||
background-color: #fff;
|
||||
padding: 5px 6px 5px 25px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.title_l {
|
||||
width: 103px;
|
||||
height: 26px;
|
||||
color: rgba(16, 16, 16, 1);
|
||||
font-size: 18px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.title_r {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
line-height: 24px;
|
||||
cursor: pointer;
|
||||
color: rgba(111, 103, 103, 1);
|
||||
}
|
||||
}
|
||||
|
||||
// h3 {
|
||||
// padding-bottom: 10px;
|
||||
// background-color: #fff;
|
||||
// }
|
||||
|
||||
.el-divider--horizontal {
|
||||
margin: 0px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,916 @@
|
|||
<!-- 网关通道 -->
|
||||
<template>
|
||||
<div>
|
||||
<!-- v-click-outside="closeMenu" -->
|
||||
<div>
|
||||
<div class="tree_menu" v-show="dialogVisible">
|
||||
<el-tree
|
||||
:data="$store.state.tree"
|
||||
:props="defaultProps"
|
||||
default-expand-all
|
||||
@node-contextmenu="rightClick"
|
||||
@node-click="treeNodeClick"
|
||||
ref="tree"
|
||||
>
|
||||
<span class="custom-tree-node" slot-scope="{ node, data }">
|
||||
<template v-if="data.editing == 1">
|
||||
<el-button
|
||||
type="mini"
|
||||
v-if="flag"
|
||||
style="right: 50px; top: 0; position: absolute; border: none"
|
||||
@click.stop="done"
|
||||
>完成</el-button
|
||||
>
|
||||
<el-button
|
||||
type="mini"
|
||||
style="right: 0; top: 0; position: absolute; border: none"
|
||||
@click.stop="edit"
|
||||
>编辑</el-button
|
||||
>
|
||||
<span v-if="!flag">{{ data.label }}</span>
|
||||
<el-input
|
||||
v-else
|
||||
style="width: 150px"
|
||||
v-model="gateway"
|
||||
></el-input>
|
||||
</template>
|
||||
<template v-else>{{ data.label }}</template>
|
||||
</span>
|
||||
</el-tree>
|
||||
<!-- 树形控件右键组件 -->
|
||||
<div v-show="menuShow" class="tree_rightmenu" :style="{ ...rightMenu }">
|
||||
<el-menu
|
||||
class="el-menu-vertical-demo"
|
||||
@select="selectMenuNode"
|
||||
default-active="#0078FE"
|
||||
>
|
||||
<el-menu-item id="menuitem" index="1" style="font-size: 12px">
|
||||
<span slot="title">新建通道</span>
|
||||
</el-menu-item>
|
||||
<el-menu-item index="2" style="font-size: 12px">
|
||||
<span slot="title">取 消</span>
|
||||
</el-menu-item>
|
||||
</el-menu>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pas_params">
|
||||
<el-dialog
|
||||
title="通道参数设置"
|
||||
:visible.sync="add_passage"
|
||||
width="765px"
|
||||
v-loading="Loading"
|
||||
>
|
||||
<el-form
|
||||
:model="FormData"
|
||||
:label-position="labelPosition"
|
||||
:rules="rules"
|
||||
ref="ruleForm"
|
||||
>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item
|
||||
label="通道名称:"
|
||||
:label-width="formLabelWidth"
|
||||
prop="tdpz_tdmc"
|
||||
>
|
||||
<el-select
|
||||
v-model="FormData.tdpz_tdmc"
|
||||
placeholder=""
|
||||
style="width: 200px; height: 30px"
|
||||
>
|
||||
<el-option
|
||||
v-for="(item, index) in options1"
|
||||
:key="index"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item
|
||||
label="通道:"
|
||||
:label-width="formLabelWidth"
|
||||
prop="tdpz_td"
|
||||
>
|
||||
<el-select
|
||||
v-model="FormData.tdpz_td"
|
||||
placeholder=""
|
||||
style="width: 200px; height: 30px"
|
||||
>
|
||||
<el-option
|
||||
v-for="(item, index) in options2"
|
||||
:key="index"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item
|
||||
label="驱动名称:"
|
||||
:label-width="formLabelWidth"
|
||||
prop="tdpz_qdmc"
|
||||
>
|
||||
<el-row>
|
||||
<el-col :span="18">
|
||||
<el-input
|
||||
v-model="FormData.tdpz_qdmc"
|
||||
placeholder=""
|
||||
style="width: 200px; height: 30px"
|
||||
></el-input>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-button
|
||||
style="width: 50px; height: 30px"
|
||||
@click="getDriveName"
|
||||
>...</el-button
|
||||
>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item
|
||||
label="IP地址:"
|
||||
:label-width="formLabelWidth"
|
||||
prop="tdpz_ip"
|
||||
>
|
||||
<el-row>
|
||||
<el-col :span="5">
|
||||
<el-input
|
||||
v-model="tdpz_ip1"
|
||||
style="width: 43px; height: 30px"
|
||||
></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1" style="color: #fff">. </el-col>
|
||||
<el-col :span="5">
|
||||
<el-input
|
||||
v-model="tdpz_ip2"
|
||||
style="width: 43px; height: 30px"
|
||||
></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1" style="color: #fff">.</el-col>
|
||||
<el-col :span="5">
|
||||
<el-input
|
||||
v-model="tdpz_ip3"
|
||||
style="width: 43px; height: 30px"
|
||||
></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1" style="color: #fff">.</el-col>
|
||||
<el-col :span="5">
|
||||
<el-input
|
||||
v-model="tdpz_ip4"
|
||||
style="width: 43px; height: 30px"
|
||||
></el-input>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item
|
||||
label="端口号:"
|
||||
:label-width="formLabelWidth"
|
||||
prop="tdpz_port"
|
||||
>
|
||||
<el-input
|
||||
v-model="FormData.tdpz_port"
|
||||
placeholder=""
|
||||
style="width: 200px; height: 30px"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item
|
||||
label="超过时间(ms):"
|
||||
:label-width="formLabelWidth"
|
||||
prop="tdpz_cssj"
|
||||
>
|
||||
<el-input
|
||||
v-model="FormData.tdpz_cssj"
|
||||
placeholder=""
|
||||
style="width: 200px; height: 30px"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item
|
||||
label="间隔时间(ms):"
|
||||
:label-width="formLabelWidth"
|
||||
prop="tdpz_jgsj"
|
||||
>
|
||||
<el-input
|
||||
v-model="FormData.tdpz_jgsj"
|
||||
placeholder=""
|
||||
style="width: 200px; height: 30px"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item
|
||||
label="轮询时间(ms):"
|
||||
:label-width="formLabelWidth"
|
||||
prop="tdpz_lxsj"
|
||||
>
|
||||
<el-input
|
||||
v-model="FormData.tdpz_lxsj"
|
||||
placeholder=""
|
||||
style="width: 200px; height: 30px"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item
|
||||
label="重复次数:"
|
||||
:label-width="formLabelWidth"
|
||||
prop="tdpz_cfcs"
|
||||
>
|
||||
<el-input
|
||||
v-model="FormData.tdpz_cfcs"
|
||||
placeholder=""
|
||||
style="width: 200px; height: 30px"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<div class="super_parmams">
|
||||
<h3>高级参数</h3>
|
||||
<div>
|
||||
<i class="el-icon-caret-bottom" v-if="is_retract"></i>
|
||||
<i class="el-icon-caret-top" v-else="is_retract"></i>
|
||||
<el-button
|
||||
type="text"
|
||||
plain
|
||||
@click="getRetract"
|
||||
style="
|
||||
width: 28px;
|
||||
border: none;
|
||||
color: rgba(16, 16, 16, 1);
|
||||
font-size: 14px;
|
||||
text-align: left;
|
||||
"
|
||||
>
|
||||
收起</el-button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div class="super_con" v-show="is_retract">
|
||||
<el-form
|
||||
:label-position="labelPosition"
|
||||
:rules="rules"
|
||||
ref="ruleForm"
|
||||
>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item>
|
||||
<el-checkbox v-model="FormData.tdpz_watchtime"
|
||||
>watch time(s)</el-checkbox
|
||||
>
|
||||
<el-input
|
||||
v-model="input1"
|
||||
placeholder=""
|
||||
style="width: 200px; height: 30px"
|
||||
:disabled="isdisabled"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item>
|
||||
<el-checkbox v-model="FormData.tdpz_cjsylxdz"
|
||||
>采集使用连续地址</el-checkbox
|
||||
>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="读写占空比:" :label-width="formLabelWidth">
|
||||
<el-row>
|
||||
<el-col :span="10">
|
||||
<el-input
|
||||
v-model="tdpz_dxzkb1"
|
||||
style="width: 91px; height: 30px"
|
||||
></el-input>
|
||||
</el-col>
|
||||
<el-col :span="4">: </el-col>
|
||||
<el-col :span="10">
|
||||
<el-input
|
||||
v-model="tdpz_dxzkb2"
|
||||
style="width: 91px; height: 30px"
|
||||
></el-input>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="05/0F:" :label-width="formLabelWidth">
|
||||
<el-row>
|
||||
<el-col :span="8"
|
||||
><el-radio v-model="FormData.tdpz_050F" label="auto"
|
||||
>auto</el-radio
|
||||
></el-col
|
||||
>
|
||||
<el-col :span="8"
|
||||
><el-radio v-model="FormData.tdpz_050F" label="05"
|
||||
>05</el-radio
|
||||
></el-col
|
||||
>
|
||||
<el-col :span="8"
|
||||
><el-radio v-model="FormData.tdpz_050F" label="0F"
|
||||
>0F</el-radio
|
||||
></el-col
|
||||
>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="06/10:" :label-width="formLabelWidth">
|
||||
<el-row>
|
||||
<el-col :span="8"
|
||||
><el-radio v-model="FormData.tdpz_0610" label="auto"
|
||||
>auto</el-radio
|
||||
></el-col
|
||||
>
|
||||
<el-col :span="8"
|
||||
><el-radio v-model="FormData.tdpz_0610" label="06"
|
||||
>06</el-radio
|
||||
></el-col
|
||||
>
|
||||
<el-col :span="8"
|
||||
><el-radio v-model="FormData.tdpz_0610" label="10"
|
||||
>10</el-radio
|
||||
></el-col
|
||||
>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</div>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="saveGate">保 存</el-button>
|
||||
<el-button @click="add_passage = false">取 消</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
<div class="drvieName_All" v-show="diag_drive">
|
||||
<div class="title">
|
||||
<p class="title_l">协议选择</p>
|
||||
<i class="el-icon-close title_r" @click="diag_drive = false"></i>
|
||||
</div>
|
||||
<el-divider></el-divider>
|
||||
<el-tree
|
||||
:data="datas2"
|
||||
:props="defaultProps"
|
||||
@node-click="handleDetailClick"
|
||||
default-expand-all
|
||||
></el-tree>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { SaveUserAnswer, GetUserAnswer } from "@/api/user";
|
||||
import { Loading } from "element-ui";
|
||||
|
||||
export default {
|
||||
name: "TestTreeView",
|
||||
|
||||
data() {
|
||||
return {
|
||||
flag: false,
|
||||
gateway: JSON.parse(localStorage.getItem("tree"))[0].label,
|
||||
FormData: {
|
||||
tdpz_tdmc: "有线区Channel1",
|
||||
tdpz_td: "网口",
|
||||
tdpz_qdmc: "ModbusTCPClient",
|
||||
tdpz_port: "",
|
||||
tdpz_cssj: "",
|
||||
tdpz_jgsj: "",
|
||||
tdpz_lxsj: "",
|
||||
tdpz_cfcs: "",
|
||||
tdpz_watchtime: true,
|
||||
tdpz_cjsylxdz: false,
|
||||
tdpz_dxzkb: "",
|
||||
tdpz_050F: "auto",
|
||||
tdpz_0610: "auto",
|
||||
},
|
||||
tdpz_dxzkb1: "1",
|
||||
tdpz_dxzkb2: "1",
|
||||
tdpz_ip1: "",
|
||||
tdpz_ip2: "",
|
||||
tdpz_ip3: "",
|
||||
tdpz_ip4: "",
|
||||
options1: [
|
||||
{
|
||||
value: "有线区Channel1",
|
||||
label: "有线区Channel1",
|
||||
},
|
||||
{
|
||||
value: "无线区Channel1",
|
||||
label: "无线区Channel1",
|
||||
},
|
||||
],
|
||||
options2: [
|
||||
{
|
||||
value: "网口",
|
||||
label: "网口",
|
||||
},
|
||||
{
|
||||
value: "串口",
|
||||
label: "串口",
|
||||
},
|
||||
],
|
||||
value1: "有线区Channel1",
|
||||
value2: "网口",
|
||||
diag_drive: false,
|
||||
isdisabled: true,
|
||||
radio: "1",
|
||||
is_retract: true,
|
||||
labelPosition: "left",
|
||||
formLabelWidth: "116px",
|
||||
input1: 192,
|
||||
add_passage: false,
|
||||
rightMenu: "",
|
||||
dialogVisible: true,
|
||||
menuShow: false,
|
||||
datas: [],
|
||||
datas2: [
|
||||
{
|
||||
label: "通用标准",
|
||||
children: [
|
||||
{
|
||||
label: "ModbusTCPClient",
|
||||
},
|
||||
{
|
||||
label: "ModbusRTU_over_TCP",
|
||||
},
|
||||
{
|
||||
label: "OPCUAClient",
|
||||
},
|
||||
{
|
||||
label: "OPCDAClient",
|
||||
},
|
||||
{
|
||||
label: "MQTTClient",
|
||||
},
|
||||
{
|
||||
label: "OPCXMLDAClient",
|
||||
},
|
||||
{
|
||||
label: "环保212协议网口监听",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "PLC",
|
||||
children: [
|
||||
{
|
||||
label: "Slemens S7-200 Network",
|
||||
},
|
||||
{
|
||||
label: "Slemens S7-300 Network",
|
||||
},
|
||||
{
|
||||
label: "Slemens S7-400 Network",
|
||||
},
|
||||
{
|
||||
label: "Slemens S7-1200 Network",
|
||||
},
|
||||
{
|
||||
label: "Slemens S7-1500 Network",
|
||||
},
|
||||
{
|
||||
label: "EtherNet/IP CIP协议(AB OMR ON)",
|
||||
},
|
||||
{
|
||||
label: "MC_Qna-3E(三菱 基恩士 松下)",
|
||||
},
|
||||
{
|
||||
label: "MC_A-1E_Binary",
|
||||
},
|
||||
{
|
||||
label: "OMRON-FINS",
|
||||
},
|
||||
{
|
||||
label: "横河PLC",
|
||||
},
|
||||
{
|
||||
label: "西门子FetchWirte",
|
||||
},
|
||||
{
|
||||
label: "富机 FUJI_SPH_NET",
|
||||
},
|
||||
{
|
||||
label: "基恩士上位链路通讯",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "智能建筑",
|
||||
children: [],
|
||||
},
|
||||
{
|
||||
label: "厂家定制",
|
||||
children: [],
|
||||
},
|
||||
{
|
||||
label: "电力行业标准",
|
||||
children: [
|
||||
{
|
||||
label: "IEC104",
|
||||
},
|
||||
{
|
||||
label: "DLT645_over_TCP",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "CNC数控",
|
||||
children: [],
|
||||
},
|
||||
{
|
||||
label: "私有协议",
|
||||
children: [],
|
||||
},
|
||||
],
|
||||
defaultProps: {
|
||||
children: "children",
|
||||
label: "label",
|
||||
},
|
||||
rules: {
|
||||
tdpz_tdmc: [
|
||||
{ required: true, message: "请输入通道名称", trigger: "change" },
|
||||
],
|
||||
tdpz_td: [{ required: true, message: "请输入通道", trigger: "change" }],
|
||||
tdpz_qdmc: [
|
||||
{ required: true, message: "请输入驱动名称", trigger: "change" },
|
||||
],
|
||||
tdpz_ip: [{ required: true, message: "请输入ip地址", trigger: "blur" }],
|
||||
tdpz_port: [
|
||||
{ required: true, message: "请输入端口号", trigger: "blur" },
|
||||
],
|
||||
tdpz_cssj: [
|
||||
{ required: true, message: "请输入超出时间", trigger: "blur" },
|
||||
],
|
||||
tdpz_jgsj: [
|
||||
{ required: true, message: "请输入间隔时间", trigger: "blur" },
|
||||
],
|
||||
tdpz_lxsj: [
|
||||
{ required: true, message: "请输入轮询时间", trigger: "blur" },
|
||||
],
|
||||
tdpz_cfcs: [
|
||||
{ required: true, message: "请输入重复次数", trigger: "blur" },
|
||||
],
|
||||
},
|
||||
};
|
||||
},
|
||||
created() {
|
||||
console.log(this.$store.state.tree);
|
||||
},
|
||||
methods: {
|
||||
//编辑
|
||||
edit(event) {
|
||||
this.flag = true;
|
||||
},
|
||||
//完成编辑
|
||||
done(event) {
|
||||
this.flag = false;
|
||||
let tree = this.$store.state.tree;
|
||||
tree[0].label = this.gateway;
|
||||
this.$store.commit("setTree", tree);
|
||||
},
|
||||
rightClick(e, data, node) {
|
||||
this.menuShow = false;
|
||||
this.menuShow = true;
|
||||
e.preventDefault(); //关闭浏览器右键默认事件
|
||||
this.rightMenu = { top: e.pageY + "px", left: e.pageX + "px" };
|
||||
document.addEventListener("click", (ev) => {
|
||||
ev.stopImmediatePropagation();
|
||||
if (ev.target !== document.querySelector(".el-menu-item.is-active")) {
|
||||
this.foo();
|
||||
}
|
||||
});
|
||||
},
|
||||
// 点击时候的判断,判断是否为新增网关
|
||||
selectMenuNode(index, indexPath) {
|
||||
console.log(index);
|
||||
if (index == 1) {
|
||||
this.add_passage = true;
|
||||
}
|
||||
},
|
||||
foo() {
|
||||
// 取消鼠标监听事件 菜单栏
|
||||
this.menuShow = false;
|
||||
document.removeEventListener("click", this.foo); // 关掉监听，
|
||||
},
|
||||
treeNodeClick(key) {
|
||||
// console.log
|
||||
this.foo();
|
||||
},
|
||||
// 收起点击事件的判断
|
||||
getRetract() {
|
||||
if (this.is_retract == true) {
|
||||
this.is_retract = false;
|
||||
} else {
|
||||
this.is_retract = true;
|
||||
}
|
||||
},
|
||||
getDriveName() {
|
||||
this.diag_drive = true;
|
||||
},
|
||||
Merge(value, value1, value2, value3, value4) {
|
||||
value = value1 + "." + value2 + "." + value3 + "." + value4;
|
||||
return value;
|
||||
},
|
||||
async saveGate() {
|
||||
|
||||
this.add_passage = false;
|
||||
var obj ={
|
||||
tdpz_tdmc:this.FormData.tdpz_tdmc,
|
||||
tdpz_td:this.FormData.tdpz_td,
|
||||
tdpz_qdmc:this.FormData.tdpz_qdmc,
|
||||
tdpz_port:this.FormData.tdpz_port,
|
||||
tdpz_ccsj:this.FormData.tdpz_cssj,
|
||||
tdpz_jgsj:this.FormData.tdpz_jgsj,
|
||||
tdpz_ip:this.tdpz_ip1+"."+this.tdpz_ip2+"."+this.tdpz_ip3+"."+this.tdpz_ip4,
|
||||
tdpz_lxsj:this.FormData.tdpz_lxsj,
|
||||
tdpz_cfcs:this.FormData.tdpz_cfcs,
|
||||
tdpz_watchtime:String(Number(this.FormData.tdpz_watchtime)),
|
||||
tdpz_cjsylxdz:String(Number(this.FormData.tdpz_cjsylxdz)),
|
||||
tdpz_dxzkb:this.tdpz_dxzkb1+":"+this.tdpz_dxzkb2,
|
||||
tdpz_050F:this.FormData.tdpz_050F,
|
||||
tdpz_0610:this.FormData.tdpz_0610,
|
||||
}
|
||||
let datas = sessionStorage.getItem("DB-IotLite_yx");
|
||||
datas = { ...JSON.parse(datas), ...obj};
|
||||
let res = await SaveUserAnswer({
|
||||
mark: "DB-IotLite_yx",
|
||||
user_id: "USER202307301109254198",
|
||||
mark_value: JSON.stringify(datas),
|
||||
});
|
||||
sessionStorage.setItem("DB-IotLite_yx", JSON.stringify(datas));
|
||||
console.log(res);
|
||||
console.log(res.data.data.mark_value);
|
||||
// this.$router.push("/dbcollectdevice");
|
||||
},
|
||||
handleDetailClick(data, node, value) {
|
||||
console.log(data.label);
|
||||
this.FormData.tdpz_qdmc = data.label;
|
||||
this.diag_drive = false;
|
||||
},
|
||||
async GetUserAnswer() {
|
||||
let answer = await GetUserAnswer({
|
||||
mark: "DB-IotLite_yx",
|
||||
user_id: "USER202307301109254198",
|
||||
});
|
||||
console.log(answer);
|
||||
let obj = JSON.parse(answer.data.data.mark_value);
|
||||
console.log(obj);
|
||||
// this.FormData.
|
||||
if (obj.tdpz_dxzkb) {
|
||||
this.tdpz_dxzkb1 = obj.tdpz_dxzkb.split(":")[0];
|
||||
this.tdpz_dxzkb2 = obj.tdpz_dxzkb.split(":")[1];
|
||||
}
|
||||
this.FormData.tdpz_watchtime = Boolean(obj.tdpz_watchtime);
|
||||
// console.log(this.FormData.tdpz_watchtime);
|
||||
this.FormData.tdpz_cjsylxdz = Boolean(obj.tdpz_cjsylxdz);
|
||||
if (obj.tdpz_ip) {
|
||||
this.tdpz_ip1 = obj.tdpz_ip.split(".")[0];
|
||||
this.tdpz_ip2 = obj.tdpz_ip.split(".")[1];
|
||||
this.tdpz_ip3 = obj.tdpz_ip.split(".")[2];
|
||||
this.tdpz_ip4 = obj.tdpz_ip.split(".")[3];
|
||||
}
|
||||
this.FormData.tdpz_tdmc = obj.tdpz_tdmc;
|
||||
this.FormData.tdpz_td = obj.tdpz_td;
|
||||
this.FormData.tdpz_qdmc = obj.tdpz_qdmc;
|
||||
this.FormData.tdpz_050F = obj.tdpz_050F;
|
||||
this.FormData.tdpz_0610 = obj.tdpz_0610;
|
||||
this.FormData.tdpz_port = obj.tdpz_port;
|
||||
this.FormData.tdpz_cssj = obj.tdpz_cssj;
|
||||
this.FormData.tdpz_jgsj = obj.tdpz_jgsj;
|
||||
this.FormData.tdpz_lxsj = obj.tdpz_lxsj;
|
||||
this.FormData.tdpz_cfcs = obj.tdpz_cfcs;
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.Loading = true;
|
||||
this.GetUserAnswer();
|
||||
this.Loading = false;
|
||||
// let res2 = GetUserAnswer()
|
||||
},
|
||||
|
||||
watch: {
|
||||
// "FormData.tdpz_watchtime": {
|
||||
// handler(old) {
|
||||
// if (old) {
|
||||
// this.isdisabled = false;
|
||||
// } else {
|
||||
// this.isdisabled = true;
|
||||
// }
|
||||
// },
|
||||
// },
|
||||
"FormData.tdpz_watchtime"(newval) {
|
||||
console.log(newval);
|
||||
if (newval) {
|
||||
this.isdisabled = true;
|
||||
} else {
|
||||
this.isdisabled = false;
|
||||
}
|
||||
},
|
||||
},
|
||||
directives: {
|
||||
clickoutside: {
|
||||
bind: function (el, binding, vnode) {
|
||||
function documentHandler(e) {
|
||||
if (el.contains(e.target)) {
|
||||
return false;
|
||||
}
|
||||
if (binding.expression) {
|
||||
binding.value(e);
|
||||
}
|
||||
}
|
||||
el._vueClickOutside_ = documentHandler;
|
||||
document.addEventListener("click", documentHandler);
|
||||
},
|
||||
unbind: function (el, binding) {
|
||||
document.removeEventListener("click", el._vueClickOutside_);
|
||||
delete el._vueClickOutside_;
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.tree_menu {
|
||||
position: absolute;
|
||||
width: 286px;
|
||||
left: 64px;
|
||||
top: 104px;
|
||||
width: 286px;
|
||||
height: 753px;
|
||||
line-height: 20px;
|
||||
border-radius: 3px;
|
||||
background-color: rgba(255, 255, 255, 1);
|
||||
text-align: center;
|
||||
border: 1px solid rgba(220, 220, 220, 1);
|
||||
}
|
||||
|
||||
.tree_rightmenu {
|
||||
position: fixed;
|
||||
width: 120px;
|
||||
border: 1px solid rgba(0, 0, 0, 0.15);
|
||||
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.super_parmams {
|
||||
display: flex;
|
||||
color: #fff !important;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: 668px;
|
||||
|
||||
i {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
/deep/ .pas_params {
|
||||
.el-col-12:last-child {
|
||||
padding-right: 150px;
|
||||
}
|
||||
|
||||
.el-col-12:first-child {
|
||||
padding-right: 38px;
|
||||
}
|
||||
|
||||
.el-input__inner {
|
||||
height: 30px;
|
||||
text-align: left;
|
||||
padding: 0px 8px;
|
||||
}
|
||||
|
||||
.el-row {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
|
||||
.el-col-1 {
|
||||
color: #fff !important;
|
||||
text-align: center;
|
||||
line-height: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.el-col-6 {
|
||||
height: 40px;
|
||||
top: 6px;
|
||||
left: 77px;
|
||||
position: relative;
|
||||
width: 50px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.super_con {
|
||||
.el-col-12:last-child {
|
||||
padding-right: 28px;
|
||||
}
|
||||
|
||||
.el-col-12:first-child {
|
||||
padding-right: 42px;
|
||||
}
|
||||
|
||||
.el-input__inner {
|
||||
text-align: left;
|
||||
padding: 0 8px;
|
||||
}
|
||||
|
||||
.el-row {
|
||||
color: #fff !important;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
|
||||
.el-col-4 {
|
||||
padding-left: 5px;
|
||||
width: 14px;
|
||||
text-align: center;
|
||||
line-height: 4px;
|
||||
height: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.el-dialog__footer {
|
||||
padding: 18px 1.25rem 50px;
|
||||
}
|
||||
|
||||
.dialog-footer {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
bottom: 45px;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
/deep/ .drvieName_All {
|
||||
position: absolute;
|
||||
left: 1408px;
|
||||
top: 140px;
|
||||
width: 435px;
|
||||
max-height: 720px;
|
||||
z-index: 10000;
|
||||
border: 1px solid #f5f5f5;
|
||||
|
||||
.title {
|
||||
background-color: #fff;
|
||||
padding: 5px 6px 5px 25px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.title_l {
|
||||
width: 103px;
|
||||
height: 26px;
|
||||
color: rgba(16, 16, 16, 1);
|
||||
font-size: 18px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.title_r {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
line-height: 24px;
|
||||
cursor: pointer;
|
||||
color: rgba(111, 103, 103, 1);
|
||||
}
|
||||
}
|
||||
|
||||
// h3 {
|
||||
// padding-bottom: 10px;
|
||||
// background-color: #fff;
|
||||
// }
|
||||
|
||||
.el-divider--horizontal {
|
||||
margin: 0px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,916 @@
|
|||
<!-- 网关通道 -->
|
||||
<template>
|
||||
<div>
|
||||
<!-- v-click-outside="closeMenu" -->
|
||||
<div>
|
||||
<div class="tree_menu" v-show="dialogVisible">
|
||||
<el-tree
|
||||
:data="$store.state.tree"
|
||||
:props="defaultProps"
|
||||
default-expand-all
|
||||
@node-contextmenu="rightClick"
|
||||
@node-click="treeNodeClick"
|
||||
ref="tree"
|
||||
>
|
||||
<span class="custom-tree-node" slot-scope="{ node, data }">
|
||||
<template v-if="data.editing == 1">
|
||||
<el-button
|
||||
type="mini"
|
||||
v-if="flag"
|
||||
style="right: 50px; top: 0; position: absolute; border: none"
|
||||
@click.stop="done"
|
||||
>完成</el-button
|
||||
>
|
||||
<el-button
|
||||
type="mini"
|
||||
style="right: 0; top: 0; position: absolute; border: none"
|
||||
@click.stop="edit"
|
||||
>编辑</el-button
|
||||
>
|
||||
<span v-if="!flag">{{ data.label }}</span>
|
||||
<el-input
|
||||
v-else
|
||||
style="width: 150px"
|
||||
v-model="gateway"
|
||||
></el-input>
|
||||
</template>
|
||||
<template v-else>{{ data.label }}</template>
|
||||
</span>
|
||||
</el-tree>
|
||||
<!-- 树形控件右键组件 -->
|
||||
<div v-show="menuShow" class="tree_rightmenu" :style="{ ...rightMenu }">
|
||||
<el-menu
|
||||
class="el-menu-vertical-demo"
|
||||
@select="selectMenuNode"
|
||||
default-active="#0078FE"
|
||||
>
|
||||
<el-menu-item id="menuitem" index="1" style="font-size: 12px">
|
||||
<span slot="title">新建通道</span>
|
||||
</el-menu-item>
|
||||
<el-menu-item index="2" style="font-size: 12px">
|
||||
<span slot="title">取 消</span>
|
||||
</el-menu-item>
|
||||
</el-menu>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pas_params">
|
||||
<el-dialog
|
||||
title="通道参数设置"
|
||||
:visible.sync="add_passage"
|
||||
width="765px"
|
||||
v-loading="Loading"
|
||||
>
|
||||
<el-form
|
||||
:model="FormData"
|
||||
:label-position="labelPosition"
|
||||
:rules="rules"
|
||||
ref="ruleForm"
|
||||
>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item
|
||||
label="通道名称:"
|
||||
:label-width="formLabelWidth"
|
||||
prop="tdpz_tdmc"
|
||||
>
|
||||
<el-select
|
||||
v-model="FormData.tdpz_tdmc"
|
||||
placeholder=""
|
||||
style="width: 200px; height: 30px"
|
||||
>
|
||||
<el-option
|
||||
v-for="(item, index) in options1"
|
||||
:key="index"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item
|
||||
label="通道:"
|
||||
:label-width="formLabelWidth"
|
||||
prop="tdpz_td"
|
||||
>
|
||||
<el-select
|
||||
v-model="FormData.tdpz_td"
|
||||
placeholder=""
|
||||
style="width: 200px; height: 30px"
|
||||
>
|
||||
<el-option
|
||||
v-for="(item, index) in options2"
|
||||
:key="index"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item
|
||||
label="驱动名称:"
|
||||
:label-width="formLabelWidth"
|
||||
prop="tdpz_qdmc"
|
||||
>
|
||||
<el-row>
|
||||
<el-col :span="18">
|
||||
<el-input
|
||||
v-model="FormData.tdpz_qdmc"
|
||||
placeholder=""
|
||||
style="width: 200px; height: 30px"
|
||||
></el-input>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-button
|
||||
style="width: 50px; height: 30px"
|
||||
@click="getDriveName"
|
||||
>...</el-button
|
||||
>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item
|
||||
label="IP地址:"
|
||||
:label-width="formLabelWidth"
|
||||
prop="tdpz_ip"
|
||||
>
|
||||
<el-row>
|
||||
<el-col :span="5">
|
||||
<el-input
|
||||
v-model="tdpz_ip1"
|
||||
style="width: 43px; height: 30px"
|
||||
></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1" style="color: #fff">. </el-col>
|
||||
<el-col :span="5">
|
||||
<el-input
|
||||
v-model="tdpz_ip2"
|
||||
style="width: 43px; height: 30px"
|
||||
></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1" style="color: #fff">.</el-col>
|
||||
<el-col :span="5">
|
||||
<el-input
|
||||
v-model="tdpz_ip3"
|
||||
style="width: 43px; height: 30px"
|
||||
></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1" style="color: #fff">.</el-col>
|
||||
<el-col :span="5">
|
||||
<el-input
|
||||
v-model="tdpz_ip4"
|
||||
style="width: 43px; height: 30px"
|
||||
></el-input>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item
|
||||
label="端口号:"
|
||||
:label-width="formLabelWidth"
|
||||
prop="tdpz_port"
|
||||
>
|
||||
<el-input
|
||||
v-model="FormData.tdpz_port"
|
||||
placeholder=""
|
||||
style="width: 200px; height: 30px"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item
|
||||
label="超过时间(ms):"
|
||||
:label-width="formLabelWidth"
|
||||
prop="tdpz_cssj"
|
||||
>
|
||||
<el-input
|
||||
v-model="FormData.tdpz_cssj"
|
||||
placeholder=""
|
||||
style="width: 200px; height: 30px"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item
|
||||
label="间隔时间(ms):"
|
||||
:label-width="formLabelWidth"
|
||||
prop="tdpz_jgsj"
|
||||
>
|
||||
<el-input
|
||||
v-model="FormData.tdpz_jgsj"
|
||||
placeholder=""
|
||||
style="width: 200px; height: 30px"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item
|
||||
label="轮询时间(ms):"
|
||||
:label-width="formLabelWidth"
|
||||
prop="tdpz_lxsj"
|
||||
>
|
||||
<el-input
|
||||
v-model="FormData.tdpz_lxsj"
|
||||
placeholder=""
|
||||
style="width: 200px; height: 30px"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item
|
||||
label="重复次数:"
|
||||
:label-width="formLabelWidth"
|
||||
prop="tdpz_cfcs"
|
||||
>
|
||||
<el-input
|
||||
v-model="FormData.tdpz_cfcs"
|
||||
placeholder=""
|
||||
style="width: 200px; height: 30px"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<div class="super_parmams">
|
||||
<h3>高级参数</h3>
|
||||
<div>
|
||||
<i class="el-icon-caret-bottom" v-if="is_retract"></i>
|
||||
<i class="el-icon-caret-top" v-else="is_retract"></i>
|
||||
<el-button
|
||||
type="text"
|
||||
plain
|
||||
@click="getRetract"
|
||||
style="
|
||||
width: 28px;
|
||||
border: none;
|
||||
color: rgba(16, 16, 16, 1);
|
||||
font-size: 14px;
|
||||
text-align: left;
|
||||
"
|
||||
>
|
||||
收起</el-button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div class="super_con" v-show="is_retract">
|
||||
<el-form
|
||||
:label-position="labelPosition"
|
||||
:rules="rules"
|
||||
ref="ruleForm"
|
||||
>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item>
|
||||
<el-checkbox v-model="FormData.tdpz_watchtime"
|
||||
>watch time(s)</el-checkbox
|
||||
>
|
||||
<el-input
|
||||
v-model="input1"
|
||||
placeholder=""
|
||||
style="width: 200px; height: 30px"
|
||||
:disabled="isdisabled"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item>
|
||||
<el-checkbox v-model="FormData.tdpz_cjsylxdz"
|
||||
>采集使用连续地址</el-checkbox
|
||||
>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="读写占空比:" :label-width="formLabelWidth">
|
||||
<el-row>
|
||||
<el-col :span="10">
|
||||
<el-input
|
||||
v-model="tdpz_dxzkb1"
|
||||
style="width: 91px; height: 30px"
|
||||
></el-input>
|
||||
</el-col>
|
||||
<el-col :span="4">: </el-col>
|
||||
<el-col :span="10">
|
||||
<el-input
|
||||
v-model="tdpz_dxzkb2"
|
||||
style="width: 91px; height: 30px"
|
||||
></el-input>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="05/0F:" :label-width="formLabelWidth">
|
||||
<el-row>
|
||||
<el-col :span="8"
|
||||
><el-radio v-model="FormData.tdpz_050F" label="auto"
|
||||
>auto</el-radio
|
||||
></el-col
|
||||
>
|
||||
<el-col :span="8"
|
||||
><el-radio v-model="FormData.tdpz_050F" label="05"
|
||||
>05</el-radio
|
||||
></el-col
|
||||
>
|
||||
<el-col :span="8"
|
||||
><el-radio v-model="FormData.tdpz_050F" label="0F"
|
||||
>0F</el-radio
|
||||
></el-col
|
||||
>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="06/10:" :label-width="formLabelWidth">
|
||||
<el-row>
|
||||
<el-col :span="8"
|
||||
><el-radio v-model="FormData.tdpz_0610" label="auto"
|
||||
>auto</el-radio
|
||||
></el-col
|
||||
>
|
||||
<el-col :span="8"
|
||||
><el-radio v-model="FormData.tdpz_0610" label="06"
|
||||
>06</el-radio
|
||||
></el-col
|
||||
>
|
||||
<el-col :span="8"
|
||||
><el-radio v-model="FormData.tdpz_0610" label="10"
|
||||
>10</el-radio
|
||||
></el-col
|
||||
>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</div>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="saveGate">保 存</el-button>
|
||||
<el-button @click="add_passage = false">取 消</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
<div class="drvieName_All" v-show="diag_drive">
|
||||
<div class="title">
|
||||
<p class="title_l">协议选择</p>
|
||||
<i class="el-icon-close title_r" @click="diag_drive = false"></i>
|
||||
</div>
|
||||
<el-divider></el-divider>
|
||||
<el-tree
|
||||
:data="datas2"
|
||||
:props="defaultProps"
|
||||
@node-click="handleDetailClick"
|
||||
default-expand-all
|
||||
></el-tree>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { SaveUserAnswer, GetUserAnswer } from "@/api/user";
|
||||
import { Loading } from "element-ui";
|
||||
|
||||
export default {
|
||||
name: "TestTreeView",
|
||||
|
||||
data() {
|
||||
return {
|
||||
flag: false,
|
||||
gateway: JSON.parse(localStorage.getItem("tree"))[0].label,
|
||||
FormData: {
|
||||
tdpz_tdmc: "有线区Channel1",
|
||||
tdpz_td: "网口",
|
||||
tdpz_qdmc: "ModbusTCPClient",
|
||||
tdpz_port: "",
|
||||
tdpz_cssj: "",
|
||||
tdpz_jgsj: "",
|
||||
tdpz_lxsj: "",
|
||||
tdpz_cfcs: "",
|
||||
tdpz_watchtime: true,
|
||||
tdpz_cjsylxdz: false,
|
||||
tdpz_dxzkb: "",
|
||||
tdpz_050F: "auto",
|
||||
tdpz_0610: "auto",
|
||||
},
|
||||
tdpz_dxzkb1: "1",
|
||||
tdpz_dxzkb2: "1",
|
||||
tdpz_ip1: "",
|
||||
tdpz_ip2: "",
|
||||
tdpz_ip3: "",
|
||||
tdpz_ip4: "",
|
||||
options1: [
|
||||
{
|
||||
value: "有线区Channel1",
|
||||
label: "有线区Channel1",
|
||||
},
|
||||
{
|
||||
value: "无线区Channel1",
|
||||
label: "无线区Channel1",
|
||||
},
|
||||
],
|
||||
options2: [
|
||||
{
|
||||
value: "网口",
|
||||
label: "网口",
|
||||
},
|
||||
{
|
||||
value: "串口",
|
||||
label: "串口",
|
||||
},
|
||||
],
|
||||
value1: "有线区Channel1",
|
||||
value2: "网口",
|
||||
diag_drive: false,
|
||||
isdisabled: true,
|
||||
radio: "1",
|
||||
is_retract: true,
|
||||
labelPosition: "left",
|
||||
formLabelWidth: "116px",
|
||||
input1: 192,
|
||||
add_passage: false,
|
||||
rightMenu: "",
|
||||
dialogVisible: true,
|
||||
menuShow: false,
|
||||
datas: [],
|
||||
datas2: [
|
||||
{
|
||||
label: "通用标准",
|
||||
children: [
|
||||
{
|
||||
label: "ModbusTCPClient",
|
||||
},
|
||||
{
|
||||
label: "ModbusRTU_over_TCP",
|
||||
},
|
||||
{
|
||||
label: "OPCUAClient",
|
||||
},
|
||||
{
|
||||
label: "OPCDAClient",
|
||||
},
|
||||
{
|
||||
label: "MQTTClient",
|
||||
},
|
||||
{
|
||||
label: "OPCXMLDAClient",
|
||||
},
|
||||
{
|
||||
label: "环保212协议网口监听",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "PLC",
|
||||
children: [
|
||||
{
|
||||
label: "Slemens S7-200 Network",
|
||||
},
|
||||
{
|
||||
label: "Slemens S7-300 Network",
|
||||
},
|
||||
{
|
||||
label: "Slemens S7-400 Network",
|
||||
},
|
||||
{
|
||||
label: "Slemens S7-1200 Network",
|
||||
},
|
||||
{
|
||||
label: "Slemens S7-1500 Network",
|
||||
},
|
||||
{
|
||||
label: "EtherNet/IP CIP协议(AB OMR ON)",
|
||||
},
|
||||
{
|
||||
label: "MC_Qna-3E(三菱 基恩士 松下)",
|
||||
},
|
||||
{
|
||||
label: "MC_A-1E_Binary",
|
||||
},
|
||||
{
|
||||
label: "OMRON-FINS",
|
||||
},
|
||||
{
|
||||
label: "横河PLC",
|
||||
},
|
||||
{
|
||||
label: "西门子FetchWirte",
|
||||
},
|
||||
{
|
||||
label: "富机 FUJI_SPH_NET",
|
||||
},
|
||||
{
|
||||
label: "基恩士上位链路通讯",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "智能建筑",
|
||||
children: [],
|
||||
},
|
||||
{
|
||||
label: "厂家定制",
|
||||
children: [],
|
||||
},
|
||||
{
|
||||
label: "电力行业标准",
|
||||
children: [
|
||||
{
|
||||
label: "IEC104",
|
||||
},
|
||||
{
|
||||
label: "DLT645_over_TCP",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "CNC数控",
|
||||
children: [],
|
||||
},
|
||||
{
|
||||
label: "私有协议",
|
||||
children: [],
|
||||
},
|
||||
],
|
||||
defaultProps: {
|
||||
children: "children",
|
||||
label: "label",
|
||||
},
|
||||
rules: {
|
||||
tdpz_tdmc: [
|
||||
{ required: true, message: "请输入通道名称", trigger: "change" },
|
||||
],
|
||||
tdpz_td: [{ required: true, message: "请输入通道", trigger: "change" }],
|
||||
tdpz_qdmc: [
|
||||
{ required: true, message: "请输入驱动名称", trigger: "change" },
|
||||
],
|
||||
tdpz_ip: [{ required: true, message: "请输入ip地址", trigger: "blur" }],
|
||||
tdpz_port: [
|
||||
{ required: true, message: "请输入端口号", trigger: "blur" },
|
||||
],
|
||||
tdpz_cssj: [
|
||||
{ required: true, message: "请输入超出时间", trigger: "blur" },
|
||||
],
|
||||
tdpz_jgsj: [
|
||||
{ required: true, message: "请输入间隔时间", trigger: "blur" },
|
||||
],
|
||||
tdpz_lxsj: [
|
||||
{ required: true, message: "请输入轮询时间", trigger: "blur" },
|
||||
],
|
||||
tdpz_cfcs: [
|
||||
{ required: true, message: "请输入重复次数", trigger: "blur" },
|
||||
],
|
||||
},
|
||||
};
|
||||
},
|
||||
created() {
|
||||
console.log(this.$store.state.tree);
|
||||
},
|
||||
methods: {
|
||||
//编辑
|
||||
edit(event) {
|
||||
this.flag = true;
|
||||
},
|
||||
//完成编辑
|
||||
done(event) {
|
||||
this.flag = false;
|
||||
let tree = this.$store.state.tree;
|
||||
tree[0].label = this.gateway;
|
||||
this.$store.commit("setTree", tree);
|
||||
},
|
||||
rightClick(e, data, node) {
|
||||
this.menuShow = false;
|
||||
this.menuShow = true;
|
||||
e.preventDefault(); //关闭浏览器右键默认事件
|
||||
this.rightMenu = { top: e.pageY + "px", left: e.pageX + "px" };
|
||||
document.addEventListener("click", (ev) => {
|
||||
ev.stopImmediatePropagation();
|
||||
if (ev.target !== document.querySelector(".el-menu-item.is-active")) {
|
||||
this.foo();
|
||||
}
|
||||
});
|
||||
},
|
||||
// 点击时候的判断,判断是否为新增网关
|
||||
selectMenuNode(index, indexPath) {
|
||||
console.log(index);
|
||||
if (index == 1) {
|
||||
this.add_passage = true;
|
||||
}
|
||||
},
|
||||
foo() {
|
||||
// 取消鼠标监听事件 菜单栏
|
||||
this.menuShow = false;
|
||||
document.removeEventListener("click", this.foo); // 关掉监听，
|
||||
},
|
||||
treeNodeClick(key) {
|
||||
// console.log
|
||||
this.foo();
|
||||
},
|
||||
// 收起点击事件的判断
|
||||
getRetract() {
|
||||
if (this.is_retract == true) {
|
||||
this.is_retract = false;
|
||||
} else {
|
||||
this.is_retract = true;
|
||||
}
|
||||
},
|
||||
getDriveName() {
|
||||
this.diag_drive = true;
|
||||
},
|
||||
Merge(value, value1, value2, value3, value4) {
|
||||
value = value1 + "." + value2 + "." + value3 + "." + value4;
|
||||
return value;
|
||||
},
|
||||
async saveGate() {
|
||||
|
||||
this.add_passage = false;
|
||||
var obj ={
|
||||
tdpz_tdmc:this.FormData.tdpz_tdmc,
|
||||
tdpz_td:this.FormData.tdpz_td,
|
||||
tdpz_qdmc:this.FormData.tdpz_qdmc,
|
||||
tdpz_port:this.FormData.tdpz_port,
|
||||
tdpz_ccsj:this.FormData.tdpz_cssj,
|
||||
tdpz_jgsj:this.FormData.tdpz_jgsj,
|
||||
tdpz_ip:this.tdpz_ip1+"."+this.tdpz_ip2+"."+this.tdpz_ip3+"."+this.tdpz_ip4,
|
||||
tdpz_lxsj:this.FormData.tdpz_lxsj,
|
||||
tdpz_cfcs:this.FormData.tdpz_cfcs,
|
||||
tdpz_watchtime:String(Number(this.FormData.tdpz_watchtime)),
|
||||
tdpz_cjsylxdz:String(Number(this.FormData.tdpz_cjsylxdz)),
|
||||
tdpz_dxzkb:this.tdpz_dxzkb1+":"+this.tdpz_dxzkb2,
|
||||
tdpz_050F:this.FormData.tdpz_050F,
|
||||
tdpz_0610:this.FormData.tdpz_0610,
|
||||
}
|
||||
let datas = sessionStorage.getItem("DB-IotLite_yx");
|
||||
datas = { ...JSON.parse(datas), ...obj};
|
||||
let res = await SaveUserAnswer({
|
||||
mark: "DB-IotLite_yx",
|
||||
user_id: "USER202307301109254198",
|
||||
mark_value: JSON.stringify(datas),
|
||||
});
|
||||
sessionStorage.setItem("DB-IotLite_yx", JSON.stringify(datas));
|
||||
console.log(res);
|
||||
console.log(res.data.data.mark_value);
|
||||
// this.$router.push("/dbcollectdevice");
|
||||
},
|
||||
handleDetailClick(data, node, value) {
|
||||
console.log(data.label);
|
||||
this.FormData.tdpz_qdmc = data.label;
|
||||
this.diag_drive = false;
|
||||
},
|
||||
async GetUserAnswer() {
|
||||
let answer = await GetUserAnswer({
|
||||
mark: "DB-IotLite_yx",
|
||||
user_id: "USER202307301109254198",
|
||||
});
|
||||
console.log(answer);
|
||||
let obj = JSON.parse(answer.data.data.mark_value);
|
||||
console.log(obj);
|
||||
// this.FormData.
|
||||
if (obj.tdpz_dxzkb) {
|
||||
this.tdpz_dxzkb1 = obj.tdpz_dxzkb.split(":")[0];
|
||||
this.tdpz_dxzkb2 = obj.tdpz_dxzkb.split(":")[1];
|
||||
}
|
||||
this.FormData.tdpz_watchtime = Boolean(Number(obj.tdpz_watchtime));
|
||||
// console.log(this.FormData.tdpz_watchtime);
|
||||
this.FormData.tdpz_cjsylxdz = Boolean(Number(obj.tdpz_cjsylxdz));
|
||||
if (obj.tdpz_ip) {
|
||||
this.tdpz_ip1 = obj.tdpz_ip.split(".")[0];
|
||||
this.tdpz_ip2 = obj.tdpz_ip.split(".")[1];
|
||||
this.tdpz_ip3 = obj.tdpz_ip.split(".")[2];
|
||||
this.tdpz_ip4 = obj.tdpz_ip.split(".")[3];
|
||||
}
|
||||
this.FormData.tdpz_tdmc = obj.tdpz_tdmc;
|
||||
this.FormData.tdpz_td = obj.tdpz_td;
|
||||
this.FormData.tdpz_qdmc = obj.tdpz_qdmc;
|
||||
this.FormData.tdpz_050F = obj.tdpz_050F;
|
||||
this.FormData.tdpz_0610 = obj.tdpz_0610;
|
||||
this.FormData.tdpz_port = obj.tdpz_port;
|
||||
this.FormData.tdpz_cssj = obj.tdpz_cssj;
|
||||
this.FormData.tdpz_jgsj = obj.tdpz_jgsj;
|
||||
this.FormData.tdpz_lxsj = obj.tdpz_lxsj;
|
||||
this.FormData.tdpz_cfcs = obj.tdpz_cfcs;
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.Loading = true;
|
||||
this.GetUserAnswer();
|
||||
this.Loading = false;
|
||||
// let res2 = GetUserAnswer()
|
||||
},
|
||||
|
||||
watch: {
|
||||
// "FormData.tdpz_watchtime": {
|
||||
// handler(old) {
|
||||
// if (old) {
|
||||
// this.isdisabled = false;
|
||||
// } else {
|
||||
// this.isdisabled = true;
|
||||
// }
|
||||
// },
|
||||
// },
|
||||
"FormData.tdpz_watchtime"(newval) {
|
||||
console.log(newval);
|
||||
if (newval) {
|
||||
this.isdisabled = true;
|
||||
} else {
|
||||
this.isdisabled = false;
|
||||
}
|
||||
},
|
||||
},
|
||||
directives: {
|
||||
clickoutside: {
|
||||
bind: function (el, binding, vnode) {
|
||||
function documentHandler(e) {
|
||||
if (el.contains(e.target)) {
|
||||
return false;
|
||||
}
|
||||
if (binding.expression) {
|
||||
binding.value(e);
|
||||
}
|
||||
}
|
||||
el._vueClickOutside_ = documentHandler;
|
||||
document.addEventListener("click", documentHandler);
|
||||
},
|
||||
unbind: function (el, binding) {
|
||||
document.removeEventListener("click", el._vueClickOutside_);
|
||||
delete el._vueClickOutside_;
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.tree_menu {
|
||||
position: absolute;
|
||||
width: 286px;
|
||||
left: 64px;
|
||||
top: 104px;
|
||||
width: 286px;
|
||||
height: 753px;
|
||||
line-height: 20px;
|
||||
border-radius: 3px;
|
||||
background-color: rgba(255, 255, 255, 1);
|
||||
text-align: center;
|
||||
border: 1px solid rgba(220, 220, 220, 1);
|
||||
}
|
||||
|
||||
.tree_rightmenu {
|
||||
position: fixed;
|
||||
width: 120px;
|
||||
border: 1px solid rgba(0, 0, 0, 0.15);
|
||||
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.super_parmams {
|
||||
display: flex;
|
||||
color: #fff !important;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: 668px;
|
||||
|
||||
i {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
/deep/ .pas_params {
|
||||
.el-col-12:last-child {
|
||||
padding-right: 150px;
|
||||
}
|
||||
|
||||
.el-col-12:first-child {
|
||||
padding-right: 38px;
|
||||
}
|
||||
|
||||
.el-input__inner {
|
||||
height: 30px;
|
||||
text-align: left;
|
||||
padding: 0px 8px;
|
||||
}
|
||||
|
||||
.el-row {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
|
||||
.el-col-1 {
|
||||
color: #fff !important;
|
||||
text-align: center;
|
||||
line-height: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.el-col-6 {
|
||||
height: 40px;
|
||||
top: 6px;
|
||||
left: 77px;
|
||||
position: relative;
|
||||
width: 50px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.super_con {
|
||||
.el-col-12:last-child {
|
||||
padding-right: 28px;
|
||||
}
|
||||
|
||||
.el-col-12:first-child {
|
||||
padding-right: 42px;
|
||||
}
|
||||
|
||||
.el-input__inner {
|
||||
text-align: left;
|
||||
padding: 0 8px;
|
||||
}
|
||||
|
||||
.el-row {
|
||||
color: #fff !important;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
|
||||
.el-col-4 {
|
||||
padding-left: 5px;
|
||||
width: 14px;
|
||||
text-align: center;
|
||||
line-height: 4px;
|
||||
height: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.el-dialog__footer {
|
||||
padding: 18px 1.25rem 50px;
|
||||
}
|
||||
|
||||
.dialog-footer {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
bottom: 45px;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
/deep/ .drvieName_All {
|
||||
position: absolute;
|
||||
left: 1408px;
|
||||
top: 140px;
|
||||
width: 435px;
|
||||
max-height: 720px;
|
||||
z-index: 10000;
|
||||
border: 1px solid #f5f5f5;
|
||||
|
||||
.title {
|
||||
background-color: #fff;
|
||||
padding: 5px 6px 5px 25px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.title_l {
|
||||
width: 103px;
|
||||
height: 26px;
|
||||
color: rgba(16, 16, 16, 1);
|
||||
font-size: 18px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.title_r {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
line-height: 24px;
|
||||
cursor: pointer;
|
||||
color: rgba(111, 103, 103, 1);
|
||||
}
|
||||
}
|
||||
|
||||
// h3 {
|
||||
// padding-bottom: 10px;
|
||||
// background-color: #fff;
|
||||
// }
|
||||
|
||||
.el-divider--horizontal {
|
||||
margin: 0px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,742 @@
|
|||
<!-- 网关通道 -->
|
||||
<template>
|
||||
<div>
|
||||
<!-- v-click-outside="closeMenu" -->
|
||||
<div>
|
||||
<div class="tree_menu" v-show="dialogVisible">
|
||||
<el-tree :data="$store.state.tree" :props="defaultProps" default-expand-all @node-contextmenu="rightClick"
|
||||
@node-click="treeNodeClick" ref="tree">
|
||||
<span class="custom-tree-node" slot-scope="{ node, data }">
|
||||
<template v-if="data.editing == 1">
|
||||
<el-button type="mini" v-if="flag" style="right: 50px; top: 0; position: absolute; border: none"
|
||||
@click.stop="done">完成</el-button>
|
||||
<el-button type="mini" style="right: 0; top: 0; position: absolute; border: none"
|
||||
@click.stop="edit">编辑</el-button>
|
||||
<span v-if="!flag">{{ data.label }}</span>
|
||||
<el-input v-else style="width: 150px" v-model="gateway"></el-input>
|
||||
</template>
|
||||
<template v-else>{{ data.label }}</template>
|
||||
</span>
|
||||
</el-tree>
|
||||
<!-- 树形控件右键组件 -->
|
||||
<div v-show="menuShow" class="tree_rightmenu" :style="{ ...rightMenu }">
|
||||
<el-menu class="el-menu-vertical-demo" @select="selectMenuNode" default-active="#0078FE">
|
||||
<el-menu-item id="menuitem" index="1" style="font-size: 12px">
|
||||
<span slot="title">新建通道</span>
|
||||
</el-menu-item>
|
||||
<el-menu-item index="2" style="font-size: 12px">
|
||||
<span slot="title">取 消</span>
|
||||
</el-menu-item>
|
||||
</el-menu>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pas_params">
|
||||
<el-dialog title="通道参数设置" :visible.sync="add_passage" width="765px" v-loading="Loading">
|
||||
<el-form :model="FormData" :label-position="labelPosition" :rules="rules" ref="ruleForm">
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="通道名称:" :label-width="formLabelWidth" prop="tdpz_tdmc">
|
||||
<el-select v-model="FormData.tdpz_tdmc" placeholder="" style="width: 200px; height: 30px">
|
||||
<el-option v-for="(item, index) in options1" :key="index" :label="item.label" :value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="通道:" :label-width="formLabelWidth" prop="tdpz_td">
|
||||
<el-select v-model="FormData.tdpz_td" placeholder="" style="width: 200px; height: 30px">
|
||||
<el-option v-for="(item, index) in options2" :key="index" :label="item.label" :value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="驱动名称:" :label-width="formLabelWidth" prop="tdpz_qdmc">
|
||||
<el-row>
|
||||
<el-col :span="18">
|
||||
<el-input v-model="FormData.tdpz_qdmc" placeholder="" style="width: 200px; height: 30px"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-button style="width: 50px; height: 30px" @click="getDriveName">...</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="IP地址:" :label-width="formLabelWidth" prop="tdpz_ip">
|
||||
<el-row>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="tdpz_ip1" style="width: 43px; height: 30px"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1" style="color: #fff">. </el-col>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="tdpz_ip2" style="width: 43px; height: 30px"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1" style="color: #fff">.</el-col>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="tdpz_ip3" style="width: 43px; height: 30px"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1" style="color: #fff">.</el-col>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="tdpz_ip4" style="width: 43px; height: 30px"></el-input>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="端口号:" :label-width="formLabelWidth" prop="tdpz_port">
|
||||
<el-input v-model="FormData.tdpz_port" placeholder="" style="width: 200px; height: 30px"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="超过时间(ms):" :label-width="formLabelWidth" prop="tdpz_cssj">
|
||||
<el-input v-model="FormData.tdpz_cssj" placeholder="" style="width: 200px; height: 30px"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="间隔时间(ms):" :label-width="formLabelWidth" prop="tdpz_jgsj">
|
||||
<el-input v-model="FormData.tdpz_jgsj" placeholder="" style="width: 200px; height: 30px"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="轮询时间(ms):" :label-width="formLabelWidth" prop="tdpz_lxsj">
|
||||
<el-input v-model="FormData.tdpz_lxsj" placeholder="" style="width: 200px; height: 30px"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="重复次数:" :label-width="formLabelWidth" prop="tdpz_cfcs">
|
||||
<el-input v-model="FormData.tdpz_cfcs" placeholder="" style="width: 200px; height: 30px"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<div class="super_parmams">
|
||||
<h3>高级参数</h3>
|
||||
<div>
|
||||
<i class="el-icon-caret-bottom" v-if="is_retract"></i>
|
||||
<i class="el-icon-caret-top" v-else="is_retract"></i>
|
||||
<el-button type="text" plain @click="getRetract" style="
|
||||
width: 28px;
|
||||
border: none;
|
||||
color: rgba(16, 16, 16, 1);
|
||||
font-size: 14px;
|
||||
text-align: left;
|
||||
">
|
||||
收起</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="super_con" v-show="is_retract">
|
||||
<el-form :label-position="labelPosition" :rules="rules" ref="ruleForm">
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item>
|
||||
<el-checkbox v-model="FormData.tdpz_watchtime">watch time(s)</el-checkbox>
|
||||
<el-input v-model="input1" placeholder="" style="width: 200px; height: 30px"
|
||||
:disabled="isdisabled"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item>
|
||||
<el-checkbox v-model="FormData.tdpz_cjsylxdz">采集使用连续地址</el-checkbox>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="读写占空比:" :label-width="formLabelWidth">
|
||||
<el-row>
|
||||
<el-col :span="10">
|
||||
<el-input v-model="tdpz_dxzkb1" style="width: 91px; height: 30px"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="4">: </el-col>
|
||||
<el-col :span="10">
|
||||
<el-input v-model="tdpz_dxzkb2" style="width: 91px; height: 30px"></el-input>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="05/0F:" :label-width="formLabelWidth">
|
||||
<el-row>
|
||||
<el-col :span="8"><el-radio v-model="FormData.tdpz_050F" label="auto">auto</el-radio></el-col>
|
||||
<el-col :span="8"><el-radio v-model="FormData.tdpz_050F" label="05">05</el-radio></el-col>
|
||||
<el-col :span="8"><el-radio v-model="FormData.tdpz_050F" label="0F">0F</el-radio></el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="06/10:" :label-width="formLabelWidth">
|
||||
<el-row>
|
||||
<el-col :span="8"><el-radio v-model="FormData.tdpz_0610" label="auto">auto</el-radio></el-col>
|
||||
<el-col :span="8"><el-radio v-model="FormData.tdpz_0610" label="06">06</el-radio></el-col>
|
||||
<el-col :span="8"><el-radio v-model="FormData.tdpz_0610" label="10">10</el-radio></el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</div>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="saveGate">保 存</el-button>
|
||||
<el-button @click="add_passage = false">取 消</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
<div class="drvieName_All" v-show="diag_drive">
|
||||
<div class="title">
|
||||
<p class="title_l">协议选择</p>
|
||||
<i class="el-icon-close title_r" @click="diag_drive = false"></i>
|
||||
</div>
|
||||
<el-divider></el-divider>
|
||||
<el-tree :data="datas2" :props="defaultProps" @node-click="handleDetailClick" default-expand-all></el-tree>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { SaveUserAnswer, GetUserAnswer } from "@/api/user";
|
||||
import { Loading } from "element-ui";
|
||||
|
||||
export default {
|
||||
name: "TestTreeView",
|
||||
|
||||
data() {
|
||||
return {
|
||||
flag: false,
|
||||
gateway: JSON.parse(localStorage.getItem("tree"))[0].label,
|
||||
FormData: {
|
||||
tdpz_tdmc: "有线区Channel1",
|
||||
tdpz_td: "网口",
|
||||
tdpz_qdmc: "ModbusTCPClient",
|
||||
tdpz_port: "",
|
||||
tdpz_cssj: "",
|
||||
tdpz_jgsj: "",
|
||||
tdpz_lxsj: "",
|
||||
tdpz_cfcs: "",
|
||||
tdpz_watchtime: true,
|
||||
tdpz_cjsylxdz: false,
|
||||
tdpz_dxzkb: "",
|
||||
tdpz_050F: "auto",
|
||||
tdpz_0610: "auto",
|
||||
},
|
||||
tdpz_dxzkb1: "1",
|
||||
tdpz_dxzkb2: "1",
|
||||
tdpz_ip1: "",
|
||||
tdpz_ip2: "",
|
||||
tdpz_ip3: "",
|
||||
tdpz_ip4: "",
|
||||
options1: [
|
||||
{
|
||||
value: "有线区Channel1",
|
||||
label: "有线区Channel1",
|
||||
},
|
||||
{
|
||||
value: "无线区Channel1",
|
||||
label: "无线区Channel1",
|
||||
},
|
||||
],
|
||||
options2: [
|
||||
{
|
||||
value: "网口",
|
||||
label: "网口",
|
||||
},
|
||||
{
|
||||
value: "串口",
|
||||
label: "串口",
|
||||
},
|
||||
],
|
||||
value1: "有线区Channel1",
|
||||
value2: "网口",
|
||||
diag_drive: false,
|
||||
isdisabled: true,
|
||||
radio: "1",
|
||||
is_retract: true,
|
||||
labelPosition: "left",
|
||||
formLabelWidth: "116px",
|
||||
input1: 192,
|
||||
add_passage: false,
|
||||
rightMenu: "",
|
||||
dialogVisible: true,
|
||||
menuShow: false,
|
||||
datas: [],
|
||||
datas2: [
|
||||
{
|
||||
label: "通用标准",
|
||||
children: [
|
||||
{
|
||||
label: "ModbusTCPClient",
|
||||
},
|
||||
{
|
||||
label: "ModbusRTU_over_TCP",
|
||||
},
|
||||
{
|
||||
label: "OPCUAClient",
|
||||
},
|
||||
{
|
||||
label: "OPCDAClient",
|
||||
},
|
||||
{
|
||||
label: "MQTTClient",
|
||||
},
|
||||
{
|
||||
label: "OPCXMLDAClient",
|
||||
},
|
||||
{
|
||||
label: "环保212协议网口监听",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "PLC",
|
||||
children: [
|
||||
{
|
||||
label: "Slemens S7-200 Network",
|
||||
},
|
||||
{
|
||||
label: "Slemens S7-300 Network",
|
||||
},
|
||||
{
|
||||
label: "Slemens S7-400 Network",
|
||||
},
|
||||
{
|
||||
label: "Slemens S7-1200 Network",
|
||||
},
|
||||
{
|
||||
label: "Slemens S7-1500 Network",
|
||||
},
|
||||
{
|
||||
label: "EtherNet/IP CIP协议(AB OMR ON)",
|
||||
},
|
||||
{
|
||||
label: "MC_Qna-3E(三菱 基恩士 松下)",
|
||||
},
|
||||
{
|
||||
label: "MC_A-1E_Binary",
|
||||
},
|
||||
{
|
||||
label: "OMRON-FINS",
|
||||
},
|
||||
{
|
||||
label: "横河PLC",
|
||||
},
|
||||
{
|
||||
label: "西门子FetchWirte",
|
||||
},
|
||||
{
|
||||
label: "富机 FUJI_SPH_NET",
|
||||
},
|
||||
{
|
||||
label: "基恩士上位链路通讯",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "智能建筑",
|
||||
children: [],
|
||||
},
|
||||
{
|
||||
label: "厂家定制",
|
||||
children: [],
|
||||
},
|
||||
{
|
||||
label: "电力行业标准",
|
||||
children: [
|
||||
{
|
||||
label: "IEC104",
|
||||
},
|
||||
{
|
||||
label: "DLT645_over_TCP",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "CNC数控",
|
||||
children: [],
|
||||
},
|
||||
{
|
||||
label: "私有协议",
|
||||
children: [],
|
||||
},
|
||||
],
|
||||
defaultProps: {
|
||||
children: "children",
|
||||
label: "label",
|
||||
},
|
||||
rules: {
|
||||
tdpz_tdmc: [
|
||||
{ required: true, message: "请输入通道名称", trigger: "change" },
|
||||
],
|
||||
tdpz_td: [{ required: true, message: "请输入通道", trigger: "change" }],
|
||||
tdpz_qdmc: [
|
||||
{ required: true, message: "请输入驱动名称", trigger: "change" },
|
||||
],
|
||||
tdpz_ip: [{ required: true, message: "请输入ip地址", trigger: "blur" }],
|
||||
tdpz_port: [
|
||||
{ required: true, message: "请输入端口号", trigger: "blur" },
|
||||
],
|
||||
tdpz_cssj: [
|
||||
{ required: true, message: "请输入超出时间", trigger: "blur" },
|
||||
],
|
||||
tdpz_jgsj: [
|
||||
{ required: true, message: "请输入间隔时间", trigger: "blur" },
|
||||
],
|
||||
tdpz_lxsj: [
|
||||
{ required: true, message: "请输入轮询时间", trigger: "blur" },
|
||||
],
|
||||
tdpz_cfcs: [
|
||||
{ required: true, message: "请输入重复次数", trigger: "blur" },
|
||||
],
|
||||
},
|
||||
};
|
||||
},
|
||||
created() {
|
||||
console.log(this.$store.state.tree);
|
||||
},
|
||||
methods: {
|
||||
//编辑
|
||||
edit(event) {
|
||||
this.flag = true;
|
||||
},
|
||||
//完成编辑
|
||||
done(event) {
|
||||
this.flag = false;
|
||||
let tree = this.$store.state.tree;
|
||||
tree[0].label = this.gateway;
|
||||
this.$store.commit("setTree", tree);
|
||||
},
|
||||
rightClick(e, data, node) {
|
||||
this.menuShow = false;
|
||||
this.menuShow = true;
|
||||
e.preventDefault(); //关闭浏览器右键默认事件
|
||||
this.rightMenu = { top: e.pageY + "px", left: e.pageX + "px" };
|
||||
document.addEventListener("click", (ev) => {
|
||||
ev.stopImmediatePropagation();
|
||||
if (ev.target !== document.querySelector(".el-menu-item.is-active")) {
|
||||
this.foo();
|
||||
}
|
||||
});
|
||||
},
|
||||
// 点击时候的判断,判断是否为新增网关
|
||||
selectMenuNode(index, indexPath) {
|
||||
console.log(index);
|
||||
if (index == 1) {
|
||||
this.add_passage = true;
|
||||
}
|
||||
},
|
||||
foo() {
|
||||
// 取消鼠标监听事件 菜单栏
|
||||
this.menuShow = false;
|
||||
document.removeEventListener("click", this.foo); // 关掉监听，
|
||||
},
|
||||
treeNodeClick(key) {
|
||||
// console.log
|
||||
this.foo();
|
||||
},
|
||||
// 收起点击事件的判断
|
||||
getRetract() {
|
||||
if (this.is_retract == true) {
|
||||
this.is_retract = false;
|
||||
} else {
|
||||
this.is_retract = true;
|
||||
}
|
||||
},
|
||||
getDriveName() {
|
||||
this.diag_drive = true;
|
||||
},
|
||||
Merge(value, value1, value2, value3, value4) {
|
||||
value = value1 + "." + value2 + "." + value3 + "." + value4;
|
||||
return value;
|
||||
},
|
||||
async saveGate() {
|
||||
|
||||
this.add_passage = false;
|
||||
var obj = {
|
||||
tdpz_tdmc: this.FormData.tdpz_tdmc,
|
||||
tdpz_td: this.FormData.tdpz_td,
|
||||
tdpz_qdmc: this.FormData.tdpz_qdmc,
|
||||
tdpz_port: this.FormData.tdpz_port,
|
||||
tdpz_ccsj: this.FormData.tdpz_cssj,
|
||||
tdpz_jgsj: this.FormData.tdpz_jgsj,
|
||||
tdpz_ip: this.tdpz_ip1 + "." + this.tdpz_ip2 + "." + this.tdpz_ip3 + "." + this.tdpz_ip4,
|
||||
tdpz_lxsj: this.FormData.tdpz_lxsj,
|
||||
tdpz_cfcs: this.FormData.tdpz_cfcs,
|
||||
tdpz_watchtime: String(Number(this.FormData.tdpz_watchtime)),
|
||||
tdpz_cjsylxdz: String(Number(this.FormData.tdpz_cjsylxdz)),
|
||||
tdpz_dxzkb: this.tdpz_dxzkb1 + ":" + this.tdpz_dxzkb2,
|
||||
tdpz_050F: this.FormData.tdpz_050F,
|
||||
tdpz_0610: this.FormData.tdpz_0610,
|
||||
}
|
||||
let datas = sessionStorage.getItem("DB-IotLite_yx");
|
||||
datas = { ...JSON.parse(datas), ...obj };
|
||||
let res = await SaveUserAnswer({
|
||||
mark: "DB-IotLite_yx",
|
||||
user_id: "USER202307301109254198",
|
||||
mark_value: JSON.stringify(datas),
|
||||
});
|
||||
if (res.status == 200) {
|
||||
this.$message({
|
||||
message: '保存成功',
|
||||
type: 'success'
|
||||
});
|
||||
}
|
||||
sessionStorage.setItem("DB-IotLite_yx", JSON.stringify(datas));
|
||||
console.log(res);
|
||||
console.log(res.data.data.mark_value);
|
||||
// this.$router.push("/dbcollectdevice");
|
||||
},
|
||||
handleDetailClick(data, node, value) {
|
||||
console.log(data.label);
|
||||
this.FormData.tdpz_qdmc = data.label;
|
||||
this.diag_drive = false;
|
||||
},
|
||||
async GetUserAnswer() {
|
||||
let answer = await GetUserAnswer({
|
||||
mark: "DB-IotLite_yx",
|
||||
user_id: "USER202307301109254198",
|
||||
});
|
||||
console.log(answer);
|
||||
let obj = JSON.parse(answer.data.data.mark_value);
|
||||
console.log(obj);
|
||||
// this.FormData.
|
||||
if (obj.tdpz_dxzkb) {
|
||||
this.tdpz_dxzkb1 = obj.tdpz_dxzkb.split(":")[0];
|
||||
this.tdpz_dxzkb2 = obj.tdpz_dxzkb.split(":")[1];
|
||||
}
|
||||
this.FormData.tdpz_watchtime = Boolean(Number(obj.tdpz_watchtime));
|
||||
// console.log(this.FormData.tdpz_watchtime);
|
||||
this.FormData.tdpz_cjsylxdz = Boolean(Number(obj.tdpz_cjsylxdz));
|
||||
if (obj.tdpz_ip) {
|
||||
this.tdpz_ip1 = obj.tdpz_ip.split(".")[0];
|
||||
this.tdpz_ip2 = obj.tdpz_ip.split(".")[1];
|
||||
this.tdpz_ip3 = obj.tdpz_ip.split(".")[2];
|
||||
this.tdpz_ip4 = obj.tdpz_ip.split(".")[3];
|
||||
}
|
||||
this.FormData.tdpz_tdmc = obj.tdpz_tdmc;
|
||||
this.FormData.tdpz_td = obj.tdpz_td;
|
||||
this.FormData.tdpz_qdmc = obj.tdpz_qdmc;
|
||||
this.FormData.tdpz_050F = obj.tdpz_050F;
|
||||
this.FormData.tdpz_0610 = obj.tdpz_0610;
|
||||
this.FormData.tdpz_port = obj.tdpz_port;
|
||||
this.FormData.tdpz_cssj = obj.tdpz_cssj;
|
||||
this.FormData.tdpz_jgsj = obj.tdpz_jgsj;
|
||||
this.FormData.tdpz_lxsj = obj.tdpz_lxsj;
|
||||
this.FormData.tdpz_cfcs = obj.tdpz_cfcs;
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.Loading = true;
|
||||
this.GetUserAnswer();
|
||||
this.Loading = false;
|
||||
// let res2 = GetUserAnswer()
|
||||
},
|
||||
|
||||
watch: {
|
||||
// "FormData.tdpz_watchtime": {
|
||||
// handler(old) {
|
||||
// if (old) {
|
||||
// this.isdisabled = false;
|
||||
// } else {
|
||||
// this.isdisabled = true;
|
||||
// }
|
||||
// },
|
||||
// },
|
||||
"FormData.tdpz_watchtime"(newval) {
|
||||
console.log(newval);
|
||||
if (newval) {
|
||||
this.isdisabled = true;
|
||||
} else {
|
||||
this.isdisabled = false;
|
||||
}
|
||||
},
|
||||
},
|
||||
directives: {
|
||||
clickoutside: {
|
||||
bind: function (el, binding, vnode) {
|
||||
function documentHandler(e) {
|
||||
if (el.contains(e.target)) {
|
||||
return false;
|
||||
}
|
||||
if (binding.expression) {
|
||||
binding.value(e);
|
||||
}
|
||||
}
|
||||
el._vueClickOutside_ = documentHandler;
|
||||
document.addEventListener("click", documentHandler);
|
||||
},
|
||||
unbind: function (el, binding) {
|
||||
document.removeEventListener("click", el._vueClickOutside_);
|
||||
delete el._vueClickOutside_;
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.tree_menu {
|
||||
position: absolute;
|
||||
width: 286px;
|
||||
left: 64px;
|
||||
top: 104px;
|
||||
width: 286px;
|
||||
height: 753px;
|
||||
line-height: 20px;
|
||||
border-radius: 3px;
|
||||
background-color: rgba(255, 255, 255, 1);
|
||||
text-align: center;
|
||||
border: 1px solid rgba(220, 220, 220, 1);
|
||||
}
|
||||
|
||||
.tree_rightmenu {
|
||||
position: fixed;
|
||||
width: 120px;
|
||||
border: 1px solid rgba(0, 0, 0, 0.15);
|
||||
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.super_parmams {
|
||||
display: flex;
|
||||
color: #fff !important;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: 668px;
|
||||
|
||||
i {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
/deep/ .pas_params {
|
||||
.el-col-12:last-child {
|
||||
padding-right: 150px;
|
||||
}
|
||||
|
||||
.el-col-12:first-child {
|
||||
padding-right: 38px;
|
||||
}
|
||||
|
||||
.el-input__inner {
|
||||
height: 30px;
|
||||
text-align: left;
|
||||
padding: 0px 8px;
|
||||
}
|
||||
|
||||
.el-row {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
|
||||
.el-col-1 {
|
||||
color: #fff !important;
|
||||
text-align: center;
|
||||
line-height: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.el-col-6 {
|
||||
height: 40px;
|
||||
top: 6px;
|
||||
left: 77px;
|
||||
position: relative;
|
||||
width: 50px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.super_con {
|
||||
.el-col-12:last-child {
|
||||
padding-right: 28px;
|
||||
}
|
||||
|
||||
.el-col-12:first-child {
|
||||
padding-right: 42px;
|
||||
}
|
||||
|
||||
.el-input__inner {
|
||||
text-align: left;
|
||||
padding: 0 8px;
|
||||
}
|
||||
|
||||
.el-row {
|
||||
color: #fff !important;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
|
||||
.el-col-4 {
|
||||
padding-left: 5px;
|
||||
width: 14px;
|
||||
text-align: center;
|
||||
line-height: 4px;
|
||||
height: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.el-dialog__footer {
|
||||
padding: 18px 1.25rem 50px;
|
||||
}
|
||||
|
||||
.dialog-footer {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
bottom: 45px;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
/deep/ .drvieName_All {
|
||||
position: absolute;
|
||||
left: 1408px;
|
||||
top: 140px;
|
||||
width: 435px;
|
||||
max-height: 720px;
|
||||
z-index: 10000;
|
||||
border: 1px solid #f5f5f5;
|
||||
|
||||
.title {
|
||||
background-color: #fff;
|
||||
padding: 5px 6px 5px 25px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.title_l {
|
||||
width: 103px;
|
||||
height: 26px;
|
||||
color: rgba(16, 16, 16, 1);
|
||||
font-size: 18px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.title_r {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
line-height: 24px;
|
||||
cursor: pointer;
|
||||
color: rgba(111, 103, 103, 1);
|
||||
}
|
||||
}
|
||||
|
||||
// h3 {
|
||||
// padding-bottom: 10px;
|
||||
// background-color: #fff;
|
||||
// }
|
||||
|
||||
.el-divider--horizontal {
|
||||
margin: 0px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,742 @@
|
|||
<!-- 网关通道 -->
|
||||
<template>
|
||||
<div>
|
||||
<!-- v-click-outside="closeMenu" -->
|
||||
<div>
|
||||
<div class="tree_menu" v-show="dialogVisible">
|
||||
<el-tree :data="$store.state.tree" :props="defaultProps" default-expand-all @node-contextmenu="rightClick"
|
||||
@node-click="treeNodeClick" ref="tree">
|
||||
<span class="custom-tree-node" slot-scope="{ node, data }">
|
||||
<template v-if="data.editing == 1">
|
||||
<el-button type="mini" v-if="flag" style="right: 50px; top: 0; position: absolute; border: none"
|
||||
@click.stop="done">完成</el-button>
|
||||
<el-button type="mini" style="right: 0; top: 0; position: absolute; border: none"
|
||||
@click.stop="edit">编辑</el-button>
|
||||
<span v-if="!flag">{{ data.label }}</span>
|
||||
<el-input v-else style="width: 150px" v-model="gateway"></el-input>
|
||||
</template>
|
||||
<template v-else>{{ data.label }}</template>
|
||||
</span>
|
||||
</el-tree>
|
||||
<!-- 树形控件右键组件 -->
|
||||
<div v-show="menuShow" class="tree_rightmenu" :style="{ ...rightMenu }">
|
||||
<el-menu class="el-menu-vertical-demo" @select="selectMenuNode" default-active="#0078FE">
|
||||
<el-menu-item id="menuitem" index="1" style="font-size: 12px">
|
||||
<span slot="title">新建通道</span>
|
||||
</el-menu-item>
|
||||
<el-menu-item index="2" style="font-size: 12px">
|
||||
<span slot="title">取 消</span>
|
||||
</el-menu-item>
|
||||
</el-menu>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pas_params">
|
||||
<el-dialog title="通道参数设置" :visible.sync="add_passage" width="765px" v-loading="Loading">
|
||||
<el-form :model="FormData" :label-position="labelPosition" :rules="rules" ref="ruleForm">
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="通道名称:" :label-width="formLabelWidth" prop="tdpz_tdmc">
|
||||
<el-select v-model="FormData.tdpz_tdmc" placeholder="" style="width: 200px; height: 30px">
|
||||
<el-option v-for="(item, index) in options1" :key="index" :label="item.label" :value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="通道:" :label-width="formLabelWidth" prop="tdpz_td">
|
||||
<el-select v-model="FormData.tdpz_td" placeholder="" style="width: 200px; height: 30px">
|
||||
<el-option v-for="(item, index) in options2" :key="index" :label="item.label" :value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="驱动名称:" :label-width="formLabelWidth" prop="tdpz_qdmc">
|
||||
<el-row>
|
||||
<el-col :span="18">
|
||||
<el-input v-model="FormData.tdpz_qdmc" placeholder="" style="width: 200px; height: 30px"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-button style="width: 50px; height: 30px" @click="getDriveName">...</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="IP地址:" :label-width="formLabelWidth" prop="tdpz_ip">
|
||||
<el-row>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="tdpz_ip1" style="width: 43px; height: 30px"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1" style="color: #fff">. </el-col>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="tdpz_ip2" style="width: 43px; height: 30px"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1" style="color: #fff">.</el-col>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="tdpz_ip3" style="width: 43px; height: 30px"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1" style="color: #fff">.</el-col>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="tdpz_ip4" style="width: 43px; height: 30px"></el-input>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="端口号:" :label-width="formLabelWidth" prop="tdpz_port">
|
||||
<el-input v-model="FormData.tdpz_port" placeholder="" style="width: 200px; height: 30px"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="超过时间(ms):" :label-width="formLabelWidth" prop="tdpz_cssj">
|
||||
<el-input v-model="FormData.tdpz_cssj" placeholder="" style="width: 200px; height: 30px"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="间隔时间(ms):" :label-width="formLabelWidth" prop="tdpz_jgsj">
|
||||
<el-input v-model="FormData.tdpz_jgsj" placeholder="" style="width: 200px; height: 30px"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="轮询时间(ms):" :label-width="formLabelWidth" prop="tdpz_lxsj">
|
||||
<el-input v-model="FormData.tdpz_lxsj" placeholder="" style="width: 200px; height: 30px"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="重复次数:" :label-width="formLabelWidth" prop="tdpz_cfcs">
|
||||
<el-input v-model="FormData.tdpz_cfcs" placeholder="" style="width: 200px; height: 30px"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<div class="super_parmams">
|
||||
<h3>高级参数</h3>
|
||||
<div>
|
||||
<i class="el-icon-caret-bottom" v-if="is_retract"></i>
|
||||
<i class="el-icon-caret-top" v-else="is_retract"></i>
|
||||
<el-button type="text" plain @click="getRetract" style="
|
||||
width: 28px;
|
||||
border: none;
|
||||
color: rgba(16, 16, 16, 1);
|
||||
font-size: 14px;
|
||||
text-align: left;
|
||||
">
|
||||
收起</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="super_con" v-show="is_retract">
|
||||
<el-form :label-position="labelPosition" :rules="rules" ref="ruleForm">
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item>
|
||||
<el-checkbox v-model="FormData.tdpz_watchtime">watch time(s)</el-checkbox>
|
||||
<el-input v-model="input1" placeholder="" style="width: 200px; height: 30px"
|
||||
:disabled="isdisabled"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item>
|
||||
<el-checkbox v-model="FormData.tdpz_cjsylxdz">采集使用连续地址</el-checkbox>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="读写占空比:" :label-width="formLabelWidth">
|
||||
<el-row>
|
||||
<el-col :span="10">
|
||||
<el-input v-model="tdpz_dxzkb1" style="width: 91px; height: 30px"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="4">: </el-col>
|
||||
<el-col :span="10">
|
||||
<el-input v-model="tdpz_dxzkb2" style="width: 91px; height: 30px"></el-input>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="05/0F:" :label-width="formLabelWidth">
|
||||
<el-row>
|
||||
<el-col :span="8"><el-radio v-model="FormData.tdpz_050F" label="auto">auto</el-radio></el-col>
|
||||
<el-col :span="8"><el-radio v-model="FormData.tdpz_050F" label="05">05</el-radio></el-col>
|
||||
<el-col :span="8"><el-radio v-model="FormData.tdpz_050F" label="0F">0F</el-radio></el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="06/10:" :label-width="formLabelWidth">
|
||||
<el-row>
|
||||
<el-col :span="8"><el-radio v-model="FormData.tdpz_0610" label="auto">auto</el-radio></el-col>
|
||||
<el-col :span="8"><el-radio v-model="FormData.tdpz_0610" label="06">06</el-radio></el-col>
|
||||
<el-col :span="8"><el-radio v-model="FormData.tdpz_0610" label="10">10</el-radio></el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</div>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="saveGate">保 存</el-button>
|
||||
<el-button @click="add_passage = false">取 消</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
<div class="drvieName_All" v-show="diag_drive">
|
||||
<div class="title">
|
||||
<p class="title_l">协议选择</p>
|
||||
<i class="el-icon-close title_r" @click="diag_drive = false"></i>
|
||||
</div>
|
||||
<el-divider></el-divider>
|
||||
<el-tree :data="datas2" :props="defaultProps" @node-click="handleDetailClick" default-expand-all></el-tree>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { SaveUserAnswer, GetUserAnswer } from "@/api/user";
|
||||
import { Loading } from "element-ui";
|
||||
|
||||
export default {
|
||||
name: "TestTreeView",
|
||||
|
||||
data() {
|
||||
return {
|
||||
flag: false,
|
||||
gateway: JSON.parse(localStorage.getItem("tree"))[0].label,
|
||||
FormData: {
|
||||
tdpz_tdmc: "有线区Channel1",
|
||||
tdpz_td: "网口",
|
||||
tdpz_qdmc: "ModbusTCPClient",
|
||||
tdpz_port: "",
|
||||
tdpz_cssj: "",
|
||||
tdpz_jgsj: "",
|
||||
tdpz_lxsj: "",
|
||||
tdpz_cfcs: "",
|
||||
tdpz_watchtime: true,
|
||||
tdpz_cjsylxdz: false,
|
||||
tdpz_dxzkb: "",
|
||||
tdpz_050F: "auto",
|
||||
tdpz_0610: "auto",
|
||||
},
|
||||
tdpz_dxzkb1: "1",
|
||||
tdpz_dxzkb2: "1",
|
||||
tdpz_ip1: "",
|
||||
tdpz_ip2: "",
|
||||
tdpz_ip3: "",
|
||||
tdpz_ip4: "",
|
||||
options1: [
|
||||
{
|
||||
value: "有线区Channel1",
|
||||
label: "有线区Channel1",
|
||||
},
|
||||
{
|
||||
value: "无线区Channel1",
|
||||
label: "无线区Channel1",
|
||||
},
|
||||
],
|
||||
options2: [
|
||||
{
|
||||
value: "网口",
|
||||
label: "网口",
|
||||
},
|
||||
{
|
||||
value: "串口",
|
||||
label: "串口",
|
||||
},
|
||||
],
|
||||
value1: "有线区Channel1",
|
||||
value2: "网口",
|
||||
diag_drive: false,
|
||||
isdisabled: true,
|
||||
radio: "1",
|
||||
is_retract: true,
|
||||
labelPosition: "left",
|
||||
formLabelWidth: "116px",
|
||||
input1: 192,
|
||||
add_passage: false,
|
||||
rightMenu: "",
|
||||
dialogVisible: true,
|
||||
menuShow: false,
|
||||
datas: [],
|
||||
datas2: [
|
||||
{
|
||||
label: "通用标准",
|
||||
children: [
|
||||
{
|
||||
label: "ModbusTCPClient",
|
||||
},
|
||||
{
|
||||
label: "ModbusRTU_over_TCP",
|
||||
},
|
||||
{
|
||||
label: "OPCUAClient",
|
||||
},
|
||||
{
|
||||
label: "OPCDAClient",
|
||||
},
|
||||
{
|
||||
label: "MQTTClient",
|
||||
},
|
||||
{
|
||||
label: "OPCXMLDAClient",
|
||||
},
|
||||
{
|
||||
label: "环保212协议网口监听",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "PLC",
|
||||
children: [
|
||||
{
|
||||
label: "Slemens S7-200 Network",
|
||||
},
|
||||
{
|
||||
label: "Slemens S7-300 Network",
|
||||
},
|
||||
{
|
||||
label: "Slemens S7-400 Network",
|
||||
},
|
||||
{
|
||||
label: "Slemens S7-1200 Network",
|
||||
},
|
||||
{
|
||||
label: "Slemens S7-1500 Network",
|
||||
},
|
||||
{
|
||||
label: "EtherNet/IP CIP协议(AB OMR ON)",
|
||||
},
|
||||
{
|
||||
label: "MC_Qna-3E(三菱 基恩士 松下)",
|
||||
},
|
||||
{
|
||||
label: "MC_A-1E_Binary",
|
||||
},
|
||||
{
|
||||
label: "OMRON-FINS",
|
||||
},
|
||||
{
|
||||
label: "横河PLC",
|
||||
},
|
||||
{
|
||||
label: "西门子FetchWirte",
|
||||
},
|
||||
{
|
||||
label: "富机 FUJI_SPH_NET",
|
||||
},
|
||||
{
|
||||
label: "基恩士上位链路通讯",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "智能建筑",
|
||||
children: [],
|
||||
},
|
||||
{
|
||||
label: "厂家定制",
|
||||
children: [],
|
||||
},
|
||||
{
|
||||
label: "电力行业标准",
|
||||
children: [
|
||||
{
|
||||
label: "IEC104",
|
||||
},
|
||||
{
|
||||
label: "DLT645_over_TCP",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "CNC数控",
|
||||
children: [],
|
||||
},
|
||||
{
|
||||
label: "私有协议",
|
||||
children: [],
|
||||
},
|
||||
],
|
||||
defaultProps: {
|
||||
children: "children",
|
||||
label: "label",
|
||||
},
|
||||
rules: {
|
||||
tdpz_tdmc: [
|
||||
{ required: true, message: "请输入通道名称", trigger: "change" },
|
||||
],
|
||||
tdpz_td: [{ required: true, message: "请输入通道", trigger: "change" }],
|
||||
tdpz_qdmc: [
|
||||
{ required: true, message: "请输入驱动名称", trigger: "change" },
|
||||
],
|
||||
tdpz_ip: [{ required: true, message: "请输入ip地址", trigger: "blur" }],
|
||||
tdpz_port: [
|
||||
{ required: true, message: "请输入端口号", trigger: "blur" },
|
||||
],
|
||||
tdpz_cssj: [
|
||||
{ required: true, message: "请输入超出时间", trigger: "blur" },
|
||||
],
|
||||
tdpz_jgsj: [
|
||||
{ required: true, message: "请输入间隔时间", trigger: "blur" },
|
||||
],
|
||||
tdpz_lxsj: [
|
||||
{ required: true, message: "请输入轮询时间", trigger: "blur" },
|
||||
],
|
||||
tdpz_cfcs: [
|
||||
{ required: true, message: "请输入重复次数", trigger: "blur" },
|
||||
],
|
||||
},
|
||||
};
|
||||
},
|
||||
created() {
|
||||
console.log(this.$store.state.tree);
|
||||
},
|
||||
methods: {
|
||||
//编辑
|
||||
edit(event) {
|
||||
this.flag = true;
|
||||
},
|
||||
//完成编辑
|
||||
done(event) {
|
||||
this.flag = false;
|
||||
let tree = this.$store.state.tree;
|
||||
tree[0].label = this.gateway;
|
||||
this.$store.commit("setTree", tree);
|
||||
},
|
||||
rightClick(e, data, node) {
|
||||
this.menuShow = false;
|
||||
this.menuShow = true;
|
||||
e.preventDefault(); //关闭浏览器右键默认事件
|
||||
this.rightMenu = { top: e.pageY + "px", left: e.pageX + "px" };
|
||||
document.addEventListener("click", (ev) => {
|
||||
ev.stopImmediatePropagation();
|
||||
if (ev.target !== document.querySelector(".el-menu-item.is-active")) {
|
||||
this.foo();
|
||||
}
|
||||
});
|
||||
},
|
||||
// 点击时候的判断,判断是否为新增网关
|
||||
selectMenuNode(index, indexPath) {
|
||||
console.log(index);
|
||||
if (index == 1) {
|
||||
this.add_passage = true;
|
||||
}
|
||||
},
|
||||
foo() {
|
||||
// 取消鼠标监听事件 菜单栏
|
||||
this.menuShow = false;
|
||||
document.removeEventListener("click", this.foo); // 关掉监听，
|
||||
},
|
||||
treeNodeClick(key) {
|
||||
// console.log
|
||||
this.foo();
|
||||
},
|
||||
// 收起点击事件的判断
|
||||
getRetract() {
|
||||
if (this.is_retract == true) {
|
||||
this.is_retract = false;
|
||||
} else {
|
||||
this.is_retract = true;
|
||||
}
|
||||
},
|
||||
getDriveName() {
|
||||
this.diag_drive = true;
|
||||
},
|
||||
Merge(value, value1, value2, value3, value4) {
|
||||
value = value1 + "." + value2 + "." + value3 + "." + value4;
|
||||
return value;
|
||||
},
|
||||
async saveGate() {
|
||||
|
||||
this.add_passage = false;
|
||||
var obj = {
|
||||
tdpz_tdmc: this.FormData.tdpz_tdmc,
|
||||
tdpz_td: this.FormData.tdpz_td,
|
||||
tdpz_qdmc: this.FormData.tdpz_qdmc,
|
||||
tdpz_port: this.FormData.tdpz_port,
|
||||
tdpz_ccsj: this.FormData.tdpz_cssj,
|
||||
tdpz_jgsj: this.FormData.tdpz_jgsj,
|
||||
tdpz_ip: this.tdpz_ip1 + "." + this.tdpz_ip2 + "." + this.tdpz_ip3 + "." + this.tdpz_ip4,
|
||||
tdpz_lxsj: this.FormData.tdpz_lxsj,
|
||||
tdpz_cfcs: this.FormData.tdpz_cfcs,
|
||||
tdpz_watchtime: String(Number(this.FormData.tdpz_watchtime)),
|
||||
tdpz_cjsylxdz: String(Number(this.FormData.tdpz_cjsylxdz)),
|
||||
tdpz_dxzkb: this.tdpz_dxzkb1 + ":" + this.tdpz_dxzkb2,
|
||||
tdpz_050F: this.FormData.tdpz_050F,
|
||||
tdpz_0610: this.FormData.tdpz_0610,
|
||||
}
|
||||
let datas = sessionStorage.getItem("DB-IotLite_yx");
|
||||
datas = { ...JSON.parse(datas), ...obj };
|
||||
let res = await SaveUserAnswer({
|
||||
mark: "DB-IotLite_yx",
|
||||
user_id: "USER202307301109254198",
|
||||
mark_value: JSON.stringify(datas),
|
||||
});
|
||||
if (res.status == 200) {
|
||||
this.$message({
|
||||
message: '保存成功',
|
||||
type: 'success'
|
||||
});
|
||||
}
|
||||
sessionStorage.setItem("DB-IotLite_yx", JSON.stringify(datas));
|
||||
console.log(res);
|
||||
console.log(res.data.data.mark_value);
|
||||
// this.$router.push("/dbcollectdevice");
|
||||
},
|
||||
handleDetailClick(data, node, value) {
|
||||
console.log(data.label);
|
||||
this.FormData.tdpz_qdmc = data.label;
|
||||
this.diag_drive = false;
|
||||
},
|
||||
async GetUserAnswer() {
|
||||
let answer = await GetUserAnswer({
|
||||
mark: "DB-IotLite_yx",
|
||||
user_id: "USER202307301109254198",
|
||||
});
|
||||
console.log(answer);
|
||||
let obj = JSON.parse(answer.data.data.mark_value);
|
||||
console.log(obj);
|
||||
// this.FormData.
|
||||
if (obj.tdpz_dxzkb) {
|
||||
this.tdpz_dxzkb1 = obj.tdpz_dxzkb.split(":")[0];
|
||||
this.tdpz_dxzkb2 = obj.tdpz_dxzkb.split(":")[1];
|
||||
}
|
||||
this.FormData.tdpz_watchtime = Boolean(Number(obj.tdpz_watchtime));
|
||||
// console.log(this.FormData.tdpz_watchtime);
|
||||
this.FormData.tdpz_cjsylxdz = Boolean(Number(obj.tdpz_cjsylxdz));
|
||||
if (obj.tdpz_ip) {
|
||||
this.tdpz_ip1 = obj.tdpz_ip.split(".")[0];
|
||||
this.tdpz_ip2 = obj.tdpz_ip.split(".")[1];
|
||||
this.tdpz_ip3 = obj.tdpz_ip.split(".")[2];
|
||||
this.tdpz_ip4 = obj.tdpz_ip.split(".")[3];
|
||||
}
|
||||
this.FormData.tdpz_tdmc = obj.tdpz_tdmc;
|
||||
this.FormData.tdpz_td = obj.tdpz_td;
|
||||
this.FormData.tdpz_qdmc = obj.tdpz_qdmc;
|
||||
this.FormData.tdpz_050F = obj.tdpz_050F;
|
||||
this.FormData.tdpz_0610 = obj.tdpz_0610;
|
||||
this.FormData.tdpz_port = obj.tdpz_port;
|
||||
this.FormData.tdpz_cssj = obj.tdpz_cssj;
|
||||
this.FormData.tdpz_jgsj = obj.tdpz_jgsj;
|
||||
this.FormData.tdpz_lxsj = obj.tdpz_lxsj;
|
||||
this.FormData.tdpz_cfcs = obj.tdpz_cfcs;
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.Loading = true;
|
||||
this.GetUserAnswer();
|
||||
this.Loading = false;
|
||||
// let res2 = GetUserAnswer()
|
||||
},
|
||||
|
||||
watch: {
|
||||
// "FormData.tdpz_watchtime": {
|
||||
// handler(old) {
|
||||
// if (old) {
|
||||
// this.isdisabled = false;
|
||||
// } else {
|
||||
// this.isdisabled = true;
|
||||
// }
|
||||
// },
|
||||
// },
|
||||
"FormData.tdpz_watchtime"(newval) {
|
||||
console.log(newval);
|
||||
if (newval) {
|
||||
this.isdisabled = true;
|
||||
} else {
|
||||
this.isdisabled = false;
|
||||
}
|
||||
},
|
||||
},
|
||||
directives: {
|
||||
clickoutside: {
|
||||
bind: function (el, binding, vnode) {
|
||||
function documentHandler(e) {
|
||||
if (el.contains(e.target)) {
|
||||
return false;
|
||||
}
|
||||
if (binding.expression) {
|
||||
binding.value(e);
|
||||
}
|
||||
}
|
||||
el._vueClickOutside_ = documentHandler;
|
||||
document.addEventListener("click", documentHandler);
|
||||
},
|
||||
unbind: function (el, binding) {
|
||||
document.removeEventListener("click", el._vueClickOutside_);
|
||||
delete el._vueClickOutside_;
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.tree_menu {
|
||||
position: absolute;
|
||||
width: 286px;
|
||||
left: 64px;
|
||||
top: 104px;
|
||||
width: 286px;
|
||||
height: 753px;
|
||||
line-height: 20px;
|
||||
border-radius: 3px;
|
||||
background-color: rgba(255, 255, 255, 1);
|
||||
text-align: center;
|
||||
border: 1px solid rgba(220, 220, 220, 1);
|
||||
}
|
||||
|
||||
.tree_rightmenu {
|
||||
position: fixed;
|
||||
width: 120px;
|
||||
border: 1px solid rgba(0, 0, 0, 0.15);
|
||||
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.super_parmams {
|
||||
display: flex;
|
||||
color: #fff !important;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: 668px;
|
||||
|
||||
i {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
/deep/ .pas_params {
|
||||
.el-col-12:last-child {
|
||||
padding-right: 150px;
|
||||
}
|
||||
|
||||
.el-col-12:first-child {
|
||||
padding-right: 38px;
|
||||
}
|
||||
|
||||
.el-input__inner {
|
||||
height: 30px;
|
||||
text-align: left;
|
||||
padding: 0px 8px;
|
||||
}
|
||||
|
||||
.el-row {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
|
||||
.el-col-1 {
|
||||
color: #fff !important;
|
||||
text-align: center;
|
||||
line-height: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.el-col-6 {
|
||||
height: 40px;
|
||||
top: 6px;
|
||||
left: 77px;
|
||||
position: relative;
|
||||
width: 50px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.super_con {
|
||||
.el-col-12:last-child {
|
||||
padding-right: 28px;
|
||||
}
|
||||
|
||||
.el-col-12:first-child {
|
||||
padding-right: 42px;
|
||||
}
|
||||
|
||||
.el-input__inner {
|
||||
text-align: left;
|
||||
padding: 0 8px;
|
||||
}
|
||||
|
||||
.el-row {
|
||||
color: #fff !important;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
|
||||
.el-col-4 {
|
||||
padding-left: 5px;
|
||||
width: 14px;
|
||||
text-align: center;
|
||||
line-height: 4px;
|
||||
height: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.el-dialog__footer {
|
||||
padding: 18px 1.25rem 50px;
|
||||
}
|
||||
|
||||
.dialog-footer {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
bottom: 45px;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
/deep/ .drvieName_All {
|
||||
position: absolute;
|
||||
left: 1408px;
|
||||
top: 140px;
|
||||
width: 435px;
|
||||
max-height: 720px;
|
||||
z-index: 10000;
|
||||
border: 1px solid #f5f5f5;
|
||||
|
||||
.title {
|
||||
background-color: #fff;
|
||||
padding: 5px 6px 5px 25px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.title_l {
|
||||
width: 103px;
|
||||
height: 26px;
|
||||
color: rgba(16, 16, 16, 1);
|
||||
font-size: 18px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.title_r {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
line-height: 24px;
|
||||
cursor: pointer;
|
||||
color: rgba(111, 103, 103, 1);
|
||||
}
|
||||
}
|
||||
|
||||
// h3 {
|
||||
// padding-bottom: 10px;
|
||||
// background-color: #fff;
|
||||
// }
|
||||
|
||||
.el-divider--horizontal {
|
||||
margin: 0px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,742 @@
|
|||
<!-- 网关通道 -->
|
||||
<template>
|
||||
<div>
|
||||
<!-- v-click-outside="closeMenu" -->
|
||||
<div>
|
||||
<div class="tree_menu" v-show="dialogVisible">
|
||||
<el-tree :data="$store.state.tree" :props="defaultProps" default-expand-all @node-contextmenu="rightClick"
|
||||
@node-click="treeNodeClick" ref="tree" :render-content="renderContent">
|
||||
<span class="custom-tree-node" slot-scope="{ node, data }">
|
||||
<template v-if="data.editing == 1">
|
||||
<el-button type="mini" v-if="flag" style="right: 50px; top: 0; position: absolute; border: none"
|
||||
@click.stop="done">完成</el-button>
|
||||
<el-button type="mini" style="right: 0; top: 0; position: absolute; border: none"
|
||||
@click.stop="edit">编辑</el-button>
|
||||
<span v-if="!flag">{{ data.label }}</span>
|
||||
<el-input v-else style="width: 150px" v-model="gateway"></el-input>
|
||||
</template>
|
||||
<template v-else>{{ data.label }}</template>
|
||||
</span>
|
||||
</el-tree>
|
||||
<!-- 树形控件右键组件 -->
|
||||
<div v-show="menuShow" class="tree_rightmenu" :style="{ ...rightMenu }">
|
||||
<el-menu class="el-menu-vertical-demo" @select="selectMenuNode" default-active="#0078FE">
|
||||
<el-menu-item id="menuitem" index="1" style="font-size: 12px">
|
||||
<span slot="title">新建通道</span>
|
||||
</el-menu-item>
|
||||
<el-menu-item index="2" style="font-size: 12px">
|
||||
<span slot="title">取 消</span>
|
||||
</el-menu-item>
|
||||
</el-menu>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pas_params">
|
||||
<el-dialog title="通道参数设置" :visible.sync="add_passage" width="765px" v-loading="Loading">
|
||||
<el-form :model="FormData" :label-position="labelPosition" :rules="rules" ref="ruleForm">
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="通道名称:" :label-width="formLabelWidth" prop="tdpz_tdmc">
|
||||
<el-select v-model="FormData.tdpz_tdmc" placeholder="" style="width: 200px; height: 30px">
|
||||
<el-option v-for="(item, index) in options1" :key="index" :label="item.label" :value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="通道:" :label-width="formLabelWidth" prop="tdpz_td">
|
||||
<el-select v-model="FormData.tdpz_td" placeholder="" style="width: 200px; height: 30px">
|
||||
<el-option v-for="(item, index) in options2" :key="index" :label="item.label" :value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="驱动名称:" :label-width="formLabelWidth" prop="tdpz_qdmc">
|
||||
<el-row>
|
||||
<el-col :span="18">
|
||||
<el-input v-model="FormData.tdpz_qdmc" placeholder="" style="width: 200px; height: 30px"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-button style="width: 50px; height: 30px" @click="getDriveName">...</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="IP地址:" :label-width="formLabelWidth" prop="tdpz_ip">
|
||||
<el-row>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="tdpz_ip1" style="width: 43px; height: 30px"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1" style="color: #fff">. </el-col>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="tdpz_ip2" style="width: 43px; height: 30px"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1" style="color: #fff">.</el-col>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="tdpz_ip3" style="width: 43px; height: 30px"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1" style="color: #fff">.</el-col>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="tdpz_ip4" style="width: 43px; height: 30px"></el-input>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="端口号:" :label-width="formLabelWidth" prop="tdpz_port">
|
||||
<el-input v-model="FormData.tdpz_port" placeholder="" style="width: 200px; height: 30px"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="超过时间(ms):" :label-width="formLabelWidth" prop="tdpz_cssj">
|
||||
<el-input v-model="FormData.tdpz_cssj" placeholder="" style="width: 200px; height: 30px"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="间隔时间(ms):" :label-width="formLabelWidth" prop="tdpz_jgsj">
|
||||
<el-input v-model="FormData.tdpz_jgsj" placeholder="" style="width: 200px; height: 30px"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="轮询时间(ms):" :label-width="formLabelWidth" prop="tdpz_lxsj">
|
||||
<el-input v-model="FormData.tdpz_lxsj" placeholder="" style="width: 200px; height: 30px"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="重复次数:" :label-width="formLabelWidth" prop="tdpz_cfcs">
|
||||
<el-input v-model="FormData.tdpz_cfcs" placeholder="" style="width: 200px; height: 30px"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<div class="super_parmams">
|
||||
<h3>高级参数</h3>
|
||||
<div>
|
||||
<i class="el-icon-caret-bottom" v-if="is_retract"></i>
|
||||
<i class="el-icon-caret-top" v-else="is_retract"></i>
|
||||
<el-button type="text" plain @click="getRetract" style="
|
||||
width: 28px;
|
||||
border: none;
|
||||
color: rgba(16, 16, 16, 1);
|
||||
font-size: 14px;
|
||||
text-align: left;
|
||||
">
|
||||
收起</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="super_con" v-show="is_retract">
|
||||
<el-form :label-position="labelPosition" :rules="rules" ref="ruleForm">
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item>
|
||||
<el-checkbox v-model="FormData.tdpz_watchtime">watch time(s)</el-checkbox>
|
||||
<el-input v-model="input1" placeholder="" style="width: 200px; height: 30px"
|
||||
:disabled="isdisabled"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item>
|
||||
<el-checkbox v-model="FormData.tdpz_cjsylxdz">采集使用连续地址</el-checkbox>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="读写占空比:" :label-width="formLabelWidth">
|
||||
<el-row>
|
||||
<el-col :span="10">
|
||||
<el-input v-model="tdpz_dxzkb1" style="width: 91px; height: 30px"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="4">: </el-col>
|
||||
<el-col :span="10">
|
||||
<el-input v-model="tdpz_dxzkb2" style="width: 91px; height: 30px"></el-input>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="05/0F:" :label-width="formLabelWidth">
|
||||
<el-row>
|
||||
<el-col :span="8"><el-radio v-model="FormData.tdpz_050F" label="auto">auto</el-radio></el-col>
|
||||
<el-col :span="8"><el-radio v-model="FormData.tdpz_050F" label="05">05</el-radio></el-col>
|
||||
<el-col :span="8"><el-radio v-model="FormData.tdpz_050F" label="0F">0F</el-radio></el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="06/10:" :label-width="formLabelWidth">
|
||||
<el-row>
|
||||
<el-col :span="8"><el-radio v-model="FormData.tdpz_0610" label="auto">auto</el-radio></el-col>
|
||||
<el-col :span="8"><el-radio v-model="FormData.tdpz_0610" label="06">06</el-radio></el-col>
|
||||
<el-col :span="8"><el-radio v-model="FormData.tdpz_0610" label="10">10</el-radio></el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</div>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="saveGate">保 存</el-button>
|
||||
<el-button @click="add_passage = false">取 消</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
<div class="drvieName_All" v-show="diag_drive">
|
||||
<div class="title">
|
||||
<p class="title_l">协议选择</p>
|
||||
<i class="el-icon-close title_r" @click="diag_drive = false"></i>
|
||||
</div>
|
||||
<el-divider></el-divider>
|
||||
<el-tree :data="datas2" :props="defaultProps" @node-click="handleDetailClick" default-expand-all></el-tree>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { SaveUserAnswer, GetUserAnswer } from "@/api/user";
|
||||
import { Loading } from "element-ui";
|
||||
|
||||
export default {
|
||||
name: "TestTreeView",
|
||||
|
||||
data() {
|
||||
return {
|
||||
flag: false,
|
||||
gateway: JSON.parse(localStorage.getItem("tree"))[0].label,
|
||||
FormData: {
|
||||
tdpz_tdmc: "有线区Channel1",
|
||||
tdpz_td: "网口",
|
||||
tdpz_qdmc: "ModbusTCPClient",
|
||||
tdpz_port: "",
|
||||
tdpz_cssj: "",
|
||||
tdpz_jgsj: "",
|
||||
tdpz_lxsj: "",
|
||||
tdpz_cfcs: "",
|
||||
tdpz_watchtime: true,
|
||||
tdpz_cjsylxdz: false,
|
||||
tdpz_dxzkb: "",
|
||||
tdpz_050F: "auto",
|
||||
tdpz_0610: "auto",
|
||||
},
|
||||
tdpz_dxzkb1: "1",
|
||||
tdpz_dxzkb2: "1",
|
||||
tdpz_ip1: "",
|
||||
tdpz_ip2: "",
|
||||
tdpz_ip3: "",
|
||||
tdpz_ip4: "",
|
||||
options1: [
|
||||
{
|
||||
value: "有线区Channel1",
|
||||
label: "有线区Channel1",
|
||||
},
|
||||
{
|
||||
value: "无线区Channel1",
|
||||
label: "无线区Channel1",
|
||||
},
|
||||
],
|
||||
options2: [
|
||||
{
|
||||
value: "网口",
|
||||
label: "网口",
|
||||
},
|
||||
{
|
||||
value: "串口",
|
||||
label: "串口",
|
||||
},
|
||||
],
|
||||
value1: "有线区Channel1",
|
||||
value2: "网口",
|
||||
diag_drive: false,
|
||||
isdisabled: true,
|
||||
radio: "1",
|
||||
is_retract: true,
|
||||
labelPosition: "left",
|
||||
formLabelWidth: "116px",
|
||||
input1: 192,
|
||||
add_passage: false,
|
||||
rightMenu: "",
|
||||
dialogVisible: true,
|
||||
menuShow: false,
|
||||
datas: [],
|
||||
datas2: [
|
||||
{
|
||||
label: "通用标准",
|
||||
children: [
|
||||
{
|
||||
label: "ModbusTCPClient",
|
||||
},
|
||||
{
|
||||
label: "ModbusRTU_over_TCP",
|
||||
},
|
||||
{
|
||||
label: "OPCUAClient",
|
||||
},
|
||||
{
|
||||
label: "OPCDAClient",
|
||||
},
|
||||
{
|
||||
label: "MQTTClient",
|
||||
},
|
||||
{
|
||||
label: "OPCXMLDAClient",
|
||||
},
|
||||
{
|
||||
label: "环保212协议网口监听",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "PLC",
|
||||
children: [
|
||||
{
|
||||
label: "Slemens S7-200 Network",
|
||||
},
|
||||
{
|
||||
label: "Slemens S7-300 Network",
|
||||
},
|
||||
{
|
||||
label: "Slemens S7-400 Network",
|
||||
},
|
||||
{
|
||||
label: "Slemens S7-1200 Network",
|
||||
},
|
||||
{
|
||||
label: "Slemens S7-1500 Network",
|
||||
},
|
||||
{
|
||||
label: "EtherNet/IP CIP协议(AB OMR ON)",
|
||||
},
|
||||
{
|
||||
label: "MC_Qna-3E(三菱 基恩士 松下)",
|
||||
},
|
||||
{
|
||||
label: "MC_A-1E_Binary",
|
||||
},
|
||||
{
|
||||
label: "OMRON-FINS",
|
||||
},
|
||||
{
|
||||
label: "横河PLC",
|
||||
},
|
||||
{
|
||||
label: "西门子FetchWirte",
|
||||
},
|
||||
{
|
||||
label: "富机 FUJI_SPH_NET",
|
||||
},
|
||||
{
|
||||
label: "基恩士上位链路通讯",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "智能建筑",
|
||||
children: [],
|
||||
},
|
||||
{
|
||||
label: "厂家定制",
|
||||
children: [],
|
||||
},
|
||||
{
|
||||
label: "电力行业标准",
|
||||
children: [
|
||||
{
|
||||
label: "IEC104",
|
||||
},
|
||||
{
|
||||
label: "DLT645_over_TCP",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "CNC数控",
|
||||
children: [],
|
||||
},
|
||||
{
|
||||
label: "私有协议",
|
||||
children: [],
|
||||
},
|
||||
],
|
||||
defaultProps: {
|
||||
children: "children",
|
||||
label: "label",
|
||||
},
|
||||
rules: {
|
||||
tdpz_tdmc: [
|
||||
{ required: true, message: "请输入通道名称", trigger: "change" },
|
||||
],
|
||||
tdpz_td: [{ required: true, message: "请输入通道", trigger: "change" }],
|
||||
tdpz_qdmc: [
|
||||
{ required: true, message: "请输入驱动名称", trigger: "change" },
|
||||
],
|
||||
tdpz_ip: [{ required: true, message: "请输入ip地址", trigger: "blur" }],
|
||||
tdpz_port: [
|
||||
{ required: true, message: "请输入端口号", trigger: "blur" },
|
||||
],
|
||||
tdpz_cssj: [
|
||||
{ required: true, message: "请输入超出时间", trigger: "blur" },
|
||||
],
|
||||
tdpz_jgsj: [
|
||||
{ required: true, message: "请输入间隔时间", trigger: "blur" },
|
||||
],
|
||||
tdpz_lxsj: [
|
||||
{ required: true, message: "请输入轮询时间", trigger: "blur" },
|
||||
],
|
||||
tdpz_cfcs: [
|
||||
{ required: true, message: "请输入重复次数", trigger: "blur" },
|
||||
],
|
||||
},
|
||||
};
|
||||
},
|
||||
created() {
|
||||
console.log(this.$store.state.tree);
|
||||
},
|
||||
methods: {
|
||||
//编辑
|
||||
edit(event) {
|
||||
this.flag = true;
|
||||
},
|
||||
//完成编辑
|
||||
done(event) {
|
||||
this.flag = false;
|
||||
let tree = this.$store.state.tree;
|
||||
tree[0].label = this.gateway;
|
||||
this.$store.commit("setTree", tree);
|
||||
},
|
||||
rightClick(e, data, node) {
|
||||
this.menuShow = false;
|
||||
this.menuShow = true;
|
||||
e.preventDefault(); //关闭浏览器右键默认事件
|
||||
this.rightMenu = { top: e.pageY + "px", left: e.pageX + "px" };
|
||||
document.addEventListener("click", (ev) => {
|
||||
ev.stopImmediatePropagation();
|
||||
if (ev.target !== document.querySelector(".el-menu-item.is-active")) {
|
||||
this.foo();
|
||||
}
|
||||
});
|
||||
},
|
||||
// 点击时候的判断,判断是否为新增网关
|
||||
selectMenuNode(index, indexPath) {
|
||||
console.log(index);
|
||||
if (index == 1) {
|
||||
this.add_passage = true;
|
||||
}
|
||||
},
|
||||
foo() {
|
||||
// 取消鼠标监听事件 菜单栏
|
||||
this.menuShow = false;
|
||||
document.removeEventListener("click", this.foo); // 关掉监听，
|
||||
},
|
||||
treeNodeClick(key) {
|
||||
// console.log
|
||||
this.foo();
|
||||
},
|
||||
// 收起点击事件的判断
|
||||
getRetract() {
|
||||
if (this.is_retract == true) {
|
||||
this.is_retract = false;
|
||||
} else {
|
||||
this.is_retract = true;
|
||||
}
|
||||
},
|
||||
getDriveName() {
|
||||
this.diag_drive = true;
|
||||
},
|
||||
Merge(value, value1, value2, value3, value4) {
|
||||
value = value1 + "." + value2 + "." + value3 + "." + value4;
|
||||
return value;
|
||||
},
|
||||
async saveGate() {
|
||||
|
||||
this.add_passage = false;
|
||||
var obj = {
|
||||
tdpz_tdmc: this.FormData.tdpz_tdmc,
|
||||
tdpz_td: this.FormData.tdpz_td,
|
||||
tdpz_qdmc: this.FormData.tdpz_qdmc,
|
||||
tdpz_port: this.FormData.tdpz_port,
|
||||
tdpz_ccsj: this.FormData.tdpz_cssj,
|
||||
tdpz_jgsj: this.FormData.tdpz_jgsj,
|
||||
tdpz_ip: this.tdpz_ip1 + "." + this.tdpz_ip2 + "." + this.tdpz_ip3 + "." + this.tdpz_ip4,
|
||||
tdpz_lxsj: this.FormData.tdpz_lxsj,
|
||||
tdpz_cfcs: this.FormData.tdpz_cfcs,
|
||||
tdpz_watchtime: String(Number(this.FormData.tdpz_watchtime)),
|
||||
tdpz_cjsylxdz: String(Number(this.FormData.tdpz_cjsylxdz)),
|
||||
tdpz_dxzkb: this.tdpz_dxzkb1 + ":" + this.tdpz_dxzkb2,
|
||||
tdpz_050F: this.FormData.tdpz_050F,
|
||||
tdpz_0610: this.FormData.tdpz_0610,
|
||||
}
|
||||
let datas = sessionStorage.getItem("DB-IotLite_yx");
|
||||
datas = { ...JSON.parse(datas), ...obj };
|
||||
let res = await SaveUserAnswer({
|
||||
mark: "DB-IotLite_yx",
|
||||
user_id: "USER202307301109254198",
|
||||
mark_value: JSON.stringify(datas),
|
||||
});
|
||||
if (res.status == 200) {
|
||||
this.$message({
|
||||
message: '保存成功',
|
||||
type: 'success'
|
||||
});
|
||||
}
|
||||
sessionStorage.setItem("DB-IotLite_yx", JSON.stringify(datas));
|
||||
console.log(res);
|
||||
console.log(res.data.data.mark_value);
|
||||
// this.$router.push("/dbcollectdevice");
|
||||
},
|
||||
handleDetailClick(data, node, value) {
|
||||
console.log(data.label);
|
||||
this.FormData.tdpz_qdmc = data.label;
|
||||
this.diag_drive = false;
|
||||
},
|
||||
async GetUserAnswer() {
|
||||
let answer = await GetUserAnswer({
|
||||
mark: "DB-IotLite_yx",
|
||||
user_id: "USER202307301109254198",
|
||||
});
|
||||
console.log(answer);
|
||||
let obj = JSON.parse(answer.data.data.mark_value);
|
||||
console.log(obj);
|
||||
// this.FormData.
|
||||
if (obj.tdpz_dxzkb) {
|
||||
this.tdpz_dxzkb1 = obj.tdpz_dxzkb.split(":")[0];
|
||||
this.tdpz_dxzkb2 = obj.tdpz_dxzkb.split(":")[1];
|
||||
}
|
||||
this.FormData.tdpz_watchtime = Boolean(Number(obj.tdpz_watchtime));
|
||||
// console.log(this.FormData.tdpz_watchtime);
|
||||
this.FormData.tdpz_cjsylxdz = Boolean(Number(obj.tdpz_cjsylxdz));
|
||||
if (obj.tdpz_ip) {
|
||||
this.tdpz_ip1 = obj.tdpz_ip.split(".")[0];
|
||||
this.tdpz_ip2 = obj.tdpz_ip.split(".")[1];
|
||||
this.tdpz_ip3 = obj.tdpz_ip.split(".")[2];
|
||||
this.tdpz_ip4 = obj.tdpz_ip.split(".")[3];
|
||||
}
|
||||
this.FormData.tdpz_tdmc = obj.tdpz_tdmc;
|
||||
this.FormData.tdpz_td = obj.tdpz_td;
|
||||
this.FormData.tdpz_qdmc = obj.tdpz_qdmc;
|
||||
this.FormData.tdpz_050F = obj.tdpz_050F;
|
||||
this.FormData.tdpz_0610 = obj.tdpz_0610;
|
||||
this.FormData.tdpz_port = obj.tdpz_port;
|
||||
this.FormData.tdpz_cssj = obj.tdpz_cssj;
|
||||
this.FormData.tdpz_jgsj = obj.tdpz_jgsj;
|
||||
this.FormData.tdpz_lxsj = obj.tdpz_lxsj;
|
||||
this.FormData.tdpz_cfcs = obj.tdpz_cfcs;
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.Loading = true;
|
||||
this.GetUserAnswer();
|
||||
this.Loading = false;
|
||||
// let res2 = GetUserAnswer()
|
||||
},
|
||||
|
||||
watch: {
|
||||
// "FormData.tdpz_watchtime": {
|
||||
// handler(old) {
|
||||
// if (old) {
|
||||
// this.isdisabled = false;
|
||||
// } else {
|
||||
// this.isdisabled = true;
|
||||
// }
|
||||
// },
|
||||
// },
|
||||
"FormData.tdpz_watchtime"(newval) {
|
||||
console.log(newval);
|
||||
if (newval) {
|
||||
this.isdisabled = true;
|
||||
} else {
|
||||
this.isdisabled = false;
|
||||
}
|
||||
},
|
||||
},
|
||||
directives: {
|
||||
clickoutside: {
|
||||
bind: function (el, binding, vnode) {
|
||||
function documentHandler(e) {
|
||||
if (el.contains(e.target)) {
|
||||
return false;
|
||||
}
|
||||
if (binding.expression) {
|
||||
binding.value(e);
|
||||
}
|
||||
}
|
||||
el._vueClickOutside_ = documentHandler;
|
||||
document.addEventListener("click", documentHandler);
|
||||
},
|
||||
unbind: function (el, binding) {
|
||||
document.removeEventListener("click", el._vueClickOutside_);
|
||||
delete el._vueClickOutside_;
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.tree_menu {
|
||||
position: absolute;
|
||||
width: 286px;
|
||||
left: 64px;
|
||||
top: 104px;
|
||||
width: 286px;
|
||||
height: 753px;
|
||||
line-height: 20px;
|
||||
border-radius: 3px;
|
||||
background-color: rgba(255, 255, 255, 1);
|
||||
text-align: center;
|
||||
border: 1px solid rgba(220, 220, 220, 1);
|
||||
}
|
||||
|
||||
.tree_rightmenu {
|
||||
position: fixed;
|
||||
width: 120px;
|
||||
border: 1px solid rgba(0, 0, 0, 0.15);
|
||||
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.super_parmams {
|
||||
display: flex;
|
||||
color: #fff !important;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: 668px;
|
||||
|
||||
i {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
/deep/ .pas_params {
|
||||
.el-col-12:last-child {
|
||||
padding-right: 150px;
|
||||
}
|
||||
|
||||
.el-col-12:first-child {
|
||||
padding-right: 38px;
|
||||
}
|
||||
|
||||
.el-input__inner {
|
||||
height: 30px;
|
||||
text-align: left;
|
||||
padding: 0px 8px;
|
||||
}
|
||||
|
||||
.el-row {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
|
||||
.el-col-1 {
|
||||
color: #fff !important;
|
||||
text-align: center;
|
||||
line-height: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.el-col-6 {
|
||||
height: 40px;
|
||||
top: 6px;
|
||||
left: 77px;
|
||||
position: relative;
|
||||
width: 50px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.super_con {
|
||||
.el-col-12:last-child {
|
||||
padding-right: 28px;
|
||||
}
|
||||
|
||||
.el-col-12:first-child {
|
||||
padding-right: 42px;
|
||||
}
|
||||
|
||||
.el-input__inner {
|
||||
text-align: left;
|
||||
padding: 0 8px;
|
||||
}
|
||||
|
||||
.el-row {
|
||||
color: #fff !important;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
|
||||
.el-col-4 {
|
||||
padding-left: 5px;
|
||||
width: 14px;
|
||||
text-align: center;
|
||||
line-height: 4px;
|
||||
height: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.el-dialog__footer {
|
||||
padding: 18px 1.25rem 50px;
|
||||
}
|
||||
|
||||
.dialog-footer {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
bottom: 45px;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
/deep/ .drvieName_All {
|
||||
position: absolute;
|
||||
left: 1408px;
|
||||
top: 140px;
|
||||
width: 435px;
|
||||
max-height: 720px;
|
||||
z-index: 10000;
|
||||
border: 1px solid #f5f5f5;
|
||||
|
||||
.title {
|
||||
background-color: #fff;
|
||||
padding: 5px 6px 5px 25px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.title_l {
|
||||
width: 103px;
|
||||
height: 26px;
|
||||
color: rgba(16, 16, 16, 1);
|
||||
font-size: 18px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.title_r {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
line-height: 24px;
|
||||
cursor: pointer;
|
||||
color: rgba(111, 103, 103, 1);
|
||||
}
|
||||
}
|
||||
|
||||
// h3 {
|
||||
// padding-bottom: 10px;
|
||||
// background-color: #fff;
|
||||
// }
|
||||
|
||||
.el-divider--horizontal {
|
||||
margin: 0px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,751 @@
|
|||
<!-- 网关通道 -->
|
||||
<template>
|
||||
<div>
|
||||
<!-- v-click-outside="closeMenu" -->
|
||||
<div>
|
||||
<div class="tree_menu" v-show="dialogVisible">
|
||||
<el-tree :data="$store.state.tree" :props="defaultProps" default-expand-all @node-contextmenu="rightClick"
|
||||
@node-click="treeNodeClick" ref="tree" :render-content="renderContent">
|
||||
<span class="custom-tree-node" slot-scope="{ node, data }">
|
||||
<template v-if="data.editing == 1">
|
||||
<el-button type="mini" v-if="flag" style="right: 50px; top: 0; position: absolute; border: none"
|
||||
@click.stop="done">完成</el-button>
|
||||
<el-button type="mini" style="right: 0; top: 0; position: absolute; border: none"
|
||||
@click.stop="edit">编辑</el-button>
|
||||
<span v-if="!flag">{{ data.label }}</span>
|
||||
<el-input v-else style="width: 150px" v-model="gateway"></el-input>
|
||||
</template>
|
||||
<template v-else>{{ data.label }}</template>
|
||||
</span>
|
||||
</el-tree>
|
||||
<!-- 树形控件右键组件 -->
|
||||
<div v-show="menuShow" class="tree_rightmenu" :style="{ ...rightMenu }">
|
||||
<el-menu class="el-menu-vertical-demo" @select="selectMenuNode" default-active="#0078FE">
|
||||
<el-menu-item id="menuitem" index="1" style="font-size: 12px">
|
||||
<span slot="title">新建通道</span>
|
||||
</el-menu-item>
|
||||
<el-menu-item index="2" style="font-size: 12px">
|
||||
<span slot="title">取 消</span>
|
||||
</el-menu-item>
|
||||
</el-menu>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pas_params">
|
||||
<el-dialog title="通道参数设置" :visible.sync="add_passage" width="765px" v-loading="Loading">
|
||||
<el-form :model="FormData" :label-position="labelPosition" :rules="rules" ref="ruleForm">
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="通道名称:" :label-width="formLabelWidth" prop="tdpz_tdmc">
|
||||
<el-select v-model="FormData.tdpz_tdmc" placeholder="" style="width: 200px; height: 30px">
|
||||
<el-option v-for="(item, index) in options1" :key="index" :label="item.label" :value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="通道:" :label-width="formLabelWidth" prop="tdpz_td">
|
||||
<el-select v-model="FormData.tdpz_td" placeholder="" style="width: 200px; height: 30px">
|
||||
<el-option v-for="(item, index) in options2" :key="index" :label="item.label" :value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="驱动名称:" :label-width="formLabelWidth" prop="tdpz_qdmc">
|
||||
<el-row>
|
||||
<el-col :span="18">
|
||||
<el-input v-model="FormData.tdpz_qdmc" placeholder="" style="width: 200px; height: 30px"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-button style="width: 50px; height: 30px" @click="getDriveName">...</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="IP地址:" :label-width="formLabelWidth" prop="tdpz_ip">
|
||||
<el-row>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="tdpz_ip1" style="width: 43px; height: 30px"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1" style="color: #fff">. </el-col>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="tdpz_ip2" style="width: 43px; height: 30px"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1" style="color: #fff">.</el-col>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="tdpz_ip3" style="width: 43px; height: 30px"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1" style="color: #fff">.</el-col>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="tdpz_ip4" style="width: 43px; height: 30px"></el-input>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="端口号:" :label-width="formLabelWidth" prop="tdpz_port">
|
||||
<el-input v-model="FormData.tdpz_port" placeholder="" style="width: 200px; height: 30px"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="超过时间(ms):" :label-width="formLabelWidth" prop="tdpz_cssj">
|
||||
<el-input v-model="FormData.tdpz_cssj" placeholder="" style="width: 200px; height: 30px"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="间隔时间(ms):" :label-width="formLabelWidth" prop="tdpz_jgsj">
|
||||
<el-input v-model="FormData.tdpz_jgsj" placeholder="" style="width: 200px; height: 30px"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="轮询时间(ms):" :label-width="formLabelWidth" prop="tdpz_lxsj">
|
||||
<el-input v-model="FormData.tdpz_lxsj" placeholder="" style="width: 200px; height: 30px"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="重复次数:" :label-width="formLabelWidth" prop="tdpz_cfcs">
|
||||
<el-input v-model="FormData.tdpz_cfcs" placeholder="" style="width: 200px; height: 30px"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<div class="super_parmams">
|
||||
<h3>高级参数</h3>
|
||||
<div>
|
||||
<i class="el-icon-caret-bottom" v-if="is_retract"></i>
|
||||
<i class="el-icon-caret-top" v-else="is_retract"></i>
|
||||
<el-button type="text" plain @click="getRetract" style="
|
||||
width: 28px;
|
||||
border: none;
|
||||
color: rgba(16, 16, 16, 1);
|
||||
font-size: 14px;
|
||||
text-align: left;
|
||||
">
|
||||
收起</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="super_con" v-show="is_retract">
|
||||
<el-form :label-position="labelPosition" :rules="rules" ref="ruleForm">
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item>
|
||||
<el-checkbox v-model="FormData.tdpz_watchtime">watch time(s)</el-checkbox>
|
||||
<el-input v-model="input1" placeholder="" style="width: 200px; height: 30px"
|
||||
:disabled="isdisabled"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item>
|
||||
<el-checkbox v-model="FormData.tdpz_cjsylxdz">采集使用连续地址</el-checkbox>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="读写占空比:" :label-width="formLabelWidth">
|
||||
<el-row>
|
||||
<el-col :span="10">
|
||||
<el-input v-model="tdpz_dxzkb1" style="width: 91px; height: 30px"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="4">: </el-col>
|
||||
<el-col :span="10">
|
||||
<el-input v-model="tdpz_dxzkb2" style="width: 91px; height: 30px"></el-input>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="05/0F:" :label-width="formLabelWidth">
|
||||
<el-row>
|
||||
<el-col :span="8"><el-radio v-model="FormData.tdpz_050F" label="auto">auto</el-radio></el-col>
|
||||
<el-col :span="8"><el-radio v-model="FormData.tdpz_050F" label="05">05</el-radio></el-col>
|
||||
<el-col :span="8"><el-radio v-model="FormData.tdpz_050F" label="0F">0F</el-radio></el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="06/10:" :label-width="formLabelWidth">
|
||||
<el-row>
|
||||
<el-col :span="8"><el-radio v-model="FormData.tdpz_0610" label="auto">auto</el-radio></el-col>
|
||||
<el-col :span="8"><el-radio v-model="FormData.tdpz_0610" label="06">06</el-radio></el-col>
|
||||
<el-col :span="8"><el-radio v-model="FormData.tdpz_0610" label="10">10</el-radio></el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</div>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="saveGate">保 存</el-button>
|
||||
<el-button @click="add_passage = false">取 消</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
<div class="drvieName_All" v-show="diag_drive">
|
||||
<div class="title">
|
||||
<p class="title_l">协议选择</p>
|
||||
<i class="el-icon-close title_r" @click="diag_drive = false"></i>
|
||||
</div>
|
||||
<el-divider></el-divider>
|
||||
<el-tree :data="datas2" :props="defaultProps" @node-click="handleDetailClick" default-expand-all></el-tree>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { SaveUserAnswer, GetUserAnswer } from "@/api/user";
|
||||
import { Loading } from "element-ui";
|
||||
|
||||
export default {
|
||||
name: "TestTreeView",
|
||||
|
||||
data() {
|
||||
return {
|
||||
flag: false,
|
||||
gateway: JSON.parse(localStorage.getItem("tree"))[0].label,
|
||||
FormData: {
|
||||
tdpz_tdmc: "有线区Channel1",
|
||||
tdpz_td: "网口",
|
||||
tdpz_qdmc: "ModbusTCPClient",
|
||||
tdpz_port: "",
|
||||
tdpz_cssj: "",
|
||||
tdpz_jgsj: "",
|
||||
tdpz_lxsj: "",
|
||||
tdpz_cfcs: "",
|
||||
tdpz_watchtime: true,
|
||||
tdpz_cjsylxdz: false,
|
||||
tdpz_dxzkb: "",
|
||||
tdpz_050F: "auto",
|
||||
tdpz_0610: "auto",
|
||||
},
|
||||
tdpz_dxzkb1: "1",
|
||||
tdpz_dxzkb2: "1",
|
||||
tdpz_ip1: "",
|
||||
tdpz_ip2: "",
|
||||
tdpz_ip3: "",
|
||||
tdpz_ip4: "",
|
||||
options1: [
|
||||
{
|
||||
value: "有线区Channel1",
|
||||
label: "有线区Channel1",
|
||||
},
|
||||
{
|
||||
value: "无线区Channel1",
|
||||
label: "无线区Channel1",
|
||||
},
|
||||
],
|
||||
options2: [
|
||||
{
|
||||
value: "网口",
|
||||
label: "网口",
|
||||
},
|
||||
{
|
||||
value: "串口",
|
||||
label: "串口",
|
||||
},
|
||||
],
|
||||
value1: "有线区Channel1",
|
||||
value2: "网口",
|
||||
diag_drive: false,
|
||||
isdisabled: true,
|
||||
radio: "1",
|
||||
is_retract: true,
|
||||
labelPosition: "left",
|
||||
formLabelWidth: "116px",
|
||||
input1: 192,
|
||||
add_passage: false,
|
||||
rightMenu: "",
|
||||
dialogVisible: true,
|
||||
menuShow: false,
|
||||
datas: [],
|
||||
datas2: [
|
||||
{
|
||||
label: "通用标准",
|
||||
children: [
|
||||
{
|
||||
label: "ModbusTCPClient",
|
||||
},
|
||||
{
|
||||
label: "ModbusRTU_over_TCP",
|
||||
},
|
||||
{
|
||||
label: "OPCUAClient",
|
||||
},
|
||||
{
|
||||
label: "OPCDAClient",
|
||||
},
|
||||
{
|
||||
label: "MQTTClient",
|
||||
},
|
||||
{
|
||||
label: "OPCXMLDAClient",
|
||||
},
|
||||
{
|
||||
label: "环保212协议网口监听",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "PLC",
|
||||
children: [
|
||||
{
|
||||
label: "Slemens S7-200 Network",
|
||||
},
|
||||
{
|
||||
label: "Slemens S7-300 Network",
|
||||
},
|
||||
{
|
||||
label: "Slemens S7-400 Network",
|
||||
},
|
||||
{
|
||||
label: "Slemens S7-1200 Network",
|
||||
},
|
||||
{
|
||||
label: "Slemens S7-1500 Network",
|
||||
},
|
||||
{
|
||||
label: "EtherNet/IP CIP协议(AB OMR ON)",
|
||||
},
|
||||
{
|
||||
label: "MC_Qna-3E(三菱 基恩士 松下)",
|
||||
},
|
||||
{
|
||||
label: "MC_A-1E_Binary",
|
||||
},
|
||||
{
|
||||
label: "OMRON-FINS",
|
||||
},
|
||||
{
|
||||
label: "横河PLC",
|
||||
},
|
||||
{
|
||||
label: "西门子FetchWirte",
|
||||
},
|
||||
{
|
||||
label: "富机 FUJI_SPH_NET",
|
||||
},
|
||||
{
|
||||
label: "基恩士上位链路通讯",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "智能建筑",
|
||||
children: [],
|
||||
},
|
||||
{
|
||||
label: "厂家定制",
|
||||
children: [],
|
||||
},
|
||||
{
|
||||
label: "电力行业标准",
|
||||
children: [
|
||||
{
|
||||
label: "IEC104",
|
||||
},
|
||||
{
|
||||
label: "DLT645_over_TCP",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "CNC数控",
|
||||
children: [],
|
||||
},
|
||||
{
|
||||
label: "私有协议",
|
||||
children: [],
|
||||
},
|
||||
],
|
||||
defaultProps: {
|
||||
children: "children",
|
||||
label: "label",
|
||||
},
|
||||
rules: {
|
||||
tdpz_tdmc: [
|
||||
{ required: true, message: "请输入通道名称", trigger: "change" },
|
||||
],
|
||||
tdpz_td: [{ required: true, message: "请输入通道", trigger: "change" }],
|
||||
tdpz_qdmc: [
|
||||
{ required: true, message: "请输入驱动名称", trigger: "change" },
|
||||
],
|
||||
tdpz_ip: [{ required: true, message: "请输入ip地址", trigger: "blur" }],
|
||||
tdpz_port: [
|
||||
{ required: true, message: "请输入端口号", trigger: "blur" },
|
||||
],
|
||||
tdpz_cssj: [
|
||||
{ required: true, message: "请输入超出时间", trigger: "blur" },
|
||||
],
|
||||
tdpz_jgsj: [
|
||||
{ required: true, message: "请输入间隔时间", trigger: "blur" },
|
||||
],
|
||||
tdpz_lxsj: [
|
||||
{ required: true, message: "请输入轮询时间", trigger: "blur" },
|
||||
],
|
||||
tdpz_cfcs: [
|
||||
{ required: true, message: "请输入重复次数", trigger: "blur" },
|
||||
],
|
||||
},
|
||||
};
|
||||
},
|
||||
created() {
|
||||
console.log(this.$store.state.tree);
|
||||
},
|
||||
methods: {
|
||||
//编辑
|
||||
edit(event) {
|
||||
this.flag = true;
|
||||
},
|
||||
//完成编辑
|
||||
done(event) {
|
||||
this.flag = false;
|
||||
let tree = this.$store.state.tree;
|
||||
tree[0].label = this.gateway;
|
||||
this.$store.commit("setTree", tree);
|
||||
},
|
||||
rightClick(e, data, node) {
|
||||
this.menuShow = false;
|
||||
this.menuShow = true;
|
||||
e.preventDefault(); //关闭浏览器右键默认事件
|
||||
this.rightMenu = { top: e.pageY + "px", left: e.pageX + "px" };
|
||||
document.addEventListener("click", (ev) => {
|
||||
ev.stopImmediatePropagation();
|
||||
if (ev.target !== document.querySelector(".el-menu-item.is-active")) {
|
||||
this.foo();
|
||||
}
|
||||
});
|
||||
},
|
||||
// 点击时候的判断,判断是否为新增网关
|
||||
selectMenuNode(index, indexPath) {
|
||||
console.log(index);
|
||||
if (index == 1) {
|
||||
this.add_passage = true;
|
||||
}
|
||||
},
|
||||
foo() {
|
||||
// 取消鼠标监听事件 菜单栏
|
||||
this.menuShow = false;
|
||||
document.removeEventListener("click", this.foo); // 关掉监听，
|
||||
},
|
||||
treeNodeClick(key) {
|
||||
// console.log
|
||||
this.foo();
|
||||
},
|
||||
// 收起点击事件的判断
|
||||
getRetract() {
|
||||
if (this.is_retract == true) {
|
||||
this.is_retract = false;
|
||||
} else {
|
||||
this.is_retract = true;
|
||||
}
|
||||
},
|
||||
getDriveName() {
|
||||
this.diag_drive = true;
|
||||
},
|
||||
Merge(value, value1, value2, value3, value4) {
|
||||
value = value1 + "." + value2 + "." + value3 + "." + value4;
|
||||
return value;
|
||||
},
|
||||
async saveGate() {
|
||||
this.add_passage = false;
|
||||
var obj = {
|
||||
tdpz_tdmc: this.FormData.tdpz_tdmc,
|
||||
tdpz_td: this.FormData.tdpz_td,
|
||||
tdpz_qdmc: this.FormData.tdpz_qdmc,
|
||||
tdpz_port: this.FormData.tdpz_port,
|
||||
tdpz_ccsj: this.FormData.tdpz_cssj,
|
||||
tdpz_jgsj: this.FormData.tdpz_jgsj,
|
||||
tdpz_ip: this.tdpz_ip1 + "." + this.tdpz_ip2 + "." + this.tdpz_ip3 + "." + this.tdpz_ip4,
|
||||
tdpz_lxsj: this.FormData.tdpz_lxsj,
|
||||
tdpz_cfcs: this.FormData.tdpz_cfcs,
|
||||
tdpz_watchtime: String(Number(this.FormData.tdpz_watchtime)),
|
||||
tdpz_cjsylxdz: String(Number(this.FormData.tdpz_cjsylxdz)),
|
||||
tdpz_dxzkb: this.tdpz_dxzkb1 + ":" + this.tdpz_dxzkb2,
|
||||
tdpz_050F: this.FormData.tdpz_050F,
|
||||
tdpz_0610: this.FormData.tdpz_0610,
|
||||
}
|
||||
let datas = sessionStorage.getItem("DB-IotLite_yx");
|
||||
datas = { ...JSON.parse(datas), ...obj };
|
||||
let res = await SaveUserAnswer({
|
||||
mark: "DB-IotLite_yx",
|
||||
user_id: "USER202307301109254198",
|
||||
mark_value: JSON.stringify(datas),
|
||||
});
|
||||
if (res.status == 200) {
|
||||
this.$message({
|
||||
message: '保存成功',
|
||||
type: 'success'
|
||||
});
|
||||
}
|
||||
sessionStorage.setItem("DB-IotLite_yx", JSON.stringify(datas));
|
||||
console.log(res);
|
||||
console.log(res.data.data.mark_value);
|
||||
// this.$router.push("/dbcollectdevice");
|
||||
},
|
||||
handleDetailClick(data, node, value) {
|
||||
console.log(data.label);
|
||||
this.FormData.tdpz_qdmc = data.label;
|
||||
this.diag_drive = false;
|
||||
},
|
||||
async GetUserAnswer() {
|
||||
let answer = await GetUserAnswer({
|
||||
mark: "DB-IotLite_yx",
|
||||
user_id: "USER202307301109254198",
|
||||
});
|
||||
console.log(answer);
|
||||
let obj = JSON.parse(answer.data.data.mark_value);
|
||||
console.log(obj);
|
||||
// this.FormData.
|
||||
if (obj.tdpz_dxzkb) {
|
||||
this.tdpz_dxzkb1 = obj.tdpz_dxzkb.split(":")[0];
|
||||
this.tdpz_dxzkb2 = obj.tdpz_dxzkb.split(":")[1];
|
||||
}
|
||||
this.FormData.tdpz_watchtime = Boolean(Number(obj.tdpz_watchtime));
|
||||
// console.log(this.FormData.tdpz_watchtime);
|
||||
this.FormData.tdpz_cjsylxdz = Boolean(Number(obj.tdpz_cjsylxdz));
|
||||
if (obj.tdpz_ip) {
|
||||
this.tdpz_ip1 = obj.tdpz_ip.split(".")[0];
|
||||
this.tdpz_ip2 = obj.tdpz_ip.split(".")[1];
|
||||
this.tdpz_ip3 = obj.tdpz_ip.split(".")[2];
|
||||
this.tdpz_ip4 = obj.tdpz_ip.split(".")[3];
|
||||
}
|
||||
this.FormData.tdpz_tdmc = obj.tdpz_tdmc;
|
||||
this.FormData.tdpz_td = obj.tdpz_td;
|
||||
this.FormData.tdpz_qdmc = obj.tdpz_qdmc;
|
||||
this.FormData.tdpz_050F = obj.tdpz_050F;
|
||||
this.FormData.tdpz_0610 = obj.tdpz_0610;
|
||||
this.FormData.tdpz_port = obj.tdpz_port;
|
||||
this.FormData.tdpz_cssj = obj.tdpz_cssj;
|
||||
this.FormData.tdpz_jgsj = obj.tdpz_jgsj;
|
||||
this.FormData.tdpz_lxsj = obj.tdpz_lxsj;
|
||||
this.FormData.tdpz_cfcs = obj.tdpz_cfcs;
|
||||
},
|
||||
renderContent(h, { node, data, store }) {
|
||||
return (
|
||||
<span class="custom-tree-node">
|
||||
<span>{node.label}</span>
|
||||
<span>
|
||||
<el-button size="mini" type="text" on-click={ () => this.append(data) }>Append</el-button>
|
||||
<el-button size="mini" type="text" on-click={ () => this.remove(node, data) }>Delete</el-button>
|
||||
</span>
|
||||
</span>);
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.Loading = true;
|
||||
this.GetUserAnswer();
|
||||
this.Loading = false;
|
||||
// let res2 = GetUserAnswer()
|
||||
},
|
||||
|
||||
watch: {
|
||||
// "FormData.tdpz_watchtime": {
|
||||
// handler(old) {
|
||||
// if (old) {
|
||||
// this.isdisabled = false;
|
||||
// } else {
|
||||
// this.isdisabled = true;
|
||||
// }
|
||||
// },
|
||||
// },
|
||||
"FormData.tdpz_watchtime"(newval) {
|
||||
console.log(newval);
|
||||
if (newval) {
|
||||
this.isdisabled = true;
|
||||
} else {
|
||||
this.isdisabled = false;
|
||||
}
|
||||
},
|
||||
},
|
||||
directives: {
|
||||
clickoutside: {
|
||||
bind: function (el, binding, vnode) {
|
||||
function documentHandler(e) {
|
||||
if (el.contains(e.target)) {
|
||||
return false;
|
||||
}
|
||||
if (binding.expression) {
|
||||
binding.value(e);
|
||||
}
|
||||
}
|
||||
el._vueClickOutside_ = documentHandler;
|
||||
document.addEventListener("click", documentHandler);
|
||||
},
|
||||
unbind: function (el, binding) {
|
||||
document.removeEventListener("click", el._vueClickOutside_);
|
||||
delete el._vueClickOutside_;
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.tree_menu {
|
||||
position: absolute;
|
||||
width: 286px;
|
||||
left: 64px;
|
||||
top: 104px;
|
||||
width: 286px;
|
||||
height: 753px;
|
||||
line-height: 20px;
|
||||
border-radius: 3px;
|
||||
background-color: rgba(255, 255, 255, 1);
|
||||
text-align: center;
|
||||
border: 1px solid rgba(220, 220, 220, 1);
|
||||
}
|
||||
|
||||
.tree_rightmenu {
|
||||
position: fixed;
|
||||
width: 120px;
|
||||
border: 1px solid rgba(0, 0, 0, 0.15);
|
||||
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.super_parmams {
|
||||
display: flex;
|
||||
color: #fff !important;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: 668px;
|
||||
|
||||
i {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
/deep/ .pas_params {
|
||||
.el-col-12:last-child {
|
||||
padding-right: 150px;
|
||||
}
|
||||
|
||||
.el-col-12:first-child {
|
||||
padding-right: 38px;
|
||||
}
|
||||
|
||||
.el-input__inner {
|
||||
height: 30px;
|
||||
text-align: left;
|
||||
padding: 0px 8px;
|
||||
}
|
||||
|
||||
.el-row {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
|
||||
.el-col-1 {
|
||||
color: #fff !important;
|
||||
text-align: center;
|
||||
line-height: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.el-col-6 {
|
||||
height: 40px;
|
||||
top: 6px;
|
||||
left: 77px;
|
||||
position: relative;
|
||||
width: 50px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.super_con {
|
||||
.el-col-12:last-child {
|
||||
padding-right: 28px;
|
||||
}
|
||||
|
||||
.el-col-12:first-child {
|
||||
padding-right: 42px;
|
||||
}
|
||||
|
||||
.el-input__inner {
|
||||
text-align: left;
|
||||
padding: 0 8px;
|
||||
}
|
||||
|
||||
.el-row {
|
||||
color: #fff !important;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
|
||||
.el-col-4 {
|
||||
padding-left: 5px;
|
||||
width: 14px;
|
||||
text-align: center;
|
||||
line-height: 4px;
|
||||
height: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.el-dialog__footer {
|
||||
padding: 18px 1.25rem 50px;
|
||||
}
|
||||
|
||||
.dialog-footer {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
bottom: 45px;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
/deep/ .drvieName_All {
|
||||
position: absolute;
|
||||
left: 1408px;
|
||||
top: 140px;
|
||||
width: 435px;
|
||||
max-height: 720px;
|
||||
z-index: 10000;
|
||||
border: 1px solid #f5f5f5;
|
||||
|
||||
.title {
|
||||
background-color: #fff;
|
||||
padding: 5px 6px 5px 25px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.title_l {
|
||||
width: 103px;
|
||||
height: 26px;
|
||||
color: rgba(16, 16, 16, 1);
|
||||
font-size: 18px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.title_r {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
line-height: 24px;
|
||||
cursor: pointer;
|
||||
color: rgba(111, 103, 103, 1);
|
||||
}
|
||||
}
|
||||
|
||||
// h3 {
|
||||
// padding-bottom: 10px;
|
||||
// background-color: #fff;
|
||||
// }
|
||||
|
||||
.el-divider--horizontal {
|
||||
margin: 0px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,752 @@
|
|||
<!-- 网关通道 -->
|
||||
<template>
|
||||
<div>
|
||||
<!-- v-click-outside="closeMenu" -->
|
||||
<div>
|
||||
<div class="tree_menu" v-show="dialogVisible">
|
||||
<el-tree :data="$store.state.tree" :props="defaultProps" default-expand-all @node-contextmenu="rightClick"
|
||||
@node-click="treeNodeClick" ref="tree" :render-content="renderContent">
|
||||
<span class="custom-tree-node" slot-scope="{ node, data }">
|
||||
<template v-if="data.editing == 1">
|
||||
<el-button type="mini" v-if="flag" style="right: 50px; top: 0; position: absolute; border: none"
|
||||
@click.stop="done">完成</el-button>
|
||||
<el-button type="mini" style="right: 0; top: 0; position: absolute; border: none"
|
||||
@click.stop="edit">编辑</el-button>
|
||||
<span v-if="!flag">{{ data.label }}</span>
|
||||
<el-input v-else style="width: 150px" v-model="gateway"></el-input>
|
||||
</template>
|
||||
<template v-else>{{ data.label }}</template>
|
||||
</span>
|
||||
</el-tree>
|
||||
<!-- 树形控件右键组件 -->
|
||||
<div v-show="menuShow" class="tree_rightmenu" :style="{ ...rightMenu }">
|
||||
<el-menu class="el-menu-vertical-demo" @select="selectMenuNode" default-active="#0078FE">
|
||||
<el-menu-item id="menuitem" index="1" style="font-size: 12px">
|
||||
<span slot="title">新建通道</span>
|
||||
</el-menu-item>
|
||||
<el-menu-item index="2" style="font-size: 12px">
|
||||
<span slot="title">取 消</span>
|
||||
</el-menu-item>
|
||||
</el-menu>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pas_params">
|
||||
<el-dialog title="通道参数设置" :visible.sync="add_passage" width="765px" v-loading="Loading">
|
||||
<el-form :model="FormData" :label-position="labelPosition" :rules="rules" ref="ruleForm">
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="通道名称:" :label-width="formLabelWidth" prop="tdpz_tdmc">
|
||||
<el-select v-model="FormData.tdpz_tdmc" placeholder="" style="width: 200px; height: 30px">
|
||||
<el-option v-for="(item, index) in options1" :key="index" :label="item.label" :value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="通道:" :label-width="formLabelWidth" prop="tdpz_td">
|
||||
<el-select v-model="FormData.tdpz_td" placeholder="" style="width: 200px; height: 30px">
|
||||
<el-option v-for="(item, index) in options2" :key="index" :label="item.label" :value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="驱动名称:" :label-width="formLabelWidth" prop="tdpz_qdmc">
|
||||
<el-row>
|
||||
<el-col :span="18">
|
||||
<el-input v-model="FormData.tdpz_qdmc" placeholder="" style="width: 200px; height: 30px"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-button style="width: 50px; height: 30px" @click="getDriveName">...</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="IP地址:" :label-width="formLabelWidth" prop="tdpz_ip">
|
||||
<el-row>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="tdpz_ip1" style="width: 43px; height: 30px"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1" style="color: #fff">. </el-col>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="tdpz_ip2" style="width: 43px; height: 30px"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1" style="color: #fff">.</el-col>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="tdpz_ip3" style="width: 43px; height: 30px"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1" style="color: #fff">.</el-col>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="tdpz_ip4" style="width: 43px; height: 30px"></el-input>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="端口号:" :label-width="formLabelWidth" prop="tdpz_port">
|
||||
<el-input v-model="FormData.tdpz_port" placeholder="" style="width: 200px; height: 30px"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="超过时间(ms):" :label-width="formLabelWidth" prop="tdpz_cssj">
|
||||
<el-input v-model="FormData.tdpz_cssj" placeholder="" style="width: 200px; height: 30px"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="间隔时间(ms):" :label-width="formLabelWidth" prop="tdpz_jgsj">
|
||||
<el-input v-model="FormData.tdpz_jgsj" placeholder="" style="width: 200px; height: 30px"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="轮询时间(ms):" :label-width="formLabelWidth" prop="tdpz_lxsj">
|
||||
<el-input v-model="FormData.tdpz_lxsj" placeholder="" style="width: 200px; height: 30px"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="重复次数:" :label-width="formLabelWidth" prop="tdpz_cfcs">
|
||||
<el-input v-model="FormData.tdpz_cfcs" placeholder="" style="width: 200px; height: 30px"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<div class="super_parmams">
|
||||
<h3>高级参数</h3>
|
||||
<div>
|
||||
<i class="el-icon-caret-bottom" v-if="is_retract"></i>
|
||||
<i class="el-icon-caret-top" v-else="is_retract"></i>
|
||||
<el-button type="text" plain @click="getRetract" style="
|
||||
width: 28px;
|
||||
border: none;
|
||||
color: rgba(16, 16, 16, 1);
|
||||
font-size: 14px;
|
||||
text-align: left;
|
||||
">
|
||||
收起</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="super_con" v-show="is_retract">
|
||||
<el-form :label-position="labelPosition" :rules="rules" ref="ruleForm">
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item>
|
||||
<el-checkbox v-model="FormData.tdpz_watchtime">watch time(s)</el-checkbox>
|
||||
<el-input v-model="input1" placeholder="" style="width: 200px; height: 30px"
|
||||
:disabled="isdisabled"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item>
|
||||
<el-checkbox v-model="FormData.tdpz_cjsylxdz">采集使用连续地址</el-checkbox>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="读写占空比:" :label-width="formLabelWidth">
|
||||
<el-row>
|
||||
<el-col :span="10">
|
||||
<el-input v-model="tdpz_dxzkb1" style="width: 91px; height: 30px"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="4">: </el-col>
|
||||
<el-col :span="10">
|
||||
<el-input v-model="tdpz_dxzkb2" style="width: 91px; height: 30px"></el-input>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="05/0F:" :label-width="formLabelWidth">
|
||||
<el-row>
|
||||
<el-col :span="8"><el-radio v-model="FormData.tdpz_050F" label="auto">auto</el-radio></el-col>
|
||||
<el-col :span="8"><el-radio v-model="FormData.tdpz_050F" label="05">05</el-radio></el-col>
|
||||
<el-col :span="8"><el-radio v-model="FormData.tdpz_050F" label="0F">0F</el-radio></el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="06/10:" :label-width="formLabelWidth">
|
||||
<el-row>
|
||||
<el-col :span="8"><el-radio v-model="FormData.tdpz_0610" label="auto">auto</el-radio></el-col>
|
||||
<el-col :span="8"><el-radio v-model="FormData.tdpz_0610" label="06">06</el-radio></el-col>
|
||||
<el-col :span="8"><el-radio v-model="FormData.tdpz_0610" label="10">10</el-radio></el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</div>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="saveGate">保 存</el-button>
|
||||
<el-button @click="add_passage = false">取 消</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
<div class="drvieName_All" v-show="diag_drive">
|
||||
<div class="title">
|
||||
<p class="title_l">协议选择</p>
|
||||
<i class="el-icon-close title_r" @click="diag_drive = false"></i>
|
||||
</div>
|
||||
<el-divider></el-divider>
|
||||
<el-tree :data="datas2" :props="defaultProps" @node-click="handleDetailClick" default-expand-all></el-tree>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { SaveUserAnswer, GetUserAnswer } from "@/api/user";
|
||||
import { Loading } from "element-ui";
|
||||
|
||||
export default {
|
||||
name: "TestTreeView",
|
||||
|
||||
data() {
|
||||
return {
|
||||
flag: false,
|
||||
gateway: JSON.parse(localStorage.getItem("tree"))[0].label,
|
||||
FormData: {
|
||||
tdpz_tdmc: "有线区Channel1",
|
||||
tdpz_td: "网口",
|
||||
tdpz_qdmc: "ModbusTCPClient",
|
||||
tdpz_port: "",
|
||||
tdpz_cssj: "",
|
||||
tdpz_jgsj: "",
|
||||
tdpz_lxsj: "",
|
||||
tdpz_cfcs: "",
|
||||
tdpz_watchtime: true,
|
||||
tdpz_cjsylxdz: false,
|
||||
tdpz_dxzkb: "",
|
||||
tdpz_050F: "auto",
|
||||
tdpz_0610: "auto",
|
||||
},
|
||||
tdpz_dxzkb1: "1",
|
||||
tdpz_dxzkb2: "1",
|
||||
tdpz_ip1: "",
|
||||
tdpz_ip2: "",
|
||||
tdpz_ip3: "",
|
||||
tdpz_ip4: "",
|
||||
options1: [
|
||||
{
|
||||
value: "有线区Channel1",
|
||||
label: "有线区Channel1",
|
||||
},
|
||||
{
|
||||
value: "无线区Channel1",
|
||||
label: "无线区Channel1",
|
||||
},
|
||||
],
|
||||
options2: [
|
||||
{
|
||||
value: "网口",
|
||||
label: "网口",
|
||||
},
|
||||
{
|
||||
value: "串口",
|
||||
label: "串口",
|
||||
},
|
||||
],
|
||||
value1: "有线区Channel1",
|
||||
value2: "网口",
|
||||
diag_drive: false,
|
||||
isdisabled: true,
|
||||
radio: "1",
|
||||
is_retract: true,
|
||||
labelPosition: "left",
|
||||
formLabelWidth: "116px",
|
||||
input1: 192,
|
||||
add_passage: false,
|
||||
rightMenu: "",
|
||||
dialogVisible: true,
|
||||
menuShow: false,
|
||||
datas: [],
|
||||
datas2: [
|
||||
{
|
||||
label: "通用标准",
|
||||
children: [
|
||||
{
|
||||
label: "ModbusTCPClient",
|
||||
},
|
||||
{
|
||||
label: "ModbusRTU_over_TCP",
|
||||
},
|
||||
{
|
||||
label: "OPCUAClient",
|
||||
},
|
||||
{
|
||||
label: "OPCDAClient",
|
||||
},
|
||||
{
|
||||
label: "MQTTClient",
|
||||
},
|
||||
{
|
||||
label: "OPCXMLDAClient",
|
||||
},
|
||||
{
|
||||
label: "环保212协议网口监听",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "PLC",
|
||||
children: [
|
||||
{
|
||||
label: "Slemens S7-200 Network",
|
||||
},
|
||||
{
|
||||
label: "Slemens S7-300 Network",
|
||||
},
|
||||
{
|
||||
label: "Slemens S7-400 Network",
|
||||
},
|
||||
{
|
||||
label: "Slemens S7-1200 Network",
|
||||
},
|
||||
{
|
||||
label: "Slemens S7-1500 Network",
|
||||
},
|
||||
{
|
||||
label: "EtherNet/IP CIP协议(AB OMR ON)",
|
||||
},
|
||||
{
|
||||
label: "MC_Qna-3E(三菱 基恩士 松下)",
|
||||
},
|
||||
{
|
||||
label: "MC_A-1E_Binary",
|
||||
},
|
||||
{
|
||||
label: "OMRON-FINS",
|
||||
},
|
||||
{
|
||||
label: "横河PLC",
|
||||
},
|
||||
{
|
||||
label: "西门子FetchWirte",
|
||||
},
|
||||
{
|
||||
label: "富机 FUJI_SPH_NET",
|
||||
},
|
||||
{
|
||||
label: "基恩士上位链路通讯",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "智能建筑",
|
||||
children: [],
|
||||
},
|
||||
{
|
||||
label: "厂家定制",
|
||||
children: [],
|
||||
},
|
||||
{
|
||||
label: "电力行业标准",
|
||||
children: [
|
||||
{
|
||||
label: "IEC104",
|
||||
},
|
||||
{
|
||||
label: "DLT645_over_TCP",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "CNC数控",
|
||||
children: [],
|
||||
},
|
||||
{
|
||||
label: "私有协议",
|
||||
children: [],
|
||||
},
|
||||
],
|
||||
defaultProps: {
|
||||
children: "children",
|
||||
label: "label",
|
||||
},
|
||||
rules: {
|
||||
tdpz_tdmc: [
|
||||
{ required: true, message: "请输入通道名称", trigger: "change" },
|
||||
],
|
||||
tdpz_td: [{ required: true, message: "请输入通道", trigger: "change" }],
|
||||
tdpz_qdmc: [
|
||||
{ required: true, message: "请输入驱动名称", trigger: "change" },
|
||||
],
|
||||
tdpz_ip: [{ required: true, message: "请输入ip地址", trigger: "blur" }],
|
||||
tdpz_port: [
|
||||
{ required: true, message: "请输入端口号", trigger: "blur" },
|
||||
],
|
||||
tdpz_cssj: [
|
||||
{ required: true, message: "请输入超出时间", trigger: "blur" },
|
||||
],
|
||||
tdpz_jgsj: [
|
||||
{ required: true, message: "请输入间隔时间", trigger: "blur" },
|
||||
],
|
||||
tdpz_lxsj: [
|
||||
{ required: true, message: "请输入轮询时间", trigger: "blur" },
|
||||
],
|
||||
tdpz_cfcs: [
|
||||
{ required: true, message: "请输入重复次数", trigger: "blur" },
|
||||
],
|
||||
},
|
||||
};
|
||||
},
|
||||
created() {
|
||||
console.log(this.$store.state.tree);
|
||||
},
|
||||
methods: {
|
||||
//编辑
|
||||
edit(event) {
|
||||
this.flag = true;
|
||||
},
|
||||
//完成编辑
|
||||
done(event) {
|
||||
this.flag = false;
|
||||
let tree = this.$store.state.tree;
|
||||
tree[0].label = this.gateway;
|
||||
this.$store.commit("setTree", tree);
|
||||
},
|
||||
rightClick(e, data, node) {
|
||||
this.menuShow = false;
|
||||
this.menuShow = true;
|
||||
e.preventDefault(); //关闭浏览器右键默认事件
|
||||
this.rightMenu = { top: e.pageY + "px", left: e.pageX + "px" };
|
||||
document.addEventListener("click", (ev) => {
|
||||
ev.stopImmediatePropagation();
|
||||
if (ev.target !== document.querySelector(".el-menu-item.is-active")) {
|
||||
this.foo();
|
||||
}
|
||||
});
|
||||
},
|
||||
// 点击时候的判断,判断是否为新增网关
|
||||
selectMenuNode(index, indexPath) {
|
||||
console.log(index);
|
||||
if (index == 1) {
|
||||
this.add_passage = true;
|
||||
}
|
||||
},
|
||||
foo() {
|
||||
// 取消鼠标监听事件 菜单栏
|
||||
this.menuShow = false;
|
||||
document.removeEventListener("click", this.foo); // 关掉监听，
|
||||
},
|
||||
treeNodeClick(key) {
|
||||
// console.log
|
||||
this.foo();
|
||||
},
|
||||
// 收起点击事件的判断
|
||||
getRetract() {
|
||||
if (this.is_retract == true) {
|
||||
this.is_retract = false;
|
||||
} else {
|
||||
this.is_retract = true;
|
||||
}
|
||||
},
|
||||
getDriveName() {
|
||||
this.diag_drive = true;
|
||||
},
|
||||
Merge(value, value1, value2, value3, value4) {
|
||||
value = value1 + "." + value2 + "." + value3 + "." + value4;
|
||||
return value;
|
||||
},
|
||||
async saveGate() {
|
||||
this.add_passage = false;
|
||||
var obj = {
|
||||
tdpz_tdmc: this.FormData.tdpz_tdmc,
|
||||
tdpz_td: this.FormData.tdpz_td,
|
||||
tdpz_qdmc: this.FormData.tdpz_qdmc,
|
||||
tdpz_port: this.FormData.tdpz_port,
|
||||
tdpz_ccsj: this.FormData.tdpz_cssj,
|
||||
tdpz_jgsj: this.FormData.tdpz_jgsj,
|
||||
tdpz_ip: this.tdpz_ip1 + "." + this.tdpz_ip2 + "." + this.tdpz_ip3 + "." + this.tdpz_ip4,
|
||||
tdpz_lxsj: this.FormData.tdpz_lxsj,
|
||||
tdpz_cfcs: this.FormData.tdpz_cfcs,
|
||||
tdpz_watchtime: String(Number(this.FormData.tdpz_watchtime)),
|
||||
tdpz_cjsylxdz: String(Number(this.FormData.tdpz_cjsylxdz)),
|
||||
tdpz_dxzkb: this.tdpz_dxzkb1 + ":" + this.tdpz_dxzkb2,
|
||||
tdpz_050F: this.FormData.tdpz_050F,
|
||||
tdpz_0610: this.FormData.tdpz_0610,
|
||||
}
|
||||
let datas = sessionStorage.getItem("DB-IotLite_yx");
|
||||
datas = { ...JSON.parse(datas), ...obj };
|
||||
let res = await SaveUserAnswer({
|
||||
mark: "DB-IotLite_yx",
|
||||
user_id: "USER202307301109254198",
|
||||
mark_value: JSON.stringify(datas),
|
||||
});
|
||||
if (res.status == 200) {
|
||||
this.$message({
|
||||
message: '保存成功',
|
||||
type: 'success'
|
||||
});
|
||||
}
|
||||
sessionStorage.setItem("DB-IotLite_yx", JSON.stringify(datas));
|
||||
console.log(res);
|
||||
console.log(res.data.data.mark_value);
|
||||
// this.$router.push("/dbcollectdevice");
|
||||
const newChild = { id: id++, label: `${this.$store.state.tree}`, children: [] };
|
||||
if (!data.children) {
|
||||
this.$set(data, 'children', []);
|
||||
}
|
||||
data.children.push(newChild);
|
||||
},
|
||||
handleDetailClick(data, node, value) {
|
||||
console.log(data.label);
|
||||
this.FormData.tdpz_qdmc = data.label;
|
||||
this.diag_drive = false;
|
||||
},
|
||||
async GetUserAnswer() {
|
||||
let answer = await GetUserAnswer({
|
||||
mark: "DB-IotLite_yx",
|
||||
user_id: "USER202307301109254198",
|
||||
});
|
||||
console.log(answer);
|
||||
let obj = JSON.parse(answer.data.data.mark_value);
|
||||
console.log(obj);
|
||||
// this.FormData.
|
||||
if (obj.tdpz_dxzkb) {
|
||||
this.tdpz_dxzkb1 = obj.tdpz_dxzkb.split(":")[0];
|
||||
this.tdpz_dxzkb2 = obj.tdpz_dxzkb.split(":")[1];
|
||||
}
|
||||
this.FormData.tdpz_watchtime = Boolean(Number(obj.tdpz_watchtime));
|
||||
// console.log(this.FormData.tdpz_watchtime);
|
||||
this.FormData.tdpz_cjsylxdz = Boolean(Number(obj.tdpz_cjsylxdz));
|
||||
if (obj.tdpz_ip) {
|
||||
this.tdpz_ip1 = obj.tdpz_ip.split(".")[0];
|
||||
this.tdpz_ip2 = obj.tdpz_ip.split(".")[1];
|
||||
this.tdpz_ip3 = obj.tdpz_ip.split(".")[2];
|
||||
this.tdpz_ip4 = obj.tdpz_ip.split(".")[3];
|
||||
}
|
||||
this.FormData.tdpz_tdmc = obj.tdpz_tdmc;
|
||||
this.FormData.tdpz_td = obj.tdpz_td;
|
||||
this.FormData.tdpz_qdmc = obj.tdpz_qdmc;
|
||||
this.FormData.tdpz_050F = obj.tdpz_050F;
|
||||
this.FormData.tdpz_0610 = obj.tdpz_0610;
|
||||
this.FormData.tdpz_port = obj.tdpz_port;
|
||||
this.FormData.tdpz_cssj = obj.tdpz_cssj;
|
||||
this.FormData.tdpz_jgsj = obj.tdpz_jgsj;
|
||||
this.FormData.tdpz_lxsj = obj.tdpz_lxsj;
|
||||
this.FormData.tdpz_cfcs = obj.tdpz_cfcs;
|
||||
},
|
||||
renderContent(h, { node, data, store }) {
|
||||
return (
|
||||
<span class="custom-tree-node">
|
||||
<span>{node.label}</span>
|
||||
</span>);
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.Loading = true;
|
||||
this.GetUserAnswer();
|
||||
this.Loading = false;
|
||||
// let res2 = GetUserAnswer()
|
||||
},
|
||||
|
||||
watch: {
|
||||
// "FormData.tdpz_watchtime": {
|
||||
// handler(old) {
|
||||
// if (old) {
|
||||
// this.isdisabled = false;
|
||||
// } else {
|
||||
// this.isdisabled = true;
|
||||
// }
|
||||
// },
|
||||
// },
|
||||
"FormData.tdpz_watchtime"(newval) {
|
||||
console.log(newval);
|
||||
if (newval) {
|
||||
this.isdisabled = true;
|
||||
} else {
|
||||
this.isdisabled = false;
|
||||
}
|
||||
},
|
||||
},
|
||||
directives: {
|
||||
clickoutside: {
|
||||
bind: function (el, binding, vnode) {
|
||||
function documentHandler(e) {
|
||||
if (el.contains(e.target)) {
|
||||
return false;
|
||||
}
|
||||
if (binding.expression) {
|
||||
binding.value(e);
|
||||
}
|
||||
}
|
||||
el._vueClickOutside_ = documentHandler;
|
||||
document.addEventListener("click", documentHandler);
|
||||
},
|
||||
unbind: function (el, binding) {
|
||||
document.removeEventListener("click", el._vueClickOutside_);
|
||||
delete el._vueClickOutside_;
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.tree_menu {
|
||||
position: absolute;
|
||||
width: 286px;
|
||||
left: 64px;
|
||||
top: 104px;
|
||||
width: 286px;
|
||||
height: 753px;
|
||||
line-height: 20px;
|
||||
border-radius: 3px;
|
||||
background-color: rgba(255, 255, 255, 1);
|
||||
text-align: center;
|
||||
border: 1px solid rgba(220, 220, 220, 1);
|
||||
}
|
||||
|
||||
.tree_rightmenu {
|
||||
position: fixed;
|
||||
width: 120px;
|
||||
border: 1px solid rgba(0, 0, 0, 0.15);
|
||||
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.super_parmams {
|
||||
display: flex;
|
||||
color: #fff !important;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: 668px;
|
||||
|
||||
i {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
/deep/ .pas_params {
|
||||
.el-col-12:last-child {
|
||||
padding-right: 150px;
|
||||
}
|
||||
|
||||
.el-col-12:first-child {
|
||||
padding-right: 38px;
|
||||
}
|
||||
|
||||
.el-input__inner {
|
||||
height: 30px;
|
||||
text-align: left;
|
||||
padding: 0px 8px;
|
||||
}
|
||||
|
||||
.el-row {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
|
||||
.el-col-1 {
|
||||
color: #fff !important;
|
||||
text-align: center;
|
||||
line-height: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.el-col-6 {
|
||||
height: 40px;
|
||||
top: 6px;
|
||||
left: 77px;
|
||||
position: relative;
|
||||
width: 50px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.super_con {
|
||||
.el-col-12:last-child {
|
||||
padding-right: 28px;
|
||||
}
|
||||
|
||||
.el-col-12:first-child {
|
||||
padding-right: 42px;
|
||||
}
|
||||
|
||||
.el-input__inner {
|
||||
text-align: left;
|
||||
padding: 0 8px;
|
||||
}
|
||||
|
||||
.el-row {
|
||||
color: #fff !important;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
|
||||
.el-col-4 {
|
||||
padding-left: 5px;
|
||||
width: 14px;
|
||||
text-align: center;
|
||||
line-height: 4px;
|
||||
height: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.el-dialog__footer {
|
||||
padding: 18px 1.25rem 50px;
|
||||
}
|
||||
|
||||
.dialog-footer {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
bottom: 45px;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
/deep/ .drvieName_All {
|
||||
position: absolute;
|
||||
left: 1408px;
|
||||
top: 140px;
|
||||
width: 435px;
|
||||
max-height: 720px;
|
||||
z-index: 10000;
|
||||
border: 1px solid #f5f5f5;
|
||||
|
||||
.title {
|
||||
background-color: #fff;
|
||||
padding: 5px 6px 5px 25px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.title_l {
|
||||
width: 103px;
|
||||
height: 26px;
|
||||
color: rgba(16, 16, 16, 1);
|
||||
font-size: 18px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.title_r {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
line-height: 24px;
|
||||
cursor: pointer;
|
||||
color: rgba(111, 103, 103, 1);
|
||||
}
|
||||
}
|
||||
|
||||
// h3 {
|
||||
// padding-bottom: 10px;
|
||||
// background-color: #fff;
|
||||
// }
|
||||
|
||||
.el-divider--horizontal {
|
||||
margin: 0px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,766 @@
|
|||
<!-- 网关通道 -->
|
||||
<template>
|
||||
<div>
|
||||
<!-- v-click-outside="closeMenu" -->
|
||||
<div>
|
||||
<div class="tree_menu" v-show="dialogVisible">
|
||||
<el-tree :data="$store.state.tree" :props="defaultProps" default-expand-all @node-contextmenu="rightClick"
|
||||
@node-click="treeNodeClick" ref="tree" :render-content="renderContent">
|
||||
<span class="custom-tree-node" slot-scope="{ node, data }">
|
||||
<template v-if="data.editing == 1">
|
||||
<el-button type="mini" v-if="flag" style="right: 50px; top: 0; position: absolute; border: none"
|
||||
@click.stop="done">完成</el-button>
|
||||
<el-button type="mini" style="right: 0; top: 0; position: absolute; border: none"
|
||||
@click.stop="edit">编辑</el-button>
|
||||
<span v-if="!flag">{{ data.label }}</span>
|
||||
<el-input v-else style="width: 150px" v-model="gateway"></el-input>
|
||||
</template>
|
||||
<template v-else>{{ data.label }}</template>
|
||||
</span>
|
||||
</el-tree>
|
||||
<!-- 树形控件右键组件 -->
|
||||
<div v-show="menuShow" class="tree_rightmenu" :style="{ ...rightMenu }">
|
||||
<el-menu class="el-menu-vertical-demo" @select="selectMenuNode" default-active="#0078FE">
|
||||
<el-menu-item id="menuitem" index="1" style="font-size: 12px">
|
||||
<span slot="title">新建通道</span>
|
||||
</el-menu-item>
|
||||
<el-menu-item index="2" style="font-size: 12px">
|
||||
<span slot="title">取 消</span>
|
||||
</el-menu-item>
|
||||
</el-menu>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pas_params">
|
||||
<el-dialog title="通道参数设置" :visible.sync="add_passage" width="765px" v-loading="Loading">
|
||||
<el-form :model="FormData" :label-position="labelPosition" :rules="rules" ref="ruleForm">
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="通道名称:" :label-width="formLabelWidth" prop="tdpz_tdmc">
|
||||
<el-select v-model="FormData.tdpz_tdmc" placeholder="" style="width: 200px; height: 30px">
|
||||
<el-option v-for="(item, index) in options1" :key="index" :label="item.label" :value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="通道:" :label-width="formLabelWidth" prop="tdpz_td">
|
||||
<el-select v-model="FormData.tdpz_td" placeholder="" style="width: 200px; height: 30px">
|
||||
<el-option v-for="(item, index) in options2" :key="index" :label="item.label" :value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="驱动名称:" :label-width="formLabelWidth" prop="tdpz_qdmc">
|
||||
<el-row>
|
||||
<el-col :span="18">
|
||||
<el-input v-model="FormData.tdpz_qdmc" placeholder="" style="width: 200px; height: 30px"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-button style="width: 50px; height: 30px" @click="getDriveName">...</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="IP地址:" :label-width="formLabelWidth" prop="tdpz_ip">
|
||||
<el-row>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="tdpz_ip1" style="width: 43px; height: 30px"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1" style="color: #fff">. </el-col>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="tdpz_ip2" style="width: 43px; height: 30px"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1" style="color: #fff">.</el-col>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="tdpz_ip3" style="width: 43px; height: 30px"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1" style="color: #fff">.</el-col>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="tdpz_ip4" style="width: 43px; height: 30px"></el-input>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="端口号:" :label-width="formLabelWidth" prop="tdpz_port">
|
||||
<el-input v-model="FormData.tdpz_port" placeholder="" style="width: 200px; height: 30px"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="超过时间(ms):" :label-width="formLabelWidth" prop="tdpz_cssj">
|
||||
<el-input v-model="FormData.tdpz_cssj" placeholder="" style="width: 200px; height: 30px"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="间隔时间(ms):" :label-width="formLabelWidth" prop="tdpz_jgsj">
|
||||
<el-input v-model="FormData.tdpz_jgsj" placeholder="" style="width: 200px; height: 30px"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="轮询时间(ms):" :label-width="formLabelWidth" prop="tdpz_lxsj">
|
||||
<el-input v-model="FormData.tdpz_lxsj" placeholder="" style="width: 200px; height: 30px"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="重复次数:" :label-width="formLabelWidth" prop="tdpz_cfcs">
|
||||
<el-input v-model="FormData.tdpz_cfcs" placeholder="" style="width: 200px; height: 30px"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<div class="super_parmams">
|
||||
<h3>高级参数</h3>
|
||||
<div>
|
||||
<i class="el-icon-caret-bottom" v-if="is_retract"></i>
|
||||
<i class="el-icon-caret-top" v-else="is_retract"></i>
|
||||
<el-button type="text" plain @click="getRetract" style="
|
||||
width: 28px;
|
||||
border: none;
|
||||
color: rgba(16, 16, 16, 1);
|
||||
font-size: 14px;
|
||||
text-align: left;
|
||||
">
|
||||
收起</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="super_con" v-show="is_retract">
|
||||
<el-form :label-position="labelPosition" :rules="rules" ref="ruleForm">
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item>
|
||||
<el-checkbox v-model="FormData.tdpz_watchtime">watch time(s)</el-checkbox>
|
||||
<el-input v-model="input1" placeholder="" style="width: 200px; height: 30px"
|
||||
:disabled="isdisabled"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item>
|
||||
<el-checkbox v-model="FormData.tdpz_cjsylxdz">采集使用连续地址</el-checkbox>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="读写占空比:" :label-width="formLabelWidth">
|
||||
<el-row>
|
||||
<el-col :span="10">
|
||||
<el-input v-model="tdpz_dxzkb1" style="width: 91px; height: 30px"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="4">: </el-col>
|
||||
<el-col :span="10">
|
||||
<el-input v-model="tdpz_dxzkb2" style="width: 91px; height: 30px"></el-input>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="05/0F:" :label-width="formLabelWidth">
|
||||
<el-row>
|
||||
<el-col :span="8"><el-radio v-model="FormData.tdpz_050F" label="auto">auto</el-radio></el-col>
|
||||
<el-col :span="8"><el-radio v-model="FormData.tdpz_050F" label="05">05</el-radio></el-col>
|
||||
<el-col :span="8"><el-radio v-model="FormData.tdpz_050F" label="0F">0F</el-radio></el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="06/10:" :label-width="formLabelWidth">
|
||||
<el-row>
|
||||
<el-col :span="8"><el-radio v-model="FormData.tdpz_0610" label="auto">auto</el-radio></el-col>
|
||||
<el-col :span="8"><el-radio v-model="FormData.tdpz_0610" label="06">06</el-radio></el-col>
|
||||
<el-col :span="8"><el-radio v-model="FormData.tdpz_0610" label="10">10</el-radio></el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</div>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="saveGate">保 存</el-button>
|
||||
<el-button @click="add_passage = false">取 消</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
<div class="drvieName_All" v-show="diag_drive">
|
||||
<div class="title">
|
||||
<p class="title_l">协议选择</p>
|
||||
<i class="el-icon-close title_r" @click="diag_drive = false"></i>
|
||||
</div>
|
||||
<el-divider></el-divider>
|
||||
<el-tree :data="datas2" :props="defaultProps" @node-click="handleDetailClick" default-expand-all></el-tree>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { SaveUserAnswer, GetUserAnswer } from "@/api/user";
|
||||
import { Loading } from "element-ui";
|
||||
|
||||
export default {
|
||||
name: "TestTreeView",
|
||||
|
||||
data() {
|
||||
return {
|
||||
flag: false,
|
||||
gateway: JSON.parse(localStorage.getItem("tree"))[0].label,
|
||||
FormData: {
|
||||
tdpz_tdmc: "有线区Channel1",
|
||||
tdpz_td: "网口",
|
||||
tdpz_qdmc: "ModbusTCPClient",
|
||||
tdpz_port: "",
|
||||
tdpz_cssj: "",
|
||||
tdpz_jgsj: "",
|
||||
tdpz_lxsj: "",
|
||||
tdpz_cfcs: "",
|
||||
tdpz_watchtime: true,
|
||||
tdpz_cjsylxdz: false,
|
||||
tdpz_dxzkb: "",
|
||||
tdpz_050F: "auto",
|
||||
tdpz_0610: "auto",
|
||||
},
|
||||
tdpz_dxzkb1: "1",
|
||||
tdpz_dxzkb2: "1",
|
||||
tdpz_ip1: "",
|
||||
tdpz_ip2: "",
|
||||
tdpz_ip3: "",
|
||||
tdpz_ip4: "",
|
||||
options1: [
|
||||
{
|
||||
value: "有线区Channel1",
|
||||
label: "有线区Channel1",
|
||||
},
|
||||
{
|
||||
value: "无线区Channel1",
|
||||
label: "无线区Channel1",
|
||||
},
|
||||
],
|
||||
options2: [
|
||||
{
|
||||
value: "网口",
|
||||
label: "网口",
|
||||
},
|
||||
{
|
||||
value: "串口",
|
||||
label: "串口",
|
||||
},
|
||||
],
|
||||
value1: "有线区Channel1",
|
||||
value2: "网口",
|
||||
diag_drive: false,
|
||||
isdisabled: true,
|
||||
radio: "1",
|
||||
is_retract: true,
|
||||
labelPosition: "left",
|
||||
formLabelWidth: "116px",
|
||||
input1: 192,
|
||||
add_passage: false,
|
||||
rightMenu: "",
|
||||
dialogVisible: true,
|
||||
menuShow: false,
|
||||
datas: [],
|
||||
datas2: [
|
||||
{
|
||||
label: "通用标准",
|
||||
children: [
|
||||
{
|
||||
label: "ModbusTCPClient",
|
||||
},
|
||||
{
|
||||
label: "ModbusRTU_over_TCP",
|
||||
},
|
||||
{
|
||||
label: "OPCUAClient",
|
||||
},
|
||||
{
|
||||
label: "OPCDAClient",
|
||||
},
|
||||
{
|
||||
label: "MQTTClient",
|
||||
},
|
||||
{
|
||||
label: "OPCXMLDAClient",
|
||||
},
|
||||
{
|
||||
label: "环保212协议网口监听",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "PLC",
|
||||
children: [
|
||||
{
|
||||
label: "Slemens S7-200 Network",
|
||||
},
|
||||
{
|
||||
label: "Slemens S7-300 Network",
|
||||
},
|
||||
{
|
||||
label: "Slemens S7-400 Network",
|
||||
},
|
||||
{
|
||||
label: "Slemens S7-1200 Network",
|
||||
},
|
||||
{
|
||||
label: "Slemens S7-1500 Network",
|
||||
},
|
||||
{
|
||||
label: "EtherNet/IP CIP协议(AB OMR ON)",
|
||||
},
|
||||
{
|
||||
label: "MC_Qna-3E(三菱 基恩士 松下)",
|
||||
},
|
||||
{
|
||||
label: "MC_A-1E_Binary",
|
||||
},
|
||||
{
|
||||
label: "OMRON-FINS",
|
||||
},
|
||||
{
|
||||
label: "横河PLC",
|
||||
},
|
||||
{
|
||||
label: "西门子FetchWirte",
|
||||
},
|
||||
{
|
||||
label: "富机 FUJI_SPH_NET",
|
||||
},
|
||||
{
|
||||
label: "基恩士上位链路通讯",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "智能建筑",
|
||||
children: [],
|
||||
},
|
||||
{
|
||||
label: "厂家定制",
|
||||
children: [],
|
||||
},
|
||||
{
|
||||
label: "电力行业标准",
|
||||
children: [
|
||||
{
|
||||
label: "IEC104",
|
||||
},
|
||||
{
|
||||
label: "DLT645_over_TCP",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "CNC数控",
|
||||
children: [],
|
||||
},
|
||||
{
|
||||
label: "私有协议",
|
||||
children: [],
|
||||
},
|
||||
],
|
||||
defaultProps: {
|
||||
children: "children",
|
||||
label: "label",
|
||||
},
|
||||
rules: {
|
||||
tdpz_tdmc: [
|
||||
{ required: true, message: "请输入通道名称", trigger: "change" },
|
||||
],
|
||||
tdpz_td: [{ required: true, message: "请输入通道", trigger: "change" }],
|
||||
tdpz_qdmc: [
|
||||
{ required: true, message: "请输入驱动名称", trigger: "change" },
|
||||
],
|
||||
tdpz_ip: [{ required: true, message: "请输入ip地址", trigger: "blur" }],
|
||||
tdpz_port: [
|
||||
{ required: true, message: "请输入端口号", trigger: "blur" },
|
||||
],
|
||||
tdpz_cssj: [
|
||||
{ required: true, message: "请输入超出时间", trigger: "blur" },
|
||||
],
|
||||
tdpz_jgsj: [
|
||||
{ required: true, message: "请输入间隔时间", trigger: "blur" },
|
||||
],
|
||||
tdpz_lxsj: [
|
||||
{ required: true, message: "请输入轮询时间", trigger: "blur" },
|
||||
],
|
||||
tdpz_cfcs: [
|
||||
{ required: true, message: "请输入重复次数", trigger: "blur" },
|
||||
],
|
||||
},
|
||||
};
|
||||
},
|
||||
created() {
|
||||
console.log(this.$store.state.tree);
|
||||
},
|
||||
methods: {
|
||||
//编辑
|
||||
edit(event) {
|
||||
this.flag = true;
|
||||
},
|
||||
//完成编辑
|
||||
done(event) {
|
||||
this.flag = false;
|
||||
let tree = this.$store.state.tree;
|
||||
tree[0].label = this.gateway;
|
||||
this.$store.commit("setTree", tree);
|
||||
},
|
||||
rightClick(e, data, node) {
|
||||
this.menuShow = false;
|
||||
this.menuShow = true;
|
||||
e.preventDefault(); //关闭浏览器右键默认事件
|
||||
this.rightMenu = { top: e.pageY + "px", left: e.pageX + "px" };
|
||||
document.addEventListener("click", (ev) => {
|
||||
ev.stopImmediatePropagation();
|
||||
if (ev.target !== document.querySelector(".el-menu-item.is-active")) {
|
||||
this.foo();
|
||||
}
|
||||
});
|
||||
},
|
||||
// 点击时候的判断,判断是否为新增网关
|
||||
selectMenuNode(index, indexPath) {
|
||||
console.log(index);
|
||||
if (index == 1) {
|
||||
this.add_passage = true;
|
||||
}
|
||||
},
|
||||
foo() {
|
||||
// 取消鼠标监听事件 菜单栏
|
||||
this.menuShow = false;
|
||||
document.removeEventListener("click", this.foo); // 关掉监听，
|
||||
},
|
||||
treeNodeClick(key) {
|
||||
// console.log
|
||||
this.foo();
|
||||
},
|
||||
// 收起点击事件的判断
|
||||
getRetract() {
|
||||
if (this.is_retract == true) {
|
||||
this.is_retract = false;
|
||||
} else {
|
||||
this.is_retract = true;
|
||||
}
|
||||
},
|
||||
getDriveName() {
|
||||
this.diag_drive = true;
|
||||
},
|
||||
Merge(value, value1, value2, value3, value4) {
|
||||
value = value1 + "." + value2 + "." + value3 + "." + value4;
|
||||
return value;
|
||||
},
|
||||
async saveGate() {
|
||||
this.add_passage = false;
|
||||
var obj = {
|
||||
tdpz_tdmc: this.FormData.tdpz_tdmc,
|
||||
tdpz_td: this.FormData.tdpz_td,
|
||||
tdpz_qdmc: this.FormData.tdpz_qdmc,
|
||||
tdpz_port: this.FormData.tdpz_port,
|
||||
tdpz_ccsj: this.FormData.tdpz_cssj,
|
||||
tdpz_jgsj: this.FormData.tdpz_jgsj,
|
||||
tdpz_ip: this.tdpz_ip1 + "." + this.tdpz_ip2 + "." + this.tdpz_ip3 + "." + this.tdpz_ip4,
|
||||
tdpz_lxsj: this.FormData.tdpz_lxsj,
|
||||
tdpz_cfcs: this.FormData.tdpz_cfcs,
|
||||
tdpz_watchtime: String(Number(this.FormData.tdpz_watchtime)),
|
||||
tdpz_cjsylxdz: String(Number(this.FormData.tdpz_cjsylxdz)),
|
||||
tdpz_dxzkb: this.tdpz_dxzkb1 + ":" + this.tdpz_dxzkb2,
|
||||
tdpz_050F: this.FormData.tdpz_050F,
|
||||
tdpz_0610: this.FormData.tdpz_0610,
|
||||
}
|
||||
let datas = sessionStorage.getItem("DB-IotLite_yx");
|
||||
datas = { ...JSON.parse(datas), ...obj };
|
||||
let res = await SaveUserAnswer({
|
||||
mark: "DB-IotLite_yx",
|
||||
user_id: "USER202307301109254198",
|
||||
mark_value: JSON.stringify(datas),
|
||||
});
|
||||
if (res.status == 200) {
|
||||
this.$message({
|
||||
message: '保存成功',
|
||||
type: 'success'
|
||||
});
|
||||
}
|
||||
sessionStorage.setItem("DB-IotLite_yx", JSON.stringify(datas));
|
||||
console.log(res);
|
||||
console.log(res.data.data.mark_value);
|
||||
// this.$router.push("/dbcollectdevice");
|
||||
// const newChild = { id: id++, label: `${this.$store.state.tree}`, children: [] };
|
||||
// if (!data.children) {
|
||||
// this.$set(data, 'children', []);
|
||||
// }
|
||||
// data.children.push(newChild);
|
||||
// 临时节点数据，根据实际需求定义
|
||||
const newNode = {
|
||||
label: this.FormData.tdpz_tdmc, // 新节点的标签，可以根据实际需求修改
|
||||
// ... 其他数据
|
||||
};
|
||||
// 如果树没有children属性，需要先定义一个空数组
|
||||
if (!parentNode.children) {
|
||||
this.$set(parentNode, 'children', []);
|
||||
}
|
||||
// 添加子节点到指定节点
|
||||
parentNode.children.push(newNode);
|
||||
// 触发UI重新渲染
|
||||
this.$forceUpdate();
|
||||
}
|
||||
},
|
||||
handleDetailClick(data, node, value) {
|
||||
console.log(data.label);
|
||||
this.FormData.tdpz_qdmc = data.label;
|
||||
this.diag_drive = false;
|
||||
},
|
||||
async GetUserAnswer() {
|
||||
let answer = await GetUserAnswer({
|
||||
mark: "DB-IotLite_yx",
|
||||
user_id: "USER202307301109254198",
|
||||
});
|
||||
console.log(answer);
|
||||
let obj = JSON.parse(answer.data.data.mark_value);
|
||||
console.log(obj);
|
||||
// this.FormData.
|
||||
if (obj.tdpz_dxzkb) {
|
||||
this.tdpz_dxzkb1 = obj.tdpz_dxzkb.split(":")[0];
|
||||
this.tdpz_dxzkb2 = obj.tdpz_dxzkb.split(":")[1];
|
||||
}
|
||||
this.FormData.tdpz_watchtime = Boolean(Number(obj.tdpz_watchtime));
|
||||
// console.log(this.FormData.tdpz_watchtime);
|
||||
this.FormData.tdpz_cjsylxdz = Boolean(Number(obj.tdpz_cjsylxdz));
|
||||
if (obj.tdpz_ip) {
|
||||
this.tdpz_ip1 = obj.tdpz_ip.split(".")[0];
|
||||
this.tdpz_ip2 = obj.tdpz_ip.split(".")[1];
|
||||
this.tdpz_ip3 = obj.tdpz_ip.split(".")[2];
|
||||
this.tdpz_ip4 = obj.tdpz_ip.split(".")[3];
|
||||
}
|
||||
this.FormData.tdpz_tdmc = obj.tdpz_tdmc;
|
||||
this.FormData.tdpz_td = obj.tdpz_td;
|
||||
this.FormData.tdpz_qdmc = obj.tdpz_qdmc;
|
||||
this.FormData.tdpz_050F = obj.tdpz_050F;
|
||||
this.FormData.tdpz_0610 = obj.tdpz_0610;
|
||||
this.FormData.tdpz_port = obj.tdpz_port;
|
||||
this.FormData.tdpz_cssj = obj.tdpz_cssj;
|
||||
this.FormData.tdpz_jgsj = obj.tdpz_jgsj;
|
||||
this.FormData.tdpz_lxsj = obj.tdpz_lxsj;
|
||||
this.FormData.tdpz_cfcs = obj.tdpz_cfcs;
|
||||
},
|
||||
renderContent(h, { node, data, store }) {
|
||||
return (
|
||||
<span class="custom-tree-node">
|
||||
<span>{node.label}</span>
|
||||
</span>);
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.Loading = true;
|
||||
this.GetUserAnswer();
|
||||
this.Loading = false;
|
||||
// let res2 = GetUserAnswer()
|
||||
},
|
||||
|
||||
watch: {
|
||||
// "FormData.tdpz_watchtime": {
|
||||
// handler(old) {
|
||||
// if (old) {
|
||||
// this.isdisabled = false;
|
||||
// } else {
|
||||
// this.isdisabled = true;
|
||||
// }
|
||||
// },
|
||||
// },
|
||||
"FormData.tdpz_watchtime"(newval) {
|
||||
console.log(newval);
|
||||
if (newval) {
|
||||
this.isdisabled = true;
|
||||
} else {
|
||||
this.isdisabled = false;
|
||||
}
|
||||
},
|
||||
},
|
||||
directives: {
|
||||
clickoutside: {
|
||||
bind: function (el, binding, vnode) {
|
||||
function documentHandler(e) {
|
||||
if (el.contains(e.target)) {
|
||||
return false;
|
||||
}
|
||||
if (binding.expression) {
|
||||
binding.value(e);
|
||||
}
|
||||
}
|
||||
el._vueClickOutside_ = documentHandler;
|
||||
document.addEventListener("click", documentHandler);
|
||||
},
|
||||
unbind: function (el, binding) {
|
||||
document.removeEventListener("click", el._vueClickOutside_);
|
||||
delete el._vueClickOutside_;
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.tree_menu {
|
||||
position: absolute;
|
||||
width: 286px;
|
||||
left: 64px;
|
||||
top: 104px;
|
||||
width: 286px;
|
||||
height: 753px;
|
||||
line-height: 20px;
|
||||
border-radius: 3px;
|
||||
background-color: rgba(255, 255, 255, 1);
|
||||
text-align: center;
|
||||
border: 1px solid rgba(220, 220, 220, 1);
|
||||
}
|
||||
|
||||
.tree_rightmenu {
|
||||
position: fixed;
|
||||
width: 120px;
|
||||
border: 1px solid rgba(0, 0, 0, 0.15);
|
||||
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.super_parmams {
|
||||
display: flex;
|
||||
color: #fff !important;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: 668px;
|
||||
|
||||
i {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
/deep/ .pas_params {
|
||||
.el-col-12:last-child {
|
||||
padding-right: 150px;
|
||||
}
|
||||
|
||||
.el-col-12:first-child {
|
||||
padding-right: 38px;
|
||||
}
|
||||
|
||||
.el-input__inner {
|
||||
height: 30px;
|
||||
text-align: left;
|
||||
padding: 0px 8px;
|
||||
}
|
||||
|
||||
.el-row {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
|
||||
.el-col-1 {
|
||||
color: #fff !important;
|
||||
text-align: center;
|
||||
line-height: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.el-col-6 {
|
||||
height: 40px;
|
||||
top: 6px;
|
||||
left: 77px;
|
||||
position: relative;
|
||||
width: 50px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.super_con {
|
||||
.el-col-12:last-child {
|
||||
padding-right: 28px;
|
||||
}
|
||||
|
||||
.el-col-12:first-child {
|
||||
padding-right: 42px;
|
||||
}
|
||||
|
||||
.el-input__inner {
|
||||
text-align: left;
|
||||
padding: 0 8px;
|
||||
}
|
||||
|
||||
.el-row {
|
||||
color: #fff !important;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
|
||||
.el-col-4 {
|
||||
padding-left: 5px;
|
||||
width: 14px;
|
||||
text-align: center;
|
||||
line-height: 4px;
|
||||
height: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.el-dialog__footer {
|
||||
padding: 18px 1.25rem 50px;
|
||||
}
|
||||
|
||||
.dialog-footer {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
bottom: 45px;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
/deep/ .drvieName_All {
|
||||
position: absolute;
|
||||
left: 1408px;
|
||||
top: 140px;
|
||||
width: 435px;
|
||||
max-height: 720px;
|
||||
z-index: 10000;
|
||||
border: 1px solid #f5f5f5;
|
||||
|
||||
.title {
|
||||
background-color: #fff;
|
||||
padding: 5px 6px 5px 25px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.title_l {
|
||||
width: 103px;
|
||||
height: 26px;
|
||||
color: rgba(16, 16, 16, 1);
|
||||
font-size: 18px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.title_r {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
line-height: 24px;
|
||||
cursor: pointer;
|
||||
color: rgba(111, 103, 103, 1);
|
||||
}
|
||||
}
|
||||
|
||||
// h3 {
|
||||
// padding-bottom: 10px;
|
||||
// background-color: #fff;
|
||||
// }
|
||||
|
||||
.el-divider--horizontal {
|
||||
margin: 0px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,753 @@
|
|||
<!-- 网关通道 -->
|
||||
<template>
|
||||
<div>
|
||||
<!-- v-click-outside="closeMenu" -->
|
||||
<div>
|
||||
<div class="tree_menu" v-show="dialogVisible">
|
||||
<el-tree :data="$store.state.tree" :props="defaultProps" default-expand-all @node-contextmenu="rightClick"
|
||||
@node-click="treeNodeClick" ref="tree" :render-content="renderContent">
|
||||
<span class="custom-tree-node" slot-scope="{ node, data }">
|
||||
<template v-if="data.editing == 1">
|
||||
<el-button type="mini" v-if="flag" style="right: 50px; top: 0; position: absolute; border: none"
|
||||
@click.stop="done">完成</el-button>
|
||||
<el-button type="mini" style="right: 0; top: 0; position: absolute; border: none"
|
||||
@click.stop="edit">编辑</el-button>
|
||||
<span v-if="!flag">{{ data.label }}</span>
|
||||
<el-input v-else style="width: 150px" v-model="gateway"></el-input>
|
||||
</template>
|
||||
<template v-else>{{ data.label }}</template>
|
||||
</span>
|
||||
</el-tree>
|
||||
<!-- 树形控件右键组件 -->
|
||||
<div v-show="menuShow" class="tree_rightmenu" :style="{ ...rightMenu }">
|
||||
<el-menu class="el-menu-vertical-demo" @select="selectMenuNode" default-active="#0078FE">
|
||||
<el-menu-item id="menuitem" index="1" style="font-size: 12px">
|
||||
<span slot="title">新建通道</span>
|
||||
</el-menu-item>
|
||||
<el-menu-item index="2" style="font-size: 12px">
|
||||
<span slot="title">取 消</span>
|
||||
</el-menu-item>
|
||||
</el-menu>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pas_params">
|
||||
<el-dialog title="通道参数设置" :visible.sync="add_passage" width="765px" v-loading="Loading">
|
||||
<el-form :model="FormData" :label-position="labelPosition" :rules="rules" ref="ruleForm">
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="通道名称:" :label-width="formLabelWidth" prop="tdpz_tdmc">
|
||||
<el-select v-model="FormData.tdpz_tdmc" placeholder="" style="width: 200px; height: 30px">
|
||||
<el-option v-for="(item, index) in options1" :key="index" :label="item.label" :value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="通道:" :label-width="formLabelWidth" prop="tdpz_td">
|
||||
<el-select v-model="FormData.tdpz_td" placeholder="" style="width: 200px; height: 30px">
|
||||
<el-option v-for="(item, index) in options2" :key="index" :label="item.label" :value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="驱动名称:" :label-width="formLabelWidth" prop="tdpz_qdmc">
|
||||
<el-row>
|
||||
<el-col :span="18">
|
||||
<el-input v-model="FormData.tdpz_qdmc" placeholder="" style="width: 200px; height: 30px"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-button style="width: 50px; height: 30px" @click="getDriveName">...</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="IP地址:" :label-width="formLabelWidth" prop="tdpz_ip">
|
||||
<el-row>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="tdpz_ip1" style="width: 43px; height: 30px"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1" style="color: #fff">. </el-col>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="tdpz_ip2" style="width: 43px; height: 30px"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1" style="color: #fff">.</el-col>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="tdpz_ip3" style="width: 43px; height: 30px"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1" style="color: #fff">.</el-col>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="tdpz_ip4" style="width: 43px; height: 30px"></el-input>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="端口号:" :label-width="formLabelWidth" prop="tdpz_port">
|
||||
<el-input v-model="FormData.tdpz_port" placeholder="" style="width: 200px; height: 30px"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="超过时间(ms):" :label-width="formLabelWidth" prop="tdpz_cssj">
|
||||
<el-input v-model="FormData.tdpz_cssj" placeholder="" style="width: 200px; height: 30px"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="间隔时间(ms):" :label-width="formLabelWidth" prop="tdpz_jgsj">
|
||||
<el-input v-model="FormData.tdpz_jgsj" placeholder="" style="width: 200px; height: 30px"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="轮询时间(ms):" :label-width="formLabelWidth" prop="tdpz_lxsj">
|
||||
<el-input v-model="FormData.tdpz_lxsj" placeholder="" style="width: 200px; height: 30px"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="重复次数:" :label-width="formLabelWidth" prop="tdpz_cfcs">
|
||||
<el-input v-model="FormData.tdpz_cfcs" placeholder="" style="width: 200px; height: 30px"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<div class="super_parmams">
|
||||
<h3>高级参数</h3>
|
||||
<div>
|
||||
<i class="el-icon-caret-bottom" v-if="is_retract"></i>
|
||||
<i class="el-icon-caret-top" v-else="is_retract"></i>
|
||||
<el-button type="text" plain @click="getRetract" style="
|
||||
width: 28px;
|
||||
border: none;
|
||||
color: rgba(16, 16, 16, 1);
|
||||
font-size: 14px;
|
||||
text-align: left;
|
||||
">
|
||||
收起</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="super_con" v-show="is_retract">
|
||||
<el-form :label-position="labelPosition" :rules="rules" ref="ruleForm">
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item>
|
||||
<el-checkbox v-model="FormData.tdpz_watchtime">watch time(s)</el-checkbox>
|
||||
<el-input v-model="input1" placeholder="" style="width: 200px; height: 30px"
|
||||
:disabled="isdisabled"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item>
|
||||
<el-checkbox v-model="FormData.tdpz_cjsylxdz">采集使用连续地址</el-checkbox>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="读写占空比:" :label-width="formLabelWidth">
|
||||
<el-row>
|
||||
<el-col :span="10">
|
||||
<el-input v-model="tdpz_dxzkb1" style="width: 91px; height: 30px"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="4">: </el-col>
|
||||
<el-col :span="10">
|
||||
<el-input v-model="tdpz_dxzkb2" style="width: 91px; height: 30px"></el-input>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="05/0F:" :label-width="formLabelWidth">
|
||||
<el-row>
|
||||
<el-col :span="8"><el-radio v-model="FormData.tdpz_050F" label="auto">auto</el-radio></el-col>
|
||||
<el-col :span="8"><el-radio v-model="FormData.tdpz_050F" label="05">05</el-radio></el-col>
|
||||
<el-col :span="8"><el-radio v-model="FormData.tdpz_050F" label="0F">0F</el-radio></el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="06/10:" :label-width="formLabelWidth">
|
||||
<el-row>
|
||||
<el-col :span="8"><el-radio v-model="FormData.tdpz_0610" label="auto">auto</el-radio></el-col>
|
||||
<el-col :span="8"><el-radio v-model="FormData.tdpz_0610" label="06">06</el-radio></el-col>
|
||||
<el-col :span="8"><el-radio v-model="FormData.tdpz_0610" label="10">10</el-radio></el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</div>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="saveGate">保 存</el-button>
|
||||
<el-button @click="add_passage = false">取 消</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
<div class="drvieName_All" v-show="diag_drive">
|
||||
<div class="title">
|
||||
<p class="title_l">协议选择</p>
|
||||
<i class="el-icon-close title_r" @click="diag_drive = false"></i>
|
||||
</div>
|
||||
<el-divider></el-divider>
|
||||
<el-tree :data="datas2" :props="defaultProps" @node-click="handleDetailClick" default-expand-all></el-tree>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { SaveUserAnswer, GetUserAnswer } from "@/api/user";
|
||||
import { Loading } from "element-ui";
|
||||
|
||||
export default {
|
||||
name: "TestTreeView",
|
||||
|
||||
data() {
|
||||
return {
|
||||
flag: false,
|
||||
gateway: JSON.parse(localStorage.getItem("tree"))[0].label,
|
||||
FormData: {
|
||||
tdpz_tdmc: "有线区Channel1",
|
||||
tdpz_td: "网口",
|
||||
tdpz_qdmc: "ModbusTCPClient",
|
||||
tdpz_port: "",
|
||||
tdpz_cssj: "",
|
||||
tdpz_jgsj: "",
|
||||
tdpz_lxsj: "",
|
||||
tdpz_cfcs: "",
|
||||
tdpz_watchtime: true,
|
||||
tdpz_cjsylxdz: false,
|
||||
tdpz_dxzkb: "",
|
||||
tdpz_050F: "auto",
|
||||
tdpz_0610: "auto",
|
||||
},
|
||||
tdpz_dxzkb1: "1",
|
||||
tdpz_dxzkb2: "1",
|
||||
tdpz_ip1: "",
|
||||
tdpz_ip2: "",
|
||||
tdpz_ip3: "",
|
||||
tdpz_ip4: "",
|
||||
options1: [
|
||||
{
|
||||
value: "有线区Channel1",
|
||||
label: "有线区Channel1",
|
||||
},
|
||||
{
|
||||
value: "无线区Channel1",
|
||||
label: "无线区Channel1",
|
||||
},
|
||||
],
|
||||
options2: [
|
||||
{
|
||||
value: "网口",
|
||||
label: "网口",
|
||||
},
|
||||
{
|
||||
value: "串口",
|
||||
label: "串口",
|
||||
},
|
||||
],
|
||||
value1: "有线区Channel1",
|
||||
value2: "网口",
|
||||
diag_drive: false,
|
||||
isdisabled: true,
|
||||
radio: "1",
|
||||
is_retract: true,
|
||||
labelPosition: "left",
|
||||
formLabelWidth: "116px",
|
||||
input1: 192,
|
||||
add_passage: false,
|
||||
rightMenu: "",
|
||||
dialogVisible: true,
|
||||
menuShow: false,
|
||||
datas: [],
|
||||
datas2: [
|
||||
{
|
||||
label: "通用标准",
|
||||
children: [
|
||||
{
|
||||
label: "ModbusTCPClient",
|
||||
},
|
||||
{
|
||||
label: "ModbusRTU_over_TCP",
|
||||
},
|
||||
{
|
||||
label: "OPCUAClient",
|
||||
},
|
||||
{
|
||||
label: "OPCDAClient",
|
||||
},
|
||||
{
|
||||
label: "MQTTClient",
|
||||
},
|
||||
{
|
||||
label: "OPCXMLDAClient",
|
||||
},
|
||||
{
|
||||
label: "环保212协议网口监听",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "PLC",
|
||||
children: [
|
||||
{
|
||||
label: "Slemens S7-200 Network",
|
||||
},
|
||||
{
|
||||
label: "Slemens S7-300 Network",
|
||||
},
|
||||
{
|
||||
label: "Slemens S7-400 Network",
|
||||
},
|
||||
{
|
||||
label: "Slemens S7-1200 Network",
|
||||
},
|
||||
{
|
||||
label: "Slemens S7-1500 Network",
|
||||
},
|
||||
{
|
||||
label: "EtherNet/IP CIP协议(AB OMR ON)",
|
||||
},
|
||||
{
|
||||
label: "MC_Qna-3E(三菱 基恩士 松下)",
|
||||
},
|
||||
{
|
||||
label: "MC_A-1E_Binary",
|
||||
},
|
||||
{
|
||||
label: "OMRON-FINS",
|
||||
},
|
||||
{
|
||||
label: "横河PLC",
|
||||
},
|
||||
{
|
||||
label: "西门子FetchWirte",
|
||||
},
|
||||
{
|
||||
label: "富机 FUJI_SPH_NET",
|
||||
},
|
||||
{
|
||||
label: "基恩士上位链路通讯",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "智能建筑",
|
||||
children: [],
|
||||
},
|
||||
{
|
||||
label: "厂家定制",
|
||||
children: [],
|
||||
},
|
||||
{
|
||||
label: "电力行业标准",
|
||||
children: [
|
||||
{
|
||||
label: "IEC104",
|
||||
},
|
||||
{
|
||||
label: "DLT645_over_TCP",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "CNC数控",
|
||||
children: [],
|
||||
},
|
||||
{
|
||||
label: "私有协议",
|
||||
children: [],
|
||||
},
|
||||
],
|
||||
defaultProps: {
|
||||
children: "children",
|
||||
label: "label",
|
||||
},
|
||||
rules: {
|
||||
tdpz_tdmc: [
|
||||
{ required: true, message: "请输入通道名称", trigger: "change" },
|
||||
],
|
||||
tdpz_td: [{ required: true, message: "请输入通道", trigger: "change" }],
|
||||
tdpz_qdmc: [
|
||||
{ required: true, message: "请输入驱动名称", trigger: "change" },
|
||||
],
|
||||
tdpz_ip: [{ required: true, message: "请输入ip地址", trigger: "blur" }],
|
||||
tdpz_port: [
|
||||
{ required: true, message: "请输入端口号", trigger: "blur" },
|
||||
],
|
||||
tdpz_cssj: [
|
||||
{ required: true, message: "请输入超出时间", trigger: "blur" },
|
||||
],
|
||||
tdpz_jgsj: [
|
||||
{ required: true, message: "请输入间隔时间", trigger: "blur" },
|
||||
],
|
||||
tdpz_lxsj: [
|
||||
{ required: true, message: "请输入轮询时间", trigger: "blur" },
|
||||
],
|
||||
tdpz_cfcs: [
|
||||
{ required: true, message: "请输入重复次数", trigger: "blur" },
|
||||
],
|
||||
},
|
||||
};
|
||||
},
|
||||
created() {
|
||||
console.log(this.$store.state.tree);
|
||||
},
|
||||
methods: {
|
||||
//编辑
|
||||
edit(event) {
|
||||
this.flag = true;
|
||||
},
|
||||
//完成编辑
|
||||
done(event) {
|
||||
this.flag = false;
|
||||
let tree = this.$store.state.tree;
|
||||
tree[0].label = this.gateway;
|
||||
this.$store.commit("setTree", tree);
|
||||
},
|
||||
rightClick(e, data, node) {
|
||||
this.menuShow = false;
|
||||
this.menuShow = true;
|
||||
e.preventDefault(); //关闭浏览器右键默认事件
|
||||
this.rightMenu = { top: e.pageY + "px", left: e.pageX + "px" };
|
||||
document.addEventListener("click", (ev) => {
|
||||
ev.stopImmediatePropagation();
|
||||
if (ev.target !== document.querySelector(".el-menu-item.is-active")) {
|
||||
this.foo();
|
||||
}
|
||||
});
|
||||
},
|
||||
// 点击时候的判断,判断是否为新增网关
|
||||
selectMenuNode(index, indexPath) {
|
||||
console.log(index);
|
||||
if (index == 1) {
|
||||
this.add_passage = true;
|
||||
}
|
||||
},
|
||||
foo() {
|
||||
// 取消鼠标监听事件 菜单栏
|
||||
this.menuShow = false;
|
||||
document.removeEventListener("click", this.foo); // 关掉监听，
|
||||
},
|
||||
treeNodeClick(key) {
|
||||
// console.log
|
||||
this.foo();
|
||||
},
|
||||
// 收起点击事件的判断
|
||||
getRetract() {
|
||||
if (this.is_retract == true) {
|
||||
this.is_retract = false;
|
||||
} else {
|
||||
this.is_retract = true;
|
||||
}
|
||||
},
|
||||
getDriveName() {
|
||||
this.diag_drive = true;
|
||||
},
|
||||
Merge(value, value1, value2, value3, value4) {
|
||||
value = value1 + "." + value2 + "." + value3 + "." + value4;
|
||||
return value;
|
||||
},
|
||||
async saveGate() {
|
||||
this.add_passage = false;
|
||||
var obj = {
|
||||
tdpz_tdmc: this.FormData.tdpz_tdmc,
|
||||
tdpz_td: this.FormData.tdpz_td,
|
||||
tdpz_qdmc: this.FormData.tdpz_qdmc,
|
||||
tdpz_port: this.FormData.tdpz_port,
|
||||
tdpz_ccsj: this.FormData.tdpz_cssj,
|
||||
tdpz_jgsj: this.FormData.tdpz_jgsj,
|
||||
tdpz_ip: this.tdpz_ip1 + "." + this.tdpz_ip2 + "." + this.tdpz_ip3 + "." + this.tdpz_ip4,
|
||||
tdpz_lxsj: this.FormData.tdpz_lxsj,
|
||||
tdpz_cfcs: this.FormData.tdpz_cfcs,
|
||||
tdpz_watchtime: String(Number(this.FormData.tdpz_watchtime)),
|
||||
tdpz_cjsylxdz: String(Number(this.FormData.tdpz_cjsylxdz)),
|
||||
tdpz_dxzkb: this.tdpz_dxzkb1 + ":" + this.tdpz_dxzkb2,
|
||||
tdpz_050F: this.FormData.tdpz_050F,
|
||||
tdpz_0610: this.FormData.tdpz_0610,
|
||||
}
|
||||
let datas = sessionStorage.getItem("DB-IotLite_yx");
|
||||
datas = { ...JSON.parse(datas), ...obj };
|
||||
let res = await SaveUserAnswer({
|
||||
mark: "DB-IotLite_yx",
|
||||
user_id: "USER202307301109254198",
|
||||
mark_value: JSON.stringify(datas),
|
||||
});
|
||||
if (res.status == 200) {
|
||||
this.$message({
|
||||
message: '保存成功',
|
||||
type: 'success'
|
||||
});
|
||||
}
|
||||
sessionStorage.setItem("DB-IotLite_yx", JSON.stringify(datas));
|
||||
console.log(res);
|
||||
console.log(res.data.data.mark_value);
|
||||
// this.$router.push("/dbcollectdevice");
|
||||
// const newChild = { id: id++, label: `${this.$store.state.tree}`, children: [] };
|
||||
// if (!data.children) {
|
||||
// this.$set(data, 'children', []);
|
||||
// }
|
||||
// data.children.push(newChild);
|
||||
|
||||
},
|
||||
handleDetailClick(data, node, value) {
|
||||
console.log(data.label);
|
||||
this.FormData.tdpz_qdmc = data.label;
|
||||
this.diag_drive = false;
|
||||
},
|
||||
async GetUserAnswer() {
|
||||
let answer = await GetUserAnswer({
|
||||
mark: "DB-IotLite_yx",
|
||||
user_id: "USER202307301109254198",
|
||||
});
|
||||
console.log(answer);
|
||||
let obj = JSON.parse(answer.data.data.mark_value);
|
||||
console.log(obj);
|
||||
// this.FormData.
|
||||
if (obj.tdpz_dxzkb) {
|
||||
this.tdpz_dxzkb1 = obj.tdpz_dxzkb.split(":")[0];
|
||||
this.tdpz_dxzkb2 = obj.tdpz_dxzkb.split(":")[1];
|
||||
}
|
||||
this.FormData.tdpz_watchtime = Boolean(Number(obj.tdpz_watchtime));
|
||||
// console.log(this.FormData.tdpz_watchtime);
|
||||
this.FormData.tdpz_cjsylxdz = Boolean(Number(obj.tdpz_cjsylxdz));
|
||||
if (obj.tdpz_ip) {
|
||||
this.tdpz_ip1 = obj.tdpz_ip.split(".")[0];
|
||||
this.tdpz_ip2 = obj.tdpz_ip.split(".")[1];
|
||||
this.tdpz_ip3 = obj.tdpz_ip.split(".")[2];
|
||||
this.tdpz_ip4 = obj.tdpz_ip.split(".")[3];
|
||||
}
|
||||
this.FormData.tdpz_tdmc = obj.tdpz_tdmc;
|
||||
this.FormData.tdpz_td = obj.tdpz_td;
|
||||
this.FormData.tdpz_qdmc = obj.tdpz_qdmc;
|
||||
this.FormData.tdpz_050F = obj.tdpz_050F;
|
||||
this.FormData.tdpz_0610 = obj.tdpz_0610;
|
||||
this.FormData.tdpz_port = obj.tdpz_port;
|
||||
this.FormData.tdpz_cssj = obj.tdpz_cssj;
|
||||
this.FormData.tdpz_jgsj = obj.tdpz_jgsj;
|
||||
this.FormData.tdpz_lxsj = obj.tdpz_lxsj;
|
||||
this.FormData.tdpz_cfcs = obj.tdpz_cfcs;
|
||||
},
|
||||
renderContent(h, { node, data, store }) {
|
||||
return (
|
||||
<span class="custom-tree-node">
|
||||
<span>{node.label}</span>
|
||||
</span>);
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.Loading = true;
|
||||
this.GetUserAnswer();
|
||||
this.Loading = false;
|
||||
// let res2 = GetUserAnswer()
|
||||
},
|
||||
|
||||
watch: {
|
||||
// "FormData.tdpz_watchtime": {
|
||||
// handler(old) {
|
||||
// if (old) {
|
||||
// this.isdisabled = false;
|
||||
// } else {
|
||||
// this.isdisabled = true;
|
||||
// }
|
||||
// },
|
||||
// },
|
||||
"FormData.tdpz_watchtime"(newval) {
|
||||
console.log(newval);
|
||||
if (newval) {
|
||||
this.isdisabled = true;
|
||||
} else {
|
||||
this.isdisabled = false;
|
||||
}
|
||||
},
|
||||
},
|
||||
directives: {
|
||||
clickoutside: {
|
||||
bind: function (el, binding, vnode) {
|
||||
function documentHandler(e) {
|
||||
if (el.contains(e.target)) {
|
||||
return false;
|
||||
}
|
||||
if (binding.expression) {
|
||||
binding.value(e);
|
||||
}
|
||||
}
|
||||
el._vueClickOutside_ = documentHandler;
|
||||
document.addEventListener("click", documentHandler);
|
||||
},
|
||||
unbind: function (el, binding) {
|
||||
document.removeEventListener("click", el._vueClickOutside_);
|
||||
delete el._vueClickOutside_;
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.tree_menu {
|
||||
position: absolute;
|
||||
width: 286px;
|
||||
left: 64px;
|
||||
top: 104px;
|
||||
width: 286px;
|
||||
height: 753px;
|
||||
line-height: 20px;
|
||||
border-radius: 3px;
|
||||
background-color: rgba(255, 255, 255, 1);
|
||||
text-align: center;
|
||||
border: 1px solid rgba(220, 220, 220, 1);
|
||||
}
|
||||
|
||||
.tree_rightmenu {
|
||||
position: fixed;
|
||||
width: 120px;
|
||||
border: 1px solid rgba(0, 0, 0, 0.15);
|
||||
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.super_parmams {
|
||||
display: flex;
|
||||
color: #fff !important;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: 668px;
|
||||
|
||||
i {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
/deep/ .pas_params {
|
||||
.el-col-12:last-child {
|
||||
padding-right: 150px;
|
||||
}
|
||||
|
||||
.el-col-12:first-child {
|
||||
padding-right: 38px;
|
||||
}
|
||||
|
||||
.el-input__inner {
|
||||
height: 30px;
|
||||
text-align: left;
|
||||
padding: 0px 8px;
|
||||
}
|
||||
|
||||
.el-row {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
|
||||
.el-col-1 {
|
||||
color: #fff !important;
|
||||
text-align: center;
|
||||
line-height: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.el-col-6 {
|
||||
height: 40px;
|
||||
top: 6px;
|
||||
left: 77px;
|
||||
position: relative;
|
||||
width: 50px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.super_con {
|
||||
.el-col-12:last-child {
|
||||
padding-right: 28px;
|
||||
}
|
||||
|
||||
.el-col-12:first-child {
|
||||
padding-right: 42px;
|
||||
}
|
||||
|
||||
.el-input__inner {
|
||||
text-align: left;
|
||||
padding: 0 8px;
|
||||
}
|
||||
|
||||
.el-row {
|
||||
color: #fff !important;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
|
||||
.el-col-4 {
|
||||
padding-left: 5px;
|
||||
width: 14px;
|
||||
text-align: center;
|
||||
line-height: 4px;
|
||||
height: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.el-dialog__footer {
|
||||
padding: 18px 1.25rem 50px;
|
||||
}
|
||||
|
||||
.dialog-footer {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
bottom: 45px;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
/deep/ .drvieName_All {
|
||||
position: absolute;
|
||||
left: 1408px;
|
||||
top: 140px;
|
||||
width: 435px;
|
||||
max-height: 720px;
|
||||
z-index: 10000;
|
||||
border: 1px solid #f5f5f5;
|
||||
|
||||
.title {
|
||||
background-color: #fff;
|
||||
padding: 5px 6px 5px 25px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.title_l {
|
||||
width: 103px;
|
||||
height: 26px;
|
||||
color: rgba(16, 16, 16, 1);
|
||||
font-size: 18px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.title_r {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
line-height: 24px;
|
||||
cursor: pointer;
|
||||
color: rgba(111, 103, 103, 1);
|
||||
}
|
||||
}
|
||||
|
||||
// h3 {
|
||||
// padding-bottom: 10px;
|
||||
// background-color: #fff;
|
||||
// }
|
||||
|
||||
.el-divider--horizontal {
|
||||
margin: 0px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,753 @@
|
|||
<!-- 网关通道 -->
|
||||
<template>
|
||||
<div>
|
||||
<!-- v-click-outside="closeMenu" -->
|
||||
<div>
|
||||
<div class="tree_menu" v-show="dialogVisible">
|
||||
<el-tree :data="$store.state.tree" :props="defaultProps" default-expand-all @node-contextmenu="rightClick"
|
||||
@node-click="treeNodeClick" ref="tree" :render-content="renderContent">
|
||||
<span class="custom-tree-node" slot-scope="{ node, data }">
|
||||
<template v-if="data.editing == 1">
|
||||
<el-button type="mini" v-if="flag" style="right: 50px; top: 0; position: absolute; border: none"
|
||||
@click.stop="done">完成</el-button>
|
||||
<el-button type="mini" style="right: 0; top: 0; position: absolute; border: none"
|
||||
@click.stop="edit">编辑</el-button>
|
||||
<span v-if="!flag">{{ data.label }}</span>
|
||||
<el-input v-else style="width: 150px" v-model="gateway"></el-input>
|
||||
</template>
|
||||
<template v-else>{{ data.label }}</template>
|
||||
</span>
|
||||
</el-tree>
|
||||
<!-- 树形控件右键组件 -->
|
||||
<div v-show="menuShow" class="tree_rightmenu" :style="{ ...rightMenu }">
|
||||
<el-menu class="el-menu-vertical-demo" @select="selectMenuNode" default-active="#0078FE">
|
||||
<el-menu-item id="menuitem" index="1" style="font-size: 12px">
|
||||
<span slot="title">新建通道</span>
|
||||
</el-menu-item>
|
||||
<el-menu-item index="2" style="font-size: 12px">
|
||||
<span slot="title">取 消</span>
|
||||
</el-menu-item>
|
||||
</el-menu>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pas_params">
|
||||
<el-dialog title="通道参数设置" :visible.sync="add_passage" width="765px" v-loading="Loading">
|
||||
<el-form :model="FormData" :label-position="labelPosition" :rules="rules" ref="ruleForm">
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="通道名称:" :label-width="formLabelWidth" prop="tdpz_tdmc">
|
||||
<el-select v-model="FormData.tdpz_tdmc" placeholder="" style="width: 200px; height: 30px">
|
||||
<el-option v-for="(item, index) in options1" :key="index" :label="item.label" :value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="通道:" :label-width="formLabelWidth" prop="tdpz_td">
|
||||
<el-select v-model="FormData.tdpz_td" placeholder="" style="width: 200px; height: 30px">
|
||||
<el-option v-for="(item, index) in options2" :key="index" :label="item.label" :value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="驱动名称:" :label-width="formLabelWidth" prop="tdpz_qdmc">
|
||||
<el-row>
|
||||
<el-col :span="18">
|
||||
<el-input v-model="FormData.tdpz_qdmc" placeholder="" style="width: 200px; height: 30px"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-button style="width: 50px; height: 30px" @click="getDriveName">...</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="IP地址:" :label-width="formLabelWidth" prop="tdpz_ip">
|
||||
<el-row>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="tdpz_ip1" style="width: 43px; height: 30px"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1" style="color: #fff">. </el-col>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="tdpz_ip2" style="width: 43px; height: 30px"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1" style="color: #fff">.</el-col>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="tdpz_ip3" style="width: 43px; height: 30px"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1" style="color: #fff">.</el-col>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="tdpz_ip4" style="width: 43px; height: 30px"></el-input>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="端口号:" :label-width="formLabelWidth" prop="tdpz_port">
|
||||
<el-input v-model="FormData.tdpz_port" placeholder="" style="width: 200px; height: 30px"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="超过时间(ms):" :label-width="formLabelWidth" prop="tdpz_cssj">
|
||||
<el-input v-model="FormData.tdpz_cssj" placeholder="" style="width: 200px; height: 30px"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="间隔时间(ms):" :label-width="formLabelWidth" prop="tdpz_jgsj">
|
||||
<el-input v-model="FormData.tdpz_jgsj" placeholder="" style="width: 200px; height: 30px"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="轮询时间(ms):" :label-width="formLabelWidth" prop="tdpz_lxsj">
|
||||
<el-input v-model="FormData.tdpz_lxsj" placeholder="" style="width: 200px; height: 30px"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="重复次数:" :label-width="formLabelWidth" prop="tdpz_cfcs">
|
||||
<el-input v-model="FormData.tdpz_cfcs" placeholder="" style="width: 200px; height: 30px"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<div class="super_parmams">
|
||||
<h3>高级参数</h3>
|
||||
<div>
|
||||
<i class="el-icon-caret-bottom" v-if="is_retract"></i>
|
||||
<i class="el-icon-caret-top" v-else="is_retract"></i>
|
||||
<el-button type="text" plain @click="getRetract" style="
|
||||
width: 28px;
|
||||
border: none;
|
||||
color: rgba(16, 16, 16, 1);
|
||||
font-size: 14px;
|
||||
text-align: left;
|
||||
">
|
||||
收起</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="super_con" v-show="is_retract">
|
||||
<el-form :label-position="labelPosition" :rules="rules" ref="ruleForm">
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item>
|
||||
<el-checkbox v-model="FormData.tdpz_watchtime">watch time(s)</el-checkbox>
|
||||
<el-input v-model="input1" placeholder="" style="width: 200px; height: 30px"
|
||||
:disabled="isdisabled"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item>
|
||||
<el-checkbox v-model="FormData.tdpz_cjsylxdz">采集使用连续地址</el-checkbox>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="读写占空比:" :label-width="formLabelWidth">
|
||||
<el-row>
|
||||
<el-col :span="10">
|
||||
<el-input v-model="tdpz_dxzkb1" style="width: 91px; height: 30px"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="4">: </el-col>
|
||||
<el-col :span="10">
|
||||
<el-input v-model="tdpz_dxzkb2" style="width: 91px; height: 30px"></el-input>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="05/0F:" :label-width="formLabelWidth">
|
||||
<el-row>
|
||||
<el-col :span="8"><el-radio v-model="FormData.tdpz_050F" label="auto">auto</el-radio></el-col>
|
||||
<el-col :span="8"><el-radio v-model="FormData.tdpz_050F" label="05">05</el-radio></el-col>
|
||||
<el-col :span="8"><el-radio v-model="FormData.tdpz_050F" label="0F">0F</el-radio></el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="06/10:" :label-width="formLabelWidth">
|
||||
<el-row>
|
||||
<el-col :span="8"><el-radio v-model="FormData.tdpz_0610" label="auto">auto</el-radio></el-col>
|
||||
<el-col :span="8"><el-radio v-model="FormData.tdpz_0610" label="06">06</el-radio></el-col>
|
||||
<el-col :span="8"><el-radio v-model="FormData.tdpz_0610" label="10">10</el-radio></el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</div>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="saveGate">保 存</el-button>
|
||||
<el-button @click="add_passage = false">取 消</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
<div class="drvieName_All" v-show="diag_drive">
|
||||
<div class="title">
|
||||
<p class="title_l">协议选择</p>
|
||||
<i class="el-icon-close title_r" @click="diag_drive = false"></i>
|
||||
</div>
|
||||
<el-divider></el-divider>
|
||||
<el-tree :data="datas2" :props="defaultProps" @node-click="handleDetailClick" default-expand-all></el-tree>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { SaveUserAnswer, GetUserAnswer } from "@/api/user";
|
||||
import { Loading } from "element-ui";
|
||||
|
||||
export default {
|
||||
name: "TestTreeView",
|
||||
|
||||
data() {
|
||||
return {
|
||||
flag: false,
|
||||
gateway: JSON.parse(localStorage.getItem("tree"))[0].label,
|
||||
FormData: {
|
||||
tdpz_tdmc: "有线区Channel1",
|
||||
tdpz_td: "网口",
|
||||
tdpz_qdmc: "ModbusTCPClient",
|
||||
tdpz_port: "",
|
||||
tdpz_cssj: "",
|
||||
tdpz_jgsj: "",
|
||||
tdpz_lxsj: "",
|
||||
tdpz_cfcs: "",
|
||||
tdpz_watchtime: true,
|
||||
tdpz_cjsylxdz: false,
|
||||
tdpz_dxzkb: "",
|
||||
tdpz_050F: "auto",
|
||||
tdpz_0610: "auto",
|
||||
},
|
||||
tdpz_dxzkb1: "1",
|
||||
tdpz_dxzkb2: "1",
|
||||
tdpz_ip1: "",
|
||||
tdpz_ip2: "",
|
||||
tdpz_ip3: "",
|
||||
tdpz_ip4: "",
|
||||
options1: [
|
||||
{
|
||||
value: "有线区Channel1",
|
||||
label: "有线区Channel1",
|
||||
},
|
||||
{
|
||||
value: "无线区Channel1",
|
||||
label: "无线区Channel1",
|
||||
},
|
||||
],
|
||||
options2: [
|
||||
{
|
||||
value: "网口",
|
||||
label: "网口",
|
||||
},
|
||||
{
|
||||
value: "串口",
|
||||
label: "串口",
|
||||
},
|
||||
],
|
||||
value1: "有线区Channel1",
|
||||
value2: "网口",
|
||||
diag_drive: false,
|
||||
isdisabled: true,
|
||||
radio: "1",
|
||||
is_retract: true,
|
||||
labelPosition: "left",
|
||||
formLabelWidth: "116px",
|
||||
input1: 192,
|
||||
add_passage: false,
|
||||
rightMenu: "",
|
||||
dialogVisible: true,
|
||||
menuShow: false,
|
||||
datas: [],
|
||||
datas2: [
|
||||
{
|
||||
label: "通用标准",
|
||||
children: [
|
||||
{
|
||||
label: "ModbusTCPClient",
|
||||
},
|
||||
{
|
||||
label: "ModbusRTU_over_TCP",
|
||||
},
|
||||
{
|
||||
label: "OPCUAClient",
|
||||
},
|
||||
{
|
||||
label: "OPCDAClient",
|
||||
},
|
||||
{
|
||||
label: "MQTTClient",
|
||||
},
|
||||
{
|
||||
label: "OPCXMLDAClient",
|
||||
},
|
||||
{
|
||||
label: "环保212协议网口监听",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "PLC",
|
||||
children: [
|
||||
{
|
||||
label: "Slemens S7-200 Network",
|
||||
},
|
||||
{
|
||||
label: "Slemens S7-300 Network",
|
||||
},
|
||||
{
|
||||
label: "Slemens S7-400 Network",
|
||||
},
|
||||
{
|
||||
label: "Slemens S7-1200 Network",
|
||||
},
|
||||
{
|
||||
label: "Slemens S7-1500 Network",
|
||||
},
|
||||
{
|
||||
label: "EtherNet/IP CIP协议(AB OMR ON)",
|
||||
},
|
||||
{
|
||||
label: "MC_Qna-3E(三菱 基恩士 松下)",
|
||||
},
|
||||
{
|
||||
label: "MC_A-1E_Binary",
|
||||
},
|
||||
{
|
||||
label: "OMRON-FINS",
|
||||
},
|
||||
{
|
||||
label: "横河PLC",
|
||||
},
|
||||
{
|
||||
label: "西门子FetchWirte",
|
||||
},
|
||||
{
|
||||
label: "富机 FUJI_SPH_NET",
|
||||
},
|
||||
{
|
||||
label: "基恩士上位链路通讯",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "智能建筑",
|
||||
children: [],
|
||||
},
|
||||
{
|
||||
label: "厂家定制",
|
||||
children: [],
|
||||
},
|
||||
{
|
||||
label: "电力行业标准",
|
||||
children: [
|
||||
{
|
||||
label: "IEC104",
|
||||
},
|
||||
{
|
||||
label: "DLT645_over_TCP",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "CNC数控",
|
||||
children: [],
|
||||
},
|
||||
{
|
||||
label: "私有协议",
|
||||
children: [],
|
||||
},
|
||||
],
|
||||
defaultProps: {
|
||||
children: "children",
|
||||
label: "label",
|
||||
},
|
||||
rules: {
|
||||
tdpz_tdmc: [
|
||||
{ required: true, message: "请输入通道名称", trigger: "change" },
|
||||
],
|
||||
tdpz_td: [{ required: true, message: "请输入通道", trigger: "change" }],
|
||||
tdpz_qdmc: [
|
||||
{ required: true, message: "请输入驱动名称", trigger: "change" },
|
||||
],
|
||||
tdpz_ip: [{ required: true, message: "请输入ip地址", trigger: "blur" }],
|
||||
tdpz_port: [
|
||||
{ required: true, message: "请输入端口号", trigger: "blur" },
|
||||
],
|
||||
tdpz_cssj: [
|
||||
{ required: true, message: "请输入超出时间", trigger: "blur" },
|
||||
],
|
||||
tdpz_jgsj: [
|
||||
{ required: true, message: "请输入间隔时间", trigger: "blur" },
|
||||
],
|
||||
tdpz_lxsj: [
|
||||
{ required: true, message: "请输入轮询时间", trigger: "blur" },
|
||||
],
|
||||
tdpz_cfcs: [
|
||||
{ required: true, message: "请输入重复次数", trigger: "blur" },
|
||||
],
|
||||
},
|
||||
};
|
||||
},
|
||||
created() {
|
||||
console.log(this.$store.state.tree);
|
||||
},
|
||||
methods: {
|
||||
//编辑
|
||||
edit(event) {
|
||||
this.flag = true;
|
||||
},
|
||||
//完成编辑
|
||||
done(event) {
|
||||
this.flag = false;
|
||||
let tree = this.$store.state.tree;
|
||||
tree[0].label = this.gateway;
|
||||
this.$store.commit("setTree", tree);
|
||||
},
|
||||
rightClick(e, data, node) {
|
||||
this.menuShow = false;
|
||||
this.menuShow = true;
|
||||
e.preventDefault(); //关闭浏览器右键默认事件
|
||||
this.rightMenu = { top: e.pageY + "px", left: e.pageX + "px" };
|
||||
document.addEventListener("click", (ev) => {
|
||||
ev.stopImmediatePropagation();
|
||||
if (ev.target !== document.querySelector(".el-menu-item.is-active")) {
|
||||
this.foo();
|
||||
}
|
||||
});
|
||||
},
|
||||
// 点击时候的判断,判断是否为新增网关
|
||||
selectMenuNode(index, indexPath) {
|
||||
console.log(index);
|
||||
if (index == 1) {
|
||||
this.add_passage = true;
|
||||
}
|
||||
},
|
||||
foo() {
|
||||
// 取消鼠标监听事件 菜单栏
|
||||
this.menuShow = false;
|
||||
document.removeEventListener("click", this.foo); // 关掉监听，
|
||||
},
|
||||
treeNodeClick(key) {
|
||||
// console.log
|
||||
this.foo();
|
||||
},
|
||||
// 收起点击事件的判断
|
||||
getRetract() {
|
||||
if (this.is_retract == true) {
|
||||
this.is_retract = false;
|
||||
} else {
|
||||
this.is_retract = true;
|
||||
}
|
||||
},
|
||||
getDriveName() {
|
||||
this.diag_drive = true;
|
||||
},
|
||||
Merge(value, value1, value2, value3, value4) {
|
||||
value = value1 + "." + value2 + "." + value3 + "." + value4;
|
||||
return value;
|
||||
},
|
||||
async saveGate() {
|
||||
this.add_passage = false;
|
||||
var obj = {
|
||||
tdpz_tdmc: this.FormData.tdpz_tdmc,
|
||||
tdpz_td: this.FormData.tdpz_td,
|
||||
tdpz_qdmc: this.FormData.tdpz_qdmc,
|
||||
tdpz_port: this.FormData.tdpz_port,
|
||||
tdpz_ccsj: this.FormData.tdpz_cssj,
|
||||
tdpz_jgsj: this.FormData.tdpz_jgsj,
|
||||
tdpz_ip: this.tdpz_ip1 + "." + this.tdpz_ip2 + "." + this.tdpz_ip3 + "." + this.tdpz_ip4,
|
||||
tdpz_lxsj: this.FormData.tdpz_lxsj,
|
||||
tdpz_cfcs: this.FormData.tdpz_cfcs,
|
||||
tdpz_watchtime: String(Number(this.FormData.tdpz_watchtime)),
|
||||
tdpz_cjsylxdz: String(Number(this.FormData.tdpz_cjsylxdz)),
|
||||
tdpz_dxzkb: this.tdpz_dxzkb1 + ":" + this.tdpz_dxzkb2,
|
||||
tdpz_050F: this.FormData.tdpz_050F,
|
||||
tdpz_0610: this.FormData.tdpz_0610,
|
||||
}
|
||||
let datas = sessionStorage.getItem("DB-IotLite_yx");
|
||||
datas = { ...JSON.parse(datas), ...obj };
|
||||
let res = await SaveUserAnswer({
|
||||
mark: "DB-IotLite_yx",
|
||||
user_id: "USER202307301109254198",
|
||||
mark_value: JSON.stringify(datas),
|
||||
});
|
||||
if (res.status == 200) {
|
||||
this.$message({
|
||||
message: '保存成功',
|
||||
type: 'success'
|
||||
});
|
||||
}
|
||||
sessionStorage.setItem("DB-IotLite_yx", JSON.stringify(datas));
|
||||
console.log(res);
|
||||
console.log(res.data.data.mark_value);
|
||||
// this.$router.push("/dbcollectdevice");
|
||||
// const newChild = { id: id++, label: `${this.$store.state.tree}`, children: [] };
|
||||
// if (!data.children) {
|
||||
// this.$set(data, 'children', []);
|
||||
// }
|
||||
// data.children.push(newChild);
|
||||
|
||||
},
|
||||
handleDetailClick(data, node, value) {
|
||||
console.log(data.label);
|
||||
this.FormData.tdpz_qdmc = data.label;
|
||||
this.diag_drive = false;
|
||||
},
|
||||
async GetUserAnswer() {
|
||||
let answer = await GetUserAnswer({
|
||||
mark: "DB-IotLite_yx",
|
||||
user_id: "USER202307301109254198",
|
||||
});
|
||||
console.log(answer);
|
||||
let obj = JSON.parse(answer.data.data.mark_value);
|
||||
console.log(obj);
|
||||
// this.FormData.
|
||||
if (obj.tdpz_dxzkb) {
|
||||
this.tdpz_dxzkb1 = obj.tdpz_dxzkb.split(":")[0];
|
||||
this.tdpz_dxzkb2 = obj.tdpz_dxzkb.split(":")[1];
|
||||
}
|
||||
this.FormData.tdpz_watchtime = Boolean(Number(obj.tdpz_watchtime));
|
||||
// console.log(this.FormData.tdpz_watchtime);
|
||||
this.FormData.tdpz_cjsylxdz = Boolean(Number(obj.tdpz_cjsylxdz));
|
||||
if (obj.tdpz_ip) {
|
||||
this.tdpz_ip1 = obj.tdpz_ip.split(".")[0];
|
||||
this.tdpz_ip2 = obj.tdpz_ip.split(".")[1];
|
||||
this.tdpz_ip3 = obj.tdpz_ip.split(".")[2];
|
||||
this.tdpz_ip4 = obj.tdpz_ip.split(".")[3];
|
||||
}
|
||||
this.FormData.tdpz_tdmc = obj.tdpz_tdmc;
|
||||
this.FormData.tdpz_td = obj.tdpz_td;
|
||||
this.FormData.tdpz_qdmc = obj.tdpz_qdmc;
|
||||
this.FormData.tdpz_050F = obj.tdpz_050F;
|
||||
this.FormData.tdpz_0610 = obj.tdpz_0610;
|
||||
this.FormData.tdpz_port = obj.tdpz_port;
|
||||
this.FormData.tdpz_cssj = obj.tdpz_cssj;
|
||||
this.FormData.tdpz_jgsj = obj.tdpz_jgsj;
|
||||
this.FormData.tdpz_lxsj = obj.tdpz_lxsj;
|
||||
this.FormData.tdpz_cfcs = obj.tdpz_cfcs;
|
||||
},
|
||||
renderContent(h, { node, data, store }) {
|
||||
return (
|
||||
<span class="custom-tree-node">
|
||||
<span>{node.label}</span>
|
||||
</span>);
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.Loading = true;
|
||||
this.GetUserAnswer();
|
||||
this.Loading = false;
|
||||
// let res2 = GetUserAnswer()
|
||||
},
|
||||
|
||||
watch: {
|
||||
// "FormData.tdpz_watchtime": {
|
||||
// handler(old) {
|
||||
// if (old) {
|
||||
// this.isdisabled = false;
|
||||
// } else {
|
||||
// this.isdisabled = true;
|
||||
// }
|
||||
// },
|
||||
// },
|
||||
"FormData.tdpz_watchtime"(newval) {
|
||||
console.log(newval);
|
||||
if (newval) {
|
||||
this.isdisabled = true;
|
||||
} else {
|
||||
this.isdisabled = false;
|
||||
}
|
||||
},
|
||||
},
|
||||
directives: {
|
||||
clickoutside: {
|
||||
bind: function (el, binding, vnode) {
|
||||
function documentHandler(e) {
|
||||
if (el.contains(e.target)) {
|
||||
return false;
|
||||
}
|
||||
if (binding.expression) {
|
||||
binding.value(e);
|
||||
}
|
||||
}
|
||||
el._vueClickOutside_ = documentHandler;
|
||||
document.addEventListener("click", documentHandler);
|
||||
},
|
||||
unbind: function (el, binding) {
|
||||
document.removeEventListener("click", el._vueClickOutside_);
|
||||
delete el._vueClickOutside_;
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.tree_menu {
|
||||
position: absolute;
|
||||
width: 286px;
|
||||
left: 64px;
|
||||
top: 104px;
|
||||
width: 286px;
|
||||
height: 753px;
|
||||
line-height: 20px;
|
||||
border-radius: 3px;
|
||||
background-color: rgba(255, 255, 255, 1);
|
||||
text-align: center;
|
||||
border: 1px solid rgba(220, 220, 220, 1);
|
||||
}
|
||||
|
||||
.tree_rightmenu {
|
||||
position: fixed;
|
||||
width: 120px;
|
||||
border: 1px solid rgba(0, 0, 0, 0.15);
|
||||
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.super_parmams {
|
||||
display: flex;
|
||||
color: #fff !important;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: 668px;
|
||||
|
||||
i {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
/deep/ .pas_params {
|
||||
.el-col-12:last-child {
|
||||
padding-right: 150px;
|
||||
}
|
||||
|
||||
.el-col-12:first-child {
|
||||
padding-right: 38px;
|
||||
}
|
||||
|
||||
.el-input__inner {
|
||||
height: 30px;
|
||||
text-align: left;
|
||||
padding: 0px 8px;
|
||||
}
|
||||
|
||||
.el-row {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
|
||||
.el-col-1 {
|
||||
color: #fff !important;
|
||||
text-align: center;
|
||||
line-height: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.el-col-6 {
|
||||
height: 40px;
|
||||
top: 6px;
|
||||
left: 77px;
|
||||
position: relative;
|
||||
width: 50px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.super_con {
|
||||
.el-col-12:last-child {
|
||||
padding-right: 28px;
|
||||
}
|
||||
|
||||
.el-col-12:first-child {
|
||||
padding-right: 42px;
|
||||
}
|
||||
|
||||
.el-input__inner {
|
||||
text-align: left;
|
||||
padding: 0 8px;
|
||||
}
|
||||
|
||||
.el-row {
|
||||
color: #fff !important;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
|
||||
.el-col-4 {
|
||||
padding-left: 5px;
|
||||
width: 14px;
|
||||
text-align: center;
|
||||
line-height: 4px;
|
||||
height: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.el-dialog__footer {
|
||||
padding: 18px 1.25rem 50px;
|
||||
}
|
||||
|
||||
.dialog-footer {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
bottom: 45px;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
/deep/ .drvieName_All {
|
||||
position: absolute;
|
||||
left: 1408px;
|
||||
top: 140px;
|
||||
width: 435px;
|
||||
max-height: 720px;
|
||||
z-index: 10000;
|
||||
border: 1px solid #f5f5f5;
|
||||
|
||||
.title {
|
||||
background-color: #fff;
|
||||
padding: 5px 6px 5px 25px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.title_l {
|
||||
width: 103px;
|
||||
height: 26px;
|
||||
color: rgba(16, 16, 16, 1);
|
||||
font-size: 18px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.title_r {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
line-height: 24px;
|
||||
cursor: pointer;
|
||||
color: rgba(111, 103, 103, 1);
|
||||
}
|
||||
}
|
||||
|
||||
// h3 {
|
||||
// padding-bottom: 10px;
|
||||
// background-color: #fff;
|
||||
// }
|
||||
|
||||
.el-divider--horizontal {
|
||||
margin: 0px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,753 @@
|
|||
<!-- 网关通道 -->
|
||||
<template>
|
||||
<div>
|
||||
<!-- v-click-outside="closeMenu" -->
|
||||
<div>
|
||||
<div class="tree_menu" v-show="dialogVisible">
|
||||
<el-tree :data="$store.state.tree" :props="defaultProps" default-expand-all @node-contextmenu="rightClick"
|
||||
@node-click="treeNodeClick" ref="tree" :render-content="renderContent">
|
||||
<span class="custom-tree-node" slot-scope="{ node, data }">
|
||||
<template v-if="data.editing == 1">
|
||||
<el-button type="mini" v-if="flag" style="right: 50px; top: 0; position: absolute; border: none"
|
||||
@click.stop="done">完成</el-button>
|
||||
<el-button type="mini" style="right: 0; top: 0; position: absolute; border: none"
|
||||
@click.stop="edit">编辑</el-button>
|
||||
<span v-if="!flag">{{ data.label }}</span>
|
||||
<el-input v-else style="width: 150px" v-model="gateway"></el-input>
|
||||
</template>
|
||||
<template v-else>{{ data.label }}</template>
|
||||
</span>
|
||||
</el-tree>
|
||||
<!-- 树形控件右键组件 -->
|
||||
<div v-show="menuShow" class="tree_rightmenu" :style="{ ...rightMenu }">
|
||||
<el-menu class="el-menu-vertical-demo" @select="selectMenuNode" default-active="#0078FE">
|
||||
<el-menu-item id="menuitem" index="1" style="font-size: 12px">
|
||||
<span slot="title">新建通道</span>
|
||||
</el-menu-item>
|
||||
<el-menu-item index="2" style="font-size: 12px">
|
||||
<span slot="title">取 消</span>
|
||||
</el-menu-item>
|
||||
</el-menu>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pas_params">
|
||||
<el-dialog title="通道参数设置" :visible.sync="add_passage" width="765px" v-loading="Loading">
|
||||
<el-form :model="FormData" :label-position="labelPosition" :rules="rules" ref="ruleForm">
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="通道名称:" :label-width="formLabelWidth" prop="tdpz_tdmc">
|
||||
<el-select v-model="FormData.tdpz_tdmc" placeholder="" style="width: 200px; height: 30px">
|
||||
<el-option v-for="(item, index) in options1" :key="index" :label="item.label" :value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="通道:" :label-width="formLabelWidth" prop="tdpz_td">
|
||||
<el-select v-model="FormData.tdpz_td" placeholder="" style="width: 200px; height: 30px">
|
||||
<el-option v-for="(item, index) in options2" :key="index" :label="item.label" :value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="驱动名称:" :label-width="formLabelWidth" prop="tdpz_qdmc">
|
||||
<el-row>
|
||||
<el-col :span="18">
|
||||
<el-input v-model="FormData.tdpz_qdmc" placeholder="" style="width: 200px; height: 30px"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-button style="width: 50px; height: 30px" @click="getDriveName">...</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="IP地址:" :label-width="formLabelWidth" prop="tdpz_ip">
|
||||
<el-row>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="tdpz_ip1" style="width: 43px; height: 30px"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1" style="color: #fff">. </el-col>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="tdpz_ip2" style="width: 43px; height: 30px"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1" style="color: #fff">.</el-col>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="tdpz_ip3" style="width: 43px; height: 30px"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1" style="color: #fff">.</el-col>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="tdpz_ip4" style="width: 43px; height: 30px"></el-input>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="端口号:" :label-width="formLabelWidth" prop="tdpz_port">
|
||||
<el-input v-model="FormData.tdpz_port" placeholder="" style="width: 200px; height: 30px"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="超过时间(ms):" :label-width="formLabelWidth" prop="tdpz_cssj">
|
||||
<el-input v-model="FormData.tdpz_cssj" placeholder="" style="width: 200px; height: 30px"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="间隔时间(ms):" :label-width="formLabelWidth" prop="tdpz_jgsj">
|
||||
<el-input v-model="FormData.tdpz_jgsj" placeholder="" style="width: 200px; height: 30px"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="轮询时间(ms):" :label-width="formLabelWidth" prop="tdpz_lxsj">
|
||||
<el-input v-model="FormData.tdpz_lxsj" placeholder="" style="width: 200px; height: 30px"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="重复次数:" :label-width="formLabelWidth" prop="tdpz_cfcs">
|
||||
<el-input v-model="FormData.tdpz_cfcs" placeholder="" style="width: 200px; height: 30px"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<div class="super_parmams">
|
||||
<h3>高级参数</h3>
|
||||
<div>
|
||||
<i class="el-icon-caret-bottom" v-if="is_retract"></i>
|
||||
<i class="el-icon-caret-top" v-else="is_retract"></i>
|
||||
<el-button type="text" plain @click="getRetract" style="
|
||||
width: 28px;
|
||||
border: none;
|
||||
color: rgba(16, 16, 16, 1);
|
||||
font-size: 14px;
|
||||
text-align: left;
|
||||
">
|
||||
收起</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="super_con" v-show="is_retract">
|
||||
<el-form :label-position="labelPosition" :rules="rules" ref="ruleForm">
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item>
|
||||
<el-checkbox v-model="FormData.tdpz_watchtime">watch time(s)</el-checkbox>
|
||||
<el-input v-model="input1" placeholder="" style="width: 200px; height: 30px"
|
||||
:disabled="isdisabled"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item>
|
||||
<el-checkbox v-model="FormData.tdpz_cjsylxdz">采集使用连续地址</el-checkbox>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="读写占空比:" :label-width="formLabelWidth">
|
||||
<el-row>
|
||||
<el-col :span="10">
|
||||
<el-input v-model="tdpz_dxzkb1" style="width: 91px; height: 30px"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="4">: </el-col>
|
||||
<el-col :span="10">
|
||||
<el-input v-model="tdpz_dxzkb2" style="width: 91px; height: 30px"></el-input>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="05/0F:" :label-width="formLabelWidth">
|
||||
<el-row>
|
||||
<el-col :span="8"><el-radio v-model="FormData.tdpz_050F" label="auto">auto</el-radio></el-col>
|
||||
<el-col :span="8"><el-radio v-model="FormData.tdpz_050F" label="05">05</el-radio></el-col>
|
||||
<el-col :span="8"><el-radio v-model="FormData.tdpz_050F" label="0F">0F</el-radio></el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="06/10:" :label-width="formLabelWidth">
|
||||
<el-row>
|
||||
<el-col :span="8"><el-radio v-model="FormData.tdpz_0610" label="auto">auto</el-radio></el-col>
|
||||
<el-col :span="8"><el-radio v-model="FormData.tdpz_0610" label="06">06</el-radio></el-col>
|
||||
<el-col :span="8"><el-radio v-model="FormData.tdpz_0610" label="10">10</el-radio></el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</div>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="saveGate">保 存</el-button>
|
||||
<el-button @click="add_passage = false">取 消</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
<div class="drvieName_All" v-show="diag_drive">
|
||||
<div class="title">
|
||||
<p class="title_l">协议选择</p>
|
||||
<i class="el-icon-close title_r" @click="diag_drive = false"></i>
|
||||
</div>
|
||||
<el-divider></el-divider>
|
||||
<el-tree :data="datas2" :props="defaultProps" @node-click="handleDetailClick" default-expand-all></el-tree>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { SaveUserAnswer, GetUserAnswer } from "@/api/user";
|
||||
import { Loading } from "element-ui";
|
||||
|
||||
export default {
|
||||
name: "TestTreeView",
|
||||
|
||||
data() {
|
||||
return {
|
||||
flag: false,
|
||||
gateway: JSON.parse(localStorage.getItem("tree"))[0].label,
|
||||
FormData: {
|
||||
tdpz_tdmc: "有线区Channel1",
|
||||
tdpz_td: "网口",
|
||||
tdpz_qdmc: "ModbusTCPClient",
|
||||
tdpz_port: "",
|
||||
tdpz_cssj: "",
|
||||
tdpz_jgsj: "",
|
||||
tdpz_lxsj: "",
|
||||
tdpz_cfcs: "",
|
||||
tdpz_watchtime: true,
|
||||
tdpz_cjsylxdz: false,
|
||||
tdpz_dxzkb: "",
|
||||
tdpz_050F: "auto",
|
||||
tdpz_0610: "auto",
|
||||
},
|
||||
tdpz_dxzkb1: "1",
|
||||
tdpz_dxzkb2: "1",
|
||||
tdpz_ip1: "",
|
||||
tdpz_ip2: "",
|
||||
tdpz_ip3: "",
|
||||
tdpz_ip4: "",
|
||||
options1: [
|
||||
{
|
||||
value: "有线区Channel1",
|
||||
label: "有线区Channel1",
|
||||
},
|
||||
{
|
||||
value: "无线区Channel1",
|
||||
label: "无线区Channel1",
|
||||
},
|
||||
],
|
||||
options2: [
|
||||
{
|
||||
value: "网口",
|
||||
label: "网口",
|
||||
},
|
||||
{
|
||||
value: "串口",
|
||||
label: "串口",
|
||||
},
|
||||
],
|
||||
value1: "有线区Channel1",
|
||||
value2: "网口",
|
||||
diag_drive: false,
|
||||
isdisabled: true,
|
||||
radio: "1",
|
||||
is_retract: true,
|
||||
labelPosition: "left",
|
||||
formLabelWidth: "116px",
|
||||
input1: 192,
|
||||
add_passage: false,
|
||||
rightMenu: "",
|
||||
dialogVisible: true,
|
||||
menuShow: false,
|
||||
datas: [],
|
||||
datas2: [
|
||||
{
|
||||
label: "通用标准",
|
||||
children: [
|
||||
{
|
||||
label: "ModbusTCPClient",
|
||||
},
|
||||
{
|
||||
label: "ModbusRTU_over_TCP",
|
||||
},
|
||||
{
|
||||
label: "OPCUAClient",
|
||||
},
|
||||
{
|
||||
label: "OPCDAClient",
|
||||
},
|
||||
{
|
||||
label: "MQTTClient",
|
||||
},
|
||||
{
|
||||
label: "OPCXMLDAClient",
|
||||
},
|
||||
{
|
||||
label: "环保212协议网口监听",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "PLC",
|
||||
children: [
|
||||
{
|
||||
label: "Slemens S7-200 Network",
|
||||
},
|
||||
{
|
||||
label: "Slemens S7-300 Network",
|
||||
},
|
||||
{
|
||||
label: "Slemens S7-400 Network",
|
||||
},
|
||||
{
|
||||
label: "Slemens S7-1200 Network",
|
||||
},
|
||||
{
|
||||
label: "Slemens S7-1500 Network",
|
||||
},
|
||||
{
|
||||
label: "EtherNet/IP CIP协议(AB OMR ON)",
|
||||
},
|
||||
{
|
||||
label: "MC_Qna-3E(三菱 基恩士 松下)",
|
||||
},
|
||||
{
|
||||
label: "MC_A-1E_Binary",
|
||||
},
|
||||
{
|
||||
label: "OMRON-FINS",
|
||||
},
|
||||
{
|
||||
label: "横河PLC",
|
||||
},
|
||||
{
|
||||
label: "西门子FetchWirte",
|
||||
},
|
||||
{
|
||||
label: "富机 FUJI_SPH_NET",
|
||||
},
|
||||
{
|
||||
label: "基恩士上位链路通讯",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "智能建筑",
|
||||
children: [],
|
||||
},
|
||||
{
|
||||
label: "厂家定制",
|
||||
children: [],
|
||||
},
|
||||
{
|
||||
label: "电力行业标准",
|
||||
children: [
|
||||
{
|
||||
label: "IEC104",
|
||||
},
|
||||
{
|
||||
label: "DLT645_over_TCP",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "CNC数控",
|
||||
children: [],
|
||||
},
|
||||
{
|
||||
label: "私有协议",
|
||||
children: [],
|
||||
},
|
||||
],
|
||||
defaultProps: {
|
||||
children: "children",
|
||||
label: "label",
|
||||
},
|
||||
rules: {
|
||||
tdpz_tdmc: [
|
||||
{ required: true, message: "请输入通道名称", trigger: "change" },
|
||||
],
|
||||
tdpz_td: [{ required: true, message: "请输入通道", trigger: "change" }],
|
||||
tdpz_qdmc: [
|
||||
{ required: true, message: "请输入驱动名称", trigger: "change" },
|
||||
],
|
||||
tdpz_ip: [{ required: true, message: "请输入ip地址", trigger: "blur" }],
|
||||
tdpz_port: [
|
||||
{ required: true, message: "请输入端口号", trigger: "blur" },
|
||||
],
|
||||
tdpz_cssj: [
|
||||
{ required: true, message: "请输入超出时间", trigger: "blur" },
|
||||
],
|
||||
tdpz_jgsj: [
|
||||
{ required: true, message: "请输入间隔时间", trigger: "blur" },
|
||||
],
|
||||
tdpz_lxsj: [
|
||||
{ required: true, message: "请输入轮询时间", trigger: "blur" },
|
||||
],
|
||||
tdpz_cfcs: [
|
||||
{ required: true, message: "请输入重复次数", trigger: "blur" },
|
||||
],
|
||||
},
|
||||
};
|
||||
},
|
||||
created() {
|
||||
console.log(this.$store.state.tree);
|
||||
},
|
||||
methods: {
|
||||
//编辑
|
||||
edit(event) {
|
||||
this.flag = true;
|
||||
},
|
||||
//完成编辑
|
||||
done(event) {
|
||||
this.flag = false;
|
||||
let tree = this.$store.state.tree;
|
||||
tree[0].label = this.gateway;
|
||||
this.$store.commit("setTree", tree);
|
||||
},
|
||||
rightClick(e, data, node) {
|
||||
this.menuShow = false;
|
||||
this.menuShow = true;
|
||||
e.preventDefault(); //关闭浏览器右键默认事件
|
||||
this.rightMenu = { top: e.pageY + "px", left: e.pageX + "px" };
|
||||
document.addEventListener("click", (ev) => {
|
||||
ev.stopImmediatePropagation();
|
||||
if (ev.target !== document.querySelector(".el-menu-item.is-active")) {
|
||||
this.foo();
|
||||
}
|
||||
});
|
||||
},
|
||||
// 点击时候的判断,判断是否为新增网关
|
||||
selectMenuNode(index, indexPath) {
|
||||
console.log(index);
|
||||
if (index == 1) {
|
||||
this.add_passage = true;
|
||||
}
|
||||
},
|
||||
foo() {
|
||||
// 取消鼠标监听事件 菜单栏
|
||||
this.menuShow = false;
|
||||
document.removeEventListener("click", this.foo); // 关掉监听，
|
||||
},
|
||||
treeNodeClick(key) {
|
||||
// console.log
|
||||
this.foo();
|
||||
},
|
||||
// 收起点击事件的判断
|
||||
getRetract() {
|
||||
if (this.is_retract == true) {
|
||||
this.is_retract = false;
|
||||
} else {
|
||||
this.is_retract = true;
|
||||
}
|
||||
},
|
||||
getDriveName() {
|
||||
this.diag_drive = true;
|
||||
},
|
||||
Merge(value, value1, value2, value3, value4) {
|
||||
value = value1 + "." + value2 + "." + value3 + "." + value4;
|
||||
return value;
|
||||
},
|
||||
async saveGate() {
|
||||
this.add_passage = false;
|
||||
var obj = {
|
||||
tdpz_tdmc: this.FormData.tdpz_tdmc,
|
||||
tdpz_td: this.FormData.tdpz_td,
|
||||
tdpz_qdmc: this.FormData.tdpz_qdmc,
|
||||
tdpz_port: this.FormData.tdpz_port,
|
||||
tdpz_ccsj: this.FormData.tdpz_cssj,
|
||||
tdpz_jgsj: this.FormData.tdpz_jgsj,
|
||||
tdpz_ip: this.tdpz_ip1 + "." + this.tdpz_ip2 + "." + this.tdpz_ip3 + "." + this.tdpz_ip4,
|
||||
tdpz_lxsj: this.FormData.tdpz_lxsj,
|
||||
tdpz_cfcs: this.FormData.tdpz_cfcs,
|
||||
tdpz_watchtime: String(Number(this.FormData.tdpz_watchtime)),
|
||||
tdpz_cjsylxdz: String(Number(this.FormData.tdpz_cjsylxdz)),
|
||||
tdpz_dxzkb: this.tdpz_dxzkb1 + ":" + this.tdpz_dxzkb2,
|
||||
tdpz_050F: this.FormData.tdpz_050F,
|
||||
tdpz_0610: this.FormData.tdpz_0610,
|
||||
}
|
||||
let datas = sessionStorage.getItem("DB-IotLite_yx");
|
||||
datas = { ...JSON.parse(datas), ...obj };
|
||||
let res = await SaveUserAnswer({
|
||||
mark: "DB-IotLite_yx",
|
||||
user_id: "USER202307301109254198",
|
||||
mark_value: JSON.stringify(datas),
|
||||
});
|
||||
if (res.status == 200) {
|
||||
this.$message({
|
||||
message: '保存成功',
|
||||
type: 'success'
|
||||
});
|
||||
}
|
||||
sessionStorage.setItem("DB-IotLite_yx", JSON.stringify(datas));
|
||||
console.log(res);
|
||||
console.log(res.data.data.mark_value);
|
||||
// this.$router.push("/dbcollectdevice");
|
||||
// const newChild = { id: id++, label: `${this.$store.state.tree}`, children: [] };
|
||||
// if (!data.children) {
|
||||
// this.$set(data, 'children', []);
|
||||
// }
|
||||
// data.children.push(newChild);
|
||||
|
||||
},
|
||||
handleDetailClick(data, node, value) {
|
||||
console.log(data.label);
|
||||
this.FormData.tdpz_qdmc = data.label;
|
||||
this.diag_drive = false;
|
||||
},
|
||||
async GetUserAnswer() {
|
||||
let answer = await GetUserAnswer({
|
||||
mark: "DB-IotLite_yx",
|
||||
user_id: "USER202307301109254198",
|
||||
});
|
||||
console.log(answer);
|
||||
let obj = JSON.parse(answer.data.data.mark_value);
|
||||
console.log(obj);
|
||||
// this.FormData.
|
||||
if (obj.tdpz_dxzkb) {
|
||||
this.tdpz_dxzkb1 = obj.tdpz_dxzkb.split(":")[0];
|
||||
this.tdpz_dxzkb2 = obj.tdpz_dxzkb.split(":")[1];
|
||||
}
|
||||
this.FormData.tdpz_watchtime = Boolean(Number(obj.tdpz_watchtime));
|
||||
// console.log(this.FormData.tdpz_watchtime);
|
||||
this.FormData.tdpz_cjsylxdz = Boolean(Number(obj.tdpz_cjsylxdz));
|
||||
if (obj.tdpz_ip) {
|
||||
this.tdpz_ip1 = obj.tdpz_ip.split(".")[0];
|
||||
this.tdpz_ip2 = obj.tdpz_ip.split(".")[1];
|
||||
this.tdpz_ip3 = obj.tdpz_ip.split(".")[2];
|
||||
this.tdpz_ip4 = obj.tdpz_ip.split(".")[3];
|
||||
}
|
||||
this.FormData.tdpz_tdmc = obj.tdpz_tdmc;
|
||||
this.FormData.tdpz_td = obj.tdpz_td;
|
||||
this.FormData.tdpz_qdmc = obj.tdpz_qdmc;
|
||||
this.FormData.tdpz_050F = obj.tdpz_050F;
|
||||
this.FormData.tdpz_0610 = obj.tdpz_0610;
|
||||
this.FormData.tdpz_port = obj.tdpz_port;
|
||||
this.FormData.tdpz_cssj = obj.tdpz_cssj;
|
||||
this.FormData.tdpz_jgsj = obj.tdpz_jgsj;
|
||||
this.FormData.tdpz_lxsj = obj.tdpz_lxsj;
|
||||
this.FormData.tdpz_cfcs = obj.tdpz_cfcs;
|
||||
},
|
||||
renderContent(h, { node, data, store }) {
|
||||
return (
|
||||
<span class="custom-tree-node">
|
||||
<span>{node.label}</span>
|
||||
</span>);
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.Loading = true;
|
||||
this.GetUserAnswer();
|
||||
this.Loading = false;
|
||||
// let res2 = GetUserAnswer()
|
||||
},
|
||||
|
||||
watch: {
|
||||
// "FormData.tdpz_watchtime": {
|
||||
// handler(old) {
|
||||
// if (old) {
|
||||
// this.isdisabled = false;
|
||||
// } else {
|
||||
// this.isdisabled = true;
|
||||
// }
|
||||
// },
|
||||
// },
|
||||
"FormData.tdpz_watchtime"(newval) {
|
||||
console.log(newval);
|
||||
if (newval) {
|
||||
this.isdisabled = true;
|
||||
} else {
|
||||
this.isdisabled = false;
|
||||
}
|
||||
},
|
||||
},
|
||||
directives: {
|
||||
clickoutside: {
|
||||
bind: function (el, binding, vnode) {
|
||||
function documentHandler(e) {
|
||||
if (el.contains(e.target)) {
|
||||
return false;
|
||||
}
|
||||
if (binding.expression) {
|
||||
binding.value(e);
|
||||
}
|
||||
}
|
||||
el._vueClickOutside_ = documentHandler;
|
||||
document.addEventListener("click", documentHandler);
|
||||
},
|
||||
unbind: function (el, binding) {
|
||||
document.removeEventListener("click", el._vueClickOutside_);
|
||||
delete el._vueClickOutside_;
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.tree_menu {
|
||||
position: absolute;
|
||||
width: 286px;
|
||||
left: 64px;
|
||||
top: 104px;
|
||||
width: 286px;
|
||||
height: 753px;
|
||||
line-height: 20px;
|
||||
border-radius: 3px;
|
||||
background-color: rgba(255, 255, 255, 1);
|
||||
text-align: center;
|
||||
border: 1px solid rgba(220, 220, 220, 1);
|
||||
}
|
||||
|
||||
.tree_rightmenu {
|
||||
position: fixed;
|
||||
width: 120px;
|
||||
border: 1px solid rgba(0, 0, 0, 0.15);
|
||||
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.super_parmams {
|
||||
display: flex;
|
||||
color: #fff !important;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: 668px;
|
||||
|
||||
i {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
/deep/ .pas_params {
|
||||
.el-col-12:last-child {
|
||||
padding-right: 150px;
|
||||
}
|
||||
|
||||
.el-col-12:first-child {
|
||||
padding-right: 38px;
|
||||
}
|
||||
|
||||
.el-input__inner {
|
||||
height: 30px;
|
||||
text-align: left;
|
||||
padding: 0px 8px;
|
||||
}
|
||||
|
||||
.el-row {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
|
||||
.el-col-1 {
|
||||
color: #fff !important;
|
||||
text-align: center;
|
||||
line-height: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.el-col-6 {
|
||||
height: 40px;
|
||||
top: 6px;
|
||||
left: 77px;
|
||||
position: relative;
|
||||
width: 50px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.super_con {
|
||||
.el-col-12:last-child {
|
||||
padding-right: 28px;
|
||||
}
|
||||
|
||||
.el-col-12:first-child {
|
||||
padding-right: 42px;
|
||||
}
|
||||
|
||||
.el-input__inner {
|
||||
text-align: left;
|
||||
padding: 0 8px;
|
||||
}
|
||||
|
||||
.el-row {
|
||||
color: #fff !important;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
|
||||
.el-col-4 {
|
||||
padding-left: 5px;
|
||||
width: 14px;
|
||||
text-align: center;
|
||||
line-height: 4px;
|
||||
height: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.el-dialog__footer {
|
||||
padding: 18px 1.25rem 50px;
|
||||
}
|
||||
|
||||
.dialog-footer {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
bottom: 45px;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
/deep/ .drvieName_All {
|
||||
position: absolute;
|
||||
left: 1408px;
|
||||
top: 140px;
|
||||
width: 435px;
|
||||
max-height: 720px;
|
||||
z-index: 10000;
|
||||
border: 1px solid #f5f5f5;
|
||||
|
||||
.title {
|
||||
background-color: #fff;
|
||||
padding: 5px 6px 5px 25px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.title_l {
|
||||
width: 103px;
|
||||
height: 26px;
|
||||
color: rgba(16, 16, 16, 1);
|
||||
font-size: 18px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.title_r {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
line-height: 24px;
|
||||
cursor: pointer;
|
||||
color: rgba(111, 103, 103, 1);
|
||||
}
|
||||
}
|
||||
|
||||
// h3 {
|
||||
// padding-bottom: 10px;
|
||||
// background-color: #fff;
|
||||
// }
|
||||
|
||||
.el-divider--horizontal {
|
||||
margin: 0px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,753 @@
|
|||
<!-- 网关通道 -->
|
||||
<template>
|
||||
<div>
|
||||
<!-- v-click-outside="closeMenu" -->
|
||||
<div>
|
||||
<div class="tree_menu" v-show="dialogVisible">
|
||||
<el-tree :data="$store.state.tree" :props="defaultProps" default-expand-all @node-contextmenu="rightClick"
|
||||
@node-click="treeNodeClick" ref="tree" :render-content="renderContent">
|
||||
<span class="custom-tree-node" slot-scope="{ node, data }">
|
||||
<template v-if="data.editing == 1">
|
||||
<el-button type="mini" v-if="flag" style="right: 50px; top: 0; position: absolute; border: none"
|
||||
@click.stop="done">完成</el-button>
|
||||
<el-button type="mini" style="right: 0; top: 0; position: absolute; border: none"
|
||||
@click.stop="edit">编辑</el-button>
|
||||
<span v-if="!flag">{{ data.label }}</span>
|
||||
<el-input v-else style="width: 150px" v-model="gateway"></el-input>
|
||||
</template>
|
||||
<template v-else>{{ data.label }}</template>
|
||||
</span>
|
||||
</el-tree>
|
||||
<!-- 树形控件右键组件 -->
|
||||
<div v-show="menuShow" class="tree_rightmenu" :style="{ ...rightMenu }">
|
||||
<el-menu class="el-menu-vertical-demo" @select="selectMenuNode" default-active="#0078FE">
|
||||
<el-menu-item id="menuitem" index="1" style="font-size: 12px">
|
||||
<span slot="title">新建通道</span>
|
||||
</el-menu-item>
|
||||
<el-menu-item index="2" style="font-size: 12px">
|
||||
<span slot="title">取 消</span>
|
||||
</el-menu-item>
|
||||
</el-menu>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pas_params">
|
||||
<el-dialog title="通道参数设置" :visible.sync="add_passage" width="765px" v-loading="Loading">
|
||||
<el-form :model="FormData" :label-position="labelPosition" :rules="rules" ref="ruleForm">
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="通道名称:" :label-width="formLabelWidth" prop="tdpz_tdmc">
|
||||
<el-select v-model="FormData.tdpz_tdmc" placeholder="" style="width: 200px; height: 30px">
|
||||
<el-option v-for="(item, index) in options1" :key="index" :label="item.label" :value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="通道:" :label-width="formLabelWidth" prop="tdpz_td">
|
||||
<el-select v-model="FormData.tdpz_td" placeholder="" style="width: 200px; height: 30px">
|
||||
<el-option v-for="(item, index) in options2" :key="index" :label="item.label" :value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="驱动名称:" :label-width="formLabelWidth" prop="tdpz_qdmc">
|
||||
<el-row>
|
||||
<el-col :span="18">
|
||||
<el-input v-model="FormData.tdpz_qdmc" placeholder="" style="width: 200px; height: 30px"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-button style="width: 50px; height: 30px" @click="getDriveName">...</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="IP地址:" :label-width="formLabelWidth" prop="tdpz_ip">
|
||||
<el-row>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="tdpz_ip1" style="width: 43px; height: 30px"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1" style="color: #fff">. </el-col>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="tdpz_ip2" style="width: 43px; height: 30px"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1" style="color: #fff">.</el-col>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="tdpz_ip3" style="width: 43px; height: 30px"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1" style="color: #fff">.</el-col>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="tdpz_ip4" style="width: 43px; height: 30px"></el-input>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="端口号:" :label-width="formLabelWidth" prop="tdpz_port">
|
||||
<el-input v-model="FormData.tdpz_port" placeholder="" style="width: 200px; height: 30px"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="超过时间(ms):" :label-width="formLabelWidth" prop="tdpz_cssj">
|
||||
<el-input v-model="FormData.tdpz_cssj" placeholder="" style="width: 200px; height: 30px"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="间隔时间(ms):" :label-width="formLabelWidth" prop="tdpz_jgsj">
|
||||
<el-input v-model="FormData.tdpz_jgsj" placeholder="" style="width: 200px; height: 30px"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="轮询时间(ms):" :label-width="formLabelWidth" prop="tdpz_lxsj">
|
||||
<el-input v-model="FormData.tdpz_lxsj" placeholder="" style="width: 200px; height: 30px"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="重复次数:" :label-width="formLabelWidth" prop="tdpz_cfcs">
|
||||
<el-input v-model="FormData.tdpz_cfcs" placeholder="" style="width: 200px; height: 30px"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<div class="super_parmams">
|
||||
<h3>高级参数</h3>
|
||||
<div>
|
||||
<i class="el-icon-caret-bottom" v-if="is_retract"></i>
|
||||
<i class="el-icon-caret-top" v-else="is_retract"></i>
|
||||
<el-button type="text" plain @click="getRetract" style="
|
||||
width: 28px;
|
||||
border: none;
|
||||
color: rgba(16, 16, 16, 1);
|
||||
font-size: 14px;
|
||||
text-align: left;
|
||||
">
|
||||
收起</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="super_con" v-show="is_retract">
|
||||
<el-form :label-position="labelPosition" :rules="rules" ref="ruleForm">
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item>
|
||||
<el-checkbox v-model="FormData.tdpz_watchtime">watch time(s)</el-checkbox>
|
||||
<el-input v-model="input1" placeholder="" style="width: 200px; height: 30px"
|
||||
:disabled="isdisabled"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item>
|
||||
<el-checkbox v-model="FormData.tdpz_cjsylxdz">采集使用连续地址</el-checkbox>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="读写占空比:" :label-width="formLabelWidth">
|
||||
<el-row>
|
||||
<el-col :span="10">
|
||||
<el-input v-model="tdpz_dxzkb1" style="width: 91px; height: 30px"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="4">: </el-col>
|
||||
<el-col :span="10">
|
||||
<el-input v-model="tdpz_dxzkb2" style="width: 91px; height: 30px"></el-input>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="05/0F:" :label-width="formLabelWidth">
|
||||
<el-row>
|
||||
<el-col :span="8"><el-radio v-model="FormData.tdpz_050F" label="auto">auto</el-radio></el-col>
|
||||
<el-col :span="8"><el-radio v-model="FormData.tdpz_050F" label="05">05</el-radio></el-col>
|
||||
<el-col :span="8"><el-radio v-model="FormData.tdpz_050F" label="0F">0F</el-radio></el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="06/10:" :label-width="formLabelWidth">
|
||||
<el-row>
|
||||
<el-col :span="8"><el-radio v-model="FormData.tdpz_0610" label="auto">auto</el-radio></el-col>
|
||||
<el-col :span="8"><el-radio v-model="FormData.tdpz_0610" label="06">06</el-radio></el-col>
|
||||
<el-col :span="8"><el-radio v-model="FormData.tdpz_0610" label="10">10</el-radio></el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</div>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="saveGate">保 存</el-button>
|
||||
<el-button @click="add_passage = false">取 消</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
<div class="drvieName_All" v-show="diag_drive">
|
||||
<div class="title">
|
||||
<p class="title_l">协议选择</p>
|
||||
<i class="el-icon-close title_r" @click="diag_drive = false"></i>
|
||||
</div>
|
||||
<el-divider></el-divider>
|
||||
<el-tree :data="datas2" :props="defaultProps" @node-click="handleDetailClick" default-expand-all></el-tree>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { SaveUserAnswer, GetUserAnswer } from "@/api/user";
|
||||
import { Loading } from "element-ui";
|
||||
|
||||
export default {
|
||||
name: "TestTreeView",
|
||||
|
||||
data() {
|
||||
return {
|
||||
flag: false,
|
||||
gateway: JSON.parse(localStorage.getItem("tree"))[0].label,
|
||||
FormData: {
|
||||
tdpz_tdmc: "有线区Channel1",
|
||||
tdpz_td: "网口",
|
||||
tdpz_qdmc: "ModbusTCPClient",
|
||||
tdpz_port: "",
|
||||
tdpz_cssj: "",
|
||||
tdpz_jgsj: "",
|
||||
tdpz_lxsj: "",
|
||||
tdpz_cfcs: "",
|
||||
tdpz_watchtime: true,
|
||||
tdpz_cjsylxdz: false,
|
||||
tdpz_dxzkb: "",
|
||||
tdpz_050F: "auto",
|
||||
tdpz_0610: "auto",
|
||||
},
|
||||
tdpz_dxzkb1: "1",
|
||||
tdpz_dxzkb2: "1",
|
||||
tdpz_ip1: "",
|
||||
tdpz_ip2: "",
|
||||
tdpz_ip3: "",
|
||||
tdpz_ip4: "",
|
||||
options1: [
|
||||
{
|
||||
value: "有线区Channel1",
|
||||
label: "有线区Channel1",
|
||||
},
|
||||
{
|
||||
value: "无线区Channel1",
|
||||
label: "无线区Channel1",
|
||||
},
|
||||
],
|
||||
options2: [
|
||||
{
|
||||
value: "网口",
|
||||
label: "网口",
|
||||
},
|
||||
{
|
||||
value: "串口",
|
||||
label: "串口",
|
||||
},
|
||||
],
|
||||
value1: "有线区Channel1",
|
||||
value2: "网口",
|
||||
diag_drive: false,
|
||||
isdisabled: true,
|
||||
radio: "1",
|
||||
is_retract: true,
|
||||
labelPosition: "left",
|
||||
formLabelWidth: "116px",
|
||||
input1: 192,
|
||||
add_passage: false,
|
||||
rightMenu: "",
|
||||
dialogVisible: true,
|
||||
menuShow: false,
|
||||
datas: [],
|
||||
datas2: [
|
||||
{
|
||||
label: "通用标准",
|
||||
children: [
|
||||
{
|
||||
label: "ModbusTCPClient",
|
||||
},
|
||||
{
|
||||
label: "ModbusRTU_over_TCP",
|
||||
},
|
||||
{
|
||||
label: "OPCUAClient",
|
||||
},
|
||||
{
|
||||
label: "OPCDAClient",
|
||||
},
|
||||
{
|
||||
label: "MQTTClient",
|
||||
},
|
||||
{
|
||||
label: "OPCXMLDAClient",
|
||||
},
|
||||
{
|
||||
label: "环保212协议网口监听",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "PLC",
|
||||
children: [
|
||||
{
|
||||
label: "Slemens S7-200 Network",
|
||||
},
|
||||
{
|
||||
label: "Slemens S7-300 Network",
|
||||
},
|
||||
{
|
||||
label: "Slemens S7-400 Network",
|
||||
},
|
||||
{
|
||||
label: "Slemens S7-1200 Network",
|
||||
},
|
||||
{
|
||||
label: "Slemens S7-1500 Network",
|
||||
},
|
||||
{
|
||||
label: "EtherNet/IP CIP协议(AB OMR ON)",
|
||||
},
|
||||
{
|
||||
label: "MC_Qna-3E(三菱 基恩士 松下)",
|
||||
},
|
||||
{
|
||||
label: "MC_A-1E_Binary",
|
||||
},
|
||||
{
|
||||
label: "OMRON-FINS",
|
||||
},
|
||||
{
|
||||
label: "横河PLC",
|
||||
},
|
||||
{
|
||||
label: "西门子FetchWirte",
|
||||
},
|
||||
{
|
||||
label: "富机 FUJI_SPH_NET",
|
||||
},
|
||||
{
|
||||
label: "基恩士上位链路通讯",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "智能建筑",
|
||||
children: [],
|
||||
},
|
||||
{
|
||||
label: "厂家定制",
|
||||
children: [],
|
||||
},
|
||||
{
|
||||
label: "电力行业标准",
|
||||
children: [
|
||||
{
|
||||
label: "IEC104",
|
||||
},
|
||||
{
|
||||
label: "DLT645_over_TCP",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "CNC数控",
|
||||
children: [],
|
||||
},
|
||||
{
|
||||
label: "私有协议",
|
||||
children: [],
|
||||
},
|
||||
],
|
||||
defaultProps: {
|
||||
children: "children",
|
||||
label: "label",
|
||||
},
|
||||
rules: {
|
||||
tdpz_tdmc: [
|
||||
{ required: true, message: "请输入通道名称", trigger: "change" },
|
||||
],
|
||||
tdpz_td: [{ required: true, message: "请输入通道", trigger: "change" }],
|
||||
tdpz_qdmc: [
|
||||
{ required: true, message: "请输入驱动名称", trigger: "change" },
|
||||
],
|
||||
tdpz_ip: [{ required: true, message: "请输入ip地址", trigger: "blur" }],
|
||||
tdpz_port: [
|
||||
{ required: true, message: "请输入端口号", trigger: "blur" },
|
||||
],
|
||||
tdpz_cssj: [
|
||||
{ required: true, message: "请输入超出时间", trigger: "blur" },
|
||||
],
|
||||
tdpz_jgsj: [
|
||||
{ required: true, message: "请输入间隔时间", trigger: "blur" },
|
||||
],
|
||||
tdpz_lxsj: [
|
||||
{ required: true, message: "请输入轮询时间", trigger: "blur" },
|
||||
],
|
||||
tdpz_cfcs: [
|
||||
{ required: true, message: "请输入重复次数", trigger: "blur" },
|
||||
],
|
||||
},
|
||||
};
|
||||
},
|
||||
created() {
|
||||
console.log(this.$store.state.tree);
|
||||
},
|
||||
methods: {
|
||||
//编辑
|
||||
edit(event) {
|
||||
this.flag = true;
|
||||
},
|
||||
//完成编辑
|
||||
done(event) {
|
||||
this.flag = false;
|
||||
let tree = this.$store.state.tree;
|
||||
tree[0].label = this.gateway;
|
||||
this.$store.commit("setTree", tree);
|
||||
},
|
||||
rightClick(e, data, node) {
|
||||
this.menuShow = false;
|
||||
this.menuShow = true;
|
||||
e.preventDefault(); //关闭浏览器右键默认事件
|
||||
this.rightMenu = { top: e.pageY + "px", left: e.pageX + "px" };
|
||||
document.addEventListener("click", (ev) => {
|
||||
ev.stopImmediatePropagation();
|
||||
if (ev.target !== document.querySelector(".el-menu-item.is-active")) {
|
||||
this.foo();
|
||||
}
|
||||
});
|
||||
},
|
||||
// 点击时候的判断,判断是否为新增网关
|
||||
selectMenuNode(index, indexPath) {
|
||||
console.log(index);
|
||||
if (index == 1) {
|
||||
this.add_passage = true;
|
||||
}
|
||||
},
|
||||
foo() {
|
||||
// 取消鼠标监听事件 菜单栏
|
||||
this.menuShow = false;
|
||||
document.removeEventListener("click", this.foo); // 关掉监听，
|
||||
},
|
||||
treeNodeClick(key) {
|
||||
// console.log
|
||||
this.foo();
|
||||
},
|
||||
// 收起点击事件的判断
|
||||
getRetract() {
|
||||
if (this.is_retract == true) {
|
||||
this.is_retract = false;
|
||||
} else {
|
||||
this.is_retract = true;
|
||||
}
|
||||
},
|
||||
getDriveName() {
|
||||
this.diag_drive = true;
|
||||
},
|
||||
Merge(value, value1, value2, value3, value4) {
|
||||
value = value1 + "." + value2 + "." + value3 + "." + value4;
|
||||
return value;
|
||||
},
|
||||
async saveGate() {
|
||||
this.add_passage = false;
|
||||
var obj = {
|
||||
tdpz_tdmc: this.FormData.tdpz_tdmc,
|
||||
tdpz_td: this.FormData.tdpz_td,
|
||||
tdpz_qdmc: this.FormData.tdpz_qdmc,
|
||||
tdpz_port: this.FormData.tdpz_port,
|
||||
tdpz_ccsj: this.FormData.tdpz_cssj,
|
||||
tdpz_jgsj: this.FormData.tdpz_jgsj,
|
||||
tdpz_ip: this.tdpz_ip1 + "." + this.tdpz_ip2 + "." + this.tdpz_ip3 + "." + this.tdpz_ip4,
|
||||
tdpz_lxsj: this.FormData.tdpz_lxsj,
|
||||
tdpz_cfcs: this.FormData.tdpz_cfcs,
|
||||
tdpz_watchtime: String(Number(this.FormData.tdpz_watchtime)),
|
||||
tdpz_cjsylxdz: String(Number(this.FormData.tdpz_cjsylxdz)),
|
||||
tdpz_dxzkb: this.tdpz_dxzkb1 + ":" + this.tdpz_dxzkb2,
|
||||
tdpz_050F: this.FormData.tdpz_050F,
|
||||
tdpz_0610: this.FormData.tdpz_0610,
|
||||
}
|
||||
let datas = sessionStorage.getItem("DB-IotLite_yx");
|
||||
datas = { ...JSON.parse(datas), ...obj };
|
||||
let res = await SaveUserAnswer({
|
||||
mark: "DB-IotLite_yx",
|
||||
user_id: "USER202307301109254198",
|
||||
mark_value: JSON.stringify(datas),
|
||||
});
|
||||
if (res.status == 200) {
|
||||
this.$message({
|
||||
message: '保存成功',
|
||||
type: 'success'
|
||||
});
|
||||
}
|
||||
sessionStorage.setItem("DB-IotLite_yx", JSON.stringify(datas));
|
||||
console.log(res);
|
||||
console.log(res.data.data.mark_value);
|
||||
// this.$router.push("/dbcollectdevice");
|
||||
// const newChild = { id: id++, label: `${this.$store.state.tree}`, children: [] };
|
||||
// if (!data.children) {
|
||||
// this.$set(data, 'children', []);
|
||||
// }
|
||||
// data.children.push(newChild);
|
||||
|
||||
},
|
||||
handleDetailClick(data, node, value) {
|
||||
console.log(data.label);
|
||||
this.FormData.tdpz_qdmc = data.label;
|
||||
this.diag_drive = false;
|
||||
},
|
||||
async GetUserAnswer() {
|
||||
let answer = await GetUserAnswer({
|
||||
mark: "DB-IotLite_yx",
|
||||
user_id: "USER202307301109254198",
|
||||
});
|
||||
console.log(answer);
|
||||
let obj = JSON.parse(answer.data.data.mark_value);
|
||||
console.log(obj);
|
||||
// this.FormData.
|
||||
if (obj.tdpz_dxzkb) {
|
||||
this.tdpz_dxzkb1 = obj.tdpz_dxzkb.split(":")[0];
|
||||
this.tdpz_dxzkb2 = obj.tdpz_dxzkb.split(":")[1];
|
||||
}
|
||||
this.FormData.tdpz_watchtime = Boolean(Number(obj.tdpz_watchtime));
|
||||
// console.log(this.FormData.tdpz_watchtime);
|
||||
this.FormData.tdpz_cjsylxdz = Boolean(Number(obj.tdpz_cjsylxdz));
|
||||
if (obj.tdpz_ip) {
|
||||
this.tdpz_ip1 = obj.tdpz_ip.split(".")[0];
|
||||
this.tdpz_ip2 = obj.tdpz_ip.split(".")[1];
|
||||
this.tdpz_ip3 = obj.tdpz_ip.split(".")[2];
|
||||
this.tdpz_ip4 = obj.tdpz_ip.split(".")[3];
|
||||
}
|
||||
this.FormData.tdpz_tdmc = obj.tdpz_tdmc;
|
||||
this.FormData.tdpz_td = obj.tdpz_td;
|
||||
this.FormData.tdpz_qdmc = obj.tdpz_qdmc;
|
||||
this.FormData.tdpz_050F = obj.tdpz_050F;
|
||||
this.FormData.tdpz_0610 = obj.tdpz_0610;
|
||||
this.FormData.tdpz_port = obj.tdpz_port;
|
||||
this.FormData.tdpz_cssj = obj.tdpz_cssj;
|
||||
this.FormData.tdpz_jgsj = obj.tdpz_jgsj;
|
||||
this.FormData.tdpz_lxsj = obj.tdpz_lxsj;
|
||||
this.FormData.tdpz_cfcs = obj.tdpz_cfcs;
|
||||
},
|
||||
renderContent(h, { node, data, store }) {
|
||||
return (
|
||||
<span class="custom-tree-node">
|
||||
<span>{node.label}</span>
|
||||
</span>);
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.Loading = true;
|
||||
this.GetUserAnswer();
|
||||
this.Loading = false;
|
||||
// let res2 = GetUserAnswer()
|
||||
},
|
||||
|
||||
watch: {
|
||||
// "FormData.tdpz_watchtime": {
|
||||
// handler(old) {
|
||||
// if (old) {
|
||||
// this.isdisabled = false;
|
||||
// } else {
|
||||
// this.isdisabled = true;
|
||||
// }
|
||||
// },
|
||||
// },
|
||||
"FormData.tdpz_watchtime"(newval) {
|
||||
console.log(newval);
|
||||
if (newval) {
|
||||
this.isdisabled = true;
|
||||
} else {
|
||||
this.isdisabled = false;
|
||||
}
|
||||
},
|
||||
},
|
||||
directives: {
|
||||
clickoutside: {
|
||||
bind: function (el, binding, vnode) {
|
||||
function documentHandler(e) {
|
||||
if (el.contains(e.target)) {
|
||||
return false;
|
||||
}
|
||||
if (binding.expression) {
|
||||
binding.value(e);
|
||||
}
|
||||
}
|
||||
el._vueClickOutside_ = documentHandler;
|
||||
document.addEventListener("click", documentHandler);
|
||||
},
|
||||
unbind: function (el, binding) {
|
||||
document.removeEventListener("click", el._vueClickOutside_);
|
||||
delete el._vueClickOutside_;
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.tree_menu {
|
||||
position: absolute;
|
||||
width: 286px;
|
||||
left: 64px;
|
||||
top: 104px;
|
||||
width: 286px;
|
||||
height: 753px;
|
||||
line-height: 20px;
|
||||
border-radius: 3px;
|
||||
background-color: rgba(255, 255, 255, 1);
|
||||
text-align: center;
|
||||
border: 1px solid rgba(220, 220, 220, 1);
|
||||
}
|
||||
|
||||
.tree_rightmenu {
|
||||
position: fixed;
|
||||
width: 120px;
|
||||
border: 1px solid rgba(0, 0, 0, 0.15);
|
||||
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.super_parmams {
|
||||
display: flex;
|
||||
color: #fff !important;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: 668px;
|
||||
|
||||
i {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
/deep/ .pas_params {
|
||||
.el-col-12:last-child {
|
||||
padding-right: 150px;
|
||||
}
|
||||
|
||||
.el-col-12:first-child {
|
||||
padding-right: 38px;
|
||||
}
|
||||
|
||||
.el-input__inner {
|
||||
height: 30px;
|
||||
text-align: left;
|
||||
padding: 0px 8px;
|
||||
}
|
||||
|
||||
.el-row {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
|
||||
.el-col-1 {
|
||||
color: #fff !important;
|
||||
text-align: center;
|
||||
line-height: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.el-col-6 {
|
||||
height: 40px;
|
||||
top: 6px;
|
||||
left: 77px;
|
||||
position: relative;
|
||||
width: 50px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.super_con {
|
||||
.el-col-12:last-child {
|
||||
padding-right: 28px;
|
||||
}
|
||||
|
||||
.el-col-12:first-child {
|
||||
padding-right: 42px;
|
||||
}
|
||||
|
||||
.el-input__inner {
|
||||
text-align: left;
|
||||
padding: 0 8px;
|
||||
}
|
||||
|
||||
.el-row {
|
||||
color: #fff !important;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
|
||||
.el-col-4 {
|
||||
padding-left: 5px;
|
||||
width: 14px;
|
||||
text-align: center;
|
||||
line-height: 4px;
|
||||
height: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.el-dialog__footer {
|
||||
padding: 18px 1.25rem 50px;
|
||||
}
|
||||
|
||||
.dialog-footer {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
bottom: 45px;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
/deep/ .drvieName_All {
|
||||
position: absolute;
|
||||
left: 1408px;
|
||||
top: 140px;
|
||||
width: 435px;
|
||||
max-height: 720px;
|
||||
z-index: 10000;
|
||||
border: 1px solid #f5f5f5;
|
||||
|
||||
.title {
|
||||
background-color: #fff;
|
||||
padding: 5px 6px 5px 25px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.title_l {
|
||||
width: 103px;
|
||||
height: 26px;
|
||||
color: rgba(16, 16, 16, 1);
|
||||
font-size: 18px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.title_r {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
line-height: 24px;
|
||||
cursor: pointer;
|
||||
color: rgba(111, 103, 103, 1);
|
||||
}
|
||||
}
|
||||
|
||||
// h3 {
|
||||
// padding-bottom: 10px;
|
||||
// background-color: #fff;
|
||||
// }
|
||||
|
||||
.el-divider--horizontal {
|
||||
margin: 0px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,753 @@
|
|||
<!-- 网关通道 -->
|
||||
<template>
|
||||
<div>
|
||||
<!-- v-click-outside="closeMenu" -->
|
||||
<div>
|
||||
<div class="tree_menu" v-show="dialogVisible">
|
||||
<el-tree :data="$store.state.tree" :props="defaultProps" default-expand-all @node-contextmenu="rightClick"
|
||||
@node-click="treeNodeClick" ref="tree" :render-content="renderContent">
|
||||
<span class="custom-tree-node" slot-scope="{ node, data }">
|
||||
<template v-if="data.editing == 1">
|
||||
<el-button type="mini" v-if="flag" style="right: 50px; top: 0; position: absolute; border: none"
|
||||
@click.stop="done">完成</el-button>
|
||||
<el-button type="mini" style="right: 0; top: 0; position: absolute; border: none"
|
||||
@click.stop="edit">编辑</el-button>
|
||||
<span v-if="!flag">{{ data.label }}</span>
|
||||
<el-input v-else style="width: 150px" v-model="gateway"></el-input>
|
||||
</template>
|
||||
<template v-else>{{ data.label }}</template>
|
||||
</span>
|
||||
</el-tree>
|
||||
<!-- 树形控件右键组件 -->
|
||||
<div v-show="menuShow" class="tree_rightmenu" :style="{ ...rightMenu }">
|
||||
<el-menu class="el-menu-vertical-demo" @select="selectMenuNode" default-active="#0078FE">
|
||||
<el-menu-item id="menuitem" index="1" style="font-size: 12px">
|
||||
<span slot="title">新建通道</span>
|
||||
</el-menu-item>
|
||||
<el-menu-item index="2" style="font-size: 12px">
|
||||
<span slot="title">取 消</span>
|
||||
</el-menu-item>
|
||||
</el-menu>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pas_params">
|
||||
<el-dialog title="通道参数设置" :visible.sync="add_passage" width="765px" v-loading="Loading">
|
||||
<el-form :model="FormData" :label-position="labelPosition" :rules="rules" ref="ruleForm">
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="通道名称:" :label-width="formLabelWidth" prop="tdpz_tdmc">
|
||||
<el-select v-model="FormData.tdpz_tdmc" placeholder="" style="width: 200px; height: 30px">
|
||||
<el-option v-for="(item, index) in options1" :key="index" :label="item.label" :value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="通道:" :label-width="formLabelWidth" prop="tdpz_td">
|
||||
<el-select v-model="FormData.tdpz_td" placeholder="" style="width: 200px; height: 30px">
|
||||
<el-option v-for="(item, index) in options2" :key="index" :label="item.label" :value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="驱动名称:" :label-width="formLabelWidth" prop="tdpz_qdmc">
|
||||
<el-row>
|
||||
<el-col :span="18">
|
||||
<el-input v-model="FormData.tdpz_qdmc" placeholder="" style="width: 200px; height: 30px"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-button style="width: 50px; height: 30px" @click="getDriveName">...</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="IP地址:" :label-width="formLabelWidth" prop="tdpz_ip">
|
||||
<el-row>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="tdpz_ip1" style="width: 43px; height: 30px"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1" style="color: #fff">. </el-col>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="tdpz_ip2" style="width: 43px; height: 30px"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1" style="color: #fff">.</el-col>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="tdpz_ip3" style="width: 43px; height: 30px"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1" style="color: #fff">.</el-col>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="tdpz_ip4" style="width: 43px; height: 30px"></el-input>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="端口号:" :label-width="formLabelWidth" prop="tdpz_port">
|
||||
<el-input v-model="FormData.tdpz_port" placeholder="" style="width: 200px; height: 30px"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="超过时间(ms):" :label-width="formLabelWidth" prop="tdpz_cssj">
|
||||
<el-input v-model="FormData.tdpz_cssj" placeholder="" style="width: 200px; height: 30px"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="间隔时间(ms):" :label-width="formLabelWidth" prop="tdpz_jgsj">
|
||||
<el-input v-model="FormData.tdpz_jgsj" placeholder="" style="width: 200px; height: 30px"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="轮询时间(ms):" :label-width="formLabelWidth" prop="tdpz_lxsj">
|
||||
<el-input v-model="FormData.tdpz_lxsj" placeholder="" style="width: 200px; height: 30px"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="重复次数:" :label-width="formLabelWidth" prop="tdpz_cfcs">
|
||||
<el-input v-model="FormData.tdpz_cfcs" placeholder="" style="width: 200px; height: 30px"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<div class="super_parmams">
|
||||
<h3>高级参数</h3>
|
||||
<div>
|
||||
<i class="el-icon-caret-bottom" v-if="is_retract"></i>
|
||||
<i class="el-icon-caret-top" v-else="is_retract"></i>
|
||||
<el-button type="text" plain @click="getRetract" style="
|
||||
width: 28px;
|
||||
border: none;
|
||||
color: rgba(16, 16, 16, 1);
|
||||
font-size: 14px;
|
||||
text-align: left;
|
||||
">
|
||||
收起</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="super_con" v-show="is_retract">
|
||||
<el-form :label-position="labelPosition" :rules="rules" ref="ruleForm">
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item>
|
||||
<el-checkbox v-model="FormData.tdpz_watchtime">watch time(s)</el-checkbox>
|
||||
<el-input v-model="input1" placeholder="" style="width: 200px; height: 30px"
|
||||
:disabled="isdisabled"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item>
|
||||
<el-checkbox v-model="FormData.tdpz_cjsylxdz">采集使用连续地址</el-checkbox>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="读写占空比:" :label-width="formLabelWidth">
|
||||
<el-row>
|
||||
<el-col :span="10">
|
||||
<el-input v-model="tdpz_dxzkb1" style="width: 91px; height: 30px"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="4">: </el-col>
|
||||
<el-col :span="10">
|
||||
<el-input v-model="tdpz_dxzkb2" style="width: 91px; height: 30px"></el-input>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="05/0F:" :label-width="formLabelWidth">
|
||||
<el-row>
|
||||
<el-col :span="8"><el-radio v-model="FormData.tdpz_050F" label="auto">auto</el-radio></el-col>
|
||||
<el-col :span="8"><el-radio v-model="FormData.tdpz_050F" label="05">05</el-radio></el-col>
|
||||
<el-col :span="8"><el-radio v-model="FormData.tdpz_050F" label="0F">0F</el-radio></el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="06/10:" :label-width="formLabelWidth">
|
||||
<el-row>
|
||||
<el-col :span="8"><el-radio v-model="FormData.tdpz_0610" label="auto">auto</el-radio></el-col>
|
||||
<el-col :span="8"><el-radio v-model="FormData.tdpz_0610" label="06">06</el-radio></el-col>
|
||||
<el-col :span="8"><el-radio v-model="FormData.tdpz_0610" label="10">10</el-radio></el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</div>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="saveGate">保 存</el-button>
|
||||
<el-button @click="add_passage = false">取 消</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
<div class="drvieName_All" v-show="diag_drive">
|
||||
<div class="title">
|
||||
<p class="title_l">协议选择</p>
|
||||
<i class="el-icon-close title_r" @click="diag_drive = false"></i>
|
||||
</div>
|
||||
<el-divider></el-divider>
|
||||
<el-tree :data="datas2" :props="defaultProps" @node-click="handleDetailClick" default-expand-all></el-tree>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { SaveUserAnswer, GetUserAnswer } from "@/api/user";
|
||||
import { Loading } from "element-ui";
|
||||
|
||||
export default {
|
||||
name: "TestTreeView",
|
||||
|
||||
data() {
|
||||
return {
|
||||
flag: false,
|
||||
gateway: JSON.parse(localStorage.getItem("tree"))[0].label,
|
||||
FormData: {
|
||||
tdpz_tdmc: "有线区Channel1",
|
||||
tdpz_td: "网口",
|
||||
tdpz_qdmc: "ModbusTCPClient",
|
||||
tdpz_port: "",
|
||||
tdpz_cssj: "",
|
||||
tdpz_jgsj: "",
|
||||
tdpz_lxsj: "",
|
||||
tdpz_cfcs: "",
|
||||
tdpz_watchtime: true,
|
||||
tdpz_cjsylxdz: false,
|
||||
tdpz_dxzkb: "",
|
||||
tdpz_050F: "auto",
|
||||
tdpz_0610: "auto",
|
||||
},
|
||||
tdpz_dxzkb1: "1",
|
||||
tdpz_dxzkb2: "1",
|
||||
tdpz_ip1: "",
|
||||
tdpz_ip2: "",
|
||||
tdpz_ip3: "",
|
||||
tdpz_ip4: "",
|
||||
options1: [
|
||||
{
|
||||
value: "有线区Channel1",
|
||||
label: "有线区Channel1",
|
||||
},
|
||||
{
|
||||
value: "无线区Channel1",
|
||||
label: "无线区Channel1",
|
||||
},
|
||||
],
|
||||
options2: [
|
||||
{
|
||||
value: "网口",
|
||||
label: "网口",
|
||||
},
|
||||
{
|
||||
value: "串口",
|
||||
label: "串口",
|
||||
},
|
||||
],
|
||||
value1: "有线区Channel1",
|
||||
value2: "网口",
|
||||
diag_drive: false,
|
||||
isdisabled: true,
|
||||
radio: "1",
|
||||
is_retract: true,
|
||||
labelPosition: "left",
|
||||
formLabelWidth: "116px",
|
||||
input1: 192,
|
||||
add_passage: false,
|
||||
rightMenu: "",
|
||||
dialogVisible: true,
|
||||
menuShow: false,
|
||||
datas: [],
|
||||
datas2: [
|
||||
{
|
||||
label: "通用标准",
|
||||
children: [
|
||||
{
|
||||
label: "ModbusTCPClient",
|
||||
},
|
||||
{
|
||||
label: "ModbusRTU_over_TCP",
|
||||
},
|
||||
{
|
||||
label: "OPCUAClient",
|
||||
},
|
||||
{
|
||||
label: "OPCDAClient",
|
||||
},
|
||||
{
|
||||
label: "MQTTClient",
|
||||
},
|
||||
{
|
||||
label: "OPCXMLDAClient",
|
||||
},
|
||||
{
|
||||
label: "环保212协议网口监听",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "PLC",
|
||||
children: [
|
||||
{
|
||||
label: "Slemens S7-200 Network",
|
||||
},
|
||||
{
|
||||
label: "Slemens S7-300 Network",
|
||||
},
|
||||
{
|
||||
label: "Slemens S7-400 Network",
|
||||
},
|
||||
{
|
||||
label: "Slemens S7-1200 Network",
|
||||
},
|
||||
{
|
||||
label: "Slemens S7-1500 Network",
|
||||
},
|
||||
{
|
||||
label: "EtherNet/IP CIP协议(AB OMR ON)",
|
||||
},
|
||||
{
|
||||
label: "MC_Qna-3E(三菱 基恩士 松下)",
|
||||
},
|
||||
{
|
||||
label: "MC_A-1E_Binary",
|
||||
},
|
||||
{
|
||||
label: "OMRON-FINS",
|
||||
},
|
||||
{
|
||||
label: "横河PLC",
|
||||
},
|
||||
{
|
||||
label: "西门子FetchWirte",
|
||||
},
|
||||
{
|
||||
label: "富机 FUJI_SPH_NET",
|
||||
},
|
||||
{
|
||||
label: "基恩士上位链路通讯",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "智能建筑",
|
||||
children: [],
|
||||
},
|
||||
{
|
||||
label: "厂家定制",
|
||||
children: [],
|
||||
},
|
||||
{
|
||||
label: "电力行业标准",
|
||||
children: [
|
||||
{
|
||||
label: "IEC104",
|
||||
},
|
||||
{
|
||||
label: "DLT645_over_TCP",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "CNC数控",
|
||||
children: [],
|
||||
},
|
||||
{
|
||||
label: "私有协议",
|
||||
children: [],
|
||||
},
|
||||
],
|
||||
defaultProps: {
|
||||
children: "children",
|
||||
label: "label",
|
||||
},
|
||||
rules: {
|
||||
tdpz_tdmc: [
|
||||
{ required: true, message: "请输入通道名称", trigger: "change" },
|
||||
],
|
||||
tdpz_td: [{ required: true, message: "请输入通道", trigger: "change" }],
|
||||
tdpz_qdmc: [
|
||||
{ required: true, message: "请输入驱动名称", trigger: "change" },
|
||||
],
|
||||
tdpz_ip: [{ required: true, message: "请输入ip地址", trigger: "blur" }],
|
||||
tdpz_port: [
|
||||
{ required: true, message: "请输入端口号", trigger: "blur" },
|
||||
],
|
||||
tdpz_cssj: [
|
||||
{ required: true, message: "请输入超出时间", trigger: "blur" },
|
||||
],
|
||||
tdpz_jgsj: [
|
||||
{ required: true, message: "请输入间隔时间", trigger: "blur" },
|
||||
],
|
||||
tdpz_lxsj: [
|
||||
{ required: true, message: "请输入轮询时间", trigger: "blur" },
|
||||
],
|
||||
tdpz_cfcs: [
|
||||
{ required: true, message: "请输入重复次数", trigger: "blur" },
|
||||
],
|
||||
},
|
||||
};
|
||||
},
|
||||
created() {
|
||||
console.log(this.$store.state.tree);
|
||||
},
|
||||
methods: {
|
||||
//编辑
|
||||
edit(event) {
|
||||
this.flag = true;
|
||||
},
|
||||
//完成编辑
|
||||
done(event) {
|
||||
this.flag = false;
|
||||
let tree = this.$store.state.tree;
|
||||
tree[0].label = this.gateway;
|
||||
this.$store.commit("setTree", tree);
|
||||
},
|
||||
rightClick(e, data, node) {
|
||||
this.menuShow = false;
|
||||
this.menuShow = true;
|
||||
e.preventDefault(); //关闭浏览器右键默认事件
|
||||
this.rightMenu = { top: e.pageY + "px", left: e.pageX + "px" };
|
||||
document.addEventListener("click", (ev) => {
|
||||
ev.stopImmediatePropagation();
|
||||
if (ev.target !== document.querySelector(".el-menu-item.is-active")) {
|
||||
this.foo();
|
||||
}
|
||||
});
|
||||
},
|
||||
// 点击时候的判断,判断是否为新增网关
|
||||
selectMenuNode(index, indexPath) {
|
||||
console.log(index);
|
||||
if (index == 1) {
|
||||
this.add_passage = true;
|
||||
}
|
||||
},
|
||||
foo() {
|
||||
// 取消鼠标监听事件 菜单栏
|
||||
this.menuShow = false;
|
||||
document.removeEventListener("click", this.foo); // 关掉监听，
|
||||
},
|
||||
treeNodeClick(key) {
|
||||
// console.log
|
||||
this.foo();
|
||||
},
|
||||
// 收起点击事件的判断
|
||||
getRetract() {
|
||||
if (this.is_retract == true) {
|
||||
this.is_retract = false;
|
||||
} else {
|
||||
this.is_retract = true;
|
||||
}
|
||||
},
|
||||
getDriveName() {
|
||||
this.diag_drive = true;
|
||||
},
|
||||
Merge(value, value1, value2, value3, value4) {
|
||||
value = value1 + "." + value2 + "." + value3 + "." + value4;
|
||||
return value;
|
||||
},
|
||||
async saveGate() {
|
||||
this.add_passage = false;
|
||||
var obj = {
|
||||
tdpz_tdmc: this.FormData.tdpz_tdmc,
|
||||
tdpz_td: this.FormData.tdpz_td,
|
||||
tdpz_qdmc: this.FormData.tdpz_qdmc,
|
||||
tdpz_port: this.FormData.tdpz_port,
|
||||
tdpz_ccsj: this.FormData.tdpz_cssj,
|
||||
tdpz_jgsj: this.FormData.tdpz_jgsj,
|
||||
tdpz_ip: this.tdpz_ip1 + "." + this.tdpz_ip2 + "." + this.tdpz_ip3 + "." + this.tdpz_ip4,
|
||||
tdpz_lxsj: this.FormData.tdpz_lxsj,
|
||||
tdpz_cfcs: this.FormData.tdpz_cfcs,
|
||||
tdpz_watchtime: String(Number(this.FormData.tdpz_watchtime)),
|
||||
tdpz_cjsylxdz: String(Number(this.FormData.tdpz_cjsylxdz)),
|
||||
tdpz_dxzkb: this.tdpz_dxzkb1 + ":" + this.tdpz_dxzkb2,
|
||||
tdpz_050F: this.FormData.tdpz_050F,
|
||||
tdpz_0610: this.FormData.tdpz_0610,
|
||||
}
|
||||
let datas = sessionStorage.getItem("DB-IotLite_yx");
|
||||
datas = { ...JSON.parse(datas), ...obj };
|
||||
let res = await SaveUserAnswer({
|
||||
mark: "DB-IotLite_yx",
|
||||
user_id: "USER202307301109254198",
|
||||
mark_value: JSON.stringify(datas),
|
||||
});
|
||||
if (res.status == 200) {
|
||||
this.$message({
|
||||
message: '保存成功',
|
||||
type: 'success'
|
||||
});
|
||||
}
|
||||
sessionStorage.setItem("DB-IotLite_yx", JSON.stringify(datas));
|
||||
console.log(res);
|
||||
console.log(res.data.data.mark_value);
|
||||
// this.$router.push("/dbcollectdevice");
|
||||
// const newChild = { id: id++, label: `${this.$store.state.tree}`, children: [] };
|
||||
// if (!data.children) {
|
||||
// this.$set(data, 'children', []);
|
||||
// }
|
||||
// data.children.push(newChild);
|
||||
|
||||
},
|
||||
handleDetailClick(data, node, value) {
|
||||
console.log(data.label);
|
||||
this.FormData.tdpz_qdmc = data.label;
|
||||
this.diag_drive = false;
|
||||
},
|
||||
async GetUserAnswer() {
|
||||
let answer = await GetUserAnswer({
|
||||
mark: "DB-IotLite_yx",
|
||||
user_id: "USER202307301109254198",
|
||||
});
|
||||
console.log(answer);
|
||||
let obj = JSON.parse(answer.data.data.mark_value);
|
||||
console.log(obj);
|
||||
// this.FormData.
|
||||
if (obj.tdpz_dxzkb) {
|
||||
this.tdpz_dxzkb1 = obj.tdpz_dxzkb.split(":")[0];
|
||||
this.tdpz_dxzkb2 = obj.tdpz_dxzkb.split(":")[1];
|
||||
}
|
||||
this.FormData.tdpz_watchtime = Boolean(Number(obj.tdpz_watchtime));
|
||||
// console.log(this.FormData.tdpz_watchtime);
|
||||
this.FormData.tdpz_cjsylxdz = Boolean(Number(obj.tdpz_cjsylxdz));
|
||||
if (obj.tdpz_ip) {
|
||||
this.tdpz_ip1 = obj.tdpz_ip.split(".")[0];
|
||||
this.tdpz_ip2 = obj.tdpz_ip.split(".")[1];
|
||||
this.tdpz_ip3 = obj.tdpz_ip.split(".")[2];
|
||||
this.tdpz_ip4 = obj.tdpz_ip.split(".")[3];
|
||||
}
|
||||
this.FormData.tdpz_tdmc = obj.tdpz_tdmc;
|
||||
this.FormData.tdpz_td = obj.tdpz_td;
|
||||
this.FormData.tdpz_qdmc = obj.tdpz_qdmc;
|
||||
this.FormData.tdpz_050F = obj.tdpz_050F;
|
||||
this.FormData.tdpz_0610 = obj.tdpz_0610;
|
||||
this.FormData.tdpz_port = obj.tdpz_port;
|
||||
this.FormData.tdpz_cssj = obj.tdpz_cssj;
|
||||
this.FormData.tdpz_jgsj = obj.tdpz_jgsj;
|
||||
this.FormData.tdpz_lxsj = obj.tdpz_lxsj;
|
||||
this.FormData.tdpz_cfcs = obj.tdpz_cfcs;
|
||||
},
|
||||
renderContent(h, { node, data, store }) {
|
||||
return (
|
||||
<span class="custom-tree-node">
|
||||
<span>{node.label}</span>
|
||||
</span>);
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.Loading = true;
|
||||
this.GetUserAnswer();
|
||||
this.Loading = false;
|
||||
// let res2 = GetUserAnswer()
|
||||
},
|
||||
|
||||
watch: {
|
||||
// "FormData.tdpz_watchtime": {
|
||||
// handler(old) {
|
||||
// if (old) {
|
||||
// this.isdisabled = false;
|
||||
// } else {
|
||||
// this.isdisabled = true;
|
||||
// }
|
||||
// },
|
||||
// },
|
||||
"FormData.tdpz_watchtime"(newval) {
|
||||
console.log(newval);
|
||||
if (newval) {
|
||||
this.isdisabled = true;
|
||||
} else {
|
||||
this.isdisabled = false;
|
||||
}
|
||||
},
|
||||
},
|
||||
directives: {
|
||||
clickoutside: {
|
||||
bind: function (el, binding, vnode) {
|
||||
function documentHandler(e) {
|
||||
if (el.contains(e.target)) {
|
||||
return false;
|
||||
}
|
||||
if (binding.expression) {
|
||||
binding.value(e);
|
||||
}
|
||||
}
|
||||
el._vueClickOutside_ = documentHandler;
|
||||
document.addEventListener("click", documentHandler);
|
||||
},
|
||||
unbind: function (el, binding) {
|
||||
document.removeEventListener("click", el._vueClickOutside_);
|
||||
delete el._vueClickOutside_;
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.tree_menu {
|
||||
position: absolute;
|
||||
width: 286px;
|
||||
left: 64px;
|
||||
top: 104px;
|
||||
width: 286px;
|
||||
height: 753px;
|
||||
line-height: 20px;
|
||||
border-radius: 3px;
|
||||
background-color: rgba(255, 255, 255, 1);
|
||||
text-align: center;
|
||||
border: 1px solid rgba(220, 220, 220, 1);
|
||||
}
|
||||
|
||||
.tree_rightmenu {
|
||||
position: fixed;
|
||||
width: 120px;
|
||||
border: 1px solid rgba(0, 0, 0, 0.15);
|
||||
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.super_parmams {
|
||||
display: flex;
|
||||
color: #fff !important;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: 668px;
|
||||
|
||||
i {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
/deep/ .pas_params {
|
||||
.el-col-12:last-child {
|
||||
padding-right: 150px;
|
||||
}
|
||||
|
||||
.el-col-12:first-child {
|
||||
padding-right: 38px;
|
||||
}
|
||||
|
||||
.el-input__inner {
|
||||
height: 30px;
|
||||
text-align: left;
|
||||
padding: 0px 8px;
|
||||
}
|
||||
|
||||
.el-row {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
|
||||
.el-col-1 {
|
||||
color: #fff !important;
|
||||
text-align: center;
|
||||
line-height: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.el-col-6 {
|
||||
height: 40px;
|
||||
top: 6px;
|
||||
left: 77px;
|
||||
position: relative;
|
||||
width: 50px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.super_con {
|
||||
.el-col-12:last-child {
|
||||
padding-right: 28px;
|
||||
}
|
||||
|
||||
.el-col-12:first-child {
|
||||
padding-right: 42px;
|
||||
}
|
||||
|
||||
.el-input__inner {
|
||||
text-align: left;
|
||||
padding: 0 8px;
|
||||
}
|
||||
|
||||
.el-row {
|
||||
color: #fff !important;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
|
||||
.el-col-4 {
|
||||
padding-left: 5px;
|
||||
width: 14px;
|
||||
text-align: center;
|
||||
line-height: 4px;
|
||||
height: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.el-dialog__footer {
|
||||
padding: 18px 1.25rem 50px;
|
||||
}
|
||||
|
||||
.dialog-footer {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
bottom: 45px;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
/deep/ .drvieName_All {
|
||||
position: absolute;
|
||||
left: 1408px;
|
||||
top: 140px;
|
||||
width: 435px;
|
||||
max-height: 720px;
|
||||
z-index: 10000;
|
||||
border: 1px solid #f5f5f5;
|
||||
|
||||
.title {
|
||||
background-color: #fff;
|
||||
padding: 5px 6px 5px 25px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.title_l {
|
||||
width: 103px;
|
||||
height: 26px;
|
||||
color: rgba(16, 16, 16, 1);
|
||||
font-size: 18px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.title_r {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
line-height: 24px;
|
||||
cursor: pointer;
|
||||
color: rgba(111, 103, 103, 1);
|
||||
}
|
||||
}
|
||||
|
||||
// h3 {
|
||||
// padding-bottom: 10px;
|
||||
// background-color: #fff;
|
||||
// }
|
||||
|
||||
.el-divider--horizontal {
|
||||
margin: 0px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,753 @@
|
|||
<!-- 网关通道 -->
|
||||
<template>
|
||||
<div>
|
||||
<!-- v-click-outside="closeMenu" -->
|
||||
<div>
|
||||
<div class="tree_menu" v-show="dialogVisible">
|
||||
<el-tree :data="$store.state.tree" :props="defaultProps" default-expand-all @node-contextmenu="rightClick"
|
||||
@node-click="treeNodeClick" ref="tree" :render-content="renderContent">
|
||||
<span class="custom-tree-node" slot-scope="{ node, data }">
|
||||
<template v-if="data.editing == 1">
|
||||
<el-button type="mini" v-if="flag" style="right: 50px; top: 0; position: absolute; border: none"
|
||||
@click.stop="done">完成</el-button>
|
||||
<el-button type="mini" style="right: 0; top: 0; position: absolute; border: none"
|
||||
@click.stop="edit">编辑</el-button>
|
||||
<span v-if="!flag">{{ data.label }}</span>
|
||||
<el-input v-else style="width: 150px" v-model="gateway"></el-input>
|
||||
</template>
|
||||
<template v-else>{{ data.label }}</template>
|
||||
</span>
|
||||
</el-tree>
|
||||
<!-- 树形控件右键组件 -->
|
||||
<div v-show="menuShow" class="tree_rightmenu" :style="{ ...rightMenu }">
|
||||
<el-menu class="el-menu-vertical-demo" @select="selectMenuNode" default-active="#0078FE">
|
||||
<el-menu-item id="menuitem" index="1" style="font-size: 12px">
|
||||
<span slot="title">新建通道</span>
|
||||
</el-menu-item>
|
||||
<el-menu-item index="2" style="font-size: 12px">
|
||||
<span slot="title">取 消</span>
|
||||
</el-menu-item>
|
||||
</el-menu>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pas_params">
|
||||
<el-dialog title="通道参数设置" :visible.sync="add_passage" width="765px" v-loading="Loading">
|
||||
<el-form :model="FormData" :label-position="labelPosition" :rules="rules" ref="ruleForm">
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="通道名称:" :label-width="formLabelWidth" prop="tdpz_tdmc">
|
||||
<el-select v-model="FormData.tdpz_tdmc" placeholder="" style="width: 200px; height: 30px">
|
||||
<el-option v-for="(item, index) in options1" :key="index" :label="item.label" :value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="通道:" :label-width="formLabelWidth" prop="tdpz_td">
|
||||
<el-select v-model="FormData.tdpz_td" placeholder="" style="width: 200px; height: 30px">
|
||||
<el-option v-for="(item, index) in options2" :key="index" :label="item.label" :value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="驱动名称:" :label-width="formLabelWidth" prop="tdpz_qdmc">
|
||||
<el-row>
|
||||
<el-col :span="18">
|
||||
<el-input v-model="FormData.tdpz_qdmc" placeholder="" style="width: 200px; height: 30px"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-button style="width: 50px; height: 30px" @click="getDriveName">...</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="IP地址:" :label-width="formLabelWidth" prop="tdpz_ip">
|
||||
<el-row>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="tdpz_ip1" style="width: 43px; height: 30px"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1" style="color: #fff">. </el-col>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="tdpz_ip2" style="width: 43px; height: 30px"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1" style="color: #fff">.</el-col>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="tdpz_ip3" style="width: 43px; height: 30px"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1" style="color: #fff">.</el-col>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="tdpz_ip4" style="width: 43px; height: 30px"></el-input>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="端口号:" :label-width="formLabelWidth" prop="tdpz_port">
|
||||
<el-input v-model="FormData.tdpz_port" placeholder="" style="width: 200px; height: 30px"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="超过时间(ms):" :label-width="formLabelWidth" prop="tdpz_cssj">
|
||||
<el-input v-model="FormData.tdpz_cssj" placeholder="" style="width: 200px; height: 30px"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="间隔时间(ms):" :label-width="formLabelWidth" prop="tdpz_jgsj">
|
||||
<el-input v-model="FormData.tdpz_jgsj" placeholder="" style="width: 200px; height: 30px"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="轮询时间(ms):" :label-width="formLabelWidth" prop="tdpz_lxsj">
|
||||
<el-input v-model="FormData.tdpz_lxsj" placeholder="" style="width: 200px; height: 30px"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="重复次数:" :label-width="formLabelWidth" prop="tdpz_cfcs">
|
||||
<el-input v-model="FormData.tdpz_cfcs" placeholder="" style="width: 200px; height: 30px"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<div class="super_parmams">
|
||||
<h3>高级参数</h3>
|
||||
<div>
|
||||
<i class="el-icon-caret-bottom" v-if="is_retract"></i>
|
||||
<i class="el-icon-caret-top" v-else="is_retract"></i>
|
||||
<el-button type="text" plain @click="getRetract" style="
|
||||
width: 28px;
|
||||
border: none;
|
||||
color: rgba(16, 16, 16, 1);
|
||||
font-size: 14px;
|
||||
text-align: left;
|
||||
">
|
||||
收起</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="super_con" v-show="is_retract">
|
||||
<el-form :label-position="labelPosition" :rules="rules" ref="ruleForm">
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item>
|
||||
<el-checkbox v-model="FormData.tdpz_watchtime">watch time(s)</el-checkbox>
|
||||
<el-input v-model="input1" placeholder="" style="width: 200px; height: 30px"
|
||||
:disabled="isdisabled"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item>
|
||||
<el-checkbox v-model="FormData.tdpz_cjsylxdz">采集使用连续地址</el-checkbox>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="读写占空比:" :label-width="formLabelWidth">
|
||||
<el-row>
|
||||
<el-col :span="10">
|
||||
<el-input v-model="tdpz_dxzkb1" style="width: 91px; height: 30px"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="4">: </el-col>
|
||||
<el-col :span="10">
|
||||
<el-input v-model="tdpz_dxzkb2" style="width: 91px; height: 30px"></el-input>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="05/0F:" :label-width="formLabelWidth">
|
||||
<el-row>
|
||||
<el-col :span="8"><el-radio v-model="FormData.tdpz_050F" label="auto">auto</el-radio></el-col>
|
||||
<el-col :span="8"><el-radio v-model="FormData.tdpz_050F" label="05">05</el-radio></el-col>
|
||||
<el-col :span="8"><el-radio v-model="FormData.tdpz_050F" label="0F">0F</el-radio></el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="06/10:" :label-width="formLabelWidth">
|
||||
<el-row>
|
||||
<el-col :span="8"><el-radio v-model="FormData.tdpz_0610" label="auto">auto</el-radio></el-col>
|
||||
<el-col :span="8"><el-radio v-model="FormData.tdpz_0610" label="06">06</el-radio></el-col>
|
||||
<el-col :span="8"><el-radio v-model="FormData.tdpz_0610" label="10">10</el-radio></el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</div>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="saveGate">保 存</el-button>
|
||||
<el-button @click="add_passage = false">取 消</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
<div class="drvieName_All" v-show="diag_drive">
|
||||
<div class="title">
|
||||
<p class="title_l">协议选择</p>
|
||||
<i class="el-icon-close title_r" @click="diag_drive = false"></i>
|
||||
</div>
|
||||
<el-divider></el-divider>
|
||||
<el-tree :data="datas2" :props="defaultProps" @node-click="handleDetailClick" default-expand-all></el-tree>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { SaveUserAnswer, GetUserAnswer } from "@/api/user";
|
||||
import { Loading } from "element-ui";
|
||||
|
||||
export default {
|
||||
name: "TestTreeView",
|
||||
|
||||
data() {
|
||||
return {
|
||||
flag: false,
|
||||
gateway: JSON.parse(localStorage.getItem("tree"))[0].label,
|
||||
FormData: {
|
||||
tdpz_tdmc: "有线区Channel1",
|
||||
tdpz_td: "网口",
|
||||
tdpz_qdmc: "ModbusTCPClient",
|
||||
tdpz_port: "",
|
||||
tdpz_cssj: "",
|
||||
tdpz_jgsj: "",
|
||||
tdpz_lxsj: "",
|
||||
tdpz_cfcs: "",
|
||||
tdpz_watchtime: true,
|
||||
tdpz_cjsylxdz: false,
|
||||
tdpz_dxzkb: "",
|
||||
tdpz_050F: "auto",
|
||||
tdpz_0610: "auto",
|
||||
},
|
||||
tdpz_dxzkb1: "1",
|
||||
tdpz_dxzkb2: "1",
|
||||
tdpz_ip1: "",
|
||||
tdpz_ip2: "",
|
||||
tdpz_ip3: "",
|
||||
tdpz_ip4: "",
|
||||
options1: [
|
||||
{
|
||||
value: "有线区Channel1",
|
||||
label: "有线区Channel1",
|
||||
},
|
||||
{
|
||||
value: "无线区Channel1",
|
||||
label: "无线区Channel1",
|
||||
},
|
||||
],
|
||||
options2: [
|
||||
{
|
||||
value: "网口",
|
||||
label: "网口",
|
||||
},
|
||||
{
|
||||
value: "串口",
|
||||
label: "串口",
|
||||
},
|
||||
],
|
||||
value1: "有线区Channel1",
|
||||
value2: "网口",
|
||||
diag_drive: false,
|
||||
isdisabled: true,
|
||||
radio: "1",
|
||||
is_retract: true,
|
||||
labelPosition: "left",
|
||||
formLabelWidth: "116px",
|
||||
input1: 192,
|
||||
add_passage: false,
|
||||
rightMenu: "",
|
||||
dialogVisible: true,
|
||||
menuShow: false,
|
||||
datas: [],
|
||||
datas2: [
|
||||
{
|
||||
label: "通用标准",
|
||||
children: [
|
||||
{
|
||||
label: "ModbusTCPClient",
|
||||
},
|
||||
{
|
||||
label: "ModbusRTU_over_TCP",
|
||||
},
|
||||
{
|
||||
label: "OPCUAClient",
|
||||
},
|
||||
{
|
||||
label: "OPCDAClient",
|
||||
},
|
||||
{
|
||||
label: "MQTTClient",
|
||||
},
|
||||
{
|
||||
label: "OPCXMLDAClient",
|
||||
},
|
||||
{
|
||||
label: "环保212协议网口监听",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "PLC",
|
||||
children: [
|
||||
{
|
||||
label: "Slemens S7-200 Network",
|
||||
},
|
||||
{
|
||||
label: "Slemens S7-300 Network",
|
||||
},
|
||||
{
|
||||
label: "Slemens S7-400 Network",
|
||||
},
|
||||
{
|
||||
label: "Slemens S7-1200 Network",
|
||||
},
|
||||
{
|
||||
label: "Slemens S7-1500 Network",
|
||||
},
|
||||
{
|
||||
label: "EtherNet/IP CIP协议(AB OMR ON)",
|
||||
},
|
||||
{
|
||||
label: "MC_Qna-3E(三菱 基恩士 松下)",
|
||||
},
|
||||
{
|
||||
label: "MC_A-1E_Binary",
|
||||
},
|
||||
{
|
||||
label: "OMRON-FINS",
|
||||
},
|
||||
{
|
||||
label: "横河PLC",
|
||||
},
|
||||
{
|
||||
label: "西门子FetchWirte",
|
||||
},
|
||||
{
|
||||
label: "富机 FUJI_SPH_NET",
|
||||
},
|
||||
{
|
||||
label: "基恩士上位链路通讯",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "智能建筑",
|
||||
children: [],
|
||||
},
|
||||
{
|
||||
label: "厂家定制",
|
||||
children: [],
|
||||
},
|
||||
{
|
||||
label: "电力行业标准",
|
||||
children: [
|
||||
{
|
||||
label: "IEC104",
|
||||
},
|
||||
{
|
||||
label: "DLT645_over_TCP",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "CNC数控",
|
||||
children: [],
|
||||
},
|
||||
{
|
||||
label: "私有协议",
|
||||
children: [],
|
||||
},
|
||||
],
|
||||
defaultProps: {
|
||||
children: "children",
|
||||
label: "label",
|
||||
},
|
||||
rules: {
|
||||
tdpz_tdmc: [
|
||||
{ required: true, message: "请输入通道名称", trigger: "change" },
|
||||
],
|
||||
tdpz_td: [{ required: true, message: "请输入通道", trigger: "change" }],
|
||||
tdpz_qdmc: [
|
||||
{ required: true, message: "请输入驱动名称", trigger: "change" },
|
||||
],
|
||||
tdpz_ip: [{ required: true, message: "请输入ip地址", trigger: "blur" }],
|
||||
tdpz_port: [
|
||||
{ required: true, message: "请输入端口号", trigger: "blur" },
|
||||
],
|
||||
tdpz_cssj: [
|
||||
{ required: true, message: "请输入超出时间", trigger: "blur" },
|
||||
],
|
||||
tdpz_jgsj: [
|
||||
{ required: true, message: "请输入间隔时间", trigger: "blur" },
|
||||
],
|
||||
tdpz_lxsj: [
|
||||
{ required: true, message: "请输入轮询时间", trigger: "blur" },
|
||||
],
|
||||
tdpz_cfcs: [
|
||||
{ required: true, message: "请输入重复次数", trigger: "blur" },
|
||||
],
|
||||
},
|
||||
};
|
||||
},
|
||||
created() {
|
||||
console.log(this.$store.state.tree);
|
||||
},
|
||||
methods: {
|
||||
//编辑
|
||||
edit(event) {
|
||||
this.flag = true;
|
||||
},
|
||||
//完成编辑
|
||||
done(event) {
|
||||
this.flag = false;
|
||||
let tree = this.$store.state.tree;
|
||||
tree[0].label = this.gateway;
|
||||
this.$store.commit("setTree", tree);
|
||||
},
|
||||
rightClick(e, data, node) {
|
||||
this.menuShow = false;
|
||||
this.menuShow = true;
|
||||
e.preventDefault(); //关闭浏览器右键默认事件
|
||||
this.rightMenu = { top: e.pageY + "px", left: e.pageX + "px" };
|
||||
document.addEventListener("click", (ev) => {
|
||||
ev.stopImmediatePropagation();
|
||||
if (ev.target !== document.querySelector(".el-menu-item.is-active")) {
|
||||
this.foo();
|
||||
}
|
||||
});
|
||||
},
|
||||
// 点击时候的判断,判断是否为新增网关
|
||||
selectMenuNode(index, indexPath) {
|
||||
console.log(index);
|
||||
if (index == 1) {
|
||||
this.add_passage = true;
|
||||
}
|
||||
},
|
||||
foo() {
|
||||
// 取消鼠标监听事件 菜单栏
|
||||
this.menuShow = false;
|
||||
document.removeEventListener("click", this.foo); // 关掉监听，
|
||||
},
|
||||
treeNodeClick(key) {
|
||||
// console.log
|
||||
this.foo();
|
||||
},
|
||||
// 收起点击事件的判断
|
||||
getRetract() {
|
||||
if (this.is_retract == true) {
|
||||
this.is_retract = false;
|
||||
} else {
|
||||
this.is_retract = true;
|
||||
}
|
||||
},
|
||||
getDriveName() {
|
||||
this.diag_drive = true;
|
||||
},
|
||||
Merge(value, value1, value2, value3, value4) {
|
||||
value = value1 + "." + value2 + "." + value3 + "." + value4;
|
||||
return value;
|
||||
},
|
||||
async saveGate() {
|
||||
this.add_passage = false;
|
||||
var obj = {
|
||||
tdpz_tdmc: this.FormData.tdpz_tdmc,
|
||||
tdpz_td: this.FormData.tdpz_td,
|
||||
tdpz_qdmc: this.FormData.tdpz_qdmc,
|
||||
tdpz_port: this.FormData.tdpz_port,
|
||||
tdpz_ccsj: this.FormData.tdpz_cssj,
|
||||
tdpz_jgsj: this.FormData.tdpz_jgsj,
|
||||
tdpz_ip: this.tdpz_ip1 + "." + this.tdpz_ip2 + "." + this.tdpz_ip3 + "." + this.tdpz_ip4,
|
||||
tdpz_lxsj: this.FormData.tdpz_lxsj,
|
||||
tdpz_cfcs: this.FormData.tdpz_cfcs,
|
||||
tdpz_watchtime: String(Number(this.FormData.tdpz_watchtime)),
|
||||
tdpz_cjsylxdz: String(Number(this.FormData.tdpz_cjsylxdz)),
|
||||
tdpz_dxzkb: this.tdpz_dxzkb1 + ":" + this.tdpz_dxzkb2,
|
||||
tdpz_050F: this.FormData.tdpz_050F,
|
||||
tdpz_0610: this.FormData.tdpz_0610,
|
||||
}
|
||||
let datas = sessionStorage.getItem("DB-IotLite_yx");
|
||||
datas = { ...JSON.parse(datas), ...obj };
|
||||
let res = await SaveUserAnswer({
|
||||
mark: "DB-IotLite_yx",
|
||||
user_id: "USER202307301109254198",
|
||||
mark_value: JSON.stringify(datas),
|
||||
});
|
||||
if (res.status == 200) {
|
||||
this.$message({
|
||||
message: '保存成功',
|
||||
type: 'success'
|
||||
});
|
||||
}
|
||||
sessionStorage.setItem("DB-IotLite_yx", JSON.stringify(datas));
|
||||
console.log(res);
|
||||
console.log(res.data.data.mark_value);
|
||||
// this.$router.push("/dbcollectdevice");
|
||||
// const newChild = { id: id++, label: `${this.$store.state.tree}`, children: [] };
|
||||
// if (!data.children) {
|
||||
// this.$set(data, 'children', []);
|
||||
// }
|
||||
// data.children.push(newChild);
|
||||
|
||||
},
|
||||
handleDetailClick(data, node, value) {
|
||||
console.log(data.label);
|
||||
this.FormData.tdpz_qdmc = data.label;
|
||||
this.diag_drive = false;
|
||||
},
|
||||
async GetUserAnswer() {
|
||||
let answer = await GetUserAnswer({
|
||||
mark: "DB-IotLite_yx",
|
||||
user_id: "USER202307301109254198",
|
||||
});
|
||||
console.log(answer);
|
||||
let obj = JSON.parse(answer.data.data.mark_value);
|
||||
console.log(obj);
|
||||
// this.FormData.
|
||||
if (obj.tdpz_dxzkb) {
|
||||
this.tdpz_dxzkb1 = obj.tdpz_dxzkb.split(":")[0];
|
||||
this.tdpz_dxzkb2 = obj.tdpz_dxzkb.split(":")[1];
|
||||
}
|
||||
this.FormData.tdpz_watchtime = Boolean(Number(obj.tdpz_watchtime));
|
||||
// console.log(this.FormData.tdpz_watchtime);
|
||||
this.FormData.tdpz_cjsylxdz = Boolean(Number(obj.tdpz_cjsylxdz));
|
||||
if (obj.tdpz_ip) {
|
||||
this.tdpz_ip1 = obj.tdpz_ip.split(".")[0];
|
||||
this.tdpz_ip2 = obj.tdpz_ip.split(".")[1];
|
||||
this.tdpz_ip3 = obj.tdpz_ip.split(".")[2];
|
||||
this.tdpz_ip4 = obj.tdpz_ip.split(".")[3];
|
||||
}
|
||||
this.FormData.tdpz_tdmc = obj.tdpz_tdmc;
|
||||
this.FormData.tdpz_td = obj.tdpz_td;
|
||||
this.FormData.tdpz_qdmc = obj.tdpz_qdmc;
|
||||
this.FormData.tdpz_050F = obj.tdpz_050F;
|
||||
this.FormData.tdpz_0610 = obj.tdpz_0610;
|
||||
this.FormData.tdpz_port = obj.tdpz_port;
|
||||
this.FormData.tdpz_cssj = obj.tdpz_cssj;
|
||||
this.FormData.tdpz_jgsj = obj.tdpz_jgsj;
|
||||
this.FormData.tdpz_lxsj = obj.tdpz_lxsj;
|
||||
this.FormData.tdpz_cfcs = obj.tdpz_cfcs;
|
||||
},
|
||||
renderContent(h, { node, data, store }) {
|
||||
return (
|
||||
<span class="custom-tree-node">
|
||||
<span>{node.label}</span>
|
||||
</span>);
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.Loading = true;
|
||||
this.GetUserAnswer();
|
||||
this.Loading = false;
|
||||
// let res2 = GetUserAnswer()
|
||||
},
|
||||
|
||||
watch: {
|
||||
// "FormData.tdpz_watchtime": {
|
||||
// handler(old) {
|
||||
// if (old) {
|
||||
// this.isdisabled = false;
|
||||
// } else {
|
||||
// this.isdisabled = true;
|
||||
// }
|
||||
// },
|
||||
// },
|
||||
"FormData.tdpz_watchtime"(newval) {
|
||||
console.log(newval);
|
||||
if (newval) {
|
||||
this.isdisabled = true;
|
||||
} else {
|
||||
this.isdisabled = false;
|
||||
}
|
||||
},
|
||||
},
|
||||
directives: {
|
||||
clickoutside: {
|
||||
bind: function (el, binding, vnode) {
|
||||
function documentHandler(e) {
|
||||
if (el.contains(e.target)) {
|
||||
return false;
|
||||
}
|
||||
if (binding.expression) {
|
||||
binding.value(e);
|
||||
}
|
||||
}
|
||||
el._vueClickOutside_ = documentHandler;
|
||||
document.addEventListener("click", documentHandler);
|
||||
},
|
||||
unbind: function (el, binding) {
|
||||
document.removeEventListener("click", el._vueClickOutside_);
|
||||
delete el._vueClickOutside_;
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.tree_menu {
|
||||
position: absolute;
|
||||
width: 286px;
|
||||
left: 64px;
|
||||
top: 104px;
|
||||
width: 286px;
|
||||
height: 753px;
|
||||
line-height: 20px;
|
||||
border-radius: 3px;
|
||||
background-color: rgba(255, 255, 255, 1);
|
||||
text-align: center;
|
||||
border: 1px solid rgba(220, 220, 220, 1);
|
||||
}
|
||||
|
||||
.tree_rightmenu {
|
||||
position: fixed;
|
||||
width: 120px;
|
||||
border: 1px solid rgba(0, 0, 0, 0.15);
|
||||
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.super_parmams {
|
||||
display: flex;
|
||||
color: #fff !important;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: 668px;
|
||||
|
||||
i {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
/deep/ .pas_params {
|
||||
.el-col-12:last-child {
|
||||
padding-right: 150px;
|
||||
}
|
||||
|
||||
.el-col-12:first-child {
|
||||
padding-right: 38px;
|
||||
}
|
||||
|
||||
.el-input__inner {
|
||||
height: 30px;
|
||||
text-align: left;
|
||||
padding: 0px 8px;
|
||||
}
|
||||
|
||||
.el-row {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
|
||||
.el-col-1 {
|
||||
color: #fff !important;
|
||||
text-align: center;
|
||||
line-height: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.el-col-6 {
|
||||
height: 40px;
|
||||
top: 6px;
|
||||
left: 77px;
|
||||
position: relative;
|
||||
width: 50px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.super_con {
|
||||
.el-col-12:last-child {
|
||||
padding-right: 28px;
|
||||
}
|
||||
|
||||
.el-col-12:first-child {
|
||||
padding-right: 42px;
|
||||
}
|
||||
|
||||
.el-input__inner {
|
||||
text-align: left;
|
||||
padding: 0 8px;
|
||||
}
|
||||
|
||||
.el-row {
|
||||
color: #fff !important;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
|
||||
.el-col-4 {
|
||||
padding-left: 5px;
|
||||
width: 14px;
|
||||
text-align: center;
|
||||
line-height: 4px;
|
||||
height: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.el-dialog__footer {
|
||||
padding: 18px 1.25rem 50px;
|
||||
}
|
||||
|
||||
.dialog-footer {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
bottom: 45px;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
/deep/ .drvieName_All {
|
||||
position: absolute;
|
||||
left: 1408px;
|
||||
top: 140px;
|
||||
width: 435px;
|
||||
max-height: 720px;
|
||||
z-index: 10000;
|
||||
border: 1px solid #f5f5f5;
|
||||
|
||||
.title {
|
||||
background-color: #fff;
|
||||
padding: 5px 6px 5px 25px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.title_l {
|
||||
width: 103px;
|
||||
height: 26px;
|
||||
color: rgba(16, 16, 16, 1);
|
||||
font-size: 18px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.title_r {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
line-height: 24px;
|
||||
cursor: pointer;
|
||||
color: rgba(111, 103, 103, 1);
|
||||
}
|
||||
}
|
||||
|
||||
// h3 {
|
||||
// padding-bottom: 10px;
|
||||
// background-color: #fff;
|
||||
// }
|
||||
|
||||
.el-divider--horizontal {
|
||||
margin: 0px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,753 @@
|
|||
<!-- 网关通道 -->
|
||||
<template>
|
||||
<div>
|
||||
<!-- v-click-outside="closeMenu" -->
|
||||
<div>
|
||||
<div class="tree_menu" v-show="dialogVisible">
|
||||
<el-tree :data="$store.state.tree" :props="defaultProps" default-expand-all @node-contextmenu="rightClick"
|
||||
@node-click="treeNodeClick" ref="tree" :render-content="renderContent">
|
||||
<span class="custom-tree-node" slot-scope="{ node, data }">
|
||||
<template v-if="data.editing == 1">
|
||||
<el-button type="mini" v-if="flag" style="right: 50px; top: 0; position: absolute; border: none"
|
||||
@click.stop="done">完成</el-button>
|
||||
<el-button type="mini" style="right: 0; top: 0; position: absolute; border: none"
|
||||
@click.stop="edit">编辑</el-button>
|
||||
<span v-if="!flag">{{ data.label }}</span>
|
||||
<el-input v-else style="width: 150px" v-model="gateway"></el-input>
|
||||
</template>
|
||||
<template v-else>{{ data.label }}</template>
|
||||
</span>
|
||||
</el-tree>
|
||||
<!-- 树形控件右键组件 -->
|
||||
<div v-show="menuShow" class="tree_rightmenu" :style="{ ...rightMenu }">
|
||||
<el-menu class="el-menu-vertical-demo" @select="selectMenuNode" default-active="#0078FE">
|
||||
<el-menu-item id="menuitem" index="1" style="font-size: 12px">
|
||||
<span slot="title">新建通道</span>
|
||||
</el-menu-item>
|
||||
<el-menu-item index="2" style="font-size: 12px">
|
||||
<span slot="title">取 消</span>
|
||||
</el-menu-item>
|
||||
</el-menu>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pas_params">
|
||||
<el-dialog title="通道参数设置" :visible.sync="add_passage" width="765px" v-loading="Loading">
|
||||
<el-form :model="FormData" :label-position="labelPosition" :rules="rules" ref="ruleForm">
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="通道名称:" :label-width="formLabelWidth" prop="tdpz_tdmc">
|
||||
<el-select v-model="FormData.tdpz_tdmc" placeholder="" style="width: 200px; height: 30px">
|
||||
<el-option v-for="(item, index) in options1" :key="index" :label="item.label" :value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="通道:" :label-width="formLabelWidth" prop="tdpz_td">
|
||||
<el-select v-model="FormData.tdpz_td" placeholder="" style="width: 200px; height: 30px">
|
||||
<el-option v-for="(item, index) in options2" :key="index" :label="item.label" :value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="驱动名称:" :label-width="formLabelWidth" prop="tdpz_qdmc">
|
||||
<el-row>
|
||||
<el-col :span="18">
|
||||
<el-input v-model="FormData.tdpz_qdmc" placeholder="" style="width: 200px; height: 30px"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-button style="width: 50px; height: 30px" @click="getDriveName">...</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="IP地址:" :label-width="formLabelWidth" prop="tdpz_ip">
|
||||
<el-row>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="tdpz_ip1" style="width: 43px; height: 30px"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1" style="color: #fff">. </el-col>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="tdpz_ip2" style="width: 43px; height: 30px"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1" style="color: #fff">.</el-col>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="tdpz_ip3" style="width: 43px; height: 30px"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1" style="color: #fff">.</el-col>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="tdpz_ip4" style="width: 43px; height: 30px"></el-input>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="端口号:" :label-width="formLabelWidth" prop="tdpz_port">
|
||||
<el-input v-model="FormData.tdpz_port" placeholder="" style="width: 200px; height: 30px"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="超过时间(ms):" :label-width="formLabelWidth" prop="tdpz_cssj">
|
||||
<el-input v-model="FormData.tdpz_cssj" placeholder="" style="width: 200px; height: 30px"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="间隔时间(ms):" :label-width="formLabelWidth" prop="tdpz_jgsj">
|
||||
<el-input v-model="FormData.tdpz_jgsj" placeholder="" style="width: 200px; height: 30px"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="轮询时间(ms):" :label-width="formLabelWidth" prop="tdpz_lxsj">
|
||||
<el-input v-model="FormData.tdpz_lxsj" placeholder="" style="width: 200px; height: 30px"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="重复次数:" :label-width="formLabelWidth" prop="tdpz_cfcs">
|
||||
<el-input v-model="FormData.tdpz_cfcs" placeholder="" style="width: 200px; height: 30px"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<div class="super_parmams">
|
||||
<h3>高级参数</h3>
|
||||
<div>
|
||||
<i class="el-icon-caret-bottom" v-if="is_retract"></i>
|
||||
<i class="el-icon-caret-top" v-else="is_retract"></i>
|
||||
<el-button type="text" plain @click="getRetract" style="
|
||||
width: 28px;
|
||||
border: none;
|
||||
color: rgba(16, 16, 16, 1);
|
||||
font-size: 14px;
|
||||
text-align: left;
|
||||
">
|
||||
收起</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="super_con" v-show="is_retract">
|
||||
<el-form :label-position="labelPosition" :rules="rules" ref="ruleForm">
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item>
|
||||
<el-checkbox v-model="FormData.tdpz_watchtime">watch time(s)</el-checkbox>
|
||||
<el-input v-model="input1" placeholder="" style="width: 200px; height: 30px"
|
||||
:disabled="isdisabled"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item>
|
||||
<el-checkbox v-model="FormData.tdpz_cjsylxdz">采集使用连续地址</el-checkbox>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="读写占空比:" :label-width="formLabelWidth">
|
||||
<el-row>
|
||||
<el-col :span="10">
|
||||
<el-input v-model="tdpz_dxzkb1" style="width: 91px; height: 30px"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="4">: </el-col>
|
||||
<el-col :span="10">
|
||||
<el-input v-model="tdpz_dxzkb2" style="width: 91px; height: 30px"></el-input>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="05/0F:" :label-width="formLabelWidth">
|
||||
<el-row>
|
||||
<el-col :span="8"><el-radio v-model="FormData.tdpz_050F" label="auto">auto</el-radio></el-col>
|
||||
<el-col :span="8"><el-radio v-model="FormData.tdpz_050F" label="05">05</el-radio></el-col>
|
||||
<el-col :span="8"><el-radio v-model="FormData.tdpz_050F" label="0F">0F</el-radio></el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="06/10:" :label-width="formLabelWidth">
|
||||
<el-row>
|
||||
<el-col :span="8"><el-radio v-model="FormData.tdpz_0610" label="auto">auto</el-radio></el-col>
|
||||
<el-col :span="8"><el-radio v-model="FormData.tdpz_0610" label="06">06</el-radio></el-col>
|
||||
<el-col :span="8"><el-radio v-model="FormData.tdpz_0610" label="10">10</el-radio></el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</div>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="saveGate">保 存</el-button>
|
||||
<el-button @click="add_passage = false">取 消</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
<div class="drvieName_All" v-show="diag_drive">
|
||||
<div class="title">
|
||||
<p class="title_l">协议选择</p>
|
||||
<i class="el-icon-close title_r" @click="diag_drive = false"></i>
|
||||
</div>
|
||||
<el-divider></el-divider>
|
||||
<el-tree :data="datas2" :props="defaultProps" @node-click="handleDetailClick" default-expand-all></el-tree>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { SaveUserAnswer, GetUserAnswer } from "@/api/user";
|
||||
import { Loading } from "element-ui";
|
||||
|
||||
export default {
|
||||
name: "TestTreeView",
|
||||
|
||||
data() {
|
||||
return {
|
||||
flag: false,
|
||||
gateway: JSON.parse(localStorage.getItem("tree"))[0].label,
|
||||
FormData: {
|
||||
tdpz_tdmc: "有线区Channel1",
|
||||
tdpz_td: "网口",
|
||||
tdpz_qdmc: "ModbusTCPClient",
|
||||
tdpz_port: "",
|
||||
tdpz_cssj: "",
|
||||
tdpz_jgsj: "",
|
||||
tdpz_lxsj: "",
|
||||
tdpz_cfcs: "",
|
||||
tdpz_watchtime: true,
|
||||
tdpz_cjsylxdz: false,
|
||||
tdpz_dxzkb: "",
|
||||
tdpz_050F: "auto",
|
||||
tdpz_0610: "auto",
|
||||
},
|
||||
tdpz_dxzkb1: "1",
|
||||
tdpz_dxzkb2: "1",
|
||||
tdpz_ip1: "",
|
||||
tdpz_ip2: "",
|
||||
tdpz_ip3: "",
|
||||
tdpz_ip4: "",
|
||||
options1: [
|
||||
{
|
||||
value: "有线区Channel1",
|
||||
label: "有线区Channel1",
|
||||
},
|
||||
{
|
||||
value: "无线区Channel1",
|
||||
label: "无线区Channel1",
|
||||
},
|
||||
],
|
||||
options2: [
|
||||
{
|
||||
value: "网口",
|
||||
label: "网口",
|
||||
},
|
||||
{
|
||||
value: "串口",
|
||||
label: "串口",
|
||||
},
|
||||
],
|
||||
value1: "有线区Channel1",
|
||||
value2: "网口",
|
||||
diag_drive: false,
|
||||
isdisabled: true,
|
||||
radio: "1",
|
||||
is_retract: true,
|
||||
labelPosition: "left",
|
||||
formLabelWidth: "116px",
|
||||
input1: 192,
|
||||
add_passage: false,
|
||||
rightMenu: "",
|
||||
dialogVisible: true,
|
||||
menuShow: false,
|
||||
datas: [],
|
||||
datas2: [
|
||||
{
|
||||
label: "通用标准",
|
||||
children: [
|
||||
{
|
||||
label: "ModbusTCPClient",
|
||||
},
|
||||
{
|
||||
label: "ModbusRTU_over_TCP",
|
||||
},
|
||||
{
|
||||
label: "OPCUAClient",
|
||||
},
|
||||
{
|
||||
label: "OPCDAClient",
|
||||
},
|
||||
{
|
||||
label: "MQTTClient",
|
||||
},
|
||||
{
|
||||
label: "OPCXMLDAClient",
|
||||
},
|
||||
{
|
||||
label: "环保212协议网口监听",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "PLC",
|
||||
children: [
|
||||
{
|
||||
label: "Slemens S7-200 Network",
|
||||
},
|
||||
{
|
||||
label: "Slemens S7-300 Network",
|
||||
},
|
||||
{
|
||||
label: "Slemens S7-400 Network",
|
||||
},
|
||||
{
|
||||
label: "Slemens S7-1200 Network",
|
||||
},
|
||||
{
|
||||
label: "Slemens S7-1500 Network",
|
||||
},
|
||||
{
|
||||
label: "EtherNet/IP CIP协议(AB OMR ON)",
|
||||
},
|
||||
{
|
||||
label: "MC_Qna-3E(三菱 基恩士 松下)",
|
||||
},
|
||||
{
|
||||
label: "MC_A-1E_Binary",
|
||||
},
|
||||
{
|
||||
label: "OMRON-FINS",
|
||||
},
|
||||
{
|
||||
label: "横河PLC",
|
||||
},
|
||||
{
|
||||
label: "西门子FetchWirte",
|
||||
},
|
||||
{
|
||||
label: "富机 FUJI_SPH_NET",
|
||||
},
|
||||
{
|
||||
label: "基恩士上位链路通讯",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "智能建筑",
|
||||
children: [],
|
||||
},
|
||||
{
|
||||
label: "厂家定制",
|
||||
children: [],
|
||||
},
|
||||
{
|
||||
label: "电力行业标准",
|
||||
children: [
|
||||
{
|
||||
label: "IEC104",
|
||||
},
|
||||
{
|
||||
label: "DLT645_over_TCP",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "CNC数控",
|
||||
children: [],
|
||||
},
|
||||
{
|
||||
label: "私有协议",
|
||||
children: [],
|
||||
},
|
||||
],
|
||||
defaultProps: {
|
||||
children: "children",
|
||||
label: "label",
|
||||
},
|
||||
rules: {
|
||||
tdpz_tdmc: [
|
||||
{ required: true, message: "请输入通道名称", trigger: "change" },
|
||||
],
|
||||
tdpz_td: [{ required: true, message: "请输入通道", trigger: "change" }],
|
||||
tdpz_qdmc: [
|
||||
{ required: true, message: "请输入驱动名称", trigger: "change" },
|
||||
],
|
||||
tdpz_ip: [{ required: true, message: "请输入ip地址", trigger: "blur" }],
|
||||
tdpz_port: [
|
||||
{ required: true, message: "请输入端口号", trigger: "blur" },
|
||||
],
|
||||
tdpz_cssj: [
|
||||
{ required: true, message: "请输入超出时间", trigger: "blur" },
|
||||
],
|
||||
tdpz_jgsj: [
|
||||
{ required: true, message: "请输入间隔时间", trigger: "blur" },
|
||||
],
|
||||
tdpz_lxsj: [
|
||||
{ required: true, message: "请输入轮询时间", trigger: "blur" },
|
||||
],
|
||||
tdpz_cfcs: [
|
||||
{ required: true, message: "请输入重复次数", trigger: "blur" },
|
||||
],
|
||||
},
|
||||
};
|
||||
},
|
||||
created() {
|
||||
console.log(this.$store.state.tree);
|
||||
},
|
||||
methods: {
|
||||
//编辑
|
||||
edit(event) {
|
||||
this.flag = true;
|
||||
},
|
||||
//完成编辑
|
||||
done(event) {
|
||||
this.flag = false;
|
||||
let tree = this.$store.state.tree;
|
||||
tree[0].label = this.gateway;
|
||||
this.$store.commit("setTree", tree);
|
||||
},
|
||||
rightClick(e, data, node) {
|
||||
this.menuShow = false;
|
||||
this.menuShow = true;
|
||||
e.preventDefault(); //关闭浏览器右键默认事件
|
||||
this.rightMenu = { top: e.pageY + "px", left: e.pageX + "px" };
|
||||
document.addEventListener("click", (ev) => {
|
||||
ev.stopImmediatePropagation();
|
||||
if (ev.target !== document.querySelector(".el-menu-item.is-active")) {
|
||||
this.foo();
|
||||
}
|
||||
});
|
||||
},
|
||||
// 点击时候的判断,判断是否为新增网关
|
||||
selectMenuNode(index, indexPath) {
|
||||
console.log(index);
|
||||
if (index == 1) {
|
||||
this.add_passage = true;
|
||||
}
|
||||
},
|
||||
foo() {
|
||||
// 取消鼠标监听事件 菜单栏
|
||||
this.menuShow = false;
|
||||
document.removeEventListener("click", this.foo); // 关掉监听，
|
||||
},
|
||||
treeNodeClick(key) {
|
||||
// console.log
|
||||
this.foo();
|
||||
},
|
||||
// 收起点击事件的判断
|
||||
getRetract() {
|
||||
if (this.is_retract == true) {
|
||||
this.is_retract = false;
|
||||
} else {
|
||||
this.is_retract = true;
|
||||
}
|
||||
},
|
||||
getDriveName() {
|
||||
this.diag_drive = true;
|
||||
},
|
||||
Merge(value, value1, value2, value3, value4) {
|
||||
value = value1 + "." + value2 + "." + value3 + "." + value4;
|
||||
return value;
|
||||
},
|
||||
async saveGate() {
|
||||
this.add_passage = false;
|
||||
var obj = {
|
||||
tdpz_tdmc: this.FormData.tdpz_tdmc,
|
||||
tdpz_td: this.FormData.tdpz_td,
|
||||
tdpz_qdmc: this.FormData.tdpz_qdmc,
|
||||
tdpz_port: this.FormData.tdpz_port,
|
||||
tdpz_ccsj: this.FormData.tdpz_cssj,
|
||||
tdpz_jgsj: this.FormData.tdpz_jgsj,
|
||||
tdpz_ip: this.tdpz_ip1 + "." + this.tdpz_ip2 + "." + this.tdpz_ip3 + "." + this.tdpz_ip4,
|
||||
tdpz_lxsj: this.FormData.tdpz_lxsj,
|
||||
tdpz_cfcs: this.FormData.tdpz_cfcs,
|
||||
tdpz_watchtime: String(Number(this.FormData.tdpz_watchtime)),
|
||||
tdpz_cjsylxdz: String(Number(this.FormData.tdpz_cjsylxdz)),
|
||||
tdpz_dxzkb: this.tdpz_dxzkb1 + ":" + this.tdpz_dxzkb2,
|
||||
tdpz_050F: this.FormData.tdpz_050F,
|
||||
tdpz_0610: this.FormData.tdpz_0610,
|
||||
}
|
||||
let datas = sessionStorage.getItem("DB-IotLite_yx");
|
||||
datas = { ...JSON.parse(datas), ...obj };
|
||||
let res = await SaveUserAnswer({
|
||||
mark: "DB-IotLite_yx",
|
||||
user_id: "USER202307301109254198",
|
||||
mark_value: JSON.stringify(datas),
|
||||
});
|
||||
if (res.status == 200) {
|
||||
this.$message({
|
||||
message: '保存成功',
|
||||
type: 'success'
|
||||
});
|
||||
}
|
||||
sessionStorage.setItem("DB-IotLite_yx", JSON.stringify(datas));
|
||||
console.log(res);
|
||||
console.log(res.data.data.mark_value);
|
||||
// this.$router.push("/dbcollectdevice");
|
||||
// const newChild = { id: id++, label: `${this.$store.state.tree}`, children: [] };
|
||||
// if (!data.children) {
|
||||
// this.$set(data, 'children', []);
|
||||
// }
|
||||
// data.children.push(newChild);
|
||||
|
||||
},
|
||||
handleDetailClick(data, node, value) {
|
||||
console.log(data.label);
|
||||
this.FormData.tdpz_qdmc = data.label;
|
||||
this.diag_drive = false;
|
||||
},
|
||||
async GetUserAnswer() {
|
||||
let answer = await GetUserAnswer({
|
||||
mark: "DB-IotLite_yx",
|
||||
user_id: "USER202307301109254198",
|
||||
});
|
||||
console.log(answer);
|
||||
let obj = JSON.parse(answer.data.data.mark_value);
|
||||
console.log(obj);
|
||||
// this.FormData.
|
||||
if (obj.tdpz_dxzkb) {
|
||||
this.tdpz_dxzkb1 = obj.tdpz_dxzkb.split(":")[0];
|
||||
this.tdpz_dxzkb2 = obj.tdpz_dxzkb.split(":")[1];
|
||||
}
|
||||
this.FormData.tdpz_watchtime = Boolean(Number(obj.tdpz_watchtime));
|
||||
// console.log(this.FormData.tdpz_watchtime);
|
||||
this.FormData.tdpz_cjsylxdz = Boolean(Number(obj.tdpz_cjsylxdz));
|
||||
if (obj.tdpz_ip) {
|
||||
this.tdpz_ip1 = obj.tdpz_ip.split(".")[0];
|
||||
this.tdpz_ip2 = obj.tdpz_ip.split(".")[1];
|
||||
this.tdpz_ip3 = obj.tdpz_ip.split(".")[2];
|
||||
this.tdpz_ip4 = obj.tdpz_ip.split(".")[3];
|
||||
}
|
||||
this.FormData.tdpz_tdmc = obj.tdpz_tdmc;
|
||||
this.FormData.tdpz_td = obj.tdpz_td;
|
||||
this.FormData.tdpz_qdmc = obj.tdpz_qdmc;
|
||||
this.FormData.tdpz_050F = obj.tdpz_050F;
|
||||
this.FormData.tdpz_0610 = obj.tdpz_0610;
|
||||
this.FormData.tdpz_port = obj.tdpz_port;
|
||||
this.FormData.tdpz_cssj = obj.tdpz_cssj;
|
||||
this.FormData.tdpz_jgsj = obj.tdpz_jgsj;
|
||||
this.FormData.tdpz_lxsj = obj.tdpz_lxsj;
|
||||
this.FormData.tdpz_cfcs = obj.tdpz_cfcs;
|
||||
},
|
||||
renderContent(h, { node, data, store }) {
|
||||
return (
|
||||
<span class="custom-tree-node">
|
||||
<span>{node.label}</span>
|
||||
</span>);
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.Loading = true;
|
||||
this.GetUserAnswer();
|
||||
this.Loading = false;
|
||||
// let res2 = GetUserAnswer()
|
||||
},
|
||||
|
||||
watch: {
|
||||
// "FormData.tdpz_watchtime": {
|
||||
// handler(old) {
|
||||
// if (old) {
|
||||
// this.isdisabled = false;
|
||||
// } else {
|
||||
// this.isdisabled = true;
|
||||
// }
|
||||
// },
|
||||
// },
|
||||
"FormData.tdpz_watchtime"(newval) {
|
||||
console.log(newval);
|
||||
if (newval) {
|
||||
this.isdisabled = true;
|
||||
} else {
|
||||
this.isdisabled = false;
|
||||
}
|
||||
},
|
||||
},
|
||||
directives: {
|
||||
clickoutside: {
|
||||
bind: function (el, binding, vnode) {
|
||||
function documentHandler(e) {
|
||||
if (el.contains(e.target)) {
|
||||
return false;
|
||||
}
|
||||
if (binding.expression) {
|
||||
binding.value(e);
|
||||
}
|
||||
}
|
||||
el._vueClickOutside_ = documentHandler;
|
||||
document.addEventListener("click", documentHandler);
|
||||
},
|
||||
unbind: function (el, binding) {
|
||||
document.removeEventListener("click", el._vueClickOutside_);
|
||||
delete el._vueClickOutside_;
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.tree_menu {
|
||||
position: absolute;
|
||||
width: 286px;
|
||||
left: 64px;
|
||||
top: 104px;
|
||||
width: 286px;
|
||||
height: 753px;
|
||||
line-height: 20px;
|
||||
border-radius: 3px;
|
||||
background-color: rgba(255, 255, 255, 1);
|
||||
text-align: center;
|
||||
border: 1px solid rgba(220, 220, 220, 1);
|
||||
}
|
||||
|
||||
.tree_rightmenu {
|
||||
position: fixed;
|
||||
width: 120px;
|
||||
border: 1px solid rgba(0, 0, 0, 0.15);
|
||||
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.super_parmams {
|
||||
display: flex;
|
||||
color: #fff !important;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: 668px;
|
||||
|
||||
i {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
/deep/ .pas_params {
|
||||
.el-col-12:last-child {
|
||||
padding-right: 150px;
|
||||
}
|
||||
|
||||
.el-col-12:first-child {
|
||||
padding-right: 38px;
|
||||
}
|
||||
|
||||
.el-input__inner {
|
||||
height: 30px;
|
||||
text-align: left;
|
||||
padding: 0px 8px;
|
||||
}
|
||||
|
||||
.el-row {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
|
||||
.el-col-1 {
|
||||
color: #fff !important;
|
||||
text-align: center;
|
||||
line-height: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.el-col-6 {
|
||||
height: 40px;
|
||||
top: 6px;
|
||||
left: 77px;
|
||||
position: relative;
|
||||
width: 50px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.super_con {
|
||||
.el-col-12:last-child {
|
||||
padding-right: 28px;
|
||||
}
|
||||
|
||||
.el-col-12:first-child {
|
||||
padding-right: 42px;
|
||||
}
|
||||
|
||||
.el-input__inner {
|
||||
text-align: left;
|
||||
padding: 0 8px;
|
||||
}
|
||||
|
||||
.el-row {
|
||||
color: #fff !important;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
|
||||
.el-col-4 {
|
||||
padding-left: 5px;
|
||||
width: 14px;
|
||||
text-align: center;
|
||||
line-height: 4px;
|
||||
height: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.el-dialog__footer {
|
||||
padding: 18px 1.25rem 50px;
|
||||
}
|
||||
|
||||
.dialog-footer {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
bottom: 45px;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
/deep/ .drvieName_All {
|
||||
position: absolute;
|
||||
left: 1408px;
|
||||
top: 140px;
|
||||
width: 435px;
|
||||
max-height: 720px;
|
||||
z-index: 10000;
|
||||
border: 1px solid #f5f5f5;
|
||||
|
||||
.title {
|
||||
background-color: #fff;
|
||||
padding: 5px 6px 5px 25px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.title_l {
|
||||
width: 103px;
|
||||
height: 26px;
|
||||
color: rgba(16, 16, 16, 1);
|
||||
font-size: 18px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.title_r {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
line-height: 24px;
|
||||
cursor: pointer;
|
||||
color: rgba(111, 103, 103, 1);
|
||||
}
|
||||
}
|
||||
|
||||
// h3 {
|
||||
// padding-bottom: 10px;
|
||||
// background-color: #fff;
|
||||
// }
|
||||
|
||||
.el-divider--horizontal {
|
||||
margin: 0px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,754 @@
|
|||
<!-- 网关通道 -->
|
||||
<template>
|
||||
<div>
|
||||
<!-- v-click-outside="closeMenu" -->
|
||||
<div>
|
||||
<div class="tree_menu" v-show="dialogVisible">
|
||||
<el-tree :data="$store.state.tree" :props="defaultProps" default-expand-all @node-contextmenu="rightClick"
|
||||
@node-click="treeNodeClick" ref="tree">
|
||||
<!-- :render-content="renderContent" -->
|
||||
<span class="custom-tree-node" slot-scope="{ node, data }">
|
||||
<template v-if="data.editing == 1">
|
||||
<el-button type="mini" v-if="flag" style="right: 50px; top: 0; position: absolute; border: none"
|
||||
@click.stop="done">完成</el-button>
|
||||
<el-button type="mini" style="right: 0; top: 0; position: absolute; border: none"
|
||||
@click.stop="edit">编辑</el-button>
|
||||
<span v-if="!flag">{{ data.label }}</span>
|
||||
<el-input v-else style="width: 150px" v-model="gateway"></el-input>
|
||||
</template>
|
||||
<template v-else>{{ data.label }}</template>
|
||||
</span>
|
||||
</el-tree>
|
||||
<!-- 树形控件右键组件 -->
|
||||
<div v-show="menuShow" class="tree_rightmenu" :style="{ ...rightMenu }">
|
||||
<el-menu class="el-menu-vertical-demo" @select="selectMenuNode" default-active="#0078FE">
|
||||
<el-menu-item id="menuitem" index="1" style="font-size: 12px">
|
||||
<span slot="title">新建通道</span>
|
||||
</el-menu-item>
|
||||
<el-menu-item index="2" style="font-size: 12px">
|
||||
<span slot="title">取 消</span>
|
||||
</el-menu-item>
|
||||
</el-menu>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pas_params">
|
||||
<el-dialog title="通道参数设置" :visible.sync="add_passage" width="765px" v-loading="Loading">
|
||||
<el-form :model="FormData" :label-position="labelPosition" :rules="rules" ref="ruleForm">
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="通道名称:" :label-width="formLabelWidth" prop="tdpz_tdmc">
|
||||
<el-select v-model="FormData.tdpz_tdmc" placeholder="" style="width: 200px; height: 30px">
|
||||
<el-option v-for="(item, index) in options1" :key="index" :label="item.label" :value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="通道:" :label-width="formLabelWidth" prop="tdpz_td">
|
||||
<el-select v-model="FormData.tdpz_td" placeholder="" style="width: 200px; height: 30px">
|
||||
<el-option v-for="(item, index) in options2" :key="index" :label="item.label" :value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="驱动名称:" :label-width="formLabelWidth" prop="tdpz_qdmc">
|
||||
<el-row>
|
||||
<el-col :span="18">
|
||||
<el-input v-model="FormData.tdpz_qdmc" placeholder="" style="width: 200px; height: 30px"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-button style="width: 50px; height: 30px" @click="getDriveName">...</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="IP地址:" :label-width="formLabelWidth" prop="tdpz_ip">
|
||||
<el-row>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="tdpz_ip1" style="width: 43px; height: 30px"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1" style="color: #fff">. </el-col>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="tdpz_ip2" style="width: 43px; height: 30px"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1" style="color: #fff">.</el-col>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="tdpz_ip3" style="width: 43px; height: 30px"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1" style="color: #fff">.</el-col>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="tdpz_ip4" style="width: 43px; height: 30px"></el-input>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="端口号:" :label-width="formLabelWidth" prop="tdpz_port">
|
||||
<el-input v-model="FormData.tdpz_port" placeholder="" style="width: 200px; height: 30px"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="超过时间(ms):" :label-width="formLabelWidth" prop="tdpz_cssj">
|
||||
<el-input v-model="FormData.tdpz_cssj" placeholder="" style="width: 200px; height: 30px"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="间隔时间(ms):" :label-width="formLabelWidth" prop="tdpz_jgsj">
|
||||
<el-input v-model="FormData.tdpz_jgsj" placeholder="" style="width: 200px; height: 30px"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="轮询时间(ms):" :label-width="formLabelWidth" prop="tdpz_lxsj">
|
||||
<el-input v-model="FormData.tdpz_lxsj" placeholder="" style="width: 200px; height: 30px"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="重复次数:" :label-width="formLabelWidth" prop="tdpz_cfcs">
|
||||
<el-input v-model="FormData.tdpz_cfcs" placeholder="" style="width: 200px; height: 30px"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<div class="super_parmams">
|
||||
<h3>高级参数</h3>
|
||||
<div>
|
||||
<i class="el-icon-caret-bottom" v-if="is_retract"></i>
|
||||
<i class="el-icon-caret-top" v-else="is_retract"></i>
|
||||
<el-button type="text" plain @click="getRetract" style="
|
||||
width: 28px;
|
||||
border: none;
|
||||
color: rgba(16, 16, 16, 1);
|
||||
font-size: 14px;
|
||||
text-align: left;
|
||||
">
|
||||
收起</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="super_con" v-show="is_retract">
|
||||
<el-form :label-position="labelPosition" :rules="rules" ref="ruleForm">
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item>
|
||||
<el-checkbox v-model="FormData.tdpz_watchtime">watch time(s)</el-checkbox>
|
||||
<el-input v-model="input1" placeholder="" style="width: 200px; height: 30px"
|
||||
:disabled="isdisabled"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item>
|
||||
<el-checkbox v-model="FormData.tdpz_cjsylxdz">采集使用连续地址</el-checkbox>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="读写占空比:" :label-width="formLabelWidth">
|
||||
<el-row>
|
||||
<el-col :span="10">
|
||||
<el-input v-model="tdpz_dxzkb1" style="width: 91px; height: 30px"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="4">: </el-col>
|
||||
<el-col :span="10">
|
||||
<el-input v-model="tdpz_dxzkb2" style="width: 91px; height: 30px"></el-input>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="05/0F:" :label-width="formLabelWidth">
|
||||
<el-row>
|
||||
<el-col :span="8"><el-radio v-model="FormData.tdpz_050F" label="auto">auto</el-radio></el-col>
|
||||
<el-col :span="8"><el-radio v-model="FormData.tdpz_050F" label="05">05</el-radio></el-col>
|
||||
<el-col :span="8"><el-radio v-model="FormData.tdpz_050F" label="0F">0F</el-radio></el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="06/10:" :label-width="formLabelWidth">
|
||||
<el-row>
|
||||
<el-col :span="8"><el-radio v-model="FormData.tdpz_0610" label="auto">auto</el-radio></el-col>
|
||||
<el-col :span="8"><el-radio v-model="FormData.tdpz_0610" label="06">06</el-radio></el-col>
|
||||
<el-col :span="8"><el-radio v-model="FormData.tdpz_0610" label="10">10</el-radio></el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</div>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="saveGate">保 存</el-button>
|
||||
<el-button @click="add_passage = false">取 消</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
<div class="drvieName_All" v-show="diag_drive">
|
||||
<div class="title">
|
||||
<p class="title_l">协议选择</p>
|
||||
<i class="el-icon-close title_r" @click="diag_drive = false"></i>
|
||||
</div>
|
||||
<el-divider></el-divider>
|
||||
<el-tree :data="datas2" :props="defaultProps" @node-click="handleDetailClick" default-expand-all></el-tree>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { SaveUserAnswer, GetUserAnswer } from "@/api/user";
|
||||
import { Loading } from "element-ui";
|
||||
|
||||
export default {
|
||||
name: "TestTreeView",
|
||||
|
||||
data() {
|
||||
return {
|
||||
flag: false,
|
||||
gateway: JSON.parse(localStorage.getItem("tree"))[0].label,
|
||||
FormData: {
|
||||
tdpz_tdmc: "有线区Channel1",
|
||||
tdpz_td: "网口",
|
||||
tdpz_qdmc: "ModbusTCPClient",
|
||||
tdpz_port: "",
|
||||
tdpz_cssj: "",
|
||||
tdpz_jgsj: "",
|
||||
tdpz_lxsj: "",
|
||||
tdpz_cfcs: "",
|
||||
tdpz_watchtime: true,
|
||||
tdpz_cjsylxdz: false,
|
||||
tdpz_dxzkb: "",
|
||||
tdpz_050F: "auto",
|
||||
tdpz_0610: "auto",
|
||||
},
|
||||
tdpz_dxzkb1: "1",
|
||||
tdpz_dxzkb2: "1",
|
||||
tdpz_ip1: "",
|
||||
tdpz_ip2: "",
|
||||
tdpz_ip3: "",
|
||||
tdpz_ip4: "",
|
||||
options1: [
|
||||
{
|
||||
value: "有线区Channel1",
|
||||
label: "有线区Channel1",
|
||||
},
|
||||
{
|
||||
value: "无线区Channel1",
|
||||
label: "无线区Channel1",
|
||||
},
|
||||
],
|
||||
options2: [
|
||||
{
|
||||
value: "网口",
|
||||
label: "网口",
|
||||
},
|
||||
{
|
||||
value: "串口",
|
||||
label: "串口",
|
||||
},
|
||||
],
|
||||
value1: "有线区Channel1",
|
||||
value2: "网口",
|
||||
diag_drive: false,
|
||||
isdisabled: true,
|
||||
radio: "1",
|
||||
is_retract: true,
|
||||
labelPosition: "left",
|
||||
formLabelWidth: "116px",
|
||||
input1: 192,
|
||||
add_passage: false,
|
||||
rightMenu: "",
|
||||
dialogVisible: true,
|
||||
menuShow: false,
|
||||
datas: [],
|
||||
datas2: [
|
||||
{
|
||||
label: "通用标准",
|
||||
children: [
|
||||
{
|
||||
label: "ModbusTCPClient",
|
||||
},
|
||||
{
|
||||
label: "ModbusRTU_over_TCP",
|
||||
},
|
||||
{
|
||||
label: "OPCUAClient",
|
||||
},
|
||||
{
|
||||
label: "OPCDAClient",
|
||||
},
|
||||
{
|
||||
label: "MQTTClient",
|
||||
},
|
||||
{
|
||||
label: "OPCXMLDAClient",
|
||||
},
|
||||
{
|
||||
label: "环保212协议网口监听",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "PLC",
|
||||
children: [
|
||||
{
|
||||
label: "Slemens S7-200 Network",
|
||||
},
|
||||
{
|
||||
label: "Slemens S7-300 Network",
|
||||
},
|
||||
{
|
||||
label: "Slemens S7-400 Network",
|
||||
},
|
||||
{
|
||||
label: "Slemens S7-1200 Network",
|
||||
},
|
||||
{
|
||||
label: "Slemens S7-1500 Network",
|
||||
},
|
||||
{
|
||||
label: "EtherNet/IP CIP协议(AB OMR ON)",
|
||||
},
|
||||
{
|
||||
label: "MC_Qna-3E(三菱 基恩士 松下)",
|
||||
},
|
||||
{
|
||||
label: "MC_A-1E_Binary",
|
||||
},
|
||||
{
|
||||
label: "OMRON-FINS",
|
||||
},
|
||||
{
|
||||
label: "横河PLC",
|
||||
},
|
||||
{
|
||||
label: "西门子FetchWirte",
|
||||
},
|
||||
{
|
||||
label: "富机 FUJI_SPH_NET",
|
||||
},
|
||||
{
|
||||
label: "基恩士上位链路通讯",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "智能建筑",
|
||||
children: [],
|
||||
},
|
||||
{
|
||||
label: "厂家定制",
|
||||
children: [],
|
||||
},
|
||||
{
|
||||
label: "电力行业标准",
|
||||
children: [
|
||||
{
|
||||
label: "IEC104",
|
||||
},
|
||||
{
|
||||
label: "DLT645_over_TCP",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "CNC数控",
|
||||
children: [],
|
||||
},
|
||||
{
|
||||
label: "私有协议",
|
||||
children: [],
|
||||
},
|
||||
],
|
||||
defaultProps: {
|
||||
children: "children",
|
||||
label: "label",
|
||||
},
|
||||
rules: {
|
||||
tdpz_tdmc: [
|
||||
{ required: true, message: "请输入通道名称", trigger: "change" },
|
||||
],
|
||||
tdpz_td: [{ required: true, message: "请输入通道", trigger: "change" }],
|
||||
tdpz_qdmc: [
|
||||
{ required: true, message: "请输入驱动名称", trigger: "change" },
|
||||
],
|
||||
tdpz_ip: [{ required: true, message: "请输入ip地址", trigger: "blur" }],
|
||||
tdpz_port: [
|
||||
{ required: true, message: "请输入端口号", trigger: "blur" },
|
||||
],
|
||||
tdpz_cssj: [
|
||||
{ required: true, message: "请输入超出时间", trigger: "blur" },
|
||||
],
|
||||
tdpz_jgsj: [
|
||||
{ required: true, message: "请输入间隔时间", trigger: "blur" },
|
||||
],
|
||||
tdpz_lxsj: [
|
||||
{ required: true, message: "请输入轮询时间", trigger: "blur" },
|
||||
],
|
||||
tdpz_cfcs: [
|
||||
{ required: true, message: "请输入重复次数", trigger: "blur" },
|
||||
],
|
||||
},
|
||||
};
|
||||
},
|
||||
created() {
|
||||
console.log(this.$store.state.tree);
|
||||
},
|
||||
methods: {
|
||||
//编辑
|
||||
edit(event) {
|
||||
this.flag = true;
|
||||
},
|
||||
//完成编辑
|
||||
done(event) {
|
||||
this.flag = false;
|
||||
let tree = this.$store.state.tree;
|
||||
tree[0].label = this.gateway;
|
||||
this.$store.commit("setTree", tree);
|
||||
},
|
||||
rightClick(e, data, node) {
|
||||
this.menuShow = false;
|
||||
this.menuShow = true;
|
||||
e.preventDefault(); //关闭浏览器右键默认事件
|
||||
this.rightMenu = { top: e.pageY + "px", left: e.pageX + "px" };
|
||||
document.addEventListener("click", (ev) => {
|
||||
ev.stopImmediatePropagation();
|
||||
if (ev.target !== document.querySelector(".el-menu-item.is-active")) {
|
||||
this.foo();
|
||||
}
|
||||
});
|
||||
},
|
||||
// 点击时候的判断,判断是否为新增网关
|
||||
selectMenuNode(index, indexPath) {
|
||||
console.log(index);
|
||||
if (index == 1) {
|
||||
this.add_passage = true;
|
||||
}
|
||||
},
|
||||
foo() {
|
||||
// 取消鼠标监听事件 菜单栏
|
||||
this.menuShow = false;
|
||||
document.removeEventListener("click", this.foo); // 关掉监听，
|
||||
},
|
||||
treeNodeClick(key) {
|
||||
// console.log
|
||||
this.foo();
|
||||
},
|
||||
// 收起点击事件的判断
|
||||
getRetract() {
|
||||
if (this.is_retract == true) {
|
||||
this.is_retract = false;
|
||||
} else {
|
||||
this.is_retract = true;
|
||||
}
|
||||
},
|
||||
getDriveName() {
|
||||
this.diag_drive = true;
|
||||
},
|
||||
Merge(value, value1, value2, value3, value4) {
|
||||
value = value1 + "." + value2 + "." + value3 + "." + value4;
|
||||
return value;
|
||||
},
|
||||
async saveGate() {
|
||||
this.add_passage = false;
|
||||
var obj = {
|
||||
tdpz_tdmc: this.FormData.tdpz_tdmc,
|
||||
tdpz_td: this.FormData.tdpz_td,
|
||||
tdpz_qdmc: this.FormData.tdpz_qdmc,
|
||||
tdpz_port: this.FormData.tdpz_port,
|
||||
tdpz_ccsj: this.FormData.tdpz_cssj,
|
||||
tdpz_jgsj: this.FormData.tdpz_jgsj,
|
||||
tdpz_ip: this.tdpz_ip1 + "." + this.tdpz_ip2 + "." + this.tdpz_ip3 + "." + this.tdpz_ip4,
|
||||
tdpz_lxsj: this.FormData.tdpz_lxsj,
|
||||
tdpz_cfcs: this.FormData.tdpz_cfcs,
|
||||
tdpz_watchtime: String(Number(this.FormData.tdpz_watchtime)),
|
||||
tdpz_cjsylxdz: String(Number(this.FormData.tdpz_cjsylxdz)),
|
||||
tdpz_dxzkb: this.tdpz_dxzkb1 + ":" + this.tdpz_dxzkb2,
|
||||
tdpz_050F: this.FormData.tdpz_050F,
|
||||
tdpz_0610: this.FormData.tdpz_0610,
|
||||
}
|
||||
let datas = sessionStorage.getItem("DB-IotLite_yx");
|
||||
datas = { ...JSON.parse(datas), ...obj };
|
||||
let res = await SaveUserAnswer({
|
||||
mark: "DB-IotLite_yx",
|
||||
user_id: "USER202307301109254198",
|
||||
mark_value: JSON.stringify(datas),
|
||||
});
|
||||
if (res.status == 200) {
|
||||
this.$message({
|
||||
message: '保存成功',
|
||||
type: 'success'
|
||||
});
|
||||
}
|
||||
sessionStorage.setItem("DB-IotLite_yx", JSON.stringify(datas));
|
||||
console.log(res);
|
||||
console.log(res.data.data.mark_value);
|
||||
// this.$router.push("/dbcollectdevice");
|
||||
// const newChild = { id: id++, label: `${this.$store.state.tree}`, children: [] };
|
||||
// if (!data.children) {
|
||||
// this.$set(data, 'children', []);
|
||||
// }
|
||||
// data.children.push(newChild);
|
||||
|
||||
},
|
||||
handleDetailClick(data, node, value) {
|
||||
console.log(data.label);
|
||||
this.FormData.tdpz_qdmc = data.label;
|
||||
this.diag_drive = false;
|
||||
},
|
||||
async GetUserAnswer() {
|
||||
let answer = await GetUserAnswer({
|
||||
mark: "DB-IotLite_yx",
|
||||
user_id: "USER202307301109254198",
|
||||
});
|
||||
console.log(answer);
|
||||
let obj = JSON.parse(answer.data.data.mark_value);
|
||||
console.log(obj);
|
||||
// this.FormData.
|
||||
if (obj.tdpz_dxzkb) {
|
||||
this.tdpz_dxzkb1 = obj.tdpz_dxzkb.split(":")[0];
|
||||
this.tdpz_dxzkb2 = obj.tdpz_dxzkb.split(":")[1];
|
||||
}
|
||||
this.FormData.tdpz_watchtime = Boolean(Number(obj.tdpz_watchtime));
|
||||
// console.log(this.FormData.tdpz_watchtime);
|
||||
this.FormData.tdpz_cjsylxdz = Boolean(Number(obj.tdpz_cjsylxdz));
|
||||
if (obj.tdpz_ip) {
|
||||
this.tdpz_ip1 = obj.tdpz_ip.split(".")[0];
|
||||
this.tdpz_ip2 = obj.tdpz_ip.split(".")[1];
|
||||
this.tdpz_ip3 = obj.tdpz_ip.split(".")[2];
|
||||
this.tdpz_ip4 = obj.tdpz_ip.split(".")[3];
|
||||
}
|
||||
this.FormData.tdpz_tdmc = obj.tdpz_tdmc;
|
||||
this.FormData.tdpz_td = obj.tdpz_td;
|
||||
this.FormData.tdpz_qdmc = obj.tdpz_qdmc;
|
||||
this.FormData.tdpz_050F = obj.tdpz_050F;
|
||||
this.FormData.tdpz_0610 = obj.tdpz_0610;
|
||||
this.FormData.tdpz_port = obj.tdpz_port;
|
||||
this.FormData.tdpz_cssj = obj.tdpz_cssj;
|
||||
this.FormData.tdpz_jgsj = obj.tdpz_jgsj;
|
||||
this.FormData.tdpz_lxsj = obj.tdpz_lxsj;
|
||||
this.FormData.tdpz_cfcs = obj.tdpz_cfcs;
|
||||
},
|
||||
renderContent(h, { node, data, store }) {
|
||||
return (
|
||||
<span class="custom-tree-node">
|
||||
<span>{node.label}</span>
|
||||
</span>);
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.Loading = true;
|
||||
this.GetUserAnswer();
|
||||
this.Loading = false;
|
||||
// let res2 = GetUserAnswer()
|
||||
},
|
||||
|
||||
watch: {
|
||||
// "FormData.tdpz_watchtime": {
|
||||
// handler(old) {
|
||||
// if (old) {
|
||||
// this.isdisabled = false;
|
||||
// } else {
|
||||
// this.isdisabled = true;
|
||||
// }
|
||||
// },
|
||||
// },
|
||||
"FormData.tdpz_watchtime"(newval) {
|
||||
console.log(newval);
|
||||
if (newval) {
|
||||
this.isdisabled = true;
|
||||
} else {
|
||||
this.isdisabled = false;
|
||||
}
|
||||
},
|
||||
},
|
||||
directives: {
|
||||
clickoutside: {
|
||||
bind: function (el, binding, vnode) {
|
||||
function documentHandler(e) {
|
||||
if (el.contains(e.target)) {
|
||||
return false;
|
||||
}
|
||||
if (binding.expression) {
|
||||
binding.value(e);
|
||||
}
|
||||
}
|
||||
el._vueClickOutside_ = documentHandler;
|
||||
document.addEventListener("click", documentHandler);
|
||||
},
|
||||
unbind: function (el, binding) {
|
||||
document.removeEventListener("click", el._vueClickOutside_);
|
||||
delete el._vueClickOutside_;
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.tree_menu {
|
||||
position: absolute;
|
||||
width: 286px;
|
||||
left: 64px;
|
||||
top: 104px;
|
||||
width: 286px;
|
||||
height: 753px;
|
||||
line-height: 20px;
|
||||
border-radius: 3px;
|
||||
background-color: rgba(255, 255, 255, 1);
|
||||
text-align: center;
|
||||
border: 1px solid rgba(220, 220, 220, 1);
|
||||
}
|
||||
|
||||
.tree_rightmenu {
|
||||
position: fixed;
|
||||
width: 120px;
|
||||
border: 1px solid rgba(0, 0, 0, 0.15);
|
||||
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.super_parmams {
|
||||
display: flex;
|
||||
color: #fff !important;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: 668px;
|
||||
|
||||
i {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
/deep/ .pas_params {
|
||||
.el-col-12:last-child {
|
||||
padding-right: 150px;
|
||||
}
|
||||
|
||||
.el-col-12:first-child {
|
||||
padding-right: 38px;
|
||||
}
|
||||
|
||||
.el-input__inner {
|
||||
height: 30px;
|
||||
text-align: left;
|
||||
padding: 0px 8px;
|
||||
}
|
||||
|
||||
.el-row {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
|
||||
.el-col-1 {
|
||||
color: #fff !important;
|
||||
text-align: center;
|
||||
line-height: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.el-col-6 {
|
||||
height: 40px;
|
||||
top: 6px;
|
||||
left: 77px;
|
||||
position: relative;
|
||||
width: 50px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.super_con {
|
||||
.el-col-12:last-child {
|
||||
padding-right: 28px;
|
||||
}
|
||||
|
||||
.el-col-12:first-child {
|
||||
padding-right: 42px;
|
||||
}
|
||||
|
||||
.el-input__inner {
|
||||
text-align: left;
|
||||
padding: 0 8px;
|
||||
}
|
||||
|
||||
.el-row {
|
||||
color: #fff !important;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
|
||||
.el-col-4 {
|
||||
padding-left: 5px;
|
||||
width: 14px;
|
||||
text-align: center;
|
||||
line-height: 4px;
|
||||
height: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.el-dialog__footer {
|
||||
padding: 18px 1.25rem 50px;
|
||||
}
|
||||
|
||||
.dialog-footer {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
bottom: 45px;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
/deep/ .drvieName_All {
|
||||
position: absolute;
|
||||
left: 1408px;
|
||||
top: 140px;
|
||||
width: 435px;
|
||||
max-height: 720px;
|
||||
z-index: 10000;
|
||||
border: 1px solid #f5f5f5;
|
||||
|
||||
.title {
|
||||
background-color: #fff;
|
||||
padding: 5px 6px 5px 25px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.title_l {
|
||||
width: 103px;
|
||||
height: 26px;
|
||||
color: rgba(16, 16, 16, 1);
|
||||
font-size: 18px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.title_r {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
line-height: 24px;
|
||||
cursor: pointer;
|
||||
color: rgba(111, 103, 103, 1);
|
||||
}
|
||||
}
|
||||
|
||||
// h3 {
|
||||
// padding-bottom: 10px;
|
||||
// background-color: #fff;
|
||||
// }
|
||||
|
||||
.el-divider--horizontal {
|
||||
margin: 0px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
<template>
|
||||
<div>
|
||||
<el-tree :data="treeData" @node-contextmenu="handleContextMenu"></el-tree>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,116 @@
|
|||
<template>
|
||||
<div>
|
||||
<el-tree :data="treeData" @node-contextmenu="handleContextMenu"></el-tree>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
treeData: [
|
||||
{
|
||||
label: "Gateway",
|
||||
id: 1,
|
||||
editing: true,
|
||||
children: [
|
||||
{
|
||||
label: "数据采集",
|
||||
id: 11,
|
||||
children: [
|
||||
{
|
||||
label: "I/O点",
|
||||
id: 111,
|
||||
},
|
||||
{
|
||||
label: "用户点",
|
||||
id: 112,
|
||||
},
|
||||
{
|
||||
label: "计算点",
|
||||
id: 113,
|
||||
},
|
||||
{
|
||||
label: "系统点",
|
||||
id: 114,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "数据服务",
|
||||
id: 12,
|
||||
children: [
|
||||
{
|
||||
label: "Modbus",
|
||||
id: 121,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "IOT",
|
||||
id: 13,
|
||||
children: [
|
||||
{
|
||||
label: "Mqtt Client",
|
||||
id: 131,
|
||||
},
|
||||
{
|
||||
label: "Alink",
|
||||
id: 132,
|
||||
},
|
||||
{
|
||||
label: "Tlink",
|
||||
id: 133,
|
||||
},
|
||||
{
|
||||
label: "loTDDC",
|
||||
id: 134,
|
||||
},
|
||||
{
|
||||
label: "Ulink",
|
||||
id: 135,
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
handleContextMenu(node, e) {
|
||||
// 右击节点时的事件处理
|
||||
e.preventDefault();
|
||||
|
||||
this.$contextMenu.show({
|
||||
items: [
|
||||
{
|
||||
label: '新增',
|
||||
command: 'add',
|
||||
},
|
||||
{
|
||||
label: '取消',
|
||||
command: 'cancel',
|
||||
},
|
||||
],
|
||||
event: e,
|
||||
node: node,
|
||||
onclick: this.handleContextMenuItemClick,
|
||||
});
|
||||
},
|
||||
handleContextMenuItemClick({ command }, node) {
|
||||
if (command === 'add') {
|
||||
// 执行新增操作
|
||||
this.addNode(node);
|
||||
}
|
||||
},
|
||||
addNode(parentNode) {
|
||||
// 在树节点上添加一个子节点
|
||||
const newNode = {
|
||||
label: '新节点',
|
||||
children: [],
|
||||
};
|
||||
this.$refs.tree.append(parentNode, newNode);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
@ -0,0 +1,115 @@
|
|||
<template>
|
||||
<div>
|
||||
<el-tree :data="treeData" @node-contextmenu="handleContextMenu"></el-tree>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
treeData: [
|
||||
{
|
||||
label: "Gateway",
|
||||
id: 1,
|
||||
editing: true,
|
||||
children: [
|
||||
{
|
||||
label: "数据采集",
|
||||
id: 11,
|
||||
children: [
|
||||
{
|
||||
label: "I/O点",
|
||||
id: 111,
|
||||
},
|
||||
{
|
||||
label: "用户点",
|
||||
id: 112,
|
||||
},
|
||||
{
|
||||
label: "计算点",
|
||||
id: 113,
|
||||
},
|
||||
{
|
||||
label: "系统点",
|
||||
id: 114,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "数据服务",
|
||||
id: 12,
|
||||
children: [
|
||||
{
|
||||
label: "Modbus",
|
||||
id: 121,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "IOT",
|
||||
id: 13,
|
||||
children: [
|
||||
{
|
||||
label: "Mqtt Client",
|
||||
id: 131,
|
||||
},
|
||||
{
|
||||
label: "Alink",
|
||||
id: 132,
|
||||
},
|
||||
{
|
||||
label: "Tlink",
|
||||
id: 133,
|
||||
},
|
||||
{
|
||||
label: "loTDDC",
|
||||
id: 134,
|
||||
},
|
||||
{
|
||||
label: "Ulink",
|
||||
id: 135,
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
handleContextMenu(node, e) {
|
||||
// 右击节点时的事件处理
|
||||
e.preventDefault;
|
||||
this.$contextMenu.show({
|
||||
items: [
|
||||
{
|
||||
label: '新增',
|
||||
command: 'add',
|
||||
},
|
||||
{
|
||||
label: '取消',
|
||||
command: 'cancel',
|
||||
},
|
||||
],
|
||||
event: e,
|
||||
node: node,
|
||||
onclick: this.handleContextMenuItemClick,
|
||||
});
|
||||
},
|
||||
handleContextMenuItemClick({ command }, node) {
|
||||
if (command === 'add') {
|
||||
// 执行新增操作
|
||||
this.addNode(node);
|
||||
}
|
||||
},
|
||||
addNode(parentNode) {
|
||||
// 在树节点上添加一个子节点
|
||||
const newNode = {
|
||||
label: '新节点',
|
||||
children: [],
|
||||
};
|
||||
this.$refs.tree.append(parentNode, newNode);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
@ -0,0 +1,115 @@
|
|||
<template>
|
||||
<div>
|
||||
<el-tree :data="treeData" @node-contextmenu="handleContextMenu"></el-tree>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
treeData: [
|
||||
{
|
||||
label: "Gateway",
|
||||
id: 1,
|
||||
editing: true,
|
||||
children: [
|
||||
{
|
||||
label: "数据采集",
|
||||
id: 11,
|
||||
children: [
|
||||
{
|
||||
label: "I/O点",
|
||||
id: 111,
|
||||
},
|
||||
{
|
||||
label: "用户点",
|
||||
id: 112,
|
||||
},
|
||||
{
|
||||
label: "计算点",
|
||||
id: 113,
|
||||
},
|
||||
{
|
||||
label: "系统点",
|
||||
id: 114,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "数据服务",
|
||||
id: 12,
|
||||
children: [
|
||||
{
|
||||
label: "Modbus",
|
||||
id: 121,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "IOT",
|
||||
id: 13,
|
||||
children: [
|
||||
{
|
||||
label: "Mqtt Client",
|
||||
id: 131,
|
||||
},
|
||||
{
|
||||
label: "Alink",
|
||||
id: 132,
|
||||
},
|
||||
{
|
||||
label: "Tlink",
|
||||
id: 133,
|
||||
},
|
||||
{
|
||||
label: "loTDDC",
|
||||
id: 134,
|
||||
},
|
||||
{
|
||||
label: "Ulink",
|
||||
id: 135,
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
handleContextMenu(node, e) {
|
||||
// 右击节点时的事件处理
|
||||
e.preventDefault;
|
||||
this.$contextMenu.show({
|
||||
items: [
|
||||
{
|
||||
label: '新增',
|
||||
command: 'add',
|
||||
},
|
||||
{
|
||||
label: '取消',
|
||||
command: 'cancel',
|
||||
},
|
||||
],
|
||||
event: e,
|
||||
node: node,
|
||||
onclick: this.handleContextMenuItemClick,
|
||||
});
|
||||
},
|
||||
handleContextMenuItemClick({ command }, node) {
|
||||
if (command === 'add') {
|
||||
// 执行新增操作
|
||||
this.addNode(node);
|
||||
}
|
||||
},
|
||||
addNode(parentNode) {
|
||||
// 在树节点上添加一个子节点
|
||||
const newNode = {
|
||||
label: '新节点',
|
||||
children: [],
|
||||
};
|
||||
this.$refs.tree.append(parentNode, newNode);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
@ -0,0 +1,115 @@
|
|||
<template>
|
||||
<div>
|
||||
<el-tree :data="treeData" @node-contextmenu="handleContextMenu"></el-tree>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
treeData: [
|
||||
{
|
||||
label: "Gateway",
|
||||
id: 1,
|
||||
editing: true,
|
||||
children: [
|
||||
{
|
||||
label: "数据采集",
|
||||
id: 11,
|
||||
children: [
|
||||
{
|
||||
label: "I/O点",
|
||||
id: 111,
|
||||
},
|
||||
{
|
||||
label: "用户点",
|
||||
id: 112,
|
||||
},
|
||||
{
|
||||
label: "计算点",
|
||||
id: 113,
|
||||
},
|
||||
{
|
||||
label: "系统点",
|
||||
id: 114,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "数据服务",
|
||||
id: 12,
|
||||
children: [
|
||||
{
|
||||
label: "Modbus",
|
||||
id: 121,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "IOT",
|
||||
id: 13,
|
||||
children: [
|
||||
{
|
||||
label: "Mqtt Client",
|
||||
id: 131,
|
||||
},
|
||||
{
|
||||
label: "Alink",
|
||||
id: 132,
|
||||
},
|
||||
{
|
||||
label: "Tlink",
|
||||
id: 133,
|
||||
},
|
||||
{
|
||||
label: "loTDDC",
|
||||
id: 134,
|
||||
},
|
||||
{
|
||||
label: "Ulink",
|
||||
id: 135,
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
handleContextMenu(node, e) {
|
||||
// 右击节点时的事件处理
|
||||
e.preventDefault();
|
||||
this.$contextMenu.show({
|
||||
items: [
|
||||
{
|
||||
label: '新增',
|
||||
command: 'add',
|
||||
},
|
||||
{
|
||||
label: '取消',
|
||||
command: 'cancel',
|
||||
},
|
||||
],
|
||||
event: e,
|
||||
node: node,
|
||||
onclick: this.handleContextMenuItemClick,
|
||||
});
|
||||
},
|
||||
handleContextMenuItemClick({ command }, node) {
|
||||
if (command === 'add') {
|
||||
// 执行新增操作
|
||||
this.addNode(node);
|
||||
}
|
||||
},
|
||||
addNode(parentNode) {
|
||||
// 在树节点上添加一个子节点
|
||||
const newNode = {
|
||||
label: '新节点',
|
||||
children: [],
|
||||
};
|
||||
this.$refs.tree.append(parentNode, newNode);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
@ -0,0 +1,115 @@
|
|||
<template>
|
||||
<div>
|
||||
<el-tree :data="treeData" @node-contextmenu="handleContextMenu"></el-tree>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
treeData: [
|
||||
{
|
||||
label: "Gateway",
|
||||
id: 1,
|
||||
editing: true,
|
||||
children: [
|
||||
{
|
||||
label: "数据采集",
|
||||
id: 11,
|
||||
children: [
|
||||
{
|
||||
label: "I/O点",
|
||||
id: 111,
|
||||
},
|
||||
{
|
||||
label: "用户点",
|
||||
id: 112,
|
||||
},
|
||||
{
|
||||
label: "计算点",
|
||||
id: 113,
|
||||
},
|
||||
{
|
||||
label: "系统点",
|
||||
id: 114,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "数据服务",
|
||||
id: 12,
|
||||
children: [
|
||||
{
|
||||
label: "Modbus",
|
||||
id: 121,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "IOT",
|
||||
id: 13,
|
||||
children: [
|
||||
{
|
||||
label: "Mqtt Client",
|
||||
id: 131,
|
||||
},
|
||||
{
|
||||
label: "Alink",
|
||||
id: 132,
|
||||
},
|
||||
{
|
||||
label: "Tlink",
|
||||
id: 133,
|
||||
},
|
||||
{
|
||||
label: "loTDDC",
|
||||
id: 134,
|
||||
},
|
||||
{
|
||||
label: "Ulink",
|
||||
id: 135,
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
handleContextMenu(node, event) {
|
||||
// 右击节点时的事件处理
|
||||
e.preventDefault();
|
||||
this.$contextMenu.show({
|
||||
items: [
|
||||
{
|
||||
label: '新增',
|
||||
command: 'add',
|
||||
},
|
||||
{
|
||||
label: '取消',
|
||||
command: 'cancel',
|
||||
},
|
||||
],
|
||||
event: e,
|
||||
node: node,
|
||||
onclick: this.handleContextMenuItemClick,
|
||||
});
|
||||
},
|
||||
handleContextMenuItemClick({ command }, node) {
|
||||
if (command === 'add') {
|
||||
// 执行新增操作
|
||||
this.addNode(node);
|
||||
}
|
||||
},
|
||||
addNode(parentNode) {
|
||||
// 在树节点上添加一个子节点
|
||||
const newNode = {
|
||||
label: '新节点',
|
||||
children: [],
|
||||
};
|
||||
this.$refs.tree.append(parentNode, newNode);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
@ -0,0 +1,115 @@
|
|||
<template>
|
||||
<div>
|
||||
<el-tree :data="treeData" @node-contextmenu="handleContextMenu"></el-tree>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
treeData: [
|
||||
{
|
||||
label: "Gateway",
|
||||
id: 1,
|
||||
editing: true,
|
||||
children: [
|
||||
{
|
||||
label: "数据采集",
|
||||
id: 11,
|
||||
children: [
|
||||
{
|
||||
label: "I/O点",
|
||||
id: 111,
|
||||
},
|
||||
{
|
||||
label: "用户点",
|
||||
id: 112,
|
||||
},
|
||||
{
|
||||
label: "计算点",
|
||||
id: 113,
|
||||
},
|
||||
{
|
||||
label: "系统点",
|
||||
id: 114,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "数据服务",
|
||||
id: 12,
|
||||
children: [
|
||||
{
|
||||
label: "Modbus",
|
||||
id: 121,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "IOT",
|
||||
id: 13,
|
||||
children: [
|
||||
{
|
||||
label: "Mqtt Client",
|
||||
id: 131,
|
||||
},
|
||||
{
|
||||
label: "Alink",
|
||||
id: 132,
|
||||
},
|
||||
{
|
||||
label: "Tlink",
|
||||
id: 133,
|
||||
},
|
||||
{
|
||||
label: "loTDDC",
|
||||
id: 134,
|
||||
},
|
||||
{
|
||||
label: "Ulink",
|
||||
id: 135,
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
handleContextMenu(node, e) {
|
||||
// 右击节点时的事件处理
|
||||
e.stoppreventDefault();
|
||||
this.$contextMenu.show({
|
||||
items: [
|
||||
{
|
||||
label: '新增',
|
||||
command: 'add',
|
||||
},
|
||||
{
|
||||
label: '取消',
|
||||
command: 'cancel',
|
||||
},
|
||||
],
|
||||
event: e,
|
||||
node: node,
|
||||
onclick: this.handleContextMenuItemClick,
|
||||
});
|
||||
},
|
||||
handleContextMenuItemClick({ command }, node) {
|
||||
if (command === 'add') {
|
||||
// 执行新增操作
|
||||
this.addNode(node);
|
||||
}
|
||||
},
|
||||
addNode(parentNode) {
|
||||
// 在树节点上添加一个子节点
|
||||
const newNode = {
|
||||
label: '新节点',
|
||||
children: [],
|
||||
};
|
||||
this.$refs.tree.append(parentNode, newNode);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
@ -0,0 +1,115 @@
|
|||
<template>
|
||||
<div>
|
||||
<el-tree :data="treeData" @node-contextmenu="handleContextMenu"></el-tree>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
treeData: [
|
||||
{
|
||||
label: "Gateway",
|
||||
id: 1,
|
||||
editing: true,
|
||||
children: [
|
||||
{
|
||||
label: "数据采集",
|
||||
id: 11,
|
||||
children: [
|
||||
{
|
||||
label: "I/O点",
|
||||
id: 111,
|
||||
},
|
||||
{
|
||||
label: "用户点",
|
||||
id: 112,
|
||||
},
|
||||
{
|
||||
label: "计算点",
|
||||
id: 113,
|
||||
},
|
||||
{
|
||||
label: "系统点",
|
||||
id: 114,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "数据服务",
|
||||
id: 12,
|
||||
children: [
|
||||
{
|
||||
label: "Modbus",
|
||||
id: 121,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "IOT",
|
||||
id: 13,
|
||||
children: [
|
||||
{
|
||||
label: "Mqtt Client",
|
||||
id: 131,
|
||||
},
|
||||
{
|
||||
label: "Alink",
|
||||
id: 132,
|
||||
},
|
||||
{
|
||||
label: "Tlink",
|
||||
id: 133,
|
||||
},
|
||||
{
|
||||
label: "loTDDC",
|
||||
id: 134,
|
||||
},
|
||||
{
|
||||
label: "Ulink",
|
||||
id: 135,
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
handleContextMenu(node, event) {
|
||||
// 右击节点时的事件处理
|
||||
e.preventDefault();
|
||||
this.$contextMenu.show({
|
||||
items: [
|
||||
{
|
||||
label: '新增',
|
||||
command: 'add',
|
||||
},
|
||||
{
|
||||
label: '取消',
|
||||
command: 'cancel',
|
||||
},
|
||||
],
|
||||
event: e,
|
||||
node: node,
|
||||
onclick: this.handleContextMenuItemClick,
|
||||
});
|
||||
},
|
||||
handleContextMenuItemClick({ command }, node) {
|
||||
if (command === 'add') {
|
||||
// 执行新增操作
|
||||
this.addNode(node);
|
||||
}
|
||||
},
|
||||
addNode(parentNode) {
|
||||
// 在树节点上添加一个子节点
|
||||
const newNode = {
|
||||
label: '新节点',
|
||||
children: [],
|
||||
};
|
||||
this.$refs.tree.append(parentNode, newNode);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
@ -0,0 +1,115 @@
|
|||
<template>
|
||||
<div>
|
||||
<el-tree :data="treeData" @node-contextmenu="handleContextMenu"></el-tree>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
treeData: [
|
||||
{
|
||||
label: "Gateway",
|
||||
id: 1,
|
||||
editing: true,
|
||||
children: [
|
||||
{
|
||||
label: "数据采集",
|
||||
id: 11,
|
||||
children: [
|
||||
{
|
||||
label: "I/O点",
|
||||
id: 111,
|
||||
},
|
||||
{
|
||||
label: "用户点",
|
||||
id: 112,
|
||||
},
|
||||
{
|
||||
label: "计算点",
|
||||
id: 113,
|
||||
},
|
||||
{
|
||||
label: "系统点",
|
||||
id: 114,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "数据服务",
|
||||
id: 12,
|
||||
children: [
|
||||
{
|
||||
label: "Modbus",
|
||||
id: 121,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "IOT",
|
||||
id: 13,
|
||||
children: [
|
||||
{
|
||||
label: "Mqtt Client",
|
||||
id: 131,
|
||||
},
|
||||
{
|
||||
label: "Alink",
|
||||
id: 132,
|
||||
},
|
||||
{
|
||||
label: "Tlink",
|
||||
id: 133,
|
||||
},
|
||||
{
|
||||
label: "loTDDC",
|
||||
id: 134,
|
||||
},
|
||||
{
|
||||
label: "Ulink",
|
||||
id: 135,
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
handleContextMenu(node, event) {
|
||||
// 右击节点时的事件处理
|
||||
event.preventDefault();
|
||||
this.$contextMenu.show({
|
||||
items: [
|
||||
{
|
||||
label: '新增',
|
||||
command: 'add',
|
||||
},
|
||||
{
|
||||
label: '取消',
|
||||
command: 'cancel',
|
||||
},
|
||||
],
|
||||
event: e,
|
||||
node: node,
|
||||
onclick: this.handleContextMenuItemClick,
|
||||
});
|
||||
},
|
||||
handleContextMenuItemClick({ command }, node) {
|
||||
if (command === 'add') {
|
||||
// 执行新增操作
|
||||
this.addNode(node);
|
||||
}
|
||||
},
|
||||
addNode(parentNode) {
|
||||
// 在树节点上添加一个子节点
|
||||
const newNode = {
|
||||
label: '新节点',
|
||||
children: [],
|
||||
};
|
||||
this.$refs.tree.append(parentNode, newNode);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
@ -0,0 +1,115 @@
|
|||
<template>
|
||||
<div>
|
||||
<el-tree :data="treeData" @node-contextmenu="handleContextMenu"></el-tree>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
treeData: [
|
||||
{
|
||||
label: "Gateway",
|
||||
id: 1,
|
||||
editing: true,
|
||||
children: [
|
||||
{
|
||||
label: "数据采集",
|
||||
id: 11,
|
||||
children: [
|
||||
{
|
||||
label: "I/O点",
|
||||
id: 111,
|
||||
},
|
||||
{
|
||||
label: "用户点",
|
||||
id: 112,
|
||||
},
|
||||
{
|
||||
label: "计算点",
|
||||
id: 113,
|
||||
},
|
||||
{
|
||||
label: "系统点",
|
||||
id: 114,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "数据服务",
|
||||
id: 12,
|
||||
children: [
|
||||
{
|
||||
label: "Modbus",
|
||||
id: 121,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "IOT",
|
||||
id: 13,
|
||||
children: [
|
||||
{
|
||||
label: "Mqtt Client",
|
||||
id: 131,
|
||||
},
|
||||
{
|
||||
label: "Alink",
|
||||
id: 132,
|
||||
},
|
||||
{
|
||||
label: "Tlink",
|
||||
id: 133,
|
||||
},
|
||||
{
|
||||
label: "loTDDC",
|
||||
id: 134,
|
||||
},
|
||||
{
|
||||
label: "Ulink",
|
||||
id: 135,
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
handleContextMenu(node, event) {
|
||||
// 右击节点时的事件处理
|
||||
event.preventDefault();
|
||||
this.$contextMenu.show({
|
||||
items: [
|
||||
{
|
||||
label: '新增',
|
||||
command: 'add',
|
||||
},
|
||||
{
|
||||
label: '取消',
|
||||
command: 'cancel',
|
||||
},
|
||||
],
|
||||
event: e,
|
||||
node: node,
|
||||
onclick: this.handleContextMenuItemClick,
|
||||
});
|
||||
},
|
||||
handleContextMenuItemClick({ command }, node) {
|
||||
if (command === 'add') {
|
||||
// 执行新增操作
|
||||
this.addNode(node);
|
||||
}
|
||||
},
|
||||
addNode(parentNode) {
|
||||
// 在树节点上添加一个子节点
|
||||
const newNode = {
|
||||
label: '新节点',
|
||||
children: [],
|
||||
};
|
||||
this.$refs.tree.append(parentNode, newNode);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
@ -0,0 +1,115 @@
|
|||
<template>
|
||||
<div>
|
||||
<el-tree :data="treeData" @node-contextmenu="handleContextMenu"></el-tree>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
treeData: [
|
||||
{
|
||||
label: "Gateway",
|
||||
id: 1,
|
||||
editing: true,
|
||||
children: [
|
||||
{
|
||||
label: "数据采集",
|
||||
id: 11,
|
||||
children: [
|
||||
{
|
||||
label: "I/O点",
|
||||
id: 111,
|
||||
},
|
||||
{
|
||||
label: "用户点",
|
||||
id: 112,
|
||||
},
|
||||
{
|
||||
label: "计算点",
|
||||
id: 113,
|
||||
},
|
||||
{
|
||||
label: "系统点",
|
||||
id: 114,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "数据服务",
|
||||
id: 12,
|
||||
children: [
|
||||
{
|
||||
label: "Modbus",
|
||||
id: 121,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "IOT",
|
||||
id: 13,
|
||||
children: [
|
||||
{
|
||||
label: "Mqtt Client",
|
||||
id: 131,
|
||||
},
|
||||
{
|
||||
label: "Alink",
|
||||
id: 132,
|
||||
},
|
||||
{
|
||||
label: "Tlink",
|
||||
id: 133,
|
||||
},
|
||||
{
|
||||
label: "loTDDC",
|
||||
id: 134,
|
||||
},
|
||||
{
|
||||
label: "Ulink",
|
||||
id: 135,
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
handleContextMenu(node, event) {
|
||||
// 右击节点时的事件处理
|
||||
// event.preventDefault();
|
||||
this.$contextMenu.show({
|
||||
items: [
|
||||
{
|
||||
label: '新增',
|
||||
command: 'add',
|
||||
},
|
||||
{
|
||||
label: '取消',
|
||||
command: 'cancel',
|
||||
},
|
||||
],
|
||||
event: e,
|
||||
node: node,
|
||||
onclick: this.handleContextMenuItemClick,
|
||||
});
|
||||
},
|
||||
handleContextMenuItemClick({ command }, node) {
|
||||
if (command === 'add') {
|
||||
// 执行新增操作
|
||||
this.addNode(node);
|
||||
}
|
||||
},
|
||||
addNode(parentNode) {
|
||||
// 在树节点上添加一个子节点
|
||||
const newNode = {
|
||||
label: '新节点',
|
||||
children: [],
|
||||
};
|
||||
this.$refs.tree.append(parentNode, newNode);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
@ -0,0 +1,116 @@
|
|||
<template>
|
||||
<div>
|
||||
<el-tree :data="treeData" @node-contextmenu="handleContextMenu"></el-tree>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
treeData: [
|
||||
{
|
||||
label: "Gateway",
|
||||
id: 1,
|
||||
editing: true,
|
||||
children: [
|
||||
{
|
||||
label: "数据采集",
|
||||
id: 11,
|
||||
children: [
|
||||
{
|
||||
label: "I/O点",
|
||||
id: 111,
|
||||
},
|
||||
{
|
||||
label: "用户点",
|
||||
id: 112,
|
||||
},
|
||||
{
|
||||
label: "计算点",
|
||||
id: 113,
|
||||
},
|
||||
{
|
||||
label: "系统点",
|
||||
id: 114,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "数据服务",
|
||||
id: 12,
|
||||
children: [
|
||||
{
|
||||
label: "Modbus",
|
||||
id: 121,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "IOT",
|
||||
id: 13,
|
||||
children: [
|
||||
{
|
||||
label: "Mqtt Client",
|
||||
id: 131,
|
||||
},
|
||||
{
|
||||
label: "Alink",
|
||||
id: 132,
|
||||
},
|
||||
{
|
||||
label: "Tlink",
|
||||
id: 133,
|
||||
},
|
||||
{
|
||||
label: "loTDDC",
|
||||
id: 134,
|
||||
},
|
||||
{
|
||||
label: "Ulink",
|
||||
id: 135,
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
handleContextMenu(node, event) {
|
||||
// 右击节点时的事件处理
|
||||
console.log(event);
|
||||
// event.preventDefault();
|
||||
this.$contextMenu.show({
|
||||
items: [
|
||||
{
|
||||
label: '新增',
|
||||
command: 'add',
|
||||
},
|
||||
{
|
||||
label: '取消',
|
||||
command: 'cancel',
|
||||
},
|
||||
],
|
||||
event: e,
|
||||
node: node,
|
||||
onclick: this.handleContextMenuItemClick,
|
||||
});
|
||||
},
|
||||
handleContextMenuItemClick({ command }, node) {
|
||||
if (command === 'add') {
|
||||
// 执行新增操作
|
||||
this.addNode(node);
|
||||
}
|
||||
},
|
||||
addNode(parentNode) {
|
||||
// 在树节点上添加一个子节点
|
||||
const newNode = {
|
||||
label: '新节点',
|
||||
children: [],
|
||||
};
|
||||
this.$refs.tree.append(parentNode, newNode);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
@ -0,0 +1,114 @@
|
|||
<template>
|
||||
<div>
|
||||
<el-tree :data="treeData" @node-contextmenu="handleContextMenu"></el-tree>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
treeData: [
|
||||
{
|
||||
label: "Gateway",
|
||||
id: 1,
|
||||
editing: true,
|
||||
children: [
|
||||
{
|
||||
label: "数据采集",
|
||||
id: 11,
|
||||
children: [
|
||||
{
|
||||
label: "I/O点",
|
||||
id: 111,
|
||||
},
|
||||
{
|
||||
label: "用户点",
|
||||
id: 112,
|
||||
},
|
||||
{
|
||||
label: "计算点",
|
||||
id: 113,
|
||||
},
|
||||
{
|
||||
label: "系统点",
|
||||
id: 114,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "数据服务",
|
||||
id: 12,
|
||||
children: [
|
||||
{
|
||||
label: "Modbus",
|
||||
id: 121,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "IOT",
|
||||
id: 13,
|
||||
children: [
|
||||
{
|
||||
label: "Mqtt Client",
|
||||
id: 131,
|
||||
},
|
||||
{
|
||||
label: "Alink",
|
||||
id: 132,
|
||||
},
|
||||
{
|
||||
label: "Tlink",
|
||||
id: 133,
|
||||
},
|
||||
{
|
||||
label: "loTDDC",
|
||||
id: 134,
|
||||
},
|
||||
{
|
||||
label: "Ulink",
|
||||
id: 135,
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
handleContextMenu(node, event) {
|
||||
// 右击节点时的事件处理
|
||||
this.$contextMenu.show({
|
||||
items: [
|
||||
{
|
||||
label: '新增',
|
||||
command: 'add',
|
||||
},
|
||||
{
|
||||
label: '取消',
|
||||
command: 'cancel',
|
||||
},
|
||||
],
|
||||
event: e,
|
||||
node: node,
|
||||
onclick: this.handleContextMenuItemClick,
|
||||
});
|
||||
},
|
||||
handleContextMenuItemClick({ command }, node) {
|
||||
if (command === 'add') {
|
||||
// 执行新增操作
|
||||
this.addNode(node);
|
||||
}
|
||||
},
|
||||
addNode(parentNode) {
|
||||
// 在树节点上添加一个子节点
|
||||
const newNode = {
|
||||
label: '新节点',
|
||||
children: [],
|
||||
};
|
||||
this.$refs.tree.append(parentNode, newNode);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
@ -0,0 +1,124 @@
|
|||
<template>
|
||||
<div>
|
||||
<el-tree :data="treeData" @contextmenu="handleContextMenu"></el-tree>
|
||||
<el-menu :model="contextMenu" v-show="contextMenuVisible" @click="handleContextMenuItemClick"></el-menu>
|
||||
<el-dialog v-model="dialogVisible" title="新增节点">
|
||||
<!-- 表单内容，可以根据需求自定义 -->
|
||||
<!-- ... -->
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="dialogVisible = false">取消</el-button>
|
||||
<el-button type="primary" @click="saveNode">保存</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
treeData: [
|
||||
{
|
||||
label: "Gateway",
|
||||
id: 1,
|
||||
editing: true,
|
||||
children: [
|
||||
{
|
||||
label: "数据采集",
|
||||
id: 11,
|
||||
children: [
|
||||
{
|
||||
label: "I/O点",
|
||||
id: 111,
|
||||
},
|
||||
{
|
||||
label: "用户点",
|
||||
id: 112,
|
||||
},
|
||||
{
|
||||
label: "计算点",
|
||||
id: 113,
|
||||
},
|
||||
{
|
||||
label: "系统点",
|
||||
id: 114,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "数据服务",
|
||||
id: 12,
|
||||
children: [
|
||||
{
|
||||
label: "Modbus",
|
||||
id: 121,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "IOT",
|
||||
id: 13,
|
||||
children: [
|
||||
{
|
||||
label: "Mqtt Client",
|
||||
id: 131,
|
||||
},
|
||||
{
|
||||
label: "Alink",
|
||||
id: 132,
|
||||
},
|
||||
{
|
||||
label: "Tlink",
|
||||
id: 133,
|
||||
},
|
||||
{
|
||||
label: "loTDDC",
|
||||
id: 134,
|
||||
},
|
||||
{
|
||||
label: "Ulink",
|
||||
id: 135,
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
handleContextMenu(node, event) {
|
||||
// 右击节点时的事件处理
|
||||
this.$contextMenu.show({
|
||||
items: [
|
||||
{
|
||||
label: '新增',
|
||||
command: 'add',
|
||||
},
|
||||
{
|
||||
label: '取消',
|
||||
command: 'cancel',
|
||||
},
|
||||
],
|
||||
event: e,
|
||||
node: node,
|
||||
onclick: this.handleContextMenuItemClick,
|
||||
});
|
||||
},
|
||||
handleContextMenuItemClick({ command }, node) {
|
||||
if (command === 'add') {
|
||||
// 执行新增操作
|
||||
this.addNode(node);
|
||||
}
|
||||
},
|
||||
addNode(parentNode) {
|
||||
// 在树节点上添加一个子节点
|
||||
const newNode = {
|
||||
label: '新节点',
|
||||
children: [],
|
||||
};
|
||||
this.$refs.tree.append(parentNode, newNode);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
@ -0,0 +1,74 @@
|
|||
<template>
|
||||
<div>
|
||||
<el-tree :data="treeData" @contextmenu="handleContextMenu"></el-tree>
|
||||
<el-menu :model="contextMenu" v-show="contextMenuVisible" @click="handleContextMenuItemClick"></el-menu>
|
||||
<el-dialog v-model="dialogVisible" title="新增节点">
|
||||
<!-- 表单内容，可以根据需求自定义 -->
|
||||
<!-- ... -->
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="dialogVisible = false">取消</el-button>
|
||||
<el-button type="primary" @click="saveNode">保存</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
treeData: [
|
||||
// 初始树的数据
|
||||
// ...
|
||||
],
|
||||
contextMenuVisible: false,
|
||||
contextMenu: [
|
||||
{ text: '新增', command: 'add' },
|
||||
{ text: '取消', command: 'cancel' }
|
||||
],
|
||||
dialogVisible: false,
|
||||
newNodeData: {
|
||||
// 新节点的数据，可以根据需求定义
|
||||
// ...
|
||||
},
|
||||
selectedNode: null
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
handleContextMenu(event, data) {
|
||||
// 右击节点时的事件处理
|
||||
event.preventDefault();
|
||||
this.contextMenuVisible = true;
|
||||
this.selectedNode = data;
|
||||
this.$nextTick(() => {
|
||||
this.$refs.contextMenu.open(event.pageX, event.pageY);
|
||||
});
|
||||
},
|
||||
handleContextMenuItemClick(command) {
|
||||
if (command === 'add') {
|
||||
this.dialogVisible = true;
|
||||
} else if (command === 'cancel') {
|
||||
this.contextMenuVisible = false;
|
||||
}
|
||||
},
|
||||
saveNode() {
|
||||
// 执行保存操作，将新节点添加到树的数据中
|
||||
// ...
|
||||
// 添加新节点
|
||||
const newNode = {
|
||||
// 新节点的数据，根据实际需求设置
|
||||
label: this.newNodeData.label,
|
||||
// ...
|
||||
};
|
||||
if (!this.selectedNode.children) {
|
||||
this.selectedNode.children = [];
|
||||
}
|
||||
this.selectedNode.children.push(newNode);
|
||||
|
||||
// 关闭弹出框和右击菜单
|
||||
this.dialogVisible = false;
|
||||
this.contextMenuVisible = false;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -0,0 +1,73 @@
|
|||
<template>
|
||||
<div>
|
||||
<el-tree :data="treeData" @contextmenu="handleContextMenu"></el-tree>
|
||||
<el-menu :model="contextMenu" v-show="contextMenuVisible" @click="handleContextMenuItemClick"></el-menu>
|
||||
<el-dialog v-model="dialogVisible" title="新增节点">
|
||||
<!-- 表单内容，可以根据需求自定义 -->
|
||||
<!-- ... -->
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="dialogVisible = false">取消</el-button>
|
||||
<el-button type="primary" @click="saveNode">保存</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
treeData: [
|
||||
// 初始树的数据
|
||||
// ...
|
||||
],
|
||||
contextMenuVisible: false,
|
||||
contextMenu: [
|
||||
{ text: '新增', command: 'add' },
|
||||
{ text: '取消', command: 'cancel' }
|
||||
],
|
||||
dialogVisible: false,
|
||||
newNodeData: {
|
||||
// 新节点的数据，可以根据需求定义
|
||||
// ...
|
||||
},
|
||||
selectedNode: null
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
handleContextMenu(event, data) {
|
||||
// 右击节点时的事件处理
|
||||
event.preventDefault();
|
||||
this.contextMenuVisible = true;
|
||||
this.selectedNode = data;
|
||||
this.$nextTick(() => {
|
||||
this.$refs.contextMenu.open(event.pageX, event.pageY);
|
||||
});
|
||||
},
|
||||
handleContextMenuItemClick(command) {
|
||||
if (command === 'add') {
|
||||
this.dialogVisible = true;
|
||||
} else if (command === 'cancel') {
|
||||
this.contextMenuVisible = false;
|
||||
}
|
||||
},
|
||||
saveNode() {
|
||||
// 执行保存操作，将新节点添加到树的数据中
|
||||
// ...
|
||||
// 添加新节点
|
||||
const newNode = {
|
||||
// 新节点的数据，根据实际需求设置
|
||||
label: this.newNodeData.label,
|
||||
// ...
|
||||
};
|
||||
if (!this.selectedNode.children) {
|
||||
this.selectedNode.children = [];
|
||||
}
|
||||
this.selectedNode.children.push(newNode);
|
||||
|
||||
// 关闭弹出框和右击菜单
|
||||
this.dialogVisible = false;
|
||||
this.contextMenuVisible = false;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -0,0 +1,136 @@
|
|||
<template>
|
||||
<div>
|
||||
<el-tree :data="treeData" @contextmenu="handleContextMenu"></el-tree>
|
||||
<el-menu :model="contextMenu" v-show="contextMenuVisible" @click="handleContextMenuItemClick"></el-menu>
|
||||
<el-dialog v-model="dialogVisible" title="新增节点">
|
||||
<!-- 表单内容，可以根据需求自定义 -->
|
||||
<!-- ... -->
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="dialogVisible = false">取消</el-button>
|
||||
<el-button type="primary" @click="saveNode">保存</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
treeData: [
|
||||
{
|
||||
label: "Gateway",
|
||||
id: 1,
|
||||
editing: true,
|
||||
children: [
|
||||
{
|
||||
label: "数据采集",
|
||||
id: 11,
|
||||
children: [
|
||||
{
|
||||
label: "I/O点",
|
||||
id: 111,
|
||||
},
|
||||
{
|
||||
label: "用户点",
|
||||
id: 112,
|
||||
},
|
||||
{
|
||||
label: "计算点",
|
||||
id: 113,
|
||||
},
|
||||
{
|
||||
label: "系统点",
|
||||
id: 114,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "数据服务",
|
||||
id: 12,
|
||||
children: [
|
||||
{
|
||||
label: "Modbus",
|
||||
id: 121,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "IOT",
|
||||
id: 13,
|
||||
children: [
|
||||
{
|
||||
label: "Mqtt Client",
|
||||
id: 131,
|
||||
},
|
||||
{
|
||||
label: "Alink",
|
||||
id: 132,
|
||||
},
|
||||
{
|
||||
label: "Tlink",
|
||||
id: 133,
|
||||
},
|
||||
{
|
||||
label: "loTDDC",
|
||||
id: 134,
|
||||
},
|
||||
{
|
||||
label: "Ulink",
|
||||
id: 135,
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
contextMenuVisible: false,
|
||||
contextMenu: [
|
||||
{ text: '新增', command: 'add' },
|
||||
{ text: '取消', command: 'cancel' }
|
||||
],
|
||||
dialogVisible: false,
|
||||
newNodeData: {
|
||||
// 新节点的数据，可以根据需求定义
|
||||
// ...
|
||||
},
|
||||
selectedNode: null
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
handleContextMenu(event, data) {
|
||||
// 右击节点时的事件处理
|
||||
event.preventDefault();
|
||||
this.contextMenuVisible = true;
|
||||
this.selectedNode = data;
|
||||
this.$nextTick(() => {
|
||||
this.$refs.contextMenu.open(event.pageX, event.pageY);
|
||||
});
|
||||
},
|
||||
handleContextMenuItemClick(command) {
|
||||
if (command === 'add') {
|
||||
this.dialogVisible = true;
|
||||
} else if (command === 'cancel') {
|
||||
this.contextMenuVisible = false;
|
||||
}
|
||||
},
|
||||
saveNode() {
|
||||
// 执行保存操作，将新节点添加到树的数据中
|
||||
// ...
|
||||
// 添加新节点
|
||||
const newNode = {
|
||||
// 新节点的数据，根据实际需求设置
|
||||
label: this.newNodeData.label,
|
||||
// ...
|
||||
};
|
||||
if (!this.selectedNode.children) {
|
||||
this.selectedNode.children = [];
|
||||
}
|
||||
this.selectedNode.children.push(newNode);
|
||||
|
||||
// 关闭弹出框和右击菜单
|
||||
this.dialogVisible = false;
|
||||
this.contextMenuVisible = false;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -0,0 +1,142 @@
|
|||
<template>
|
||||
<div>
|
||||
<el-tree
|
||||
:data="data"
|
||||
show-checkbox
|
||||
node-key="id"
|
||||
:props="defaultProps"
|
||||
@node-contextmenu="rightClick"
|
||||
@check="treeCheck"
|
||||
>
|
||||
</el-tree>
|
||||
<div id="perTreeMenu" v-if="tmDisplay" class="tree_menu" :style="{...rightMenu}">
|
||||
<ul>
|
||||
<li><i class="el-icon-tickets"></i> 详情</li>
|
||||
<li><i class="el-icon-edit"></i> 编辑</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
treeData: [
|
||||
{
|
||||
label: "Gateway",
|
||||
id: 1,
|
||||
editing: true,
|
||||
children: [
|
||||
{
|
||||
label: "数据采集",
|
||||
id: 11,
|
||||
children: [
|
||||
{
|
||||
label: "I/O点",
|
||||
id: 111,
|
||||
},
|
||||
{
|
||||
label: "用户点",
|
||||
id: 112,
|
||||
},
|
||||
{
|
||||
label: "计算点",
|
||||
id: 113,
|
||||
},
|
||||
{
|
||||
label: "系统点",
|
||||
id: 114,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "数据服务",
|
||||
id: 12,
|
||||
children: [
|
||||
{
|
||||
label: "Modbus",
|
||||
id: 121,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "IOT",
|
||||
id: 13,
|
||||
children: [
|
||||
{
|
||||
label: "Mqtt Client",
|
||||
id: 131,
|
||||
},
|
||||
{
|
||||
label: "Alink",
|
||||
id: 132,
|
||||
},
|
||||
{
|
||||
label: "Tlink",
|
||||
id: 133,
|
||||
},
|
||||
{
|
||||
label: "loTDDC",
|
||||
id: 134,
|
||||
},
|
||||
{
|
||||
label: "Ulink",
|
||||
id: 135,
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
contextMenuVisible: false,
|
||||
contextMenu: [
|
||||
{ text: '新增', command: 'add' },
|
||||
{ text: '取消', command: 'cancel' }
|
||||
],
|
||||
dialogVisible: false,
|
||||
newNodeData: {
|
||||
// 新节点的数据，可以根据需求定义
|
||||
// ...
|
||||
},
|
||||
selectedNode: null
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
handleContextMenu(event, data) {
|
||||
// 右击节点时的事件处理
|
||||
event.preventDefault();
|
||||
this.contextMenuVisible = true;
|
||||
this.selectedNode = data;
|
||||
this.$nextTick(() => {
|
||||
this.$refs.contextMenu.open(event.pageX, event.pageY);
|
||||
});
|
||||
},
|
||||
handleContextMenuItemClick(command) {
|
||||
if (command === 'add') {
|
||||
this.dialogVisible = true;
|
||||
} else if (command === 'cancel') {
|
||||
this.contextMenuVisible = false;
|
||||
}
|
||||
},
|
||||
saveNode() {
|
||||
// 执行保存操作，将新节点添加到树的数据中
|
||||
// ...
|
||||
// 添加新节点
|
||||
const newNode = {
|
||||
// 新节点的数据，根据实际需求设置
|
||||
label: this.newNodeData.label,
|
||||
// ...
|
||||
};
|
||||
if (!this.selectedNode.children) {
|
||||
this.selectedNode.children = [];
|
||||
}
|
||||
this.selectedNode.children.push(newNode);
|
||||
|
||||
// 关闭弹出框和右击菜单
|
||||
this.dialogVisible = false;
|
||||
this.contextMenuVisible = false;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -0,0 +1,135 @@
|
|||
<template>
|
||||
<div>
|
||||
<el-tree :data="data" show-checkbox node-key="id" :props="defaultProps" @node-contextmenu="rightClick"
|
||||
@check="treeCheck">
|
||||
</el-tree>
|
||||
<div id="perTreeMenu" v-if="tmDisplay" class="tree_menu" :style="{ ...rightMenu }">
|
||||
<ul>
|
||||
<li><i class="el-icon-tickets"></i> 详情</li>
|
||||
<li><i class="el-icon-edit"></i> 编辑</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
treeData: [
|
||||
{
|
||||
label: "Gateway",
|
||||
id: 1,
|
||||
editing: true,
|
||||
children: [
|
||||
{
|
||||
label: "数据采集",
|
||||
id: 11,
|
||||
children: [
|
||||
{
|
||||
label: "I/O点",
|
||||
id: 111,
|
||||
},
|
||||
{
|
||||
label: "用户点",
|
||||
id: 112,
|
||||
},
|
||||
{
|
||||
label: "计算点",
|
||||
id: 113,
|
||||
},
|
||||
{
|
||||
label: "系统点",
|
||||
id: 114,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "数据服务",
|
||||
id: 12,
|
||||
children: [
|
||||
{
|
||||
label: "Modbus",
|
||||
id: 121,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "IOT",
|
||||
id: 13,
|
||||
children: [
|
||||
{
|
||||
label: "Mqtt Client",
|
||||
id: 131,
|
||||
},
|
||||
{
|
||||
label: "Alink",
|
||||
id: 132,
|
||||
},
|
||||
{
|
||||
label: "Tlink",
|
||||
id: 133,
|
||||
},
|
||||
{
|
||||
label: "loTDDC",
|
||||
id: 134,
|
||||
},
|
||||
{
|
||||
label: "Ulink",
|
||||
id: 135,
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
contextMenuVisible: false,
|
||||
contextMenu: [
|
||||
{ text: '新增', command: 'add' },
|
||||
{ text: '取消', command: 'cancel' }
|
||||
],
|
||||
dialogVisible: false,
|
||||
newNodeData: {
|
||||
// 新节点的数据，可以根据需求定义
|
||||
// ...
|
||||
},
|
||||
selectedNode: null
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
handleContextMenu(event, data) {
|
||||
// 右击节点时的事件处理
|
||||
event.preventDefault();
|
||||
this.contextMenuVisible = true;
|
||||
this.selectedNode = data;
|
||||
this.$nextTick(() => {
|
||||
this.$refs.contextMenu.open(event.pageX, event.pageY);
|
||||
});
|
||||
},
|
||||
handleContextMenuItemClick(command) {
|
||||
if (command === 'add') {
|
||||
this.dialogVisible = true;
|
||||
} else if (command === 'cancel') {
|
||||
this.contextMenuVisible = false;
|
||||
}
|
||||
},
|
||||
saveNode() {
|
||||
// 执行保存操作，将新节点添加到树的数据中
|
||||
// ...
|
||||
// 添加新节点
|
||||
const newNode = {
|
||||
// 新节点的数据，根据实际需求设置
|
||||
label: this.newNodeData.label,
|
||||
// ...
|
||||
};
|
||||
if (!this.selectedNode.children) {
|
||||
this.selectedNode.children = [];
|
||||
}
|
||||
this.selectedNode.children.push(newNode);
|
||||
|
||||
// 关闭弹出框和右击菜单
|
||||
this.dialogVisible = false;
|
||||
this.contextMenuVisible = false;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -0,0 +1,112 @@
|
|||
<template>
|
||||
<div>
|
||||
<el-tree :data="data" show-checkbox node-key="id" :props="defaultProps" @node-contextmenu="rightClick"
|
||||
@check="treeCheck">
|
||||
</el-tree>
|
||||
<div id="perTreeMenu" v-if="tmDisplay" class="tree_menu" :style="{ ...rightMenu }">
|
||||
<ul>
|
||||
<li><i class="el-icon-tickets"></i> 详情</li>
|
||||
<li><i class="el-icon-edit"></i> 编辑</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
treeData: [
|
||||
{
|
||||
label: "Gateway",
|
||||
id: 1,
|
||||
editing: true,
|
||||
children: [
|
||||
{
|
||||
label: "数据采集",
|
||||
id: 11,
|
||||
children: [
|
||||
{
|
||||
label: "I/O点",
|
||||
id: 111,
|
||||
},
|
||||
{
|
||||
label: "用户点",
|
||||
id: 112,
|
||||
},
|
||||
{
|
||||
label: "计算点",
|
||||
id: 113,
|
||||
},
|
||||
{
|
||||
label: "系统点",
|
||||
id: 114,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "数据服务",
|
||||
id: 12,
|
||||
children: [
|
||||
{
|
||||
label: "Modbus",
|
||||
id: 121,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "IOT",
|
||||
id: 13,
|
||||
children: [
|
||||
{
|
||||
label: "Mqtt Client",
|
||||
id: 131,
|
||||
},
|
||||
{
|
||||
label: "Alink",
|
||||
id: 132,
|
||||
},
|
||||
{
|
||||
label: "Tlink",
|
||||
id: 133,
|
||||
},
|
||||
{
|
||||
label: "loTDDC",
|
||||
id: 134,
|
||||
},
|
||||
{
|
||||
label: "Ulink",
|
||||
id: 135,
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
contextMenuVisible: false,
|
||||
contextMenu: [
|
||||
{ text: '新增', command: 'add' },
|
||||
{ text: '取消', command: 'cancel' }
|
||||
],
|
||||
dialogVisible: false,
|
||||
newNodeData: {
|
||||
// 新节点的数据，可以根据需求定义
|
||||
// ...
|
||||
},
|
||||
selectedNode: null
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
rightClick(e,data,node,comp){
|
||||
console.log('e:',e,'data',data)
|
||||
this.rightMenu = {top:e.pageY+'px',left:e.pageX+'px'}
|
||||
this.tmDisplay = true
|
||||
const self = this
|
||||
document.onclick=function(ev){
|
||||
if(ev.target!==document.getElementById('perTreeMenu')){
|
||||
self.tmDisplay = false
|
||||
}
|
||||
}
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -0,0 +1,142 @@
|
|||
<template>
|
||||
<div>
|
||||
<el-tree :data="data" show-checkbox node-key="id" :props="defaultProps" @node-contextmenu="rightClick"
|
||||
@check="treeCheck">
|
||||
</el-tree>
|
||||
<div id="perTreeMenu" v-if="tmDisplay" class="tree_menu" :style="{ ...rightMenu }">
|
||||
<ul>
|
||||
<li><i class="el-icon-tickets"></i> 详情</li>
|
||||
<li><i class="el-icon-edit"></i> 编辑</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
treeData: [
|
||||
{
|
||||
label: "Gateway",
|
||||
id: 1,
|
||||
editing: true,
|
||||
children: [
|
||||
{
|
||||
label: "数据采集",
|
||||
id: 11,
|
||||
children: [
|
||||
{
|
||||
label: "I/O点",
|
||||
id: 111,
|
||||
},
|
||||
{
|
||||
label: "用户点",
|
||||
id: 112,
|
||||
},
|
||||
{
|
||||
label: "计算点",
|
||||
id: 113,
|
||||
},
|
||||
{
|
||||
label: "系统点",
|
||||
id: 114,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "数据服务",
|
||||
id: 12,
|
||||
children: [
|
||||
{
|
||||
label: "Modbus",
|
||||
id: 121,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "IOT",
|
||||
id: 13,
|
||||
children: [
|
||||
{
|
||||
label: "Mqtt Client",
|
||||
id: 131,
|
||||
},
|
||||
{
|
||||
label: "Alink",
|
||||
id: 132,
|
||||
},
|
||||
{
|
||||
label: "Tlink",
|
||||
id: 133,
|
||||
},
|
||||
{
|
||||
label: "loTDDC",
|
||||
id: 134,
|
||||
},
|
||||
{
|
||||
label: "Ulink",
|
||||
id: 135,
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
contextMenuVisible: false,
|
||||
contextMenu: [
|
||||
{ text: '新增', command: 'add' },
|
||||
{ text: '取消', command: 'cancel' }
|
||||
],
|
||||
dialogVisible: false,
|
||||
newNodeData: {
|
||||
// 新节点的数据，可以根据需求定义
|
||||
// ...
|
||||
},
|
||||
selectedNode: null
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
rightClick(e, data, node, comp) {
|
||||
console.log('e:', e, 'data', data)
|
||||
this.rightMenu = { top: e.pageY + 'px', left: e.pageX + 'px' }
|
||||
this.tmDisplay = true
|
||||
const self = this
|
||||
document.onclick = function (ev) {
|
||||
if (ev.target !== document.getElementById('perTreeMenu')) {
|
||||
self.tmDisplay = false
|
||||
}
|
||||
}
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.tree_menu {
|
||||
position: fixed;
|
||||
display: block;
|
||||
z-index: 20000;
|
||||
background-color: #fff;
|
||||
padding: 5px 0;
|
||||
border: 1px solid #ebeef5;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
|
||||
|
||||
ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
ul li {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0 15px;
|
||||
font-size: 14px;
|
||||
line-height: 30px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
ul li:hover {
|
||||
background-color: #ebeef5
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,142 @@
|
|||
<template>
|
||||
<div>
|
||||
<el-tree :data="data" show-checkbox node-key="id" :props="defaultProps" @node-contextmenu="rightClick"
|
||||
@check="treeCheck">
|
||||
</el-tree>
|
||||
<div id="perTreeMenu" v-if="tmDisplay" class="tree_menu" :style="{ ...rightMenu }">
|
||||
<ul>
|
||||
<li><i class="el-icon-tickets"></i> 详情</li>
|
||||
<li><i class="el-icon-edit"></i> 编辑</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
data: [
|
||||
{
|
||||
label: "Gateway",
|
||||
id: 1,
|
||||
editing: true,
|
||||
children: [
|
||||
{
|
||||
label: "数据采集",
|
||||
id: 11,
|
||||
children: [
|
||||
{
|
||||
label: "I/O点",
|
||||
id: 111,
|
||||
},
|
||||
{
|
||||
label: "用户点",
|
||||
id: 112,
|
||||
},
|
||||
{
|
||||
label: "计算点",
|
||||
id: 113,
|
||||
},
|
||||
{
|
||||
label: "系统点",
|
||||
id: 114,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "数据服务",
|
||||
id: 12,
|
||||
children: [
|
||||
{
|
||||
label: "Modbus",
|
||||
id: 121,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "IOT",
|
||||
id: 13,
|
||||
children: [
|
||||
{
|
||||
label: "Mqtt Client",
|
||||
id: 131,
|
||||
},
|
||||
{
|
||||
label: "Alink",
|
||||
id: 132,
|
||||
},
|
||||
{
|
||||
label: "Tlink",
|
||||
id: 133,
|
||||
},
|
||||
{
|
||||
label: "loTDDC",
|
||||
id: 134,
|
||||
},
|
||||
{
|
||||
label: "Ulink",
|
||||
id: 135,
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
contextMenuVisible: false,
|
||||
contextMenu: [
|
||||
{ text: '新增', command: 'add' },
|
||||
{ text: '取消', command: 'cancel' }
|
||||
],
|
||||
dialogVisible: false,
|
||||
newNodeData: {
|
||||
// 新节点的数据，可以根据需求定义
|
||||
// ...
|
||||
},
|
||||
selectedNode: null
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
rightClick(e, data, node, comp) {
|
||||
console.log('e:', e, 'data', data)
|
||||
this.rightMenu = { top: e.pageY + 'px', left: e.pageX + 'px' }
|
||||
this.tmDisplay = true
|
||||
const self = this
|
||||
document.onclick = function (ev) {
|
||||
if (ev.target !== document.getElementById('perTreeMenu')) {
|
||||
self.tmDisplay = false
|
||||
}
|
||||
}
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.tree_menu {
|
||||
position: fixed;
|
||||
display: block;
|
||||
z-index: 20000;
|
||||
background-color: #fff;
|
||||
padding: 5px 0;
|
||||
border: 1px solid #ebeef5;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
|
||||
|
||||
ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
ul li {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0 15px;
|
||||
font-size: 14px;
|
||||
line-height: 30px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
ul li:hover {
|
||||
background-color: #ebeef5
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,142 @@
|
|||
<!-- <template>
|
||||
<div>
|
||||
<el-tree :data="data" show-checkbox node-key="id" :props="defaultProps" @node-contextmenu="rightClick"
|
||||
@check="treeCheck">
|
||||
</el-tree>
|
||||
<div id="perTreeMenu" v-if="tmDisplay" class="tree_menu" :style="{ ...rightMenu }">
|
||||
<ul>
|
||||
<li><i class="el-icon-tickets"></i> 详情</li>
|
||||
<li><i class="el-icon-edit"></i> 编辑</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
data: [
|
||||
{
|
||||
label: "Gateway",
|
||||
id: 1,
|
||||
editing: true,
|
||||
children: [
|
||||
{
|
||||
label: "数据采集",
|
||||
id: 11,
|
||||
children: [
|
||||
{
|
||||
label: "I/O点",
|
||||
id: 111,
|
||||
},
|
||||
{
|
||||
label: "用户点",
|
||||
id: 112,
|
||||
},
|
||||
{
|
||||
label: "计算点",
|
||||
id: 113,
|
||||
},
|
||||
{
|
||||
label: "系统点",
|
||||
id: 114,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "数据服务",
|
||||
id: 12,
|
||||
children: [
|
||||
{
|
||||
label: "Modbus",
|
||||
id: 121,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "IOT",
|
||||
id: 13,
|
||||
children: [
|
||||
{
|
||||
label: "Mqtt Client",
|
||||
id: 131,
|
||||
},
|
||||
{
|
||||
label: "Alink",
|
||||
id: 132,
|
||||
},
|
||||
{
|
||||
label: "Tlink",
|
||||
id: 133,
|
||||
},
|
||||
{
|
||||
label: "loTDDC",
|
||||
id: 134,
|
||||
},
|
||||
{
|
||||
label: "Ulink",
|
||||
id: 135,
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
contextMenuVisible: false,
|
||||
contextMenu: [
|
||||
{ text: '新增', command: 'add' },
|
||||
{ text: '取消', command: 'cancel' }
|
||||
],
|
||||
dialogVisible: false,
|
||||
newNodeData: {
|
||||
// 新节点的数据，可以根据需求定义
|
||||
// ...
|
||||
},
|
||||
selectedNode: null
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
rightClick(e, data, node, comp) {
|
||||
console.log('e:', e, 'data', data)
|
||||
this.rightMenu = { top: e.pageY + 'px', left: e.pageX + 'px' }
|
||||
this.tmDisplay = true
|
||||
const self = this
|
||||
document.onclick = function (ev) {
|
||||
if (ev.target !== document.getElementById('perTreeMenu')) {
|
||||
self.tmDisplay = false
|
||||
}
|
||||
}
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.tree_menu {
|
||||
position: fixed;
|
||||
display: block;
|
||||
z-index: 20000;
|
||||
background-color: #fff;
|
||||
padding: 5px 0;
|
||||
border: 1px solid #ebeef5;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
|
||||
|
||||
ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
ul li {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0 15px;
|
||||
font-size: 14px;
|
||||
line-height: 30px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
ul li:hover {
|
||||
background-color: #ebeef5
|
||||
}
|
||||
}
|
||||
</style> -->
|
||||
|
|
@ -0,0 +1,143 @@
|
|||
<template>
|
||||
<div>
|
||||
<el-tree :data="data" show-checkbox node-key="id" :props="defaultProps" @node-contextmenu="rightClick"
|
||||
@check="treeCheck">
|
||||
</el-tree>
|
||||
<div id="perTreeMenu" v-if="tmDisplay" class="tree_menu" :style="{ ...rightMenu }">
|
||||
<ul>
|
||||
<li><i class="el-icon-tickets"></i> 详情</li>
|
||||
<li><i class="el-icon-edit"></i> 编辑</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
tmDisplay: false,
|
||||
data: [
|
||||
{
|
||||
label: "Gateway",
|
||||
id: 1,
|
||||
editing: true,
|
||||
children: [
|
||||
{
|
||||
label: "数据采集",
|
||||
id: 11,
|
||||
children: [
|
||||
{
|
||||
label: "I/O点",
|
||||
id: 111,
|
||||
},
|
||||
{
|
||||
label: "用户点",
|
||||
id: 112,
|
||||
},
|
||||
{
|
||||
label: "计算点",
|
||||
id: 113,
|
||||
},
|
||||
{
|
||||
label: "系统点",
|
||||
id: 114,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "数据服务",
|
||||
id: 12,
|
||||
children: [
|
||||
{
|
||||
label: "Modbus",
|
||||
id: 121,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "IOT",
|
||||
id: 13,
|
||||
children: [
|
||||
{
|
||||
label: "Mqtt Client",
|
||||
id: 131,
|
||||
},
|
||||
{
|
||||
label: "Alink",
|
||||
id: 132,
|
||||
},
|
||||
{
|
||||
label: "Tlink",
|
||||
id: 133,
|
||||
},
|
||||
{
|
||||
label: "loTDDC",
|
||||
id: 134,
|
||||
},
|
||||
{
|
||||
label: "Ulink",
|
||||
id: 135,
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
contextMenuVisible: false,
|
||||
contextMenu: [
|
||||
{ text: '新增', command: 'add' },
|
||||
{ text: '取消', command: 'cancel' }
|
||||
],
|
||||
dialogVisible: false,
|
||||
newNodeData: {
|
||||
// 新节点的数据，可以根据需求定义
|
||||
// ...
|
||||
},
|
||||
selectedNode: null
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
rightClick(e, data, node, comp) {
|
||||
console.log('e:', e, 'data', data)
|
||||
this.rightMenu = { top: e.pageY + 'px', left: e.pageX + 'px' }
|
||||
this.tmDisplay = true
|
||||
const self = this
|
||||
document.onclick = function (ev) {
|
||||
if (ev.target !== document.getElementById('perTreeMenu')) {
|
||||
self.tmDisplay = false
|
||||
}
|
||||
}
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.tree_menu {
|
||||
position: fixed;
|
||||
display: block;
|
||||
z-index: 20000;
|
||||
background-color: #fff;
|
||||
padding: 5px 0;
|
||||
border: 1px solid #ebeef5;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
|
||||
|
||||
ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
ul li {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0 15px;
|
||||
font-size: 14px;
|
||||
line-height: 30px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
ul li:hover {
|
||||
background-color: #ebeef5
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,144 @@
|
|||
<template>
|
||||
<div>
|
||||
<el-tree :data="data" node-key="id" :props="defaultProps" @node-contextmenu="rightClick"
|
||||
@check="treeCheck">
|
||||
</el-tree>
|
||||
<div id="perTreeMenu" v-if="tmDisplay" class="tree_menu" :style="{ ...rightMenu }">
|
||||
<ul>
|
||||
<li><i class="el-icon-tickets"></i> 详情</li>
|
||||
<li><i class="el-icon-edit"></i> 编辑</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
tmDisplay: false,
|
||||
rightMenu:{},
|
||||
data: [
|
||||
{
|
||||
label: "Gateway",
|
||||
id: 1,
|
||||
editing: true,
|
||||
children: [
|
||||
{
|
||||
label: "数据采集",
|
||||
id: 11,
|
||||
children: [
|
||||
{
|
||||
label: "I/O点",
|
||||
id: 111,
|
||||
},
|
||||
{
|
||||
label: "用户点",
|
||||
id: 112,
|
||||
},
|
||||
{
|
||||
label: "计算点",
|
||||
id: 113,
|
||||
},
|
||||
{
|
||||
label: "系统点",
|
||||
id: 114,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "数据服务",
|
||||
id: 12,
|
||||
children: [
|
||||
{
|
||||
label: "Modbus",
|
||||
id: 121,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "IOT",
|
||||
id: 13,
|
||||
children: [
|
||||
{
|
||||
label: "Mqtt Client",
|
||||
id: 131,
|
||||
},
|
||||
{
|
||||
label: "Alink",
|
||||
id: 132,
|
||||
},
|
||||
{
|
||||
label: "Tlink",
|
||||
id: 133,
|
||||
},
|
||||
{
|
||||
label: "loTDDC",
|
||||
id: 134,
|
||||
},
|
||||
{
|
||||
label: "Ulink",
|
||||
id: 135,
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
contextMenuVisible: false,
|
||||
contextMenu: [
|
||||
{ text: '新增', command: 'add' },
|
||||
{ text: '取消', command: 'cancel' }
|
||||
],
|
||||
dialogVisible: false,
|
||||
newNodeData: {
|
||||
// 新节点的数据，可以根据需求定义
|
||||
// ...
|
||||
},
|
||||
selectedNode: null
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
rightClick(e, data, node, comp) {
|
||||
console.log('e:', e, 'data', data)
|
||||
this.rightMenu = { top: e.pageY + 'px', left: e.pageX + 'px' }
|
||||
this.tmDisplay = true
|
||||
const self = this
|
||||
document.onclick = function (ev) {
|
||||
if (ev.target !== document.getElementById('perTreeMenu')) {
|
||||
self.tmDisplay = false
|
||||
}
|
||||
}
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.tree_menu {
|
||||
position: fixed;
|
||||
display: block;
|
||||
z-index: 20000;
|
||||
background-color: #fff;
|
||||
padding: 5px 0;
|
||||
border: 1px solid #ebeef5;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
|
||||
|
||||
ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
ul li {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0 15px;
|
||||
font-size: 14px;
|
||||
line-height: 30px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
ul li:hover {
|
||||
background-color: #ebeef5
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,144 @@
|
|||
<!-- <template>
|
||||
<div>
|
||||
<el-tree :data="data" node-key="id" :props="defaultProps" @node-contextmenu="rightClick"
|
||||
@check="treeCheck">
|
||||
</el-tree>
|
||||
<div id="perTreeMenu" v-if="tmDisplay" class="tree_menu" :style="{ ...rightMenu }">
|
||||
<ul>
|
||||
<li><i class="el-icon-tickets"></i> 详情</li>
|
||||
<li><i class="el-icon-edit"></i> 编辑</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
tmDisplay: false,
|
||||
rightMenu:{},
|
||||
data: [
|
||||
{
|
||||
label: "Gateway",
|
||||
id: 1,
|
||||
editing: true,
|
||||
children: [
|
||||
{
|
||||
label: "数据采集",
|
||||
id: 11,
|
||||
children: [
|
||||
{
|
||||
label: "I/O点",
|
||||
id: 111,
|
||||
},
|
||||
{
|
||||
label: "用户点",
|
||||
id: 112,
|
||||
},
|
||||
{
|
||||
label: "计算点",
|
||||
id: 113,
|
||||
},
|
||||
{
|
||||
label: "系统点",
|
||||
id: 114,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "数据服务",
|
||||
id: 12,
|
||||
children: [
|
||||
{
|
||||
label: "Modbus",
|
||||
id: 121,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "IOT",
|
||||
id: 13,
|
||||
children: [
|
||||
{
|
||||
label: "Mqtt Client",
|
||||
id: 131,
|
||||
},
|
||||
{
|
||||
label: "Alink",
|
||||
id: 132,
|
||||
},
|
||||
{
|
||||
label: "Tlink",
|
||||
id: 133,
|
||||
},
|
||||
{
|
||||
label: "loTDDC",
|
||||
id: 134,
|
||||
},
|
||||
{
|
||||
label: "Ulink",
|
||||
id: 135,
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
contextMenuVisible: false,
|
||||
contextMenu: [
|
||||
{ text: '新增', command: 'add' },
|
||||
{ text: '取消', command: 'cancel' }
|
||||
],
|
||||
dialogVisible: false,
|
||||
newNodeData: {
|
||||
// 新节点的数据，可以根据需求定义
|
||||
// ...
|
||||
},
|
||||
selectedNode: null
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
rightClick(e, data, node, comp) {
|
||||
console.log('e:', e, 'data', data)
|
||||
this.rightMenu = { top: e.pageY + 'px', left: e.pageX + 'px' }
|
||||
this.tmDisplay = true
|
||||
const self = this
|
||||
document.onclick = function (ev) {
|
||||
if (ev.target !== document.getElementById('perTreeMenu')) {
|
||||
self.tmDisplay = false
|
||||
}
|
||||
}
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.tree_menu {
|
||||
position: fixed;
|
||||
display: block;
|
||||
z-index: 20000;
|
||||
background-color: #fff;
|
||||
padding: 5px 0;
|
||||
border: 1px solid #ebeef5;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
|
||||
|
||||
ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
ul li {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0 15px;
|
||||
font-size: 14px;
|
||||
line-height: 30px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
ul li:hover {
|
||||
background-color: #ebeef5
|
||||
}
|
||||
}
|
||||
</style> -->
|
||||
|
|
@ -0,0 +1,144 @@
|
|||
<template>
|
||||
<div>
|
||||
<el-tree :data="data" node-key="id" :props="defaultProps" @node-contextmenu="rightClick"
|
||||
@check="treeCheck">
|
||||
</el-tree>
|
||||
<div id="perTreeMenu" v-if="tmDisplay" class="tree_menu" :style="{ ...rightMenu }">
|
||||
<ul>
|
||||
<li><i class="el-icon-tickets"></i> 详情</li>
|
||||
<li><i class="el-icon-edit"></i> 编辑</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
tmDisplay: false,
|
||||
rightMenu:{},
|
||||
data: [
|
||||
{
|
||||
label: "Gateway",
|
||||
id: 1,
|
||||
editing: true,
|
||||
children: [
|
||||
{
|
||||
label: "数据采集",
|
||||
id: 11,
|
||||
children: [
|
||||
{
|
||||
label: "I/O点",
|
||||
id: 111,
|
||||
},
|
||||
{
|
||||
label: "用户点",
|
||||
id: 112,
|
||||
},
|
||||
{
|
||||
label: "计算点",
|
||||
id: 113,
|
||||
},
|
||||
{
|
||||
label: "系统点",
|
||||
id: 114,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "数据服务",
|
||||
id: 12,
|
||||
children: [
|
||||
{
|
||||
label: "Modbus",
|
||||
id: 121,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "IOT",
|
||||
id: 13,
|
||||
children: [
|
||||
{
|
||||
label: "Mqtt Client",
|
||||
id: 131,
|
||||
},
|
||||
{
|
||||
label: "Alink",
|
||||
id: 132,
|
||||
},
|
||||
{
|
||||
label: "Tlink",
|
||||
id: 133,
|
||||
},
|
||||
{
|
||||
label: "loTDDC",
|
||||
id: 134,
|
||||
},
|
||||
{
|
||||
label: "Ulink",
|
||||
id: 135,
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
contextMenuVisible: false,
|
||||
contextMenu: [
|
||||
{ text: '新增', command: 'add' },
|
||||
{ text: '取消', command: 'cancel' }
|
||||
],
|
||||
dialogVisible: false,
|
||||
newNodeData: {
|
||||
// 新节点的数据，可以根据需求定义
|
||||
// ...
|
||||
},
|
||||
selectedNode: null
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
rightClick(e, data, node, comp) {
|
||||
console.log('e:', e, 'data', data)
|
||||
this.rightMenu = { top: e.pageY + 'px', left: e.pageX + 'px' }
|
||||
this.tmDisplay = true
|
||||
const self = this
|
||||
document.onclick = function (ev) {
|
||||
if (ev.target !== document.getElementById('perTreeMenu')) {
|
||||
self.tmDisplay = false
|
||||
}
|
||||
}
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.tree_menu {
|
||||
position: fixed;
|
||||
display: block;
|
||||
z-index: 20000;
|
||||
background-color: #fff;
|
||||
padding: 5px 0;
|
||||
border: 1px solid #ebeef5;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
|
||||
|
||||
ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
ul li {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0 15px;
|
||||
font-size: 14px;
|
||||
line-height: 30px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
ul li:hover {
|
||||
background-color: #ebeef5
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,144 @@
|
|||
<template>
|
||||
<div>
|
||||
<el-tree :data="data" node-key="id" :props="defaultProps" @node-contextmenu="rightClick"
|
||||
@check="treeCheck">
|
||||
</el-tree>
|
||||
<div id="perTreeMenu" v-if="tmDisplay" class="tree_menu" :style="{ ...rightMenu }">
|
||||
<ul>
|
||||
<li><i class="el-icon-tickets"></i> 详情</li>
|
||||
<li><i class="el-icon-edit"></i> 编辑</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
tmDisplay: false,
|
||||
rightMenu:{},
|
||||
data: [
|
||||
{
|
||||
label: "Gateway",
|
||||
id: 1,
|
||||
editing: true,
|
||||
children: [
|
||||
{
|
||||
label: "数据采集",
|
||||
id: 11,
|
||||
children: [
|
||||
{
|
||||
label: "I/O点",
|
||||
id: 111,
|
||||
},
|
||||
{
|
||||
label: "用户点",
|
||||
id: 112,
|
||||
},
|
||||
{
|
||||
label: "计算点",
|
||||
id: 113,
|
||||
},
|
||||
{
|
||||
label: "系统点",
|
||||
id: 114,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "数据服务",
|
||||
id: 12,
|
||||
children: [
|
||||
{
|
||||
label: "Modbus",
|
||||
id: 121,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "IOT",
|
||||
id: 13,
|
||||
children: [
|
||||
{
|
||||
label: "Mqtt Client",
|
||||
id: 131,
|
||||
},
|
||||
{
|
||||
label: "Alink",
|
||||
id: 132,
|
||||
},
|
||||
{
|
||||
label: "Tlink",
|
||||
id: 133,
|
||||
},
|
||||
{
|
||||
label: "loTDDC",
|
||||
id: 134,
|
||||
},
|
||||
{
|
||||
label: "Ulink",
|
||||
id: 135,
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
contextMenuVisible: false,
|
||||
contextMenu: [
|
||||
{ text: '新增', command: 'add' },
|
||||
{ text: '取消', command: 'cancel' }
|
||||
],
|
||||
dialogVisible: false,
|
||||
newNodeData: {
|
||||
// 新节点的数据，可以根据需求定义
|
||||
// ...
|
||||
},
|
||||
selectedNode: null
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
rightClick(e, data, node, comp) {
|
||||
console.log('e:', e, 'data', data)
|
||||
this.rightMenu = { top: e.pageY + 'px', left: e.pageX + 'px' }
|
||||
this.tmDisplay = true
|
||||
const self = this
|
||||
document.onclick = function (ev) {
|
||||
if (ev.target !== document.getElementById('perTreeMenu')) {
|
||||
self.tmDisplay = false
|
||||
}
|
||||
}
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.tree_menu {
|
||||
position: fixed;
|
||||
display: block;
|
||||
z-index: 20000;
|
||||
background-color: #fff;
|
||||
padding: 5px 0;
|
||||
border: 1px solid #ebeef5;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
|
||||
|
||||
ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
ul li {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0 15px;
|
||||
font-size: 14px;
|
||||
line-height: 30px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
ul li:hover {
|
||||
background-color: #ebeef5
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,145 @@
|
|||
<template>
|
||||
<div>
|
||||
<el-tree :data="data" node-key="id" :props="defaultProps" @node-contextmenu="rightClick"
|
||||
@check="treeCheck">
|
||||
</el-tree>
|
||||
<div id="perTreeMenu" v-if="tmDisplay" class="tree_menu" :style="{ ...rightMenu }">
|
||||
<ul>
|
||||
<li><i class="el-icon-tickets"></i> 详情</li>
|
||||
<li><i class="el-icon-edit"></i> 编辑</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
tmDisplay: false,
|
||||
rightMenu:{},
|
||||
node:"",
|
||||
data: [
|
||||
{
|
||||
label: "Gateway",
|
||||
id: 1,
|
||||
editing: true,
|
||||
children: [
|
||||
{
|
||||
label: "数据采集",
|
||||
id: 11,
|
||||
children: [
|
||||
{
|
||||
label: "I/O点",
|
||||
id: 111,
|
||||
},
|
||||
{
|
||||
label: "用户点",
|
||||
id: 112,
|
||||
},
|
||||
{
|
||||
label: "计算点",
|
||||
id: 113,
|
||||
},
|
||||
{
|
||||
label: "系统点",
|
||||
id: 114,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "数据服务",
|
||||
id: 12,
|
||||
children: [
|
||||
{
|
||||
label: "Modbus",
|
||||
id: 121,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "IOT",
|
||||
id: 13,
|
||||
children: [
|
||||
{
|
||||
label: "Mqtt Client",
|
||||
id: 131,
|
||||
},
|
||||
{
|
||||
label: "Alink",
|
||||
id: 132,
|
||||
},
|
||||
{
|
||||
label: "Tlink",
|
||||
id: 133,
|
||||
},
|
||||
{
|
||||
label: "loTDDC",
|
||||
id: 134,
|
||||
},
|
||||
{
|
||||
label: "Ulink",
|
||||
id: 135,
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
contextMenuVisible: false,
|
||||
contextMenu: [
|
||||
{ text: '新增', command: 'add' },
|
||||
{ text: '取消', command: 'cancel' }
|
||||
],
|
||||
dialogVisible: false,
|
||||
newNodeData: {
|
||||
// 新节点的数据，可以根据需求定义
|
||||
// ...
|
||||
},
|
||||
selectedNode: null
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
rightClick(e, data, node, comp) {
|
||||
console.log('e:', e, 'data', data)
|
||||
this.rightMenu = { top: e.pageY + 'px', left: e.pageX + 'px' }
|
||||
this.tmDisplay = true
|
||||
const self = this
|
||||
document.onclick = function (ev) {
|
||||
if (ev.target !== document.getElementById('perTreeMenu')) {
|
||||
self.tmDisplay = false
|
||||
}
|
||||
}
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.tree_menu {
|
||||
position: fixed;
|
||||
display: block;
|
||||
z-index: 20000;
|
||||
background-color: #fff;
|
||||
padding: 5px 0;
|
||||
border: 1px solid #ebeef5;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
|
||||
|
||||
ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
ul li {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0 15px;
|
||||
font-size: 14px;
|
||||
line-height: 30px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
ul li:hover {
|
||||
background-color: #ebeef5
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,146 @@
|
|||
<template>
|
||||
<div>
|
||||
<el-tree :data="data" node-key="id" :props="defaultProps" @node-contextmenu="rightClick"
|
||||
@check="treeCheck">
|
||||
</el-tree>
|
||||
<div id="perTreeMenu" v-if="tmDisplay" class="tree_menu" :style="{ ...rightMenu }">
|
||||
<ul>
|
||||
<li><i class="el-icon-tickets"></i> 详情</li>
|
||||
<li><i class="el-icon-edit"></i> 编辑</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
tmDisplay: false,
|
||||
rightMenu:{},
|
||||
node:"",
|
||||
data: [
|
||||
{
|
||||
label: "Gateway",
|
||||
id: 1,
|
||||
editing: true,
|
||||
children: [
|
||||
{
|
||||
label: "数据采集",
|
||||
id: 11,
|
||||
children: [
|
||||
{
|
||||
label: "I/O点",
|
||||
id: 111,
|
||||
},
|
||||
{
|
||||
label: "用户点",
|
||||
id: 112,
|
||||
},
|
||||
{
|
||||
label: "计算点",
|
||||
id: 113,
|
||||
},
|
||||
{
|
||||
label: "系统点",
|
||||
id: 114,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "数据服务",
|
||||
id: 12,
|
||||
children: [
|
||||
{
|
||||
label: "Modbus",
|
||||
id: 121,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "IOT",
|
||||
id: 13,
|
||||
children: [
|
||||
{
|
||||
label: "Mqtt Client",
|
||||
id: 131,
|
||||
},
|
||||
{
|
||||
label: "Alink",
|
||||
id: 132,
|
||||
},
|
||||
{
|
||||
label: "Tlink",
|
||||
id: 133,
|
||||
},
|
||||
{
|
||||
label: "loTDDC",
|
||||
id: 134,
|
||||
},
|
||||
{
|
||||
label: "Ulink",
|
||||
id: 135,
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
contextMenuVisible: false,
|
||||
contextMenu: [
|
||||
{ text: '新增', command: 'add' },
|
||||
{ text: '取消', command: 'cancel' }
|
||||
],
|
||||
dialogVisible: false,
|
||||
newNodeData: {
|
||||
// 新节点的数据，可以根据需求定义
|
||||
// ...
|
||||
},
|
||||
selectedNode: null
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
rightClick(e, data, node, comp) {
|
||||
console.log('e:', e, 'data', data)
|
||||
this.node = node;
|
||||
this.rightMenu = { top: e.pageY + 'px', left: e.pageX + 'px' }
|
||||
this.tmDisplay = true
|
||||
const self = this
|
||||
document.onclick = function (ev) {
|
||||
if (ev.target !== document.getElementById('perTreeMenu')) {
|
||||
self.tmDisplay = false
|
||||
}
|
||||
}
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.tree_menu {
|
||||
position: fixed;
|
||||
display: block;
|
||||
z-index: 20000;
|
||||
background-color: #fff;
|
||||
padding: 5px 0;
|
||||
border: 1px solid #ebeef5;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
|
||||
|
||||
ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
ul li {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0 15px;
|
||||
font-size: 14px;
|
||||
line-height: 30px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
ul li:hover {
|
||||
background-color: #ebeef5
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,148 @@
|
|||
<template>
|
||||
<div>
|
||||
<el-tree :data="data" node-key="id" :props="defaultProps" @node-contextmenu="rightClick"
|
||||
@check="treeCheck">
|
||||
</el-tree>
|
||||
<div id="perTreeMenu" v-if="tmDisplay" class="tree_menu" :style="{ ...rightMenu }">
|
||||
<ul>
|
||||
<li><i class="el-icon-tickets"></i> 详情</li>
|
||||
<li><i class="el-icon-edit"></i> 编辑</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
tmDisplay: false,
|
||||
rightMenu:{},
|
||||
node:"",
|
||||
data: [
|
||||
{
|
||||
label: "Gateway",
|
||||
id: 1,
|
||||
editing: true,
|
||||
children: [
|
||||
{
|
||||
label: "数据采集",
|
||||
id: 11,
|
||||
children: [
|
||||
{
|
||||
label: "I/O点",
|
||||
id: 111,
|
||||
},
|
||||
{
|
||||
label: "用户点",
|
||||
id: 112,
|
||||
},
|
||||
{
|
||||
label: "计算点",
|
||||
id: 113,
|
||||
},
|
||||
{
|
||||
label: "系统点",
|
||||
id: 114,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "数据服务",
|
||||
id: 12,
|
||||
children: [
|
||||
{
|
||||
label: "Modbus",
|
||||
id: 121,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "IOT",
|
||||
id: 13,
|
||||
children: [
|
||||
{
|
||||
label: "Mqtt Client",
|
||||
id: 131,
|
||||
},
|
||||
{
|
||||
label: "Alink",
|
||||
id: 132,
|
||||
},
|
||||
{
|
||||
label: "Tlink",
|
||||
id: 133,
|
||||
},
|
||||
{
|
||||
label: "loTDDC",
|
||||
id: 134,
|
||||
},
|
||||
{
|
||||
label: "Ulink",
|
||||
id: 135,
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
contextMenuVisible: false,
|
||||
contextMenu: [
|
||||
{ text: '新增', command: 'add' },
|
||||
{ text: '取消', command: 'cancel' }
|
||||
],
|
||||
dialogVisible: false,
|
||||
newNodeData: {
|
||||
// 新节点的数据，可以根据需求定义
|
||||
// ...
|
||||
},
|
||||
selectedNode: null
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
rightClick(e, data, node, comp) {
|
||||
console.log('e:', e, 'data', data)
|
||||
this.node = node;
|
||||
console.log(this.node);
|
||||
console.log(comp);
|
||||
this.rightMenu = { top: e.pageY + 'px', left: e.pageX + 'px' }
|
||||
this.tmDisplay = true
|
||||
const self = this
|
||||
document.onclick = function (ev) {
|
||||
if (ev.target !== document.getElementById('perTreeMenu')) {
|
||||
self.tmDisplay = false
|
||||
}
|
||||
}
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.tree_menu {
|
||||
position: fixed;
|
||||
display: block;
|
||||
z-index: 20000;
|
||||
background-color: #fff;
|
||||
padding: 5px 0;
|
||||
border: 1px solid #ebeef5;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
|
||||
|
||||
ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
ul li {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0 15px;
|
||||
font-size: 14px;
|
||||
line-height: 30px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
ul li:hover {
|
||||
background-color: #ebeef5
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,148 @@
|
|||
<template>
|
||||
<div>
|
||||
<el-tree :data="data" node-key="id" :props="defaultProps" @node-contextmenu="rightClick"
|
||||
@check="treeCheck">
|
||||
</el-tree>
|
||||
<div id="perTreeMenu" v-if="tmDisplay" class="tree_menu" :style="{ ...rightMenu }">
|
||||
<ul>
|
||||
<li><i class="el-icon-tickets"></i> 详情</li>
|
||||
<li><i class="el-icon-edit"></i> 编辑</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
tmDisplay: false,
|
||||
rightMenu:{},
|
||||
node:"",
|
||||
data: [
|
||||
{
|
||||
label: "Gateway",
|
||||
id: 1,
|
||||
editing: true,
|
||||
children: [
|
||||
{
|
||||
label: "数据采集",
|
||||
id: 11,
|
||||
children: [
|
||||
{
|
||||
label: "I/O点",
|
||||
id: 111,
|
||||
},
|
||||
{
|
||||
label: "用户点",
|
||||
id: 112,
|
||||
},
|
||||
{
|
||||
label: "计算点",
|
||||
id: 113,
|
||||
},
|
||||
{
|
||||
label: "系统点",
|
||||
id: 114,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "数据服务",
|
||||
id: 12,
|
||||
children: [
|
||||
{
|
||||
label: "Modbus",
|
||||
id: 121,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "IOT",
|
||||
id: 13,
|
||||
children: [
|
||||
{
|
||||
label: "Mqtt Client",
|
||||
id: 131,
|
||||
},
|
||||
{
|
||||
label: "Alink",
|
||||
id: 132,
|
||||
},
|
||||
{
|
||||
label: "Tlink",
|
||||
id: 133,
|
||||
},
|
||||
{
|
||||
label: "loTDDC",
|
||||
id: 134,
|
||||
},
|
||||
{
|
||||
label: "Ulink",
|
||||
id: 135,
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
contextMenuVisible: false,
|
||||
contextMenu: [
|
||||
{ text: '新增', command: 'add' },
|
||||
{ text: '取消', command: 'cancel' }
|
||||
],
|
||||
dialogVisible: false,
|
||||
newNodeData: {
|
||||
// 新节点的数据，可以根据需求定义
|
||||
// ...
|
||||
},
|
||||
selectedNode: null
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
rightClick(e, data, node, comp) {
|
||||
console.log('e:', e, 'data', data)
|
||||
this.node = node;
|
||||
console.log(this.node);
|
||||
console.log(comp);
|
||||
this.rightMenu = { top: e.pageY + 'px', left: e.pageX + 'px' }
|
||||
this.tmDisplay = true
|
||||
const self = this
|
||||
document.onclick = function (ev) {
|
||||
if (ev.target !== document.getElementById('perTreeMenu')) {
|
||||
self.tmDisplay = false
|
||||
}
|
||||
}
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.tree_menu {
|
||||
position: fixed;
|
||||
display: block;
|
||||
z-index: 20000;
|
||||
background-color: #fff;
|
||||
padding: 5px 0;
|
||||
border: 1px solid #ebeef5;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
|
||||
|
||||
ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
ul li {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0 15px;
|
||||
font-size: 14px;
|
||||
line-height: 30px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
ul li:hover {
|
||||
background-color: #ebeef5
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,152 @@
|
|||
<template>
|
||||
<div>
|
||||
<el-tree :data="data" node-key="id" :props="defaultProps" @node-contextmenu="rightClick" @check="treeCheck">
|
||||
</el-tree>
|
||||
<div id="perTreeMenu" v-if="tmDisplay" class="tree_menu" :style="{ ...rightMenu }">
|
||||
<ul>
|
||||
<li><i class="el-icon-tickets"></i> 详情</li>
|
||||
<li><i class="el-icon-edit"></i> 编辑</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
tmDisplay: false,
|
||||
rightMenu: {},
|
||||
node: "",
|
||||
data: [
|
||||
{
|
||||
label: "Gateway",
|
||||
id: 1,
|
||||
editing: true,
|
||||
children: [
|
||||
{
|
||||
label: "数据采集",
|
||||
id: 11,
|
||||
children: [
|
||||
{
|
||||
label: "I/O点",
|
||||
id: 111,
|
||||
},
|
||||
{
|
||||
label: "用户点",
|
||||
id: 112,
|
||||
},
|
||||
{
|
||||
label: "计算点",
|
||||
id: 113,
|
||||
},
|
||||
{
|
||||
label: "系统点",
|
||||
id: 114,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "数据服务",
|
||||
id: 12,
|
||||
children: [
|
||||
{
|
||||
label: "Modbus",
|
||||
id: 121,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "IOT",
|
||||
id: 13,
|
||||
children: [
|
||||
{
|
||||
label: "Mqtt Client",
|
||||
id: 131,
|
||||
},
|
||||
{
|
||||
label: "Alink",
|
||||
id: 132,
|
||||
},
|
||||
{
|
||||
label: "Tlink",
|
||||
id: 133,
|
||||
},
|
||||
{
|
||||
label: "loTDDC",
|
||||
id: 134,
|
||||
},
|
||||
{
|
||||
label: "Ulink",
|
||||
id: 135,
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
contextMenuVisible: false,
|
||||
contextMenu: [
|
||||
{ text: '新增', command: 'add' },
|
||||
{ text: '取消', command: 'cancel' }
|
||||
],
|
||||
dialogVisible: false,
|
||||
newNodeData: {
|
||||
// 新节点的数据，可以根据需求定义
|
||||
// ...
|
||||
},
|
||||
selectedNode: null
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
rightClick(e, data, node, comp) {
|
||||
console.log('e:', e, 'data', data)
|
||||
this.node = node;
|
||||
const newChild = { id: id++, label: 'testtest', children: [] };
|
||||
if (!data.children) {
|
||||
this.$set(data, 'children', []);
|
||||
}
|
||||
data.children.push(newChild);
|
||||
console.log(this.node);
|
||||
console.log(comp);
|
||||
this.rightMenu = { top: e.pageY + 'px', left: e.pageX + 'px' }
|
||||
this.tmDisplay = true
|
||||
const self = this
|
||||
document.onclick = function (ev) {
|
||||
if (ev.target !== document.getElementById('perTreeMenu')) {
|
||||
self.tmDisplay = false
|
||||
}
|
||||
}
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.tree_menu {
|
||||
position: fixed;
|
||||
display: block;
|
||||
z-index: 20000;
|
||||
background-color: #fff;
|
||||
padding: 5px 0;
|
||||
border: 1px solid #ebeef5;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
|
||||
|
||||
ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
ul li {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0 15px;
|
||||
font-size: 14px;
|
||||
line-height: 30px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
ul li:hover {
|
||||
background-color: #ebeef5
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,149 @@
|
|||
<template>
|
||||
<div>
|
||||
<el-tree :data="data" node-key="id" :props="defaultProps" @node-contextmenu="rightClick"
|
||||
@check="treeCheck">
|
||||
</el-tree>
|
||||
<div id="perTreeMenu" v-if="tmDisplay" class="tree_menu" :style="{ ...rightMenu }">
|
||||
<ul>
|
||||
<li><i class="el-icon-tickets"></i> 详情</li>
|
||||
<li><i class="el-icon-edit"></i> 编辑</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
tmDisplay: false,
|
||||
rightMenu:{},
|
||||
node:"",
|
||||
data: [
|
||||
{
|
||||
label: "Gateway",
|
||||
id: 1,
|
||||
editing: true,
|
||||
children: [
|
||||
{
|
||||
label: "数据采集",
|
||||
id: 11,
|
||||
children: [
|
||||
{
|
||||
label: "I/O点",
|
||||
id: 111,
|
||||
},
|
||||
{
|
||||
label: "用户点",
|
||||
id: 112,
|
||||
},
|
||||
{
|
||||
label: "计算点",
|
||||
id: 113,
|
||||
},
|
||||
{
|
||||
label: "系统点",
|
||||
id: 114,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "数据服务",
|
||||
id: 12,
|
||||
children: [
|
||||
{
|
||||
label: "Modbus",
|
||||
id: 121,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "IOT",
|
||||
id: 13,
|
||||
children: [
|
||||
{
|
||||
label: "Mqtt Client",
|
||||
id: 131,
|
||||
},
|
||||
{
|
||||
label: "Alink",
|
||||
id: 132,
|
||||
},
|
||||
{
|
||||
label: "Tlink",
|
||||
id: 133,
|
||||
},
|
||||
{
|
||||
label: "loTDDC",
|
||||
id: 134,
|
||||
},
|
||||
{
|
||||
label: "Ulink",
|
||||
id: 135,
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
contextMenuVisible: false,
|
||||
contextMenu: [
|
||||
{ text: '新增', command: 'add' },
|
||||
{ text: '取消', command: 'cancel' }
|
||||
],
|
||||
dialogVisible: false,
|
||||
newNodeData: {
|
||||
// 新节点的数据，可以根据需求定义
|
||||
// ...
|
||||
},
|
||||
selectedNode: null
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
rightClick(e, data, node, comp) {
|
||||
console.log('e:', e, 'data', data)
|
||||
// this.node = node;
|
||||
// console.log(this.node)
|
||||
console.log(data.id);
|
||||
console.log(comp);
|
||||
this.rightMenu = { top: e.pageY + 'px', left: e.pageX + 'px' }
|
||||
this.tmDisplay = true
|
||||
const self = this
|
||||
document.onclick = function (ev) {
|
||||
if (ev.target !== document.getElementById('perTreeMenu')) {
|
||||
self.tmDisplay = false
|
||||
}
|
||||
}
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.tree_menu {
|
||||
position: fixed;
|
||||
display: block;
|
||||
z-index: 20000;
|
||||
background-color: #fff;
|
||||
padding: 5px 0;
|
||||
border: 1px solid #ebeef5;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
|
||||
|
||||
ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
ul li {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0 15px;
|
||||
font-size: 14px;
|
||||
line-height: 30px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
ul li:hover {
|
||||
background-color: #ebeef5
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,149 @@
|
|||
<template>
|
||||
<div>
|
||||
<el-tree :data="data" node-key="id" :props="defaultProps" @node-contextmenu="rightClick"
|
||||
@check="treeCheck">
|
||||
</el-tree>
|
||||
<div id="perTreeMenu" v-if="tmDisplay" class="tree_menu" :style="{ ...rightMenu }">
|
||||
<ul>
|
||||
<li>新增通道</li>
|
||||
<li>取消</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
tmDisplay: false,
|
||||
rightMenu:{},
|
||||
node:"",
|
||||
data: [
|
||||
{
|
||||
label: "Gateway",
|
||||
id: 1,
|
||||
editing: true,
|
||||
children: [
|
||||
{
|
||||
label: "数据采集",
|
||||
id: 11,
|
||||
children: [
|
||||
{
|
||||
label: "I/O点",
|
||||
id: 111,
|
||||
},
|
||||
{
|
||||
label: "用户点",
|
||||
id: 112,
|
||||
},
|
||||
{
|
||||
label: "计算点",
|
||||
id: 113,
|
||||
},
|
||||
{
|
||||
label: "系统点",
|
||||
id: 114,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "数据服务",
|
||||
id: 12,
|
||||
children: [
|
||||
{
|
||||
label: "Modbus",
|
||||
id: 121,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "IOT",
|
||||
id: 13,
|
||||
children: [
|
||||
{
|
||||
label: "Mqtt Client",
|
||||
id: 131,
|
||||
},
|
||||
{
|
||||
label: "Alink",
|
||||
id: 132,
|
||||
},
|
||||
{
|
||||
label: "Tlink",
|
||||
id: 133,
|
||||
},
|
||||
{
|
||||
label: "loTDDC",
|
||||
id: 134,
|
||||
},
|
||||
{
|
||||
label: "Ulink",
|
||||
id: 135,
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
contextMenuVisible: false,
|
||||
contextMenu: [
|
||||
{ text: '新增', command: 'add' },
|
||||
{ text: '取消', command: 'cancel' }
|
||||
],
|
||||
dialogVisible: false,
|
||||
newNodeData: {
|
||||
// 新节点的数据，可以根据需求定义
|
||||
// ...
|
||||
},
|
||||
selectedNode: null
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
rightClick(e, data, node, comp) {
|
||||
console.log('e:', e, 'data', data)
|
||||
// this.node = node;
|
||||
// console.log(this.node)
|
||||
console.log(data.id);
|
||||
console.log(comp);
|
||||
this.rightMenu = { top: e.pageY + 'px', left: e.pageX + 'px' }
|
||||
this.tmDisplay = true
|
||||
const self = this
|
||||
document.onclick = function (ev) {
|
||||
if (ev.target !== document.getElementById('perTreeMenu')) {
|
||||
self.tmDisplay = false
|
||||
}
|
||||
}
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.tree_menu {
|
||||
position: fixed;
|
||||
display: block;
|
||||
z-index: 20000;
|
||||
background-color: #fff;
|
||||
padding: 5px 0;
|
||||
border: 1px solid #ebeef5;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
|
||||
|
||||
ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
ul li {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0 15px;
|
||||
font-size: 14px;
|
||||
line-height: 30px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
ul li:hover {
|
||||
background-color: #ebeef5
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,143 @@
|
|||
<template>
|
||||
<div>
|
||||
<el-tree :data="data" node-key="id" :props="defaultProps" @node-contextmenu="rightClick"
|
||||
@check="treeCheck">
|
||||
</el-tree>
|
||||
<div id="perTreeMenu" v-if="tmDisplay" class="tree_menu" :style="{ ...rightMenu }">
|
||||
<ul>
|
||||
<li>新增通道</li>
|
||||
<li>取消</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
tmDisplay: false,
|
||||
rightMenu:{},
|
||||
node:"",
|
||||
data: [
|
||||
{
|
||||
label: "Gateway",
|
||||
id: 1,
|
||||
editing: true,
|
||||
children: [
|
||||
{
|
||||
label: "数据采集",
|
||||
id: 11,
|
||||
children: [
|
||||
{
|
||||
label: "I/O点",
|
||||
id: 111,
|
||||
},
|
||||
{
|
||||
label: "用户点",
|
||||
id: 112,
|
||||
},
|
||||
{
|
||||
label: "计算点",
|
||||
id: 113,
|
||||
},
|
||||
{
|
||||
label: "系统点",
|
||||
id: 114,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "数据服务",
|
||||
id: 12,
|
||||
children: [
|
||||
{
|
||||
label: "Modbus",
|
||||
id: 121,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "IOT",
|
||||
id: 13,
|
||||
children: [
|
||||
{
|
||||
label: "Mqtt Client",
|
||||
id: 131,
|
||||
},
|
||||
{
|
||||
label: "Alink",
|
||||
id: 132,
|
||||
},
|
||||
{
|
||||
label: "Tlink",
|
||||
id: 133,
|
||||
},
|
||||
{
|
||||
label: "loTDDC",
|
||||
id: 134,
|
||||
},
|
||||
{
|
||||
label: "Ulink",
|
||||
id: 135,
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
dialogVisible: false,
|
||||
newNodeData: {
|
||||
// 新节点的数据，可以根据需求定义
|
||||
// ...
|
||||
},
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
rightClick(e, data, node, comp) {
|
||||
console.log('e:', e, 'data', data)
|
||||
// this.node = node;
|
||||
// console.log(this.node)
|
||||
console.log(data.id);
|
||||
console.log(comp);
|
||||
this.rightMenu = { top: e.pageY + 'px', left: e.pageX + 'px' }
|
||||
this.tmDisplay = true
|
||||
const self = this
|
||||
document.onclick = function (ev) {
|
||||
if (ev.target !== document.getElementById('perTreeMenu')) {
|
||||
self.tmDisplay = false
|
||||
}
|
||||
}
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.tree_menu {
|
||||
position: fixed;
|
||||
display: block;
|
||||
z-index: 20000;
|
||||
background-color: #fff;
|
||||
padding: 5px 0;
|
||||
border: 1px solid #ebeef5;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
|
||||
|
||||
ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
ul li {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0 15px;
|
||||
font-size: 14px;
|
||||
line-height: 30px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
ul li:hover {
|
||||
background-color: #ebeef5
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,143 @@
|
|||
<template>
|
||||
<div>
|
||||
<el-tree :data="data" node-key="id" :props="defaultProps" @node-contextmenu="rightClick"
|
||||
@check="treeCheck">
|
||||
</el-tree>
|
||||
<div id="perTreeMenu" v-if="tmDisplay" class="tree_menu" :style="{ ...rightMenu }">
|
||||
<ul>
|
||||
<li @click="">新增通道</li>
|
||||
<li>取消</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
tmDisplay: false,
|
||||
rightMenu:{},
|
||||
node:"",
|
||||
data: [
|
||||
{
|
||||
label: "Gateway",
|
||||
id: 1,
|
||||
editing: true,
|
||||
children: [
|
||||
{
|
||||
label: "数据采集",
|
||||
id: 11,
|
||||
children: [
|
||||
{
|
||||
label: "I/O点",
|
||||
id: 111,
|
||||
},
|
||||
{
|
||||
label: "用户点",
|
||||
id: 112,
|
||||
},
|
||||
{
|
||||
label: "计算点",
|
||||
id: 113,
|
||||
},
|
||||
{
|
||||
label: "系统点",
|
||||
id: 114,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "数据服务",
|
||||
id: 12,
|
||||
children: [
|
||||
{
|
||||
label: "Modbus",
|
||||
id: 121,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "IOT",
|
||||
id: 13,
|
||||
children: [
|
||||
{
|
||||
label: "Mqtt Client",
|
||||
id: 131,
|
||||
},
|
||||
{
|
||||
label: "Alink",
|
||||
id: 132,
|
||||
},
|
||||
{
|
||||
label: "Tlink",
|
||||
id: 133,
|
||||
},
|
||||
{
|
||||
label: "loTDDC",
|
||||
id: 134,
|
||||
},
|
||||
{
|
||||
label: "Ulink",
|
||||
id: 135,
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
dialogVisible: false,
|
||||
newNodeData: {
|
||||
// 新节点的数据，可以根据需求定义
|
||||
// ...
|
||||
},
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
rightClick(e, data, node, comp) {
|
||||
console.log('e:', e, 'data', data)
|
||||
// this.node = node;
|
||||
// console.log(this.node)
|
||||
console.log(data.id);
|
||||
console.log(comp);
|
||||
this.rightMenu = { top: e.pageY + 'px', left: e.pageX + 'px' }
|
||||
this.tmDisplay = true
|
||||
const self = this
|
||||
document.onclick = function (ev) {
|
||||
if (ev.target !== document.getElementById('perTreeMenu')) {
|
||||
self.tmDisplay = false
|
||||
}
|
||||
}
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.tree_menu {
|
||||
position: fixed;
|
||||
display: block;
|
||||
z-index: 20000;
|
||||
background-color: #fff;
|
||||
padding: 5px 0;
|
||||
border: 1px solid #ebeef5;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
|
||||
|
||||
ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
ul li {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0 15px;
|
||||
font-size: 14px;
|
||||
line-height: 30px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
ul li:hover {
|
||||
background-color: #ebeef5
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,307 @@
|
|||
<template>
|
||||
<div>
|
||||
<el-tree :data="data" node-key="id" :props="defaultProps" @node-contextmenu="rightClick"
|
||||
@check="treeCheck">
|
||||
</el-tree>
|
||||
<div id="perTreeMenu" v-if="tmDisplay" class="tree_menu" :style="{ ...rightMenu }">
|
||||
<ul>
|
||||
<li @click="">新增通道</li>
|
||||
<li>取消</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="pas_params">
|
||||
<el-dialog title="通道参数设置" :visible.sync="add_passage" width="765px" v-loading="Loading">
|
||||
<el-form :model="FormData" :label-position="labelPosition" :rules="rules" ref="ruleForm">
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="通道名称:" :label-width="formLabelWidth" prop="tdpz_tdmc">
|
||||
<el-select v-model="FormData.tdpz_tdmc" placeholder="" style="width: 200px; height: 30px">
|
||||
<el-option v-for="(item, index) in options1" :key="index" :label="item.label" :value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="通道:" :label-width="formLabelWidth" prop="tdpz_td">
|
||||
<el-select v-model="FormData.tdpz_td" placeholder="" style="width: 200px; height: 30px">
|
||||
<el-option v-for="(item, index) in options2" :key="index" :label="item.label" :value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="驱动名称:" :label-width="formLabelWidth" prop="tdpz_qdmc">
|
||||
<el-row>
|
||||
<el-col :span="18">
|
||||
<el-input v-model="FormData.tdpz_qdmc" placeholder="" style="width: 200px; height: 30px"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-button style="width: 50px; height: 30px" @click="getDriveName">...</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="IP地址:" :label-width="formLabelWidth" prop="tdpz_ip">
|
||||
<el-row>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="tdpz_ip1" style="width: 43px; height: 30px"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1" style="color: #fff">. </el-col>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="tdpz_ip2" style="width: 43px; height: 30px"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1" style="color: #fff">.</el-col>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="tdpz_ip3" style="width: 43px; height: 30px"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1" style="color: #fff">.</el-col>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="tdpz_ip4" style="width: 43px; height: 30px"></el-input>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="端口号:" :label-width="formLabelWidth" prop="tdpz_port">
|
||||
<el-input v-model="FormData.tdpz_port" placeholder="" style="width: 200px; height: 30px"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="超过时间(ms):" :label-width="formLabelWidth" prop="tdpz_cssj">
|
||||
<el-input v-model="FormData.tdpz_cssj" placeholder="" style="width: 200px; height: 30px"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="间隔时间(ms):" :label-width="formLabelWidth" prop="tdpz_jgsj">
|
||||
<el-input v-model="FormData.tdpz_jgsj" placeholder="" style="width: 200px; height: 30px"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="轮询时间(ms):" :label-width="formLabelWidth" prop="tdpz_lxsj">
|
||||
<el-input v-model="FormData.tdpz_lxsj" placeholder="" style="width: 200px; height: 30px"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="重复次数:" :label-width="formLabelWidth" prop="tdpz_cfcs">
|
||||
<el-input v-model="FormData.tdpz_cfcs" placeholder="" style="width: 200px; height: 30px"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<div class="super_parmams">
|
||||
<h3>高级参数</h3>
|
||||
<div>
|
||||
<i class="el-icon-caret-bottom" v-if="is_retract"></i>
|
||||
<i class="el-icon-caret-top" v-else="is_retract"></i>
|
||||
<el-button type="text" plain @click="getRetract" style="
|
||||
width: 28px;
|
||||
border: none;
|
||||
color: rgba(16, 16, 16, 1);
|
||||
font-size: 14px;
|
||||
text-align: left;
|
||||
">
|
||||
收起</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="super_con" v-show="is_retract">
|
||||
<el-form :label-position="labelPosition" :rules="rules" ref="ruleForm">
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item>
|
||||
<el-checkbox v-model="FormData.tdpz_watchtime">watch time(s)</el-checkbox>
|
||||
<el-input v-model="input1" placeholder="" style="width: 200px; height: 30px"
|
||||
:disabled="isdisabled"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item>
|
||||
<el-checkbox v-model="FormData.tdpz_cjsylxdz">采集使用连续地址</el-checkbox>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="读写占空比:" :label-width="formLabelWidth">
|
||||
<el-row>
|
||||
<el-col :span="10">
|
||||
<el-input v-model="tdpz_dxzkb1" style="width: 91px; height: 30px"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="4">: </el-col>
|
||||
<el-col :span="10">
|
||||
<el-input v-model="tdpz_dxzkb2" style="width: 91px; height: 30px"></el-input>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="05/0F:" :label-width="formLabelWidth">
|
||||
<el-row>
|
||||
<el-col :span="8"><el-radio v-model="FormData.tdpz_050F" label="auto">auto</el-radio></el-col>
|
||||
<el-col :span="8"><el-radio v-model="FormData.tdpz_050F" label="05">05</el-radio></el-col>
|
||||
<el-col :span="8"><el-radio v-model="FormData.tdpz_050F" label="0F">0F</el-radio></el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="06/10:" :label-width="formLabelWidth">
|
||||
<el-row>
|
||||
<el-col :span="8"><el-radio v-model="FormData.tdpz_0610" label="auto">auto</el-radio></el-col>
|
||||
<el-col :span="8"><el-radio v-model="FormData.tdpz_0610" label="06">06</el-radio></el-col>
|
||||
<el-col :span="8"><el-radio v-model="FormData.tdpz_0610" label="10">10</el-radio></el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</div>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="saveGate">保 存</el-button>
|
||||
<el-button @click="add_passage = false">取 消</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
tmDisplay: false,
|
||||
rightMenu:{},
|
||||
node:"",
|
||||
data: [
|
||||
{
|
||||
label: "Gateway",
|
||||
id: 1,
|
||||
editing: true,
|
||||
children: [
|
||||
{
|
||||
label: "数据采集",
|
||||
id: 11,
|
||||
children: [
|
||||
{
|
||||
label: "I/O点",
|
||||
id: 111,
|
||||
},
|
||||
{
|
||||
label: "用户点",
|
||||
id: 112,
|
||||
},
|
||||
{
|
||||
label: "计算点",
|
||||
id: 113,
|
||||
},
|
||||
{
|
||||
label: "系统点",
|
||||
id: 114,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "数据服务",
|
||||
id: 12,
|
||||
children: [
|
||||
{
|
||||
label: "Modbus",
|
||||
id: 121,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "IOT",
|
||||
id: 13,
|
||||
children: [
|
||||
{
|
||||
label: "Mqtt Client",
|
||||
id: 131,
|
||||
},
|
||||
{
|
||||
label: "Alink",
|
||||
id: 132,
|
||||
},
|
||||
{
|
||||
label: "Tlink",
|
||||
id: 133,
|
||||
},
|
||||
{
|
||||
label: "loTDDC",
|
||||
id: 134,
|
||||
},
|
||||
{
|
||||
label: "Ulink",
|
||||
id: 135,
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
dialogVisible: false,
|
||||
newNodeData: {
|
||||
// 新节点的数据，可以根据需求定义
|
||||
// ...
|
||||
},
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
rightClick(e, data, node, comp) {
|
||||
console.log('e:', e, 'data', data)
|
||||
// this.node = node;
|
||||
// console.log(this.node)
|
||||
console.log(data.id);
|
||||
console.log(comp);
|
||||
this.rightMenu = { top: e.pageY + 'px', left: e.pageX + 'px' }
|
||||
this.tmDisplay = true
|
||||
const self = this
|
||||
document.onclick = function (ev) {
|
||||
if (ev.target !== document.getElementById('perTreeMenu')) {
|
||||
self.tmDisplay = false
|
||||
}
|
||||
}
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.tree_menu {
|
||||
position: fixed;
|
||||
display: block;
|
||||
z-index: 20000;
|
||||
background-color: #fff;
|
||||
padding: 5px 0;
|
||||
border: 1px solid #ebeef5;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
|
||||
|
||||
ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
ul li {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0 15px;
|
||||
font-size: 14px;
|
||||
line-height: 30px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
ul li:hover {
|
||||
background-color: #ebeef5
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,307 @@
|
|||
<template>
|
||||
<div>
|
||||
<el-tree :data="data" node-key="id" :props="defaultProps" @node-contextmenu="rightClick"
|
||||
@check="treeCheck">
|
||||
</el-tree>
|
||||
<div id="perTreeMenu" v-if="tmDisplay" class="tree_menu" :style="{ ...rightMenu }">
|
||||
<ul>
|
||||
<li @click="add_passage=true">新增通道</li>
|
||||
<li>取消</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="pas_params">
|
||||
<el-dialog title="通道参数设置" :visible.sync="add_passage" width="765px" v-loading="Loading">
|
||||
<el-form :model="FormData" :label-position="labelPosition" :rules="rules" ref="ruleForm">
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="通道名称:" :label-width="formLabelWidth" prop="tdpz_tdmc">
|
||||
<el-select v-model="FormData.tdpz_tdmc" placeholder="" style="width: 200px; height: 30px">
|
||||
<el-option v-for="(item, index) in options1" :key="index" :label="item.label" :value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="通道:" :label-width="formLabelWidth" prop="tdpz_td">
|
||||
<el-select v-model="FormData.tdpz_td" placeholder="" style="width: 200px; height: 30px">
|
||||
<el-option v-for="(item, index) in options2" :key="index" :label="item.label" :value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="驱动名称:" :label-width="formLabelWidth" prop="tdpz_qdmc">
|
||||
<el-row>
|
||||
<el-col :span="18">
|
||||
<el-input v-model="FormData.tdpz_qdmc" placeholder="" style="width: 200px; height: 30px"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-button style="width: 50px; height: 30px" @click="getDriveName">...</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="IP地址:" :label-width="formLabelWidth" prop="tdpz_ip">
|
||||
<el-row>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="tdpz_ip1" style="width: 43px; height: 30px"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1" style="color: #fff">. </el-col>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="tdpz_ip2" style="width: 43px; height: 30px"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1" style="color: #fff">.</el-col>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="tdpz_ip3" style="width: 43px; height: 30px"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1" style="color: #fff">.</el-col>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="tdpz_ip4" style="width: 43px; height: 30px"></el-input>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="端口号:" :label-width="formLabelWidth" prop="tdpz_port">
|
||||
<el-input v-model="FormData.tdpz_port" placeholder="" style="width: 200px; height: 30px"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="超过时间(ms):" :label-width="formLabelWidth" prop="tdpz_cssj">
|
||||
<el-input v-model="FormData.tdpz_cssj" placeholder="" style="width: 200px; height: 30px"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="间隔时间(ms):" :label-width="formLabelWidth" prop="tdpz_jgsj">
|
||||
<el-input v-model="FormData.tdpz_jgsj" placeholder="" style="width: 200px; height: 30px"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="轮询时间(ms):" :label-width="formLabelWidth" prop="tdpz_lxsj">
|
||||
<el-input v-model="FormData.tdpz_lxsj" placeholder="" style="width: 200px; height: 30px"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="重复次数:" :label-width="formLabelWidth" prop="tdpz_cfcs">
|
||||
<el-input v-model="FormData.tdpz_cfcs" placeholder="" style="width: 200px; height: 30px"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<div class="super_parmams">
|
||||
<h3>高级参数</h3>
|
||||
<div>
|
||||
<i class="el-icon-caret-bottom" v-if="is_retract"></i>
|
||||
<i class="el-icon-caret-top" v-else="is_retract"></i>
|
||||
<el-button type="text" plain @click="getRetract" style="
|
||||
width: 28px;
|
||||
border: none;
|
||||
color: rgba(16, 16, 16, 1);
|
||||
font-size: 14px;
|
||||
text-align: left;
|
||||
">
|
||||
收起</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="super_con" v-show="is_retract">
|
||||
<el-form :label-position="labelPosition" :rules="rules" ref="ruleForm">
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item>
|
||||
<el-checkbox v-model="FormData.tdpz_watchtime">watch time(s)</el-checkbox>
|
||||
<el-input v-model="input1" placeholder="" style="width: 200px; height: 30px"
|
||||
:disabled="isdisabled"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item>
|
||||
<el-checkbox v-model="FormData.tdpz_cjsylxdz">采集使用连续地址</el-checkbox>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="读写占空比:" :label-width="formLabelWidth">
|
||||
<el-row>
|
||||
<el-col :span="10">
|
||||
<el-input v-model="tdpz_dxzkb1" style="width: 91px; height: 30px"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="4">: </el-col>
|
||||
<el-col :span="10">
|
||||
<el-input v-model="tdpz_dxzkb2" style="width: 91px; height: 30px"></el-input>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="05/0F:" :label-width="formLabelWidth">
|
||||
<el-row>
|
||||
<el-col :span="8"><el-radio v-model="FormData.tdpz_050F" label="auto">auto</el-radio></el-col>
|
||||
<el-col :span="8"><el-radio v-model="FormData.tdpz_050F" label="05">05</el-radio></el-col>
|
||||
<el-col :span="8"><el-radio v-model="FormData.tdpz_050F" label="0F">0F</el-radio></el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="06/10:" :label-width="formLabelWidth">
|
||||
<el-row>
|
||||
<el-col :span="8"><el-radio v-model="FormData.tdpz_0610" label="auto">auto</el-radio></el-col>
|
||||
<el-col :span="8"><el-radio v-model="FormData.tdpz_0610" label="06">06</el-radio></el-col>
|
||||
<el-col :span="8"><el-radio v-model="FormData.tdpz_0610" label="10">10</el-radio></el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</div>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="saveGate">保 存</el-button>
|
||||
<el-button @click="add_passage = false">取 消</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
tmDisplay: false,
|
||||
rightMenu:{},
|
||||
node:"",
|
||||
data: [
|
||||
{
|
||||
label: "Gateway",
|
||||
id: 1,
|
||||
editing: true,
|
||||
children: [
|
||||
{
|
||||
label: "数据采集",
|
||||
id: 11,
|
||||
children: [
|
||||
{
|
||||
label: "I/O点",
|
||||
id: 111,
|
||||
},
|
||||
{
|
||||
label: "用户点",
|
||||
id: 112,
|
||||
},
|
||||
{
|
||||
label: "计算点",
|
||||
id: 113,
|
||||
},
|
||||
{
|
||||
label: "系统点",
|
||||
id: 114,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "数据服务",
|
||||
id: 12,
|
||||
children: [
|
||||
{
|
||||
label: "Modbus",
|
||||
id: 121,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "IOT",
|
||||
id: 13,
|
||||
children: [
|
||||
{
|
||||
label: "Mqtt Client",
|
||||
id: 131,
|
||||
},
|
||||
{
|
||||
label: "Alink",
|
||||
id: 132,
|
||||
},
|
||||
{
|
||||
label: "Tlink",
|
||||
id: 133,
|
||||
},
|
||||
{
|
||||
label: "loTDDC",
|
||||
id: 134,
|
||||
},
|
||||
{
|
||||
label: "Ulink",
|
||||
id: 135,
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
dialogVisible: false,
|
||||
newNodeData: {
|
||||
// 新节点的数据，可以根据需求定义
|
||||
// ...
|
||||
},
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
rightClick(e, data, node, comp) {
|
||||
console.log('e:', e, 'data', data)
|
||||
// this.node = node;
|
||||
// console.log(this.node)
|
||||
console.log(data.id);
|
||||
console.log(comp);
|
||||
this.rightMenu = { top: e.pageY + 'px', left: e.pageX + 'px' }
|
||||
this.tmDisplay = true
|
||||
const self = this
|
||||
document.onclick = function (ev) {
|
||||
if (ev.target !== document.getElementById('perTreeMenu')) {
|
||||
self.tmDisplay = false
|
||||
}
|
||||
}
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.tree_menu {
|
||||
position: fixed;
|
||||
display: block;
|
||||
z-index: 20000;
|
||||
background-color: #fff;
|
||||
padding: 5px 0;
|
||||
border: 1px solid #ebeef5;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
|
||||
|
||||
ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
ul li {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0 15px;
|
||||
font-size: 14px;
|
||||
line-height: 30px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
ul li:hover {
|
||||
background-color: #ebeef5
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,306 @@
|
|||
<template>
|
||||
<div>
|
||||
<el-tree :data="data" node-key="id" :props="defaultProps" @node-contextmenu="rightClick" @check="treeCheck">
|
||||
</el-tree>
|
||||
<div id="perTreeMenu" v-if="tmDisplay" class="tree_menu" :style="{ ...rightMenu }">
|
||||
<ul>
|
||||
<li @click="add_passage = true">新增通道</li>
|
||||
<li>取消</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="pas_params">
|
||||
<el-dialog title="通道参数设置" :visible.sync="add_passage" width="765px" v-loading="Loading">
|
||||
<el-form :model="FormData" :label-position="labelPosition" :rules="rules" ref="ruleForm">
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="通道名称:" :label-width="formLabelWidth" prop="tdpz_tdmc">
|
||||
<el-select v-model="FormData.tdpz_tdmc" placeholder="" style="width: 200px; height: 30px">
|
||||
<el-option v-for="(item, index) in options1" :key="index" :label="item.label" :value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="通道:" :label-width="formLabelWidth" prop="tdpz_td">
|
||||
<el-select v-model="FormData.tdpz_td" placeholder="" style="width: 200px; height: 30px">
|
||||
<el-option v-for="(item, index) in options2" :key="index" :label="item.label" :value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="驱动名称:" :label-width="formLabelWidth" prop="tdpz_qdmc">
|
||||
<el-row>
|
||||
<el-col :span="18">
|
||||
<el-input v-model="FormData.tdpz_qdmc" placeholder="" style="width: 200px; height: 30px"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-button style="width: 50px; height: 30px" @click="getDriveName">...</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="IP地址:" :label-width="formLabelWidth" prop="tdpz_ip">
|
||||
<el-row>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="tdpz_ip1" style="width: 43px; height: 30px"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1" style="color: #fff">. </el-col>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="tdpz_ip2" style="width: 43px; height: 30px"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1" style="color: #fff">.</el-col>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="tdpz_ip3" style="width: 43px; height: 30px"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1" style="color: #fff">.</el-col>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="tdpz_ip4" style="width: 43px; height: 30px"></el-input>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="端口号:" :label-width="formLabelWidth" prop="tdpz_port">
|
||||
<el-input v-model="FormData.tdpz_port" placeholder="" style="width: 200px; height: 30px"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="超过时间(ms):" :label-width="formLabelWidth" prop="tdpz_cssj">
|
||||
<el-input v-model="FormData.tdpz_cssj" placeholder="" style="width: 200px; height: 30px"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="间隔时间(ms):" :label-width="formLabelWidth" prop="tdpz_jgsj">
|
||||
<el-input v-model="FormData.tdpz_jgsj" placeholder="" style="width: 200px; height: 30px"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="轮询时间(ms):" :label-width="formLabelWidth" prop="tdpz_lxsj">
|
||||
<el-input v-model="FormData.tdpz_lxsj" placeholder="" style="width: 200px; height: 30px"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="重复次数:" :label-width="formLabelWidth" prop="tdpz_cfcs">
|
||||
<el-input v-model="FormData.tdpz_cfcs" placeholder="" style="width: 200px; height: 30px"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<div class="super_parmams">
|
||||
<h3>高级参数</h3>
|
||||
<div>
|
||||
<i class="el-icon-caret-bottom" v-if="is_retract"></i>
|
||||
<i class="el-icon-caret-top" v-else="is_retract"></i>
|
||||
<el-button type="text" plain @click="getRetract" style="
|
||||
width: 28px;
|
||||
border: none;
|
||||
color: rgba(16, 16, 16, 1);
|
||||
font-size: 14px;
|
||||
text-align: left;
|
||||
">
|
||||
收起</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="super_con" v-show="is_retract">
|
||||
<el-form :label-position="labelPosition" :rules="rules" ref="ruleForm">
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item>
|
||||
<el-checkbox v-model="FormData.tdpz_watchtime">watch time(s)</el-checkbox>
|
||||
<el-input v-model="input1" placeholder="" style="width: 200px; height: 30px"
|
||||
:disabled="isdisabled"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item>
|
||||
<el-checkbox v-model="FormData.tdpz_cjsylxdz">采集使用连续地址</el-checkbox>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="读写占空比:" :label-width="formLabelWidth">
|
||||
<el-row>
|
||||
<el-col :span="10">
|
||||
<el-input v-model="tdpz_dxzkb1" style="width: 91px; height: 30px"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="4">: </el-col>
|
||||
<el-col :span="10">
|
||||
<el-input v-model="tdpz_dxzkb2" style="width: 91px; height: 30px"></el-input>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="05/0F:" :label-width="formLabelWidth">
|
||||
<el-row>
|
||||
<el-col :span="8"><el-radio v-model="FormData.tdpz_050F" label="auto">auto</el-radio></el-col>
|
||||
<el-col :span="8"><el-radio v-model="FormData.tdpz_050F" label="05">05</el-radio></el-col>
|
||||
<el-col :span="8"><el-radio v-model="FormData.tdpz_050F" label="0F">0F</el-radio></el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="06/10:" :label-width="formLabelWidth">
|
||||
<el-row>
|
||||
<el-col :span="8"><el-radio v-model="FormData.tdpz_0610" label="auto">auto</el-radio></el-col>
|
||||
<el-col :span="8"><el-radio v-model="FormData.tdpz_0610" label="06">06</el-radio></el-col>
|
||||
<el-col :span="8"><el-radio v-model="FormData.tdpz_0610" label="10">10</el-radio></el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</div>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="saveGate">保 存</el-button>
|
||||
<el-button @click="add_passage = false">取 消</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
tmDisplay: false,
|
||||
rightMenu: {},
|
||||
node: "",
|
||||
data: [
|
||||
{
|
||||
label: "Gateway",
|
||||
id: 1,
|
||||
editing: true,
|
||||
children: [
|
||||
{
|
||||
label: "数据采集",
|
||||
id: 11,
|
||||
children: [
|
||||
{
|
||||
label: "I/O点",
|
||||
id: 111,
|
||||
},
|
||||
{
|
||||
label: "用户点",
|
||||
id: 112,
|
||||
},
|
||||
{
|
||||
label: "计算点",
|
||||
id: 113,
|
||||
},
|
||||
{
|
||||
label: "系统点",
|
||||
id: 114,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "数据服务",
|
||||
id: 12,
|
||||
children: [
|
||||
{
|
||||
label: "Modbus",
|
||||
id: 121,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "IOT",
|
||||
id: 13,
|
||||
children: [
|
||||
{
|
||||
label: "Mqtt Client",
|
||||
id: 131,
|
||||
},
|
||||
{
|
||||
label: "Alink",
|
||||
id: 132,
|
||||
},
|
||||
{
|
||||
label: "Tlink",
|
||||
id: 133,
|
||||
},
|
||||
{
|
||||
label: "loTDDC",
|
||||
id: 134,
|
||||
},
|
||||
{
|
||||
label: "Ulink",
|
||||
id: 135,
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
dialogVisible: false,
|
||||
newNodeData: {
|
||||
// 新节点的数据，可以根据需求定义
|
||||
// ...
|
||||
},
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
rightClick(e, data, node, comp) {
|
||||
console.log('e:', e, 'data', data)
|
||||
// this.node = node;
|
||||
// console.log(this.node)
|
||||
console.log(data.id);
|
||||
console.log(comp);
|
||||
this.rightMenu = { top: e.pageY + 'px', left: e.pageX + 'px' }
|
||||
this.tmDisplay = true
|
||||
const self = this
|
||||
document.onclick = function (ev) {
|
||||
if (ev.target !== document.getElementById('perTreeMenu')) {
|
||||
self.tmDisplay = false
|
||||
}
|
||||
}
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.tree_menu {
|
||||
position: fixed;
|
||||
display: block;
|
||||
z-index: 20000;
|
||||
background-color: #fff;
|
||||
padding: 5px 0;
|
||||
border: 1px solid #ebeef5;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
|
||||
|
||||
ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
ul li {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0 15px;
|
||||
font-size: 14px;
|
||||
line-height: 30px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
ul li:hover {
|
||||
background-color: #ebeef5
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,491 @@
|
|||
<template>
|
||||
<div>
|
||||
<el-tree :data="data" node-key="id" :props="defaultProps" @node-contextmenu="rightClick" @check="treeCheck">
|
||||
</el-tree>
|
||||
<div id="perTreeMenu" v-if="tmDisplay" class="tree_menu" :style="{ ...rightMenu }">
|
||||
<ul>
|
||||
<li @click="add_passage = true">新增通道</li>
|
||||
<li>取消</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="pas_params">
|
||||
<el-dialog title="通道参数设置" :visible.sync="add_passage" width="765px" v-loading="Loading">
|
||||
<el-form :model="FormData" :label-position="labelPosition" :rules="rules" ref="ruleForm">
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="通道名称:" :label-width="formLabelWidth" prop="tdpz_tdmc">
|
||||
<el-select v-model="FormData.tdpz_tdmc" placeholder="" style="width: 200px; height: 30px">
|
||||
<el-option v-for="(item, index) in options1" :key="index" :label="item.label" :value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="通道:" :label-width="formLabelWidth" prop="tdpz_td">
|
||||
<el-select v-model="FormData.tdpz_td" placeholder="" style="width: 200px; height: 30px">
|
||||
<el-option v-for="(item, index) in options2" :key="index" :label="item.label" :value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="驱动名称:" :label-width="formLabelWidth" prop="tdpz_qdmc">
|
||||
<el-row>
|
||||
<el-col :span="18">
|
||||
<el-input v-model="FormData.tdpz_qdmc" placeholder="" style="width: 200px; height: 30px"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-button style="width: 50px; height: 30px" @click="getDriveName">...</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="IP地址:" :label-width="formLabelWidth" prop="tdpz_ip">
|
||||
<el-row>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="tdpz_ip1" style="width: 43px; height: 30px"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1" style="color: #fff">. </el-col>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="tdpz_ip2" style="width: 43px; height: 30px"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1" style="color: #fff">.</el-col>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="tdpz_ip3" style="width: 43px; height: 30px"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1" style="color: #fff">.</el-col>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="tdpz_ip4" style="width: 43px; height: 30px"></el-input>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="端口号:" :label-width="formLabelWidth" prop="tdpz_port">
|
||||
<el-input v-model="FormData.tdpz_port" placeholder="" style="width: 200px; height: 30px"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="超过时间(ms):" :label-width="formLabelWidth" prop="tdpz_cssj">
|
||||
<el-input v-model="FormData.tdpz_cssj" placeholder="" style="width: 200px; height: 30px"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="间隔时间(ms):" :label-width="formLabelWidth" prop="tdpz_jgsj">
|
||||
<el-input v-model="FormData.tdpz_jgsj" placeholder="" style="width: 200px; height: 30px"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="轮询时间(ms):" :label-width="formLabelWidth" prop="tdpz_lxsj">
|
||||
<el-input v-model="FormData.tdpz_lxsj" placeholder="" style="width: 200px; height: 30px"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="重复次数:" :label-width="formLabelWidth" prop="tdpz_cfcs">
|
||||
<el-input v-model="FormData.tdpz_cfcs" placeholder="" style="width: 200px; height: 30px"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<div class="super_parmams">
|
||||
<h3>高级参数</h3>
|
||||
<div>
|
||||
<i class="el-icon-caret-bottom" v-if="is_retract"></i>
|
||||
<i class="el-icon-caret-top" v-else="is_retract"></i>
|
||||
<el-button type="text" plain @click="getRetract" style="
|
||||
width: 28px;
|
||||
border: none;
|
||||
color: rgba(16, 16, 16, 1);
|
||||
font-size: 14px;
|
||||
text-align: left;
|
||||
">
|
||||
收起</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="super_con" v-show="is_retract">
|
||||
<el-form :label-position="labelPosition" :rules="rules" ref="ruleForm">
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item>
|
||||
<el-checkbox v-model="FormData.tdpz_watchtime">watch time(s)</el-checkbox>
|
||||
<el-input v-model="input1" placeholder="" style="width: 200px; height: 30px"
|
||||
:disabled="isdisabled"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item>
|
||||
<el-checkbox v-model="FormData.tdpz_cjsylxdz">采集使用连续地址</el-checkbox>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="读写占空比:" :label-width="formLabelWidth">
|
||||
<el-row>
|
||||
<el-col :span="10">
|
||||
<el-input v-model="tdpz_dxzkb1" style="width: 91px; height: 30px"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="4">: </el-col>
|
||||
<el-col :span="10">
|
||||
<el-input v-model="tdpz_dxzkb2" style="width: 91px; height: 30px"></el-input>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="05/0F:" :label-width="formLabelWidth">
|
||||
<el-row>
|
||||
<el-col :span="8"><el-radio v-model="FormData.tdpz_050F" label="auto">auto</el-radio></el-col>
|
||||
<el-col :span="8"><el-radio v-model="FormData.tdpz_050F" label="05">05</el-radio></el-col>
|
||||
<el-col :span="8"><el-radio v-model="FormData.tdpz_050F" label="0F">0F</el-radio></el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="06/10:" :label-width="formLabelWidth">
|
||||
<el-row>
|
||||
<el-col :span="8"><el-radio v-model="FormData.tdpz_0610" label="auto">auto</el-radio></el-col>
|
||||
<el-col :span="8"><el-radio v-model="FormData.tdpz_0610" label="06">06</el-radio></el-col>
|
||||
<el-col :span="8"><el-radio v-model="FormData.tdpz_0610" label="10">10</el-radio></el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</div>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="saveGate">保 存</el-button>
|
||||
<el-button @click="add_passage = false">取 消</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
flag: false,
|
||||
gateway: JSON.parse(localStorage.getItem("tree"))[0].label,
|
||||
FormData: {
|
||||
tdpz_tdmc: "有线区Channel1",
|
||||
tdpz_td: "网口",
|
||||
tdpz_qdmc: "ModbusTCPClient",
|
||||
tdpz_port: "",
|
||||
tdpz_cssj: "",
|
||||
tdpz_jgsj: "",
|
||||
tdpz_lxsj: "",
|
||||
tdpz_cfcs: "",
|
||||
tdpz_watchtime: true,
|
||||
tdpz_cjsylxdz: false,
|
||||
tdpz_dxzkb: "",
|
||||
tdpz_050F: "auto",
|
||||
tdpz_0610: "auto",
|
||||
},
|
||||
tdpz_dxzkb1: "1",
|
||||
tdpz_dxzkb2: "1",
|
||||
tdpz_ip1: "",
|
||||
tdpz_ip2: "",
|
||||
tdpz_ip3: "",
|
||||
tdpz_ip4: "",
|
||||
options1: [
|
||||
{
|
||||
value: "有线区Channel1",
|
||||
label: "有线区Channel1",
|
||||
},
|
||||
{
|
||||
value: "无线区Channel1",
|
||||
label: "无线区Channel1",
|
||||
},
|
||||
],
|
||||
options2: [
|
||||
{
|
||||
value: "网口",
|
||||
label: "网口",
|
||||
},
|
||||
{
|
||||
value: "串口",
|
||||
label: "串口",
|
||||
},
|
||||
],
|
||||
value1: "有线区Channel1",
|
||||
value2: "网口",
|
||||
diag_drive: false,
|
||||
isdisabled: true,
|
||||
radio: "1",
|
||||
is_retract: true,
|
||||
labelPosition: "left",
|
||||
formLabelWidth: "116px",
|
||||
input1: 192,
|
||||
add_passage: false,
|
||||
rightMenu: "",
|
||||
dialogVisible: true,
|
||||
menuShow: false,
|
||||
datas: [],
|
||||
datas2: [
|
||||
{
|
||||
label: "通用标准",
|
||||
children: [
|
||||
{
|
||||
label: "ModbusTCPClient",
|
||||
},
|
||||
{
|
||||
label: "ModbusRTU_over_TCP",
|
||||
},
|
||||
{
|
||||
label: "OPCUAClient",
|
||||
},
|
||||
{
|
||||
label: "OPCDAClient",
|
||||
},
|
||||
{
|
||||
label: "MQTTClient",
|
||||
},
|
||||
{
|
||||
label: "OPCXMLDAClient",
|
||||
},
|
||||
{
|
||||
label: "环保212协议网口监听",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "PLC",
|
||||
children: [
|
||||
{
|
||||
label: "Slemens S7-200 Network",
|
||||
},
|
||||
{
|
||||
label: "Slemens S7-300 Network",
|
||||
},
|
||||
{
|
||||
label: "Slemens S7-400 Network",
|
||||
},
|
||||
{
|
||||
label: "Slemens S7-1200 Network",
|
||||
},
|
||||
{
|
||||
label: "Slemens S7-1500 Network",
|
||||
},
|
||||
{
|
||||
label: "EtherNet/IP CIP协议(AB OMR ON)",
|
||||
},
|
||||
{
|
||||
label: "MC_Qna-3E(三菱 基恩士 松下)",
|
||||
},
|
||||
{
|
||||
label: "MC_A-1E_Binary",
|
||||
},
|
||||
{
|
||||
label: "OMRON-FINS",
|
||||
},
|
||||
{
|
||||
label: "横河PLC",
|
||||
},
|
||||
{
|
||||
label: "西门子FetchWirte",
|
||||
},
|
||||
{
|
||||
label: "富机 FUJI_SPH_NET",
|
||||
},
|
||||
{
|
||||
label: "基恩士上位链路通讯",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "智能建筑",
|
||||
children: [],
|
||||
},
|
||||
{
|
||||
label: "厂家定制",
|
||||
children: [],
|
||||
},
|
||||
{
|
||||
label: "电力行业标准",
|
||||
children: [
|
||||
{
|
||||
label: "IEC104",
|
||||
},
|
||||
{
|
||||
label: "DLT645_over_TCP",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "CNC数控",
|
||||
children: [],
|
||||
},
|
||||
{
|
||||
label: "私有协议",
|
||||
children: [],
|
||||
},
|
||||
],
|
||||
defaultProps: {
|
||||
children: "children",
|
||||
label: "label",
|
||||
},
|
||||
rules: {
|
||||
tdpz_tdmc: [
|
||||
{ required: true, message: "请输入通道名称", trigger: "change" },
|
||||
],
|
||||
tdpz_td: [{ required: true, message: "请输入通道", trigger: "change" }],
|
||||
tdpz_qdmc: [
|
||||
{ required: true, message: "请输入驱动名称", trigger: "change" },
|
||||
],
|
||||
tdpz_ip: [{ required: true, message: "请输入ip地址", trigger: "blur" }],
|
||||
tdpz_port: [
|
||||
{ required: true, message: "请输入端口号", trigger: "blur" },
|
||||
],
|
||||
tdpz_cssj: [
|
||||
{ required: true, message: "请输入超出时间", trigger: "blur" },
|
||||
],
|
||||
tdpz_jgsj: [
|
||||
{ required: true, message: "请输入间隔时间", trigger: "blur" },
|
||||
],
|
||||
tdpz_lxsj: [
|
||||
{ required: true, message: "请输入轮询时间", trigger: "blur" },
|
||||
],
|
||||
tdpz_cfcs: [
|
||||
{ required: true, message: "请输入重复次数", trigger: "blur" },
|
||||
],
|
||||
},
|
||||
tmDisplay: false,
|
||||
rightMenu: {},
|
||||
node: "",
|
||||
data: [
|
||||
{
|
||||
label: "Gateway",
|
||||
id: 1,
|
||||
editing: true,
|
||||
children: [
|
||||
{
|
||||
label: "数据采集",
|
||||
id: 11,
|
||||
children: [
|
||||
{
|
||||
label: "I/O点",
|
||||
id: 111,
|
||||
},
|
||||
{
|
||||
label: "用户点",
|
||||
id: 112,
|
||||
},
|
||||
{
|
||||
label: "计算点",
|
||||
id: 113,
|
||||
},
|
||||
{
|
||||
label: "系统点",
|
||||
id: 114,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "数据服务",
|
||||
id: 12,
|
||||
children: [
|
||||
{
|
||||
label: "Modbus",
|
||||
id: 121,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "IOT",
|
||||
id: 13,
|
||||
children: [
|
||||
{
|
||||
label: "Mqtt Client",
|
||||
id: 131,
|
||||
},
|
||||
{
|
||||
label: "Alink",
|
||||
id: 132,
|
||||
},
|
||||
{
|
||||
label: "Tlink",
|
||||
id: 133,
|
||||
},
|
||||
{
|
||||
label: "loTDDC",
|
||||
id: 134,
|
||||
},
|
||||
{
|
||||
label: "Ulink",
|
||||
id: 135,
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
dialogVisible: false,
|
||||
newNodeData: {
|
||||
// 新节点的数据，可以根据需求定义
|
||||
// ...
|
||||
},
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
rightClick(e, data, node, comp) {
|
||||
console.log('e:', e, 'data', data)
|
||||
// this.node = node;
|
||||
// console.log(this.node)
|
||||
console.log(data.id);
|
||||
console.log(comp);
|
||||
this.rightMenu = { top: e.pageY + 'px', left: e.pageX + 'px' }
|
||||
this.tmDisplay = true
|
||||
const self = this
|
||||
document.onclick = function (ev) {
|
||||
if (ev.target !== document.getElementById('perTreeMenu')) {
|
||||
self.tmDisplay = false
|
||||
}
|
||||
}
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.tree_menu {
|
||||
position: fixed;
|
||||
display: block;
|
||||
z-index: 20000;
|
||||
background-color: #fff;
|
||||
padding: 5px 0;
|
||||
border: 1px solid #ebeef5;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
|
||||
|
||||
ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
ul li {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0 15px;
|
||||
font-size: 14px;
|
||||
line-height: 30px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
ul li:hover {
|
||||
background-color: #ebeef5
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,718 @@
|
|||
<!-- <template>
|
||||
<div>
|
||||
<el-tree :data="data" node-key="id" :props="defaultProps" @node-contextmenu="rightClick" @check="treeCheck">
|
||||
</el-tree>
|
||||
<div id="perTreeMenu" v-if="tmDisplay" class="tree_menu" :style="{ ...rightMenu }">
|
||||
<ul>
|
||||
<li @click="add_passage = true">新增通道</li>
|
||||
<li>取消</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="pas_params">
|
||||
<el-dialog title="通道参数设置" :visible.sync="add_passage" width="765px" v-loading="Loading">
|
||||
<el-form :model="FormData" :label-position="labelPosition" :rules="rules" ref="ruleForm">
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="通道名称:" :label-width="formLabelWidth" prop="tdpz_tdmc">
|
||||
<el-select v-model="FormData.tdpz_tdmc" placeholder="" style="width: 200px; height: 30px">
|
||||
<el-option v-for="(item, index) in options1" :key="index" :label="item.label" :value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="通道:" :label-width="formLabelWidth" prop="tdpz_td">
|
||||
<el-select v-model="FormData.tdpz_td" placeholder="" style="width: 200px; height: 30px">
|
||||
<el-option v-for="(item, index) in options2" :key="index" :label="item.label" :value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="驱动名称:" :label-width="formLabelWidth" prop="tdpz_qdmc">
|
||||
<el-row>
|
||||
<el-col :span="18">
|
||||
<el-input v-model="FormData.tdpz_qdmc" placeholder="" style="width: 200px; height: 30px"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-button style="width: 50px; height: 30px" @click="getDriveName">...</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="IP地址:" :label-width="formLabelWidth" prop="tdpz_ip">
|
||||
<el-row>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="tdpz_ip1" style="width: 43px; height: 30px"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1" style="color: #fff">. </el-col>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="tdpz_ip2" style="width: 43px; height: 30px"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1" style="color: #fff">.</el-col>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="tdpz_ip3" style="width: 43px; height: 30px"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1" style="color: #fff">.</el-col>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="tdpz_ip4" style="width: 43px; height: 30px"></el-input>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="端口号:" :label-width="formLabelWidth" prop="tdpz_port">
|
||||
<el-input v-model="FormData.tdpz_port" placeholder="" style="width: 200px; height: 30px"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="超过时间(ms):" :label-width="formLabelWidth" prop="tdpz_cssj">
|
||||
<el-input v-model="FormData.tdpz_cssj" placeholder="" style="width: 200px; height: 30px"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="间隔时间(ms):" :label-width="formLabelWidth" prop="tdpz_jgsj">
|
||||
<el-input v-model="FormData.tdpz_jgsj" placeholder="" style="width: 200px; height: 30px"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="轮询时间(ms):" :label-width="formLabelWidth" prop="tdpz_lxsj">
|
||||
<el-input v-model="FormData.tdpz_lxsj" placeholder="" style="width: 200px; height: 30px"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="重复次数:" :label-width="formLabelWidth" prop="tdpz_cfcs">
|
||||
<el-input v-model="FormData.tdpz_cfcs" placeholder="" style="width: 200px; height: 30px"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<div class="super_parmams">
|
||||
<h3>高级参数</h3>
|
||||
<div>
|
||||
<i class="el-icon-caret-bottom" v-if="is_retract"></i>
|
||||
<i class="el-icon-caret-top" v-else="is_retract"></i>
|
||||
<el-button type="text" plain @click="getRetract" style="
|
||||
width: 28px;
|
||||
border: none;
|
||||
color: rgba(16, 16, 16, 1);
|
||||
font-size: 14px;
|
||||
text-align: left;
|
||||
">
|
||||
收起</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="super_con" v-show="is_retract">
|
||||
<el-form :label-position="labelPosition" :rules="rules" ref="ruleForm">
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item>
|
||||
<el-checkbox v-model="FormData.tdpz_watchtime">watch time(s)</el-checkbox>
|
||||
<el-input v-model="input1" placeholder="" style="width: 200px; height: 30px"
|
||||
:disabled="isdisabled"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item>
|
||||
<el-checkbox v-model="FormData.tdpz_cjsylxdz">采集使用连续地址</el-checkbox>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="读写占空比:" :label-width="formLabelWidth">
|
||||
<el-row>
|
||||
<el-col :span="10">
|
||||
<el-input v-model="tdpz_dxzkb1" style="width: 91px; height: 30px"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="4">: </el-col>
|
||||
<el-col :span="10">
|
||||
<el-input v-model="tdpz_dxzkb2" style="width: 91px; height: 30px"></el-input>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="05/0F:" :label-width="formLabelWidth">
|
||||
<el-row>
|
||||
<el-col :span="8"><el-radio v-model="FormData.tdpz_050F" label="auto">auto</el-radio></el-col>
|
||||
<el-col :span="8"><el-radio v-model="FormData.tdpz_050F" label="05">05</el-radio></el-col>
|
||||
<el-col :span="8"><el-radio v-model="FormData.tdpz_050F" label="0F">0F</el-radio></el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="06/10:" :label-width="formLabelWidth">
|
||||
<el-row>
|
||||
<el-col :span="8"><el-radio v-model="FormData.tdpz_0610" label="auto">auto</el-radio></el-col>
|
||||
<el-col :span="8"><el-radio v-model="FormData.tdpz_0610" label="06">06</el-radio></el-col>
|
||||
<el-col :span="8"><el-radio v-model="FormData.tdpz_0610" label="10">10</el-radio></el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</div>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="saveGate">保 存</el-button>
|
||||
<el-button @click="add_passage = false">取 消</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
flag: false,
|
||||
gateway: JSON.parse(localStorage.getItem("tree"))[0].label,
|
||||
FormData: {
|
||||
tdpz_tdmc: "有线区Channel1",
|
||||
tdpz_td: "网口",
|
||||
tdpz_qdmc: "ModbusTCPClient",
|
||||
tdpz_port: "",
|
||||
tdpz_cssj: "",
|
||||
tdpz_jgsj: "",
|
||||
tdpz_lxsj: "",
|
||||
tdpz_cfcs: "",
|
||||
tdpz_watchtime: true,
|
||||
tdpz_cjsylxdz: false,
|
||||
tdpz_dxzkb: "",
|
||||
tdpz_050F: "auto",
|
||||
tdpz_0610: "auto",
|
||||
},
|
||||
tdpz_dxzkb1: "1",
|
||||
tdpz_dxzkb2: "1",
|
||||
tdpz_ip1: "",
|
||||
tdpz_ip2: "",
|
||||
tdpz_ip3: "",
|
||||
tdpz_ip4: "",
|
||||
options1: [
|
||||
{
|
||||
value: "有线区Channel1",
|
||||
label: "有线区Channel1",
|
||||
},
|
||||
{
|
||||
value: "无线区Channel1",
|
||||
label: "无线区Channel1",
|
||||
},
|
||||
],
|
||||
options2: [
|
||||
{
|
||||
value: "网口",
|
||||
label: "网口",
|
||||
},
|
||||
{
|
||||
value: "串口",
|
||||
label: "串口",
|
||||
},
|
||||
],
|
||||
value1: "有线区Channel1",
|
||||
value2: "网口",
|
||||
diag_drive: false,
|
||||
isdisabled: true,
|
||||
radio: "1",
|
||||
is_retract: true,
|
||||
labelPosition: "left",
|
||||
formLabelWidth: "116px",
|
||||
input1: 192,
|
||||
add_passage: false,
|
||||
rightMenu: "",
|
||||
dialogVisible: true,
|
||||
menuShow: false,
|
||||
datas: [],
|
||||
datas2: [
|
||||
{
|
||||
label: "通用标准",
|
||||
children: [
|
||||
{
|
||||
label: "ModbusTCPClient",
|
||||
},
|
||||
{
|
||||
label: "ModbusRTU_over_TCP",
|
||||
},
|
||||
{
|
||||
label: "OPCUAClient",
|
||||
},
|
||||
{
|
||||
label: "OPCDAClient",
|
||||
},
|
||||
{
|
||||
label: "MQTTClient",
|
||||
},
|
||||
{
|
||||
label: "OPCXMLDAClient",
|
||||
},
|
||||
{
|
||||
label: "环保212协议网口监听",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "PLC",
|
||||
children: [
|
||||
{
|
||||
label: "Slemens S7-200 Network",
|
||||
},
|
||||
{
|
||||
label: "Slemens S7-300 Network",
|
||||
},
|
||||
{
|
||||
label: "Slemens S7-400 Network",
|
||||
},
|
||||
{
|
||||
label: "Slemens S7-1200 Network",
|
||||
},
|
||||
{
|
||||
label: "Slemens S7-1500 Network",
|
||||
},
|
||||
{
|
||||
label: "EtherNet/IP CIP协议(AB OMR ON)",
|
||||
},
|
||||
{
|
||||
label: "MC_Qna-3E(三菱 基恩士 松下)",
|
||||
},
|
||||
{
|
||||
label: "MC_A-1E_Binary",
|
||||
},
|
||||
{
|
||||
label: "OMRON-FINS",
|
||||
},
|
||||
{
|
||||
label: "横河PLC",
|
||||
},
|
||||
{
|
||||
label: "西门子FetchWirte",
|
||||
},
|
||||
{
|
||||
label: "富机 FUJI_SPH_NET",
|
||||
},
|
||||
{
|
||||
label: "基恩士上位链路通讯",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "智能建筑",
|
||||
children: [],
|
||||
},
|
||||
{
|
||||
label: "厂家定制",
|
||||
children: [],
|
||||
},
|
||||
{
|
||||
label: "电力行业标准",
|
||||
children: [
|
||||
{
|
||||
label: "IEC104",
|
||||
},
|
||||
{
|
||||
label: "DLT645_over_TCP",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "CNC数控",
|
||||
children: [],
|
||||
},
|
||||
{
|
||||
label: "私有协议",
|
||||
children: [],
|
||||
},
|
||||
],
|
||||
defaultProps: {
|
||||
children: "children",
|
||||
label: "label",
|
||||
},
|
||||
rules: {
|
||||
tdpz_tdmc: [
|
||||
{ required: true, message: "请输入通道名称", trigger: "change" },
|
||||
],
|
||||
tdpz_td: [{ required: true, message: "请输入通道", trigger: "change" }],
|
||||
tdpz_qdmc: [
|
||||
{ required: true, message: "请输入驱动名称", trigger: "change" },
|
||||
],
|
||||
tdpz_ip: [{ required: true, message: "请输入ip地址", trigger: "blur" }],
|
||||
tdpz_port: [
|
||||
{ required: true, message: "请输入端口号", trigger: "blur" },
|
||||
],
|
||||
tdpz_cssj: [
|
||||
{ required: true, message: "请输入超出时间", trigger: "blur" },
|
||||
],
|
||||
tdpz_jgsj: [
|
||||
{ required: true, message: "请输入间隔时间", trigger: "blur" },
|
||||
],
|
||||
tdpz_lxsj: [
|
||||
{ required: true, message: "请输入轮询时间", trigger: "blur" },
|
||||
],
|
||||
tdpz_cfcs: [
|
||||
{ required: true, message: "请输入重复次数", trigger: "blur" },
|
||||
],
|
||||
},
|
||||
tmDisplay: false,
|
||||
rightMenu: {},
|
||||
node: "",
|
||||
data: [
|
||||
{
|
||||
label: "Gateway",
|
||||
id: 1,
|
||||
editing: true,
|
||||
children: [
|
||||
{
|
||||
label: "数据采集",
|
||||
id: 11,
|
||||
children: [
|
||||
{
|
||||
label: "I/O点",
|
||||
id: 111,
|
||||
},
|
||||
{
|
||||
label: "用户点",
|
||||
id: 112,
|
||||
},
|
||||
{
|
||||
label: "计算点",
|
||||
id: 113,
|
||||
},
|
||||
{
|
||||
label: "系统点",
|
||||
id: 114,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "数据服务",
|
||||
id: 12,
|
||||
children: [
|
||||
{
|
||||
label: "Modbus",
|
||||
id: 121,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "IOT",
|
||||
id: 13,
|
||||
children: [
|
||||
{
|
||||
label: "Mqtt Client",
|
||||
id: 131,
|
||||
},
|
||||
{
|
||||
label: "Alink",
|
||||
id: 132,
|
||||
},
|
||||
{
|
||||
label: "Tlink",
|
||||
id: 133,
|
||||
},
|
||||
{
|
||||
label: "loTDDC",
|
||||
id: 134,
|
||||
},
|
||||
{
|
||||
label: "Ulink",
|
||||
id: 135,
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
dialogVisible: false,
|
||||
newNodeData: {
|
||||
// 新节点的数据，可以根据需求定义
|
||||
// ...
|
||||
},
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
rightClick(e, data, node, comp) {
|
||||
console.log('e:', e, 'data', data)
|
||||
// this.node = node;
|
||||
// console.log(this.node)
|
||||
console.log(data.id);
|
||||
console.log(comp);
|
||||
this.rightMenu = { top: e.pageY + 'px', left: e.pageX + 'px' }
|
||||
this.tmDisplay = true
|
||||
const self = this
|
||||
document.onclick = function (ev) {
|
||||
if (ev.target !== document.getElementById('perTreeMenu')) {
|
||||
self.tmDisplay = false
|
||||
}
|
||||
}
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.tree_menu {
|
||||
position: fixed;
|
||||
display: block;
|
||||
z-index: 20000;
|
||||
background-color: #fff;
|
||||
padding: 5px 0;
|
||||
border: 1px solid #ebeef5;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
|
||||
|
||||
ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
ul li {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0 15px;
|
||||
font-size: 14px;
|
||||
line-height: 30px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
ul li:hover {
|
||||
background-color: #ebeef5
|
||||
}
|
||||
}
|
||||
</style> -->
|
||||
<template>
|
||||
<div>
|
||||
<el-button class="addBtn" type="primary" size="small" @click="openAddTop">添加顶级节点</el-button>
|
||||
<el-input placeholder="输入关键字进行过滤" v-model="filterText">
|
||||
</el-input>
|
||||
<el-tree ref="SlotTree" :data="setTree" :props="defaultProps" :expand-on-click-node="false" highlight-current
|
||||
:node-key="NODE_KEY">
|
||||
<div class="comp-tr-node" slot-scope="{ node, data }">
|
||||
<!-- 编辑状态 -->
|
||||
<template v-if="node.isEdit">
|
||||
<el-input v-model="data.label" autofocus size="mini" :ref="'slotTreeInput' + data[NODE_KEY]"
|
||||
@blur.stop="handleInput(node, data)" @keyup.enter.native="handleInput(node, data)"></el-input>
|
||||
</template>
|
||||
<!-- 非编辑状态 -->
|
||||
<template v-else>
|
||||
<!-- 名称： 新增节点增加class（is-new） -->
|
||||
<span :class="[
|
||||
data[NODE_KEY] < NODE_ID_START ? 'is-new' : '',
|
||||
'comp-tr-node--name',
|
||||
]">
|
||||
{{ node.label }}
|
||||
</span>
|
||||
|
||||
<!-- 按钮 -->
|
||||
<span class="comp-tr-node--btns">
|
||||
<!-- 新增 -->
|
||||
<el-button type="text" size="mini" @click="appendChild(node, data)">新增</el-button>
|
||||
|
||||
<!-- 编辑 -->
|
||||
<el-button size="mini" type="text" @click="handleEdit(node, data)">编辑</el-button>
|
||||
|
||||
<!-- 删除 -->
|
||||
<el-button size="mini" type="text" @click="handleDelete(node, data)">删除</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</div>
|
||||
</el-tree>
|
||||
<el-dialog :close-on-click-modal="false" :visible.sync="addDialogVisible" width="30%" top="5vh" :show-close="true"
|
||||
:before-close="addHandleClose" :title="addDialogTitle == 'edit' ? '编辑名称' : '新增名称'">
|
||||
<el-form :model="addForm" :rules="addRules" label-width="80px" ref="addRef">
|
||||
<el-form-item label="名称" prop="name">
|
||||
<el-input size="medium" v-model="addForm.name" placeholder="名称" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<span class="dialog-footer">
|
||||
<el-button size="small" @click="addHandleClose">取 消</el-button>
|
||||
<el-button size="small" type="primary" @click="addData">确 定</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
addType: 1,
|
||||
addNode: '',
|
||||
startId: null,
|
||||
setTree: [], // tree数据
|
||||
NODE_KEY: "id", // id对应字段
|
||||
MAX_LEVEL: 3, // 设定最大层级
|
||||
NODE_ID_START: 0, // 新增节点id，逐次递减
|
||||
startId: null,
|
||||
defaultProps: {
|
||||
// 默认设置
|
||||
children: "children",
|
||||
label: "label",
|
||||
},
|
||||
addDataList: "",
|
||||
addForm: {
|
||||
name: "",
|
||||
},
|
||||
addRules: {
|
||||
name: [{ required: true, message: "请输入名称", trigger: "blur" }],
|
||||
},
|
||||
addDialogTitle: "new",
|
||||
addDialogVisible: false,
|
||||
// 之前遗忘了这个参数 重新补发
|
||||
initParam: {
|
||||
// 新增参数
|
||||
name: "",
|
||||
id: 0,
|
||||
children: [],
|
||||
},
|
||||
}
|
||||
},
|
||||
created() {
|
||||
// 初始值
|
||||
this.startId = this.NODE_ID_START;
|
||||
},
|
||||
methods: {
|
||||
handleDelete(_node, _data) {
|
||||
// 删除节点
|
||||
console.log(_node, _data);
|
||||
// 判断是否存在子节点
|
||||
if (_data.children && _data.children.length !== 0) {
|
||||
this.$message.error("此节点有子级，不可删除！");
|
||||
return false;
|
||||
} else {
|
||||
// 删除操作
|
||||
let DeletOprate = () => {
|
||||
this.$nextTick(() => {
|
||||
if (this.$refs.SlotTree) {
|
||||
this.$refs.SlotTree.remove(_data);
|
||||
this.$message.success("删除成功！");
|
||||
}
|
||||
});
|
||||
};
|
||||
// 二次确认
|
||||
let ConfirmFun = () => {
|
||||
this.$confirm("是否删除此节点？", "提示", {
|
||||
confirmButtonText: "确认",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning",
|
||||
})
|
||||
.then(() => {
|
||||
DeletOprate();
|
||||
})
|
||||
.catch(() => { });
|
||||
};
|
||||
// 判断是否新增： 新增节点直接删除，已存在的节点要二次确认
|
||||
_data[this.NODE_KEY] < this.NODE_ID_START
|
||||
? DeletOprate()
|
||||
: ConfirmFun();
|
||||
}
|
||||
},
|
||||
handleInput(_node, _data) {
|
||||
// 修改节点
|
||||
console.log(_node, _data);
|
||||
// 退出编辑状态
|
||||
if (_node.isEdit) {
|
||||
this.$set(_node, "isEdit", false);
|
||||
}
|
||||
},
|
||||
handleEdit(_node, _data) {
|
||||
// 编辑节点
|
||||
console.log(_node, _data);
|
||||
// 设置编辑状态
|
||||
if (!_node.isEdit) {
|
||||
this.$set(_node, "isEdit", true);
|
||||
}
|
||||
// 输入框聚焦
|
||||
this.$nextTick(() => {
|
||||
if (this.$refs["slotTreeInput" + _data[this.NODE_KEY]]) {
|
||||
this.$refs["slotTreeInput" + _data[this.NODE_KEY]].$refs.input.focus();
|
||||
}
|
||||
});
|
||||
},
|
||||
// 新增子级节点打开事件
|
||||
appendChild(node, data) {
|
||||
this.addForm.name = "";
|
||||
this.addDialogVisible = true;
|
||||
this.addDialogTitle = "new";
|
||||
this.addDataList = data;
|
||||
this.addNode = node
|
||||
this.addType = 2;
|
||||
},
|
||||
// 新增子级节点
|
||||
handleAdd(_node, _data, _name) {
|
||||
// 新增节点
|
||||
console.log(_node, _data);
|
||||
// 判断层级
|
||||
if (_node.level >= this.MAX_LEVEL) {
|
||||
this.$message.warning("当前已达到" + this.MAX_LEVEL + "级，无法新增！");
|
||||
return false;
|
||||
}
|
||||
// 参数修改
|
||||
let obj = JSON.parse(JSON.stringify(this.initParam)); // copy参数
|
||||
obj.id = _data[this.NODE_KEY]; // 父id
|
||||
obj[this.NODE_KEY] = ++this.startId; // 节点id：逐次递减id
|
||||
obj.label = _name
|
||||
// 判断字段是否存在
|
||||
if (!_data.children) {
|
||||
this.$set(_data, "children", []);
|
||||
}
|
||||
// 新增数据
|
||||
_data.children.push(obj);
|
||||
// 展开节点
|
||||
if (!_node.expanded) {
|
||||
_node.expanded = true;
|
||||
}
|
||||
},
|
||||
// 新增顶级结点打开事件
|
||||
handleAddTop() {
|
||||
// 添加顶部节点
|
||||
let obj = JSON.parse(JSON.stringify(this.initParam)); // copy参数
|
||||
console.log(obj);
|
||||
obj[this.NODE_KEY] = ++this.startId; // 节点id：逐次递减id
|
||||
obj.label = this.addForm.name;
|
||||
console.log(obj.label)
|
||||
this.setTree.push(obj);
|
||||
},
|
||||
// 新增顶级结点
|
||||
openAddTop() {
|
||||
this.addForm.name = "";
|
||||
this.addDialogVisible = true;
|
||||
this.addDialogTitle = "new";
|
||||
this.addType = 1;
|
||||
},
|
||||
// 点击确定 新增子级菜单
|
||||
addData() {
|
||||
var t = this;
|
||||
this.$refs.addRef.validate(async (valid) => {
|
||||
if (valid) {
|
||||
if (t.addType == 1) {
|
||||
t.handleAddTop();
|
||||
this.addDialogVisible = false;
|
||||
} else if (t.addType == 2) {
|
||||
const obj = JSON.parse(JSON.stringify(t.addForm));
|
||||
// 需要判断新增还是编辑
|
||||
t.handleAdd(t.addNode, t.addDataList, obj.name)
|
||||
this.addDialogVisible = false;
|
||||
}
|
||||
} else {
|
||||
console.log("error submit!!");
|
||||
return false;
|
||||
}
|
||||
});
|
||||
},
|
||||
addHandleClose() {
|
||||
this.addDialogVisible = false;
|
||||
this.$refs.addRef.resetFields();
|
||||
},
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,785 @@
|
|||
<!-- <template>
|
||||
<div>
|
||||
<el-tree :data="data" node-key="id" :props="defaultProps" @node-contextmenu="rightClick" @check="treeCheck">
|
||||
</el-tree>
|
||||
<div id="perTreeMenu" v-if="tmDisplay" class="tree_menu" :style="{ ...rightMenu }">
|
||||
<ul>
|
||||
<li @click="add_passage = true">新增通道</li>
|
||||
<li>取消</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="pas_params">
|
||||
<el-dialog title="通道参数设置" :visible.sync="add_passage" width="765px" v-loading="Loading">
|
||||
<el-form :model="FormData" :label-position="labelPosition" :rules="rules" ref="ruleForm">
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="通道名称:" :label-width="formLabelWidth" prop="tdpz_tdmc">
|
||||
<el-select v-model="FormData.tdpz_tdmc" placeholder="" style="width: 200px; height: 30px">
|
||||
<el-option v-for="(item, index) in options1" :key="index" :label="item.label" :value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="通道:" :label-width="formLabelWidth" prop="tdpz_td">
|
||||
<el-select v-model="FormData.tdpz_td" placeholder="" style="width: 200px; height: 30px">
|
||||
<el-option v-for="(item, index) in options2" :key="index" :label="item.label" :value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="驱动名称:" :label-width="formLabelWidth" prop="tdpz_qdmc">
|
||||
<el-row>
|
||||
<el-col :span="18">
|
||||
<el-input v-model="FormData.tdpz_qdmc" placeholder="" style="width: 200px; height: 30px"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-button style="width: 50px; height: 30px" @click="getDriveName">...</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="IP地址:" :label-width="formLabelWidth" prop="tdpz_ip">
|
||||
<el-row>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="tdpz_ip1" style="width: 43px; height: 30px"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1" style="color: #fff">. </el-col>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="tdpz_ip2" style="width: 43px; height: 30px"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1" style="color: #fff">.</el-col>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="tdpz_ip3" style="width: 43px; height: 30px"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1" style="color: #fff">.</el-col>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="tdpz_ip4" style="width: 43px; height: 30px"></el-input>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="端口号:" :label-width="formLabelWidth" prop="tdpz_port">
|
||||
<el-input v-model="FormData.tdpz_port" placeholder="" style="width: 200px; height: 30px"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="超过时间(ms):" :label-width="formLabelWidth" prop="tdpz_cssj">
|
||||
<el-input v-model="FormData.tdpz_cssj" placeholder="" style="width: 200px; height: 30px"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="间隔时间(ms):" :label-width="formLabelWidth" prop="tdpz_jgsj">
|
||||
<el-input v-model="FormData.tdpz_jgsj" placeholder="" style="width: 200px; height: 30px"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="轮询时间(ms):" :label-width="formLabelWidth" prop="tdpz_lxsj">
|
||||
<el-input v-model="FormData.tdpz_lxsj" placeholder="" style="width: 200px; height: 30px"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="重复次数:" :label-width="formLabelWidth" prop="tdpz_cfcs">
|
||||
<el-input v-model="FormData.tdpz_cfcs" placeholder="" style="width: 200px; height: 30px"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<div class="super_parmams">
|
||||
<h3>高级参数</h3>
|
||||
<div>
|
||||
<i class="el-icon-caret-bottom" v-if="is_retract"></i>
|
||||
<i class="el-icon-caret-top" v-else="is_retract"></i>
|
||||
<el-button type="text" plain @click="getRetract" style="
|
||||
width: 28px;
|
||||
border: none;
|
||||
color: rgba(16, 16, 16, 1);
|
||||
font-size: 14px;
|
||||
text-align: left;
|
||||
">
|
||||
收起</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="super_con" v-show="is_retract">
|
||||
<el-form :label-position="labelPosition" :rules="rules" ref="ruleForm">
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item>
|
||||
<el-checkbox v-model="FormData.tdpz_watchtime">watch time(s)</el-checkbox>
|
||||
<el-input v-model="input1" placeholder="" style="width: 200px; height: 30px"
|
||||
:disabled="isdisabled"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item>
|
||||
<el-checkbox v-model="FormData.tdpz_cjsylxdz">采集使用连续地址</el-checkbox>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="读写占空比:" :label-width="formLabelWidth">
|
||||
<el-row>
|
||||
<el-col :span="10">
|
||||
<el-input v-model="tdpz_dxzkb1" style="width: 91px; height: 30px"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="4">: </el-col>
|
||||
<el-col :span="10">
|
||||
<el-input v-model="tdpz_dxzkb2" style="width: 91px; height: 30px"></el-input>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="05/0F:" :label-width="formLabelWidth">
|
||||
<el-row>
|
||||
<el-col :span="8"><el-radio v-model="FormData.tdpz_050F" label="auto">auto</el-radio></el-col>
|
||||
<el-col :span="8"><el-radio v-model="FormData.tdpz_050F" label="05">05</el-radio></el-col>
|
||||
<el-col :span="8"><el-radio v-model="FormData.tdpz_050F" label="0F">0F</el-radio></el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="06/10:" :label-width="formLabelWidth">
|
||||
<el-row>
|
||||
<el-col :span="8"><el-radio v-model="FormData.tdpz_0610" label="auto">auto</el-radio></el-col>
|
||||
<el-col :span="8"><el-radio v-model="FormData.tdpz_0610" label="06">06</el-radio></el-col>
|
||||
<el-col :span="8"><el-radio v-model="FormData.tdpz_0610" label="10">10</el-radio></el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</div>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="saveGate">保 存</el-button>
|
||||
<el-button @click="add_passage = false">取 消</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
flag: false,
|
||||
gateway: JSON.parse(localStorage.getItem("tree"))[0].label,
|
||||
FormData: {
|
||||
tdpz_tdmc: "有线区Channel1",
|
||||
tdpz_td: "网口",
|
||||
tdpz_qdmc: "ModbusTCPClient",
|
||||
tdpz_port: "",
|
||||
tdpz_cssj: "",
|
||||
tdpz_jgsj: "",
|
||||
tdpz_lxsj: "",
|
||||
tdpz_cfcs: "",
|
||||
tdpz_watchtime: true,
|
||||
tdpz_cjsylxdz: false,
|
||||
tdpz_dxzkb: "",
|
||||
tdpz_050F: "auto",
|
||||
tdpz_0610: "auto",
|
||||
},
|
||||
tdpz_dxzkb1: "1",
|
||||
tdpz_dxzkb2: "1",
|
||||
tdpz_ip1: "",
|
||||
tdpz_ip2: "",
|
||||
tdpz_ip3: "",
|
||||
tdpz_ip4: "",
|
||||
options1: [
|
||||
{
|
||||
value: "有线区Channel1",
|
||||
label: "有线区Channel1",
|
||||
},
|
||||
{
|
||||
value: "无线区Channel1",
|
||||
label: "无线区Channel1",
|
||||
},
|
||||
],
|
||||
options2: [
|
||||
{
|
||||
value: "网口",
|
||||
label: "网口",
|
||||
},
|
||||
{
|
||||
value: "串口",
|
||||
label: "串口",
|
||||
},
|
||||
],
|
||||
value1: "有线区Channel1",
|
||||
value2: "网口",
|
||||
diag_drive: false,
|
||||
isdisabled: true,
|
||||
radio: "1",
|
||||
is_retract: true,
|
||||
labelPosition: "left",
|
||||
formLabelWidth: "116px",
|
||||
input1: 192,
|
||||
add_passage: false,
|
||||
rightMenu: "",
|
||||
dialogVisible: true,
|
||||
menuShow: false,
|
||||
datas: [],
|
||||
datas2: [
|
||||
{
|
||||
label: "通用标准",
|
||||
children: [
|
||||
{
|
||||
label: "ModbusTCPClient",
|
||||
},
|
||||
{
|
||||
label: "ModbusRTU_over_TCP",
|
||||
},
|
||||
{
|
||||
label: "OPCUAClient",
|
||||
},
|
||||
{
|
||||
label: "OPCDAClient",
|
||||
},
|
||||
{
|
||||
label: "MQTTClient",
|
||||
},
|
||||
{
|
||||
label: "OPCXMLDAClient",
|
||||
},
|
||||
{
|
||||
label: "环保212协议网口监听",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "PLC",
|
||||
children: [
|
||||
{
|
||||
label: "Slemens S7-200 Network",
|
||||
},
|
||||
{
|
||||
label: "Slemens S7-300 Network",
|
||||
},
|
||||
{
|
||||
label: "Slemens S7-400 Network",
|
||||
},
|
||||
{
|
||||
label: "Slemens S7-1200 Network",
|
||||
},
|
||||
{
|
||||
label: "Slemens S7-1500 Network",
|
||||
},
|
||||
{
|
||||
label: "EtherNet/IP CIP协议(AB OMR ON)",
|
||||
},
|
||||
{
|
||||
label: "MC_Qna-3E(三菱 基恩士 松下)",
|
||||
},
|
||||
{
|
||||
label: "MC_A-1E_Binary",
|
||||
},
|
||||
{
|
||||
label: "OMRON-FINS",
|
||||
},
|
||||
{
|
||||
label: "横河PLC",
|
||||
},
|
||||
{
|
||||
label: "西门子FetchWirte",
|
||||
},
|
||||
{
|
||||
label: "富机 FUJI_SPH_NET",
|
||||
},
|
||||
{
|
||||
label: "基恩士上位链路通讯",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "智能建筑",
|
||||
children: [],
|
||||
},
|
||||
{
|
||||
label: "厂家定制",
|
||||
children: [],
|
||||
},
|
||||
{
|
||||
label: "电力行业标准",
|
||||
children: [
|
||||
{
|
||||
label: "IEC104",
|
||||
},
|
||||
{
|
||||
label: "DLT645_over_TCP",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "CNC数控",
|
||||
children: [],
|
||||
},
|
||||
{
|
||||
label: "私有协议",
|
||||
children: [],
|
||||
},
|
||||
],
|
||||
defaultProps: {
|
||||
children: "children",
|
||||
label: "label",
|
||||
},
|
||||
rules: {
|
||||
tdpz_tdmc: [
|
||||
{ required: true, message: "请输入通道名称", trigger: "change" },
|
||||
],
|
||||
tdpz_td: [{ required: true, message: "请输入通道", trigger: "change" }],
|
||||
tdpz_qdmc: [
|
||||
{ required: true, message: "请输入驱动名称", trigger: "change" },
|
||||
],
|
||||
tdpz_ip: [{ required: true, message: "请输入ip地址", trigger: "blur" }],
|
||||
tdpz_port: [
|
||||
{ required: true, message: "请输入端口号", trigger: "blur" },
|
||||
],
|
||||
tdpz_cssj: [
|
||||
{ required: true, message: "请输入超出时间", trigger: "blur" },
|
||||
],
|
||||
tdpz_jgsj: [
|
||||
{ required: true, message: "请输入间隔时间", trigger: "blur" },
|
||||
],
|
||||
tdpz_lxsj: [
|
||||
{ required: true, message: "请输入轮询时间", trigger: "blur" },
|
||||
],
|
||||
tdpz_cfcs: [
|
||||
{ required: true, message: "请输入重复次数", trigger: "blur" },
|
||||
],
|
||||
},
|
||||
tmDisplay: false,
|
||||
rightMenu: {},
|
||||
node: "",
|
||||
data: [
|
||||
{
|
||||
label: "Gateway",
|
||||
id: 1,
|
||||
editing: true,
|
||||
children: [
|
||||
{
|
||||
label: "数据采集",
|
||||
id: 11,
|
||||
children: [
|
||||
{
|
||||
label: "I/O点",
|
||||
id: 111,
|
||||
},
|
||||
{
|
||||
label: "用户点",
|
||||
id: 112,
|
||||
},
|
||||
{
|
||||
label: "计算点",
|
||||
id: 113,
|
||||
},
|
||||
{
|
||||
label: "系统点",
|
||||
id: 114,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "数据服务",
|
||||
id: 12,
|
||||
children: [
|
||||
{
|
||||
label: "Modbus",
|
||||
id: 121,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "IOT",
|
||||
id: 13,
|
||||
children: [
|
||||
{
|
||||
label: "Mqtt Client",
|
||||
id: 131,
|
||||
},
|
||||
{
|
||||
label: "Alink",
|
||||
id: 132,
|
||||
},
|
||||
{
|
||||
label: "Tlink",
|
||||
id: 133,
|
||||
},
|
||||
{
|
||||
label: "loTDDC",
|
||||
id: 134,
|
||||
},
|
||||
{
|
||||
label: "Ulink",
|
||||
id: 135,
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
dialogVisible: false,
|
||||
newNodeData: {
|
||||
// 新节点的数据，可以根据需求定义
|
||||
// ...
|
||||
},
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
rightClick(e, data, node, comp) {
|
||||
console.log('e:', e, 'data', data)
|
||||
// this.node = node;
|
||||
// console.log(this.node)
|
||||
console.log(data.id);
|
||||
console.log(comp);
|
||||
this.rightMenu = { top: e.pageY + 'px', left: e.pageX + 'px' }
|
||||
this.tmDisplay = true
|
||||
const self = this
|
||||
document.onclick = function (ev) {
|
||||
if (ev.target !== document.getElementById('perTreeMenu')) {
|
||||
self.tmDisplay = false
|
||||
}
|
||||
}
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.tree_menu {
|
||||
position: fixed;
|
||||
display: block;
|
||||
z-index: 20000;
|
||||
background-color: #fff;
|
||||
padding: 5px 0;
|
||||
border: 1px solid #ebeef5;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
|
||||
|
||||
ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
ul li {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0 15px;
|
||||
font-size: 14px;
|
||||
line-height: 30px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
ul li:hover {
|
||||
background-color: #ebeef5
|
||||
}
|
||||
}
|
||||
</style> -->
|
||||
<template>
|
||||
<div>
|
||||
<el-button class="addBtn" type="primary" size="small" @click="openAddTop">添加顶级节点</el-button>
|
||||
<el-input placeholder="输入关键字进行过滤" v-model="filterText">
|
||||
</el-input>
|
||||
<el-tree ref="SlotTree" :data="setTree" :props="defaultProps" :expand-on-click-node="false" highlight-current
|
||||
:node-key="NODE_KEY">
|
||||
<div class="comp-tr-node" slot-scope="{ node, data }">
|
||||
<!-- 编辑状态 -->
|
||||
<template v-if="node.isEdit">
|
||||
<el-input v-model="data.label" autofocus size="mini" :ref="'slotTreeInput' + data[NODE_KEY]"
|
||||
@blur.stop="handleInput(node, data)" @keyup.enter.native="handleInput(node, data)"></el-input>
|
||||
</template>
|
||||
<!-- 非编辑状态 -->
|
||||
<template v-else>
|
||||
<!-- 名称： 新增节点增加class（is-new） -->
|
||||
<span :class="[
|
||||
data[NODE_KEY] < NODE_ID_START ? 'is-new' : '',
|
||||
'comp-tr-node--name',
|
||||
]">
|
||||
{{ node.label }}
|
||||
</span>
|
||||
|
||||
<!-- 按钮 -->
|
||||
<span class="comp-tr-node--btns">
|
||||
<!-- 新增 -->
|
||||
<el-button type="text" size="mini" @click="appendChild(node, data)">新增</el-button>
|
||||
|
||||
<!-- 编辑 -->
|
||||
<el-button size="mini" type="text" @click="handleEdit(node, data)">编辑</el-button>
|
||||
|
||||
<!-- 删除 -->
|
||||
<el-button size="mini" type="text" @click="handleDelete(node, data)">删除</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</div>
|
||||
</el-tree>
|
||||
<el-dialog :close-on-click-modal="false" :visible.sync="addDialogVisible" width="30%" top="5vh" :show-close="true"
|
||||
:before-close="addHandleClose" :title="addDialogTitle == 'edit' ? '编辑名称' : '新增名称'">
|
||||
<el-form :model="addForm" :rules="addRules" label-width="80px" ref="addRef">
|
||||
<el-form-item label="名称" prop="name">
|
||||
<el-input size="medium" v-model="addForm.name" placeholder="名称" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<span class="dialog-footer">
|
||||
<el-button size="small" @click="addHandleClose">取 消</el-button>
|
||||
<el-button size="small" type="primary" @click="addData">确 定</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
addType: 1,
|
||||
addNode: '',
|
||||
startId: null,
|
||||
setTree: [], // tree数据
|
||||
NODE_KEY: "id", // id对应字段
|
||||
MAX_LEVEL: 3, // 设定最大层级
|
||||
NODE_ID_START: 0, // 新增节点id，逐次递减
|
||||
startId: null,
|
||||
setTree: [
|
||||
{
|
||||
label: "Gateway",
|
||||
id: 1,
|
||||
editing: true,
|
||||
children: [
|
||||
{
|
||||
label: "数据采集",
|
||||
id: 11,
|
||||
children: [
|
||||
{
|
||||
label: "I/O点",
|
||||
id: 111,
|
||||
},
|
||||
{
|
||||
label: "用户点",
|
||||
id: 112,
|
||||
},
|
||||
{
|
||||
label: "计算点",
|
||||
id: 113,
|
||||
},
|
||||
{
|
||||
label: "系统点",
|
||||
id: 114,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "数据服务",
|
||||
id: 12,
|
||||
children: [
|
||||
{
|
||||
label: "Modbus",
|
||||
id: 121,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "IOT",
|
||||
id: 13,
|
||||
children: [
|
||||
{
|
||||
label: "Mqtt Client",
|
||||
id: 131,
|
||||
},
|
||||
{
|
||||
label: "Alink",
|
||||
id: 132,
|
||||
},
|
||||
{
|
||||
label: "Tlink",
|
||||
id: 133,
|
||||
},
|
||||
{
|
||||
label: "loTDDC",
|
||||
id: 134,
|
||||
},
|
||||
{
|
||||
label: "Ulink",
|
||||
id: 135,
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
defaultProps: {
|
||||
// 默认设置
|
||||
children: "children",
|
||||
label: "label",
|
||||
},
|
||||
addDataList: "",
|
||||
addForm: {
|
||||
name: "",
|
||||
},
|
||||
addRules: {
|
||||
name: [{ required: true, message: "请输入名称", trigger: "blur" }],
|
||||
},
|
||||
addDialogTitle: "new",
|
||||
addDialogVisible: false,
|
||||
// 之前遗忘了这个参数 重新补发
|
||||
initParam: {
|
||||
// 新增参数
|
||||
name: "",
|
||||
id: 0,
|
||||
children: [],
|
||||
},
|
||||
}
|
||||
},
|
||||
created() {
|
||||
// 初始值
|
||||
this.startId = this.NODE_ID_START;
|
||||
},
|
||||
methods: {
|
||||
handleDelete(_node, _data) {
|
||||
// 删除节点
|
||||
console.log(_node, _data);
|
||||
// 判断是否存在子节点
|
||||
if (_data.children && _data.children.length !== 0) {
|
||||
this.$message.error("此节点有子级，不可删除！");
|
||||
return false;
|
||||
} else {
|
||||
// 删除操作
|
||||
let DeletOprate = () => {
|
||||
this.$nextTick(() => {
|
||||
if (this.$refs.SlotTree) {
|
||||
this.$refs.SlotTree.remove(_data);
|
||||
this.$message.success("删除成功！");
|
||||
}
|
||||
});
|
||||
};
|
||||
// 二次确认
|
||||
let ConfirmFun = () => {
|
||||
this.$confirm("是否删除此节点？", "提示", {
|
||||
confirmButtonText: "确认",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning",
|
||||
})
|
||||
.then(() => {
|
||||
DeletOprate();
|
||||
})
|
||||
.catch(() => { });
|
||||
};
|
||||
// 判断是否新增： 新增节点直接删除，已存在的节点要二次确认
|
||||
_data[this.NODE_KEY] < this.NODE_ID_START
|
||||
? DeletOprate()
|
||||
: ConfirmFun();
|
||||
}
|
||||
},
|
||||
handleInput(_node, _data) {
|
||||
// 修改节点
|
||||
console.log(_node, _data);
|
||||
// 退出编辑状态
|
||||
if (_node.isEdit) {
|
||||
this.$set(_node, "isEdit", false);
|
||||
}
|
||||
},
|
||||
handleEdit(_node, _data) {
|
||||
// 编辑节点
|
||||
console.log(_node, _data);
|
||||
// 设置编辑状态
|
||||
if (!_node.isEdit) {
|
||||
this.$set(_node, "isEdit", true);
|
||||
}
|
||||
// 输入框聚焦
|
||||
this.$nextTick(() => {
|
||||
if (this.$refs["slotTreeInput" + _data[this.NODE_KEY]]) {
|
||||
this.$refs["slotTreeInput" + _data[this.NODE_KEY]].$refs.input.focus();
|
||||
}
|
||||
});
|
||||
},
|
||||
// 新增子级节点打开事件
|
||||
appendChild(node, data) {
|
||||
this.addForm.name = "";
|
||||
this.addDialogVisible = true;
|
||||
this.addDialogTitle = "new";
|
||||
this.addDataList = data;
|
||||
this.addNode = node
|
||||
this.addType = 2;
|
||||
},
|
||||
// 新增子级节点
|
||||
handleAdd(_node, _data, _name) {
|
||||
// 新增节点
|
||||
console.log(_node, _data);
|
||||
// 判断层级
|
||||
if (_node.level >= this.MAX_LEVEL) {
|
||||
this.$message.warning("当前已达到" + this.MAX_LEVEL + "级，无法新增！");
|
||||
return false;
|
||||
}
|
||||
// 参数修改
|
||||
let obj = JSON.parse(JSON.stringify(this.initParam)); // copy参数
|
||||
obj.id = _data[this.NODE_KEY]; // 父id
|
||||
obj[this.NODE_KEY] = ++this.startId; // 节点id：逐次递减id
|
||||
obj.label = _name
|
||||
// 判断字段是否存在
|
||||
if (!_data.children) {
|
||||
this.$set(_data, "children", []);
|
||||
}
|
||||
// 新增数据
|
||||
_data.children.push(obj);
|
||||
// 展开节点
|
||||
if (!_node.expanded) {
|
||||
_node.expanded = true;
|
||||
}
|
||||
},
|
||||
// 新增顶级结点打开事件
|
||||
handleAddTop() {
|
||||
// 添加顶部节点
|
||||
let obj = JSON.parse(JSON.stringify(this.initParam)); // copy参数
|
||||
console.log(obj);
|
||||
obj[this.NODE_KEY] = ++this.startId; // 节点id：逐次递减id
|
||||
obj.label = this.addForm.name;
|
||||
console.log(obj.label)
|
||||
this.setTree.push(obj);
|
||||
},
|
||||
// 新增顶级结点
|
||||
openAddTop() {
|
||||
this.addForm.name = "";
|
||||
this.addDialogVisible = true;
|
||||
this.addDialogTitle = "new";
|
||||
this.addType = 1;
|
||||
},
|
||||
// 点击确定 新增子级菜单
|
||||
addData() {
|
||||
var t = this;
|
||||
this.$refs.addRef.validate(async (valid) => {
|
||||
if (valid) {
|
||||
if (t.addType == 1) {
|
||||
t.handleAddTop();
|
||||
this.addDialogVisible = false;
|
||||
} else if (t.addType == 2) {
|
||||
const obj = JSON.parse(JSON.stringify(t.addForm));
|
||||
// 需要判断新增还是编辑
|
||||
t.handleAdd(t.addNode, t.addDataList, obj.name)
|
||||
this.addDialogVisible = false;
|
||||
}
|
||||
} else {
|
||||
console.log("error submit!!");
|
||||
return false;
|
||||
}
|
||||
});
|
||||
},
|
||||
addHandleClose() {
|
||||
this.addDialogVisible = false;
|
||||
this.$refs.addRef.resetFields();
|
||||
},
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,785 @@
|
|||
<!-- <template>
|
||||
<div>
|
||||
<el-tree :data="data" node-key="id" :props="defaultProps" @node-contextmenu="rightClick" @check="treeCheck">
|
||||
</el-tree>
|
||||
<div id="perTreeMenu" v-if="tmDisplay" class="tree_menu" :style="{ ...rightMenu }">
|
||||
<ul>
|
||||
<li @click="add_passage = true">新增通道</li>
|
||||
<li>取消</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="pas_params">
|
||||
<el-dialog title="通道参数设置" :visible.sync="add_passage" width="765px" v-loading="Loading">
|
||||
<el-form :model="FormData" :label-position="labelPosition" :rules="rules" ref="ruleForm">
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="通道名称:" :label-width="formLabelWidth" prop="tdpz_tdmc">
|
||||
<el-select v-model="FormData.tdpz_tdmc" placeholder="" style="width: 200px; height: 30px">
|
||||
<el-option v-for="(item, index) in options1" :key="index" :label="item.label" :value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="通道:" :label-width="formLabelWidth" prop="tdpz_td">
|
||||
<el-select v-model="FormData.tdpz_td" placeholder="" style="width: 200px; height: 30px">
|
||||
<el-option v-for="(item, index) in options2" :key="index" :label="item.label" :value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="驱动名称:" :label-width="formLabelWidth" prop="tdpz_qdmc">
|
||||
<el-row>
|
||||
<el-col :span="18">
|
||||
<el-input v-model="FormData.tdpz_qdmc" placeholder="" style="width: 200px; height: 30px"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-button style="width: 50px; height: 30px" @click="getDriveName">...</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="IP地址:" :label-width="formLabelWidth" prop="tdpz_ip">
|
||||
<el-row>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="tdpz_ip1" style="width: 43px; height: 30px"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1" style="color: #fff">. </el-col>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="tdpz_ip2" style="width: 43px; height: 30px"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1" style="color: #fff">.</el-col>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="tdpz_ip3" style="width: 43px; height: 30px"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1" style="color: #fff">.</el-col>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="tdpz_ip4" style="width: 43px; height: 30px"></el-input>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="端口号:" :label-width="formLabelWidth" prop="tdpz_port">
|
||||
<el-input v-model="FormData.tdpz_port" placeholder="" style="width: 200px; height: 30px"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="超过时间(ms):" :label-width="formLabelWidth" prop="tdpz_cssj">
|
||||
<el-input v-model="FormData.tdpz_cssj" placeholder="" style="width: 200px; height: 30px"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="间隔时间(ms):" :label-width="formLabelWidth" prop="tdpz_jgsj">
|
||||
<el-input v-model="FormData.tdpz_jgsj" placeholder="" style="width: 200px; height: 30px"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="轮询时间(ms):" :label-width="formLabelWidth" prop="tdpz_lxsj">
|
||||
<el-input v-model="FormData.tdpz_lxsj" placeholder="" style="width: 200px; height: 30px"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="重复次数:" :label-width="formLabelWidth" prop="tdpz_cfcs">
|
||||
<el-input v-model="FormData.tdpz_cfcs" placeholder="" style="width: 200px; height: 30px"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<div class="super_parmams">
|
||||
<h3>高级参数</h3>
|
||||
<div>
|
||||
<i class="el-icon-caret-bottom" v-if="is_retract"></i>
|
||||
<i class="el-icon-caret-top" v-else="is_retract"></i>
|
||||
<el-button type="text" plain @click="getRetract" style="
|
||||
width: 28px;
|
||||
border: none;
|
||||
color: rgba(16, 16, 16, 1);
|
||||
font-size: 14px;
|
||||
text-align: left;
|
||||
">
|
||||
收起</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="super_con" v-show="is_retract">
|
||||
<el-form :label-position="labelPosition" :rules="rules" ref="ruleForm">
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item>
|
||||
<el-checkbox v-model="FormData.tdpz_watchtime">watch time(s)</el-checkbox>
|
||||
<el-input v-model="input1" placeholder="" style="width: 200px; height: 30px"
|
||||
:disabled="isdisabled"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item>
|
||||
<el-checkbox v-model="FormData.tdpz_cjsylxdz">采集使用连续地址</el-checkbox>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="读写占空比:" :label-width="formLabelWidth">
|
||||
<el-row>
|
||||
<el-col :span="10">
|
||||
<el-input v-model="tdpz_dxzkb1" style="width: 91px; height: 30px"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="4">: </el-col>
|
||||
<el-col :span="10">
|
||||
<el-input v-model="tdpz_dxzkb2" style="width: 91px; height: 30px"></el-input>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="05/0F:" :label-width="formLabelWidth">
|
||||
<el-row>
|
||||
<el-col :span="8"><el-radio v-model="FormData.tdpz_050F" label="auto">auto</el-radio></el-col>
|
||||
<el-col :span="8"><el-radio v-model="FormData.tdpz_050F" label="05">05</el-radio></el-col>
|
||||
<el-col :span="8"><el-radio v-model="FormData.tdpz_050F" label="0F">0F</el-radio></el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="06/10:" :label-width="formLabelWidth">
|
||||
<el-row>
|
||||
<el-col :span="8"><el-radio v-model="FormData.tdpz_0610" label="auto">auto</el-radio></el-col>
|
||||
<el-col :span="8"><el-radio v-model="FormData.tdpz_0610" label="06">06</el-radio></el-col>
|
||||
<el-col :span="8"><el-radio v-model="FormData.tdpz_0610" label="10">10</el-radio></el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</div>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="saveGate">保 存</el-button>
|
||||
<el-button @click="add_passage = false">取 消</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
flag: false,
|
||||
gateway: JSON.parse(localStorage.getItem("tree"))[0].label,
|
||||
FormData: {
|
||||
tdpz_tdmc: "有线区Channel1",
|
||||
tdpz_td: "网口",
|
||||
tdpz_qdmc: "ModbusTCPClient",
|
||||
tdpz_port: "",
|
||||
tdpz_cssj: "",
|
||||
tdpz_jgsj: "",
|
||||
tdpz_lxsj: "",
|
||||
tdpz_cfcs: "",
|
||||
tdpz_watchtime: true,
|
||||
tdpz_cjsylxdz: false,
|
||||
tdpz_dxzkb: "",
|
||||
tdpz_050F: "auto",
|
||||
tdpz_0610: "auto",
|
||||
},
|
||||
tdpz_dxzkb1: "1",
|
||||
tdpz_dxzkb2: "1",
|
||||
tdpz_ip1: "",
|
||||
tdpz_ip2: "",
|
||||
tdpz_ip3: "",
|
||||
tdpz_ip4: "",
|
||||
options1: [
|
||||
{
|
||||
value: "有线区Channel1",
|
||||
label: "有线区Channel1",
|
||||
},
|
||||
{
|
||||
value: "无线区Channel1",
|
||||
label: "无线区Channel1",
|
||||
},
|
||||
],
|
||||
options2: [
|
||||
{
|
||||
value: "网口",
|
||||
label: "网口",
|
||||
},
|
||||
{
|
||||
value: "串口",
|
||||
label: "串口",
|
||||
},
|
||||
],
|
||||
value1: "有线区Channel1",
|
||||
value2: "网口",
|
||||
diag_drive: false,
|
||||
isdisabled: true,
|
||||
radio: "1",
|
||||
is_retract: true,
|
||||
labelPosition: "left",
|
||||
formLabelWidth: "116px",
|
||||
input1: 192,
|
||||
add_passage: false,
|
||||
rightMenu: "",
|
||||
dialogVisible: true,
|
||||
menuShow: false,
|
||||
datas: [],
|
||||
datas2: [
|
||||
{
|
||||
label: "通用标准",
|
||||
children: [
|
||||
{
|
||||
label: "ModbusTCPClient",
|
||||
},
|
||||
{
|
||||
label: "ModbusRTU_over_TCP",
|
||||
},
|
||||
{
|
||||
label: "OPCUAClient",
|
||||
},
|
||||
{
|
||||
label: "OPCDAClient",
|
||||
},
|
||||
{
|
||||
label: "MQTTClient",
|
||||
},
|
||||
{
|
||||
label: "OPCXMLDAClient",
|
||||
},
|
||||
{
|
||||
label: "环保212协议网口监听",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "PLC",
|
||||
children: [
|
||||
{
|
||||
label: "Slemens S7-200 Network",
|
||||
},
|
||||
{
|
||||
label: "Slemens S7-300 Network",
|
||||
},
|
||||
{
|
||||
label: "Slemens S7-400 Network",
|
||||
},
|
||||
{
|
||||
label: "Slemens S7-1200 Network",
|
||||
},
|
||||
{
|
||||
label: "Slemens S7-1500 Network",
|
||||
},
|
||||
{
|
||||
label: "EtherNet/IP CIP协议(AB OMR ON)",
|
||||
},
|
||||
{
|
||||
label: "MC_Qna-3E(三菱 基恩士 松下)",
|
||||
},
|
||||
{
|
||||
label: "MC_A-1E_Binary",
|
||||
},
|
||||
{
|
||||
label: "OMRON-FINS",
|
||||
},
|
||||
{
|
||||
label: "横河PLC",
|
||||
},
|
||||
{
|
||||
label: "西门子FetchWirte",
|
||||
},
|
||||
{
|
||||
label: "富机 FUJI_SPH_NET",
|
||||
},
|
||||
{
|
||||
label: "基恩士上位链路通讯",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "智能建筑",
|
||||
children: [],
|
||||
},
|
||||
{
|
||||
label: "厂家定制",
|
||||
children: [],
|
||||
},
|
||||
{
|
||||
label: "电力行业标准",
|
||||
children: [
|
||||
{
|
||||
label: "IEC104",
|
||||
},
|
||||
{
|
||||
label: "DLT645_over_TCP",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "CNC数控",
|
||||
children: [],
|
||||
},
|
||||
{
|
||||
label: "私有协议",
|
||||
children: [],
|
||||
},
|
||||
],
|
||||
defaultProps: {
|
||||
children: "children",
|
||||
label: "label",
|
||||
},
|
||||
rules: {
|
||||
tdpz_tdmc: [
|
||||
{ required: true, message: "请输入通道名称", trigger: "change" },
|
||||
],
|
||||
tdpz_td: [{ required: true, message: "请输入通道", trigger: "change" }],
|
||||
tdpz_qdmc: [
|
||||
{ required: true, message: "请输入驱动名称", trigger: "change" },
|
||||
],
|
||||
tdpz_ip: [{ required: true, message: "请输入ip地址", trigger: "blur" }],
|
||||
tdpz_port: [
|
||||
{ required: true, message: "请输入端口号", trigger: "blur" },
|
||||
],
|
||||
tdpz_cssj: [
|
||||
{ required: true, message: "请输入超出时间", trigger: "blur" },
|
||||
],
|
||||
tdpz_jgsj: [
|
||||
{ required: true, message: "请输入间隔时间", trigger: "blur" },
|
||||
],
|
||||
tdpz_lxsj: [
|
||||
{ required: true, message: "请输入轮询时间", trigger: "blur" },
|
||||
],
|
||||
tdpz_cfcs: [
|
||||
{ required: true, message: "请输入重复次数", trigger: "blur" },
|
||||
],
|
||||
},
|
||||
tmDisplay: false,
|
||||
rightMenu: {},
|
||||
node: "",
|
||||
data: [
|
||||
{
|
||||
label: "Gateway",
|
||||
id: 1,
|
||||
editing: true,
|
||||
children: [
|
||||
{
|
||||
label: "数据采集",
|
||||
id: 11,
|
||||
children: [
|
||||
{
|
||||
label: "I/O点",
|
||||
id: 111,
|
||||
},
|
||||
{
|
||||
label: "用户点",
|
||||
id: 112,
|
||||
},
|
||||
{
|
||||
label: "计算点",
|
||||
id: 113,
|
||||
},
|
||||
{
|
||||
label: "系统点",
|
||||
id: 114,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "数据服务",
|
||||
id: 12,
|
||||
children: [
|
||||
{
|
||||
label: "Modbus",
|
||||
id: 121,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "IOT",
|
||||
id: 13,
|
||||
children: [
|
||||
{
|
||||
label: "Mqtt Client",
|
||||
id: 131,
|
||||
},
|
||||
{
|
||||
label: "Alink",
|
||||
id: 132,
|
||||
},
|
||||
{
|
||||
label: "Tlink",
|
||||
id: 133,
|
||||
},
|
||||
{
|
||||
label: "loTDDC",
|
||||
id: 134,
|
||||
},
|
||||
{
|
||||
label: "Ulink",
|
||||
id: 135,
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
dialogVisible: false,
|
||||
newNodeData: {
|
||||
// 新节点的数据，可以根据需求定义
|
||||
// ...
|
||||
},
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
rightClick(e, data, node, comp) {
|
||||
console.log('e:', e, 'data', data)
|
||||
// this.node = node;
|
||||
// console.log(this.node)
|
||||
console.log(data.id);
|
||||
console.log(comp);
|
||||
this.rightMenu = { top: e.pageY + 'px', left: e.pageX + 'px' }
|
||||
this.tmDisplay = true
|
||||
const self = this
|
||||
document.onclick = function (ev) {
|
||||
if (ev.target !== document.getElementById('perTreeMenu')) {
|
||||
self.tmDisplay = false
|
||||
}
|
||||
}
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.tree_menu {
|
||||
position: fixed;
|
||||
display: block;
|
||||
z-index: 20000;
|
||||
background-color: #fff;
|
||||
padding: 5px 0;
|
||||
border: 1px solid #ebeef5;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
|
||||
|
||||
ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
ul li {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0 15px;
|
||||
font-size: 14px;
|
||||
line-height: 30px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
ul li:hover {
|
||||
background-color: #ebeef5
|
||||
}
|
||||
}
|
||||
</style> -->
|
||||
<template>
|
||||
<div>
|
||||
<el-button class="addBtn" type="primary" size="small" @click="openAddTop">添加顶级节点</el-button>
|
||||
<el-input placeholder="输入关键字进行过滤" v-model="filterText">
|
||||
</el-input>
|
||||
<el-tree ref="SlotTree" :data="setTree" :props="defaultProps" :expand-on-click-node="false" highlight-current
|
||||
:node-key="NODE_KEY">
|
||||
<div class="comp-tr-node" slot-scope="{ node, data }">
|
||||
<!-- 编辑状态 -->
|
||||
<template v-if="node.isEdit">
|
||||
<el-input v-model="data.label" autofocus size="mini" :ref="'slotTreeInput' + data[NODE_KEY]"
|
||||
@blur.stop="handleInput(node, data)" @keyup.enter.native="handleInput(node, data)"></el-input>
|
||||
</template>
|
||||
<!-- 非编辑状态 -->
|
||||
<template v-else>
|
||||
<!-- 名称： 新增节点增加class（is-new） -->
|
||||
<span :class="[
|
||||
data[NODE_KEY] < NODE_ID_START ? 'is-new' : '',
|
||||
'comp-tr-node--name',
|
||||
]">
|
||||
{{ node.label }}
|
||||
</span>
|
||||
|
||||
<!-- 按钮 -->
|
||||
<span class="comp-tr-node--btns">
|
||||
<!-- 新增 -->
|
||||
<el-button type="text" size="mini" @click="appendChild(node, data)">新增</el-button>
|
||||
|
||||
<!-- 编辑 -->
|
||||
<el-button size="mini" type="text" @click="handleEdit(node, data)">编辑</el-button>
|
||||
|
||||
<!-- 删除 -->
|
||||
<el-button size="mini" type="text" @click="handleDelete(node, data)">删除</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</div>
|
||||
</el-tree>
|
||||
<el-dialog :close-on-click-modal="false" :visible.sync="addDialogVisible" width="30%" top="5vh" :show-close="true"
|
||||
:before-close="addHandleClose" :title="addDialogTitle == 'edit' ? '编辑名称' : '新增名称'">
|
||||
<el-form :model="addForm" :rules="addRules" label-width="80px" ref="addRef">
|
||||
<el-form-item label="名称" prop="name">
|
||||
<el-input size="medium" v-model="addForm.name" placeholder="名称" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<span class="dialog-footer">
|
||||
<el-button size="small" @click="addHandleClose">取 消</el-button>
|
||||
<el-button size="small" type="primary" @click="addData">确 定</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
addType: 1,
|
||||
addNode: '',
|
||||
startId: null,
|
||||
setTree: [], // tree数据
|
||||
NODE_KEY: "id", // id对应字段
|
||||
MAX_LEVEL: 3, // 设定最大层级
|
||||
NODE_ID_START: 0, // 新增节点id，逐次递减
|
||||
startId: null,
|
||||
setTree: [
|
||||
{
|
||||
label: "Gateway",
|
||||
id: 1,
|
||||
editing: true,
|
||||
children: [
|
||||
{
|
||||
label: "数据采集",
|
||||
id: 11,
|
||||
children: [
|
||||
{
|
||||
label: "I/O点",
|
||||
id: 111,
|
||||
},
|
||||
{
|
||||
label: "用户点",
|
||||
id: 112,
|
||||
},
|
||||
{
|
||||
label: "计算点",
|
||||
id: 113,
|
||||
},
|
||||
{
|
||||
label: "系统点",
|
||||
id: 114,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "数据服务",
|
||||
id: 12,
|
||||
children: [
|
||||
{
|
||||
label: "Modbus",
|
||||
id: 121,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "IOT",
|
||||
id: 13,
|
||||
children: [
|
||||
{
|
||||
label: "Mqtt Client",
|
||||
id: 131,
|
||||
},
|
||||
{
|
||||
label: "Alink",
|
||||
id: 132,
|
||||
},
|
||||
{
|
||||
label: "Tlink",
|
||||
id: 133,
|
||||
},
|
||||
{
|
||||
label: "loTDDC",
|
||||
id: 134,
|
||||
},
|
||||
{
|
||||
label: "Ulink",
|
||||
id: 135,
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
defaultProps: {
|
||||
// 默认设置
|
||||
children: "children",
|
||||
label: "label",
|
||||
},
|
||||
addDataList: "",
|
||||
addForm: {
|
||||
name: "",
|
||||
},
|
||||
addRules: {
|
||||
name: [{ required: true, message: "请输入名称", trigger: "blur" }],
|
||||
},
|
||||
addDialogTitle: "new",
|
||||
addDialogVisible: false,
|
||||
// 之前遗忘了这个参数 重新补发
|
||||
initParam: {
|
||||
// 新增参数
|
||||
name: "",
|
||||
id: 0,
|
||||
children: [],
|
||||
},
|
||||
}
|
||||
},
|
||||
created() {
|
||||
// 初始值
|
||||
this.startId = this.NODE_ID_START;
|
||||
},
|
||||
methods: {
|
||||
handleDelete(_node, _data) {
|
||||
// 删除节点
|
||||
console.log(_node, _data);
|
||||
// 判断是否存在子节点
|
||||
if (_data.children && _data.children.length !== 0) {
|
||||
this.$message.error("此节点有子级，不可删除！");
|
||||
return false;
|
||||
} else {
|
||||
// 删除操作
|
||||
let DeletOprate = () => {
|
||||
this.$nextTick(() => {
|
||||
if (this.$refs.SlotTree) {
|
||||
this.$refs.SlotTree.remove(_data);
|
||||
this.$message.success("删除成功！");
|
||||
}
|
||||
});
|
||||
};
|
||||
// 二次确认
|
||||
let ConfirmFun = () => {
|
||||
this.$confirm("是否删除此节点？", "提示", {
|
||||
confirmButtonText: "确认",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning",
|
||||
})
|
||||
.then(() => {
|
||||
DeletOprate();
|
||||
})
|
||||
.catch(() => { });
|
||||
};
|
||||
// 判断是否新增： 新增节点直接删除，已存在的节点要二次确认
|
||||
_data[this.NODE_KEY] < this.NODE_ID_START
|
||||
? DeletOprate()
|
||||
: ConfirmFun();
|
||||
}
|
||||
},
|
||||
handleInput(_node, _data) {
|
||||
// 修改节点
|
||||
console.log(_node, _data);
|
||||
// 退出编辑状态
|
||||
if (_node.isEdit) {
|
||||
this.$set(_node, "isEdit", false);
|
||||
}
|
||||
},
|
||||
handleEdit(_node, _data) {
|
||||
// 编辑节点
|
||||
console.log(_node, _data);
|
||||
// 设置编辑状态
|
||||
if (!_node.isEdit) {
|
||||
this.$set(_node, "isEdit", true);
|
||||
}
|
||||
// 输入框聚焦
|
||||
this.$nextTick(() => {
|
||||
if (this.$refs["slotTreeInput" + _data[this.NODE_KEY]]) {
|
||||
this.$refs["slotTreeInput" + _data[this.NODE_KEY]].$refs.input.focus();
|
||||
}
|
||||
});
|
||||
},
|
||||
// 新增子级节点打开事件
|
||||
appendChild(node, data) {
|
||||
this.addForm.name = "";
|
||||
this.addDialogVisible = true;
|
||||
this.addDialogTitle = "new";
|
||||
this.addDataList = data;
|
||||
this.addNode = node
|
||||
this.addType = 2;
|
||||
},
|
||||
// 新增子级节点
|
||||
handleAdd(_node, _data, _name) {
|
||||
// 新增节点
|
||||
console.log(_node, _data);
|
||||
// 判断层级
|
||||
if (_node.level >= this.MAX_LEVEL) {
|
||||
this.$message.warning("当前已达到" + this.MAX_LEVEL + "级，无法新增！");
|
||||
return false;
|
||||
}
|
||||
// 参数修改
|
||||
let obj = JSON.parse(JSON.stringify(this.initParam)); // copy参数
|
||||
obj.id = _data[this.NODE_KEY]; // 父id
|
||||
obj[this.NODE_KEY] = ++this.startId; // 节点id：逐次递减id
|
||||
obj.label = _name
|
||||
// 判断字段是否存在
|
||||
if (!_data.children) {
|
||||
this.$set(_data, "children", []);
|
||||
}
|
||||
// 新增数据
|
||||
_data.children.push(obj);
|
||||
// 展开节点
|
||||
if (!_node.expanded) {
|
||||
_node.expanded = true;
|
||||
}
|
||||
},
|
||||
// 新增顶级结点打开事件
|
||||
handleAddTop() {
|
||||
// 添加顶部节点
|
||||
let obj = JSON.parse(JSON.stringify(this.initParam)); // copy参数
|
||||
console.log(obj);
|
||||
obj[this.NODE_KEY] = ++this.startId; // 节点id：逐次递减id
|
||||
obj.label = this.addForm.name;
|
||||
console.log(obj.label)
|
||||
this.setTree.push(obj);
|
||||
},
|
||||
// 新增顶级结点
|
||||
openAddTop() {
|
||||
this.addForm.name = "";
|
||||
this.addDialogVisible = true;
|
||||
this.addDialogTitle = "new";
|
||||
this.addType = 1;
|
||||
},
|
||||
// 点击确定 新增子级菜单
|
||||
addData() {
|
||||
var t = this;
|
||||
this.$refs.addRef.validate(async (valid) => {
|
||||
if (valid) {
|
||||
if (t.addType == 1) {
|
||||
t.handleAddTop();
|
||||
this.addDialogVisible = false;
|
||||
} else if (t.addType == 2) {
|
||||
const obj = JSON.parse(JSON.stringify(t.addForm));
|
||||
// 需要判断新增还是编辑
|
||||
t.handleAdd(t.addNode, t.addDataList, obj.name)
|
||||
this.addDialogVisible = false;
|
||||
}
|
||||
} else {
|
||||
console.log("error submit!!");
|
||||
return false;
|
||||
}
|
||||
});
|
||||
},
|
||||
addHandleClose() {
|
||||
this.addDialogVisible = false;
|
||||
this.$refs.addRef.resetFields();
|
||||
},
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,785 @@
|
|||
<!-- <template>
|
||||
<div>
|
||||
<el-tree :data="data" node-key="id" :props="defaultProps" @node-contextmenu="rightClick" @check="treeCheck">
|
||||
</el-tree>
|
||||
<div id="perTreeMenu" v-if="tmDisplay" class="tree_menu" :style="{ ...rightMenu }">
|
||||
<ul>
|
||||
<li @click="add_passage = true">新增通道</li>
|
||||
<li>取消</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="pas_params">
|
||||
<el-dialog title="通道参数设置" :visible.sync="add_passage" width="765px" v-loading="Loading">
|
||||
<el-form :model="FormData" :label-position="labelPosition" :rules="rules" ref="ruleForm">
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="通道名称:" :label-width="formLabelWidth" prop="tdpz_tdmc">
|
||||
<el-select v-model="FormData.tdpz_tdmc" placeholder="" style="width: 200px; height: 30px">
|
||||
<el-option v-for="(item, index) in options1" :key="index" :label="item.label" :value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="通道:" :label-width="formLabelWidth" prop="tdpz_td">
|
||||
<el-select v-model="FormData.tdpz_td" placeholder="" style="width: 200px; height: 30px">
|
||||
<el-option v-for="(item, index) in options2" :key="index" :label="item.label" :value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="驱动名称:" :label-width="formLabelWidth" prop="tdpz_qdmc">
|
||||
<el-row>
|
||||
<el-col :span="18">
|
||||
<el-input v-model="FormData.tdpz_qdmc" placeholder="" style="width: 200px; height: 30px"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-button style="width: 50px; height: 30px" @click="getDriveName">...</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="IP地址:" :label-width="formLabelWidth" prop="tdpz_ip">
|
||||
<el-row>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="tdpz_ip1" style="width: 43px; height: 30px"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1" style="color: #fff">. </el-col>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="tdpz_ip2" style="width: 43px; height: 30px"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1" style="color: #fff">.</el-col>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="tdpz_ip3" style="width: 43px; height: 30px"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1" style="color: #fff">.</el-col>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="tdpz_ip4" style="width: 43px; height: 30px"></el-input>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="端口号:" :label-width="formLabelWidth" prop="tdpz_port">
|
||||
<el-input v-model="FormData.tdpz_port" placeholder="" style="width: 200px; height: 30px"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="超过时间(ms):" :label-width="formLabelWidth" prop="tdpz_cssj">
|
||||
<el-input v-model="FormData.tdpz_cssj" placeholder="" style="width: 200px; height: 30px"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="间隔时间(ms):" :label-width="formLabelWidth" prop="tdpz_jgsj">
|
||||
<el-input v-model="FormData.tdpz_jgsj" placeholder="" style="width: 200px; height: 30px"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="轮询时间(ms):" :label-width="formLabelWidth" prop="tdpz_lxsj">
|
||||
<el-input v-model="FormData.tdpz_lxsj" placeholder="" style="width: 200px; height: 30px"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="重复次数:" :label-width="formLabelWidth" prop="tdpz_cfcs">
|
||||
<el-input v-model="FormData.tdpz_cfcs" placeholder="" style="width: 200px; height: 30px"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<div class="super_parmams">
|
||||
<h3>高级参数</h3>
|
||||
<div>
|
||||
<i class="el-icon-caret-bottom" v-if="is_retract"></i>
|
||||
<i class="el-icon-caret-top" v-else="is_retract"></i>
|
||||
<el-button type="text" plain @click="getRetract" style="
|
||||
width: 28px;
|
||||
border: none;
|
||||
color: rgba(16, 16, 16, 1);
|
||||
font-size: 14px;
|
||||
text-align: left;
|
||||
">
|
||||
收起</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="super_con" v-show="is_retract">
|
||||
<el-form :label-position="labelPosition" :rules="rules" ref="ruleForm">
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item>
|
||||
<el-checkbox v-model="FormData.tdpz_watchtime">watch time(s)</el-checkbox>
|
||||
<el-input v-model="input1" placeholder="" style="width: 200px; height: 30px"
|
||||
:disabled="isdisabled"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item>
|
||||
<el-checkbox v-model="FormData.tdpz_cjsylxdz">采集使用连续地址</el-checkbox>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="读写占空比:" :label-width="formLabelWidth">
|
||||
<el-row>
|
||||
<el-col :span="10">
|
||||
<el-input v-model="tdpz_dxzkb1" style="width: 91px; height: 30px"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="4">: </el-col>
|
||||
<el-col :span="10">
|
||||
<el-input v-model="tdpz_dxzkb2" style="width: 91px; height: 30px"></el-input>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="05/0F:" :label-width="formLabelWidth">
|
||||
<el-row>
|
||||
<el-col :span="8"><el-radio v-model="FormData.tdpz_050F" label="auto">auto</el-radio></el-col>
|
||||
<el-col :span="8"><el-radio v-model="FormData.tdpz_050F" label="05">05</el-radio></el-col>
|
||||
<el-col :span="8"><el-radio v-model="FormData.tdpz_050F" label="0F">0F</el-radio></el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="06/10:" :label-width="formLabelWidth">
|
||||
<el-row>
|
||||
<el-col :span="8"><el-radio v-model="FormData.tdpz_0610" label="auto">auto</el-radio></el-col>
|
||||
<el-col :span="8"><el-radio v-model="FormData.tdpz_0610" label="06">06</el-radio></el-col>
|
||||
<el-col :span="8"><el-radio v-model="FormData.tdpz_0610" label="10">10</el-radio></el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</div>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="saveGate">保 存</el-button>
|
||||
<el-button @click="add_passage = false">取 消</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
flag: false,
|
||||
gateway: JSON.parse(localStorage.getItem("tree"))[0].label,
|
||||
FormData: {
|
||||
tdpz_tdmc: "有线区Channel1",
|
||||
tdpz_td: "网口",
|
||||
tdpz_qdmc: "ModbusTCPClient",
|
||||
tdpz_port: "",
|
||||
tdpz_cssj: "",
|
||||
tdpz_jgsj: "",
|
||||
tdpz_lxsj: "",
|
||||
tdpz_cfcs: "",
|
||||
tdpz_watchtime: true,
|
||||
tdpz_cjsylxdz: false,
|
||||
tdpz_dxzkb: "",
|
||||
tdpz_050F: "auto",
|
||||
tdpz_0610: "auto",
|
||||
},
|
||||
tdpz_dxzkb1: "1",
|
||||
tdpz_dxzkb2: "1",
|
||||
tdpz_ip1: "",
|
||||
tdpz_ip2: "",
|
||||
tdpz_ip3: "",
|
||||
tdpz_ip4: "",
|
||||
options1: [
|
||||
{
|
||||
value: "有线区Channel1",
|
||||
label: "有线区Channel1",
|
||||
},
|
||||
{
|
||||
value: "无线区Channel1",
|
||||
label: "无线区Channel1",
|
||||
},
|
||||
],
|
||||
options2: [
|
||||
{
|
||||
value: "网口",
|
||||
label: "网口",
|
||||
},
|
||||
{
|
||||
value: "串口",
|
||||
label: "串口",
|
||||
},
|
||||
],
|
||||
value1: "有线区Channel1",
|
||||
value2: "网口",
|
||||
diag_drive: false,
|
||||
isdisabled: true,
|
||||
radio: "1",
|
||||
is_retract: true,
|
||||
labelPosition: "left",
|
||||
formLabelWidth: "116px",
|
||||
input1: 192,
|
||||
add_passage: false,
|
||||
rightMenu: "",
|
||||
dialogVisible: true,
|
||||
menuShow: false,
|
||||
datas: [],
|
||||
datas2: [
|
||||
{
|
||||
label: "通用标准",
|
||||
children: [
|
||||
{
|
||||
label: "ModbusTCPClient",
|
||||
},
|
||||
{
|
||||
label: "ModbusRTU_over_TCP",
|
||||
},
|
||||
{
|
||||
label: "OPCUAClient",
|
||||
},
|
||||
{
|
||||
label: "OPCDAClient",
|
||||
},
|
||||
{
|
||||
label: "MQTTClient",
|
||||
},
|
||||
{
|
||||
label: "OPCXMLDAClient",
|
||||
},
|
||||
{
|
||||
label: "环保212协议网口监听",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "PLC",
|
||||
children: [
|
||||
{
|
||||
label: "Slemens S7-200 Network",
|
||||
},
|
||||
{
|
||||
label: "Slemens S7-300 Network",
|
||||
},
|
||||
{
|
||||
label: "Slemens S7-400 Network",
|
||||
},
|
||||
{
|
||||
label: "Slemens S7-1200 Network",
|
||||
},
|
||||
{
|
||||
label: "Slemens S7-1500 Network",
|
||||
},
|
||||
{
|
||||
label: "EtherNet/IP CIP协议(AB OMR ON)",
|
||||
},
|
||||
{
|
||||
label: "MC_Qna-3E(三菱 基恩士 松下)",
|
||||
},
|
||||
{
|
||||
label: "MC_A-1E_Binary",
|
||||
},
|
||||
{
|
||||
label: "OMRON-FINS",
|
||||
},
|
||||
{
|
||||
label: "横河PLC",
|
||||
},
|
||||
{
|
||||
label: "西门子FetchWirte",
|
||||
},
|
||||
{
|
||||
label: "富机 FUJI_SPH_NET",
|
||||
},
|
||||
{
|
||||
label: "基恩士上位链路通讯",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "智能建筑",
|
||||
children: [],
|
||||
},
|
||||
{
|
||||
label: "厂家定制",
|
||||
children: [],
|
||||
},
|
||||
{
|
||||
label: "电力行业标准",
|
||||
children: [
|
||||
{
|
||||
label: "IEC104",
|
||||
},
|
||||
{
|
||||
label: "DLT645_over_TCP",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "CNC数控",
|
||||
children: [],
|
||||
},
|
||||
{
|
||||
label: "私有协议",
|
||||
children: [],
|
||||
},
|
||||
],
|
||||
defaultProps: {
|
||||
children: "children",
|
||||
label: "label",
|
||||
},
|
||||
rules: {
|
||||
tdpz_tdmc: [
|
||||
{ required: true, message: "请输入通道名称", trigger: "change" },
|
||||
],
|
||||
tdpz_td: [{ required: true, message: "请输入通道", trigger: "change" }],
|
||||
tdpz_qdmc: [
|
||||
{ required: true, message: "请输入驱动名称", trigger: "change" },
|
||||
],
|
||||
tdpz_ip: [{ required: true, message: "请输入ip地址", trigger: "blur" }],
|
||||
tdpz_port: [
|
||||
{ required: true, message: "请输入端口号", trigger: "blur" },
|
||||
],
|
||||
tdpz_cssj: [
|
||||
{ required: true, message: "请输入超出时间", trigger: "blur" },
|
||||
],
|
||||
tdpz_jgsj: [
|
||||
{ required: true, message: "请输入间隔时间", trigger: "blur" },
|
||||
],
|
||||
tdpz_lxsj: [
|
||||
{ required: true, message: "请输入轮询时间", trigger: "blur" },
|
||||
],
|
||||
tdpz_cfcs: [
|
||||
{ required: true, message: "请输入重复次数", trigger: "blur" },
|
||||
],
|
||||
},
|
||||
tmDisplay: false,
|
||||
rightMenu: {},
|
||||
node: "",
|
||||
data: [
|
||||
{
|
||||
label: "Gateway",
|
||||
id: 1,
|
||||
editing: true,
|
||||
children: [
|
||||
{
|
||||
label: "数据采集",
|
||||
id: 11,
|
||||
children: [
|
||||
{
|
||||
label: "I/O点",
|
||||
id: 111,
|
||||
},
|
||||
{
|
||||
label: "用户点",
|
||||
id: 112,
|
||||
},
|
||||
{
|
||||
label: "计算点",
|
||||
id: 113,
|
||||
},
|
||||
{
|
||||
label: "系统点",
|
||||
id: 114,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "数据服务",
|
||||
id: 12,
|
||||
children: [
|
||||
{
|
||||
label: "Modbus",
|
||||
id: 121,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "IOT",
|
||||
id: 13,
|
||||
children: [
|
||||
{
|
||||
label: "Mqtt Client",
|
||||
id: 131,
|
||||
},
|
||||
{
|
||||
label: "Alink",
|
||||
id: 132,
|
||||
},
|
||||
{
|
||||
label: "Tlink",
|
||||
id: 133,
|
||||
},
|
||||
{
|
||||
label: "loTDDC",
|
||||
id: 134,
|
||||
},
|
||||
{
|
||||
label: "Ulink",
|
||||
id: 135,
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
dialogVisible: false,
|
||||
newNodeData: {
|
||||
// 新节点的数据，可以根据需求定义
|
||||
// ...
|
||||
},
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
rightClick(e, data, node, comp) {
|
||||
console.log('e:', e, 'data', data)
|
||||
// this.node = node;
|
||||
// console.log(this.node)
|
||||
console.log(data.id);
|
||||
console.log(comp);
|
||||
this.rightMenu = { top: e.pageY + 'px', left: e.pageX + 'px' }
|
||||
this.tmDisplay = true
|
||||
const self = this
|
||||
document.onclick = function (ev) {
|
||||
if (ev.target !== document.getElementById('perTreeMenu')) {
|
||||
self.tmDisplay = false
|
||||
}
|
||||
}
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.tree_menu {
|
||||
position: fixed;
|
||||
display: block;
|
||||
z-index: 20000;
|
||||
background-color: #fff;
|
||||
padding: 5px 0;
|
||||
border: 1px solid #ebeef5;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
|
||||
|
||||
ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
ul li {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0 15px;
|
||||
font-size: 14px;
|
||||
line-height: 30px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
ul li:hover {
|
||||
background-color: #ebeef5
|
||||
}
|
||||
}
|
||||
</style> -->
|
||||
<template>
|
||||
<div>
|
||||
<el-button class="addBtn" type="primary" size="small" @click="openAddTop">添加顶级节点</el-button>
|
||||
<el-input placeholder="输入关键字进行过滤" v-model="filterText">
|
||||
</el-input>
|
||||
<el-tree ref="SlotTree" :data="setTree" :props="defaultProps" :expand-on-click-node="false" highlight-current
|
||||
:node-key="NODE_KEY">
|
||||
<div class="comp-tr-node" slot-scope="{ node, data }">
|
||||
<!-- 编辑状态 -->
|
||||
<template v-if="node.isEdit">
|
||||
<el-input v-model="data.label" autofocus size="mini" :ref="'slotTreeInput' + data[NODE_KEY]"
|
||||
@blur.stop="handleInput(node, data)" @keyup.enter.native="handleInput(node, data)"></el-input>
|
||||
</template>
|
||||
<!-- 非编辑状态 -->
|
||||
<template v-else>
|
||||
<!-- 名称： 新增节点增加class（is-new） -->
|
||||
<span :class="[
|
||||
data[NODE_KEY] < NODE_ID_START ? 'is-new' : '',
|
||||
'comp-tr-node--name',
|
||||
]">
|
||||
{{ node.label }}
|
||||
</span>
|
||||
|
||||
<!-- 按钮 -->
|
||||
<span class="comp-tr-node--btns">
|
||||
<!-- 新增 -->
|
||||
<el-button type="text" size="mini" @click="appendChild(node, data)">新增</el-button>
|
||||
|
||||
<!-- 编辑 -->
|
||||
<el-button size="mini" type="text" @click="handleEdit(node, data)">编辑</el-button>
|
||||
|
||||
<!-- 删除 -->
|
||||
<el-button size="mini" type="text" @click="handleDelete(node, data)">删除</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</div>
|
||||
</el-tree>
|
||||
<el-dialog :close-on-click-modal="false" :visible.sync="addDialogVisible" width="30%" top="5vh" :show-close="true"
|
||||
:before-close="addHandleClose" :title="addDialogTitle == 'edit' ? '编辑名称' : '新增名称'">
|
||||
<el-form :model="addForm" :rules="addRules" label-width="80px" ref="addRef">
|
||||
<el-form-item label="名称" prop="name">
|
||||
<el-input size="medium" v-model="addForm.name" placeholder="名称" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<span class="dialog-footer">
|
||||
<el-button size="small" @click="addHandleClose">取 消</el-button>
|
||||
<el-button size="small" type="primary" @click="addData">确 定</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
addType: 1,
|
||||
addNode: '',
|
||||
startId: null,
|
||||
setTree: [], // tree数据
|
||||
NODE_KEY: "id", // id对应字段
|
||||
// MAX_LEVEL: 3, // 设定最大层级
|
||||
NODE_ID_START: 0, // 新增节点id，逐次递减
|
||||
startId: null,
|
||||
setTree: [
|
||||
{
|
||||
label: "Gateway",
|
||||
id: 1,
|
||||
editing: true,
|
||||
children: [
|
||||
{
|
||||
label: "数据采集",
|
||||
id: 11,
|
||||
children: [
|
||||
{
|
||||
label: "I/O点",
|
||||
id: 111,
|
||||
},
|
||||
{
|
||||
label: "用户点",
|
||||
id: 112,
|
||||
},
|
||||
{
|
||||
label: "计算点",
|
||||
id: 113,
|
||||
},
|
||||
{
|
||||
label: "系统点",
|
||||
id: 114,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "数据服务",
|
||||
id: 12,
|
||||
children: [
|
||||
{
|
||||
label: "Modbus",
|
||||
id: 121,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "IOT",
|
||||
id: 13,
|
||||
children: [
|
||||
{
|
||||
label: "Mqtt Client",
|
||||
id: 131,
|
||||
},
|
||||
{
|
||||
label: "Alink",
|
||||
id: 132,
|
||||
},
|
||||
{
|
||||
label: "Tlink",
|
||||
id: 133,
|
||||
},
|
||||
{
|
||||
label: "loTDDC",
|
||||
id: 134,
|
||||
},
|
||||
{
|
||||
label: "Ulink",
|
||||
id: 135,
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
defaultProps: {
|
||||
// 默认设置
|
||||
children: "children",
|
||||
label: "label",
|
||||
},
|
||||
addDataList: "",
|
||||
addForm: {
|
||||
name: "",
|
||||
},
|
||||
addRules: {
|
||||
name: [{ required: true, message: "请输入名称", trigger: "blur" }],
|
||||
},
|
||||
addDialogTitle: "new",
|
||||
addDialogVisible: false,
|
||||
// 之前遗忘了这个参数 重新补发
|
||||
initParam: {
|
||||
// 新增参数
|
||||
name: "",
|
||||
id: 0,
|
||||
children: [],
|
||||
},
|
||||
}
|
||||
},
|
||||
created() {
|
||||
// 初始值
|
||||
this.startId = this.NODE_ID_START;
|
||||
},
|
||||
methods: {
|
||||
handleDelete(_node, _data) {
|
||||
// 删除节点
|
||||
console.log(_node, _data);
|
||||
// 判断是否存在子节点
|
||||
if (_data.children && _data.children.length !== 0) {
|
||||
this.$message.error("此节点有子级，不可删除！");
|
||||
return false;
|
||||
} else {
|
||||
// 删除操作
|
||||
let DeletOprate = () => {
|
||||
this.$nextTick(() => {
|
||||
if (this.$refs.SlotTree) {
|
||||
this.$refs.SlotTree.remove(_data);
|
||||
this.$message.success("删除成功！");
|
||||
}
|
||||
});
|
||||
};
|
||||
// 二次确认
|
||||
let ConfirmFun = () => {
|
||||
this.$confirm("是否删除此节点？", "提示", {
|
||||
confirmButtonText: "确认",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning",
|
||||
})
|
||||
.then(() => {
|
||||
DeletOprate();
|
||||
})
|
||||
.catch(() => { });
|
||||
};
|
||||
// 判断是否新增： 新增节点直接删除，已存在的节点要二次确认
|
||||
_data[this.NODE_KEY] < this.NODE_ID_START
|
||||
? DeletOprate()
|
||||
: ConfirmFun();
|
||||
}
|
||||
},
|
||||
handleInput(_node, _data) {
|
||||
// 修改节点
|
||||
console.log(_node, _data);
|
||||
// 退出编辑状态
|
||||
if (_node.isEdit) {
|
||||
this.$set(_node, "isEdit", false);
|
||||
}
|
||||
},
|
||||
handleEdit(_node, _data) {
|
||||
// 编辑节点
|
||||
console.log(_node, _data);
|
||||
// 设置编辑状态
|
||||
if (!_node.isEdit) {
|
||||
this.$set(_node, "isEdit", true);
|
||||
}
|
||||
// 输入框聚焦
|
||||
this.$nextTick(() => {
|
||||
if (this.$refs["slotTreeInput" + _data[this.NODE_KEY]]) {
|
||||
this.$refs["slotTreeInput" + _data[this.NODE_KEY]].$refs.input.focus();
|
||||
}
|
||||
});
|
||||
},
|
||||
// 新增子级节点打开事件
|
||||
appendChild(node, data) {
|
||||
this.addForm.name = "";
|
||||
this.addDialogVisible = true;
|
||||
this.addDialogTitle = "new";
|
||||
this.addDataList = data;
|
||||
this.addNode = node
|
||||
this.addType = 2;
|
||||
},
|
||||
// 新增子级节点
|
||||
handleAdd(_node, _data, _name) {
|
||||
// 新增节点
|
||||
console.log(_node, _data);
|
||||
// 判断层级
|
||||
// if (_node.level >= this.MAX_LEVEL) {
|
||||
// this.$message.warning("当前已达到" + this.MAX_LEVEL + "级，无法新增！");
|
||||
// return false;
|
||||
// }
|
||||
// 参数修改
|
||||
let obj = JSON.parse(JSON.stringify(this.initParam)); // copy参数
|
||||
obj.id = _data[this.NODE_KEY]; // 父id
|
||||
obj[this.NODE_KEY] = ++this.startId; // 节点id：逐次递减id
|
||||
obj.label = _name
|
||||
// 判断字段是否存在
|
||||
if (!_data.children) {
|
||||
this.$set(_data, "children", []);
|
||||
}
|
||||
// 新增数据
|
||||
_data.children.push(obj);
|
||||
// 展开节点
|
||||
if (!_node.expanded) {
|
||||
_node.expanded = true;
|
||||
}
|
||||
},
|
||||
// 新增顶级结点打开事件
|
||||
handleAddTop() {
|
||||
// 添加顶部节点
|
||||
let obj = JSON.parse(JSON.stringify(this.initParam)); // copy参数
|
||||
console.log(obj);
|
||||
obj[this.NODE_KEY] = ++this.startId; // 节点id：逐次递减id
|
||||
obj.label = this.addForm.name;
|
||||
console.log(obj.label)
|
||||
this.setTree.push(obj);
|
||||
},
|
||||
// 新增顶级结点
|
||||
openAddTop() {
|
||||
this.addForm.name = "";
|
||||
this.addDialogVisible = true;
|
||||
this.addDialogTitle = "new";
|
||||
this.addType = 1;
|
||||
},
|
||||
// 点击确定 新增子级菜单
|
||||
addData() {
|
||||
var t = this;
|
||||
this.$refs.addRef.validate(async (valid) => {
|
||||
if (valid) {
|
||||
if (t.addType == 1) {
|
||||
t.handleAddTop();
|
||||
this.addDialogVisible = false;
|
||||
} else if (t.addType == 2) {
|
||||
const obj = JSON.parse(JSON.stringify(t.addForm));
|
||||
// 需要判断新增还是编辑
|
||||
t.handleAdd(t.addNode, t.addDataList, obj.name)
|
||||
this.addDialogVisible = false;
|
||||
}
|
||||
} else {
|
||||
console.log("error submit!!");
|
||||
return false;
|
||||
}
|
||||
});
|
||||
},
|
||||
addHandleClose() {
|
||||
this.addDialogVisible = false;
|
||||
this.$refs.addRef.resetFields();
|
||||
},
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,785 @@
|
|||
<!-- <template>
|
||||
<div>
|
||||
<el-tree :data="data" node-key="id" :props="defaultProps" @node-contextmenu="rightClick" @check="treeCheck">
|
||||
</el-tree>
|
||||
<div id="perTreeMenu" v-if="tmDisplay" class="tree_menu" :style="{ ...rightMenu }">
|
||||
<ul>
|
||||
<li @click="add_passage = true">新增通道</li>
|
||||
<li>取消</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="pas_params">
|
||||
<el-dialog title="通道参数设置" :visible.sync="add_passage" width="765px" v-loading="Loading">
|
||||
<el-form :model="FormData" :label-position="labelPosition" :rules="rules" ref="ruleForm">
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="通道名称:" :label-width="formLabelWidth" prop="tdpz_tdmc">
|
||||
<el-select v-model="FormData.tdpz_tdmc" placeholder="" style="width: 200px; height: 30px">
|
||||
<el-option v-for="(item, index) in options1" :key="index" :label="item.label" :value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="通道:" :label-width="formLabelWidth" prop="tdpz_td">
|
||||
<el-select v-model="FormData.tdpz_td" placeholder="" style="width: 200px; height: 30px">
|
||||
<el-option v-for="(item, index) in options2" :key="index" :label="item.label" :value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="驱动名称:" :label-width="formLabelWidth" prop="tdpz_qdmc">
|
||||
<el-row>
|
||||
<el-col :span="18">
|
||||
<el-input v-model="FormData.tdpz_qdmc" placeholder="" style="width: 200px; height: 30px"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-button style="width: 50px; height: 30px" @click="getDriveName">...</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="IP地址:" :label-width="formLabelWidth" prop="tdpz_ip">
|
||||
<el-row>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="tdpz_ip1" style="width: 43px; height: 30px"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1" style="color: #fff">. </el-col>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="tdpz_ip2" style="width: 43px; height: 30px"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1" style="color: #fff">.</el-col>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="tdpz_ip3" style="width: 43px; height: 30px"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1" style="color: #fff">.</el-col>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="tdpz_ip4" style="width: 43px; height: 30px"></el-input>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="端口号:" :label-width="formLabelWidth" prop="tdpz_port">
|
||||
<el-input v-model="FormData.tdpz_port" placeholder="" style="width: 200px; height: 30px"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="超过时间(ms):" :label-width="formLabelWidth" prop="tdpz_cssj">
|
||||
<el-input v-model="FormData.tdpz_cssj" placeholder="" style="width: 200px; height: 30px"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="间隔时间(ms):" :label-width="formLabelWidth" prop="tdpz_jgsj">
|
||||
<el-input v-model="FormData.tdpz_jgsj" placeholder="" style="width: 200px; height: 30px"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="轮询时间(ms):" :label-width="formLabelWidth" prop="tdpz_lxsj">
|
||||
<el-input v-model="FormData.tdpz_lxsj" placeholder="" style="width: 200px; height: 30px"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="重复次数:" :label-width="formLabelWidth" prop="tdpz_cfcs">
|
||||
<el-input v-model="FormData.tdpz_cfcs" placeholder="" style="width: 200px; height: 30px"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<div class="super_parmams">
|
||||
<h3>高级参数</h3>
|
||||
<div>
|
||||
<i class="el-icon-caret-bottom" v-if="is_retract"></i>
|
||||
<i class="el-icon-caret-top" v-else="is_retract"></i>
|
||||
<el-button type="text" plain @click="getRetract" style="
|
||||
width: 28px;
|
||||
border: none;
|
||||
color: rgba(16, 16, 16, 1);
|
||||
font-size: 14px;
|
||||
text-align: left;
|
||||
">
|
||||
收起</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="super_con" v-show="is_retract">
|
||||
<el-form :label-position="labelPosition" :rules="rules" ref="ruleForm">
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item>
|
||||
<el-checkbox v-model="FormData.tdpz_watchtime">watch time(s)</el-checkbox>
|
||||
<el-input v-model="input1" placeholder="" style="width: 200px; height: 30px"
|
||||
:disabled="isdisabled"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item>
|
||||
<el-checkbox v-model="FormData.tdpz_cjsylxdz">采集使用连续地址</el-checkbox>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="读写占空比:" :label-width="formLabelWidth">
|
||||
<el-row>
|
||||
<el-col :span="10">
|
||||
<el-input v-model="tdpz_dxzkb1" style="width: 91px; height: 30px"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="4">: </el-col>
|
||||
<el-col :span="10">
|
||||
<el-input v-model="tdpz_dxzkb2" style="width: 91px; height: 30px"></el-input>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="05/0F:" :label-width="formLabelWidth">
|
||||
<el-row>
|
||||
<el-col :span="8"><el-radio v-model="FormData.tdpz_050F" label="auto">auto</el-radio></el-col>
|
||||
<el-col :span="8"><el-radio v-model="FormData.tdpz_050F" label="05">05</el-radio></el-col>
|
||||
<el-col :span="8"><el-radio v-model="FormData.tdpz_050F" label="0F">0F</el-radio></el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="06/10:" :label-width="formLabelWidth">
|
||||
<el-row>
|
||||
<el-col :span="8"><el-radio v-model="FormData.tdpz_0610" label="auto">auto</el-radio></el-col>
|
||||
<el-col :span="8"><el-radio v-model="FormData.tdpz_0610" label="06">06</el-radio></el-col>
|
||||
<el-col :span="8"><el-radio v-model="FormData.tdpz_0610" label="10">10</el-radio></el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</div>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="saveGate">保 存</el-button>
|
||||
<el-button @click="add_passage = false">取 消</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
flag: false,
|
||||
gateway: JSON.parse(localStorage.getItem("tree"))[0].label,
|
||||
FormData: {
|
||||
tdpz_tdmc: "有线区Channel1",
|
||||
tdpz_td: "网口",
|
||||
tdpz_qdmc: "ModbusTCPClient",
|
||||
tdpz_port: "",
|
||||
tdpz_cssj: "",
|
||||
tdpz_jgsj: "",
|
||||
tdpz_lxsj: "",
|
||||
tdpz_cfcs: "",
|
||||
tdpz_watchtime: true,
|
||||
tdpz_cjsylxdz: false,
|
||||
tdpz_dxzkb: "",
|
||||
tdpz_050F: "auto",
|
||||
tdpz_0610: "auto",
|
||||
},
|
||||
tdpz_dxzkb1: "1",
|
||||
tdpz_dxzkb2: "1",
|
||||
tdpz_ip1: "",
|
||||
tdpz_ip2: "",
|
||||
tdpz_ip3: "",
|
||||
tdpz_ip4: "",
|
||||
options1: [
|
||||
{
|
||||
value: "有线区Channel1",
|
||||
label: "有线区Channel1",
|
||||
},
|
||||
{
|
||||
value: "无线区Channel1",
|
||||
label: "无线区Channel1",
|
||||
},
|
||||
],
|
||||
options2: [
|
||||
{
|
||||
value: "网口",
|
||||
label: "网口",
|
||||
},
|
||||
{
|
||||
value: "串口",
|
||||
label: "串口",
|
||||
},
|
||||
],
|
||||
value1: "有线区Channel1",
|
||||
value2: "网口",
|
||||
diag_drive: false,
|
||||
isdisabled: true,
|
||||
radio: "1",
|
||||
is_retract: true,
|
||||
labelPosition: "left",
|
||||
formLabelWidth: "116px",
|
||||
input1: 192,
|
||||
add_passage: false,
|
||||
rightMenu: "",
|
||||
dialogVisible: true,
|
||||
menuShow: false,
|
||||
datas: [],
|
||||
datas2: [
|
||||
{
|
||||
label: "通用标准",
|
||||
children: [
|
||||
{
|
||||
label: "ModbusTCPClient",
|
||||
},
|
||||
{
|
||||
label: "ModbusRTU_over_TCP",
|
||||
},
|
||||
{
|
||||
label: "OPCUAClient",
|
||||
},
|
||||
{
|
||||
label: "OPCDAClient",
|
||||
},
|
||||
{
|
||||
label: "MQTTClient",
|
||||
},
|
||||
{
|
||||
label: "OPCXMLDAClient",
|
||||
},
|
||||
{
|
||||
label: "环保212协议网口监听",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "PLC",
|
||||
children: [
|
||||
{
|
||||
label: "Slemens S7-200 Network",
|
||||
},
|
||||
{
|
||||
label: "Slemens S7-300 Network",
|
||||
},
|
||||
{
|
||||
label: "Slemens S7-400 Network",
|
||||
},
|
||||
{
|
||||
label: "Slemens S7-1200 Network",
|
||||
},
|
||||
{
|
||||
label: "Slemens S7-1500 Network",
|
||||
},
|
||||
{
|
||||
label: "EtherNet/IP CIP协议(AB OMR ON)",
|
||||
},
|
||||
{
|
||||
label: "MC_Qna-3E(三菱 基恩士 松下)",
|
||||
},
|
||||
{
|
||||
label: "MC_A-1E_Binary",
|
||||
},
|
||||
{
|
||||
label: "OMRON-FINS",
|
||||
},
|
||||
{
|
||||
label: "横河PLC",
|
||||
},
|
||||
{
|
||||
label: "西门子FetchWirte",
|
||||
},
|
||||
{
|
||||
label: "富机 FUJI_SPH_NET",
|
||||
},
|
||||
{
|
||||
label: "基恩士上位链路通讯",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "智能建筑",
|
||||
children: [],
|
||||
},
|
||||
{
|
||||
label: "厂家定制",
|
||||
children: [],
|
||||
},
|
||||
{
|
||||
label: "电力行业标准",
|
||||
children: [
|
||||
{
|
||||
label: "IEC104",
|
||||
},
|
||||
{
|
||||
label: "DLT645_over_TCP",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "CNC数控",
|
||||
children: [],
|
||||
},
|
||||
{
|
||||
label: "私有协议",
|
||||
children: [],
|
||||
},
|
||||
],
|
||||
defaultProps: {
|
||||
children: "children",
|
||||
label: "label",
|
||||
},
|
||||
rules: {
|
||||
tdpz_tdmc: [
|
||||
{ required: true, message: "请输入通道名称", trigger: "change" },
|
||||
],
|
||||
tdpz_td: [{ required: true, message: "请输入通道", trigger: "change" }],
|
||||
tdpz_qdmc: [
|
||||
{ required: true, message: "请输入驱动名称", trigger: "change" },
|
||||
],
|
||||
tdpz_ip: [{ required: true, message: "请输入ip地址", trigger: "blur" }],
|
||||
tdpz_port: [
|
||||
{ required: true, message: "请输入端口号", trigger: "blur" },
|
||||
],
|
||||
tdpz_cssj: [
|
||||
{ required: true, message: "请输入超出时间", trigger: "blur" },
|
||||
],
|
||||
tdpz_jgsj: [
|
||||
{ required: true, message: "请输入间隔时间", trigger: "blur" },
|
||||
],
|
||||
tdpz_lxsj: [
|
||||
{ required: true, message: "请输入轮询时间", trigger: "blur" },
|
||||
],
|
||||
tdpz_cfcs: [
|
||||
{ required: true, message: "请输入重复次数", trigger: "blur" },
|
||||
],
|
||||
},
|
||||
tmDisplay: false,
|
||||
rightMenu: {},
|
||||
node: "",
|
||||
data: [
|
||||
{
|
||||
label: "Gateway",
|
||||
id: 1,
|
||||
editing: true,
|
||||
children: [
|
||||
{
|
||||
label: "数据采集",
|
||||
id: 11,
|
||||
children: [
|
||||
{
|
||||
label: "I/O点",
|
||||
id: 111,
|
||||
},
|
||||
{
|
||||
label: "用户点",
|
||||
id: 112,
|
||||
},
|
||||
{
|
||||
label: "计算点",
|
||||
id: 113,
|
||||
},
|
||||
{
|
||||
label: "系统点",
|
||||
id: 114,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "数据服务",
|
||||
id: 12,
|
||||
children: [
|
||||
{
|
||||
label: "Modbus",
|
||||
id: 121,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "IOT",
|
||||
id: 13,
|
||||
children: [
|
||||
{
|
||||
label: "Mqtt Client",
|
||||
id: 131,
|
||||
},
|
||||
{
|
||||
label: "Alink",
|
||||
id: 132,
|
||||
},
|
||||
{
|
||||
label: "Tlink",
|
||||
id: 133,
|
||||
},
|
||||
{
|
||||
label: "loTDDC",
|
||||
id: 134,
|
||||
},
|
||||
{
|
||||
label: "Ulink",
|
||||
id: 135,
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
dialogVisible: false,
|
||||
newNodeData: {
|
||||
// 新节点的数据，可以根据需求定义
|
||||
// ...
|
||||
},
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
rightClick(e, data, node, comp) {
|
||||
console.log('e:', e, 'data', data)
|
||||
// this.node = node;
|
||||
// console.log(this.node)
|
||||
console.log(data.id);
|
||||
console.log(comp);
|
||||
this.rightMenu = { top: e.pageY + 'px', left: e.pageX + 'px' }
|
||||
this.tmDisplay = true
|
||||
const self = this
|
||||
document.onclick = function (ev) {
|
||||
if (ev.target !== document.getElementById('perTreeMenu')) {
|
||||
self.tmDisplay = false
|
||||
}
|
||||
}
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.tree_menu {
|
||||
position: fixed;
|
||||
display: block;
|
||||
z-index: 20000;
|
||||
background-color: #fff;
|
||||
padding: 5px 0;
|
||||
border: 1px solid #ebeef5;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
|
||||
|
||||
ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
ul li {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0 15px;
|
||||
font-size: 14px;
|
||||
line-height: 30px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
ul li:hover {
|
||||
background-color: #ebeef5
|
||||
}
|
||||
}
|
||||
</style> -->
|
||||
<template>
|
||||
<div>
|
||||
<el-button class="addBtn" type="primary" size="small" @click="openAddTop">添加顶级节点</el-button>
|
||||
<el-input placeholder="输入关键字进行过滤" v-model="filterText">
|
||||
</el-input>
|
||||
<el-tree ref="SlotTree" :data="setTree" :props="defaultProps" :expand-on-click-node="false" highlight-current
|
||||
:node-key="NODE_KEY">
|
||||
<div class="comp-tr-node" slot-scope="{ node, data }">
|
||||
<!-- 编辑状态 -->
|
||||
<template v-if="node.isEdit">
|
||||
<el-input v-model="data.label" autofocus size="mini" :ref="'slotTreeInput' + data[NODE_KEY]"
|
||||
@blur.stop="handleInput(node, data)" @keyup.enter.native="handleInput(node, data)"></el-input>
|
||||
</template>
|
||||
<!-- 非编辑状态 -->
|
||||
<template v-else>
|
||||
<!-- 名称： 新增节点增加class（is-new） -->
|
||||
<span :class="[
|
||||
data[NODE_KEY] < NODE_ID_START ? 'is-new' : '',
|
||||
'comp-tr-node--name',
|
||||
]">
|
||||
{{ node.label }}
|
||||
</span>
|
||||
|
||||
<!-- 按钮 -->
|
||||
<span class="comp-tr-node--btns">
|
||||
<!-- 新增 -->
|
||||
<el-button type="text" size="mini" @click="appendChild(node, data)">新增</el-button>
|
||||
|
||||
<!-- 编辑 -->
|
||||
<el-button size="mini" type="text" @click="handleEdit(node, data)">编辑</el-button>
|
||||
|
||||
<!-- 删除 -->
|
||||
<el-button size="mini" type="text" @click="handleDelete(node, data)">删除</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</div>
|
||||
</el-tree>
|
||||
<el-dialog :close-on-click-modal="false" :visible.sync="addDialogVisible" width="30%" top="5vh" :show-close="true"
|
||||
:before-close="addHandleClose" :title="addDialogTitle == 'edit' ? '编辑名称' : '新增名称'">
|
||||
<el-form :model="addForm" :rules="addRules" label-width="80px" ref="addRef">
|
||||
<el-form-item label="名称" prop="name">
|
||||
<el-input size="medium" v-model="addForm.name" placeholder="名称" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<span class="dialog-footer">
|
||||
<el-button size="small" @click="addHandleClose">取 消</el-button>
|
||||
<el-button size="small" type="primary" @click="addData">确 定</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
addType: 1,
|
||||
addNode: '',
|
||||
startId: null,
|
||||
setTree: [], // tree数据
|
||||
NODE_KEY: "id", // id对应字段
|
||||
// MAX_LEVEL: 3, // 设定最大层级
|
||||
NODE_ID_START: 0, // 新增节点id，逐次递减
|
||||
startId: null,
|
||||
setTree: [
|
||||
{
|
||||
label: "Gateway",
|
||||
id: 1,
|
||||
editing: true,
|
||||
children: [
|
||||
{
|
||||
label: "数据采集",
|
||||
id: 11,
|
||||
children: [
|
||||
{
|
||||
label: "I/O点",
|
||||
id: 111,
|
||||
},
|
||||
{
|
||||
label: "用户点",
|
||||
id: 112,
|
||||
},
|
||||
{
|
||||
label: "计算点",
|
||||
id: 113,
|
||||
},
|
||||
{
|
||||
label: "系统点",
|
||||
id: 114,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "数据服务",
|
||||
id: 12,
|
||||
children: [
|
||||
{
|
||||
label: "Modbus",
|
||||
id: 121,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "IOT",
|
||||
id: 13,
|
||||
children: [
|
||||
{
|
||||
label: "Mqtt Client",
|
||||
id: 131,
|
||||
},
|
||||
{
|
||||
label: "Alink",
|
||||
id: 132,
|
||||
},
|
||||
{
|
||||
label: "Tlink",
|
||||
id: 133,
|
||||
},
|
||||
{
|
||||
label: "loTDDC",
|
||||
id: 134,
|
||||
},
|
||||
{
|
||||
label: "Ulink",
|
||||
id: 135,
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
defaultProps: {
|
||||
// 默认设置
|
||||
children: "children",
|
||||
label: "label",
|
||||
},
|
||||
addDataList: "",
|
||||
addForm: {
|
||||
name: "",
|
||||
},
|
||||
addRules: {
|
||||
name: [{ required: true, message: "请输入名称", trigger: "blur" }],
|
||||
},
|
||||
addDialogTitle: "new",
|
||||
addDialogVisible: false,
|
||||
// 之前遗忘了这个参数 重新补发
|
||||
initParam: {
|
||||
// 新增参数
|
||||
name: "",
|
||||
id: 0,
|
||||
children: [],
|
||||
},
|
||||
}
|
||||
},
|
||||
created() {
|
||||
// 初始值
|
||||
this.startId = this.NODE_ID_START;
|
||||
},
|
||||
methods: {
|
||||
handleDelete(_node, _data) {
|
||||
// 删除节点
|
||||
console.log(_node, _data);
|
||||
// 判断是否存在子节点
|
||||
if (_data.children && _data.children.length !== 0) {
|
||||
this.$message.error("此节点有子级，不可删除！");
|
||||
return false;
|
||||
} else {
|
||||
// 删除操作
|
||||
let DeletOprate = () => {
|
||||
this.$nextTick(() => {
|
||||
if (this.$refs.SlotTree) {
|
||||
this.$refs.SlotTree.remove(_data);
|
||||
this.$message.success("删除成功！");
|
||||
}
|
||||
});
|
||||
};
|
||||
// 二次确认
|
||||
let ConfirmFun = () => {
|
||||
this.$confirm("是否删除此节点？", "提示", {
|
||||
confirmButtonText: "确认",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning",
|
||||
})
|
||||
.then(() => {
|
||||
DeletOprate();
|
||||
})
|
||||
.catch(() => { });
|
||||
};
|
||||
// 判断是否新增： 新增节点直接删除，已存在的节点要二次确认
|
||||
_data[this.NODE_KEY] < this.NODE_ID_START
|
||||
? DeletOprate()
|
||||
: ConfirmFun();
|
||||
}
|
||||
},
|
||||
handleInput(_node, _data) {
|
||||
// 修改节点
|
||||
console.log(_node, _data);
|
||||
// 退出编辑状态
|
||||
if (_node.isEdit) {
|
||||
this.$set(_node, "isEdit", false);
|
||||
}
|
||||
},
|
||||
handleEdit(_node, _data) {
|
||||
// 编辑节点
|
||||
console.log(_node, _data);
|
||||
// 设置编辑状态
|
||||
if (!_node.isEdit) {
|
||||
this.$set(_node, "isEdit", true);
|
||||
}
|
||||
// 输入框聚焦
|
||||
this.$nextTick(() => {
|
||||
if (this.$refs["slotTreeInput" + _data[this.NODE_KEY]]) {
|
||||
this.$refs["slotTreeInput" + _data[this.NODE_KEY]].$refs.input.focus();
|
||||
}
|
||||
});
|
||||
},
|
||||
// 新增子级节点打开事件
|
||||
appendChild(node, data) {
|
||||
this.addForm.name = "";
|
||||
this.addDialogVisible = true;
|
||||
this.addDialogTitle = "new";
|
||||
this.addDataList = data;
|
||||
this.addNode = node
|
||||
this.addType = 2;
|
||||
},
|
||||
// 新增子级节点
|
||||
handleAdd(_node, _data, _name) {
|
||||
// 新增节点
|
||||
console.log(_node, _data);
|
||||
// 判断层级
|
||||
// if (_node.level >= this.MAX_LEVEL) {
|
||||
// this.$message.warning("当前已达到" + this.MAX_LEVEL + "级，无法新增！");
|
||||
// return false;
|
||||
// }
|
||||
// 参数修改
|
||||
let obj = JSON.parse(JSON.stringify(this.initParam)); // copy参数
|
||||
obj.id = _data[this.NODE_KEY]; // 父id
|
||||
obj[this.NODE_KEY] = ++this.startId; // 节点id：逐次递减id
|
||||
obj.label = _name
|
||||
// 判断字段是否存在
|
||||
if (!_data.children) {
|
||||
this.$set(_data, "children", []);
|
||||
}
|
||||
// 新增数据
|
||||
_data.children.push(obj);
|
||||
// 展开节点
|
||||
if (!_node.expanded) {
|
||||
_node.expanded = true;
|
||||
}
|
||||
},
|
||||
// 新增顶级结点打开事件
|
||||
handleAddTop() {
|
||||
// 添加顶部节点
|
||||
let obj = JSON.parse(JSON.stringify(this.initParam)); // copy参数
|
||||
console.log(obj);
|
||||
obj[this.NODE_KEY] = ++this.startId; // 节点id：逐次递减id
|
||||
obj.label = this.addForm.name;
|
||||
console.log(obj.label)
|
||||
this.setTree.push(obj);
|
||||
},
|
||||
// 新增顶级结点
|
||||
openAddTop() {
|
||||
this.addForm.name = "";
|
||||
this.addDialogVisible = true;
|
||||
this.addDialogTitle = "new";
|
||||
this.addType = 1;
|
||||
},
|
||||
// 点击确定 新增子级菜单
|
||||
addData() {
|
||||
var t = this;
|
||||
this.$refs.addRef.validate(async (valid) => {
|
||||
if (valid) {
|
||||
if (t.addType == 1) {
|
||||
t.handleAddTop();
|
||||
this.addDialogVisible = false;
|
||||
} else if (t.addType == 2) {
|
||||
const obj = JSON.parse(JSON.stringify(t.addForm));
|
||||
// 需要判断新增还是编辑
|
||||
t.handleAdd(t.addNode, t.addDataList, obj.name)
|
||||
this.addDialogVisible = false;
|
||||
}
|
||||
} else {
|
||||
console.log("error submit!!");
|
||||
return false;
|
||||
}
|
||||
});
|
||||
},
|
||||
addHandleClose() {
|
||||
this.addDialogVisible = false;
|
||||
this.$refs.addRef.resetFields();
|
||||
},
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,785 @@
|
|||
<!-- <template>
|
||||
<div>
|
||||
<el-tree :data="data" node-key="id" :props="defaultProps" @node-contextmenu="rightClick" @check="treeCheck">
|
||||
</el-tree>
|
||||
<div id="perTreeMenu" v-if="tmDisplay" class="tree_menu" :style="{ ...rightMenu }">
|
||||
<ul>
|
||||
<li @click="add_passage = true">新增通道</li>
|
||||
<li>取消</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="pas_params">
|
||||
<el-dialog title="通道参数设置" :visible.sync="add_passage" width="765px" v-loading="Loading">
|
||||
<el-form :model="FormData" :label-position="labelPosition" :rules="rules" ref="ruleForm">
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="通道名称:" :label-width="formLabelWidth" prop="tdpz_tdmc">
|
||||
<el-select v-model="FormData.tdpz_tdmc" placeholder="" style="width: 200px; height: 30px">
|
||||
<el-option v-for="(item, index) in options1" :key="index" :label="item.label" :value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="通道:" :label-width="formLabelWidth" prop="tdpz_td">
|
||||
<el-select v-model="FormData.tdpz_td" placeholder="" style="width: 200px; height: 30px">
|
||||
<el-option v-for="(item, index) in options2" :key="index" :label="item.label" :value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="驱动名称:" :label-width="formLabelWidth" prop="tdpz_qdmc">
|
||||
<el-row>
|
||||
<el-col :span="18">
|
||||
<el-input v-model="FormData.tdpz_qdmc" placeholder="" style="width: 200px; height: 30px"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-button style="width: 50px; height: 30px" @click="getDriveName">...</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="IP地址:" :label-width="formLabelWidth" prop="tdpz_ip">
|
||||
<el-row>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="tdpz_ip1" style="width: 43px; height: 30px"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1" style="color: #fff">. </el-col>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="tdpz_ip2" style="width: 43px; height: 30px"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1" style="color: #fff">.</el-col>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="tdpz_ip3" style="width: 43px; height: 30px"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1" style="color: #fff">.</el-col>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="tdpz_ip4" style="width: 43px; height: 30px"></el-input>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="端口号:" :label-width="formLabelWidth" prop="tdpz_port">
|
||||
<el-input v-model="FormData.tdpz_port" placeholder="" style="width: 200px; height: 30px"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="超过时间(ms):" :label-width="formLabelWidth" prop="tdpz_cssj">
|
||||
<el-input v-model="FormData.tdpz_cssj" placeholder="" style="width: 200px; height: 30px"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="间隔时间(ms):" :label-width="formLabelWidth" prop="tdpz_jgsj">
|
||||
<el-input v-model="FormData.tdpz_jgsj" placeholder="" style="width: 200px; height: 30px"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="轮询时间(ms):" :label-width="formLabelWidth" prop="tdpz_lxsj">
|
||||
<el-input v-model="FormData.tdpz_lxsj" placeholder="" style="width: 200px; height: 30px"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="重复次数:" :label-width="formLabelWidth" prop="tdpz_cfcs">
|
||||
<el-input v-model="FormData.tdpz_cfcs" placeholder="" style="width: 200px; height: 30px"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<div class="super_parmams">
|
||||
<h3>高级参数</h3>
|
||||
<div>
|
||||
<i class="el-icon-caret-bottom" v-if="is_retract"></i>
|
||||
<i class="el-icon-caret-top" v-else="is_retract"></i>
|
||||
<el-button type="text" plain @click="getRetract" style="
|
||||
width: 28px;
|
||||
border: none;
|
||||
color: rgba(16, 16, 16, 1);
|
||||
font-size: 14px;
|
||||
text-align: left;
|
||||
">
|
||||
收起</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="super_con" v-show="is_retract">
|
||||
<el-form :label-position="labelPosition" :rules="rules" ref="ruleForm">
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item>
|
||||
<el-checkbox v-model="FormData.tdpz_watchtime">watch time(s)</el-checkbox>
|
||||
<el-input v-model="input1" placeholder="" style="width: 200px; height: 30px"
|
||||
:disabled="isdisabled"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item>
|
||||
<el-checkbox v-model="FormData.tdpz_cjsylxdz">采集使用连续地址</el-checkbox>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="读写占空比:" :label-width="formLabelWidth">
|
||||
<el-row>
|
||||
<el-col :span="10">
|
||||
<el-input v-model="tdpz_dxzkb1" style="width: 91px; height: 30px"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="4">: </el-col>
|
||||
<el-col :span="10">
|
||||
<el-input v-model="tdpz_dxzkb2" style="width: 91px; height: 30px"></el-input>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="05/0F:" :label-width="formLabelWidth">
|
||||
<el-row>
|
||||
<el-col :span="8"><el-radio v-model="FormData.tdpz_050F" label="auto">auto</el-radio></el-col>
|
||||
<el-col :span="8"><el-radio v-model="FormData.tdpz_050F" label="05">05</el-radio></el-col>
|
||||
<el-col :span="8"><el-radio v-model="FormData.tdpz_050F" label="0F">0F</el-radio></el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="06/10:" :label-width="formLabelWidth">
|
||||
<el-row>
|
||||
<el-col :span="8"><el-radio v-model="FormData.tdpz_0610" label="auto">auto</el-radio></el-col>
|
||||
<el-col :span="8"><el-radio v-model="FormData.tdpz_0610" label="06">06</el-radio></el-col>
|
||||
<el-col :span="8"><el-radio v-model="FormData.tdpz_0610" label="10">10</el-radio></el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</div>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="saveGate">保 存</el-button>
|
||||
<el-button @click="add_passage = false">取 消</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
flag: false,
|
||||
gateway: JSON.parse(localStorage.getItem("tree"))[0].label,
|
||||
FormData: {
|
||||
tdpz_tdmc: "有线区Channel1",
|
||||
tdpz_td: "网口",
|
||||
tdpz_qdmc: "ModbusTCPClient",
|
||||
tdpz_port: "",
|
||||
tdpz_cssj: "",
|
||||
tdpz_jgsj: "",
|
||||
tdpz_lxsj: "",
|
||||
tdpz_cfcs: "",
|
||||
tdpz_watchtime: true,
|
||||
tdpz_cjsylxdz: false,
|
||||
tdpz_dxzkb: "",
|
||||
tdpz_050F: "auto",
|
||||
tdpz_0610: "auto",
|
||||
},
|
||||
tdpz_dxzkb1: "1",
|
||||
tdpz_dxzkb2: "1",
|
||||
tdpz_ip1: "",
|
||||
tdpz_ip2: "",
|
||||
tdpz_ip3: "",
|
||||
tdpz_ip4: "",
|
||||
options1: [
|
||||
{
|
||||
value: "有线区Channel1",
|
||||
label: "有线区Channel1",
|
||||
},
|
||||
{
|
||||
value: "无线区Channel1",
|
||||
label: "无线区Channel1",
|
||||
},
|
||||
],
|
||||
options2: [
|
||||
{
|
||||
value: "网口",
|
||||
label: "网口",
|
||||
},
|
||||
{
|
||||
value: "串口",
|
||||
label: "串口",
|
||||
},
|
||||
],
|
||||
value1: "有线区Channel1",
|
||||
value2: "网口",
|
||||
diag_drive: false,
|
||||
isdisabled: true,
|
||||
radio: "1",
|
||||
is_retract: true,
|
||||
labelPosition: "left",
|
||||
formLabelWidth: "116px",
|
||||
input1: 192,
|
||||
add_passage: false,
|
||||
rightMenu: "",
|
||||
dialogVisible: true,
|
||||
menuShow: false,
|
||||
datas: [],
|
||||
datas2: [
|
||||
{
|
||||
label: "通用标准",
|
||||
children: [
|
||||
{
|
||||
label: "ModbusTCPClient",
|
||||
},
|
||||
{
|
||||
label: "ModbusRTU_over_TCP",
|
||||
},
|
||||
{
|
||||
label: "OPCUAClient",
|
||||
},
|
||||
{
|
||||
label: "OPCDAClient",
|
||||
},
|
||||
{
|
||||
label: "MQTTClient",
|
||||
},
|
||||
{
|
||||
label: "OPCXMLDAClient",
|
||||
},
|
||||
{
|
||||
label: "环保212协议网口监听",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "PLC",
|
||||
children: [
|
||||
{
|
||||
label: "Slemens S7-200 Network",
|
||||
},
|
||||
{
|
||||
label: "Slemens S7-300 Network",
|
||||
},
|
||||
{
|
||||
label: "Slemens S7-400 Network",
|
||||
},
|
||||
{
|
||||
label: "Slemens S7-1200 Network",
|
||||
},
|
||||
{
|
||||
label: "Slemens S7-1500 Network",
|
||||
},
|
||||
{
|
||||
label: "EtherNet/IP CIP协议(AB OMR ON)",
|
||||
},
|
||||
{
|
||||
label: "MC_Qna-3E(三菱 基恩士 松下)",
|
||||
},
|
||||
{
|
||||
label: "MC_A-1E_Binary",
|
||||
},
|
||||
{
|
||||
label: "OMRON-FINS",
|
||||
},
|
||||
{
|
||||
label: "横河PLC",
|
||||
},
|
||||
{
|
||||
label: "西门子FetchWirte",
|
||||
},
|
||||
{
|
||||
label: "富机 FUJI_SPH_NET",
|
||||
},
|
||||
{
|
||||
label: "基恩士上位链路通讯",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "智能建筑",
|
||||
children: [],
|
||||
},
|
||||
{
|
||||
label: "厂家定制",
|
||||
children: [],
|
||||
},
|
||||
{
|
||||
label: "电力行业标准",
|
||||
children: [
|
||||
{
|
||||
label: "IEC104",
|
||||
},
|
||||
{
|
||||
label: "DLT645_over_TCP",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "CNC数控",
|
||||
children: [],
|
||||
},
|
||||
{
|
||||
label: "私有协议",
|
||||
children: [],
|
||||
},
|
||||
],
|
||||
defaultProps: {
|
||||
children: "children",
|
||||
label: "label",
|
||||
},
|
||||
rules: {
|
||||
tdpz_tdmc: [
|
||||
{ required: true, message: "请输入通道名称", trigger: "change" },
|
||||
],
|
||||
tdpz_td: [{ required: true, message: "请输入通道", trigger: "change" }],
|
||||
tdpz_qdmc: [
|
||||
{ required: true, message: "请输入驱动名称", trigger: "change" },
|
||||
],
|
||||
tdpz_ip: [{ required: true, message: "请输入ip地址", trigger: "blur" }],
|
||||
tdpz_port: [
|
||||
{ required: true, message: "请输入端口号", trigger: "blur" },
|
||||
],
|
||||
tdpz_cssj: [
|
||||
{ required: true, message: "请输入超出时间", trigger: "blur" },
|
||||
],
|
||||
tdpz_jgsj: [
|
||||
{ required: true, message: "请输入间隔时间", trigger: "blur" },
|
||||
],
|
||||
tdpz_lxsj: [
|
||||
{ required: true, message: "请输入轮询时间", trigger: "blur" },
|
||||
],
|
||||
tdpz_cfcs: [
|
||||
{ required: true, message: "请输入重复次数", trigger: "blur" },
|
||||
],
|
||||
},
|
||||
tmDisplay: false,
|
||||
rightMenu: {},
|
||||
node: "",
|
||||
data: [
|
||||
{
|
||||
label: "Gateway",
|
||||
id: 1,
|
||||
editing: true,
|
||||
children: [
|
||||
{
|
||||
label: "数据采集",
|
||||
id: 11,
|
||||
children: [
|
||||
{
|
||||
label: "I/O点",
|
||||
id: 111,
|
||||
},
|
||||
{
|
||||
label: "用户点",
|
||||
id: 112,
|
||||
},
|
||||
{
|
||||
label: "计算点",
|
||||
id: 113,
|
||||
},
|
||||
{
|
||||
label: "系统点",
|
||||
id: 114,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "数据服务",
|
||||
id: 12,
|
||||
children: [
|
||||
{
|
||||
label: "Modbus",
|
||||
id: 121,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "IOT",
|
||||
id: 13,
|
||||
children: [
|
||||
{
|
||||
label: "Mqtt Client",
|
||||
id: 131,
|
||||
},
|
||||
{
|
||||
label: "Alink",
|
||||
id: 132,
|
||||
},
|
||||
{
|
||||
label: "Tlink",
|
||||
id: 133,
|
||||
},
|
||||
{
|
||||
label: "loTDDC",
|
||||
id: 134,
|
||||
},
|
||||
{
|
||||
label: "Ulink",
|
||||
id: 135,
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
dialogVisible: false,
|
||||
newNodeData: {
|
||||
// 新节点的数据，可以根据需求定义
|
||||
// ...
|
||||
},
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
rightClick(e, data, node, comp) {
|
||||
console.log('e:', e, 'data', data)
|
||||
// this.node = node;
|
||||
// console.log(this.node)
|
||||
console.log(data.id);
|
||||
console.log(comp);
|
||||
this.rightMenu = { top: e.pageY + 'px', left: e.pageX + 'px' }
|
||||
this.tmDisplay = true
|
||||
const self = this
|
||||
document.onclick = function (ev) {
|
||||
if (ev.target !== document.getElementById('perTreeMenu')) {
|
||||
self.tmDisplay = false
|
||||
}
|
||||
}
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.tree_menu {
|
||||
position: fixed;
|
||||
display: block;
|
||||
z-index: 20000;
|
||||
background-color: #fff;
|
||||
padding: 5px 0;
|
||||
border: 1px solid #ebeef5;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
|
||||
|
||||
ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
ul li {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0 15px;
|
||||
font-size: 14px;
|
||||
line-height: 30px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
ul li:hover {
|
||||
background-color: #ebeef5
|
||||
}
|
||||
}
|
||||
</style> -->
|
||||
<template>
|
||||
<div>
|
||||
<el-button class="addBtn" type="primary" size="small" @click="openAddTop">添加顶级节点</el-button>
|
||||
<el-input placeholder="输入关键字进行过滤" v-model="filterText">
|
||||
</el-input>
|
||||
<el-tree ref="SlotTree" :data="setTree" :props="defaultProps" :expand-on-click-node="false" highlight-current
|
||||
:node-key="NODE_KEY">
|
||||
<div class="comp-tr-node" slot-scope="{ node, data }">
|
||||
<!-- 编辑状态 -->
|
||||
<template v-if="node.isEdit">
|
||||
<el-input v-model="data.label" autofocus size="mini" :ref="'slotTreeInput' + data[NODE_KEY]"
|
||||
@blur.stop="handleInput(node, data)" @keyup.enter.native="handleInput(node, data)"></el-input>
|
||||
</template>
|
||||
<!-- 非编辑状态 -->
|
||||
<template v-else>
|
||||
<!-- 名称： 新增节点增加class（is-new） -->
|
||||
<span :class="[
|
||||
data[NODE_KEY] < NODE_ID_START ? 'is-new' : '',
|
||||
'comp-tr-node--name',
|
||||
]">
|
||||
{{ node.label }}
|
||||
</span>
|
||||
|
||||
<!-- 按钮 -->
|
||||
<span class="comp-tr-node--btns">
|
||||
<!-- 新增 -->
|
||||
<el-button type="text" size="mini" @click="appendChild(node, data)">新增</el-button>
|
||||
|
||||
<!-- 编辑 -->
|
||||
<el-button size="mini" type="text" @click="handleEdit(node, data)">编辑</el-button>
|
||||
|
||||
<!-- 删除 -->
|
||||
<el-button size="mini" type="text" @click="handleDelete(node, data)">删除</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</div>
|
||||
</el-tree>
|
||||
<el-dialog :close-on-click-modal="false" :visible.sync="addDialogVisible" width="30%" top="5vh" :show-close="true"
|
||||
:before-close="addHandleClose" :title="addDialogTitle == 'edit' ? '编辑名称' : '新增名称'">
|
||||
<el-form :model="addForm" :rules="addRules" label-width="80px" ref="addRef">
|
||||
<el-form-item label="名称" prop="name">
|
||||
<el-input size="medium" v-model="addForm.name" placeholder="名称" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<span class="dialog-footer">
|
||||
<el-button size="small" @click="addHandleClose">取 消</el-button>
|
||||
<el-button size="small" type="primary" @click="addData">确 定</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
addType: 1,
|
||||
addNode: '',
|
||||
startId: null,
|
||||
setTree: [], // tree数据
|
||||
NODE_KEY: "id", // id对应字段
|
||||
// MAX_LEVEL: 3, // 设定最大层级
|
||||
NODE_ID_START: 0, // 新增节点id，逐次递减
|
||||
startId: null,
|
||||
setTree: [
|
||||
{
|
||||
label: "Gateway",
|
||||
id: 1,
|
||||
editing: true,
|
||||
children: [
|
||||
{
|
||||
label: "数据采集",
|
||||
id: 11,
|
||||
children: [
|
||||
{
|
||||
label: "I/O点",
|
||||
id: 111,
|
||||
},
|
||||
{
|
||||
label: "用户点",
|
||||
id: 112,
|
||||
},
|
||||
{
|
||||
label: "计算点",
|
||||
id: 113,
|
||||
},
|
||||
{
|
||||
label: "系统点",
|
||||
id: 114,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "数据服务",
|
||||
id: 12,
|
||||
children: [
|
||||
{
|
||||
label: "Modbus",
|
||||
id: 121,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "IOT",
|
||||
id: 13,
|
||||
children: [
|
||||
{
|
||||
label: "Mqtt Client",
|
||||
id: 131,
|
||||
},
|
||||
{
|
||||
label: "Alink",
|
||||
id: 132,
|
||||
},
|
||||
{
|
||||
label: "Tlink",
|
||||
id: 133,
|
||||
},
|
||||
{
|
||||
label: "loTDDC",
|
||||
id: 134,
|
||||
},
|
||||
{
|
||||
label: "Ulink",
|
||||
id: 135,
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
defaultProps: {
|
||||
// 默认设置
|
||||
children: "children",
|
||||
label: "label",
|
||||
},
|
||||
addDataList: "",
|
||||
addForm: {
|
||||
name: "",
|
||||
},
|
||||
addRules: {
|
||||
name: [{ required: true, message: "请输入名称", trigger: "blur" }],
|
||||
},
|
||||
addDialogTitle: "new",
|
||||
addDialogVisible: false,
|
||||
// 之前遗忘了这个参数 重新补发
|
||||
initParam: {
|
||||
// 新增参数
|
||||
name: "",
|
||||
id: 0,
|
||||
children: [],
|
||||
},
|
||||
}
|
||||
},
|
||||
created() {
|
||||
// 初始值
|
||||
this.startId = this.NODE_ID_START;
|
||||
},
|
||||
methods: {
|
||||
handleDelete(_node, _data) {
|
||||
// 删除节点
|
||||
console.log(_node, _data);
|
||||
// 判断是否存在子节点
|
||||
if (_data.children && _data.children.length !== 0) {
|
||||
this.$message.error("此节点有子级，不可删除！");
|
||||
return false;
|
||||
} else {
|
||||
// 删除操作
|
||||
let DeletOprate = () => {
|
||||
this.$nextTick(() => {
|
||||
if (this.$refs.SlotTree) {
|
||||
this.$refs.SlotTree.remove(_data);
|
||||
this.$message.success("删除成功！");
|
||||
}
|
||||
});
|
||||
};
|
||||
// 二次确认
|
||||
let ConfirmFun = () => {
|
||||
this.$confirm("是否删除此节点？", "提示", {
|
||||
confirmButtonText: "确认",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning",
|
||||
})
|
||||
.then(() => {
|
||||
DeletOprate();
|
||||
})
|
||||
.catch(() => { });
|
||||
};
|
||||
// 判断是否新增： 新增节点直接删除，已存在的节点要二次确认
|
||||
_data[this.NODE_KEY] < this.NODE_ID_START
|
||||
? DeletOprate()
|
||||
: ConfirmFun();
|
||||
}
|
||||
},
|
||||
handleInput(_node, _data) {
|
||||
// 修改节点
|
||||
console.log(_node, _data);
|
||||
// 退出编辑状态
|
||||
if (_node.isEdit) {
|
||||
this.$set(_node, "isEdit", false);
|
||||
}
|
||||
},
|
||||
handleEdit(_node, _data) {
|
||||
// 编辑节点
|
||||
console.log(_node, _data);
|
||||
// 设置编辑状态
|
||||
if (!_node.isEdit) {
|
||||
this.$set(_node, "isEdit", true);
|
||||
}
|
||||
// 输入框聚焦
|
||||
this.$nextTick(() => {
|
||||
if (this.$refs["slotTreeInput" + _data[this.NODE_KEY]]) {
|
||||
this.$refs["slotTreeInput" + _data[this.NODE_KEY]].$refs.input.focus();
|
||||
}
|
||||
});
|
||||
},
|
||||
// 新增子级节点打开事件
|
||||
appendChild(node, data) {
|
||||
this.addForm.name = "";
|
||||
this.addDialogVisible = true;
|
||||
this.addDialogTitle = "new";
|
||||
this.addDataList = data;
|
||||
this.addNode = node
|
||||
this.addType = 2;
|
||||
},
|
||||
// 新增子级节点
|
||||
handleAdd(_node, _data, _name) {
|
||||
// 新增节点
|
||||
console.log(_node, _data);
|
||||
// 判断层级
|
||||
// if (_node.level >= this.MAX_LEVEL) {
|
||||
// this.$message.warning("当前已达到" + this.MAX_LEVEL + "级，无法新增！");
|
||||
// return false;
|
||||
// }
|
||||
// 参数修改
|
||||
let obj = JSON.parse(JSON.stringify(this.initParam)); // copy参数
|
||||
obj.id = _data[this.NODE_KEY]; // 父id
|
||||
obj[this.NODE_KEY] = ++this.startId; // 节点id：逐次递减id
|
||||
obj.label = _name
|
||||
// 判断字段是否存在
|
||||
if (!_data.children) {
|
||||
this.$set(_data, "children", []);
|
||||
}
|
||||
// 新增数据
|
||||
_data.children.push(obj);
|
||||
// 展开节点
|
||||
if (!_node.expanded) {
|
||||
_node.expanded = true;
|
||||
}
|
||||
},
|
||||
// 新增顶级结点打开事件
|
||||
handleAddTop() {
|
||||
// 添加顶部节点
|
||||
let obj = JSON.parse(JSON.stringify(this.initParam)); // copy参数
|
||||
console.log(obj);
|
||||
obj[this.NODE_KEY] = ++this.startId; // 节点id：逐次递减id
|
||||
obj.label = this.addForm.name;
|
||||
console.log(obj.label)
|
||||
this.setTree.push(obj);
|
||||
},
|
||||
// 新增顶级结点
|
||||
openAddTop() {
|
||||
this.addForm.name = "";
|
||||
this.addDialogVisible = true;
|
||||
this.addDialogTitle = "new";
|
||||
this.addType = 1;
|
||||
},
|
||||
// 点击确定 新增子级菜单
|
||||
addData() {
|
||||
var t = this;
|
||||
this.$refs.addRef.validate(async (valid) => {
|
||||
if (valid) {
|
||||
if (t.addType == 1) {
|
||||
t.handleAddTop();
|
||||
this.addDialogVisible = false;
|
||||
} else if (t.addType == 2) {
|
||||
const obj = JSON.parse(JSON.stringify(t.addForm));
|
||||
// 需要判断新增还是编辑
|
||||
t.handleAdd(t.addNode, t.addDataList, obj.name)
|
||||
this.addDialogVisible = false;
|
||||
}
|
||||
} else {
|
||||
console.log("error submit!!");
|
||||
return false;
|
||||
}
|
||||
});
|
||||
},
|
||||
addHandleClose() {
|
||||
this.addDialogVisible = false;
|
||||
this.$refs.addRef.resetFields();
|
||||
},
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
import Vue from "vue";
|
||||
import App from "./App.vue";
|
||||
import ElementUI from "element-ui";
|
||||
import router from "./router";
|
||||
import "element-ui/lib/theme-chalk/index.css";
|
||||
import store from "./store";
|
||||
import VueContextMenu from 'vue-context-menu';
|
||||
Vue.use(VueContextMenu);
|
||||
Vue.config.productionTip = false;
|
||||
import moment from "moment";
|
||||
//定义一个全局过滤器实现日期格式化
|
||||
Vue.filter("datefmt", function (input, fmtstring) {
|
||||
//当input为时间戳时，需转为Number类型
|
||||
// 使用momentjs这个日期格式化类库实现日期的格式化功能
|
||||
return moment(input).format(fmtstring);
|
||||
});
|
||||
Vue.prototype.$moment = moment;
|
||||
Vue.prototype.$store = store;
|
||||
Vue.use(ElementUI);
|
||||
new Vue({
|
||||
router,
|
||||
render: (h) => h(App),
|
||||
}).$mount("#app");
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
import Vue from "vue";
|
||||
import App from "./App.vue";
|
||||
import ElementUI from "element-ui";
|
||||
import router from "./router";
|
||||
import "element-ui/lib/theme-chalk/index.css";
|
||||
import store from "./store";
|
||||
Vue.config.productionTip = false;
|
||||
import moment from "moment";
|
||||
//定义一个全局过滤器实现日期格式化
|
||||
Vue.filter("datefmt", function (input, fmtstring) {
|
||||
//当input为时间戳时，需转为Number类型
|
||||
// 使用momentjs这个日期格式化类库实现日期的格式化功能
|
||||
return moment(input).format(fmtstring);
|
||||
});
|
||||
Vue.prototype.$moment = moment;
|
||||
Vue.prototype.$store = store;
|
||||
Vue.use(ElementUI);
|
||||
new Vue({
|
||||
router,
|
||||
render: (h) => h(App),
|
||||
}).$mount("#app");
|
||||
|
|
@ -0,0 +1,203 @@
|
|||
<template>
|
||||
<div id="app">
|
||||
<!-- 所有路由跳转链接 -->
|
||||
|
||||
<div class="db_lite" style="background-color: aqua; height: 100px">
|
||||
<router-link to="/cockpit">驾驶舱</router-link>
|
||||
<!-- <router-link to="/ipsetting">IP设置</router-link> -->
|
||||
<router-link to="/wiredgatewayip">db网关-ip配置-有线网关</router-link>
|
||||
<router-link to="/dbcollectiongate"
|
||||
>db有线网关-数据采集配置-有线网关配置</router-link
|
||||
>
|
||||
<router-link to="/channelconfig"
|
||||
>db有线网关-数据采集配置-网口通道配置</router-link
|
||||
>
|
||||
<router-link to="/dbcollectdevice"
|
||||
>db有线网关-数据采集配置-网口设备配置</router-link
|
||||
>
|
||||
<router-link to="/dbcollect"
|
||||
>db有线网关-数据采集配置-网口采集点配置</router-link
|
||||
>
|
||||
<router-link to="/mqttconfig"
|
||||
>db有线网关-MQTT上云-网口MQTT1配置</router-link
|
||||
>
|
||||
<!--db无线网关配置 -->
|
||||
<router-link to="/wirelessgatewayip">db网关-ip配置-无线网关</router-link>
|
||||
<router-link to="/dbcollectionwifi"
|
||||
>db无线网关-数据采集配置-网关配置配置</router-link
|
||||
>
|
||||
<router-link to="/dbcollectserial"
|
||||
>db无线网关-数据采集配置-串口通道配置</router-link
|
||||
>
|
||||
<router-link to="/dbserialdevice"
|
||||
>db无线网关-数据采集配置-串口设备配置</router-link
|
||||
>
|
||||
<router-link to="/dbwificollect"
|
||||
>db无线网关-数据采集配置-网口采集点配置</router-link
|
||||
>
|
||||
<router-link to="/mqttconfigwifi"
|
||||
>db无线网关-MQTT上云-网口MQTT1配置</router-link
|
||||
>
|
||||
</div>
|
||||
<div class="chihou" style="background-color: aqua; height: 100px">
|
||||
<router-link to="/chwiredgatewayip"
|
||||
>斥候工业网关-ip配置-有线网关</router-link
|
||||
>
|
||||
<router-link to="/gatewayconfiguration"
|
||||
>斥候有线工业网关-数据采集配置-网关配置</router-link
|
||||
>
|
||||
<router-link to="/configuration"
|
||||
>斥候有线工业网关-数据采集配置-设备配置</router-link
|
||||
>
|
||||
<router-link to="/collectionpoint"
|
||||
>斥候有线工业网关-数据采集配置-采集点配置</router-link
|
||||
>
|
||||
<router-link to="/chmqtt"
|
||||
>斥候有线工业网关-数据上云配置-MQTT上云</router-link
|
||||
>
|
||||
|
||||
<router-link to="/chwirelessgatewayip"
|
||||
>斥候工业网关-ip配置-无线网关</router-link
|
||||
>
|
||||
<router-link to="/chiwifigate"
|
||||
>斥候无线工业网关-数据采集配置-网关配置</router-link
|
||||
>
|
||||
<router-link to="/chiwifidevice"
|
||||
>斥候无线工业网关-数据采集配置-设备配置</router-link
|
||||
>
|
||||
<router-link to="/chiwificollect"
|
||||
>斥候无线工业网关-数据采集配置-采集点配置</router-link
|
||||
>
|
||||
<router-link to="/chiwifimqtt"
|
||||
>斥候无线工业网关-数据上云配置-MQTT上云</router-link
|
||||
>
|
||||
</div>
|
||||
<div class="serial" style="background-color: aqua; height: 100px">
|
||||
<router-link to="/ckipconfig">串口服务器-Ip配置</router-link>
|
||||
<router-link to="/ckportconfig">串口服务器-端口配置</router-link>
|
||||
<router-link to="/towifi"
|
||||
>串口服务器-485towifi-串口及网络协议设置</router-link
|
||||
>
|
||||
<router-link to="/cknet">串口服务器-485towifi-网口配置</router-link>
|
||||
<router-link to="/ckwireless">串口服务器-485towifi-无线配置</router-link>
|
||||
<router-link to="/networkmanagement">工业网闸配置-网络管理</router-link>
|
||||
<router-link to="/objmanagement">工业网闸配置-对象管理</router-link>
|
||||
<router-link to="/strategyManagement">工业网闸配置-策略管理</router-link>
|
||||
<router-link to="/addstrategy"
|
||||
>工业网闸配置-策略管理-添加策略</router-link
|
||||
>
|
||||
<router-link to="/ntconfig">网络优化-网关配置</router-link>
|
||||
<router-link to="/ntmaintenance">网络优化-网关维护</router-link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ceshi from '@/components/ceshi.vue';
|
||||
export default {
|
||||
name: "App",
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
created() {
|
||||
localStorage.setItem(
|
||||
"tree",
|
||||
JSON.stringify([
|
||||
{
|
||||
label: "Gateway",
|
||||
id: 1,
|
||||
editing: true,
|
||||
children: [
|
||||
{
|
||||
label: "数据采集",
|
||||
id: 11,
|
||||
children: [
|
||||
{
|
||||
label: "I/O点",
|
||||
id: 111,
|
||||
},
|
||||
{
|
||||
label: "用户点",
|
||||
id: 112,
|
||||
},
|
||||
{
|
||||
label: "计算点",
|
||||
id: 113,
|
||||
},
|
||||
{
|
||||
label: "系统点",
|
||||
id: 114,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "数据服务",
|
||||
id: 12,
|
||||
children: [
|
||||
{
|
||||
label: "Modbus",
|
||||
id: 121,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "IOT",
|
||||
id: 13,
|
||||
children: [
|
||||
{
|
||||
label: "Mqtt Client",
|
||||
id: 131,
|
||||
},
|
||||
{
|
||||
label: "Alink",
|
||||
id: 132,
|
||||
},
|
||||
{
|
||||
label: "Tlink",
|
||||
id: 133,
|
||||
},
|
||||
{
|
||||
label: "loTDDC",
|
||||
id: 134,
|
||||
},
|
||||
{
|
||||
label: "Ulink",
|
||||
id: 135,
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
])
|
||||
);
|
||||
},
|
||||
methods: {},
|
||||
components: {},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#app {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.db_lite,
|
||||
.chihou,
|
||||
.serial {
|
||||
font-size: 18px;
|
||||
width: 100%;
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: flex-start;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,205 @@
|
|||
<template>
|
||||
<div id="app">
|
||||
<!-- 所有路由跳转链接 -->
|
||||
|
||||
<div class="db_lite" style="background-color: aqua; height: 100px">
|
||||
<router-link to="/cockpit">驾驶舱</router-link>
|
||||
<!-- <router-link to="/ipsetting">IP设置</router-link> -->
|
||||
<router-link to="/wiredgatewayip">db网关-ip配置-有线网关</router-link>
|
||||
<router-link to="/dbcollectiongate"
|
||||
>db有线网关-数据采集配置-有线网关配置</router-link
|
||||
>
|
||||
<router-link to="/channelconfig"
|
||||
>db有线网关-数据采集配置-网口通道配置</router-link
|
||||
>
|
||||
<router-link to="/dbcollectdevice"
|
||||
>db有线网关-数据采集配置-网口设备配置</router-link
|
||||
>
|
||||
<router-link to="/dbcollect"
|
||||
>db有线网关-数据采集配置-网口采集点配置</router-link
|
||||
>
|
||||
<router-link to="/mqttconfig"
|
||||
>db有线网关-MQTT上云-网口MQTT1配置</router-link
|
||||
>
|
||||
<!--db无线网关配置 -->
|
||||
<router-link to="/wirelessgatewayip">db网关-ip配置-无线网关</router-link>
|
||||
<router-link to="/dbcollectionwifi"
|
||||
>db无线网关-数据采集配置-网关配置配置</router-link
|
||||
>
|
||||
<router-link to="/dbcollectserial"
|
||||
>db无线网关-数据采集配置-串口通道配置</router-link
|
||||
>
|
||||
<router-link to="/dbserialdevice"
|
||||
>db无线网关-数据采集配置-串口设备配置</router-link
|
||||
>
|
||||
<router-link to="/dbwificollect"
|
||||
>db无线网关-数据采集配置-网口采集点配置</router-link
|
||||
>
|
||||
<router-link to="/mqttconfigwifi"
|
||||
>db无线网关-MQTT上云-网口MQTT1配置</router-link
|
||||
>
|
||||
</div>
|
||||
<div class="chihou" style="background-color: aqua; height: 100px">
|
||||
<router-link to="/chwiredgatewayip"
|
||||
>斥候工业网关-ip配置-有线网关</router-link
|
||||
>
|
||||
<router-link to="/gatewayconfiguration"
|
||||
>斥候有线工业网关-数据采集配置-网关配置</router-link
|
||||
>
|
||||
<router-link to="/configuration"
|
||||
>斥候有线工业网关-数据采集配置-设备配置</router-link
|
||||
>
|
||||
<router-link to="/collectionpoint"
|
||||
>斥候有线工业网关-数据采集配置-采集点配置</router-link
|
||||
>
|
||||
<router-link to="/chmqtt"
|
||||
>斥候有线工业网关-数据上云配置-MQTT上云</router-link
|
||||
>
|
||||
|
||||
<router-link to="/chwirelessgatewayip"
|
||||
>斥候工业网关-ip配置-无线网关</router-link
|
||||
>
|
||||
<router-link to="/chiwifigate"
|
||||
>斥候无线工业网关-数据采集配置-网关配置</router-link
|
||||
>
|
||||
<router-link to="/chiwifidevice"
|
||||
>斥候无线工业网关-数据采集配置-设备配置</router-link
|
||||
>
|
||||
<router-link to="/chiwificollect"
|
||||
>斥候无线工业网关-数据采集配置-采集点配置</router-link
|
||||
>
|
||||
<router-link to="/chiwifimqtt"
|
||||
>斥候无线工业网关-数据上云配置-MQTT上云</router-link
|
||||
>
|
||||
</div>
|
||||
<div class="serial" style="background-color: aqua; height: 100px">
|
||||
<router-link to="/ckipconfig">串口服务器-Ip配置</router-link>
|
||||
<router-link to="/ckportconfig">串口服务器-端口配置</router-link>
|
||||
<router-link to="/towifi"
|
||||
>串口服务器-485towifi-串口及网络协议设置</router-link
|
||||
>
|
||||
<router-link to="/cknet">串口服务器-485towifi-网口配置</router-link>
|
||||
<router-link to="/ckwireless">串口服务器-485towifi-无线配置</router-link>
|
||||
<router-link to="/networkmanagement">工业网闸配置-网络管理</router-link>
|
||||
<router-link to="/objmanagement">工业网闸配置-对象管理</router-link>
|
||||
<router-link to="/strategyManagement">工业网闸配置-策略管理</router-link>
|
||||
<router-link to="/addstrategy"
|
||||
>工业网闸配置-策略管理-添加策略</router-link
|
||||
>
|
||||
<router-link to="/ntconfig">网络优化-网关配置</router-link>
|
||||
<router-link to="/ntmaintenance">网络优化-网关维护</router-link>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ceshi from '@/components/ceshi.vue';
|
||||
export default {
|
||||
name: "App",
|
||||
components:{
|
||||
ceshi
|
||||
},
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
created() {
|
||||
localStorage.setItem(
|
||||
"tree",
|
||||
JSON.stringify([
|
||||
{
|
||||
label: "Gateway",
|
||||
id: 1,
|
||||
editing: true,
|
||||
children: [
|
||||
{
|
||||
label: "数据采集",
|
||||
id: 11,
|
||||
children: [
|
||||
{
|
||||
label: "I/O点",
|
||||
id: 111,
|
||||
},
|
||||
{
|
||||
label: "用户点",
|
||||
id: 112,
|
||||
},
|
||||
{
|
||||
label: "计算点",
|
||||
id: 113,
|
||||
},
|
||||
{
|
||||
label: "系统点",
|
||||
id: 114,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "数据服务",
|
||||
id: 12,
|
||||
children: [
|
||||
{
|
||||
label: "Modbus",
|
||||
id: 121,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "IOT",
|
||||
id: 13,
|
||||
children: [
|
||||
{
|
||||
label: "Mqtt Client",
|
||||
id: 131,
|
||||
},
|
||||
{
|
||||
label: "Alink",
|
||||
id: 132,
|
||||
},
|
||||
{
|
||||
label: "Tlink",
|
||||
id: 133,
|
||||
},
|
||||
{
|
||||
label: "loTDDC",
|
||||
id: 134,
|
||||
},
|
||||
{
|
||||
label: "Ulink",
|
||||
id: 135,
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
])
|
||||
);
|
||||
},
|
||||
methods: {},
|
||||
components: {},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#app {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.db_lite,
|
||||
.chihou,
|
||||
.serial {
|
||||
font-size: 18px;
|
||||
width: 100%;
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: flex-start;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,206 @@
|
|||
<template>
|
||||
<div id="app">
|
||||
<!-- 所有路由跳转链接 -->
|
||||
|
||||
<div class="db_lite" style="background-color: aqua; height: 100px">
|
||||
<router-link to="/cockpit">驾驶舱</router-link>
|
||||
<!-- <router-link to="/ipsetting">IP设置</router-link> -->
|
||||
<router-link to="/wiredgatewayip">db网关-ip配置-有线网关</router-link>
|
||||
<router-link to="/dbcollectiongate"
|
||||
>db有线网关-数据采集配置-有线网关配置</router-link
|
||||
>
|
||||
<router-link to="/channelconfig"
|
||||
>db有线网关-数据采集配置-网口通道配置</router-link
|
||||
>
|
||||
<router-link to="/dbcollectdevice"
|
||||
>db有线网关-数据采集配置-网口设备配置</router-link
|
||||
>
|
||||
<router-link to="/dbcollect"
|
||||
>db有线网关-数据采集配置-网口采集点配置</router-link
|
||||
>
|
||||
<router-link to="/mqttconfig"
|
||||
>db有线网关-MQTT上云-网口MQTT1配置</router-link
|
||||
>
|
||||
<!--db无线网关配置 -->
|
||||
<router-link to="/wirelessgatewayip">db网关-ip配置-无线网关</router-link>
|
||||
<router-link to="/dbcollectionwifi"
|
||||
>db无线网关-数据采集配置-网关配置配置</router-link
|
||||
>
|
||||
<router-link to="/dbcollectserial"
|
||||
>db无线网关-数据采集配置-串口通道配置</router-link
|
||||
>
|
||||
<router-link to="/dbserialdevice"
|
||||
>db无线网关-数据采集配置-串口设备配置</router-link
|
||||
>
|
||||
<router-link to="/dbwificollect"
|
||||
>db无线网关-数据采集配置-网口采集点配置</router-link
|
||||
>
|
||||
<router-link to="/mqttconfigwifi"
|
||||
>db无线网关-MQTT上云-网口MQTT1配置</router-link
|
||||
>
|
||||
</div>
|
||||
<div class="chihou" style="background-color: aqua; height: 100px">
|
||||
<router-link to="/chwiredgatewayip"
|
||||
>斥候工业网关-ip配置-有线网关</router-link
|
||||
>
|
||||
<router-link to="/gatewayconfiguration"
|
||||
>斥候有线工业网关-数据采集配置-网关配置</router-link
|
||||
>
|
||||
<router-link to="/configuration"
|
||||
>斥候有线工业网关-数据采集配置-设备配置</router-link
|
||||
>
|
||||
<router-link to="/collectionpoint"
|
||||
>斥候有线工业网关-数据采集配置-采集点配置</router-link
|
||||
>
|
||||
<router-link to="/chmqtt"
|
||||
>斥候有线工业网关-数据上云配置-MQTT上云</router-link
|
||||
>
|
||||
|
||||
<router-link to="/chwirelessgatewayip"
|
||||
>斥候工业网关-ip配置-无线网关</router-link
|
||||
>
|
||||
<router-link to="/chiwifigate"
|
||||
>斥候无线工业网关-数据采集配置-网关配置</router-link
|
||||
>
|
||||
<router-link to="/chiwifidevice"
|
||||
>斥候无线工业网关-数据采集配置-设备配置</router-link
|
||||
>
|
||||
<router-link to="/chiwificollect"
|
||||
>斥候无线工业网关-数据采集配置-采集点配置</router-link
|
||||
>
|
||||
<router-link to="/chiwifimqtt"
|
||||
>斥候无线工业网关-数据上云配置-MQTT上云</router-link
|
||||
>
|
||||
</div>
|
||||
<div class="serial" style="background-color: aqua; height: 100px">
|
||||
<router-link to="/ckipconfig">串口服务器-Ip配置</router-link>
|
||||
<router-link to="/ckportconfig">串口服务器-端口配置</router-link>
|
||||
<router-link to="/towifi"
|
||||
>串口服务器-485towifi-串口及网络协议设置</router-link
|
||||
>
|
||||
<router-link to="/cknet">串口服务器-485towifi-网口配置</router-link>
|
||||
<router-link to="/ckwireless">串口服务器-485towifi-无线配置</router-link>
|
||||
<router-link to="/networkmanagement">工业网闸配置-网络管理</router-link>
|
||||
<router-link to="/objmanagement">工业网闸配置-对象管理</router-link>
|
||||
<router-link to="/strategyManagement">工业网闸配置-策略管理</router-link>
|
||||
<router-link to="/addstrategy"
|
||||
>工业网闸配置-策略管理-添加策略</router-link
|
||||
>
|
||||
<router-link to="/ntconfig">网络优化-网关配置</router-link>
|
||||
<router-link to="/ntmaintenance">网络优化-网关维护</router-link>
|
||||
</div>
|
||||
<Ceshi></Ceshi>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import Ceshi from '@/components/ceshi.vue';
|
||||
import ceshi from '@/components/ceshi.vue';
|
||||
export default {
|
||||
name: "App",
|
||||
components:{
|
||||
ceshi
|
||||
},
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
created() {
|
||||
localStorage.setItem(
|
||||
"tree",
|
||||
JSON.stringify([
|
||||
{
|
||||
label: "Gateway",
|
||||
id: 1,
|
||||
editing: true,
|
||||
children: [
|
||||
{
|
||||
label: "数据采集",
|
||||
id: 11,
|
||||
children: [
|
||||
{
|
||||
label: "I/O点",
|
||||
id: 111,
|
||||
},
|
||||
{
|
||||
label: "用户点",
|
||||
id: 112,
|
||||
},
|
||||
{
|
||||
label: "计算点",
|
||||
id: 113,
|
||||
},
|
||||
{
|
||||
label: "系统点",
|
||||
id: 114,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "数据服务",
|
||||
id: 12,
|
||||
children: [
|
||||
{
|
||||
label: "Modbus",
|
||||
id: 121,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "IOT",
|
||||
id: 13,
|
||||
children: [
|
||||
{
|
||||
label: "Mqtt Client",
|
||||
id: 131,
|
||||
},
|
||||
{
|
||||
label: "Alink",
|
||||
id: 132,
|
||||
},
|
||||
{
|
||||
label: "Tlink",
|
||||
id: 133,
|
||||
},
|
||||
{
|
||||
label: "loTDDC",
|
||||
id: 134,
|
||||
},
|
||||
{
|
||||
label: "Ulink",
|
||||
id: 135,
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
])
|
||||
);
|
||||
},
|
||||
methods: {},
|
||||
components: { Ceshi },
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#app {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.db_lite,
|
||||
.chihou,
|
||||
.serial {
|
||||
font-size: 18px;
|
||||
width: 100%;
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: flex-start;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,161 @@
|
|||
<template>
|
||||
<div id="app">
|
||||
<!-- 所有路由跳转链接 -->
|
||||
|
||||
<div class="db_lite" style="background-color: aqua; height: 100px">
|
||||
<router-link to="/cockpit">驾驶舱</router-link>
|
||||
<!-- <router-link to="/ipsetting">IP设置</router-link> -->
|
||||
<router-link to="/wiredgatewayip">db网关-ip配置-有线网关</router-link>
|
||||
<router-link to="/dbcollectiongate">db有线网关-数据采集配置-有线网关配置</router-link>
|
||||
<router-link to="/channelconfig">db有线网关-数据采集配置-网口通道配置</router-link>
|
||||
<router-link to="/dbcollectdevice">db有线网关-数据采集配置-网口设备配置</router-link>
|
||||
<router-link to="/dbcollect">db有线网关-数据采集配置-网口采集点配置</router-link>
|
||||
<router-link to="/mqttconfig">db有线网关-MQTT上云-网口MQTT1配置</router-link>
|
||||
<!--db无线网关配置 -->
|
||||
<router-link to="/wirelessgatewayip">db网关-ip配置-无线网关</router-link>
|
||||
<router-link to="/dbcollectionwifi">db无线网关-数据采集配置-网关配置配置</router-link>
|
||||
<router-link to="/dbcollectserial">db无线网关-数据采集配置-串口通道配置</router-link>
|
||||
<router-link to="/dbserialdevice">db无线网关-数据采集配置-串口设备配置</router-link>
|
||||
<router-link to="/dbwificollect">db无线网关-数据采集配置-网口采集点配置</router-link>
|
||||
<router-link to="/mqttconfigwifi">db无线网关-MQTT上云-网口MQTT1配置</router-link>
|
||||
</div>
|
||||
<div class="chihou" style="background-color: aqua; height: 100px">
|
||||
<router-link to="/chwiredgatewayip">斥候工业网关-ip配置-有线网关</router-link>
|
||||
<router-link to="/gatewayconfiguration">斥候有线工业网关-数据采集配置-网关配置</router-link>
|
||||
<router-link to="/configuration">斥候有线工业网关-数据采集配置-设备配置</router-link>
|
||||
<router-link to="/collectionpoint">斥候有线工业网关-数据采集配置-采集点配置</router-link>
|
||||
<router-link to="/chmqtt">斥候有线工业网关-数据上云配置-MQTT上云</router-link>
|
||||
|
||||
<router-link to="/chwirelessgatewayip">斥候工业网关-ip配置-无线网关</router-link>
|
||||
<router-link to="/chiwifigate">斥候无线工业网关-数据采集配置-网关配置</router-link>
|
||||
<router-link to="/chiwifidevice">斥候无线工业网关-数据采集配置-设备配置</router-link>
|
||||
<router-link to="/chiwificollect">斥候无线工业网关-数据采集配置-采集点配置</router-link>
|
||||
<router-link to="/chiwifimqtt">斥候无线工业网关-数据上云配置-MQTT上云</router-link>
|
||||
</div>
|
||||
<div class="serial" style="background-color: aqua; height: 100px">
|
||||
<router-link to="/ckipconfig">串口服务器-Ip配置</router-link>
|
||||
<router-link to="/ckportconfig">串口服务器-端口配置</router-link>
|
||||
<router-link to="/towifi">串口服务器-485towifi-串口及网络协议设置</router-link>
|
||||
<router-link to="/cknet">串口服务器-485towifi-网口配置</router-link>
|
||||
<router-link to="/ckwireless">串口服务器-485towifi-无线配置</router-link>
|
||||
<router-link to="/networkmanagement">工业网闸配置-网络管理</router-link>
|
||||
<router-link to="/objmanagement">工业网闸配置-对象管理</router-link>
|
||||
<router-link to="/strategyManagement">工业网闸配置-策略管理</router-link>
|
||||
<router-link to="/addstrategy">工业网闸配置-策略管理-添加策略</router-link>
|
||||
<router-link to="/ntconfig">网络优化-网关配置</router-link>
|
||||
<router-link to="/ntmaintenance">网络优化-网关维护</router-link>
|
||||
</div>
|
||||
<ceshi></ceshi>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
// import Ceshi from '@/components/ceshi.vue';
|
||||
import ceshi from '@/components/ceshi.vue';
|
||||
export default {
|
||||
name: "App",
|
||||
components: {
|
||||
ceshi
|
||||
},
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
created() {
|
||||
localStorage.setItem(
|
||||
"tree",
|
||||
JSON.stringify([
|
||||
{
|
||||
label: "Gateway",
|
||||
id: 1,
|
||||
editing: true,
|
||||
children: [
|
||||
{
|
||||
label: "数据采集",
|
||||
id: 11,
|
||||
children: [
|
||||
{
|
||||
label: "I/O点",
|
||||
id: 111,
|
||||
},
|
||||
{
|
||||
label: "用户点",
|
||||
id: 112,
|
||||
},
|
||||
{
|
||||
label: "计算点",
|
||||
id: 113,
|
||||
},
|
||||
{
|
||||
label: "系统点",
|
||||
id: 114,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "数据服务",
|
||||
id: 12,
|
||||
children: [
|
||||
{
|
||||
label: "Modbus",
|
||||
id: 121,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "IOT",
|
||||
id: 13,
|
||||
children: [
|
||||
{
|
||||
label: "Mqtt Client",
|
||||
id: 131,
|
||||
},
|
||||
{
|
||||
label: "Alink",
|
||||
id: 132,
|
||||
},
|
||||
{
|
||||
label: "Tlink",
|
||||
id: 133,
|
||||
},
|
||||
{
|
||||
label: "loTDDC",
|
||||
id: 134,
|
||||
},
|
||||
{
|
||||
label: "Ulink",
|
||||
id: 135,
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
])
|
||||
);
|
||||
},
|
||||
methods: {},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#app {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.db_lite,
|
||||
.chihou,
|
||||
.serial {
|
||||
font-size: 18px;
|
||||
width: 100%;
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: flex-start;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -43,7 +43,7 @@
|
|||
<script>
|
||||
import { SaveUserAnswer, GetUserAnswer } from "@/api/user";
|
||||
export default {
|
||||
name: "TestDataAcquisition",
|
||||
name: "DataAcquire",
|
||||
|
||||
data() {
|
||||
return {
|
||||
|
|
|
|||
|
|
@ -162,10 +162,12 @@ export default {
|
|||
this.loading = false;
|
||||
console.log(res2);
|
||||
let res3 = JSON.parse(res2.data.data.mark_value);
|
||||
if (res3.wgpz_wgid) {
|
||||
this.formData.wgpz_wgid = res3.wgpz_wgid;
|
||||
console.log(this.formData.wgpz_wgid);
|
||||
this.formData.wgpz_wgmc = res3.wgpz_wgmc;
|
||||
this.formData.wgpz_wglx = res3.wgpz_wglx;
|
||||
}
|
||||
},
|
||||
},
|
||||
created() {
|
||||
|
|
|
|||
|
|
@ -754,17 +754,34 @@ export default {
|
|||
this.formData.tdpz_qdmc = data.label;
|
||||
},
|
||||
async saveGate() {
|
||||
var obj = {
|
||||
tdpz_tdmc: this.formData.tdpz_tdmc,
|
||||
tdpz_td: this.formData.tdpz_td,
|
||||
tdpz_qdmc: this.formData.tdpz_qdmc,
|
||||
tdpz_port: this.formData.tdpz_port,
|
||||
tdpz_chuankou: this.formData.tdpz_chuankou,
|
||||
tdpz_btl: this.formData.tdpz_btl,
|
||||
tdpz_sjw: this.formData.tdpz_sjw,
|
||||
tdpz_tzw: this.formData.tdpz_tzw,
|
||||
tdpz_jojy: this.formData.tdpz_jojy,
|
||||
tdpz_ccsj: this.formData.tdpz_cssj,
|
||||
tdpz_jgsj: this.formData.tdpz_jgsj,
|
||||
tdpz_lxsj: this.formData.tdpz_lxsj,
|
||||
tdpz_cfcs: this.formData.tdpz_cfcs,
|
||||
tdpz_watchtime: String(Number(this.formData.tdpz_watchtime)),
|
||||
tdpz_cjsylxdz: String(Number(this.formData.tdpz_cjsylxdz)),
|
||||
tdpz_dxzkb: this.tdpz_dxzkb1 + ":" + this.tdpz_dxzkb2,
|
||||
tdpz_050F: this.formData.tdpz_050F,
|
||||
tdpz_0610: this.formData.tdpz_0610,
|
||||
}
|
||||
this.add_passage = false;
|
||||
this.formData.tdpz_dxzkb = this.tdpz_dxzkb1 + ":" + this.tdpz_dxzkb2;
|
||||
this.formData.tdpz_watchtime = String(Number(this.formData.tdpz_watchtime));
|
||||
this.formData.tdpz_cjsylxdz = String(Number(this.formData.tdpz_cjsylxdz));
|
||||
let datas = sessionStorage.getItem("DB-IotLite_wx");
|
||||
// console.log(this.formData);
|
||||
this.formData = { ...JSON.parse(datas), ...this.formData };
|
||||
datas = { ...JSON.parse(datas), ...obj };
|
||||
let res = await SaveUserAnswer({
|
||||
mark: "DB-IotLite_wx",
|
||||
user_id: "USER202307301109254198",
|
||||
mark_value: JSON.stringify(this.formData),
|
||||
mark_value: JSON.stringify(datas),
|
||||
});
|
||||
if (res.status == 200) {
|
||||
this.$message({
|
||||
|
|
@ -772,7 +789,7 @@ export default {
|
|||
type: 'success'
|
||||
});
|
||||
}
|
||||
sessionStorage.setItem("DB-IotLite_wx", JSON.stringify(this.formData));
|
||||
sessionStorage.setItem("DB-IotLite_wx", JSON.stringify(datas));
|
||||
console.log(res);
|
||||
console.log(res.data.data.mark_value);
|
||||
this.$router.push("/dbserialdevice");
|
||||
|
|
@ -807,8 +824,8 @@ export default {
|
|||
this.tdpz_dxzkb1 = obj.tdpz_dxzkb.split(":")[0];
|
||||
this.tdpz_dxzkb2 = obj.tdpz_dxzkb.split(":")[1];
|
||||
}
|
||||
this.formData.tdpz_watchtime = Boolean(obj.tdpz_watchtime);
|
||||
this.formData.tdpz_cjsylxdz = Boolean(obj.tdpz_cjsylxdz);
|
||||
this.formData.tdpz_watchtime = Boolean(Number(obj.tdpz_watchtime));
|
||||
this.formData.tdpz_cjsylxdz = Boolean(Number(obj.tdpz_cjsylxdz));
|
||||
|
||||
}
|
||||
},
|
||||
|
|
|
|||
|
|
@ -4,46 +4,24 @@
|
|||
<!-- v-click-outside="closeMenu" -->
|
||||
<div>
|
||||
<div class="tree_menu" v-show="dialogVisible">
|
||||
<el-tree
|
||||
:data="$store.state.tree"
|
||||
:props="defaultProps"
|
||||
default-expand-all
|
||||
@node-contextmenu="rightClick"
|
||||
@node-click="treeNodeClick"
|
||||
ref="tree"
|
||||
>
|
||||
<el-tree :data="$store.state.tree" :props="defaultProps" default-expand-all @node-contextmenu="rightClick"
|
||||
@node-click="treeNodeClick" ref="tree">
|
||||
<!-- :render-content="renderContent" -->
|
||||
<span class="custom-tree-node" slot-scope="{ node, data }">
|
||||
<template v-if="data.editing == 1">
|
||||
<el-button
|
||||
type="mini"
|
||||
v-if="flag"
|
||||
style="right: 50px; top: 0; position: absolute; border: none"
|
||||
@click.stop="done"
|
||||
>完成</el-button
|
||||
>
|
||||
<el-button
|
||||
type="mini"
|
||||
style="right: 0; top: 0; position: absolute; border: none"
|
||||
@click.stop="edit"
|
||||
>编辑</el-button
|
||||
>
|
||||
<el-button type="mini" v-if="flag" style="right: 50px; top: 0; position: absolute; border: none"
|
||||
@click.stop="done">完成</el-button>
|
||||
<el-button type="mini" style="right: 0; top: 0; position: absolute; border: none"
|
||||
@click.stop="edit">编辑</el-button>
|
||||
<span v-if="!flag">{{ data.label }}</span>
|
||||
<el-input
|
||||
v-else
|
||||
style="width: 150px"
|
||||
v-model="gateway"
|
||||
></el-input>
|
||||
<el-input v-else style="width: 150px" v-model="gateway"></el-input>
|
||||
</template>
|
||||
<template v-else>{{ data.label }}</template>
|
||||
</span>
|
||||
</el-tree>
|
||||
<!-- 树形控件右键组件 -->
|
||||
<div v-show="menuShow" class="tree_rightmenu" :style="{ ...rightMenu }">
|
||||
<el-menu
|
||||
class="el-menu-vertical-demo"
|
||||
@select="selectMenuNode"
|
||||
default-active="#0078FE"
|
||||
>
|
||||
<el-menu class="el-menu-vertical-demo" @select="selectMenuNode" default-active="#0078FE">
|
||||
<el-menu-item id="menuitem" index="1" style="font-size: 12px">
|
||||
<span slot="title">新建通道</span>
|
||||
</el-menu-item>
|
||||
|
|
@ -55,36 +33,13 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="pas_params">
|
||||
<el-dialog
|
||||
title="通道参数设置"
|
||||
:visible.sync="add_passage"
|
||||
width="765px"
|
||||
v-loading="Loading"
|
||||
>
|
||||
<el-form
|
||||
:model="FormData"
|
||||
:label-position="labelPosition"
|
||||
:rules="rules"
|
||||
ref="ruleForm"
|
||||
>
|
||||
<el-dialog title="通道参数设置" :visible.sync="add_passage" width="765px" v-loading="Loading">
|
||||
<el-form :model="FormData" :label-position="labelPosition" :rules="rules" ref="ruleForm">
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item
|
||||
label="通道名称:"
|
||||
:label-width="formLabelWidth"
|
||||
prop="tdpz_tdmc"
|
||||
>
|
||||
<el-select
|
||||
v-model="FormData.tdpz_tdmc"
|
||||
placeholder=""
|
||||
style="width: 200px; height: 30px"
|
||||
>
|
||||
<el-option
|
||||
v-for="(item, index) in options1"
|
||||
:key="index"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
>
|
||||
<el-form-item label="通道名称:" :label-width="formLabelWidth" prop="tdpz_tdmc">
|
||||
<el-select v-model="FormData.tdpz_tdmc" placeholder="" style="width: 200px; height: 30px">
|
||||
<el-option v-for="(item, index) in options1" :key="index" :label="item.label" :value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
|
@ -92,46 +47,21 @@
|
|||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item
|
||||
label="通道:"
|
||||
:label-width="formLabelWidth"
|
||||
prop="tdpz_td"
|
||||
>
|
||||
<el-select
|
||||
v-model="FormData.tdpz_td"
|
||||
placeholder=""
|
||||
style="width: 200px; height: 30px"
|
||||
>
|
||||
<el-option
|
||||
v-for="(item, index) in options2"
|
||||
:key="index"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
>
|
||||
<el-form-item label="通道:" :label-width="formLabelWidth" prop="tdpz_td">
|
||||
<el-select v-model="FormData.tdpz_td" placeholder="" style="width: 200px; height: 30px">
|
||||
<el-option v-for="(item, index) in options2" :key="index" :label="item.label" :value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item
|
||||
label="驱动名称:"
|
||||
:label-width="formLabelWidth"
|
||||
prop="tdpz_qdmc"
|
||||
>
|
||||
<el-form-item label="驱动名称:" :label-width="formLabelWidth" prop="tdpz_qdmc">
|
||||
<el-row>
|
||||
<el-col :span="18">
|
||||
<el-input
|
||||
v-model="FormData.tdpz_qdmc"
|
||||
placeholder=""
|
||||
style="width: 200px; height: 30px"
|
||||
></el-input>
|
||||
<el-input v-model="FormData.tdpz_qdmc" placeholder="" style="width: 200px; height: 30px"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-button
|
||||
style="width: 50px; height: 30px"
|
||||
@click="getDriveName"
|
||||
>...</el-button
|
||||
>
|
||||
<el-button style="width: 50px; height: 30px" @click="getDriveName">...</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
|
|
@ -139,38 +69,22 @@
|
|||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item
|
||||
label="IP地址:"
|
||||
:label-width="formLabelWidth"
|
||||
prop="tdpz_ip"
|
||||
>
|
||||
<el-form-item label="IP地址:" :label-width="formLabelWidth" prop="tdpz_ip">
|
||||
<el-row>
|
||||
<el-col :span="5">
|
||||
<el-input
|
||||
v-model="tdpz_ip1"
|
||||
style="width: 43px; height: 30px"
|
||||
></el-input>
|
||||
<el-input v-model="tdpz_ip1" style="width: 43px; height: 30px"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1" style="color: #fff">. </el-col>
|
||||
<el-col :span="5">
|
||||
<el-input
|
||||
v-model="tdpz_ip2"
|
||||
style="width: 43px; height: 30px"
|
||||
></el-input>
|
||||
<el-input v-model="tdpz_ip2" style="width: 43px; height: 30px"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1" style="color: #fff">.</el-col>
|
||||
<el-col :span="5">
|
||||
<el-input
|
||||
v-model="tdpz_ip3"
|
||||
style="width: 43px; height: 30px"
|
||||
></el-input>
|
||||
<el-input v-model="tdpz_ip3" style="width: 43px; height: 30px"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1" style="color: #fff">.</el-col>
|
||||
<el-col :span="5">
|
||||
<el-input
|
||||
v-model="tdpz_ip4"
|
||||
style="width: 43px; height: 30px"
|
||||
></el-input>
|
||||
<el-input v-model="tdpz_ip4" style="width: 43px; height: 30px"></el-input>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
|
|
@ -178,72 +92,32 @@
|
|||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item
|
||||
label="端口号:"
|
||||
:label-width="formLabelWidth"
|
||||
prop="tdpz_port"
|
||||
>
|
||||
<el-input
|
||||
v-model="FormData.tdpz_port"
|
||||
placeholder=""
|
||||
style="width: 200px; height: 30px"
|
||||
></el-input>
|
||||
<el-form-item label="端口号:" :label-width="formLabelWidth" prop="tdpz_port">
|
||||
<el-input v-model="FormData.tdpz_port" placeholder="" style="width: 200px; height: 30px"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item
|
||||
label="超过时间(ms):"
|
||||
:label-width="formLabelWidth"
|
||||
prop="tdpz_cssj"
|
||||
>
|
||||
<el-input
|
||||
v-model="FormData.tdpz_cssj"
|
||||
placeholder=""
|
||||
style="width: 200px; height: 30px"
|
||||
></el-input>
|
||||
<el-form-item label="超过时间(ms):" :label-width="formLabelWidth" prop="tdpz_cssj">
|
||||
<el-input v-model="FormData.tdpz_cssj" placeholder="" style="width: 200px; height: 30px"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item
|
||||
label="间隔时间(ms):"
|
||||
:label-width="formLabelWidth"
|
||||
prop="tdpz_jgsj"
|
||||
>
|
||||
<el-input
|
||||
v-model="FormData.tdpz_jgsj"
|
||||
placeholder=""
|
||||
style="width: 200px; height: 30px"
|
||||
></el-input>
|
||||
<el-form-item label="间隔时间(ms):" :label-width="formLabelWidth" prop="tdpz_jgsj">
|
||||
<el-input v-model="FormData.tdpz_jgsj" placeholder="" style="width: 200px; height: 30px"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item
|
||||
label="轮询时间(ms):"
|
||||
:label-width="formLabelWidth"
|
||||
prop="tdpz_lxsj"
|
||||
>
|
||||
<el-input
|
||||
v-model="FormData.tdpz_lxsj"
|
||||
placeholder=""
|
||||
style="width: 200px; height: 30px"
|
||||
></el-input>
|
||||
<el-form-item label="轮询时间(ms):" :label-width="formLabelWidth" prop="tdpz_lxsj">
|
||||
<el-input v-model="FormData.tdpz_lxsj" placeholder="" style="width: 200px; height: 30px"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item
|
||||
label="重复次数:"
|
||||
:label-width="formLabelWidth"
|
||||
prop="tdpz_cfcs"
|
||||
>
|
||||
<el-input
|
||||
v-model="FormData.tdpz_cfcs"
|
||||
placeholder=""
|
||||
style="width: 200px; height: 30px"
|
||||
></el-input>
|
||||
<el-form-item label="重复次数:" :label-width="formLabelWidth" prop="tdpz_cfcs">
|
||||
<el-input v-model="FormData.tdpz_cfcs" placeholder="" style="width: 200px; height: 30px"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
|
@ -253,47 +127,29 @@
|
|||
<div>
|
||||
<i class="el-icon-caret-bottom" v-if="is_retract"></i>
|
||||
<i class="el-icon-caret-top" v-else="is_retract"></i>
|
||||
<el-button
|
||||
type="text"
|
||||
plain
|
||||
@click="getRetract"
|
||||
style="
|
||||
<el-button type="text" plain @click="getRetract" style="
|
||||
width: 28px;
|
||||
border: none;
|
||||
color: rgba(16, 16, 16, 1);
|
||||
font-size: 14px;
|
||||
text-align: left;
|
||||
"
|
||||
>
|
||||
收起</el-button
|
||||
>
|
||||
">
|
||||
收起</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="super_con" v-show="is_retract">
|
||||
<el-form
|
||||
:label-position="labelPosition"
|
||||
:rules="rules"
|
||||
ref="ruleForm"
|
||||
>
|
||||
<el-form :label-position="labelPosition" :rules="rules" ref="ruleForm">
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item>
|
||||
<el-checkbox v-model="FormData.tdpz_watchtime"
|
||||
>watch time(s)</el-checkbox
|
||||
>
|
||||
<el-input
|
||||
v-model="input1"
|
||||
placeholder=""
|
||||
style="width: 200px; height: 30px"
|
||||
:disabled="isdisabled"
|
||||
></el-input>
|
||||
<el-checkbox v-model="FormData.tdpz_watchtime">watch time(s)</el-checkbox>
|
||||
<el-input v-model="input1" placeholder="" style="width: 200px; height: 30px"
|
||||
:disabled="isdisabled"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item>
|
||||
<el-checkbox v-model="FormData.tdpz_cjsylxdz"
|
||||
>采集使用连续地址</el-checkbox
|
||||
>
|
||||
<el-checkbox v-model="FormData.tdpz_cjsylxdz">采集使用连续地址</el-checkbox>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
|
@ -302,17 +158,11 @@
|
|||
<el-form-item label="读写占空比:" :label-width="formLabelWidth">
|
||||
<el-row>
|
||||
<el-col :span="10">
|
||||
<el-input
|
||||
v-model="tdpz_dxzkb1"
|
||||
style="width: 91px; height: 30px"
|
||||
></el-input>
|
||||
<el-input v-model="tdpz_dxzkb1" style="width: 91px; height: 30px"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="4">: </el-col>
|
||||
<el-col :span="10">
|
||||
<el-input
|
||||
v-model="tdpz_dxzkb2"
|
||||
style="width: 91px; height: 30px"
|
||||
></el-input>
|
||||
<el-input v-model="tdpz_dxzkb2" style="width: 91px; height: 30px"></el-input>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
|
|
@ -322,42 +172,18 @@
|
|||
<el-col :span="12">
|
||||
<el-form-item label="05/0F:" :label-width="formLabelWidth">
|
||||
<el-row>
|
||||
<el-col :span="8"
|
||||
><el-radio v-model="FormData.tdpz_050F" label="auto"
|
||||
>auto</el-radio
|
||||
></el-col
|
||||
>
|
||||
<el-col :span="8"
|
||||
><el-radio v-model="FormData.tdpz_050F" label="05"
|
||||
>05</el-radio
|
||||
></el-col
|
||||
>
|
||||
<el-col :span="8"
|
||||
><el-radio v-model="FormData.tdpz_050F" label="0F"
|
||||
>0F</el-radio
|
||||
></el-col
|
||||
>
|
||||
<el-col :span="8"><el-radio v-model="FormData.tdpz_050F" label="auto">auto</el-radio></el-col>
|
||||
<el-col :span="8"><el-radio v-model="FormData.tdpz_050F" label="05">05</el-radio></el-col>
|
||||
<el-col :span="8"><el-radio v-model="FormData.tdpz_050F" label="0F">0F</el-radio></el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="06/10:" :label-width="formLabelWidth">
|
||||
<el-row>
|
||||
<el-col :span="8"
|
||||
><el-radio v-model="FormData.tdpz_0610" label="auto"
|
||||
>auto</el-radio
|
||||
></el-col
|
||||
>
|
||||
<el-col :span="8"
|
||||
><el-radio v-model="FormData.tdpz_0610" label="06"
|
||||
>06</el-radio
|
||||
></el-col
|
||||
>
|
||||
<el-col :span="8"
|
||||
><el-radio v-model="FormData.tdpz_0610" label="10"
|
||||
>10</el-radio
|
||||
></el-col
|
||||
>
|
||||
<el-col :span="8"><el-radio v-model="FormData.tdpz_0610" label="auto">auto</el-radio></el-col>
|
||||
<el-col :span="8"><el-radio v-model="FormData.tdpz_0610" label="06">06</el-radio></el-col>
|
||||
<el-col :span="8"><el-radio v-model="FormData.tdpz_0610" label="10">10</el-radio></el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
|
@ -376,12 +202,7 @@
|
|||
<i class="el-icon-close title_r" @click="diag_drive = false"></i>
|
||||
</div>
|
||||
<el-divider></el-divider>
|
||||
<el-tree
|
||||
:data="datas2"
|
||||
:props="defaultProps"
|
||||
@node-click="handleDetailClick"
|
||||
default-expand-all
|
||||
></el-tree>
|
||||
<el-tree :data="datas2" :props="defaultProps" @node-click="handleDetailClick" default-expand-all></el-tree>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -641,46 +462,46 @@ export default {
|
|||
return value;
|
||||
},
|
||||
async saveGate() {
|
||||
// // 获取 el-tree 实例
|
||||
// const tree = this.$refs.tree;
|
||||
|
||||
// // 构建要新增的子节点
|
||||
// const newNode = {
|
||||
// id: 1111,
|
||||
// label: "子节点1-3",
|
||||
// };
|
||||
|
||||
// // 获取要作为父节点的节点
|
||||
// const parentNode = tree.getNode(1111); // 通过节点 id 获取父节点
|
||||
// console.log(parentNode);
|
||||
// // 使用 append 方法新增子节点
|
||||
// tree.append(newNode, parentNode);
|
||||
|
||||
// this.$refs.tree.append({ id: 1111, label: "1213" }, { id: 1111 });
|
||||
this.add_passage = false;
|
||||
this.FormData.tdpz_dxzkb = this.tdpz_dxzkb1 + ":" + this.tdpz_dxzkb2;
|
||||
this.FormData.tdpz_watchtime = String(
|
||||
Number(this.FormData.tdpz_watchtime)
|
||||
);
|
||||
this.FormData.tdpz_cjsylxdz = String(Number(this.FormData.tdpz_cjsylxdz));
|
||||
this.FormData.tdpz_ip = this.Merge(
|
||||
this.FormData.tdpz_ip,
|
||||
this.tdpz_ip1,
|
||||
this.tdpz_ip2,
|
||||
this.tdpz_ip3,
|
||||
this.tdpz_ip4
|
||||
);
|
||||
var obj = {
|
||||
tdpz_tdmc: this.FormData.tdpz_tdmc,
|
||||
tdpz_td: this.FormData.tdpz_td,
|
||||
tdpz_qdmc: this.FormData.tdpz_qdmc,
|
||||
tdpz_port: this.FormData.tdpz_port,
|
||||
tdpz_ccsj: this.FormData.tdpz_cssj,
|
||||
tdpz_jgsj: this.FormData.tdpz_jgsj,
|
||||
tdpz_ip: this.tdpz_ip1 + "." + this.tdpz_ip2 + "." + this.tdpz_ip3 + "." + this.tdpz_ip4,
|
||||
tdpz_lxsj: this.FormData.tdpz_lxsj,
|
||||
tdpz_cfcs: this.FormData.tdpz_cfcs,
|
||||
tdpz_watchtime: String(Number(this.FormData.tdpz_watchtime)),
|
||||
tdpz_cjsylxdz: String(Number(this.FormData.tdpz_cjsylxdz)),
|
||||
tdpz_dxzkb: this.tdpz_dxzkb1 + ":" + this.tdpz_dxzkb2,
|
||||
tdpz_050F: this.FormData.tdpz_050F,
|
||||
tdpz_0610: this.FormData.tdpz_0610,
|
||||
}
|
||||
let datas = sessionStorage.getItem("DB-IotLite_yx");
|
||||
this.FormData = { ...JSON.parse(datas), ...this.FormData };
|
||||
datas = { ...JSON.parse(datas), ...obj };
|
||||
let res = await SaveUserAnswer({
|
||||
mark: "DB-IotLite_yx",
|
||||
user_id: "USER202307301109254198",
|
||||
mark_value: JSON.stringify(this.FormData),
|
||||
mark_value: JSON.stringify(datas),
|
||||
});
|
||||
sessionStorage.setItem("DB-IotLite_yx", JSON.stringify(this.FormData));
|
||||
if (res.status == 200) {
|
||||
this.$message({
|
||||
message: '保存成功',
|
||||
type: 'success'
|
||||
});
|
||||
}
|
||||
sessionStorage.setItem("DB-IotLite_yx", JSON.stringify(datas));
|
||||
console.log(res);
|
||||
console.log(res.data.data.mark_value);
|
||||
// this.$router.push("/dbcollectdevice");
|
||||
// const newChild = { id: id++, label: `${this.$store.state.tree}`, children: [] };
|
||||
// if (!data.children) {
|
||||
// this.$set(data, 'children', []);
|
||||
// }
|
||||
// data.children.push(newChild);
|
||||
|
||||
},
|
||||
handleDetailClick(data, node, value) {
|
||||
console.log(data.label);
|
||||
|
|
@ -700,9 +521,9 @@ export default {
|
|||
this.tdpz_dxzkb1 = obj.tdpz_dxzkb.split(":")[0];
|
||||
this.tdpz_dxzkb2 = obj.tdpz_dxzkb.split(":")[1];
|
||||
}
|
||||
this.FormData.tdpz_watchtime = Boolean(obj.tdpz_watchtime);
|
||||
this.FormData.tdpz_watchtime = Boolean(Number(obj.tdpz_watchtime));
|
||||
// console.log(this.FormData.tdpz_watchtime);
|
||||
this.FormData.tdpz_cjsylxdz = Boolean(obj.tdpz_cjsylxdz);
|
||||
this.FormData.tdpz_cjsylxdz = Boolean(Number(obj.tdpz_cjsylxdz));
|
||||
if (obj.tdpz_ip) {
|
||||
this.tdpz_ip1 = obj.tdpz_ip.split(".")[0];
|
||||
this.tdpz_ip2 = obj.tdpz_ip.split(".")[1];
|
||||
|
|
@ -720,6 +541,12 @@ export default {
|
|||
this.FormData.tdpz_lxsj = obj.tdpz_lxsj;
|
||||
this.FormData.tdpz_cfcs = obj.tdpz_cfcs;
|
||||
},
|
||||
renderContent(h, { node, data, store }) {
|
||||
return (
|
||||
<span class="custom-tree-node">
|
||||
<span>{node.label}</span>
|
||||
</span>);
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.Loading = true;
|
||||
|
|
|
|||
|
|
@ -1,50 +1,785 @@
|
|||
<template>
|
||||
<!-- <template>
|
||||
<div>
|
||||
<el-tree :data="treeData" :node-key="nodeKey">
|
||||
<!-- 树形节点内容插槽 -->
|
||||
<template slot-scope="{ node, data }">
|
||||
<span class="node-label">{{ data.label }}</span>
|
||||
<el-button @click="addChildNode(node)">添加子节点</el-button>
|
||||
</template>
|
||||
<el-tree :data="data" node-key="id" :props="defaultProps" @node-contextmenu="rightClick" @check="treeCheck">
|
||||
</el-tree>
|
||||
<div id="perTreeMenu" v-if="tmDisplay" class="tree_menu" :style="{ ...rightMenu }">
|
||||
<ul>
|
||||
<li @click="add_passage = true">新增通道</li>
|
||||
<li>取消</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="pas_params">
|
||||
<el-dialog title="通道参数设置" :visible.sync="add_passage" width="765px" v-loading="Loading">
|
||||
<el-form :model="FormData" :label-position="labelPosition" :rules="rules" ref="ruleForm">
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="通道名称:" :label-width="formLabelWidth" prop="tdpz_tdmc">
|
||||
<el-select v-model="FormData.tdpz_tdmc" placeholder="" style="width: 200px; height: 30px">
|
||||
<el-option v-for="(item, index) in options1" :key="index" :label="item.label" :value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="通道:" :label-width="formLabelWidth" prop="tdpz_td">
|
||||
<el-select v-model="FormData.tdpz_td" placeholder="" style="width: 200px; height: 30px">
|
||||
<el-option v-for="(item, index) in options2" :key="index" :label="item.label" :value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="驱动名称:" :label-width="formLabelWidth" prop="tdpz_qdmc">
|
||||
<el-row>
|
||||
<el-col :span="18">
|
||||
<el-input v-model="FormData.tdpz_qdmc" placeholder="" style="width: 200px; height: 30px"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-button style="width: 50px; height: 30px" @click="getDriveName">...</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="IP地址:" :label-width="formLabelWidth" prop="tdpz_ip">
|
||||
<el-row>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="tdpz_ip1" style="width: 43px; height: 30px"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1" style="color: #fff">. </el-col>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="tdpz_ip2" style="width: 43px; height: 30px"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1" style="color: #fff">.</el-col>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="tdpz_ip3" style="width: 43px; height: 30px"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1" style="color: #fff">.</el-col>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="tdpz_ip4" style="width: 43px; height: 30px"></el-input>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="端口号:" :label-width="formLabelWidth" prop="tdpz_port">
|
||||
<el-input v-model="FormData.tdpz_port" placeholder="" style="width: 200px; height: 30px"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="超过时间(ms):" :label-width="formLabelWidth" prop="tdpz_cssj">
|
||||
<el-input v-model="FormData.tdpz_cssj" placeholder="" style="width: 200px; height: 30px"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="间隔时间(ms):" :label-width="formLabelWidth" prop="tdpz_jgsj">
|
||||
<el-input v-model="FormData.tdpz_jgsj" placeholder="" style="width: 200px; height: 30px"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="轮询时间(ms):" :label-width="formLabelWidth" prop="tdpz_lxsj">
|
||||
<el-input v-model="FormData.tdpz_lxsj" placeholder="" style="width: 200px; height: 30px"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="重复次数:" :label-width="formLabelWidth" prop="tdpz_cfcs">
|
||||
<el-input v-model="FormData.tdpz_cfcs" placeholder="" style="width: 200px; height: 30px"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<div class="super_parmams">
|
||||
<h3>高级参数</h3>
|
||||
<div>
|
||||
<i class="el-icon-caret-bottom" v-if="is_retract"></i>
|
||||
<i class="el-icon-caret-top" v-else="is_retract"></i>
|
||||
<el-button type="text" plain @click="getRetract" style="
|
||||
width: 28px;
|
||||
border: none;
|
||||
color: rgba(16, 16, 16, 1);
|
||||
font-size: 14px;
|
||||
text-align: left;
|
||||
">
|
||||
收起</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="super_con" v-show="is_retract">
|
||||
<el-form :label-position="labelPosition" :rules="rules" ref="ruleForm">
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item>
|
||||
<el-checkbox v-model="FormData.tdpz_watchtime">watch time(s)</el-checkbox>
|
||||
<el-input v-model="input1" placeholder="" style="width: 200px; height: 30px"
|
||||
:disabled="isdisabled"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item>
|
||||
<el-checkbox v-model="FormData.tdpz_cjsylxdz">采集使用连续地址</el-checkbox>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="读写占空比:" :label-width="formLabelWidth">
|
||||
<el-row>
|
||||
<el-col :span="10">
|
||||
<el-input v-model="tdpz_dxzkb1" style="width: 91px; height: 30px"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="4">: </el-col>
|
||||
<el-col :span="10">
|
||||
<el-input v-model="tdpz_dxzkb2" style="width: 91px; height: 30px"></el-input>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="05/0F:" :label-width="formLabelWidth">
|
||||
<el-row>
|
||||
<el-col :span="8"><el-radio v-model="FormData.tdpz_050F" label="auto">auto</el-radio></el-col>
|
||||
<el-col :span="8"><el-radio v-model="FormData.tdpz_050F" label="05">05</el-radio></el-col>
|
||||
<el-col :span="8"><el-radio v-model="FormData.tdpz_050F" label="0F">0F</el-radio></el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="06/10:" :label-width="formLabelWidth">
|
||||
<el-row>
|
||||
<el-col :span="8"><el-radio v-model="FormData.tdpz_0610" label="auto">auto</el-radio></el-col>
|
||||
<el-col :span="8"><el-radio v-model="FormData.tdpz_0610" label="06">06</el-radio></el-col>
|
||||
<el-col :span="8"><el-radio v-model="FormData.tdpz_0610" label="10">10</el-radio></el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</div>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="saveGate">保 存</el-button>
|
||||
<el-button @click="add_passage = false">取 消</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
treeData: [
|
||||
flag: false,
|
||||
gateway: JSON.parse(localStorage.getItem("tree"))[0].label,
|
||||
FormData: {
|
||||
tdpz_tdmc: "有线区Channel1",
|
||||
tdpz_td: "网口",
|
||||
tdpz_qdmc: "ModbusTCPClient",
|
||||
tdpz_port: "",
|
||||
tdpz_cssj: "",
|
||||
tdpz_jgsj: "",
|
||||
tdpz_lxsj: "",
|
||||
tdpz_cfcs: "",
|
||||
tdpz_watchtime: true,
|
||||
tdpz_cjsylxdz: false,
|
||||
tdpz_dxzkb: "",
|
||||
tdpz_050F: "auto",
|
||||
tdpz_0610: "auto",
|
||||
},
|
||||
tdpz_dxzkb1: "1",
|
||||
tdpz_dxzkb2: "1",
|
||||
tdpz_ip1: "",
|
||||
tdpz_ip2: "",
|
||||
tdpz_ip3: "",
|
||||
tdpz_ip4: "",
|
||||
options1: [
|
||||
{
|
||||
id: 1,
|
||||
label: "根节点",
|
||||
children: [
|
||||
{ id: 2, label: "子节点 1" },
|
||||
{ id: 3, label: "子节点 2" }
|
||||
]
|
||||
}
|
||||
value: "有线区Channel1",
|
||||
label: "有线区Channel1",
|
||||
},
|
||||
{
|
||||
value: "无线区Channel1",
|
||||
label: "无线区Channel1",
|
||||
},
|
||||
],
|
||||
nodeKey: "id"
|
||||
options2: [
|
||||
{
|
||||
value: "网口",
|
||||
label: "网口",
|
||||
},
|
||||
{
|
||||
value: "串口",
|
||||
label: "串口",
|
||||
},
|
||||
],
|
||||
value1: "有线区Channel1",
|
||||
value2: "网口",
|
||||
diag_drive: false,
|
||||
isdisabled: true,
|
||||
radio: "1",
|
||||
is_retract: true,
|
||||
labelPosition: "left",
|
||||
formLabelWidth: "116px",
|
||||
input1: 192,
|
||||
add_passage: false,
|
||||
rightMenu: "",
|
||||
dialogVisible: true,
|
||||
menuShow: false,
|
||||
datas: [],
|
||||
datas2: [
|
||||
{
|
||||
label: "通用标准",
|
||||
children: [
|
||||
{
|
||||
label: "ModbusTCPClient",
|
||||
},
|
||||
{
|
||||
label: "ModbusRTU_over_TCP",
|
||||
},
|
||||
{
|
||||
label: "OPCUAClient",
|
||||
},
|
||||
{
|
||||
label: "OPCDAClient",
|
||||
},
|
||||
{
|
||||
label: "MQTTClient",
|
||||
},
|
||||
{
|
||||
label: "OPCXMLDAClient",
|
||||
},
|
||||
{
|
||||
label: "环保212协议网口监听",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "PLC",
|
||||
children: [
|
||||
{
|
||||
label: "Slemens S7-200 Network",
|
||||
},
|
||||
{
|
||||
label: "Slemens S7-300 Network",
|
||||
},
|
||||
{
|
||||
label: "Slemens S7-400 Network",
|
||||
},
|
||||
{
|
||||
label: "Slemens S7-1200 Network",
|
||||
},
|
||||
{
|
||||
label: "Slemens S7-1500 Network",
|
||||
},
|
||||
{
|
||||
label: "EtherNet/IP CIP协议(AB OMR ON)",
|
||||
},
|
||||
{
|
||||
label: "MC_Qna-3E(三菱 基恩士 松下)",
|
||||
},
|
||||
{
|
||||
label: "MC_A-1E_Binary",
|
||||
},
|
||||
{
|
||||
label: "OMRON-FINS",
|
||||
},
|
||||
{
|
||||
label: "横河PLC",
|
||||
},
|
||||
{
|
||||
label: "西门子FetchWirte",
|
||||
},
|
||||
{
|
||||
label: "富机 FUJI_SPH_NET",
|
||||
},
|
||||
{
|
||||
label: "基恩士上位链路通讯",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "智能建筑",
|
||||
children: [],
|
||||
},
|
||||
{
|
||||
label: "厂家定制",
|
||||
children: [],
|
||||
},
|
||||
{
|
||||
label: "电力行业标准",
|
||||
children: [
|
||||
{
|
||||
label: "IEC104",
|
||||
},
|
||||
{
|
||||
label: "DLT645_over_TCP",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "CNC数控",
|
||||
children: [],
|
||||
},
|
||||
{
|
||||
label: "私有协议",
|
||||
children: [],
|
||||
},
|
||||
],
|
||||
defaultProps: {
|
||||
children: "children",
|
||||
label: "label",
|
||||
},
|
||||
rules: {
|
||||
tdpz_tdmc: [
|
||||
{ required: true, message: "请输入通道名称", trigger: "change" },
|
||||
],
|
||||
tdpz_td: [{ required: true, message: "请输入通道", trigger: "change" }],
|
||||
tdpz_qdmc: [
|
||||
{ required: true, message: "请输入驱动名称", trigger: "change" },
|
||||
],
|
||||
tdpz_ip: [{ required: true, message: "请输入ip地址", trigger: "blur" }],
|
||||
tdpz_port: [
|
||||
{ required: true, message: "请输入端口号", trigger: "blur" },
|
||||
],
|
||||
tdpz_cssj: [
|
||||
{ required: true, message: "请输入超出时间", trigger: "blur" },
|
||||
],
|
||||
tdpz_jgsj: [
|
||||
{ required: true, message: "请输入间隔时间", trigger: "blur" },
|
||||
],
|
||||
tdpz_lxsj: [
|
||||
{ required: true, message: "请输入轮询时间", trigger: "blur" },
|
||||
],
|
||||
tdpz_cfcs: [
|
||||
{ required: true, message: "请输入重复次数", trigger: "blur" },
|
||||
],
|
||||
},
|
||||
tmDisplay: false,
|
||||
rightMenu: {},
|
||||
node: "",
|
||||
data: [
|
||||
{
|
||||
label: "Gateway",
|
||||
id: 1,
|
||||
editing: true,
|
||||
children: [
|
||||
{
|
||||
label: "数据采集",
|
||||
id: 11,
|
||||
children: [
|
||||
{
|
||||
label: "I/O点",
|
||||
id: 111,
|
||||
},
|
||||
{
|
||||
label: "用户点",
|
||||
id: 112,
|
||||
},
|
||||
{
|
||||
label: "计算点",
|
||||
id: 113,
|
||||
},
|
||||
{
|
||||
label: "系统点",
|
||||
id: 114,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "数据服务",
|
||||
id: 12,
|
||||
children: [
|
||||
{
|
||||
label: "Modbus",
|
||||
id: 121,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "IOT",
|
||||
id: 13,
|
||||
children: [
|
||||
{
|
||||
label: "Mqtt Client",
|
||||
id: 131,
|
||||
},
|
||||
{
|
||||
label: "Alink",
|
||||
id: 132,
|
||||
},
|
||||
{
|
||||
label: "Tlink",
|
||||
id: 133,
|
||||
},
|
||||
{
|
||||
label: "loTDDC",
|
||||
id: 134,
|
||||
},
|
||||
{
|
||||
label: "Ulink",
|
||||
id: 135,
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
dialogVisible: false,
|
||||
newNodeData: {
|
||||
// 新节点的数据，可以根据需求定义
|
||||
// ...
|
||||
},
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
addChildNode(parentNode) {
|
||||
// 创建新的子节点数据
|
||||
const newNode = {
|
||||
id: this.generateUniqueId(), // 为新节点生成唯一标识
|
||||
label: "新子节点"
|
||||
};
|
||||
|
||||
// 将新节点添加到父节点的 children 数组中
|
||||
parentNode.data.children.push(newNode);
|
||||
|
||||
// 触发树形控件重新渲染
|
||||
// 如果使用Vue.js，数据是响应式的，不需要手动触发重新渲染
|
||||
},
|
||||
generateUniqueId() {
|
||||
// 生成唯一标识，例如使用时间戳
|
||||
return new Date().getTime();
|
||||
rightClick(e, data, node, comp) {
|
||||
console.log('e:', e, 'data', data)
|
||||
// this.node = node;
|
||||
// console.log(this.node)
|
||||
console.log(data.id);
|
||||
console.log(comp);
|
||||
this.rightMenu = { top: e.pageY + 'px', left: e.pageX + 'px' }
|
||||
this.tmDisplay = true
|
||||
const self = this
|
||||
document.onclick = function (ev) {
|
||||
if (ev.target !== document.getElementById('perTreeMenu')) {
|
||||
self.tmDisplay = false
|
||||
}
|
||||
}
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.tree_menu {
|
||||
position: fixed;
|
||||
display: block;
|
||||
z-index: 20000;
|
||||
background-color: #fff;
|
||||
padding: 5px 0;
|
||||
border: 1px solid #ebeef5;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
|
||||
|
||||
ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
ul li {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0 15px;
|
||||
font-size: 14px;
|
||||
line-height: 30px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
ul li:hover {
|
||||
background-color: #ebeef5
|
||||
}
|
||||
}
|
||||
</style> -->
|
||||
<template>
|
||||
<div>
|
||||
<el-button class="addBtn" type="primary" size="small" @click="openAddTop">添加顶级节点</el-button>
|
||||
<el-input placeholder="输入关键字进行过滤" v-model="filterText">
|
||||
</el-input>
|
||||
<el-tree ref="SlotTree" :data="setTree" :props="defaultProps" :expand-on-click-node="false" highlight-current
|
||||
:node-key="NODE_KEY">
|
||||
<div class="comp-tr-node" slot-scope="{ node, data }">
|
||||
<!-- 编辑状态 -->
|
||||
<template v-if="node.isEdit">
|
||||
<el-input v-model="data.label" autofocus size="mini" :ref="'slotTreeInput' + data[NODE_KEY]"
|
||||
@blur.stop="handleInput(node, data)" @keyup.enter.native="handleInput(node, data)"></el-input>
|
||||
</template>
|
||||
<!-- 非编辑状态 -->
|
||||
<template v-else>
|
||||
<!-- 名称： 新增节点增加class（is-new） -->
|
||||
<span :class="[
|
||||
data[NODE_KEY] < NODE_ID_START ? 'is-new' : '',
|
||||
'comp-tr-node--name',
|
||||
]">
|
||||
{{ node.label }}
|
||||
</span>
|
||||
|
||||
<!-- 按钮 -->
|
||||
<span class="comp-tr-node--btns">
|
||||
<!-- 新增 -->
|
||||
<el-button type="text" size="mini" @click="appendChild(node, data)">新增</el-button>
|
||||
|
||||
<!-- 编辑 -->
|
||||
<el-button size="mini" type="text" @click="handleEdit(node, data)">编辑</el-button>
|
||||
|
||||
<!-- 删除 -->
|
||||
<el-button size="mini" type="text" @click="handleDelete(node, data)">删除</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</div>
|
||||
</el-tree>
|
||||
<el-dialog :close-on-click-modal="false" :visible.sync="addDialogVisible" width="30%" top="5vh" :show-close="true"
|
||||
:before-close="addHandleClose" :title="addDialogTitle == 'edit' ? '编辑名称' : '新增名称'">
|
||||
<el-form :model="addForm" :rules="addRules" label-width="80px" ref="addRef">
|
||||
<el-form-item label="名称" prop="name">
|
||||
<el-input size="medium" v-model="addForm.name" placeholder="名称" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<span class="dialog-footer">
|
||||
<el-button size="small" @click="addHandleClose">取 消</el-button>
|
||||
<el-button size="small" type="primary" @click="addData">确 定</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
addType: 1,
|
||||
addNode: '',
|
||||
startId: null,
|
||||
setTree: [], // tree数据
|
||||
NODE_KEY: "id", // id对应字段
|
||||
// MAX_LEVEL: 3, // 设定最大层级
|
||||
NODE_ID_START: 0, // 新增节点id，逐次递减
|
||||
startId: null,
|
||||
setTree: [
|
||||
{
|
||||
label: "Gateway",
|
||||
id: 1,
|
||||
editing: true,
|
||||
children: [
|
||||
{
|
||||
label: "数据采集",
|
||||
id: 11,
|
||||
children: [
|
||||
{
|
||||
label: "I/O点",
|
||||
id: 111,
|
||||
},
|
||||
{
|
||||
label: "用户点",
|
||||
id: 112,
|
||||
},
|
||||
{
|
||||
label: "计算点",
|
||||
id: 113,
|
||||
},
|
||||
{
|
||||
label: "系统点",
|
||||
id: 114,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "数据服务",
|
||||
id: 12,
|
||||
children: [
|
||||
{
|
||||
label: "Modbus",
|
||||
id: 121,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "IOT",
|
||||
id: 13,
|
||||
children: [
|
||||
{
|
||||
label: "Mqtt Client",
|
||||
id: 131,
|
||||
},
|
||||
{
|
||||
label: "Alink",
|
||||
id: 132,
|
||||
},
|
||||
{
|
||||
label: "Tlink",
|
||||
id: 133,
|
||||
},
|
||||
{
|
||||
label: "loTDDC",
|
||||
id: 134,
|
||||
},
|
||||
{
|
||||
label: "Ulink",
|
||||
id: 135,
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
defaultProps: {
|
||||
// 默认设置
|
||||
children: "children",
|
||||
label: "label",
|
||||
},
|
||||
addDataList: "",
|
||||
addForm: {
|
||||
name: "",
|
||||
},
|
||||
addRules: {
|
||||
name: [{ required: true, message: "请输入名称", trigger: "blur" }],
|
||||
},
|
||||
addDialogTitle: "new",
|
||||
addDialogVisible: false,
|
||||
// 之前遗忘了这个参数 重新补发
|
||||
initParam: {
|
||||
// 新增参数
|
||||
name: "",
|
||||
id: 0,
|
||||
children: [],
|
||||
},
|
||||
}
|
||||
},
|
||||
created() {
|
||||
// 初始值
|
||||
this.startId = this.NODE_ID_START;
|
||||
},
|
||||
methods: {
|
||||
handleDelete(_node, _data) {
|
||||
// 删除节点
|
||||
console.log(_node, _data);
|
||||
// 判断是否存在子节点
|
||||
if (_data.children && _data.children.length !== 0) {
|
||||
this.$message.error("此节点有子级，不可删除！");
|
||||
return false;
|
||||
} else {
|
||||
// 删除操作
|
||||
let DeletOprate = () => {
|
||||
this.$nextTick(() => {
|
||||
if (this.$refs.SlotTree) {
|
||||
this.$refs.SlotTree.remove(_data);
|
||||
this.$message.success("删除成功！");
|
||||
}
|
||||
});
|
||||
};
|
||||
// 二次确认
|
||||
let ConfirmFun = () => {
|
||||
this.$confirm("是否删除此节点？", "提示", {
|
||||
confirmButtonText: "确认",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning",
|
||||
})
|
||||
.then(() => {
|
||||
DeletOprate();
|
||||
})
|
||||
.catch(() => { });
|
||||
};
|
||||
// 判断是否新增： 新增节点直接删除，已存在的节点要二次确认
|
||||
_data[this.NODE_KEY] < this.NODE_ID_START
|
||||
? DeletOprate()
|
||||
: ConfirmFun();
|
||||
}
|
||||
},
|
||||
handleInput(_node, _data) {
|
||||
// 修改节点
|
||||
console.log(_node, _data);
|
||||
// 退出编辑状态
|
||||
if (_node.isEdit) {
|
||||
this.$set(_node, "isEdit", false);
|
||||
}
|
||||
},
|
||||
handleEdit(_node, _data) {
|
||||
// 编辑节点
|
||||
console.log(_node, _data);
|
||||
// 设置编辑状态
|
||||
if (!_node.isEdit) {
|
||||
this.$set(_node, "isEdit", true);
|
||||
}
|
||||
// 输入框聚焦
|
||||
this.$nextTick(() => {
|
||||
if (this.$refs["slotTreeInput" + _data[this.NODE_KEY]]) {
|
||||
this.$refs["slotTreeInput" + _data[this.NODE_KEY]].$refs.input.focus();
|
||||
}
|
||||
});
|
||||
},
|
||||
// 新增子级节点打开事件
|
||||
appendChild(node, data) {
|
||||
this.addForm.name = "";
|
||||
this.addDialogVisible = true;
|
||||
this.addDialogTitle = "new";
|
||||
this.addDataList = data;
|
||||
this.addNode = node
|
||||
this.addType = 2;
|
||||
},
|
||||
// 新增子级节点
|
||||
handleAdd(_node, _data, _name) {
|
||||
// 新增节点
|
||||
console.log(_node, _data);
|
||||
// 判断层级
|
||||
// if (_node.level >= this.MAX_LEVEL) {
|
||||
// this.$message.warning("当前已达到" + this.MAX_LEVEL + "级，无法新增！");
|
||||
// return false;
|
||||
// }
|
||||
// 参数修改
|
||||
let obj = JSON.parse(JSON.stringify(this.initParam)); // copy参数
|
||||
obj.id = _data[this.NODE_KEY]; // 父id
|
||||
obj[this.NODE_KEY] = ++this.startId; // 节点id：逐次递减id
|
||||
obj.label = _name
|
||||
// 判断字段是否存在
|
||||
if (!_data.children) {
|
||||
this.$set(_data, "children", []);
|
||||
}
|
||||
// 新增数据
|
||||
_data.children.push(obj);
|
||||
// 展开节点
|
||||
if (!_node.expanded) {
|
||||
_node.expanded = true;
|
||||
}
|
||||
},
|
||||
// 新增顶级结点打开事件
|
||||
handleAddTop() {
|
||||
// 添加顶部节点
|
||||
let obj = JSON.parse(JSON.stringify(this.initParam)); // copy参数
|
||||
console.log(obj);
|
||||
obj[this.NODE_KEY] = ++this.startId; // 节点id：逐次递减id
|
||||
obj.label = this.addForm.name;
|
||||
console.log(obj.label)
|
||||
this.setTree.push(obj);
|
||||
},
|
||||
// 新增顶级结点
|
||||
openAddTop() {
|
||||
this.addForm.name = "";
|
||||
this.addDialogVisible = true;
|
||||
this.addDialogTitle = "new";
|
||||
this.addType = 1;
|
||||
},
|
||||
// 点击确定 新增子级菜单
|
||||
addData() {
|
||||
var t = this;
|
||||
this.$refs.addRef.validate(async (valid) => {
|
||||
if (valid) {
|
||||
if (t.addType == 1) {
|
||||
t.handleAddTop();
|
||||
this.addDialogVisible = false;
|
||||
} else if (t.addType == 2) {
|
||||
const obj = JSON.parse(JSON.stringify(t.addForm));
|
||||
// 需要判断新增还是编辑
|
||||
t.handleAdd(t.addNode, t.addDataList, obj.name)
|
||||
this.addDialogVisible = false;
|
||||
}
|
||||
} else {
|
||||
console.log("error submit!!");
|
||||
return false;
|
||||
}
|
||||
});
|
||||
},
|
||||
addHandleClose() {
|
||||
this.addDialogVisible = false;
|
||||
this.$refs.addRef.resetFields();
|
||||
},
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -6,95 +6,56 @@
|
|||
<router-link to="/cockpit">驾驶舱</router-link>
|
||||
<!-- <router-link to="/ipsetting">IP设置</router-link> -->
|
||||
<router-link to="/wiredgatewayip">db网关-ip配置-有线网关</router-link>
|
||||
<router-link to="/dbcollectiongate"
|
||||
>db有线网关-数据采集配置-有线网关配置</router-link
|
||||
>
|
||||
<router-link to="/channelconfig"
|
||||
>db有线网关-数据采集配置-网口通道配置</router-link
|
||||
>
|
||||
<router-link to="/dbcollectdevice"
|
||||
>db有线网关-数据采集配置-网口设备配置</router-link
|
||||
>
|
||||
<router-link to="/dbcollect"
|
||||
>db有线网关-数据采集配置-网口采集点配置</router-link
|
||||
>
|
||||
<router-link to="/mqttconfig"
|
||||
>db有线网关-MQTT上云-网口MQTT1配置</router-link
|
||||
>
|
||||
<router-link to="/dbcollectiongate">db有线网关-数据采集配置-有线网关配置</router-link>
|
||||
<router-link to="/channelconfig">db有线网关-数据采集配置-网口通道配置</router-link>
|
||||
<router-link to="/dbcollectdevice">db有线网关-数据采集配置-网口设备配置</router-link>
|
||||
<router-link to="/dbcollect">db有线网关-数据采集配置-网口采集点配置</router-link>
|
||||
<router-link to="/mqttconfig">db有线网关-MQTT上云-网口MQTT1配置</router-link>
|
||||
<!--db无线网关配置 -->
|
||||
<router-link to="/wirelessgatewayip">db网关-ip配置-无线网关</router-link>
|
||||
<router-link to="/dbcollectionwifi"
|
||||
>db无线网关-数据采集配置-网关配置配置</router-link
|
||||
>
|
||||
<router-link to="/dbcollectserial"
|
||||
>db无线网关-数据采集配置-串口通道配置</router-link
|
||||
>
|
||||
<router-link to="/dbserialdevice"
|
||||
>db无线网关-数据采集配置-串口设备配置</router-link
|
||||
>
|
||||
<router-link to="/dbwificollect"
|
||||
>db无线网关-数据采集配置-网口采集点配置</router-link
|
||||
>
|
||||
<router-link to="/mqttconfigwifi"
|
||||
>db无线网关-MQTT上云-网口MQTT1配置</router-link
|
||||
>
|
||||
<router-link to="/dbcollectionwifi">db无线网关-数据采集配置-网关配置配置</router-link>
|
||||
<router-link to="/dbcollectserial">db无线网关-数据采集配置-串口通道配置</router-link>
|
||||
<router-link to="/dbserialdevice">db无线网关-数据采集配置-串口设备配置</router-link>
|
||||
<router-link to="/dbwificollect">db无线网关-数据采集配置-网口采集点配置</router-link>
|
||||
<router-link to="/mqttconfigwifi">db无线网关-MQTT上云-网口MQTT1配置</router-link>
|
||||
</div>
|
||||
<div class="chihou" style="background-color: aqua; height: 100px">
|
||||
<router-link to="/chwiredgatewayip"
|
||||
>斥候工业网关-ip配置-有线网关</router-link
|
||||
>
|
||||
<router-link to="/gatewayconfiguration"
|
||||
>斥候有线工业网关-数据采集配置-网关配置</router-link
|
||||
>
|
||||
<router-link to="/configuration"
|
||||
>斥候有线工业网关-数据采集配置-设备配置</router-link
|
||||
>
|
||||
<router-link to="/collectionpoint"
|
||||
>斥候有线工业网关-数据采集配置-采集点配置</router-link
|
||||
>
|
||||
<router-link to="/chmqtt"
|
||||
>斥候有线工业网关-数据上云配置-MQTT上云</router-link
|
||||
>
|
||||
<router-link to="/chwiredgatewayip">斥候工业网关-ip配置-有线网关</router-link>
|
||||
<router-link to="/gatewayconfiguration">斥候有线工业网关-数据采集配置-网关配置</router-link>
|
||||
<router-link to="/configuration">斥候有线工业网关-数据采集配置-设备配置</router-link>
|
||||
<router-link to="/collectionpoint">斥候有线工业网关-数据采集配置-采集点配置</router-link>
|
||||
<router-link to="/chmqtt">斥候有线工业网关-数据上云配置-MQTT上云</router-link>
|
||||
|
||||
<router-link to="/chwirelessgatewayip"
|
||||
>斥候工业网关-ip配置-无线网关</router-link
|
||||
>
|
||||
<router-link to="/chiwifigate"
|
||||
>斥候无线工业网关-数据采集配置-网关配置</router-link
|
||||
>
|
||||
<router-link to="/chiwifidevice"
|
||||
>斥候无线工业网关-数据采集配置-设备配置</router-link
|
||||
>
|
||||
<router-link to="/chiwificollect"
|
||||
>斥候无线工业网关-数据采集配置-采集点配置</router-link
|
||||
>
|
||||
<router-link to="/chiwifimqtt"
|
||||
>斥候无线工业网关-数据上云配置-MQTT上云</router-link
|
||||
>
|
||||
<router-link to="/chwirelessgatewayip">斥候工业网关-ip配置-无线网关</router-link>
|
||||
<router-link to="/chiwifigate">斥候无线工业网关-数据采集配置-网关配置</router-link>
|
||||
<router-link to="/chiwifidevice">斥候无线工业网关-数据采集配置-设备配置</router-link>
|
||||
<router-link to="/chiwificollect">斥候无线工业网关-数据采集配置-采集点配置</router-link>
|
||||
<router-link to="/chiwifimqtt">斥候无线工业网关-数据上云配置-MQTT上云</router-link>
|
||||
</div>
|
||||
<div class="serial" style="background-color: aqua; height: 100px">
|
||||
<router-link to="/ckipconfig">串口服务器-Ip配置</router-link>
|
||||
<router-link to="/ckportconfig">串口服务器-端口配置</router-link>
|
||||
<router-link to="/towifi"
|
||||
>串口服务器-485towifi-串口及网络协议设置</router-link
|
||||
>
|
||||
<router-link to="/towifi">串口服务器-485towifi-串口及网络协议设置</router-link>
|
||||
<router-link to="/cknet">串口服务器-485towifi-网口配置</router-link>
|
||||
<router-link to="/ckwireless">串口服务器-485towifi-无线配置</router-link>
|
||||
<router-link to="/networkmanagement">工业网闸配置-网络管理</router-link>
|
||||
<router-link to="/objmanagement">工业网闸配置-对象管理</router-link>
|
||||
<router-link to="/strategyManagement">工业网闸配置-策略管理</router-link>
|
||||
<router-link to="/addstrategy"
|
||||
>工业网闸配置-策略管理-添加策略</router-link
|
||||
>
|
||||
<router-link to="/addstrategy">工业网闸配置-策略管理-添加策略</router-link>
|
||||
<router-link to="/ntconfig">网络优化-网关配置</router-link>
|
||||
<router-link to="/ntmaintenance">网络优化-网关维护</router-link>
|
||||
</div>
|
||||
<ceshi></ceshi>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// import Ceshi from '@/components/ceshi.vue';
|
||||
import ceshi from '@/components/ceshi.vue';
|
||||
export default {
|
||||
name: "App",
|
||||
components: {
|
||||
ceshi
|
||||
},
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
|
|
@ -171,7 +132,6 @@ export default {
|
|||
);
|
||||
},
|
||||
methods: {},
|
||||
components: {},
|
||||
};
|
||||
</script>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue