添加rpt参数绑定页面

src/components/Sidebar.vue

@@ -1,13 +1,31 @@
 <template>
   <div class="sidebarBox">
-    <ul class="menuBoxUl">
+    <el-menu
-      <!-- <li class="menuItem" @click="linkHome()">
+      :default-active="activeIndex"
-        <a>首页</a>
+      class="el-menu-demo"
-      </li> -->
+      mode="horizontal"
-      <li class="menuItem" v-for="(item, index) in routeItem" :key="index">
+      router
-        <router-link :to="item.path"> {{ item.name }} </router-link>
+    >
-      </li>
+      <template v-for="item in routeItem">
-    </ul>
+        <template v-if="item.subs">
+          <el-submenu :index="item.path" :key="item.path">
+            <template slot="title">
+              <span slot="title">{{ item.name }}</span>
+            </template>
+            <template v-for="subItem in item.subs">
+              <el-menu-item :index="subItem.path" :key="subItem.path">{{
+                subItem.name
+              }}</el-menu-item>
+            </template>
+          </el-submenu>
+        </template>
+        <template v-else>
+          <el-menu-item :index="item.path" :key="item.path">
+            <span slot="title">{{ item.name }}</span>
+          </el-menu-item>
+        </template>
+      </template>
+    </el-menu>
   </div>
 </template>
 
@@ -17,6 +35,7 @@ export default {
     return {
       hostName: "",
       isProduction: "",
+      activeIndex: "/home",
       routeItem: [
         {
           path: "/home",
@@ -34,14 +53,26 @@ export default {
         //   path: "/systemManagement",
         //   name: "系统管理",
         // },
+
         {
-          path: "/icdConfig",
+          path: "/61850config",
-          name: "icd配置",
+          name: "61850配置",
-        },
+          subs: [
-        {
+            {
-          path: "/paramBinding",
+              path: "/icdConfig",
-          name: "参数绑定",
+              name: "icd配置",
+            },
+            {
+              path: "/paramBinding",
+              name: "icd绑定",
+            },
+            {
+              path: "/rptparam",
+              name: "rptparam配置",
+            },
+          ],
         },
+
         {
           path: "/alarmRules",
           name: "告警规则",
@@ -72,14 +103,24 @@ export default {
       this.hostName = "http://localhost:9527/#/"; // 这里使用你的本地 target 地址
     }
   },
-  watch: {},
+  watch: {
+    $route() {
+      this.setCurrentRoute();
+    },
+  },
   methods: {
-    linkHome() {
+    setCurrentRoute() {
-      console.log(this.hostName);
+      console.log(this.$route.path);
-      window.location.href = this.hostName;
+      this.$nextTick(() => {
+        this.activeIndex = this.$route.path; // 通过他就可以监听到当前路由状态并激活当前菜单
+        console.log(this.activeIndex);
+        localStorage.setItem("menuActive", this.activeIndex);
+      });
     },
   },
-  created() {},
+  created() {
+    this.setCurrentRoute();
+  },
 };
 </script>
 
@@ -89,6 +130,71 @@ export default {
   // margin: 0 auto;
   display: flex;
   align-items: center;
+  width: 100%;
+  .el-menu {
+    background: transparent;
+    border-bottom: none;
+    height: 40px;
+    line-height: 40px;
+    width: 100%;
+    display: flex;
+    //justify-content: space-around;
+    li {
+      margin-right: 2%;
+    }
+  }
+  .el-menu--horizontal > .el-menu-item {
+    background-image: url(../assets/menu.png);
+    height: 40px;
+    line-height: 40px;
+    padding: 0 12px;
+    background-size: 100% 100%;
+    background-repeat: no-repeat;
+    overflow: hidden;
+    width: 120px;
+    text-align: center;
+    color: #fff;
+    border-bottom: 0px solid transparent;
+  }
+  .el-menu--horizontal > .el-submenu .el-submenu__title {
+    background-image: url(../assets/menu.png);
+    height: 40px;
+    line-height: 40px;
+    padding: 0 12px;
+    background-size: 100% 100%;
+    background-repeat: no-repeat;
+    overflow: hidden;
+    width: 120px;
+    text-align: center;
+    color: #fff;
+    border-bottom: 0px solid transparent;
+  }
+  .el-submenu__title i {
+    color: #fff;
+  }
+  .el-menu--horizontal > .el-menu-item.is-active {
+    color: #6de1ff;
+    border-bottom: 0px solid #337ab7;
+  }
+  .el-menu--horizontal > .el-submenu.is-active .el-submenu__title {
+    color: #6de1ff;
+    border-bottom: 0px solid #337ab7;
+    i {
+      color: #6de1ff;
+    }
+  }
+  .el-menu-item:focus,
+  .el-menu-item:hover {
+    background-color: transparent !important;
+    color: #6de1ff !important;
+  }
+  .el-menu--horizontal > .el-submenu .el-submenu__title:hover {
+    background-color: transparent !important;
+    color: #6de1ff !important;
+    i {
+      color: #6de1ff;
+    }
+  }
   .menuBoxUl {
     flex: 1;
     display: flex;

src/router/index.js

@@ -127,7 +127,15 @@ const routes = [
         component: () => import("../views/paramBinding/index.vue"),
         name: "paramBinding",
         meta: {
-          title: "参数绑定",
+          title: "icd绑定",
+        },
+      },
+      {
+        path: "/rptparam",
+        component: () => import("../views/rptparam/index.vue"),
+        name: "rptparam",
+        meta: {
+          title: "rptparam配置",
         },
       },
       {

src/utils/api/index.js

@@ -794,3 +794,36 @@ export function listRecordApi(data) {
     },
   });
 }
+
+//rptparam相关接口
+//查询绑定信息
+export function getRptApi(data) {
+  return request({
+    url: "/rptparam/getRpt",
+    method: "get",
+    params: data,
+    headers: {
+      "Content-Type": "application/x-www-form-urlencoded;charset=UTF-8",
+    },
+  });
+}
+
+// 查询可用rptparam
+export function listRptApi(data) {
+  return request({
+    url: "/rptparam/listRpt",
+    method: "get",
+    params: data,
+    headers: {
+      "Content-Type": "application/x-www-form-urlencoded;charset=UTF-8",
+    },
+  });
+}
+//绑定
+export function updateRptApi(data) {
+  return request({
+    url: "/rptparam/updateRpt",
+    method: "post",
+    data,
+  });
+}

src/views/paramBinding/index.vue

@@ -45,7 +45,7 @@
     </div>
     <div class="paramTable">
       <div class="paramHead">
-        <h3>参数绑定</h3>
+        <h3>icd参数绑定</h3>
         <el-button @click="clearAllBind" type="primary"> 全部解绑 </el-button>
       </div>
       <div class="paramContain">

src/views/rptparam/index.vue

@@ -0,0 +1,634 @@
+<template>
+  <div class="rptparamBox">
+    <div class="leftTree">
+      <h3>
+        设备列表
+        <!-- <el-button type="primary" @click="generate" size="mini"
+          >生成rptparamindex</el-button
+        > -->
+      </h3>
+      <div class="treeBox">
+        <div class="searchBar">
+          <el-input
+            placeholder="输入关键字进行过滤"
+            v-model="filterText"
+            prefix-icon="el-icon-search"
+            clearable
+          >
+          </el-input>
+        </div>
+        <el-tree
+          ref="tree"
+          :data="paramTreeData"
+          :props="defaultProps"
+          node-key="id"
+          :default-expanded-keys="defaultExpandedKeys"
+          :filter-node-method="filterNode"
+          highlight-current
+          :current-node-key="currentNodekey"
+          :expand-on-click-node="true"
+          @node-click="handleNodeClick"
+          default-expand-all
+        >
+          <template class="custom-tree-node" slot-scope="{ node, data }">
+            <!-- <span>{{ data.name || data.mc }}</span> -->
+            <span v-if="data.mc">
+              <span>{{ data.mc }} </span>
+            </span>
+            <span v-else-if="data.name">
+              <span class="el-icon-document" style="margin-right: 6px"> </span>
+              <span :title="data.name">{{ data.name }} </span>
+            </span>
+          </template>
+        </el-tree>
+      </div>
+    </div>
+    <div class="paramTable">
+      <div class="paramHead">
+        <h3>rptparam配置</h3>
+        <!-- <el-button @click="clearAllBind" type="primary"> 全部解绑 </el-button> -->
+      </div>
+      <div class="paramContain">
+        <div class="headSelect">
+          <div class="iedlistBox">
+            <span>ied列表：</span>
+            <el-select
+              v-model="iedName"
+              placeholder="请选择"
+              @change="changeIedname"
+            >
+              <el-option
+                v-for="item in iedOptions"
+                :key="item"
+                :label="item"
+                :value="item"
+              ></el-option>
+            </el-select>
+          </div>
+          <div class="ljsbBox">
+            <span>逻辑设备：</span>
+            <el-select
+              v-model="ljName"
+              placeholder="请选择"
+              @change="changeljname"
+            >
+              <el-option
+                v-for="item in ljOptions"
+                :key="item.paramIndex"
+                :label="item.paramIndex"
+                :value="item.paramIndex"
+              ></el-option>
+            </el-select>
+          </div>
+        </div>
+        <el-divider></el-divider>
+
+        <div class="showMsgBox">
+          <p class="warnMsg" v-if="warnMsg">
+            <el-tag
+              type="warning"
+              v-for="(item, index) in warnMsg"
+              :key="index"
+              >{{ item }}</el-tag
+            >
+          </p>
+          <div class="outside" v-if="bindInfoArray && bindInfoArray.length > 0">
+            <p
+              class="outsideLabel"
+              v-for="(processedItem, index) in preprocessedData"
+              :key="index"
+            >
+              <span class="spanclass">
+                {{ processedItem.comment }}
+                <b>({{ processedItem.name }})</b>
+              </span>
+              <el-select
+                v-model="processedItem.matchedItem2.paramindex"
+                placeholder="请选择"
+                size="medium"
+                @change="handleSelectChange(processedItem, $event)"
+              >
+                <!-- 添加一个空选项 -->
+                <el-option
+                  :label="'无绑定'"
+                  :value="null"
+                  v-if="rptOptions.length !== 0"
+                >
+                  <!-- 假设我们用 null 表示无选择 -->
+                </el-option>
+                <el-option
+                  v-for="option in rptOptions"
+                  :key="option.objid"
+                  :label="option.paramindex"
+                  :value="option.paramindex"
+                ></el-option>
+              </el-select>
+            </p>
+          </div>
+        </div>
+        <el-button class="savebtn" type="primary" @click="confirmClick"
+          >保存</el-button
+        >
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import {
+  getParamTreeApi,
+  getinstListApi,
+  iedListApi,
+  getRptApi,
+  listRptApi,
+  updateRptApi,
+} from "@/utils/api/index";
+export default {
+  name: "paramBinding",
+  components: {},
+  data() {
+    return {
+      filterText: "", //查询字段过滤
+      paramTreeData: [], // 树状图数据
+      defaultExpandedKeys: [],
+      currentNodeData: [], //选中的数据
+      currentId: "", //选择的id
+      crrrentName: "",
+      currentNodekey: "", //选中的节点
+      selectedNode: null, // 当前选中的节点
+      defaultProps: {
+        children: "children",
+        label: "mc",
+      },
+      bindInfo: "", //绑定信息
+      bindInfoArray: "",
+      iedName: "", //选中的iedname
+      iedOptions: [],
+      ljName: "",
+      ljOptions: [],
+      icdid: "",
+      previewData: [],
+      defaultShow: true, //默认显示
+      drawer: false,
+      warnMsg: "",
+      jbFlag: false,
+      rptOptions: [],
+    };
+  },
+  watch: {
+    filterText(newVal) {
+      this.handleFilter(); // 当 filterText 发生变化时执行过滤操作
+    },
+  },
+  computed: {
+    preprocessedData() {
+      return this.bindInfoArray.map((item) => {
+        const matchedItem2 = this.previewData.find(
+          (item2) => item2.colname === item.name
+        );
+        return {
+          ...item, // 保留原始item的所有属性
+          matchedItem2: matchedItem2 || { colname: "", paramindex: "" }, // 如果没有找到匹配项，则返回一个默认对象
+        };
+      });
+    },
+  },
+  created() {
+    this.getParamTreeList();
+  },
+  methods: {
+    handleFilter() {
+      // 在输入框输入完成后的500毫秒执行过滤节点方法
+      setTimeout(() => {
+        this.$refs.tree.filter(this.filterText);
+      }, 500);
+    },
+    //树状图搜索
+    filterNode(value, data, node) {
+      console.log(value);
+      // 如果什么都没填全部匹配全部返回
+      if (!value) return true;
+      console.log(data);
+      this.searchName = data.mc + data.name;
+      console.log(this.searchName);
+      // 如果传入的value和data中的label相同，匹配成功
+      if (this.searchName.indexOf(value) !== -1) {
+        return true;
+      }
+    },
+    getParamTreeList() {
+      getParamTreeApi()
+        .then((res) => {
+          console.log(res);
+          this.paramTreeData = res.data;
+          this.defaultExpandedKeys = [this.paramTreeData[0].id];
+          this.currentNodeData =
+            this.paramTreeData[0].children[0].children[0].children[0];
+          this.currentNodekey =
+            this.paramTreeData[0].children[0].children[0].children[0].id;
+          this.$nextTick(() => {
+            this.$refs.tree.setCurrentKey(this.currentNodekey); //一定要加这个选中了否则样式没有出来
+            this.handleNodeClick(this.currentNodeData);
+          });
+        })
+        .catch((err) => {
+          console.log(err); //代码错误、请求失败捕获
+        });
+    },
+    handleNodeClick(data, node) {
+      console.log(data);
+      if (data.hasOwnProperty("children")) {
+        this.$nextTick(() => {
+          this.$refs.tree.setCurrentKey(this.currentNodeKey);
+        });
+        return;
+      }
+      this.currentNodeKey = data.id;
+      this.rptOptions = [];
+      this.getRptInfo();
+      this.getiedList();
+    },
+
+    //获取iedlist
+    getiedList() {
+      iedListApi()
+        .then((res) => {
+          console.log(res);
+          this.iedOptions = res.data;
+        })
+        .catch((err) => {
+          console.log(err); //代码错误、请求失败捕获
+        });
+    },
+    //切换iedname
+    changeIedname(val) {
+      this.iedName = val;
+      this.ljName = "";
+      this.warnMsg = "";
+      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;
+          if (this.icdid !== null) {
+            this.ljName = this.ljOptions.find(
+              (item) => item.id === this.icdid
+            ).paramIndex;
+            this.getlistRpt(this.ljName);
+          } else {
+            this.ljName = "";
+          }
+        })
+        .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;
+      this.warnMsg = "";
+      this.getlistRpt(this.ljName);
+    },
+    //获取可用rpt
+    getlistRpt(val) {
+      listRptApi({
+        param: val,
+      })
+        .then((res) => {
+          console.log(res);
+          if (res.success) {
+            this.rptOptions = res.data;
+          } else {
+            this.$message({
+              showClose: true,
+              message: res.errorMsg,
+              type: "error",
+            });
+          }
+        })
+        .catch((err) => {
+          console.log(err); //代码错误、请求失败捕获
+        });
+    },
+    //查询rpt绑定信息
+    getRptInfo() {
+      getRptApi({
+        sensorId: this.currentNodeKey,
+      })
+        .then((res) => {
+          this.bindInfo = res.data;
+
+          if (res.data.columnList != null) {
+            this.bindInfoArray = res.data.columnList;
+            this.previewData = res.data.rptList;
+            this.iedName = res.data.iedName;
+            this.icdid = res.data.icdid;
+            this.changeIedname(this.iedName);
+          } else {
+            this.iedName = "";
+            this.ljOptions = [];
+            this.ljName = "";
+          }
+        })
+        .catch((err) => {
+          console.log(err); //代码错误、请求失败捕获
+        });
+    },
+    handleSelectChange(item, value) {
+      console.log("Selected value for", item.name, "is:", value);
+      this.$forceUpdate();
+    },
+    confirmClick() {
+      console.log(this.preprocessedData);
+      let params = {
+        icdid: 0,
+        rptList: [
+          {
+            colname: "string",
+            paramindex: "string",
+          },
+        ],
+        sensorId: this.currentNodeKey,
+      };
+      // 更简洁且符合你要求的方式（只包含 paramindex 不为空的项）
+      params.rptList = this.preprocessedData
+        .filter((item) => item.matchedItem2 && item.matchedItem2.paramindex)
+        .map((item) => ({
+          colname: item.name,
+          paramindex: item.matchedItem2.paramindex,
+        }));
+      // 输出转换后的数据以验证
+      console.log(params);
+      updateRptApi(params)
+        .then((res) => {
+          console.log(res);
+          if (res.success) {
+            this.$message({
+              showClose: true,
+              message: "rptparam配置成功",
+              type: "success",
+            });
+          } else {
+            this.$message({
+              showClose: true,
+              message: res.errorMsg,
+              type: "error",
+            });
+          }
+        })
+        .catch((err) => {
+          console.log(err); //代码错误、请求失败捕获
+        });
+    },
+  },
+};
+</script>
+<style lang="less">
+.rptparamBox {
+  display: flex;
+  height: 100%;
+  .leftTree {
+    min-width: 380px;
+    max-width: 380px;
+    height: 100%;
+    overflow: auto;
+    //border: 1px solid #fff;
+    margin-right: 24px;
+    background: rgba(8, 9, 36, 0.28);
+    -webkit-backdrop-filter: blur(10px);
+    backdrop-filter: blur(10px);
+    box-shadow: inset 0 4px 44px 0 #106cde;
+    padding: 0px 12px;
+    h3 {
+      font-size: 14px;
+      color: #fff;
+      font-weight: normal;
+      height: 40px;
+      line-height: 40px;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
+    .treeBox {
+      width: 100%;
+      height: calc(100% - 48px);
+      background-color: #fff;
+      padding-top: 8px;
+      .searchBar {
+        width: 94%;
+        margin: 0px auto;
+        margin-bottom: 8px;
+      }
+      .el-tree {
+        overflow-y: auto;
+        overflow-x: hidden;
+        height: calc(100% - 40px);
+        .el-tree-node__content {
+          height: 32px;
+          font-size: 12px;
+        }
+        .custom-tree-node {
+          color: #333;
+          overflow: hidden;
+          span {
+            display: flex;
+            display: inline-table;
+            overflow: hidden;
+            align-items: center;
+          }
+          .num {
+            color: #169e8c;
+          }
+        }
+      }
+
+      .el-tree--highlight-current
+        .el-tree-node.is-current
+        > .el-tree-node__content {
+        // 设置颜色
+        color: #fff;
+        background: #3889cf;
+        .custom-tree-node {
+          color: #fff;
+          //overflow: hidden;
+          span {
+            display: flex;
+            //overflow: hidden;
+            align-items: center;
+            .num {
+              color: #fff;
+            }
+            .iconfont {
+              //width: 30px;
+              display: inline-table;
+            }
+          }
+        }
+      }
+      .el-tree .el-tree-node__expand-icon.expanded {
+        -webkit-transform: rotate(0deg);
+        transform: rotate(0deg);
+      }
+
+      .el-tree .el-tree-node__expand-icon.expanded {
+        -webkit-transform: rotate(0deg);
+        transform: rotate(0deg);
+      }
+
+      /* //有子节点 且未展开 */
+      .el-tree .el-icon-caret-right:before {
+        content: "\e783";
+        display: block;
+        width: 16px;
+        height: 16px;
+        font-size: 16px;
+        background-size: 16px;
+        color: #333;
+      }
+
+      /* //有子节点 且已展开 */
+      .el-tree .el-tree-node__expand-icon.expanded.el-icon-caret-right:before {
+        content: "\e781";
+        display: block;
+        width: 16px;
+        height: 16px;
+        font-size: 16px;
+        background-size: 16px;
+        color: #333;
+      }
+
+      /* //没有子节点 */
+      .el-tree .el-tree-node__expand-icon.is-leaf::before {
+        background: #fff;
+        content: "";
+        display: block;
+        width: 0px;
+        height: 0px;
+        font-size: 16px;
+        background-size: 16px;
+      }
+    }
+  }
+  .paramTable {
+    flex: 1;
+    overflow-x: hidden;
+    background: rgba(8, 9, 36, 0.28);
+    -webkit-backdrop-filter: blur(10px);
+    backdrop-filter: blur(10px);
+    box-shadow: inset 0 4px 44px 0 #106cde;
+    padding: 0px 12px;
+    .paramHead {
+      height: 40px;
+      line-height: 40px;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      h3 {
+        font-size: 14px;
+        color: #fff;
+        font-weight: normal;
+        height: 40px;
+        line-height: 40px;
+      }
+      .searchMain {
+        display: flex;
+        align-items: center;
+      }
+    }
+    .paramContain {
+      height: calc(100% - 42px);
+      //background: #fcc;
+      background: #fff;
+      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;
+      }
+
+      .showMsgBox {
+        width: calc(100% - 80px);
+        max-height: calc(100% - 160px);
+
+        padding: 0px 40px;
+        overflow: auto;
+        .warnMsg {
+          //padding: 0px 12px 0px 12px;
+
+          .el-tag {
+            display: block;
+            margin-right: 12px;
+            margin-bottom: 12px;
+            font-size: 14px;
+          }
+        }
+        .outside {
+          display: flex;
+          flex-direction: row;
+          flex-wrap: wrap;
+          justify-content: space-between;
+          .outsideLabel {
+            height: 40px;
+            line-height: 40px;
+            display: flex;
+            align-items: center;
+            margin-bottom: 12px;
+            margin-top: 2px;
+            .spanclass {
+              height: 40px;
+              line-height: 40px;
+              min-width: 280px;
+              padding: 0px 12px;
+              width: max-content;
+              border: 1px solid #ededed;
+              text-align: center;
+              b {
+                font-weight: normal;
+                font-size: 12px;
+                color: #666;
+              }
+              &:last-child {
+                width: 200px;
+              }
+              em {
+                font-style: normal;
+              }
+            }
+            .el-select {
+              margin-left: 20px;
+              width: 400px;
+            }
+          }
+        }
+      }
+      .savebtn {
+        margin-left: auto;
+        display: flex;
+        margin-right: 60px;
+        margin-top: 16px;
+      }
+    }
+  }
+}
+</style>