623 lines
16 KiB
Vue
623 lines
16 KiB
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"
|
||
@seeEdit="handleSeeEdit"
|
||
@batch-delete="handleBatchDelete"
|
||
:show-batch-delete="currentSearchParams.timeScale === 'tm'"
|
||
:selected-count="selectedRowKeys.length"
|
||
:exportLoading="exportLoading"
|
||
ref="searchRef"
|
||
/>
|
||
|
||
<!-- 表格组件 -->
|
||
<BasicTable
|
||
ref="tableRef"
|
||
:enable-row-selection="currentSearchParams.timeScale === 'tm'"
|
||
:scrollX="tableScrollX"
|
||
:scrollY="tableScrollY"
|
||
:columns="displayColumns"
|
||
:list-url="currentListUrl"
|
||
:searchParams="{
|
||
sort: sort
|
||
}"
|
||
@selection-change="handleSelectionChange"
|
||
>
|
||
<template #action="{ record }">
|
||
<template v-if="currentSearchParams.timeScale === 'tm'">
|
||
<a-button
|
||
type="link"
|
||
class="text-[#2f6b98]"
|
||
size="small"
|
||
@click="handleEdit(record)"
|
||
>编辑</a-button
|
||
>
|
||
<a-button
|
||
type="link"
|
||
danger
|
||
size="small"
|
||
@click="handleDelete(record)"
|
||
>删除</a-button
|
||
>
|
||
</template>
|
||
</template>
|
||
</BasicTable>
|
||
|
||
<!-- 编辑生态流量数据 Modal -->
|
||
<EditFlowDataModal
|
||
v-model:open="editVisible"
|
||
:record="editRecord"
|
||
@success="handleEditSuccess"
|
||
/>
|
||
|
||
<!-- 删除确认 Modal -->
|
||
<DeleteConfirmModal
|
||
ref="deleteModalRef"
|
||
:delete-fn="handleDeleteFn"
|
||
:label="deleteLabel"
|
||
:title="'删除' + deleteLabel"
|
||
@success="handleEditSuccess"
|
||
/>
|
||
|
||
<!-- 操作日志弹框 -->
|
||
<OperationLogModal
|
||
v-model:open="operationLogVisible"
|
||
:table-name="operationTableName"
|
||
/>
|
||
</div>
|
||
</template>
|
||
<script setup lang="ts">
|
||
import { ref, computed, onMounted, nextTick, h } from 'vue';
|
||
import dayjs from 'dayjs';
|
||
import FlowDataSearch from './FlowDataSearch.vue';
|
||
import EditFlowDataModal from './EditFlowDataModal.vue';
|
||
import DeleteConfirmModal from '@/views/conventionalHydropower/BasicData/DeleteConfirmModal.vue';
|
||
import OperationLogModal from '@/components/OperationLogModal/index.vue';
|
||
import { Tooltip, message } from 'ant-design-vue';
|
||
import BasicTable from '@/components/BasicTable/index.vue';
|
||
import {
|
||
getFlowDataList,
|
||
getFlowDataDayList,
|
||
getFlowDataMonthList,
|
||
deleteFlowDataInfo
|
||
} 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);
|
||
|
||
// 编辑/删除相关
|
||
const editVisible = ref(false);
|
||
const editRecord = ref<any>(null);
|
||
const deleteModalRef = ref();
|
||
const operationLogVisible = ref(false);
|
||
const deleteLabel = '生态流量数据';
|
||
// TODO: 操作日志表名待确认
|
||
const operationTableName = 'SD_QEC_R';
|
||
|
||
// 多选相关
|
||
const selectedRowKeys = ref<string[]>([]);
|
||
const selectedRows = ref<any[]>([]);
|
||
const handleSelectionChange = (keys: string[], rows: any[]) => {
|
||
selectedRowKeys.value = keys;
|
||
selectedRows.value = rows;
|
||
};
|
||
|
||
// 根据 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[''];
|
||
const columns: any[] = [...baseColumns, ...ruleColumns];
|
||
// 仅 timeScale === 'tm' 时显示操作列
|
||
if (currentSearchParams.value.timeScale === 'tm') {
|
||
columns.push({
|
||
key: 'action',
|
||
title: '操作',
|
||
dataIndex: 'action',
|
||
fixed: 'right',
|
||
width: 120
|
||
});
|
||
}
|
||
return columns;
|
||
});
|
||
|
||
const onSearchFinish = async (values: any) => {
|
||
currentSearchParams.value = values;
|
||
// 切换查询条件时清空选中
|
||
selectedRowKeys.value = [];
|
||
selectedRows.value = [];
|
||
tableRef.value?.clearSelection();
|
||
await nextTick();
|
||
initTable(values);
|
||
};
|
||
|
||
const onReset = async (values: any) => {
|
||
currentSearchParams.value = values;
|
||
// 切换查询条件时清空选中
|
||
selectedRowKeys.value = [];
|
||
selectedRows.value = [];
|
||
tableRef.value?.clearSelection();
|
||
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);
|
||
};
|
||
|
||
// 编辑
|
||
const handleEdit = (record: any) => {
|
||
editRecord.value = { ...record };
|
||
editVisible.value = true;
|
||
};
|
||
|
||
// 编辑成功回调
|
||
const handleEditSuccess = () => {
|
||
initTable(currentSearchParams.value);
|
||
};
|
||
|
||
// 删除（兼容单条：record 本身；批量：record.records 数组），仅小时(tm)数据支持删除
|
||
const handleDeleteFn = async (record: any, reason: string) => {
|
||
const list = Array.isArray(record.records) ? record.records : [record];
|
||
const dataList = list.map((r: any) => ({
|
||
id: r.stcd,
|
||
tm: r.tm
|
||
}));
|
||
return deleteFlowDataInfo({
|
||
dataList,
|
||
dataType: 'TIME',
|
||
source: reason
|
||
});
|
||
};
|
||
|
||
// 删除后刷新：清空选中（让批量删除按钮回到禁用状态）并重新加载列表
|
||
const refreshAfterDelete = () => {
|
||
selectedRowKeys.value = [];
|
||
selectedRows.value = [];
|
||
tableRef.value?.clearSelection();
|
||
initTable(currentSearchParams.value);
|
||
};
|
||
|
||
const handleDelete = (record: any) => {
|
||
deleteModalRef.value?.open(record, () => {
|
||
refreshAfterDelete();
|
||
});
|
||
};
|
||
|
||
// 批量删除
|
||
const handleBatchDelete = () => {
|
||
if (currentSearchParams.value.timeScale !== 'tm') {
|
||
message.info('仅小时数据支持删除');
|
||
return;
|
||
}
|
||
if (selectedRowKeys.value.length === 0) {
|
||
message.info('请先勾选要删除的数据');
|
||
return;
|
||
}
|
||
deleteModalRef.value?.open(
|
||
{
|
||
records: [...selectedRows.value],
|
||
stnm: `选中的 ${selectedRowKeys.value.length} 条数据`
|
||
},
|
||
() => {
|
||
refreshAfterDelete();
|
||
}
|
||
);
|
||
};
|
||
|
||
// 查看修改（操作日志）
|
||
const handleSeeEdit = () => {
|
||
operationLogVisible.value = true;
|
||
};
|
||
|
||
onMounted(() => {
|
||
nextTick(() => {
|
||
tableScrollY.value = calcTableScrollY();
|
||
});
|
||
});
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.body_one {
|
||
position: relative;
|
||
z-index: 900;
|
||
pointer-events: all;
|
||
}
|
||
</style>
|