fix(EC_HistoryView): 历史曲线添加报警阈值线

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

 import React, { memo, useEffect, useMemo, useRef } from 'react';
 import { BasicChart } from '@wisdom-components/basicchart';
 import PandaEmpty from '@wisdom-components/empty';
-import optionGenerator from './utils';
+import optionGenerator, { alarmMarkLine } from './utils';
 import { isArray, cloneDeep } from 'lodash';
 
 const SimgleChart = memo((props) => {
@@ -12,6 +12,7 @@ const SimgleChart = memo((props) => {
     smooth = true,
     curveCenter,
     showGridLine = false,
+    deviceAlarmSchemes,
   } = props;
   const chartRef = useRef();
 
@@ -20,13 +21,34 @@ const SimgleChart = memo((props) => {
       needUnit: true,
       curveCenter,
       showGridLine,
+      deviceAlarmSchemes,
     };
     return optionGenerator(dataSource, null, contrast, contrastOption, smooth, config);
   }, [dataSource, smooth, curveCenter]);
 
   useEffect(() => {
     chartRef.current?.resize?.();
-  }, []);
+    const chart = chartRef.current.getEchartsInstance();
+
+    function hander(params) {
+      const { selected } = params;
+      const count = Object.values(selected || {}).filter((item) => item).length;
+      const option = cloneDeep(chart.getOption());
+      const needMarkLine = count === 1;
+      option.series.forEach((item, index) => {
+        item.markLine =
+          needMarkLine && selected[item.name]
+            ? alarmMarkLine(dataSource[index], index, [dataSource[index]], deviceAlarmSchemes)
+            : {};
+      });
+      chart.setOption(option, true);
+    }
+    if (!chart) return;
+    chart.on('legendselectchanged', hander);
+    return () => {
+      chart.off('legendselectchanged', hander);
+    };
+  }, [dataSource, deviceAlarmSchemes]);
 
   // 网格开关，不更新整个图表
   useEffect(() => {
@@ -48,9 +70,9 @@ const SimgleChart = memo((props) => {
       minorSplitLine: {
         show: showGridLine,
       },
-      splitLine: {
-        show: showGridLine,
-      },
+      // splitLine: {
+      //   show: showGridLine,
+      // },
     };
     let yAxis = axisConfig;
     if (isArray(option.yAxis)) {

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

@@ -5,12 +5,21 @@ const REQUEST_METHOD_POST = 'post';
 // eslint-disable-next-line no-undef
 const baseUrl = typeof DUMI_TYPE !== 'undefined' && DUMI_TYPE === 'dumi' ? '/api' : '';
 
-
+const monitorDeviceUrl = `${baseUrl}/PandaMonitor/Monitor/Device`;
 // 获取历史数据
 export function getHistoryInfo(data) {
   return request({
-    url: `${baseUrl}/PandaMonitor/Monitor/Device/GetSensorsDataForStation`,
+    url: `${monitorDeviceUrl}/GetSensorsDataForStation`,
     method: REQUEST_METHOD_POST,
     data,
   });
 }
+
+// 获取指标报警方案配置
+export function getDeviceAlarmScheme(option) {
+  return request({
+    url: `${monitorDeviceUrl}/GetDeviceAlarmScheme`,
+    method: REQUEST_METHOD_POST,
+    ...option,
+  });
+}

packages/extend-components/EC_HistoryView/src/demos/GridDemo.js

@@ -6,16 +6,19 @@ const deviceParams = [
     deviceCode: 'EGBF00000146',
     sensors: '进水压力,出水瞬时流量,出水累计流量',
     deviceType: '二供泵房',
+    pointAddressID: 4,
   },
   {
     deviceCode: 'EGBF00000001',
     sensors: '进水压力,出水瞬时流量,出水累计流量',
     deviceType: '二供泵房',
+    pointAddressID: 4,
   },
   {
     deviceCode: 'EGBF00000002',
     sensors: '进水压力,出水瞬时流量,出水累计流量',
     deviceType: '二供泵房',
+    pointAddressID: 4,
   },
 ];
 const Demo = () => {

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

@@ -6,12 +6,20 @@ const deviceParams = [
     deviceCode: 'EGBF00000146',
     sensors: '进水压力,出水瞬时流量,出水累计流量',
     deviceType: '二供泵房',
+    pointAddressID: 4,
   },
   {
     deviceCode: 'EGJZ00001113',
     sensors: '出水瞬时流量,出水压力,泵1状态',
     deviceType: '二供机组',
+    pointAddressID: 4,
   },
+  // {
+  //   deviceCode: 'EGJZ00001113',
+  //   sensors: '出水压力',
+  //   deviceType: '二供机组',
+  //   pointAddressID: 4,
+  // },
 ];
 const Demo = () => {
   return (

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

@@ -8,7 +8,7 @@ import _ from 'lodash';
 import TimeRangePicker from '@wisdom-components/timerangepicker';
 import PandaEmpty from '@wisdom-components/empty';
 import BasicTable from '@wisdom-components/basictable';
-import { getHistoryInfo } from './apis';
+import { getHistoryInfo, getDeviceAlarmScheme } from './apis';
 import SimgleChart from './SingleChart';
 import GridChart from './GridChart';
 import './index.less';
@@ -528,10 +528,36 @@ const HistoryView = (props) => {
     setTableData(tableData);
   };
 
+  const [deviceAlarmSchemes, setDeviceAlarmSchemes] = useState([]);
+  const beforChangeParams = (value = {}) => {
+    const NeedSchemeDeviceParams = (deviceParams || []).filter(
+      (item) => !isNaN(Number(item.pointAddressID)),
+    );
+    if (!NeedSchemeDeviceParams.length) return Promise.resolve();
+    return getDeviceAlarmScheme({
+      data: NeedSchemeDeviceParams.map((item) => ({
+        deviceType: item.deviceType,
+        deviceCode: item.deviceCode,
+        pointAddressID: item.pointAddressID,
+        sensorName: item.sensors,
+      })),
+    })
+      .then((res) => {
+        if (res.code === 0) setDeviceAlarmSchemes(res.data || []);
+        else setDeviceAlarmSchemes([]);
+        return Promise.resolve();
+      })
+      .catch((err) => {
+        setDeviceAlarmSchemes([]);
+        return Promise.resolve();
+      });
+  };
+
   // 处理接口服务参数的变化
   const onChangeParams = (value = {}) => {
     const { dateRange, isDilute, ignoreOutliers, zoom, unit } = value;
     const requestArr = [];
+    const acrossTables = deviceParams.map((item) => _.omit(item, ['pointAddressID']));
     dateRange.forEach((item) => {
       const param = {
         isDilute,
@@ -541,7 +567,7 @@ const HistoryView = (props) => {
         isVertical: false, // 是否查询竖表
         dateFrom: item.dateFrom,
         dateTo: item.dateTo,
-        acrossTables: deviceParams,
+        acrossTables,
       };
       requestArr.push(getHistoryInfo(param));
     });
@@ -580,12 +606,14 @@ const HistoryView = (props) => {
 
   useEffect(() => {
     const { dataThin, ignoreOutliers, zoom, unit } = dataConfig;
-    onChangeParams({
-      isDilute: dataThin,
-      ignoreOutliers,
-      zoom,
-      unit,
-      dateRange,
+    beforChangeParams().finally(() => {
+      onChangeParams({
+        isDilute: dataThin,
+        ignoreOutliers,
+        zoom,
+        unit,
+        dateRange,
+      });
     });
   }, [dateRange, dataConfig, deviceParams]);
 
@@ -625,6 +653,7 @@ const HistoryView = (props) => {
                   dataSource={chartDataSource}
                   contrast={timeValue === 'contrast'}
                   contrastOption={contrastOption}
+                  deviceAlarmSchemes={deviceAlarmSchemes}
                 />
               ) : (
                 <SimgleChart
@@ -634,6 +663,7 @@ const HistoryView = (props) => {
                   dataSource={chartDataSource}
                   contrast={timeValue === 'contrast'}
                   contrastOption={contrastOption}
+                  deviceAlarmSchemes={deviceAlarmSchemes}
                 />
               )}
             </div>
@@ -679,6 +709,7 @@ HistoryView.propTypes = {
       deviceCode: PropTypes.string,
       sensors: PropTypes.string,
       deviceType: PropTypes.string,
+      pointAddressID: PropTypes.number, // 可选，配置了将会查询相关报警方案配置
     }),
   ),
 };

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

@@ -67,6 +67,45 @@ const minMax = (data) => {
   return [min, max];
 };
 
+const markLineItem = (name, value, color) => {
+  return {
+    name: name,
+    yAxis: value,
+    value: value,
+    lineStyle: {
+      color: color || '#000',
+    },
+    label: {
+      position: 'insideEndTop',
+      color: color || '#000',
+    },
+  };
+};
+
+export const alarmMarkLine = (dataItem, index, dataSource, schemes) => {
+  // 只有一个数据曲线时显示markline
+  if (!dataItem || !schemes || dataSource.length !== 1) return {};
+  const { deviceType, stationCode, sensorName } = dataItem;
+  const curSchemes = schemes.filter(
+    (item) =>
+      item.deviceCode === stationCode &&
+      item.sensorName === sensorName &&
+      item.valueType === '直接取值',
+  );
+  const data = [];
+  curSchemes.forEach((scheme) => {
+    const { hLimit, hhLimit, lLimit, llLimit } = scheme;
+    lLimit !== null && lLimit !== void 0 && data.push(markLineItem('低限', lLimit, '#13c2c2'));
+    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'));
+  });
+  return {
+    symbol: ['none', 'none'],
+    data,
+  };
+};
+
 /**
  * 图表配置项生成
  *
@@ -82,6 +121,8 @@ const optionGenerator = (dataSource, cusOption, contrast, contrastOption, smooth
   const curveCenter = _.get(config, 'curveCenter', false);
   const nameWithSensor = _.get(config, 'nameWithSensor', true);
   const showGridLine = _.get(config, 'showGridLine', false);
+  const deviceAlarmSchemes = _.get(config, 'deviceAlarmSchemes', []);
+
   // 自定义属性
   const restOption = _.pick(cusOption, ['title', 'legend']);
 
@@ -159,13 +200,14 @@ const optionGenerator = (dataSource, cusOption, contrast, contrastOption, smooth
     return { get };
   })();
 
-  const series = dataSource.map((item) => {
+  const series = dataSource.map((item, index) => {
     const { sensorName, unit } = item;
     const name = nameFormatter(item, contrast, contrastOption, nameWithSensor);
     const data = dataAccessor(item, contrast, contrastOption);
     const type = 'line';
     const areaStyle = areaStyleFormatter(item);
     const yAxisIndex = yAxisInterator.get(sensorName);
+    const markLine = alarmMarkLine(item, index, dataSource, deviceAlarmSchemes);
     return {
       notMerge: true,
       name,
@@ -175,6 +217,7 @@ const optionGenerator = (dataSource, cusOption, contrast, contrastOption, smooth
       yAxisIndex,
       smooth,
       unit,
+      markLine,
     };
   });