fix: update history info

packages/DeviceTree/src/demos/Basic.tsx

@@ -15,8 +15,8 @@ const Demo = () => {
     request(`${baseUrl}/Publish/Monitor/Device/DeviceTree`, {
       method: 'post',
       data: {
-        PageIndex: 1,
-        PageSize: 500,
+        pageIndex: 1,
+        pageSize: 500,
         deviceTypes: '二供泵房,二供机组',
         getChild: true,
         userID: 1,

packages/HistoryInfo/src/demos/Basic.tsx

@@ -52,15 +52,16 @@ const Demo = () => {
     let seriesData = [];
     resData.forEach((item) => {
       let data = [];
-      let obj = {};
-      obj.name = item.EquipmentName + item.sensorName;
       item.dataModel.forEach((child) => {
-        data.push({
-          x: moment(child.PT).valueOf(),
-          y: child.PV,
-        });
+        data.push([moment(child.PT).valueOf(), child.PV]);
       });
-      obj.data = data;
+      let obj = {
+        name: item.EquipmentName + item.sensorName,
+        sensorName: item.sensorName,
+        decimalPoint: item.decimalPoint,
+        unit: item.unit,
+        data: data,
+      };
       seriesData.push(obj);
     });
     setSeries(seriesData);

packages/HistoryInfo/src/index.js

@@ -89,10 +89,10 @@ const updateTime = (key) => {
 
 const unique = (arr) => {
   let unique = {};
-  arr.forEach(function (item) {
+  arr.forEach((item) => {
     unique[JSON.stringify(item)] = item;
   });
-  arr = Object.keys(unique).map(function (v) {
+  arr = Object.keys(unique).map((v) => {
     return JSON.parse(v);
   });
   return arr;
@@ -131,12 +131,12 @@ const HistoryInfo = (props) => {
 
   const onCustomerRangeChange = (value) => {
     setCustomerTime(value);
-    dispatch({ type: 'updateTime', payload: value });
+    dispatch({ type: UPDATE_TIME.UPDATE_TIME, payload: value });
   };
 
   const onCustomerTimeChange = (key) => {
     setCustomerChecked(key);
-    dispatch({ type: 'updateTime', payload: key });
+    dispatch({ type: UPDATE_TIME.UPDATE_TIME, payload: key });
   };
 
   const handleBatchTime = (arr, contrastOption) => {
@@ -150,7 +150,7 @@ const HistoryInfo = (props) => {
       }
     });
     newArr = unique(newArr);
-    dispatch({ type: 'updateBatchTime', payload: newArr });
+    dispatch({ type: UPDATE_TIME.UPDATE_BATCH_TIME, payload: newArr });
   };
 
   const onContrastPickerChange = (date, dateString, item) => {
@@ -202,7 +202,7 @@ const HistoryInfo = (props) => {
   const onTimeIntervalChange = (value, { unit }) => {
     let data = checkboxData.filter((item) => item.key === 'dataThin');
     if (data[0].checked) {
-      dispatch({ type: 'updateDataThin', payload: { zoom: value, unit: unit } });
+      dispatch({ type: UPDATE_TIME.UPDATE_DATA_THIN, payload: { zoom: value, unit: unit } });
     }
     setDataThinKey(value);
   };
@@ -287,6 +287,165 @@ const HistoryInfo = (props) => {
     );
   };
 
+  const getSeriesType = (sensorName) => {
+    return sensorName ? (sensorName.indexOf('流量') > -1 ? 'area' : 'spline') : 'spline';
+  };
+
+  // 处理图表options
+  const handleChartOptions = () => {
+    const { series } = chartOptions;
+    let _series = [];
+    let _yAxis = [];
+    let uniqueUnit = [];
+    series.forEach((item, index) => {
+      // 处理series
+      let _s = {
+        name: item.name,
+        type: getSeriesType(item.sensorName),
+        data: item.data,
+        zIndex: 1,
+        tooltip: { valueSuffix: item.unit ? item.unit : '' },
+        color: colors[index],
+        decimalPoint: item.decimalPoint,
+        navigatorOptions: {
+          enabled: true,
+        },
+      };
+      if (_s.type === 'area' || _s.type === 'areaspline') {
+        _s.fillColor = {
+          linearGradient: {
+            x1: 0,
+            y1: 0,
+            x2: 0,
+            y2: 1,
+          },
+          stops: [
+            [0, Highcharts.Color(_s.color).setOpacity(0.1).get('rgba')],
+            [1, '#fff'],
+          ],
+        };
+        _s.threshold = 0;
+      }
+
+      // 处理yAxis
+      if (!uniqueUnit.includes(item.unit)) {
+        uniqueUnit.push(item.unit);
+        let _length = uniqueUnit.length - 1;
+        let _y = {
+          title: {
+            text: item.unit,
+            align: 'high',
+            offset: 0,
+            rotation: 0,
+            y: -25,
+            x: 0,
+          },
+          gridLineWidth: 1,
+          gridLineDashStyle: 'dash',
+          lineWidth: 1,
+          tickAmount: 10,
+          crosshair: true,
+          floor: 0,
+          num: _length,
+          opposite: _length % 2 === 0,
+          offset: Math.floor(_length / 2) * 40,
+          style: {
+            color: '',
+          },
+          labels: {
+            style: {
+              color: '',
+            },
+            x: -2,
+          },
+        };
+        _yAxis.push(_y);
+      }
+
+      // 处理series
+      _s.yAxis = uniqueUnit.findIndex((child) => child === item.unit);
+
+      _series.push(_s);
+    });
+
+    Highcharts.setOptions({
+      global: { timezoneOffset: -8 * 60 },
+    });
+
+    let options = { ...defaultOptions };
+
+    if (CheckboxData[0].checked) {
+      _yAxis = setYaxisMin(_yAxis, _series);
+    } else {
+      _yAxis = _yAxis.map((item) => ({ ...item, max: null, min: null }));
+    }
+
+    if (_yAxis.length > 0) {
+      options = {
+        ...defaultOptions,
+        ...chartOptions,
+        yAxis: _yAxis,
+        series: _series,
+      };
+    }
+
+    return options;
+  };
+
+  const setYaxisMin = (y, data) => {
+    let result = y.concat();
+
+    data.forEach((val) => {
+      let min = 999999999;
+      let showMin = 999999999;
+      let max = -999999999;
+      let showMax = -999999999;
+      val.data.forEach((item) => {
+        if (item[1]) {
+          min = Math.min(min, item[1]);
+          showMin = Math.min(min, item[1]);
+          max = Math.max(max, item[1]);
+          showMax = Math.max(max, item[1]);
+        }
+      });
+      let k = 0;
+      let same = false;
+      for (let i = 0; i < val.data.length; i++) {
+        // 判断是否全为0
+        if (val.data[i][1] !== 0) {
+          k = 1;
+        }
+        // 判断是否全相等
+        if (i >= 1 && val.data[i][1] !== val.data[i - 1][1]) {
+          same = true;
+        }
+      }
+
+      if (k === 0) {
+        result[val.yAxis].min = result[val.yAxis].min
+          ? Math.min(result[val.yAxis].min, -0.2)
+          : -0.2;
+        result[val.yAxis].max = result[val.yAxis].max ? Math.max(result[val.yAxis].max, 0.2) : 0.2;
+      } else if (!same) {
+        min = val.data[0][1] > 0 ? val.data[0][1] * 0.5 : val.data[0][1] * 1.5;
+        max = val.data[0][1] > 0 ? val.data[0][1] * 1.5 : val.data[0][1] * 0.5;
+        result[val.yAxis].min = result[val.yAxis].min
+          ? Math.min(result[val.yAxis].min, showMin)
+          : min;
+        result[val.yAxis].max = result[val.yAxis].max ? Math.max(result[val.yAxis].max, max) : max;
+      } else {
+        result[val.yAxis].min = result[val.yAxis].min
+          ? Math.min(result[val.yAxis].min, min)
+          : showMin;
+        result[val.yAxis].max = result[val.yAxis].max
+          ? Math.max(result[val.yAxis].max, max)
+          : showMax;
+      }
+    });
+
+    return result;
+  };
+
   return (
     <div className={classNames(prefixCls)}>
       <Tabs
@@ -305,9 +464,10 @@ const HistoryInfo = (props) => {
                 <div>
                   {item.key === 'curve' && (
                     <HighchartsReact
+                      immutable={true}
                       highcharts={Highcharts}
                       constructorType={'stockChart'}
-                      options={{ ...defaultOptions, ...chartOptions }}
+                      options={handleChartOptions()}
                     />
                   )}
                   {item.key === 'table' && (
@@ -369,7 +529,8 @@ const colors = [
 
 const defaultOptions = {
   chart: {
-    type: 'area',
+    zoomType: 'x',
+    backgroundColor: 'rgba(255, 255, 255, 0.5)',
   },
   colors: colors,
   title: null,
@@ -377,42 +538,50 @@ const defaultOptions = {
   rangeSelector: {
     enabled: false,
   },
-  xAxis: {
-    labels: {
-      formatter: function () {
-        return moment(this.value).format('LT');
-      },
-    },
-  },
-  yAxis: {
-    title: null,
-    labels: {
-      formatter: function () {
-        return this.value;
+  xAxis: [
+    {
+      lineWidth: 0,
+      crosshair: true,
+      type: 'datetime',
+      gridLineDashStyle: 'dash',
+      gridLineWidth: 1,
+      dateTimeLabelFormats: {
+        second: '%H:%M:%S',
+        minute: '%H:%M',
+        hour: '%H:%M',
+        day: '%d',
+        week: '%d',
+        month: '%d',
+        year: '%Y',
       },
     },
-    scrollbar: {
-      enabled: true,
-      showFull: false,
-    },
-  },
+  ],
+  yAxis: [],
   tooltip: {
-    pointFormat: '<b>{series.name}-{point.y}</b>',
+    shared: true,
+    split: false,
+    valueDecimals: 3,
+    formatter: function () {
+      let _html = `<b>${Highcharts.dateFormat('%Y/%m/%d %H:%M', this.x)}</b><br/>`;
+      this.points.forEach((item) => {
+        _html += `<span style={{color: ${item.series.color}}}>${item.series.name}</span>:
+                  <b>${
+                    item.point.y.toFixed(
+                      item.series.userOptions.decimalPoint
+                        ? item.series.userOptions.decimalPoint
+                        : 2,
+                    ) * 1
+                  }${item.series.userOptions.tooltip.valueSuffix}</b>
+                  <br/>`;
+      });
+      return _html;
+    },
   },
   plotOptions: {
-    area: {
-      fillOpacity: 0.3, // 指定所有面积图的透明度
-      pointStart: 1940,
-      marker: {
-        enabled: false,
-        symbol: 'circle',
-        radius: 2,
-        states: {
-          hover: {
-            enabled: true,
-          },
-        },
-      },
+    series: {
+      showInNavigator: true,
+      connectNulls: false,
+      zoneAxis: 'x',
     },
   },
   legend: {