Skip to content

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

feat: 升级历史曲线

parent 82a9265e
Hide whitespace changes
Inline Side-by-side
Showing with 1070 additions and 958 deletions
packages/base-components/BasicChart/src/demos/Basic.tsx
View file @ 8a303da5
......@@ -16,7 +16,7 @@ const Demo = () => {
},
},
grid: {
right: '20%',
right: '10%',
},
toolbox: {
feature: {
......
packages/base-components/BasicChart/src/utils/legend.js
View file @ 8a303da5
......@@ -18,7 +18,7 @@ export const buildDefaultLegend = (option) => {
textStyle: {
padding: [0, 0, 0, 4],
color: '#2d2d2d',
width: 80,
width: 120,
overflow:'truncate'
},
tooltip:{
......
packages/extend-components/EC_HistoryView/src/EC_HistoryView.md
View file @ 8a303da5
......@@ -30,7 +30,7 @@ path: /
## 多图表
<code src="./demos/GridDemo.js"></code>
<!-- <code src="./demos/GridDemo.js"></code> -->
## API
......
packages/extend-components/EC_HistoryView/src/SingleChart.js
View file @ 8a303da5
......@@ -29,7 +29,6 @@ const SingleChart = memo((props) => {
showMarkLine: true,
showPoint: true,
chartType,
// justLine,
showBoxOption,
special
};
......
packages/extend-components/EC_HistoryView/src/demos/index.js
View file @ 8a303da5
......@@ -4,26 +4,32 @@ import { MobileHistoryChart } from "../mobile";
const deviceParams = [
/*10.182*/
/* {
deviceCode: 'EGBF00000141',
// sensors: '进水压力,出水瞬时流量,出水累计流量',
sensors: '进水压力',
deviceType: '熊猫二供泵房',
pointAddressID: 208,
},*/
/* {
"deviceCode": "SYJ00000008",
"sensors": "瞬时流量",
"deviceType": "水源井"
},*/
{
deviceCode: 'EGJZ00000197',
sensors: '进水压力,出水压力,出水瞬时流量,出水累计流量',
// sensors: '1#变频器运行频率',
deviceType: '二供机组',
// pointAddressID: 208,
}
/* {
deviceCode: 'EGBF00000141',
// sensors: '进水压力,出水瞬时流量,出水累计流量',
sensors: '进水压力',
deviceType: '熊猫二供泵房',
pointAddressID: 208,
}, */
/* {
"deviceCode": "SYJ00000008",
"sensors": "瞬时流量",
"deviceType": "水源井"
},
{
deviceCode: 'EGJZ00000197',
sensors: '进水压力,出水压力,出水瞬时流量,出水累计流量',
// sensors: '1#变频器运行频率',
deviceType: '二供机组',
// pointAddressID: 208,
}, */
/* {
deviceCode: 'EGJZ00000198',
sensors: '进水压力,出水压力,出水瞬时流量,出水累计流量',
// sensors: '1#变频器运行频率',
deviceType: '二供机组',
// pointAddressID: 208,
}, */
/* {
// deviceCode: 'EGBF00000002',
// deviceCode: 'EGBF00000018',
......@@ -35,12 +41,12 @@ const deviceParams = [
deviceType: '熊猫压力表',
pointAddressID: 4,
},*/
/* {
deviceCode: 'EGJZ00000226',
sensors: '出水压力',
deviceType: '二供机组',
pointAddressID: 4,
},*/
{
deviceCode: 'EGJZ00000226',
sensors: '出水压力',
deviceType: '二供机组',
pointAddressID: 4,
},
/* {
"deviceCode": "LLJ00000055",
"sensors": "正累计流量,瞬时流量",
......@@ -52,51 +58,51 @@ const deviceParams = [
"deviceType": "二供机组"
}*/
// 邳州张楼水厂
/* {
{
"deviceCode": "SC00000023",
"sensors": "瞬时流量",
"deviceType": "水厂"
} */
/* {
"deviceCode": "JFJ00000001",
"sensors": "沉淀池投矾量瞬时,",
"deviceType": "加矾间"
}*/
/* {
"deviceCode": "QSBF00000001",
"sensors": "取水浊度",
"deviceType": "取水泵房"
}*/
/* {
"deviceCode": "SC00000023",
"sensors": "出水瞬时流量",
"deviceType": "水厂"
}*/
// {
// "deviceCode": "XNCDC00000001",
// "sensors": "沉淀池1号进水管流量",
// "deviceType": "絮凝沉淀池"
// }
/* {
},
{
"deviceCode": "JFJ00000001",
"sensors": "沉淀池投矾量瞬时,",
"deviceType": "加矾间"
},
{
"deviceCode": "QSBF00000001",
"sensors": "取水浊度",
"deviceType": "取水泵房"
},
{
"deviceCode": "SC00000023",
"sensors": "出水瞬时流量",
"deviceType": "水厂"
},
{
"deviceCode": "XNCDC00000001",
"sensors": "沉淀池1号进水管流量",
"deviceType": "絮凝沉淀池"
},
{
"deviceCode": "LLJ00000001",
"sensors": "瞬时流量",
"deviceType": "流量计"
}*/
},
/*邳州*/
/* {
{
deviceCode: 'EGJZ00000027',
sensors: '2#变频器运行频率',
deviceType: '二供机组',
}*/
},
/*确山*/
/*泵3状态*/
/* {
// EGJZ00000003
deviceCode: 'EGJZ00000003',
// sensors: '3#频率',
sensors: '出1累计流量',
deviceType: '二供机组',
}*/
/* {
// EGJZ00000003
deviceCode: 'EGJZ00000003',
// sensors: '3#频率',
sensors: '出1累计流量',
deviceType: '二供机组',
} */
];
const Demo = () => {
return (
......
packages/extend-components/EC_HistoryView/src/index.js
View file @ 8a303da5
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 classNames from 'classnames';
import {
......@@ -34,10 +34,10 @@ import {
import SingleChart from './SingleChart';
import GridChart from './GridChart';
import './index.less';
import {globalConfig} from 'antd/lib/config-provider';
import { globalConfig } from 'antd/lib/config-provider';
const {RangePicker} = DatePicker;
const {Option} = Select;
const { RangePicker } = DatePicker;
const { Option } = Select;
const startFormat = 'YYYY-MM-DD 00:00:00';
const endFormat = 'YYYY-MM-DD 23:59:59';
......@@ -263,7 +263,7 @@ const OriginMaxDays = 31; // 原始曲线请求数据的最大天数
const CharacteristicMaxDays = null; // 特征曲线或者其他曲线的最大天数
const HistoryView = (props) => {
const [completeInit, setCompleteInit] = useState(false);
const {getPrefixCls} = useContext(ConfigProvider.ConfigContext);
const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);
const prefixCls = getPrefixCls('history-view');
const {
title,
......@@ -311,6 +311,14 @@ const HistoryView = (props) => {
const [percent, setPercent] = useState(0);
// 频率指标特殊业务
const [special1, setSpecial1] = useState(null);
// 历史数据相关的特征描述
const deviceConfig = useRef({
oneDevice: deviceParams.length === 1,//单设备
oneSensor: [...new Set(deviceParams.reduce((final, cur) => {
let _sensors = cur.sensors.split(',');
return final.concat(_sensors);
}, []))].length === 1, // 单指标
});
// 选择的时间范围值
const dateRange = useMemo(() => {
if (timeValue === 'customer') {
......@@ -444,13 +452,13 @@ const HistoryView = (props) => {
onContrastChange(contrastOption);
setShowBoxOption(false);
setChartType('lineChart');
onCheckboxChange({target: {value: false}}, 'chartType');
onCheckboxChange({target: {value: false}}, 'ignoreOutliers');
onCheckboxChange({ target: { value: false } }, 'chartType');
onCheckboxChange({ target: { value: false } }, 'ignoreOutliers');
} else {
// 自定义
// 不需要处理
setShowBoxOption(true);
onCheckboxChange({target: {value: true}}, 'chartType');
onCheckboxChange({ target: { value: true } }, 'chartType');
}
};
const onShortcutsChange = (e) => {
......@@ -460,37 +468,37 @@ const HistoryView = (props) => {
switch (_val) {
case '近3天':
_arr = [
{key: 1, value: moment()},
{key: 2, value: moment().subtract(1, 'days')},
{key: 3, value: moment().subtract(2, 'days')},
{ key: 1, value: moment() },
{ key: 2, value: moment().subtract(1, 'days') },
{ key: 3, value: moment().subtract(2, 'days') },
]
break;
case '近7天':
_arr = [
{key: 1, value: moment()},
{key: 2, value: moment().subtract(1, 'days')},
{key: 3, value: moment().subtract(2, 'days')},
{key: 4, value: moment().subtract(3, 'days')},
{key: 5, value: moment().subtract(4, 'days')},
{key: 6, value: moment().subtract(5, 'days')},
{key: 7, value: moment().subtract(6, 'days')},
{ key: 1, value: moment() },
{ key: 2, value: moment().subtract(1, 'days') },
{ key: 3, value: moment().subtract(2, 'days') },
{ key: 4, value: moment().subtract(3, 'days') },
{ key: 5, value: moment().subtract(4, 'days') },
{ key: 6, value: moment().subtract(5, 'days') },
{ key: 7, value: moment().subtract(6, 'days') },
]
break;
case '近3月':
_arr = [
{key: 1, value: moment()},
{key: 2, value: moment().subtract(1, 'months')},
{key: 3, value: moment().subtract(2, 'months')},
{ key: 1, value: moment() },
{ key: 2, value: moment().subtract(1, 'months') },
{ key: 3, value: moment().subtract(2, 'months') },
]
break;
case '近6月':
_arr = [
{key: 1, value: moment()},
{key: 2, value: moment().subtract(1, 'months')},
{key: 3, value: moment().subtract(2, 'months')},
{key: 4, value: moment().subtract(3, 'months')},
{key: 5, value: moment().subtract(4, 'months')},
{key: 6, value: moment().subtract(5, 'months')},
{ key: 1, value: moment() },
{ key: 2, value: moment().subtract(1, 'months') },
{ key: 3, value: moment().subtract(2, 'months') },
{ key: 4, value: moment().subtract(3, 'months') },
{ key: 5, value: moment().subtract(4, 'months') },
{ key: 6, value: moment().subtract(5, 'months') },
]
break;
}
......@@ -553,7 +561,7 @@ const HistoryView = (props) => {
)}
{timeValue === 'contrast' && ( // 同期对比
<>
<Select value={contrastOption} style={{width: 60}} onChange={onContrastChange}>
<Select value={contrastOption} style={{ width: 60 }} onChange={onContrastChange}>
<Option value="day">日</Option>
<Option value="month" disabled={lineDataType === '原始曲线'}>月</Option>
</Select>
......@@ -578,14 +586,14 @@ const HistoryView = (props) => {
picker={contrastOption === 'day' ? undefined : contrastOption}
value={child.value}
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 && (
<div
className={classNames(`${prefixCls}-contrast-delete`)}
onClick={() => handleDeleteDatePicker(index)}
>
<CloseCircleFilled/>
<CloseCircleFilled />
</div>
)}
</div>
......@@ -594,7 +602,7 @@ const HistoryView = (props) => {
)}
</div>
))}
{datePickerArr.length < 4 && <PlusCircleOutlined onClick={handleAddDatePicker}/>}
{datePickerArr.length < 4 && <PlusCircleOutlined onClick={handleAddDatePicker} />}
</>
)}
</div>
......@@ -664,13 +672,13 @@ const HistoryView = (props) => {
</Checkbox>
{child.tooltip && (
<Tooltip title={child.tooltip}>
<QuestionCircleFilled className={`${prefixCls}-question`}/>
<QuestionCircleFilled className={`${prefixCls}-question`} />
</Tooltip>
)}
{
child.hasSub && child.checked && false ?
<Select style={{width: 80, marginLeft: 10}} value={algorithmValue}
onChange={(e) => setAlgorithmValue(e)}>
<Select style={{ width: 80, marginLeft: 10 }} value={algorithmValue}
onChange={(e) => setAlgorithmValue(e)}>
<Option value={1}>低</Option>
<Option value={5}>中</Option>
<Option value={10}>高</Option>
......@@ -685,7 +693,7 @@ const HistoryView = (props) => {
return (
<div
className={classNames(`${prefixCls}-cover`)}
style={isChart && isSingle ? {width: '100%'} : {}}
style={isChart && isSingle ? { width: '100%' } : {}}
>
{
isChart ? <>
......@@ -700,7 +708,7 @@ const HistoryView = (props) => {
</Radio.Group>
{/*<Segmented value={lineDataType} options={['特征曲线', '原始曲线']} onChange={switchLineDataType}/>*/}
<Tooltip title={'原始曲线数据量较大，单次查询最多展示1万条数据'}>
<QuestionCircleFilled style={{marginLeft: 6}} className={`${prefixCls}-question`}/>
<QuestionCircleFilled style={{ marginLeft: 6 }} className={`${prefixCls}-question`} />
</Tooltip>
</div>
</> : ''
......@@ -709,14 +717,14 @@ const HistoryView = (props) => {
<>
{
lineDataType !== '原始曲线' ? <>
<div style={{marginLeft: 7}} className={classNames(`${prefixCls}-label`)}>曲线形态</div>
<div style={{ marginLeft: 7 }} className={classNames(`${prefixCls}-label`)}>曲线形态</div>
<Radio.Group
value={chartType}
style={{marginRight: 16}}
style={{ marginRight: 16 }}
onChange={(e) => {
let _value = e.target.value;
setChartType(_value);
onCheckboxChange({target: {value: _value !== 'boxChart'}}, 'chartType');
onCheckboxChange({ target: { value: _value !== 'boxChart' } }, 'chartType');
}}
>
<Radio.Button value={'lineChart'}>线形图</Radio.Button>
......@@ -743,7 +751,7 @@ const HistoryView = (props) => {
{activeTabKey === 'table' && (
<Select
value={dataThinKey}
style={{width: 90}}
style={{ width: 90 }}
onChange={onTimeIntervalChange}
disabled={!dataConfig.dataThin}
>
......@@ -792,7 +800,7 @@ const HistoryView = (props) => {
// data = data.filter(item => item.sensorName !== '是否在线');
const ignoreOutliers = checkboxData.find((item) => item.key === 'ignoreOutliers').checked;
const dataIndexAccess = (dataItem, index) => {
const {stationCode, sensorName} = dataItem;
const { stationCode, sensorName } = dataItem;
return `${stationCode}-${sensorName}-${index}`;
};
......@@ -800,17 +808,24 @@ const HistoryView = (props) => {
if (timeValue === 'contrast') {
format = contrastOption === 'day' ? '2020-01-01 HH:mm:00' : '2020-01-DD HH:mm:00';
}
// 判断是否是单设备，单设备则不显示设备名称
// 处理表头数据
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);
let _title = '';
if (deviceConfig.current.oneDevice) {
_title = `${sensorName}${unit ? `(${unit})` : ''}`;
} else {
_title = `${equipmentName}-${sensorName}${unit ? `(${unit})` : ''}`
}
let col = {
title: `${equipmentName}-${sensorName}${unit ? `(${unit})` : ''}`,
title: _title,
dataIndex: dataIndex,
key: dataIndex,
ellipsis: true,
align: 'center',
width:200
};
// 同期对比
if (timeValue === 'contrast' && dataModel[0]) {
......@@ -825,7 +840,7 @@ const HistoryView = (props) => {
// 格式化时间对齐数据, 生成行数
const timeData = {};
const buildDefaultData = (time) => {
const obj = {key: time, time: time};
const obj = { key: time, time: time };
data.forEach((item, index) => {
const dataIndex = dataIndexAccess(item, index);
obj[dataIndex] = '';
......@@ -833,32 +848,32 @@ const HistoryView = (props) => {
return obj;
};
data.forEach((item, index) => {
const {stationCode, sensorName, dataModel} = item;
const { stationCode, sensorName, dataModel } = item;
dataModel &&
dataModel.forEach((data) => {
const formatTime = moment(data.pt).format(format);
dataModel.forEach((data) => {
const formatTime = moment(data.pt).format(format);
let time = formatTime;
if (timeValue === 'contrast') {
time = time.slice(contrastOption === 'day' ? 11 : 8, 16);
}
let time = formatTime;
if (timeValue === 'contrast') {
time = time.slice(contrastOption === 'day' ? 11 : 8, 16);
}
timeData[formatTime] = timeData[formatTime] || buildDefaultData(time);
});
timeData[formatTime] = timeData[formatTime] || buildDefaultData(time);
});
});
// 处理表格数据
data.forEach((child, index) => {
const {dataModel} = child;
const { dataModel } = child;
const dataIndex = dataIndexAccess(child, index);
dataModel &&
dataModel.forEach((value, j) => {
const formatTime = moment(value.pt).format(format);
const dataRow = timeData[formatTime];
if (dataRow) {
dataRow[dataIndex] = value.pv === null || value.pv === undefined ? '' : value.pv;
}
});
dataModel.forEach((value, j) => {
const formatTime = moment(value.pt).format(format);
const dataRow = timeData[formatTime];
if (dataRow) {
dataRow[dataIndex] = value.pv === null || value.pv === undefined ? '' : value.pv;
}
});
});
const timeSort = (a, b) => {
let aa = a,
......@@ -898,40 +913,40 @@ const HistoryView = (props) => {
};
const handleDataThinKey = (diffYears, diffDays, diffHours, lineDataType) => {
if (lineDataType === '原始曲线') {
return {unit: '', zoom: ''}
return { unit: '', zoom: '' }
}
// edit by zy 根据选择的时长控制抽稀频度
if (diffYears > 0) {
if (diffYears === 1) return {unit: 'h', zoom: '24'}
return {unit: 'h', zoom: '48'}
if (diffYears === 1) return { unit: 'h', zoom: '24' }
return { unit: 'h', zoom: '48' }
} else if (diffYears === 0 && diffDays > 0) {
if (diffDays > 90) return {unit: 'h', zoom: '24'}
if (diffDays > 30) return {unit: 'h', zoom: '6'}
if (diffDays > 15) return {unit: 'h', zoom: '4'}
if (diffDays > 7) return {unit: 'h', zoom: '1'}
if (diffDays > 3) return {unit: 'min', zoom: '30'}
if (diffDays > 1) return {unit: 'min', zoom: '15'}
if (diffDays === 1) return {unit: 'min', zoom: '5'}
if (diffDays > 90) return { unit: 'h', zoom: '24' }
if (diffDays > 30) return { unit: 'h', zoom: '6' }
if (diffDays > 15) return { unit: 'h', zoom: '4' }
if (diffDays > 7) return { unit: 'h', zoom: '1' }
if (diffDays > 3) return { unit: 'min', zoom: '30' }
if (diffDays > 1) return { unit: 'min', zoom: '15' }
if (diffDays === 1) return { unit: 'min', zoom: '5' }
} else if (diffYears === 0 && diffDays === 0 && diffHours > 0) {
if (diffHours > 12) return {unit: 'min', zoom: '5'}
if (diffHours > 4) return {unit: 'min', zoom: '1'}
if (diffHours > 1) return {unit: 's', zoom: '30'}
if (diffHours > 0) return {unit: 's', zoom: '5'}
return {unit: 's', zoom: '5'}
if (diffHours > 12) return { unit: 'min', zoom: '5' }
if (diffHours > 4) return { unit: 'min', zoom: '1' }
if (diffHours > 1) return { unit: 's', zoom: '30' }
if (diffHours > 0) return { unit: 's', zoom: '5' }
return { unit: 's', zoom: '5' }
} else {
return {unit: '', zoom: ''}
return { unit: '', zoom: '' }
}
};
// 处理接口服务参数的变化
const onChangeParams = (value = {}) => {
const {dateRange, isDilute, ignoreOutliers, zoom, unit} = value;
const { dateRange, isDilute, ignoreOutliers, zoom, unit } = value;
const requestArr = [];
const acrossTables = [];
const zoomArray = [];
deviceParams
.map((item) => {
let _item = {...item};
let _item = { ...item };
// 历史曲线中，是否在线暂时去除，不显示 要显示是否在线解开这里即可 2023-09-15
/* _item.sensors =
item.sensors && !item.sensors.includes('是否在线')
......@@ -971,7 +986,7 @@ const HistoryView = (props) => {
let diffHours = moment(item.dateTo).diff(moment(item.dateFrom), 'hours');
let zoomParam = activeTabKey === 'curve' ? handleDataThinKey(diffYears, diffDays, diffHours, lineDataType) : {};
zoomArray.push(zoomParam);
requestArr.push(getHistoryInfo({...param, ...zoomParam}));
requestArr.push(getHistoryInfo({ ...param, ...zoomParam }));
});
setLoading(true);
Promise.all(requestArr).then((results) => {
......@@ -979,7 +994,7 @@ const HistoryView = (props) => {
if (results.length) {
let data = [];
results.forEach((res, index) => {
const {dateFrom, dateTo} = dateRange?.[index] ?? {};
const { dateFrom, dateTo } = dateRange?.[index] ?? {};
if (res.code === 0 && res.data.length) {
res.data.forEach((d) => {
d.dateFrom = dateFrom || '';
......@@ -1022,7 +1037,7 @@ const HistoryView = (props) => {
useEffect(() => {
if (!completeInit) return;
const {dataThin, ignoreOutliers, zoom, unit} = dataConfig;
const { dataThin, ignoreOutliers, zoom, unit } = dataConfig;
beforChangeParams().finally(() => {
onChangeParams({
isDilute: dataThin,
......@@ -1067,9 +1082,10 @@ const HistoryView = (props) => {
{...tableProps}
pagination={false}
onChange={handleChange}
scroll={{x:'max-content',y:'calc(100% - 40px)'}}
/>
) : (
<PandaEmpty/>
<PandaEmpty />
)}
</div>
</>
......@@ -1107,11 +1123,11 @@ const HistoryView = (props) => {
</div>
{
lineDataType === '原始曲线' && false ?
<div style={{marginTop: 10}}>展示区间：{returnLongestPeriod(chartDataSource)}</div> : ''
<div style={{ marginTop: 10 }}>展示区间：{returnLongestPeriod(chartDataSource)}</div> : ''
}
<div className={`${prefixCls}-content`}>
{!chartDataSource.length ? (
<PandaEmpty/>
<PandaEmpty />
) : grid === true ? (
<GridChart
curveCenter={curveCenter}
......@@ -1129,7 +1145,6 @@ const HistoryView = (props) => {
showGridLine={chartGrid}
prefixCls={prefixCls}
dataSource={chartDataSource}
// justLine={!!checkboxData.find(item => item.key === 'justLine' && item.checked)}
chartType={isBoxPlots ? chartType : null}
contrast={timeValue === 'contrast'}
contrastOption={contrastOption}
......@@ -1152,7 +1167,7 @@ const HistoryView = (props) => {
// 非单曲线、单指标不执行
if (deviceParams?.length !== 1 || (deviceParams?.length === 1 && deviceParams?.[0]?.sensors?.split(',')?.length > 1)) return setCompleteInit(true);
setLoading(true);
const {deviceCode, deviceType, sensors} = deviceParams[0];
const { deviceCode, deviceType, sensors } = deviceParams[0];
let _id = (await getPointAddress({
code: deviceCode
}))?.data?.[0]?.id;
......@@ -1176,7 +1191,7 @@ const HistoryView = (props) => {
return final
}, {});
let _checkboxData = [...checkboxData].map(item => {
let _item = {...item};
let _item = { ...item };
if (_opt[item.label] !== undefined) {
_item.checked = _opt[item.label] === 'true'
}
......@@ -1190,7 +1205,7 @@ const HistoryView = (props) => {
let _statusName = _sensorConfig?.statusName;
if (_statusName) {
let _statusConfig = _res1.data.find(item => item?.name.trim() === _statusName.trim());
let _valDesc = _statusConfig?.valDesc||'';
let _valDesc = _statusConfig?.valDesc || '';
setSpecial1({
name: _statusName,
valDesc: _valDesc.split(';').reduce((final, cur) => {
......@@ -1230,18 +1245,18 @@ const HistoryView = (props) => {
}, [loading])
return (
<div className={classNames(prefixCls, 'wkt-scroll-light')}>
<div className={classNames(`${prefixCls}-spin`)} style={{position: "relative"}}>
<div className={classNames(`${prefixCls}-spin`)} style={{ position: "relative" }}>
{
(loading || percent !== 0) ? <div className={classNames(`${prefixCls}-progressWrapper`)}>
<div className={classNames(`${prefixCls}-contentWrapper`)}>
{
lineDataType === '原始曲线' || lineDataType === '特征曲线' && moment(dateRange?.[0]?.dateTo).diff(moment(dateRange?.[0]?.dateFrom), 'days') >= 30 ? <>
<Progress percent={percent}
steps={20}
className={classNames(`${prefixCls}-progress`, `${prefixCls}-blink-2`)}
showInfo={false}/>
steps={20}
className={classNames(`${prefixCls}-progress`, `${prefixCls}-blink-2`)}
showInfo={false} />
<div className={classNames(`${prefixCls}-tip`)}>加载中...</div>
</> : <Spin spinning={loading || false}/>
</> : <Spin spinning={loading || false} />
}
</div>
......@@ -1261,7 +1276,7 @@ const HistoryView = (props) => {
<div className={`${prefixCls}-extra-right`}>
{activeTabKey === 'table' && (
<Button type="link" onClick={exportExcelBtn}>
<DownloadOutlined/>
<DownloadOutlined />
下载
</Button>
)}
......
packages/extend-components/EC_HistoryView/src/utils.js
View file @ 8a303da5
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';
import lineChart from "@wisdom-components/basicchart/es/LineChart";
import lineChart from '@wisdom-components/basicchart/es/LineChart';
import { offset } from 'highcharts';
/** 轴宽度, 用于计算多轴显示时, 轴线偏移和绘图区域尺寸 */
const AXIS_WIDTH = 40;
const COLOR = {
NORMAL: '#1685FF',
UPER: '#fa8c16',
UPUPER: '#FF0000',
// LOWER: '#13c2c2',
// LOWLOWER: '#2f54eb',
LOWER: '#fa8c16',
LOWLOWER: '#FF0000',
AVG: '#00B8B1',
NORMAL: '#1685FF',
UPER: '#fa8c16',
UPUPER: '#FF0000',
// LOWER: '#13c2c2',
// LOWLOWER: '#2f54eb',
LOWER: '#fa8c16',
LOWLOWER: '#FF0000',
AVG: '#00B8B1',
};
const isMobile = () => {
const userAgent = navigator.userAgent.toLowerCase();
if (
/ipad|iphone|midp|rv:1.2.3.4|ucweb|android|windows ce|windows mobile/.test(
userAgent
)
) {
return true;
}
return false;
const userAgent = navigator.userAgent.toLowerCase();
if (/ipad|iphone|midp|rv:1.2.3.4|ucweb|android|windows ce|windows mobile/.test(userAgent)) {
return true;
}
return false;
};
const returnRem = (num, base = 375) => num * (base / 375);
export const handlePx = (num, unit = '') => {
const _isMobile = isMobile();
const _base = document.body.clientWidth;
let _num = _isMobile ? `${returnRem(num, _base)}` : `${num}`;
return unit ? `${_num}${unit}` : Number(_num);
const _isMobile = isMobile();
const _base = document.body.clientWidth;
let _num = _isMobile ? `${returnRem(num, _base)}` : `${num}`;
return unit ? `${_num}${unit}` : Number(_num);
};
const PC_OPTION = {
markPoint: {
padding: [2, 12],
lineHeight: 22,
backgroundColor:
window.globalConfig &&
window.globalConfig &&
window.globalConfig.variableTheme?.primaryColor
? window.globalConfig.variableTheme.primaryColor
: '#0087F7',
borderWidth: 1
},
fontSize: 16,
fontColor: "#ffffff",
dataZoomHeight: 28
}
markPoint: {
padding: [2, 12],
lineHeight: 22,
backgroundColor:
window.globalConfig && window.globalConfig && window.globalConfig.variableTheme?.primaryColor
? window.globalConfig.variableTheme.primaryColor
: '#0087F7',
borderWidth: 1,
},
fontSize: 16,
fontColor: '#ffffff',
dataZoomHeight: 28,
};
const MOBILE_OPTION = {
markPoint: {
padding: [2, 6],
lineHeight: 18,
backgroundColor: 'rgba(255,255,255,0.6)',
borderWidth: 0
},
fontSize: handlePx(12),
fontColor: "#0087F7",
dataZoomHeight: 20
}
markPoint: {
padding: [2, 6],
lineHeight: 18,
backgroundColor: 'rgba(255,255,255,0.6)',
borderWidth: 0,
},
fontSize: handlePx(12),
fontColor: '#0087F7',
dataZoomHeight: 20,
};
const currentOption = isMobile() ? MOBILE_OPTION : PC_OPTION;
/**
* 图表系列名称格式化
......@@ -73,13 +68,13 @@ const currentOption = isMobile() ? MOBILE_OPTION : PC_OPTION;
* @returns
*/
const nameFormatter = (data, contrast, contrastOption, nameWithSensor) => {
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, '');
name = `${name}-${time}`;
}
return name;
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, '');
name = `${name}-${time}`;
}
return name;
};
/**
......@@ -91,14 +86,14 @@ const nameFormatter = (data, contrast, contrastOption, nameWithSensor) => {
* @returns 图表系列数据, [[DateTime, value]]
*/
const dataAccessor = (data, contrast, contrastOption) => {
const dataModel = data?.dataModel ?? [];
const formatStr = contrastOption === 'day' ? '2020-01-01 HH:mm:ss' : '2020-01-DD HH:mm:ss';
return dataModel
.filter((item) => item.sensorName !== '是否在线')
.map((item) => {
const time = contrast ? moment(item.pt).format(formatStr) : item.pt;
return [moment(time).valueOf(), item.pv];
});
const dataModel = data?.dataModel ?? [];
const formatStr = contrastOption === 'day' ? '2020-01-01 HH:mm:ss' : '2020-01-DD HH:mm:ss';
return dataModel
.filter((item) => item.sensorName !== '是否在线')
.map((item) => {
const time = contrast ? moment(item.pt).format(formatStr) : item.pt;
return [moment(time).valueOf(), item.pv];
});
};
/**
......@@ -108,8 +103,8 @@ const dataAccessor = (data, contrast, contrastOption) => {
* @returns Null/areaStyle, 为null显示曲线图, 为areaStyle对象显示为面积图.
*/
const areaStyleFormatter = (data) => {
const {sensorName} = data;
return sensorName && sensorName.indexOf('流量') > -1 ? {} : null;
const { sensorName } = data;
return sensorName && sensorName.indexOf('流量') > -1 ? {} : null;
};
/**
......@@ -119,100 +114,100 @@ const areaStyleFormatter = (data) => {
* @returns
*/
const minMax = (data) => {
const {dataModel} = data;
let min = Number.MAX_SAFE_INTEGER;
let max = Number.MIN_SAFE_INTEGER;
dataModel.forEach((item) => {
min = Math.min(min, item.pv ?? 0);
max = Math.max(max, item.pv ?? 0);
});
return [min, max];
const { dataModel } = data;
let min = Number.MAX_SAFE_INTEGER;
let max = Number.MIN_SAFE_INTEGER;
dataModel.forEach((item) => {
min = Math.min(min, item.pv ?? 0);
max = Math.max(max, item.pv ?? 0);
});
return [min, max];
};
const markLineItem = (name, value, color) => {
return {
name: name,
yAxis: value,
value: value,
lineStyle: {
color: color || '#000',
},
label: {
position: 'insideEndTop',
color: color || '#000',
formatter: function () {
return `${name}:${value}`;
},
},
};
return {
name: name,
yAxis: value,
value: value,
lineStyle: {
color: color || '#000',
},
label: {
position: 'insideEndTop',
color: color || '#000',
formatter: function () {
return `${name}:${value}`;
},
},
};
};
export const alarmMarkLine = (dataItem, index, dataSource, schemes) => {
// 只有一个数据曲线时显示markline
if (!dataItem || !schemes || dataSource.length !== 1) return {};
const {deviceType, stationCode, sensorName, decimalPoint} = dataItem;
const curSchemes = schemes.filter(
(item) =>
item.deviceCode === stationCode &&
item.sensorName === sensorName &&
item.valueType === '直接取值',
);
const data = [];
curSchemes.forEach((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'));
hhLimit !== null && hhLimit !== void 0 && data.push(markLineItem('高高限', hhLimit, '#FF0000'));
});
data.push({
name: '平均线',
type: 'average',
lineStyle: {
color: '#00b8b1',
type: 'solid',
},
label: {
position: 'insideEndTop',
color: '#00b8b1',
formatter: function (param) {
return `平均值:${param.value}`;
},
},
});
return {
symbol: ['none', 'none'],
data,
};
// 只有一个数据曲线时显示markline
if (!dataItem || !schemes || dataSource.length !== 1) return {};
const { deviceType, stationCode, sensorName, decimalPoint } = dataItem;
const curSchemes = schemes.filter(
(item) =>
item.deviceCode === stationCode &&
item.sensorName === sensorName &&
item.valueType === '直接取值',
);
const data = [];
curSchemes.forEach((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'));
hhLimit !== null && hhLimit !== void 0 && data.push(markLineItem('高高限', hhLimit, '#FF0000'));
});
data.push({
name: '平均线',
type: 'average',
lineStyle: {
color: '#00b8b1',
type: 'solid',
},
label: {
position: 'insideEndTop',
color: '#00b8b1',
formatter: function (param) {
return `平均值:${param.value}`;
},
},
});
return {
symbol: ['none', 'none'],
data,
};
};
export const minMaxMarkPoint = (dataItem, index, dataSource) => {
const _isMobile = isMobile();
// 只有一个数据曲线时显示markline
if (!dataItem || dataSource.length !== 1) return {};
const data = [
{
type: 'min',
value: null,
name: '最小: ',
symbol: `image://${minIcon}`,
symbolOffset: [0, 18],
},
{
type: 'max',
value: null,
name: '最大: ',
symbol: `image://${maxIcon}`,
symbolOffset: [0, -16],
}
];
return {
label: {
show: false
},
symbolSize: [49, 31],
data,
};
const _isMobile = isMobile();
// 只有一个数据曲线时显示markline
if (!dataItem || dataSource.length !== 1) return {};
const data = [
{
type: 'min',
value: null,
name: '最小: ',
symbol: `image://${minIcon}`,
symbolOffset: [0, 18],
},
{
type: 'max',
value: null,
name: '最大: ',
symbol: `image://${maxIcon}`,
symbolOffset: [0, -16],
},
];
return {
label: {
show: false,
},
symbolSize: [49, 31],
data,
};
};
/**
......@@ -221,27 +216,27 @@ export const minMaxMarkPoint = (dataItem, index, dataSource) => {
* @param {any} axis
*/
export const decorateAxisGridLine = (axis, showGrid) => {
if (!axis) return;
axis.minorTick = {
lineStyle: {
color: '#e2e2e2',
},
...(axis.minorTick || {}),
show: showGrid,
splitNumber: 2,
};
axis.minorSplitLine = {
lineStyle: {
color: '#e2e2e2',
type: 'dashed',
},
...(axis.minorSplitLine || {}),
show: showGrid,
};
axis.splitLine = {
...(axis.splitLine || {}),
show: showGrid,
};
if (!axis) return;
axis.minorTick = {
lineStyle: {
color: '#e2e2e2',
},
...(axis.minorTick || {}),
show: showGrid,
splitNumber: 2,
};
axis.minorSplitLine = {
lineStyle: {
color: '#e2e2e2',
type: 'dashed',
},
...(axis.minorSplitLine || {}),
show: showGrid,
};
axis.splitLine = {
...(axis.splitLine || {}),
show: showGrid,
};
};
/**
......@@ -250,562 +245,625 @@ export const decorateAxisGridLine = (axis, showGrid) => {
* @param {any} dataItem
*/
export const offlineArea = (dataItem) => {
if (!dataItem) return {};
const {dataModel} = dataItem;
let datas = new Array();
let offlineData = [];
let hasOffline = false;
dataModel.forEach((item, index) => {
if (!item.pv && !hasOffline) {
offlineData = [
{
name: '离线',
xAxis: new Date(item.pt),
label: {show: !datas?.length}
},
];
hasOffline = true;
} else if (item.pv && hasOffline) {
offlineData.push({
xAxis: new Date(item.pt),
});
datas.push(offlineData);
offlineData = [];
hasOffline = false;
}
});
return {
itemStyle: {
color: '#eee',
opacity: 0.6,
if (!dataItem) return {};
const { dataModel } = dataItem;
let datas = new Array();
let offlineData = [];
let hasOffline = false;
dataModel.forEach((item, index) => {
if (!item.pv && !hasOffline) {
offlineData = [
{
name: '离线',
xAxis: new Date(item.pt),
label: { show: !datas?.length },
},
data: datas,
};
];
hasOffline = true;
} else if (item.pv && hasOffline) {
offlineData.push({
xAxis: new Date(item.pt),
});
datas.push(offlineData);
offlineData = [];
hasOffline = false;
}
});
return {
itemStyle: {
color: '#eee',
opacity: 0.6,
},
data: datas,
};
};
// 生成默认legend配置
export const buildDefaultLegend = (option) => {
const {title} = option;
const { title } = option;
let paddingRight = 0;
if (title && title.show) paddingRight = 80; // 给标题留够空间
let paddingRight = 0;
if (title && title.show) paddingRight = 80; // 给标题留够空间
return {
show: true,
right: 20,
top: 20,
icon: 'rect',
itemWidth: 14,
itemHeight: 8,
itemGap: 20,
padding: [0, 0, 0, paddingRight],
textStyle: {
padding: [0, 0, 0, 4],
color: '#2d2d2d',
},
};
return {
show: true,
right: 20,
top: 20,
icon: 'rect',
itemWidth: 14,
itemHeight: 8,
itemGap: 20,
padding: [0, 0, 0, paddingRight],
textStyle: {
padding: [0, 0, 0, 4],
color: '#2d2d2d',
},
};
};
// tooltip 模板
const headTemplate = (param, opt) => {
if (!param) return '';
const {name, axisValueLabel, axisType, axisValue} = param;
const timeFormat = opt && opt.contrast ? (opt.contrastOption === 'day' ? 'HH:mm:ss' : 'DD日HH时') : 'YYYY-MM-DD HH:mm:ss';
const text =
axisType === 'xAxis.time' ? moment(axisValue).format(timeFormat) : name || axisValueLabel;
return `<div style="border-bottom: 1px solid #F0F0F0; color: #808080; margin-bottom:${handlePx(5, 'px')}; padding-bottom: ${handlePx(5, 'px')};">${text}</div>`;
if (!param) return '';
const { name, axisValueLabel, axisType, axisValue } = param;
const timeFormat =
opt && opt.contrast
? opt.contrastOption === 'day'
? 'HH:mm:ss'
: 'DD日HH时'
: 'YYYY-MM-DD HH:mm:ss';
const text =
axisType === 'xAxis.time' ? moment(axisValue).format(timeFormat) : name || axisValueLabel;
return `<div style="border-bottom: 1px solid #F0F0F0; color: #808080; margin-bottom:${handlePx(
5,
'px',
)}; padding-bottom: ${handlePx(5, 'px')};">${text}</div>`;
};
const seriesTemplate = (param, unit) => {
if (!param || param.seriesName === '自定义') return '';
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>
if (!param || param.seriesName === '自定义') return '';
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>
<span style="display:inline-block;">：</span>
<span style="color:${color};margin: 0 ${handlePx(5, 'px')} 0 auto;">${value?.toFixed(3) ?? '-'}</span>
<span style="color:${color};margin: 0 ${handlePx(5, 'px')} 0 auto;">${value?.toFixed(3) ?? '-'
}</span>
<span style="font-size: ${handlePx(12, 'px')};">${_unit ?? ''}</span>
</div>`;
return param.componentSubType !== 'candlestick'
? `<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><span style="display:inline-block;">：</span>
<span style="color: ${COLOR.AVG};margin: 0 ${handlePx(5, 'px')} 0 auto;">${value[1] ?? '-'}</span>
return param.componentSubType !== 'candlestick'
? `<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><span style="display:inline-block;">：</span>
<span style="color: ${COLOR.AVG};margin: 0 ${handlePx(5, 'px')} 0 auto;">${value[1] ?? '-'
}</span>
<span style="font-size: ${handlePx(12, 'px')};">${_unit ?? ''}</span>
</div>`
: `
: `
<div style="display: flex; align-items: center;">
<span>首值</span><span style="display:inline-block;">：</span>
<span style="color: ${COLOR.AVG};margin: 0 ${handlePx(5, 'px')} 0 auto;">${value[1] ?? '-'}</span>
<span style="color: ${COLOR.AVG};margin: 0 ${handlePx(5, 'px')} 0 auto;">${value[1] ?? '-'
}</span>
<span style="font-size: ${handlePx(12, 'px')};">${_unit ?? ''}</span>
</div>
<div style="display: flex; align-items: center;">
<span>尾值</span><span style="display:inline-block;">：</span>
<span style="color: ${COLOR.AVG};margin: 0 ${handlePx(5, 'px')} 0 auto;">${value[2] ?? '-'}</span>
<span style="color: ${COLOR.AVG};margin: 0 ${handlePx(5, 'px')} 0 auto;">${value[2] ?? '-'
}</span>
<span style="font-size: ${handlePx(12, 'px')};">${_unit ?? ''}</span>
</div>
<div style="display: flex; align-items: center;">
<span>周期最小值</span><span style="display:inline-block;">：</span>
<span style="color: ${COLOR.AVG};margin: 0 ${handlePx(5, 'px')} 0 auto;">${value[3] ?? '-'}</span>
<span style="color: ${COLOR.AVG};margin: 0 ${handlePx(5, 'px')} 0 auto;">${value[3] ?? '-'
}</span>
<span style="font-size: ${handlePx(12, 'px')};">${_unit ?? ''}</span>
</div>
<div style="display: flex; align-items: center;">
<span>周期最大值</span><span style="display:inline-block;">：</span>
<span style="color: ${COLOR.AVG};margin: 0 ${handlePx(5, 'px')} 0 auto;">${value[4] ?? '-'}</span>
<span style="color: ${COLOR.AVG};margin: 0 ${handlePx(5, 'px')} 0 auto;">${value[4] ?? '-'
}</span>
<span style="font-size: ${handlePx(12, 'px')};">${_unit ?? ''}</span>
</div>
`;
};
const tooltipAccessor = (unit, contrastOption) => {
return {
formatter: function (params, ticket, callback) {
let tooltipHeader = '';
let tooltipContent = '';
if (isArray(params)) {
tooltipHeader = headTemplate(params[0], contrastOption);
params.forEach((param) => {
tooltipContent += seriesTemplate(param, unit?.[param?.seriesIndex]);
});
} else {
tooltipHeader = headTemplate(params, contrastOption);
tooltipContent += seriesTemplate(params, unit?.[params?.seriesIndex]);
}
return `
return {
formatter: function (params, ticket, callback) {
let tooltipHeader = '';
let tooltipContent = '';
if (isArray(params)) {
tooltipHeader = headTemplate(params[0], contrastOption);
params.forEach((param) => {
tooltipContent += seriesTemplate(param, unit?.[param?.seriesIndex]);
});
} else {
tooltipHeader = headTemplate(params, contrastOption);
tooltipContent += seriesTemplate(params, unit?.[params?.seriesIndex]);
}
return `
<div>
${tooltipHeader}
<div>${tooltipContent}</div>
</div>
`;
},
};
},
};
};
// 处理特殊业务：1. 频率；2. 是否在线（暂时不上）
const handleSpecial1 = (special, dataSource) => {
// 频率部分的业务
const _colorMap = {
变频: '#1685ff',
工频: '#00d0c7',
运行: '#1685ff',
故障: '#ff6b37',
停止: '#666666'
};
let _special1 = special?.special1 ?? {};
let _valDesc = _special1?.valDesc ?? {};
let _data = dataSource.find(item => item.sensorName === _special1.name);
let _markAreaData = [];
let _pieces = _data?.dataModel?.reduce((final, cur, index) => {
// 频率部分的业务
const _colorMap = {
变频: '#1685ff',
工频: '#00d0c7',
运行: '#1685ff',
故障: '#ff6b37',
停止: '#666666',
};
let _special1 = special?.special1 ?? {};
let _valDesc = _special1?.valDesc ?? {};
let _data = dataSource.find((item) => item.sensorName === _special1.name);
let _markAreaData = [];
let _pieces =
_data?.dataModel
?.reduce((final, cur, index) => {
let _pt = moment(cur.pt).valueOf();
let _length = final.length;
if (_colorMap[_valDesc[cur.pv]]) {
if (_length === 0) {
final.push({
lte: _pt,
gte: 0,
color: _colorMap[_valDesc[cur.pv]],
value: cur.pv,
text: _valDesc[cur.pv]
});
if (_length === 0) {
final.push({
lte: _pt,
gte: 0,
color: _colorMap[_valDesc[cur.pv]],
value: cur.pv,
text: _valDesc[cur.pv],
});
} else {
if (cur.pv === final[_length - 1].value) {
final[_length - 1].lte = _pt;
} else {
if (cur.pv === final[_length - 1].value) {
final[_length - 1].lte = _pt;
} else {
final.push({
lte: _pt,
gte: _pt,
color: _colorMap[_valDesc[cur.pv]],
value: cur.pv,
text: _valDesc[cur.pv]
});
}
final.push({
lte: _pt,
gte: _pt,
color: _colorMap[_valDesc[cur.pv]],
value: cur.pv,
text: _valDesc[cur.pv],
});
}
}
}
return final;
}, [])
.map(item => {
_markAreaData.push(
[
{
xAxis: item.gte,
itemStyle: {
// color: item.color
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0, color: item.color // 0% 处的颜色
}, {
offset: 1, color: item.color// 100% 处的颜色
}],
global: false // 缺省为 false
}
},
name: item.text,
label: {show: true}
},
{
xAxis: item.lte,
itemStyle: {
color: item.color
}
}
]
)
delete item.value;
return item;
})??[];
let _final = {};
if (_markAreaData.length) {
_final.visualMap = {
type: 'piecewise',
show: false,
dimension: 0,
seriesIndex: 0,
pieces: _pieces,
}
}
if (_pieces.length) {
_final.markArea = {
silent: true,
}, [])
.map((item) => {
_markAreaData.push([
{
xAxis: item.gte,
itemStyle: {
opacity: 0.1
// color: item.color
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: item.color, // 0% 处的颜色
},
{
offset: 1,
color: item.color, // 100% 处的颜色
},
],
global: false, // 缺省为 false
},
},
data: _markAreaData
}
}
return _final;
name: item.text,
label: { show: true },
},
{
xAxis: item.lte,
itemStyle: {
color: item.color,
},
},
]);
delete item.value;
return item;
}) ?? [];
let _final = {};
if (_markAreaData.length) {
_final.visualMap = {
type: 'piecewise',
show: false,
dimension: 0,
seriesIndex: 0,
pieces: _pieces,
};
}
if (_pieces.length) {
_final.markArea = {
silent: true,
itemStyle: {
opacity: 0.1,
},
data: _markAreaData,
};
}
return _final;
};
// 生成x坐标
const returnXAxis = ({
dataSource,
contrast,
contrastOption,
nameWithSensor,
showMarkLine,
deviceAlarmSchemes,
showPoint,
restOption,
smooth,
special
}) => {
// 根据"指标名称"分类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};
})();
let _offlineData = [];
// 生成visualMap、markArea
let {visualMap, markArea} = handleSpecial1(special, dataSource);
let _filterArr = ['是否在线'];
if (special?.special1?.name) {
_filterArr.push(special.special1.name);
}
// 生成series
let series = dataSource
.filter((item) => {
if (item.sensorName === '是否在线') {
_offlineData.push(item);
}
return !_filterArr.includes(item.sensorName);
})
.map((item, index) => {
const {sensorName, unit} = item;
const name = nameFormatter(item, contrast, contrastOption, nameWithSensor);
const data = dataAccessor(item, contrast, contrastOption);
const type = 'line';
const areaStyle = areaStyleFormatter(item);
const yAxisIndex = yAxisInterator.get(sensorName);
const markLine = showMarkLine
? alarmMarkLine(item, index, dataSource, deviceAlarmSchemes)
: {};
const markPoint = showPoint ? minMaxMarkPoint(item, index, dataSource) : {};
// let markArea = null;
// 需求变更：设备离线改用“是否在线”的数据，离线的状态标记的数据用该部分的数据。 2023年4月25日09:36:55
// 暂时注释，离线逻辑需要再确认 2023-09-15
/* let _offlineAreasData = _offlineData
dataSource,
contrast,
contrastOption,
nameWithSensor,
showMarkLine,
deviceAlarmSchemes,
showPoint,
restOption,
smooth,
special,
}) => {
// 根据"指标名称"分类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 };
})();
let _offlineData = [];
// 生成visualMap、markArea
let { visualMap, markArea } = handleSpecial1(special, dataSource);
let _filterArr = ['是否在线'];
if (special?.special1?.name) {
_filterArr.push(special.special1.name);
}
// 生成series
let series = dataSource
.filter((item) => {
if (item.sensorName === '是否在线') {
_offlineData.push(item);
}
return !_filterArr.includes(item.sensorName);
})
.map((item, index) => {
const { sensorName, unit } = item;
const name = nameFormatter(item, contrast, contrastOption, nameWithSensor);
const data = dataAccessor(item, contrast, contrastOption);
const type = 'line';
const areaStyle = areaStyleFormatter(item);
const yAxisIndex = yAxisInterator.get(sensorName);
const markLine = showMarkLine
? alarmMarkLine(item, index, dataSource, deviceAlarmSchemes)
: {};
const markPoint = showPoint ? minMaxMarkPoint(item, index, dataSource) : {};
// let markArea = null;
// 需求变更：设备离线改用“是否在线”的数据，离线的状态标记的数据用该部分的数据。 2023年4月25日09:36:55
// 暂时注释，离线逻辑需要再确认 2023-09-15
/* let _offlineAreasData = _offlineData
.find((offline) => offline.stationCode === item.stationCode);
let offlineAreas = offlineArea(_offlineAreasData);
if (offlineAreas.data?.length) {
restOption.markArea = null;
markArea = offlineAreas;
}*/
// 需求新增：增加频率业务
return {
notMerge: true,
name,
type,
data,
areaStyle,
yAxisIndex,
smooth,
unit,
markLine,
markPoint,
markArea,
};
});
// 由于series更新后，没有的数据曲线仍然停留在图表区上，导致图表可视区范围有问题
const min = Math.min(
...series.map((item) => item.data?.[0]?.[0]).filter((item) => item !== undefined),
);
const max = Math.max(
...series
.map((item) => item.data?.[item.data.length - 1]?.[0])
.filter((item) => item !== undefined),
);
return {
xAxis: {
type: 'time', min, max, axisLabel: {
formatter: contrast ? (contrastOption === 'month' ? '{dd}日' : '{HH}:{mm}') : {
year: '{yyyy}',
month: '{MMM}',
day: '{d}日',
hour: '{HH}:{mm}',
minute: '{HH}:{mm}',
second: '{HH}:{mm}:{ss}',
none: '{yyyy}-{MM}-{dd} {hh}:{mm}:{ss}'
}
}
}, series, visualMap
};
}
// 需求新增：增加频率业务
return {
notMerge: true,
name,
type,
data,
areaStyle,
yAxisIndex,
smooth,
unit,
markLine,
markPoint,
markArea,
};
});
// 由于series更新后，没有的数据曲线仍然停留在图表区上，导致图表可视区范围有问题
const min = Math.min(
...series.map((item) => item.data?.[0]?.[0]).filter((item) => item !== undefined),
);
const max = Math.max(
...series
.map((item) => item.data?.[item.data.length - 1]?.[0])
.filter((item) => item !== undefined),
);
return {
xAxis: {
type: 'time',
min,
max,
axisLabel: {
formatter: contrast
? contrastOption === 'month'
? '{dd}日'
: '{HH}:{mm}'
: {
year: '{yyyy}',
month: '{MMM}',
day: '{d}日',
hour: '{HH}:{mm}',
minute: '{HH}:{mm}',
second: '{HH}:{mm}:{ss}',
none: '{yyyy}-{MM}-{dd} {hh}:{mm}:{ss}',
},
},
},
series,
visualMap,
};
};
const handleDefault = (config, cusOption) => {
const needUnit = _.get(config, 'needUnit', false);
const curveCenter = _.get(config, 'curveCenter', false);
const nameWithSensor = _.get(config, 'nameWithSensor', true);
const showGridLine = _.get(config, 'showGridLine', true);
const showMarkLine = _.get(config, 'showMarkLine', false);
const showPoint = _.get(config, 'showPoint', false);
const deviceAlarmSchemes = _.get(config, 'deviceAlarmSchemes', []);
const chartType = _.get(config, 'chartType', null);
// const justLine = _.get(config, 'justLine', false);
const showBoxOption = _.get(config, 'showBoxOption', false);
// 自定义属性
const restOption = _.pick(cusOption, ['title', 'legend']);
const special = _.get(config, 'special', {});
return {
needUnit,
curveCenter,
nameWithSensor,
showGridLine,
showMarkLine,
showPoint,
deviceAlarmSchemes,
chartType,
showBoxOption,
restOption,
special
}
const needUnit = _.get(config, 'needUnit', false);
const curveCenter = _.get(config, 'curveCenter', false);
const nameWithSensor = _.get(config, 'nameWithSensor', true);
const showGridLine = _.get(config, 'showGridLine', true);
const showMarkLine = _.get(config, 'showMarkLine', false);
const showPoint = _.get(config, 'showPoint', false);
const deviceAlarmSchemes = _.get(config, 'deviceAlarmSchemes', []);
const chartType = _.get(config, 'chartType', null);
// const justLine = _.get(config, 'justLine', false);
const showBoxOption = _.get(config, 'showBoxOption', false);
// 自定义属性
const restOption = _.pick(cusOption, ['title', 'legend']);
const special = _.get(config, 'special', {});
return {
needUnit,
curveCenter,
nameWithSensor,
showGridLine,
showMarkLine,
showPoint,
deviceAlarmSchemes,
chartType,
showBoxOption,
restOption,
special,
};
};
const handleMaxValue = (value) => {
if (value <= 1) return value;
if (value >= 10000) return `${(value / 1000).toFixed(0)}k`;
return value.toFixed(0);
}
const handleYAxis = ({dataSource, needUnit, curveCenter, showGridLine}) => {
// 一种指标一个y轴
const yAxisMap = new Map();
dataSource.forEach((item, index) => {
const {sensorName, unit} = item;
const key = sensorName;
if (!yAxisMap.has(key)) {
const i = yAxisMap.size;
const axis = {
type: 'value',
name: needUnit ? unit : null,
position: i % 2 === 0 ? 'left' : 'right',
offset: Math.floor(i / 2) * 80,
axisLabel: {
formatter: (value) => (value > 10000 ? `${(value / 1000).toFixed(1)}k` : value.toFixed(1)),
},
axisLine: {
show: true,
},
nameTextStyle: {
align: i % 2 === 0 ? 'right' : 'left',
},
minorTick: {
lineStyle: {
color: '#e2e2e2',
},
},
minorSplitLine: {
lineStyle: {
color: '#e2e2e2',
type: 'dashed',
},
},
};
yAxisMap.set(key, axis);
}
const handleYAxis = ({ dataSource, needUnit, curveCenter, showGridLine }) => {
// 一种指标一个y轴
const yAxisMap = new Map();
// 1. 找出最大值; 2. 计算出y轴最大宽度动态计算偏移距离；
let _maxValueArray = [];
let _offsetValue = [];
dataSource.forEach((item, index) => {
let _maxValue = item.dataModel.reduce((final, cur) => {
if (cur.pv > final) final = cur.pv;
return final
}, 0);
_maxValueArray.push(handleMaxValue(_maxValue));
const { sensorName, unit } = item;
const key = sensorName;
if (!yAxisMap.has(key)) {
const i = yAxisMap.size;
let _offset = _maxValueArray[i - 2];
let _baseOffset = _offsetValue[i - 2] ?? 0;
let _finalOffset = (_offset !== undefined ? (_offset === 0 ? 2 : _offset.toString().replaceAll('.','').length) * 10 : 0) + _baseOffset;
_offsetValue.push(_finalOffset);
const axis = {
type: 'value',
name: needUnit ? unit : null,
position: i % 2 === 0 ? 'left' : 'right',
// offset: _offset !== undefined ? (_offset === 0? 2:_offset.toString().length) * 10 : 0,
offset: _finalOffset,
axisLabel: {
formatter: (value) => {
return handleMaxValue(value);
}
},
axisLine: {
show: true,
},
nameTextStyle: {
align: i % 2 === 0 ? 'right' : 'left',
},
minorTick: {
lineStyle: {
color: '#e2e2e2',
},
},
minorSplitLine: {
lineStyle: {
color: '#e2e2e2',
type: 'dashed',
},
},
};
yAxisMap.set(key, axis);
}
// 曲线居中
if (curveCenter && item.dataModel && item.dataModel.length > 0) {
const [min, max] = minMax(item);
const axis = yAxisMap.get(key);
axis.min = axis.min === void 0 ? min : Math.min(min, axis.min);
axis.max = axis.max === void 0 ? max : Math.max(max, axis.max);
}
// 曲线居中
if (curveCenter && item.dataModel && item.dataModel.length > 0) {
const [min, max] = minMax(item);
const axis = yAxisMap.get(key);
axis.min = axis.min === void 0 ? min : Math.min(min, axis.min);
axis.max = axis.max === void 0 ? max : Math.max(max, axis.max);
}
// 网格显示
const axis = yAxisMap.get(key);
decorateAxisGridLine(axis, showGridLine);
});
const yAxis = yAxisMap.size > 0 ? [...yAxisMap.values()] : {type: 'value'};
// 网格显示
const axis = yAxisMap.get(key);
decorateAxisGridLine(axis, showGridLine);
});
const yAxis = yAxisMap.size > 0 ? [...yAxisMap.values()] : { type: 'value' };
// 根据y轴个数调整边距
const leftNum = Math.ceil(yAxisMap.size / 2);
const rightNum = Math.floor(yAxisMap.size / 2);
return {leftNum, rightNum, yAxis};
}
// 根据y轴个数调整边距
const leftNum = Math.ceil(yAxisMap.size / 2);
const rightNum = Math.floor(yAxisMap.size / 2);
return { leftNum, rightNum, yAxis };
};
const assignOptions = (restOption, xAxis, legendData, chartType, contrast, contrastOption) => {
restOption.dataZoom = [
{
show: true,
bottom: 10,
start: 0,
end: 100,
height: currentOption['dataZoomHeight'],
type: 'inside',
zoomOnMouseWheel: true,
filterMode: chartType === 'lineChart' ? 'none' : 'weakFilter'
},
{
show: true,
bottom: 10,
start: 0,
end: 100,
height: currentOption['dataZoomHeight'],
type: 'slider',
zoomOnMouseWheel: true,
labelFormatter: function (e) {
let _formatterStr = 'YYYY-MM-DD HH:mm:ss';
if (contrast) {
if (contrastOption === 'day') _formatterStr = 'HH:mm';
if (contrastOption === 'month') _formatterStr = 'MM月DD日 HH时';
}
return moment(e).format(_formatterStr)
}
},
];
xAxis.minInterval = 3600 * (1 * 1000);
if (legendData) {
restOption.legend = {...buildDefaultLegend({}), ...{data: legendData}};
}
restOption.dataZoom = [
{
show: true,
bottom: 10,
start: 0,
end: 100,
height: currentOption['dataZoomHeight'],
type: 'inside',
zoomOnMouseWheel: true,
filterMode: chartType === 'lineChart' ? 'none' : 'weakFilter',
},
{
show: true,
bottom: 10,
start: 0,
end: 100,
height: currentOption['dataZoomHeight'],
type: 'slider',
zoomOnMouseWheel: true,
labelFormatter: function (e) {
let _formatterStr = 'YYYY-MM-DD HH:mm:ss';
if (contrast) {
if (contrastOption === 'day') _formatterStr = 'HH:mm';
if (contrastOption === 'month') _formatterStr = 'MM月DD日 HH时';
}
return moment(e).format(_formatterStr);
},
},
];
xAxis.minInterval = 3600 * (1 * 1000);
if (legendData) {
restOption.legend = { ...buildDefaultLegend({}), ...{ data: legendData } };
}
};
const returnMaxOrMinNumber = (dataSource, type) => {
let _obj = null;
if (type === 'period' && dataSource?.[0]?.dataModel?.length) {
let _length = dataSource?.[0]?.dataModel?.length;
let _first = dataSource?.[0]?.dataModel[0]?.pt;
let _last = dataSource?.[0]?.dataModel[_length - 1]?.pt;
return ['展示时段: ', _first, _last, type]
}
dataSource?.[0]?.dataModel.filter(item => item.pv !== null).forEach(item => {
if (!_obj) {
let _obj = null;
if (type === 'period' && dataSource?.[0]?.dataModel?.length) {
let _length = dataSource?.[0]?.dataModel?.length;
let _first = dataSource?.[0]?.dataModel[0]?.pt;
let _last = dataSource?.[0]?.dataModel[_length - 1]?.pt;
return ['展示时段: ', _first, _last, type];
}
dataSource?.[0]?.dataModel
.filter((item) => item.pv !== null)
.forEach((item) => {
if (!_obj) {
_obj = item;
} else {
if (type === 'min') {
if (item.pv < _obj.pv) {
_obj = item;
} else {
if (type === 'min') {
if (item.pv < _obj.pv) {
_obj = item
}
}
if (type === 'max') {
if (item.pv > _obj.pv) {
_obj = item
}
}
}
}
if (type === 'max') {
if (item.pv > _obj.pv) {
_obj = item;
}
}
}
});
let _value = [];
if (_obj?.pt) {
_value = [moment(_obj.pt).valueOf(), _obj.pv];
let _img = type === 'max' ? maxIcon : minIconDownArrow;
_value.push(_img);
_value.push(type);
// 把最大值最小值都push进去，方便计算
}
return _value;
let _value = [];
if (_obj?.pt) {
_value = [moment(_obj.pt).valueOf(), _obj.pv];
let _img = type === 'max' ? maxIcon : minIconDownArrow;
_value.push(_img);
_value.push(type);
// 把最大值最小值都push进去，方便计算
}
return _value;
};
const handleGrid = (dataSource, needUnit, leftNum, rightNum, chartType) => {
// 如果是单曲线，_grid的top需要一行的高度，用来放置最值最小值
let _base = 60;
let _topForUnit = needUnit ? 20 : 0;
return {
top: _base + _topForUnit,
left: leftNum === 1 ? 10 : leftNum * AXIS_WIDTH,
right: rightNum === 0 ? 20 : rightNum * AXIS_WIDTH,
bottom: 60,
containLabel: true
};
// 如果是单曲线，_grid的top需要一行的高度，用来放置最值最小值
let _base = 60;
let _topForUnit = needUnit ? 20 : 0;
return {
top: _base + _topForUnit,
// left: leftNum === 1 ? 10 : leftNum * AXIS_WIDTH,
left: 10,
// right: rightNum === 0 ? 20 : rightNum * AXIS_WIDTH,
bottom: 60,
containLabel: true,
};
};
const renderItem = (params, api) => {
let _base = params.dataIndex;
let _baseChartWidth = 10;
let _numberStringWidth = _base === 1 && api.value(3) === 'max' ? String(api.value(4) || 0).length * _baseChartWidth : String(api.value(1)).length * _baseChartWidth;
let _left = 30;
let _baseWidth = 190 + _numberStringWidth;
let _imgWidth = 45;
let _dateWidth = 128;
let _imageX = _left + _base * _baseWidth;
let _timeX = _left + _base * _baseWidth + _imgWidth;
let _valueX = _left + _base * _baseWidth + _imgWidth + _dateWidth;
let _color = api.value(3) === 'min' ? '#05C2BC' : '#1685FF';
let topValue = 25;
let _trimmer = -2;
return {
type: 'group',
children: [
{
type: 'image',
style: {
image: api.value(2),
textVerticalAlign: 'middle',
y: -6
},
position: [_imageX, topValue]
},
{
type: 'text',
style: {
text: moment(api.value(0)).format('YYYY-MM-DD HH:mm:ss') + ': ',
textVerticalAlign: 'top'
},
position: [_timeX, topValue + _trimmer],
},
{
type: 'text',
style: {
text: api.value(1),
textVerticalAlign: 'middle',
fill: _color,
font: 'bolder 16px cursive',
lineWidth: 10,
y: 3
},
position: [_valueX, topValue + _trimmer]
}
]
}
let _base = params.dataIndex;
let _baseChartWidth = 10;
let _numberStringWidth =
_base === 1 && api.value(3) === 'max'
? String(api.value(4) || 0).length * _baseChartWidth
: String(api.value(1)).length * _baseChartWidth;
let _left = 30;
let _baseWidth = 190 + _numberStringWidth;
let _imgWidth = 45;
let _dateWidth = 128;
let _imageX = _left + _base * _baseWidth;
let _timeX = _left + _base * _baseWidth + _imgWidth;
let _valueX = _left + _base * _baseWidth + _imgWidth + _dateWidth;
let _color = api.value(3) === 'min' ? '#05C2BC' : '#1685FF';
let topValue = 25;
let _trimmer = -2;
return {
type: 'group',
children: [
{
type: 'image',
style: {
image: api.value(2),
textVerticalAlign: 'middle',
y: -6,
},
position: [_imageX, topValue],
},
{
type: 'text',
style: {
text: moment(api.value(0)).format('YYYY-MM-DD HH:mm:ss') + ': ',
textVerticalAlign: 'top',
},
position: [_timeX, topValue + _trimmer],
},
{
type: 'text',
style: {
text: api.value(1),
textVerticalAlign: 'middle',
fill: _color,
font: 'bolder 16px cursive',
lineWidth: 10,
y: 3,
},
position: [_valueX, topValue + _trimmer],
},
],
};
};
const returnCustomSeries = (dataSource) => {
let _maxNumber = returnMaxOrMinNumber(dataSource, 'max');
let _minNumber = returnMaxOrMinNumber(dataSource, 'min');
// let _period = returnMaxOrMinNumber(dataSource, 'period');
// 需要将最大值最小分别传入，后续计算图例位置需要，先min后max
let _max = _maxNumber[1];
let _min = _minNumber[1];
[_maxNumber, _minNumber].forEach(item => {
item.push(_min);
item.push(_max);
})
return {
name: '自定义',
type: 'custom',
renderItem: renderItem,
data: [_minNumber, _maxNumber],
}
let _maxNumber = returnMaxOrMinNumber(dataSource, 'max');
let _minNumber = returnMaxOrMinNumber(dataSource, 'min');
// let _period = returnMaxOrMinNumber(dataSource, 'period');
// 需要将最大值最小分别传入，后续计算图例位置需要，先min后max
let _max = _maxNumber[1];
let _min = _minNumber[1];
[_maxNumber, _minNumber].forEach((item) => {
item.push(_min);
item.push(_max);
});
return {
name: '自定义',
type: 'custom',
renderItem: renderItem,
data: [_minNumber, _maxNumber],
};
};
/**
* 图表配置项生成
......@@ -818,172 +876,206 @@ const returnCustomSeries = (dataSource) => {
* @param {any} config 额外配置信息
*/
const optionGenerator = (dataSource, cusOption, contrast, contrastOption, smooth, config, lineDataType = '') => {
const {
needUnit,
curveCenter,
nameWithSensor,
showGridLine,
showMarkLine,
showPoint,
deviceAlarmSchemes,
chartType,
showBoxOption,
restOption,
special
} = handleDefault(config, cusOption);
const {leftNum, rightNum, yAxis} = handleYAxis({dataSource, needUnit, curveCenter, showGridLine});
const grid = handleGrid(dataSource, needUnit, leftNum, rightNum, chartType);
let {xAxis, series, visualMap} = returnXAxis({
dataSource,
contrast,
contrastOption,
nameWithSensor,
showMarkLine,
deviceAlarmSchemes,
showPoint,
smooth,
restOption,
special
});
decorateAxisGridLine(xAxis, showGridLine);
const tooltipTimeFormat = !contrast
? 'YYYY-MM-DD HH:mm:ss'
: contrastOption === 'day'
? 'HH:mm'
: 'DD HH:mm';
let tooltip = {};
// 增加箱线图的逻辑，单曲线才存在该逻辑
if (chartType && showBoxOption) {
if (chartType === 'boxChart' && lineDataType === '特征曲线') {
const otherData =
dataSource?.[0]?.dataModel.map((item) => {
const {firstPV, lastPV, maxPV, minPV, pt} = item;
return [moment(pt).valueOf(), firstPV, lastPV, minPV, maxPV];
}) || []; //当存在othersData的时候，只是单曲线
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};
});
series.push({
type: 'candlestick',
name: '箱线图',
symbol: 'none',
data: otherData,
itemStyle: {
color: '#FFA200',
color0: '#44CD00',
borderColor: '#FFA200',
borderColor0: '#44CD00',
},
});
tooltip = tooltipAccessor(unit);
}
if (chartType === 'lineChart' || lineDataType === '原始曲线') {
let _maxData = [];
let _minData = [];
let _currentYear = moment().format('YYYY');
const formatStr =
contrastOption === 'day'
? `${_currentYear}-01-01 HH:mm:00`
: `${_currentYear}-01-DD HH:mm:00`; // 用来做同期对比，把日期拉到同一区间
let _maxValues = [];
/**
* 生成泳道图，分两种情况
* 1. 当最大值最小值都是正数时；
* 2. 当最大值小于零时（此时，最小值一定小于零）；
*/
dataSource?.[0]?.dataModel.forEach((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 > 0 ? maxPV - minPV : minPV - maxPV).toFixed(2)]);
_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'};
decorateAxisGridLine(xAxis, showGridLine);
let _unit = '';
series = series.map((item) => {
_unit = item.unit ?? '';
item.areaStyle = null;
return {...item, showSymbol: false};
});
[[..._minData], [..._maxData]].forEach((item, index) => {
series.push({
name: index === 0 ? '周期最小值' : '周期最大值',
type: 'line',
data: item,
lineStyle: {
opacity: 0,
},
...(index !== 0
? {
areaStyle: {
color: series?.[0]?.itemStyle?.color ?? '#65a0d1',
opacity: 0.2,
},
}
: {}),
stack: 'confidence-band',
symbol: 'none',
});
});
tooltip = {
trigger: 'axis',
formatter: (e) => {
return `<div>
const optionGenerator = (
dataSource,
cusOption,
contrast,
contrastOption,
smooth,
config,
lineDataType = '',
) => {
const {
needUnit,
curveCenter,
nameWithSensor,
showGridLine,
showMarkLine,
showPoint,
deviceAlarmSchemes,
chartType,
showBoxOption,
restOption,
special,
} = handleDefault(config, cusOption);
const { leftNum, rightNum, yAxis } = handleYAxis({
dataSource,
needUnit,
curveCenter,
showGridLine,
});
const grid = handleGrid(dataSource, needUnit, leftNum, rightNum, chartType);
let { xAxis, series, visualMap } = returnXAxis({
dataSource,
contrast,
contrastOption,
nameWithSensor,
showMarkLine,
deviceAlarmSchemes,
showPoint,
smooth,
restOption,
special,
});
decorateAxisGridLine(xAxis, showGridLine);
const tooltipTimeFormat = !contrast
? 'YYYY-MM-DD HH:mm:ss'
: contrastOption === 'day'
? 'HH:mm'
: 'DD HH:mm';
let tooltip = {};
// 增加箱线图的逻辑，单曲线才存在该逻辑
if (chartType && showBoxOption) {
if (chartType === 'boxChart' && lineDataType === '特征曲线') {
const otherData =
dataSource?.[0]?.dataModel.map((item) => {
const { firstPV, lastPV, maxPV, minPV, pt } = item;
return [moment(pt).valueOf(), firstPV, lastPV, minPV, maxPV];
}) || []; //当存在othersData的时候，只是单曲线
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 };
});
series.push({
type: 'candlestick',
name: '箱线图',
symbol: 'none',
data: otherData,
itemStyle: {
color: '#FFA200',
color0: '#44CD00',
borderColor: '#FFA200',
borderColor0: '#44CD00',
},
});
tooltip = tooltipAccessor(unit);
}
if (chartType === 'lineChart' || lineDataType === '原始曲线') {
let _maxData = [];
let _minData = [];
let _currentYear = moment().format('YYYY');
const formatStr =
contrastOption === 'day'
? `${_currentYear}-01-01 HH:mm:00`
: `${_currentYear}-01-DD HH:mm:00`; // 用来做同期对比，把日期拉到同一区间
let _maxValues = [];
/**
* 生成泳道图，分两种情况
* 1. 当最大值最小值都是正数时；
* 2. 当最大值小于零时（此时，最小值一定小于零）；
*/
dataSource?.[0]?.dataModel.forEach((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 > 0 ? maxPV - minPV : minPV - maxPV).toFixed(2),
]);
_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' };
decorateAxisGridLine(xAxis, showGridLine);
let _unit = '';
series = series.map((item) => {
_unit = item.unit ?? '';
item.areaStyle = null;
return { ...item, showSymbol: false };
});
[[..._minData], [..._maxData]].forEach((item, index) => {
series.push({
name: index === 0 ? '周期最小值' : '周期最大值',
type: 'line',
data: item,
lineStyle: {
opacity: 0,
},
...(index !== 0
? {
areaStyle: {
color: series?.[0]?.itemStyle?.color ?? '#65a0d1',
opacity: 0.2,
},
}
: {}),
stack: 'confidence-band',
symbol: 'none',
});
});
tooltip = {
trigger: 'axis',
formatter: (e) => {
return `<div>
${headTemplate(e[0])}
<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>
<span style="color: ${COLOR.NORMAL};margin: 0 ${handlePx(5, 'px')} 0 auto;">${e[0]?.value?.[1] ?? '-'
}</span>
<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 style="color: ${COLOR.NORMAL};margin: 0 ${handlePx(
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;">
<div style="display: ${lineDataType === '特征曲线' ? 'flex' : 'none'
}; 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>
<span style="color: ${COLOR.AVG};margin: 0 ${handlePx(
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;">
<div style="display: ${lineDataType === '特征曲线' ? 'flex' : 'none'
}; 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>
<span style="color: ${COLOR.AVG};margin: 0 ${handlePx(
5,
'px',
)} 0 auto;">${_maxValues[e?.[2]?.dataIndex] ?? '-'}</span>
<span style="font-size: ${handlePx(12, 'px')};">${_unit ?? ''}</span>
</div>
</div>
</div>`;
},
};
}
// 单曲线需要标记最大值、最小值的情况下，需要增加自定义的series，将最大最小值显示在图表上
if (dataSource?.[0]?.dataModel?.length && chartType === 'lineChart') {
let _customSeries = returnCustomSeries(dataSource);
series.push(_customSeries)
}
} else {
tooltip = tooltipAccessor(series.map(item => item.unit), {contrastOption, contrast});
},
};
}
tooltip.timeFormat = tooltipTimeFormat;
let _legendData = series.filter(item => !['周期最大值', '周期最小值', '自定义'].includes(item.name)).map(item => item.name);
assignOptions(restOption, xAxis, _legendData, chartType, contrast, contrastOption);
let _options = {
yAxis,
grid,
xAxis,
series,
tooltip,
visualMap,
...restOption,
};
return _options
// 单曲线需要标记最大值、最小值的情况下，需要增加自定义的series，将最大最小值显示在图表上
if (dataSource?.[0]?.dataModel?.length && chartType === 'lineChart') {
let _customSeries = returnCustomSeries(dataSource);
series.push(_customSeries);
}
} else {
tooltip = tooltipAccessor(
series.map((item) => item.unit),
{ contrastOption, contrast },
);
}
tooltip.timeFormat = tooltipTimeFormat;
let _legendData = series
.filter((item) => !['周期最大值', '周期最小值', '自定义'].includes(item.name))
.map((item) => item.name);
assignOptions(restOption, xAxis, _legendData, chartType, contrast, contrastOption);
let _options = {
yAxis,
grid,
xAxis,
series,
tooltip,
visualMap,
...restOption,
};
return _options;
};
export default optionGenerator;
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