设备监控-实时数据顶部按钮组改为便携式设备所有tab显示

src/components/tree/govern/pointTree.vue

@@ -1,5 +1,5 @@
 <template>
-    <Tree ref="treRef" :width="width" :data="tree" />
+    <Tree ref="treRef" :width="width" :data="tree" @changePointType="changePointType" />
 </template>
 
 <script lang="ts" setup>
@@ -10,13 +10,15 @@ import { useConfig } from '@/stores/config'
 defineOptions({
     name: 'govern/deviceTree'
 })
-const emit = defineEmits(['init', 'checkChange'])
+const emit = defineEmits(['init', 'checkChange', 'pointTypeChange'])
 const config = useConfig()
 const tree = ref()
 const treRef = ref()
-const width=ref('')
+const width = ref('')
+const changePointType = (val: any, obj: any) => {
+    emit('pointTypeChange', val, obj)
+}
 getLineTree().then(res => {
-    console.log(res.data, '设备监控666')
     let arr1: any[] = []
     let arr2: any[] = []
     //治理设备
@@ -30,10 +32,12 @@ getLineTree().then(res => {
                     item2.color = config.getColorVal('elementUiPrimary')
                     item2.children.forEach((item3: any) => {
                         item3.icon = 'el-icon-Platform'
-                          item3.color = item3.comFlag === 2 ? config.getColorVal('elementUiPrimary') : '#e26257 !important'
+                        item3.color =
+                            item3.comFlag === 2 ? config.getColorVal('elementUiPrimary') : '#e26257 !important'
                         item3.children.forEach((item4: any) => {
                             item4.icon = 'el-icon-Platform'
-                            item4.color = item4.comFlag === 2 ? config.getColorVal('elementUiPrimary') : '#e26257 !important'
+                            item4.color =
+                                item4.comFlag === 2 ? config.getColorVal('elementUiPrimary') : '#e26257 !important'
                             // item4.color = '#e26257 !important'
                             arr1.push(item4)
                         })
@@ -44,11 +48,9 @@ getLineTree().then(res => {
             item.children.forEach((item: any) => {
                 item.icon = 'el-icon-Platform'
                 item.color = config.getColorVal('elementUiPrimary')
-                console.log(item.comFlag,"88888");
                 item.color = item.comFlag === 2 ? config.getColorVal('elementUiPrimary') : '#e26257 !important'
                 item.children.forEach((item2: any) => {
-                item2.icon = 'el-icon-Platform'
-                console.log(item2.comFlag,"88888");
+                    item2.icon = 'el-icon-Platform'
                     item2.color = item2.comFlag === 2 ? config.getColorVal('elementUiPrimary') : '#e26257 !important'
                     arr2.push(item2)
                 })
@@ -74,7 +76,7 @@ getLineTree().then(res => {
         //         level: 2,
         //         ...arr2[0]
         //     })
-        // } 
+        // }
         else {
             emit('init')
         }

src/components/tree/point.vue

@@ -31,9 +31,8 @@
                     v-if="props.canExpand && route.path != '/admin/govern/reportCore/statistics/index'"
                 />
             </div>
-
             <el-collapse accordion v-model="activeName" style="flex: 1; height: 100%" @change="changeDevice">
-                <el-collapse-item title="治理设备" :name="0">
+                <el-collapse-item title="治理设备" name="0">
                     <el-tree
                         style="height: calc(100vh - 350px); overflow: auto"
                         ref="treeRef1"
@@ -58,7 +57,7 @@
                         </template>
                     </el-tree>
                 </el-collapse-item>
-                <el-collapse-item title="便携式设备" :name="1">
+                <el-collapse-item title="便携式设备" name="1">
                     <el-tree
                         style="height: calc(100vh - 270px); overflow: auto"
                         ref="treeRef2"
@@ -91,12 +90,12 @@
 <script lang="ts" setup>
 import useCurrentInstance from '@/utils/useCurrentInstance'
 import { ElTree } from 'element-plus'
-import { ref, watch } from 'vue'
+import { ref, watch, defineEmits } from 'vue'
 import { useRoute } from 'vue-router'
 defineOptions({
     name: 'govern/tree'
 })
-
+const emit = defineEmits(['changePointType'])
 interface Props {
     width?: string
     canExpand?: boolean
@@ -112,10 +111,9 @@ const props = withDefaults(defineProps<Props>(), {
 })
 
 const route = useRoute()
-console.log(route, '6666677788889')
 const { proxy } = useCurrentInstance()
 const menuCollapse = ref(false)
-const activeName = ref(0)
+const activeName = ref('0')
 const filterText = ref('')
 const defaultProps = {
     label: 'name',
@@ -149,7 +147,7 @@ watch(
 )
 
 watch(filterText, val => {
-    if (activeName.value == 0) {
+    if (activeName.value == '0') {
         treeRef1.value!.filter(val)
     } else {
         treeRef2.value!.filter(val)
@@ -172,17 +170,22 @@ const changeDevice = (val: any) => {
             arr2.push(item2)
         })
     })
-    if (val == 0) {
-        arr2.map(item => {
+    if (val == '0') {
+        arr2.map((item: any) => {
             item.checked = false
         })
-        treeRef1.value.setCurrentKey(arr1[0]?.id)
+        treeRef1?.value.setCurrentKey(arr1[0]?.id)
+        emit('changePointType', activeName.value, arr1[0])
     } else {
-        arr1.map(item => {
+        arr1.map((item: any) => {
             item.checked = false
         })
-        treeRef2.value.setCurrentKey(arr2[0]?.id)
+        treeRef2?.value.setCurrentKey(arr2[0]?.id)
+        emit('changePointType', activeName.value, arr2[0])
     }
+    // if(activeName.value){
+    //    emit('changePointType', activeName.value)
+    // }
 }
 const onMenuCollapse = () => {
     menuCollapse.value = !menuCollapse.value