修改生态流量

frontend/.env.development

@@ -7,7 +7,7 @@ VITE_APP_TITLE = '水电水利建设项目全过程环境管理信息平台'
 VITE_APP_PORT = 3000
 VITE_APP_BASE_API = '/dev-api'
 # 本地环境
-VITE_APP_BASE_URL = 'http://10.84.121.199:8093'
+VITE_APP_BASE_URL = 'http://localhost:8093'
 # 测试环境
 # VITE_APP_BASE_URL = 'http://172.16.21.142:8093'
 # VITE_APP_BASE_URL = 'http://172.16.21.142:8096'

frontend/src/api/mapModal/index.ts

@@ -204,16 +204,42 @@ export function getMonitorDataWaterQualityList(data: any) {
     data
   });
 }
+
 // 生态流量 - 限制范围查询 - 日
 export function getMonitorDataWaterTempVerticalDay(data: any) {
   return request({
-    url: '/eq/data/day/GetKendoListCust',
+    url: '/eq/interval/qgc/day/GetKendoListCust',
     method: 'post',
     data
   });
 }
 // 生态流量 - 限制范围查询 - 小时
 export function getMonitorDataWaterTempVerticalHour(data: any) {
+  return request({
+    url: '/eq/interval/qgc/hour/GetKendoListCust',
+    method: 'post',
+    data
+  });
+}
+// 生态流量 - 查询限制和来源
+export function getEngLimit(data: any) {
+  return request({
+    url: '/eq/data/getEngLimit',
+    method: 'post',
+    data
+  });
+}
+
+// 生态流量 - 列表 - 日
+export function getMonitorDataWaterTempVerticalDayList(data: any) {
+  return request({
+    url: '/eq/data/day/GetKendoListCust',
+    method: 'post',
+    data
+  });
+}
+// 生态流量 - 列表 - 小时
+export function getMonitorDataWaterTempVerticalHourList(data: any) {
   return request({
     url: '/eq/data/GetKendoListCust',
     method: 'post',
@@ -493,3 +519,18 @@ export function getFishDistributionList(data: any) {
     data
   });
 }
+// 生态流量泄放设施 - 监测数据 年份 没接
+export function getFlowDischargeYear(data: any) {
+  return request({
+    url: '/wmp-env-server/env/operat/default/year',
+    method: 'post',
+    data
+  });
+}
+export function getFlowDischargeList(code: string, data: any) {
+  return request({
+    url: `/apo/dec-lygk-base-server/base/stbprpData/GetKendoListCust?tbCode=${code}`,
+    method: 'post',
+    data
+  });
+}

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

@@ -21,18 +21,13 @@
           </div>
         </div>
         <div class="filter-row">
-          <a-select
-            v-model:value="timeType"
-            style="width: 120px"
-            :options="timeTypeOptions"
-          />
           <a-range-picker
             v-model:value="dateRange"
             :format="dateFormat"
-            :show-time="showTime ? showTimeConfig : false"
+            :show-time="showTime"
             :allowClear="false"
             style="margin-left: 12px"
-            :presets="datePresets"
+            :presets="DateSetting.RangeButton.month1"
           />
           <a-button
             type="primary"
@@ -62,8 +57,11 @@
 import { ref, onMounted, computed, watch, onUnmounted, nextTick } from 'vue';
 import * as echarts from 'echarts';
 import {
+  getEngLimit,
   getMonitorDataWaterTempVerticalDay,
-  getMonitorDataWaterTempVerticalHour
+  getMonitorDataWaterTempVerticalHour,
+  getMonitorDataWaterTempVerticalDayList,
+  getMonitorDataWaterTempVerticalHourList
 } from '@/api/mapModal';
 import { useModelStore } from '@/store/modules/model';
 import { DateSetting } from '@/utils/enumeration';
@@ -106,14 +104,7 @@ const dateRange = ref<[dayjs.Dayjs, dayjs.Dayjs] | undefined>(initDateRange());
 
 // 时间选择器配置
 const showTime = computed(() => timeType.value === 'hour');
-const dateFormat = computed(() =>
+const dateFormat = computed(() => 'YYYY-MM-DD');
-  timeType.value === 'hour' ? 'YYYY-MM-DD HH:mm' : 'YYYY-MM-DD'
-);
-const datePresets = computed(() =>
-  timeType.value === 'day'
-    ? DateSetting.RangeButton.month1
-    : DateSetting.RangeButton.hour
-);
 const showTimeConfig = {
   format: 'HH:mm',
   hourStep: 1,
@@ -141,7 +132,7 @@ const fetchLimitInfo = async () => {
     const stcd = modelStore.params.stcd;
     const { startTime, endTime } = getDateRange();
 
-    const res = await getMonitorDataWaterTempVerticalHour({
+    const res = await getEngLimit({
       filter: {
         logic: 'and',
         filters: [
@@ -162,7 +153,15 @@ const fetchLimitInfo = async () => {
       }
     });
     if (res?.data) {
-      limitInfo.value = res.data.eqmnStr || '';
+      if (modelStore.filter.stllgzlx === 'qecInterval') {
+        limitInfo.value = res.data.eqmnStr || '';
+      } else if (modelStore.filter.stllgzlx === 'mwrInterval') {
+        limitInfo.value = res.data.eqmnmwrStr || '';
+      } else if (modelStore.filter.stllgzlx === 'avqInterval') {
+        limitInfo.value = res.data.avqStr || '';
+      } else {
+        limitInfo.value = '';
+      }
     }
   } catch (error) {
     console.error('获取限值信息失败:', error);
@@ -174,8 +173,7 @@ const fetchDayData = async () => {
   try {
     const stcd = modelStore.params.stcd;
     const { startTime, endTime } = getDateRange();
-
+    const filter = {
-    const res = await getMonitorDataWaterTempVerticalDay({
       filter: {
         logic: 'and',
         filters: [
@@ -194,19 +192,62 @@ const fetchDayData = async () => {
           }
         ]
       }
-    });
+    };
+
+    const apiFn =
+      timeType.value === 'day'
+        ? getMonitorDataWaterTempVerticalDay
+        : getMonitorDataWaterTempVerticalHour;
+
+    const res = await apiFn(filter);
     if (res?.data && res?.data?.data && res?.data?.data[0]) {
       const record = res.data?.data[0]?.lastTmEngEqDataVo || res.data?.data[0];
-      if (
+      if (modelStore.filter.stllgzlx === 'qecInterval') {
-        res.data?.data[0]?.qecRate !== null &&
+        complianceRate.value =
-        res.data?.data[0]?.qecRate !== undefined
+          Number(res.data?.data[0]?.qecRate).toFixed(2) || '';
-      ) {
+      } else if (modelStore.filter.stllgzlx === 'mwrInterval') {
-        complianceRate.value = Number(res.data?.data[0]?.qecRate).toFixed(2);
+        complianceRate.value =
+          Number(res.data?.data[0]?.mwrRate).toFixed(2) || '';
+      } else if (modelStore.filter.stllgzlx === 'avqInterval') {
+        complianceRate.value =
+          Number(res.data?.data[0]?.avqRate).toFixed(2) || '';
       }
       if (record.qecC !== null && record.qecC !== undefined) {
         unqualifiedCount.value = record.qecC;
       }
     }
+    if (modelStore.filter.stllgzlx === 'qecInterval') {
+      filter.filter.filters.push({
+        field: 'sfdb',
+        operator: 'eq',
+        dataType: 'string',
+        value: 0
+      });
+    } else if (modelStore.filter.stllgzlx === 'mwrInterval') {
+      filter.filter.filters.push({
+        field: 'mwrSfdb',
+        operator: 'eq',
+        dataType: 'string',
+        value: 0
+      });
+    } else if (modelStore.filter.stllgzlx === 'avqInterval') {
+      filter.filter.filters.push({
+        field: 'avqSfdb',
+        operator: 'eq',
+        dataType: 'string',
+        value: 0
+      });
+    }
+
+    const apiFn1 =
+      timeType.value === 'day'
+        ? getMonitorDataWaterTempVerticalDayList
+        : getMonitorDataWaterTempVerticalHourList;
+
+    let hourRes = await apiFn1(filter);
+    if (hourRes.data) {
+      unqualifiedCount.value = hourRes.data.total;
+    }
   } catch (error) {
     console.error('获取日数据失败:', error);
   }
@@ -260,7 +301,6 @@ const updateChart = (data: any[]) => {
       formatter: (params: any) => {
         if (!params || params.length === 0) return '';
         const dataIndex = params[0].dataIndex;
-        console.log(sorted[dataIndex]);
         const fullTime =
           timeType.value === 'hour'
             ? sorted[dataIndex]?.tm
@@ -403,7 +443,6 @@ const updateChart = (data: any[]) => {
 };
 
 const initChart = () => {
-  console.log(chartRef.value);
   if (!chartRef.value) return;
   if (chartInstance) {
     chartInstance.dispose();
@@ -436,8 +475,8 @@ const fetchChartData = async () => {
 
     const apiFn =
       timeType.value === 'day'
-        ? getMonitorDataWaterTempVerticalDay
+        ? getMonitorDataWaterTempVerticalDayList
-        : getMonitorDataWaterTempVerticalHour;
+        : getMonitorDataWaterTempVerticalHourList;
 
     const res = await apiFn({
       filter: {
@@ -482,17 +521,17 @@ const handleQuery = () => {
   fetchChartData();
 };
 
-// 监听 timeType 切换时重置日期范围
-watch(timeType, () => {
-  dateRange.value = initDateRange();
-  hasData.value = true;
-  fetchChartData();
-});
-
 watch(
   () => props.isActive,
   active => {
     if (active && !hasLoaded.value) {
+      timeType.value = modelStore.filter.stllTmType;
+      if (modelStore.filter.rangeTm.length > 0) {
+        dateRange.value = [
+          dayjs(modelStore.filter.rangeTm[0]),
+          dayjs(modelStore.filter.rangeTm[1])
+        ];
+      }
       fetchLimitInfo();
       fetchDayData();
       // 初始化图表
@@ -519,7 +558,7 @@ onUnmounted(() => {
 <style lang="scss" scoped>
 .ecological-flow {
   .top-section {
-    padding: 16px;
+    padding: 10px 8px;
     background: #fff;
 
     .top-bar {

frontend/src/components/MapModal/components/FlowDischarge.vue

@@ -1,12 +1,460 @@
 <template>
-    <div>
+  <div class="flow-discharge">
-        生态流量泄放设施
+    <a-tabs v-model:activeKey="activeTabKey">
-    </div>
+      <a-tab-pane v-for="tab in tabsList" :key="tab.key" :tab="tab.name" />
+      <template #rightExtra>
+        <div class="search-bar">
+          <a-range-picker
+            v-model:value="dateRange"
+            format="YYYY-MM-DD HH:mm"
+            :show-time="showTimeConfig"
+            :allowClear="false"
+            :presets="DateSetting.RangeButton.month1"
+            :disabled-date="disabledDate"
+          />
+          <a-button type="primary" class="search-btn" @click="handleSearch">
+            查询
+          </a-button>
+        </div>
+      </template>
+    </a-tabs>
+
+    <a-spin :spinning="isLoading" tip="加载中...">
+      <div class="tab-content">
+        <div class="content-body">
+          <div class="chart-wrapper">
+            <div ref="chartRef" class="chart-container"></div>
+            <a-empty
+              v-if="!chartData || chartData.length === 0"
+              description="暂无数据"
+              class="chart-empty"
+            />
+          </div>
+          <div class="table-wrapper">
+            <BasicTable
+              :scrollY="480"
+              :scrollX="tableScrollX"
+              :columns="tableColumns"
+              :data="tableData"
+            />
+          </div>
+        </div>
+      </div>
+    </a-spin>
+  </div>
 </template>
 
 <script lang="ts" setup>
-import { ref, watch } from 'vue';
+import { ref, watch, onBeforeUnmount, onMounted, nextTick } from 'vue';
+import dayjs, { Dayjs } from 'dayjs';
+import * as echarts from 'echarts';
+import { getFlowDischargeYear, getFlowDischargeList } from '@/api/mapModal';
+import { useModelStore } from '@/store/modules/model';
+import BasicTable from '@/components/BasicTable/index.vue';
+import { DateSetting } from '@/utils/enumeration';
+
+const modelStore = useModelStore();
+
+const props = defineProps({
+  isActive: { type: Boolean, default: false }
+});
+
+const hasLoaded = ref(false);
+const isLoading = ref(false);
+const tableData = ref<any[]>([]);
+const chartData = ref<any[]>([]);
+const chartRef = ref<HTMLElement>();
+let chartInstance: echarts.ECharts | null = null;
+
+const tabsList = [{ name: '生态流量泄放设施', key: 'stllxfss.tabs.jcsj' }];
+const activeTabKey = ref('stllxfss.tabs.jcsj');
+
+// 时间选择器配置
+const showTimeConfig = {
+  format: 'HH:mm',
+  hourStep: 1,
+  minuteStep: 5,
+  secondStep: 60
+};
+const disabledDate = (current: Dayjs) =>
+  current && current.isAfter(dayjs(), 'day');
+
+const initDateRange = (): [Dayjs, Dayjs] => {
+  return [dayjs().subtract(7, 'day'), dayjs()];
+};
+const dateRange = ref<[Dayjs, Dayjs] | undefined>(initDateRange());
+
+// 表格列配置
+const tableColumns = [
+  {
+    title: '时间',
+    dataIndex: 'tm',
+    width: 180,
+    fixed: 'left',
+    customRender: ({ text }: any) =>
+      text ? dayjs(text).format('YYYY-MM-DD HH:mm') : '-'
+  },
+  {
+    title: '流量(m³/s)',
+    dataIndex: 'q',
+    width: 130,
+    customRender: ({ text }: any) =>
+      text !== undefined && text !== null ? Number(text) : '-'
+  }
+];
+const tableScrollX = tableColumns.reduce((s, c) => s + (c.width || 100), 0);
+
+// 初始化图表
+const initChart = () => {
+  if (!chartRef.value) return;
+  if (chartInstance) chartInstance.dispose();
+  chartInstance = echarts.init(chartRef.value);
+  updateChart(chartData.value);
+};
+
+// 更新图表
+const updateChart = (data: any[]) => {
+  if (!chartInstance) return;
+  if (!data || data.length === 0) {
+    chartInstance.clear();
+    return;
+  }
+
+  const sorted = [...data].sort(
+    (a, b) => new Date(a.tm).getTime() - new Date(b.tm).getTime()
+  );
+
+  const xAxisData = sorted.map(item => {
+    const hm = dayjs(item.tm).format('HH:mm');
+    if (hm === '00:00') {
+      const date = dayjs(item.tm).format('MM-DD');
+      return `${hm}\n${date}`;
+    }
+    return hm;
+  });
+
+  const qData = sorted.map(item => item.q);
+
+  const option = {
+    tooltip: {
+      trigger: 'axis',
+      backgroundColor: 'rgba(50, 50, 50, 0.9)',
+      textStyle: { color: '#fff', fontSize: 12 },
+      axisPointer: { type: 'cross' },
+      formatter: (params: any) => {
+        if (!params || params.length === 0) return '';
+        const dataIndex = params[0].dataIndex;
+        const fullTime = sorted[dataIndex]?.tm
+          ? dayjs(sorted[dataIndex].tm).format('YYYY-MM-DD HH:mm:ss')
+          : '';
+        let html = `<div style="font-size:16px;margin-bottom:8px;">${fullTime}</div>`;
+        params.forEach((param: any) => {
+          if (param.value == null) return;
+          const displayValue = Number(param.value).toFixed(2);
+          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="flex:1;font-size:14px;text-align:left;margin-right:6px;">${param.seriesName}: </span>
+              <span style="font-size:14px;min-width:60px;text-align:right;"><strong>${displayValue}</strong> (m³/s)</span>
+            </div>
+          `;
+        });
+        return html;
+      }
+    },
+    legend: {
+      type: 'scroll',
+      top: 10,
+      data: ['流量'],
+      textStyle: { fontSize: 12 }
+    },
+    grid: {
+      left: 60,
+      right: 60,
+      top: 80,
+      bottom: 60
+    },
+    xAxis: {
+      type: 'category',
+      data: xAxisData,
+      axisLine: { lineStyle: { color: '#000000' } },
+      axisTick: { show: false },
+      axisLabel: { fontSize: 12 },
+      splitLine: {
+        show: true,
+        lineStyle: { color: '#bfbfbf', type: 'solid' }
+      }
+    },
+    yAxis: [
+      {
+        name: '流量(m³/s)',
+        type: 'value',
+        position: 'left',
+        axisLine: { lineStyle: { color: '#000000' } },
+        scale: true,
+        splitNumber: 9
+      }
+    ],
+    series: [
+      {
+        name: '流量',
+        type: 'line',
+        yAxisIndex: 0,
+        data: qData,
+        smooth: true,
+        symbol: 'circle',
+        symbolSize: 4,
+        lineStyle: { color: '#12C1EA', width: 2 },
+        itemStyle: { color: '#12C1EA' }
+      }
+    ],
+    dataZoom: [
+      {
+        type: 'inside',
+        xAxisIndex: [0],
+        throttle: 50,
+        start: 0,
+        end: 100
+      }
+    ],
+    toolbox: {
+      show: true,
+      feature: {
+        saveAsImage: { title: '保存为图片', type: 'png', pixelRatio: 2 }
+      },
+      right: 20,
+      top: 10
+    }
+  };
+
+  chartInstance.setOption(option, true);
+};
+
+// 获取默认日期
+const fetchDefaultDate = async () => {
+  try {
+    const filterParams = {
+      filter: {
+        logic: 'and',
+        filters: [
+          {
+            field: 'stcd',
+            operator: 'eq',
+            dataType: 'string',
+            value: modelStore.params.stcd
+          },
+          {
+            field: 'sttpCode',
+            operator: 'eq',
+            dataType: 'string',
+            value: 'EQ'
+          }
+        ]
+      }
+    };
+
+    const res = await getFlowDischargeYear(filterParams);
+    const dates = res?.data?.data || [];
+
+    if (dates && dates.length > 0) {
+      // 使用最后一个日期作为结束日期
+      const endDate = dayjs(dates[dates.length - 1]);
+      const startDate = endDate.subtract(7, 'day');
+      dateRange.value = [startDate, endDate];
+    } else {
+      // 没有数据默认当前天
+      dateRange.value = [dayjs().subtract(7, 'day'), dayjs()];
+    }
+  } catch (error) {
+    console.error('获取默认日期失败:', error);
+    // 失败时使用默认前7天
+    dateRange.value = [dayjs().subtract(7, 'day'), dayjs()];
+  }
+};
+
+// 数据请求
+const fetchData = async () => {
+  if (!dateRange.value) return;
+  isLoading.value = true;
+
+  try {
+    const filterParams = {
+      filter: {
+        logic: 'and',
+        filters: [
+          {
+            field: 'stcd',
+            operator: 'eq',
+            dataType: 'string',
+            value: modelStore.params.stcd
+          },
+          {
+            field: 'tm',
+            operator: 'gte',
+            dataType: 'date',
+            value: dateRange.value[0].format('YYYY-MM-DD HH:mm:ss')
+          },
+          {
+            field: 'tm',
+            operator: 'lte',
+            dataType: 'date',
+            value: dateRange.value[1].format('YYYY-MM-DD HH:mm:ss')
+          }
+        ]
+      },
+      sort: [{ field: 'tm', dir: 'asc' }]
+    };
+
+    const res = await getFlowDischargeList('EQ_R', filterParams);
+    const rawData = res?.data?.data || res?.data?.records || [];
+
+    tableData.value = [...rawData].reverse();
+    chartData.value = rawData;
+    nextTick(() => updateChart(rawData));
+  } catch (error) {
+    console.error('获取数据失败:', error);
+    tableData.value = [];
+    chartData.value = [];
+    if (chartInstance) chartInstance.clear();
+  } finally {
+    isLoading.value = false;
+  }
+};
+
+const handleSearch = () => fetchData();
+
+const initData = async () => {
+  if (hasLoaded.value) return;
+
+  // 先获取默认日期
+  await fetchDefaultDate();
+
+  nextTick(() => initChart());
+  fetchData();
+  hasLoaded.value = true;
+};
+
+watch(
+  () => props.isActive,
+  active => {
+    if (active && !hasLoaded.value) initData();
+  },
+  { immediate: true }
+);
+
+watch(
+  () => modelStore.params.stcd,
+  (newStcd, oldStcd) => {
+    if (newStcd && newStcd !== oldStcd) {
+      hasLoaded.value = false;
+      initData();
+    }
+  }
+);
+
+let resizeObserver: ResizeObserver | null = null;
+
+watch(
+  () => props.isActive,
+  active => {
+    if (active && chartRef.value) {
+      setTimeout(() => {
+        if (chartInstance) chartInstance.resize();
+      }, 200);
+      if (!resizeObserver) {
+        resizeObserver = new ResizeObserver(() => {
+          if (chartInstance) chartInstance.resize();
+        });
+        resizeObserver.observe(chartRef.value);
+      }
+    }
+  }
+);
+
+const handleResize = () => {
+  if (chartInstance) chartInstance.resize();
+};
+
+onMounted(() => {
+  window.addEventListener('resize', handleResize);
+});
+
+onBeforeUnmount(() => {
+  if (chartInstance) {
+    chartInstance.dispose();
+    chartInstance = null;
+  }
+  window.removeEventListener('resize', handleResize);
+  if (resizeObserver) {
+    resizeObserver.disconnect();
+    resizeObserver = null;
+  }
+});
 </script>
 
 <style lang="scss" scoped>
-</style>
+.flow-discharge {
+  width: 100%;
+  min-height: 600px;
+  position: relative;
+
+  :deep(.ant-tabs-nav) {
+    margin-bottom: 4px;
+  }
+
+  .search-bar {
+    width: 100%;
+    margin-bottom: 12px;
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+
+    .search-btn {
+      margin-left: 8px;
+    }
+  }
+
+  .tab-content {
+    width: 100%;
+
+    .content-body {
+      width: 100%;
+      display: flex;
+      height: 600px;
+      position: relative;
+
+      .chart-wrapper {
+        flex: 1;
+        height: 100%;
+        position: relative;
+        box-sizing: border-box;
+        padding-top: 10px;
+
+        .chart-container {
+          width: 100%;
+          height: 100%;
+        }
+      }
+
+      .chart-empty {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+      }
+
+      .table-wrapper {
+        flex: 1;
+        min-width: 500px;
+        height: 100%;
+        box-sizing: border-box;
+        padding: 10px;
+        overflow: hidden;
+        overflow-x: auto;
+        border-left: 1px solid #dcdfe6;
+        margin-left: 10px;
+      }
+    }
+  }
+}
+</style>

frontend/src/components/MapModal/components/MonitorInfo.vue

@@ -495,6 +495,14 @@ watch(
   () => props.isActive,
   active => {
     if (active && chartRef.value) {
+      console.log(modelStore.filter.rangeTm);
+
+      if (modelStore.filter.rangeTm.length > 0) {
+        dateRange.value = [
+          dayjs(modelStore.filter.rangeTm[0]),
+          dayjs(modelStore.filter.rangeTm[1])
+        ];
+      }
       setTimeout(() => {
         if (chartInstance) chartInstance.resize();
       }, 200);

frontend/src/components/MapModal/index.vue

@@ -135,6 +135,11 @@
           :is-active="currentActiveKey === 'DZGJ'"
           :tabs-items="getTabChildren('DZGJ')"
         />
+        <!-- 生态流量泄放设施 - 监测数据 -->
+        <FlowDischarge
+          v-show="currentActiveKey === 'flowDischarge'"
+          :is-active="currentActiveKey === 'flowDischarge'"
+        />
         <!-- 流量监测 -->
         <FlowMeasure
           v-show="currentActiveKey === 'FlowMeasure'"
@@ -264,6 +269,7 @@ import EarlyWarningAlert from './components/EarlyWarningAlert.vue'; // 预警提
 import FlowMeasure from './components/FlowMeasure.vue'; // 流量监测
 import FishFacilityMonitorData from './components/FishFacilityMonitorData.vue'; // 在线监测数据
 import FishFacilityRunState from './components/FishFacilityRunState.vue'; // 运行情况
+import FlowDischarge from './components/FlowDischarge.vue'; // 生态流量泄放设施 - 监测数据
 // 鱼类增殖站
 import NormalOperationData from './components/NormalOperationData/index.vue'; // 运行数据
 import ProcessDiagram from './components/ProcessDiagram.vue'; // 过程图

frontend/src/components/mapLegend/index.vue

@@ -166,6 +166,11 @@ const toggleGroup = (group: any) => {
     padding: 0 !important;
     :deep(.legendItem) {
       cursor: none;
+      .legendIconTitle {
+        span {
+          white-space: nowrap !important;
+        }
+      }
       &:hover {
         .legendIconTitle {
           cursor: auto;

frontend/src/modules/shengtaidabiaoMod/TwoLayer/ModalYkzhbzdjcgz.vue

@@ -390,7 +390,8 @@ const handleView = (record: any) => {
   modelStore.title = record.stnm;
   modelStore.params.stcd = record.stcd;
   modelStore.params.eqtp = 'QGC';
-  modelStore.filterStll = 'qecInterval';
+  modelStore.filter.stllgzlx = 'qecInterval';
+  modelStore.filter.stllTmType = 'day';
 };
 onMounted(() => {
   handleChange();

frontend/src/modules/shengtaidabiaoMod/TwoLayer/ShengTaiLiuLiangDaBQKTwoLayer.vue

@@ -76,9 +76,7 @@
           :columns="columns"
           :scrollY="380"
           :list-url="
-            params.timeType == 'day'
+            activeTimeType == 'day' ? dayGetKendoListCust : hourGetKendoListCust
-              ? dayGetKendoListCust
-              : hourGetKendoListCust
           "
           :search-params="searchParams"
           :transform-data="customTransform"
@@ -245,6 +243,12 @@ const params = ref({
   eTime: ''
 });
 
+// 记录实际查询时使用的 timeType、key 和时间范围（用于 handleView 传递正确值）
+const activeTimeType = ref(props.time || 'day');
+const activeKey = ref(props.typeKey || '');
+const activeSTime = ref('');
+const activeETime = ref('');
+
 // Tab 相关状态
 const tabList = ref<any[]>([]);
 const ecoFlowType = ref<string>('');
@@ -764,7 +768,9 @@ const handleView = (record: any) => {
   modelStore.title = record.ennm;
   modelStore.params.stcd = record.stcd;
   modelStore.params.eqtp = record.eqtp;
-  modelStore.filterStll = params.value.key;
+  modelStore.filter.stllgzlx = activeKey.value;
+  modelStore.filter.stllTmType = activeTimeType.value;
+  modelStore.filter.rangeTm = [activeSTime.value, activeETime.value];
 };
 //获取table数据
 const fetchTableData = async () => {
@@ -867,6 +873,12 @@ const handleSearch = () => {
     params.value.eTime = dateRange.value[1].format('YYYY-MM-DD 23:59:59');
   }
 
+  // 记录当前查询使用的 timeType、key 和时间范围
+  activeTimeType.value = params.value.timeType;
+  activeKey.value = params.value.key;
+  activeSTime.value = params.value.sTime;
+  activeETime.value = params.value.eTime;
+
   // 重新获取 Tab 列表
   fetchTabList();
 };
@@ -875,6 +887,10 @@ onMounted(() => {
   if (dateRange.value && dateRange.value.length === 2) {
     params.value.sTime = dateRange.value[0].format('YYYY-MM-DD 00:00:00');
     params.value.eTime = dateRange.value[1].format('YYYY-MM-DD 23:59:59');
+    activeTimeType.value = params.value.timeType;
+    activeKey.value = params.value.key;
+    activeSTime.value = params.value.sTime;
+    activeETime.value = params.value.eTime;
     fetchTabList();
   }
 

frontend/src/store/modules/model.ts

@@ -47,7 +47,12 @@ export const useModelStore = defineStore('model', () => {
     dtinType: '',
     bldstt: ''
   });
-  const filterStll = ref('');
+  const filter = ref({
+    stllgzlx: '', // 生态流量 - 规则类型
+    stllTmType: '', // 生态流量 - 时间类型
+    tm: '',
+    rangeTm: []
+  });
   return {
     params,
     modalVisible,
@@ -58,7 +63,7 @@ export const useModelStore = defineStore('model', () => {
     isBasicEdit,
     showStcdSelector, // 新增
     stcdOptions, // 新增
-    filterStll,
+    filter,
     // 新增返回字段
     baseId,
     hasPowerStatData,