fix(EC_HistoryView): 优化标识线显示

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

@@ -69,16 +69,21 @@ const SimgleChart = memo((props) => {
       },
       minorSplitLine: {
         show: showGridLine,
+        lineStyle: {
+          type: 'dashed',
+        },
+      },
+      splitLine: {
+        show: showGridLine,
       },
-      // splitLine: {
-      //   show: showGridLine,
-      // },
     };
     let yAxis = axisConfig;
     if (isArray(option.yAxis)) {
       yAxis = option.yAxis.map((item) => ({ ...axisConfig }));
     }
+    let xAxis = axisConfig;
     chart.setOption({
+      xAxis,
       yAxis,
       tooltip,
     });

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

@@ -205,7 +205,16 @@ const HistoryView = (props) => {
   const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);
   const prefixCls = getPrefixCls('history-view');
 
-  const { title, grid, defaultChecked, tableProps, deviceParams, defaultModel, showModels } = props;
+  const {
+    title,
+    grid,
+    defaultChecked,
+    tableProps,
+    deviceParams,
+    defaultModel,
+    showModels,
+    needMarkLine,
+  } = props;
 
   const [loading, setLoading] = useState(false);
   const [activeTabKey, setActiveTabKey] = useState(defaultModel);
@@ -551,12 +560,9 @@ const HistoryView = (props) => {
 
   const [deviceAlarmSchemes, setDeviceAlarmSchemes] = useState([]);
   const beforChangeParams = (value = {}) => {
-    const NeedSchemeDeviceParams = (deviceParams || []).filter(
-      (item) => !isNaN(Number(item.pointAddressID)),
-    );
-    if (!NeedSchemeDeviceParams.length) return Promise.resolve();
+    if (!needMarkLine) return Promise.resolve();
     return getDeviceAlarmScheme({
-      data: NeedSchemeDeviceParams.map((item) => ({
+      data: deviceParams.map((item) => ({
         deviceType: item.deviceType,
         deviceCode: item.deviceCode,
         pointAddressID: item.pointAddressID,
@@ -766,6 +772,7 @@ HistoryView.defaultProps = {
   tableProps: {},
   defaultModel: 'curve',
   showModels: ['curve', 'table'],
+  needMarkLine: true,
 };
 
 export default HistoryView;

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

@@ -78,6 +78,9 @@ const markLineItem = (name, value, color) => {
     label: {
       position: 'insideEndTop',
       color: color || '#000',
+      formatter: function () {
+        return `${name}:${value}`;
+      },
     },
   };
 };
@@ -85,7 +88,7 @@ const markLineItem = (name, value, color) => {
 export const alarmMarkLine = (dataItem, index, dataSource, schemes) => {
   // 只有一个数据曲线时显示markline
   if (!dataItem || !schemes || dataSource.length !== 1) return {};
-  const { deviceType, stationCode, sensorName } = dataItem;
+  const { deviceType, stationCode, sensorName, decimalPoint } = dataItem;
   const curSchemes = schemes.filter(
     (item) =>
       item.deviceCode === stationCode &&
@@ -95,10 +98,30 @@ export const alarmMarkLine = (dataItem, index, dataSource, schemes) => {
   const data = [];
   curSchemes.forEach((scheme) => {
     const { hLimit, hhLimit, lLimit, llLimit } = scheme;
-    lLimit !== null && lLimit !== void 0 && data.push(markLineItem('低限', lLimit, '#13c2c2'));
+    lLimit !== null && lLimit !== void 0 && data.push(markLineItem('低限', lLimit, '#fa8c16'));
     hLimit !== null && hLimit !== void 0 && data.push(markLineItem('高限', hLimit, '#fa8c16'));
-    llLimit !== null && llLimit !== void 0 && data.push(markLineItem('低低限', llLimit, '#2f54eb'));
-    hhLimit !== null && hhLimit !== void 0 && data.push(markLineItem('高高限', hhLimit, '#f5222d'));
+    llLimit !== null && llLimit !== void 0 && data.push(markLineItem('低低限', llLimit, '#FF0000'));
+    hhLimit !== null && hhLimit !== void 0 && data.push(markLineItem('高高限', hhLimit, '#FF0000'));
+  });
+  // 添加均值线
+  const sum = (dataItem.dataModel || []).reduce(
+    (pre, item) => (isNaN(Number(item.pv)) ? pre : item.pv),
+    0,
+  );
+  data.push({
+    name: '平均线',
+    type: 'average',
+    lineStyle: {
+      color: '#00b8b1',
+      type: 'solid',
+    },
+    label: {
+      position: 'insideEndTop',
+      color: '#00b8b1',
+      formatter: function (param) {
+        return `平均值:${param.value}`;
+      },
+    },
   });
   return {
     symbol: ['none', 'none'],
@@ -106,6 +129,39 @@ export const alarmMarkLine = (dataItem, index, dataSource, schemes) => {
   };
 };
 
+/**
+ * 坐标轴添加网格线配置
+ *
+ * @param {any} axis
+ */
+export const decorateAxisGridLine = (axis, showGrid) => {
+  if (!axis) return;
+  axis.minorTick = {
+    lineStyle: {
+      color: '#e2e2e2',
+    },
+    ...(axis.minorTick || {}),
+    show: showGrid,
+  };
+  axis.minorSplitLine = {
+    lineStyle: {
+      color: '#e2e2e2',
+      type: 'dashed',
+    },
+    ...(axis.minorSplitLine || {}),
+    show: showGrid,
+  };
+  axis.splitLine = {
+    ...(axis.splitLine || {}),
+    show: showGrid,
+  };
+  // 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 });
+};
+
 /**
  * 图表配置项生成
  *
@@ -172,14 +228,8 @@ const optionGenerator = (dataSource, cusOption, contrast, contrastOption, smooth
     }
 
     // 网格显示
-    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 axis = yAxisMap.get(key);
+    decorateAxisGridLine(axis, showGridLine);
   });
   const yAxis = yAxisMap.size > 0 ? [...yAxisMap.values()] : { type: 'value' };
 
@@ -231,6 +281,7 @@ const optionGenerator = (dataSource, cusOption, contrast, contrastOption, smooth
       .filter((item) => item !== undefined),
   );
   const xAxis = { type: 'time', min, max };
+  decorateAxisGridLine(xAxis, showGridLine);
 
   const tooltipTimeFormat = !contrast
     ? 'YYYY-MM-DD HH:mm:ss'