This commit is contained in:
unknown 2023-11-09 21:18:15 +08:00
commit 2d601e8563
17 changed files with 3216 additions and 677 deletions

View File

@ -0,0 +1,905 @@
<!-- 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="trees"
node-key="id"
:props="defaultProps"
default-expand-all
@node-click="treeNodeClick"
ref="tree"
>
<!-- :render-content="renderContent" -->
<span class="custom-tree-node" slot-scope="{ node, data }">
<template v-if="data.editing == 1">
<el-button
type="mini"
v-if="flag"
style="right: 50px; top: 0; position: absolute; border: none"
@click.stop="done"
>完成</el-button
>
<el-button
type="mini"
style="right: 0; top: 0; position: absolute; border: none"
@click.stop="edit"
>编辑</el-button
>
<span v-if="!flag">{{ data.label }}</span>
<el-input v-else style="width: 150px" v-model="gateway"></el-input>
</template>
<template v-else>{{ data.label }}</template>
</span>
</el-tree>
</div>
<!-- </div> -->
<div class="pas_params" v-show="add_passage">
<div class="content" v-loading="loading">
<div class="con_left">
<h3 class="mqtt" style="margin-top: 20px; color: white">
MQTT Client
</h3>
<el-divider></el-divider>
<el-form
:model="formData"
:label-position="labelPosition"
:rules="rules"
ref="ruleForm"
>
<el-row>
<el-col :span="24">
<el-form-item>
<el-checkbox v-model="formData.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-form-item prop="mqtt_ip1">
<el-input
v-model="mqtt_ip1"
style="width: 43px; height: 30px"
maxlength="3"
>
</el-input>
</el-form-item>
</el-col>
<el-col :span="1">. </el-col>
<el-col :span="5">
<el-form-item prop="mqtt_ip2">
<el-input
v-model="mqtt_ip2"
style="width: 43px; height: 30px"
maxlength="3"
></el-input>
</el-form-item>
</el-col>
<el-col :span="1">.</el-col>
<el-col :span="5">
<el-form-item prop="mqtt_ip3">
<el-input
v-model="mqtt_ip3"
style="width: 43px; height: 30px"
maxlength="3"
></el-input>
</el-form-item>
</el-col>
<el-col :span="1">.</el-col>
<el-col :span="5">
<el-form-item prop="mqtt_ip4">
<el-input
v-model="mqtt_ip4"
style="width: 43px; height: 30px"
maxlength="3"
></el-input>
</el-form-item>
</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="formData.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="网关SN号:"
:label-width="formLabelWidth"
prop="mqtt_wgsn"
>
<el-input
v-model="formData.mqtt_wgsn"
placeholder=""
style="width: 200px; height: 30px"
></el-input>
</el-form-item>
</el-col>
</el-row>
<el-divider></el-divider>
<el-row class="theme">
<el-col :span="12">
<el-form-item
label="实时数据发布的主题"
style="display: block"
label-width="168px"
prop="mqtt_sssjfbzt"
>
<el-row>
<el-col :span="15">
<el-input
v-model="formData.mqtt_sssjfbzt"
placeholder=""
style="width: 200px"
></el-input>
</el-col>
<el-col :span="9">
<el-select
v-model="formData.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="formData.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="formData.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="formData.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="formData.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="saveClone"> </el-button>
<el-button @click="add_passage = false"> </el-button>
</div>
</el-form>
</div>
<div>
<div class="con_right">
<el-button type="info" plain @click="handleSelect">保存</el-button>
<!-- <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 { SaveUserAnswer, GetUserAnswer, GetTree, SendTree } from "@/api/user";
export default {
name: "CloneView",
data() {
return {
loading: false,
flag: false,
gateway: "",
trees: [],
user_id: "",
formData: {
mqtt_qiyong: true,
mqtt_ip: "",
mqtt_port: "",
mqtt_wgsn: "",
mqtt_sssjfbzt: "",
mqtt_qos: "qos1",
// mqtt_retained: false,
mqtt_scms: "周期上传",
mqtt_sczq: "",
mqtt_sjgl: ["采集成功"],
},
mqtt_ip1: "",
mqtt_ip2: "",
mqtt_ip3: "",
mqtt_ip4: "",
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" },
],
},
};
},
methods: {
//
edit(event) {
this.flag = true;
},
//
done(event) {
this.flag = false;
this.trees[0].label = this.gateway;
this.sendTree();
},
getParameter(data) {
this.user_id = data;
},
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
// }
// },
async handleSelect() {
let datas = sessionStorage.getItem("answer");
this.tableData = { ...JSON.parse(datas), ...this.tableData[0] };
let res = await SaveUserAnswer({
mark: "DB-IotLite_yx",
user_id: "USER202307301114011710",
mark_value: JSON.stringify(this.tableData),
});
console.log(res);
sessionStorage.setItem("answer", JSON.stringify(this.tableData));
},
Merge(value, value1, value2, value3, value4) {
value = value1 + "." + value2 + "." + value3 + "." + value4;
return value;
},
closeMenu(ev) {
console.log({ ev });
this.dialogVisible = false;
},
async saveClone() {
var obj = {
mqtt_qiyong: String(Number(this.formData.mqtt_qiyong)),
mqtt_ip:
this.mqtt_ip1 +
"." +
this.mqtt_ip2 +
"." +
this.mqtt_ip3 +
"." +
this.mqtt_ip4,
mqtt_port: this.formData.mqtt_port,
mqtt_wgsn: this.formData.mqtt_wgsn,
mqtt_sssjfbzt: this.formData.mqtt_sssjfbzt,
mqtt_qos: this.formData.mqtt_qos,
mqtt_scms: this.formData.mqtt_scms,
mqtt_sczq: this.formData.mqtt_sczq,
mqtt_sjgl: this.formData.mqtt_sjgl,
mqtt_cjd_sbmc: this.tableData[0].mqtt_cjd_sbmc,
mqtt_cjd_tagid: this.tableData[0].mqtt_cjd_tagid,
};
let datas = sessionStorage.getItem("DB-IotLite_yx");
// console.log("1231");
console.log(JSON.parse(datas));
datas = { ...JSON.parse(datas), ...obj };
// console.log(this.formData);
sessionStorage.setItem("DB-IotLite_yx", JSON.stringify(datas));
let res = await SaveUserAnswer({
mark: "DB-IotLite_yx",
user_id: "USER202307301114011710",
mark_value: JSON.stringify(datas),
});
if (res.status == 200) {
this.$message({
message: "保存成功",
type: "success",
});
}
console.log(res);
},
savePoint() {
this.choose_point = false;
this.isAdd = true;
this.$message({
message: "添加成功",
type: "success",
});
},
async GetUserAnswer() {
let answer = await GetUserAnswer({
mark: "DB-IotLite_yx",
user_id: "USER202307301114011710",
});
console.log(answer);
let obj = JSON.parse(answer.data.data.mark_value);
console.log(obj);
this.formData.mqtt_qiyong = Boolean(obj.mqtt_qiyong);
if (obj.mqtt_ip) {
this.formData.mqtt_qiyong = Boolean(Number(obj.mqtt_qiyong));
this.mqtt_ip1 = obj.mqtt_ip.split(".")[0];
this.mqtt_ip2 = obj.mqtt_ip.split(".")[1];
this.mqtt_ip3 = obj.mqtt_ip.split(".")[2];
this.mqtt_ip4 = obj.mqtt_ip.split(".")[3];
this.formData.mqtt_port = obj.mqtt_port;
this.formData.mqtt_sssjfbzt = obj.mqtt_sssjfbzt;
this.formData.mqtt_wgsn = obj.mqtt_wgsn;
this.formData.mqtt_qos = obj.mqtt_qos;
this.formData.mqtt_scms = obj.mqtt_scms;
this.formData.mqtt_sczq = obj.mqtt_sczq;
this.formData.mqtt_sjgl = obj.mqtt_sjgl;
this.tableData[0].mqtt_cjd_sbmc = obj.mqtt_cjd_sbmc;
this.tableData[0].mqtt_cjd_tagid = obj.mqtt_cjd_tagid;
}
},
async sendTree() {
let result = await SendTree({
user_id: "USER202307301114011710",
data: JSON.stringify(this.trees),
type: "1",
});
console.log(result);
},
async getTree() {
console.log("12341");
let res = await GetTree({ user_id: "USER202307301114011710", type: "1" });
console.log(res);
console.log(JSON.parse(res.data.data.data));
this.trees = JSON.parse(res.data.data.data);
},
},
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);
}
}
};
//
// trueDOMlistener
document.body.addEventListener("click", el.event, true);
},
unbind: function (el) {
//
document.body.removeEventListener("click", el.event, true);
},
},
},
created() {
this.getTree();
let that = this;
window.getParameter = that.getParameter;
this.loading = true;
this.GetUserAnswer();
this.loading = false;
},
};
</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-form-item {
margin-bottom: 0px;
}
.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-image: url(../assets/image/bg.png);
background-size: 100% 100%;
// 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;
}
.el-checkbox-group {
margin-top: -28px;
}
}
.con_left {
width: 708px;
height: 100%;
position: relative;
border-top: 1px solid rgba(187, 187, 187, 1);
border-right: 1px solid rgba(187, 187, 187, 1);
}
.con_right {
width: 480px;
.dialog-footer {
.el-button {
width: 80px;
height: 30px;
line-height: 0.5;
}
}
}
}
}
/deep/ .theme {
height: 80px !important;
display: flex;
align-items: flex-end !important;
.el-col:first-child {
.el-form-item__label {
float: none;
}
.el-form-item__content {
margin-left: 0px !important;
}
}
}
.con_left_footer {
position: absolute;
left: 499px;
top: 777px;
}
</style>

View File

@ -0,0 +1,905 @@
<!-- 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="trees"
node-key="id"
:props="defaultProps"
default-expand-all
@node-click="treeNodeClick"
ref="tree"
>
<!-- :render-content="renderContent" -->
<span class="custom-tree-node" slot-scope="{ node, data }">
<template v-if="data.editing == 1">
<el-button
type="mini"
v-if="flag"
style="right: 50px; top: 0; position: absolute; border: none"
@click.stop="done"
>完成</el-button
>
<el-button
type="mini"
style="right: 0; top: 0; position: absolute; border: none"
@click.stop="edit"
>编辑</el-button
>
<span v-if="!flag">{{ data.label }}</span>
<el-input v-else style="width: 150px" v-model="gateway"></el-input>
</template>
<template v-else>{{ data.label }}</template>
</span>
</el-tree>
</div>
<!-- </div> -->
<div class="pas_params" v-show="add_passage">
<div class="content" v-loading="loading">
<div class="con_left">
<h3 class="mqtt" style="margin-top: 20px; color: white">
MQTT Client
</h3>
<el-divider></el-divider>
<el-form
:model="formData"
:label-position="labelPosition"
:rules="rules"
ref="ruleForm"
>
<el-row>
<el-col :span="24">
<el-form-item>
<el-checkbox v-model="formData.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-form-item prop="mqtt_ip1">
<el-input
v-model="mqtt_ip1"
style="width: 43px; height: 30px"
maxlength="3"
>
</el-input>
</el-form-item>
</el-col>
<el-col :span="1">. </el-col>
<el-col :span="5">
<el-form-item prop="mqtt_ip2">
<el-input
v-model="mqtt_ip2"
style="width: 43px; height: 30px"
maxlength="3"
></el-input>
</el-form-item>
</el-col>
<el-col :span="1">.</el-col>
<el-col :span="5">
<el-form-item prop="mqtt_ip3">
<el-input
v-model="mqtt_ip3"
style="width: 43px; height: 30px"
maxlength="3"
></el-input>
</el-form-item>
</el-col>
<el-col :span="1">.</el-col>
<el-col :span="5">
<el-form-item prop="mqtt_ip4">
<el-input
v-model="mqtt_ip4"
style="width: 43px; height: 30px"
maxlength="3"
></el-input>
</el-form-item>
</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="formData.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="网关SN号:"
:label-width="formLabelWidth"
prop="mqtt_wgsn"
>
<el-input
v-model="formData.mqtt_wgsn"
placeholder=""
style="width: 200px; height: 30px"
></el-input>
</el-form-item>
</el-col>
</el-row>
<el-divider></el-divider>
<el-row class="theme">
<el-col :span="12">
<el-form-item
label="实时数据发布的主题"
style="display: block"
label-width="168px"
prop="mqtt_sssjfbzt"
>
<el-row>
<el-col :span="15">
<el-input
v-model="formData.mqtt_sssjfbzt"
placeholder=""
style="width: 200px"
></el-input>
</el-col>
<el-col :span="9">
<el-select
v-model="formData.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="formData.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="formData.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="formData.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="formData.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="saveClone"> </el-button>
<el-button @click="add_passage = false"> </el-button>
</div>
</el-form>
</div>
<div>
<div class="con_right">
<el-button type="info" plain @click="handleSelect">保存</el-button>
<!-- <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 { SaveUserAnswer, GetUserAnswer, GetTree, SendTree } from "@/api/user";
export default {
name: "CloneView",
data() {
return {
loading: false,
flag: false,
gateway: "",
trees: [],
user_id: "",
formData: {
mqtt_qiyong: true,
mqtt_ip: "",
mqtt_port: "",
mqtt_wgsn: "",
mqtt_sssjfbzt: "",
mqtt_qos: "qos1",
// mqtt_retained: false,
mqtt_scms: "周期上传",
mqtt_sczq: "",
mqtt_sjgl: ["采集成功"],
},
mqtt_ip1: "",
mqtt_ip2: "",
mqtt_ip3: "",
mqtt_ip4: "",
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" },
],
},
};
},
methods: {
//
edit(event) {
this.flag = true;
},
//
done(event) {
this.flag = false;
this.trees[0].label = this.gateway;
this.sendTree();
},
getParameter(data) {
this.user_id = data;
},
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
// }
// },
async handleSelect() {
let datas = sessionStorage.getItem("answer");
this.tableData = { ...JSON.parse(datas), ...this.tableData[0] };
let res = await SaveUserAnswer({
mark: "DB-IotLite_yx",
user_id: "USER202307301114011710",
mark_value: JSON.stringify(this.tableData),
});
console.log(res);
sessionStorage.setItem("answer", JSON.stringify(this.tableData));
},
Merge(value, value1, value2, value3, value4) {
value = value1 + "." + value2 + "." + value3 + "." + value4;
return value;
},
closeMenu(ev) {
console.log({ ev });
this.dialogVisible = false;
},
async saveClone() {
var obj = {
mqtt_qiyong: String(Number(this.formData.mqtt_qiyong)),
mqtt_ip:
this.mqtt_ip1 +
"." +
this.mqtt_ip2 +
"." +
this.mqtt_ip3 +
"." +
this.mqtt_ip4,
mqtt_port: this.formData.mqtt_port,
mqtt_wgsn: this.formData.mqtt_wgsn,
mqtt_sssjfbzt: this.formData.mqtt_sssjfbzt,
mqtt_qos: this.formData.mqtt_qos,
mqtt_scms: this.formData.mqtt_scms,
mqtt_sczq: this.formData.mqtt_sczq,
mqtt_sjgl: this.formData.mqtt_sjgl,
mqtt_cjd_sbmc: this.tableData[0].mqtt_cjd_sbmc,
mqtt_cjd_tagid: this.tableData[0].mqtt_cjd_tagid,
};
let datas = sessionStorage.getItem("DB-IotLite_yx");
// console.log("1231");
console.log(JSON.parse(datas));
datas = { ...JSON.parse(datas), ...obj };
// console.log(this.formData);
sessionStorage.setItem("DB-IotLite_yx", JSON.stringify(datas));
let res = await SaveUserAnswer({
mark: "DB-IotLite_yx",
user_id: "USER202307301114011710",
mark_value: JSON.stringify(datas),
});
if (res.status == 200) {
this.$message({
message: "保存成功",
type: "success",
});
}
console.log(res);
},
savePoint() {
this.choose_point = false;
this.isAdd = true;
this.$message({
message: "添加成功",
type: "success",
});
},
async GetUserAnswer() {
let answer = await GetUserAnswer({
mark: "DB-IotLite_yx",
user_id: "USER202307301114011710",
});
console.log(answer);
let obj = JSON.parse(answer.data.data.mark_value);
console.log(obj);
this.formData.mqtt_qiyong = Boolean(obj.mqtt_qiyong);
if (obj.mqtt_ip) {
this.formData.mqtt_qiyong = Boolean(Number(obj.mqtt_qiyong));
this.mqtt_ip1 = obj.mqtt_ip.split(".")[0];
this.mqtt_ip2 = obj.mqtt_ip.split(".")[1];
this.mqtt_ip3 = obj.mqtt_ip.split(".")[2];
this.mqtt_ip4 = obj.mqtt_ip.split(".")[3];
this.formData.mqtt_port = obj.mqtt_port;
this.formData.mqtt_sssjfbzt = obj.mqtt_sssjfbzt;
this.formData.mqtt_wgsn = obj.mqtt_wgsn;
this.formData.mqtt_qos = obj.mqtt_qos;
this.formData.mqtt_scms = obj.mqtt_scms;
this.formData.mqtt_sczq = obj.mqtt_sczq;
this.formData.mqtt_sjgl = obj.mqtt_sjgl;
this.tableData[0].mqtt_cjd_sbmc = obj.mqtt_cjd_sbmc;
this.tableData[0].mqtt_cjd_tagid = obj.mqtt_cjd_tagid;
}
},
async sendTree() {
let result = await SendTree({
user_id: "USER202307301114011710",
data: JSON.stringify(this.trees),
type: "1",
});
console.log(result);
},
async getTree() {
console.log("12341");
let res = await GetTree({ user_id: "USER202307301114011710", type: "1" });
console.log(res);
console.log(JSON.parse(res.data.data.data));
this.trees = JSON.parse(res.data.data.data);
},
},
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);
}
}
};
//
// trueDOMlistener
document.body.addEventListener("click", el.event, true);
},
unbind: function (el) {
//
document.body.removeEventListener("click", el.event, true);
},
},
},
created() {
this.getTree();
let that = this;
window.getParameter = that.getParameter;
this.loading = true;
this.GetUserAnswer();
this.loading = false;
},
};
</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-form-item {
margin-bottom: 0px;
}
.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-image: url(../assets/image/bg.png);
background-size: 100% 100%;
// 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;
}
.el-checkbox-group {
margin-top: -28px;
}
}
.con_left {
width: 708px;
height: 100%;
position: relative;
border-top: 1px solid rgba(187, 187, 187, 1);
border-right: 1px solid rgba(187, 187, 187, 1);
}
.con_right {
width: 480px;
.dialog-footer {
.el-button {
width: 80px;
height: 30px;
line-height: 0.5;
}
}
}
}
}
/deep/ .theme {
height: 80px !important;
display: flex;
align-items: flex-end !important;
.el-col:first-child {
.el-form-item__label {
float: none;
}
.el-form-item__content {
margin-left: 0px !important;
}
}
}
.con_left_footer {
position: absolute;
left: 499px;
top: 777px;
}
</style>

View File

@ -0,0 +1,834 @@
<!-- 串口通道配置 -->
<template>
<div>
<!-- 设置树形控件 -->
<!-- 串口通道的页面 -->
<!-- <el-button type="info" plain @click="dialogVisible = true">串口通道</el-button> -->
<div class="tree_menu" v-show="dialogVisible">
<el-tree :data="trees" node-key="id" :props="defaultProps" default-expand-all @node-contextmenu="rightClick"
@node-click="treeNodeClick" ref="tree">
<!-- :render-content="renderContent" -->
<span class="custom-tree-node" slot-scope="{ node, data }">
<template v-if="data.editing == 1">
<el-button type="mini" v-if="flag" style="right: 50px; top: 0; position: absolute; border: none"
@click.stop="done">完成</el-button>
<el-button type="mini" style="right: 0; top: 0; position: absolute; border: none"
@click.stop="edit">编辑</el-button>
<span v-if="!flag">{{ data.label }}</span>
<el-input v-else style="width: 150px" v-model="gateway"></el-input>
</template>
<template v-else>{{ data.label }}</template>
</span>
</el-tree>
<!-- 树形控件右键组件 -->
<div v-show="menuShow" class="tree_rightmenu" :style="{ ...rightMenu }">
<el-menu class="el-menu-vertical-demo" @select="selectMenuNode" default-active="#0078FE">
<el-menu-item id="menuitem" index="1" style="font-size: 12px;">
<span slot="title">新建通道</span>
</el-menu-item>
<el-menu-item index="2" style="font-size: 12px;">
<span slot="title"> </span>
</el-menu-item>
</el-menu>
</div>
</div>
<div class="pas_params">
<el-dialog title="通道参数设置" :visible.sync="add_passage" width="765px" v-loading="loading">
<el-form :model="formData" :label-position="labelPosition" :rules="rules" ref="ruleForm">
<el-row>
<el-col :span="12">
<el-form-item label="通道名称:" :label-width="formLabelWidth" prop="tdpz_tdmc">
<el-select v-model="formData.tdpz_tdmc" placeholder="" style="width: 200px;height:30px">
<el-option v-for="item 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="12">
<el-form-item label="通道:" :label-width="formLabelWidth" prop="tdpz_td">
<el-select v-model="formData.tdpz_td" placeholder="" style="width: 200px;height:30px">
<el-option v-for="item in options2" :key="item.value" :label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="驱动名称:" :label-width="formLabelWidth" prop="tdpz_qdmc">
<el-row>
<el-col :span="18">
<el-input v-model="formData.tdpz_qdmc" placeholder=""
style="width: 200px;height:30px" disabled></el-input>
</el-col>
<el-col :span="6">
<el-button style="width: 50px; height: 30px;" @click="getDriveName">...</el-button>
</el-col>
</el-row>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="串口号:" :label-width="formLabelWidth" prop="tdpz_chuankou">
<el-select v-model="formData.tdpz_chuankou" placeholder="" style="width: 200px;height:30px">
<el-option v-for="item in options3" :key="item.value" :label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="波特率:" :label-width="formLabelWidth" prop="tdpz_btl">
<el-select v-model="formData.tdpz_btl" placeholder="" style="width: 200px;height:30px">
<el-option v-for="item in options4" :key="item.value" :label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="数据位:" :label-width="formLabelWidth" prop="tdpz_sjw">
<el-select v-model="formData.tdpz_sjw" placeholder="" style="width: 200px;height:30px">
<el-option v-for="item in options5" :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="12">
<el-form-item label="停止位:" :label-width="formLabelWidth" prop="tdpz_tzw">
<el-select v-model="formData.tdpz_tzw" placeholder="" style="width: 200px;height:30px">
<el-option v-for="item in options6" :key="item.value" :label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="奇偶校验:" :label-width="formLabelWidth" prop="tdpz_jojy">
<el-select v-model="formData.tdpz_jojy" placeholder="" style="width: 200px;height:30px">
<el-option v-for="item in options7" :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="12">
<el-form-item label="超过时间(ms):" :label-width="formLabelWidth" prop="tdpz_cgsj">
<el-input v-model="formData.tdpz_cgsj" placeholder=""
style="width: 200px;height:30px"></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="间隔时间(ms):" :label-width="formLabelWidth" prop="tdpz_jgsj">
<el-input v-model="formData.tdpz_jgsj" placeholder=""
style="width: 200px;height:30px"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="轮询时间(ms):" :label-width="formLabelWidth" prop="tdpz_lxsj">
<el-input v-model="formData.tdpz_lxsj" placeholder=""
style="width: 200px;height:30px"></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="重复次数:" :label-width="formLabelWidth" prop="tdpz_cfcs">
<el-input v-model="formData.tdpz_cfcs" placeholder=""
style="width: 200px;height:30px"></el-input>
</el-form-item>
</el-col>
</el-row>
</el-form>
<div class="super_parmams">
<h3>高级参数</h3>
<div>
<i class="el-icon-caret-bottom" v-if="is_retract"></i>
<i class="el-icon-caret-top" v-else="is_retract"></i>
<el-button type="text" plain @click="getRetract"
style="width: 28px; border:none; color: rgba(16, 16, 16, 1);font-size: 14px;text-align: left;">
收起</el-button>
</div>
</div>
<div class="super_con" v-show="is_retract">
<el-form :label-position="labelPosition" :rules="rules" ref="ruleForm">
<el-row>
<el-col :span="12">
<el-form-item>
<el-checkbox v-model="formData.tdpz_watchtime">watch time(s)</el-checkbox>
<el-input v-model="input1" placeholder="" style="width: 200px;height:30px"
:disabled="isdisabled"></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item>
<el-checkbox v-model="formData.tdpz_cjsylxdz">采集使用连续地址</el-checkbox>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="读写占空比:" :label-width="formLabelWidth">
<el-row>
<el-col :span="10">
<el-input v-model="tdpz_dxzkb1" style="width: 91px;height:30px"></el-input>
</el-col>
<el-col :span="4">:
</el-col>
<el-col :span="10">
<el-input v-model="tdpz_dxzkb2" style="width: 91px;height:30px"></el-input>
</el-col>
</el-row>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="05/0F:" :label-width="formLabelWidth">
<el-row>
<el-col :span="8"><el-radio v-model="formData.tdpz_050F"
label="1">auto</el-radio></el-col>
<el-col :span="8"><el-radio v-model="formData.tdpz_050F"
label="2">05</el-radio></el-col>
<el-col :span="8"><el-radio v-model="formData.tdpz_050F"
label="3">0F</el-radio></el-col>
</el-row>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="06/10:" :label-width="formLabelWidth">
<el-row>
<el-col :span="8"><el-radio v-model="formData.tdpz_0610"
label="1">auto</el-radio></el-col>
<el-col :span="8"><el-radio v-model="formData.tdpz_0610"
label="2">06</el-radio></el-col>
<el-col :span="8"><el-radio v-model="formData.tdpz_0610"
label="3">10</el-radio></el-col>
</el-row>
</el-form-item>
</el-col>
</el-row>
</el-form>
</div>
<span slot="footer" class="dialog-footer">
<el-button type="primary" @click="saveGate"> </el-button>
<el-button @click="add_passage = false"> </el-button>
</span>
</el-dialog>
</div>
<div class="drvieName_All" v-show="diag_drive">
<div class="title">
<p class="title_l">协议选择</p>
<i class="el-icon-close title_r" @click="diag_drive = false"></i>
</div>
<el-divider></el-divider>
<el-tree :data="datas2" :props="defaultProps" default-expand-all @node-click="handleDetailClick"></el-tree>
</div>
</div>
</template>
<script>
import { SaveUserAnswer, GetUserAnswer, GetTree, SendTree } from "@/api/user";
export default {
name: "TestTreeView",
data() {
return {
loading: false,
flag: false,
gateway: "",
nodekey: "",
trees: [],
formData: {
tdpz_tdmc: "有线区Channel1",
tdpz_td: "网口",
tdpz_qdmc: "ModbusTCPClient",
tdpz_chuankou: "com1",
tdpz_btl: "9600",
tdpz_sjw: "8",
tdpz_tzw: "1",
tdpz_jojy: "无校验none",
tdpz_cgsj: "",
tdpz_jgsj: "",
tdpz_lxsj: "",
tdpz_cfcs: "",
tdpz_watchtime: false,
tdpz_cjsylxdz: true,
tdpz_dxzkb: "",
tdpz_050F: "1",
tdpz_0610: "1",
},
tdpz_dxzkb1: "1",
tdpz_dxzkb2: "1",
diag_drive: false,
options1: [{
value: "有线区Channel1",
label: "有线区Channel1",
}, {
value: "无线区Channel1",
label: "无线区Channel1",
}],
options2: [{
value: "网口",
label: "网口",
}, {
value: "串口",
label: "串口",
}],
options3: [{
value: "com1",
label: "com1",
},
{
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",
},
],
},
],
datas2: [
{
label: "通用标准",
children: [
{
label: "ModbusTCPClient",
},
{
label: "ModbusRTU_over_TCP",
},
{
label: "OPCUAClient",
},
{
label: "OPCDAClient",
},
{
label: "MQTTClient",
},
{
label: "OPCXMLDAClient",
},
{
label: "环保212协议网口监听",
},
],
},
{
label: "PLC",
children: [
{
label: "Slemens S7-200 Network",
},
{
label: "Slemens S7-300 Network",
},
{
label: "Slemens S7-400 Network",
},
{
label: "Slemens S7-1200 Network",
},
{
label: "Slemens S7-1500 Network",
},
{
label: "EtherNet/IP CIP协议(AB OMR ON)",
},
{
label: "MC_Qna-3E(三菱 基恩士 松下)",
},
{
label: "MC_A-1E_Binary",
},
{
label: "OMRON-FINS",
},
{
label: "横河PLC",
},
{
label: "西门子FetchWirte",
},
{
label: "富机 FUJI_SPH_NET",
},
{
label: "基恩士上位链路通讯",
},
],
},
{
label: "智能建筑",
children: [],
},
{
label: "厂家定制",
children: [],
},
{
label: "电力行业标准",
children: [
{
label: "IEC104",
},
{
label: "DLT645_over_TCP",
},
],
},
{
label: "CNC数控",
children: [],
},
{
label: "私有协议",
children: [],
},
],
defaultProps: {
children: "children",
label: "label",
},
rules: {
tdpz_tdmc: [
{ required: true, message: "请输入通道名称", trigger: "change" },
],
tdpz_td: [{ required: true, message: "请输入通道", trigger: "change" }],
tdpz_qdmc: [
{ required: true, message: "请输入驱动名称", trigger: "change" },
],
tdpz_chuankou: [
{ required: true, message: "请输入串口号", trigger: "change" },
],
tdpz_btl: [
{ required: true, message: "请输入波特率", trigger: "change" },
],
tdpz_tzw: [
{ required: true, message: "请输入停止位", trigger: "change" },
],
tdpz_sjw: [
{ required: true, message: "请输入数据位", trigger: "change" },
],
tdpz_jojy: [
{ required: true, message: "请输入奇偶校验", trigger: "change" },
],
tdpz_cgsj: [
{ required: true, message: "请输入超出时间", trigger: "blur" },
],
tdpz_jgsj: [
{ required: true, message: "请输入间隔时间", trigger: "blur" },
],
tdpz_lxsj: [
{ required: true, message: "请输入轮询时间", trigger: "blur" },
],
tdpz_cfcs: [
{ required: true, message: "请输入重复次数", trigger: "blur" },
],
},
};
},
created() {
this.getTree();
},
methods: {
//
edit(event) {
this.flag = true;
},
methods: {
edit(event) {
this.flag = true;
},
//
done(event) {
this.flag = false;
this.trees[0].label = this.gateway;
this.sendTree();
},
rightClick(e, data, node) {
if (node.childNodes.length == 0) {
this.nodekey = data.id;
this.menuShow = false
this.menuShow = true
e.preventDefault() //
this.rightMenu = { top: e.pageY + 'px', left: e.pageX + 'px' }
document.addEventListener('click', (ev) => {
ev.stopImmediatePropagation()
if (ev.target !== document.querySelector('.el-menu-item.is-active')) {
this.foo()
}
})
}
},
// ,
selectMenuNode(index, indexPath) {
console.log(index);
if (index == 1) {
this.add_passage = true;
}
},
foo() {
//
this.menuShow = false
document.removeEventListener('click', this.foo) //
},
treeNodeClick() {
this.foo()
},
//
getRetract() {
if (this.is_retract == true) {
this.is_retract = false;
} else {
this.is_retract = true;
}
},
getDriveName() {
this.diag_drive = true;
},
closeMenu(ev) {
console.log({ ev });
this.dialogVisible = false;
},
handleDetailClick(data, node, value) {
console.log(data.label);
if (node.level == 2) {
this.formData.tdpz_qdmc = data.label;
this.diag_drive = false;
}
},
async saveGate() {
var obj = {
tdpz_tdmc: this.formData.tdpz_tdmc,
tdpz_td: this.formData.tdpz_td,
tdpz_qdmc: this.formData.tdpz_qdmc,
tdpz_port: this.formData.tdpz_port,
tdpz_chuankou: this.formData.tdpz_chuankou,
tdpz_btl: this.formData.tdpz_btl,
tdpz_sjw: this.formData.tdpz_sjw,
tdpz_tzw: this.formData.tdpz_tzw,
tdpz_jojy: this.formData.tdpz_jojy,
tdpz_cgsj: this.formData.tdpz_cgsj,
tdpz_jgsj: this.formData.tdpz_jgsj,
tdpz_lxsj: this.formData.tdpz_lxsj,
tdpz_cfcs: this.formData.tdpz_cfcs,
tdpz_watchtime: String(Number(this.formData.tdpz_watchtime)),
tdpz_cjsylxdz: String(Number(this.formData.tdpz_cjsylxdz)),
tdpz_dxzkb: this.tdpz_dxzkb1 + ":" + this.tdpz_dxzkb2,
tdpz_050F: this.formData.tdpz_050F,
tdpz_0610: this.formData.tdpz_0610,
}
this.add_passage = false;
let datas = sessionStorage.getItem("DB-IotLite_wx");
// console.log(this.formData);
datas = { ...JSON.parse(datas), ...obj };
let res = await SaveUserAnswer({
mark: "DB-IotLite_wx",
user_id: "USER202307301114011710",
mark_value: JSON.stringify(datas),
});
if (res.status == 200) {
this.$message({
message: '保存成功',
type: 'success'
});
}
sessionStorage.setItem("DB-IotLite_wx", JSON.stringify(datas));
console.log(res);
console.log(res.data.data.mark_value);
this.$refs["tree"].append({
id: this.nodekey + 1000,
label: this.formData.tdpz_tdmc
}, this.nodekey);
console.log(this.trees);
this.sendTree();
this.$router.push("/dbserialdevice");
},
//
async GetUserAnswer() {
this.loading = true;
let answer = await GetUserAnswer({
mark: "DB-IotLite_wx",
user_id: "USER202307301114011710",
})
this.loading = false;
console.log(answer);
console.log(answer.data);
if (answer.data.data && answer.data.state) {
// console.log(answer);
let obj = JSON.parse(answer.data.data.mark_value);
console.log(obj);
if (obj.tdpz_dxzkb) {
this.formData.tdpz_tdmc = obj.tdpz_tdmc;
this.formData.tdpz_td = obj.tdpz_td;
this.formData.tdpz_qdmc = obj.tdpz_qdmc;
this.formData.tdpz_chuankou = obj.tdpz_chuankou;
this.formData.tdpz_btl = obj.tdpz_btl;
this.formData.tdpz_sjw = obj.tdpz_sjw;
this.formData.tdpz_tzw = obj.tdpz_tzw;
this.formData.tdpz_jojy = obj.tdpz_jojy;
this.formData.tdpz_port = obj.tdpz_port;
this.formData.tdpz_cgsj = obj.tdpz_cgsj;
this.formData.tdpz_jgsj = obj.tdpz_jgsj;
this.formData.tdpz_lxsj = obj.tdpz_lxsj;
this.formData.tdpz_cfcs = obj.tdpz_cfcs;
this.formData.tdpz_050F = obj.tdpz_050F;
this.formData.tdpz_0610 = obj.tdpz_0610;
this.tdpz_dxzkb1 = obj.tdpz_dxzkb.split(":")[0];
this.tdpz_dxzkb2 = obj.tdpz_dxzkb.split(":")[1];
this.formData.tdpz_watchtime = Boolean(Number(obj.tdpz_watchtime));
this.formData.tdpz_cjsylxdz = Boolean(Number(obj.tdpz_cjsylxdz));
}
}
},
async sendTree() {
let result = await SendTree({
user_id: "USER202307301114011710",
data: JSON.stringify(this.trees),
type: "1",
})
console.log(result);
},
},
mounted() {
GetTree({
user_id: "USER202307301114011710",
type: "1",
}).then((res) => {
console.log(res);
console.log(JSON.parse(res.data.data.data));
this.trees = JSON.parse(res.data.data.data);
})
this.GetUserAnswer();
},
},
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);
}
}
};
//
// trueDOMlistener
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;
left: 64px;
top: 104px;
width: 286px;
height: 753px;
line-height: 20px;
border-radius: 3px;
background-color: rgba(255, 255, 255, 1);
text-align: center;
border: 1px solid rgba(220, 220, 220, 1);
}
.tree_rightmenu {
position: fixed;
width: 120px;
border: 1px solid rgba(0, 0, 0, 0.15);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
z-index: 1000;
}
.super_parmams {
display: flex;
justify-content: space-between;
align-items: center;
width: 668px;
i {
width: 24px;
height: 24px;
display: inline-block;
}
}
/deep/ .pas_params {
.el-col-12:last-child {
padding-right: 150px;
}
.el-col-12:first-child {
padding-right: 38px;
}
.el-input__inner {
height: 30px;
text-align: left;
padding: 0px 8px;
}
.el-row {
display: flex;
align-items: flex-end;
.el-col-1 {
text-align: center;
line-height: 20px;
height: 20px;
}
.el-col-6 {
height: 40px;
top: 6px;
left: 77px;
position: relative;
width: 50px;
}
}
}
.super_con {
.el-col-12:last-child {
padding-right: 28px;
}
.el-col-12:first-child {
padding-right: 42px;
}
.el-input__inner {
text-align: left;
padding: 0 8px;
}
.el-row {
display: flex;
align-items: flex-end;
.el-col-4 {
padding-left: 5px;
width: 14px;
text-align: center;
line-height: 4px;
height: 20px;
}
}
}
.el-dialog__footer {
padding: 18px 1.25rem 50px;
}
.dialog-footer {
position: absolute;
left: 50%;
bottom: 45px;
transform: translateX(-50%);
}
/deep/ .drvieName_All {
position: absolute;
left: 1408px;
top: 140px;
width: 435px;
max-height: 720px;
z-index: 10000;
border: 1px solid #f5f5f5;
.title {
background-color: #fff;
padding: 5px 6px 5px 25px;
display: flex;
justify-content: space-between;
.title_l {
width: 103px;
height: 26px;
color: rgba(16, 16, 16, 1);
font-size: 18px;
text-align: left;
}
.title_r {
width: 24px;
height: 24px;
line-height: 24px;
cursor: pointer;
color: rgba(111, 103, 103, 1);
}
}
// h3 {
// padding-bottom: 10px;
// background-color: #fff;
// }
.el-divider--horizontal {
margin: 0px;
}
}
</style>

View File

@ -935,8 +935,8 @@ export default {
//
var json = JSON.parse(sessionStorage.getItem("GYWZ_yx"));
let { data } = await SaveUserAnswer({
mark: "GYWZ_yx",
user_id: "USER202307301114011710",
mark: `${this.$store.state.type}`,
user_id: `${this.$route.query.id}`,
mark_value: JSON.stringify({ ...json, ...obj }),
});
if (data.state) {
@ -951,48 +951,50 @@ export default {
//
async GetUserAnswer() {
let { data } = await GetUserAnswer({
mark: "GYWZ_yx",
user_id: "USER202307301114011710",
mark: `${this.$store.state.type}`,
user_id: `${this.$route.query.id}`,
});
let res = JSON.parse(data.data.mark_value);
if (res.clgl_ckip) {
this.ruleForm1.clgl_ckip1 = res.clgl_ckip.split(".")[0];
this.ruleForm1.clgl_ckip2 = res.clgl_ckip.split(".")[1];
this.ruleForm1.clgl_ckip3 = res.clgl_ckip.split(".")[2];
this.ruleForm1.clgl_ckip4 = res.clgl_rkip.split(".")[3];
this.ruleForm1.clgl_rkip1 = res.clgl_rkip.split(".")[0];
this.ruleForm1.clgl_rkip2 = res.clgl_rkip.split(".")[1];
this.ruleForm1.clgl_rkip3 = res.clgl_rkip.split(".")[2];
this.ruleForm1.clgl_rkip4 = res.clgl_rkip.split(".")[3];
this.ruleForm1.clgl_rkwg1 = res.clgl_rkwg.split(".")[0];
this.ruleForm1.clgl_rkwg2 = res.clgl_rkwg.split(".")[1];
this.ruleForm1.clgl_rkwg3 = res.clgl_rkwg.split(".")[2];
this.ruleForm1.clgl_rkwg4 = res.clgl_rkwg.split(".")[3];
this.ruleForm1.clgl_ckwg1 = res.clgl_ckwg.split(".")[0];
this.ruleForm1.clgl_ckwg2 = res.clgl_ckwg.split(".")[1];
this.ruleForm1.clgl_ckwg3 = res.clgl_ckwg.split(".")[2];
this.ruleForm1.clgl_ckwg4 = res.clgl_ckwg.split(".")[3];
this.ruleForm1.clgl_name = res.clgl_name;
this.ruleForm1.clgl_xy = res.clgl_xy;
this.ruleForm1.clgl_gzms = res.clgl_gzms;
this.ruleForm1.clgl_mddk = res.clgl_mddk;
this.ruleForm1.clgl_ydx = res.clgl_ydx;
this.ruleForm1.clgl_ydk = res.clgl_ydk;
this.ruleForm1.clgl_mddk = res.clgl_mddk;
this.ruleForm1.clgl_dldk = res.clgl_dldk;
this.ruleForm1.clgl_rkwk = res.clgl_rkwk;
this.ruleForm1.clgl_wdyml = res.clgl_wdyml;
this.ruleForm1.clgl_ckwk = res.clgl_ckwk;
this.tableData1 = [
{
cmdlist_ml: res.cmdlist_ml,
cmdlist_sbid: res.cmdlist_sbid,
cmdlist_qsdz: res.cmdlist_qsdz,
cmdlist_dzcd: res.cmdlist_dzcd,
cmdlist_ms: res.cmdlist_ms,
cmdlist_dz: res.cmdlist_dz,
},
];
if (data.data && data.state) {
let res = JSON.parse(data.data.mark_value);
if (res.clgl_ckip) {
this.ruleForm1.clgl_ckip1 = res.clgl_ckip.split(".")[0];
this.ruleForm1.clgl_ckip2 = res.clgl_ckip.split(".")[1];
this.ruleForm1.clgl_ckip3 = res.clgl_ckip.split(".")[2];
this.ruleForm1.clgl_ckip4 = res.clgl_rkip.split(".")[3];
this.ruleForm1.clgl_rkip1 = res.clgl_rkip.split(".")[0];
this.ruleForm1.clgl_rkip2 = res.clgl_rkip.split(".")[1];
this.ruleForm1.clgl_rkip3 = res.clgl_rkip.split(".")[2];
this.ruleForm1.clgl_rkip4 = res.clgl_rkip.split(".")[3];
this.ruleForm1.clgl_rkwg1 = res.clgl_rkwg.split(".")[0];
this.ruleForm1.clgl_rkwg2 = res.clgl_rkwg.split(".")[1];
this.ruleForm1.clgl_rkwg3 = res.clgl_rkwg.split(".")[2];
this.ruleForm1.clgl_rkwg4 = res.clgl_rkwg.split(".")[3];
this.ruleForm1.clgl_ckwg1 = res.clgl_ckwg.split(".")[0];
this.ruleForm1.clgl_ckwg2 = res.clgl_ckwg.split(".")[1];
this.ruleForm1.clgl_ckwg3 = res.clgl_ckwg.split(".")[2];
this.ruleForm1.clgl_ckwg4 = res.clgl_ckwg.split(".")[3];
this.ruleForm1.clgl_name = res.clgl_name;
this.ruleForm1.clgl_xy = res.clgl_xy;
this.ruleForm1.clgl_gzms = res.clgl_gzms;
this.ruleForm1.clgl_mddk = res.clgl_mddk;
this.ruleForm1.clgl_ydx = res.clgl_ydx;
this.ruleForm1.clgl_ydk = res.clgl_ydk;
this.ruleForm1.clgl_mddk = res.clgl_mddk;
this.ruleForm1.clgl_dldk = res.clgl_dldk;
this.ruleForm1.clgl_rkwk = res.clgl_rkwk;
this.ruleForm1.clgl_wdyml = res.clgl_wdyml;
this.ruleForm1.clgl_ckwk = res.clgl_ckwk;
this.tableData1 = [
{
cmdlist_ml: res.cmdlist_ml,
cmdlist_sbid: res.cmdlist_sbid,
cmdlist_qsdz: res.cmdlist_qsdz,
cmdlist_dzcd: res.cmdlist_dzcd,
cmdlist_ms: res.cmdlist_ms,
cmdlist_dz: res.cmdlist_dz,
},
];
}
}
},
//-
@ -1018,8 +1020,8 @@ export default {
//
var json = JSON.parse(sessionStorage.getItem("GYWZ_yx"));
let { data } = await SaveUserAnswer({
mark: "GYWZ_yx",
user_id: "USER202307301114011710",
mark: `${this.$store.state.type}`,
user_id: `${this.$route.query.id}`,
mark_value: JSON.stringify({ ...json, ...obj }),
});
if (data.state) {
@ -1044,8 +1046,8 @@ export default {
obj.cmdlist_dz = "";
localStorage.setItem("GYWZ_yx", JSON.stringify(obj));
let { data } = await SaveUserAnswer({
mark: "GYWZ_yx",
user_id: "USER202307301114011710",
mark: `${this.$store.state.type}`,
user_id: `${this.$route.query.id}`,
mark_value: JSON.stringify(obj),
});
if (data.state) {

View File

@ -11,11 +11,25 @@
<el-divider></el-divider>
<div class="content">
<div class="lan">
<el-form v-loading="loading" :model="formData" :label-position="labelPosition" :rules="rules" ref="ruleForm">
<el-form
v-loading="loading"
:model="formData"
: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="formData.ippz_wllx" placeholder="静态IP" style="width: 200px">
<el-form-item
label="网络类型:"
:label-width="formLabelWidth"
prop="type"
>
<el-select
v-model="formData.ippz_wllx"
placeholder="静态IP"
style="width: 200px"
>
<el-option label="静态IP" value="静态IP"></el-option>
</el-select>
</el-form-item>
@ -23,7 +37,11 @@
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="IP地址:" :label-width="formLabelWidth" prop="ip">
<el-form-item
label="IP地址:"
:label-width="formLabelWidth"
prop="ip"
>
<el-row>
<el-col :span="5">
<el-input v-model="ippz_ip1"></el-input>
@ -69,7 +87,11 @@
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="网关:" :label-width="formLabelWidth" prop="ip">
<el-form-item
label="网关:"
:label-width="formLabelWidth"
prop="ip"
>
<el-row>
<el-col :span="5">
<el-input v-model="ippz_mrwg1"></el-input>
@ -185,7 +207,7 @@ export default {
let that = this;
window.getParameter = that.getParameter;
},
mounted() { },
mounted() {},
methods: {
getParameter(data) {
@ -262,8 +284,9 @@ export default {
});
this.loading = false;
console.log(data);
if (data.data && data.state) {
if (data.data !== null && data.state) {
var obj = JSON.parse(data.data.mark_value);
console.log(obj);
this.formData.ippz_wllx = obj.ippz_wllx;
if (obj.ippz_ip) {
this.ippz_ip1 = obj.ippz_ip.split(".")[0];

View File

@ -4,15 +4,30 @@
<!-- <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="trees" node-key="id" :props="defaultProps" default-expand-all @node-click="treeNodeClick"
ref="tree">
<el-tree
:data="trees"
node-key="id"
:props="defaultProps"
default-expand-all
@node-click="treeNodeClick"
ref="tree"
>
<!-- :render-content="renderContent" -->
<span class="custom-tree-node" slot-scope="{ node, data }">
<template v-if="data.editing == 1">
<el-button type="mini" v-if="flag" style="right: 50px; top: 0; position: absolute; border: none"
@click.stop="done">完成</el-button>
<el-button type="mini" style="right: 0; top: 0; position: absolute; border: none"
@click.stop="edit">编辑</el-button>
<el-button
type="mini"
v-if="flag"
style="right: 50px; top: 0; position: absolute; border: none"
@click.stop="done"
>完成</el-button
>
<el-button
type="mini"
style="right: 0; top: 0; position: absolute; border: none"
@click.stop="edit"
>编辑</el-button
>
<span v-if="!flag">{{ data.label }}</span>
<el-input v-else style="width: 150px" v-model="gateway"></el-input>
</template>
@ -28,7 +43,12 @@
MQTT Client
</h3>
<el-divider></el-divider>
<el-form :model="formData" :label-position="labelPosition" :rules="rules" ref="ruleForm">
<el-form
:model="formData"
:label-position="labelPosition"
:rules="rules"
ref="ruleForm"
>
<el-row>
<el-col :span="24">
<el-form-item>
@ -38,30 +58,50 @@
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="服务器IP:" :label-width="formLabelWidth" prop="mqtt_ip">
<el-form-item
label="服务器IP:"
:label-width="formLabelWidth"
prop="mqtt_ip"
>
<el-row>
<el-col :span="5">
<el-form-item prop="mqtt_ip1">
<el-input v-model="mqtt_ip1" style="width: 43px; height: 30px" maxlength="3">
<el-input
v-model="mqtt_ip1"
style="width: 43px; height: 30px"
maxlength="3"
>
</el-input>
</el-form-item>
</el-col>
<el-col :span="1">. </el-col>
<el-col :span="5">
<el-form-item prop="mqtt_ip2">
<el-input v-model="mqtt_ip2" style="width: 43px; height: 30px" maxlength="3"></el-input>
<el-input
v-model="mqtt_ip2"
style="width: 43px; height: 30px"
maxlength="3"
></el-input>
</el-form-item>
</el-col>
<el-col :span="1">.</el-col>
<el-col :span="5">
<el-form-item prop="mqtt_ip3">
<el-input v-model="mqtt_ip3" style="width: 43px; height: 30px" maxlength="3"></el-input>
<el-input
v-model="mqtt_ip3"
style="width: 43px; height: 30px"
maxlength="3"
></el-input>
</el-form-item>
</el-col>
<el-col :span="1">.</el-col>
<el-col :span="5">
<el-form-item prop="mqtt_ip4">
<el-input v-model="mqtt_ip4" style="width: 43px; height: 30px" maxlength="3"></el-input>
<el-input
v-model="mqtt_ip4"
style="width: 43px; height: 30px"
maxlength="3"
></el-input>
</el-form-item>
</el-col>
</el-row>
@ -70,29 +110,63 @@
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="端口号:" :label-width="formLabelWidth" prop="mqtt_port">
<el-input v-model="formData.mqtt_port" placeholder="" style="width: 200px; height: 30px"></el-input>
<el-form-item
label="端口号:"
:label-width="formLabelWidth"
prop="mqtt_port"
>
<el-input
v-model="formData.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="网关SN号:" :label-width="formLabelWidth" prop="mqtt_wgsn">
<el-input v-model="formData.mqtt_wgsn" placeholder="" style="width: 200px; height: 30px"></el-input>
<el-form-item
label="网关SN号:"
:label-width="formLabelWidth"
prop="mqtt_wgsn"
>
<el-input
v-model="formData.mqtt_wgsn"
placeholder=""
style="width: 200px; height: 30px"
></el-input>
</el-form-item>
</el-col>
</el-row>
<el-divider></el-divider>
<el-row class="theme">
<el-col :span="12">
<el-form-item label="实时数据发布的主题" style="display: block" label-width="168px" prop="mqtt_sssjfbzt">
<el-form-item
label="实时数据发布的主题"
style="display: block"
label-width="168px"
prop="mqtt_sssjfbzt"
>
<el-row>
<el-col :span="15">
<el-input v-model="formData.mqtt_sssjfbzt" placeholder="" style="width: 200px"></el-input>
<el-input
v-model="formData.mqtt_sssjfbzt"
placeholder=""
style="width: 200px"
></el-input>
</el-col>
<el-col :span="9">
<el-select v-model="formData.mqtt_qos" placeholder="请选择" style="width: 99px">
<el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value">
<el-select
v-model="formData.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>
@ -107,19 +181,39 @@
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="上传模式:" :label-width="formLabelWidth" prop="mqtt_scms">
<el-input v-model="formData.mqtt_scms" placeholder="" style="width: 200px; height: 30px"></el-input>
<el-form-item
label="上传模式:"
:label-width="formLabelWidth"
prop="mqtt_scms"
>
<el-input
v-model="formData.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="formData.mqtt_sczq" placeholder="" style="width: 200px; height: 30px"></el-input>
<el-form-item
label="上传周期(s):"
label-width="108px"
prop="mqtt_sczq"
>
<el-input
v-model="formData.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-form-item
label="数据过滤:"
:label-width="formLabelWidth"
prop="mqtt_sjgl"
>
<el-checkbox-group v-model="formData.mqtt_sjgl">
<el-checkbox label="值改变"></el-checkbox>
<el-checkbox label="采集成功"></el-checkbox>
@ -148,16 +242,24 @@
<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-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-option
v-for="(option, index) in options3"
:key="index"
:label="option.label"
:value="option.value"
></el-option>
</el-select>
</template>
</el-table-column>
@ -168,8 +270,14 @@
<!-- 添加按钮下显示出来的弹框信息 -->
<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
: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>
@ -488,7 +596,6 @@ export default {
},
};
},
methods: {
//
edit(event) {
@ -619,16 +726,16 @@ export default {
user_id: "USER202307301114011710",
data: JSON.stringify(this.trees),
type: "1",
})
});
console.log(result);
},
async getTree() {
console.log("12341")
let res = await GetTree({ user_id: "USER202307301114011710", type: "1", })
console.log("12341");
let res = await GetTree({ user_id: "USER202307301114011710", type: "1" });
console.log(res);
console.log(JSON.parse(res.data.data.data));
this.trees = JSON.parse(res.data.data.data);
}
},
},
directives: {
"click-outside": {

View File

@ -252,7 +252,7 @@ export default {
async GetUserAnswer() {
let { data } = await GetUserAnswer({
mark: "YDPZYM_wgpz",
user_id: "USER202307301114011710",
user_id: `${this.user_id}`,
});
console.log(data.data);
if (data.data && data.state) {
@ -263,7 +263,7 @@ export default {
async SaveUserAnswer() {
let { data } = await SaveUserAnswer({
mark: "YDPZYM_wgpz",
user_id: "USER202307301114011710",
user_id: `${this.user_id}`,
mark_value: JSON.stringify(this.wgpz),
});
if (data.state) {

View File

@ -266,7 +266,7 @@ export default {
async GetUserAnswer() {
let { data } = await GetUserAnswer({
mark: "YDPZYM_wgwh",
user_id: "USER202307301114011710",
user_id: `${this.user_id}`,
});
console.log(data);
if (data.data && data.state) {
@ -329,7 +329,7 @@ export default {
async SaveUserAnswer() {
let { data } = await SaveUserAnswer({
mark: "YDPZYM_wgwh",
user_id: "USER202307301114011710",
user_id: `${this.user_id}`,
mark_value: JSON.stringify(this.tableData),
});
if (data.state) {

View File

@ -1,11 +1,22 @@
<!-- ip设置页面 -->
<template>
<div>
<el-dialog title="IP配置" :visible.sync="dialogVisible" width="30%" v-loading="loading">
<el-dialog
title="IP配置"
:visible.sync="dialogVisible"
width="30%"
v-loading="loading"
>
<p class="txt">本页面涉及排错请检查修改默认值</p>
<div class="ip_setting">
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="140px" class="demo-ruleForm"
:label-position="labelPosition">
<el-form
:model="ruleForm"
:rules="rules"
ref="ruleForm"
label-width="140px"
class="demo-ruleForm"
:label-position="labelPosition"
>
<el-row>
<el-col :span="24">
<el-form-item label="IP获取方式" prop="ippz_ip_hqfs">
@ -19,7 +30,10 @@
<el-row>
<el-col :span="24">
<el-form-item label="DNS获取方式" prop="ippz_dns_hqfs">
<el-select v-model="ruleForm.ippz_dns_hqfs" style="width: 200px">
<el-select
v-model="ruleForm.ippz_dns_hqfs"
style="width: 200px"
>
<el-option label="自动获取" value="自动获取"></el-option>
<el-option label="手动设定" value="手动设定"></el-option>
</el-select>
@ -295,7 +309,7 @@ export default {
datas = { ...JSON.parse(datas), ...this.ruleForm };
let res = await SaveUserAnswer({
mark: "CKFWQ_yx",
user_id: "USER202307301114011710",
user_id: `${this.user_id}`,
mark_value: JSON.stringify(datas),
});
console.log(res);
@ -312,7 +326,7 @@ export default {
async GetUserAnswer() {
let answers = await GetUserAnswer({
mark: "CKFWQ_yx",
user_id: "USER202307301114011710",
user_id: `${this.user_id}`,
});
console.log(answers.data);
if (answers.data.data && answers.data.state) {

View File

@ -87,7 +87,7 @@ export default {
let datas = JSON.parse(sessionStorage.getItem("CKFWQ_wx"));
let res = await SaveUserAnswer({
mark: "CKFWQ_wx",
user_id: "USER202307301114011710",
user_id: `${this.user_id}`,
mark_value: JSON.stringify(datas),
});
console.log(res);
@ -111,11 +111,11 @@ export default {
this.loading = true;
let res = await GetUserAnswer({
mark: "CKFWQ_wx",
user_id: "USER202307301114011710",
user_id: `${this.user_id}`,
});
var obj = JSON.parse(res.data.data.mark_value);
console.log(obj);
if (res.data.data && res.data.state) {
var obj = JSON.parse(res.data.data.mark_value);
this.ruleForm.kqwk = obj.kqwk;
this.ruleForm.wkgzfs = obj.wkgzfs;
this.ruleForm.wkms = obj.wkms;

View File

@ -246,8 +246,8 @@ export default {
this.wlgl_ww_zwym4,
};
let { data } = await SaveUserAnswer({
mark: "GYWZ_yx",
user_id: "USER202307301114011710",
mark: `${this.$store.state.type}`,
user_id: `${this.user_id}`,
mark_value: JSON.stringify(obj),
});
if (data.state) {
@ -262,8 +262,8 @@ export default {
//
async GetUserAnswer() {
var { data } = await GetUserAnswer({
mark: "GYWZ_yx",
user_id: "USER202307301114011710",
mark: `${this.$store.state.type}`,
user_id: `${this.user_id}`,
});
console.log(data);
if (data.data && data.state) {

View File

@ -146,8 +146,8 @@ export default {
ip: this.ip1 + "." + this.ip2 + "." + this.ip3 + "." + this.ip4,
});
let { data } = await SaveUserAnswer({
mark: "GYWZ_yx",
user_id: "USER202307301114011710",
mark: `${this.$store.state.type}`,
user_id: `${this.user_id}`,
mark_value: JSON.stringify({ ...json, ...{ dxgl: this.dxgl } }),
});
console.log(data.data);
@ -164,8 +164,8 @@ export default {
},
async GetUserAnswer() {
let { data } = await GetUserAnswer({
mark: "GYWZ_yx",
user_id: "USER202307301114011710",
mark: `${this.$store.state.type}`,
user_id: `${this.user_id}`,
});
if (data.state && data.data) {
console.log(JSON.parse(data.data.mark_value).dxgl);
@ -179,8 +179,8 @@ export default {
this.dxgl.splice(index, 1);
var json = JSON.parse(sessionStorage.getItem("GYWZ_yx"));
let { data } = await SaveUserAnswer({
mark: "GYWZ_yx",
user_id: "USER202307301114011710",
mark: `${this.$store.state.type}`,
user_id: `${this.user_id}`,
mark_value: JSON.stringify({ ...json, ...{ dxgl: this.dxgl } }),
});
console.log(data.data);

View File

@ -292,12 +292,12 @@ export default {
this.user_id = data;
},
addPolicy() {
this.$router.push("/addstrategy");
this.$router.push({ name: "addstrategy", query: { id: this.user_id } });
},
async del(index, a) {
let { data } = await SaveUserAnswer({
mark: "GYWZ_yx",
user_id: "USER202307301114011710",
mark: `${this.$store.state.type}`,
user_id: `${this.user_id}`,
mark_value: JSON.stringify(localStorage.getItem("GYWZ_yx")),
});
if (data.state) {
@ -333,8 +333,8 @@ export default {
async GetUserAnswer() {
this.loading = true;
let { data } = await GetUserAnswer({
mark: "GYWZ_yx",
user_id: "USER202307301114011710",
mark: `${this.$store.state.type}`,
user_id: `${this.user_id}`,
});
this.loading = false;
if (data.data && data.state) {

View File

@ -206,7 +206,7 @@ export default {
async GetUserAnswer() {
let { data } = await GetUserAnswer({
mark: "CKFWQ_yx",
user_id: "USER202307301114011710",
user_id: `${this.user_id}`,
});
if (data.data) {
let obj = JSON.parse(data.data.mark_value);
@ -227,7 +227,7 @@ export default {
datas = { ...JSON.parse(datas), ...this.ruleForm };
SaveUserAnswer({
mark: "CKFWQ_yx",
user_id: "USER202307301114011710",
user_id: `${this.user_id}`,
mark_value: JSON.stringify(datas),
}).then((res) => {
console.log(res);

View File

@ -240,8 +240,7 @@
<script>
import { SaveUserAnswer, GetUserAnswer, GetTree, SendTree } from "@/api/user";
export default {
name: 'TestTreeView',
name: "TestTreeView",
data() {
return {
loading: false,
@ -290,405 +289,159 @@ export default {
label: "com1",
},
{
value: "com2",
label: "com2",
label: "数据采集",
children: [
{
label: "I/O点",
},
{
label: "用户点",
},
{
label: "计算点",
},
{
label: "系统点",
},
],
},
{
value: "com3",
label: "com3",
label: "数据服务",
children: [
{
label: "Modbus",
},
],
},
{
value: "com4",
label: "com4",
},
{
value: "com5",
label: "com5",
}, {
value: "com6",
label: "com6",
},
{
value: "com7",
label: "com7",
},
{
value: "com8",
label: "com8",
},
{
value: "com9",
label: "com9",
},
{
value: "com10",
label: "com10",
}, {
value: "com11",
label: "com11",
},
{
value: "com12",
label: "com12",
},
{
value: "com13",
label: "com13",
},
{
value: "com14",
label: "com14",
},
{
value: "com15",
label: "com15",
}, {
value: "com16",
label: "com16",
},
{
value: "com17",
label: "com17",
},
{
value: "com18",
label: "com18",
},
{
value: "com19",
label: "com19",
},
{
value: "com20",
label: "com20",
}, {
value: "com21",
label: "com21",
},
{
value: "com22",
label: "com22",
},
{
value: "com23",
label: "com23",
},
{
value: "com24",
label: "com24",
},
{
value: "com25",
label: "com25",
}, {
value: "com26",
label: "com26",
},
{
value: "com27",
label: "com27",
},
{
value: "com28",
label: "com28",
},
{
value: "com29",
label: "com29",
},
{
value: "com30",
label: "com30",
}, {
value: "com31",
label: "com31",
},
{
value: "com32",
label: "com32",
},
{
value: "com33",
label: "com33",
},
{
value: "com34",
label: "com34",
},
{
value: "com35",
label: "com35",
}, {
value: "com36",
label: "com36",
},
{
value: "com37",
label: "com37",
},
{
value: "com38",
label: "com38",
},
{
value: "com39",
label: "com39",
},
{
value: "com40",
label: "com40",
}, {
value: "com41",
label: "com41",
},
{
value: "com42",
label: "com42",
},
{
value: "com43",
label: "com43",
},
{
value: "com44",
label: "com44",
},
{
value: "com45",
label: "com45",
}, {
value: "com46",
label: "com46",
},
{
value: "com47",
label: "com47",
},
{
value: "com48",
label: "com48",
},
{
value: "com49",
label: "com49",
},
{
value: "com50",
label: "com50",
label: "IOT",
children: [
{
label: "Mqtt Client",
},
{
label: "Alink",
},
{
label: "Tlink",
},
{
label: "loTDDC",
},
{
label: "Ulink",
},
],
},
],
options4: [{
value: "1200",
label: "1200"
}, {
value: "2400",
label: "2400"
}, {
value: "4800",
label: "4800",
}, {
value: "9600",
label: "9600",
}, {
value: "115200",
label: "115200"
}],
options5: [{
value: "8",
label: "8"
}, {
value: "7",
label: "7"
}],
options6: [{
value: "1",
label: "1"
}, {
value: "2",
label: "2",
}],
options7: [{
value: "奇校验",
label: "奇校验"
}, {
value: "偶校验",
label: "偶校验"
}, {
value: "无校验none",
label: "无校验none"
}],
// tdpz_tdmc: "线Channel1",
// tdpz_td: "",
// tdpz_qdmc: "ModbusTCPClient",
// tdpz_watchtime: false,
// tdpz_cjsylxdz: true,
// tdpz_dxzkb: "",
// tdpz_dxzkb1: "1",
// tdpz_dxzkb2: "1",
// tdpz_050F: "1",
// tdpz_0610: "1",
isdisabled: true,
is_retract: true,
labelPosition: "left",
formLabelWidth: "116px",
input1: 10,
add_passage: false,
rightMenu: "",
dialogVisible: true,
menuShow: false,
datas: [{
label: 'Gateway',
children: [{
label: '数据采集',
children: [{
label: 'I/O点'
},
{
label: '用户点',
},
{
label: '计算点',
},
{
label: '系统点',
},
]
},
datas2: [
{
label: "数据服务",
children: [{
label: "Modbus"
}]
},
{
label: "IOT",
label: "通用标准",
children: [
{
label: "Mqtt Client"
label: "ModbusTCPClient",
},
{
label: "Alink"
label: "ModbusRTU_over_TCP",
},
{
label: "Tlink"
label: "OPCUAClient",
},
{
label: "loTDDC"
label: "OPCDAClient",
},
{
label: "Ulink"
label: "MQTTClient",
},
]
}
]
}],
datas2: [{
label: '通用标准',
children: [
{
label: 'ModbusTCPClient',
},
{
label: 'ModbusRTU_over_TCP',
},
{
label: 'OPCUAClient',
},
{
label: 'OPCDAClient',
},
{
label: 'MQTTClient',
},
{
label: "OPCXMLDAClient",
},
{
label: "环保212协议网口监听",
}
]
},
{
label: "PLC",
children: [
{
label: "Slemens S7-200 Network"
},
{
label: "Slemens S7-300 Network"
},
{
label: "Slemens S7-400 Network"
},
{
label: "Slemens S7-1200 Network"
},
{
label: "Slemens S7-1500 Network"
},
{
label: "EtherNet/IP CIP协议(AB OMR ON)"
},
{
label: "MC_Qna-3E(三菱 基恩士 松下)"
},
{
label: "MC_A-1E_Binary"
},
{
label: "OMRON-FINS"
},
{
label: "横河PLC"
},
{
label: "西门子FetchWirte"
},
{
label: "富机 FUJI_SPH_NET"
},
{
label: "基恩士上位链路通讯"
},
]
},
{
label: "智能建筑",
children: []
},
{
label: "厂家定制",
children: []
},
{
label: "电力行业标准",
children: [
{
label: "IEC104",
},
{
label: "DLT645_over_TCP"
}
]
},
{
label: "CNC数控",
children: []
}, {
label: "私有协议",
children: []
}],
{
label: "OPCXMLDAClient",
},
{
label: "环保212协议网口监听",
},
],
},
{
label: "PLC",
children: [
{
label: "Slemens S7-200 Network",
},
{
label: "Slemens S7-300 Network",
},
{
label: "Slemens S7-400 Network",
},
{
label: "Slemens S7-1200 Network",
},
{
label: "Slemens S7-1500 Network",
},
{
label: "EtherNet/IP CIP协议(AB OMR ON)",
},
{
label: "MC_Qna-3E(三菱 基恩士 松下)",
},
{
label: "MC_A-1E_Binary",
},
{
label: "OMRON-FINS",
},
{
label: "横河PLC",
},
{
label: "西门子FetchWirte",
},
{
label: "富机 FUJI_SPH_NET",
},
{
label: "基恩士上位链路通讯",
},
],
},
{
label: "智能建筑",
children: [],
},
{
label: "厂家定制",
children: [],
},
{
label: "电力行业标准",
children: [
{
label: "IEC104",
},
{
label: "DLT645_over_TCP",
},
],
},
{
label: "CNC数控",
children: [],
},
{
label: "私有协议",
children: [],
},
],
defaultProps: {
children: 'children',
label: 'label'
children: "children",
label: "label",
},
rules: {
tdpz_tdmc: [
{ required: true, message: "请输入通道名称", trigger: "change" },
],
tdpz_td: [
{ required: true, message: "请输入通道", trigger: "change" }
],
tdpz_td: [{ required: true, message: "请输入通道", trigger: "change" }],
tdpz_qdmc: [
{ required: true, message: "请输入驱动名称", trigger: "change" },
],
@ -722,187 +475,186 @@ export default {
},
};
},
created() {
this.getTree();
},
methods: {
//
edit(event) {
this.flag = true;
},
//
done(event) {
this.flag = false;
this.trees[0].label = this.gateway;
this.sendTree();
},
rightClick(e, data, node) {
if (node.childNodes.length == 0) {
this.nodekey = data.id;
this.menuShow = false
this.menuShow = true
e.preventDefault() //
this.rightMenu = { top: e.pageY + 'px', left: e.pageX + 'px' }
document.addEventListener('click', (ev) => {
ev.stopImmediatePropagation()
if (ev.target !== document.querySelector('.el-menu-item.is-active')) {
this.foo()
}
})
}
},
// ,
selectMenuNode(index, indexPath) {
console.log(index);
if (index == 1) {
this.add_passage = true;
}
},
foo() {
//
this.menuShow = false
document.removeEventListener('click', this.foo) //
},
treeNodeClick() {
this.foo()
},
//
getRetract() {
if (this.is_retract == true) {
this.is_retract = false;
} else {
this.is_retract = true;
}
},
getDriveName() {
this.diag_drive = true;
},
closeMenu(ev) {
console.log({ ev });
this.dialogVisible = false;
},
handleDetailClick(data, node, value) {
console.log(data.label);
if (node.level == 2) {
this.formData.tdpz_qdmc = data.label;
this.diag_drive = false;
}
},
async saveGate() {
var obj = {
tdpz_tdmc: this.formData.tdpz_tdmc,
tdpz_td: this.formData.tdpz_td,
tdpz_qdmc: this.formData.tdpz_qdmc,
tdpz_port: this.formData.tdpz_port,
tdpz_chuankou: this.formData.tdpz_chuankou,
tdpz_btl: this.formData.tdpz_btl,
tdpz_sjw: this.formData.tdpz_sjw,
tdpz_tzw: this.formData.tdpz_tzw,
tdpz_jojy: this.formData.tdpz_jojy,
tdpz_cgsj: this.formData.tdpz_cgsj,
tdpz_jgsj: this.formData.tdpz_jgsj,
tdpz_lxsj: this.formData.tdpz_lxsj,
tdpz_cfcs: this.formData.tdpz_cfcs,
tdpz_watchtime: String(Number(this.formData.tdpz_watchtime)),
tdpz_cjsylxdz: String(Number(this.formData.tdpz_cjsylxdz)),
tdpz_dxzkb: this.tdpz_dxzkb1 + ":" + this.tdpz_dxzkb2,
tdpz_050F: this.formData.tdpz_050F,
tdpz_0610: this.formData.tdpz_0610,
}
this.add_passage = false;
let datas = sessionStorage.getItem("DB-IotLite_wx");
// console.log(this.formData);
datas = { ...JSON.parse(datas), ...obj };
let res = await SaveUserAnswer({
mark: "DB-IotLite_wx",
user_id: "USER202307301114011710",
mark_value: JSON.stringify(datas),
});
if (res.status == 200) {
this.$message({
message: '保存成功',
type: 'success'
});
}
sessionStorage.setItem("DB-IotLite_wx", JSON.stringify(datas));
console.log(res);
console.log(res.data.data.mark_value);
this.$refs["tree"].append({
id: this.nodekey + 1000,
label: this.formData.tdpz_tdmc
}, this.nodekey);
console.log(this.trees);
this.sendTree();
this.$router.push("/dbserialdevice");
},
//
async GetUserAnswer() {
this.loading = true;
let answer = await GetUserAnswer({
mark: "DB-IotLite_wx",
user_id: "USER202307301114011710",
})
this.loading = false;
console.log(answer);
console.log(answer.data);
if (answer.data.data && answer.data.state) {
// console.log(answer);
let obj = JSON.parse(answer.data.data.mark_value);
console.log(obj);
if (obj.tdpz_dxzkb) {
this.formData.tdpz_tdmc = obj.tdpz_tdmc;
this.formData.tdpz_td = obj.tdpz_td;
this.formData.tdpz_qdmc = obj.tdpz_qdmc;
this.formData.tdpz_chuankou = obj.tdpz_chuankou;
this.formData.tdpz_btl = obj.tdpz_btl;
this.formData.tdpz_sjw = obj.tdpz_sjw;
this.formData.tdpz_tzw = obj.tdpz_tzw;
this.formData.tdpz_jojy = obj.tdpz_jojy;
this.formData.tdpz_port = obj.tdpz_port;
this.formData.tdpz_cgsj = obj.tdpz_cgsj;
this.formData.tdpz_jgsj = obj.tdpz_jgsj;
this.formData.tdpz_lxsj = obj.tdpz_lxsj;
this.formData.tdpz_cfcs = obj.tdpz_cfcs;
this.formData.tdpz_050F = obj.tdpz_050F;
this.formData.tdpz_0610 = obj.tdpz_0610;
this.tdpz_dxzkb1 = obj.tdpz_dxzkb.split(":")[0];
this.tdpz_dxzkb2 = obj.tdpz_dxzkb.split(":")[1];
this.formData.tdpz_watchtime = Boolean(Number(obj.tdpz_watchtime));
this.formData.tdpz_cjsylxdz = Boolean(Number(obj.tdpz_cjsylxdz));
methods: {
edit(event) {
this.flag = true;
},
//
done(event) {
this.flag = false;
this.trees[0].label = this.gateway;
this.sendTree();
},
rightClick(e, data, node) {
if (node.childNodes.length == 0) {
this.nodekey = data.id;
this.menuShow = false
this.menuShow = true
e.preventDefault() //
this.rightMenu = { top: e.pageY + 'px', left: e.pageX + 'px' }
document.addEventListener('click', (ev) => {
ev.stopImmediatePropagation()
if (ev.target !== document.querySelector('.el-menu-item.is-active')) {
this.foo()
}
})
}
}
},
// ,
selectMenuNode(index, indexPath) {
console.log(index);
if (index == 1) {
this.add_passage = true;
}
},
foo() {
//
this.menuShow = false
document.removeEventListener('click', this.foo) //
},
treeNodeClick() {
this.foo()
},
//
getRetract() {
if (this.is_retract == true) {
this.is_retract = false;
} else {
this.is_retract = true;
}
},
getDriveName() {
this.diag_drive = true;
},
closeMenu(ev) {
console.log({ ev });
this.dialogVisible = false;
},
handleDetailClick(data, node, value) {
console.log(data.label);
if (node.level == 2) {
this.formData.tdpz_qdmc = data.label;
this.diag_drive = false;
}
},
async saveGate() {
var obj = {
tdpz_tdmc: this.formData.tdpz_tdmc,
tdpz_td: this.formData.tdpz_td,
tdpz_qdmc: this.formData.tdpz_qdmc,
tdpz_port: this.formData.tdpz_port,
tdpz_chuankou: this.formData.tdpz_chuankou,
tdpz_btl: this.formData.tdpz_btl,
tdpz_sjw: this.formData.tdpz_sjw,
tdpz_tzw: this.formData.tdpz_tzw,
tdpz_jojy: this.formData.tdpz_jojy,
tdpz_cgsj: this.formData.tdpz_cgsj,
tdpz_jgsj: this.formData.tdpz_jgsj,
tdpz_lxsj: this.formData.tdpz_lxsj,
tdpz_cfcs: this.formData.tdpz_cfcs,
tdpz_watchtime: String(Number(this.formData.tdpz_watchtime)),
tdpz_cjsylxdz: String(Number(this.formData.tdpz_cjsylxdz)),
tdpz_dxzkb: this.tdpz_dxzkb1 + ":" + this.tdpz_dxzkb2,
tdpz_050F: this.formData.tdpz_050F,
tdpz_0610: this.formData.tdpz_0610,
}
this.add_passage = false;
let datas = sessionStorage.getItem("DB-IotLite_wx");
// console.log(this.formData);
datas = { ...JSON.parse(datas), ...obj };
let res = await SaveUserAnswer({
mark: "DB-IotLite_wx",
user_id: "USER202307301114011710",
mark_value: JSON.stringify(datas),
});
if (res.status == 200) {
this.$message({
message: '保存成功',
type: 'success'
});
}
sessionStorage.setItem("DB-IotLite_wx", JSON.stringify(datas));
console.log(res);
console.log(res.data.data.mark_value);
this.$refs["tree"].append({
id: this.nodekey + 1000,
label: this.formData.tdpz_tdmc
}, this.nodekey);
console.log(this.trees);
this.sendTree();
this.$router.push("/dbserialdevice");
},
//
async GetUserAnswer() {
this.loading = true;
let answer = await GetUserAnswer({
mark: "DB-IotLite_wx",
user_id: "USER202307301114011710",
})
this.loading = false;
console.log(answer);
console.log(answer.data);
if (answer.data.data && answer.data.state) {
// console.log(answer);
let obj = JSON.parse(answer.data.data.mark_value);
console.log(obj);
if (obj.tdpz_dxzkb) {
this.formData.tdpz_tdmc = obj.tdpz_tdmc;
this.formData.tdpz_td = obj.tdpz_td;
this.formData.tdpz_qdmc = obj.tdpz_qdmc;
this.formData.tdpz_chuankou = obj.tdpz_chuankou;
this.formData.tdpz_btl = obj.tdpz_btl;
this.formData.tdpz_sjw = obj.tdpz_sjw;
this.formData.tdpz_tzw = obj.tdpz_tzw;
this.formData.tdpz_jojy = obj.tdpz_jojy;
this.formData.tdpz_port = obj.tdpz_port;
this.formData.tdpz_cgsj = obj.tdpz_cgsj;
this.formData.tdpz_jgsj = obj.tdpz_jgsj;
this.formData.tdpz_lxsj = obj.tdpz_lxsj;
this.formData.tdpz_cfcs = obj.tdpz_cfcs;
this.formData.tdpz_050F = obj.tdpz_050F;
this.formData.tdpz_0610 = obj.tdpz_0610;
this.tdpz_dxzkb1 = obj.tdpz_dxzkb.split(":")[0];
this.tdpz_dxzkb2 = obj.tdpz_dxzkb.split(":")[1];
this.formData.tdpz_watchtime = Boolean(Number(obj.tdpz_watchtime));
this.formData.tdpz_cjsylxdz = Boolean(Number(obj.tdpz_cjsylxdz));
}
}
},
async sendTree() {
let result = await SendTree({
user_id: "USER202307301114011710",
data: JSON.stringify(this.trees),
type: "1",
})
console.log(result);
},
},
async sendTree() {
let result = await SendTree({
mounted() {
GetTree({
user_id: "USER202307301114011710",
data: JSON.stringify(this.trees),
type: "1",
}).then((res) => {
console.log(res);
console.log(JSON.parse(res.data.data.data));
this.trees = JSON.parse(res.data.data.data);
})
console.log(result);
},
},
mounted() {
GetTree({
user_id: "USER202307301114011710",
type: "1",
}).then((res) => {
console.log(res);
console.log(JSON.parse(res.data.data.data));
this.trees = JSON.parse(res.data.data.data);
})
this.GetUserAnswer();
},
watch: {
"formData.tdpz_watchtime"(newval) {
console.log(newval);
if (newval) {
this.isdisabled = true;
} else {
this.isdisabled = false;
}
this.GetUserAnswer();
},
},
directives: {
'click-outside': {
"click-outside": {
bind: function (el, binding, vnode) {
console.log('el', el);
console.log("el", el);
console.log("binding", binding);
el.event = function (event) {
//
@ -910,18 +662,18 @@ export default {
//
//
// vnode.context
if (typeof vnode.context[binding.expression] == 'function') {
vnode.context[binding.expression](event)
if (typeof vnode.context[binding.expression] == "function") {
vnode.context[binding.expression](event);
}
}
}
};
//
// trueDOMlistener
document.body.addEventListener('click', el.event, true)
document.body.addEventListener("click", el.event, true);
},
unbind: function (el) {
//
document.body.removeEventListener('click', el.event, true)
document.body.removeEventListener("click", el.event, true);
},
},
},
@ -965,7 +717,6 @@ export default {
}
/deep/ .pas_params {
.el-col-12:last-child {
padding-right: 150px;
}
@ -1030,7 +781,6 @@ export default {
.el-dialog__footer {
padding: 18px 1.25rem 50px;
}
.dialog-footer {

View File

@ -102,10 +102,9 @@ export default {
let datas = JSON.parse(sessionStorage.getItem("CKFWQ_wx"));
let res = await SaveUserAnswer({
mark: "CKFWQ_wx",
user_id: "USER202307301114011710",
user_id: `${this.user_id}`,
mark_value: JSON.stringify(datas),
});
console.log(this.ruleForm, "存");
if (res.status == 200) {
sessionStorage.setItem(
"CKFWQ_wx",
@ -123,7 +122,7 @@ export default {
async GetUserAnswer() {
let { data } = await GetUserAnswer({
mark: "CKFWQ_wx",
user_id: "USER202307301114011710",
user_id: `${this.user_id}`,
});
console.log(obj);
if (data.data && data.state) {

View File

@ -192,7 +192,7 @@ export default {
datas = { ...JSON.parse(datas), ...this.ruleForm };
let res = await SaveUserAnswer({
mark: "CKFWQ_wx",
user_id: "USER202307301114011710",
user_id: `${this.user_id}`,
mark_value: JSON.stringify(datas),
});
console.log(res);
@ -212,7 +212,7 @@ export default {
this.loading = true;
let answers = await GetUserAnswer({
mark: "CKFWQ_wx",
user_id: "USER202307301114011710",
user_id: `${this.user_id}`,
});
let obj = JSON.parse(answers.data.data.mark_value);
console.log(answers);