fix: '定时任务优化'

src/pages/platformCenter/scheduledTasks/components/LookModal.jsx

+import React, { useState, useEffect, useRef } from 'react';
+import {
+  Table,
+  Button,
+  notification,
+  DatePicker,
+  message,
+  Tooltip,
+  Tag,
+  Modal,
+  Select,
+  Radio,
+  Form,
+  Pagination,
+} from 'antd';
+import moment from 'moment';
+import styles from './LookModal.less';
+import { GetIISAgentSite, QueryIISAgentCalllog } from '@/services/scheduledTasks/api';
+
+const { RangePicker } = DatePicker;
+const LookModal = props => {
+  const { visible, onCancel, keepTableList } = props;
+  const [form] = Form.useForm(null);
+  const [currentTime, setCurrentTime] = useState('昨天');
+  const [siteData, setSiteData] = useState([]);
+  const [tableData, setTableData] = useState([]);
+  const tableList = useRef({
+    pageSize: 20,
+    pageIndex: 1,
+    total: '',
+    beginDate: `${moment()
+      .subtract(1, 'days')
+      .format('YYYY-MM-DD')} 00:00`,
+    endDate: `${moment()
+      .subtract(1, 'days')
+      .format('YYYY-MM-DD')} 23:59`,
+    jobName: '',
+    state: '',
+    siteName: '',
+  });
+
+  // 使用ref来确定一些在组件更新的时候不需要更改的变量
+  const fixedVariable = useRef(['昨天', '今天', '上周', '本周', '本月', '上月', '自定义']);
+
+  useEffect(() => {
+    getSiteList();
+    getLogList();
+  }, [visible]);
+
+  const getSiteList = () => {
+    GetIISAgentSite().then(res => {
+      if (res.code === 0) {
+        setSiteData(res.data);
+      } else {
+        notification.error({
+          message: '提示',
+          duration: 3,
+          description: res.msg,
+        });
+      }
+    });
+  };
+
+  const getLogList = val => {
+    if (!val) {
+      tableList.current.pageIndex = 1;
+    }
+    QueryIISAgentCalllog(tableList.current).then(res => {
+      if (res.code === 0) {
+        setTableData(res.data.data);
+        tableList.current.total = res.data.count;
+      }
+    });
+  };
+
+  // 时间选择
+  const timeChoose = type => {
+    setCurrentTime(type);
+    switch (type) {
+      case '全部':
+        tableList.current.beginDate = '';
+        tableList.current.endDate = '';
+        break;
+      case '今天':
+        tableList.current.beginDate = `${moment().format('YYYY-MM-DD')} 00:00`;
+        tableList.current.endDate = `${moment().format('YYYY-MM-DD')} 23:59`;
+        break;
+      case '昨天':
+        tableList.current.beginDate = `${moment()
+          .subtract(1, 'days')
+          .format('YYYY-MM-DD')} 00:00`;
+        tableList.current.endDate = `${moment()
+          .subtract(1, 'days')
+          .format('YYYY-MM-DD')} 23:59`;
+        break;
+      case '本周':
+        tableList.current.beginDate = `${moment()
+          .week(moment().week())
+          .startOf('week')
+          .format('YYYY-MM-DD')} 00:00`;
+        tableList.current.endDate = `${moment()
+          .week(moment().week())
+          .endOf('week')
+          .format('YYYY-MM-DD')} 23:59`;
+        break;
+      case '上周':
+        tableList.current.beginDate = `${moment()
+          .week(moment().week() - 1)
+          .startOf('week')
+          .format('YYYY-MM-DD')} 00:00`;
+        tableList.current.endDate = `${moment()
+          .week(moment().week() - 1)
+          .endOf('week')
+          .format('YYYY-MM-DD')} 23:59`;
+        break;
+      case '本月':
+        tableList.current.beginDate = `${moment()
+          .month(moment().month())
+          .startOf('month')
+          .format('YYYY-MM-DD')} 00:00`;
+        tableList.current.endDate = `${moment()
+          .month(moment().month())
+          .endOf('month')
+          .format('YYYY-MM-DD')} 23:59`;
+        break;
+      case '上月':
+        tableList.current.beginDate = `${moment()
+          .month(moment().month() - 1)
+          .startOf('month')
+          .format('YYYY-MM-DD')} 00:00`;
+        tableList.current.endDate = `${moment()
+          .month(moment().month() - 1)
+          .endOf('month')
+          .format('YYYY-MM-DD')} 23:59`;
+
+        break;
+      case '今年':
+        tableList.current.beginDate = `${moment()
+          .year(moment().year())
+          .startOf('year')
+          .format('YYYY-MM-DD')} 00:00`;
+        tableList.current.endDate = `${moment()
+          .year(moment().year())
+          .endOf('year')
+          .format('YYYY-MM-DD')} 23:59`;
+        break;
+      case '去年':
+        tableList.current.beginDate = `${moment()
+          .year(moment().year() - 1)
+          .startOf('year')
+          .format('YYYY-MM-DD')}00:00`;
+        tableList.current.endDate = `${moment()
+          .year(moment().year() - 1)
+          .endOf('year')
+          .format('YYYY-MM-DD')}23:59`;
+        break;
+      default:
+        tableList.current.beginDate = '';
+        tableList.current.endDate = '';
+        break;
+    }
+    getLogList();
+  };
+
+  // 自定义时间日期变化函数
+  const timeChange = value => {
+    tableList.current.beginDate = `${value[0].format('YYYY-MM-DD')} 00:00`;
+    tableList.current.endDate = `${value[1].format('YYYY-MM-DD')} 23:59`;
+    getLogList();
+  };
+
+  const columns = [
+    {
+      title: '请求时间',
+      dataIndex: '日志时间',
+      key: '日志时间',
+      width: 100,
+      fixed: 'center',
+      render: text => <Tooltip title={text}>{text}</Tooltip>,
+    },
+    {
+      title: '站点名称',
+      dataIndex: '站点名称',
+      key: '站点名称',
+      align: 'center',
+      width: 200,
+      onCell: () => ({
+        style: {
+          maxWidth: 200,
+          overflow: 'hidden',
+          whiteSpace: 'nowrap',
+          textOverflow: 'ellipsis',
+        },
+      }),
+      render: text => <Tooltip title={text}>{text}</Tooltip>,
+    },
+    {
+      title: '计划名称',
+      dataIndex: '请求名称',
+      key: '请求名称',
+      align: 'center',
+      width: 150,
+      onCell: () => ({
+        style: {
+          maxWidth: 200,
+          overflow: 'hidden',
+          whiteSpace: 'nowrap',
+          textOverflow: 'ellipsis',
+        },
+      }),
+      render: text => <Tooltip title={text}>{text}</Tooltip>,
+    },
+    {
+      title: 'URL',
+      dataIndex: '请求URL',
+      key: '请求URL',
+      align: 'center',
+      width: 180,
+      onCell: () => ({
+        style: {
+          maxWidth: 180,
+          overflow: 'hidden',
+          whiteSpace: 'nowrap',
+          textOverflow: 'ellipsis',
+        },
+      }),
+      render: text => <Tooltip title={text}>{text}</Tooltip>,
+    },
+    {
+      title: '状态',
+      dataIndex: '请求状态',
+      key: '请求状态',
+      align: 'center',
+      width: 80,
+    },
+    {
+      title: '耗时（ms）',
+      dataIndex: '耗时',
+      key: '耗时',
+      align: 'center',
+      width: 150,
+      onCell: () => ({
+        style: {
+          maxWidth: 150,
+          overflow: 'hidden',
+          whiteSpace: 'nowrap',
+          textOverflow: 'ellipsis',
+        },
+      }),
+      render: text => <Tooltip title={text}>{text}</Tooltip>,
+    },
+    {
+      title: '返回结果',
+      dataIndex: '返回结果',
+      key: '返回结果',
+      align: 'center',
+      width: 300,
+      onCell: () => ({
+        style: {
+          maxWidth: 300,
+          overflow: 'hidden',
+          whiteSpace: 'nowrap',
+          textOverflow: 'ellipsis',
+        },
+      }),
+      render: text => <Tooltip title={text}>{text}</Tooltip>,
+    },
+  ];
+
+  const paginationChange = (page, pageSizes) => {
+    tableList.current.pageSize = pageSizes;
+    tableList.current.pageIndex = page;
+    getLogList('flag');
+  };
+
+  const siteChange = e => {
+    tableList.current.siteName = e;
+    getLogList();
+  };
+
+  const planChange = e => {
+    tableList.current.jobName = e;
+    getLogList();
+  };
+
+  const stateChange = e => {
+    tableList.current.state = e;
+    getLogList();
+  };
+
+  return (
+    <Modal title="调用日志" visible={visible} onCancel={onCancel} width="90%" footer={false}>
+      <div className={styles.lookModal}>
+        <div className={styles.header}>
+          <span>时间选择：</span>
+          <Radio.Group value={currentTime} className={styles.radioList}>
+            {fixedVariable.current.map(v => (
+              <Radio.Button
+                value={v}
+                key={v}
+                onClick={() => {
+                  timeChoose(v);
+                }}
+              >
+                {v}
+              </Radio.Button>
+            ))}
+          </Radio.Group>
+          {currentTime === '自定义' ? <RangePicker showToday onChange={timeChange} /> : ''}
+          <div className={styles.select}>
+            <span>站点名称：</span>
+            <Select
+              style={{ width: '175px' }}
+              allowClear
+              placeholder="请选择站点名称"
+              onChange={e => siteChange(e)}
+            >
+              {siteData && siteData.map(v => <Select.Option value={v}>{v}</Select.Option>)}
+            </Select>
+          </div>
+          <div className={styles.select}>
+            <span>计划名称：</span>
+            <Select
+              style={{ width: '155px' }}
+              allowClear
+              placeholder="请选择任务性质"
+              onChange={e => planChange(e)}
+            >
+              {keepTableList.map(v => (
+                <Select.Option value={v.Name}>{v.Name}</Select.Option>
+              ))}
+            </Select>
+          </div>
+          <div className={styles.select}>
+            <span>请求状态:</span>
+            <Select
+              style={{ width: '155px', marginLeft: '10px' }}
+              allowClear
+              placeholder="请选择请求状态"
+              onChange={e => stateChange(e)}
+            >
+              <Select.Option value="">全部</Select.Option>
+              <Select.Option value={true}>成功</Select.Option>
+              <Select.Option value={false}>异常</Select.Option>
+            </Select>
+          </div>
+        </div>
+        <div className={styles.table}>
+          <Table
+            size="small"
+            bordered
+            columns={columns}
+            dataSource={tableData}
+            scroll={{ y: 'calc(100% - 40px)' }}
+            pagination={false}
+          />
+        </div>
+        <div className={styles.footer}>
+          <Pagination
+            total={tableList.current.total}
+            showTotal={(aa, range) =>
+              `第${range[0]}-${range[1]} 条/共 ${tableList.current.total} 条`
+            }
+            pageSizeOptions={[10, 20, 40, 100]}
+            current={tableList.current.pageIndex}
+            onChange={paginationChange}
+            size="small"
+            pageSize={tableList.current.pageSize}
+            showSizeChanger
+          />
+        </div>
+      </div>
+    </Modal>
+  );
+};
+
+export default LookModal;

src/pages/platformCenter/scheduledTasks/components/LookModal.less

+.lookModal {
+  width: 100%;
+  height: 700px;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  .header {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    width: 100%;
+    padding: 5px 10px;
+    .select {
+      margin: 0 10px;
+    }
+    .radioList {
+      margin: 0px 10px;
+    }
+  }
+  .table {
+    flex: 1;
+    overflow: hidden;
+    padding: 10px 10px 0px 10px;
+    :global {
+      .ant-table-wrapper {
+        height: 100%;
+
+        .ant-spin-nested-loading {
+          height: 100%;
+
+          .ant-spin-container {
+            height: 100%;
+
+            .ant-table.ant-table-small {
+              height: 100%;
+
+              .ant-table-container {
+                height: 100%;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+  .footer {
+    padding: 10px;
+    display: flex;
+    justify-content: flex-end;
+  }
+}

src/pages/platformCenter/scheduledTasks/index.jsx

@@ -16,11 +16,11 @@ import {
   Select,
 } from 'antd';
 import {
-  SearchOutlined,
-  FundViewOutlined,
   EditTwoTone,
   DeleteOutlined,
   PlusOutlined,
+  CalendarOutlined,
+  ZoomInOutlined,
 } from '@ant-design/icons';
 import 'moment/dist/locale/zh-cn';
 import styles from './index.less';
@@ -28,22 +28,28 @@ import {
   GetIISAgentConfig,
   DeleteIISAgentConfig,
   AddIISAgentConfig,
+  GetIISAgentLog,
 } from '@/services/scheduledTasks/api';
 import AddModal from './components/AddModal';
+import LookModal from './components/LookModal';
 import PushTest from './components/PushTest/PushTest';
 
 const { Option } = Select;
+let timer = null;
 const ScheduledTasks = () => {
   const [loading, setLoading] = useState(false); // 源数据
   const [requestUrl, setRequestUrl] = useState(''); // 接口名称筛选
   const [showSearchStyle, setShowSearchStyle] = useState(false); // 是否显示模糊查询样式
   const [keepTableList, setKeepTableList] = useState([]);
   const [addVisible, setAddVisible] = useState(false);
+  const [lookVisible, setLookVisible] = useState(false);
   const [type, setType] = useState('');
   const [recordItem, setRecordItem] = useState();
   const [pushTestVisible, setPushTestVisible] = useState(false);
   const typeValue = useRef('重复执行');
   const [columnsData, setColumnsData] = useState([]);
+  const scroll = useRef();
+  const [logList, setLogList] = useState([]);
 
   const columns = [
     {
@@ -172,8 +178,83 @@ const ScheduledTasks = () => {
   useEffect(() => {
     getTableList();
     setColumnsData(columns);
+    getIISAgentLog();
+    return () => {
+      clearInterval(timer);
+      timer = null;
+    };
   }, []);
 
+  const getIISAgentLog = () => {
+    // const worker = new Worker('logWorker.js');
+    // GetIISAgentLog().then(res => {
+    //   if (res.code === 0) {
+    //     debugger;
+    //     worker.postMessage(res.data);
+    //     worker.onmessage = e => {
+    //       setLogList(e.data);
+    //       debugger;
+    //       scroll.current.scrollTop = scroll.current.scrollHeight;
+    //       timer = setTimeout(() => {
+    //         getIISAgentLog();
+    //       }, 2000);
+    //     };
+    //   } else {
+    //     notification.error({
+    //       message: '提示',
+    //       duration: 3,
+    //       description: res.msg,
+    //     });
+    //     clearInterval(timer);
+    //     timer = null;
+    //   }
+    // });
+    GetIISAgentLog().then(res => {
+      if (res.code === 0) {
+        let arr = [];
+        arr.push(
+          res.data.split(/(\r\n)|(\n)/).map((item, index) => {
+            // eslint-disable-next-line react/no-danger
+            let mes = item?.indexOf('[信息]');
+            let warn = item?.indexOf('[警告]');
+            if (mes !== -1) {
+              return (
+                <div
+                  style={{ color: 'aqua' }}
+                  key={index}
+                  dangerouslySetInnerHTML={{ __html: item }}
+                />
+              );
+            } else if (warn !== -1) {
+              return (
+                <div
+                  style={{ color: 'yellow' }}
+                  key={index}
+                  dangerouslySetInnerHTML={{ __html: item }}
+                />
+              );
+            } else {
+              return <div key={index} dangerouslySetInnerHTML={{ __html: item }} />;
+            }
+          }),
+        );
+        setLogList(arr);
+        scroll.current.scrollTop = scroll.current.scrollHeight;
+        timer = setTimeout(() => {
+          getIISAgentLog();
+        }, 2000);
+      } else {
+        notification.error({
+          message: '提示',
+          duration: 3,
+          description: res.msg,
+        });
+        clearInterval(timer);
+        timer = null;
+      }
+    });
+  };
+
   const getTableList = (search, planType) => {
     let newSearch = search ? search : requestUrl;
     let newType = planType ? planType : typeValue.current;
@@ -199,17 +280,6 @@ const ScheduledTasks = () => {
     });
   };
 
-  const changeSwitch = (e, record) => {
-    // AddIISAgentConfig({ ...record, Enabled: e }).then(res => {
-    //   if (res.code === 0) {
-    //     getTableList();
-    //     message.success(e ? `开启成功！` : `关闭成功！`);
-    //   } else {
-    //     message.error(res.msg);
-    //   }
-    // });
-  };
-
   const TestDesc = val => {
     setRecordItem(val);
     setPushTestVisible(true);
@@ -256,6 +326,10 @@ const ScheduledTasks = () => {
     setAddVisible(true);
   };
 
+  const handleLook = () => {
+    setLookVisible(true);
+  };
+
   const onOk = val => {
     changeTable(val);
     typeValue.current = val;
@@ -305,6 +379,17 @@ const ScheduledTasks = () => {
           />
         </div>
         <div className={styles.headRight}>
+          <Button
+            icon={<ZoomInOutlined className={styles.icon} />}
+            onClick={handleLook}
+            style={{
+              marginLeft: '25px',
+              verticalAlign: 'middle',
+              marginTop: '-3px',
+            }}
+          >
+            调用日志
+          </Button>
           <Button
             icon={<PlusOutlined className={styles.icon} />}
             type="primary"
@@ -331,10 +416,19 @@ const ScheduledTasks = () => {
               editData(record);
             }, // 双击
           })}
-          scroll={{ y: 'calc(100vh - 225px)' }}
+          scroll={{ y: 'calc(100% - 40px)' }}
+          pagination={false}
           loading={loading}
         />
       </div>
+      <div className={styles.footer}>
+        <CalendarOutlined style={{ color: '#1685ff' }} />
+        <span style={{ marginLeft: '10px', fontWeight: 'bold' }}>运行日志</span>
+        <div className={styles.runLog} ref={scroll}>
+          {logList}
+          <div className={styles.blinkingCursor}>|</div>
+        </div>
+      </div>
       <AddModal
         visible={addVisible}
         onCancel={() => setAddVisible(false)}
@@ -342,6 +436,11 @@ const ScheduledTasks = () => {
         type={type}
         record={recordItem}
       />
+      <LookModal
+        visible={lookVisible}
+        onCancel={() => setLookVisible(false)}
+        keepTableList={keepTableList}
+      />
       <PushTest
         visible={pushTestVisible}
         onCancel={() => setPushTestVisible(false)}

src/pages/platformCenter/scheduledTasks/index.less

 .scheduledTasks {
   width: 100%;
   height: 100%;
+  display: flex;
+  flex-direction: column;
+
   .head {
     padding: 10px;
     background: white;
     margin-bottom: 2px;
     width: 100%;
-    height: 52px;
     display: flex;
     justify-content: space-between;
     align-items: center;
-    .headLeft{
+    .headLeft {
       display: flex;
       align-items: center;
     }
   }
   .table {
-    height: calc(100% - 53px);
+    flex: 1;
     width: 100%;
     background-color: white;
     padding: 10px;
     overflow: hidden;
     margin-bottom: 3px;
-    .ant-table-container {
-      height: calc(100vh - 185px);
+    :global {
+      .ant-table-wrapper {
+        height: 100%;
+
+        .ant-spin-nested-loading {
+          height: 100%;
+
+          .ant-spin-container {
+            height: 100%;
+
+            .ant-table.ant-table-small {
+              height: 100%;
+
+              .ant-table-container {
+                height: 100%;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+  .footer {
+    height: 350px;
+    width: 100%;
+    background-color: white;
+    padding: 10px;
+    :global {
+      ::-webkit-scrollbar-thumb {
+        border-radius: 0;
+      }
+      ::-webkit-scrollbar {
+        display: none;
+      }
+    }
+    .runLog {
+      margin-top: 5px;
+      width: 100%;
+      height: 305px;
+      background-color: #000040;
+      overflow-y: scroll;
+      color: #808080;
+      padding: 0 10px;
+      @keyframes blink {
+        0% {
+          opacity: 1;
+        }
+        50% {
+          opacity: 0;
+        }
+        100% {
+          opacity: 1;
+        }
+      }
+
+      .blinkingCursor {
+        color: #ffffff;
+        animation: blink 1s infinite;
+      }
     }
   }
   .icon {

src/services/scheduledTasks/api.js

@@ -8,3 +8,12 @@ export const GetIISAgentConfig = param =>
 
 export const DeleteIISAgentConfig = param =>
   get(`${PUBLISH_SERVICE}/MessageConfig/DeleteIISAgentConfig`, param); // 删除助理服务器配置
+
+export const GetIISAgentLog = param =>
+  get(`${PUBLISH_SERVICE}/MessageConfig/GetIISAgentLog`, param); // 删除助理服务器配置
+
+export const GetIISAgentSite = param =>
+  get(`${PUBLISH_SERVICE}/MessageConfig/GetIISAgentSite`, param); // 获取 siteName
+
+export const QueryIISAgentCalllog = data =>
+  post(`${PUBLISH_SERVICE}/MessageConfig/QueryIISAgentCalllog`, data); // 获取调用日志的接口