feat: 优化图表代码

packages/extend-components/EC_HistoryView/src/SingleChart.js

@@ -14,7 +14,8 @@ const SimgleChart = memo((props) => {
     showGridLine = true,
     deviceAlarmSchemes,
     chartType,
-    justLine
+    justLine,
+    showBoxOption
   } = props;
   const chartRef = useRef();
 
@@ -27,7 +28,8 @@ const SimgleChart = memo((props) => {
       showMarkLine: true,
       showPoint: true,
       chartType,
-      justLine
+      justLine,
+      showBoxOption
     };
     return optionGenerator(dataSource, null, contrast, contrastOption, smooth, config);
   }, [dataSource, smooth, curveCenter]);

packages/extend-components/EC_HistoryView/src/index.js

@@ -256,6 +256,7 @@ const HistoryView = (props) => {
     const [chartDataSource, setChartDataSource] = useState([]);
 
     const [chartType, setChartType] = useState('lineChart');
+    const [showBoxOption, setShowBoxOption] = useState(true);
     // 选择的时间范围值
     const dateRange = useMemo(() => {
         if (timeValue === 'customer') {
@@ -357,9 +358,13 @@ const HistoryView = (props) => {
         if (e.target.value === 'contrast') {
             // 同期对比
             onContrastChange(contrastOption);
+            setShowBoxOption(false);
+            setChartType('lineChart');
+            onCheckboxChange({target: {value: false}}, 'chartType')
         } else {
             // 自定义
             // 不需要处理
+            setShowBoxOption(true)
         }
     };
 
@@ -475,7 +480,7 @@ const HistoryView = (props) => {
         return (
             <div className={classNames(`${prefixCls}-cover`)} style={isChart && isSingle ? {width: '100%'} : {}}>
                 {
-                    isChart && isSingle ? <>
+                    isChart && isSingle && showBoxOption ? <>
                         <div className={classNames(`${prefixCls}-label`)}>曲线形态</div>
                         <Radio.Group value={chartType} style={{marginRight: 16}} onChange={(e) => {
                             let _value = e.target.value;
@@ -770,6 +775,7 @@ const HistoryView = (props) => {
                             />
                         ) : (
                             <SimgleChart
+                                showBoxOption={showBoxOption}
                                 curveCenter={curveCenter}
                                 showGridLine={chartGrid}
                                 prefixCls={prefixCls}

packages/extend-components/EC_HistoryView/src/utils.js

@@ -41,7 +41,8 @@ const nameFormatter = (data, contrast, contrastOption, nameWithSensor) => {
  */
 const dataAccessor = (data, contrast, contrastOption) => {
     const {dataModel} = data;
-    const formatStr = contrastOption === 'day' ? '2020-01-01 HH:mm:00' : '2020-01-DD HH:mm:00';
+    let _currentYear = moment().format('YYYY');
+    const formatStr = contrastOption === 'day' ? `${_currentYear}-01-01 HH:mm:00` : `${_currentYear}-01-DD HH:mm:00`;
     return dataModel.filter(item => item.sensorName !== '是否在线').map((item) => {
         const time = contrast ? moment(item.pt).format(formatStr) : item.pt;
         return [moment(time).valueOf(), item.pv];
@@ -258,6 +259,7 @@ const optionGenerator = (dataSource, cusOption, contrast, contrastOption, smooth
     const deviceAlarmSchemes = _.get(config, 'deviceAlarmSchemes', []);
     const chartType = _.get(config, 'chartType', null);
     const justLine = _.get(config, 'justLine', false);
+    const showBoxOption = _.get(config, 'showBoxOption', false);
     // 自定义属性
     const restOption = _.pick(cusOption, ['title', 'legend']);
 
@@ -331,6 +333,7 @@ const optionGenerator = (dataSource, cusOption, contrast, contrastOption, smooth
     };
     const seriesTemplate = (param, unit) => {
         if (!param) return '';
+        console.log(param);
         const {value, encode} = param;
         // const val = value[encode.y[0]];
         const _unit = unit || 'Mpa';
@@ -340,7 +343,11 @@ const optionGenerator = (dataSource, cusOption, contrast, contrastOption, smooth
             <span style="color:${color};margin: 0 5px 0 auto;">${value?.toFixed(3) ?? '-'}</span>
             <span style="font-size: 12px;">${_unit}</span>
         </div>`;
-        return `
+        return param.componentSubType !== 'candlestick' ? `<div style="display: flex; align-items: center;">
+              <span>${param.seriesName}</span><span style="display:inline-block;">：</span>
+              <span style="color: ${COLOR.AVG};margin: 0 5px 0 auto;">${value[1] ?? '-'}</span>
+              <span style="font-size: 12px;">${_unit}</span>
+            </div>` : `
             <div style="display: flex; align-items: center;">
               <span>首值</span><span style="display:inline-block;">：</span>
               <span style="color: ${COLOR.AVG};margin: 0 5px 0 auto;">${value[1] ?? '-'}</span>
@@ -366,6 +373,7 @@ const optionGenerator = (dataSource, cusOption, contrast, contrastOption, smooth
     const tooltipAccessor = (unit) => {
         return {
             formatter: function (params, ticket, callback) {
+                debugger
                 let tooltipHeader = '';
                 let tooltipContent = '';
                 if (isArray(params)) {
@@ -377,7 +385,7 @@ const optionGenerator = (dataSource, cusOption, contrast, contrastOption, smooth
                     tooltipHeader = headTemplate(params);
                     tooltipContent += seriesTemplate(params, unit);
                 }
-
+                debugger
                 return `
       <div>
         ${tooltipHeader}
@@ -463,7 +471,7 @@ const optionGenerator = (dataSource, cusOption, contrast, contrastOption, smooth
         // }
     };
     // 增加箱线图的逻辑，单曲线才存在
-    if (!justLine && chartType) {
+    if (!justLine && chartType && showBoxOption) {
         if (chartType === 'boxChart') {
             const otherData = dataSource?.[0]?.dataModel.map(item => {
                 const {firstPV, lastPV, maxPV, minPV, pt} = item;
@@ -497,17 +505,22 @@ const optionGenerator = (dataSource, cusOption, contrast, contrastOption, smooth
         } else {
             let _maxData = [];
             let _minData = [];
-            const formatStr = contrastOption === 'day' ? '2020-01-01 HH:mm:00' : '2020-01-DD HH:mm:00';// 用来做同期对比，把日期拉到同一区间
+            let _currentYear = moment().format('YYYY');
+            const formatStr = contrastOption === 'day' ? `${_currentYear}-01-01 HH:mm:00` : `${_currentYear}-01-DD HH:mm:00`;// 用来做同期对比，把日期拉到同一区间
+            let _maxValues = [];
             dataSource?.[0]?.dataModel.forEach(item => {
                 const {firstPV, lastPV, maxPV, minPV, pt} = item;
+                _maxValues.push(maxPV);
                 let time = contrast ? moment(pt).format(formatStr) : pt;
-                _maxData.push([moment(time).valueOf(), maxPV - minPV]);
+                _maxData.push([moment(time).valueOf(), (maxPV - minPV).toFixed(2)]);
                 _minData.push([moment(time).valueOf(), minPV]);
             }); //当存在othersData的时候，只是单曲线
             // xAxis = {type: 'category', data: series[0].data.map(item => moment(item[0]).format('YYYY-MM-DD HH:mm:ss'))};
             xAxis = {type: 'time'};
             decorateAxisGridLine(xAxis, showGridLine);
+            let _unit = ''
             series = series.map(item => {
+                _unit = item.unit;
                 let _item = {...item, symbol: 'none'};
                 /*                _item.data = _item?.data?.map(d => {
                                     return d[1] || null
@@ -533,6 +546,30 @@ const optionGenerator = (dataSource, cusOption, contrast, contrastOption, smooth
                     symbol: 'none'
                 });
             })
+            tooltip = {
+                formatter: (e) => {
+                    return `<div>
+                    ${headTemplate(e[0])}
+                    <div>
+                        <div style="display: flex; align-items: center;">
+                              <span>${e[0].seriesName}</span><span style="display:inline-block;">：</span>
+                              <span style="color: ${COLOR.NORMAL};margin: 0 5px 0 auto;">${e[0]?.value?.[1] ?? '-'}</span>
+                              <span style="font-size: 12px;">${_unit}</span>
+                            </div>
+                            <div style="display: flex; align-items: center;">
+                              <span>最小值</span><span style="display:inline-block;">：</span>
+                              <span style="color: ${COLOR.AVG};margin: 0 5px 0 auto;">${e[1]?.value?.[1] ?? '-'}</span>
+                              <span style="font-size: 12px;">${_unit}</span>
+                            </div>
+                            <div style="display: flex; align-items: center;">
+                              <span>最大值</span><span style="display:inline-block;">：</span>
+                              <span style="color: ${COLOR.AVG};margin: 0 5px 0 auto;">${_maxValues[e[2].dataIndex] ?? '-'}</span>
+                              <span style="font-size: 12px;">${_unit}</span>
+                            </div>
+                        </div>
+                    </div>`
+                }
+            }
         }
     }
     restOption.dataZoom = [