fix(EC_HistoryView): 添加网格、滤波配置、单图表十字指示器

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

@@ -70,6 +70,7 @@ const GridChart = memo((props) => {
       const option = optionGenerator(list, cusOption, contrast, contrastOption, smooth, {
         curveCenter,
         nameWithSensor: false,
+        showGridLine: false,
       });
       return {
         key,

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

@@ -10,6 +10,7 @@ const SimgleChart = memo((props) => {
     contrastOption = 'day',
     smooth = true,
     curveCenter,
+    showGridLine = false,
   } = props;
   const chartRef = useRef();
 
@@ -17,12 +18,43 @@ const SimgleChart = memo((props) => {
     const config = {
       needUnit: true,
       curveCenter,
+      showGridLine,
     };
     return optionGenerator(dataSource, null, contrast, contrastOption, smooth, config);
-  }, [dataSource, smooth, curveCenter]);
+  }, [dataSource, smooth, curveCenter, showGridLine]);
 
   useEffect(() => {
     chartRef.current?.resize?.();
+    const chart = chartRef.current.getEchartsInstance();
+
+    function hander(params) {
+      const { selected } = params;
+      const count = Object.values(selected || {}).filter((item) => item).length;
+      if (count === 1) {
+        chart.setOption({
+          tooltip: {
+            trigger: 'axis',
+            axisPointer: {
+              type: 'cross',
+            },
+          },
+        });
+      } else {
+        chart.setOption({
+          tooltip: {
+            trigger: 'axis',
+            axisPointer: {
+              type: 'line',
+            },
+          },
+        });
+      }
+    }
+    if (!chart) return;
+    chart.on('legendselectchanged', hander);
+    return () => {
+      chart.off('legendselectchanged', hander);
+    };
   }, []);
 
   // 数据都为空显示缺省页

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

@@ -48,18 +48,31 @@ const CheckboxData = [
     key: 'curveCenter',
     label: '曲线居中',
     checked: false,
+    showInCurve: true,
+    showInTable: false,
+  },
+  {
+    key: 'chartGrid',
+    label: '图表网格',
+    checked: false,
+    showInCurve: true,
+    showInTable: false,
   },
   {
     key: 'ignoreOutliers',
-    label: '过滤异常值',
+    label: '滤波',
     type: 'updateIgnoreOutliers',
     checked: false,
+    showInCurve: true,
+    showInTable: true,
   },
   {
     key: 'dataThin',
     label: '数据抽稀',
     type: 'updateDataThin',
     checked: true,
+    showInCurve: false,
+    showInTable: true,
   },
 ];
 
@@ -218,6 +231,10 @@ const HistoryView = (props) => {
     }
   }, [contrastOption, customerChecked, customerTime, datePickerArr, timeValue]);
 
+  const configDependence = checkboxData
+    .filter((item) => ['curveCenter', 'chartGrid'].indexOf(item.key) === -1)
+    .map((item) => item.checked)
+    .join(',');
   // 数据配置
   const dataConfig = useMemo(() => {
     const initial = {
@@ -238,13 +255,14 @@ const HistoryView = (props) => {
     config.dataThin = activeTabKey === 'curve' ? true : config.dataThin; // 曲线强制抽稀
 
     return config;
-  }, [checkboxData, dataThinKey, activeTabKey]);
+  }, [configDependence, dataThinKey, activeTabKey]);
 
   // 图表居中
-  const curveCenter = useMemo(
-    () => checkboxData.find((item) => item.key === 'curveCenter')?.checked,
-    [checkboxData],
-  );
+  const [curveCenter, chartGrid] = useMemo(() => {
+    const curveCenter = checkboxData.find((item) => item.key === 'curveCenter')?.checked;
+    const chartGrid = checkboxData.find((item) => item.key === 'chartGrid')?.checked;
+    return [curveCenter, chartGrid];
+  }, [checkboxData]);
 
   // 自定义模式: 快速选择
   const onCustomerTimeChange = (key) => {
@@ -385,11 +403,14 @@ const HistoryView = (props) => {
     setDataThinKey(value);
   };
 
-  const renderCheckbox = (child) => (
-    <Checkbox checked={child.checked} onChange={(e) => onCheckboxChange(e, child.key)}>
-      {child.label}
-    </Checkbox>
-  );
+  const renderCheckbox = (child) =>
+    ((activeTabKey === 'curve' && !grid && child.showInCurve) ||
+      (activeTabKey === 'curve' && grid && child.key === 'curveCenter') ||
+      (activeTabKey === 'table' && child.showInTable)) && (
+      <Checkbox checked={child.checked} onChange={(e) => onCheckboxChange(e, child.key)}>
+        {child.label}
+      </Checkbox>
+    );
 
   const renderCurveOption = () => {
     return (
@@ -397,8 +418,9 @@ const HistoryView = (props) => {
         <div className={classNames(`${prefixCls}-label`)}>曲线设置</div>
         {checkboxData.map((child) => (
           <div key={child.key}>
-            {activeTabKey === 'curve' && child.key === 'curveCenter' && renderCheckbox(child)}
-            {activeTabKey === 'table' && child.key !== 'curveCenter' && renderCheckbox(child)}
+            {renderCheckbox(child)}
+            {/* {activeTabKey === 'curve' && child.key === 'curveCenter' && renderCheckbox(child)} */}
+            {/* {activeTabKey === 'table' && child.key !== 'curveCenter' && renderCheckbox(child)} */}
           </div>
         ))}
         {activeTabKey === 'table' && (
@@ -607,6 +629,7 @@ const HistoryView = (props) => {
               ) : (
                 <SimgleChart
                   curveCenter={curveCenter}
+                  showGridLine={chartGrid}
                   prefixCls={prefixCls}
                   dataSource={chartDataSource}
                   contrast={timeValue === 'contrast'}

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

@@ -81,6 +81,7 @@ const optionGenerator = (dataSource, cusOption, contrast, contrastOption, smooth
   const needUnit = _.get(config, 'needUnit', false);
   const curveCenter = _.get(config, 'curveCenter', false);
   const nameWithSensor = _.get(config, 'nameWithSensor', true);
+  const showGridLine = _.get(config, 'showGridLine', false);
   // 自定义属性
   const restOption = _.pick(cusOption, ['title', 'legend']);
 
@@ -106,6 +107,17 @@ const optionGenerator = (dataSource, cusOption, contrast, contrastOption, smooth
         nameTextStyle: {
           align: i % 2 === 0 ? 'right' : 'left',
         },
+        minorTick: {
+          lineStyle: {
+            color: '#e2e2e2',
+          },
+        },
+        minorSplitLine: {
+          lineStyle: {
+            color: '#e2e2e2',
+            type: 'dashed',
+          },
+        },
       };
       yAxisMap.set(key, axis);
     }
@@ -117,6 +129,16 @@ const optionGenerator = (dataSource, cusOption, contrast, contrastOption, smooth
       axis.min = axis.min === void 0 ? min : Math.min(min, axis.min);
       axis.max = axis.max === void 0 ? max : Math.max(max, axis.max);
     }
+
+    // 网格显示
+    if (showGridLine) {
+      const axis = yAxisMap.get(key);
+      axis.minorTick ? (axis.minorTick.show = true) : (axis.minorTick = { show: true });
+      axis.minorSplitLine
+        ? (axis.minorSplitLine.show = true)
+        : (axis.minorSplitLine = { show: true });
+      axis.splitLine ? (axis.splitLine.show = true) : (axis.splitLine = { show: true });
+    }
   });
   const yAxis = yAxisMap.size > 0 ? [...yAxisMap.values()] : { type: 'value' };
 
@@ -172,7 +194,13 @@ const optionGenerator = (dataSource, cusOption, contrast, contrastOption, smooth
     : contrastOption === 'day'
     ? 'HH:mm'
     : 'DD HH:mm';
-  const tooltip = { timeFormat: tooltipTimeFormat };
+  const tooltip = {
+    timeFormat: tooltipTimeFormat,
+    // trigger: 'axis',
+    // axisPointer: {
+    //   type: 'cross'
+    // }
+  };
 
   return {
     yAxis,