fix: 修复夜间模式分割线异常

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

-import React, { memo, useEffect, useMemo, useRef } from 'react';
-import { BasicChart } from '@wisdom-components/basicchart';
+import React, {memo, useEffect, useMemo, useRef} from 'react';
+import {BasicChart} from '@wisdom-components/basicchart';
 import optionGenerator, {
     alarmMarkLine,
     specialTypeChartOptionGenerator,
 } from './utils';
-import { isArray, cloneDeep } from 'lodash';
+import {isArray, cloneDeep} from 'lodash';
 import moment from "moment";
 import patchBIOption from "./useBIMode";
-import { BI, Normal } from './theme';
+import {BI, Normal} from './theme';
 import * as echarts from 'echarts';
 
 echarts.registerTheme('BI', BI)
@@ -58,9 +58,9 @@ const SingleChart = memo((props) => {
         if (dataSource.length === 1 && SpecialType.includes(_allPointAddress[dataSource[0].sensorName])) {
             config.sensorType = _allPointAddress[dataSource[0].sensorName];
             config.special.allValDesc = allValDesc;
-            return specialTypeChartOptionGenerator({ dataSource, config });
+            return specialTypeChartOptionGenerator({dataSource, config});
         }
-        let _option = optionGenerator(dataSource, null, contrast, contrastOption, smooth, config, lineDataType, predicateData);
+        let _option = optionGenerator(dataSource, null, contrast, contrastOption, smooth, config, lineDataType, predicateData,theme);
         if (emptyOrError.empty || emptyOrError.error) {
             if (isArray(_option.yAxis)) {
                 _option.yAxis.forEach(item => {
@@ -81,7 +81,7 @@ const SingleChart = memo((props) => {
         const chart = chartRef.current?.getEchartsInstance?.();
 
         function hander(params) {
-            const { selected } = params;
+            const {selected} = params;
             const count = Object.values(selected || {}).filter((item) => item).length;
             const option = cloneDeep(chart.getOption());
             const needMarkLine = count === 1;
@@ -120,8 +120,8 @@ const SingleChart = memo((props) => {
                     let minPoint = pointArr[minValueIndex];
                     if (!maxPoint || !minPoint) return {}
                     // 3. 计算坐标位置，返回的是 [x,y]的像素坐标
-                    let maxPointPosition = chart.convertToPixel({ seriesIndex: 0 }, [moment(maxPoint.pt).valueOf(), maxPoint.pv])
-                    let minPointPosition = chart.convertToPixel({ seriesIndex: 0 }, [moment(minPoint.pt).valueOf(), minPoint.pv])
+                    let maxPointPosition = chart.convertToPixel({seriesIndex: 0}, [moment(maxPoint.pt).valueOf(), maxPoint.pv])
+                    let minPointPosition = chart.convertToPixel({seriesIndex: 0}, [moment(minPoint.pt).valueOf(), minPoint.pv])
                     if (!maxPointPosition || !minPointPosition) return;
                     // 4. 计算最大最小值的标签宽度
                     let maxLength = 80 + String(maxValue).length * 5;
@@ -236,14 +236,14 @@ const SingleChart = memo((props) => {
                             name: '',
                             type: 'max',
                             symbol: 'emptyCircle',
-                            label: { show: false },
+                            label: {show: false},
                             symbolSize: 6,
                         },
                         {
                             name: '',
                             type: 'min',
                             symbol: 'emptyCircle',
-                            label: { show: false },
+                            label: {show: false},
                             symbolSize: 6,
                         }
                     ];
@@ -259,7 +259,7 @@ const SingleChart = memo((props) => {
                     };
                 };
                 // minMaxMarkPoint(dataSource)
-                chart.setOption({ series: { markPoint: minMaxMarkPoint(dataSource) } })
+                chart.setOption({series: {markPoint: minMaxMarkPoint(dataSource)}})
             }, 200)
         }
 
@@ -298,15 +298,19 @@ const SingleChart = memo((props) => {
                 show: theme === 'BI' ? false : showGridLine,
                 lineStyle: {
                     type: 'dashed',
+                    ...(theme === 'BI' ? {color: '#38435a'} : {})
                 },
             },
             splitLine: {
                 show: showGridLine,
+                lineStyle: {
+                    ...(theme === 'BI' ? {color: '#38435a'} : {})
+                },
             },
         };
         let yAxis = axisConfig;
         if (isArray(option.yAxis)) {
-            yAxis = option.yAxis.map((item) => ({ ...axisConfig }));
+            yAxis = option.yAxis.map((item) => ({...axisConfig}));
         }
         let xAxis = axisConfig;
         chart.setOption({
@@ -316,7 +320,7 @@ const SingleChart = memo((props) => {
         });
     }, [showGridLine]);
     return <BasicChart theme={theme} ref={chartRef} option={option} notMerge
-        style={{ width: '100%', height: '100%' }} />
+                       style={{width: '100%', height: '100%'}}/>
 });
 
 export default SingleChart;

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

@@ -215,13 +215,13 @@ const deviceParams = [
         "deviceCode": "SC00000004",
         "sensors": "进水瞬时流量,1#出水瞬时流量,2#出水瞬时流量",
         "deviceType": "水厂"
-    }
-    /*    {
+    },
+/*        {
             "deviceCode": "EGJZ00000073",
             "sensors": "进水压力",
             "deviceType": "二供机组"
-        }*/
-    /*    {
+        },
+        {
             "deviceCode": "EGJZ00000006",
             "sensors": "进水压力",
             "deviceType": "二供机组"

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

@@ -1237,7 +1237,7 @@ const HistoryView = (props) => {
                                     }
                                 }).filter((item) => item.sensorName);
                                 // 预测的
-                                data = data.concat(list.filter(item => item.deviceType !== '预测'));
+                                // data = data.concat(list.filter(item => item.deviceType !== '预测'));
                                 // _predicateData = _predicateData.concat(list.filter(item => item.deviceType === '预测'));
                             });
                         }

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

@@ -50,18 +50,6 @@
     color: var(--text-color);
   }
 
-  &-label {
-    position: relative;
-    width: 80px;
-    color: @primaryTextColor;
-
-    &::after {
-      position: absolute;
-      top: 0;
-      right: 7px;
-      content: '：';
-    }
-  }
   
   // radio
   :global {
@@ -221,22 +209,28 @@
   }
 }
 
-.@{history-view} {
+.historyViewComponents.@{history-view} {
 
   height: 100%;
   padding: @padding-md;
 
-
-
-
-  //background: ;
-
-
   .@{ant-prefix}-tabs-extra-content {
     width: 82px;
     white-space: nowrap;
   }
 
+  &-label {
+    position: relative;
+    width: 80px;
+    color: @primaryTextColor;
+
+    &::after {
+      position: absolute;
+      top: 0;
+      right: 7px;
+      content: '：';
+    }
+  }
 
   &-extra-right {
     position: absolute;
@@ -496,4 +490,4 @@
   100% {
     opacity: 1;
   }
-}
+}
\ No newline at end of file

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

@@ -15,7 +15,7 @@ const handleYAxis = (item, _opt) => {
         show: false,
         lineStyle: {
             type: 'solid',
-            color: BISplitLineColor
+            color: '#38435a'
         }
     };
     item.splitLine = {

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

@@ -191,28 +191,36 @@ export const alarmMarkLine = (dataItem, index, dataSource, schemes) => {
  * 坐标轴添加网格线配置
  *
  * @param {any} axis
+ * @param showGrid
+ * @param theme
  */
-export const decorateAxisGridLine = (axis, showGrid) => {
+export const decorateAxisGridLine = (axis, showGrid, theme) => {
     if (!axis) return;
     axis.minorTick = {
-        lineStyle: {
-            // color: '#e2e2e2',
-        },
         ...(axis.minorTick || {}),
+        ...(theme === 'BI' ? {
+            lineStyle: {
+                ...(theme === 'BI' ? {color: 'rgba(56,67,90,0.81)'} : {})
+            },
+        } : {}),
         show: showGrid,
         splitNumber: 2,
     };
     axis.minorSplitLine = {
-        lineStyle: {
-            // color: '#e2e2e2',
-            // type: 'dashed',
-        },
         ...(axis.minorSplitLine || {}),
-        show: showGrid,
+        ...(theme === 'BI' ? {
+            lineStyle: {
+                ...(theme === 'BI' ? {color: 'rgba(56,67,90,0.81)'} : {})
+            },
+        } : {}),
+        show: false,
     };
     axis.splitLine = {
         ...(axis.splitLine || {}),
         show: showGrid,
+        lineStyle: {
+            ...(theme === 'BI' ? {color: 'rgba(56,67,90,0.81)'} : {})
+        },
     };
 };
 
@@ -483,7 +491,7 @@ const returnXAxis = ({
             // let markPoint = showPoint ? minMaxMarkPoint(item, index, dataSource) : {};
             let markPoint = {};
             let _lineStyle = {};
-            if (item.deviceType === '预测' && chartType === 'lineChart') {
+/*            if (item.deviceType === '预测' && chartType === 'lineChart') {
                 markPoint = null;
                 markLine = null;
                 _lineStyle = {
@@ -494,7 +502,7 @@ const returnXAxis = ({
                         type: 'dashed',
                     }
                 }
-            }
+            }*/
             return {
                 notMerge: true,
                 name,
@@ -633,9 +641,10 @@ const reduceYAxis = (arr, dataSource) => {
  * @param {boolean} needUnit 是否显示单位。
  * @param {boolean} curveCenter 曲线是否居中。
  * @param {boolean} showGridLine 是否显示网格线。
+ * @param theme
  * @returns {object} 返回左右轴的margin、yAxis的配置。
  */
-const handleYAxis = ({dataSource, needUnit, curveCenter, showGridLine}) => {
+const handleYAxis = ({dataSource, needUnit, curveCenter, showGridLine, theme}) => {
     const yAxisMap = new Map();
     // 1. 找出最大值; 2. 计算出y轴最大宽度动态计算偏移距离；
     dataSource.forEach((item, index) => {
@@ -676,7 +685,7 @@ const handleYAxis = ({dataSource, needUnit, curveCenter, showGridLine}) => {
         }
         // 网格显示
         const axis = yAxisMap.get(key);
-        decorateAxisGridLine(axis, showGridLine);
+        decorateAxisGridLine(axis, showGridLine, theme);
     });
     const yAxis =
         yAxisMap.size > 0 ? reduceYAxis([...yAxisMap.values()], dataSource) : {type: 'value'};
@@ -742,7 +751,7 @@ const assignOptions = (
             ...{
                 show: true,
                 right: 10,
-                top: 30,
+                top: 10,
                 icon: 'rect',
                 itemWidth: 14,
                 itemHeight: 8,
@@ -791,9 +800,9 @@ const returnMaxOrMinNumber = (dataSource, type) => {
     return _value;
 };
 
-const handleGrid = (dataSource, needUnit, leftNum, rightNum, chartType) => {
+const handleGrid = (dataSource, needUnit, theme) => {
     // 如果是单曲线，_grid的top需要一行的高度，用来放置最值最小值
-    let _base = 60;
+    let _base = 40
     let _topForUnit = needUnit ? 20 : 0;
     return {
         top: _base + _topForUnit,
@@ -915,6 +924,7 @@ const renderStatusItem = (params, api) => {
  * @param {any} config 额外配置信息
  * @param lineDataType
  * @param predicateData
+ * @param theme
  */
 
 const optionGenerator = (
@@ -925,7 +935,8 @@ const optionGenerator = (
     smooth,
     config,
     lineDataType = '',
-    predicateData
+    predicateData,
+    theme = 'Normal'
 ) => {
     // 1. 处理配置，配置分配默认值；
     const {
@@ -946,6 +957,7 @@ const optionGenerator = (
         needUnit,
         curveCenter,
         showGridLine,
+        theme
     });
     let {xAxis, series, visualMap} = returnXAxis({
         dataSource,
@@ -963,8 +975,8 @@ const optionGenerator = (
         chartType
     });
     // 3. 判断是否开启网格；
-    const grid = handleGrid(dataSource, needUnit, leftNum, rightNum, chartType);
-    decorateAxisGridLine(xAxis, showGridLine);
+    const grid = handleGrid(dataSource, needUnit, theme);
+    decorateAxisGridLine(xAxis, showGridLine, theme);
     const tooltipTimeFormat = !contrast
         ? 'YYYY-MM-DD HH:mm:ss'
         : contrastOption === 'day'
@@ -980,7 +992,7 @@ const optionGenerator = (
                     return [moment(pt).valueOf(), firstPV, lastPV, minPV, maxPV];
                 }) || []; //当存在othersData的时候，只是单曲线
             xAxis = {type: 'time'};
-            decorateAxisGridLine(xAxis, showGridLine);
+            decorateAxisGridLine(xAxis, showGridLine, theme);
             let unit = [];
             series = series.map((item) => {
                 if (item.unit) unit.push(item.unit);
@@ -1034,7 +1046,7 @@ const optionGenerator = (
             }); //当存在othersData的时候，只是单曲线
             // xAxis = {type: 'category', data: series[0].data.map(item => moment(item[0]).format('YYYY-MM-DD HH:mm:ss'))};
             xAxis = {type: 'time'};
-            decorateAxisGridLine(xAxis, showGridLine);
+            decorateAxisGridLine(xAxis, showGridLine, theme);
             let _unit = '';
             series = series.map((item) => {
                 _unit = item.unit ?? '';