diff --git a/src/executor/design/dashboardTemplateModal/components/cardConfig/index.tsx b/src/executor/design/dashboardTemplateModal/components/cardConfig/index.tsx index 89e852d92d6a599666fee94f820cea31ec6534b5..4fdae54a99ffce605451ba20d64c8eca8ab21ef4 100644 --- a/src/executor/design/dashboardTemplateModal/components/cardConfig/index.tsx +++ b/src/executor/design/dashboardTemplateModal/components/cardConfig/index.tsx @@ -1,3 +1,4 @@ +// 导入所需的组件和工具 import SchemaForm from '@/components/SchemaForm'; import UploadItem from '@/executor/tools/uploadItem'; import { schema } from '@/ts/base'; @@ -8,24 +9,33 @@ import { ProFormInstance } from '@ant-design/pro-form'; import React, { useRef, useState } from 'react'; import _ from 'lodash'; +// 解构Select组件的Option const { Option } = Select; + +// 定义组件属性接口 interface Iprops { - current: any; - currentCard: any; - finished: (values?: any) => void; + current: any; // 当前数据对象 + currentCard: any; // 当前卡片配置 + finished: (values?: any) => void; // 完成回调函数 } /** - * 数据看板卡片配置 - * @param props - * @returns + * 数据看板卡片配置组件 + * 用于配置数据看板中各个卡片的样式、颜色、大小等属性 + * @param props 组件属性 + * @returns 返回配置表单组件 */ const DashboardCardConfig: React.FC = ({ current, currentCard, finished }) => { + // 深拷贝当前卡片配置 const newCardConfig = _.cloneDeep(currentCard?.cardConfig); + // 卡片样式类型状态 const [styleType, setStyleType] = useState(newCardConfig?.style || 'default'); + // 图表主题配置 let chartTheme = newCardConfig?.chartTheme + // 表单引用 const formRef = useRef(); + // 初始化表单默认值 let initialValue = newCardConfig || { icon: undefined, bg: undefined, @@ -46,6 +56,7 @@ const DashboardCardConfig: React.FC = ({ current, currentCard, finished chartTheme: '' }; + // 定义表单列配置 const columns: ProFormColumnsType[] = [ { title: '卡片图标', @@ -295,31 +306,37 @@ const DashboardCardConfig: React.FC = ({ current, currentCard, finished title: '配色方案', dataIndex: 'chartTheme', renderFormItem: (_, __, form) => { + // 初始化本地颜色状态 const [localColors, setLocalColors] = useState(() => { const rawValue = form.getFieldValue('chartTheme') || '#ffffff'; return rawValue.split(',').map((c: string) => c.trim()); }); + // 更新颜色数组的函数 const updateColors = (newColors: string[]) => { setLocalColors(newColors); chartTheme=newColors.join(',') }; + // 处理单个颜色变化的函数 const handleColorChange = (index: number, value: string) => { const newColors = [...localColors]; newColors[index] = value; updateColors(newColors); }; + // 添加新颜色的函数 const handleAddColor = () => { updateColors([...localColors, '#ffffff']); }; + // 删除颜色的函数 const handleRemoveColor = (index: number) => { const newColors = localColors.filter((_, i) => i !== index); updateColors(newColors); }; + // 渲染单个颜色项的函数 const renderColorItem = (color: string, index: number) => (
{index} @@ -342,6 +359,7 @@ const DashboardCardConfig: React.FC = ({ current, currentCard, finished
); + // 返回颜色配置界面 return (
{localColors.length <= 5 ? ( @@ -363,6 +381,8 @@ const DashboardCardConfig: React.FC = ({ current, currentCard, finished } } ]; + + // 返回配置表单 return ( <> diff --git a/src/executor/design/dashboardTemplateModal/components/chartFilterSetting/index.tsx b/src/executor/design/dashboardTemplateModal/components/chartFilterSetting/index.tsx index ba14aaf94fefe4fa4e29ce49623e6b0b31aa8d51..70b624bb926f0179aa640b611606c1f8d16649cc 100644 --- a/src/executor/design/dashboardTemplateModal/components/chartFilterSetting/index.tsx +++ b/src/executor/design/dashboardTemplateModal/components/chartFilterSetting/index.tsx @@ -1,3 +1,4 @@ +// 导入必要的组件和工具 import CustomBuilder from '@/components/DataStandard/WorkForm/Design/config/formRule/builder'; import SchemaForm from '@/components/SchemaForm'; import { FullEntityColumns } from '@/config/column'; @@ -11,34 +12,43 @@ import React, { useEffect, useRef, useState } from 'react'; import { fieldConvert } from '@/utils/tools'; import { FieldInfo } from 'typings/globelType'; +/** + * 组件属性接口定义 + */ interface Iprops { - current: IChartView; - currentChart: any; - filterConfig: any; - open: boolean; - onUpdateConfig: (values: any) => void; - finished: () => void; + current: IChartView; // 当前图表视图实例 + currentChart: any; // 当前图表配置 + filterConfig: any; // 过滤配置 + open: boolean; // 弹窗开启状态 + onUpdateConfig: (values: any) => void; // 更新配置的回调函数 + finished: () => void; // 完成操作的回调函数 } + /** - * 数据看板过滤设置 - * @param props - * @returns + * 数据看板过滤设置组件 + * 用于配置图表的数据过滤、显示条数和排序方式 */ const DashboardFilterSetting: React.FC = React.memo( ({ current, currentChart, open, onUpdateConfig, finished }: Iprops) => { + // 创建表单引用 const formRef = useRef(); + // 存储源字段信息的状态 const [sourceFields, setSourceFields] = useState([]); + // 存储数据大小选择的状态 const [dataSize, setDataSize] = useState('all'); + // 监听图表配置变化，更新数据大小设置 useEffect(() => { setDataSize(currentChart?.displaySettings?.displaySize ?? 'all'); }, [currentChart]); + // 异步加载图表字段数据 const [loaded] = useAsyncLoad(async () => { if (!open || !currentChart) return; try { + // 加载原始字段数据 const rawFields = await current.loadChartFields(currentChart.formId); - // 转换为 CustomBuilder 期望的格式 + // 转换字段格式 const convertedFields = fieldConvert(FullEntityColumns(rawFields)); setSourceFields(convertedFields); } catch (error) { @@ -46,12 +56,14 @@ const DashboardFilterSetting: React.FC = React.memo( } }, [open, currentChart]); + // 表单初始值设置 let initialValue: any = { displaySize: currentChart?.displaySettings?.displaySize ?? 'all', topNCount: currentChart?.displaySettings?.topNCount ?? 5000, sortOrder: currentChart?.displaySettings?.sortOrder ?? 'default', }; + // 表单列配置定义 const columns: ProFormColumnsType[] = [ { title: '数据过滤条件', @@ -87,14 +99,8 @@ const DashboardFilterSetting: React.FC = React.memo( colProps: { span: 12 }, fieldProps: { options: [ - { - label: '全部', - value: 'all', - }, - { - label: '前N条', - value: 'custom', - }, + { label: '全部', value: 'all' }, + { label: '前N条', value: 'custom' }, ], }, }, @@ -114,22 +120,15 @@ const DashboardFilterSetting: React.FC = React.memo( colProps: { span: 24 }, fieldProps: { options: [ - { - label: '默认排序', - value: 'default', - }, - { - label: '按聚合值升序', - value: 'asc', - }, - { - label: '按聚合值降序', - value: 'desc', - }, + { label: '默认排序', value: 'default' }, + { label: '按聚合值升序', value: 'asc' }, + { label: '按聚合值降序', value: 'desc' }, ], }, }, ]; + + // 返回表单组件 return ( <> @@ -173,6 +172,7 @@ const DashboardFilterSetting: React.FC = React.memo( }, ); +// 设置组件显示名称 DashboardFilterSetting.displayName = 'DashboardFilterSetting'; export default DashboardFilterSetting; diff --git a/src/executor/design/dashboardTemplateModal/components/dashboard/index.tsx b/src/executor/design/dashboardTemplateModal/components/dashboard/index.tsx index eef9918212de32e10423b9f29ce2f46c049ae937..d11c128609cee1614260efbcd54db1c542c0e0a6 100644 --- a/src/executor/design/dashboardTemplateModal/components/dashboard/index.tsx +++ b/src/executor/design/dashboardTemplateModal/components/dashboard/index.tsx @@ -1,3 +1,4 @@ +// 导入所需的组件和工具 import LoadingView from '@/components/Common/Loading'; import orgCtrl from '@/ts/controller'; import { orgAuth } from '@/ts/core/public'; @@ -10,6 +11,7 @@ import { Chart } from '@antv/g2'; import { Renderer as CanvasRenderer } from '@antv/g-canvas'; import { Button, Empty, Spin } from 'antd'; import React, { useEffect, useState, useCallback } from 'react'; +// 导入数据处理和图表渲染相关的工具函数 import { generateAggregationPipeline, lookupsFieldUnitById, @@ -18,6 +20,7 @@ import { transformConditions, transformDataForDisplay, } from '../../../dataAnalysisModal/utils'; +// 导入各种图表渲染函数 import { renderAreaChart, renderBarChart, @@ -37,6 +40,7 @@ import GlobalFilter from '../globalFilter'; import ChartFilterSetting from '../chartFilterSetting'; import { extractFieldFromConditions } from './utils'; +// 声明全局JSX命名空间 declare global { namespace JSX { interface IntrinsicElements { @@ -45,18 +49,19 @@ declare global { } } +// 定义组件Props接口 interface IProps { - current: any; - pageConfig: any; - chartList: any; - reload: boolean; - flag?: string; + current: any; // 当前数据 + pageConfig: any; // 页面配置 + chartList: any; // 图表列表 + reload: boolean; // 是否重新加载 + flag?: string; // 标识 } /** - * 数据看板 - * @param param0 - * @returns + * 数据看板组件 + * @param param0 组件参数 + * @returns JSX组件 */ const Dashboard: React.FC = ({ reload, @@ -65,28 +70,34 @@ const Dashboard: React.FC = ({ pageConfig, flag = 'inner', }) => { - const [loaded, setLoaded] = useState(false); - const [loading, setLoading] = useState(false); - const [visibleFilterSetting, setVisibleFilterSetting] = useState(false); - const [globalFilter, setGlobalFilter] = useState({}); - const [currentChart, setCurrentChart] = useState(null); - const [visibleChartFilterSetting, setVisibleChartFilterSetting] = useState(false); + // 状态定义 + const [loaded, setLoaded] = useState(false); // 是否加载完成 + const [loading, setLoading] = useState(false); // 是否正在加载 + const [visibleFilterSetting, setVisibleFilterSetting] = useState(false); // 过滤设置弹窗是否可见 + const [globalFilter, setGlobalFilter] = useState({}); // 全局过滤条件 + const [currentChart, setCurrentChart] = useState(null); // 当前选中的图表 + const [visibleChartFilterSetting, setVisibleChartFilterSetting] = useState(false); // 图表过滤设置弹窗是否可见 const [cacheUpdateTime, setCacheUpdateTime] = useState( current?.metadata?.chartDataUpdateTime ?? formatDate(Date.now(), 'yyyy-MM-dd HH:mm:ss.S'), - ); - const [pageStyles, setPageStyles] = useState({}); - const [newChartList, setNewChartList] = useState([]); + ); // 缓存更新时间 + const [pageStyles, setPageStyles] = useState({}); // 页面样式 + const [newChartList, setNewChartList] = useState([]); // 新的图表列表 + // 获取当前公司信息 const currentCompanys = orgCtrl.user.companys.find( (cItem) => cItem.belongId === current.spaceId, ); + // 创建表单实例 let metaForm = new Form((current as any).metadata, current?.directory); + // 图表加载状态 const [chartLoadingStates, setChartLoadingStates] = useState>( {}, ); + // 组件初始化和更新时的副作用 useEffect(() => { (async () => { + // 处理页面配置 if (pageConfig) { let newBgImg = null; if (pageConfig?.bgImg) { @@ -100,10 +111,11 @@ const Dashboard: React.FC = ({ return pageStyles; }); } + // 处理图表列表 if (Array.isArray(chartList) && chartList.length > 0) { const globalParams = chartList?.[0]?.globalParams; setGlobalFilter(globalParams ?? {}); - // 图表均有数据源 + // 检查图表是否有数据源 const hasDataSource = chartList.every( (item) => item.dataSource && @@ -111,6 +123,7 @@ const Dashboard: React.FC = ({ item.dataSource.length > 0, ); if (hasDataSource || !reload) { + // 如果有数据源或不需要重新加载，直接设置图表列表 chartList.forEach(async (item) => { item.key = getUuid(); await calculateTotalCount(item.dataSource, item); @@ -119,6 +132,7 @@ const Dashboard: React.FC = ({ setLoaded(true); return; } + // 如果需要重新加载，获取数据 reload && fetchData(chartList); } else { setLoaded(true); @@ -126,6 +140,7 @@ const Dashboard: React.FC = ({ })(); }, [chartList, pageConfig, reload]); + // 更新图表缓存 const updateChartCache = (chartList: any) => { if (Array.isArray(chartList) && chartList.length > 0) { const updateTime = formatDate(Date.now(), 'yyyy-MM-dd HH:mm:ss.S'); @@ -136,10 +151,12 @@ const Dashboard: React.FC = ({ } }; + // 计算总数 const calculateTotalCount = async (data: any[], item: any) => { const { mode, scatterDimensionRaw, aggregateDimension, aggregateDimensionRaw } = item; const fieldType = scatterDimensionRaw?.fieldType; + // 计算总数 const totalCount = data.reduce((accumulator, currentItem) => { try { return ( @@ -152,6 +169,7 @@ const Dashboard: React.FC = ({ console.log('error', error); } }, 0); + // 简化数字 const totalValues = simplifyNum(totalCount ?? 0); if (typeof totalValues === 'object') { item.totalCount = totalValues.num; @@ -160,6 +178,7 @@ const Dashboard: React.FC = ({ item.totalCount = totalValues; } + // 获取单位 let scatterUnitStr = '', aggregateUnitStr = ''; if (aggregateDimension === 'count') { @@ -182,17 +201,20 @@ const Dashboard: React.FC = ({ item.unit2 = scatterUnitStr; }; - // 加载数据源 + // 获取数据源 const fetchData = async (list: any, globalParams?: any) => { try { setLoading(true); + // 初始化图表数据源 list.forEach((item: any) => { item.key = getUuid(); // 保证二次打开页面图表能正常渲染 item.dataSource = []; }); + // 并行处理所有图表 const threads = list.map(async (item: any) => { let isCopy = false; + // 获取当前公司信息 let currentCompanys = orgCtrl.user.companys.find( (cItem) => cItem.belongId === item.spaceId, ); @@ -202,6 +224,7 @@ const Dashboard: React.FC = ({ ); isCopy = true; } + // 获取子目录 if (currentCompanys?.targets) { const targetId = isCopy ? (current as any)?.target?.id : item.targetId; const subCompanys = currentCompanys.targets.find( @@ -211,6 +234,7 @@ const Dashboard: React.FC = ({ metaForm = new Form((current as any).metadata, subCompanys.directory); } } + // 加载表单元数据 const metaData = await metaForm.loadReferenceForm(item.formId); if (metaData) { const dirs = await metaForm.directory.loadAllDirectory(); @@ -218,13 +242,16 @@ const Dashboard: React.FC = ({ if (Array.isArray(dirItem) && dirItem.length > 0) { // 实例化图表表单 const chartForm = new Form(metaData, dirItem[0]); + // 获取过滤表达式 const filterExpStr = metaData?.options?.dataRange?.filterExp; const authExpStr = metaData?.options?.dataRange?.authExp; let authExp = []; let conditionsValues: any = []; + // 转换条件 if (item?.conditions) { conditionsValues = await transformConditions(item.conditions, metaForm); } + // 处理过滤表达式 if (filterExpStr) { const filterExp = typeof filterExpStr === 'string' @@ -235,6 +262,7 @@ const Dashboard: React.FC = ({ ? mergeConditions(filterExp, conditionsValues) : filterExp; } + // 处理权限表达式 if (authExpStr) { const authExpResult = chartForm.parseAuthExp(authExpStr); authExp = @@ -242,6 +270,7 @@ const Dashboard: React.FC = ({ ? JSON.parse(authExpResult) : authExpResult; } + // 构建加载选项 const loadOptions: any = { belongId: current.belongId, userData: [], @@ -255,6 +284,7 @@ const Dashboard: React.FC = ({ }, }, }; + // 处理belongId const allBelongIds: string[] = []; if (globalParams?.belongId && Array.isArray(globalParams.belongId)) { allBelongIds.push(...globalParams.belongId); @@ -264,6 +294,7 @@ const Dashboard: React.FC = ({ ) { allBelongIds.push(...item.globalParams.belongId); } + // 处理权限表达式中的belongId let filteredAuthExp = authExp; if (authExp && Array.isArray(authExp)) { const { values: authBelongIds, filteredConditions } = @@ -275,12 +306,14 @@ const Dashboard: React.FC = ({ filteredAuthExp = filteredConditions.length > 0 ? filteredConditions : []; } } + // 设置belongId匹配条件 if (allBelongIds.length > 0) { const uniqueBelongIds = [...new Set(allBelongIds)]; loadOptions.options.match['belongId'] = { _in_: uniqueBelongIds, }; } + // 合并过滤条件 if (filteredAuthExp && filteredAuthExp.length > 0) { conditionsValues = conditionsValues ? mergeConditions(filteredAuthExp, conditionsValues) @@ -289,6 +322,7 @@ const Dashboard: React.FC = ({ loadOptions['filter'] = conditionsValues; + // 处理日期范围 if ( Array.isArray(globalParams?.dateRange) && globalParams?.dateRange.length > 0 @@ -299,6 +333,7 @@ const Dashboard: React.FC = ({ }; } + // 聚合管道配置 const { mode, scatterDimension, @@ -318,6 +353,7 @@ const Dashboard: React.FC = ({ }); loadOptions.group = pipeline; + // 处理时间类型字段 const type1Regex = /^T\d{18}$/; if (type1Regex.test(scatterDimension)) { loadOptions.options.match[scatterDimension] = { @@ -331,7 +367,9 @@ const Dashboard: React.FC = ({ _exists_: true, }; } + // 加载图表数据 const pipelineResult = await chartForm.loadChartSummary(loadOptions); + // 获取物种ID let speciesIds = []; if (scatterDimensionRaw?.speciesId) { speciesIds.push(scatterDimensionRaw.speciesId); @@ -339,7 +377,9 @@ const Dashboard: React.FC = ({ if (flattenDimensionRaw?.speciesId) { speciesIds.push(flattenDimensionRaw.speciesId); } + // 加载查找数据 const lookups = await chartForm.loadItems(speciesIds); + // 转换数据格式 const result = await transformDataForDisplay({ data: pipelineResult, mode, @@ -349,8 +389,10 @@ const Dashboard: React.FC = ({ dimensionIndex: scatterDimensionIndex, lookups, }); + // 设置图表数据 item.dataSource = result; globalParams && (item.globalParams = globalParams); + // 计算总数 await calculateTotalCount(result, item); } else { throw { @@ -365,6 +407,7 @@ const Dashboard: React.FC = ({ }; } }); + // 等待所有图表加载完成 await Promise.all(threads); setNewChartList(list); updateChartCache(list); @@ -379,17 +422,19 @@ const Dashboard: React.FC = ({ // 更新单个图表 const handleUpdateSingleChart = async (filterConfig: any) => { - // 设置当前图表的 loading 状态为 true + // 设置当前图表的loading状态 setChartLoadingStates((prev) => ({ ...prev, [currentChart.id]: true, })); try { + // 解析过滤配置 const newFilterExp = typeof filterConfig.filter === 'string' ? JSON.parse(filterConfig.filter) : filterConfig.filter; + // 加载表单元数据 const metaData = await metaForm.loadReferenceForm(currentChart.formId); if (metaData) { const dirs = await metaForm.directory.loadAllDirectory(); @@ -397,11 +442,13 @@ const Dashboard: React.FC = ({ if (Array.isArray(dirItem) && dirItem.length > 0) { // 实例化图表表单 const chartForm = new Form(metaData, dirItem[0]); + // 创建新的加载选项 const newLoadOptions = { ...currentChart.loadOptions, filter: newFilterExp, }; const { globalParams } = currentChart; + // 处理belongId const allBelongIds: string[] = []; if (globalParams?.belongId && Array.isArray(globalParams.belongId)) { allBelongIds.push(...globalParams.belongId); @@ -417,6 +464,7 @@ const Dashboard: React.FC = ({ filteredExp = filteredConditions.length > 0 ? filteredConditions : []; } } + // 设置belongId匹配条件 if (allBelongIds.length > 0) { const uniqueBelongIds = [...new Set(allBelongIds)]; newLoadOptions.options.match['belongId'] = { @@ -424,6 +472,7 @@ const Dashboard: React.FC = ({ }; } newLoadOptions['filter'] = filteredExp; + // 处理日期范围 if ( Array.isArray(globalParams?.dateRange) && globalParams?.dateRange.length > 0 @@ -434,6 +483,7 @@ const Dashboard: React.FC = ({ }; } + // 获取维度信息 const { mode, scatterDimensionRaw, @@ -442,8 +492,10 @@ const Dashboard: React.FC = ({ aggregateDimensionRaw, } = currentChart; + // 加载图表数据 const pipelineResult = await chartForm.loadChartSummary(newLoadOptions); + // 获取物种ID let speciesIds = []; if (scatterDimensionRaw?.speciesId) { speciesIds.push(scatterDimensionRaw.speciesId); @@ -452,7 +504,9 @@ const Dashboard: React.FC = ({ speciesIds.push(flattenDimensionRaw.speciesId); } + // 加载查找数据 const lookups = await chartForm.loadItems(speciesIds); + // 转换数据格式 const result = await transformDataForDisplay({ data: pipelineResult, mode, @@ -463,7 +517,7 @@ const Dashboard: React.FC = ({ lookups, }); - // 使用函数式更新，确保状态一致性 + // 更新图表列表 setNewChartList((prevList) => { const updatedList = prevList.map((chart: any) => { if (chart.id === currentChart.id) { @@ -476,14 +530,14 @@ const Dashboard: React.FC = ({ sortOrder: filterConfig.sortOrder, }, loadOptions: newLoadOptions, - // 添加一个更新标识，用于触发单个图表的重新渲染 + // 添加更新标识 lastUpdate: Date.now(), }; } return chart; }); - // 同时更新缓存，使用更新后的列表 + // 更新缓存 updateChartCache(updatedList); return updatedList; @@ -493,7 +547,7 @@ const Dashboard: React.FC = ({ } catch (error) { console.error('更新图表失败:', error); } finally { - // 无论成功还是失败，都设置 loading 状态为 false + // 设置loading状态为false setChartLoadingStates((prev) => ({ ...prev, [currentChart.id]: false, @@ -503,13 +557,14 @@ const Dashboard: React.FC = ({ /** * 渲染图表 - * @param obj - * @returns + * @param obj 图表配置对象 + * @returns 图表实例 */ const renderChart = useCallback(async (obj: any) => { if (!obj.dataSource) { return null; } + // 解构图表配置 let { id, key, @@ -524,6 +579,7 @@ const Dashboard: React.FC = ({ unit2, displaySettings, } = obj; + // 获取维度名称 const xName = scatterDimensionRaw?.caption; const yName = flattenDimensionRaw?.caption; const zName = aggregateDimensionRaw?.caption; @@ -531,12 +587,15 @@ const Dashboard: React.FC = ({ unit2 = unit2 ?? ''; try { let chartData = obj.dataSource; + // 创建图表实例 const chart = new Chart({ container: key ?? id, autoFit: true, renderer: new CanvasRenderer(), }); + // 禁用动画 chart.animate(false); + // 处理自定义显示设置 if (displaySettings?.displaySize === 'custom') { if (displaySettings?.sortOrder != 'default') { chartData = chartData.sort((a, b) => { @@ -551,12 +610,14 @@ const Dashboard: React.FC = ({ } else { chart.data(chartData); } + // 3D模式下的编码 if (mode === '3d') { chart .encode('x', xName ?? 'letter') .encode('y', zName ?? 'count') .encode('color', yName ?? 'name'); } + // 根据卡片配置和图表类型渲染不同样式的图表 if ( cardConfig && cardConfig?.style === 'default' && @@ -659,6 +720,7 @@ const Dashboard: React.FC = ({ } }, []); + // 使用useMemo缓存模态框内容 const memoizedModalContent = React.useMemo(() => { return ( @@ -682,17 +744,20 @@ const Dashboard: React.FC = ({ overflowY: 'scroll', paddingBottom: `${flag === 'home' ? '100px' : '0px'}`, }}> + {/* 图表容器头部 */}
上次更新时间：{cacheUpdateTime} + {/* 过滤设置按钮 */} setVisibleFilterSetting(true)}> [过滤设置] + {/* 更新按钮 */} {currentCompanys?.hasAuthoritys([ orgAuth.SuperAuthId, orgAuth.RelationAuthId, @@ -713,12 +778,14 @@ const Dashboard: React.FC = ({ )}
+ {/* 图表内容区域 */} {!loading ? ( <> {Array.isArray(newChartList) && newChartList .filter((item) => !item.isHide) .map((item, index) => { + // 解构图表配置 const { cardConfig, name, @@ -729,6 +796,7 @@ const Dashboard: React.FC = ({ unit1, } = item; + // 计算卡片样式 const cardStyles = { background: cardConfig?.bg ? `url(${shareOpenLink( @@ -760,6 +828,7 @@ const Dashboard: React.FC = ({ }; return ( <> + {/* 渲染中等或小尺寸的图表 */} {cardConfig && cardConfig?.style === 'default' && (cardConfig?.size === 'medium' || @@ -772,6 +841,7 @@ const Dashboard: React.FC = ({ flexDirection: cardConfig?.size === 'medium' ? 'column' : 'row', }}> + {/* 左侧数据展示 */}
= ({ textAlign: cardConfig?.size === 'medium' ? 'center' : 'left', }}> + {/* 指标名称 */}
= ({ aggregateDimensionRaw?.caption || '数量'}
+ {/* 数值和单位 */}
{/* 数值 */} = ({
+ {/* 右侧图表 */}
) : ( + /* 渲染大尺寸的图表 */
+ {/* 图表头部 */}
+ {/* 图标 */} {cardConfig?.icon && ( = ({ )} /> )} + {/* 标题 */} = ({ }}> {cardConfig?.name ?? name} + {/* 过滤设置按钮 */} { @@ -856,12 +934,13 @@ const Dashboard: React.FC = ({
+ {/* 图表内容 */}
@@ -871,6 +950,7 @@ const Dashboard: React.FC = ({ })} ) : ( + // 加载状态
= ({ )}
) : ( + // 空数据状态 = ({ return ( <> {loaded ? memoizedModalContent : } - {/* 全局过滤配置 */} + {/* 全局过滤配置弹窗 */} = ({ setVisibleFilterSetting(false); }} /> + {/* 图表过滤配置弹窗 */} = ({ ); }; +/** + * 图表项组件 + * @param renderChart 渲染图表的函数 + * @param item 图表配置 + * @param isLoading 是否正在加载 + */ const ChartItem = React.memo( ({ renderChart, @@ -937,7 +1025,7 @@ const ChartItem = React.memo( }) => { const [loading, setLoading] = useState(true); - // 当 isLoading 变化时，立即更新 loading 状态 + // 监听isLoading变化 useEffect(() => { if (isLoading) { setLoading(true); @@ -946,9 +1034,10 @@ const ChartItem = React.memo( useEffect(() => { let chartObj: any, timer: any; - // 当 dataSource 变化时，重置 loading 状态 + // 重置loading状态 setLoading(true); + // 延迟渲染图表 timer = setTimeout(() => { const renderChartItem = async () => { try { @@ -961,6 +1050,7 @@ const ChartItem = React.memo( renderChartItem(); }, 100); + // 处理窗口大小变化 const handleResize = () => { setLoading(true); chartObj && chartObj.render(); @@ -968,6 +1058,7 @@ const ChartItem = React.memo( }; window.addEventListener('resize', handleResize); + // 清理函数 return () => { try { window.removeEventListener('resize', handleResize); @@ -979,11 +1070,12 @@ const ChartItem = React.memo( }; }, [renderChart, item.key, item.id, item.lastUpdate, item.dataSource]); - // 使用传入的 isLoading 状态，如果为 true 则显示 loading + // 判断是否显示loading const shouldShowLoading = loading || isLoading; return (
+ {/* 加载状态 */} {shouldShowLoading ? (
) : null} + {/* 图表容器 */}
void; - finished: () => void; + current: any; // 当前数据对象 + filterConfig: any; // 筛选配置数据 + onUpdateConfig: (values: any) => void; // 更新配置的回调函数 + finished: () => void; // 完成操作的回调函数 } /** - * 数据看板筛选配置 - * @param props - * @returns + * 数据看板筛选配置组件 + * 用于配置数据看板的筛选条件 + * @param props 组件属性对象 + * @returns JSX元素 */ const DashboardFilterConfig: React.FC = ({ - current, - filterConfig, - onUpdateConfig, - finished, + current, // 当前数据对象 + filterConfig, // 筛选配置数据 + onUpdateConfig, // 更新配置的回调 + finished, // 完成操作的回调 }) => { + // 定义组织树数据的状态 const [organizationalTree, setOrganizationalTree] = useState([]); + // 组件挂载时初始化组织树数据 useEffect(() => { gerOrganizationalTree(); }, []); + + // 获取组织树数据的异步函数 const gerOrganizationalTree = async () => { const treeData = (await current.directory.target.resource.reportTreeColl.all()) ?? []; setOrganizationalTree(treeData); }; + // 初始化表单默认值 let initialValue: any = typeof filterConfig === 'object' && Object.keys(filterConfig).length > 0 ? filterConfig : {}; + + // 创建表单实例的引用 const formRef = useRef(); + + // 定义表单列配置 const columns: ProFormColumnsType[] = [ { - title: '查询组织树', - dataIndex: 'organizationTree', - colProps: { span: 24 }, - renderFormItem: (_, __, form) => { + title: '查询组织树', // 列标题 + dataIndex: 'organizationTree', // 数据字段名 + colProps: { span: 24 }, // 列布局属性 + renderFormItem: (_, __, form) => { // 自定义表单项渲染 return (