feat: 提交

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

@@ -4,7 +4,13 @@ import { BasicChart } from '@wisdom-components/basicchart';
 import optionGenerator from './utils';
 
 const GridChart = memo((props) => {
-  const { dataSource, contrast = false, contrastOption = 'day', smooth = true } = props;
+  const {
+    dataSource,
+    contrast = false,
+    contrastOption = 'day',
+    smooth = true,
+    curveCenter,
+  } = props;
   const { prefixCls } = props;
 
   const gridData = useMemo(() => {
@@ -34,15 +40,30 @@ const GridChart = memo((props) => {
         title: {
           show: true,
           text: `{prefix|}{t|${sensorName}}${unit ? '{suffix|（单位：' + unit + '）}' : ''}`,
+          textStyle: {
+            width: 200,
+            overflow: 'truncate',
+          },
+        },
+        legend: {
+          // orient: 'vertical',
+          itemGap: 10,
+          padding: [0, 0, 0, 200],
+          textStyle: {
+            width: 120,
+            overflow: 'truncate',
+          },
         },
       };
-      const option = optionGenerator(list, cusOption, contrast, contrastOption, smooth);
+      const option = optionGenerator(list, cusOption, contrast, contrastOption, smooth, {
+        curveCenter,
+      });
       return {
         key,
         option: option,
       };
     });
-  }, [gridData, smooth]);
+  }, [gridData, smooth, curveCenter]);
 
   return (
     <div className={`${prefixCls}-grid`}>

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

@@ -3,15 +3,22 @@ import { BasicChart } from '@wisdom-components/basicchart';
 import optionGenerator from './utils';
 
 const SimgleChart = memo((props) => {
-  const { dataSource, contrast = false, contrastOption = 'day', smooth = true } = props;
+  const {
+    dataSource,
+    contrast = false,
+    contrastOption = 'day',
+    smooth = true,
+    curveCenter,
+  } = props;
   const chartRef = useRef();
 
   const option = useMemo(() => {
     const config = {
       needUnit: true,
+      curveCenter,
     };
     return optionGenerator(dataSource, null, contrast, contrastOption, smooth, config);
-  }, [dataSource, smooth]);
+  }, [dataSource, smooth, curveCenter]);
 
   useEffect(() => {
     chartRef.current?.resize?.();

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

@@ -8,9 +8,14 @@ const deviceParams = [
     deviceType: '二供泵房',
   },
   {
-    deviceCode: 'EGJZ00001113',
-    sensors: '出水瞬时流量,出水压力,泵1状态',
-    deviceType: '二供机组',
+    deviceCode: 'EGBF00000001',
+    sensors: '进水压力,出水瞬时流量,出水累计流量',
+    deviceType: '二供泵房',
+  },
+  {
+    deviceCode: 'EGBF00000002',
+    sensors: '进水压力,出水瞬时流量,出水累计流量',
+    deviceType: '二供泵房',
   },
 ];
 const Demo = () => {

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

@@ -460,7 +460,7 @@ const HistoryView = (props) => {
       const obj = { key: time, time: time };
       data.forEach((item, index) => {
         const dataIndex = dataIndexAccess(item, index);
-        obj[dataIndex] = '--';
+        obj[dataIndex] = '';
       });
       return obj;
     };
@@ -486,7 +486,7 @@ const HistoryView = (props) => {
         const formatTime = moment(value.pt).format(format);
         const dataRow = timeData[formatTime];
         if (dataRow) {
-          dataRow[dataIndex] = value.pv === null ? '--' : value.pv;
+          dataRow[dataIndex] = value.pv === null || value.pv === undefined ? '' : value.pv;
         }
       });
     });
@@ -597,6 +597,7 @@ const HistoryView = (props) => {
                 <PandaEmpty />
               ) : grid === true ? (
                 <GridChart
+                  curveCenter={curveCenter}
                   prefixCls={prefixCls}
                   dataSource={chartDataSource}
                   contrast={timeValue === 'contrast'}
@@ -604,6 +605,7 @@ const HistoryView = (props) => {
                 />
               ) : (
                 <SimgleChart
+                  curveCenter={curveCenter}
                   prefixCls={prefixCls}
                   dataSource={chartDataSource}
                   contrast={timeValue === 'contrast'}

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

@@ -18,6 +18,11 @@
     }
   }
 
+  .@{ant-prefix}-tabs-extra-content {
+    width: 82px;
+    white-space: nowrap;
+  }
+
   &-extra-right {
     width: 82px;
   }

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

 import moment from 'moment';
 import _ from 'lodash';
 
-/**
- * 轴宽度, 用于计算多轴显示时, 轴线偏移和绘图区域尺寸
- */
+/** 轴宽度, 用于计算多轴显示时, 轴线偏移和绘图区域尺寸 */
 const axisWidth = 40;
 
 /**
  * 图表系列名称格式化
- * @param {*} data 
+ *
+ * @param {any} data
  * @param {boolean} contrast 是否为同期对比
- * @param {*} contrastOption 同期对比周期配置, day|month
+ * @param {any} contrastOption 同期对比周期配置, day|month
  * @returns
  */
 const nameFormatter = (data, contrast, contrastOption) => {
@@ -25,15 +24,16 @@ const nameFormatter = (data, contrast, contrastOption) => {
 
 /**
  * 图表系列数据格式化
- * @param {*} data 
+ *
+ * @param {any} data
  * @param {boolean} contrast 是否为同期对比
- * @param {*} contrastOption 同期对比周期配置, day|month
+ * @param {any} contrastOption 同期对比周期配置, day|month
  * @returns 图表系列数据, [[DateTime, value]]
  */
 const dataAccessor = (data, contrast, contrastOption) => {
   const { dataModel } = data;
   const formatStr = contrastOption === 'day' ? '2020-01-01 HH:mm:00' : '2020-01-DD HH:mm:00';
-  return dataModel.map(item => {
+  return dataModel.map((item) => {
     const time = contrast ? moment(item.pt).format(formatStr) : item.pt;
     return [moment(time).valueOf(), item.pv];
   });
@@ -41,28 +41,47 @@ const dataAccessor = (data, contrast, contrastOption) => {
 
 /**
  * 面积图配置(目前默认曲线图)
- * @param {*} data 数据项
- * @returns null/areaStyle, 为null显示曲线图, 为areaStyle对象显示为面积图.
+ *
+ * @param {any} data 数据项
+ * @returns Null/areaStyle, 为null显示曲线图, 为areaStyle对象显示为面积图.
  */
 const areaStyleFormatter = (data) => {
   const { sensorName } = data;
   return sensorName && sensorName.indexOf('流量') > -1 ? {} : null;
 };
 
+/**
+ * 数据项中指标值最小最大值
+ *
+ * @param {any} data 数据项
+ * @returns
+ */
+const minMax = (data) => {
+  const { dataModel } = data;
+  let min = Number.MAX_SAFE_INTEGER;
+  let max = Number.MIN_SAFE_INTEGER;
+  dataModel.forEach((item) => {
+    min = Math.min(min, item.pv ?? 0);
+    max = Math.max(max, item.pv ?? 0);
+  });
+  return [min, max];
+};
 
 /**
  * 图表配置项生成
- * @param {*} dataSource 数据源
- * @param {*} cusOption 自定义属性
- * @param {*} contrast 是否为同期对比
- * @param {*} contrastOption 同期对比周期配置, day|month
- * @param {*} smooth ture/false, 曲线/折线
- * @param {*} config 额外配置信息
+ *
+ * @param {any} dataSource 数据源
+ * @param {any} cusOption 自定义属性
+ * @param {any} contrast 是否为同期对比
+ * @param {any} contrastOption 同期对比周期配置, day|month
+ * @param {any} smooth Ture/false, 曲线/折线
+ * @param {any} config 额外配置信息
  */
 const optionGenerator = (dataSource, cusOption, contrast, contrastOption, smooth, config) => {
   const needUnit = _.get(config, 'needUnit', false);
+  const curveCenter = _.get(config, 'curveCenter', false);
   // 自定义属性
-  const restOption = _.pick(cusOption, ['title',]);
+  const restOption = _.pick(cusOption, ['title', 'legend']);
 
   // 一种指标一个y轴
   const yAxisMap = new Map();
@@ -78,17 +97,25 @@ const optionGenerator = (dataSource, cusOption, contrast, contrastOption, smooth
         position: i % 2 === 0 ? 'left' : 'right',
         offset: Math.floor(i / 2) * axisWidth,
         axisLabel: {
-          formatter: (value) => value > 100000 ? `${value / 1000}k` : value,
+          formatter: (value) => (value > 100000 ? `${value / 1000}k` : value),
         },
         axisLine: {
           show: true,
         },
         nameTextStyle: {
-          align: i % 2 === 0 ? 'right' : 'left'
+          align: i % 2 === 0 ? 'right' : 'left',
         },
-      }
+      };
       yAxisMap.set(key, axis);
     }
+
+    // 曲线居中
+    if (curveCenter && item.dataModel && item.dataModel.length > 0) {
+      const [min, max] = minMax(item);
+      const axis = yAxisMap.get(key);
+      axis.min = axis.min === void 0 ? min : Math.min(min, axis.min);
+      axis.max = axis.max === void 0 ? max : Math.max(max, axis.max);
+    }
   });
   const yAxis = yAxisMap.size > 0 ? [...yAxisMap.values()] : { type: 'value' };
 
@@ -105,12 +132,11 @@ const optionGenerator = (dataSource, cusOption, contrast, contrastOption, smooth
   const yAxisInterator = (() => {
     const map = new Map();
     let current = -1;
-    const get = (name) => map.has(name) ? map.get(name) : map.set(name, ++current).get(name);
-    return { get }
+    const get = (name) => (map.has(name) ? map.get(name) : map.set(name, ++current).get(name));
+    return { get };
   })();
 
-
-  const series = dataSource.map(item => {
+  const series = dataSource.map((item) => {
     const { sensorName, unit } = item;
     const name = nameFormatter(item, contrast, contrastOption);
     const data = dataAccessor(item, contrast, contrastOption);
@@ -126,18 +152,27 @@ const optionGenerator = (dataSource, cusOption, contrast, contrastOption, smooth
       yAxisIndex,
       smooth,
       unit,
-    }
+    };
   });
 
   // 由于series更新后，没有的数据曲线仍然停留在图表区上，导致图表可视区范围有问题
-  const min = Math.min(...series.map(item => item.data?.[0]?.[0]).filter(item => item !== undefined));
-  const max = Math.max(...series.map(item => item.data?.[item.data.length - 1]?.[0]).filter(item => item !== undefined));
+  const min = Math.min(
+    ...series.map((item) => item.data?.[0]?.[0]).filter((item) => item !== undefined),
+  );
+  const max = Math.max(
+    ...series
+      .map((item) => item.data?.[item.data.length - 1]?.[0])
+      .filter((item) => item !== undefined),
+  );
   const xAxis = { type: 'time', min, max };
 
-  const tooltipTimeFormat = !contrast ? 'YYYY-MM-DD HH:mm:ss' : contrastOption === 'day' ? 'HH:mm' : 'DD HH:mm';
+  const tooltipTimeFormat = !contrast
+    ? 'YYYY-MM-DD HH:mm:ss'
+    : contrastOption === 'day'
+    ? 'HH:mm'
+    : 'DD HH:mm';
   const tooltip = { timeFormat: tooltipTimeFormat };
 
-  
   return {
     yAxis,
     grid,
@@ -145,7 +180,7 @@ const optionGenerator = (dataSource, cusOption, contrast, contrastOption, smooth
     series,
     tooltip,
     ...restOption,
-  }
+  };
 };
 
 export default optionGenerator;