添加i2配置

src/components/Sidebar.vue

@@ -46,6 +46,10 @@ export default {
           path: "/alarmRules",
           name: "告警规则",
         },
+        {
+          path: "/I2config",
+          name: "I2配置",
+        },
       ],
     };
   },

src/router/index.js

@@ -138,6 +138,47 @@ const routes = [
           title: "告警规则",
         },
       },
+      {
+        path: "/I2config",
+        component: () => import("../views/I2config/index.vue"),
+        name: "I2config",
+        meta: {
+          title: "I2配置",
+        },
+        path: "/I2config",
+        component: () => import("../views/I2config/index.vue"),
+        name: "I2config",
+        redirect: "/I2config/filed",
+        meta: {
+          title: "I2配置管理",
+        },
+        children: [
+          {
+            path: "/I2config/filed",
+            component: () => import("../views/I2config/filed/index.vue"),
+            name: "filed",
+            meta: {
+              title: "字段映射",
+            },
+          },
+          {
+            path: "/I2config/exportType",
+            component: () => import("../views/I2config/exportType/index.vue"),
+            name: "exportType",
+            meta: {
+              title: "导出类型",
+            },
+          },
+          {
+            path: "/I2config/record",
+            component: () => import("../views/I2config/record/index.vue"),
+            name: "record",
+            meta: {
+              title: "导出记录",
+            },
+          },
+        ],
+      },
     ],
   },
 ];

src/utils/api/index.js

@@ -707,3 +707,35 @@ export function warningListApi(data) {
     },
   });
 }
+
+//I2配置
+//字段映射列表
+export function listFieldConfigApi(data) {
+  return request({
+    url: "/i2sync/listFieldConfig",
+    method: "get",
+    params: data,
+    headers: {
+      "Content-Type": "application/x-www-form-urlencoded;charset=UTF-8",
+    },
+  });
+}
+//修改字段映射表
+
+export function updateFieldConfigApi(data) {
+  return request({
+    url: "/i2sync/updateFieldConfig",
+    method: "post",
+    data,
+  });
+}
+
+//删除字段映射表
+
+export function delFieldConfigApi(data) {
+  return request({
+    url: "/i2sync/delFieldConfig",
+    method: "post",
+    data,
+  });
+}

src/views/I2config/exportType/index.vue

@@ -0,0 +1,43 @@
+<template>
+  <div class="filedBox">
+    <div class="reportHead">
+      <h3>导出类型</h3>
+    </div>
+    <div class="page-body">
+      <el-button type="primary" icon="el-icon-plus">添加主设备</el-button>
+      <div class="zsbTableBox"></div>
+    </div>
+  </div>
+</template>
+<script>
+//import { zsbDeleteApi, zsbListAllApi } from "@/utils/api/index";
+// import addzsbDialog from "./components/addzsbDialog";
+export default {
+  name: "exportType",
+  components: {},
+  data() {
+    return {};
+  },
+  created() {},
+  mounted() {},
+  watch: {},
+  methods: {},
+};
+</script>
+<style lang="less">
+.filedBox {
+  width: 100%;
+  height: 100%;
+  .page-body {
+    width: calc(100% - 24px);
+    height: calc(100% - 74px);
+    padding: 12px;
+    background: #eee;
+    .zsbTableBox {
+      margin-top: 8px;
+      height: calc(100% - 38px);
+      box-shadow: 1px 0 10px 1px rgba(0, 0, 0, 0.3);
+    }
+  }
+}
+</style>

src/views/I2config/filed/components/addfiledDialog.vue

@@ -0,0 +1,344 @@
+<template>
+  <div class="filedAddBox">
+    <el-dialog
+      class="AddDialogBox"
+      :title="title"
+      :visible.sync="filedDialogshow"
+      width="520px"
+      :close-on-click-modal="false"
+    >
+      <div class="filedInfo">
+        <el-form
+          label-position="left"
+          ref="formInfo"
+          label-width="104px"
+          :rules="rules"
+          :model="formInfo"
+        >
+          <el-form-item label="设备类型：">
+            <el-select
+              v-model="formInfo.jcsbType"
+              @change="changeJg"
+              :disabled="title == '修改'"
+            >
+              <el-option
+                v-for="item in jcsbOptions"
+                :key="item.id"
+                :label="item.mc"
+                :value="item.id"
+              ></el-option>
+            </el-select>
+          </el-form-item>
+        </el-form>
+
+        <div class="colListBox">
+          <div class="coltitle">
+            <span>表字段</span>
+            <span>导出字段</span>
+          </div>
+          <div
+            class="selectCol"
+            v-for="(item, index) in colData"
+            :key="item.id"
+          >
+            <el-checkbox
+              v-model="item.selected"
+              @change="handleSingleSelect(item, index)"
+            >
+              {{ item.comment + item.name }}
+            </el-checkbox>
+            <el-input
+              :disabled="!item.selected"
+              v-model="item.value"
+              placeholder="请输入值"
+              type="text"
+            ></el-input>
+          </div>
+        </div>
+      </div>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="hide">取 消</el-button>
+        <el-button type="primary" @click="submitForm()">确 定</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+<script>
+import {
+  modevtypeListAllApi,
+  colListApi,
+  updateFieldConfigApi,
+} from "@/utils/api/index";
+export default {
+  props: ["title"],
+  data() {
+    return {
+      filedDialogshow: false,
+      formInfo: {
+        jcsbType: "",
+      },
+      rules: {},
+      jcsbOptions: [],
+      selectTableName: "",
+      mc: "",
+      curdata: [],
+      colAllData: [],
+      colData: [],
+    };
+  },
+  created() {},
+  mounted() {
+    // 初始化时，给每个对象添加 selected 和 value 属性
+  },
+  watch: {},
+  methods: {
+    //判断
+    getdataform(val) {
+      console.log(val);
+      this.curdata = val;
+      this.selectTableName = val.tablename;
+      this.mc = val.mc;
+    },
+    submitForm() {
+      this.$refs.formInfo.validate((valid) => {
+        if (valid) {
+          if (this.title == "新增字段映射") {
+            console.log(this.formInfo);
+            console.log(this.colData);
+
+            let i2syncFields = this.colData
+              .filter(
+                (item) =>
+                  item.hasOwnProperty("value") &&
+                  item.hasOwnProperty("name") && // 确保有name属性
+                  item.value !== "" && // 确保有name属性
+                  item.selected // 并且value为空字符串、undefined或null
+              ) // 过滤出有value和name属性的项
+              .map((item) => ({
+                destFieldName: item.value,
+                fieldName: item.name,
+              }));
+            let params = {
+              tablename: this.selectTableName,
+              i2syncFields: i2syncFields,
+              mc: this.mc,
+            };
+
+            console.log(params);
+            updateFieldConfigApi(params)
+              .then((res) => {
+                if (res.success) {
+                  this.$message({
+                    duration: 1500,
+                    showClose: true,
+                    message: "添加成功",
+                    type: "success",
+                  });
+                  this.hide();
+                  this.$parent.getFiledList(); //刷新
+                } else {
+                  this.$message({
+                    duration: 1500,
+                    showClose: true,
+                    message: res.errorMsg,
+                    type: "error",
+                  });
+                }
+              })
+              .catch((err) => {});
+          } else {
+            console.log(this.formInfo);
+            console.log(this.colData);
+            let i2syncFields = this.colData
+              .filter(
+                (item) =>
+                  item.hasOwnProperty("value") &&
+                  item.hasOwnProperty("name") && // 确保有name属性
+                  item.value !== "" && // 确保有name属性
+                  item.selected // 并且value为空字符串、undefined或null
+              ) // 过滤出有value和name属性的项
+              .map((item) => ({
+                destFieldName: item.value,
+                fieldName: item.name,
+              }));
+            let params = {
+              tablename: this.selectTableName,
+              i2syncFields: i2syncFields,
+              mc: this.mc,
+            };
+
+            console.log(params);
+            updateFieldConfigApi(params)
+              .then((res) => {
+                if (res.success) {
+                  this.$message({
+                    duration: 1500,
+                    showClose: true,
+                    message: "添加成功",
+                    type: "success",
+                  });
+                  this.hide();
+                  this.$parent.getFiledList(); //刷新
+                } else {
+                  this.$message({
+                    duration: 1500,
+                    showClose: true,
+                    message: res.errorMsg,
+                    type: "error",
+                  });
+                }
+              })
+              .catch((err) => {});
+          }
+        } else {
+          console.log("error submit!!");
+          return false;
+        }
+      });
+    },
+    //获取监测设备类型
+    getjcsbListAll() {
+      modevtypeListAllApi()
+        .then((res) => {
+          console.log(res);
+          this.jcsbOptions = res.data;
+          console.log(this.title);
+          if (this.title == "新增字段映射") {
+            console.log(this.formInfo);
+            this.formInfo.jcsbType = this.jcsbOptions[0].id;
+            this.selectTableName = this.jcsbOptions[0].tablename;
+            this.mc = this.jcsbOptions[0].mc;
+          } else {
+            let selectXl = this.jcsbOptions.find(
+              (item) => item.tablename === this.selectTableName
+            );
+            console.log(selectXl);
+            if (selectXl) {
+              // 如果找到了匹配的项，访问它的 tablename
+              this.formInfo.jcsbType = selectXl.id;
+              console.log(this.formInfo.jcsbType);
+            }
+          }
+          this.getcolList();
+        })
+        .catch((err) => {
+          console.log(err); //代码错误、请求失败捕获
+        });
+    },
+
+    handleSingleSelect(item, index) {
+      console.log(item.selected);
+      // 如果 checkbox 被选中，并且 input 没有值，则设置初始值
+      if (item.selected && !item.value) {
+        item.value = item.name; // 或者其他默认值
+      } else {
+        item.value = "";
+      }
+      console.log(this.colData);
+    },
+    //选中的值获取tablename
+    changeJg(val) {
+      console.log(val);
+      let selectedOption = this.jcsbOptions.find((item) => item.id === val);
+      if (selectedOption) {
+        // 如果找到了匹配的项，访问它的 tablename
+        this.selectTableName = selectedOption.tablename;
+        this.mc = selectedOption.mc;
+        console.log(this.selectTableName); // 或者根据你的需求使用 tablename
+        this.getcolList();
+      }
+    },
+    //查询data表字段名
+    getcolList() {
+      colListApi({ tableName: this.selectTableName })
+        .then((res) => {
+          console.log(res);
+          const data = res.data; // 假设res.data是一个数组
+          // 使用map方法给每个对象添加selected和value属性
+          this.colAllData = data.map((item) => ({
+            ...item, // 使用展开运算符保持原有属性
+            selected: false, // 添加selected属性并初始化为false
+            value: "", // 添加value属性并初始化为空字符串
+          }));
+          if (this.title == "新增字段映射") {
+            this.colData = [...this.colAllData]; // 使用展开运算符创建数据的浅拷贝
+          } else {
+            console.log("修改 ");
+            this.colAllData.forEach((colDataItem) => {
+              this.curdata.i2syncFields.forEach((syncField) => {
+                if (colDataItem.name === syncField.fieldName) {
+                  // 添加 selected 属性并设置为 true
+                  colDataItem.selected = true;
+                  colDataItem.value = syncField.destFieldName;
+                  // 这里不需要设置 value，因为 colDataItem 已经是 this.colAllData 的一部分
+                  // 但如果需要关联原始数据，可以设置一个属性来引用它
+                  // colDataItem.value = this.curdata; // 注意：这样可能会引用整个 curdata 对象，可能不是您想要的
+                  // 通常，您可能只需要引用 curdata 的一部分或者一个标识符
+                }
+              });
+            });
+            this.colData = [...this.colAllData];
+            console.log(this.colAllData);
+          }
+        })
+        .catch((err) => {
+          console.log(err); //代码错误、请求失败捕获
+        });
+    },
+
+    display() {
+      this.filedDialogshow = true;
+      this.getjcsbListAll();
+    },
+    hide() {
+      this.filedDialogshow = false;
+      this.jcsbOptions = [];
+      this.colAllData = [];
+      this.colData = [];
+      this.$refs.formInfo.resetFields(); // 重置表单字段值
+    },
+  },
+};
+</script>
+<style lang="less">
+.filedAddBox {
+  .AddDialogBox {
+    .el-select {
+      width: 376px;
+    }
+    .filedInfo {
+      .colListBox {
+        overflow: auto;
+        height: 400px;
+        .coltitle {
+          display: flex;
+          align-items: center;
+          margin-bottom: 8px;
+          span {
+            font-weight: bold;
+            &:first-child {
+              width: 40%;
+              margin-right: 24px;
+            }
+            &:last-child {
+              width: 50%;
+            }
+          }
+        }
+        .selectCol {
+          display: flex;
+          align-items: center;
+          margin-bottom: 10px;
+          .el-checkbox {
+            width: 40%;
+            margin-right: 24px;
+          }
+          .el-input {
+            width: 50%;
+          }
+        }
+      }
+    }
+  }
+}
+</style>

src/views/I2config/filed/index.vue

@@ -0,0 +1,155 @@
+<template>
+  <div class="filedBox">
+    <div class="reportHead">
+      <h3>字段映射</h3>
+    </div>
+    <div class="page-body">
+      <el-button type="primary" icon="el-icon-plus" @click="handleAddClick"
+        >新增字段映射</el-button
+      >
+      <div class="zsbTableBox">
+        <el-table :data="filedData" style="width: 100%">
+          <el-table-column type="expand">
+            <template slot-scope="props">
+              <!-- {{ props.row.i2syncFields }} -->
+              <el-table
+                :data="props.row.i2syncFields"
+                style="width: 100%"
+                border
+              >
+                <el-table-column prop="fieldName" label="表字段">
+                </el-table-column>
+                <el-table-column prop="destFieldName" label="导出字段">
+                </el-table-column>
+              </el-table>
+            </template>
+          </el-table-column>
+
+          <el-table-column label="名称" prop="mc"> </el-table-column>
+          <el-table-column label="表名" prop="tablename"> </el-table-column>
+          <el-table-column label="字段映射个数" prop="i2syncFields">
+            <template slot-scope="scope">
+              <span>{{ scope.row.i2syncFields.length }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column label="操作" class-name="editClass">
+            <template slot-scope="scope">
+              <el-link
+                type="primary"
+                @click="handleEditClick(scope.row)"
+                size="small"
+                icon="el-icon-document"
+                >修改</el-link
+              >
+              <el-link
+                type="danger"
+                @click="handleDeleteClick(scope.row)"
+                size="small"
+                icon="el-icon-delete"
+                >删除</el-link
+              >
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+    </div>
+    <addfiledDialog ref="filedAddRef" :title="title"></addfiledDialog>
+  </div>
+</template>
+<script>
+import { listFieldConfigApi, delFieldConfigApi } from "@/utils/api/index";
+import addfiledDialog from "./components/addfiledDialog";
+export default {
+  components: {
+    addfiledDialog,
+  },
+  name: "field",
+  data() {
+    return {
+      filedLoading: false,
+      filedData: [],
+      title: "",
+    };
+  },
+  created() {
+    this.getFiledList();
+  },
+  mounted() {},
+  watch: {},
+  methods: {
+    //获取字段映射
+    getFiledList() {
+      this.filedLoading = true;
+      listFieldConfigApi()
+        .then((res) => {
+          console.log(res);
+          this.filedData = res.data;
+
+          this.filedLoading = false;
+        })
+        .catch((err) => {
+          console.log(err); //代码错误、请求失败捕获
+        });
+    },
+    //新增
+    handleAddClick() {
+      this.title = "新增字段映射";
+      this.$refs.filedAddRef.display();
+    },
+    handleEditClick(data) {
+      this.title = "修改";
+      this.$refs.filedAddRef.display();
+      this.$refs.filedAddRef.getdataform(data);
+    },
+    //删除数据
+    handleDeleteClick(data) {
+      console.log(data);
+      this.$confirm("确定要删除记录吗?", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+      })
+        .then(() => {
+          delFieldConfigApi({ tablename: data.tablename, mc: data.mc }).then(
+            (res) => {
+              if (res.success) {
+                this.$message({
+                  duration: 1500,
+                  showClose: true,
+                  type: "success",
+                  message: "删除成功",
+                });
+                this.getFiledList(); //刷新
+              } else {
+                this.$message({
+                  duration: 1500,
+                  showClose: true,
+                  type: "error",
+                  message: res.errorMsg,
+                });
+              }
+            }
+          );
+        })
+        .catch(() => {});
+    },
+  },
+};
+</script>
+<style lang="less">
+.filedBox {
+  width: 100%;
+  height: 100%;
+  .page-body {
+    width: calc(100% - 24px);
+    height: calc(100% - 74px);
+    padding: 12px;
+    background: #eee;
+    .zsbTableBox {
+      margin-top: 8px;
+      height: calc(100% - 38px);
+      box-shadow: 1px 0 10px 1px rgba(0, 0, 0, 0.3);
+    }
+  }
+}
+</style>

src/views/I2config/index.vue

@@ -0,0 +1,181 @@
+<template>
+  <div class="I2Box">
+    <div class="equimentList">
+      <div class="sideNav">
+        <h3><i class="el-icon-s-tools"></i>I2配置</h3>
+        <ul class="navList">
+          <li v-for="(item, index) in navlist" :key="index">
+            <router-link :to="item.path">
+              <span>{{ item.name }}</span
+              ><i class="el-icon-arrow-right"></i>
+            </router-link>
+          </li>
+        </ul>
+      </div>
+    </div>
+    <div class="reportTable">
+      <router-view></router-view>
+    </div>
+  </div>
+</template>
+<script>
+// import addRules from "./components/addRules";
+// import copyRules from "./components/copyRules";
+import {} from "@/utils/api/index";
+export default {
+  name: "I2config",
+  components: {},
+  data() {
+    return {
+      activeIndex: 0,
+      navlist: [
+        {
+          name: "字段映射",
+          path: "/I2config/filed",
+        },
+        {
+          name: "导出类型",
+          path: "/I2config/exportType",
+        },
+        {
+          name: "导出记录",
+          path: "/I2config/record",
+        },
+      ],
+    };
+  },
+  watch: {},
+  computed: {},
+  created() {},
+  methods: {},
+};
+</script>
+<style lang="less">
+.I2Box {
+  display: flex;
+  height: 100%;
+  .equimentList {
+    min-width: 240px;
+    max-width: 240px;
+    height: 100%;
+    overflow: auto;
+    //border: 1px solid #fff;
+    margin-right: 24px;
+    background: rgba(8, 9, 36, 0.28);
+
+    box-shadow: inset 0 4px 44px 0 #106cde;
+    //padding: 0px 12px;
+    .sideNav {
+      margin: 10px;
+
+      height: calc(100% - 20px);
+      background-color: #fff;
+    }
+    h3 {
+      font-weight: normal;
+      display: block;
+      height: 38px;
+      line-height: 36px;
+      margin: 0;
+      padding: 0 16px 0 16px;
+      -webkit-text-shadow: none !important;
+      text-shadow: none !important;
+      font-size: 14px;
+      text-decoration: none;
+      color: #262626;
+      display: flex;
+      align-items: center;
+      i {
+        margin-right: 6px;
+      }
+    }
+    .navList {
+      box-shadow: inset 0 4px 4px -2px rgba(0, 0, 0, 0.15),
+        inset 0 -4px 4px -2px rgba(0, 0, 0, 0.15);
+      position: relative;
+      background-color: #fbfbfb;
+      li {
+        padding: 0 16px 0 38px;
+        color: #262626;
+        height: 38px;
+        line-height: 36px;
+        font-size: 14px;
+        display: flex;
+        align-items: center;
+
+        &::before {
+          content: "";
+          display: block;
+          position: absolute;
+          z-index: 1;
+          left: 23px;
+          top: 0;
+          bottom: 19px;
+          border-left: 1px solid #e2e2e2;
+        }
+        &:hover {
+          a {
+            cursor: pointer;
+            color: #106cde;
+          }
+        }
+        a {
+          position: relative;
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          width: 100%;
+          color: #262626;
+          &::before {
+            content: "";
+            display: inline-block;
+            position: absolute;
+            width: 5px;
+            height: 5px;
+            left: -18px;
+            top: 16px;
+            background-color: #fff;
+            border: 1px solid #e2e2e2;
+            z-index: 2;
+            border-radius: 4px;
+          }
+        }
+        .router-link-active {
+          color: #106cde;
+        }
+      }
+    }
+  }
+  .reportTable {
+    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;
+    .reportHead {
+      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;
+      }
+    }
+    .el-table .el-table__cell {
+      text-align: center;
+    }
+    .editClass {
+      .el-link.el-link--primary {
+        margin-right: 14px;
+      }
+    }
+  }
+}
+</style>

src/views/I2config/record/index.vue

@@ -0,0 +1,43 @@
+<template>
+  <div class="filedBox">
+    <div class="reportHead">
+      <h3>导出记录</h3>
+    </div>
+    <div class="page-body">
+      <el-button type="primary" icon="el-icon-plus">添加主设备</el-button>
+      <div class="zsbTableBox"></div>
+    </div>
+  </div>
+</template>
+<script>
+//import { zsbDeleteApi, zsbListAllApi } from "@/utils/api/index";
+// import addzsbDialog from "./components/addzsbDialog";
+export default {
+  name: "record",
+  components: {},
+  data() {
+    return {};
+  },
+  created() {},
+  mounted() {},
+  watch: {},
+  methods: {},
+};
+</script>
+<style lang="less">
+.zsbBox {
+  width: 100%;
+  height: 100%;
+  .page-body {
+    width: calc(100% - 24px);
+    height: calc(100% - 74px);
+    padding: 12px;
+    background: #eee;
+    .zsbTableBox {
+      margin-top: 8px;
+      height: calc(100% - 38px);
+      box-shadow: 1px 0 10px 1px rgba(0, 0, 0, 0.3);
+    }
+  }
+}
+</style>

src/views/alarmRules/index.vue

@@ -3,11 +3,21 @@
     <div class="leftTree">
       <h3>设备列表</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"
+          :filter-node-method="filterNode"
           :default-expanded-keys="defaultExpandedKeys"
           highlight-current
           :current-node-key="currentNodekey"
@@ -158,12 +168,35 @@ export default {
       typeIdVal: "",
     };
   },
-  watch: {},
+  watch: {
+    filterText(newVal) {
+      this.handleFilter(); // 当 filterText 发生变化时执行过滤操作
+    },
+  },
   computed: {},
   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) => {

src/views/dataReport/index.vue

@@ -335,10 +335,12 @@ export default {
     },
     //树状图搜索
     filterNode(value, data, node) {
+      console.log(value);
       // 如果什么都没填全部匹配全部返回
       if (!value) return true;
-      this.searchName = data.name;
+      console.log(data);
-      //console.log(this.searchName);
+      this.searchName = data.mc + data.name;
+      console.log(this.searchName);
       // 如果传入的value和data中的label相同，匹配成功
       if (this.searchName.indexOf(value) !== -1) {
         return true;

src/views/homePage/warnMessage/components/warnDialog.vue

@@ -87,9 +87,15 @@
           </el-table-column>
           <el-table-column align="center" prop="warnLevel" label="告警等级">
             <template slot-scope="scope">
-              <span v-if="scope.row.warnLevel == 2">高 </span>
+              <span v-if="scope.row.warnLevel == 2"
-              <span v-else-if="scope.row.warnLevel == 1"> 中 </span>
+                ><el-tag type="danger">高</el-tag>
-              <span v-else-if="scope.row.warnLevel == 0"> 低 </span>
+              </span>
+              <span v-else-if="scope.row.warnLevel == 1">
+                <el-tag type="warning">中</el-tag>
+              </span>
+              <span v-else-if="scope.row.warnLevel == 0">
+                <el-tag type="info">低</el-tag>
+              </span>
             </template>
           </el-table-column>
         </el-table>

src/views/paramBinding/index.vue

@@ -8,12 +8,22 @@
         >
       </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"
@@ -162,12 +172,35 @@ export default {
       jbFlag: false,
     };
   },
-  watch: {},
+  watch: {
+    filterText(newVal) {
+      this.handleFilter(); // 当 filterText 发生变化时执行过滤操作
+    },
+  },
   computed: {},
   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) => {

vue.config.js

@@ -20,8 +20,9 @@ module.exports = defineConfig({
     proxy: {
       "/cac-api": {
         //表示拦截以/api开头的请求路径
-        target: "http://192.168.1.190:88", //200服务器
+        //target: "http://192.168.1.190:88", //200服务器
-        //target: "http://dev.xinyingpower.com:40080/", //dell服务器
+        target: "http://61.169.135.146:40080/", //dell服务器
+
         changOrigin: true, //是否开启跨域
         pathRewrite: {
           "^/api": "/cac-api", //重写api，把api变成空字符，因为我们真正请求的路径是没有api的