fix: 组态增加历史回放

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

@@ -21,6 +21,10 @@ group:
 
 <code src="./demos/Basic.tsx">
 
+## 工艺回放代码演示
+
+<code src="./demos/Basic1.tsx">
+
 ## API
 
 | 参数           | 说明                             | 类型    | 默认值 |
@@ -31,3 +35,13 @@ group:
 | config         | 全局 globalConfig,没有时需要传递 | object  | {}     |
 | isZoom         | 是否可缩放(手持上建议设置 true)  | boolean | false  |
 | flowShow       | 是否水流效果（无数据表现）       | boolean | true   |
+
+### 工艺回放
+
+| 参数     | 说明                   | 类型                                 | 默认值 |
+| -------- | ---------------------- | ------------------------------------ | ------ |
+| speed    | 历史数据播放当前进度值 | number                               | 0      |
+| play     | 历史数据是否播放       | boolean                              | false  |
+| times    | 历史数据播放速度（s）  | number                               | 2      |
+| params   | 历史数据服务参数       | object                               | {}     |
+| callback | 历史数据播放的回调     | function(speed, total, play, time){} | -      |

packages/extend-components/EC_ConfigurationView/src/apis/index.js

@@ -49,3 +49,12 @@ export function getDeviceRealInfo(data) {
     data,
   });
 }
+
+// 获取历史数据
+export function getHistoryInfo(data) {
+  return request({
+    url: `${baseURI}/PandaMonitor/Monitor/Device/GetSensorsDataForStation`,
+    method: REQUEST_METHOD_POST,
+    data,
+  });
+}

packages/extend-components/EC_ConfigurationView/src/demos/Basic.tsx

 import React from 'react';
-import PandaConfigurationView from '../index';
+import PandaConfiguration from '../index';
 // import PandaConfigurationView from '../../es/index';
 const Demo = () => {
   return (
     <div style={{ width: '100%', height: '600px', background: '#242835' }}>
-      <PandaConfigurationView
+      <PandaConfiguration
         name={'水厂工艺流程段'}
         devices={'EQZT00000008,EQZT00000007,CPDA00000001,JYBZ00000003,JYBZ00000005,JYBZ00000004,SC00000003'.split(
           ',',
@@ -15,7 +15,6 @@ const Demo = () => {
         // )}
         // name={'丽江水厂原水提升泵D单元'}
         // devices={'CPAA00000001, CPAD00000001, LJSC00000002'.split(',')}
-        // dictionaryParams={{nodeID: 149}}
         config={globalConfig}
         deviceName={['工艺流程1', '工艺流程2', '工艺流程3']}
         // isZoom={true}

packages/extend-components/EC_ConfigurationView/src/demos/Basic1.tsx

+import React, { useState } from 'react';
+import moment from 'moment';
+import { Button } from 'antd';
+import { PandaHistoryConfiguration } from '../index';
+// import PandaConfigurationView from '../../es/index';
+const Demo = () => {
+  const [speed, setSpeed] = useState(0);
+  const [play, setPlay] = useState(false);
+  const [times, setTimes] = useState(2);
+  const [obj, setObj] = useState({});
+  const [params, setParams] = useState({
+    isDilute: true,
+    zoom: '1',
+    unit: 'h',
+    ignoreOutliers: false,
+    isVertical: false, // 是否查询竖表
+    dateFrom: moment(new Date()).format('yyyy-MM-DD 00:00:00'),
+    dateTo: moment(new Date()).format('yyyy-MM-DD 23:59:59'),
+  });
+  return (
+    <>
+      <div style={{ width: '100%', height: '600px', background: '#242835' }}>
+        <PandaHistoryConfiguration
+          // name={'水厂工艺流程段'}
+          // devices={'EQZT00000008,EQZT00000007,CPDA00000001,JYBZ00000003,JYBZ00000005,JYBZ00000004'.split(
+          //   ',',
+          // )}
+          name={'崇左丽江水厂原水泵房'}
+          devices={'EQZT00000007,CPBA00000001,CPAA00000001,EQZT00000008,CPDA00000001,CPAD00000001'.split(
+            ',',
+          )}
+          // name={'丽江水厂原水提升泵D单元'}
+          // devices={'CPAA00000001, CPAD00000001, LJSC00000002'.split(',')}
+          config={globalConfig}
+          deviceName={['工艺流程1', '工艺流程2', '工艺流程3']}
+          speed={speed}
+          play={play}
+          times={times}
+          callback={(speed, total, play, time) => {
+            setObj({
+              speed,
+              total,
+              play,
+              time,
+            });
+          }}
+          params={params}
+          // isZoom={true}
+          // flowShow={false}
+        />
+      </div>
+      <Button
+        onClick={() => {
+          setSpeed(20);
+        }}
+        style={{ margin: '10px' }}
+      >
+        改变speed
+      </Button>
+      <Button
+        onClick={() => {
+          setPlay(!play);
+        }}
+        style={{ margin: '10px' }}
+      >
+        改变play
+      </Button>
+      <Button
+        onClick={() => {
+          setTimes(5);
+        }}
+        style={{ margin: '10px' }}
+      >
+        改变times
+      </Button>
+      <Button
+        onClick={() => {
+          setParams({
+            isDilute: true,
+            zoom: '1',
+            unit: 'min',
+            ignoreOutliers: false,
+            isVertical: false, // 是否查询竖表
+            dateFrom: moment(new Date()).format('yyyy-MM-DD 00:00:00'),
+            dateTo: moment(new Date()).format('yyyy-MM-DD 23:59:59'),
+          });
+        }}
+        style={{ margin: '10px' }}
+      >
+        改变params
+      </Button>
+      <div
+        style={{
+          display: 'flex',
+          marginTop: '20px',
+          justifyContent: 'space-between',
+          flex: 'none',
+        }}
+      >
+        <span>speed：{obj?.speed || 0}</span>
+        <span>total：{obj?.total || 0}</span>
+        <span>play：{obj?.play ? '开' : '关'}</span>
+        <span>time：{obj?.time || ''}</span>
+      </div>
+    </>
+  );
+};
+
+export default Demo;
+
+const globalConfig = {
+  token: 'a1372ef0ce7b4e4884d31cfd99fe92f6',
+  mqtt_iotIP: 'emqttd10.panda-water.cn:443',
+  mqtt_path: '/mqtt',
+  mqtt_IsSSL: true,
+  mqtt_site_code: 'site_dc8302ni',
+  mqtt_mess: {
+    MessageLevel: '1.0',
+    TcpIP: 'emqttd10.panda-water.cn',
+    TcpPort: 443,
+    site_code: 'site_dc8302ni',
+  },
+  userInfo: {
+    LocalSite: 'site_dc8302ni',
+    site: '',
+  },
+};