zyh 11-3
This commit is contained in:
unknown
parent
0c7fb14e67
commit
ec2b33d640
|
|
@ -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,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,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,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,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,587 @@
|
|||
<!-- 串口通道 -->
|
||||
<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="设备名称">
|
||||
<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>
|
||||
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'
|
||||
},
|
||||
// 右边添加设备的字段
|
||||
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
|
||||
}
|
||||
},
|
||||
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 {
|
||||
.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>
|
||||
|
|
@ -0,0 +1,587 @@
|
|||
<!-- 串口通道 -->
|
||||
<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="设备名称">
|
||||
<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>
|
||||
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'
|
||||
},
|
||||
// 右边添加设备的字段
|
||||
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
|
||||
}
|
||||
},
|
||||
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 {
|
||||
.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>
|
||||
|
|
@ -0,0 +1,586 @@
|
|||
<!-- 串口通道 -->
|
||||
<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="设备名称">
|
||||
<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>
|
||||
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'
|
||||
},
|
||||
// 右边添加设备的字段
|
||||
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
|
||||
}
|
||||
},
|
||||
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 {
|
||||
.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>
|
||||
|
|
@ -0,0 +1,586 @@
|
|||
|
||||
<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="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="端口号:" :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="设备名称">
|
||||
<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>
|
||||
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'
|
||||
},
|
||||
// 右边添加设备的字段
|
||||
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
|
||||
}
|
||||
},
|
||||
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 {
|
||||
.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>
|
||||
|
|
@ -0,0 +1,586 @@
|
|||
|
||||
<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="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="端口号:" :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="24">
|
||||
<el-form-item label="网关SND:" :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-divider></el-divider>
|
||||
<el-form-item label="实时数据发布的主题：" label-width="168px" prop="mqtt_sssjfbzt">
|
||||
</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="设备名称">
|
||||
<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>
|
||||
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'
|
||||
},
|
||||
// 右边添加设备的字段
|
||||
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
|
||||
}
|
||||
},
|
||||
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 {
|
||||
.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>
|
||||
|
|
@ -0,0 +1,587 @@
|
|||
|
||||
<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="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="端口号:" :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="24">
|
||||
<el-form-item label="网关SND:" :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-divider></el-divider>
|
||||
<el-form-item label="实时数据发布的主题：" label-width="168px" prop="mqtt_sssjfbzt">
|
||||
</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="mqtt_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="mqtt_scms">
|
||||
<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="mqtt_sczq">
|
||||
<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="mqtt_sjgl">
|
||||
<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="设备名称">
|
||||
<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>
|
||||
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'
|
||||
},
|
||||
// 右边添加设备的字段
|
||||
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: {
|
||||
mqtt_ip: [
|
||||
{ required: true, message: '请输入服务器IP', trigger: 'blur' },
|
||||
],
|
||||
mqtt_port: [
|
||||
{ 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
|
||||
}
|
||||
},
|
||||
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 {
|
||||
.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>
|
||||
|
|
@ -0,0 +1,587 @@
|
|||
|
||||
<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="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="端口号:" :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="24">
|
||||
<el-form-item label="网关SND:" :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-divider></el-divider>
|
||||
<el-form-item label="实时数据发布的主题：" label-width="168px" prop="mqtt_sssjfbzt">
|
||||
</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="mqtt_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="mqtt_scms">
|
||||
<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="mqtt_sczq">
|
||||
<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="mqtt_sjgl">
|
||||
<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="设备名称">
|
||||
<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>
|
||||
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'
|
||||
},
|
||||
// 右边添加设备的字段
|
||||
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: {
|
||||
mqtt_ip: [
|
||||
{ required: true, message: '请输入服务器IP', trigger: 'blur' },
|
||||
],
|
||||
mqtt_port: [
|
||||
{ required: true, message: '请输入端口', trigger: 'blur' },
|
||||
],
|
||||
mqtt_wgsn: [
|
||||
{ required: true, message: '请输入网关ID', trigger: 'blur' },
|
||||
],
|
||||
mqtt_sssjfbzt: [
|
||||
{ required: true, message: '请输入主题', trigger: 'blur' },
|
||||
],
|
||||
mqtt_scms: [
|
||||
{ required: true, message: '请输入上传模式', trigger: 'blur' },
|
||||
],
|
||||
mqtt_sczq: [
|
||||
{ required: true, message: '请输入上传周期', trigger: 'blur' },
|
||||
],
|
||||
mqtt_sjgl: [
|
||||
{ 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
|
||||
}
|
||||
},
|
||||
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 {
|
||||
.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>
|
||||
|
|
@ -0,0 +1,587 @@
|
|||
<!-- db——网关的数据采集MQTT云服务 -->
|
||||
<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="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="端口号:" :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="24">
|
||||
<el-form-item label="网关SND:" :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-divider></el-divider>
|
||||
<el-form-item label="实时数据发布的主题：" label-width="168px" prop="mqtt_sssjfbzt">
|
||||
</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="mqtt_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="mqtt_scms">
|
||||
<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="mqtt_sczq">
|
||||
<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="mqtt_sjgl">
|
||||
<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="设备名称">
|
||||
<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>
|
||||
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'
|
||||
},
|
||||
// 右边添加设备的字段
|
||||
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: {
|
||||
mqtt_ip: [
|
||||
{ required: true, message: '请输入服务器IP', trigger: 'blur' },
|
||||
],
|
||||
mqtt_port: [
|
||||
{ required: true, message: '请输入端口', trigger: 'blur' },
|
||||
],
|
||||
mqtt_wgsn: [
|
||||
{ required: true, message: '请输入网关ID', trigger: 'blur' },
|
||||
],
|
||||
mqtt_sssjfbzt: [
|
||||
{ required: true, message: '请输入主题', trigger: 'blur' },
|
||||
],
|
||||
mqtt_scms: [
|
||||
{ required: true, message: '请输入上传模式', trigger: 'blur' },
|
||||
],
|
||||
mqtt_sczq: [
|
||||
{ required: true, message: '请输入上传周期', trigger: 'blur' },
|
||||
],
|
||||
mqtt_sjgl: [
|
||||
{ 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
|
||||
}
|
||||
},
|
||||
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 {
|
||||
.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>
|
||||
|
|
@ -0,0 +1,587 @@
|
|||
<!-- db——网关的数据采集MQTT云服务 -->
|
||||
<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="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="端口号:" :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="24">
|
||||
<el-form-item label="网关SND:" :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-divider></el-divider>
|
||||
<el-form-item label="实时数据发布的主题：" label-width="168px" prop="mqtt_sssjfbzt">
|
||||
</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="mqtt_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="mqtt_scms">
|
||||
<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="mqtt_sczq">
|
||||
<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="mqtt_sjgl">
|
||||
<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="设备名称">
|
||||
<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>
|
||||
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'
|
||||
},
|
||||
// 右边添加设备的字段
|
||||
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: {
|
||||
mqtt_ip: [
|
||||
{ required: true, message: '请输入服务器IP', trigger: 'blur' },
|
||||
],
|
||||
mqtt_port: [
|
||||
{ required: true, message: '请输入端口', trigger: 'blur' },
|
||||
],
|
||||
mqtt_wgsn: [
|
||||
{ required: true, message: '请输入网关ID', trigger: 'blur' },
|
||||
],
|
||||
mqtt_sssjfbzt: [
|
||||
{ required: true, message: '请输入主题', trigger: 'blur' },
|
||||
],
|
||||
mqtt_scms: [
|
||||
{ required: true, message: '请输入上传模式', trigger: 'blur' },
|
||||
],
|
||||
mqtt_sczq: [
|
||||
{ required: true, message: '请输入上传周期', trigger: 'blur' },
|
||||
],
|
||||
mqtt_sjgl: [
|
||||
{ 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
|
||||
}
|
||||
},
|
||||
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 {
|
||||
.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>
|
||||
|
|
@ -0,0 +1,691 @@
|
|||
<!-- 采集点收集 -->
|
||||
<template>
|
||||
<div>
|
||||
<div v-click-outside="closeMenu">
|
||||
<!-- 设置树形控件 -->
|
||||
<!-- <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>
|
||||
<div class="pas_params" v-show="add_passage">
|
||||
<div>
|
||||
<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="cjdpz_tagid" label="TagID">
|
||||
<template slot-scope="scope">
|
||||
<el-select v-model="scope.row.cjdpz_tagid" placeholder="0X">
|
||||
<el-option v-for="option in options1" :key="option" :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 in options2" :key="option" :label="option.label"
|
||||
:value="option.value"></el-option>
|
||||
</el-select>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column property="cjdpz_sjq" label="数据区">
|
||||
<template slot-scope="scope">
|
||||
<el-select v-model="scope.row.cjdpz_sjq" placeholder="0X">
|
||||
<el-option v-for="option in options3" :key="option" :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="" placeholder="0X">
|
||||
<el-option v-for="option in options4" :key="option" :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="0X">
|
||||
<el-option v-for="option in options5" :key="option" :label="option.label"
|
||||
:value="option.value"></el-option>
|
||||
</el-select>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column property="cjdpz_zjx" label="自节序">
|
||||
<template slot-scope="scope">
|
||||
<el-select v-model="scope.row.cjdpz_zjx" placeholder="0X">
|
||||
<el-option v-for="option in options6" :key="option" :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="0X">
|
||||
<el-option v-for="option in options7" :key="option" :label="option.label"
|
||||
:value="option.value"></el-option>
|
||||
</el-select>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column property="cjdpz_beilv" label="倍率">
|
||||
<template slot-scope="scope">
|
||||
<el-select v-model="scope.row.cjdpz_beilv" placeholder="0X">
|
||||
<el-option v-for="option in options8" :key="option" :label="option.label"
|
||||
:value="option.value"></el-option>
|
||||
</el-select>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'DeviceView',
|
||||
|
||||
data() {
|
||||
return {
|
||||
tableData: [{
|
||||
cjdpz_tagid: 'MachinePamHID909',
|
||||
cjdpz_mc: '急停状态',
|
||||
cjdpz_sjq: "0X (Coil Status)",
|
||||
cjdpz_jcqdz: '1',
|
||||
cjdpz_cjsjlx: 'bool',
|
||||
cjdpz_zjx: "Null",
|
||||
cjdpz_dxsx: "读写",
|
||||
cjdpz_beilv: "1",
|
||||
}],
|
||||
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: "1",
|
||||
label: "1",
|
||||
},
|
||||
{
|
||||
value: "2",
|
||||
label: "2",
|
||||
},
|
||||
{
|
||||
value: "3",
|
||||
label: "3",
|
||||
},
|
||||
{
|
||||
value: "4",
|
||||
label: "4",
|
||||
},
|
||||
{
|
||||
value: "5",
|
||||
label: "5",
|
||||
},
|
||||
{
|
||||
value: "...",
|
||||
label: "...",
|
||||
},
|
||||
{
|
||||
value: "9990",
|
||||
label: "990",
|
||||
},
|
||||
{
|
||||
value: "9991",
|
||||
label: "9991",
|
||||
},
|
||||
{
|
||||
value: "9992",
|
||||
label: "9992",
|
||||
},
|
||||
{
|
||||
value: "9993",
|
||||
label: "9993",
|
||||
},
|
||||
{
|
||||
value: "9994",
|
||||
label: "9994",
|
||||
},
|
||||
{
|
||||
value: "9994",
|
||||
label: "9994",
|
||||
},
|
||||
{
|
||||
value: "9995",
|
||||
label: "9995",
|
||||
},
|
||||
{
|
||||
value: "9996",
|
||||
label: "9996",
|
||||
},
|
||||
{
|
||||
value: "9997",
|
||||
label: "9997",
|
||||
},
|
||||
{
|
||||
value: "9998",
|
||||
label: "9998",
|
||||
},
|
||||
{
|
||||
value: "9999",
|
||||
label: "9999",
|
||||
}],
|
||||
options5: [{
|
||||
value: " bool",
|
||||
label: "bool"
|
||||
},
|
||||
{
|
||||
value: "bit",
|
||||
label: "bit"
|
||||
}, {
|
||||
value: "uint16",
|
||||
label: "uint16"
|
||||
},
|
||||
{
|
||||
value: "int16",
|
||||
label: "int16"
|
||||
},
|
||||
{
|
||||
value: "uint32",
|
||||
label: "uint32"
|
||||
},
|
||||
{
|
||||
value: "int32",
|
||||
label: "int32"
|
||||
}, {
|
||||
value: "float",
|
||||
label: "float"
|
||||
},
|
||||
{
|
||||
value: "double",
|
||||
label: "double"
|
||||
}],
|
||||
options6: [{
|
||||
value: " Null",
|
||||
label: "Null"
|
||||
},
|
||||
{
|
||||
value: "Big-endian（4321）",
|
||||
label: "Big-endian（4321）"
|
||||
}, {
|
||||
value: "Little-endian（1234）",
|
||||
label: "Little-endian（1234）"
|
||||
},
|
||||
{
|
||||
value: "Big-endian byte swap（2143）",
|
||||
label: "Big-endian byte swap（2143）"
|
||||
},
|
||||
{
|
||||
value: "Little-endian byte swap（3412）",
|
||||
label: "Little-endian byte swap（3412）"
|
||||
}],
|
||||
options7: [{
|
||||
value: "读写",
|
||||
label: "读写"
|
||||
},
|
||||
{
|
||||
value: "只读",
|
||||
label: "只读"
|
||||
}, {
|
||||
value: "只写",
|
||||
label: "只写"
|
||||
}],
|
||||
options8: [{
|
||||
value: " 0.1",
|
||||
label: "0.1"
|
||||
},
|
||||
{
|
||||
value: "1",
|
||||
label: "1"
|
||||
}, {
|
||||
value: "10",
|
||||
label: "10"
|
||||
},
|
||||
{
|
||||
value: "100",
|
||||
label: "100"
|
||||
}],
|
||||
labelPosition: "left",
|
||||
formLabelWidth: "116px",
|
||||
add_passage: false,
|
||||
rightMenu: "",
|
||||
dialogVisible: true,
|
||||
menuShow: 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'
|
||||
},
|
||||
|
||||
};
|
||||
},
|
||||
|
||||
mounted() {
|
||||
|
||||
},
|
||||
|
||||
methods: {
|
||||
treeNodeClick() {
|
||||
this.add_passage = true;
|
||||
},
|
||||
getDriveName() {
|
||||
this.diag_drive = true;
|
||||
},
|
||||
handleSelect(key, keyPath) {
|
||||
console.log(key, keyPath);
|
||||
},
|
||||
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 {
|
||||
position: absolute;
|
||||
left: 362px;
|
||||
top: 125px;
|
||||
width: 1066px;
|
||||
height: 716px;
|
||||
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,687 @@
|
|||
<!-- 采集点收集 -->
|
||||
<template>
|
||||
<div>
|
||||
<div v-click-outside="closeMenu">
|
||||
<!-- 设置树形控件 -->
|
||||
<!-- <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>
|
||||
<div class="pas_params" v-show="add_passage">
|
||||
<div>
|
||||
<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="cjdpz_tagid" label="TagID">
|
||||
<template slot-scope="scope">
|
||||
<el-select v-model="scope.row.cjdpz_tagid" placeholder="0X">
|
||||
<el-option v-for="option in options1" :key="option" :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 in options2" :key="option" :label="option.label"
|
||||
:value="option.value"></el-option>
|
||||
</el-select>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column property="cjdpz_sjq" label="数据区">
|
||||
<template slot-scope="scope">
|
||||
<el-select v-model="scope.row.cjdpz_sjq" placeholder="0X">
|
||||
<el-option v-for="option in options3" :key="option" :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-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="0X">
|
||||
<el-option v-for="option in options5" :key="option" :label="option.label"
|
||||
:value="option.value"></el-option>
|
||||
</el-select>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column property="cjdpz_zjx" label="自节序">
|
||||
<template slot-scope="scope">
|
||||
<el-select v-model="scope.row.cjdpz_zjx" placeholder="0X">
|
||||
<el-option v-for="option in options6" :key="option" :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="0X">
|
||||
<el-option v-for="option in options7" :key="option" :label="option.label"
|
||||
:value="option.value"></el-option>
|
||||
</el-select>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column property="cjdpz_beilv" label="倍率">
|
||||
<template slot-scope="scope">
|
||||
<el-select v-model="scope.row.cjdpz_beilv" placeholder="0X">
|
||||
<el-option v-for="option in options8" :key="option" :label="option.label"
|
||||
:value="option.value"></el-option>
|
||||
</el-select>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'DeviceView',
|
||||
|
||||
data() {
|
||||
return {
|
||||
tableData: [{
|
||||
cjdpz_tagid: 'MachinePamHID909',
|
||||
cjdpz_mc: '急停状态',
|
||||
cjdpz_sjq: "0X (Coil Status)",
|
||||
cjdpz_jcqdz: '1',
|
||||
cjdpz_cjsjlx: 'bool',
|
||||
cjdpz_zjx: "Null",
|
||||
cjdpz_dxsx: "读写",
|
||||
cjdpz_beilv: "1",
|
||||
}],
|
||||
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: "1",
|
||||
label: "1",
|
||||
},
|
||||
{
|
||||
value: "2",
|
||||
label: "2",
|
||||
},
|
||||
{
|
||||
value: "3",
|
||||
label: "3",
|
||||
},
|
||||
{
|
||||
value: "4",
|
||||
label: "4",
|
||||
},
|
||||
{
|
||||
value: "5",
|
||||
label: "5",
|
||||
},
|
||||
{
|
||||
value: "...",
|
||||
label: "...",
|
||||
},
|
||||
{
|
||||
value: "9990",
|
||||
label: "990",
|
||||
},
|
||||
{
|
||||
value: "9991",
|
||||
label: "9991",
|
||||
},
|
||||
{
|
||||
value: "9992",
|
||||
label: "9992",
|
||||
},
|
||||
{
|
||||
value: "9993",
|
||||
label: "9993",
|
||||
},
|
||||
{
|
||||
value: "9994",
|
||||
label: "9994",
|
||||
},
|
||||
{
|
||||
value: "9994",
|
||||
label: "9994",
|
||||
},
|
||||
{
|
||||
value: "9995",
|
||||
label: "9995",
|
||||
},
|
||||
{
|
||||
value: "9996",
|
||||
label: "9996",
|
||||
},
|
||||
{
|
||||
value: "9997",
|
||||
label: "9997",
|
||||
},
|
||||
{
|
||||
value: "9998",
|
||||
label: "9998",
|
||||
},
|
||||
{
|
||||
value: "9999",
|
||||
label: "9999",
|
||||
}],
|
||||
options5: [{
|
||||
value: " bool",
|
||||
label: "bool"
|
||||
},
|
||||
{
|
||||
value: "bit",
|
||||
label: "bit"
|
||||
}, {
|
||||
value: "uint16",
|
||||
label: "uint16"
|
||||
},
|
||||
{
|
||||
value: "int16",
|
||||
label: "int16"
|
||||
},
|
||||
{
|
||||
value: "uint32",
|
||||
label: "uint32"
|
||||
},
|
||||
{
|
||||
value: "int32",
|
||||
label: "int32"
|
||||
}, {
|
||||
value: "float",
|
||||
label: "float"
|
||||
},
|
||||
{
|
||||
value: "double",
|
||||
label: "double"
|
||||
}],
|
||||
options6: [{
|
||||
value: " Null",
|
||||
label: "Null"
|
||||
},
|
||||
{
|
||||
value: "Big-endian（4321）",
|
||||
label: "Big-endian（4321）"
|
||||
}, {
|
||||
value: "Little-endian（1234）",
|
||||
label: "Little-endian（1234）"
|
||||
},
|
||||
{
|
||||
value: "Big-endian byte swap（2143）",
|
||||
label: "Big-endian byte swap（2143）"
|
||||
},
|
||||
{
|
||||
value: "Little-endian byte swap（3412）",
|
||||
label: "Little-endian byte swap（3412）"
|
||||
}],
|
||||
options7: [{
|
||||
value: "读写",
|
||||
label: "读写"
|
||||
},
|
||||
{
|
||||
value: "只读",
|
||||
label: "只读"
|
||||
}, {
|
||||
value: "只写",
|
||||
label: "只写"
|
||||
}],
|
||||
options8: [{
|
||||
value: " 0.1",
|
||||
label: "0.1"
|
||||
},
|
||||
{
|
||||
value: "1",
|
||||
label: "1"
|
||||
}, {
|
||||
value: "10",
|
||||
label: "10"
|
||||
},
|
||||
{
|
||||
value: "100",
|
||||
label: "100"
|
||||
}],
|
||||
labelPosition: "left",
|
||||
formLabelWidth: "116px",
|
||||
add_passage: false,
|
||||
rightMenu: "",
|
||||
dialogVisible: true,
|
||||
menuShow: 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'
|
||||
},
|
||||
|
||||
};
|
||||
},
|
||||
|
||||
mounted() {
|
||||
|
||||
},
|
||||
|
||||
methods: {
|
||||
treeNodeClick() {
|
||||
this.add_passage = true;
|
||||
},
|
||||
getDriveName() {
|
||||
this.diag_drive = true;
|
||||
},
|
||||
handleSelect(key, keyPath) {
|
||||
console.log(key, keyPath);
|
||||
},
|
||||
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 {
|
||||
position: absolute;
|
||||
left: 362px;
|
||||
top: 125px;
|
||||
width: 1066px;
|
||||
height: 716px;
|
||||
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,687 @@
|
|||
<!-- 采集点收集 -->
|
||||
<template>
|
||||
<div>
|
||||
<div v-click-outside="closeMenu">
|
||||
<!-- 设置树形控件 -->
|
||||
<!-- <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>
|
||||
<div class="pas_params" v-show="add_passage">
|
||||
<div>
|
||||
<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="cjdpz_tagid" label="TagID">
|
||||
<template slot-scope="scope">
|
||||
<el-select v-model="scope.row.cjdpz_tagid" placeholder="0X">
|
||||
<el-option v-for="option in options1" :key="option" :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 in options2" :key="option" :label="option.label"
|
||||
:value="option.value"></el-option>
|
||||
</el-select>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column property="cjdpz_sjq" label="数据区">
|
||||
<template slot-scope="scope">
|
||||
<el-select v-model="scope.row.cjdpz_sjq" placeholder="0X">
|
||||
<el-option v-for="option in options3" :key="option" :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-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="0X">
|
||||
<el-option v-for="option in options5" :key="option" :label="option.label"
|
||||
:value="option.value"></el-option>
|
||||
</el-select>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column property="cjdpz_zjx" label="自节序">
|
||||
<template slot-scope="scope">
|
||||
<el-select v-model="scope.row.cjdpz_zjx" placeholder="0X">
|
||||
<el-option v-for="option in options6" :key="option" :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="0X">
|
||||
<el-option v-for="option in options7" :key="option" :label="option.label"
|
||||
:value="option.value"></el-option>
|
||||
</el-select>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column property="cjdpz_beilv" label="倍率">
|
||||
<template slot-scope="scope">
|
||||
<el-select v-model="scope.row.cjdpz_beilv" placeholder="0X">
|
||||
<el-option v-for="option in options8" :key="option" :label="option.label"
|
||||
:value="option.value"></el-option>
|
||||
</el-select>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'DeviceView',
|
||||
|
||||
data() {
|
||||
return {
|
||||
tableData: [{
|
||||
cjdpz_tagid: 'MachinePamHID909',
|
||||
cjdpz_mc: '急停状态',
|
||||
cjdpz_sjq: "0X (Coil Status)",
|
||||
cjdpz_jcqdz: '1',
|
||||
cjdpz_cjsjlx: 'bool',
|
||||
cjdpz_zjx: "Null",
|
||||
cjdpz_dxsx: "读写",
|
||||
cjdpz_beilv: "1",
|
||||
}],
|
||||
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: "1",
|
||||
label: "1",
|
||||
},
|
||||
{
|
||||
value: "2",
|
||||
label: "2",
|
||||
},
|
||||
{
|
||||
value: "3",
|
||||
label: "3",
|
||||
},
|
||||
{
|
||||
value: "4",
|
||||
label: "4",
|
||||
},
|
||||
{
|
||||
value: "5",
|
||||
label: "5",
|
||||
},
|
||||
{
|
||||
value: "...",
|
||||
label: "...",
|
||||
},
|
||||
{
|
||||
value: "9990",
|
||||
label: "990",
|
||||
},
|
||||
{
|
||||
value: "9991",
|
||||
label: "9991",
|
||||
},
|
||||
{
|
||||
value: "9992",
|
||||
label: "9992",
|
||||
},
|
||||
{
|
||||
value: "9993",
|
||||
label: "9993",
|
||||
},
|
||||
{
|
||||
value: "9994",
|
||||
label: "9994",
|
||||
},
|
||||
{
|
||||
value: "9994",
|
||||
label: "9994",
|
||||
},
|
||||
{
|
||||
value: "9995",
|
||||
label: "9995",
|
||||
},
|
||||
{
|
||||
value: "9996",
|
||||
label: "9996",
|
||||
},
|
||||
{
|
||||
value: "9997",
|
||||
label: "9997",
|
||||
},
|
||||
{
|
||||
value: "9998",
|
||||
label: "9998",
|
||||
},
|
||||
{
|
||||
value: "9999",
|
||||
label: "9999",
|
||||
}],
|
||||
options5: [{
|
||||
value: " bool",
|
||||
label: "bool"
|
||||
},
|
||||
{
|
||||
value: "bit",
|
||||
label: "bit"
|
||||
}, {
|
||||
value: "uint16",
|
||||
label: "uint16"
|
||||
},
|
||||
{
|
||||
value: "int16",
|
||||
label: "int16"
|
||||
},
|
||||
{
|
||||
value: "uint32",
|
||||
label: "uint32"
|
||||
},
|
||||
{
|
||||
value: "int32",
|
||||
label: "int32"
|
||||
}, {
|
||||
value: "float",
|
||||
label: "float"
|
||||
},
|
||||
{
|
||||
value: "double",
|
||||
label: "double"
|
||||
}],
|
||||
options6: [{
|
||||
value: " Null",
|
||||
label: "Null"
|
||||
},
|
||||
{
|
||||
value: "Big-endian（4321）",
|
||||
label: "Big-endian（4321）"
|
||||
}, {
|
||||
value: "Little-endian（1234）",
|
||||
label: "Little-endian（1234）"
|
||||
},
|
||||
{
|
||||
value: "Big-endian byte swap（2143）",
|
||||
label: "Big-endian byte swap（2143）"
|
||||
},
|
||||
{
|
||||
value: "Little-endian byte swap（3412）",
|
||||
label: "Little-endian byte swap（3412）"
|
||||
}],
|
||||
options7: [{
|
||||
value: "读写",
|
||||
label: "读写"
|
||||
},
|
||||
{
|
||||
value: "只读",
|
||||
label: "只读"
|
||||
}, {
|
||||
value: "只写",
|
||||
label: "只写"
|
||||
}],
|
||||
options8: [{
|
||||
value: " 0.1",
|
||||
label: "0.1"
|
||||
},
|
||||
{
|
||||
value: "1",
|
||||
label: "1"
|
||||
}, {
|
||||
value: "10",
|
||||
label: "10"
|
||||
},
|
||||
{
|
||||
value: "100",
|
||||
label: "100"
|
||||
}],
|
||||
labelPosition: "left",
|
||||
formLabelWidth: "116px",
|
||||
add_passage: false,
|
||||
rightMenu: "",
|
||||
dialogVisible: true,
|
||||
menuShow: 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'
|
||||
},
|
||||
|
||||
};
|
||||
},
|
||||
|
||||
mounted() {
|
||||
|
||||
},
|
||||
|
||||
methods: {
|
||||
treeNodeClick() {
|
||||
this.add_passage = true;
|
||||
},
|
||||
getDriveName() {
|
||||
this.diag_drive = true;
|
||||
},
|
||||
handleSelect(key, keyPath) {
|
||||
console.log(key, keyPath);
|
||||
},
|
||||
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 {
|
||||
position: absolute;
|
||||
left: 362px;
|
||||
top: 125px;
|
||||
width: 1066px;
|
||||
height: 716px;
|
||||
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,618 @@
|
|||
<!-- 采集点收集 -->
|
||||
<template>
|
||||
<div>
|
||||
<div v-click-outside="closeMenu">
|
||||
<!-- 设置树形控件 -->
|
||||
<!-- <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>
|
||||
<div class="pas_params" v-show="add_passage">
|
||||
<div>
|
||||
<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="cjdpz_tagid" label="TagID">
|
||||
<template slot-scope="scope">
|
||||
<el-select v-model="scope.row.cjdpz_tagid" placeholder="0X">
|
||||
<el-option v-for="option in options1" :key="option" :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 in options2" :key="option" :label="option.label"
|
||||
:value="option.value"></el-option>
|
||||
</el-select>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column property="cjdpz_sjq" label="数据区">
|
||||
<template slot-scope="scope">
|
||||
<el-select v-model="scope.row.cjdpz_sjq" placeholder="0X">
|
||||
<el-option v-for="option in options3" :key="option" :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-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="0X">
|
||||
<el-option v-for="option in options5" :key="option" :label="option.label"
|
||||
:value="option.value"></el-option>
|
||||
</el-select>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column property="cjdpz_zjx" label="自节序">
|
||||
<template slot-scope="scope">
|
||||
<el-select v-model="scope.row.cjdpz_zjx" placeholder="0X">
|
||||
<el-option v-for="option in options6" :key="option" :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="0X">
|
||||
<el-option v-for="option in options7" :key="option" :label="option.label"
|
||||
:value="option.value"></el-option>
|
||||
</el-select>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column property="cjdpz_beilv" label="倍率">
|
||||
<template slot-scope="scope">
|
||||
<el-select v-model="scope.row.cjdpz_beilv" placeholder="0X">
|
||||
<el-option v-for="option in options8" :key="option" :label="option.label"
|
||||
:value="option.value"></el-option>
|
||||
</el-select>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'DeviceView',
|
||||
|
||||
data() {
|
||||
return {
|
||||
tableData: [{
|
||||
cjdpz_tagid: 'MachinePamHID909',
|
||||
cjdpz_mc: '急停状态',
|
||||
cjdpz_sjq: "0X (Coil Status)",
|
||||
cjdpz_jcqdz: '1',
|
||||
cjdpz_cjsjlx: 'bool',
|
||||
cjdpz_zjx: "Null",
|
||||
cjdpz_dxsx: "读写",
|
||||
cjdpz_beilv: "1",
|
||||
}],
|
||||
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)"
|
||||
}],
|
||||
options5: [{
|
||||
value: " bool",
|
||||
label: "bool"
|
||||
},
|
||||
{
|
||||
value: "bit",
|
||||
label: "bit"
|
||||
}, {
|
||||
value: "uint16",
|
||||
label: "uint16"
|
||||
},
|
||||
{
|
||||
value: "int16",
|
||||
label: "int16"
|
||||
},
|
||||
{
|
||||
value: "uint32",
|
||||
label: "uint32"
|
||||
},
|
||||
{
|
||||
value: "int32",
|
||||
label: "int32"
|
||||
}, {
|
||||
value: "float",
|
||||
label: "float"
|
||||
},
|
||||
{
|
||||
value: "double",
|
||||
label: "double"
|
||||
}],
|
||||
options6: [{
|
||||
value: " Null",
|
||||
label: "Null"
|
||||
},
|
||||
{
|
||||
value: "Big-endian（4321）",
|
||||
label: "Big-endian（4321）"
|
||||
}, {
|
||||
value: "Little-endian（1234）",
|
||||
label: "Little-endian（1234）"
|
||||
},
|
||||
{
|
||||
value: "Big-endian byte swap（2143）",
|
||||
label: "Big-endian byte swap（2143）"
|
||||
},
|
||||
{
|
||||
value: "Little-endian byte swap（3412）",
|
||||
label: "Little-endian byte swap（3412）"
|
||||
}],
|
||||
options7: [{
|
||||
value: "读写",
|
||||
label: "读写"
|
||||
},
|
||||
{
|
||||
value: "只读",
|
||||
label: "只读"
|
||||
}, {
|
||||
value: "只写",
|
||||
label: "只写"
|
||||
}],
|
||||
options8: [{
|
||||
value: " 0.1",
|
||||
label: "0.1"
|
||||
},
|
||||
{
|
||||
value: "1",
|
||||
label: "1"
|
||||
}, {
|
||||
value: "10",
|
||||
label: "10"
|
||||
},
|
||||
{
|
||||
value: "100",
|
||||
label: "100"
|
||||
}],
|
||||
labelPosition: "left",
|
||||
formLabelWidth: "116px",
|
||||
add_passage: false,
|
||||
rightMenu: "",
|
||||
dialogVisible: true,
|
||||
menuShow: 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'
|
||||
},
|
||||
|
||||
};
|
||||
},
|
||||
|
||||
mounted() {
|
||||
|
||||
},
|
||||
|
||||
methods: {
|
||||
treeNodeClick() {
|
||||
this.add_passage = true;
|
||||
},
|
||||
getDriveName() {
|
||||
this.diag_drive = true;
|
||||
},
|
||||
handleSelect(key, keyPath) {
|
||||
console.log(key, keyPath);
|
||||
},
|
||||
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 {
|
||||
position: absolute;
|
||||
left: 362px;
|
||||
top: 125px;
|
||||
width: 1066px;
|
||||
height: 716px;
|
||||
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,618 @@
|
|||
<!-- 采集点收集 -->
|
||||
<template>
|
||||
<div>
|
||||
<div v-click-outside="closeMenu">
|
||||
<!-- 设置树形控件 -->
|
||||
<!-- <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>
|
||||
<div class="pas_params" v-show="add_passage">
|
||||
<div>
|
||||
<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="cjdpz_tagid" label="TagID">
|
||||
<template slot-scope="scope">
|
||||
<el-select v-model="scope.row.cjdpz_tagid" placeholder="0X">
|
||||
<el-option v-for="option in options1" :key="option" :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 in options2" :key="option" :label="option.label"
|
||||
:value="option.value"></el-option>
|
||||
</el-select>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column property="cjdpz_sjq" label="数据区">
|
||||
<template slot-scope="scope">
|
||||
<el-select v-model="scope.row.cjdpz_sjq" placeholder="0X">
|
||||
<el-option v-for="option in options3" :key="option" :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-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="0X">
|
||||
<el-option v-for="option in options5" :key="option" :label="option.label"
|
||||
:value="option.value"></el-option>
|
||||
</el-select>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column property="cjdpz_zjx" label="自节序">
|
||||
<template slot-scope="scope">
|
||||
<el-select v-model="scope.row.cjdpz_zjx" placeholder="0X">
|
||||
<el-option v-for="option in options6" :key="option" :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="0X">
|
||||
<el-option v-for="option in options7" :key="option" :label="option.label"
|
||||
:value="option.value"></el-option>
|
||||
</el-select>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column property="cjdpz_beilv" label="倍率">
|
||||
<template slot-scope="scope">
|
||||
<el-select v-model="scope.row.cjdpz_beilv" placeholder="0X">
|
||||
<el-option v-for="option in options8" :key="option" :label="option.label"
|
||||
:value="option.value"></el-option>
|
||||
</el-select>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'DeviceView',
|
||||
|
||||
data() {
|
||||
return {
|
||||
tableData: [{
|
||||
cjdpz_tagid: 'MachinePamHID909',
|
||||
cjdpz_mc: '急停状态',
|
||||
cjdpz_sjq: "0X (Coil Status)",
|
||||
cjdpz_jcqdz: '',
|
||||
cjdpz_cjsjlx: 'bool',
|
||||
cjdpz_zjx: "Null",
|
||||
cjdpz_dxsx: "读写",
|
||||
cjdpz_beilv: "1",
|
||||
}],
|
||||
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)"
|
||||
}],
|
||||
options5: [{
|
||||
value: " bool",
|
||||
label: "bool"
|
||||
},
|
||||
{
|
||||
value: "bit",
|
||||
label: "bit"
|
||||
}, {
|
||||
value: "uint16",
|
||||
label: "uint16"
|
||||
},
|
||||
{
|
||||
value: "int16",
|
||||
label: "int16"
|
||||
},
|
||||
{
|
||||
value: "uint32",
|
||||
label: "uint32"
|
||||
},
|
||||
{
|
||||
value: "int32",
|
||||
label: "int32"
|
||||
}, {
|
||||
value: "float",
|
||||
label: "float"
|
||||
},
|
||||
{
|
||||
value: "double",
|
||||
label: "double"
|
||||
}],
|
||||
options6: [{
|
||||
value: " Null",
|
||||
label: "Null"
|
||||
},
|
||||
{
|
||||
value: "Big-endian（4321）",
|
||||
label: "Big-endian（4321）"
|
||||
}, {
|
||||
value: "Little-endian（1234）",
|
||||
label: "Little-endian（1234）"
|
||||
},
|
||||
{
|
||||
value: "Big-endian byte swap（2143）",
|
||||
label: "Big-endian byte swap（2143）"
|
||||
},
|
||||
{
|
||||
value: "Little-endian byte swap（3412）",
|
||||
label: "Little-endian byte swap（3412）"
|
||||
}],
|
||||
options7: [{
|
||||
value: "读写",
|
||||
label: "读写"
|
||||
},
|
||||
{
|
||||
value: "只读",
|
||||
label: "只读"
|
||||
}, {
|
||||
value: "只写",
|
||||
label: "只写"
|
||||
}],
|
||||
options8: [{
|
||||
value: " 0.1",
|
||||
label: "0.1"
|
||||
},
|
||||
{
|
||||
value: "1",
|
||||
label: "1"
|
||||
}, {
|
||||
value: "10",
|
||||
label: "10"
|
||||
},
|
||||
{
|
||||
value: "100",
|
||||
label: "100"
|
||||
}],
|
||||
labelPosition: "left",
|
||||
formLabelWidth: "116px",
|
||||
add_passage: false,
|
||||
rightMenu: "",
|
||||
dialogVisible: true,
|
||||
menuShow: 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'
|
||||
},
|
||||
|
||||
};
|
||||
},
|
||||
|
||||
mounted() {
|
||||
|
||||
},
|
||||
|
||||
methods: {
|
||||
treeNodeClick() {
|
||||
this.add_passage = true;
|
||||
},
|
||||
getDriveName() {
|
||||
this.diag_drive = true;
|
||||
},
|
||||
handleSelect(key, keyPath) {
|
||||
console.log(key, keyPath);
|
||||
},
|
||||
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 {
|
||||
position: absolute;
|
||||
left: 362px;
|
||||
top: 125px;
|
||||
width: 1066px;
|
||||
height: 716px;
|
||||
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,133 @@
|
|||
<template>
|
||||
<div>
|
||||
<!-- <div class="data_acquire">
|
||||
<el-button type="info" plain @click="outerVisible = true">数据采集设备</el-button>
|
||||
</div> -->
|
||||
<div>
|
||||
<el-dialog title="新建网关" :visible.sync="outerVisible" width="382px">
|
||||
<el-form :model="formdata" :rules="rules" ref="ruleForm" label-width="85px" class="demo-ruleForm">
|
||||
<el-form-item label="网关名称:" prop="wgpz_wgmc">
|
||||
<el-select v-model="formdata.wgpz_wgmc" placeholder="有线区网关1" style="width: 200px;">
|
||||
<el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="网关ID:" prop="wgpz_wgid">
|
||||
<el-select v-model="formdata.wgpz_wgid" placeholder="LAN-BOX1" style="width: 200px;">
|
||||
<el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="网关类型:" prop="wgpz_wglx">
|
||||
<el-select v-model="formdata.wgpz_wglx" placeholder="lot Life 网关" style="width: 200px;">
|
||||
<el-option v-for="item in options3" :key="item.value" :label="item.label" :value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<el-dialog width="382px" title="系统提示" :visible.sync="innerVisible" append-to-body>
|
||||
<p class="inner_content">请确认选择的网关类型与网关实体一致:否则该工程无法下载至实体网关</p>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="innerConfirm">确定</el-button>
|
||||
<el-button @click="innerVisible = false">取 消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
<div slot="footer" class="dialog-footer-outer">
|
||||
<el-button type="primary" @click="innerVisible = true">保存</el-button>
|
||||
<el-button @click="outerVisible = false">取 消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'TestDataAcquisition',
|
||||
|
||||
data() {
|
||||
return {
|
||||
input1: "",
|
||||
options1: [{
|
||||
value: "有线区网关1",
|
||||
label: "有线区网关1",
|
||||
}, {
|
||||
value: "无线区网关1",
|
||||
label: "无线区网关1",
|
||||
}],
|
||||
options2: [{
|
||||
value: "LAN-BOX1",
|
||||
label: "LAN-BOX1",
|
||||
}, {
|
||||
value: "WLAN-BOX1",
|
||||
label: "WLAN-BOX1",
|
||||
}],
|
||||
options3: [{
|
||||
value: 'loT Lite网关',
|
||||
label: 'loT Lite网关'
|
||||
}, {
|
||||
value: 'MODBUS网关',
|
||||
label: 'MODBUS网关'
|
||||
}, {
|
||||
value: 'BACNET网关',
|
||||
label: 'BACNET网关'
|
||||
}, {
|
||||
value: 'OPC UA网关',
|
||||
label: 'OPC UA网关'
|
||||
}, {
|
||||
value: 'OPC DA网关',
|
||||
label: 'OPC DA网关'
|
||||
},
|
||||
{
|
||||
value: 'loT网关',
|
||||
label: 'loT网关'
|
||||
}],
|
||||
value: '',
|
||||
formdata: {
|
||||
wgpz_wgmc: "有线区网关1",
|
||||
wgpz_wgid: "LAN-BOX1",
|
||||
wgpz_wglx: "loT网关"
|
||||
},
|
||||
rules: {
|
||||
wgpz_wgmc: [
|
||||
{ required: true, message: '请输入网关名称', trigger: 'blur' },
|
||||
{ min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
|
||||
],
|
||||
wgpz_wglx: [
|
||||
{ required: true, message: '请选择活动区域', trigger: 'change' }
|
||||
],
|
||||
},
|
||||
outerVisible: true,
|
||||
innerVisible: false,
|
||||
};
|
||||
},
|
||||
|
||||
mounted() {
|
||||
|
||||
},
|
||||
|
||||
methods: {
|
||||
innerConfirm() {
|
||||
this.outerVisible = false;
|
||||
this.innerVisible = false;
|
||||
this.$router.replace("/channelconfig");
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.data_acquire {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.inner_content {
|
||||
margin-left: 30px;
|
||||
width: 280px;
|
||||
height: 40px;
|
||||
// color: rgba(255, 255, 255, 0);
|
||||
font-size: 14px;
|
||||
text-align: left;
|
||||
font-family: SourceHanSansSC-regular;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,135 @@
|
|||
<template>
|
||||
<div>
|
||||
<!-- <div class="data_acquire">
|
||||
<el-button type="info" plain @click="outerVisible = true">数据采集设备</el-button>
|
||||
</div> -->
|
||||
<div>
|
||||
<el-dialog title="新建网关" :visible.sync="outerVisible" width="382px">
|
||||
<el-form :model="formdata" :rules="rules" ref="ruleForm" label-width="85px" class="demo-ruleForm">
|
||||
<el-form-item label="网关名称:" prop="wgpz_wgmc">
|
||||
<el-select v-model="formdata.wgpz_wgmc" placeholder="有线区网关1" style="width: 200px;">
|
||||
<el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="网关ID:" prop="wgpz_wgid">
|
||||
<el-select v-model="formdata.wgpz_wgid" placeholder="LAN-BOX1" style="width: 200px;">
|
||||
<el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="网关类型:" prop="wgpz_wglx">
|
||||
<el-select v-model="formdata.wgpz_wglx" placeholder="lot Life 网关" style="width: 200px;">
|
||||
<el-option v-for="item in options3" :key="item.value" :label="item.label" :value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<el-dialog width="382px" title="系统提示" :visible.sync="innerVisible" append-to-body>
|
||||
<p class="inner_content">请确认选择的网关类型与网关实体一致:否则该工程无法下载至实体网关</p>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="innerConfirm">确定</el-button>
|
||||
<el-button @click="innerVisible = false">取 消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
<div slot="footer" class="dialog-footer-outer">
|
||||
<el-button type="primary" @click="innerVisible = true">保存</el-button>
|
||||
<el-button @click="outerVisible = false">取 消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'TestDataAcquisition',
|
||||
|
||||
data() {
|
||||
return {
|
||||
input1: "",
|
||||
options1: [{
|
||||
value: "有线区网关1",
|
||||
label: "有线区网关1",
|
||||
}, {
|
||||
value: "无线区网关1",
|
||||
label: "无线区网关1",
|
||||
}],
|
||||
options2: [{
|
||||
value: "LAN-BOX1",
|
||||
label: "LAN-BOX1",
|
||||
}, {
|
||||
value: "WLAN-BOX1",
|
||||
label: "WLAN-BOX1",
|
||||
}],
|
||||
options3: [{
|
||||
value: 'loT Lite网关',
|
||||
label: 'loT Lite网关'
|
||||
}, {
|
||||
value: 'MODBUS网关',
|
||||
label: 'MODBUS网关'
|
||||
}, {
|
||||
value: 'BACNET网关',
|
||||
label: 'BACNET网关'
|
||||
}, {
|
||||
value: 'OPC UA网关',
|
||||
label: 'OPC UA网关'
|
||||
}, {
|
||||
value: 'OPC DA网关',
|
||||
label: 'OPC DA网关'
|
||||
},
|
||||
{
|
||||
value: 'loT网关',
|
||||
label: 'loT网关'
|
||||
}],
|
||||
value: '',
|
||||
formdata: {
|
||||
wgpz_wgmc: "有线区网关1",
|
||||
wgpz_wgid: "LAN-BOX1",
|
||||
wgpz_wglx: "loT网关"
|
||||
},
|
||||
rules: {
|
||||
wgpz_wgmc: [
|
||||
{ required: true, message: '请输入网关名称', trigger: 'change' },
|
||||
],
|
||||
wgpz_wgid:[
|
||||
{}
|
||||
],
|
||||
wgpz_wglx: [
|
||||
{ required: true, message: '请选择网关类型', trigger: 'change' }
|
||||
],
|
||||
},
|
||||
outerVisible: true,
|
||||
innerVisible: false,
|
||||
};
|
||||
},
|
||||
|
||||
mounted() {
|
||||
|
||||
},
|
||||
|
||||
methods: {
|
||||
innerConfirm() {
|
||||
this.outerVisible = false;
|
||||
this.innerVisible = false;
|
||||
this.$router.replace("/channelconfig");
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.data_acquire {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.inner_content {
|
||||
margin-left: 30px;
|
||||
width: 280px;
|
||||
height: 40px;
|
||||
// color: rgba(255, 255, 255, 0);
|
||||
font-size: 14px;
|
||||
text-align: left;
|
||||
font-family: SourceHanSansSC-regular;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,135 @@
|
|||
<template>
|
||||
<div>
|
||||
<!-- <div class="data_acquire">
|
||||
<el-button type="info" plain @click="outerVisible = true">数据采集设备</el-button>
|
||||
</div> -->
|
||||
<div>
|
||||
<el-dialog title="新建网关" :visible.sync="outerVisible" width="382px">
|
||||
<el-form :model="formdata" :rules="rules" ref="ruleForm" label-width="85px" class="demo-ruleForm">
|
||||
<el-form-item label="网关名称:" prop="wgpz_wgmc">
|
||||
<el-select v-model="formdata.wgpz_wgmc" placeholder="有线区网关1" style="width: 200px;">
|
||||
<el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="网关ID:" prop="wgpz_wgid">
|
||||
<el-select v-model="formdata.wgpz_wgid" placeholder="LAN-BOX1" style="width: 200px;">
|
||||
<el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="网关类型:" prop="wgpz_wglx">
|
||||
<el-select v-model="formdata.wgpz_wglx" placeholder="lot Life 网关" style="width: 200px;">
|
||||
<el-option v-for="item in options3" :key="item.value" :label="item.label" :value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<el-dialog width="382px" title="系统提示" :visible.sync="innerVisible" append-to-body>
|
||||
<p class="inner_content">请确认选择的网关类型与网关实体一致:否则该工程无法下载至实体网关</p>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="innerConfirm">确定</el-button>
|
||||
<el-button @click="innerVisible = false">取 消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
<div slot="footer" class="dialog-footer-outer">
|
||||
<el-button type="primary" @click="innerVisible = true">保存</el-button>
|
||||
<el-button @click="outerVisible = false">取 消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'TestDataAcquisition',
|
||||
|
||||
data() {
|
||||
return {
|
||||
input1: "",
|
||||
options1: [{
|
||||
value: "有线区网关1",
|
||||
label: "有线区网关1",
|
||||
}, {
|
||||
value: "无线区网关1",
|
||||
label: "无线区网关1",
|
||||
}],
|
||||
options2: [{
|
||||
value: "LAN-BOX1",
|
||||
label: "LAN-BOX1",
|
||||
}, {
|
||||
value: "WLAN-BOX1",
|
||||
label: "WLAN-BOX1",
|
||||
}],
|
||||
options3: [{
|
||||
value: 'loT Lite网关',
|
||||
label: 'loT Lite网关'
|
||||
}, {
|
||||
value: 'MODBUS网关',
|
||||
label: 'MODBUS网关'
|
||||
}, {
|
||||
value: 'BACNET网关',
|
||||
label: 'BACNET网关'
|
||||
}, {
|
||||
value: 'OPC UA网关',
|
||||
label: 'OPC UA网关'
|
||||
}, {
|
||||
value: 'OPC DA网关',
|
||||
label: 'OPC DA网关'
|
||||
},
|
||||
{
|
||||
value: 'loT网关',
|
||||
label: 'loT网关'
|
||||
}],
|
||||
value: '',
|
||||
formdata: {
|
||||
wgpz_wgmc: "有线区网关1",
|
||||
wgpz_wgid: "LAN-BOX1",
|
||||
wgpz_wglx: "loT网关"
|
||||
},
|
||||
rules: {
|
||||
wgpz_wgmc: [
|
||||
{ required: true, message: '请选择网关名称', trigger: 'change' },
|
||||
],
|
||||
wgpz_wgid:[
|
||||
{}
|
||||
],
|
||||
wgpz_wglx: [
|
||||
{ required: true, message: '请选择网关类型', trigger: 'change' }
|
||||
],
|
||||
},
|
||||
outerVisible: true,
|
||||
innerVisible: false,
|
||||
};
|
||||
},
|
||||
|
||||
mounted() {
|
||||
|
||||
},
|
||||
|
||||
methods: {
|
||||
innerConfirm() {
|
||||
this.outerVisible = false;
|
||||
this.innerVisible = false;
|
||||
this.$router.replace("/channelconfig");
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.data_acquire {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.inner_content {
|
||||
margin-left: 30px;
|
||||
width: 280px;
|
||||
height: 40px;
|
||||
// color: rgba(255, 255, 255, 0);
|
||||
font-size: 14px;
|
||||
text-align: left;
|
||||
font-family: SourceHanSansSC-regular;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,135 @@
|
|||
<template>
|
||||
<div>
|
||||
<!-- <div class="data_acquire">
|
||||
<el-button type="info" plain @click="outerVisible = true">数据采集设备</el-button>
|
||||
</div> -->
|
||||
<div>
|
||||
<el-dialog title="新建网关" :visible.sync="outerVisible" width="382px">
|
||||
<el-form :model="formdata" :rules="rules" ref="ruleForm" label-width="85px" class="demo-ruleForm">
|
||||
<el-form-item label="网关名称:" prop="wgpz_wgmc">
|
||||
<el-select v-model="formdata.wgpz_wgmc" placeholder="有线区网关1" style="width: 200px;">
|
||||
<el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="网关ID:" prop="wgpz_wgid">
|
||||
<el-select v-model="formdata.wgpz_wgid" placeholder="LAN-BOX1" style="width: 200px;">
|
||||
<el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="网关类型:" prop="wgpz_wglx">
|
||||
<el-select v-model="formdata.wgpz_wglx" placeholder="lot Life 网关" style="width: 200px;">
|
||||
<el-option v-for="item in options3" :key="item.value" :label="item.label" :value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<el-dialog width="382px" title="系统提示" :visible.sync="innerVisible" append-to-body>
|
||||
<p class="inner_content">请确认选择的网关类型与网关实体一致:否则该工程无法下载至实体网关</p>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="innerConfirm">确定</el-button>
|
||||
<el-button @click="innerVisible = false">取 消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
<div slot="footer" class="dialog-footer-outer">
|
||||
<el-button type="primary" @click="innerVisible = true">保存</el-button>
|
||||
<el-button @click="outerVisible = false">取 消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'TestDataAcquisition',
|
||||
|
||||
data() {
|
||||
return {
|
||||
input1: "",
|
||||
options1: [{
|
||||
value: "有线区网关1",
|
||||
label: "有线区网关1",
|
||||
}, {
|
||||
value: "无线区网关1",
|
||||
label: "无线区网关1",
|
||||
}],
|
||||
options2: [{
|
||||
value: "LAN-BOX1",
|
||||
label: "LAN-BOX1",
|
||||
}, {
|
||||
value: "WLAN-BOX1",
|
||||
label: "WLAN-BOX1",
|
||||
}],
|
||||
options3: [{
|
||||
value: 'loT Lite网关',
|
||||
label: 'loT Lite网关'
|
||||
}, {
|
||||
value: 'MODBUS网关',
|
||||
label: 'MODBUS网关'
|
||||
}, {
|
||||
value: 'BACNET网关',
|
||||
label: 'BACNET网关'
|
||||
}, {
|
||||
value: 'OPC UA网关',
|
||||
label: 'OPC UA网关'
|
||||
}, {
|
||||
value: 'OPC DA网关',
|
||||
label: 'OPC DA网关'
|
||||
},
|
||||
{
|
||||
value: 'loT网关',
|
||||
label: 'loT网关'
|
||||
}],
|
||||
value: '',
|
||||
formdata: {
|
||||
wgpz_wgmc: "有线区网关1",
|
||||
wgpz_wgid: "LAN-BOX1",
|
||||
wgpz_wglx: "loT网关"
|
||||
},
|
||||
rules: {
|
||||
wgpz_wgmc: [
|
||||
{ required: true, message: '请选择网关名称', trigger: 'change' },
|
||||
],
|
||||
wgpz_wgid:[
|
||||
{ required: true, message: '请选择网关id', trigger: 'change' },
|
||||
],
|
||||
wgpz_wglx: [
|
||||
{ required: true, message: '请选择网关类型', trigger: 'change' }
|
||||
],
|
||||
},
|
||||
outerVisible: true,
|
||||
innerVisible: false,
|
||||
};
|
||||
},
|
||||
|
||||
mounted() {
|
||||
|
||||
},
|
||||
|
||||
methods: {
|
||||
innerConfirm() {
|
||||
this.outerVisible = false;
|
||||
this.innerVisible = false;
|
||||
this.$router.replace("/channelconfig");
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.data_acquire {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.inner_content {
|
||||
margin-left: 30px;
|
||||
width: 280px;
|
||||
height: 40px;
|
||||
// color: rgba(255, 255, 255, 0);
|
||||
font-size: 14px;
|
||||
text-align: left;
|
||||
font-family: SourceHanSansSC-regular;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,135 @@
|
|||
<template>
|
||||
<div>
|
||||
<!-- <div class="data_acquire">
|
||||
<el-button type="info" plain @click="outerVisible = true">数据采集设备</el-button>
|
||||
</div> -->
|
||||
<div>
|
||||
<el-dialog title="新建网关" :visible.sync="outerVisible" width="382px">
|
||||
<el-form :model="formdata" :rules="rules" ref="ruleForm" label-width="85px" class="demo-ruleForm">
|
||||
<el-form-item label="网关名称:" prop="wgpz_wgmc">
|
||||
<el-select v-model="formdata.wgpz_wgmc" placeholder="有线区网关1" style="width: 200px;">
|
||||
<el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="网关ID:" prop="wgpz_wgid">
|
||||
<el-select v-model="formdata.wgpz_wgid" placeholder="LAN-BOX1" style="width: 200px;">
|
||||
<el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="网关类型:" prop="wgpz_wglx">
|
||||
<el-select v-model="formdata.wgpz_wglx" placeholder="lot Life 网关" style="width: 200px;">
|
||||
<el-option v-for="item in options3" :key="item.value" :label="item.label" :value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<el-dialog width="382px" title="系统提示" :visible.sync="innerVisible" append-to-body>
|
||||
<p class="inner_content">请确认选择的网关类型与网关实体一致:否则该工程无法下载至实体网关</p>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="innerConfirm">确定</el-button>
|
||||
<el-button @click="innerVisible = false">取 消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
<div slot="footer" class="dialog-footer-outer">
|
||||
<el-button type="primary" @click="innerVisible = true">保存</el-button>
|
||||
<el-button @click="outerVisible = false">取 消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'TestDataAcquisition',
|
||||
|
||||
data() {
|
||||
return {
|
||||
input1: "",
|
||||
options1: [{
|
||||
value: "有线区网关1",
|
||||
label: "有线区网关1",
|
||||
}, {
|
||||
value: "无线区网关1",
|
||||
label: "无线区网关1",
|
||||
}],
|
||||
options2: [{
|
||||
value: "LAN-BOX1",
|
||||
label: "LAN-BOX1",
|
||||
}, {
|
||||
value: "WLAN-BOX1",
|
||||
label: "WLAN-BOX1",
|
||||
}],
|
||||
options3: [{
|
||||
value: 'loT Lite网关',
|
||||
label: 'loT Lite网关'
|
||||
}, {
|
||||
value: 'MODBUS网关',
|
||||
label: 'MODBUS网关'
|
||||
}, {
|
||||
value: 'BACNET网关',
|
||||
label: 'BACNET网关'
|
||||
}, {
|
||||
value: 'OPC UA网关',
|
||||
label: 'OPC UA网关'
|
||||
}, {
|
||||
value: 'OPC DA网关',
|
||||
label: 'OPC DA网关'
|
||||
},
|
||||
{
|
||||
value: 'loT网关',
|
||||
label: 'loT网关'
|
||||
}],
|
||||
value: '',
|
||||
formdata: {
|
||||
wgpz_wgmc: "有线区网关1",
|
||||
wgpz_wgid: "LAN-BOX1",
|
||||
wgpz_wglx: "loT网关"
|
||||
},
|
||||
rules: {
|
||||
wgpz_wgmc: [
|
||||
{ required: true, message: '请选择网关名称', trigger: 'change' },
|
||||
],
|
||||
wgpz_wgid: [
|
||||
{ required: true, message: '请选择网关id', trigger: 'change' },
|
||||
],
|
||||
wgpz_wglx: [
|
||||
{ required: true, message: '请选择网关类型', trigger: 'change' }
|
||||
],
|
||||
},
|
||||
outerVisible: true,
|
||||
innerVisible: false,
|
||||
};
|
||||
},
|
||||
|
||||
mounted() {
|
||||
|
||||
},
|
||||
|
||||
methods: {
|
||||
innerConfirm() {
|
||||
this.outerVisible = false;
|
||||
this.innerVisible = false;
|
||||
this.$router.replace("/channelconfig");
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.data_acquire {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.inner_content {
|
||||
margin-left: 30px;
|
||||
width: 280px;
|
||||
height: 40px;
|
||||
// color: rgba(255, 255, 255, 0);
|
||||
font-size: 14px;
|
||||
text-align: left;
|
||||
font-family: SourceHanSansSC-regular;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,137 @@
|
|||
<template>
|
||||
<div>
|
||||
<!-- <div class="data_acquire">
|
||||
<el-button type="info" plain @click="outerVisible = true">数据采集设备</el-button>
|
||||
</div> -->
|
||||
<div>
|
||||
<el-dialog title="新建网关" :visible.sync="outerVisible" width="382px">
|
||||
<el-form :model="formdata" :rules="rules" ref="ruleForm" label-width="85px" class="demo-ruleForm">
|
||||
<el-form-item label="网关名称:" prop="wgpz_wgmc">
|
||||
<el-select v-model="formdata.wgpz_wgmc" placeholder="有线区网关1" style="width: 200px;">
|
||||
<el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="网关ID:" prop="wgpz_wgid">
|
||||
<el-select v-model="formdata.wgpz_wgid" placeholder="LAN-BOX1" style="width: 200px;">
|
||||
<el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="网关类型:" prop="wgpz_wglx">
|
||||
<el-select v-model="formdata.wgpz_wglx" placeholder="lot Life 网关" style="width: 200px;">
|
||||
<el-option v-for="item in options3" :key="item.value" :label="item.label" :value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<el-dialog width="382px" title="系统提示" :visible.sync="innerVisible" append-to-body>
|
||||
<p class="inner_content">请确认选择的网关类型与网关实体一致:否则该工程无法下载至实体网关</p>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="innerConfirm">确定</el-button>
|
||||
<el-button @click="innerVisible = false">取 消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
<div slot="footer" class="dialog-footer-outer">
|
||||
<el-button type="primary" @click="innerVisible = true">保存</el-button>
|
||||
<el-button @click="outerVisible = false">取 消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {SaveUserAnswer,GetUserAnswer} from "@/api/user";
|
||||
export default {
|
||||
name: 'TestDataAcquisition',
|
||||
|
||||
data() {
|
||||
return {
|
||||
input1: "",
|
||||
options1: [{
|
||||
value: "有线区网关1",
|
||||
label: "有线区网关1",
|
||||
}, {
|
||||
value: "无线区网关1",
|
||||
label: "无线区网关1",
|
||||
}],
|
||||
options2: [{
|
||||
value: "LAN-BOX1",
|
||||
label: "LAN-BOX1",
|
||||
}, {
|
||||
value: "WLAN-BOX1",
|
||||
label: "WLAN-BOX1",
|
||||
}],
|
||||
options3: [{
|
||||
value: 'loT Lite网关',
|
||||
label: 'loT Lite网关'
|
||||
}, {
|
||||
value: 'MODBUS网关',
|
||||
label: 'MODBUS网关'
|
||||
}, {
|
||||
value: 'BACNET网关',
|
||||
label: 'BACNET网关'
|
||||
}, {
|
||||
value: 'OPC UA网关',
|
||||
label: 'OPC UA网关'
|
||||
}, {
|
||||
value: 'OPC DA网关',
|
||||
label: 'OPC DA网关'
|
||||
},
|
||||
{
|
||||
value: 'loT网关',
|
||||
label: 'loT网关'
|
||||
}],
|
||||
value: '',
|
||||
formdata: {
|
||||
wgpz_wgmc: "有线区网关1",
|
||||
wgpz_wgid: "LAN-BOX1",
|
||||
wgpz_wglx: "loT网关"
|
||||
},
|
||||
rules: {
|
||||
wgpz_wgmc: [
|
||||
{ required: true, message: '请选择网关名称', trigger: 'change' },
|
||||
],
|
||||
wgpz_wgid: [
|
||||
{ required: true, message: '请选择网关id', trigger: 'change' },
|
||||
],
|
||||
wgpz_wglx: [
|
||||
{ required: true, message: '请选择网关类型', trigger: 'change' }
|
||||
],
|
||||
},
|
||||
outerVisible: true,
|
||||
innerVisible: false,
|
||||
};
|
||||
},
|
||||
|
||||
mounted() {
|
||||
|
||||
},
|
||||
|
||||
methods: {
|
||||
innerConfirm() {
|
||||
this.outerVisible = false;
|
||||
this.innerVisible = false;
|
||||
|
||||
this.$router.replace("/channelconfig");
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.data_acquire {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.inner_content {
|
||||
margin-left: 30px;
|
||||
width: 280px;
|
||||
height: 40px;
|
||||
// color: rgba(255, 255, 255, 0);
|
||||
font-size: 14px;
|
||||
text-align: left;
|
||||
font-family: SourceHanSansSC-regular;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,141 @@
|
|||
<template>
|
||||
<div>
|
||||
<!-- <div class="data_acquire">
|
||||
<el-button type="info" plain @click="outerVisible = true">数据采集设备</el-button>
|
||||
</div> -->
|
||||
<div>
|
||||
<el-dialog title="新建网关" :visible.sync="outerVisible" width="382px">
|
||||
<el-form :model="formdata" :rules="rules" ref="ruleForm" label-width="85px" class="demo-ruleForm">
|
||||
<el-form-item label="网关名称:" prop="wgpz_wgmc">
|
||||
<el-select v-model="formdata.wgpz_wgmc" placeholder="有线区网关1" style="width: 200px;">
|
||||
<el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="网关ID:" prop="wgpz_wgid">
|
||||
<el-select v-model="formdata.wgpz_wgid" placeholder="LAN-BOX1" style="width: 200px;">
|
||||
<el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="网关类型:" prop="wgpz_wglx">
|
||||
<el-select v-model="formdata.wgpz_wglx" placeholder="lot Life 网关" style="width: 200px;">
|
||||
<el-option v-for="item in options3" :key="item.value" :label="item.label" :value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<el-dialog width="382px" title="系统提示" :visible.sync="innerVisible" append-to-body>
|
||||
<p class="inner_content">请确认选择的网关类型与网关实体一致:否则该工程无法下载至实体网关</p>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="innerConfirm">确定</el-button>
|
||||
<el-button @click="innerVisible = false">取 消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
<div slot="footer" class="dialog-footer-outer">
|
||||
<el-button type="primary" @click="innerVisible = true">保存</el-button>
|
||||
<el-button @click="outerVisible = false">取 消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {SaveUserAnswer,GetUserAnswer} from "@/api/user";
|
||||
export default {
|
||||
name: 'TestDataAcquisition',
|
||||
|
||||
data() {
|
||||
return {
|
||||
input1: "",
|
||||
options1: [{
|
||||
value: "有线区网关1",
|
||||
label: "有线区网关1",
|
||||
}, {
|
||||
value: "无线区网关1",
|
||||
label: "无线区网关1",
|
||||
}],
|
||||
options2: [{
|
||||
value: "LAN-BOX1",
|
||||
label: "LAN-BOX1",
|
||||
}, {
|
||||
value: "WLAN-BOX1",
|
||||
label: "WLAN-BOX1",
|
||||
}],
|
||||
options3: [{
|
||||
value: 'loT Lite网关',
|
||||
label: 'loT Lite网关'
|
||||
}, {
|
||||
value: 'MODBUS网关',
|
||||
label: 'MODBUS网关'
|
||||
}, {
|
||||
value: 'BACNET网关',
|
||||
label: 'BACNET网关'
|
||||
}, {
|
||||
value: 'OPC UA网关',
|
||||
label: 'OPC UA网关'
|
||||
}, {
|
||||
value: 'OPC DA网关',
|
||||
label: 'OPC DA网关'
|
||||
},
|
||||
{
|
||||
value: 'loT网关',
|
||||
label: 'loT网关'
|
||||
}],
|
||||
value: '',
|
||||
formdata: {
|
||||
wgpz_wgmc: "有线区网关1",
|
||||
wgpz_wgid: "LAN-BOX1",
|
||||
wgpz_wglx: "loT网关"
|
||||
},
|
||||
rules: {
|
||||
wgpz_wgmc: [
|
||||
{ required: true, message: '请选择网关名称', trigger: 'change' },
|
||||
],
|
||||
wgpz_wgid: [
|
||||
{ required: true, message: '请选择网关id', trigger: 'change' },
|
||||
],
|
||||
wgpz_wglx: [
|
||||
{ required: true, message: '请选择网关类型', trigger: 'change' }
|
||||
],
|
||||
},
|
||||
outerVisible: true,
|
||||
innerVisible: false,
|
||||
};
|
||||
},
|
||||
|
||||
mounted() {
|
||||
|
||||
},
|
||||
|
||||
methods: {
|
||||
async innerConfirm() {
|
||||
this.outerVisible = false;
|
||||
this.innerVisible = false;
|
||||
let res = await SaveUserAnswer({
|
||||
mark:"DB-IotLite_yx",
|
||||
user_id:"USER202307301109254198",
|
||||
mark_value:JSON.stringify(this.formdata),
|
||||
})
|
||||
this.$router.replace("/channelconfig");
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.data_acquire {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.inner_content {
|
||||
margin-left: 30px;
|
||||
width: 280px;
|
||||
height: 40px;
|
||||
// color: rgba(255, 255, 255, 0);
|
||||
font-size: 14px;
|
||||
text-align: left;
|
||||
font-family: SourceHanSansSC-regular;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,142 @@
|
|||
<template>
|
||||
<div>
|
||||
<!-- <div class="data_acquire">
|
||||
<el-button type="info" plain @click="outerVisible = true">数据采集设备</el-button>
|
||||
</div> -->
|
||||
<div>
|
||||
<el-dialog title="新建网关" :visible.sync="outerVisible" width="382px">
|
||||
<el-form :model="formdata" :rules="rules" ref="ruleForm" label-width="85px" class="demo-ruleForm">
|
||||
<el-form-item label="网关名称:" prop="wgpz_wgmc">
|
||||
<el-select v-model="formdata.wgpz_wgmc" placeholder="有线区网关1" style="width: 200px;">
|
||||
<el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="网关ID:" prop="wgpz_wgid">
|
||||
<el-select v-model="formdata.wgpz_wgid" placeholder="LAN-BOX1" style="width: 200px;">
|
||||
<el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="网关类型:" prop="wgpz_wglx">
|
||||
<el-select v-model="formdata.wgpz_wglx" placeholder="lot Life 网关" style="width: 200px;">
|
||||
<el-option v-for="item in options3" :key="item.value" :label="item.label" :value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<el-dialog width="382px" title="系统提示" :visible.sync="innerVisible" append-to-body>
|
||||
<p class="inner_content">请确认选择的网关类型与网关实体一致:否则该工程无法下载至实体网关</p>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="innerConfirm">确定</el-button>
|
||||
<el-button @click="innerVisible = false">取 消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
<div slot="footer" class="dialog-footer-outer">
|
||||
<el-button type="primary" @click="innerVisible = true">保存</el-button>
|
||||
<el-button @click="outerVisible = false">取 消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {SaveUserAnswer,GetUserAnswer} from "@/api/user";
|
||||
export default {
|
||||
name: 'TestDataAcquisition',
|
||||
|
||||
data() {
|
||||
return {
|
||||
input1: "",
|
||||
options1: [{
|
||||
value: "有线区网关1",
|
||||
label: "有线区网关1",
|
||||
}, {
|
||||
value: "无线区网关1",
|
||||
label: "无线区网关1",
|
||||
}],
|
||||
options2: [{
|
||||
value: "LAN-BOX1",
|
||||
label: "LAN-BOX1",
|
||||
}, {
|
||||
value: "WLAN-BOX1",
|
||||
label: "WLAN-BOX1",
|
||||
}],
|
||||
options3: [{
|
||||
value: 'loT Lite网关',
|
||||
label: 'loT Lite网关'
|
||||
}, {
|
||||
value: 'MODBUS网关',
|
||||
label: 'MODBUS网关'
|
||||
}, {
|
||||
value: 'BACNET网关',
|
||||
label: 'BACNET网关'
|
||||
}, {
|
||||
value: 'OPC UA网关',
|
||||
label: 'OPC UA网关'
|
||||
}, {
|
||||
value: 'OPC DA网关',
|
||||
label: 'OPC DA网关'
|
||||
},
|
||||
{
|
||||
value: 'loT网关',
|
||||
label: 'loT网关'
|
||||
}],
|
||||
value: '',
|
||||
formdata: {
|
||||
wgpz_wgmc: "有线区网关1",
|
||||
wgpz_wgid: "LAN-BOX1",
|
||||
wgpz_wglx: "loT网关"
|
||||
},
|
||||
rules: {
|
||||
wgpz_wgmc: [
|
||||
{ required: true, message: '请选择网关名称', trigger: 'change' },
|
||||
],
|
||||
wgpz_wgid: [
|
||||
{ required: true, message: '请选择网关id', trigger: 'change' },
|
||||
],
|
||||
wgpz_wglx: [
|
||||
{ required: true, message: '请选择网关类型', trigger: 'change' }
|
||||
],
|
||||
},
|
||||
outerVisible: true,
|
||||
innerVisible: false,
|
||||
};
|
||||
},
|
||||
|
||||
mounted() {
|
||||
|
||||
},
|
||||
|
||||
methods: {
|
||||
async innerConfirm() {
|
||||
this.outerVisible = false;
|
||||
this.innerVisible = false;
|
||||
let res = await SaveUserAnswer({
|
||||
mark:"DB-IotLite_yx",
|
||||
user_id:"USER202307301109254198",
|
||||
mark_value:JSON.stringify(this.formdata),
|
||||
})
|
||||
console.log(res);
|
||||
this.$router.replace("/channelconfig");
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.data_acquire {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.inner_content {
|
||||
margin-left: 30px;
|
||||
width: 280px;
|
||||
height: 40px;
|
||||
// color: rgba(255, 255, 255, 0);
|
||||
font-size: 14px;
|
||||
text-align: left;
|
||||
font-family: SourceHanSansSC-regular;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,143 @@
|
|||
<template>
|
||||
<div>
|
||||
<!-- <div class="data_acquire">
|
||||
<el-button type="info" plain @click="outerVisible = true">数据采集设备</el-button>
|
||||
</div> -->
|
||||
<div>
|
||||
<el-dialog title="新建网关" :visible.sync="outerVisible" width="382px">
|
||||
<el-form :model="formdata" :rules="rules" ref="ruleForm" label-width="85px" class="demo-ruleForm">
|
||||
<el-form-item label="网关名称:" prop="wgpz_wgmc">
|
||||
<el-select v-model="formdata.wgpz_wgmc" placeholder="有线区网关1" style="width: 200px;">
|
||||
<el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="网关ID:" prop="wgpz_wgid">
|
||||
<el-select v-model="formdata.wgpz_wgid" placeholder="LAN-BOX1" style="width: 200px;">
|
||||
<el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="网关类型:" prop="wgpz_wglx">
|
||||
<el-select v-model="formdata.wgpz_wglx" placeholder="lot Life 网关" style="width: 200px;">
|
||||
<el-option v-for="item in options3" :key="item.value" :label="item.label" :value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<el-dialog width="382px" title="系统提示" :visible.sync="innerVisible" append-to-body>
|
||||
<p class="inner_content">请确认选择的网关类型与网关实体一致:否则该工程无法下载至实体网关</p>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="innerConfirm">确定</el-button>
|
||||
<el-button @click="innerVisible = false">取 消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
<div slot="footer" class="dialog-footer-outer">
|
||||
<el-button type="primary" @click="innerVisible = true">保存</el-button>
|
||||
<el-button @click="outerVisible = false">取 消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {SaveUserAnswer,GetUserAnswer} from "@/api/user";
|
||||
export default {
|
||||
name: 'TestDataAcquisition',
|
||||
|
||||
data() {
|
||||
return {
|
||||
input1: "",
|
||||
options1: [{
|
||||
value: "有线区网关1",
|
||||
label: "有线区网关1",
|
||||
}, {
|
||||
value: "无线区网关1",
|
||||
label: "无线区网关1",
|
||||
}],
|
||||
options2: [{
|
||||
value: "LAN-BOX1",
|
||||
label: "LAN-BOX1",
|
||||
}, {
|
||||
value: "WLAN-BOX1",
|
||||
label: "WLAN-BOX1",
|
||||
}],
|
||||
options3: [{
|
||||
value: 'loT Lite网关',
|
||||
label: 'loT Lite网关'
|
||||
}, {
|
||||
value: 'MODBUS网关',
|
||||
label: 'MODBUS网关'
|
||||
}, {
|
||||
value: 'BACNET网关',
|
||||
label: 'BACNET网关'
|
||||
}, {
|
||||
value: 'OPC UA网关',
|
||||
label: 'OPC UA网关'
|
||||
}, {
|
||||
value: 'OPC DA网关',
|
||||
label: 'OPC DA网关'
|
||||
},
|
||||
{
|
||||
value: 'loT网关',
|
||||
label: 'loT网关'
|
||||
}],
|
||||
value: '',
|
||||
formdata: {
|
||||
wgpz_wgmc: "有线区网关1",
|
||||
wgpz_wgid: "LAN-BOX1",
|
||||
wgpz_wglx: "loT网关"
|
||||
},
|
||||
rules: {
|
||||
wgpz_wgmc: [
|
||||
{ required: true, message: '请选择网关名称', trigger: 'change' },
|
||||
],
|
||||
wgpz_wgid: [
|
||||
{ required: true, message: '请选择网关id', trigger: 'change' },
|
||||
],
|
||||
wgpz_wglx: [
|
||||
{ required: true, message: '请选择网关类型', trigger: 'change' }
|
||||
],
|
||||
},
|
||||
outerVisible: true,
|
||||
innerVisible: false,
|
||||
};
|
||||
},
|
||||
|
||||
mounted() {
|
||||
|
||||
},
|
||||
|
||||
methods: {
|
||||
async innerConfirm() {
|
||||
this.outerVisible = false;
|
||||
this.innerVisible = false;
|
||||
let datas = sessionStorage.getItem("answer");
|
||||
let res = await SaveUserAnswer({
|
||||
mark:"DB-IotLite_yx",
|
||||
user_id:"USER202307301109254198",
|
||||
mark_value:JSON.stringify(this.formdata),
|
||||
})
|
||||
console.log(res);
|
||||
this.$router.replace("/channelconfig");
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.data_acquire {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.inner_content {
|
||||
margin-left: 30px;
|
||||
width: 280px;
|
||||
height: 40px;
|
||||
// color: rgba(255, 255, 255, 0);
|
||||
font-size: 14px;
|
||||
text-align: left;
|
||||
font-family: SourceHanSansSC-regular;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,144 @@
|
|||
<template>
|
||||
<div>
|
||||
<!-- <div class="data_acquire">
|
||||
<el-button type="info" plain @click="outerVisible = true">数据采集设备</el-button>
|
||||
</div> -->
|
||||
<div>
|
||||
<el-dialog title="新建网关" :visible.sync="outerVisible" width="382px">
|
||||
<el-form :model="formdata" :rules="rules" ref="ruleForm" label-width="85px" class="demo-ruleForm">
|
||||
<el-form-item label="网关名称:" prop="wgpz_wgmc">
|
||||
<el-select v-model="formdata.wgpz_wgmc" placeholder="有线区网关1" style="width: 200px;">
|
||||
<el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="网关ID:" prop="wgpz_wgid">
|
||||
<el-select v-model="formdata.wgpz_wgid" placeholder="LAN-BOX1" style="width: 200px;">
|
||||
<el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="网关类型:" prop="wgpz_wglx">
|
||||
<el-select v-model="formdata.wgpz_wglx" placeholder="lot Life 网关" style="width: 200px;">
|
||||
<el-option v-for="item in options3" :key="item.value" :label="item.label" :value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<el-dialog width="382px" title="系统提示" :visible.sync="innerVisible" append-to-body>
|
||||
<p class="inner_content">请确认选择的网关类型与网关实体一致:否则该工程无法下载至实体网关</p>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="innerConfirm">确定</el-button>
|
||||
<el-button @click="innerVisible = false">取 消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
<div slot="footer" class="dialog-footer-outer">
|
||||
<el-button type="primary" @click="innerVisible = true">保存</el-button>
|
||||
<el-button @click="outerVisible = false">取 消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {SaveUserAnswer,GetUserAnswer} from "@/api/user";
|
||||
export default {
|
||||
name: 'TestDataAcquisition',
|
||||
|
||||
data() {
|
||||
return {
|
||||
input1: "",
|
||||
options1: [{
|
||||
value: "有线区网关1",
|
||||
label: "有线区网关1",
|
||||
}, {
|
||||
value: "无线区网关1",
|
||||
label: "无线区网关1",
|
||||
}],
|
||||
options2: [{
|
||||
value: "LAN-BOX1",
|
||||
label: "LAN-BOX1",
|
||||
}, {
|
||||
value: "WLAN-BOX1",
|
||||
label: "WLAN-BOX1",
|
||||
}],
|
||||
options3: [{
|
||||
value: 'loT Lite网关',
|
||||
label: 'loT Lite网关'
|
||||
}, {
|
||||
value: 'MODBUS网关',
|
||||
label: 'MODBUS网关'
|
||||
}, {
|
||||
value: 'BACNET网关',
|
||||
label: 'BACNET网关'
|
||||
}, {
|
||||
value: 'OPC UA网关',
|
||||
label: 'OPC UA网关'
|
||||
}, {
|
||||
value: 'OPC DA网关',
|
||||
label: 'OPC DA网关'
|
||||
},
|
||||
{
|
||||
value: 'loT网关',
|
||||
label: 'loT网关'
|
||||
}],
|
||||
value: '',
|
||||
formdata: {
|
||||
wgpz_wgmc: "有线区网关1",
|
||||
wgpz_wgid: "LAN-BOX1",
|
||||
wgpz_wglx: "loT网关"
|
||||
},
|
||||
rules: {
|
||||
wgpz_wgmc: [
|
||||
{ required: true, message: '请选择网关名称', trigger: 'change' },
|
||||
],
|
||||
wgpz_wgid: [
|
||||
{ required: true, message: '请选择网关id', trigger: 'change' },
|
||||
],
|
||||
wgpz_wglx: [
|
||||
{ required: true, message: '请选择网关类型', trigger: 'change' }
|
||||
],
|
||||
},
|
||||
outerVisible: true,
|
||||
innerVisible: false,
|
||||
};
|
||||
},
|
||||
|
||||
mounted() {
|
||||
|
||||
},
|
||||
|
||||
methods: {
|
||||
async innerConfirm() {
|
||||
this.outerVisible = false;
|
||||
this.innerVisible = false;
|
||||
let datas = sessionStorage.getItem("answer");
|
||||
console.log(datas);
|
||||
let res = await SaveUserAnswer({
|
||||
mark:"DB-IotLite_yx",
|
||||
user_id:"USER202307301109254198",
|
||||
mark_value:JSON.stringify(this.formdata),
|
||||
})
|
||||
console.log(res);
|
||||
this.$router.replace("/channelconfig");
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.data_acquire {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.inner_content {
|
||||
margin-left: 30px;
|
||||
width: 280px;
|
||||
height: 40px;
|
||||
// color: rgba(255, 255, 255, 0);
|
||||
font-size: 14px;
|
||||
text-align: left;
|
||||
font-family: SourceHanSansSC-regular;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,144 @@
|
|||
<template>
|
||||
<div>
|
||||
<!-- <div class="data_acquire">
|
||||
<el-button type="info" plain @click="outerVisible = true">数据采集设备</el-button>
|
||||
</div> -->
|
||||
<div>
|
||||
<el-dialog title="新建网关" :visible.sync="outerVisible" width="382px">
|
||||
<el-form :model="formdata" :rules="rules" ref="ruleForm" label-width="85px" class="demo-ruleForm">
|
||||
<el-form-item label="网关名称:" prop="wgpz_wgmc">
|
||||
<el-select v-model="formdata.wgpz_wgmc" placeholder="有线区网关1" style="width: 200px;">
|
||||
<el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="网关ID:" prop="wgpz_wgid">
|
||||
<el-select v-model="formdata.wgpz_wgid" placeholder="LAN-BOX1" style="width: 200px;">
|
||||
<el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="网关类型:" prop="wgpz_wglx">
|
||||
<el-select v-model="formdata.wgpz_wglx" placeholder="lot Life 网关" style="width: 200px;">
|
||||
<el-option v-for="item in options3" :key="item.value" :label="item.label" :value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<el-dialog width="382px" title="系统提示" :visible.sync="innerVisible" append-to-body>
|
||||
<p class="inner_content">请确认选择的网关类型与网关实体一致:否则该工程无法下载至实体网关</p>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="innerConfirm">确定</el-button>
|
||||
<el-button @click="innerVisible = false">取 消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
<div slot="footer" class="dialog-footer-outer">
|
||||
<el-button type="primary" @click="innerVisible = true">保存</el-button>
|
||||
<el-button @click="outerVisible = false">取 消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {SaveUserAnswer,GetUserAnswer} from "@/api/user";
|
||||
export default {
|
||||
name: 'TestDataAcquisition',
|
||||
|
||||
data() {
|
||||
return {
|
||||
input1: "",
|
||||
options1: [{
|
||||
value: "有线区网关1",
|
||||
label: "有线区网关1",
|
||||
}, {
|
||||
value: "无线区网关1",
|
||||
label: "无线区网关1",
|
||||
}],
|
||||
options2: [{
|
||||
value: "LAN-BOX1",
|
||||
label: "LAN-BOX1",
|
||||
}, {
|
||||
value: "WLAN-BOX1",
|
||||
label: "WLAN-BOX1",
|
||||
}],
|
||||
options3: [{
|
||||
value: 'loT Lite网关',
|
||||
label: 'loT Lite网关'
|
||||
}, {
|
||||
value: 'MODBUS网关',
|
||||
label: 'MODBUS网关'
|
||||
}, {
|
||||
value: 'BACNET网关',
|
||||
label: 'BACNET网关'
|
||||
}, {
|
||||
value: 'OPC UA网关',
|
||||
label: 'OPC UA网关'
|
||||
}, {
|
||||
value: 'OPC DA网关',
|
||||
label: 'OPC DA网关'
|
||||
},
|
||||
{
|
||||
value: 'loT网关',
|
||||
label: 'loT网关'
|
||||
}],
|
||||
value: '',
|
||||
formdata: {
|
||||
wgpz_wgmc: "有线区网关1",
|
||||
wgpz_wgid: "LAN-BOX1",
|
||||
wgpz_wglx: "loT网关"
|
||||
},
|
||||
rules: {
|
||||
wgpz_wgmc: [
|
||||
{ required: true, message: '请选择网关名称', trigger: 'change' },
|
||||
],
|
||||
wgpz_wgid: [
|
||||
{ required: true, message: '请选择网关id', trigger: 'change' },
|
||||
],
|
||||
wgpz_wglx: [
|
||||
{ required: true, message: '请选择网关类型', trigger: 'change' }
|
||||
],
|
||||
},
|
||||
outerVisible: true,
|
||||
innerVisible: false,
|
||||
};
|
||||
},
|
||||
|
||||
mounted() {
|
||||
|
||||
},
|
||||
|
||||
methods: {
|
||||
async innerConfirm() {
|
||||
this.outerVisible = false;
|
||||
this.innerVisible = false;
|
||||
let datas = sessionStorage.getItem("answer");
|
||||
console.log(JSON.parse(datas));
|
||||
let res = await SaveUserAnswer({
|
||||
mark:"DB-IotLite_yx",
|
||||
user_id:"USER202307301109254198",
|
||||
mark_value:JSON.stringify(this.formdata),
|
||||
})
|
||||
console.log(res);
|
||||
this.$router.replace("/channelconfig");
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.data_acquire {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.inner_content {
|
||||
margin-left: 30px;
|
||||
width: 280px;
|
||||
height: 40px;
|
||||
// color: rgba(255, 255, 255, 0);
|
||||
font-size: 14px;
|
||||
text-align: left;
|
||||
font-family: SourceHanSansSC-regular;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,145 @@
|
|||
<template>
|
||||
<div>
|
||||
<!-- <div class="data_acquire">
|
||||
<el-button type="info" plain @click="outerVisible = true">数据采集设备</el-button>
|
||||
</div> -->
|
||||
<div>
|
||||
<el-dialog title="新建网关" :visible.sync="outerVisible" width="382px">
|
||||
<el-form :model="formdata" :rules="rules" ref="ruleForm" label-width="85px" class="demo-ruleForm">
|
||||
<el-form-item label="网关名称:" prop="wgpz_wgmc">
|
||||
<el-select v-model="formdata.wgpz_wgmc" placeholder="有线区网关1" style="width: 200px;">
|
||||
<el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="网关ID:" prop="wgpz_wgid">
|
||||
<el-select v-model="formdata.wgpz_wgid" placeholder="LAN-BOX1" style="width: 200px;">
|
||||
<el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="网关类型:" prop="wgpz_wglx">
|
||||
<el-select v-model="formdata.wgpz_wglx" placeholder="lot Life 网关" style="width: 200px;">
|
||||
<el-option v-for="item in options3" :key="item.value" :label="item.label" :value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<el-dialog width="382px" title="系统提示" :visible.sync="innerVisible" append-to-body>
|
||||
<p class="inner_content">请确认选择的网关类型与网关实体一致:否则该工程无法下载至实体网关</p>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="innerConfirm">确定</el-button>
|
||||
<el-button @click="innerVisible = false">取 消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
<div slot="footer" class="dialog-footer-outer">
|
||||
<el-button type="primary" @click="innerVisible = true">保存</el-button>
|
||||
<el-button @click="outerVisible = false">取 消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {SaveUserAnswer,GetUserAnswer} from "@/api/user";
|
||||
export default {
|
||||
name: 'TestDataAcquisition',
|
||||
|
||||
data() {
|
||||
return {
|
||||
input1: "",
|
||||
options1: [{
|
||||
value: "有线区网关1",
|
||||
label: "有线区网关1",
|
||||
}, {
|
||||
value: "无线区网关1",
|
||||
label: "无线区网关1",
|
||||
}],
|
||||
options2: [{
|
||||
value: "LAN-BOX1",
|
||||
label: "LAN-BOX1",
|
||||
}, {
|
||||
value: "WLAN-BOX1",
|
||||
label: "WLAN-BOX1",
|
||||
}],
|
||||
options3: [{
|
||||
value: 'loT Lite网关',
|
||||
label: 'loT Lite网关'
|
||||
}, {
|
||||
value: 'MODBUS网关',
|
||||
label: 'MODBUS网关'
|
||||
}, {
|
||||
value: 'BACNET网关',
|
||||
label: 'BACNET网关'
|
||||
}, {
|
||||
value: 'OPC UA网关',
|
||||
label: 'OPC UA网关'
|
||||
}, {
|
||||
value: 'OPC DA网关',
|
||||
label: 'OPC DA网关'
|
||||
},
|
||||
{
|
||||
value: 'loT网关',
|
||||
label: 'loT网关'
|
||||
}],
|
||||
value: '',
|
||||
formdata: {
|
||||
wgpz_wgmc: "有线区网关1",
|
||||
wgpz_wgid: "LAN-BOX1",
|
||||
wgpz_wglx: "loT网关"
|
||||
},
|
||||
rules: {
|
||||
wgpz_wgmc: [
|
||||
{ required: true, message: '请选择网关名称', trigger: 'change' },
|
||||
],
|
||||
wgpz_wgid: [
|
||||
{ required: true, message: '请选择网关id', trigger: 'change' },
|
||||
],
|
||||
wgpz_wglx: [
|
||||
{ required: true, message: '请选择网关类型', trigger: 'change' }
|
||||
],
|
||||
},
|
||||
outerVisible: true,
|
||||
innerVisible: false,
|
||||
};
|
||||
},
|
||||
|
||||
mounted() {
|
||||
|
||||
},
|
||||
|
||||
methods: {
|
||||
async innerConfirm() {
|
||||
this.outerVisible = false;
|
||||
this.innerVisible = false;
|
||||
let datas = sessionStorage.getItem("answer");
|
||||
console.log(JSON.parse(datas));
|
||||
this.formdata.concat(JSON.parse(datas));
|
||||
let res = await SaveUserAnswer({
|
||||
mark:"DB-IotLite_yx",
|
||||
user_id:"USER202307301109254198",
|
||||
mark_value:JSON.stringify(this.formdata),
|
||||
})
|
||||
console.log(res);
|
||||
this.$router.replace("/channelconfig");
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.data_acquire {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.inner_content {
|
||||
margin-left: 30px;
|
||||
width: 280px;
|
||||
height: 40px;
|
||||
// color: rgba(255, 255, 255, 0);
|
||||
font-size: 14px;
|
||||
text-align: left;
|
||||
font-family: SourceHanSansSC-regular;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,146 @@
|
|||
<template>
|
||||
<div>
|
||||
<!-- <div class="data_acquire">
|
||||
<el-button type="info" plain @click="outerVisible = true">数据采集设备</el-button>
|
||||
</div> -->
|
||||
<div>
|
||||
<el-dialog title="新建网关" :visible.sync="outerVisible" width="382px">
|
||||
<el-form :model="formdata" :rules="rules" ref="ruleForm" label-width="85px" class="demo-ruleForm">
|
||||
<el-form-item label="网关名称:" prop="wgpz_wgmc">
|
||||
<el-select v-model="formdata.wgpz_wgmc" placeholder="有线区网关1" style="width: 200px;">
|
||||
<el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="网关ID:" prop="wgpz_wgid">
|
||||
<el-select v-model="formdata.wgpz_wgid" placeholder="LAN-BOX1" style="width: 200px;">
|
||||
<el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="网关类型:" prop="wgpz_wglx">
|
||||
<el-select v-model="formdata.wgpz_wglx" placeholder="lot Life 网关" style="width: 200px;">
|
||||
<el-option v-for="item in options3" :key="item.value" :label="item.label" :value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<el-dialog width="382px" title="系统提示" :visible.sync="innerVisible" append-to-body>
|
||||
<p class="inner_content">请确认选择的网关类型与网关实体一致:否则该工程无法下载至实体网关</p>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="innerConfirm">确定</el-button>
|
||||
<el-button @click="innerVisible = false">取 消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
<div slot="footer" class="dialog-footer-outer">
|
||||
<el-button type="primary" @click="innerVisible = true">保存</el-button>
|
||||
<el-button @click="outerVisible = false">取 消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {SaveUserAnswer,GetUserAnswer} from "@/api/user";
|
||||
export default {
|
||||
name: 'TestDataAcquisition',
|
||||
|
||||
data() {
|
||||
return {
|
||||
input1: "",
|
||||
options1: [{
|
||||
value: "有线区网关1",
|
||||
label: "有线区网关1",
|
||||
}, {
|
||||
value: "无线区网关1",
|
||||
label: "无线区网关1",
|
||||
}],
|
||||
options2: [{
|
||||
value: "LAN-BOX1",
|
||||
label: "LAN-BOX1",
|
||||
}, {
|
||||
value: "WLAN-BOX1",
|
||||
label: "WLAN-BOX1",
|
||||
}],
|
||||
options3: [{
|
||||
value: 'loT Lite网关',
|
||||
label: 'loT Lite网关'
|
||||
}, {
|
||||
value: 'MODBUS网关',
|
||||
label: 'MODBUS网关'
|
||||
}, {
|
||||
value: 'BACNET网关',
|
||||
label: 'BACNET网关'
|
||||
}, {
|
||||
value: 'OPC UA网关',
|
||||
label: 'OPC UA网关'
|
||||
}, {
|
||||
value: 'OPC DA网关',
|
||||
label: 'OPC DA网关'
|
||||
},
|
||||
{
|
||||
value: 'loT网关',
|
||||
label: 'loT网关'
|
||||
}],
|
||||
value: '',
|
||||
formdata: {
|
||||
wgpz_wgmc: "有线区网关1",
|
||||
wgpz_wgid: "LAN-BOX1",
|
||||
wgpz_wglx: "loT网关"
|
||||
},
|
||||
rules: {
|
||||
wgpz_wgmc: [
|
||||
{ required: true, message: '请选择网关名称', trigger: 'change' },
|
||||
],
|
||||
wgpz_wgid: [
|
||||
{ required: true, message: '请选择网关id', trigger: 'change' },
|
||||
],
|
||||
wgpz_wglx: [
|
||||
{ required: true, message: '请选择网关类型', trigger: 'change' }
|
||||
],
|
||||
},
|
||||
outerVisible: true,
|
||||
innerVisible: false,
|
||||
};
|
||||
},
|
||||
|
||||
mounted() {
|
||||
|
||||
},
|
||||
|
||||
methods: {
|
||||
async innerConfirm() {
|
||||
this.outerVisible = false;
|
||||
this.innerVisible = false;
|
||||
let datas = sessionStorage.getItem("answer");
|
||||
console.log(JSON.parse(datas));
|
||||
this.formdata.concat(JSON.parse(datas));
|
||||
console.log(this.formdata);
|
||||
let res = await SaveUserAnswer({
|
||||
mark:"DB-IotLite_yx",
|
||||
user_id:"USER202307301109254198",
|
||||
mark_value:JSON.stringify(this.formdata),
|
||||
})
|
||||
console.log(res);
|
||||
this.$router.replace("/channelconfig");
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.data_acquire {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.inner_content {
|
||||
margin-left: 30px;
|
||||
width: 280px;
|
||||
height: 40px;
|
||||
// color: rgba(255, 255, 255, 0);
|
||||
font-size: 14px;
|
||||
text-align: left;
|
||||
font-family: SourceHanSansSC-regular;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,146 @@
|
|||
<template>
|
||||
<div>
|
||||
<!-- <div class="data_acquire">
|
||||
<el-button type="info" plain @click="outerVisible = true">数据采集设备</el-button>
|
||||
</div> -->
|
||||
<div>
|
||||
<el-dialog title="新建网关" :visible.sync="outerVisible" width="382px">
|
||||
<el-form :model="formdata" :rules="rules" ref="ruleForm" label-width="85px" class="demo-ruleForm">
|
||||
<el-form-item label="网关名称:" prop="wgpz_wgmc">
|
||||
<el-select v-model="formdata.wgpz_wgmc" placeholder="有线区网关1" style="width: 200px;">
|
||||
<el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="网关ID:" prop="wgpz_wgid">
|
||||
<el-select v-model="formdata.wgpz_wgid" placeholder="LAN-BOX1" style="width: 200px;">
|
||||
<el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="网关类型:" prop="wgpz_wglx">
|
||||
<el-select v-model="formdata.wgpz_wglx" placeholder="lot Life 网关" style="width: 200px;">
|
||||
<el-option v-for="item in options3" :key="item.value" :label="item.label" :value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<el-dialog width="382px" title="系统提示" :visible.sync="innerVisible" append-to-body>
|
||||
<p class="inner_content">请确认选择的网关类型与网关实体一致:否则该工程无法下载至实体网关</p>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="innerConfirm">确定</el-button>
|
||||
<el-button @click="innerVisible = false">取 消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
<div slot="footer" class="dialog-footer-outer">
|
||||
<el-button type="primary" @click="innerVisible = true">保存</el-button>
|
||||
<el-button @click="outerVisible = false">取 消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {SaveUserAnswer,GetUserAnswer} from "@/api/user";
|
||||
export default {
|
||||
name: 'TestDataAcquisition',
|
||||
|
||||
data() {
|
||||
return {
|
||||
input1: "",
|
||||
options1: [{
|
||||
value: "有线区网关1",
|
||||
label: "有线区网关1",
|
||||
}, {
|
||||
value: "无线区网关1",
|
||||
label: "无线区网关1",
|
||||
}],
|
||||
options2: [{
|
||||
value: "LAN-BOX1",
|
||||
label: "LAN-BOX1",
|
||||
}, {
|
||||
value: "WLAN-BOX1",
|
||||
label: "WLAN-BOX1",
|
||||
}],
|
||||
options3: [{
|
||||
value: 'loT Lite网关',
|
||||
label: 'loT Lite网关'
|
||||
}, {
|
||||
value: 'MODBUS网关',
|
||||
label: 'MODBUS网关'
|
||||
}, {
|
||||
value: 'BACNET网关',
|
||||
label: 'BACNET网关'
|
||||
}, {
|
||||
value: 'OPC UA网关',
|
||||
label: 'OPC UA网关'
|
||||
}, {
|
||||
value: 'OPC DA网关',
|
||||
label: 'OPC DA网关'
|
||||
},
|
||||
{
|
||||
value: 'loT网关',
|
||||
label: 'loT网关'
|
||||
}],
|
||||
value: '',
|
||||
formdata: {
|
||||
wgpz_wgmc: "有线区网关1",
|
||||
wgpz_wgid: "LAN-BOX1",
|
||||
wgpz_wglx: "loT网关"
|
||||
},
|
||||
rules: {
|
||||
wgpz_wgmc: [
|
||||
{ required: true, message: '请选择网关名称', trigger: 'change' },
|
||||
],
|
||||
wgpz_wgid: [
|
||||
{ required: true, message: '请选择网关id', trigger: 'change' },
|
||||
],
|
||||
wgpz_wglx: [
|
||||
{ required: true, message: '请选择网关类型', trigger: 'change' }
|
||||
],
|
||||
},
|
||||
outerVisible: true,
|
||||
innerVisible: false,
|
||||
};
|
||||
},
|
||||
|
||||
mounted() {
|
||||
|
||||
},
|
||||
|
||||
methods: {
|
||||
async innerConfirm() {
|
||||
this.outerVisible = false;
|
||||
this.innerVisible = false;
|
||||
let datas = sessionStorage.getItem("answer");
|
||||
console.log(JSON.parse(datas));
|
||||
this.formdata = {...this.formdata,...JSON.parse(datas)};
|
||||
console.log(this.formdata);
|
||||
let res = await SaveUserAnswer({
|
||||
mark:"DB-IotLite_yx",
|
||||
user_id:"USER202307301109254198",
|
||||
mark_value:JSON.stringify(this.formdata),
|
||||
})
|
||||
console.log(res);
|
||||
this.$router.replace("/channelconfig");
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.data_acquire {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.inner_content {
|
||||
margin-left: 30px;
|
||||
width: 280px;
|
||||
height: 40px;
|
||||
// color: rgba(255, 255, 255, 0);
|
||||
font-size: 14px;
|
||||
text-align: left;
|
||||
font-family: SourceHanSansSC-regular;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,146 @@
|
|||
<template>
|
||||
<div>
|
||||
<!-- <div class="data_acquire">
|
||||
<el-button type="info" plain @click="outerVisible = true">数据采集设备</el-button>
|
||||
</div> -->
|
||||
<div>
|
||||
<el-dialog title="新建网关" :visible.sync="outerVisible" width="382px">
|
||||
<el-form :model="formdata" :rules="rules" ref="ruleForm" label-width="85px" class="demo-ruleForm">
|
||||
<el-form-item label="网关名称:" prop="wgpz_wgmc">
|
||||
<el-select v-model="formdata.wgpz_wgmc" placeholder="有线区网关1" style="width: 200px;">
|
||||
<el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="网关ID:" prop="wgpz_wgid">
|
||||
<el-select v-model="formdata.wgpz_wgid" placeholder="LAN-BOX1" style="width: 200px;">
|
||||
<el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="网关类型:" prop="wgpz_wglx">
|
||||
<el-select v-model="formdata.wgpz_wglx" placeholder="lot Life 网关" style="width: 200px;">
|
||||
<el-option v-for="item in options3" :key="item.value" :label="item.label" :value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<el-dialog width="382px" title="系统提示" :visible.sync="innerVisible" append-to-body>
|
||||
<p class="inner_content">请确认选择的网关类型与网关实体一致:否则该工程无法下载至实体网关</p>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="innerConfirm">确定</el-button>
|
||||
<el-button @click="innerVisible = false">取 消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
<div slot="footer" class="dialog-footer-outer">
|
||||
<el-button type="primary" @click="innerVisible = true">保存</el-button>
|
||||
<el-button @click="outerVisible = false">取 消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {SaveUserAnswer,GetUserAnswer} from "@/api/user";
|
||||
export default {
|
||||
name: 'TestDataAcquisition',
|
||||
|
||||
data() {
|
||||
return {
|
||||
input1: "",
|
||||
options1: [{
|
||||
value: "有线区网关1",
|
||||
label: "有线区网关1",
|
||||
}, {
|
||||
value: "无线区网关1",
|
||||
label: "无线区网关1",
|
||||
}],
|
||||
options2: [{
|
||||
value: "LAN-BOX1",
|
||||
label: "LAN-BOX1",
|
||||
}, {
|
||||
value: "WLAN-BOX1",
|
||||
label: "WLAN-BOX1",
|
||||
}],
|
||||
options3: [{
|
||||
value: 'loT Lite网关',
|
||||
label: 'loT Lite网关'
|
||||
}, {
|
||||
value: 'MODBUS网关',
|
||||
label: 'MODBUS网关'
|
||||
}, {
|
||||
value: 'BACNET网关',
|
||||
label: 'BACNET网关'
|
||||
}, {
|
||||
value: 'OPC UA网关',
|
||||
label: 'OPC UA网关'
|
||||
}, {
|
||||
value: 'OPC DA网关',
|
||||
label: 'OPC DA网关'
|
||||
},
|
||||
{
|
||||
value: 'loT网关',
|
||||
label: 'loT网关'
|
||||
}],
|
||||
value: '',
|
||||
formdata: {
|
||||
wgpz_wgmc: "有线区网关1",
|
||||
wgpz_wgid: "LAN-BOX1",
|
||||
wgpz_wglx: "loT网关"
|
||||
},
|
||||
rules: {
|
||||
wgpz_wgmc: [
|
||||
{ required: true, message: '请选择网关名称', trigger: 'change' },
|
||||
],
|
||||
wgpz_wgid: [
|
||||
{ required: true, message: '请选择网关id', trigger: 'change' },
|
||||
],
|
||||
wgpz_wglx: [
|
||||
{ required: true, message: '请选择网关类型', trigger: 'change' }
|
||||
],
|
||||
},
|
||||
outerVisible: true,
|
||||
innerVisible: false,
|
||||
};
|
||||
},
|
||||
|
||||
mounted() {
|
||||
|
||||
},
|
||||
|
||||
methods: {
|
||||
async innerConfirm() {
|
||||
this.outerVisible = false;
|
||||
this.innerVisible = false;
|
||||
let datas = sessionStorage.getItem("answer");
|
||||
console.log(JSON.parse(datas));
|
||||
this.formdata = {...this.formdata,...JSON.parse(datas)};
|
||||
console.log(this.formdata);
|
||||
let res = await SaveUserAnswer({
|
||||
mark:"DB-IotLite_yx",
|
||||
user_id:"USER202307301109254198",
|
||||
mark_value:JSON.stringify(this.formdata),
|
||||
})
|
||||
console.log(JSON.parse(res.data.data.mark_value));
|
||||
this.$router.replace("/channelconfig");
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.data_acquire {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.inner_content {
|
||||
margin-left: 30px;
|
||||
width: 280px;
|
||||
height: 40px;
|
||||
// color: rgba(255, 255, 255, 0);
|
||||
font-size: 14px;
|
||||
text-align: left;
|
||||
font-family: SourceHanSansSC-regular;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,147 @@
|
|||
<template>
|
||||
<div>
|
||||
<!-- <div class="data_acquire">
|
||||
<el-button type="info" plain @click="outerVisible = true">数据采集设备</el-button>
|
||||
</div> -->
|
||||
<div>
|
||||
<el-dialog title="新建网关" :visible.sync="outerVisible" width="382px">
|
||||
<el-form :model="formdata" :rules="rules" ref="ruleForm" label-width="85px" class="demo-ruleForm">
|
||||
<el-form-item label="网关名称:" prop="wgpz_wgmc">
|
||||
<el-select v-model="formdata.wgpz_wgmc" placeholder="有线区网关1" style="width: 200px;">
|
||||
<el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="网关ID:" prop="wgpz_wgid">
|
||||
<el-select v-model="formdata.wgpz_wgid" placeholder="LAN-BOX1" style="width: 200px;">
|
||||
<el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="网关类型:" prop="wgpz_wglx">
|
||||
<el-select v-model="formdata.wgpz_wglx" placeholder="lot Life 网关" style="width: 200px;">
|
||||
<el-option v-for="item in options3" :key="item.value" :label="item.label" :value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<el-dialog width="382px" title="系统提示" :visible.sync="innerVisible" append-to-body>
|
||||
<p class="inner_content">请确认选择的网关类型与网关实体一致:否则该工程无法下载至实体网关</p>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="innerConfirm">确定</el-button>
|
||||
<el-button @click="innerVisible = false">取 消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
<div slot="footer" class="dialog-footer-outer">
|
||||
<el-button type="primary" @click="innerVisible = true">保存</el-button>
|
||||
<el-button @click="outerVisible = false">取 消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {SaveUserAnswer,GetUserAnswer} from "@/api/user";
|
||||
export default {
|
||||
name: 'TestDataAcquisition',
|
||||
|
||||
data() {
|
||||
return {
|
||||
input1: "",
|
||||
options1: [{
|
||||
value: "有线区网关1",
|
||||
label: "有线区网关1",
|
||||
}, {
|
||||
value: "无线区网关1",
|
||||
label: "无线区网关1",
|
||||
}],
|
||||
options2: [{
|
||||
value: "LAN-BOX1",
|
||||
label: "LAN-BOX1",
|
||||
}, {
|
||||
value: "WLAN-BOX1",
|
||||
label: "WLAN-BOX1",
|
||||
}],
|
||||
options3: [{
|
||||
value: 'loT Lite网关',
|
||||
label: 'loT Lite网关'
|
||||
}, {
|
||||
value: 'MODBUS网关',
|
||||
label: 'MODBUS网关'
|
||||
}, {
|
||||
value: 'BACNET网关',
|
||||
label: 'BACNET网关'
|
||||
}, {
|
||||
value: 'OPC UA网关',
|
||||
label: 'OPC UA网关'
|
||||
}, {
|
||||
value: 'OPC DA网关',
|
||||
label: 'OPC DA网关'
|
||||
},
|
||||
{
|
||||
value: 'loT网关',
|
||||
label: 'loT网关'
|
||||
}],
|
||||
value: '',
|
||||
formdata: {
|
||||
wgpz_wgmc: "有线区网关1",
|
||||
wgpz_wgid: "LAN-BOX1",
|
||||
wgpz_wglx: "loT网关"
|
||||
},
|
||||
rules: {
|
||||
wgpz_wgmc: [
|
||||
{ required: true, message: '请选择网关名称', trigger: 'change' },
|
||||
],
|
||||
wgpz_wgid: [
|
||||
{ required: true, message: '请选择网关id', trigger: 'change' },
|
||||
],
|
||||
wgpz_wglx: [
|
||||
{ required: true, message: '请选择网关类型', trigger: 'change' }
|
||||
],
|
||||
},
|
||||
outerVisible: true,
|
||||
innerVisible: false,
|
||||
};
|
||||
},
|
||||
|
||||
mounted() {
|
||||
|
||||
},
|
||||
|
||||
methods: {
|
||||
async innerConfirm() {
|
||||
this.outerVisible = false;
|
||||
this.innerVisible = false;
|
||||
let datas = sessionStorage.getItem("answer");
|
||||
console.log(JSON.parse(datas));
|
||||
this.formdata = {...this.formdata,...JSON.parse(datas)};
|
||||
console.log(this.formdata);
|
||||
let res = await SaveUserAnswer({
|
||||
mark:"DB-IotLite_yx",
|
||||
user_id:"USER202307301109254198",
|
||||
mark_value:JSON.stringify(this.formdata),
|
||||
})
|
||||
console.log(JSON.parse(res.data.data.mark_value));
|
||||
sessionStorage.setItem('answer',JSON.stringify(this.formdata))
|
||||
this.$router.replace("/channelconfig");
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.data_acquire {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.inner_content {
|
||||
margin-left: 30px;
|
||||
width: 280px;
|
||||
height: 40px;
|
||||
// color: rgba(255, 255, 255, 0);
|
||||
font-size: 14px;
|
||||
text-align: left;
|
||||
font-family: SourceHanSansSC-regular;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,154 @@
|
|||
<template>
|
||||
<div>
|
||||
<!-- <div class="data_acquire">
|
||||
<el-button type="info" plain @click="outerVisible = true">数据采集设备</el-button>
|
||||
</div> -->
|
||||
<div>
|
||||
<el-dialog title="新建网关" :visible.sync="outerVisible" width="382px">
|
||||
<el-form :model="formdata" :rules="rules" ref="ruleForm" label-width="85px" class="demo-ruleForm">
|
||||
<el-form-item label="网关名称:" prop="wgpz_wgmc">
|
||||
<el-select v-model="formdata.wgpz_wgmc" placeholder="有线区网关1" style="width: 200px;">
|
||||
<el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="网关ID:" prop="wgpz_wgid">
|
||||
<el-select v-model="formdata.wgpz_wgid" placeholder="LAN-BOX1" style="width: 200px;">
|
||||
<el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="网关类型:" prop="wgpz_wglx">
|
||||
<el-select v-model="formdata.wgpz_wglx" placeholder="lot Life 网关" style="width: 200px;">
|
||||
<el-option v-for="item in options3" :key="item.value" :label="item.label" :value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<el-dialog width="382px" title="系统提示" :visible.sync="innerVisible" append-to-body>
|
||||
<p class="inner_content">请确认选择的网关类型与网关实体一致:否则该工程无法下载至实体网关</p>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="innerConfirm">确定</el-button>
|
||||
<el-button @click="innerVisible = false">取 消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
<div slot="footer" class="dialog-footer-outer">
|
||||
<el-button type="primary" @click="innerVisible = true">保存</el-button>
|
||||
<el-button @click="outerVisible = false">取 消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { SaveUserAnswer, GetUserAnswer } from "@/api/user";
|
||||
export default {
|
||||
name: 'TestDataAcquisition',
|
||||
|
||||
data() {
|
||||
return {
|
||||
input1: "",
|
||||
options1: [{
|
||||
value: "有线区网关1",
|
||||
label: "有线区网关1",
|
||||
}, {
|
||||
value: "无线区网关1",
|
||||
label: "无线区网关1",
|
||||
}],
|
||||
options2: [{
|
||||
value: "LAN-BOX1",
|
||||
label: "LAN-BOX1",
|
||||
}, {
|
||||
value: "WLAN-BOX1",
|
||||
label: "WLAN-BOX1",
|
||||
}],
|
||||
options3: [{
|
||||
value: 'loT Lite网关',
|
||||
label: 'loT Lite网关'
|
||||
}, {
|
||||
value: 'MODBUS网关',
|
||||
label: 'MODBUS网关'
|
||||
}, {
|
||||
value: 'BACNET网关',
|
||||
label: 'BACNET网关'
|
||||
}, {
|
||||
value: 'OPC UA网关',
|
||||
label: 'OPC UA网关'
|
||||
}, {
|
||||
value: 'OPC DA网关',
|
||||
label: 'OPC DA网关'
|
||||
},
|
||||
{
|
||||
value: 'loT网关',
|
||||
label: 'loT网关'
|
||||
}],
|
||||
value: '',
|
||||
formdata: {
|
||||
wgpz_wgmc: "有线区网关1",
|
||||
wgpz_wgid: "LAN-BOX1",
|
||||
wgpz_wglx: "loT网关"
|
||||
},
|
||||
rules: {
|
||||
wgpz_wgmc: [
|
||||
{ required: true, message: '请选择网关名称', trigger: 'change' },
|
||||
],
|
||||
wgpz_wgid: [
|
||||
{ required: true, message: '请选择网关id', trigger: 'change' },
|
||||
],
|
||||
wgpz_wglx: [
|
||||
{ required: true, message: '请选择网关类型', trigger: 'change' }
|
||||
],
|
||||
},
|
||||
outerVisible: true,
|
||||
innerVisible: false,
|
||||
};
|
||||
},
|
||||
|
||||
mounted() {
|
||||
|
||||
},
|
||||
|
||||
methods: {
|
||||
async innerConfirm() {
|
||||
this.outerVisible = false;
|
||||
this.innerVisible = false;
|
||||
let datas = sessionStorage.getItem("answer");
|
||||
console.log(JSON.parse(datas));
|
||||
this.formdata = { ...this.formdata, ...JSON.parse(datas) };
|
||||
console.log(this.formdata);
|
||||
let res = await SaveUserAnswer({
|
||||
mark: "DB-IotLite_yx",
|
||||
user_id: "USER202307301109254198",
|
||||
mark_value: JSON.stringify(this.formdata),
|
||||
})
|
||||
console.log(JSON.parse(res.data.data.mark_value));
|
||||
sessionStorage.setItem('answer', JSON.stringify(this.formdata))
|
||||
this.$router.replace("/channelconfig");
|
||||
}
|
||||
},
|
||||
created() {
|
||||
let res2 = await GetUserAnswer({
|
||||
mark: "DB-IotLite_wx",
|
||||
user_id: "USER202307301109254198",
|
||||
});
|
||||
console.log(res2);
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.data_acquire {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.inner_content {
|
||||
margin-left: 30px;
|
||||
width: 280px;
|
||||
height: 40px;
|
||||
// color: rgba(255, 255, 255, 0);
|
||||
font-size: 14px;
|
||||
text-align: left;
|
||||
font-family: SourceHanSansSC-regular;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,154 @@
|
|||
<template>
|
||||
<div>
|
||||
<!-- <div class="data_acquire">
|
||||
<el-button type="info" plain @click="outerVisible = true">数据采集设备</el-button>
|
||||
</div> -->
|
||||
<div>
|
||||
<el-dialog title="新建网关" :visible.sync="outerVisible" width="382px">
|
||||
<el-form :model="formdata" :rules="rules" ref="ruleForm" label-width="85px" class="demo-ruleForm">
|
||||
<el-form-item label="网关名称:" prop="wgpz_wgmc">
|
||||
<el-select v-model="formdata.wgpz_wgmc" placeholder="有线区网关1" style="width: 200px;">
|
||||
<el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="网关ID:" prop="wgpz_wgid">
|
||||
<el-select v-model="formdata.wgpz_wgid" placeholder="LAN-BOX1" style="width: 200px;">
|
||||
<el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="网关类型:" prop="wgpz_wglx">
|
||||
<el-select v-model="formdata.wgpz_wglx" placeholder="lot Life 网关" style="width: 200px;">
|
||||
<el-option v-for="item in options3" :key="item.value" :label="item.label" :value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<el-dialog width="382px" title="系统提示" :visible.sync="innerVisible" append-to-body>
|
||||
<p class="inner_content">请确认选择的网关类型与网关实体一致:否则该工程无法下载至实体网关</p>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="innerConfirm">确定</el-button>
|
||||
<el-button @click="innerVisible = false">取 消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
<div slot="footer" class="dialog-footer-outer">
|
||||
<el-button type="primary" @click="innerVisible = true">保存</el-button>
|
||||
<el-button @click="outerVisible = false">取 消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { SaveUserAnswer, GetUserAnswer } from "@/api/user";
|
||||
export default {
|
||||
name: 'TestDataAcquisition',
|
||||
|
||||
data() {
|
||||
return {
|
||||
input1: "",
|
||||
options1: [{
|
||||
value: "有线区网关1",
|
||||
label: "有线区网关1",
|
||||
}, {
|
||||
value: "无线区网关1",
|
||||
label: "无线区网关1",
|
||||
}],
|
||||
options2: [{
|
||||
value: "LAN-BOX1",
|
||||
label: "LAN-BOX1",
|
||||
}, {
|
||||
value: "WLAN-BOX1",
|
||||
label: "WLAN-BOX1",
|
||||
}],
|
||||
options3: [{
|
||||
value: 'loT Lite网关',
|
||||
label: 'loT Lite网关'
|
||||
}, {
|
||||
value: 'MODBUS网关',
|
||||
label: 'MODBUS网关'
|
||||
}, {
|
||||
value: 'BACNET网关',
|
||||
label: 'BACNET网关'
|
||||
}, {
|
||||
value: 'OPC UA网关',
|
||||
label: 'OPC UA网关'
|
||||
}, {
|
||||
value: 'OPC DA网关',
|
||||
label: 'OPC DA网关'
|
||||
},
|
||||
{
|
||||
value: 'loT网关',
|
||||
label: 'loT网关'
|
||||
}],
|
||||
value: '',
|
||||
formdata: {
|
||||
wgpz_wgmc: "有线区网关1",
|
||||
wgpz_wgid: "LAN-BOX1",
|
||||
wgpz_wglx: "loT网关"
|
||||
},
|
||||
rules: {
|
||||
wgpz_wgmc: [
|
||||
{ required: true, message: '请选择网关名称', trigger: 'change' },
|
||||
],
|
||||
wgpz_wgid: [
|
||||
{ required: true, message: '请选择网关id', trigger: 'change' },
|
||||
],
|
||||
wgpz_wglx: [
|
||||
{ required: true, message: '请选择网关类型', trigger: 'change' }
|
||||
],
|
||||
},
|
||||
outerVisible: true,
|
||||
innerVisible: false,
|
||||
};
|
||||
},
|
||||
|
||||
mounted() {
|
||||
|
||||
},
|
||||
|
||||
methods: {
|
||||
async innerConfirm() {
|
||||
this.outerVisible = false;
|
||||
this.innerVisible = false;
|
||||
let datas = sessionStorage.getItem("answer");
|
||||
console.log(JSON.parse(datas));
|
||||
this.formdata = { ...this.formdata, ...JSON.parse(datas) };
|
||||
console.log(this.formdata);
|
||||
let res = await SaveUserAnswer({
|
||||
mark: "DB-IotLite_yx",
|
||||
user_id: "USER202307301109254198",
|
||||
mark_value: JSON.stringify(this.formdata),
|
||||
})
|
||||
console.log(JSON.parse(res.data.data.mark_value));
|
||||
sessionStorage.setItem('answer', JSON.stringify(this.formdata))
|
||||
this.$router.replace("/channelconfig");
|
||||
}
|
||||
},
|
||||
async created() {
|
||||
let res2 = await GetUserAnswer({
|
||||
mark: "DB-IotLite_wx",
|
||||
user_id: "USER202307301109254198",
|
||||
});
|
||||
console.log(res2);
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.data_acquire {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.inner_content {
|
||||
margin-left: 30px;
|
||||
width: 280px;
|
||||
height: 40px;
|
||||
// color: rgba(255, 255, 255, 0);
|
||||
font-size: 14px;
|
||||
text-align: left;
|
||||
font-family: SourceHanSansSC-regular;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,158 @@
|
|||
<template>
|
||||
<div>
|
||||
<!-- <div class="data_acquire">
|
||||
<el-button type="info" plain @click="outerVisible = true">数据采集设备</el-button>
|
||||
</div> -->
|
||||
<div>
|
||||
<el-dialog title="新建网关" :visible.sync="outerVisible" width="382px">
|
||||
<el-form :model="formdata" :rules="rules" ref="ruleForm" label-width="85px" class="demo-ruleForm">
|
||||
<el-form-item label="网关名称:" prop="wgpz_wgmc">
|
||||
<el-select v-model="formdata.wgpz_wgmc" placeholder="有线区网关1" style="width: 200px;">
|
||||
<el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="网关ID:" prop="wgpz_wgid">
|
||||
<el-select v-model="formdata.wgpz_wgid" placeholder="LAN-BOX1" style="width: 200px;">
|
||||
<el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="网关类型:" prop="wgpz_wglx">
|
||||
<el-select v-model="formdata.wgpz_wglx" placeholder="lot Life 网关" style="width: 200px;">
|
||||
<el-option v-for="item in options3" :key="item.value" :label="item.label" :value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<el-dialog width="382px" title="系统提示" :visible.sync="innerVisible" append-to-body>
|
||||
<p class="inner_content">请确认选择的网关类型与网关实体一致:否则该工程无法下载至实体网关</p>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="innerConfirm">确定</el-button>
|
||||
<el-button @click="innerVisible = false">取 消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
<div slot="footer" class="dialog-footer-outer">
|
||||
<el-button type="primary" @click="innerVisible = true">保存</el-button>
|
||||
<el-button @click="outerVisible = false">取 消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { SaveUserAnswer, GetUserAnswer } from "@/api/user";
|
||||
export default {
|
||||
name: 'TestDataAcquisition',
|
||||
|
||||
data() {
|
||||
return {
|
||||
options1: [{
|
||||
value: "有线区网关1",
|
||||
label: "有线区网关1",
|
||||
}, {
|
||||
value: "无线区网关1",
|
||||
label: "无线区网关1",
|
||||
}],
|
||||
options2: [{
|
||||
value: "LAN-BOX1",
|
||||
label: "LAN-BOX1",
|
||||
}, {
|
||||
value: "WLAN-BOX1",
|
||||
label: "WLAN-BOX1",
|
||||
}],
|
||||
options3: [{
|
||||
value: 'loT Lite网关',
|
||||
label: 'loT Lite网关'
|
||||
}, {
|
||||
value: 'MODBUS网关',
|
||||
label: 'MODBUS网关'
|
||||
}, {
|
||||
value: 'BACNET网关',
|
||||
label: 'BACNET网关'
|
||||
}, {
|
||||
value: 'OPC UA网关',
|
||||
label: 'OPC UA网关'
|
||||
}, {
|
||||
value: 'OPC DA网关',
|
||||
label: 'OPC DA网关'
|
||||
},
|
||||
{
|
||||
value: 'loT网关',
|
||||
label: 'loT网关'
|
||||
}],
|
||||
value: '',
|
||||
formdata: {
|
||||
wgpz_wgmc: "有线区网关1",
|
||||
wgpz_wgid: "LAN-BOX1",
|
||||
wgpz_wglx: "loT网关"
|
||||
},
|
||||
rules: {
|
||||
wgpz_wgmc: [
|
||||
{ required: true, message: '请选择网关名称', trigger: 'change' },
|
||||
],
|
||||
wgpz_wgid: [
|
||||
{ required: true, message: '请选择网关id', trigger: 'change' },
|
||||
],
|
||||
wgpz_wglx: [
|
||||
{ required: true, message: '请选择网关类型', trigger: 'change' }
|
||||
],
|
||||
},
|
||||
outerVisible: true,
|
||||
innerVisible: false,
|
||||
};
|
||||
},
|
||||
|
||||
mounted() {
|
||||
|
||||
},
|
||||
|
||||
methods: {
|
||||
async innerConfirm() {
|
||||
this.outerVisible = false;
|
||||
this.innerVisible = false;
|
||||
let datas = sessionStorage.getItem("answer");
|
||||
console.log(JSON.parse(datas));
|
||||
this.formdata = { ...this.formdata, ...JSON.parse(datas) };
|
||||
console.log(this.formdata);
|
||||
let res = await SaveUserAnswer({
|
||||
mark: "DB-IotLite_yx",
|
||||
user_id: "USER202307301109254198",
|
||||
mark_value: JSON.stringify(this.formdata),
|
||||
})
|
||||
console.log(JSON.parse(res.data.data.mark_value));
|
||||
sessionStorage.setItem('answer', JSON.stringify(this.formdata))
|
||||
this.$router.replace("/channelconfig");
|
||||
}
|
||||
},
|
||||
async created() {
|
||||
let res2 = await GetUserAnswer({
|
||||
mark: "DB-IotLite_wx",
|
||||
user_id: "USER202307301109254198",
|
||||
});
|
||||
console.log(res2);
|
||||
let res3 = JSON.parse(res2.data.data.mark_value);
|
||||
console.log(res3);
|
||||
this.formdata.wgpz_wgid=res3.wgpz_wgid;
|
||||
this.formdata.wgpz_wgmc=res3.wgpz_wgmc;
|
||||
this.formdata.wgpz_wglx=res3.wgpz_wglx;
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.data_acquire {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.inner_content {
|
||||
margin-left: 30px;
|
||||
width: 280px;
|
||||
height: 40px;
|
||||
// color: rgba(255, 255, 255, 0);
|
||||
font-size: 14px;
|
||||
text-align: left;
|
||||
font-family: SourceHanSansSC-regular;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,158 @@
|
|||
<template>
|
||||
<div>
|
||||
<!-- <div class="data_acquire">
|
||||
<el-button type="info" plain @click="outerVisible = true">数据采集设备</el-button>
|
||||
</div> -->
|
||||
<div>
|
||||
<el-dialog title="新建网关" :visible.sync="outerVisible" width="382px">
|
||||
<el-form :model="formdata" :rules="rules" ref="ruleForm" label-width="85px" class="demo-ruleForm">
|
||||
<el-form-item label="网关名称:" prop="wgpz_wgmc">
|
||||
<el-select v-model="formdata.wgpz_wgmc" placeholder="有线区网关1" style="width: 200px;">
|
||||
<el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="网关ID:" prop="wgpz_wgid">
|
||||
<el-select v-model="formdata.wgpz_wgid" placeholder="LAN-BOX1" style="width: 200px;">
|
||||
<el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="网关类型:" prop="wgpz_wglx">
|
||||
<el-select v-model="formdata.wgpz_wglx" placeholder="lot Life 网关" style="width: 200px;">
|
||||
<el-option v-for="item in options3" :key="item.value" :label="item.label" :value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<el-dialog width="382px" title="系统提示" :visible.sync="innerVisible" append-to-body>
|
||||
<p class="inner_content">请确认选择的网关类型与网关实体一致:否则该工程无法下载至实体网关</p>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="innerConfirm">确定</el-button>
|
||||
<el-button @click="innerVisible = false">取 消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
<div slot="footer" class="dialog-footer-outer">
|
||||
<el-button type="primary" @click="innerVisible = true">保存</el-button>
|
||||
<el-button @click="outerVisible = false">取 消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { SaveUserAnswer, GetUserAnswer } from "@/api/user";
|
||||
export default {
|
||||
name: 'TestDataAcquisition',
|
||||
|
||||
data() {
|
||||
return {
|
||||
options1: [{
|
||||
value: "有线区网关1",
|
||||
label: "有线区网关1",
|
||||
}, {
|
||||
value: "无线区网关1",
|
||||
label: "无线区网关1",
|
||||
}],
|
||||
options2: [{
|
||||
value: "LAN-BOX1",
|
||||
label: "LAN-BOX1",
|
||||
}, {
|
||||
value: "WLAN-BOX1",
|
||||
label: "WLAN-BOX1",
|
||||
}],
|
||||
options3: [{
|
||||
value: 'loT Lite网关',
|
||||
label: 'loT Lite网关'
|
||||
}, {
|
||||
value: 'MODBUS网关',
|
||||
label: 'MODBUS网关'
|
||||
}, {
|
||||
value: 'BACNET网关',
|
||||
label: 'BACNET网关'
|
||||
}, {
|
||||
value: 'OPC UA网关',
|
||||
label: 'OPC UA网关'
|
||||
}, {
|
||||
value: 'OPC DA网关',
|
||||
label: 'OPC DA网关'
|
||||
},
|
||||
{
|
||||
value: 'loT网关',
|
||||
label: 'loT网关'
|
||||
}],
|
||||
value: '',
|
||||
formdata: {
|
||||
wgpz_wgmc: "有线区网关1",
|
||||
wgpz_wgid: "LAN-BOX1",
|
||||
wgpz_wglx: "loT网关"
|
||||
},
|
||||
rules: {
|
||||
wgpz_wgmc: [
|
||||
{ required: true, message: '请选择网关名称', trigger: 'change' },
|
||||
],
|
||||
wgpz_wgid: [
|
||||
{ required: true, message: '请选择网关id', trigger: 'change' },
|
||||
],
|
||||
wgpz_wglx: [
|
||||
{ required: true, message: '请选择网关类型', trigger: 'change' }
|
||||
],
|
||||
},
|
||||
outerVisible: true,
|
||||
innerVisible: false,
|
||||
};
|
||||
},
|
||||
|
||||
mounted() {
|
||||
|
||||
},
|
||||
|
||||
methods: {
|
||||
async innerConfirm() {
|
||||
this.outerVisible = false;
|
||||
this.innerVisible = false;
|
||||
let datas = sessionStorage.getItem("answer");
|
||||
console.log(JSON.parse(datas));
|
||||
this.formdata = { ...this.formdata, ...JSON.parse(datas) };
|
||||
console.log(this.formdata);
|
||||
let res = await SaveUserAnswer({
|
||||
mark: "DB-IotLite_yx",
|
||||
user_id: "USER202307301109254198",
|
||||
mark_value: JSON.stringify(this.formdata),
|
||||
})
|
||||
console.log(JSON.parse(res.data.data.mark_value));
|
||||
sessionStorage.setItem('answer', JSON.stringify(this.formdata))
|
||||
this.$router.replace("/channelconfig");
|
||||
}
|
||||
},
|
||||
async created() {
|
||||
let res2 = await GetUserAnswer({
|
||||
mark: "DB-IotLite_wx",
|
||||
user_id: "USER202307301109254198",
|
||||
});
|
||||
console.log(res2);
|
||||
let res3 = JSON.parse(res2.data.data.mark_value);
|
||||
console.log(res3);
|
||||
this.formdata.wgpz_wgid = res3.wgpz_wgid;
|
||||
this.formdata.wgpz_wgmc = res3.wgpz_wgmc;
|
||||
this.formdata.wgpz_wglx = res3.wgpz_wglx;
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.data_acquire {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.inner_content {
|
||||
margin-left: 30px;
|
||||
width: 280px;
|
||||
height: 40px;
|
||||
// color: rgba(255, 255, 255, 0);
|
||||
font-size: 14px;
|
||||
text-align: left;
|
||||
font-family: SourceHanSansSC-regular;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,159 @@
|
|||
<template>
|
||||
<div>
|
||||
<!-- <div class="data_acquire">
|
||||
<el-button type="info" plain @click="outerVisible = true">数据采集设备</el-button>
|
||||
</div> -->
|
||||
<div>
|
||||
<el-dialog title="新建网关" :visible.sync="outerVisible" width="382px">
|
||||
<el-form :model="formdata" :rules="rules" ref="ruleForm" label-width="85px" class="demo-ruleForm">
|
||||
<el-form-item label="网关名称:" prop="wgpz_wgmc">
|
||||
<el-select v-model="formdata.wgpz_wgmc" placeholder="有线区网关1" style="width: 200px;">
|
||||
<el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="网关ID:" prop="wgpz_wgid">
|
||||
<el-select v-model="formdata.wgpz_wgid" placeholder="LAN-BOX1" style="width: 200px;">
|
||||
<el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="网关类型:" prop="wgpz_wglx">
|
||||
<el-select v-model="formdata.wgpz_wglx" placeholder="lot Life 网关" style="width: 200px;">
|
||||
<el-option v-for="item in options3" :key="item.value" :label="item.label" :value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<el-dialog width="382px" title="系统提示" :visible.sync="innerVisible" append-to-body>
|
||||
<p class="inner_content">请确认选择的网关类型与网关实体一致:否则该工程无法下载至实体网关</p>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="innerConfirm">确定</el-button>
|
||||
<el-button @click="innerVisible = false">取 消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
<div slot="footer" class="dialog-footer-outer">
|
||||
<el-button type="primary" @click="innerVisible = true">保存</el-button>
|
||||
<el-button @click="outerVisible = false">取 消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { SaveUserAnswer, GetUserAnswer } from "@/api/user";
|
||||
export default {
|
||||
name: 'TestDataAcquisition',
|
||||
|
||||
data() {
|
||||
return {
|
||||
options1: [{
|
||||
value: "有线区网关1",
|
||||
label: "有线区网关1",
|
||||
}, {
|
||||
value: "无线区网关1",
|
||||
label: "无线区网关1",
|
||||
}],
|
||||
options2: [{
|
||||
value: "LAN-BOX1",
|
||||
label: "LAN-BOX1",
|
||||
}, {
|
||||
value: "WLAN-BOX1",
|
||||
label: "WLAN-BOX1",
|
||||
}],
|
||||
options3: [{
|
||||
value: 'loT Lite网关',
|
||||
label: 'loT Lite网关'
|
||||
}, {
|
||||
value: 'MODBUS网关',
|
||||
label: 'MODBUS网关'
|
||||
}, {
|
||||
value: 'BACNET网关',
|
||||
label: 'BACNET网关'
|
||||
}, {
|
||||
value: 'OPC UA网关',
|
||||
label: 'OPC UA网关'
|
||||
}, {
|
||||
value: 'OPC DA网关',
|
||||
label: 'OPC DA网关'
|
||||
},
|
||||
{
|
||||
value: 'loT网关',
|
||||
label: 'loT网关'
|
||||
}],
|
||||
value: '',
|
||||
formdata: {
|
||||
wgpz_wgmc: "有线区网关1",
|
||||
wgpz_wgid: "LAN-BOX1",
|
||||
wgpz_wglx: "loT网关"
|
||||
},
|
||||
rules: {
|
||||
wgpz_wgmc: [
|
||||
{ required: true, message: '请选择网关名称', trigger: 'change' },
|
||||
],
|
||||
wgpz_wgid: [
|
||||
{ required: true, message: '请选择网关id', trigger: 'change' },
|
||||
],
|
||||
wgpz_wglx: [
|
||||
{ required: true, message: '请选择网关类型', trigger: 'change' }
|
||||
],
|
||||
},
|
||||
outerVisible: true,
|
||||
innerVisible: false,
|
||||
};
|
||||
},
|
||||
|
||||
mounted() {
|
||||
|
||||
},
|
||||
|
||||
methods: {
|
||||
async innerConfirm() {
|
||||
this.outerVisible = false;
|
||||
this.innerVisible = false;
|
||||
let datas = sessionStorage.getItem("answer");
|
||||
console.log(JSON.parse(datas));
|
||||
this.formdata = { ...this.formdata, ...JSON.parse(datas) };
|
||||
console.log(this.formdata);
|
||||
let res = await SaveUserAnswer({
|
||||
mark: "DB-IotLite_yx",
|
||||
user_id: "USER202307301109254198",
|
||||
mark_value: JSON.stringify(this.formdata),
|
||||
})
|
||||
console.log(JSON.parse(res.data.data.mark_value));
|
||||
sessionStorage.setItem('answer', JSON.stringify(this.formdata))
|
||||
this.$router.replace("/channelconfig");
|
||||
}
|
||||
},
|
||||
async created() {
|
||||
let res2 = await GetUserAnswer({
|
||||
mark: "DB-IotLite_wx",
|
||||
user_id: "USER202307301109254198",
|
||||
});
|
||||
console.log(res2);
|
||||
let res3 = JSON.parse(res2.data.data.mark_value);
|
||||
console.log(res3);
|
||||
this.formdata.wgpz_wgid = res3.wgpz_wgid;
|
||||
console.log(this.formdata.wgpz_wgid);
|
||||
this.formdata.wgpz_wgmc = res3.wgpz_wgmc;
|
||||
this.formdata.wgpz_wglx = res3.wgpz_wglx;
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.data_acquire {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.inner_content {
|
||||
margin-left: 30px;
|
||||
width: 280px;
|
||||
height: 40px;
|
||||
// color: rgba(255, 255, 255, 0);
|
||||
font-size: 14px;
|
||||
text-align: left;
|
||||
font-family: SourceHanSansSC-regular;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,159 @@
|
|||
<template>
|
||||
<div>
|
||||
<!-- <div class="data_acquire">
|
||||
<el-button type="info" plain @click="outerVisible = true">数据采集设备</el-button>
|
||||
</div> -->
|
||||
<div>
|
||||
<el-dialog title="新建网关" :visible.sync="outerVisible" width="382px">
|
||||
<el-form :model="formdata" :rules="rules" ref="ruleForm" label-width="85px" class="demo-ruleForm">
|
||||
<el-form-item label="网关名称:" prop="wgpz_wgmc">
|
||||
<el-select v-model="formdata.wgpz_wgmc" placeholder="有线区网关1" style="width: 200px;">
|
||||
<el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="网关ID:" prop="wgpz_wgid">
|
||||
<el-select v-model="formdata.wgpz_wgid" placeholder="LAN-BOX1" style="width: 200px;">
|
||||
<el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="网关类型:" prop="wgpz_wglx">
|
||||
<el-select v-model="formdata.wgpz_wglx" placeholder="lot Life 网关" style="width: 200px;">
|
||||
<el-option v-for="item in options3" :key="item.value" :label="item.label" :value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<el-dialog width="382px" title="系统提示" :visible.sync="innerVisible" append-to-body>
|
||||
<p class="inner_content">请确认选择的网关类型与网关实体一致:否则该工程无法下载至实体网关</p>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="innerConfirm">确定</el-button>
|
||||
<el-button @click="innerVisible = false">取 消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
<div slot="footer" class="dialog-footer-outer">
|
||||
<el-button type="primary" @click="innerVisible = true">保存</el-button>
|
||||
<el-button @click="outerVisible = false">取 消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { SaveUserAnswer, GetUserAnswer } from "@/api/user";
|
||||
export default {
|
||||
name: 'TestDataAcquisition',
|
||||
|
||||
data() {
|
||||
return {
|
||||
options1: [{
|
||||
value: "有线区网关1",
|
||||
label: "有线区网关1",
|
||||
}, {
|
||||
value: "无线区网关1",
|
||||
label: "无线区网关1",
|
||||
}],
|
||||
options2: [{
|
||||
value: "LAN-BOX1",
|
||||
label: "LAN-BOX1",
|
||||
}, {
|
||||
value: "WLAN-BOX1",
|
||||
label: "WLAN-BOX1",
|
||||
}],
|
||||
options3: [{
|
||||
value: 'loT Lite网关',
|
||||
label: 'loT Lite网关'
|
||||
}, {
|
||||
value: 'MODBUS网关',
|
||||
label: 'MODBUS网关'
|
||||
}, {
|
||||
value: 'BACNET网关',
|
||||
label: 'BACNET网关'
|
||||
}, {
|
||||
value: 'OPC UA网关',
|
||||
label: 'OPC UA网关'
|
||||
}, {
|
||||
value: 'OPC DA网关',
|
||||
label: 'OPC DA网关'
|
||||
},
|
||||
{
|
||||
value: 'loT网关',
|
||||
label: 'loT网关'
|
||||
}],
|
||||
value: '',
|
||||
formdata: {
|
||||
wgpz_wgmc: "有线区网关1",
|
||||
wgpz_wgid: "LAN-BOX1",
|
||||
wgpz_wglx: "loT网关"
|
||||
},
|
||||
rules: {
|
||||
wgpz_wgmc: [
|
||||
{ required: true, message: '请选择网关名称', trigger: 'change' },
|
||||
],
|
||||
wgpz_wgid: [
|
||||
{ required: true, message: '请选择网关id', trigger: 'change' },
|
||||
],
|
||||
wgpz_wglx: [
|
||||
{ required: true, message: '请选择网关类型', trigger: 'change' }
|
||||
],
|
||||
},
|
||||
outerVisible: true,
|
||||
innerVisible: false,
|
||||
};
|
||||
},
|
||||
|
||||
mounted() {
|
||||
|
||||
},
|
||||
|
||||
methods: {
|
||||
async innerConfirm() {
|
||||
this.outerVisible = false;
|
||||
this.innerVisible = false;
|
||||
let datas = sessionStorage.getItem("answer");
|
||||
console.log(JSON.parse(datas));
|
||||
this.formdata = { ...this.formdata, ...JSON.parse(datas) };
|
||||
console.log(this.formdata);
|
||||
let res = await SaveUserAnswer({
|
||||
mark: "DB-IotLite_yx",
|
||||
user_id: "USER202307301109254198",
|
||||
mark_value: JSON.stringify(this.formdata),
|
||||
})
|
||||
console.log(JSON.parse(res.data.data.mark_value));
|
||||
sessionStorage.setItem('answer', JSON.stringify(this.formdata))
|
||||
this.$router.replace("/channelconfig");
|
||||
}
|
||||
},
|
||||
async created() {
|
||||
let res2 = await GetUserAnswer({
|
||||
mark: "DB-IotLite_wx",
|
||||
user_id: "USER202307301109254198",
|
||||
});
|
||||
console.log(res2);
|
||||
let res3 = JSON.parse(res2.data.data.mark_value);
|
||||
console.log(res3);
|
||||
formdata.wgpz_wgid = res3.wgpz_wgid;
|
||||
console.log(formdata.wgpz_wgid);
|
||||
formdata.wgpz_wgmc = res3.wgpz_wgmc;
|
||||
formdata.wgpz_wglx = res3.wgpz_wglx;
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.data_acquire {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.inner_content {
|
||||
margin-left: 30px;
|
||||
width: 280px;
|
||||
height: 40px;
|
||||
// color: rgba(255, 255, 255, 0);
|
||||
font-size: 14px;
|
||||
text-align: left;
|
||||
font-family: SourceHanSansSC-regular;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,159 @@
|
|||
<template>
|
||||
<div>
|
||||
<!-- <div class="data_acquire">
|
||||
<el-button type="info" plain @click="outerVisible = true">数据采集设备</el-button>
|
||||
</div> -->
|
||||
<div>
|
||||
<el-dialog title="新建网关" :visible.sync="outerVisible" width="382px">
|
||||
<el-form :model="formdata" :rules="rules" ref="ruleForm" label-width="85px" class="demo-ruleForm">
|
||||
<el-form-item label="网关名称:" prop="wgpz_wgmc">
|
||||
<el-select v-model="formdata.wgpz_wgmc" placeholder="有线区网关1" style="width: 200px;">
|
||||
<el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="网关ID:" prop="wgpz_wgid">
|
||||
<el-select v-model="formdata.wgpz_wgid" placeholder="LAN-BOX1" style="width: 200px;">
|
||||
<el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="网关类型:" prop="wgpz_wglx">
|
||||
<el-select v-model="formdata.wgpz_wglx" placeholder="lot Life 网关" style="width: 200px;">
|
||||
<el-option v-for="item in options3" :key="item.value" :label="item.label" :value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<el-dialog width="382px" title="系统提示" :visible.sync="innerVisible" append-to-body>
|
||||
<p class="inner_content">请确认选择的网关类型与网关实体一致:否则该工程无法下载至实体网关</p>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="innerConfirm">确定</el-button>
|
||||
<el-button @click="innerVisible = false">取 消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
<div slot="footer" class="dialog-footer-outer">
|
||||
<el-button type="primary" @click="innerVisible = true">保存</el-button>
|
||||
<el-button @click="outerVisible = false">取 消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { SaveUserAnswer, GetUserAnswer } from "@/api/user";
|
||||
export default {
|
||||
name: 'TestDataAcquisition',
|
||||
|
||||
data() {
|
||||
return {
|
||||
options1: [{
|
||||
value: "有线区网关1",
|
||||
label: "有线区网关1",
|
||||
}, {
|
||||
value: "无线区网关1",
|
||||
label: "无线区网关1",
|
||||
}],
|
||||
options2: [{
|
||||
value: "LAN-BOX1",
|
||||
label: "LAN-BOX1",
|
||||
}, {
|
||||
value: "WLAN-BOX1",
|
||||
label: "WLAN-BOX1",
|
||||
}],
|
||||
options3: [{
|
||||
value: 'loT Lite网关',
|
||||
label: 'loT Lite网关'
|
||||
}, {
|
||||
value: 'MODBUS网关',
|
||||
label: 'MODBUS网关'
|
||||
}, {
|
||||
value: 'BACNET网关',
|
||||
label: 'BACNET网关'
|
||||
}, {
|
||||
value: 'OPC UA网关',
|
||||
label: 'OPC UA网关'
|
||||
}, {
|
||||
value: 'OPC DA网关',
|
||||
label: 'OPC DA网关'
|
||||
},
|
||||
{
|
||||
value: 'loT网关',
|
||||
label: 'loT网关'
|
||||
}],
|
||||
value: '',
|
||||
formdata: {
|
||||
wgpz_wgmc: "有线区网关1",
|
||||
wgpz_wgid: "LAN-BOX1",
|
||||
wgpz_wglx: "loT网关"
|
||||
},
|
||||
rules: {
|
||||
wgpz_wgmc: [
|
||||
{ required: true, message: '请选择网关名称', trigger: 'change' },
|
||||
],
|
||||
wgpz_wgid: [
|
||||
{ required: true, message: '请选择网关id', trigger: 'change' },
|
||||
],
|
||||
wgpz_wglx: [
|
||||
{ required: true, message: '请选择网关类型', trigger: 'change' }
|
||||
],
|
||||
},
|
||||
outerVisible: true,
|
||||
innerVisible: false,
|
||||
};
|
||||
},
|
||||
|
||||
mounted() {
|
||||
|
||||
},
|
||||
|
||||
methods: {
|
||||
async innerConfirm() {
|
||||
this.outerVisible = false;
|
||||
this.innerVisible = false;
|
||||
let datas = sessionStorage.getItem("answer");
|
||||
console.log(JSON.parse(datas));
|
||||
this.formdata = { ...this.formdata, ...JSON.parse(datas) };
|
||||
console.log(this.formdata);
|
||||
let res = await SaveUserAnswer({
|
||||
mark: "DB-IotLite_yx",
|
||||
user_id: "USER202307301109254198",
|
||||
mark_value: JSON.stringify(this.formdata),
|
||||
})
|
||||
console.log(JSON.parse(res.data.data.mark_value));
|
||||
sessionStorage.setItem('answer', JSON.stringify(this.formdata))
|
||||
this.$router.replace("/channelconfig");
|
||||
}
|
||||
},
|
||||
async created() {
|
||||
let res2 = await GetUserAnswer({
|
||||
mark: "DB-IotLite_wx",
|
||||
user_id: "USER202307301109254198",
|
||||
});
|
||||
console.log(res2);
|
||||
let res3 = JSON.parse(res2.data.data.mark_value);
|
||||
console.log(res3);
|
||||
formdata.wgpz_wgid = res3.wgpz_wgid;
|
||||
console.log(formdata.wgpz_wgid);
|
||||
formdata.wgpz_wgmc = res3.wgpz_wgmc;
|
||||
formdata.wgpz_wglx = res3.wgpz_wglx;
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.data_acquire {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.inner_content {
|
||||
margin-left: 30px;
|
||||
width: 280px;
|
||||
height: 40px;
|
||||
// color: rgba(255, 255, 255, 0);
|
||||
font-size: 14px;
|
||||
text-align: left;
|
||||
font-family: SourceHanSansSC-regular;
|
||||
}
|
||||
</style>
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue