Skip to content

W
wisdom-components
Commit 4f2c54ff authored by 陈龙's avatar 陈龙
Browse files
Options

feat: 表格使用虚拟列表；表格支持不抽稀

parent 385ddc9c
Show whitespace changes
Inline Side-by-side
Showing with 255 additions and 95 deletions
package.json
View file @ 4f2c54ff
...@@ -176,7 +176,9 @@ ...@@ -176,7 +176,9 @@
"parseForm": "1.0.0", "parseForm": "1.0.0",
"react-redux": "^8.0.5", "react-redux": "^8.0.5",
"react-resizable": "^3.0.4", "react-resizable": "^3.0.4",
"sha1": "^1.1.1" "sha1": "^1.1.1",
"rc-resize-observer": "1.4.0",
"react-window": "1.8.9"
}, },
"size-limit": [ "size-limit": [
{ {
......
packages/extend-components/EC_HistoryView/src/EC_HistoryView.md
View file @ 4f2c54ff
...@@ -30,7 +30,7 @@ path: / ...@@ -30,7 +30,7 @@ path: /
## 单图表-频率 ## 单图表-频率
<code src="./demos/indexForFrequency.js"></code> [//]: # (<code src="./demos/indexForFrequency.js"></code>)
......
packages/extend-components/EC_HistoryView/src/VirtualTable.js 0 → 100644
View file @ 4f2c54ff
import React, {useRef, useState, useEffect} from 'react';
import BasicTable from "@wisdom-components/basictable";
import classNames from 'classnames';
import ResizeObserver from 'rc-resize-observer';
import {VariableSizeGrid as Grid} from 'react-window';
import './VirtualTable.less';
const VirtualTable = (props) => {
const TABLE_ROW_HEIGHT = 40;
const {columns, scroll} = props;
const [tableWidth, setTableWidth] = useState(0);
const widthColumnCount = columns.filter(({width}) => !width).length;
const totalWidth = columns.reduce((final, curr) => {
return final += (curr.width ?? 0)
}, 0);
const mergedColumns = columns.map((column) => {
if (totalWidth < tableWidth) {
return {
...column,
width: Math.floor(tableWidth / totalWidth * column.width),
};
}
if (column.width) {
return column;
}
return {
...column,
width: Math.floor(tableWidth / widthColumnCount),
};
});
const gridRef = useRef();
const [connectObject] = useState(() => {
const obj = {};
Object.defineProperty(obj, 'scrollLeft', {
get: () => {
if (gridRef.current) {
return gridRef.current?.state?.scrollLeft;
}
return null;
},
set: (scrollLeft) => {
if (gridRef.current) {
gridRef.current.scrollTo({
scrollLeft,
});
}
},
});
return obj;
});
const resetVirtualGrid = () => {
gridRef.current?.resetAfterIndices({
columnIndex: 0,
shouldForceUpdate: true,
});
};
useEffect(() => resetVirtualGrid, [tableWidth]);
const renderVirtualList = (rawData, {scrollbarSize, ref, onScroll}) => {
ref.current = connectObject;
const totalHeight = rawData.length * TABLE_ROW_HEIGHT;
return (
<Grid
ref={gridRef}
className="virtual-grid"
columnCount={mergedColumns.length}
columnWidth={(index) => {
const {width} = mergedColumns[index];
return totalHeight > scroll.y && index === mergedColumns.length - 1
? width - scrollbarSize - 1
: width;
}}
height={scroll.y}
rowCount={rawData.length}
rowHeight={() => TABLE_ROW_HEIGHT}
width={tableWidth}
// width={'100%'}
onScroll={({scrollLeft}) => {
onScroll({
scrollLeft,
});
}}
>
{({columnIndex, rowIndex, style}) => (
<div
className={classNames('virtual-table-cell', {
'virtual-table-cell-last': columnIndex === mergedColumns.length - 1,
})}
style={style}
>
{rawData[rowIndex][mergedColumns[columnIndex].dataIndex]}
</div>
)}
</Grid>
);
};
return (
<ResizeObserver
onResize={({width}) => {
setTableWidth(width);
}}
>
<BasicTable
{...props}
size={'small'}
// className="virtual-table"
columns={mergedColumns}
pagination={false}
components={{
body: renderVirtualList,
}}
/>
</ResizeObserver>
);
};
export default VirtualTable;
\ No newline at end of file
packages/extend-components/EC_HistoryView/src/VirtualTable.less 0 → 100644
View file @ 4f2c54ff
@root-entry-name: 'default';
@import (reference) '~antd/es/style/themes/index.less';
.virtual-table .ant-table-container:before,
.virtual-table .ant-table-container:after {
display: none;
}
.ant-table-thead > tr > th {
}
.virtual-table-cell {
box-sizing: border-box;
padding: 16px;
border-bottom: 1px solid rgba(224, 234, 251);
background: #FFF;
text-align: center;
line-height: 1;
&:nth-child(even) {
}
&:nth-child(odd) {
}
}
[data-theme="dark"] .virtual-table-cell {
box-sizing: border-box;
padding: 16px;
border-bottom: 1px solid #303030;
background: #141414;
text-align: center;
}
packages/extend-components/EC_HistoryView/src/demos/index.js
View file @ 4f2c54ff
...@@ -4,19 +4,19 @@ import { MobileHistoryChart } from "../mobile"; ...@@ -4,19 +4,19 @@ 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状态",
"sensors": "进水压力", "sensors": "进水压力",
// "sensors": "泵1状态", // "sensors": "泵1状态",
"deviceType": "二供机组" "deviceType": "二供机组"
} } */
/* { /* {
deviceCode: 'EGBF00000141', deviceCode: 'EGBF00000141',
// sensors: '进水压力,出水瞬时流量,出水累计流量', // sensors: '进水压力,出水瞬时流量,出水累计流量',
...@@ -75,12 +75,12 @@ const deviceParams = [ ...@@ -75,12 +75,12 @@ const deviceParams = [
"deviceCode": "SC00000023", "deviceCode": "SC00000023",
"sensors": "瞬时流量", "sensors": "瞬时流量",
"deviceType": "水厂" "deviceType": "水厂"
},*/ },
/* { {
"deviceCode": "JFJ00000001", "deviceCode": "JFJ00000001",
"sensors": "沉淀池投矾量瞬时,", "sensors": "沉淀池投矾量瞬时,",
"deviceType": "加矾间" "deviceType": "加矾间"
}, }, */
{ {
"deviceCode": "QSBF00000001", "deviceCode": "QSBF00000001",
"sensors": "取水浊度", "sensors": "取水浊度",
...@@ -101,11 +101,11 @@ const deviceParams = [ ...@@ -101,11 +101,11 @@ const deviceParams = [
"sensors": "瞬时流量", "sensors": "瞬时流量",
"deviceType": "流量计" "deviceType": "流量计"
}, },
{ /* {
deviceCode: 'EGJZ00000027', deviceCode: 'EGJZ00000027',
sensors: '2#变频器运行频率', sensors: '2#变频器运行频率',
deviceType: '二供机组', deviceType: '二供机组',
},*/ }, */
/*确山*/ /*确山*/
/*泵3状态*/ /*泵3状态*/
/* { /* {
...@@ -127,7 +127,7 @@ const Demo = () => { ...@@ -127,7 +127,7 @@ const Demo = () => {
<> <>
<div> <div>
<div style={{ height: 700 }}> <div style={{ height: 700 }}>
<HistoryView deviceParams={deviceParams} defaultModel="curve" /> <HistoryView deviceParams={deviceParams} defaultModel="table" />
</div> </div>
</div> </div>
</> </>
......
packages/extend-components/EC_HistoryView/src/index.js
View file @ 4f2c54ff
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 {
...@@ -36,12 +36,13 @@ import { ...@@ -36,12 +36,13 @@ 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';
import VirtualTable from "./VirtualTable";
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';
...@@ -273,7 +274,7 @@ const OriginMaxDays = 31; // 原始曲线请求数据的最大天数 ...@@ -273,7 +274,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,
...@@ -340,6 +341,8 @@ const HistoryView = (props) => { ...@@ -340,6 +341,8 @@ const HistoryView = (props) => {
), ),
].length === 1, // 单指标 ].length === 1, // 单指标
}); });
// 表格虚拟列表
const tableRef = useRef();
// 选择的时间范围值 // 选择的时间范围值
const dateRange = useMemo(() => { const dateRange = useMemo(() => {
if (timeValue === 'customer') { if (timeValue === 'customer') {
...@@ -479,13 +482,13 @@ const HistoryView = (props) => { ...@@ -479,13 +482,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) => {
...@@ -495,37 +498,37 @@ const HistoryView = (props) => { ...@@ -495,37 +498,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;
} }
...@@ -586,7 +589,7 @@ const HistoryView = (props) => { ...@@ -586,7 +589,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 value="month" disabled={lineDataType === '原始曲线'}>
月 月
...@@ -610,14 +613,14 @@ const HistoryView = (props) => { ...@@ -610,14 +613,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>
...@@ -626,7 +629,7 @@ const HistoryView = (props) => { ...@@ -626,7 +629,7 @@ const HistoryView = (props) => {
)} )}
</div> </div>
))} ))}
{datePickerArr.length < 4 && <PlusCircleOutlined onClick={handleAddDatePicker} />} {datePickerArr.length < 4 && <PlusCircleOutlined onClick={handleAddDatePicker}/>}
</> </>
)} )}
</div> </div>
...@@ -705,12 +708,12 @@ const HistoryView = (props) => { ...@@ -705,12 +708,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 <Select
style={{ width: 80, marginLeft: 10 }} style={{width: 80, marginLeft: 10}}
value={algorithmValue} value={algorithmValue}
onChange={(e) => setAlgorithmValue(e)} onChange={(e) => setAlgorithmValue(e)}
> >
...@@ -730,7 +733,7 @@ const HistoryView = (props) => { ...@@ -730,7 +733,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 ? (
<> <>
...@@ -743,7 +746,7 @@ const HistoryView = (props) => { ...@@ -743,7 +746,7 @@ const HistoryView = (props) => {
{/*<Segmented value={lineDataType} options={['特征曲线', '原始曲线']} onChange={switchLineDataType}/>*/} {/*<Segmented value={lineDataType} options={['特征曲线', '原始曲线']} onChange={switchLineDataType}/>*/}
<Tooltip title={'原始曲线数据量较大，单次查询最多展示1万条数据'}> <Tooltip title={'原始曲线数据量较大，单次查询最多展示1万条数据'}>
<QuestionCircleFilled <QuestionCircleFilled
style={{ marginLeft: 6 }} style={{marginLeft: 6}}
className={`${prefixCls}-question`} className={`${prefixCls}-question`}
/> />
</Tooltip> </Tooltip>
...@@ -756,16 +759,16 @@ const HistoryView = (props) => { ...@@ -756,16 +759,16 @@ const HistoryView = (props) => {
<> <>
{lineDataType !== '原始曲线' ? ( {lineDataType !== '原始曲线' ? (
<> <>
<div style={{ marginLeft: 7 }} className={classNames(`${prefixCls}-label`)}> <div style={{marginLeft: 7}} className={classNames(`${prefixCls}-label`)}>
曲线形态 曲线形态
</div> </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>
...@@ -796,7 +799,7 @@ const HistoryView = (props) => { ...@@ -796,7 +799,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}
> >
...@@ -850,7 +853,8 @@ const HistoryView = (props) => { ...@@ -850,7 +853,8 @@ const HistoryView = (props) => {
aDom.click(); aDom.click();
aDom.remove(); aDom.remove();
}) })
.catch((err) => {}); .catch((err) => {
});
}); });
}; };
const exportFeatureBtn = () => { const exportFeatureBtn = () => {
...@@ -902,7 +906,7 @@ const HistoryView = (props) => { ...@@ -902,7 +906,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}`;
}; };
...@@ -913,7 +917,7 @@ const HistoryView = (props) => { ...@@ -913,7 +917,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) {
...@@ -943,7 +947,7 @@ const HistoryView = (props) => { ...@@ -943,7 +947,7 @@ 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] = '';
...@@ -952,7 +956,7 @@ const HistoryView = (props) => { ...@@ -952,7 +956,7 @@ const HistoryView = (props) => {
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);
...@@ -967,7 +971,7 @@ const HistoryView = (props) => { ...@@ -967,7 +971,7 @@ const HistoryView = (props) => {
}); });
// 处理表格数据 // 处理表格数据
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) => {
...@@ -1018,34 +1022,34 @@ const HistoryView = (props) => { ...@@ -1018,34 +1022,34 @@ 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: '4' }; if (diffDays > 30) return {unit: 'h', zoom: '4'};
if (diffDays > 15) return { unit: 'h', zoom: '2' }; 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: '20' }; 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;
let _diffDays = moment(dateRange[0].dateTo).diff(dateRange[0].dateFrom, 'days'); let _diffDays = moment(dateRange[0].dateTo).diff(dateRange[0].dateFrom, 'days');
// 查询时段大于7天时，不提供1分钟的抽稀选项。 // 查询时段大于7天时，不提供1分钟的抽稀选项。
if (_diffDays > 7 && zoom === '1' && unit === 'min') { if (_diffDays > 7 && zoom === '1' && unit === 'min') {
...@@ -1056,7 +1060,7 @@ const HistoryView = (props) => { ...@@ -1056,7 +1060,7 @@ const HistoryView = (props) => {
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('是否在线')
...@@ -1097,9 +1101,9 @@ const HistoryView = (props) => { ...@@ -1097,9 +1101,9 @@ const HistoryView = (props) => {
let zoomParam = let zoomParam =
activeTabKey === 'curve' activeTabKey === 'curve'
? handleDataThinKey(diffYears, diffDays, diffHours, lineDataType) ? handleDataThinKey(diffYears, diffDays, diffHours, lineDataType)
: {}; : (!isDilute?{zoom:'',unit:''}:{});// 表格也支持全数据模式；
requestArr.push(getHistoryInfo({ ...param, ...zoomParam })); requestArr.push(getHistoryInfo({...param, ...zoomParam}));
}); });
setLoading(true); setLoading(true);
Promise.all(requestArr) Promise.all(requestArr)
...@@ -1108,7 +1112,7 @@ const HistoryView = (props) => { ...@@ -1108,7 +1112,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 || '';
...@@ -1154,7 +1158,7 @@ const HistoryView = (props) => { ...@@ -1154,7 +1158,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,
...@@ -1178,9 +1182,10 @@ const HistoryView = (props) => { ...@@ -1178,9 +1182,10 @@ const HistoryView = (props) => {
{renderTimeOption} {renderTimeOption}
{renderCurveOption()} {renderCurveOption()}
</div> </div>
<div className={`${prefixCls}-content`}> <div className={`${prefixCls}-content`} ref={tableRef}>
{chartDataSource.length > 0 ? ( {chartDataSource.length > 0 ? (
<BasicTable // <BasicTable
<VirtualTable
dataSource={tableData.sort((a, b) => { dataSource={tableData.sort((a, b) => {
let _a = a.time; let _a = a.time;
let _b = b.time; let _b = b.time;
...@@ -1197,18 +1202,19 @@ const HistoryView = (props) => { ...@@ -1197,18 +1202,19 @@ 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);
})} })}
columns={columns} columns={columns}
{...tableProps} 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)' }}
scroll={{x: 'max-content', y: tableRef.current.getBoundingClientRect().height - 40}}
/> />
) : ( ) : (
<PandaEmpty /> <PandaEmpty/>
)} )}
</div> </div>
</> </>
); );
}, [timeOrder, chartDataSource, columns, tableProps, tableData, isSingleStatusSensor, dateRange]); }, [timeOrder, chartDataSource, columns, tableProps, tableData, isSingleStatusSensor, dateRange, tableRef.current]);
const returnLongestPeriod = (data) => { const returnLongestPeriod = (data) => {
let _earliest = ''; let _earliest = '';
let _latest = ''; let _latest = '';
...@@ -1242,13 +1248,13 @@ const HistoryView = (props) => { ...@@ -1242,13 +1248,13 @@ 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}
...@@ -1294,7 +1300,7 @@ const HistoryView = (props) => { ...@@ -1294,7 +1300,7 @@ const HistoryView = (props) => {
) )
return setCompleteInit(true); return setCompleteInit(true);
setLoading(true); setLoading(true);
const { deviceCode, deviceType, sensors } = deviceParams[0]; const {deviceCode, deviceType, sensors} = deviceParams[0];
let _id = ( let _id = (
await getPointAddress({ await getPointAddress({
code: deviceCode, code: deviceCode,
...@@ -1321,7 +1327,7 @@ const HistoryView = (props) => { ...@@ -1321,7 +1327,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';
} }
...@@ -1389,7 +1395,7 @@ const HistoryView = (props) => { ...@@ -1389,7 +1395,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 ? ( {loading || percent !== 0 ? (
<div className={classNames(`${prefixCls}-progressWrapper`)}> <div className={classNames(`${prefixCls}-progressWrapper`)}>
<div className={classNames(`${prefixCls}-contentWrapper`)}> <div className={classNames(`${prefixCls}-contentWrapper`)}>
...@@ -1407,7 +1413,7 @@ const HistoryView = (props) => { ...@@ -1407,7 +1413,7 @@ const HistoryView = (props) => {
<div className={classNames(`${prefixCls}-tip`)}>加载中...</div> <div className={classNames(`${prefixCls}-tip`)}>加载中...</div>
</> </>
) : ( ) : (
<Spin spinning={loading || false} /> <Spin spinning={loading || false}/>
)} )}
</div> </div>
</div> </div>
...@@ -1429,11 +1435,11 @@ const HistoryView = (props) => { ...@@ -1429,11 +1435,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/index.less
View file @ 4f2c54ff
...@@ -89,6 +89,7 @@ ...@@ -89,6 +89,7 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
} }
.@{history-view}-date { .@{history-view}-date {
......
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