Compare commits
No commits in common. "main" and "wxk-main" have entirely different histories.
@ -1,8 +0,0 @@
|
||||
import request from '@/utils/request';
|
||||
export function getPlanFinishDetail(data: any) {
|
||||
return request({
|
||||
url: '/fb/planFinish/GetKendoListCust',
|
||||
method: 'post',
|
||||
data
|
||||
});
|
||||
}
|
||||
@ -1 +0,0 @@
|
||||
<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>
|
||||
|
Before Width: | Height: | Size: 223 B |
@ -1 +0,0 @@
|
||||
<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>
|
||||
|
Before Width: | Height: | Size: 167 B |
@ -1 +0,0 @@
|
||||
<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg"><g fill="#FF504F" fill-rule="nonzero"><path d="M8 16c-4.363 0-8-3.637-8-8.001C0 3.635 3.636 0 8 0c4.363 0 8 3.637 8 8 0 4.484-3.637 8-8 8ZM8 1.5C4.43 1.5 1.5 4.432 1.5 8c0 3.57 2.931 6.5 6.5 6.5s6.5-2.932 6.5-6.5S11.569 1.5 8 1.5Z"/><path d="M8 10.623c.345 0 .625.309.625.689l-.007.101C8.574 11.745 8.314 12 8 12c-.345 0-.625-.308-.625-.688l.007-.102c.044-.332.304-.587.618-.587ZM8 4c.552 0 1 .493 1 1.101l-.5 4.456c0 .304-.224.552-.501.552s-.5-.246-.5-.552L7 5.101C7 4.493 7.448 4 8 4Z"/></g></svg>
|
||||
|
Before Width: | Height: | Size: 562 B |
@ -674,8 +674,7 @@ const processColumn = (col: any): any => {
|
||||
title: String(text)
|
||||
},
|
||||
{
|
||||
default: () =>
|
||||
h(
|
||||
default: () => h(
|
||||
'span',
|
||||
{
|
||||
style: {
|
||||
|
||||
@ -609,9 +609,6 @@ const updateTableColumns = () => {
|
||||
fixed: col.fixed || undefined,
|
||||
ellipsis: col.ellipsis
|
||||
};
|
||||
if (col.key == 'tm' || col.key == 'aiVal') {
|
||||
baseCol.sort = true;
|
||||
}
|
||||
if (col.dataFormat === 'YYYY-MM-DD' || col.dataType === 'date') {
|
||||
baseCol.customRender = ({ text }: any) =>
|
||||
text ? dayjs(text).format('YYYY-MM-DD') : '-';
|
||||
|
||||
@ -4,8 +4,7 @@
|
||||
<a-tab-pane v-for="tab in tabsItems" :key="tab.key" :tab="tab.name">
|
||||
<div class="table-wrapper">
|
||||
<BasicTable
|
||||
scrollY="400px"
|
||||
:ref="(el: any) => setTableRef(el, tab.key)"
|
||||
ref="tableRef"
|
||||
:columns="currentColumns"
|
||||
:list-url="fetchTableData"
|
||||
:search-params="searchParams"
|
||||
@ -13,24 +12,14 @@
|
||||
</div>
|
||||
</a-tab-pane>
|
||||
</a-tabs>
|
||||
<CommonAttachmentModal
|
||||
v-model:open="attachmentModalVisible"
|
||||
:fid="currentAttachmentFid"
|
||||
title="查看附件"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, computed, watch, nextTick, h } from 'vue';
|
||||
import { ref, computed, watch } 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<{
|
||||
@ -46,80 +35,38 @@ const props = defineProps<{
|
||||
const modelStore = useModelStore();
|
||||
const activeTabKey = ref(props.tabsItems?.[0]?.key || '');
|
||||
const hasLoaded = ref(false);
|
||||
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 tableRef = ref();
|
||||
|
||||
// 搜索参数
|
||||
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: 'stage',
|
||||
key: 'stage'
|
||||
dataIndex: 'majorChangeType',
|
||||
key: 'majorChangeType'
|
||||
},
|
||||
{ title: '依据阶段', dataIndex: 'contrastphase', key: 'contrastphase' },
|
||||
{ title: '依据阶段', dataIndex: 'basisStage', key: 'basisStage' },
|
||||
{
|
||||
title: '有重大变动的阶段',
|
||||
dataIndex: 'currentstage',
|
||||
key: 'currentstage'
|
||||
dataIndex: 'changedStage',
|
||||
key: 'changedStage'
|
||||
},
|
||||
{
|
||||
title: '依据阶段数据',
|
||||
dataIndex: 'phasevalue',
|
||||
key: 'phasevalue'
|
||||
dataIndex: 'basisStageData',
|
||||
key: 'basisStageData'
|
||||
},
|
||||
{
|
||||
title: '重大变动阶段数据',
|
||||
dataIndex: 'stagevalue',
|
||||
key: 'stagevalue'
|
||||
dataIndex: 'changedStageData',
|
||||
key: 'changedStageData'
|
||||
},
|
||||
{ title: '预警描述', dataIndex: 'messagename', key: 'messagename' }
|
||||
{ title: '预警描述', dataIndex: 'warningDesc', key: 'warningDesc' }
|
||||
],
|
||||
ImplementEarlyWarning: [
|
||||
{ title: '设施名称', dataIndex: 'stnm', key: 'stnm' },
|
||||
@ -127,141 +74,63 @@ const columnsMap: Record<string, any[]> = {
|
||||
{ title: '流域', dataIndex: 'rvnm', key: 'rvnm' },
|
||||
{
|
||||
title: '可研(核准)',
|
||||
dataIndex: 'kyhzhb',
|
||||
key: 'kyhzhb',
|
||||
customRender: renderStatusIcon(true)
|
||||
dataIndex: 'feasibilityApproval',
|
||||
key: 'feasibilityApproval'
|
||||
},
|
||||
{
|
||||
title: '预可是否设计',
|
||||
dataIndex: 'prdsgn',
|
||||
key: 'prdsgn',
|
||||
customRender: renderStatusIcon(true)
|
||||
dataIndex: 'preFeasibilityDesign',
|
||||
key: 'preFeasibilityDesign'
|
||||
},
|
||||
{
|
||||
title: '环评是否有要求',
|
||||
dataIndex: 'eiarqst',
|
||||
key: 'eiarqst',
|
||||
customRender: renderStatusIcon(true)
|
||||
key: 'eiarqst'
|
||||
},
|
||||
{
|
||||
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)
|
||||
},
|
||||
'查看附件'
|
||||
);
|
||||
}
|
||||
}
|
||||
{ title: '专项设计', dataIndex: 'specialDesign', key: 'specialDesign' },
|
||||
{ title: '建设', dataIndex: 'isbuild', key: 'isbuild' },
|
||||
{ title: '证明材料', dataIndex: 'proofMaterial', key: 'proofMaterial' }
|
||||
],
|
||||
ConstructionEarlyWarning: [
|
||||
{ title: '设施名称', dataIndex: 'stnm', key: 'stnm' },
|
||||
{ title: '行政区', dataIndex: 'addvnm', key: 'addvnm' },
|
||||
{ title: '流域', dataIndex: 'rvnm', key: 'rvnm' },
|
||||
{ title: '设施名称', dataIndex: 'facilityName', key: 'facilityName' },
|
||||
{ title: '行政区', dataIndex: 'district', key: 'district' },
|
||||
{ title: '流域', dataIndex: 'basin', key: 'basin' },
|
||||
{
|
||||
title: '可研(核准)',
|
||||
dataIndex: 'kyhzhb',
|
||||
key: 'kyhzhb',
|
||||
customRender: renderStatusIcon()
|
||||
dataIndex: 'feasibilityApproval',
|
||||
key: 'feasibilityApproval'
|
||||
},
|
||||
{
|
||||
title: '预可是否设计',
|
||||
dataIndex: 'prdsgn',
|
||||
key: 'prdsgn',
|
||||
customRender: renderStatusIcon(true)
|
||||
dataIndex: 'preFeasibilityDesign',
|
||||
key: 'preFeasibilityDesign'
|
||||
},
|
||||
{
|
||||
title: '环评是否有要求',
|
||||
dataIndex: 'eiarqst',
|
||||
key: 'eiarqst',
|
||||
customRender: renderStatusIcon(true)
|
||||
dataIndex: 'eiaRequirement',
|
||||
key: 'eiaRequirement'
|
||||
},
|
||||
{
|
||||
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)
|
||||
},
|
||||
'查看附件'
|
||||
);
|
||||
}
|
||||
}
|
||||
{ title: '专项设计', dataIndex: 'specialDesign', key: 'specialDesign' },
|
||||
{ title: '建设', dataIndex: 'construction', key: 'construction' },
|
||||
{ title: '证明材料', dataIndex: 'proofMaterial', key: 'proofMaterial' }
|
||||
],
|
||||
RunEarlyWarning: [
|
||||
{ title: '设施名称', dataIndex: 'stnm', key: 'stnm' },
|
||||
{ title: '所属行政区域', dataIndex: 'addvnm', key: 'addvnm' },
|
||||
{
|
||||
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 }
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
{ title: '运行状态', dataIndex: 'status', key: 'status' }
|
||||
],
|
||||
ReleaseEarlyWarning: [
|
||||
{ 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' }
|
||||
{ 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' }
|
||||
]
|
||||
};
|
||||
|
||||
@ -281,22 +150,16 @@ const fetchTableData = async (params: any) => {
|
||||
if (!currentTableUrl.value) {
|
||||
return { data: { records: [], total: 0 } };
|
||||
}
|
||||
return await queryPostUrlList(currentTableUrl.value, {
|
||||
...params,
|
||||
filter: params?.filter || buildFilter()
|
||||
});
|
||||
return await queryPostUrlList(currentTableUrl.value, params);
|
||||
};
|
||||
|
||||
// tab 切换
|
||||
const handleTabChange = (key: string) => {
|
||||
activeTabKey.value = key;
|
||||
// 切换 tab 时刷新表格数据
|
||||
nextTick(() => {
|
||||
const table = tableRefMap.value[key];
|
||||
if (table) {
|
||||
table.getList(buildFilter());
|
||||
}
|
||||
});
|
||||
if (tableRef.value) {
|
||||
tableRef.value.refresh();
|
||||
}
|
||||
};
|
||||
|
||||
// 监听 isActive 变化,首次激活时请求数据
|
||||
@ -307,9 +170,8 @@ watch(
|
||||
hasLoaded.value = true;
|
||||
// 首次加载当前 tab 数据
|
||||
setTimeout(() => {
|
||||
const table = tableRefMap.value[activeTabKey.value];
|
||||
if (table) {
|
||||
table.getList(buildFilter());
|
||||
if (tableRef.value) {
|
||||
// tableRef.value.getList();
|
||||
}
|
||||
}, 100);
|
||||
}
|
||||
|
||||
@ -23,7 +23,7 @@
|
||||
<div class="filter-row">
|
||||
<a-select
|
||||
v-model:value="timeType"
|
||||
style="width: 80px"
|
||||
style="margin-right: 12px"
|
||||
:options="timeTypeOptions"
|
||||
/>
|
||||
<a-range-picker
|
||||
@ -530,9 +530,7 @@ watch(
|
||||
() => props.isActive,
|
||||
active => {
|
||||
if (active && !hasLoaded.value) {
|
||||
if (modelStore.filter.stllTmType) {
|
||||
timeType.value = modelStore.filter.stllTmType;
|
||||
}
|
||||
timeType.value = modelStore.filter.stllTmType;
|
||||
if (modelStore.filter.rangeTm.length > 0) {
|
||||
dateRange.value = [
|
||||
dayjs(modelStore.filter.rangeTm[0]),
|
||||
|
||||
@ -14,7 +14,6 @@
|
||||
placeholder="请选择"
|
||||
class="w-[160px]"
|
||||
:loading="loadFtp"
|
||||
show-search
|
||||
:fieldNames="{ label: 'name', value: 'id' }"
|
||||
:filter-option="filterFtpOption"
|
||||
:options="ftpList"
|
||||
@ -304,7 +303,6 @@ const updateChart = (data: any[], columns: any[]) => {
|
||||
console.log(sorted[0]);
|
||||
|
||||
const option = {
|
||||
// 在 updateChart 函数中,替换 tooltip 配置
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
backgroundColor: 'rgba(50, 50, 50, 0.9)',
|
||||
@ -313,29 +311,17 @@ const updateChart = (data: any[], columns: any[]) => {
|
||||
formatter: (params: any) => {
|
||||
if (!params || params.length === 0) return '';
|
||||
const dataIndex = params[0].dataIndex;
|
||||
const dataItem = data[dataIndex]; // data 来自 updateChart 的参数
|
||||
if (!dataItem) return '';
|
||||
const fullTime = dayjs(dataItem.dt).format('YYYY-MM-DD');
|
||||
const fullTime = xAxisData[dataIndex] || '';
|
||||
let html = `<div style="font-size:16px;margin-bottom:8px;">${fullTime}</div>`;
|
||||
|
||||
// 过滤出需要显示的数据列(排除时间列和不可见列)
|
||||
const dataColumns = columns.filter(
|
||||
col => col.dataIndex !== 'dt' && col.visible !== false
|
||||
);
|
||||
|
||||
dataColumns.forEach(col => {
|
||||
const value = dataItem[col.dataIndex];
|
||||
const displayValue = value != null && value !== '' ? value : '-';
|
||||
// 尝试从 params 中匹配该系列的颜色,否则使用默认灰色
|
||||
const matched = params.find((p: any) => p.seriesName === col.title);
|
||||
const color = matched ? matched.color : '#999';
|
||||
params.forEach((param: any) => {
|
||||
if (param.value == null) return;
|
||||
html += `
|
||||
<div style="display:flex;align-items:center;justify-content:space-between;margin:4px 0;">
|
||||
<span style="display:inline-block;width:10px;height:10px;border-radius:50%;background:${color};margin-right:8px;"></span>
|
||||
<span style="flex:1;font-size:14px;text-align:left;margin-right:6px;">${col.title}: </span>
|
||||
<span style="font-size:14px;min-width:60px;text-align:right;"><strong>${displayValue}</strong></span>
|
||||
</div>
|
||||
`;
|
||||
<div style="display:flex;align-items:center;justify-content:space-between;margin:4px 0;">
|
||||
<span style="display:inline-block;width:10px;height:10px;border-radius:50%;background:${param.color};margin-right:8px;"></span>
|
||||
<span style="flex:1;font-size:14px;text-align:left;margin-right:6px;">${param.seriesName}: </span>
|
||||
<span style="font-size:14px;min-width:60px;text-align:right;"><strong>${param.value}</strong></span>
|
||||
</div>
|
||||
`;
|
||||
});
|
||||
return html;
|
||||
}
|
||||
@ -343,8 +329,6 @@ const updateChart = (data: any[], columns: any[]) => {
|
||||
legend: {
|
||||
type: 'scroll',
|
||||
top: 10,
|
||||
left: 0,
|
||||
width: '90%',
|
||||
data: dataColumns.map(col => col.title),
|
||||
textStyle: { fontSize: 12 }
|
||||
},
|
||||
@ -434,7 +418,9 @@ const fetchData = async () => {
|
||||
};
|
||||
|
||||
const res = await getRunStateAnalysis(filterParams);
|
||||
console.log(res);
|
||||
const result = res?.data?.data[0] || {};
|
||||
console.log(result);
|
||||
|
||||
// 设置表格列
|
||||
const columns = result.columns || [];
|
||||
@ -444,7 +430,7 @@ const fetchData = async () => {
|
||||
.map((col: any) => ({
|
||||
title: col.title,
|
||||
dataIndex: col.dataIndex,
|
||||
width: 140,
|
||||
width: 120,
|
||||
customRender: ({ text }: any) => {
|
||||
if (col.dataType === 'date' && text) {
|
||||
return dayjs(text).format('YYYY-MM-DD');
|
||||
|
||||
@ -16,7 +16,6 @@
|
||||
placeholder="请选择"
|
||||
class="w-[160px]"
|
||||
:loading="loadFtp"
|
||||
show-search
|
||||
:fieldNames="{ label: 'name', value: 'id' }"
|
||||
:filter-option="filterFtpOption"
|
||||
:options="ftpList"
|
||||
|
||||
@ -50,7 +50,7 @@
|
||||
</div>
|
||||
<div class="table-wrapper">
|
||||
<a-spin :spinning="tableLoading" tip="加载中...">
|
||||
<div class="text" v-if="modelStore.params.sttpCode == 'WQFB'">
|
||||
<div class="text" v-if="modelStore.params.sttpCode == 'WQFB'">
|
||||
《渔业水质标准》(GB11607-89):非鲑科鱼类水域溶解氧限值为大于等于3,ph大于等于6.5且小于等于8.5。
|
||||
</div>
|
||||
<BasicTable
|
||||
|
||||
@ -465,6 +465,8 @@ const checkWaterTempConfig = async (stcd: string) => {
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
|
||||
// QGC 完整 Tab 过滤逻辑(与 React setQGCTabList 对齐)
|
||||
const setQGCTabList = async (_tabs: any, stcd: string) => {
|
||||
let tabs = [..._tabs];
|
||||
@ -475,14 +477,12 @@ const setQGCTabList = async (_tabs: any, stcd: string) => {
|
||||
const res = await getBuildState({
|
||||
filter: {
|
||||
logic: 'and',
|
||||
filters: [
|
||||
{ dataType: 'string', field: 'stcd', operator: 'eq', value: stcd }
|
||||
]
|
||||
filters: [{ dataType:'string',field: 'stcd', operator: 'eq', value: stcd }]
|
||||
}
|
||||
});
|
||||
|
||||
const buid = res?.data?.data[0]?.bldsttCcode;
|
||||
|
||||
|
||||
const zj = ['基础信息', '实时视频', '全景影像', '查看报告'];
|
||||
const wj = ['基础信息', '查看报告'];
|
||||
|
||||
@ -568,23 +568,23 @@ const setQGCTabList = async (_tabs: any, stcd: string) => {
|
||||
};
|
||||
const res2 = await getVideoList(params);
|
||||
console.log('', modelStore.params.sttp);
|
||||
console.log('', res2);
|
||||
console.log('', newTabs);
|
||||
if (
|
||||
res2?.data?.data?.length > 0 ||
|
||||
res2?.data?.records?.length > 0 ||
|
||||
modelStore.params.sttp == 'WQ'
|
||||
) {
|
||||
console.log(123);
|
||||
tabsConfig.value = newTabs;
|
||||
} else {
|
||||
console.log(465);
|
||||
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');
|
||||
} else {
|
||||
tabsConfig.value = newTabs.filter((item: any) => item.type != 'video');
|
||||
}
|
||||
if (arr.includes(modelStore.params.sttp)) {
|
||||
tabsConfig.value = newTabs.filter(
|
||||
(item: any) => item.type == 'basic'
|
||||
);
|
||||
} else {
|
||||
tabsConfig.value = newTabs.filter(
|
||||
(item: any) => item.type != 'video'
|
||||
);
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('QGC Tab 过滤失败:', error);
|
||||
|
||||
@ -54,35 +54,38 @@ const ENGTabs: Array<any> = [
|
||||
key: 'DesignParameterChangePrompt',
|
||||
type: 'table',
|
||||
hiddenChart: true,
|
||||
tableUrl: '/base/engWarning/GetKendoList'
|
||||
tableUrl: '/dec-lygk-base-server/base/engWarning/GetKendoList'
|
||||
},
|
||||
{
|
||||
name: '施工期环保措施落实预警',
|
||||
key: 'ImplementEarlyWarning',
|
||||
type: 'table',
|
||||
hiddenChart: true,
|
||||
tableUrl: '/base/engWarning/sgqhbss/GetKendoListCust'
|
||||
tableUrl:
|
||||
'/dec-lygk-base-server/base/engWarning/sgqhbss/GetKendoListCust'
|
||||
},
|
||||
{
|
||||
name: '环保设施建设预警',
|
||||
key: 'ConstructionEarlyWarning',
|
||||
type: 'table',
|
||||
hiddenChart: true,
|
||||
tableUrl: '/base/engWarning/hbssjs/GetKendoListCust'
|
||||
tableUrl:
|
||||
'/dec-lygk-base-server/base/engWarning/hbssjs/GetKendoListCust'
|
||||
},
|
||||
{
|
||||
name: '环保设施运行预警',
|
||||
key: 'RunEarlyWarning',
|
||||
type: 'table',
|
||||
hiddenChart: true,
|
||||
tableUrl: '/base/engWarning/hbssyx/GetKendoListCust'
|
||||
tableUrl:
|
||||
'/dec-lygk-base-server/base/engWarning/hbssyx/GetKendoListCust'
|
||||
},
|
||||
{
|
||||
name: '鱼类放流预警',
|
||||
key: 'ReleaseEarlyWarning',
|
||||
type: 'table',
|
||||
hiddenChart: true,
|
||||
tableUrl: '/base/engWarning/ylfl/GetKendoListCust'
|
||||
tableUrl: '/dec-lygk-base-server/base/engWarning/ylfl/GetKendoListCust'
|
||||
}
|
||||
]
|
||||
},
|
||||
@ -1182,7 +1185,7 @@ const handleTabs = (modaldata: any) => {
|
||||
// }
|
||||
// case 'FH':
|
||||
// return FHTabs
|
||||
// {
|
||||
// {
|
||||
|
||||
case 'VD_FB':
|
||||
case 'VD_FP':
|
||||
|
||||
@ -211,10 +211,9 @@ export class MapOl implements MapInterface {
|
||||
} else {
|
||||
modelStore.modalVisible = true;
|
||||
modelStore.params = detectedFeature.values_;
|
||||
if (detectedFeature.values_.eqtp == 'QEC')
|
||||
modelStore.filter.stllTmType = 'day';
|
||||
modelStore.title =
|
||||
detectedFeature.values_.titleName || detectedFeature.values_.stnm;
|
||||
detectedFeature.values_.titleName ||
|
||||
detectedFeature.values_.stnm + ' 详情信息';
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
@ -29,25 +29,22 @@
|
||||
</a-carousel>
|
||||
</a-spin>
|
||||
<div class="monitor-table">
|
||||
<a-spin :spinning="tableLoading" tip="加载中...">
|
||||
<BasicTable
|
||||
ref="tableRef"
|
||||
:scrollY="300"
|
||||
:scrollX="tableScrollX"
|
||||
:columns="tableColumns"
|
||||
:list-url="getTableList"
|
||||
:transform-data="transformTableData"
|
||||
:enableRowHighlight="true"
|
||||
row-key="_rowKey"
|
||||
:paginationConfig="{
|
||||
showSizeChanger: false,
|
||||
showQuickJumper: false
|
||||
}"
|
||||
@row-click="handleRowClick"
|
||||
@data-loaded="handleDataLoaded"
|
||||
@sort-change="handleSortChange"
|
||||
/>
|
||||
</a-spin>
|
||||
<BasicTable
|
||||
ref="tableRef"
|
||||
:scrollY="300"
|
||||
:scrollX="tableScrollX"
|
||||
:columns="tableColumns"
|
||||
:list-url="getTableList"
|
||||
:transform-data="transformTableData"
|
||||
:enableRowHighlight="true"
|
||||
row-key="_rowKey"
|
||||
:paginationConfig="{
|
||||
showSizeChanger: false,
|
||||
showQuickJumper: false
|
||||
}"
|
||||
@row-click="handleRowClick"
|
||||
@data-loaded="handleDataLoaded"
|
||||
/>
|
||||
</div>
|
||||
</SidePanelItem>
|
||||
</template>
|
||||
@ -67,7 +64,6 @@ const DEFAULT_PAGE_SIZE = 20;
|
||||
|
||||
const tableRef = ref();
|
||||
const year = ref<string>('');
|
||||
const tableLoading = ref(false);
|
||||
const tableColumns = ref([
|
||||
{
|
||||
title: '种类',
|
||||
@ -82,7 +78,6 @@ const tableColumns = ref([
|
||||
{
|
||||
title: '救助数量(只)',
|
||||
dataIndex: 'tecnt',
|
||||
sort: true,
|
||||
width: 98
|
||||
},
|
||||
{
|
||||
@ -131,9 +126,8 @@ 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]);
|
||||
@ -142,11 +136,6 @@ const handleDataLoaded = (params: any, data: any) => {
|
||||
}
|
||||
};
|
||||
|
||||
// 表格排序变化时显示加载状态
|
||||
const handleSortChange = () => {
|
||||
tableLoading.value = true;
|
||||
};
|
||||
|
||||
// ==================== 年份与数据查询 ====================
|
||||
const getDefaultYear = (yearList: any[]) => {
|
||||
const firstItem = yearList?.[0];
|
||||
@ -216,10 +205,7 @@ const getTableList = (params: any) => {
|
||||
|
||||
const refreshTable = () => {
|
||||
if (!modelStore.selectedAnchorPoint?.stcd || !year.value) return;
|
||||
if (tableRef.value) {
|
||||
tableLoading.value = true;
|
||||
tableRef.value.getList(buildFilter());
|
||||
}
|
||||
tableRef.value?.getList(buildFilter());
|
||||
};
|
||||
|
||||
// 获取年份列表并赋值默认年份(年份列表第一个),然后自动查询
|
||||
@ -248,7 +234,6 @@ const getYearList = async () => {
|
||||
refreshTable();
|
||||
} catch (error) {
|
||||
console.error('获取年份列表失败:', error);
|
||||
tableLoading.value = false;
|
||||
if (tableRef.value) {
|
||||
tableRef.value.loading = false;
|
||||
}
|
||||
|
||||
@ -23,20 +23,17 @@
|
||||
/>
|
||||
</div>
|
||||
<div class="monitor-table">
|
||||
<a-spin :spinning="tableLoading" tip="加载中...">
|
||||
<BasicTable
|
||||
ref="tableRef"
|
||||
:scrollY="240"
|
||||
:scrollX="tableScrollX"
|
||||
:columns="tableColumns"
|
||||
:data="tableData"
|
||||
:paginationConfig="{
|
||||
showSizeChanger: false,
|
||||
showQuickJumper: false
|
||||
}"
|
||||
@sort-change="handleSortChange"
|
||||
/>
|
||||
</a-spin>
|
||||
<BasicTable
|
||||
ref="tableRef"
|
||||
:scrollY="240"
|
||||
:scrollX="tableScrollX"
|
||||
:columns="tableColumns"
|
||||
:data="tableData"
|
||||
:paginationConfig="{
|
||||
showSizeChanger: false,
|
||||
showQuickJumper: false
|
||||
}"
|
||||
/>
|
||||
</div>
|
||||
</a-spin>
|
||||
</SidePanelItem>
|
||||
@ -58,7 +55,6 @@ 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();
|
||||
@ -66,6 +62,7 @@ const modelStore = useModelStore();
|
||||
|
||||
const isLoading = ref(false);
|
||||
const chartData = ref<any[]>([]);
|
||||
const tableData = ref<any[]>([]);
|
||||
const tableRef = ref<any>();
|
||||
|
||||
const isDataEmpty = computed(() => {
|
||||
@ -347,31 +344,27 @@ 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: 90,
|
||||
sort: true,
|
||||
width: 120,
|
||||
customRender: ({ text }: any) =>
|
||||
text !== undefined && text !== null ? Number(text).toFixed(2) : '-'
|
||||
},
|
||||
{
|
||||
title: '流量(m³/s)',
|
||||
dataIndex: 'q',
|
||||
width: 100,
|
||||
sort: true,
|
||||
width: 130,
|
||||
customRender: ({ text }: any) =>
|
||||
text !== undefined && text !== null ? Number(text).toFixed(1) : '-'
|
||||
},
|
||||
{
|
||||
title: '流速(m³/s)',
|
||||
dataIndex: 'v',
|
||||
width: 100,
|
||||
sort: true,
|
||||
width: 130,
|
||||
customRender: ({ text }: any) =>
|
||||
text !== undefined && text !== null ? Number(text).toFixed(2) : '-'
|
||||
}
|
||||
@ -386,56 +379,41 @@ const tableScrollX = computed(() => {
|
||||
});
|
||||
|
||||
// ==================== 数据请求 ====================
|
||||
// 构造表格/图表请求参数(stcd + 时间范围),排序传入时叠加 sort
|
||||
const buildSearchParams = (sort?: { field: string; dir: 'asc' | 'desc' }) => {
|
||||
const stcd = modelStore.selectedAnchorPoint?.stcd;
|
||||
if (!dateRange.value || !stcd) return null;
|
||||
return {
|
||||
filter: {
|
||||
logic: 'and',
|
||||
filters: [
|
||||
{
|
||||
field: 'stcd',
|
||||
operator: 'eq',
|
||||
dataType: 'string',
|
||||
value: stcd
|
||||
},
|
||||
{
|
||||
field: 'tm',
|
||||
operator: 'gte',
|
||||
dataType: 'date',
|
||||
value: dateRange.value[0].format('YYYY-MM-DD HH:mm:ss')
|
||||
},
|
||||
{
|
||||
field: 'tm',
|
||||
operator: 'lte',
|
||||
dataType: 'date',
|
||||
value: dateRange.value[1].format('YYYY-MM-DD HH:mm:ss')
|
||||
}
|
||||
]
|
||||
},
|
||||
sort: sort ? [sort] : [{ field: 'tm', dir: 'asc' }]
|
||||
};
|
||||
};
|
||||
|
||||
// data 模式表格:点击排序时重新请求接口(服务端排序)
|
||||
const {
|
||||
tableData,
|
||||
isLoading: tableLoading,
|
||||
handleSortChange
|
||||
} = useServerSortTableData<any>({
|
||||
request: getFlowStationList,
|
||||
buildSearchParams
|
||||
});
|
||||
|
||||
// 数据请求(查询参数取 modelStore.selectedAnchorPoint)
|
||||
const fetchData = async () => {
|
||||
const params = buildSearchParams();
|
||||
if (!params) return;
|
||||
const stcd = modelStore.selectedAnchorPoint?.stcd;
|
||||
if (!dateRange.value || !stcd) return;
|
||||
isLoading.value = true;
|
||||
|
||||
try {
|
||||
const res = await getFlowStationList(params);
|
||||
const filterParams = {
|
||||
filter: {
|
||||
logic: 'and',
|
||||
filters: [
|
||||
{
|
||||
field: 'stcd',
|
||||
operator: 'eq',
|
||||
dataType: 'string',
|
||||
value: stcd
|
||||
},
|
||||
{
|
||||
field: 'tm',
|
||||
operator: 'gte',
|
||||
dataType: 'date',
|
||||
value: dateRange.value[0].format('YYYY-MM-DD HH:mm:ss')
|
||||
},
|
||||
{
|
||||
field: 'tm',
|
||||
operator: 'lte',
|
||||
dataType: 'date',
|
||||
value: dateRange.value[1].format('YYYY-MM-DD HH:mm:ss')
|
||||
}
|
||||
]
|
||||
},
|
||||
sort: [{ field: 'tm', dir: 'asc' }]
|
||||
};
|
||||
|
||||
const res = await getFlowStationList(filterParams);
|
||||
const rawData = res?.data?.data || res?.data?.records || [];
|
||||
|
||||
tableData.value = [...rawData].reverse();
|
||||
@ -464,10 +442,7 @@ watch(
|
||||
() => modelStore.selectedAnchorPoint?.stcd,
|
||||
(newStcd, oldStcd) => {
|
||||
if (!newStcd) return;
|
||||
if (newStcd !== oldStcd) {
|
||||
dateRange.value = initDateRange();
|
||||
fetchData();
|
||||
}
|
||||
if (newStcd !== oldStcd) fetchData();
|
||||
},
|
||||
{ immediate: true }
|
||||
);
|
||||
|
||||
@ -276,10 +276,7 @@ watch(
|
||||
() => modelStore.selectedAnchorPoint?.stcd,
|
||||
(newStcd, oldStcd) => {
|
||||
if (!newStcd) return;
|
||||
if (newStcd !== oldStcd) {
|
||||
year.value = initYear();
|
||||
fetchData();
|
||||
}
|
||||
if (newStcd !== oldStcd) fetchData();
|
||||
},
|
||||
{ immediate: true }
|
||||
);
|
||||
|
||||
@ -12,28 +12,24 @@
|
||||
class="w-[90px]"
|
||||
/>
|
||||
</template>
|
||||
<a-spin :spinning="loading">
|
||||
<div class="chart-row">
|
||||
<div
|
||||
v-for="(cfg, index) in chartConfigs"
|
||||
:key="cfg.key"
|
||||
class="pie-chart-container"
|
||||
>
|
||||
<div class="title">{{ cfg.title }}</div>
|
||||
<div :ref="el => setChartRef(el, index)" class="chart"></div>
|
||||
</div>
|
||||
<div class="chart-row">
|
||||
<div
|
||||
v-for="(cfg, index) in chartConfigs"
|
||||
:key="cfg.key"
|
||||
class="pie-chart-container"
|
||||
>
|
||||
<div class="title">{{ cfg.title }}</div>
|
||||
<div :ref="el => setChartRef(el, index)" class="chart"></div>
|
||||
</div>
|
||||
</a-spin>
|
||||
</div>
|
||||
</SidePanelItem>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, watch, onMounted, onBeforeUnmount, nextTick } from 'vue';
|
||||
import { ref, onMounted, onBeforeUnmount, nextTick } from 'vue';
|
||||
import dayjs, { Dayjs } from 'dayjs';
|
||||
import * as echarts from 'echarts';
|
||||
import type { ECharts } from 'echarts';
|
||||
import { getPlanFinishDetail } from '@/api/mapModal/rightModel';
|
||||
import { useModelStore } from '@/store/modules/model';
|
||||
import SidePanelItem from '@/components/SidePanelItem/index.vue';
|
||||
|
||||
interface PieChartConfig {
|
||||
@ -70,82 +66,6 @@ const chartConfigs: PieChartConfig[] = [
|
||||
}
|
||||
];
|
||||
|
||||
const modelStore = useModelStore();
|
||||
const loading = ref(false);
|
||||
let skipYearWatch = false;
|
||||
|
||||
// 获取图表数据
|
||||
const fetchChartData = async () => {
|
||||
loading.value = true;
|
||||
const startTime = selectedYear.value
|
||||
.startOf('year')
|
||||
.format('YYYY-MM-DD HH:mm:ss');
|
||||
const endTime = selectedYear.value
|
||||
.endOf('year')
|
||||
.format('YYYY-MM-DD HH:mm:ss');
|
||||
|
||||
const params = {
|
||||
filter: {
|
||||
logic: 'and',
|
||||
filters: [
|
||||
{
|
||||
field: 'startTime',
|
||||
operator: 'eq',
|
||||
dataType: 'date',
|
||||
value: startTime
|
||||
},
|
||||
{ field: 'endTime', operator: 'eq', dataType: 'date', value: endTime },
|
||||
{
|
||||
field: 'stcd',
|
||||
operator: 'eq',
|
||||
dataType: 'string',
|
||||
value: modelStore.selectedAnchorPoint.stcd
|
||||
}
|
||||
]
|
||||
}
|
||||
};
|
||||
|
||||
try {
|
||||
const res = await getPlanFinishDetail(params);
|
||||
console.log('getPlanFinishDetail response:', res);
|
||||
const data = res.data?.data[0];
|
||||
console.log('data:', data);
|
||||
if (data) {
|
||||
chartConfigs[0].data = [
|
||||
{
|
||||
name: '未完成数量',
|
||||
value: Number((data.unfinishedQty / 10000).toFixed(2)) || 0
|
||||
},
|
||||
{
|
||||
name: '已完成数量',
|
||||
value: Number((data.finishedQty / 10000).toFixed(2)) || 0
|
||||
}
|
||||
];
|
||||
chartConfigs[1].data = [
|
||||
{ name: '未完成种类', value: data.unfinishedFtp ?? 0 },
|
||||
{ name: '已完成种类', value: data.finishedFtp ?? 0 }
|
||||
];
|
||||
} else {
|
||||
// 数据为空时清空上次数据
|
||||
chartConfigs[0].data = [
|
||||
{ name: '未完成数量', value: 0 },
|
||||
{ name: '已完成数量', value: 0 }
|
||||
];
|
||||
chartConfigs[1].data = [
|
||||
{ name: '未完成种类', value: 0 },
|
||||
{ name: '已完成种类', value: 0 }
|
||||
];
|
||||
}
|
||||
// 更新图表
|
||||
renderChart(0);
|
||||
renderChart(1);
|
||||
} catch (err) {
|
||||
console.error('getPlanFinishDetail error:', err);
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
// ==================== 年份选择(默认今年) ====================
|
||||
const selectedYear = ref<Dayjs>(dayjs());
|
||||
const disabledYear = (current: Dayjs) =>
|
||||
@ -287,26 +207,6 @@ const handleResize = () => {
|
||||
});
|
||||
};
|
||||
|
||||
// stcd 变化时重新获取数据
|
||||
watch(
|
||||
() => modelStore.selectedAnchorPoint,
|
||||
() => {
|
||||
skipYearWatch = true;
|
||||
selectedYear.value = dayjs();
|
||||
fetchChartData();
|
||||
},
|
||||
{ immediate: true }
|
||||
);
|
||||
|
||||
// 选择年份变化时重新获取数据(跳过由站点切换触发的年份重置)
|
||||
watch(selectedYear, () => {
|
||||
if (skipYearWatch) {
|
||||
skipYearWatch = false;
|
||||
return;
|
||||
}
|
||||
fetchChartData();
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
nextTick(() => {
|
||||
setTimeout(() => {
|
||||
|
||||
@ -710,8 +710,6 @@ watch(
|
||||
(newStcd, oldStcd) => {
|
||||
if (!newStcd) return;
|
||||
if (newStcd !== oldStcd) {
|
||||
wtDateRange.value = initDateRange();
|
||||
llDateRange.value = initDateRange();
|
||||
loadWtStationList();
|
||||
loadLlStationList();
|
||||
}
|
||||
|
||||
@ -402,10 +402,7 @@ watch(
|
||||
() => modelStore.selectedAnchorPoint?.stcd,
|
||||
(newStcd, oldStcd) => {
|
||||
if (!newStcd) return;
|
||||
if (newStcd !== oldStcd) {
|
||||
dateRange.value = initDateRange();
|
||||
fetchData();
|
||||
}
|
||||
if (newStcd !== oldStcd) fetchData();
|
||||
},
|
||||
{ immediate: true }
|
||||
);
|
||||
|
||||
@ -34,20 +34,17 @@
|
||||
/>
|
||||
</div>
|
||||
<div class="monitor-table">
|
||||
<a-spin :spinning="tableLoading" tip="加载中...">
|
||||
<BasicTable
|
||||
ref="tableRef"
|
||||
:scrollY="240"
|
||||
:scrollX="tableScrollX"
|
||||
:columns="currentColumns"
|
||||
:data="tableData"
|
||||
:paginationConfig="{
|
||||
showSizeChanger: false,
|
||||
showQuickJumper: false
|
||||
}"
|
||||
@sort-change="handleSortChange"
|
||||
/>
|
||||
</a-spin>
|
||||
<BasicTable
|
||||
ref="tableRef"
|
||||
:scrollY="240"
|
||||
:scrollX="tableScrollX"
|
||||
:columns="currentColumns"
|
||||
:data="tableData"
|
||||
:paginationConfig="{
|
||||
showSizeChanger: false,
|
||||
showQuickJumper: false
|
||||
}"
|
||||
/>
|
||||
</div>
|
||||
</a-spin>
|
||||
</SidePanelItem>
|
||||
@ -73,13 +70,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>();
|
||||
|
||||
@ -164,28 +161,24 @@ const fixedColumns = [
|
||||
{
|
||||
title: '时间',
|
||||
dataIndex: 'tm',
|
||||
width: 140,
|
||||
sort: true,
|
||||
width: 160,
|
||||
customRender: ({ text }: any) =>
|
||||
text ? dayjs(text).format('YYYY-MM-DD HH:mm') : '-'
|
||||
},
|
||||
{
|
||||
title: '水质要求',
|
||||
dataIndex: 'wwqtgName',
|
||||
sort: true,
|
||||
width: 90
|
||||
width: 100
|
||||
},
|
||||
{
|
||||
title: '水质等级',
|
||||
dataIndex: 'wqgrdName',
|
||||
sort: true,
|
||||
width: 90
|
||||
width: 100
|
||||
},
|
||||
{
|
||||
title: '是否达标',
|
||||
dataIndex: 'sfdb',
|
||||
sort: true,
|
||||
width: 90,
|
||||
width: 100,
|
||||
customRender: ({ text }: any) => {
|
||||
const isUnqualified = text == 0; // 0是不达标,1是达标
|
||||
return {
|
||||
@ -208,7 +201,7 @@ const fixedQualityColumns = computed(() => {
|
||||
|
||||
// 宽度判断:默认100,超过5个字140,超过6个字160
|
||||
const titleLen = title.length;
|
||||
let width = 80;
|
||||
let width = 100;
|
||||
if (titleLen > 6) {
|
||||
width = 160;
|
||||
} else if (titleLen > 5) {
|
||||
@ -222,7 +215,6 @@ 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 '-';
|
||||
@ -263,7 +255,6 @@ 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);
|
||||
@ -521,67 +512,49 @@ const bindLegendEvent = () => {
|
||||
};
|
||||
|
||||
// ==================== 数据请求 ====================
|
||||
// 构造表格/图表请求参数(stcd + 时间范围),排序传入时叠加 sort
|
||||
const buildSearchParams = (sort?: { field: string; dir: 'asc' | 'desc' }) => {
|
||||
const stcd = modelStore.selectedAnchorPoint?.stcd;
|
||||
if (!dateRange.value || !stcd) return null;
|
||||
return {
|
||||
filter: {
|
||||
logic: 'and',
|
||||
filters: [
|
||||
{
|
||||
field: 'stcd',
|
||||
operator: 'eq',
|
||||
dataType: 'string',
|
||||
value: stcd
|
||||
},
|
||||
{
|
||||
field: 'tm',
|
||||
operator: 'gte',
|
||||
dataType: 'date',
|
||||
value: dateRange.value[0].format('YYYY-MM-DD HH:mm:ss')
|
||||
},
|
||||
{
|
||||
field: 'tm',
|
||||
operator: 'lte',
|
||||
dataType: 'date',
|
||||
value: dateRange.value[1].format('YYYY-MM-DD HH:mm:ss')
|
||||
}
|
||||
]
|
||||
},
|
||||
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 filterParams = {
|
||||
filter: {
|
||||
logic: 'and',
|
||||
filters: [
|
||||
{
|
||||
field: 'stcd',
|
||||
operator: 'eq',
|
||||
dataType: 'string',
|
||||
value: stcd
|
||||
},
|
||||
{
|
||||
field: 'tm',
|
||||
operator: 'gte',
|
||||
dataType: 'date',
|
||||
value: dateRange.value[0].format('YYYY-MM-DD HH:mm:ss')
|
||||
},
|
||||
{
|
||||
field: 'tm',
|
||||
operator: 'lte',
|
||||
dataType: 'date',
|
||||
value: dateRange.value[1].format('YYYY-MM-DD HH:mm:ss')
|
||||
}
|
||||
]
|
||||
},
|
||||
sort: [{ field: 'tm', dir: 'asc' }]
|
||||
};
|
||||
|
||||
// 并发请求三个接口
|
||||
const [qualityRes, detailRes, listRes] = await Promise.all([
|
||||
getMonitorDataWaterQuality(params),
|
||||
getMonitorDataWaterQuality(filterParams),
|
||||
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(params)
|
||||
getMonitorDataWaterQualityList(filterParams)
|
||||
]);
|
||||
|
||||
// 判断是否显示综合分析(只有当data不为null且不为空数组时才显示)
|
||||
@ -667,10 +640,7 @@ watch(
|
||||
() => modelStore.selectedAnchorPoint?.stcd,
|
||||
(newStcd, oldStcd) => {
|
||||
if (!newStcd) return;
|
||||
if (newStcd !== oldStcd) {
|
||||
dateRange.value = initDateRange();
|
||||
fetchData();
|
||||
}
|
||||
if (newStcd !== oldStcd) fetchData();
|
||||
},
|
||||
{ immediate: true }
|
||||
);
|
||||
|
||||
@ -23,49 +23,46 @@
|
||||
/>
|
||||
</div>
|
||||
<div class="monitor-table">
|
||||
<a-spin :spinning="tableLoading" tip="加载中...">
|
||||
<BasicTable
|
||||
ref="tableRef"
|
||||
:scrollY="240"
|
||||
:scrollX="tableScrollX"
|
||||
:columns="currentColumns"
|
||||
:data="tableData"
|
||||
:paginationConfig="{
|
||||
showSizeChanger: false,
|
||||
showQuickJumper: false
|
||||
}"
|
||||
@sort-change="handleSortChange"
|
||||
>
|
||||
<template #summary>
|
||||
<a-table-summary fixed>
|
||||
<template
|
||||
v-for="summaryRow in summaryRows"
|
||||
:key="summaryRow.label"
|
||||
>
|
||||
<a-table-summary-row class="summary-row">
|
||||
<a-table-summary-cell :index="0">
|
||||
{{ summaryRow.label }}
|
||||
</a-table-summary-cell>
|
||||
<a-table-summary-cell
|
||||
v-for="col in summaryColumns"
|
||||
:key="col.dataIndex"
|
||||
:index="col.summaryIndex"
|
||||
<BasicTable
|
||||
ref="tableRef"
|
||||
:scrollY="240"
|
||||
:scrollX="tableScrollX"
|
||||
:columns="currentColumns"
|
||||
:data="tableData"
|
||||
:paginationConfig="{
|
||||
showSizeChanger: false,
|
||||
showQuickJumper: false
|
||||
}"
|
||||
>
|
||||
<template #summary>
|
||||
<a-table-summary fixed>
|
||||
<template
|
||||
v-for="summaryRow in summaryRows"
|
||||
:key="summaryRow.label"
|
||||
>
|
||||
<a-table-summary-row class="summary-row">
|
||||
<a-table-summary-cell :index="0">
|
||||
{{ summaryRow.label }}
|
||||
</a-table-summary-cell>
|
||||
<a-table-summary-cell
|
||||
v-for="col in summaryColumns"
|
||||
:key="col.dataIndex"
|
||||
:index="col.summaryIndex"
|
||||
>
|
||||
{{ summaryRow.cells[col.dataIndex]?.value ?? '-' }}
|
||||
<Tooltip
|
||||
v-if="summaryRow.cells[col.dataIndex]?.time"
|
||||
:title="`时间:${summaryRow.cells[col.dataIndex].time}`"
|
||||
placement="top"
|
||||
>
|
||||
{{ summaryRow.cells[col.dataIndex]?.value ?? '-' }}
|
||||
<Tooltip
|
||||
v-if="summaryRow.cells[col.dataIndex]?.time"
|
||||
:title="`时间:${summaryRow.cells[col.dataIndex].time}`"
|
||||
placement="top"
|
||||
>
|
||||
<InfoCircleOutlined class="summary-tip-icon" />
|
||||
</Tooltip>
|
||||
</a-table-summary-cell>
|
||||
</a-table-summary-row>
|
||||
</template>
|
||||
</a-table-summary>
|
||||
</template>
|
||||
</BasicTable>
|
||||
</a-spin>
|
||||
<InfoCircleOutlined class="summary-tip-icon" />
|
||||
</Tooltip>
|
||||
</a-table-summary-cell>
|
||||
</a-table-summary-row>
|
||||
</template>
|
||||
</a-table-summary>
|
||||
</template>
|
||||
</BasicTable>
|
||||
</div>
|
||||
</a-spin>
|
||||
</SidePanelItem>
|
||||
@ -88,7 +85,6 @@ 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';
|
||||
|
||||
@ -97,6 +93,7 @@ const modelStore = useModelStore();
|
||||
|
||||
const isLoading = ref(false);
|
||||
const chartData = ref<any[]>([]);
|
||||
const tableData = ref<any[]>([]);
|
||||
const tableRef = ref<any>();
|
||||
|
||||
// ==================== 图表 ====================
|
||||
@ -281,7 +278,6 @@ const baseWaterTempColumns = [
|
||||
title: '时间',
|
||||
dataIndex: 'tm',
|
||||
fixed: 'left',
|
||||
sort: true,
|
||||
customRender: ({ text }: any) =>
|
||||
text ? dayjs(text).format('YYYY-MM-DD HH:mm') : '-'
|
||||
},
|
||||
@ -289,7 +285,6 @@ const baseWaterTempColumns = [
|
||||
title: '水温(°C)',
|
||||
dataIndex: 'wt',
|
||||
summary: true,
|
||||
sort: true,
|
||||
customRender: ({ text }: any) =>
|
||||
text !== undefined && text !== null ? Number(text).toFixed(1) : '-'
|
||||
}
|
||||
@ -417,55 +412,41 @@ const summaryRows = computed(() => {
|
||||
});
|
||||
|
||||
// ==================== 数据请求 ====================
|
||||
// 构造表格/图表请求参数(stcd + 时间范围),排序传入时叠加 sort
|
||||
const buildSearchParams = (sort?: { field: string; dir: 'asc' | 'desc' }) => {
|
||||
const stcd = modelStore.selectedAnchorPoint?.stcd;
|
||||
if (!dateRange.value || !stcd) return null;
|
||||
return {
|
||||
filter: {
|
||||
logic: 'and',
|
||||
filters: [
|
||||
{
|
||||
field: 'stcd',
|
||||
operator: 'eq',
|
||||
dataType: 'string',
|
||||
value: stcd
|
||||
},
|
||||
{
|
||||
field: 'tm',
|
||||
operator: 'gte',
|
||||
dataType: 'date',
|
||||
value: dateRange.value[0].format('YYYY-MM-DD HH:mm:ss')
|
||||
},
|
||||
{
|
||||
field: 'tm',
|
||||
operator: 'lte',
|
||||
dataType: 'date',
|
||||
value: dateRange.value[1].format('YYYY-MM-DD HH:mm:ss')
|
||||
}
|
||||
]
|
||||
},
|
||||
sort: sort ? [sort] : [{ field: 'tm', dir: 'asc' }]
|
||||
};
|
||||
};
|
||||
|
||||
// data 模式表格:点击排序时重新请求接口(服务端排序)
|
||||
const {
|
||||
tableData,
|
||||
isLoading: tableLoading,
|
||||
handleSortChange
|
||||
} = useServerSortTableData<any>({
|
||||
request: getMonitorDataWaterTemp,
|
||||
buildSearchParams
|
||||
});
|
||||
|
||||
// 数据请求(查询参数取 modelStore.selectedAnchorPoint)
|
||||
const fetchData = async () => {
|
||||
const params = buildSearchParams();
|
||||
if (!params) return;
|
||||
const stcd = modelStore.selectedAnchorPoint?.stcd;
|
||||
if (!dateRange.value || !stcd) return;
|
||||
isLoading.value = true;
|
||||
|
||||
try {
|
||||
const res = await getMonitorDataWaterTemp(params);
|
||||
const filterParams = {
|
||||
filter: {
|
||||
logic: 'and',
|
||||
filters: [
|
||||
{
|
||||
field: 'stcd',
|
||||
operator: 'eq',
|
||||
dataType: 'string',
|
||||
value: stcd
|
||||
},
|
||||
{
|
||||
field: 'tm',
|
||||
operator: 'gte',
|
||||
dataType: 'date',
|
||||
value: dateRange.value[0].format('YYYY-MM-DD HH:mm:ss')
|
||||
},
|
||||
{
|
||||
field: 'tm',
|
||||
operator: 'lte',
|
||||
dataType: 'date',
|
||||
value: dateRange.value[1].format('YYYY-MM-DD HH:mm:ss')
|
||||
}
|
||||
]
|
||||
},
|
||||
sort: [{ field: 'tm', dir: 'asc' }]
|
||||
};
|
||||
|
||||
const res = await getMonitorDataWaterTemp(filterParams);
|
||||
const rawData = res?.data?.data || res?.data?.records || [];
|
||||
|
||||
chartData.value = rawData;
|
||||
@ -494,10 +475,7 @@ watch(
|
||||
() => modelStore.selectedAnchorPoint?.stcd,
|
||||
(newStcd, oldStcd) => {
|
||||
if (!newStcd) return;
|
||||
if (newStcd !== oldStcd) {
|
||||
dateRange.value = initDateRange();
|
||||
fetchData();
|
||||
}
|
||||
if (newStcd !== oldStcd) fetchData();
|
||||
},
|
||||
{ immediate: true }
|
||||
);
|
||||
|
||||
@ -534,10 +534,7 @@ watch(
|
||||
() => modelStore.selectedAnchorPoint?.stcd,
|
||||
(newStcd, oldStcd) => {
|
||||
if (!newStcd) return;
|
||||
if (newStcd !== oldStcd) {
|
||||
dateRange.value = initDateRange();
|
||||
fetchData();
|
||||
}
|
||||
if (newStcd !== oldStcd) fetchData();
|
||||
},
|
||||
{ immediate: true }
|
||||
);
|
||||
|
||||
@ -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 ${titleClass}">${title}</div>
|
||||
<div class="iconDivTitle ${getTitleClass(titleClass)}">${title}</div>
|
||||
<div class="iconDivContent">
|
||||
<div class="iconDivLeft">
|
||||
<div>${transUnitRender(p?.ttpwr, 'Other', 'ZJRL')}</div>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user