feat: 更新basicChart、更新历史曲线

packages/base-components/BasicChart/src/demos/Basic.tsx

@@ -26,7 +26,7 @@ const Demo = () => {
       },
     },
     legend: {
-      data: ['Evaporation', 'Precipitation', 'Temperature'],
+      data: ['EvaporationEvaporationEvaporationEvaporationEvaporationEvaporationEvaporationEvaporationEvaporationEvaporationEvaporationEvaporationEvaporationEvaporationEvaporationEvaporationEvaporationEvaporation', 'Precipitation', 'Temperature'],
     },
     xAxis: [
       {
@@ -88,7 +88,7 @@ const Demo = () => {
     ],
     series: [
       {
-        name: 'Evaporation',
+        name: 'EvaporationEvaporationEvaporationEvaporationEvaporationEvaporationEvaporationEvaporationEvaporationEvaporationEvaporationEvaporationEvaporationEvaporationEvaporationEvaporationEvaporationEvaporation',
         type: 'bar',
         data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
       },

packages/base-components/BasicChart/src/utils/legend.js

-import { globalConfig } from './global';
+import {globalConfig} from './global';
 
 export const buildDefaultLegend = (option) => {
-  const { title } = option;
+    const {title} = option;
 
     let paddingRight = 0;
     if (title && title.show) paddingRight = 80; // 给标题留够空间
@@ -18,6 +18,11 @@ export const buildDefaultLegend = (option) => {
         textStyle: {
             padding: [0, 0, 0, 4],
             color: '#2d2d2d',
+            width: 80,
+            overflow:'truncate'
         },
+        tooltip:{
+            show:true
+        }
     };
 };

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

@@ -77,7 +77,6 @@ const GridChart = memo((props) => {
         option: option,
       };
     });
-    console.log(_options);
     return _options
   }, [gridData, smooth, curveCenter]);
 

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

@@ -25,36 +25,36 @@ const deviceParams = [
 /*const deviceParams = [
   {
     "deviceCode": "LLJ00000055",
-    "sensors": "瞬时流量,正累计流量,是否在线",
+    "sensors": "瞬时流量,正累计流量",
     "deviceType": "流量计"
   },
   {
     "deviceCode": "LLJ00000056",
-    "sensors": "瞬时流量,正累计流量,是否在线",
+    "sensors": "瞬时流量,正累计流量",
     "deviceType": "流量计"
   }
 ]*/
 /*const deviceParams = [
   {
     "deviceCode": "EGBF00000023",
-    "sensors": "出水瞬时流量,是否在线",
+    "sensors": "出水瞬时流量",
     "deviceType": "二供泵房"
   },
   {
     "deviceCode": "EGBF00000019",
-    "sensors": "出水瞬时流量,是否在线",
+    "sensors": "出水瞬时流量",
     "deviceType": "二供泵房"
   }
 ]*/
 /*const deviceParams = [
   {
     "deviceCode": "QSSSC00000001",
-    "sensors": "出水瞬时流量,是否在线",
+    "sensors": "出水瞬时流量",
     "deviceType": "确山送水厂"
   },
   {
     "deviceCode": "EGBF00000019",
-    "sensors": "出水瞬时流量,是否在线",
+    "sensors": "出水瞬时流量",
     "deviceType": "二供泵房"
   }
 ]*/

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

 import React from 'react';
 import HistoryView from '../index';
-import {MobileHistoryChart} from "../mobile";
+import { MobileHistoryChart } from "../mobile";
 
 const deviceParams = [
-        {
+/*          {
                 deviceCode: 'EGBF00000141',
                 // sensors: '进水压力,出水瞬时流量,出水累计流量',
                 sensors: '进水压力',
                 deviceType: '二供泵房',
                 pointAddressID: 208,
-        },
+            },  */
     /*    {
             "deviceCode": "SYJ00000008",
             "sensors": "瞬时流量",
@@ -21,7 +21,7 @@ const deviceParams = [
             // deviceCode: 'XMYL00000345',
             // deviceCode: 'XMYL00000000',
             deviceCode: 'EGBF00000014',
-            // sensors: '今日供水量,今日用电量,1#水箱液位,是否在线',
+            // sensors: '今日供水量,今日用电量,1#水箱液位',
             sensors: '进水压力',
             deviceType: '熊猫压力表',
             pointAddressID: 4,
@@ -34,33 +34,33 @@ const deviceParams = [
             },*/
     /*        {
                 "deviceCode": "LLJ00000055",
-                "sensors": "正累计流量,瞬时流量,是否在线",
+                "sensors": "正累计流量,瞬时流量",
                 "deviceType": "流量计"
             }*/
     /*    {
             "deviceCode": "EGJZ00000163",
-            "sensors": "进水压力,是否在线",
+            "sensors": "进水压力",
             "deviceType": "二供机组"
         }*/
     // 邳州张楼水厂
-    /*        {
+/*     {
         "deviceCode": "SC00000023",
-                "sensors": "出水压力",
+        "sensors": "瞬时流量",
         "deviceType": "水厂"
-            }*/
+    } */
     /*        {
                 "deviceCode": "JFJ00000001",
                 "sensors": "沉淀池投矾量瞬时,",
                 "deviceType": "加矾间"
             }*/
-/*    {
+    /*    {
             "deviceCode": "QSBF00000001",
             "sensors": "取水浊度",
             "deviceType": "取水泵房"
         }*/
-/*    {
+    /*    {
             "deviceCode": "SC00000023",
-        "sensors": "出水瞬时流量,是否在线",
+            "sensors": "出水瞬时流量",
             "deviceType": "水厂"
         }*/
     // {
@@ -68,12 +68,17 @@ const deviceParams = [
     //     "sensors": "沉淀池1号进水管流量",
     //     "deviceType": "絮凝沉淀池"
     // }
+    {
+        "deviceCode": "LLJ00000001",
+        "sensors": "瞬时流量",
+        "deviceType": "流量计"
+    }
 ];
 const Demo = () => {
     return (
         <div>
-            <div style={{height: 700}}>
-                <HistoryView deviceParams={deviceParams} defaultModel="curve"/>
+            <div style={{ height: 700 }}>
+                <HistoryView deviceParams={deviceParams} defaultModel="curve" />
             </div>
         </div>
 

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

@@ -29,7 +29,6 @@ import SingleChart from './SingleChart';
 import GridChart from './GridChart';
 import './index.less';
 import {globalConfig} from 'antd/lib/config-provider';
-
 const {RangePicker} = DatePicker;
 const {Option} = Select;
 
@@ -780,7 +779,7 @@ const HistoryView = (props) => {
 
     const handleTableData = useCallback((data) => {
         // eslint-disable-next-line no-param-reassign
-        data = data.filter(item => item.sensorName !== '是否在线');
+        // data = data.filter(item => item.sensorName !== '是否在线');
         const ignoreOutliers = checkboxData.find((item) => item.key === 'ignoreOutliers').checked;
         const dataIndexAccess = (dataItem, index) => {
             const {stationCode, sensorName} = dataItem;
@@ -973,6 +972,7 @@ const HistoryView = (props) => {
                         deviceParams.forEach((p) => {
                             // 返回数据按查询指标顺序排序
                             const sensors = p.sensors?.split(',') ?? [];
+                            if (sensors?.length) sensors.push('是否在线');
                             const list = sensors.map((s) => {
                                 const dataItem = res.data.find(
                                     (d) => d.stationCode === p.deviceCode && d.sensorName === s,

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

@@ -261,6 +261,7 @@ export const offlineArea = (dataItem) => {
                 {
                     name: '离线',
                     xAxis: new Date(item.pt),
+                    label:{show:!datas?.length}
                 },
             ];
             hasOffline = true;
@@ -276,6 +277,7 @@ export const offlineArea = (dataItem) => {
     return {
         itemStyle: {
             color: '#eee',
+            opacity: 0.6,
         },
         data: datas,
     };
@@ -416,15 +418,15 @@ const returnXAxis = ({
             let markArea = null;
             // 需求变更：设备离线改用“是否在线”的数据，离线的状态标记的数据用该部分的数据。 2023年4月25日09:36:55
             let _offlineAreasData = _offlineData
-                .map((item) => {
-                    let _item = {...item};
+                /*                .map((item) => {
+                                    let _item = { ...item };
                                     _item.dataModel = item.dataModel.map((d) => {
-                        let _d = {...d};
+                                        let _d = { ...d };
                                         _d.pv = 0;
                                         return _d;
                                     });
                                     return _item;
-                })
+                                })*/
                 .find((offline) => offline.stationCode === item.stationCode);
             let offlineAreas = offlineArea(_offlineAreasData);
             if (offlineAreas.data?.length) {
@@ -512,7 +514,7 @@ const handleYAxis = ({dataSource, needUnit, curveCenter, showGridLine}) => {
                 position: i % 2 === 0 ? 'left' : 'right',
                 offset: Math.floor(i / 2) * AXIS_WIDTH,
                 axisLabel: {
-                    formatter: (value) => (value > 100000 ? `${value / 1000}k` : value),
+                    formatter: (value) => (value > 100000 ? `${value / 1000}k` : value.toFixed(2)),
                 },
                 axisLine: {
                     show: true,
@@ -787,12 +789,17 @@ const optionGenerator = (dataSource, cusOption, contrast, contrastOption, smooth
                     ? `${_currentYear}-01-01 HH:mm:00`
                     : `${_currentYear}-01-DD HH:mm:00`; // 用来做同期对比，把日期拉到同一区间
             let _maxValues = [];
+            /**
+             *  生成泳道图，分两种情况
+             *  1. 当最大值最小值都是正数时；
+             *  2. 当最大值小于零时（此时，最小值一定小于零）；
+             */
             dataSource?.[0]?.dataModel.forEach((item) => {
                 const {firstPV, lastPV, maxPV, minPV, pt} = item;
                 _maxValues.push(maxPV);
                 let time = contrast ? moment(pt).format(formatStr) : pt;
-                _maxData.push([moment(time).valueOf(), (maxPV - minPV).toFixed(2)]);
-                _minData.push([moment(time).valueOf(), minPV]);
+                _maxData.push([moment(time).valueOf(), (maxPV > 0 ? maxPV - minPV : minPV - maxPV).toFixed(2)]);
+                _minData.push([moment(time).valueOf(), maxPV > 0 ? minPV : maxPV]);
             }); //当存在othersData的时候，只是单曲线
             // xAxis = {type: 'category', data: series[0].data.map(item => moment(item[0]).format('YYYY-MM-DD HH:mm:ss'))};
             xAxis = {type: 'time'};