。。

src/api/infoApi.js

@@ -82,6 +82,10 @@ const infoApi = {
   getP(params) {
     return postPBRequest('/template', params, 56000)
   },
+  // 删除点位
+  detP(params) {
+    return postPBRequest('/template', params, 56300)
+  },
   //   // 获取设备列表
   //   getSet(params) {
   //     return postJsonRequest('/tx/info', params)

src/components/AddPoint copy.vue

@@ -0,0 +1,251 @@
+<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>模板类型：{{ templateData[1] }}</span>
+    </el-card>
+    <div class="btns">
+      <div>
+        <el-button type="primary" @click="saveP"> 保存 </el-button>
+        <el-button @click="closeDialog">取消</el-button>
+      </div>
+      <!-- <div>
+        <el-button type="primary" @click="importData"> 导入 </el-button>
+        <el-button type="primary" @click="exportData"> 导出 </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="address" label="点位地址" align="center" show-overflow-tooltip>
+          <template #default="scope">
+            <el-input v-model="scope.row.address" clearable />
+          </template>
+        </el-table-column>
+        <el-table-column prop="type" label="点位类型" align="center" show-overflow-tooltip>
+          <template #default="scope">
+            <el-select v-model="scope.row.type" size="mini">
+              <el-option v-for="item in datatypeArr" :key="item.value" :label="item.label" :value="item.value" />
+            </el-select>
+          </template>
+        </el-table-column>
+
+        <el-table-column prop="byte_order" label="字节顺序" align="center" show-overflow-tooltip>
+          <template #default="scope">
+            <el-select v-model="scope.row.byte_order" size="mini">
+              <el-option v-for="item in byte_orderArr" :key="item.value" :label="item.label" :value="item.value" />
+            </el-select>
+          </template>
+        </el-table-column>
+        <el-table-column prop="multplier" label="缩放系数" align="center" show-overflow-tooltip>
+          <template #default="scope">
+            <el-input v-model="scope.row.multplier" clearable />
+          </template>
+        </el-table-column>
+        <el-table-column prop="unit" label="点位单位" align="center" show-overflow-tooltip>
+          <template #default="scope">
+            <el-input v-model="scope.row.unit" clearable />
+          </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 { m_point, m_properties, mb_info, response} from '../proto/data/pd'
+export default {
+  props: ["formData", "dialogVisible","templateData"],
+  emits: ["dialogClose", "dialogSuccess"],
+  setup(props, ctx) {
+    const state = reactive({
+      addForm: {},
+      propertiesData: [],
+      datatypeArr: [{
+        label: 'bool',
+        value: 'bool'
+      }, {
+        label: 'int16',
+        value: 'int16'
+      }, {
+        label: 'int32',
+        value: 'int32'
+      }, {
+        label: 'unit16',
+        value: 'unit16'
+      }, {
+        label: 'unit32',
+        value: 'unit32'
+      }, {
+        label: 'float32',
+        value: 'float32'
+      }, {
+        label: 'float64',
+        value: 'float64'
+      }],
+      byte_orderArr: [{
+        label: 'null',
+        value: 'null'
+      }, {
+        label: '12',
+        value: '12'
+      }, {
+        label: '21',
+        value: '21'
+      }, {
+        label: '1234',
+        value: '1234'
+      }, {
+        label: '4321',
+        value: '4321'
+      }, {
+        label: 'ABCD',
+        value: 'ABCD'
+      }, {
+        label: 'DCBA',
+        value: 'DCBA'
+      }]
+    });
+    const visible = computed(() => {
+      return props.dialogVisible;
+    });
+
+    onMounted(() => {
+      state.addForm = props.formData;
+      // 获取点位列表
+      getPointList();
+    });
+    const getPointList = async () => {
+      const parm = {
+        name: state.addForm.name
+      }
+      const res = await infoApi.getP(parm);
+      if (res.code == 0) {
+        const propArr = res.data || [];
+        state.propertiesData = [];
+        propArr.forEach(v => {
+          state.propertiesData.push({
+            name: v.name,
+            address: v.properties[0].value,
+            type: v.properties[1].value,
+            byte_order: v.properties[2].value,
+            multplier: v.properties[3].value,
+            unit: v.properties[4].value,
+            description: v.properties[5].value,
+          })
+        })
+      } else {
+        console.log(res);
+      }
+    };
+    const closeDialog = () => {
+      ctx.emit("dialogClose");
+    };
+
+    const importData = () => { };
+
+    const exportData = () => { };
+
+    const saveP = async () => {
+      if (state.propertiesData.length < 1) {
+        return ElMessage.error("请添加一条点位");
+      }
+      // const newArr = [];
+      // state.propertiesData.forEach(item => {
+       
+      // })
+      // console.log(123, newArr)
+      const param = {
+        name: state.addForm.name,
+        type: state.addForm.type,
+        description: state.addForm.description,
+        points: state.propertiesData
+      }
+      const res = await infoApi.addP(param);
+      if (res.code == 0) {
+        ElMessage.success(res.message || "请求成功");
+        // 获取数据
+        getPointList();
+      } else {
+        ElMessage.error(res.message);
+      }
+
+    };
+    const addRow = () => {
+      let newRow = {
+        name: '',
+        address: '',
+        type: 'bool',
+        byte_order: 'null',
+        multplier: '',
+        unit: '',
+        description: ''
+      };
+      state.propertiesData.push(newRow);
+    }
+    const delData = (index) => {
+      state.propertiesData.splice(index, 1);
+    }
+    return {
+      ...toRefs(state),
+      visible,
+      closeDialog,
+      importData,
+      exportData,
+      addRow,
+      saveP,
+      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>

src/components/AddPoint.vue

@@ -1,166 +1,139 @@
 <template>
-  <el-dialog v-model="visible" title="点位管理" width="60%" :before-close="closeDialog">
+  <el-dialog v-model="visible" title="点位管理" width="40%" :before-close="closeDialog">
-    <el-card class="top-title">
+    <el-form :model="addForm" label-width="100px" :rules="rules" ref="ruleFormRef">
-      <span>模板名称：{{ addForm.name }}</span>
+      <el-form-item label="点位名称:" prop="name">
-      <span>模板描述：{{ addForm.description }}</span>
+        <el-input v-model="addForm.name" placeholder="请输入点位名称" clearable />
-      <span>模板类型：{{ templateData[1] }}</span>
+      </el-form-item>
-    </el-card>
+      <el-form-item label="点位地址:" prop="address">
-    <div class="btns">
+        <el-input v-model="addForm.address" placeholder="请输入点位地址" clearable type="number"/>
-      <div>
+      </el-form-item>
-        <el-button type="primary" @click="saveP"> 保存 </el-button>
+      <el-form-item label="点位类型:" prop="type">
+        <el-select v-model="addForm.type" size="mini" placeholder="请选择点位类型">
+          <el-option v-for="item in datatypeArr" :key="item.value" :label="item.label" :value="item.value" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="字节顺序:" prop="byte_order">
+        <el-select v-model="addForm.byte_order" size="mini" placeholder="请选择字节顺序">
+          <el-option v-for="item in byte_orderArr" :key="item.value" :label="item.label" :value="item.value" />
+        </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>
-      </div>
+        <el-button type="primary" @click="saveP"> 保存 </el-button>
-      <!-- <div>
+      </span>
-        <el-button type="primary" @click="importData"> 导入 </el-button>
+    </template>
-        <el-button type="primary" @click="exportData"> 导出 </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="address" label="点位地址" align="center" show-overflow-tooltip>
-          <template #default="scope">
-            <el-input v-model="scope.row.address" clearable />
-          </template>
-        </el-table-column>
-        <el-table-column prop="type" label="点位类型" align="center" show-overflow-tooltip>
-          <template #default="scope">
-            <el-select v-model="scope.row.type" size="mini">
-              <el-option v-for="item in datatypeArr" :key="item.value" :label="item.label" :value="item.value" />
-            </el-select>
-          </template>
-        </el-table-column>
-
-        <el-table-column prop="byte_order" label="字节顺序" align="center" show-overflow-tooltip>
-          <template #default="scope">
-            <el-select v-model="scope.row.byte_order" size="mini">
-              <el-option v-for="item in byte_orderArr" :key="item.value" :label="item.label" :value="item.value" />
-            </el-select>
-          </template>
-        </el-table-column>
-        <el-table-column prop="multplier" label="缩放系数" align="center" show-overflow-tooltip>
-          <template #default="scope">
-            <el-input v-model="scope.row.multplier" clearable />
-          </template>
-        </el-table-column>
-        <el-table-column prop="unit" label="点位单位" align="center" show-overflow-tooltip>
-          <template #default="scope">
-            <el-input v-model="scope.row.unit" clearable />
-          </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 { m_point, m_properties, mb_info, response} from '../proto/data/pd'
 export default {
-  props: ["formData", "dialogVisible","templateData"],
+  props: ["formData", "dialogVisible"],
   emits: ["dialogClose", "dialogSuccess"],
   setup(props, ctx) {
+    const ruleFormRef = ref(null);
     const state = reactive({
-      addForm: {},
+      addForm: {
-      propertiesData: [],
+        type: 1,
+        byte_order: 1
+      },
       datatypeArr: [{
         label: 'bool',
-        value: 'bool'
+        value: 1
       }, {
         label: 'int16',
-        value: 'int16'
+        value: 2
       }, {
         label: 'int32',
-        value: 'int32'
+        value: 3
       }, {
+        label: 'int64',
+        value: 4
+      },
+      {
         label: 'unit16',
-        value: 'unit16'
+        value: 5
       }, {
         label: 'unit32',
-        value: 'unit32'
+        value: 6
+      },
+      {
+        label: 'unit64',
+        value: 7
       }, {
         label: 'float32',
-        value: 'float32'
+        value: 8
       }, {
         label: 'float64',
-        value: 'float64'
+        value: 9
       }],
       byte_orderArr: [{
         label: 'null',
-        value: 'null'
+        value: 1
       }, {
         label: '12',
-        value: '12'
+        value: 2
       }, {
         label: '21',
-        value: '21'
+        value: 3
-      }, {
-        label: '1234',
-        value: '1234'
       }, {
         label: '4321',
-        value: '4321'
+        value: 4
+      },
+      {
+        label: '2143',
+        value: 5
+      },
+      {
+        label: '1234',
+        value: 6
+      },
+      {
+        label: '3412',
+        value: 7
       }, {
-        label: 'ABCD',
+        label: '4312',
-        value: 'ABCD'
+        value: 8
       }, {
-        label: 'DCBA',
+        label: '3421',
-        value: 'DCBA'
+        value: 9
-      }]
+      },
+      {
+        label: '2134',
+        value: 10
+      },
+      {
+        label: '1243',
+        value: 11
+      },
+      {
+        label: 'BIG',
+        value: 12
+      },
+      {
+        label: 'LIT',
+        value: 13
+      }],
+      rules: {
+        name: [{ required: true, message: "请输入点位名称", trigger: "blur" }],
+        address: [{ required: true, message: "请输入点位地址", trigger: "blur" }],
+        type: [{ required: true, message: "请选择点位类型", trigger: "blur" }],
+        byte_order: [{ required: true, message: "请选择字节顺序", trigger: "blur" }],
+      },
     });
     const visible = computed(() => {
       return props.dialogVisible;
     });
 
     onMounted(() => {
-      state.addForm = props.formData;
+
-      // 获取点位列表
-      getPointList();
     });
-    const getPointList = async () => {
-      const parm = {
-        name: state.addForm.name
-      }
-      const res = await infoApi.getP(parm);
-      if (res.code == 0) {
-        const propArr = res.data || [];
-        state.propertiesData = [];
-        propArr.forEach(v => {
-          state.propertiesData.push({
-            name: v.name,
-            address: v.properties[0].value,
-            type: v.properties[1].value,
-            byte_order: v.properties[2].value,
-            multplier: v.properties[3].value,
-            unit: v.properties[4].value,
-            description: v.properties[5].value,
-          })
-        })
-      } else {
-        console.log(res);
-      }
-    };
     const closeDialog = () => {
       ctx.emit("dialogClose");
     };
@@ -170,54 +143,40 @@ export default {
     const exportData = () => { };
 
     const saveP = async () => {
-      if (state.propertiesData.length < 1) {
+      console.log(ruleFormRef.value);
-        return ElMessage.error("请添加一条点位");
+      await ruleFormRef.value.validate(async (valid) => {
-      }
+        if (valid) {
-      // const newArr = [];
+          const param = {
-      // state.propertiesData.forEach(item => {
+            point_name: props.formData.name + '/' + state.addForm.name,
-       
+            point: {
-      // })
+              description: state.addForm.description,
-      // console.log(123, newArr)
+              address: Number(state.addForm.address),
-      const param = {
+              type: state.addForm.type,
-        name: state.addForm.name,
+              byte_order: state.addForm.byte_order
-        type: state.addForm.type,
+            }
-        description: state.addForm.description,
+          }
-        points: state.propertiesData
+          const res = await infoApi.addP(param);
-      }
+          if (res.code == 0) {
-      const res = await infoApi.addP(param);
+            ElMessage.success(res.message || "请求成功");
-      if (res.code == 0) {
+            ctx.emit("dialogClose");
-        ElMessage.success(res.message || "请求成功");
+          } else {
-        // 获取数据
+            ElMessage.error(res.message);
-        getPointList();
+          }
-      } else {
+        } else {
-        ElMessage.error(res.message);
+          console.log("error submit!");
-      }
+        }
+      });
+
 
     };
-    const addRow = () => {
-      let newRow = {
-        name: '',
-        address: '',
-        type: 'bool',
-        byte_order: 'null',
-        multplier: '',
-        unit: '',
-        description: ''
-      };
-      state.propertiesData.push(newRow);
-    }
-    const delData = (index) => {
-      state.propertiesData.splice(index, 1);
-    }
     return {
       ...toRefs(state),
       visible,
       closeDialog,
       importData,
       exportData,
-      addRow,
       saveP,
-      delData
+      ruleFormRef
     };
   },
 };

src/components/ViewPoint.vue

@@ -0,0 +1,154 @@
+<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="address" label="点位地址" align="center" show-overflow-tooltip>
+            </el-table-column>
+            <el-table-column prop="type" label="点位类型" align="center" show-overflow-tooltip>
+                <template #default="scope">
+                    <span>{{ typeData[scope.row.type] }}</span>
+                </template>
+            </el-table-column>
+
+            <el-table-column prop="byte_order" label="字节顺序" align="center" show-overflow-tooltip>
+                <template #default="scope">
+                    <span>{{ byteData[scope.row.byte_order] }}</span>
+                </template>
+            </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: [],
+            typeData: {
+                1: 'bool',
+                2: 'int16',
+                3: 'int32',
+                4: 'int64',
+                5: 'unit16',
+                6: 'unit32',
+                7: 'unit64',
+                8: 'float32',
+                9: 'float64'
+            },
+            byteData: {
+                1: 'null',
+                2: '12',
+                3: '21',
+                4: '4321',
+                5: '2143',
+                6: '1234',
+                7: '3412',
+                8: '4312',
+                9: '3421',
+                10: '2134',
+                11: '1243',
+                12: 'BIG',
+                13: 'LIT'
+            }
+        });
+        const visible = computed(() => {
+            return props.dialogVisible;
+        });
+
+        onMounted(() => {
+            getPointList();
+        });
+
+        const getPointList = async () => {
+            const parm = {
+                name: props.formData.name
+            }
+            const res = await infoApi.getP(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 = {
+                        point_name: item.name
+                    }
+                    const res = await infoApi.detP(param);
+                    if (res.code == 0) {
+                        ElMessage.success(res.message || "删除成功");
+                        getPointList();
+                    } 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>
+  

src/views/Model.vue

@@ -17,7 +17,10 @@
         <el-table-column label="模板管理" align="center" show-overflow-tooltip>
           <template #default="scope">
             <el-button type="info" @click="manageData(scope.row)">
-              点位
+              新增点位
+            </el-button>
+            <el-button type="info" @click="viewData(scope.row)">
+              点位查询
             </el-button>
             <el-button type="primary" @click="editData(scope.row)">
               编辑
@@ -32,9 +35,12 @@
     <AddMb :type="type" :formData="formData"  :dialogVisible="dialogVisible" v-if="dialogVisible"
       @dialogClose="dialogClose" @dialogSuccess="dialogSuccess">
     </AddMb>
-    <AddPoint :formData="formData1" :templateData="templateData" :dialogVisible="dialogVisible1"  v-if="dialogVisible1" @dialogClose="dialogClose"
+    <AddPoint :formData="formData1" :dialogVisible="dialogVisible1"  v-if="dialogVisible1" @dialogClose="dialogClose"
       @dialogSuccess="dialogSuccess">
     </AddPoint>
+    <ViewPoint :formData="formData1" :dialogVisible="dialogVisible2"  v-if="dialogVisible2" @dialogClose="dialogClose"
+      @dialogSuccess="dialogSuccess">
+    </ViewPoint>
   </el-card>
 </template>
 
@@ -43,18 +49,20 @@ import { onMounted, reactive, ref, toRefs } from "vue";
 import { ElMessage, ElMessageBox } from "element-plus";
 import AddMb from "@/components/AddMb.vue";
 import infoApi from "@/api/infoApi.js";
-// import { response, mb_info, mb_list } from '../proto/data/pd'
 import AddPoint from "@/components/AddPoint.vue";
+import ViewPoint from "@/components/ViewPoint.vue"
 export default {
   name: "model",
   components: {
     AddMb,
-    AddPoint
+    AddPoint,
+    ViewPoint
   },
   setup() {
     const state = reactive({
       dialogVisible: false,
       dialogVisible1: false,
+      dialogVisible2: false,
       tableData: [],
       formData: {
         name: '',
@@ -131,14 +139,21 @@ export default {
       state.dialogVisible1 = true;
       state.formData1 = item;
     };
+
+    const viewData = (item) => {
+      state.dialogVisible2 = true;
+      state.formData1 = item;
+    }
     const dialogClose = () => {
       state.dialogVisible = false;
       state.dialogVisible1 = false;
+      state.dialogVisible2 = false;
     };
 
     const dialogSuccess = () => {
       state.dialogVisible = false;
       state.dialogVisible1 = false;
+      state.dialogVisible2 = false;
       getTableData();
     };
     return {
@@ -149,7 +164,8 @@ export default {
       getTableData,
       addData,
       dialogSuccess,
-      dialogClose
+      dialogClose,
+      viewData
     };
   },
 };