198 lines
7.5 KiB
Vue
198 lines
7.5 KiB
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>
|