Skip to content

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

feat: 历史曲线优化表格数据下载的展示

parent 6eac50bd
Show whitespace changes
Inline Side-by-side
Showing with 166 additions and 113 deletions
packages/extend-components/EC_HistoryView/src/EC_HistoryView.md
View file @ 7dc9aad6
...@@ -24,6 +24,16 @@ path: / ...@@ -24,6 +24,16 @@ path: /
<code src="./demos/index.js"></code> <code src="./demos/index.js"></code>
## 单图表-状态
[//]: # (<code src="./demos/indexForStatus.js"></code>)
## 单图表-频率
<code src="./demos/indexForFrequency.js"></code>
[//]: # (## 移动端) [//]: # (## 移动端)
[//]: # (<code src="./demos/mobile.js"></code>) [//]: # (<code src="./demos/mobile.js"></code>)
......
packages/extend-components/EC_HistoryView/src/demos/index.js
View file @ 7dc9aad6
...@@ -4,12 +4,12 @@ import { MobileHistoryChart } from "../mobile"; ...@@ -4,12 +4,12 @@ import { MobileHistoryChart } from "../mobile";
const deviceParams = [ const deviceParams = [
/*10.182*/ /*10.182*/
/* { {
"deviceCode": "EGBF00000136", "deviceCode": "EGBF00000136",
// "sensors": "进水压力,出水压力,出水瞬时流量,今日供水量,1#水箱液位,视频报警", "sensors": "进水压力,出水压力,出水瞬时流量,今日供水量,1#水箱液位,视频报警",
"sensors": "视频报警", // "sensors": "视频报警",
"deviceType": "二供泵房" "deviceType": "二供泵房"
},*/ },
{ {
"deviceCode": "EGJZ00000158", "deviceCode": "EGJZ00000158",
// "sensors": "进水压力,出水压力,泵1状态", // "sensors": "进水压力,出水压力,泵1状态",
...@@ -71,11 +71,11 @@ const deviceParams = [ ...@@ -71,11 +71,11 @@ const deviceParams = [
"deviceType": "二供机组" "deviceType": "二供机组"
}*/ }*/
// 邳州张楼水厂 // 邳州张楼水厂
/* { /* {
"deviceCode": "SC00000023", "deviceCode": "SC00000023",
"sensors": "瞬时流量", "sensors": "瞬时流量",
"deviceType": "水厂" "deviceType": "水厂"
}, */ },*/
/* { /* {
"deviceCode": "JFJ00000001", "deviceCode": "JFJ00000001",
"sensors": "沉淀池投矾量瞬时,", "sensors": "沉淀池投矾量瞬时,",
...@@ -121,13 +121,16 @@ const deviceParams = [ ...@@ -121,13 +121,16 @@ const deviceParams = [
"deviceType": "二供泵房" "deviceType": "二供泵房"
}*/ }*/
]; ];
const Demo = () => { const Demo = () => {
return ( return (
<>
<div> <div>
<div style={{ height: 700 }}> <div style={{ height: 700 }}>
<HistoryView deviceParams={deviceParams} defaultModel="curve" /> <HistoryView deviceParams={deviceParams} defaultModel="curve" />
</div> </div>
</div> </div>
</>
); );
}; };
......
packages/extend-components/EC_HistoryView/src/demos/indexForFrequency.js 0 → 100644
View file @ 7dc9aad6
import React from 'react';
import HistoryView from '../index';
const deviceParams2 = [
{
deviceCode:'EGJZ00000223',
sensors: '1#变频器运行频率',
deviceType: '二供机组',
}
]
const Demo = () => {
return (
<>
<div>
<div style={{height: 700}}>
<HistoryView deviceParams={deviceParams2} defaultModel="curve"/>
</div>
</div>
</>
);
};
export default Demo;
\ No newline at end of file
packages/extend-components/EC_HistoryView/src/demos/indexForStatus.js 0 → 100644
View file @ 7dc9aad6
import React from 'react';
import HistoryView from '../index';
const deviceParams2 = [
{
"deviceCode": "EGJZ00000319",
// "sensors": "进水压力,出水压力,泵1状态",
// "sensors": "进水压力",
"sensors": "泵1状态",
"deviceType": "二供机组"
}
]
const Demo = () => {
return (
<>
<div>
<div style={{height: 700}}>
<HistoryView deviceParams={deviceParams2} defaultModel="curve"/>
</div>
</div>
</>
);
};
export default Demo;
\ No newline at end of file
packages/extend-components/EC_HistoryView/src/index.js
View file @ 7dc9aad6
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 PropTypes from 'prop-types';
import classNames from 'classnames'; import classNames from 'classnames';
import { import {
...@@ -34,12 +34,12 @@ import { ...@@ -34,12 +34,12 @@ import {
import SingleChart from './SingleChart'; import SingleChart from './SingleChart';
import GridChart from './GridChart'; import GridChart from './GridChart';
import './index.less'; import './index.less';
import { globalConfig } from 'antd/lib/config-provider'; import {globalConfig} from 'antd/lib/config-provider';
import { getSensorType } from "./apis/index"; import {getSensorType} from "./apis/index";
import { ExportExcel } from '@wisdom-components/exportexcel'; import {ExportExcel} from '@wisdom-components/exportexcel';
const { RangePicker } = DatePicker; const {RangePicker} = DatePicker;
const { Option } = Select; const {Option} = Select;
const startFormat = 'YYYY-MM-DD 00:00:00'; const startFormat = 'YYYY-MM-DD 00:00:00';
const endFormat = 'YYYY-MM-DD 23:59:59'; const endFormat = 'YYYY-MM-DD 23:59:59';
...@@ -265,7 +265,7 @@ const OriginMaxDays = 31; // 原始曲线请求数据的最大天数 ...@@ -265,7 +265,7 @@ const OriginMaxDays = 31; // 原始曲线请求数据的最大天数
const CharacteristicMaxDays = null; // 特征曲线或者其他曲线的最大天数 const CharacteristicMaxDays = null; // 特征曲线或者其他曲线的最大天数
const HistoryView = (props) => { const HistoryView = (props) => {
const [completeInit, setCompleteInit] = useState(false); const [completeInit, setCompleteInit] = useState(false);
const { getPrefixCls } = useContext(ConfigProvider.ConfigContext); const {getPrefixCls} = useContext(ConfigProvider.ConfigContext);
const prefixCls = getPrefixCls('history-view'); const prefixCls = getPrefixCls('history-view');
const { const {
title, title,
...@@ -458,13 +458,13 @@ const HistoryView = (props) => { ...@@ -458,13 +458,13 @@ const HistoryView = (props) => {
onContrastChange(contrastOption); onContrastChange(contrastOption);
setShowBoxOption(false); setShowBoxOption(false);
setChartType('lineChart'); setChartType('lineChart');
onCheckboxChange({ target: { value: false } }, 'chartType'); onCheckboxChange({target: {value: false}}, 'chartType');
onCheckboxChange({ target: { value: false } }, 'ignoreOutliers'); onCheckboxChange({target: {value: false}}, 'ignoreOutliers');
} else { } else {
// 自定义 // 自定义
// 不需要处理 // 不需要处理
setShowBoxOption(true); setShowBoxOption(true);
onCheckboxChange({ target: { value: true } }, 'chartType'); onCheckboxChange({target: {value: true}}, 'chartType');
} }
}; };
const onShortcutsChange = (e) => { const onShortcutsChange = (e) => {
...@@ -474,37 +474,37 @@ const HistoryView = (props) => { ...@@ -474,37 +474,37 @@ const HistoryView = (props) => {
switch (_val) { switch (_val) {
case '近3天': case '近3天':
_arr = [ _arr = [
{ key: 1, value: moment() }, {key: 1, value: moment()},
{ key: 2, value: moment().subtract(1, 'days') }, {key: 2, value: moment().subtract(1, 'days')},
{ key: 3, value: moment().subtract(2, 'days') }, {key: 3, value: moment().subtract(2, 'days')},
] ]
break; break;
case '近7天': case '近7天':
_arr = [ _arr = [
{ key: 1, value: moment() }, {key: 1, value: moment()},
{ key: 2, value: moment().subtract(1, 'days') }, {key: 2, value: moment().subtract(1, 'days')},
{ key: 3, value: moment().subtract(2, 'days') }, {key: 3, value: moment().subtract(2, 'days')},
{ key: 4, value: moment().subtract(3, 'days') }, {key: 4, value: moment().subtract(3, 'days')},
{ key: 5, value: moment().subtract(4, 'days') }, {key: 5, value: moment().subtract(4, 'days')},
{ key: 6, value: moment().subtract(5, 'days') }, {key: 6, value: moment().subtract(5, 'days')},
{ key: 7, value: moment().subtract(6, 'days') }, {key: 7, value: moment().subtract(6, 'days')},
] ]
break; break;
case '近3月': case '近3月':
_arr = [ _arr = [
{ key: 1, value: moment() }, {key: 1, value: moment()},
{ key: 2, value: moment().subtract(1, 'months') }, {key: 2, value: moment().subtract(1, 'months')},
{ key: 3, value: moment().subtract(2, 'months') }, {key: 3, value: moment().subtract(2, 'months')},
] ]
break; break;
case '近6月': case '近6月':
_arr = [ _arr = [
{ key: 1, value: moment() }, {key: 1, value: moment()},
{ key: 2, value: moment().subtract(1, 'months') }, {key: 2, value: moment().subtract(1, 'months')},
{ key: 3, value: moment().subtract(2, 'months') }, {key: 3, value: moment().subtract(2, 'months')},
{ key: 4, value: moment().subtract(3, 'months') }, {key: 4, value: moment().subtract(3, 'months')},
{ key: 5, value: moment().subtract(4, 'months') }, {key: 5, value: moment().subtract(4, 'months')},
{ key: 6, value: moment().subtract(5, 'months') }, {key: 6, value: moment().subtract(5, 'months')},
] ]
break; break;
} }
...@@ -567,7 +567,7 @@ const HistoryView = (props) => { ...@@ -567,7 +567,7 @@ const HistoryView = (props) => {
)} )}
{timeValue === 'contrast' && ( // 同期对比 {timeValue === 'contrast' && ( // 同期对比
<> <>
<Select value={contrastOption} style={{ width: 60 }} onChange={onContrastChange}> <Select value={contrastOption} style={{width: 60}} onChange={onContrastChange}>
<Option value="day">日</Option> <Option value="day">日</Option>
<Option value="month" disabled={lineDataType === '原始曲线'}>月</Option> <Option value="month" disabled={lineDataType === '原始曲线'}>月</Option>
</Select> </Select>
...@@ -592,14 +592,14 @@ const HistoryView = (props) => { ...@@ -592,14 +592,14 @@ const HistoryView = (props) => {
picker={contrastOption === 'day' ? undefined : contrastOption} picker={contrastOption === 'day' ? undefined : contrastOption}
value={child.value} value={child.value}
onChange={(date, dateString) => onContrastPickerChange(date, dateString, child)} 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 && ( {datePickerArr.length > 2 && (
<div <div
className={classNames(`${prefixCls}-contrast-delete`)} className={classNames(`${prefixCls}-contrast-delete`)}
onClick={() => handleDeleteDatePicker(index)} onClick={() => handleDeleteDatePicker(index)}
> >
<CloseCircleFilled /> <CloseCircleFilled/>
</div> </div>
)} )}
</div> </div>
...@@ -608,7 +608,7 @@ const HistoryView = (props) => { ...@@ -608,7 +608,7 @@ const HistoryView = (props) => {
)} )}
</div> </div>
))} ))}
{datePickerArr.length < 4 && <PlusCircleOutlined onClick={handleAddDatePicker} />} {datePickerArr.length < 4 && <PlusCircleOutlined onClick={handleAddDatePicker}/>}
</> </>
)} )}
</div> </div>
...@@ -678,12 +678,12 @@ const HistoryView = (props) => { ...@@ -678,12 +678,12 @@ const HistoryView = (props) => {
</Checkbox> </Checkbox>
{child.tooltip && ( {child.tooltip && (
<Tooltip title={child.tooltip}> <Tooltip title={child.tooltip}>
<QuestionCircleFilled className={`${prefixCls}-question`} /> <QuestionCircleFilled className={`${prefixCls}-question`}/>
</Tooltip> </Tooltip>
)} )}
{ {
child.hasSub && child.checked && false ? child.hasSub && child.checked && false ?
<Select style={{ width: 80, marginLeft: 10 }} value={algorithmValue} <Select style={{width: 80, marginLeft: 10}} value={algorithmValue}
onChange={(e) => setAlgorithmValue(e)}> onChange={(e) => setAlgorithmValue(e)}>
<Option value={1}>低</Option> <Option value={1}>低</Option>
<Option value={5}>中</Option> <Option value={5}>中</Option>
...@@ -699,7 +699,7 @@ const HistoryView = (props) => { ...@@ -699,7 +699,7 @@ const HistoryView = (props) => {
return ( return (
<div <div
className={classNames(`${prefixCls}-cover`)} className={classNames(`${prefixCls}-cover`)}
style={isChart && isSingle ? { width: '100%' } : {}} style={isChart && isSingle ? {width: '100%'} : {}}
> >
{ {
isChart && !isStatus ? <> isChart && !isStatus ? <>
...@@ -714,7 +714,7 @@ const HistoryView = (props) => { ...@@ -714,7 +714,7 @@ const HistoryView = (props) => {
</Radio.Group> </Radio.Group>
{/*<Segmented value={lineDataType} options={['特征曲线', '原始曲线']} onChange={switchLineDataType}/>*/} {/*<Segmented value={lineDataType} options={['特征曲线', '原始曲线']} onChange={switchLineDataType}/>*/}
<Tooltip title={'原始曲线数据量较大，单次查询最多展示1万条数据'}> <Tooltip title={'原始曲线数据量较大，单次查询最多展示1万条数据'}>
<QuestionCircleFilled style={{ marginLeft: 6 }} className={`${prefixCls}-question`} /> <QuestionCircleFilled style={{marginLeft: 6}} className={`${prefixCls}-question`}/>
</Tooltip> </Tooltip>
</div> </div>
</> : '' </> : ''
...@@ -723,14 +723,14 @@ const HistoryView = (props) => { ...@@ -723,14 +723,14 @@ const HistoryView = (props) => {
<> <>
{ {
lineDataType !== '原始曲线' ? <> lineDataType !== '原始曲线' ? <>
<div style={{ marginLeft: 7 }} className={classNames(`${prefixCls}-label`)}>曲线形态</div> <div style={{marginLeft: 7}} className={classNames(`${prefixCls}-label`)}>曲线形态</div>
<Radio.Group <Radio.Group
value={chartType} value={chartType}
style={{ marginRight: 16 }} style={{marginRight: 16}}
onChange={(e) => { onChange={(e) => {
let _value = e.target.value; let _value = e.target.value;
setChartType(_value); setChartType(_value);
onCheckboxChange({ target: { value: _value !== 'boxChart' } }, 'chartType'); onCheckboxChange({target: {value: _value !== 'boxChart'}}, 'chartType');
}} }}
> >
<Radio.Button value={'lineChart'}>线形图</Radio.Button> <Radio.Button value={'lineChart'}>线形图</Radio.Button>
...@@ -760,7 +760,7 @@ const HistoryView = (props) => { ...@@ -760,7 +760,7 @@ const HistoryView = (props) => {
{activeTabKey === 'table' && ( {activeTabKey === 'table' && (
<Select <Select
value={dataThinKey} value={dataThinKey}
style={{ width: 90 }} style={{width: 90}}
onChange={onTimeIntervalChange} onChange={onTimeIntervalChange}
disabled={!dataConfig.dataThin} disabled={!dataConfig.dataThin}
> >
...@@ -823,7 +823,7 @@ const HistoryView = (props) => { ...@@ -823,7 +823,7 @@ const HistoryView = (props) => {
} }
return timeOrder === 'ascend' ? moment(_a) - moment(_b) : moment(_b) - moment(_a); return timeOrder === 'ascend' ? moment(_a) - moment(_b) : moment(_b) - moment(_a);
}) })
let _columns = columns; let _columns = [...columns];
let timeFrom = dateRange?.[0]?.dateFrom || moment().format(startFormat); let timeFrom = dateRange?.[0]?.dateFrom || moment().format(startFormat);
let timeTo = dateRange?.[0]?.dateTo || moment().format(timeFormat); let timeTo = dateRange?.[0]?.dateTo || moment().format(timeFormat);
let fileName = `特征数据-${moment(timeFrom).format( let fileName = `特征数据-${moment(timeFrom).format(
...@@ -833,8 +833,9 @@ const HistoryView = (props) => { ...@@ -833,8 +833,9 @@ const HistoryView = (props) => {
let _titleWidth = []; let _titleWidth = [];
let _title = _columns.map(item => { let _title = _columns.map(item => {
_dataIndex.push(item.dataIndex); _dataIndex.push(item.dataIndex);
_titleWidth.push(item.title.length*1); let _titleStr = [item.name, item.title].filter(item => item).join('-');
return item.title; _titleWidth.push(_titleStr.length * 1);
return _titleStr;
}); });
ExportExcel({ ExportExcel({
name: fileName, name: fileName,
...@@ -842,7 +843,7 @@ const HistoryView = (props) => { ...@@ -842,7 +843,7 @@ const HistoryView = (props) => {
sheetData: _dataSource, sheetData: _dataSource,
sheetFilter: _dataIndex, sheetFilter: _dataIndex,
sheetHeader: _title, sheetHeader: _title,
columnWidths:_titleWidth columnWidths: _titleWidth
}] }]
}) })
}; };
...@@ -851,7 +852,7 @@ const HistoryView = (props) => { ...@@ -851,7 +852,7 @@ const HistoryView = (props) => {
// data = data.filter(item => item.sensorName !== '是否在线'); // data = data.filter(item => item.sensorName !== '是否在线');
const ignoreOutliers = checkboxData.find((item) => item.key === 'ignoreOutliers').checked; const ignoreOutliers = checkboxData.find((item) => item.key === 'ignoreOutliers').checked;
const dataIndexAccess = (dataItem, index) => { const dataIndexAccess = (dataItem, index) => {
const { stationCode, sensorName } = dataItem; const {stationCode, sensorName} = dataItem;
return `${stationCode}-${sensorName}-${index}`; return `${stationCode}-${sensorName}-${index}`;
}; };
...@@ -862,7 +863,7 @@ const HistoryView = (props) => { ...@@ -862,7 +863,7 @@ const HistoryView = (props) => {
// 判断是否是单设备，单设备则不显示设备名称 // 判断是否是单设备，单设备则不显示设备名称
// 处理表头数据 // 处理表头数据
const columnsData = data.map((item, index) => { 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); const dataIndex = dataIndexAccess(item, index);
let _title = ''; let _title = '';
if (deviceConfig.current.oneDevice) { if (deviceConfig.current.oneDevice) {
...@@ -876,7 +877,8 @@ const HistoryView = (props) => { ...@@ -876,7 +877,8 @@ const HistoryView = (props) => {
key: dataIndex, key: dataIndex,
ellipsis: true, ellipsis: true,
align: 'center', align: 'center',
width: 200 width: 200,
name: equipmentName
}; };
// 同期对比 // 同期对比
if (timeValue === 'contrast' && dataModel[0]) { if (timeValue === 'contrast' && dataModel[0]) {
...@@ -891,15 +893,16 @@ const HistoryView = (props) => { ...@@ -891,15 +893,16 @@ const HistoryView = (props) => {
// 格式化时间对齐数据, 生成行数 // 格式化时间对齐数据, 生成行数
const timeData = {}; const timeData = {};
const buildDefaultData = (time) => { const buildDefaultData = (time) => {
const obj = { key: time, time: time }; const obj = {key: time, time: time};
data.forEach((item, index) => { data.forEach((item, index) => {
const dataIndex = dataIndexAccess(item, index); const dataIndex = dataIndexAccess(item, index);
obj[dataIndex] = ''; obj[dataIndex] = '';
obj.name = item.equipmentName;
}); });
return obj; return obj;
}; };
data.forEach((item, index) => { data.forEach((item, index) => {
const { stationCode, sensorName, dataModel } = item; const {stationCode, sensorName, dataModel} = item;
dataModel && dataModel &&
dataModel.forEach((data) => { dataModel.forEach((data) => {
const formatTime = moment(data.pt).format(format); const formatTime = moment(data.pt).format(format);
...@@ -912,10 +915,9 @@ const HistoryView = (props) => { ...@@ -912,10 +915,9 @@ const HistoryView = (props) => {
timeData[formatTime] = timeData[formatTime] || buildDefaultData(time); timeData[formatTime] = timeData[formatTime] || buildDefaultData(time);
}); });
}); });
// 处理表格数据 // 处理表格数据
data.forEach((child, index) => { data.forEach((child, index) => {
const { dataModel } = child; const {dataModel} = child;
const dataIndex = dataIndexAccess(child, index); const dataIndex = dataIndexAccess(child, index);
dataModel && dataModel &&
dataModel.forEach((value, j) => { dataModel.forEach((value, j) => {
...@@ -964,40 +966,40 @@ const HistoryView = (props) => { ...@@ -964,40 +966,40 @@ const HistoryView = (props) => {
}; };
const handleDataThinKey = (diffYears, diffDays, diffHours, lineDataType) => { const handleDataThinKey = (diffYears, diffDays, diffHours, lineDataType) => {
if (lineDataType === '原始曲线') { if (lineDataType === '原始曲线') {
return { unit: '', zoom: '' } return {unit: '', zoom: ''}
} }
// edit by zy 根据选择的时长控制抽稀频度 // edit by zy 根据选择的时长控制抽稀频度
if (diffYears > 0) { if (diffYears > 0) {
if (diffYears === 1) return { unit: 'h', zoom: '24' } if (diffYears === 1) return {unit: 'h', zoom: '24'}
return { unit: 'h', zoom: '48' } return {unit: 'h', zoom: '48'}
} else if (diffYears === 0 && diffDays > 0) { } else if (diffYears === 0 && diffDays > 0) {
if (diffDays > 90) return { unit: 'h', zoom: '24' } if (diffDays > 90) return {unit: 'h', zoom: '24'}
if (diffDays > 30) return { unit: 'h', zoom: '6' } if (diffDays > 30) return {unit: 'h', zoom: '4'}
if (diffDays > 15) return { unit: 'h', zoom: '4' } if (diffDays > 15) return {unit: 'h', zoom: '2'}
if (diffDays > 7) return { unit: 'h', zoom: '1' } if (diffDays > 7) return {unit: 'h', zoom: '1'}
if (diffDays > 3) return { unit: 'min', zoom: '30' } if (diffDays > 3) return {unit: 'min', zoom: '20'}
if (diffDays > 1) return { unit: 'min', zoom: '15' } if (diffDays > 1) return {unit: 'min', zoom: '15'}
if (diffDays === 1) return { unit: 'min', zoom: '5' } if (diffDays === 1) return {unit: 'min', zoom: '5'}
} else if (diffYears === 0 && diffDays === 0 && diffHours > 0) { } else if (diffYears === 0 && diffDays === 0 && diffHours > 0) {
if (diffHours > 12) return { unit: 'min', zoom: '5' } if (diffHours > 12) return {unit: 'min', zoom: '5'}
if (diffHours > 4) return { unit: 'min', zoom: '1' } if (diffHours > 4) return {unit: 'min', zoom: '1'}
if (diffHours > 1) return { unit: 's', zoom: '30' } if (diffHours > 1) return {unit: 's', zoom: '30'}
if (diffHours > 0) return { unit: 's', zoom: '5' } if (diffHours > 0) return {unit: 's', zoom: '5'}
return { unit: 's', zoom: '5' } return {unit: 's', zoom: '5'}
} else { } else {
return { unit: '', zoom: '' } return {unit: '', zoom: ''}
} }
}; };
// 处理接口服务参数的变化 // 处理接口服务参数的变化
const onChangeParams = (value = {}) => { const onChangeParams = (value = {}) => {
const { dateRange, isDilute, ignoreOutliers, zoom, unit } = value; const {dateRange, isDilute, ignoreOutliers, zoom, unit} = value;
const requestArr = []; const requestArr = [];
const acrossTables = []; const acrossTables = [];
const zoomArray = []; const zoomArray = [];
deviceParams deviceParams
.map((item) => { .map((item) => {
let _item = { ...item }; let _item = {...item};
// 历史曲线中，是否在线暂时去除，不显示 要显示是否在线解开这里即可 2023-09-15 // 历史曲线中，是否在线暂时去除，不显示 要显示是否在线解开这里即可 2023-09-15
/* _item.sensors = /* _item.sensors =
item.sensors && !item.sensors.includes('是否在线') item.sensors && !item.sensors.includes('是否在线')
...@@ -1037,7 +1039,7 @@ const HistoryView = (props) => { ...@@ -1037,7 +1039,7 @@ const HistoryView = (props) => {
let diffHours = moment(item.dateTo).diff(moment(item.dateFrom), 'hours'); let diffHours = moment(item.dateTo).diff(moment(item.dateFrom), 'hours');
let zoomParam = activeTabKey === 'curve' ? handleDataThinKey(diffYears, diffDays, diffHours, lineDataType) : {}; let zoomParam = activeTabKey === 'curve' ? handleDataThinKey(diffYears, diffDays, diffHours, lineDataType) : {};
zoomArray.push(zoomParam); zoomArray.push(zoomParam);
requestArr.push(getHistoryInfo({ ...param, ...zoomParam })); requestArr.push(getHistoryInfo({...param, ...zoomParam}));
}); });
setLoading(true); setLoading(true);
Promise.all(requestArr).then((results) => { Promise.all(requestArr).then((results) => {
...@@ -1045,7 +1047,7 @@ const HistoryView = (props) => { ...@@ -1045,7 +1047,7 @@ const HistoryView = (props) => {
if (results.length) { if (results.length) {
let data = []; let data = [];
results.forEach((res, index) => { results.forEach((res, index) => {
const { dateFrom, dateTo } = dateRange?.[index] ?? {}; const {dateFrom, dateTo} = dateRange?.[index] ?? {};
if (res.code === 0 && res.data.length) { if (res.code === 0 && res.data.length) {
res.data.forEach((d) => { res.data.forEach((d) => {
d.dateFrom = dateFrom || ''; d.dateFrom = dateFrom || '';
...@@ -1088,7 +1090,7 @@ const HistoryView = (props) => { ...@@ -1088,7 +1090,7 @@ const HistoryView = (props) => {
useEffect(() => { useEffect(() => {
if (!completeInit) return; if (!completeInit) return;
const { dataThin, ignoreOutliers, zoom, unit } = dataConfig; const {dataThin, ignoreOutliers, zoom, unit} = dataConfig;
beforChangeParams().finally(() => { beforChangeParams().finally(() => {
onChangeParams({ onChangeParams({
isDilute: dataThin, isDilute: dataThin,
...@@ -1133,10 +1135,10 @@ const HistoryView = (props) => { ...@@ -1133,10 +1135,10 @@ const HistoryView = (props) => {
{...tableProps} {...tableProps}
pagination={false} pagination={false}
onChange={handleChange} onChange={handleChange}
scroll={{ x: 'max-content', y: 'calc(100% - 40px)' }} scroll={{x: 'max-content', y: 'calc(100% - 40px)'}}
/> />
) : ( ) : (
<PandaEmpty /> <PandaEmpty/>
)} )}
</div> </div>
</> </>
...@@ -1175,11 +1177,11 @@ const HistoryView = (props) => { ...@@ -1175,11 +1177,11 @@ const HistoryView = (props) => {
</div> </div>
{ {
lineDataType === '原始曲线' && false ? lineDataType === '原始曲线' && false ?
<div style={{ marginTop: 10 }}>展示区间：{returnLongestPeriod(chartDataSource)}</div> : '' <div style={{marginTop: 10}}>展示区间：{returnLongestPeriod(chartDataSource)}</div> : ''
} }
<div className={`${prefixCls}-content`}> <div className={`${prefixCls}-content`}>
{!chartDataSource.length ? ( {!chartDataSource.length ? (
<PandaEmpty /> <PandaEmpty/>
) : grid === true ? ( ) : grid === true ? (
<GridChart <GridChart
curveCenter={curveCenter} curveCenter={curveCenter}
...@@ -1221,7 +1223,7 @@ const HistoryView = (props) => { ...@@ -1221,7 +1223,7 @@ const HistoryView = (props) => {
// 非单曲线、单指标不执行 // 非单曲线、单指标不执行
if (deviceParams?.length !== 1 || (deviceParams?.length === 1 && deviceParams?.[0]?.sensors?.split(',')?.length > 1)) return setCompleteInit(true); if (deviceParams?.length !== 1 || (deviceParams?.length === 1 && deviceParams?.[0]?.sensors?.split(',')?.length > 1)) return setCompleteInit(true);
setLoading(true); setLoading(true);
const { deviceCode, deviceType, sensors } = deviceParams[0]; const {deviceCode, deviceType, sensors} = deviceParams[0];
let _id = (await getPointAddress({ let _id = (await getPointAddress({
code: deviceCode code: deviceCode
}))?.data?.[0]?.id; }))?.data?.[0]?.id;
...@@ -1248,7 +1250,7 @@ const HistoryView = (props) => { ...@@ -1248,7 +1250,7 @@ const HistoryView = (props) => {
return final return final
}, {}); }, {});
let _checkboxData = [...checkboxData].map(item => { let _checkboxData = [...checkboxData].map(item => {
let _item = { ...item }; let _item = {...item};
if (_opt[item.label] !== undefined) { if (_opt[item.label] !== undefined) {
_item.checked = _opt[item.label] === 'true' _item.checked = _opt[item.label] === 'true'
} }
...@@ -1312,7 +1314,7 @@ const HistoryView = (props) => { ...@@ -1312,7 +1314,7 @@ const HistoryView = (props) => {
}, [loading]) }, [loading])
return ( return (
<div className={classNames(prefixCls, 'wkt-scroll-light')}> <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`)}> (loading || percent !== 0) ? <div className={classNames(`${prefixCls}-progressWrapper`)}>
<div className={classNames(`${prefixCls}-contentWrapper`)}> <div className={classNames(`${prefixCls}-contentWrapper`)}>
...@@ -1321,9 +1323,9 @@ const HistoryView = (props) => { ...@@ -1321,9 +1323,9 @@ const HistoryView = (props) => {
<Progress percent={percent} <Progress percent={percent}
steps={20} steps={20}
className={classNames(`${prefixCls}-progress`, `${prefixCls}-blink-2`)} className={classNames(`${prefixCls}-progress`, `${prefixCls}-blink-2`)}
showInfo={false} /> showInfo={false}/>
<div className={classNames(`${prefixCls}-tip`)}>加载中...</div> <div className={classNames(`${prefixCls}-tip`)}>加载中...</div>
</> : <Spin spinning={loading || false} /> </> : <Spin spinning={loading || false}/>
} }
</div> </div>
...@@ -1344,11 +1346,11 @@ const HistoryView = (props) => { ...@@ -1344,11 +1346,11 @@ const HistoryView = (props) => {
{activeTabKey === 'table' && ( {activeTabKey === 'table' && (
<> <>
<Button type="link" onClick={exportFeatureBtn}> <Button type="link" onClick={exportFeatureBtn}>
<DownloadOutlined /> <DownloadOutlined/>
特征数据 特征数据
</Button> </Button>
<Button type="link" onClick={exportExcelBtn}> <Button type="link" onClick={exportExcelBtn}>
<DownloadOutlined /> <DownloadOutlined/>
原始数据 原始数据
</Button> </Button>
</> </>
......
packages/extend-components/EC_HistoryView/src/utils.js
View file @ 7dc9aad6
...@@ -594,7 +594,6 @@ const handleDefault = (config, cusOption) => { ...@@ -594,7 +594,6 @@ const handleDefault = (config, cusOption) => {
const showPoint = _.get(config, 'showPoint', false); const showPoint = _.get(config, 'showPoint', false);
const deviceAlarmSchemes = _.get(config, 'deviceAlarmSchemes', []); const deviceAlarmSchemes = _.get(config, 'deviceAlarmSchemes', []);
const chartType = _.get(config, 'chartType', null); const chartType = _.get(config, 'chartType', null);
// const justLine = _.get(config, 'justLine', false);
const showBoxOption = _.get(config, 'showBoxOption', false); const showBoxOption = _.get(config, 'showBoxOption', false);
// 自定义属性 // 自定义属性
const restOption = _.pick(cusOption, ['title', 'legend']); const restOption = _.pick(cusOption, ['title', 'legend']);
...@@ -683,17 +682,9 @@ const handleYAxis = ({dataSource, needUnit, curveCenter, showGridLine}) => { ...@@ -683,17 +682,9 @@ const handleYAxis = ({dataSource, needUnit, curveCenter, showGridLine}) => {
const {sensorName, unit} = item; const {sensorName, unit} = item;
const key = sensorName; const key = sensorName;
if (!yAxisMap.has(key)) { 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 = { const axis = {
type: 'value', type: 'value',
name: needUnit ? unit : null, name: needUnit ? unit : null,
// position: i % 2 === 0 ? 'left' : 'right',
// offset: _offset !== undefined ? (_offset === 0? 2:_offset.toString().length) * 10 : 0,
// offset: _finalOffset,
axisLabel: { axisLabel: {
formatter: (value) => { formatter: (value) => {
return handleMaxValue(value); return handleMaxValue(value);
...@@ -780,9 +771,7 @@ const assignOptions = (restOption, xAxis, legendData, chartType, contrast, contr ...@@ -780,9 +771,7 @@ const assignOptions = (restOption, xAxis, legendData, chartType, contrast, contr
restOption.legend = { restOption.legend = {
...{ ...{
show: true, show: true,
// data: legend, right:10,
// selectedMode: false,
left: 'right',
top: 30, top: 30,
icon: 'rect', icon: 'rect',
itemWidth: 14, itemWidth: 14,
...@@ -836,10 +825,8 @@ const handleGrid = (dataSource, needUnit, leftNum, rightNum, chartType) => { ...@@ -836,10 +825,8 @@ const handleGrid = (dataSource, needUnit, leftNum, rightNum, chartType) => {
let _topForUnit = needUnit ? 20 : 0; let _topForUnit = needUnit ? 20 : 0;
return { return {
top: _base + _topForUnit, top: _base + _topForUnit,
// left: leftNum === 1 ? 10 : leftNum * AXIS_WIDTH,
left: 30, left: 30,
right: 10, right: 10,
// right: rightNum === 0 ? 20 : rightNum * AXIS_WIDTH,
bottom: 60, bottom: 60,
containLabel: true, containLabel: true,
}; };
...@@ -1007,7 +994,7 @@ const optionGenerator = ( ...@@ -1007,7 +994,7 @@ const optionGenerator = (
: 'DD HH:mm'; : 'DD HH:mm';
let tooltip = {}; let tooltip = {};
// 增加箱线图的逻辑，单曲线才存在该逻辑 // 增加箱线图的逻辑，单曲线才存在该逻辑
if (chartType && showBoxOption) { if (chartType && showBoxOption && !special?.special1?.name) {
if (chartType === 'boxChart' && lineDataType === '特征曲线') { if (chartType === 'boxChart' && lineDataType === '特征曲线') {
const otherData = const otherData =
dataSource?.[0]?.dataModel.map((item) => { dataSource?.[0]?.dataModel.map((item) => {
...@@ -1022,7 +1009,8 @@ const optionGenerator = ( ...@@ -1022,7 +1009,8 @@ const optionGenerator = (
item.areaStyle = null; item.areaStyle = null;
return {...item, showSymbol: false}; return {...item, showSymbol: false};
}); });
series.push({ // 箱线图去除曲线 2023年10月17日
series=[{
type: 'candlestick', type: 'candlestick',
name: '箱线图', name: '箱线图',
symbol: 'none', symbol: 'none',
...@@ -1033,7 +1021,7 @@ const optionGenerator = ( ...@@ -1033,7 +1021,7 @@ const optionGenerator = (
borderColor: '#FFA200', borderColor: '#FFA200',
borderColor0: '#44CD00', borderColor0: '#44CD00',
}, },
}); }];
tooltip = tooltipAccessor(unit); tooltip = tooltipAccessor(unit);
} }
if (chartType === 'lineChart' || lineDataType === '原始曲线') { if (chartType === 'lineChart' || lineDataType === '原始曲线') {
...@@ -1160,8 +1148,8 @@ const optionGenerator = ( ...@@ -1160,8 +1148,8 @@ const optionGenerator = (
return _options; return _options;
}; };
export default optionGenerator; export default optionGenerator;
const handleDataSource = (dataSource) => { const handleDataSource = (dataSource) => {
let _temp = null; let _temp = null;
let _data = []; let _data = [];
...@@ -1226,14 +1214,14 @@ const handleSpecial2 = (special, sensorName, sensorType, data1, data2) => { ...@@ -1226,14 +1214,14 @@ const handleSpecial2 = (special, sensorName, sensorType, data1, data2) => {
name = _switchNameMap[data1.pv]; name = _switchNameMap[data1.pv];
color = _switchColorMap[data1.pv]; color = _switchColorMap[data1.pv];
} }
;
value1 = moment(data1.pt).valueOf(); value1 = moment(data1.pt).valueOf();
value2 = moment(data2.pt).valueOf(); value2 = moment(data2.pt).valueOf();
return {color, value1, value2, name} return {color, value1, value2, name}
}; };
const handleDataToSeries = (special, sensorName, sensorType, data) => { const handleDataToSeries = (special, sensorName, sensorType, data) => {
let _data = []; let _data = [];
let _legend = [] let _legend = [];
data.forEach((item, index) => { data.forEach((item, index) => {
if (index === data.length - 1) return; if (index === data.length - 1) return;
let {color, value1, value2, name} = handleSpecial2(special, sensorName, sensorType, item, data[index + 1]) let {color, value1, value2, name} = handleSpecial2(special, sensorName, sensorType, item, data[index + 1])
...@@ -1286,7 +1274,7 @@ const specialTypeChartOptionGenerator = ({dataSource, cusOption, contrast, contr ...@@ -1286,7 +1274,7 @@ const specialTypeChartOptionGenerator = ({dataSource, cusOption, contrast, contr
splitLine: { splitLine: {
show: true show: true
}, },
"minInterval": 3600000 minInterval: 3600 * 1000
}; };
let yAxis = { let yAxis = {
data: [dataSource[0].sensorName], data: [dataSource[0].sensorName],
...@@ -1355,13 +1343,13 @@ const specialTypeChartOptionGenerator = ({dataSource, cusOption, contrast, contr ...@@ -1355,13 +1343,13 @@ const specialTypeChartOptionGenerator = ({dataSource, cusOption, contrast, contr
show: true, show: true,
data: legend, data: legend,
selectedMode: false, selectedMode: false,
left: 'right', right: 10,
top: 30, top: 30,
icon: 'rect', icon: 'rect',
itemWidth: 14, itemWidth: 14,
itemHeight: 8, itemHeight: 8,
itemGap: 20, itemGap: 20,
} };
let _option = { let _option = {
xAxis, xAxis,
yAxis, yAxis,
......
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