在线补召

2025-10-21 16:27:49 +08:00
parent 177e50de75
commit 43b5e4e497
9 changed files with 820 additions and 38 deletions
--- a/src/views/govern/monitorRecall/index.vue
+++ b/src/views/govern/monitorRecall/index.vue
@@ -0,0 +1,186 @@
+<template>
+    <div
+        class="default-main device-control"
+        :style="{ height: pageHeight.height }"
+        v-loading="loading"
+        style="position: relative"
+    >
+        <!-- @init="nodeClick" -->
+        <PointTree @node-click="nodeClick" @pointTypeChange="pointTypeChange" @checkChange="handleCheckedNodesChange"></PointTree>
+        <div class="device-control-right" >
+           <el-tabs  type="border-card" class="mb10" @tab-click="handleClick" v-model="activeTab">
+                <el-tab-pane label="稳态补召" name="deviceInfo1"> 
+                     <div style="height: calc(100vh - 205px)">
+                        <SteadyRecall ref="steadyRef" :checked-nodes="checkedNodes"></SteadyRecall>
+                    </div>
+                </el-tab-pane>
+                <el-tab-pane label="暂态补召" name="deviceInfo2"> 
+                     <div style="height: calc(100vh - 205px)">
+                        <Event ref="eventRef" :checked-nodes="checkedNodes"></Event>
+                    </div>
+                </el-tab-pane>
+            </el-tabs>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import PointTree from '@/components/tree/govern/selectTree.vue'
+import { ref, reactive, onMounted, onUnmounted, inject, nextTick, onBeforeUnmount } from 'vue'
+import DatePicker from '@/components/form/datePicker/index.vue'
+import TableHeader from '@/components/table/header/index.vue'
+import { mainHeight } from '@/utils/layout'
+import Event from './eventRecall.vue'
+import SteadyRecall from './steadyRecall.vue'
+
+const pageHeight = mainHeight(20)
+const steadyRef = ref()
+const eventRef = ref()
+const loading = ref(false)
+const activeTab = ref('deviceInfo1')
+const checkedNodes = ref<any[]>([]) // 存储左侧树勾选的节点
+
+defineOptions({
+    name: 'govern/monitorRecall/index'
+})
+
+// 处理子组件传递的勾选节点变化
+const handleCheckedNodesChange = (nodes: any[]) => {
+
+   checkedNodes.value = nodes
+   
+   // 将勾选的节点传递给当前激活的tab组件
+   if (activeTab.value === 'deviceInfo1' && steadyRef.value) {
+       // 如果steadyRecall组件有接收勾选节点的方法，可以调用
+       if (steadyRef.value.setCheckedNodes) {
+           steadyRef.value.setCheckedNodes(nodes)
+       }
+   } else if (activeTab.value === 'deviceInfo2' && eventRef.value) {
+       // 如果eventRecall组件有接收勾选节点的方法，可以调用
+       if (eventRef.value.setCheckedNodes) {
+           eventRef.value.setCheckedNodes(nodes)
+       }
+   }
+}
+
+// tab切换时的处理
+const handleClick = (tab: any) => {
+    activeTab.value = tab.props.name
+    
+    // tab切换时刷新对应组件的数据
+    nextTick(() => {
+        if (tab.props.name === 'deviceInfo1' && steadyRef.value) {
+            // 刷新稳态补召数据
+            if (steadyRef.value.refreshData) {
+                steadyRef.value.refreshData(checkedNodes.value)
+            } else if (steadyRef.value.getTableParams) {
+                // 如果有getTableParams方法，调用它
+                steadyRef.value.getTableParams({ nodes: checkedNodes.value })
+            }
+        } else if (tab.props.name === 'deviceInfo2' && eventRef.value) {
+            // 刷新暂态补召数据
+            if (eventRef.value.refreshData) {
+                eventRef.value.refreshData(checkedNodes.value)
+            } else if (eventRef.value.getTableParams) {
+                // 如果有getTableParams方法，调用它
+                eventRef.value.getTableParams({ nodes: checkedNodes.value })
+            }
+        }
+    })
+}
+
+const nodeClick = (node: any) => {
+    
+}
+
+const pointTypeChange = (type: any, node: any) => {
+
+}
+</script>
+
+<style lang="scss">
+.device-control {
+    display: flex;
+    height: 100%;
+
+    &-left {
+        // width: 280px;
+    }
+
+    &-right {
+        overflow: hidden;
+        flex: 1;
+        padding: 10px 10px 10px 0;
+        height: 100%;
+
+        .el-tabs {
+            height: 100%;
+        }
+
+        .el-tabs__content {
+            height: calc(100% - 55px);
+        }
+
+        .el-tab-pane {
+            height: 100%;
+        }
+
+        .el-descriptions__header {
+            height: 36px;
+            margin-bottom: 7px;
+            display: flex;
+            align-items: center;
+        }
+
+        .content {
+            box-sizing: border-box;
+            overflow: auto;
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
+            grid-gap: 10px;
+            justify-content: center;
+
+            .box-card {
+                display: flex;
+                flex-direction: column;
+                justify-content: space-between;
+                color: var(--el-color-white);
+                min-height: 80px;
+                font-size: 13px;
+
+                .el-card__header {
+                    padding: 0;
+
+                    .clearfix {
+                        box-sizing: border-box;
+                        display: flex;
+                        align-items: center;
+                        justify-content: space-between;
+                        height: 35px;
+                        padding: 0 10px;
+                        background: var(--el-color-primary);
+                    }
+                }
+
+                .el-card__body {
+                    flex: 1;
+                    padding: 10px;
+                    margin-bottom: 0;
+                    background-image: linear-gradient(var(--el-color-primary), var(--el-color-primary-light-3));
+
+                    .box-card-content {
+                        height: 100%;
+                        display: flex;
+                        flex-direction: column;
+                        justify-content: space-between;
+                    }
+                }
+            }
+        }
+    }
+}
+
+.device-control-right > div {
+    height: 100%;
+}
+</style>