fix: 增加更新时间

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

@@ -470,7 +470,7 @@ const ConfigurationView = (props) => {
 
     try {
       jsonCopy.nodeDataArray.forEach((item) => {
-        if (!(item.shName || item.figure === 'updateTime') || item.stationName !== name)
+        if (!(item.shName || item.category === 'timeCase') || item.stationName !== name)
           return false;
         const node = myDiagram.model.findNodeDataForKey(item.key);
         if (!item.stateName) {
@@ -486,14 +486,6 @@ const ConfigurationView = (props) => {
           }
         }
         mqttData.forEach((list) => {
-          if (node.figure === 'updateTime') {
-            myDiagram.model.setDataProperty(
-              node,
-              'text',
-              moment(list.Time).format('yyyy-MM-DD hh:mm:ss'),
-            );
-            return false;
-          }
           const itemID = list.ItemID;
           const num = itemID.lastIndexOf('.');
           const ptName = itemID.substring(0, num);
@@ -504,6 +496,15 @@ const ConfigurationView = (props) => {
             shName !== item.stateName
           )
             return false;
+          if (node.category === 'timeCase' && shName === item.shName) {
+            myDiagram.model.setDataProperty(node, 'text', moment(list.Time).format(node.format));
+            myDiagram.model.setDataProperty(
+              node,
+              'timeStr',
+              moment(list.Time).format('YYYY-MM-DD HH:mm:ss'),
+            );
+            return false;
+          }
           if (shName === item.shName) showNodeMethod(node, list);
           if (shName === item.stateName) stateMethod(node, list);
         });
@@ -2218,6 +2219,60 @@ const ConfigurationView = (props) => {
       ),
     );
 
+    // 更新时间定义
+    myDiagram.nodeTemplateMap.add(
+      'timeCase',
+      goJS(
+        go.Node,
+        'Auto',
+        nodeStyle(),
+        'Spot',
+        { locationSpot: go.Spot.Center, zOrder: 3, cursor: 'default' },
+        new go.Binding('zOrder', 'zOrder').makeTwoWay(),
+        new go.Binding('cursor', 'cursor').makeTwoWay(),
+        new go.Binding('location', 'loc', go.Point.parse).makeTwoWay(go.Point.stringify),
+        new go.Binding('angle').makeTwoWay(),
+        roleVisibleBinding(), // 绑定角色可见
+        goJS(
+          go.Shape,
+          'RoundedRectanglePlus',
+          { name: 'SHAPE', strokeWidth: 10, stroke: '#000000', parameter1: 0 },
+          new go.Binding('fill', 'fillColor').makeTwoWay(),
+          new go.Binding('stroke').makeTwoWay(),
+          new go.Binding('strokeWidth').makeTwoWay(),
+          new go.Binding('parameter1', 'radius').makeTwoWay(),
+          new go.Binding('desiredSize', 'size', go.Size.parse).makeTwoWay(go.Size.stringify),
+        ),
+        goJS(
+          go.TextBlock,
+          textStyle(),
+          {
+            // margin: 5,
+            maxSize: new go.Size(NaN, NaN),
+            minSize: new go.Size(NaN, 1),
+            wrap: go.TextBlock.WrapFit,
+            textAlign: 'center',
+            editable: true,
+            font: 'bold 12px Helvetica, Arial, sans-serif',
+            stroke: '#454545',
+          },
+          new go.Binding('text').makeTwoWay(),
+          new go.Binding('font', 'fontStyle'),
+          new go.Binding('stroke', 'fontStroke').makeTwoWay(),
+          new go.Binding('textAlign', 'fontAlign'),
+          new go.Binding('maxSize', 'textSize'),
+          new go.Binding('minSize', 'textSize'),
+        ),
+        {
+          // 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'),
+          ),
+        },
+      ),
+    );
+
     // 公用管定义
     myDiagram.nodeTemplateMap.add(
       'HBar',
@@ -2545,10 +2600,11 @@ const ConfigurationView = (props) => {
           resizeObjectName: 'SHAPE',
           rotatable: true,
         },
+        new go.Binding('angle').makeTwoWay(),
         roleVisibleBinding(), // 绑定角色可见
         goJS(
           go.Panel,
-          'Table',
+          'Auto',
           {
             name: 'PANEL',
           },
@@ -2556,11 +2612,15 @@ const ConfigurationView = (props) => {
             go.Shape,
             'Ellipse', // 定义形状
             { width: 37, height: 37, fill: 'transparent', stroke: 'transparent', strokeWidth: 1 },
-            new go.Binding('width', 'widthBox').makeTwoWay(),
-            new go.Binding('height', 'heightBox').makeTwoWay(),
+            new go.Binding('width', 'width', (v) => {
+              return v * 1.5;
+            }).makeTwoWay(),
+            new go.Binding('height', 'height', (v) => {
+              return v * 1.5;
+            }).makeTwoWay(),
           ),
           new go.Binding('desiredSize', 'size', go.Size.parse).makeTwoWay(go.Size.stringify),
-
+          new go.Binding('location', 'loc', go.Point.parse).makeTwoWay(go.Point.stringify),
           goJS(
             go.Picture,
             {
@@ -2570,6 +2630,7 @@ const ConfigurationView = (props) => {
               column: 0,
               scale: 1,
               source: require('./images/组态/状态/泵离线.svg'),
+              imageAlignment: go.Spot.Center,
               angle: 0,
             },
             new go.Binding('source', 'imgSrc', (v) => {
@@ -2577,7 +2638,7 @@ const ConfigurationView = (props) => {
             }).makeTwoWay(),
             new go.Binding('scale', 'scale').makeTwoWay(),
             new go.Binding('width', 'width').makeTwoWay(),
-            new go.Binding('angle', 'angle').makeTwoWay(),
+            // new go.Binding('angle', 'angle').makeTwoWay(),
             new go.Binding('height', 'height').makeTwoWay(),
           ),
         ),
@@ -2893,6 +2954,9 @@ const ConfigurationView = (props) => {
         });
         if (device) item.text = device;
       }
+      if (item.category == 'timeCase') {
+        item.timeStr = item.text;
+      }
       // 兼容V1之前版本（部分展示可支持）
       if (chartInfo.version === 'V1') return false;
       item.shName = item.showName || '';

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: '自定义',
+  },
+];