import React, { memo, useMemo } from 'react'; import _ from 'lodash'; import { BasicChart } from '@wisdom-components/basicchart'; import PandaEmpty from '@wisdom-components/empty'; import optionGenerator from './utils'; const ChartTitle = ({ prefixCls, title, unit }) => { const cls = `${prefixCls}-grid-item-title`; return ( <div className={cls}> <span className={`${cls}_text`}>{title}</span> {unit && <span className={`${cls}_unit`}>(单位:{unit})</span>} </div> ); }; const GridChart = memo((props) => { const { dataSource, contrast = false, contrastOption = 'day', smooth = true, curveCenter, } = props; const { prefixCls } = props; const gridData = useMemo(() => { const grids = dataSource.reduce((pre, item, index) => { const { sensorName, deviceType } = item; const key = `${deviceType}_${sensorName}`; // 同设备类型同指标才在同一组 let grid = pre.find((g) => g.key === key); if (!grid) { const restProp = _.pick(item, ['equipmentName', 'sensorName', 'stationCode', 'unit']); grid = { key: key, list: [], ...restProp, }; pre.push(grid); } grid.list.push(item); return pre; }, []); return grids; }, [dataSource]); const options = useMemo(() => { return gridData.map((item) => { const { key, list, equipmentName, sensorName, stationCode, unit } = item; const cusOption = { title: { show: true, // text: `{prefix|}{t|${sensorName}}${unit ? '{suffix|(单位:' + unit + ')}' : ''}`, text: ' ', textStyle: { width: 200, overflow: 'truncate', }, }, legend: { // orient: 'vertical', itemGap: 10, padding: [0, 0, 0, 200], textStyle: { width: 120, overflow: 'truncate', }, }, }; const option = optionGenerator(list, cusOption, contrast, contrastOption, smooth, { curveCenter, nameWithSensor: false, showGridLine: true, }); return { key, option: option, }; }); }, [gridData, smooth, curveCenter]); return ( <div className={`${prefixCls}-grid`}> {options.map((item, index) => { const { sensorName, unit } = gridData[index]; const isEmpty = !item.option.series.length || !item.option.series.find((e) => e.data && e.data.length > 0); return ( <div key={item.key} className={`${prefixCls}-grid-item`}> <div className={`${prefixCls}-grid-item-wrap`}> <ChartTitle prefixCls={prefixCls} title={sensorName} unit={unit} /> {isEmpty ? ( <PandaEmpty /> ) : ( <BasicChart style={{ width: '100%', height: '100%' }} option={item.option} notMerge /> )} </div> </div> ); })} </div> ); }); export default GridChart;