feat: 组态控制日志样式优化

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

@@ -7,24 +7,55 @@
 import { getRemoteOperationLog } from '../../apis';
 import BasicTable from '@wisdom-components/basictable';
 import LoadBox from '@wisdom-components/loadbox';
-import { Button, DatePicker, Input, Tag, Tooltip, ConfigProvider } from 'antd';
+import { Button, DatePicker, Input, Tag, Tooltip, ConfigProvider, Radio } from 'antd';
 import classNames from 'classnames';
 import moment from 'moment';
 import React, { useEffect, useState, useContext } from 'react';
 import './index.less';
+import { render } from 'less';
 
 const { RangePicker } = DatePicker;
 
+const dateList = [
+  {
+    key: 'roundClock',
+    name: '近24小时',
+  },
+  {
+    key: 'thisWeek',
+    name: '本周',
+  },
+  {
+    key: 'thisMonth',
+    name: '本月',
+  },
+  {
+    key: 'thisQuarter',
+    name: '本季度',
+  },
+  {
+    key: 'thisYear',
+    name: '今年',
+  },
+  {
+    key: 'customer',
+    name: '自定义',
+  },
+];
+
+const startFormat = 'YYYY-MM-DD 00:00:00';
+const endFormat = 'YYYY-MM-DD HH:mm:ss';
+
 const ControlRecords = ({ nodeData, bindList }) => {
   const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);
   const prefixCls = getPrefixCls('ec-configuration-control-records');
   const dateFormat = 'YYYY-MM-DD HH:mm:ss';
   const [time, setTime] = useState([
-    moment().subtract(7, 'day').format('YYYY-MM-DD 00:00:00'),
+    moment().subtract(24, 'hour').format('YYYY-MM-DD HH:mm:ss'),
     moment().format('YYYY-MM-DD HH:mm:ss'),
   ]);
+  const [dateValue, setDateValue] = useState('roundClock');
   const [userName, setUserName] = useState('');
-  const [deviceCode, setDeviceCode] = useState(bindList?.code);
   const [tableData, setTableData] = useState([]);
   const [tableLoading, setTableLoading] = useState(true);
   const [totalNum, setTotalNum] = useState(0);
@@ -60,26 +91,7 @@ const ControlRecords = ({ nodeData, bindList }) => {
       align: 'center',
       width: 100,
       ellipsis: true,
-    },
-    {
-      title: '控制点位',
-      dataIndex: 'controlPoint',
-      align: 'center',
-      width: 140,
-      ellipsis: true,
-      onCell: () => ({
-        style: {
-          maxWidth: 140,
-          overflow: 'hidden',
-          whiteSpace: 'nowrap',
-          textOverflow: 'ellipsis',
-        },
-      }),
-      render: (record) => (
-        <Tooltip placement="topLeft" title={record}>
-          {record}
-        </Tooltip>
-      ),
+      render: (record) => (record ? moment(record).format('YYYY-MM-DD HH:mm:ss') : '-'),
     },
     {
       title: '初始状态',
@@ -123,7 +135,7 @@ const ControlRecords = ({ nodeData, bindList }) => {
       ),
     },
     {
-      title: '等待时间',
+      title: '等待时间(ms)',
       dataIndex: 'controlWatiTime',
       width: 80,
       align: 'center',
@@ -161,25 +173,81 @@ const ControlRecords = ({ nodeData, bindList }) => {
       });
   };
 
-  const timeChange = (dates, dateStrings) => {
-    setTime(dateStrings);
-  };
-
   const userChange = (e) => {
     setUserName(e.target.value);
   };
 
+  const userEnter = (e) => {
+    setParams({
+      ...params,
+      pageIndex: 1,
+      dateFrom: time[0],
+      dateTo: time[1],
+      userName: e.target.value,
+    });
+  };
+
+  const timeChange = (dates) => {
+    onDateChange('customer', dates);
+  };
+
+  const onRadioChange = (e) => {
+    onDateChange(e.target.value);
+  };
+
+  const onDateChange = (key, data = []) => {
+    let start = '',
+      end = '';
+    switch (key) {
+      case 'roundClock':
+        start = moment().subtract(24, 'hour').format('YYYY-MM-DD HH:mm:ss');
+        end = moment().format('YYYY-MM-DD HH:mm:ss');
+        break;
+      case 'thisWeek':
+        start = moment().startOf('week').format(startFormat);
+        end = moment().endOf('week').format(endFormat);
+        break;
+      case 'thisMonth':
+        start = moment().startOf('month').format(startFormat);
+        end = moment().endOf('month').format(endFormat);
+        break;
+      case 'thisQuarter':
+        start = moment().startOf('quarter').format(startFormat);
+        end = moment().endOf('quarter').format(endFormat);
+        break;
+      case 'thisYear':
+        start = moment().startOf('year').format(startFormat);
+        end = moment().endOf('year').format(endFormat);
+        break;
+      case 'customer':
+        if (data && data.length > 0) {
+          start = moment(data[0]).format(startFormat);
+          end = moment(data[1]).format(endFormat);
+        } else {
+          return setDateValue(key);
+        }
+        break;
+    }
+    setDateValue(key);
+    setTime([start, end]);
+    if (data && data.length > 0) return false;
+    setParams({
+      ...params,
+      pageIndex: 1,
+      dateFrom: time[0],
+      dateTo: time[1],
+      userName: userName,
+    });
+  };
+
   const pageChange = (pageIndex, pageSize) => {
     // 分页改变
-    params.pageIndex = pageIndex;
-    params.pageSize = pageSize;
-    setParams({ ...params });
+    setParams({ ...params, pageIndex: pageIndex, pageSize: pageSize });
   };
 
   const operateBtn = () => {
     const _params = {
       pageIndex: 1,
-      deviceCode: deviceCode,
       dateFrom: time[0],
       dateTo: time[1],
       userName: userName,
@@ -198,38 +266,36 @@ const ControlRecords = ({ nodeData, bindList }) => {
     <div className={classNames(prefixCls)}>
       <div className={classNames('recordsHeaderWrap')}>
         <div className={classNames('recordsHeader')}>
-          <span className={classNames('operateName', 'operateTime')}>设备类型：</span>
-          <Input
-            placeholder="请输入设备类型"
-            readOnly
-            value={bindList?.type || ''}
-            style={{ width: 150 }}
-          />
-          <span className={classNames('operateName')}>设备编码：</span>
-          <Input
-            placeholder="请输入设备编码"
-            readOnly
-            value={bindList?.code || ''}
-            style={{ width: 150 }}
-          />
-          <span className={classNames('operateName')}>操作时间：</span>
-          <RangePicker
-            showTime
-            allowClear={false}
-            value={[moment(time[0], dateFormat), moment(time[1], dateFormat)]}
-            onChange={timeChange}
-          />
+          <Radio.Group value={dateValue} onChange={onRadioChange}>
+            {dateList.map((item) => (
+              <Radio.Button key={item.key} value={item.key}>
+                {item.name}
+              </Radio.Button>
+            ))}
+          </Radio.Group>
+          {
+            <RangePicker
+              showTime
+              allowClear={false}
+              value={[moment(time[0], dateFormat), moment(time[1], dateFormat)]}
+              onChange={timeChange}
+              disabled={dateValue !== 'customer'}
+              style={{ marginLeft: '10px' }}
+            />
+          }
           <span className={classNames('operateName')}>操作人：</span>
           <Input
             placeholder="请输入操作人"
             allowClear
             onChange={userChange}
+            onPressEnter={userEnter}
             style={{ width: 150 }}
           />
           <Button type="primary" className={classNames('operateName')} onClick={operateBtn}>
             确定
           </Button>
         </div>
+        <div className={classNames('recordsHeaderInfo')}>{`设备编码：${bindList?.code || ''}`}</div>
       </div>
       <div className={classNames('recordscontent')}>
         <BasicTable

packages/extend-components/EC_ConfigurationView/src/components/ControlRecords/index.less

@@ -12,17 +12,19 @@
 
   .recordsHeaderWrap {
     display: flex;
-    align-items: center;
+    align-items: flex-end;
     justify-content: space-between;
     margin-bottom: 5px;
     background: #ffffff;
-    padding-bottom: 10px;
+    flex-direction: column;
+    flex: none;
   }
 
   .recordsHeader {
     display: flex;
     align-items: center;
     flex: none;
+    width: 100%;
 
     .operateName {
       flex: none;