WholeProcessPlatform/frontend-sjgl/src/views/monitorData/FlowData/index.vue

<template>
  <div class="w-full h-full flex flex-col pt-[20px] pl-[20px] body_one">
    <!-- 搜索组件 -->
    <FlowDataSearch
      @export-btn="exportBtn"
      @search-finish="onSearchFinish"
      @reset="onReset"
      :exportLoading="exportLoading"
      ref="searchRef"
    />

    <!-- 表格组件 -->
    <BasicTable
      ref="tableRef"
      :scrollX="tableScrollX"
      :scrollY="tableScrollY"
      :columns="displayColumns"
      :list-url="currentListUrl"
      :searchParams="{
        sort: sort
      }"
    >
    </BasicTable>
  </div>
</template>
<script setup lang="ts">
import { ref, computed, onMounted, nextTick, h } from 'vue';
import dayjs from 'dayjs';
import FlowDataSearch from './FlowDataSearch.vue';
import { Tooltip } from 'ant-design-vue';
import BasicTable from '@/components/BasicTable/index.vue';
import {
  getFlowDataList,
  getFlowDataDayList,
  getFlowDataMonthList
} from '@/api/DataQueryMenuModule';
import { calcTableScrollY } from '@/utils/index';
import { buildTimeFilters } from '@/utils/buildTimeFilters';

const currentSearchParams = ref<any>({});
const sort = computed(() => {
  return [
    { field: 'baseStepSort', dir: 'asc' },
    { field: 'rvcdStepSort', dir: 'asc' },
    { field: 'siteStepSort', dir: 'asc' },
    currentSearchParams.value.timeScale == 'tm'
      ? { field: 'tm', dir: 'desc' }
      : null,
    currentSearchParams.value.timeScale == 'dt'
      ? { field: 'dt', dir: 'desc' }
      : null,
    currentSearchParams.value.timeScale == 'month'
      ? { field: 'year', dir: 'desc' }
      : null,
    currentSearchParams.value.timeScale == 'month'
      ? { field: 'month', dir: 'desc' }
      : null
  ].filter(Boolean);
});
const tableRef = ref();
const searchRef = ref();
const tableScrollY = ref<string | number>(0);
const exportLoading = ref(false);

// 根据 timeScale 动态切换 API
const currentListUrl = computed(() => {
  const timeScale = currentSearchParams.value.timeScale;
  if (timeScale === 'dt') return getFlowDataDayList;
  if (timeScale === 'month') return getFlowDataMonthList;
  return getFlowDataList; // 默认 tm（小时）
});

const tableScrollX = computed(() =>
  Math.max(
    displayColumns.value.reduce(
      (sum: number, col: any) => sum + (col.width || 180),
      0
    ),
    600
  )
);

// 基础列（始终显示）
const baseColumns: any = [
  {
    key: 'stnm',
    title: '电站名称',
    dataIndex: 'stnm',
    visible: true,
    width: 150,
    sort: true,
    fixed: 'left',
    ellipsis: true
  },
  {
    key: 'baseName',
    title: '基地',
    dataIndex: 'baseName',
    visible: true,
    width: 150,
    sort: true,
    fixed: 'left',
    ellipsis: true
  },
  {
    key: 'tm',
    title: '时间',
    dataIndex: 'tm',
    visible: true,
    width: 150,
    sort: true,
    fixed: 'left',
    ellipsis: true
  },
  {
    key: 'qi',
    title: '入库流量(m³/s)',
    dataIndex: 'qi',
    visible: true,
    width: 150,
    sort: true,
    ellipsis: true,
    customRender: ({ text }) => {
      return text ? Number(text).toFixed(1) : '-';
    }
  },
  {
    key: 'qec',
    title: '生态流量值(m³/s)',
    dataIndex: 'qec',
    visible: true,
    sort: true,
    width: 150,
    ellipsis: true,
    customRender: ({ text }) => {
      return text ? Number(text).toFixed(1) : '-';
    }
  }
];

// 可控制显示的列
const ruleColumnsMap: any = {
  '': [
    // 全部 - 显示所有
    {
      key: 'qecLimit',
      title: '生态环境部限值要求(m³/s)',
      dataIndex: 'qecLimit',
      visible: true,
      sort: true,
      width: 200,
      ellipsis: true
    },
    {
      key: 'sfdb',
      // title: '生态流量是否达标',
      dataIndex: 'sfdbName',
      visible: true,
      sort: true,
      width: 170,
      title: () =>
        h('span', { style: 'display:flex;align-items:center;gap:4px' }, [
          '生态流量是否达标',
          h(
            Tooltip,
            {
              title: h('ol', {}, [
                h('li', {}, '达标判定规则:'),
                h(
                  'li',
                  {},
                  'a)环评中对生态流量限值有明确要求的，按环评要求评判,'
                ),
                h(
                  'li',
                  {},
                  'b)环评中未对生态流量限值有明确要求的，按水利部要求评判,'
                ),
                h(
                  'li',
                  {},
                  'c)无环评要求、无水利部要求的，按多年平均流量的10%作为评判依据,'
                ),
                h('li', {}, 'd)当来水不足时，生态流量不小于入库流量判定达标,')
              ])
            },
            {
              default: () =>
                h('i', {
                  class: 'iconfont icon-iconQuestion'
                })
            }
          )
        ])
    },
    {
      key: 'mwrLimit',
      title: '水利部限值要求(m³/s)',
      dataIndex: 'mwrLimit',
      visible: true,
      width: 180,
      sort: true,
      ellipsis: true
    },
    {
      key: 'mwrSfdb',
      dataIndex: 'mwrSfdbName',
      visible: true,
      sort: true,
      width: 180,
      title: () =>
        h('span', { style: 'display:flex;align-items:center;gap:4px' }, [
          '水利部要求是否达标',
          h(
            Tooltip,
            {
              title: h('ol', {}, [
                h('li', {}, '达标判定规则:'),
                h(
                  'li',
                  {},
                  'a)环评中对生态流量限值有明确要求的，按环评要求评判,'
                ),
                h(
                  'li',
                  {},
                  'b)环评中未对生态流量限值有明确要求的，按水利部要求评判,'
                ),
                h(
                  'li',
                  {},
                  'c)无环评要求、无水利部要求的，按多年平均流量的10%作为评判依据,'
                ),
                h('li', {}, 'd)当来水不足时，生态流量不小于入库流量判定达标,')
              ])
            },
            {
              default: () =>
                h('i', {
                  class: 'iconfont icon-iconQuestion'
                })
            }
          )
        ])
    },
    {
      key: 'avqLimit',
      title: '多年平均流量(m³/s)',
      dataIndex: 'avqLimit',
      visible: true,
      sort: true,
      width: 160
    },
    {
      key: 'avqSfdb',
      dataIndex: 'avqSfdbName',
      visible: true,
      sort: true,
      width: 230,
      title: () =>
        h('span', { style: 'display:flex;align-items:center;gap:4px' }, [
          '多年平均流量*10%是否达标',
          h(
            Tooltip,
            {
              title: h('ol', {}, [
                h('li', {}, '达标判定规则:'),
                h(
                  'li',
                  {},
                  'a)环评中对生态流量限值有明确要求的，按环评要求评判,'
                ),
                h(
                  'li',
                  {},
                  'b)环评中未对生态流量限值有明确要求的，按水利部要求评判,'
                ),
                h(
                  'li',
                  {},
                  'c)无环评要求、无水利部要求的，按多年平均流量的10%作为评判依据,'
                ),
                h('li', {}, 'd)当来水不足时，生态流量不小于入库流量判定达标,')
              ])
            },
            {
              default: () =>
                h('i', {
                  class: 'iconfont icon-iconQuestion'
                })
            }
          )
        ])
    }
  ],
  sfdb: [
    // 环评要求
    {
      key: 'qecLimit',
      title: '生态环境部限值要求(m³/s)',
      dataIndex: 'qecLimit',
      visible: true,
      sort: true,
      width: 200,
      ellipsis: true
    },
    {
      key: 'sfdb',
      title: '生态流量是否达标',
      dataIndex: 'sfdbName',
      visible: true,
      sort: true,
      width: 150
    }
  ],
  mwrSfdb: [
    // 水利部要求
    {
      key: 'mwrLimit',
      title: '水利部限值要求(m³/s)',
      dataIndex: 'mwrLimit',
      visible: true,
      width: 180,
      sort: true,
      ellipsis: true
    },
    {
      key: 'mwrSfdb',
      title: '水利部要求是否达标',
      dataIndex: 'mwrSfdbName',
      visible: true,
      sort: true,
      width: 150
    }
  ],
  avqSfdb: [
    // 多年平均流量10%
    {
      key: 'avqLimit',
      title: '多年平均流量(m³/s)',
      dataIndex: 'avqLimit',
      visible: true,
      sort: true,
      width: 150
    },
    {
      key: 'avqSfdb',
      title: '多年平均流量*10%是否达标',
      dataIndex: 'avqSfdbName',
      visible: true,
      sort: true,
      width: 200
    }
  ],
  wstllyq: [] // 无生态流量要求 - 不显示
};

// 根据 ruleType 动态计算列
const displayColumns = computed(() => {
  const ruleType = currentSearchParams.value.ruleType ?? '';
  const ruleColumns = ruleColumnsMap[ruleType] || ruleColumnsMap[''];
  return [...baseColumns, ...ruleColumns];
});

const onSearchFinish = async (values: any) => {
  // debugger
  currentSearchParams.value = values;
  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;
    });
};

// 构建 ruleType 过滤条件
const buildRuleTypeFilters = (ruleType: string) => {
  // 全部：不传
  if (ruleType === '' || ruleType === undefined) return [];

  // 环评要求
  if (ruleType === 'sfdb') {
    return [{ field: 'sfdb', operator: 'neq', dataType: 'string', value: '3' }];
  }

  // 水利部要求
  if (ruleType === 'mwrSfdb') {
    return [
      { field: 'mwrSfdb', operator: 'neq', dataType: 'string', value: '3' }
    ];
  }

  // 多年平均流量10%
  if (ruleType === 'avqSfdb') {
    return [
      { field: 'avqSfdb', operator: 'neq', dataType: 'string', value: '3' }
    ];
  }

  // 无生态流量要求：三个都不达标
  if (ruleType === 'wstllyq') {
    return [
      { field: 'sfdb', operator: 'eq', dataType: 'string', value: '3' },
      { field: 'mwrSfdb', operator: 'eq', dataType: 'string', value: '3' },
      { field: 'avqSfdb', operator: 'eq', dataType: 'string', value: '3' }
    ];
  }

  return [];
};

const initTable = (values: any) => {
  const filters = [
    values.rvcd && values.rvcd !== 'all'
      ? {
          field: 'rvcd',
          operator: 'contains',
          dataType: 'string',
          value: values.rvcd
        }
      : null,
    values.rstcd
      ? {
          field: 'stcd',
          operator: 'eq',
          dataType: 'string',
          value: values.rstcd
        }
      : null,
    ...buildRuleTypeFilters(values.ruleType),
    ...buildTimeFilters(values)
  ].filter(Boolean);

  const params = {
    logic: 'and',
    filters
  };
  tableRef.value.getList(params);
};

onMounted(() => {
  nextTick(() => {
    tableScrollY.value = calcTableScrollY();
  });
});
</script>

<style scoped lang="scss">
.body_one {
  position: relative;
  z-index: 900;
  pointer-events: all;
}
</style>