Commit 14e3cf6a authored by 陈龙's avatar 陈龙

release: 历史曲线增加BI主题

parent 6ffb2f78
......@@ -30,7 +30,7 @@ path: /
## 单图表-频率
[//]: # (<code src="./demos/indexForFrequency.js"></code>)
<code src="./demos/indexForFrequency.js"></code>
[//]: # '## 移动端'
[//]: # '<code src="./demos/mobile.js"></code>'
......
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;
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={{
......
......@@ -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 {
......@@ -27,5 +25,4 @@
border-bottom: 1px solid #303030;
background: #141414;
text-align: center;
}
}
\ No newline at end of file
......@@ -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>
</>
);
......
......@@ -211,7 +211,7 @@
&_text {
padding-left: 10px;
color: '#333333';
color: #333333;
font-weight: bold;
font-size: 15px;
font-family: 'Microsoft YaHei';
......
@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;
}
// 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: @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: 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,10 +488,12 @@
0% {
opacity: 1;
}
50% {
opacity: 0.4;
}
100% {
opacity: 1;
}
}
}
\ No newline at end of file
export const BI = {
"backgroundColor": "rgba(34,42,78,1)",
"backgroundColor": "#282b34",
"titleColor": "#ffffff",
"subtitleColor": "#dddddd",
"textColorShow": false,
......
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 = {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment