Skip to content

W
wisdom-components
Commit 70d93ba9 authored by 陈龙's avatar 陈龙
Browse files
Options

feat: 新增移动版本

parent 977a05fc
Show whitespace changes
Inline Side-by-side
Showing with 234 additions and 55 deletions
packages/extend-components/EC_HistoryView/src/EC_HistoryView.md
View file @ 70d93ba9
---
title: EC_HistoryView - 历史曲线
nav:
title: 业务组件
path: /extend-components
title: 业务组件
path: /extend-components
group:
path: /
path: /
---
# HistoryView 历史数据查看
......@@ -53,3 +53,23 @@ group:
...
]
```
移动端参数
```javascript
{
// date
date:{
dateFrom: '2022-02-02 00:00:00',
dateTo: '2022-02-02 23:59:59',
}
// deviceParams
deviceParams:[{
deviceCode: 'EGBF00000146', // 设备编码
sensors: '进水压力,出水瞬时流量', // 设备查询指标
deviceCode: '二供泵房', // 设备类型
},...],
// chartType
chartType: 'lineChart' || 'boxChart'
}
```
packages/extend-components/EC_HistoryView/src/demos/index.js
View file @ 70d93ba9
import React from 'react';
import HistoryView from '../index';
import {MobileHistoryChart} from "../mobile";
const deviceParams = [
// {
......@@ -27,9 +28,15 @@ const deviceParams = [
];
const Demo = () => {
return (
<div style={{ height: 700 }}>
<HistoryView deviceParams={deviceParams} defaultModel="table" />
<div>
<div style={{height: 700}}>
<HistoryView deviceParams={deviceParams} defaultModel="curve"/>
</div>
<div style={{height: 300}}>
<MobileHistoryChart deviceParams={deviceParams} chartType={'lineChart'}/>
</div>
</div>
);
};
......
packages/extend-components/EC_HistoryView/src/index.js
View file @ 70d93ba9
import React, { useContext, useEffect, useMemo, useState } from 'react';
import React, {useContext, useEffect, useMemo, useState} from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import {
......@@ -23,14 +23,14 @@ import _ from 'lodash';
import TimeRangePicker from '@wisdom-components/timerangepicker';
import PandaEmpty from '@wisdom-components/empty';
import BasicTable from '@wisdom-components/basictable';
import { getHistoryInfo, getDeviceAlarmScheme, getExportDeviceHistoryUrl } from './apis';
import {getHistoryInfo, getDeviceAlarmScheme, getExportDeviceHistoryUrl} from './apis';
import SimgleChart 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';
......@@ -221,7 +221,7 @@ const timeColumn = {
};
const HistoryView = (props) => {
const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);
const {getPrefixCls} = useContext(ConfigProvider.ConfigContext);
const prefixCls = getPrefixCls('history-view');
const {
......@@ -324,7 +324,7 @@ const HistoryView = (props) => {
const onContrastChange = (value) => {
setContrastOption(value);
// 模式为日时，默认对比时间根据defaultDate判断 是昨天、上月、还是去年
setDatePickerArr([...DefaultDatePicker(value==='day'&&defaultDate?defaultDate:value)]);
setDatePickerArr([...DefaultDatePicker(value === 'day' && defaultDate ? defaultDate : value)]);
};
// 同期对比模式: 时间段选择
......@@ -364,13 +364,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');
}
};
......@@ -399,7 +399,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">月</Option>
</Select>
......@@ -416,7 +416,7 @@ const HistoryView = (props) => {
className={classNames(`${prefixCls}-contrast-delete`)}
onClick={() => handleDeleteDatePicker(index)}
>
<CloseCircleFilled />
<CloseCircleFilled/>
</div>
)}
</div>
......@@ -425,7 +425,7 @@ const HistoryView = (props) => {
)}
</div>
))}
{datePickerArr.length < 5 && <PlusCircleOutlined onClick={handleAddDatePicker} />}
{datePickerArr.length < 5 && <PlusCircleOutlined onClick={handleAddDatePicker}/>}
</>
)}
</div>
......@@ -481,7 +481,7 @@ const HistoryView = (props) => {
</Checkbox>
{child.tooltip && (
<Tooltip title={child.tooltip}>
<QuestionCircleFilled className={`${prefixCls}-question`} />
<QuestionCircleFilled className={`${prefixCls}-question`}/>
</Tooltip>
)}
</>
......@@ -493,18 +493,18 @@ const HistoryView = (props) => {
return (
<div
className={classNames(`${prefixCls}-cover`)}
style={isChart && isSingle ? { width: '100%' } : {}}
style={isChart && isSingle ? {width: '100%'} : {}}
>
{isChart && isSingle && showBoxOption ? (
<>
<div 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>
......@@ -529,7 +529,7 @@ const HistoryView = (props) => {
{activeTabKey === 'table' && (
<Select
value={dataThinKey}
style={{ width: 90 }}
style={{width: 90}}
onChange={onTimeIntervalChange}
disabled={!dataConfig.dataThin}
>
......@@ -567,14 +567,15 @@ const HistoryView = (props) => {
aDom.click();
aDom.remove();
})
.catch((err) => {});
.catch((err) => {
});
});
};
const handleTableData = (data) => {
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}`;
};
......@@ -585,7 +586,7 @@ const HistoryView = (props) => {
// 处理表头数据
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 col = {
title: `${equipmentName}-${sensorName}${unit ? `(${unit})` : ''}`,
......@@ -608,7 +609,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] = '';
......@@ -616,7 +617,7 @@ 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);
......@@ -632,7 +633,7 @@ const HistoryView = (props) => {
// 处理表格数据
data.forEach((child, index) => {
const { dataModel } = child;
const {dataModel} = child;
const dataIndex = dataIndexAccess(child, index);
dataModel &&
dataModel.forEach((value, j) => {
......@@ -683,28 +684,28 @@ const HistoryView = (props) => {
const handleDataThinKey = (diffDays) => {
// edit by zy 根据选择的时长控制抽稀频度
if (diffDays >= 7 && diffDays < 15) {
return { unit: 'h', zoom: '2' };
return {unit: 'h', zoom: '2'};
} else if (diffDays >= 15 && diffDays < 30) {
return { unit: 'h', zoom: '4' };
return {unit: 'h', zoom: '4'};
} else if (diffDays >= 30) {
return { unit: 'h', zoom: '6' };
return {unit: 'h', zoom: '6'};
} else if (diffDays < 7 && diffDays >= 2) {
return { unit: 'min', zoom: '40' };
return {unit: 'min', zoom: '40'};
} else if (diffDays < 2 && diffDays >= 1) {
return { unit: 'min', zoom: '30' };
return {unit: 'min', zoom: '30'};
} else {
return { unit: 'min', zoom: '10' };
return {unit: 'min', zoom: '10'};
}
};
// 处理接口服务参数的变化
const onChangeParams = (value = {}) => {
const { dateRange, isDilute, ignoreOutliers, zoom, unit } = value;
const {dateRange, isDilute, ignoreOutliers, zoom, unit} = value;
const requestArr = [];
const acrossTables = [];
deviceParams
.map((item) => {
let _item = { ...item };
let _item = {...item};
_item.sensors =
item.sensors && !item.sensors.includes('是否在线')
? item.sensors + ',是否在线'
......@@ -721,13 +722,11 @@ const HistoryView = (props) => {
return;
}
dateRange.forEach((item) => {
// let _showLine = checkboxData.find(item => item.key === 'justLine');
const param = {
isDilute,
zoom,
unit,
ignoreOutliers,
// isVertical: false, // 是否查询竖表
dateFrom: item.dateFrom,
dateTo: item.dateTo,
acrossTables,
......@@ -735,14 +734,14 @@ const HistoryView = (props) => {
};
let diffDays = moment(item.dateTo).diff(moment(item.dateFrom), 'days');
let zoomParam = activeTabKey === 'curve' ? handleDataThinKey(diffDays) : {};
requestArr.push(getHistoryInfo({ ...param, ...zoomParam }));
requestArr.push(getHistoryInfo({...param, ...zoomParam}));
});
setLoading(true);
Promise.all(requestArr).then((results) => {
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 || '';
......@@ -775,7 +774,7 @@ const HistoryView = (props) => {
};
useEffect(() => {
const { dataThin, ignoreOutliers, zoom, unit } = dataConfig;
const {dataThin, ignoreOutliers, zoom, unit} = dataConfig;
beforChangeParams().finally(() => {
onChangeParams({
isDilute: dataThin,
......@@ -801,7 +800,7 @@ const HistoryView = (props) => {
</div>
<div className={`${prefixCls}-content`}>
{!chartDataSource.length ? (
<PandaEmpty />
<PandaEmpty/>
) : grid === true ? (
<GridChart
curveCenter={curveCenter}
......@@ -843,10 +842,11 @@ const HistoryView = (props) => {
columns={columns}
{...tableProps}
pagination={false}
onChange={() => {}}
onChange={() => {
}}
/>
) : (
<PandaEmpty />
<PandaEmpty/>
)}
</div>
</>
......@@ -871,7 +871,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/mobile.js 0 → 100644
View file @ 70d93ba9
import React, {useEffect, useMemo, useState, useContext} from 'react';
import GridChart from "./GridChart";
import {ConfigProvider} from "antd";
import moment from "moment";
import {getDeviceAlarmScheme, getHistoryInfo} from "./apis";
import SimgleChart from "./SingleChart";
// deviceAlarmSchemes 用来获取对应的 方案的最大值/最小值 标记状态
// dataSource 获取的报警信息
// deviceParams,
// defaultDate,
// {
// deviceCode: 'XMYL00000345',
// sensors: '进水压力',
// deviceType: '熊猫压力表',
// pointAddressID: 4,
// },
//{
// "isDilute": true, // 抽稀
// "zoom": "30",// 抽稀
// "unit": "min",// 抽稀
// "ignoreOutliers": false, // 滤波
// "dateFrom": "2023-07-09 16:38:32",
// "dateTo": "2023-07-10 16:38:32",
// "acrossTables": [
// {
// "deviceCode": "XMYL00000297",
// "sensors": "进水压力,是否在线",
// "deviceType": "熊猫压力表"
// }
// ],
// "isBoxPlots": true // 箱线图
// }
const DATE_FORMAT = 'YYYY-MM-DD';
const MobileHistoryChart = (
{
date = {
dateFrom: moment().format(`${DATE_FORMAT} 00:00:00`),
dateTo: moment().format(`${DATE_FORMAT} 23:59:59`)
},
deviceParams = [],
ignoreOutliers = true,
isDilute = true,
needMarkLine = true,
showBoxOption = true, //
chartGrid = true,
chartType='lineChart', // lineChart boxChart
}
) => {
const [deviceAlarmSchemes, setDeviceAlarmSchemes] = useState(null);
const [chartDataSource, setChartDataSource] = useState(null);
const {getPrefixCls} = useContext(ConfigProvider.ConfigContext);
const prefixCls = getPrefixCls('history-view');
const isBoxPlots =
deviceParams?.length === 1 && deviceParams[0]?.sensors?.split(',').length === 1;
const handleDataThinKey = (diffDays) => {
// 移动端缩放的抽稀一倍
if (diffDays >= 7 && diffDays < 15) {
return {unit: 'h', zoom: '4'};
} else if (diffDays >= 15 && diffDays < 30) {
return {unit: 'h', zoom: '8'};
} else if (diffDays >= 30) {
return {unit: 'h', zoom: '12'};
} else if (diffDays < 7 && diffDays >= 2) {
return {unit: 'min', zoom: '80'};
} else if (diffDays < 2 && diffDays >= 1) {
return {unit: 'min', zoom: '60'};
} else {
return {unit: 'min', zoom: '20'};
}
};
const getDataSource = () => {
let diffDays = moment(date.dateTo).diff(moment(date.dateFrom), 'days');
const thinKey = handleDataThinKey(diffDays);
const acrossTables = deviceParams.map(item => {
let _item = {...item};
let _sensorArr = _item.sensors.split(',');
if (!_sensorArr.includes('是否在线')) {
_sensorArr.push('是否在线')
}
return _item;
});
let _params = {
...date,
isBoxPlots,
ignoreOutliers,
isDilute,
...thinKey,
acrossTables
};
getHistoryInfo({..._params}).then(res => {
let data = [];
const {dateFrom, dateTo} = date;
if (res.code === 0 && res.data.length) {
res.data.forEach((d) => {
d.dateFrom = dateFrom || '';
d.dateTo = dateTo || '';
});
deviceParams.forEach((p) => {
// 返回数据按查询指标顺序排序
const sensors = p.sensors?.split(',') ?? [];
const list = sensors.map((s) => {
const dataItem = res.data.find(
(d) => d.stationCode === p.deviceCode && d.sensorName === s,
);
if (dataItem) {
dataItem.dateFrom = dateFrom || '';
dataItem.dateTo = dateTo || '';
return dataItem;
} else {
return {};
}
});
data = data.concat(list);
});
}
setChartDataSource(data);
})
};
const getScheme = () => {
getDeviceAlarmScheme({
data: deviceParams.map((item) => ({
deviceType: item.deviceType,
deviceCode: item.deviceCode,
pointAddressID: item.pointAddressID,
sensorName: item.sensors,
})),
}).then((res) => {
if (res.code === 0) setDeviceAlarmSchemes(res.data || []);
else setDeviceAlarmSchemes([]);
return Promise.resolve();
}).catch((err) => {
setDeviceAlarmSchemes([]);
return Promise.resolve();
});
}
useEffect(() => {
getDataSource();
getScheme();
}, [])
return deviceAlarmSchemes && chartDataSource ? <SimgleChart
showBoxOption={showBoxOption}
curveCenter={true}
chartGrid={chartGrid}
prefixCls={prefixCls}
dataSource={chartDataSource}
chartType={isBoxPlots ? chartType : null}
deviceAlarmSchemes={deviceAlarmSchemes}
/> : null
}
export {
MobileHistoryChart
}
\ No newline at end of file
packages/extend-components/EC_HistoryView/src/utils.js
View file @ 70d93ba9
import moment from 'moment';
import _, { isArray } from 'lodash';
import _, {isArray} from 'lodash';
/** 轴宽度, 用于计算多轴显示时, 轴线偏移和绘图区域尺寸 */
const axisWidth = 40;
......@@ -265,7 +265,6 @@ const optionGenerator = (dataSource, cusOption, contrast, contrastOption, smooth
const showBoxOption = _.get(config, 'showBoxOption', false);
// 自定义属性
const restOption = _.pick(cusOption, ['title', 'legend']);
// 一种指标一个y轴
const yAxisMap = new Map();
dataSource.forEach((item, index) => {
......@@ -336,7 +335,6 @@ const optionGenerator = (dataSource, cusOption, contrast, contrastOption, smooth
};
const seriesTemplate = (param, unit) => {
if (!param) return '';
console.log(param);
const { value, encode } = param;
// const val = value[encode.y[0]];
const _unit = unit || 'Mpa';
......@@ -535,13 +533,8 @@ const optionGenerator = (dataSource, cusOption, contrast, contrastOption, smooth
let _unit = '';
series = series.map((item) => {
_unit = item.unit;
let _item = { ...item, symbol: 'none' };
/* _item.data = _item?.data?.map(d => {
return d[1] || null
}) || [];*/
return _item;
return {...item, symbol: 'none'};
});
console.log(series);
[[..._minData], [..._maxData]].forEach((item, index) => {
series.push({
name: index === 0 ? '最小值' : '最大值',
......
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