修改 模块运行状态页面添加数据展示

src/components/tree/point.vue

@@ -35,8 +35,14 @@
                 @change="changeDevice"
             >
                 <el-collapse-item title="治理设备" name="0" v-if="zlDeviceData.length != 0">
+                    <el-select v-model.trim="process" clearable placeholder="请选择状态" class="mb10">
+                        <el-option label="功能调试" value="2"></el-option>
+                        <el-option label="出厂调试" value="3"></el-option>
+                        <el-option label="正式投运" value="4"></el-option>
+                    </el-select>
+
                     <el-tree
-                        :style="{ height: bxsDeviceData.length != 0 ? 'calc(100vh - 300px)' : 'calc(100vh - 238px)' }"
+                        :style="{ height: bxsDeviceData.length != 0 ? 'calc(100vh - 340px)' : 'calc(100vh - 278px)' }"
                         ref="treeRef1"
                         :props="defaultProps"
                         highlight-current
@@ -44,7 +50,7 @@
                         node-key="id"
                         default-expand-all
                         v-bind="$attrs"
-                        :data="zlDeviceData"
+                        :data="zlDevList"
                         style="overflow: auto"
                     >
                         <template #default="{ node, data }">
@@ -94,7 +100,7 @@
 <script lang="ts" setup>
 import useCurrentInstance from '@/utils/useCurrentInstance'
 import { ElTree } from 'element-plus'
-import { ref, watch, defineEmits, onMounted, nextTick } from 'vue'
+import { ref, watch, defineEmits, onMounted, nextTick, computed } from 'vue'
 import { useRoute } from 'vue-router'
 defineOptions({
     name: 'govern/tree'
@@ -113,7 +119,7 @@ const props = withDefaults(defineProps<Props>(), {
     type: '',
     data: []
 })
-
+const process = ref('2')
 const route = useRoute()
 const { proxy } = useCurrentInstance()
 const menuCollapse = ref(false)
@@ -125,6 +131,7 @@ const defaultProps = {
 }
 //治理设备数据
 const zlDeviceData = ref<any>([])
+const zlDevList = ref<any>([])
 //便携式设备数据
 const bxsDeviceData = ref<any>([])
 watch(
@@ -144,6 +151,7 @@ watch(
                 }
             })
             if (zlDeviceData.value.length != 0) {
+                zlDevList.value = filterProcess(JSON.parse(JSON.stringify(zlDeviceData.value)))
                 activeName.value = '0'
             }
             if (zlDeviceData.value.length === 0 && bxsDeviceData.value.length != 0) {
@@ -152,7 +160,9 @@ watch(
             if (!zlDeviceData.value && !bxsDeviceData.value) {
                 activeName.value = ''
             }
-            changeDevice(activeName.value)
+            nextTick(() => {
+                changeDevice(activeName.value)
+            })
         }
     },
     {
@@ -168,9 +178,21 @@ watch(filterText, val => {
         treeRef2.value!.filter(val)
     }
 })
+watch(process, val => {
+    if (val == '') {
+        zlDevList.value = JSON.parse(JSON.stringify(zlDeviceData.value))
+    } else {
+        zlDevList.value = filterProcess(JSON.parse(JSON.stringify(zlDeviceData.value)))
+    }
+    setTimeout(() => {
+        changeDevice(activeName.value)
+    }, 0)
+})
+
 const changeDevice = (val: any) => {
     let arr1: any = []
-    zlDeviceData.value.forEach((item: any) => {
+    //zlDeviceData
+    zlDevList.value.forEach((item: any) => {
         item.children.forEach((item2: any) => {
             item2.children.forEach((item3: any) => {
                 item3.children.forEach((item4: any) => {
@@ -215,7 +237,25 @@ const filterNode = (value: string, data: any, node: any) => {
         return chooseNode(value, data, node)
     }
 }
+function filterProcess(nodes: any) {
+    return nodes
+        .map(node => {
+            // 递归处理子节点
+            const children = node.children ? filterProcess(node.children) : []
 
+            // 如果当前节点的process=4，或者有子节点满足条件，则保留当前节点
+            if (node.process == process.value || children.length > 0) {
+                return {
+                    ...node,
+                    children: node.children
+                }
+            }
+
+            // 否则过滤掉当前节点
+            return null
+        })
+        .filter(Boolean) // 移除null节点
+}
 // 过滤父节点 / 子节点 (如果输入的参数是父节点且能匹配，则返回该节点以及其下的所有子节点；如果参数是子节点，则返回该节点的父节点。name是中文字符，enName是英文字符.
 const chooseNode = (value: string, data: any, node: any) => {
     if (data.name.indexOf(value) !== -1) {