From fadfda7644d8947a170ce82a13dbaef90dcc3157 Mon Sep 17 00:00:00 2001
From: wangqiujuan0808 <578331299@qq.com>
Date: Wed, 8 May 2024 23:16:35 +0800
Subject: [PATCH] =?UTF-8?q?=E3=80=82=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/infoApi.js             |  42 ++--
 src/components/AddSet copy.vue | 262 +++++++++++++++++++++++
 src/components/AddSet.vue      | 370 ++++++++++++---------------------
 src/components/ViewSet.vue     | 120 +++++++++++
 src/utils/axios.js             |   5 +-
 src/views/Page.vue             |  35 ++--
 6 files changed, 560 insertions(+), 274 deletions(-)
 create mode 100644 src/components/AddSet copy.vue
 create mode 100644 src/components/ViewSet.vue

diff --git a/src/api/infoApi.js b/src/api/infoApi.js
index 8e49d36..3826d00 100644
--- a/src/api/infoApi.js
+++ b/src/api/infoApi.js
@@ -80,14 +80,6 @@ const infoApi = {
   detP(params) {
     return postPBRequest('/template', params, 53310, params.template_name)
   },
-  //   // 获取设备列表
-  //   getSet(params) {
-  //     return postJsonRequest('/tx/info', params)
-  //   },
-  //    // 新增设备
-  //    addSet(params) {
-  //     return putRequest('/tx/device', params)
-  //   },
   // 驱动列表查询
   getTx(params) {
     return postPBRequest('/driver', params, 54000)
@@ -109,19 +101,33 @@ const infoApi = {
   getTxSupport() {
     return postPBRequest('/driver', null, 54001)
   },
+  // 查询查询驱动下设备的可用模板列表
   // 查询驱动配置项
-  getTxConfig(params) {
-    return postPBRequest("/driver", params, 53002);
+  getTxTemplate(params) {
+    return postPBRequest("/driver", params, 54011, params.driver_name);
+  },
+  // 新增设备
+  addSet(params) {
+    return postPBRequest('/driver', params, 54110, params.driver_name)
   },
 
-    // 通讯服务启用,停用
-    startStatus(params) {
-      return postPBRequest("/driver", params,53201);
-    },
-    // 通讯服务停止
-    stopStatus(params) {
-      return postPBRequest("/driver", params,53202);
-    }
+  // 获取设备列表
+  getSet(params) {
+    return postPBRequest('/driver', params, 54010, params.driver_name)
+  },
+  // 删除设备
+  delSet(params) {
+    return postPBRequest('/driver', params, 54310, params.driver_name)
+  },
+
+  // 通讯服务启用,停用
+  startStatus(params) {
+    return postPBRequest("/driver", params, 53201);
+  },
+  // 通讯服务停止
+  stopStatus(params) {
+    return postPBRequest("/driver", params, 53202);
+  }
 
   //   // 获取上报列表
   //   getSc(params) {
diff --git a/src/components/AddSet copy.vue b/src/components/AddSet copy.vue
new file mode 100644
index 0000000..4f4f5af
--- /dev/null
+++ b/src/components/AddSet copy.vue	
@@ -0,0 +1,262 @@
+<template>
+  <el-dialog
+   v-model="visible"
+   title="设备管理"
+   width="60%"
+   :before-close="closeDialog"
+ >
+   <el-card class="top-title">
+     <span>通讯名称：{{ addForm.name }}</span>
+     <span>通讯描述：{{ addForm.description }}</span>
+     <span>通讯主机：{{ addForm.host }}</span>
+   </el-card>
+   <div class="btns">
+     <div>
+         <el-button type="primary" @click="saveSet"> 保存 </el-button>
+         <el-button @click="closeDialog">取消</el-button>
+     </div>
+     <div>
+         <el-button type="primary" @click="scanData"> 扫描 </el-button>
+          
+     </div>
+   </div>
+   <div>
+     <el-table
+       :data="propertiesData"
+       height="230"
+       style="width: 100%"
+       border
+       stripe
+       :header-cell-style="{ background: '#F6F7FC' }"
+     >
+       <el-table-column
+         prop="name"
+         label="设备名称"
+         align="center"
+         show-overflow-tooltip
+       >
+         <template #default="scope">
+           <el-input
+             v-model="scope.row.name"
+             clearable
+           />
+         </template>
+       </el-table-column>
+       <el-table-column
+         prop="ID"
+         label="设备id"
+         align="center"
+         show-overflow-tooltip
+       >
+         <template #default="scope">
+           <el-input
+             v-model="scope.row.ID"
+             clearable
+           />
+         </template>
+       </el-table-column>
+       <el-table-column
+         prop="template"
+         label="数据模板"
+         align="center"
+         show-overflow-tooltip
+       >
+         <template #default="scope">
+           <el-select v-model="scope.row.template" clearable placeholder="请选择模板" size="mini">
+             <el-option
+               v-for="item in modelArr"
+               :key="item.name"
+               :label="item.name"
+               :value="item.name"
+               
+             />
+           </el-select>
+         </template>
+       </el-table-column>
+      
+       <el-table-column
+         prop="description"
+         label="设备描述"
+         align="center"
+         show-overflow-tooltip
+       >
+         <template #default="scope">
+           <el-input
+             v-model="scope.row.description"
+             clearable
+           />
+         </template>
+       </el-table-column>
+       <el-table-column label="操作" align="center" show-overflow-tooltip>
+          <template #default="scope">
+            <el-button type="danger" @click="delData(scope.$index)">
+              删除
+            </el-button>
+          </template>
+        </el-table-column>
+     </el-table>
+     <div class="flex-center" @click="addRow">
+       +新增一行
+     </div>
+   </div>
+ </el-dialog>
+</template>
+<script>
+import { onMounted, reactive, ref, toRefs, computed, nextTick } from "vue";
+import infoApi from "@/api/infoApi.js";
+import { ElMessage, ElMessageBox } from "element-plus";
+// import { mb_list, tx_info, response, m_device, m_properties, tx_add_device} from '../proto/data/pd'
+export default {
+ props: ["formData", "dialogVisible"],
+ emits: ["dialogClose", "dialogSuccess"],
+ setup(props, ctx) {
+   const state = reactive({
+     addForm: {},
+     propertiesData: [],
+     modelArr: []
+   });
+   const visible = computed(() => {
+     return props.dialogVisible;
+   });
+
+   onMounted(() => {
+     state.addForm = props.formData;
+     console.log(123, props.formData)
+    // 获取模板数据
+    getMbData();
+    // 获取点位列表
+    getSetList();
+   });
+   const getMbData = async () => {
+      const res = await infoApi.getMb();
+      const ret = response.decode(new Uint8Array(res));
+      
+      if (ret.code == 0) {
+          // 获取数据
+          state.modelArr = mb_list.decode(ret.data).mb;
+          console.log(mb_list.decode(ret.data).mb);
+      } else {
+          console.log(res);
+      }
+    };
+   const getSetList = async() => {
+     const parm = tx_info.encode({
+         name: state.addForm.name
+     }).finish();
+     // 截取有效长度
+     const parm_data = parm.slice(0, parm.length);
+     const res = await infoApi.getSet(parm_data);
+     const ret = response.decode(new Uint8Array(res));
+     if (ret.code == 0) {
+        console.log(99, tx_info.decode(ret.data).device);
+        const propArr = tx_info.decode(ret.data).device;
+        state.propertiesData = [];
+        propArr.forEach(v => {
+          state.propertiesData.push({
+            name: v.name,
+            ID: v.properties[0].value,
+            template: v.properties[1].value,
+            description: v.properties[2].value,
+          })
+        })
+         
+        
+     } else {
+        console.log(res);
+     }
+   };
+   const closeDialog = () => {
+     ctx.emit("dialogClose");
+   };
+
+   const scanData = () => {};
+
+   const saveSet = async () => {
+    if (state.propertiesData.length < 1) {
+        return ElMessage.error("请至少添加一条数据");
+      }
+      const newArr = [];
+      state.propertiesData.forEach(item => {
+        newArr.push({
+          name: item.name,
+          properties: [
+            {
+            name: 'ID', value: item.ID
+            },{
+              name: 'template', value: item.template
+            },{
+              name: 'description', value: item.description
+            }]
+        })
+      })
+      
+      const req_databuf = tx_add_device.encode({
+          name: state.addForm.name,
+          device: newArr
+      }).finish();
+      
+      // 截取有效长度
+      const req_data = req_databuf.slice(0, req_databuf.length);
+      const res = await infoApi.addSet(req_data);
+      const ret = response.decode(new Uint8Array(res));
+      
+      if (ret.code == 0) {
+        console.log(new TextDecoder().decode(ret.data));
+        ElMessage.success(new TextDecoder().decode(ret.data) || "请求成功");
+        // 获取数据
+        getSetList();
+      }
+         
+   };
+   const addRow = () => {
+     let newRow = { 
+       name: '', 
+       address: '', 
+       datatype: 'bool',
+       byteorder: 'null', 
+       multplier: '', 
+       unit: '',
+       description: ''
+      };
+     state.propertiesData.push(newRow);
+   }
+   const delData = (index) => {
+      state.propertiesData.splice(index, 1);
+    }
+   return {
+     ...toRefs(state),
+     visible,
+     closeDialog,
+     scanData,
+     addRow,
+     saveSet,
+     delData,
+     getMbData
+   };
+ },
+};
+</script>
+<style lang="scss" scoped>
+.top-title {
+ width: 100%;
+ ::v-deep .el-card__body {
+   width: 100%;
+   display: flex;
+   justify-content: space-between;
+   font-weight: 800;
+   font-size: 16px;
+ }
+} 
+.btns {
+ padding: 15px 0;
+ width: 100%;
+ display: flex;
+ justify-content: space-between;
+}
+.flex-center {
+ display: flex;
+ justify-content: center;
+ padding: 10px 0;
+ cursor: pointer;
+}
+</style>
diff --git a/src/components/AddSet.vue b/src/components/AddSet.vue
index 4f4f5af..4814fdb 100644
--- a/src/components/AddSet.vue
+++ b/src/components/AddSet.vue
@@ -1,262 +1,150 @@
 <template>
-  <el-dialog
-   v-model="visible"
-   title="设备管理"
-   width="60%"
-   :before-close="closeDialog"
- >
-   <el-card class="top-title">
-     <span>通讯名称：{{ addForm.name }}</span>
-     <span>通讯描述：{{ addForm.description }}</span>
-     <span>通讯主机：{{ addForm.host }}</span>
-   </el-card>
-   <div class="btns">
-     <div>
-         <el-button type="primary" @click="saveSet"> 保存 </el-button>
-         <el-button @click="closeDialog">取消</el-button>
-     </div>
-     <div>
-         <el-button type="primary" @click="scanData"> 扫描 </el-button>
-          
-     </div>
-   </div>
-   <div>
-     <el-table
-       :data="propertiesData"
-       height="230"
-       style="width: 100%"
-       border
-       stripe
-       :header-cell-style="{ background: '#F6F7FC' }"
-     >
-       <el-table-column
-         prop="name"
-         label="设备名称"
-         align="center"
-         show-overflow-tooltip
-       >
-         <template #default="scope">
-           <el-input
-             v-model="scope.row.name"
-             clearable
-           />
-         </template>
-       </el-table-column>
-       <el-table-column
-         prop="ID"
-         label="设备id"
-         align="center"
-         show-overflow-tooltip
-       >
-         <template #default="scope">
-           <el-input
-             v-model="scope.row.ID"
-             clearable
-           />
-         </template>
-       </el-table-column>
-       <el-table-column
-         prop="template"
-         label="数据模板"
-         align="center"
-         show-overflow-tooltip
-       >
-         <template #default="scope">
-           <el-select v-model="scope.row.template" clearable placeholder="请选择模板" size="mini">
-             <el-option
-               v-for="item in modelArr"
-               :key="item.name"
-               :label="item.name"
-               :value="item.name"
-               
-             />
-           </el-select>
-         </template>
-       </el-table-column>
-      
-       <el-table-column
-         prop="description"
-         label="设备描述"
-         align="center"
-         show-overflow-tooltip
-       >
-         <template #default="scope">
-           <el-input
-             v-model="scope.row.description"
-             clearable
-           />
-         </template>
-       </el-table-column>
-       <el-table-column label="操作" align="center" show-overflow-tooltip>
-          <template #default="scope">
-            <el-button type="danger" @click="delData(scope.$index)">
-              删除
-            </el-button>
-          </template>
-        </el-table-column>
-     </el-table>
-     <div class="flex-center" @click="addRow">
-       +新增一行
-     </div>
-   </div>
- </el-dialog>
+  <el-dialog v-model="visible" title="设备管理" width="60%" :before-close="closeDialog">
+    <el-form :model="addForm" label-width="100px" :rules="rules" ref="ruleFormRef">
+      <el-form-item label="设备名称:" prop="name">
+        <el-input v-model="addForm.name" placeholder="请输入点位名称" clearable />
+      </el-form-item>
+      <el-form-item label="设备id:" prop="id">
+        <el-input v-model="addForm.id" placeholder="请输入设备id" clearable type="number" />
+      </el-form-item>
+      <el-form-item label="模板名称:" prop="template_name">
+        <el-select v-model="addForm.template_name" size="mini" placeholder="请选择模板名称">
+          <el-option v-for="item in modelArr" :key="item.name" :label="item.name"
+            :value="item.name" />
+        </el-select>
+      </el-form-item>
+
+      <el-form-item label="设备描述:" prop="description">
+        <el-input v-model="addForm.description" placeholder="请输入点位描述" clearable />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <span class="dialog-footer">
+        <el-button @click="closeDialog">取消</el-button>
+        <el-button type="primary" @click="saveSet"> 保存 </el-button>
+      </span>
+    </template>
+  </el-dialog>
 </template>
 <script>
 import { onMounted, reactive, ref, toRefs, computed, nextTick } from "vue";
 import infoApi from "@/api/infoApi.js";
 import { ElMessage, ElMessageBox } from "element-plus";
-// import { mb_list, tx_info, response, m_device, m_properties, tx_add_device} from '../proto/data/pd'
 export default {
- props: ["formData", "dialogVisible"],
- emits: ["dialogClose", "dialogSuccess"],
- setup(props, ctx) {
-   const state = reactive({
-     addForm: {},
-     propertiesData: [],
-     modelArr: []
-   });
-   const visible = computed(() => {
-     return props.dialogVisible;
-   });
+  props: ["formData", "dialogVisible"],
+  emits: ["dialogClose", "dialogSuccess"],
+  setup(props, ctx) {
+    const ruleFormRef = ref(null);
+    const state = reactive({
+      addForm: {
+        name: '',
+        template_name: '',
+        id: 1,
+        description: ''
+      },
+      modelArr: [],
+      rules: {
+        name: [{ required: true, message: "请输入设备名称", trigger: "blur" }],
+        template_name: [{ required: true, message: "请选择模板名称", trigger: "blur" }],
+        id: [{ required: true, message: "请输入设备ID", trigger: "blur" }],
+      },
+    });
+    const visible = computed(() => {
+      return props.dialogVisible;
+    });
 
-   onMounted(() => {
-     state.addForm = props.formData;
-     console.log(123, props.formData)
-    // 获取模板数据
-    getMbData();
-    // 获取点位列表
-    getSetList();
-   });
-   const getMbData = async () => {
-      const res = await infoApi.getMb();
-      const ret = response.decode(new Uint8Array(res));
-      
-      if (ret.code == 0) {
-          // 获取数据
-          state.modelArr = mb_list.decode(ret.data).mb;
-          console.log(mb_list.decode(ret.data).mb);
+    onMounted(() => {
+      console.log(123, props.formData)
+      // 获取模板数据
+      getTxTemplate();
+    });
+    const getTxTemplate = async () => {
+      const param = {
+        driver_name: props.formData.name
+      }
+      const res = await infoApi.getTxTemplate(param);
+
+      if (res.code == 0) {
+        // 获取数据
+        state.modelArr = [];
+        const data = res.data;
+        for (let i in data) {
+        let obj = {
+          key: Number(i),
+          name: data[i]
+        }
+        state.modelArr.push(obj);
+        console.log(33,state.modelArr);
+      }
+        console.log(state.modelArr);
+        state.addForm.template_name = state.modelArr[0].name;
       } else {
-          console.log(res);
+        ElMessage.error(res.message || "请求失败");
       }
     };
-   const getSetList = async() => {
-     const parm = tx_info.encode({
-         name: state.addForm.name
-     }).finish();
-     // 截取有效长度
-     const parm_data = parm.slice(0, parm.length);
-     const res = await infoApi.getSet(parm_data);
-     const ret = response.decode(new Uint8Array(res));
-     if (ret.code == 0) {
-        console.log(99, tx_info.decode(ret.data).device);
-        const propArr = tx_info.decode(ret.data).device;
-        state.propertiesData = [];
-        propArr.forEach(v => {
-          state.propertiesData.push({
-            name: v.name,
-            ID: v.properties[0].value,
-            template: v.properties[1].value,
-            description: v.properties[2].value,
-          })
-        })
-         
-        
-     } else {
-        console.log(res);
-     }
-   };
-   const closeDialog = () => {
-     ctx.emit("dialogClose");
-   };
+    const closeDialog = () => {
+      ctx.emit("dialogClose");
+    };
 
-   const scanData = () => {};
+    const scanData = () => { };
 
-   const saveSet = async () => {
-    if (state.propertiesData.length < 1) {
-        return ElMessage.error("请至少添加一条数据");
-      }
-      const newArr = [];
-      state.propertiesData.forEach(item => {
-        newArr.push({
-          name: item.name,
-          properties: [
-            {
-            name: 'ID', value: item.ID
-            },{
-              name: 'template', value: item.template
-            },{
-              name: 'description', value: item.description
-            }]
-        })
-      })
-      
-      const req_databuf = tx_add_device.encode({
-          name: state.addForm.name,
-          device: newArr
-      }).finish();
-      
-      // 截取有效长度
-      const req_data = req_databuf.slice(0, req_databuf.length);
-      const res = await infoApi.addSet(req_data);
-      const ret = response.decode(new Uint8Array(res));
-      
-      if (ret.code == 0) {
-        console.log(new TextDecoder().decode(ret.data));
-        ElMessage.success(new TextDecoder().decode(ret.data) || "请求成功");
-        // 获取数据
-        getSetList();
-      }
-         
-   };
-   const addRow = () => {
-     let newRow = { 
-       name: '', 
-       address: '', 
-       datatype: 'bool',
-       byteorder: 'null', 
-       multplier: '', 
-       unit: '',
-       description: ''
-      };
-     state.propertiesData.push(newRow);
-   }
-   const delData = (index) => {
-      state.propertiesData.splice(index, 1);
-    }
-   return {
-     ...toRefs(state),
-     visible,
-     closeDialog,
-     scanData,
-     addRow,
-     saveSet,
-     delData,
-     getMbData
-   };
- },
+    const saveSet = async () => {
+      console.log(ruleFormRef.value);
+      await ruleFormRef.value.validate(async (valid) => {
+        if (valid) {
+          const param = {
+            driver_name: props.formData.name,
+            ...state.addForm,
+            id: Number(state.addForm.id)
+          }
+          const res = await infoApi.addSet(param);
+          if (res.code == 0) {
+            ElMessage.success(res.message || "请求成功");
+            ctx.emit("dialogClose");
+          } else {
+            ElMessage.error(res.message);
+          }
+        } else {
+          console.log("error submit!");
+        }
+      });
+
+
+    };
+    return {
+      ...toRefs(state),
+      visible,
+      closeDialog,
+      saveSet,
+      ruleFormRef
+    };
+  },
 };
 </script>
 <style lang="scss" scoped>
 .top-title {
- width: 100%;
- ::v-deep .el-card__body {
-   width: 100%;
-   display: flex;
-   justify-content: space-between;
-   font-weight: 800;
-   font-size: 16px;
- }
-} 
-.btns {
- padding: 15px 0;
- width: 100%;
- display: flex;
- justify-content: space-between;
+  width: 100%;
+
+  ::v-deep .el-card__body {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    font-weight: 800;
+    font-size: 16px;
+  }
 }
+
+.btns {
+  padding: 15px 0;
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+}
+
 .flex-center {
- display: flex;
- justify-content: center;
- padding: 10px 0;
- cursor: pointer;
+  display: flex;
+  justify-content: center;
+  padding: 10px 0;
+  cursor: pointer;
 }
 </style>
diff --git a/src/components/ViewSet.vue b/src/components/ViewSet.vue
new file mode 100644
index 0000000..c5616dd
--- /dev/null
+++ b/src/components/ViewSet.vue
@@ -0,0 +1,120 @@
+<template>
+    <el-dialog v-model="visible" title="设备管理" width="60%" :before-close="closeDialog">
+        <el-table :data="propertiesData" height="230" style="width: 100%" border stripe
+            :header-cell-style="{ background: '#F6F7FC' }">
+            <el-table-column prop="name" label="设备名称" align="center" show-overflow-tooltip>
+            </el-table-column>
+            <el-table-column prop="id" label="设备ID" align="center" show-overflow-tooltip>
+            </el-table-column>
+            <el-table-column prop="template_name" label="设备的可用模板名称" align="center" show-overflow-tooltip>
+            </el-table-column>
+
+            <el-table-column prop="description" label="设备描述" align="center" show-overflow-tooltip>
+
+            </el-table-column>
+            <el-table-column label="操作" align="center" show-overflow-tooltip>
+                <template #default="scope">
+                    <el-button type="danger" @click="delData(scope.row)">
+                        删除
+                    </el-button>
+                </template>
+            </el-table-column>
+        </el-table>
+    </el-dialog>
+</template>
+<script>
+import { onMounted, reactive, ref, toRefs, computed, nextTick } from "vue";
+import infoApi from "@/api/infoApi.js";
+import { ElMessage, ElMessageBox } from "element-plus";
+export default {
+    props: ["formData", "dialogVisible"],
+    emits: ["dialogClose", "dialogSuccess"],
+    setup(props, ctx) {
+        const state = reactive({
+            propertiesData: [],
+        });
+        const visible = computed(() => {
+            return props.dialogVisible;
+        });
+
+        onMounted(() => {
+            getSet();
+        });
+
+        const getSet = async () => {
+            const parm = {
+                driver_name: props.formData.name
+            }
+            const res = await infoApi.getSet(parm);
+            if (res.code == 0) {
+                state.propertiesData = res.data;
+            } else {
+                console.log(res);
+            }
+        };
+        const closeDialog = () => {
+            ctx.emit("dialogClose");
+        };
+
+        const delData = (item) => {
+            ElMessageBox.confirm("确定删除该数据?", "提示", {
+                confirmButtonText: "确定",
+                cancelButtonText: "取消",
+                type: "warning",
+            })
+                .then(async () => {
+                    let param = {
+                        driver_name: props.formData.name,
+                        name: item.name
+                    }
+                    const res = await infoApi.delSet(param);
+                    if (res.code == 0) {
+                        ElMessage.success(res.message || "删除成功");
+                        getSet();
+                    } else {
+                        ElMessage.error(res.message | "删除失败");
+                    }
+                })
+                .catch(() => {
+                    ElMessage.info("已取消删除");
+                });
+        }
+
+
+        return {
+            ...toRefs(state),
+            visible,
+            closeDialog,
+            delData
+        };
+    },
+};
+</script>
+<style lang="scss" scoped>
+.top-title {
+    width: 100%;
+
+    ::v-deep .el-card__body {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+        font-weight: 800;
+        font-size: 16px;
+    }
+}
+
+.btns {
+    padding: 15px 0;
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+}
+
+.flex-center {
+    display: flex;
+    justify-content: center;
+    padding: 10px 0;
+    cursor: pointer;
+}
+</style>
+  
\ No newline at end of file
diff --git a/src/utils/axios.js b/src/utils/axios.js
index 5b5e86a..c671ae9 100644
--- a/src/utils/axios.js
+++ b/src/utils/axios.js
@@ -56,14 +56,15 @@ axios.interceptors.response.use(
   }
 );
 // post请求
-export function postPBRequest(url, params, actionNum,template_name) {
+export function postPBRequest(url, params, actionNum,name) {
+  const title = url === '/driver' ? {'driver_name': name }: {'template_name': name}
   return axios({
     method: "post",
     url: url,
     data: params,
     headers: {
       "action": actionNum,
-      "template_name": template_name
+      ...title
     },
   });
 }
\ No newline at end of file
diff --git a/src/views/Page.vue b/src/views/Page.vue
index c9a8145..0875680 100644
--- a/src/views/Page.vue
+++ b/src/views/Page.vue
@@ -90,7 +90,10 @@
               删除
             </el-button>
             <el-button type="info" @click="manageData(scope.row)">
-              设备
+              新增设备
+            </el-button>
+            <el-button type="info" @click="viewData(scope.row)">
+              设备查询
             </el-button>
           </template>
         </el-table-column>
@@ -109,10 +112,13 @@
       :formData="formData"
       :dialogVisible="dialogVisible1"
       v-if="dialogVisible1"
-      @dialogClose="dialogClose1"
-      @dialogSuccess="dialogSuccess1"
+      @dialogClose="dialogClose"
+      @dialogSuccess="dialogSuccess"
     >
     </AddSet>
+    <ViewSet :formData="formData" :dialogVisible="dialogVisible2"  v-if="dialogVisible2" @dialogClose="dialogClose"
+      @dialogSuccess="dialogSuccess">
+    </ViewSet>
   </el-card>
 </template>
 
@@ -122,11 +128,13 @@ import infoApi from "@/api/infoApi.js";
 import { ElMessage, ElMessageBox } from "element-plus";
 import AddData from "@/components/AddData.vue";
 import AddSet from "@/components/AddSet.vue";
+import ViewSet from "@/components/ViewSet.vue";
 export default {
   name: "page",
   components: {
     AddData,
     AddSet,
+    ViewSet
   },
   setup() {
     const state = reactive({
@@ -135,6 +143,7 @@ export default {
       formData: {},
       dialogVisible: false,
       dialogVisible1: false,
+      dialogVisible2: false,
       type: '0' // 0新增 1 编辑
     });
 
@@ -163,21 +172,17 @@ export default {
     };
     const dialogClose = () => {
       state.dialogVisible = false;
+      state.dialogVisible1 = false;
+      state.dialogVisible2 = false;
     };
 
     const dialogSuccess = () => {
       state.dialogVisible = false;
+      state.dialogVisible1 = false;
+      state.dialogVisible2 = false;
       getTableData();
     };
 
-    const dialogClose1 = () => {
-      state.dialogVisible1 = false;
-    };
-
-    const dialogSuccess1 = () => {
-      state.dialogVisible1 = false;
-      getTableData();
-    };
     const addData = () => {
       state.formData = {
         name: '',
@@ -223,6 +228,11 @@ export default {
       state.dialogVisible1 = true;
     };
 
+    const viewData = (item) => {
+      state.dialogVisible2 = true;
+      state.formData = JSON.parse(JSON.stringify(item));
+    }
+
     const changeStatus = async (item) => {
       console.log(item.enable);
       const param = {
@@ -246,8 +256,7 @@ export default {
       dialogClose,
       dialogSuccess,
       changeStatus,
-      dialogClose1,
-      dialogSuccess1
+      viewData
     };
   },
 };