右侧模块开发-弹框

frontend/src/components/developStatusChart/index.vue

@@ -2,13 +2,30 @@
 <template>
     <div class="basic_body">
         <div ref="chartContainer" class="chart-container"></div>
+        
+        <!-- 水电开发情况弹框 -->
+        <a-modal
+            v-model:open="modalVisible"
+            title="水电开发情况"
+            :width="1540"
+            @ok="handleModalOk"
+            @cancel="handleModalCancel"
+        >
+            <div class="modal-content">
+                <!-- 内容区域，供用户自定义 -->
+                <!-- <p>选中类型：{{ selectedType }}</p> -->
+                <SDKFQKPie :defaultTab="selectedType" />
+                <!-- 用户可在此处自定义内容 -->
+            </div>
+        </a-modal>
     </div>
 </template>
 
 <script lang="ts" setup>
 import { ref, onMounted, onUnmounted } from 'vue';
 import * as echarts from 'echarts';
-
+import { message } from 'ant-design-vue';
+import SDKFQKPie from '@/modules/shuidianhuangjingjieruMod/TwoLayer/ShuiDianKaiFQKTwoLayer.vue'
 // 定义组件名（便于调试和递归）
 defineOptions({
     name: 'developStatusChart'
@@ -17,6 +34,10 @@ defineOptions({
 const chartContainer = ref<HTMLDivElement | null>(null);
 let chartInstance: echarts.ECharts | null = null;
 
+// 弹框相关状态
+const modalVisible = ref(false);
+const selectedType = ref('');
+
 // 页面加载时执行的逻辑
 onMounted(() => {
     if (chartContainer.value) {
@@ -104,6 +125,24 @@ const initChart = () => {
     window.addEventListener('resize', () => {
         chartInstance?.resize();
     });
+
+    // 添加图表点击事件
+    chartInstance.on('click', (params: any) => {
+        if (params.data && params.data.name) {
+            selectedType.value = params.data.name;
+            modalVisible.value = true;
+        }
+    });
+};
+
+// 弹框确认按钮处理
+const handleModalOk = () => {
+    modalVisible.value = false;
+};
+
+// 弹框取消按钮处理
+const handleModalCancel = () => {
+    modalVisible.value = false;
 };
 </script>
 
@@ -116,5 +155,10 @@ const initChart = () => {
         width: 203px; // 容器宽度
         height: 100px; // 容器高度
     }
+
+    .modal-content {
+        padding: 10px 0;
+        min-height: 100px;
+    }
 }
 </style>

frontend/src/layout/components/AppMain.vue

@@ -16,7 +16,7 @@ const routeKey = computed(() => router.path + Math.random());
 
 <template>
   <section class="app-main">
-    <GisView />
+    <!-- <GisView /> -->
     <div class="gi-panels">
       <router-view v-slot="{ Component, route }" :key="routeKey">
         <transition name="router-fade" mode="out-in">

frontend/src/views/home/shuiDianKaiFaZhuangKuang.vue

@@ -55,6 +55,86 @@ const showMapModal4 = () => {
   modelStore.title = "栖息地流量 详情信息";
   modelStore.isBasicEdit = true;
 };
+const showMapModal5 = () => {
+  modelStore.modalVisible = true;
+  modelStore.params.sttp = "fp_point";
+  modelStore.title = "过鱼设施 详情信息";
+  modelStore.isBasicEdit = true;
+};
+const showMapModal6 = () => {
+  modelStore.modalVisible = true;
+  modelStore.params.sttp = "fb_point";
+  modelStore.title = "鱼类增殖站 详情信息";
+  modelStore.isBasicEdit = true;
+};
+//
+const showMapModal7 = () => {
+  modelStore.modalVisible = true;
+  modelStore.params.sttp = "va_point";
+  modelStore.title = "动物救助站 详情信息";
+  modelStore.isBasicEdit = true;
+};
+const showMapModal8 = () => {
+  modelStore.modalVisible = true;
+  modelStore.params.sttp = "vp_point";
+  modelStore.title = "珍稀植物园 详情信息";
+  modelStore.isBasicEdit = true;
+};
+const showMapModal9 = () => {
+  modelStore.modalVisible = true;
+  modelStore.params.sttp = "we_point";
+  modelStore.title = "水生生态调查断面 详情信息";
+  modelStore.isBasicEdit = true;
+};
+const showMapModal10 = () => {
+  modelStore.modalVisible = true;
+  modelStore.params.sttp = "wa_point";
+  modelStore.title = "野生动物监测 详情信息";
+  modelStore.isBasicEdit = true;
+};
+const showMapModal11 = () => {
+  modelStore.modalVisible = true;
+  modelStore.params.sttp = "stinfo_ai_video_point";
+  modelStore.title = "AI视频监控站 详情信息";
+  modelStore.isBasicEdit = true;
+};
+const showMapModal12 = () => {
+  modelStore.modalVisible = true;
+  modelStore.params.sttp = "eng_alarm_point";
+  modelStore.title = "水电站告警情况 详情信息";
+  modelStore.isBasicEdit = true;
+};
+const showMapModal13 = () => {
+  modelStore.modalVisible = true;
+  modelStore.params.sttp = "fprd_point";
+  modelStore.title = "鱼类调查装置 详情信息";
+  modelStore.isBasicEdit = true;
+};
+const showMapModal14 = () => {
+  modelStore.modalVisible = true;
+  modelStore.params.sttp = "dw_point";
+  modelStore.title = "低温水减缓设施-叠梁门 详情信息";
+  modelStore.isBasicEdit = true;
+};
+const showMapModal15 = () => {
+  modelStore.modalVisible = true;
+  modelStore.params.sttp = "DW_5";
+  modelStore.title = "前置挡墙 详情信息";
+  modelStore.isBasicEdit = true;
+};
+const showMapModal16 = () => {
+  modelStore.modalVisible = true;
+  modelStore.params.sttp = "DW_6";
+  modelStore.title = "隔水幕墙 详情信息";
+  modelStore.isBasicEdit = true;
+};
+const showMapModal17 = () => {
+  modelStore.modalVisible = true;
+  modelStore.params.sttp = "DW_1";
+  modelStore.title = "夹岩双层取水 详情信息";
+  modelStore.isBasicEdit = true;
+};
+//DW_5
 </script>
 
 <template>
@@ -65,10 +145,24 @@ const showMapModal4 = () => {
     <div class="rightContent">
       <RightDrawer>
         <a-button @click="showMapModal">打开电站弹窗</a-button>
-        <a-button @click="showMapModal1">打开水温弹窗</a-button>
+        <!-- <a-button @click="showMapModal1">打开水温弹窗</a-button> -->
         <!-- <a-button @click="showMapModal2">打开水质弹窗</a-button> -->
         <!-- <a-button @click="showMapModal3">打开栖息地弹窗</a-button> -->
-        <a-button @click="showMapModal4">打开栖息地流量弹窗</a-button>
+        <!-- <a-button @click="showMapModal4">打开栖息地流量弹窗</a-button> -->
+        <!-- <a-button @click="showMapModal5">打开过鱼设施弹窗</a-button> -->
+        <!-- <a-button @click="showMapModal6">打开鱼类增殖站弹窗</a-button> -->
+        <!-- <a-button @click="showMapModal7">打开动物救助站弹窗</a-button> -->
+        <!-- <a-button @click="showMapModal8">打开珍稀植物园弹窗</a-button> -->
+        <!-- <a-button @click="showMapModal9">打开水生生态调查断面弹窗</a-button> -->
+        <!-- <a-button @click="showMapModal10">打开野生动物监测弹窗</a-button> -->
+        <!-- <a-button @click="showMapModal11">打开AI视频监控站弹窗</a-button> -->
+        <!-- <a-button @click="showMapModal12">打开水电站告警情况弹窗</a-button> -->
+        <!-- <a-button @click="showMapModal13">打开鱼类调查装置弹窗</a-button>   -->
+        <!-- <a-button @click="showMapModal14">打开低温水减缓设施-叠梁门弹窗</a-button>   -->
+        <!-- <a-button @click="showMapModal15">打开前置挡墙弹窗</a-button> -->
+        <!-- <a-button @click="showMapModal16">打开隔水幕墙弹窗</a-button> -->
+        <a-button @click="showMapModal17">打开夹岩双层取水弹窗</a-button>
+
         <jidiInfoMod />
         <shuidianhuangjingjieruMod />
       </RightDrawer>