feat: 完善移动端适配

package.json

@@ -146,6 +146,7 @@
   },
   "dependencies": {
     "@babel/plugin-proposal-private-methods": "^7.18.6",
+    "@wisdom-components/VmsVideo": "1.1.13",
     "@wisdom-components/basictable": "^1.5.14",
     "@wisdom-components/ec_historyview": "^1.4.3",
     "@wisdom-components/empty": "^1.3.9",
@@ -153,8 +154,8 @@
     "@wisdom-components/loadbox": "1.1.4",
     "@wisdom-components/timerangepicker": "^1.3.4",
     "@wisdom-components/videoslidermodal": "1.1.2",
-    "@wisdom-components/VmsVideo": "1.1.13",
     "@wisdom-utils/utils": "0.0.46",
+    "antd-mobile": "5.10.4",
     "classnames": "^2.2.6",
     "cross-spawn": "^7.0.3",
     "echarts": "^5.4.0",

packages/extend-components/EC_HistoryView/package.json

@@ -32,6 +32,7 @@
     "test": "echo \"Error: run tests from root\" && exit 1"
   },
   "dependencies": {
-    "@babel/runtime": "^7.17.9"
+    "@babel/runtime": "^7.17.9",
+    "antd-mobile": "5.10.4"
   }
 }

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

@@ -24,9 +24,13 @@ path: /
 
 <code src="./demos/index.js">
 
+## 移动端
+
+<code src="./demos/mobile.js">
+
 ## 多图表
 
-<code src="./demos/GridDemo.js">
+[//]: # (<code src="./demos/GridDemo.js">)
 
 ## API
 

packages/extend-components/EC_HistoryView/src/SingleChart.js

@@ -32,7 +32,7 @@ const SimgleChart = memo((props) => {
       showBoxOption,
     };
     return optionGenerator(dataSource, null, contrast, contrastOption, smooth, config);
-  }, [dataSource, smooth, curveCenter]);
+  }, [dataSource, smooth, curveCenter,chartType]);
 
   useEffect(() => {
     chartRef.current?.resize?.();

packages/extend-components/EC_HistoryView/src/demos/index.js

@@ -13,6 +13,7 @@ const deviceParams = [
         // deviceCode: 'EGBF00000002',
         // deviceCode: 'EGBF00000018',
         deviceCode: 'XMYL00000345',
+        // deviceCode: 'XMYL00000000',
         // deviceCode: 'EGBF00000014',
         // sensors: '今日供水量,今日用电量,1#水箱液位,是否在线',
         sensors: '进水压力',
@@ -32,9 +33,6 @@ const Demo = () => {
             <div style={{height: 700}}>
                 <HistoryView deviceParams={deviceParams} defaultModel="curve"/>
             </div>
-            <div style={{height: 300}}>
-                <MobileHistoryChart deviceParams={deviceParams} chartType={'boxChart'}/>
-            </div>
         </div>
 
     );

packages/extend-components/EC_HistoryView/src/demos/mobile.js

+import React from 'react';
+import {MobileHistoryChart} from "../mobile";
+
+const deviceParams = [
+/*    {
+        deviceCode: 'EGBF00000141',
+        sensors: '今日供水量,今日用电量',
+        deviceType: '二供泵房',
+        pointAddressID: 208,
+    },  */
+    {
+        deviceCode: 'EGBF00000141',
+        sensors: '今日供水量',
+        deviceType: '二供泵房',
+        pointAddressID: 208,
+    },
+];
+const Demo = () => {
+    return (
+        <div>
+            <div style={{height: 400}}>
+                <MobileHistoryChart deviceParams={deviceParams}/>
+            </div>
+        </div>
+
+    );
+};
+
+export default Demo;

packages/extend-components/EC_HistoryView/src/index.less

@@ -199,3 +199,9 @@
     opacity: 1;
   }
 }
+
+.@{history-view}-item {
+  display: flex;
+  align-items: center;
+  margin-bottom: 10px;
+}

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 {Selector, Checkbox, Space} from 'antd-mobile/es';
 import moment from "moment";
 import {getDeviceAlarmScheme, getHistoryInfo} from "./apis";
 import SimgleChart from "./SingleChart";
+import {handlePx} from "./utils";
+import styles from './index.less';
 
-// 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 DATE_FORMAT = 'YYYY-MM-DD HH:mm:ss';
 const MobileHistoryChart = (
     {
         date = {
-            dateFrom: moment().format(`${DATE_FORMAT} 00:00:00`),
-            dateTo: moment().format(`${DATE_FORMAT} 23:59:59`)
+            dateFrom: moment().subtract(1, 'days').format(`${DATE_FORMAT}`),
+            dateTo: moment().format(`${DATE_FORMAT}`)
         },// 默认当天
         deviceParams = [],  // 设备参数，必传
-        chartType='lineChart', // lineChart boxChart
-        ignoreOutliers = true, // 滤波
+        chartType = 'lineChart', // lineChart boxChart
+        // ignoreOutliers = true, // 滤波
         isDilute = true,  // 抽稀去重
         needMarkLine = true,
         showBoxOption = true, // 开启箱线图配置，默认开启
         chartGrid = true, // 开启网格
+        ...rest
     }
 ) => {
     const [deviceAlarmSchemes, setDeviceAlarmSchemes] = useState(null);
     const [chartDataSource, setChartDataSource] = useState(null);
+    const [options, setOptions] = useState({
+        curveCenter: true,
+        ignoreOutliers: true
+    });
+    const checkBoxOptions = useMemo(() => {
+        return Object.keys(options).reduce((final, cur) => {
+            if (options[cur]) final.push(cur);
+            return final
+        }, []);
+    }, [options]);
+    const [lineType, setLineType] = useState([chartType]);
     const {getPrefixCls} = useContext(ConfigProvider.ConfigContext);
     const prefixCls = getPrefixCls('history-view');
     const isBoxPlots =
@@ -87,7 +72,7 @@ const MobileHistoryChart = (
         let _params = {
             ...date,
             isBoxPlots,
-            ignoreOutliers,
+            ignoreOutliers: options.ignoreOutliers,
             isDilute,
             ...thinKey,
             acrossTables
@@ -139,20 +124,57 @@ const MobileHistoryChart = (
         });
     }
     useEffect(() => {
-        getDataSource();
         getScheme();
     }, [])
-    return deviceAlarmSchemes && chartDataSource ? <SimgleChart
+    useEffect(() => {
+        getDataSource();
+    }, [options.ignoreOutliers])
+    return deviceAlarmSchemes && chartDataSource ? <div style={{}}>
+        {
+            chartDataSource.length === 1 ? <div className={styles[`${prefixCls}-item`]}>
+                <span style={{fontSize: handlePx(16)}}>曲线形态：</span>
+                <Selector
+                    options={[
+                        {label: '线形图', value: 'lineChart'},
+                        {label: '箱线图', value: 'boxChart'}
+                    ]}
+                    defaultValue={lineType}
+                    onChange={(arr, extend) => setLineType(arr)}
+                />
+            </div> : ''
+        }
+        <div  className={styles[`${prefixCls}-item`]}>
+            <span style={{fontSize: handlePx(16)}}>曲线设置：</span>
+            <Checkbox.Group
+                value={checkBoxOptions}
+                onChange={val => {
+                    let _arr = Object.keys(options);
+                    let _options = _arr.reduce((final, cur) => {
+                        final[cur] = !!val.includes(cur);
+                        return final;
+                    }, {})
+                    setOptions(_options);
+                }}
+            >
+                <Space direction='horizontal'>
+                    <Checkbox value='curveCenter'>曲线居中</Checkbox>
+                    <Checkbox value='ignoreOutliers'>滤波</Checkbox>
+                </Space>
+            </Checkbox.Group>
+        </div>
+        <div style={{height: rest.height || '10rem', width: rest.width || '100%'}}>
+            <SimgleChart
                 showBoxOption={showBoxOption}
-        curveCenter={true}
-        chartGrid={chartGrid}
+                curveCenter={options.curveCenter}
+                showGridLine={chartGrid}
                 prefixCls={prefixCls}
                 dataSource={chartDataSource}
-        chartType={isBoxPlots ? chartType : null}
+                chartType={isBoxPlots ? lineType[0] : null}
                 deviceAlarmSchemes={deviceAlarmSchemes}
-    /> : null
+            />
+        </div>
+    </div> : null
 }
-
 export {
     MobileHistoryChart
 }
\ No newline at end of file