466 lines
11 KiB
Vue
466 lines
11 KiB
Vue
<template>
|
||
<div class="w-full h-full flex flex-col pt-[20px] pl-[20px]">
|
||
<!-- 搜索组件 -->
|
||
<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) => {
|
||
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: 'rstcd',
|
||
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"></style>
|