feat: 修正单位

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

@@ -15,7 +15,8 @@ const deviceParams = [
     pointAddressID: 4,
   },*/
   {
-    deviceCode: 'EGBF00000002',
+    // deviceCode: 'EGBF00000002',
+    deviceCode: 'EGBF00000082',
     sensors: '进水压力,出水瞬时流量,出水累计流量',
     deviceType: '二供泵房',
     pointAddressID: 4,

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

@@ -477,7 +477,7 @@ const HistoryView = (props) => {
                 {
                     isChart && isSingle ? <>
                         <div className={classNames(`${prefixCls}-label`)}>曲线形态</div>
-                        <Radio.Group value={chartType} onChange={(e) => {
+                        <Radio.Group value={chartType} style={{marginRight: 16}} onChange={(e) => {
                             let _value = e.target.value;
                             setChartType(_value);
                             onCheckboxChange({target: {value: _value !== 'boxChart'}}, 'chartType')

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

 import moment from 'moment';
-import _ from 'lodash';
+import _, {isArray} from 'lodash';
 
 /** 轴宽度, 用于计算多轴显示时, 轴线偏移和绘图区域尺寸 */
 const axisWidth = 40;
-
+const COLOR = {
+    NORMAL: '#1685FF',
+    UPER: '#fa8c16',
+    UPUPER: '#FF0000',
+    // LOWER: '#13c2c2',
+    // LOWLOWER: '#2f54eb',
+    LOWER: '#fa8c16',
+    LOWLOWER: '#FF0000',
+    AVG: '#00B8B1',
+};
 /**
  * 图表系列名称格式化
  *
@@ -311,7 +320,73 @@ const optionGenerator = (dataSource, cusOption, contrast, contrastOption, smooth
         left: 10 + leftNum * axisWidth,
         right: rightNum === 0 ? 20 : rightNum * axisWidth,
     };
+    const headTemplate = (param) => {
+        if (!param) return '';
+        const {name, axisValueLabel, axisType, axisValue} = param;
+        const timeFormat = 'YYYY-MM-DD HH:mm:ss';
+        const text =
+            axisType === 'xAxis.time' ? moment(axisValue).format(timeFormat) : name || axisValueLabel;
+        return `<div style="border-bottom: 1px solid #F0F0F0; color: #808080; margin-bottom: 5px; padding-bottom: 5px;">${text}</div>`;
+    };
+    const seriesTemplate = (param, unit) => {
+        if (!param) return '';
+        console.log(param)
+        const {value, encode} = param;
+        const val = value[encode.y[0]];
+        const _unit = unit || 'Mpa';
+        const color = '#008CFF';
+        if (!isArray(value)) return ` <div style="display: flex; align-items: center;">
+            <span>${param.seriesName}</span><span style="display:inline-block;">：</span>
+            <span style="color:${color};margin: 0 5px 0 auto;">${value?.toFixed(3)}</span>
+            <span style="font-size: 12px;">${_unit}</span>
+        </div>`;
+        return `
+            <div style="display: flex; align-items: center;">
+              <span>首值</span><span style="display:inline-block;">：</span>
+              <span style="color: ${COLOR.AVG};margin: 0 5px 0 auto;">${value[1] ?? '-'}</span>
+              <span style="font-size: 12px;">${_unit}</span>
+            </div>
+            <div style="display: flex; align-items: center;">
+              <span>尾值</span><span style="display:inline-block;">：</span>
+              <span style="color: ${COLOR.AVG};margin: 0 5px 0 auto;">${value[2] ?? '-'}</span>
+              <span style="font-size: 12px;">${_unit}</span>
+            </div>
+            <div style="display: flex; align-items: center;">
+              <span>最小值</span><span style="display:inline-block;">：</span>
+              <span style="color: ${COLOR.AVG};margin: 0 5px 0 auto;">${value[3] ?? '-'}</span>
+              <span style="font-size: 12px;">${_unit}</span>
+            </div>
+            <div style="display: flex; align-items: center;">
+              <span>最大值</span><span style="display:inline-block;">：</span>
+              <span style="color: ${COLOR.AVG};margin: 0 5px 0 auto;">${value[4] ?? '-'}</span>
+              <span style="font-size: 12px;">${_unit}</span>
+            </div>
+          `;
+    };
+    const tooltipAccessor = (unit) => {
+        return {
+            formatter: function (params, ticket, callback) {
+                let tooltipHeader = '';
+                let tooltipContent = '';
+                if (isArray(params)) {
+                    tooltipHeader = headTemplate(params[0]);
+                    params.forEach((param) => {
+                        tooltipContent += seriesTemplate(param, unit);
+                    });
+                } else {
+                    tooltipHeader = headTemplate(params);
+                    tooltipContent += seriesTemplate(params, unit);
+                }
 
+                return `
+      <div>
+        ${tooltipHeader}
+        <div>${tooltipContent}</div>
+      </div>
+    `;
+            }
+        }
+    };
     // 根据"指标名称"分类yAxis
     const yAxisInterator = (() => {
         const map = new Map();
@@ -366,7 +441,7 @@ const optionGenerator = (dataSource, cusOption, contrast, contrastOption, smooth
         : contrastOption === 'day'
             ? 'HH:mm'
             : 'DD HH:mm';
-    const tooltip = {
+    let tooltip = {
         timeFormat: tooltipTimeFormat,
         // trigger: 'axis',
         // axisPointer: {
@@ -381,7 +456,9 @@ const optionGenerator = (dataSource, cusOption, contrast, contrastOption, smooth
                 return [firstPV, lastPV, minPV, maxPV]
             }) || []; //当存在othersData的时候，只是单曲线
             xAxis = {type: 'category', data: series[0].data.map(item => moment(item[0]).format('YYYY-MM-DD'))};
+            let unit = ''
             series = series.map(item => {
+                if (item.unit) unit = item.unit;
                 let _item = {...item, symbol: null};
                 _item.data = _item?.data?.map(d => {
                     return d[1] || null
@@ -392,8 +469,9 @@ const optionGenerator = (dataSource, cusOption, contrast, contrastOption, smooth
                 type: 'candlestick',
                 name: '箱线图',
                 symbol: null,
-                data: otherData
+                data: otherData,
             });
+            tooltip = tooltipAccessor(unit)
         } else {
             let _maxData = [];
             let _minData = [];