添加电站预警提示
This commit is contained in:
扈兆增
parent
f42a10f8b1
commit
d327e990eb
1
frontend/src/assets/svg/for.svg
Normal file
1
frontend/src/assets/svg/for.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg width="16" height="14" xmlns="http://www.w3.org/2000/svg"><path d="M6.71 14 0 7.069l1.722-1.401L5.6 8.758c1.59-1.918 5.12-5.729 9.99-8.758L16 .96C11.529 5.13 7.87 11 6.71 14Z" fill="#3BA272" fill-rule="nonzero"/></svg>
|
||||
|
After Width: | Height: | Size: 223 B |
1
frontend/src/assets/svg/not-building.svg
Normal file
1
frontend/src/assets/svg/not-building.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M2 2L14 14M14 2L2 14" stroke="#ff4d4f" stroke-width="2" fill="none"/></svg>
|
||||
|
After Width: | Height: | Size: 167 B |
@ -664,11 +664,8 @@ const enhancedColumns = computed(() => {
|
||||
},
|
||||
h(
|
||||
Tooltip,
|
||||
{
|
||||
title: String(text)
|
||||
},
|
||||
{
|
||||
default: () => h(
|
||||
{ title: String(text) },
|
||||
h(
|
||||
'span',
|
||||
{
|
||||
style: {
|
||||
@ -681,7 +678,6 @@ const enhancedColumns = computed(() => {
|
||||
},
|
||||
String(text)
|
||||
)
|
||||
}
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
@ -4,7 +4,8 @@
|
||||
<a-tab-pane v-for="tab in tabsItems" :key="tab.key" :tab="tab.name">
|
||||
<div class="table-wrapper">
|
||||
<BasicTable
|
||||
ref="tableRef"
|
||||
scrollY="400px"
|
||||
:ref="(el: any) => setTableRef(el, tab.key)"
|
||||
:columns="currentColumns"
|
||||
:list-url="fetchTableData"
|
||||
:search-params="searchParams"
|
||||
@ -12,14 +13,24 @@
|
||||
</div>
|
||||
</a-tab-pane>
|
||||
</a-tabs>
|
||||
<CommonAttachmentModal
|
||||
v-model:open="attachmentModalVisible"
|
||||
:fid="currentAttachmentFid"
|
||||
title="查看附件"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, computed, watch } from 'vue';
|
||||
import { ref, computed, watch, nextTick, h } from 'vue';
|
||||
import BasicTable from '@/components/BasicTable/index.vue';
|
||||
import { queryPostUrlList } from '@/api/mapModal';
|
||||
import { useModelStore } from '@/store/modules/model';
|
||||
import forSvg from '@/assets/svg/for.svg';
|
||||
import notBuildingSvg from '@/assets/svg/not-building.svg';
|
||||
import runWarningSvg from '@/assets/svg/run-warning.svg';
|
||||
import CommonAttachmentModal from './CommonAttachmentModal.vue';
|
||||
import { Button, Tooltip } from 'ant-design-vue';
|
||||
|
||||
const props = defineProps<{
|
||||
tabsItems: Array<{
|
||||
@ -35,38 +46,80 @@ const props = defineProps<{
|
||||
const modelStore = useModelStore();
|
||||
const activeTabKey = ref(props.tabsItems?.[0]?.key || '');
|
||||
const hasLoaded = ref(false);
|
||||
const tableRef = ref();
|
||||
const tableRefMap = ref<Record<string, any>>({});
|
||||
const attachmentModalVisible = ref(false);
|
||||
const currentAttachmentFid = ref('');
|
||||
const setTableRef = (el: any, key: string) => {
|
||||
if (el) {
|
||||
tableRefMap.value[key] = el;
|
||||
}
|
||||
};
|
||||
|
||||
// 搜索参数
|
||||
const searchParams = computed(() => ({
|
||||
...modelStore.params
|
||||
}));
|
||||
|
||||
// 构建 stcd 过滤条件
|
||||
const buildFilter = () => ({
|
||||
logic: 'and' as const,
|
||||
filters: [
|
||||
{
|
||||
field: 'stcd',
|
||||
operator: 'eq' as const,
|
||||
dataType: 'string' as const,
|
||||
value: modelStore.params.stcd
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
// 通用 是/否 图标渲染（处理 '-' 占位符）
|
||||
const renderStatusIcon = (withBorderRadius = false) => {
|
||||
return ({ text }: { text: string }) => {
|
||||
if (text == '-') return '-';
|
||||
return h('img', {
|
||||
src: text == '1' ? forSvg : notBuildingSvg,
|
||||
style: {
|
||||
width: '16px',
|
||||
height: '16px',
|
||||
...(withBorderRadius ? { objectFit: 'cover', borderRadius: '4px' } : {})
|
||||
}
|
||||
});
|
||||
};
|
||||
};
|
||||
|
||||
// 查看附件
|
||||
const handleViewAttachment = (record: any) => {
|
||||
if (!record?.file) return;
|
||||
currentAttachmentFid.value = String(record.file);
|
||||
attachmentModalVisible.value = true;
|
||||
};
|
||||
|
||||
// 不同 tab 的表头配置
|
||||
const columnsMap: Record<string, any[]> = {
|
||||
DesignParameterChangePrompt: [
|
||||
{
|
||||
title: '重大变动类型',
|
||||
dataIndex: 'majorChangeType',
|
||||
key: 'majorChangeType'
|
||||
dataIndex: 'stage',
|
||||
key: 'stage'
|
||||
},
|
||||
{ title: '依据阶段', dataIndex: 'basisStage', key: 'basisStage' },
|
||||
{ title: '依据阶段', dataIndex: 'contrastphase', key: 'contrastphase' },
|
||||
{
|
||||
title: '有重大变动的阶段',
|
||||
dataIndex: 'changedStage',
|
||||
key: 'changedStage'
|
||||
dataIndex: 'currentstage',
|
||||
key: 'currentstage'
|
||||
},
|
||||
{
|
||||
title: '依据阶段数据',
|
||||
dataIndex: 'basisStageData',
|
||||
key: 'basisStageData'
|
||||
dataIndex: 'phasevalue',
|
||||
key: 'phasevalue'
|
||||
},
|
||||
{
|
||||
title: '重大变动阶段数据',
|
||||
dataIndex: 'changedStageData',
|
||||
key: 'changedStageData'
|
||||
dataIndex: 'stagevalue',
|
||||
key: 'stagevalue'
|
||||
},
|
||||
{ title: '预警描述', dataIndex: 'warningDesc', key: 'warningDesc' }
|
||||
{ title: '预警描述', dataIndex: 'messagename', key: 'messagename' }
|
||||
],
|
||||
ImplementEarlyWarning: [
|
||||
{ title: '设施名称', dataIndex: 'stnm', key: 'stnm' },
|
||||
@ -74,63 +127,141 @@ const columnsMap: Record<string, any[]> = {
|
||||
{ title: '流域', dataIndex: 'rvnm', key: 'rvnm' },
|
||||
{
|
||||
title: '可研(核准)',
|
||||
dataIndex: 'feasibilityApproval',
|
||||
key: 'feasibilityApproval'
|
||||
dataIndex: 'kyhzhb',
|
||||
key: 'kyhzhb',
|
||||
customRender: renderStatusIcon(true)
|
||||
},
|
||||
{
|
||||
title: '预可是否设计',
|
||||
dataIndex: 'preFeasibilityDesign',
|
||||
key: 'preFeasibilityDesign'
|
||||
dataIndex: 'prdsgn',
|
||||
key: 'prdsgn',
|
||||
customRender: renderStatusIcon(true)
|
||||
},
|
||||
{
|
||||
title: '环评是否有要求',
|
||||
dataIndex: 'eiarqst',
|
||||
key: 'eiarqst'
|
||||
key: 'eiarqst',
|
||||
customRender: renderStatusIcon(true)
|
||||
},
|
||||
{ title: '专项设计', dataIndex: 'specialDesign', key: 'specialDesign' },
|
||||
{ title: '建设', dataIndex: 'isbuild', key: 'isbuild' },
|
||||
{ title: '证明材料', dataIndex: 'proofMaterial', key: 'proofMaterial' }
|
||||
{
|
||||
title: '专项设计',
|
||||
dataIndex: 'zxsjhb',
|
||||
key: 'zxsjhb',
|
||||
customRender: renderStatusIcon()
|
||||
},
|
||||
{
|
||||
title: '建设',
|
||||
dataIndex: 'isbuild',
|
||||
key: 'isbuild',
|
||||
customRender: renderStatusIcon()
|
||||
},
|
||||
{
|
||||
title: '证明材料',
|
||||
dataIndex: 'file',
|
||||
key: 'file',
|
||||
customRender: ({ record }: { record: any }) => {
|
||||
return h(
|
||||
Button,
|
||||
{
|
||||
type: 'link',
|
||||
size: 'small',
|
||||
disabled: !record?.file,
|
||||
onClick: () => handleViewAttachment(record)
|
||||
},
|
||||
'查看附件'
|
||||
);
|
||||
}
|
||||
}
|
||||
],
|
||||
ConstructionEarlyWarning: [
|
||||
{ title: '设施名称', dataIndex: 'facilityName', key: 'facilityName' },
|
||||
{ title: '行政区', dataIndex: 'district', key: 'district' },
|
||||
{ title: '流域', dataIndex: 'basin', key: 'basin' },
|
||||
{ title: '设施名称', dataIndex: 'stnm', key: 'stnm' },
|
||||
{ title: '行政区', dataIndex: 'addvnm', key: 'addvnm' },
|
||||
{ title: '流域', dataIndex: 'rvnm', key: 'rvnm' },
|
||||
{
|
||||
title: '可研(核准)',
|
||||
dataIndex: 'feasibilityApproval',
|
||||
key: 'feasibilityApproval'
|
||||
dataIndex: 'kyhzhb',
|
||||
key: 'kyhzhb',
|
||||
customRender: renderStatusIcon()
|
||||
},
|
||||
{
|
||||
title: '预可是否设计',
|
||||
dataIndex: 'preFeasibilityDesign',
|
||||
key: 'preFeasibilityDesign'
|
||||
dataIndex: 'prdsgn',
|
||||
key: 'prdsgn',
|
||||
customRender: renderStatusIcon(true)
|
||||
},
|
||||
{
|
||||
title: '环评是否有要求',
|
||||
dataIndex: 'eiaRequirement',
|
||||
key: 'eiaRequirement'
|
||||
dataIndex: 'eiarqst',
|
||||
key: 'eiarqst',
|
||||
customRender: renderStatusIcon(true)
|
||||
},
|
||||
{ title: '专项设计', dataIndex: 'specialDesign', key: 'specialDesign' },
|
||||
{ title: '建设', dataIndex: 'construction', key: 'construction' },
|
||||
{ title: '证明材料', dataIndex: 'proofMaterial', key: 'proofMaterial' }
|
||||
{
|
||||
title: '专项设计',
|
||||
dataIndex: 'zxsjhb',
|
||||
key: 'zxsjhb',
|
||||
customRender: renderStatusIcon()
|
||||
},
|
||||
{
|
||||
title: '建设',
|
||||
dataIndex: 'isbuild',
|
||||
key: 'isbuild',
|
||||
customRender: renderStatusIcon()
|
||||
},
|
||||
{
|
||||
title: '证明材料',
|
||||
dataIndex: 'file',
|
||||
key: 'file',
|
||||
customRender: ({ record }: { record: any }) => {
|
||||
return h(
|
||||
Button,
|
||||
{
|
||||
type: 'link',
|
||||
size: 'small',
|
||||
disabled: !record?.file,
|
||||
onClick: () => handleViewAttachment(record)
|
||||
},
|
||||
'查看附件'
|
||||
);
|
||||
}
|
||||
}
|
||||
],
|
||||
RunEarlyWarning: [
|
||||
{ title: '设施名称', dataIndex: 'stnm', key: 'stnm' },
|
||||
{ title: '所属行政区域', dataIndex: 'addvnm', key: 'addvnm' },
|
||||
{ title: '运行状态', dataIndex: 'status', key: 'status' }
|
||||
{
|
||||
title: '运行状态',
|
||||
dataIndex: 'status',
|
||||
key: 'status',
|
||||
customRender: ({ text }: { text: string }) => {
|
||||
if (text == '1') {
|
||||
const img = h('img', {
|
||||
src: runWarningSvg, // 或你需要的图标
|
||||
style: {
|
||||
width: '16px',
|
||||
height: '16px'
|
||||
}
|
||||
});
|
||||
return h(
|
||||
Tooltip,
|
||||
{ title: '一年内是否有填报数据判断是否运行。' },
|
||||
{ default: () => img }
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
ReleaseEarlyWarning: [
|
||||
{ title: '时间', dataIndex: 'releaseTime', key: 'releaseTime' },
|
||||
{ title: '鱼类', dataIndex: 'fishType', key: 'fishType' },
|
||||
{ title: '放鱼规格(cm)', dataIndex: 'fishSpec', key: 'fishSpec' },
|
||||
{ title: '放鱼数量(尾)', dataIndex: 'fishCount', key: 'fishCount' },
|
||||
{ title: '放流地点', dataIndex: 'releaseLocation', key: 'releaseLocation' },
|
||||
{ title: '所在河流', dataIndex: 'river', key: 'river' },
|
||||
{ title: '鱼龄(年)', dataIndex: 'fishAge', key: 'fishAge' },
|
||||
{ title: '标记方式', dataIndex: 'markMethod', key: 'markMethod' },
|
||||
{ title: '标记种类', dataIndex: 'markType', key: 'markType' },
|
||||
{ title: '标记数量(尾)', dataIndex: 'markCount', key: 'markCount' },
|
||||
{ title: '运行状态', dataIndex: 'runStatus', key: 'runStatus' }
|
||||
{ title: '时间', dataIndex: 'year', key: 'year' },
|
||||
{ title: '鱼类', dataIndex: 'ftp', key: 'ftp' },
|
||||
{ title: '放鱼规格(cm)', dataIndex: 'fsz', key: 'fsz' },
|
||||
{ title: '放鱼数量(尾)', dataIndex: 'fcnt', key: 'fcnt' },
|
||||
{ title: '放流地点', dataIndex: 'stlc', key: 'stlc' },
|
||||
{ title: '所在河流', dataIndex: 'rvnm', key: 'rvnm' },
|
||||
{ title: '鱼龄(年)', dataIndex: 'fage', key: 'fage' },
|
||||
{ title: '标记方式', dataIndex: 'bjtp', key: 'bjtp' },
|
||||
{ title: '标记种类', dataIndex: 'bjftp', key: 'bjftp' },
|
||||
{ title: '标记数量(尾)', dataIndex: 'bjfcnt', key: 'bjfcnt' },
|
||||
{ title: '运行状态', dataIndex: 'normal', key: 'normal' }
|
||||
]
|
||||
};
|
||||
|
||||
@ -150,16 +281,22 @@ const fetchTableData = async (params: any) => {
|
||||
if (!currentTableUrl.value) {
|
||||
return { data: { records: [], total: 0 } };
|
||||
}
|
||||
return await queryPostUrlList(currentTableUrl.value, params);
|
||||
return await queryPostUrlList(currentTableUrl.value, {
|
||||
...params,
|
||||
filter: params?.filter || buildFilter()
|
||||
});
|
||||
};
|
||||
|
||||
// tab 切换
|
||||
const handleTabChange = (key: string) => {
|
||||
activeTabKey.value = key;
|
||||
// 切换 tab 时刷新表格数据
|
||||
if (tableRef.value) {
|
||||
tableRef.value.refresh();
|
||||
nextTick(() => {
|
||||
const table = tableRefMap.value[key];
|
||||
if (table) {
|
||||
table.getList(buildFilter());
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
// 监听 isActive 变化，首次激活时请求数据
|
||||
@ -170,8 +307,9 @@ watch(
|
||||
hasLoaded.value = true;
|
||||
// 首次加载当前 tab 数据
|
||||
setTimeout(() => {
|
||||
if (tableRef.value) {
|
||||
// tableRef.value.getList();
|
||||
const table = tableRefMap.value[activeTabKey.value];
|
||||
if (table) {
|
||||
table.getList(buildFilter());
|
||||
}
|
||||
}, 100);
|
||||
}
|
||||
|
||||
@ -604,13 +604,9 @@ const setQGCTabList = async (_tabs: any, stcd: string) => {
|
||||
} else {
|
||||
let arr = ['DW', 'DW_1', 'DW_2', 'DW_3', 'DW_4', 'DW_5', 'DW_6'];
|
||||
if (arr.includes(modelStore.params.sttp)) {
|
||||
tabsConfig.value = newTabs.filter(
|
||||
(item: any) => item.type == 'basic'
|
||||
);
|
||||
tabsConfig.value = newTabs.filter((item: any) => item.type == 'basic');
|
||||
} else {
|
||||
tabsConfig.value = newTabs.filter(
|
||||
(item: any) => item.type != 'video'
|
||||
);
|
||||
tabsConfig.value = newTabs.filter((item: any) => item.type != 'video');
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
|
||||
@ -54,38 +54,35 @@ const ENGTabs: Array<any> = [
|
||||
key: 'DesignParameterChangePrompt',
|
||||
type: 'table',
|
||||
hiddenChart: true,
|
||||
tableUrl: '/dec-lygk-base-server/base/engWarning/GetKendoList'
|
||||
tableUrl: '/base/engWarning/GetKendoList'
|
||||
},
|
||||
{
|
||||
name: '施工期环保措施落实预警',
|
||||
key: 'ImplementEarlyWarning',
|
||||
type: 'table',
|
||||
hiddenChart: true,
|
||||
tableUrl:
|
||||
'/dec-lygk-base-server/base/engWarning/sgqhbss/GetKendoListCust'
|
||||
tableUrl: '/base/engWarning/sgqhbss/GetKendoListCust'
|
||||
},
|
||||
{
|
||||
name: '环保设施建设预警',
|
||||
key: 'ConstructionEarlyWarning',
|
||||
type: 'table',
|
||||
hiddenChart: true,
|
||||
tableUrl:
|
||||
'/dec-lygk-base-server/base/engWarning/hbssjs/GetKendoListCust'
|
||||
tableUrl: '/base/engWarning/hbssjs/GetKendoListCust'
|
||||
},
|
||||
{
|
||||
name: '环保设施运行预警',
|
||||
key: 'RunEarlyWarning',
|
||||
type: 'table',
|
||||
hiddenChart: true,
|
||||
tableUrl:
|
||||
'/dec-lygk-base-server/base/engWarning/hbssyx/GetKendoListCust'
|
||||
tableUrl: '/base/engWarning/hbssyx/GetKendoListCust'
|
||||
},
|
||||
{
|
||||
name: '鱼类放流预警',
|
||||
key: 'ReleaseEarlyWarning',
|
||||
type: 'table',
|
||||
hiddenChart: true,
|
||||
tableUrl: '/dec-lygk-base-server/base/engWarning/ylfl/GetKendoListCust'
|
||||
tableUrl: '/base/engWarning/ylfl/GetKendoListCust'
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
@ -29,6 +29,7 @@
|
||||
</a-carousel>
|
||||
</a-spin>
|
||||
<div class="monitor-table">
|
||||
<a-spin :spinning="tableLoading" tip="加载中...">
|
||||
<BasicTable
|
||||
ref="tableRef"
|
||||
:scrollY="300"
|
||||
@ -44,7 +45,9 @@
|
||||
}"
|
||||
@row-click="handleRowClick"
|
||||
@data-loaded="handleDataLoaded"
|
||||
@sort-change="handleSortChange"
|
||||
/>
|
||||
</a-spin>
|
||||
</div>
|
||||
</SidePanelItem>
|
||||
</template>
|
||||
@ -64,6 +67,7 @@ const DEFAULT_PAGE_SIZE = 20;
|
||||
|
||||
const tableRef = ref();
|
||||
const year = ref<string>('');
|
||||
const tableLoading = ref(false);
|
||||
const tableColumns = ref([
|
||||
{
|
||||
title: '种类',
|
||||
@ -78,6 +82,7 @@ const tableColumns = ref([
|
||||
{
|
||||
title: '救助数量(只)',
|
||||
dataIndex: 'tecnt',
|
||||
sort: true,
|
||||
width: 98
|
||||
},
|
||||
{
|
||||
@ -126,8 +131,9 @@ const handleRowClick = (record: any) => {
|
||||
loadImages(record);
|
||||
};
|
||||
|
||||
// 数据加载完成后默认展示第一条的照片；无数据时清空图片
|
||||
// 数据加载完成后默认展示第一条的照片；无数据时清空图片；清除表格加载状态
|
||||
const handleDataLoaded = (params: any, data: any) => {
|
||||
tableLoading.value = false;
|
||||
const records = data?.records || [];
|
||||
if (records.length > 0) {
|
||||
loadImages(records[0]);
|
||||
@ -136,6 +142,11 @@ const handleDataLoaded = (params: any, data: any) => {
|
||||
}
|
||||
};
|
||||
|
||||
// 表格排序变化时显示加载状态
|
||||
const handleSortChange = () => {
|
||||
tableLoading.value = true;
|
||||
};
|
||||
|
||||
// ==================== 年份与数据查询 ====================
|
||||
const getDefaultYear = (yearList: any[]) => {
|
||||
const firstItem = yearList?.[0];
|
||||
@ -205,7 +216,10 @@ const getTableList = (params: any) => {
|
||||
|
||||
const refreshTable = () => {
|
||||
if (!modelStore.selectedAnchorPoint?.stcd || !year.value) return;
|
||||
tableRef.value?.getList(buildFilter());
|
||||
if (tableRef.value) {
|
||||
tableLoading.value = true;
|
||||
tableRef.value.getList(buildFilter());
|
||||
}
|
||||
};
|
||||
|
||||
// 获取年份列表并赋值默认年份（年份列表第一个），然后自动查询
|
||||
@ -234,6 +248,7 @@ const getYearList = async () => {
|
||||
refreshTable();
|
||||
} catch (error) {
|
||||
console.error('获取年份列表失败:', error);
|
||||
tableLoading.value = false;
|
||||
if (tableRef.value) {
|
||||
tableRef.value.loading = false;
|
||||
}
|
||||
|
||||
@ -23,6 +23,7 @@
|
||||
/>
|
||||
</div>
|
||||
<div class="monitor-table">
|
||||
<a-spin :spinning="tableLoading" tip="加载中...">
|
||||
<BasicTable
|
||||
ref="tableRef"
|
||||
:scrollY="240"
|
||||
@ -33,7 +34,9 @@
|
||||
showSizeChanger: false,
|
||||
showQuickJumper: false
|
||||
}"
|
||||
@sort-change="handleSortChange"
|
||||
/>
|
||||
</a-spin>
|
||||
</div>
|
||||
</a-spin>
|
||||
</SidePanelItem>
|
||||
@ -55,6 +58,7 @@ import { getFlowStationList } from '@/api/DataQueryMenuModule';
|
||||
import { useModelStore } from '@/store/modules/model';
|
||||
import SidePanelItem from '@/components/SidePanelItem/index.vue';
|
||||
import BasicTable from '@/components/BasicTable/index.vue';
|
||||
import { useServerSortTableData } from '@/hooks/useServerSortTableData';
|
||||
import { DateSetting } from '@/utils/enumeration';
|
||||
|
||||
const uiStore = useUiStore();
|
||||
@ -62,7 +66,6 @@ const modelStore = useModelStore();
|
||||
|
||||
const isLoading = ref(false);
|
||||
const chartData = ref<any[]>([]);
|
||||
const tableData = ref<any[]>([]);
|
||||
const tableRef = ref<any>();
|
||||
|
||||
const isDataEmpty = computed(() => {
|
||||
@ -344,27 +347,31 @@ const tableColumns = [
|
||||
dataIndex: 'tm',
|
||||
width: 160,
|
||||
fixed: 'left',
|
||||
sort: true,
|
||||
customRender: ({ text }: any) =>
|
||||
text ? dayjs(text).format('YYYY-MM-DD HH:mm:ss') : '-'
|
||||
},
|
||||
{
|
||||
title: '水位(m)',
|
||||
dataIndex: 'z',
|
||||
width: 120,
|
||||
width: 90,
|
||||
sort: true,
|
||||
customRender: ({ text }: any) =>
|
||||
text !== undefined && text !== null ? Number(text).toFixed(2) : '-'
|
||||
},
|
||||
{
|
||||
title: '流量(m³/s)',
|
||||
dataIndex: 'q',
|
||||
width: 130,
|
||||
width: 100,
|
||||
sort: true,
|
||||
customRender: ({ text }: any) =>
|
||||
text !== undefined && text !== null ? Number(text).toFixed(1) : '-'
|
||||
},
|
||||
{
|
||||
title: '流速(m³/s)',
|
||||
dataIndex: 'v',
|
||||
width: 130,
|
||||
width: 100,
|
||||
sort: true,
|
||||
customRender: ({ text }: any) =>
|
||||
text !== undefined && text !== null ? Number(text).toFixed(2) : '-'
|
||||
}
|
||||
@ -379,14 +386,11 @@ const tableScrollX = computed(() => {
|
||||
});
|
||||
|
||||
// ==================== 数据请求 ====================
|
||||
// 数据请求（查询参数取 modelStore.selectedAnchorPoint）
|
||||
const fetchData = async () => {
|
||||
// 构造表格/图表请求参数（stcd + 时间范围），排序传入时叠加 sort
|
||||
const buildSearchParams = (sort?: { field: string; dir: 'asc' | 'desc' }) => {
|
||||
const stcd = modelStore.selectedAnchorPoint?.stcd;
|
||||
if (!dateRange.value || !stcd) return;
|
||||
isLoading.value = true;
|
||||
|
||||
try {
|
||||
const filterParams = {
|
||||
if (!dateRange.value || !stcd) return null;
|
||||
return {
|
||||
filter: {
|
||||
logic: 'and',
|
||||
filters: [
|
||||
@ -410,10 +414,28 @@ const fetchData = async () => {
|
||||
}
|
||||
]
|
||||
},
|
||||
sort: [{ field: 'tm', dir: 'asc' }]
|
||||
sort: sort ? [sort] : [{ field: 'tm', dir: 'asc' }]
|
||||
};
|
||||
};
|
||||
|
||||
const res = await getFlowStationList(filterParams);
|
||||
// data 模式表格：点击排序时重新请求接口（服务端排序）
|
||||
const {
|
||||
tableData,
|
||||
isLoading: tableLoading,
|
||||
handleSortChange
|
||||
} = useServerSortTableData<any>({
|
||||
request: getFlowStationList,
|
||||
buildSearchParams
|
||||
});
|
||||
|
||||
// 数据请求（查询参数取 modelStore.selectedAnchorPoint）
|
||||
const fetchData = async () => {
|
||||
const params = buildSearchParams();
|
||||
if (!params) return;
|
||||
isLoading.value = true;
|
||||
|
||||
try {
|
||||
const res = await getFlowStationList(params);
|
||||
const rawData = res?.data?.data || res?.data?.records || [];
|
||||
|
||||
tableData.value = [...rawData].reverse();
|
||||
|
||||
@ -34,6 +34,7 @@
|
||||
/>
|
||||
</div>
|
||||
<div class="monitor-table">
|
||||
<a-spin :spinning="tableLoading" tip="加载中...">
|
||||
<BasicTable
|
||||
ref="tableRef"
|
||||
:scrollY="240"
|
||||
@ -44,7 +45,9 @@
|
||||
showSizeChanger: false,
|
||||
showQuickJumper: false
|
||||
}"
|
||||
@sort-change="handleSortChange"
|
||||
/>
|
||||
</a-spin>
|
||||
</div>
|
||||
</a-spin>
|
||||
</SidePanelItem>
|
||||
@ -70,13 +73,13 @@ import { useModelStore } from '@/store/modules/model';
|
||||
import { useUiStore } from '@/store/modules/ui';
|
||||
import SidePanelItem from '@/components/SidePanelItem/index.vue';
|
||||
import BasicTable from '@/components/BasicTable/index.vue';
|
||||
import { useServerSortTableData } from '@/hooks/useServerSortTableData';
|
||||
import { DateSetting } from '@/utils/enumeration';
|
||||
|
||||
const uiStore = useUiStore();
|
||||
const modelStore = useModelStore();
|
||||
|
||||
const isLoading = ref(false);
|
||||
const tableData = ref<any[]>([]);
|
||||
const chartData = ref<any[]>([]);
|
||||
const tableRef = ref<any>();
|
||||
|
||||
@ -161,24 +164,28 @@ const fixedColumns = [
|
||||
{
|
||||
title: '时间',
|
||||
dataIndex: 'tm',
|
||||
width: 160,
|
||||
width: 140,
|
||||
sort: true,
|
||||
customRender: ({ text }: any) =>
|
||||
text ? dayjs(text).format('YYYY-MM-DD HH:mm') : '-'
|
||||
},
|
||||
{
|
||||
title: '水质要求',
|
||||
dataIndex: 'wwqtgName',
|
||||
width: 100
|
||||
sort: true,
|
||||
width: 90
|
||||
},
|
||||
{
|
||||
title: '水质等级',
|
||||
dataIndex: 'wqgrdName',
|
||||
width: 100
|
||||
sort: true,
|
||||
width: 90
|
||||
},
|
||||
{
|
||||
title: '是否达标',
|
||||
dataIndex: 'sfdb',
|
||||
width: 100,
|
||||
sort: true,
|
||||
width: 90,
|
||||
customRender: ({ text }: any) => {
|
||||
const isUnqualified = text == 0; // 0是不达标，1是达标
|
||||
return {
|
||||
@ -201,7 +208,7 @@ const fixedQualityColumns = computed(() => {
|
||||
|
||||
// 宽度判断：默认100，超过5个字140，超过6个字160
|
||||
const titleLen = title.length;
|
||||
let width = 100;
|
||||
let width = 80;
|
||||
if (titleLen > 6) {
|
||||
width = 160;
|
||||
} else if (titleLen > 5) {
|
||||
@ -215,6 +222,7 @@ const fixedQualityColumns = computed(() => {
|
||||
dataIndex,
|
||||
enabled: isEnabled,
|
||||
width,
|
||||
sort: true,
|
||||
customRender: ({ text, record }: any) => {
|
||||
if (!isEnabled) return '-'; // enable=0 显示-
|
||||
if (text === undefined || text === null || text === '') return '-';
|
||||
@ -255,6 +263,7 @@ const fixedQualityColumns = computed(() => {
|
||||
title: '出库流量(m³/s)',
|
||||
dataIndex: 'qo',
|
||||
width: 140,
|
||||
sort: true,
|
||||
customRender: ({ text }: any) => {
|
||||
if (text === undefined || text === null || text === '') return '-';
|
||||
const num = Number(text);
|
||||
@ -512,13 +521,11 @@ const bindLegendEvent = () => {
|
||||
};
|
||||
|
||||
// ==================== 数据请求 ====================
|
||||
const fetchData = async () => {
|
||||
// 构造表格/图表请求参数（stcd + 时间范围），排序传入时叠加 sort
|
||||
const buildSearchParams = (sort?: { field: string; dir: 'asc' | 'desc' }) => {
|
||||
const stcd = modelStore.selectedAnchorPoint?.stcd;
|
||||
if (!dateRange.value || !stcd) return;
|
||||
|
||||
isLoading.value = true;
|
||||
try {
|
||||
const filterParams = {
|
||||
if (!dateRange.value || !stcd) return null;
|
||||
return {
|
||||
filter: {
|
||||
logic: 'and',
|
||||
filters: [
|
||||
@ -542,19 +549,39 @@ const fetchData = async () => {
|
||||
}
|
||||
]
|
||||
},
|
||||
sort: [{ field: 'tm', dir: 'asc' }]
|
||||
sort: sort ? [sort] : [{ field: 'tm', dir: 'asc' }]
|
||||
};
|
||||
};
|
||||
|
||||
// data 模式表格：点击排序时重新请求接口（服务端排序），仅请求列表接口
|
||||
const {
|
||||
tableData,
|
||||
isLoading: tableLoading,
|
||||
handleSortChange
|
||||
} = useServerSortTableData<any>({
|
||||
request: getMonitorDataWaterQualityList,
|
||||
buildSearchParams
|
||||
});
|
||||
|
||||
const fetchData = async () => {
|
||||
const stcd = modelStore.selectedAnchorPoint?.stcd;
|
||||
if (!dateRange.value || !stcd) return;
|
||||
|
||||
isLoading.value = true;
|
||||
try {
|
||||
const params = buildSearchParams();
|
||||
if (!params) return;
|
||||
|
||||
// 并发请求三个接口
|
||||
const [qualityRes, detailRes, listRes] = await Promise.all([
|
||||
getMonitorDataWaterQuality(filterParams),
|
||||
getMonitorDataWaterQuality(params),
|
||||
getMonitorDataWaterQualityDetail({
|
||||
stcd,
|
||||
tbCode: 'WQ_R',
|
||||
startTime: dateRange.value[0].format('YYYY-MM-DD HH:mm:ss'),
|
||||
endTime: dateRange.value[1].format('YYYY-MM-DD HH:mm:ss')
|
||||
}),
|
||||
getMonitorDataWaterQualityList(filterParams)
|
||||
getMonitorDataWaterQualityList(params)
|
||||
]);
|
||||
|
||||
// 判断是否显示综合分析（只有当data不为null且不为空数组时才显示）
|
||||
|
||||
@ -23,6 +23,7 @@
|
||||
/>
|
||||
</div>
|
||||
<div class="monitor-table">
|
||||
<a-spin :spinning="tableLoading" tip="加载中...">
|
||||
<BasicTable
|
||||
ref="tableRef"
|
||||
:scrollY="240"
|
||||
@ -33,6 +34,7 @@
|
||||
showSizeChanger: false,
|
||||
showQuickJumper: false
|
||||
}"
|
||||
@sort-change="handleSortChange"
|
||||
>
|
||||
<template #summary>
|
||||
<a-table-summary fixed>
|
||||
@ -63,6 +65,7 @@
|
||||
</a-table-summary>
|
||||
</template>
|
||||
</BasicTable>
|
||||
</a-spin>
|
||||
</div>
|
||||
</a-spin>
|
||||
</SidePanelItem>
|
||||
@ -85,6 +88,7 @@ import { getMonitorDataWaterTemp } from '@/api/mapModal';
|
||||
import { useModelStore } from '@/store/modules/model';
|
||||
import SidePanelItem from '@/components/SidePanelItem/index.vue';
|
||||
import BasicTable from '@/components/BasicTable/index.vue';
|
||||
import { useServerSortTableData } from '@/hooks/useServerSortTableData';
|
||||
import { DateSetting } from '@/utils/enumeration';
|
||||
import { InfoCircleOutlined } from '@ant-design/icons-vue';
|
||||
|
||||
@ -93,7 +97,6 @@ const modelStore = useModelStore();
|
||||
|
||||
const isLoading = ref(false);
|
||||
const chartData = ref<any[]>([]);
|
||||
const tableData = ref<any[]>([]);
|
||||
const tableRef = ref<any>();
|
||||
|
||||
// ==================== 图表 ====================
|
||||
@ -278,6 +281,7 @@ const baseWaterTempColumns = [
|
||||
title: '时间',
|
||||
dataIndex: 'tm',
|
||||
fixed: 'left',
|
||||
sort: true,
|
||||
customRender: ({ text }: any) =>
|
||||
text ? dayjs(text).format('YYYY-MM-DD HH:mm') : '-'
|
||||
},
|
||||
@ -285,6 +289,7 @@ const baseWaterTempColumns = [
|
||||
title: '水温(°C)',
|
||||
dataIndex: 'wt',
|
||||
summary: true,
|
||||
sort: true,
|
||||
customRender: ({ text }: any) =>
|
||||
text !== undefined && text !== null ? Number(text).toFixed(1) : '-'
|
||||
}
|
||||
@ -412,14 +417,11 @@ const summaryRows = computed(() => {
|
||||
});
|
||||
|
||||
// ==================== 数据请求 ====================
|
||||
// 数据请求（查询参数取 modelStore.selectedAnchorPoint）
|
||||
const fetchData = async () => {
|
||||
// 构造表格/图表请求参数（stcd + 时间范围），排序传入时叠加 sort
|
||||
const buildSearchParams = (sort?: { field: string; dir: 'asc' | 'desc' }) => {
|
||||
const stcd = modelStore.selectedAnchorPoint?.stcd;
|
||||
if (!dateRange.value || !stcd) return;
|
||||
isLoading.value = true;
|
||||
|
||||
try {
|
||||
const filterParams = {
|
||||
if (!dateRange.value || !stcd) return null;
|
||||
return {
|
||||
filter: {
|
||||
logic: 'and',
|
||||
filters: [
|
||||
@ -443,10 +445,27 @@ const fetchData = async () => {
|
||||
}
|
||||
]
|
||||
},
|
||||
sort: [{ field: 'tm', dir: 'asc' }]
|
||||
sort: sort ? [sort] : [{ field: 'tm', dir: 'asc' }]
|
||||
};
|
||||
};
|
||||
|
||||
const res = await getMonitorDataWaterTemp(filterParams);
|
||||
// data 模式表格：点击排序时重新请求接口（服务端排序）
|
||||
const {
|
||||
tableData,
|
||||
isLoading: tableLoading,
|
||||
handleSortChange
|
||||
} = useServerSortTableData<any>({
|
||||
request: getMonitorDataWaterTemp,
|
||||
buildSearchParams
|
||||
});
|
||||
|
||||
const fetchData = async () => {
|
||||
const params = buildSearchParams();
|
||||
if (!params) return;
|
||||
isLoading.value = true;
|
||||
|
||||
try {
|
||||
const res = await getMonitorDataWaterTemp(params);
|
||||
const rawData = res?.data?.data || res?.data?.records || [];
|
||||
|
||||
chartData.value = rawData;
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
2. 生态调查 陆生 水生
|
||||
-->
|
||||
<!-- 电站运行过程线 -->
|
||||
<monitorInfoMod v-if="sttpValue == 'ENG'" />
|
||||
<MonitorInfoMod v-if="sttpValue == 'ENG'" />
|
||||
<!-- 水温监控 -->
|
||||
<WaterTemperature v-if="sttpValue == 'WTRV'" />
|
||||
<!-- 垂向水温监控 -->
|
||||
@ -45,7 +45,7 @@ import { useModelStore } from '@/store/modules/model';
|
||||
import WaterTemperature from '@/modules/rightSearchDrawer/monitoringTable/components/WaterTemperature.vue';
|
||||
import VerticalWaterTemperature from '@/modules/rightSearchDrawer/monitoringTable/components/VerticalWaterTemperature.vue';
|
||||
import WaterQuality from '@/modules/rightSearchDrawer/monitoringTable/components/WaterQuality.vue';
|
||||
import monitorInfoMod from '@/modules/rightSearchDrawer/monitoringTable/components/monitorInfo.vue';
|
||||
import MonitorInfoMod from '@/modules/rightSearchDrawer/monitoringTable/components/monitorInfo.vue';
|
||||
import GYZLLB from '@/modules/rightSearchDrawer/monitoringTable/components/GYZLLB.vue';
|
||||
import QXDInfo from '@/modules/rightSearchDrawer/monitoringTable/components/QXDInfo.vue';
|
||||
import FlowMeasure from '@/modules/rightSearchDrawer/monitoringTable/components/FlowMeasure.vue';
|
||||
|
||||
@ -2665,7 +2665,7 @@ export function generatePopupHtml(
|
||||
<div class="${'iconEngDiv_' + props.anchoPointState} ${
|
||||
'iconEngDiv-' + props.anchoPointState + '-' + props?.bldsttCcode
|
||||
}">
|
||||
<div class="iconDivTitle ${getTitleClass(titleClass)}">${title}</div>
|
||||
<div class="iconDivTitle ${titleClass}">${title}</div>
|
||||
<div class="iconDivContent">
|
||||
<div class="iconDivLeft">
|
||||
<div>${transUnitRender(p?.ttpwr, 'Other', 'ZJRL')}</div>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user