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

packages/extend-components/EC_HistoryView/src/EC_HistoryView.md

@@ -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

-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

@@ -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

@@ -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

@@ -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);