LLL
This commit is contained in:
lll
commit
3317fc0b8b
|
|
@ -0,0 +1,32 @@
|
|||
<template>
|
||||
<div id="app">
|
||||
<router-view></router-view>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "App",
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
created() {
|
||||
console.log({"state":true,"message":"","data":{"id":"10005","mark":"CKFWQ","topic":"串口服务器","answer":"{\r\n \"ippz_ip_hqfs\": \"Static IP\",\r\n \"ippz_dns_hqfs\": \"手动设定\",\r\n \"ippz_ip\": \"192.168.40.5\",\r\n \"ippz_zwym\": \"255.255.255.192\",\r\n \"ippz_mrwg\": \"192.168.32.1\",\r\n \"ippz_dns_zy\": \"223.5.5.5\",\r\n \"ippz_dns_by\": \"114.114.114.114\",\r\n\r\n\r\n \"dkpz_btl\": \"115200\",\r\n \"dkpz_sjw\": \"8\",\r\n \"dkpz_jyw\": \"无校验（none）\",\r\n \"dkpz_tzw\": \"1\",\r\n \"dkpz_lkms\": \"None\",\r\n \"dkpz_dbcd\": \"0\",\r\n \"dkpz_dbsj\": \"0\",\r\n \"dkpz_tbbtl\": \"启用\",\r\n \"dkpz_snckxtb\": \"\",\r\n\r\n \"ckcssz_btl\": \"9600\",\r\n \"ckcssz_sjw\": \"8\",\r\n \"ckcssz_jyw\": \"无校验（none）\",\r\n \"ckcssz_tzw\": \"1\",\r\n \"ckcssz_lk\": \"关闭\",\r\n \"ckcssz_485\": \"开启\",\r\n \"ckcssz_zdybtl\": \"开启\",\r\n\r\n \"qtsz_ckzdcz\": \"关闭\",\r\n \"qtsz_zcblx\": \"关闭\",\r\n \"qtsz_zdyxtb\": \"关闭\",\r\n \"qtsz_tjzffgn\": \"关闭\",\r\n\r\n\r\n\r\n \"ytwgn_kqwk\": \"开启\",\r\n \"ytwgn_wkgzfs\": \"LAN口\",\r\n \"wkmssz_wkms\": \"n\",\r\n \"wkmssz_sn\": \"\",\r\n\r\n \"wxpz_gzms\": \"STA模式\",\r\n \"wxpz_wlmc\": \"无线区无线网\",\r\n \"wxpz_mac\": \"3C:2D:50:20:30:1A\",\r\n \"wxpz_jmms\": \"WPA2PSK\",\r\n \"wxpz_jmsf\": \"AES\",\r\n \"wxpz_mm\": \"admin1234!\"\r\n\r\n}","update_time":"2023-11-01 15:33:05","r1":"","r2":"","r3":""}})
|
||||
},
|
||||
methods: {},
|
||||
components: {},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#app {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
background-color: #2b2d38;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
<template>
|
||||
<div id="app">
|
||||
<router-view></router-view>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "App",
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
created() {
|
||||
console.log({"state":true,"message":"","data":{"id":"10005","mark":"CKFWQ","topic":"串口服务器","answer":"{\r\n \"ippz_ip_hqfs\": \"Static IP\",\r\n \"ippz_dns_hqfs\": \"手动设定\",\r\n \"ippz_ip\": \"192.168.40.5\",\r\n \"ippz_zwym\": \"255.255.255.192\",\r\n \"ippz_mrwg\": \"192.168.32.1\",\r\n \"ippz_dns_zy\": \"223.5.5.5\",\r\n \"ippz_dns_by\": \"114.114.114.114\",\r\n\r\n\r\n \"dkpz_btl\": \"115200\",\r\n \"dkpz_sjw\": \"8\",\r\n \"dkpz_jyw\": \"无校验（none）\",\r\n \"dkpz_tzw\": \"1\",\r\n \"dkpz_lkms\": \"None\",\r\n \"dkpz_dbcd\": \"0\",\r\n \"dkpz_dbsj\": \"0\",\r\n \"dkpz_tbbtl\": \"启用\",\r\n \"dkpz_snckxtb\": \"\",\r\n\r\n \"ckcssz_btl\": \"9600\",\r\n \"ckcssz_sjw\": \"8\",\r\n \"ckcssz_jyw\": \"无校验（none）\",\r\n \"ckcssz_tzw\": \"1\",\r\n \"ckcssz_lk\": \"关闭\",\r\n \"ckcssz_485\": \"开启\",\r\n \"ckcssz_zdybtl\": \"开启\",\r\n\r\n \"qtsz_ckzdcz\": \"关闭\",\r\n \"qtsz_zcblx\": \"关闭\",\r\n \"qtsz_zdyxtb\": \"关闭\",\r\n \"qtsz_tjzffgn\": \"关闭\",\r\n\r\n\r\n\r\n \"ytwgn_kqwk\": \"开启\",\r\n \"ytwgn_wkgzfs\": \"LAN口\",\r\n \"wkmssz_wkms\": \"n\",\r\n \"wkmssz_sn\": \"\",\r\n\r\n \"wxpz_gzms\": \"STA模式\",\r\n \"wxpz_wlmc\": \"无线区无线网\",\r\n \"wxpz_mac\": \"3C:2D:50:20:30:1A\",\r\n \"wxpz_jmms\": \"WPA2PSK\",\r\n \"wxpz_jmsf\": \"AES\",\r\n \"wxpz_mm\": \"admin1234!\"\r\n\r\n}","update_time":"2023-11-01 15:33:05","r1":"","r2":"","r3":""}})
|
||||
},
|
||||
methods: {},
|
||||
components: {},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#app {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
background-color: #2b2d38;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
<template>
|
||||
<div id="app">
|
||||
<router-view></router-view>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "App",
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
created() {
|
||||
console.log({ "state": true, "message": "", "data": { "id": "10005", "mark": "CKFWQ", "topic": "串口服务器", "answer": "{\r\n \"ippz_ip_hqfs\": \"Static IP\",\r\n \"ippz_dns_hqfs\": \"手动设定\",\r\n \"ippz_ip\": \"192.168.40.5\",\r\n \"ippz_zwym\": \"255.255.255.192\",\r\n \"ippz_mrwg\": \"192.168.32.1\",\r\n \"ippz_dns_zy\": \"223.5.5.5\",\r\n \"ippz_dns_by\": \"114.114.114.114\",\r\n\r\n\r\n \"dkpz_btl\": \"115200\",\r\n \"dkpz_sjw\": \"8\",\r\n \"dkpz_jyw\": \"无校验（none）\",\r\n \"dkpz_tzw\": \"1\",\r\n \"dkpz_lkms\": \"None\",\r\n \"dkpz_dbcd\": \"0\",\r\n \"dkpz_dbsj\": \"0\",\r\n \"dkpz_tbbtl\": \"启用\",\r\n \"dkpz_snckxtb\": \"\",\r\n\r\n \"ckcssz_btl\": \"9600\",\r\n \"ckcssz_sjw\": \"8\",\r\n \"ckcssz_jyw\": \"无校验（none）\",\r\n \"ckcssz_tzw\": \"1\",\r\n \"ckcssz_lk\": \"关闭\",\r\n \"ckcssz_485\": \"开启\",\r\n \"ckcssz_zdybtl\": \"开启\",\r\n\r\n \"qtsz_ckzdcz\": \"关闭\",\r\n \"qtsz_zcblx\": \"关闭\",\r\n \"qtsz_zdyxtb\": \"关闭\",\r\n \"qtsz_tjzffgn\": \"关闭\",\r\n\r\n\r\n\r\n \"ytwgn_kqwk\": \"开启\",\r\n \"ytwgn_wkgzfs\": \"LAN口\",\r\n \"wkmssz_wkms\": \"n\",\r\n \"wkmssz_sn\": \"\",\r\n\r\n \"wxpz_gzms\": \"STA模式\",\r\n \"wxpz_wlmc\": \"无线区无线网\",\r\n \"wxpz_mac\": \"3C:2D:50:20:30:1A\",\r\n \"wxpz_jmms\": \"WPA2PSK\",\r\n \"wxpz_jmsf\": \"AES\",\r\n \"wxpz_mm\": \"admin1234!\"\r\n\r\n}", "update_time": "2023-11-01 15:33:05", "r1": "", "r2": "", "r3": "" } })
|
||||
},
|
||||
methods: {},
|
||||
components: {},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#app {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
background-color: #2b2d38;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
<template>
|
||||
<div id="app">
|
||||
<router-view></router-view>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "App",
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
created() {
|
||||
console.log({ "state": true, "message": "", "data": { "id": "10005", "mark": "CKFWQ", "topic": "串口服务器", "answer": "{\r\n \"ippz_ip_hqfs\": \"Static IP\",\r\n \"ippz_dns_hqfs\": \"手动设定\",\r\n \"ippz_ip\": \"192.168.40.5\",\r\n \"ippz_zwym\": \"255.255.255.192\",\r\n \"ippz_mrwg\": \"192.168.32.1\",\r\n \"ippz_dns_zy\": \"223.5.5.5\",\r\n \"ippz_dns_by\": \"114.114.114.114\",\r\n\r\n\r\n \"dkpz_btl\": \"115200\",\r\n \"dkpz_sjw\": \"8\",\r\n \"dkpz_jyw\": \"无校验（none）\",\r\n \"dkpz_tzw\": \"1\",\r\n \"dkpz_lkms\": \"None\",\r\n \"dkpz_dbcd\": \"0\",\r\n \"dkpz_dbsj\": \"0\",\r\n \"dkpz_tbbtl\": \"启用\",\r\n \"dkpz_snckxtb\": \"\",\r\n\r\n \"ckcssz_btl\": \"9600\",\r\n \"ckcssz_sjw\": \"8\",\r\n \"ckcssz_jyw\": \"无校验（none）\",\r\n \"ckcssz_tzw\": \"1\",\r\n \"ckcssz_lk\": \"关闭\",\r\n \"ckcssz_485\": \"开启\",\r\n \"ckcssz_zdybtl\": \"开启\",\r\n\r\n \"qtsz_ckzdcz\": \"关闭\",\r\n \"qtsz_zcblx\": \"关闭\",\r\n \"qtsz_zdyxtb\": \"关闭\",\r\n \"qtsz_tjzffgn\": \"关闭\",\r\n\r\n\r\n\r\n \"ytwgn_kqwk\": \"开启\",\r\n \"ytwgn_wkgzfs\": \"LAN口\",\r\n \"wkmssz_wkms\": \"n\",\r\n \"wkmssz_sn\": \"\",\r\n\r\n \"wxpz_gzms\": \"STA模式\",\r\n \"wxpz_wlmc\": \"无线区无线网\",\r\n \"wxpz_mac\": \"3C:2D:50:20:30:1A\",\r\n \"wxpz_jmms\": \"WPA2PSK\",\r\n \"wxpz_jmsf\": \"AES\",\r\n \"wxpz_mm\": \"admin1234!\"\r\n\r\n}", "update_time": "2023-11-01 15:33:05", "r1": "", "r2": "", "r3": "" } })
|
||||
},
|
||||
methods: {},
|
||||
components: {},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#app {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
background-color: #2b2d38;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
<template>
|
||||
<div id="app">
|
||||
<router-view></router-view>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "App",
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
created() {
|
||||
console.log({"state":true,"message":"","data":{"id":"10008","mark":"YDPZYM","topic":"云端配置页面","answer":"{\r\n\r\n \"wgpz\": [\r\n {\r\n \"wglx\": \"box\",\r\n \"wgid\": \"lan-box1\",\r\n \"wgbh\": \"2000808010\",\r\n \"wgmc\": \"有线区网关1\"\r\n },\r\n {\r\n \"wglx\": \"box\",\r\n \"wgid\": \"lan-box2\",\r\n \"wgbh\": \"2000808011\",\r\n \"wgmc\": \"有线区网关2\"\r\n },\r\n {\r\n \"wglx\": \"box\",\r\n \"wgid\": \"wlan-box1\",\r\n \"wgbh\": \"2000808012\",\r\n \"wgmc\": \"无线区网关1\"\r\n },\r\n {\r\n \"wglx\": \"box\",\r\n \"wgid\": \"wlan-box2\",\r\n \"wgbh\": \"2000808013\",\r\n \"wgmc\": \"无线区网关2\"\r\n }\r\n ],\r\n\r\n\r\n \"wgwh\": [\r\n {\r\n \"sswg\": \"lan-box1\",\r\n \"cskey\": \"MachinePamHID910\",\r\n \"csname\": \"产量\",\r\n \"xsws\": \"0\",\r\n \"sfyxbz\": \"是\",\r\n \"sfbjbz\": \"是\",\r\n \"sdz\": \"20\",\r\n \"pcz\": \"5\"\r\n },\r\n {\r\n \"sswg\": \"lan-box2\",\r\n \"cskey\": \"MachinePamHID917\",\r\n \"csname\": \"主轴转速\",\r\n \"xsws\": \"0\",\r\n \"sfyxbz\": \"是\",\r\n \"sfbjbz\": \"是\",\r\n \"sdz\": \"2000\",\r\n \"pcz\": \"100\"\r\n },\r\n {\r\n \"sswg\": \"wlan-box1\",\r\n \"cskey\": \"MachinePamHID909\",\r\n \"csname\": \"急停状态\",\r\n \"xsws\": \"0\",\r\n \"sfyxbz\": \"是\",\r\n \"sfbjbz\": \"是\",\r\n \"sdz\": \"1\",\r\n \"pcz\": \"0\"\r\n },\r\n {\r\n \"sswg\": \"wlan-box2\",\r\n \"cskey\": \"MachinePamHID928\",\r\n \"csname\": \"切削速度\",\r\n \"xsws\": \"0\",\r\n \"sfyxbz\": \"是\",\r\n \"sfbjbz\": \"是\",\r\n \"sdz\": \"500\",\r\n \"pcz\": \"50\"\r\n }\r\n ]\r\n}","update_time":"2023-11-01 15:33:14","r1":"","r2":"","r3":""}})
|
||||
},
|
||||
methods: {},
|
||||
components: {},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#app {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
background-color: #2b2d38;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
<template>
|
||||
<div id="app">
|
||||
<router-view></router-view>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "App",
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
created() {
|
||||
},
|
||||
methods: {},
|
||||
components: {},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#app {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
background-color: #2b2d38;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
<template>
|
||||
<div id="app">
|
||||
<router-view></router-view>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "App",
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
created() {
|
||||
},
|
||||
methods: {},
|
||||
components: {},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#app {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
background:url("../")
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
<template>
|
||||
<div id="app">
|
||||
<router-view></router-view>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "App",
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
created() {
|
||||
},
|
||||
methods: {},
|
||||
components: {},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#app {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
background:url("../")
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
<template>
|
||||
<div id="app">
|
||||
<router-view></router-view>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "App",
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
created() {
|
||||
},
|
||||
methods: {},
|
||||
components: {},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#app {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
background:url("../")
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
<template>
|
||||
<div id="app">
|
||||
<router-view></router-view>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "App",
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
created() {
|
||||
},
|
||||
methods: {},
|
||||
components: {},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#app {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
background: url(./assets/image/bg.png) no-repeat;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
<template>
|
||||
<div id="app">
|
||||
<router-view></router-view>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "App",
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
created() {
|
||||
},
|
||||
methods: {},
|
||||
components: {},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#app {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
background: url(./assets/image/bg.png) no-repeat;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
<template>
|
||||
<div id="app">
|
||||
<router-view></router-view>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "App",
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
created() {
|
||||
},
|
||||
methods: {},
|
||||
components: {},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#app {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
background: url(./assets/image/bg.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,58 @@
|
|||
<template>
|
||||
<div id="app">
|
||||
<router-view></router-view>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "App",
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
created() {
|
||||
},
|
||||
methods: {},
|
||||
components: {},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#app {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
/* background: url(./assets/image/bg.png) no-repeat; */
|
||||
/* background-size: 100% 100%; */
|
||||
}
|
||||
|
||||
/* 弹窗 */
|
||||
.el-dialog,
|
||||
.el-pager li {
|
||||
background-color: rgba(255, 0, 0, 0.0);
|
||||
color: #FFFFFF;
|
||||
background-image: url(./assets/image/bg.png);
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
/* //将el-dialog__header、el-dialog__body、el-dialog__footer背景设置为透明 */
|
||||
/* ```css */
|
||||
.el-dialog__header {
|
||||
padding-top: 10px !important;
|
||||
background-color:rgb(255,255,255,0);
|
||||
border-radius: 14px 14px 0 0 ;
|
||||
}
|
||||
.el-dialog__body {
|
||||
border-top: 0 !important;
|
||||
background-color: rgba(19, 31, 59, 0);
|
||||
color: #FFFFFF;
|
||||
}
|
||||
.el-dialog__footer{
|
||||
text-align: center;
|
||||
background-color: rgba(255,255,255,0);
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -0,0 +1,60 @@
|
|||
<template>
|
||||
<div id="app">
|
||||
<router-view></router-view>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "App",
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
created() {
|
||||
},
|
||||
methods: {},
|
||||
components: {},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#app {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
/* background: url(./assets/image/bg.png) no-repeat; */
|
||||
/* background-size: 100% 100%; */
|
||||
}
|
||||
|
||||
/* 弹窗 */
|
||||
.el-dialog,
|
||||
.el-pager li {
|
||||
background-color: rgba(255, 0, 0, 0.0);
|
||||
color: #FFFFFF;
|
||||
background-image: url(./assets/image/bg.png);
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
/* //将el-dialog__header、el-dialog__body、el-dialog__footer背景设置为透明 */
|
||||
/* ```css */
|
||||
.el-dialog__header {
|
||||
padding-top: 10px !important;
|
||||
background-color: rgb(255, 255, 255, 0);
|
||||
border-radius: 14px 14px 0 0;
|
||||
}
|
||||
|
||||
.el-dialog__body {
|
||||
border-top: 0 !important;
|
||||
background-color: rgba(19, 31, 59, 0);
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.el-dialog__footer {
|
||||
text-align: center;
|
||||
background-color: rgba(255, 255, 255, 0);
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,66 @@
|
|||
<template>
|
||||
<div id="app">
|
||||
<router-view></router-view>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "App",
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
created() {
|
||||
},
|
||||
methods: {},
|
||||
components: {},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#app {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
/* background: url(./assets/image/bg.png) no-repeat; */
|
||||
/* background-size: 100% 100%; */
|
||||
}
|
||||
|
||||
/* 弹窗 */
|
||||
.el-dialog,
|
||||
.el-pager li {
|
||||
background-color: rgba(255, 0, 0, 0.0);
|
||||
color: #FFFFFF;
|
||||
background-image: url(./assets/image/bg.png);
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
/* //将el-dialog__header、el-dialog__body、el-dialog__footer背景设置为透明 */
|
||||
/* ```css */
|
||||
.el-dialog__header {
|
||||
padding-top: 10px !important;
|
||||
background-image: url(./assets/image/bg.png);
|
||||
background-size: 100% 100%;
|
||||
/* background-color: rgb(255, 255, 255, 0); */
|
||||
border-radius: 14px 14px 0 0;
|
||||
}
|
||||
|
||||
.el-dialog__body {
|
||||
border-top: 0 !important;
|
||||
/* background-color: rgba(19, 31, 59, 0); */
|
||||
color: #FFFFFF;
|
||||
background-image: url(./assets/image/bg.png);
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.el-dialog__footer {
|
||||
text-align: center;
|
||||
background-color: rgba(255, 255, 255, 0);
|
||||
background-image: url(./assets/image/bg.png);
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,66 @@
|
|||
<template>
|
||||
<div id="app">
|
||||
<router-view></router-view>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "App",
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
created() {
|
||||
},
|
||||
methods: {},
|
||||
components: {},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#app {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
/* background: url(./assets/image/bg.png) no-repeat; */
|
||||
/* background-size: 100% 100%; */
|
||||
}
|
||||
|
||||
/* 弹窗 */
|
||||
.el-dialog,
|
||||
.el-pager li {
|
||||
background-color: rgba(255, 0, 0, 0.0);
|
||||
color: #FFFFFF;
|
||||
background-image: url(./assets/image/bg.png);
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
/* //将el-dialog__header、el-dialog__body、el-dialog__footer背景设置为透明 */
|
||||
/* ```css */
|
||||
.el-dialog__header {
|
||||
padding-top: 10px !important;
|
||||
background-image: url(./assets/image/bg.png);
|
||||
background-size: 100% 100%;
|
||||
/* background-color: rgb(255, 255, 255, 0); */
|
||||
border-radius: 14px 14px 0 0;
|
||||
}
|
||||
|
||||
.el-dialog__body {
|
||||
border-top: 0 !important;
|
||||
/* background-color: rgba(19, 31, 59, 0); */
|
||||
color: #FFFFFF;
|
||||
background-image: url(./assets/image/bg.png);
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.el-dialog__footer {
|
||||
text-align: center;
|
||||
/* background-color: rgba(255, 255, 255, 0); */
|
||||
background-image: url(./assets/image/bg.png);
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,67 @@
|
|||
<template>
|
||||
<div id="app">
|
||||
<router-view></router-view>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "App",
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
created() {
|
||||
},
|
||||
methods: {},
|
||||
components: {},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#app {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
background-color: white;
|
||||
/* background: url(./assets/image/bg.png) no-repeat; */
|
||||
/* background-size: 100% 100%; */
|
||||
}
|
||||
|
||||
/* 弹窗 */
|
||||
.el-dialog,
|
||||
.el-pager li {
|
||||
background-color: rgba(255, 0, 0, 0.0);
|
||||
color: #FFFFFF;
|
||||
background-image: url(./assets/image/bg.png);
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
/* //将el-dialog__header、el-dialog__body、el-dialog__footer背景设置为透明 */
|
||||
/* ```css */
|
||||
.el-dialog__header {
|
||||
padding-top: 10px !important;
|
||||
background-image: url(./assets/image/bg.png);
|
||||
background-size: 100% 100%;
|
||||
/* background-color: rgb(255, 255, 255, 0); */
|
||||
border-radius: 14px 14px 0 0;
|
||||
}
|
||||
|
||||
.el-dialog__body {
|
||||
border-top: 0 !important;
|
||||
/* background-color: rgba(19, 31, 59, 0); */
|
||||
color: #FFFFFF;
|
||||
background-image: url(./assets/image/bg.png);
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.el-dialog__footer {
|
||||
text-align: center;
|
||||
/* background-color: rgba(255, 255, 255, 0); */
|
||||
background-image: url(./assets/image/bg.png);
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,67 @@
|
|||
<template>
|
||||
<div id="app">
|
||||
<router-view></router-view>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "App",
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
created() {
|
||||
},
|
||||
methods: {},
|
||||
components: {},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#app {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
background-color: white;
|
||||
/* background: url(./assets/image/bg.png) no-repeat; */
|
||||
/* background-size: 100% 100%; */
|
||||
}
|
||||
|
||||
/* 弹窗 */
|
||||
.el-dialog,
|
||||
.el-pager li {
|
||||
background-color: rgba(255, 0, 0, 0.0);
|
||||
color: #FFFFFF;
|
||||
background-image: url(./assets/image/bg.png);
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
/* //将el-dialog__header、el-dialog__body、el-dialog__footer背景设置为透明 */
|
||||
/* ```css */
|
||||
.el-dialog__header {
|
||||
padding-top: 10px !important;
|
||||
background-image: url(./assets/image/bg.png);
|
||||
background-size: 100% 100%;
|
||||
/* background-color: rgb(255, 255, 255, 0); */
|
||||
border-radius: 14px 14px 0 0;
|
||||
}
|
||||
|
||||
.el-dialog__body {
|
||||
border-top: 0 !important;
|
||||
/* background-color: rgba(19, 31, 59, 0); */
|
||||
color: #FFFFFF;
|
||||
background-image: url(./assets/image/bg.png);
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.el-dialog__footer {
|
||||
text-align: center;
|
||||
/* background-color: rgba(255, 255, 255, 0); */
|
||||
background-image: url(./assets/image/bg.png);
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,67 @@
|
|||
<template>
|
||||
<div id="app">
|
||||
<router-view></router-view>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "App",
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
created() {
|
||||
},
|
||||
methods: {},
|
||||
components: {},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#app {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
background-color: white;
|
||||
/* background: url(./assets/image/bg.png) no-repeat; */
|
||||
/* background-size: 100% 100%; */
|
||||
}
|
||||
|
||||
/* 弹窗 */
|
||||
.el-dialog,
|
||||
.el-pager li {
|
||||
background-color: rgba(255, 0, 0, 0.0);
|
||||
color: #FFFFFF;
|
||||
background-image: url(./assets/image/bg.png);
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
/* //将el-dialog__header、el-dialog__body、el-dialog__footer背景设置为透明 */
|
||||
/* ```css */
|
||||
.el-dialog__header {
|
||||
padding-top: 10px !important;
|
||||
background-image: url(./assets/image/bg.png);
|
||||
background-size: 100% 100%;
|
||||
/* background-color: rgb(255, 255, 255, 0); */
|
||||
border-radius: 14px 14px 0 0;
|
||||
}
|
||||
|
||||
.el-dialog__body {
|
||||
border-top: 0 !important;
|
||||
/* background-color: rgba(19, 31, 59, 0); */
|
||||
color: #FFFFFF;
|
||||
background-image: url(./assets/image/bg.png);
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.el-dialog__footer {
|
||||
text-align: center;
|
||||
/* background-color: rgba(255, 255, 255, 0); */
|
||||
background-image: url(./assets/image/bg.png);
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,68 @@
|
|||
<template>
|
||||
<div id="app">
|
||||
<router-view></router-view>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "App",
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
created() {
|
||||
},
|
||||
methods: {},
|
||||
components: {},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#app {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
background-color: white;
|
||||
/* background: url(./assets/image/bg.png) no-repeat; */
|
||||
/* background-size: 100% 100%; */
|
||||
}
|
||||
|
||||
/* 弹窗 */
|
||||
.el-dialog,
|
||||
.el-pager li,
|
||||
.el-tree{
|
||||
background-color: rgba(255, 0, 0, 0.0);
|
||||
color: #FFFFFF;
|
||||
background-image: url(./assets/image/bg.png);
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
/* //将el-dialog__header、el-dialog__body、el-dialog__footer背景设置为透明 */
|
||||
/* ```css */
|
||||
.el-dialog__header {
|
||||
padding-top: 10px !important;
|
||||
background-image: url(./assets/image/bg.png);
|
||||
background-size: 100% 100%;
|
||||
/* background-color: rgb(255, 255, 255, 0); */
|
||||
border-radius: 14px 14px 0 0;
|
||||
}
|
||||
|
||||
.el-dialog__body {
|
||||
border-top: 0 !important;
|
||||
/* background-color: rgba(19, 31, 59, 0); */
|
||||
color: #FFFFFF;
|
||||
background-image: url(./assets/image/bg.png);
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.el-dialog__footer{
|
||||
text-align: center;
|
||||
/* background-color: rgba(255, 255, 255, 0); */
|
||||
background-image: url(./assets/image/bg.png);
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,68 @@
|
|||
<template>
|
||||
<div id="app">
|
||||
<router-view></router-view>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "App",
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
created() {
|
||||
},
|
||||
methods: {},
|
||||
components: {},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#app {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
background-color: white;
|
||||
/* background: url(./assets/image/bg.png) no-repeat; */
|
||||
/* background-size: 100% 100%; */
|
||||
}
|
||||
|
||||
/* 弹窗 */
|
||||
.el-dialog,
|
||||
.el-pager li,
|
||||
.el-tree{
|
||||
/* background-color: rgba(255, 0, 0, 0.0); */
|
||||
color: #FFFFFF;
|
||||
background-image: url(./assets/image/bg.png);
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
/* //将el-dialog__header、el-dialog__body、el-dialog__footer背景设置为透明 */
|
||||
/* ```css */
|
||||
.el-dialog__header {
|
||||
padding-top: 10px !important;
|
||||
background-image: url(./assets/image/bg.png);
|
||||
background-size: 100% 100%;
|
||||
/* background-color: rgb(255, 255, 255, 0); */
|
||||
border-radius: 14px 14px 0 0;
|
||||
}
|
||||
|
||||
.el-dialog__body {
|
||||
border-top: 0 !important;
|
||||
/* background-color: rgba(19, 31, 59, 0); */
|
||||
color: #FFFFFF;
|
||||
background-image: url(./assets/image/bg.png);
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.el-dialog__footer{
|
||||
text-align: center;
|
||||
/* background-color: rgba(255, 255, 255, 0); */
|
||||
background-image: url(./assets/image/bg.png);
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,69 @@
|
|||
<template>
|
||||
<div id="app">
|
||||
<router-view></router-view>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "App",
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
created() {
|
||||
},
|
||||
methods: {},
|
||||
components: {},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#app {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
background-color: white;
|
||||
/* background: url(./assets/image/bg.png) no-repeat; */
|
||||
/* background-size: 100% 100%; */
|
||||
}
|
||||
|
||||
/* 弹窗 */
|
||||
.el-dialog,
|
||||
.el-pager li,
|
||||
.el-tree,
|
||||
.tree_menu{
|
||||
/* background-color: rgba(255, 0, 0, 0.0); */
|
||||
color: #FFFFFF;
|
||||
background-image: url(./assets/image/bg.png);
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
/* //将el-dialog__header、el-dialog__body、el-dialog__footer背景设置为透明 */
|
||||
/* ```css */
|
||||
.el-dialog__header {
|
||||
padding-top: 10px !important;
|
||||
background-image: url(./assets/image/bg.png);
|
||||
background-size: 100% 100%;
|
||||
/* background-color: rgb(255, 255, 255, 0); */
|
||||
border-radius: 14px 14px 0 0;
|
||||
}
|
||||
|
||||
.el-dialog__body {
|
||||
border-top: 0 !important;
|
||||
/* background-color: rgba(19, 31, 59, 0); */
|
||||
color: #FFFFFF;
|
||||
background-image: url(./assets/image/bg.png);
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.el-dialog__footer{
|
||||
text-align: center;
|
||||
/* background-color: rgba(255, 255, 255, 0); */
|
||||
background-image: url(./assets/image/bg.png);
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,70 @@
|
|||
<template>
|
||||
<div id="app">
|
||||
<router-view></router-view>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "App",
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
created() {
|
||||
console.log({"state":true,"message":"","data":{"id":"10001","mark":"DB-IotLite_yx","topic":"DB-IotLite网关有线","answer":"{\r\n \"ippz_wangkou\": \"ETH1\",\r\n \"ippz_ip\": \"192.168.32.3\",\r\n \"ippz_zwym\": \"255.255.255.192\",\r\n \"ippz_mrwg\": \"192.168.32.1\",\r\n \"ippz_dns_sx\": \"8.8.8.8\",\r\n \"ippz_dns_by\": \"114.114.114.114\",\r\n \"ippz_mac\": \"3C:2D:50:20:30:3D\",\r\n\r\n \"wgpz_wgmc\": \"有线区网关1\",\r\n \"wgpz_wgid\": \"LAN-BOX1\",\r\n \"wgpz_wglx\": \"MODBUS网关\",\r\n\r\n \"tdpz_tdmc\": \"有线区Channel1\",\r\n \"tdpz_td\": \"网口\",\r\n \"tdpz_qdmc\": \"ModbusTCPClient\",\r\n \"tdpz_ip\": \"192.168.32.2\",\r\n \"tdpz_port\": \"502\",\r\n \"tdpz_cssj\": \"500\",\r\n \"tdpz_jgsj\": \"500\",\r\n \"tdpz_lxsj\": \"0\",\r\n \"tdpz_cfcs\": \"3\",\r\n \"tdpz_watchtime\": \"1\",\r\n \"tdpz_cjsylxdz\": \"1\",\r\n \"tdpz_dxzkb\": \"1:1\",\r\n \"tdpz_050F\": \"auto\",\r\n \"tdpz_0610\": \"auto\",\r\n\r\n \"sbpz_sbid\": \"有线区加工设备1\",\r\n \"sbpz_sbmc\": \"有线区精雕1\",\r\n \"sbpz_mac\": \"3C:2D:50:20:30:3D\",\r\n \"sbpz_jysb\": \"0\",\r\n \"sbpz_jdzxz\": \"1\",\r\n\r\n \"cjdpz_tagid\": \"MachinePamHID910\",\r\n \"cjdpz_mc\": \"产量\",\r\n \"cjdpz_sjq\": \"4X (Holding Register)\",\r\n \"cjdpz_jcqdz\": \"8195\",\r\n \"cjdpz_cjsjlx\": \"uint16\",\r\n \"cjdpz_zjx\": \"Null\",\r\n \"cjdpz_dxsx\": \"只读\",\r\n \"cjdpz_beilv\": \"1\",\r\n\r\n \"mqtt_qiyong\": \"1\",\r\n \"mqtt_ip\": \"124.70.210.118\",\r\n \"mqtt_port\": \"1883\",\r\n \"mqtt_wgsn\": \"2000808010\",\r\n \"mqtt_sssjfbzt\": \"dbzn/gateway/iotlite/2000808010\",\r\n \"mqtt_qos\": \"qos1\",\r\n \"mqtt_retained\": \"0\",\r\n \"mqtt_scms\": \"周期上传\",\r\n \"mqtt_sczq\": \"5\",\r\n \"mqtt_sjgl\": \"采集成功\",\r\n \"mqtt_cjd_sbmc\": \"有线区精雕1\",\r\n \"mqtt_cjd_tagid\": \"MachinePamHID910\"\r\n\r\n}","update_time":"2023-10-31 10:20:14","r1":"4","r2":"","r3":""}})
|
||||
},
|
||||
methods: {},
|
||||
components: {},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#app {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
background-color: white;
|
||||
/* background: url(./assets/image/bg.png) no-repeat; */
|
||||
/* background-size: 100% 100%; */
|
||||
}
|
||||
|
||||
/* 弹窗 */
|
||||
.el-dialog,
|
||||
.el-pager li,
|
||||
.el-tree,
|
||||
.tree_menu{
|
||||
/* background-color: rgba(255, 0, 0, 0.0); */
|
||||
color: #FFFFFF;
|
||||
background-image: url(./assets/image/bg.png);
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
/* //将el-dialog__header、el-dialog__body、el-dialog__footer背景设置为透明 */
|
||||
/* ```css */
|
||||
.el-dialog__header {
|
||||
padding-top: 10px !important;
|
||||
background-image: url(./assets/image/bg.png);
|
||||
background-size: 100% 100%;
|
||||
/* background-color: rgb(255, 255, 255, 0); */
|
||||
border-radius: 14px 14px 0 0;
|
||||
}
|
||||
|
||||
.el-dialog__body {
|
||||
border-top: 0 !important;
|
||||
/* background-color: rgba(19, 31, 59, 0); */
|
||||
color: #FFFFFF;
|
||||
background-image: url(./assets/image/bg.png);
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.el-dialog__footer{
|
||||
text-align: center;
|
||||
/* background-color: rgba(255, 255, 255, 0); */
|
||||
background-image: url(./assets/image/bg.png);
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,73 @@
|
|||
<template>
|
||||
<div id="app">
|
||||
<router-view></router-view>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "App",
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
created() {
|
||||
console.log({"state":true,"message":"","data":{"id":"10001","mark":"DB-IotLite_yx","topic":"DB-IotLite网关有线","answer":"{\r\n \"ippz_wangkou\": \"ETH1\",\r\n \"ippz_ip\": \"192.168.32.3\",\r\n \"ippz_zwym\": \"255.255.255.192\",\r\n \"ippz_mrwg\": \"192.168.32.1\",\r\n \"ippz_dns_sx\": \"8.8.8.8\",\r\n \"ippz_dns_by\": \"114.114.114.114\",\r\n \"ippz_mac\": \"3C:2D:50:20:30:3D\",\r\n\r\n \"wgpz_wgmc\": \"有线区网关1\",\r\n \"wgpz_wgid\": \"LAN-BOX1\",\r\n \"wgpz_wglx\": \"MODBUS网关\",\r\n\r\n \"tdpz_tdmc\": \"有线区Channel1\",\r\n \"tdpz_td\": \"网口\",\r\n \"tdpz_qdmc\": \"ModbusTCPClient\",\r\n \"tdpz_ip\": \"192.168.32.2\",\r\n \"tdpz_port\": \"502\",\r\n \"tdpz_cssj\": \"500\",\r\n \"tdpz_jgsj\": \"500\",\r\n \"tdpz_lxsj\": \"0\",\r\n \"tdpz_cfcs\": \"3\",\r\n \"tdpz_watchtime\": \"1\",\r\n \"tdpz_cjsylxdz\": \"1\",\r\n \"tdpz_dxzkb\": \"1:1\",\r\n \"tdpz_050F\": \"auto\",\r\n \"tdpz_0610\": \"auto\",\r\n\r\n \"sbpz_sbid\": \"有线区加工设备1\",\r\n \"sbpz_sbmc\": \"有线区精雕1\",\r\n \"sbpz_mac\": \"3C:2D:50:20:30:3D\",\r\n \"sbpz_jysb\": \"0\",\r\n \"sbpz_jdzxz\": \"1\",\r\n\r\n \"cjdpz_tagid\": \"MachinePamHID910\",\r\n \"cjdpz_mc\": \"产量\",\r\n \"cjdpz_sjq\": \"4X (Holding Register)\",\r\n \"cjdpz_jcqdz\": \"8195\",\r\n \"cjdpz_cjsjlx\": \"uint16\",\r\n \"cjdpz_zjx\": \"Null\",\r\n \"cjdpz_dxsx\": \"只读\",\r\n \"cjdpz_beilv\": \"1\",\r\n\r\n \"mqtt_qiyong\": \"1\",\r\n \"mqtt_ip\": \"124.70.210.118\",\r\n \"mqtt_port\": \"1883\",\r\n \"mqtt_wgsn\": \"2000808010\",\r\n \"mqtt_sssjfbzt\": \"dbzn/gateway/iotlite/2000808010\",\r\n \"mqtt_qos\": \"qos1\",\r\n \"mqtt_retained\": \"0\",\r\n \"mqtt_scms\": \"周期上传\",\r\n \"mqtt_sczq\": \"5\",\r\n \"mqtt_sjgl\": \"采集成功\",\r\n \"mqtt_cjd_sbmc\": \"有线区精雕1\",\r\n \"mqtt_cjd_tagid\": \"MachinePamHID910\"\r\n\r\n}","update_time":"2023-10-31 10:20:14","r1":"4","r2":"","r3":""}})
|
||||
},
|
||||
methods: {},
|
||||
components: {},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#app {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
background-color: white;
|
||||
/* background: url(./assets/image/bg.png) no-repeat; */
|
||||
/* background-size: 100% 100%; */
|
||||
}
|
||||
|
||||
/* 弹窗 */
|
||||
.el-dialog,
|
||||
.el-pager li,
|
||||
.el-tree,
|
||||
.tree_menu{
|
||||
/* background-color: rgba(255, 0, 0, 0.0); */
|
||||
color: #FFFFFF;
|
||||
background-image: url(./assets/image/bg.png);
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
/* //将el-dialog__header、el-dialog__body、el-dialog__footer背景设置为透明 */
|
||||
/* ```css */
|
||||
.el-dialog__header {
|
||||
padding-top: 10px !important;
|
||||
background-image: url(./assets/image/bg.png);
|
||||
background-size: 100% 100%;
|
||||
/* background-color: rgb(255, 255, 255, 0); */
|
||||
border-radius: 14px 14px 0 0;
|
||||
}
|
||||
|
||||
.el-dialog__body {
|
||||
border-top: 0 !important;
|
||||
/* background-color: rgba(19, 31, 59, 0); */
|
||||
color: #FFFFFF;
|
||||
background-image: url(./assets/image/bg.png);
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.el-dialog__footer{
|
||||
text-align: center;
|
||||
/* background-color: rgba(255, 255, 255, 0); */
|
||||
background-image: url(./assets/image/bg.png);
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.el-form-item label{
|
||||
color: white;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
import axios from "axios";
|
||||
export const GetDbwirldList = ()=>{
|
||||
return axios.get("http://172.16.1.254:10014/Handler/Config.ashx?action=queryanswer&mark=DB-IotLite_yx")
|
||||
}
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
import axios from "axios";
|
||||
export const GetDbwirldList = ()=>{
|
||||
return axios.get("http://172.16.1.254:10014/Handler/Config.ashx?action=queryanswer&mark=DB-IotLite_yx")
|
||||
}
|
||||
export const SaveDbdatas=(data)=>{
|
||||
return axios.post("http://172.16.1.254:10014/Handler/Config.ashx?action=updatecache",{
|
||||
mark:""
|
||||
})
|
||||
}
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
import axios from "axios";
|
||||
export const GetDbwirldList = ()=>{
|
||||
return axios.get("http://172.16.1.254:10014/Handler/Config.ashx?action=queryanswer&mark=DB-IotLite_yx")
|
||||
}
|
||||
export const SaveDbdatas=(data)=>{
|
||||
return axios.post("http://172.16.1.254:10014/Handler/Config.ashx?action=updatecache",{
|
||||
mark:data.mark,
|
||||
user_id:data.user_id,
|
||||
mark_value:data.mark_value,
|
||||
})
|
||||
}
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
import axios from "axios";
|
||||
export const GetDbwirldList = () => {
|
||||
return axios.get("http://172.16.1.254:10014/Handler/Config.ashx?action=queryanswer&mark=DB-IotLite_yx")
|
||||
}
|
||||
export const SaveDbdatas = (data) => {
|
||||
return axios.post("http://172.16.1.254:10014/Handler/Config.ashx?action=updatecache", {
|
||||
mark: data.mark,
|
||||
user_id: data.user_id,
|
||||
mark_value: data.mark_value,
|
||||
})
|
||||
}
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
import axios from "axios";
|
||||
export const GetDbwirldList = () => {
|
||||
return axios.get("/wangguan?action=queryanswer&mark=DB-IotLite_yx")
|
||||
}
|
||||
export const SaveDbdatas = (data) => {
|
||||
return axios.post("/wangguan?action=updatecache", {
|
||||
mark: data.mark,
|
||||
user_id: data.user_id,
|
||||
mark_value: data.mark_value,
|
||||
})
|
||||
}
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
import axios from "axios";
|
||||
export const GetDbwirldList = () => {
|
||||
return axios.get("/wangguan?action=queryanswer&mark=DB-IotLite_yx")
|
||||
}
|
||||
export const SaveDbdatas = (data) => {
|
||||
return axios.post("/wangguan", {
|
||||
action:"updatecache",
|
||||
mark: data.mark,
|
||||
user_id: data.user_id,
|
||||
mark_value: data.mark_value,
|
||||
})
|
||||
}
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
import axios from "axios";
|
||||
export const GetDbwirldList = () => {
|
||||
return axios.get("/wangguan?action=queryanswer&mark=DB-IotLite_yx")
|
||||
}
|
||||
export const SaveDbdatas = (data) => {
|
||||
return axios.post("wangguan?action=updatecache", {
|
||||
mark: data.mark,
|
||||
user_id: data.user_id,
|
||||
mark_value: data.mark_value,
|
||||
})
|
||||
}
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
import axios from "axios";
|
||||
export const GetDbwirldList = () => {
|
||||
return axios.get("/wangguan?action=queryanswer&mark=DB-IotLite_yx")
|
||||
}
|
||||
export const SaveDbdatas = (data) => {
|
||||
return axios.post("/wangguan?action=updatecache", {
|
||||
mark: data.mark,
|
||||
user_id: data.user_id,
|
||||
mark_value: data.mark_value,
|
||||
})
|
||||
}
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
import axios from "axios";
|
||||
export const GetDbwirldList = () => {
|
||||
return axios.get("/wangguan?action=queryanswer&mark=DB-IotLite_yx")
|
||||
}
|
||||
export const SaveDbdatas = (data) => {
|
||||
return axios.post("/wangguan?action=updatecache", {
|
||||
mark: data.mark,
|
||||
user_id: data.user_id,
|
||||
mark_value: data.mark_value,
|
||||
})
|
||||
}
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
import axios from "axios";
|
||||
export const GetDbwirldList = () => {
|
||||
return axios.get("/wangguan?action=queryanswer&mark=DB-IotLite_yx")
|
||||
}
|
||||
export const SaveDbdatas = (data) => {
|
||||
|
||||
// http://172.16.1.254:10014/Handler/Config.ashx
|
||||
return axios.post("/wangguan?action=updatecache", {
|
||||
mark: data.mark,
|
||||
user_id: data.user_id,
|
||||
mark_value: data.mark_value,
|
||||
})
|
||||
}
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
import axios from "axios";
|
||||
export const GetDbwirldList = () => {
|
||||
return axios.get("/wangguan?action=queryanswer&mark=DB-IotLite_yx")
|
||||
}
|
||||
export const SaveDbdatas = (data) => {
|
||||
|
||||
// http://172.16.1.254:10014/Handler/Config.ashx
|
||||
return axios.post(`/wangguan?action=updatecache&mark=${data.mark}&user_id=${data.user_id}&mark_value=${data.mark_value}`, {
|
||||
mark: data.mark,
|
||||
user_id: data.user_id,
|
||||
mark_value: data.mark_value,
|
||||
})
|
||||
}
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
import axios from "axios";
|
||||
export const GetDbwirldList = () => {
|
||||
return axios.get("/wangguan?action=queryanswer&mark=DB-IotLite_yx")
|
||||
}
|
||||
export const SaveDbdatas = (data) => {
|
||||
|
||||
// http://172.16.1.254:10014/Handler/Config.ashx
|
||||
return axios.post(`/wangguan?action=updatecache&mark=${data.mark}&user_id=${data.user_id}&mark_value=${data.mark_value}`, {
|
||||
// mark: data.mark,
|
||||
// user_id: data.user_id,
|
||||
// mark_value: data.mark_value,
|
||||
})
|
||||
}
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
import axios from "axios";
|
||||
export const GetDbwirldList = () => {
|
||||
return axios.get("/wangguan?action=queryanswer&mark=DB-IotLite_yx")
|
||||
}
|
||||
export const SaveDbdatas = (data) => {
|
||||
|
||||
// http://172.16.1.254:10014/Handler/Config.ashx
|
||||
return axios.post(`/wangguan?action=updatecache&mark=${data.mark}&user_id=${data.user_id}&mark_value=${data.mark_value}`, {
|
||||
// mark: data.mark,
|
||||
// user_id: data.user_id,
|
||||
// mark_value: data.mark_value,
|
||||
})
|
||||
}
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
import axios from "axios";
|
||||
export const GetDbwirldList = () => {
|
||||
return axios.get("/wangguan?action=queryanswer&mark=DB-IotLite_yx")
|
||||
}
|
||||
export const SaveDbdatas = (data) => {
|
||||
|
||||
// http://172.16.1.254:10014/Handler/Config.ashx
|
||||
return axios.post(`http://172.16.1.254:10014/Handler/Config.ashx?action=updatecache&mark=${data.mark}&user_id=${data.user_id}&mark_value=${data.mark_value}`, {
|
||||
// mark: data.mark,
|
||||
// user_id: data.user_id,
|
||||
// mark_value: data.mark_value,
|
||||
})
|
||||
}
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
import axios from "axios";
|
||||
export const GetDbwirldList = () => {
|
||||
return axios.get("/wangguan?action=queryanswer&mark=DB-IotLite_yx")
|
||||
}
|
||||
export const SaveDbdatas = (data) => {
|
||||
|
||||
// http://172.16.1.254:10014/Handler/Config.ashx
|
||||
return axios.post(`/wangguan?action=updatecache&mark=${data.mark}&user_id=${data.user_id}&mark_value=${data.mark_value}`, {
|
||||
// mark: data.mark,
|
||||
// user_id: data.user_id,
|
||||
// mark_value: data.mark_value,
|
||||
})
|
||||
}
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
import axios from "axios";
|
||||
export const GetDbwirldList = () => {
|
||||
return axios.get("/wangguan?action=queryanswer&mark=DB-IotLite_yx")
|
||||
}
|
||||
export const SaveDbdatas = (data) => {
|
||||
|
||||
return axios.post(`/wangguan?action=updatecache`, {
|
||||
mark: data.mark,
|
||||
user_id: data.user_id,
|
||||
mark_value: data.mark_value,
|
||||
})
|
||||
}
|
||||
export const GetUserAnswer=()=>{
|
||||
return axios.get("/wangguan?action=querycache&mark=DB-IotLite_yx&user_id=1698025363002")
|
||||
}
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
import axios from "axios";
|
||||
export const GetDbwirldList = () => {
|
||||
return axios.get("/wangguan?action=queryanswer&mark=DB-IotLite_yx")
|
||||
}
|
||||
export const SaveDbdatas = (data) => {
|
||||
|
||||
return axios.post(`/wangguan?action=updatecache`, {
|
||||
mark: data.mark,
|
||||
user_id: data.user_id,
|
||||
mark_value: data.mark_value,
|
||||
})
|
||||
}
|
||||
export const GetUserAnswer = () => {
|
||||
return axios.get("/wangguan?action=querycache&mark=DB-IotLite_yx&user_id=1698025363002")
|
||||
}
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
import axios from "axios";
|
||||
export const GetDbwirldList = () => {
|
||||
return axios.get("/wangguan?action=queryanswer&mark=DB-IotLite_yx")
|
||||
}
|
||||
export const SaveDbdatas = (data) => {
|
||||
|
||||
// http://172.16.1.254:10014/Handler/Config.ashx
|
||||
return axios.post(`/wangguan?action=updatecache&mark=${data.mark}&user_id=${data.user_id}&mark_value=${data.mark_value}`, {
|
||||
})
|
||||
}
|
||||
export const GetUserAnswer = () => {
|
||||
return axios.get("/wangguan?action=querycache&mark=DB-IotLite_yx&user_id=1698025363002")
|
||||
}
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
import axios from "axios";
|
||||
export const GetDbwirldList = () => {
|
||||
return axios.get("/wangguan?action=queryanswer&mark=DB-IotLite_yx")
|
||||
}
|
||||
export const SaveDbdatas = (data) => {
|
||||
return axios.post(`/wangguan?action=updatecache&mark=${data.mark}&user_id=${data.user_id}&mark_value=${data.mark_value}`, {
|
||||
})
|
||||
}
|
||||
export const GetUserAnswer = () => {
|
||||
return axios.get("/wangguan?action=querycache&mark=DB-IotLite_yx&user_id=1698025363002")
|
||||
}
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
import axios from "axios";
|
||||
export const GetDbwirldList = () => {
|
||||
return axios.get("/wangguan?action=queryanswer&mark=DB-IotLite_yx")
|
||||
}
|
||||
export const SaveDbdatas = (data) => {
|
||||
return axios.post(`/wangguan?action=updatecache&mark=${data.mark}&user_id=${data.user_id}&mark_value=${data.mark_value}`, {
|
||||
})
|
||||
}
|
||||
export const GetUserAnswer = () => {
|
||||
return axios.get("/wangguan?action=querycache&mark=DB-IotLite_yx&user_id=USER202307301109254198")
|
||||
}
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
import axios from "axios";
|
||||
export const GetDbwirldList = () => {
|
||||
return axios.get("/wangguan?action=queryanswer&mark=DB-IotLite_yx")
|
||||
}
|
||||
export const SaveDbdatas = (data) => {
|
||||
return axios.post(`/wangguan?action=updatecache&mark=${data.mark}&user_id=${data.user_id}&mark_value=${data.mark_value}`, {
|
||||
})
|
||||
}
|
||||
export const GetUserAnswer = (data) => {
|
||||
return axios.get("/wangguan?action=querycache&mark=DB-IotLite_yx&user_id=USER202307301109254198")
|
||||
}
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
import axios from "axios";
|
||||
export const GetDbwirldList = () => {
|
||||
return axios.get("/wangguan?action=queryanswer&mark=DB-IotLite_yx")
|
||||
}
|
||||
export const SaveDbdatas = (data) => {
|
||||
return axios.post(`/wangguan?action=updatecache&mark=${data.mark}&user_id=${data.user_id}&mark_value=${data.mark_value}`, {
|
||||
})
|
||||
}
|
||||
export const GetUserAnswer = (data) => {
|
||||
return axios.get(`/wangguan?action=querycache&mark=${data.mark}&user_id=${data.user_id}`)
|
||||
}
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
import axios from "axios";
|
||||
export const GetDbwirldList = () => {
|
||||
return axios.get("/wangguan?action=queryanswer&mark=DB-IotLite_yx")
|
||||
}
|
||||
export const SaveUserdatas = (data) => {
|
||||
return axios.post(`/wangguan?action=updatecache&mark=${data.mark}&user_id=${data.user_id}&mark_value=${data.mark_value}`, {
|
||||
})
|
||||
}
|
||||
export const GetUserAnswer = (data) => {
|
||||
return axios.get(`/wangguan?action=querycache&mark=${data.mark}&user_id=${data.user_id}`)
|
||||
}
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
import axios from "axios";
|
||||
export const GetDbwirldList = () => {
|
||||
return axios.get("/wangguan?action=queryanswer&mark=DB-IotLite_yx")
|
||||
}
|
||||
export const SaveUserdatas = (data) => {
|
||||
return axios.post(`/wangguan?action=updatecache&mark=${data.mark}&user_id=${data.user_id}&mark_value=${data.mark_value}`, {
|
||||
})
|
||||
}
|
||||
export const GetUserAnswer = (data) => {
|
||||
return axios.get(`/wangguan?action=querycache&mark=${data.mark}&user_id=${data.user_id}`)
|
||||
}
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
import axios from "axios";
|
||||
export const GetDbwirldList = () => {
|
||||
return axios.get("/wangguan?action=queryanswer&mark=DB-IotLite_yx")
|
||||
}
|
||||
export const SaveUserdatas = (data) => {
|
||||
return axios.post(`/wangguan?action=updatecache&mark=${data.mark}&user_id=${data.user_id}&mark_value=${data.mark_value}`, {
|
||||
})
|
||||
}
|
||||
export const GetUserAnswer = (data) => {
|
||||
return axios.get(`/wangguan?action=querycache&mark=${data.mark}&user_id=${data.user_id}`)
|
||||
}
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
import axios from "axios";
|
||||
export const GetDbwirldList = () => {
|
||||
return axios.get("/wangguan?action=queryanswer&mark=DB-IotLite_yx")
|
||||
}
|
||||
export const SaveUserAnswer = (data) => {
|
||||
return axios.post(`/wangguan?action=updatecache&mark=${data.mark}&user_id=${data.user_id}&mark_value=${data.mark_value}`, {
|
||||
})
|
||||
}
|
||||
export const GetUserAnswer = (data) => {
|
||||
return axios.get(`/wangguan?action=querycache&mark=${data.mark}&user_id=${data.user_id}`)
|
||||
}
|
||||
|
|
@ -0,0 +1,614 @@
|
|||
<!-- 斥候MQTT云 -->
|
||||
<template>
|
||||
<div class="Clone">
|
||||
<!-- 设置树形控件 -->
|
||||
<div v-click-outside="closeMenu">
|
||||
<!-- <el-button type="info" plain @click="dialogVisible = true">斥侯MQTT云</el-button> -->
|
||||
<div v-show="dialogVisible" class="tree_menu">
|
||||
<el-tree
|
||||
:data="datas"
|
||||
:props="defaultProps"
|
||||
@node-click="treeNodeClick"
|
||||
></el-tree>
|
||||
<!-- 树形控件右键组件 -->
|
||||
</div>
|
||||
</div>
|
||||
<div class="pas_params" v-show="add_passage">
|
||||
<div class="content">
|
||||
<div class="con_left">
|
||||
<el-form
|
||||
:label-position="labelPosition"
|
||||
:rules="rules"
|
||||
ref="ruleForm"
|
||||
>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-form-item>
|
||||
<el-checkbox v-model="mqtt_qiyong">启用</el-checkbox>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item
|
||||
label="服务器IP:"
|
||||
:label-width="formLabelWidth"
|
||||
prop="mqtt_ip"
|
||||
>
|
||||
<el-row>
|
||||
<el-col :span="5">
|
||||
<el-input
|
||||
v-model="mqtt_ip1"
|
||||
style="width: 43px; height: 30px"
|
||||
></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1">. </el-col>
|
||||
<el-col :span="5">
|
||||
<el-input
|
||||
v-model="mqtt_ip2"
|
||||
style="width: 43px; height: 30px"
|
||||
></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1">.</el-col>
|
||||
<el-col :span="5">
|
||||
<el-input
|
||||
v-model="mqtt_ip3"
|
||||
style="width: 43px; height: 30px"
|
||||
></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1">.</el-col>
|
||||
<el-col :span="5">
|
||||
<el-input
|
||||
v-model="mqtt_ip4"
|
||||
style="width: 43px; height: 30px"
|
||||
></el-input>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-form-item
|
||||
label="网关SN:"
|
||||
:label-width="formLabelWidth"
|
||||
prop="mqtt_wgsn"
|
||||
>
|
||||
<el-input
|
||||
v-model="mqtt_wgsn"
|
||||
placeholder=""
|
||||
style="width: 200px; height: 30px"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-form-item
|
||||
label="端口:"
|
||||
:label-width="formLabelWidth"
|
||||
prop="mqtt_port"
|
||||
>
|
||||
<el-input
|
||||
v-model="mqtt_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="Keep Alive(s):"
|
||||
:label-width="formLabelWidth"
|
||||
prop="mqtt_keepalive"
|
||||
>
|
||||
<el-input
|
||||
v-model="mqtt_keepalive"
|
||||
placeholder="64"
|
||||
style="width: 200px; height: 30px"
|
||||
></el-input>
|
||||
<div class="infos">2-60000</div>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item
|
||||
label="TLS加密:"
|
||||
:label-width="formLabelWidth"
|
||||
prop="mqtt_tls"
|
||||
>
|
||||
<el-switch v-model="mqtt_tls"></el-switch>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item
|
||||
label="清除Session:"
|
||||
:label-width="formLabelWidth"
|
||||
prop="mqtt_clearsession"
|
||||
>
|
||||
<el-switch v-model="mqtt_clearsession"></el-switch>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<h3 class="info_play">信息发布</h3>
|
||||
<el-divider></el-divider>
|
||||
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item
|
||||
label="Qos(MQTT):"
|
||||
:label-width="formLabelWidth"
|
||||
prop="upload_week"
|
||||
>
|
||||
<el-select
|
||||
v-model="mqtt_qos"
|
||||
placeholder="请选择"
|
||||
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-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<!-- <el-col :span="12">
|
||||
<el-form-item label="retained:" :label-width="formLabelWidth" prop="retained">
|
||||
<el-switch v-model="value1"></el-switch>
|
||||
</el-form-item>
|
||||
</el-col> -->
|
||||
</el-row>
|
||||
<!-- <el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="入口函数:" :label-width="formLabelWidth" prop="upload_week">
|
||||
<el-input v-model="input1" placeholder="64" style="width: 200px;height:30px"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row> -->
|
||||
<!-- <el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="函数代码:" :label-width="formLabelWidth" prop="upload_week">
|
||||
<prism-editor class="my-editor height-300" v-model="code" :highlight="highlighter"
|
||||
:line-numbers="lineNumbers"></prism-editor>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row> -->
|
||||
<div class="con_left_footer">
|
||||
<el-button type="primary" @click="add_passage = false"
|
||||
>保 存</el-button
|
||||
>
|
||||
<el-button @click="add_passage = false">取 消</el-button>
|
||||
</div>
|
||||
</el-form>
|
||||
</div>
|
||||
<div>
|
||||
<el-dialog title="选择点" :visible.sync="choose_point" width="30%">
|
||||
<el-tree :data="points" show-checkbox node-key="id" :default-expanded-keys="[1, 2]"
|
||||
:default-checked-keys="[3, 4, 5, 6]" :props="defaultProps">
|
||||
</el-tree>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="savePoint">保 存</el-button>
|
||||
<el-button @click="choose_point = false">取 消</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 添加按钮下显示出来的弹框信息 -->
|
||||
<div>
|
||||
<el-dialog title="选择点" :visible.sync="choose_point" width="30%">
|
||||
<el-tree
|
||||
:data="points"
|
||||
show-checkbox
|
||||
node-key="id"
|
||||
:default-expanded-keys="[1, 2]"
|
||||
:default-checked-keys="[3, 4, 5, 6]"
|
||||
:props="defaultProps"
|
||||
>
|
||||
</el-tree>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="choose_point = false"
|
||||
>保 存</el-button
|
||||
>
|
||||
<el-button @click="choose_point = false">取 消</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { PrismEditor } from "vue-prism-editor";
|
||||
import "vue-prism-editor/dist/prismeditor.min.css"; // import the styles somewhere
|
||||
// import highlighting library (you can use any library you want just return html string)
|
||||
import { highlight, languages } from "prismjs/components/prism-core";
|
||||
import "prismjs/components/prism-clike";
|
||||
import "prismjs/components/prism-javascript";
|
||||
import "prismjs/themes/prism-tomorrow.css"; // import syntax highlighting styles
|
||||
|
||||
export default {
|
||||
name: "ChiClone",
|
||||
components: {
|
||||
PrismEditor,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
mqtt_qiyong: true,
|
||||
mqtt_ip: "",
|
||||
mqtt_ip1: "",
|
||||
mqtt_ip2: "",
|
||||
mqtt_ip3: "",
|
||||
mqtt_ip4: "",
|
||||
mqtt_wgsn: "",
|
||||
mqtt_port: "",
|
||||
mqtt_keepalive: "",
|
||||
mqtt_tls: false,
|
||||
mqtt_clearsession: false,
|
||||
// mqtt_sssjfbzt:"",
|
||||
mqtt_qos: "0",
|
||||
// code: 'console.log("Hello World")',
|
||||
// lineNumbers: true, // true为编辑模式， false只展示不可编辑
|
||||
points: [
|
||||
{
|
||||
id: 1,
|
||||
label: "Device1",
|
||||
children: [
|
||||
{
|
||||
id: 3,
|
||||
label: "tag0001",
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
label: "tag0002",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
label: "Device1",
|
||||
children: [
|
||||
{
|
||||
id: 5,
|
||||
label: "tag0003",
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
label: "tag0004",
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
choose_point: false,
|
||||
options1: [
|
||||
{
|
||||
value: "0",
|
||||
label: "0",
|
||||
},
|
||||
{
|
||||
value: "1",
|
||||
label: "1",
|
||||
},
|
||||
{
|
||||
value: "2",
|
||||
label: "2",
|
||||
},
|
||||
],
|
||||
labelPosition: "left",
|
||||
formLabelWidth: "114px",
|
||||
input1: 192,
|
||||
add_passage: false,
|
||||
rightMenu: "",
|
||||
dialogVisible: true,
|
||||
menuShow: false,
|
||||
datas: [
|
||||
{
|
||||
label: "Gateway",
|
||||
children: [
|
||||
{
|
||||
label: "数据采集",
|
||||
children: [
|
||||
{
|
||||
id: 1,
|
||||
label: 'Device1',
|
||||
children: [
|
||||
{
|
||||
id: 3,
|
||||
label: 'tag0001',
|
||||
}, {
|
||||
id: 4,
|
||||
label: 'tag0002',
|
||||
},
|
||||
]
|
||||
}, {
|
||||
id: 2,
|
||||
label: 'Device1',
|
||||
children: [
|
||||
{
|
||||
id: 5,
|
||||
label: 'tag0003',
|
||||
}, {
|
||||
id: 6,
|
||||
label: 'tag0004',
|
||||
},
|
||||
]
|
||||
}],
|
||||
}
|
||||
],
|
||||
choose_point: false,
|
||||
options1: [{
|
||||
value: '0',
|
||||
label: '0'
|
||||
}, {
|
||||
value: '1',
|
||||
label: '1'
|
||||
}, {
|
||||
value: '2',
|
||||
label: '2'
|
||||
}],
|
||||
labelPosition: "left",
|
||||
formLabelWidth: "114px",
|
||||
input1: 192,
|
||||
add_passage: false,
|
||||
rightMenu: "",
|
||||
dialogVisible: true,
|
||||
isAdd: false,
|
||||
datas: [{
|
||||
label: 'Gateway',
|
||||
children: [{
|
||||
label: '数据采集',
|
||||
children: [{
|
||||
label: 'I/O点'
|
||||
},
|
||||
{
|
||||
label: '用户点',
|
||||
},
|
||||
{
|
||||
label: '计算点',
|
||||
},
|
||||
{
|
||||
label: '系统点',
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
label: "用户点",
|
||||
},
|
||||
{
|
||||
label: "计算点",
|
||||
},
|
||||
{
|
||||
label: "系统点",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "上云服务",
|
||||
children: [
|
||||
{
|
||||
label: "标准 MQTT",
|
||||
},
|
||||
{
|
||||
label: "AWS loT",
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
defaultProps: {
|
||||
children: "children",
|
||||
label: "label",
|
||||
},
|
||||
tableData: [
|
||||
{
|
||||
mqtt_cjd_sbmc: "Device1",
|
||||
mqtt_cjd_tagid: "Device1.tag0001",
|
||||
}],
|
||||
handleSelect(key) {
|
||||
console.log(key);
|
||||
if (key == 1 && this.isAdd == false) {
|
||||
this.choose_point = true;
|
||||
} else if (key == 1 && this.isAdd == true) {
|
||||
alert("只能添加一次");
|
||||
}
|
||||
},
|
||||
highlighter(code) {
|
||||
return highlight(code, languages.js); //returns html
|
||||
},
|
||||
closeMenu(ev) {
|
||||
console.log({ ev });
|
||||
this.dialogVisible = false;
|
||||
},
|
||||
savePoint() {
|
||||
this.choose_point = false;
|
||||
this.isAdd = true;
|
||||
},
|
||||
},
|
||||
directives: {
|
||||
'click-outside': {
|
||||
bind: function (el, binding, vnode) {
|
||||
console.log('el', el);
|
||||
console.log("binding", binding);
|
||||
el.event = function (event) {
|
||||
// 检查点击是否发生在节点之内（包括子节点）
|
||||
if (!(el == event.target || el.contains(event.target))) {
|
||||
// 如果没有，则触发调用
|
||||
// 若绑定值为函数，则执行
|
||||
// 这里我们可以通过钩子函数中的 vnode.context，来获取当前组件的作用域
|
||||
if (typeof vnode.context[binding.expression] == 'function') {
|
||||
vnode.context[binding.expression](event)
|
||||
}
|
||||
}
|
||||
}
|
||||
// 绑定事件
|
||||
// 设置为true，代表在DOM树中，注册了该listener的元素，会先于它下方的任何事件目标，接收到该事件。
|
||||
document.body.addEventListener('click', el.event, true)
|
||||
},
|
||||
unbind: function (el) {
|
||||
// 解绑事件
|
||||
document.body.removeEventListener('click', el.event, true)
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.tree_menu {
|
||||
position: absolute;
|
||||
width: 286px;
|
||||
height: 753px;
|
||||
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);
|
||||
}
|
||||
|
||||
/deep/ .pas_params {
|
||||
.info_play {
|
||||
width: 56px;
|
||||
height: 20px;
|
||||
color: rgba(16, 16, 16, 1);
|
||||
font-size: 14px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.el-divider--horizontal {
|
||||
margin: 8px 0;
|
||||
}
|
||||
|
||||
.el-button {
|
||||
width: 80px;
|
||||
height: 30px;
|
||||
line-height: 0.5;
|
||||
}
|
||||
|
||||
.el-col-12:last-child {
|
||||
padding-right: 150px;
|
||||
}
|
||||
|
||||
.el-col-12:first-child {
|
||||
padding-right: 28px;
|
||||
}
|
||||
|
||||
.el-row {
|
||||
height: 40px;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
|
||||
.el-col-1 {
|
||||
text-align: center;
|
||||
line-height: 52px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.el-col-9 {
|
||||
padding-left: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.el-input__inner {
|
||||
height: 30px;
|
||||
text-align: left;
|
||||
padding: 0px 8px;
|
||||
}
|
||||
|
||||
.content {
|
||||
position: absolute;
|
||||
left: 362px;
|
||||
top: 104px;
|
||||
width: 1220px;
|
||||
height: 836px;
|
||||
line-height: 20px;
|
||||
padding-left: 36px;
|
||||
background-color: rgba(255, 255, 255, 1);
|
||||
color: rgba(16, 16, 16, 1);
|
||||
font-size: 14px;
|
||||
border: 1px solid rgba(187, 187, 187, 1);
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
|
||||
.el-form-item {
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
/deep/ .con_left {
|
||||
.el-con-5 {
|
||||
width: 43px;
|
||||
}
|
||||
}
|
||||
|
||||
.con_left {
|
||||
width: 709px;
|
||||
position: relative;
|
||||
|
||||
.my-editor {
|
||||
background: #2d2d2d;
|
||||
color: #ccc;
|
||||
|
||||
font-family: Fira code, Fira Mono, Consolas, Menlo, Courier, monospace;
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
/* optional */
|
||||
.prism-editor__textarea:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
/* not required: */
|
||||
.height-300 {
|
||||
width: 491px;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.infos {
|
||||
width: 60px;
|
||||
position: absolute;
|
||||
left: 208px;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.con_left_footer {
|
||||
position: absolute;
|
||||
left: 499px;
|
||||
top: 720px;
|
||||
}
|
||||
}
|
||||
|
||||
.con_right {
|
||||
width: 480px;
|
||||
|
||||
.dialog-footer {
|
||||
.el-button {
|
||||
width: 80px;
|
||||
height: 30px;
|
||||
line-height: 0.5;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,541 @@
|
|||
<!-- 斥候MQTT云 -->
|
||||
<template>
|
||||
<div class="Clone">
|
||||
<!-- 设置树形控件 -->
|
||||
<div v-click-outside="closeMenu">
|
||||
<!-- <el-button type="info" plain @click="dialogVisible = true">斥侯MQTT云</el-button> -->
|
||||
<div v-show="dialogVisible" class="tree_menu">
|
||||
<el-tree :data="datas" :props="defaultProps" @node-click="treeNodeClick"></el-tree>
|
||||
<!-- 树形控件右键组件 -->
|
||||
</div>
|
||||
</div>
|
||||
<div class="pas_params" v-show="add_passage">
|
||||
<div class="content">
|
||||
<div class="con_left">
|
||||
<el-form :label-position="labelPosition" :rules="rules" ref="ruleForm">
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-form-item>
|
||||
<el-checkbox v-model="mqtt_qiyong">启用</el-checkbox>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="服务器IP:" :label-width="formLabelWidth" prop="mqtt_ip">
|
||||
<el-row>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="mqtt_ip1" style="width: 43px; height: 30px"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1">. </el-col>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="mqtt_ip2" style="width: 43px; height: 30px"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1">.</el-col>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="mqtt_ip3" style="width: 43px; height: 30px"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1">.</el-col>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="mqtt_ip4" style="width: 43px; height: 30px"></el-input>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="网关SN:" :label-width="formLabelWidth" prop="mqtt_wgsn">
|
||||
<el-input v-model="mqtt_wgsn" placeholder=""
|
||||
style="width: 200px; height: 30px"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="端口:" :label-width="formLabelWidth" prop="mqtt_port">
|
||||
<el-input v-model="mqtt_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="Keep Alive(s):" :label-width="formLabelWidth" prop="mqtt_keepalive">
|
||||
<el-input v-model="mqtt_keepalive" placeholder="64"
|
||||
style="width: 200px; height: 30px"></el-input>
|
||||
<div class="infos">2-60000</div>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="TLS加密:" :label-width="formLabelWidth" prop="mqtt_tls">
|
||||
<el-switch v-model="mqtt_tls"></el-switch>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="清除Session:" :label-width="formLabelWidth" prop="mqtt_clearsession">
|
||||
<el-switch v-model="mqtt_clearsession"></el-switch>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<h3 class="info_play">信息发布</h3>
|
||||
<el-divider></el-divider>
|
||||
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="Qos(MQTT):" :label-width="formLabelWidth"
|
||||
prop="upload_week">
|
||||
<el-select v-model="mqtt_qos" placeholder="请选择" 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-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<!-- <el-col :span="12">
|
||||
<el-form-item label="retained:" :label-width="formLabelWidth" prop="retained">
|
||||
<el-switch v-model="value1"></el-switch>
|
||||
</el-form-item>
|
||||
</el-col> -->
|
||||
</el-row>
|
||||
<!-- <el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="入口函数:" :label-width="formLabelWidth" prop="upload_week">
|
||||
<el-input v-model="input1" placeholder="64" style="width: 200px;height:30px"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row> -->
|
||||
<!-- <el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="函数代码:" :label-width="formLabelWidth" prop="upload_week">
|
||||
<prism-editor class="my-editor height-300" v-model="code" :highlight="highlighter"
|
||||
:line-numbers="lineNumbers"></prism-editor>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row> -->
|
||||
<div class="con_left_footer">
|
||||
<el-button type="primary" @click="add_passage = false">保 存</el-button>
|
||||
<el-button @click="add_passage = false">取 消</el-button>
|
||||
</div>
|
||||
</el-form>
|
||||
</div>
|
||||
<div>
|
||||
<el-dialog title="选择点" :visible.sync="choose_point" width="30%">
|
||||
<el-tree :data="points" show-checkbox node-key="id" :default-expanded-keys="[1, 2]"
|
||||
:default-checked-keys="[3, 4, 5, 6]" :props="defaultProps">
|
||||
</el-tree>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="savePoint">保 存</el-button>
|
||||
<el-button @click="choose_point = false">取 消</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 添加按钮下显示出来的弹框信息 -->
|
||||
<div>
|
||||
<el-dialog title="选择点" :visible.sync="choose_point" width="30%">
|
||||
<el-tree :data="points" show-checkbox node-key="id" :default-expanded-keys="[1, 2]"
|
||||
:default-checked-keys="[3, 4, 5, 6]" :props="defaultProps">
|
||||
</el-tree>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="choose_point = false">保 存</el-button>
|
||||
<el-button @click="choose_point = false">取 消</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { PrismEditor } from "vue-prism-editor";
|
||||
import "vue-prism-editor/dist/prismeditor.min.css"; // import the styles somewhere
|
||||
// import highlighting library (you can use any library you want just return html string)
|
||||
import { highlight, languages } from "prismjs/components/prism-core";
|
||||
import "prismjs/components/prism-clike";
|
||||
import "prismjs/components/prism-javascript";
|
||||
import "prismjs/themes/prism-tomorrow.css"; // import syntax highlighting styles
|
||||
|
||||
export default {
|
||||
name: "ChiClone",
|
||||
components: {
|
||||
PrismEditor,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
mqtt_qiyong: true,
|
||||
mqtt_ip: "",
|
||||
mqtt_ip1: "",
|
||||
mqtt_ip2: "",
|
||||
mqtt_ip3: "",
|
||||
mqtt_ip4: "",
|
||||
mqtt_wgsn: "",
|
||||
mqtt_port: "",
|
||||
mqtt_keepalive: "",
|
||||
mqtt_tls: false,
|
||||
mqtt_clearsession: false,
|
||||
// mqtt_sssjfbzt:"",
|
||||
mqtt_qos: "0",
|
||||
// code: 'console.log("Hello World")',
|
||||
// lineNumbers: true, // true为编辑模式， false只展示不可编辑
|
||||
points: [
|
||||
{
|
||||
id: 1,
|
||||
label: "Device1",
|
||||
children: [
|
||||
{
|
||||
id: 3,
|
||||
label: "tag0001",
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
label: "tag0002",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
label: "Device1",
|
||||
children: [
|
||||
{
|
||||
id: 5,
|
||||
label: "tag0003",
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
label: "tag0004",
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
choose_point: false,
|
||||
options1: [
|
||||
{
|
||||
value: "0",
|
||||
label: "0",
|
||||
},
|
||||
{
|
||||
value: "1",
|
||||
label: "1",
|
||||
},
|
||||
{
|
||||
value: "2",
|
||||
label: "2",
|
||||
},
|
||||
],
|
||||
labelPosition: "left",
|
||||
formLabelWidth: "114px",
|
||||
input1: 192,
|
||||
add_passage: false,
|
||||
rightMenu: "",
|
||||
dialogVisible: true,
|
||||
menuShow: false,
|
||||
datas: [
|
||||
{
|
||||
label: "Gateway",
|
||||
children: [
|
||||
{
|
||||
label: "数据采集",
|
||||
children: [
|
||||
{
|
||||
id: 1,
|
||||
label: 'Device1',
|
||||
children: [
|
||||
{
|
||||
id: 3,
|
||||
label: 'tag0001',
|
||||
}, {
|
||||
id: 4,
|
||||
label: 'tag0002',
|
||||
},
|
||||
]
|
||||
}, {
|
||||
id: 2,
|
||||
label: 'Device1',
|
||||
children: [
|
||||
{
|
||||
id: 5,
|
||||
label: 'tag0003',
|
||||
}, {
|
||||
id: 6,
|
||||
label: 'tag0004',
|
||||
},
|
||||
]
|
||||
}],
|
||||
}
|
||||
],
|
||||
choose_point: false,
|
||||
options1: [{
|
||||
value: '0',
|
||||
label: '0'
|
||||
}, {
|
||||
value: '1',
|
||||
label: '1'
|
||||
}, {
|
||||
value: '2',
|
||||
label: '2'
|
||||
}],
|
||||
labelPosition: "left",
|
||||
formLabelWidth: "114px",
|
||||
input1: 192,
|
||||
add_passage: false,
|
||||
rightMenu: "",
|
||||
dialogVisible: true,
|
||||
isAdd: false,
|
||||
datas: [{
|
||||
label: 'Gateway',
|
||||
children: [{
|
||||
label: '数据采集',
|
||||
children: [{
|
||||
label: 'I/O点'
|
||||
},
|
||||
{
|
||||
label: '用户点',
|
||||
},
|
||||
{
|
||||
label: '计算点',
|
||||
},
|
||||
{
|
||||
label: '系统点',
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
label: "用户点",
|
||||
},
|
||||
{
|
||||
label: "计算点",
|
||||
},
|
||||
{
|
||||
label: "系统点",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "上云服务",
|
||||
children: [
|
||||
{
|
||||
label: "标准 MQTT",
|
||||
},
|
||||
{
|
||||
label: "AWS loT",
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
defaultProps: {
|
||||
children: "children",
|
||||
label: "label",
|
||||
},
|
||||
tableData: [
|
||||
{
|
||||
mqtt_cjd_sbmc: "Device1",
|
||||
mqtt_cjd_tagid: "Device1.tag0001",
|
||||
}],
|
||||
methods: {
|
||||
handleSelect(key) {
|
||||
console.log(key);
|
||||
if (key == 1 && this.isAdd == false) {
|
||||
this.choose_point = true;
|
||||
} else if (key == 1 && this.isAdd == true) {
|
||||
alert("只能添加一次");
|
||||
}
|
||||
},
|
||||
highlighter(code) {
|
||||
return highlight(code, languages.js); //returns html
|
||||
},
|
||||
closeMenu(ev) {
|
||||
console.log({ ev });
|
||||
this.dialogVisible = false;
|
||||
},
|
||||
savePoint() {
|
||||
this.choose_point = false;
|
||||
this.isAdd = true;
|
||||
},
|
||||
},
|
||||
directives: {
|
||||
'click-outside': {
|
||||
bind: function (el, binding, vnode) {
|
||||
console.log('el', el);
|
||||
console.log("binding", binding);
|
||||
el.event = function (event) {
|
||||
// 检查点击是否发生在节点之内（包括子节点）
|
||||
if (!(el == event.target || el.contains(event.target))) {
|
||||
// 如果没有，则触发调用
|
||||
// 若绑定值为函数，则执行
|
||||
// 这里我们可以通过钩子函数中的 vnode.context，来获取当前组件的作用域
|
||||
if (typeof vnode.context[binding.expression] == 'function') {
|
||||
vnode.context[binding.expression](event)
|
||||
}
|
||||
}
|
||||
}
|
||||
// 绑定事件
|
||||
// 设置为true，代表在DOM树中，注册了该listener的元素，会先于它下方的任何事件目标，接收到该事件。
|
||||
document.body.addEventListener('click', el.event, true)
|
||||
},
|
||||
unbind: function (el) {
|
||||
// 解绑事件
|
||||
document.body.removeEventListener('click', el.event, true)
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.tree_menu {
|
||||
position: absolute;
|
||||
width: 286px;
|
||||
height: 753px;
|
||||
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);
|
||||
}
|
||||
|
||||
/deep/ .pas_params {
|
||||
.info_play {
|
||||
width: 56px;
|
||||
height: 20px;
|
||||
color: rgba(16, 16, 16, 1);
|
||||
font-size: 14px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.el-divider--horizontal {
|
||||
margin: 8px 0;
|
||||
}
|
||||
|
||||
.el-button {
|
||||
width: 80px;
|
||||
height: 30px;
|
||||
line-height: 0.5;
|
||||
}
|
||||
|
||||
.el-col-12:last-child {
|
||||
padding-right: 150px;
|
||||
}
|
||||
|
||||
.el-col-12:first-child {
|
||||
padding-right: 28px;
|
||||
}
|
||||
|
||||
.el-row {
|
||||
height: 40px;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
|
||||
.el-col-1 {
|
||||
text-align: center;
|
||||
line-height: 52px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.el-col-9 {
|
||||
padding-left: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.el-input__inner {
|
||||
height: 30px;
|
||||
text-align: left;
|
||||
padding: 0px 8px;
|
||||
}
|
||||
|
||||
.content {
|
||||
position: absolute;
|
||||
left: 362px;
|
||||
top: 104px;
|
||||
width: 1220px;
|
||||
height: 836px;
|
||||
line-height: 20px;
|
||||
padding-left: 36px;
|
||||
background-color: rgba(255, 255, 255, 1);
|
||||
color: rgba(16, 16, 16, 1);
|
||||
font-size: 14px;
|
||||
border: 1px solid rgba(187, 187, 187, 1);
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
|
||||
.el-form-item {
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
/deep/ .con_left {
|
||||
.el-con-5 {
|
||||
width: 43px;
|
||||
}
|
||||
}
|
||||
|
||||
.con_left {
|
||||
width: 709px;
|
||||
position: relative;
|
||||
|
||||
.my-editor {
|
||||
background: #2d2d2d;
|
||||
color: #ccc;
|
||||
|
||||
font-family: Fira code, Fira Mono, Consolas, Menlo, Courier, monospace;
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
/* optional */
|
||||
.prism-editor__textarea:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
/* not required: */
|
||||
.height-300 {
|
||||
width: 491px;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.infos {
|
||||
width: 60px;
|
||||
position: absolute;
|
||||
left: 208px;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.con_left_footer {
|
||||
position: absolute;
|
||||
left: 499px;
|
||||
top: 720px;
|
||||
}
|
||||
}
|
||||
|
||||
.con_right {
|
||||
width: 480px;
|
||||
|
||||
.dialog-footer {
|
||||
.el-button {
|
||||
width: 80px;
|
||||
height: 30px;
|
||||
line-height: 0.5;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,565 @@
|
|||
<!-- 斥候MQTT云 -->
|
||||
<template>
|
||||
<div class="Clone">
|
||||
<!-- 设置树形控件 -->
|
||||
<div v-click-outside="closeMenu">
|
||||
<!-- <el-button type="info" plain @click="dialogVisible = true">斥侯MQTT云</el-button> -->
|
||||
<div v-show="dialogVisible" class="tree_menu">
|
||||
<el-tree :data="datas" :props="defaultProps" @node-click="treeNodeClick"></el-tree>
|
||||
<!-- 树形控件右键组件 -->
|
||||
</div>
|
||||
</div>
|
||||
<div class="pas_params" v-show="add_passage">
|
||||
<div class="content">
|
||||
<div class="con_left">
|
||||
<el-form :label-position="labelPosition" :rules="rules" ref="ruleForm">
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-form-item>
|
||||
<el-checkbox v-model="mqtt_qiyong">启用</el-checkbox>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="服务器IP:" :label-width="formLabelWidth" prop="mqtt_ip">
|
||||
<el-row>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="mqtt_ip1" style="width: 43px; height: 30px"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1">. </el-col>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="mqtt_ip2" style="width: 43px; height: 30px"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1">.</el-col>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="mqtt_ip3" style="width: 43px; height: 30px"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1">.</el-col>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="mqtt_ip4" style="width: 43px; height: 30px"></el-input>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="网关SN:" :label-width="formLabelWidth" prop="mqtt_wgsn">
|
||||
<el-input v-model="mqtt_wgsn" placeholder=""
|
||||
style="width: 200px; height: 30px"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="端口:" :label-width="formLabelWidth" prop="mqtt_port">
|
||||
<el-input v-model="mqtt_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="Keep Alive(s):" :label-width="formLabelWidth" prop="mqtt_keepalive">
|
||||
<el-input v-model="mqtt_keepalive" placeholder="64"
|
||||
style="width: 200px; height: 30px"></el-input>
|
||||
<div class="infos">2-60000</div>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="TLS加密:" :label-width="formLabelWidth" prop="mqtt_tls">
|
||||
<el-switch v-model="mqtt_tls"></el-switch>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="清除Session:" :label-width="formLabelWidth" prop="mqtt_clearsession">
|
||||
<el-switch v-model="mqtt_clearsession"></el-switch>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<h3 class="info_play">信息发布</h3>
|
||||
<el-divider></el-divider>
|
||||
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="Qos(MQTT):" :label-width="formLabelWidth"
|
||||
prop="upload_week">
|
||||
<el-select v-model="mqtt_qos" placeholder="请选择" 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-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<!-- <el-col :span="12">
|
||||
<el-form-item label="retained:" :label-width="formLabelWidth" prop="retained">
|
||||
<el-switch v-model="value1"></el-switch>
|
||||
</el-form-item>
|
||||
</el-col> -->
|
||||
</el-row>
|
||||
<!-- <el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="入口函数:" :label-width="formLabelWidth" prop="upload_week">
|
||||
<el-input v-model="input1" placeholder="64" style="width: 200px;height:30px"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row> -->
|
||||
<!-- <el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="函数代码:" :label-width="formLabelWidth" prop="upload_week">
|
||||
<prism-editor class="my-editor height-300" v-model="code" :highlight="highlighter"
|
||||
:line-numbers="lineNumbers"></prism-editor>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row> -->
|
||||
<div class="con_left_footer">
|
||||
<el-button type="primary" @click="add_passage = false">保 存</el-button>
|
||||
<el-button @click="add_passage = false">取 消</el-button>
|
||||
</div>
|
||||
</el-form>
|
||||
</div>
|
||||
<div>
|
||||
<el-dialog title="选择点" :visible.sync="choose_point" width="30%">
|
||||
<el-tree :data="points" show-checkbox node-key="id" :default-expanded-keys="[1, 2]"
|
||||
:default-checked-keys="[3, 4, 5, 6]" :props="defaultProps">
|
||||
</el-tree>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="savePoint">保 存</el-button>
|
||||
<el-button @click="choose_point = false">取 消</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 添加按钮下显示出来的弹框信息 -->
|
||||
<div>
|
||||
<el-dialog title="选择点" :visible.sync="choose_point" width="30%">
|
||||
<el-tree :data="points" show-checkbox node-key="id" :default-expanded-keys="[1, 2]"
|
||||
:default-checked-keys="[3, 4, 5, 6]" :props="defaultProps">
|
||||
</el-tree>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="choose_point = false">保 存</el-button>
|
||||
<el-button @click="choose_point = false">取 消</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { PrismEditor } from "vue-prism-editor";
|
||||
import "vue-prism-editor/dist/prismeditor.min.css"; // import the styles somewhere
|
||||
// import highlighting library (you can use any library you want just return html string)
|
||||
import { highlight, languages } from "prismjs/components/prism-core";
|
||||
import "prismjs/components/prism-clike";
|
||||
import "prismjs/components/prism-javascript";
|
||||
import "prismjs/themes/prism-tomorrow.css"; // import syntax highlighting styles
|
||||
|
||||
export default {
|
||||
name: "ChiClone",
|
||||
components: {
|
||||
PrismEditor,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
mqtt_qiyong: true,
|
||||
mqtt_ip: "",
|
||||
mqtt_ip1: "",
|
||||
mqtt_ip2: "",
|
||||
mqtt_ip3: "",
|
||||
mqtt_ip4: "",
|
||||
mqtt_wgsn: "",
|
||||
mqtt_port: "",
|
||||
mqtt_keepalive: "",
|
||||
mqtt_tls: false,
|
||||
mqtt_clearsession: false,
|
||||
// mqtt_sssjfbzt:"",
|
||||
mqtt_qos: "0",
|
||||
// code: 'console.log("Hello World")',
|
||||
// lineNumbers: true, // true为编辑模式， false只展示不可编辑
|
||||
points: [
|
||||
{
|
||||
id: 1,
|
||||
label: "Device1",
|
||||
children: [
|
||||
{
|
||||
id: 3,
|
||||
label: "tag0001",
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
label: "tag0002",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
label: "Device1",
|
||||
children: [
|
||||
{
|
||||
id: 5,
|
||||
label: "tag0003",
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
label: "tag0004",
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
choose_point: false,
|
||||
options1: [
|
||||
{
|
||||
value: "0",
|
||||
label: "0",
|
||||
},
|
||||
{
|
||||
value: "1",
|
||||
label: "1",
|
||||
},
|
||||
{
|
||||
value: "2",
|
||||
label: "2",
|
||||
},
|
||||
],
|
||||
labelPosition: "left",
|
||||
formLabelWidth: "114px",
|
||||
input1: 192,
|
||||
add_passage: false,
|
||||
rightMenu: "",
|
||||
dialogVisible: true,
|
||||
menuShow: false,
|
||||
datas: [
|
||||
{
|
||||
label: "Gateway",
|
||||
children: [
|
||||
{
|
||||
label: "数据采集",
|
||||
children: [
|
||||
{
|
||||
id: 1,
|
||||
label: 'Device1',
|
||||
children: [
|
||||
{
|
||||
id: 3,
|
||||
label: 'tag0001',
|
||||
}, {
|
||||
id: 4,
|
||||
label: 'tag0002',
|
||||
},
|
||||
]
|
||||
}, {
|
||||
id: 2,
|
||||
label: 'Device1',
|
||||
children: [
|
||||
{
|
||||
id: 5,
|
||||
label: 'tag0003',
|
||||
}, {
|
||||
id: 6,
|
||||
label: 'tag0004',
|
||||
},
|
||||
]
|
||||
}],
|
||||
}
|
||||
],
|
||||
choose_point: false,
|
||||
options1: [{
|
||||
value: '0',
|
||||
label: '0'
|
||||
}, {
|
||||
value: '1',
|
||||
label: '1'
|
||||
}, {
|
||||
value: '2',
|
||||
label: '2'
|
||||
}],
|
||||
labelPosition: "left",
|
||||
formLabelWidth: "114px",
|
||||
input1: 192,
|
||||
add_passage: false,
|
||||
rightMenu: "",
|
||||
dialogVisible: true,
|
||||
isAdd: false,
|
||||
datas: [{
|
||||
label: 'Gateway',
|
||||
children: [{
|
||||
label: '数据采集',
|
||||
children: [{
|
||||
label: 'I/O点'
|
||||
},
|
||||
{
|
||||
label: '用户点',
|
||||
},
|
||||
{
|
||||
label: '计算点',
|
||||
},
|
||||
{
|
||||
label: '系统点',
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
label: "用户点",
|
||||
},
|
||||
{
|
||||
label: "计算点",
|
||||
},
|
||||
{
|
||||
label: "系统点",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "上云服务",
|
||||
children: [
|
||||
{
|
||||
label: "标准 MQTT",
|
||||
},
|
||||
{
|
||||
label: "AWS loT",
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
defaultProps: {
|
||||
children: "children",
|
||||
label: "label",
|
||||
},
|
||||
tableData: [
|
||||
{
|
||||
mqtt_cjd_sbmc: "Device1",
|
||||
mqtt_cjd_tagid: "Device1.tag0001",
|
||||
}],
|
||||
rules: {
|
||||
server_ip: [
|
||||
{ required: true, message: "请输入服务器IP", trigger: "blur" },
|
||||
],
|
||||
port_number: [
|
||||
{ required: true, message: "请输入端口", trigger: "blur" },
|
||||
],
|
||||
gateway_id: [
|
||||
{ required: true, message: "请输入网关ID", trigger: "blur" },
|
||||
],
|
||||
data_theme: [
|
||||
{ required: true, message: "请输入主题", trigger: "blur" },
|
||||
],
|
||||
upload_mode: [
|
||||
{ required: true, message: "请输入上传模式", trigger: "blur" },
|
||||
],
|
||||
upload_week: [
|
||||
{ required: true, message: "请输入上传周期", trigger: "blur" },
|
||||
],
|
||||
data_filter: [
|
||||
{ required: true, message: "请输入数据过滤", trigger: "blur" },
|
||||
],
|
||||
},
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
handleSelect(key) {
|
||||
console.log(key);
|
||||
if (key == 1 && this.isAdd == false) {
|
||||
this.choose_point = true;
|
||||
} else if (key == 1 && this.isAdd == true) {
|
||||
alert("只能添加一次");
|
||||
}
|
||||
},
|
||||
highlighter(code) {
|
||||
return highlight(code, languages.js); //returns html
|
||||
},
|
||||
closeMenu(ev) {
|
||||
console.log({ ev });
|
||||
this.dialogVisible = false;
|
||||
},
|
||||
savePoint() {
|
||||
this.choose_point = false;
|
||||
this.isAdd = true;
|
||||
},
|
||||
},
|
||||
directives: {
|
||||
'click-outside': {
|
||||
bind: function (el, binding, vnode) {
|
||||
console.log('el', el);
|
||||
console.log("binding", binding);
|
||||
el.event = function (event) {
|
||||
// 检查点击是否发生在节点之内（包括子节点）
|
||||
if (!(el == event.target || el.contains(event.target))) {
|
||||
// 如果没有，则触发调用
|
||||
// 若绑定值为函数，则执行
|
||||
// 这里我们可以通过钩子函数中的 vnode.context，来获取当前组件的作用域
|
||||
if (typeof vnode.context[binding.expression] == 'function') {
|
||||
vnode.context[binding.expression](event)
|
||||
}
|
||||
}
|
||||
}
|
||||
// 绑定事件
|
||||
// 设置为true，代表在DOM树中，注册了该listener的元素，会先于它下方的任何事件目标，接收到该事件。
|
||||
document.body.addEventListener('click', el.event, true)
|
||||
},
|
||||
unbind: function (el) {
|
||||
// 解绑事件
|
||||
document.body.removeEventListener('click', el.event, true)
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.tree_menu {
|
||||
position: absolute;
|
||||
width: 286px;
|
||||
height: 753px;
|
||||
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);
|
||||
}
|
||||
|
||||
/deep/ .pas_params {
|
||||
.info_play {
|
||||
width: 56px;
|
||||
height: 20px;
|
||||
color: rgba(16, 16, 16, 1);
|
||||
font-size: 14px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.el-divider--horizontal {
|
||||
margin: 8px 0;
|
||||
}
|
||||
|
||||
.el-button {
|
||||
width: 80px;
|
||||
height: 30px;
|
||||
line-height: 0.5;
|
||||
}
|
||||
|
||||
.el-col-12:last-child {
|
||||
padding-right: 150px;
|
||||
}
|
||||
|
||||
.el-col-12:first-child {
|
||||
padding-right: 28px;
|
||||
}
|
||||
|
||||
.el-row {
|
||||
height: 40px;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
|
||||
.el-col-1 {
|
||||
text-align: center;
|
||||
line-height: 52px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.el-col-9 {
|
||||
padding-left: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.el-input__inner {
|
||||
height: 30px;
|
||||
text-align: left;
|
||||
padding: 0px 8px;
|
||||
}
|
||||
|
||||
.content {
|
||||
position: absolute;
|
||||
left: 362px;
|
||||
top: 104px;
|
||||
width: 1220px;
|
||||
height: 836px;
|
||||
line-height: 20px;
|
||||
padding-left: 36px;
|
||||
background-color: rgba(255, 255, 255, 1);
|
||||
color: rgba(16, 16, 16, 1);
|
||||
font-size: 14px;
|
||||
border: 1px solid rgba(187, 187, 187, 1);
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
|
||||
.el-form-item {
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
/deep/ .con_left {
|
||||
.el-con-5 {
|
||||
width: 43px;
|
||||
}
|
||||
}
|
||||
|
||||
.con_left {
|
||||
width: 709px;
|
||||
position: relative;
|
||||
|
||||
.my-editor {
|
||||
background: #2d2d2d;
|
||||
color: #ccc;
|
||||
|
||||
font-family: Fira code, Fira Mono, Consolas, Menlo, Courier, monospace;
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
/* optional */
|
||||
.prism-editor__textarea:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
/* not required: */
|
||||
.height-300 {
|
||||
width: 491px;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.infos {
|
||||
width: 60px;
|
||||
position: absolute;
|
||||
left: 208px;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.con_left_footer {
|
||||
position: absolute;
|
||||
left: 499px;
|
||||
top: 720px;
|
||||
}
|
||||
}
|
||||
|
||||
.con_right {
|
||||
width: 480px;
|
||||
|
||||
.dialog-footer {
|
||||
.el-button {
|
||||
width: 80px;
|
||||
height: 30px;
|
||||
line-height: 0.5;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,571 @@
|
|||
<!-- 斥候MQTT云 -->
|
||||
<template>
|
||||
<div class="Clone">
|
||||
<!-- 设置树形控件 -->
|
||||
<div v-click-outside="closeMenu">
|
||||
<!-- <el-button type="info" plain @click="dialogVisible = true">斥侯MQTT云</el-button> -->
|
||||
<div v-show="dialogVisible" class="tree_menu">
|
||||
<el-tree :data="datas" :props="defaultProps" @node-click="treeNodeClick"></el-tree>
|
||||
<!-- 树形控件右键组件 -->
|
||||
</div>
|
||||
</div>
|
||||
<div class="pas_params" v-show="add_passage">
|
||||
<div class="content">
|
||||
<div class="con_left">
|
||||
<el-form :label-position="labelPosition" :rules="rules" ref="ruleForm">
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-form-item>
|
||||
<el-checkbox v-model="mqtt_qiyong">启用</el-checkbox>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="服务器IP:" :label-width="formLabelWidth" prop="mqtt_ip">
|
||||
<el-row>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="mqtt_ip1" style="width: 43px; height: 30px"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1">. </el-col>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="mqtt_ip2" style="width: 43px; height: 30px"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1">.</el-col>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="mqtt_ip3" style="width: 43px; height: 30px"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1">.</el-col>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="mqtt_ip4" style="width: 43px; height: 30px"></el-input>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="网关SN:" :label-width="formLabelWidth" prop="mqtt_wgsn">
|
||||
<el-input v-model="mqtt_wgsn" placeholder=""
|
||||
style="width: 200px; height: 30px"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="端口:" :label-width="formLabelWidth" prop="mqtt_port">
|
||||
<el-input v-model="mqtt_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="Keep Alive(s):" :label-width="formLabelWidth" prop="mqtt_keepalive">
|
||||
<el-input v-model="mqtt_keepalive" placeholder="64"
|
||||
style="width: 200px; height: 30px"></el-input>
|
||||
<div class="infos">2-60000</div>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="TLS加密:" :label-width="formLabelWidth" prop="mqtt_tls">
|
||||
<el-switch v-model="mqtt_tls"></el-switch>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="清除Session:" :label-width="formLabelWidth" prop="mqtt_clearsession">
|
||||
<el-switch v-model="mqtt_clearsession"></el-switch>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<h3 class="info_play">信息发布</h3>
|
||||
<el-divider></el-divider>
|
||||
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="Qos(MQTT):" :label-width="formLabelWidth"
|
||||
prop="upload_week">
|
||||
<el-select v-model="mqtt_qos" placeholder="请选择" 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-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<!-- <el-col :span="12">
|
||||
<el-form-item label="retained:" :label-width="formLabelWidth" prop="retained">
|
||||
<el-switch v-model="value1"></el-switch>
|
||||
</el-form-item>
|
||||
</el-col> -->
|
||||
</el-row>
|
||||
<!-- <el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="入口函数:" :label-width="formLabelWidth" prop="upload_week">
|
||||
<el-input v-model="input1" placeholder="64" style="width: 200px;height:30px"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row> -->
|
||||
<!-- <el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="函数代码:" :label-width="formLabelWidth" prop="upload_week">
|
||||
<prism-editor class="my-editor height-300" v-model="code" :highlight="highlighter"
|
||||
:line-numbers="lineNumbers"></prism-editor>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row> -->
|
||||
<div class="con_left_footer">
|
||||
<el-button type="primary" @click="add_passage = false">保 存</el-button>
|
||||
<el-button @click="add_passage = false">取 消</el-button>
|
||||
</div>
|
||||
</el-form>
|
||||
</div>
|
||||
<div>
|
||||
<el-dialog title="选择点" :visible.sync="choose_point" width="30%">
|
||||
<el-tree :data="points" show-checkbox node-key="id" :default-expanded-keys="[1, 2]"
|
||||
:default-checked-keys="[3, 4, 5, 6]" :props="defaultProps">
|
||||
</el-tree>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="savePoint">保 存</el-button>
|
||||
<el-button @click="choose_point = false">取 消</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 添加按钮下显示出来的弹框信息 -->
|
||||
<div>
|
||||
<el-dialog title="选择点" :visible.sync="choose_point" width="30%">
|
||||
<el-tree :data="points" show-checkbox node-key="id" :default-expanded-keys="[1, 2]"
|
||||
:default-checked-keys="[3, 4, 5, 6]" :props="defaultProps">
|
||||
</el-tree>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="choose_point = false">保 存</el-button>
|
||||
<el-button @click="choose_point = false">取 消</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { PrismEditor } from "vue-prism-editor";
|
||||
import "vue-prism-editor/dist/prismeditor.min.css"; // import the styles somewhere
|
||||
// import highlighting library (you can use any library you want just return html string)
|
||||
import { highlight, languages } from "prismjs/components/prism-core";
|
||||
import "prismjs/components/prism-clike";
|
||||
import "prismjs/components/prism-javascript";
|
||||
import "prismjs/themes/prism-tomorrow.css"; // import syntax highlighting styles
|
||||
|
||||
export default {
|
||||
name: "ChiClone",
|
||||
components: {
|
||||
PrismEditor,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
mqtt_qiyong: true,
|
||||
mqtt_ip: "",
|
||||
mqtt_ip1: "",
|
||||
mqtt_ip2: "",
|
||||
mqtt_ip3: "",
|
||||
mqtt_ip4: "",
|
||||
mqtt_wgsn: "",
|
||||
mqtt_port: "",
|
||||
mqtt_keepalive: "",
|
||||
mqtt_tls: false,
|
||||
mqtt_clearsession: false,
|
||||
// mqtt_sssjfbzt:"",
|
||||
mqtt_qos: "0",
|
||||
// code: 'console.log("Hello World")',
|
||||
// lineNumbers: true, // true为编辑模式， false只展示不可编辑
|
||||
points: [
|
||||
{
|
||||
id: 1,
|
||||
label: "Device1",
|
||||
children: [
|
||||
{
|
||||
id: 3,
|
||||
label: "tag0001",
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
label: "tag0002",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
label: "Device1",
|
||||
children: [
|
||||
{
|
||||
id: 5,
|
||||
label: "tag0003",
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
label: "tag0004",
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
choose_point: false,
|
||||
options1: [
|
||||
{
|
||||
value: "0",
|
||||
label: "0",
|
||||
},
|
||||
{
|
||||
value: "1",
|
||||
label: "1",
|
||||
},
|
||||
{
|
||||
value: "2",
|
||||
label: "2",
|
||||
},
|
||||
],
|
||||
labelPosition: "left",
|
||||
formLabelWidth: "114px",
|
||||
input1: 192,
|
||||
add_passage: false,
|
||||
rightMenu: "",
|
||||
dialogVisible: true,
|
||||
menuShow: false,
|
||||
datas: [
|
||||
{
|
||||
label: "Gateway",
|
||||
children: [
|
||||
{
|
||||
label: "数据采集",
|
||||
children: [
|
||||
{
|
||||
id: 1,
|
||||
label: 'Device1',
|
||||
children: [
|
||||
{
|
||||
id: 3,
|
||||
label: 'tag0001',
|
||||
}, {
|
||||
id: 4,
|
||||
label: 'tag0002',
|
||||
},
|
||||
]
|
||||
}, {
|
||||
id: 2,
|
||||
label: 'Device1',
|
||||
children: [
|
||||
{
|
||||
id: 5,
|
||||
label: 'tag0003',
|
||||
}, {
|
||||
id: 6,
|
||||
label: 'tag0004',
|
||||
},
|
||||
]
|
||||
}],
|
||||
}
|
||||
],
|
||||
choose_point: false,
|
||||
options1: [{
|
||||
value: '0',
|
||||
label: '0'
|
||||
}, {
|
||||
value: '1',
|
||||
label: '1'
|
||||
}, {
|
||||
value: '2',
|
||||
label: '2'
|
||||
}],
|
||||
labelPosition: "left",
|
||||
formLabelWidth: "114px",
|
||||
input1: 192,
|
||||
add_passage: false,
|
||||
rightMenu: "",
|
||||
dialogVisible: true,
|
||||
isAdd: false,
|
||||
datas: [{
|
||||
label: 'Gateway',
|
||||
children: [{
|
||||
label: '数据采集',
|
||||
children: [{
|
||||
label: 'I/O点'
|
||||
},
|
||||
{
|
||||
label: '用户点',
|
||||
},
|
||||
{
|
||||
label: '计算点',
|
||||
},
|
||||
{
|
||||
label: '系统点',
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
label: "用户点",
|
||||
},
|
||||
{
|
||||
label: "计算点",
|
||||
},
|
||||
{
|
||||
label: "系统点",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "上云服务",
|
||||
children: [
|
||||
{
|
||||
label: "标准 MQTT",
|
||||
},
|
||||
{
|
||||
label: "AWS loT",
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
defaultProps: {
|
||||
children: "children",
|
||||
label: "label",
|
||||
},
|
||||
tableData: [
|
||||
{
|
||||
mqtt_cjd_sbmc: "Device1",
|
||||
mqtt_cjd_tagid: "Device1.tag0001",
|
||||
}],
|
||||
rules: {
|
||||
server_ip: [
|
||||
{ required: true, message: "请输入服务器IP", trigger: "blur" },
|
||||
],
|
||||
port_number: [
|
||||
{ required: true, message: "请输入端口", trigger: "blur" },
|
||||
],
|
||||
gateway_id: [
|
||||
{ required: true, message: "请输入网关ID", trigger: "blur" },
|
||||
],
|
||||
data_theme: [
|
||||
{ required: true, message: "请输入主题", trigger: "blur" },
|
||||
],
|
||||
upload_mode: [
|
||||
{ required: true, message: "请输入上传模式", trigger: "blur" },
|
||||
],
|
||||
upload_week: [
|
||||
{ required: true, message: "请输入上传周期", trigger: "blur" },
|
||||
],
|
||||
data_filter: [
|
||||
{ required: true, message: "请输入数据过滤", trigger: "blur" },
|
||||
],
|
||||
},
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
treeNodeClick() {
|
||||
this.add_passage = true;
|
||||
},
|
||||
getDriveName() {
|
||||
this.diag_drive = true;
|
||||
},
|
||||
handleSelect(key) {
|
||||
console.log(key);
|
||||
if (key == 1) {
|
||||
this.choose_point = true;
|
||||
}
|
||||
},
|
||||
highlighter(code) {
|
||||
return highlight(code, languages.js); //returns html
|
||||
},
|
||||
closeMenu(ev) {
|
||||
console.log({ ev });
|
||||
this.dialogVisible = false;
|
||||
},
|
||||
savePoint() {
|
||||
this.choose_point = false;
|
||||
this.isAdd = true;
|
||||
},
|
||||
},
|
||||
|
||||
},
|
||||
directives: {
|
||||
'click-outside': {
|
||||
bind: function (el, binding, vnode) {
|
||||
console.log('el', el);
|
||||
console.log("binding", binding);
|
||||
el.event = function (event) {
|
||||
// 检查点击是否发生在节点之内（包括子节点）
|
||||
if (!(el == event.target || el.contains(event.target))) {
|
||||
// 如果没有，则触发调用
|
||||
// 若绑定值为函数，则执行
|
||||
// 这里我们可以通过钩子函数中的 vnode.context，来获取当前组件的作用域
|
||||
if (typeof vnode.context[binding.expression] == 'function') {
|
||||
vnode.context[binding.expression](event)
|
||||
}
|
||||
}
|
||||
}
|
||||
// 绑定事件
|
||||
// 设置为true，代表在DOM树中，注册了该listener的元素，会先于它下方的任何事件目标，接收到该事件。
|
||||
document.body.addEventListener('click', el.event, true)
|
||||
},
|
||||
unbind: function (el) {
|
||||
// 解绑事件
|
||||
document.body.removeEventListener('click', el.event, true)
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.tree_menu {
|
||||
position: absolute;
|
||||
width: 286px;
|
||||
height: 753px;
|
||||
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);
|
||||
}
|
||||
|
||||
/deep/ .pas_params {
|
||||
.info_play {
|
||||
width: 56px;
|
||||
height: 20px;
|
||||
color: rgba(16, 16, 16, 1);
|
||||
font-size: 14px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.el-divider--horizontal {
|
||||
margin: 8px 0;
|
||||
}
|
||||
|
||||
.el-button {
|
||||
width: 80px;
|
||||
height: 30px;
|
||||
line-height: 0.5;
|
||||
}
|
||||
|
||||
.el-col-12:last-child {
|
||||
padding-right: 150px;
|
||||
}
|
||||
|
||||
.el-col-12:first-child {
|
||||
padding-right: 28px;
|
||||
}
|
||||
|
||||
.el-row {
|
||||
height: 40px;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
|
||||
.el-col-1 {
|
||||
text-align: center;
|
||||
line-height: 52px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.el-col-9 {
|
||||
padding-left: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.el-input__inner {
|
||||
height: 30px;
|
||||
text-align: left;
|
||||
padding: 0px 8px;
|
||||
}
|
||||
|
||||
.content {
|
||||
position: absolute;
|
||||
left: 362px;
|
||||
top: 104px;
|
||||
width: 1220px;
|
||||
height: 836px;
|
||||
line-height: 20px;
|
||||
padding-left: 36px;
|
||||
background-color: rgba(255, 255, 255, 1);
|
||||
color: rgba(16, 16, 16, 1);
|
||||
font-size: 14px;
|
||||
border: 1px solid rgba(187, 187, 187, 1);
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
|
||||
.el-form-item {
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
/deep/ .con_left {
|
||||
.el-con-5 {
|
||||
width: 43px;
|
||||
}
|
||||
}
|
||||
|
||||
.con_left {
|
||||
width: 709px;
|
||||
position: relative;
|
||||
|
||||
.my-editor {
|
||||
background: #2d2d2d;
|
||||
color: #ccc;
|
||||
|
||||
font-family: Fira code, Fira Mono, Consolas, Menlo, Courier, monospace;
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
/* optional */
|
||||
.prism-editor__textarea:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
/* not required: */
|
||||
.height-300 {
|
||||
width: 491px;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.infos {
|
||||
width: 60px;
|
||||
position: absolute;
|
||||
left: 208px;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.con_left_footer {
|
||||
position: absolute;
|
||||
left: 499px;
|
||||
top: 720px;
|
||||
}
|
||||
}
|
||||
|
||||
.con_right {
|
||||
width: 480px;
|
||||
|
||||
.dialog-footer {
|
||||
.el-button {
|
||||
width: 80px;
|
||||
height: 30px;
|
||||
line-height: 0.5;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,571 @@
|
|||
<!-- 斥候MQTT云 -->
|
||||
<template>
|
||||
<div class="Clone">
|
||||
<!-- 设置树形控件 -->
|
||||
<div v-click-outside="closeMenu">
|
||||
<!-- <el-button type="info" plain @click="dialogVisible = true">斥侯MQTT云</el-button> -->
|
||||
<div v-show="dialogVisible" class="tree_menu">
|
||||
<el-tree :data="datas" :props="defaultProps" @node-click="treeNodeClick"></el-tree>
|
||||
<!-- 树形控件右键组件 -->
|
||||
</div>
|
||||
</div>
|
||||
<div class="pas_params" v-show="add_passage">
|
||||
<div class="content">
|
||||
<div class="con_left">
|
||||
<el-form :label-position="labelPosition" :rules="rules" ref="ruleForm">
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-form-item>
|
||||
<el-checkbox v-model="mqtt_qiyong">启用</el-checkbox>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="服务器IP:" :label-width="formLabelWidth" prop="mqtt_ip">
|
||||
<el-row>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="mqtt_ip1" style="width: 43px; height: 30px"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1">. </el-col>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="mqtt_ip2" style="width: 43px; height: 30px"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1">.</el-col>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="mqtt_ip3" style="width: 43px; height: 30px"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1">.</el-col>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="mqtt_ip4" style="width: 43px; height: 30px"></el-input>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="网关SN:" :label-width="formLabelWidth" prop="mqtt_wgsn">
|
||||
<el-input v-model="mqtt_wgsn" placeholder=""
|
||||
style="width: 200px; height: 30px"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="端口:" :label-width="formLabelWidth" prop="mqtt_port">
|
||||
<el-input v-model="mqtt_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="Keep Alive(s):" :label-width="formLabelWidth" prop="mqtt_keepalive">
|
||||
<el-input v-model="mqtt_keepalive" placeholder="64"
|
||||
style="width: 200px; height: 30px"></el-input>
|
||||
<div class="infos">2-60000</div>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="TLS加密:" :label-width="formLabelWidth" prop="mqtt_tls">
|
||||
<el-switch v-model="mqtt_tls"></el-switch>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="清除Session:" :label-width="formLabelWidth" prop="mqtt_clearsession">
|
||||
<el-switch v-model="mqtt_clearsession"></el-switch>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<h3 class="info_play">信息发布</h3>
|
||||
<el-divider></el-divider>
|
||||
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="Qos(MQTT):" :label-width="formLabelWidth"
|
||||
prop="upload_week">
|
||||
<el-select v-model="mqtt_qos" placeholder="请选择" 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-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<!-- <el-col :span="12">
|
||||
<el-form-item label="retained:" :label-width="formLabelWidth" prop="retained">
|
||||
<el-switch v-model="value1"></el-switch>
|
||||
</el-form-item>
|
||||
</el-col> -->
|
||||
</el-row>
|
||||
<!-- <el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="入口函数:" :label-width="formLabelWidth" prop="upload_week">
|
||||
<el-input v-model="input1" placeholder="64" style="width: 200px;height:30px"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row> -->
|
||||
<!-- <el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="函数代码:" :label-width="formLabelWidth" prop="upload_week">
|
||||
<prism-editor class="my-editor height-300" v-model="code" :highlight="highlighter"
|
||||
:line-numbers="lineNumbers"></prism-editor>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row> -->
|
||||
<div class="con_left_footer">
|
||||
<el-button type="primary" @click="add_passage = false">保 存</el-button>
|
||||
<el-button @click="add_passage = false">取 消</el-button>
|
||||
</div>
|
||||
</el-form>
|
||||
</div>
|
||||
<div>
|
||||
<el-dialog title="选择点" :visible.sync="choose_point" width="30%">
|
||||
<el-tree :data="points" show-checkbox node-key="id" :default-expanded-keys="[1, 2]"
|
||||
:default-checked-keys="[3, 4, 5, 6]" :props="defaultProps">
|
||||
</el-tree>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="savePoint">保 存</el-button>
|
||||
<el-button @click="choose_point = false">取 消</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 添加按钮下显示出来的弹框信息 -->
|
||||
<div>
|
||||
<el-dialog title="选择点" :visible.sync="choose_point" width="30%">
|
||||
<el-tree :data="points" show-checkbox node-key="id" :default-expanded-keys="[1, 2]"
|
||||
:default-checked-keys="[3, 4, 5, 6]" :props="defaultProps">
|
||||
</el-tree>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="choose_point = false">保 存</el-button>
|
||||
<el-button @click="choose_point = false">取 消</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { PrismEditor } from "vue-prism-editor";
|
||||
import "vue-prism-editor/dist/prismeditor.min.css"; // import the styles somewhere
|
||||
// import highlighting library (you can use any library you want just return html string)
|
||||
import { highlight, languages } from "prismjs/components/prism-core";
|
||||
import "prismjs/components/prism-clike";
|
||||
import "prismjs/components/prism-javascript";
|
||||
import "prismjs/themes/prism-tomorrow.css"; // import syntax highlighting styles
|
||||
|
||||
export default {
|
||||
name: "ChiClone",
|
||||
components: {
|
||||
PrismEditor,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
mqtt_qiyong: true,
|
||||
mqtt_ip: "",
|
||||
mqtt_ip1: "",
|
||||
mqtt_ip2: "",
|
||||
mqtt_ip3: "",
|
||||
mqtt_ip4: "",
|
||||
mqtt_wgsn: "",
|
||||
mqtt_port: "",
|
||||
mqtt_keepalive: "",
|
||||
mqtt_tls: false,
|
||||
mqtt_clearsession: false,
|
||||
// mqtt_sssjfbzt:"",
|
||||
mqtt_qos: "0",
|
||||
// code: 'console.log("Hello World")',
|
||||
// lineNumbers: true, // true为编辑模式， false只展示不可编辑
|
||||
points: [
|
||||
{
|
||||
id: 1,
|
||||
label: "Device1",
|
||||
children: [
|
||||
{
|
||||
id: 3,
|
||||
label: "tag0001",
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
label: "tag0002",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
label: "Device1",
|
||||
children: [
|
||||
{
|
||||
id: 5,
|
||||
label: "tag0003",
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
label: "tag0004",
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
choose_point: false,
|
||||
options1: [
|
||||
{
|
||||
value: "0",
|
||||
label: "0",
|
||||
},
|
||||
{
|
||||
value: "1",
|
||||
label: "1",
|
||||
},
|
||||
{
|
||||
value: "2",
|
||||
label: "2",
|
||||
},
|
||||
],
|
||||
labelPosition: "left",
|
||||
formLabelWidth: "114px",
|
||||
input1: 192,
|
||||
add_passage: false,
|
||||
rightMenu: "",
|
||||
dialogVisible: true,
|
||||
menuShow: false,
|
||||
datas: [
|
||||
{
|
||||
label: "Gateway",
|
||||
children: [
|
||||
{
|
||||
label: "数据采集",
|
||||
children: [
|
||||
{
|
||||
id: 1,
|
||||
label: 'Device1',
|
||||
children: [
|
||||
{
|
||||
id: 3,
|
||||
label: 'tag0001',
|
||||
}, {
|
||||
id: 4,
|
||||
label: 'tag0002',
|
||||
},
|
||||
]
|
||||
}, {
|
||||
id: 2,
|
||||
label: 'Device1',
|
||||
children: [
|
||||
{
|
||||
id: 5,
|
||||
label: 'tag0003',
|
||||
}, {
|
||||
id: 6,
|
||||
label: 'tag0004',
|
||||
},
|
||||
]
|
||||
}],
|
||||
}
|
||||
],
|
||||
choose_point: false,
|
||||
options1: [{
|
||||
value: '0',
|
||||
label: '0'
|
||||
}, {
|
||||
value: '1',
|
||||
label: '1'
|
||||
}, {
|
||||
value: '2',
|
||||
label: '2'
|
||||
}],
|
||||
labelPosition: "left",
|
||||
formLabelWidth: "114px",
|
||||
input1: 192,
|
||||
add_passage: false,
|
||||
rightMenu: "",
|
||||
dialogVisible: true,
|
||||
isAdd: false,
|
||||
datas: [{
|
||||
label: 'Gateway',
|
||||
children: [{
|
||||
label: '数据采集',
|
||||
children: [{
|
||||
label: 'I/O点'
|
||||
},
|
||||
{
|
||||
label: '用户点',
|
||||
},
|
||||
{
|
||||
label: '计算点',
|
||||
},
|
||||
{
|
||||
label: '系统点',
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
label: "用户点",
|
||||
},
|
||||
{
|
||||
label: "计算点",
|
||||
},
|
||||
{
|
||||
label: "系统点",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "上云服务",
|
||||
children: [
|
||||
{
|
||||
label: "标准 MQTT",
|
||||
},
|
||||
{
|
||||
label: "AWS loT",
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
defaultProps: {
|
||||
children: "children",
|
||||
label: "label",
|
||||
},
|
||||
tableData: [
|
||||
{
|
||||
mqtt_cjd_sbmc: "Device1",
|
||||
mqtt_cjd_tagid: "Device1.tag0001",
|
||||
}],
|
||||
rules: {
|
||||
server_ip: [
|
||||
{ required: true, message: "请输入服务器IP", trigger: "blur" },
|
||||
],
|
||||
port_number: [
|
||||
{ required: true, message: "请输入端口", trigger: "blur" },
|
||||
],
|
||||
gateway_id: [
|
||||
{ required: true, message: "请输入网关ID", trigger: "blur" },
|
||||
],
|
||||
data_theme: [
|
||||
{ required: true, message: "请输入主题", trigger: "blur" },
|
||||
],
|
||||
upload_mode: [
|
||||
{ required: true, message: "请输入上传模式", trigger: "blur" },
|
||||
],
|
||||
upload_week: [
|
||||
{ required: true, message: "请输入上传周期", trigger: "blur" },
|
||||
],
|
||||
data_filter: [
|
||||
{ required: true, message: "请输入数据过滤", trigger: "blur" },
|
||||
],
|
||||
},
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
treeNodeClick() {
|
||||
this.add_passage = true;
|
||||
},
|
||||
getDriveName() {
|
||||
this.diag_drive = true;
|
||||
},
|
||||
handleSelect(key) {
|
||||
console.log(key);
|
||||
if (key == 1) {
|
||||
this.choose_point = true;
|
||||
}
|
||||
},
|
||||
highlighter(code) {
|
||||
return highlight(code, languages.js); //returns html
|
||||
},
|
||||
closeMenu(ev) {
|
||||
console.log({ ev });
|
||||
this.dialogVisible = false;
|
||||
},
|
||||
savePoint() {
|
||||
this.choose_point = false;
|
||||
this.isAdd = true;
|
||||
},
|
||||
},
|
||||
|
||||
},
|
||||
directives: {
|
||||
'click-outside': {
|
||||
bind: function (el, binding, vnode) {
|
||||
console.log('el', el);
|
||||
console.log("binding", binding);
|
||||
el.event = function (event) {
|
||||
// 检查点击是否发生在节点之内（包括子节点）
|
||||
if (!(el == event.target || el.contains(event.target))) {
|
||||
// 如果没有，则触发调用
|
||||
// 若绑定值为函数，则执行
|
||||
// 这里我们可以通过钩子函数中的 vnode.context，来获取当前组件的作用域
|
||||
if (typeof vnode.context[binding.expression] == 'function') {
|
||||
vnode.context[binding.expression](event)
|
||||
}
|
||||
}
|
||||
}
|
||||
// 绑定事件
|
||||
// 设置为true，代表在DOM树中，注册了该listener的元素，会先于它下方的任何事件目标，接收到该事件。
|
||||
document.body.addEventListener('click', el.event, true)
|
||||
},
|
||||
unbind: function (el) {
|
||||
// 解绑事件
|
||||
document.body.removeEventListener('click', el.event, true)
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.tree_menu {
|
||||
position: absolute;
|
||||
width: 286px;
|
||||
height: 753px;
|
||||
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);
|
||||
}
|
||||
|
||||
/deep/ .pas_params {
|
||||
.info_play {
|
||||
width: 56px;
|
||||
height: 20px;
|
||||
color: rgba(16, 16, 16, 1);
|
||||
font-size: 14px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.el-divider--horizontal {
|
||||
margin: 8px 0;
|
||||
}
|
||||
|
||||
.el-button {
|
||||
width: 80px;
|
||||
height: 30px;
|
||||
line-height: 0.5;
|
||||
}
|
||||
|
||||
.el-col-12:last-child {
|
||||
padding-right: 150px;
|
||||
}
|
||||
|
||||
.el-col-12:first-child {
|
||||
padding-right: 28px;
|
||||
}
|
||||
|
||||
.el-row {
|
||||
height: 40px;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
|
||||
.el-col-1 {
|
||||
text-align: center;
|
||||
line-height: 52px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.el-col-9 {
|
||||
padding-left: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.el-input__inner {
|
||||
height: 30px;
|
||||
text-align: left;
|
||||
padding: 0px 8px;
|
||||
}
|
||||
|
||||
.content {
|
||||
position: absolute;
|
||||
left: 362px;
|
||||
top: 104px;
|
||||
width: 1220px;
|
||||
height: 836px;
|
||||
line-height: 20px;
|
||||
padding-left: 36px;
|
||||
background-color: rgba(255, 255, 255, 1);
|
||||
color: rgba(16, 16, 16, 1);
|
||||
font-size: 14px;
|
||||
border: 1px solid rgba(187, 187, 187, 1);
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
|
||||
.el-form-item {
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
/deep/ .con_left {
|
||||
.el-con-5 {
|
||||
width: 43px;
|
||||
}
|
||||
}
|
||||
|
||||
.con_left {
|
||||
width: 709px;
|
||||
position: relative;
|
||||
|
||||
.my-editor {
|
||||
background: #2d2d2d;
|
||||
color: #ccc;
|
||||
|
||||
font-family: Fira code, Fira Mono, Consolas, Menlo, Courier, monospace;
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
/* optional */
|
||||
.prism-editor__textarea:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
/* not required: */
|
||||
.height-300 {
|
||||
width: 491px;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.infos {
|
||||
width: 60px;
|
||||
position: absolute;
|
||||
left: 208px;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.con_left_footer {
|
||||
position: absolute;
|
||||
left: 499px;
|
||||
top: 720px;
|
||||
}
|
||||
}
|
||||
|
||||
.con_right {
|
||||
width: 480px;
|
||||
|
||||
.dialog-footer {
|
||||
.el-button {
|
||||
width: 80px;
|
||||
height: 30px;
|
||||
line-height: 0.5;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,569 @@
|
|||
<!-- 斥候MQTT云 -->
|
||||
<template>
|
||||
<div class="Clone">
|
||||
<!-- 设置树形控件 -->
|
||||
<div v-click-outside="closeMenu">
|
||||
<!-- <el-button type="info" plain @click="dialogVisible = true">斥侯MQTT云</el-button> -->
|
||||
<div v-show="dialogVisible" class="tree_menu">
|
||||
<el-tree :data="datas" :props="defaultProps" @node-click="treeNodeClick"></el-tree>
|
||||
<!-- 树形控件右键组件 -->
|
||||
</div>
|
||||
</div>
|
||||
<div class="pas_params" v-show="add_passage">
|
||||
<div class="content">
|
||||
<div class="con_left">
|
||||
<el-form :label-position="labelPosition" :rules="rules" ref="ruleForm">
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-form-item>
|
||||
<el-checkbox v-model="mqtt_qiyong">启用</el-checkbox>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="服务器IP:" :label-width="formLabelWidth" prop="mqtt_ip">
|
||||
<el-row>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="mqtt_ip1" style="width: 43px; height: 30px"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1">. </el-col>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="mqtt_ip2" style="width: 43px; height: 30px"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1">.</el-col>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="mqtt_ip3" style="width: 43px; height: 30px"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1">.</el-col>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="mqtt_ip4" style="width: 43px; height: 30px"></el-input>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="网关SN:" :label-width="formLabelWidth" prop="mqtt_wgsn">
|
||||
<el-input v-model="mqtt_wgsn" placeholder=""
|
||||
style="width: 200px; height: 30px"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="端口:" :label-width="formLabelWidth" prop="mqtt_port">
|
||||
<el-input v-model="mqtt_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="Keep Alive(s):" :label-width="formLabelWidth" prop="mqtt_keepalive">
|
||||
<el-input v-model="mqtt_keepalive" placeholder="64"
|
||||
style="width: 200px; height: 30px"></el-input>
|
||||
<div class="infos">2-60000</div>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="TLS加密:" :label-width="formLabelWidth" prop="mqtt_tls">
|
||||
<el-switch v-model="mqtt_tls"></el-switch>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="清除Session:" :label-width="formLabelWidth" prop="mqtt_clearsession">
|
||||
<el-switch v-model="mqtt_clearsession"></el-switch>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<h3 class="info_play">信息发布</h3>
|
||||
<el-divider></el-divider>
|
||||
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="Qos(MQTT):" :label-width="formLabelWidth"
|
||||
prop="upload_week">
|
||||
<el-select v-model="mqtt_qos" placeholder="请选择" 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-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<!-- <el-col :span="12">
|
||||
<el-form-item label="retained:" :label-width="formLabelWidth" prop="retained">
|
||||
<el-switch v-model="value1"></el-switch>
|
||||
</el-form-item>
|
||||
</el-col> -->
|
||||
</el-row>
|
||||
<!-- <el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="入口函数:" :label-width="formLabelWidth" prop="upload_week">
|
||||
<el-input v-model="input1" placeholder="64" style="width: 200px;height:30px"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row> -->
|
||||
<!-- <el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="函数代码:" :label-width="formLabelWidth" prop="upload_week">
|
||||
<prism-editor class="my-editor height-300" v-model="code" :highlight="highlighter"
|
||||
:line-numbers="lineNumbers"></prism-editor>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row> -->
|
||||
<div class="con_left_footer">
|
||||
<el-button type="primary" @click="add_passage = false">保 存</el-button>
|
||||
<el-button @click="add_passage = false">取 消</el-button>
|
||||
</div>
|
||||
</el-form>
|
||||
</div>
|
||||
<div>
|
||||
<el-dialog title="选择点" :visible.sync="choose_point" width="30%">
|
||||
<el-tree :data="points" show-checkbox node-key="id" :default-expanded-keys="[1, 2]"
|
||||
:default-checked-keys="[3, 4, 5, 6]" :props="defaultProps">
|
||||
</el-tree>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="savePoint">保 存</el-button>
|
||||
<el-button @click="choose_point = false">取 消</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 添加按钮下显示出来的弹框信息 -->
|
||||
<div>
|
||||
<el-dialog title="选择点" :visible.sync="choose_point" width="30%">
|
||||
<el-tree :data="points" show-checkbox node-key="id" :default-expanded-keys="[1, 2]"
|
||||
:default-checked-keys="[3, 4, 5, 6]" :props="defaultProps">
|
||||
</el-tree>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="choose_point = false">保 存</el-button>
|
||||
<el-button @click="choose_point = false">取 消</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { PrismEditor } from "vue-prism-editor";
|
||||
import "vue-prism-editor/dist/prismeditor.min.css"; // import the styles somewhere
|
||||
// import highlighting library (you can use any library you want just return html string)
|
||||
import { highlight, languages } from "prismjs/components/prism-core";
|
||||
import "prismjs/components/prism-clike";
|
||||
import "prismjs/components/prism-javascript";
|
||||
import "prismjs/themes/prism-tomorrow.css"; // import syntax highlighting styles
|
||||
|
||||
export default {
|
||||
name: "ChiClone",
|
||||
components: {
|
||||
PrismEditor,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
mqtt_qiyong: true,
|
||||
mqtt_ip: "",
|
||||
mqtt_ip1: "",
|
||||
mqtt_ip2: "",
|
||||
mqtt_ip3: "",
|
||||
mqtt_ip4: "",
|
||||
mqtt_wgsn: "",
|
||||
mqtt_port: "",
|
||||
mqtt_keepalive: "",
|
||||
mqtt_tls: false,
|
||||
mqtt_clearsession: false,
|
||||
// mqtt_sssjfbzt:"",
|
||||
mqtt_qos: "0",
|
||||
// code: 'console.log("Hello World")',
|
||||
// lineNumbers: true, // true为编辑模式， false只展示不可编辑
|
||||
points: [
|
||||
{
|
||||
id: 1,
|
||||
label: "Device1",
|
||||
children: [
|
||||
{
|
||||
id: 3,
|
||||
label: "tag0001",
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
label: "tag0002",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
label: "Device1",
|
||||
children: [
|
||||
{
|
||||
id: 5,
|
||||
label: "tag0003",
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
label: "tag0004",
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
choose_point: false,
|
||||
options1: [
|
||||
{
|
||||
value: "0",
|
||||
label: "0",
|
||||
},
|
||||
{
|
||||
value: "1",
|
||||
label: "1",
|
||||
},
|
||||
{
|
||||
value: "2",
|
||||
label: "2",
|
||||
},
|
||||
],
|
||||
labelPosition: "left",
|
||||
formLabelWidth: "114px",
|
||||
input1: 192,
|
||||
add_passage: false,
|
||||
rightMenu: "",
|
||||
dialogVisible: true,
|
||||
menuShow: false,
|
||||
datas: [
|
||||
{
|
||||
label: "Gateway",
|
||||
children: [
|
||||
{
|
||||
label: "数据采集",
|
||||
children: [
|
||||
{
|
||||
id: 1,
|
||||
label: 'Device1',
|
||||
children: [
|
||||
{
|
||||
id: 3,
|
||||
label: 'tag0001',
|
||||
}, {
|
||||
id: 4,
|
||||
label: 'tag0002',
|
||||
},
|
||||
]
|
||||
}, {
|
||||
id: 2,
|
||||
label: 'Device1',
|
||||
children: [
|
||||
{
|
||||
id: 5,
|
||||
label: 'tag0003',
|
||||
}, {
|
||||
id: 6,
|
||||
label: 'tag0004',
|
||||
},
|
||||
]
|
||||
}],
|
||||
}
|
||||
],
|
||||
choose_point: false,
|
||||
options1: [{
|
||||
value: '0',
|
||||
label: '0'
|
||||
}, {
|
||||
value: '1',
|
||||
label: '1'
|
||||
}, {
|
||||
value: '2',
|
||||
label: '2'
|
||||
}],
|
||||
labelPosition: "left",
|
||||
formLabelWidth: "114px",
|
||||
input1: 192,
|
||||
add_passage: false,
|
||||
rightMenu: "",
|
||||
dialogVisible: true,
|
||||
isAdd: false,
|
||||
datas: [{
|
||||
label: 'Gateway',
|
||||
children: [{
|
||||
label: '数据采集',
|
||||
children: [{
|
||||
label: 'I/O点'
|
||||
},
|
||||
{
|
||||
label: '用户点',
|
||||
},
|
||||
{
|
||||
label: '计算点',
|
||||
},
|
||||
{
|
||||
label: '系统点',
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
label: "用户点",
|
||||
},
|
||||
{
|
||||
label: "计算点",
|
||||
},
|
||||
{
|
||||
label: "系统点",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "上云服务",
|
||||
children: [
|
||||
{
|
||||
label: "标准 MQTT",
|
||||
},
|
||||
{
|
||||
label: "AWS loT",
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
defaultProps: {
|
||||
children: "children",
|
||||
label: "label",
|
||||
},
|
||||
tableData: [
|
||||
{
|
||||
mqtt_cjd_sbmc: "Device1",
|
||||
mqtt_cjd_tagid: "Device1.tag0001",
|
||||
}],
|
||||
rules: {
|
||||
server_ip: [
|
||||
{ required: true, message: "请输入服务器IP", trigger: "blur" },
|
||||
],
|
||||
port_number: [
|
||||
{ required: true, message: "请输入端口", trigger: "blur" },
|
||||
],
|
||||
gateway_id: [
|
||||
{ required: true, message: "请输入网关ID", trigger: "blur" },
|
||||
],
|
||||
data_theme: [
|
||||
{ required: true, message: "请输入主题", trigger: "blur" },
|
||||
],
|
||||
upload_mode: [
|
||||
{ required: true, message: "请输入上传模式", trigger: "blur" },
|
||||
],
|
||||
upload_week: [
|
||||
{ required: true, message: "请输入上传周期", trigger: "blur" },
|
||||
],
|
||||
data_filter: [
|
||||
{ required: true, message: "请输入数据过滤", trigger: "blur" },
|
||||
],
|
||||
},
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
treeNodeClick() {
|
||||
this.add_passage = true;
|
||||
},
|
||||
getDriveName() {
|
||||
this.diag_drive = true;
|
||||
},
|
||||
handleSelect(key) {
|
||||
console.log(key);
|
||||
if (key == 1) {
|
||||
this.choose_point = true;
|
||||
}
|
||||
},
|
||||
highlighter(code) {
|
||||
return highlight(code, languages.js); //returns html
|
||||
},
|
||||
closeMenu(ev) {
|
||||
console.log({ ev });
|
||||
this.dialogVisible = false;
|
||||
},
|
||||
savePoint() {
|
||||
this.choose_point = false;
|
||||
this.isAdd = true;
|
||||
},
|
||||
},
|
||||
directives: {
|
||||
'click-outside': {
|
||||
bind: function (el, binding, vnode) {
|
||||
console.log('el', el);
|
||||
console.log("binding", binding);
|
||||
el.event = function (event) {
|
||||
// 检查点击是否发生在节点之内（包括子节点）
|
||||
if (!(el == event.target || el.contains(event.target))) {
|
||||
// 如果没有，则触发调用
|
||||
// 若绑定值为函数，则执行
|
||||
// 这里我们可以通过钩子函数中的 vnode.context，来获取当前组件的作用域
|
||||
if (typeof vnode.context[binding.expression] == 'function') {
|
||||
vnode.context[binding.expression](event)
|
||||
}
|
||||
}
|
||||
}
|
||||
// 绑定事件
|
||||
// 设置为true，代表在DOM树中，注册了该listener的元素，会先于它下方的任何事件目标，接收到该事件。
|
||||
document.body.addEventListener('click', el.event, true)
|
||||
},
|
||||
unbind: function (el) {
|
||||
// 解绑事件
|
||||
document.body.removeEventListener('click', el.event, true)
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.tree_menu {
|
||||
position: absolute;
|
||||
width: 286px;
|
||||
height: 753px;
|
||||
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);
|
||||
}
|
||||
|
||||
/deep/ .pas_params {
|
||||
.info_play {
|
||||
width: 56px;
|
||||
height: 20px;
|
||||
color: rgba(16, 16, 16, 1);
|
||||
font-size: 14px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.el-divider--horizontal {
|
||||
margin: 8px 0;
|
||||
}
|
||||
|
||||
.el-button {
|
||||
width: 80px;
|
||||
height: 30px;
|
||||
line-height: 0.5;
|
||||
}
|
||||
|
||||
.el-col-12:last-child {
|
||||
padding-right: 150px;
|
||||
}
|
||||
|
||||
.el-col-12:first-child {
|
||||
padding-right: 28px;
|
||||
}
|
||||
|
||||
.el-row {
|
||||
height: 40px;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
|
||||
.el-col-1 {
|
||||
text-align: center;
|
||||
line-height: 52px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.el-col-9 {
|
||||
padding-left: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.el-input__inner {
|
||||
height: 30px;
|
||||
text-align: left;
|
||||
padding: 0px 8px;
|
||||
}
|
||||
|
||||
.content {
|
||||
position: absolute;
|
||||
left: 362px;
|
||||
top: 104px;
|
||||
width: 1220px;
|
||||
height: 836px;
|
||||
line-height: 20px;
|
||||
padding-left: 36px;
|
||||
background-color: rgba(255, 255, 255, 1);
|
||||
color: rgba(16, 16, 16, 1);
|
||||
font-size: 14px;
|
||||
border: 1px solid rgba(187, 187, 187, 1);
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
|
||||
.el-form-item {
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
/deep/ .con_left {
|
||||
.el-con-5 {
|
||||
width: 43px;
|
||||
}
|
||||
}
|
||||
|
||||
.con_left {
|
||||
width: 709px;
|
||||
position: relative;
|
||||
|
||||
.my-editor {
|
||||
background: #2d2d2d;
|
||||
color: #ccc;
|
||||
|
||||
font-family: Fira code, Fira Mono, Consolas, Menlo, Courier, monospace;
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
/* optional */
|
||||
.prism-editor__textarea:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
/* not required: */
|
||||
.height-300 {
|
||||
width: 491px;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.infos {
|
||||
width: 60px;
|
||||
position: absolute;
|
||||
left: 208px;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.con_left_footer {
|
||||
position: absolute;
|
||||
left: 499px;
|
||||
top: 720px;
|
||||
}
|
||||
}
|
||||
|
||||
.con_right {
|
||||
width: 480px;
|
||||
|
||||
.dialog-footer {
|
||||
.el-button {
|
||||
width: 80px;
|
||||
height: 30px;
|
||||
line-height: 0.5;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,517 @@
|
|||
<!-- 斥候MQTT云 -->
|
||||
<template>
|
||||
<div class="Clone">
|
||||
<!-- 设置树形控件 -->
|
||||
<div v-click-outside="closeMenu">
|
||||
<!-- <el-button type="info" plain @click="dialogVisible = true">斥侯MQTT云</el-button> -->
|
||||
<div v-show="dialogVisible" class="tree_menu">
|
||||
<el-tree :data="datas" :props="defaultProps" @node-click="treeNodeClick"></el-tree>
|
||||
<!-- 树形控件右键组件 -->
|
||||
</div>
|
||||
</div>
|
||||
<div class="pas_params" v-show="add_passage">
|
||||
<div class="content">
|
||||
<div class="con_left">
|
||||
<el-form :label-position="labelPosition" :rules="rules" ref="ruleForm">
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-form-item>
|
||||
<el-checkbox v-model="mqtt_qiyong">启用</el-checkbox>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="服务器IP:" :label-width="formLabelWidth" prop="mqtt_ip">
|
||||
<el-row>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="mqtt_ip1" style="width: 43px; height: 30px"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1">. </el-col>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="mqtt_ip2" style="width: 43px; height: 30px"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1">.</el-col>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="mqtt_ip3" style="width: 43px; height: 30px"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1">.</el-col>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="mqtt_ip4" style="width: 43px; height: 30px"></el-input>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="网关SN:" :label-width="formLabelWidth" prop="mqtt_wgsn">
|
||||
<el-input v-model="mqtt_wgsn" placeholder=""
|
||||
style="width: 200px; height: 30px"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="端口:" :label-width="formLabelWidth" prop="mqtt_port">
|
||||
<el-input v-model="mqtt_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="Keep Alive(s):" :label-width="formLabelWidth" prop="mqtt_keepalive">
|
||||
<el-input v-model="mqtt_keepalive" placeholder="64"
|
||||
style="width: 200px; height: 30px"></el-input>
|
||||
<div class="infos">2-60000</div>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="TLS加密:" :label-width="formLabelWidth" prop="mqtt_tls">
|
||||
<el-switch v-model="mqtt_tls"></el-switch>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="清除Session:" :label-width="formLabelWidth" prop="mqtt_clearsession">
|
||||
<el-switch v-model="mqtt_clearsession"></el-switch>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<h3 class="info_play">信息发布</h3>
|
||||
<el-divider></el-divider>
|
||||
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="Qos(MQTT):" :label-width="formLabelWidth"
|
||||
prop="upload_week">
|
||||
<el-select v-model="mqtt_qos" placeholder="请选择" 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-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<!-- <el-col :span="12">
|
||||
<el-form-item label="retained:" :label-width="formLabelWidth" prop="retained">
|
||||
<el-switch v-model="value1"></el-switch>
|
||||
</el-form-item>
|
||||
</el-col> -->
|
||||
</el-row>
|
||||
<!-- <el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="入口函数:" :label-width="formLabelWidth" prop="upload_week">
|
||||
<el-input v-model="input1" placeholder="64" style="width: 200px;height:30px"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row> -->
|
||||
<!-- <el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="函数代码:" :label-width="formLabelWidth" prop="upload_week">
|
||||
<prism-editor class="my-editor height-300" v-model="code" :highlight="highlighter"
|
||||
:line-numbers="lineNumbers"></prism-editor>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row> -->
|
||||
<div class="con_left_footer">
|
||||
<el-button type="primary" @click="add_passage = false">保 存</el-button>
|
||||
<el-button @click="add_passage = false">取 消</el-button>
|
||||
</div>
|
||||
</el-form>
|
||||
</div>
|
||||
<div>
|
||||
<el-dialog title="选择点" :visible.sync="choose_point" width="30%">
|
||||
<el-tree :data="points" show-checkbox node-key="id" :default-expanded-keys="[1, 2]"
|
||||
:default-checked-keys="[3, 4, 5, 6]" :props="defaultProps">
|
||||
</el-tree>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="savePoint">保 存</el-button>
|
||||
<el-button @click="choose_point = false">取 消</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 添加按钮下显示出来的弹框信息 -->
|
||||
<div>
|
||||
<el-dialog title="选择点" :visible.sync="choose_point" width="30%">
|
||||
<el-tree :data="points" show-checkbox node-key="id" :default-expanded-keys="[1, 2]"
|
||||
:default-checked-keys="[3, 4, 5, 6]" :props="defaultProps">
|
||||
</el-tree>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="choose_point = false">保 存</el-button>
|
||||
<el-button @click="choose_point = false">取 消</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { PrismEditor } from "vue-prism-editor";
|
||||
import "vue-prism-editor/dist/prismeditor.min.css"; // import the styles somewhere
|
||||
// import highlighting library (you can use any library you want just return html string)
|
||||
import { highlight, languages } from "prismjs/components/prism-core";
|
||||
import "prismjs/components/prism-clike";
|
||||
import "prismjs/components/prism-javascript";
|
||||
import "prismjs/themes/prism-tomorrow.css"; // import syntax highlighting styles
|
||||
|
||||
export default {
|
||||
name: "ChiClone",
|
||||
components: {
|
||||
PrismEditor,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
mqtt_qiyong: true,
|
||||
mqtt_ip: "",
|
||||
mqtt_ip1: "",
|
||||
mqtt_ip2: "",
|
||||
mqtt_ip3: "",
|
||||
mqtt_ip4: "",
|
||||
mqtt_wgsn: "",
|
||||
mqtt_port: "",
|
||||
mqtt_keepalive: "",
|
||||
mqtt_tls: false,
|
||||
mqtt_clearsession: false,
|
||||
// mqtt_sssjfbzt:"",
|
||||
mqtt_qos: "0",
|
||||
// code: 'console.log("Hello World")',
|
||||
// lineNumbers: true, // true为编辑模式， false只展示不可编辑
|
||||
points: [
|
||||
{
|
||||
id: 1,
|
||||
label: "Device1",
|
||||
children: [
|
||||
{
|
||||
id: 3,
|
||||
label: "tag0001",
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
label: "tag0002",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
label: "Device1",
|
||||
children: [
|
||||
{
|
||||
id: 5,
|
||||
label: "tag0003",
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
label: "tag0004",
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
choose_point: false,
|
||||
options1: [
|
||||
{
|
||||
value: "0",
|
||||
label: "0",
|
||||
},
|
||||
{
|
||||
value: "1",
|
||||
label: "1",
|
||||
},
|
||||
{
|
||||
value: "2",
|
||||
label: "2",
|
||||
},
|
||||
],
|
||||
labelPosition: "left",
|
||||
formLabelWidth: "114px",
|
||||
input1: 192,
|
||||
add_passage: false,
|
||||
rightMenu: "",
|
||||
dialogVisible: true,
|
||||
isAdd: false,
|
||||
datas: [{
|
||||
label: 'Gateway',
|
||||
children: [{
|
||||
label: '数据采集',
|
||||
children: [{
|
||||
label: 'I/O点'
|
||||
},
|
||||
{
|
||||
label: '用户点',
|
||||
},
|
||||
{
|
||||
label: '计算点',
|
||||
},
|
||||
{
|
||||
label: '系统点',
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
label: "用户点",
|
||||
},
|
||||
{
|
||||
label: "计算点",
|
||||
},
|
||||
{
|
||||
label: "系统点",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "上云服务",
|
||||
children: [
|
||||
{
|
||||
label: "标准 MQTT",
|
||||
},
|
||||
{
|
||||
label: "AWS loT",
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
defaultProps: {
|
||||
children: "children",
|
||||
label: "label",
|
||||
},
|
||||
tableData: [
|
||||
{
|
||||
mqtt_cjd_sbmc: "Device1",
|
||||
mqtt_cjd_tagid: "Device1.tag0001",
|
||||
}],
|
||||
rules: {
|
||||
server_ip: [
|
||||
{ required: true, message: "请输入服务器IP", trigger: "blur" },
|
||||
],
|
||||
port_number: [
|
||||
{ required: true, message: "请输入端口", trigger: "blur" },
|
||||
],
|
||||
gateway_id: [
|
||||
{ required: true, message: "请输入网关ID", trigger: "blur" },
|
||||
],
|
||||
data_theme: [
|
||||
{ required: true, message: "请输入主题", trigger: "blur" },
|
||||
],
|
||||
upload_mode: [
|
||||
{ required: true, message: "请输入上传模式", trigger: "blur" },
|
||||
],
|
||||
upload_week: [
|
||||
{ required: true, message: "请输入上传周期", trigger: "blur" },
|
||||
],
|
||||
data_filter: [
|
||||
{ required: true, message: "请输入数据过滤", trigger: "blur" },
|
||||
],
|
||||
},
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
treeNodeClick() {
|
||||
this.add_passage = true;
|
||||
},
|
||||
getDriveName() {
|
||||
this.diag_drive = true;
|
||||
},
|
||||
handleSelect(key) {
|
||||
console.log(key);
|
||||
if (key == 1) {
|
||||
this.choose_point = true;
|
||||
}
|
||||
},
|
||||
highlighter(code) {
|
||||
return highlight(code, languages.js); //returns html
|
||||
},
|
||||
closeMenu(ev) {
|
||||
console.log({ ev });
|
||||
this.dialogVisible = false;
|
||||
},
|
||||
savePoint() {
|
||||
this.choose_point = false;
|
||||
this.isAdd = true;
|
||||
},
|
||||
},
|
||||
directives: {
|
||||
'click-outside': {
|
||||
bind: function (el, binding, vnode) {
|
||||
console.log('el', el);
|
||||
console.log("binding", binding);
|
||||
el.event = function (event) {
|
||||
// 检查点击是否发生在节点之内（包括子节点）
|
||||
if (!(el == event.target || el.contains(event.target))) {
|
||||
// 如果没有，则触发调用
|
||||
// 若绑定值为函数，则执行
|
||||
// 这里我们可以通过钩子函数中的 vnode.context，来获取当前组件的作用域
|
||||
if (typeof vnode.context[binding.expression] == 'function') {
|
||||
vnode.context[binding.expression](event)
|
||||
}
|
||||
}
|
||||
}
|
||||
// 绑定事件
|
||||
// 设置为true，代表在DOM树中，注册了该listener的元素，会先于它下方的任何事件目标，接收到该事件。
|
||||
document.body.addEventListener('click', el.event, true)
|
||||
},
|
||||
unbind: function (el) {
|
||||
// 解绑事件
|
||||
document.body.removeEventListener('click', el.event, true)
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.tree_menu {
|
||||
position: absolute;
|
||||
width: 286px;
|
||||
height: 753px;
|
||||
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);
|
||||
}
|
||||
|
||||
/deep/ .pas_params {
|
||||
.info_play {
|
||||
width: 56px;
|
||||
height: 20px;
|
||||
color: rgba(16, 16, 16, 1);
|
||||
font-size: 14px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.el-divider--horizontal {
|
||||
margin: 8px 0;
|
||||
}
|
||||
|
||||
.el-button {
|
||||
width: 80px;
|
||||
height: 30px;
|
||||
line-height: 0.5;
|
||||
}
|
||||
|
||||
.el-col-12:last-child {
|
||||
padding-right: 150px;
|
||||
}
|
||||
|
||||
.el-col-12:first-child {
|
||||
padding-right: 28px;
|
||||
}
|
||||
|
||||
.el-row {
|
||||
height: 40px;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
|
||||
.el-col-1 {
|
||||
text-align: center;
|
||||
line-height: 52px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.el-col-9 {
|
||||
padding-left: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.el-input__inner {
|
||||
height: 30px;
|
||||
text-align: left;
|
||||
padding: 0px 8px;
|
||||
}
|
||||
|
||||
.content {
|
||||
position: absolute;
|
||||
left: 362px;
|
||||
top: 104px;
|
||||
width: 1220px;
|
||||
height: 836px;
|
||||
line-height: 20px;
|
||||
padding-left: 36px;
|
||||
background-color: rgba(255, 255, 255, 1);
|
||||
color: rgba(16, 16, 16, 1);
|
||||
font-size: 14px;
|
||||
border: 1px solid rgba(187, 187, 187, 1);
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
|
||||
.el-form-item {
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
/deep/ .con_left {
|
||||
.el-con-5 {
|
||||
width: 43px;
|
||||
}
|
||||
}
|
||||
|
||||
.con_left {
|
||||
width: 709px;
|
||||
position: relative;
|
||||
|
||||
.my-editor {
|
||||
background: #2d2d2d;
|
||||
color: #ccc;
|
||||
|
||||
font-family: Fira code, Fira Mono, Consolas, Menlo, Courier, monospace;
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
/* optional */
|
||||
.prism-editor__textarea:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
/* not required: */
|
||||
.height-300 {
|
||||
width: 491px;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.infos {
|
||||
width: 60px;
|
||||
position: absolute;
|
||||
left: 208px;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.con_left_footer {
|
||||
position: absolute;
|
||||
left: 499px;
|
||||
top: 720px;
|
||||
}
|
||||
}
|
||||
|
||||
.con_right {
|
||||
width: 480px;
|
||||
|
||||
.dialog-footer {
|
||||
.el-button {
|
||||
width: 80px;
|
||||
height: 30px;
|
||||
line-height: 0.5;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,516 @@
|
|||
<!-- 斥候MQTT云 -->
|
||||
<template>
|
||||
<div class="Clone">
|
||||
<!-- 设置树形控件 -->
|
||||
<div v-click-outside="closeMenu">
|
||||
<!-- <el-button type="info" plain @click="dialogVisible = true">斥侯MQTT云</el-button> -->
|
||||
<div v-show="dialogVisible" class="tree_menu">
|
||||
<el-tree :data="datas" :props="defaultProps" @node-click="treeNodeClick"></el-tree>
|
||||
<!-- 树形控件右键组件 -->
|
||||
</div>
|
||||
</div>
|
||||
<div class="pas_params" v-show="add_passage">
|
||||
<div class="content">
|
||||
<div class="con_left">
|
||||
<el-form :label-position="labelPosition" :rules="rules" ref="ruleForm">
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-form-item>
|
||||
<el-checkbox v-model="mqtt_qiyong">启用</el-checkbox>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="服务器IP:" :label-width="formLabelWidth" prop="mqtt_ip">
|
||||
<el-row>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="mqtt_ip1" style="width: 43px; height: 30px"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1">. </el-col>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="mqtt_ip2" style="width: 43px; height: 30px"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1">.</el-col>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="mqtt_ip3" style="width: 43px; height: 30px"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1">.</el-col>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="mqtt_ip4" style="width: 43px; height: 30px"></el-input>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="网关SN:" :label-width="formLabelWidth" prop="mqtt_wgsn">
|
||||
<el-input v-model="mqtt_wgsn" placeholder=""
|
||||
style="width: 200px; height: 30px"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="端口:" :label-width="formLabelWidth" prop="mqtt_port">
|
||||
<el-input v-model="mqtt_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="Keep Alive(s):" :label-width="formLabelWidth" prop="mqtt_keepalive">
|
||||
<el-input v-model="mqtt_keepalive" placeholder="64"
|
||||
style="width: 200px; height: 30px"></el-input>
|
||||
<div class="infos">2-60000</div>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="TLS加密:" :label-width="formLabelWidth" prop="mqtt_tls">
|
||||
<el-switch v-model="mqtt_tls"></el-switch>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="清除Session:" :label-width="formLabelWidth" prop="mqtt_clearsession">
|
||||
<el-switch v-model="mqtt_clearsession"></el-switch>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<h3 class="info_play">信息发布</h3>
|
||||
<el-divider></el-divider>
|
||||
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="Qos(MQTT):" :label-width="formLabelWidth"
|
||||
prop="upload_week">
|
||||
<el-select v-model="mqtt_qos" placeholder="请选择" 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-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<!-- <el-col :span="12">
|
||||
<el-form-item label="retained:" :label-width="formLabelWidth" prop="retained">
|
||||
<el-switch v-model="value1"></el-switch>
|
||||
</el-form-item>
|
||||
</el-col> -->
|
||||
</el-row>
|
||||
<!-- <el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="入口函数:" :label-width="formLabelWidth" prop="upload_week">
|
||||
<el-input v-model="input1" placeholder="64" style="width: 200px;height:30px"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row> -->
|
||||
<!-- <el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="函数代码:" :label-width="formLabelWidth" prop="upload_week">
|
||||
<prism-editor class="my-editor height-300" v-model="code" :highlight="highlighter"
|
||||
:line-numbers="lineNumbers"></prism-editor>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row> -->
|
||||
<div class="con_left_footer">
|
||||
<el-button type="primary" @click="add_passage = false">保 存</el-button>
|
||||
<el-button @click="add_passage = false">取 消</el-button>
|
||||
</div>
|
||||
</el-form>
|
||||
</div>
|
||||
<div>
|
||||
<el-dialog title="选择点" :visible.sync="choose_point" width="30%">
|
||||
<el-tree :data="points" show-checkbox node-key="id" :default-expanded-keys="[1, 2]"
|
||||
:default-checked-keys="[3, 4, 5, 6]" :props="defaultProps">
|
||||
</el-tree>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="savePoint">保 存</el-button>
|
||||
<el-button @click="choose_point = false">取 消</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 添加按钮下显示出来的弹框信息 -->
|
||||
<div>
|
||||
<el-dialog title="选择点" :visible.sync="choose_point" width="30%">
|
||||
<el-tree :data="points" show-checkbox node-key="id" :default-expanded-keys="[1, 2]"
|
||||
:default-checked-keys="[3, 4, 5, 6]" :props="defaultProps">
|
||||
</el-tree>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="choose_point = false">保 存</el-button>
|
||||
<el-button @click="choose_point = false">取 消</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { PrismEditor } from "vue-prism-editor";
|
||||
import "vue-prism-editor/dist/prismeditor.min.css"; // import the styles somewhere
|
||||
// import highlighting library (you can use any library you want just return html string)
|
||||
import { highlight, languages } from "prismjs/components/prism-core";
|
||||
import "prismjs/components/prism-clike";
|
||||
import "prismjs/components/prism-javascript";
|
||||
import "prismjs/themes/prism-tomorrow.css"; // import syntax highlighting styles
|
||||
|
||||
export default {
|
||||
name: "ChiClone",
|
||||
components: {
|
||||
PrismEditor,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
mqtt_qiyong: true,
|
||||
mqtt_ip: "",
|
||||
mqtt_ip1: "",
|
||||
mqtt_ip2: "",
|
||||
mqtt_ip3: "",
|
||||
mqtt_ip4: "",
|
||||
mqtt_wgsn: "",
|
||||
mqtt_port: "",
|
||||
mqtt_keepalive: "",
|
||||
mqtt_tls: false,
|
||||
mqtt_clearsession: false,
|
||||
// mqtt_sssjfbzt:"",
|
||||
mqtt_qos: "0",
|
||||
// code: 'console.log("Hello World")',
|
||||
// lineNumbers: true, // true为编辑模式， false只展示不可编辑
|
||||
points: [
|
||||
{
|
||||
id: 1,
|
||||
label: "Device1",
|
||||
children: [
|
||||
{
|
||||
id: 3,
|
||||
label: "tag0001",
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
label: "tag0002",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
label: "Device1",
|
||||
children: [
|
||||
{
|
||||
id: 5,
|
||||
label: "tag0003",
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
label: "tag0004",
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
choose_point: false,
|
||||
options1: [
|
||||
{
|
||||
value: "0",
|
||||
label: "0",
|
||||
},
|
||||
{
|
||||
value: "1",
|
||||
label: "1",
|
||||
},
|
||||
{
|
||||
value: "2",
|
||||
label: "2",
|
||||
},
|
||||
],
|
||||
labelPosition: "left",
|
||||
formLabelWidth: "114px",
|
||||
input1: 192,
|
||||
add_passage: false,
|
||||
rightMenu: "",
|
||||
dialogVisible: true,
|
||||
isAdd: false,
|
||||
datas: [{
|
||||
label: 'Gateway',
|
||||
children: [{
|
||||
label: '数据采集',
|
||||
children: [{
|
||||
label: 'I/O点'
|
||||
},
|
||||
{
|
||||
label: '用户点',
|
||||
},
|
||||
{
|
||||
label: '计算点',
|
||||
},
|
||||
{
|
||||
label: '系统点',
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
label: "用户点",
|
||||
},
|
||||
{
|
||||
label: "计算点",
|
||||
},
|
||||
{
|
||||
label: "系统点",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "上云服务",
|
||||
children: [
|
||||
{
|
||||
label: "标准 MQTT",
|
||||
},
|
||||
{
|
||||
label: "AWS loT",
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
defaultProps: {
|
||||
children: "children",
|
||||
label: "label",
|
||||
},
|
||||
tableData: [
|
||||
{
|
||||
mqtt_cjd_sbmc: "Device1",
|
||||
mqtt_cjd_tagid: "Device1.tag0001",
|
||||
}],
|
||||
rules: {
|
||||
server_ip: [
|
||||
{ required: true, message: "请输入服务器IP", trigger: "blur" },
|
||||
],
|
||||
port_number: [
|
||||
{ required: true, message: "请输入端口", trigger: "blur" },
|
||||
],
|
||||
gateway_id: [
|
||||
{ required: true, message: "请输入网关ID", trigger: "blur" },
|
||||
],
|
||||
data_theme: [
|
||||
{ required: true, message: "请输入主题", trigger: "blur" },
|
||||
],
|
||||
upload_mode: [
|
||||
{ required: true, message: "请输入上传模式", trigger: "blur" },
|
||||
],
|
||||
upload_week: [
|
||||
{ required: true, message: "请输入上传周期", trigger: "blur" },
|
||||
],
|
||||
data_filter: [
|
||||
{ required: true, message: "请输入数据过滤", trigger: "blur" },
|
||||
],
|
||||
},
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
treeNodeClick() {
|
||||
this.add_passage = true;
|
||||
},
|
||||
getDriveName() {
|
||||
this.diag_drive = true;
|
||||
},
|
||||
handleSelect(key) {
|
||||
console.log(key);
|
||||
if (key == 1) {
|
||||
this.choose_point = true;
|
||||
}
|
||||
},
|
||||
highlighter(code) {
|
||||
return highlight(code, languages.js); //returns html
|
||||
},
|
||||
closeMenu(ev) {
|
||||
console.log({ ev });
|
||||
this.dialogVisible = false;
|
||||
},
|
||||
savePoint() {
|
||||
this.choose_point = false;
|
||||
this.isAdd = true;
|
||||
},
|
||||
},
|
||||
directives: {
|
||||
'click-outside': {
|
||||
bind: function (el, binding, vnode) {
|
||||
console.log('el', el);
|
||||
console.log("binding", binding);
|
||||
el.event = function (event) {
|
||||
// 检查点击是否发生在节点之内（包括子节点）
|
||||
if (!(el == event.target || el.contains(event.target))) {
|
||||
// 如果没有，则触发调用
|
||||
// 若绑定值为函数，则执行
|
||||
// 这里我们可以通过钩子函数中的 vnode.context，来获取当前组件的作用域
|
||||
if (typeof vnode.context[binding.expression] == 'function') {
|
||||
vnode.context[binding.expression](event)
|
||||
}
|
||||
}
|
||||
}
|
||||
// 绑定事件
|
||||
// 设置为true，代表在DOM树中，注册了该listener的元素，会先于它下方的任何事件目标，接收到该事件。
|
||||
document.body.addEventListener('click', el.event, true)
|
||||
},
|
||||
unbind: function (el) {
|
||||
// 解绑事件
|
||||
document.body.removeEventListener('click', el.event, true)
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.tree_menu {
|
||||
position: absolute;
|
||||
width: 286px;
|
||||
height: 753px;
|
||||
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);
|
||||
}
|
||||
|
||||
/deep/ .pas_params {
|
||||
.info_play {
|
||||
width: 56px;
|
||||
height: 20px;
|
||||
color: rgba(16, 16, 16, 1);
|
||||
font-size: 14px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.el-divider--horizontal {
|
||||
margin: 8px 0;
|
||||
}
|
||||
|
||||
.el-button {
|
||||
width: 80px;
|
||||
height: 30px;
|
||||
line-height: 0.5;
|
||||
}
|
||||
|
||||
.el-col-12:last-child {
|
||||
padding-right: 150px;
|
||||
}
|
||||
|
||||
.el-col-12:first-child {
|
||||
padding-right: 28px;
|
||||
}
|
||||
|
||||
.el-row {
|
||||
height: 40px;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
|
||||
.el-col-1 {
|
||||
text-align: center;
|
||||
line-height: 52px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.el-col-9 {
|
||||
padding-left: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.el-input__inner {
|
||||
height: 30px;
|
||||
text-align: left;
|
||||
padding: 0px 8px;
|
||||
}
|
||||
|
||||
.content {
|
||||
position: absolute;
|
||||
left: 362px;
|
||||
top: 104px;
|
||||
width: 1220px;
|
||||
height: 836px;
|
||||
line-height: 20px;
|
||||
padding-left: 36px;
|
||||
background-color: rgba(255, 255, 255, 1);
|
||||
color: rgba(16, 16, 16, 1);
|
||||
font-size: 14px;
|
||||
border: 1px solid rgba(187, 187, 187, 1);
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
|
||||
.el-form-item {
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
/deep/ .con_left {
|
||||
.el-con-5 {
|
||||
width: 43px;
|
||||
}
|
||||
}
|
||||
|
||||
.con_left {
|
||||
width: 709px;
|
||||
position: relative;
|
||||
|
||||
.my-editor {
|
||||
background: #2d2d2d;
|
||||
color: #ccc;
|
||||
|
||||
font-family: Fira code, Fira Mono, Consolas, Menlo, Courier, monospace;
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
/* optional */
|
||||
.prism-editor__textarea:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
/* not required: */
|
||||
.height-300 {
|
||||
width: 491px;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.infos {
|
||||
width: 60px;
|
||||
position: absolute;
|
||||
left: 208px;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.con_left_footer {
|
||||
position: absolute;
|
||||
left: 499px;
|
||||
top: 720px;
|
||||
}
|
||||
}
|
||||
|
||||
.con_right {
|
||||
width: 480px;
|
||||
|
||||
.dialog-footer {
|
||||
.el-button {
|
||||
width: 80px;
|
||||
height: 30px;
|
||||
line-height: 0.5;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,516 @@
|
|||
<!-- 斥候MQTT云 -->
|
||||
<template>
|
||||
<div class="Clone">
|
||||
<!-- 设置树形控件 -->
|
||||
<div v-click-outside="closeMenu">
|
||||
<!-- <el-button type="info" plain @click="dialogVisible = true">斥侯MQTT云</el-button> -->
|
||||
<div v-show="dialogVisible" class="tree_menu">
|
||||
<el-tree :data="datas" :props="defaultProps" @node-click="treeNodeClick"></el-tree>
|
||||
<!-- 树形控件右键组件 -->
|
||||
</div>
|
||||
</div>
|
||||
<div class="pas_params" v-show="add_passage">
|
||||
<div class="content">
|
||||
<div class="con_left">
|
||||
<el-form :label-position="labelPosition" :rules="rules" ref="ruleForm">
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-form-item>
|
||||
<el-checkbox v-model="mqtt_qiyong">启用</el-checkbox>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="服务器IP:" :label-width="formLabelWidth" prop="mqtt_ip">
|
||||
<el-row>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="mqtt_ip1" style="width: 43px; height: 30px"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1">. </el-col>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="mqtt_ip2" style="width: 43px; height: 30px"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1">.</el-col>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="mqtt_ip3" style="width: 43px; height: 30px"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1">.</el-col>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="mqtt_ip4" style="width: 43px; height: 30px"></el-input>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="网关SN:" :label-width="formLabelWidth" prop="mqtt_wgsn">
|
||||
<el-input v-model="mqtt_wgsn" placeholder=""
|
||||
style="width: 200px; height: 30px"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="端口:" :label-width="formLabelWidth" prop="mqtt_port">
|
||||
<el-input v-model="mqtt_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="Keep Alive(s):" :label-width="formLabelWidth" prop="mqtt_keepalive">
|
||||
<el-input v-model="mqtt_keepalive" placeholder="64"
|
||||
style="width: 200px; height: 30px"></el-input>
|
||||
<div class="infos">2-60000</div>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="TLS加密:" :label-width="formLabelWidth" prop="mqtt_tls">
|
||||
<el-switch v-model="mqtt_tls"></el-switch>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="清除Session:" :label-width="formLabelWidth" prop="mqtt_clearsession">
|
||||
<el-switch v-model="mqtt_clearsession"></el-switch>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<h3 class="info_play">信息发布</h3>
|
||||
<el-divider></el-divider>
|
||||
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="Qos(MQTT):" :label-width="formLabelWidth"
|
||||
prop="upload_week">
|
||||
<el-select v-model="mqtt_qos" placeholder="请选择" 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-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<!-- <el-col :span="12">
|
||||
<el-form-item label="retained:" :label-width="formLabelWidth" prop="retained">
|
||||
<el-switch v-model="value1"></el-switch>
|
||||
</el-form-item>
|
||||
</el-col> -->
|
||||
</el-row>
|
||||
<!-- <el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="入口函数:" :label-width="formLabelWidth" prop="upload_week">
|
||||
<el-input v-model="input1" placeholder="64" style="width: 200px;height:30px"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row> -->
|
||||
<!-- <el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="函数代码:" :label-width="formLabelWidth" prop="upload_week">
|
||||
<prism-editor class="my-editor height-300" v-model="code" :highlight="highlighter"
|
||||
:line-numbers="lineNumbers"></prism-editor>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row> -->
|
||||
<div class="con_left_footer">
|
||||
<el-button type="primary" @click="add_passage = false">保 存</el-button>
|
||||
<el-button @click="add_passage = false">取 消</el-button>
|
||||
</div>
|
||||
</el-form>
|
||||
</div>
|
||||
<div>
|
||||
<el-dialog title="选择点" :visible.sync="choose_point" width="30%">
|
||||
<el-tree :data="points" show-checkbox node-key="id" :default-expanded-keys="[1, 2]"
|
||||
:default-checked-keys="[3, 4, 5, 6]" :props="defaultProps">
|
||||
</el-tree>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="savePoint">保 存</el-button>
|
||||
<el-button @click="choose_point = false">取 消</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 添加按钮下显示出来的弹框信息 -->
|
||||
<div>
|
||||
<el-dialog title="选择点" :visible.sync="choose_point" width="30%">
|
||||
<el-tree :data="points" show-checkbox node-key="id" :default-expanded-keys="[1, 2]"
|
||||
:default-checked-keys="[3, 4, 5, 6]" :props="defaultProps">
|
||||
</el-tree>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="choose_point = false">保 存</el-button>
|
||||
<el-button @click="choose_point = false">取 消</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { PrismEditor } from "vue-prism-editor";
|
||||
import "vue-prism-editor/dist/prismeditor.min.css"; // import the styles somewhere
|
||||
// import highlighting library (you can use any library you want just return html string)
|
||||
import { highlight, languages } from "prismjs/components/prism-core";
|
||||
import "prismjs/components/prism-clike";
|
||||
import "prismjs/components/prism-javascript";
|
||||
import "prismjs/themes/prism-tomorrow.css"; // import syntax highlighting styles
|
||||
|
||||
export default {
|
||||
name: "ChiClone",
|
||||
components: {
|
||||
PrismEditor,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
mqtt_qiyong: true,
|
||||
mqtt_ip: "",
|
||||
mqtt_ip1: "",
|
||||
mqtt_ip2: "",
|
||||
mqtt_ip3: "",
|
||||
mqtt_ip4: "",
|
||||
mqtt_wgsn: "",
|
||||
mqtt_port: "",
|
||||
mqtt_keepalive: "",
|
||||
mqtt_tls: false,
|
||||
mqtt_clearsession: false,
|
||||
// mqtt_sssjfbzt:"",
|
||||
mqtt_qos: "0",
|
||||
// code: 'console.log("Hello World")',
|
||||
// lineNumbers: true, // true为编辑模式， false只展示不可编辑
|
||||
points: [
|
||||
{
|
||||
id: 1,
|
||||
label: "Device1",
|
||||
children: [
|
||||
{
|
||||
id: 3,
|
||||
label: "tag0001",
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
label: "tag0002",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
label: "Device1",
|
||||
children: [
|
||||
{
|
||||
id: 5,
|
||||
label: "tag0003",
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
label: "tag0004",
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
choose_point: false,
|
||||
options1: [
|
||||
{
|
||||
value: "0",
|
||||
label: "0",
|
||||
},
|
||||
{
|
||||
value: "1",
|
||||
label: "1",
|
||||
},
|
||||
{
|
||||
value: "2",
|
||||
label: "2",
|
||||
},
|
||||
],
|
||||
labelPosition: "left",
|
||||
formLabelWidth: "114px",
|
||||
input1: 192,
|
||||
add_passage: false,
|
||||
rightMenu: "",
|
||||
dialogVisible: true,
|
||||
isAdd: false,
|
||||
datas: [
|
||||
{
|
||||
label: 'Gateway',
|
||||
children: [{
|
||||
label: '数据采集',
|
||||
children: [{
|
||||
label: 'I/O点'
|
||||
},
|
||||
{
|
||||
label: '用户点',
|
||||
},
|
||||
{
|
||||
label: '计算点',
|
||||
},
|
||||
{
|
||||
label: '系统点',
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
label: "用户点",
|
||||
},
|
||||
{
|
||||
label: "计算点",
|
||||
},
|
||||
{
|
||||
label: "系统点",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "上云服务",
|
||||
children: [
|
||||
{
|
||||
label: "标准 MQTT",
|
||||
},
|
||||
{
|
||||
label: "AWS loT",
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
defaultProps: {
|
||||
children: "children",
|
||||
label: "label",
|
||||
},
|
||||
tableData: [
|
||||
{
|
||||
mqtt_cjd_sbmc: "Device1",
|
||||
mqtt_cjd_tagid: "Device1.tag0001",
|
||||
}],
|
||||
rules: {
|
||||
server_ip: [
|
||||
{ required: true, message: "请输入服务器IP", trigger: "blur" },
|
||||
],
|
||||
port_number: [
|
||||
{ required: true, message: "请输入端口", trigger: "blur" },
|
||||
],
|
||||
gateway_id: [
|
||||
{ required: true, message: "请输入网关ID", trigger: "blur" },
|
||||
],
|
||||
data_theme: [
|
||||
{ required: true, message: "请输入主题", trigger: "blur" },
|
||||
],
|
||||
upload_mode: [
|
||||
{ required: true, message: "请输入上传模式", trigger: "blur" },
|
||||
],
|
||||
upload_week: [
|
||||
{ required: true, message: "请输入上传周期", trigger: "blur" },
|
||||
],
|
||||
data_filter: [
|
||||
{ required: true, message: "请输入数据过滤", trigger: "blur" },
|
||||
],
|
||||
},
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
treeNodeClick() {
|
||||
this.add_passage = true;
|
||||
},
|
||||
getDriveName() {
|
||||
this.diag_drive = true;
|
||||
},
|
||||
handleSelect(key) {
|
||||
console.log(key);
|
||||
if (key == 1) {
|
||||
this.choose_point = true;
|
||||
}
|
||||
},
|
||||
highlighter(code) {
|
||||
return highlight(code, languages.js); //returns html
|
||||
},
|
||||
closeMenu(ev) {
|
||||
console.log({ ev });
|
||||
this.dialogVisible = false;
|
||||
},
|
||||
savePoint() {
|
||||
this.choose_point = false;
|
||||
this.isAdd = true;
|
||||
},
|
||||
},
|
||||
directives: {
|
||||
'click-outside': {
|
||||
bind: function (el, binding, vnode) {
|
||||
console.log('el', el);
|
||||
console.log("binding", binding);
|
||||
el.event = function (event) {
|
||||
// 检查点击是否发生在节点之内（包括子节点）
|
||||
if (!(el == event.target || el.contains(event.target))) {
|
||||
// 如果没有，则触发调用
|
||||
// 若绑定值为函数，则执行
|
||||
// 这里我们可以通过钩子函数中的 vnode.context，来获取当前组件的作用域
|
||||
if (typeof vnode.context[binding.expression] == 'function') {
|
||||
vnode.context[binding.expression](event)
|
||||
}
|
||||
}
|
||||
}
|
||||
// 绑定事件
|
||||
// 设置为true，代表在DOM树中，注册了该listener的元素，会先于它下方的任何事件目标，接收到该事件。
|
||||
document.body.addEventListener('click', el.event, true)
|
||||
},
|
||||
unbind: function (el) {
|
||||
// 解绑事件
|
||||
document.body.removeEventListener('click', el.event, true)
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.tree_menu {
|
||||
position: absolute;
|
||||
width: 286px;
|
||||
height: 753px;
|
||||
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);
|
||||
}
|
||||
|
||||
/deep/ .pas_params {
|
||||
.info_play {
|
||||
width: 56px;
|
||||
height: 20px;
|
||||
color: rgba(16, 16, 16, 1);
|
||||
font-size: 14px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.el-divider--horizontal {
|
||||
margin: 8px 0;
|
||||
}
|
||||
|
||||
.el-button {
|
||||
width: 80px;
|
||||
height: 30px;
|
||||
line-height: 0.5;
|
||||
}
|
||||
|
||||
.el-col-12:last-child {
|
||||
padding-right: 150px;
|
||||
}
|
||||
|
||||
.el-col-12:first-child {
|
||||
padding-right: 28px;
|
||||
}
|
||||
|
||||
.el-row {
|
||||
height: 40px;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
|
||||
.el-col-1 {
|
||||
text-align: center;
|
||||
line-height: 52px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.el-col-9 {
|
||||
padding-left: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.el-input__inner {
|
||||
height: 30px;
|
||||
text-align: left;
|
||||
padding: 0px 8px;
|
||||
}
|
||||
|
||||
.content {
|
||||
position: absolute;
|
||||
left: 362px;
|
||||
top: 104px;
|
||||
width: 1220px;
|
||||
height: 836px;
|
||||
line-height: 20px;
|
||||
padding-left: 36px;
|
||||
background-color: rgba(255, 255, 255, 1);
|
||||
color: rgba(16, 16, 16, 1);
|
||||
font-size: 14px;
|
||||
border: 1px solid rgba(187, 187, 187, 1);
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
|
||||
.el-form-item {
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
/deep/ .con_left {
|
||||
.el-con-5 {
|
||||
width: 43px;
|
||||
}
|
||||
}
|
||||
|
||||
.con_left {
|
||||
width: 709px;
|
||||
position: relative;
|
||||
|
||||
.my-editor {
|
||||
background: #2d2d2d;
|
||||
color: #ccc;
|
||||
|
||||
font-family: Fira code, Fira Mono, Consolas, Menlo, Courier, monospace;
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
/* optional */
|
||||
.prism-editor__textarea:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
/* not required: */
|
||||
.height-300 {
|
||||
width: 491px;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.infos {
|
||||
width: 60px;
|
||||
position: absolute;
|
||||
left: 208px;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.con_left_footer {
|
||||
position: absolute;
|
||||
left: 499px;
|
||||
top: 720px;
|
||||
}
|
||||
}
|
||||
|
||||
.con_right {
|
||||
width: 480px;
|
||||
|
||||
.dialog-footer {
|
||||
.el-button {
|
||||
width: 80px;
|
||||
height: 30px;
|
||||
line-height: 0.5;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,516 @@
|
|||
<!-- 斥候MQTT云 -->
|
||||
<template>
|
||||
<div class="Clone">
|
||||
<!-- 设置树形控件 -->
|
||||
<div v-click-outside="closeMenu">
|
||||
<!-- <el-button type="info" plain @click="dialogVisible = true">斥侯MQTT云</el-button> -->
|
||||
<div v-show="dialogVisible" class="tree_menu">
|
||||
<el-tree :data="datas" :props="defaultProps" @node-click="treeNodeClick"></el-tree>
|
||||
<!-- 树形控件右键组件 -->
|
||||
</div>
|
||||
</div>
|
||||
<div class="pas_params" v-show="add_passage">
|
||||
<div class="content">
|
||||
<div class="con_left">
|
||||
<el-form :label-position="labelPosition" :rules="rules" ref="ruleForm">
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-form-item>
|
||||
<el-checkbox v-model="mqtt_qiyong">启用</el-checkbox>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="服务器IP:" :label-width="formLabelWidth" prop="mqtt_ip">
|
||||
<el-row>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="mqtt_ip1" style="width: 43px; height: 30px"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1">. </el-col>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="mqtt_ip2" style="width: 43px; height: 30px"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1">.</el-col>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="mqtt_ip3" style="width: 43px; height: 30px"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1">.</el-col>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="mqtt_ip4" style="width: 43px; height: 30px"></el-input>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="网关SN:" :label-width="formLabelWidth" prop="mqtt_wgsn">
|
||||
<el-input v-model="mqtt_wgsn" placeholder=""
|
||||
style="width: 200px; height: 30px"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="端口:" :label-width="formLabelWidth" prop="mqtt_port">
|
||||
<el-input v-model="mqtt_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="Keep Alive(s):" :label-width="formLabelWidth" prop="mqtt_keepalive">
|
||||
<el-input v-model="mqtt_keepalive" placeholder="64"
|
||||
style="width: 200px; height: 30px"></el-input>
|
||||
<div class="infos">2-60000</div>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="TLS加密:" :label-width="formLabelWidth" prop="mqtt_tls">
|
||||
<el-switch v-model="mqtt_tls"></el-switch>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="清除Session:" :label-width="formLabelWidth" prop="mqtt_clearsession">
|
||||
<el-switch v-model="mqtt_clearsession"></el-switch>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<h3 class="info_play">信息发布</h3>
|
||||
<el-divider></el-divider>
|
||||
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="Qos(MQTT):" :label-width="formLabelWidth"
|
||||
prop="upload_week">
|
||||
<el-select v-model="mqtt_qos" placeholder="请选择" 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-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<!-- <el-col :span="12">
|
||||
<el-form-item label="retained:" :label-width="formLabelWidth" prop="retained">
|
||||
<el-switch v-model="value1"></el-switch>
|
||||
</el-form-item>
|
||||
</el-col> -->
|
||||
</el-row>
|
||||
<!-- <el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="入口函数:" :label-width="formLabelWidth" prop="upload_week">
|
||||
<el-input v-model="input1" placeholder="64" style="width: 200px;height:30px"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row> -->
|
||||
<!-- <el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="函数代码:" :label-width="formLabelWidth" prop="upload_week">
|
||||
<prism-editor class="my-editor height-300" v-model="code" :highlight="highlighter"
|
||||
:line-numbers="lineNumbers"></prism-editor>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row> -->
|
||||
<div class="con_left_footer">
|
||||
<el-button type="primary" @click="add_passage = false">保 存</el-button>
|
||||
<el-button @click="add_passage = false">取 消</el-button>
|
||||
</div>
|
||||
</el-form>
|
||||
</div>
|
||||
<div>
|
||||
<el-dialog title="选择点" :visible.sync="choose_point" width="30%">
|
||||
<el-tree :data="points" show-checkbox node-key="id" :default-expanded-keys="[1, 2]"
|
||||
:default-checked-keys="[3, 4, 5, 6]" :props="defaultProps">
|
||||
</el-tree>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="savePoint">保 存</el-button>
|
||||
<el-button @click="choose_point = false">取 消</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 添加按钮下显示出来的弹框信息 -->
|
||||
<div>
|
||||
<el-dialog title="选择点" :visible.sync="choose_point" width="30%">
|
||||
<el-tree :data="points" show-checkbox node-key="id" :default-expanded-keys="[1, 2]"
|
||||
:default-checked-keys="[3, 4, 5, 6]" :props="defaultProps">
|
||||
</el-tree>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="choose_point = false">保 存</el-button>
|
||||
<el-button @click="choose_point = false">取 消</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { PrismEditor } from "vue-prism-editor";
|
||||
import "vue-prism-editor/dist/prismeditor.min.css"; // import the styles somewhere
|
||||
// import highlighting library (you can use any library you want just return html string)
|
||||
import { highlight, languages } from "prismjs/components/prism-core";
|
||||
import "prismjs/components/prism-clike";
|
||||
import "prismjs/components/prism-javascript";
|
||||
import "prismjs/themes/prism-tomorrow.css"; // import syntax highlighting styles
|
||||
|
||||
export default {
|
||||
name: "ChiClone",
|
||||
components: {
|
||||
PrismEditor,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
mqtt_qiyong: true,
|
||||
mqtt_ip: "",
|
||||
mqtt_ip1: "",
|
||||
mqtt_ip2: "",
|
||||
mqtt_ip3: "",
|
||||
mqtt_ip4: "",
|
||||
mqtt_wgsn: "",
|
||||
mqtt_port: "",
|
||||
mqtt_keepalive: "",
|
||||
mqtt_tls: false,
|
||||
mqtt_clearsession: false,
|
||||
// mqtt_sssjfbzt:"",
|
||||
mqtt_qos: "0",
|
||||
// code: 'console.log("Hello World")',
|
||||
// lineNumbers: true, // true为编辑模式， false只展示不可编辑
|
||||
points: [
|
||||
{
|
||||
id: 1,
|
||||
label: "Device1",
|
||||
children: [
|
||||
{
|
||||
id: 3,
|
||||
label: "tag0001",
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
label: "tag0002",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
label: "Device1",
|
||||
children: [
|
||||
{
|
||||
id: 5,
|
||||
label: "tag0003",
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
label: "tag0004",
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
choose_point: false,
|
||||
options1: [
|
||||
{
|
||||
value: "0",
|
||||
label: "0",
|
||||
},
|
||||
{
|
||||
value: "1",
|
||||
label: "1",
|
||||
},
|
||||
{
|
||||
value: "2",
|
||||
label: "2",
|
||||
},
|
||||
],
|
||||
labelPosition: "left",
|
||||
formLabelWidth: "114px",
|
||||
input1: 192,
|
||||
add_passage: false,
|
||||
rightMenu: "",
|
||||
dialogVisible: true,
|
||||
isAdd: false,
|
||||
datas: [
|
||||
{
|
||||
label: 'Gateway',
|
||||
children: [{
|
||||
label: '数据采集',
|
||||
children: [{
|
||||
label: 'I/O点'
|
||||
},
|
||||
{
|
||||
label: '用户点',
|
||||
},
|
||||
{
|
||||
label: '计算点',
|
||||
},
|
||||
{
|
||||
label: '系统点',
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
label: "用户点",
|
||||
},
|
||||
{
|
||||
label: "计算点",
|
||||
},
|
||||
{
|
||||
label: "系统点",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "上云服务",
|
||||
children: [
|
||||
{
|
||||
label: "标准 MQTT",
|
||||
},
|
||||
{
|
||||
label: "AWS loT",
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
defaultProps: {
|
||||
children: "children",
|
||||
label: "label",
|
||||
},
|
||||
tableData: [
|
||||
{
|
||||
mqtt_cjd_sbmc: "Device1",
|
||||
mqtt_cjd_tagid: "Device1.tag0001",
|
||||
}],
|
||||
rules: {
|
||||
server_ip: [
|
||||
{ required: true, message: "请输入服务器IP", trigger: "blur" },
|
||||
],
|
||||
port_number: [
|
||||
{ required: true, message: "请输入端口", trigger: "blur" },
|
||||
],
|
||||
gateway_id: [
|
||||
{ required: true, message: "请输入网关ID", trigger: "blur" },
|
||||
],
|
||||
data_theme: [
|
||||
{ required: true, message: "请输入主题", trigger: "blur" },
|
||||
],
|
||||
upload_mode: [
|
||||
{ required: true, message: "请输入上传模式", trigger: "blur" },
|
||||
],
|
||||
upload_week: [
|
||||
{ required: true, message: "请输入上传周期", trigger: "blur" },
|
||||
],
|
||||
data_filter: [
|
||||
{ required: true, message: "请输入数据过滤", trigger: "blur" },
|
||||
],
|
||||
},
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
treeNodeClick() {
|
||||
this.add_passage = true;
|
||||
},
|
||||
getDriveName() {
|
||||
this.diag_drive = true;
|
||||
},
|
||||
handleSelect(key) {
|
||||
console.log(key);
|
||||
if (key == 1) {
|
||||
this.choose_point = true;
|
||||
}
|
||||
},
|
||||
highlighter(code) {
|
||||
return highlight(code, languages.js); //returns html
|
||||
},
|
||||
closeMenu(ev) {
|
||||
console.log({ ev });
|
||||
this.dialogVisible = false;
|
||||
},
|
||||
savePoint() {
|
||||
this.choose_point = false;
|
||||
this.isAdd = true;
|
||||
},
|
||||
},
|
||||
directives: {
|
||||
'click-outside': {
|
||||
bind: function (el, binding, vnode) {
|
||||
console.log('el', el);
|
||||
console.log("binding", binding);
|
||||
el.event = function (event) {
|
||||
// 检查点击是否发生在节点之内（包括子节点）
|
||||
if (!(el == event.target || el.contains(event.target))) {
|
||||
// 如果没有，则触发调用
|
||||
// 若绑定值为函数，则执行
|
||||
// 这里我们可以通过钩子函数中的 vnode.context，来获取当前组件的作用域
|
||||
if (typeof vnode.context[binding.expression] == 'function') {
|
||||
vnode.context[binding.expression](event)
|
||||
}
|
||||
}
|
||||
}
|
||||
// 绑定事件
|
||||
// 设置为true，代表在DOM树中，注册了该listener的元素，会先于它下方的任何事件目标，接收到该事件。
|
||||
document.body.addEventListener('click', el.event, true)
|
||||
},
|
||||
unbind: function (el) {
|
||||
// 解绑事件
|
||||
document.body.removeEventListener('click', el.event, true)
|
||||
},
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.tree_menu {
|
||||
position: absolute;
|
||||
width: 286px;
|
||||
height: 753px;
|
||||
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);
|
||||
}
|
||||
|
||||
/deep/ .pas_params {
|
||||
.info_play {
|
||||
width: 56px;
|
||||
height: 20px;
|
||||
color: rgba(16, 16, 16, 1);
|
||||
font-size: 14px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.el-divider--horizontal {
|
||||
margin: 8px 0;
|
||||
}
|
||||
|
||||
.el-button {
|
||||
width: 80px;
|
||||
height: 30px;
|
||||
line-height: 0.5;
|
||||
}
|
||||
|
||||
.el-col-12:last-child {
|
||||
padding-right: 150px;
|
||||
}
|
||||
|
||||
.el-col-12:first-child {
|
||||
padding-right: 28px;
|
||||
}
|
||||
|
||||
.el-row {
|
||||
height: 40px;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
|
||||
.el-col-1 {
|
||||
text-align: center;
|
||||
line-height: 52px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.el-col-9 {
|
||||
padding-left: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.el-input__inner {
|
||||
height: 30px;
|
||||
text-align: left;
|
||||
padding: 0px 8px;
|
||||
}
|
||||
|
||||
.content {
|
||||
position: absolute;
|
||||
left: 362px;
|
||||
top: 104px;
|
||||
width: 1220px;
|
||||
height: 836px;
|
||||
line-height: 20px;
|
||||
padding-left: 36px;
|
||||
background-color: rgba(255, 255, 255, 1);
|
||||
color: rgba(16, 16, 16, 1);
|
||||
font-size: 14px;
|
||||
border: 1px solid rgba(187, 187, 187, 1);
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
|
||||
.el-form-item {
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
/deep/ .con_left {
|
||||
.el-con-5 {
|
||||
width: 43px;
|
||||
}
|
||||
}
|
||||
|
||||
.con_left {
|
||||
width: 709px;
|
||||
position: relative;
|
||||
|
||||
.my-editor {
|
||||
background: #2d2d2d;
|
||||
color: #ccc;
|
||||
|
||||
font-family: Fira code, Fira Mono, Consolas, Menlo, Courier, monospace;
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
/* optional */
|
||||
.prism-editor__textarea:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
/* not required: */
|
||||
.height-300 {
|
||||
width: 491px;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.infos {
|
||||
width: 60px;
|
||||
position: absolute;
|
||||
left: 208px;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.con_left_footer {
|
||||
position: absolute;
|
||||
left: 499px;
|
||||
top: 720px;
|
||||
}
|
||||
}
|
||||
|
||||
.con_right {
|
||||
width: 480px;
|
||||
|
||||
.dialog-footer {
|
||||
.el-button {
|
||||
width: 80px;
|
||||
height: 30px;
|
||||
line-height: 0.5;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,521 @@
|
|||
<!-- 斥候MQTT云 -->
|
||||
<template>
|
||||
<div class="Clone">
|
||||
<!-- 设置树形控件 -->
|
||||
<div v-click-outside="closeMenu">
|
||||
<!-- <el-button type="info" plain @click="dialogVisible = true">斥侯MQTT云</el-button> -->
|
||||
<div v-show="dialogVisible" class="tree_menu">
|
||||
<el-tree :data="datas" :props="defaultProps" @node-click="treeNodeClick"></el-tree>
|
||||
<!-- 树形控件右键组件 -->
|
||||
</div>
|
||||
</div>
|
||||
<div class="pas_params" v-show="add_passage">
|
||||
<div class="content">
|
||||
<div class="con_left">
|
||||
<el-form :label-position="labelPosition" :rules="rules" ref="ruleForm">
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-form-item>
|
||||
<el-checkbox v-model="mqtt_qiyong">启用</el-checkbox>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="服务器IP:" :label-width="formLabelWidth" prop="mqtt_ip">
|
||||
<el-row>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="mqtt_ip1" style="width: 43px; height: 30px"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1">. </el-col>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="mqtt_ip2" style="width: 43px; height: 30px"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1">.</el-col>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="mqtt_ip3" style="width: 43px; height: 30px"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1">.</el-col>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="mqtt_ip4" style="width: 43px; height: 30px"></el-input>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="网关SN:" :label-width="formLabelWidth" prop="mqtt_wgsn">
|
||||
<el-input v-model="mqtt_wgsn" placeholder=""
|
||||
style="width: 200px; height: 30px"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="端口:" :label-width="formLabelWidth" prop="mqtt_port">
|
||||
<el-input v-model="mqtt_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="Keep Alive(s):" :label-width="formLabelWidth" prop="mqtt_keepalive">
|
||||
<el-input v-model="mqtt_keepalive" placeholder="64"
|
||||
style="width: 200px; height: 30px"></el-input>
|
||||
<div class="infos">2-60000</div>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="TLS加密:" :label-width="formLabelWidth" prop="mqtt_tls">
|
||||
<el-switch v-model="mqtt_tls"></el-switch>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="清除Session:" :label-width="formLabelWidth" prop="mqtt_clearsession">
|
||||
<el-switch v-model="mqtt_clearsession"></el-switch>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<h3 class="info_play">信息发布</h3>
|
||||
<el-divider></el-divider>
|
||||
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="Qos(MQTT):" :label-width="formLabelWidth"
|
||||
prop="upload_week">
|
||||
<el-select v-model="mqtt_qos" placeholder="请选择" 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-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<!-- <el-col :span="12">
|
||||
<el-form-item label="retained:" :label-width="formLabelWidth" prop="retained">
|
||||
<el-switch v-model="value1"></el-switch>
|
||||
</el-form-item>
|
||||
</el-col> -->
|
||||
</el-row>
|
||||
<!-- <el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="入口函数:" :label-width="formLabelWidth" prop="upload_week">
|
||||
<el-input v-model="input1" placeholder="64" style="width: 200px;height:30px"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row> -->
|
||||
<!-- <el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="函数代码:" :label-width="formLabelWidth" prop="upload_week">
|
||||
<prism-editor class="my-editor height-300" v-model="code" :highlight="highlighter"
|
||||
:line-numbers="lineNumbers"></prism-editor>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row> -->
|
||||
<div class="con_left_footer">
|
||||
<el-button type="primary" @click="add_passage = false">保 存</el-button>
|
||||
<el-button @click="add_passage = false">取 消</el-button>
|
||||
</div>
|
||||
</el-form>
|
||||
</div>
|
||||
<div>
|
||||
<el-dialog title="选择点" :visible.sync="choose_point" width="30%">
|
||||
<el-tree :data="points" show-checkbox node-key="id" :default-expanded-keys="[1, 2]"
|
||||
:default-checked-keys="[3, 4, 5, 6]" :props="defaultProps">
|
||||
</el-tree>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="savePoint">保 存</el-button>
|
||||
<el-button @click="choose_point = false">取 消</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 添加按钮下显示出来的弹框信息 -->
|
||||
<div>
|
||||
<el-dialog title="选择点" :visible.sync="choose_point" width="30%">
|
||||
<el-tree :data="points" show-checkbox node-key="id" :default-expanded-keys="[1, 2]"
|
||||
:default-checked-keys="[3, 4, 5, 6]" :props="defaultProps">
|
||||
</el-tree>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="choose_point = false">保 存</el-button>
|
||||
<el-button @click="choose_point = false">取 消</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { PrismEditor } from "vue-prism-editor";
|
||||
import "vue-prism-editor/dist/prismeditor.min.css"; // import the styles somewhere
|
||||
// import highlighting library (you can use any library you want just return html string)
|
||||
import { highlight, languages } from "prismjs/components/prism-core";
|
||||
import "prismjs/components/prism-clike";
|
||||
import "prismjs/components/prism-javascript";
|
||||
import "prismjs/themes/prism-tomorrow.css"; // import syntax highlighting styles
|
||||
|
||||
export default {
|
||||
name: "ChiClone",
|
||||
components: {
|
||||
PrismEditor,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
mqtt_qiyong: true,
|
||||
mqtt_ip: "",
|
||||
mqtt_ip1: "",
|
||||
mqtt_ip2: "",
|
||||
mqtt_ip3: "",
|
||||
mqtt_ip4: "",
|
||||
mqtt_wgsn: "",
|
||||
mqtt_port: "",
|
||||
mqtt_keepalive: "",
|
||||
mqtt_tls: false,
|
||||
mqtt_clearsession: false,
|
||||
// mqtt_sssjfbzt:"",
|
||||
mqtt_qos: "0",
|
||||
// code: 'console.log("Hello World")',
|
||||
// lineNumbers: true, // true为编辑模式， false只展示不可编辑
|
||||
points: [
|
||||
{
|
||||
id: 1,
|
||||
label: "Device1",
|
||||
children: [
|
||||
{
|
||||
id: 3,
|
||||
label: "tag0001",
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
label: "tag0002",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
label: "Device1",
|
||||
children: [
|
||||
{
|
||||
id: 5,
|
||||
label: "tag0003",
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
label: "tag0004",
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
choose_point: false,
|
||||
options1: [
|
||||
{
|
||||
value: "0",
|
||||
label: "0",
|
||||
},
|
||||
{
|
||||
value: "1",
|
||||
label: "1",
|
||||
},
|
||||
{
|
||||
value: "2",
|
||||
label: "2",
|
||||
},
|
||||
],
|
||||
labelPosition: "left",
|
||||
formLabelWidth: "114px",
|
||||
input1: 192,
|
||||
add_passage: false,
|
||||
rightMenu: "",
|
||||
dialogVisible: true,
|
||||
isAdd: false,
|
||||
datas: [
|
||||
{
|
||||
label: 'Gateway',
|
||||
children: [{
|
||||
label: '数据采集',
|
||||
children: [{
|
||||
label: 'I/O点'
|
||||
},
|
||||
{
|
||||
label: '用户点',
|
||||
},
|
||||
{
|
||||
label: '计算点',
|
||||
},
|
||||
{
|
||||
label: '系统点',
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
label: "用户点",
|
||||
},
|
||||
{
|
||||
label: "计算点",
|
||||
},
|
||||
{
|
||||
label: "系统点",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "上云服务",
|
||||
children: [
|
||||
{
|
||||
label: "标准 MQTT",
|
||||
},
|
||||
{
|
||||
label: "AWS loT",
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
defaultProps: {
|
||||
children: "children",
|
||||
label: "label",
|
||||
},
|
||||
tableData: [
|
||||
{
|
||||
mqtt_cjd_sbmc: "Device1",
|
||||
mqtt_cjd_tagid: "Device1.tag0001",
|
||||
}],
|
||||
rules: {
|
||||
server_ip: [
|
||||
{ required: true, message: "请输入服务器IP", trigger: "blur" },
|
||||
],
|
||||
port_number: [
|
||||
{ required: true, message: "请输入端口", trigger: "blur" },
|
||||
],
|
||||
gateway_id: [
|
||||
{ required: true, message: "请输入网关ID", trigger: "blur" },
|
||||
],
|
||||
data_theme: [
|
||||
{ required: true, message: "请输入主题", trigger: "blur" },
|
||||
],
|
||||
upload_mode: [
|
||||
{ required: true, message: "请输入上传模式", trigger: "blur" },
|
||||
],
|
||||
upload_week: [
|
||||
{ required: true, message: "请输入上传周期", trigger: "blur" },
|
||||
],
|
||||
data_filter: [
|
||||
{ required: true, message: "请输入数据过滤", trigger: "blur" },
|
||||
],
|
||||
},
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
treeNodeClick() {
|
||||
this.add_passage = true;
|
||||
},
|
||||
getDriveName() {
|
||||
this.diag_drive = true;
|
||||
},
|
||||
handleSelect(key) {
|
||||
console.log(key);
|
||||
if (key == 1 && this.isAdd == false) {
|
||||
this.choose_point = true;
|
||||
} else if (key == 1 && this.isAdd == true) {
|
||||
this.$message({
|
||||
message: '添加成功',
|
||||
type: 'success'
|
||||
});
|
||||
}
|
||||
},
|
||||
highlighter(code) {
|
||||
return highlight(code, languages.js); //returns html
|
||||
},
|
||||
closeMenu(ev) {
|
||||
console.log({ ev });
|
||||
this.dialogVisible = false;
|
||||
},
|
||||
savePoint() {
|
||||
this.choose_point = false;
|
||||
this.isAdd = true;
|
||||
},
|
||||
},
|
||||
directives: {
|
||||
'click-outside': {
|
||||
bind: function (el, binding, vnode) {
|
||||
console.log('el', el);
|
||||
console.log("binding", binding);
|
||||
el.event = function (event) {
|
||||
// 检查点击是否发生在节点之内（包括子节点）
|
||||
if (!(el == event.target || el.contains(event.target))) {
|
||||
// 如果没有，则触发调用
|
||||
// 若绑定值为函数，则执行
|
||||
// 这里我们可以通过钩子函数中的 vnode.context，来获取当前组件的作用域
|
||||
if (typeof vnode.context[binding.expression] == 'function') {
|
||||
vnode.context[binding.expression](event)
|
||||
}
|
||||
}
|
||||
}
|
||||
// 绑定事件
|
||||
// 设置为true，代表在DOM树中，注册了该listener的元素，会先于它下方的任何事件目标，接收到该事件。
|
||||
document.body.addEventListener('click', el.event, true)
|
||||
},
|
||||
unbind: function (el) {
|
||||
// 解绑事件
|
||||
document.body.removeEventListener('click', el.event, true)
|
||||
},
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.tree_menu {
|
||||
position: absolute;
|
||||
width: 286px;
|
||||
height: 753px;
|
||||
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);
|
||||
}
|
||||
|
||||
/deep/ .pas_params {
|
||||
.info_play {
|
||||
width: 56px;
|
||||
height: 20px;
|
||||
color: rgba(16, 16, 16, 1);
|
||||
font-size: 14px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.el-divider--horizontal {
|
||||
margin: 8px 0;
|
||||
}
|
||||
|
||||
.el-button {
|
||||
width: 80px;
|
||||
height: 30px;
|
||||
line-height: 0.5;
|
||||
}
|
||||
|
||||
.el-col-12:last-child {
|
||||
padding-right: 150px;
|
||||
}
|
||||
|
||||
.el-col-12:first-child {
|
||||
padding-right: 28px;
|
||||
}
|
||||
|
||||
.el-row {
|
||||
height: 40px;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
|
||||
.el-col-1 {
|
||||
text-align: center;
|
||||
line-height: 52px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.el-col-9 {
|
||||
padding-left: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.el-input__inner {
|
||||
height: 30px;
|
||||
text-align: left;
|
||||
padding: 0px 8px;
|
||||
}
|
||||
|
||||
.content {
|
||||
position: absolute;
|
||||
left: 362px;
|
||||
top: 104px;
|
||||
width: 1220px;
|
||||
height: 836px;
|
||||
line-height: 20px;
|
||||
padding-left: 36px;
|
||||
background-color: rgba(255, 255, 255, 1);
|
||||
color: rgba(16, 16, 16, 1);
|
||||
font-size: 14px;
|
||||
border: 1px solid rgba(187, 187, 187, 1);
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
|
||||
.el-form-item {
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
/deep/ .con_left {
|
||||
.el-con-5 {
|
||||
width: 43px;
|
||||
}
|
||||
}
|
||||
|
||||
.con_left {
|
||||
width: 709px;
|
||||
position: relative;
|
||||
|
||||
.my-editor {
|
||||
background: #2d2d2d;
|
||||
color: #ccc;
|
||||
|
||||
font-family: Fira code, Fira Mono, Consolas, Menlo, Courier, monospace;
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
/* optional */
|
||||
.prism-editor__textarea:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
/* not required: */
|
||||
.height-300 {
|
||||
width: 491px;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.infos {
|
||||
width: 60px;
|
||||
position: absolute;
|
||||
left: 208px;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.con_left_footer {
|
||||
position: absolute;
|
||||
left: 499px;
|
||||
top: 720px;
|
||||
}
|
||||
}
|
||||
|
||||
.con_right {
|
||||
width: 480px;
|
||||
|
||||
.dialog-footer {
|
||||
.el-button {
|
||||
width: 80px;
|
||||
height: 30px;
|
||||
line-height: 0.5;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,521 @@
|
|||
<!-- 斥候MQTT云 -->
|
||||
<template>
|
||||
<div class="Clone">
|
||||
<!-- 设置树形控件 -->
|
||||
<div v-click-outside="closeMenu">
|
||||
<!-- <el-button type="info" plain @click="dialogVisible = true">斥侯MQTT云</el-button> -->
|
||||
<div v-show="dialogVisible" class="tree_menu">
|
||||
<el-tree :data="datas" :props="defaultProps" @node-click="treeNodeClick"></el-tree>
|
||||
<!-- 树形控件右键组件 -->
|
||||
</div>
|
||||
</div>
|
||||
<div class="pas_params" v-show="add_passage">
|
||||
<div class="content">
|
||||
<div class="con_left">
|
||||
<el-form :label-position="labelPosition" :rules="rules" ref="ruleForm">
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-form-item>
|
||||
<el-checkbox v-model="mqtt_qiyong">启用</el-checkbox>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="服务器IP:" :label-width="formLabelWidth" prop="mqtt_ip">
|
||||
<el-row>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="mqtt_ip1" style="width: 43px; height: 30px"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1">. </el-col>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="mqtt_ip2" style="width: 43px; height: 30px"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1">.</el-col>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="mqtt_ip3" style="width: 43px; height: 30px"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1">.</el-col>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="mqtt_ip4" style="width: 43px; height: 30px"></el-input>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="网关SN:" :label-width="formLabelWidth" prop="mqtt_wgsn">
|
||||
<el-input v-model="mqtt_wgsn" placeholder=""
|
||||
style="width: 200px; height: 30px"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="端口:" :label-width="formLabelWidth" prop="mqtt_port">
|
||||
<el-input v-model="mqtt_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="Keep Alive(s):" :label-width="formLabelWidth" prop="mqtt_keepalive">
|
||||
<el-input v-model="mqtt_keepalive" placeholder="64"
|
||||
style="width: 200px; height: 30px"></el-input>
|
||||
<div class="infos">2-60000</div>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="TLS加密:" :label-width="formLabelWidth" prop="mqtt_tls">
|
||||
<el-switch v-model="mqtt_tls"></el-switch>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="清除Session:" :label-width="formLabelWidth" prop="mqtt_clearsession">
|
||||
<el-switch v-model="mqtt_clearsession"></el-switch>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<h3 class="info_play">信息发布</h3>
|
||||
<el-divider></el-divider>
|
||||
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="Qos(MQTT):" :label-width="formLabelWidth"
|
||||
prop="upload_week">
|
||||
<el-select v-model="mqtt_qos" placeholder="请选择" 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-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<!-- <el-col :span="12">
|
||||
<el-form-item label="retained:" :label-width="formLabelWidth" prop="retained">
|
||||
<el-switch v-model="value1"></el-switch>
|
||||
</el-form-item>
|
||||
</el-col> -->
|
||||
</el-row>
|
||||
<!-- <el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="入口函数:" :label-width="formLabelWidth" prop="upload_week">
|
||||
<el-input v-model="input1" placeholder="64" style="width: 200px;height:30px"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row> -->
|
||||
<!-- <el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="函数代码:" :label-width="formLabelWidth" prop="upload_week">
|
||||
<prism-editor class="my-editor height-300" v-model="code" :highlight="highlighter"
|
||||
:line-numbers="lineNumbers"></prism-editor>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row> -->
|
||||
<div class="con_left_footer">
|
||||
<el-button type="primary" @click="add_passage = false">保 存</el-button>
|
||||
<el-button @click="add_passage = false">取 消</el-button>
|
||||
</div>
|
||||
</el-form>
|
||||
</div>
|
||||
<div>
|
||||
<el-dialog title="选择点" :visible.sync="choose_point" width="30%">
|
||||
<el-tree :data="points" show-checkbox node-key="id" :default-expanded-keys="[1, 2]"
|
||||
:default-checked-keys="[3, 4, 5, 6]" :props="defaultProps">
|
||||
</el-tree>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="savePoint">保 存</el-button>
|
||||
<el-button @click="choose_point = false">取 消</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 添加按钮下显示出来的弹框信息 -->
|
||||
<div>
|
||||
<el-dialog title="选择点" :visible.sync="choose_point" width="30%">
|
||||
<el-tree :data="points" show-checkbox node-key="id" :default-expanded-keys="[1, 2]"
|
||||
:default-checked-keys="[3, 4, 5, 6]" :props="defaultProps">
|
||||
</el-tree>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="choose_point = false">保 存</el-button>
|
||||
<el-button @click="choose_point = false">取 消</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { PrismEditor } from "vue-prism-editor";
|
||||
import "vue-prism-editor/dist/prismeditor.min.css"; // import the styles somewhere
|
||||
// import highlighting library (you can use any library you want just return html string)
|
||||
import { highlight, languages } from "prismjs/components/prism-core";
|
||||
import "prismjs/components/prism-clike";
|
||||
import "prismjs/components/prism-javascript";
|
||||
import "prismjs/themes/prism-tomorrow.css"; // import syntax highlighting styles
|
||||
|
||||
export default {
|
||||
name: "ChiClone",
|
||||
components: {
|
||||
PrismEditor,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
mqtt_qiyong: true,
|
||||
mqtt_ip: "",
|
||||
mqtt_ip1: "",
|
||||
mqtt_ip2: "",
|
||||
mqtt_ip3: "",
|
||||
mqtt_ip4: "",
|
||||
mqtt_wgsn: "",
|
||||
mqtt_port: "",
|
||||
mqtt_keepalive: "",
|
||||
mqtt_tls: false,
|
||||
mqtt_clearsession: false,
|
||||
// mqtt_sssjfbzt:"",
|
||||
mqtt_qos: "0",
|
||||
// code: 'console.log("Hello World")',
|
||||
// lineNumbers: true, // true为编辑模式， false只展示不可编辑
|
||||
points: [
|
||||
{
|
||||
id: 1,
|
||||
label: "Device1",
|
||||
children: [
|
||||
{
|
||||
id: 3,
|
||||
label: "tag0001",
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
label: "tag0002",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
label: "Device1",
|
||||
children: [
|
||||
{
|
||||
id: 5,
|
||||
label: "tag0003",
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
label: "tag0004",
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
choose_point: false,
|
||||
options1: [
|
||||
{
|
||||
value: "0",
|
||||
label: "0",
|
||||
},
|
||||
{
|
||||
value: "1",
|
||||
label: "1",
|
||||
},
|
||||
{
|
||||
value: "2",
|
||||
label: "2",
|
||||
},
|
||||
],
|
||||
labelPosition: "left",
|
||||
formLabelWidth: "114px",
|
||||
input1: 192,
|
||||
add_passage: false,
|
||||
rightMenu: "",
|
||||
dialogVisible: true,
|
||||
isAdd: false,
|
||||
datas: [
|
||||
{
|
||||
label: 'Gateway',
|
||||
children: [{
|
||||
label: '数据采集',
|
||||
children: [{
|
||||
label: 'I/O点'
|
||||
},
|
||||
{
|
||||
label: '用户点',
|
||||
},
|
||||
{
|
||||
label: '计算点',
|
||||
},
|
||||
{
|
||||
label: '系统点',
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
label: "用户点",
|
||||
},
|
||||
{
|
||||
label: "计算点",
|
||||
},
|
||||
{
|
||||
label: "系统点",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "上云服务",
|
||||
children: [
|
||||
{
|
||||
label: "标准 MQTT",
|
||||
},
|
||||
{
|
||||
label: "AWS loT",
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
defaultProps: {
|
||||
children: "children",
|
||||
label: "label",
|
||||
},
|
||||
tableData: [
|
||||
{
|
||||
mqtt_cjd_sbmc: "Device1",
|
||||
mqtt_cjd_tagid: "Device1.tag0001",
|
||||
}],
|
||||
rules: {
|
||||
server_ip: [
|
||||
{ required: true, message: "请输入服务器IP", trigger: "blur" },
|
||||
],
|
||||
port_number: [
|
||||
{ required: true, message: "请输入端口", trigger: "blur" },
|
||||
],
|
||||
gateway_id: [
|
||||
{ required: true, message: "请输入网关ID", trigger: "blur" },
|
||||
],
|
||||
data_theme: [
|
||||
{ required: true, message: "请输入主题", trigger: "blur" },
|
||||
],
|
||||
upload_mode: [
|
||||
{ required: true, message: "请输入上传模式", trigger: "blur" },
|
||||
],
|
||||
upload_week: [
|
||||
{ required: true, message: "请输入上传周期", trigger: "blur" },
|
||||
],
|
||||
data_filter: [
|
||||
{ required: true, message: "请输入数据过滤", trigger: "blur" },
|
||||
],
|
||||
},
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
treeNodeClick() {
|
||||
this.add_passage = true;
|
||||
},
|
||||
getDriveName() {
|
||||
this.diag_drive = true;
|
||||
},
|
||||
handleSelect(key) {
|
||||
console.log(key);
|
||||
if (key == 1 && this.isAdd == false) {
|
||||
this.choose_point = true;
|
||||
} else if (key == 1 && this.isAdd == true) {
|
||||
this.$message({
|
||||
message: '添加成功',
|
||||
type: 'success'
|
||||
});
|
||||
}
|
||||
},
|
||||
highlighter(code) {
|
||||
return highlight(code, languages.js); //returns html
|
||||
},
|
||||
closeMenu(ev) {
|
||||
console.log({ ev });
|
||||
this.dialogVisible = false;
|
||||
},
|
||||
savePoint() {
|
||||
this.choose_point = false;
|
||||
this.isAdd = true;
|
||||
},
|
||||
},
|
||||
directives: {
|
||||
'click-outside': {
|
||||
bind: function (el, binding, vnode) {
|
||||
console.log('el', el);
|
||||
console.log("binding", binding);
|
||||
el.event = function (event) {
|
||||
// 检查点击是否发生在节点之内（包括子节点）
|
||||
if (!(el == event.target || el.contains(event.target))) {
|
||||
// 如果没有，则触发调用
|
||||
// 若绑定值为函数，则执行
|
||||
// 这里我们可以通过钩子函数中的 vnode.context，来获取当前组件的作用域
|
||||
if (typeof vnode.context[binding.expression] == 'function') {
|
||||
vnode.context[binding.expression](event)
|
||||
}
|
||||
}
|
||||
}
|
||||
// 绑定事件
|
||||
// 设置为true，代表在DOM树中，注册了该listener的元素，会先于它下方的任何事件目标，接收到该事件。
|
||||
document.body.addEventListener('click', el.event, true)
|
||||
},
|
||||
unbind: function (el) {
|
||||
// 解绑事件
|
||||
document.body.removeEventListener('click', el.event, true)
|
||||
},
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.tree_menu {
|
||||
position: absolute;
|
||||
width: 286px;
|
||||
height: 753px;
|
||||
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);
|
||||
}
|
||||
|
||||
/deep/ .pas_params {
|
||||
.info_play {
|
||||
width: 56px;
|
||||
height: 20px;
|
||||
color: rgba(16, 16, 16, 1);
|
||||
font-size: 14px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.el-divider--horizontal {
|
||||
margin: 8px 0;
|
||||
}
|
||||
|
||||
.el-button {
|
||||
width: 80px;
|
||||
height: 30px;
|
||||
line-height: 0.5;
|
||||
}
|
||||
|
||||
.el-col-12:last-child {
|
||||
padding-right: 150px;
|
||||
}
|
||||
|
||||
.el-col-12:first-child {
|
||||
padding-right: 28px;
|
||||
}
|
||||
|
||||
.el-row {
|
||||
height: 40px;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
|
||||
.el-col-1 {
|
||||
text-align: center;
|
||||
line-height: 52px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.el-col-9 {
|
||||
padding-left: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.el-input__inner {
|
||||
height: 30px;
|
||||
text-align: left;
|
||||
padding: 0px 8px;
|
||||
}
|
||||
|
||||
.content {
|
||||
position: absolute;
|
||||
left: 362px;
|
||||
top: 104px;
|
||||
width: 1220px;
|
||||
height: 836px;
|
||||
line-height: 20px;
|
||||
padding-left: 36px;
|
||||
background-color: rgba(255, 255, 255, 1);
|
||||
color: rgba(16, 16, 16, 1);
|
||||
font-size: 14px;
|
||||
border: 1px solid rgba(187, 187, 187, 1);
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
|
||||
.el-form-item {
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
/deep/ .con_left {
|
||||
.el-con-5 {
|
||||
width: 43px;
|
||||
}
|
||||
}
|
||||
|
||||
.con_left {
|
||||
width: 709px;
|
||||
position: relative;
|
||||
|
||||
.my-editor {
|
||||
background: #2d2d2d;
|
||||
color: #ccc;
|
||||
|
||||
font-family: Fira code, Fira Mono, Consolas, Menlo, Courier, monospace;
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
/* optional */
|
||||
.prism-editor__textarea:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
/* not required: */
|
||||
.height-300 {
|
||||
width: 491px;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.infos {
|
||||
width: 60px;
|
||||
position: absolute;
|
||||
left: 208px;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.con_left_footer {
|
||||
position: absolute;
|
||||
left: 499px;
|
||||
top: 720px;
|
||||
}
|
||||
}
|
||||
|
||||
.con_right {
|
||||
width: 480px;
|
||||
|
||||
.dialog-footer {
|
||||
.el-button {
|
||||
width: 80px;
|
||||
height: 30px;
|
||||
line-height: 0.5;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,593 @@
|
|||
<!-- 斥候MQTT云 -->
|
||||
<template>
|
||||
<div class="Clone">
|
||||
<!-- 设置树形控件 -->
|
||||
<div v-click-outside="closeMenu">
|
||||
<!-- <el-button type="info" plain @click="dialogVisible = true">斥侯MQTT云</el-button> -->
|
||||
<div v-show="dialogVisible" class="tree_menu">
|
||||
<el-tree
|
||||
:data="datas"
|
||||
:props="defaultProps"
|
||||
@node-click="treeNodeClick"
|
||||
></el-tree>
|
||||
<!-- 树形控件右键组件 -->
|
||||
</div>
|
||||
</div>
|
||||
<div class="pas_params" v-show="add_passage">
|
||||
<div class="content">
|
||||
<div class="con_left">
|
||||
<el-form
|
||||
:label-position="labelPosition"
|
||||
:rules="rules"
|
||||
ref="ruleForm"
|
||||
>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-form-item>
|
||||
<el-checkbox v-model="mqtt_qiyong">启用</el-checkbox>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item
|
||||
label="服务器IP:"
|
||||
:label-width="formLabelWidth"
|
||||
prop="mqtt_ip"
|
||||
>
|
||||
<el-row>
|
||||
<el-col :span="5">
|
||||
<el-input
|
||||
v-model="mqtt_ip1"
|
||||
style="width: 43px; height: 30px"
|
||||
></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1">. </el-col>
|
||||
<el-col :span="5">
|
||||
<el-input
|
||||
v-model="mqtt_ip2"
|
||||
style="width: 43px; height: 30px"
|
||||
></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1">.</el-col>
|
||||
<el-col :span="5">
|
||||
<el-input
|
||||
v-model="mqtt_ip3"
|
||||
style="width: 43px; height: 30px"
|
||||
></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1">.</el-col>
|
||||
<el-col :span="5">
|
||||
<el-input
|
||||
v-model="mqtt_ip4"
|
||||
style="width: 43px; height: 30px"
|
||||
></el-input>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-form-item
|
||||
label="网关SN:"
|
||||
:label-width="formLabelWidth"
|
||||
prop="mqtt_wgsn"
|
||||
>
|
||||
<el-input
|
||||
v-model="mqtt_wgsn"
|
||||
placeholder=""
|
||||
style="width: 200px; height: 30px"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-form-item
|
||||
label="端口:"
|
||||
:label-width="formLabelWidth"
|
||||
prop="mqtt_port"
|
||||
>
|
||||
<el-input
|
||||
v-model="mqtt_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="Keep Alive(s):"
|
||||
:label-width="formLabelWidth"
|
||||
prop="mqtt_keepalive"
|
||||
>
|
||||
<el-input
|
||||
v-model="mqtt_keepalive"
|
||||
placeholder="64"
|
||||
style="width: 200px; height: 30px"
|
||||
></el-input>
|
||||
<div class="infos">2-60000</div>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item
|
||||
label="TLS加密:"
|
||||
:label-width="formLabelWidth"
|
||||
prop="mqtt_tls"
|
||||
>
|
||||
<el-switch v-model="mqtt_tls"></el-switch>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item
|
||||
label="清除Session:"
|
||||
:label-width="formLabelWidth"
|
||||
prop="mqtt_clearsession"
|
||||
>
|
||||
<el-switch v-model="mqtt_clearsession"></el-switch>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<h3 class="info_play">信息发布</h3>
|
||||
<el-divider></el-divider>
|
||||
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item
|
||||
label="Qos(MQTT):"
|
||||
:label-width="formLabelWidth"
|
||||
prop="upload_week"
|
||||
>
|
||||
<el-select
|
||||
v-model="mqtt_qos"
|
||||
placeholder="请选择"
|
||||
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-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<!-- <el-col :span="12">
|
||||
<el-form-item label="retained:" :label-width="formLabelWidth" prop="retained">
|
||||
<el-switch v-model="value1"></el-switch>
|
||||
</el-form-item>
|
||||
</el-col> -->
|
||||
</el-row>
|
||||
<!-- <el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="入口函数:" :label-width="formLabelWidth" prop="upload_week">
|
||||
<el-input v-model="input1" placeholder="64" style="width: 200px;height:30px"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row> -->
|
||||
<!-- <el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="函数代码:" :label-width="formLabelWidth" prop="upload_week">
|
||||
<prism-editor class="my-editor height-300" v-model="code" :highlight="highlighter"
|
||||
:line-numbers="lineNumbers"></prism-editor>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row> -->
|
||||
<div class="con_left_footer">
|
||||
<el-button type="primary" @click="add_passage = false"
|
||||
>保 存</el-button
|
||||
>
|
||||
<el-button @click="add_passage = false">取 消</el-button>
|
||||
</div>
|
||||
</el-form>
|
||||
</div>
|
||||
<div>
|
||||
<div class="con_right">
|
||||
<el-menu
|
||||
class="el-menu-demo"
|
||||
mode="horizontal"
|
||||
@select="handleSelect"
|
||||
>
|
||||
<el-menu-item index="1">添加</el-menu-item>
|
||||
<el-menu-item index="2">保存</el-menu-item>
|
||||
<el-menu-item index="3">删除</el-menu-item>
|
||||
</el-menu>
|
||||
</div>
|
||||
<el-table ref="singleTable" :data="tableData" style="width: 100%">
|
||||
<el-table-column type="index"> </el-table-column>
|
||||
<el-table-column property="mqtt_cjd_sbmc" label="设备名称">
|
||||
</el-table-column>
|
||||
<el-table-column property="mqtt_cjd_tagid" label="TagID">
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 添加按钮下显示出来的弹框信息 -->
|
||||
<div>
|
||||
<el-dialog title="选择点" :visible.sync="choose_point" width="30%">
|
||||
<el-tree
|
||||
:data="points"
|
||||
show-checkbox
|
||||
node-key="id"
|
||||
:default-expanded-keys="[1, 2]"
|
||||
:default-checked-keys="[3, 4, 5, 6]"
|
||||
:props="defaultProps"
|
||||
>
|
||||
</el-tree>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="choose_point = false"
|
||||
>保 存</el-button
|
||||
>
|
||||
<el-button @click="choose_point = false">取 消</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { PrismEditor } from "vue-prism-editor";
|
||||
import "vue-prism-editor/dist/prismeditor.min.css"; // import the styles somewhere
|
||||
// import highlighting library (you can use any library you want just return html string)
|
||||
import { highlight, languages } from "prismjs/components/prism-core";
|
||||
import "prismjs/components/prism-clike";
|
||||
import "prismjs/components/prism-javascript";
|
||||
import "prismjs/themes/prism-tomorrow.css"; // import syntax highlighting styles
|
||||
|
||||
export default {
|
||||
name: "ChiClone",
|
||||
components: {
|
||||
PrismEditor,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
mqtt_qiyong: true,
|
||||
mqtt_ip: "",
|
||||
mqtt_ip1: "",
|
||||
mqtt_ip2: "",
|
||||
mqtt_ip3: "",
|
||||
mqtt_ip4: "",
|
||||
mqtt_wgsn: "",
|
||||
mqtt_port: "",
|
||||
mqtt_keepalive: "",
|
||||
mqtt_tls: false,
|
||||
mqtt_clearsession: false,
|
||||
// mqtt_sssjfbzt:"",
|
||||
mqtt_qos: "0",
|
||||
// code: 'console.log("Hello World")',
|
||||
// lineNumbers: true, // true为编辑模式， false只展示不可编辑
|
||||
points: [
|
||||
{
|
||||
id: 1,
|
||||
label: "Device1",
|
||||
children: [
|
||||
{
|
||||
id: 3,
|
||||
label: "tag0001",
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
label: "tag0002",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
label: "Device1",
|
||||
children: [
|
||||
{
|
||||
id: 5,
|
||||
label: "tag0003",
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
label: "tag0004",
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
choose_point: false,
|
||||
options1: [
|
||||
{
|
||||
value: "0",
|
||||
label: "0",
|
||||
},
|
||||
{
|
||||
value: "1",
|
||||
label: "1",
|
||||
},
|
||||
{
|
||||
value: "2",
|
||||
label: "2",
|
||||
},
|
||||
],
|
||||
labelPosition: "left",
|
||||
formLabelWidth: "114px",
|
||||
input1: 192,
|
||||
add_passage: false,
|
||||
rightMenu: "",
|
||||
dialogVisible: true,
|
||||
menuShow: false,
|
||||
datas: [
|
||||
{
|
||||
label: "Gateway",
|
||||
children: [
|
||||
{
|
||||
label: "数据采集",
|
||||
children: [
|
||||
{
|
||||
label: "I/O点",
|
||||
},
|
||||
{
|
||||
label: "用户点",
|
||||
},
|
||||
{
|
||||
label: "计算点",
|
||||
},
|
||||
{
|
||||
label: "系统点",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "上云服务",
|
||||
children: [
|
||||
{
|
||||
label: "标准 MQTT",
|
||||
},
|
||||
{
|
||||
label: "AWS loT",
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
defaultProps: {
|
||||
children: "children",
|
||||
label: "label",
|
||||
},
|
||||
tableData: [
|
||||
{
|
||||
mqtt_cjd_sbmc: "Device1",
|
||||
mqtt_cjd_tagid: "Device1.tag0001",
|
||||
},
|
||||
],
|
||||
rules: {
|
||||
server_ip: [
|
||||
{ required: true, message: "请输入服务器IP", trigger: "blur" },
|
||||
],
|
||||
port_number: [
|
||||
{ required: true, message: "请输入端口", trigger: "blur" },
|
||||
],
|
||||
gateway_id: [
|
||||
{ required: true, message: "请输入网关ID", trigger: "blur" },
|
||||
],
|
||||
data_theme: [
|
||||
{ required: true, message: "请输入主题", trigger: "blur" },
|
||||
],
|
||||
upload_mode: [
|
||||
{ required: true, message: "请输入上传模式", trigger: "blur" },
|
||||
],
|
||||
upload_week: [
|
||||
{ required: true, message: "请输入上传周期", trigger: "blur" },
|
||||
],
|
||||
data_filter: [
|
||||
{ required: true, message: "请输入数据过滤", trigger: "blur" },
|
||||
],
|
||||
},
|
||||
};
|
||||
},
|
||||
|
||||
mounted() {},
|
||||
|
||||
methods: {
|
||||
treeNodeClick() {
|
||||
this.add_passage = true;
|
||||
},
|
||||
getDriveName() {
|
||||
this.diag_drive = true;
|
||||
},
|
||||
handleSelect(key) {
|
||||
console.log(key);
|
||||
if (key == 1) {
|
||||
this.choose_point = true;
|
||||
}
|
||||
},
|
||||
highlighter(code) {
|
||||
return highlight(code, languages.js); //returns html
|
||||
},
|
||||
closeMenu(ev) {
|
||||
console.log({ ev });
|
||||
this.dialogVisible = false;
|
||||
},
|
||||
},
|
||||
directives: {
|
||||
"click-outside": {
|
||||
bind: function (el, binding, vnode) {
|
||||
console.log("el", el);
|
||||
console.log("binding", binding);
|
||||
el.event = function (event) {
|
||||
// 检查点击是否发生在节点之内（包括子节点）
|
||||
if (!(el == event.target || el.contains(event.target))) {
|
||||
// 如果没有，则触发调用
|
||||
// 若绑定值为函数，则执行
|
||||
// 这里我们可以通过钩子函数中的 vnode.context，来获取当前组件的作用域
|
||||
if (typeof vnode.context[binding.expression] == "function") {
|
||||
vnode.context[binding.expression](event);
|
||||
}
|
||||
}
|
||||
};
|
||||
// 绑定事件
|
||||
// 设置为true，代表在DOM树中，注册了该listener的元素，会先于它下方的任何事件目标，接收到该事件。
|
||||
document.body.addEventListener("click", el.event, true);
|
||||
},
|
||||
unbind: function (el) {
|
||||
// 解绑事件
|
||||
document.body.removeEventListener("click", el.event, true);
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.tree_menu {
|
||||
position: absolute;
|
||||
width: 286px;
|
||||
height: 753px;
|
||||
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);
|
||||
}
|
||||
|
||||
/deep/ .pas_params {
|
||||
.info_play {
|
||||
width: 56px;
|
||||
height: 20px;
|
||||
color: rgba(16, 16, 16, 1);
|
||||
font-size: 14px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.el-divider--horizontal {
|
||||
margin: 8px 0;
|
||||
}
|
||||
|
||||
.el-button {
|
||||
width: 80px;
|
||||
height: 30px;
|
||||
line-height: 0.5;
|
||||
}
|
||||
|
||||
.el-col-12:last-child {
|
||||
padding-right: 150px;
|
||||
}
|
||||
|
||||
.el-col-12:first-child {
|
||||
padding-right: 28px;
|
||||
}
|
||||
|
||||
.el-row {
|
||||
height: 40px;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
|
||||
.el-col-1 {
|
||||
text-align: center;
|
||||
line-height: 52px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.el-col-9 {
|
||||
padding-left: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.el-input__inner {
|
||||
height: 30px;
|
||||
text-align: left;
|
||||
padding: 0px 8px;
|
||||
}
|
||||
|
||||
.content {
|
||||
position: absolute;
|
||||
left: 362px;
|
||||
top: 104px;
|
||||
width: 1220px;
|
||||
height: 836px;
|
||||
line-height: 20px;
|
||||
padding-left: 36px;
|
||||
background-color: rgba(255, 255, 255, 1);
|
||||
color: rgba(16, 16, 16, 1);
|
||||
font-size: 14px;
|
||||
border: 1px solid rgba(187, 187, 187, 1);
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
|
||||
.el-form-item {
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
/deep/ .con_left {
|
||||
.el-con-5 {
|
||||
width: 43px;
|
||||
}
|
||||
}
|
||||
|
||||
.con_left {
|
||||
width: 709px;
|
||||
position: relative;
|
||||
|
||||
.my-editor {
|
||||
background: #2d2d2d;
|
||||
color: #ccc;
|
||||
|
||||
font-family: Fira code, Fira Mono, Consolas, Menlo, Courier, monospace;
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
/* optional */
|
||||
.prism-editor__textarea:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
/* not required: */
|
||||
.height-300 {
|
||||
width: 491px;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.infos {
|
||||
width: 60px;
|
||||
position: absolute;
|
||||
left: 208px;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.con_left_footer {
|
||||
position: absolute;
|
||||
left: 499px;
|
||||
top: 720px;
|
||||
}
|
||||
}
|
||||
|
||||
.con_right {
|
||||
width: 480px;
|
||||
|
||||
.dialog-footer {
|
||||
.el-button {
|
||||
width: 80px;
|
||||
height: 30px;
|
||||
line-height: 0.5;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
@ -0,0 +1,591 @@
|
|||
<!-- 斥候MQTT云 -->
|
||||
<template>
|
||||
<div class="Clone">
|
||||
<!-- 设置树形控件 -->
|
||||
<div v-click-outside="closeMenu">
|
||||
<!-- <el-button type="info" plain @click="dialogVisible = true">斥侯MQTT云</el-button> -->
|
||||
<div v-show="dialogVisible" class="tree_menu">
|
||||
<el-tree
|
||||
:data="datas"
|
||||
:props="defaultProps"
|
||||
@node-click="treeNodeClick"
|
||||
></el-tree>
|
||||
<!-- 树形控件右键组件 -->
|
||||
</div>
|
||||
</div>
|
||||
<div class="pas_params" v-show="add_passage">
|
||||
<div class="content">
|
||||
<div class="con_left">
|
||||
<el-form
|
||||
:label-position="labelPosition"
|
||||
:rules="rules"
|
||||
ref="ruleForm"
|
||||
>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-form-item>
|
||||
<el-checkbox v-model="mqtt_qiyong">启用</el-checkbox>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item
|
||||
label="服务器IP:"
|
||||
:label-width="formLabelWidth"
|
||||
prop="mqtt_ip"
|
||||
>
|
||||
<el-row>
|
||||
<el-col :span="5">
|
||||
<el-input
|
||||
v-model="mqtt_ip1"
|
||||
style="width: 43px; height: 30px"
|
||||
></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1">. </el-col>
|
||||
<el-col :span="5">
|
||||
<el-input
|
||||
v-model="mqtt_ip2"
|
||||
style="width: 43px; height: 30px"
|
||||
></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1">.</el-col>
|
||||
<el-col :span="5">
|
||||
<el-input
|
||||
v-model="mqtt_ip3"
|
||||
style="width: 43px; height: 30px"
|
||||
></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1">.</el-col>
|
||||
<el-col :span="5">
|
||||
<el-input
|
||||
v-model="mqtt_ip4"
|
||||
style="width: 43px; height: 30px"
|
||||
></el-input>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-form-item
|
||||
label="网关SN:"
|
||||
:label-width="formLabelWidth"
|
||||
prop="mqtt_wgsn"
|
||||
>
|
||||
<el-input
|
||||
v-model="mqtt_wgsn"
|
||||
placeholder=""
|
||||
style="width: 200px; height: 30px"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-form-item
|
||||
label="端口:"
|
||||
:label-width="formLabelWidth"
|
||||
prop="mqtt_port"
|
||||
>
|
||||
<el-input
|
||||
v-model="mqtt_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="Keep Alive(s):"
|
||||
:label-width="formLabelWidth"
|
||||
prop="mqtt_keepalive"
|
||||
>
|
||||
<el-input
|
||||
v-model="mqtt_keepalive"
|
||||
placeholder="64"
|
||||
style="width: 200px; height: 30px"
|
||||
></el-input>
|
||||
<div class="infos">2-60000</div>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item
|
||||
label="TLS加密:"
|
||||
:label-width="formLabelWidth"
|
||||
prop="mqtt_tls"
|
||||
>
|
||||
<el-switch v-model="mqtt_tls"></el-switch>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item
|
||||
label="清除Session:"
|
||||
:label-width="formLabelWidth"
|
||||
prop="mqtt_clearsession"
|
||||
>
|
||||
<el-switch v-model="mqtt_clearsession"></el-switch>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<h3 class="info_play">信息发布</h3>
|
||||
<el-divider></el-divider>
|
||||
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item
|
||||
label="Qos(MQTT):"
|
||||
:label-width="formLabelWidth"
|
||||
prop="upload_week"
|
||||
>
|
||||
<el-select
|
||||
v-model="mqtt_qos"
|
||||
placeholder="请选择"
|
||||
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-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<!-- <el-col :span="12">
|
||||
<el-form-item label="retained:" :label-width="formLabelWidth" prop="retained">
|
||||
<el-switch v-model="value1"></el-switch>
|
||||
</el-form-item>
|
||||
</el-col> -->
|
||||
</el-row>
|
||||
<!-- <el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="入口函数:" :label-width="formLabelWidth" prop="upload_week">
|
||||
<el-input v-model="input1" placeholder="64" style="width: 200px;height:30px"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row> -->
|
||||
<!-- <el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="函数代码:" :label-width="formLabelWidth" prop="upload_week">
|
||||
<prism-editor class="my-editor height-300" v-model="code" :highlight="highlighter"
|
||||
:line-numbers="lineNumbers"></prism-editor>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row> -->
|
||||
<div class="con_left_footer">
|
||||
<el-button type="primary" @click="add_passage = false"
|
||||
>保 存</el-button
|
||||
>
|
||||
<el-button @click="add_passage = false">取 消</el-button>
|
||||
</div>
|
||||
</el-form>
|
||||
</div>
|
||||
<div>
|
||||
<div class="con_right">
|
||||
<el-menu
|
||||
class="el-menu-demo"
|
||||
mode="horizontal"
|
||||
@select="handleSelect"
|
||||
>
|
||||
<el-menu-item index="1">添加</el-menu-item>
|
||||
<el-menu-item index="2">保存</el-menu-item>
|
||||
<el-menu-item index="3">删除</el-menu-item>
|
||||
</el-menu>
|
||||
</div>
|
||||
<el-table ref="singleTable" :data="tableData" style="width: 100%">
|
||||
<el-table-column type="index"> </el-table-column>
|
||||
<el-table-column property="mqtt_cjd_sbmc" label="设备名称">
|
||||
</el-table-column>
|
||||
<el-table-column property="mqtt_cjd_tagid" label="TagID">
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 添加按钮下显示出来的弹框信息 -->
|
||||
<div>
|
||||
<el-dialog title="选择点" :visible.sync="choose_point" width="30%">
|
||||
<el-tree
|
||||
:data="points"
|
||||
show-checkbox
|
||||
node-key="id"
|
||||
:default-expanded-keys="[1, 2]"
|
||||
:default-checked-keys="[3, 4, 5, 6]"
|
||||
:props="defaultProps"
|
||||
>
|
||||
</el-tree>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="choose_point = false"
|
||||
>保 存</el-button
|
||||
>
|
||||
<el-button @click="choose_point = false">取 消</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { PrismEditor } from "vue-prism-editor";
|
||||
import "vue-prism-editor/dist/prismeditor.min.css"; // import the styles somewhere
|
||||
// import highlighting library (you can use any library you want just return html string)
|
||||
import { highlight, languages } from "prismjs/components/prism-core";
|
||||
import "prismjs/components/prism-clike";
|
||||
import "prismjs/components/prism-javascript";
|
||||
import "prismjs/themes/prism-tomorrow.css"; // import syntax highlighting styles
|
||||
|
||||
export default {
|
||||
name: "ChiClone",
|
||||
components: {
|
||||
PrismEditor,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
mqtt_qiyong: true,
|
||||
mqtt_ip: "",
|
||||
mqtt_ip1: "",
|
||||
mqtt_ip2: "",
|
||||
mqtt_ip3: "",
|
||||
mqtt_ip4: "",
|
||||
mqtt_wgsn: "",
|
||||
mqtt_port: "",
|
||||
mqtt_keepalive: "",
|
||||
mqtt_tls: false,
|
||||
mqtt_clearsession: false,
|
||||
// mqtt_sssjfbzt:"",
|
||||
mqtt_qos: "0",
|
||||
// code: 'console.log("Hello World")',
|
||||
// lineNumbers: true, // true为编辑模式， false只展示不可编辑
|
||||
points: [
|
||||
{
|
||||
id: 1,
|
||||
label: "Device1",
|
||||
children: [
|
||||
{
|
||||
id: 3,
|
||||
label: "tag0001",
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
label: "tag0002",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
label: "Device1",
|
||||
children: [
|
||||
{
|
||||
id: 5,
|
||||
label: "tag0003",
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
label: "tag0004",
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
choose_point: false,
|
||||
options1: [
|
||||
{
|
||||
value: "0",
|
||||
label: "0",
|
||||
},
|
||||
{
|
||||
value: "1",
|
||||
label: "1",
|
||||
},
|
||||
{
|
||||
value: "2",
|
||||
label: "2",
|
||||
},
|
||||
],
|
||||
labelPosition: "left",
|
||||
formLabelWidth: "114px",
|
||||
input1: 192,
|
||||
add_passage: false,
|
||||
rightMenu: "",
|
||||
dialogVisible: true,
|
||||
menuShow: false,
|
||||
datas: [
|
||||
{
|
||||
label: "Gateway",
|
||||
children: [
|
||||
{
|
||||
label: "数据采集",
|
||||
children: [
|
||||
{
|
||||
label: "I/O点",
|
||||
},
|
||||
{
|
||||
label: "用户点",
|
||||
},
|
||||
{
|
||||
label: "计算点",
|
||||
},
|
||||
{
|
||||
label: "系统点",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "上云服务",
|
||||
children: [
|
||||
{
|
||||
label: "标准 MQTT",
|
||||
},
|
||||
{
|
||||
label: "AWS loT",
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
defaultProps: {
|
||||
children: "children",
|
||||
label: "label",
|
||||
},
|
||||
tableData: [
|
||||
{
|
||||
mqtt_cjd_sbmc: "Device1",
|
||||
mqtt_cjd_tagid: "Device1.tag0001",
|
||||
},
|
||||
],
|
||||
rules: {
|
||||
server_ip: [
|
||||
{ required: true, message: "请输入服务器IP", trigger: "blur" },
|
||||
],
|
||||
port_number: [
|
||||
{ required: true, message: "请输入端口", trigger: "blur" },
|
||||
],
|
||||
gateway_id: [
|
||||
{ required: true, message: "请输入网关ID", trigger: "blur" },
|
||||
],
|
||||
data_theme: [
|
||||
{ required: true, message: "请输入主题", trigger: "blur" },
|
||||
],
|
||||
upload_mode: [
|
||||
{ required: true, message: "请输入上传模式", trigger: "blur" },
|
||||
],
|
||||
upload_week: [
|
||||
{ required: true, message: "请输入上传周期", trigger: "blur" },
|
||||
],
|
||||
data_filter: [
|
||||
{ required: true, message: "请输入数据过滤", trigger: "blur" },
|
||||
],
|
||||
},
|
||||
};
|
||||
},
|
||||
mounted() {},
|
||||
methods: {
|
||||
treeNodeClick() {
|
||||
this.add_passage = true;
|
||||
},
|
||||
getDriveName() {
|
||||
this.diag_drive = true;
|
||||
},
|
||||
handleSelect(key) {
|
||||
console.log(key);
|
||||
if (key == 1) {
|
||||
this.choose_point = true;
|
||||
}
|
||||
},
|
||||
highlighter(code) {
|
||||
return highlight(code, languages.js); //returns html
|
||||
},
|
||||
closeMenu(ev) {
|
||||
console.log({ ev });
|
||||
this.dialogVisible = false;
|
||||
},
|
||||
},
|
||||
directives: {
|
||||
"click-outside": {
|
||||
bind: function (el, binding, vnode) {
|
||||
console.log("el", el);
|
||||
console.log("binding", binding);
|
||||
el.event = function (event) {
|
||||
// 检查点击是否发生在节点之内（包括子节点）
|
||||
if (!(el == event.target || el.contains(event.target))) {
|
||||
// 如果没有，则触发调用
|
||||
// 若绑定值为函数，则执行
|
||||
// 这里我们可以通过钩子函数中的 vnode.context，来获取当前组件的作用域
|
||||
if (typeof vnode.context[binding.expression] == "function") {
|
||||
vnode.context[binding.expression](event);
|
||||
}
|
||||
}
|
||||
};
|
||||
// 绑定事件
|
||||
// 设置为true，代表在DOM树中，注册了该listener的元素，会先于它下方的任何事件目标，接收到该事件。
|
||||
document.body.addEventListener("click", el.event, true);
|
||||
},
|
||||
unbind: function (el) {
|
||||
// 解绑事件
|
||||
document.body.removeEventListener("click", el.event, true);
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.tree_menu {
|
||||
position: absolute;
|
||||
width: 286px;
|
||||
height: 753px;
|
||||
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);
|
||||
}
|
||||
|
||||
/deep/ .pas_params {
|
||||
.info_play {
|
||||
width: 56px;
|
||||
height: 20px;
|
||||
color: rgba(16, 16, 16, 1);
|
||||
font-size: 14px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.el-divider--horizontal {
|
||||
margin: 8px 0;
|
||||
}
|
||||
|
||||
.el-button {
|
||||
width: 80px;
|
||||
height: 30px;
|
||||
line-height: 0.5;
|
||||
}
|
||||
|
||||
.el-col-12:last-child {
|
||||
padding-right: 150px;
|
||||
}
|
||||
|
||||
.el-col-12:first-child {
|
||||
padding-right: 28px;
|
||||
}
|
||||
|
||||
.el-row {
|
||||
height: 40px;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
|
||||
.el-col-1 {
|
||||
text-align: center;
|
||||
line-height: 52px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.el-col-9 {
|
||||
padding-left: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.el-input__inner {
|
||||
height: 30px;
|
||||
text-align: left;
|
||||
padding: 0px 8px;
|
||||
}
|
||||
|
||||
.content {
|
||||
position: absolute;
|
||||
left: 362px;
|
||||
top: 104px;
|
||||
width: 1220px;
|
||||
height: 836px;
|
||||
line-height: 20px;
|
||||
padding-left: 36px;
|
||||
background-color: rgba(255, 255, 255, 1);
|
||||
color: rgba(16, 16, 16, 1);
|
||||
font-size: 14px;
|
||||
border: 1px solid rgba(187, 187, 187, 1);
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
|
||||
.el-form-item {
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
/deep/ .con_left {
|
||||
.el-con-5 {
|
||||
width: 43px;
|
||||
}
|
||||
}
|
||||
|
||||
.con_left {
|
||||
width: 709px;
|
||||
position: relative;
|
||||
|
||||
.my-editor {
|
||||
background: #2d2d2d;
|
||||
color: #ccc;
|
||||
|
||||
font-family: Fira code, Fira Mono, Consolas, Menlo, Courier, monospace;
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
/* optional */
|
||||
.prism-editor__textarea:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
/* not required: */
|
||||
.height-300 {
|
||||
width: 491px;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.infos {
|
||||
width: 60px;
|
||||
position: absolute;
|
||||
left: 208px;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.con_left_footer {
|
||||
position: absolute;
|
||||
left: 499px;
|
||||
top: 720px;
|
||||
}
|
||||
}
|
||||
|
||||
.con_right {
|
||||
width: 480px;
|
||||
|
||||
.dialog-footer {
|
||||
.el-button {
|
||||
width: 80px;
|
||||
height: 30px;
|
||||
line-height: 0.5;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
@ -0,0 +1,597 @@
|
|||
<!-- 斥候MQTT云 -->
|
||||
<template>
|
||||
<div class="Clone">
|
||||
<!-- 设置树形控件 -->
|
||||
<div v-click-outside="closeMenu">
|
||||
<!-- <el-button type="info" plain @click="dialogVisible = true">斥侯MQTT云</el-button> -->
|
||||
<div v-show="dialogVisible" class="tree_menu">
|
||||
<el-tree
|
||||
:data="datas"
|
||||
:props="defaultProps"
|
||||
@node-click="treeNodeClick"
|
||||
></el-tree>
|
||||
<!-- 树形控件右键组件 -->
|
||||
</div>
|
||||
</div>
|
||||
<div class="pas_params" v-show="add_passage">
|
||||
<div class="content">
|
||||
<div class="con_left">
|
||||
<el-form
|
||||
:label-position="labelPosition"
|
||||
:rules="rules"
|
||||
ref="ruleForm"
|
||||
>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-form-item>
|
||||
<el-checkbox v-model="mqtt_qiyong">启用</el-checkbox>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item
|
||||
label="服务器IP:"
|
||||
:label-width="formLabelWidth"
|
||||
prop="mqtt_ip"
|
||||
>
|
||||
<el-row>
|
||||
<el-col :span="5">
|
||||
<el-input
|
||||
v-model="mqtt_ip1"
|
||||
style="width: 43px; height: 30px"
|
||||
></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1">. </el-col>
|
||||
<el-col :span="5">
|
||||
<el-input
|
||||
v-model="mqtt_ip2"
|
||||
style="width: 43px; height: 30px"
|
||||
></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1">.</el-col>
|
||||
<el-col :span="5">
|
||||
<el-input
|
||||
v-model="mqtt_ip3"
|
||||
style="width: 43px; height: 30px"
|
||||
></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1">.</el-col>
|
||||
<el-col :span="5">
|
||||
<el-input
|
||||
v-model="mqtt_ip4"
|
||||
style="width: 43px; height: 30px"
|
||||
></el-input>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-form-item
|
||||
label="网关SN:"
|
||||
:label-width="formLabelWidth"
|
||||
prop="mqtt_wgsn"
|
||||
>
|
||||
<el-input
|
||||
v-model="mqtt_wgsn"
|
||||
placeholder=""
|
||||
style="width: 200px; height: 30px"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-form-item
|
||||
label="端口:"
|
||||
:label-width="formLabelWidth"
|
||||
prop="mqtt_port"
|
||||
>
|
||||
<el-input
|
||||
v-model="mqtt_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="Keep Alive(s):"
|
||||
:label-width="formLabelWidth"
|
||||
prop="mqtt_keepalive"
|
||||
>
|
||||
<el-input
|
||||
v-model="mqtt_keepalive"
|
||||
placeholder="64"
|
||||
style="width: 200px; height: 30px"
|
||||
></el-input>
|
||||
<div class="infos">2-60000</div>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item
|
||||
label="TLS加密:"
|
||||
:label-width="formLabelWidth"
|
||||
prop="mqtt_tls"
|
||||
>
|
||||
<el-switch v-model="mqtt_tls"></el-switch>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item
|
||||
label="清除Session:"
|
||||
:label-width="formLabelWidth"
|
||||
prop="mqtt_clearsession"
|
||||
>
|
||||
<el-switch v-model="mqtt_clearsession"></el-switch>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<h3 class="info_play">信息发布</h3>
|
||||
<el-divider></el-divider>
|
||||
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item
|
||||
label="Qos(MQTT):"
|
||||
:label-width="formLabelWidth"
|
||||
prop="upload_week"
|
||||
>
|
||||
<el-select
|
||||
v-model="mqtt_qos"
|
||||
placeholder="请选择"
|
||||
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-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<!-- <el-col :span="12">
|
||||
<el-form-item label="retained:" :label-width="formLabelWidth" prop="retained">
|
||||
<el-switch v-model="value1"></el-switch>
|
||||
</el-form-item>
|
||||
</el-col> -->
|
||||
</el-row>
|
||||
<!-- <el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="入口函数:" :label-width="formLabelWidth" prop="upload_week">
|
||||
<el-input v-model="input1" placeholder="64" style="width: 200px;height:30px"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row> -->
|
||||
<!-- <el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="函数代码:" :label-width="formLabelWidth" prop="upload_week">
|
||||
<prism-editor class="my-editor height-300" v-model="code" :highlight="highlighter"
|
||||
:line-numbers="lineNumbers"></prism-editor>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row> -->
|
||||
<div class="con_left_footer">
|
||||
<el-button type="primary" @click="add_passage = false"
|
||||
>保 存</el-button
|
||||
>
|
||||
<el-button @click="add_passage = false">取 消</el-button>
|
||||
</div>
|
||||
</el-form>
|
||||
</div>
|
||||
<div>
|
||||
<div class="con_right">
|
||||
<el-menu
|
||||
class="el-menu-demo"
|
||||
mode="horizontal"
|
||||
@select="handleSelect"
|
||||
>
|
||||
<el-menu-item index="1">添加</el-menu-item>
|
||||
<el-menu-item index="2">保存</el-menu-item>
|
||||
<el-menu-item index="3">删除</el-menu-item>
|
||||
</el-menu>
|
||||
</div>
|
||||
<el-table ref="singleTable" :data="tableData" style="width: 100%">
|
||||
<el-table-column type="index"> </el-table-column>
|
||||
<el-table-column property="mqtt_cjd_sbmc" label="设备名称">
|
||||
</el-table-column>
|
||||
<el-table-column property="mqtt_cjd_tagid" label="TagID">
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 添加按钮下显示出来的弹框信息 -->
|
||||
<div>
|
||||
<el-dialog title="选择点" :visible.sync="choose_point" width="30%">
|
||||
<el-tree
|
||||
:data="points"
|
||||
show-checkbox
|
||||
node-key="id"
|
||||
:default-expanded-keys="[1, 2]"
|
||||
:default-checked-keys="[3, 4, 5, 6]"
|
||||
:props="defaultProps"
|
||||
>
|
||||
</el-tree>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="choose_point = false"
|
||||
>保 存</el-button
|
||||
>
|
||||
<el-button @click="choose_point = false">取 消</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { PrismEditor } from "vue-prism-editor";
|
||||
import "vue-prism-editor/dist/prismeditor.min.css"; // import the styles somewhere
|
||||
// import highlighting library (you can use any library you want just return html string)
|
||||
import { highlight, languages } from "prismjs/components/prism-core";
|
||||
import "prismjs/components/prism-clike";
|
||||
import "prismjs/components/prism-javascript";
|
||||
import "prismjs/themes/prism-tomorrow.css"; // import syntax highlighting styles
|
||||
|
||||
export default {
|
||||
name: "ChiClone",
|
||||
components: {
|
||||
PrismEditor,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
mqtt_qiyong: true,
|
||||
mqtt_ip: "",
|
||||
mqtt_ip1: "",
|
||||
mqtt_ip2: "",
|
||||
mqtt_ip3: "",
|
||||
mqtt_ip4: "",
|
||||
mqtt_wgsn: "",
|
||||
mqtt_port: "",
|
||||
mqtt_keepalive: "",
|
||||
mqtt_tls: false,
|
||||
mqtt_clearsession: false,
|
||||
// mqtt_sssjfbzt:"",
|
||||
mqtt_qos: "0",
|
||||
// code: 'console.log("Hello World")',
|
||||
// lineNumbers: true, // true为编辑模式， false只展示不可编辑
|
||||
points: [
|
||||
{
|
||||
id: 1,
|
||||
label: "Device1",
|
||||
children: [
|
||||
{
|
||||
id: 3,
|
||||
label: "tag0001",
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
label: "tag0002",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
label: "Device1",
|
||||
children: [
|
||||
{
|
||||
id: 5,
|
||||
label: "tag0003",
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
label: "tag0004",
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
choose_point: false,
|
||||
options1: [
|
||||
{
|
||||
value: "0",
|
||||
label: "0",
|
||||
},
|
||||
{
|
||||
value: "1",
|
||||
label: "1",
|
||||
},
|
||||
{
|
||||
value: "2",
|
||||
label: "2",
|
||||
},
|
||||
],
|
||||
labelPosition: "left",
|
||||
formLabelWidth: "114px",
|
||||
input1: 192,
|
||||
add_passage: false,
|
||||
rightMenu: "",
|
||||
dialogVisible: true,
|
||||
menuShow: false,
|
||||
datas: [
|
||||
{
|
||||
label: "Gateway",
|
||||
children: [
|
||||
{
|
||||
label: "数据采集",
|
||||
children: [
|
||||
{
|
||||
label: "I/O点",
|
||||
},
|
||||
{
|
||||
label: "用户点",
|
||||
},
|
||||
{
|
||||
label: "计算点",
|
||||
},
|
||||
{
|
||||
label: "系统点",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "上云服务",
|
||||
children: [
|
||||
{
|
||||
label: "标准 MQTT",
|
||||
},
|
||||
{
|
||||
label: "AWS loT",
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
defaultProps: {
|
||||
children: "children",
|
||||
label: "label",
|
||||
},
|
||||
tableData: [
|
||||
{
|
||||
mqtt_cjd_sbmc: "Device1",
|
||||
mqtt_cjd_tagid: "Device1.tag0001",
|
||||
},
|
||||
],
|
||||
rules: {
|
||||
server_ip: [
|
||||
{ required: true, message: "请输入服务器IP", trigger: "blur" },
|
||||
],
|
||||
port_number: [
|
||||
{ required: true, message: "请输入端口", trigger: "blur" },
|
||||
],
|
||||
gateway_id: [
|
||||
{ required: true, message: "请输入网关ID", trigger: "blur" },
|
||||
],
|
||||
data_theme: [
|
||||
{ required: true, message: "请输入主题", trigger: "blur" },
|
||||
],
|
||||
upload_mode: [
|
||||
{ required: true, message: "请输入上传模式", trigger: "blur" },
|
||||
],
|
||||
upload_week: [
|
||||
{ required: true, message: "请输入上传周期", trigger: "blur" },
|
||||
],
|
||||
data_filter: [
|
||||
{ required: true, message: "请输入数据过滤", trigger: "blur" },
|
||||
],
|
||||
},
|
||||
};
|
||||
},
|
||||
mounted() {},
|
||||
methods: {
|
||||
treeNodeClick() {
|
||||
this.add_passage = true;
|
||||
},
|
||||
getDriveName() {
|
||||
this.diag_drive = true;
|
||||
},
|
||||
handleSelect(key) {
|
||||
console.log(key);
|
||||
if (key == 1 && this.isAdd == false) {
|
||||
this.choose_point = true;
|
||||
} else if (key == 1 && this.isAdd == true) {
|
||||
this.$message({
|
||||
message: '添加失败,只能添加一条数据',
|
||||
type: 'error'
|
||||
});
|
||||
return false
|
||||
}
|
||||
},
|
||||
highlighter(code) {
|
||||
return highlight(code, languages.js); //returns html
|
||||
},
|
||||
closeMenu(ev) {
|
||||
console.log({ ev });
|
||||
this.dialogVisible = false;
|
||||
},
|
||||
},
|
||||
directives: {
|
||||
"click-outside": {
|
||||
bind: function (el, binding, vnode) {
|
||||
console.log("el", el);
|
||||
console.log("binding", binding);
|
||||
el.event = function (event) {
|
||||
// 检查点击是否发生在节点之内（包括子节点）
|
||||
if (!(el == event.target || el.contains(event.target))) {
|
||||
// 如果没有，则触发调用
|
||||
// 若绑定值为函数，则执行
|
||||
// 这里我们可以通过钩子函数中的 vnode.context，来获取当前组件的作用域
|
||||
if (typeof vnode.context[binding.expression] == "function") {
|
||||
vnode.context[binding.expression](event);
|
||||
}
|
||||
}
|
||||
};
|
||||
// 绑定事件
|
||||
// 设置为true，代表在DOM树中，注册了该listener的元素，会先于它下方的任何事件目标，接收到该事件。
|
||||
document.body.addEventListener("click", el.event, true);
|
||||
},
|
||||
unbind: function (el) {
|
||||
// 解绑事件
|
||||
document.body.removeEventListener("click", el.event, true);
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.tree_menu {
|
||||
position: absolute;
|
||||
width: 286px;
|
||||
height: 753px;
|
||||
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);
|
||||
}
|
||||
|
||||
/deep/ .pas_params {
|
||||
.info_play {
|
||||
width: 56px;
|
||||
height: 20px;
|
||||
color: rgba(16, 16, 16, 1);
|
||||
font-size: 14px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.el-divider--horizontal {
|
||||
margin: 8px 0;
|
||||
}
|
||||
|
||||
.el-button {
|
||||
width: 80px;
|
||||
height: 30px;
|
||||
line-height: 0.5;
|
||||
}
|
||||
|
||||
.el-col-12:last-child {
|
||||
padding-right: 150px;
|
||||
}
|
||||
|
||||
.el-col-12:first-child {
|
||||
padding-right: 28px;
|
||||
}
|
||||
|
||||
.el-row {
|
||||
height: 40px;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
|
||||
.el-col-1 {
|
||||
text-align: center;
|
||||
line-height: 52px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.el-col-9 {
|
||||
padding-left: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.el-input__inner {
|
||||
height: 30px;
|
||||
text-align: left;
|
||||
padding: 0px 8px;
|
||||
}
|
||||
|
||||
.content {
|
||||
position: absolute;
|
||||
left: 362px;
|
||||
top: 104px;
|
||||
width: 1220px;
|
||||
height: 836px;
|
||||
line-height: 20px;
|
||||
padding-left: 36px;
|
||||
background-color: rgba(255, 255, 255, 1);
|
||||
color: rgba(16, 16, 16, 1);
|
||||
font-size: 14px;
|
||||
border: 1px solid rgba(187, 187, 187, 1);
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
|
||||
.el-form-item {
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
/deep/ .con_left {
|
||||
.el-con-5 {
|
||||
width: 43px;
|
||||
}
|
||||
}
|
||||
|
||||
.con_left {
|
||||
width: 709px;
|
||||
position: relative;
|
||||
|
||||
.my-editor {
|
||||
background: #2d2d2d;
|
||||
color: #ccc;
|
||||
|
||||
font-family: Fira code, Fira Mono, Consolas, Menlo, Courier, monospace;
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
/* optional */
|
||||
.prism-editor__textarea:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
/* not required: */
|
||||
.height-300 {
|
||||
width: 491px;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.infos {
|
||||
width: 60px;
|
||||
position: absolute;
|
||||
left: 208px;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.con_left_footer {
|
||||
position: absolute;
|
||||
left: 499px;
|
||||
top: 720px;
|
||||
}
|
||||
}
|
||||
|
||||
.con_right {
|
||||
width: 480px;
|
||||
|
||||
.dialog-footer {
|
||||
.el-button {
|
||||
width: 80px;
|
||||
height: 30px;
|
||||
line-height: 0.5;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
@ -0,0 +1,605 @@
|
|||
<!-- 斥候MQTT云 -->
|
||||
<template>
|
||||
<div class="Clone">
|
||||
<!-- 设置树形控件 -->
|
||||
<div v-click-outside="closeMenu">
|
||||
<!-- <el-button type="info" plain @click="dialogVisible = true">斥侯MQTT云</el-button> -->
|
||||
<div v-show="dialogVisible" class="tree_menu">
|
||||
<el-tree
|
||||
:data="datas"
|
||||
:props="defaultProps"
|
||||
@node-click="treeNodeClick"
|
||||
></el-tree>
|
||||
<!-- 树形控件右键组件 -->
|
||||
</div>
|
||||
</div>
|
||||
<div class="pas_params" v-show="add_passage">
|
||||
<div class="content">
|
||||
<div class="con_left">
|
||||
<el-form
|
||||
:label-position="labelPosition"
|
||||
:rules="rules"
|
||||
ref="ruleForm"
|
||||
>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-form-item>
|
||||
<el-checkbox v-model="mqtt_qiyong">启用</el-checkbox>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item
|
||||
label="服务器IP:"
|
||||
:label-width="formLabelWidth"
|
||||
prop="mqtt_ip"
|
||||
>
|
||||
<el-row>
|
||||
<el-col :span="5">
|
||||
<el-input
|
||||
v-model="mqtt_ip1"
|
||||
style="width: 43px; height: 30px"
|
||||
></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1">. </el-col>
|
||||
<el-col :span="5">
|
||||
<el-input
|
||||
v-model="mqtt_ip2"
|
||||
style="width: 43px; height: 30px"
|
||||
></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1">.</el-col>
|
||||
<el-col :span="5">
|
||||
<el-input
|
||||
v-model="mqtt_ip3"
|
||||
style="width: 43px; height: 30px"
|
||||
></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1">.</el-col>
|
||||
<el-col :span="5">
|
||||
<el-input
|
||||
v-model="mqtt_ip4"
|
||||
style="width: 43px; height: 30px"
|
||||
></el-input>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-form-item
|
||||
label="网关SN:"
|
||||
:label-width="formLabelWidth"
|
||||
prop="mqtt_wgsn"
|
||||
>
|
||||
<el-input
|
||||
v-model="mqtt_wgsn"
|
||||
placeholder=""
|
||||
style="width: 200px; height: 30px"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-form-item
|
||||
label="端口:"
|
||||
:label-width="formLabelWidth"
|
||||
prop="mqtt_port"
|
||||
>
|
||||
<el-input
|
||||
v-model="mqtt_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="Keep Alive(s):"
|
||||
:label-width="formLabelWidth"
|
||||
prop="mqtt_keepalive"
|
||||
>
|
||||
<el-input
|
||||
v-model="mqtt_keepalive"
|
||||
placeholder="64"
|
||||
style="width: 200px; height: 30px"
|
||||
></el-input>
|
||||
<div class="infos">2-60000</div>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item
|
||||
label="TLS加密:"
|
||||
:label-width="formLabelWidth"
|
||||
prop="mqtt_tls"
|
||||
>
|
||||
<el-switch v-model="mqtt_tls"></el-switch>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item
|
||||
label="清除Session:"
|
||||
:label-width="formLabelWidth"
|
||||
prop="mqtt_clearsession"
|
||||
>
|
||||
<el-switch v-model="mqtt_clearsession"></el-switch>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<h3 class="info_play">信息发布</h3>
|
||||
<el-divider></el-divider>
|
||||
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item
|
||||
label="Qos(MQTT):"
|
||||
:label-width="formLabelWidth"
|
||||
prop="upload_week"
|
||||
>
|
||||
<el-select
|
||||
v-model="mqtt_qos"
|
||||
placeholder="请选择"
|
||||
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-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<!-- <el-col :span="12">
|
||||
<el-form-item label="retained:" :label-width="formLabelWidth" prop="retained">
|
||||
<el-switch v-model="value1"></el-switch>
|
||||
</el-form-item>
|
||||
</el-col> -->
|
||||
</el-row>
|
||||
<!-- <el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="入口函数:" :label-width="formLabelWidth" prop="upload_week">
|
||||
<el-input v-model="input1" placeholder="64" style="width: 200px;height:30px"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row> -->
|
||||
<!-- <el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="函数代码:" :label-width="formLabelWidth" prop="upload_week">
|
||||
<prism-editor class="my-editor height-300" v-model="code" :highlight="highlighter"
|
||||
:line-numbers="lineNumbers"></prism-editor>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row> -->
|
||||
<div class="con_left_footer">
|
||||
<el-button type="primary" @click="add_passage = false"
|
||||
>保 存</el-button
|
||||
>
|
||||
<el-button @click="add_passage = false">取 消</el-button>
|
||||
</div>
|
||||
</el-form>
|
||||
</div>
|
||||
<div>
|
||||
<div class="con_right">
|
||||
<el-menu
|
||||
class="el-menu-demo"
|
||||
mode="horizontal"
|
||||
@select="handleSelect"
|
||||
>
|
||||
<el-menu-item index="1">添加</el-menu-item>
|
||||
<el-menu-item index="2">保存</el-menu-item>
|
||||
<el-menu-item index="3">删除</el-menu-item>
|
||||
</el-menu>
|
||||
</div>
|
||||
<el-table ref="singleTable" :data="tableData" style="width: 100%">
|
||||
<el-table-column type="index"> </el-table-column>
|
||||
<el-table-column property="mqtt_cjd_sbmc" label="设备名称">
|
||||
</el-table-column>
|
||||
<el-table-column property="mqtt_cjd_tagid" label="TagID">
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 添加按钮下显示出来的弹框信息 -->
|
||||
<div>
|
||||
<el-dialog title="选择点" :visible.sync="choose_point" width="30%">
|
||||
<el-tree
|
||||
:data="points"
|
||||
show-checkbox
|
||||
node-key="id"
|
||||
:default-expanded-keys="[1, 2]"
|
||||
:default-checked-keys="[3, 4, 5, 6]"
|
||||
:props="defaultProps"
|
||||
>
|
||||
</el-tree>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="choose_point = false"
|
||||
>保 存</el-button
|
||||
>
|
||||
<el-button @click="choose_point = false">取 消</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { PrismEditor } from "vue-prism-editor";
|
||||
import "vue-prism-editor/dist/prismeditor.min.css"; // import the styles somewhere
|
||||
// import highlighting library (you can use any library you want just return html string)
|
||||
import { highlight, languages } from "prismjs/components/prism-core";
|
||||
import "prismjs/components/prism-clike";
|
||||
import "prismjs/components/prism-javascript";
|
||||
import "prismjs/themes/prism-tomorrow.css"; // import syntax highlighting styles
|
||||
|
||||
export default {
|
||||
name: "ChiClone",
|
||||
components: {
|
||||
PrismEditor,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
mqtt_qiyong: true,
|
||||
mqtt_ip: "",
|
||||
mqtt_ip1: "",
|
||||
mqtt_ip2: "",
|
||||
mqtt_ip3: "",
|
||||
mqtt_ip4: "",
|
||||
mqtt_wgsn: "",
|
||||
mqtt_port: "",
|
||||
mqtt_keepalive: "",
|
||||
mqtt_tls: false,
|
||||
mqtt_clearsession: false,
|
||||
// mqtt_sssjfbzt:"",
|
||||
mqtt_qos: "0",
|
||||
// code: 'console.log("Hello World")',
|
||||
// lineNumbers: true, // true为编辑模式， false只展示不可编辑
|
||||
points: [
|
||||
{
|
||||
id: 1,
|
||||
label: "Device1",
|
||||
children: [
|
||||
{
|
||||
id: 3,
|
||||
label: "tag0001",
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
label: "tag0002",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
label: "Device1",
|
||||
children: [
|
||||
{
|
||||
id: 5,
|
||||
label: "tag0003",
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
label: "tag0004",
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
choose_point: false,
|
||||
options1: [
|
||||
{
|
||||
value: "0",
|
||||
label: "0",
|
||||
},
|
||||
{
|
||||
value: "1",
|
||||
label: "1",
|
||||
},
|
||||
{
|
||||
value: "2",
|
||||
label: "2",
|
||||
},
|
||||
],
|
||||
labelPosition: "left",
|
||||
formLabelWidth: "114px",
|
||||
input1: 192,
|
||||
add_passage: false,
|
||||
rightMenu: "",
|
||||
dialogVisible: true,
|
||||
menuShow: false,
|
||||
datas: [
|
||||
{
|
||||
label: "Gateway",
|
||||
children: [
|
||||
{
|
||||
label: "数据采集",
|
||||
children: [
|
||||
{
|
||||
label: "I/O点",
|
||||
},
|
||||
{
|
||||
label: "用户点",
|
||||
},
|
||||
{
|
||||
label: "计算点",
|
||||
},
|
||||
{
|
||||
label: "系统点",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "上云服务",
|
||||
children: [
|
||||
{
|
||||
label: "标准 MQTT",
|
||||
},
|
||||
{
|
||||
label: "AWS loT",
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
defaultProps: {
|
||||
children: "children",
|
||||
label: "label",
|
||||
},
|
||||
tableData: [
|
||||
{
|
||||
mqtt_cjd_sbmc: "Device1",
|
||||
mqtt_cjd_tagid: "Device1.tag0001",
|
||||
},
|
||||
],
|
||||
rules: {
|
||||
server_ip: [
|
||||
{ required: true, message: "请输入服务器IP", trigger: "blur" },
|
||||
],
|
||||
port_number: [
|
||||
{ required: true, message: "请输入端口", trigger: "blur" },
|
||||
],
|
||||
gateway_id: [
|
||||
{ required: true, message: "请输入网关ID", trigger: "blur" },
|
||||
],
|
||||
data_theme: [
|
||||
{ required: true, message: "请输入主题", trigger: "blur" },
|
||||
],
|
||||
upload_mode: [
|
||||
{ required: true, message: "请输入上传模式", trigger: "blur" },
|
||||
],
|
||||
upload_week: [
|
||||
{ required: true, message: "请输入上传周期", trigger: "blur" },
|
||||
],
|
||||
data_filter: [
|
||||
{ required: true, message: "请输入数据过滤", trigger: "blur" },
|
||||
],
|
||||
},
|
||||
};
|
||||
},
|
||||
mounted() {},
|
||||
methods: {
|
||||
treeNodeClick() {
|
||||
this.add_passage = true;
|
||||
},
|
||||
getDriveName() {
|
||||
this.diag_drive = true;
|
||||
},
|
||||
handleSelect(key) {
|
||||
console.log(key);
|
||||
if (key == 1 && this.isAdd == false) {
|
||||
this.choose_point = true;
|
||||
} else if (key == 1 && this.isAdd == true) {
|
||||
this.$message({
|
||||
message: '添加失败,只能添加一条数据',
|
||||
type: 'error'
|
||||
});
|
||||
return false
|
||||
}
|
||||
},
|
||||
highlighter(code) {
|
||||
return highlight(code, languages.js); //returns html
|
||||
},
|
||||
closeMenu(ev) {
|
||||
console.log({ ev });
|
||||
this.dialogVisible = false;
|
||||
},
|
||||
savePoint() {
|
||||
this.choose_point = false;
|
||||
this.isAdd = true;
|
||||
this.$message({
|
||||
message: '添加成功',
|
||||
type: 'success'
|
||||
});
|
||||
},
|
||||
},
|
||||
directives: {
|
||||
"click-outside": {
|
||||
bind: function (el, binding, vnode) {
|
||||
console.log("el", el);
|
||||
console.log("binding", binding);
|
||||
el.event = function (event) {
|
||||
// 检查点击是否发生在节点之内（包括子节点）
|
||||
if (!(el == event.target || el.contains(event.target))) {
|
||||
// 如果没有，则触发调用
|
||||
// 若绑定值为函数，则执行
|
||||
// 这里我们可以通过钩子函数中的 vnode.context，来获取当前组件的作用域
|
||||
if (typeof vnode.context[binding.expression] == "function") {
|
||||
vnode.context[binding.expression](event);
|
||||
}
|
||||
}
|
||||
};
|
||||
// 绑定事件
|
||||
// 设置为true，代表在DOM树中，注册了该listener的元素，会先于它下方的任何事件目标，接收到该事件。
|
||||
document.body.addEventListener("click", el.event, true);
|
||||
},
|
||||
unbind: function (el) {
|
||||
// 解绑事件
|
||||
document.body.removeEventListener("click", el.event, true);
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.tree_menu {
|
||||
position: absolute;
|
||||
width: 286px;
|
||||
height: 753px;
|
||||
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);
|
||||
}
|
||||
|
||||
/deep/ .pas_params {
|
||||
.info_play {
|
||||
width: 56px;
|
||||
height: 20px;
|
||||
color: rgba(16, 16, 16, 1);
|
||||
font-size: 14px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.el-divider--horizontal {
|
||||
margin: 8px 0;
|
||||
}
|
||||
|
||||
.el-button {
|
||||
width: 80px;
|
||||
height: 30px;
|
||||
line-height: 0.5;
|
||||
}
|
||||
|
||||
.el-col-12:last-child {
|
||||
padding-right: 150px;
|
||||
}
|
||||
|
||||
.el-col-12:first-child {
|
||||
padding-right: 28px;
|
||||
}
|
||||
|
||||
.el-row {
|
||||
height: 40px;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
|
||||
.el-col-1 {
|
||||
text-align: center;
|
||||
line-height: 52px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.el-col-9 {
|
||||
padding-left: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.el-input__inner {
|
||||
height: 30px;
|
||||
text-align: left;
|
||||
padding: 0px 8px;
|
||||
}
|
||||
|
||||
.content {
|
||||
position: absolute;
|
||||
left: 362px;
|
||||
top: 104px;
|
||||
width: 1220px;
|
||||
height: 836px;
|
||||
line-height: 20px;
|
||||
padding-left: 36px;
|
||||
background-color: rgba(255, 255, 255, 1);
|
||||
color: rgba(16, 16, 16, 1);
|
||||
font-size: 14px;
|
||||
border: 1px solid rgba(187, 187, 187, 1);
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
|
||||
.el-form-item {
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
/deep/ .con_left {
|
||||
.el-con-5 {
|
||||
width: 43px;
|
||||
}
|
||||
}
|
||||
|
||||
.con_left {
|
||||
width: 709px;
|
||||
position: relative;
|
||||
|
||||
.my-editor {
|
||||
background: #2d2d2d;
|
||||
color: #ccc;
|
||||
|
||||
font-family: Fira code, Fira Mono, Consolas, Menlo, Courier, monospace;
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
/* optional */
|
||||
.prism-editor__textarea:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
/* not required: */
|
||||
.height-300 {
|
||||
width: 491px;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.infos {
|
||||
width: 60px;
|
||||
position: absolute;
|
||||
left: 208px;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.con_left_footer {
|
||||
position: absolute;
|
||||
left: 499px;
|
||||
top: 720px;
|
||||
}
|
||||
}
|
||||
|
||||
.con_right {
|
||||
width: 480px;
|
||||
|
||||
.dialog-footer {
|
||||
.el-button {
|
||||
width: 80px;
|
||||
height: 30px;
|
||||
line-height: 0.5;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
@ -0,0 +1,605 @@
|
|||
<!-- 斥候MQTT云 -->
|
||||
<template>
|
||||
<div class="Clone">
|
||||
<!-- 设置树形控件 -->
|
||||
<div v-click-outside="closeMenu">
|
||||
<!-- <el-button type="info" plain @click="dialogVisible = true">斥侯MQTT云</el-button> -->
|
||||
<div v-show="dialogVisible" class="tree_menu">
|
||||
<el-tree
|
||||
:data="datas"
|
||||
:props="defaultProps"
|
||||
@node-click="treeNodeClick"
|
||||
></el-tree>
|
||||
<!-- 树形控件右键组件 -->
|
||||
</div>
|
||||
</div>
|
||||
<div class="pas_params" v-show="add_passage">
|
||||
<div class="content">
|
||||
<div class="con_left">
|
||||
<el-form
|
||||
:label-position="labelPosition"
|
||||
:rules="rules"
|
||||
ref="ruleForm"
|
||||
>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-form-item>
|
||||
<el-checkbox v-model="mqtt_qiyong">启用</el-checkbox>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item
|
||||
label="服务器IP:"
|
||||
:label-width="formLabelWidth"
|
||||
prop="mqtt_ip"
|
||||
>
|
||||
<el-row>
|
||||
<el-col :span="5">
|
||||
<el-input
|
||||
v-model="mqtt_ip1"
|
||||
style="width: 43px; height: 30px"
|
||||
></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1">. </el-col>
|
||||
<el-col :span="5">
|
||||
<el-input
|
||||
v-model="mqtt_ip2"
|
||||
style="width: 43px; height: 30px"
|
||||
></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1">.</el-col>
|
||||
<el-col :span="5">
|
||||
<el-input
|
||||
v-model="mqtt_ip3"
|
||||
style="width: 43px; height: 30px"
|
||||
></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1">.</el-col>
|
||||
<el-col :span="5">
|
||||
<el-input
|
||||
v-model="mqtt_ip4"
|
||||
style="width: 43px; height: 30px"
|
||||
></el-input>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-form-item
|
||||
label="网关SN:"
|
||||
:label-width="formLabelWidth"
|
||||
prop="mqtt_wgsn"
|
||||
>
|
||||
<el-input
|
||||
v-model="mqtt_wgsn"
|
||||
placeholder=""
|
||||
style="width: 200px; height: 30px"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-form-item
|
||||
label="端口:"
|
||||
:label-width="formLabelWidth"
|
||||
prop="mqtt_port"
|
||||
>
|
||||
<el-input
|
||||
v-model="mqtt_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="Keep Alive(s):"
|
||||
:label-width="formLabelWidth"
|
||||
prop="mqtt_keepalive"
|
||||
>
|
||||
<el-input
|
||||
v-model="mqtt_keepalive"
|
||||
placeholder="64"
|
||||
style="width: 200px; height: 30px"
|
||||
></el-input>
|
||||
<div class="infos">2-60000</div>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item
|
||||
label="TLS加密:"
|
||||
:label-width="formLabelWidth"
|
||||
prop="mqtt_tls"
|
||||
>
|
||||
<el-switch v-model="mqtt_tls"></el-switch>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item
|
||||
label="清除Session:"
|
||||
:label-width="formLabelWidth"
|
||||
prop="mqtt_clearsession"
|
||||
>
|
||||
<el-switch v-model="mqtt_clearsession"></el-switch>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<h3 class="info_play">信息发布</h3>
|
||||
<el-divider></el-divider>
|
||||
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item
|
||||
label="Qos(MQTT):"
|
||||
:label-width="formLabelWidth"
|
||||
prop="upload_week"
|
||||
>
|
||||
<el-select
|
||||
v-model="mqtt_qos"
|
||||
placeholder="请选择"
|
||||
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-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<!-- <el-col :span="12">
|
||||
<el-form-item label="retained:" :label-width="formLabelWidth" prop="retained">
|
||||
<el-switch v-model="value1"></el-switch>
|
||||
</el-form-item>
|
||||
</el-col> -->
|
||||
</el-row>
|
||||
<!-- <el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="入口函数:" :label-width="formLabelWidth" prop="upload_week">
|
||||
<el-input v-model="input1" placeholder="64" style="width: 200px;height:30px"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row> -->
|
||||
<!-- <el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="函数代码:" :label-width="formLabelWidth" prop="upload_week">
|
||||
<prism-editor class="my-editor height-300" v-model="code" :highlight="highlighter"
|
||||
:line-numbers="lineNumbers"></prism-editor>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row> -->
|
||||
<div class="con_left_footer">
|
||||
<el-button type="primary" @click="add_passage = false"
|
||||
>保 存</el-button
|
||||
>
|
||||
<el-button @click="add_passage = false">取 消</el-button>
|
||||
</div>
|
||||
</el-form>
|
||||
</div>
|
||||
<div>
|
||||
<div class="con_right">
|
||||
<el-menu
|
||||
class="el-menu-demo"
|
||||
mode="horizontal"
|
||||
@select="handleSelect"
|
||||
>
|
||||
<el-menu-item index="1">添加</el-menu-item>
|
||||
<el-menu-item index="2">保存</el-menu-item>
|
||||
<el-menu-item index="3">删除</el-menu-item>
|
||||
</el-menu>
|
||||
</div>
|
||||
<el-table ref="singleTable" :data="tableData" style="width: 100%">
|
||||
<el-table-column type="index"> </el-table-column>
|
||||
<el-table-column property="mqtt_cjd_sbmc" label="设备名称">
|
||||
</el-table-column>
|
||||
<el-table-column property="mqtt_cjd_tagid" label="TagID">
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 添加按钮下显示出来的弹框信息 -->
|
||||
<div>
|
||||
<el-dialog title="选择点" :visible.sync="choose_point" width="30%">
|
||||
<el-tree
|
||||
:data="points"
|
||||
show-checkbox
|
||||
node-key="id"
|
||||
:default-expanded-keys="[1, 2]"
|
||||
:default-checked-keys="[3, 4, 5, 6]"
|
||||
:props="defaultProps"
|
||||
>
|
||||
</el-tree>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="savePoint"
|
||||
>保 存</el-button
|
||||
>
|
||||
<el-button @click="choose_point = false">取 消</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { PrismEditor } from "vue-prism-editor";
|
||||
import "vue-prism-editor/dist/prismeditor.min.css"; // import the styles somewhere
|
||||
// import highlighting library (you can use any library you want just return html string)
|
||||
import { highlight, languages } from "prismjs/components/prism-core";
|
||||
import "prismjs/components/prism-clike";
|
||||
import "prismjs/components/prism-javascript";
|
||||
import "prismjs/themes/prism-tomorrow.css"; // import syntax highlighting styles
|
||||
|
||||
export default {
|
||||
name: "ChiClone",
|
||||
components: {
|
||||
PrismEditor,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
mqtt_qiyong: true,
|
||||
mqtt_ip: "",
|
||||
mqtt_ip1: "",
|
||||
mqtt_ip2: "",
|
||||
mqtt_ip3: "",
|
||||
mqtt_ip4: "",
|
||||
mqtt_wgsn: "",
|
||||
mqtt_port: "",
|
||||
mqtt_keepalive: "",
|
||||
mqtt_tls: false,
|
||||
mqtt_clearsession: false,
|
||||
// mqtt_sssjfbzt:"",
|
||||
mqtt_qos: "0",
|
||||
// code: 'console.log("Hello World")',
|
||||
// lineNumbers: true, // true为编辑模式， false只展示不可编辑
|
||||
points: [
|
||||
{
|
||||
id: 1,
|
||||
label: "Device1",
|
||||
children: [
|
||||
{
|
||||
id: 3,
|
||||
label: "tag0001",
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
label: "tag0002",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
label: "Device1",
|
||||
children: [
|
||||
{
|
||||
id: 5,
|
||||
label: "tag0003",
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
label: "tag0004",
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
choose_point: false,
|
||||
options1: [
|
||||
{
|
||||
value: "0",
|
||||
label: "0",
|
||||
},
|
||||
{
|
||||
value: "1",
|
||||
label: "1",
|
||||
},
|
||||
{
|
||||
value: "2",
|
||||
label: "2",
|
||||
},
|
||||
],
|
||||
labelPosition: "left",
|
||||
formLabelWidth: "114px",
|
||||
input1: 192,
|
||||
add_passage: false,
|
||||
rightMenu: "",
|
||||
dialogVisible: true,
|
||||
menuShow: false,
|
||||
datas: [
|
||||
{
|
||||
label: "Gateway",
|
||||
children: [
|
||||
{
|
||||
label: "数据采集",
|
||||
children: [
|
||||
{
|
||||
label: "I/O点",
|
||||
},
|
||||
{
|
||||
label: "用户点",
|
||||
},
|
||||
{
|
||||
label: "计算点",
|
||||
},
|
||||
{
|
||||
label: "系统点",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "上云服务",
|
||||
children: [
|
||||
{
|
||||
label: "标准 MQTT",
|
||||
},
|
||||
{
|
||||
label: "AWS loT",
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
defaultProps: {
|
||||
children: "children",
|
||||
label: "label",
|
||||
},
|
||||
tableData: [
|
||||
{
|
||||
mqtt_cjd_sbmc: "Device1",
|
||||
mqtt_cjd_tagid: "Device1.tag0001",
|
||||
},
|
||||
],
|
||||
rules: {
|
||||
server_ip: [
|
||||
{ required: true, message: "请输入服务器IP", trigger: "blur" },
|
||||
],
|
||||
port_number: [
|
||||
{ required: true, message: "请输入端口", trigger: "blur" },
|
||||
],
|
||||
gateway_id: [
|
||||
{ required: true, message: "请输入网关ID", trigger: "blur" },
|
||||
],
|
||||
data_theme: [
|
||||
{ required: true, message: "请输入主题", trigger: "blur" },
|
||||
],
|
||||
upload_mode: [
|
||||
{ required: true, message: "请输入上传模式", trigger: "blur" },
|
||||
],
|
||||
upload_week: [
|
||||
{ required: true, message: "请输入上传周期", trigger: "blur" },
|
||||
],
|
||||
data_filter: [
|
||||
{ required: true, message: "请输入数据过滤", trigger: "blur" },
|
||||
],
|
||||
},
|
||||
};
|
||||
},
|
||||
mounted() {},
|
||||
methods: {
|
||||
treeNodeClick() {
|
||||
this.add_passage = true;
|
||||
},
|
||||
getDriveName() {
|
||||
this.diag_drive = true;
|
||||
},
|
||||
handleSelect(key) {
|
||||
console.log(key);
|
||||
if (key == 1 && this.isAdd == false) {
|
||||
this.choose_point = true;
|
||||
} else if (key == 1 && this.isAdd == true) {
|
||||
this.$message({
|
||||
message: '添加失败,只能添加一条数据',
|
||||
type: 'error'
|
||||
});
|
||||
return false
|
||||
}
|
||||
},
|
||||
highlighter(code) {
|
||||
return highlight(code, languages.js); //returns html
|
||||
},
|
||||
closeMenu(ev) {
|
||||
console.log({ ev });
|
||||
this.dialogVisible = false;
|
||||
},
|
||||
savePoint() {
|
||||
this.choose_point = false;
|
||||
this.isAdd = true;
|
||||
this.$message({
|
||||
message: '添加成功',
|
||||
type: 'success'
|
||||
});
|
||||
},
|
||||
},
|
||||
directives: {
|
||||
"click-outside": {
|
||||
bind: function (el, binding, vnode) {
|
||||
console.log("el", el);
|
||||
console.log("binding", binding);
|
||||
el.event = function (event) {
|
||||
// 检查点击是否发生在节点之内（包括子节点）
|
||||
if (!(el == event.target || el.contains(event.target))) {
|
||||
// 如果没有，则触发调用
|
||||
// 若绑定值为函数，则执行
|
||||
// 这里我们可以通过钩子函数中的 vnode.context，来获取当前组件的作用域
|
||||
if (typeof vnode.context[binding.expression] == "function") {
|
||||
vnode.context[binding.expression](event);
|
||||
}
|
||||
}
|
||||
};
|
||||
// 绑定事件
|
||||
// 设置为true，代表在DOM树中，注册了该listener的元素，会先于它下方的任何事件目标，接收到该事件。
|
||||
document.body.addEventListener("click", el.event, true);
|
||||
},
|
||||
unbind: function (el) {
|
||||
// 解绑事件
|
||||
document.body.removeEventListener("click", el.event, true);
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.tree_menu {
|
||||
position: absolute;
|
||||
width: 286px;
|
||||
height: 753px;
|
||||
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);
|
||||
}
|
||||
|
||||
/deep/ .pas_params {
|
||||
.info_play {
|
||||
width: 56px;
|
||||
height: 20px;
|
||||
color: rgba(16, 16, 16, 1);
|
||||
font-size: 14px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.el-divider--horizontal {
|
||||
margin: 8px 0;
|
||||
}
|
||||
|
||||
.el-button {
|
||||
width: 80px;
|
||||
height: 30px;
|
||||
line-height: 0.5;
|
||||
}
|
||||
|
||||
.el-col-12:last-child {
|
||||
padding-right: 150px;
|
||||
}
|
||||
|
||||
.el-col-12:first-child {
|
||||
padding-right: 28px;
|
||||
}
|
||||
|
||||
.el-row {
|
||||
height: 40px;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
|
||||
.el-col-1 {
|
||||
text-align: center;
|
||||
line-height: 52px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.el-col-9 {
|
||||
padding-left: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.el-input__inner {
|
||||
height: 30px;
|
||||
text-align: left;
|
||||
padding: 0px 8px;
|
||||
}
|
||||
|
||||
.content {
|
||||
position: absolute;
|
||||
left: 362px;
|
||||
top: 104px;
|
||||
width: 1220px;
|
||||
height: 836px;
|
||||
line-height: 20px;
|
||||
padding-left: 36px;
|
||||
background-color: rgba(255, 255, 255, 1);
|
||||
color: rgba(16, 16, 16, 1);
|
||||
font-size: 14px;
|
||||
border: 1px solid rgba(187, 187, 187, 1);
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
|
||||
.el-form-item {
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
/deep/ .con_left {
|
||||
.el-con-5 {
|
||||
width: 43px;
|
||||
}
|
||||
}
|
||||
|
||||
.con_left {
|
||||
width: 709px;
|
||||
position: relative;
|
||||
|
||||
.my-editor {
|
||||
background: #2d2d2d;
|
||||
color: #ccc;
|
||||
|
||||
font-family: Fira code, Fira Mono, Consolas, Menlo, Courier, monospace;
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
/* optional */
|
||||
.prism-editor__textarea:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
/* not required: */
|
||||
.height-300 {
|
||||
width: 491px;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.infos {
|
||||
width: 60px;
|
||||
position: absolute;
|
||||
left: 208px;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.con_left_footer {
|
||||
position: absolute;
|
||||
left: 499px;
|
||||
top: 720px;
|
||||
}
|
||||
}
|
||||
|
||||
.con_right {
|
||||
width: 480px;
|
||||
|
||||
.dialog-footer {
|
||||
.el-button {
|
||||
width: 80px;
|
||||
height: 30px;
|
||||
line-height: 0.5;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
@ -0,0 +1,605 @@
|
|||
<!-- 斥候MQTT云 -->
|
||||
<template>
|
||||
<div class="Clone">
|
||||
<!-- 设置树形控件 -->
|
||||
<div v-click-outside="closeMenu">
|
||||
<!-- <el-button type="info" plain @click="dialogVisible = true">斥侯MQTT云</el-button> -->
|
||||
<div v-show="dialogVisible" class="tree_menu">
|
||||
<el-tree
|
||||
:data="datas"
|
||||
:props="defaultProps"
|
||||
@node-click="treeNodeClick"
|
||||
></el-tree>
|
||||
<!-- 树形控件右键组件 -->
|
||||
</div>
|
||||
</div>
|
||||
<div class="pas_params" v-show="add_passage">
|
||||
<div class="content">
|
||||
<div class="con_left">
|
||||
<el-form
|
||||
:label-position="labelPosition"
|
||||
:rules="rules"
|
||||
ref="ruleForm"
|
||||
>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-form-item>
|
||||
<el-checkbox v-model="mqtt_qiyong">启用</el-checkbox>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item
|
||||
label="服务器IP:"
|
||||
:label-width="formLabelWidth"
|
||||
prop="mqtt_ip"
|
||||
>
|
||||
<el-row>
|
||||
<el-col :span="5">
|
||||
<el-input
|
||||
v-model="mqtt_ip1"
|
||||
style="width: 43px; height: 30px"
|
||||
></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1">. </el-col>
|
||||
<el-col :span="5">
|
||||
<el-input
|
||||
v-model="mqtt_ip2"
|
||||
style="width: 43px; height: 30px"
|
||||
></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1">.</el-col>
|
||||
<el-col :span="5">
|
||||
<el-input
|
||||
v-model="mqtt_ip3"
|
||||
style="width: 43px; height: 30px"
|
||||
></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1">.</el-col>
|
||||
<el-col :span="5">
|
||||
<el-input
|
||||
v-model="mqtt_ip4"
|
||||
style="width: 43px; height: 30px"
|
||||
></el-input>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-form-item
|
||||
label="网关SN:"
|
||||
:label-width="formLabelWidth"
|
||||
prop="mqtt_wgsn"
|
||||
>
|
||||
<el-input
|
||||
v-model="mqtt_wgsn"
|
||||
placeholder=""
|
||||
style="width: 200px; height: 30px"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-form-item
|
||||
label="端口:"
|
||||
:label-width="formLabelWidth"
|
||||
prop="mqtt_port"
|
||||
>
|
||||
<el-input
|
||||
v-model="mqtt_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="Keep Alive(s):"
|
||||
:label-width="formLabelWidth"
|
||||
prop="mqtt_keepalive"
|
||||
>
|
||||
<el-input
|
||||
v-model="mqtt_keepalive"
|
||||
placeholder="64"
|
||||
style="width: 200px; height: 30px"
|
||||
></el-input>
|
||||
<div class="infos">2-60000</div>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item
|
||||
label="TLS加密:"
|
||||
:label-width="formLabelWidth"
|
||||
prop="mqtt_tls"
|
||||
>
|
||||
<el-switch v-model="mqtt_tls"></el-switch>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item
|
||||
label="清除Session:"
|
||||
:label-width="formLabelWidth"
|
||||
prop="mqtt_clearsession"
|
||||
>
|
||||
<el-switch v-model="mqtt_clearsession"></el-switch>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<h3 class="info_play">信息发布</h3>
|
||||
<el-divider></el-divider>
|
||||
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item
|
||||
label="Qos(MQTT):"
|
||||
:label-width="formLabelWidth"
|
||||
prop="upload_week"
|
||||
>
|
||||
<el-select
|
||||
v-model="mqtt_qos"
|
||||
placeholder="请选择"
|
||||
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-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<!-- <el-col :span="12">
|
||||
<el-form-item label="retained:" :label-width="formLabelWidth" prop="retained">
|
||||
<el-switch v-model="value1"></el-switch>
|
||||
</el-form-item>
|
||||
</el-col> -->
|
||||
</el-row>
|
||||
<!-- <el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="入口函数:" :label-width="formLabelWidth" prop="upload_week">
|
||||
<el-input v-model="input1" placeholder="64" style="width: 200px;height:30px"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row> -->
|
||||
<!-- <el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="函数代码:" :label-width="formLabelWidth" prop="upload_week">
|
||||
<prism-editor class="my-editor height-300" v-model="code" :highlight="highlighter"
|
||||
:line-numbers="lineNumbers"></prism-editor>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row> -->
|
||||
<div class="con_left_footer">
|
||||
<el-button type="primary" @click="add_passage = false"
|
||||
>保 存</el-button
|
||||
>
|
||||
<el-button @click="add_passage = false">取 消</el-button>
|
||||
</div>
|
||||
</el-form>
|
||||
</div>
|
||||
<div>
|
||||
<div class="con_right">
|
||||
<el-menu
|
||||
class="el-menu-demo"
|
||||
mode="horizontal"
|
||||
@select="handleSelect"
|
||||
>
|
||||
<el-menu-item index="1">添加</el-menu-item>
|
||||
<el-menu-item index="2">保存</el-menu-item>
|
||||
<el-menu-item index="3">删除</el-menu-item>
|
||||
</el-menu>
|
||||
</div>
|
||||
<el-table ref="singleTable" :data="tableData" style="width: 100%">
|
||||
<el-table-column type="index"> </el-table-column>
|
||||
<el-table-column property="mqtt_cjd_sbmc" label="设备名称">
|
||||
</el-table-column>
|
||||
<el-table-column property="mqtt_cjd_tagid" label="TagID">
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 添加按钮下显示出来的弹框信息 -->
|
||||
<div>
|
||||
<el-dialog title="选择点" :visible.sync="choose_point" width="30%">
|
||||
<el-tree
|
||||
:data="points"
|
||||
show-checkbox
|
||||
node-key="id"
|
||||
:default-expanded-keys="[1, 2]"
|
||||
:default-checked-keys="[3, 4, 5, 6]"
|
||||
:props="defaultProps"
|
||||
>
|
||||
</el-tree>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="savePoint"
|
||||
>保 存</el-button
|
||||
>
|
||||
<el-button @click="choose_point = false">取 消</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { PrismEditor } from "vue-prism-editor";
|
||||
import "vue-prism-editor/dist/prismeditor.min.css"; // import the styles somewhere
|
||||
// import highlighting library (you can use any library you want just return html string)
|
||||
import { highlight, languages } from "prismjs/components/prism-core";
|
||||
import "prismjs/components/prism-clike";
|
||||
import "prismjs/components/prism-javascript";
|
||||
import "prismjs/themes/prism-tomorrow.css"; // import syntax highlighting styles
|
||||
|
||||
export default {
|
||||
name: "ChiClone",
|
||||
components: {
|
||||
PrismEditor,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
mqtt_qiyong: true,
|
||||
mqtt_ip: "",
|
||||
mqtt_ip1: "",
|
||||
mqtt_ip2: "",
|
||||
mqtt_ip3: "",
|
||||
mqtt_ip4: "",
|
||||
mqtt_wgsn: "",
|
||||
mqtt_port: "",
|
||||
mqtt_keepalive: "",
|
||||
mqtt_tls: false,
|
||||
mqtt_clearsession: false,
|
||||
// mqtt_sssjfbzt:"",
|
||||
mqtt_qos: "0",
|
||||
// code: 'console.log("Hello World")',
|
||||
// lineNumbers: true, // true为编辑模式， false只展示不可编辑
|
||||
points: [
|
||||
{
|
||||
id: 1,
|
||||
label: "Device1",
|
||||
children: [
|
||||
{
|
||||
id: 3,
|
||||
label: "tag0001",
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
label: "tag0002",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
label: "Device1",
|
||||
children: [
|
||||
{
|
||||
id: 5,
|
||||
label: "tag0003",
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
label: "tag0004",
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
choose_point: false,
|
||||
options1: [
|
||||
{
|
||||
value: "0",
|
||||
label: "0",
|
||||
},
|
||||
{
|
||||
value: "1",
|
||||
label: "1",
|
||||
},
|
||||
{
|
||||
value: "2",
|
||||
label: "2",
|
||||
},
|
||||
],
|
||||
labelPosition: "left",
|
||||
formLabelWidth: "114px",
|
||||
input1: 192,
|
||||
add_passage: false,
|
||||
rightMenu: "",
|
||||
dialogVisible: true,
|
||||
isAdd: false,
|
||||
datas: [
|
||||
{
|
||||
label: "Gateway",
|
||||
children: [
|
||||
{
|
||||
label: "数据采集",
|
||||
children: [
|
||||
{
|
||||
label: "I/O点",
|
||||
},
|
||||
{
|
||||
label: "用户点",
|
||||
},
|
||||
{
|
||||
label: "计算点",
|
||||
},
|
||||
{
|
||||
label: "系统点",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "上云服务",
|
||||
children: [
|
||||
{
|
||||
label: "标准 MQTT",
|
||||
},
|
||||
{
|
||||
label: "AWS loT",
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
defaultProps: {
|
||||
children: "children",
|
||||
label: "label",
|
||||
},
|
||||
tableData: [
|
||||
{
|
||||
mqtt_cjd_sbmc: "Device1",
|
||||
mqtt_cjd_tagid: "Device1.tag0001",
|
||||
},
|
||||
],
|
||||
rules: {
|
||||
server_ip: [
|
||||
{ required: true, message: "请输入服务器IP", trigger: "blur" },
|
||||
],
|
||||
port_number: [
|
||||
{ required: true, message: "请输入端口", trigger: "blur" },
|
||||
],
|
||||
gateway_id: [
|
||||
{ required: true, message: "请输入网关ID", trigger: "blur" },
|
||||
],
|
||||
data_theme: [
|
||||
{ required: true, message: "请输入主题", trigger: "blur" },
|
||||
],
|
||||
upload_mode: [
|
||||
{ required: true, message: "请输入上传模式", trigger: "blur" },
|
||||
],
|
||||
upload_week: [
|
||||
{ required: true, message: "请输入上传周期", trigger: "blur" },
|
||||
],
|
||||
data_filter: [
|
||||
{ required: true, message: "请输入数据过滤", trigger: "blur" },
|
||||
],
|
||||
},
|
||||
};
|
||||
},
|
||||
mounted() {},
|
||||
methods: {
|
||||
treeNodeClick() {
|
||||
this.add_passage = true;
|
||||
},
|
||||
getDriveName() {
|
||||
this.diag_drive = true;
|
||||
},
|
||||
handleSelect(key) {
|
||||
console.log(key);
|
||||
if (key == 1 && this.isAdd == false) {
|
||||
this.choose_point = true;
|
||||
} else if (key == 1 && this.isAdd == true) {
|
||||
this.$message({
|
||||
message: '添加失败,只能添加一条数据',
|
||||
type: 'error'
|
||||
});
|
||||
return false
|
||||
}
|
||||
},
|
||||
highlighter(code) {
|
||||
return highlight(code, languages.js); //returns html
|
||||
},
|
||||
closeMenu(ev) {
|
||||
console.log({ ev });
|
||||
this.dialogVisible = false;
|
||||
},
|
||||
savePoint() {
|
||||
this.choose_point = false;
|
||||
this.isAdd = true;
|
||||
this.$message({
|
||||
message: '添加成功',
|
||||
type: 'success'
|
||||
});
|
||||
},
|
||||
},
|
||||
directives: {
|
||||
"click-outside": {
|
||||
bind: function (el, binding, vnode) {
|
||||
console.log("el", el);
|
||||
console.log("binding", binding);
|
||||
el.event = function (event) {
|
||||
// 检查点击是否发生在节点之内（包括子节点）
|
||||
if (!(el == event.target || el.contains(event.target))) {
|
||||
// 如果没有，则触发调用
|
||||
// 若绑定值为函数，则执行
|
||||
// 这里我们可以通过钩子函数中的 vnode.context，来获取当前组件的作用域
|
||||
if (typeof vnode.context[binding.expression] == "function") {
|
||||
vnode.context[binding.expression](event);
|
||||
}
|
||||
}
|
||||
};
|
||||
// 绑定事件
|
||||
// 设置为true，代表在DOM树中，注册了该listener的元素，会先于它下方的任何事件目标，接收到该事件。
|
||||
document.body.addEventListener("click", el.event, true);
|
||||
},
|
||||
unbind: function (el) {
|
||||
// 解绑事件
|
||||
document.body.removeEventListener("click", el.event, true);
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.tree_menu {
|
||||
position: absolute;
|
||||
width: 286px;
|
||||
height: 753px;
|
||||
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);
|
||||
}
|
||||
|
||||
/deep/ .pas_params {
|
||||
.info_play {
|
||||
width: 56px;
|
||||
height: 20px;
|
||||
color: rgba(16, 16, 16, 1);
|
||||
font-size: 14px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.el-divider--horizontal {
|
||||
margin: 8px 0;
|
||||
}
|
||||
|
||||
.el-button {
|
||||
width: 80px;
|
||||
height: 30px;
|
||||
line-height: 0.5;
|
||||
}
|
||||
|
||||
.el-col-12:last-child {
|
||||
padding-right: 150px;
|
||||
}
|
||||
|
||||
.el-col-12:first-child {
|
||||
padding-right: 28px;
|
||||
}
|
||||
|
||||
.el-row {
|
||||
height: 40px;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
|
||||
.el-col-1 {
|
||||
text-align: center;
|
||||
line-height: 52px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.el-col-9 {
|
||||
padding-left: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.el-input__inner {
|
||||
height: 30px;
|
||||
text-align: left;
|
||||
padding: 0px 8px;
|
||||
}
|
||||
|
||||
.content {
|
||||
position: absolute;
|
||||
left: 362px;
|
||||
top: 104px;
|
||||
width: 1220px;
|
||||
height: 836px;
|
||||
line-height: 20px;
|
||||
padding-left: 36px;
|
||||
background-color: rgba(255, 255, 255, 1);
|
||||
color: rgba(16, 16, 16, 1);
|
||||
font-size: 14px;
|
||||
border: 1px solid rgba(187, 187, 187, 1);
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
|
||||
.el-form-item {
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
/deep/ .con_left {
|
||||
.el-con-5 {
|
||||
width: 43px;
|
||||
}
|
||||
}
|
||||
|
||||
.con_left {
|
||||
width: 709px;
|
||||
position: relative;
|
||||
|
||||
.my-editor {
|
||||
background: #2d2d2d;
|
||||
color: #ccc;
|
||||
|
||||
font-family: Fira code, Fira Mono, Consolas, Menlo, Courier, monospace;
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
/* optional */
|
||||
.prism-editor__textarea:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
/* not required: */
|
||||
.height-300 {
|
||||
width: 491px;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.infos {
|
||||
width: 60px;
|
||||
position: absolute;
|
||||
left: 208px;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.con_left_footer {
|
||||
position: absolute;
|
||||
left: 499px;
|
||||
top: 720px;
|
||||
}
|
||||
}
|
||||
|
||||
.con_right {
|
||||
width: 480px;
|
||||
|
||||
.dialog-footer {
|
||||
.el-button {
|
||||
width: 80px;
|
||||
height: 30px;
|
||||
line-height: 0.5;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
@ -0,0 +1,605 @@
|
|||
<!-- 斥候MQTT云 -->
|
||||
<template>
|
||||
<div class="Clone">
|
||||
<!-- 设置树形控件 -->
|
||||
<div v-click-outside="closeMenu">
|
||||
<!-- <el-button type="info" plain @click="dialogVisible = true">斥侯MQTT云</el-button> -->
|
||||
<div v-show="dialogVisible" class="tree_menu">
|
||||
<el-tree
|
||||
:data="datas"
|
||||
:props="defaultProps"
|
||||
@node-click="treeNodeClick"
|
||||
></el-tree>
|
||||
<!-- 树形控件右键组件 -->
|
||||
</div>
|
||||
</div>
|
||||
<div class="pas_params" v-show="add_passage">
|
||||
<div class="content">
|
||||
<div class="con_left">
|
||||
<el-form
|
||||
:label-position="labelPosition"
|
||||
:rules="rules"
|
||||
ref="ruleForm"
|
||||
>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-form-item>
|
||||
<el-checkbox v-model="mqtt_qiyong">启用</el-checkbox>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item
|
||||
label="服务器IP:"
|
||||
:label-width="formLabelWidth"
|
||||
prop="mqtt_ip"
|
||||
>
|
||||
<el-row>
|
||||
<el-col :span="5">
|
||||
<el-input
|
||||
v-model="mqtt_ip1"
|
||||
style="width: 43px; height: 30px"
|
||||
></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1">. </el-col>
|
||||
<el-col :span="5">
|
||||
<el-input
|
||||
v-model="mqtt_ip2"
|
||||
style="width: 43px; height: 30px"
|
||||
></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1">.</el-col>
|
||||
<el-col :span="5">
|
||||
<el-input
|
||||
v-model="mqtt_ip3"
|
||||
style="width: 43px; height: 30px"
|
||||
></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1">.</el-col>
|
||||
<el-col :span="5">
|
||||
<el-input
|
||||
v-model="mqtt_ip4"
|
||||
style="width: 43px; height: 30px"
|
||||
></el-input>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-form-item
|
||||
label="网关SN:"
|
||||
:label-width="formLabelWidth"
|
||||
prop="mqtt_wgsn"
|
||||
>
|
||||
<el-input
|
||||
v-model="mqtt_wgsn"
|
||||
placeholder=""
|
||||
style="width: 200px; height: 30px"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-form-item
|
||||
label="端口:"
|
||||
:label-width="formLabelWidth"
|
||||
prop="mqtt_port"
|
||||
>
|
||||
<el-input
|
||||
v-model="mqtt_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="Keep Alive(s):"
|
||||
:label-width="formLabelWidth"
|
||||
prop="mqtt_keepalive"
|
||||
>
|
||||
<el-input
|
||||
v-model="mqtt_keepalive"
|
||||
placeholder="64"
|
||||
style="width: 200px; height: 30px"
|
||||
></el-input>
|
||||
<div class="infos">2-60000</div>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item
|
||||
label="TLS加密:"
|
||||
:label-width="formLabelWidth"
|
||||
prop="mqtt_tls"
|
||||
>
|
||||
<el-switch v-model="mqtt_tls"></el-switch>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item
|
||||
label="清除Session:"
|
||||
:label-width="formLabelWidth"
|
||||
prop="mqtt_clearsession"
|
||||
>
|
||||
<el-switch v-model="mqtt_clearsession"></el-switch>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<h3 class="info_play">信息发布</h3>
|
||||
<el-divider></el-divider>
|
||||
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item
|
||||
label="Qos(MQTT):"
|
||||
:label-width="formLabelWidth"
|
||||
prop="upload_week"
|
||||
>
|
||||
<el-select
|
||||
v-model="mqtt_qos"
|
||||
placeholder="请选择"
|
||||
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-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<!-- <el-col :span="12">
|
||||
<el-form-item label="retained:" :label-width="formLabelWidth" prop="retained">
|
||||
<el-switch v-model="value1"></el-switch>
|
||||
</el-form-item>
|
||||
</el-col> -->
|
||||
</el-row>
|
||||
<!-- <el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="入口函数:" :label-width="formLabelWidth" prop="upload_week">
|
||||
<el-input v-model="input1" placeholder="64" style="width: 200px;height:30px"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row> -->
|
||||
<!-- <el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="函数代码:" :label-width="formLabelWidth" prop="upload_week">
|
||||
<prism-editor class="my-editor height-300" v-model="code" :highlight="highlighter"
|
||||
:line-numbers="lineNumbers"></prism-editor>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row> -->
|
||||
<div class="con_left_footer">
|
||||
<el-button type="primary" @click="add_passage = false"
|
||||
>保 存</el-button
|
||||
>
|
||||
<el-button @click="add_passage = false">取 消</el-button>
|
||||
</div>
|
||||
</el-form>
|
||||
</div>
|
||||
<div>
|
||||
<div class="con_right">
|
||||
<el-menu
|
||||
class="el-menu-demo"
|
||||
mode="horizontal"
|
||||
@select="handleSelect"
|
||||
>
|
||||
<el-menu-item index="1">添加</el-menu-item>
|
||||
<el-menu-item index="2">保存</el-menu-item>
|
||||
<el-menu-item index="3">删除</el-menu-item>
|
||||
</el-menu>
|
||||
</div>
|
||||
<el-table ref="singleTable" :data="tableData" style="width: 100%">
|
||||
<el-table-column type="index"> </el-table-column>
|
||||
<el-table-column property="mqtt_cjd_sbmc" label="设备名称">
|
||||
</el-table-column>
|
||||
<el-table-column property="mqtt_cjd_tagid" label="TagID">
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 添加按钮下显示出来的弹框信息 -->
|
||||
<div>
|
||||
<el-dialog title="选择点" :visible.sync="choose_point" width="30%">
|
||||
<el-tree
|
||||
:data="points"
|
||||
show-checkbox
|
||||
node-key="id"
|
||||
:default-expanded-keys="[1, 2]"
|
||||
:default-checked-keys="[3, 4, 5, 6]"
|
||||
:props="defaultProps"
|
||||
>
|
||||
</el-tree>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="savePoint"
|
||||
>保 存</el-button
|
||||
>
|
||||
<el-button @click="choose_point = false">取 消</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { PrismEditor } from "vue-prism-editor";
|
||||
import "vue-prism-editor/dist/prismeditor.min.css"; // import the styles somewhere
|
||||
// import highlighting library (you can use any library you want just return html string)
|
||||
import { highlight, languages } from "prismjs/components/prism-core";
|
||||
import "prismjs/components/prism-clike";
|
||||
import "prismjs/components/prism-javascript";
|
||||
import "prismjs/themes/prism-tomorrow.css"; // import syntax highlighting styles
|
||||
|
||||
export default {
|
||||
name: "ChiClone",
|
||||
components: {
|
||||
PrismEditor,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
mqtt_qiyong: true,
|
||||
mqtt_ip: "",
|
||||
mqtt_ip1: "",
|
||||
mqtt_ip2: "",
|
||||
mqtt_ip3: "",
|
||||
mqtt_ip4: "",
|
||||
mqtt_wgsn: "",
|
||||
mqtt_port: "",
|
||||
mqtt_keepalive: "",
|
||||
mqtt_tls: false,
|
||||
mqtt_clearsession: false,
|
||||
// mqtt_sssjfbzt:"",
|
||||
mqtt_qos: "0",
|
||||
// code: 'console.log("Hello World")',
|
||||
// lineNumbers: true, // true为编辑模式， false只展示不可编辑
|
||||
points: [
|
||||
{
|
||||
id: 1,
|
||||
label: "Device1",
|
||||
children: [
|
||||
{
|
||||
id: 3,
|
||||
label: "tag0001",
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
label: "tag0002",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
label: "Device1",
|
||||
children: [
|
||||
{
|
||||
id: 5,
|
||||
label: "tag0003",
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
label: "tag0004",
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
choose_point: false,
|
||||
options1: [
|
||||
{
|
||||
value: "0",
|
||||
label: "0",
|
||||
},
|
||||
{
|
||||
value: "1",
|
||||
label: "1",
|
||||
},
|
||||
{
|
||||
value: "2",
|
||||
label: "2",
|
||||
},
|
||||
],
|
||||
labelPosition: "left",
|
||||
formLabelWidth: "114px",
|
||||
input1: 192,
|
||||
add_passage: false,
|
||||
rightMenu: "",
|
||||
dialogVisible: true,
|
||||
isAdd: false,
|
||||
datas: [
|
||||
{
|
||||
label: "Gateway",
|
||||
children: [
|
||||
{
|
||||
label: "数据采集",
|
||||
children: [
|
||||
{
|
||||
label: "I/O点",
|
||||
},
|
||||
{
|
||||
label: "用户点",
|
||||
},
|
||||
{
|
||||
label: "计算点",
|
||||
},
|
||||
{
|
||||
label: "系统点",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "上云服务",
|
||||
children: [
|
||||
{
|
||||
label: "标准 MQTT",
|
||||
},
|
||||
{
|
||||
label: "AWS loT",
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
defaultProps: {
|
||||
children: "children",
|
||||
label: "label",
|
||||
},
|
||||
tableData: [
|
||||
{
|
||||
mqtt_cjd_sbmc: "Device1",
|
||||
mqtt_cjd_tagid: "Device1.tag0001",
|
||||
},
|
||||
],
|
||||
rules: {
|
||||
server_ip: [
|
||||
{ required: true, message: "请输入服务器IP", trigger: "blur" },
|
||||
],
|
||||
port_number: [
|
||||
{ required: true, message: "请输入端口", trigger: "blur" },
|
||||
],
|
||||
gateway_id: [
|
||||
{ required: true, message: "请输入网关ID", trigger: "blur" },
|
||||
],
|
||||
data_theme: [
|
||||
{ required: true, message: "请输入主题", trigger: "blur" },
|
||||
],
|
||||
upload_mode: [
|
||||
{ required: true, message: "请输入上传模式", trigger: "blur" },
|
||||
],
|
||||
upload_week: [
|
||||
{ required: true, message: "请输入上传周期", trigger: "blur" },
|
||||
],
|
||||
data_filter: [
|
||||
{ required: true, message: "请输入数据过滤", trigger: "blur" },
|
||||
],
|
||||
},
|
||||
};
|
||||
},
|
||||
mounted() {},
|
||||
methods: {
|
||||
treeNodeClick() {
|
||||
this.add_passage = true;
|
||||
},
|
||||
getDriveName() {
|
||||
this.diag_drive = true;
|
||||
},
|
||||
handleSelect(key) {
|
||||
console.log(key);
|
||||
if (key == 1 && this.isAdd == false) {
|
||||
this.choose_point = true;
|
||||
} else if (key == 1 && this.isAdd == true) {
|
||||
this.$message({
|
||||
message: '添加失败,只能添加一条数据',
|
||||
type: 'error'
|
||||
});
|
||||
return false
|
||||
}
|
||||
},
|
||||
highlighter(code) {
|
||||
return highlight(code, languages.js); //returns html
|
||||
},
|
||||
closeMenu(ev) {
|
||||
console.log({ ev });
|
||||
this.dialogVisible = false;
|
||||
},
|
||||
savePoint() {
|
||||
this.choose_point = false;
|
||||
this.isAdd = true;
|
||||
this.$message({
|
||||
message: '添加成功',
|
||||
type: 'success'
|
||||
});
|
||||
},
|
||||
},
|
||||
directives: {
|
||||
"click-outside": {
|
||||
bind: function (el, binding, vnode) {
|
||||
console.log("el", el);
|
||||
console.log("binding", binding);
|
||||
el.event = function (event) {
|
||||
// 检查点击是否发生在节点之内（包括子节点）
|
||||
if (!(el == event.target || el.contains(event.target))) {
|
||||
// 如果没有，则触发调用
|
||||
// 若绑定值为函数，则执行
|
||||
// 这里我们可以通过钩子函数中的 vnode.context，来获取当前组件的作用域
|
||||
if (typeof vnode.context[binding.expression] == "function") {
|
||||
vnode.context[binding.expression](event);
|
||||
}
|
||||
}
|
||||
};
|
||||
// 绑定事件
|
||||
// 设置为true，代表在DOM树中，注册了该listener的元素，会先于它下方的任何事件目标，接收到该事件。
|
||||
document.body.addEventListener("click", el.event, true);
|
||||
},
|
||||
unbind: function (el) {
|
||||
// 解绑事件
|
||||
document.body.removeEventListener("click", el.event, true);
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.tree_menu {
|
||||
position: absolute;
|
||||
width: 286px;
|
||||
height: 753px;
|
||||
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);
|
||||
}
|
||||
|
||||
/deep/ .pas_params {
|
||||
.info_play {
|
||||
width: 56px;
|
||||
height: 20px;
|
||||
color: rgba(16, 16, 16, 1);
|
||||
font-size: 14px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.el-divider--horizontal {
|
||||
margin: 8px 0;
|
||||
}
|
||||
|
||||
.el-button {
|
||||
width: 80px;
|
||||
height: 30px;
|
||||
line-height: 0.5;
|
||||
}
|
||||
|
||||
.el-col-12:last-child {
|
||||
padding-right: 150px;
|
||||
}
|
||||
|
||||
.el-col-12:first-child {
|
||||
padding-right: 28px;
|
||||
}
|
||||
|
||||
.el-row {
|
||||
height: 40px;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
|
||||
.el-col-1 {
|
||||
text-align: center;
|
||||
line-height: 52px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.el-col-9 {
|
||||
padding-left: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.el-input__inner {
|
||||
height: 30px;
|
||||
text-align: left;
|
||||
padding: 0px 8px;
|
||||
}
|
||||
|
||||
.content {
|
||||
position: absolute;
|
||||
left: 362px;
|
||||
top: 104px;
|
||||
width: 1220px;
|
||||
height: 836px;
|
||||
line-height: 20px;
|
||||
padding-left: 36px;
|
||||
background-color: rgba(255, 255, 255, 1);
|
||||
color: rgba(16, 16, 16, 1);
|
||||
font-size: 14px;
|
||||
border: 1px solid rgba(187, 187, 187, 1);
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
|
||||
.el-form-item {
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
/deep/ .con_left {
|
||||
.el-con-5 {
|
||||
width: 43px;
|
||||
}
|
||||
}
|
||||
|
||||
.con_left {
|
||||
width: 709px;
|
||||
position: relative;
|
||||
|
||||
.my-editor {
|
||||
background: #2d2d2d;
|
||||
color: #ccc;
|
||||
|
||||
font-family: Fira code, Fira Mono, Consolas, Menlo, Courier, monospace;
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
/* optional */
|
||||
.prism-editor__textarea:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
/* not required: */
|
||||
.height-300 {
|
||||
width: 491px;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.infos {
|
||||
width: 60px;
|
||||
position: absolute;
|
||||
left: 208px;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.con_left_footer {
|
||||
position: absolute;
|
||||
left: 499px;
|
||||
top: 720px;
|
||||
}
|
||||
}
|
||||
|
||||
.con_right {
|
||||
width: 480px;
|
||||
|
||||
.dialog-footer {
|
||||
.el-button {
|
||||
width: 80px;
|
||||
height: 30px;
|
||||
line-height: 0.5;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
@ -0,0 +1,614 @@
|
|||
<!-- 斥候MQTT云 -->
|
||||
<template>
|
||||
<div class="Clone">
|
||||
<!-- 设置树形控件 -->
|
||||
<div v-click-outside="closeMenu">
|
||||
<!-- <el-button type="info" plain @click="dialogVisible = true">斥侯MQTT云</el-button> -->
|
||||
<div v-show="dialogVisible" class="tree_menu">
|
||||
<el-tree
|
||||
:data="datas"
|
||||
:props="defaultProps"
|
||||
@node-click="treeNodeClick"
|
||||
></el-tree>
|
||||
<!-- 树形控件右键组件 -->
|
||||
</div>
|
||||
<<<<<<< HEAD
|
||||
</div>
|
||||
<div class="pas_params" v-show="add_passage">
|
||||
<div class="content">
|
||||
<div class="con_left">
|
||||
<el-form
|
||||
:label-position="labelPosition"
|
||||
:rules="rules"
|
||||
ref="ruleForm"
|
||||
=======
|
||||
<div>
|
||||
<div class="con_right">
|
||||
<el-menu
|
||||
class="el-menu-demo"
|
||||
mode="horizontal"
|
||||
@select="handleSelect"
|
||||
>>>>>>> f93587abd4370fe372609d70c64615a4f632f8d8
|
||||
>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-form-item>
|
||||
<el-checkbox v-model="mqtt_qiyong">启用</el-checkbox>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item
|
||||
label="服务器IP:"
|
||||
:label-width="formLabelWidth"
|
||||
prop="mqtt_ip"
|
||||
>
|
||||
<el-row>
|
||||
<el-col :span="5">
|
||||
<el-input
|
||||
v-model="mqtt_ip1"
|
||||
style="width: 43px; height: 30px"
|
||||
></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1">. </el-col>
|
||||
<el-col :span="5">
|
||||
<el-input
|
||||
v-model="mqtt_ip2"
|
||||
style="width: 43px; height: 30px"
|
||||
></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1">.</el-col>
|
||||
<el-col :span="5">
|
||||
<el-input
|
||||
v-model="mqtt_ip3"
|
||||
style="width: 43px; height: 30px"
|
||||
></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1">.</el-col>
|
||||
<el-col :span="5">
|
||||
<el-input
|
||||
v-model="mqtt_ip4"
|
||||
style="width: 43px; height: 30px"
|
||||
></el-input>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-form-item
|
||||
label="网关SN:"
|
||||
:label-width="formLabelWidth"
|
||||
prop="mqtt_wgsn"
|
||||
>
|
||||
<el-input
|
||||
v-model="mqtt_wgsn"
|
||||
placeholder=""
|
||||
style="width: 200px; height: 30px"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-form-item
|
||||
label="端口:"
|
||||
:label-width="formLabelWidth"
|
||||
prop="mqtt_port"
|
||||
>
|
||||
<el-input
|
||||
v-model="mqtt_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="Keep Alive(s):"
|
||||
:label-width="formLabelWidth"
|
||||
prop="mqtt_keepalive"
|
||||
>
|
||||
<el-input
|
||||
v-model="mqtt_keepalive"
|
||||
placeholder="64"
|
||||
style="width: 200px; height: 30px"
|
||||
></el-input>
|
||||
<div class="infos">2-60000</div>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item
|
||||
label="TLS加密:"
|
||||
:label-width="formLabelWidth"
|
||||
prop="mqtt_tls"
|
||||
>
|
||||
<el-switch v-model="mqtt_tls"></el-switch>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item
|
||||
label="清除Session:"
|
||||
:label-width="formLabelWidth"
|
||||
prop="mqtt_clearsession"
|
||||
>
|
||||
<el-switch v-model="mqtt_clearsession"></el-switch>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<h3 class="info_play">信息发布</h3>
|
||||
<el-divider></el-divider>
|
||||
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item
|
||||
label="Qos(MQTT):"
|
||||
:label-width="formLabelWidth"
|
||||
prop="upload_week"
|
||||
>
|
||||
<el-select
|
||||
v-model="mqtt_qos"
|
||||
placeholder="请选择"
|
||||
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-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<!-- <el-col :span="12">
|
||||
<el-form-item label="retained:" :label-width="formLabelWidth" prop="retained">
|
||||
<el-switch v-model="value1"></el-switch>
|
||||
</el-form-item>
|
||||
</el-col> -->
|
||||
</el-row>
|
||||
<!-- <el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="入口函数:" :label-width="formLabelWidth" prop="upload_week">
|
||||
<el-input v-model="input1" placeholder="64" style="width: 200px;height:30px"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row> -->
|
||||
<!-- <el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="函数代码:" :label-width="formLabelWidth" prop="upload_week">
|
||||
<prism-editor class="my-editor height-300" v-model="code" :highlight="highlighter"
|
||||
:line-numbers="lineNumbers"></prism-editor>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row> -->
|
||||
<div class="con_left_footer">
|
||||
<el-button type="primary" @click="add_passage = false"
|
||||
>保 存</el-button
|
||||
>
|
||||
<el-button @click="add_passage = false">取 消</el-button>
|
||||
</div>
|
||||
</el-form>
|
||||
</div>
|
||||
<div>
|
||||
<div class="con_right">
|
||||
<el-menu
|
||||
class="el-menu-demo"
|
||||
mode="horizontal"
|
||||
@select="handleSelect"
|
||||
>
|
||||
<el-menu-item index="1">添加</el-menu-item>
|
||||
<el-menu-item index="2">保存</el-menu-item>
|
||||
<el-menu-item index="3">删除</el-menu-item>
|
||||
</el-menu>
|
||||
</div>
|
||||
<el-table ref="singleTable" :data="tableData" style="width: 100%">
|
||||
<el-table-column type="index"> </el-table-column>
|
||||
<el-table-column property="mqtt_cjd_sbmc" label="设备名称">
|
||||
</el-table-column>
|
||||
<el-table-column property="mqtt_cjd_tagid" label="TagID">
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 添加按钮下显示出来的弹框信息 -->
|
||||
<div>
|
||||
<el-dialog title="选择点" :visible.sync="choose_point" width="30%">
|
||||
<el-tree
|
||||
:data="points"
|
||||
show-checkbox
|
||||
node-key="id"
|
||||
:default-expanded-keys="[1, 2]"
|
||||
:default-checked-keys="[3, 4, 5, 6]"
|
||||
:props="defaultProps"
|
||||
>
|
||||
</el-tree>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="savePoint"
|
||||
>保 存</el-button
|
||||
>
|
||||
<el-button @click="choose_point = false">取 消</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { PrismEditor } from "vue-prism-editor";
|
||||
import "vue-prism-editor/dist/prismeditor.min.css"; // import the styles somewhere
|
||||
// import highlighting library (you can use any library you want just return html string)
|
||||
import { highlight, languages } from "prismjs/components/prism-core";
|
||||
import "prismjs/components/prism-clike";
|
||||
import "prismjs/components/prism-javascript";
|
||||
import "prismjs/themes/prism-tomorrow.css"; // import syntax highlighting styles
|
||||
|
||||
export default {
|
||||
name: "ChiClone",
|
||||
components: {
|
||||
PrismEditor,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
mqtt_qiyong: true,
|
||||
mqtt_ip: "",
|
||||
mqtt_ip1: "",
|
||||
mqtt_ip2: "",
|
||||
mqtt_ip3: "",
|
||||
mqtt_ip4: "",
|
||||
mqtt_wgsn: "",
|
||||
mqtt_port: "",
|
||||
mqtt_keepalive: "",
|
||||
mqtt_tls: false,
|
||||
mqtt_clearsession: false,
|
||||
// mqtt_sssjfbzt:"",
|
||||
mqtt_qos: "0",
|
||||
// code: 'console.log("Hello World")',
|
||||
// lineNumbers: true, // true为编辑模式， false只展示不可编辑
|
||||
points: [
|
||||
{
|
||||
id: 1,
|
||||
label: "Device1",
|
||||
children: [
|
||||
{
|
||||
id: 3,
|
||||
label: "tag0001",
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
label: "tag0002",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
label: "Device1",
|
||||
children: [
|
||||
{
|
||||
id: 5,
|
||||
label: "tag0003",
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
label: "tag0004",
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
choose_point: false,
|
||||
options1: [
|
||||
{
|
||||
value: "0",
|
||||
label: "0",
|
||||
},
|
||||
{
|
||||
value: "1",
|
||||
label: "1",
|
||||
},
|
||||
{
|
||||
value: "2",
|
||||
label: "2",
|
||||
},
|
||||
],
|
||||
labelPosition: "left",
|
||||
formLabelWidth: "114px",
|
||||
input1: 192,
|
||||
add_passage: false,
|
||||
rightMenu: "",
|
||||
dialogVisible: true,
|
||||
isAdd: false,
|
||||
datas: [
|
||||
{
|
||||
label: "Gateway",
|
||||
children: [
|
||||
{
|
||||
label: "数据采集",
|
||||
children: [
|
||||
{
|
||||
label: "I/O点",
|
||||
},
|
||||
{
|
||||
label: "用户点",
|
||||
},
|
||||
{
|
||||
label: "计算点",
|
||||
},
|
||||
{
|
||||
label: "系统点",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "上云服务",
|
||||
children: [
|
||||
{
|
||||
label: "标准 MQTT",
|
||||
},
|
||||
{
|
||||
label: "AWS loT",
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
defaultProps: {
|
||||
children: "children",
|
||||
label: "label",
|
||||
},
|
||||
tableData: [
|
||||
{
|
||||
mqtt_cjd_sbmc: "Device1",
|
||||
mqtt_cjd_tagid: "Device1.tag0001",
|
||||
},
|
||||
],
|
||||
rules: {
|
||||
server_ip: [
|
||||
{ required: true, message: "请输入服务器IP", trigger: "blur" },
|
||||
],
|
||||
port_number: [
|
||||
{ required: true, message: "请输入端口", trigger: "blur" },
|
||||
],
|
||||
gateway_id: [
|
||||
{ required: true, message: "请输入网关ID", trigger: "blur" },
|
||||
],
|
||||
data_theme: [
|
||||
{ required: true, message: "请输入主题", trigger: "blur" },
|
||||
],
|
||||
upload_mode: [
|
||||
{ required: true, message: "请输入上传模式", trigger: "blur" },
|
||||
],
|
||||
upload_week: [
|
||||
{ required: true, message: "请输入上传周期", trigger: "blur" },
|
||||
],
|
||||
data_filter: [
|
||||
{ required: true, message: "请输入数据过滤", trigger: "blur" },
|
||||
],
|
||||
},
|
||||
};
|
||||
},
|
||||
mounted() {},
|
||||
methods: {
|
||||
treeNodeClick() {
|
||||
this.add_passage = true;
|
||||
},
|
||||
getDriveName() {
|
||||
this.diag_drive = true;
|
||||
},
|
||||
handleSelect(key) {
|
||||
console.log(key);
|
||||
if (key == 1 && this.isAdd == false) {
|
||||
this.choose_point = true;
|
||||
} else if (key == 1 && this.isAdd == true) {
|
||||
this.$message({
|
||||
message: '添加失败,只能添加一条数据',
|
||||
type: 'error'
|
||||
});
|
||||
return false
|
||||
}
|
||||
},
|
||||
highlighter(code) {
|
||||
return highlight(code, languages.js); //returns html
|
||||
},
|
||||
closeMenu(ev) {
|
||||
console.log({ ev });
|
||||
this.dialogVisible = false;
|
||||
},
|
||||
savePoint() {
|
||||
this.choose_point = false;
|
||||
this.isAdd = true;
|
||||
this.$message({
|
||||
message: '添加成功',
|
||||
type: 'success'
|
||||
});
|
||||
},
|
||||
},
|
||||
directives: {
|
||||
"click-outside": {
|
||||
bind: function (el, binding, vnode) {
|
||||
console.log("el", el);
|
||||
console.log("binding", binding);
|
||||
el.event = function (event) {
|
||||
// 检查点击是否发生在节点之内（包括子节点）
|
||||
if (!(el == event.target || el.contains(event.target))) {
|
||||
// 如果没有，则触发调用
|
||||
// 若绑定值为函数，则执行
|
||||
// 这里我们可以通过钩子函数中的 vnode.context，来获取当前组件的作用域
|
||||
if (typeof vnode.context[binding.expression] == "function") {
|
||||
vnode.context[binding.expression](event);
|
||||
}
|
||||
}
|
||||
};
|
||||
// 绑定事件
|
||||
// 设置为true，代表在DOM树中，注册了该listener的元素，会先于它下方的任何事件目标，接收到该事件。
|
||||
document.body.addEventListener("click", el.event, true);
|
||||
},
|
||||
unbind: function (el) {
|
||||
// 解绑事件
|
||||
document.body.removeEventListener("click", el.event, true);
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.tree_menu {
|
||||
position: absolute;
|
||||
width: 286px;
|
||||
height: 753px;
|
||||
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);
|
||||
}
|
||||
|
||||
/deep/ .pas_params {
|
||||
.info_play {
|
||||
width: 56px;
|
||||
height: 20px;
|
||||
color: rgba(16, 16, 16, 1);
|
||||
font-size: 14px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.el-divider--horizontal {
|
||||
margin: 8px 0;
|
||||
}
|
||||
|
||||
.el-button {
|
||||
width: 80px;
|
||||
height: 30px;
|
||||
line-height: 0.5;
|
||||
}
|
||||
|
||||
.el-col-12:last-child {
|
||||
padding-right: 150px;
|
||||
}
|
||||
|
||||
.el-col-12:first-child {
|
||||
padding-right: 28px;
|
||||
}
|
||||
|
||||
.el-row {
|
||||
height: 40px;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
|
||||
.el-col-1 {
|
||||
text-align: center;
|
||||
line-height: 52px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.el-col-9 {
|
||||
padding-left: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.el-input__inner {
|
||||
height: 30px;
|
||||
text-align: left;
|
||||
padding: 0px 8px;
|
||||
}
|
||||
|
||||
.content {
|
||||
position: absolute;
|
||||
left: 362px;
|
||||
top: 104px;
|
||||
width: 1220px;
|
||||
height: 836px;
|
||||
line-height: 20px;
|
||||
padding-left: 36px;
|
||||
background-color: rgba(255, 255, 255, 1);
|
||||
color: rgba(16, 16, 16, 1);
|
||||
font-size: 14px;
|
||||
border: 1px solid rgba(187, 187, 187, 1);
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
|
||||
.el-form-item {
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
/deep/ .con_left {
|
||||
.el-con-5 {
|
||||
width: 43px;
|
||||
}
|
||||
}
|
||||
|
||||
.con_left {
|
||||
width: 709px;
|
||||
position: relative;
|
||||
|
||||
.my-editor {
|
||||
background: #2d2d2d;
|
||||
color: #ccc;
|
||||
|
||||
font-family: Fira code, Fira Mono, Consolas, Menlo, Courier, monospace;
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
/* optional */
|
||||
.prism-editor__textarea:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
/* not required: */
|
||||
.height-300 {
|
||||
width: 491px;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.infos {
|
||||
width: 60px;
|
||||
position: absolute;
|
||||
left: 208px;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.con_left_footer {
|
||||
position: absolute;
|
||||
left: 499px;
|
||||
top: 720px;
|
||||
}
|
||||
}
|
||||
|
||||
.con_right {
|
||||
width: 480px;
|
||||
|
||||
.dialog-footer {
|
||||
.el-button {
|
||||
width: 80px;
|
||||
height: 30px;
|
||||
line-height: 0.5;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
@ -0,0 +1,605 @@
|
|||
<!-- 斥候MQTT云 -->
|
||||
<template>
|
||||
<div class="Clone">
|
||||
<!-- 设置树形控件 -->
|
||||
<div v-click-outside="closeMenu">
|
||||
<!-- <el-button type="info" plain @click="dialogVisible = true">斥侯MQTT云</el-button> -->
|
||||
<div v-show="dialogVisible" class="tree_menu">
|
||||
<el-tree
|
||||
:data="datas"
|
||||
:props="defaultProps"
|
||||
@node-click="treeNodeClick"
|
||||
></el-tree>
|
||||
<!-- 树形控件右键组件 -->
|
||||
</div>
|
||||
</div>
|
||||
<div class="pas_params" v-show="add_passage">
|
||||
<div class="content">
|
||||
<div class="con_left">
|
||||
<el-form
|
||||
:label-position="labelPosition"
|
||||
:rules="rules"
|
||||
ref="ruleForm"
|
||||
>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-form-item>
|
||||
<el-checkbox v-model="mqtt_qiyong">启用</el-checkbox>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item
|
||||
label="服务器IP:"
|
||||
:label-width="formLabelWidth"
|
||||
prop="mqtt_ip"
|
||||
>
|
||||
<el-row>
|
||||
<el-col :span="5">
|
||||
<el-input
|
||||
v-model="mqtt_ip1"
|
||||
style="width: 43px; height: 30px"
|
||||
></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1">. </el-col>
|
||||
<el-col :span="5">
|
||||
<el-input
|
||||
v-model="mqtt_ip2"
|
||||
style="width: 43px; height: 30px"
|
||||
></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1">.</el-col>
|
||||
<el-col :span="5">
|
||||
<el-input
|
||||
v-model="mqtt_ip3"
|
||||
style="width: 43px; height: 30px"
|
||||
></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1">.</el-col>
|
||||
<el-col :span="5">
|
||||
<el-input
|
||||
v-model="mqtt_ip4"
|
||||
style="width: 43px; height: 30px"
|
||||
></el-input>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-form-item
|
||||
label="网关SN:"
|
||||
:label-width="formLabelWidth"
|
||||
prop="mqtt_wgsn"
|
||||
>
|
||||
<el-input
|
||||
v-model="mqtt_wgsn"
|
||||
placeholder=""
|
||||
style="width: 200px; height: 30px"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-form-item
|
||||
label="端口:"
|
||||
:label-width="formLabelWidth"
|
||||
prop="mqtt_port"
|
||||
>
|
||||
<el-input
|
||||
v-model="mqtt_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="Keep Alive(s):"
|
||||
:label-width="formLabelWidth"
|
||||
prop="mqtt_keepalive"
|
||||
>
|
||||
<el-input
|
||||
v-model="mqtt_keepalive"
|
||||
placeholder="64"
|
||||
style="width: 200px; height: 30px"
|
||||
></el-input>
|
||||
<div class="infos">2-60000</div>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item
|
||||
label="TLS加密:"
|
||||
:label-width="formLabelWidth"
|
||||
prop="mqtt_tls"
|
||||
>
|
||||
<el-switch v-model="mqtt_tls"></el-switch>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item
|
||||
label="清除Session:"
|
||||
:label-width="formLabelWidth"
|
||||
prop="mqtt_clearsession"
|
||||
>
|
||||
<el-switch v-model="mqtt_clearsession"></el-switch>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<h3 class="info_play">信息发布</h3>
|
||||
<el-divider></el-divider>
|
||||
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item
|
||||
label="Qos(MQTT):"
|
||||
:label-width="formLabelWidth"
|
||||
prop="upload_week"
|
||||
>
|
||||
<el-select
|
||||
v-model="mqtt_qos"
|
||||
placeholder="请选择"
|
||||
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-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<!-- <el-col :span="12">
|
||||
<el-form-item label="retained:" :label-width="formLabelWidth" prop="retained">
|
||||
<el-switch v-model="value1"></el-switch>
|
||||
</el-form-item>
|
||||
</el-col> -->
|
||||
</el-row>
|
||||
<!-- <el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="入口函数:" :label-width="formLabelWidth" prop="upload_week">
|
||||
<el-input v-model="input1" placeholder="64" style="width: 200px;height:30px"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row> -->
|
||||
<!-- <el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="函数代码:" :label-width="formLabelWidth" prop="upload_week">
|
||||
<prism-editor class="my-editor height-300" v-model="code" :highlight="highlighter"
|
||||
:line-numbers="lineNumbers"></prism-editor>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row> -->
|
||||
<div class="con_left_footer">
|
||||
<el-button type="primary" @click="add_passage = false"
|
||||
>保 存</el-button
|
||||
>
|
||||
<el-button @click="add_passage = false">取 消</el-button>
|
||||
</div>
|
||||
</el-form>
|
||||
</div>
|
||||
<div>
|
||||
<div class="con_right">
|
||||
<el-menu
|
||||
class="el-menu-demo"
|
||||
mode="horizontal"
|
||||
@select="handleSelect"
|
||||
>
|
||||
<el-menu-item index="1">添加</el-menu-item>
|
||||
<el-menu-item index="2">保存</el-menu-item>
|
||||
<el-menu-item index="3">删除</el-menu-item>
|
||||
</el-menu>
|
||||
</div>
|
||||
<el-table ref="singleTable" :data="tableData" style="width: 100%">
|
||||
<el-table-column type="index"> </el-table-column>
|
||||
<el-table-column property="mqtt_cjd_sbmc" label="设备名称">
|
||||
</el-table-column>
|
||||
<el-table-column property="mqtt_cjd_tagid" label="TagID">
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 添加按钮下显示出来的弹框信息 -->
|
||||
<div>
|
||||
<el-dialog title="选择点" :visible.sync="choose_point" width="30%">
|
||||
<el-tree
|
||||
:data="points"
|
||||
show-checkbox
|
||||
node-key="id"
|
||||
:default-expanded-keys="[1, 2]"
|
||||
:default-checked-keys="[3, 4, 5, 6]"
|
||||
:props="defaultProps"
|
||||
>
|
||||
</el-tree>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="savePoint"
|
||||
>保 存</el-button
|
||||
>
|
||||
<el-button @click="choose_point = false">取 消</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { PrismEditor } from "vue-prism-editor";
|
||||
import "vue-prism-editor/dist/prismeditor.min.css"; // import the styles somewhere
|
||||
// import highlighting library (you can use any library you want just return html string)
|
||||
import { highlight, languages } from "prismjs/components/prism-core";
|
||||
import "prismjs/components/prism-clike";
|
||||
import "prismjs/components/prism-javascript";
|
||||
import "prismjs/themes/prism-tomorrow.css"; // import syntax highlighting styles
|
||||
|
||||
export default {
|
||||
name: "ChiClone",
|
||||
components: {
|
||||
PrismEditor,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
mqtt_qiyong: true,
|
||||
mqtt_ip: "",
|
||||
mqtt_ip1: "",
|
||||
mqtt_ip2: "",
|
||||
mqtt_ip3: "",
|
||||
mqtt_ip4: "",
|
||||
mqtt_wgsn: "",
|
||||
mqtt_port: "",
|
||||
mqtt_keepalive: "",
|
||||
mqtt_tls: false,
|
||||
mqtt_clearsession: false,
|
||||
// mqtt_sssjfbzt:"",
|
||||
mqtt_qos: "0",
|
||||
// code: 'console.log("Hello World")',
|
||||
// lineNumbers: true, // true为编辑模式， false只展示不可编辑
|
||||
points: [
|
||||
{
|
||||
id: 1,
|
||||
label: "Device1",
|
||||
children: [
|
||||
{
|
||||
id: 3,
|
||||
label: "tag0001",
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
label: "tag0002",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
label: "Device1",
|
||||
children: [
|
||||
{
|
||||
id: 5,
|
||||
label: "tag0003",
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
label: "tag0004",
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
choose_point: false,
|
||||
options1: [
|
||||
{
|
||||
value: "0",
|
||||
label: "0",
|
||||
},
|
||||
{
|
||||
value: "1",
|
||||
label: "1",
|
||||
},
|
||||
{
|
||||
value: "2",
|
||||
label: "2",
|
||||
},
|
||||
],
|
||||
labelPosition: "left",
|
||||
formLabelWidth: "114px",
|
||||
input1: 192,
|
||||
add_passage: false,
|
||||
rightMenu: "",
|
||||
dialogVisible: true,
|
||||
isAdd: false,
|
||||
datas: [
|
||||
{
|
||||
label: "Gateway",
|
||||
children: [
|
||||
{
|
||||
label: "数据采集",
|
||||
children: [
|
||||
{
|
||||
label: "I/O点",
|
||||
},
|
||||
{
|
||||
label: "用户点",
|
||||
},
|
||||
{
|
||||
label: "计算点",
|
||||
},
|
||||
{
|
||||
label: "系统点",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "上云服务",
|
||||
children: [
|
||||
{
|
||||
label: "标准 MQTT",
|
||||
},
|
||||
{
|
||||
label: "AWS loT",
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
defaultProps: {
|
||||
children: "children",
|
||||
label: "label",
|
||||
},
|
||||
tableData: [
|
||||
{
|
||||
mqtt_cjd_sbmc: "Device1",
|
||||
mqtt_cjd_tagid: "Device1.tag0001",
|
||||
},
|
||||
],
|
||||
rules: {
|
||||
server_ip: [
|
||||
{ required: true, message: "请输入服务器IP", trigger: "blur" },
|
||||
],
|
||||
port_number: [
|
||||
{ required: true, message: "请输入端口", trigger: "blur" },
|
||||
],
|
||||
gateway_id: [
|
||||
{ required: true, message: "请输入网关ID", trigger: "blur" },
|
||||
],
|
||||
data_theme: [
|
||||
{ required: true, message: "请输入主题", trigger: "blur" },
|
||||
],
|
||||
upload_mode: [
|
||||
{ required: true, message: "请输入上传模式", trigger: "blur" },
|
||||
],
|
||||
upload_week: [
|
||||
{ required: true, message: "请输入上传周期", trigger: "blur" },
|
||||
],
|
||||
data_filter: [
|
||||
{ required: true, message: "请输入数据过滤", trigger: "blur" },
|
||||
],
|
||||
},
|
||||
};
|
||||
},
|
||||
mounted() {},
|
||||
methods: {
|
||||
treeNodeClick() {
|
||||
this.add_passage = true;
|
||||
},
|
||||
getDriveName() {
|
||||
this.diag_drive = true;
|
||||
},
|
||||
handleSelect(key) {
|
||||
console.log(key);
|
||||
if (key == 1 && this.isAdd == false) {
|
||||
this.choose_point = true;
|
||||
} else if (key == 1 && this.isAdd == true) {
|
||||
this.$message({
|
||||
message: '添加失败,只能添加一条数据',
|
||||
type: 'error'
|
||||
});
|
||||
return false
|
||||
}
|
||||
},
|
||||
highlighter(code) {
|
||||
return highlight(code, languages.js); //returns html
|
||||
},
|
||||
closeMenu(ev) {
|
||||
console.log({ ev });
|
||||
this.dialogVisible = false;
|
||||
},
|
||||
savePoint() {
|
||||
this.choose_point = false;
|
||||
this.isAdd = true;
|
||||
this.$message({
|
||||
message: '添加成功',
|
||||
type: 'success'
|
||||
});
|
||||
},
|
||||
},
|
||||
directives: {
|
||||
"click-outside": {
|
||||
bind: function (el, binding, vnode) {
|
||||
console.log("el", el);
|
||||
console.log("binding", binding);
|
||||
el.event = function (event) {
|
||||
// 检查点击是否发生在节点之内（包括子节点）
|
||||
if (!(el == event.target || el.contains(event.target))) {
|
||||
// 如果没有，则触发调用
|
||||
// 若绑定值为函数，则执行
|
||||
// 这里我们可以通过钩子函数中的 vnode.context，来获取当前组件的作用域
|
||||
if (typeof vnode.context[binding.expression] == "function") {
|
||||
vnode.context[binding.expression](event);
|
||||
}
|
||||
}
|
||||
};
|
||||
// 绑定事件
|
||||
// 设置为true，代表在DOM树中，注册了该listener的元素，会先于它下方的任何事件目标，接收到该事件。
|
||||
document.body.addEventListener("click", el.event, true);
|
||||
},
|
||||
unbind: function (el) {
|
||||
// 解绑事件
|
||||
document.body.removeEventListener("click", el.event, true);
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.tree_menu {
|
||||
position: absolute;
|
||||
width: 286px;
|
||||
height: 753px;
|
||||
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);
|
||||
}
|
||||
|
||||
/deep/ .pas_params {
|
||||
.info_play {
|
||||
width: 56px;
|
||||
height: 20px;
|
||||
color: rgba(16, 16, 16, 1);
|
||||
font-size: 14px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.el-divider--horizontal {
|
||||
margin: 8px 0;
|
||||
}
|
||||
|
||||
.el-button {
|
||||
width: 80px;
|
||||
height: 30px;
|
||||
line-height: 0.5;
|
||||
}
|
||||
|
||||
.el-col-12:last-child {
|
||||
padding-right: 150px;
|
||||
}
|
||||
|
||||
.el-col-12:first-child {
|
||||
padding-right: 28px;
|
||||
}
|
||||
|
||||
.el-row {
|
||||
height: 40px;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
|
||||
.el-col-1 {
|
||||
text-align: center;
|
||||
line-height: 52px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.el-col-9 {
|
||||
padding-left: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.el-input__inner {
|
||||
height: 30px;
|
||||
text-align: left;
|
||||
padding: 0px 8px;
|
||||
}
|
||||
|
||||
.content {
|
||||
position: absolute;
|
||||
left: 362px;
|
||||
top: 104px;
|
||||
width: 1220px;
|
||||
height: 836px;
|
||||
line-height: 20px;
|
||||
padding-left: 36px;
|
||||
background-color: rgba(255, 255, 255, 1);
|
||||
color: rgba(16, 16, 16, 1);
|
||||
font-size: 14px;
|
||||
border: 1px solid rgba(187, 187, 187, 1);
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
|
||||
.el-form-item {
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
/deep/ .con_left {
|
||||
.el-con-5 {
|
||||
width: 43px;
|
||||
}
|
||||
}
|
||||
|
||||
.con_left {
|
||||
width: 709px;
|
||||
position: relative;
|
||||
|
||||
.my-editor {
|
||||
background: #2d2d2d;
|
||||
color: #ccc;
|
||||
|
||||
font-family: Fira code, Fira Mono, Consolas, Menlo, Courier, monospace;
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
/* optional */
|
||||
.prism-editor__textarea:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
/* not required: */
|
||||
.height-300 {
|
||||
width: 491px;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.infos {
|
||||
width: 60px;
|
||||
position: absolute;
|
||||
left: 208px;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.con_left_footer {
|
||||
position: absolute;
|
||||
left: 499px;
|
||||
top: 720px;
|
||||
}
|
||||
}
|
||||
|
||||
.con_right {
|
||||
width: 480px;
|
||||
|
||||
.dialog-footer {
|
||||
.el-button {
|
||||
width: 80px;
|
||||
height: 30px;
|
||||
line-height: 0.5;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
@ -0,0 +1,610 @@
|
|||
<!-- 斥候MQTT云 -->
|
||||
<template>
|
||||
<div class="Clone">
|
||||
<!-- 设置树形控件 -->
|
||||
<div v-click-outside="closeMenu">
|
||||
<!-- <el-button type="info" plain @click="dialogVisible = true">斥侯MQTT云</el-button> -->
|
||||
<div v-show="dialogVisible" class="tree_menu">
|
||||
<el-tree
|
||||
:data="datas"
|
||||
:props="defaultProps"
|
||||
@node-click="treeNodeClick"
|
||||
></el-tree>
|
||||
<!-- 树形控件右键组件 -->
|
||||
</div>
|
||||
</div>
|
||||
<div class="pas_params" v-show="add_passage">
|
||||
<div class="content">
|
||||
<div class="con_left">
|
||||
<el-form
|
||||
:label-position="labelPosition"
|
||||
:rules="rules"
|
||||
ref="ruleForm"
|
||||
>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-form-item>
|
||||
<el-checkbox v-model="mqtt_qiyong">启用</el-checkbox>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item
|
||||
label="服务器IP:"
|
||||
:label-width="formLabelWidth"
|
||||
prop="mqtt_ip"
|
||||
>
|
||||
<el-row>
|
||||
<el-col :span="5">
|
||||
<el-input
|
||||
v-model="mqtt_ip1"
|
||||
style="width: 43px; height: 30px"
|
||||
></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1">. </el-col>
|
||||
<el-col :span="5">
|
||||
<el-input
|
||||
v-model="mqtt_ip2"
|
||||
style="width: 43px; height: 30px"
|
||||
></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1">.</el-col>
|
||||
<el-col :span="5">
|
||||
<el-input
|
||||
v-model="mqtt_ip3"
|
||||
style="width: 43px; height: 30px"
|
||||
></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1">.</el-col>
|
||||
<el-col :span="5">
|
||||
<el-input
|
||||
v-model="mqtt_ip4"
|
||||
style="width: 43px; height: 30px"
|
||||
></el-input>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-form-item
|
||||
label="网关SN:"
|
||||
:label-width="formLabelWidth"
|
||||
prop="mqtt_wgsn"
|
||||
>
|
||||
<el-input
|
||||
v-model="mqtt_wgsn"
|
||||
placeholder=""
|
||||
style="width: 200px; height: 30px"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-form-item
|
||||
label="端口:"
|
||||
:label-width="formLabelWidth"
|
||||
prop="mqtt_port"
|
||||
>
|
||||
<el-input
|
||||
v-model="mqtt_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="Keep Alive(s):"
|
||||
:label-width="formLabelWidth"
|
||||
prop="mqtt_keepalive"
|
||||
>
|
||||
<el-input
|
||||
v-model="mqtt_keepalive"
|
||||
placeholder="64"
|
||||
style="width: 200px; height: 30px"
|
||||
></el-input>
|
||||
<div class="infos">2-60000</div>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item
|
||||
label="TLS加密:"
|
||||
:label-width="formLabelWidth"
|
||||
prop="mqtt_tls"
|
||||
>
|
||||
<el-switch v-model="mqtt_tls"></el-switch>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item
|
||||
label="清除Session:"
|
||||
:label-width="formLabelWidth"
|
||||
prop="mqtt_clearsession"
|
||||
>
|
||||
<el-switch v-model="mqtt_clearsession"></el-switch>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<h3 class="info_play">信息发布</h3>
|
||||
<el-divider></el-divider>
|
||||
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item
|
||||
label="Qos(MQTT):"
|
||||
:label-width="formLabelWidth"
|
||||
prop="upload_week"
|
||||
>
|
||||
<el-select
|
||||
v-model="mqtt_qos"
|
||||
placeholder="请选择"
|
||||
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-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<!-- <el-col :span="12">
|
||||
<el-form-item label="retained:" :label-width="formLabelWidth" prop="retained">
|
||||
<el-switch v-model="value1"></el-switch>
|
||||
</el-form-item>
|
||||
</el-col> -->
|
||||
</el-row>
|
||||
<!-- <el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="入口函数:" :label-width="formLabelWidth" prop="upload_week">
|
||||
<el-input v-model="input1" placeholder="64" style="width: 200px;height:30px"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row> -->
|
||||
<!-- <el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="函数代码:" :label-width="formLabelWidth" prop="upload_week">
|
||||
<prism-editor class="my-editor height-300" v-model="code" :highlight="highlighter"
|
||||
:line-numbers="lineNumbers"></prism-editor>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row> -->
|
||||
<div class="con_left_footer">
|
||||
<el-button type="primary" @click="add_passage = false"
|
||||
>保 存</el-button
|
||||
>
|
||||
<el-button @click="add_passage = false">取 消</el-button>
|
||||
</div>
|
||||
</el-form>
|
||||
</div>
|
||||
<div>
|
||||
<div class="con_right">
|
||||
<el-menu
|
||||
class="el-menu-demo"
|
||||
mode="horizontal"
|
||||
@select="handleSelect"
|
||||
>
|
||||
<el-menu-item index="1">添加</el-menu-item>
|
||||
<el-menu-item index="2">保存</el-menu-item>
|
||||
<el-menu-item index="3">删除</el-menu-item>
|
||||
</el-menu>
|
||||
</div>
|
||||
<el-table ref="singleTable" :data="tableData" style="width: 100%">
|
||||
<el-table-column type="index"> </el-table-column>
|
||||
<el-table-column property="mqtt_cjd_sbmc" label="设备名称">
|
||||
<template slot="scope">
|
||||
<el-select v-model="scope.row.mqtt_cjd_sbmc" placeholder="">
|
||||
<el-option v-for="" :key=""></el-option>
|
||||
</el-select>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column property="mqtt_cjd_tagid" label="TagID">
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 添加按钮下显示出来的弹框信息 -->
|
||||
<div>
|
||||
<el-dialog title="选择点" :visible.sync="choose_point" width="30%">
|
||||
<el-tree
|
||||
:data="points"
|
||||
show-checkbox
|
||||
node-key="id"
|
||||
:default-expanded-keys="[1, 2]"
|
||||
:default-checked-keys="[3, 4, 5, 6]"
|
||||
:props="defaultProps"
|
||||
>
|
||||
</el-tree>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="savePoint"
|
||||
>保 存</el-button
|
||||
>
|
||||
<el-button @click="choose_point = false">取 消</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { PrismEditor } from "vue-prism-editor";
|
||||
import "vue-prism-editor/dist/prismeditor.min.css"; // import the styles somewhere
|
||||
// import highlighting library (you can use any library you want just return html string)
|
||||
import { highlight, languages } from "prismjs/components/prism-core";
|
||||
import "prismjs/components/prism-clike";
|
||||
import "prismjs/components/prism-javascript";
|
||||
import "prismjs/themes/prism-tomorrow.css"; // import syntax highlighting styles
|
||||
|
||||
export default {
|
||||
name: "ChiClone",
|
||||
components: {
|
||||
PrismEditor,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
mqtt_qiyong: true,
|
||||
mqtt_ip: "",
|
||||
mqtt_ip1: "",
|
||||
mqtt_ip2: "",
|
||||
mqtt_ip3: "",
|
||||
mqtt_ip4: "",
|
||||
mqtt_wgsn: "",
|
||||
mqtt_port: "",
|
||||
mqtt_keepalive: "",
|
||||
mqtt_tls: false,
|
||||
mqtt_clearsession: false,
|
||||
// mqtt_sssjfbzt:"",
|
||||
mqtt_qos: "0",
|
||||
// code: 'console.log("Hello World")',
|
||||
// lineNumbers: true, // true为编辑模式， false只展示不可编辑
|
||||
points: [
|
||||
{
|
||||
id: 1,
|
||||
label: "Device1",
|
||||
children: [
|
||||
{
|
||||
id: 3,
|
||||
label: "tag0001",
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
label: "tag0002",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
label: "Device1",
|
||||
children: [
|
||||
{
|
||||
id: 5,
|
||||
label: "tag0003",
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
label: "tag0004",
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
choose_point: false,
|
||||
options1: [
|
||||
{
|
||||
value: "0",
|
||||
label: "0",
|
||||
},
|
||||
{
|
||||
value: "1",
|
||||
label: "1",
|
||||
},
|
||||
{
|
||||
value: "2",
|
||||
label: "2",
|
||||
},
|
||||
],
|
||||
labelPosition: "left",
|
||||
formLabelWidth: "114px",
|
||||
input1: 192,
|
||||
add_passage: false,
|
||||
rightMenu: "",
|
||||
dialogVisible: true,
|
||||
isAdd: false,
|
||||
datas: [
|
||||
{
|
||||
label: "Gateway",
|
||||
children: [
|
||||
{
|
||||
label: "数据采集",
|
||||
children: [
|
||||
{
|
||||
label: "I/O点",
|
||||
},
|
||||
{
|
||||
label: "用户点",
|
||||
},
|
||||
{
|
||||
label: "计算点",
|
||||
},
|
||||
{
|
||||
label: "系统点",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "上云服务",
|
||||
children: [
|
||||
{
|
||||
label: "标准 MQTT",
|
||||
},
|
||||
{
|
||||
label: "AWS loT",
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
defaultProps: {
|
||||
children: "children",
|
||||
label: "label",
|
||||
},
|
||||
tableData: [
|
||||
{
|
||||
mqtt_cjd_sbmc: "Device1",
|
||||
mqtt_cjd_tagid: "Device1.tag0001",
|
||||
},
|
||||
],
|
||||
rules: {
|
||||
server_ip: [
|
||||
{ required: true, message: "请输入服务器IP", trigger: "blur" },
|
||||
],
|
||||
port_number: [
|
||||
{ required: true, message: "请输入端口", trigger: "blur" },
|
||||
],
|
||||
gateway_id: [
|
||||
{ required: true, message: "请输入网关ID", trigger: "blur" },
|
||||
],
|
||||
data_theme: [
|
||||
{ required: true, message: "请输入主题", trigger: "blur" },
|
||||
],
|
||||
upload_mode: [
|
||||
{ required: true, message: "请输入上传模式", trigger: "blur" },
|
||||
],
|
||||
upload_week: [
|
||||
{ required: true, message: "请输入上传周期", trigger: "blur" },
|
||||
],
|
||||
data_filter: [
|
||||
{ required: true, message: "请输入数据过滤", trigger: "blur" },
|
||||
],
|
||||
},
|
||||
};
|
||||
},
|
||||
mounted() {},
|
||||
methods: {
|
||||
treeNodeClick() {
|
||||
this.add_passage = true;
|
||||
},
|
||||
getDriveName() {
|
||||
this.diag_drive = true;
|
||||
},
|
||||
handleSelect(key) {
|
||||
console.log(key);
|
||||
if (key == 1 && this.isAdd == false) {
|
||||
this.choose_point = true;
|
||||
} else if (key == 1 && this.isAdd == true) {
|
||||
this.$message({
|
||||
message: '添加失败,只能添加一条数据',
|
||||
type: 'error'
|
||||
});
|
||||
return false
|
||||
}
|
||||
},
|
||||
highlighter(code) {
|
||||
return highlight(code, languages.js); //returns html
|
||||
},
|
||||
closeMenu(ev) {
|
||||
console.log({ ev });
|
||||
this.dialogVisible = false;
|
||||
},
|
||||
savePoint() {
|
||||
this.choose_point = false;
|
||||
this.isAdd = true;
|
||||
this.$message({
|
||||
message: '添加成功',
|
||||
type: 'success'
|
||||
});
|
||||
},
|
||||
},
|
||||
directives: {
|
||||
"click-outside": {
|
||||
bind: function (el, binding, vnode) {
|
||||
console.log("el", el);
|
||||
console.log("binding", binding);
|
||||
el.event = function (event) {
|
||||
// 检查点击是否发生在节点之内（包括子节点）
|
||||
if (!(el == event.target || el.contains(event.target))) {
|
||||
// 如果没有，则触发调用
|
||||
// 若绑定值为函数，则执行
|
||||
// 这里我们可以通过钩子函数中的 vnode.context，来获取当前组件的作用域
|
||||
if (typeof vnode.context[binding.expression] == "function") {
|
||||
vnode.context[binding.expression](event);
|
||||
}
|
||||
}
|
||||
};
|
||||
// 绑定事件
|
||||
// 设置为true，代表在DOM树中，注册了该listener的元素，会先于它下方的任何事件目标，接收到该事件。
|
||||
document.body.addEventListener("click", el.event, true);
|
||||
},
|
||||
unbind: function (el) {
|
||||
// 解绑事件
|
||||
document.body.removeEventListener("click", el.event, true);
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.tree_menu {
|
||||
position: absolute;
|
||||
width: 286px;
|
||||
height: 753px;
|
||||
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);
|
||||
}
|
||||
|
||||
/deep/ .pas_params {
|
||||
.info_play {
|
||||
width: 56px;
|
||||
height: 20px;
|
||||
color: rgba(16, 16, 16, 1);
|
||||
font-size: 14px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.el-divider--horizontal {
|
||||
margin: 8px 0;
|
||||
}
|
||||
|
||||
.el-button {
|
||||
width: 80px;
|
||||
height: 30px;
|
||||
line-height: 0.5;
|
||||
}
|
||||
|
||||
.el-col-12:last-child {
|
||||
padding-right: 150px;
|
||||
}
|
||||
|
||||
.el-col-12:first-child {
|
||||
padding-right: 28px;
|
||||
}
|
||||
|
||||
.el-row {
|
||||
height: 40px;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
|
||||
.el-col-1 {
|
||||
text-align: center;
|
||||
line-height: 52px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.el-col-9 {
|
||||
padding-left: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.el-input__inner {
|
||||
height: 30px;
|
||||
text-align: left;
|
||||
padding: 0px 8px;
|
||||
}
|
||||
|
||||
.content {
|
||||
position: absolute;
|
||||
left: 362px;
|
||||
top: 104px;
|
||||
width: 1220px;
|
||||
height: 836px;
|
||||
line-height: 20px;
|
||||
padding-left: 36px;
|
||||
background-color: rgba(255, 255, 255, 1);
|
||||
color: rgba(16, 16, 16, 1);
|
||||
font-size: 14px;
|
||||
border: 1px solid rgba(187, 187, 187, 1);
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
|
||||
.el-form-item {
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
/deep/ .con_left {
|
||||
.el-con-5 {
|
||||
width: 43px;
|
||||
}
|
||||
}
|
||||
|
||||
.con_left {
|
||||
width: 709px;
|
||||
position: relative;
|
||||
|
||||
.my-editor {
|
||||
background: #2d2d2d;
|
||||
color: #ccc;
|
||||
|
||||
font-family: Fira code, Fira Mono, Consolas, Menlo, Courier, monospace;
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
/* optional */
|
||||
.prism-editor__textarea:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
/* not required: */
|
||||
.height-300 {
|
||||
width: 491px;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.infos {
|
||||
width: 60px;
|
||||
position: absolute;
|
||||
left: 208px;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.con_left_footer {
|
||||
position: absolute;
|
||||
left: 499px;
|
||||
top: 720px;
|
||||
}
|
||||
}
|
||||
|
||||
.con_right {
|
||||
width: 480px;
|
||||
|
||||
.dialog-footer {
|
||||
.el-button {
|
||||
width: 80px;
|
||||
height: 30px;
|
||||
line-height: 0.5;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
@ -0,0 +1,610 @@
|
|||
<!-- 斥候MQTT云 -->
|
||||
<template>
|
||||
<div class="Clone">
|
||||
<!-- 设置树形控件 -->
|
||||
<div v-click-outside="closeMenu">
|
||||
<!-- <el-button type="info" plain @click="dialogVisible = true">斥侯MQTT云</el-button> -->
|
||||
<div v-show="dialogVisible" class="tree_menu">
|
||||
<el-tree
|
||||
:data="datas"
|
||||
:props="defaultProps"
|
||||
@node-click="treeNodeClick"
|
||||
></el-tree>
|
||||
<!-- 树形控件右键组件 -->
|
||||
</div>
|
||||
</div>
|
||||
<div class="pas_params" v-show="add_passage">
|
||||
<div class="content">
|
||||
<div class="con_left">
|
||||
<el-form
|
||||
:label-position="labelPosition"
|
||||
:rules="rules"
|
||||
ref="ruleForm"
|
||||
>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-form-item>
|
||||
<el-checkbox v-model="mqtt_qiyong">启用</el-checkbox>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item
|
||||
label="服务器IP:"
|
||||
:label-width="formLabelWidth"
|
||||
prop="mqtt_ip"
|
||||
>
|
||||
<el-row>
|
||||
<el-col :span="5">
|
||||
<el-input
|
||||
v-model="mqtt_ip1"
|
||||
style="width: 43px; height: 30px"
|
||||
></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1">. </el-col>
|
||||
<el-col :span="5">
|
||||
<el-input
|
||||
v-model="mqtt_ip2"
|
||||
style="width: 43px; height: 30px"
|
||||
></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1">.</el-col>
|
||||
<el-col :span="5">
|
||||
<el-input
|
||||
v-model="mqtt_ip3"
|
||||
style="width: 43px; height: 30px"
|
||||
></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1">.</el-col>
|
||||
<el-col :span="5">
|
||||
<el-input
|
||||
v-model="mqtt_ip4"
|
||||
style="width: 43px; height: 30px"
|
||||
></el-input>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-form-item
|
||||
label="网关SN:"
|
||||
:label-width="formLabelWidth"
|
||||
prop="mqtt_wgsn"
|
||||
>
|
||||
<el-input
|
||||
v-model="mqtt_wgsn"
|
||||
placeholder=""
|
||||
style="width: 200px; height: 30px"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-form-item
|
||||
label="端口:"
|
||||
:label-width="formLabelWidth"
|
||||
prop="mqtt_port"
|
||||
>
|
||||
<el-input
|
||||
v-model="mqtt_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="Keep Alive(s):"
|
||||
:label-width="formLabelWidth"
|
||||
prop="mqtt_keepalive"
|
||||
>
|
||||
<el-input
|
||||
v-model="mqtt_keepalive"
|
||||
placeholder="64"
|
||||
style="width: 200px; height: 30px"
|
||||
></el-input>
|
||||
<div class="infos">2-60000</div>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item
|
||||
label="TLS加密:"
|
||||
:label-width="formLabelWidth"
|
||||
prop="mqtt_tls"
|
||||
>
|
||||
<el-switch v-model="mqtt_tls"></el-switch>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item
|
||||
label="清除Session:"
|
||||
:label-width="formLabelWidth"
|
||||
prop="mqtt_clearsession"
|
||||
>
|
||||
<el-switch v-model="mqtt_clearsession"></el-switch>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<h3 class="info_play">信息发布</h3>
|
||||
<el-divider></el-divider>
|
||||
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item
|
||||
label="Qos(MQTT):"
|
||||
:label-width="formLabelWidth"
|
||||
prop="upload_week"
|
||||
>
|
||||
<el-select
|
||||
v-model="mqtt_qos"
|
||||
placeholder="请选择"
|
||||
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-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<!-- <el-col :span="12">
|
||||
<el-form-item label="retained:" :label-width="formLabelWidth" prop="retained">
|
||||
<el-switch v-model="value1"></el-switch>
|
||||
</el-form-item>
|
||||
</el-col> -->
|
||||
</el-row>
|
||||
<!-- <el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="入口函数:" :label-width="formLabelWidth" prop="upload_week">
|
||||
<el-input v-model="input1" placeholder="64" style="width: 200px;height:30px"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row> -->
|
||||
<!-- <el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="函数代码:" :label-width="formLabelWidth" prop="upload_week">
|
||||
<prism-editor class="my-editor height-300" v-model="code" :highlight="highlighter"
|
||||
:line-numbers="lineNumbers"></prism-editor>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row> -->
|
||||
<div class="con_left_footer">
|
||||
<el-button type="primary" @click="add_passage = false"
|
||||
>保 存</el-button
|
||||
>
|
||||
<el-button @click="add_passage = false">取 消</el-button>
|
||||
</div>
|
||||
</el-form>
|
||||
</div>
|
||||
<div>
|
||||
<div class="con_right">
|
||||
<el-menu
|
||||
class="el-menu-demo"
|
||||
mode="horizontal"
|
||||
@select="handleSelect"
|
||||
>
|
||||
<el-menu-item index="1">添加</el-menu-item>
|
||||
<el-menu-item index="2">保存</el-menu-item>
|
||||
<el-menu-item index="3">删除</el-menu-item>
|
||||
</el-menu>
|
||||
</div>
|
||||
<el-table ref="singleTable" :data="tableData" style="width: 100%">
|
||||
<el-table-column type="index"> </el-table-column>
|
||||
<el-table-column property="mqtt_cjd_sbmc" label="设备名称">
|
||||
<template slot-scope="scope">
|
||||
<el-select v-model="scope.row.mqtt_cjd_sbmc" placeholder="">
|
||||
<el-option v-for="" :key=""></el-option>
|
||||
</el-select>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column property="mqtt_cjd_tagid" label="TagID">
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 添加按钮下显示出来的弹框信息 -->
|
||||
<div>
|
||||
<el-dialog title="选择点" :visible.sync="choose_point" width="30%">
|
||||
<el-tree
|
||||
:data="points"
|
||||
show-checkbox
|
||||
node-key="id"
|
||||
:default-expanded-keys="[1, 2]"
|
||||
:default-checked-keys="[3, 4, 5, 6]"
|
||||
:props="defaultProps"
|
||||
>
|
||||
</el-tree>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="savePoint"
|
||||
>保 存</el-button
|
||||
>
|
||||
<el-button @click="choose_point = false">取 消</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { PrismEditor } from "vue-prism-editor";
|
||||
import "vue-prism-editor/dist/prismeditor.min.css"; // import the styles somewhere
|
||||
// import highlighting library (you can use any library you want just return html string)
|
||||
import { highlight, languages } from "prismjs/components/prism-core";
|
||||
import "prismjs/components/prism-clike";
|
||||
import "prismjs/components/prism-javascript";
|
||||
import "prismjs/themes/prism-tomorrow.css"; // import syntax highlighting styles
|
||||
|
||||
export default {
|
||||
name: "ChiClone",
|
||||
components: {
|
||||
PrismEditor,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
mqtt_qiyong: true,
|
||||
mqtt_ip: "",
|
||||
mqtt_ip1: "",
|
||||
mqtt_ip2: "",
|
||||
mqtt_ip3: "",
|
||||
mqtt_ip4: "",
|
||||
mqtt_wgsn: "",
|
||||
mqtt_port: "",
|
||||
mqtt_keepalive: "",
|
||||
mqtt_tls: false,
|
||||
mqtt_clearsession: false,
|
||||
// mqtt_sssjfbzt:"",
|
||||
mqtt_qos: "0",
|
||||
// code: 'console.log("Hello World")',
|
||||
// lineNumbers: true, // true为编辑模式， false只展示不可编辑
|
||||
points: [
|
||||
{
|
||||
id: 1,
|
||||
label: "Device1",
|
||||
children: [
|
||||
{
|
||||
id: 3,
|
||||
label: "tag0001",
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
label: "tag0002",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
label: "Device1",
|
||||
children: [
|
||||
{
|
||||
id: 5,
|
||||
label: "tag0003",
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
label: "tag0004",
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
choose_point: false,
|
||||
options1: [
|
||||
{
|
||||
value: "0",
|
||||
label: "0",
|
||||
},
|
||||
{
|
||||
value: "1",
|
||||
label: "1",
|
||||
},
|
||||
{
|
||||
value: "2",
|
||||
label: "2",
|
||||
},
|
||||
],
|
||||
labelPosition: "left",
|
||||
formLabelWidth: "114px",
|
||||
input1: 192,
|
||||
add_passage: false,
|
||||
rightMenu: "",
|
||||
dialogVisible: true,
|
||||
isAdd: false,
|
||||
datas: [
|
||||
{
|
||||
label: "Gateway",
|
||||
children: [
|
||||
{
|
||||
label: "数据采集",
|
||||
children: [
|
||||
{
|
||||
label: "I/O点",
|
||||
},
|
||||
{
|
||||
label: "用户点",
|
||||
},
|
||||
{
|
||||
label: "计算点",
|
||||
},
|
||||
{
|
||||
label: "系统点",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "上云服务",
|
||||
children: [
|
||||
{
|
||||
label: "标准 MQTT",
|
||||
},
|
||||
{
|
||||
label: "AWS loT",
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
defaultProps: {
|
||||
children: "children",
|
||||
label: "label",
|
||||
},
|
||||
tableData: [
|
||||
{
|
||||
mqtt_cjd_sbmc: "Device1",
|
||||
mqtt_cjd_tagid: "Device1.tag0001",
|
||||
},
|
||||
],
|
||||
rules: {
|
||||
server_ip: [
|
||||
{ required: true, message: "请输入服务器IP", trigger: "blur" },
|
||||
],
|
||||
port_number: [
|
||||
{ required: true, message: "请输入端口", trigger: "blur" },
|
||||
],
|
||||
gateway_id: [
|
||||
{ required: true, message: "请输入网关ID", trigger: "blur" },
|
||||
],
|
||||
data_theme: [
|
||||
{ required: true, message: "请输入主题", trigger: "blur" },
|
||||
],
|
||||
upload_mode: [
|
||||
{ required: true, message: "请输入上传模式", trigger: "blur" },
|
||||
],
|
||||
upload_week: [
|
||||
{ required: true, message: "请输入上传周期", trigger: "blur" },
|
||||
],
|
||||
data_filter: [
|
||||
{ required: true, message: "请输入数据过滤", trigger: "blur" },
|
||||
],
|
||||
},
|
||||
};
|
||||
},
|
||||
mounted() {},
|
||||
methods: {
|
||||
treeNodeClick() {
|
||||
this.add_passage = true;
|
||||
},
|
||||
getDriveName() {
|
||||
this.diag_drive = true;
|
||||
},
|
||||
handleSelect(key) {
|
||||
console.log(key);
|
||||
if (key == 1 && this.isAdd == false) {
|
||||
this.choose_point = true;
|
||||
} else if (key == 1 && this.isAdd == true) {
|
||||
this.$message({
|
||||
message: '添加失败,只能添加一条数据',
|
||||
type: 'error'
|
||||
});
|
||||
return false
|
||||
}
|
||||
},
|
||||
highlighter(code) {
|
||||
return highlight(code, languages.js); //returns html
|
||||
},
|
||||
closeMenu(ev) {
|
||||
console.log({ ev });
|
||||
this.dialogVisible = false;
|
||||
},
|
||||
savePoint() {
|
||||
this.choose_point = false;
|
||||
this.isAdd = true;
|
||||
this.$message({
|
||||
message: '添加成功',
|
||||
type: 'success'
|
||||
});
|
||||
},
|
||||
},
|
||||
directives: {
|
||||
"click-outside": {
|
||||
bind: function (el, binding, vnode) {
|
||||
console.log("el", el);
|
||||
console.log("binding", binding);
|
||||
el.event = function (event) {
|
||||
// 检查点击是否发生在节点之内（包括子节点）
|
||||
if (!(el == event.target || el.contains(event.target))) {
|
||||
// 如果没有，则触发调用
|
||||
// 若绑定值为函数，则执行
|
||||
// 这里我们可以通过钩子函数中的 vnode.context，来获取当前组件的作用域
|
||||
if (typeof vnode.context[binding.expression] == "function") {
|
||||
vnode.context[binding.expression](event);
|
||||
}
|
||||
}
|
||||
};
|
||||
// 绑定事件
|
||||
// 设置为true，代表在DOM树中，注册了该listener的元素，会先于它下方的任何事件目标，接收到该事件。
|
||||
document.body.addEventListener("click", el.event, true);
|
||||
},
|
||||
unbind: function (el) {
|
||||
// 解绑事件
|
||||
document.body.removeEventListener("click", el.event, true);
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.tree_menu {
|
||||
position: absolute;
|
||||
width: 286px;
|
||||
height: 753px;
|
||||
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);
|
||||
}
|
||||
|
||||
/deep/ .pas_params {
|
||||
.info_play {
|
||||
width: 56px;
|
||||
height: 20px;
|
||||
color: rgba(16, 16, 16, 1);
|
||||
font-size: 14px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.el-divider--horizontal {
|
||||
margin: 8px 0;
|
||||
}
|
||||
|
||||
.el-button {
|
||||
width: 80px;
|
||||
height: 30px;
|
||||
line-height: 0.5;
|
||||
}
|
||||
|
||||
.el-col-12:last-child {
|
||||
padding-right: 150px;
|
||||
}
|
||||
|
||||
.el-col-12:first-child {
|
||||
padding-right: 28px;
|
||||
}
|
||||
|
||||
.el-row {
|
||||
height: 40px;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
|
||||
.el-col-1 {
|
||||
text-align: center;
|
||||
line-height: 52px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.el-col-9 {
|
||||
padding-left: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.el-input__inner {
|
||||
height: 30px;
|
||||
text-align: left;
|
||||
padding: 0px 8px;
|
||||
}
|
||||
|
||||
.content {
|
||||
position: absolute;
|
||||
left: 362px;
|
||||
top: 104px;
|
||||
width: 1220px;
|
||||
height: 836px;
|
||||
line-height: 20px;
|
||||
padding-left: 36px;
|
||||
background-color: rgba(255, 255, 255, 1);
|
||||
color: rgba(16, 16, 16, 1);
|
||||
font-size: 14px;
|
||||
border: 1px solid rgba(187, 187, 187, 1);
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
|
||||
.el-form-item {
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
/deep/ .con_left {
|
||||
.el-con-5 {
|
||||
width: 43px;
|
||||
}
|
||||
}
|
||||
|
||||
.con_left {
|
||||
width: 709px;
|
||||
position: relative;
|
||||
|
||||
.my-editor {
|
||||
background: #2d2d2d;
|
||||
color: #ccc;
|
||||
|
||||
font-family: Fira code, Fira Mono, Consolas, Menlo, Courier, monospace;
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
/* optional */
|
||||
.prism-editor__textarea:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
/* not required: */
|
||||
.height-300 {
|
||||
width: 491px;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.infos {
|
||||
width: 60px;
|
||||
position: absolute;
|
||||
left: 208px;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.con_left_footer {
|
||||
position: absolute;
|
||||
left: 499px;
|
||||
top: 720px;
|
||||
}
|
||||
}
|
||||
|
||||
.con_right {
|
||||
width: 480px;
|
||||
|
||||
.dialog-footer {
|
||||
.el-button {
|
||||
width: 80px;
|
||||
height: 30px;
|
||||
line-height: 0.5;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
@ -0,0 +1,621 @@
|
|||
<!-- 斥候MQTT云 -->
|
||||
<template>
|
||||
<div class="Clone">
|
||||
<!-- 设置树形控件 -->
|
||||
<div v-click-outside="closeMenu">
|
||||
<!-- <el-button type="info" plain @click="dialogVisible = true">斥侯MQTT云</el-button> -->
|
||||
<div v-show="dialogVisible" class="tree_menu">
|
||||
<el-tree
|
||||
:data="datas"
|
||||
:props="defaultProps"
|
||||
@node-click="treeNodeClick"
|
||||
></el-tree>
|
||||
<!-- 树形控件右键组件 -->
|
||||
</div>
|
||||
</div>
|
||||
<div class="pas_params" v-show="add_passage">
|
||||
<div class="content">
|
||||
<div class="con_left">
|
||||
<el-form
|
||||
:label-position="labelPosition"
|
||||
:rules="rules"
|
||||
ref="ruleForm"
|
||||
>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-form-item>
|
||||
<el-checkbox v-model="mqtt_qiyong">启用</el-checkbox>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item
|
||||
label="服务器IP:"
|
||||
:label-width="formLabelWidth"
|
||||
prop="mqtt_ip"
|
||||
>
|
||||
<el-row>
|
||||
<el-col :span="5">
|
||||
<el-input
|
||||
v-model="mqtt_ip1"
|
||||
style="width: 43px; height: 30px"
|
||||
></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1">. </el-col>
|
||||
<el-col :span="5">
|
||||
<el-input
|
||||
v-model="mqtt_ip2"
|
||||
style="width: 43px; height: 30px"
|
||||
></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1">.</el-col>
|
||||
<el-col :span="5">
|
||||
<el-input
|
||||
v-model="mqtt_ip3"
|
||||
style="width: 43px; height: 30px"
|
||||
></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1">.</el-col>
|
||||
<el-col :span="5">
|
||||
<el-input
|
||||
v-model="mqtt_ip4"
|
||||
style="width: 43px; height: 30px"
|
||||
></el-input>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-form-item
|
||||
label="网关SN:"
|
||||
:label-width="formLabelWidth"
|
||||
prop="mqtt_wgsn"
|
||||
>
|
||||
<el-input
|
||||
v-model="mqtt_wgsn"
|
||||
placeholder=""
|
||||
style="width: 200px; height: 30px"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-form-item
|
||||
label="端口:"
|
||||
:label-width="formLabelWidth"
|
||||
prop="mqtt_port"
|
||||
>
|
||||
<el-input
|
||||
v-model="mqtt_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="Keep Alive(s):"
|
||||
:label-width="formLabelWidth"
|
||||
prop="mqtt_keepalive"
|
||||
>
|
||||
<el-input
|
||||
v-model="mqtt_keepalive"
|
||||
placeholder="64"
|
||||
style="width: 200px; height: 30px"
|
||||
></el-input>
|
||||
<div class="infos">2-60000</div>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item
|
||||
label="TLS加密:"
|
||||
:label-width="formLabelWidth"
|
||||
prop="mqtt_tls"
|
||||
>
|
||||
<el-switch v-model="mqtt_tls"></el-switch>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item
|
||||
label="清除Session:"
|
||||
:label-width="formLabelWidth"
|
||||
prop="mqtt_clearsession"
|
||||
>
|
||||
<el-switch v-model="mqtt_clearsession"></el-switch>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<h3 class="info_play">信息发布</h3>
|
||||
<el-divider></el-divider>
|
||||
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item
|
||||
label="Qos(MQTT):"
|
||||
:label-width="formLabelWidth"
|
||||
prop="upload_week"
|
||||
>
|
||||
<el-select
|
||||
v-model="mqtt_qos"
|
||||
placeholder="请选择"
|
||||
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-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<!-- <el-col :span="12">
|
||||
<el-form-item label="retained:" :label-width="formLabelWidth" prop="retained">
|
||||
<el-switch v-model="value1"></el-switch>
|
||||
</el-form-item>
|
||||
</el-col> -->
|
||||
</el-row>
|
||||
<!-- <el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="入口函数:" :label-width="formLabelWidth" prop="upload_week">
|
||||
<el-input v-model="input1" placeholder="64" style="width: 200px;height:30px"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row> -->
|
||||
<!-- <el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="函数代码:" :label-width="formLabelWidth" prop="upload_week">
|
||||
<prism-editor class="my-editor height-300" v-model="code" :highlight="highlighter"
|
||||
:line-numbers="lineNumbers"></prism-editor>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row> -->
|
||||
<div class="con_left_footer">
|
||||
<el-button type="primary" @click="add_passage = false"
|
||||
>保 存</el-button
|
||||
>
|
||||
<el-button @click="add_passage = false">取 消</el-button>
|
||||
</div>
|
||||
</el-form>
|
||||
</div>
|
||||
<div>
|
||||
<div class="con_right">
|
||||
<el-menu
|
||||
class="el-menu-demo"
|
||||
mode="horizontal"
|
||||
@select="handleSelect"
|
||||
>
|
||||
<el-menu-item index="1">添加</el-menu-item>
|
||||
<el-menu-item index="2">保存</el-menu-item>
|
||||
<el-menu-item index="3">删除</el-menu-item>
|
||||
</el-menu>
|
||||
</div>
|
||||
<el-table ref="singleTable" :data="tableData" style="width: 100%">
|
||||
<el-table-column type="index"> </el-table-column>
|
||||
<el-table-column property="mqtt_cjd_sbmc" label="设备名称">
|
||||
<template slot-scope="scope">
|
||||
<el-select v-model="scope.row.mqtt_cjd_sbmc" placeholder="">
|
||||
<el-option v-for="" :key=""></el-option>
|
||||
</el-select>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column property="mqtt_cjd_tagid" label="TagID">
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 添加按钮下显示出来的弹框信息 -->
|
||||
<div>
|
||||
<el-dialog title="选择点" :visible.sync="choose_point" width="30%">
|
||||
<el-tree
|
||||
:data="points"
|
||||
show-checkbox
|
||||
node-key="id"
|
||||
:default-expanded-keys="[1, 2]"
|
||||
:default-checked-keys="[3, 4, 5, 6]"
|
||||
:props="defaultProps"
|
||||
>
|
||||
</el-tree>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="savePoint"
|
||||
>保 存</el-button
|
||||
>
|
||||
<el-button @click="choose_point = false">取 消</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { PrismEditor } from "vue-prism-editor";
|
||||
import "vue-prism-editor/dist/prismeditor.min.css"; // import the styles somewhere
|
||||
// import highlighting library (you can use any library you want just return html string)
|
||||
import { highlight, languages } from "prismjs/components/prism-core";
|
||||
import "prismjs/components/prism-clike";
|
||||
import "prismjs/components/prism-javascript";
|
||||
import "prismjs/themes/prism-tomorrow.css"; // import syntax highlighting styles
|
||||
|
||||
export default {
|
||||
name: "ChiClone",
|
||||
components: {
|
||||
PrismEditor,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
mqtt_qiyong: true,
|
||||
mqtt_ip: "",
|
||||
mqtt_ip1: "",
|
||||
mqtt_ip2: "",
|
||||
mqtt_ip3: "",
|
||||
mqtt_ip4: "",
|
||||
mqtt_wgsn: "",
|
||||
mqtt_port: "",
|
||||
mqtt_keepalive: "",
|
||||
mqtt_tls: false,
|
||||
mqtt_clearsession: false,
|
||||
// mqtt_sssjfbzt:"",
|
||||
mqtt_qos: "0",
|
||||
// code: 'console.log("Hello World")',
|
||||
// lineNumbers: true, // true为编辑模式， false只展示不可编辑
|
||||
points: [
|
||||
{
|
||||
id: 1,
|
||||
label: "Device1",
|
||||
children: [
|
||||
{
|
||||
id: 3,
|
||||
label: "tag0001",
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
label: "tag0002",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
label: "Device1",
|
||||
children: [
|
||||
{
|
||||
id: 5,
|
||||
label: "tag0003",
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
label: "tag0004",
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
choose_point: false,
|
||||
options1: [
|
||||
{
|
||||
value: "0",
|
||||
label: "0",
|
||||
},
|
||||
{
|
||||
value: "1",
|
||||
label: "1",
|
||||
},
|
||||
{
|
||||
value: "2",
|
||||
label: "2",
|
||||
},
|
||||
],
|
||||
labelPosition: "left",
|
||||
formLabelWidth: "114px",
|
||||
input1: 192,
|
||||
add_passage: false,
|
||||
rightMenu: "",
|
||||
dialogVisible: true,
|
||||
isAdd: false,
|
||||
datas: [
|
||||
{
|
||||
label: "Gateway",
|
||||
children: [
|
||||
{
|
||||
label: "数据采集",
|
||||
children: [
|
||||
{
|
||||
label: "I/O点",
|
||||
},
|
||||
{
|
||||
label: "用户点",
|
||||
},
|
||||
{
|
||||
label: "计算点",
|
||||
},
|
||||
{
|
||||
label: "系统点",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "上云服务",
|
||||
children: [
|
||||
{
|
||||
label: "标准 MQTT",
|
||||
},
|
||||
{
|
||||
label: "AWS loT",
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
defaultProps: {
|
||||
children: "children",
|
||||
label: "label",
|
||||
},
|
||||
// 右边添加设备的字段
|
||||
options2:[
|
||||
{
|
||||
label:"有线区精雕1",
|
||||
value:"无线区精雕1",
|
||||
},
|
||||
{
|
||||
|
||||
}
|
||||
],
|
||||
options3:[],
|
||||
tableData: [
|
||||
{
|
||||
mqtt_cjd_sbmc: "Device1",
|
||||
mqtt_cjd_tagid: "Device1.tag0001",
|
||||
},
|
||||
],
|
||||
rules: {
|
||||
server_ip: [
|
||||
{ required: true, message: "请输入服务器IP", trigger: "blur" },
|
||||
],
|
||||
port_number: [
|
||||
{ required: true, message: "请输入端口", trigger: "blur" },
|
||||
],
|
||||
gateway_id: [
|
||||
{ required: true, message: "请输入网关ID", trigger: "blur" },
|
||||
],
|
||||
data_theme: [
|
||||
{ required: true, message: "请输入主题", trigger: "blur" },
|
||||
],
|
||||
upload_mode: [
|
||||
{ required: true, message: "请输入上传模式", trigger: "blur" },
|
||||
],
|
||||
upload_week: [
|
||||
{ required: true, message: "请输入上传周期", trigger: "blur" },
|
||||
],
|
||||
data_filter: [
|
||||
{ required: true, message: "请输入数据过滤", trigger: "blur" },
|
||||
],
|
||||
},
|
||||
};
|
||||
},
|
||||
mounted() {},
|
||||
methods: {
|
||||
treeNodeClick() {
|
||||
this.add_passage = true;
|
||||
},
|
||||
getDriveName() {
|
||||
this.diag_drive = true;
|
||||
},
|
||||
handleSelect(key) {
|
||||
console.log(key);
|
||||
if (key == 1 && this.isAdd == false) {
|
||||
this.choose_point = true;
|
||||
} else if (key == 1 && this.isAdd == true) {
|
||||
this.$message({
|
||||
message: '添加失败,只能添加一条数据',
|
||||
type: 'error'
|
||||
});
|
||||
return false
|
||||
}
|
||||
},
|
||||
highlighter(code) {
|
||||
return highlight(code, languages.js); //returns html
|
||||
},
|
||||
closeMenu(ev) {
|
||||
console.log({ ev });
|
||||
this.dialogVisible = false;
|
||||
},
|
||||
savePoint() {
|
||||
this.choose_point = false;
|
||||
this.isAdd = true;
|
||||
this.$message({
|
||||
message: '添加成功',
|
||||
type: 'success'
|
||||
});
|
||||
},
|
||||
},
|
||||
directives: {
|
||||
"click-outside": {
|
||||
bind: function (el, binding, vnode) {
|
||||
console.log("el", el);
|
||||
console.log("binding", binding);
|
||||
el.event = function (event) {
|
||||
// 检查点击是否发生在节点之内（包括子节点）
|
||||
if (!(el == event.target || el.contains(event.target))) {
|
||||
// 如果没有，则触发调用
|
||||
// 若绑定值为函数，则执行
|
||||
// 这里我们可以通过钩子函数中的 vnode.context，来获取当前组件的作用域
|
||||
if (typeof vnode.context[binding.expression] == "function") {
|
||||
vnode.context[binding.expression](event);
|
||||
}
|
||||
}
|
||||
};
|
||||
// 绑定事件
|
||||
// 设置为true，代表在DOM树中，注册了该listener的元素，会先于它下方的任何事件目标，接收到该事件。
|
||||
document.body.addEventListener("click", el.event, true);
|
||||
},
|
||||
unbind: function (el) {
|
||||
// 解绑事件
|
||||
document.body.removeEventListener("click", el.event, true);
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.tree_menu {
|
||||
position: absolute;
|
||||
width: 286px;
|
||||
height: 753px;
|
||||
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);
|
||||
}
|
||||
|
||||
/deep/ .pas_params {
|
||||
.info_play {
|
||||
width: 56px;
|
||||
height: 20px;
|
||||
color: rgba(16, 16, 16, 1);
|
||||
font-size: 14px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.el-divider--horizontal {
|
||||
margin: 8px 0;
|
||||
}
|
||||
|
||||
.el-button {
|
||||
width: 80px;
|
||||
height: 30px;
|
||||
line-height: 0.5;
|
||||
}
|
||||
|
||||
.el-col-12:last-child {
|
||||
padding-right: 150px;
|
||||
}
|
||||
|
||||
.el-col-12:first-child {
|
||||
padding-right: 28px;
|
||||
}
|
||||
|
||||
.el-row {
|
||||
height: 40px;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
|
||||
.el-col-1 {
|
||||
text-align: center;
|
||||
line-height: 52px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.el-col-9 {
|
||||
padding-left: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.el-input__inner {
|
||||
height: 30px;
|
||||
text-align: left;
|
||||
padding: 0px 8px;
|
||||
}
|
||||
|
||||
.content {
|
||||
position: absolute;
|
||||
left: 362px;
|
||||
top: 104px;
|
||||
width: 1220px;
|
||||
height: 836px;
|
||||
line-height: 20px;
|
||||
padding-left: 36px;
|
||||
background-color: rgba(255, 255, 255, 1);
|
||||
color: rgba(16, 16, 16, 1);
|
||||
font-size: 14px;
|
||||
border: 1px solid rgba(187, 187, 187, 1);
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
|
||||
.el-form-item {
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
/deep/ .con_left {
|
||||
.el-con-5 {
|
||||
width: 43px;
|
||||
}
|
||||
}
|
||||
|
||||
.con_left {
|
||||
width: 709px;
|
||||
position: relative;
|
||||
|
||||
.my-editor {
|
||||
background: #2d2d2d;
|
||||
color: #ccc;
|
||||
|
||||
font-family: Fira code, Fira Mono, Consolas, Menlo, Courier, monospace;
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
/* optional */
|
||||
.prism-editor__textarea:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
/* not required: */
|
||||
.height-300 {
|
||||
width: 491px;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.infos {
|
||||
width: 60px;
|
||||
position: absolute;
|
||||
left: 208px;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.con_left_footer {
|
||||
position: absolute;
|
||||
left: 499px;
|
||||
top: 720px;
|
||||
}
|
||||
}
|
||||
|
||||
.con_right {
|
||||
width: 480px;
|
||||
|
||||
.dialog-footer {
|
||||
.el-button {
|
||||
width: 80px;
|
||||
height: 30px;
|
||||
line-height: 0.5;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
@ -0,0 +1,711 @@
|
|||
<!-- 斥候MQTT云 -->
|
||||
<template>
|
||||
<div class="Clone">
|
||||
<!-- 设置树形控件 -->
|
||||
<div v-click-outside="closeMenu">
|
||||
<!-- <el-button type="info" plain @click="dialogVisible = true">斥侯MQTT云</el-button> -->
|
||||
<div v-show="dialogVisible" class="tree_menu">
|
||||
<el-tree
|
||||
:data="datas"
|
||||
:props="defaultProps"
|
||||
@node-click="treeNodeClick"
|
||||
></el-tree>
|
||||
<!-- 树形控件右键组件 -->
|
||||
</div>
|
||||
</div>
|
||||
<div class="pas_params" v-show="add_passage">
|
||||
<div class="content">
|
||||
<div class="con_left">
|
||||
<el-form
|
||||
:label-position="labelPosition"
|
||||
:rules="rules"
|
||||
ref="ruleForm"
|
||||
>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-form-item>
|
||||
<el-checkbox v-model="mqtt_qiyong">启用</el-checkbox>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item
|
||||
label="服务器IP:"
|
||||
:label-width="formLabelWidth"
|
||||
prop="mqtt_ip"
|
||||
>
|
||||
<el-row>
|
||||
<el-col :span="5">
|
||||
<el-input
|
||||
v-model="mqtt_ip1"
|
||||
style="width: 43px; height: 30px"
|
||||
></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1">. </el-col>
|
||||
<el-col :span="5">
|
||||
<el-input
|
||||
v-model="mqtt_ip2"
|
||||
style="width: 43px; height: 30px"
|
||||
></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1">.</el-col>
|
||||
<el-col :span="5">
|
||||
<el-input
|
||||
v-model="mqtt_ip3"
|
||||
style="width: 43px; height: 30px"
|
||||
></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1">.</el-col>
|
||||
<el-col :span="5">
|
||||
<el-input
|
||||
v-model="mqtt_ip4"
|
||||
style="width: 43px; height: 30px"
|
||||
></el-input>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-form-item
|
||||
label="网关SN:"
|
||||
:label-width="formLabelWidth"
|
||||
prop="mqtt_wgsn"
|
||||
>
|
||||
<el-input
|
||||
v-model="mqtt_wgsn"
|
||||
placeholder=""
|
||||
style="width: 200px; height: 30px"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-form-item
|
||||
label="端口:"
|
||||
:label-width="formLabelWidth"
|
||||
prop="mqtt_port"
|
||||
>
|
||||
<el-input
|
||||
v-model="mqtt_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="Keep Alive(s):"
|
||||
:label-width="formLabelWidth"
|
||||
prop="mqtt_keepalive"
|
||||
>
|
||||
<el-input
|
||||
v-model="mqtt_keepalive"
|
||||
placeholder="64"
|
||||
style="width: 200px; height: 30px"
|
||||
></el-input>
|
||||
<div class="infos">2-60000</div>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item
|
||||
label="TLS加密:"
|
||||
:label-width="formLabelWidth"
|
||||
prop="mqtt_tls"
|
||||
>
|
||||
<el-switch v-model="mqtt_tls"></el-switch>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item
|
||||
label="清除Session:"
|
||||
:label-width="formLabelWidth"
|
||||
prop="mqtt_clearsession"
|
||||
>
|
||||
<el-switch v-model="mqtt_clearsession"></el-switch>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<h3 class="info_play">信息发布</h3>
|
||||
<el-divider></el-divider>
|
||||
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item
|
||||
label="Qos(MQTT):"
|
||||
:label-width="formLabelWidth"
|
||||
prop="upload_week"
|
||||
>
|
||||
<el-select
|
||||
v-model="mqtt_qos"
|
||||
placeholder="请选择"
|
||||
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-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<!-- <el-col :span="12">
|
||||
<el-form-item label="retained:" :label-width="formLabelWidth" prop="retained">
|
||||
<el-switch v-model="value1"></el-switch>
|
||||
</el-form-item>
|
||||
</el-col> -->
|
||||
</el-row>
|
||||
<!-- <el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="入口函数:" :label-width="formLabelWidth" prop="upload_week">
|
||||
<el-input v-model="input1" placeholder="64" style="width: 200px;height:30px"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row> -->
|
||||
<!-- <el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="函数代码:" :label-width="formLabelWidth" prop="upload_week">
|
||||
<prism-editor class="my-editor height-300" v-model="code" :highlight="highlighter"
|
||||
:line-numbers="lineNumbers"></prism-editor>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row> -->
|
||||
<div class="con_left_footer">
|
||||
<el-button type="primary" @click="add_passage = false"
|
||||
>保 存</el-button
|
||||
>
|
||||
<el-button @click="add_passage = false">取 消</el-button>
|
||||
</div>
|
||||
</el-form>
|
||||
</div>
|
||||
<div>
|
||||
<div class="con_right">
|
||||
<el-menu
|
||||
class="el-menu-demo"
|
||||
mode="horizontal"
|
||||
@select="handleSelect"
|
||||
>
|
||||
<el-menu-item index="1">添加</el-menu-item>
|
||||
<el-menu-item index="2">保存</el-menu-item>
|
||||
<el-menu-item index="3">删除</el-menu-item>
|
||||
</el-menu>
|
||||
</div>
|
||||
<el-table ref="singleTable" :data="tableData" style="width: 100%">
|
||||
<el-table-column type="index"> </el-table-column>
|
||||
<el-table-column property="mqtt_cjd_sbmc" label="设备名称">
|
||||
<template slot-scope="scope">
|
||||
<el-select v-model="scope.row.mqtt_cjd_sbmc" placeholder="">
|
||||
<el-option v-for="" :key=""></el-option>
|
||||
</el-select>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column property="mqtt_cjd_tagid" label="TagID">
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 添加按钮下显示出来的弹框信息 -->
|
||||
<div>
|
||||
<el-dialog title="选择点" :visible.sync="choose_point" width="30%">
|
||||
<el-tree
|
||||
:data="points"
|
||||
show-checkbox
|
||||
node-key="id"
|
||||
:default-expanded-keys="[1, 2]"
|
||||
:default-checked-keys="[3, 4, 5, 6]"
|
||||
:props="defaultProps"
|
||||
>
|
||||
</el-tree>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="savePoint"
|
||||
>保 存</el-button
|
||||
>
|
||||
<el-button @click="choose_point = false">取 消</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { PrismEditor } from "vue-prism-editor";
|
||||
import "vue-prism-editor/dist/prismeditor.min.css"; // import the styles somewhere
|
||||
// import highlighting library (you can use any library you want just return html string)
|
||||
import { highlight, languages } from "prismjs/components/prism-core";
|
||||
import "prismjs/components/prism-clike";
|
||||
import "prismjs/components/prism-javascript";
|
||||
import "prismjs/themes/prism-tomorrow.css"; // import syntax highlighting styles
|
||||
|
||||
export default {
|
||||
name: "ChiClone",
|
||||
components: {
|
||||
PrismEditor,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
mqtt_qiyong: true,
|
||||
mqtt_ip: "",
|
||||
mqtt_ip1: "",
|
||||
mqtt_ip2: "",
|
||||
mqtt_ip3: "",
|
||||
mqtt_ip4: "",
|
||||
mqtt_wgsn: "",
|
||||
mqtt_port: "",
|
||||
mqtt_keepalive: "",
|
||||
mqtt_tls: false,
|
||||
mqtt_clearsession: false,
|
||||
// mqtt_sssjfbzt:"",
|
||||
mqtt_qos: "0",
|
||||
// code: 'console.log("Hello World")',
|
||||
// lineNumbers: true, // true为编辑模式， false只展示不可编辑
|
||||
points: [
|
||||
{
|
||||
id: 1,
|
||||
label: "Device1",
|
||||
children: [
|
||||
{
|
||||
id: 3,
|
||||
label: "tag0001",
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
label: "tag0002",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
label: "Device1",
|
||||
children: [
|
||||
{
|
||||
id: 5,
|
||||
label: "tag0003",
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
label: "tag0004",
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
choose_point: false,
|
||||
options1: [
|
||||
{
|
||||
value: "0",
|
||||
label: "0",
|
||||
},
|
||||
{
|
||||
value: "1",
|
||||
label: "1",
|
||||
},
|
||||
{
|
||||
value: "2",
|
||||
label: "2",
|
||||
},
|
||||
],
|
||||
labelPosition: "left",
|
||||
formLabelWidth: "114px",
|
||||
input1: 192,
|
||||
add_passage: false,
|
||||
rightMenu: "",
|
||||
dialogVisible: true,
|
||||
isAdd: false,
|
||||
datas: [
|
||||
{
|
||||
label: "Gateway",
|
||||
children: [
|
||||
{
|
||||
label: "数据采集",
|
||||
children: [
|
||||
{
|
||||
label: "I/O点",
|
||||
},
|
||||
{
|
||||
label: "用户点",
|
||||
},
|
||||
{
|
||||
label: "计算点",
|
||||
},
|
||||
{
|
||||
label: "系统点",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "上云服务",
|
||||
children: [
|
||||
{
|
||||
label: "标准 MQTT",
|
||||
},
|
||||
{
|
||||
label: "AWS loT",
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
defaultProps: {
|
||||
children: "children",
|
||||
label: "label",
|
||||
},
|
||||
// 右边添加设备的字段
|
||||
options2:[
|
||||
{
|
||||
label:"有线区精雕1",
|
||||
value:"无线区精雕1",
|
||||
},
|
||||
{
|
||||
|
||||
}
|
||||
],
|
||||
options3: [{
|
||||
value: "MachinePamHID909",
|
||||
label: "MachinePamHID909",
|
||||
}, {
|
||||
value: "MachinePamHID910",
|
||||
label: "MachinePamHID910",
|
||||
}, {
|
||||
value: "MachinePamHID911",
|
||||
label: "MachinePamHID911",
|
||||
}, {
|
||||
value: "MachinePamHID912",
|
||||
label: "MachinePamHID912",
|
||||
}, {
|
||||
value: "MachinePamHID913",
|
||||
label: "MachinePamHID913",
|
||||
}, {
|
||||
value: "MachinePamHID914",
|
||||
label: "MachinePamHID914",
|
||||
}, {
|
||||
value: "MachinePamHID915",
|
||||
label: "MachinePamHID915",
|
||||
}, {
|
||||
value: "MachinePamHID916",
|
||||
label: "MachinePamHID916",
|
||||
}, {
|
||||
value: "MachinePamHID917",
|
||||
label: "MachinePamHID917",
|
||||
}, {
|
||||
value: "MachinePamHID918",
|
||||
label: "MachinePamHID918",
|
||||
}, {
|
||||
value: "MachinePamHID919",
|
||||
label: "MachinePamHID919",
|
||||
}, {
|
||||
value: "MachinePamHID920",
|
||||
label: "MachinePamHID920",
|
||||
}, {
|
||||
value: "MachinePamHID921",
|
||||
label: "MachinePamHID921",
|
||||
}, {
|
||||
value: "MachinePamHID922",
|
||||
label: "MachinePamHID922",
|
||||
}, {
|
||||
value: "MachinePamHID923",
|
||||
label: "MachinePamHID923",
|
||||
}, {
|
||||
value: "MachinePamHID924",
|
||||
label: "MachinePamHID924",
|
||||
}, {
|
||||
value: "MachinePamHID925",
|
||||
label: "MachinePamHID925",
|
||||
}, {
|
||||
value: "MachinePamHID926",
|
||||
label: "MachinePamHID926",
|
||||
}, {
|
||||
value: "MachinePamHID927",
|
||||
label: "MachinePamHID927",
|
||||
}, {
|
||||
value: "MachinePamHID928",
|
||||
label: "MachinePamHID928",
|
||||
}, {
|
||||
value: "MachinePamHID929",
|
||||
label: "MachinePamHID929",
|
||||
}, {
|
||||
value: "MachinePamHID930",
|
||||
label: "MachinePamHID930",
|
||||
}, {
|
||||
value: "MachinePamHID931",
|
||||
label: "MachinePamHID931",
|
||||
}, {
|
||||
value: "MachinePamHID932",
|
||||
label: "MachinePamHID932",
|
||||
}, {
|
||||
value: "MachinePamHID933",
|
||||
label: "MachinePamHID933",
|
||||
}, {
|
||||
value: "MachinePamHID934",
|
||||
label: "MachinePamHID934",
|
||||
}, {
|
||||
value: "MachinePamHID935",
|
||||
label: "MachinePamHID935",
|
||||
}, {
|
||||
value: "MachinePamHID936",
|
||||
label: "MachinePamHID936",
|
||||
}, {
|
||||
value: "MachinePamHID937",
|
||||
label: "MachinePamHID937",
|
||||
}, {
|
||||
value: "MachinePamHID938",
|
||||
label: "MachinePamHID938",
|
||||
}],
|
||||
tableData: [
|
||||
{
|
||||
mqtt_cjd_sbmc: "Device1",
|
||||
mqtt_cjd_tagid: "Device1.tag0001",
|
||||
},
|
||||
],
|
||||
rules: {
|
||||
server_ip: [
|
||||
{ required: true, message: "请输入服务器IP", trigger: "blur" },
|
||||
],
|
||||
port_number: [
|
||||
{ required: true, message: "请输入端口", trigger: "blur" },
|
||||
],
|
||||
gateway_id: [
|
||||
{ required: true, message: "请输入网关ID", trigger: "blur" },
|
||||
],
|
||||
data_theme: [
|
||||
{ required: true, message: "请输入主题", trigger: "blur" },
|
||||
],
|
||||
upload_mode: [
|
||||
{ required: true, message: "请输入上传模式", trigger: "blur" },
|
||||
],
|
||||
upload_week: [
|
||||
{ required: true, message: "请输入上传周期", trigger: "blur" },
|
||||
],
|
||||
data_filter: [
|
||||
{ required: true, message: "请输入数据过滤", trigger: "blur" },
|
||||
],
|
||||
},
|
||||
};
|
||||
},
|
||||
mounted() {},
|
||||
methods: {
|
||||
treeNodeClick() {
|
||||
this.add_passage = true;
|
||||
},
|
||||
getDriveName() {
|
||||
this.diag_drive = true;
|
||||
},
|
||||
handleSelect(key) {
|
||||
console.log(key);
|
||||
if (key == 1 && this.isAdd == false) {
|
||||
this.choose_point = true;
|
||||
} else if (key == 1 && this.isAdd == true) {
|
||||
this.$message({
|
||||
message: '添加失败,只能添加一条数据',
|
||||
type: 'error'
|
||||
});
|
||||
return false
|
||||
}
|
||||
},
|
||||
highlighter(code) {
|
||||
return highlight(code, languages.js); //returns html
|
||||
},
|
||||
closeMenu(ev) {
|
||||
console.log({ ev });
|
||||
this.dialogVisible = false;
|
||||
},
|
||||
savePoint() {
|
||||
this.choose_point = false;
|
||||
this.isAdd = true;
|
||||
this.$message({
|
||||
message: '添加成功',
|
||||
type: 'success'
|
||||
});
|
||||
},
|
||||
},
|
||||
directives: {
|
||||
"click-outside": {
|
||||
bind: function (el, binding, vnode) {
|
||||
console.log("el", el);
|
||||
console.log("binding", binding);
|
||||
el.event = function (event) {
|
||||
// 检查点击是否发生在节点之内（包括子节点）
|
||||
if (!(el == event.target || el.contains(event.target))) {
|
||||
// 如果没有，则触发调用
|
||||
// 若绑定值为函数，则执行
|
||||
// 这里我们可以通过钩子函数中的 vnode.context，来获取当前组件的作用域
|
||||
if (typeof vnode.context[binding.expression] == "function") {
|
||||
vnode.context[binding.expression](event);
|
||||
}
|
||||
}
|
||||
};
|
||||
// 绑定事件
|
||||
// 设置为true，代表在DOM树中，注册了该listener的元素，会先于它下方的任何事件目标，接收到该事件。
|
||||
document.body.addEventListener("click", el.event, true);
|
||||
},
|
||||
unbind: function (el) {
|
||||
// 解绑事件
|
||||
document.body.removeEventListener("click", el.event, true);
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.tree_menu {
|
||||
position: absolute;
|
||||
width: 286px;
|
||||
height: 753px;
|
||||
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);
|
||||
}
|
||||
|
||||
/deep/ .pas_params {
|
||||
.info_play {
|
||||
width: 56px;
|
||||
height: 20px;
|
||||
color: rgba(16, 16, 16, 1);
|
||||
font-size: 14px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.el-divider--horizontal {
|
||||
margin: 8px 0;
|
||||
}
|
||||
|
||||
.el-button {
|
||||
width: 80px;
|
||||
height: 30px;
|
||||
line-height: 0.5;
|
||||
}
|
||||
|
||||
.el-col-12:last-child {
|
||||
padding-right: 150px;
|
||||
}
|
||||
|
||||
.el-col-12:first-child {
|
||||
padding-right: 28px;
|
||||
}
|
||||
|
||||
.el-row {
|
||||
height: 40px;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
|
||||
.el-col-1 {
|
||||
text-align: center;
|
||||
line-height: 52px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.el-col-9 {
|
||||
padding-left: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.el-input__inner {
|
||||
height: 30px;
|
||||
text-align: left;
|
||||
padding: 0px 8px;
|
||||
}
|
||||
|
||||
.content {
|
||||
position: absolute;
|
||||
left: 362px;
|
||||
top: 104px;
|
||||
width: 1220px;
|
||||
height: 836px;
|
||||
line-height: 20px;
|
||||
padding-left: 36px;
|
||||
background-color: rgba(255, 255, 255, 1);
|
||||
color: rgba(16, 16, 16, 1);
|
||||
font-size: 14px;
|
||||
border: 1px solid rgba(187, 187, 187, 1);
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
|
||||
.el-form-item {
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
/deep/ .con_left {
|
||||
.el-con-5 {
|
||||
width: 43px;
|
||||
}
|
||||
}
|
||||
|
||||
.con_left {
|
||||
width: 709px;
|
||||
position: relative;
|
||||
|
||||
.my-editor {
|
||||
background: #2d2d2d;
|
||||
color: #ccc;
|
||||
|
||||
font-family: Fira code, Fira Mono, Consolas, Menlo, Courier, monospace;
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
/* optional */
|
||||
.prism-editor__textarea:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
/* not required: */
|
||||
.height-300 {
|
||||
width: 491px;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.infos {
|
||||
width: 60px;
|
||||
position: absolute;
|
||||
left: 208px;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.con_left_footer {
|
||||
position: absolute;
|
||||
left: 499px;
|
||||
top: 720px;
|
||||
}
|
||||
}
|
||||
|
||||
.con_right {
|
||||
width: 480px;
|
||||
|
||||
.dialog-footer {
|
||||
.el-button {
|
||||
width: 80px;
|
||||
height: 30px;
|
||||
line-height: 0.5;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
@ -0,0 +1,711 @@
|
|||
<!-- 斥候MQTT云 -->
|
||||
<template>
|
||||
<div class="Clone">
|
||||
<!-- 设置树形控件 -->
|
||||
<div v-click-outside="closeMenu">
|
||||
<!-- <el-button type="info" plain @click="dialogVisible = true">斥侯MQTT云</el-button> -->
|
||||
<div v-show="dialogVisible" class="tree_menu">
|
||||
<el-tree
|
||||
:data="datas"
|
||||
:props="defaultProps"
|
||||
@node-click="treeNodeClick"
|
||||
></el-tree>
|
||||
<!-- 树形控件右键组件 -->
|
||||
</div>
|
||||
</div>
|
||||
<div class="pas_params" v-show="add_passage">
|
||||
<div class="content">
|
||||
<div class="con_left">
|
||||
<el-form
|
||||
:label-position="labelPosition"
|
||||
:rules="rules"
|
||||
ref="ruleForm"
|
||||
>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-form-item>
|
||||
<el-checkbox v-model="mqtt_qiyong">启用</el-checkbox>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item
|
||||
label="服务器IP:"
|
||||
:label-width="formLabelWidth"
|
||||
prop="mqtt_ip"
|
||||
>
|
||||
<el-row>
|
||||
<el-col :span="5">
|
||||
<el-input
|
||||
v-model="mqtt_ip1"
|
||||
style="width: 43px; height: 30px"
|
||||
></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1">. </el-col>
|
||||
<el-col :span="5">
|
||||
<el-input
|
||||
v-model="mqtt_ip2"
|
||||
style="width: 43px; height: 30px"
|
||||
></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1">.</el-col>
|
||||
<el-col :span="5">
|
||||
<el-input
|
||||
v-model="mqtt_ip3"
|
||||
style="width: 43px; height: 30px"
|
||||
></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1">.</el-col>
|
||||
<el-col :span="5">
|
||||
<el-input
|
||||
v-model="mqtt_ip4"
|
||||
style="width: 43px; height: 30px"
|
||||
></el-input>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-form-item
|
||||
label="网关SN:"
|
||||
:label-width="formLabelWidth"
|
||||
prop="mqtt_wgsn"
|
||||
>
|
||||
<el-input
|
||||
v-model="mqtt_wgsn"
|
||||
placeholder=""
|
||||
style="width: 200px; height: 30px"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-form-item
|
||||
label="端口:"
|
||||
:label-width="formLabelWidth"
|
||||
prop="mqtt_port"
|
||||
>
|
||||
<el-input
|
||||
v-model="mqtt_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="Keep Alive(s):"
|
||||
:label-width="formLabelWidth"
|
||||
prop="mqtt_keepalive"
|
||||
>
|
||||
<el-input
|
||||
v-model="mqtt_keepalive"
|
||||
placeholder="64"
|
||||
style="width: 200px; height: 30px"
|
||||
></el-input>
|
||||
<div class="infos">2-60000</div>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item
|
||||
label="TLS加密:"
|
||||
:label-width="formLabelWidth"
|
||||
prop="mqtt_tls"
|
||||
>
|
||||
<el-switch v-model="mqtt_tls"></el-switch>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item
|
||||
label="清除Session:"
|
||||
:label-width="formLabelWidth"
|
||||
prop="mqtt_clearsession"
|
||||
>
|
||||
<el-switch v-model="mqtt_clearsession"></el-switch>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<h3 class="info_play">信息发布</h3>
|
||||
<el-divider></el-divider>
|
||||
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item
|
||||
label="Qos(MQTT):"
|
||||
:label-width="formLabelWidth"
|
||||
prop="upload_week"
|
||||
>
|
||||
<el-select
|
||||
v-model="mqtt_qos"
|
||||
placeholder="请选择"
|
||||
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-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<!-- <el-col :span="12">
|
||||
<el-form-item label="retained:" :label-width="formLabelWidth" prop="retained">
|
||||
<el-switch v-model="value1"></el-switch>
|
||||
</el-form-item>
|
||||
</el-col> -->
|
||||
</el-row>
|
||||
<!-- <el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="入口函数:" :label-width="formLabelWidth" prop="upload_week">
|
||||
<el-input v-model="input1" placeholder="64" style="width: 200px;height:30px"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row> -->
|
||||
<!-- <el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="函数代码:" :label-width="formLabelWidth" prop="upload_week">
|
||||
<prism-editor class="my-editor height-300" v-model="code" :highlight="highlighter"
|
||||
:line-numbers="lineNumbers"></prism-editor>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row> -->
|
||||
<div class="con_left_footer">
|
||||
<el-button type="primary" @click="add_passage = false"
|
||||
>保 存</el-button
|
||||
>
|
||||
<el-button @click="add_passage = false">取 消</el-button>
|
||||
</div>
|
||||
</el-form>
|
||||
</div>
|
||||
<div>
|
||||
<div class="con_right">
|
||||
<el-menu
|
||||
class="el-menu-demo"
|
||||
mode="horizontal"
|
||||
@select="handleSelect"
|
||||
>
|
||||
<el-menu-item index="1">添加</el-menu-item>
|
||||
<el-menu-item index="2">保存</el-menu-item>
|
||||
<el-menu-item index="3">删除</el-menu-item>
|
||||
</el-menu>
|
||||
</div>
|
||||
<el-table ref="singleTable" :data="tableData" style="width: 100%">
|
||||
<el-table-column type="index"> </el-table-column>
|
||||
<el-table-column property="mqtt_cjd_sbmc" label="设备名称">
|
||||
<template slot-scope="scope">
|
||||
<el-select v-model="scope.row.mqtt_cjd_sbmc" placeholder="">
|
||||
<el-option v-for="(option,indedx) in options2" :key="index" :label="option.label" :value="option.value"></el-option>
|
||||
</el-select>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column property="mqtt_cjd_tagid" label="TagID">
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 添加按钮下显示出来的弹框信息 -->
|
||||
<div>
|
||||
<el-dialog title="选择点" :visible.sync="choose_point" width="30%">
|
||||
<el-tree
|
||||
:data="points"
|
||||
show-checkbox
|
||||
node-key="id"
|
||||
:default-expanded-keys="[1, 2]"
|
||||
:default-checked-keys="[3, 4, 5, 6]"
|
||||
:props="defaultProps"
|
||||
>
|
||||
</el-tree>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="savePoint"
|
||||
>保 存</el-button
|
||||
>
|
||||
<el-button @click="choose_point = false">取 消</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { PrismEditor } from "vue-prism-editor";
|
||||
import "vue-prism-editor/dist/prismeditor.min.css"; // import the styles somewhere
|
||||
// import highlighting library (you can use any library you want just return html string)
|
||||
import { highlight, languages } from "prismjs/components/prism-core";
|
||||
import "prismjs/components/prism-clike";
|
||||
import "prismjs/components/prism-javascript";
|
||||
import "prismjs/themes/prism-tomorrow.css"; // import syntax highlighting styles
|
||||
|
||||
export default {
|
||||
name: "ChiClone",
|
||||
components: {
|
||||
PrismEditor,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
mqtt_qiyong: true,
|
||||
mqtt_ip: "",
|
||||
mqtt_ip1: "",
|
||||
mqtt_ip2: "",
|
||||
mqtt_ip3: "",
|
||||
mqtt_ip4: "",
|
||||
mqtt_wgsn: "",
|
||||
mqtt_port: "",
|
||||
mqtt_keepalive: "",
|
||||
mqtt_tls: false,
|
||||
mqtt_clearsession: false,
|
||||
// mqtt_sssjfbzt:"",
|
||||
mqtt_qos: "0",
|
||||
// code: 'console.log("Hello World")',
|
||||
// lineNumbers: true, // true为编辑模式， false只展示不可编辑
|
||||
points: [
|
||||
{
|
||||
id: 1,
|
||||
label: "Device1",
|
||||
children: [
|
||||
{
|
||||
id: 3,
|
||||
label: "tag0001",
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
label: "tag0002",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
label: "Device1",
|
||||
children: [
|
||||
{
|
||||
id: 5,
|
||||
label: "tag0003",
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
label: "tag0004",
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
choose_point: false,
|
||||
options1: [
|
||||
{
|
||||
value: "0",
|
||||
label: "0",
|
||||
},
|
||||
{
|
||||
value: "1",
|
||||
label: "1",
|
||||
},
|
||||
{
|
||||
value: "2",
|
||||
label: "2",
|
||||
},
|
||||
],
|
||||
labelPosition: "left",
|
||||
formLabelWidth: "114px",
|
||||
input1: 192,
|
||||
add_passage: false,
|
||||
rightMenu: "",
|
||||
dialogVisible: true,
|
||||
isAdd: false,
|
||||
datas: [
|
||||
{
|
||||
label: "Gateway",
|
||||
children: [
|
||||
{
|
||||
label: "数据采集",
|
||||
children: [
|
||||
{
|
||||
label: "I/O点",
|
||||
},
|
||||
{
|
||||
label: "用户点",
|
||||
},
|
||||
{
|
||||
label: "计算点",
|
||||
},
|
||||
{
|
||||
label: "系统点",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "上云服务",
|
||||
children: [
|
||||
{
|
||||
label: "标准 MQTT",
|
||||
},
|
||||
{
|
||||
label: "AWS loT",
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
defaultProps: {
|
||||
children: "children",
|
||||
label: "label",
|
||||
},
|
||||
// 右边添加设备的字段
|
||||
options2:[
|
||||
{
|
||||
label:"有线区精雕1",
|
||||
value:"无线区精雕1",
|
||||
},
|
||||
{
|
||||
|
||||
}
|
||||
],
|
||||
options3: [{
|
||||
value: "MachinePamHID909",
|
||||
label: "MachinePamHID909",
|
||||
}, {
|
||||
value: "MachinePamHID910",
|
||||
label: "MachinePamHID910",
|
||||
}, {
|
||||
value: "MachinePamHID911",
|
||||
label: "MachinePamHID911",
|
||||
}, {
|
||||
value: "MachinePamHID912",
|
||||
label: "MachinePamHID912",
|
||||
}, {
|
||||
value: "MachinePamHID913",
|
||||
label: "MachinePamHID913",
|
||||
}, {
|
||||
value: "MachinePamHID914",
|
||||
label: "MachinePamHID914",
|
||||
}, {
|
||||
value: "MachinePamHID915",
|
||||
label: "MachinePamHID915",
|
||||
}, {
|
||||
value: "MachinePamHID916",
|
||||
label: "MachinePamHID916",
|
||||
}, {
|
||||
value: "MachinePamHID917",
|
||||
label: "MachinePamHID917",
|
||||
}, {
|
||||
value: "MachinePamHID918",
|
||||
label: "MachinePamHID918",
|
||||
}, {
|
||||
value: "MachinePamHID919",
|
||||
label: "MachinePamHID919",
|
||||
}, {
|
||||
value: "MachinePamHID920",
|
||||
label: "MachinePamHID920",
|
||||
}, {
|
||||
value: "MachinePamHID921",
|
||||
label: "MachinePamHID921",
|
||||
}, {
|
||||
value: "MachinePamHID922",
|
||||
label: "MachinePamHID922",
|
||||
}, {
|
||||
value: "MachinePamHID923",
|
||||
label: "MachinePamHID923",
|
||||
}, {
|
||||
value: "MachinePamHID924",
|
||||
label: "MachinePamHID924",
|
||||
}, {
|
||||
value: "MachinePamHID925",
|
||||
label: "MachinePamHID925",
|
||||
}, {
|
||||
value: "MachinePamHID926",
|
||||
label: "MachinePamHID926",
|
||||
}, {
|
||||
value: "MachinePamHID927",
|
||||
label: "MachinePamHID927",
|
||||
}, {
|
||||
value: "MachinePamHID928",
|
||||
label: "MachinePamHID928",
|
||||
}, {
|
||||
value: "MachinePamHID929",
|
||||
label: "MachinePamHID929",
|
||||
}, {
|
||||
value: "MachinePamHID930",
|
||||
label: "MachinePamHID930",
|
||||
}, {
|
||||
value: "MachinePamHID931",
|
||||
label: "MachinePamHID931",
|
||||
}, {
|
||||
value: "MachinePamHID932",
|
||||
label: "MachinePamHID932",
|
||||
}, {
|
||||
value: "MachinePamHID933",
|
||||
label: "MachinePamHID933",
|
||||
}, {
|
||||
value: "MachinePamHID934",
|
||||
label: "MachinePamHID934",
|
||||
}, {
|
||||
value: "MachinePamHID935",
|
||||
label: "MachinePamHID935",
|
||||
}, {
|
||||
value: "MachinePamHID936",
|
||||
label: "MachinePamHID936",
|
||||
}, {
|
||||
value: "MachinePamHID937",
|
||||
label: "MachinePamHID937",
|
||||
}, {
|
||||
value: "MachinePamHID938",
|
||||
label: "MachinePamHID938",
|
||||
}],
|
||||
tableData: [
|
||||
{
|
||||
mqtt_cjd_sbmc: "Device1",
|
||||
mqtt_cjd_tagid: "Device1.tag0001",
|
||||
},
|
||||
],
|
||||
rules: {
|
||||
server_ip: [
|
||||
{ required: true, message: "请输入服务器IP", trigger: "blur" },
|
||||
],
|
||||
port_number: [
|
||||
{ required: true, message: "请输入端口", trigger: "blur" },
|
||||
],
|
||||
gateway_id: [
|
||||
{ required: true, message: "请输入网关ID", trigger: "blur" },
|
||||
],
|
||||
data_theme: [
|
||||
{ required: true, message: "请输入主题", trigger: "blur" },
|
||||
],
|
||||
upload_mode: [
|
||||
{ required: true, message: "请输入上传模式", trigger: "blur" },
|
||||
],
|
||||
upload_week: [
|
||||
{ required: true, message: "请输入上传周期", trigger: "blur" },
|
||||
],
|
||||
data_filter: [
|
||||
{ required: true, message: "请输入数据过滤", trigger: "blur" },
|
||||
],
|
||||
},
|
||||
};
|
||||
},
|
||||
mounted() {},
|
||||
methods: {
|
||||
treeNodeClick() {
|
||||
this.add_passage = true;
|
||||
},
|
||||
getDriveName() {
|
||||
this.diag_drive = true;
|
||||
},
|
||||
handleSelect(key) {
|
||||
console.log(key);
|
||||
if (key == 1 && this.isAdd == false) {
|
||||
this.choose_point = true;
|
||||
} else if (key == 1 && this.isAdd == true) {
|
||||
this.$message({
|
||||
message: '添加失败,只能添加一条数据',
|
||||
type: 'error'
|
||||
});
|
||||
return false
|
||||
}
|
||||
},
|
||||
highlighter(code) {
|
||||
return highlight(code, languages.js); //returns html
|
||||
},
|
||||
closeMenu(ev) {
|
||||
console.log({ ev });
|
||||
this.dialogVisible = false;
|
||||
},
|
||||
savePoint() {
|
||||
this.choose_point = false;
|
||||
this.isAdd = true;
|
||||
this.$message({
|
||||
message: '添加成功',
|
||||
type: 'success'
|
||||
});
|
||||
},
|
||||
},
|
||||
directives: {
|
||||
"click-outside": {
|
||||
bind: function (el, binding, vnode) {
|
||||
console.log("el", el);
|
||||
console.log("binding", binding);
|
||||
el.event = function (event) {
|
||||
// 检查点击是否发生在节点之内（包括子节点）
|
||||
if (!(el == event.target || el.contains(event.target))) {
|
||||
// 如果没有，则触发调用
|
||||
// 若绑定值为函数，则执行
|
||||
// 这里我们可以通过钩子函数中的 vnode.context，来获取当前组件的作用域
|
||||
if (typeof vnode.context[binding.expression] == "function") {
|
||||
vnode.context[binding.expression](event);
|
||||
}
|
||||
}
|
||||
};
|
||||
// 绑定事件
|
||||
// 设置为true，代表在DOM树中，注册了该listener的元素，会先于它下方的任何事件目标，接收到该事件。
|
||||
document.body.addEventListener("click", el.event, true);
|
||||
},
|
||||
unbind: function (el) {
|
||||
// 解绑事件
|
||||
document.body.removeEventListener("click", el.event, true);
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.tree_menu {
|
||||
position: absolute;
|
||||
width: 286px;
|
||||
height: 753px;
|
||||
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);
|
||||
}
|
||||
|
||||
/deep/ .pas_params {
|
||||
.info_play {
|
||||
width: 56px;
|
||||
height: 20px;
|
||||
color: rgba(16, 16, 16, 1);
|
||||
font-size: 14px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.el-divider--horizontal {
|
||||
margin: 8px 0;
|
||||
}
|
||||
|
||||
.el-button {
|
||||
width: 80px;
|
||||
height: 30px;
|
||||
line-height: 0.5;
|
||||
}
|
||||
|
||||
.el-col-12:last-child {
|
||||
padding-right: 150px;
|
||||
}
|
||||
|
||||
.el-col-12:first-child {
|
||||
padding-right: 28px;
|
||||
}
|
||||
|
||||
.el-row {
|
||||
height: 40px;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
|
||||
.el-col-1 {
|
||||
text-align: center;
|
||||
line-height: 52px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.el-col-9 {
|
||||
padding-left: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.el-input__inner {
|
||||
height: 30px;
|
||||
text-align: left;
|
||||
padding: 0px 8px;
|
||||
}
|
||||
|
||||
.content {
|
||||
position: absolute;
|
||||
left: 362px;
|
||||
top: 104px;
|
||||
width: 1220px;
|
||||
height: 836px;
|
||||
line-height: 20px;
|
||||
padding-left: 36px;
|
||||
background-color: rgba(255, 255, 255, 1);
|
||||
color: rgba(16, 16, 16, 1);
|
||||
font-size: 14px;
|
||||
border: 1px solid rgba(187, 187, 187, 1);
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
|
||||
.el-form-item {
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
/deep/ .con_left {
|
||||
.el-con-5 {
|
||||
width: 43px;
|
||||
}
|
||||
}
|
||||
|
||||
.con_left {
|
||||
width: 709px;
|
||||
position: relative;
|
||||
|
||||
.my-editor {
|
||||
background: #2d2d2d;
|
||||
color: #ccc;
|
||||
|
||||
font-family: Fira code, Fira Mono, Consolas, Menlo, Courier, monospace;
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
/* optional */
|
||||
.prism-editor__textarea:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
/* not required: */
|
||||
.height-300 {
|
||||
width: 491px;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.infos {
|
||||
width: 60px;
|
||||
position: absolute;
|
||||
left: 208px;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.con_left_footer {
|
||||
position: absolute;
|
||||
left: 499px;
|
||||
top: 720px;
|
||||
}
|
||||
}
|
||||
|
||||
.con_right {
|
||||
width: 480px;
|
||||
|
||||
.dialog-footer {
|
||||
.el-button {
|
||||
width: 80px;
|
||||
height: 30px;
|
||||
line-height: 0.5;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
@ -0,0 +1,711 @@
|
|||
<!-- 斥候MQTT云 -->
|
||||
<template>
|
||||
<div class="Clone">
|
||||
<!-- 设置树形控件 -->
|
||||
<div v-click-outside="closeMenu">
|
||||
<!-- <el-button type="info" plain @click="dialogVisible = true">斥侯MQTT云</el-button> -->
|
||||
<div v-show="dialogVisible" class="tree_menu">
|
||||
<el-tree
|
||||
:data="datas"
|
||||
:props="defaultProps"
|
||||
@node-click="treeNodeClick"
|
||||
></el-tree>
|
||||
<!-- 树形控件右键组件 -->
|
||||
</div>
|
||||
</div>
|
||||
<div class="pas_params" v-show="add_passage">
|
||||
<div class="content">
|
||||
<div class="con_left">
|
||||
<el-form
|
||||
:label-position="labelPosition"
|
||||
:rules="rules"
|
||||
ref="ruleForm"
|
||||
>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-form-item>
|
||||
<el-checkbox v-model="mqtt_qiyong">启用</el-checkbox>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item
|
||||
label="服务器IP:"
|
||||
:label-width="formLabelWidth"
|
||||
prop="mqtt_ip"
|
||||
>
|
||||
<el-row>
|
||||
<el-col :span="5">
|
||||
<el-input
|
||||
v-model="mqtt_ip1"
|
||||
style="width: 43px; height: 30px"
|
||||
></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1">. </el-col>
|
||||
<el-col :span="5">
|
||||
<el-input
|
||||
v-model="mqtt_ip2"
|
||||
style="width: 43px; height: 30px"
|
||||
></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1">.</el-col>
|
||||
<el-col :span="5">
|
||||
<el-input
|
||||
v-model="mqtt_ip3"
|
||||
style="width: 43px; height: 30px"
|
||||
></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1">.</el-col>
|
||||
<el-col :span="5">
|
||||
<el-input
|
||||
v-model="mqtt_ip4"
|
||||
style="width: 43px; height: 30px"
|
||||
></el-input>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-form-item
|
||||
label="网关SN:"
|
||||
:label-width="formLabelWidth"
|
||||
prop="mqtt_wgsn"
|
||||
>
|
||||
<el-input
|
||||
v-model="mqtt_wgsn"
|
||||
placeholder=""
|
||||
style="width: 200px; height: 30px"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-form-item
|
||||
label="端口:"
|
||||
:label-width="formLabelWidth"
|
||||
prop="mqtt_port"
|
||||
>
|
||||
<el-input
|
||||
v-model="mqtt_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="Keep Alive(s):"
|
||||
:label-width="formLabelWidth"
|
||||
prop="mqtt_keepalive"
|
||||
>
|
||||
<el-input
|
||||
v-model="mqtt_keepalive"
|
||||
placeholder="64"
|
||||
style="width: 200px; height: 30px"
|
||||
></el-input>
|
||||
<div class="infos">2-60000</div>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item
|
||||
label="TLS加密:"
|
||||
:label-width="formLabelWidth"
|
||||
prop="mqtt_tls"
|
||||
>
|
||||
<el-switch v-model="mqtt_tls"></el-switch>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item
|
||||
label="清除Session:"
|
||||
:label-width="formLabelWidth"
|
||||
prop="mqtt_clearsession"
|
||||
>
|
||||
<el-switch v-model="mqtt_clearsession"></el-switch>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<h3 class="info_play">信息发布</h3>
|
||||
<el-divider></el-divider>
|
||||
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item
|
||||
label="Qos(MQTT):"
|
||||
:label-width="formLabelWidth"
|
||||
prop="upload_week"
|
||||
>
|
||||
<el-select
|
||||
v-model="mqtt_qos"
|
||||
placeholder="请选择"
|
||||
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-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<!-- <el-col :span="12">
|
||||
<el-form-item label="retained:" :label-width="formLabelWidth" prop="retained">
|
||||
<el-switch v-model="value1"></el-switch>
|
||||
</el-form-item>
|
||||
</el-col> -->
|
||||
</el-row>
|
||||
<!-- <el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="入口函数:" :label-width="formLabelWidth" prop="upload_week">
|
||||
<el-input v-model="input1" placeholder="64" style="width: 200px;height:30px"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row> -->
|
||||
<!-- <el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="函数代码:" :label-width="formLabelWidth" prop="upload_week">
|
||||
<prism-editor class="my-editor height-300" v-model="code" :highlight="highlighter"
|
||||
:line-numbers="lineNumbers"></prism-editor>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row> -->
|
||||
<div class="con_left_footer">
|
||||
<el-button type="primary" @click="add_passage = false"
|
||||
>保 存</el-button
|
||||
>
|
||||
<el-button @click="add_passage = false">取 消</el-button>
|
||||
</div>
|
||||
</el-form>
|
||||
</div>
|
||||
<div>
|
||||
<div class="con_right">
|
||||
<el-menu
|
||||
class="el-menu-demo"
|
||||
mode="horizontal"
|
||||
@select="handleSelect"
|
||||
>
|
||||
<el-menu-item index="1">添加</el-menu-item>
|
||||
<el-menu-item index="2">保存</el-menu-item>
|
||||
<el-menu-item index="3">删除</el-menu-item>
|
||||
</el-menu>
|
||||
</div>
|
||||
<el-table ref="singleTable" :data="tableData" style="width: 100%">
|
||||
<el-table-column type="index"> </el-table-column>
|
||||
<el-table-column property="mqtt_cjd_sbmc" label="设备名称">
|
||||
<template slot-scope="scope">
|
||||
<el-select v-model="scope.row.mqtt_cjd_sbmc" placeholder="">
|
||||
<el-option v-for="(option,index) in options2" :key="index" :label="option.label" :value="option.value"></el-option>
|
||||
</el-select>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column property="mqtt_cjd_tagid" label="TagID">
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 添加按钮下显示出来的弹框信息 -->
|
||||
<div>
|
||||
<el-dialog title="选择点" :visible.sync="choose_point" width="30%">
|
||||
<el-tree
|
||||
:data="points"
|
||||
show-checkbox
|
||||
node-key="id"
|
||||
:default-expanded-keys="[1, 2]"
|
||||
:default-checked-keys="[3, 4, 5, 6]"
|
||||
:props="defaultProps"
|
||||
>
|
||||
</el-tree>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="savePoint"
|
||||
>保 存</el-button
|
||||
>
|
||||
<el-button @click="choose_point = false">取 消</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { PrismEditor } from "vue-prism-editor";
|
||||
import "vue-prism-editor/dist/prismeditor.min.css"; // import the styles somewhere
|
||||
// import highlighting library (you can use any library you want just return html string)
|
||||
import { highlight, languages } from "prismjs/components/prism-core";
|
||||
import "prismjs/components/prism-clike";
|
||||
import "prismjs/components/prism-javascript";
|
||||
import "prismjs/themes/prism-tomorrow.css"; // import syntax highlighting styles
|
||||
|
||||
export default {
|
||||
name: "ChiClone",
|
||||
components: {
|
||||
PrismEditor,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
mqtt_qiyong: true,
|
||||
mqtt_ip: "",
|
||||
mqtt_ip1: "",
|
||||
mqtt_ip2: "",
|
||||
mqtt_ip3: "",
|
||||
mqtt_ip4: "",
|
||||
mqtt_wgsn: "",
|
||||
mqtt_port: "",
|
||||
mqtt_keepalive: "",
|
||||
mqtt_tls: false,
|
||||
mqtt_clearsession: false,
|
||||
// mqtt_sssjfbzt:"",
|
||||
mqtt_qos: "0",
|
||||
// code: 'console.log("Hello World")',
|
||||
// lineNumbers: true, // true为编辑模式， false只展示不可编辑
|
||||
points: [
|
||||
{
|
||||
id: 1,
|
||||
label: "Device1",
|
||||
children: [
|
||||
{
|
||||
id: 3,
|
||||
label: "tag0001",
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
label: "tag0002",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
label: "Device1",
|
||||
children: [
|
||||
{
|
||||
id: 5,
|
||||
label: "tag0003",
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
label: "tag0004",
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
choose_point: false,
|
||||
options1: [
|
||||
{
|
||||
value: "0",
|
||||
label: "0",
|
||||
},
|
||||
{
|
||||
value: "1",
|
||||
label: "1",
|
||||
},
|
||||
{
|
||||
value: "2",
|
||||
label: "2",
|
||||
},
|
||||
],
|
||||
labelPosition: "left",
|
||||
formLabelWidth: "114px",
|
||||
input1: 192,
|
||||
add_passage: false,
|
||||
rightMenu: "",
|
||||
dialogVisible: true,
|
||||
isAdd: false,
|
||||
datas: [
|
||||
{
|
||||
label: "Gateway",
|
||||
children: [
|
||||
{
|
||||
label: "数据采集",
|
||||
children: [
|
||||
{
|
||||
label: "I/O点",
|
||||
},
|
||||
{
|
||||
label: "用户点",
|
||||
},
|
||||
{
|
||||
label: "计算点",
|
||||
},
|
||||
{
|
||||
label: "系统点",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "上云服务",
|
||||
children: [
|
||||
{
|
||||
label: "标准 MQTT",
|
||||
},
|
||||
{
|
||||
label: "AWS loT",
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
defaultProps: {
|
||||
children: "children",
|
||||
label: "label",
|
||||
},
|
||||
// 右边添加设备的字段
|
||||
options2:[
|
||||
{
|
||||
label:"有线区精雕1",
|
||||
value:"无线区精雕1",
|
||||
},
|
||||
{
|
||||
|
||||
}
|
||||
],
|
||||
options3: [{
|
||||
value: "MachinePamHID909",
|
||||
label: "MachinePamHID909",
|
||||
}, {
|
||||
value: "MachinePamHID910",
|
||||
label: "MachinePamHID910",
|
||||
}, {
|
||||
value: "MachinePamHID911",
|
||||
label: "MachinePamHID911",
|
||||
}, {
|
||||
value: "MachinePamHID912",
|
||||
label: "MachinePamHID912",
|
||||
}, {
|
||||
value: "MachinePamHID913",
|
||||
label: "MachinePamHID913",
|
||||
}, {
|
||||
value: "MachinePamHID914",
|
||||
label: "MachinePamHID914",
|
||||
}, {
|
||||
value: "MachinePamHID915",
|
||||
label: "MachinePamHID915",
|
||||
}, {
|
||||
value: "MachinePamHID916",
|
||||
label: "MachinePamHID916",
|
||||
}, {
|
||||
value: "MachinePamHID917",
|
||||
label: "MachinePamHID917",
|
||||
}, {
|
||||
value: "MachinePamHID918",
|
||||
label: "MachinePamHID918",
|
||||
}, {
|
||||
value: "MachinePamHID919",
|
||||
label: "MachinePamHID919",
|
||||
}, {
|
||||
value: "MachinePamHID920",
|
||||
label: "MachinePamHID920",
|
||||
}, {
|
||||
value: "MachinePamHID921",
|
||||
label: "MachinePamHID921",
|
||||
}, {
|
||||
value: "MachinePamHID922",
|
||||
label: "MachinePamHID922",
|
||||
}, {
|
||||
value: "MachinePamHID923",
|
||||
label: "MachinePamHID923",
|
||||
}, {
|
||||
value: "MachinePamHID924",
|
||||
label: "MachinePamHID924",
|
||||
}, {
|
||||
value: "MachinePamHID925",
|
||||
label: "MachinePamHID925",
|
||||
}, {
|
||||
value: "MachinePamHID926",
|
||||
label: "MachinePamHID926",
|
||||
}, {
|
||||
value: "MachinePamHID927",
|
||||
label: "MachinePamHID927",
|
||||
}, {
|
||||
value: "MachinePamHID928",
|
||||
label: "MachinePamHID928",
|
||||
}, {
|
||||
value: "MachinePamHID929",
|
||||
label: "MachinePamHID929",
|
||||
}, {
|
||||
value: "MachinePamHID930",
|
||||
label: "MachinePamHID930",
|
||||
}, {
|
||||
value: "MachinePamHID931",
|
||||
label: "MachinePamHID931",
|
||||
}, {
|
||||
value: "MachinePamHID932",
|
||||
label: "MachinePamHID932",
|
||||
}, {
|
||||
value: "MachinePamHID933",
|
||||
label: "MachinePamHID933",
|
||||
}, {
|
||||
value: "MachinePamHID934",
|
||||
label: "MachinePamHID934",
|
||||
}, {
|
||||
value: "MachinePamHID935",
|
||||
label: "MachinePamHID935",
|
||||
}, {
|
||||
value: "MachinePamHID936",
|
||||
label: "MachinePamHID936",
|
||||
}, {
|
||||
value: "MachinePamHID937",
|
||||
label: "MachinePamHID937",
|
||||
}, {
|
||||
value: "MachinePamHID938",
|
||||
label: "MachinePamHID938",
|
||||
}],
|
||||
tableData: [
|
||||
{
|
||||
mqtt_cjd_sbmc: "Device1",
|
||||
mqtt_cjd_tagid: "Device1.tag0001",
|
||||
},
|
||||
],
|
||||
rules: {
|
||||
server_ip: [
|
||||
{ required: true, message: "请输入服务器IP", trigger: "blur" },
|
||||
],
|
||||
port_number: [
|
||||
{ required: true, message: "请输入端口", trigger: "blur" },
|
||||
],
|
||||
gateway_id: [
|
||||
{ required: true, message: "请输入网关ID", trigger: "blur" },
|
||||
],
|
||||
data_theme: [
|
||||
{ required: true, message: "请输入主题", trigger: "blur" },
|
||||
],
|
||||
upload_mode: [
|
||||
{ required: true, message: "请输入上传模式", trigger: "blur" },
|
||||
],
|
||||
upload_week: [
|
||||
{ required: true, message: "请输入上传周期", trigger: "blur" },
|
||||
],
|
||||
data_filter: [
|
||||
{ required: true, message: "请输入数据过滤", trigger: "blur" },
|
||||
],
|
||||
},
|
||||
};
|
||||
},
|
||||
mounted() {},
|
||||
methods: {
|
||||
treeNodeClick() {
|
||||
this.add_passage = true;
|
||||
},
|
||||
getDriveName() {
|
||||
this.diag_drive = true;
|
||||
},
|
||||
handleSelect(key) {
|
||||
console.log(key);
|
||||
if (key == 1 && this.isAdd == false) {
|
||||
this.choose_point = true;
|
||||
} else if (key == 1 && this.isAdd == true) {
|
||||
this.$message({
|
||||
message: '添加失败,只能添加一条数据',
|
||||
type: 'error'
|
||||
});
|
||||
return false
|
||||
}
|
||||
},
|
||||
highlighter(code) {
|
||||
return highlight(code, languages.js); //returns html
|
||||
},
|
||||
closeMenu(ev) {
|
||||
console.log({ ev });
|
||||
this.dialogVisible = false;
|
||||
},
|
||||
savePoint() {
|
||||
this.choose_point = false;
|
||||
this.isAdd = true;
|
||||
this.$message({
|
||||
message: '添加成功',
|
||||
type: 'success'
|
||||
});
|
||||
},
|
||||
},
|
||||
directives: {
|
||||
"click-outside": {
|
||||
bind: function (el, binding, vnode) {
|
||||
console.log("el", el);
|
||||
console.log("binding", binding);
|
||||
el.event = function (event) {
|
||||
// 检查点击是否发生在节点之内（包括子节点）
|
||||
if (!(el == event.target || el.contains(event.target))) {
|
||||
// 如果没有，则触发调用
|
||||
// 若绑定值为函数，则执行
|
||||
// 这里我们可以通过钩子函数中的 vnode.context，来获取当前组件的作用域
|
||||
if (typeof vnode.context[binding.expression] == "function") {
|
||||
vnode.context[binding.expression](event);
|
||||
}
|
||||
}
|
||||
};
|
||||
// 绑定事件
|
||||
// 设置为true，代表在DOM树中，注册了该listener的元素，会先于它下方的任何事件目标，接收到该事件。
|
||||
document.body.addEventListener("click", el.event, true);
|
||||
},
|
||||
unbind: function (el) {
|
||||
// 解绑事件
|
||||
document.body.removeEventListener("click", el.event, true);
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.tree_menu {
|
||||
position: absolute;
|
||||
width: 286px;
|
||||
height: 753px;
|
||||
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);
|
||||
}
|
||||
|
||||
/deep/ .pas_params {
|
||||
.info_play {
|
||||
width: 56px;
|
||||
height: 20px;
|
||||
color: rgba(16, 16, 16, 1);
|
||||
font-size: 14px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.el-divider--horizontal {
|
||||
margin: 8px 0;
|
||||
}
|
||||
|
||||
.el-button {
|
||||
width: 80px;
|
||||
height: 30px;
|
||||
line-height: 0.5;
|
||||
}
|
||||
|
||||
.el-col-12:last-child {
|
||||
padding-right: 150px;
|
||||
}
|
||||
|
||||
.el-col-12:first-child {
|
||||
padding-right: 28px;
|
||||
}
|
||||
|
||||
.el-row {
|
||||
height: 40px;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
|
||||
.el-col-1 {
|
||||
text-align: center;
|
||||
line-height: 52px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.el-col-9 {
|
||||
padding-left: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.el-input__inner {
|
||||
height: 30px;
|
||||
text-align: left;
|
||||
padding: 0px 8px;
|
||||
}
|
||||
|
||||
.content {
|
||||
position: absolute;
|
||||
left: 362px;
|
||||
top: 104px;
|
||||
width: 1220px;
|
||||
height: 836px;
|
||||
line-height: 20px;
|
||||
padding-left: 36px;
|
||||
background-color: rgba(255, 255, 255, 1);
|
||||
color: rgba(16, 16, 16, 1);
|
||||
font-size: 14px;
|
||||
border: 1px solid rgba(187, 187, 187, 1);
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
|
||||
.el-form-item {
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
/deep/ .con_left {
|
||||
.el-con-5 {
|
||||
width: 43px;
|
||||
}
|
||||
}
|
||||
|
||||
.con_left {
|
||||
width: 709px;
|
||||
position: relative;
|
||||
|
||||
.my-editor {
|
||||
background: #2d2d2d;
|
||||
color: #ccc;
|
||||
|
||||
font-family: Fira code, Fira Mono, Consolas, Menlo, Courier, monospace;
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
/* optional */
|
||||
.prism-editor__textarea:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
/* not required: */
|
||||
.height-300 {
|
||||
width: 491px;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.infos {
|
||||
width: 60px;
|
||||
position: absolute;
|
||||
left: 208px;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.con_left_footer {
|
||||
position: absolute;
|
||||
left: 499px;
|
||||
top: 720px;
|
||||
}
|
||||
}
|
||||
|
||||
.con_right {
|
||||
width: 480px;
|
||||
|
||||
.dialog-footer {
|
||||
.el-button {
|
||||
width: 80px;
|
||||
height: 30px;
|
||||
line-height: 0.5;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
@ -0,0 +1,716 @@
|
|||
<!-- 斥候MQTT云 -->
|
||||
<template>
|
||||
<div class="Clone">
|
||||
<!-- 设置树形控件 -->
|
||||
<div v-click-outside="closeMenu">
|
||||
<!-- <el-button type="info" plain @click="dialogVisible = true">斥侯MQTT云</el-button> -->
|
||||
<div v-show="dialogVisible" class="tree_menu">
|
||||
<el-tree
|
||||
:data="datas"
|
||||
:props="defaultProps"
|
||||
@node-click="treeNodeClick"
|
||||
></el-tree>
|
||||
<!-- 树形控件右键组件 -->
|
||||
</div>
|
||||
</div>
|
||||
<div class="pas_params" v-show="add_passage">
|
||||
<div class="content">
|
||||
<div class="con_left">
|
||||
<el-form
|
||||
:label-position="labelPosition"
|
||||
:rules="rules"
|
||||
ref="ruleForm"
|
||||
>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-form-item>
|
||||
<el-checkbox v-model="mqtt_qiyong">启用</el-checkbox>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item
|
||||
label="服务器IP:"
|
||||
:label-width="formLabelWidth"
|
||||
prop="mqtt_ip"
|
||||
>
|
||||
<el-row>
|
||||
<el-col :span="5">
|
||||
<el-input
|
||||
v-model="mqtt_ip1"
|
||||
style="width: 43px; height: 30px"
|
||||
></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1">. </el-col>
|
||||
<el-col :span="5">
|
||||
<el-input
|
||||
v-model="mqtt_ip2"
|
||||
style="width: 43px; height: 30px"
|
||||
></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1">.</el-col>
|
||||
<el-col :span="5">
|
||||
<el-input
|
||||
v-model="mqtt_ip3"
|
||||
style="width: 43px; height: 30px"
|
||||
></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1">.</el-col>
|
||||
<el-col :span="5">
|
||||
<el-input
|
||||
v-model="mqtt_ip4"
|
||||
style="width: 43px; height: 30px"
|
||||
></el-input>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-form-item
|
||||
label="网关SN:"
|
||||
:label-width="formLabelWidth"
|
||||
prop="mqtt_wgsn"
|
||||
>
|
||||
<el-input
|
||||
v-model="mqtt_wgsn"
|
||||
placeholder=""
|
||||
style="width: 200px; height: 30px"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-form-item
|
||||
label="端口:"
|
||||
:label-width="formLabelWidth"
|
||||
prop="mqtt_port"
|
||||
>
|
||||
<el-input
|
||||
v-model="mqtt_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="Keep Alive(s):"
|
||||
:label-width="formLabelWidth"
|
||||
prop="mqtt_keepalive"
|
||||
>
|
||||
<el-input
|
||||
v-model="mqtt_keepalive"
|
||||
placeholder="64"
|
||||
style="width: 200px; height: 30px"
|
||||
></el-input>
|
||||
<div class="infos">2-60000</div>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item
|
||||
label="TLS加密:"
|
||||
:label-width="formLabelWidth"
|
||||
prop="mqtt_tls"
|
||||
>
|
||||
<el-switch v-model="mqtt_tls"></el-switch>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item
|
||||
label="清除Session:"
|
||||
:label-width="formLabelWidth"
|
||||
prop="mqtt_clearsession"
|
||||
>
|
||||
<el-switch v-model="mqtt_clearsession"></el-switch>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<h3 class="info_play">信息发布</h3>
|
||||
<el-divider></el-divider>
|
||||
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item
|
||||
label="Qos(MQTT):"
|
||||
:label-width="formLabelWidth"
|
||||
prop="upload_week"
|
||||
>
|
||||
<el-select
|
||||
v-model="mqtt_qos"
|
||||
placeholder="请选择"
|
||||
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-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<!-- <el-col :span="12">
|
||||
<el-form-item label="retained:" :label-width="formLabelWidth" prop="retained">
|
||||
<el-switch v-model="value1"></el-switch>
|
||||
</el-form-item>
|
||||
</el-col> -->
|
||||
</el-row>
|
||||
<!-- <el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="入口函数:" :label-width="formLabelWidth" prop="upload_week">
|
||||
<el-input v-model="input1" placeholder="64" style="width: 200px;height:30px"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row> -->
|
||||
<!-- <el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="函数代码:" :label-width="formLabelWidth" prop="upload_week">
|
||||
<prism-editor class="my-editor height-300" v-model="code" :highlight="highlighter"
|
||||
:line-numbers="lineNumbers"></prism-editor>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row> -->
|
||||
<div class="con_left_footer">
|
||||
<el-button type="primary" @click="add_passage = false"
|
||||
>保 存</el-button
|
||||
>
|
||||
<el-button @click="add_passage = false">取 消</el-button>
|
||||
</div>
|
||||
</el-form>
|
||||
</div>
|
||||
<div>
|
||||
<div class="con_right">
|
||||
<el-menu
|
||||
class="el-menu-demo"
|
||||
mode="horizontal"
|
||||
@select="handleSelect"
|
||||
>
|
||||
<el-menu-item index="1">添加</el-menu-item>
|
||||
<el-menu-item index="2">保存</el-menu-item>
|
||||
<el-menu-item index="3">删除</el-menu-item>
|
||||
</el-menu>
|
||||
</div>
|
||||
<el-table ref="singleTable" :data="tableData" style="width: 100%">
|
||||
<el-table-column type="index"> </el-table-column>
|
||||
<el-table-column property="mqtt_cjd_sbmc" label="设备名称">
|
||||
<template slot-scope="scope">
|
||||
<el-select v-model="scope.row.mqtt_cjd_sbmc" placeholder="">
|
||||
<el-option v-for="(option,index) in options2" :key="index" :label="option.label" :value="option.value"></el-option>
|
||||
</el-select>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column property="mqtt_cjd_tagid" label="TagID">
|
||||
<template slot-scope="scope">
|
||||
<el-select v-model="scope.row.mqtt_cjd_tagid" placeholder="">
|
||||
<el-option v-for="(option,index) in options3" :key="index" :label="option.label" :value="option.value"></el-option>
|
||||
</el-select>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 添加按钮下显示出来的弹框信息 -->
|
||||
<div>
|
||||
<el-dialog title="选择点" :visible.sync="choose_point" width="30%">
|
||||
<el-tree
|
||||
:data="points"
|
||||
show-checkbox
|
||||
node-key="id"
|
||||
:default-expanded-keys="[1, 2]"
|
||||
:default-checked-keys="[3, 4, 5, 6]"
|
||||
:props="defaultProps"
|
||||
>
|
||||
</el-tree>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="savePoint"
|
||||
>保 存</el-button
|
||||
>
|
||||
<el-button @click="choose_point = false">取 消</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { PrismEditor } from "vue-prism-editor";
|
||||
import "vue-prism-editor/dist/prismeditor.min.css"; // import the styles somewhere
|
||||
// import highlighting library (you can use any library you want just return html string)
|
||||
import { highlight, languages } from "prismjs/components/prism-core";
|
||||
import "prismjs/components/prism-clike";
|
||||
import "prismjs/components/prism-javascript";
|
||||
import "prismjs/themes/prism-tomorrow.css"; // import syntax highlighting styles
|
||||
|
||||
export default {
|
||||
name: "ChiClone",
|
||||
components: {
|
||||
PrismEditor,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
mqtt_qiyong: true,
|
||||
mqtt_ip: "",
|
||||
mqtt_ip1: "",
|
||||
mqtt_ip2: "",
|
||||
mqtt_ip3: "",
|
||||
mqtt_ip4: "",
|
||||
mqtt_wgsn: "",
|
||||
mqtt_port: "",
|
||||
mqtt_keepalive: "",
|
||||
mqtt_tls: false,
|
||||
mqtt_clearsession: false,
|
||||
// mqtt_sssjfbzt:"",
|
||||
mqtt_qos: "0",
|
||||
// code: 'console.log("Hello World")',
|
||||
// lineNumbers: true, // true为编辑模式， false只展示不可编辑
|
||||
points: [
|
||||
{
|
||||
id: 1,
|
||||
label: "Device1",
|
||||
children: [
|
||||
{
|
||||
id: 3,
|
||||
label: "tag0001",
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
label: "tag0002",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
label: "Device1",
|
||||
children: [
|
||||
{
|
||||
id: 5,
|
||||
label: "tag0003",
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
label: "tag0004",
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
choose_point: false,
|
||||
options1: [
|
||||
{
|
||||
value: "0",
|
||||
label: "0",
|
||||
},
|
||||
{
|
||||
value: "1",
|
||||
label: "1",
|
||||
},
|
||||
{
|
||||
value: "2",
|
||||
label: "2",
|
||||
},
|
||||
],
|
||||
labelPosition: "left",
|
||||
formLabelWidth: "114px",
|
||||
input1: 192,
|
||||
add_passage: false,
|
||||
rightMenu: "",
|
||||
dialogVisible: true,
|
||||
isAdd: false,
|
||||
datas: [
|
||||
{
|
||||
label: "Gateway",
|
||||
children: [
|
||||
{
|
||||
label: "数据采集",
|
||||
children: [
|
||||
{
|
||||
label: "I/O点",
|
||||
},
|
||||
{
|
||||
label: "用户点",
|
||||
},
|
||||
{
|
||||
label: "计算点",
|
||||
},
|
||||
{
|
||||
label: "系统点",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "上云服务",
|
||||
children: [
|
||||
{
|
||||
label: "标准 MQTT",
|
||||
},
|
||||
{
|
||||
label: "AWS loT",
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
defaultProps: {
|
||||
children: "children",
|
||||
label: "label",
|
||||
},
|
||||
// 右边添加设备的字段
|
||||
options2:[
|
||||
{
|
||||
label:"有线区精雕1",
|
||||
value:"无线区精雕1",
|
||||
},
|
||||
{
|
||||
|
||||
}
|
||||
],
|
||||
options3: [{
|
||||
value: "MachinePamHID909",
|
||||
label: "MachinePamHID909",
|
||||
}, {
|
||||
value: "MachinePamHID910",
|
||||
label: "MachinePamHID910",
|
||||
}, {
|
||||
value: "MachinePamHID911",
|
||||
label: "MachinePamHID911",
|
||||
}, {
|
||||
value: "MachinePamHID912",
|
||||
label: "MachinePamHID912",
|
||||
}, {
|
||||
value: "MachinePamHID913",
|
||||
label: "MachinePamHID913",
|
||||
}, {
|
||||
value: "MachinePamHID914",
|
||||
label: "MachinePamHID914",
|
||||
}, {
|
||||
value: "MachinePamHID915",
|
||||
label: "MachinePamHID915",
|
||||
}, {
|
||||
value: "MachinePamHID916",
|
||||
label: "MachinePamHID916",
|
||||
}, {
|
||||
value: "MachinePamHID917",
|
||||
label: "MachinePamHID917",
|
||||
}, {
|
||||
value: "MachinePamHID918",
|
||||
label: "MachinePamHID918",
|
||||
}, {
|
||||
value: "MachinePamHID919",
|
||||
label: "MachinePamHID919",
|
||||
}, {
|
||||
value: "MachinePamHID920",
|
||||
label: "MachinePamHID920",
|
||||
}, {
|
||||
value: "MachinePamHID921",
|
||||
label: "MachinePamHID921",
|
||||
}, {
|
||||
value: "MachinePamHID922",
|
||||
label: "MachinePamHID922",
|
||||
}, {
|
||||
value: "MachinePamHID923",
|
||||
label: "MachinePamHID923",
|
||||
}, {
|
||||
value: "MachinePamHID924",
|
||||
label: "MachinePamHID924",
|
||||
}, {
|
||||
value: "MachinePamHID925",
|
||||
label: "MachinePamHID925",
|
||||
}, {
|
||||
value: "MachinePamHID926",
|
||||
label: "MachinePamHID926",
|
||||
}, {
|
||||
value: "MachinePamHID927",
|
||||
label: "MachinePamHID927",
|
||||
}, {
|
||||
value: "MachinePamHID928",
|
||||
label: "MachinePamHID928",
|
||||
}, {
|
||||
value: "MachinePamHID929",
|
||||
label: "MachinePamHID929",
|
||||
}, {
|
||||
value: "MachinePamHID930",
|
||||
label: "MachinePamHID930",
|
||||
}, {
|
||||
value: "MachinePamHID931",
|
||||
label: "MachinePamHID931",
|
||||
}, {
|
||||
value: "MachinePamHID932",
|
||||
label: "MachinePamHID932",
|
||||
}, {
|
||||
value: "MachinePamHID933",
|
||||
label: "MachinePamHID933",
|
||||
}, {
|
||||
value: "MachinePamHID934",
|
||||
label: "MachinePamHID934",
|
||||
}, {
|
||||
value: "MachinePamHID935",
|
||||
label: "MachinePamHID935",
|
||||
}, {
|
||||
value: "MachinePamHID936",
|
||||
label: "MachinePamHID936",
|
||||
}, {
|
||||
value: "MachinePamHID937",
|
||||
label: "MachinePamHID937",
|
||||
}, {
|
||||
value: "MachinePamHID938",
|
||||
label: "MachinePamHID938",
|
||||
}],
|
||||
tableData: [
|
||||
{
|
||||
mqtt_cjd_sbmc: "Device1",
|
||||
mqtt_cjd_tagid: "Device1.tag0001",
|
||||
},
|
||||
],
|
||||
rules: {
|
||||
server_ip: [
|
||||
{ required: true, message: "请输入服务器IP", trigger: "blur" },
|
||||
],
|
||||
port_number: [
|
||||
{ required: true, message: "请输入端口", trigger: "blur" },
|
||||
],
|
||||
gateway_id: [
|
||||
{ required: true, message: "请输入网关ID", trigger: "blur" },
|
||||
],
|
||||
data_theme: [
|
||||
{ required: true, message: "请输入主题", trigger: "blur" },
|
||||
],
|
||||
upload_mode: [
|
||||
{ required: true, message: "请输入上传模式", trigger: "blur" },
|
||||
],
|
||||
upload_week: [
|
||||
{ required: true, message: "请输入上传周期", trigger: "blur" },
|
||||
],
|
||||
data_filter: [
|
||||
{ required: true, message: "请输入数据过滤", trigger: "blur" },
|
||||
],
|
||||
},
|
||||
};
|
||||
},
|
||||
mounted() {},
|
||||
methods: {
|
||||
treeNodeClick() {
|
||||
this.add_passage = true;
|
||||
},
|
||||
getDriveName() {
|
||||
this.diag_drive = true;
|
||||
},
|
||||
handleSelect(key) {
|
||||
console.log(key);
|
||||
if (key == 1 && this.isAdd == false) {
|
||||
this.choose_point = true;
|
||||
} else if (key == 1 && this.isAdd == true) {
|
||||
this.$message({
|
||||
message: '添加失败,只能添加一条数据',
|
||||
type: 'error'
|
||||
});
|
||||
return false
|
||||
}
|
||||
},
|
||||
highlighter(code) {
|
||||
return highlight(code, languages.js); //returns html
|
||||
},
|
||||
closeMenu(ev) {
|
||||
console.log({ ev });
|
||||
this.dialogVisible = false;
|
||||
},
|
||||
savePoint() {
|
||||
this.choose_point = false;
|
||||
this.isAdd = true;
|
||||
this.$message({
|
||||
message: '添加成功',
|
||||
type: 'success'
|
||||
});
|
||||
},
|
||||
},
|
||||
directives: {
|
||||
"click-outside": {
|
||||
bind: function (el, binding, vnode) {
|
||||
console.log("el", el);
|
||||
console.log("binding", binding);
|
||||
el.event = function (event) {
|
||||
// 检查点击是否发生在节点之内（包括子节点）
|
||||
if (!(el == event.target || el.contains(event.target))) {
|
||||
// 如果没有，则触发调用
|
||||
// 若绑定值为函数，则执行
|
||||
// 这里我们可以通过钩子函数中的 vnode.context，来获取当前组件的作用域
|
||||
if (typeof vnode.context[binding.expression] == "function") {
|
||||
vnode.context[binding.expression](event);
|
||||
}
|
||||
}
|
||||
};
|
||||
// 绑定事件
|
||||
// 设置为true，代表在DOM树中，注册了该listener的元素，会先于它下方的任何事件目标，接收到该事件。
|
||||
document.body.addEventListener("click", el.event, true);
|
||||
},
|
||||
unbind: function (el) {
|
||||
// 解绑事件
|
||||
document.body.removeEventListener("click", el.event, true);
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.tree_menu {
|
||||
position: absolute;
|
||||
width: 286px;
|
||||
height: 753px;
|
||||
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);
|
||||
}
|
||||
|
||||
/deep/ .pas_params {
|
||||
.info_play {
|
||||
width: 56px;
|
||||
height: 20px;
|
||||
color: rgba(16, 16, 16, 1);
|
||||
font-size: 14px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.el-divider--horizontal {
|
||||
margin: 8px 0;
|
||||
}
|
||||
|
||||
.el-button {
|
||||
width: 80px;
|
||||
height: 30px;
|
||||
line-height: 0.5;
|
||||
}
|
||||
|
||||
.el-col-12:last-child {
|
||||
padding-right: 150px;
|
||||
}
|
||||
|
||||
.el-col-12:first-child {
|
||||
padding-right: 28px;
|
||||
}
|
||||
|
||||
.el-row {
|
||||
height: 40px;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
|
||||
.el-col-1 {
|
||||
text-align: center;
|
||||
line-height: 52px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.el-col-9 {
|
||||
padding-left: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.el-input__inner {
|
||||
height: 30px;
|
||||
text-align: left;
|
||||
padding: 0px 8px;
|
||||
}
|
||||
|
||||
.content {
|
||||
position: absolute;
|
||||
left: 362px;
|
||||
top: 104px;
|
||||
width: 1220px;
|
||||
height: 836px;
|
||||
line-height: 20px;
|
||||
padding-left: 36px;
|
||||
background-color: rgba(255, 255, 255, 1);
|
||||
color: rgba(16, 16, 16, 1);
|
||||
font-size: 14px;
|
||||
border: 1px solid rgba(187, 187, 187, 1);
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
|
||||
.el-form-item {
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
/deep/ .con_left {
|
||||
.el-con-5 {
|
||||
width: 43px;
|
||||
}
|
||||
}
|
||||
|
||||
.con_left {
|
||||
width: 709px;
|
||||
position: relative;
|
||||
|
||||
.my-editor {
|
||||
background: #2d2d2d;
|
||||
color: #ccc;
|
||||
|
||||
font-family: Fira code, Fira Mono, Consolas, Menlo, Courier, monospace;
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
/* optional */
|
||||
.prism-editor__textarea:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
/* not required: */
|
||||
.height-300 {
|
||||
width: 491px;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.infos {
|
||||
width: 60px;
|
||||
position: absolute;
|
||||
left: 208px;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.con_left_footer {
|
||||
position: absolute;
|
||||
left: 499px;
|
||||
top: 720px;
|
||||
}
|
||||
}
|
||||
|
||||
.con_right {
|
||||
width: 480px;
|
||||
|
||||
.dialog-footer {
|
||||
.el-button {
|
||||
width: 80px;
|
||||
height: 30px;
|
||||
line-height: 0.5;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
@ -0,0 +1,717 @@
|
|||
<!-- 斥候MQTT云 -->
|
||||
<template>
|
||||
<div class="Clone">
|
||||
<!-- 设置树形控件 -->
|
||||
<div v-click-outside="closeMenu">
|
||||
<!-- <el-button type="info" plain @click="dialogVisible = true">斥侯MQTT云</el-button> -->
|
||||
<div v-show="dialogVisible" class="tree_menu">
|
||||
<el-tree
|
||||
:data="datas"
|
||||
:props="defaultProps"
|
||||
@node-click="treeNodeClick"
|
||||
></el-tree>
|
||||
<!-- 树形控件右键组件 -->
|
||||
</div>
|
||||
</div>
|
||||
<div class="pas_params" v-show="add_passage">
|
||||
<div class="content">
|
||||
<div class="con_left">
|
||||
<el-form
|
||||
:label-position="labelPosition"
|
||||
:rules="rules"
|
||||
ref="ruleForm"
|
||||
>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-form-item>
|
||||
<el-checkbox v-model="mqtt_qiyong">启用</el-checkbox>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item
|
||||
label="服务器IP:"
|
||||
:label-width="formLabelWidth"
|
||||
prop="mqtt_ip"
|
||||
>
|
||||
<el-row>
|
||||
<el-col :span="5">
|
||||
<el-input
|
||||
v-model="mqtt_ip1"
|
||||
style="width: 43px; height: 30px"
|
||||
></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1">. </el-col>
|
||||
<el-col :span="5">
|
||||
<el-input
|
||||
v-model="mqtt_ip2"
|
||||
style="width: 43px; height: 30px"
|
||||
></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1">.</el-col>
|
||||
<el-col :span="5">
|
||||
<el-input
|
||||
v-model="mqtt_ip3"
|
||||
style="width: 43px; height: 30px"
|
||||
></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1">.</el-col>
|
||||
<el-col :span="5">
|
||||
<el-input
|
||||
v-model="mqtt_ip4"
|
||||
style="width: 43px; height: 30px"
|
||||
></el-input>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-form-item
|
||||
label="网关SN:"
|
||||
:label-width="formLabelWidth"
|
||||
prop="mqtt_wgsn"
|
||||
>
|
||||
<el-input
|
||||
v-model="mqtt_wgsn"
|
||||
placeholder=""
|
||||
style="width: 200px; height: 30px"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-form-item
|
||||
label="端口:"
|
||||
:label-width="formLabelWidth"
|
||||
prop="mqtt_port"
|
||||
>
|
||||
<el-input
|
||||
v-model="mqtt_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="Keep Alive(s):"
|
||||
:label-width="formLabelWidth"
|
||||
prop="mqtt_keepalive"
|
||||
>
|
||||
<el-input
|
||||
v-model="mqtt_keepalive"
|
||||
placeholder="64"
|
||||
style="width: 200px; height: 30px"
|
||||
></el-input>
|
||||
<div class="infos">2-60000</div>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item
|
||||
label="TLS加密:"
|
||||
:label-width="formLabelWidth"
|
||||
prop="mqtt_tls"
|
||||
>
|
||||
<el-switch v-model="mqtt_tls"></el-switch>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item
|
||||
label="清除Session:"
|
||||
:label-width="formLabelWidth"
|
||||
prop="mqtt_clearsession"
|
||||
>
|
||||
<el-switch v-model="mqtt_clearsession"></el-switch>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<h3 class="info_play">信息发布</h3>
|
||||
<el-divider></el-divider>
|
||||
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item
|
||||
label="Qos(MQTT):"
|
||||
:label-width="formLabelWidth"
|
||||
prop="upload_week"
|
||||
>
|
||||
<el-select
|
||||
v-model="mqtt_qos"
|
||||
placeholder="请选择"
|
||||
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-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<!-- <el-col :span="12">
|
||||
<el-form-item label="retained:" :label-width="formLabelWidth" prop="retained">
|
||||
<el-switch v-model="value1"></el-switch>
|
||||
</el-form-item>
|
||||
</el-col> -->
|
||||
</el-row>
|
||||
<!-- <el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="入口函数:" :label-width="formLabelWidth" prop="upload_week">
|
||||
<el-input v-model="input1" placeholder="64" style="width: 200px;height:30px"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row> -->
|
||||
<!-- <el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="函数代码:" :label-width="formLabelWidth" prop="upload_week">
|
||||
<prism-editor class="my-editor height-300" v-model="code" :highlight="highlighter"
|
||||
:line-numbers="lineNumbers"></prism-editor>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row> -->
|
||||
<div class="con_left_footer">
|
||||
<el-button type="primary" @click="add_passage = false"
|
||||
>保 存</el-button
|
||||
>
|
||||
<el-button @click="add_passage = false">取 消</el-button>
|
||||
</div>
|
||||
</el-form>
|
||||
</div>
|
||||
<div>
|
||||
<div class="con_right">
|
||||
<el-menu
|
||||
class="el-menu-demo"
|
||||
mode="horizontal"
|
||||
@select="handleSelect"
|
||||
>
|
||||
<el-menu-item index="1">添加</el-menu-item>
|
||||
<el-menu-item index="2">保存</el-menu-item>
|
||||
<el-menu-item index="3">删除</el-menu-item>
|
||||
</el-menu>
|
||||
</div>
|
||||
<el-table ref="singleTable" :data="tableData" style="width: 100%">
|
||||
<el-table-column type="index"> </el-table-column>
|
||||
<el-table-column property="mqtt_cjd_sbmc" label="设备名称">
|
||||
<template slot-scope="scope">
|
||||
<el-select v-model="scope.row.mqtt_cjd_sbmc" placeholder="">
|
||||
<el-option v-for="(option,index) in options2" :key="index" :label="option.label" :value="option.value"></el-option>
|
||||
</el-select>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column property="mqtt_cjd_tagid" label="TagID">
|
||||
<template slot-scope="scope">
|
||||
<el-select v-model="scope.row.mqtt_cjd_tagid" placeholder="">
|
||||
<el-option v-for="(option,index) in options3" :key="index" :label="option.label" :value="option.value"></el-option>
|
||||
</el-select>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 添加按钮下显示出来的弹框信息 -->
|
||||
<div>
|
||||
<el-dialog title="选择点" :visible.sync="choose_point" width="30%">
|
||||
<el-tree
|
||||
:data="points"
|
||||
show-checkbox
|
||||
node-key="id"
|
||||
:default-expanded-keys="[1, 2]"
|
||||
:default-checked-keys="[3, 4, 5, 6]"
|
||||
:props="defaultProps"
|
||||
>
|
||||
</el-tree>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="savePoint"
|
||||
>保 存</el-button
|
||||
>
|
||||
<el-button @click="choose_point = false">取 消</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { PrismEditor } from "vue-prism-editor";
|
||||
import "vue-prism-editor/dist/prismeditor.min.css"; // import the styles somewhere
|
||||
// import highlighting library (you can use any library you want just return html string)
|
||||
import { highlight, languages } from "prismjs/components/prism-core";
|
||||
import "prismjs/components/prism-clike";
|
||||
import "prismjs/components/prism-javascript";
|
||||
import "prismjs/themes/prism-tomorrow.css"; // import syntax highlighting styles
|
||||
|
||||
export default {
|
||||
name: "ChiClone",
|
||||
components: {
|
||||
PrismEditor,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
mqtt_qiyong: true,
|
||||
mqtt_ip: "",
|
||||
mqtt_ip1: "",
|
||||
mqtt_ip2: "",
|
||||
mqtt_ip3: "",
|
||||
mqtt_ip4: "",
|
||||
mqtt_wgsn: "",
|
||||
mqtt_port: "",
|
||||
mqtt_keepalive: "",
|
||||
mqtt_tls: false,
|
||||
mqtt_clearsession: false,
|
||||
// mqtt_sssjfbzt:"",
|
||||
mqtt_qos: "0",
|
||||
// code: 'console.log("Hello World")',
|
||||
// lineNumbers: true, // true为编辑模式， false只展示不可编辑
|
||||
points: [
|
||||
{
|
||||
id: 1,
|
||||
label: "Device1",
|
||||
children: [
|
||||
{
|
||||
id: 3,
|
||||
label: "tag0001",
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
label: "tag0002",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
label: "Device1",
|
||||
children: [
|
||||
{
|
||||
id: 5,
|
||||
label: "tag0003",
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
label: "tag0004",
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
choose_point: false,
|
||||
options1: [
|
||||
{
|
||||
value: "0",
|
||||
label: "0",
|
||||
},
|
||||
{
|
||||
value: "1",
|
||||
label: "1",
|
||||
},
|
||||
{
|
||||
value: "2",
|
||||
label: "2",
|
||||
},
|
||||
],
|
||||
labelPosition: "left",
|
||||
formLabelWidth: "114px",
|
||||
input1: 192,
|
||||
add_passage: false,
|
||||
rightMenu: "",
|
||||
dialogVisible: true,
|
||||
isAdd: false,
|
||||
datas: [
|
||||
{
|
||||
label: "Gateway",
|
||||
children: [
|
||||
{
|
||||
label: "数据采集",
|
||||
children: [
|
||||
{
|
||||
label: "I/O点",
|
||||
},
|
||||
{
|
||||
label: "用户点",
|
||||
},
|
||||
{
|
||||
label: "计算点",
|
||||
},
|
||||
{
|
||||
label: "系统点",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "上云服务",
|
||||
children: [
|
||||
{
|
||||
label: "标准 MQTT",
|
||||
},
|
||||
{
|
||||
label: "AWS loT",
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
defaultProps: {
|
||||
children: "children",
|
||||
label: "label",
|
||||
},
|
||||
// 右边添加设备的字段
|
||||
options2:[
|
||||
{
|
||||
label:"有线区精雕1",
|
||||
value:"有线区精雕1",
|
||||
},
|
||||
{
|
||||
label:"无线区精雕1",
|
||||
value:"无线区精雕1",
|
||||
}
|
||||
],
|
||||
options3: [{
|
||||
value: "MachinePamHID909",
|
||||
label: "MachinePamHID909",
|
||||
}, {
|
||||
value: "MachinePamHID910",
|
||||
label: "MachinePamHID910",
|
||||
}, {
|
||||
value: "MachinePamHID911",
|
||||
label: "MachinePamHID911",
|
||||
}, {
|
||||
value: "MachinePamHID912",
|
||||
label: "MachinePamHID912",
|
||||
}, {
|
||||
value: "MachinePamHID913",
|
||||
label: "MachinePamHID913",
|
||||
}, {
|
||||
value: "MachinePamHID914",
|
||||
label: "MachinePamHID914",
|
||||
}, {
|
||||
value: "MachinePamHID915",
|
||||
label: "MachinePamHID915",
|
||||
}, {
|
||||
value: "MachinePamHID916",
|
||||
label: "MachinePamHID916",
|
||||
}, {
|
||||
value: "MachinePamHID917",
|
||||
label: "MachinePamHID917",
|
||||
}, {
|
||||
value: "MachinePamHID918",
|
||||
label: "MachinePamHID918",
|
||||
}, {
|
||||
value: "MachinePamHID919",
|
||||
label: "MachinePamHID919",
|
||||
}, {
|
||||
value: "MachinePamHID920",
|
||||
label: "MachinePamHID920",
|
||||
}, {
|
||||
value: "MachinePamHID921",
|
||||
label: "MachinePamHID921",
|
||||
}, {
|
||||
value: "MachinePamHID922",
|
||||
label: "MachinePamHID922",
|
||||
}, {
|
||||
value: "MachinePamHID923",
|
||||
label: "MachinePamHID923",
|
||||
}, {
|
||||
value: "MachinePamHID924",
|
||||
label: "MachinePamHID924",
|
||||
}, {
|
||||
value: "MachinePamHID925",
|
||||
label: "MachinePamHID925",
|
||||
}, {
|
||||
value: "MachinePamHID926",
|
||||
label: "MachinePamHID926",
|
||||
}, {
|
||||
value: "MachinePamHID927",
|
||||
label: "MachinePamHID927",
|
||||
}, {
|
||||
value: "MachinePamHID928",
|
||||
label: "MachinePamHID928",
|
||||
}, {
|
||||
value: "MachinePamHID929",
|
||||
label: "MachinePamHID929",
|
||||
}, {
|
||||
value: "MachinePamHID930",
|
||||
label: "MachinePamHID930",
|
||||
}, {
|
||||
value: "MachinePamHID931",
|
||||
label: "MachinePamHID931",
|
||||
}, {
|
||||
value: "MachinePamHID932",
|
||||
label: "MachinePamHID932",
|
||||
}, {
|
||||
value: "MachinePamHID933",
|
||||
label: "MachinePamHID933",
|
||||
}, {
|
||||
value: "MachinePamHID934",
|
||||
label: "MachinePamHID934",
|
||||
}, {
|
||||
value: "MachinePamHID935",
|
||||
label: "MachinePamHID935",
|
||||
}, {
|
||||
value: "MachinePamHID936",
|
||||
label: "MachinePamHID936",
|
||||
}, {
|
||||
value: "MachinePamHID937",
|
||||
label: "MachinePamHID937",
|
||||
}, {
|
||||
value: "MachinePamHID938",
|
||||
label: "MachinePamHID938",
|
||||
}],
|
||||
tableData: [
|
||||
{
|
||||
mqtt_cjd_sbmc: "Device1",
|
||||
mqtt_cjd_tagid: "Device1.tag0001",
|
||||
},
|
||||
],
|
||||
rules: {
|
||||
server_ip: [
|
||||
{ required: true, message: "请输入服务器IP", trigger: "blur" },
|
||||
],
|
||||
port_number: [
|
||||
{ required: true, message: "请输入端口", trigger: "blur" },
|
||||
],
|
||||
gateway_id: [
|
||||
{ required: true, message: "请输入网关ID", trigger: "blur" },
|
||||
],
|
||||
data_theme: [
|
||||
{ required: true, message: "请输入主题", trigger: "blur" },
|
||||
],
|
||||
upload_mode: [
|
||||
{ required: true, message: "请输入上传模式", trigger: "blur" },
|
||||
],
|
||||
upload_week: [
|
||||
{ required: true, message: "请输入上传周期", trigger: "blur" },
|
||||
],
|
||||
data_filter: [
|
||||
{ required: true, message: "请输入数据过滤", trigger: "blur" },
|
||||
],
|
||||
},
|
||||
};
|
||||
},
|
||||
mounted() {},
|
||||
methods: {
|
||||
treeNodeClick() {
|
||||
this.add_passage = true;
|
||||
},
|
||||
getDriveName() {
|
||||
this.diag_drive = true;
|
||||
},
|
||||
handleSelect(key) {
|
||||
console.log(key);
|
||||
if (key == 1 && this.isAdd == false) {
|
||||
this.choose_point = true;
|
||||
} else if (key == 1 && this.isAdd == true) {
|
||||
this.$message({
|
||||
message: '添加失败,只能添加一条数据',
|
||||
type: 'error'
|
||||
});
|
||||
return false
|
||||
}
|
||||
},
|
||||
highlighter(code) {
|
||||
return highlight(code, languages.js); //returns html
|
||||
},
|
||||
closeMenu(ev) {
|
||||
console.log({ ev });
|
||||
this.dialogVisible = false;
|
||||
},
|
||||
savePoint() {
|
||||
this.choose_point = false;
|
||||
this.isAdd = true;
|
||||
this.$message({
|
||||
message: '添加成功',
|
||||
type: 'success'
|
||||
});
|
||||
},
|
||||
},
|
||||
directives: {
|
||||
"click-outside": {
|
||||
bind: function (el, binding, vnode) {
|
||||
console.log("el", el);
|
||||
console.log("binding", binding);
|
||||
el.event = function (event) {
|
||||
// 检查点击是否发生在节点之内（包括子节点）
|
||||
if (!(el == event.target || el.contains(event.target))) {
|
||||
// 如果没有，则触发调用
|
||||
// 若绑定值为函数，则执行
|
||||
// 这里我们可以通过钩子函数中的 vnode.context，来获取当前组件的作用域
|
||||
if (typeof vnode.context[binding.expression] == "function") {
|
||||
vnode.context[binding.expression](event);
|
||||
}
|
||||
}
|
||||
};
|
||||
// 绑定事件
|
||||
// 设置为true，代表在DOM树中，注册了该listener的元素，会先于它下方的任何事件目标，接收到该事件。
|
||||
document.body.addEventListener("click", el.event, true);
|
||||
},
|
||||
unbind: function (el) {
|
||||
// 解绑事件
|
||||
document.body.removeEventListener("click", el.event, true);
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.tree_menu {
|
||||
position: absolute;
|
||||
width: 286px;
|
||||
height: 753px;
|
||||
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);
|
||||
}
|
||||
|
||||
/deep/ .pas_params {
|
||||
.info_play {
|
||||
width: 56px;
|
||||
height: 20px;
|
||||
color: rgba(16, 16, 16, 1);
|
||||
font-size: 14px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.el-divider--horizontal {
|
||||
margin: 8px 0;
|
||||
}
|
||||
|
||||
.el-button {
|
||||
width: 80px;
|
||||
height: 30px;
|
||||
line-height: 0.5;
|
||||
}
|
||||
|
||||
.el-col-12:last-child {
|
||||
padding-right: 150px;
|
||||
}
|
||||
|
||||
.el-col-12:first-child {
|
||||
padding-right: 28px;
|
||||
}
|
||||
|
||||
.el-row {
|
||||
height: 40px;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
|
||||
.el-col-1 {
|
||||
text-align: center;
|
||||
line-height: 52px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.el-col-9 {
|
||||
padding-left: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.el-input__inner {
|
||||
height: 30px;
|
||||
text-align: left;
|
||||
padding: 0px 8px;
|
||||
}
|
||||
|
||||
.content {
|
||||
position: absolute;
|
||||
left: 362px;
|
||||
top: 104px;
|
||||
width: 1220px;
|
||||
height: 836px;
|
||||
line-height: 20px;
|
||||
padding-left: 36px;
|
||||
background-color: rgba(255, 255, 255, 1);
|
||||
color: rgba(16, 16, 16, 1);
|
||||
font-size: 14px;
|
||||
border: 1px solid rgba(187, 187, 187, 1);
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
|
||||
.el-form-item {
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
/deep/ .con_left {
|
||||
.el-con-5 {
|
||||
width: 43px;
|
||||
}
|
||||
}
|
||||
|
||||
.con_left {
|
||||
width: 709px;
|
||||
position: relative;
|
||||
|
||||
.my-editor {
|
||||
background: #2d2d2d;
|
||||
color: #ccc;
|
||||
|
||||
font-family: Fira code, Fira Mono, Consolas, Menlo, Courier, monospace;
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
/* optional */
|
||||
.prism-editor__textarea:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
/* not required: */
|
||||
.height-300 {
|
||||
width: 491px;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.infos {
|
||||
width: 60px;
|
||||
position: absolute;
|
||||
left: 208px;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.con_left_footer {
|
||||
position: absolute;
|
||||
left: 499px;
|
||||
top: 720px;
|
||||
}
|
||||
}
|
||||
|
||||
.con_right {
|
||||
width: 480px;
|
||||
|
||||
.dialog-footer {
|
||||
.el-button {
|
||||
width: 80px;
|
||||
height: 30px;
|
||||
line-height: 0.5;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
@ -0,0 +1,717 @@
|
|||
<!-- 斥候MQTT云 -->
|
||||
<template>
|
||||
<div class="Clone">
|
||||
<!-- 设置树形控件 -->
|
||||
<div v-click-outside="closeMenu">
|
||||
<!-- <el-button type="info" plain @click="dialogVisible = true">斥侯MQTT云</el-button> -->
|
||||
<div v-show="dialogVisible" class="tree_menu">
|
||||
<el-tree
|
||||
:data="datas"
|
||||
:props="defaultProps"
|
||||
@node-click="treeNodeClick"
|
||||
></el-tree>
|
||||
<!-- 树形控件右键组件 -->
|
||||
</div>
|
||||
</div>
|
||||
<div class="pas_params" v-show="add_passage">
|
||||
<div class="content">
|
||||
<div class="con_left">
|
||||
<el-form
|
||||
:label-position="labelPosition"
|
||||
:rules="rules"
|
||||
ref="ruleForm"
|
||||
>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-form-item>
|
||||
<el-checkbox v-model="mqtt_qiyong">启用</el-checkbox>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item
|
||||
label="服务器IP:"
|
||||
:label-width="formLabelWidth"
|
||||
prop="mqtt_ip"
|
||||
>
|
||||
<el-row>
|
||||
<el-col :span="5">
|
||||
<el-input
|
||||
v-model="mqtt_ip1"
|
||||
style="width: 43px; height: 30px"
|
||||
></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1">. </el-col>
|
||||
<el-col :span="5">
|
||||
<el-input
|
||||
v-model="mqtt_ip2"
|
||||
style="width: 43px; height: 30px"
|
||||
></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1">.</el-col>
|
||||
<el-col :span="5">
|
||||
<el-input
|
||||
v-model="mqtt_ip3"
|
||||
style="width: 43px; height: 30px"
|
||||
></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1">.</el-col>
|
||||
<el-col :span="5">
|
||||
<el-input
|
||||
v-model="mqtt_ip4"
|
||||
style="width: 43px; height: 30px"
|
||||
></el-input>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-form-item
|
||||
label="网关SN:"
|
||||
:label-width="formLabelWidth"
|
||||
prop="mqtt_wgsn"
|
||||
>
|
||||
<el-input
|
||||
v-model="mqtt_wgsn"
|
||||
placeholder=""
|
||||
style="width: 200px; height: 30px"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-form-item
|
||||
label="端口:"
|
||||
:label-width="formLabelWidth"
|
||||
prop="mqtt_port"
|
||||
>
|
||||
<el-input
|
||||
v-model="mqtt_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="Keep Alive(s):"
|
||||
:label-width="formLabelWidth"
|
||||
prop="mqtt_keepalive"
|
||||
>
|
||||
<el-input
|
||||
v-model="mqtt_keepalive"
|
||||
placeholder="64"
|
||||
style="width: 200px; height: 30px"
|
||||
></el-input>
|
||||
<div class="infos">2-60000</div>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item
|
||||
label="TLS加密:"
|
||||
:label-width="formLabelWidth"
|
||||
prop="mqtt_tls"
|
||||
>
|
||||
<el-switch v-model="mqtt_tls"></el-switch>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item
|
||||
label="清除Session:"
|
||||
:label-width="formLabelWidth"
|
||||
prop="mqtt_clearsession"
|
||||
>
|
||||
<el-switch v-model="mqtt_clearsession"></el-switch>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<h3 class="info_play">信息发布</h3>
|
||||
<el-divider></el-divider>
|
||||
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item
|
||||
label="Qos(MQTT):"
|
||||
:label-width="formLabelWidth"
|
||||
prop="upload_week"
|
||||
>
|
||||
<el-select
|
||||
v-model="mqtt_qos"
|
||||
placeholder="请选择"
|
||||
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-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<!-- <el-col :span="12">
|
||||
<el-form-item label="retained:" :label-width="formLabelWidth" prop="retained">
|
||||
<el-switch v-model="value1"></el-switch>
|
||||
</el-form-item>
|
||||
</el-col> -->
|
||||
</el-row>
|
||||
<!-- <el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="入口函数:" :label-width="formLabelWidth" prop="upload_week">
|
||||
<el-input v-model="input1" placeholder="64" style="width: 200px;height:30px"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row> -->
|
||||
<!-- <el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="函数代码:" :label-width="formLabelWidth" prop="upload_week">
|
||||
<prism-editor class="my-editor height-300" v-model="code" :highlight="highlighter"
|
||||
:line-numbers="lineNumbers"></prism-editor>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row> -->
|
||||
<div class="con_left_footer">
|
||||
<el-button type="primary" @click="add_passage = false"
|
||||
>保 存</el-button
|
||||
>
|
||||
<el-button @click="add_passage = false">取 消</el-button>
|
||||
</div>
|
||||
</el-form>
|
||||
</div>
|
||||
<div>
|
||||
<div class="con_right">
|
||||
<el-menu
|
||||
class="el-menu-demo"
|
||||
mode="horizontal"
|
||||
@select="handleSelect"
|
||||
>
|
||||
<el-menu-item index="1">添加</el-menu-item>
|
||||
<el-menu-item index="2">保存</el-menu-item>
|
||||
<el-menu-item index="3">删除</el-menu-item>
|
||||
</el-menu>
|
||||
</div>
|
||||
<el-table ref="singleTable" :data="tableData" style="width: 100%">
|
||||
<el-table-column type="index"> </el-table-column>
|
||||
<el-table-column property="mqtt_cjd_sbmc" label="设备名称">
|
||||
<template slot-scope="scope">
|
||||
<el-select v-model="scope.row.mqtt_cjd_sbmc" placeholder="">
|
||||
<el-option v-for="(option,index) in options2" :key="index" :label="option.label" :value="option.value"></el-option>
|
||||
</el-select>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column property="mqtt_cjd_tagid" label="TagID">
|
||||
<template slot-scope="scope">
|
||||
<el-select v-model="scope.row.mqtt_cjd_tagid" placeholder="">
|
||||
<el-option v-for="(option,index) in options3" :key="index" :label="option.label" :value="option.value"></el-option>
|
||||
</el-select>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 添加按钮下显示出来的弹框信息 -->
|
||||
<div>
|
||||
<el-dialog title="选择点" :visible.sync="choose_point" width="30%">
|
||||
<el-tree
|
||||
:data="points"
|
||||
show-checkbox
|
||||
node-key="id"
|
||||
:default-expanded-keys="[1, 2]"
|
||||
:default-checked-keys="[3, 4, 5, 6]"
|
||||
:props="defaultProps"
|
||||
>
|
||||
</el-tree>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="savePoint"
|
||||
>保 存</el-button
|
||||
>
|
||||
<el-button @click="choose_point = false">取 消</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { PrismEditor } from "vue-prism-editor";
|
||||
import "vue-prism-editor/dist/prismeditor.min.css"; // import the styles somewhere
|
||||
// import highlighting library (you can use any library you want just return html string)
|
||||
import { highlight, languages } from "prismjs/components/prism-core";
|
||||
import "prismjs/components/prism-clike";
|
||||
import "prismjs/components/prism-javascript";
|
||||
import "prismjs/themes/prism-tomorrow.css"; // import syntax highlighting styles
|
||||
|
||||
export default {
|
||||
name: "ChiClone",
|
||||
components: {
|
||||
PrismEditor,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
mqtt_qiyong: true,
|
||||
mqtt_ip: "",
|
||||
mqtt_ip1: "",
|
||||
mqtt_ip2: "",
|
||||
mqtt_ip3: "",
|
||||
mqtt_ip4: "",
|
||||
mqtt_wgsn: "",
|
||||
mqtt_port: "",
|
||||
mqtt_keepalive: "",
|
||||
mqtt_tls: false,
|
||||
mqtt_clearsession: false,
|
||||
// mqtt_sssjfbzt:"",
|
||||
mqtt_qos: "0",
|
||||
// code: 'console.log("Hello World")',
|
||||
// lineNumbers: true, // true为编辑模式， false只展示不可编辑
|
||||
points: [
|
||||
{
|
||||
id: 1,
|
||||
label: "Device1",
|
||||
children: [
|
||||
{
|
||||
id: 3,
|
||||
label: "tag0001",
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
label: "tag0002",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
label: "Device1",
|
||||
children: [
|
||||
{
|
||||
id: 5,
|
||||
label: "tag0003",
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
label: "tag0004",
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
choose_point: false,
|
||||
options1: [
|
||||
{
|
||||
value: "0",
|
||||
label: "0",
|
||||
},
|
||||
{
|
||||
value: "1",
|
||||
label: "1",
|
||||
},
|
||||
{
|
||||
value: "2",
|
||||
label: "2",
|
||||
},
|
||||
],
|
||||
labelPosition: "left",
|
||||
formLabelWidth: "114px",
|
||||
input1: 192,
|
||||
add_passage: false,
|
||||
rightMenu: "",
|
||||
dialogVisible: true,
|
||||
isAdd: false,
|
||||
datas: [
|
||||
{
|
||||
label: "Gateway",
|
||||
children: [
|
||||
{
|
||||
label: "数据采集",
|
||||
children: [
|
||||
{
|
||||
label: "I/O点",
|
||||
},
|
||||
{
|
||||
label: "用户点",
|
||||
},
|
||||
{
|
||||
label: "计算点",
|
||||
},
|
||||
{
|
||||
label: "系统点",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "上云服务",
|
||||
children: [
|
||||
{
|
||||
label: "标准 MQTT",
|
||||
},
|
||||
{
|
||||
label: "AWS loT",
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
defaultProps: {
|
||||
children: "children",
|
||||
label: "label",
|
||||
},
|
||||
// 右边添加设备的字段
|
||||
options2:[
|
||||
{
|
||||
label:"有线区精雕1",
|
||||
value:"有线区精雕1",
|
||||
},
|
||||
{
|
||||
label:"无线区精雕1",
|
||||
value:"无线区精雕1",
|
||||
}
|
||||
],
|
||||
options3: [{
|
||||
value: "MachinePamHID909",
|
||||
label: "MachinePamHID909",
|
||||
}, {
|
||||
value: "MachinePamHID910",
|
||||
label: "MachinePamHID910",
|
||||
}, {
|
||||
value: "MachinePamHID911",
|
||||
label: "MachinePamHID911",
|
||||
}, {
|
||||
value: "MachinePamHID912",
|
||||
label: "MachinePamHID912",
|
||||
}, {
|
||||
value: "MachinePamHID913",
|
||||
label: "MachinePamHID913",
|
||||
}, {
|
||||
value: "MachinePamHID914",
|
||||
label: "MachinePamHID914",
|
||||
}, {
|
||||
value: "MachinePamHID915",
|
||||
label: "MachinePamHID915",
|
||||
}, {
|
||||
value: "MachinePamHID916",
|
||||
label: "MachinePamHID916",
|
||||
}, {
|
||||
value: "MachinePamHID917",
|
||||
label: "MachinePamHID917",
|
||||
}, {
|
||||
value: "MachinePamHID918",
|
||||
label: "MachinePamHID918",
|
||||
}, {
|
||||
value: "MachinePamHID919",
|
||||
label: "MachinePamHID919",
|
||||
}, {
|
||||
value: "MachinePamHID920",
|
||||
label: "MachinePamHID920",
|
||||
}, {
|
||||
value: "MachinePamHID921",
|
||||
label: "MachinePamHID921",
|
||||
}, {
|
||||
value: "MachinePamHID922",
|
||||
label: "MachinePamHID922",
|
||||
}, {
|
||||
value: "MachinePamHID923",
|
||||
label: "MachinePamHID923",
|
||||
}, {
|
||||
value: "MachinePamHID924",
|
||||
label: "MachinePamHID924",
|
||||
}, {
|
||||
value: "MachinePamHID925",
|
||||
label: "MachinePamHID925",
|
||||
}, {
|
||||
value: "MachinePamHID926",
|
||||
label: "MachinePamHID926",
|
||||
}, {
|
||||
value: "MachinePamHID927",
|
||||
label: "MachinePamHID927",
|
||||
}, {
|
||||
value: "MachinePamHID928",
|
||||
label: "MachinePamHID928",
|
||||
}, {
|
||||
value: "MachinePamHID929",
|
||||
label: "MachinePamHID929",
|
||||
}, {
|
||||
value: "MachinePamHID930",
|
||||
label: "MachinePamHID930",
|
||||
}, {
|
||||
value: "MachinePamHID931",
|
||||
label: "MachinePamHID931",
|
||||
}, {
|
||||
value: "MachinePamHID932",
|
||||
label: "MachinePamHID932",
|
||||
}, {
|
||||
value: "MachinePamHID933",
|
||||
label: "MachinePamHID933",
|
||||
}, {
|
||||
value: "MachinePamHID934",
|
||||
label: "MachinePamHID934",
|
||||
}, {
|
||||
value: "MachinePamHID935",
|
||||
label: "MachinePamHID935",
|
||||
}, {
|
||||
value: "MachinePamHID936",
|
||||
label: "MachinePamHID936",
|
||||
}, {
|
||||
value: "MachinePamHID937",
|
||||
label: "MachinePamHID937",
|
||||
}, {
|
||||
value: "MachinePamHID938",
|
||||
label: "MachinePamHID938",
|
||||
}],
|
||||
tableData: [
|
||||
{
|
||||
mqtt_cjd_sbmc: "无线区精雕1",
|
||||
mqtt_cjd_tagid: "MachinePamHID909",
|
||||
},
|
||||
],
|
||||
rules: {
|
||||
server_ip: [
|
||||
{ required: true, message: "请输入服务器IP", trigger: "blur" },
|
||||
],
|
||||
port_number: [
|
||||
{ required: true, message: "请输入端口", trigger: "blur" },
|
||||
],
|
||||
gateway_id: [
|
||||
{ required: true, message: "请输入网关ID", trigger: "blur" },
|
||||
],
|
||||
data_theme: [
|
||||
{ required: true, message: "请输入主题", trigger: "blur" },
|
||||
],
|
||||
upload_mode: [
|
||||
{ required: true, message: "请输入上传模式", trigger: "blur" },
|
||||
],
|
||||
upload_week: [
|
||||
{ required: true, message: "请输入上传周期", trigger: "blur" },
|
||||
],
|
||||
data_filter: [
|
||||
{ required: true, message: "请输入数据过滤", trigger: "blur" },
|
||||
],
|
||||
},
|
||||
};
|
||||
},
|
||||
mounted() {},
|
||||
methods: {
|
||||
treeNodeClick() {
|
||||
this.add_passage = true;
|
||||
},
|
||||
getDriveName() {
|
||||
this.diag_drive = true;
|
||||
},
|
||||
handleSelect(key) {
|
||||
console.log(key);
|
||||
if (key == 1 && this.isAdd == false) {
|
||||
this.choose_point = true;
|
||||
} else if (key == 1 && this.isAdd == true) {
|
||||
this.$message({
|
||||
message: '添加失败,只能添加一条数据',
|
||||
type: 'error'
|
||||
});
|
||||
return false
|
||||
}
|
||||
},
|
||||
highlighter(code) {
|
||||
return highlight(code, languages.js); //returns html
|
||||
},
|
||||
closeMenu(ev) {
|
||||
console.log({ ev });
|
||||
this.dialogVisible = false;
|
||||
},
|
||||
savePoint() {
|
||||
this.choose_point = false;
|
||||
this.isAdd = true;
|
||||
this.$message({
|
||||
message: '添加成功',
|
||||
type: 'success'
|
||||
});
|
||||
},
|
||||
},
|
||||
directives: {
|
||||
"click-outside": {
|
||||
bind: function (el, binding, vnode) {
|
||||
console.log("el", el);
|
||||
console.log("binding", binding);
|
||||
el.event = function (event) {
|
||||
// 检查点击是否发生在节点之内（包括子节点）
|
||||
if (!(el == event.target || el.contains(event.target))) {
|
||||
// 如果没有，则触发调用
|
||||
// 若绑定值为函数，则执行
|
||||
// 这里我们可以通过钩子函数中的 vnode.context，来获取当前组件的作用域
|
||||
if (typeof vnode.context[binding.expression] == "function") {
|
||||
vnode.context[binding.expression](event);
|
||||
}
|
||||
}
|
||||
};
|
||||
// 绑定事件
|
||||
// 设置为true，代表在DOM树中，注册了该listener的元素，会先于它下方的任何事件目标，接收到该事件。
|
||||
document.body.addEventListener("click", el.event, true);
|
||||
},
|
||||
unbind: function (el) {
|
||||
// 解绑事件
|
||||
document.body.removeEventListener("click", el.event, true);
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.tree_menu {
|
||||
position: absolute;
|
||||
width: 286px;
|
||||
height: 753px;
|
||||
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);
|
||||
}
|
||||
|
||||
/deep/ .pas_params {
|
||||
.info_play {
|
||||
width: 56px;
|
||||
height: 20px;
|
||||
color: rgba(16, 16, 16, 1);
|
||||
font-size: 14px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.el-divider--horizontal {
|
||||
margin: 8px 0;
|
||||
}
|
||||
|
||||
.el-button {
|
||||
width: 80px;
|
||||
height: 30px;
|
||||
line-height: 0.5;
|
||||
}
|
||||
|
||||
.el-col-12:last-child {
|
||||
padding-right: 150px;
|
||||
}
|
||||
|
||||
.el-col-12:first-child {
|
||||
padding-right: 28px;
|
||||
}
|
||||
|
||||
.el-row {
|
||||
height: 40px;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
|
||||
.el-col-1 {
|
||||
text-align: center;
|
||||
line-height: 52px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.el-col-9 {
|
||||
padding-left: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.el-input__inner {
|
||||
height: 30px;
|
||||
text-align: left;
|
||||
padding: 0px 8px;
|
||||
}
|
||||
|
||||
.content {
|
||||
position: absolute;
|
||||
left: 362px;
|
||||
top: 104px;
|
||||
width: 1220px;
|
||||
height: 836px;
|
||||
line-height: 20px;
|
||||
padding-left: 36px;
|
||||
background-color: rgba(255, 255, 255, 1);
|
||||
color: rgba(16, 16, 16, 1);
|
||||
font-size: 14px;
|
||||
border: 1px solid rgba(187, 187, 187, 1);
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
|
||||
.el-form-item {
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
/deep/ .con_left {
|
||||
.el-con-5 {
|
||||
width: 43px;
|
||||
}
|
||||
}
|
||||
|
||||
.con_left {
|
||||
width: 709px;
|
||||
position: relative;
|
||||
|
||||
.my-editor {
|
||||
background: #2d2d2d;
|
||||
color: #ccc;
|
||||
|
||||
font-family: Fira code, Fira Mono, Consolas, Menlo, Courier, monospace;
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
/* optional */
|
||||
.prism-editor__textarea:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
/* not required: */
|
||||
.height-300 {
|
||||
width: 491px;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.infos {
|
||||
width: 60px;
|
||||
position: absolute;
|
||||
left: 208px;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.con_left_footer {
|
||||
position: absolute;
|
||||
left: 499px;
|
||||
top: 720px;
|
||||
}
|
||||
}
|
||||
|
||||
.con_right {
|
||||
width: 480px;
|
||||
|
||||
.dialog-footer {
|
||||
.el-button {
|
||||
width: 80px;
|
||||
height: 30px;
|
||||
line-height: 0.5;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
@ -0,0 +1,717 @@
|
|||
<!-- 斥候MQTT云 -->
|
||||
<template>
|
||||
<div class="Clone">
|
||||
<!-- 设置树形控件 -->
|
||||
<div v-click-outside="closeMenu">
|
||||
<!-- <el-button type="info" plain @click="dialogVisible = true">斥侯MQTT云</el-button> -->
|
||||
<div v-show="dialogVisible" class="tree_menu">
|
||||
<el-tree
|
||||
:data="datas"
|
||||
:props="defaultProps"
|
||||
@node-click="treeNodeClick"
|
||||
></el-tree>
|
||||
<!-- 树形控件右键组件 -->
|
||||
</div>
|
||||
</div>
|
||||
<div class="pas_params" v-show="add_passage">
|
||||
<div class="content">
|
||||
<div class="con_left">
|
||||
<el-form
|
||||
:label-position="labelPosition"
|
||||
:rules="rules"
|
||||
ref="ruleForm"
|
||||
>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-form-item>
|
||||
<el-checkbox v-model="mqtt_qiyong">启用</el-checkbox>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item
|
||||
label="服务器IP:"
|
||||
:label-width="formLabelWidth"
|
||||
prop="mqtt_ip"
|
||||
>
|
||||
<el-row>
|
||||
<el-col :span="5">
|
||||
<el-input
|
||||
v-model="mqtt_ip1"
|
||||
style="width: 43px; height: 30px"
|
||||
></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1">. </el-col>
|
||||
<el-col :span="5">
|
||||
<el-input
|
||||
v-model="mqtt_ip2"
|
||||
style="width: 43px; height: 30px"
|
||||
></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1">.</el-col>
|
||||
<el-col :span="5">
|
||||
<el-input
|
||||
v-model="mqtt_ip3"
|
||||
style="width: 43px; height: 30px"
|
||||
></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1">.</el-col>
|
||||
<el-col :span="5">
|
||||
<el-input
|
||||
v-model="mqtt_ip4"
|
||||
style="width: 43px; height: 30px"
|
||||
></el-input>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-form-item
|
||||
label="网关SN:"
|
||||
:label-width="formLabelWidth"
|
||||
prop="mqtt_wgsn"
|
||||
>
|
||||
<el-input
|
||||
v-model="mqtt_wgsn"
|
||||
placeholder=""
|
||||
style="width: 200px; height: 30px"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-form-item
|
||||
label="端口:"
|
||||
:label-width="formLabelWidth"
|
||||
prop="mqtt_port"
|
||||
>
|
||||
<el-input
|
||||
v-model="mqtt_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="Keep Alive(s):"
|
||||
:label-width="formLabelWidth"
|
||||
prop="mqtt_keepalive"
|
||||
>
|
||||
<el-input
|
||||
v-model="mqtt_keepalive"
|
||||
placeholder="64"
|
||||
style="width: 200px; height: 30px"
|
||||
></el-input>
|
||||
<div class="infos">2-60000</div>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item
|
||||
label="TLS加密:"
|
||||
:label-width="formLabelWidth"
|
||||
prop="mqtt_tls"
|
||||
>
|
||||
<el-switch v-model="mqtt_tls"></el-switch>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item
|
||||
label="清除Session:"
|
||||
:label-width="formLabelWidth"
|
||||
prop="mqtt_clearsession"
|
||||
>
|
||||
<el-switch v-model="mqtt_clearsession"></el-switch>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<h3 class="info_play">信息发布</h3>
|
||||
<el-divider></el-divider>
|
||||
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item
|
||||
label="Qos(MQTT):"
|
||||
:label-width="formLabelWidth"
|
||||
prop="upload_week"
|
||||
>
|
||||
<el-select
|
||||
v-model="mqtt_qos"
|
||||
placeholder="请选择"
|
||||
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-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<!-- <el-col :span="12">
|
||||
<el-form-item label="retained:" :label-width="formLabelWidth" prop="retained">
|
||||
<el-switch v-model="value1"></el-switch>
|
||||
</el-form-item>
|
||||
</el-col> -->
|
||||
</el-row>
|
||||
<!-- <el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="入口函数:" :label-width="formLabelWidth" prop="upload_week">
|
||||
<el-input v-model="input1" placeholder="64" style="width: 200px;height:30px"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row> -->
|
||||
<!-- <el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="函数代码:" :label-width="formLabelWidth" prop="upload_week">
|
||||
<prism-editor class="my-editor height-300" v-model="code" :highlight="highlighter"
|
||||
:line-numbers="lineNumbers"></prism-editor>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row> -->
|
||||
<div class="con_left_footer">
|
||||
<el-button type="primary" @click="add_passage = false"
|
||||
>保 存</el-button
|
||||
>
|
||||
<el-button @click="add_passage = false">取 消</el-button>
|
||||
</div>
|
||||
</el-form>
|
||||
</div>
|
||||
<div>
|
||||
<div class="con_right">
|
||||
<el-menu
|
||||
class="el-menu-demo"
|
||||
mode="horizontal"
|
||||
@select="handleSelect"
|
||||
>
|
||||
<el-menu-item index="1">添加</el-menu-item>
|
||||
<el-menu-item index="2">保存</el-menu-item>
|
||||
<el-menu-item index="3">删除</el-menu-item>
|
||||
</el-menu>
|
||||
</div>
|
||||
<el-table ref="singleTable" :data="tableData" style="width: 100%">
|
||||
<el-table-column type="index"> </el-table-column>
|
||||
<el-table-column property="mqtt_cjd_sbmc" label="设备名称">
|
||||
<template slot-scope="scope">
|
||||
<el-select v-model="scope.row.mqtt_cjd_sbmc" placeholder="">
|
||||
<el-option v-for="(option,index) in options2" :key="index" :label="option.label" :value="option.value"></el-option>
|
||||
</el-select>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column property="mqtt_cjd_tagid" label="TagID">
|
||||
<template slot-scope="scope">
|
||||
<el-select v-model="scope.row.mqtt_cjd_tagid" placeholder="">
|
||||
<el-option v-for="(option,index) in options3" :key="index" :label="option.label" :value="option.value"></el-option>
|
||||
</el-select>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 添加按钮下显示出来的弹框信息 -->
|
||||
<div>
|
||||
<el-dialog title="选择点" :visible.sync="choose_point" width="30%">
|
||||
<el-tree
|
||||
:data="points"
|
||||
show-checkbox
|
||||
node-key="id"
|
||||
:default-expanded-keys="[1, 2]"
|
||||
:default-checked-keys="[3, 4, 5, 6]"
|
||||
:props="defaultProps"
|
||||
>
|
||||
</el-tree>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="savePoint"
|
||||
>保 存</el-button
|
||||
>
|
||||
<el-button @click="choose_point = false">取 消</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { PrismEditor } from "vue-prism-editor";
|
||||
import "vue-prism-editor/dist/prismeditor.min.css"; // import the styles somewhere
|
||||
// import highlighting library (you can use any library you want just return html string)
|
||||
import { highlight, languages } from "prismjs/components/prism-core";
|
||||
import "prismjs/components/prism-clike";
|
||||
import "prismjs/components/prism-javascript";
|
||||
import "prismjs/themes/prism-tomorrow.css"; // import syntax highlighting styles
|
||||
|
||||
export default {
|
||||
name: "ChiClone",
|
||||
components: {
|
||||
PrismEditor,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
mqtt_qiyong: true,
|
||||
mqtt_ip: "",
|
||||
mqtt_ip1: "",
|
||||
mqtt_ip2: "",
|
||||
mqtt_ip3: "",
|
||||
mqtt_ip4: "",
|
||||
mqtt_wgsn: "",
|
||||
mqtt_port: "",
|
||||
mqtt_keepalive: "",
|
||||
mqtt_tls: false,
|
||||
mqtt_clearsession: false,
|
||||
// mqtt_sssjfbzt:"",
|
||||
mqtt_qos: "0",
|
||||
// code: 'console.log("Hello World")',
|
||||
// lineNumbers: true, // true为编辑模式， false只展示不可编辑
|
||||
points: [
|
||||
{
|
||||
id: 1,
|
||||
label: "Device1",
|
||||
children: [
|
||||
{
|
||||
id: 3,
|
||||
label: "tag0001",
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
label: "tag0002",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
label: "Device1",
|
||||
children: [
|
||||
{
|
||||
id: 5,
|
||||
label: "tag0003",
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
label: "tag0004",
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
choose_point: false,
|
||||
options1: [
|
||||
{
|
||||
value: "0",
|
||||
label: "0",
|
||||
},
|
||||
{
|
||||
value: "1",
|
||||
label: "1",
|
||||
},
|
||||
{
|
||||
value: "2",
|
||||
label: "2",
|
||||
},
|
||||
],
|
||||
labelPosition: "left",
|
||||
formLabelWidth: "114px",
|
||||
input1: 192,
|
||||
add_passage: false,
|
||||
rightMenu: "",
|
||||
dialogVisible: true,
|
||||
isAdd: false,
|
||||
datas: [
|
||||
{
|
||||
label: "Gateway",
|
||||
children: [
|
||||
{
|
||||
label: "数据采集",
|
||||
children: [
|
||||
{
|
||||
label: "I/O点",
|
||||
},
|
||||
{
|
||||
label: "用户点",
|
||||
},
|
||||
{
|
||||
label: "计算点",
|
||||
},
|
||||
{
|
||||
label: "系统点",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "上云服务",
|
||||
children: [
|
||||
{
|
||||
label: "标准 MQTT",
|
||||
},
|
||||
{
|
||||
label: "AWS loT",
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
defaultProps: {
|
||||
children: "children",
|
||||
label: "label",
|
||||
},
|
||||
// 右边添加设备的字段
|
||||
options2:[
|
||||
{
|
||||
label:"有线区精雕1",
|
||||
value:"有线区精雕1",
|
||||
},
|
||||
{
|
||||
label:"无线区精雕1",
|
||||
value:"无线区精雕1",
|
||||
}
|
||||
],
|
||||
options3: [{
|
||||
value: "MachinePamHID909",
|
||||
label: "MachinePamHID909",
|
||||
}, {
|
||||
value: "MachinePamHID910",
|
||||
label: "MachinePamHID910",
|
||||
}, {
|
||||
value: "MachinePamHID911",
|
||||
label: "MachinePamHID911",
|
||||
}, {
|
||||
value: "MachinePamHID912",
|
||||
label: "MachinePamHID912",
|
||||
}, {
|
||||
value: "MachinePamHID913",
|
||||
label: "MachinePamHID913",
|
||||
}, {
|
||||
value: "MachinePamHID914",
|
||||
label: "MachinePamHID914",
|
||||
}, {
|
||||
value: "MachinePamHID915",
|
||||
label: "MachinePamHID915",
|
||||
}, {
|
||||
value: "MachinePamHID916",
|
||||
label: "MachinePamHID916",
|
||||
}, {
|
||||
value: "MachinePamHID917",
|
||||
label: "MachinePamHID917",
|
||||
}, {
|
||||
value: "MachinePamHID918",
|
||||
label: "MachinePamHID918",
|
||||
}, {
|
||||
value: "MachinePamHID919",
|
||||
label: "MachinePamHID919",
|
||||
}, {
|
||||
value: "MachinePamHID920",
|
||||
label: "MachinePamHID920",
|
||||
}, {
|
||||
value: "MachinePamHID921",
|
||||
label: "MachinePamHID921",
|
||||
}, {
|
||||
value: "MachinePamHID922",
|
||||
label: "MachinePamHID922",
|
||||
}, {
|
||||
value: "MachinePamHID923",
|
||||
label: "MachinePamHID923",
|
||||
}, {
|
||||
value: "MachinePamHID924",
|
||||
label: "MachinePamHID924",
|
||||
}, {
|
||||
value: "MachinePamHID925",
|
||||
label: "MachinePamHID925",
|
||||
}, {
|
||||
value: "MachinePamHID926",
|
||||
label: "MachinePamHID926",
|
||||
}, {
|
||||
value: "MachinePamHID927",
|
||||
label: "MachinePamHID927",
|
||||
}, {
|
||||
value: "MachinePamHID928",
|
||||
label: "MachinePamHID928",
|
||||
}, {
|
||||
value: "MachinePamHID929",
|
||||
label: "MachinePamHID929",
|
||||
}, {
|
||||
value: "MachinePamHID930",
|
||||
label: "MachinePamHID930",
|
||||
}, {
|
||||
value: "MachinePamHID931",
|
||||
label: "MachinePamHID931",
|
||||
}, {
|
||||
value: "MachinePamHID932",
|
||||
label: "MachinePamHID932",
|
||||
}, {
|
||||
value: "MachinePamHID933",
|
||||
label: "MachinePamHID933",
|
||||
}, {
|
||||
value: "MachinePamHID934",
|
||||
label: "MachinePamHID934",
|
||||
}, {
|
||||
value: "MachinePamHID935",
|
||||
label: "MachinePamHID935",
|
||||
}, {
|
||||
value: "MachinePamHID936",
|
||||
label: "MachinePamHID936",
|
||||
}, {
|
||||
value: "MachinePamHID937",
|
||||
label: "MachinePamHID937",
|
||||
}, {
|
||||
value: "MachinePamHID938",
|
||||
label: "MachinePamHID938",
|
||||
}],
|
||||
tableData: [
|
||||
{
|
||||
mqtt_cjd_sbmc: "无线区精雕1",
|
||||
mqtt_cjd_tagid: "MachinePamHID909",
|
||||
},
|
||||
],
|
||||
rules: {
|
||||
server_ip: [
|
||||
{ required: true, message: "请输入服务器IP", trigger: "blur" },
|
||||
],
|
||||
port_number: [
|
||||
{ required: true, message: "请输入端口", trigger: "blur" },
|
||||
],
|
||||
gateway_id: [
|
||||
{ required: true, message: "请输入网关ID", trigger: "blur" },
|
||||
],
|
||||
data_theme: [
|
||||
{ required: true, message: "请输入主题", trigger: "blur" },
|
||||
],
|
||||
upload_mode: [
|
||||
{ required: true, message: "请输入上传模式", trigger: "blur" },
|
||||
],
|
||||
upload_week: [
|
||||
{ required: true, message: "请输入上传周期", trigger: "blur" },
|
||||
],
|
||||
data_filter: [
|
||||
{ required: true, message: "请输入数据过滤", trigger: "blur" },
|
||||
],
|
||||
},
|
||||
};
|
||||
},
|
||||
mounted() {},
|
||||
methods: {
|
||||
treeNodeClick() {
|
||||
this.add_passage = true;
|
||||
},
|
||||
getDriveName() {
|
||||
this.diag_drive = true;
|
||||
},
|
||||
handleSelect(key) {
|
||||
console.log(key);
|
||||
if (key == 1 && this.isAdd == false) {
|
||||
this.choose_point = true;
|
||||
} else if (key == 1 && this.isAdd == true) {
|
||||
this.$message({
|
||||
message: '添加失败,只能添加一条数据',
|
||||
type: 'error'
|
||||
});
|
||||
return false
|
||||
}
|
||||
},
|
||||
highlighter(code) {
|
||||
return highlight(code, languages.js); //returns html
|
||||
},
|
||||
closeMenu(ev) {
|
||||
console.log({ ev });
|
||||
this.dialogVisible = false;
|
||||
},
|
||||
savePoint() {
|
||||
this.choose_point = false;
|
||||
this.isAdd = true;
|
||||
this.$message({
|
||||
message: '添加成功',
|
||||
type: 'success'
|
||||
});
|
||||
},
|
||||
},
|
||||
directives: {
|
||||
"click-outside": {
|
||||
bind: function (el, binding, vnode) {
|
||||
console.log("el", el);
|
||||
console.log("binding", binding);
|
||||
el.event = function (event) {
|
||||
// 检查点击是否发生在节点之内（包括子节点）
|
||||
if (!(el == event.target || el.contains(event.target))) {
|
||||
// 如果没有，则触发调用
|
||||
// 若绑定值为函数，则执行
|
||||
// 这里我们可以通过钩子函数中的 vnode.context，来获取当前组件的作用域
|
||||
if (typeof vnode.context[binding.expression] == "function") {
|
||||
vnode.context[binding.expression](event);
|
||||
}
|
||||
}
|
||||
};
|
||||
// 绑定事件
|
||||
// 设置为true，代表在DOM树中，注册了该listener的元素，会先于它下方的任何事件目标，接收到该事件。
|
||||
document.body.addEventListener("click", el.event, true);
|
||||
},
|
||||
unbind: function (el) {
|
||||
// 解绑事件
|
||||
document.body.removeEventListener("click", el.event, true);
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.tree_menu {
|
||||
position: absolute;
|
||||
width: 286px;
|
||||
height: 753px;
|
||||
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);
|
||||
}
|
||||
|
||||
/deep/ .pas_params {
|
||||
.info_play {
|
||||
width: 56px;
|
||||
height: 20px;
|
||||
color: rgba(16, 16, 16, 1);
|
||||
font-size: 14px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.el-divider--horizontal {
|
||||
margin: 8px 0;
|
||||
}
|
||||
|
||||
.el-button {
|
||||
width: 80px;
|
||||
height: 30px;
|
||||
line-height: 0.5;
|
||||
}
|
||||
|
||||
.el-col-12:last-child {
|
||||
padding-right: 150px;
|
||||
}
|
||||
|
||||
.el-col-12:first-child {
|
||||
padding-right: 28px;
|
||||
}
|
||||
|
||||
.el-row {
|
||||
height: 40px;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
|
||||
.el-col-1 {
|
||||
text-align: center;
|
||||
line-height: 52px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.el-col-9 {
|
||||
padding-left: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.el-input__inner {
|
||||
height: 30px;
|
||||
text-align: left;
|
||||
padding: 0px 8px;
|
||||
}
|
||||
|
||||
.content {
|
||||
position: absolute;
|
||||
left: 362px;
|
||||
top: 104px;
|
||||
width: 1220px;
|
||||
height: 836px;
|
||||
line-height: 20px;
|
||||
padding-left: 36px;
|
||||
background-color: rgba(255, 255, 255, 1);
|
||||
color: rgba(16, 16, 16, 1);
|
||||
font-size: 14px;
|
||||
border: 1px solid rgba(187, 187, 187, 1);
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
|
||||
.el-form-item {
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
/deep/ .con_left {
|
||||
.el-con-5 {
|
||||
width: 43px;
|
||||
}
|
||||
}
|
||||
|
||||
.con_left {
|
||||
width: 709px;
|
||||
position: relative;
|
||||
|
||||
.my-editor {
|
||||
background: #2d2d2d;
|
||||
color: #ccc;
|
||||
|
||||
font-family: Fira code, Fira Mono, Consolas, Menlo, Courier, monospace;
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
/* optional */
|
||||
.prism-editor__textarea:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
/* not required: */
|
||||
.height-300 {
|
||||
width: 491px;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.infos {
|
||||
width: 60px;
|
||||
position: absolute;
|
||||
left: 208px;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.con_left_footer {
|
||||
position: absolute;
|
||||
left: 499px;
|
||||
top: 720px;
|
||||
}
|
||||
}
|
||||
|
||||
.con_right {
|
||||
width: 480px;
|
||||
|
||||
.dialog-footer {
|
||||
.el-button {
|
||||
width: 80px;
|
||||
height: 30px;
|
||||
line-height: 0.5;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
@ -0,0 +1,657 @@
|
|||
<!-- 采集点收集 -->
|
||||
<template>
|
||||
<div>
|
||||
<!-- 设置树形控件 -->
|
||||
<!-- <el-button type="info" plain @click="dialogVisible = true">斥候采集点设置</el-button> -->
|
||||
<div v-show="dialogVisible" class="tree_menu">
|
||||
<el-tree :data="datas" :props="defaultProps" @node-click="treeNodeClick"></el-tree>
|
||||
<!-- 树形控件右键组件 -->
|
||||
</div>
|
||||
<div class="pas_params" v-show="add_passage">
|
||||
<div>
|
||||
<el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
|
||||
<el-menu-item index="1">添加</el-menu-item>
|
||||
<el-menu-item index="2">保存</el-menu-item>
|
||||
<el-menu-item index="3">删除</el-menu-item>
|
||||
</el-menu>
|
||||
</div>
|
||||
<el-table ref="singleTable" :data="tableData" style="width: 100%">
|
||||
<el-table-column type="index"> </el-table-column>
|
||||
<el-table-column property="cjdpz_tagid" label="TagID">
|
||||
<template slot-scope="scope">
|
||||
<el-select v-model="scope.row.cjdpz_tagid" placeholder="0X">
|
||||
<el-option v-for="(option,index) in options1" :key="index" :label="option.label" :value="option.value"></el-option>
|
||||
</el-select>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column property="cjdpz_mc" label="名称">
|
||||
<template slot-scope="scope">
|
||||
<el-select v-model="scope.row.cjdpz_mc" placeholder="0X">
|
||||
<el-option v-for="(option,index) in options2" :key="index" :label="option.label" :value="option.value"></el-option>
|
||||
</el-select>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column property="cjdpz_jcqdz" label="地址">
|
||||
<template slot-scope="scope">
|
||||
<el-select v-model="scope.row.cjdpz_dz" placeholder="0X">
|
||||
<el-option v-for="(option,index) in options3" :key="index" :label="option.label" :value="option.value"></el-option>
|
||||
</el-select>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column property="cjdpz_jcqdz" label="寄存地址(十进制)" width="150px">
|
||||
<template slot-scope="scope">
|
||||
<!-- <el-select v-model="scope.row.cjdpz_jcqdz" placeholder="1">
|
||||
<el-option v-for="(option,index) in options4" :key="index" :label="option.label" :value="option.value"></el-option>
|
||||
</el-select> -->
|
||||
<el-input v-model="scope.row.cjdpz_jcqdz" placeholder=""></el-input>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column property="cjdpz_cjsjlx" label="采集数据类型">
|
||||
<template slot-scope="scope">
|
||||
<el-select v-model="scope.row.cjdpz_cjsjlx" placeholder="bool">
|
||||
<el-option v-for="(option,index) in options5" :key="index" :label="option.label" :value="option.value"></el-option>
|
||||
</el-select>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column property="cjdpz_dxsx" label="读写属性">
|
||||
<template slot-scope="scope">
|
||||
<el-select v-model="scope.row.cjdpz_dxsx" placeholder="读写">
|
||||
<el-option v-for="(option,index) in options6" :key="index" :label="option.label" :value="option.value"></el-option>
|
||||
</el-select>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column property="cjdpz_scms" label="上传模式">
|
||||
<template slot-scope="scope">
|
||||
<el-select v-model="scope.row.cjdpz_scms" placeholder="读写">
|
||||
<el-option v-for="(option,index) in options7" :key="index" :label="option.label" :value="option.value"></el-option>
|
||||
</el-select>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column property="cjdpz_dw" label="单位"> </el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "ChiCollection",
|
||||
|
||||
data() {
|
||||
return {
|
||||
options1: [{
|
||||
value: "MachinePamHID909",
|
||||
label: "MachinePamHID909",
|
||||
}, {
|
||||
value: "MachinePamHID910",
|
||||
label: "MachinePamHID910",
|
||||
}, {
|
||||
value: "MachinePamHID911",
|
||||
label: "MachinePamHID911",
|
||||
}, {
|
||||
value: "MachinePamHID912",
|
||||
label: "MachinePamHID912",
|
||||
}, {
|
||||
value: "MachinePamHID913",
|
||||
label: "MachinePamHID913",
|
||||
}, {
|
||||
value: "MachinePamHID914",
|
||||
label: "MachinePamHID914",
|
||||
}, {
|
||||
value: "MachinePamHID915",
|
||||
label: "MachinePamHID915",
|
||||
}, {
|
||||
value: "MachinePamHID916",
|
||||
label: "MachinePamHID916",
|
||||
}, {
|
||||
value: "MachinePamHID917",
|
||||
label: "MachinePamHID917",
|
||||
}, {
|
||||
value: "MachinePamHID918",
|
||||
label: "MachinePamHID918",
|
||||
}, {
|
||||
value: "MachinePamHID919",
|
||||
label: "MachinePamHID919",
|
||||
}, {
|
||||
value: "MachinePamHID920",
|
||||
label: "MachinePamHID920",
|
||||
}, {
|
||||
value: "MachinePamHID921",
|
||||
label: "MachinePamHID921",
|
||||
}, {
|
||||
value: "MachinePamHID922",
|
||||
label: "MachinePamHID922",
|
||||
}, {
|
||||
value: "MachinePamHID923",
|
||||
label: "MachinePamHID923",
|
||||
}, {
|
||||
value: "MachinePamHID924",
|
||||
label: "MachinePamHID924",
|
||||
}, {
|
||||
value: "MachinePamHID925",
|
||||
label: "MachinePamHID925",
|
||||
}, {
|
||||
value: "MachinePamHID926",
|
||||
label: "MachinePamHID926",
|
||||
}, {
|
||||
value: "MachinePamHID927",
|
||||
label: "MachinePamHID927",
|
||||
}, {
|
||||
value: "MachinePamHID928",
|
||||
label: "MachinePamHID928",
|
||||
}, {
|
||||
value: "MachinePamHID929",
|
||||
label: "MachinePamHID929",
|
||||
}, {
|
||||
value: "MachinePamHID930",
|
||||
label: "MachinePamHID930",
|
||||
}, {
|
||||
value: "MachinePamHID931",
|
||||
label: "MachinePamHID931",
|
||||
}, {
|
||||
value: "MachinePamHID932",
|
||||
label: "MachinePamHID932",
|
||||
}, {
|
||||
value: "MachinePamHID933",
|
||||
label: "MachinePamHID933",
|
||||
}, {
|
||||
value: "MachinePamHID934",
|
||||
label: "MachinePamHID934",
|
||||
}, {
|
||||
value: "MachinePamHID935",
|
||||
label: "MachinePamHID935",
|
||||
}, {
|
||||
value: "MachinePamHID936",
|
||||
label: "MachinePamHID936",
|
||||
}, {
|
||||
value: "MachinePamHID937",
|
||||
label: "MachinePamHID937",
|
||||
}, {
|
||||
value: "MachinePamHID938",
|
||||
label: "MachinePamHID938",
|
||||
}],
|
||||
options2: [{
|
||||
value: "急停状态",
|
||||
label: "急停状态",
|
||||
}, {
|
||||
value: "产量",
|
||||
label: "产量",
|
||||
},
|
||||
{
|
||||
value: "相对位置X",
|
||||
label: "相对位置X",
|
||||
},
|
||||
{
|
||||
value: "相对位置Y",
|
||||
label: "相对位置Y",
|
||||
},
|
||||
{
|
||||
value: "相对位置Z",
|
||||
label: "相对位置Z",
|
||||
},
|
||||
{
|
||||
value: "实际位置X",
|
||||
label: "实际位置X",
|
||||
},
|
||||
{
|
||||
value: "实际位置Y",
|
||||
label: "实际位置Y",
|
||||
},
|
||||
{
|
||||
value: "实际位置Z",
|
||||
label: "实际位置Z",
|
||||
},
|
||||
{
|
||||
value: "主轴转速",
|
||||
label: "主轴转速",
|
||||
},
|
||||
{
|
||||
value: "当前刀具",
|
||||
label: "当前刀具",
|
||||
},
|
||||
{
|
||||
value: "预选刀具",
|
||||
label: "预选刀具",
|
||||
},
|
||||
{
|
||||
value: "报警信息",
|
||||
label: "报警信息",
|
||||
},
|
||||
{
|
||||
value: "驱动单元电流",
|
||||
label: "驱动单元电流",
|
||||
},
|
||||
{
|
||||
value: "负载电流",
|
||||
label: "负载电流",
|
||||
},
|
||||
{
|
||||
value: "额定电流",
|
||||
label: "额定电流",
|
||||
},
|
||||
{
|
||||
value: "运行时间",
|
||||
label: "运行时间",
|
||||
},
|
||||
{
|
||||
value: "加工产品用时",
|
||||
label: "加工产品用时",
|
||||
},
|
||||
{
|
||||
value: "工作模式",
|
||||
label: "工作模式",
|
||||
},
|
||||
{
|
||||
value: "切削速度",
|
||||
label: "切削速度",
|
||||
},
|
||||
{
|
||||
value: "任务信息",
|
||||
label: "任务信息",
|
||||
},
|
||||
{
|
||||
value: "使能状态",
|
||||
label: "使能状态",
|
||||
},
|
||||
{
|
||||
value: "系统状态",
|
||||
label: "系统状态",
|
||||
},
|
||||
{
|
||||
value: "执行任务信息",
|
||||
label: "执行任务信息",
|
||||
},
|
||||
{
|
||||
value: "进给倍军",
|
||||
label: "进给倍军",
|
||||
},
|
||||
{
|
||||
value: "轴速度",
|
||||
label: "轴速度",
|
||||
},
|
||||
{
|
||||
value: "轴角度",
|
||||
label: "轴角度",
|
||||
},
|
||||
{
|
||||
value: "进给速度",
|
||||
label: "进给速度",
|
||||
}],
|
||||
options3: [{
|
||||
value: "0X (Coil Status)",
|
||||
label: "0X (Coil Status)"
|
||||
},
|
||||
{
|
||||
value: "1X (Input Status)",
|
||||
label: "1X (Input Status)"
|
||||
}, {
|
||||
value: "3X (Input Registers)",
|
||||
label: "3X (Input Registers)"
|
||||
},
|
||||
{
|
||||
value: "4X (Holding Register)",
|
||||
label: "4X (Holding Register)"
|
||||
}],
|
||||
options4: [
|
||||
{
|
||||
value: "2000H",
|
||||
label: "2000H",
|
||||
},
|
||||
{
|
||||
value: "2002H",
|
||||
label: "2002H",
|
||||
},
|
||||
{
|
||||
value: "2004H",
|
||||
label: "2004H",
|
||||
},
|
||||
{
|
||||
value: "2005H",
|
||||
label: "2005H",
|
||||
},
|
||||
{
|
||||
value: "2006H",
|
||||
label: "2006H",
|
||||
},
|
||||
{
|
||||
value: "2007H",
|
||||
label: "2007H",
|
||||
},
|
||||
{
|
||||
value: "2008H",
|
||||
label: "2008H",
|
||||
},
|
||||
{
|
||||
value: "2009H",
|
||||
label: "2009H",
|
||||
},
|
||||
{
|
||||
value: "2010H",
|
||||
label: "2010H",
|
||||
},
|
||||
{
|
||||
value: "2011H",
|
||||
label: "2011H",
|
||||
},
|
||||
{
|
||||
value: "2012H",
|
||||
label: "2012H",
|
||||
},
|
||||
{
|
||||
value: "2013H",
|
||||
label: "2013H",
|
||||
},
|
||||
{
|
||||
value: "2014H",
|
||||
label: "2014H",
|
||||
},
|
||||
{
|
||||
value: "2015H",
|
||||
label: "2015H",
|
||||
},
|
||||
{
|
||||
value: "2016H",
|
||||
label: "2016H",
|
||||
},
|
||||
{
|
||||
value: "2017H",
|
||||
label: "2017H",
|
||||
},
|
||||
{
|
||||
value: "2018H",
|
||||
label: "2018H",
|
||||
},
|
||||
{
|
||||
value: "2019H",
|
||||
label: "2019H",
|
||||
},
|
||||
{
|
||||
value: "2020H",
|
||||
label: "2020H",
|
||||
}, {
|
||||
value: "2021H",
|
||||
label: "2021H",
|
||||
},
|
||||
{
|
||||
value: "2022H",
|
||||
label: "2022H",
|
||||
},
|
||||
{
|
||||
value: "2023H",
|
||||
label: "2023H",
|
||||
},
|
||||
{
|
||||
value: "2024H",
|
||||
label: "2024H",
|
||||
},
|
||||
{
|
||||
value: "2027H",
|
||||
label: "2027H",
|
||||
},
|
||||
{
|
||||
value: "2028H",
|
||||
label: "2028H",
|
||||
},
|
||||
{
|
||||
value: "2029H",
|
||||
label: "2029H",
|
||||
},
|
||||
{
|
||||
value: "2030H",
|
||||
label: "2030H",
|
||||
}, {
|
||||
value: "2031H",
|
||||
label: "2031H",
|
||||
}
|
||||
],
|
||||
options5: [
|
||||
{
|
||||
value: " BIT（位0/1）",
|
||||
label: " BIT（位0/1）"
|
||||
},
|
||||
{
|
||||
value: "WORD（16位无符号整数）",
|
||||
label: "WORD（16位无符号整数）"
|
||||
}, {
|
||||
value: "INT（16位有符号整数）",
|
||||
label: "INT（16位有符号整数）"
|
||||
},
|
||||
{
|
||||
value: "DWORD（32位无符号整数）",
|
||||
label: "DWORD（32位无符号整数）"
|
||||
},
|
||||
{
|
||||
value: "DINT（32位有符号整数）",
|
||||
label: "DINT（32位有符号整数）"
|
||||
}, {
|
||||
value: "FLOAT（单精度浮点数）",
|
||||
label: "FLOAT（单精度浮点数）"
|
||||
}, {
|
||||
value: "DOUBLE（64位浮点数）",
|
||||
label: "DOUBLE（64位浮点数）"
|
||||
}, {
|
||||
value: "STRING（8位字符串）",
|
||||
label: "STRING（8位字符串）"
|
||||
}, {
|
||||
value: "BCD16（16位BCD码）",
|
||||
label: "BCD16（16位BCD码）"
|
||||
}, {
|
||||
value: "ULONG（64位无符号整数）",
|
||||
label: "ULONG（64位无符号整数）"
|
||||
}, {
|
||||
value: "LONG（64位有符号整数）",
|
||||
label: "LONG（64位有符号整数）"
|
||||
},
|
||||
],
|
||||
options6: [{
|
||||
value: "读写",
|
||||
label: "读写"
|
||||
},
|
||||
{
|
||||
value: "只读",
|
||||
label: "只读"
|
||||
}, {
|
||||
value: "只写",
|
||||
label: "只写"
|
||||
}],
|
||||
options7: [{
|
||||
value: "Periodic",
|
||||
label: "Periodic"
|
||||
},
|
||||
{
|
||||
value: "Onchange",
|
||||
label: "Onchange"
|
||||
}, {
|
||||
value: "Never",
|
||||
label: "Never"
|
||||
}],
|
||||
activeIndex: "1",
|
||||
value1: 1,
|
||||
checked: "",
|
||||
labelPosition: "left",
|
||||
formLabelWidth: "116px",
|
||||
input1: 192,
|
||||
add_passage: false,
|
||||
rightMenu: "",
|
||||
dialogVisible: true,
|
||||
menuShow: false,
|
||||
datas: [{
|
||||
label: 'Gateway',
|
||||
children: [{
|
||||
label: '数据采集',
|
||||
children: [{
|
||||
label: 'I/O点'
|
||||
},
|
||||
{
|
||||
label: '用户点',
|
||||
},
|
||||
{
|
||||
label: '计算点',
|
||||
},
|
||||
{
|
||||
label: '系统点',
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
label: "上云服务",
|
||||
children: [
|
||||
{
|
||||
label: "标准 MQTT"
|
||||
},
|
||||
{
|
||||
label: "AWS loT"
|
||||
}]
|
||||
}]
|
||||
}],
|
||||
defaultProps: {
|
||||
children: "children",
|
||||
label: "label",
|
||||
},
|
||||
tableData: [
|
||||
{
|
||||
cjdpz_tagid: "MachinePamHID909",
|
||||
cjdpz_mc: "急停状态",
|
||||
cjdpz_dz: "0X (Coil Status)",
|
||||
cjdpz_jcqdz: "1",
|
||||
cjdpz_cjsjlx: "BIT（位0/1）",
|
||||
cjdpz_dxsx: "读写",
|
||||
cjdpz_scms: "Periodic",
|
||||
cjdpz_dw: "",
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
|
||||
mounted() { },
|
||||
|
||||
methods: {
|
||||
treeNodeClick() {
|
||||
this.add_passage = true;
|
||||
},
|
||||
getDriveName() {
|
||||
this.diag_drive = true;
|
||||
},
|
||||
handleSelect(key, keyPath) {
|
||||
console.log(key, keyPath);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.tree_menu {
|
||||
position: absolute;
|
||||
width: 286px;
|
||||
height: 753px;
|
||||
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);
|
||||
}
|
||||
|
||||
/deep/ .pas_params {
|
||||
position: absolute;
|
||||
left: 362px;
|
||||
top: 95px;
|
||||
width: 1066px;
|
||||
height: 752px;
|
||||
line-height: 20px;
|
||||
border-radius: 3px;
|
||||
background-color: rgba(255, 255, 255, 1);
|
||||
// text-align: center;
|
||||
border: 1px solid rgba(220, 220, 220, 1);
|
||||
|
||||
.el-button {
|
||||
width: 80px;
|
||||
height: 30px;
|
||||
line-height: 0.5;
|
||||
}
|
||||
|
||||
.el-col-12:last-child {
|
||||
padding-right: 150px;
|
||||
}
|
||||
|
||||
.el-col-12:first-child {
|
||||
padding-right: 54px;
|
||||
}
|
||||
|
||||
.el-row {
|
||||
height: 40px;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
|
||||
.el-col-1 {
|
||||
text-align: center;
|
||||
line-height: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.el-col-9 {
|
||||
padding-left: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.el-input__inner {
|
||||
height: 30px;
|
||||
text-align: left;
|
||||
padding: 0px 8px;
|
||||
}
|
||||
|
||||
.content {
|
||||
position: absolute;
|
||||
left: 377px;
|
||||
top: 69px;
|
||||
width: 1220px;
|
||||
height: 836px;
|
||||
line-height: 20px;
|
||||
padding-left: 36px;
|
||||
background-color: rgba(255, 255, 255, 1);
|
||||
color: rgba(16, 16, 16, 1);
|
||||
font-size: 14px;
|
||||
border: 1px solid rgba(187, 187, 187, 1);
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
|
||||
.el-form-item {
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
/deep/ .con_left {
|
||||
.el-con-5 {
|
||||
width: 43px;
|
||||
}
|
||||
}
|
||||
|
||||
.con_left {
|
||||
width: 709px;
|
||||
position: relative;
|
||||
|
||||
.con_left_footer {
|
||||
position: absolute;
|
||||
left: 499px;
|
||||
top: 777px;
|
||||
}
|
||||
}
|
||||
|
||||
.con_right {
|
||||
width: 480px;
|
||||
|
||||
.dialog-footer {
|
||||
.el-button {
|
||||
width: 80px;
|
||||
height: 30px;
|
||||
line-height: 0.5;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,657 @@
|
|||
<!-- 采集点收集 -->
|
||||
<template>
|
||||
<div>
|
||||
<!-- 设置树形控件 -->
|
||||
<!-- <el-button type="info" plain @click="dialogVisible = true">斥候采集点设置</el-button> -->
|
||||
<div v-show="dialogVisible" class="tree_menu">
|
||||
<el-tree :data="datas" :props="defaultProps" @node-click="treeNodeClick"></el-tree>
|
||||
<!-- 树形控件右键组件 -->
|
||||
</div>
|
||||
<div class="pas_params" v-show="add_passage">
|
||||
<div>
|
||||
<el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
|
||||
<el-menu-item index="1">添加</el-menu-item>
|
||||
<el-menu-item index="2">保存</el-menu-item>
|
||||
<el-menu-item index="3">删除</el-menu-item>
|
||||
</el-menu>
|
||||
</div>
|
||||
<el-table ref="singleTable" :data="tableData" style="width: 100%">
|
||||
<el-table-column type="index"> </el-table-column>
|
||||
<el-table-column property="cjdpz_tagid" label="TagID">
|
||||
<template slot-scope="scope">
|
||||
<el-select v-model="scope.row.cjdpz_tagid" placeholder="0X">
|
||||
<el-option v-for="(option,index) in options1" :key="index" :label="option.label" :value="option.value"></el-option>
|
||||
</el-select>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column property="cjdpz_mc" label="名称">
|
||||
<template slot-scope="scope">
|
||||
<el-select v-model="scope.row.cjdpz_mc" placeholder="0X">
|
||||
<el-option v-for="(option,index) in options2" :key="index" :label="option.label" :value="option.value"></el-option>
|
||||
</el-select>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column property="cjdpz_jcqdz" label="地址">
|
||||
<template slot-scope="scope">
|
||||
<el-select v-model="scope.row.cjdpz_dz" placeholder="0X">
|
||||
<el-option v-for="(option,index) in options3" :key="index" :label="option.label" :value="option.value"></el-option>
|
||||
</el-select>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column property="cjdpz_jcqdz" label="寄存地址(十进制)" width="150px">
|
||||
<template slot-scope="scope">
|
||||
<!-- <el-select v-model="scope.row.cjdpz_jcqdz" placeholder="1">
|
||||
<el-option v-for="(option,index) in options4" :key="index" :label="option.label" :value="option.value"></el-option>
|
||||
</el-select> -->
|
||||
<el-input v-model="scope.row.cjdpz_jcqdz" placeholder="1-9999"></el-input>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column property="cjdpz_cjsjlx" label="采集数据类型">
|
||||
<template slot-scope="scope">
|
||||
<el-select v-model="scope.row.cjdpz_cjsjlx" placeholder="bool">
|
||||
<el-option v-for="(option,index) in options5" :key="index" :label="option.label" :value="option.value"></el-option>
|
||||
</el-select>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column property="cjdpz_dxsx" label="读写属性">
|
||||
<template slot-scope="scope">
|
||||
<el-select v-model="scope.row.cjdpz_dxsx" placeholder="读写">
|
||||
<el-option v-for="(option,index) in options6" :key="index" :label="option.label" :value="option.value"></el-option>
|
||||
</el-select>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column property="cjdpz_scms" label="上传模式">
|
||||
<template slot-scope="scope">
|
||||
<el-select v-model="scope.row.cjdpz_scms" placeholder="读写">
|
||||
<el-option v-for="(option,index) in options7" :key="index" :label="option.label" :value="option.value"></el-option>
|
||||
</el-select>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column property="cjdpz_dw" label="单位"> </el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "ChiCollection",
|
||||
|
||||
data() {
|
||||
return {
|
||||
options1: [{
|
||||
value: "MachinePamHID909",
|
||||
label: "MachinePamHID909",
|
||||
}, {
|
||||
value: "MachinePamHID910",
|
||||
label: "MachinePamHID910",
|
||||
}, {
|
||||
value: "MachinePamHID911",
|
||||
label: "MachinePamHID911",
|
||||
}, {
|
||||
value: "MachinePamHID912",
|
||||
label: "MachinePamHID912",
|
||||
}, {
|
||||
value: "MachinePamHID913",
|
||||
label: "MachinePamHID913",
|
||||
}, {
|
||||
value: "MachinePamHID914",
|
||||
label: "MachinePamHID914",
|
||||
}, {
|
||||
value: "MachinePamHID915",
|
||||
label: "MachinePamHID915",
|
||||
}, {
|
||||
value: "MachinePamHID916",
|
||||
label: "MachinePamHID916",
|
||||
}, {
|
||||
value: "MachinePamHID917",
|
||||
label: "MachinePamHID917",
|
||||
}, {
|
||||
value: "MachinePamHID918",
|
||||
label: "MachinePamHID918",
|
||||
}, {
|
||||
value: "MachinePamHID919",
|
||||
label: "MachinePamHID919",
|
||||
}, {
|
||||
value: "MachinePamHID920",
|
||||
label: "MachinePamHID920",
|
||||
}, {
|
||||
value: "MachinePamHID921",
|
||||
label: "MachinePamHID921",
|
||||
}, {
|
||||
value: "MachinePamHID922",
|
||||
label: "MachinePamHID922",
|
||||
}, {
|
||||
value: "MachinePamHID923",
|
||||
label: "MachinePamHID923",
|
||||
}, {
|
||||
value: "MachinePamHID924",
|
||||
label: "MachinePamHID924",
|
||||
}, {
|
||||
value: "MachinePamHID925",
|
||||
label: "MachinePamHID925",
|
||||
}, {
|
||||
value: "MachinePamHID926",
|
||||
label: "MachinePamHID926",
|
||||
}, {
|
||||
value: "MachinePamHID927",
|
||||
label: "MachinePamHID927",
|
||||
}, {
|
||||
value: "MachinePamHID928",
|
||||
label: "MachinePamHID928",
|
||||
}, {
|
||||
value: "MachinePamHID929",
|
||||
label: "MachinePamHID929",
|
||||
}, {
|
||||
value: "MachinePamHID930",
|
||||
label: "MachinePamHID930",
|
||||
}, {
|
||||
value: "MachinePamHID931",
|
||||
label: "MachinePamHID931",
|
||||
}, {
|
||||
value: "MachinePamHID932",
|
||||
label: "MachinePamHID932",
|
||||
}, {
|
||||
value: "MachinePamHID933",
|
||||
label: "MachinePamHID933",
|
||||
}, {
|
||||
value: "MachinePamHID934",
|
||||
label: "MachinePamHID934",
|
||||
}, {
|
||||
value: "MachinePamHID935",
|
||||
label: "MachinePamHID935",
|
||||
}, {
|
||||
value: "MachinePamHID936",
|
||||
label: "MachinePamHID936",
|
||||
}, {
|
||||
value: "MachinePamHID937",
|
||||
label: "MachinePamHID937",
|
||||
}, {
|
||||
value: "MachinePamHID938",
|
||||
label: "MachinePamHID938",
|
||||
}],
|
||||
options2: [{
|
||||
value: "急停状态",
|
||||
label: "急停状态",
|
||||
}, {
|
||||
value: "产量",
|
||||
label: "产量",
|
||||
},
|
||||
{
|
||||
value: "相对位置X",
|
||||
label: "相对位置X",
|
||||
},
|
||||
{
|
||||
value: "相对位置Y",
|
||||
label: "相对位置Y",
|
||||
},
|
||||
{
|
||||
value: "相对位置Z",
|
||||
label: "相对位置Z",
|
||||
},
|
||||
{
|
||||
value: "实际位置X",
|
||||
label: "实际位置X",
|
||||
},
|
||||
{
|
||||
value: "实际位置Y",
|
||||
label: "实际位置Y",
|
||||
},
|
||||
{
|
||||
value: "实际位置Z",
|
||||
label: "实际位置Z",
|
||||
},
|
||||
{
|
||||
value: "主轴转速",
|
||||
label: "主轴转速",
|
||||
},
|
||||
{
|
||||
value: "当前刀具",
|
||||
label: "当前刀具",
|
||||
},
|
||||
{
|
||||
value: "预选刀具",
|
||||
label: "预选刀具",
|
||||
},
|
||||
{
|
||||
value: "报警信息",
|
||||
label: "报警信息",
|
||||
},
|
||||
{
|
||||
value: "驱动单元电流",
|
||||
label: "驱动单元电流",
|
||||
},
|
||||
{
|
||||
value: "负载电流",
|
||||
label: "负载电流",
|
||||
},
|
||||
{
|
||||
value: "额定电流",
|
||||
label: "额定电流",
|
||||
},
|
||||
{
|
||||
value: "运行时间",
|
||||
label: "运行时间",
|
||||
},
|
||||
{
|
||||
value: "加工产品用时",
|
||||
label: "加工产品用时",
|
||||
},
|
||||
{
|
||||
value: "工作模式",
|
||||
label: "工作模式",
|
||||
},
|
||||
{
|
||||
value: "切削速度",
|
||||
label: "切削速度",
|
||||
},
|
||||
{
|
||||
value: "任务信息",
|
||||
label: "任务信息",
|
||||
},
|
||||
{
|
||||
value: "使能状态",
|
||||
label: "使能状态",
|
||||
},
|
||||
{
|
||||
value: "系统状态",
|
||||
label: "系统状态",
|
||||
},
|
||||
{
|
||||
value: "执行任务信息",
|
||||
label: "执行任务信息",
|
||||
},
|
||||
{
|
||||
value: "进给倍军",
|
||||
label: "进给倍军",
|
||||
},
|
||||
{
|
||||
value: "轴速度",
|
||||
label: "轴速度",
|
||||
},
|
||||
{
|
||||
value: "轴角度",
|
||||
label: "轴角度",
|
||||
},
|
||||
{
|
||||
value: "进给速度",
|
||||
label: "进给速度",
|
||||
}],
|
||||
options3: [{
|
||||
value: "0X (Coil Status)",
|
||||
label: "0X (Coil Status)"
|
||||
},
|
||||
{
|
||||
value: "1X (Input Status)",
|
||||
label: "1X (Input Status)"
|
||||
}, {
|
||||
value: "3X (Input Registers)",
|
||||
label: "3X (Input Registers)"
|
||||
},
|
||||
{
|
||||
value: "4X (Holding Register)",
|
||||
label: "4X (Holding Register)"
|
||||
}],
|
||||
options4: [
|
||||
{
|
||||
value: "2000H",
|
||||
label: "2000H",
|
||||
},
|
||||
{
|
||||
value: "2002H",
|
||||
label: "2002H",
|
||||
},
|
||||
{
|
||||
value: "2004H",
|
||||
label: "2004H",
|
||||
},
|
||||
{
|
||||
value: "2005H",
|
||||
label: "2005H",
|
||||
},
|
||||
{
|
||||
value: "2006H",
|
||||
label: "2006H",
|
||||
},
|
||||
{
|
||||
value: "2007H",
|
||||
label: "2007H",
|
||||
},
|
||||
{
|
||||
value: "2008H",
|
||||
label: "2008H",
|
||||
},
|
||||
{
|
||||
value: "2009H",
|
||||
label: "2009H",
|
||||
},
|
||||
{
|
||||
value: "2010H",
|
||||
label: "2010H",
|
||||
},
|
||||
{
|
||||
value: "2011H",
|
||||
label: "2011H",
|
||||
},
|
||||
{
|
||||
value: "2012H",
|
||||
label: "2012H",
|
||||
},
|
||||
{
|
||||
value: "2013H",
|
||||
label: "2013H",
|
||||
},
|
||||
{
|
||||
value: "2014H",
|
||||
label: "2014H",
|
||||
},
|
||||
{
|
||||
value: "2015H",
|
||||
label: "2015H",
|
||||
},
|
||||
{
|
||||
value: "2016H",
|
||||
label: "2016H",
|
||||
},
|
||||
{
|
||||
value: "2017H",
|
||||
label: "2017H",
|
||||
},
|
||||
{
|
||||
value: "2018H",
|
||||
label: "2018H",
|
||||
},
|
||||
{
|
||||
value: "2019H",
|
||||
label: "2019H",
|
||||
},
|
||||
{
|
||||
value: "2020H",
|
||||
label: "2020H",
|
||||
}, {
|
||||
value: "2021H",
|
||||
label: "2021H",
|
||||
},
|
||||
{
|
||||
value: "2022H",
|
||||
label: "2022H",
|
||||
},
|
||||
{
|
||||
value: "2023H",
|
||||
label: "2023H",
|
||||
},
|
||||
{
|
||||
value: "2024H",
|
||||
label: "2024H",
|
||||
},
|
||||
{
|
||||
value: "2027H",
|
||||
label: "2027H",
|
||||
},
|
||||
{
|
||||
value: "2028H",
|
||||
label: "2028H",
|
||||
},
|
||||
{
|
||||
value: "2029H",
|
||||
label: "2029H",
|
||||
},
|
||||
{
|
||||
value: "2030H",
|
||||
label: "2030H",
|
||||
}, {
|
||||
value: "2031H",
|
||||
label: "2031H",
|
||||
}
|
||||
],
|
||||
options5: [
|
||||
{
|
||||
value: " BIT（位0/1）",
|
||||
label: " BIT（位0/1）"
|
||||
},
|
||||
{
|
||||
value: "WORD（16位无符号整数）",
|
||||
label: "WORD（16位无符号整数）"
|
||||
}, {
|
||||
value: "INT（16位有符号整数）",
|
||||
label: "INT（16位有符号整数）"
|
||||
},
|
||||
{
|
||||
value: "DWORD（32位无符号整数）",
|
||||
label: "DWORD（32位无符号整数）"
|
||||
},
|
||||
{
|
||||
value: "DINT（32位有符号整数）",
|
||||
label: "DINT（32位有符号整数）"
|
||||
}, {
|
||||
value: "FLOAT（单精度浮点数）",
|
||||
label: "FLOAT（单精度浮点数）"
|
||||
}, {
|
||||
value: "DOUBLE（64位浮点数）",
|
||||
label: "DOUBLE（64位浮点数）"
|
||||
}, {
|
||||
value: "STRING（8位字符串）",
|
||||
label: "STRING（8位字符串）"
|
||||
}, {
|
||||
value: "BCD16（16位BCD码）",
|
||||
label: "BCD16（16位BCD码）"
|
||||
}, {
|
||||
value: "ULONG（64位无符号整数）",
|
||||
label: "ULONG（64位无符号整数）"
|
||||
}, {
|
||||
value: "LONG（64位有符号整数）",
|
||||
label: "LONG（64位有符号整数）"
|
||||
},
|
||||
],
|
||||
options6: [{
|
||||
value: "读写",
|
||||
label: "读写"
|
||||
},
|
||||
{
|
||||
value: "只读",
|
||||
label: "只读"
|
||||
}, {
|
||||
value: "只写",
|
||||
label: "只写"
|
||||
}],
|
||||
options7: [{
|
||||
value: "Periodic",
|
||||
label: "Periodic"
|
||||
},
|
||||
{
|
||||
value: "Onchange",
|
||||
label: "Onchange"
|
||||
}, {
|
||||
value: "Never",
|
||||
label: "Never"
|
||||
}],
|
||||
activeIndex: "1",
|
||||
value1: 1,
|
||||
checked: "",
|
||||
labelPosition: "left",
|
||||
formLabelWidth: "116px",
|
||||
input1: 192,
|
||||
add_passage: false,
|
||||
rightMenu: "",
|
||||
dialogVisible: true,
|
||||
menuShow: false,
|
||||
datas: [{
|
||||
label: 'Gateway',
|
||||
children: [{
|
||||
label: '数据采集',
|
||||
children: [{
|
||||
label: 'I/O点'
|
||||
},
|
||||
{
|
||||
label: '用户点',
|
||||
},
|
||||
{
|
||||
label: '计算点',
|
||||
},
|
||||
{
|
||||
label: '系统点',
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
label: "上云服务",
|
||||
children: [
|
||||
{
|
||||
label: "标准 MQTT"
|
||||
},
|
||||
{
|
||||
label: "AWS loT"
|
||||
}]
|
||||
}]
|
||||
}],
|
||||
defaultProps: {
|
||||
children: "children",
|
||||
label: "label",
|
||||
},
|
||||
tableData: [
|
||||
{
|
||||
cjdpz_tagid: "MachinePamHID909",
|
||||
cjdpz_mc: "急停状态",
|
||||
cjdpz_dz: "0X (Coil Status)",
|
||||
cjdpz_jcqdz: "1",
|
||||
cjdpz_cjsjlx: "BIT（位0/1）",
|
||||
cjdpz_dxsx: "读写",
|
||||
cjdpz_scms: "Periodic",
|
||||
cjdpz_dw: "",
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
|
||||
mounted() { },
|
||||
|
||||
methods: {
|
||||
treeNodeClick() {
|
||||
this.add_passage = true;
|
||||
},
|
||||
getDriveName() {
|
||||
this.diag_drive = true;
|
||||
},
|
||||
handleSelect(key, keyPath) {
|
||||
console.log(key, keyPath);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.tree_menu {
|
||||
position: absolute;
|
||||
width: 286px;
|
||||
height: 753px;
|
||||
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);
|
||||
}
|
||||
|
||||
/deep/ .pas_params {
|
||||
position: absolute;
|
||||
left: 362px;
|
||||
top: 95px;
|
||||
width: 1066px;
|
||||
height: 752px;
|
||||
line-height: 20px;
|
||||
border-radius: 3px;
|
||||
background-color: rgba(255, 255, 255, 1);
|
||||
// text-align: center;
|
||||
border: 1px solid rgba(220, 220, 220, 1);
|
||||
|
||||
.el-button {
|
||||
width: 80px;
|
||||
height: 30px;
|
||||
line-height: 0.5;
|
||||
}
|
||||
|
||||
.el-col-12:last-child {
|
||||
padding-right: 150px;
|
||||
}
|
||||
|
||||
.el-col-12:first-child {
|
||||
padding-right: 54px;
|
||||
}
|
||||
|
||||
.el-row {
|
||||
height: 40px;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
|
||||
.el-col-1 {
|
||||
text-align: center;
|
||||
line-height: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.el-col-9 {
|
||||
padding-left: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.el-input__inner {
|
||||
height: 30px;
|
||||
text-align: left;
|
||||
padding: 0px 8px;
|
||||
}
|
||||
|
||||
.content {
|
||||
position: absolute;
|
||||
left: 377px;
|
||||
top: 69px;
|
||||
width: 1220px;
|
||||
height: 836px;
|
||||
line-height: 20px;
|
||||
padding-left: 36px;
|
||||
background-color: rgba(255, 255, 255, 1);
|
||||
color: rgba(16, 16, 16, 1);
|
||||
font-size: 14px;
|
||||
border: 1px solid rgba(187, 187, 187, 1);
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
|
||||
.el-form-item {
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
/deep/ .con_left {
|
||||
.el-con-5 {
|
||||
width: 43px;
|
||||
}
|
||||
}
|
||||
|
||||
.con_left {
|
||||
width: 709px;
|
||||
position: relative;
|
||||
|
||||
.con_left_footer {
|
||||
position: absolute;
|
||||
left: 499px;
|
||||
top: 777px;
|
||||
}
|
||||
}
|
||||
|
||||
.con_right {
|
||||
width: 480px;
|
||||
|
||||
.dialog-footer {
|
||||
.el-button {
|
||||
width: 80px;
|
||||
height: 30px;
|
||||
line-height: 0.5;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,658 @@
|
|||
<!-- 采集点收集 -->
|
||||
<template>
|
||||
<div>
|
||||
<!-- 设置树形控件 -->
|
||||
<!-- <el-button type="info" plain @click="dialogVisible = true">斥候采集点设置</el-button> -->
|
||||
<div v-show="dialogVisible" class="tree_menu">
|
||||
<el-tree :data="datas" :props="defaultProps" @node-click="treeNodeClick"></el-tree>
|
||||
<!-- 树形控件右键组件 -->
|
||||
</div>
|
||||
<div class="pas_params" v-show="add_passage">
|
||||
<div>
|
||||
<el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
|
||||
<el-menu-item index="1">添加</el-menu-item>
|
||||
<el-menu-item index="2">保存</el-menu-item>
|
||||
<el-menu-item index="3">删除</el-menu-item>
|
||||
</el-menu>
|
||||
</div>
|
||||
<el-table ref="singleTable" :data="tableData" style="width: 100%">
|
||||
<el-table-column type="index"> </el-table-column>
|
||||
<el-table-column property="cjdpz_tagid" label="TagID">
|
||||
<template slot-scope="scope">
|
||||
<el-select v-model="scope.row.cjdpz_tagid" placeholder="0X">
|
||||
<el-option v-for="(option,index) in options1" :key="index" :label="option.label" :value="option.value"></el-option>
|
||||
</el-select>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column property="cjdpz_mc" label="名称">
|
||||
<template slot-scope="scope">
|
||||
<el-select v-model="scope.row.cjdpz_mc" placeholder="0X">
|
||||
<el-option v-for="(option,index) in options2" :key="index" :label="option.label" :value="option.value"></el-option>
|
||||
</el-select>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column property="cjdpz_jcqdz" label="地址">
|
||||
<template slot-scope="scope">
|
||||
<el-select v-model="scope.row.cjdpz_dz" placeholder="0X">
|
||||
<el-option v-for="(option,index) in options3" :key="index" :label="option.label" :value="option.value"></el-option>
|
||||
</el-select>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column property="cjdpz_jcqdz" label="寄存地址(十进制)" width="150px">
|
||||
<template slot-scope="scope">
|
||||
<!-- <el-select v-model="scope.row.cjdpz_jcqdz" placeholder="1">
|
||||
<el-option v-for="(option,index) in options4" :key="index" :label="option.label" :value="option.value"></el-option>
|
||||
</el-select> -->
|
||||
<el-input v-model="scope.row.cjdpz_jcqdz" placeholder="1-9999"></el-input>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column property="cjdpz_cjsjlx" label="采集数据类型">
|
||||
<template slot-scope="scope">
|
||||
<el-select v-model="scope.row.cjdpz_cjsjlx" placeholder="bool">
|
||||
<el-option v-for="(option,index) in options5" :key="index" :label="option.label" :value="option.value"></el-option>
|
||||
</el-select>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column property="cjdpz_dxsx" label="读写属性">
|
||||
<template slot-scope="scope">
|
||||
<el-select v-model="scope.row.cjdpz_dxsx" placeholder="读写">
|
||||
<el-option v-for="(option,index) in options6" :key="index" :label="option.label" :value="option.value"></el-option>
|
||||
</el-select>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column property="cjdpz_scms" label="上传模式">
|
||||
<template slot-scope="scope">
|
||||
<el-select v-model="scope.row.cjdpz_scms" placeholder="读写">
|
||||
<el-option v-for="(option,index) in options7" :key="index" :label="option.label" :value="option.value"></el-option>
|
||||
</el-select>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column property="cjdpz_dw" label="单位"> </el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "ChiCollection",
|
||||
|
||||
data() {
|
||||
return {
|
||||
options1: [{
|
||||
value: "MachinePamHID909",
|
||||
label: "MachinePamHID909",
|
||||
}, {
|
||||
value: "MachinePamHID910",
|
||||
label: "MachinePamHID910",
|
||||
}, {
|
||||
value: "MachinePamHID911",
|
||||
label: "MachinePamHID911",
|
||||
}, {
|
||||
value: "MachinePamHID912",
|
||||
label: "MachinePamHID912",
|
||||
}, {
|
||||
value: "MachinePamHID913",
|
||||
label: "MachinePamHID913",
|
||||
}, {
|
||||
value: "MachinePamHID914",
|
||||
label: "MachinePamHID914",
|
||||
}, {
|
||||
value: "MachinePamHID915",
|
||||
label: "MachinePamHID915",
|
||||
}, {
|
||||
value: "MachinePamHID916",
|
||||
label: "MachinePamHID916",
|
||||
}, {
|
||||
value: "MachinePamHID917",
|
||||
label: "MachinePamHID917",
|
||||
}, {
|
||||
value: "MachinePamHID918",
|
||||
label: "MachinePamHID918",
|
||||
}, {
|
||||
value: "MachinePamHID919",
|
||||
label: "MachinePamHID919",
|
||||
}, {
|
||||
value: "MachinePamHID920",
|
||||
label: "MachinePamHID920",
|
||||
}, {
|
||||
value: "MachinePamHID921",
|
||||
label: "MachinePamHID921",
|
||||
}, {
|
||||
value: "MachinePamHID922",
|
||||
label: "MachinePamHID922",
|
||||
}, {
|
||||
value: "MachinePamHID923",
|
||||
label: "MachinePamHID923",
|
||||
}, {
|
||||
value: "MachinePamHID924",
|
||||
label: "MachinePamHID924",
|
||||
}, {
|
||||
value: "MachinePamHID925",
|
||||
label: "MachinePamHID925",
|
||||
}, {
|
||||
value: "MachinePamHID926",
|
||||
label: "MachinePamHID926",
|
||||
}, {
|
||||
value: "MachinePamHID927",
|
||||
label: "MachinePamHID927",
|
||||
}, {
|
||||
value: "MachinePamHID928",
|
||||
label: "MachinePamHID928",
|
||||
}, {
|
||||
value: "MachinePamHID929",
|
||||
label: "MachinePamHID929",
|
||||
}, {
|
||||
value: "MachinePamHID930",
|
||||
label: "MachinePamHID930",
|
||||
}, {
|
||||
value: "MachinePamHID931",
|
||||
label: "MachinePamHID931",
|
||||
}, {
|
||||
value: "MachinePamHID932",
|
||||
label: "MachinePamHID932",
|
||||
}, {
|
||||
value: "MachinePamHID933",
|
||||
label: "MachinePamHID933",
|
||||
}, {
|
||||
value: "MachinePamHID934",
|
||||
label: "MachinePamHID934",
|
||||
}, {
|
||||
value: "MachinePamHID935",
|
||||
label: "MachinePamHID935",
|
||||
}, {
|
||||
value: "MachinePamHID936",
|
||||
label: "MachinePamHID936",
|
||||
}, {
|
||||
value: "MachinePamHID937",
|
||||
label: "MachinePamHID937",
|
||||
}, {
|
||||
value: "MachinePamHID938",
|
||||
label: "MachinePamHID938",
|
||||
}],
|
||||
options2: [{
|
||||
value: "急停状态",
|
||||
label: "急停状态",
|
||||
}, {
|
||||
value: "产量",
|
||||
label: "产量",
|
||||
},
|
||||
{
|
||||
value: "相对位置X",
|
||||
label: "相对位置X",
|
||||
},
|
||||
{
|
||||
value: "相对位置Y",
|
||||
label: "相对位置Y",
|
||||
},
|
||||
{
|
||||
value: "相对位置Z",
|
||||
label: "相对位置Z",
|
||||
},
|
||||
{
|
||||
value: "实际位置X",
|
||||
label: "实际位置X",
|
||||
},
|
||||
{
|
||||
value: "实际位置Y",
|
||||
label: "实际位置Y",
|
||||
},
|
||||
{
|
||||
value: "实际位置Z",
|
||||
label: "实际位置Z",
|
||||
},
|
||||
{
|
||||
value: "主轴转速",
|
||||
label: "主轴转速",
|
||||
},
|
||||
{
|
||||
value: "当前刀具",
|
||||
label: "当前刀具",
|
||||
},
|
||||
{
|
||||
value: "预选刀具",
|
||||
label: "预选刀具",
|
||||
},
|
||||
{
|
||||
value: "报警信息",
|
||||
label: "报警信息",
|
||||
},
|
||||
{
|
||||
value: "驱动单元电流",
|
||||
label: "驱动单元电流",
|
||||
},
|
||||
{
|
||||
value: "负载电流",
|
||||
label: "负载电流",
|
||||
},
|
||||
{
|
||||
value: "额定电流",
|
||||
label: "额定电流",
|
||||
},
|
||||
{
|
||||
value: "运行时间",
|
||||
label: "运行时间",
|
||||
},
|
||||
{
|
||||
value: "加工产品用时",
|
||||
label: "加工产品用时",
|
||||
},
|
||||
{
|
||||
value: "工作模式",
|
||||
label: "工作模式",
|
||||
},
|
||||
{
|
||||
value: "切削速度",
|
||||
label: "切削速度",
|
||||
},
|
||||
{
|
||||
value: "任务信息",
|
||||
label: "任务信息",
|
||||
},
|
||||
{
|
||||
value: "使能状态",
|
||||
label: "使能状态",
|
||||
},
|
||||
{
|
||||
value: "系统状态",
|
||||
label: "系统状态",
|
||||
},
|
||||
{
|
||||
value: "执行任务信息",
|
||||
label: "执行任务信息",
|
||||
},
|
||||
{
|
||||
value: "进给倍军",
|
||||
label: "进给倍军",
|
||||
},
|
||||
{
|
||||
value: "轴速度",
|
||||
label: "轴速度",
|
||||
},
|
||||
{
|
||||
value: "轴角度",
|
||||
label: "轴角度",
|
||||
},
|
||||
{
|
||||
value: "进给速度",
|
||||
label: "进给速度",
|
||||
}],
|
||||
options3: [{
|
||||
value: "0X (Coil Status)",
|
||||
label: "0X (Coil Status)"
|
||||
},
|
||||
{
|
||||
value: "1X (Input Status)",
|
||||
label: "1X (Input Status)"
|
||||
}, {
|
||||
value: "3X (Input Registers)",
|
||||
label: "3X (Input Registers)"
|
||||
},
|
||||
{
|
||||
value: "4X (Holding Register)",
|
||||
label: "4X (Holding Register)"
|
||||
}],
|
||||
options4: [
|
||||
{
|
||||
value: "2000H",
|
||||
label: "2000H",
|
||||
},
|
||||
{
|
||||
value: "2002H",
|
||||
label: "2002H",
|
||||
},
|
||||
{
|
||||
value: "2004H",
|
||||
label: "2004H",
|
||||
},
|
||||
{
|
||||
value: "2005H",
|
||||
label: "2005H",
|
||||
},
|
||||
{
|
||||
value: "2006H",
|
||||
label: "2006H",
|
||||
},
|
||||
{
|
||||
value: "2007H",
|
||||
label: "2007H",
|
||||
},
|
||||
{
|
||||
value: "2008H",
|
||||
label: "2008H",
|
||||
},
|
||||
{
|
||||
value: "2009H",
|
||||
label: "2009H",
|
||||
},
|
||||
{
|
||||
value: "2010H",
|
||||
label: "2010H",
|
||||
},
|
||||
{
|
||||
value: "2011H",
|
||||
label: "2011H",
|
||||
},
|
||||
{
|
||||
value: "2012H",
|
||||
label: "2012H",
|
||||
},
|
||||
{
|
||||
value: "2013H",
|
||||
label: "2013H",
|
||||
},
|
||||
{
|
||||
value: "2014H",
|
||||
label: "2014H",
|
||||
},
|
||||
{
|
||||
value: "2015H",
|
||||
label: "2015H",
|
||||
},
|
||||
{
|
||||
value: "2016H",
|
||||
label: "2016H",
|
||||
},
|
||||
{
|
||||
value: "2017H",
|
||||
label: "2017H",
|
||||
},
|
||||
{
|
||||
value: "2018H",
|
||||
label: "2018H",
|
||||
},
|
||||
{
|
||||
value: "2019H",
|
||||
label: "2019H",
|
||||
},
|
||||
{
|
||||
value: "2020H",
|
||||
label: "2020H",
|
||||
}, {
|
||||
value: "2021H",
|
||||
label: "2021H",
|
||||
},
|
||||
{
|
||||
value: "2022H",
|
||||
label: "2022H",
|
||||
},
|
||||
{
|
||||
value: "2023H",
|
||||
label: "2023H",
|
||||
},
|
||||
{
|
||||
value: "2024H",
|
||||
label: "2024H",
|
||||
},
|
||||
{
|
||||
value: "2027H",
|
||||
label: "2027H",
|
||||
},
|
||||
{
|
||||
value: "2028H",
|
||||
label: "2028H",
|
||||
},
|
||||
{
|
||||
value: "2029H",
|
||||
label: "2029H",
|
||||
},
|
||||
{
|
||||
value: "2030H",
|
||||
label: "2030H",
|
||||
}, {
|
||||
value: "2031H",
|
||||
label: "2031H",
|
||||
}
|
||||
],
|
||||
options5: [
|
||||
{
|
||||
value: " BIT（位0/1）",
|
||||
label: " BIT（位0/1）"
|
||||
},
|
||||
{
|
||||
value: "WORD（16位无符号整数）",
|
||||
label: "WORD（16位无符号整数）"
|
||||
}, {
|
||||
value: "INT（16位有符号整数）",
|
||||
label: "INT（16位有符号整数）"
|
||||
},
|
||||
{
|
||||
value: "DWORD（32位无符号整数）",
|
||||
label: "DWORD（32位无符号整数）"
|
||||
},
|
||||
{
|
||||
value: "DINT（32位有符号整数）",
|
||||
label: "DINT（32位有符号整数）"
|
||||
}, {
|
||||
value: "FLOAT（单精度浮点数）",
|
||||
label: "FLOAT（单精度浮点数）"
|
||||
}, {
|
||||
value: "DOUBLE（64位浮点数）",
|
||||
label: "DOUBLE（64位浮点数）"
|
||||
}, {
|
||||
value: "STRING（8位字符串）",
|
||||
label: "STRING（8位字符串）"
|
||||
}, {
|
||||
value: "BCD16（16位BCD码）",
|
||||
label: "BCD16（16位BCD码）"
|
||||
}, {
|
||||
value: "ULONG（64位无符号整数）",
|
||||
label: "ULONG（64位无符号整数）"
|
||||
}, {
|
||||
value: "LONG（64位有符号整数）",
|
||||
label: "LONG（64位有符号整数）"
|
||||
},
|
||||
],
|
||||
options6: [{
|
||||
value: "读写",
|
||||
label: "读写"
|
||||
},
|
||||
{
|
||||
value: "只读",
|
||||
label: "只读"
|
||||
}, {
|
||||
value: "只写",
|
||||
label: "只写"
|
||||
}],
|
||||
options7: [{
|
||||
value: "Periodic",
|
||||
label: "Periodic"
|
||||
},
|
||||
{
|
||||
value: "Onchange",
|
||||
label: "Onchange"
|
||||
}, {
|
||||
value: "Never",
|
||||
label: "Never"
|
||||
}],
|
||||
activeIndex: "1",
|
||||
value1: 1,
|
||||
checked: "",
|
||||
labelPosition: "left",
|
||||
formLabelWidth: "116px",
|
||||
input1: 192,
|
||||
add_passage: false,
|
||||
rightMenu: "",
|
||||
dialogVisible: true,
|
||||
menuShow: false,
|
||||
datas: [{
|
||||
label: 'Gateway',
|
||||
children: [{
|
||||
label: '数据采集',
|
||||
children: [{
|
||||
label: 'I/O点'
|
||||
},
|
||||
{
|
||||
label: '用户点',
|
||||
},
|
||||
{
|
||||
label: '计算点',
|
||||
},
|
||||
{
|
||||
label: '系统点',
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
label: "上云服务",
|
||||
children: [
|
||||
{
|
||||
label: "标准 MQTT"
|
||||
},
|
||||
{
|
||||
label: "AWS loT"
|
||||
}]
|
||||
}]
|
||||
}],
|
||||
defaultProps: {
|
||||
children: "children",
|
||||
label: "label",
|
||||
},
|
||||
tableData: [
|
||||
{
|
||||
cjdpz_tagid: "MachinePamHID909",
|
||||
cjdpz_mc: "急停状态",
|
||||
cjdpz_dz: "0X (Coil Status)",
|
||||
cjdpz_jcqdz: "1",
|
||||
cjdpz_cjsjlx: "BIT（位0/1）",
|
||||
cjdpz_dxsx: "读写",
|
||||
cjdpz_scms: "Periodic",
|
||||
cjdpz_dw: "",
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
|
||||
mounted() { },
|
||||
|
||||
methods: {
|
||||
treeNodeClick() {
|
||||
this.add_passage = true;
|
||||
},
|
||||
getDriveName() {
|
||||
this.diag_drive = true;
|
||||
},
|
||||
handleSelect(key, keyPath) {
|
||||
console.log(key, keyPath);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.tree_menu {
|
||||
position: absolute;
|
||||
width: 286px;
|
||||
height: 753px;
|
||||
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);
|
||||
}
|
||||
|
||||
/deep/ .pas_params {
|
||||
position: absolute;
|
||||
left: 362px;
|
||||
top: 95px;
|
||||
width: 1066px;
|
||||
height: 752px;
|
||||
line-height: 20px;
|
||||
border-radius: 3px;
|
||||
background-color: rgba(255, 255, 255, 1);
|
||||
// text-align: center;
|
||||
border: 1px solid rgba(220, 220, 220, 1);
|
||||
|
||||
.el-button {
|
||||
width: 80px;
|
||||
height: 30px;
|
||||
line-height: 0.5;
|
||||
}
|
||||
|
||||
.el-col-12:last-child {
|
||||
padding-right: 150px;
|
||||
}
|
||||
|
||||
.el-col-12:first-child {
|
||||
padding-right: 54px;
|
||||
}
|
||||
|
||||
.el-row {
|
||||
height: 40px;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
|
||||
.el-col-1 {
|
||||
text-align: center;
|
||||
line-height: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.el-col-9 {
|
||||
padding-left: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.el-input__inner {
|
||||
height: 30px;
|
||||
text-align: left;
|
||||
padding: 0px 8px;
|
||||
}
|
||||
|
||||
.content {
|
||||
position: absolute;
|
||||
left: 377px;
|
||||
top: 69px;
|
||||
width: 1220px;
|
||||
height: 836px;
|
||||
line-height: 20px;
|
||||
padding-left: 36px;
|
||||
background-color: rgba(255, 255, 255, 1);
|
||||
color: rgba(16, 16, 16, 1);
|
||||
font-size: 14px;
|
||||
border: 1px solid rgba(187, 187, 187, 1);
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
|
||||
.el-form-item {
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
/deep/ .con_left {
|
||||
.el-con-5 {
|
||||
width: 43px;
|
||||
}
|
||||
}
|
||||
|
||||
.con_left {
|
||||
width: 709px;
|
||||
position: relative;
|
||||
|
||||
.con_left_footer {
|
||||
position: absolute;
|
||||
left: 499px;
|
||||
top: 777px;
|
||||
}
|
||||
}
|
||||
|
||||
.con_right {
|
||||
width: 480px;
|
||||
|
||||
.dialog-footer {
|
||||
.el-button {
|
||||
width: 80px;
|
||||
height: 30px;
|
||||
line-height: 0.5;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
@ -0,0 +1,658 @@
|
|||
<!-- 采集点收集 -->
|
||||
<template>
|
||||
<div>
|
||||
<!-- 设置树形控件 -->
|
||||
<!-- <el-button type="info" plain @click="dialogVisible = true">斥候采集点设置</el-button> -->
|
||||
<div v-show="dialogVisible" class="tree_menu">
|
||||
<el-tree :data="datas" :props="defaultProps" @node-click="treeNodeClick"></el-tree>
|
||||
<!-- 树形控件右键组件 -->
|
||||
</div>
|
||||
<div class="pas_params" v-show="add_passage">
|
||||
<div>
|
||||
<el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
|
||||
<el-menu-item index="1">添加</el-menu-item>
|
||||
<el-menu-item index="2">保存</el-menu-item>
|
||||
<el-menu-item index="3">删除</el-menu-item>
|
||||
</el-menu>
|
||||
</div>
|
||||
<el-table ref="singleTable" :data="tableData" style="width: 100%">
|
||||
<el-table-column type="index"> </el-table-column>
|
||||
<el-table-column property="cjdpz_tagid" label="TagID">
|
||||
<template slot-scope="scope">
|
||||
<el-select v-model="scope.row.cjdpz_tagid" placeholder="0X">
|
||||
<el-option v-for="(option,index) in options1" :key="index" :label="option.label" :value="option.value"></el-option>
|
||||
</el-select>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column property="cjdpz_mc" label="名称">
|
||||
<template slot-scope="scope">
|
||||
<el-select v-model="scope.row.cjdpz_mc" placeholder="0X">
|
||||
<el-option v-for="(option,index) in options2" :key="index" :label="option.label" :value="option.value"></el-option>
|
||||
</el-select>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column property="cjdpz_jcqdz" label="地址">
|
||||
<template slot-scope="scope">
|
||||
<el-select v-model="scope.row.cjdpz_dz" placeholder="0X">
|
||||
<el-option v-for="(option,index) in options3" :key="index" :label="option.label" :value="option.value"></el-option>
|
||||
</el-select>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column property="cjdpz_jcqdz" label="寄存地址(十进制)" width="150px">
|
||||
<template slot-scope="scope">
|
||||
<!-- <el-select v-model="scope.row.cjdpz_jcqdz" placeholder="1">
|
||||
<el-option v-for="(option,index) in options4" :key="index" :label="option.label" :value="option.value"></el-option>
|
||||
</el-select> -->
|
||||
<el-input v-model="scope.row.cjdpz_jcqdz" placeholder="1-9999"></el-input>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column property="cjdpz_cjsjlx" label="采集数据类型">
|
||||
<template slot-scope="scope">
|
||||
<el-select v-model="scope.row.cjdpz_cjsjlx" placeholder="bool">
|
||||
<el-option v-for="(option,index) in options5" :key="index" :label="option.label" :value="option.value"></el-option>
|
||||
</el-select>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column property="cjdpz_dxsx" label="读写属性">
|
||||
<template slot-scope="scope">
|
||||
<el-select v-model="scope.row.cjdpz_dxsx" placeholder="读写">
|
||||
<el-option v-for="(option,index) in options6" :key="index" :label="option.label" :value="option.value"></el-option>
|
||||
</el-select>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column property="cjdpz_scms" label="上传模式">
|
||||
<template slot-scope="scope">
|
||||
<el-select v-model="scope.row.cjdpz_scms" placeholder="读写">
|
||||
<el-option v-for="(option,index) in options7" :key="index" :label="option.label" :value="option.value"></el-option>
|
||||
</el-select>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column property="cjdpz_dw" label="单位"> </el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "ChiCollection",
|
||||
|
||||
data() {
|
||||
return {
|
||||
options1: [{
|
||||
value: "MachinePamHID909",
|
||||
label: "MachinePamHID909",
|
||||
}, {
|
||||
value: "MachinePamHID910",
|
||||
label: "MachinePamHID910",
|
||||
}, {
|
||||
value: "MachinePamHID911",
|
||||
label: "MachinePamHID911",
|
||||
}, {
|
||||
value: "MachinePamHID912",
|
||||
label: "MachinePamHID912",
|
||||
}, {
|
||||
value: "MachinePamHID913",
|
||||
label: "MachinePamHID913",
|
||||
}, {
|
||||
value: "MachinePamHID914",
|
||||
label: "MachinePamHID914",
|
||||
}, {
|
||||
value: "MachinePamHID915",
|
||||
label: "MachinePamHID915",
|
||||
}, {
|
||||
value: "MachinePamHID916",
|
||||
label: "MachinePamHID916",
|
||||
}, {
|
||||
value: "MachinePamHID917",
|
||||
label: "MachinePamHID917",
|
||||
}, {
|
||||
value: "MachinePamHID918",
|
||||
label: "MachinePamHID918",
|
||||
}, {
|
||||
value: "MachinePamHID919",
|
||||
label: "MachinePamHID919",
|
||||
}, {
|
||||
value: "MachinePamHID920",
|
||||
label: "MachinePamHID920",
|
||||
}, {
|
||||
value: "MachinePamHID921",
|
||||
label: "MachinePamHID921",
|
||||
}, {
|
||||
value: "MachinePamHID922",
|
||||
label: "MachinePamHID922",
|
||||
}, {
|
||||
value: "MachinePamHID923",
|
||||
label: "MachinePamHID923",
|
||||
}, {
|
||||
value: "MachinePamHID924",
|
||||
label: "MachinePamHID924",
|
||||
}, {
|
||||
value: "MachinePamHID925",
|
||||
label: "MachinePamHID925",
|
||||
}, {
|
||||
value: "MachinePamHID926",
|
||||
label: "MachinePamHID926",
|
||||
}, {
|
||||
value: "MachinePamHID927",
|
||||
label: "MachinePamHID927",
|
||||
}, {
|
||||
value: "MachinePamHID928",
|
||||
label: "MachinePamHID928",
|
||||
}, {
|
||||
value: "MachinePamHID929",
|
||||
label: "MachinePamHID929",
|
||||
}, {
|
||||
value: "MachinePamHID930",
|
||||
label: "MachinePamHID930",
|
||||
}, {
|
||||
value: "MachinePamHID931",
|
||||
label: "MachinePamHID931",
|
||||
}, {
|
||||
value: "MachinePamHID932",
|
||||
label: "MachinePamHID932",
|
||||
}, {
|
||||
value: "MachinePamHID933",
|
||||
label: "MachinePamHID933",
|
||||
}, {
|
||||
value: "MachinePamHID934",
|
||||
label: "MachinePamHID934",
|
||||
}, {
|
||||
value: "MachinePamHID935",
|
||||
label: "MachinePamHID935",
|
||||
}, {
|
||||
value: "MachinePamHID936",
|
||||
label: "MachinePamHID936",
|
||||
}, {
|
||||
value: "MachinePamHID937",
|
||||
label: "MachinePamHID937",
|
||||
}, {
|
||||
value: "MachinePamHID938",
|
||||
label: "MachinePamHID938",
|
||||
}],
|
||||
options2: [{
|
||||
value: "急停状态",
|
||||
label: "急停状态",
|
||||
}, {
|
||||
value: "产量",
|
||||
label: "产量",
|
||||
},
|
||||
{
|
||||
value: "相对位置X",
|
||||
label: "相对位置X",
|
||||
},
|
||||
{
|
||||
value: "相对位置Y",
|
||||
label: "相对位置Y",
|
||||
},
|
||||
{
|
||||
value: "相对位置Z",
|
||||
label: "相对位置Z",
|
||||
},
|
||||
{
|
||||
value: "实际位置X",
|
||||
label: "实际位置X",
|
||||
},
|
||||
{
|
||||
value: "实际位置Y",
|
||||
label: "实际位置Y",
|
||||
},
|
||||
{
|
||||
value: "实际位置Z",
|
||||
label: "实际位置Z",
|
||||
},
|
||||
{
|
||||
value: "主轴转速",
|
||||
label: "主轴转速",
|
||||
},
|
||||
{
|
||||
value: "当前刀具",
|
||||
label: "当前刀具",
|
||||
},
|
||||
{
|
||||
value: "预选刀具",
|
||||
label: "预选刀具",
|
||||
},
|
||||
{
|
||||
value: "报警信息",
|
||||
label: "报警信息",
|
||||
},
|
||||
{
|
||||
value: "驱动单元电流",
|
||||
label: "驱动单元电流",
|
||||
},
|
||||
{
|
||||
value: "负载电流",
|
||||
label: "负载电流",
|
||||
},
|
||||
{
|
||||
value: "额定电流",
|
||||
label: "额定电流",
|
||||
},
|
||||
{
|
||||
value: "运行时间",
|
||||
label: "运行时间",
|
||||
},
|
||||
{
|
||||
value: "加工产品用时",
|
||||
label: "加工产品用时",
|
||||
},
|
||||
{
|
||||
value: "工作模式",
|
||||
label: "工作模式",
|
||||
},
|
||||
{
|
||||
value: "切削速度",
|
||||
label: "切削速度",
|
||||
},
|
||||
{
|
||||
value: "任务信息",
|
||||
label: "任务信息",
|
||||
},
|
||||
{
|
||||
value: "使能状态",
|
||||
label: "使能状态",
|
||||
},
|
||||
{
|
||||
value: "系统状态",
|
||||
label: "系统状态",
|
||||
},
|
||||
{
|
||||
value: "执行任务信息",
|
||||
label: "执行任务信息",
|
||||
},
|
||||
{
|
||||
value: "进给倍军",
|
||||
label: "进给倍军",
|
||||
},
|
||||
{
|
||||
value: "轴速度",
|
||||
label: "轴速度",
|
||||
},
|
||||
{
|
||||
value: "轴角度",
|
||||
label: "轴角度",
|
||||
},
|
||||
{
|
||||
value: "进给速度",
|
||||
label: "进给速度",
|
||||
}],
|
||||
options3: [{
|
||||
value: "0X (Coil Status)",
|
||||
label: "0X (Coil Status)"
|
||||
},
|
||||
{
|
||||
value: "1X (Input Status)",
|
||||
label: "1X (Input Status)"
|
||||
}, {
|
||||
value: "3X (Input Registers)",
|
||||
label: "3X (Input Registers)"
|
||||
},
|
||||
{
|
||||
value: "4X (Holding Register)",
|
||||
label: "4X (Holding Register)"
|
||||
}],
|
||||
options4: [
|
||||
{
|
||||
value: "2000H",
|
||||
label: "2000H",
|
||||
},
|
||||
{
|
||||
value: "2002H",
|
||||
label: "2002H",
|
||||
},
|
||||
{
|
||||
value: "2004H",
|
||||
label: "2004H",
|
||||
},
|
||||
{
|
||||
value: "2005H",
|
||||
label: "2005H",
|
||||
},
|
||||
{
|
||||
value: "2006H",
|
||||
label: "2006H",
|
||||
},
|
||||
{
|
||||
value: "2007H",
|
||||
label: "2007H",
|
||||
},
|
||||
{
|
||||
value: "2008H",
|
||||
label: "2008H",
|
||||
},
|
||||
{
|
||||
value: "2009H",
|
||||
label: "2009H",
|
||||
},
|
||||
{
|
||||
value: "2010H",
|
||||
label: "2010H",
|
||||
},
|
||||
{
|
||||
value: "2011H",
|
||||
label: "2011H",
|
||||
},
|
||||
{
|
||||
value: "2012H",
|
||||
label: "2012H",
|
||||
},
|
||||
{
|
||||
value: "2013H",
|
||||
label: "2013H",
|
||||
},
|
||||
{
|
||||
value: "2014H",
|
||||
label: "2014H",
|
||||
},
|
||||
{
|
||||
value: "2015H",
|
||||
label: "2015H",
|
||||
},
|
||||
{
|
||||
value: "2016H",
|
||||
label: "2016H",
|
||||
},
|
||||
{
|
||||
value: "2017H",
|
||||
label: "2017H",
|
||||
},
|
||||
{
|
||||
value: "2018H",
|
||||
label: "2018H",
|
||||
},
|
||||
{
|
||||
value: "2019H",
|
||||
label: "2019H",
|
||||
},
|
||||
{
|
||||
value: "2020H",
|
||||
label: "2020H",
|
||||
}, {
|
||||
value: "2021H",
|
||||
label: "2021H",
|
||||
},
|
||||
{
|
||||
value: "2022H",
|
||||
label: "2022H",
|
||||
},
|
||||
{
|
||||
value: "2023H",
|
||||
label: "2023H",
|
||||
},
|
||||
{
|
||||
value: "2024H",
|
||||
label: "2024H",
|
||||
},
|
||||
{
|
||||
value: "2027H",
|
||||
label: "2027H",
|
||||
},
|
||||
{
|
||||
value: "2028H",
|
||||
label: "2028H",
|
||||
},
|
||||
{
|
||||
value: "2029H",
|
||||
label: "2029H",
|
||||
},
|
||||
{
|
||||
value: "2030H",
|
||||
label: "2030H",
|
||||
}, {
|
||||
value: "2031H",
|
||||
label: "2031H",
|
||||
}
|
||||
],
|
||||
options5: [
|
||||
{
|
||||
value: " BIT（位0/1）",
|
||||
label: " BIT（位0/1）"
|
||||
},
|
||||
{
|
||||
value: "WORD（16位无符号整数）",
|
||||
label: "WORD（16位无符号整数）"
|
||||
}, {
|
||||
value: "INT（16位有符号整数）",
|
||||
label: "INT（16位有符号整数）"
|
||||
},
|
||||
{
|
||||
value: "DWORD（32位无符号整数）",
|
||||
label: "DWORD（32位无符号整数）"
|
||||
},
|
||||
{
|
||||
value: "DINT（32位有符号整数）",
|
||||
label: "DINT（32位有符号整数）"
|
||||
}, {
|
||||
value: "FLOAT（单精度浮点数）",
|
||||
label: "FLOAT（单精度浮点数）"
|
||||
}, {
|
||||
value: "DOUBLE（64位浮点数）",
|
||||
label: "DOUBLE（64位浮点数）"
|
||||
}, {
|
||||
value: "STRING（8位字符串）",
|
||||
label: "STRING（8位字符串）"
|
||||
}, {
|
||||
value: "BCD16（16位BCD码）",
|
||||
label: "BCD16（16位BCD码）"
|
||||
}, {
|
||||
value: "ULONG（64位无符号整数）",
|
||||
label: "ULONG（64位无符号整数）"
|
||||
}, {
|
||||
value: "LONG（64位有符号整数）",
|
||||
label: "LONG（64位有符号整数）"
|
||||
},
|
||||
],
|
||||
options6: [{
|
||||
value: "读写",
|
||||
label: "读写"
|
||||
},
|
||||
{
|
||||
value: "只读",
|
||||
label: "只读"
|
||||
}, {
|
||||
value: "只写",
|
||||
label: "只写"
|
||||
}],
|
||||
options7: [{
|
||||
value: "Periodic",
|
||||
label: "Periodic"
|
||||
},
|
||||
{
|
||||
value: "Onchange",
|
||||
label: "Onchange"
|
||||
}, {
|
||||
value: "Never",
|
||||
label: "Never"
|
||||
}],
|
||||
activeIndex: "1",
|
||||
value1: 1,
|
||||
checked: "",
|
||||
labelPosition: "left",
|
||||
formLabelWidth: "116px",
|
||||
input1: 192,
|
||||
add_passage: false,
|
||||
rightMenu: "",
|
||||
dialogVisible: true,
|
||||
menuShow: false,
|
||||
datas: [{
|
||||
label: 'Gateway',
|
||||
children: [{
|
||||
label: '数据采集',
|
||||
children: [{
|
||||
label: 'I/O点'
|
||||
},
|
||||
{
|
||||
label: '用户点',
|
||||
},
|
||||
{
|
||||
label: '计算点',
|
||||
},
|
||||
{
|
||||
label: '系统点',
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
label: "上云服务",
|
||||
children: [
|
||||
{
|
||||
label: "标准 MQTT"
|
||||
},
|
||||
{
|
||||
label: "AWS loT"
|
||||
}]
|
||||
}]
|
||||
}],
|
||||
defaultProps: {
|
||||
children: "children",
|
||||
label: "label",
|
||||
},
|
||||
tableData: [
|
||||
{
|
||||
cjdpz_tagid: "MachinePamHID909",
|
||||
cjdpz_mc: "急停状态",
|
||||
cjdpz_dz: "0X (Coil Status)",
|
||||
cjdpz_jcqdz: "1",
|
||||
cjdpz_cjsjlx: "BIT（位0/1）",
|
||||
cjdpz_dxsx: "读写",
|
||||
cjdpz_scms: "Periodic",
|
||||
cjdpz_dw: "",
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
|
||||
mounted() { },
|
||||
|
||||
methods: {
|
||||
treeNodeClick() {
|
||||
this.add_passage = true;
|
||||
},
|
||||
getDriveName() {
|
||||
this.diag_drive = true;
|
||||
},
|
||||
handleSelect(key, keyPath) {
|
||||
console.log(key, keyPath);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.tree_menu {
|
||||
position: absolute;
|
||||
width: 286px;
|
||||
height: 753px;
|
||||
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);
|
||||
}
|
||||
|
||||
/deep/ .pas_params {
|
||||
position: absolute;
|
||||
left: 362px;
|
||||
top: 95px;
|
||||
width: 1066px;
|
||||
height: 752px;
|
||||
line-height: 20px;
|
||||
border-radius: 3px;
|
||||
background-color: rgba(255, 255, 255, 1);
|
||||
// text-align: center;
|
||||
border: 1px solid rgba(220, 220, 220, 1);
|
||||
|
||||
.el-button {
|
||||
width: 80px;
|
||||
height: 30px;
|
||||
line-height: 0.5;
|
||||
}
|
||||
|
||||
.el-col-12:last-child {
|
||||
padding-right: 150px;
|
||||
}
|
||||
|
||||
.el-col-12:first-child {
|
||||
padding-right: 54px;
|
||||
}
|
||||
|
||||
.el-row {
|
||||
height: 40px;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
|
||||
.el-col-1 {
|
||||
text-align: center;
|
||||
line-height: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.el-col-9 {
|
||||
padding-left: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.el-input__inner {
|
||||
height: 30px;
|
||||
text-align: left;
|
||||
padding: 0px 8px;
|
||||
}
|
||||
|
||||
.content {
|
||||
position: absolute;
|
||||
left: 377px;
|
||||
top: 69px;
|
||||
width: 1220px;
|
||||
height: 836px;
|
||||
line-height: 20px;
|
||||
padding-left: 36px;
|
||||
background-color: rgba(255, 255, 255, 1);
|
||||
color: rgba(16, 16, 16, 1);
|
||||
font-size: 14px;
|
||||
border: 1px solid rgba(187, 187, 187, 1);
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
|
||||
.el-form-item {
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
/deep/ .con_left {
|
||||
.el-con-5 {
|
||||
width: 43px;
|
||||
}
|
||||
}
|
||||
|
||||
.con_left {
|
||||
width: 709px;
|
||||
position: relative;
|
||||
|
||||
.con_left_footer {
|
||||
position: absolute;
|
||||
left: 499px;
|
||||
top: 777px;
|
||||
}
|
||||
}
|
||||
|
||||
.con_right {
|
||||
width: 480px;
|
||||
|
||||
.dialog-footer {
|
||||
.el-button {
|
||||
width: 80px;
|
||||
height: 30px;
|
||||
line-height: 0.5;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
@ -0,0 +1,668 @@
|
|||
<!-- 斥候的通道配置 -->
|
||||
<template>
|
||||
<div>
|
||||
<!-- 设置树形控件 -->
|
||||
<div v-click-outside="closeMenu">
|
||||
<!-- <el-button type="info" plain @click="dialogVisible = true">斥候通道配置</el-button> -->
|
||||
<div class="tree_menu" v-show="dialogVisible">
|
||||
<el-tree :data="datas" :props="defaultProps" @node-contextmenu="rightClick"
|
||||
@node-click="treeNodeClick"></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="902px">
|
||||
<el-form :label-position="labelPosition" :rules="rules" ref="ruleForm">
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="设备名称:" :label-width="formLabelWidth" prop="sbpz_sbmc">
|
||||
<el-select v-model="sbpz_sbmc" placeholder="" style="width: 200px;height:30px">
|
||||
<el-option v-for="item in options1" :key="item.value" :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="sbpz_kzqxy">
|
||||
<el-row>
|
||||
<el-col :span="18">
|
||||
<el-input v-model="sbpz_kzqxy" placeholder="" style="width: 200px;height:30px"
|
||||
disabled></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="sbpz_ip">
|
||||
<el-row>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="sbpz_ip1" style="width: 43px;height:30px"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1">.
|
||||
</el-col>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="sbpz_ip2" style="width: 43px;height:30px"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1">.</el-col>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="sbpz_ip3" style="width: 43px;height:30px"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1">.</el-col>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="sbpz_ip4" style="width: 43px;height:30px"></el-input>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="端口号:" :label-width="formLabelWidth" prop="sbpz_port">
|
||||
<el-input v-model="sbpz_port" placeholder="" style="width: 200px;height:30px"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="从站地址:" :label-width="formLabelWidth" prop="sbpz_czdz">
|
||||
<el-input v-model="sbpz_czdz" 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="sbpz_lxzq">
|
||||
<el-input v-model="sbpz_lxzq" placeholder="" style="width: 200px;height:30px"></el-input>
|
||||
<div class="infos">1-3600</div>
|
||||
</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;
|
||||
color: rgba(16, 16, 16, 1);font-size: 14px;text-align: left; border: none;">
|
||||
收起</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<el-divider></el-divider>
|
||||
<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 label="启用毫秒采集:" :label-width="formLabelWidth" prop="sbpz_qyhmcj">
|
||||
<el-switch v-model="sbpz_qyhmcj"></el-switch>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="启用批量采集:" :label-width="formLabelWidth" prop="sbpz_qyplcj">
|
||||
<el-switch v-model="sbpz_qyplcj"></el-switch>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="最大批量采集数:" label-width="126px" prop="sbpz_zdplcjs">
|
||||
<el-input v-model="sbpz_zdplcjs" placeholder="64"
|
||||
style="width: 200px;height:30px"></el-input>
|
||||
<div class="infos">2-125</div>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="采集超过时间(ms):" label-width="140px" prop="sbpz_cjcgsj">
|
||||
<el-input v-model="sbpz_cjcgsj" placeholder="64"
|
||||
style="width: 200px;height:30px"></el-input>
|
||||
<div class="infos">2-60000</div>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="周期上报OnChange数据:" label-width="186px" prop="sbpz_zqsbonchange">
|
||||
<el-switch v-model="sbpz_zqsbonchange"></el-switch>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="通讯事件间隔(ms):" label-width="140px" prop="sbpz_txsjjg">
|
||||
<el-input v-model="sbpz_txsjjg" placeholder="64"
|
||||
style="width: 200px;height:30px"></el-input>
|
||||
<div class="infos">0-1000</div>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div class="footer_con">
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="线圈寄存器写入功能码:" label-width="120px" style="line-height: 20px;">
|
||||
<el-select v-model="sbpz_xqjcqxr" placeholder="" style="width: 200px;height:30px">
|
||||
<el-option v-for="item in options2" :key="item.value" :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="120px">
|
||||
<el-select v-model="sbpz_bcjcqxr" placeholder="" style="width: 200px;height:30px">
|
||||
<el-option v-for="item in options3" :key="item.value" :label="item.label"
|
||||
:value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</el-form>
|
||||
</div>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="add_passage = false">保 存</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="add_passage = false"></i>
|
||||
</div>
|
||||
<el-divider></el-divider>
|
||||
<el-tree :data="datas2" :props="defaultProps" default-expand-all></el-tree>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'ChiDevice',
|
||||
|
||||
data() {
|
||||
return {
|
||||
sbpz_sbmc: "有线区精雕2",
|
||||
sbpz_kzqxy: "",
|
||||
sbpz_ip: "",
|
||||
sbpz_ip1: "",
|
||||
sbpz_ip2: "",
|
||||
sbpz_ip3: "",
|
||||
sbpz_ip4: "",
|
||||
sbpz_port: "",
|
||||
sbpz_czdz: "",
|
||||
sbpz_lxzq: "",
|
||||
sbpz_qyhmcj: "",
|
||||
sbpz_qyplcj: "",
|
||||
sbpz_zdplcjs: "",
|
||||
sbpz_cjcgsj: "",
|
||||
sbpz_zqsbonchange: "",
|
||||
sbpz_txsjjg: "",
|
||||
sbpz_xqjcqxr: "05（默认）",
|
||||
sbpz_bcjcqxr: "06（默认）",
|
||||
diag_drive: false,
|
||||
options1: [{
|
||||
value: '有线区精雕2',
|
||||
label: '有线区精雕2'
|
||||
}, {
|
||||
value: '无线区精雕2',
|
||||
label: '无线区精雕2'
|
||||
}],
|
||||
options2: [{
|
||||
value: "05（默认）",
|
||||
label: "05（默认）",
|
||||
}],
|
||||
options3: [{
|
||||
value: "06（默认）",
|
||||
label: "06（默认）"
|
||||
}],
|
||||
isdisabled: true,
|
||||
radio: "1",
|
||||
checked1: false,
|
||||
checked2: true,
|
||||
is_retract: true,
|
||||
labelPosition: "left",
|
||||
formLabelWidth: "116px",
|
||||
input1: 192,
|
||||
add_passage: false,
|
||||
rightMenu: "",
|
||||
dialogVisible: true,
|
||||
menuShow: false,
|
||||
datas: [{
|
||||
label: 'Gateway',
|
||||
children: [{
|
||||
label: '数据采集',
|
||||
children: [{
|
||||
label: 'I/O点'
|
||||
},
|
||||
{
|
||||
label: '用户点',
|
||||
},
|
||||
{
|
||||
label: '计算点',
|
||||
},
|
||||
{
|
||||
label: '系统点',
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
label: "上云服务",
|
||||
children: [
|
||||
{
|
||||
label: "标准 MQTT"
|
||||
},
|
||||
{
|
||||
label: "AWS loT"
|
||||
}]
|
||||
}]
|
||||
}],
|
||||
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: {
|
||||
sbpz_sbmc: [
|
||||
{ required: true, message: '请输入通道名称', trigger: 'change' },
|
||||
],
|
||||
sbpz_kzqxy: [
|
||||
{ required: true, message: '请输入控制器协议', trigger: 'blur' },
|
||||
],
|
||||
sbpz_ip: [
|
||||
{ required: true, message: '请输入IP地址', trigger: 'blur' },
|
||||
],
|
||||
sbpz_czdz: [
|
||||
{ required: true, message: '请输入从站地址', trigger: 'blur' },
|
||||
],
|
||||
sbpz_port: [
|
||||
{ required: true, message: '请输入端口号', trigger: 'blur' },
|
||||
],
|
||||
sbpz_lxzq: [
|
||||
{ required: true, message: '请输入轮询时间', trigger: 'blur' },
|
||||
],
|
||||
sbpz_qyhmcj: [
|
||||
{ required: true, message: '启用毫秒采集', trigger: 'change' },
|
||||
],
|
||||
sbpz_qyplcj: [
|
||||
{ required: true, message: '启用批量采集', trigger: 'change' },
|
||||
],
|
||||
sbpz_zdplcjs: [
|
||||
{ required: true, message: '请输入最大批量采集数', trigger: 'blur' },
|
||||
],
|
||||
sbpz_cjcgsj: [
|
||||
{ required: true, message: '请输入采集超过时间', trigger: 'blur' },
|
||||
],
|
||||
sbpz_zqsbonchange: [
|
||||
{ required: true, message: '周期上报Onchange数据', trigger: 'change' },
|
||||
],
|
||||
sbpz_txsjjg: [
|
||||
{ required: true, message: '请输入通讯时间间隔', trigger: 'blur' },
|
||||
],
|
||||
},
|
||||
};
|
||||
},
|
||||
|
||||
mounted() {
|
||||
|
||||
},
|
||||
|
||||
methods: {
|
||||
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() {
|
||||
this.foo()
|
||||
},
|
||||
// 收起点击事件的判断
|
||||
getRetract() {
|
||||
if (this.is_retract == true) {
|
||||
this.is_retract = false;
|
||||
} else {
|
||||
this.is_retract = true;
|
||||
}
|
||||
},
|
||||
getDriveName() {
|
||||
this.diag_drive = true;
|
||||
},
|
||||
changeSwitch1() {
|
||||
this.val1 = !this.val1;
|
||||
},
|
||||
changeSwitch2() {
|
||||
this.val2 = !this.val2;
|
||||
},
|
||||
closeMenu(ev) {
|
||||
console.log({ ev });
|
||||
this.dialogVisible = false;
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
checked1: {
|
||||
handler(old,) {
|
||||
if (old) {
|
||||
this.isdisabled = false;
|
||||
} else {
|
||||
this.isdisabled = true;
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
directives: {
|
||||
'click-outside': {
|
||||
bind: function (el, binding, vnode) {
|
||||
console.log('el', el);
|
||||
console.log("binding", binding);
|
||||
el.event = function (event) {
|
||||
// 检查点击是否发生在节点之内（包括子节点）
|
||||
if (!(el == event.target || el.contains(event.target))) {
|
||||
// 如果没有，则触发调用
|
||||
// 若绑定值为函数，则执行
|
||||
// 这里我们可以通过钩子函数中的 vnode.context，来获取当前组件的作用域
|
||||
if (typeof vnode.context[binding.expression] == 'function') {
|
||||
vnode.context[binding.expression](event)
|
||||
}
|
||||
}
|
||||
}
|
||||
// 绑定事件
|
||||
// 设置为true，代表在DOM树中，注册了该listener的元素，会先于它下方的任何事件目标，接收到该事件。
|
||||
document.body.addEventListener('click', el.event, true)
|
||||
},
|
||||
unbind: function (el) {
|
||||
// 解绑事件
|
||||
document.body.removeEventListener('click', el.event, true)
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.tree_menu {
|
||||
position: absolute;
|
||||
width: 286px;
|
||||
height: 753px;
|
||||
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;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: 668px;
|
||||
|
||||
i {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
/deep/ .pas_params {
|
||||
.el-form-item {
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
.el-col-12:last-child {
|
||||
padding-right: 150px;
|
||||
}
|
||||
|
||||
.el-col-12:first-child {
|
||||
padding-right: 102px;
|
||||
}
|
||||
|
||||
.el-divider--horizontal {
|
||||
margin: 8px 0px;
|
||||
}
|
||||
|
||||
.el-input__inner {
|
||||
height: 30px;
|
||||
text-align: left;
|
||||
padding: 0px 8px;
|
||||
}
|
||||
|
||||
.el-row {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
|
||||
.el-col-1 {
|
||||
text-align: center;
|
||||
line-height: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.el-col-6 {
|
||||
height: 40px;
|
||||
top: 5px;
|
||||
left: 25px;
|
||||
position: relative;
|
||||
width: 50px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/deep/ .super_con {
|
||||
|
||||
.el-form-item {
|
||||
margin-bottom: 7px;
|
||||
}
|
||||
|
||||
.el-row {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.coil {
|
||||
display: inline-block;
|
||||
width: 98px;
|
||||
height: 25px;
|
||||
color: rgba(16, 16, 16, 1);
|
||||
font-size: 14px;
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
||||
.infos {
|
||||
width: 60px;
|
||||
position: absolute;
|
||||
left: 208px;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
/deep/ .footer_con {
|
||||
.el-form-item__label {
|
||||
line-height: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
/deep/ .drvieName_All {
|
||||
position: absolute;
|
||||
left: 1478px;
|
||||
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,211 @@
|
|||
<!-- 斥候IP设置——无线网关页面 -->
|
||||
<template>
|
||||
<div>
|
||||
<!-- <el-button type="info" plain @click="getShow">斥候IP设置——无线网关</el-button> -->
|
||||
<div class="gateway" v-show="isShow">
|
||||
<div class="title">
|
||||
<p class="title_l">IP配置</p>
|
||||
<i class="el-icon-close title_r" @click="isShow = false"></i>
|
||||
</div>
|
||||
<el-divider></el-divider>
|
||||
<div class="content">
|
||||
<el-form :label-position="labelPosition" :rules="rules" ref="ruleForm">
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-form-item
|
||||
label="客户端SSID:"
|
||||
:label-width="formLabelWidth"
|
||||
prop="ippz_ssid"
|
||||
>
|
||||
<el-input
|
||||
v-model="ippz_ssid"
|
||||
placeholder="请输入WIFI名字"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="认证方式:" :label-width="formLabelWidth">
|
||||
<el-select v-model="ippz_rzfs" placeholder="开放式">
|
||||
<el-option
|
||||
v-for="item in options1"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="加密方式:" :label-width="formLabelWidth">
|
||||
<el-select v-model="ippz_jmfs" placeholder="NONE">
|
||||
<el-option
|
||||
v-for="item in options2"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-form-item
|
||||
label="密码:"
|
||||
:label-width="formLabelWidth"
|
||||
prop="ippz_mm"
|
||||
>
|
||||
<el-input
|
||||
v-model="ippz_mm"
|
||||
placeholder="请输入wifi密码"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div class="footer">
|
||||
<el-button type="primary">保 存</el-button>
|
||||
<el-button @click="isShow = false">取 消</el-button>
|
||||
</div>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "ChiGate",
|
||||
data() {
|
||||
return {
|
||||
ippz_ssid: "",
|
||||
ippz_rzfs: "开放式", //答案：WPA2-PSK
|
||||
ippz_jmfs: "NONE", //答案：AES
|
||||
ippz_mm: "",
|
||||
options1: [
|
||||
{
|
||||
value: "开放式",
|
||||
label: "开放式",
|
||||
},
|
||||
{
|
||||
value: "共享式",
|
||||
label: "共享式",
|
||||
},
|
||||
{
|
||||
value: "WPA-PSK",
|
||||
label: "WPA-PSK",
|
||||
},
|
||||
{
|
||||
value: "WPA",
|
||||
label: "WPA",
|
||||
},
|
||||
{
|
||||
value: "WPA2-PSK",
|
||||
label: "WPA2-PSK",
|
||||
},
|
||||
{
|
||||
value: "WPA2",
|
||||
label: "WPA2",
|
||||
},
|
||||
],
|
||||
options2: [
|
||||
{
|
||||
value: "NONE",
|
||||
label: "NONE",
|
||||
},
|
||||
{
|
||||
value: "WEP40",
|
||||
label: "WEP40",
|
||||
},
|
||||
{
|
||||
value: "WEP104",
|
||||
label: "WEP104",
|
||||
},
|
||||
{
|
||||
value: "AES",
|
||||
label: "AES",
|
||||
},
|
||||
],
|
||||
labelPosition: "left",
|
||||
formLabelWidth: "116px",
|
||||
value: "测试",
|
||||
count: 0,
|
||||
isShow: true,
|
||||
rules: {
|
||||
ippz_ssid: [
|
||||
{ required: true, message: "请输入客户端SSID", trigger: "blur" },
|
||||
],
|
||||
ippz_mm: [{ required: true, message: "请输入密码", trigger: "blur" }],
|
||||
},
|
||||
};
|
||||
},
|
||||
|
||||
mounted() {},
|
||||
|
||||
methods: {},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.gateway {
|
||||
position: absolute;
|
||||
left: 648px;
|
||||
top: 226px;
|
||||
width: 470px;
|
||||
height: 384px;
|
||||
line-height: 20px;
|
||||
background: url(../assets/image/bg.png);
|
||||
background-size: 100% 100%;
|
||||
background-color: rgba(255, 255, 255, 1);
|
||||
text-align: center;
|
||||
border: 1px solid rgba(187, 187, 187, 1);
|
||||
|
||||
.el-divider--horizontal {
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
.title {
|
||||
margin: 13px 6px 0px 25px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.title_l {
|
||||
width: 53px;
|
||||
height: 26px;
|
||||
color: rgba(16, 16, 16, 1);
|
||||
font-size: 18px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.title_r {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
cursor: pointer;
|
||||
color: rgba(111, 103, 103, 1);
|
||||
}
|
||||
}
|
||||
|
||||
/deep/ .content {
|
||||
margin-left: 62px;
|
||||
margin-right: 114px;
|
||||
|
||||
.el-input__inner {
|
||||
width: 200px;
|
||||
height: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
/deep/ .footer {
|
||||
.el-button {
|
||||
width: 80px;
|
||||
height: 30px;
|
||||
line-height: 0.5;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,211 @@
|
|||
<!-- 斥候IP设置——无线网关页面 -->
|
||||
<template>
|
||||
<div>
|
||||
<!-- <el-button type="info" plain @click="getShow">斥候IP设置——无线网关</el-button> -->
|
||||
<div class="gateway" v-show="isShow">
|
||||
<div class="title">
|
||||
<p class="title_l">IP配置</p>
|
||||
<i class="el-icon-close title_r" @click="isShow = false"></i>
|
||||
</div>
|
||||
<el-divider></el-divider>
|
||||
<div class="content">
|
||||
<el-form :label-position="labelPosition" :rules="rules" ref="ruleForm">
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-form-item
|
||||
label="客户端SSID:"
|
||||
:label-width="formLabelWidth"
|
||||
prop="ippz_ssid"
|
||||
>
|
||||
<el-input
|
||||
v-model="ippz_ssid"
|
||||
placeholder="请输入WIFI名字"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="认证方式:" :label-width="formLabelWidth">
|
||||
<el-select v-model="ippz_rzfs" placeholder="开放式">
|
||||
<el-option
|
||||
v-for="item in options1"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="加密方式:" :label-width="formLabelWidth">
|
||||
<el-select v-model="ippz_jmfs" placeholder="NONE">
|
||||
<el-option
|
||||
v-for="item in options2"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-form-item
|
||||
label="密码:"
|
||||
:label-width="formLabelWidth"
|
||||
prop="ippz_mm"
|
||||
>
|
||||
<el-input
|
||||
v-model="ippz_mm"
|
||||
placeholder="请输入wifi密码"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div class="footer">
|
||||
<el-button type="primary">保 存</el-button>
|
||||
<el-button @click="isShow = false">取 消</el-button>
|
||||
</div>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "ChiGate",
|
||||
data() {
|
||||
return {
|
||||
ippz_ssid: "",
|
||||
ippz_rzfs: "开放式", //答案：WPA2-PSK
|
||||
ippz_jmfs: "NONE", //答案：AES
|
||||
ippz_mm: "",
|
||||
options1: [
|
||||
{
|
||||
value: "开放式",
|
||||
label: "开放式",
|
||||
},
|
||||
{
|
||||
value: "共享式",
|
||||
label: "共享式",
|
||||
},
|
||||
{
|
||||
value: "WPA-PSK",
|
||||
label: "WPA-PSK",
|
||||
},
|
||||
{
|
||||
value: "WPA",
|
||||
label: "WPA",
|
||||
},
|
||||
{
|
||||
value: "WPA2-PSK",
|
||||
label: "WPA2-PSK",
|
||||
},
|
||||
{
|
||||
value: "WPA2",
|
||||
label: "WPA2",
|
||||
},
|
||||
],
|
||||
options2: [
|
||||
{
|
||||
value: "NONE",
|
||||
label: "NONE",
|
||||
},
|
||||
{
|
||||
value: "WEP40",
|
||||
label: "WEP40",
|
||||
},
|
||||
{
|
||||
value: "WEP104",
|
||||
label: "WEP104",
|
||||
},
|
||||
{
|
||||
value: "AES",
|
||||
label: "AES",
|
||||
},
|
||||
],
|
||||
labelPosition: "left",
|
||||
formLabelWidth: "116px",
|
||||
value: "测试",
|
||||
count: 0,
|
||||
isShow: true,
|
||||
rules: {
|
||||
ippz_ssid: [
|
||||
{ required: true, message: "请输入客户端SSID", trigger: "blur" },
|
||||
],
|
||||
ippz_mm: [{ required: true, message: "请输入密码", trigger: "blur" }],
|
||||
},
|
||||
};
|
||||
},
|
||||
|
||||
mounted() {},
|
||||
|
||||
methods: {},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.gateway {
|
||||
position: absolute;
|
||||
left: 648px;
|
||||
top: 226px;
|
||||
width: 470px;
|
||||
height: 384px;
|
||||
line-height: 20px;
|
||||
background: url(../assets/image/bg.png);
|
||||
background-size: 100% 100%;
|
||||
// background-color: rgba(255, 255, 255, 1);
|
||||
text-align: center;
|
||||
border: 1px solid rgba(187, 187, 187, 1);
|
||||
|
||||
.el-divider--horizontal {
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
.title {
|
||||
margin: 13px 6px 0px 25px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.title_l {
|
||||
width: 53px;
|
||||
height: 26px;
|
||||
color: rgba(16, 16, 16, 1);
|
||||
font-size: 18px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.title_r {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
cursor: pointer;
|
||||
color: rgba(111, 103, 103, 1);
|
||||
}
|
||||
}
|
||||
|
||||
/deep/ .content {
|
||||
margin-left: 62px;
|
||||
margin-right: 114px;
|
||||
|
||||
.el-input__inner {
|
||||
width: 200px;
|
||||
height: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
/deep/ .footer {
|
||||
.el-button {
|
||||
width: 80px;
|
||||
height: 30px;
|
||||
line-height: 0.5;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,183 @@
|
|||
<!-- 斥候数据采集——网关配置 -->
|
||||
<template>
|
||||
<div>
|
||||
<!-- <el-button type="info" plain @click="getShow">斥候数据采集网关配置</el-button> -->
|
||||
<div class="gateway" v-show="isShow">
|
||||
<div class="title">
|
||||
<p class="title_l">新建网关</p>
|
||||
<i class="el-icon-close title_r" @click="isShow = false"></i>
|
||||
</div>
|
||||
<el-divider></el-divider>
|
||||
<div class="content">
|
||||
<el-form :label-position="labelPosition" :rules="rules" ref="ruleForm">
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="网关名称:" :label-width="formLabelWidth" prop="wgpz_wgmc">
|
||||
<el-select v-model="wgpz_wgmc" placeholder="请选择" 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-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="网关ID:" :label-width="formLabelWidth" prop="wgpz_wgid">
|
||||
<el-select v-model="wgpz_wgid" placeholder="请选择" 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-col>
|
||||
</el-row>
|
||||
<div class="footer">
|
||||
<el-button type="primary" @click="innerVisible = true">保 存</el-button>
|
||||
|
||||
<el-button @click="isShow = false">取 消</el-button>
|
||||
</div>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<el-dialog title="系统提示" :visible.sync="innerVisible" append-to-body width="382px">
|
||||
<p class="inner_content">请确认选择的网关类型与网关实体一致:否则该工程无法下载至实体网关</p>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="innerVisible = false">确定</el-button>
|
||||
<el-button @click="innerVisible = false">取 消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'TestChiGate',
|
||||
|
||||
data() {
|
||||
return {
|
||||
options1: [{
|
||||
value: "有线区网关2",
|
||||
label: "有线区网关2"
|
||||
}, {
|
||||
value: "无线区网关2",
|
||||
label: "无线区网关2"
|
||||
}],
|
||||
options2: [{
|
||||
value: "LAN-BOX2",
|
||||
label: "LAN-BOX2"
|
||||
}, {
|
||||
value: "WLAN-BOX2",
|
||||
label: "WLAN-BOX2"
|
||||
}],
|
||||
wgpz_wgmc: "有线区网关2",
|
||||
wgpz_wgid: "LAN-BOX2",
|
||||
innerVisible: false,
|
||||
labelPosition: "left",
|
||||
formLabelWidth: "96px",
|
||||
count: 0,
|
||||
isShow: true,
|
||||
options: [{
|
||||
value: '选项1',
|
||||
label: '测试1'
|
||||
}, {
|
||||
value: '选项2',
|
||||
label: '测试2'
|
||||
}, {
|
||||
value: '选项3',
|
||||
label: '测试3'
|
||||
}, {
|
||||
value: '选项4',
|
||||
label: '测试4'
|
||||
}, {
|
||||
value: '选项5',
|
||||
label: '测试5'
|
||||
}],
|
||||
rules: {
|
||||
gateway_id: [
|
||||
{ required: true, message: '请输入网关ID', trigger: 'blur' },
|
||||
],
|
||||
gateway_name: [
|
||||
{ required: true, message: '请输入网关名称', trigger: 'blur' },
|
||||
],
|
||||
},
|
||||
};
|
||||
},
|
||||
|
||||
mounted() {
|
||||
|
||||
},
|
||||
|
||||
methods: {
|
||||
// getShow() {
|
||||
// this.count++;
|
||||
// if (this.count % 2 == 0) {
|
||||
// this.isShow = false;
|
||||
// } else {
|
||||
// this.isShow = true;
|
||||
// }
|
||||
// }
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
/deep/ .gateway {
|
||||
position: absolute;
|
||||
left: 694px;
|
||||
top: 188px;
|
||||
width: 382px;
|
||||
height: 309px;
|
||||
line-height: 20px;
|
||||
// background-color: rgba(255, 255, 255, 1);
|
||||
background: url(../assets/image/bg.png);
|
||||
background-size: 100% 100%;
|
||||
text-align: center;
|
||||
border: 1px solid rgba(187, 187, 187, 1);
|
||||
|
||||
.el-divider--horizontal {
|
||||
margin: 8px 0;
|
||||
}
|
||||
|
||||
.title {
|
||||
margin: 13px 11px 0px 21px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.title_l {
|
||||
width: 72px;
|
||||
height: 26px;
|
||||
color: rgba(16, 16, 16, 1);
|
||||
font-size: 18px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.title_r {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
cursor: pointer;
|
||||
color: rgba(111, 103, 103, 1);
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
margin-left: 50px;
|
||||
margin-right: 50px;
|
||||
|
||||
.el-input__inner {
|
||||
width: 200px;
|
||||
height: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
/deep/ .footer {
|
||||
.el-button {
|
||||
width: 80px;
|
||||
height: 30px;
|
||||
line-height: 0.5;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,183 @@
|
|||
<!-- 斥候数据采集——网关配置 -->
|
||||
<template>
|
||||
<div>
|
||||
<!-- <el-button type="info" plain @click="getShow">斥候数据采集网关配置</el-button> -->
|
||||
<div class="gateway" v-show="isShow">
|
||||
<div class="title">
|
||||
<p class="title_l">新建网关</p>
|
||||
<i class="el-icon-close title_r" @click="isShow = false"></i>
|
||||
</div>
|
||||
<el-divider></el-divider>
|
||||
<div class="content">
|
||||
<el-form :label-position="labelPosition" :rules="rules" ref="ruleForm">
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="网关名称:" :label-width="formLabelWidth" prop="wgpz_wgmc">
|
||||
<el-select v-model="wgpz_wgmc" placeholder="请选择" 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-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="网关ID:" :label-width="formLabelWidth" prop="wgpz_wgid">
|
||||
<el-select v-model="wgpz_wgid" placeholder="请选择" 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-col>
|
||||
</el-row>
|
||||
<div class="footer">
|
||||
<el-button type="primary" @click="innerVisible = true">保 存</el-button>
|
||||
|
||||
<el-button @click="isShow = false">取 消</el-button>
|
||||
</div>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<el-dialog title="系统提示" :visible.sync="innerVisible" append-to-body width="382px">
|
||||
<p class="inner_content">请确认选择的网关类型与网关实体一致:否则该工程无法下载至实体网关</p>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="innerVisible = false">确定</el-button>
|
||||
<el-button @click="innerVisible = false">取 消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'TestChiGate',
|
||||
|
||||
data() {
|
||||
return {
|
||||
options1: [{
|
||||
value: "有线区网关2",
|
||||
label: "有线区网关2"
|
||||
}, {
|
||||
value: "无线区网关2",
|
||||
label: "无线区网关2"
|
||||
}],
|
||||
options2: [{
|
||||
value: "LAN-BOX2",
|
||||
label: "LAN-BOX2"
|
||||
}, {
|
||||
value: "WLAN-BOX2",
|
||||
label: "WLAN-BOX2"
|
||||
}],
|
||||
wgpz_wgmc: "有线区网关2",
|
||||
wgpz_wgid: "LAN-BOX2",
|
||||
innerVisible: false,
|
||||
labelPosition: "left",
|
||||
formLabelWidth: "96px",
|
||||
count: 0,
|
||||
isShow: true,
|
||||
options: [{
|
||||
value: '选项1',
|
||||
label: '测试1'
|
||||
}, {
|
||||
value: '选项2',
|
||||
label: '测试2'
|
||||
}, {
|
||||
value: '选项3',
|
||||
label: '测试3'
|
||||
}, {
|
||||
value: '选项4',
|
||||
label: '测试4'
|
||||
}, {
|
||||
value: '选项5',
|
||||
label: '测试5'
|
||||
}],
|
||||
rules: {
|
||||
gateway_id: [
|
||||
{ required: true, message: '请输入网关ID', trigger: 'blur' },
|
||||
],
|
||||
gateway_name: [
|
||||
{ required: true, message: '请输入网关名称', trigger: 'blur' },
|
||||
],
|
||||
},
|
||||
};
|
||||
},
|
||||
|
||||
mounted() {
|
||||
|
||||
},
|
||||
|
||||
methods: {
|
||||
// getShow() {
|
||||
// this.count++;
|
||||
// if (this.count % 2 == 0) {
|
||||
// this.isShow = false;
|
||||
// } else {
|
||||
// this.isShow = true;
|
||||
// }
|
||||
// }
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
/deep/ .gateway {
|
||||
position: absolute;
|
||||
left: 694px;
|
||||
top: 188px;
|
||||
width: 382px;
|
||||
height: 309px;
|
||||
line-height: 20px;
|
||||
// background-color: rgba(255, 255, 255, 1);
|
||||
background: url(../assets/image/bg.png);
|
||||
background-size: 100% 100%;
|
||||
text-align: center;
|
||||
border: 1px solid rgba(187, 187, 187, 1);
|
||||
|
||||
.el-divider--horizontal {
|
||||
margin: 8px 0;
|
||||
}
|
||||
|
||||
.title {
|
||||
margin: 13px 11px 0px 21px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.title_l {
|
||||
width: 72px;
|
||||
height: 26px;
|
||||
color: rgba(16, 16, 16, 1);
|
||||
font-size: 18px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.title_r {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
cursor: pointer;
|
||||
color: rgba(111, 103, 103, 1);
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
margin-left: 50px;
|
||||
margin-right: 50px;
|
||||
|
||||
.el-input__inner {
|
||||
width: 200px;
|
||||
height: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
/deep/ .footer {
|
||||
.el-button {
|
||||
width: 80px;
|
||||
height: 30px;
|
||||
line-height: 0.5;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,183 @@
|
|||
<!-- 斥候无线数据采集——网关配置 -->
|
||||
<template>
|
||||
<div>
|
||||
<!-- <el-button type="info" plain @click="getShow">斥候数据采集网关配置</el-button> -->
|
||||
<div class="gateway" v-show="isShow">
|
||||
<div class="title">
|
||||
<p class="title_l">新建网关</p>
|
||||
<i class="el-icon-close title_r" @click="isShow = false"></i>
|
||||
</div>
|
||||
<el-divider></el-divider>
|
||||
<div class="content">
|
||||
<el-form :label-position="labelPosition" :rules="rules" ref="ruleForm">
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="网关名称:" :label-width="formLabelWidth" prop="wgpz_wgmc">
|
||||
<el-select v-model="wgpz_wgmc" placeholder="请选择" 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-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="网关ID:" :label-width="formLabelWidth" prop="wgpz_wgid">
|
||||
<el-select v-model="wgpz_wgid" placeholder="请选择" 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-col>
|
||||
</el-row>
|
||||
<div class="footer">
|
||||
<el-button type="primary" @click="innerVisible = true">保 存</el-button>
|
||||
|
||||
<el-button @click="isShow = false">取 消</el-button>
|
||||
</div>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<el-dialog title="系统提示" :visible.sync="innerVisible" append-to-body width="382px">
|
||||
<p class="inner_content">请确认选择的网关类型与网关实体一致:否则该工程无法下载至实体网关</p>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="innerVisible = false">确定</el-button>
|
||||
<el-button @click="innerVisible = false">取 消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'TestChiGate',
|
||||
|
||||
data() {
|
||||
return {
|
||||
options1: [{
|
||||
value: "有线区网关2",
|
||||
label: "有线区网关2"
|
||||
}, {
|
||||
value: "无线区网关2",
|
||||
label: "无线区网关2"
|
||||
}],
|
||||
options2: [{
|
||||
value: "LAN-BOX2",
|
||||
label: "LAN-BOX2"
|
||||
}, {
|
||||
value: "WLAN-BOX2",
|
||||
label: "WLAN-BOX2"
|
||||
}],
|
||||
wgpz_wgmc: "有线区网关2",
|
||||
wgpz_wgid: "LAN-BOX2",
|
||||
innerVisible: false,
|
||||
labelPosition: "left",
|
||||
formLabelWidth: "96px",
|
||||
count: 0,
|
||||
isShow: true,
|
||||
options: [{
|
||||
value: '选项1',
|
||||
label: '测试1'
|
||||
}, {
|
||||
value: '选项2',
|
||||
label: '测试2'
|
||||
}, {
|
||||
value: '选项3',
|
||||
label: '测试3'
|
||||
}, {
|
||||
value: '选项4',
|
||||
label: '测试4'
|
||||
}, {
|
||||
value: '选项5',
|
||||
label: '测试5'
|
||||
}],
|
||||
rules: {
|
||||
gateway_id: [
|
||||
{ required: true, message: '请输入网关ID', trigger: 'blur' },
|
||||
],
|
||||
gateway_name: [
|
||||
{ required: true, message: '请输入网关名称', trigger: 'blur' },
|
||||
],
|
||||
},
|
||||
};
|
||||
},
|
||||
|
||||
mounted() {
|
||||
|
||||
},
|
||||
|
||||
methods: {
|
||||
// getShow() {
|
||||
// this.count++;
|
||||
// if (this.count % 2 == 0) {
|
||||
// this.isShow = false;
|
||||
// } else {
|
||||
// this.isShow = true;
|
||||
// }
|
||||
// }
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
/deep/ .gateway {
|
||||
position: absolute;
|
||||
left: 694px;
|
||||
top: 188px;
|
||||
width: 382px;
|
||||
height: 309px;
|
||||
line-height: 20px;
|
||||
// background-color: rgba(255, 255, 255, 1);
|
||||
background: url(../assets/image/bg.png);
|
||||
background-size: 100% 100%;
|
||||
text-align: center;
|
||||
border: 1px solid rgba(187, 187, 187, 1);
|
||||
|
||||
.el-divider--horizontal {
|
||||
margin: 8px 0;
|
||||
}
|
||||
|
||||
.title {
|
||||
margin: 13px 11px 0px 21px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.title_l {
|
||||
width: 72px;
|
||||
height: 26px;
|
||||
color: rgba(16, 16, 16, 1);
|
||||
font-size: 18px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.title_r {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
cursor: pointer;
|
||||
color: rgba(111, 103, 103, 1);
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
margin-left: 50px;
|
||||
margin-right: 50px;
|
||||
|
||||
.el-input__inner {
|
||||
width: 200px;
|
||||
height: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
/deep/ .footer {
|
||||
.el-button {
|
||||
width: 80px;
|
||||
height: 30px;
|
||||
line-height: 0.5;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,310 @@
|
|||
<!-- 斥候有线网关页面 -->
|
||||
<template>
|
||||
<div>
|
||||
<!-- <el-button type="info" plain @click="getShow">斥候有线网关</el-button> -->
|
||||
<div class="gateway" v-show="isShow">
|
||||
<div class="title">
|
||||
<p class="title_l">IP配置</p>
|
||||
<p class="title_center">本页面涉及排错，请检查修改默认值</p>
|
||||
<i class="el-icon-close title_r" @click="isShow = false"></i>
|
||||
</div>
|
||||
<el-divider></el-divider>
|
||||
<div class="content">
|
||||
<div class="lan">
|
||||
<el-form :label-position="labelPosition" :rules="rules" ref="ruleForm">
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="网络类型:" :label-width="formLabelWidth" prop="type">
|
||||
<el-select v-model="value" placeholder="静态IP" style="width: 200px;">
|
||||
<el-option v-for="item in options" :key="item.value" :label="item.label"
|
||||
:value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="IP地址:" :label-width="formLabelWidth" prop="ip">
|
||||
<el-row>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="ippz_ip1"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1">.
|
||||
</el-col>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="ippz_ip2"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1">.</el-col>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="ippz_ip3"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1">.</el-col>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="ippz_ip4"></el-input>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="子网掩码:" :label-width="formLabelWidth">
|
||||
<el-row>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="ippz_zwym1"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1">.</el-col>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="ippz_zwym2"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1">.</el-col>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="ippz_zwym3"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1">.</el-col>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="ippz_zwym4"></el-input>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="网关:" :label-width="formLabelWidth" prop="ip">
|
||||
<el-row>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="ippz_mrwg1"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1">.
|
||||
</el-col>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="ippz_mrwg2"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1">.</el-col>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="ippz_mrwg3"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1">.</el-col>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="ippz_mrwg4"></el-input>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="DNS:" :label-width="formLabelWidth">
|
||||
<el-row>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="ippz_dns_sx1"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1">.
|
||||
</el-col>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="ippz_dns_sx2"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1">.</el-col>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="ippz_dns_sx3"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1">.</el-col>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="ippz_dns_sx4"></el-input>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
</el-form>
|
||||
</div>
|
||||
<div class="footer">
|
||||
<el-button type="primary">保 存</el-button>
|
||||
<el-button @click="isShow = false">取 消</el-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'TestChiGate',
|
||||
|
||||
data() {
|
||||
return {
|
||||
ippz_ip:"",
|
||||
ippz_ip1:"",
|
||||
ippz_ip2:"",
|
||||
ippz_ip3:"",
|
||||
ippz_ip4:"",
|
||||
ippz_zwym: "",
|
||||
ippz_zwym1: "255",
|
||||
ippz_zwym2: "255",
|
||||
ippz_zwym3: "255",
|
||||
ippz_zwym4: "0",
|
||||
ippz_mrwg: "",
|
||||
ippz_mrwg1: "192",
|
||||
ippz_mrwg2: "168",
|
||||
ippz_mrwg3: "1",
|
||||
ippz_mrwg4: "1",
|
||||
ippz_dns_sx: "",
|
||||
ippz_dns_sx1: "8",
|
||||
ippz_dns_sx2: "8",
|
||||
ippz_dns_sx3: "8",
|
||||
ippz_dns_sx4: "8",
|
||||
ippz_dns_by: "",
|
||||
ippz_dns_by1: "8",
|
||||
ippz_dns_by2: "8",
|
||||
ippz_dns_by3: "8",
|
||||
ippz_dns_by4: "8",
|
||||
radio: "1",
|
||||
labelPosition: "left",
|
||||
formLabelWidth: "116px",
|
||||
value: "测试",
|
||||
count: 0,
|
||||
isShow: true,
|
||||
options: [{
|
||||
value: '选项1',
|
||||
label: '测试1'
|
||||
}, {
|
||||
value: '选项2',
|
||||
label: '测试2'
|
||||
}, {
|
||||
value: '选项3',
|
||||
label: '测试3'
|
||||
}, {
|
||||
value: '选项4',
|
||||
label: '测试4'
|
||||
}, {
|
||||
value: '选项5',
|
||||
label: '测试5'
|
||||
}],
|
||||
rules: {
|
||||
ip: [
|
||||
{ required: true, message: '请输入IP地址', trigger: 'blur' },
|
||||
],
|
||||
mask: [
|
||||
{ required: true, message: '请输入子网掩码', trigger: 'blur' },
|
||||
],
|
||||
type: [
|
||||
{ required: true, message: '请输入网络类型', trigger: 'blur' },
|
||||
],
|
||||
// client_id: [
|
||||
// { required: true, message: '请输入客户端SSID', trigger: 'blur' },
|
||||
// ],
|
||||
// passage: [
|
||||
// { required: true, message: '请输入通道', trigger: 'blur' },
|
||||
// ],
|
||||
},
|
||||
};
|
||||
},
|
||||
|
||||
mounted() {
|
||||
|
||||
},
|
||||
|
||||
methods: {
|
||||
// getShow() {
|
||||
// this.count++;
|
||||
// if (this.count % 2 == 0) {
|
||||
// this.isShow = false;
|
||||
// } else {
|
||||
// this.isShow = true;
|
||||
// }
|
||||
// }
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.gateway {
|
||||
position: absolute;
|
||||
left: 394px;
|
||||
top: 145px;
|
||||
width: 470px;
|
||||
// height:358px;
|
||||
height: 458px;
|
||||
// height: 725px;
|
||||
line-height: 20px;
|
||||
background-color: rgba(255, 255, 255, 1);
|
||||
// text-align: center;
|
||||
border: 1px solid rgba(187, 187, 187, 1);
|
||||
|
||||
.title {
|
||||
margin: 13px 6px 0px 25px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.title_l {
|
||||
width: 53px;
|
||||
height: 26px;
|
||||
color: rgba(16, 16, 16, 1);
|
||||
font-size: 18px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.title_center {
|
||||
width: 288px;
|
||||
height: 26px;
|
||||
color: rgba(189, 49, 36, 1);
|
||||
font-size: 18px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.title_r {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
cursor: pointer;
|
||||
color: rgba(111, 103, 103, 1);
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
margin: 0px 53px 0px 56px;
|
||||
|
||||
/deep/.lan {
|
||||
.el-input__inner {
|
||||
height: 30px;
|
||||
text-align: center;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.el-row {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
|
||||
.el-col-1 {
|
||||
padding-left: 2px;
|
||||
color: black;
|
||||
text-align: left;
|
||||
line-height: 15px;
|
||||
height: 20px;
|
||||
}
|
||||
.el-col-24{
|
||||
padding-right:32px
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/deep/ .footer {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
|
||||
.el-button {
|
||||
width: 80px;
|
||||
height: 30px;
|
||||
line-height: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,312 @@
|
|||
<!-- 斥候有线网关页面 -->
|
||||
<template>
|
||||
<div>
|
||||
<!-- <el-button type="info" plain @click="getShow">斥候有线网关</el-button> -->
|
||||
<div class="gateway" v-show="isShow">
|
||||
<div class="title">
|
||||
<p class="title_l">IP配置</p>
|
||||
<p class="title_center">本页面涉及排错，请检查修改默认值</p>
|
||||
<i class="el-icon-close title_r" @click="isShow = false"></i>
|
||||
</div>
|
||||
<el-divider></el-divider>
|
||||
<div class="content">
|
||||
<div class="lan">
|
||||
<el-form :label-position="labelPosition" :rules="rules" ref="ruleForm">
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="网络类型:" :label-width="formLabelWidth" prop="type">
|
||||
<el-select v-model="value" placeholder="静态IP" style="width: 200px;">
|
||||
<el-option v-for="item in options" :key="item.value" :label="item.label"
|
||||
:value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="IP地址:" :label-width="formLabelWidth" prop="ip">
|
||||
<el-row>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="ippz_ip1"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1">.
|
||||
</el-col>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="ippz_ip2"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1">.</el-col>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="ippz_ip3"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1">.</el-col>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="ippz_ip4"></el-input>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="子网掩码:" :label-width="formLabelWidth">
|
||||
<el-row>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="ippz_zwym1"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1">.</el-col>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="ippz_zwym2"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1">.</el-col>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="ippz_zwym3"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1">.</el-col>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="ippz_zwym4"></el-input>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="网关:" :label-width="formLabelWidth" prop="ip">
|
||||
<el-row>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="ippz_mrwg1"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1">.
|
||||
</el-col>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="ippz_mrwg2"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1">.</el-col>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="ippz_mrwg3"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1">.</el-col>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="ippz_mrwg4"></el-input>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="DNS:" :label-width="formLabelWidth">
|
||||
<el-row>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="ippz_dns_sx1"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1">.
|
||||
</el-col>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="ippz_dns_sx2"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1">.</el-col>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="ippz_dns_sx3"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1">.</el-col>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="ippz_dns_sx4"></el-input>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
</el-form>
|
||||
</div>
|
||||
<div class="footer">
|
||||
<el-button type="primary">保 存</el-button>
|
||||
<el-button @click="isShow = false">取 消</el-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'TestChiGate',
|
||||
|
||||
data() {
|
||||
return {
|
||||
ippz_ip:"",
|
||||
ippz_ip1:"",
|
||||
ippz_ip2:"",
|
||||
ippz_ip3:"",
|
||||
ippz_ip4:"",
|
||||
ippz_zwym: "",
|
||||
ippz_zwym1: "255",
|
||||
ippz_zwym2: "255",
|
||||
ippz_zwym3: "255",
|
||||
ippz_zwym4: "0",
|
||||
ippz_mrwg: "",
|
||||
ippz_mrwg1: "192",
|
||||
ippz_mrwg2: "168",
|
||||
ippz_mrwg3: "1",
|
||||
ippz_mrwg4: "1",
|
||||
ippz_dns_sx: "",
|
||||
ippz_dns_sx1: "8",
|
||||
ippz_dns_sx2: "8",
|
||||
ippz_dns_sx3: "8",
|
||||
ippz_dns_sx4: "8",
|
||||
ippz_dns_by: "",
|
||||
ippz_dns_by1: "8",
|
||||
ippz_dns_by2: "8",
|
||||
ippz_dns_by3: "8",
|
||||
ippz_dns_by4: "8",
|
||||
radio: "1",
|
||||
labelPosition: "left",
|
||||
formLabelWidth: "116px",
|
||||
value: "测试",
|
||||
count: 0,
|
||||
isShow: true,
|
||||
options: [{
|
||||
value: '选项1',
|
||||
label: '测试1'
|
||||
}, {
|
||||
value: '选项2',
|
||||
label: '测试2'
|
||||
}, {
|
||||
value: '选项3',
|
||||
label: '测试3'
|
||||
}, {
|
||||
value: '选项4',
|
||||
label: '测试4'
|
||||
}, {
|
||||
value: '选项5',
|
||||
label: '测试5'
|
||||
}],
|
||||
rules: {
|
||||
ip: [
|
||||
{ required: true, message: '请输入IP地址', trigger: 'blur' },
|
||||
],
|
||||
mask: [
|
||||
{ required: true, message: '请输入子网掩码', trigger: 'blur' },
|
||||
],
|
||||
type: [
|
||||
{ required: true, message: '请输入网络类型', trigger: 'blur' },
|
||||
],
|
||||
// client_id: [
|
||||
// { required: true, message: '请输入客户端SSID', trigger: 'blur' },
|
||||
// ],
|
||||
// passage: [
|
||||
// { required: true, message: '请输入通道', trigger: 'blur' },
|
||||
// ],
|
||||
},
|
||||
};
|
||||
},
|
||||
|
||||
mounted() {
|
||||
|
||||
},
|
||||
|
||||
methods: {
|
||||
// getShow() {
|
||||
// this.count++;
|
||||
// if (this.count % 2 == 0) {
|
||||
// this.isShow = false;
|
||||
// } else {
|
||||
// this.isShow = true;
|
||||
// }
|
||||
// }
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.gateway {
|
||||
position: absolute;
|
||||
left: 394px;
|
||||
top: 145px;
|
||||
width: 470px;
|
||||
// height:358px;
|
||||
height: 458px;
|
||||
// height: 725px;
|
||||
line-height: 20px;
|
||||
// background-color: rgba(255, 255, 255, 1);
|
||||
// text-align: center;
|
||||
background: url(../assets/image/bg.png);
|
||||
background-size: 100% 100%;
|
||||
border: 1px solid rgba(187, 187, 187, 1);
|
||||
|
||||
.title {
|
||||
margin: 13px 6px 0px 25px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.title_l {
|
||||
width: 53px;
|
||||
height: 26px;
|
||||
color: rgba(16, 16, 16, 1);
|
||||
font-size: 18px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.title_center {
|
||||
width: 288px;
|
||||
height: 26px;
|
||||
color: rgba(189, 49, 36, 1);
|
||||
font-size: 18px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.title_r {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
cursor: pointer;
|
||||
color: rgba(111, 103, 103, 1);
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
margin: 0px 53px 0px 56px;
|
||||
|
||||
/deep/.lan {
|
||||
.el-input__inner {
|
||||
height: 30px;
|
||||
text-align: center;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.el-row {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
|
||||
.el-col-1 {
|
||||
padding-left: 2px;
|
||||
color: black;
|
||||
text-align: left;
|
||||
line-height: 15px;
|
||||
height: 20px;
|
||||
}
|
||||
.el-col-24{
|
||||
padding-right:32px
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/deep/ .footer {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
|
||||
.el-button {
|
||||
width: 80px;
|
||||
height: 30px;
|
||||
line-height: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,312 @@
|
|||
<!-- 斥候有线网关页面 -->
|
||||
<template>
|
||||
<div>
|
||||
<!-- <el-button type="info" plain @click="getShow">斥候有线网关</el-button> -->
|
||||
<div class="gateway" v-show="isShow">
|
||||
<div class="title">
|
||||
<p class="title_l">IP配置</p>
|
||||
<p class="title_center">本页面涉及排错，请检查修改默认值</p>
|
||||
<i class="el-icon-close title_r" @click="isShow = false"></i>
|
||||
</div>
|
||||
<el-divider></el-divider>
|
||||
<div class="content">
|
||||
<div class="lan">
|
||||
<el-form :label-position="labelPosition" :rules="rules" ref="ruleForm">
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="网络类型:" :label-width="formLabelWidth" prop="type">
|
||||
<el-select v-model="value" placeholder="静态IP" style="width: 200px;">
|
||||
<el-option v-for="item in options" :key="item.value" :label="item.label"
|
||||
:value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="IP地址:" :label-width="formLabelWidth" prop="ip">
|
||||
<el-row>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="ippz_ip1"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1">.
|
||||
</el-col>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="ippz_ip2"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1">.</el-col>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="ippz_ip3"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1">.</el-col>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="ippz_ip4"></el-input>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="子网掩码:" :label-width="formLabelWidth">
|
||||
<el-row>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="ippz_zwym1"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1">.</el-col>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="ippz_zwym2"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1">.</el-col>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="ippz_zwym3"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1">.</el-col>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="ippz_zwym4"></el-input>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="网关:" :label-width="formLabelWidth" prop="ip">
|
||||
<el-row>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="ippz_mrwg1"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1">.
|
||||
</el-col>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="ippz_mrwg2"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1">.</el-col>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="ippz_mrwg3"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1">.</el-col>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="ippz_mrwg4"></el-input>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="DNS:" :label-width="formLabelWidth">
|
||||
<el-row>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="ippz_dns_sx1"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1">.
|
||||
</el-col>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="ippz_dns_sx2"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1">.</el-col>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="ippz_dns_sx3"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1">.</el-col>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="ippz_dns_sx4"></el-input>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
</el-form>
|
||||
</div>
|
||||
<div class="footer">
|
||||
<el-button type="primary">保 存</el-button>
|
||||
<el-button @click="isShow = false">取 消</el-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'TestChiGate',
|
||||
|
||||
data() {
|
||||
return {
|
||||
ippz_ip:"",
|
||||
ippz_ip1:"",
|
||||
ippz_ip2:"",
|
||||
ippz_ip3:"",
|
||||
ippz_ip4:"",
|
||||
ippz_zwym: "",
|
||||
ippz_zwym1: "255",
|
||||
ippz_zwym2: "255",
|
||||
ippz_zwym3: "255",
|
||||
ippz_zwym4: "0",
|
||||
ippz_mrwg: "",
|
||||
ippz_mrwg1: "192",
|
||||
ippz_mrwg2: "168",
|
||||
ippz_mrwg3: "1",
|
||||
ippz_mrwg4: "1",
|
||||
ippz_dns_sx: "",
|
||||
ippz_dns_sx1: "8",
|
||||
ippz_dns_sx2: "8",
|
||||
ippz_dns_sx3: "8",
|
||||
ippz_dns_sx4: "8",
|
||||
ippz_dns_by: "",
|
||||
ippz_dns_by1: "8",
|
||||
ippz_dns_by2: "8",
|
||||
ippz_dns_by3: "8",
|
||||
ippz_dns_by4: "8",
|
||||
radio: "1",
|
||||
labelPosition: "left",
|
||||
formLabelWidth: "116px",
|
||||
value: "测试",
|
||||
count: 0,
|
||||
isShow: true,
|
||||
options: [{
|
||||
value: '选项1',
|
||||
label: '测试1'
|
||||
}, {
|
||||
value: '选项2',
|
||||
label: '测试2'
|
||||
}, {
|
||||
value: '选项3',
|
||||
label: '测试3'
|
||||
}, {
|
||||
value: '选项4',
|
||||
label: '测试4'
|
||||
}, {
|
||||
value: '选项5',
|
||||
label: '测试5'
|
||||
}],
|
||||
rules: {
|
||||
ip: [
|
||||
{ required: true, message: '请输入IP地址', trigger: 'blur' },
|
||||
],
|
||||
mask: [
|
||||
{ required: true, message: '请输入子网掩码', trigger: 'blur' },
|
||||
],
|
||||
type: [
|
||||
{ required: true, message: '请输入网络类型', trigger: 'blur' },
|
||||
],
|
||||
// client_id: [
|
||||
// { required: true, message: '请输入客户端SSID', trigger: 'blur' },
|
||||
// ],
|
||||
// passage: [
|
||||
// { required: true, message: '请输入通道', trigger: 'blur' },
|
||||
// ],
|
||||
},
|
||||
};
|
||||
},
|
||||
|
||||
mounted() {
|
||||
|
||||
},
|
||||
|
||||
methods: {
|
||||
// getShow() {
|
||||
// this.count++;
|
||||
// if (this.count % 2 == 0) {
|
||||
// this.isShow = false;
|
||||
// } else {
|
||||
// this.isShow = true;
|
||||
// }
|
||||
// }
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.gateway {
|
||||
position: absolute;
|
||||
left: 394px;
|
||||
top: 145px;
|
||||
width: 470px;
|
||||
// height:358px;
|
||||
height: 458px;
|
||||
// height: 725px;
|
||||
line-height: 20px;
|
||||
// background-color: rgba(255, 255, 255, 1);
|
||||
// text-align: center;
|
||||
background: url(../assets/image/bg.png);
|
||||
background-size: 100% 100%;
|
||||
border: 1px solid rgba(187, 187, 187, 1);
|
||||
|
||||
.title {
|
||||
margin: 13px 6px 0px 25px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.title_l {
|
||||
width: 53px;
|
||||
height: 26px;
|
||||
color: rgba(16, 16, 16, 1);
|
||||
font-size: 18px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.title_center {
|
||||
width: 288px;
|
||||
height: 26px;
|
||||
color: rgba(189, 49, 36, 1);
|
||||
font-size: 18px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.title_r {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
cursor: pointer;
|
||||
color: rgba(111, 103, 103, 1);
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
margin: 0px 53px 0px 56px;
|
||||
|
||||
/deep/.lan {
|
||||
.el-input__inner {
|
||||
height: 30px;
|
||||
text-align: center;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.el-row {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
|
||||
.el-col-1 {
|
||||
padding-left: 2px;
|
||||
color: black;
|
||||
text-align: left;
|
||||
line-height: 15px;
|
||||
height: 20px;
|
||||
}
|
||||
.el-col-24{
|
||||
padding-right:32px
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/deep/ .footer {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
|
||||
.el-button {
|
||||
width: 80px;
|
||||
height: 30px;
|
||||
line-height: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,467 @@
|
|||
<!-- 串口通道 -->
|
||||
<template>
|
||||
<div class="Clone">
|
||||
<div v-click-outside="closeMenu">
|
||||
<!-- <el-button type="info" plain @click="dialogVisible = !dialogVisible">MQTT云</el-button> -->
|
||||
<div v-show="dialogVisible" class="tree_menu">
|
||||
<el-tree :data="datas" :props="defaultProps" @node-click="treeNodeClick"></el-tree>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pas_params" v-show="add_passage">
|
||||
<div class="content">
|
||||
<div class="con_left">
|
||||
<el-form :label-position="labelPosition" :rules="rules" ref="ruleForm">
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-form-item>
|
||||
<el-checkbox v-model="mqtt_qiyong">启动</el-checkbox>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="服务器IP:" :label-width="formLabelWidth" prop="server_ip">
|
||||
<el-row>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="mqtt_ip1" style="width: 43px; height: 30px;"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1">.
|
||||
</el-col>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="mqtt_ip2" style="width: 43px; height: 30px;"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1">.</el-col>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="mqtt_ip3" style="width: 43px; height: 30px;"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1">.</el-col>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="mqtt_ip4" style="width: 43px; height: 30px;"></el-input>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="端口号:" :label-width="formLabelWidth" prop="port_number">
|
||||
<el-input v-model="mqtt_port" placeholder=""
|
||||
style="width: 200px;height:30px"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="网关SND:" :label-width="formLabelWidth" prop="gateway_id">
|
||||
<el-input v-model="mqtt_wgsn" placeholder=""
|
||||
style="width: 200px;height:30px"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-divider></el-divider>
|
||||
<el-form-item label="实时数据发布的主题：" label-width="168px" prop="data_theme">
|
||||
</el-form-item>
|
||||
<el-row>
|
||||
|
||||
<el-col :span="12">
|
||||
<el-form-item>
|
||||
<el-row>
|
||||
<el-col :span="15">
|
||||
<el-input v-model="mqtt_sssjfbzt" placeholder=""
|
||||
style="width: 200px;"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="9">
|
||||
<el-select v-model="mqtt_qos" placeholder="请选择" style="width: 99px;">
|
||||
<el-option v-for="item in options1" :key="item.value" :label="item.label"
|
||||
:value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="retained:" :label-width="formLabelWidth" prop="retained">
|
||||
<el-switch v-model="mqtt_retained"></el-switch>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="上传模式:" :label-width="formLabelWidth" prop="upload_mode">
|
||||
<el-input v-model="mqtt_scms" placeholder=""
|
||||
style="width: 200px;height:30px"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="上传周期(s):" label-width="108px" prop="upload_week">
|
||||
<el-input v-model="mqtt_sczq" placeholder=""
|
||||
style="width: 200px;height:30px"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="数据过滤:" :label-width="formLabelWidth" prop="data_filter">
|
||||
<el-checkbox-group v-model="mqtt_sjgl">
|
||||
<el-checkbox label="值改变"></el-checkbox>
|
||||
<el-checkbox label="采集成功"></el-checkbox>
|
||||
<el-checkbox label="时间戳改变"></el-checkbox>
|
||||
</el-checkbox-group>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div class="con_left_footer">
|
||||
<el-button type="primary" @click="add_passage = false">保 存</el-button>
|
||||
<el-button @click="add_passage = false">取 消</el-button>
|
||||
</div>
|
||||
</el-form>
|
||||
</div>
|
||||
<div>
|
||||
<div class="con_right">
|
||||
<el-menu class="el-menu-demo" mode="horizontal" @select="handleSelect">
|
||||
<el-menu-item index="1">添加</el-menu-item>
|
||||
<el-menu-item index="2">保存</el-menu-item>
|
||||
<el-menu-item index="3">删除</el-menu-item>
|
||||
</el-menu>
|
||||
</div>
|
||||
<el-table ref="singleTable" :data="tableData" style="width: 100%">
|
||||
<el-table-column type="index">
|
||||
</el-table-column>
|
||||
<el-table-column property="mqtt_cjd_sbmc" label="设备名称">
|
||||
</el-table-column>
|
||||
<el-table-column property="mqtt_cjd_tagid" label="TagID">
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 添加按钮下显示出来的弹框信息 -->
|
||||
<div>
|
||||
<el-dialog title="选择点" :visible.sync="choose_point" width="30%">
|
||||
<el-tree :data="points" show-checkbox node-key="id" :default-expanded-keys="[1, 2]"
|
||||
:default-checked-keys="[3, 4, 5, 6]" :props="defaultProps">
|
||||
</el-tree>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="savePoint">保 存</el-button>
|
||||
<el-button @click="choose_point = false">取 消</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'CloneView',
|
||||
|
||||
data() {
|
||||
return {
|
||||
mqtt_qiyong: true,
|
||||
mqtt_ip: "",
|
||||
mqtt_ip1: "",
|
||||
mqtt_ip2: "",
|
||||
mqtt_ip3: "",
|
||||
mqtt_ip4: "",
|
||||
mqtt_port: "",
|
||||
mqtt_wgsn: "",
|
||||
mqtt_sssjfbzt: "",
|
||||
mqtt_qos: "qos1",
|
||||
mqtt_retained: false,
|
||||
mqtt_scms: "周期上传",
|
||||
mqtt_sczq: "",
|
||||
mqtt_sjgl: ['采集成功'],
|
||||
mqtt_cjd_sbmc: "MachinePamHID909",
|
||||
mqtt_cjd_tagid: "",
|
||||
options1: [{
|
||||
value: "qos0",
|
||||
label: "qos0"
|
||||
},
|
||||
{
|
||||
value: "qos1",
|
||||
label: "qos1"
|
||||
}, {
|
||||
value: "qos2",
|
||||
label: "qos2"
|
||||
}],
|
||||
options2: [{
|
||||
value: "周期上传",
|
||||
label: "周期上传"
|
||||
},
|
||||
{
|
||||
value: "整点上传",
|
||||
label: "整点上传"
|
||||
}],
|
||||
points: [{
|
||||
id: 1,
|
||||
label: 'I/O点',
|
||||
children: [{
|
||||
id: 2,
|
||||
label: 'Channel1',
|
||||
children: [{
|
||||
id: 3,
|
||||
label: 'Device1',
|
||||
children: [
|
||||
{
|
||||
id: 4,
|
||||
label: "tag0001",
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
label: "tag0002",
|
||||
}
|
||||
]
|
||||
}]
|
||||
}]
|
||||
}],
|
||||
choose_point: false,
|
||||
value: 'qos0',
|
||||
value1: 0,
|
||||
labelPosition: "left",
|
||||
formLabelWidth: "88px",
|
||||
add_passage: false,
|
||||
rightMenu: "",
|
||||
dialogVisible: true,
|
||||
isAdd: false,
|
||||
datas: [{
|
||||
label: 'Gateway',
|
||||
children: [{
|
||||
label: '数据采集',
|
||||
children: [{
|
||||
label: 'I/O点'
|
||||
},
|
||||
{
|
||||
label: '用户点',
|
||||
},
|
||||
{
|
||||
label: '计算点',
|
||||
},
|
||||
{
|
||||
label: '系统点',
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
label: "数据服务",
|
||||
children: [{
|
||||
label: "Modbus"
|
||||
}]
|
||||
},
|
||||
{
|
||||
label: "IOT",
|
||||
children: [
|
||||
{
|
||||
label: "Mqtt Client"
|
||||
},
|
||||
{
|
||||
label: "Alink"
|
||||
},
|
||||
{
|
||||
label: "Tlink"
|
||||
},
|
||||
{
|
||||
label: "loTDDC"
|
||||
},
|
||||
{
|
||||
label: "Ulink"
|
||||
},
|
||||
]
|
||||
}
|
||||
]
|
||||
}],
|
||||
defaultProps: {
|
||||
children: 'children',
|
||||
label: 'label'
|
||||
},
|
||||
tableData: [{
|
||||
mqtt_cjd_sbmc: 'Device1',
|
||||
mqtt_cjd_tagid: 'Device1.tag0001',
|
||||
}],
|
||||
rules: {
|
||||
server_ip: [
|
||||
{ required: true, message: '请输入服务器IP', trigger: 'blur' },
|
||||
],
|
||||
port_number: [
|
||||
{ required: true, message: '请输入端口', trigger: 'blur' },
|
||||
],
|
||||
gateway_id: [
|
||||
{ required: true, message: '请输入网关ID', trigger: 'blur' },
|
||||
],
|
||||
data_theme: [
|
||||
{ required: true, message: '请输入主题', trigger: 'blur' },
|
||||
],
|
||||
upload_mode: [
|
||||
{ required: true, message: '请输入上传模式', trigger: 'blur' },
|
||||
],
|
||||
upload_week: [
|
||||
{ required: true, message: '请输入上传周期', trigger: 'blur' },
|
||||
],
|
||||
data_filter: [
|
||||
{ required: true, message: '请输入数据过滤', trigger: 'blur' },
|
||||
],
|
||||
},
|
||||
};
|
||||
},
|
||||
|
||||
mounted() {
|
||||
|
||||
},
|
||||
|
||||
methods: {
|
||||
treeNodeClick() {
|
||||
this.add_passage = true;
|
||||
},
|
||||
getDriveName() {
|
||||
this.diag_drive = true;
|
||||
},
|
||||
handleSelect(key) {
|
||||
console.log(key);
|
||||
if (key == 1 && this.isAdd == false) {
|
||||
this.choose_point = true;
|
||||
} else if (key == 1 && this.isAdd == true) {
|
||||
this.$message({
|
||||
message: '添加成功',
|
||||
type: 'success'
|
||||
});
|
||||
}
|
||||
},
|
||||
closeMenu(ev) {
|
||||
console.log({ ev });
|
||||
this.dialogVisible = false;
|
||||
},
|
||||
savePoint() {
|
||||
this.choose_point = false;
|
||||
this.isAdd = true;
|
||||
},
|
||||
},
|
||||
directives: {
|
||||
'click-outside': {
|
||||
bind: function (el, binding, vnode) {
|
||||
console.log('el', el);
|
||||
console.log("binding", binding);
|
||||
el.event = function (event) {
|
||||
// 检查点击是否发生在节点之内（包括子节点）
|
||||
if (!(el == event.target || el.contains(event.target))) {
|
||||
// 如果没有，则触发调用
|
||||
// 若绑定值为函数，则执行
|
||||
// 这里我们可以通过钩子函数中的 vnode.context，来获取当前组件的作用域
|
||||
if (typeof vnode.context[binding.expression] == 'function') {
|
||||
vnode.context[binding.expression](event)
|
||||
}
|
||||
}
|
||||
}
|
||||
// 绑定事件
|
||||
// 设置为true，代表在DOM树中，注册了该listener的元素，会先于它下方的任何事件目标，接收到该事件。
|
||||
document.body.addEventListener('click', el.event, true)
|
||||
},
|
||||
unbind: function (el) {
|
||||
// 解绑事件
|
||||
document.body.removeEventListener('click', el.event, true)
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.tree_menu {
|
||||
position: absolute;
|
||||
width: 286px;
|
||||
height: 753px;
|
||||
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);
|
||||
}
|
||||
|
||||
/deep/ .pas_params {
|
||||
.el-button {
|
||||
width: 80px;
|
||||
height: 30px;
|
||||
line-height: 0.5;
|
||||
}
|
||||
|
||||
.el-col-12:last-child {
|
||||
padding-right: 150px;
|
||||
}
|
||||
|
||||
.el-col-12:first-child {
|
||||
padding-right: 54px;
|
||||
}
|
||||
|
||||
.el-row {
|
||||
height: 40px;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
|
||||
.el-col-1 {
|
||||
text-align: center;
|
||||
line-height: 52px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.el-col-9 {
|
||||
padding-left: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.el-input__inner {
|
||||
height: 30px;
|
||||
text-align: left;
|
||||
padding: 0px 8px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.content {
|
||||
position: absolute;
|
||||
left: 377px;
|
||||
top: 69px;
|
||||
width: 1220px;
|
||||
height: 836px;
|
||||
line-height: 20px;
|
||||
padding-left: 36px;
|
||||
background-color: rgba(255, 255, 255, 1);
|
||||
color: rgba(16, 16, 16, 1);
|
||||
font-size: 14px;
|
||||
border: 1px solid rgba(187, 187, 187, 1);
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
|
||||
/deep/ .con_left {
|
||||
.el-con-5 {
|
||||
width: 43px;
|
||||
}
|
||||
}
|
||||
|
||||
.con_left {
|
||||
width: 709px;
|
||||
position: relative;
|
||||
|
||||
.con_left_footer {
|
||||
position: absolute;
|
||||
left: 499px;
|
||||
top: 777px;
|
||||
}
|
||||
}
|
||||
|
||||
.con_right {
|
||||
width: 480px;
|
||||
|
||||
.dialog-footer {
|
||||
.el-button {
|
||||
width: 80px;
|
||||
height: 30px;
|
||||
line-height: 0.5;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue