Skip to content

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

feat: 单曲线legend配置设定默认值

parent 216e6d23
Hide whitespace changes
Inline Side-by-side
Showing with 102 additions and 87 deletions
packages/extend-components/EC_HistoryView/src/demos/index.js
View file @ 6dfa42bf
......@@ -4,16 +4,17 @@ import { MobileHistoryChart } from "../mobile";
const deviceParams = [
/*10.182*/
{
/* {
"deviceCode": "EGBF00000136",
"sensors": "进水压力,出水压力,出水瞬时流量,今日供水量,1#水箱液位,视频报警",
// "sensors": "视频报警",
// "sensors": "进水压力,出水压力,出水瞬时流量,今日供水量,1#水箱液位,视频报警",
"sensors": "视频报警",
"deviceType": "二供泵房"
},
},*/
{
"deviceCode": "EGJZ00000158",
// "sensors": "进水压力,出水压力,泵1状态",
"sensors": "泵1状态",
"sensors": "进水压力",
// "sensors": "泵1状态",
"deviceType": "二供机组"
}
/* {
......@@ -107,18 +108,18 @@ const deviceParams = [
},*/
/*确山*/
/*泵3状态*/
/* {
/* {
// EGJZ00000003
deviceCode: 'EGJZ00000003',
// sensors: '3#频率',
sensors: '出1累计流量',
deviceType: '二供机组',
}, */
},*/
/* {
"deviceCode": "EGBF00000006",
"sensors": "出1累计流量",
"deviceType": "二供泵房"
} */
}*/
];
const Demo = () => {
return (
......
packages/extend-components/EC_HistoryView/src/utils.js
View file @ 6dfa42bf
import moment from 'moment';
import _, { isArray } from 'lodash';
import _, {isArray} from 'lodash';
import maxIcon from './assets/最大实心.svg';
import minIcon from './assets/最小实心.svg';
import minIconDownArrow from './assets/最小实心箭头朝下.svg';
......@@ -68,7 +68,7 @@ const currentOption = isMobile() ? MOBILE_OPTION : PC_OPTION;
* @returns
*/
const nameFormatter = (data, contrast, contrastOption, nameWithSensor) => {
const { equipmentName, sensorName, unit, dataModel, dateFrom, dateTo } = data;
const {equipmentName, sensorName, unit, dataModel, dateFrom, dateTo} = data;
let name = nameWithSensor ? `${equipmentName}-${sensorName}` : equipmentName;
if (contrast) {
const time = dateFrom.slice(0, contrastOption === 'day' ? 10 : 7).replace(/-/g, '');
......@@ -103,7 +103,7 @@ const dataAccessor = (data, contrast, contrastOption) => {
* @returns Null/areaStyle, 为null显示曲线图, 为areaStyle对象显示为面积图.
*/
const areaStyleFormatter = (data) => {
const { sensorName } = data;
const {sensorName} = data;
return sensorName && sensorName.indexOf('流量') > -1 ? {} : null;
};
......@@ -114,7 +114,7 @@ const areaStyleFormatter = (data) => {
* @returns
*/
const minMax = (data) => {
const { dataModel } = data;
const {dataModel} = data;
let min = Number.MAX_SAFE_INTEGER;
let max = Number.MIN_SAFE_INTEGER;
dataModel.forEach((item) => {
......@@ -145,7 +145,7 @@ const markLineItem = (name, value, color) => {
export const alarmMarkLine = (dataItem, index, dataSource, schemes) => {
// 只有一个数据曲线时显示markline
if (!dataItem || !schemes || dataSource.length !== 1) return {};
const { deviceType, stationCode, sensorName, decimalPoint } = dataItem;
const {deviceType, stationCode, sensorName, decimalPoint} = dataItem;
const curSchemes = schemes.filter(
(item) =>
item.deviceCode === stationCode &&
......@@ -154,7 +154,7 @@ export const alarmMarkLine = (dataItem, index, dataSource, schemes) => {
);
const data = [];
curSchemes.forEach((scheme) => {
const { hLimit, hhLimit, lLimit, llLimit } = scheme;
const {hLimit, hhLimit, lLimit, llLimit} = scheme;
lLimit !== null && lLimit !== void 0 && data.push(markLineItem('低限', lLimit, '#fa8c16'));
hLimit !== null && hLimit !== void 0 && data.push(markLineItem('高限', hLimit, '#fa8c16'));
llLimit !== null && llLimit !== void 0 && data.push(markLineItem('低低限', llLimit, '#FF0000'));
......@@ -246,7 +246,7 @@ export const decorateAxisGridLine = (axis, showGrid) => {
*/
export const offlineArea = (dataItem) => {
if (!dataItem) return {};
const { dataModel } = dataItem;
const {dataModel} = dataItem;
let datas = new Array();
let offlineData = [];
let hasOffline = false;
......@@ -256,7 +256,7 @@ export const offlineArea = (dataItem) => {
{
name: '离线',
xAxis: new Date(item.pt),
label: { show: !datas?.length },
label: {show: !datas?.length},
},
];
hasOffline = true;
......@@ -280,7 +280,7 @@ export const offlineArea = (dataItem) => {
// tooltip 模板
const headTemplate = (param, opt) => {
if (!param) return '';
const { name, axisValueLabel, axisType, axisValue } = param;
const {name, axisValueLabel, axisType, axisValue} = param;
const timeFormat =
opt && opt.contrast
? opt.contrastOption === 'day'
......@@ -296,21 +296,21 @@ const headTemplate = (param, opt) => {
};
const seriesTemplate = (param, unit) => {
if (!param || param.seriesName === '自定义') return '';
const { value, encode } = param;
const {value, encode} = param;
// const val = value[encode.y[0]];
const _unit = unit || '';
const color = '#008CFF';
if (!isArray(value))
return ` <div style="display: flex; align-items: center;">
<span style="${isMobile()
? 'width: ' +
handlePx(90, 'px') +
';overflow:hidden;text-overflow:ellipsis;white-space:nowrap'
: ''
}">${param.seriesName}</span>
? 'width: ' +
handlePx(90, 'px') +
';overflow:hidden;text-overflow:ellipsis;white-space:nowrap'
: ''
}">${param.seriesName}</span>
<span style="display:inline-block;">：</span>
<span style="color:${color};margin: 0 ${handlePx(5, 'px')} 0 auto;">${value?.toFixed(3) ?? '-'
}</span>
}</span>
<span style="font-size: ${handlePx(12, 'px')};">${_unit ?? ''}</span>
</div>`;
return param.componentSubType !== 'candlestick'
......@@ -445,7 +445,7 @@ const handleSpecial1 = (special, dataSource) => {
},
},
name: item.text,
label: { show: true },
label: {show: true},
},
{
xAxis: item.lte,
......@@ -480,28 +480,28 @@ const handleSpecial1 = (special, dataSource) => {
};
// 生成x坐标
const returnXAxis = ({
dataSource,
contrast,
contrastOption,
nameWithSensor,
showMarkLine,
deviceAlarmSchemes,
showPoint,
restOption,
smooth,
special,
yAxis
}) => {
dataSource,
contrast,
contrastOption,
nameWithSensor,
showMarkLine,
deviceAlarmSchemes,
showPoint,
restOption,
smooth,
special,
yAxis
}) => {
// 根据"指标名称"分类yAxis
const yAxisInterator = (() => {
const map = new Map();
let current = -1;
const get = (name) => (map.has(name) ? map.get(name) : map.set(name, ++current).get(name));
return { get };
return {get};
})();
let _offlineData = [];
// 生成visualMap、markArea
let { visualMap, markArea } = handleSpecial1(special, dataSource);
let {visualMap, markArea} = handleSpecial1(special, dataSource);
let _filterArr = ['是否在线'];
if (special?.special1?.name) {
_filterArr.push(special.special1.name);
......@@ -515,7 +515,7 @@ const returnXAxis = ({
return !_filterArr.includes(item.sensorName);
})
.map((item, index) => {
const { sensorName, unit } = item;
const {sensorName, unit} = item;
const name = nameFormatter(item, contrast, contrastOption, nameWithSensor);
const data = dataAccessor(item, contrast, contrastOption);
const type = 'line';
......@@ -650,9 +650,9 @@ const reduceYAxis = (arr, dataSource) => {
let _baseOffset = _offsetValue[index - 2] ?? 0;
let _finalOffset = (
_lastAxisNumber !== undefined ? // 没有相邻的轴
(_lastAxisNumber === 0 ? 20 : _lastAxisNumber.toFixed(2).replaceAll('.', '').length) * 12
: 0
) + _baseOffset;
(_lastAxisNumber === 0 ? 20 : _lastAxisNumber.toFixed(2).replaceAll('.', '').length) * 12
: 0
) + _baseOffset;
_offsetValue.push(_finalOffset);
return ({
...item,
......@@ -676,11 +676,11 @@ const reduceYAxis = (arr, dataSource) => {
* @param {boolean} showGridLine 是否显示网格线。
* @return {object} 返回左右轴的margin、yAxis的配置。
* */
const handleYAxis = ({ dataSource, needUnit, curveCenter, showGridLine }) => {
const handleYAxis = ({dataSource, needUnit, curveCenter, showGridLine}) => {
const yAxisMap = new Map();
// 1. 找出最大值; 2. 计算出y轴最大宽度动态计算偏移距离；
dataSource.forEach((item, index) => {
const { sensorName, unit } = item;
const {sensorName, unit} = item;
const key = sensorName;
if (!yAxisMap.has(key)) {
/* const i = yAxisMap.size;
......@@ -727,10 +727,10 @@ const handleYAxis = ({ dataSource, needUnit, curveCenter, showGridLine }) => {
const axis = yAxisMap.get(key);
decorateAxisGridLine(axis, showGridLine);
});
const yAxis = yAxisMap.size > 0 ? reduceYAxis([...yAxisMap.values()], dataSource) : { type: 'value' };
const yAxis = yAxisMap.size > 0 ? reduceYAxis([...yAxisMap.values()], dataSource) : {type: 'value'};
const leftNum = Math.ceil(yAxisMap.size / 2);
const rightNum = Math.floor(yAxisMap.size / 2);
return { leftNum, rightNum, yAxis };
return {leftNum, rightNum, yAxis};
};
/**
* 1. 最后的配置处理、合并
......@@ -777,7 +777,19 @@ const assignOptions = (restOption, xAxis, legendData, chartType, contrast, contr
];
xAxis.minInterval = 3600 * (1 * 1000);
if (legendData) {
restOption.legend = { ...restOption.legend, ...{ data: legendData } };
restOption.legend = {
...{
show: true,
// data: legend,
// selectedMode: false,
left: 'right',
top: 30,
icon: 'rect',
itemWidth: 14,
itemHeight: 8,
itemGap: 20,
}, ...restOption.legend, ...{data: legendData}
};
}
};
......@@ -966,13 +978,13 @@ const optionGenerator = (
restOption,
special,
} = handleDefault(config, cusOption);
const { leftNum, rightNum, yAxis } = handleYAxis({
const {leftNum, rightNum, yAxis} = handleYAxis({
dataSource,
needUnit,
curveCenter,
showGridLine,
});
let { xAxis, series, visualMap } = returnXAxis({
let {xAxis, series, visualMap} = returnXAxis({
dataSource,
contrast,
contrastOption,
......@@ -999,16 +1011,16 @@ const optionGenerator = (
if (chartType === 'boxChart' && lineDataType === '特征曲线') {
const otherData =
dataSource?.[0]?.dataModel.map((item) => {
const { firstPV, lastPV, maxPV, minPV, pt } = item;
const {firstPV, lastPV, maxPV, minPV, pt} = item;
return [moment(pt).valueOf(), firstPV, lastPV, minPV, maxPV];
}) || []; //当存在othersData的时候，只是单曲线
xAxis = { type: 'time' };
xAxis = {type: 'time'};
decorateAxisGridLine(xAxis, showGridLine);
let unit = [];
series = series.map((item) => {
if (item.unit) unit.push(item.unit);
item.areaStyle = null;
return { ...item, showSymbol: false };
return {...item, showSymbol: false};
});
series.push({
type: 'candlestick',
......@@ -1039,7 +1051,7 @@ const optionGenerator = (
* 2. 当最大值小于零时（此时，最小值一定小于零）；
*/
dataSource?.[0]?.dataModel.forEach((item) => {
const { firstPV, lastPV, maxPV, minPV, pt } = item;
const {firstPV, lastPV, maxPV, minPV, pt} = item;
_maxValues.push(maxPV);
let time = contrast ? moment(pt).format(formatStr) : pt;
_maxData.push([
......@@ -1049,13 +1061,13 @@ const optionGenerator = (
_minData.push([moment(time).valueOf(), maxPV > 0 ? minPV : maxPV]);
}); //当存在othersData的时候，只是单曲线
// xAxis = {type: 'category', data: series[0].data.map(item => moment(item[0]).format('YYYY-MM-DD HH:mm:ss'))};
xAxis = { type: 'time' };
xAxis = {type: 'time'};
decorateAxisGridLine(xAxis, showGridLine);
let _unit = '';
series = series.map((item) => {
_unit = item.unit ?? '';
item.areaStyle = null;
return { ...item, showSymbol: false };
return {...item, showSymbol: false};
});
[[..._minData], [..._maxData]].forEach((item, index) => {
series.push({
......@@ -1085,34 +1097,34 @@ const optionGenerator = (
<div>
<div style="display: flex; align-items: center;">
<span style="${isMobile()
? 'width: ' +
handlePx(90, 'px') +
';overflow:hidden;text-overflow:ellipsis;white-space:nowrap'
: ''
}">${e[0].seriesName
}</span><span style="display:inline-block;">：</span>
? 'width: ' +
handlePx(90, 'px') +
';overflow:hidden;text-overflow:ellipsis;white-space:nowrap'
: ''
}">${e[0].seriesName
}</span><span style="display:inline-block;">：</span>
<span style="color: ${COLOR.NORMAL};margin: 0 ${handlePx(
5,
'px',
)} 0 auto;">${e[0]?.value?.[1] ?? '-'}</span>
5,
'px',
)} 0 auto;">${e[0]?.value?.[1] ?? '-'}</span>
<span style="font-size: ${handlePx(12, 'px')};">${_unit ?? ''}</span>
</div>
<div style="display: ${lineDataType === '特征曲线' ? 'flex' : 'none'
}; align-items: center;">
}; align-items: center;">
<span>周期最小值</span><span style="display:inline-block;">：</span>
<span style="color: ${COLOR.AVG};margin: 0 ${handlePx(
5,
'px',
)} 0 auto;">${e?.[1]?.value?.[1] ?? '-'}</span>
5,
'px',
)} 0 auto;">${e?.[1]?.value?.[1] ?? '-'}</span>
<span style="font-size: ${handlePx(12, 'px')};">${_unit ?? ''}</span>
</div>
<div style="display: ${lineDataType === '特征曲线' ? 'flex' : 'none'
}; align-items: center;">
}; align-items: center;">
<span>周期最大值</span><span style="display:inline-block;">：</span>
<span style="color: ${COLOR.AVG};margin: 0 ${handlePx(
5,
'px',
)} 0 auto;">${_maxValues[e?.[2]?.dataIndex] ?? '-'}</span>
5,
'px',
)} 0 auto;">${_maxValues[e?.[2]?.dataIndex] ?? '-'}</span>
<span style="font-size: ${handlePx(12, 'px')};">${_unit ?? ''}</span>
</div>
</div>
......@@ -1128,7 +1140,7 @@ const optionGenerator = (
} else {
tooltip = tooltipAccessor(
series.map((item) => item.unit),
{ contrastOption, contrast },
{contrastOption, contrast},
);
}
tooltip.timeFormat = tooltipTimeFormat;
......@@ -1213,34 +1225,35 @@ const handleSpecial2 = (special, sensorName, sensorType, data1, data2) => {
}
name = _switchNameMap[data1.pv];
color = _switchColorMap[data1.pv];
};
}
;
value1 = moment(data1.pt).valueOf();
value2 = moment(data2.pt).valueOf();
return { color, value1, value2, name }
return {color, value1, value2, name}
};
const handleDataToSeries = (special, sensorName, sensorType, data) => {
let _data = [];
let _legend = []
data.forEach((item, index) => {
if (index === data.length - 1) return;
let { color, value1, value2, name } = handleSpecial2(special, sensorName, sensorType, item, data[index + 1])
let {color, value1, value2, name} = handleSpecial2(special, sensorName, sensorType, item, data[index + 1])
if (!_legend.includes(name)) _legend.push(name);
_data.push({
itemStyle: { normal: { color } },
itemStyle: {normal: {color}},
name: name,
value: [0, value1, value2, `${item.pt}-${data[index + 1].pt}`]
});
});
return { data: _data, legend: _legend };
return {data: _data, legend: _legend};
};
const specialTypeChartOptionGenerator = ({ dataSource, cusOption, contrast, contrastOption, smooth, config }) => {
const { special, sensorType } = config;
const { allSensorType, allPointAddress } = special;
const specialTypeChartOptionGenerator = ({dataSource, cusOption, contrast, contrastOption, smooth, config}) => {
const {special, sensorType} = config;
const {allSensorType, allPointAddress} = special;
// 处理原始数据，处理数据为后series数据
const sensorName = dataSource[0].sensorName;
let _data = handleDataSource(dataSource);
let { data, legend } = handleDataToSeries(special, sensorName, sensorType, _data);
let {data, legend} = handleDataToSeries(special, sensorName, sensorType, _data);
// 1. x/y轴
let xAxis = {
type: 'time',
......@@ -1323,10 +1336,11 @@ const specialTypeChartOptionGenerator = ({ dataSource, cusOption, contrast, cont
开: '#1685ff'
}
return {
type:'custom',
name:item,
color:_map[item],
renderItem:()=>{}
type: 'custom',
name: item,
color: _map[item],
renderItem: () => {
}
}
})
];
......
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