添加参数绑定

src/utils/api/index.js

@@ -391,3 +391,15 @@ export function getBindApi(data) {
     },
   });
 }
+
+//预览
+export function previewApi(data) {
+  return request({
+    url: "/parambind/preview",
+    method: "post",
+    params: data,
+    headers: {
+      "Content-Type": "application/x-www-form-urlencoded;charset=UTF-8",
+    },
+  });
+}

src/views/paramBinding/index.vue

@@ -33,14 +33,13 @@
         <h3>参数绑定</h3>
       </div>
       <div class="paramContain">
-        {{ bindInfo }}
         <div class="headSelect">
           <div class="iedlistBox">
             <span>ied列表：</span>
             <el-select
               v-model="iedName"
               placeholder="请选择"
-              @change="changeTablename"
+              @change="changeIedname"
             >
               <el-option
                 v-for="item in iedOptions"
@@ -55,17 +54,19 @@
             <el-select
               v-model="ljName"
               placeholder="请选择"
-              @change="changeTablename"
+              @change="changeljname"
             >
               <el-option
                 v-for="item in ljOptions"
-                :key="item"
-                :label="item"
-                :value="item"
+                :key="item.paramIndex"
+                :label="item.paramIndex"
+                :value="item.paramIndex"
               ></el-option>
             </el-select>
           </div>
         </div>
+        <el-divider></el-divider>
+        {{ bindInfo }}
       </div>
     </div>
   </div>
@@ -76,6 +77,7 @@ import {
   getinstListApi,
   getBindApi,
   iedListApi,
+  previewApi,
 } from "@/utils/api/index";
 export default {
   name: "paramBinding",
@@ -100,6 +102,7 @@ export default {
       iedOptions: [],
       ljName: "",
       ljOptions: [],
+      icdid: "",
     };
   },
   computed: {},
@@ -162,6 +165,43 @@ export default {
           console.log(err); //代码错误、请求失败捕获
         });
     },
+    //切换iedname
+    changeIedname(val) {
+      this.iedName = val;
+      console.log(this.iedName);
+      console.log(this.iedOptions.find((item) => item === val));
+      this.getinstList();
+    },
+    //获取逻辑设备列表
+    getinstList() {
+      getinstListApi({
+        iedName: this.iedName,
+      })
+        .then((res) => {
+          console.log(res);
+          this.ljOptions = res.data;
+        })
+        .catch((err) => {
+          console.log(err); //代码错误、请求失败捕获
+        });
+    },
+    //选择逻辑l设备
+    changeljname(val) {
+      console.log(val);
+      console.log(this.ljOptions.find((item) => item.paramIndex === val));
+      this.icdid = this.ljOptions.find((item) => item.paramIndex === val).id;
+      previewApi({
+        eqmid: this.currentNodeKey,
+        icdid: this.icdid,
+      })
+        .then((res) => {
+          console.log(res);
+          this.ljOptions = res.data;
+        })
+        .catch((err) => {
+          console.log(err); //代码错误、请求失败捕获
+        });
+    },
   },
 };
 </script>
@@ -321,6 +361,21 @@ export default {
       border: 1px solid #dcdfe6;
       box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.12), 0 0 6px 0 rgba(0, 0, 0, 0.04);
       color: #333;
+      .headSelect {
+        height: 40px;
+        display: flex;
+        align-items: center;
+        line-height: 40px;
+        .iedlistBox {
+          margin-left: 18px;
+        }
+        .ljsbBox {
+          margin-left: 18px;
+        }
+      }
+      .el-divider--horizontal {
+        margin: 12px 0px;
+      }
     }
   }
 }