添加所有菜单

frontend/src/components/RightDrawer/index.vue

@@ -0,0 +1,83 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import { RightOutlined, LeftOutlined } from "@ant-design/icons-vue";
+
+const open = ref(true);
+
+// 切换抽屉状态
+const toggleDrawer = () => {
+  open.value = !open.value;
+};
+</script>
+
+<template>
+  <!-- <div class="rightContentDrawer"> -->
+  <!-- 保持原有的 drawer 参数不变 -->
+  <a-drawer
+    :mask="false"
+    placement="right"
+    :open="true"
+    width="450"
+    :closable="false"
+    :headerStyle="{ color: '#FAFCFE' }"
+    :rootClassName="{ 'drawer-collapsed': !open }"
+    :getContainer="false"
+    :destroyOnClose="false"
+  >
+    <!-- 箭头按钮 - 始终显示在左侧中间位置 -->
+    <div class="toggle-button" :class="{ collapsed: !open }" @click="toggleDrawer">
+      <span class="arrow-icon" v-if="!open">
+        <LeftOutlined />
+      </span>
+      <span class="arrow-icon" v-else>
+        <RightOutlined />
+      </span>
+    </div>
+    <slot />
+  </a-drawer>
+  <!-- </div> -->
+</template>
+<style scoped lang="scss">
+.rightContentDrawer {
+  height: 100%;
+}
+
+    .toggle-button {
+        width: 18px;
+        position: absolute;
+        right: 10px;
+        cursor: pointer;
+        z-index: 10;
+        height: 88px;
+        line-height: 88px;
+        top: 45%;
+        left: -18px;
+        vertical-align: middle;
+        background-image: url('@/assets/bg-toggle.svg');
+        background-size: 100% 100%;
+        background-repeat: no-repeat;
+
+        &.collapsed {
+            left: -20px;
+            border-radius: 0 4px 4px 0;
+        }
+
+        .arrow-icon {
+            color: rgb(81, 131, 169);
+            font-size: 18px;
+            transition: transform 0.3s ease;
+        }
+    }
+
+    :deep(.ant-drawer) {
+
+        .ant-drawer-content-wrapper {
+            right: 0;
+            bottom: 0px;
+            border: 2px solid #c5d6e2 !important;
+            box-shadow: 3px 3px 3px 9px #e5edf3 !important;
+            display: flex;
+            flex-direction: column;
+        }
+    }
+</style>

frontend/src/components/gis/GisView.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+</script>
+
+<template>
+    <div class="gis-view">
+        <div id="mapContainer" />
+    </div>
+</template>
+
+<style lang="scss" scoped>
+.gis-view {
+   width: 100%;
+    height: 100%;
+    position: absolute;
+    visibility: visible;
+}
+#mapContainer {
+    width: 100%;
+    height: 100%;
+    position: relative;
+    background-color: red;
+}
+</style>

frontend/src/layout/components/AppMain.vue

@@ -1,23 +1,27 @@
 <script setup lang="ts">
- import { computed } from "vue"
-import { useTagsViewStore } from '@/store/modules/tagsView';
-import { useRoute, } from 'vue-router';
+import { computed } from "vue";
+import { useTagsViewStore } from "@/store/modules/tagsView";
+import { useRoute } from "vue-router";
+import GisView from "@/components/gis/GisView.vue";
 
 const tagsViewStore = useTagsViewStore();
- 
+
 const router = useRoute();
 const routeKey = computed(() => router.path + Math.random());
 </script>
 
 <template>
   <section class="app-main">
-    <router-view v-slot="{ Component, route }" :key="routeKey">
-      <transition name="router-fade" mode="out-in">
-        <keep-alive :include="tagsViewStore.cachedViews">
-          <component :is="Component" :key="route.fullPath" />
-        </keep-alive>
-      </transition>
-    </router-view>
+    <GisView />
+    <div class="gi-panels">
+      <router-view v-slot="{ Component, route }" :key="routeKey">
+        <transition name="router-fade" mode="out-in">
+          <keep-alive :include="tagsViewStore.cachedViews">
+            <component :is="Component" :key="route.fullPath" />
+          </keep-alive>
+        </transition>
+      </router-view>
+    </div>
   </section>
 </template>
 
@@ -31,4 +35,10 @@ const routeKey = computed(() => router.path + Math.random());
   background-color: #ffffff;
   box-sizing: border-box;
 }
+.gi-panels {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  z-index: 1;
+}
 </style>

frontend/src/modules/jidiSelectorMod.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+</script>
+
+<template>
+  <div class="jidiSelectorMod">
+  水电基地
+  </div>
+</template>
+<style scoped lang="scss">
+.jidiSelectorMod {
+    width: 175px;
+    height: 300px;
+    background-color: pink;
+    z-index: 99;
+    margin: 16px 0 0 16px;
+    border: 1px solid #cedce8;
+    border-radius: 1px;
+}
+</style>

frontend/src/styles/index.scss

@@ -45,3 +45,13 @@ svg {
 .el-dialog__body {
   padding: 20px !important;
 }
+.modelContentDrak {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  background-color: #ffffff;
+}
+.rightContent {
+  height: 98%;
+  position: relative;
+}

frontend/src/views/DataQueryMenuModule/conventionalHydropower.vue

@@ -0,0 +1,5 @@
+<template>
+  <div class="modelContentDrak">
+    <h2>基础数据</h2>
+  </div>
+</template>

frontend/src/views/DataQueryMenuModule/monitorData.vue

@@ -0,0 +1,5 @@
+<template>
+  <div>
+    <h2>环保数据</h2>
+  </div>
+</template>

frontend/src/views/dianZhanZhuanTi/dianZhanZhuanTi.vue

@@ -0,0 +1,5 @@
+<template>
+  <div>
+    <h2>电站专题</h2>
+  </div>
+</template>

frontend/src/views/fish-survey/fishSurveyZhuanZhi.vue

@@ -0,0 +1,5 @@
+<template>
+  <div>
+    <h2>鱼类调查装置</h2>
+  </div>
+</template>

frontend/src/views/guoYuSheShi/sheShiZhuangKuang.vue

@@ -0,0 +1,5 @@
+<template>
+  <div>
+    <h2>过鱼设施监测</h2>
+  </div>
+</template>

frontend/src/views/home/shuiDianKaiFaZhuangKuang.vue

@@ -1,6 +1,23 @@
+<script setup lang="ts">
+import JidiSelectorMod from "@/modules/jidiSelectorMod.vue";
+import RightDrawer from "@/components/RightDrawer/index.vue";
+</script>
 
 <template>
   <div>
-    <h1>水电开放平台</h1>
+    <div class="moduleContent">
+      <div class="leftContent">
+        <JidiSelectorMod />
+      </div>
+      <div class="rightContent">
+        <RightDrawer>
+        789231
+                    <!-- <SidePanel title={currentItem ? currentItem.basename : ""}>
+                        <JidiInfoMod />
+                        <ShuidianhuangjingjieruMod />
+                    </SidePanel> -->
+                </RightDrawer>
+      </div>
+    </div>
   </div>
-</template>
+</template>

frontend/src/views/qiXiDi/shengTaiDiBaoHu.vue

@@ -0,0 +1,5 @@
+<template>
+  <div>
+    <h2>栖息地</h2>
+  </div>
+</template>

frontend/src/views/shengTaiDiaoCha/luShengShengTaiDiaoCha.vue

@@ -0,0 +1,5 @@
+<template>
+  <div>
+    <h2>陆生生态调查</h2>
+  </div>
+</template>

frontend/src/views/shengTaiDiaoCha/shuiShengShengTaiDiaoCha.vue

@@ -0,0 +1,5 @@
+<template>
+  <div>
+    <h2>水生生态调查</h2>
+  </div>
+</template>

frontend/src/views/shengTaiLiuLiang/shengTaiLiuLiangXieFangSheShi.vue

@@ -0,0 +1,5 @@
+<template>
+  <div>
+    <h2>生态流量泄放设施</h2>
+  </div>
+</template>

frontend/src/views/shiPinJianKong/shiPinJianKongZhuanTi.vue

@@ -0,0 +1,5 @@
+<template>
+  <div>
+    <h2>视频监控</h2>
+  </div>
+</template>

frontend/src/views/shuJuFenXi/shuiWenShuJuFenXi.vue

@@ -0,0 +1,5 @@
+<template>
+  <div>
+    <h2>水温数据分析</h2>
+  </div>
+</template>

frontend/src/views/shuiWenJianCe/diWenShuiJianHuanSheShi.vue

@@ -0,0 +1,5 @@
+<template>
+  <div>
+    <h2>低温水减缓设施</h2>
+  </div>
+</template>

frontend/src/views/shuiWenJianCe/shuiWenFenXi.vue

@@ -0,0 +1,5 @@
+<template>
+  <div>
+    <h2>水温分析</h2>
+  </div>
+</template>

frontend/src/views/shuiWenJianCe/shuiWenQingKuang.vue

@@ -0,0 +1,5 @@
+<template>
+  <div>
+    <h2>水温监测</h2>
+  </div>
+</template>

frontend/src/views/yunXingGaoJing/IntelligentAnalysis.vue

@@ -0,0 +1,5 @@
+<template>
+  <div>
+    <h2>智能分析</h2>
+  </div>
+</template>

frontend/src/views/yunXingGaoJing/yunXingGaoJing.vue

@@ -0,0 +1,5 @@
+<template>
+  <div>
+    <h2>监测告警</h2>
+  </div>
+</template>

frontend/src/views/zengZhiFangLiu/yuLieZengZhiZhan.vue

@@ -0,0 +1,5 @@
+<template>
+  <div>
+    <h2>增殖放流情况</h2>
+  </div>
+</template>

frontend/src/views/zhenXIZhiWuYuan/zhenXIZhiWuYuan.vue

@@ -0,0 +1,5 @@
+<template>
+  <div>
+    <h2>动植物保护</h2>
+  </div>
+</template>