release: 历史曲线增加BI主题

packages/extend-components/EC_HistoryView/src/EC_HistoryView.md

@@ -30,7 +30,7 @@ path: /
 
 ## 单图表-频率
 
-[//]: # (<code src="./demos/indexForFrequency.js"></code>)
+<code src="./demos/indexForFrequency.js"></code>
 
 [//]: # '## 移动端'
 [//]: # '<code src="./demos/mobile.js"></code>'

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,7 +58,7 @@ 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);
         if (emptyOrError.empty || emptyOrError.error) {
@@ -74,7 +74,6 @@ const SingleChart = memo((props) => {
         }
         // 加入bi模式
         if (theme === 'BI') _option = patchBIOption(_option, BI);
-        if (theme === 'BI') console.log(_option);
         return _option;
     }, [dataSource, smooth, curveCenter, chartType, predicateData]);
     useEffect(() => {
@@ -82,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;
@@ -121,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;
@@ -237,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,
                         }
                     ];
@@ -260,7 +259,7 @@ const SingleChart = memo((props) => {
                     };
                 };
                 // minMaxMarkPoint(dataSource)
-                chart.setOption({series: {markPoint: minMaxMarkPoint(dataSource)}})
+                chart.setOption({ series: { markPoint: minMaxMarkPoint(dataSource) } })
             }, 200)
         }
 
@@ -295,9 +294,10 @@ const SingleChart = memo((props) => {
                 splitNumber: 2,
             },
             minorSplitLine: {
-                show: showGridLine,
+                // show: showGridLine,
+                show: theme === 'BI' ? false : showGridLine,
                 lineStyle: {
-                    // type: 'dashed',
+                    type: 'dashed',
                 },
             },
             splitLine: {
@@ -306,7 +306,7 @@ const SingleChart = memo((props) => {
         };
         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 +316,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/VirtualTable.js

-import React, {useRef, useState, useEffect} from 'react';
+import React, { useRef, useState, useEffect } from 'react';
 import BasicTable from "@wisdom-components/basictable";
 import classNames from 'classnames';
 import ResizeObserver from 'rc-resize-observer';
-import {VariableSizeGrid as Grid} from 'react-window';
+import { VariableSizeGrid as Grid } from 'react-window';
 import './VirtualTable.less';
-
 const VirtualTable = (props) => {
     const TABLE_ROW_HEIGHT = 40;
-    const {columns, scroll} = props;
+    const { columns, scroll } = props;
     const [tableWidth, setTableWidth] = useState(0);
-    const widthColumnCount = columns.filter(({width}) => !width).length;
+    const widthColumnCount = columns.filter(({ width }) => !width).length;
     const totalWidth = columns.reduce((final, curr) => {
         return final += (curr.width ?? 0)
     }, 0);
@@ -55,7 +54,7 @@ const VirtualTable = (props) => {
         });
     };
     useEffect(() => resetVirtualGrid, [tableWidth, props.dataSource]);
-    const renderVirtualList = (rawData, {scrollbarSize, ref, onScroll}) => {
+    const renderVirtualList = (rawData, { scrollbarSize, ref, onScroll }) => {
         ref.current = connectObject;
         const totalHeight = rawData.length * TABLE_ROW_HEIGHT;
 
@@ -65,7 +64,7 @@ const VirtualTable = (props) => {
                 className="virtual-grid"
                 columnCount={mergedColumns.length}
                 columnWidth={(index) => {
-                    const {width} = mergedColumns[index];
+                    const { width } = mergedColumns[index];
                     return totalHeight > scroll.y && index === mergedColumns.length - 1
                         ? width - scrollbarSize - 1
                         : width;
@@ -75,13 +74,13 @@ const VirtualTable = (props) => {
                 rowHeight={() => TABLE_ROW_HEIGHT}
                 width={tableWidth}
                 // width={'100%'}
-                onScroll={({scrollLeft}) => {
+                onScroll={({ scrollLeft }) => {
                     onScroll({
                         scrollLeft,
                     });
                 }}
             >
-                {({columnIndex, rowIndex, style}) => (
+                {({ columnIndex, rowIndex, style }) => (
                     <div
                         className={classNames('virtual-table-cell', {
                             'virtual-table-cell-last': columnIndex === mergedColumns.length - 1,
@@ -96,14 +95,14 @@ const VirtualTable = (props) => {
     };
     return (
         <ResizeObserver
-            onResize={({width}) => {
+            onResize={({ width }) => {
                 setTableWidth(width);
             }}
         >
             <BasicTable
                 {...props}
                 size={'small'}
-                // className="virtual-table"
+                className="virtual-table"
                 columns={mergedColumns}
                 pagination={false}
                 components={{

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

@@ -14,11 +14,9 @@
   text-align: center;
   line-height: 1;
 
-  &:nth-child(even) {
-  }
+  &:nth-child(even) {}
 
-  &:nth-child(odd) {
-  }
+  &:nth-child(odd) {}
 }
 
 [data-theme="dark"] .virtual-table-cell {
@@ -28,4 +26,3 @@
   background: #141414;
   text-align: center;
 }
\ No newline at end of file
-

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

@@ -289,14 +289,6 @@ const Demo = () => {
                     {/* <HistoryView deviceParams={deviceParams} defaultModel="table" /> */}
                     <HistoryView theme={'BI'} deviceParams={deviceParams} defaultModel="curve"/>
                 </div>
-{/*                <div style={{height: 700}}>
-                     <HistoryView deviceParams={deviceParams} defaultModel="table" />
-                    <HistoryView deviceParams={deviceParams} defaultModel="curve"/>
-                </div>
-                <div style={{height: 700}}>
-                     <HistoryView deviceParams={deviceParams} defaultModel="table" />
-                    <HistoryView deviceParams={p1} defaultModel="curve"/>
-                </div>*/}
             </div>
         </>
     );

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

@@ -211,7 +211,7 @@
 
       &_text {
         padding-left: 10px;
-        color: '#333333';
+        color: #333333;
         font-weight: bold;
         font-size: 15px;
         font-family: 'Microsoft YaHei';

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

 @root-entry-name: 'default';
-@import (reference) '~antd/es/style/themes/dark.less';
+// @import (reference) '~antd/es/style/themes/dark.less';
+@import (reference) '~antd/dist/antd.dark.less';
 @history-view: ~'@{ant-prefix}-history-view';
-@BI-primary-color: #ff0000;
+@primaryColor: #1980ff;
+@primaryColorOpacity: #1980ff16;
+@primaryTextColor: #dcdcf2d9;
+
 .historyViewComponents {
+
+  --primary-color: @primaryColor;
+  --primary-color-opacity: @primaryColorOpacity;
+  --primary-color50: rgba(103, 185, 184, 0.5);
+  --primary-color20: rgba(103, 185, 184, 0.2);
+  --main-background-color: #213853;
+  --text-color: @primaryTextColor;
+  --date-negative: rgba(220, 220, 242, 0.25);
+  --date-border-color: #98bcfc29;
+  --text-color65: rgba(255, 255, 255, 0.65);
+  --text-color45: rgba(255, 255, 255, 0.45);
+  --text-color25: rgba(255, 255, 255, 0.25);
+  --text-color10: rgba(255, 255, 255, 0.1);
+  --title-text-color: #ffffff;
+  --title-text-primary-color: #ffffff;
+  --background-color: #282b34;
+  --border-color: #38435a;
+  --panel-border-color: #38435a;
+  --table-head-background-color: #dcdcf214;
+  background-color: var(--background-color);
+
+  .@{ant-prefix}-table-thead>tr>th {
+    background: var(--table-head-background-color);
+    border-bottom: 1px solid var(--border-color);
+    color: var(--text-color);
+  }
+
+  .@{ant-prefix}-table-container {
+    background: var(--background-color);
+  }
+
+  .virtual-table {
+    ::-webkit-scrollbar-thumb {
+      background: var(--border-color);
+    }
+  }
+
+  .virtual-table-cell {
+    background-color: var(--background-color);
+    border-bottom-color: var(--border-color);
+    color: var(--text-color);
+  }
+
+  &-label {
+    position: relative;
+    width: 80px;
+    color: @primaryTextColor;
+
+    &::after {
+      position: absolute;
+      top: 0;
+      right: 7px;
+      content: '：';
+    }
+  }
+  
+  // radio
   :global {
+    .@{ant-prefix}-radio-button-wrapper {
+      color: var(--text-color);
+      background-color: var(--background-color);
+      border-color: var(--panel-border-color);
+    }
+
+    .@{ant-prefix}-radio-button-wrapper:not(:first-child)::before {
+      background-color: unset;
+    }
+
     .@{ant-prefix}-radio-button-wrapper-checked:not(.@{ant-prefix}-radio-button-wrapper-disabled) {
-      color: @BI-primary-color;
+      color: var(--text-color);
+      background-color: var(--background-color);
     }
 
     .@{ant-prefix}-radio-button-wrapper-checked:not([class*=' @{ant-prefix}-radio-button-wrapper-disabled']).@{ant-prefix}-radio-button-wrapper:first-child {
-      border-right-color: @BI-primary-color;
+      border-right-color: var(--primary-color);
     }
 
     .@{ant-prefix}-radio-button-wrapper-checked:not(.@{ant-prefix}-radio-button-wrapper-disabled):first-child {
-      color: @BI-primary-color;
+      color: var(--text-color);
+      border-color: var(--primary-color);
     }
 
-    .@{ant-prefix}-radio-button-wrapper-checked:not(.@{ant-prefix}-radio-button-wrapper-disabled):first-child {
-      border-color: @BI-primary-color;
+    .@{ant-prefix}-radio-button-wrapper:hover {
+      color: var(--primary-color);
     }
 
-    .@{ant-prefix}-radio-button-wrapper:hover {
-      color: @BI-primary-color;
+    .@{ant-prefix}-radio-button-wrapper-checked:not(.@{ant-prefix}-radio-button-wrapper-disabled) {
+      background-color: var(--primary-color);
     }
 
-    .@{ant-prefix}-tabs-tab.ant-tabs-tab-active .@{ant-prefix}-tabs-tab-btn {
-      color: @BI-primary-color;
   }
 
-    .@{ant-prefix}-tabs-tab-btn:focus, .@{ant-prefix}-tabs-tab-remove:focus, .@{ant-prefix}-tabs-tab-btn:active, .@{ant-prefix}-tabs-tab-remove:active {
-      color: @BI-primary-color;
+  // tabs
+  :global {
+    .@{ant-prefix}-tabs-tab.@{ant-prefix}-tabs-tab-active .@{ant-prefix}-tabs-tab-btn {
+      color: var(--primary-color);
+    }
+
+    .@{ant-prefix}-tabs-tab-btn:focus,
+    .@{ant-prefix}-tabs-tab-remove:focus,
+    .@{ant-prefix}-tabs-tab-btn:active,
+    .@{ant-prefix}-tabs-tab-remove:active {
+      color: var(--primary-color);
     }
 
     .@{ant-prefix}-tabs-tab:hover {
-      color: @BI-primary-color;
+      color: var(--primary-color);
+    }
+
+    .@{ant-prefix}-tabs {
+      color: var(--text-color);
+
+      h3 {
+        color: var(--text-color);
+      }
+    }
+
+    .@{ant-prefix}-tabs-top>.@{ant-prefix}-tabs-nav::before {
+      border-bottom: 1px solid var(--panel-border-color);
+    }
+  }
+
+  // checkbox
+  :global {
+    .@{ant-prefix}-checkbox-input {
+      border: 1px solid var(--border-color);
+    }
+
+    .@{ant-prefix}-checkbox-inner {
+      background-color: var(--background-color);
+      border: 1px solid var(--border-color);
+    }
+
+    .@{ant-prefix}-checkbox-wrapper {
+      color: var(--text-color);
+    }
+  }
+
+  //date-picker
+  :global {
+    .@{ant-prefix}-picker {
+      background-color: var(--background-color);
+      border: 1px solid var(--border-color)
+    }
+
+    .@{ant-prefix}-picker-panel {
+      border-bottom: 1px solid var(--date-border-color);
+    }
+
+    .@{ant-prefix}-picker-datetime-panel .@{ant-prefix}-picker-time-panel,
+    .@{ant-prefix}-picker-time-panel-column:not(:first-child) {
+      border-left: 1px solid var(--date-border-color);
+    }
+
+    .ant-picker-header>button,
+    .@{ant-prefix}-picker-cell.@{ant-prefix}-picker-cell-in-view,
+    .@{ant-prefix}-picker-content th,
+    .@{ant-prefix}-picker-time-panel-column>li.@{ant-prefix}-picker-time-panel-cell .@{ant-prefix}-picker-time-panel-cell-inner {
+      color: var(--text-color);
+    }
+
+    .@{ant-prefix}-picker-panel-container {
+      background-color: var(--background-color) !important;
+    }
+
+    .@{ant-prefix}-picker-header {
+      color: var(--text-color);
+      border-bottom: 1px solid var(--date-border-color);
+    }
+
+    .@{ant-prefix}-picker-cell {
+      color: var(--date-negative);
+    }
+
+    .@{ant-prefix}-picker-time-panel-column>li.@{ant-prefix}-picker-time-panel-cell .@{ant-prefix}-picker-time-panel-cell-inner:hover,
+    .@{ant-prefix}-picker-time-panel-column>li.@{ant-prefix}-picker-time-panel-cell-selected .@{ant-prefix}-picker-time-panel-cell-inner,
+    .@{ant-prefix}-picker-cell:hover:not(.@{ant-prefix}-picker-cell-in-view) .@{ant-prefix}-picker-cell-inner,
+    .@{ant-prefix}-picker-cell:hover:not(.@{ant-prefix}-picker-cell-selected):not(.@{ant-prefix}-picker-cell-range-start):not(.@{ant-prefix}-picker-cell-range-end):not(.@{ant-prefix}-picker-cell-range-hover-start):not(.@{ant-prefix}-picker-cell-range-hover-end) .@{ant-prefix}-picker-cell-inner {
+      background-color: var(--primary-color);
+    }
+
+    .@{ant-prefix}-btn-primary[disabled] {
+      background-color: var(--primary-color-opacity);
+      color: var(--text-color);
+    }
+
+    .@{ant-prefix}-picker-range-arrow::before {
+      background-color: var(--background-color);
+    }
+  }
+
+  // select
+  :global {
+    .@{ant-prefix}-select:not(.@{ant-prefix}-select-customize-input) .@{ant-prefix}-select-selector {
+      background-color: var(--background-color);
+      color: var(--text-color);
+      border-color: var(--border-color);
+    }
+
+    .@{ant-prefix}-select-item-option-active:not(.@{ant-prefix}-select-item-option-disabled) {
+      background-color: var(--primary-color);
+      color: var(--text-color);
+    }
+
+    .@{ant-prefix}-select-dropdown {
+      background-color: var(--background-color);
+    }
+
+    .@{ant-prefix}-select-item {
+      color: var(--text-color);
     }
   }
 }
 
 .@{history-view} {
+
   height: 100%;
   padding: @padding-md;
+
+
+
+
   //background: ;
-  &-label {
-    position: relative;
-    width: 80px;
 
-    &::after {
-      position: absolute;
-      top: 0;
-      right: 7px;
-      content: '：';
-    }
-  }
 
   .@{ant-prefix}-tabs-extra-content {
     width: 82px;
     white-space: nowrap;
   }
 
-  .@{ant-prefix}-table-thead > tr > th {
-    background: rgba(224, 234, 251, 0.4) !important;
-  }
 
   &-extra-right {
     position: absolute;
@@ -71,7 +246,7 @@
   }
 
   .@{history-view}-spin,
-  .@{history-view}-spin > .@{ant-prefix}-spin-container,
+  .@{history-view}-spin>.@{ant-prefix}-spin-container,
   .@{ant-prefix}-tabs,
   .@{ant-prefix}-tabs-content,
   .@{ant-prefix}-tabs-tabpane {
@@ -299,9 +474,11 @@
   0% {
     opacity: 1;
   }
+
   50% {
     opacity: 0.4;
   }
+
   100% {
     opacity: 1;
   }
@@ -311,9 +488,11 @@
   0% {
     opacity: 1;
   }
+
   50% {
     opacity: 0.4;
   }
+
   100% {
     opacity: 1;
   }

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

 export const BI = {
-    "backgroundColor": "rgba(34,42,78,1)",
+    "backgroundColor": "#282b34",
     "titleColor": "#ffffff",
     "subtitleColor": "#dddddd",
     "textColorShow": false,

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

 import _ from 'lodash';
-import {BISplitLineColor, BIAxisLableColor, BIAxisLabelColor, BIAxisLineColor} from "./theme";
+import { BISplitLineColor, BIAxisLableColor, BIAxisLabelColor, BIAxisLineColor } from "./theme";
 
 /**
  * 1. 背景
@@ -24,7 +24,7 @@ const patchBIOption = (option, theme) => {
         show: false,
         lineStyle: {
             type: 'solid',
-            color: 'red'
+            color: BISplitLineColor
         }
     };
     _opt.xAxis.axisLine = {
@@ -53,7 +53,7 @@ const patchBIOption = (option, theme) => {
             show: false,
             lineStyle: {
                 type: 'solid',
-                color: 'red'
+                color: BISplitLineColor
             }
         };
         item.splitLine = {