feat: 新增移动版本

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

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

 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

-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

+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

 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 ? '最小值' : '最大值',