添加绑定监测点筛选

src/components/echarts/MyEchart.vue

@@ -70,6 +70,8 @@ const initChart = () => {
                     const value =
                         item.value === 3.14159 || item.value === 0.14159
                             ? '暂无数据'
+                            : item.value === 0.14158
+                            ? 0
                             : Math.round(item.value * 100) / 100 // 处理特殊值
                     tips += `<div style=" display: flex;justify-content: space-between;">
                            <span>${item.marker}
@@ -154,7 +156,6 @@ const initChart = () => {
         if (params.seriesName == '暂态触发点') {
             emit('triggerPoint', params.data)
         } else {
-
             emit('echartClick', params)
         }
     })

src/views/system/auth/department/popupPoint.vue

@@ -9,15 +9,22 @@
         <el-scrollbar style="padding-right: 0" v-loading="loading">
             <div class="box">
                 <div class="box-left">
+                    <el-input v-model="filterText" placeholder="请输入内容" clearable>
+                        <template #prefix>
+                            <Icon name="el-icon-Search" style="font-size: 16px" />
+                        </template>
+                    </el-input>
                     <el-tree
                         ref="leftTree"
-                        style="width: 100%; height: 100%"
+                        class="mt10"
+                        style="width: 100%; height: calc(60vh - 140px); overflow-y: auto"
                         :props="props"
                         :data="fromDataValue"
                         default-expand-all
                         :default-expanded-keys="leftDefaultExpandedKeys"
                         show-checkbox
                         node-key="id"
+                        :filter-node-method="filterNode"
                         @check="leftCheckChange"
                     />
                 </div>
@@ -44,15 +51,22 @@
                     </el-button>
                 </div>
                 <div class="box-right">
+                    <el-input v-model="filterText1" placeholder="请输入内容" clearable>
+                        <template #prefix>
+                            <Icon name="el-icon-Search" style="font-size: 16px" />
+                        </template>
+                    </el-input>
                     <el-tree
                         ref="rightTree"
-                        style="width: 100%; height: 100%"
+                        class="mt10"
+                        style="width: 100%; height: calc(60vh - 140px); overflow-y: auto"
                         :props="props"
                         default-expand-all
                         :data="toDataValue"
                         :default-expanded-keys="rightDefaultExpandedKeys"
                         show-checkbox
                         node-key="id"
+                        :filter-node-method="filterNode1"
                         @check="rightCheckChange"
                     />
                 </div>
@@ -98,6 +112,8 @@ const props = {
     value: 'id',
     children: 'children'
 }
+const filterText = ref('')
+const filterText1 = ref('')
 const getExpandedKeys = (originArr: treeData[]) => {
     let arr: string[] = []
     const call = (originArr: treeData[]) => {
@@ -194,7 +210,8 @@ const unbind = () => {
 }
 
 const open = (row: any) => {
-  
+    filterText.value = ''
+    filterText1.value = ''
     dialogVisible.value = true
     binData.deptId = row.id
     binData.deptType = row.type
@@ -210,7 +227,52 @@ const submit = async () => {
         dialogVisible.value = false
     })
 }
-
+watch(filterText, val => {
+    leftTree.value!.filter(val)
+})
+watch(filterText1, val => {
+    rightTree.value!.filter(val)
+})
+const filterNode = (value: string, data: any, node: any) => {
+    if (!value) return true
+    // return data.name.includes(value)
+    if (data.name) {
+        return chooseNode(value, data, node)
+    }
+}
+const filterNode1 = (value: string, data: any, node: any) => {
+    if (!value) return true
+    // return data.name.includes(value)
+    if (data.name) {
+        return chooseNode(value, data, node)
+    }
+}
+// 过滤父节点 / 子节点 (如果输入的参数是父节点且能匹配，则返回该节点以及其下的所有子节点；如果参数是子节点，则返回该节点的父节点。name是中文字符，enName是英文字符.
+const chooseNode = (value: string, data: any, node: any) => {
+    if (data.name.indexOf(value) !== -1) {
+        return true
+    }
+    const level = node.level
+    // 如果传入的节点本身就是一级节点就不用校验了
+    if (level === 1) {
+        return false
+    }
+    // 先取当前节点的父节点
+    let parentData = node.parent
+    // 遍历当前节点的父节点
+    let index = 0
+    while (index < level - 1) {
+        // 如果匹配到直接返回，此处name值是中文字符，enName是英文字符。判断匹配中英文过滤
+        if (parentData.data.name.indexOf(value) !== -1) {
+            return true
+        }
+        // 否则的话再往上一层做匹配
+        parentData = parentData.parent
+        index++
+    }
+    // 没匹配到返回false
+    return false
+}
 defineExpose({ open })
 </script>
 <style lang="scss">