生态流量接口校准和表格组件排序方式的更改
This commit is contained in:
王兴凯
parent
19d16a962b
commit
8fba065bc4
@ -34,7 +34,7 @@ export function evnmAutoMonitorGetKendoListCust(queryParams: any) {
|
||||
//获取电站
|
||||
export function vmsstbprptGetKendoList(queryParams: any) {
|
||||
return request({
|
||||
url: '/eq/vmsstbprpt/GetKendoList',
|
||||
url: '/eq/base/vmsstbprpt/GetKendoList',
|
||||
method: 'post',
|
||||
data: queryParams
|
||||
});
|
||||
@ -58,7 +58,7 @@ export function intervalGetKendoListCust(queryParams: any) {
|
||||
// 获取生态流量达标率按性能
|
||||
export function eqGetKendoListCust(queryParams: any) {
|
||||
return request({
|
||||
url: '/api/wmp-eng-server/eng/to/eq/GetKendoListCust',
|
||||
url: '/eq/to/eq/GetKendoListCust',
|
||||
method: 'post',
|
||||
data: queryParams
|
||||
});
|
||||
@ -82,7 +82,7 @@ export function wbsbGetKendoList(queryParams: any) {
|
||||
//生态流量泄放方式
|
||||
export function msstbprptGetKendoList(queryParams: any) {
|
||||
return request({
|
||||
url: '/eq/msstbprpt/GetKendoList',
|
||||
url: '/eq/base/msstbprpt/GetKendoList',
|
||||
method: 'post',
|
||||
data: queryParams
|
||||
});
|
||||
@ -90,7 +90,7 @@ export function msstbprptGetKendoList(queryParams: any) {
|
||||
//根据流域获取电站
|
||||
export function qgcgetEngLimit(queryParams: any) {
|
||||
return request({
|
||||
url: '/api/wmp-eng-server/eng/engalong/statistics/qgc/getEngLimit',
|
||||
url: '/eq/engalong/statistics/qgc/getEngLimit',
|
||||
method: 'post',
|
||||
data: queryParams
|
||||
});
|
||||
|
||||
@ -101,6 +101,12 @@ const lastFilter = ref<Record<string, any> | undefined>(undefined);
|
||||
const tableContainerRef = ref<any>(null);
|
||||
const tableScrollY = ref<number>(0); // ✅ 新增：存储容器高度
|
||||
|
||||
// --- 内部排序状态 ---
|
||||
const internalSort = ref<{
|
||||
field: string;
|
||||
order: 'ascend' | 'descend' | null;
|
||||
}>({ field: '', order: null });
|
||||
|
||||
// --- Computed Scroll Config ---
|
||||
const scrollConfig = computed(() => {
|
||||
const config: any = {
|
||||
@ -177,10 +183,23 @@ const getList = async (filter?: Record<string, any>) => {
|
||||
if (filter !== undefined) {
|
||||
lastFilter.value = filter;
|
||||
}
|
||||
console.log(props.searchParams);
|
||||
try {
|
||||
// 合并排序参数：优先使用用户手动排序，否则使用 searchParams 中的默认排序
|
||||
let sort = undefined;
|
||||
if (internalSort.value.field && internalSort.value.order) {
|
||||
sort = [
|
||||
{
|
||||
field: internalSort.value.field,
|
||||
dir: internalSort.value.order === 'ascend' ? 'asc' : 'desc'
|
||||
}
|
||||
];
|
||||
} else if (props.searchParams?.sort) {
|
||||
sort = props.searchParams.sort;
|
||||
}
|
||||
|
||||
const params = {
|
||||
...props.searchParams,
|
||||
...(sort !== undefined ? { sort } : {}),
|
||||
skip: page.value,
|
||||
take: size.value,
|
||||
filter: lastFilter.value
|
||||
@ -219,14 +238,17 @@ const getList = async (filter?: Record<string, any>) => {
|
||||
const handleTableChange = (pag: any, filters: any, sorter: any) => {
|
||||
page.value = pag.current;
|
||||
size.value = pag.pageSize;
|
||||
if (props.enableSort) {
|
||||
if (sorter && sorter.field) {
|
||||
internalSort.value = { field: sorter.field, order: sorter.order };
|
||||
page.value = 1; // 排序时重置到第一页
|
||||
getList();
|
||||
emit('sort-change', { field: sorter.field, order: sorter.order });
|
||||
} else {
|
||||
emit('sort-change', { field: '', order: null });
|
||||
}
|
||||
} else {
|
||||
// 清除排序
|
||||
internalSort.value = { field: '', order: null };
|
||||
page.value = 1;
|
||||
getList();
|
||||
emit('sort-change', { field: '', order: null });
|
||||
}
|
||||
};
|
||||
const handleRowClick = (record: any) => {
|
||||
@ -264,6 +286,9 @@ defineExpose({
|
||||
refresh,
|
||||
tableData,
|
||||
clearSelection,
|
||||
clearSort: () => {
|
||||
internalSort.value = { field: '', order: null };
|
||||
},
|
||||
getSelected: () => ({
|
||||
keys: selectedRowKeys.value,
|
||||
rows: selectedRows.value
|
||||
@ -351,19 +376,28 @@ const createMergeCellHandler = (dataIndex: string) => {
|
||||
};
|
||||
};
|
||||
|
||||
// --- 列配置增强（超出隐藏 + Tooltip + 插槽兼容 + 行合并）---
|
||||
// --- 列配置增强（超出隐藏 + Tooltip + 插槽兼容 + 行合并 + 排序）---
|
||||
const enhancedColumns = computed(() => {
|
||||
return props.columns.map(col => {
|
||||
const enhancedCol: any = { ...col };
|
||||
|
||||
// 处理 sort 或 sorter: true，统一转为 sorter 并绑定 sortOrder
|
||||
const isSortable = enhancedCol.sort === true || enhancedCol.sorter === true;
|
||||
if (isSortable) {
|
||||
enhancedCol.sorter = true;
|
||||
enhancedCol.sortOrder =
|
||||
internalSort.value.field === enhancedCol.dataIndex
|
||||
? internalSort.value.order
|
||||
: false;
|
||||
}
|
||||
|
||||
// 处理 merge 配置
|
||||
if (col.merge && col.dataIndex) {
|
||||
const baseCol = {
|
||||
...col,
|
||||
customCell: createMergeCellHandler(col.dataIndex)
|
||||
};
|
||||
if (enhancedCol.merge && enhancedCol.dataIndex) {
|
||||
enhancedCol.customCell = createMergeCellHandler(enhancedCol.dataIndex);
|
||||
|
||||
// 如果有 slots.customRender，移除 slots
|
||||
if (baseCol.slots?.customRender) {
|
||||
const { slots, ...restCol } = baseCol;
|
||||
if (enhancedCol.slots?.customRender) {
|
||||
const { slots, ...restCol } = enhancedCol;
|
||||
return {
|
||||
...restCol,
|
||||
_slotName: slots.customRender,
|
||||
@ -371,12 +405,12 @@ const enhancedColumns = computed(() => {
|
||||
};
|
||||
}
|
||||
|
||||
return baseCol;
|
||||
return enhancedCol;
|
||||
}
|
||||
|
||||
// 如果有 slots.customRender，移除 slots（由 bodyCell 处理），保留 dataIndex 用于匹配
|
||||
if (col.slots?.customRender) {
|
||||
const { slots, ...restCol } = col;
|
||||
if (enhancedCol.slots?.customRender) {
|
||||
const { slots, ...restCol } = enhancedCol;
|
||||
return {
|
||||
...restCol,
|
||||
// 保留 slotName 供 bodyCell 模板匹配使用
|
||||
@ -386,18 +420,18 @@ const enhancedColumns = computed(() => {
|
||||
}
|
||||
|
||||
// 如果已有 customRender 函数，直接返回
|
||||
if (col.customRender) {
|
||||
if (enhancedCol.customRender) {
|
||||
return {
|
||||
...col,
|
||||
...(props.enableEllipsis && !col.ellipsis ? { ellipsis: true } : {})
|
||||
...enhancedCol,
|
||||
...(props.enableEllipsis && !enhancedCol.ellipsis ? { ellipsis: true } : {})
|
||||
};
|
||||
}
|
||||
|
||||
// 普通列，添加 ellipsis
|
||||
if (!props.enableEllipsis) return col;
|
||||
if (!props.enableEllipsis) return enhancedCol;
|
||||
|
||||
return {
|
||||
...col,
|
||||
...enhancedCol,
|
||||
ellipsis: true
|
||||
};
|
||||
});
|
||||
|
||||
@ -8,7 +8,6 @@
|
||||
:columns="currentColumns"
|
||||
:list-url="fetchTableData"
|
||||
:search-params="searchParams"
|
||||
:enable-sort="true"
|
||||
/>
|
||||
</div>
|
||||
</a-tab-pane>
|
||||
|
||||
@ -55,8 +55,6 @@
|
||||
:list-url="sdFprdRGetKendoListCust"
|
||||
:search-params="tableSearchParams"
|
||||
:transform-data="customTransform"
|
||||
:enable-sort="true"
|
||||
@sort-change="handleSortChange"
|
||||
>
|
||||
<template #fid="{ column, record }">
|
||||
<a-button
|
||||
@ -108,13 +106,6 @@ const searchForm = reactive({
|
||||
name: undefined,
|
||||
year: props.currentYear ? dayjs().year(parseInt(props.currentYear)) : dayjs()
|
||||
});
|
||||
|
||||
// 排序状态管理
|
||||
const sortInfo = ref<{ field: string; order: string | null }>({
|
||||
field: 'tm',
|
||||
order: 'descend'
|
||||
});
|
||||
|
||||
// 装置选项
|
||||
const deviceOptions = ref<any[]>([]);
|
||||
// 鱼种类选项
|
||||
@ -234,7 +225,7 @@ const columns = [
|
||||
key: 'tm',
|
||||
dataIndex: 'tm',
|
||||
width: '120px',
|
||||
sorter: true, // 启用排序
|
||||
sort: true, // 启用排序
|
||||
customRender: ({ text }: any) => {
|
||||
if (!text) return '-';
|
||||
return dayjs(text).format('YYYY');
|
||||
@ -269,16 +260,7 @@ const columns = [
|
||||
|
||||
// 构建搜索参数（包含排序）
|
||||
const tableSearchParams = computed(() => {
|
||||
const baseSort =
|
||||
sortInfo.value.field && sortInfo.value.order
|
||||
? [
|
||||
{
|
||||
field: sortInfo.value.field,
|
||||
dir: sortInfo.value.order === 'ascend' ? 'asc' : 'desc'
|
||||
}
|
||||
]
|
||||
: [];
|
||||
|
||||
const baseSort =[]
|
||||
return {
|
||||
sort: baseSort,
|
||||
group: [],
|
||||
@ -287,19 +269,6 @@ const tableSearchParams = computed(() => {
|
||||
};
|
||||
});
|
||||
|
||||
// 处理排序变化
|
||||
const handleSortChange = (info: {
|
||||
field: string;
|
||||
order: 'ascend' | 'descend' | null;
|
||||
}) => {
|
||||
sortInfo.value.field = info.field || '';
|
||||
sortInfo.value.order = info.order || null;
|
||||
|
||||
// 等待 DOM 和响应式状态更新完成后再触发搜索
|
||||
nextTick(() => {
|
||||
handleSearch();
|
||||
});
|
||||
};
|
||||
|
||||
// 数据转换
|
||||
const customTransform = (res: any) => {
|
||||
|
||||
@ -58,10 +58,8 @@
|
||||
:scroll-y="400"
|
||||
:columns="columns"
|
||||
:list-url="fpVmsstbprptGetKendoList"
|
||||
:enable-sort="true"
|
||||
:search-params="searchParams"
|
||||
:transform-data="customTransform"
|
||||
@sort-change="handleSortChange"
|
||||
>
|
||||
<template #ennm="{ record }">
|
||||
<a @click="handleViewDetail(record, 'dz')" class="text-link">
|
||||
@ -151,7 +149,7 @@ const columns = [
|
||||
title: '设施名称',
|
||||
dataIndex: 'stnm',
|
||||
width: 200,
|
||||
sorter: true,
|
||||
sort: true,
|
||||
ellipsis: true
|
||||
},
|
||||
{
|
||||
@ -159,7 +157,7 @@ const columns = [
|
||||
title: '所在基地名称',
|
||||
dataIndex: 'baseName',
|
||||
width: 150,
|
||||
sorter: true,
|
||||
sort: true,
|
||||
ellipsis: true
|
||||
},
|
||||
{
|
||||
@ -167,7 +165,7 @@ const columns = [
|
||||
title: '所属电站名称',
|
||||
dataIndex: 'ennm',
|
||||
width: 150,
|
||||
sorter: true,
|
||||
sort: true,
|
||||
ellipsis: true,
|
||||
slots: { customRender: 'ennm' }
|
||||
},
|
||||
@ -176,7 +174,7 @@ const columns = [
|
||||
title: '开工日期',
|
||||
dataIndex: 'ststdt',
|
||||
width: 120,
|
||||
sorter: true,
|
||||
sort: true,
|
||||
ellipsis: true
|
||||
},
|
||||
{
|
||||
@ -184,7 +182,7 @@ const columns = [
|
||||
title: '建成日期',
|
||||
dataIndex: 'jcdt',
|
||||
width: 120,
|
||||
sorter: true,
|
||||
sort: true,
|
||||
ellipsis: true
|
||||
},
|
||||
{
|
||||
@ -192,7 +190,7 @@ const columns = [
|
||||
title: '建设状态',
|
||||
dataIndex: 'bldsttCcodeName',
|
||||
width: 100,
|
||||
sorter: true,
|
||||
sort: true,
|
||||
ellipsis: true
|
||||
},
|
||||
{
|
||||
@ -200,7 +198,7 @@ const columns = [
|
||||
title: '接入状态',
|
||||
dataIndex: 'dtinName',
|
||||
width: 100,
|
||||
sorter: true,
|
||||
sort: true,
|
||||
ellipsis: true
|
||||
},
|
||||
{
|
||||
@ -221,19 +219,8 @@ const searchParams = computed(() => {
|
||||
groupResultFlat: false,
|
||||
select: []
|
||||
};
|
||||
|
||||
if (sortState.value) {
|
||||
// 用户自定义排序
|
||||
params.sort = [
|
||||
{
|
||||
field: sortState.value.field,
|
||||
dir: sortState.value.order === 'ascend' ? 'asc' : 'desc'
|
||||
}
|
||||
];
|
||||
} else {
|
||||
// 默认排序
|
||||
params.sort = null;
|
||||
}
|
||||
|
||||
return params;
|
||||
});
|
||||
@ -306,18 +293,6 @@ const buildFilter = () => {
|
||||
};
|
||||
};
|
||||
|
||||
// 处理排序变化
|
||||
const handleSortChange = (info: { field: string; order: string | null }) => {
|
||||
//
|
||||
if (info.field && info.order) {
|
||||
sortState.value = info;
|
||||
} else {
|
||||
sortState.value = null; // 恢复默认排序
|
||||
}
|
||||
nextTick(() => {
|
||||
handleSearch();
|
||||
});
|
||||
};
|
||||
|
||||
// 查询
|
||||
const handleSearch = () => {
|
||||
@ -350,10 +325,12 @@ const handleViewDetail = (record: any, type: string) => {
|
||||
} else {
|
||||
// const sttpFullPath = 'ENV,ENVP,FP,FP_2,';
|
||||
// 由于字符串末尾有逗号，直接分割会产生一个空字符串。使用 filter 去除空项是最稳妥的。
|
||||
const parts = record.sttpFullPath.split(',').filter(item => item.trim() !== '');
|
||||
const parts = record.sttpFullPath
|
||||
.split(',')
|
||||
.filter(item => item.trim() !== '');
|
||||
const lastValue = parts[parts.length - 1];
|
||||
modelStore.modalVisible = true;
|
||||
modelStore.params.sttp = lastValue
|
||||
modelStore.params.sttp = lastValue;
|
||||
modelStore.title = record.stnm;
|
||||
modelStore.params.stcd = record.stcd;
|
||||
modelStore.params.bldsttCcode = record.bldsttCcode;
|
||||
|
||||
@ -45,8 +45,6 @@
|
||||
:scrollY="360"
|
||||
:columns="columns"
|
||||
:list-url="fhGetKendoListCust"
|
||||
:enable-sort="true"
|
||||
@sort-change="handleSortChange"
|
||||
:search-params="searchParams"
|
||||
:transform-data="customTransform"
|
||||
>
|
||||
@ -69,7 +67,7 @@ import { ref, computed, watch, onMounted, nextTick } from 'vue';
|
||||
import { msstbprptGetKendoList, fhGetKendoListCust } from '@/api/qxd';
|
||||
import BasicTable from '@/components/BasicTable/index.vue';
|
||||
import { useModelStore } from '@/store/modules/model';
|
||||
import { useJidiSelectEventStore } from "@/store/modules/jidiSelectEvent";
|
||||
import { useJidiSelectEventStore } from '@/store/modules/jidiSelectEvent';
|
||||
const JidiSelectEventStore = useJidiSelectEventStore();
|
||||
// ==================== Props 定义 ====================
|
||||
const props = defineProps<{
|
||||
@ -98,21 +96,21 @@ const columns = [
|
||||
title: '设施名称',
|
||||
dataIndex: 'stnm',
|
||||
width: '176px',
|
||||
sorter: true
|
||||
sort: true
|
||||
},
|
||||
{
|
||||
key: 'baseName',
|
||||
title: '所在基地',
|
||||
dataIndex: 'baseName',
|
||||
width: '150px',
|
||||
sorter: true
|
||||
sort: true
|
||||
},
|
||||
{
|
||||
key: 'ennm',
|
||||
title: '所属电站',
|
||||
dataIndex: 'ennm',
|
||||
width: '150px',
|
||||
sorter: true,
|
||||
sort: true,
|
||||
slots: { customRender: 'ennm' }
|
||||
},
|
||||
{
|
||||
@ -120,56 +118,56 @@ const columns = [
|
||||
title: '所属栖息地',
|
||||
dataIndex: 'fhstnm',
|
||||
width: '176px',
|
||||
sorter: true
|
||||
sort: true
|
||||
},
|
||||
{
|
||||
key: 'ststdt',
|
||||
title: '开工日期',
|
||||
dataIndex: 'ststdt',
|
||||
width: '150px',
|
||||
sorter: true
|
||||
sort: true
|
||||
},
|
||||
{
|
||||
key: 'esstdt',
|
||||
title: '建成日期',
|
||||
dataIndex: 'esstdt',
|
||||
width: '150px',
|
||||
sorter: true
|
||||
sort: true
|
||||
},
|
||||
{
|
||||
key: 'mway',
|
||||
title: '监测方式',
|
||||
dataIndex: 'mway',
|
||||
width: '150px',
|
||||
sorter: true
|
||||
sort: true
|
||||
},
|
||||
{
|
||||
key: 'vlsr',
|
||||
title: '数据接入来源',
|
||||
dataIndex: 'vlsr',
|
||||
width: '150px',
|
||||
sorter: true
|
||||
sort: true
|
||||
},
|
||||
{
|
||||
key: 'hydrodtin_type',
|
||||
title: '数据接入类型',
|
||||
dataIndex: 'hydrodtinType',
|
||||
width: '150px',
|
||||
sorter: true
|
||||
sort: true
|
||||
},
|
||||
{
|
||||
key: 'enable',
|
||||
title: '是否启用',
|
||||
dataIndex: 'enable',
|
||||
width: '150px',
|
||||
sorter: true
|
||||
sort: true
|
||||
},
|
||||
{
|
||||
key: 'dtin',
|
||||
title: '是否接入',
|
||||
dataIndex: 'dtin',
|
||||
width: '150px',
|
||||
sorter: true
|
||||
sort: true
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
@ -180,30 +178,9 @@ const columns = [
|
||||
slots: { customRender: 'action' }
|
||||
}
|
||||
];
|
||||
// 1. 定义排序状态
|
||||
const sortState = ref<{ field: string; order: string } | null>(null);
|
||||
// 2. 处理排序事件（仅更新状态，不调用请求）
|
||||
const handleSortChange = (info: { field: string; order: string | null }) => {
|
||||
if (info.field) {
|
||||
sortState.value = info;
|
||||
} else {
|
||||
sortState.value = null; // 恢复默认排序
|
||||
}
|
||||
nextTick(() => {
|
||||
handleSearch();
|
||||
});
|
||||
};
|
||||
const searchParams = computed(() => {
|
||||
const params: any = { group: [], groupResultFlat: false, select: [] };
|
||||
if (sortState.value) {
|
||||
// 转换为后端需要的格式，例如 [{ field: 'name', dir: 'asc' }]
|
||||
params.sort = [
|
||||
{
|
||||
field: sortState.value.field,
|
||||
dir: sortState.value.order === 'ascend' ? 'asc' : 'desc'
|
||||
}
|
||||
];
|
||||
} else {
|
||||
|
||||
params.sort = [
|
||||
{
|
||||
field: 'baseStepSort',
|
||||
@ -218,7 +195,6 @@ const searchParams = computed(() => {
|
||||
dir: 'asc'
|
||||
}
|
||||
];
|
||||
}
|
||||
|
||||
return params;
|
||||
});
|
||||
@ -384,7 +360,7 @@ onMounted(() => {
|
||||
jiDiList.value.push({
|
||||
label: element.wbsName,
|
||||
value: element.wbsCode
|
||||
})
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
@ -57,8 +57,6 @@
|
||||
:list-url="vmsstbprptGetKendoList"
|
||||
:search-params="searchParams"
|
||||
:transform-data="customTransform"
|
||||
:enable-sort="true"
|
||||
@sort-change="handleSortChange"
|
||||
>
|
||||
<template #stnm="{ record }">
|
||||
<a-button
|
||||
@ -116,7 +114,7 @@ const columnsConfig = {
|
||||
slots: { customRender: 'stnm' },
|
||||
fixed: 'left',
|
||||
width: '120px',
|
||||
sorter: true
|
||||
sort: true
|
||||
},
|
||||
{
|
||||
key: 'ennm',
|
||||
@ -125,21 +123,21 @@ const columnsConfig = {
|
||||
slots: { customRender: 'ennm' },
|
||||
fixed: 'left',
|
||||
width: '120px',
|
||||
sorter: true
|
||||
sort: true
|
||||
},
|
||||
{
|
||||
key: 'ttpwr',
|
||||
title: '装机容量',
|
||||
dataIndex: 'ttpwr',
|
||||
width: '160px',
|
||||
sorter: true
|
||||
sort: true
|
||||
},
|
||||
{
|
||||
key: 'stjzysq',
|
||||
title: '生态机组额定流量(m³/s)',
|
||||
dataIndex: 'stjzysq',
|
||||
width: '200px',
|
||||
sorter: true
|
||||
sort: true
|
||||
}
|
||||
],
|
||||
EQ_5: [
|
||||
@ -150,7 +148,7 @@ const columnsConfig = {
|
||||
slots: { customRender: 'stnm' },
|
||||
fixed: 'left',
|
||||
width: '120px',
|
||||
sorter: true
|
||||
sort: true
|
||||
},
|
||||
{
|
||||
key: 'ennm',
|
||||
@ -159,28 +157,28 @@ const columnsConfig = {
|
||||
slots: { customRender: 'ennm' },
|
||||
fixed: 'left',
|
||||
width: '120px',
|
||||
sorter: true
|
||||
sort: true
|
||||
},
|
||||
{
|
||||
key: 'jhfdgk',
|
||||
title: '基荷发电工况',
|
||||
dataIndex: 'jhfdgk',
|
||||
width: '100px',
|
||||
sorter: true
|
||||
sort: true
|
||||
},
|
||||
{
|
||||
key: 'fdll',
|
||||
title: '发电量(MKW)',
|
||||
dataIndex: 'fdll',
|
||||
width: '120px',
|
||||
sorter: true
|
||||
sort: true
|
||||
},
|
||||
{
|
||||
key: 'blprdName',
|
||||
title: '所属建设阶段',
|
||||
dataIndex: 'blprdName',
|
||||
width: '160px',
|
||||
sorter: true
|
||||
sort: true
|
||||
}
|
||||
],
|
||||
default: [
|
||||
@ -191,7 +189,7 @@ const columnsConfig = {
|
||||
slots: { customRender: 'stnm' },
|
||||
fixed: 'left',
|
||||
width: '120px',
|
||||
sorter: true
|
||||
sort: true
|
||||
},
|
||||
{
|
||||
key: 'ennm',
|
||||
@ -200,55 +198,55 @@ const columnsConfig = {
|
||||
slots: { customRender: 'ennm' },
|
||||
fixed: 'left',
|
||||
width: '120px',
|
||||
sorter: true
|
||||
sort: true
|
||||
},
|
||||
{
|
||||
key: 'ddzgq',
|
||||
title: '死水位时保证流量(m³/s)',
|
||||
dataIndex: 'ddzgq',
|
||||
width: '190px',
|
||||
sorter: true
|
||||
sort: true
|
||||
},
|
||||
{
|
||||
key: 'flkq',
|
||||
title: '最大泄放流量(m³/s)',
|
||||
dataIndex: 'flkq',
|
||||
sorter: true,
|
||||
sort: true,
|
||||
width: '160px'
|
||||
},
|
||||
{
|
||||
key: 'jskgc',
|
||||
title: '进水口底版高程(m)',
|
||||
dataIndex: 'jskgc',
|
||||
sorter: true,
|
||||
sort: true,
|
||||
width: '160px'
|
||||
},
|
||||
{
|
||||
key: 'outflrelev',
|
||||
title: '出水口底版高程(m)',
|
||||
dataIndex: 'outflrelev',
|
||||
sorter: true,
|
||||
sort: true,
|
||||
width: '160px'
|
||||
},
|
||||
{
|
||||
key: 'flksz',
|
||||
title: '孔口尺寸(m)',
|
||||
dataIndex: 'flksz',
|
||||
sorter: true,
|
||||
sort: true,
|
||||
width: '120px'
|
||||
},
|
||||
{
|
||||
key: 'frntwlltyp',
|
||||
title: '结构形式',
|
||||
dataIndex: 'frntwlltyp',
|
||||
sorter: true,
|
||||
sort: true,
|
||||
width: '160px'
|
||||
},
|
||||
{
|
||||
key: 'blprdName',
|
||||
title: '所属建设阶段',
|
||||
dataIndex: 'blprdName',
|
||||
sorter: true,
|
||||
sort: true,
|
||||
width: '160px'
|
||||
}
|
||||
]
|
||||
@ -263,12 +261,6 @@ const columns = computed(() => {
|
||||
});
|
||||
const tableRef = ref();
|
||||
|
||||
// 排序状态管理
|
||||
const sortInfo = ref<{ field: string; order: string | null }>({
|
||||
field: '',
|
||||
order: null
|
||||
});
|
||||
|
||||
const sort2 = ref([
|
||||
{
|
||||
field: 'baseStepSort',
|
||||
@ -291,19 +283,8 @@ const sort2 = ref([
|
||||
// 动态计算搜索参数（包含排序）
|
||||
const searchParams = computed(() => {
|
||||
let baseSort;
|
||||
|
||||
// 如果用户触发了排序，将其加入排序数组
|
||||
if (sortInfo.value.field && sortInfo.value.order) {
|
||||
baseSort = [
|
||||
{
|
||||
field: sortInfo.value.field,
|
||||
dir: sortInfo.value.order === 'ascend' ? 'asc' : 'desc'
|
||||
}
|
||||
];
|
||||
} else {
|
||||
// 使用默认排序
|
||||
baseSort = sort2.value;
|
||||
}
|
||||
|
||||
return {
|
||||
sort: baseSort,
|
||||
@ -313,19 +294,7 @@ const searchParams = computed(() => {
|
||||
};
|
||||
});
|
||||
|
||||
// 处理排序变化
|
||||
const handleSortChange = (info: {
|
||||
field: string;
|
||||
order: 'ascend' | 'descend' | null;
|
||||
}) => {
|
||||
sortInfo.value.field = info.field || '';
|
||||
sortInfo.value.order = info.order || null;
|
||||
|
||||
// 等待 DOM 和响应式状态更新完成后再触发搜索
|
||||
nextTick(() => {
|
||||
fetchTableData();
|
||||
});
|
||||
};
|
||||
;
|
||||
|
||||
const params = ref({
|
||||
qid: props.basicId || 'all',
|
||||
@ -635,16 +604,10 @@ const fetchTabList = async () => {
|
||||
}
|
||||
: null,
|
||||
{
|
||||
field: 'sttpFullPath',
|
||||
field: 'sttp',
|
||||
operator: 'contains',
|
||||
dataType: 'string',
|
||||
value: 'ENV,ENVP,EQ,'
|
||||
},
|
||||
{
|
||||
field: 'sttpFullPath',
|
||||
operator: 'neq',
|
||||
dataType: 'string',
|
||||
value: 'ENV,ENVP,EQ,'
|
||||
value: 'EQ_'
|
||||
},
|
||||
{
|
||||
field: 'baseName',
|
||||
|
||||
@ -3,10 +3,31 @@
|
||||
<div class="xie-fang-fang-shi-container">
|
||||
<SidePanelItem title="生态流量泄放方式">
|
||||
<!-- Loading 状态 -->
|
||||
<a-spin v-if="loading" :spinning="true" style="width: 100%; height: 350px; display: flex; justify-content: center; align-items: center;" />
|
||||
<a-spin
|
||||
v-if="loading"
|
||||
:spinning="true"
|
||||
style="
|
||||
width: 100%;
|
||||
height: 350px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
"
|
||||
/>
|
||||
|
||||
<!-- 空状态提示 -->
|
||||
<a-empty v-else-if="!loading && pieData.length === 0" description="暂无数据" style="height: 350px; display: flex; justify-content: center; align-items: center;flex-direction: column;text-indent:0em" />
|
||||
<a-empty
|
||||
v-else-if="!loading && pieData.length === 0"
|
||||
description="暂无数据"
|
||||
style="
|
||||
height: 350px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
text-indent: 0em;
|
||||
"
|
||||
/>
|
||||
|
||||
<!-- 图表容器 -->
|
||||
<div v-else ref="chartRef" class="pie-chart"></div>
|
||||
@ -35,7 +56,7 @@ import * as echarts from 'echarts';
|
||||
import type { ECharts } from 'echarts';
|
||||
import { msstbprptGetKendoList } from '@/api/stll';
|
||||
import { useJidiSelectEventStore } from '@/store/modules/jidiSelectEvent';
|
||||
import STLLXFFS from './TwoLayer/STLLXFFS.vue'
|
||||
import STLLXFFS from './TwoLayer/STLLXFFS.vue';
|
||||
// 定义组件名（便于调试和递归）
|
||||
defineOptions({
|
||||
name: 'xieFangFangShi'
|
||||
@ -263,16 +284,10 @@ const getecharts = async () => {
|
||||
}
|
||||
: null,
|
||||
{
|
||||
field: 'sttpFullPath',
|
||||
field: 'sttp',
|
||||
operator: 'contains',
|
||||
dataType: 'string',
|
||||
value: 'ENV,ENVP,EQ,'
|
||||
},
|
||||
{
|
||||
field: 'sttpFullPath',
|
||||
operator: 'neq',
|
||||
dataType: 'string',
|
||||
value: 'ENV,ENVP,EQ,'
|
||||
value: 'EQ_'
|
||||
},
|
||||
{
|
||||
field: 'baseName',
|
||||
|
||||
@ -63,8 +63,6 @@
|
||||
:list-url="vmsstbprptGetKendoList"
|
||||
:search-params="searchParams"
|
||||
:transform-data="customTransform"
|
||||
:enable-sort="true"
|
||||
@sort-change="handleSortChange"
|
||||
>
|
||||
<template #stnm="{ record }">
|
||||
<a-button
|
||||
@ -121,7 +119,7 @@ const columnsConfig = {
|
||||
slots: { customRender: 'stnm' },
|
||||
fixed: 'left',
|
||||
width: '120px',
|
||||
sorter: true
|
||||
sort: true
|
||||
},
|
||||
{
|
||||
key: 'ennm',
|
||||
@ -130,21 +128,21 @@ const columnsConfig = {
|
||||
slots: { customRender: 'ennm' },
|
||||
fixed: 'left',
|
||||
width: '120px',
|
||||
sorter: true
|
||||
sort: true
|
||||
},
|
||||
{
|
||||
key: 'ttpwr',
|
||||
title: '装机容量',
|
||||
dataIndex: 'ttpwr',
|
||||
width: '160px',
|
||||
sorter: true
|
||||
sort: true
|
||||
},
|
||||
{
|
||||
key: 'stjzysq',
|
||||
title: '生态机组额定流量(m³/s)',
|
||||
dataIndex: 'stjzysq',
|
||||
width: '200px',
|
||||
sorter: true
|
||||
sort: true
|
||||
}
|
||||
],
|
||||
EQ_5: [
|
||||
@ -155,7 +153,7 @@ const columnsConfig = {
|
||||
slots: { customRender: 'stnm' },
|
||||
fixed: 'left',
|
||||
width: '120px',
|
||||
sorter: true
|
||||
sort: true
|
||||
},
|
||||
{
|
||||
key: 'ennm',
|
||||
@ -164,28 +162,28 @@ const columnsConfig = {
|
||||
slots: { customRender: 'ennm' },
|
||||
fixed: 'left',
|
||||
width: '120px',
|
||||
sorter: true
|
||||
sort: true
|
||||
},
|
||||
{
|
||||
key: 'jhfdgk',
|
||||
title: '基荷发电工况',
|
||||
dataIndex: 'jhfdgk',
|
||||
width: '100px',
|
||||
sorter: true
|
||||
sort: true
|
||||
},
|
||||
{
|
||||
key: 'fdll',
|
||||
title: '发电量(MKW)',
|
||||
dataIndex: 'fdll',
|
||||
width: '120px',
|
||||
sorter: true
|
||||
sort: true
|
||||
},
|
||||
{
|
||||
key: 'blprdName',
|
||||
title: '所属建设阶段',
|
||||
dataIndex: 'blprdName',
|
||||
width: '160px',
|
||||
sorter: true
|
||||
sort: true
|
||||
}
|
||||
],
|
||||
default: [
|
||||
@ -196,7 +194,7 @@ const columnsConfig = {
|
||||
slots: { customRender: 'stnm' },
|
||||
fixed: 'left',
|
||||
width: '120px',
|
||||
sorter: true
|
||||
sort: true
|
||||
},
|
||||
{
|
||||
key: 'ennm',
|
||||
@ -205,55 +203,55 @@ const columnsConfig = {
|
||||
slots: { customRender: 'ennm' },
|
||||
fixed: 'left',
|
||||
width: '120px',
|
||||
sorter: true
|
||||
sort: true
|
||||
},
|
||||
{
|
||||
key: 'ddzgq',
|
||||
title: '死水位时保证流量(m³/s)',
|
||||
dataIndex: 'ddzgq',
|
||||
width: '190px',
|
||||
sorter: true
|
||||
sort: true
|
||||
},
|
||||
{
|
||||
key: 'flkq',
|
||||
title: '最大泄放流量(m³/s)',
|
||||
dataIndex: 'flkq',
|
||||
sorter: true,
|
||||
sort: true,
|
||||
width: '160px'
|
||||
},
|
||||
{
|
||||
key: 'jskgc',
|
||||
title: '进水口底版高程(m)',
|
||||
dataIndex: 'jskgc',
|
||||
sorter: true,
|
||||
sort: true,
|
||||
width: '160px'
|
||||
},
|
||||
{
|
||||
key: 'outflrelev',
|
||||
title: '出水口底版高程(m)',
|
||||
dataIndex: 'outflrelev',
|
||||
sorter: true,
|
||||
sort: true,
|
||||
width: '160px'
|
||||
},
|
||||
{
|
||||
key: 'flksz',
|
||||
title: '孔口尺寸(m)',
|
||||
dataIndex: 'flksz',
|
||||
sorter: true,
|
||||
sort: true,
|
||||
width: '120px'
|
||||
},
|
||||
{
|
||||
key: 'frntwlltyp',
|
||||
title: '结构形式',
|
||||
dataIndex: 'frntwlltyp',
|
||||
sorter: true,
|
||||
sort: true,
|
||||
width: '160px'
|
||||
},
|
||||
{
|
||||
key: 'blprdName',
|
||||
title: '所属建设阶段',
|
||||
dataIndex: 'blprdName',
|
||||
sorter: true,
|
||||
sort: true,
|
||||
width: '160px'
|
||||
}
|
||||
]
|
||||
@ -269,12 +267,6 @@ const columns = computed(() => {
|
||||
|
||||
const tableRef = ref();
|
||||
|
||||
// 排序状态管理
|
||||
const sortInfo = ref<{ field: string; order: string | null }>({
|
||||
field: '',
|
||||
order: null
|
||||
});
|
||||
|
||||
const sort2 = ref([
|
||||
{
|
||||
field: 'rvcdStepSort',
|
||||
@ -289,18 +281,7 @@ const sort2 = ref([
|
||||
// 动态计算搜索参数（包含排序）
|
||||
const searchParams = computed(() => {
|
||||
let baseSort;
|
||||
|
||||
if (sortInfo.value.field && sortInfo.value.order) {
|
||||
baseSort = [
|
||||
{
|
||||
field: sortInfo.value.field,
|
||||
dir: sortInfo.value.order === 'ascend' ? 'asc' : 'desc'
|
||||
}
|
||||
];
|
||||
} else {
|
||||
baseSort = sort2.value;
|
||||
}
|
||||
|
||||
return {
|
||||
sort: baseSort,
|
||||
group: [],
|
||||
@ -309,19 +290,6 @@ const searchParams = computed(() => {
|
||||
};
|
||||
});
|
||||
|
||||
// 处理排序变化
|
||||
const handleSortChange = (info: {
|
||||
field: string;
|
||||
order: 'ascend' | 'descend' | null;
|
||||
}) => {
|
||||
sortInfo.value.field = info.field || '';
|
||||
sortInfo.value.order = info.order || null;
|
||||
|
||||
nextTick(() => {
|
||||
fetchTableData();
|
||||
});
|
||||
};
|
||||
|
||||
// ==================== 搜索表单 ====================
|
||||
const params = ref({
|
||||
JiDi: props.jidiName || '',
|
||||
@ -670,7 +638,7 @@ const handleResize = () => {
|
||||
|
||||
onMounted(() => {
|
||||
fetchPieData();
|
||||
fetchTableData()
|
||||
fetchTableData();
|
||||
window.addEventListener('resize', handleResize);
|
||||
});
|
||||
|
||||
|
||||
@ -32,8 +32,6 @@
|
||||
:list-url="vmsstbprptGetKendoList"
|
||||
:search-params="searchParams"
|
||||
:transform-data="customTransform"
|
||||
:enable-sort="true"
|
||||
@sort-change="handleSortChange"
|
||||
>
|
||||
<template #dvtp="{ record }">
|
||||
{{
|
||||
@ -104,7 +102,7 @@ const columns = ref([
|
||||
key: 'jcdt',
|
||||
dataIndex: 'jcdt',
|
||||
visible: true,
|
||||
sorter: true,
|
||||
sort: true,
|
||||
customRender: ({ record }: any) => {
|
||||
const date = record.jcdt;
|
||||
if (!date) return '-';
|
||||
@ -181,33 +179,16 @@ const from = ref({
|
||||
baseId: props.baseId || 'all',
|
||||
stcd: ''
|
||||
});
|
||||
|
||||
// 排序状态管理
|
||||
const sortInfo = ref<{ field: string; order: string | null }>({
|
||||
field: '',
|
||||
order: null
|
||||
});
|
||||
|
||||
// 动态计算搜索参数（包含排序）
|
||||
const searchParams = computed(() => {
|
||||
let baseSort;
|
||||
|
||||
// 如果用户触发了排序，将其加入排序数组
|
||||
if (sortInfo.value.field && sortInfo.value.order) {
|
||||
baseSort = [
|
||||
{
|
||||
field: sortInfo.value.field,
|
||||
dir: sortInfo.value.order === 'ascend' ? 'asc' : 'desc'
|
||||
}
|
||||
];
|
||||
} else {
|
||||
baseSort = [
|
||||
{ field: 'baseStepSort', dir: 'asc' },
|
||||
{ field: 'hbrvcd', dir: 'asc' },
|
||||
{ field: 'rstcdStepSort', dir: 'asc' },
|
||||
{ field: 'siteStepSort', dir: 'asc' }
|
||||
];
|
||||
}
|
||||
|
||||
return {
|
||||
sort: baseSort,
|
||||
@ -356,19 +337,7 @@ const Search = () => {
|
||||
tableRef.value?.getList(filter);
|
||||
};
|
||||
|
||||
// 处理排序变化
|
||||
const handleSortChange = (info: {
|
||||
field: string;
|
||||
order: 'ascend' | 'descend' | null;
|
||||
}) => {
|
||||
sortInfo.value.field = info.field || '';
|
||||
sortInfo.value.order = info.order || null;
|
||||
|
||||
// 等待 DOM 和响应式状态更新完成后再触发搜索，确保 BasicTable 拿到最新的 searchParams
|
||||
nextTick(() => {
|
||||
Search();
|
||||
});
|
||||
};
|
||||
|
||||
const resetSearch = () => {
|
||||
from.value = {
|
||||
|
||||
@ -59,9 +59,11 @@
|
||||
</a-tabs>
|
||||
|
||||
<!-- 空状态 -->
|
||||
<a-empty v-if="!loading && tabList.length === 0" description="暂无数据" />
|
||||
<div v-if="!loading && tabList.length === 0" class="empty-state">
|
||||
<a-empty description="暂无数据" />
|
||||
</div>
|
||||
|
||||
<div class="body_zhengti">
|
||||
<div v-show="tabList.length > 0" class="body_zhengti">
|
||||
<div class="echarts">
|
||||
<a-spin :spinning="dataLoading">
|
||||
<div v-if="pieData.length > 0" ref="chartRef" class="pie-chart"></div>
|
||||
@ -81,8 +83,6 @@
|
||||
"
|
||||
:search-params="searchParams"
|
||||
:transform-data="customTransform"
|
||||
:enable-sort="true"
|
||||
@sort-change="handleSortChange"
|
||||
>
|
||||
<template #ennm="{ column, record }">
|
||||
<a-button type="link" size="small" @click="handleView(record)">{{
|
||||
@ -141,7 +141,7 @@ const columns = [
|
||||
key: 'qecRate',
|
||||
title: `生态流量达标率(%)`,
|
||||
dataIndex: 'qecRate',
|
||||
sorter: true, // 启用排序
|
||||
sort: true, // 启用排序
|
||||
width: '160px',
|
||||
customRender: ({ text }: any) => {
|
||||
if (text === null || text === undefined || text === '' || text === '-')
|
||||
@ -152,12 +152,6 @@ const columns = [
|
||||
];
|
||||
const tableRef = ref();
|
||||
|
||||
// 排序状态管理
|
||||
const sortInfo = ref<{ field: string; order: string | null }>({
|
||||
field: '',
|
||||
order: null
|
||||
});
|
||||
|
||||
const sort1 = ref([
|
||||
{
|
||||
field: 'baseStepSort',
|
||||
@ -194,39 +188,11 @@ const sort2 = ref([
|
||||
// 动态计算搜索参数（包含排序）
|
||||
const searchParams = computed(() => {
|
||||
let baseSort;
|
||||
|
||||
// 如果用户触发了排序，将其加入排序数组
|
||||
if (sortInfo.value.field && sortInfo.value.order) {
|
||||
baseSort = [
|
||||
{
|
||||
field: sortInfo.value.field,
|
||||
dir: sortInfo.value.order === 'ascend' ? 'asc' : 'desc'
|
||||
}
|
||||
];
|
||||
} else {
|
||||
// 使用默认排序
|
||||
baseSort = params.value.key ? sort1.value : sort2.value;
|
||||
}
|
||||
|
||||
return {
|
||||
sort: baseSort
|
||||
};
|
||||
});
|
||||
|
||||
// 处理排序变化
|
||||
const handleSortChange = (info: {
|
||||
field: string;
|
||||
order: 'ascend' | 'descend' | null;
|
||||
}) => {
|
||||
sortInfo.value.field = info.field || '';
|
||||
sortInfo.value.order = info.order || null;
|
||||
|
||||
// 等待 DOM 和响应式状态更新完成后再触发搜索
|
||||
nextTick(() => {
|
||||
fetchTableData();
|
||||
});
|
||||
};
|
||||
|
||||
// 初始化日期范围：上个月的本日到今天
|
||||
const initDateRange = () => {
|
||||
const today = dayjs();
|
||||
@ -958,4 +924,12 @@ const handleResize = () => {
|
||||
height: 482px;
|
||||
}
|
||||
}
|
||||
.empty-state {
|
||||
width: 100%;
|
||||
height: 582px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -82,8 +82,6 @@
|
||||
"
|
||||
:search-params="searchParams"
|
||||
:transform-data="customTransform"
|
||||
:enable-sort="true"
|
||||
@sort-change="handleSortChange"
|
||||
>
|
||||
<template #ennm="{ column, record }">
|
||||
<a-button type="link" size="small" @click="handleView(record)">{{
|
||||
@ -98,7 +96,7 @@
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, computed, onMounted, onUnmounted, nextTick } from 'vue';
|
||||
import { ref, computed, onMounted, onUnmounted, nextTick, watch } from 'vue';
|
||||
import * as echarts from 'echarts';
|
||||
import type { EChartsOption } from 'echarts';
|
||||
import dayjs from 'dayjs';
|
||||
@ -117,6 +115,7 @@ const props = defineProps<{
|
||||
type?: string;
|
||||
basicId?: string;
|
||||
qecPerformance?: any;
|
||||
dateArr?: string[];
|
||||
}>();
|
||||
|
||||
const JidiSelectEventStore = useJidiSelectEventStore();
|
||||
@ -126,7 +125,7 @@ const columns = [
|
||||
key: 'baseName',
|
||||
title: '所属基地',
|
||||
dataIndex: 'baseName',
|
||||
sorter: true // 启用排序
|
||||
sort: true // 启用排序
|
||||
}
|
||||
: null,
|
||||
{
|
||||
@ -134,13 +133,13 @@ const columns = [
|
||||
title: '电站名称',
|
||||
dataIndex: 'ennm',
|
||||
slots: { customRender: 'action' },
|
||||
sorter: true // 启用排序
|
||||
sort: true // 启用排序
|
||||
},
|
||||
{
|
||||
key: 'addvcdName',
|
||||
title: '行政区',
|
||||
dataIndex: 'addvcdName',
|
||||
sorter: true // 启用排序
|
||||
sort: true // 启用排序
|
||||
},
|
||||
{
|
||||
key: 'hbrvcdName',
|
||||
@ -152,7 +151,7 @@ const columns = [
|
||||
key: 'qecRate',
|
||||
title: `生态流量达标率(%)`,
|
||||
dataIndex: 'qecRate',
|
||||
sorter: true, // 启用排序
|
||||
sort: true, // 启用排序
|
||||
width: '160px',
|
||||
customRender: ({ text }: any) => {
|
||||
if (text === null || text === undefined || text === '' || text === '-')
|
||||
@ -165,7 +164,7 @@ const columns = [
|
||||
title: '去年同期达标率(%)',
|
||||
dataIndex: 'beforeQecRate',
|
||||
width: '160px',
|
||||
sorter: true, // 启用排序
|
||||
sort: true, // 启用排序
|
||||
customRender: ({ text }: any) => {
|
||||
if (text === null || text === undefined || text === '' || text === '-')
|
||||
return '-';
|
||||
@ -175,12 +174,6 @@ const columns = [
|
||||
].filter(Boolean);
|
||||
const tableRef = ref();
|
||||
|
||||
// 排序状态管理
|
||||
const sortInfo = ref<{ field: string; order: string | null }>({
|
||||
field: '',
|
||||
order: null
|
||||
});
|
||||
|
||||
const defaultSort = ref([
|
||||
{
|
||||
field: 'baseId',
|
||||
@ -205,39 +198,22 @@ const searchParams = computed(() => {
|
||||
let baseSort;
|
||||
|
||||
// 如果用户触发了排序，将其加入排序数组
|
||||
if (sortInfo.value.field && sortInfo.value.order) {
|
||||
baseSort = [
|
||||
{
|
||||
field: sortInfo.value.field,
|
||||
dir: sortInfo.value.order === 'ascend' ? 'asc' : 'desc'
|
||||
}
|
||||
];
|
||||
} else {
|
||||
|
||||
// 使用默认排序
|
||||
baseSort = defaultSort.value;
|
||||
}
|
||||
|
||||
return {
|
||||
sort: baseSort
|
||||
};
|
||||
});
|
||||
|
||||
// 处理排序变化
|
||||
const handleSortChange = (info: {
|
||||
field: string;
|
||||
order: 'ascend' | 'descend' | null;
|
||||
}) => {
|
||||
sortInfo.value.field = info.field || '';
|
||||
sortInfo.value.order = info.order || null;
|
||||
|
||||
// 等待 DOM 和响应式状态更新完成后再触发搜索
|
||||
nextTick(() => {
|
||||
fetchTableData();
|
||||
});
|
||||
};
|
||||
|
||||
// 初始化日期范围：上个月的本日到今天
|
||||
// 初始化日期范围：上个月的本日到今天，或根据父组件传入的 dateArr
|
||||
const initDateRange = () => {
|
||||
// 如果父组件传入了 dateArr，使用它
|
||||
if (props.dateArr && props.dateArr.length === 2) {
|
||||
return [dayjs(props.dateArr[0]), dayjs(props.dateArr[1])];
|
||||
}
|
||||
// 否则使用默认的"上个月的本日到今天"
|
||||
const today = dayjs();
|
||||
const lastMonthSameDay = today.subtract(1, 'month');
|
||||
return [lastMonthSameDay, today];
|
||||
@ -245,6 +221,17 @@ const initDateRange = () => {
|
||||
|
||||
const dateRange = ref(initDateRange());
|
||||
|
||||
// 监听父组件传入的 dateArr 变化
|
||||
watch(
|
||||
() => props.dateArr,
|
||||
newVal => {
|
||||
if (newVal && newVal.length === 2) {
|
||||
dateRange.value = [dayjs(newVal[0]), dayjs(newVal[1])];
|
||||
}
|
||||
},
|
||||
{ deep: true }
|
||||
);
|
||||
|
||||
const params = ref({
|
||||
qid: props.basicId || 'all',
|
||||
ennm: '',
|
||||
@ -387,6 +374,8 @@ const jdColor = [
|
||||
const fetchPieData = async () => {
|
||||
if (!params.value.sTime || !params.value.eTime) return;
|
||||
|
||||
const isAllBase = params.value.qid === 'all';
|
||||
|
||||
dataLoading.value = true;
|
||||
try {
|
||||
const { sTime, eTime, qid, ennm } = params.value;
|
||||
@ -437,17 +426,16 @@ const fetchPieData = async () => {
|
||||
].filter(Boolean)
|
||||
},
|
||||
group: [
|
||||
isAllBase
|
||||
? { dir: 'asc', field: 'baseStepSort' }
|
||||
: { dir: 'asc', field: 'rvcdStepSort' },
|
||||
{
|
||||
dir: 'asc',
|
||||
field: 'rvcdStepSort'
|
||||
field: isAllBase ? 'baseId' : 'hbrvcd'
|
||||
},
|
||||
{
|
||||
dir: 'asc',
|
||||
field: 'hbrvcd'
|
||||
},
|
||||
{
|
||||
dir: 'asc',
|
||||
field: 'hbrvcdName'
|
||||
field: isAllBase ? 'baseName' : 'hbrvcdName'
|
||||
}
|
||||
],
|
||||
groupResultFlat: true
|
||||
@ -457,10 +445,10 @@ const fetchPieData = async () => {
|
||||
const res = await vmsstbprptGetKendoList(obj);
|
||||
if (res?.data?.data) {
|
||||
const dataSource = res.data.data.map((el: any) => ({
|
||||
id: el.hbrvcd,
|
||||
name: el.hbrvcdName,
|
||||
value: el.count_hbrvcd,
|
||||
key: el.hbrvcd
|
||||
id: isAllBase ? el.baseId : el.hbrvcd,
|
||||
name: isAllBase ? el.baseName : el.hbrvcdName,
|
||||
value: isAllBase ? el.count_baseId : el.count_hbrvcd,
|
||||
key: isAllBase ? el.baseId : el.hbrvcd
|
||||
}));
|
||||
|
||||
pieData.value = dataSource;
|
||||
|
||||
@ -53,7 +53,8 @@
|
||||
v-if="detailModalVisible"
|
||||
:type="mode"
|
||||
:basicId="detailData[0]?.baseId"
|
||||
:qecPerformance=detailData[0].qecPerformance
|
||||
:qecPerformance="detailData[0].qecPerformance"
|
||||
:date-arr="dateArr"
|
||||
/>
|
||||
</a-modal>
|
||||
</template>
|
||||
@ -65,6 +66,7 @@ import * as echarts from 'echarts';
|
||||
import { eqqecRateCount, evnmAutoMonitorGetKendoListCust } from '@/api/stll';
|
||||
import ModalYkzhbzdjcgz from '../shengtaidabiaoMod/TwoLayer/ModalYkzhbzdjcgz.vue';
|
||||
import STLLXFFS from './TwoLayer/STLLXFFS.vue'
|
||||
import { useMapViewStore } from '@/modules/map/stores/map-view.store';
|
||||
// 定义组件名（便于调试和递归）
|
||||
defineOptions({
|
||||
name: 'shengtaidabiaoMod'
|
||||
@ -73,8 +75,9 @@ const mode = ref('top');
|
||||
const spinning = ref(false);
|
||||
const chartRef = ref<HTMLElement | null>(null);
|
||||
let chartInstance: echarts.ECharts | null = null;
|
||||
|
||||
const mapViewStore = useMapViewStore();
|
||||
// 动态数据存储
|
||||
let dateArr = ref<any[]>([]);
|
||||
const chartData = ref<{
|
||||
categories: string[];
|
||||
currentData: number[];
|
||||
@ -333,12 +336,7 @@ const handleChartClick = (params: any) => {
|
||||
detailModalVisible.value = true;
|
||||
};
|
||||
|
||||
const getdate = () => {
|
||||
const now = new Date();
|
||||
const oneMonthAgo = new Date(now);
|
||||
oneMonthAgo.setMonth(oneMonthAgo.getMonth() - 1);
|
||||
|
||||
// 格式化日期为 YYYY-MM-DD
|
||||
const getdate = (offsetYears = 0) => {
|
||||
const formatDate = (date: Date) => {
|
||||
const year = date.getFullYear();
|
||||
const month = String(date.getMonth() + 1).padStart(2, '0');
|
||||
@ -346,15 +344,57 @@ const getdate = () => {
|
||||
return `${year}-${month}-${day}`;
|
||||
};
|
||||
|
||||
const startDate = `${formatDate(oneMonthAgo)} 00:00:00`;
|
||||
const endDate = `${formatDate(now)} 23:59:59`;
|
||||
const startDate1 = `${formatDate(oneMonthAgo)}`;
|
||||
const endDate1 = `${formatDate(now)}`;
|
||||
let startDate: string;
|
||||
let endDate: string;
|
||||
let startDate1: string;
|
||||
let endDate1: string;
|
||||
|
||||
// 如果 dateArr.value 有数据，使用数组中的日期
|
||||
if (dateArr.value && dateArr.value.length === 2) {
|
||||
|
||||
const start = new Date(dateArr.value[0]);
|
||||
const end = new Date(dateArr.value[1]);
|
||||
|
||||
// 如果 offsetYears 不为 0，表示获取去年同期的时间
|
||||
if (offsetYears !== 0) {
|
||||
start.setFullYear(start.getFullYear() + offsetYears);
|
||||
end.setFullYear(end.getFullYear() + offsetYears);
|
||||
}
|
||||
|
||||
startDate = `${formatDate(start)} 00:00:00`;
|
||||
endDate = `${formatDate(end)} 23:59:59`;
|
||||
// 提取日期部分（去除时间）
|
||||
startDate1 = formatDate(start);
|
||||
endDate1 = formatDate(end);
|
||||
// debugger
|
||||
} else {
|
||||
// 否则使用默认的"一个月前到现在"
|
||||
const now = new Date();
|
||||
const oneMonthAgo = new Date(now);
|
||||
oneMonthAgo.setMonth(oneMonthAgo.getMonth() - 1);
|
||||
|
||||
// 如果 offsetYears 不为 0，表示获取去年同期的时间
|
||||
if (offsetYears !== 0) {
|
||||
now.setFullYear(now.getFullYear() + offsetYears);
|
||||
oneMonthAgo.setFullYear(oneMonthAgo.getFullYear() + offsetYears);
|
||||
}
|
||||
|
||||
startDate = `${formatDate(oneMonthAgo)} 00:00:00`;
|
||||
endDate = `${formatDate(now)} 23:59:59`;
|
||||
startDate1 = formatDate(oneMonthAgo);
|
||||
endDate1 = formatDate(now);
|
||||
}
|
||||
|
||||
return { startDate, endDate, startDate1, endDate1 };
|
||||
};
|
||||
const getEcharts = async () => {
|
||||
let params = {
|
||||
filter: {
|
||||
// 获取当前时间范围
|
||||
const currentDateRange = getdate(0);
|
||||
// 获取去年同期时间范围（往前推一年）
|
||||
const lastYearDateRange = getdate(-1);
|
||||
|
||||
// 构建基础 filter（不包含时间）
|
||||
const baseFilter = {
|
||||
logic: 'and',
|
||||
filters: [
|
||||
mode.value == 'top'
|
||||
@ -369,57 +409,80 @@ const getEcharts = async () => {
|
||||
operator: 'eq',
|
||||
dataType: 'string',
|
||||
value: 'DAY'
|
||||
},
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
// 构建当前时间范围的 params
|
||||
const currentParams = {
|
||||
filter: {
|
||||
...baseFilter,
|
||||
filters: [
|
||||
...baseFilter.filters,
|
||||
{
|
||||
field: 'tm',
|
||||
operator: 'gte',
|
||||
dataType: 'date',
|
||||
value: getdate().startDate
|
||||
value: currentDateRange.startDate
|
||||
},
|
||||
{
|
||||
field: 'tm',
|
||||
operator: 'lte',
|
||||
dataType: 'date',
|
||||
value: getdate().endDate
|
||||
value: currentDateRange.endDate
|
||||
}
|
||||
]
|
||||
},
|
||||
group:
|
||||
mode.value == 'top'
|
||||
? [
|
||||
{ dir: 'asc', field: 'basestepsort' },
|
||||
{ dir: 'asc', field: 'baseId' },
|
||||
{ dir: 'asc', field: 'baseName' }
|
||||
]
|
||||
: [{ dir: 'asc', field: 'qecPerformance' }]
|
||||
};
|
||||
|
||||
// 构建去年同期时间范围的 params
|
||||
const lastYearParams = {
|
||||
filter: {
|
||||
...baseFilter,
|
||||
filters: [
|
||||
...baseFilter.filters,
|
||||
{
|
||||
dir: 'asc',
|
||||
field: 'basestepsort'
|
||||
field: 'tm',
|
||||
operator: 'gte',
|
||||
dataType: 'date',
|
||||
value: lastYearDateRange.startDate
|
||||
},
|
||||
{
|
||||
dir: 'asc',
|
||||
field: 'baseId'
|
||||
field: 'tm',
|
||||
operator: 'lte',
|
||||
dataType: 'date',
|
||||
value: lastYearDateRange.endDate
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
dir: 'asc',
|
||||
field: 'baseName'
|
||||
}
|
||||
]
|
||||
: [
|
||||
{
|
||||
dir: 'asc',
|
||||
field: 'qecPerformance'
|
||||
}
|
||||
]
|
||||
group: currentParams.group
|
||||
};
|
||||
|
||||
try {
|
||||
const res: any = await eqqecRateCount(params);
|
||||
// 并行请求两个 API
|
||||
const [currentRes, lastYearRes]: [any, any] = await Promise.all([
|
||||
eqqecRateCount(currentParams),
|
||||
eqqecRateCount(lastYearParams)
|
||||
]);
|
||||
|
||||
// 处理返回数据
|
||||
if (res && res.success && res.data && res.data.data) {
|
||||
const apiData = res.data.data;
|
||||
// 处理当前数据
|
||||
const currentApiData = (currentRes && currentRes.data && currentRes.data.data) ? currentRes.data.data : [];
|
||||
// 处理去年同期数据
|
||||
const lastYearApiData = (lastYearRes && lastYearRes.data && lastYearRes.data) ? lastYearRes.data.data : [];
|
||||
|
||||
// 根据 mode 提取不同的数据
|
||||
if (mode.value === 'top') {
|
||||
// 按基地模式：去重处理（避免 baseId 重复）
|
||||
const uniqueMap = new Map();
|
||||
apiData.forEach((item: any) => {
|
||||
currentApiData.forEach((item: any) => {
|
||||
if (!uniqueMap.has(item.baseId)) {
|
||||
uniqueMap.set(item.baseId, item);
|
||||
}
|
||||
@ -427,40 +490,48 @@ const getEcharts = async () => {
|
||||
|
||||
const uniqueData = Array.from(uniqueMap.values());
|
||||
|
||||
// 建立去年同期的数据映射（按 baseId）
|
||||
const lastYearMap = new Map();
|
||||
lastYearApiData.forEach((item: any) => {
|
||||
if (!lastYearMap.has(item.baseId)) {
|
||||
lastYearMap.set(item.baseId, item.qecRate);
|
||||
}
|
||||
});
|
||||
|
||||
chartData.value = {
|
||||
categories: uniqueData.map((item: any) => item.baseName || ''),
|
||||
currentData: uniqueData.map((item: any) =>
|
||||
item.qecRate != null ? Number(item.qecRate) : 0
|
||||
),
|
||||
lastYearData: uniqueData.map((item: any) =>
|
||||
item.beforeQecRate != null ? Number(item.beforeQecRate) : 0
|
||||
),
|
||||
lastYearData: uniqueData.map((item: any) => {
|
||||
const lastYearRate = lastYearMap.get(item.baseId);
|
||||
return lastYearRate != null ? Number(lastYearRate) : 0;
|
||||
}),
|
||||
baseIds: uniqueData.map((item: any) => item.baseId),
|
||||
qecPerformances: []
|
||||
};
|
||||
} else {
|
||||
// 按调节性能模式
|
||||
|
||||
// 建立去年同期的数据映射（按 qecPerformance）
|
||||
const lastYearMap = new Map();
|
||||
lastYearApiData.forEach((item: any) => {
|
||||
if (!lastYearMap.has(item.qecPerformance)) {
|
||||
lastYearMap.set(item.qecPerformance, item.qecRate);
|
||||
}
|
||||
});
|
||||
|
||||
chartData.value = {
|
||||
categories: apiData.map((item: any) => item.qecPerformanceName || ''),
|
||||
currentData: apiData.map((item: any) =>
|
||||
categories: currentApiData.map((item: any) => item.qecPerformanceName || ''),
|
||||
currentData: currentApiData.map((item: any) =>
|
||||
item.qecRate != null ? Number(item.qecRate) : 0
|
||||
),
|
||||
lastYearData: apiData.map((item: any) =>
|
||||
item.beforeQecRate != null ? Number(item.beforeQecRate) : 0
|
||||
),
|
||||
lastYearData: currentApiData.map((item: any) => {
|
||||
const lastYearRate = lastYearMap.get(item.qecPerformance);
|
||||
return lastYearRate != null ? Number(lastYearRate) : 0;
|
||||
}),
|
||||
baseIds: [],
|
||||
qecPerformances: apiData.map((item: any) => item.qecPerformance || '')
|
||||
};
|
||||
}
|
||||
} else {
|
||||
console.warn('API 返回数据格式异常');
|
||||
// 使用空数据
|
||||
chartData.value = {
|
||||
categories: [],
|
||||
currentData: [],
|
||||
lastYearData: [],
|
||||
baseIds: [],
|
||||
qecPerformances: []
|
||||
qecPerformances: currentApiData.map((item: any) => item.qecPerformance || '')
|
||||
};
|
||||
}
|
||||
} catch (error) {
|
||||
@ -517,6 +588,18 @@ onMounted(() => {
|
||||
});
|
||||
});
|
||||
|
||||
watch(
|
||||
() => mapViewStore.searchTimeRange,
|
||||
(newVal, oldVal) => {
|
||||
console.log('时间范围变化:', oldVal, '->', newVal);
|
||||
dateArr.value = newVal
|
||||
// debugger
|
||||
loadData();
|
||||
// 处理你的逻辑
|
||||
},
|
||||
{ deep: true }
|
||||
);
|
||||
|
||||
// 详情弹框相关
|
||||
const detailModalVisible = ref(false);
|
||||
const detailModalTitle = ref('');
|
||||
|
||||
Loading…
Reference in New Issue
Block a user