Skip to content

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

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

parent 09726d19
Hide whitespace changes
Inline Side-by-side
Showing with 71 additions and 62 deletions
packages/extend-components/EC_HistoryView/src/SingleChart.js
View file @ e7d50f66
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
View file @ e7d50f66
......@@ -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
View file @ e7d50f66
......@@ -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
View file @ e7d50f66
......@@ -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
View file @ e7d50f66
......@@ -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
View file @ e7d50f66
......@@ -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 ?? '';
......
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