admin-sjzx/src/views/pqs/harmonicMonitoring/monitoringPoint/online/index.vue

<template>
    <div class="default-main" style="padding: 10px">
        <splitpanes :style="height" class="default-theme" id="navigation-splitpanes">
            <pane :size="size">
                <PointTree
                    ref="pointTree"
                    :default-expand-all="false"
                    :default-expanded-keys="monitoringPoint.state.lineId ? [monitoringPoint.state.lineId] : []"
                    :current-node-key="monitoringPoint.state.lineId"
                    :show-checkbox="monitoringPoint.state.showCheckBox"
                    :default-checked-keys="monitoringPoint.state.lineIds"
                    @check="handleCheckChange"
                    @node-click="handleNodeClick"
                    @init="handleNodeClick"
                ></PointTree>
            </pane>
            <pane>
                <div style="position: relative; height: 100%">
                    <el-tabs
                        v-model="activeName"
                        type="border-card"
                        class="demo-tabs"
                        style="height: 100%"
                        @tab-change="handleTabChange"
                    >
                        <!-- <el-tab-pane label="稳态综合评估" name="1" lazy v-if="!isReload">
                            <Wentaizonghepinggu />
                        </el-tab-pane> -->
                        <el-tab-pane label="稳态指标合格率" name="2" lazy v-if="!isReload">
                            <Wentaizhibiaohegelv v-if="activeName == '2'" />
                        </el-tab-pane>
                        <el-tab-pane label="稳态数据分析" name="3" lazy v-if="!isReload">
                            <Wentaishujufenxi v-if="activeName == '3'" />
                        </el-tab-pane>
                        <el-tab-pane label="谐波频谱" name="4" lazy v-if="!isReload">
                            <Xiebopingpu v-if="activeName == '4'" />
                        </el-tab-pane>
                        <el-tab-pane label="告警数据统计" name="5" lazy v-if="!isReload && VITE_FLAG">
                            <Gaojingshujutongji v-if="activeName == '5'" />
                        </el-tab-pane>
                        <el-tab-pane label="监测点运行状态" name="6" lazy v-if="!isReload">
                            <Yunxingzhuangtai v-if="activeName == '6'" />
                        </el-tab-pane>
                        <!-- <el-tab-pane label="实时数据" name="7" lazy v-if="!isReload && !VITE_FLAG">
                            <Shishishuju v-if="activeName == '7'" />
                        </el-tab-pane> -->
                        <el-tab-pane label="统计报表" name="8" lazy v-if="!isReload && VITE_FLAG">
                            <StatisticalReport v-if="activeName == '8'" />
                        </el-tab-pane>
                    </el-tabs>
                    <!-- <div
                        class="monitoring-point"
                        v-if="!monitoringPoint.state.showCheckBox && monitoringPoint.state.lineName"
                    >
                        当前位置：{{ monitoringPoint.state.lineName }}
                    </div> -->
                </div>
            </pane>
        </splitpanes>
    </div>
</template>
<script setup lang="ts">
import { defineOptions, watch, onMounted, ref, nextTick } from 'vue'
import 'splitpanes/dist/splitpanes.css'
import { Splitpanes, Pane } from 'splitpanes'
import PointTree from '@/components/tree/pqs/pointTree.vue'

import { mainHeight } from '@/utils/layout'
import Wentaizonghepinggu from './wentaizonghepinggu/index.vue'
import Wentaizhibiaohegelv from './wentaizhibiaohegelv/index.vue'
import Wentaishujufenxi from './wentaishujufenxi/index.vue'
import Xiebopingpu from './xiebopingpu/index.vue'
import Gaojingshujutongji from './gaojingshujutongji/index_JB.vue'
import Yunxingzhuangtai from './yunxingzhuangtai/index.vue'
import Shishishuju from './shishishuju/index.vue'
import { useRoute } from 'vue-router'
import StatisticalReport from './statisticalReport/index.vue'
const VITE_FLAG = import.meta.env.VITE_NAME == 'jibei'
import router from '@/router'
import { useMonitoringPoint } from '@/stores/monitoringPoint'
import { id } from 'element-plus/es/locale'
defineOptions({
    name: 'harmonic-boot/monitor/online'
})
const route = useRoute()
const monitoringPoint = useMonitoringPoint()
const pointTree = ref()
const size = ref(23)
const isReload = ref(false)
const height = mainHeight(40)
const activeName = ref('2')
onMounted(() => {
    const dom = document.getElementById('navigation-splitpanes')
    if (dom) {
        size.value = Math.round((180 / dom.offsetHeight) * 120)
    }
})
const handleNodeClick = (data: any, node: any) => {
    if (data.level === 6) {
        monitoringPoint.setValue('lineId', data.id)
        monitoringPoint.setValue('pid', data.pids)
        monitoringPoint.setValue('lineName', data.alias)
        monitoringPoint.setValue('comFlag', data.comFlag)
    }
}
const handleCheckChange = (data: any, node: any) => {
    monitoringPoint.setValue(
        'lineIds',
        node.checkedNodes.filter((item: any) => item.level === 6).map((item: any) => item.id)
    )
}
const handleTabChange = () => {
    monitoringPoint.setShowCheckBox(false)
}
watch(
    () => router.currentRoute.value.query.lineId,
    (newLineId, oldLineId) => {
        if (!newLineId) return
        // 在这里处理 lineId 的变化
        monitoringPoint.setValue('lineId', router.currentRoute.value.query.lineId)
        monitoringPoint.setValue('lineName', router.currentRoute.value.query.lineName)
    },
    { immediate: true }
)
watch(
    () => {
        return monitoringPoint.state.lineId
    },
    () => {
        //  刷新页面
        isReload.value = true
        nextTick(() => {
            isReload.value = false
        })
    }
)

watch(
    () => route.query.t,
    async (newValue, oldValue) => {
        if (route.fullPath.includes('harmonic-boot/monitor/online')) {
            let type = (route.query.type as string) || 'null'
            let lineId = (route.query.id as string) || 'null'
            if (type == 'null') {
            } else {
                setTimeout(() => {
                    monitoringPoint.setValue('lineId', lineId)
                    //
                    // pointTree.value.tree
                    activeName.value = type
                    setTimeout(() => {
                        pointTree.value.scrollToNode(lineId)

                        monitoringPoint.setValue('lineName', findNodeByTreeId(pointTree.value.tree, lineId).alias)
                    }, 500)
                }, 1000)
            }
        }
    },
    { deep: true, immediate: true }
)
// 递归函数（同上）
const findNodeByTreeId = (treeData: any, id: any) => {
    for (const node of treeData) {
        if (node.id == id) return node
        if (node.children && Array.isArray(node.children) && node.children.length) {
            const found: any = findNodeByTreeId(node.children, id)
            if (found) return found
        }
    }
    return null
}

// 调用示例
const getTargetNode = () => {
    const targetId = '9b7adecf588b4110acb7018f297592a7'
    const node = findNodeByTreeId(treeData.value, targetId)
    console.log('Vue中找到的节点：', node)
}
const changeTab = (e: string) => {
    activeName.value = e
}
</script>
<style lang="scss">
.splitpanes.default-theme .splitpanes__pane {
    background: #eaeef1;
}

.monitoring-point {
    position: absolute;
    top: 12px;
    right: 10px;
    font-size: 12px;
    font-weight: 700;
    color: var(--el-color-primary);
}
</style>