1
This commit is contained in:
zwgczx committed
1 parent
46325ee801
commit
58abe588aa
8 files changed
+235
-8
No files matched your search
+44
-6
@@ -2,7 +2,7 @@ import { useEffect, useMemo, useRef, useState } from 'react';
|
||||
import { AgCharts } from 'ag-charts-react';
|
||||
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 { Building2, Construction, LayoutGrid, Library, LocateFixed, MapPinned, SquareFunction, Waypoints } from 'lucide-react';
|
||||
import {
|
||||
AnnotationsModule,
|
||||
ContextMenuModule,
|
||||
@@ -42,6 +42,7 @@ const metricOptions = [
|
||||
const contentOptions = [
|
||||
{ key: 'geoLocation', label: '自然地理区位' },
|
||||
{ key: 'facilityType', label: '设施类别' },
|
||||
{ key: 'buildingFunction', label: '建筑功能' },
|
||||
{ key: 'constructionStage', label: '建设阶段' },
|
||||
{ key: 'planningForm', label: '规划形式' },
|
||||
] as const;
|
||||
@@ -52,6 +53,7 @@ const filterOptions = [
|
||||
{ key: 'region', label: '省市区', icon: MapPinned },
|
||||
{ key: 'geoLocation', label: '自然地理区位', icon: LocateFixed },
|
||||
{ key: 'facilityType', label: '设施类别', icon: Building2 },
|
||||
{ key: 'buildingFunction', label: '建筑功能', icon: SquareFunction },
|
||||
{ key: 'constructionStage', label: '建设阶段', icon: Construction },
|
||||
{ key: 'planningForm', label: '规划形式', icon: LayoutGrid },
|
||||
] as const;
|
||||
@@ -90,6 +92,17 @@ const contentTreeConfigs = {
|
||||
fieldid: '305426',
|
||||
defaultExpandedLevel: 3,
|
||||
},
|
||||
buildingFunction: {
|
||||
endpoint: '/api/public/browser/data/256',
|
||||
treeid: '95004',
|
||||
fieldid: '305919',
|
||||
defaultExpandedLevel: 0,
|
||||
browserParams: {
|
||||
workflowid: '182032',
|
||||
wfid: '182032',
|
||||
billid: '-1817',
|
||||
},
|
||||
},
|
||||
constructionStage: {
|
||||
endpoint: '/api/public/browser/data/256',
|
||||
treeid: '94007',
|
||||
@@ -649,6 +662,7 @@ function App() {
|
||||
const treeInitialLoadStartedRef = useRef<Record<ContentKey, boolean>>({
|
||||
geoLocation: false,
|
||||
facilityType: false,
|
||||
buildingFunction: false,
|
||||
constructionStage: false,
|
||||
planningForm: false,
|
||||
});
|
||||
@@ -658,6 +672,7 @@ function App() {
|
||||
region: false,
|
||||
geoLocation: false,
|
||||
facilityType: false,
|
||||
buildingFunction: false,
|
||||
constructionStage: false,
|
||||
planningForm: false,
|
||||
});
|
||||
@@ -670,18 +685,21 @@ function App() {
|
||||
const [treeByContent, setTreeByContent] = useState<Record<ContentKey, TreeNode[]>>({
|
||||
geoLocation: [],
|
||||
facilityType: [],
|
||||
buildingFunction: [],
|
||||
constructionStage: [],
|
||||
planningForm: [],
|
||||
});
|
||||
const [treeLoadingByContent, setTreeLoadingByContent] = useState<Record<ContentKey, boolean>>({
|
||||
geoLocation: false,
|
||||
facilityType: false,
|
||||
buildingFunction: false,
|
||||
constructionStage: false,
|
||||
planningForm: false,
|
||||
});
|
||||
const [treeErrorByContent, setTreeErrorByContent] = useState<Record<ContentKey, string | null>>({
|
||||
geoLocation: null,
|
||||
facilityType: null,
|
||||
buildingFunction: null,
|
||||
constructionStage: null,
|
||||
planningForm: null,
|
||||
});
|
||||
@@ -697,6 +715,7 @@ function App() {
|
||||
region: [],
|
||||
geoLocation: [],
|
||||
facilityType: [],
|
||||
buildingFunction: [],
|
||||
constructionStage: [],
|
||||
planningForm: [],
|
||||
});
|
||||
@@ -706,6 +725,7 @@ function App() {
|
||||
region: false,
|
||||
geoLocation: false,
|
||||
facilityType: false,
|
||||
buildingFunction: false,
|
||||
constructionStage: false,
|
||||
planningForm: false,
|
||||
});
|
||||
@@ -715,6 +735,7 @@ function App() {
|
||||
region: null,
|
||||
geoLocation: null,
|
||||
facilityType: null,
|
||||
buildingFunction: null,
|
||||
constructionStage: null,
|
||||
planningForm: null,
|
||||
});
|
||||
@@ -724,6 +745,7 @@ function App() {
|
||||
region: [],
|
||||
geoLocation: [],
|
||||
facilityType: [],
|
||||
buildingFunction: [],
|
||||
constructionStage: [],
|
||||
planningForm: [],
|
||||
});
|
||||
@@ -733,6 +755,7 @@ function App() {
|
||||
region: false,
|
||||
geoLocation: false,
|
||||
facilityType: false,
|
||||
buildingFunction: false,
|
||||
constructionStage: false,
|
||||
planningForm: false,
|
||||
});
|
||||
@@ -742,6 +765,7 @@ function App() {
|
||||
region: null,
|
||||
geoLocation: null,
|
||||
facilityType: null,
|
||||
buildingFunction: null,
|
||||
constructionStage: null,
|
||||
planningForm: null,
|
||||
});
|
||||
@@ -751,6 +775,7 @@ function App() {
|
||||
region: [],
|
||||
geoLocation: [],
|
||||
facilityType: [],
|
||||
buildingFunction: [],
|
||||
constructionStage: [],
|
||||
planningForm: [],
|
||||
});
|
||||
@@ -765,6 +790,7 @@ function App() {
|
||||
region: 0,
|
||||
geoLocation: 0,
|
||||
facilityType: 0,
|
||||
buildingFunction: 0,
|
||||
constructionStage: 0,
|
||||
planningForm: 0,
|
||||
});
|
||||
@@ -834,6 +860,7 @@ function App() {
|
||||
}
|
||||
const treeParams = {
|
||||
...browserTreeDefaults,
|
||||
...('browserParams' in config ? config.browserParams : {}),
|
||||
treeid: config.treeid,
|
||||
cube_treeid: config.treeid,
|
||||
fieldid: config.fieldid,
|
||||
@@ -1469,18 +1496,27 @@ function App() {
|
||||
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');
|
||||
setButtonAttribute(templateButton, 'aria-disabled', 'false');
|
||||
enableCustomToolbarButton(templateButton);
|
||||
setButtonAttribute(templateButton, 'aria-expanded', String(filterModalKey === 'templateLibrary'));
|
||||
}
|
||||
|
||||
const indicatorButton = getIndicatorButton();
|
||||
if (indicatorButton) {
|
||||
indicatorButton.classList.add('chart-indicator-button');
|
||||
setButtonAttribute(indicatorButton, 'aria-disabled', 'false');
|
||||
enableCustomToolbarButton(indicatorButton);
|
||||
setButtonAttribute(indicatorButton, 'aria-expanded', String(filterModalKey === 'indicatorTree'));
|
||||
}
|
||||
|
||||
@@ -1495,7 +1531,7 @@ function App() {
|
||||
const isFullscreen = document.fullscreenElement === fullscreenTarget;
|
||||
button.classList.add('chart-fullscreen-button');
|
||||
button.classList.toggle('ag-charts-toolbar__button--active', isFullscreen);
|
||||
setButtonAttribute(button, 'aria-disabled', 'false');
|
||||
enableCustomToolbarButton(button);
|
||||
setButtonAttribute(button, 'aria-pressed', String(isFullscreen));
|
||||
icon?.classList.toggle('anticon-arrow-salt', !isFullscreen);
|
||||
icon?.classList.toggle('anticon-shrink', isFullscreen);
|
||||
@@ -1504,7 +1540,7 @@ function App() {
|
||||
const statisticButton = getStatisticButton();
|
||||
if (statisticButton) {
|
||||
statisticButton.classList.add('chart-statistic-button');
|
||||
setButtonAttribute(statisticButton, 'aria-disabled', 'false');
|
||||
enableCustomToolbarButton(statisticButton);
|
||||
setButtonAttribute(statisticButton, 'aria-expanded', String(statisticMenuOpen));
|
||||
}
|
||||
};
|
||||
@@ -1592,6 +1628,7 @@ function App() {
|
||||
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);
|
||||
@@ -1612,7 +1649,7 @@ function App() {
|
||||
frame.removeEventListener('keydown', handleToolbarKeyDown, true);
|
||||
observer.disconnect();
|
||||
};
|
||||
}, [appliedFilters, filterModalKey, filterTreeByKey, statisticMenuOpen]);
|
||||
}, [activeContentKey, appliedFilters, filterModalKey, filterTreeByKey, selectedContentNodes.length, statisticMenuOpen]);
|
||||
|
||||
const chartOptions = useMemo<AgCartesianChartOptions>(() => {
|
||||
const groupNames: string[] = [];
|
||||
@@ -1869,6 +1906,7 @@ function App() {
|
||||
region: [],
|
||||
geoLocation: [],
|
||||
facilityType: [],
|
||||
buildingFunction: [],
|
||||
constructionStage: [],
|
||||
planningForm: [],
|
||||
});
|
||||
|
||||
+7
-2
@@ -361,8 +361,12 @@ button {
|
||||
|
||||
.chart-frame .chart-template-button,
|
||||
.chart-frame .chart-indicator-button,
|
||||
.chart-frame .chart-statistic-button {
|
||||
.chart-frame .chart-statistic-button,
|
||||
.chart-frame .chart-fullscreen-button {
|
||||
color: #46413b;
|
||||
cursor: pointer !important;
|
||||
opacity: 1 !important;
|
||||
pointer-events: auto !important;
|
||||
}
|
||||
|
||||
.chart-frame .ag-charts-myButton-template,
|
||||
@@ -378,7 +382,8 @@ button {
|
||||
|
||||
.chart-frame .chart-template-button[aria-expanded="true"],
|
||||
.chart-frame .chart-indicator-button[aria-expanded="true"],
|
||||
.chart-frame .chart-statistic-button[aria-expanded="true"] {
|
||||
.chart-frame .chart-statistic-button[aria-expanded="true"],
|
||||
.chart-frame .chart-fullscreen-button.ag-charts-toolbar__button--active {
|
||||
color: #0078a8;
|
||||
border-color: rgba(0, 120, 168, 0.36);
|
||||
background: rgba(255, 252, 248, 0.94);
|
||||
|
||||
Reference in new issue
Block a user