Skip to content

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

feat: 优化显示

parent 26fbdcef
Show whitespace changes
Inline Side-by-side
Showing with 36 additions and 36 deletions
packages/extend-components/EC_HistoryView/src/demos/index.js
View file @ 6a5da773
......@@ -33,7 +33,7 @@ const Demo = () => {
<HistoryView deviceParams={deviceParams} defaultModel="curve"/>
</div>
<div style={{height: 300}}>
<MobileHistoryChart deviceParams={deviceParams} chartType={'lineChart'}/>
<MobileHistoryChart deviceParams={deviceParams} chartType={'boxChart'}/>
</div>
</div>
......
packages/extend-components/EC_HistoryView/src/mobile.js
View file @ 6a5da773
......@@ -40,14 +40,14 @@ const MobileHistoryChart = (
date = {
dateFrom: moment().format(`${DATE_FORMAT} 00:00:00`),
dateTo: moment().format(`${DATE_FORMAT} 23:59:59`)
},
deviceParams = [],
ignoreOutliers = true,
isDilute = true,
needMarkLine = true,
showBoxOption = true, //
chartGrid = true,
},// 默认当天
deviceParams = [], // 设备参数，必传
chartType='lineChart', // lineChart boxChart
ignoreOutliers = true, // 滤波
isDilute = true, // 抽稀去重
needMarkLine = true,
showBoxOption = true, // 开启箱线图配置，默认开启
chartGrid = true, // 开启网格
}
) => {
const [deviceAlarmSchemes, setDeviceAlarmSchemes] = useState(null);
......@@ -57,7 +57,7 @@ const MobileHistoryChart = (
const isBoxPlots =
deviceParams?.length === 1 && deviceParams[0]?.sensors?.split(',').length === 1;
const handleDataThinKey = (diffDays) => {
// 移动端缩放的抽稀一倍
// 移动端缩放的抽稀一倍，需要实际调试
if (diffDays >= 7 && diffDays < 15) {
return {unit: 'h', zoom: '4'};
} else if (diffDays >= 15 && diffDays < 30) {
......@@ -69,7 +69,7 @@ const MobileHistoryChart = (
} else if (diffDays < 2 && diffDays >= 1) {
return {unit: 'min', zoom: '60'};
} else {
return {unit: 'min', zoom: '20'};
return {unit: 'min', zoom: '60'};
}
};
......
packages/extend-components/EC_HistoryView/src/utils.js
View file @ 6a5da773
......@@ -13,7 +13,7 @@ const COLOR = {
LOWLOWER: '#FF0000',
AVG: '#00B8B1',
};
const isMobile =() => {
const isMobile = () => {
const userAgent = navigator.userAgent.toLowerCase();
if (
/ipad|iphone|midp|rv:1.2.3.4|ucweb|android|windows ce|windows mobile/.test(
......@@ -33,7 +33,7 @@ const isMobile =() => {
* @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, '');
......@@ -70,7 +70,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;
};
......@@ -81,7 +81,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) => {
......@@ -112,7 +112,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 &&
......@@ -121,7 +121,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'));
......@@ -152,8 +152,8 @@ export const minMaxMarkPoint = (dataItem, index, dataSource) => {
// 只有一个数据曲线时显示markline
if (!dataItem || dataSource.length !== 1) return {};
const data = [];
data.push({ type: 'min', name: '最小: ' });
data.push({ type: 'max', name: '最大: ' });
data.push({type: 'min', name: '最小: '});
data.push({type: 'max', name: '最大: '});
return {
symbolSize: 1,
symbolOffset: [0, '50%'],
......@@ -223,7 +223,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;
......@@ -279,7 +279,7 @@ const optionGenerator = (dataSource, cusOption, contrast, contrastOption, smooth
// 一种指标一个y轴
const yAxisMap = new Map();
dataSource.forEach((item, index) => {
const { sensorName, unit } = item;
const {sensorName, unit} = item;
const key = sensorName;
if (!yAxisMap.has(key)) {
......@@ -325,7 +325,7 @@ const optionGenerator = (dataSource, cusOption, contrast, contrastOption, smooth
const axis = yAxisMap.get(key);
decorateAxisGridLine(axis, showGridLine);
});
const yAxis = yAxisMap.size > 0 ? [...yAxisMap.values()] : { type: 'value' };
const yAxis = yAxisMap.size > 0 ? [...yAxisMap.values()] : {type: 'value'};
// 根据y轴个数调整边距
const leftNum = Math.ceil(yAxisMap.size / 2);
......@@ -338,7 +338,7 @@ const optionGenerator = (dataSource, cusOption, contrast, contrastOption, smooth
};
const headTemplate = (param) => {
if (!param) return '';
const { name, axisValueLabel, axisType, axisValue } = param;
const {name, axisValueLabel, axisType, axisValue} = param;
const timeFormat = 'YYYY-MM-DD HH:mm:ss';
const text =
axisType === 'xAxis.time' ? moment(axisValue).format(timeFormat) : name || axisValueLabel;
......@@ -346,19 +346,19 @@ const optionGenerator = (dataSource, cusOption, contrast, contrastOption, smooth
};
const seriesTemplate = (param, unit) => {
if (!param) return '';
const { value, encode } = param;
const {value, encode} = param;
// const val = value[encode.y[0]];
const _unit = unit || 'Mpa';
const color = '#008CFF';
if (!isArray(value))
return ` <div style="display: flex; align-items: center;">
<span>${param.seriesName}</span><span style="display:inline-block;">：</span>
<span>${isMobile() ? '实际值' : param.seriesName}</span><span style="display:inline-block;">：</span>
<span style="color:${color};margin: 0 5px 0 auto;">${value?.toFixed(3) ?? '-'}</span>
<span style="font-size: 12px;">${_unit}</span>
</div>`;
return param.componentSubType !== 'candlestick'
? `<div style="display: flex; align-items: center;">
<span>${param.seriesName}</span><span style="display:inline-block;">：</span>
<span>${isMobile() ? '实际值' : param.seriesName}</span><span style="display:inline-block;">：</span>
<span style="color: ${COLOR.AVG};margin: 0 5px 0 auto;">${value[1] ?? '-'}</span>
<span style="font-size: 12px;">${_unit}</span>
</div>`
......@@ -413,7 +413,7 @@ const optionGenerator = (dataSource, cusOption, contrast, contrastOption, smooth
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 = [];
let series = dataSource
......@@ -424,7 +424,7 @@ const optionGenerator = (dataSource, cusOption, contrast, contrastOption, smooth
return 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';
......@@ -438,9 +438,9 @@ const optionGenerator = (dataSource, cusOption, contrast, contrastOption, smooth
// 需求变更：设备离线改用“是否在线”的数据，离线的状态标记的数据用该部分的数据。 2023年4月25日09:36:55
let _offlineAreasData = _offlineData
.map((item) => {
let _item = { ...item };
let _item = {...item};
_item.dataModel = item.dataModel.map((d) => {
let _d = { ...d };
let _d = {...d};
_d.pv = 0;
return _d;
});
......@@ -475,7 +475,7 @@ const optionGenerator = (dataSource, cusOption, contrast, contrastOption, smooth
.map((item) => item.data?.[item.data.length - 1]?.[0])
.filter((item) => item !== undefined),
);
let xAxis = { type: 'time', min, max };
let xAxis = {type: 'time', min, max};
decorateAxisGridLine(xAxis, showGridLine);
const tooltipTimeFormat = !contrast
? 'YYYY-MM-DD HH:mm:ss'
......@@ -494,16 +494,16 @@ const optionGenerator = (dataSource, cusOption, contrast, contrastOption, smooth
if (chartType === 'boxChart') {
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: '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) => {
if (item.unit) unit = item.unit;
let _item = { ...item, symbol: 'none' };
let _item = {...item, symbol: 'none'};
/* _item.data = _item?.data?.map(d => {
return d[1] || null
}) || [];*/
......@@ -532,14 +532,14 @@ const optionGenerator = (dataSource, cusOption, contrast, contrastOption, smooth
: `${_currentYear}-01-DD HH:mm:00`; // 用来做同期对比，把日期拉到同一区间
let _maxValues = [];
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([moment(time).valueOf(), (maxPV - minPV).toFixed(2)]);
_minData.push([moment(time).valueOf(), minPV]);
}); //当存在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) => {
......@@ -573,7 +573,7 @@ const optionGenerator = (dataSource, cusOption, contrast, contrastOption, smooth
<div>
<div style="display: flex; align-items: center;">
<span>${
isMobile()?'当前值':e[0].seriesName
isMobile() ? '当前值' : e[0].seriesName
}</span><span style="display:inline-block;">：</span>
<span style="color: ${COLOR.NORMAL};margin: 0 5px 0 auto;">${
e[0]?.value?.[1] ?? '-'
......
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