Skip to content

W
wisdom-components
Commit 14e3cf6a authored by 陈龙's avatar 陈龙
Browse files
Options

release: 历史曲线增加BI主题

parent 6ffb2f78
Hide whitespace changes
Inline Side-by-side
Showing with 396 additions and 230 deletions
packages/extend-components/EC_HistoryView/src/EC_HistoryView.md
View file @ 14e3cf6a
...@@ -30,7 +30,7 @@ path: / ...@@ -30,7 +30,7 @@ path: /
## 单图表-频率 ## 单图表-频率
[//]: # (<code src="./demos/indexForFrequency.js"></code>) <code src="./demos/indexForFrequency.js"></code>
[//]: # '## 移动端' [//]: # '## 移动端'
[//]: # '<code src="./demos/mobile.js"></code>' [//]: # '<code src="./demos/mobile.js"></code>'
......
packages/extend-components/EC_HistoryView/src/SingleChart.js
View file @ 14e3cf6a
import React, {memo, useEffect, useMemo, useRef} from 'react'; import React, { memo, useEffect, useMemo, useRef } from 'react';
import {BasicChart} from '@wisdom-components/basicchart'; import { BasicChart } from '@wisdom-components/basicchart';
import optionGenerator, { import optionGenerator, {
alarmMarkLine, alarmMarkLine,
specialTypeChartOptionGenerator, specialTypeChartOptionGenerator,
} from './utils'; } from './utils';
import {isArray, cloneDeep} from 'lodash'; import { isArray, cloneDeep } from 'lodash';
import moment from "moment"; import moment from "moment";
import patchBIOption from "./useBIMode"; import patchBIOption from "./useBIMode";
import {BI, Normal} from './theme'; import { BI, Normal } from './theme';
import * as echarts from 'echarts'; import * as echarts from 'echarts';
echarts.registerTheme('BI', BI) echarts.registerTheme('BI', BI)
...@@ -58,7 +58,7 @@ const SingleChart = memo((props) => { ...@@ -58,7 +58,7 @@ const SingleChart = memo((props) => {
if (dataSource.length === 1 && SpecialType.includes(_allPointAddress[dataSource[0].sensorName])) { if (dataSource.length === 1 && SpecialType.includes(_allPointAddress[dataSource[0].sensorName])) {
config.sensorType = _allPointAddress[dataSource[0].sensorName]; config.sensorType = _allPointAddress[dataSource[0].sensorName];
config.special.allValDesc = allValDesc; 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);
if (emptyOrError.empty || emptyOrError.error) { if (emptyOrError.empty || emptyOrError.error) {
...@@ -74,7 +74,6 @@ const SingleChart = memo((props) => { ...@@ -74,7 +74,6 @@ const SingleChart = memo((props) => {
} }
// 加入bi模式 // 加入bi模式
if (theme === 'BI') _option = patchBIOption(_option, BI); if (theme === 'BI') _option = patchBIOption(_option, BI);
if (theme === 'BI') console.log(_option);
return _option; return _option;
}, [dataSource, smooth, curveCenter, chartType, predicateData]); }, [dataSource, smooth, curveCenter, chartType, predicateData]);
useEffect(() => { useEffect(() => {
...@@ -82,7 +81,7 @@ const SingleChart = memo((props) => { ...@@ -82,7 +81,7 @@ const SingleChart = memo((props) => {
const chart = chartRef.current?.getEchartsInstance?.(); const chart = chartRef.current?.getEchartsInstance?.();
function hander(params) { function hander(params) {
const {selected} = params; const { selected } = params;
const count = Object.values(selected || {}).filter((item) => item).length; const count = Object.values(selected || {}).filter((item) => item).length;
const option = cloneDeep(chart.getOption()); const option = cloneDeep(chart.getOption());
const needMarkLine = count === 1; const needMarkLine = count === 1;
...@@ -121,8 +120,8 @@ const SingleChart = memo((props) => { ...@@ -121,8 +120,8 @@ const SingleChart = memo((props) => {
let minPoint = pointArr[minValueIndex]; let minPoint = pointArr[minValueIndex];
if (!maxPoint || !minPoint) return {} if (!maxPoint || !minPoint) return {}
// 3. 计算坐标位置，返回的是 [x,y]的像素坐标 // 3. 计算坐标位置，返回的是 [x,y]的像素坐标
let maxPointPosition = chart.convertToPixel({seriesIndex: 0}, [moment(maxPoint.pt).valueOf(), maxPoint.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]) let minPointPosition = chart.convertToPixel({ seriesIndex: 0 }, [moment(minPoint.pt).valueOf(), minPoint.pv])
if (!maxPointPosition || !minPointPosition) return; if (!maxPointPosition || !minPointPosition) return;
// 4. 计算最大最小值的标签宽度 // 4. 计算最大最小值的标签宽度
let maxLength = 80 + String(maxValue).length * 5; let maxLength = 80 + String(maxValue).length * 5;
...@@ -237,14 +236,14 @@ const SingleChart = memo((props) => { ...@@ -237,14 +236,14 @@ const SingleChart = memo((props) => {
name: '', name: '',
type: 'max', type: 'max',
symbol: 'emptyCircle', symbol: 'emptyCircle',
label: {show: false}, label: { show: false },
symbolSize: 6, symbolSize: 6,
}, },
{ {
name: '', name: '',
type: 'min', type: 'min',
symbol: 'emptyCircle', symbol: 'emptyCircle',
label: {show: false}, label: { show: false },
symbolSize: 6, symbolSize: 6,
} }
]; ];
...@@ -260,7 +259,7 @@ const SingleChart = memo((props) => { ...@@ -260,7 +259,7 @@ const SingleChart = memo((props) => {
}; };
}; };
// minMaxMarkPoint(dataSource) // minMaxMarkPoint(dataSource)
chart.setOption({series: {markPoint: minMaxMarkPoint(dataSource)}}) chart.setOption({ series: { markPoint: minMaxMarkPoint(dataSource) } })
}, 200) }, 200)
} }
...@@ -295,9 +294,10 @@ const SingleChart = memo((props) => { ...@@ -295,9 +294,10 @@ const SingleChart = memo((props) => {
splitNumber: 2, splitNumber: 2,
}, },
minorSplitLine: { minorSplitLine: {
show: showGridLine, // show: showGridLine,
show: theme === 'BI' ? false : showGridLine,
lineStyle: { lineStyle: {
// type: 'dashed', type: 'dashed',
}, },
}, },
splitLine: { splitLine: {
...@@ -306,7 +306,7 @@ const SingleChart = memo((props) => { ...@@ -306,7 +306,7 @@ const SingleChart = memo((props) => {
}; };
let yAxis = axisConfig; let yAxis = axisConfig;
if (isArray(option.yAxis)) { if (isArray(option.yAxis)) {
yAxis = option.yAxis.map((item) => ({...axisConfig})); yAxis = option.yAxis.map((item) => ({ ...axisConfig }));
} }
let xAxis = axisConfig; let xAxis = axisConfig;
chart.setOption({ chart.setOption({
...@@ -316,7 +316,7 @@ const SingleChart = memo((props) => { ...@@ -316,7 +316,7 @@ const SingleChart = memo((props) => {
}); });
}, [showGridLine]); }, [showGridLine]);
return <BasicChart theme={theme} ref={chartRef} option={option} notMerge return <BasicChart theme={theme} ref={chartRef} option={option} notMerge
style={{width: '100%', height: '100%'}}/> style={{ width: '100%', height: '100%' }} />
}); });
export default SingleChart; export default SingleChart;
packages/extend-components/EC_HistoryView/src/VirtualTable.js
View file @ 14e3cf6a
import React, {useRef, useState, useEffect} from 'react'; import React, { useRef, useState, useEffect } from 'react';
import BasicTable from "@wisdom-components/basictable"; import BasicTable from "@wisdom-components/basictable";
import classNames from 'classnames'; import classNames from 'classnames';
import ResizeObserver from 'rc-resize-observer'; import ResizeObserver from 'rc-resize-observer';
import {VariableSizeGrid as Grid} from 'react-window'; import { VariableSizeGrid as Grid } from 'react-window';
import './VirtualTable.less'; import './VirtualTable.less';
const VirtualTable = (props) => { const VirtualTable = (props) => {
const TABLE_ROW_HEIGHT = 40; const TABLE_ROW_HEIGHT = 40;
const {columns, scroll} = props; const { columns, scroll } = props;
const [tableWidth, setTableWidth] = useState(0); 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) => { const totalWidth = columns.reduce((final, curr) => {
return final += (curr.width ?? 0) return final += (curr.width ?? 0)
}, 0); }, 0);
...@@ -55,7 +54,7 @@ const VirtualTable = (props) => { ...@@ -55,7 +54,7 @@ const VirtualTable = (props) => {
}); });
}; };
useEffect(() => resetVirtualGrid, [tableWidth, props.dataSource]); useEffect(() => resetVirtualGrid, [tableWidth, props.dataSource]);
const renderVirtualList = (rawData, {scrollbarSize, ref, onScroll}) => { const renderVirtualList = (rawData, { scrollbarSize, ref, onScroll }) => {
ref.current = connectObject; ref.current = connectObject;
const totalHeight = rawData.length * TABLE_ROW_HEIGHT; const totalHeight = rawData.length * TABLE_ROW_HEIGHT;
...@@ -65,7 +64,7 @@ const VirtualTable = (props) => { ...@@ -65,7 +64,7 @@ const VirtualTable = (props) => {
className="virtual-grid" className="virtual-grid"
columnCount={mergedColumns.length} columnCount={mergedColumns.length}
columnWidth={(index) => { columnWidth={(index) => {
const {width} = mergedColumns[index]; const { width } = mergedColumns[index];
return totalHeight > scroll.y && index === mergedColumns.length - 1 return totalHeight > scroll.y && index === mergedColumns.length - 1
? width - scrollbarSize - 1 ? width - scrollbarSize - 1
: width; : width;
...@@ -75,13 +74,13 @@ const VirtualTable = (props) => { ...@@ -75,13 +74,13 @@ const VirtualTable = (props) => {
rowHeight={() => TABLE_ROW_HEIGHT} rowHeight={() => TABLE_ROW_HEIGHT}
width={tableWidth} width={tableWidth}
// width={'100%'} // width={'100%'}
onScroll={({scrollLeft}) => { onScroll={({ scrollLeft }) => {
onScroll({ onScroll({
scrollLeft, scrollLeft,
}); });
}} }}
> >
{({columnIndex, rowIndex, style}) => ( {({ columnIndex, rowIndex, style }) => (
<div <div
className={classNames('virtual-table-cell', { className={classNames('virtual-table-cell', {
'virtual-table-cell-last': columnIndex === mergedColumns.length - 1, 'virtual-table-cell-last': columnIndex === mergedColumns.length - 1,
...@@ -96,14 +95,14 @@ const VirtualTable = (props) => { ...@@ -96,14 +95,14 @@ const VirtualTable = (props) => {
}; };
return ( return (
<ResizeObserver <ResizeObserver
onResize={({width}) => { onResize={({ width }) => {
setTableWidth(width); setTableWidth(width);
}} }}
> >
<BasicTable <BasicTable
{...props} {...props}
size={'small'} size={'small'}
// className="virtual-table" className="virtual-table"
columns={mergedColumns} columns={mergedColumns}
pagination={false} pagination={false}
components={{ components={{
......
packages/extend-components/EC_HistoryView/src/VirtualTable.less
View file @ 14e3cf6a
...@@ -14,11 +14,9 @@ ...@@ -14,11 +14,9 @@
text-align: center; text-align: center;
line-height: 1; line-height: 1;
&:nth-child(even) { &:nth-child(even) {}
}
&:nth-child(odd) { &:nth-child(odd) {}
}
} }
[data-theme="dark"] .virtual-table-cell { [data-theme="dark"] .virtual-table-cell {
...@@ -27,5 +25,4 @@ ...@@ -27,5 +25,4 @@
border-bottom: 1px solid #303030; border-bottom: 1px solid #303030;
background: #141414; background: #141414;
text-align: center; text-align: center;
} }
\ No newline at end of file
packages/extend-components/EC_HistoryView/src/demos/index.js
View file @ 14e3cf6a
...@@ -289,14 +289,6 @@ const Demo = () => { ...@@ -289,14 +289,6 @@ const Demo = () => {
{/* <HistoryView deviceParams={deviceParams} defaultModel="table" /> */} {/* <HistoryView deviceParams={deviceParams} defaultModel="table" /> */}
<HistoryView theme={'BI'} deviceParams={deviceParams} defaultModel="curve"/> <HistoryView theme={'BI'} deviceParams={deviceParams} defaultModel="curve"/>
</div> </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> </div>
</> </>
); );
......
packages/extend-components/EC_HistoryView/src/index.js
View file @ 14e3cf6a
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
* 非influxdb版本的接口，使用isDilute=false实现； * 非influxdb版本的接口，使用isDilute=false实现；
* 建议：不抽稀的时候，传isDilute=false&zoom=''&unit='' * 建议：不抽稀的时候，传isDilute=false&zoom=''&unit=''
* */ * */
import React, {useContext, useEffect, useMemo, useState, useCallback, useRef} from 'react'; import React, { useContext, useEffect, useMemo, useState, useCallback, useRef } from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import classNames from 'classnames'; import classNames from 'classnames';
import { import {
...@@ -40,13 +40,14 @@ import { ...@@ -40,13 +40,14 @@ import {
import SingleChart from './SingleChart'; import SingleChart from './SingleChart';
import GridChart from './GridChart'; import GridChart from './GridChart';
import BIStyles from './indexForBI.less'; import BIStyles from './indexForBI.less';
import {globalConfig} from 'antd/lib/config-provider'; import { globalConfig } from 'antd/lib/config-provider';
import {getSensorType} from './apis/index'; import { getSensorType } from './apis/index';
import {ExportExcel} from '@wisdom-components/exportexcel'; import { ExportExcel } from '@wisdom-components/exportexcel';
import VirtualTable from './VirtualTable'; import VirtualTable from './VirtualTable';
const {RangePicker} = DatePicker; const { RangePicker } = DatePicker;
const {Option} = Select; const { Option } = Select;
const startFormat = 'YYYY-MM-DD 00:00:00'; const startFormat = 'YYYY-MM-DD 00:00:00';
const endFormat = 'YYYY-MM-DD 23:59:59'; const endFormat = 'YYYY-MM-DD 23:59:59';
...@@ -290,8 +291,8 @@ const handleFakeData = (dateRange, deviceParams) => { ...@@ -290,8 +291,8 @@ const handleFakeData = (dateRange, deviceParams) => {
_arr.forEach(sensor => { _arr.forEach(sensor => {
final.push({ final.push({
dataModel: [ dataModel: [
{pt: dateFrom, pv: null}, { pt: dateFrom, pv: null },
{pt: dateTo, pv: null} { pt: dateTo, pv: null }
], ],
dateFrom, dateFrom,
dateTo, dateTo,
...@@ -318,15 +319,9 @@ const timeColumn = { ...@@ -318,15 +319,9 @@ const timeColumn = {
const OriginMaxDays = 31; // 原始曲线请求数据的最大天数 const OriginMaxDays = 31; // 原始曲线请求数据的最大天数
const CharacteristicMaxDays = null; // 特征曲线或者其他曲线的最大天数 const CharacteristicMaxDays = null; // 特征曲线或者其他曲线的最大天数
const HistoryView = (props) => { const HistoryView = (props) => {
debugger
const [completeInit, setCompleteInit] = useState(false); const [completeInit, setCompleteInit] = useState(false);
const {getPrefixCls} = useContext(ConfigProvider.ConfigContext); const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);
const prefixCls = props.theme === 'BI' ? getPrefixCls('BI-history-view') : getPrefixCls('history-view'); const prefixCls = getPrefixCls('history-view');
// const prefixClsForBI = getPrefixCls('BI-history-view');
const themeMap = {
Normal: `${prefixCls}-wrapper`,
BI: `${prefixCls}-BI-wrapper`
}
const { const {
title, title,
grid, grid,
...@@ -541,13 +536,13 @@ const HistoryView = (props) => { ...@@ -541,13 +536,13 @@ const HistoryView = (props) => {
onContrastChange(contrastOption); onContrastChange(contrastOption);
setShowBoxOption(false); setShowBoxOption(false);
setChartType('lineChart'); setChartType('lineChart');
onCheckboxChange({target: {value: false}}, 'chartType'); onCheckboxChange({ target: { value: false } }, 'chartType');
onCheckboxChange({target: {value: false}}, 'ignoreOutliers'); onCheckboxChange({ target: { value: false } }, 'ignoreOutliers');
} else { } else {
// 自定义 // 自定义
// 不需要处理 // 不需要处理
setShowBoxOption(true); setShowBoxOption(true);
onCheckboxChange({target: {value: true}}, 'chartType'); onCheckboxChange({ target: { value: true } }, 'chartType');
} }
}; };
const onShortcutsChange = (e) => { const onShortcutsChange = (e) => {
...@@ -557,37 +552,37 @@ const HistoryView = (props) => { ...@@ -557,37 +552,37 @@ const HistoryView = (props) => {
switch (_val) { switch (_val) {
case '近3天': case '近3天':
_arr = [ _arr = [
{key: 1, value: moment()}, { key: 1, value: moment() },
{key: 2, value: moment().subtract(1, 'days')}, { key: 2, value: moment().subtract(1, 'days') },
{key: 3, value: moment().subtract(2, 'days')}, { key: 3, value: moment().subtract(2, 'days') },
]; ];
break; break;
case '近7天': case '近7天':
_arr = [ _arr = [
{key: 1, value: moment()}, { key: 1, value: moment() },
{key: 2, value: moment().subtract(1, 'days')}, { key: 2, value: moment().subtract(1, 'days') },
{key: 3, value: moment().subtract(2, 'days')}, { key: 3, value: moment().subtract(2, 'days') },
{key: 4, value: moment().subtract(3, 'days')}, { key: 4, value: moment().subtract(3, 'days') },
{key: 5, value: moment().subtract(4, 'days')}, { key: 5, value: moment().subtract(4, 'days') },
{key: 6, value: moment().subtract(5, 'days')}, { key: 6, value: moment().subtract(5, 'days') },
{key: 7, value: moment().subtract(6, 'days')}, { key: 7, value: moment().subtract(6, 'days') },
]; ];
break; break;
case '近3月': case '近3月':
_arr = [ _arr = [
{key: 1, value: moment()}, { key: 1, value: moment() },
{key: 2, value: moment().subtract(1, 'months')}, { key: 2, value: moment().subtract(1, 'months') },
{key: 3, value: moment().subtract(2, 'months')}, { key: 3, value: moment().subtract(2, 'months') },
]; ];
break; break;
case '近6月': case '近6月':
_arr = [ _arr = [
{key: 1, value: moment()}, { key: 1, value: moment() },
{key: 2, value: moment().subtract(1, 'months')}, { key: 2, value: moment().subtract(1, 'months') },
{key: 3, value: moment().subtract(2, 'months')}, { key: 3, value: moment().subtract(2, 'months') },
{key: 4, value: moment().subtract(3, 'months')}, { key: 4, value: moment().subtract(3, 'months') },
{key: 5, value: moment().subtract(4, 'months')}, { key: 5, value: moment().subtract(4, 'months') },
{key: 6, value: moment().subtract(5, 'months')}, { key: 6, value: moment().subtract(5, 'months') },
]; ];
break; break;
} }
...@@ -610,6 +605,7 @@ const HistoryView = (props) => { ...@@ -610,6 +605,7 @@ const HistoryView = (props) => {
dataSource={timeList} dataSource={timeList}
/> />
<RangePicker <RangePicker
getPopupContainer={trigger => trigger.parentElement}
format={'YYYY-MM-DD HH:mm'} format={'YYYY-MM-DD HH:mm'}
className={classNames(`${prefixCls}-custime-customer`)} className={classNames(`${prefixCls}-custime-customer`)}
onChange={onCustomerRangeChange} onChange={onCustomerRangeChange}
...@@ -644,7 +640,7 @@ const HistoryView = (props) => { ...@@ -644,7 +640,7 @@ const HistoryView = (props) => {
)} )}
{timeValue === 'contrast' && ( // 同期对比 {timeValue === 'contrast' && ( // 同期对比
<> <>
<Select value={contrastOption} style={{width: 60}} onChange={onContrastChange}> <Select value={contrastOption} style={{ width: 60 }} onChange={onContrastChange}>
<Option value="day">日</Option> <Option value="day">日</Option>
<Option value="month" disabled={lineDataType === '原始曲线'}> <Option value="month" disabled={lineDataType === '原始曲线'}>
月 月
...@@ -668,14 +664,14 @@ const HistoryView = (props) => { ...@@ -668,14 +664,14 @@ const HistoryView = (props) => {
picker={contrastOption === 'day' ? undefined : contrastOption} picker={contrastOption === 'day' ? undefined : contrastOption}
value={child.value} value={child.value}
onChange={(date, dateString) => onContrastPickerChange(date, dateString, child)} onChange={(date, dateString) => onContrastPickerChange(date, dateString, child)}
style={{width: 130, border: !shortcutsValue ? '1px solid #1890ff' : ''}} style={{ width: 130, border: !shortcutsValue ? '1px solid #1890ff' : '' }}
/> />
{datePickerArr.length > 2 && ( {datePickerArr.length > 2 && (
<div <div
className={classNames(`${prefixCls}-contrast-delete`)} className={classNames(`${prefixCls}-contrast-delete`)}
onClick={() => handleDeleteDatePicker(index)} onClick={() => handleDeleteDatePicker(index)}
> >
<CloseCircleFilled/> <CloseCircleFilled />
</div> </div>
)} )}
</div> </div>
...@@ -684,7 +680,7 @@ const HistoryView = (props) => { ...@@ -684,7 +680,7 @@ const HistoryView = (props) => {
)} )}
</div> </div>
))} ))}
{datePickerArr.length < 4 && <PlusCircleOutlined onClick={handleAddDatePicker}/>} {datePickerArr.length < 4 && <PlusCircleOutlined onClick={handleAddDatePicker} />}
</> </>
)} )}
</div> </div>
...@@ -755,12 +751,12 @@ const HistoryView = (props) => { ...@@ -755,12 +751,12 @@ const HistoryView = (props) => {
</Checkbox> </Checkbox>
{child.tooltip && ( {child.tooltip && (
<Tooltip title={child.tooltip}> <Tooltip title={child.tooltip}>
<QuestionCircleFilled className={`${prefixCls}-question`}/> <QuestionCircleFilled className={`${prefixCls}-question`} />
</Tooltip> </Tooltip>
)} )}
{child.hasSub && child.checked && false ? ( {child.hasSub && child.checked && false ? (
<Select <Select
style={{width: 80, marginLeft: 10}} style={{ width: 80, marginLeft: 10 }}
value={algorithmValue} value={algorithmValue}
onChange={(e) => setAlgorithmValue(e)} onChange={(e) => setAlgorithmValue(e)}
> >
...@@ -780,7 +776,7 @@ const HistoryView = (props) => { ...@@ -780,7 +776,7 @@ const HistoryView = (props) => {
return ( return (
<div <div
className={classNames(`${prefixCls}-cover`)} className={classNames(`${prefixCls}-cover`)}
style={isChart && isSingle ? {width: '100%'} : {}} style={isChart && isSingle ? { width: '100%' } : {}}
> >
{isChart && !isStatus ? ( {isChart && !isStatus ? (
<> <>
...@@ -792,7 +788,7 @@ const HistoryView = (props) => { ...@@ -792,7 +788,7 @@ const HistoryView = (props) => {
</Radio.Group> </Radio.Group>
<Tooltip title={'原始曲线数据量较大，单次查询最多展示1万条数据'}> <Tooltip title={'原始曲线数据量较大，单次查询最多展示1万条数据'}>
<QuestionCircleFilled <QuestionCircleFilled
style={{marginLeft: 6}} style={{ marginLeft: 6 }}
className={`${prefixCls}-question`} className={`${prefixCls}-question`}
/> />
</Tooltip> </Tooltip>
...@@ -805,16 +801,16 @@ const HistoryView = (props) => { ...@@ -805,16 +801,16 @@ const HistoryView = (props) => {
<> <>
{lineDataType !== '原始曲线' ? ( {lineDataType !== '原始曲线' ? (
<> <>
<div style={{marginLeft: 7}} className={classNames(`${prefixCls}-label`)}> <div style={{ marginLeft: 7 }} className={classNames(`${prefixCls}-label`)}>
曲线形态 曲线形态
</div> </div>
<Radio.Group <Radio.Group
value={chartType} value={chartType}
style={{marginRight: 16}} style={{ marginRight: 16 }}
onChange={(e) => { onChange={(e) => {
let _value = e.target.value; let _value = e.target.value;
setChartType(_value); setChartType(_value);
onCheckboxChange({target: {value: _value !== 'boxChart'}}, 'chartType'); onCheckboxChange({ target: { value: _value !== 'boxChart' } }, 'chartType');
}} }}
> >
<Radio.Button value={'lineChart'}>线形图</Radio.Button> <Radio.Button value={'lineChart'}>线形图</Radio.Button>
...@@ -845,9 +841,10 @@ const HistoryView = (props) => { ...@@ -845,9 +841,10 @@ const HistoryView = (props) => {
{activeTabKey === 'table' && ( {activeTabKey === 'table' && (
<Select <Select
value={dataThinKey} value={dataThinKey}
style={{width: 90}} style={{ width: 90 }}
onChange={onTimeIntervalChange} onChange={onTimeIntervalChange}
disabled={!dataConfig.dataThin} disabled={!dataConfig.dataThin}
getPopupContainer={trigger => trigger.parentElement}
> >
{timeIntervalList {timeIntervalList
.filter((item) => { .filter((item) => {
...@@ -956,7 +953,7 @@ const HistoryView = (props) => { ...@@ -956,7 +953,7 @@ const HistoryView = (props) => {
// data = data.filter(item => item.sensorName !== '是否在线'); // data = data.filter(item => item.sensorName !== '是否在线');
const ignoreOutliers = checkboxData.find((item) => item.key === 'ignoreOutliers').checked; const ignoreOutliers = checkboxData.find((item) => item.key === 'ignoreOutliers').checked;
const dataIndexAccess = (dataItem, index) => { const dataIndexAccess = (dataItem, index) => {
const {stationCode, sensorName} = dataItem; const { stationCode, sensorName } = dataItem;
return `${stationCode}-${sensorName}-${index}`; return `${stationCode}-${sensorName}-${index}`;
}; };
...@@ -967,7 +964,7 @@ const HistoryView = (props) => { ...@@ -967,7 +964,7 @@ const HistoryView = (props) => {
// 判断是否是单设备，单设备则不显示设备名称 // 判断是否是单设备，单设备则不显示设备名称
// 处理表头数据 // 处理表头数据
const columnsData = data.map((item, index) => { const columnsData = data.map((item, index) => {
const {stationCode, equipmentName, sensorName, unit, dataModel} = item; const { stationCode, equipmentName, sensorName, unit, dataModel } = item;
const dataIndex = dataIndexAccess(item, index); const dataIndex = dataIndexAccess(item, index);
let _title = ''; let _title = '';
if (deviceConfig.current.oneDevice) { if (deviceConfig.current.oneDevice) {
...@@ -997,7 +994,7 @@ const HistoryView = (props) => { ...@@ -997,7 +994,7 @@ const HistoryView = (props) => {
// 格式化时间对齐数据, 生成行数 // 格式化时间对齐数据, 生成行数
const timeData = {}; const timeData = {};
const buildDefaultData = (time) => { const buildDefaultData = (time) => {
const obj = {key: time, time: time}; const obj = { key: time, time: time };
data.forEach((item, index) => { data.forEach((item, index) => {
const dataIndex = dataIndexAccess(item, index); const dataIndex = dataIndexAccess(item, index);
obj[dataIndex] = ''; obj[dataIndex] = '';
...@@ -1006,31 +1003,31 @@ const HistoryView = (props) => { ...@@ -1006,31 +1003,31 @@ const HistoryView = (props) => {
return obj; return obj;
}; };
data.forEach((item, index) => { data.forEach((item, index) => {
const {stationCode, sensorName, dataModel} = item; const { stationCode, sensorName, dataModel } = item;
dataModel && dataModel &&
dataModel.forEach((data) => { dataModel.forEach((data) => {
const formatTime = moment(data.pt).format(format); const formatTime = moment(data.pt).format(format);
let time = formatTime; let time = formatTime;
if (timeValue === 'contrast') { if (timeValue === 'contrast') {
time = time.slice(contrastOption === 'day' ? 11 : 8, 16); time = time.slice(contrastOption === 'day' ? 11 : 8, 16);
} }
timeData[formatTime] = timeData[formatTime] || buildDefaultData(time); timeData[formatTime] = timeData[formatTime] || buildDefaultData(time);
}); });
}); });
// 处理表格数据 // 处理表格数据
data.forEach((child, index) => { data.forEach((child, index) => {
const {dataModel} = child; const { dataModel } = child;
const dataIndex = dataIndexAccess(child, index); const dataIndex = dataIndexAccess(child, index);
dataModel && dataModel &&
dataModel.forEach((value, j) => { dataModel.forEach((value, j) => {
const formatTime = moment(value.pt).format(format); const formatTime = moment(value.pt).format(format);
const dataRow = timeData[formatTime]; const dataRow = timeData[formatTime];
if (dataRow) { if (dataRow) {
dataRow[dataIndex] = value.pv === null || value.pv === undefined ? '' : value.pv; dataRow[dataIndex] = value.pv === null || value.pv === undefined ? '' : value.pv;
} }
}); });
}); });
const timeSort = (a, b) => { const timeSort = (a, b) => {
let aa = a, let aa = a,
...@@ -1077,34 +1074,34 @@ const HistoryView = (props) => { ...@@ -1077,34 +1074,34 @@ const HistoryView = (props) => {
}; };
const handleDataThinKey = (diffYears, diffDays, diffHours, lineDataType) => { const handleDataThinKey = (diffYears, diffDays, diffHours, lineDataType) => {
if (lineDataType === '原始曲线') { if (lineDataType === '原始曲线') {
return {unit: '', zoom: ''}; return { unit: '', zoom: '' };
} }
// edit by zy 根据选择的时长控制抽稀频度 // edit by zy 根据选择的时长控制抽稀频度
if (diffYears > 0) { if (diffYears > 0) {
if (diffYears === 1) return {unit: 'h', zoom: '24'}; if (diffYears === 1) return { unit: 'h', zoom: '24' };
return {unit: 'h', zoom: '48'}; return { unit: 'h', zoom: '48' };
} else if (diffYears === 0 && diffDays > 0) { } else if (diffYears === 0 && diffDays > 0) {
if (diffDays > 90) return {unit: 'h', zoom: '24'}; if (diffDays > 90) return { unit: 'h', zoom: '24' };
if (diffDays > 30) return {unit: 'h', zoom: '4'}; if (diffDays > 30) return { unit: 'h', zoom: '4' };
if (diffDays > 15) return {unit: 'h', zoom: '2'}; if (diffDays > 15) return { unit: 'h', zoom: '2' };
if (diffDays > 7) return {unit: 'h', zoom: '1'}; if (diffDays > 7) return { unit: 'h', zoom: '1' };
if (diffDays > 3) return {unit: 'min', zoom: '20'}; if (diffDays > 3) return { unit: 'min', zoom: '20' };
if (diffDays > 1) return {unit: 'min', zoom: '15'}; if (diffDays > 1) return { unit: 'min', zoom: '15' };
if (diffDays === 1) return {unit: 'min', zoom: '5'}; if (diffDays === 1) return { unit: 'min', zoom: '5' };
} else if (diffYears === 0 && diffDays === 0 && diffHours > 0) { } else if (diffYears === 0 && diffDays === 0 && diffHours > 0) {
if (diffHours > 12) return {unit: 'min', zoom: '5'}; if (diffHours > 12) return { unit: 'min', zoom: '5' };
if (diffHours > 4) return {unit: 'min', zoom: '1'}; if (diffHours > 4) return { unit: 'min', zoom: '1' };
if (diffHours > 1) return {unit: 's', zoom: '30'}; if (diffHours > 1) return { unit: 's', zoom: '30' };
if (diffHours > 0) return {unit: 's', zoom: '5'}; if (diffHours > 0) return { unit: 's', zoom: '5' };
return {unit: 's', zoom: '5'}; return { unit: 's', zoom: '5' };
} else { } else {
return {unit: '', zoom: ''}; return { unit: '', zoom: '' };
} }
}; };
// 处理接口服务参数的变化 // 处理接口服务参数的变化
const onChangeParams = (value = {}) => { const onChangeParams = (value = {}) => {
const {dateRange, isDilute, ignoreOutliers, zoom, unit} = value; const { dateRange, isDilute, ignoreOutliers, zoom, unit } = value;
let _diffDays = moment(dateRange[0].dateTo).diff(dateRange[0].dateFrom, 'days'); let _diffDays = moment(dateRange[0].dateTo).diff(dateRange[0].dateFrom, 'days');
// 查询时段大于7天时，不提供1分钟的抽稀选项。 // 查询时段大于7天时，不提供1分钟的抽稀选项。
if (_diffDays > 7 && zoom === '1' && unit === 'min') { if (_diffDays > 7 && zoom === '1' && unit === 'min') {
...@@ -1117,7 +1114,7 @@ const HistoryView = (props) => { ...@@ -1117,7 +1114,7 @@ const HistoryView = (props) => {
let hasDiscreteDeviceType = false; let hasDiscreteDeviceType = false;
deviceParams deviceParams
.map((item) => { .map((item) => {
let _item = {...item}; let _item = { ...item };
_item.sensors = item.sensors; _item.sensors = item.sensors;
// special 业务 // special 业务
if (special1) { if (special1) {
...@@ -1156,9 +1153,9 @@ const HistoryView = (props) => { ...@@ -1156,9 +1153,9 @@ const HistoryView = (props) => {
activeTabKey === 'curve' activeTabKey === 'curve'
? handleDataThinKey(diffYears, diffDays, diffHours, lineDataType) ? handleDataThinKey(diffYears, diffDays, diffHours, lineDataType)
: !isDilute : !isDilute
? {zoom: '', unit: ''} ? { zoom: '', unit: '' }
: {}; // 表格也支持全数据模式； : {}; // 表格也支持全数据模式；
let _finalParams = {...param, ...zoomParam}; let _finalParams = { ...param, ...zoomParam };
// 2024年1月8日 抽稀间隔大于等于12小时时，会存在线性插值导致抽稀间隔内数据条数大于预期的问题。需要增加一个额外参数处理该情况。 // 2024年1月8日 抽稀间隔大于等于12小时时，会存在线性插值导致抽稀间隔内数据条数大于预期的问题。需要增加一个额外参数处理该情况。
if (_finalParams.zoom) { if (_finalParams.zoom) {
let _num = Number(_finalParams.zoom); let _num = Number(_finalParams.zoom);
...@@ -1186,7 +1183,7 @@ const HistoryView = (props) => { ...@@ -1186,7 +1183,7 @@ const HistoryView = (props) => {
let data = []; let data = [];
// let _predicateData = []; // let _predicateData = [];
results.forEach((res, index) => { results.forEach((res, index) => {
const {dateFrom, dateTo} = dateRange?.[index] ?? {}; const { dateFrom, dateTo } = dateRange?.[index] ?? {};
if (res.code === 0 && res.data.length) { if (res.code === 0 && res.data.length) {
res.data.forEach((d) => { res.data.forEach((d) => {
d.dateFrom = dateFrom || ''; d.dateFrom = dateFrom || '';
...@@ -1200,7 +1197,7 @@ const HistoryView = (props) => { ...@@ -1200,7 +1197,7 @@ const HistoryView = (props) => {
*/ */
// d.dataModel=[]; // d.dataModel=[];
d.dataModel = d.dataModel.map((item) => { d.dataModel = d.dataModel.map((item) => {
let {firstPV, lastPV, maxPV, minPV, pv} = item; let { firstPV, lastPV, maxPV, minPV, pv } = item;
if (pv !== null && firstPV === null && lastPV === null && maxPV === null && minPV === null) { if (pv !== null && firstPV === null && lastPV === null && maxPV === null && minPV === null) {
firstPV = pv; firstPV = pv;
lastPV = pv; lastPV = pv;
...@@ -1267,7 +1264,7 @@ const HistoryView = (props) => { ...@@ -1267,7 +1264,7 @@ const HistoryView = (props) => {
useEffect(() => { useEffect(() => {
if (!completeInit) return; if (!completeInit) return;
const {dataThin, ignoreOutliers, zoom, unit} = dataConfig; const { dataThin, ignoreOutliers, zoom, unit } = dataConfig;
beforChangeParams().finally(() => { beforChangeParams().finally(() => {
onChangeParams({ onChangeParams({
isDilute: dataThin, isDilute: dataThin,
...@@ -1295,6 +1292,8 @@ const HistoryView = (props) => { ...@@ -1295,6 +1292,8 @@ const HistoryView = (props) => {
{chartDataSource.length > 0 ? ( {chartDataSource.length > 0 ? (
// <BasicTable // <BasicTable
<VirtualTable <VirtualTable
className={`${prefixCls}-virtual-table`}
theme={theme}
dataSource={tableData.sort((a, b) => { dataSource={tableData.sort((a, b) => {
let _a = a.time; let _a = a.time;
let _b = b.time; let _b = b.time;
...@@ -1321,7 +1320,7 @@ const HistoryView = (props) => { ...@@ -1321,7 +1320,7 @@ const HistoryView = (props) => {
}} }}
/> />
) : ( ) : (
<PandaEmpty/> <PandaEmpty />
)} )}
</div> </div>
</> </>
...@@ -1369,7 +1368,7 @@ const HistoryView = (props) => { ...@@ -1369,7 +1368,7 @@ const HistoryView = (props) => {
)} )}
</div> </div>
{lineDataType === '原始曲线' && false ? ( {lineDataType === '原始曲线' && false ? (
<div style={{marginTop: 10}}>展示区间：{returnLongestPeriod(chartDataSource)}</div> <div style={{ marginTop: 10 }}>展示区间：{returnLongestPeriod(chartDataSource)}</div>
) : ( ) : (
'' ''
)} )}
...@@ -1440,7 +1439,7 @@ const HistoryView = (props) => { ...@@ -1440,7 +1439,7 @@ const HistoryView = (props) => {
) )
return setCompleteInit(true); return setCompleteInit(true);
setLoading(true); setLoading(true);
const {deviceCode, deviceType, sensors} = deviceParams[0]; const { deviceCode, deviceType, sensors } = deviceParams[0];
let _id = ( let _id = (
await getPointAddress({ await getPointAddress({
code: deviceCode, code: deviceCode,
...@@ -1485,7 +1484,7 @@ const HistoryView = (props) => { ...@@ -1485,7 +1484,7 @@ const HistoryView = (props) => {
return final; return final;
}, {}); }, {});
_checkboxData = _checkboxData.map((item) => { _checkboxData = _checkboxData.map((item) => {
let _item = {...item}; let _item = { ...item };
if (_opt[item.label] !== undefined) { if (_opt[item.label] !== undefined) {
_item.checked = _opt[item.label] === 'true'; _item.checked = _opt[item.label] === 'true';
} }
...@@ -1551,67 +1550,65 @@ const HistoryView = (props) => { ...@@ -1551,67 +1550,65 @@ const HistoryView = (props) => {
} }
}, [loading]); }, [loading]);
return ( return (
<ConfigProvider prefixCls={`${getPrefixCls()}-BI`}> <div
<div className={classNames(prefixCls, theme === 'BI' ? BIStyles.historyViewComponents : '', 'wkt-scroll-light')}>
className={classNames(prefixCls, theme === 'BI' ? BIStyles.historyViewComponents : '', 'wkt-scroll-light')}> <div className={classNames(`${prefixCls}-spin`)} style={{ position: 'relative' }}>
<div className={classNames(`${prefixCls}-spin`)} style={{position: 'relative'}}> {loading || percent !== 0 ? (
{loading || percent !== 0 ? ( <div className={classNames(`${prefixCls}-progressWrapper`)}>
<div className={classNames(`${prefixCls}-progressWrapper`)}> {lineDataType === '原始曲线' ||
{lineDataType === '原始曲线' ||
(lineDataType === '特征曲线' && (lineDataType === '特征曲线' &&
moment(dateRange?.[0]?.dateTo).diff(moment(dateRange?.[0]?.dateFrom), 'days') >= moment(dateRange?.[0]?.dateTo).diff(moment(dateRange?.[0]?.dateFrom), 'days') >=
30) ? 30) ?
<div className={classNames(`${prefixCls}-contentWrapper`)}> <div className={classNames(`${prefixCls}-contentWrapper`)}>
<Progress <Progress
percent={percent} percent={percent}
steps={20} steps={20}
className={classNames(`${prefixCls}-progress`, `${prefixCls}-blink-2`)} className={classNames(`${prefixCls}-progress`, `${prefixCls}-blink-2`)}
showInfo={false} showInfo={false}
/> />
<div className={classNames(`${prefixCls}-tip`)}>加载中...</div> <div className={classNames(`${prefixCls}-tip`)}>加载中...</div>
</div> : </div> :
<Spin spinning={loading || false} tip={'数据加载中...'} delay={1000} <Spin spinning={loading || false} tip={'数据加载中...'} delay={1000}
style={{background: 'transparent'}}/> style={{ background: 'transparent' }} />
} }
</div> </div>
) : ( ) : (
'' ''
)} )}
{showModels.length === 1 && ( {showModels.length === 1 && (
<div className={`${prefixCls}-single-panel`}>{renderPanel(showModels[0])}</div> <div className={`${prefixCls}-single-panel`}>{renderPanel(showModels[0])}</div>
)} )}
{showModels.length > 1 && ( {showModels.length > 1 && (
<Tabs <Tabs
activeKey={activeTabKey} activeKey={activeTabKey}
onChange={(key) => setActiveTabKey(key)} onChange={(key) => setActiveTabKey(key)}
centered centered
tabBarExtraContent={{ tabBarExtraContent={{
left: <h3>{title}</h3>, left: <h3>{title}</h3>,
right: ( right: (
<div className={`${prefixCls}-extra-right`}> <div className={`${prefixCls}-extra-right`}>
{activeTabKey === 'table' && ( {activeTabKey === 'table' && (
<> <>
<Button type="link" onClick={exportFeatureBtn}> <Button type="link" onClick={exportFeatureBtn}>
<DownloadOutlined/> <DownloadOutlined />
下载 下载
</Button> </Button>
</> </>
)} )}
</div> </div>
), ),
}} }}
> >
<Tabs.TabPane key="curve" tab="曲线" forceRender={true}> <Tabs.TabPane key="curve" tab="曲线" forceRender={true}>
{activeTabKey === 'curve' ? renderPanel('curve') : ''} {activeTabKey === 'curve' ? renderPanel('curve') : ''}
</Tabs.TabPane> </Tabs.TabPane>
<Tabs.TabPane key="table" tab="表格"> <Tabs.TabPane key="table" tab="表格">
{renderPanel('table')} {renderPanel('table')}
</Tabs.TabPane> </Tabs.TabPane>
</Tabs> </Tabs>
)} )}
</div>
</div> </div>
</ConfigProvider> </div>
) )
}; };
......
packages/extend-components/EC_HistoryView/src/index.less
View file @ 14e3cf6a
...@@ -211,7 +211,7 @@ ...@@ -211,7 +211,7 @@
&_text { &_text {
padding-left: 10px; padding-left: 10px;
color: '#333333'; color: #333333;
font-weight: bold; font-weight: bold;
font-size: 15px; font-size: 15px;
font-family: 'Microsoft YaHei'; font-family: 'Microsoft YaHei';
......
packages/extend-components/EC_HistoryView/src/indexForBI.less
View file @ 14e3cf6a
@root-entry-name: 'default'; @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'; @history-view: ~'@{ant-prefix}-history-view';
@BI-primary-color: #ff0000; @primaryColor: #1980ff;
@primaryColorOpacity: #1980ff16;
@primaryTextColor: #dcdcf2d9;
.historyViewComponents { .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 { :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) { .@{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 { .@{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 { .@{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 { .@{ant-prefix}-radio-button-wrapper:hover {
border-color: @BI-primary-color; color: var(--primary-color);
} }
.@{ant-prefix}-radio-button-wrapper:hover { .@{ant-prefix}-radio-button-wrapper-checked:not(.@{ant-prefix}-radio-button-wrapper-disabled) {
color: @BI-primary-color; 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 { .@{ant-prefix}-tabs-tab-btn:focus,
color: @BI-primary-color; .@{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 { .@{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} { .@{history-view} {
height: 100%; height: 100%;
padding: @padding-md; padding: @padding-md;
//background: ; //background: ;
&-label {
position: relative;
width: 80px;
&::after {
position: absolute;
top: 0;
right: 7px;
content: '：';
}
}
.@{ant-prefix}-tabs-extra-content { .@{ant-prefix}-tabs-extra-content {
width: 82px; width: 82px;
white-space: nowrap; white-space: nowrap;
} }
.@{ant-prefix}-table-thead > tr > th {
background: rgba(224, 234, 251, 0.4) !important;
}
&-extra-right { &-extra-right {
position: absolute; position: absolute;
...@@ -71,7 +246,7 @@ ...@@ -71,7 +246,7 @@
} }
.@{history-view}-spin, .@{history-view}-spin,
.@{history-view}-spin > .@{ant-prefix}-spin-container, .@{history-view}-spin>.@{ant-prefix}-spin-container,
.@{ant-prefix}-tabs, .@{ant-prefix}-tabs,
.@{ant-prefix}-tabs-content, .@{ant-prefix}-tabs-content,
.@{ant-prefix}-tabs-tabpane { .@{ant-prefix}-tabs-tabpane {
...@@ -299,9 +474,11 @@ ...@@ -299,9 +474,11 @@
0% { 0% {
opacity: 1; opacity: 1;
} }
50% { 50% {
opacity: 0.4; opacity: 0.4;
} }
100% { 100% {
opacity: 1; opacity: 1;
} }
...@@ -311,10 +488,12 @@ ...@@ -311,10 +488,12 @@
0% { 0% {
opacity: 1; opacity: 1;
} }
50% { 50% {
opacity: 0.4; opacity: 0.4;
} }
100% { 100% {
opacity: 1; opacity: 1;
} }
} }
\ No newline at end of file
packages/extend-components/EC_HistoryView/src/theme.js
View file @ 14e3cf6a
export const BI = { export const BI = {
"backgroundColor": "rgba(34,42,78,1)", "backgroundColor": "#282b34",
"titleColor": "#ffffff", "titleColor": "#ffffff",
"subtitleColor": "#dddddd", "subtitleColor": "#dddddd",
"textColorShow": false, "textColorShow": false,
......
packages/extend-components/EC_HistoryView/src/useBIMode.js
View file @ 14e3cf6a
import _ from 'lodash'; import _ from 'lodash';
import {BISplitLineColor, BIAxisLableColor, BIAxisLabelColor, BIAxisLineColor} from "./theme"; import { BISplitLineColor, BIAxisLableColor, BIAxisLabelColor, BIAxisLineColor } from "./theme";
/** /**
* 1. 背景 * 1. 背景
...@@ -24,7 +24,7 @@ const patchBIOption = (option, theme) => { ...@@ -24,7 +24,7 @@ const patchBIOption = (option, theme) => {
show: false, show: false,
lineStyle: { lineStyle: {
type: 'solid', type: 'solid',
color: 'red' color: BISplitLineColor
} }
}; };
_opt.xAxis.axisLine = { _opt.xAxis.axisLine = {
...@@ -53,7 +53,7 @@ const patchBIOption = (option, theme) => { ...@@ -53,7 +53,7 @@ const patchBIOption = (option, theme) => {
show: false, show: false,
lineStyle: { lineStyle: {
type: 'solid', type: 'solid',
color: 'red' color: BISplitLineColor
} }
}; };
item.splitLine = { 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