From 5465ef72d6f6303acd627e183c9d4f092a25989f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=8E=8B=E5=85=B4=E5=87=AF?= <2448379534@qq.com>
Date: Tue, 7 Jul 2026 10:33:29 +0800
Subject: [PATCH] =?UTF-8?q?=E5=BC=B9=E7=AA=97=E6=8B=96=E5=8A=A8+=E8=BF=87?=
 =?UTF-8?q?=E9=B1=BC=E8=AE=BE=E6=96=BD-=E8=BF=87=E9=B1=BC=E6=80=BB?=
 =?UTF-8?q?=E9=87=8F-=E5=BC=B9=E6=A1=86=E6=B7=BB=E5=8A=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/.env.development                     |    2 +-
 frontend/src/components/BasicSearch/index.vue |  107 +-
 .../FishResource/FishResourceSearch.vue       |  282 ++++
 .../src/components/FishResource/index.vue     |  554 +++++++
 .../MapModal/components/AIYXSB/index.vue      |    4 +-
 .../MapModal/components/BasicInfo.vue         |    3 +-
 .../components/FishFacilityMonitorData.vue    |    4 +-
 .../components/FishFacilityRunState.vue       |    4 +-
 .../MapModal/components/FlowMeasure.vue       |    3 +-
 .../components/NormalOperationData/index.vue  |    2 +
 .../components/developStatusChart/index.vue   |    4 +-
 .../components/engEnvironmentData/index.vue   |    4 +-
 .../JiuZhuZhanQingKuangJieShao.vue            |    3 +-
 .../EnvironmentalQualityTwoLayers.vue         |    3 +-
 .../modules/EnvironmentalQuality/index.vue    |    4 +-
 frontend/src/modules/GYZLLB/index.vue         | 1272 +++++++++--------
 .../index.vue                                 |    3 +-
 frontend/src/modules/alongFishMod/index.vue   |    3 +-
 .../src/modules/churukushuiwenMod/index.vue   |    4 +-
 .../modules/dianxingcuoshijieshao/index.vue   |   13 +-
 .../index.vue                                 |    4 +-
 .../fishSurvey/FishIntroduce/index.vue        |    4 +-
 .../fishSurvey/ZhuanZhiIntroduce/index.vue    |    4 +-
 frontend/src/modules/guoyujiance/index.vue    |    3 +
 .../guoyusheshijiansheqingkuang/index.vue     |  313 ++--
 .../src/modules/guoyusheshijieshao/index.vue  |  533 +++----
 frontend/src/modules/huanbaoMod/index.vue     |    5 +-
 .../src/modules/huanbaozdjcgzkzQK/index.vue   |    3 +-
 .../src/modules/liuyu/ai/spdzwaijc/AISPTK.vue |    5 +-
 .../src/modules/liuyu/ai/spdzwaijc/index.vue  |    3 +-
 .../shengtailiuliangxianshuju.vue             |    3 +-
 .../shuizhijianceshuju.vue                    |    3 +-
 .../modules/lushengshengtaijiance/index.vue   |    3 +-
 .../TwoLayers/monthlyAverageMaxModal.vue      |    3 +-
 .../index.vue                                 |    4 +-
 .../qixidibaohugongzuokaizhanQK/index.vue     |  325 +++--
 .../xieFangFangShi/index.vue                  |    4 +-
 .../xieFangFenBu/index.vue                    |    4 +-
 .../src/modules/shengtaidabiaoModJZ/index.vue |    5 +-
 .../modules/shengtaidabiaoTwoMod/index.vue    |    4 +
 .../modules/shengtaidabiaoTwoModJJ/index.vue  |    5 +
 .../modules/sheshileixingjieshao/index.vue    |    3 +
 .../src/modules/shuiWenNianNeiFenBu/index.vue |    3 +-
 .../shuidianhuangjingjieruMod/DataTable.vue   |    3 +-
 .../modules/shuishengshengtaijiance/index.vue |    3 +-
 .../index.vue                                 |    4 +-
 .../modules/shuizhijiancegongzuoQK/index.vue  |    4 +-
 .../yanchengshuiwenChangeMod/index.vue        |    4 +-
 .../yunXingGaoJIng/Aisbdbyx/AISBTK.vue        |    3 +-
 .../modules/yunXingGaoJIng/Aisbdbyx/index.vue |    3 +-
 .../zengZhiJiHuaWanChengQingKuang/index.vue   |    4 +-
 .../modules/zengZhiZhanJieShaoMod/index.vue   |    4 +-
 .../zengzhizhanjiansheyunxing/index.vue       |    3 +
 frontend/src/store/modules/shuJuTianBao.ts    |   10 +-
 frontend/src/utils/drag.ts                    |   91 +-
 .../BasicData/DeleteConfirmModal.vue          |    4 +-
 .../components/monitorData/FishData/index.vue |    4 +-
 .../home/huanBaoSheShiYunXingZhuangKuang.vue  |    2 +-
 frontend/src/views/register/index.vue         |    3 +-
 .../shuiShengShengTaiDiaoCha.vue              |    3 +-
 .../guoYuSheShiShuJuTianBao/index.vue         |    3 +-
 61 files changed, 2406 insertions(+), 1273 deletions(-)
 create mode 100644 frontend/src/components/FishResource/FishResourceSearch.vue
 create mode 100644 frontend/src/components/FishResource/index.vue

diff --git a/frontend/.env.development b/frontend/.env.development
index b9d4b82d..e9a06736 100644
--- a/frontend/.env.development
+++ b/frontend/.env.development
@@ -12,7 +12,7 @@ VITE_APP_BASE_API = '/dev-api'
 # VITE_APP_BASE_URL = 'http://172.16.21.142:8093'
 # VITE_APP_BASE_URL = 'http://172.16.21.142:8096'
 # 汤伟
-VITE_APP_BASE_URL = 'http://10.84.121.127:8093'
+VITE_APP_BASE_URL = 'http://10.84.111.235:8093'
 # 李林 
 # VITE_APP_BASE_URL = 'http://10.84.121.43:8093'
 # VITE_APP_BASE_URL = 'http://192.168.1.162:8093'
diff --git a/frontend/src/components/BasicSearch/index.vue b/frontend/src/components/BasicSearch/index.vue
index 70e421bd..1a500565 100644
--- a/frontend/src/components/BasicSearch/index.vue
+++ b/frontend/src/components/BasicSearch/index.vue
@@ -177,7 +177,84 @@
                   </a-select>
                 </a-form-item-rest>
               </div>
+              <!-- 基地电站下拉框 -->
 
+              <div
+                class="flex gap-[10px]"
+                v-else-if="item.type === 'jidiData'"
+              >
+                <a-form-item-rest>
+                  <!-- 基地下拉框 -->
+                  <a-select
+                    :value="formData[item.name]"
+                    placeholder="请选择"
+                    @change="val => dataDimensionDataChange(val, item.name)"
+                    show-search
+                    allow-clear
+                    :loading="shuJuTianBaoStore.baseLoading"
+                    :filter-option="filterOption"
+                    style="width: 135px"
+                  >
+                    <a-select-option
+                      v-for="opt in shuJuTianBaoStore.baseOption"
+                      :key="opt.baseid"
+                      :value="opt.baseid"
+                      :label="opt.basename"
+                    >
+                      {{ opt.basename }}
+                    </a-select-option>
+                  </a-select>
+                  <!-- 电站下拉框 -->
+                  <a-select
+                    v-if="props.zhujianfujian == 'fu'"
+                    :value="formData.rstcd"
+                    placeholder="请选择电站"
+                    @change="stcdIdChange"
+                    show-search
+                    allow-clear
+                    :loading="shuJuTianBaoStore.engLoading"
+                    :filter-option="filterOption"
+                    style="width: 135px"
+                    :dropdown-style="{
+                      maxHeight: '400px',
+                      overflow: 'auto',
+                      minWidth: '300px'
+                    }"
+                  >
+                    <a-select-option
+                      v-for="opt in shuJuTianBaoStore.engOption"
+                      :key="opt.stcd"
+                      :value="opt.stcd"
+                      :label="opt.ennm"
+                      :title="opt.ennm + ',' + opt.reachcdName"
+                      :reachcdName="opt.reachcdName"
+                    >
+                      {{ opt.ennm }},{{ opt.reachcdName }}
+                    </a-select-option>
+                  </a-select>
+                  <!-- 电站下拉框 -->
+                  <a-select
+                    v-if="props.zhujianfujian == 'zhu'"
+                    :value="formData.stcd"
+                    placeholder="请选择电站"
+                    @change="stcdIdChange"
+                    show-search
+                    allow-clear
+                    :loading="shuJuTianBaoStore.engLoading"
+                    :filter-option="filterOption"
+                    style="width: 135px"
+                  >
+                    <a-select-option
+                      v-for="opt in shuJuTianBaoStore.engOption"
+                      :key="opt.stcd"
+                      :value="opt.stcd"
+                      :label="opt.ennm"
+                    >
+                      {{ opt.ennm }}
+                    </a-select-option>
+                  </a-select>
+                </a-form-item-rest>
+              </div>
               <!-- 下拉选择 -->
               <!-- <div v-else-if="item.type === 'Select'">
              <div v-for="i in  item.options"> {{ i[item.values?.name] }} {{ i[item.values?.value] }}</div>
@@ -362,9 +439,13 @@ const initForm = () => {
   validSearchList.value.forEach(item => {
     if (item.type == 'waterStation') {
       // 下拉菜单
-      // shuJuTianBaoStore.getBaseOption();
+      shuJuTianBaoStore.getBaseOption();
       shuJuTianBaoStore.getSelectForOption();
-      shuJuTianBaoStore.getEngOption(formData.rvcd);
+      shuJuTianBaoStore.getEngOption(formData.rvcd,'rvcd');
+    }
+    if (item.type == 'jidiData') {
+      shuJuTianBaoStore.getBaseOption();
+      shuJuTianBaoStore.getEngOption(formData[item.name] || 'all','baseId');
     }
     if (item.fieldProps?.required) {
       rules[item.name] = [
@@ -387,19 +468,19 @@ const triggerManualValuesChange = (changedKey: string, newValue: any) => {
   emit('valuesChange', changedValues, { ...formData });
 };
 
-// const dataDimensionDataChange = (value: any) => {
-//   formData.baseId = value;
-//   formData.rstcd = "";
-//   shuJuTianBaoStore.getEngOption(formData.baseId);
-
-//   // 【关键修改】手动触发 valuesChange，因为 a-form-item-rest 阻断了自动监听
-//   triggerManualValuesChange("baseId", formData.baseId);
-// };
+const dataDimensionDataChange = (value: any, fieldName: string = 'baseId') => {
+  formData[fieldName] = value;
+  formData.rstcd = "";
+  shuJuTianBaoStore.getEngOption(value,'baseId');
+ triggerManualValuesChange('baseId', formData.baseId);
+  // 一次性触发所有变更通知，避免多次调用
+  // emit('valuesChange', { [fieldName]: value, rstcd: "" }, { ...formData });
+};
 
 const lyChange = (value: any) => {
   formData.rvcd = value;
   formData.rstcd = '';
-  shuJuTianBaoStore.getEngOption(formData.rvcd);
+  shuJuTianBaoStore.getEngOption(formData.rvcd,'rvcd');
 
   // 【关键修改】手动触发 valuesChange，因为 a-form-item-rest 阻断了自动监听
   triggerManualValuesChange('rvcd', formData.rvcd);
@@ -408,12 +489,12 @@ const lyChange = (value: any) => {
 const stcdIdChange = (value: any) => {
   if (props.zhujianfujian == 'fu') {
     formData.rstcd = value;
-    shuJuTianBaoStore.getFpssOption(formData.rvcd, value);
+    shuJuTianBaoStore.getFpssOption(formData.baseId, value);
     // 【关键修改】手动触发 valuesChange
     triggerManualValuesChange('rstcd', formData.rstcd);
   } else {
     formData.stcd = value;
-    shuJuTianBaoStore.getFpssOption(formData.rvcd, value);
+    shuJuTianBaoStore.getFpssOption(formData.baseId, value);
     // 【关键修改】手动触发 valuesChange
     triggerManualValuesChange('stcd', formData.stcd);
   }
diff --git a/frontend/src/components/FishResource/FishResourceSearch.vue b/frontend/src/components/FishResource/FishResourceSearch.vue
new file mode 100644
index 00000000..653c2438
--- /dev/null
+++ b/frontend/src/components/FishResource/FishResourceSearch.vue
@@ -0,0 +1,282 @@
+<template>
+  <div class="approval-search">
+    <BasicSearch
+      ref="basicSearchRef"
+      :searchList="searchList"
+      :initial-values="initSearchData"
+      :zhujianfujian="'fu'"
+      @reset="handleResetWrapper"
+      @finish="onSearchFinish"
+      @values-change="onValuesChange"
+      ><template #jcdt>
+        <a-date-picker
+          class="w-[120px]"
+          v-model:value="jcdt.min"
+          format="YYYY-MM-DD"
+          value-format="YYYY-MM-DD HH:mm:ss"
+          placeholder="起始时间"
+          :showToday="false"
+        >
+          <template #renderExtraFooter>
+            <div class="flex items-center flex-wrap px-2">
+              <span
+                v-for="item in DateSetting.RangeButton.days1"
+                :key="item"
+                @click="handleRangeClick(item)"
+              >
+                <a class="text-[#1890ff] mr-1"> {{ item.label }}</a>
+              </span>
+            </div>
+          </template>
+        </a-date-picker>
+        至
+        <a-form-item-rest>
+          <a-date-picker
+            class="w-[120px]"
+            v-model:value="jcdt.max"
+            format="YYYY-MM-DD"
+            value-format="YYYY-MM-DD HH:mm:ss"
+            :disabledDate="disabledEndDate"
+            placeholder="结束时间"
+            :showToday="false"
+          >
+            <template #renderExtraFooter>
+              <div class="flex items-center flex-wrap px-2">
+                <span
+                  v-for="item in DateSetting.RangeButton.days1"
+                  :key="item"
+                  @click="handleRangeClick(item)"
+                >
+                  <a class="text-[#1890ff] mr-1"> {{ item.label }}</a>
+                </span>
+              </div>
+            </template>
+          </a-date-picker>
+        </a-form-item-rest>
+      </template>
+      <template #actions>
+        <a-button :loading="exportLoading" @click="exportBtn">导出</a-button>
+      </template>
+    </BasicSearch>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, computed, onMounted } from 'vue';
+import dayjs from 'dayjs';
+import BasicSearch from '@/components/BasicSearch/index.vue';
+import { DateSetting } from '@/utils/enumeration';
+import { useTimeScale } from '@/store/composables/useTimeScale';
+import { getFishReleaseMonitorSectionList } from '@/api/DataQueryMenuModule';
+
+const emit = defineEmits<{
+  (e: 'export-btn'): void;
+  (e: 'reset', values: any): void;
+  (e: 'search-finish', values: any): void;
+}>();
+
+const basicSearchRef = ref<any>();
+const btnLoading = ref<boolean>(false);
+
+const props = defineProps<{
+  exportLoading?: boolean;
+  modalData: any;
+}>();
+const initSearchData = {
+  baseId: props.modalData.baseid ?? 'all',
+  rstcd: null,
+  stcd: '',
+  mway: '1'
+};
+
+const searchData = ref<any>({ ...initSearchData });
+
+const {
+  jcdt,
+  currentTimeScale,
+  handleRangeClick,
+  disabledEndDate,
+  handleSearchFinish,
+  handleValuesChange,
+  init,
+  setDefaultTimeRange
+} = useTimeScale({
+  defaultTimeScale: initSearchData.timeScale,
+  onSearchFinish: values => emit('search-finish', values),
+  onReset: () => emit('reset', initSearchData)
+});
+const crossSectionListLoading = ref<any>(false);
+const crossSectionList = ref<any>([]);
+
+const searchList: any = computed(() => [
+  //   {
+  //     type: 'waterStation',
+  //     name: 'rvcd',
+  //     label: '流域',
+  //     placeholder: '请输入流域名称',
+  //     fieldProps: {
+  //       allowClear: true
+  //     },
+  //     options: []
+  //   },
+  {
+    type: 'jidiData',
+    name: 'baseId',
+    label: '水电基地',
+    placeholder: '请输入水电基地名称',
+    fieldProps: {
+      allowClear: true
+    },
+    options: []
+  },
+  {
+    type: 'Select',
+    name: 'stcd',
+    label: '过鱼设施名称',
+    width: 200,
+    placeholder: '请选择过鱼设施名称',
+    fieldProps: {
+      allowClear: true
+    },
+    loading: crossSectionListLoading.value,
+    options: crossSectionList.value.map(item => ({
+      label: item.stnm,
+      value: item.stcd
+    }))
+  },
+  {
+    type: 'Radio',
+    name: 'mway',
+    label: '数据类型',
+    width: 140,
+    options: [
+      {
+        label: '人工',
+        value: '1'
+      },
+      {
+        label: '自动',
+        value: '2'
+      }
+    ]
+  },
+  {
+    type: 'custom',
+    name: 'jcdt',
+    label: '时间',
+    fieldProps: {
+      allowClear: false
+    }
+  }
+]);
+
+const onSearchFinish = (values: any) => {
+  handleSearchFinish(values);
+};
+
+const exportBtn = () => {
+  emit('export-btn');
+};
+const initCrossSectionList = params => {
+  const filters = [];
+  if (params) {
+    if (params.baseId != '' && params.baseId != 'all') {
+      filters.push({
+        field: 'baseId',
+        operator: 'contains',
+        dataType: 'string',
+        value: params.baseId
+      });
+    }
+    if (params.rstcd != '' && params.rstcd != null) {
+      filters.push({
+        field: 'rstcd',
+        operator: 'contains',
+        dataType: 'string',
+        value: params.rstcd
+      });
+    }
+  }
+  crossSectionListLoading.value = true;
+  getFishReleaseMonitorSectionList({
+    filter: {
+      logic: 'and',
+      filters: filters
+    },
+    select: ['stcd', 'stnm', 'wtDeviceType', 'dtinType', 'mway']
+  }).then(res => {
+    if (res.data?.data) {
+      crossSectionList.value = res.data?.data;
+    }
+    crossSectionListLoading.value = false;
+  });
+};
+
+const onValuesChange = (changedValues: any, allValues: any) => {
+  // 当基地或断面变化时，清空过鱼设施选中并重新请求列表
+  if ('baseId' in changedValues || 'rstcd' in changedValues) {
+    allValues.stcd = null;
+    if (basicSearchRef.value?.formData) {
+      basicSearchRef.value.formData.stcd = null;
+    }
+    initCrossSectionList(allValues);
+  }
+
+  handleValuesChange(changedValues, allValues);
+  searchData.value = { ...searchData.value, ...allValues };
+};
+
+const handleResetWrapper = () => {
+  // 手动重置内部状态，避免触发两次请求
+  currentTimeScale.value = initSearchData.timeScale;
+  const now = dayjs();
+  if (props.modalData.year) {
+    jcdt.value = {
+      min: `${props.modalData.year}-01-01 00:00:00`,
+      max: `${props.modalData.year}-12-31 23:59:59`
+    };
+  } else {
+    jcdt.value = {
+      min: `${now
+        .subtract(5, 'year')
+        .startOf('year')
+        .format('YYYY-MM-DD')} 00:00:00`,
+      max: `${now.endOf('year').format('YYYY-MM-DD')} 23:59:59`
+    };
+  }
+
+  setDefaultTimeRange(initSearchData.timeScale);
+  // 触发搜索，使用当前状态而非 initSearchData
+  handleSearchFinish({
+    ...initSearchData
+  });
+};
+
+defineExpose({
+  btnLoading,
+  searchData
+});
+
+onMounted(() => {
+  init();
+  // 设置默认年份：前一年到当前年
+  const now = dayjs();
+  if (props.modalData.year) {
+    jcdt.value = {
+      min: `${props.modalData.year}-01-01 00:00:00`,
+      max: `${props.modalData.year}-12-31 23:59:59`
+    };
+  } else {
+    jcdt.value = {
+      min: `${now.subtract(5, 'year').format('YYYY-MM-DD')} 00:00:00`,
+      max: `${now.format('YYYY-MM-DD')} 23:59:59`
+    };
+  }
+
+  initCrossSectionList();
+  // 使用 handleSearchFinish 确保包含 jcdt 等完整参数
+  handleSearchFinish({ ...initSearchData });
+});
+</script>
+
+<style lang="scss"></style>
diff --git a/frontend/src/components/FishResource/index.vue b/frontend/src/components/FishResource/index.vue
new file mode 100644
index 00000000..c7145466
--- /dev/null
+++ b/frontend/src/components/FishResource/index.vue
@@ -0,0 +1,554 @@
+<template>
+  <div class="w-full h-full flex flex-col" style="height:calc(60vh)">
+    <!-- 搜索组件 -->
+    <FishDataSearch
+      @export-btn="exportBtn"
+      @search-finish="onSearchFinish"
+      @reset="onReset"
+      :exportLoading="exportLoading"
+      :modalData = "props.modalData"
+      ref="searchRef"
+    />
+    <!-- 表格组件 -->
+    <BasicTable
+      ref="tableRef"
+      :scrollX="tableScrollX"
+      :scrollY="tableScrollY"
+      :columns="tableColumns"
+      :list-url="getFishReleaseMonitorList"
+      :searchParams="{
+        sort: sort
+      }"
+    >
+    </BasicTable>
+
+    <!-- 图片预览弹框 -->
+    <a-modal
+      v-model:open="imagePreviewVisible"
+      title="图片预览"
+      :footer="null"
+      width="800px"
+    >
+      <div style="text-align: center">
+        <img :src="previewImageUrl" style="width: 100%; height: 600px" />
+      </div>
+    </a-modal>
+
+    <!-- 视频预览弹框 -->
+    <a-modal
+      v-model:open="videoPreviewVisible"
+      title="视频预览"
+      :footer="null"
+      width="800px"
+    >
+      <div style="text-align: center">
+        <video
+          :src="previewVideoUrl"
+          controls
+          style="width: 100%; height: 600px"
+        ></video>
+      </div>
+    </a-modal>
+  </div>
+</template>
+<script setup lang="ts">
+import { ref, computed, onMounted, nextTick, h } from 'vue';
+import dayjs from 'dayjs';
+import { Button } from 'ant-design-vue';
+import FishDataSearch from './FishResourceSearch.vue';
+import BasicTable from '@/components/BasicTable/index.vue';
+import { getFishReleaseMonitorList } from '@/api/DataQueryMenuModule';
+import { calcTableScrollY } from '@/utils/index';
+import { useDraggable } from '@/utils/drag';
+const props = defineProps<{
+  modalData?: any;
+}>();
+const sort = ref<any>([
+  {
+    field: 'baseStepSort',
+    dir: 'asc'
+  },
+  {
+    field: 'rvcdStepSort',
+    dir: 'asc'
+  },
+  {
+    field: 'rstcdStepSort',
+    dir: 'asc'
+  },
+  {
+    field: 'ttpwr',
+    dir: 'asc'
+  },
+  {
+    field: 'tm',
+    dir: 'desc'
+  }
+]);
+const tableRef = ref();
+const searchRef = ref();
+const tableScrollY = ref<string | number>(0);
+const currentSearchParams = ref<any>({});
+const exportLoading = ref(false);
+
+// 图片预览
+const imagePreviewVisible = ref(false);
+const previewImageUrl = ref('');
+// 视频预览
+const videoPreviewVisible = ref(false);
+const previewVideoUrl = ref('');
+useDraggable(imagePreviewVisible, { boundary: true, resetOnOpen: true });
+useDraggable(videoPreviewVisible, { boundary: true, resetOnOpen: true });
+const openImagePreview = (url: string) => {
+  previewImageUrl.value = import.meta.env.VITE_APP_ATTACHMENT_URL + '/?' + url;
+  imagePreviewVisible.value = true;
+};
+
+const openVideoPreview = (url: string) => {
+  previewVideoUrl.value = import.meta.env.VITE_APP_ATTACHMENT_URL + '/?' + url;
+  videoPreviewVisible.value = true;
+};
+
+const tableScrollX = computed(() =>
+  Math.max(
+    tableColumns.value.reduce(
+      (sum: number, col: any) => sum + (col.width || 180),
+      0
+    ),
+    600
+  )
+);
+
+// 人工列
+const columnsManual: any[] = [
+  {
+    key: 'stnm',
+    title: '电站名称',
+    dataIndex: 'stnm',
+    visible: true,
+    width: 200,
+    sort: true,
+    merge: true
+  },
+  {
+    key: 'baseName',
+    title: '所属基地',
+    dataIndex: 'baseName',
+    sort: true,
+    width: 120
+  },
+  {
+    key: 'stnm',
+    title: '过鱼设施名称',
+    dataIndex: 'stnm',
+    sort: true,
+    width: 200
+  },
+  {
+    key: 'strdt',
+    title: '开始时间',
+    dataIndex: 'strdt',
+    sort: true,
+    width: 100,
+    customRender: ({ text }) => dayjs(text).format('YYYY-MM-DD') || '-'
+  },
+  {
+    key: 'enddt',
+    title: '结束时间',
+    dataIndex: 'enddt',
+    sort: true,
+    width: 100,
+    customRender: ({ text }) => dayjs(text).format('YYYY-MM-DD') || '-'
+  },
+  {
+    key: 'tm',
+    title: '填报时间',
+    dataIndex: 'tm',
+    sort: true,
+    width: 160
+  },
+  {
+    key: 'ftp',
+    title: '鱼种类',
+    dataIndex: 'ftp',
+    sort: true,
+    width: 120
+  },
+  {
+    key: 'fcnt',
+    title: '过鱼数量(尾)',
+    dataIndex: 'fcnt',
+    sort: true,
+    width: 120
+  },
+  {
+    key: 'directionName',
+    title: '鱼游向',
+    dataIndex: 'directionName',
+    sort: true,
+    width: 120
+  },
+  {
+    key: 'fsz',
+    title: '鱼类规格',
+    dataIndex: 'fsz',
+    sort: true,
+    width: 160
+  },
+  {
+    key: 'firstimgurl',
+    title: '图片',
+    dataIndex: 'firstimgurl',
+    align: 'center',
+    width: 110,
+    customRender: ({ text }: any) => {
+      const hasValidUrl =
+        text &&
+        text !== '-' &&
+        text.trim() !== '' &&
+        text !== 'null' &&
+        text !== 'undefined';
+      return h(
+        Button,
+        {
+          type: 'link',
+          disabled: !hasValidUrl,
+          style: {
+            color: !hasValidUrl ? '#ccc' : '#1890ff',
+            cursor: !hasValidUrl ? 'not-allowed' : 'pointer'
+          },
+          onClick: () => {
+            if (hasValidUrl) {
+              openImagePreview(text);
+            }
+          }
+        },
+        () => '查看图片'
+      );
+    }
+  },
+  {
+    key: 'videourl',
+    title: '视频',
+    dataIndex: 'videourl',
+    align: 'center',
+    width: 110,
+    customRender: ({ text }: any) => {
+      const hasValidUrl =
+        text &&
+        text !== '-' &&
+        text.trim() !== '' &&
+        text !== 'null' &&
+        text !== 'undefined';
+      return h(
+        Button,
+        {
+          type: 'link',
+          disabled: !hasValidUrl,
+          style: {
+            color: !hasValidUrl ? '#ccc' : '#1890ff',
+            cursor: !hasValidUrl ? 'not-allowed' : 'pointer'
+          },
+          onClick: () => {
+            if (hasValidUrl) {
+              openVideoPreview(text);
+            }
+          }
+        },
+        () => '查看视频'
+      );
+    }
+  }
+];
+
+// 自动列
+const columnsAuto: any[] = [
+  {
+    key: 'stnm',
+    title: '电站名称',
+    dataIndex: 'stnm',
+    visible: true,
+    width: 200,
+    sort: true,
+    merge: true
+  },
+  {
+    key: 'baseName',
+    title: '所属基地',
+    dataIndex: 'baseName',
+    sort: true,
+    width: 120
+  },
+  {
+    key: 'stnm',
+    title: '过鱼设施名称',
+    dataIndex: 'stnm',
+    sort: true,
+    width: 200
+  },
+  {
+    key: 'tm',
+    title: '时间',
+    dataIndex: 'tm',
+    sort: true,
+    width: 160
+  },
+  {
+    key: 'ftp',
+    title: '鱼种类',
+    dataIndex: 'ftp',
+    sort: true,
+    width: 120
+  },
+  {
+    key: 'length',
+    title: '鱼长度(cm)',
+    dataIndex: 'length',
+    sort: true,
+    width: 120
+  },
+  {
+    key: 'width',
+    title: '鱼宽度(cm)',
+    dataIndex: 'width',
+    sort: true,
+    width: 120,
+    customRender: ({ text }: any) => {
+      const num = parseFloat(text);
+      return isNaN(num) ? '-' : num.toFixed(2);
+    }
+  },
+  {
+    key: 'fishspeed',
+    title: '鱼速度(m/s)',
+    dataIndex: 'fishspeed',
+    sort: true,
+    width: 80,
+    customRender: ({ text }: any) => {
+      const num = parseFloat(text);
+      return isNaN(num) ? '-' : num.toFixed(2);
+    }
+  },
+  {
+    key: 'directionName',
+    title: '鱼游向',
+    dataIndex: 'directionName',
+    sort: true,
+    width: 160
+  },
+  {
+    key: 'temperature',
+    title: '水温(℃)',
+    dataIndex: 'temperature',
+    sort: true,
+    width: 160,
+    customRender: ({ text }: any) => {
+      const num = parseFloat(text);
+      return isNaN(num) ? '-' : num.toFixed(1);
+    }
+  },
+  {
+    key: 'speed',
+    title: '流速(m/s)',
+    dataIndex: 'speed',
+    sort: true,
+    width: 160,
+    customRender: ({ text }: any) => {
+      const num = parseFloat(text);
+      return isNaN(num) ? '-' : num.toFixed(2);
+    }
+  },
+  {
+    key: 'fcnt',
+    title: '过鱼数量(尾)',
+    dataIndex: 'fcnt',
+    sort: true,
+    width: 120
+  },
+  {
+    key: 'channelno',
+    title: '过鱼通道',
+    dataIndex: 'channelno',
+    sort: true,
+    width: 140
+  },
+  {
+    key: 'firstimgurl',
+    title: '轮廓图',
+    dataIndex: 'firstimgurl',
+    align: 'center',
+    width: 110,
+    customRender: ({ text }: any) => {
+      const hasValidUrl =
+        text &&
+        text !== '-' &&
+        text.trim() !== '' &&
+        text !== 'null' &&
+        text !== 'undefined';
+      return h(
+        Button,
+        {
+          type: 'link',
+          disabled: !hasValidUrl,
+          style: {
+            color: !hasValidUrl ? '#ccc' : '#1890ff',
+            cursor: !hasValidUrl ? 'not-allowed' : 'pointer'
+          },
+          onClick: () => {
+            if (hasValidUrl) {
+              openImagePreview(text);
+            }
+          }
+        },
+        () => '查看图片'
+      );
+    }
+  },
+  {
+    key: 'videourl',
+    title: '短视频',
+    dataIndex: 'videourl',
+    align: 'center',
+    width: 110,
+    customRender: ({ text }: any) => {
+      const hasValidUrl =
+        text &&
+        text !== '-' &&
+        text.trim() !== '' &&
+        text !== 'null' &&
+        text !== 'undefined';
+      return h(
+        Button,
+        {
+          type: 'link',
+          disabled: !hasValidUrl,
+          style: {
+            color: !hasValidUrl ? '#ccc' : '#1890ff',
+            cursor: !hasValidUrl ? 'not-allowed' : 'pointer'
+          },
+          onClick: () => {
+            if (hasValidUrl) {
+              openVideoPreview(text);
+            }
+          }
+        },
+        () => '查看视频'
+      );
+    }
+  }
+];
+
+// 根据数据类型动态切换列
+const tableColumns = computed(() => {
+  const mway = currentSearchParams.value.mway;
+  return mway === '2' ? columnsAuto : columnsManual;
+});
+
+const onSearchFinish = async (values: any) => {
+  currentSearchParams.value = values;
+  // 等待 prop 更新后再调用 getList
+  await nextTick();
+  initTable(values);
+};
+
+const onReset = async (values: any) => {
+  currentSearchParams.value = values;
+  await nextTick();
+  initTable(values);
+};
+
+const exportBtn = () => {
+  if (exportLoading.value) return;
+
+  exportLoading.value = true;
+  searchRef.value.btnLoading = true;
+
+  tableRef.value
+    .exportTable({
+      fileName: `过鱼监测数据_${dayjs().format('YYYY-MM-DD HH-mm-ss')}`
+    })
+    .finally(() => {
+      exportLoading.value = false;
+      searchRef.value.btnLoading = false;
+    });
+};
+
+const initTable = (values: any) => {
+  console.log(values);
+  const filters = [
+    values.baseId && values.baseId !== 'all'
+      ? {
+          field: 'baseId',
+          operator: 'contains',
+          dataType: 'string',
+          value: values.baseId
+        }
+      : null,
+    values.rstcd
+      ? {
+          field: 'rstcd',
+          operator: 'eq',
+          dataType: 'string',
+          value: values.rstcd
+        }
+      : null,
+    values.mway
+      ? {
+          field: 'mway',
+          operator: 'eq',
+          dataType: 'string',
+          value: values.mway
+        }
+      : null
+  ].filter(Boolean); // 移除空项
+  if (values.stcd) {
+    filters.push({
+      logic: 'or',
+      filters: [
+        {
+          field: 'stcd',
+          operator: 'eq',
+          dataType: 'string',
+          value: values.stcd
+        },
+        {
+          field: 'stcode',
+          operator: 'eq',
+          dataType: 'string',
+          value: values.stcd
+        }
+      ]
+    });
+  }
+  if (values.jcdt) {
+    filters.push(
+      {
+        field: 'tm',
+        operator: 'gte',
+        dataType: 'date',
+        value: dayjs(values.jcdt.min).format('YYYY-MM-DD HH:mm:ss')
+      },
+      {
+        field: 'tm',
+        operator: 'lte',
+        dataType: 'date',
+        value: dayjs(values.jcdt.max).format('YYYY-MM-DD HH:mm:ss')
+      }
+    );
+  }
+
+  const params = {
+    logic: 'and',
+    filters
+  };
+  tableRef.value.getList(params);
+};
+
+onMounted(() => {
+  nextTick(() => {
+    tableScrollY.value = calcTableScrollY();
+  });
+});
+</script>
+
+<style scoped lang="scss"></style>
diff --git a/frontend/src/components/MapModal/components/AIYXSB/index.vue b/frontend/src/components/MapModal/components/AIYXSB/index.vue
index fddb65fd..921b2525 100644
--- a/frontend/src/components/MapModal/components/AIYXSB/index.vue
+++ b/frontend/src/components/MapModal/components/AIYXSB/index.vue
@@ -245,6 +245,7 @@ import { useModelStore } from '@/store/modules/model';
 import videoCover from '@/assets/images/videFm.jpg';
 import MediaViewer from './MediaViewer.vue';
 import AttachmentPreview from './AttachmentPreview.vue';
+import { useDraggable } from '@/utils/drag';
 
 const modelStore = useModelStore();
 
@@ -875,7 +876,8 @@ const notRunningMediaViewerRef = ref();
 // 附件预览弹窗
 const attachmentModalVisible = ref(false);
 const currentAttachmentFid = ref('');
-
+useDraggable(detailModalVisible, { boundary: true, resetOnOpen: true });
+useDraggable(attachmentModalVisible, { boundary: true, resetOnOpen: true });
 // 查看附件
 const handleViewAttachment = (record: any) => {
   if (!record.fid) {
diff --git a/frontend/src/components/MapModal/components/BasicInfo.vue b/frontend/src/components/MapModal/components/BasicInfo.vue
index c66884fa..70a185dd 100644
--- a/frontend/src/components/MapModal/components/BasicInfo.vue
+++ b/frontend/src/components/MapModal/components/BasicInfo.vue
@@ -152,7 +152,7 @@ import { getStcdDetail } from '@/api/mapModal';
 const baseUrl = import.meta.env.VITE_APP_ATTACHMENT_URL;
 const modelStore = useModelStore();
 const hasLoaded = ref(false); // 标记是否已经请求过
-
+import { useDraggable } from '@/utils/drag';
 const props = defineProps({
   url: {
     type: String,
@@ -168,6 +168,7 @@ const isLogo = ref(false);
 const loading = ref(false);
 const data2: any = ref({});
 const tabledata = ref([]);
+useDraggable(visible, { boundary: true, resetOnOpen: true });
 const columnsConfig = ref([
   {
     type: 'ENG',
diff --git a/frontend/src/components/MapModal/components/FishFacilityMonitorData.vue b/frontend/src/components/MapModal/components/FishFacilityMonitorData.vue
index e3e3bb4c..a9e993cb 100644
--- a/frontend/src/components/MapModal/components/FishFacilityMonitorData.vue
+++ b/frontend/src/components/MapModal/components/FishFacilityMonitorData.vue
@@ -56,6 +56,7 @@ import { getMonitorDataFpq, getMonitorDataOnline } from '@/api/mapModal';
 import { useModelStore } from '@/store/modules/model';
 import { DateSetting } from '@/utils/enumeration';
 import dayjs from 'dayjs';
+import { useDraggable } from '@/utils/drag';
 
 const loading = ref(false);
 const modelStore = useModelStore();
@@ -72,7 +73,8 @@ const previewImageUrl = ref('');
 // 视频预览
 const videoPreviewVisible = ref(false);
 const previewVideoUrl = ref('');
-
+useDraggable(imagePreviewVisible, { boundary: true, resetOnOpen: true });
+useDraggable(videoPreviewVisible, { boundary: true, resetOnOpen: true });
 const openImagePreview = (url: string) => {
   previewImageUrl.value = import.meta.env.VITE_APP_ATTACHMENT_URL + '/?' + url;
   imagePreviewVisible.value = true;
diff --git a/frontend/src/components/MapModal/components/FishFacilityRunState.vue b/frontend/src/components/MapModal/components/FishFacilityRunState.vue
index 9354ccfb..f93afe69 100644
--- a/frontend/src/components/MapModal/components/FishFacilityRunState.vue
+++ b/frontend/src/components/MapModal/components/FishFacilityRunState.vue
@@ -102,6 +102,7 @@ import { getDictItemsByCode } from '@/api/dict';
 import { getFishDictoryDropdown } from '@/api/select';
 import { useModelStore } from '@/store/modules/model';
 import dayjs from 'dayjs';
+import { useDraggable } from '@/utils/drag';
 
 const loading = ref(false);
 const modelStore = useModelStore();
@@ -125,7 +126,8 @@ const previewImageUrl = ref('');
 // 视频预览
 const videoPreviewVisible = ref(false);
 const currentVideoUrl = ref('');
-
+useDraggable(imagePreviewVisible, { boundary: true, resetOnOpen: true });
+useDraggable(videoPreviewVisible, { boundary: true, resetOnOpen: true });
 // 鱼类搜索过滤
 const filterFtpOption = (input: string, option: any) => {
   console.log('filterOption', input, option);
diff --git a/frontend/src/components/MapModal/components/FlowMeasure.vue b/frontend/src/components/MapModal/components/FlowMeasure.vue
index b3908191..b5d619ef 100644
--- a/frontend/src/components/MapModal/components/FlowMeasure.vue
+++ b/frontend/src/components/MapModal/components/FlowMeasure.vue
@@ -79,6 +79,7 @@ import { queryPostUrlList } from '@/api/mapModal';
 import { useModelStore } from '@/store/modules/model';
 import BasicTable from '@/components/BasicTable/index.vue';
 import { DateSetting } from '@/utils/enumeration';
+import { useDraggable } from '@/utils/drag';
 
 const modelStore = useModelStore();
 
@@ -102,7 +103,7 @@ let chartInstance: echarts.ECharts | null = null;
 const videoModalVisible = ref(false);
 const videoModalTitle = ref('');
 const currentVideoUrl = ref('');
-
+useDraggable(videoModalVisible, { boundary: true, resetOnOpen: true });
 const tabsList = [{ name: '流量监测', key: 'flowMeasure' }];
 const activeTabKey = ref('flowMeasure');
 
diff --git a/frontend/src/components/MapModal/components/NormalOperationData/index.vue b/frontend/src/components/MapModal/components/NormalOperationData/index.vue
index 432b1a4f..e99ef6b4 100644
--- a/frontend/src/components/MapModal/components/NormalOperationData/index.vue
+++ b/frontend/src/components/MapModal/components/NormalOperationData/index.vue
@@ -110,6 +110,7 @@ import {
   type OperationFilterField,
   type OperationTableItem
 } from './operationConfig';
+import { useDraggable } from '@/utils/drag';
 
 const props = defineProps({
   isActive: { type: Boolean, default: false }
@@ -141,6 +142,7 @@ const loadYear = ref(false);
 const loadFtp = ref(false);
 const tableRef = ref();
 const attachmentModalVisible = ref(false);
+useDraggable(attachmentModalVisible, { boundary: true, resetOnOpen: true });
 const currentAttachmentFid = ref('');
 const fieldOptionsMap = reactive<Record<string, OperationFilterOption[]>>({});
 const selectLoadingMap = reactive<Record<string, boolean>>({});
diff --git a/frontend/src/components/developStatusChart/index.vue b/frontend/src/components/developStatusChart/index.vue
index c9bb000d..1a0c370a 100644
--- a/frontend/src/components/developStatusChart/index.vue
+++ b/frontend/src/components/developStatusChart/index.vue
@@ -28,7 +28,7 @@ import * as echarts from 'echarts';
 import { getVmsstbprptKendoList } from '@/api/home';
 import { useJidiSelectEventStore } from '@/store/modules/jidiSelectEvent';
 import ShuiDianKaiFQKTwoLayer from '@/modules/shuidianhuangjingjieruMod/TwoLayer/ShuiDianKaiFQKTwoLayer.vue';
-
+import { useDraggable } from '@/utils/drag';
 defineOptions({
     name: 'developStatusChart'
 });
@@ -41,7 +41,7 @@ const dataLoading = ref(false);
 
 const modalVisible = ref(false);
 const modalProps = ref<any>({});
-
+useDraggable(modalVisible, { boundary: true, resetOnOpen: true });
 function openModal(props: any) {
     modalProps.value = props;
     modalVisible.value = true;
diff --git a/frontend/src/components/engEnvironmentData/index.vue b/frontend/src/components/engEnvironmentData/index.vue
index b368b924..cdedab24 100644
--- a/frontend/src/components/engEnvironmentData/index.vue
+++ b/frontend/src/components/engEnvironmentData/index.vue
@@ -60,7 +60,7 @@ import { ref, watch } from 'vue';
 import { getVmsstbprptKendoList } from '@/api/home';
 import { useJidiSelectEventStore } from '@/store/modules/jidiSelectEvent';
 import HuanJingSJJRQK from '@/modules/shuidianhuangjingjieruMod/TwoLayer/HuanJingSJJRQK.vue';
-
+import { useDraggable } from '@/utils/drag';
 defineOptions({
     name: 'EngEnvironmentData'
 });
@@ -72,7 +72,7 @@ const data = ref<Record<string, number>>({ one: 0, two: 0, three: 0 });
 
 const modalVisible = ref(false);
 const modalProps = ref<any>({});
-
+useDraggable(modalVisible, { boundary: true, resetOnOpen: true });
 function openModal(props: any) {
     modalProps.value = props;
     modalVisible.value = true;
diff --git a/frontend/src/modules/DongWuJiuZhuZhan/JiuZhuZhanQingKuangJieShao.vue b/frontend/src/modules/DongWuJiuZhuZhan/JiuZhuZhanQingKuangJieShao.vue
index d65599df..4a82d2cd 100644
--- a/frontend/src/modules/DongWuJiuZhuZhan/JiuZhuZhanQingKuangJieShao.vue
+++ b/frontend/src/modules/DongWuJiuZhuZhan/JiuZhuZhanQingKuangJieShao.vue
@@ -63,6 +63,7 @@ import SidePanelItem from '@/components/SidePanelItem/index.vue';
 import { useJidiSelectEventStore } from '@/store/modules/jidiSelectEvent';
 import { vpcGetKendoListCust } from '@/api/zxdzw';
 import ArtsDetail from '@/components/carouselIntroduce/ArtsDetail.vue';
+import { useDraggable } from '@/utils/drag';
 
 // 定义组件名（便于调试和递归）
 defineOptions({
@@ -83,7 +84,7 @@ const baseid = ref('');
 // 弹框控制
 const modalVisible = ref(false);
 const currentItem = ref<any>(null);
-
+useDraggable(modalVisible, { boundary: true, resetOnOpen: true });
 // 加载状态
 const loading = ref(false);
 
diff --git a/frontend/src/modules/EnvironmentalQuality/TwoLayers/EnvironmentalQualityTwoLayers.vue b/frontend/src/modules/EnvironmentalQuality/TwoLayers/EnvironmentalQualityTwoLayers.vue
index e871f270..912ca453 100644
--- a/frontend/src/modules/EnvironmentalQuality/TwoLayers/EnvironmentalQualityTwoLayers.vue
+++ b/frontend/src/modules/EnvironmentalQuality/TwoLayers/EnvironmentalQualityTwoLayers.vue
@@ -109,6 +109,7 @@ import isSameOrAfter from 'dayjs/plugin/isSameOrAfter'
 import BasicTable from '@/components/BasicTable/index.vue'
 import { wqGetKendoList } from '@/api/sz'
 import HJMZDTwoLays from "./HJMZDTwoLays.vue"
+import { useDraggable } from '@/utils/drag';
 
 // 注册 dayjs 插件
 dayjs.extend(isSameOrAfter)
@@ -155,7 +156,7 @@ const detailModalVisible = ref(false)
 const detailData = ref<any>({})
 const mapModalVisible = ref(false)
 const mapModalData = ref<any>({})
-
+useDraggable(detailModalVisible, { boundary: true, resetOnOpen: true });
 // 排序配置
 const sortConfig = computed(() => [
     { field: 'rstcdStepSort', dir: 'asc' },
diff --git a/frontend/src/modules/EnvironmentalQuality/index.vue b/frontend/src/modules/EnvironmentalQuality/index.vue
index d2c9a511..814a5bcc 100644
--- a/frontend/src/modules/EnvironmentalQuality/index.vue
+++ b/frontend/src/modules/EnvironmentalQuality/index.vue
@@ -36,6 +36,8 @@ import SidePanelItem from '@/components/SidePanelItem/index.vue';
 import { wqGetKendoListCust } from '@/api/sz'
 import { useJidiSelectEventStore } from "@/store/modules/jidiSelectEvent";
 import EnvironmentalQualityTwoLayers from "./TwoLayers/EnvironmentalQualityTwoLayers.vue"
+import { useDraggable } from '@/utils/drag';
+
 // 定义组件名（便于调试和递归）
 defineOptions({
     name: 'EnvironmentalQuality'
@@ -774,7 +776,7 @@ onUnmounted(() => {
 // 弹框相关状态
 const modalVisible = ref(false);
 const clickedBarData = ref<{ name: string; current: number | null; lastYear: number | null; selectedId?: string } | null>(null);
-
+useDraggable(modalVisible, { boundary: true, resetOnOpen: true });
 
 
 </script>
diff --git a/frontend/src/modules/GYZLLB/index.vue b/frontend/src/modules/GYZLLB/index.vue
index 91f70884..bfa7ed5d 100644
--- a/frontend/src/modules/GYZLLB/index.vue
+++ b/frontend/src/modules/GYZLLB/index.vue
@@ -1,77 +1,60 @@
 <!-- SidePanelItem.vue -->
 <template>
-    <SidePanelItem :title="title" :datetimePicker="datetimePicker" @update-values="handlePanelChange1">
-        <!-- 加载状态 -->
-        <div v-if="loading" class="loading-container">
-            <a-spin tip="加载中..." />
-        </div>
-        
-        <!-- 无数据状态 -->
-        <div v-else-if="!hasData" class="empty-container">
-            <a-empty description="暂无数据" />
-        </div>
-        
-        <!-- 正常显示图表 -->
-        <div v-else class="container" @mouseenter="handleMouseEnter" @mouseleave="handleMouseLeave">
-            <!-- 跑马灯轨道容器 -->
-            <div class="carousel-track" :class="{ 'no-transition': isTransitioning }"
-                :style="{ transform: `translateX(-${currentIndex * 100}%)` }">
-                <!-- 遍历所有图表项（包含克隆项） -->
-                <div v-for="(item, index) in renderChartData" :key="index" class="carousel-item">
-                    <div class="pie-chart-container">
-                        <!-- 图表区域 -->
-                        <div :ref="el => setChartRef(el, index)" class="chart"></div>
-                        <!-- 标题 -->
-                        <div class="title">{{ item.title }}</div>
-                    </div>
-                </div>
-            </div>
-        </div>
+  <SidePanelItem
+    :title="title"
+    :datetimePicker="datetimePicker"
+    @update-values="handlePanelChange1"
+  >
+    <!-- 加载状态 -->
+    <div v-if="loading" class="loading-container">
+      <a-spin tip="加载中..." />
+    </div>
 
-        <!-- 详情弹框 -->
-        <a-modal
-            v-model:open="modalVisible"
-            :title="modalTitle"
-            width="1650px"
-            :footer="null"
-            @cancel="handleModalClose"
+    <!-- 无数据状态 -->
+    <div v-else-if="!hasData" class="empty-container">
+      <a-empty description="暂无数据" />
+    </div>
+
+    <!-- 正常显示图表 -->
+    <div
+      v-else
+      class="container"
+      @mouseenter="handleMouseEnter"
+      @mouseleave="handleMouseLeave"
+    >
+      <!-- 跑马灯轨道容器 -->
+      <div
+        class="carousel-track"
+        :class="{ 'no-transition': isTransitioning }"
+        :style="{ transform: `translateX(-${currentIndex * 100}%)` }"
+      >
+        <!-- 遍历所有图表项（包含克隆项） -->
+        <div
+          v-for="(item, index) in renderChartData"
+          :key="index"
+          class="carousel-item"
         >
-            <div class="modal-content">
-                <a-descriptions bordered :column="2" size="small">
-                    <a-descriptions-item label="年份">
-                        {{ modalData.year }}
-                    </a-descriptions-item>
-                    <a-descriptions-item label="流域/设施">
-                        {{ modalData.basinName }}
-                    </a-descriptions-item>
-                    <a-descriptions-item label="鱼类总数">
-                        <span style="color: #1890ff; font-weight: bold;">
-                            {{ modalData.totalCount }} {{ getUnit() }}
-                        </span>
-                    </a-descriptions-item>
-                    <a-descriptions-item label="">
-                        {{ modalData.baseid }} 
-                    </a-descriptions-item>
-                </a-descriptions>
+          <div class="pie-chart-container">
+            <!-- 图表区域 -->
+            <div :ref="el => setChartRef(el, index)" class="chart"></div>
+            <!-- 标题 -->
+            <div class="title">{{ item.title }}</div>
+          </div>
+        </div>
+      </div>
+    </div>
 
-                <a-divider orientation="left">鱼类分布详情</a-divider>
-                
-                <a-table
-                    :columns="fishColumns"
-                    :data-source="modalData.fishList"
-                    :pagination="false"
-                    size="small"
-                    :scroll="{ y: 300 }"
-                >
-                    <template #bodyCell="{ column, record }">
-                        <template v-if="column.key === 'percentage'">
-                            {{ record.percentage }}%
-                        </template>
-                    </template>
-                </a-table>
-            </div>
-        </a-modal>
-    </SidePanelItem>
+    <!-- 详情弹框 -->
+    <a-modal
+      v-model:open="modalVisible"
+      :title="'过鱼监测数据'"
+      width="1650px"
+      :footer="null"
+      @cancel="handleModalClose"
+    >
+      <FishResource v-if="modalVisible" :modalData = "modalData"  />
+    </a-modal>
+  </SidePanelItem>
 </template>
 
 <script lang="ts" setup>
@@ -80,46 +63,49 @@ import * as echarts from 'echarts';
 import type { ECharts } from 'echarts';
 import SidePanelItem from '@/components/SidePanelItem/index.vue';
 import { yearGetYearFpStatistics } from '@/api/gyss';
-import { useJidiSelectEventStore } from "@/store/modules/jidiSelectEvent";
+import { useJidiSelectEventStore } from '@/store/modules/jidiSelectEvent';
 import type { ColumnsType } from 'ant-design-vue/es/table/Table';
+import { useDraggable } from '@/utils/drag';
+import FishResource from '@/components/FishResource/index.vue';
 
 // API 数据类型定义
 interface FpFtpStatisticsVo {
-    baseId: string;
-    baseName: string;
-    ftp: string;
-    fishName: string;
-    fcnt: number;
+  baseId: string;
+  baseName: string;
+  ftp: string;
+  fishName: string;
+  fcnt: number;
 }
 
 interface BasinData {
-    fpCount: number;
-    baseId: string;
-    baseName: string;
-    fpFtpStatitcsVos: FpFtpStatisticsVo[];
+  fpCount: number;
+  baseId: string;
+  baseName: string;
+  fpFtpStatitcsVos: FpFtpStatisticsVo[];
 }
 
 // 定义组件名（便于调试和递归）
 defineOptions({
-    name: 'GYZLLB'
+  name: 'GYZLLB'
 });
 
 const JidiSelectEventStore = useJidiSelectEventStore();
 const baseid = ref('');
 
 const props = defineProps({
-    title: { // 标题
-        type: String,
-        default: '过鱼总量'
-    },
+  title: {
+    // 标题
+    type: String,
+    default: '过鱼总量'
+  }
 });
 
 const datetimePicker = ref({
-    show: true,
-    value: `${new Date().getFullYear() - 1}`, // 上一年
-    format: 'YYYY',
-    picker: 'year' as const,
-    options: []
+  show: true,
+  value: `${new Date().getFullYear() - 1}`, // 上一年
+  format: 'YYYY',
+  picker: 'year' as const,
+  options: []
 });
 
 // 状态管理
@@ -132,9 +118,9 @@ const currentYear = ref<string>(''); // 当前选中的年份
 
 // 图表相关
 interface ChartDataItem {
-    title: string;
-    baseid?: string; // 流域ID（用于标识该图表所属的流域）
-    data: Array<{ name: string; value: number; baseId?: string }>; // 扩展数据项，支持存储流域ID
+  title: string;
+  baseid?: string; // 流域ID（用于标识该图表所属的流域）
+  data: Array<{ name: string; value: number; baseId?: string; ftp?: string }>;
 }
 
 // 原始图表数据（多组数据用于跑马灯）
@@ -151,58 +137,63 @@ let timer: any = null;
 
 // 弹框相关状态
 const modalVisible = ref(false);
+useDraggable(modalVisible, { boundary: true, resetOnOpen: true });
 const modalTitle = ref('');
 const modalData = ref<{
-    year: string;
-    basinName: string;
-    baseid?: string; // 添加流域ID
-    totalCount: number;
-    fishTypes: number;
-    fishList: Array<{
-        name: string;
-        value: number;
-        percentage: string;
-    }>;
+  year: string;
+  basinName: string;
+  baseid?: string;
+  totalCount: number;
+  fishTypes: number;
+  fishName?: string;
+  ftp?: string;
+  fishList: Array<{
+    name: string;
+    value: number;
+    percentage: string;
+  }>;
 }>({
-    year: '',
-    basinName: '',
-    baseid: '',
-    totalCount: 0,
-    fishTypes: 0,
-    fishList: []
+  year: '',
+  basinName: '',
+  baseid: '',
+  totalCount: 0,
+  fishTypes: 0,
+  fishName: '',
+  ftp: '',
+  fishList: []
 });
 
 // 鱼类列表表格列定义
 const fishColumns: ColumnsType = [
-    {
-        title: '鱼类名称',
-        dataIndex: 'name',
-        key: 'name',
-        width: 150
-    },
-    {
-        title: '数量',
-        dataIndex: 'value',
-        key: 'value',
-        width: 120,
-        customRender: ({ text }: any) => `${text} ${getUnit()}`
-    },
-    {
-        title: '占比',
-        dataIndex: 'percentage',
-        key: 'percentage',
-        width: 100
-    }
+  {
+    title: '鱼类名称',
+    dataIndex: 'name',
+    key: 'name',
+    width: 150
+  },
+  {
+    title: '数量',
+    dataIndex: 'value',
+    key: 'value',
+    width: 120,
+    customRender: ({ text }: any) => `${text} ${getUnit()}`
+  },
+  {
+    title: '占比',
+    dataIndex: 'percentage',
+    key: 'percentage',
+    width: 100
+  }
 ];
 
 /**
  * 停止自动轮播
  */
 const stopAutoPlay = () => {
-    if (timer) {
-        clearInterval(timer);
-        timer = null;
-    }
+  if (timer) {
+    clearInterval(timer);
+    timer = null;
+  }
 };
 
 // 鼠标悬停状态
@@ -217,535 +208,556 @@ const chartRefs = ref<(HTMLElement | null)[]>([]);
 
 // 设置图表ref
 const setChartRef = (el: any, index: number) => {
-    if (el) {
-        chartRefs.value[index] = el;
-    }
+  if (el) {
+    chartRefs.value[index] = el;
+  }
 };
 
 // 单位配置（模拟函数）
 const getUnitConfigByCode = (code: string, type: string): { unit: string } => {
-    if (type === 'FCNT') {
-        return { unit: '尾' };
-    } else if (type === 'SL') {
-        return { unit: '万尾' };
-    }
+  if (type === 'FCNT') {
     return { unit: '尾' };
+  } else if (type === 'SL') {
+    return { unit: '万尾' };
+  }
+  return { unit: '尾' };
 };
 
 // 生成随机颜色（根据名称）- 生成适中亮度颜色
 const generateRandomColor = (names: string[]): string[] => {
-    const colors: string[] = [];
+  const colors: string[] = [];
 
-    names.forEach(() => {
-        // 生成 HSL 颜色，控制饱和度和亮度在适中范围
-        // H: 0-360 (色相)
-        // S: 40-70% (饱和度，避免过于鲜艳或灰暗)
-        // L: 45-65% (亮度，避免过亮或过暗)
-        const hue = Math.floor(Math.random() * 360);
-        const saturation = 40 + Math.floor(Math.random() * 30); // 40-70%
-        const lightness = 45 + Math.floor(Math.random() * 20);  // 45-65%
+  names.forEach(() => {
+    // 生成 HSL 颜色，控制饱和度和亮度在适中范围
+    // H: 0-360 (色相)
+    // S: 40-70% (饱和度，避免过于鲜艳或灰暗)
+    // L: 45-65% (亮度，避免过亮或过暗)
+    const hue = Math.floor(Math.random() * 360);
+    const saturation = 40 + Math.floor(Math.random() * 30); // 40-70%
+    const lightness = 45 + Math.floor(Math.random() * 20); // 45-65%
 
-        // 将 HSL 转换为 HEX
-        const h = hue / 360;
-        const s = saturation / 100;
-        const l = lightness / 100;
+    // 将 HSL 转换为 HEX
+    const h = hue / 360;
+    const s = saturation / 100;
+    const l = lightness / 100;
 
-        let r, g, b;
+    let r, g, b;
 
-        if (s === 0) {
-            r = g = b = l;
-        } else {
-            const hue2rgb = (p: number, q: number, t: number) => {
-                if (t < 0) t += 1;
-                if (t > 1) t -= 1;
-                if (t < 1 / 6) return p + (q - p) * 6 * t;
-                if (t < 1 / 2) return q;
-                if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6;
-                return p;
-            };
+    if (s === 0) {
+      r = g = b = l;
+    } else {
+      const hue2rgb = (p: number, q: number, t: number) => {
+        if (t < 0) t += 1;
+        if (t > 1) t -= 1;
+        if (t < 1 / 6) return p + (q - p) * 6 * t;
+        if (t < 1 / 2) return q;
+        if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6;
+        return p;
+      };
 
-            const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
-            const p = 2 * l - q;
+      const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
+      const p = 2 * l - q;
 
-            r = hue2rgb(p, q, h + 1 / 3);
-            g = hue2rgb(p, q, h);
-            b = hue2rgb(p, q, h - 1 / 3);
-        }
+      r = hue2rgb(p, q, h + 1 / 3);
+      g = hue2rgb(p, q, h);
+      b = hue2rgb(p, q, h - 1 / 3);
+    }
 
-        const toHex = (x: number) => {
-            const hex = Math.round(x * 255).toString(16);
-            return hex.length === 1 ? '0' + hex : hex;
-        };
+    const toHex = (x: number) => {
+      const hex = Math.round(x * 255).toString(16);
+      return hex.length === 1 ? '0' + hex : hex;
+    };
 
-        colors.push(`#${toHex(r)}${toHex(g)}${toHex(b)}`);
-    });
+    colors.push(`#${toHex(r)}${toHex(g)}${toHex(b)}`);
+  });
 
-    return colors;
+  return colors;
 };
 
 // 计算总量
 const getTotalAmount = (data: Array<{ name: string; value: number }>) => {
-    return data.reduce((sum, item) => sum + item.value, 0);
+  return data.reduce((sum, item) => sum + item.value, 0);
 };
 
 // 获取单位
 const getUnit = () => {
-    const fyunit = getUnitConfigByCode('FPSSRL_R', 'FCNT')?.unit ?? '尾';
-    return fyunit;
+  const fyunit = getUnitConfigByCode('FPSSRL_R', 'FCNT')?.unit ?? '尾';
+  return fyunit;
 };
 
 // 初始化单个图表
 const initChart = (index: number) => {
-    const chartRef = chartRefs.value[index];
-    if (!chartRef) return;
+  const chartRef = chartRefs.value[index];
+  if (!chartRef) return;
 
-    const rect = chartRef.getBoundingClientRect();
-    if (rect.width === 0 || rect.height === 0) {
-        console.warn(`图表容器尺寸为0，延迟重试... 索引: ${index}`);
-        setTimeout(() => initChart(index), 100);
-        return;
-    }
+  const rect = chartRef.getBoundingClientRect();
+  if (rect.width === 0 || rect.height === 0) {
+    console.warn(`图表容器尺寸为0，延迟重试... 索引: ${index}`);
+    setTimeout(() => initChart(index), 100);
+    return;
+  }
 
-    const chartInstance = echarts.init(chartRef);
-    chartInstances.value[index] = chartInstance;
-    
-    // 添加点击事件监听
-    chartInstance.on('click', (params: any) => {
-        handleChartClick(renderChartData.value[index], index, params);
-    });
-    
-    updateChart(index);
+  const chartInstance = echarts.init(chartRef);
+  chartInstances.value[index] = chartInstance;
+
+  // 添加点击事件监听
+  chartInstance.on('click', (params: any) => {
+    handleChartClick(renderChartData.value[index], index, params);
+  });
+
+  updateChart(index);
 };
 
 // 更新单个图表配置
 const updateChart = (index: number) => {
-    const chartInstance = chartInstances.value[index];
-    const chartData = renderChartData.value[index];
+  const chartInstance = chartInstances.value[index];
+  const chartData = renderChartData.value[index];
 
-    if (!chartInstance || !chartData) return;
+  if (!chartInstance || !chartData) return;
 
-    const colorNames = chartData.data.map(item => item.name);
-    const colors = generateRandomColor(colorNames);
-    const totalAmount = getTotalAmount(chartData.data);
-    const unit = getUnit();
+  const colorNames = chartData.data.map(item => item.name);
+  const colors = generateRandomColor(colorNames);
+  const totalAmount = getTotalAmount(chartData.data);
+  const unit = getUnit();
 
-    const option: echarts.EChartsOption = {
-        tooltip: {
-            trigger: 'item',
-            formatter: `{b}: {c} ${unit} ({d}%)`,
-            backgroundColor: 'rgba(50, 50, 50, 0.9)',
-            borderColor: 'transparent',
-            textStyle: {
-                color: '#fff',
-                fontSize: 12
-            }
+  const option: echarts.EChartsOption = {
+    tooltip: {
+      trigger: 'item',
+      formatter: `{b}: {c} ${unit} ({d}%)`,
+      backgroundColor: 'rgba(50, 50, 50, 0.9)',
+      borderColor: 'transparent',
+      textStyle: {
+        color: '#fff',
+        fontSize: 12
+      }
+    },
+    title: [
+      {
+        text: `${totalAmount}`,
+        subtext: `总量(${unit})`,
+        left: '29%',
+        top: '45%',
+        textAlign: 'center',
+        textVerticalAlign: 'middle',
+        textStyle: {
+          fontSize: 24,
+          fontWeight: 'bold',
+          color: '#333'
         },
-        title: [
-            {
-                text: `${totalAmount}`,
-                subtext: `总量(${unit})`,
-                left: '29%',
-                top: '45%',
-                textAlign: 'center',
-                textVerticalAlign: 'middle',
-                textStyle: {
-                    fontSize: 24,
-                    fontWeight: 'bold',
-                    color: '#333',
-                },
-                subtextStyle: {
-                    fontSize: 12,
-                    color: '#999',
-                    align: 'center',
-                }
-            }
-        ],
-        legend: {
-            type: 'scroll',
-            orient: 'vertical',
-            right: 5,
-            top: 'middle',
-            bottom: 25,
-            itemWidth: 25,
-            itemHeight: 13,
-            itemGap: 8,
-            pageIconColor: '#333',
-            pageIconInactiveColor: '#ccc',
-            pageIconSize: 12,
-            pageFormatter: '{current}/{total}',
-            formatter: function (name: string) {
-                const found = chartData.data.find(item => item.name === name);
-                const value = found ? found.value : '-';
-                const maxLength = 7;
-                const truncatedName = name.length > maxLength ? name.substring(0, maxLength) + '...' : name;
-                return `${truncatedName} ${value}${unit}`;
-            },
-            textStyle: {
-                fontSize: 12,
-                color: '#666'
-            }
+        subtextStyle: {
+          fontSize: 12,
+          color: '#999',
+          align: 'center'
+        }
+      }
+    ],
+    legend: {
+      type: 'scroll',
+      orient: 'vertical',
+      right: 5,
+      top: 'middle',
+      bottom: 25,
+      itemWidth: 25,
+      itemHeight: 13,
+      itemGap: 8,
+      pageIconColor: '#333',
+      pageIconInactiveColor: '#ccc',
+      pageIconSize: 12,
+      pageFormatter: '{current}/{total}',
+      formatter: function (name: string) {
+        const found = chartData.data.find(item => item.name === name);
+        const value = found ? found.value : '-';
+        const maxLength = 7;
+        const truncatedName =
+          name.length > maxLength ? name.substring(0, maxLength) + '...' : name;
+        return `${truncatedName} ${value}${unit}`;
+      },
+      textStyle: {
+        fontSize: 12,
+        color: '#666'
+      }
+    },
+    series: [
+      {
+        type: 'pie',
+        radius: ['50%', '70%'],
+        center: ['30%', '50%'],
+        avoidLabelOverlap: false,
+        itemStyle: {
+          borderRadius: 4,
+          borderColor: '#fff',
+          borderWidth: 2
         },
-        series: [
-            {
-                type: 'pie',
-                radius: ['50%', '70%'],
-                center: ['30%', '50%'],
-                avoidLabelOverlap: false,
-                itemStyle: {
-                    borderRadius: 4,
-                    borderColor: '#fff',
-                    borderWidth: 2
-                },
-                label: {
-                    show: false
-                },
-                emphasis: {
-                    label: {
-                        show: false
-                    },
-                    itemStyle: {
-                        shadowBlur: 10,
-                        shadowOffsetX: 0,
-                        shadowColor: 'rgba(0, 0, 0, 0.3)'
-                    }
-                },
-                labelLine: {
-                    show: false
-                },
-                data: chartData.data.map((item, idx) => ({
-                    ...item,
-                    itemStyle: {
-                        color: colors[idx]
-                    }
-                }))
-            }
-        ]
-    };
+        label: {
+          show: false
+        },
+        emphasis: {
+          label: {
+            show: false
+          },
+          itemStyle: {
+            shadowBlur: 10,
+            shadowOffsetX: 0,
+            shadowColor: 'rgba(0, 0, 0, 0.3)'
+          }
+        },
+        labelLine: {
+          show: false
+        },
+        data: chartData.data.map((item, idx) => ({
+          ...item,
+          itemStyle: {
+            color: colors[idx]
+          }
+        }))
+      }
+    ]
+  };
 
-    chartInstance.setOption(option, true);
+  chartInstance.setOption(option, true);
 };
 
 // 处理窗口大小变化
 const handleResize = () => {
-    chartInstances.value.forEach(instance => {
-        if (instance) {
-            instance.resize();
-        }
-    });
+  chartInstances.value.forEach(instance => {
+    if (instance) {
+      instance.resize();
+    }
+  });
 };
 
 // 初始化渲染数组（克隆首尾项）
 const initRenderData = () => {
-    const length = originalChartData.value.length;
-    if (length === 0) return;
+  const length = originalChartData.value.length;
+  if (length === 0) return;
 
-    renderChartData.value = [
-        originalChartData.value[length - 1], // 克隆最后一项
-        ...originalChartData.value,           // 原始数据
-        originalChartData.value[0]            // 克隆第一项
-    ];
+  renderChartData.value = [
+    originalChartData.value[length - 1], // 克隆最后一项
+    ...originalChartData.value, // 原始数据
+    originalChartData.value[0] // 克隆第一项
+  ];
 
-    // 初始化图表实例数组
-    chartInstances.value = new Array(renderChartData.value.length).fill(null);
-    chartRefs.value = new Array(renderChartData.value.length).fill(null);
+  // 初始化图表实例数组
+  chartInstances.value = new Array(renderChartData.value.length).fill(null);
+  chartRefs.value = new Array(renderChartData.value.length).fill(null);
 };
 
 // 启动自动轮播
 const startAutoPlay = () => {
-    if (timer) clearInterval(timer);
-    timer = setInterval(() => {
-        if (!isHovering.value && !isTransitioning.value) {
-            nextSlide();
-        }
-    }, 4000);
+  if (timer) clearInterval(timer);
+  timer = setInterval(() => {
+    if (!isHovering.value && !isTransitioning.value) {
+      nextSlide();
+    }
+  }, 4000);
 };
 
 // 切换到下一张
 const nextSlide = () => {
-    currentIndex.value++;
+  currentIndex.value++;
 
-    // 延迟检查是否需要无缝跳转
-    setTimeout(() => {
-        checkSeamlessJump();
-    }, 500); // 与transition时间一致
+  // 延迟检查是否需要无缝跳转
+  setTimeout(() => {
+    checkSeamlessJump();
+  }, 500); // 与transition时间一致
 };
 
 // 检查是否需要无缝跳转（克隆项处理）
 const checkSeamlessJump = () => {
-    const realLength = originalChartData.value.length;
+  const realLength = originalChartData.value.length;
 
-    // 如果到达克隆的最后一项（索引 = realLength + 1）
-    if (currentIndex.value >= realLength + 1) {
-        // 1. 禁用过渡动画，实现瞬间跳转
-        isTransitioning.value = true;
+  // 如果到达克隆的最后一项（索引 = realLength + 1）
+  if (currentIndex.value >= realLength + 1) {
+    // 1. 禁用过渡动画，实现瞬间跳转
+    isTransitioning.value = true;
 
-        // 2. 瞬间跳转到真实的第二项（索引1），用户看不到跳变
-        currentIndex.value = 1;
+    // 2. 瞬间跳转到真实的第二项（索引1），用户看不到跳变
+    currentIndex.value = 1;
 
-        // 3. 等待两帧后恢复过渡动画（确保DOM已更新）
-        requestAnimationFrame(() => {
-            requestAnimationFrame(() => {
-                isTransitioning.value = false;
-            });
-        });
-    }
+    // 3. 等待两帧后恢复过渡动画（确保DOM已更新）
+    requestAnimationFrame(() => {
+      requestAnimationFrame(() => {
+        isTransitioning.value = false;
+      });
+    });
+  }
 };
 
 // 处理鼠标进入
 const handleMouseEnter = () => {
-    isHovering.value = true;
+  isHovering.value = true;
 };
 
 // 处理鼠标离开
 const handleMouseLeave = () => {
-    isHovering.value = false;
+  isHovering.value = false;
 };
 
 // 页面加载时执行
 onMounted(async () => {
-    initRenderData();
+  initRenderData();
 
-    // 等待DOM渲染完成
-    await nextTick();
-    setTimeout(() => {
-        // 初始化所有图表
-        renderChartData.value.forEach((_, index) => {
-            initChart(index);
-        });
+  // 等待DOM渲染完成
+  await nextTick();
+  setTimeout(() => {
+    // 初始化所有图表
+    renderChartData.value.forEach((_, index) => {
+      initChart(index);
+    });
 
-        // 监听窗口大小变化
-        window.addEventListener('resize', handleResize);
+    // 监听窗口大小变化
+    window.addEventListener('resize', handleResize);
 
-        // 启动自动轮播
-        startAutoPlay();
-    }, 100);
+    // 启动自动轮播
+    startAutoPlay();
+  }, 100);
 });
 
 // 组件卸载时清理
 onUnmounted(() => {
-    if (timer) clearInterval(timer);
+  if (timer) clearInterval(timer);
 
-    // 销毁所有图表实例
-    chartInstances.value.forEach(instance => {
-        if (instance) {
-            instance.dispose();
-        }
-    });
+  // 销毁所有图表实例
+  chartInstances.value.forEach(instance => {
+    if (instance) {
+      instance.dispose();
+    }
+  });
 
-    window.removeEventListener('resize', handleResize);
+  window.removeEventListener('resize', handleResize);
 });
 
 /**
  * 构建单一流域的图表数据
  */
-const buildSingleBasinChartData = (basin: BasinData, year: string): ChartDataItem => {
-    return {
-        title: `${basin.baseName}`,
-        baseid: basin.baseId, // 保存流域ID
-        data: basin.fpFtpStatitcsVos.map((fish: FpFtpStatisticsVo) => ({
-            name: fish.fishName,
-            value: fish.fcnt
-        }))
-    };
+const buildSingleBasinChartData = (
+  basin: BasinData,
+  year: string
+): ChartDataItem => {
+  return {
+    title: `${basin.baseName}`,
+    baseid: basin.baseId, // 保存流域ID
+    data: basin.fpFtpStatitcsVos.map((fish: FpFtpStatisticsVo) => ({
+      name: fish.fishName,
+      value: fish.fcnt,
+      ftp: fish.ftp
+    }))
+  };
 };
 
 /**
  * 构建全部流域的图表数据（包含流域对比图和各流域鱼类分布图）
  */
-const buildAllBasinsChartData = (apiData: BasinData[], year: string): ChartDataItem[] => {
-    const charts: ChartDataItem[] = [];
-    
-    // 1️⃣ 第一张：各流域总量对比图（使用 fpCount）
-    const basinComparisonData = apiData
-        .filter(basin => basin.fpFtpStatitcsVos && basin.fpFtpStatitcsVos.length > 0)
-        .map(basin => ({
-            name: basin.baseName,
-            value: basin.fpCount,
-            baseId: basin.baseId // 添加流域ID，用于点击事件传参
-        }));
-    
-    if (basinComparisonData.length > 0) {
-        charts.push({
-            title: `总量`,
-            baseid: 'all', // 标记为总量图表
-            data: basinComparisonData
-        });
-    }
-    
-    // 2️⃣ 后续：每个流域的鱼类分布图（使用 fcnt）
-    apiData.forEach(basin => {
-        if (basin.fpFtpStatitcsVos && basin.fpFtpStatitcsVos.length > 0) {
-            charts.push(buildSingleBasinChartData(basin, year));
-        }
+const buildAllBasinsChartData = (
+  apiData: BasinData[],
+  year: string
+): ChartDataItem[] => {
+  const charts: ChartDataItem[] = [];
+
+  // 1️⃣ 第一张：各流域总量对比图（使用 fpCount）
+  const basinComparisonData = apiData
+    .filter(
+      basin => basin.fpFtpStatitcsVos && basin.fpFtpStatitcsVos.length > 0
+    )
+    .map(basin => ({
+      name: basin.baseName,
+      value: basin.fpCount,
+      baseId: basin.baseId // 添加流域ID，用于点击事件传参
+    }));
+
+  if (basinComparisonData.length > 0) {
+    charts.push({
+      title: `总量`,
+      baseid: 'all', // 标记为总量图表
+      data: basinComparisonData
     });
-    
-    return charts;
+  }
+
+  // 2️⃣ 后续：每个流域的鱼类分布图（使用 fcnt）
+  apiData.forEach(basin => {
+    if (basin.fpFtpStatitcsVos && basin.fpFtpStatitcsVos.length > 0) {
+      charts.push(buildSingleBasinChartData(basin, year));
+    }
+  });
+
+  return charts;
 };
 
 /**
  * 重新构建图表实例（用于完全重建）
  */
 const rebuildCharts = async () => {
-    // 销毁旧图表实例
-    chartInstances.value.forEach(instance => {
-        if (instance) {
-            instance.dispose();
-        }
+  // 销毁旧图表实例
+  chartInstances.value.forEach(instance => {
+    if (instance) {
+      instance.dispose();
+    }
+  });
+  chartInstances.value = [];
+
+  // 重新初始化渲染数据
+  initRenderData();
+
+  // 等待 DOM 更新
+  await nextTick();
+
+  // 重新初始化所有图表
+  setTimeout(() => {
+    renderChartData.value.forEach((_, index) => {
+      initChart(index);
     });
-    chartInstances.value = [];
-    
-    // 重新初始化渲染数据
-    initRenderData();
-    
-    // 等待 DOM 更新
-    await nextTick();
-    
-    // 重新初始化所有图表
-    setTimeout(() => {
-        renderChartData.value.forEach((_, index) => {
-            initChart(index);
-        });
-    }, 100);
+  }, 100);
 };
 
 /**
  * 控制跑马灯的启停
  */
 const controlCarousel = () => {
-    // 判断是否需要停止跑马灯
-    const shouldStop = baseid.value !== 'all' || originalChartData.value.length <= 1;
-    
-    if (shouldStop) {
-        stopAutoPlay(); // 停止轮播，但不重置 currentIndex
-    } else {
-        startAutoPlay(); // 启动轮播
-    }
+  // 判断是否需要停止跑马灯
+  const shouldStop =
+    baseid.value !== 'all' || originalChartData.value.length <= 1;
+
+  if (shouldStop) {
+    stopAutoPlay(); // 停止轮播，但不重置 currentIndex
+  } else {
+    startAutoPlay(); // 启动轮播
+  }
 };
 
 /**
  * 根据当前 baseid 更新图表显示（不请求 API）
  */
 const updateChartByBaseid = () => {
-    if (!cachedApiData.value.length) {
-        hasData.value = false;
-        originalChartData.value = [];
-        renderChartData.value = []; // 清空渲染数据
-        stopAutoPlay(); // 停止轮播
-        return;
+  if (!cachedApiData.value.length) {
+    hasData.value = false;
+    originalChartData.value = [];
+    renderChartData.value = []; // 清空渲染数据
+    stopAutoPlay(); // 停止轮播
+    return;
+  }
+
+  if (baseid.value === 'all') {
+    // === 全部流域模式 ===
+    originalChartData.value = buildAllBasinsChartData(
+      cachedApiData.value,
+      currentYear.value
+    );
+  } else {
+    // === 单一流域模式 ===
+    const targetBasin = cachedApiData.value.find(
+      item => item.baseId === baseid.value
+    );
+
+    if (
+      !targetBasin ||
+      !targetBasin.fpFtpStatitcsVos ||
+      targetBasin.fpFtpStatitcsVos.length === 0
+    ) {
+      hasData.value = false;
+      originalChartData.value = [];
+      renderChartData.value = []; // 清空渲染数据
+      stopAutoPlay(); // 停止轮播
+      return;
     }
-    
-    if (baseid.value === 'all') {
-        // === 全部流域模式 ===
-        originalChartData.value = buildAllBasinsChartData(cachedApiData.value, currentYear.value);
-    } else {
-        // === 单一流域模式 ===
-        const targetBasin = cachedApiData.value.find(item => item.baseId === baseid.value);
-        
-        if (!targetBasin || !targetBasin.fpFtpStatitcsVos || targetBasin.fpFtpStatitcsVos.length === 0) {
-            hasData.value = false;
-            originalChartData.value = [];
-            renderChartData.value = []; // 清空渲染数据
-            stopAutoPlay(); // 停止轮播
-            return;
-        }
-        
-        originalChartData.value = [buildSingleBasinChartData(targetBasin, currentYear.value)];
-    }
-    
-    // 先构建渲染数据
-    initRenderData();
-    
-    // 再设置为有数据状态
-    hasData.value = true;
-    
-    // 等待 DOM 更新后初始化图表
-    nextTick(() => {
-        // 销毁旧图表实例
-        chartInstances.value.forEach(instance => {
-            if (instance) {
-                instance.dispose();
-            }
-        });
-        chartInstances.value = new Array(renderChartData.value.length).fill(null);
-        chartRefs.value = new Array(renderChartData.value.length).fill(null);
-        
-        setTimeout(() => {
-            renderChartData.value.forEach((_, index) => {
-                initChart(index);
-            });
-        }, 100);
+
+    originalChartData.value = [
+      buildSingleBasinChartData(targetBasin, currentYear.value)
+    ];
+  }
+
+  // 先构建渲染数据
+  initRenderData();
+
+  // 再设置为有数据状态
+  hasData.value = true;
+
+  // 等待 DOM 更新后初始化图表
+  nextTick(() => {
+    // 销毁旧图表实例
+    chartInstances.value.forEach(instance => {
+      if (instance) {
+        instance.dispose();
+      }
     });
-    
-    controlCarousel(); // 控制跑马灯启停
+    chartInstances.value = new Array(renderChartData.value.length).fill(null);
+    chartRefs.value = new Array(renderChartData.value.length).fill(null);
+
+    setTimeout(() => {
+      renderChartData.value.forEach((_, index) => {
+        initChart(index);
+      });
+    }, 100);
+  });
+
+  controlCarousel(); // 控制跑马灯启停
 };
 
 /**
  * 获取并处理图表数据
  */
 const getechartsdata = async (yearOne: string) => {
-    if (!baseid.value) {
-        hasData.value = false;
-        originalChartData.value = [];
-        renderChartData.value = [];
-        stopAutoPlay();
-        return;
-    }
+  if (!baseid.value) {
+    hasData.value = false;
+    originalChartData.value = [];
+    renderChartData.value = [];
+    stopAutoPlay();
+    return;
+  }
 
-    // 如果年份没变，且有缓存数据，直接使用缓存
-    if (yearOne === currentYear.value && cachedApiData.value.length > 0) {
-        updateChartByBaseid();
-        return;
-    }
+  // 如果年份没变，且有缓存数据，直接使用缓存
+  if (yearOne === currentYear.value && cachedApiData.value.length > 0) {
+    updateChartByBaseid();
+    return;
+  }
 
-    loading.value = true;
-    
-    try {
-        const params = { year: yearOne };
-        const res = await yearGetYearFpStatistics(params);
-        // axios 返回的结构：res.data 才是真正的业务数据
-        const responseData = res.data;
-        if (!responseData || responseData.length === 0) {
-            console.warn('无有效数据');
-            hasData.value = false;
-            originalChartData.value = [];
-            renderChartData.value = [];
-            cachedApiData.value = [];
-            currentYear.value = '';
-            stopAutoPlay();
-            return;
-        }
-        // 
-        // 缓存全量数据
-        cachedApiData.value = responseData;
-        currentYear.value = yearOne;
-        // 根据 baseid 更新显示
-        updateChartByBaseid();
+  loading.value = true;
 
-    } catch (error) {
-        console.error('获取过鱼统计数据失败:', error);
-        hasData.value = false;
-        originalChartData.value = [];
-        renderChartData.value = [];
-        cachedApiData.value = [];
-        currentYear.value = '';
-        stopAutoPlay();
-    } finally {
-        loading.value = false;
+  try {
+    const params = { year: yearOne };
+    const res = await yearGetYearFpStatistics(params);
+    // axios 返回的结构：res.data 才是真正的业务数据
+    const responseData = res.data;
+    if (!responseData || responseData.length === 0) {
+      console.warn('无有效数据');
+      hasData.value = false;
+      originalChartData.value = [];
+      renderChartData.value = [];
+      cachedApiData.value = [];
+      currentYear.value = '';
+      stopAutoPlay();
+      return;
     }
+    //
+    // 缓存全量数据
+    cachedApiData.value = responseData;
+    currentYear.value = yearOne;
+    // 根据 baseid 更新显示
+    updateChartByBaseid();
+  } catch (error) {
+    console.error('获取过鱼统计数据失败:', error);
+    hasData.value = false;
+    originalChartData.value = [];
+    renderChartData.value = [];
+    cachedApiData.value = [];
+    currentYear.value = '';
+    stopAutoPlay();
+  } finally {
+    loading.value = false;
+  }
 };
 
 const handlePanelChange1 = (data: any) => {
-    if (data.datetime) {
-        getechartsdata(data.datetime); // 年份变化，请求 API
-    } else {
-        // 置空图表数据，并显示暂无数据
-        hasData.value = false;
-        originalChartData.value = [];
-        renderChartData.value = []; // 清空渲染数据
-        cachedApiData.value = []; // 清空缓存
-        currentYear.value = '';
-        stopAutoPlay(); // 停止轮播
-    }
+  if (data.datetime) {
+    getechartsdata(data.datetime); // 年份变化，请求 API
+  } else {
+    // 置空图表数据，并显示暂无数据
+    hasData.value = false;
+    originalChartData.value = [];
+    renderChartData.value = []; // 清空渲染数据
+    cachedApiData.value = []; // 清空缓存
+    currentYear.value = '';
+    stopAutoPlay(); // 停止轮播
+  }
 };
 
 /**
@@ -755,145 +767,147 @@ const handlePanelChange1 = (data: any) => {
  * @param params ECharts 点击事件参数（可选）
  */
 const handleChartClick = (item: ChartDataItem, index: number, params?: any) => {
-    // 计算总数量和百分比
-    const totalCount = getTotalAmount(item.data);
-    const fishList = item.data.map(fish => ({
-        name: fish.name,
-        value: fish.value,
-        percentage: totalCount > 0 ? ((fish.value / totalCount) * 100).toFixed(2) : '0.00'
-    }));
+  const totalCount = getTotalAmount(item.data);
+  const fishList = item.data.map(fish => ({
+    name: fish.name,
+    value: fish.value,
+    percentage:
+      totalCount > 0 ? ((fish.value / totalCount) * 100).toFixed(2) : '0.00'
+  }));
 
-    // 确定流域ID
-    let clickedBaseId: string | undefined;
-    
-    if (params && params.data && params.data.baseId) {
-        // 情况1：总量对比图，点击了某个流域的数据项
-        clickedBaseId = params.data.baseId;
-    } else if (item.baseid && item.baseid !== 'all') {
-        // 情况2：单一流域图，使用图表整体的 baseid
-        clickedBaseId = item.baseid;
-    } else {
-        // 情况3：总量图表但未获取到具体数据项的 baseId（理论上不应该发生）
-        clickedBaseId = item.baseid;
-    }
+  let clickedBaseId: string | undefined;
+  let fishName = '';
+  let ftp = '';
 
-    // 设置弹框数据
-    modalTitle.value = `${item.title} - 详情`;
-    modalData.value = {
-        year: currentYear.value || '-',
-        basinName: params?.name || item.title, // 优先使用被点击的数据项名称
-        baseid: clickedBaseId, // 保存正确的流域ID
-        totalCount: totalCount,
-        fishTypes: item.data.length,
-        fishList: fishList
-    };
+  if (params && params.data && params.data.baseId) {
+    clickedBaseId = params.data.baseId;
+  } else if (item.baseid && item.baseid !== 'all') {
+    clickedBaseId = item.baseid;
+  } else {
+    clickedBaseId = item.baseid;
+  }
 
-    // 打开弹框
-    modalVisible.value = true;
+  if (item.baseid !== 'all' && params && params.data) {
+    fishName = params.data.name || '';
+    ftp = params.data.ftp || '';
+  }
+
+  modalTitle.value = `${item.title} - 详情`;
+  modalData.value = {
+    year: currentYear.value || '-',
+    basinName: params?.name || item.title,
+    baseid: clickedBaseId,
+    totalCount: totalCount,
+    fishTypes: item.data.length,
+    fishName,
+    ftp,
+    fishList: fishList
+  };
+
+  modalVisible.value = true;
 };
 
 /**
  * 关闭弹框
  */
 const handleModalClose = () => {
-    modalVisible.value = false;
+  modalVisible.value = false;
 };
 
 watch(
-    () => JidiSelectEventStore.selectedItem,
-    (newVal) => {
-        if (newVal && newVal.wbsCode) {
-            baseid.value = newVal.wbsCode;
-            
-            // 切换流域时，不请求 API，只从缓存中筛选更新显示
-            if (cachedApiData.value.length > 0) {
-                updateChartByBaseid();
-            }
-        }
-    },
-    { deep: true, immediate: true }
-);
+  () => JidiSelectEventStore.selectedItem,
+  newVal => {
+    if (newVal && newVal.wbsCode) {
+      baseid.value = newVal.wbsCode;
 
+      // 切换流域时，不请求 API，只从缓存中筛选更新显示
+      if (cachedApiData.value.length > 0) {
+        updateChartByBaseid();
+      }
+    }
+  },
+  { deep: true, immediate: true }
+);
 </script>
 
 <style lang="scss" scoped>
 .container {
-    width: 100%;
-    height: 290px;
-    // border: 1px solid #7fd6ff;
-    border-radius: 5px;
-    position: relative;
-    overflow: hidden; // 隐藏超出容器的内容
+  width: 100%;
+  height: 290px;
+  // border: 1px solid #7fd6ff;
+  border-radius: 5px;
+  position: relative;
+  overflow: hidden; // 隐藏超出容器的内容
 
-    // 跑马灯轨道
-    .carousel-track {
-        display: flex; // 横向排列所有媒体项
+  // 跑马灯轨道
+  .carousel-track {
+    display: flex; // 横向排列所有媒体项
+    width: 100%;
+    height: 100%;
+    transition: transform 0.5s ease-in-out; // 0.5秒平滑过渡
+
+    // 禁用过渡动画（用于无缝跳转）
+    &.no-transition {
+      transition: none;
+    }
+
+    // 单个图表项
+    .carousel-item {
+      min-width: 100%; // 每个项目占满容器宽度
+      height: 100%;
+      position: relative;
+      flex-shrink: 0; // 防止被压缩
+
+      .pie-chart-container {
         width: 100%;
         height: 100%;
-        transition: transform 0.5s ease-in-out; // 0.5秒平滑过渡
+        display: flex;
+        flex-direction: column;
+        padding: 10px;
 
-        // 禁用过渡动画（用于无缝跳转）
-        &.no-transition {
-            transition: none;
+        .chart {
+          flex: 1;
+          min-height: 0;
         }
 
-        // 单个图表项
-        .carousel-item {
-            min-width: 100%; // 每个项目占满容器宽度
-            height: 100%;
-            position: relative;
-            flex-shrink: 0; // 防止被压缩
-
-            .pie-chart-container {
-                width: 100%;
-                height: 100%;
-                display: flex;
-                flex-direction: column;
-                padding: 10px;
-
-                .chart {
-                    flex: 1;
-                    min-height: 0;
-                }
-
-                .title {
-                    text-align: center;
-                    font-size: 14px;
-                    color: #333;
-                    padding-top: 8px;
-                }
-            }
+        .title {
+          text-align: center;
+          font-size: 14px;
+          color: #333;
+          padding-top: 8px;
         }
+      }
     }
+  }
 }
 
 // 加载状态样式
 .loading-container {
-    width: 100%;
-    height: 290px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
+  width: 100%;
+  height: 290px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
 // 空状态样式
 .empty-container {
-    width: 100%;
-    height: 290px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
+  width: 100%;
+  height: 290px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
 .modal-content {
-    .ant-descriptions {
-        margin-bottom: 16px;
-    }
+  .ant-descriptions {
+    margin-bottom: 16px;
+  }
 
-    .ant-divider {
-        margin: 16px 0;
-        font-size: 14px;
-        color: #333;
-    }
+  .ant-divider {
+    margin: 16px 0;
+    font-size: 14px;
+    color: #333;
+  }
 }
 </style>
diff --git a/frontend/src/modules/ZhenXiZhiWuYuanMod/ZhiWuYuanJianSheJiJieRuQingKuangBar/index.vue b/frontend/src/modules/ZhenXiZhiWuYuanMod/ZhiWuYuanJianSheJiJieRuQingKuangBar/index.vue
index 2ace8474..4933ef49 100644
--- a/frontend/src/modules/ZhenXiZhiWuYuanMod/ZhiWuYuanJianSheJiJieRuQingKuangBar/index.vue
+++ b/frontend/src/modules/ZhenXiZhiWuYuanMod/ZhiWuYuanJianSheJiJieRuQingKuangBar/index.vue
@@ -32,6 +32,7 @@ import SidePanelItem from '@/components/SidePanelItem/index.vue';
 import { vpcGetKendoListCust } from '@/api/zxdzw';
 import { useJidiSelectEventStore } from '@/store/modules/jidiSelectEvent';
 import ZhiWuYuanDetailTable from './ZhiWuYuanDetailTable.vue';
+import { useDraggable } from '@/utils/drag';
 
 // 定义组件名（便于调试和递归）
 defineOptions({
@@ -50,7 +51,7 @@ const loading = ref(false);
 // 弹窗状态
 const modalVisible = ref(false);
 const modalJidi = ref('all');
-
+useDraggable(modalVisible, { boundary: true, resetOnOpen: true });
 // 基地选项（用于弹窗中的下拉）
 const jidiOptions = ref<any[]>([]);
 
diff --git a/frontend/src/modules/alongFishMod/index.vue b/frontend/src/modules/alongFishMod/index.vue
index f0d3adc2..2ca8e91d 100644
--- a/frontend/src/modules/alongFishMod/index.vue
+++ b/frontend/src/modules/alongFishMod/index.vue
@@ -54,6 +54,7 @@ import Yanchengyulei from './TwoLayers/Yanchengyulei.vue';
 import { useJidiSelectEventStore } from '@/store/modules/jidiSelectEvent';
 import { wbsbGetKendoList, getDftYear, fishChanges2 } from '@/api/stdc';
 import moment from 'moment';
+import { useDraggable } from '@/utils/drag';
 
 defineOptions({
   name: 'alongFishMod'
@@ -108,7 +109,7 @@ const modalHbrvcd = ref('');
 const modalStateName = ref('');
 const modalSectionName = ref('');
 const modalStcd = ref('');
-
+useDraggable(modalVisible, { boundary: true, resetOnOpen: true });
 // ==================== 图表相关 ====================
 
 /**
diff --git a/frontend/src/modules/churukushuiwenMod/index.vue b/frontend/src/modules/churukushuiwenMod/index.vue
index 388895b7..abf6cc30 100644
--- a/frontend/src/modules/churukushuiwenMod/index.vue
+++ b/frontend/src/modules/churukushuiwenMod/index.vue
@@ -53,6 +53,8 @@ import { getVmsstbprpt, inOutOneGetKendoListCust } from '@/api/sw';
 import { useJidiSelectEventStore } from '@/store/modules/jidiSelectEvent';
 import churukushuiwen from './churukushuiwen.vue';
 import { MapClass } from '@/components/gis/map.class';
+import { useDraggable } from '@/utils/drag';
+
 // ==================== 组件基础配置 ====================
 // 定义组件名(便于调试和递归)
 defineOptions({
@@ -96,7 +98,7 @@ const modalVisible = ref(false); // 弹框显示状态
 const clickDataInfo = ref<any>(null); // 点击的数据点信息
 const stationName = ref(''); // 站点名称
 // ==================== 数据处理函数 ====================
-
+useDraggable(modalVisible, { boundary: true, resetOnOpen: true });
 /**
  * 转换图表数据格式
  * 将后端返回的扁平数据结构转换为ECharts所需的双线数据格式
diff --git a/frontend/src/modules/dianxingcuoshijieshao/index.vue b/frontend/src/modules/dianxingcuoshijieshao/index.vue
index 44cc22b1..e08eea2a 100644
--- a/frontend/src/modules/dianxingcuoshijieshao/index.vue
+++ b/frontend/src/modules/dianxingcuoshijieshao/index.vue
@@ -2,7 +2,7 @@
 <template>
   <SidePanelItem
     title="典型设施介绍"
-    :select="selectConfig"
+    :select="selectConfig" 
     @update-values="handlePanelChange"
   >
     <a-spin :spinning="loading">
@@ -51,9 +51,9 @@
       <a-empty v-else description="暂无数据" />
     </a-spin>
   </SidePanelItem>
-
+ 
   <!-- 设施详情弹框 -->
-  <a-modal v-model:open="modalVisible" :title="'设施详情'" width="1536px" :footer="null">
+  <a-modal v-model:open="modalVisibleone" :title="'设施详情'" width="1536px" :footer="null">
     <div v-if="currentItem" class="detail-container">
       <ArtsDetail :dataSource="currentItem" :index="getCurrentRealIndex()" />
     </div>
@@ -66,6 +66,7 @@ import SidePanelItem from '@/components/SidePanelItem/index.vue';
 import ArtsDetail from '@/components/carouselIntroduce/ArtsDetail.vue';
 import { getMsstbprptKendoList } from '@/api/home';
 import { useJidiSelectEventStore } from '@/store/modules/jidiSelectEvent';
+import { useDraggable } from '@/utils/drag';
 
 // 定义组件名（便于调试和递归）
 defineOptions({
@@ -84,9 +85,9 @@ interface MediaItem {
 }
 
 // 弹框控制
-const modalVisible = ref(false);
+const modalVisibleone = ref(false);
 const currentItem = ref<any>(null);
-
+useDraggable(modalVisibleone, { boundary: true, resetOnOpen: true });
 // 加载状态
 const loading = ref(false);
 
@@ -217,7 +218,7 @@ const handleItemClick = () => {
     description: item.description || '',
     title: item.title || ''
   }));
-  modalVisible.value = true;
+  modalVisibleone.value = true;
 };
 
 // 处理下拉选择变化
diff --git a/frontend/src/modules/diwenshuijianhuansheshileixingzuchengjijieruqingkuang/index.vue b/frontend/src/modules/diwenshuijianhuansheshileixingzuchengjijieruqingkuang/index.vue
index e650e89f..f8b254dd 100644
--- a/frontend/src/modules/diwenshuijianhuansheshileixingzuchengjijieruqingkuang/index.vue
+++ b/frontend/src/modules/diwenshuijianhuansheshileixingzuchengjijieruqingkuang/index.vue
@@ -36,6 +36,8 @@ import SidePanelItem from '@/components/SidePanelItem/index.vue';
 import { dwInfoGetKendoListCust } from "@/api/sw";
 import { useJidiSelectEventStore } from "@/store/modules/jidiSelectEvent";
 import DiwenshuijianhuansheshileixingzuchengjijieruqingkuangTwoLayers from "./TwoLayers/diwenshuijianhuansheshileixingzuchengjijieruqingkuangTwoLayers.vue"
+import { useDraggable } from '@/utils/drag';
+
 const JidiSelectEventStore = useJidiSelectEventStore();
 // 定义组件名（便于调试和递归）
 defineOptions({
@@ -73,7 +75,7 @@ const baseid = ref('')
 const modalVisible = ref(false);
 const selectedItem: any = ref<DataString | null>(null);
 const twoLayersRef = ref();
-
+useDraggable(modalVisible, { boundary: true, resetOnOpen: true });
 
 const getListData = async () => {
     loading.value = true;
diff --git a/frontend/src/modules/fishSurvey/FishIntroduce/index.vue b/frontend/src/modules/fishSurvey/FishIntroduce/index.vue
index e910b751..3b90254a 100644
--- a/frontend/src/modules/fishSurvey/FishIntroduce/index.vue
+++ b/frontend/src/modules/fishSurvey/FishIntroduce/index.vue
@@ -68,6 +68,8 @@ import SidePanelItem from '@/components/SidePanelItem/index.vue';
 import { fishDicGetKendoList, wbsbGetKendoList } from '@/api/yldc';
 import { useJidiSelectEventStore } from '@/store/modules/jidiSelectEvent';
 import ArtsDetail from '@/components/carouselIntroduce/ArtsDetail.vue';
+import { useDraggable } from '@/utils/drag';
+
 // 定义组件名（便于调试和递归）
 defineOptions({
   name: 'zengZhiZhanJieShaoMod'
@@ -87,7 +89,7 @@ let rvcd = ref('');
 // 弹框控制
 const modalVisible = ref(false);
 const currentItem = ref<any>(null);
-
+useDraggable(modalVisible, { boundary: true, resetOnOpen: true });
 // 加载状态
 const loading = ref(false);
 
diff --git a/frontend/src/modules/fishSurvey/ZhuanZhiIntroduce/index.vue b/frontend/src/modules/fishSurvey/ZhuanZhiIntroduce/index.vue
index d2bca5f2..6e74c811 100644
--- a/frontend/src/modules/fishSurvey/ZhuanZhiIntroduce/index.vue
+++ b/frontend/src/modules/fishSurvey/ZhuanZhiIntroduce/index.vue
@@ -62,6 +62,8 @@ import { ref, onMounted, onUnmounted, computed } from 'vue';
 import SidePanelItem from '@/components/SidePanelItem/index.vue';
 import { msstbprptGetKendoList } from '@/api/yldc';
 import ArtsDetail from '@/components/carouselIntroduce/ArtsDetail.vue';
+import { useDraggable } from '@/utils/drag';
+
 // 定义组件名（便于调试和递归）
 defineOptions({
   name: 'zengZhiZhanJieShaoMod'
@@ -79,7 +81,7 @@ const baseUrl = import.meta.env.VITE_APP_ATTACHMENT_URL;
 // 弹框控制
 const modalVisible = ref(false);
 const currentItem = ref<any>(null);
-
+useDraggable(modalVisible, { boundary: true, resetOnOpen: true });
 // 加载状态
 const loading = ref(false);
 
diff --git a/frontend/src/modules/guoyujiance/index.vue b/frontend/src/modules/guoyujiance/index.vue
index f3c39485..aea4c041 100644
--- a/frontend/src/modules/guoyujiance/index.vue
+++ b/frontend/src/modules/guoyujiance/index.vue
@@ -36,6 +36,8 @@ import SidePanelItem from '@/components/SidePanelItem/index.vue';
 import { vmsstbprptGetKendoList } from '@/api/gyss'
 import { useJidiSelectEventStore } from "@/store/modules/jidiSelectEvent";
 import FPVDDetailMD from './components/FPVDDetailMD.vue'
+import { useDraggable } from '@/utils/drag';
+
 // 定义组件名（便于调试和递归）
 defineOptions({
     name: 'guoyusheshijiansheqingkuang'
@@ -81,6 +83,7 @@ const loading = ref(false);
 const modalVisible = ref(false);
 const selectedFacility = ref<any>(null);
 const title = ref('');
+useDraggable(modalVisible, { boundary: true, resetOnOpen: true });
 // 处理卡片点击事件
 const handleCardClick = (facility: any) => {
     selectedFacility.value = facility;
diff --git a/frontend/src/modules/guoyusheshijiansheqingkuang/index.vue b/frontend/src/modules/guoyusheshijiansheqingkuang/index.vue
index b7adca44..d75a84d1 100644
--- a/frontend/src/modules/guoyusheshijiansheqingkuang/index.vue
+++ b/frontend/src/modules/guoyusheshijiansheqingkuang/index.vue
@@ -1,201 +1,230 @@
 <!-- SidePanelItem.vue -->
 <template>
-    <SidePanelItem title="过鱼设施">
-        <a-spin :spinning="loading" tip="加载中...">
-            <div class="facility-grid">
-                <div v-for="facility in facilities" :key="facility.name" class="facility-card"
-                    @click="handleFacilityClick(facility)">
-                    <div style="width: 60px;height: 62px;display: flex;align-items: center;justify-content: center;">
-                        <div class="facility-icon">
-                            <i style="color: #fff;" :class="facility.icon" type="icon-shengtailiuliang2"></i>
-                        </div>
-                    </div>
-
-                    <div class="facility-info">
-                        <div class="facility-name">{{ facility.name }}</div>
-                        <div style="font-size: 16px;"> <span class="facility-count">{{ facility.count
-                                }}</span><span>座</span></div>
-                    </div>
-                </div>
+  <SidePanelItem title="过鱼设施">
+    <a-spin :spinning="loading" tip="加载中...">
+      <div class="facility-grid">
+        <div
+          v-for="facility in facilities"
+          :key="facility.name"
+          class="facility-card"
+          @click="handleFacilityClick(facility)"
+        >
+          <div
+            style="
+              width: 60px;
+              height: 62px;
+              display: flex;
+              align-items: center;
+              justify-content: center;
+            "
+          >
+            <div class="facility-icon">
+              <i
+                style="color: #fff"
+                :class="facility.icon"
+                type="icon-shengtailiuliang2"
+              ></i>
             </div>
-        </a-spin>
-    </SidePanelItem>
-    <!-- 弹框 -->
-    <a-modal v-model:open="modalVisible" :title="'过鱼设施'" :footer="null" width="1536px" @cancel="handleCloseModal">
-       <ModalPage v-if="currentFacility" :data="currentFacility" :jdId="'all'" />
-    </a-modal>
+          </div>
+
+          <div class="facility-info">
+            <div class="facility-name">{{ facility.name }}</div>
+            <div style="font-size: 16px">
+              <span class="facility-count">{{ facility.count }}</span
+              ><span>座</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </a-spin>
+  </SidePanelItem>
+  <!-- 弹框 -->
+  <a-modal
+    v-model:open="modalVisible"
+    :title="'过鱼设施'"
+    :footer="null"
+    width="1536px"
+    @cancel="handleCloseModal"
+  >
+    <ModalPage v-if="currentFacility" :data="currentFacility" :jdId="'all'" />
+  </a-modal>
 </template>
 
 <script lang="ts" setup>
 import { ref, onMounted, onUnmounted, watch, nextTick } from 'vue';
 import SidePanelItem from '@/components/SidePanelItem/index.vue';
-import { useJidiSelectEventStore } from "@/store/modules/jidiSelectEvent";
+import { useJidiSelectEventStore } from '@/store/modules/jidiSelectEvent';
 import { buildGetKendoListCust } from '@/api/gyss';
-import  ModalPage  from './ModalPage/index.vue'
+import ModalPage from './ModalPage/index.vue';
+import { useDraggable } from '@/utils/drag';
+
 // 定义组件名（便于调试和递归）
 defineOptions({
-    name: 'qixidibaohugongzuokaizhanQK'
+  name: 'qixidibaohugongzuokaizhanQK'
 });
 const JidiSelectEventStore = useJidiSelectEventStore();
 // loading状态
 const loading = ref(false);
 // 设施数据
 const facilities = ref([
-    {
-        name: '鱼道',
-        count: 0,
-        icon: 'icon iconfont icon-map-gyssYudao',
-        key: 'FP_1'
-    },
-    {
-        name: '集运鱼系统',
-        count: 0,
-        icon: 'icon iconfont icon-map-gyssJiyunyuxitong',
-        key: 'FP_3'
-    },
-    {
-        name: '升鱼机',
-        count: 0,
-        icon: 'icon iconfont icon-map-gyssShengyuji',
-        key: 'FP_4'
-    },
-    {
-        name: '其他',
-        count: 0,
-        icon: 'icon iconfont icon-map-gyssQita',
-        key: 'FP_5'
-    },
-
+  {
+    name: '鱼道',
+    count: 0,
+    icon: 'icon iconfont icon-map-gyssYudao',
+    key: 'FP_1'
+  },
+  {
+    name: '集运鱼系统',
+    count: 0,
+    icon: 'icon iconfont icon-map-gyssJiyunyuxitong',
+    key: 'FP_3'
+  },
+  {
+    name: '升鱼机',
+    count: 0,
+    icon: 'icon iconfont icon-map-gyssShengyuji',
+    key: 'FP_4'
+  },
+  {
+    name: '其他',
+    count: 0,
+    icon: 'icon iconfont icon-map-gyssQita',
+    key: 'FP_5'
+  }
 ]);
-const baseid = ref('')
+const baseid = ref('');
 // 弹框相关状态
 const modalVisible = ref(false);
 const currentFacility = ref<any>(null);
+useDraggable(modalVisible, { boundary: true, resetOnOpen: true });
 //获取页面数据
 const getData = async () => {
-    loading.value = true;
-    try {
-        let params = {
-            "filter": {
-                "logic": "and",
-                "filters": []
-            }
+  loading.value = true;
+  try {
+    let params = {
+      filter: {
+        logic: 'and',
+        filters: []
+      }
+    };
+    const res = await buildGetKendoListCust(params); //适配监控-VD
+    let data = res?.data?.data || res?.data || [];
+
+    // 重置所有设施的count为0
+    facilities.value.forEach(facility => {
+      facility.count = 0;
+    });
+
+    // 遍历接口返回的所有数据
+    data.forEach(item => {
+      const matchedFacility = facilities.value.find(
+        facility => facility.key === item.sttpCode
+      );
+      if (matchedFacility) {
+        // 如果在facilities中找到对应的key，累加到该设施
+        matchedFacility.count +=
+          Number(item.built) + Number(item.building) || 0;
+      } else {
+        // 如果没有找到对应的key，累加到FP_5（其他）
+        const otherFacility = facilities.value.find(
+          facility => facility.key === 'FP_5'
+        );
+        if (otherFacility) {
+          otherFacility.count +=
+            Number(item.built) + Number(item.building) || 0;
         }
-        const res = await buildGetKendoListCust(params); //适配监控-VD
-        let data = res?.data?.data || res?.data || [];
-
-        // 重置所有设施的count为0
-        facilities.value.forEach(facility => {
-            facility.count = 0;
-        });
-
-        // 遍历接口返回的所有数据
-        data.forEach(item => {
-            const matchedFacility = facilities.value.find(facility => facility.key === item.sttpCode);
-            if (matchedFacility) {
-                // 如果在facilities中找到对应的key，累加到该设施
-                matchedFacility.count += Number(item.built) + Number(item.building) || 0;
-            } else {
-                // 如果没有找到对应的key，累加到FP_5（其他）
-                const otherFacility = facilities.value.find(facility => facility.key === 'FP_5');
-                if (otherFacility) {
-                    otherFacility.count += Number(item.built) + Number(item.building) || 0;
-                }
-            }
-        });
-    } catch (error) {
-        console.error('获取数据失败:', error);
-    } finally {
-        loading.value = false;
-    }
-}
+      }
+    });
+  } catch (error) {
+    console.error('获取数据失败:', error);
+  } finally {
+    loading.value = false;
+  }
+};
 // 点击处理函数
 const handleFacilityClick = (facility: any) => {
-    currentFacility.value = facility;
-    modalVisible.value = true;
-
-
+  currentFacility.value = facility;
+  modalVisible.value = true;
 };
 // 关闭弹框
 const handleCloseModal = () => {
-    modalVisible.value = false;
-    currentFacility.value = null;
+  modalVisible.value = false;
+  currentFacility.value = null;
 };
 
 watch(
-    () => JidiSelectEventStore.selectedItem,
-    (newVal) => {
-        baseid.value = newVal.wbsCode;
-        getData()
-    },
-    { deep: true, immediate: true }
+  () => JidiSelectEventStore.selectedItem,
+  newVal => {
+    baseid.value = newVal.wbsCode;
+    getData();
+  },
+  { deep: true, immediate: true }
 );
 // 页面加载时执行
 onMounted(() => {
-    // 延迟初始化，确保容器已渲染
-
+  // 延迟初始化，确保容器已渲染
 });
 
 // 组件卸载时清理
-onUnmounted(() => {
-
-});
+onUnmounted(() => {});
 </script>
 
 <style lang="scss" scoped>
 .facility-grid {
-    width: 406px;
-    flex-flow: wrap;
-    display: flex;
-    justify-content: space-between;
-    font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
+  width: 406px;
+  flex-flow: wrap;
+  display: flex;
+  justify-content: space-between;
+  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto,
+    Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji,
+    Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
 }
 
 .facility-card {
-    width: 200px;
-    height: 70px;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    margin: 4px 0px;
-    background: #fff;
-    border: 1px solid #e8e8e8;
-    border-radius: 2px;
-    transition: all 0.3s;
-    cursor: pointer;
-    box-sizing: border-box;
+  width: 200px;
+  height: 70px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin: 4px 0px;
+  background: #fff;
+  border: 1px solid #e8e8e8;
+  border-radius: 2px;
+  transition: all 0.3s;
+  cursor: pointer;
+  box-sizing: border-box;
 }
 
 .facility-icon {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 40px;
-    height: 40px;
-    // margin-right: 8px;
-    background: #5389b5;
-    border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  // margin-right: 8px;
+  background: #5389b5;
+  border-radius: 50%;
 
-    .anticon {
-        font-size: 24px;
-        color: #fff;
-    }
+  .anticon {
+    font-size: 24px;
+    color: #fff;
+  }
 }
 
 .facility-info {
-    flex: 1;
+  flex: 1;
 }
 
 .facility-name {
-    font-size: 16px;
-    color: #333;
-    // margin-bottom: 4px;
-    // font-weight: 500;
+  font-size: 16px;
+  color: #333;
+  // margin-bottom: 4px;
+  // font-weight: 500;
 }
 
 .facility-count {
-    font-size: 18px;
-    color: #2f6b98;
-    // font-weight: 600;
+  font-size: 18px;
+  color: #2f6b98;
+  // font-weight: 600;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/frontend/src/modules/guoyusheshijieshao/index.vue b/frontend/src/modules/guoyusheshijieshao/index.vue
index 1e30aa44..9f2b850d 100644
--- a/frontend/src/modules/guoyusheshijieshao/index.vue
+++ b/frontend/src/modules/guoyusheshijieshao/index.vue
@@ -1,76 +1,102 @@
 <!-- SidePanelItem.vue -->
 <template>
-    <SidePanelItem title="过鱼设施介绍">
-        <!-- Loading 和空状态容器 -->
-        <a-spin :spinning="loading" class="carousel-container-wrapper">
-            <div v-if="hasData" class="container" @mouseenter="handleMouseEnter" @mouseleave="handleMouseLeave">
-                <!-- 跑马灯轨道容器 -->
-                <div class="carousel-track" :class="{ 'no-transition': isTransitioning }"
-                    :style="{ transform: `translateX(-${currentIndex * 100}%)` }">
-                    <!-- 遍历所有媒体项（包含克隆项） -->
-                    <div v-for="(item, index) in renderMediaData" :key="index" class="carousel-item"
-                        @click="handleItemClick(originalMediaData)">
-                        <!-- 图片 -->
-                        <img :src="item.url" :alt="item.stnm" loading="lazy" />
-                        <!-- 说明文字（随媒体项移动） -->
-                        <div class="text">{{ item.stnm }}</div>
-                    </div>
-                </div>
-
-                <!-- 面板指示器（固定在底部右侧） -->
-                <div class="pagination-dots-fixed">
-                    <span v-for="(dot, index) in originalMediaData" :key="index" class="dot"
-                        :class="{ active: currentRealIndex === index }" @click="goToSlide(index)"></span>
-                </div>
-            </div>
-            <!-- 暂无数据状态 -->
-
-            <!-- 独立的文字说明区域（随跑马灯切换而变化） -->
-            <div v-if="hasData" class="description-text" @click="handleItemClick(originalMediaData)">
-                {{ currentDescription }}
-            </div>
-            <a-empty v-else description="暂无数据" :image="simpleImage" />
-        </a-spin>
-    </SidePanelItem>
-    <!-- 设施详情弹框 -->
-    <a-modal v-model:open="modalVisible" :title="'设施类型介绍'" width="1536px" :footer="null">
-        <!-- 你在这里编写弹框内容 -->
-        <div v-if="currentItem">
-            <ArtsDetail :dataSource='currentItem' :index="getCurrentRealIndex()" />
+  <SidePanelItem title="过鱼设施介绍">
+    <!-- Loading 和空状态容器 -->
+    <a-spin :spinning="loading" class="carousel-container-wrapper">
+      <div
+        v-if="hasData"
+        class="container"
+        @mouseenter="handleMouseEnter"
+        @mouseleave="handleMouseLeave"
+      >
+        <!-- 跑马灯轨道容器 -->
+        <div
+          class="carousel-track"
+          :class="{ 'no-transition': isTransitioning }"
+          :style="{ transform: `translateX(-${currentIndex * 100}%)` }"
+        >
+          <!-- 遍历所有媒体项（包含克隆项） -->
+          <div
+            v-for="(item, index) in renderMediaData"
+            :key="index"
+            class="carousel-item"
+            @click="handleItemClick(originalMediaData)"
+          >
+            <!-- 图片 -->
+            <img :src="item.url" :alt="item.stnm" loading="lazy" />
+            <!-- 说明文字（随媒体项移动） -->
+            <div class="text">{{ item.stnm }}</div>
+          </div>
         </div>
-    </a-modal>
-</template>
 
+        <!-- 面板指示器（固定在底部右侧） -->
+        <div class="pagination-dots-fixed">
+          <span
+            v-for="(dot, index) in originalMediaData"
+            :key="index"
+            class="dot"
+            :class="{ active: currentRealIndex === index }"
+            @click="goToSlide(index)"
+          ></span>
+        </div>
+      </div>
+      <!-- 暂无数据状态 -->
+
+      <!-- 独立的文字说明区域（随跑马灯切换而变化） -->
+      <div
+        v-if="hasData"
+        class="description-text"
+        @click="handleItemClick(originalMediaData)"
+      >
+        {{ currentDescription }}
+      </div>
+      <a-empty v-else description="暂无数据" :image="simpleImage" />
+    </a-spin>
+  </SidePanelItem>
+  <!-- 设施详情弹框 -->
+  <a-modal
+    v-model:open="modalVisible"
+    :title="'设施类型介绍'"
+    width="1536px"
+    :footer="null"
+  >
+    <!-- 你在这里编写弹框内容 -->
+    <div v-if="currentItem">
+      <ArtsDetail :dataSource="currentItem" :index="getCurrentRealIndex()" />
+    </div>
+  </a-modal>
+</template>
 
 <script lang="ts" setup>
 import { ref, onMounted, onUnmounted, computed, watch } from 'vue';
 import SidePanelItem from '@/components/SidePanelItem/index.vue';
-import { useJidiSelectEventStore } from "@/store/modules/jidiSelectEvent";
+import { useJidiSelectEventStore } from '@/store/modules/jidiSelectEvent';
 import { fpVmsstbprptGetKendoList } from '@/api/gyss';
 import ArtsDetail from '@/components/carouselIntroduce/ArtsDetail.vue';
 import { Empty } from 'ant-design-vue';
+import { useDraggable } from '@/utils/drag';
 
 // ==================== 类型定义 ====================
 interface MediaItem {
-    url: string;
-    stnm: string;
-    introduce: string;
+  url: string;
+  stnm: string;
+  introduce: string;
 }
 
 interface CarouselConfig {
-    autoPlayInterval: number;
-    transitionDuration: number;
+  autoPlayInterval: number;
+  transitionDuration: number;
 }
 
 // ==================== 常量配置 ====================
 const CAROUSEL_CONFIG: CarouselConfig = {
-    autoPlayInterval: 4000, // 自动轮播间隔 4秒
-    transitionDuration: 500  // 过渡动画时长 500ms
+  autoPlayInterval: 4000, // 自动轮播间隔 4秒
+  transitionDuration: 500 // 过渡动画时长 500ms
 };
 
 // ==================== Store 和基础配置 ====================
 defineOptions({
-    name: 'ZhiWuYuanJianSheJiJieRuQingKuangBar'
+  name: 'ZhiWuYuanJianSheJiJieRuQingKuangBar'
 });
 
 const JidiSelectEventStore = useJidiSelectEventStore();
@@ -79,6 +105,7 @@ const baseUrl = import.meta.env.VITE_APP_ATTACHMENT_URL;
 // 弹框控制
 const modalVisible = ref(false);
 const currentItem = ref<any>(null);
+useDraggable(modalVisible, { boundary: true, resetOnOpen: true });
 // ==================== 数据状态 ====================
 // 加载状态
 const loading = ref(false);
@@ -108,37 +135,37 @@ let autoPlayTimer: ReturnType<typeof setInterval> | null = null;
  * 结构：[最后一项克隆, 原始数据..., 第一项克隆]
  */
 const renderMediaData = computed<MediaItem[]>(() => {
-    const length = originalMediaData.value.length;
-    if (length === 0) return [];
+  const length = originalMediaData.value.length;
+  if (length === 0) return [];
 
-    return [
-        originalMediaData.value[length - 1], // 克隆最后一项
-        ...originalMediaData.value,           // 原始数据
-        originalMediaData.value[0]            // 克隆第一项
-    ];
+  return [
+    originalMediaData.value[length - 1], // 克隆最后一项
+    ...originalMediaData.value, // 原始数据
+    originalMediaData.value[0] // 克隆第一项
+  ];
 });
 
 /**
  * 获取当前真实的索引（排除克隆项的影响）
  */
 const currentRealIndex = computed(() => {
-    const realLength = originalMediaData.value.length;
-    if (realLength === 0) return 0;
+  const realLength = originalMediaData.value.length;
+  if (realLength === 0) return 0;
 
-    let realIndex = currentIndex.value - 1; // 减去克隆的首项偏移
+  let realIndex = currentIndex.value - 1; // 减去克隆的首项偏移
 
-    // 处理边界情况（无缝循环时的克隆项）
-    if (realIndex < 0) realIndex = realLength - 1;
-    if (realIndex >= realLength) realIndex = 0;
+  // 处理边界情况（无缝循环时的克隆项）
+  if (realIndex < 0) realIndex = realLength - 1;
+  if (realIndex >= realLength) realIndex = 0;
 
-    return realIndex;
+  return realIndex;
 });
 
 /**
  * 计算当前显示的描述文字
  */
 const currentDescription = computed(() => {
-    return originalMediaData.value[currentRealIndex.value]?.introduce || '';
+  return originalMediaData.value[currentRealIndex.value]?.introduce || '';
 });
 
 // ==================== 核心方法 ====================
@@ -146,280 +173,282 @@ const currentDescription = computed(() => {
  * 启动自动轮播
  */
 const startAutoPlay = () => {
-    stopAutoPlay(); // 先清除旧的定时器
-    autoPlayTimer = setInterval(() => {
-        if (!isHovering.value && !isTransitioning.value) {
-            nextSlide();
-        }
-    }, CAROUSEL_CONFIG.autoPlayInterval);
+  stopAutoPlay(); // 先清除旧的定时器
+  autoPlayTimer = setInterval(() => {
+    if (!isHovering.value && !isTransitioning.value) {
+      nextSlide();
+    }
+  }, CAROUSEL_CONFIG.autoPlayInterval);
 };
 
 /**
  * 停止自动轮播
  */
 const stopAutoPlay = () => {
-    if (autoPlayTimer) {
-        clearInterval(autoPlayTimer);
-        autoPlayTimer = null;
-    }
+  if (autoPlayTimer) {
+    clearInterval(autoPlayTimer);
+    autoPlayTimer = null;
+  }
 };
 
 /**
  * 切换到下一张
  */
 const nextSlide = () => {
-    currentIndex.value++;
+  currentIndex.value++;
 
-    // 延迟检查是否需要无缝跳转（与transition时间一致）
-    setTimeout(() => {
-        handleSeamlessLoop();
-    }, CAROUSEL_CONFIG.transitionDuration);
+  // 延迟检查是否需要无缝跳转（与transition时间一致）
+  setTimeout(() => {
+    handleSeamlessLoop();
+  }, CAROUSEL_CONFIG.transitionDuration);
 };
 
 /**
  * 处理无缝循环（克隆项处理）
  */
 const handleSeamlessLoop = () => {
-    const realLength = originalMediaData.value.length;
-    if (realLength === 0) return;
+  const realLength = originalMediaData.value.length;
+  if (realLength === 0) return;
 
-    // 如果到达克隆的最后一项（索引 = realLength + 1）
-    if (currentIndex.value >= realLength + 1) {
-        // 1. 禁用过渡动画，实现瞬间跳转
-        isTransitioning.value = true;
+  // 如果到达克隆的最后一项（索引 = realLength + 1）
+  if (currentIndex.value >= realLength + 1) {
+    // 1. 禁用过渡动画，实现瞬间跳转
+    isTransitioning.value = true;
 
-        // 2. 瞬间跳转到真实的第二项（索引1），用户看不到跳变
-        currentIndex.value = 1;
+    // 2. 瞬间跳转到真实的第二项（索引1），用户看不到跳变
+    currentIndex.value = 1;
 
-        // 3. 等待两帧后恢复过渡动画（确保DOM已更新）
-        requestAnimationFrame(() => {
-            requestAnimationFrame(() => {
-                isTransitioning.value = false;
-            });
-        });
-    }
+    // 3. 等待两帧后恢复过渡动画（确保DOM已更新）
+    requestAnimationFrame(() => {
+      requestAnimationFrame(() => {
+        isTransitioning.value = false;
+      });
+    });
+  }
 };
 
 /**
  * 处理鼠标进入
  */
 const handleMouseEnter = () => {
-    isHovering.value = true;
+  isHovering.value = true;
 };
 
 /**
  * 处理鼠标离开
  */
 const handleMouseLeave = () => {
-    isHovering.value = false;
+  isHovering.value = false;
 };
 
 /**
  * 跳转到指定幻灯片
  */
 const goToSlide = (targetIndex: number) => {
-    if (isTransitioning.value) return;
+  if (isTransitioning.value) return;
 
-    // 计算目标索引（考虑克隆项偏移）
-    currentIndex.value = targetIndex + 1;
+  // 计算目标索引（考虑克隆项偏移）
+  currentIndex.value = targetIndex + 1;
 };
 
 /**
  * 获取轮播图数据
  */
 const getCarouselData = async () => {
-    loading.value = true;
-    hasData.value = false;
+  loading.value = true;
+  hasData.value = false;
 
-    try {
-        const params = {
-            filter: {
-                logic: 'and',
-                filters: [
-                    {
-                        field: 'sttpFullPath',
-                        operator: 'contains',
-                        dataType: 'string',
-                        value: 'ENV,ENVP,FP,FP'
-                    },
-                    {
-                        field: 'logo',
-                        operator: 'isnotnull',
-                        dataType: 'string'
-                    },
-                    baseid.value !== 'all' ? {
-                        field: 'baseId',
-                        operator: 'eq',
-                        dataType: 'string',
-                        value: baseid.value
-                    } : null
-                ].filter(Boolean)
-            },
-            select: ['introduce', 'logo', 'stnm', 'precis'],
-            sort: [{ field: 'rstcdStepSort', dir: 'asc' }]
-        };
+  try {
+    const params = {
+      filter: {
+        logic: 'and',
+        filters: [
+          {
+            field: 'sttpFullPath',
+            operator: 'contains',
+            dataType: 'string',
+            value: 'ENV,ENVP,FP,FP'
+          },
+          {
+            field: 'logo',
+            operator: 'isnotnull',
+            dataType: 'string'
+          },
+          baseid.value !== 'all'
+            ? {
+                field: 'baseId',
+                operator: 'eq',
+                dataType: 'string',
+                value: baseid.value
+              }
+            : null
+        ].filter(Boolean)
+      },
+      select: ['introduce', 'logo', 'stnm', 'precis'],
+      sort: [{ field: 'rstcdStepSort', dir: 'asc' }]
+    };
 
-        const res = await fpVmsstbprptGetKendoList(params);
-        const data = res?.data?.data || [];
+    const res = await fpVmsstbprptGetKendoList(params);
+    const data = res?.data?.data || [];
 
-        if (data.length > 0) {
-            originalMediaData.value = data.map((item: any) => ({
-                url: item.logo ? `${baseUrl}/?${item.logo}&view=jpg` : '',
-                introduce: item.introduce || '',
-                stnm: item.stnm || ''
-            }));
+    if (data.length > 0) {
+      originalMediaData.value = data.map((item: any) => ({
+        url: item.logo ? `${baseUrl}/?${item.logo}&view=jpg` : '',
+        introduce: item.introduce || '',
+        stnm: item.stnm || ''
+      }));
 
-            // 重置索引到第一项（跳过克隆的首项）
-            currentIndex.value = 1;
-            hasData.value = true;
-        } else {
-            // 无数据时清空
-            originalMediaData.value = [];
-            hasData.value = false;
-        }
-    } catch (error) {
-        console.error('获取轮播图数据失败:', error);
-        originalMediaData.value = [];
-        hasData.value = false;
-    } finally {
-        loading.value = false;
+      // 重置索引到第一项（跳过克隆的首项）
+      currentIndex.value = 1;
+      hasData.value = true;
+    } else {
+      // 无数据时清空
+      originalMediaData.value = [];
+      hasData.value = false;
     }
+  } catch (error) {
+    console.error('获取轮播图数据失败:', error);
+    originalMediaData.value = [];
+    hasData.value = false;
+  } finally {
+    loading.value = false;
+  }
 };
 
 // ==================== 生命周期 ====================
 onMounted(() => {
-    startAutoPlay();
+  startAutoPlay();
 });
 
 onUnmounted(() => {
-    stopAutoPlay();
+  stopAutoPlay();
 });
 
 // ==================== 监听器 ====================
 watch(
-    () => JidiSelectEventStore.selectedItem,
-    (newVal) => {
-        if (newVal?.wbsCode) {
-            baseid.value = newVal.wbsCode;
-        } else {
-            baseid.value = 'all';
-        }
-        getCarouselData();
-    },
-    { deep: true, immediate: true }
+  () => JidiSelectEventStore.selectedItem,
+  newVal => {
+    if (newVal?.wbsCode) {
+      baseid.value = newVal.wbsCode;
+    } else {
+      baseid.value = 'all';
+    }
+    getCarouselData();
+  },
+  { deep: true, immediate: true }
 );
 // 获取当前真实的索引（排除克隆项的影响）
 const getCurrentRealIndex = () => {
-    const realLength = originalMediaData.value.length;
-    let realIndex = currentIndex.value - 1; // 减去克隆的首项偏移
+  const realLength = originalMediaData.value.length;
+  let realIndex = currentIndex.value - 1; // 减去克隆的首项偏移
 
-    // 处理边界情况（无缝循环时的克隆项）
-    if (realIndex < 0) realIndex = realLength - 1;
-    if (realIndex >= realLength) realIndex = 0;
+  // 处理边界情况（无缝循环时的克隆项）
+  if (realIndex < 0) realIndex = realLength - 1;
+  if (realIndex >= realLength) realIndex = 0;
 
-    return realIndex;
+  return realIndex;
 };
 // 处理项目点击事件
 const handleItemClick = (item: any) => {
-    console.log('轮播图项目被点击:', item, getCurrentRealIndex());
-    currentItem.value = item.map((item: any) => ({
-        url: item.url || '',
-        description: item.introduce || '',
-        title: item.stnm || ''
-    }));
-    modalVisible.value = true;
+  console.log('轮播图项目被点击:', item, getCurrentRealIndex());
+  currentItem.value = item.map((item: any) => ({
+    url: item.url || '',
+    description: item.introduce || '',
+    title: item.stnm || ''
+  }));
+  modalVisible.value = true;
 };
 </script>
 
 <style lang="scss" scoped>
 .container {
-    width: 100%;
-    height: 228px;
-    position: relative;
-    overflow: hidden; // 隐藏超出容器的内容
+  width: 100%;
+  height: 228px;
+  position: relative;
+  overflow: hidden; // 隐藏超出容器的内容
 
-    // 跑马灯轨道
-    .carousel-track {
-        display: flex; // 横向排列所有媒体项
+  // 跑马灯轨道
+  .carousel-track {
+    display: flex; // 横向排列所有媒体项
+    width: 100%;
+    height: 100%;
+    transition: transform 0.5s ease-in-out; // 0.5秒平滑过渡
+
+    // 禁用过渡动画（用于无缝跳转）
+    &.no-transition {
+      transition: none;
+    }
+
+    // 单个媒体项
+    .carousel-item {
+      min-width: 100%; // 每个项目占满容器宽度
+      height: 100%;
+      position: relative;
+      flex-shrink: 0; // 防止被压缩
+      cursor: pointer;
+
+      img {
         width: 100%;
         height: 100%;
-        transition: transform 0.5s ease-in-out; // 0.5秒平滑过渡
+        object-fit: cover; // 保持比例填充
+      }
 
-        // 禁用过渡动画（用于无缝跳转）
-        &.no-transition {
-            transition: none;
-        }
-
-        // 单个媒体项
-        .carousel-item {
-            min-width: 100%; // 每个项目占满容器宽度
-            height: 100%;
-            position: relative;
-            flex-shrink: 0; // 防止被压缩
-            cursor: pointer;
-
-            img {
-                width: 100%;
-                height: 100%;
-                object-fit: cover; // 保持比例填充
-            }
-
-            .text {
-                position: absolute;
-                bottom: 0;
-                left: 0;
-                width: 100%;
-                height: 22px;
-                line-height: 22px;
-                background: rgba(0, 0, 0, 0.1);
-                color: #fff;
-                padding-left: 10px;
-            }
-        }
-    }
-
-    // 固定的面板指示器
-    .pagination-dots-fixed {
+      .text {
         position: absolute;
-        bottom: 10px;
-        right: 10px;
-        display: flex;
-        gap: 6px;
-        z-index: 10; // 确保在文字上方
-
-        .dot {
-            width: 5px;
-            height: 5px;
-            border-radius: 50%;
-            background-color: #D8D8D8;
-            cursor: pointer;
-            transition: background-color 0.3s ease;
-
-            &.active {
-                background-color: #005293;
-            }
-
-            &:hover {
-                opacity: 0.8;
-            }
-        }
+        bottom: 0;
+        left: 0;
+        width: 100%;
+        height: 22px;
+        line-height: 22px;
+        background: rgba(0, 0, 0, 0.1);
+        color: #fff;
+        padding-left: 10px;
+      }
     }
+  }
+
+  // 固定的面板指示器
+  .pagination-dots-fixed {
+    position: absolute;
+    bottom: 10px;
+    right: 10px;
+    display: flex;
+    gap: 6px;
+    z-index: 10; // 确保在文字上方
+
+    .dot {
+      width: 5px;
+      height: 5px;
+      border-radius: 50%;
+      background-color: #d8d8d8;
+      cursor: pointer;
+      transition: background-color 0.3s ease;
+
+      &.active {
+        background-color: #005293;
+      }
+
+      &:hover {
+        opacity: 0.8;
+      }
+    }
+  }
 }
 
 // 独立的文字说明区域
 .description-text {
-    font-size: 14px;
-    line-height: 1.5;
-    transition: all 0.3s ease;
-    // margin-bottom: 20px;
-    cursor: pointer;
+  font-size: 14px;
+  line-height: 1.5;
+  transition: all 0.3s ease;
+  // margin-bottom: 20px;
+  cursor: pointer;
 
-    // 多行文本溢出省略
-    display: -webkit-box;
-    -webkit-line-clamp: 2;
-    -webkit-box-orient: vertical;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    word-break: break-word;
+  // 多行文本溢出省略
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  word-break: break-word;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/frontend/src/modules/huanbaoMod/index.vue b/frontend/src/modules/huanbaoMod/index.vue
index d02f6001..262ef197 100644
--- a/frontend/src/modules/huanbaoMod/index.vue
+++ b/frontend/src/modules/huanbaoMod/index.vue
@@ -1,5 +1,5 @@
 <!-- SidePanelItem.vue -->
-<template>
+<template> 
   <SidePanelItem title="环保设施情况">
     <a-spin :spinning="loading">
       <div class="facility-grid" v-if="facilities.length > 0">
@@ -49,6 +49,7 @@ import SidePanelItem from '@/components/SidePanelItem/index.vue';
 import { environmentalProtectionConstruction } from '@/api/home';
 import { useJidiSelectEventStore } from '@/store/modules/jidiSelectEvent';
 import HuanbaoModTwoLayers from './TwoLayers/HuanbaoModTwoLayers.vue';
+import { useDraggable } from '@/utils/drag';
 
 // 定义组件名（便于调试和递归）
 defineOptions({
@@ -82,7 +83,7 @@ const modalRes = ref({
   bldstt: '',
   hydrodtin: '1'
 });
-
+useDraggable(modalVisible, { boundary: true, resetOnOpen: true });
 // 获取数据
 const getData = async () => {
   if (!baseid.value) return;
diff --git a/frontend/src/modules/huanbaozdjcgzkzQK/index.vue b/frontend/src/modules/huanbaozdjcgzkzQK/index.vue
index 8e09ea9a..179d5e07 100644
--- a/frontend/src/modules/huanbaozdjcgzkzQK/index.vue
+++ b/frontend/src/modules/huanbaozdjcgzkzQK/index.vue
@@ -68,6 +68,7 @@ import svg_liuliangjiancezhan from '@/assets/svg/liuliangjiancezhan.svg';
 import svg_shuizhijiancezhan from '@/assets/svg/shuizhijiancezhan.svg';
 import svg_zengzhizhanshuizhizhan from '@/assets/svg/zengzhizhanshuizhizhan.svg';
 import svg_qixidi from '@/assets/svg/qixidi.svg';
+import { useDraggable } from '@/utils/drag';
 
 defineOptions({
   name: 'huanbaoMod'
@@ -103,7 +104,7 @@ const baseid = ref('');
 // 弹框相关状态
 const modalVisible = ref(false);
 const currentFacility = ref<IFacility | null>(null);
-
+useDraggable(modalVisible, { boundary: true, resetOnOpen: true });
 const fetchData = () => {
   let params = {
     filter: {
diff --git a/frontend/src/modules/liuyu/ai/spdzwaijc/AISPTK.vue b/frontend/src/modules/liuyu/ai/spdzwaijc/AISPTK.vue
index 074c4f03..ab353c35 100644
--- a/frontend/src/modules/liuyu/ai/spdzwaijc/AISPTK.vue
+++ b/frontend/src/modules/liuyu/ai/spdzwaijc/AISPTK.vue
@@ -316,7 +316,8 @@ import { postIdUrl } from '@/api/mapModal';
 import dayjs from 'dayjs';
 import { useJidiSelectEventStore } from '@/store/modules/jidiSelectEvent';
 import videoCover from '@/assets/images/videFm.jpg';
-
+import { useDraggable } from '@/utils/drag';
+;
 const baseUrl = import.meta.env.VITE_APP_ATTACHMENT_URL;
 
 // ==================== Props ====================
@@ -397,7 +398,7 @@ const calendarValue = ref(searchData.value.month);
 const detailModalVisible = ref(false);
 const detailActiveKey = ref('2');
 const detailDate = ref('');
-
+useDraggable(detailModalVisible, { boundary: true, resetOnOpen: true })
 // 日历状态映射（运行/未运行）
 const calendarStatusMap: Record<
   string,
diff --git a/frontend/src/modules/liuyu/ai/spdzwaijc/index.vue b/frontend/src/modules/liuyu/ai/spdzwaijc/index.vue
index ffc41b99..5a61a858 100644
--- a/frontend/src/modules/liuyu/ai/spdzwaijc/index.vue
+++ b/frontend/src/modules/liuyu/ai/spdzwaijc/index.vue
@@ -51,6 +51,7 @@ import SidePanelItem from '@/components/SidePanelItem/index.vue';
 import AISPTK from './AISPTK.vue';
 import { getAiGyssList } from '@/api/zngj';
 import dayjs from 'dayjs';
+import { useDraggable } from '@/utils/drag';
 
 // 定义组件名（便于调试和递归）
 defineOptions({
@@ -65,7 +66,7 @@ const panelDetail = ref<any>({});
 // ==================== 弹框状态 ====================
 const modalVisible = ref(false);
 const currentAction = ref('AI_5006');
-
+useDraggable(modalVisible, { boundary: true, resetOnOpen: true });
 const lyName = computed(() => baseid.value === '02' ? '升鱼斗运行' : '升鱼机运行');
 
 // ==================== 日期选择器配置 ====================
diff --git a/frontend/src/modules/liuyu/yichangyujing/shengtailiuliangxianzhigaojing/shengtailiuliangxianshuju.vue b/frontend/src/modules/liuyu/yichangyujing/shengtailiuliangxianzhigaojing/shengtailiuliangxianshuju.vue
index 4f7d7759..a29ced40 100644
--- a/frontend/src/modules/liuyu/yichangyujing/shengtailiuliangxianzhigaojing/shengtailiuliangxianshuju.vue
+++ b/frontend/src/modules/liuyu/yichangyujing/shengtailiuliangxianzhigaojing/shengtailiuliangxianshuju.vue
@@ -40,6 +40,7 @@ import { useJidiSelectEventStore } from '@/store/modules/jidiSelectEvent';
 import SidePanelItem from "@/components/SidePanelItem/index.vue";
 import { getStllGaojingList } from '@/api/zngj';
 import ModeGaoJing from './ModeGaoJing.vue';
+import { useDraggable } from '@/utils/drag';
 
 // 定义组件名（便于调试和递归）
 defineOptions({
@@ -51,7 +52,7 @@ const baseid = ref('');
 const dataLoading = ref(false);
 const isModalOpen = ref(false);
 const currentWarnState = ref('');
-
+useDraggable(isModalOpen, { boundary: true, resetOnOpen: true });
 const data = ref([
     {
         name:'正常',
diff --git a/frontend/src/modules/liuyu/yichangyujing/shuizhijiancegaojing/shuizhijianceshuju.vue b/frontend/src/modules/liuyu/yichangyujing/shuizhijiancegaojing/shuizhijianceshuju.vue
index 1b485eb3..418e21dd 100644
--- a/frontend/src/modules/liuyu/yichangyujing/shuizhijiancegaojing/shuizhijianceshuju.vue
+++ b/frontend/src/modules/liuyu/yichangyujing/shuizhijiancegaojing/shuizhijianceshuju.vue
@@ -38,6 +38,7 @@ import { useJidiSelectEventStore } from '@/store/modules/jidiSelectEvent';
 import SidePanelItem from "@/components/SidePanelItem/index.vue";
 import { getShuizhiGaojingList } from '@/api/zngj';
 import ModeGaoJing from './ModeGaoJing.vue';
+import { useDraggable } from '@/utils/drag';
 
 defineOptions({
     name: "shuizhijianceshuju",
@@ -51,7 +52,7 @@ const defaultValue = ref<string>('0');
 // 弹框状态
 const modalVisible = ref(false);
 const currentWarnState = ref('');
-
+useDraggable(modalVisible, { boundary: true, resetOnOpen: true });
 const handleCardClick = (warnState: string) => {
     currentWarnState.value = warnState;
     modalVisible.value = true;
diff --git a/frontend/src/modules/lushengshengtaijiance/index.vue b/frontend/src/modules/lushengshengtaijiance/index.vue
index 3b2b33d9..06706870 100644
--- a/frontend/src/modules/lushengshengtaijiance/index.vue
+++ b/frontend/src/modules/lushengshengtaijiance/index.vue
@@ -68,6 +68,7 @@ import SidePanelItem from '@/components/SidePanelItem/index.vue';
 import LsstjkTk from './LsstjkTk.vue';
 import { wbsbGetKendoList, getEvnmAutoMonitor } from '@/api/stdc';
 import moment from 'moment';
+import { useDraggable } from '@/utils/drag';
 
 // 定义组件名
 defineOptions({
@@ -81,7 +82,7 @@ const dataLoading = ref(false);
 // ==================== 弹框状态 ====================
 const modalVisible = ref(false);
 const currentOrderIndex = ref('16');
-
+useDraggable(modalVisible, { boundary: true, resetOnOpen: true });
 // ==================== 响应式变量定义 ====================
 // 选择器配置
 const select = ref({
diff --git a/frontend/src/modules/monthlyAvgWaterTemCompareHistory/TwoLayers/monthlyAverageMaxModal.vue b/frontend/src/modules/monthlyAvgWaterTemCompareHistory/TwoLayers/monthlyAverageMaxModal.vue
index 9f31b064..c26fde8a 100644
--- a/frontend/src/modules/monthlyAvgWaterTemCompareHistory/TwoLayers/monthlyAverageMaxModal.vue
+++ b/frontend/src/modules/monthlyAvgWaterTemCompareHistory/TwoLayers/monthlyAverageMaxModal.vue
@@ -70,6 +70,7 @@ import dayjs from 'dayjs';
 import { ZoomInOutlined } from '@ant-design/icons-vue';
 import type { Dayjs } from 'dayjs';
 import MonthlyAverage from '../monthlyAverage.vue';
+import { useDraggable } from '@/utils/drag';
 
 defineOptions({
     name: 'MonthlyAverageMaxModal'
@@ -101,7 +102,7 @@ const detailModalData = ref<any>(null);
 // 选择器相关 - 内部状态管理
 const selectValue = ref('');
 const selectOptions = ref<any[]>([]);
-
+useDraggable(detailModalVisible, { boundary: true, resetOnOpen: true });
 // 树形选择器展开状态管理
 const treeExpandedKeys = ref<string[]>([])
 const nodeMap = new Map<string, { node: any; parentKey: string | null }>()
diff --git a/frontend/src/modules/monthlyAvgWaterTemCompareHistory/index.vue b/frontend/src/modules/monthlyAvgWaterTemCompareHistory/index.vue
index 2e43cba5..fc37d643 100644
--- a/frontend/src/modules/monthlyAvgWaterTemCompareHistory/index.vue
+++ b/frontend/src/modules/monthlyAvgWaterTemCompareHistory/index.vue
@@ -41,6 +41,7 @@ import dayjs from 'dayjs'
 import {
     ZoomInOutlined
 } from '@ant-design/icons-vue';
+import { useDraggable } from '@/utils/drag';
 
 defineOptions({
     name: 'monthlyAvgWaterTemCompareHistory'
@@ -68,7 +69,8 @@ const stationName = ref('');
 
 // 图表放大展示弹框状态
 const zoomModalVisible = ref(false);
-
+useDraggable(modalVisible, { boundary: true, resetOnOpen: true });
+useDraggable(zoomModalVisible, { boundary: true, resetOnOpen: true });
 // 选择器配置
 const select = ref({
     show: true,
diff --git a/frontend/src/modules/qixidibaohugongzuokaizhanQK/index.vue b/frontend/src/modules/qixidibaohugongzuokaizhanQK/index.vue
index 1015e9be..29fabddb 100644
--- a/frontend/src/modules/qixidibaohugongzuokaizhanQK/index.vue
+++ b/frontend/src/modules/qixidibaohugongzuokaizhanQK/index.vue
@@ -1,206 +1,237 @@
 <!-- SidePanelItem.vue -->
 <template>
-    <SidePanelItem title="栖息地保护工作开展情况">
-        <a-spin :spinning="loading" tip="加载中...">
-            <div class="facility-grid">
-                <div v-for="facility in facilities" :key="facility.name" class="facility-card"
-                    @click="handleFacilityClick(facility)">
-                    <div style="width: 60px;height: 62px;display: flex;align-items: center;justify-content: center;">
-                        <div class="facility-icon">
-                            <i style="color: #fff;" :class="facility.icon" type="icon-shengtailiuliang2"></i>
-                        </div>
-                    </div>
-
-                    <div class="facility-info">
-                        <div class="facility-name">{{ facility.name }}</div>
-                        <div style="font-size: 16px;"> <span class="facility-count">{{ facility.count
-                        }}</span><span>个</span></div>
-                    </div>
-                </div>
+  <SidePanelItem title="栖息地保护工作开展情况">
+    <a-spin :spinning="loading" tip="加载中...">
+      <div class="facility-grid">
+        <div
+          v-for="facility in facilities"
+          :key="facility.name"
+          class="facility-card"
+          @click="handleFacilityClick(facility)"
+        >
+          <div
+            style="
+              width: 60px;
+              height: 62px;
+              display: flex;
+              align-items: center;
+              justify-content: center;
+            "
+          >
+            <div class="facility-icon">
+              <i
+                style="color: #fff"
+                :class="facility.icon"
+                type="icon-shengtailiuliang2"
+              ></i>
             </div>
-        </a-spin>
-    </SidePanelItem>
-    <!-- 弹框 -->
-    <a-modal v-model:open="modalVisible" :title="'栖息地保护工作开展情况'" :footer="null" width="1536px" @cancel="handleCloseModal">
-        <QixidiheduanjianceqingkuangEJ v-if="currentFacility" :activeKey="currentFacility.sttpCode" :tabs="facilities"
-            :baseId="baseid" />
-    </a-modal>
+          </div>
+
+          <div class="facility-info">
+            <div class="facility-name">{{ facility.name }}</div>
+            <div style="font-size: 16px">
+              <span class="facility-count">{{ facility.count }}</span
+              ><span>个</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </a-spin>
+  </SidePanelItem>
+  <!-- 弹框 -->
+  <a-modal
+    v-model:open="modalVisible"
+    :title="'栖息地保护工作开展情况'"
+    :footer="null"
+    width="1536px"
+    @cancel="handleCloseModal"
+  >
+    <QixidiheduanjianceqingkuangEJ
+      v-if="currentFacility"
+      :activeKey="currentFacility.sttpCode"
+      :tabs="facilities"
+      :baseId="baseid"
+    />
+  </a-modal>
 </template>
 
 <script lang="ts" setup>
 import { ref, onMounted, onUnmounted, watch, nextTick } from 'vue';
 import SidePanelItem from '@/components/SidePanelItem/index.vue';
-import { useJidiSelectEventStore } from "@/store/modules/jidiSelectEvent";
-import { fhGetKendoListCust } from '@/api/qxd'
-import QixidiheduanjianceqingkuangEJ from "./qixidiheduanjianceqingkuangEJ/index.vue"
+import { useJidiSelectEventStore } from '@/store/modules/jidiSelectEvent';
+import { fhGetKendoListCust } from '@/api/qxd';
+import QixidiheduanjianceqingkuangEJ from './qixidiheduanjianceqingkuangEJ/index.vue';
+import { useDraggable } from '@/utils/drag';
+
 // 定义组件名（便于调试和递归）
 defineOptions({
-    name: 'qixidibaohugongzuokaizhanQK'
+  name: 'qixidibaohugongzuokaizhanQK'
 });
 const JidiSelectEventStore = useJidiSelectEventStore();
 // loading状态
 const loading = ref(false);
 // 设施数据
 const facilities = ref([
-    {
-        name: '栖息地',
-        count: 0,
-        icon: 'icon iconfont icon-qixidi',
-        sttpCode: 'FH'
-    },
-    {
-        name: '水温监测',
-        count: 0,
-        icon: 'icon iconfont icon-diwenshuijianhuan',
-        sttpCode: 'WTRV'
-    },
-    {
-        name: '水文监测',
-        count: 0,
-        icon: 'icon iconfont icon-shuiwen-line',
-        sttpCode: 'ZQ'
-    },
-    {
-        name: '视频监控',
-        count: 0,
-        icon: 'icon iconfont icon-shipinjiankongshebei',
-        sttpCode: 'VD'
-    },
-
+  {
+    name: '栖息地',
+    count: 0,
+    icon: 'icon iconfont icon-qixidi',
+    sttpCode: 'FH'
+  },
+  {
+    name: '水温监测',
+    count: 0,
+    icon: 'icon iconfont icon-diwenshuijianhuan',
+    sttpCode: 'WTRV'
+  },
+  {
+    name: '水文监测',
+    count: 0,
+    icon: 'icon iconfont icon-shuiwen-line',
+    sttpCode: 'ZQ'
+  },
+  {
+    name: '视频监控',
+    count: 0,
+    icon: 'icon iconfont icon-shipinjiankongshebei',
+    sttpCode: 'VD'
+  }
 ]);
-const baseid = ref('')
+const baseid = ref('');
 // 弹框相关状态
 const modalVisible = ref(false);
 const currentFacility = ref<any>(null);
+useDraggable(modalVisible, { boundary: true, resetOnOpen: true });
 //获取页面数据
 const getData = async () => {
-    loading.value = true;
-    try {
-        let params = {
-            "filter": {
-                "logic": "and",
-                "filters": [
-                    baseid.value != 'all' ? {
-                        "field": "baseId",
-                        "operator": "eq",
-                        "dataType": "string",
-                        "value": baseid.value
-                    } : null
-                ].filter(Boolean)
-            },
-            "group": [
-                {
-                    "dir": "asc",
-                    "field": "sttpCode"
-                }
-            ],
-            "groupResultFlat": true
+  loading.value = true;
+  try {
+    let params = {
+      filter: {
+        logic: 'and',
+        filters: [
+          baseid.value != 'all'
+            ? {
+                field: 'baseId',
+                operator: 'eq',
+                dataType: 'string',
+                value: baseid.value
+              }
+            : null
+        ].filter(Boolean)
+      },
+      group: [
+        {
+          dir: 'asc',
+          field: 'sttpCode'
         }
-        const res = await fhGetKendoListCust(params); //适配监控-VD
-        let data = res?.data?.data || res?.data || [];
+      ],
+      groupResultFlat: true
+    };
+    const res = await fhGetKendoListCust(params); //适配监控-VD
+    let data = res?.data?.data || res?.data || [];
 
-        // 根据接口返回的数据更新 facilities 的 count
-        facilities.value.forEach(facility => {
-            const matchedItem = data.find(item => item.sttpCode === facility.sttpCode);
-            if (matchedItem) {
-                facility.count = matchedItem.count_sttpCode || 0;
-            } else {
-                facility.count = 0;
-            }
-        });
-    } catch (error) {
-        console.error('获取数据失败:', error);
-    } finally {
-        loading.value = false;
-    }
-}
+    // 根据接口返回的数据更新 facilities 的 count
+    facilities.value.forEach(facility => {
+      const matchedItem = data.find(
+        item => item.sttpCode === facility.sttpCode
+      );
+      if (matchedItem) {
+        facility.count = matchedItem.count_sttpCode || 0;
+      } else {
+        facility.count = 0;
+      }
+    });
+  } catch (error) {
+    console.error('获取数据失败:', error);
+  } finally {
+    loading.value = false;
+  }
+};
 // 点击处理函数
 const handleFacilityClick = (facility: any) => {
-    currentFacility.value = facility;
-    modalVisible.value = true;
-
-
+  currentFacility.value = facility;
+  modalVisible.value = true;
 };
 // 关闭弹框
 const handleCloseModal = () => {
-    modalVisible.value = false;
-    currentFacility.value = null;
+  modalVisible.value = false;
+  currentFacility.value = null;
 };
 
 watch(
-    () => JidiSelectEventStore.selectedItem,
-    (newVal) => {
-        baseid.value = newVal.wbsCode;
-        getData()
-    },
-    { deep: true, immediate: true }
+  () => JidiSelectEventStore.selectedItem,
+  newVal => {
+    baseid.value = newVal.wbsCode;
+    getData();
+  },
+  { deep: true, immediate: true }
 );
 // 页面加载时执行
 onMounted(() => {
-    // 延迟初始化，确保容器已渲染
-
+  // 延迟初始化，确保容器已渲染
 });
 
 // 组件卸载时清理
-onUnmounted(() => {
-
-});
+onUnmounted(() => {});
 </script>
 
 <style lang="scss" scoped>
 .facility-grid {
-    width: 406px;
-    flex-flow: wrap;
-    display: flex;
-    justify-content: space-between;
-    font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
+  width: 406px;
+  flex-flow: wrap;
+  display: flex;
+  justify-content: space-between;
+  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto,
+    Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji,
+    Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
 }
 
 .facility-card {
-    width: 200px;
-    height: 70px;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    margin: 4px 0px;
-    background: #fff;
-    border: 1px solid #e8e8e8;
-    border-radius: 2px;
-    transition: all 0.3s;
-    cursor: pointer;
-    box-sizing: border-box;
+  width: 200px;
+  height: 70px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin: 4px 0px;
+  background: #fff;
+  border: 1px solid #e8e8e8;
+  border-radius: 2px;
+  transition: all 0.3s;
+  cursor: pointer;
+  box-sizing: border-box;
 }
 
 .facility-icon {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 40px;
-    height: 40px;
-    // margin-right: 8px;
-    background: #5389b5;
-    border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  // margin-right: 8px;
+  background: #5389b5;
+  border-radius: 50%;
 
-    .anticon {
-        font-size: 24px;
-        color: #fff;
-    }
+  .anticon {
+    font-size: 24px;
+    color: #fff;
+  }
 }
 
 .facility-info {
-    flex: 1;
+  flex: 1;
 }
 
 .facility-name {
-    font-size: 16px;
-    color: #333;
-    // margin-bottom: 4px;
-    // font-weight: 500;
+  font-size: 16px;
+  color: #333;
+  // margin-bottom: 4px;
+  // font-weight: 500;
 }
 
 .facility-count {
-    font-size: 18px;
-    color: #2f6b98;
-    // font-weight: 600;
+  font-size: 18px;
+  color: #2f6b98;
+  // font-weight: 600;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/frontend/src/modules/shengTaiLiuLiangXieFangSheShiMod/xieFangFangShi/index.vue b/frontend/src/modules/shengTaiLiuLiangXieFangSheShiMod/xieFangFangShi/index.vue
index c5d0a8b0..15cf663d 100644
--- a/frontend/src/modules/shengTaiLiuLiangXieFangSheShiMod/xieFangFangShi/index.vue
+++ b/frontend/src/modules/shengTaiLiuLiangXieFangSheShiMod/xieFangFangShi/index.vue
@@ -57,6 +57,8 @@ import type { ECharts } from 'echarts';
 import { msstbprptGetKendoList } from '@/api/stll';
 import { useJidiSelectEventStore } from '@/store/modules/jidiSelectEvent';
 import STLLXFFS from './TwoLayer/STLLXFFS.vue';
+import { useDraggable } from '@/utils/drag';
+
 // 定义组件名（便于调试和递归）
 defineOptions({
   name: 'xieFangFangShi'
@@ -78,7 +80,7 @@ const apiRawData = ref<any[]>([]); // 保存原始 API 数据
 const modalVisible = ref(false);
 const modalTitle = ref('');
 const selectedData = ref<any>(null);
-
+useDraggable(modalVisible, { boundary: true, resetOnOpen: true });
 // 颜色配置（根据图片配色）
 const colors = [
   '#9556a4', // 基荷发电 - 紫色
diff --git a/frontend/src/modules/shengTaiLiuLiangXieFangSheShiMod/xieFangFenBu/index.vue b/frontend/src/modules/shengTaiLiuLiangXieFangSheShiMod/xieFangFenBu/index.vue
index 30ae4cb3..58bf3cdc 100644
--- a/frontend/src/modules/shengTaiLiuLiangXieFangSheShiMod/xieFangFenBu/index.vue
+++ b/frontend/src/modules/shengTaiLiuLiangXieFangSheShiMod/xieFangFenBu/index.vue
@@ -38,6 +38,8 @@ import type { ECharts } from 'echarts';
 import { vmsstbprptGetKendoList } from '@/api/stll';
 import { useJidiSelectEventStore } from '@/store/modules/jidiSelectEvent';
 import FBQKTwolayer from './TwoLayer/FenBuQingKuangTwoLayer.vue';
+import { useDraggable } from '@/utils/drag';
+
 // 定义组件名
 defineOptions({
   name: 'XieFangFenBu'
@@ -59,7 +61,7 @@ const wbsCode = ref('');
 const modalVisible = ref(false);
 const selectData = ref(''); // 选中的设施类型名称
 const jidiName = ref(''); // 选中的基地名称
-
+useDraggable(modalVisible, { boundary: true, resetOnOpen: true });
 // 设施类型配置
 const typeName = [
   { label: '生态放流孔', eqtp: 'EQ_1' },
diff --git a/frontend/src/modules/shengtaidabiaoModJZ/index.vue b/frontend/src/modules/shengtaidabiaoModJZ/index.vue
index 643c913d..3f07c556 100644
--- a/frontend/src/modules/shengtaidabiaoModJZ/index.vue
+++ b/frontend/src/modules/shengtaidabiaoModJZ/index.vue
@@ -105,6 +105,8 @@ import { useMapViewStore } from '@/modules/map/stores/map-view.store';
 import STLLXFFS from './TwoLayer/ShengTaiLiuLiangDaBQKTwoLayer.vue';
 import ModalYkzhbzdjcgz from './TwoLayer/ModalYkzhbzdjcgz.vue';
 import HuanbaoZDJCGZKZ from '@/modules/huanbaozdjcgzkzQK/index.vue';
+import { useDraggable } from '@/utils/drag';
+
 // 定义组件名（便于调试和递归）
 defineOptions({
   name: 'shengtaidabiaoMod'
@@ -149,7 +151,8 @@ const modalVisible = ref(false);
 const modalTitle = ref('');
 const selectedItem = ref<any>(null);
 const huanbaoModalVisible = ref(false);
-
+useDraggable(modalVisible, { boundary: true, resetOnOpen: true });
+useDraggable(huanbaoModalVisible, { boundary: true, resetOnOpen: true });
 // 处理电站数量点击事件
 const handleStationClick = () => {
   huanbaoModalVisible.value = true;
diff --git a/frontend/src/modules/shengtaidabiaoTwoMod/index.vue b/frontend/src/modules/shengtaidabiaoTwoMod/index.vue
index 15e013fd..cdf54d8b 100644
--- a/frontend/src/modules/shengtaidabiaoTwoMod/index.vue
+++ b/frontend/src/modules/shengtaidabiaoTwoMod/index.vue
@@ -67,6 +67,8 @@ import { eqqecRateCount, evnmAutoMonitorGetKendoListCust } from '@/api/stll';
 import ModalYkzhbzdjcgz from '../shengtaidabiaoMod/TwoLayer/ModalYkzhbzdjcgz.vue';
 import STLLXFFS from './TwoLayer/STLLXFFS.vue'
 import { useMapViewStore } from '@/modules/map/stores/map-view.store';
+import { useDraggable } from '@/utils/drag';
+
 // 定义组件名（便于调试和递归）
 defineOptions({
   name: 'shengtaidabiaoMod'
@@ -604,6 +606,8 @@ watch(
 const detailModalVisible = ref(false);
 const detailModalTitle = ref('');
 const detailData = ref<any[]>([]);
+useDraggable(huanbaoModalVisible, { boundary: true, resetOnOpen: true });
+useDraggable(detailModalVisible, { boundary: true, resetOnOpen: true });
 const detailColumns = ref([
   {
     title: mode.value === 'top' ? '基地名称' : '调节性能',
diff --git a/frontend/src/modules/shengtaidabiaoTwoModJJ/index.vue b/frontend/src/modules/shengtaidabiaoTwoModJJ/index.vue
index 1f9299d0..bb397101 100644
--- a/frontend/src/modules/shengtaidabiaoTwoModJJ/index.vue
+++ b/frontend/src/modules/shengtaidabiaoTwoModJJ/index.vue
@@ -68,6 +68,8 @@ import { eqqecRateCount, evnmAutoMonitorGetKendoListCust } from '@/api/stll';
 import ModalYkzhbzdjcgz from '../shengtaidabiaoMod/TwoLayer/ModalYkzhbzdjcgz.vue';
 import STLLXFFS from './TwoLayer/STLLXFFS.vue'
 import { useMapViewStore } from '@/modules/map/stores/map-view.store';
+import { useDraggable } from '@/utils/drag';
+
 // 定义组件名（便于调试和递归）
 defineOptions({
   name: 'shengtaidabiaoMod'
@@ -97,6 +99,7 @@ const huanbaoModalVisible = ref(false);
 const handleStationClick = () => {
   huanbaoModalVisible.value = true;
 };
+
 // 加载数据
 const loadData = async () => {
   spinning.value = true;
@@ -633,6 +636,8 @@ const detailColumns = ref([
 watch(mode, () => {
   loadData();
 });
+useDraggable(huanbaoModalVisible, { boundary: true, resetOnOpen: true });
+useDraggable(detailModalVisible, { boundary: true, resetOnOpen: true });
 </script>
 
 <style lang="scss" scoped>
diff --git a/frontend/src/modules/sheshileixingjieshao/index.vue b/frontend/src/modules/sheshileixingjieshao/index.vue
index 39a778ea..638b8ab6 100644
--- a/frontend/src/modules/sheshileixingjieshao/index.vue
+++ b/frontend/src/modules/sheshileixingjieshao/index.vue
@@ -62,6 +62,8 @@ import { ref, onMounted, onUnmounted, computed } from 'vue';
 import SidePanelItem from '@/components/SidePanelItem/index.vue';
 import ArtsDetail from '@/components/carouselIntroduce/ArtsDetail.vue';
 import { sttpbGetKendoList } from '@/api/sw';
+import { useDraggable } from '@/utils/drag';
+
 // 定义组件名（便于调试和递归）
 defineOptions({
   name: 'diwenshuijianhuansheshileixingzuchengjijieruqingkuang'
@@ -96,6 +98,7 @@ const isTransitioning = ref(false);
 // 弹框控制
 const modalVisible = ref(false);
 const currentItem = ref<any>(null);
+useDraggable(modalVisible, { boundary: true, resetOnOpen: true });
 // 初始化渲染数组（克隆首尾项）
 const initRenderData = () => {
   const length = originalMediaData.value.length;
diff --git a/frontend/src/modules/shuiWenNianNeiFenBu/index.vue b/frontend/src/modules/shuiWenNianNeiFenBu/index.vue
index adec0042..abb0f891 100644
--- a/frontend/src/modules/shuiWenNianNeiFenBu/index.vue
+++ b/frontend/src/modules/shuiWenNianNeiFenBu/index.vue
@@ -43,6 +43,7 @@ import { useJidiSelectEventStore } from '@/store/modules/jidiSelectEvent';
 import YaerAverage from './TwoLayers/yaerAverage.vue';
 
 import { MapClass } from '@/components/gis/map.class';
+import { useDraggable } from '@/utils/drag';
 
 const JidiSelectEventStore = useJidiSelectEventStore();
 // 水温年内分布数据（响应式）
@@ -52,7 +53,7 @@ const showemit = ref(true);
 // 弹框相关状态
 const modalVisible = ref(false);
 const currentData = ref<any>({});
-
+useDraggable(modalVisible, { boundary: true, resetOnOpen: true });
 const chartRef = ref<HTMLElement | null>(null);
 let chartInstance: echarts.ECharts | null = null;
 // 选择器配置
diff --git a/frontend/src/modules/shuidianhuangjingjieruMod/DataTable.vue b/frontend/src/modules/shuidianhuangjingjieruMod/DataTable.vue
index 6ec73248..4de785e7 100644
--- a/frontend/src/modules/shuidianhuangjingjieruMod/DataTable.vue
+++ b/frontend/src/modules/shuidianhuangjingjieruMod/DataTable.vue
@@ -27,6 +27,7 @@ import { ref, watch } from 'vue';
 import { getVmsstbprptKendoList } from '@/api/home';
 import { useJidiSelectEventStore } from '@/store/modules/jidiSelectEvent';
 import ShuiDianKaiFQKTwoLayer from './TwoLayer/ShuiDianKaiFQKTwoLayer.vue';
+import { useDraggable } from '@/utils/drag';
 
 defineOptions({
     name: 'DataTable'
@@ -43,7 +44,7 @@ const tableData = ref<any[]>([]);
 
 const modalVisible = ref(false);
 const modalProps = ref<any>({});
-
+useDraggable(modalVisible, { boundary: true, resetOnOpen: true });
 const openDialog = (record: any) => {
     const currentJidiInfo = JidiSelectEventStore.selectedItem;
     const isAll = currentJidiInfo?.wbsCode === 'all';
diff --git a/frontend/src/modules/shuishengshengtaijiance/index.vue b/frontend/src/modules/shuishengshengtaijiance/index.vue
index 723cb7dc..191134c4 100644
--- a/frontend/src/modules/shuishengshengtaijiance/index.vue
+++ b/frontend/src/modules/shuishengshengtaijiance/index.vue
@@ -68,6 +68,7 @@ import SsstdcgkTk from './SsstdcgkTk.vue';
 import { wbsbGetKendoList, getDftYear, getWeFisht } from '@/api/stdc';
 import moment from 'moment';
 import { Label } from 'cesium';
+import { useDraggable } from '@/utils/drag';
 
 // 定义组件名
 defineOptions({
@@ -80,7 +81,7 @@ const dataLoading = ref(false);
 
 // ==================== 弹框状态 ====================
 const modalVisible = ref(false);
-
+useDraggable(modalVisible, { boundary: true, resetOnOpen: true });
 // ==================== 响应式变量定义 ====================
 // 选择器配置
 const select = ref({
diff --git a/frontend/src/modules/shuiwenjiancegongzuokaizhangqingkuang/index.vue b/frontend/src/modules/shuiwenjiancegongzuokaizhangqingkuang/index.vue
index f3f1a2dd..00aafd76 100644
--- a/frontend/src/modules/shuiwenjiancegongzuokaizhangqingkuang/index.vue
+++ b/frontend/src/modules/shuiwenjiancegongzuokaizhangqingkuang/index.vue
@@ -40,6 +40,8 @@ import SidePanelItem from "@/components/SidePanelItem/index.vue";
 import { getKendoListCust, baseEvnmAutoMonitorGetKendoListCust } from "@/api/sw";
 import { useJidiSelectEventStore } from "@/store/modules/jidiSelectEvent";
 import ShuiwenjiancegongzuoEJ from "./shuiwenjiancegongzuoEJ.vue"
+import { useDraggable } from '@/utils/drag';
+
 const JidiSelectEventStore = useJidiSelectEventStore();
 // 定义组件名（便于调试和递归）
 defineOptions({
@@ -68,7 +70,7 @@ const loading = ref(false);
 // 弹框相关状态
 const modalVisible = ref(false);
 const currentFacility = ref<any>(null);
-
+useDraggable(modalVisible, { boundary: true, resetOnOpen: true });
 // 点击处理函数
 const handleFacilityClick = (facility: any) => {
   // console.log(facility);
diff --git a/frontend/src/modules/shuizhijiancegongzuoQK/index.vue b/frontend/src/modules/shuizhijiancegongzuoQK/index.vue
index d655156f..e418008b 100644
--- a/frontend/src/modules/shuizhijiancegongzuoQK/index.vue
+++ b/frontend/src/modules/shuizhijiancegongzuoQK/index.vue
@@ -33,6 +33,8 @@ import SidePanelItem from '@/components/SidePanelItem/index.vue';
 import { useJidiSelectEventStore } from "@/store/modules/jidiSelectEvent";
 import { msstbprptGetKendoList } from '@/api/sz'
 import ShuiwenjiancegongzuoEJ from "./shuiwenjiancegongzuoEJ.vue"
+import { useDraggable } from '@/utils/drag';
+
 // 定义组件名（便于调试和递归）
 defineOptions({
     name: 'shuizhijiancegongzuoQK'
@@ -74,7 +76,7 @@ const modalVisible = ref(false);
 const currentFacility = ref<any>(null);
 const baseid = ref("")
 
-
+useDraggable(modalVisible, { boundary: true, resetOnOpen: true });
 //获取水质监测工作开展情况数据
 const getDataList = async () => {
     loading.value = true;
diff --git a/frontend/src/modules/yanchengshuiwenChangeMod/index.vue b/frontend/src/modules/yanchengshuiwenChangeMod/index.vue
index cc98cf77..ed01ba7f 100644
--- a/frontend/src/modules/yanchengshuiwenChangeMod/index.vue
+++ b/frontend/src/modules/yanchengshuiwenChangeMod/index.vue
@@ -460,9 +460,7 @@ const getSelectConfig = async () => {
         return indexA - indexB;
       });
       select.value.options = filterSelectOptions(dataMapNameArr);
-      if (baseid.value === 'all') {
-        select.value.value = 'SJLY1U';
-      } else if (filterSelectOptions(dataMapNameArr)[0]?.children) {
+      if (filterSelectOptions(dataMapNameArr)[0]?.children) {
         select.value.value =
           filterSelectOptions(dataMapNameArr)[0]?.children[0]?.value;
       } else if (filterSelectOptions(dataMapNameArr)[0]?.value) {
diff --git a/frontend/src/modules/yunXingGaoJIng/Aisbdbyx/AISBTK.vue b/frontend/src/modules/yunXingGaoJIng/Aisbdbyx/AISBTK.vue
index ecf4260c..5e9ae3d7 100644
--- a/frontend/src/modules/yunXingGaoJIng/Aisbdbyx/AISBTK.vue
+++ b/frontend/src/modules/yunXingGaoJIng/Aisbdbyx/AISBTK.vue
@@ -396,6 +396,7 @@ import { postIdUrl } from '@/api/mapModal';
 import dayjs from 'dayjs';
 import { useJidiSelectEventStore } from '@/store/modules/jidiSelectEvent';
 import videoCover from '@/assets/images/videFm.jpg';
+import { useDraggable } from '@/utils/drag';
 
 const baseUrl = import.meta.env.VITE_APP_ATTACHMENT_URL;
 
@@ -489,7 +490,7 @@ const detailType = ref('');
 const detailDataType = computed(() => detailActiveKey.value);
 const qingpiaoModalVisible = ref(false);
 const qingpiaoFids = ref<string[]>([]);
-
+useDraggable(detailModalVisible, { boundary: true, resetOnOpen: true });
 // 日历状态映射（与React端一致）
 const calendarStatusMap: Record<
   string,
diff --git a/frontend/src/modules/yunXingGaoJIng/Aisbdbyx/index.vue b/frontend/src/modules/yunXingGaoJIng/Aisbdbyx/index.vue
index 47487ba8..14115f29 100644
--- a/frontend/src/modules/yunXingGaoJIng/Aisbdbyx/index.vue
+++ b/frontend/src/modules/yunXingGaoJIng/Aisbdbyx/index.vue
@@ -50,6 +50,7 @@ import SidePanelItem from '@/components/SidePanelItem/index.vue';
 import AISBTK from './AISBTK.vue';
 import { getAisbdbyxList } from '@/api/zngj';
 import dayjs from 'dayjs';
+import { useDraggable } from '@/utils/drag';
 
 // 定义组件名（便于调试和递归）
 defineOptions({
@@ -104,7 +105,7 @@ const handleCardClick = (tabIdx: string) => {
 const handleModalClose = () => {
     modalVisible.value = false;
 };
-
+useDraggable(modalVisible, { boundary: true, resetOnOpen: true });
 // ==================== 获取卡片统计数据 ====================
 const getCardData = async () => {
     if (!datetimePicker.value.value || !baseid.value) return;
diff --git a/frontend/src/modules/zengZhiJiHuaWanChengQingKuang/index.vue b/frontend/src/modules/zengZhiJiHuaWanChengQingKuang/index.vue
index 420540fe..221a2c68 100644
--- a/frontend/src/modules/zengZhiJiHuaWanChengQingKuang/index.vue
+++ b/frontend/src/modules/zengZhiJiHuaWanChengQingKuang/index.vue
@@ -50,6 +50,8 @@ import {
 import { useJidiSelectEventStore } from '@/store/modules/jidiSelectEvent';
 import { MapClass } from '@/components/gis/map.class';
 import ZengZhiZhanQingKuangTwoLayers from './TwoLayers/ZengZhiZhanQingKuangTwoLayers.vue';
+import { useDraggable } from '@/utils/drag';
+
 const JidiSelectEventStore = useJidiSelectEventStore();
 
 const baseid = ref('');
@@ -65,7 +67,7 @@ let chartInstance: ECharts | null = null;
 // 弹窗控制
 const dialogVisible = ref(false);
 const dialogData = ref<any>(null);
-
+useDraggable(dialogVisible, { boundary: true, resetOnOpen: true });
 // 当前选中的站点选项
 const selectedOption = computed(() => {
   return select.value.options.find(
diff --git a/frontend/src/modules/zengZhiZhanJieShaoMod/index.vue b/frontend/src/modules/zengZhiZhanJieShaoMod/index.vue
index 777d8ec2..e9cb1ecf 100644
--- a/frontend/src/modules/zengZhiZhanJieShaoMod/index.vue
+++ b/frontend/src/modules/zengZhiZhanJieShaoMod/index.vue
@@ -63,6 +63,8 @@ import SidePanelItem from '@/components/SidePanelItem/index.vue';
 import { useJidiSelectEventStore } from '@/store/modules/jidiSelectEvent';
 import { msstbprptGetKendoList } from '@/api/zzfl';
 import ArtsDetail from '@/components/carouselIntroduce/ArtsDetail.vue';
+import { useDraggable } from '@/utils/drag';
+
 // 定义组件名（便于调试和递归）
 defineOptions({
   name: 'zengZhiZhanJieShaoMod'
@@ -103,7 +105,7 @@ const isHovering = ref(false);
 
 // 是否正在切换动画中（用于禁用transition）
 const isTransitioning = ref(false);
-
+useDraggable(modalVisible, { boundary: true, resetOnOpen: true });
 // 初始化渲染数组（克隆首尾项）
 const initRenderData = () => {
   const length = originalMediaData.value.length;
diff --git a/frontend/src/modules/zengzhizhanjiansheyunxing/index.vue b/frontend/src/modules/zengzhizhanjiansheyunxing/index.vue
index ec72eb90..17218d70 100644
--- a/frontend/src/modules/zengzhizhanjiansheyunxing/index.vue
+++ b/frontend/src/modules/zengzhizhanjiansheyunxing/index.vue
@@ -60,6 +60,8 @@ import SidePanelItem from '@/components/SidePanelItem/index.vue';
 import { overviewGetKendoListCust } from '@/api/zzfl';
 import { useJidiSelectEventStore } from '@/store/modules/jidiSelectEvent';
 import WholeValuedStationOverviewDetail from "./WholeValuedStationOverviewDetail/index.vue"
+import { useDraggable } from '@/utils/drag';
+
 // 定义组件名（便于调试和递归）
 defineOptions({
   name: 'zengzhizhanjiansheyunxing'
@@ -68,6 +70,7 @@ const JidiSelectEventStore = useJidiSelectEventStore();
 const baseid = ref('');
 const loading = ref(false);
 const dialogVisible = ref(false);
+useDraggable(dialogVisible, { boundary: true, resetOnOpen: true });
 const dialogTitle = ref('增殖站概况');
 const datetimePicker = ref({
   show: true,
diff --git a/frontend/src/store/modules/shuJuTianBao.ts b/frontend/src/store/modules/shuJuTianBao.ts
index e36eb104..7e29e00a 100644
--- a/frontend/src/store/modules/shuJuTianBao.ts
+++ b/frontend/src/store/modules/shuJuTianBao.ts
@@ -27,6 +27,7 @@ export const useShuJuTianBaoStore = defineStore('shuJuTianBao', () => {
     try {
       baseLoading.value = true;
       const res = await getBaseDropdown({});
+      // debugger
       if (res.data && Array.isArray(res.data)) {
         const list = [...res.data];
         // 直接赋值给 ref，触发响应式更新
@@ -58,10 +59,15 @@ export const useShuJuTianBaoStore = defineStore('shuJuTianBao', () => {
     }
   };
   // 获取电站列表
-  const getEngOption = async (rvcd: string) => {
+  const getEngOption = async (rvcd: string, type: string) => {
     try {
       engLoading.value = true;
-      const param = rvcd === 'all' ? {} : { reachcd: rvcd };
+      let param:any
+      if (type == 'baseId') {
+        param = rvcd === 'all' ? {} : { baseId: rvcd };
+      } else {
+        param = rvcd === 'all' ? {} : { reachcd: rvcd };
+      }
       const res = await getEngInfoDropdown(param);
       if (res.data && Array.isArray(res.data)) {
         // 直接赋值给 ref
diff --git a/frontend/src/utils/drag.ts b/frontend/src/utils/drag.ts
index 79442479..39901184 100644
--- a/frontend/src/utils/drag.ts
+++ b/frontend/src/utils/drag.ts
@@ -26,21 +26,23 @@ export function useDraggable(
   let cleanup: (() => void) | null = null;
 
   const initDrag = (): (() => void) | null => {
-    const modalContent = document.querySelector(
-      modalSelector
-    ) as HTMLElement | null;
-    const dragHandle = document.querySelector(handle) as HTMLElement | null;
-    if (!modalContent || !dragHandle) return null;
-
-    // 重置位置到居中
     if (resetOnOpen) {
-      modalContent.style.position = '';
-      modalContent.style.left = '';
-      modalContent.style.top = '';
-      modalContent.style.margin = '';
-      modalContent.style.transform = '';
+      const modalContents = document.querySelectorAll(
+        modalSelector
+      ) as NodeListOf<HTMLElement>;
+      modalContents.forEach(content => {
+        if (content.offsetParent !== null) {
+          content.style.position = '';
+          content.style.left = '';
+          content.style.top = '';
+          content.style.margin = '';
+          content.style.transform = '';
+          content.style.width = '';
+        }
+      });
     }
 
+    let currentModalContent: HTMLElement | null = null;
     let isDragging = false;
     let startX = 0;
     let startY = 0;
@@ -56,19 +58,30 @@ export function useDraggable(
     };
 
     const onPointerDown = (e: MouseEvent | TouchEvent) => {
+      const target = e.target instanceof HTMLElement ? e.target : null;
+      const dragHandle = target?.closest(handle) as HTMLElement | null;
+
+      if (!dragHandle) return;
+
+      const modalContent = dragHandle.closest(
+        modalSelector
+      ) as HTMLElement | null;
+      if (!modalContent) return;
+
       if (
-        e.target instanceof HTMLElement &&
-        (e.target.closest('.ant-modal-close') ||
-          e.target.closest('button') ||
-          e.target.closest('input') ||
-          e.target.closest('select') ||
-          e.target.closest('textarea') ||
-          e.target.closest('a'))
+        target.closest('.ant-modal-close') ||
+        target.closest('button') ||
+        target.closest('input') ||
+        target.closest('select') ||
+        target.closest('textarea') ||
+        target.closest('a')
       )
         return;
 
       e.preventDefault();
       isDragging = true;
+      currentModalContent = modalContent;
+
       const rect = modalContent.getBoundingClientRect();
       startLeft = rect.left;
       startTop = rect.top;
@@ -76,7 +89,6 @@ export function useDraggable(
       startX = pos.clientX - startLeft;
       startY = pos.clientY - startTop;
 
-      // --- 新增：固定宽度 ---
       const currentWidth = modalContent.offsetWidth;
       modalContent.style.width = currentWidth + 'px';
 
@@ -91,46 +103,63 @@ export function useDraggable(
       document.addEventListener('touchmove', onPointerMove, { passive: false });
       document.addEventListener('touchend', onPointerUp);
     };
+
     const onPointerMove = (e: MouseEvent | TouchEvent) => {
-      if (!isDragging) return;
+      if (!isDragging || !currentModalContent) return;
       e.preventDefault();
       const pos = getPointerPos(e);
       let newLeft = pos.clientX - startX;
       let newTop = pos.clientY - startY;
 
       if (boundary) {
-        const maxX = window.innerWidth - modalContent.offsetWidth;
-        const maxY = window.innerHeight - modalContent.offsetHeight;
+        const maxX = window.innerWidth - currentModalContent.offsetWidth;
+        const maxY = window.innerHeight - currentModalContent.offsetHeight;
         newLeft = Math.max(0, Math.min(newLeft, maxX));
         newTop = Math.max(0, Math.min(newTop, maxY));
       }
 
-      modalContent.style.left = `${newLeft}px`;
-      modalContent.style.top = `${newTop}px`;
+      currentModalContent.style.left = `${newLeft}px`;
+      currentModalContent.style.top = `${newTop}px`;
     };
 
     const onPointerUp = () => {
+      if (!currentModalContent) return;
       isDragging = false;
-      modalContent.style.userSelect = '';
-      modalContent.style.webkitUserSelect = '';
+      currentModalContent.style.userSelect = '';
+      currentModalContent.style.webkitUserSelect = '';
       document.removeEventListener('mousemove', onPointerMove);
       document.removeEventListener('mouseup', onPointerUp);
       document.removeEventListener('touchmove', onPointerMove);
       document.removeEventListener('touchend', onPointerUp);
+      currentModalContent = null;
     };
 
-    dragHandle.addEventListener('mousedown', onPointerDown);
-    dragHandle.addEventListener('touchstart', onPointerDown, {
+    document.addEventListener('mousedown', onPointerDown);
+    document.addEventListener('touchstart', onPointerDown, {
       passive: false
     });
 
     return () => {
-      dragHandle.removeEventListener('mousedown', onPointerDown);
-      dragHandle.removeEventListener('touchstart', onPointerDown);
+      document.removeEventListener('mousedown', onPointerDown);
+      document.removeEventListener('touchstart', onPointerDown);
       document.removeEventListener('mousemove', onPointerMove);
       document.removeEventListener('mouseup', onPointerUp);
       document.removeEventListener('touchmove', onPointerMove);
       document.removeEventListener('touchend', onPointerUp);
+
+      const modalContents = document.querySelectorAll(
+        modalSelector
+      ) as NodeListOf<HTMLElement>;
+      modalContents.forEach(content => {
+        content.style.position = '';
+        content.style.left = '';
+        content.style.top = '';
+        content.style.margin = '';
+        content.style.transform = '';
+        content.style.width = '';
+        content.style.userSelect = '';
+        content.style.webkitUserSelect = '';
+      });
     };
   };
 
diff --git a/frontend/src/views/DataQueryMenuModule/components/conventionalHydropower/BasicData/DeleteConfirmModal.vue b/frontend/src/views/DataQueryMenuModule/components/conventionalHydropower/BasicData/DeleteConfirmModal.vue
index a08f649c..f47acd92 100644
--- a/frontend/src/views/DataQueryMenuModule/components/conventionalHydropower/BasicData/DeleteConfirmModal.vue
+++ b/frontend/src/views/DataQueryMenuModule/components/conventionalHydropower/BasicData/DeleteConfirmModal.vue
@@ -40,6 +40,7 @@
 import { ref } from 'vue';
 import { message } from 'ant-design-vue';
 import { deletePowerInfo } from '@/api/DataQueryMenuModule';
+import { useDraggable } from '@/utils/drag';
 
 const props = withDefaults(
   defineProps<{
@@ -72,7 +73,8 @@ const open = (record: any, callback: Function) => {
   dataSourceVisible.value = true;
   onSuccess.value = callback;
 };
-
+useDraggable(dataSourceVisible, { boundary: true, resetOnOpen: true });
+useDraggable(confirmVisible, { boundary: true, resetOnOpen: true });
 // 修改依据确认
 const handleDataSourceConfirm = () => {
   dataSourceVisible.value = false;
diff --git a/frontend/src/views/DataQueryMenuModule/components/monitorData/FishData/index.vue b/frontend/src/views/DataQueryMenuModule/components/monitorData/FishData/index.vue
index 3b60c6b9..e4fa0b8b 100644
--- a/frontend/src/views/DataQueryMenuModule/components/monitorData/FishData/index.vue
+++ b/frontend/src/views/DataQueryMenuModule/components/monitorData/FishData/index.vue
@@ -58,6 +58,7 @@ import FishDataSearch from './FishDataSearch.vue';
 import BasicTable from '@/components/BasicTable/index.vue';
 import { getFishReleaseMonitorList } from '@/api/DataQueryMenuModule';
 import { calcTableScrollY } from '@/utils/index';
+import { useDraggable } from '@/utils/drag';
 
 const sort = ref<any>([
   {
@@ -93,7 +94,8 @@ const previewImageUrl = ref('');
 // 视频预览
 const videoPreviewVisible = ref(false);
 const previewVideoUrl = ref('');
-
+useDraggable(imagePreviewVisible, { boundary: true, resetOnOpen: true });
+useDraggable(videoPreviewVisible, { boundary: true, resetOnOpen: true });
 const openImagePreview = (url: string) => {
   previewImageUrl.value = import.meta.env.VITE_APP_ATTACHMENT_URL + '/?' + url;
   imagePreviewVisible.value = true;
diff --git a/frontend/src/views/home/huanBaoSheShiYunXingZhuangKuang.vue b/frontend/src/views/home/huanBaoSheShiYunXingZhuangKuang.vue
index 7fc20176..db3e01d6 100644
--- a/frontend/src/views/home/huanBaoSheShiYunXingZhuangKuang.vue
+++ b/frontend/src/views/home/huanBaoSheShiYunXingZhuangKuang.vue
@@ -4,7 +4,7 @@ import RightDrawer from "@/components/RightDrawer/index.vue";
 import HuanbaoMod from "@/modules/huanbaoMod/index.vue" // 环保设施建设情况
 import Dianxingcuoshijieshao from "@/modules/dianxingcuoshijieshao/index.vue" // 环保设施建设情况
 </script>
-
+ 
 <template>
     <div class="moduleContent">
       <div class="leftContent">
diff --git a/frontend/src/views/register/index.vue b/frontend/src/views/register/index.vue
index 6a1cf445..79fccf7a 100644
--- a/frontend/src/views/register/index.vue
+++ b/frontend/src/views/register/index.vue
@@ -279,6 +279,7 @@ import {
 import { message } from 'ant-design-vue';
 import router from '@/router';
 import { encrypt } from '@/utils/rsaEncrypt';
+import { useDraggable } from '@/utils/drag';
 
 // 注册表单数据
 const registerData = reactive({
@@ -510,7 +511,7 @@ const registerRules = {
 const loading = ref(false);
 const activeTab = ref('register');
 const modalVisible = ref(false);
-
+useDraggable(modalVisible, { boundary: true, resetOnOpen: true });
 // 初始化加载集团列表
 const loadGroupList = async () => {
   try {
diff --git a/frontend/src/views/shengTaiDiaoCha/shuiShengShengTaiDiaoCha.vue b/frontend/src/views/shengTaiDiaoCha/shuiShengShengTaiDiaoCha.vue
index e02073aa..d8376bae 100644
--- a/frontend/src/views/shengTaiDiaoCha/shuiShengShengTaiDiaoCha.vue
+++ b/frontend/src/views/shengTaiDiaoCha/shuiShengShengTaiDiaoCha.vue
@@ -7,12 +7,13 @@ import SSSTDCQK from '@/modules/shuiShengShengTaiDiaoCha/index.vue'; // 水生
 import AlongFishMod from '@/modules/alongFishMod/index.vue'; //沿程鱼类变化情况
 import SSSTDCDB from './shuiShengShengTaiDiaoCha/SSSTDCDB.vue';
 import { useJidiSelectEventStore } from '@/store/modules/jidiSelectEvent';
+import { useDraggable } from '@/utils/drag';
 
 const JidiSelectEventStore = useJidiSelectEventStore();
 const modalVisible = ref(false);
 
 const currentItem = computed(() => JidiSelectEventStore.selectedItem);
-
+useDraggable(modalVisible, { boundary: true, resetOnOpen: true });
 const handleOpenModal = () => {
   modalVisible.value = true;
 };
diff --git a/frontend/src/views/shuJuTianBao/guoYuSheShiShuJuTianBao/index.vue b/frontend/src/views/shuJuTianBao/guoYuSheShiShuJuTianBao/index.vue
index 52940870..0a3c1d4f 100644
--- a/frontend/src/views/shuJuTianBao/guoYuSheShiShuJuTianBao/index.vue
+++ b/frontend/src/views/shuJuTianBao/guoYuSheShiShuJuTianBao/index.vue
@@ -226,6 +226,7 @@ import {
 import { Tag } from 'ant-design-vue'; // 确保导入 Tag
 import { getDictItemsByCode } from '@/api/dict';
 import { calcTableScrollY } from '@/utils/index';
+import { useDraggable } from '@/utils/drag';
 
 const baseUrl = import.meta.env.VITE_APP_ATTACHMENT_URL;
 const baseUrlApi = import.meta.env.VITE_APP_BASE_API_URL;
@@ -324,7 +325,7 @@ const baseColumnsConfig: ColumnConfig[] = [
 // --- 状态定义 ---
 const visible = ref(false); // 导入预览 Modal
 const editModalRef = ref<any>(null);
-
+useDraggable(visible, { boundary: true, resetOnOpen: true });
 // 编辑相关状态
 const editModalVisible = ref(false);
 const isView = ref(false);