修改二级弹框选择框默认展示问题，bug修改，添加鱼类增值站功能

frontend/src/api/mapModal/rightModel.ts

@@ -0,0 +1,8 @@
+import request from '@/utils/request';
+export function getPlanFinishDetail(data: any) {
+  return request({
+    url: '/fb/planFinish/GetKendoListCust',
+    method: 'post',
+    data
+  });
+}

frontend/src/assets/svg/runWarning.svg

@@ -0,0 +1 @@
+<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg"><g fill="#FF504F" fill-rule="nonzero"><path d="M8 16c-4.363 0-8-3.637-8-8.001C0 3.635 3.636 0 8 0c4.363 0 8 3.637 8 8 0 4.484-3.637 8-8 8ZM8 1.5C4.43 1.5 1.5 4.432 1.5 8c0 3.57 2.931 6.5 6.5 6.5s6.5-2.932 6.5-6.5S11.569 1.5 8 1.5Z"/><path d="M8 10.623c.345 0 .625.309.625.689l-.007.101C8.574 11.745 8.314 12 8 12c-.345 0-.625-.308-.625-.688l.007-.102c.044-.332.304-.587.618-.587ZM8 4c.552 0 1 .493 1 1.101l-.5 4.456c0 .304-.224.552-.501.552s-.5-.246-.5-.552L7 5.101C7 4.493 7.448 4 8 4Z"/></g></svg>

frontend/src/components/MapModal/components/AIYXSB/index.vue

@@ -609,6 +609,9 @@ const updateTableColumns = () => {
       fixed: col.fixed || undefined,
       ellipsis: col.ellipsis
     };
+    if (col.key == 'tm' || col.key == 'aiVal') {
+      baseCol.sort = true;
+    }
     if (col.dataFormat === 'YYYY-MM-DD' || col.dataType === 'date') {
       baseCol.customRender = ({ text }: any) =>
         text ? dayjs(text).format('YYYY-MM-DD') : '-';

frontend/src/components/MapModal/components/EcologicalFlow.vue

@@ -23,7 +23,7 @@
         <div class="filter-row">
           <a-select
             v-model:value="timeType"
-            style="margin-right: 12px"
+            style="width: 80px"
             :options="timeTypeOptions"
           />
           <a-range-picker
@@ -530,7 +530,9 @@ watch(
   () => props.isActive,
   active => {
     if (active && !hasLoaded.value) {
+      if (modelStore.filter.stllTmType) {
         timeType.value = modelStore.filter.stllTmType;
+      }
       if (modelStore.filter.rangeTm.length > 0) {
         dateRange.value = [
           dayjs(modelStore.filter.rangeTm[0]),

frontend/src/components/MapModal/components/FishZHFX.vue

@@ -304,6 +304,7 @@ const updateChart = (data: any[], columns: any[]) => {
   console.log(sorted[0]);
 
   const option = {
+    // 在 updateChart 函数中，替换 tooltip 配置
     tooltip: {
       trigger: 'axis',
       backgroundColor: 'rgba(50, 50, 50, 0.9)',
@@ -312,15 +313,27 @@ const updateChart = (data: any[], columns: any[]) => {
       formatter: (params: any) => {
         if (!params || params.length === 0) return '';
         const dataIndex = params[0].dataIndex;
-        const fullTime = xAxisData[dataIndex] || '';
+        const dataItem = data[dataIndex]; // data 来自 updateChart 的参数
+        if (!dataItem) return '';
+        const fullTime = dayjs(dataItem.dt).format('YYYY-MM-DD');
         let html = `<div style="font-size:16px;margin-bottom:8px;">${fullTime}</div>`;
-        params.forEach((param: any) => {
+
-          if (param.value == null) return;
+        // 过滤出需要显示的数据列（排除时间列和不可见列）
+        const dataColumns = columns.filter(
+          col => col.dataIndex !== 'dt' && col.visible !== false
+        );
+
+        dataColumns.forEach(col => {
+          const value = dataItem[col.dataIndex];
+          const displayValue = value != null && value !== '' ? value : '-';
+          // 尝试从 params 中匹配该系列的颜色，否则使用默认灰色
+          const matched = params.find((p: any) => p.seriesName === col.title);
+          const color = matched ? matched.color : '#999';
           html += `
         <div style="display:flex;align-items:center;justify-content:space-between;margin:4px 0;">
-              <span style="display:inline-block;width:10px;height:10px;border-radius:50%;background:${param.color};margin-right:8px;"></span>
+          <span style="display:inline-block;width:10px;height:10px;border-radius:50%;background:${color};margin-right:8px;"></span>
-              <span style="flex:1;font-size:14px;text-align:left;margin-right:6px;">${param.seriesName}: </span>
+          <span style="flex:1;font-size:14px;text-align:left;margin-right:6px;">${col.title}: </span>
-              <span style="font-size:14px;min-width:60px;text-align:right;"><strong>${param.value}</strong></span>
+          <span style="font-size:14px;min-width:60px;text-align:right;"><strong>${displayValue}</strong></span>
         </div>
       `;
         });
@@ -330,6 +343,8 @@ const updateChart = (data: any[], columns: any[]) => {
     legend: {
       type: 'scroll',
       top: 10,
+      left: 0,
+      width: '90%',
       data: dataColumns.map(col => col.title),
       textStyle: { fontSize: 12 }
     },
@@ -429,7 +444,7 @@ const fetchData = async () => {
       .map((col: any) => ({
         title: col.title,
         dataIndex: col.dataIndex,
-        width: 120,
+        width: 140,
         customRender: ({ text }: any) => {
           if (col.dataType === 'date' && text) {
             return dayjs(text).format('YYYY-MM-DD');

frontend/src/components/MapModal/index.vue

@@ -568,13 +568,17 @@ const setQGCTabList = async (_tabs: any, stcd: string) => {
     };
     const res2 = await getVideoList(params);
     console.log('', modelStore.params.sttp);
+    console.log('', res2);
+    console.log('', newTabs);
     if (
       res2?.data?.data?.length > 0 ||
       res2?.data?.records?.length > 0 ||
       modelStore.params.sttp == 'WQ'
     ) {
+      console.log(123);
       tabsConfig.value = newTabs;
     } else {
+      console.log(465);
       let arr = ['DW', 'DW_1', 'DW_2', 'DW_3', 'DW_4', 'DW_5', 'DW_6'];
       if (arr.includes(modelStore.params.sttp)) {
         tabsConfig.value = newTabs.filter((item: any) => item.type == 'basic');

frontend/src/components/gis/map.ol.ts

@@ -211,6 +211,8 @@ export class MapOl implements MapInterface {
           } else {
             modelStore.modalVisible = true;
             modelStore.params = detectedFeature.values_;
+            if (detectedFeature.values_.eqtp == 'QEC')
+              modelStore.filter.stllTmType = 'day';
             modelStore.title =
               detectedFeature.values_.titleName || detectedFeature.values_.stnm;
           }

frontend/src/modules/rightSearchDrawer/monitoringTable/components/FlowMeasure.vue

@@ -464,7 +464,10 @@ watch(
   () => modelStore.selectedAnchorPoint?.stcd,
   (newStcd, oldStcd) => {
     if (!newStcd) return;
-    if (newStcd !== oldStcd) fetchData();
+    if (newStcd !== oldStcd) {
+      dateRange.value = initDateRange();
+      fetchData();
+    }
   },
   { immediate: true }
 );

frontend/src/modules/rightSearchDrawer/monitoringTable/components/GYZLLB.vue

@@ -276,7 +276,10 @@ watch(
   () => modelStore.selectedAnchorPoint?.stcd,
   (newStcd, oldStcd) => {
     if (!newStcd) return;
-    if (newStcd !== oldStcd) fetchData();
+    if (newStcd !== oldStcd) {
+      year.value = initYear();
+      fetchData();
+    }
   },
   { immediate: true }
 );

frontend/src/modules/rightSearchDrawer/monitoringTable/components/NormalOperationData.vue

@@ -12,6 +12,7 @@
         class="w-[90px]"
       />
     </template>
+    <a-spin :spinning="loading">
       <div class="chart-row">
         <div
           v-for="(cfg, index) in chartConfigs"
@@ -22,14 +23,17 @@
           <div :ref="el => setChartRef(el, index)" class="chart"></div>
         </div>
       </div>
+    </a-spin>
   </SidePanelItem>
 </template>
 
 <script lang="ts" setup>
-import { ref, onMounted, onBeforeUnmount, nextTick } from 'vue';
+import { ref, watch, onMounted, onBeforeUnmount, nextTick } from 'vue';
 import dayjs, { Dayjs } from 'dayjs';
 import * as echarts from 'echarts';
 import type { ECharts } from 'echarts';
+import { getPlanFinishDetail } from '@/api/mapModal/rightModel';
+import { useModelStore } from '@/store/modules/model';
 import SidePanelItem from '@/components/SidePanelItem/index.vue';
 
 interface PieChartConfig {
@@ -66,6 +70,82 @@ const chartConfigs: PieChartConfig[] = [
   }
 ];
 
+const modelStore = useModelStore();
+const loading = ref(false);
+let skipYearWatch = false;
+
+// 获取图表数据
+const fetchChartData = async () => {
+  loading.value = true;
+  const startTime = selectedYear.value
+    .startOf('year')
+    .format('YYYY-MM-DD HH:mm:ss');
+  const endTime = selectedYear.value
+    .endOf('year')
+    .format('YYYY-MM-DD HH:mm:ss');
+
+  const params = {
+    filter: {
+      logic: 'and',
+      filters: [
+        {
+          field: 'startTime',
+          operator: 'eq',
+          dataType: 'date',
+          value: startTime
+        },
+        { field: 'endTime', operator: 'eq', dataType: 'date', value: endTime },
+        {
+          field: 'stcd',
+          operator: 'eq',
+          dataType: 'string',
+          value: modelStore.selectedAnchorPoint.stcd
+        }
+      ]
+    }
+  };
+
+  try {
+    const res = await getPlanFinishDetail(params);
+    console.log('getPlanFinishDetail response:', res);
+    const data = res.data?.data[0];
+    console.log('data:', data);
+    if (data) {
+      chartConfigs[0].data = [
+        {
+          name: '未完成数量',
+          value: Number((data.unfinishedQty / 10000).toFixed(2)) || 0
+        },
+        {
+          name: '已完成数量',
+          value: Number((data.finishedQty / 10000).toFixed(2)) || 0
+        }
+      ];
+      chartConfigs[1].data = [
+        { name: '未完成种类', value: data.unfinishedFtp ?? 0 },
+        { name: '已完成种类', value: data.finishedFtp ?? 0 }
+      ];
+    } else {
+      // 数据为空时清空上次数据
+      chartConfigs[0].data = [
+        { name: '未完成数量', value: 0 },
+        { name: '已完成数量', value: 0 }
+      ];
+      chartConfigs[1].data = [
+        { name: '未完成种类', value: 0 },
+        { name: '已完成种类', value: 0 }
+      ];
+    }
+    // 更新图表
+    renderChart(0);
+    renderChart(1);
+  } catch (err) {
+    console.error('getPlanFinishDetail error:', err);
+  } finally {
+    loading.value = false;
+  }
+};
+
 // ==================== 年份选择（默认今年） ====================
 const selectedYear = ref<Dayjs>(dayjs());
 const disabledYear = (current: Dayjs) =>
@@ -207,6 +287,26 @@ const handleResize = () => {
   });
 };
 
+// stcd 变化时重新获取数据
+watch(
+  () => modelStore.selectedAnchorPoint,
+  () => {
+    skipYearWatch = true;
+    selectedYear.value = dayjs();
+    fetchChartData();
+  },
+  { immediate: true }
+);
+
+// 选择年份变化时重新获取数据（跳过由站点切换触发的年份重置）
+watch(selectedYear, () => {
+  if (skipYearWatch) {
+    skipYearWatch = false;
+    return;
+  }
+  fetchChartData();
+});
+
 onMounted(() => {
   nextTick(() => {
     setTimeout(() => {

frontend/src/modules/rightSearchDrawer/monitoringTable/components/QXDInfo.vue

@@ -710,6 +710,8 @@ watch(
   (newStcd, oldStcd) => {
     if (!newStcd) return;
     if (newStcd !== oldStcd) {
+      wtDateRange.value = initDateRange();
+      llDateRange.value = initDateRange();
       loadWtStationList();
       loadLlStationList();
     }

frontend/src/modules/rightSearchDrawer/monitoringTable/components/VerticalWaterTemperature.vue

@@ -402,7 +402,10 @@ watch(
   () => modelStore.selectedAnchorPoint?.stcd,
   (newStcd, oldStcd) => {
     if (!newStcd) return;
-    if (newStcd !== oldStcd) fetchData();
+    if (newStcd !== oldStcd) {
+      dateRange.value = initDateRange();
+      fetchData();
+    }
   },
   { immediate: true }
 );

frontend/src/modules/rightSearchDrawer/monitoringTable/components/WaterQuality.vue

@@ -667,7 +667,10 @@ watch(
   () => modelStore.selectedAnchorPoint?.stcd,
   (newStcd, oldStcd) => {
     if (!newStcd) return;
-    if (newStcd !== oldStcd) fetchData();
+    if (newStcd !== oldStcd) {
+      dateRange.value = initDateRange();
+      fetchData();
+    }
   },
   { immediate: true }
 );

frontend/src/modules/rightSearchDrawer/monitoringTable/components/WaterTemperature.vue

@@ -494,7 +494,10 @@ watch(
   () => modelStore.selectedAnchorPoint?.stcd,
   (newStcd, oldStcd) => {
     if (!newStcd) return;
-    if (newStcd !== oldStcd) fetchData();
+    if (newStcd !== oldStcd) {
+      dateRange.value = initDateRange();
+      fetchData();
+    }
   },
   { immediate: true }
 );

frontend/src/modules/rightSearchDrawer/monitoringTable/components/monitorInfo.vue

@@ -534,7 +534,10 @@ watch(
   () => modelStore.selectedAnchorPoint?.stcd,
   (newStcd, oldStcd) => {
     if (!newStcd) return;
-    if (newStcd !== oldStcd) fetchData();
+    if (newStcd !== oldStcd) {
+      dateRange.value = initDateRange();
+      fetchData();
+    }
   },
   { immediate: true }
 );