添加工程树

src/components/tree/point.vue

@@ -13,11 +13,27 @@
         />
         <div class="cn-tree" :style="{ opacity: menuCollapse ? 0 : 1, display: menuCollapse ? 'none' : '' }">
             <div style="display: flex; align-items: center" class="mb10">
-                <el-input maxlength="32" show-word-limit v-model.trim="filterText" placeholder="请输入内容" clearable>
+                <!-- <el-input maxlength="32"  v-model.trim="filterText" placeholder="请输入内容" clearable>
+                    <template #prefix>
+                        <Icon name="el-icon-Search" style="font-size: 16px" />
+                    </template>
+                </el-input> -->
+                <el-input maxlength="32"  v-model.trim="filterText" placeholder="请输入内容" clearable>
+                    <template #prepend>
+                        <el-select v-model="treeType" @change="changeTreeType" style="min-width: 75px">
+                            <el-option
+                                v-for="item in options"
+                                :key="item.value"
+                                :label="item.label"
+                                :value="item.value"
+                            />
+                        </el-select>
+                    </template>
                     <template #prefix>
                         <Icon name="el-icon-Search" style="font-size: 16px" />
                     </template>
                 </el-input>
+                <!--  -->
                 <Icon
                     @click="onMenuCollapse"
                     :name="menuCollapse ? 'el-icon-Expand' : 'el-icon-Fold'"
@@ -34,6 +50,8 @@
                 v-model.trim="activeName"
                 style="flex: 1; height: 100%"
                 @change="changeDevice"
+                v-if="treeType == '1'"
+                v-loading="loading"
             >
                 <el-collapse-item title="治理设备" name="0" v-if="zlDeviceData.length != 0">
                     <el-select v-model.trim="process" clearable placeholder="请选择状态" class="mb10">
@@ -120,6 +138,33 @@
                     </el-tree>
                 </el-collapse-item>
             </el-collapse>
+            <div v-if="treeType == '2'" v-loading="loading">
+                <el-tree
+                    :style="{ height: 'calc(100vh - 188px)' }"
+                    class="pt10"
+                    ref="treeRef4"
+                    :props="defaultProps"
+                    highlight-current
+                    :filter-node-method="filterNode"
+                    node-key="id"
+                    v-bind="$attrs"
+                    :data="data"
+                    style="overflow: auto"
+                    :default-expand-all="false"
+                >
+                    <template #default="{ node, data }">
+                        <span class="custom-tree-node">
+                            <Icon
+                                :name="data.icon"
+                                style="font-size: 16px"
+                                :style="{ color: data.color }"
+                                v-if="data.icon"
+                            />
+                            <span style="margin-left: 4px">{{ node.label }}</span>
+                        </span>
+                    </template>
+                </el-tree>
+            </div>
         </div>
     </div>
 </template>
@@ -133,7 +178,7 @@ import { useRoute } from 'vue-router'
 defineOptions({
     name: 'govern/tree'
 })
-const emit = defineEmits(['changePointType'])
+const emit = defineEmits(['changePointType', 'changeTreeType'])
 interface Props {
     width?: string
     canExpand?: boolean
@@ -157,6 +202,17 @@ const defaultProps = {
     label: 'name',
     value: 'id'
 }
+const treeType = ref('1')
+const options = [
+    {
+        label: '设备',
+        value: '1'
+    },
+    {
+        label: '工程',
+        value: '2'
+    }
+]
 //治理设备数据
 const zlDeviceData = ref<any>([])
 const zlDevList = ref<any>([])
@@ -196,7 +252,9 @@ watch(
 )
 
 watch(filterText, val => {
-    if (activeName.value == '0') {
+    if (treeType.value == '2') {
+        treeRef4.value!.filter(val)
+    } else if (activeName.value == '0') {
         treeRef1.value!.filter(val)
     } else if (activeName.value == '1') {
         treeRef2.value!.filter(val)
@@ -217,8 +275,6 @@ watch(process, val => {
 })
 
 const changeDevice = (val: any) => {
-    console.log('🚀 ~ changeDevice ~ val:', val)
-
     let arr1: any = []
     //zlDeviceData
     zlDevList.value.forEach((item: any) => {
@@ -381,27 +437,43 @@ const treeRef1 = ref<InstanceType<typeof ElTree>>()
 const treeRef2 = ref<InstanceType<typeof ElTree>>()
 //在线
 const treeRef3 = ref<InstanceType<typeof ElTree>>()
-defineExpose({ treeRef1, treeRef2, treeRef3 })
+// 工程
+const treeRef4 = ref<InstanceType<typeof ElTree>>()
+defineExpose({ treeRef1, treeRef2, treeRef3, treeRef4 })
 onMounted(() => {
     setTimeout(() => {
-        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) {
-            activeName.value = '1'
-        }
-        if (zlDeviceData.value.length === 0 && bxsDeviceData.value.length === 0) {
-            activeName.value = '2'
-        }
-        if (!zlDeviceData.value && !bxsDeviceData.value) {
-            activeName.value = '2'
-        }
-        nextTick(() => {
-            changeDevice(activeName.value)
-        })
+        setActiveName()
     }, 500)
 })
+const setActiveName = () => {
+    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) {
+        activeName.value = '1'
+    }
+    if (zlDeviceData.value.length === 0 && bxsDeviceData.value.length === 0) {
+        activeName.value = '2'
+    }
+    if (!zlDeviceData.value && !bxsDeviceData.value) {
+        activeName.value = '2'
+    }
+    nextTick(() => {
+        changeDevice(activeName.value)
+    })
+}
+const loading = ref(false)
+const changeTreeType = (val: string) => {
+    loading.value = true
+    emit('changeTreeType', val)
+    if (val == '1') {
+        setActiveName()
+    }
+    setTimeout(() => {
+        loading.value = false
+    }, 1000)
+}
 </script>
 
 <style lang="scss" scoped>
@@ -432,4 +504,7 @@ onMounted(() => {
     display: flex;
     align-items: center;
 }
+:deep(.el-input-group__prepend) {
+    background-color: var(--el-fill-color-blank);
+}
 </style>