2442 lines
88 KiB
TypeScript
2442 lines
88 KiB
TypeScript
import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
|
||
import { AgGridReact } from 'ag-grid-react';
|
||
import { AgCharts } from 'ag-charts-react';
|
||
import {
|
||
AllCommunityModule as AgGridAllCommunityModule,
|
||
ModuleRegistry as AgGridModuleRegistry,
|
||
type ColDef,
|
||
type ColGroupDef,
|
||
type ValueFormatterParams,
|
||
} from 'ag-grid-community';
|
||
import type { AgCartesianChartOptions } from 'ag-charts-community';
|
||
import { ModuleRegistry } from 'ag-charts-community';
|
||
import { Building2, Construction, LayoutGrid, Library, LocateFixed, MapPinned, Waypoints } from 'lucide-react';
|
||
import {
|
||
AnnotationsModule,
|
||
ContextMenuModule,
|
||
CrosshairModule,
|
||
LicenseManager,
|
||
ZoomModule,
|
||
} from 'ag-charts-enterprise';
|
||
import { AG_CHARTS_LOCALE_ZH_CN } from 'ag-charts-locale';
|
||
|
||
LicenseManager.setLicenseKey('[v3][RELEASE][0102]_NDg2Njc4MzY3MDgzNw==16d78ca762fb5d2ff740aed081e2af7b');
|
||
ModuleRegistry.registerModules([AnnotationsModule, ContextMenuModule, ZoomModule, CrosshairModule]);
|
||
AgGridModuleRegistry.registerModules([AgGridAllCommunityModule]);
|
||
|
||
const API_BASE_URL = 'https://nest.zwgczx.com/api/v1';
|
||
// const API_BASE_URL = 'http://127.0.0.1:9089/api/v1';
|
||
|
||
const statisticOptions = [
|
||
{ key: 'minValue', label: '最低值', shortLabel: '低' },
|
||
{ key: 'maxValue', label: '最高值', shortLabel: '高' },
|
||
{ key: 'avgValue', label: '平均值', shortLabel: '均' },
|
||
{ key: 'medianValue', label: '中位数', shortLabel: '中' },
|
||
] as const;
|
||
|
||
const metricOptions = [
|
||
{ key: 'cost', label: '造价（元）' },
|
||
{ key: 'buildingArea', label: '建筑面积指标（元/m²）' },
|
||
{ key: 'builtArea', label: '建造面积指标（元/m²）' },
|
||
{ key: 'usableArea', label: '使用面积指标（元/m²）' },
|
||
{ key: 'dataCount', label: '数据量' },
|
||
] as const;
|
||
|
||
const metricShortLabels: Record<MetricKey, string> = {
|
||
cost: '价',
|
||
buildingArea: '建',
|
||
builtArea: '造',
|
||
usableArea: '用',
|
||
dataCount: '数',
|
||
};
|
||
|
||
const contentOptions = [
|
||
{ key: 'geoLocation', label: '自然地理区位' },
|
||
{ key: 'facilityType', label: '设施类别' },
|
||
{ key: 'constructionStage', label: '建设阶段' },
|
||
{ key: 'planningForm', label: '规划形式' },
|
||
] as const;
|
||
|
||
const filterOptions = [
|
||
{ key: 'templateLibrary', label: '模板库', icon: Library },
|
||
{ key: 'indicatorTree', label: '指标树形', icon: Waypoints },
|
||
{ key: 'region', label: '省市区', icon: MapPinned },
|
||
{ key: 'geoLocation', label: '自然地理区位', icon: LocateFixed },
|
||
{ key: 'facilityType', label: '设施类别', icon: Building2 },
|
||
{ key: 'constructionStage', label: '建设阶段', icon: Construction },
|
||
{ key: 'planningForm', label: '规划形式', icon: LayoutGrid },
|
||
] as const;
|
||
const chartFilterOptions = filterOptions.filter((option) => option.key !== 'templateLibrary' && option.key !== 'indicatorTree');
|
||
|
||
const browserTreeDefaults = {
|
||
treetype: '256',
|
||
checkStrictly: 'true',
|
||
requestid: '-1',
|
||
workflowid: '181028',
|
||
wfid: '181028',
|
||
billid: '-1812',
|
||
isbill: '1',
|
||
f_weaver_belongto_userid: '267',
|
||
f_weaver_belongto_usertype: '0',
|
||
wf_isagent: '0',
|
||
wf_beagenter: '0',
|
||
wfTestStr: '',
|
||
viewtype: '1',
|
||
fromModule: 'workflow',
|
||
wfCreater: '267',
|
||
disabledConditionCache: 'true',
|
||
companyId: '1',
|
||
};
|
||
|
||
const contentTreeConfigs = {
|
||
geoLocation: {
|
||
endpoint: '/api/public/browser/data/256',
|
||
treeid: '94004',
|
||
fieldid: '305425',
|
||
defaultExpandedLevel: 1,
|
||
},
|
||
facilityType: {
|
||
endpoint: '/api/public/browser/data/256',
|
||
treeid: '94005',
|
||
fieldid: '305426',
|
||
defaultExpandedLevel: 3,
|
||
},
|
||
constructionStage: {
|
||
endpoint: '/api/public/browser/data/256',
|
||
treeid: '94007',
|
||
fieldid: '305428',
|
||
defaultExpandedLevel: 1,
|
||
},
|
||
planningForm: {
|
||
endpoint: '/api/public/browser/data/256',
|
||
treeid: '94006',
|
||
fieldid: '305427',
|
||
defaultExpandedLevel: 1,
|
||
},
|
||
} as const;
|
||
|
||
const chartLineColors = ['#0078a8', '#d14d72', '#1f8f4d', '#d96f23', '#6b5cc8', '#0d7680', '#9a6b12', '#b24b38'];
|
||
const defaultTemplateFilterNode = {
|
||
id: '3',
|
||
filterKey: 'templateLibrary',
|
||
label: '默认模板',
|
||
} as const;
|
||
const overallSummaryKey = 'summary';
|
||
|
||
// const mockGeoLocationPayload = {
|
||
// checkStrictly: true,
|
||
// type: 3,
|
||
// datas: [
|
||
// {
|
||
// allVersionIds: '',
|
||
// canClick: false,
|
||
// checkStrictly: true,
|
||
// dsporder: 0,
|
||
// icon: '',
|
||
// id: '95005_22',
|
||
// isImgIcon: false,
|
||
// isParent: true,
|
||
// linkUrl: '/formmode/search/CustomSearchOpenTree.jsp?pid=95005_22',
|
||
// name: '中国',
|
||
// pid: '0_0',
|
||
// selected: false,
|
||
// title: '中国',
|
||
// type: '2',
|
||
// },
|
||
// ],
|
||
// iconSetting: {
|
||
// bgColor: '#96358a',
|
||
// icon: 'icon-coms-ModelingEngine',
|
||
// fontColor: '#fff',
|
||
// },
|
||
// };
|
||
|
||
type StatisticKey = (typeof statisticOptions)[number]['key'];
|
||
type MetricKey = (typeof metricOptions)[number]['key'];
|
||
type ContentKey = (typeof contentOptions)[number]['key'];
|
||
type FilterKey = (typeof filterOptions)[number]['key'];
|
||
type ChartViewKey = 'trend' | 'pivot';
|
||
type ApiBuildingFunctionStat = {
|
||
group_key?: string | number | null;
|
||
group_name?: string | null;
|
||
min_value?: number | null;
|
||
max_value?: number | null;
|
||
avg_value?: number | null;
|
||
median_value?: number | null;
|
||
threshold_low_value?: number | null;
|
||
threshold_center_value?: number | null;
|
||
threshold_high_value?: number | null;
|
||
stddev_value?: number | null;
|
||
standard_deviation?: number | null;
|
||
iqr_value?: number | null;
|
||
quartile_range?: number | null;
|
||
variation_coefficient?: number | null;
|
||
coefficient_of_variation?: number | null;
|
||
data_count?: number | null;
|
||
};
|
||
type ApiBuildingFunctionStatBatchItem = {
|
||
key?: string;
|
||
data?: ApiBuildingFunctionStat[];
|
||
summary?: ApiBuildingFunctionStat | null;
|
||
};
|
||
type ChartDatum = {
|
||
groupName: string;
|
||
minValue: number | null;
|
||
maxValue: number | null;
|
||
avgValue: number | null;
|
||
medianValue: number | null;
|
||
thresholdLowValue: number | null;
|
||
thresholdCenterValue: number | null;
|
||
thresholdHighValue: number | null;
|
||
standardDeviation: number | null;
|
||
interquartileRange: number | null;
|
||
coefficientOfVariation: number | null;
|
||
dataCount: number | null;
|
||
};
|
||
type TreeNode = {
|
||
id: string;
|
||
label: string;
|
||
children: TreeNode[];
|
||
hasChildren: boolean;
|
||
canClick: boolean;
|
||
expanded: boolean;
|
||
loading: boolean;
|
||
loaded: boolean;
|
||
hasData?: boolean;
|
||
dataStatus?: 'normal' | 'empty';
|
||
};
|
||
type SelectedContentNode = {
|
||
id: string;
|
||
contentKey: ContentKey;
|
||
label: string;
|
||
color: string;
|
||
};
|
||
type SelectedFilterNode = {
|
||
id: string;
|
||
filterKey: FilterKey;
|
||
label: string;
|
||
};
|
||
type PivotGridRow = {
|
||
year: string;
|
||
name: string;
|
||
summary: boolean;
|
||
lowValue: number | null;
|
||
centerValue: number | null;
|
||
highValue: number | null;
|
||
maxValue: number | null;
|
||
minValue: number | null;
|
||
avgValue: number | null;
|
||
medianValue: number | null;
|
||
standardDeviation: number | null;
|
||
interquartileRange: number | null;
|
||
coefficientOfVariation: number | null;
|
||
dataCount: number | null;
|
||
};
|
||
|
||
function formatNumber(value: number, maximumFractionDigits: number) {
|
||
return value.toLocaleString('zh-CN', {
|
||
minimumFractionDigits: 0,
|
||
maximumFractionDigits,
|
||
});
|
||
}
|
||
|
||
function formatCostValue(value: number) {
|
||
const absValue = Math.abs(value);
|
||
if (absValue >= 10000) {
|
||
return `${formatNumber(value / 10000, 2)}万元`;
|
||
}
|
||
const fractionDigits = absValue > 0 && absValue < 1 ? 4 : 2;
|
||
return `${formatNumber(value, fractionDigits)}元`;
|
||
}
|
||
|
||
function formatAreaMetricValue(value: number) {
|
||
const absValue = Math.abs(value);
|
||
const fractionDigits = absValue > 0 && absValue < 1 ? 4 : 2;
|
||
return `${formatNumber(value, fractionDigits)}元/m²`;
|
||
}
|
||
|
||
function formatChartValue(value: number, metricKey: MetricKey) {
|
||
if (metricKey === 'dataCount') {
|
||
return formatNumber(value, 0);
|
||
}
|
||
if (metricKey === 'cost') {
|
||
return formatCostValue(value);
|
||
}
|
||
return formatAreaMetricValue(value);
|
||
}
|
||
|
||
function normalizeStat(row: ApiBuildingFunctionStat): ChartDatum {
|
||
const avgValue = row.avg_value ?? null;
|
||
const medianValue = row.median_value ?? null;
|
||
const fallbackThresholdLowValue = avgValue == null || medianValue == null ? null : Math.min(avgValue, medianValue);
|
||
const fallbackThresholdHighValue = avgValue == null || medianValue == null ? null : Math.max(avgValue, medianValue);
|
||
return {
|
||
groupName: row.group_name || String(row.group_key ?? '未命名'),
|
||
minValue: row.min_value ?? null,
|
||
maxValue: row.max_value ?? null,
|
||
avgValue,
|
||
medianValue,
|
||
thresholdLowValue: row.threshold_low_value ?? fallbackThresholdLowValue,
|
||
thresholdCenterValue: row.threshold_center_value ?? medianValue,
|
||
thresholdHighValue: row.threshold_high_value ?? fallbackThresholdHighValue,
|
||
standardDeviation: row.stddev_value ?? row.standard_deviation ?? null,
|
||
interquartileRange: row.iqr_value ?? row.quartile_range ?? null,
|
||
coefficientOfVariation: row.variation_coefficient ?? row.coefficient_of_variation ?? null,
|
||
dataCount: row.data_count ?? null,
|
||
};
|
||
}
|
||
|
||
function buildQuery(params: Record<string, string | number | boolean | null | undefined>) {
|
||
const search = new URLSearchParams();
|
||
Object.entries(params).forEach(([key, value]) => {
|
||
if (value == null) return;
|
||
search.set(key, String(value));
|
||
});
|
||
search.set('currenttime', String(Date.now()));
|
||
search.set('__random__', String(Date.now()));
|
||
return search.toString();
|
||
}
|
||
|
||
function pickArray(payload: unknown): unknown[] {
|
||
if (Array.isArray(payload)) return payload;
|
||
if (!payload || typeof payload !== 'object') return [];
|
||
|
||
const source = payload as Record<string, unknown>;
|
||
const candidates = [
|
||
source.datas,
|
||
source.data,
|
||
source.data && typeof source.data === 'object' ? (source.data as Record<string, unknown>).datas : null,
|
||
source.data && typeof source.data === 'object' ? (source.data as Record<string, unknown>).list : null,
|
||
source.data && typeof source.data === 'object' ? (source.data as Record<string, unknown>).treeDatas : null,
|
||
source.result,
|
||
source.rows,
|
||
source.list,
|
||
source.treeDatas,
|
||
source.children,
|
||
];
|
||
|
||
for (const candidate of candidates) {
|
||
if (Array.isArray(candidate)) return candidate;
|
||
}
|
||
return [];
|
||
}
|
||
|
||
function readText(row: Record<string, unknown>, keys: string[]) {
|
||
for (const key of keys) {
|
||
const value = row[key];
|
||
if (value !== null && value !== undefined && String(value).trim()) {
|
||
return String(value);
|
||
}
|
||
}
|
||
return '';
|
||
}
|
||
|
||
function readIndicatorDataStatus(row: Record<string, unknown>) {
|
||
const rawStatus = readText(row, ['dataStatus', 'datastatus']).toLowerCase();
|
||
const rawHasData = row.hasData ?? row.hasdata;
|
||
const hasDataField = rawStatus === 'normal' || rawStatus === 'empty' || rawHasData !== undefined;
|
||
const hasData =
|
||
!hasDataField ||
|
||
rawStatus === 'normal' ||
|
||
rawHasData === true ||
|
||
rawHasData === 1 ||
|
||
rawHasData === '1' ||
|
||
rawHasData === 'true';
|
||
|
||
return {
|
||
hasData,
|
||
dataStatus: rawStatus === 'empty' || !hasData ? 'empty' as const : 'normal' as const,
|
||
};
|
||
}
|
||
|
||
function normalizeTreeRows(rows: unknown[]): TreeNode[] {
|
||
return rows
|
||
.filter((row): row is Record<string, unknown> => !!row && typeof row === 'object')
|
||
.map((row, index) => {
|
||
const children = normalizeTreeRows(pickArray(row.children ?? row.childs ?? row.subs));
|
||
const id = readText(row, ['id', 'key', 'value', 'nodeid', 'treeid', 'browserid']) || `node-${index}`;
|
||
const label = readText(row, ['name', 'label', 'title', 'text', 'showname', 'showName', 'browsername', 'displayName']) || id;
|
||
const hasChildren =
|
||
children.length > 0 ||
|
||
row.hasChild === true ||
|
||
row.haschild === true ||
|
||
row.isParent === true ||
|
||
row.isparent === true ||
|
||
row.children === true ||
|
||
row.child === true;
|
||
const canClick = row.canClick === true || row.canClick === 'true' || row.canclick === true || row.canclick === 'true';
|
||
|
||
return {
|
||
id,
|
||
label,
|
||
children,
|
||
hasChildren,
|
||
canClick,
|
||
expanded: children.length > 0,
|
||
loading: false,
|
||
loaded: children.length > 0,
|
||
};
|
||
});
|
||
}
|
||
|
||
function normalizeFlatTemplateLibraryRows(rows: unknown[]): TreeNode[] {
|
||
return rows
|
||
.filter((row): row is Record<string, unknown> => !!row && typeof row === 'object')
|
||
.map((row, index) => {
|
||
const id = readText(row, ['id', 'mainid', 'mbid']) || `node-${index}`;
|
||
const label = readText(row, ['mbmc', 'label', 'name', 'title', 'text']) || id;
|
||
return createFilterTreeNode(id, label);
|
||
});
|
||
}
|
||
|
||
function normalizeFlatIndicatorRows(rows: unknown[]): TreeNode[] {
|
||
const sourceRows = rows.filter((row): row is Record<string, unknown> => !!row && typeof row === 'object');
|
||
const rowsById = new Map<string, Record<string, unknown>>();
|
||
const childrenByParent = new Map<string, string[]>();
|
||
|
||
sourceRows.forEach((row, index) => {
|
||
const id = readText(row, ['zbid', 'zjzbk', 'id']) || `node-${index}`;
|
||
if (!id) return;
|
||
rowsById.set(id, row);
|
||
|
||
const parentId = readText(row, ['sj', 'parentId', 'parentid', 'pid', 'pId']) || '';
|
||
const children = childrenByParent.get(parentId) || [];
|
||
children.push(id);
|
||
childrenByParent.set(parentId, children);
|
||
});
|
||
|
||
const buildNode = (id: string): TreeNode => {
|
||
const row = rowsById.get(id) || {};
|
||
const children = (childrenByParent.get(id) || [])
|
||
.filter((childId) => rowsById.has(childId))
|
||
.map(buildNode);
|
||
const label = readText(row, ['label', 'name', 'title', 'text', 'zbbh', 'mbmc']) || id;
|
||
const dataStatus = readIndicatorDataStatus(row);
|
||
return {
|
||
id,
|
||
label,
|
||
children,
|
||
hasChildren: children.length > 0,
|
||
canClick: true,
|
||
expanded: children.length > 0,
|
||
loading: false,
|
||
loaded: true,
|
||
hasData: dataStatus.hasData,
|
||
dataStatus: dataStatus.dataStatus,
|
||
};
|
||
};
|
||
|
||
return Array.from(rowsById.keys())
|
||
.filter((id) => {
|
||
const row = rowsById.get(id);
|
||
if (!row) return false;
|
||
const parentId = readText(row, ['sj', 'parentId', 'parentid', 'pid', 'pId']) || '';
|
||
return !parentId || parentId === '0' || parentId === '0_0' || !rowsById.has(parentId);
|
||
})
|
||
.map(buildNode);
|
||
}
|
||
|
||
const regionFieldKeys = {
|
||
provinceId: ['provinceId', 'province_id', 'provinceid', 'sfid', 'sf_id', 'shengId', 'sheng_id', 'sheng'],
|
||
provinceName: ['provinceName', 'province_name', 'province', 'sfmc', 'sf', 'shengName', 'sheng_name', 'shengmc'],
|
||
cityId: ['cityId', 'city_id', 'cityid', 'sid', 's_id', 'shiId', 'shi_id', 'shi'],
|
||
cityName: ['cityName', 'city_name', 'city', 'smc', 's', 'shiName', 'shi_name', 'shimc'],
|
||
districtId: ['districtId', 'district_id', 'districtid', 'countyId', 'county_id', 'qid', 'q_id', 'xid', 'x_id', 'id'],
|
||
districtName: ['districtName', 'district_name', 'district', 'countyName', 'county_name', 'county', 'qmc', 'q', 'xmc', 'x', 'name', 'shortname'],
|
||
};
|
||
|
||
function createFilterTreeNode(id: string, label: string, children: TreeNode[] = [], expanded = false): TreeNode {
|
||
return {
|
||
id,
|
||
label,
|
||
children,
|
||
hasChildren: children.length > 0,
|
||
canClick: true,
|
||
expanded,
|
||
loading: false,
|
||
loaded: true,
|
||
};
|
||
}
|
||
|
||
function normalizeFlatRegionRows(rows: unknown[]): TreeNode[] {
|
||
const sourceRows = rows.filter((row): row is Record<string, unknown> => !!row && typeof row === 'object');
|
||
const hasRegionShape = sourceRows.some((row) =>
|
||
readText(row, regionFieldKeys.provinceName) &&
|
||
readText(row, regionFieldKeys.cityName) &&
|
||
readText(row, regionFieldKeys.districtName),
|
||
);
|
||
if (!hasRegionShape) return [];
|
||
|
||
const provinceMap = new Map<string, {
|
||
id: string;
|
||
label: string;
|
||
cityMap: Map<string, {
|
||
id: string;
|
||
label: string;
|
||
districts: Map<string, TreeNode>;
|
||
}>;
|
||
}>();
|
||
|
||
sourceRows.forEach((row) => {
|
||
const provinceLabel = readText(row, regionFieldKeys.provinceName);
|
||
const cityLabel = readText(row, regionFieldKeys.cityName);
|
||
const districtLabel = readText(row, regionFieldKeys.districtName);
|
||
if (!provinceLabel || !cityLabel || !districtLabel) return;
|
||
|
||
const provinceId = `region:province:${readText(row, regionFieldKeys.provinceId) || provinceLabel}`;
|
||
const cityId = `region:city:${provinceLabel}:${readText(row, regionFieldKeys.cityId) || cityLabel}`;
|
||
const districtId = `region:district:${readText(row, regionFieldKeys.districtId) || `${provinceLabel}:${cityLabel}:${districtLabel}`}`;
|
||
|
||
const province = provinceMap.get(provinceId) ?? {
|
||
id: provinceId,
|
||
label: provinceLabel,
|
||
cityMap: new Map<string, { id: string; label: string; districts: Map<string, TreeNode> }>(),
|
||
};
|
||
const city = province.cityMap.get(cityId) ?? {
|
||
id: cityId,
|
||
label: cityLabel,
|
||
districts: new Map<string, TreeNode>(),
|
||
};
|
||
|
||
city.districts.set(districtId, createFilterTreeNode(districtId, districtLabel));
|
||
province.cityMap.set(cityId, city);
|
||
provinceMap.set(provinceId, province);
|
||
});
|
||
|
||
return Array.from(provinceMap.values()).map((province) => {
|
||
const cityNodes = Array.from(province.cityMap.values()).map((city) =>
|
||
createFilterTreeNode(city.id, city.label, Array.from(city.districts.values()), false),
|
||
);
|
||
return createFilterTreeNode(province.id, province.label, cityNodes, true);
|
||
});
|
||
}
|
||
|
||
function updateNode(nodes: TreeNode[], nodeId: string, updater: (node: TreeNode) => TreeNode): TreeNode[] {
|
||
return nodes.map((node) => {
|
||
if (node.id === nodeId) return updater(node);
|
||
return {
|
||
...node,
|
||
children: updateNode(node.children, nodeId, updater),
|
||
};
|
||
});
|
||
}
|
||
|
||
function getSelectionKey(contentKey: ContentKey, nodeId: string) {
|
||
return `${contentKey}:${nodeId}`;
|
||
}
|
||
|
||
function getFilterSelectionKey(filterKey: FilterKey, nodeId: string) {
|
||
return `${filterKey}:${nodeId}`;
|
||
}
|
||
|
||
function getSeriesValueKey(contentKey: ContentKey, nodeId: string) {
|
||
return `amount_${getSelectionKey(contentKey, nodeId).replace(/[^a-zA-Z0-9_]/g, '_')}`;
|
||
}
|
||
|
||
function compareGroupNames(a: string, b: string) {
|
||
const numberA = Number(a);
|
||
const numberB = Number(b);
|
||
if (Number.isFinite(numberA) && Number.isFinite(numberB)) {
|
||
return numberA - numberB;
|
||
}
|
||
return a.localeCompare(b, 'zh-CN', { numeric: true });
|
||
}
|
||
|
||
function isContentFilterKey(filterKey: FilterKey): filterKey is ContentKey {
|
||
return Object.prototype.hasOwnProperty.call(contentTreeConfigs, filterKey);
|
||
}
|
||
|
||
function isTemplateFilterKey(filterKey: FilterKey): filterKey is 'templateLibrary' {
|
||
return filterKey === 'templateLibrary';
|
||
}
|
||
|
||
function isIndicatorTreeFilterKey(filterKey: FilterKey): filterKey is 'indicatorTree' {
|
||
return filterKey === 'indicatorTree';
|
||
}
|
||
|
||
function isSingleSelectFilterKey(filterKey: FilterKey) {
|
||
return isTemplateFilterKey(filterKey) || isIndicatorTreeFilterKey(filterKey);
|
||
}
|
||
|
||
function getDefaultTemplateFilterNodes(): SelectedFilterNode[] {
|
||
return [{ ...defaultTemplateFilterNode }];
|
||
}
|
||
|
||
function isDefaultTemplateSelection(nodes: SelectedFilterNode[]) {
|
||
return nodes.length === 1 && nodes[0]?.id === defaultTemplateFilterNode.id;
|
||
}
|
||
|
||
function isSameFilterSelection(a: SelectedFilterNode[], b: SelectedFilterNode[]) {
|
||
return a.length === b.length && a.every((node, index) => node.id === b[index]?.id);
|
||
}
|
||
|
||
function getDefaultIndicatorTreeFilterNodes(nodes: TreeNode[]): SelectedFilterNode[] {
|
||
const defaultNode = nodes[0];
|
||
if (!defaultNode) return [];
|
||
return [{
|
||
id: defaultNode.id,
|
||
filterKey: 'indicatorTree',
|
||
label: defaultNode.label,
|
||
}];
|
||
}
|
||
|
||
function isDefaultIndicatorTreeSelection(nodes: SelectedFilterNode[], treeNodes: TreeNode[]) {
|
||
const defaultNode = treeNodes[0];
|
||
return Boolean(defaultNode) && nodes.length === 1 && nodes[0]?.id === defaultNode?.id;
|
||
}
|
||
|
||
function filterTreeNodesByKeyword(nodes: TreeNode[], keyword: string): TreeNode[] {
|
||
const normalizedKeyword = keyword.trim().toLowerCase();
|
||
if (!normalizedKeyword) return nodes;
|
||
|
||
const expandDescendants = (targetNodes: TreeNode[]): TreeNode[] => targetNodes.map((node) => ({
|
||
...node,
|
||
children: expandDescendants(node.children),
|
||
expanded: node.hasChildren || node.children.length > 0 ? true : node.expanded,
|
||
}));
|
||
|
||
return nodes.flatMap((node) => {
|
||
const matched = node.label.toLowerCase().includes(normalizedKeyword);
|
||
const children = filterTreeNodesByKeyword(node.children, keyword);
|
||
if (!matched && children.length === 0) return [];
|
||
return [{
|
||
...node,
|
||
children: matched ? expandDescendants(node.children) : children,
|
||
expanded: true,
|
||
}];
|
||
});
|
||
}
|
||
|
||
function renderTreeNodes(
|
||
nodes: TreeNode[],
|
||
contentKey: ContentKey,
|
||
selectedNodeKeys: Set<string>,
|
||
getNodeColor: (contentKey: ContentKey, nodeId: string) => string,
|
||
onToggle: (nodeId: string) => void,
|
||
onSelect: (node: TreeNode) => void,
|
||
depth = 0,
|
||
) {
|
||
return (
|
||
<ul className="content-tree-list" role={depth === 0 ? 'tree' : 'group'}>
|
||
{nodes.map((node) => {
|
||
const selected = selectedNodeKeys.has(getSelectionKey(contentKey, node.id));
|
||
const color = getNodeColor(contentKey, node.id);
|
||
|
||
return (
|
||
<li className="content-tree-node" role="treeitem" aria-expanded={node.hasChildren ? node.expanded : undefined} key={node.id}>
|
||
<div className="content-tree-row" style={{ paddingLeft: 8 + depth * 18 }}>
|
||
{node.hasChildren ? (
|
||
<button className="content-tree-caret" type="button" aria-label={node.expanded ? '收起' : '展开'} onClick={() => onToggle(node.id)}>
|
||
{node.expanded ? '▾' : '▸'}
|
||
</button>
|
||
) : (
|
||
<span className="content-tree-caret is-leaf" />
|
||
)}
|
||
<button
|
||
className="content-tree-select"
|
||
type="button"
|
||
aria-pressed={selected}
|
||
onClick={() => onSelect(node)}
|
||
title={node.label}
|
||
>
|
||
<span className="content-tree-series-mark" style={{ backgroundColor: color }} />
|
||
<span className="content-tree-label">{node.label}</span>
|
||
</button>
|
||
{node.loading ? <span className="content-tree-loading">加载中</span> : null}
|
||
</div>
|
||
{node.expanded && node.children.length > 0
|
||
? renderTreeNodes(node.children, contentKey, selectedNodeKeys, getNodeColor, onToggle, onSelect, depth + 1)
|
||
: null}
|
||
</li>
|
||
);
|
||
})}
|
||
</ul>
|
||
);
|
||
}
|
||
|
||
function renderFilterTreeNodes(
|
||
nodes: TreeNode[],
|
||
filterKey: FilterKey,
|
||
selectedNodeKeys: Set<string>,
|
||
onToggle: (nodeId: string) => void,
|
||
onSelect: (node: TreeNode) => void,
|
||
depth = 0,
|
||
) {
|
||
return (
|
||
<ul className="content-tree-list filter-tree-list" role={depth === 0 ? 'tree' : 'group'}>
|
||
{nodes.map((node) => {
|
||
const selected = selectedNodeKeys.has(getFilterSelectionKey(filterKey, node.id));
|
||
const showNoData = filterKey === 'indicatorTree' && node.dataStatus === 'empty';
|
||
|
||
return (
|
||
<li className="content-tree-node" role="treeitem" aria-expanded={node.hasChildren ? node.expanded : undefined} key={node.id}>
|
||
<div className="content-tree-row filter-tree-row" style={{ paddingLeft: 8 + depth * 18 }}>
|
||
{node.hasChildren ? (
|
||
<button className="content-tree-caret" type="button" aria-label={node.expanded ? '收起' : '展开'} onClick={() => onToggle(node.id)}>
|
||
{node.expanded ? '▾' : '▸'}
|
||
</button>
|
||
) : (
|
||
<span className="content-tree-caret is-leaf" />
|
||
)}
|
||
<button
|
||
className={`content-tree-select filter-tree-select${showNoData ? ' is-empty-data' : ''}`}
|
||
type="button"
|
||
aria-pressed={selected}
|
||
onClick={() => onSelect(node)}
|
||
title={showNoData ? `${node.label}（无数据）` : node.label}
|
||
>
|
||
<span className="filter-tree-check" aria-hidden="true" />
|
||
<span className="content-tree-label">{node.label}</span>
|
||
{showNoData ? <span className="filter-tree-empty-badge">无数据</span> : null}
|
||
</button>
|
||
{node.loading ? <span className="content-tree-loading">加载中</span> : null}
|
||
</div>
|
||
{node.expanded && node.children.length > 0
|
||
? renderFilterTreeNodes(node.children, filterKey, selectedNodeKeys, onToggle, onSelect, depth + 1)
|
||
: null}
|
||
</li>
|
||
);
|
||
})}
|
||
</ul>
|
||
);
|
||
}
|
||
|
||
function App() {
|
||
const workspaceRef = useRef<HTMLElement>(null);
|
||
const chartFrameRef = useRef<HTMLDivElement>(null);
|
||
const treeInitialLoadStartedRef = useRef<Record<ContentKey, boolean>>({
|
||
geoLocation: false,
|
||
facilityType: false,
|
||
constructionStage: false,
|
||
planningForm: false,
|
||
});
|
||
const filterTreeInitialLoadStartedRef = useRef<Record<FilterKey, boolean>>({
|
||
templateLibrary: false,
|
||
indicatorTree: false,
|
||
region: false,
|
||
geoLocation: false,
|
||
facilityType: false,
|
||
constructionStage: false,
|
||
planningForm: false,
|
||
});
|
||
const [statisticKey, setStatisticKey] = useState<StatisticKey>('avgValue');
|
||
const [metricKey, setMetricKey] = useState<MetricKey>('cost');
|
||
const [chartViewKey, setChartViewKey] = useState<ChartViewKey>('trend');
|
||
const [workspaceFullscreen, setWorkspaceFullscreen] = useState(false);
|
||
const [statisticMenuOpen, setStatisticMenuOpen] = useState(false);
|
||
const [metricMenuOpen, setMetricMenuOpen] = useState(false);
|
||
const [activeContentKey, setActiveContentKey] = useState<ContentKey>('geoLocation');
|
||
const [treeByContent, setTreeByContent] = useState<Record<ContentKey, TreeNode[]>>({
|
||
geoLocation: [],
|
||
facilityType: [],
|
||
constructionStage: [],
|
||
planningForm: [],
|
||
});
|
||
const [treeLoadingByContent, setTreeLoadingByContent] = useState<Record<ContentKey, boolean>>({
|
||
geoLocation: false,
|
||
facilityType: false,
|
||
constructionStage: false,
|
||
planningForm: false,
|
||
});
|
||
const [treeErrorByContent, setTreeErrorByContent] = useState<Record<ContentKey, string | null>>({
|
||
geoLocation: null,
|
||
facilityType: null,
|
||
constructionStage: null,
|
||
planningForm: null,
|
||
});
|
||
const [selectedContentNodes, setSelectedContentNodes] = useState<SelectedContentNode[]>([]);
|
||
const [chartDataBySelection, setChartDataBySelection] = useState<Record<string, ChartDatum[]>>({});
|
||
const [chartSummaryBySelection, setChartSummaryBySelection] = useState<Record<string, ChartDatum>>({});
|
||
const [chartQueryVersion, setChartQueryVersion] = useState(0);
|
||
const [loading, setLoading] = useState(false);
|
||
const [loadError, setLoadError] = useState<string | null>(null);
|
||
const [loadingHint, setLoadingHint] = useState('');
|
||
const [filterTreeByKey, setFilterTreeByKey] = useState<Record<FilterKey, TreeNode[]>>({
|
||
templateLibrary: [],
|
||
indicatorTree: [],
|
||
region: [],
|
||
geoLocation: [],
|
||
facilityType: [],
|
||
constructionStage: [],
|
||
planningForm: [],
|
||
});
|
||
const [filterTreeLoadingByKey, setFilterTreeLoadingByKey] = useState<Record<FilterKey, boolean>>({
|
||
templateLibrary: false,
|
||
indicatorTree: false,
|
||
region: false,
|
||
geoLocation: false,
|
||
facilityType: false,
|
||
constructionStage: false,
|
||
planningForm: false,
|
||
});
|
||
const [filterTreeErrorByKey, setFilterTreeErrorByKey] = useState<Record<FilterKey, string | null>>({
|
||
templateLibrary: null,
|
||
indicatorTree: null,
|
||
region: null,
|
||
geoLocation: null,
|
||
facilityType: null,
|
||
constructionStage: null,
|
||
planningForm: null,
|
||
});
|
||
const [filterSearchTreeByKey, setFilterSearchTreeByKey] = useState<Record<FilterKey, TreeNode[]>>({
|
||
templateLibrary: [],
|
||
indicatorTree: [],
|
||
region: [],
|
||
geoLocation: [],
|
||
facilityType: [],
|
||
constructionStage: [],
|
||
planningForm: [],
|
||
});
|
||
const [filterSearchLoadingByKey, setFilterSearchLoadingByKey] = useState<Record<FilterKey, boolean>>({
|
||
templateLibrary: false,
|
||
indicatorTree: false,
|
||
region: false,
|
||
geoLocation: false,
|
||
facilityType: false,
|
||
constructionStage: false,
|
||
planningForm: false,
|
||
});
|
||
const [filterSearchErrorByKey, setFilterSearchErrorByKey] = useState<Record<FilterKey, string | null>>({
|
||
templateLibrary: null,
|
||
indicatorTree: null,
|
||
region: null,
|
||
geoLocation: null,
|
||
facilityType: null,
|
||
constructionStage: null,
|
||
planningForm: null,
|
||
});
|
||
const [appliedFilters, setAppliedFilters] = useState<Record<FilterKey, SelectedFilterNode[]>>({
|
||
templateLibrary: getDefaultTemplateFilterNodes(),
|
||
indicatorTree: [],
|
||
region: [],
|
||
geoLocation: [],
|
||
facilityType: [],
|
||
constructionStage: [],
|
||
planningForm: [],
|
||
});
|
||
const [filterModalKey, setFilterModalKey] = useState<FilterKey | null>(null);
|
||
const [draftFilterNodes, setDraftFilterNodes] = useState<SelectedFilterNode[]>([]);
|
||
const [filterSearchValue, setFilterSearchValue] = useState('');
|
||
const filterSearchComposingRef = useRef(false);
|
||
const filterSearchTimerRef = useRef<number | null>(null);
|
||
const filterSearchRequestSeqRef = useRef<Record<FilterKey, number>>({
|
||
templateLibrary: 0,
|
||
indicatorTree: 0,
|
||
region: 0,
|
||
geoLocation: 0,
|
||
facilityType: 0,
|
||
constructionStage: 0,
|
||
planningForm: 0,
|
||
});
|
||
const lastFilterSearchRef = useRef('');
|
||
|
||
const selectedStatistic = statisticOptions.find((option) => option.key === statisticKey) ?? statisticOptions[0];
|
||
const selectedMetric = metricOptions.find((option) => option.key === metricKey) ?? metricOptions[0];
|
||
const selectedMetricShortLabel = metricShortLabels[metricKey];
|
||
const currentViewShortLabel = chartViewKey === 'pivot' ? '表' : '趋';
|
||
const pivotToggleActionLabel = chartViewKey === 'pivot' ? '切换到趋势图' : '切换到表格';
|
||
const pivotToggleTitle = `${chartViewKey === 'pivot' ? '当前表格' : '当前趋势图'}，${pivotToggleActionLabel}`;
|
||
const fullscreenToggleLabel = workspaceFullscreen ? '退出全屏' : '全屏';
|
||
const activeContent = contentOptions.find((option) => option.key === activeContentKey) ?? contentOptions[0];
|
||
const activeTree = treeByContent[activeContentKey];
|
||
const activeFilter = filterOptions.find((option) => option.key === filterModalKey);
|
||
const activeFilterTree = filterModalKey ? filterTreeByKey[filterModalKey] : [];
|
||
const trimmedFilterSearchValue = filterSearchValue.trim();
|
||
const activeFilterDisplayTree = filterModalKey && trimmedFilterSearchValue ? filterSearchTreeByKey[filterModalKey] : activeFilterTree;
|
||
const activeFilterTreeLoading = filterModalKey
|
||
? trimmedFilterSearchValue ? filterSearchLoadingByKey[filterModalKey] : filterTreeLoadingByKey[filterModalKey]
|
||
: false;
|
||
const activeFilterTreeError = filterModalKey
|
||
? trimmedFilterSearchValue ? filterSearchErrorByKey[filterModalKey] : filterTreeErrorByKey[filterModalKey]
|
||
: null;
|
||
const selectedTemplateId = appliedFilters.templateLibrary[0]?.id || defaultTemplateFilterNode.id;
|
||
const defaultIndicatorTreeNodes = useMemo(
|
||
() => getDefaultIndicatorTreeFilterNodes(filterTreeByKey.indicatorTree),
|
||
[filterTreeByKey.indicatorTree],
|
||
);
|
||
const indicatorSelectionLabel = appliedFilters.indicatorTree[0]?.label ?? defaultIndicatorTreeNodes[0]?.label ?? '';
|
||
const activeFilterCount = Object.entries(appliedFilters).reduce((total, [key, nodes]) => (
|
||
key === 'templateLibrary' && isDefaultTemplateSelection(nodes) ? total : total + nodes.length
|
||
), 0);
|
||
const chartEmptyText = selectedContentNodes.length === 0
|
||
? '请选择右侧分类项'
|
||
: activeFilterCount > 0
|
||
? '当前筛选无数据'
|
||
: '所选分类暂无数据';
|
||
const selectedValueKey = metricKey === 'dataCount' ? 'dataCount' : statisticKey;
|
||
const requestMetricKey = metricKey === 'dataCount' ? 'cost' : metricKey;
|
||
const seriesValueLabel = metricKey === 'dataCount' ? selectedMetric.label : selectedStatistic.label;
|
||
const groupNames = useMemo(() => {
|
||
const names: string[] = [];
|
||
const seen = new Set<string>();
|
||
selectedContentNodes.forEach((node) => {
|
||
const rows = chartDataBySelection[getSelectionKey(node.contentKey, node.id)] ?? [];
|
||
rows.forEach((datum) => {
|
||
if (seen.has(datum.groupName)) return;
|
||
seen.add(datum.groupName);
|
||
names.push(datum.groupName);
|
||
});
|
||
});
|
||
return names.sort(compareGroupNames);
|
||
}, [chartDataBySelection, selectedContentNodes]);
|
||
const pivotGridRowData = useMemo<PivotGridRow[]>(
|
||
() => selectedContentNodes.flatMap((node) => {
|
||
const rows = chartDataBySelection[getSelectionKey(node.contentKey, node.id)] ?? [];
|
||
return rows.map((datum) => ({
|
||
year: datum.groupName,
|
||
name: node.label,
|
||
summary: false,
|
||
lowValue: datum.thresholdLowValue,
|
||
centerValue: datum.thresholdCenterValue,
|
||
highValue: datum.thresholdHighValue,
|
||
maxValue: datum.maxValue,
|
||
minValue: datum.minValue,
|
||
avgValue: datum.avgValue,
|
||
medianValue: datum.medianValue,
|
||
standardDeviation: datum.standardDeviation,
|
||
interquartileRange: datum.interquartileRange,
|
||
coefficientOfVariation: datum.coefficientOfVariation,
|
||
dataCount: datum.dataCount,
|
||
}));
|
||
}),
|
||
[chartDataBySelection, selectedContentNodes],
|
||
);
|
||
const pivotGridPinnedBottomRowData = useMemo<PivotGridRow[]>(
|
||
() => {
|
||
const datum = chartSummaryBySelection[overallSummaryKey]
|
||
?? selectedContentNodes
|
||
.map((node) => chartSummaryBySelection[getSelectionKey(node.contentKey, node.id)])
|
||
.find(Boolean);
|
||
if (!datum) return [];
|
||
return [{
|
||
year: '',
|
||
name: '统计',
|
||
summary: true,
|
||
lowValue: datum.thresholdLowValue,
|
||
centerValue: datum.thresholdCenterValue,
|
||
highValue: datum.thresholdHighValue,
|
||
maxValue: datum.maxValue,
|
||
minValue: datum.minValue,
|
||
avgValue: datum.avgValue,
|
||
medianValue: datum.medianValue,
|
||
standardDeviation: datum.standardDeviation,
|
||
interquartileRange: datum.interquartileRange,
|
||
coefficientOfVariation: datum.coefficientOfVariation,
|
||
dataCount: datum.dataCount,
|
||
}];
|
||
},
|
||
[chartSummaryBySelection, selectedContentNodes],
|
||
);
|
||
const pivotGridColumnDefs = useMemo<(ColDef<PivotGridRow> | ColGroupDef<PivotGridRow>)[]>(
|
||
() => {
|
||
const valueFormatter = ({ value }: ValueFormatterParams<PivotGridRow, number | null>) => (
|
||
value == null ? '' : formatChartValue(Number(value), requestMetricKey)
|
||
);
|
||
|
||
return [
|
||
{
|
||
field: 'year',
|
||
headerName: '年度',
|
||
minWidth: 68,
|
||
width: 74,
|
||
},
|
||
{
|
||
field: 'name',
|
||
headerName: '名称',
|
||
flex: 1,
|
||
minWidth: 108,
|
||
},
|
||
{
|
||
headerName: '基准阀值',
|
||
children: [
|
||
{
|
||
field: 'lowValue',
|
||
headerName: '低值',
|
||
type: 'numericColumn',
|
||
minWidth: 78,
|
||
valueFormatter,
|
||
},
|
||
{
|
||
field: 'centerValue',
|
||
headerName: '中心值',
|
||
type: 'numericColumn',
|
||
minWidth: 78,
|
||
valueFormatter,
|
||
},
|
||
{
|
||
field: 'highValue',
|
||
headerName: '高值',
|
||
type: 'numericColumn',
|
||
minWidth: 78,
|
||
valueFormatter,
|
||
},
|
||
],
|
||
},
|
||
{
|
||
headerName: '样本统计值（括号显示样本数量）',
|
||
children: [
|
||
{
|
||
field: 'maxValue',
|
||
headerName: '最大值',
|
||
type: 'numericColumn',
|
||
minWidth: 78,
|
||
valueFormatter,
|
||
},
|
||
{
|
||
field: 'minValue',
|
||
headerName: '最小值',
|
||
type: 'numericColumn',
|
||
minWidth: 78,
|
||
valueFormatter,
|
||
},
|
||
{
|
||
field: 'avgValue',
|
||
headerName: '平均值',
|
||
type: 'numericColumn',
|
||
minWidth: 78,
|
||
valueFormatter,
|
||
},
|
||
{
|
||
field: 'medianValue',
|
||
headerName: '中位数',
|
||
type: 'numericColumn',
|
||
minWidth: 78,
|
||
valueFormatter,
|
||
},
|
||
{
|
||
field: 'standardDeviation',
|
||
headerName: '标准差',
|
||
type: 'numericColumn',
|
||
minWidth: 78,
|
||
valueFormatter,
|
||
},
|
||
{
|
||
field: 'interquartileRange',
|
||
headerName: '四分位距',
|
||
type: 'numericColumn',
|
||
minWidth: 88,
|
||
valueFormatter,
|
||
},
|
||
{
|
||
field: 'coefficientOfVariation',
|
||
headerName: '变异系数',
|
||
type: 'numericColumn',
|
||
minWidth: 88,
|
||
valueFormatter: ({ value }: ValueFormatterParams<PivotGridRow, number | null>) => (
|
||
value == null ? '' : formatNumber(Number(value), 4)
|
||
),
|
||
},
|
||
],
|
||
},
|
||
];
|
||
},
|
||
[requestMetricKey],
|
||
);
|
||
const selectedNodeKeys = useMemo(
|
||
() => new Set(selectedContentNodes.map((node) => getSelectionKey(node.contentKey, node.id))),
|
||
[selectedContentNodes],
|
||
);
|
||
const draftFilterNodeKeys = useMemo(
|
||
() => new Set(draftFilterNodes.map((node) => getFilterSelectionKey(node.filterKey, node.id))),
|
||
[draftFilterNodes],
|
||
);
|
||
const appliedFilterPayload = useMemo(
|
||
() => filterOptions
|
||
.map((option) => ({
|
||
key: option.key,
|
||
nodes: appliedFilters[option.key].map((node) => ({ nodeId: node.id })),
|
||
}))
|
||
.filter((filter) => filter.nodes.length > 0),
|
||
[appliedFilters],
|
||
);
|
||
|
||
const getNodeColor = (contentKey: ContentKey, nodeId: string) => {
|
||
let hash = 0;
|
||
const key = getSelectionKey(contentKey, nodeId);
|
||
for (let index = 0; index < key.length; index += 1) {
|
||
hash = (hash * 31 + key.charCodeAt(index)) % chartLineColors.length;
|
||
}
|
||
return chartLineColors[hash];
|
||
};
|
||
|
||
const fetchContentTree = async (contentKey: ContentKey, nodeId?: string, signal?: AbortSignal) => {
|
||
const config = contentTreeConfigs[contentKey];
|
||
if (!config) {
|
||
throw new Error('接口待接入');
|
||
}
|
||
const treeParams = {
|
||
...browserTreeDefaults,
|
||
treeid: config.treeid,
|
||
cube_treeid: config.treeid,
|
||
fieldid: config.fieldid,
|
||
};
|
||
const params = nodeId
|
||
? {
|
||
...treeParams,
|
||
type: '2',
|
||
id: nodeId,
|
||
isVirtual: '',
|
||
}
|
||
: {
|
||
...treeParams,
|
||
pageSize: '10',
|
||
current: '1',
|
||
min: '1',
|
||
max: '10',
|
||
};
|
||
const response = await fetch(`${config.endpoint}?${buildQuery(params)}`, {
|
||
credentials: 'include',
|
||
signal,
|
||
headers: {
|
||
'X-Requested-With': 'XMLHttpRequest',
|
||
},
|
||
});
|
||
if (!response.ok) {
|
||
throw new Error(`HTTP ${response.status}`);
|
||
}
|
||
const rows = pickArray(await response.json());
|
||
return normalizeTreeRows(rows);
|
||
};
|
||
|
||
const normalizeBackendTree = (nodes: TreeNode[]): TreeNode[] => nodes.map((node) => ({
|
||
...node,
|
||
hasChildren: node.children.length > 0 || node.hasChildren,
|
||
expanded: node.children.length > 0,
|
||
loaded: true,
|
||
children: normalizeBackendTree(node.children),
|
||
}));
|
||
|
||
const getTreeNodePrefix = (nodes: TreeNode[]) => {
|
||
const stack = [...nodes];
|
||
while (stack.length) {
|
||
const node = stack.shift();
|
||
if (!node) {
|
||
continue;
|
||
}
|
||
const matched = node.id.match(/^(.*_)\d+$/);
|
||
if (matched) {
|
||
return matched[1];
|
||
}
|
||
stack.push(...node.children);
|
||
}
|
||
return '';
|
||
};
|
||
|
||
const fetchRegionFilterTree = async (signal?: AbortSignal) => {
|
||
const response = await fetch(`${API_BASE_URL}/zw/getBuildingFunctionCostFilterTree?${buildQuery({ key: 'region' })}`, {
|
||
signal,
|
||
headers: {
|
||
'X-Requested-With': 'XMLHttpRequest',
|
||
},
|
||
});
|
||
if (!response.ok) {
|
||
throw new Error(`HTTP ${response.status}`);
|
||
}
|
||
const rows = pickArray(await response.json());
|
||
const flatRegionTree = normalizeFlatRegionRows(rows);
|
||
return flatRegionTree.length > 0 ? flatRegionTree : normalizeBackendTree(normalizeTreeRows(rows));
|
||
};
|
||
|
||
const fetchTemplateLibraryTree = async (signal?: AbortSignal) => {
|
||
const response = await fetch(`${API_BASE_URL}/zw/getBuildingFunctionCostFilterTree?${buildQuery({ key: 'templateLibrary' })}`, {
|
||
signal,
|
||
headers: {
|
||
'X-Requested-With': 'XMLHttpRequest',
|
||
},
|
||
});
|
||
if (!response.ok) {
|
||
throw new Error(`HTTP ${response.status}`);
|
||
}
|
||
const rows = pickArray(await response.json());
|
||
const templateRows = normalizeFlatTemplateLibraryRows(rows);
|
||
return templateRows.length > 0 ? templateRows : normalizeBackendTree(normalizeTreeRows(rows));
|
||
};
|
||
|
||
const fetchIndicatorTree = async (signal?: AbortSignal) => {
|
||
const response = await fetch(`${API_BASE_URL}/zw/getBuildingFunctionCostFilterTree?${buildQuery({ key: 'indicatorTree', templateId: selectedTemplateId })}`, {
|
||
signal,
|
||
headers: {
|
||
'X-Requested-With': 'XMLHttpRequest',
|
||
},
|
||
});
|
||
if (!response.ok) {
|
||
throw new Error(`HTTP ${response.status}`);
|
||
}
|
||
const rows = pickArray(await response.json());
|
||
const indicatorRows = normalizeFlatIndicatorRows(rows);
|
||
return indicatorRows.length > 0 ? indicatorRows : normalizeBackendTree(normalizeTreeRows(rows));
|
||
};
|
||
|
||
const fetchBackendFilterTreeSearch = async (filterKey: FilterKey, keyword: string, signal?: AbortSignal) => {
|
||
const response = await fetch(`${API_BASE_URL}/zw/getBuildingFunctionCostFilterTreeSearch?${buildQuery({
|
||
key: filterKey,
|
||
keyword,
|
||
nodePrefix: isContentFilterKey(filterKey) ? getTreeNodePrefix(filterTreeByKey[filterKey]) : '',
|
||
})}`, {
|
||
signal,
|
||
headers: {
|
||
'X-Requested-With': 'XMLHttpRequest',
|
||
},
|
||
});
|
||
if (!response.ok) {
|
||
const errorText = await response.text().catch(() => '');
|
||
throw new Error(`搜索接口请求失败：HTTP ${response.status}${errorText ? ` ${errorText.slice(0, 160)}` : ''}`);
|
||
}
|
||
return normalizeBackendTree(normalizeTreeRows(pickArray(await response.json())));
|
||
};
|
||
|
||
const loadContentTreeWithDefaultExpansion = async (contentKey: ContentKey) => {
|
||
const defaultExpandedLevel = contentTreeConfigs[contentKey]?.defaultExpandedLevel ?? 0;
|
||
const loadChildren = async (nodes: TreeNode[], level: number): Promise<TreeNode[]> => {
|
||
if (level > defaultExpandedLevel) return nodes;
|
||
|
||
return Promise.all(
|
||
nodes.map(async (node) => {
|
||
if (!node.hasChildren) return node;
|
||
|
||
const children = node.loaded ? node.children : await fetchContentTree(contentKey, node.id);
|
||
return {
|
||
...node,
|
||
children: await loadChildren(children, level + 1),
|
||
expanded: true,
|
||
loading: false,
|
||
loaded: true,
|
||
hasChildren: node.hasChildren || children.length > 0,
|
||
};
|
||
}),
|
||
);
|
||
};
|
||
|
||
return loadChildren(await fetchContentTree(contentKey), 1);
|
||
};
|
||
|
||
const loadFilterTree = async (filterKey: FilterKey, keyword?: string, signal?: AbortSignal) => {
|
||
if (filterKey === 'region') {
|
||
const nodes = await fetchRegionFilterTree(signal);
|
||
return keyword?.trim() ? filterTreeNodesByKeyword(nodes, keyword) : nodes;
|
||
}
|
||
if (isTemplateFilterKey(filterKey)) {
|
||
const nodes = await fetchTemplateLibraryTree(signal);
|
||
return keyword?.trim() ? filterTreeNodesByKeyword(nodes, keyword) : nodes;
|
||
}
|
||
if (filterKey === 'indicatorTree') {
|
||
const nodes = await fetchIndicatorTree(signal);
|
||
return keyword?.trim() ? filterTreeNodesByKeyword(nodes, keyword) : nodes;
|
||
}
|
||
if (keyword?.trim() && isContentFilterKey(filterKey)) {
|
||
return fetchBackendFilterTreeSearch(filterKey, keyword, signal);
|
||
}
|
||
if (isContentFilterKey(filterKey)) {
|
||
return loadContentTreeWithDefaultExpansion(filterKey);
|
||
}
|
||
return [];
|
||
};
|
||
|
||
const toggleContentNode = (nodeId: string) => {
|
||
if (!contentTreeConfigs[activeContentKey]) return;
|
||
const target = activeTree.find((node) => node.id === nodeId);
|
||
const visit = (nodes: TreeNode[]): TreeNode | null => {
|
||
for (const node of nodes) {
|
||
if (node.id === nodeId) return node;
|
||
const matched = visit(node.children);
|
||
if (matched) return matched;
|
||
}
|
||
return null;
|
||
};
|
||
const node = target ?? visit(activeTree);
|
||
if (!node?.hasChildren) return;
|
||
|
||
setTreeByContent((current) => ({
|
||
...current,
|
||
[activeContentKey]: updateNode(current[activeContentKey], nodeId, (node) => ({
|
||
...node,
|
||
expanded: node.loaded ? !node.expanded : node.expanded,
|
||
loading: node.loaded ? node.loading : true,
|
||
})),
|
||
}));
|
||
|
||
if (node.loaded) return;
|
||
|
||
const currentContentKey = activeContentKey;
|
||
fetchContentTree(currentContentKey, nodeId)
|
||
.then((children) => {
|
||
setTreeByContent((current) => ({
|
||
...current,
|
||
[currentContentKey]: updateNode(current[currentContentKey], nodeId, (currentNode) => ({
|
||
...currentNode,
|
||
children,
|
||
expanded: true,
|
||
loading: false,
|
||
loaded: true,
|
||
hasChildren: currentNode.hasChildren || children.length > 0,
|
||
})),
|
||
}));
|
||
})
|
||
.catch((error) => {
|
||
setTreeByContent((current) => ({
|
||
...current,
|
||
[currentContentKey]: updateNode(current[currentContentKey], nodeId, (currentNode) => ({
|
||
...currentNode,
|
||
loading: false,
|
||
})),
|
||
}));
|
||
setTreeErrorByContent((current) => ({
|
||
...current,
|
||
[currentContentKey]: error instanceof Error ? error.message : '加载失败',
|
||
}));
|
||
});
|
||
};
|
||
|
||
const toggleSelectedContentNode = (node: TreeNode) => {
|
||
const contentKey = activeContentKey;
|
||
setSelectedContentNodes((current) => {
|
||
const selectionKey = getSelectionKey(contentKey, node.id);
|
||
const existingIndex = current.findIndex((item) => getSelectionKey(item.contentKey, item.id) === selectionKey);
|
||
if (existingIndex >= 0) {
|
||
setChartDataBySelection((data) => {
|
||
const { [selectionKey]: _removed, ...rest } = data;
|
||
return rest;
|
||
});
|
||
setChartSummaryBySelection((data) => {
|
||
const { [selectionKey]: _removed, ...rest } = data;
|
||
return rest;
|
||
});
|
||
return current.filter((_, index) => index !== existingIndex);
|
||
}
|
||
|
||
const color = getNodeColor(contentKey, node.id);
|
||
return [...current, { id: node.id, contentKey, label: node.label, color }];
|
||
});
|
||
};
|
||
|
||
const handleActiveContentKeyChange = (nextContentKey: ContentKey) => {
|
||
if (nextContentKey === activeContentKey) return;
|
||
setActiveContentKey(nextContentKey);
|
||
setSelectedContentNodes([]);
|
||
setChartDataBySelection({});
|
||
setChartSummaryBySelection({});
|
||
setLoadError(null);
|
||
setLoadingHint('');
|
||
setLoading(false);
|
||
};
|
||
|
||
const resetIndicatorTreeState = () => {
|
||
filterTreeInitialLoadStartedRef.current.indicatorTree = false;
|
||
filterSearchRequestSeqRef.current.indicatorTree += 1;
|
||
setFilterTreeByKey((current) => ({ ...current, indicatorTree: [] }));
|
||
setFilterTreeLoadingByKey((current) => ({ ...current, indicatorTree: false }));
|
||
setFilterTreeErrorByKey((current) => ({ ...current, indicatorTree: null }));
|
||
setFilterSearchTreeByKey((current) => ({ ...current, indicatorTree: [] }));
|
||
setFilterSearchLoadingByKey((current) => ({ ...current, indicatorTree: false }));
|
||
setFilterSearchErrorByKey((current) => ({ ...current, indicatorTree: null }));
|
||
};
|
||
|
||
const ensureFilterTreeLoaded = (filterKey: FilterKey) => {
|
||
if (filterTreeByKey[filterKey].length > 0 || filterTreeInitialLoadStartedRef.current[filterKey]) return;
|
||
|
||
filterTreeInitialLoadStartedRef.current[filterKey] = true;
|
||
setFilterTreeLoadingByKey((current) => ({ ...current, [filterKey]: true }));
|
||
setFilterTreeErrorByKey((current) => ({ ...current, [filterKey]: null }));
|
||
loadFilterTree(filterKey)
|
||
.then((nodes) => {
|
||
setFilterTreeByKey((current) => ({ ...current, [filterKey]: nodes }));
|
||
})
|
||
.catch((error) => {
|
||
filterTreeInitialLoadStartedRef.current[filterKey] = false;
|
||
setFilterTreeErrorByKey((current) => ({
|
||
...current,
|
||
[filterKey]: error instanceof Error ? error.message : '加载失败',
|
||
}));
|
||
})
|
||
.finally(() => {
|
||
setFilterTreeLoadingByKey((current) => ({ ...current, [filterKey]: false }));
|
||
});
|
||
};
|
||
|
||
const openFilterModal = (filterKey: FilterKey) => {
|
||
setFilterModalKey(filterKey);
|
||
if (isIndicatorTreeFilterKey(filterKey) && appliedFilters[filterKey].length === 0 && defaultIndicatorTreeNodes.length > 0) {
|
||
setDraftFilterNodes(defaultIndicatorTreeNodes);
|
||
} else {
|
||
setDraftFilterNodes(appliedFilters[filterKey]);
|
||
}
|
||
setFilterSearchValue('');
|
||
lastFilterSearchRef.current = '';
|
||
if (filterSearchTimerRef.current != null) {
|
||
window.clearTimeout(filterSearchTimerRef.current);
|
||
filterSearchTimerRef.current = null;
|
||
}
|
||
ensureFilterTreeLoaded(filterKey);
|
||
};
|
||
|
||
useEffect(() => {
|
||
ensureFilterTreeLoaded('indicatorTree');
|
||
}, [selectedTemplateId]);
|
||
|
||
const closeFilterModal = () => {
|
||
if (filterModalKey) {
|
||
filterSearchRequestSeqRef.current[filterModalKey] += 1;
|
||
}
|
||
if (filterSearchTimerRef.current != null) {
|
||
window.clearTimeout(filterSearchTimerRef.current);
|
||
filterSearchTimerRef.current = null;
|
||
}
|
||
lastFilterSearchRef.current = '';
|
||
setFilterModalKey(null);
|
||
setDraftFilterNodes([]);
|
||
setFilterSearchValue('');
|
||
};
|
||
|
||
const scheduleFilterSearch = (filterKey: FilterKey, rawKeyword: string) => {
|
||
if (filterSearchTimerRef.current != null) {
|
||
window.clearTimeout(filterSearchTimerRef.current);
|
||
filterSearchTimerRef.current = null;
|
||
}
|
||
|
||
const keyword = rawKeyword.trim();
|
||
const searchKey = `${filterKey}:${keyword}`;
|
||
if (keyword && lastFilterSearchRef.current === searchKey) {
|
||
return;
|
||
}
|
||
lastFilterSearchRef.current = searchKey;
|
||
filterSearchRequestSeqRef.current[filterKey] += 1;
|
||
const requestSeq = filterSearchRequestSeqRef.current[filterKey];
|
||
|
||
if (!keyword) {
|
||
setFilterSearchTreeByKey((current) => ({ ...current, [filterKey]: [] }));
|
||
setFilterSearchErrorByKey((current) => ({ ...current, [filterKey]: null }));
|
||
setFilterSearchLoadingByKey((current) => ({ ...current, [filterKey]: false }));
|
||
return;
|
||
}
|
||
|
||
if (isTemplateFilterKey(filterKey) || filterKey === 'indicatorTree') {
|
||
filterSearchTimerRef.current = window.setTimeout(() => {
|
||
setFilterSearchLoadingByKey((current) => ({ ...current, [filterKey]: true }));
|
||
setFilterSearchErrorByKey((current) => ({ ...current, [filterKey]: null }));
|
||
setFilterSearchTreeByKey((current) => ({
|
||
...current,
|
||
[filterKey]: filterTreeNodesByKeyword(filterTreeByKey[filterKey], keyword),
|
||
}));
|
||
setFilterSearchLoadingByKey((current) => ({ ...current, [filterKey]: false }));
|
||
}, 300);
|
||
return;
|
||
}
|
||
|
||
filterSearchTimerRef.current = window.setTimeout(() => {
|
||
setFilterSearchLoadingByKey((current) => ({ ...current, [filterKey]: true }));
|
||
setFilterSearchErrorByKey((current) => ({ ...current, [filterKey]: null }));
|
||
void loadFilterTree(filterKey, keyword)
|
||
.then((nodes) => {
|
||
if (filterSearchRequestSeqRef.current[filterKey] !== requestSeq) return;
|
||
setFilterSearchTreeByKey((current) => ({ ...current, [filterKey]: nodes }));
|
||
})
|
||
.catch((error) => {
|
||
if (filterSearchRequestSeqRef.current[filterKey] !== requestSeq) return;
|
||
setFilterSearchErrorByKey((current) => ({
|
||
...current,
|
||
[filterKey]: error instanceof Error ? error.message : '加载失败',
|
||
}));
|
||
})
|
||
.finally(() => {
|
||
if (filterSearchRequestSeqRef.current[filterKey] !== requestSeq) return;
|
||
setFilterSearchLoadingByKey((current) => ({ ...current, [filterKey]: false }));
|
||
});
|
||
}, 500);
|
||
};
|
||
|
||
const toggleFilterTreeNode = (nodeId: string) => {
|
||
if (!filterModalKey) return;
|
||
const visit = (nodes: TreeNode[]): TreeNode | null => {
|
||
for (const node of nodes) {
|
||
if (node.id === nodeId) return node;
|
||
const matched = visit(node.children);
|
||
if (matched) return matched;
|
||
}
|
||
return null;
|
||
};
|
||
const node = visit(filterTreeByKey[filterModalKey]);
|
||
if (!node?.hasChildren) return;
|
||
|
||
setFilterTreeByKey((current) => ({
|
||
...current,
|
||
[filterModalKey]: updateNode(current[filterModalKey], nodeId, (currentNode) => ({
|
||
...currentNode,
|
||
expanded: currentNode.loaded ? !currentNode.expanded : currentNode.expanded,
|
||
loading: currentNode.loaded ? currentNode.loading : true,
|
||
})),
|
||
}));
|
||
|
||
if (node.loaded || !isContentFilterKey(filterModalKey)) return;
|
||
|
||
const currentFilterKey = filterModalKey;
|
||
fetchContentTree(currentFilterKey, nodeId)
|
||
.then((children) => {
|
||
setFilterTreeByKey((current) => ({
|
||
...current,
|
||
[currentFilterKey]: updateNode(current[currentFilterKey], nodeId, (currentNode) => ({
|
||
...currentNode,
|
||
children,
|
||
expanded: true,
|
||
loading: false,
|
||
loaded: true,
|
||
hasChildren: currentNode.hasChildren || children.length > 0,
|
||
})),
|
||
}));
|
||
})
|
||
.catch((error) => {
|
||
setFilterTreeByKey((current) => ({
|
||
...current,
|
||
[currentFilterKey]: updateNode(current[currentFilterKey], nodeId, (currentNode) => ({
|
||
...currentNode,
|
||
loading: false,
|
||
})),
|
||
}));
|
||
setFilterTreeErrorByKey((current) => ({
|
||
...current,
|
||
[currentFilterKey]: error instanceof Error ? error.message : '加载失败',
|
||
}));
|
||
});
|
||
};
|
||
|
||
const toggleDraftFilterNode = (node: TreeNode) => {
|
||
if (!filterModalKey) return;
|
||
const currentFilterKey = filterModalKey;
|
||
setDraftFilterNodes((current) => {
|
||
const selectionKey = getFilterSelectionKey(currentFilterKey, node.id);
|
||
const exists = current.some((item) => getFilterSelectionKey(item.filterKey, item.id) === selectionKey);
|
||
if (isSingleSelectFilterKey(currentFilterKey)) {
|
||
if (exists) {
|
||
return current;
|
||
}
|
||
return [{ id: node.id, filterKey: currentFilterKey, label: node.label }];
|
||
}
|
||
if (exists) {
|
||
return current.filter((item) => getFilterSelectionKey(item.filterKey, item.id) !== selectionKey);
|
||
}
|
||
return [...current, { id: node.id, filterKey: currentFilterKey, label: node.label }];
|
||
});
|
||
};
|
||
|
||
const applyFilterModal = () => {
|
||
if (!filterModalKey) return;
|
||
let nextDraftNodes = draftFilterNodes;
|
||
if (isTemplateFilterKey(filterModalKey) && nextDraftNodes.length === 0) {
|
||
nextDraftNodes = getDefaultTemplateFilterNodes();
|
||
}
|
||
if (isIndicatorTreeFilterKey(filterModalKey)) {
|
||
if (nextDraftNodes.length === 0) {
|
||
nextDraftNodes = defaultIndicatorTreeNodes;
|
||
}
|
||
if (isDefaultIndicatorTreeSelection(nextDraftNodes, filterTreeByKey.indicatorTree)) {
|
||
nextDraftNodes = [];
|
||
}
|
||
}
|
||
const shouldReloadIndicatorTree = isTemplateFilterKey(filterModalKey) && !isSameFilterSelection(appliedFilters.templateLibrary, nextDraftNodes);
|
||
setAppliedFilters((current) => {
|
||
const nextFilters = {
|
||
...current,
|
||
[filterModalKey]: nextDraftNodes,
|
||
};
|
||
if (shouldReloadIndicatorTree) {
|
||
nextFilters.indicatorTree = [];
|
||
}
|
||
return nextFilters;
|
||
});
|
||
if (shouldReloadIndicatorTree) {
|
||
resetIndicatorTreeState();
|
||
}
|
||
setChartDataBySelection({});
|
||
setChartSummaryBySelection({});
|
||
setLoadError(null);
|
||
if (selectedContentNodes.length > 0) {
|
||
setLoadingHint('正在按筛选条件重新计算');
|
||
setLoading(true);
|
||
}
|
||
setChartQueryVersion((version) => version + 1);
|
||
closeFilterModal();
|
||
};
|
||
|
||
const clearFilter = (filterKey: FilterKey) => {
|
||
const nextNodes = isTemplateFilterKey(filterKey)
|
||
? getDefaultTemplateFilterNodes()
|
||
: isIndicatorTreeFilterKey(filterKey)
|
||
? defaultIndicatorTreeNodes
|
||
: [];
|
||
if (isSameFilterSelection(appliedFilters[filterKey], nextNodes)) {
|
||
return;
|
||
}
|
||
setAppliedFilters((current) => {
|
||
const nextFilters = {
|
||
...current,
|
||
[filterKey]: nextNodes,
|
||
};
|
||
if (isTemplateFilterKey(filterKey)) {
|
||
nextFilters.indicatorTree = [];
|
||
}
|
||
return nextFilters;
|
||
});
|
||
if (isTemplateFilterKey(filterKey)) {
|
||
resetIndicatorTreeState();
|
||
}
|
||
setChartDataBySelection({});
|
||
setChartSummaryBySelection({});
|
||
setLoadError(null);
|
||
if (selectedContentNodes.length > 0) {
|
||
setLoadingHint('正在按筛选条件重新计算');
|
||
setLoading(true);
|
||
}
|
||
setChartQueryVersion((version) => version + 1);
|
||
};
|
||
|
||
const updateMetricKey = (nextMetricKey: MetricKey) => {
|
||
setMetricKey(nextMetricKey);
|
||
setChartDataBySelection({});
|
||
setChartSummaryBySelection({});
|
||
setLoadError(null);
|
||
setLoadingHint('正在重新加载数据');
|
||
setLoading(true);
|
||
setChartQueryVersion((version) => version + 1);
|
||
};
|
||
|
||
const togglePivotView = useCallback(() => {
|
||
setChartViewKey((current) => (current === 'trend' ? 'pivot' : 'trend'));
|
||
setMetricMenuOpen(false);
|
||
setStatisticMenuOpen(false);
|
||
}, []);
|
||
|
||
const toggleWorkspaceFullscreen = useCallback(() => {
|
||
const fullscreenTarget = workspaceRef.current;
|
||
if (!fullscreenTarget) return;
|
||
if (document.fullscreenElement === fullscreenTarget) {
|
||
void document.exitFullscreen();
|
||
} else {
|
||
void fullscreenTarget.requestFullscreen();
|
||
}
|
||
}, []);
|
||
|
||
const openGridFilterModal = (filterKey: 'templateLibrary' | 'indicatorTree') => {
|
||
setMetricMenuOpen(false);
|
||
setStatisticMenuOpen(false);
|
||
openFilterModal(filterKey);
|
||
};
|
||
|
||
useEffect(() => {
|
||
const handleFullscreenChange = () => {
|
||
setWorkspaceFullscreen(document.fullscreenElement === workspaceRef.current);
|
||
};
|
||
handleFullscreenChange();
|
||
document.addEventListener('fullscreenchange', handleFullscreenChange);
|
||
return () => {
|
||
document.removeEventListener('fullscreenchange', handleFullscreenChange);
|
||
};
|
||
}, []);
|
||
|
||
useEffect(() => {
|
||
if (!contentTreeConfigs[activeContentKey]) return;
|
||
if (treeByContent[activeContentKey].length > 0 || treeInitialLoadStartedRef.current[activeContentKey]) return;
|
||
|
||
const currentContentKey = activeContentKey;
|
||
treeInitialLoadStartedRef.current[currentContentKey] = true;
|
||
setTreeLoadingByContent((current) => ({ ...current, [currentContentKey]: true }));
|
||
setTreeErrorByContent((current) => ({ ...current, [currentContentKey]: null }));
|
||
|
||
loadContentTreeWithDefaultExpansion(currentContentKey)
|
||
.then((nodes) => {
|
||
setTreeByContent((current) => ({ ...current, [currentContentKey]: nodes }));
|
||
})
|
||
.catch((error) => {
|
||
treeInitialLoadStartedRef.current[currentContentKey] = false;
|
||
setTreeErrorByContent((current) => ({
|
||
...current,
|
||
[currentContentKey]: error instanceof Error ? error.message : '加载失败',
|
||
}));
|
||
})
|
||
.finally(() => {
|
||
setTreeLoadingByContent((current) => ({ ...current, [currentContentKey]: false }));
|
||
});
|
||
}, [activeContentKey, treeByContent]);
|
||
|
||
useEffect(() => {
|
||
if (filterModalKey !== 'indicatorTree') return;
|
||
if (draftFilterNodes.length > 0) return;
|
||
if (defaultIndicatorTreeNodes.length === 0) return;
|
||
setDraftFilterNodes(defaultIndicatorTreeNodes);
|
||
}, [defaultIndicatorTreeNodes, draftFilterNodes.length, filterModalKey]);
|
||
|
||
useEffect(() => {
|
||
const controller = new AbortController();
|
||
|
||
async function loadStats() {
|
||
if (selectedContentNodes.length === 0) {
|
||
setChartDataBySelection({});
|
||
}
|
||
|
||
setLoading(true);
|
||
setLoadingHint('正在加载数据');
|
||
setLoadError(null);
|
||
try {
|
||
const hasAnyMissingNode = selectedContentNodes.some((node) => !chartDataBySelection[getSelectionKey(node.contentKey, node.id)]);
|
||
if (selectedContentNodes.length > 0 && !hasAnyMissingNode && chartSummaryBySelection[overallSummaryKey]) {
|
||
setLoading(false);
|
||
setLoadingHint('');
|
||
return;
|
||
}
|
||
|
||
const response = await fetch(`${API_BASE_URL}/zw/getBuildingFunctionCostStatsBatch`, {
|
||
method: 'POST',
|
||
signal: controller.signal,
|
||
headers: {
|
||
'Content-Type': 'application/json',
|
||
},
|
||
body: JSON.stringify({
|
||
groupBy: 'year',
|
||
metric: requestMetricKey,
|
||
templateId: selectedTemplateId,
|
||
filters: appliedFilterPayload,
|
||
nodes: selectedContentNodes.map((node) => ({
|
||
key: getSelectionKey(node.contentKey, node.id),
|
||
contentKey: node.contentKey,
|
||
nodeId: node.id,
|
||
})),
|
||
}),
|
||
});
|
||
if (!response.ok) {
|
||
throw new Error(`HTTP ${response.status}`);
|
||
}
|
||
const payload = (await response.json()) as { data?: ApiBuildingFunctionStatBatchItem[] };
|
||
const results = (payload.data ?? [])
|
||
.filter((item) => item.key)
|
||
.map((item) => [item.key as string, (item.data ?? []).map(normalizeStat).slice(0, 36)] as const);
|
||
const summaries = (payload.data ?? [])
|
||
.filter((item) => item.key && item.summary)
|
||
.map((item) => [item.key as string, normalizeStat(item.summary as ApiBuildingFunctionStat)] as const);
|
||
const overallSummary = (payload.data ?? []).find((item) => item.summary)?.summary;
|
||
setChartDataBySelection((current) => ({
|
||
...current,
|
||
...Object.fromEntries(results),
|
||
}));
|
||
setChartSummaryBySelection((current) => ({
|
||
...current,
|
||
...Object.fromEntries(summaries),
|
||
...(overallSummary ? { [overallSummaryKey]: normalizeStat(overallSummary) } : {}),
|
||
}));
|
||
} catch (error) {
|
||
if (controller.signal.aborted) return;
|
||
setLoadError(error instanceof Error ? error.message : '接口请求失败');
|
||
} finally {
|
||
if (!controller.signal.aborted) {
|
||
setLoading(false);
|
||
setLoadingHint('');
|
||
}
|
||
}
|
||
}
|
||
|
||
void loadStats();
|
||
|
||
return () => {
|
||
controller.abort();
|
||
};
|
||
}, [appliedFilterPayload, chartQueryVersion, metricKey, requestMetricKey, selectedContentNodes, selectedTemplateId]);
|
||
|
||
useEffect(() => {
|
||
const frame = chartFrameRef.current;
|
||
const fullscreenTarget = workspaceRef.current;
|
||
if (!frame || !fullscreenTarget) return;
|
||
|
||
const getTemplateButton = () => frame.querySelector<HTMLElement>('.ag-charts-myButton-template')?.closest<HTMLButtonElement>('.ag-charts-toolbar__button');
|
||
const getIndicatorButton = () => frame.querySelector<HTMLElement>('.ag-charts-myButton-indicator')?.closest<HTMLButtonElement>('.ag-charts-toolbar__button');
|
||
const getFullscreenButton = () => frame.querySelector<HTMLElement>('.ag-charts-myButton-fullScreen')?.closest<HTMLButtonElement>('.ag-charts-toolbar__button');
|
||
const getStatisticButton = () => frame.querySelector<HTMLElement>('.ag-charts-myButton-statistic')?.closest<HTMLButtonElement>('.ag-charts-toolbar__button');
|
||
const getPivotButton = () => frame.querySelector<HTMLElement>('.ag-charts-myButton-pivot')?.closest<HTMLButtonElement>('.ag-charts-toolbar__button');
|
||
const setButtonAttribute = (button: HTMLButtonElement, name: string, value: string) => {
|
||
if (button.getAttribute(name) !== value) {
|
||
button.setAttribute(name, value);
|
||
}
|
||
};
|
||
const enableCustomToolbarButton = (button: HTMLButtonElement) => {
|
||
if (button.disabled) {
|
||
button.disabled = false;
|
||
}
|
||
if (button.hasAttribute('disabled')) {
|
||
button.removeAttribute('disabled');
|
||
}
|
||
setButtonAttribute(button, 'aria-disabled', 'false');
|
||
};
|
||
const syncToolbarButtons = () => {
|
||
const templateButton = getTemplateButton();
|
||
if (templateButton) {
|
||
templateButton.classList.add('chart-template-button');
|
||
enableCustomToolbarButton(templateButton);
|
||
setButtonAttribute(templateButton, 'aria-expanded', String(filterModalKey === 'templateLibrary'));
|
||
}
|
||
|
||
const indicatorButton = getIndicatorButton();
|
||
if (indicatorButton) {
|
||
indicatorButton.classList.add('chart-indicator-button');
|
||
enableCustomToolbarButton(indicatorButton);
|
||
setButtonAttribute(indicatorButton, 'aria-expanded', String(filterModalKey === 'indicatorTree'));
|
||
setButtonAttribute(indicatorButton, 'title', '指标树形');
|
||
}
|
||
|
||
const button = getFullscreenButton();
|
||
if (button) {
|
||
let icon = button.querySelector<HTMLElement>('.ag-charts-myButton-fullScreen');
|
||
if (!icon) {
|
||
button.innerHTML = '<i class="anticon anticon-arrow-salt ag-charts-myButton-fullScreen ag-charts-diy-button"></i>';
|
||
icon = button.querySelector<HTMLElement>('.ag-charts-myButton-fullScreen');
|
||
}
|
||
|
||
const isFullscreen = document.fullscreenElement === fullscreenTarget;
|
||
button.classList.add('chart-fullscreen-button');
|
||
button.classList.toggle('ag-charts-toolbar__button--active', isFullscreen);
|
||
enableCustomToolbarButton(button);
|
||
setButtonAttribute(button, 'aria-pressed', String(isFullscreen));
|
||
icon?.classList.toggle('anticon-arrow-salt', !isFullscreen);
|
||
icon?.classList.toggle('anticon-shrink', isFullscreen);
|
||
}
|
||
|
||
const statisticButton = getStatisticButton();
|
||
if (statisticButton) {
|
||
statisticButton.classList.add('chart-statistic-button');
|
||
enableCustomToolbarButton(statisticButton);
|
||
setButtonAttribute(statisticButton, 'aria-expanded', String(statisticMenuOpen));
|
||
}
|
||
|
||
const pivotButton = getPivotButton();
|
||
if (pivotButton) {
|
||
pivotButton.classList.add('chart-pivot-button');
|
||
pivotButton.classList.toggle('ag-charts-toolbar__button--active', chartViewKey === 'pivot');
|
||
enableCustomToolbarButton(pivotButton);
|
||
setButtonAttribute(pivotButton, 'aria-pressed', String(chartViewKey === 'pivot'));
|
||
setButtonAttribute(pivotButton, 'aria-label', pivotToggleActionLabel);
|
||
setButtonAttribute(pivotButton, 'title', pivotToggleTitle);
|
||
}
|
||
};
|
||
|
||
const handleKeyDown = (event: KeyboardEvent) => {
|
||
if (event.key !== 'F11') return;
|
||
|
||
event.preventDefault();
|
||
event.stopPropagation();
|
||
toggleWorkspaceFullscreen();
|
||
};
|
||
|
||
const handleFullscreenChange = () => {
|
||
syncToolbarButtons();
|
||
};
|
||
|
||
const handleToolbarAction = (button: HTMLButtonElement) => {
|
||
if (button.classList.contains('chart-template-button')) {
|
||
setMetricMenuOpen(false);
|
||
setStatisticMenuOpen(false);
|
||
openFilterModal('templateLibrary');
|
||
} else if (button.classList.contains('chart-indicator-button')) {
|
||
setMetricMenuOpen(false);
|
||
setStatisticMenuOpen(false);
|
||
openFilterModal('indicatorTree');
|
||
} else if (button.classList.contains('chart-statistic-button')) {
|
||
setMetricMenuOpen(false);
|
||
setStatisticMenuOpen((open) => !open);
|
||
} else if (button.classList.contains('chart-pivot-button')) {
|
||
togglePivotView();
|
||
} else {
|
||
toggleWorkspaceFullscreen();
|
||
}
|
||
};
|
||
|
||
const handleToolbarClick = (event: MouseEvent) => {
|
||
const target = event.target as Element | null;
|
||
const button = target?.closest<HTMLButtonElement>(
|
||
'.chart-template-button, .chart-indicator-button, .chart-fullscreen-button, .chart-statistic-button, .chart-pivot-button',
|
||
);
|
||
if (!button || !frame.contains(button)) return;
|
||
|
||
event.preventDefault();
|
||
event.stopPropagation();
|
||
event.stopImmediatePropagation();
|
||
handleToolbarAction(button);
|
||
};
|
||
|
||
const handleToolbarKeyDown = (event: KeyboardEvent) => {
|
||
if (event.key !== ' ' && event.key !== 'Enter') return;
|
||
|
||
const target = event.target as Element | null;
|
||
const button = target?.closest<HTMLButtonElement>(
|
||
'.chart-template-button, .chart-indicator-button, .chart-fullscreen-button, .chart-statistic-button, .chart-pivot-button',
|
||
);
|
||
if (!button || !frame.contains(button)) return;
|
||
|
||
event.preventDefault();
|
||
event.stopPropagation();
|
||
event.stopImmediatePropagation();
|
||
handleToolbarAction(button);
|
||
};
|
||
|
||
const suppressBrowserContextMenu = (event: MouseEvent) => {
|
||
event.preventDefault();
|
||
};
|
||
|
||
const observer = new MutationObserver(syncToolbarButtons);
|
||
const initialSyncTimers = [
|
||
window.setTimeout(syncToolbarButtons, 0),
|
||
window.setTimeout(syncToolbarButtons, 100),
|
||
window.setTimeout(syncToolbarButtons, 500),
|
||
window.setTimeout(syncToolbarButtons, 1000),
|
||
];
|
||
document.addEventListener('keydown', handleKeyDown, true);
|
||
document.addEventListener('fullscreenchange', handleFullscreenChange);
|
||
document.addEventListener('contextmenu', suppressBrowserContextMenu);
|
||
frame.addEventListener('contextmenu', suppressBrowserContextMenu);
|
||
frame.addEventListener('click', handleToolbarClick, true);
|
||
frame.addEventListener('keydown', handleToolbarKeyDown, true);
|
||
observer.observe(frame, { childList: true, subtree: true });
|
||
syncToolbarButtons();
|
||
|
||
return () => {
|
||
initialSyncTimers.forEach((timer) => window.clearTimeout(timer));
|
||
document.removeEventListener('keydown', handleKeyDown, true);
|
||
document.removeEventListener('fullscreenchange', handleFullscreenChange);
|
||
document.removeEventListener('contextmenu', suppressBrowserContextMenu);
|
||
frame.removeEventListener('contextmenu', suppressBrowserContextMenu);
|
||
frame.removeEventListener('click', handleToolbarClick, true);
|
||
frame.removeEventListener('keydown', handleToolbarKeyDown, true);
|
||
observer.disconnect();
|
||
};
|
||
}, [
|
||
activeContentKey,
|
||
appliedFilters,
|
||
filterModalKey,
|
||
filterTreeByKey,
|
||
chartViewKey,
|
||
pivotToggleActionLabel,
|
||
pivotToggleTitle,
|
||
selectedContentNodes.length,
|
||
statisticMenuOpen,
|
||
togglePivotView,
|
||
toggleWorkspaceFullscreen,
|
||
]);
|
||
|
||
const chartOptions = useMemo<AgCartesianChartOptions>(() => {
|
||
const trendData = groupNames.map((groupName) => {
|
||
const row: Record<string, string | number | null> = { groupName };
|
||
selectedContentNodes.forEach((node) => {
|
||
const datum = chartDataBySelection[getSelectionKey(node.contentKey, node.id)]?.find((item) => item.groupName === groupName);
|
||
row[getSeriesValueKey(node.contentKey, node.id)] = datum?.[selectedValueKey] ?? null;
|
||
});
|
||
return row;
|
||
});
|
||
const series = selectedContentNodes.map((node) => ({
|
||
type: 'line' as const,
|
||
xKey: 'groupName',
|
||
yKey: getSeriesValueKey(node.contentKey, node.id),
|
||
yName: `${node.label} ${seriesValueLabel}`,
|
||
stroke: node.color,
|
||
strokeWidth: 2,
|
||
connectMissingData: true,
|
||
marker: {
|
||
enabled: true,
|
||
fill: node.color,
|
||
stroke: node.color,
|
||
size: 5,
|
||
},
|
||
interpolation: {
|
||
type: 'smooth' as const,
|
||
},
|
||
tooltip: {
|
||
renderer: ({ datum, yKey, yName }: { datum: Record<string, unknown>; yKey: string; yName?: string }) => ({
|
||
title: yName ?? '',
|
||
data: [
|
||
{ label: selectedMetric.label, value: formatChartValue(Number(datum[yKey]), metricKey) },
|
||
],
|
||
}),
|
||
},
|
||
}));
|
||
|
||
return {
|
||
theme: {
|
||
palette: {
|
||
fills: ['#006f9b', '#ff7faa', '#00994d', '#ff8833', '#00a0dd'],
|
||
strokes: ['#003f58', '#934962', '#004a25', '#914d1d', '#006288'],
|
||
},
|
||
params: {
|
||
foregroundColor: '#262a33',
|
||
backgroundColor: '#fff1e5',
|
||
accentColor: '#0d7680',
|
||
fontFamily: '"Microsoft YaHei", "PingFang SC", "Segoe UI", Arial, sans-serif',
|
||
fontSize: 14,
|
||
tooltipBackgroundColor: '#fff7ef',
|
||
tooltipTextColor: '#262a33',
|
||
},
|
||
},
|
||
locale: {
|
||
localeText: AG_CHARTS_LOCALE_ZH_CN,
|
||
},
|
||
background: {
|
||
fill: 'transparent',
|
||
},
|
||
padding: {
|
||
top: 16,
|
||
right: 16,
|
||
bottom: 18,
|
||
left: 24,
|
||
},
|
||
data: trendData,
|
||
zoom: {
|
||
enabled: true,
|
||
anchorPointX: 'pointer',
|
||
anchorPointY: 'pointer',
|
||
buttons: {
|
||
enabled: true,
|
||
visible: 'hover',
|
||
buttons: [
|
||
{ icon: 'zoom-out', value: 'zoom-out', section: 'zoom', tooltip: '缩小' },
|
||
{ icon: 'zoom-in', value: 'zoom-in', section: 'zoom', tooltip: '放大' },
|
||
{ icon: 'pan-left', value: 'pan-left', section: 'pan', tooltip: '左移' },
|
||
{ icon: 'pan-right', value: 'pan-right', section: 'pan', tooltip: '右移' },
|
||
{ icon: 'reset', value: 'reset', section: 'reset', tooltip: '重置' },
|
||
],
|
||
},
|
||
},
|
||
contextMenu: {
|
||
enabled: true,
|
||
items: ['defaults'],
|
||
},
|
||
overlays: {
|
||
noData: {
|
||
text: chartEmptyText,
|
||
},
|
||
},
|
||
annotations: {
|
||
enabled: true,
|
||
toolbar: {
|
||
buttons: ([
|
||
{
|
||
value: 'callout',
|
||
tooltip: '模板库',
|
||
label: '<span class="ag-charts-myButton-template ag-charts-diy-button">库</span>',
|
||
},
|
||
{
|
||
value: 'text',
|
||
tooltip: '指标树形',
|
||
label: '<span class="ag-charts-myButton-indicator ag-charts-diy-button">指</span>',
|
||
},
|
||
{
|
||
value: 'note',
|
||
tooltip: '切换统计指标',
|
||
label: `<span class="ag-charts-myButton-statistic ag-charts-diy-button">${selectedStatistic.shortLabel}</span>`,
|
||
},
|
||
{
|
||
icon: 'trend-line-drawing',
|
||
value: 'line-menu',
|
||
tooltip: 'Line Tool',
|
||
},
|
||
{
|
||
icon: 'text-annotation',
|
||
value: 'text-menu',
|
||
tooltip: 'Text Tool',
|
||
},
|
||
{
|
||
icon: 'arrow-drawing',
|
||
value: 'shape-menu',
|
||
tooltip: 'Shape Tool',
|
||
},
|
||
{
|
||
icon: 'fibonacci-retracement-drawing',
|
||
value: 'fibonacci-menu',
|
||
tooltip: 'Fibonacci Tool',
|
||
},
|
||
{
|
||
value: 'comment',
|
||
tooltip: '全屏(F11)',
|
||
label: '<i class="anticon anticon-arrow-salt ag-charts-myButton-fullScreen ag-charts-diy-button"></i>',
|
||
},
|
||
{
|
||
icon: 'delete',
|
||
value: 'clear',
|
||
tooltip: 'Clear annotations',
|
||
},
|
||
{
|
||
value: 'comment',
|
||
tooltip: pivotToggleActionLabel,
|
||
label: `<span class="ag-charts-myButton-pivot ag-charts-diy-button">${currentViewShortLabel}</span>`,
|
||
},
|
||
] as unknown as NonNullable<NonNullable<AgCartesianChartOptions['annotations']>['toolbar']>['buttons']),
|
||
},
|
||
},
|
||
series,
|
||
axes: {
|
||
x: {
|
||
type: 'category',
|
||
position: 'bottom',
|
||
line: {
|
||
enabled: true,
|
||
stroke: '#c8b9a7',
|
||
},
|
||
tick: {
|
||
enabled: false,
|
||
},
|
||
label: {
|
||
color: '#1f2933',
|
||
fontSize: 12,
|
||
},
|
||
crosshair: {
|
||
snap: false,
|
||
},
|
||
},
|
||
y: {
|
||
type: 'number',
|
||
position: 'left',
|
||
title: {
|
||
text: '',
|
||
},
|
||
label: {
|
||
color: '#1f2933',
|
||
fontSize: 12,
|
||
formatter: ({ value }) => formatChartValue(Number(value), metricKey),
|
||
},
|
||
line: {
|
||
enabled: false,
|
||
},
|
||
tick: {
|
||
enabled: false,
|
||
},
|
||
gridLine: {
|
||
enabled: true,
|
||
style: [
|
||
{
|
||
stroke: '#e5d9ca',
|
||
lineDash: [0],
|
||
},
|
||
],
|
||
},
|
||
crosshair: {
|
||
snap: false,
|
||
},
|
||
},
|
||
},
|
||
legend: {
|
||
enabled: selectedContentNodes.length > 1,
|
||
},
|
||
tooltip: {
|
||
enabled: true,
|
||
mode: 'shared',
|
||
pagination: true,
|
||
},
|
||
};
|
||
}, [
|
||
activeFilterCount,
|
||
chartDataBySelection,
|
||
chartEmptyText,
|
||
groupNames,
|
||
metricKey,
|
||
currentViewShortLabel,
|
||
pivotToggleActionLabel,
|
||
requestMetricKey,
|
||
selectedContentNodes,
|
||
selectedMetric.label,
|
||
seriesValueLabel,
|
||
selectedValueKey,
|
||
statisticKey,
|
||
]);
|
||
const renderMetricSwitcher = (variant: 'chart' | 'grid') => (
|
||
<div className={`metric-switcher metric-switcher--${variant}`}>
|
||
<button
|
||
className={`metric-switcher-button metric-switcher-button--${variant}`}
|
||
type="button"
|
||
title={`切换纵坐标指标：${selectedMetric.label}`}
|
||
aria-expanded={metricMenuOpen}
|
||
aria-haspopup="menu"
|
||
aria-label={`纵坐标：${selectedMetric.label}`}
|
||
onClick={() => {
|
||
setStatisticMenuOpen(false);
|
||
setMetricMenuOpen((open) => !open);
|
||
}}
|
||
>
|
||
{variant === 'grid' ? selectedMetricShortLabel : selectedMetric.label}
|
||
</button>
|
||
{metricMenuOpen ? (
|
||
<div className="metric-switcher-menu" role="menu" aria-label="切换纵坐标指标">
|
||
{metricOptions.map((option) => (
|
||
<button
|
||
className="metric-switcher-menu-item"
|
||
type="button"
|
||
role="menuitem"
|
||
key={option.key}
|
||
aria-current={option.key === metricKey}
|
||
onClick={() => {
|
||
updateMetricKey(option.key);
|
||
setMetricMenuOpen(false);
|
||
}}
|
||
>
|
||
{option.label}
|
||
</button>
|
||
))}
|
||
</div>
|
||
) : null}
|
||
</div>
|
||
);
|
||
|
||
return (
|
||
<main className="dashboard-shell">
|
||
<div className="watermark-layer" aria-hidden="true">
|
||
{Array.from({ length: 18 }).map((_, index) => (
|
||
<span key={index}>众为数字化管理平台</span>
|
||
))}
|
||
</div>
|
||
|
||
<section className="workspace" aria-label="年度费用模板" ref={workspaceRef}>
|
||
{indicatorSelectionLabel ? <div className="chart-indicator-selection-label" title={indicatorSelectionLabel}>{indicatorSelectionLabel}</div> : null}
|
||
<div className="chart-filter-bar chart-filter-bar--workspace" aria-label="筛选条件">
|
||
{chartFilterOptions.map((option) => {
|
||
const count = appliedFilters[option.key].length;
|
||
const FilterIcon = option.icon;
|
||
return (
|
||
<button
|
||
className="chart-filter-button"
|
||
type="button"
|
||
key={option.key}
|
||
aria-pressed={count > 0}
|
||
title={count > 0 ? `${option.label}：已选${count}项` : option.label}
|
||
onClick={() => openFilterModal(option.key)}
|
||
>
|
||
<FilterIcon className="chart-filter-icon" aria-hidden="true" strokeWidth={2} />
|
||
<span>{option.label}</span>
|
||
{count > 0 ? <strong>{count}</strong> : null}
|
||
</button>
|
||
);
|
||
})}
|
||
{activeFilterCount > 0 ? (
|
||
<button
|
||
className="chart-filter-clear"
|
||
type="button"
|
||
title="清空全部筛选"
|
||
onClick={() => {
|
||
const shouldReloadIndicatorTree = !isDefaultTemplateSelection(appliedFilters.templateLibrary);
|
||
if (shouldReloadIndicatorTree) {
|
||
resetIndicatorTreeState();
|
||
}
|
||
setAppliedFilters({
|
||
templateLibrary: getDefaultTemplateFilterNodes(),
|
||
indicatorTree: [],
|
||
region: [],
|
||
geoLocation: [],
|
||
facilityType: [],
|
||
constructionStage: [],
|
||
planningForm: [],
|
||
});
|
||
setChartDataBySelection({});
|
||
setChartSummaryBySelection({});
|
||
setLoadError(null);
|
||
if (selectedContentNodes.length > 0) {
|
||
setLoadingHint('正在按筛选条件重新计算');
|
||
setLoading(true);
|
||
}
|
||
setChartQueryVersion((version) => version + 1);
|
||
}}
|
||
>
|
||
清空
|
||
</button>
|
||
) : null}
|
||
</div>
|
||
<section className="chart-area" aria-label="年度总费用图表">
|
||
<div className="chart-frame" ref={chartFrameRef}>
|
||
{statisticMenuOpen ? (
|
||
<div className="statistic-switcher-menu" role="menu" aria-label="切换统计指标">
|
||
{statisticOptions.map((option) => (
|
||
<button
|
||
className="statistic-switcher-menu-item"
|
||
type="button"
|
||
role="menuitem"
|
||
key={option.key}
|
||
aria-current={option.key === statisticKey}
|
||
onClick={() => {
|
||
setStatisticKey(option.key);
|
||
setStatisticMenuOpen(false);
|
||
}}
|
||
>
|
||
{option.label}
|
||
</button>
|
||
))}
|
||
</div>
|
||
) : null}
|
||
{chartViewKey === 'trend' ? renderMetricSwitcher('chart') : null}
|
||
{loading || loadError ? <div className="chart-status">{loading ? loadingHint || '加载中' : loadError}</div> : null}
|
||
<AgCharts options={chartOptions} />
|
||
{chartViewKey === 'pivot' ? (
|
||
<div className="chart-pivot-grid-panel ag-theme-quartz">
|
||
<button
|
||
className="chart-grid-tool-button chart-grid-tool-button--template"
|
||
type="button"
|
||
title="模板库"
|
||
aria-label="模板库"
|
||
onClick={() => openGridFilterModal('templateLibrary')}
|
||
>
|
||
库
|
||
</button>
|
||
<button
|
||
className="chart-grid-tool-button chart-grid-tool-button--indicator"
|
||
type="button"
|
||
title="指标树形"
|
||
aria-label="指标树形"
|
||
onClick={() => openGridFilterModal('indicatorTree')}
|
||
>
|
||
指
|
||
</button>
|
||
<button
|
||
className="chart-grid-tool-button chart-grid-tool-button--trend"
|
||
type="button"
|
||
title={pivotToggleTitle}
|
||
aria-label={pivotToggleActionLabel}
|
||
onClick={togglePivotView}
|
||
>
|
||
{currentViewShortLabel}
|
||
</button>
|
||
<button
|
||
className="chart-grid-tool-button chart-grid-tool-button--fullscreen"
|
||
type="button"
|
||
title={fullscreenToggleLabel}
|
||
aria-label={fullscreenToggleLabel}
|
||
aria-pressed={workspaceFullscreen}
|
||
onClick={toggleWorkspaceFullscreen}
|
||
>
|
||
<i
|
||
className={`anticon ${workspaceFullscreen ? 'anticon-shrink' : 'anticon-arrow-salt'} ag-charts-myButton-fullScreen ag-charts-diy-button`}
|
||
aria-hidden="true"
|
||
/>
|
||
</button>
|
||
{renderMetricSwitcher('grid')}
|
||
<AgGridReact<PivotGridRow>
|
||
rowData={pivotGridRowData}
|
||
pinnedBottomRowData={pivotGridPinnedBottomRowData}
|
||
columnDefs={pivotGridColumnDefs}
|
||
containerStyle={{ width: '100%', height: '100%' }}
|
||
theme="legacy"
|
||
defaultColDef={{
|
||
sortable: true,
|
||
resizable: true,
|
||
filter: true,
|
||
}}
|
||
suppressCellFocus
|
||
overlayNoRowsTemplate={selectedContentNodes.length === 0 ? '请选择右侧分类项' : '暂无透视数据'}
|
||
/>
|
||
</div>
|
||
) : null}
|
||
{loading ? (
|
||
<div className="chart-loading-mask" aria-live="polite" aria-busy="true">
|
||
<div className="chart-loading-panel">{loadingHint || '加载中'}</div>
|
||
</div>
|
||
) : null}
|
||
</div>
|
||
</section>
|
||
|
||
<aside className="right-panel" aria-label="选择内容">
|
||
<div className="content-tabs" role="tablist" aria-label="选择内容切换项">
|
||
{contentOptions.map((option) => (
|
||
<button
|
||
className="content-tab"
|
||
type="button"
|
||
role="tab"
|
||
key={option.key}
|
||
aria-selected={option.key === activeContentKey}
|
||
onClick={() => handleActiveContentKeyChange(option.key)}
|
||
>
|
||
{option.label}
|
||
</button>
|
||
))}
|
||
</div>
|
||
<div className="content-tree-panel">
|
||
<div className="content-tree-title">{activeContent.label}</div>
|
||
{treeLoadingByContent[activeContentKey] ? (
|
||
<div className="content-tree-empty">加载中</div>
|
||
) : treeErrorByContent[activeContentKey] ? (
|
||
<div className="content-tree-empty">{treeErrorByContent[activeContentKey]}</div>
|
||
) : activeTree.length > 0 ? (
|
||
renderTreeNodes(activeTree, activeContentKey, selectedNodeKeys, getNodeColor, toggleContentNode, toggleSelectedContentNode)
|
||
) : (
|
||
<div className="content-tree-empty">接口待接入</div>
|
||
)}
|
||
</div>
|
||
</aside>
|
||
{filterModalKey && activeFilter ? (
|
||
<div className="filter-modal-backdrop" role="presentation" onMouseDown={closeFilterModal}>
|
||
<section
|
||
className="filter-modal"
|
||
role="dialog"
|
||
aria-modal="true"
|
||
aria-label={`${activeFilter.label}筛选`}
|
||
onMouseDown={(event) => event.stopPropagation()}
|
||
>
|
||
<header className="filter-modal-header">
|
||
<h2>{activeFilter.label}</h2>
|
||
<button className="filter-modal-close" type="button" aria-label="关闭" onClick={closeFilterModal}>×</button>
|
||
</header>
|
||
<div className="filter-modal-search">
|
||
<input
|
||
type="search"
|
||
value={filterSearchValue}
|
||
placeholder="搜索"
|
||
onChange={(event) => {
|
||
const nextValue = event.target.value;
|
||
setFilterSearchValue(nextValue);
|
||
if (!filterSearchComposingRef.current && filterModalKey) {
|
||
scheduleFilterSearch(filterModalKey, nextValue);
|
||
}
|
||
}}
|
||
onCompositionStart={() => {
|
||
filterSearchComposingRef.current = true;
|
||
}}
|
||
onCompositionEnd={(event) => {
|
||
filterSearchComposingRef.current = false;
|
||
const nextValue = event.currentTarget.value;
|
||
setFilterSearchValue(nextValue);
|
||
if (filterModalKey) {
|
||
scheduleFilterSearch(filterModalKey, nextValue);
|
||
}
|
||
}}
|
||
/>
|
||
</div>
|
||
<div className="filter-modal-selected">
|
||
{draftFilterNodes.length > 0 ? `已选 ${draftFilterNodes.length} 项` : '未选择'}
|
||
</div>
|
||
<div className="filter-modal-tree">
|
||
{activeFilterTreeLoading ? (
|
||
<div className="content-tree-empty">加载中</div>
|
||
) : activeFilterTreeError ? (
|
||
<div className="content-tree-empty">{activeFilterTreeError}</div>
|
||
) : activeFilterDisplayTree.length > 0 ? (
|
||
renderFilterTreeNodes(activeFilterDisplayTree, filterModalKey, draftFilterNodeKeys, toggleFilterTreeNode, toggleDraftFilterNode)
|
||
) : (
|
||
<div className="content-tree-empty">{trimmedFilterSearchValue ? '无匹配结果' : '暂无数据'}</div>
|
||
)}
|
||
</div>
|
||
<footer className="filter-modal-actions">
|
||
<button
|
||
className="filter-modal-clear"
|
||
type="button"
|
||
onClick={() => setDraftFilterNodes(
|
||
isTemplateFilterKey(filterModalKey)
|
||
? getDefaultTemplateFilterNodes()
|
||
: isIndicatorTreeFilterKey(filterModalKey)
|
||
? defaultIndicatorTreeNodes
|
||
: [],
|
||
)}
|
||
>
|
||
清空当前
|
||
</button>
|
||
<button className="filter-modal-cancel" type="button" onClick={closeFilterModal}>
|
||
取消
|
||
</button>
|
||
<button className="filter-modal-confirm" type="button" onClick={applyFilterModal}>
|
||
确认
|
||
</button>
|
||
</footer>
|
||
</section>
|
||
</div>
|
||
) : null}
|
||
</section>
|
||
</main>
|
||
);
|
||
}
|
||
|
||
export default App;
|