Commit 778b5caf authored by 陈龙's avatar 陈龙

fix: 修复pt取值异常导致的问题

parent 516fb3e0
import moment from 'moment'; import moment from 'moment';
import _, {isArray} from 'lodash'; import _, { isArray } from 'lodash';
import maxIcon from './assets/最大实心.svg'; import maxIcon from './assets/最大实心.svg';
import minIcon from './assets/最小实心.svg'; import minIcon from './assets/最小实心.svg';
...@@ -40,8 +40,8 @@ const PC_OPTION = { ...@@ -40,8 +40,8 @@ const PC_OPTION = {
lineHeight: 22, lineHeight: 22,
backgroundColor: backgroundColor:
window.globalConfig && window.globalConfig &&
window.globalConfig && window.globalConfig &&
window.globalConfig.variableTheme?.primaryColor window.globalConfig.variableTheme?.primaryColor
? window.globalConfig.variableTheme.primaryColor ? window.globalConfig.variableTheme.primaryColor
: '#0087F7', : '#0087F7',
borderWidth: 1 borderWidth: 1
...@@ -71,7 +71,7 @@ const currentOption = isMobile() ? MOBILE_OPTION : PC_OPTION; ...@@ -71,7 +71,7 @@ const currentOption = isMobile() ? MOBILE_OPTION : PC_OPTION;
* @returns * @returns
*/ */
const nameFormatter = (data, contrast, contrastOption, nameWithSensor) => { 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; let name = nameWithSensor ? `${equipmentName}-${sensorName}` : equipmentName;
if (contrast) { if (contrast) {
const time = dateFrom.slice(0, contrastOption === 'day' ? 10 : 7).replace(/-/g, ''); const time = dateFrom.slice(0, contrastOption === 'day' ? 10 : 7).replace(/-/g, '');
...@@ -106,7 +106,7 @@ const dataAccessor = (data, contrast, contrastOption) => { ...@@ -106,7 +106,7 @@ const dataAccessor = (data, contrast, contrastOption) => {
* @returns Null/areaStyle, 为null显示曲线图, 为areaStyle对象显示为面积图. * @returns Null/areaStyle, 为null显示曲线图, 为areaStyle对象显示为面积图.
*/ */
const areaStyleFormatter = (data) => { const areaStyleFormatter = (data) => {
const {sensorName} = data; const { sensorName } = data;
return sensorName && sensorName.indexOf('流量') > -1 ? {} : null; return sensorName && sensorName.indexOf('流量') > -1 ? {} : null;
}; };
...@@ -117,7 +117,7 @@ const areaStyleFormatter = (data) => { ...@@ -117,7 +117,7 @@ const areaStyleFormatter = (data) => {
* @returns * @returns
*/ */
const minMax = (data) => { const minMax = (data) => {
const {dataModel} = data; const { dataModel } = data;
let min = Number.MAX_SAFE_INTEGER; let min = Number.MAX_SAFE_INTEGER;
let max = Number.MIN_SAFE_INTEGER; let max = Number.MIN_SAFE_INTEGER;
dataModel.forEach((item) => { dataModel.forEach((item) => {
...@@ -148,7 +148,7 @@ const markLineItem = (name, value, color) => { ...@@ -148,7 +148,7 @@ const markLineItem = (name, value, color) => {
export const alarmMarkLine = (dataItem, index, dataSource, schemes) => { export const alarmMarkLine = (dataItem, index, dataSource, schemes) => {
// 只有一个数据曲线时显示markline // 只有一个数据曲线时显示markline
if (!dataItem || !schemes || dataSource.length !== 1) return {}; if (!dataItem || !schemes || dataSource.length !== 1) return {};
const {deviceType, stationCode, sensorName, decimalPoint} = dataItem; const { deviceType, stationCode, sensorName, decimalPoint } = dataItem;
const curSchemes = schemes.filter( const curSchemes = schemes.filter(
(item) => (item) =>
item.deviceCode === stationCode && item.deviceCode === stationCode &&
...@@ -157,7 +157,7 @@ export const alarmMarkLine = (dataItem, index, dataSource, schemes) => { ...@@ -157,7 +157,7 @@ export const alarmMarkLine = (dataItem, index, dataSource, schemes) => {
); );
const data = []; const data = [];
curSchemes.forEach((scheme) => { 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')); lLimit !== null && lLimit !== void 0 && data.push(markLineItem('低限', lLimit, '#fa8c16'));
hLimit !== null && hLimit !== void 0 && data.push(markLineItem('高限', hLimit, '#fa8c16')); hLimit !== null && hLimit !== void 0 && data.push(markLineItem('高限', hLimit, '#fa8c16'));
llLimit !== null && llLimit !== void 0 && data.push(markLineItem('低低限', llLimit, '#FF0000')); llLimit !== null && llLimit !== void 0 && data.push(markLineItem('低低限', llLimit, '#FF0000'));
...@@ -249,7 +249,7 @@ export const decorateAxisGridLine = (axis, showGrid) => { ...@@ -249,7 +249,7 @@ export const decorateAxisGridLine = (axis, showGrid) => {
*/ */
export const offlineArea = (dataItem) => { export const offlineArea = (dataItem) => {
if (!dataItem) return {}; if (!dataItem) return {};
const {dataModel} = dataItem; const { dataModel } = dataItem;
let datas = new Array(); let datas = new Array();
let offlineData = []; let offlineData = [];
let hasOffline = false; let hasOffline = false;
...@@ -280,7 +280,7 @@ export const offlineArea = (dataItem) => { ...@@ -280,7 +280,7 @@ export const offlineArea = (dataItem) => {
}; };
export const buildDefaultLegend = (option) => { export const buildDefaultLegend = (option) => {
const {title} = option; const { title } = option;
let paddingRight = 0; let paddingRight = 0;
if (title && title.show) paddingRight = 80; // 给标题留够空间 if (title && title.show) paddingRight = 80; // 给标题留够空间
...@@ -303,7 +303,7 @@ export const buildDefaultLegend = (option) => { ...@@ -303,7 +303,7 @@ export const buildDefaultLegend = (option) => {
const headTemplate = (param, opt) => { const headTemplate = (param, opt) => {
if (!param) return ''; if (!param) return '';
const {name, axisValueLabel, axisType, axisValue} = param; const { name, axisValueLabel, axisType, axisValue } = param;
const timeFormat = opt && opt.contrast ? (opt.contrastOption === 'day' ? 'HH:mm:ss' : 'DD日') : 'YYYY-MM-DD HH:mm:ss'; const timeFormat = opt && opt.contrast ? (opt.contrastOption === 'day' ? 'HH:mm:ss' : 'DD日') : 'YYYY-MM-DD HH:mm:ss';
const text = const text =
axisType === 'xAxis.time' ? moment(axisValue).format(timeFormat) : name || axisValueLabel; axisType === 'xAxis.time' ? moment(axisValue).format(timeFormat) : name || axisValueLabel;
...@@ -311,7 +311,7 @@ const headTemplate = (param, opt) => { ...@@ -311,7 +311,7 @@ const headTemplate = (param, opt) => {
}; };
const seriesTemplate = (param, unit) => { const seriesTemplate = (param, unit) => {
if (!param) return ''; if (!param) return '';
const {value, encode} = param; const { value, encode } = param;
// const val = value[encode.y[0]]; // const val = value[encode.y[0]];
const _unit = unit || ''; const _unit = unit || '';
const color = '#008CFF'; const color = '#008CFF';
...@@ -375,22 +375,22 @@ const tooltipAccessor = (unit, contrastOption) => { ...@@ -375,22 +375,22 @@ const tooltipAccessor = (unit, contrastOption) => {
}; };
}; };
const returnXAxis = ({ const returnXAxis = ({
dataSource, dataSource,
contrast, contrast,
contrastOption, contrastOption,
nameWithSensor, nameWithSensor,
showMarkLine, showMarkLine,
deviceAlarmSchemes, deviceAlarmSchemes,
showPoint, showPoint,
restOption, restOption,
smooth smooth
}) => { }) => {
// 根据"指标名称"分类yAxis // 根据"指标名称"分类yAxis
const yAxisInterator = (() => { const yAxisInterator = (() => {
const map = new Map(); const map = new Map();
let current = -1; let current = -1;
const get = (name) => (map.has(name) ? map.get(name) : map.set(name, ++current).get(name)); const get = (name) => (map.has(name) ? map.get(name) : map.set(name, ++current).get(name));
return {get}; return { get };
})(); })();
let _offlineData = []; let _offlineData = [];
let series = dataSource let series = dataSource
...@@ -401,7 +401,7 @@ const returnXAxis = ({ ...@@ -401,7 +401,7 @@ const returnXAxis = ({
return item.sensorName !== '是否在线'; return item.sensorName !== '是否在线';
}) })
.map((item, index) => { .map((item, index) => {
const {sensorName, unit} = item; const { sensorName, unit } = item;
const name = nameFormatter(item, contrast, contrastOption, nameWithSensor); const name = nameFormatter(item, contrast, contrastOption, nameWithSensor);
const data = dataAccessor(item, contrast, contrastOption); const data = dataAccessor(item, contrast, contrastOption);
const type = 'line'; const type = 'line';
...@@ -415,9 +415,9 @@ const returnXAxis = ({ ...@@ -415,9 +415,9 @@ const returnXAxis = ({
// 需求变更:设备离线改用“是否在线”的数据,离线的状态标记的数据用该部分的数据。 2023年4月25日09:36:55 // 需求变更:设备离线改用“是否在线”的数据,离线的状态标记的数据用该部分的数据。 2023年4月25日09:36:55
let _offlineAreasData = _offlineData let _offlineAreasData = _offlineData
.map((item) => { .map((item) => {
let _item = {...item}; let _item = { ...item };
_item.dataModel = item.dataModel.map((d) => { _item.dataModel = item.dataModel.map((d) => {
let _d = {...d}; let _d = { ...d };
_d.pv = 0; _d.pv = 0;
return _d; return _d;
}); });
...@@ -452,7 +452,7 @@ const returnXAxis = ({ ...@@ -452,7 +452,7 @@ const returnXAxis = ({
.map((item) => item.data?.[item.data.length - 1]?.[0]) .map((item) => item.data?.[item.data.length - 1]?.[0])
.filter((item) => item !== undefined), .filter((item) => item !== undefined),
); );
return {xAxis: {type: 'time', min, max}, series}; return { xAxis: { type: 'time', min, max }, series };
} }
const handleDefault = (config, cusOption) => { const handleDefault = (config, cusOption) => {
const needUnit = _.get(config, 'needUnit', false); const needUnit = _.get(config, 'needUnit', false);
...@@ -480,11 +480,11 @@ const handleDefault = (config, cusOption) => { ...@@ -480,11 +480,11 @@ const handleDefault = (config, cusOption) => {
restOption restOption
} }
} }
const handleYAxis = ({dataSource, needUnit, curveCenter, showGridLine}) => { const handleYAxis = ({ dataSource, needUnit, curveCenter, showGridLine }) => {
// 一种指标一个y轴 // 一种指标一个y轴
const yAxisMap = new Map(); const yAxisMap = new Map();
dataSource.forEach((item, index) => { dataSource.forEach((item, index) => {
const {sensorName, unit} = item; const { sensorName, unit } = item;
const key = sensorName; const key = sensorName;
if (!yAxisMap.has(key)) { if (!yAxisMap.has(key)) {
...@@ -530,12 +530,12 @@ const handleYAxis = ({dataSource, needUnit, curveCenter, showGridLine}) => { ...@@ -530,12 +530,12 @@ const handleYAxis = ({dataSource, needUnit, curveCenter, showGridLine}) => {
const axis = yAxisMap.get(key); const axis = yAxisMap.get(key);
decorateAxisGridLine(axis, showGridLine); decorateAxisGridLine(axis, showGridLine);
}); });
const yAxis = yAxisMap.size > 0 ? [...yAxisMap.values()] : {type: 'value'}; const yAxis = yAxisMap.size > 0 ? [...yAxisMap.values()] : { type: 'value' };
// 根据y轴个数调整边距 // 根据y轴个数调整边距
const leftNum = Math.ceil(yAxisMap.size / 2); const leftNum = Math.ceil(yAxisMap.size / 2);
const rightNum = Math.floor(yAxisMap.size / 2); const rightNum = Math.floor(yAxisMap.size / 2);
return {leftNum, rightNum, yAxis}; return { leftNum, rightNum, yAxis };
} }
const assignOptions = (restOption, xAxis, legendData) => { const assignOptions = (restOption, xAxis, legendData) => {
restOption.dataZoom = [ restOption.dataZoom = [
...@@ -561,7 +561,7 @@ const assignOptions = (restOption, xAxis, legendData) => { ...@@ -561,7 +561,7 @@ const assignOptions = (restOption, xAxis, legendData) => {
]; ];
xAxis.minInterval = 3600 * (1 * 1000); xAxis.minInterval = 3600 * (1 * 1000);
if (legendData) { if (legendData) {
restOption.legend = {...buildDefaultLegend({}), ...{data: legendData}}; restOption.legend = { ...buildDefaultLegend({}), ...{ data: legendData } };
} }
}; };
...@@ -583,10 +583,13 @@ const returnMaxOrMinNumber = (dataSource, type) => { ...@@ -583,10 +583,13 @@ const returnMaxOrMinNumber = (dataSource, type) => {
} }
} }
}); });
let _value = [moment(_obj.pt).valueOf(), _obj.pv]; let _value = [];
let _img = type === 'max' ? maxIcon : minIcon; if (_obj?.pt) {
_value.push(_img); _value = [moment(_obj.pt).valueOf(), _obj.pv];
_value.push(type); let _img = type === 'max' ? maxIcon : minIcon;
_value.push(_img);
_value.push(type);
}
return _value; return _value;
}; };
...@@ -641,7 +644,7 @@ const renderItem = (params, api) => { ...@@ -641,7 +644,7 @@ const renderItem = (params, api) => {
textVerticalAlign: 'middle', textVerticalAlign: 'middle',
fill: _color, fill: _color,
font: 'bolder 16px cursive', font: 'bolder 16px cursive',
lineWidth:10, lineWidth: 10,
y: 2 y: 2
}, },
position: [_valueX, topValue] position: [_valueX, topValue]
...@@ -683,9 +686,9 @@ const optionGenerator = (dataSource, cusOption, contrast, contrastOption, smooth ...@@ -683,9 +686,9 @@ const optionGenerator = (dataSource, cusOption, contrast, contrastOption, smooth
showBoxOption, showBoxOption,
restOption restOption
} = handleDefault(config, cusOption); } = handleDefault(config, cusOption);
const {leftNum, rightNum, yAxis} = handleYAxis({dataSource, needUnit, curveCenter, showGridLine}); const { leftNum, rightNum, yAxis } = handleYAxis({ dataSource, needUnit, curveCenter, showGridLine });
const grid = handleGrid(dataSource, needUnit, leftNum, rightNum, chartType); const grid = handleGrid(dataSource, needUnit, leftNum, rightNum, chartType);
let {xAxis, series} = returnXAxis({ let { xAxis, series } = returnXAxis({
dataSource, dataSource,
contrast, contrast,
contrastOption, contrastOption,
...@@ -708,16 +711,16 @@ const optionGenerator = (dataSource, cusOption, contrast, contrastOption, smooth ...@@ -708,16 +711,16 @@ const optionGenerator = (dataSource, cusOption, contrast, contrastOption, smooth
if (chartType === 'boxChart') { if (chartType === 'boxChart') {
const otherData = const otherData =
dataSource?.[0]?.dataModel.map((item) => { 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]; return [moment(pt).valueOf(), firstPV, lastPV, minPV, maxPV];
}) || []; //当存在othersData的时候,只是单曲线 }) || []; //当存在othersData的时候,只是单曲线
xAxis = {type: 'time'}; xAxis = { type: 'time' };
decorateAxisGridLine(xAxis, showGridLine); decorateAxisGridLine(xAxis, showGridLine);
let unit = []; let unit = [];
series = series.map((item) => { series = series.map((item) => {
if (item.unit) unit.push(item.unit); if (item.unit) unit.push(item.unit);
item.areaStyle = null; item.areaStyle = null;
return {...item, showSymbol: false}; return { ...item, showSymbol: false };
}); });
series.push({ series.push({
type: 'candlestick', type: 'candlestick',
...@@ -743,20 +746,20 @@ const optionGenerator = (dataSource, cusOption, contrast, contrastOption, smooth ...@@ -743,20 +746,20 @@ const optionGenerator = (dataSource, cusOption, contrast, contrastOption, smooth
: `${_currentYear}-01-DD HH:mm:00`; // 用来做同期对比,把日期拉到同一区间 : `${_currentYear}-01-DD HH:mm:00`; // 用来做同期对比,把日期拉到同一区间
let _maxValues = []; let _maxValues = [];
dataSource?.[0]?.dataModel.forEach((item) => { dataSource?.[0]?.dataModel.forEach((item) => {
const {firstPV, lastPV, maxPV, minPV, pt} = item; const { firstPV, lastPV, maxPV, minPV, pt } = item;
_maxValues.push(maxPV); _maxValues.push(maxPV);
let time = contrast ? moment(pt).format(formatStr) : pt; let time = contrast ? moment(pt).format(formatStr) : pt;
_maxData.push([moment(time).valueOf(), (maxPV - minPV).toFixed(2)]); _maxData.push([moment(time).valueOf(), (maxPV - minPV).toFixed(2)]);
_minData.push([moment(time).valueOf(), minPV]); _minData.push([moment(time).valueOf(), minPV]);
}); //当存在othersData的时候,只是单曲线 }); //当存在othersData的时候,只是单曲线
// xAxis = {type: 'category', data: series[0].data.map(item => moment(item[0]).format('YYYY-MM-DD HH:mm:ss'))}; // 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); decorateAxisGridLine(xAxis, showGridLine);
let _unit = ''; let _unit = '';
series = series.map((item) => { series = series.map((item) => {
_unit = item.unit; _unit = item.unit;
item.areaStyle = null; item.areaStyle = null;
return {...item, showSymbol: false}; return { ...item, showSymbol: false };
}); });
[[..._minData], [..._maxData]].forEach((item, index) => { [[..._minData], [..._maxData]].forEach((item, index) => {
series.push({ series.push({
...@@ -786,21 +789,21 @@ const optionGenerator = (dataSource, cusOption, contrast, contrastOption, smooth ...@@ -786,21 +789,21 @@ const optionGenerator = (dataSource, cusOption, contrast, contrastOption, smooth
<div> <div>
<div style="display: flex; align-items: center;"> <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 style="${isMobile() ? 'width: ' + handlePx(90, 'px') + ';overflow:hidden;text-overflow:ellipsis;white-space:nowrap' : ''}">${e[0].seriesName
}</span><span style="display:inline-block;">:</span> }</span><span style="display:inline-block;">:</span>
<span style="color: ${COLOR.NORMAL};margin: 0 ${handlePx(5, 'px')} 0 auto;">${e[0]?.value?.[1] ?? '-' <span style="color: ${COLOR.NORMAL};margin: 0 ${handlePx(5, 'px')} 0 auto;">${e[0]?.value?.[1] ?? '-'
}</span> }</span>
<span style="font-size: ${handlePx(12, 'px')};">${_unit}</span> <span style="font-size: ${handlePx(12, 'px')};">${_unit}</span>
</div> </div>
<div style="display: flex; align-items: center;"> <div style="display: flex; align-items: center;">
<span>周期最小值</span><span style="display:inline-block;">:</span> <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 style="color: ${COLOR.AVG};margin: 0 ${handlePx(5, 'px')} 0 auto;">${e?.[1]?.value?.[1] ?? '-'
}</span> }</span>
<span style="font-size: ${handlePx(12, 'px')};">${_unit}</span> <span style="font-size: ${handlePx(12, 'px')};">${_unit}</span>
</div> </div>
<div style="display: flex; align-items: center;"> <div style="display: flex; align-items: center;">
<span>周期最大值</span><span style="display:inline-block;">:</span> <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 style="color: ${COLOR.AVG};margin: 0 ${handlePx(5, 'px')} 0 auto;">${_maxValues[e?.[2]?.dataIndex] ?? '-'
}</span> }</span>
<span style="font-size: ${handlePx(12, 'px')};">${_unit}</span> <span style="font-size: ${handlePx(12, 'px')};">${_unit}</span>
</div> </div>
</div> </div>
...@@ -809,10 +812,12 @@ const optionGenerator = (dataSource, cusOption, contrast, contrastOption, smooth ...@@ -809,10 +812,12 @@ const optionGenerator = (dataSource, cusOption, contrast, contrastOption, smooth
}; };
} }
// 单曲线需要标记最大值、最小值的情况下,需要增加自定义的series,将最大最小值显示在图表上 // 单曲线需要标记最大值、最小值的情况下,需要增加自定义的series,将最大最小值显示在图表上
let _customSeries = returnCustomSeries(dataSource); if (dataSource?.[0]?.dataModel?.length) {
series.push(_customSeries) let _customSeries = returnCustomSeries(dataSource);
series.push(_customSeries)
}
} else { } else {
tooltip = tooltipAccessor(series.map(item => item.unit), {contrastOption, contrast}); tooltip = tooltipAccessor(series.map(item => item.unit), { contrastOption, contrast });
} }
tooltip.timeFormat = tooltipTimeFormat; tooltip.timeFormat = tooltipTimeFormat;
let _legendData = series.filter(item => !['周期最大值', '周期最小值', '自定义'].includes(item.name)).map(item => item.name); let _legendData = series.filter(item => !['周期最大值', '周期最小值', '自定义'].includes(item.name)).map(item => item.name);
......
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