fix: 增加统计查看

config/config.js

@@ -130,6 +130,7 @@ export default {
           'EC_RealTimeInfo',
           'EC_ConfigurationView',
           'EC_HistoryView',
+          'EC_StatisticalHistoryView',
         ],
       },
     ],

packages/extend-components/EC_ConfigurationView/package.json

@@ -33,7 +33,6 @@
     },
     "dependencies": {
         "@babel/runtime": "^7.17.9",
-        "@wisdom-components/ec_historyview": "1.21.0",
         "@wisdom-components/empty": "^1.3.9",
         "@wisdom-components/loadbox": "^1.1.5",
         "@wisdom-components/mqttview": "^1.3.7",

packages/extend-components/EC_ConfigurationView/src/RealModel.js

@@ -18,6 +18,7 @@ import {
 import MqttView from '@wisdom-components/mqttview';
 import PropTypes from 'prop-types';
 import HistoryView from '@wisdom-components/ec_historyview';
+import StatisticalHistoryView from '@wisdom-components/ec_statisticalhistoryview';
 import * as go from './js/go';
 import GuidedDraggingTool from './js/GuidedDraggingTool';
 import TopRotatingTool from './js/RotatingTool';
@@ -57,6 +58,7 @@ let jumpModalProps = null;
 let modalProps = {};
 let modalWidth = 520;
 let historyInfoParams = [];
+let statisticalInfoParams = {};
 let nodeData = null; // 选中节点的数据
 let twoID = '';
 
@@ -75,6 +77,7 @@ const ConfigurationView = (props) => {
   const [isModalVisible, setIsModalVisible] = useState(false);
   const [isAuModalVisible, setIsAuModalVisible] = useState(false); // 登录模态框
   const [isHIModalVisible, setIsHIModalVisible] = useState(false); // 历史曲线模态框
+  const [isSTHIModalVisible, setIsSTHIModalVisible] = useState(false); // 统计历史曲线模态框
   const [isJumpModalVisible, setIsJumpModalVisible] = useState(false); // 画板跳转模态框
   const [spinning, setSpinning] = useState(true); // 画板loading
   const [isEmpty, setIsEmpty] = useState(false); // 画板无数据状态
@@ -1104,6 +1107,20 @@ const ConfigurationView = (props) => {
     setIsHIModalVisible(true);
   };
 
+  /** **************************************统计历史模态渲染****************************************** */
+  const statisticalModalRender = (data, list) => {
+    const opRule = JSON.parse(data.opRule);
+    const stType = opRule && opRule.stType ? opRule.stType : '';
+    if (!data.shName) return false;
+    statisticalInfoParams = {
+      deviceCode: list.code,
+      sensors: data.shName,
+      deviceType: list.type,
+      statisticType: stType,
+    };
+    setIsSTHIModalVisible(true);
+  };
+
   /** **************************************渲染按钮控制****************************************** */
   const renderSwitchControlModal = () => {
     return (
@@ -2267,7 +2284,13 @@ const ConfigurationView = (props) => {
           // define a tooltip for each node that displays the color as text
           toolTip: goJS(
             'ToolTip',
-            goJS(go.TextBlock, { margin: 2 }, new go.Binding('text', 'timeStr'),new go.Binding('visible', 'toolTip')),new go.Binding('visible', 'toolTip'),
+            goJS(
+              go.TextBlock,
+              { margin: 2 },
+              new go.Binding('text', 'timeStr'),
+              new go.Binding('visible', 'toolTip'),
+            ),
+            new go.Binding('visible', 'toolTip'),
           ),
         },
       ),
@@ -2394,7 +2417,11 @@ const ConfigurationView = (props) => {
               return false;
             }
             // 历史查看
-            if (data.opType && data.shName) historyModalRender(data, list);
+            if (data.opType && data.opType === '历史查看' && data.shName)
+              historyModalRender(data, list);
+            // 统计历史查看
+            if (data.opType && data.opType === '统计查看' && data.shName)
+              statisticalModalRender(data, list);
           },
         },
       ),
@@ -3025,11 +3052,28 @@ const ConfigurationView = (props) => {
           onOk={() => setIsHIModalVisible(false)}
           onCancel={() => setIsHIModalVisible(false)}
           getContainer={ConfigurationRef.current}
+          title={historyInfoParams.length ? historyInfoParams[0].sensors || '' : ''}
           wrapClassName={classNames(`${prefixCls}-historyInfoModal`)}
         >
           <HistoryView deviceParams={historyInfoParams} />
         </Modal>
       )}
+      {/* 统计历史曲线 */}
+      {isSTHIModalVisible && (
+        <Modal
+          centered
+          width={1200}
+          footer={null}
+          open={isSTHIModalVisible}
+          onOk={() => setIsSTHIModalVisible(false)}
+          onCancel={() => setIsSTHIModalVisible(false)}
+          getContainer={ConfigurationRef.current}
+          title={statisticalInfoParams.sensors || ''}
+          wrapClassName={classNames(`${prefixCls}-historyInfoModal`)}
+        >
+          <StatisticalHistoryView deviceParams={statisticalInfoParams} />
+        </Modal>
+      )}
       {/* 画板跳转 */}
       {isJumpModalVisible && jumpModalProps && (
         <DragModal

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

-import { request } from '@wisdom-utils/utils/es';
+import { request } from '@wisdom-utils/utils';
 
 const REQUEST_METHOD_GET = 'get';
 const REQUEST_METHOD_POST = 'post';

packages/extend-components/EC_ConfigurationView/src/component/StatisticalHistoryView/index.js

-import React, { useState, useEffect, useRef, useContext } from 'react';
-import classNames from 'classnames';
-import moment from 'moment';
-import axios from 'axios';
-import Empty from '@wisdom-components/empty';
-import TimeRangePicker from '@wisdom-components/timerangepicker';
-import LoadBox from '@wisdom-components/loadbox';
-import { Input, message, Modal, Form, ConfigProvider, Button } from 'antd';
-import {
-  ExclamationCircleOutlined,
-  DoubleLeftOutlined,
-  LeftOutlined,
-  RightOutlined,
-  DoubleRightOutlined,
-} from '@ant-design/icons';
-import { getStatisticsInfo } from './apis';
-
-const StatisticalHistoryView = (props) => {
-  const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);
-  const prefixCls = getPrefixCls('statistical-history-view');
-  const componentPrefix = getPrefixCls('');
-
-  const [dateValue, setDateValue] = useState(null);
-  const [timeValue, setTimeValue] = useState(null);
-  const [data, setData] = useState({ startDate: '', endDate: '' });
-  const [time, setTime] = useState({ startTime: '', endTime: '' });
-
-  const onDateChange = () => {
-    
-  }
-
-  return (
-    <div className={classNames(prefixCls)}>
-      <div className={classNames('historyView')}>
-        <div className={classNames('historyViewHeader')}>
-          <span>时间选择：</span>
-          <TimeRangePicker
-            value={dateValue}
-            onChange={onDateChange}
-            defaultValue={dateList[0].key}
-            dataSource={dateList}
-            layout={'horizontal'}
-          />
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default StatisticalHistoryView;
-
-const dateList = [
-  {
-    key: 'today',
-    name: '今日',
-  },
-  {
-    key: 'thisWeek',
-    name: '本周',
-  },
-  {
-    key: 'thisMonth',
-    name: '本月',
-  },
-  {
-    key: 'customer',
-    name: '自定义',
-  },
-];

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

@@ -3,9 +3,9 @@ import { Button } from 'antd';
 import PandaConfiguration from '../index';
 // import PandaConfigurationView from '../../es/index';
 const Demo = () => {
-  const [name, setName] = useState('水厂工艺流程段');
+  const [name, setName] = useState('调度');
   const [devices, setDevices] = useState(
-    'EQZT00000008,EQZT00000007,CPDA00000001,JYBZ00000003,JYBZ00000005,JYBZ00000004,SC00000003',
+    'QSBF00000001,CGS00000001,SZ00000001,SZ00000008,SZ00000006,SZ00000010,SZ00000007,YLB00000019,YLB00000018,YLB00000031,YLB00000036,YLB00000006,YLB00000029,YLB00000038,YLB00000033,YLB00000027,YLB00000044,YLB00000030,YLB00000035,YLB00000013,YLB00000041,YLB00000042,JFJ00000001,XNCDC00000001,SLC00000001,TLC00000001,SC00000023,SZ00000005,SZ00000004,SZ00000015,SZ00000014,SZ00000011,SZ00000012,YLB00000039,YLB00000034,YLB00000040,SB00000014,SB00000007,SB00000006,SB00000004,SB00000018,SB00000027,SB00000026,SB00000019,SB00000048,SB00000302,SB00000045,SB00000047,SB00000041,SB00000036,SB00000029,SC00000023,SB00000288,SB00000028,SB00000030,SZ00000016,LLJ00000002,LLJ00000003,LLJ00000004,LLJ00000001',
   );
   return (
     <>
@@ -44,18 +44,18 @@ export default Demo;
 
 const globalConfig = {
   token: 'a1372ef0ce7b4e4884d31cfd99fe92f6',
-  mqtt_iotIP: 'emqttd10.panda-water.cn:443',
+  mqtt_iotIP: '221.229.200.85:8083',
   mqtt_path: '/mqtt',
-  mqtt_IsSSL: true,
-  mqtt_site_code: 'site_dc8302ni',
+  mqtt_IsSSL: false,
+  mqtt_site_code: 'site_qd5880vd',
   mqtt_mess: {
     MessageLevel: '1.0',
-    TcpIP: 'emqttd10.panda-water.cn',
-    TcpPort: 443,
-    site_code: 'site_dc8302ni',
+    TcpIP: '221.229.200.85',
+    TcpPort: 8083,
+    site_code: 'site_qd5880vd',
   },
   userInfo: {
-    LocalSite: 'site_dc8302ni',
+    LocalSite: 'site_qd5880vd',
     site: '',
   },
 };

packages/extend-components/EC_StatisticalHistoryView/README.md

+# `@wisdom-components/EC_StatisticalHistoryView`
+
+> TODO: description
+
+## Usage
+
+```
+const ecStatisticalHistoryView = require('@wisdom-components/ec_statisticalhistoryview');
+
+// TODO: DEMONSTRATE API
+```

packages/extend-components/EC_StatisticalHistoryView/package.json

+{
+  "name": "@wisdom-components/ec_statisticalhistoryview",
+  "version": "1.0.0",
+  "description": "> TODO: description",
+  "author": "lijiwen <961370825@qq.com>",
+  "homepage": "",
+  "license": "ISC",
+  "sideEffects": [
+      "*.less"
+  ],
+  "module": "es/index.js",
+  "main": "lib/index.js",
+  "files": [
+      "lib",
+      "es",
+      "dist"
+  ],
+  "directories": {
+      "lib": "lib",
+      "es": "es",
+      "dist": "dist",
+      "test": "__tests__"
+  },
+  "publishConfig": {
+      "registry": "https://g.civnet.cn:4873/"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://g.civnet.cn:8443/ReactWeb5/wisdom-components.git"
+  },
+  "scripts": {
+    "test": "echo \"Error: run tests from root\" && exit 1"
+  },
+  "dependencies": {
+    "@babel/runtime": "^7.17.9"
+  }
+}
\ No newline at end of file

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

+---
+title: EC_StatisticalHistoryView - 统计查看
+nav:
+  title: 业务组件
+  path: /extend-components
+group:
+  path: /
+---
+
+# EC_StatisticalHistoryView 统计查看
+
+基础业务组件
+
+- 统计查看
+
+## 何时使用
+
+- 在统计查看时。
+
+## 代码演示
+
+<code src="./demos/Basic.tsx">
+
+## API
+
+| 参数           | 说明                             | 类型             | 默认值 |
+| -------------- | -------------------------------- | ---------------- | ------ |
+| name `必需`    | 画板名称                         | string           | ''     |
+| devices `必需` | 画板设备                         | array            | []     |
+| deviceName     | 画板设备名称                     | array            | []     |
+| config         | 全局 globalConfig,没有时需要传递 | object           | {}     |
+| isZoom         | 是否可缩放(手持上建议设置 true)  | boolean          | false  |
+| flowShow       | 是否水流效果（无数据表现）       | boolean          | true   |
+| customBack     | 自定义交互的回调，返回点击的模型 | function(node){} | -      |
+
+### 工艺回放
+
+| 参数     | 说明                   | 类型                                 | 默认值 |
+| -------- | ---------------------- | ------------------------------------ | ------ |
+| speed    | 历史数据播放当前进度值 | number                               | 0      |
+| play     | 历史数据是否播放       | boolean                              | false  |
+| times    | 历史数据播放速度（s）  | number                               | 2      |
+| params   | 历史数据服务参数       | object                               | {}     |
+| callback | 历史数据播放的回调     | function(speed, total, play, time){} | -      |

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

+import { request } from '@wisdom-utils/utils';
+
+const REQUEST_METHOD_GET = 'get';
+const REQUEST_METHOD_POST = 'post';
+// eslint-disable-next-line no-undef
+const baseURI = typeof DUMI_TYPE !== 'undefined' && DUMI_TYPE === 'dumi' ? '/api' : '';
+
+// 获取统计数据
+export function getStatisticsInfo(data) {
+  return request({
+    url: `${baseURI}/PandaMonitor/Monitor/Device/EquipmentDataReport`,
+    method: REQUEST_METHOD_POST,
+    data,
+  });
+}

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

+import React, { useState } from 'react';
+import { Button } from 'antd';
+import StatisticalHistoryView from '../index';
+// import PandaConfigurationView from '../../es/index';
+const Demo = () => {
+  // const params = {
+  //   deviceCode: 'JYBZ00000004',
+  //   sensors: '出水实际压力',
+  //   deviceType: '加压泵站',
+  //   statisticType: '',
+  // }
+  const params = {
+    deviceCode: 'SC00000023',
+    sensors: '出水累计流量',
+    deviceType: '水厂',
+    statisticType: '',
+  }
+  return (
+    <>
+      <div style={{ width: '100%', height: '600px'}}>
+        <StatisticalHistoryView deviceParams={params}/>
+      </div>
+    </>
+  );
+};
+
+export default Demo;
\ No newline at end of file

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

+@root-entry-name: 'default';
+@import '~antd/es/style/themes/index.less';
+@ec-statistical-history-view-prefix-cls: ~'@{ant-prefix}-ec-statistical-history-view';
+
+.@{ec-statistical-history-view-prefix-cls} {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+
+  &-load-box {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  &-empty {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  &-box {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    overflow: hidden;
+  }
+
+  &-header {
+    flex: none;
+    margin-bottom: 10px;
+  }
+
+  &-select {
+    margin: 0 10px;
+    width: 100px;
+  }
+
+  &-content {
+    flex: 1;
+    display: flex;
+    overflow: hidden;
+  }
+
+  &-chart {
+    flex: 3;
+    overflow: hidden;
+  }
+
+  &-table {
+    flex: 2;
+    overflow: hidden;
+  }
+}
\ No newline at end of file