栖息地本地接口对接，加BasicTable组件增加超出隐藏和文字提示，如果有空数据就显示-，添加排序功能。
This commit is contained in:
王兴凯
parent
28e7b8013d
commit
4fce47618b
@ -2,7 +2,7 @@ import request from '@/utils/request';
|
||||
//栖息地保护工作开展情况
|
||||
export function fhGetKendoListCust(data: any) {
|
||||
return request({
|
||||
url: '/api/wmp-env-server/env/fh/GetKendoListCust',
|
||||
url: '/fh/GetKendoListCust',
|
||||
method: 'post',
|
||||
data
|
||||
});
|
||||
@ -10,7 +10,7 @@ export function fhGetKendoListCust(data: any) {
|
||||
//获取所属栖息地
|
||||
export function msstbprptGetKendoList(data: any) {
|
||||
return request({
|
||||
url: '/api/dec-lygk-base-server/base/msstbprpt/GetKendoList',
|
||||
url: '/fh/msstbprpt/GetKendoList',
|
||||
method: 'post',
|
||||
data
|
||||
});
|
||||
@ -18,7 +18,7 @@ export function msstbprptGetKendoList(data: any) {
|
||||
//水温监测数据
|
||||
export function sdrvwtsGetKendoList(data: any) {
|
||||
return request({
|
||||
url: '/api/wmp-env-server/base/sdrvwts/GetKendoList',
|
||||
url: '/fh/sdrvwts/GetKendoList',
|
||||
method: 'post',
|
||||
data
|
||||
});
|
||||
@ -26,7 +26,7 @@ export function sdrvwtsGetKendoList(data: any) {
|
||||
//水文监测
|
||||
export function sdriverdaysGetKendoList(data: any) {
|
||||
return request({
|
||||
url: '/api/wmp-swqx-server/zq/sdriverdays/GetKendoList',
|
||||
url: '/fh/zq/sdriverdays/GetKendoList',
|
||||
method: 'post',
|
||||
data
|
||||
});
|
||||
@ -34,7 +34,7 @@ export function sdriverdaysGetKendoList(data: any) {
|
||||
//主要栖息地基本信息
|
||||
export function fhGetKendoListCustom(data: any) {
|
||||
return request({
|
||||
url: '/api/wmp-env-server/env/fh/GetKendoListCustom',
|
||||
url: '/fh/GetKendoListCustom',
|
||||
method: 'post',
|
||||
data
|
||||
});
|
||||
|
||||
@ -1,16 +1,8 @@
|
||||
<template>
|
||||
<div class="table-container" ref="tableContainerRef">
|
||||
<a-table
|
||||
size="small"
|
||||
:loading="loading"
|
||||
:row-selection="enableRowSelection ? rowSelection : undefined"
|
||||
:data-source="tableData"
|
||||
:columns="columns"
|
||||
:pagination="paginationConfig"
|
||||
:scroll="scrollConfig"
|
||||
:row-key="rowKey"
|
||||
@change="handleTableChange"
|
||||
>
|
||||
<a-table size="small" :loading="loading" :row-selection="enableRowSelection ? rowSelection : undefined"
|
||||
:data-source="tableData" :columns="enhancedColumns" :pagination="paginationConfig" :scroll="scrollConfig"
|
||||
:row-key="rowKey" @change="handleTableChange">
|
||||
<!-- 透传插槽，支持自定义列内容 -->
|
||||
<template v-for="slot in Object.keys($slots)" #[slot]="scope" :key="slot">
|
||||
<slot :name="slot" v-bind="scope"></slot>
|
||||
@ -20,7 +12,8 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, onMounted, watch, nextTick } from "vue";
|
||||
import { ref, computed, onMounted, watch, nextTick, h } from "vue";
|
||||
import { Tooltip } from "ant-design-vue";
|
||||
import { calcTableScrollY } from "@/utils/index";
|
||||
|
||||
// --- Types ---
|
||||
@ -36,6 +29,10 @@ interface Props {
|
||||
isPage?: boolean;
|
||||
getCheckboxProps?: (record: any) => any;
|
||||
transformData?: (res: any) => { records: any[]; total: number };
|
||||
emptyPlaceholder?: string; // 新增：空值占位符
|
||||
processEmptyValues?: boolean; // 新增：是否开启空值处理
|
||||
enableEllipsis?: boolean; // 新增：是否开启超出隐藏
|
||||
enableSort?: boolean; // 新增：是否启用排序功能
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
@ -48,11 +45,16 @@ const props = withDefaults(defineProps<Props>(), {
|
||||
getCheckboxProps: undefined,
|
||||
transformData: undefined,
|
||||
scrollY: undefined,
|
||||
emptyPlaceholder: "-",
|
||||
processEmptyValues: true, // 默认开启
|
||||
enableEllipsis: true, // 默认开启
|
||||
enableSort: false, // 默认关闭，确保旧代码不受影响
|
||||
});
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: "data-loaded", params: any, data: any): void;
|
||||
(e: "selection-change", selectedRowKeys: string[], selectedRows: any[]): void;
|
||||
(e: "sort-change", sortInfo: { field: string; order: 'ascend' | 'descend' | null }): void;
|
||||
}>();
|
||||
|
||||
// --- State ---
|
||||
@ -147,7 +149,7 @@ const getList = async (filter?: Record<string, any>) => {
|
||||
finalTotal = res.data?.data?.total || res?.data?.total || res?.total || 0;
|
||||
}
|
||||
|
||||
tableData.value = finalRecords;
|
||||
tableData.value = processData(finalRecords);
|
||||
total.value = finalTotal;
|
||||
emit("data-loaded", params, { records: finalRecords, total: finalTotal });
|
||||
} catch (error) {
|
||||
@ -159,10 +161,19 @@ const getList = async (filter?: Record<string, any>) => {
|
||||
}
|
||||
};
|
||||
|
||||
const handleTableChange = (pag: any) => {
|
||||
const handleTableChange = (pag: any, filters: any, sorter: any) => {
|
||||
page.value = pag.current;
|
||||
size.value = pag.pageSize;
|
||||
getList();
|
||||
if (props.enableSort) {
|
||||
if (sorter && sorter.field) {
|
||||
emit("sort-change", { field: sorter.field, order: sorter.order });
|
||||
} else {
|
||||
emit("sort-change", { field: '', order: null });
|
||||
}
|
||||
}else {
|
||||
getList();
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
const reset = () => {
|
||||
@ -197,6 +208,52 @@ defineExpose({
|
||||
const observer = new ResizeObserver(() => {
|
||||
tableScrollY.value = calcTableScrollY(tableContainerRef.value);
|
||||
});
|
||||
|
||||
// --- 空值处理工具函数 ---
|
||||
const processData = (records: any[]) => {
|
||||
if (!props.processEmptyValues || !Array.isArray(records)) return records;
|
||||
|
||||
return records.map(record => {
|
||||
const processedRecord: any = { ...record };
|
||||
for (const key in processedRecord) {
|
||||
if (Object.prototype.hasOwnProperty.call(processedRecord, key)) {
|
||||
const val = processedRecord[key];
|
||||
if (val === null || val === undefined || val === "") {
|
||||
processedRecord[key] = props.emptyPlaceholder;
|
||||
}
|
||||
}
|
||||
}
|
||||
return processedRecord;
|
||||
});
|
||||
};
|
||||
|
||||
// --- 列配置增强（超出隐藏 + Tooltip）---
|
||||
const enhancedColumns = computed(() => {
|
||||
if (!props.enableEllipsis) return props.columns;
|
||||
|
||||
return props.columns.map(col => {
|
||||
if (col.customRender) {
|
||||
return col; // 如果已有自定义渲染，则不覆盖
|
||||
}
|
||||
|
||||
return {
|
||||
...col,
|
||||
ellipsis: true, // 启用 Ant Design Vue 原生的 ellipsis 支持
|
||||
customRender: ({ text }: any) => {
|
||||
const content = String(text ?? props.emptyPlaceholder);
|
||||
return h(
|
||||
Tooltip,
|
||||
{ title: content },
|
||||
() => h('div', {
|
||||
class: 'table-cell-ellipsis',
|
||||
style: { overflow: 'hidden', whiteSpace: 'nowrap', textOverflow: 'ellipsis' }
|
||||
}, content)
|
||||
);
|
||||
},
|
||||
};
|
||||
});
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
nextTick(() => {
|
||||
tableScrollY.value = calcTableScrollY(tableContainerRef.value);
|
||||
@ -205,7 +262,7 @@ onMounted(() => {
|
||||
}
|
||||
});
|
||||
if (props.data && props.data.length > 0) {
|
||||
tableData.value = props.data || [];
|
||||
tableData.value = processData(props.data);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
@ -11,7 +11,7 @@
|
||||
<a-select v-model:value="searchData.baseId" placeholder="请选择所属基地" style="width: 200px" show-search
|
||||
:filter-option="filterOption" :options="jiDiList" @change="handleHydropowerStationChange" />
|
||||
<div>所属栖息地:</div>
|
||||
<a-select v-model:value="searchData.fhstcd" placeholder=" " style="width: 200px" allow-clear show-search
|
||||
<a-select v-model:value="searchData.fhstcd" placeholder=" " style="width: 200px" show-search
|
||||
:filter-option="filterOption" :options="stationOptions" />
|
||||
<a-input v-model:value="searchData.stnm" placeholder="请输入电站或设施名称" style="width: 200px" allow-clear />
|
||||
|
||||
@ -22,8 +22,8 @@
|
||||
</a-space>
|
||||
</div>
|
||||
<!-- 列表 -->
|
||||
<BasicTable ref="tableRef" :scrollY="360" :columns="columns" :list-url="fhGetKendoListCust"
|
||||
:search-params="{ sort: sortConfig }" :transform-data="customTransform">
|
||||
<BasicTable ref="tableRef" :scrollY="360" :columns="columns" :list-url="fhGetKendoListCust" :enable-sort="true" @sort-change="handleSortChange"
|
||||
:search-params="searchParams" :transform-data="customTransform">
|
||||
<template #bodyCell="{ column, record }">
|
||||
<template v-if="column.key === 'ennm'">
|
||||
<a @click="handleViewDetail(record, 'dz')" class="text-link">
|
||||
@ -44,7 +44,7 @@
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, computed, watch, onMounted } from 'vue'
|
||||
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";
|
||||
@ -67,6 +67,7 @@ const searchData = ref<any>({
|
||||
const modelStore = useModelStore();
|
||||
const tableRef = ref()
|
||||
const stationOptions: any = ref([])
|
||||
|
||||
// ==================== 基地列表数据(硬编码) ====================
|
||||
const jiDiList: any = ref([
|
||||
{
|
||||
@ -151,67 +152,78 @@ const columns = [
|
||||
key: 'stnm',
|
||||
title: '设施名称',
|
||||
dataIndex: 'stnm',
|
||||
width: '176px'
|
||||
width: '176px',
|
||||
sorter: true,
|
||||
},
|
||||
{
|
||||
key: 'baseName',
|
||||
title: '所在基地',
|
||||
dataIndex: 'baseName',
|
||||
width: '150px'
|
||||
width: '150px',
|
||||
sorter: true,
|
||||
},
|
||||
{
|
||||
key: 'ennm',
|
||||
title: '所属电站',
|
||||
dataIndex: 'ennm',
|
||||
width: '150px'
|
||||
width: '150px',
|
||||
sorter: true,
|
||||
},
|
||||
{
|
||||
key: 'fhstnm',
|
||||
title: '所属栖息地',
|
||||
dataIndex: 'fhstnm',
|
||||
width: '176px'
|
||||
width: '176px',
|
||||
sorter: true,
|
||||
},
|
||||
{
|
||||
key: 'ststdt',
|
||||
title: '开工日期',
|
||||
dataIndex: 'ststdt',
|
||||
width: '150px'
|
||||
width: '150px',
|
||||
sorter: true,
|
||||
},
|
||||
{
|
||||
key: 'esstdt',
|
||||
title: '建成日期',
|
||||
dataIndex: 'esstdt',
|
||||
width: '150px'
|
||||
width: '150px',
|
||||
sorter: true,
|
||||
},
|
||||
{
|
||||
key: 'mway',
|
||||
title: '监测方式',
|
||||
dataIndex: 'mway',
|
||||
width: '150px'
|
||||
width: '150px',
|
||||
sorter: true,
|
||||
},
|
||||
{
|
||||
key: 'vlsr',
|
||||
title: '数据接入来源',
|
||||
dataIndex: 'vlsr',
|
||||
width: '150px'
|
||||
width: '150px',
|
||||
sorter: true,
|
||||
},
|
||||
{
|
||||
key: 'hydrodtin_type',
|
||||
title: '数据接入类型',
|
||||
dataIndex: 'hydrodtinType',
|
||||
width: '150px'
|
||||
width: '150px',
|
||||
sorter: true,
|
||||
},
|
||||
{
|
||||
key: 'enable',
|
||||
title: '是否启用',
|
||||
dataIndex: 'enable',
|
||||
width: '150px'
|
||||
width: '150px',
|
||||
sorter: true,
|
||||
},
|
||||
{
|
||||
key: 'dtin',
|
||||
title: '是否接入',
|
||||
dataIndex: 'dtin',
|
||||
width: '150px'
|
||||
width: '150px',
|
||||
sorter: true,
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
@ -221,9 +233,29 @@ const columns = [
|
||||
fixed: 'right' as const
|
||||
}
|
||||
];
|
||||
// 排序配置
|
||||
const sortConfig = computed(() => [
|
||||
{
|
||||
// 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",
|
||||
"dir": "asc"
|
||||
},
|
||||
@ -234,8 +266,11 @@ const sortConfig = computed(() => [
|
||||
{
|
||||
"field": "rstcdStepSort",
|
||||
"dir": "asc"
|
||||
}
|
||||
])
|
||||
}]
|
||||
}
|
||||
|
||||
return params;
|
||||
});
|
||||
const handleTabChange = (key: string) => {
|
||||
console.log('【Tab切换】', key)
|
||||
tabIndex.value = key
|
||||
@ -299,7 +334,7 @@ const handleSearch = () => {
|
||||
searchData.value.baseId != 'all' ? {
|
||||
"field": "baseId",
|
||||
"operator": "eq",
|
||||
"value": "01"
|
||||
"value": searchData.value.baseId
|
||||
} : null,
|
||||
searchData.value.fhstcd != 'all' ? {
|
||||
"field": "fhstcd",
|
||||
@ -353,8 +388,6 @@ const customTransform = (res: any) => {
|
||||
}
|
||||
// 查看详情
|
||||
const handleViewDetail = (record: any, type: any) => {
|
||||
console.log(tabIndex.value)
|
||||
debugger
|
||||
if (type == 'dz') {
|
||||
modelStore.modalVisible = true;
|
||||
modelStore.params.sttp = "ENG";
|
||||
@ -379,10 +412,11 @@ const handleViewDetail = (record: any, type: any) => {
|
||||
modelStore.title = record.stnm + " 详情信息";
|
||||
modelStore.params.stcd = record.stcd;
|
||||
} else if (tabIndex.value == 'VD') {
|
||||
// modelStore.modalVisible = true;
|
||||
// modelStore.params.sttp = "fh_zq_point";
|
||||
// modelStore.title = record.stnm + " 详情信息";
|
||||
// modelStore.params.stcd = record.stcd;
|
||||
modelStore.modalVisible = true;
|
||||
modelStore.params.sttp = "stinfo_ai_video_point";
|
||||
modelStore.title = "视频监控站详情信息";
|
||||
modelStore.isBasicEdit = true;
|
||||
modelStore.params.stcd = record.stcd;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@ -572,8 +572,7 @@ const getselsectData = async () => {
|
||||
}
|
||||
let res = await msstbprptGetKendoList(params)
|
||||
console.log(res)
|
||||
if (!res?.data?.data) {
|
||||
|
||||
if (!res?.data?.data || res.data.data.length == 0) {
|
||||
select.value.value = ''
|
||||
select.value.options = []
|
||||
return
|
||||
|
||||
@ -243,14 +243,14 @@ const updateChart = () => {
|
||||
nameTextStyle: {
|
||||
color: '#333333',
|
||||
fontSize: 12,
|
||||
|
||||
|
||||
},
|
||||
// 计算 Y 轴范围：最小值向下取整，最大值向上取整
|
||||
min: hasData && echartsData.value.length > 0
|
||||
? Math.floor(Math.min(...echartsData.value.map(item => item.wt)))
|
||||
min: hasData && echartsData.value.length > 0
|
||||
? Math.floor(Math.min(...echartsData.value.map(item => item.wt)))
|
||||
: undefined,
|
||||
max: hasData && echartsData.value.length > 0
|
||||
? Math.ceil(Math.max(...echartsData.value.map(item => item.wt)))
|
||||
max: hasData && echartsData.value.length > 0
|
||||
? Math.ceil(Math.max(...echartsData.value.map(item => item.wt)))
|
||||
: undefined,
|
||||
// 确保显示刻度和标签，保持整数
|
||||
axisLabel: {
|
||||
@ -311,7 +311,7 @@ const handleResize = () => {
|
||||
const handleDataPointClick = (params: any) => {
|
||||
console.log('=== 数据点点击事件 ===');
|
||||
console.log('点击参数:', params);
|
||||
|
||||
|
||||
if (!params || !params.dataIndex) {
|
||||
console.warn('无效的数据点点击');
|
||||
return;
|
||||
@ -319,7 +319,7 @@ const handleDataPointClick = (params: any) => {
|
||||
|
||||
const dataIndex = params.dataIndex;
|
||||
const dataItem = echartsData.value[dataIndex];
|
||||
|
||||
|
||||
if (dataItem) {
|
||||
console.log('点击的数据:', {
|
||||
日期: dataItem.dt,
|
||||
@ -384,19 +384,26 @@ const getChartData = async (startDate: string, endDate: string, stcd: string) =>
|
||||
"value": endDate // 例如: "2026-06-30 23:59:59"
|
||||
},
|
||||
{
|
||||
"field": "STCD",
|
||||
"field": "stcd",
|
||||
"operator": "eq",
|
||||
"dataType": "string",
|
||||
"value": stcd
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
"sort": [
|
||||
{
|
||||
"field": "dt",
|
||||
"dir": "asc"
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
// 调用实际的API获取数据
|
||||
const res = await sdrvwtsGetKendoList(params);
|
||||
debugger
|
||||
console.log('API返回结果:', res);
|
||||
|
||||
|
||||
let data = res?.data?.data || [];
|
||||
console.log('原始数据条数:', data.length);
|
||||
|
||||
@ -418,14 +425,14 @@ const getChartData = async (startDate: string, endDate: string, stcd: string) =>
|
||||
console.warn('无效的日期数据:', item);
|
||||
return null;
|
||||
}
|
||||
|
||||
|
||||
// 确保 wt 是数值类型
|
||||
const wt = typeof item.wt === 'number' ? item.wt : parseFloat(item.wt);
|
||||
if (isNaN(wt)) {
|
||||
console.warn('无效的水温数据:', item);
|
||||
return null;
|
||||
}
|
||||
|
||||
|
||||
return {
|
||||
dt: item.dt.substring(0, 10), // 提取 "2026-05-02" 格式
|
||||
wt: wt, // 确保是 number 类型
|
||||
@ -577,12 +584,12 @@ const getselsectData = async () => {
|
||||
}
|
||||
let res = await msstbprptGetKendoList(params)
|
||||
console.log(res)
|
||||
if (!res?.data?.data) {
|
||||
|
||||
if (!res?.data?.data || res.data.data.length == 0) {
|
||||
select.value.value = ''
|
||||
select.value.options = []
|
||||
return
|
||||
}
|
||||
|
||||
select.value.value = res.data.data[0].stcd
|
||||
select.value.options = res.data.data.map((item: any) => {
|
||||
return {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user