InternetCompetition/.history/src/components/CloneView_20231109195334.vue

765 lines
22 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!-- db网关的数据采集MQTT云服务 -->
<template>
<div class="Clone">
<!-- <div v-click-outside="closeMenu"> -->
<!-- <el-button type="info" plain @click="dialogVisible = !dialogVisible">MQTT云</el-button> -->
<div v-show="dialogVisible" class="tree_menu">
<el-tree :data="datas" :props="defaultProps" default-expand-all @node-click="treeNodeClick"></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 } from "@/api/user";
export default {
name: "CloneView",
data() {
return {
loading: false,
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" },
],
},
};
},
created() {
let that = this;
window.getParameter = that.getParameter;
},
methods: {
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);
},
},
directives: {
"click-outside": {
bind: function (el, binding, vnode) {
console.log("el", el);
console.log("binding", binding);
el.event = function (event) {
// 检查点击是否发生在节点之内(包括子节点)
if (!(el == event.target || el.contains(event.target))) {
// 如果没有,则触发调用
// 若绑定值为函数,则执行
// 这里我们可以通过钩子函数中的 vnode.context来获取当前组件的作用域
if (typeof vnode.context[binding.expression] == "function") {
vnode.context[binding.expression](event);
}
}
};
// 绑定事件
// 设置为true代表在DOM树中注册了该listener的元素会先于它下方的任何事件目标接收到该事件。
document.body.addEventListener("click", el.event, true);
},
unbind: function (el) {
// 解绑事件
document.body.removeEventListener("click", el.event, true);
},
},
},
created() {
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>