init
This commit is contained in:
ch197511161
223
app/pages/PowerStation/index.vue
Normal file
223
app/pages/PowerStation/index.vue
Normal file
@@ -0,0 +1,223 @@
|
||||
<!--
|
||||
PowerStation/index.vue
|
||||
电站设备管理系统主页面
|
||||
使用网格布局展示3D模型视图、数据图表和属性面板
|
||||
-->
|
||||
<template>
|
||||
<div
|
||||
class="w-full h-screen flex flex-col overflow-hidden bg-[#0B1120] font-sans powerstation-scrollbar"
|
||||
>
|
||||
<!-- ============================================================
|
||||
头部导航
|
||||
============================================================ -->
|
||||
<HeaderNavigation />
|
||||
|
||||
<!-- ============================================================
|
||||
主要内容区域
|
||||
============================================================ -->
|
||||
<div class="flex-1 flex justify-start relative min-h-0">
|
||||
<!-- 左侧面板：模型结构树 -->
|
||||
<ModelTreePanel class="w-[280px] h-full z-50 self-stretch flex-shrink-0" />
|
||||
|
||||
<!-- 右侧面板：主内容区 -->
|
||||
<div class="flex-1 transition-all duration-300">
|
||||
<div
|
||||
class="h-full bg-[#020617] p-2 gap-2 overflow-hidden grid transition-all duration-300 min-h-0"
|
||||
:class="[
|
||||
maximizedComponent
|
||||
? 'grid-cols-1 grid-rows-1'
|
||||
: 'grid-cols-[1fr_30%] grid-rows-[70%_30%]',
|
||||
]"
|
||||
>
|
||||
<!-- 3D视图 - 左上区域 -->
|
||||
<Model3DView
|
||||
class="bg-[#0b1120] border border-cyan-500/20 rounded shadow-[0_0_10px_rgba(6,182,212,0.05)] transition-all duration-300 min-h-0"
|
||||
:class="[
|
||||
maximizedComponent === '3d'
|
||||
? 'col-span-full row-span-full'
|
||||
: maximizedComponent
|
||||
? 'hidden'
|
||||
: 'col-start-1 row-start-1',
|
||||
]"
|
||||
:is-maximized="maximizedComponent === '3d'"
|
||||
@toggle-maximize="toggleMaximize('3d')"
|
||||
/>
|
||||
|
||||
<!-- 数据图表 - 左下区域 -->
|
||||
<DataChartsSection
|
||||
class="bg-[#0b1120] border border-cyan-500/20 rounded shadow-[0_0_10px_rgba(6,182,212,0.05)] overflow-hidden transition-all duration-300 min-h-0"
|
||||
:class="[
|
||||
maximizedComponent === 'charts'
|
||||
? 'col-span-full row-span-full'
|
||||
: maximizedComponent
|
||||
? 'hidden'
|
||||
: 'col-start-1 row-start-2',
|
||||
]"
|
||||
:is-maximized="maximizedComponent === 'charts'"
|
||||
@toggle-maximize="toggleMaximize('charts')"
|
||||
/>
|
||||
|
||||
<!-- 属性面板 - 右侧区域（跨两行） -->
|
||||
<ModelPropertiesPanel
|
||||
class="bg-[#0b1120] border border-cyan-500/20 rounded shadow-[0_0_10px_rgba(6,182,212,0.05)] overflow-hidden relative transition-all duration-300 border-l border-cyan-500/20"
|
||||
:class="[
|
||||
maximizedComponent === 'props'
|
||||
? 'col-span-full row-span-full'
|
||||
: maximizedComponent
|
||||
? 'hidden'
|
||||
: 'col-start-2 row-span-2',
|
||||
]"
|
||||
:is-maximized="maximizedComponent === 'props'"
|
||||
@toggle-maximize="toggleMaximize('props')"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
/**
|
||||
* PowerStation 主页面
|
||||
* 电站设备管理系统的核心页面
|
||||
* 集成3D视图、数据图表和属性面板
|
||||
*/
|
||||
import DataChartsSection from '~/components/PowerStation/DataChartsSection.vue'
|
||||
import HeaderNavigation from '~/components/PowerStation/HeaderNavigation.vue'
|
||||
import Model3DView from '~/components/PowerStation/Model3DView.vue'
|
||||
import ModelPropertiesPanel from '~/components/PowerStation/ModelPropertiesPanel.vue'
|
||||
import ModelTreePanel from '~/components/PowerStation/ModelTreePanel.vue'
|
||||
|
||||
// ============================================================
|
||||
// 页面配置
|
||||
// ============================================================
|
||||
|
||||
definePageMeta({
|
||||
layout: false, // 使用全屏自定义布局
|
||||
})
|
||||
|
||||
// ============================================================
|
||||
// 状态和引用
|
||||
// ============================================================
|
||||
|
||||
const route = useRoute()
|
||||
const store = usePowerStationStore()
|
||||
|
||||
/** 当前最大化的组件 */
|
||||
const maximizedComponent = ref<string | null>(null)
|
||||
|
||||
// ============================================================
|
||||
// 方法
|
||||
// ============================================================
|
||||
|
||||
/**
|
||||
* 切换组件最大化状态
|
||||
* @param component - 组件标识（'3d' | 'charts' | 'props'）
|
||||
*/
|
||||
const toggleMaximize = (component: string) => {
|
||||
if (maximizedComponent.value === component) {
|
||||
maximizedComponent.value = null // 还原
|
||||
} else {
|
||||
maximizedComponent.value = component // 最大化指定组件
|
||||
}
|
||||
}
|
||||
|
||||
// ============================================================
|
||||
// 路由同步
|
||||
// ============================================================
|
||||
|
||||
// 监听路由变化，确保store与路由参数同步
|
||||
watch(
|
||||
() => route.query.currentNodeId,
|
||||
newId => {
|
||||
if (newId && typeof newId === 'string') {
|
||||
// 只在完整模式下同步
|
||||
if (store.loadMode && store.currentNodeId !== newId) {
|
||||
console.log('PowerStation页面：同步路由currentNodeId到store:', newId)
|
||||
store.currentNodeId = newId
|
||||
}
|
||||
}
|
||||
},
|
||||
{ immediate: true }
|
||||
)
|
||||
|
||||
// ============================================================
|
||||
// 生命周期
|
||||
// ============================================================
|
||||
|
||||
onMounted(() => {
|
||||
// 保留路由参数检查，供后续扩展使用
|
||||
const currentNodeId = route.query.currentNodeId as string
|
||||
if (currentNodeId) {
|
||||
// 节点选择逻辑由子组件处理
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style>
|
||||
/* ============================================================
|
||||
页面全局样式
|
||||
============================================================ */
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
全局滚动条样式
|
||||
============================================================ */
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: rgba(15, 23, 42, 0.3);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: rgba(34, 211, 238, 0.3);
|
||||
border-radius: 4px;
|
||||
border: 1px solid rgba(34, 211, 238, 0.1);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: rgba(34, 211, 238, 0.5);
|
||||
box-shadow: 0 0 8px rgba(34, 211, 238, 0.3);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-corner {
|
||||
background: rgba(15, 23, 42, 0.3);
|
||||
}
|
||||
|
||||
/* Firefox滚动条样式 */
|
||||
* {
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: rgba(34, 211, 238, 0.3) rgba(15, 23, 42, 0.3);
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
PowerStation页面特殊滚动条样式
|
||||
============================================================ */
|
||||
|
||||
.powerstation-scrollbar ::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
}
|
||||
|
||||
.powerstation-scrollbar ::-webkit-scrollbar-track {
|
||||
background: rgba(11, 17, 32, 0.5);
|
||||
}
|
||||
|
||||
.powerstation-scrollbar ::-webkit-scrollbar-thumb {
|
||||
background: rgba(6, 182, 212, 0.4);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.powerstation-scrollbar ::-webkit-scrollbar-thumb:hover {
|
||||
background: rgba(6, 182, 212, 0.6);
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user