chengdandan
/
InternetCompetition
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

l

This commit is contained in:
lll 2023-12-06 17:54:22 +08:00
parent 13731d173f
commit b7c753f5a3
5 changed files with 693 additions and 187 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

208
src/components/ChiClone.vue
View File

@ -5,8 +5,15 @@
<!-- <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="trees" node-key="id" :props="defaultProps" default-expand-all @node-contextmenu="rightClick"
@node-click="treeNodeClick" ref="tree">
<el-tree
:data="trees"
node-key="id"
:props="defaultProps"
default-expand-all
@node-contextmenu="rightClick"
@node-click="treeNodeClick"
ref="tree"
>
<!-- <span class="custom-tree-node" slot-scope="{ node, data }">
<template v-if="data.editing == 1 && flag">
<el-input style="width: 260px;" v-model="gateway" @change="changeInput"></el-input>
@ -22,7 +29,12 @@
<div class="con_left">
<h3 class="mqtt" style="margin-top: 20px; color: white">标准 MQTT</h3>
<el-divider></el-divider>
<el-form :model="formData" :label-position="labelPosition" :rules="rules" ref="formData">
<el-form
:model="formData"
:label-position="labelPosition"
:rules="rules"
ref="formData"
>
<el-row>
<el-col :span="24">
<el-form-item>
@ -32,22 +44,42 @@
</el-row>
<el-row class="serveIp">
<el-col :span="24">
<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-input v-model="mqtt_ip1" style="width: 43px; height: 30px" maxlength="3"></el-input>
<el-input
v-model="mqtt_ip1"
style="width: 43px; height: 30px"
maxlength="3"
></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" maxlength="3"></el-input>
<el-input
v-model="mqtt_ip2"
style="width: 43px; height: 30px"
maxlength="3"
></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" maxlength="3"></el-input>
<el-input
v-model="mqtt_ip3"
style="width: 43px; height: 30px"
maxlength="3"
></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" maxlength="3"></el-input>
<el-input
v-model="mqtt_ip4"
style="width: 43px; height: 30px"
maxlength="3"
></el-input>
</el-col>
</el-row>
</el-form-item>
@ -55,31 +87,62 @@
</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-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="12">
<el-form-item label="Keep Alive(s):" :label-width="formLabelWidth" prop="mqtt_keepalive">
<el-input v-model="formData.mqtt_keepalive" placeholder=""
style="width: 200px; height: 30px"></el-input>
<el-form-item
label="Keep Alive(s):"
:label-width="formLabelWidth"
prop="mqtt_keepalive"
>
<el-input
v-model="formData.mqtt_keepalive"
placeholder=""
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="实施数据发布主题:" :label-width="formLabelWidth" prop="mqtt_keepalive">
<el-input v-model="formData.mqtt_sssjfbzt" placeholder="" style="width: 200px; height: 30px"></el-input>
<el-form-item
label="实施数据发布主题:"
:label-width="formLabelWidth"
prop="mqtt_keepalive"
>
<el-input
v-model="formData.mqtt_sssjfbzt"
placeholder=""
style="width: 200px; height: 30px"
></el-input>
</el-form-item>
</el-col>
</el-row>
@ -105,9 +168,22 @@
<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="formData.mqtt_qos" placeholder="请选择" style="width: 200px">
<el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value">
<el-form-item
label="Qos(MQTT):"
:label-width="formLabelWidth"
prop="upload_week"
>
<el-select
v-model="formData.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>
@ -161,16 +237,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>
@ -181,8 +265,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>
@ -194,16 +284,40 @@
<!-- 网关信息 -->
<div class="gateway">
<el-dialog title="新建网关" :visible.sync="outerVisible" width="382px">
<el-form :model="formData" :rules="rulesGate" ref="gateWay" label-width="85px" class="demo-ruleForm">
<el-form
:model="formData"
:rules="rulesGate"
ref="gateWay"
label-width="85px"
class="demo-ruleForm"
>
<el-form-item label="网关名称:" prop="wgpz_wgmc">
<el-select v-model="formData.wgpz_wgmc" placeholder="请选择" style="width: 200px">
<el-option v-for="item in opts1" :key="item.value" :label="item.label" :value="item.value">
<el-select
v-model="formData.wgpz_wgmc"
placeholder="请选择"
style="width: 200px"
>
<el-option
v-for="item in opts1"
: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="请选择" style="width: 200px">
<el-option v-for="item in opts2" :key="item.value" :label="item.label" :value="item.value">
<el-select
v-model="formData.wgpz_wgid"
placeholder="请选择"
style="width: 200px"
>
<el-option
v-for="item in opts2"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</el-form-item>
@ -479,24 +593,24 @@ export default {
validateIp(rule, value, callback) {
if (
this.mqtt_ip1 +
"." +
this.mqtt_ip2 +
"." +
this.mqtt_ip3 +
"." +
this.mqtt_ip4 ===
"." +
this.mqtt_ip2 +
"." +
this.mqtt_ip3 +
"." +
this.mqtt_ip4 ===
"..."
) {
callback(new Error("请输入IP地址"));
} else if (
!/^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/.test(
this.mqtt_ip1 +
"." +
this.mqtt_ip2 +
"." +
this.mqtt_ip3 +
"." +
this.mqtt_ip4
"." +
this.mqtt_ip2 +
"." +
this.mqtt_ip3 +
"." +
this.mqtt_ip4
)
) {
callback(new Error("请输入有效的IP地址"));
@ -639,8 +753,8 @@ export default {
this.loading = false;
if (data.data && data.state) {
if (data.data.step) {
this.step = data.data.step;
};
this.step = data.data.step;
}
// console.log(JSON.parse(data.data.mark_value));
let obj = JSON.parse(data.data.mark_value);
if (obj.mqtt_ip) {
@ -718,7 +832,8 @@ export default {
this.outerVisible = false;
// this.innerVisible = false;
// console.log(JSON.parse(datas));
let datas = {...this.formData,...this.tableData[0]}
let datas = { ...this.formData, ...this.tableData[0] };
alert(JSON.stringify(datas));
let res = await SaveUserAnswer({
mark: "CHGYWG_yx",
user_id: this.user_id,
@ -732,6 +847,7 @@ export default {
message: "修改成功",
type: "success",
});
alert(JSON.stringify.res.data.state);
this.trees[0].label = this.formData.wgpz_wgid;
this.sendTree();
// sessionStorage.setItem("CHGYWG_yx", JSON.stringify(this.formData));

199
src/components/ChiClonewifi.vue
View File

@ -5,8 +5,15 @@
<!-- <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="trees" node-key="id" :props="defaultProps" default-expand-all @node-contextmenu="rightClick"
@node-click="treeNodeClick" ref="tree">
<el-tree
:data="trees"
node-key="id"
:props="defaultProps"
default-expand-all
@node-contextmenu="rightClick"
@node-click="treeNodeClick"
ref="tree"
>
<!-- <span class="custom-tree-node" slot-scope="{ node, data }">
<template v-if="data.editing == 1 && flag">
<el-input style="width: 260px;" v-model="gateway" @change="changeInput"></el-input>
@ -22,7 +29,12 @@
<div class="con_left">
<h3 class="mqtt" style="margin-top: 20px; color: white">标准 MQTT</h3>
<el-divider></el-divider>
<el-form :model="formData" :label-position="labelPosition" :rules="rules" ref="formData">
<el-form
:model="formData"
:label-position="labelPosition"
:rules="rules"
ref="formData"
>
<el-row>
<el-col :span="24">
<el-form-item>
@ -32,22 +44,42 @@
</el-row>
<el-row class="serveIp">
<el-col :span="24">
<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-input v-model="mqtt_ip1" style="width: 43px; height: 30px" maxlength="3"></el-input>
<el-input
v-model="mqtt_ip1"
style="width: 43px; height: 30px"
maxlength="3"
></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" maxlength="3"></el-input>
<el-input
v-model="mqtt_ip2"
style="width: 43px; height: 30px"
maxlength="3"
></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" maxlength="3"></el-input>
<el-input
v-model="mqtt_ip3"
style="width: 43px; height: 30px"
maxlength="3"
></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" maxlength="3"></el-input>
<el-input
v-model="mqtt_ip4"
style="width: 43px; height: 30px"
maxlength="3"
></el-input>
</el-col>
</el-row>
</el-form-item>
@ -55,31 +87,62 @@
</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-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="12">
<el-form-item label="Keep Alive(s):" :label-width="formLabelWidth" prop="mqtt_keepalive">
<el-input v-model="formData.mqtt_keepalive" placeholder=""
style="width: 200px; height: 30px"></el-input>
<el-form-item
label="Keep Alive(s):"
:label-width="formLabelWidth"
prop="mqtt_keepalive"
>
<el-input
v-model="formData.mqtt_keepalive"
placeholder=""
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="实施数据发布主题:" :label-width="formLabelWidth" prop="mqtt_keepalive">
<el-input v-model="formData.mqtt_sssjfbzt" placeholder="" style="width: 200px; height: 30px"></el-input>
<el-form-item
label="实施数据发布主题:"
:label-width="formLabelWidth"
prop="mqtt_keepalive"
>
<el-input
v-model="formData.mqtt_sssjfbzt"
placeholder=""
style="width: 200px; height: 30px"
></el-input>
</el-form-item>
</el-col>
</el-row>
@ -105,9 +168,22 @@
<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="formData.mqtt_qos" placeholder="请选择" style="width: 200px">
<el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value">
<el-form-item
label="Qos(MQTT):"
:label-width="formLabelWidth"
prop="upload_week"
>
<el-select
v-model="formData.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>
@ -161,16 +237,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>
@ -194,16 +278,40 @@
<!-- 网关信息 -->
<div class="gateway">
<el-dialog title="新建网关" :visible.sync="outerVisible" width="382px">
<el-form :model="formData" :rules="rulesGate" ref="gateWay" label-width="85px" class="demo-ruleForm">
<el-form
:model="formData"
:rules="rulesGate"
ref="gateWay"
label-width="85px"
class="demo-ruleForm"
>
<el-form-item label="网关名称:" prop="wgpz_wgmc">
<el-select v-model="formData.wgpz_wgmc" placeholder="请选择" style="width: 200px">
<el-option v-for="item in opts1" :key="item.value" :label="item.label" :value="item.value">
<el-select
v-model="formData.wgpz_wgmc"
placeholder="请选择"
style="width: 200px"
>
<el-option
v-for="item in opts1"
: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="请选择" style="width: 200px">
<el-option v-for="item in opts2" :key="item.value" :label="item.label" :value="item.value">
<el-select
v-model="formData.wgpz_wgid"
placeholder="请选择"
style="width: 200px"
>
<el-option
v-for="item in opts2"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</el-form-item>
@ -244,7 +352,6 @@ export default {
options2: [],
options3: [],
formData: {
mqtt_ip: "",
mqtt_wgsn: "",
mqtt_port: "",
@ -455,7 +562,7 @@ export default {
console.log(res);
console.log(JSON.parse(res.data.data.data));
this.trees = JSON.parse(res.data.data.data);
console.log(this.trees, 'this.trees');
console.log(this.trees, "this.trees");
});
},
methods: {
@ -463,24 +570,24 @@ export default {
validateIp(rule, value, callback) {
if (
this.mqtt_ip1 +
"." +
this.mqtt_ip2 +
"." +
this.mqtt_ip3 +
"." +
this.mqtt_ip4 ===
"." +
this.mqtt_ip2 +
"." +
this.mqtt_ip3 +
"." +
this.mqtt_ip4 ===
"..."
) {
callback(new Error("请输入IP地址"));
} else if (
!/^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/.test(
this.mqtt_ip1 +
"." +
this.mqtt_ip2 +
"." +
this.mqtt_ip3 +
"." +
this.mqtt_ip4
"." +
this.mqtt_ip2 +
"." +
this.mqtt_ip3 +
"." +
this.mqtt_ip4
)
) {
callback(new Error("请输入有效的IP地址"));
@ -671,7 +778,7 @@ export default {
this.tableData[0].mqtt_cjd_sbmc = obj.sbpz_sbmc;
this.tableData[0].mqtt_cjd_tagid = obj.cjdpz_tagid;
}
console.log(this.formData, 'this.formData');
console.log(this.formData, "this.formData");
},
async sendTree() {
let result = await SendTree({
@ -741,11 +848,13 @@ export default {
// console.log(JSON.parse(datas));
// datas = { ...JSON.parse(datas), ...this.gateWay };
// console.log(datas);
let datas = { ...this.formData, ...this.tableData[0] };
let res = await SaveUserAnswer({
mark: "CHGYWG_wx",
user_id: this.user_id,
// user_id: "USER202307301114011710",
mark_value: JSON.stringify(this.formData),
mark_value: JSON.stringify(datas),
step: this.step,
});
if (res.data.state) {
this.$message({

1
src/components/ChiCollection.vue
View File

@ -1413,6 +1413,7 @@ export default {
mark_value: JSON.stringify(obj),
step: "2",
});
alert(JSON.stringify(res.data));
console.log(res);
if (res.data.state) {
this.$message({

246
src/components/CloneView.vue
View File

@ -4,8 +4,15 @@
<!-- <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-contextmenu="rightClick"
@node-click="treeNodeClick" ref="tree">
<el-tree
:data="trees"
node-key="id"
:props="defaultProps"
default-expand-all
@node-contextmenu="rightClick"
@node-click="treeNodeClick"
ref="tree"
>
</el-tree>
</div>
<!-- </div> -->
@ -16,7 +23,12 @@
MQTT Client
</h3>
<el-divider></el-divider>
<el-form :model="formData" :label-position="labelPosition" :rules="rules" ref="formData">
<el-form
:model="formData"
:label-position="labelPosition"
:rules="rules"
ref="formData"
>
<el-row>
<el-col :span="24">
<el-form-item>
@ -26,30 +38,50 @@
</el-row>
<el-row class="serveip">
<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>
@ -58,29 +90,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>
@ -95,22 +161,47 @@
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="上传模式:" :label-width="formLabelWidth" prop="mqtt_scms">
<el-select v-model="formData.mqtt_scms" placeholder="请选择" style="width: 99px">
<el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value">
<el-form-item
label="上传模式:"
:label-width="formLabelWidth"
prop="mqtt_scms"
>
<el-select
v-model="formData.mqtt_scms"
placeholder="请选择"
style="width: 99px"
>
<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="上传周期(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"
>
<div class="checkbox1">
<el-checkbox-group v-model="formData.mqtt_sjgl">
<el-checkbox label="值改变">值改变</el-checkbox>
@ -145,16 +236,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 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>
<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 options4" :key="index" :label="option.label"
:value="option.value"></el-option>
<el-option
v-for="(option, index) in options4"
:key="index"
:label="option.label"
:value="option.value"
></el-option>
</el-select>
</template>
</el-table-column>
@ -165,8 +264,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>
@ -177,22 +282,55 @@
<div class="gateway">
<el-dialog title="新建网关" :visible.sync="outerVisible" width="382px">
<el-form :model="formData" :rules="rulesGate" ref="gateWay" label-width="85px" class="demo-ruleForm">
<el-form
:model="formData"
:rules="rulesGate"
ref="gateWay"
label-width="85px"
class="demo-ruleForm"
>
<el-form-item label="网关名称:" prop="wgpz_wgmc">
<el-select v-model="formData.wgpz_wgmc" placeholder="请选择" style="width: 200px">
<el-option v-for="item in opts1" :key="item.value" :label="item.label" :value="item.value">
<el-select
v-model="formData.wgpz_wgmc"
placeholder="请选择"
style="width: 200px"
>
<el-option
v-for="item in opts1"
: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="请选择" style="width: 200px">
<el-option v-for="item in opts2" :key="item.value" :label="item.label" :value="item.value">
<el-select
v-model="formData.wgpz_wgid"
placeholder="请选择"
style="width: 200px"
>
<el-option
v-for="item in opts2"
: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="请选择" style="width: 200px">
<el-option v-for="item in opts3" :key="item.value" :label="item.label" :value="item.value">
<el-select
v-model="formData.wgpz_wglx"
placeholder="请选择"
style="width: 200px"
>
<el-option
v-for="item in opts3"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</el-form-item>
@ -496,24 +634,24 @@ export default {
validateIp(rule, value, callback) {
if (
this.mqtt_ip1 +
"." +
this.mqtt_ip2 +
"." +
this.mqtt_ip3 +
"." +
this.mqtt_ip4 ===
"." +
this.mqtt_ip2 +
"." +
this.mqtt_ip3 +
"." +
this.mqtt_ip4 ===
"..."
) {
callback(new Error("请输入IP地址"));
} else if (
!/^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/.test(
this.mqtt_ip1 +
"." +
this.mqtt_ip2 +
"." +
this.mqtt_ip3 +
"." +
this.mqtt_ip4
"." +
this.mqtt_ip2 +
"." +
this.mqtt_ip3 +
"." +
this.mqtt_ip4
)
) {
callback(new Error("请输入有效的IP地址"));
@ -595,7 +733,14 @@ export default {
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_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,
@ -701,7 +846,6 @@ export default {
this.formData.cjdpz_beilv = obj.cjdpz_beilv;
this.tableData[0].mqtt_cjd_sbmc = obj.sbpz_sbmc;
this.tableData[0].mqtt_cjd_tagid = obj.cjdpz_tagid;
}
},
async sendTree() {
@ -739,11 +883,13 @@ export default {
// console.log(JSON.parse(datas));
// let datas = { ...this.f, ...this.gateWay };
// console.log(datas);
let datas = { ...this.formData, ...this.tableData[0] };
let res = await SaveUserAnswer({
mark: "DB-IotLite_yx",
user_id: this.user_id,
// user_id: "USER202307301114011710",
mark_value: JSON.stringify(this.formData),
mark_value: JSON.stringify(datas),
step: this.step,
});
if (res.data.state) {
this.$message({

226
src/components/CloneWifi.vue
View File

@ -4,8 +4,15 @@
<!-- <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-contextmenu="rightClick"
@node-click="treeNodeClick" ref="tree">
<el-tree
:data="trees"
node-key="id"
:props="defaultProps"
default-expand-all
@node-contextmenu="rightClick"
@node-click="treeNodeClick"
ref="tree"
>
</el-tree>
</div>
<!-- </div> -->
@ -16,7 +23,12 @@
MQTT Client
</h3>
<el-divider></el-divider>
<el-form :model="formData" :label-position="labelPosition" :rules="rules" ref="formData">
<el-form
:model="formData"
:label-position="labelPosition"
:rules="rules"
ref="formData"
>
<el-row>
<el-col :span="24">
<el-form-item>
@ -26,30 +38,50 @@
</el-row>
<el-row class="serveip">
<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>
@ -58,29 +90,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>
@ -90,22 +156,47 @@
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="上传模式:" :label-width="formLabelWidth" prop="mqtt_scms">
<el-select v-model="formData.mqtt_scms" placeholder="请选择" style="width: 99px">
<el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value">
<el-form-item
label="上传模式:"
:label-width="formLabelWidth"
prop="mqtt_scms"
>
<el-select
v-model="formData.mqtt_scms"
placeholder="请选择"
style="width: 99px"
>
<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="上传周期(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"
>
<div class="checkbox1">
<el-checkbox-group v-model="formData.mqtt_sjgl">
<el-checkbox label="值改变">值改变</el-checkbox>
@ -140,16 +231,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 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>
<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 options4" :key="index" :label="option.label"
:value="option.value"></el-option>
<el-option
v-for="(option, index) in options4"
:key="index"
:label="option.label"
:value="option.value"
></el-option>
</el-select>
</template>
</el-table-column>
@ -172,22 +271,55 @@
<div class="gateway">
<el-dialog title="新建网关" :visible.sync="outerVisible" width="382px">
<el-form :model="formData" :rules="rulesGate" ref="gateWay" label-width="85px" class="demo-ruleForm">
<el-form
:model="formData"
:rules="rulesGate"
ref="gateWay"
label-width="85px"
class="demo-ruleForm"
>
<el-form-item label="网关名称:" prop="wgpz_wgmc">
<el-select v-model="formData.wgpz_wgmc" placeholder="请选择" style="width: 200px">
<el-option v-for="item in opts1" :key="item.value" :label="item.label" :value="item.value">
<el-select
v-model="formData.wgpz_wgmc"
placeholder="请选择"
style="width: 200px"
>
<el-option
v-for="item in opts1"
: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="请选择" style="width: 200px">
<el-option v-for="item in opts2" :key="item.value" :label="item.label" :value="item.value">
<el-select
v-model="formData.wgpz_wgid"
placeholder="请选择"
style="width: 200px"
>
<el-option
v-for="item in opts2"
: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="请选择" style="width: 200px">
<el-option v-for="item in opts3" :key="item.value" :label="item.label" :value="item.value">
<el-select
v-model="formData.wgpz_wglx"
placeholder="请选择"
style="width: 200px"
>
<el-option
v-for="item in opts3"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</el-form-item>
@ -497,24 +629,24 @@ export default {
validateIp(rule, value, callback) {
if (
this.mqtt_ip1 +
"." +
this.mqtt_ip2 +
"." +
this.mqtt_ip3 +
"." +
this.mqtt_ip4 ===
"." +
this.mqtt_ip2 +
"." +
this.mqtt_ip3 +
"." +
this.mqtt_ip4 ===
"..."
) {
callback(new Error("请输入IP地址"));
} else if (
!/^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/.test(
this.mqtt_ip1 +
"." +
this.mqtt_ip2 +
"." +
this.mqtt_ip3 +
"." +
this.mqtt_ip4
"." +
this.mqtt_ip2 +
"." +
this.mqtt_ip3 +
"." +
this.mqtt_ip4
)
) {
callback(new Error("请输入有效的IP地址"));
@ -720,11 +852,13 @@ export default {
// console.log(JSON.parse(datas));
// let datas = { ...this.f, ...this.gateWay };
// console.log(datas);
let datas = { ...this.formData, ...this.tableData[0] };
let res = await SaveUserAnswer({
mark: "DB-IotLite_wx",
user_id: this.user_id,
// user_id: "USER202307301114011710",
mark_value: JSON.stringify(this.formData),
mark_value: JSON.stringify(datas),
step: this.step,
});
if (res.data.state) {
this.$message({