Skip to content

W
wisdom-components
Commit 658f834f authored by 陈龙's avatar 陈龙
Browse files
Options

feat: 历史曲线增加开关类型的图表

parent 706724f6
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 116 additions and 48 deletions
packages/extend-components/EC_HistoryView/src/EC_HistoryView.md
View file @ 658f834f
......@@ -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 @ 658f834f
import React, {memo, useEffect, useMemo, useRef} from 'react';
import {BasicChart} from '@wisdom-components/basicchart';
import React, { memo, useEffect, useMemo, useRef } from 'react';
import { BasicChart } from '@wisdom-components/basicchart';
import PandaEmpty from '@wisdom-components/empty';
import optionGenerator, {alarmMarkLine, minMaxMarkPoint, offlineArea} from './utils';
import {isArray, cloneDeep} from 'lodash';
import optionGenerator, {
alarmMarkLine,
minMaxMarkPoint,
offlineArea,
specialTypeChartOptionGenerator,
statusChartOptionGenerator
} from './utils';
import { isArray, cloneDeep } from 'lodash';
const SingleChart = memo((props) => {
const {
......@@ -19,7 +25,7 @@ const SingleChart = memo((props) => {
special
} = props;
const chartRef = useRef();
const SpecialType = ['状态值', '开关值']; // 横向柱状条
const option = useMemo(() => {
const config = {
needUnit: true,
......@@ -32,6 +38,21 @@ const SingleChart = memo((props) => {
showBoxOption,
special
};
let allValDesc = {};
let _allSensorType = special?.allSensorType?.reduce((final, curr) => {
final[curr.id] = curr.type;
return final;
}, {});
let _allPointAddress = special?.allPointAddress?.reduce((final, curr) => {
final[curr.name] = _allSensorType[curr.sensorTypeID];
allValDesc[curr.name] = curr.valDesc;
return final;
}, {});
if (dataSource.length === 1 && SpecialType.includes(_allPointAddress[dataSource[0].sensorName])) {
config.sensorType = _allPointAddress[dataSource[0].sensorName];
config.special.allValDesc = allValDesc;
return specialTypeChartOptionGenerator({ dataSource, config });
}
return optionGenerator(dataSource, null, contrast, contrastOption, smooth, config, lineDataType);
}, [dataSource, smooth, curveCenter, chartType]);
useEffect(() => {
......@@ -39,7 +60,7 @@ const SingleChart = memo((props) => {
const chart = chartRef.current?.getEchartsInstance?.();
function hander(params) {
const {selected} = params;
const { selected } = params;
const count = Object.values(selected || {}).filter((item) => item).length;
const option = cloneDeep(chart.getOption());
const needMarkLine = count === 1;
......@@ -105,7 +126,7 @@ const SingleChart = memo((props) => {
};
let yAxis = axisConfig;
if (isArray(option.yAxis)) {
yAxis = option.yAxis.map((item) => ({...axisConfig}));
yAxis = option.yAxis.map((item) => ({ ...axisConfig }));
}
let xAxis = axisConfig;
chart.setOption({
......@@ -124,9 +145,9 @@ const SingleChart = memo((props) => {
[dataSource],
);
return isEmpty ? (
<PandaEmpty/>
<PandaEmpty />
) : (
<BasicChart ref={chartRef} option={option} notMerge style={{width: '100%', height: '100%'}}/>
<BasicChart ref={chartRef} option={option} notMerge style={{ width: '100%', height: '100%' }} />
);
});
......
packages/extend-components/EC_HistoryView/src/apis/index.js
View file @ 658f834f
......@@ -8,13 +8,14 @@ const baseUrl = typeof DUMI_TYPE !== 'undefined' && DUMI_TYPE === 'dumi' ? '/api
const monitorDeviceUrl = `${baseUrl}/PandaMonitor/Monitor/Device`;
// 获取单个设备的配置信息
export function getPointAddress (params) {
export function getPointAddress(params) {
return request({
url: `/PandaMonitor/Monitor/PointAddress/GetPointAddress`,
method: REQUEST_METHOD_GET,
params
});
}
// 获取点表信息
export function getPointAddressEntry(params) {
return request({
......@@ -57,4 +58,11 @@ export function getDictionaryInfoAll(params) {
method: REQUEST_METHOD_GET,
params
})
}
export function getSensorType() {
return request({
url: '/PandaMonitor/Monitor/Sensor/GetSensorType',
method: REQUEST_METHOD_GET,
})
}
\ No newline at end of file
packages/extend-components/EC_HistoryView/src/demos/index.js
View file @ 658f834f
......@@ -4,6 +4,18 @@ import { MobileHistoryChart } from "../mobile";
const deviceParams = [
/*10.182*/
/* {
"deviceCode": "EGBF00000136",
"sensors": "进水压力,出水瞬时流量,今日供水量,1#水箱液位,视频报警",
// "sensors": "视频报警",
"deviceType": "二供泵房"
}, */
{
"deviceCode": "EGJZ00000158",
"sensors": "进水压力,出水压力,泵1状态",
// "sensors": "泵1状态",
"deviceType": "二供机组"
}
/* {
deviceCode: 'EGBF00000141',
// sensors: '进水压力,出水瞬时流量,出水累计流量',
......@@ -16,13 +28,13 @@ const deviceParams = [
"sensors": "瞬时流量",
"deviceType": "水源井"
},*/
{
/* {
deviceCode: 'EGJZ00000197',
sensors: '进水压力,出水压力,出水瞬时流量,出水累计流量',
// sensors: '1#变频器运行频率',
deviceType: '二供机组',
// pointAddressID: 208,
},
},*/
/* {
deviceCode: 'EGJZ00000198',
sensors: '进水压力,出水压力,出水瞬时流量,出水累计流量',
......
packages/extend-components/EC_HistoryView/src/index.js
View file @ 658f834f
......@@ -35,6 +35,7 @@ import SingleChart from './SingleChart';
import GridChart from './GridChart';
import './index.less';
import { globalConfig } from 'antd/lib/config-provider';
import { getSensorType } from "@wisdom-components/ec_realtimeinfo/es/apis";
const { RangePicker } = DatePicker;
const { Option } = Select;
......@@ -311,6 +312,10 @@ const HistoryView = (props) => {
const [percent, setPercent] = useState(0);
// 频率指标特殊业务
const [special1, setSpecial1] = useState(null);
const [allPointAddress, setAllPointAddress] = useState([]);
//查询所有sensorType
const [allSensorType, setAllSensorType] = useState([]);
const [isSingleStatusSensor, setIsSingleStatusSensor] = useState(false);
// 历史数据相关的特征描述
const deviceConfig = useRef({
oneDevice: deviceParams.length === 1,//单设备
......@@ -689,14 +694,14 @@ const HistoryView = (props) => {
);
};
const renderCurveOption = (isChart, isSingle) => {
const renderCurveOption = (isChart, isSingle, isStatus) => {
return (
<div
className={classNames(`${prefixCls}-cover`)}
style={isChart && isSingle ? { width: '100%' } : {}}
>
{
isChart ? <>
isChart && !isStatus ? <>
<div className={classNames(`${prefixCls}-label`)}>曲线选择</div>
<div className={`${prefixCls}-cover-item`}>
<Radio.Group
......@@ -713,7 +718,7 @@ const HistoryView = (props) => {
</div>
</> : ''
}
{isChart && isSingle && showBoxOption ? (
{isChart && isSingle && showBoxOption && !isStatus ? (
<>
{
lineDataType !== '原始曲线' ? <>
......@@ -736,32 +741,37 @@ const HistoryView = (props) => {
) : (
''
)}
<div className={classNames(`${prefixCls}-label`)}>
{activeTabKey !== 'table' ? '曲线设置' : '表格设置'}
</div>
{checkboxData.map((child) => {
const box = renderCheckbox(child, isChart && isSingle);
if (!box) return null;
return (
<div key={child.key} className={`${prefixCls}-cover-item`}>
{box}
</div>
);
})}
{activeTabKey === 'table' && (
<Select
value={dataThinKey}
style={{ width: 90 }}
onChange={onTimeIntervalChange}
disabled={!dataConfig.dataThin}
>
{timeIntervalList.map((child) => (
<Option key={child.key} unit={child.unit} value={child.key}>
{child.name}
</Option>
))}
</Select>
)}
{
!isStatus ?
<>
<div className={classNames(`${prefixCls}-label`)}>
{activeTabKey !== 'table' ? '曲线设置' : '表格设置'}
</div>
{checkboxData.map((child) => {
const box = renderCheckbox(child, isChart && isSingle);
if (!box) return null;
return (
<div key={child.key} className={`${prefixCls}-cover-item`}>
{box}
</div>
);
})}
{activeTabKey === 'table' && (
<Select
value={dataThinKey}
style={{ width: 90 }}
onChange={onTimeIntervalChange}
disabled={!dataConfig.dataThin}
>
{timeIntervalList.map((child) => (
<Option key={child.key} unit={child.unit} value={child.key}>
{child.name}
</Option>
))}
</Select>
)}
</> : ''
}
</div>
);
};
......@@ -825,7 +835,7 @@ const HistoryView = (props) => {
key: dataIndex,
ellipsis: true,
align: 'center',
width:200
width: 200
};
// 同期对比
if (timeValue === 'contrast' && dataModel[0]) {
......@@ -1082,14 +1092,14 @@ const HistoryView = (props) => {
{...tableProps}
pagination={false}
onChange={handleChange}
scroll={{x:'max-content',y:'calc(100% - 40px)'}}
scroll={{ x: 'max-content', y: 'calc(100% - 40px)' }}
/>
) : (
<PandaEmpty />
)}
</div>
</>
}, [timeOrder, chartDataSource, columns, tableProps, tableData])
}, [timeOrder, chartDataSource, columns, tableProps, tableData, isSingleStatusSensor])
const returnLongestPeriod = (data) => {
let _earliest = ''
let _latest = '';
......@@ -1119,6 +1129,7 @@ const HistoryView = (props) => {
{renderCurveOption(
true,
deviceParams?.length === 1 && deviceParams?.[0]?.sensors?.split(',').length === 1,
isSingleStatusSensor
)}
</div>
{
......@@ -1151,6 +1162,8 @@ const HistoryView = (props) => {
deviceAlarmSchemes={deviceAlarmSchemes}
special={{
special1, // 频率业务
allPointAddress,
allSensorType, // 后续新增的开关量的特殊业务，用来处理开关量业务
}}
/>
)}
......@@ -1172,18 +1185,21 @@ const HistoryView = (props) => {
code: deviceCode
}))?.data?.[0]?.id;
let _params = {
deviceType: deviceType
// deviceType: deviceType
};
if (_id) _params.versionId = _id;
// 多曲线的居中，容易导致曲线被截断，故多曲线时，不请求
let _request0 = getDictionaryInfoAll({
level: '组件_ec_historyview'
});
// 以下请求为处理状态值、开关值的图表，只允许单曲线单指标情况下展示
let _request1 = getPointAddressEntry(_params);
await Promise.all([_request0, _request1]).then(result => {
let _request2 = getSensorType();
await Promise.all([_request0, _request1, _request2]).then(result => {
if (result) {
let _res0 = result[0];
let _res1 = result[1];
let _res2 = result[2];
// 查字典配置
if (_res0.code === 0) {
let _opt = _res0.data.reduce((final, cur) => {
......@@ -1203,6 +1219,7 @@ const HistoryView = (props) => {
if (_res1.code === 0) {
let _sensorConfig = _res1.data.find(item => item?.name.trim() === sensors.trim());
let _statusName = _sensorConfig?.statusName;
setAllPointAddress(_res1.data);
if (_statusName) {
let _statusConfig = _res1.data.find(item => item?.name.trim() === _statusName.trim());
let _valDesc = _statusConfig?.valDesc || '';
......@@ -1216,6 +1233,15 @@ const HistoryView = (props) => {
});
}
}
// 标记sensor是什么类型的
if (_res2.code === 0) {
setAllSensorType(_res2.data);
let _sensorID = _res1.data?.find(item => item.name === sensors)?.sensorTypeID;
let _sensor = _res2.data?.find(item => item.id === _sensorID)?.type;
let _isStatusSensor = ['状态值', '开关值'].includes(_sensor);
setIsSingleStatusSensor(_isStatusSensor);
}
}
});
setCompleteInit(true);
......
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