|
|
@@ -0,0 +1,89 @@
|
|
|
+<template>
|
|
|
+ <div class="proj-page">
|
|
|
+ <!-- 左侧内部面板：工程类型切换（样式与直管工程一致） -->
|
|
|
+ <div class="proj-sidebar">
|
|
|
+ <div
|
|
|
+ v-for="tab in tabs"
|
|
|
+ :key="tab.key"
|
|
|
+ :class="['sidebar-item', { active: activeTab === tab.key }]"
|
|
|
+ @click="activeTab = tab.key"
|
|
|
+ >
|
|
|
+ <span>{{ tab.label }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 右侧内容区：内部切换，不跳转路由 -->
|
|
|
+ <div class="proj-main">
|
|
|
+ <div class="proj-content">
|
|
|
+ <component :is="currentComp" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup name="ProjIndex">
|
|
|
+import { ref, computed } from 'vue'
|
|
|
+import DikeList from '@/views/slgc/dike/index.vue'
|
|
|
+import ReservoirList from '@/views/slgc/reservoir/index.vue'
|
|
|
+import WagaList from '@/views/slgc/waga/index.vue'
|
|
|
+import PustList from '@/views/slgc/pust/index.vue'
|
|
|
+
|
|
|
+const tabs = [
|
|
|
+ { key: 'dike', label: '堤防管理', comp: DikeList },
|
|
|
+ { key: 'reservoir', label: '水库管理', comp: ReservoirList },
|
|
|
+ { key: 'waga', label: '水闸管理', comp: WagaList },
|
|
|
+ { key: 'pust', label: '泵站管理', comp: PustList },
|
|
|
+]
|
|
|
+
|
|
|
+const activeTab = ref('dike')
|
|
|
+const currentComp = computed(() => tabs.find(t => t.key === activeTab.value)?.comp || DikeList)
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+/* 与直管工程 monitor/index.vue 的左侧面板样式保持一致 */
|
|
|
+.proj-page {
|
|
|
+ display: flex;
|
|
|
+ height: calc(100vh - 60px);
|
|
|
+ overflow: hidden;
|
|
|
+}
|
|
|
+.proj-sidebar {
|
|
|
+ width: 150px;
|
|
|
+ flex-shrink: 0;
|
|
|
+ background: #fff;
|
|
|
+ border-right: 1px solid #e4e7ed;
|
|
|
+ padding: 8px 0;
|
|
|
+ overflow-y: auto;
|
|
|
+}
|
|
|
+.sidebar-item {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 8px;
|
|
|
+ padding: 14px 16px;
|
|
|
+ cursor: pointer;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #606266;
|
|
|
+ transition: all 0.2s;
|
|
|
+ border-left: 3px solid transparent;
|
|
|
+}
|
|
|
+.sidebar-item:hover {
|
|
|
+ background: #f5f7fa;
|
|
|
+ color: #409eff;
|
|
|
+}
|
|
|
+.sidebar-item.active {
|
|
|
+ background: #ecf5ff;
|
|
|
+ color: #409eff;
|
|
|
+ font-weight: 600;
|
|
|
+ border-left-color: #409eff;
|
|
|
+}
|
|
|
+.proj-main {
|
|
|
+ flex: 1;
|
|
|
+ position: relative;
|
|
|
+ overflow: hidden;
|
|
|
+}
|
|
|
+.proj-content {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ overflow: auto;
|
|
|
+ background: #f0f2f6;
|
|
|
+}
|
|
|
+</style>
|
