设备监控问题修改

src/components/tree/device.vue

@@ -15,11 +15,14 @@
         />
         <div class="cn-tree" :style="{ opacity: menuCollapse ? 0 : 1 }">
             <div style="display: flex; align-items: center" class="mb10">
-                <el-input v-model="filterText" placeholder="请输入内容" clearable>
+                <!-- <el-form-item> -->
+                <el-input v-model="filterText"
+                    autocomplete="off"  placeholder="请输入内容" clearable>
                     <template #prefix>
                         <Icon name="el-icon-Search" style="font-size: 16px" />
                     </template>
                 </el-input>
+                <!-- </el-form-item> -->
                 <Icon
                     @click="onMenuCollapse"
                     :name="menuCollapse ? 'el-icon-Expand' : 'el-icon-Fold'"
@@ -30,11 +33,10 @@
                     v-if="props.canExpand"
                 />
             </div>
-
-            <el-collapse accordion v-model="activeName" style="flex: 1; height: 100%" @change="changeDevice">
-                <el-collapse-item title="治理设备" :name="0">
+            <el-collapse :accordion="true" v-model="activeName" style="flex: 1; height: 100%" @change="changeDevice">
+                <el-collapse-item title="治理设备" name="0" v-if="zlDeviceData.length != 0">
                     <el-tree
-                        style="height: calc(100vh - 350px); overflow: auto"
+                        :style="{ height: bxsDeviceData.length != 0 ? 'calc(100vh - 300px)' : 'calc(100vh - 238px)' }"
                         ref="treeRef1"
                         :props="defaultProps"
                         highlight-current
@@ -57,9 +59,9 @@
                         </template>
                     </el-tree>
                 </el-collapse-item>
-                <el-collapse-item title="便携式设备" :name="1">
+                <el-collapse-item title="便携式设备" name="1" v-if="bxsDeviceData.length != 0">
                     <el-tree
-                        style="height: calc(100vh - 290px); overflow: auto"
+                        :style="{ height: zlDeviceData.length != 0 ? 'calc(100vh - 280px)' : 'calc(100vh - 238px)' }"
                         ref="treeRef2"
                         :props="defaultProps"
                         highlight-current
@@ -90,12 +92,12 @@
 <script lang="ts" setup>
 import useCurrentInstance from '@/utils/useCurrentInstance'
 import { ElTree } from 'element-plus'
-import { ref, watch } from 'vue'
+import { ref, watch, defineEmits, onMounted, nextTick } from 'vue'
 
 defineOptions({
     name: 'govern/tree'
 })
-
+const emit = defineEmits(['changeDeviceType'])
 interface Props {
     width?: string
     canExpand?: boolean
@@ -111,7 +113,7 @@ const props = withDefaults(defineProps<Props>(), {
 })
 const { proxy } = useCurrentInstance()
 const menuCollapse = ref(false)
-const activeName = ref(0)
+const activeName = ref('0')
 const filterText = ref('')
 const defaultProps = {
     label: 'name',
@@ -136,6 +138,13 @@ watch(
                     })
                 }
             })
+            if (zlDeviceData.value.length != 0) {
+                activeName.value = '0'
+            } else if (bxsDeviceData.value.length != 0) {
+                activeName.value = '1'
+            } else {
+                activeName.value = ''
+            }
         }
     },
     {
@@ -145,7 +154,7 @@ watch(
 )
 
 watch(filterText, val => {
-    if (activeName.value == 0) {
+    if (activeName.value == '0') {
         treeRef1.value!.filter(val)
     } else {
         treeRef2.value!.filter(val)
@@ -175,16 +184,18 @@ const changeDevice = (val: any) => {
         arr2.push(item)
         // })
     })
-    if (val == 0) {
-        arr2.map(item => {
+    if (val == '0') {
+        arr2.map((item: any) => {
             item.checked = false
         })
-        treeRef1.value.setCurrentKey(arr1[0].id)
+        treeRef1.value && treeRef1.value.setCurrentKey(arr1[0].id)
+        emit('changeDeviceType', activeName.value, arr1[0])
     } else {
-        arr1.map(item => {
+        arr1.map((item: any) => {
             item.checked = false
         })
-        treeRef2.value.setCurrentKey(arr2[0].id)
+        treeRef2.value && treeRef2.value.setCurrentKey(arr2[0].id)
+        emit('changeDeviceType', activeName.value, arr2[0])
     }
 }
 //治理
@@ -192,6 +203,9 @@ const treeRef1 = ref<InstanceType<typeof ElTree>>()
 //便携式
 const treeRef2 = ref<InstanceType<typeof ElTree>>()
 defineExpose({ treeRef1, treeRef2 })
+onMounted(() => {
+    changeDevice(activeName.value)
+})
 </script>
 
 <style lang="scss" scoped>