Merge branch 'master' of https://g.civnet.cn:8443/ReactWeb5/maintenance

package.json

@@ -142,6 +142,7 @@
         "sortablejs": "^1.13.0",
         "styled-components": "4.2.0",
         "use-merge-value": "^1.0.2",
+        "react-color": "^2.19.3",
         "voca": "^1.4.0"
     },
     "devDependencies": {

src/pages/log/omsLog/index.jsx

@@ -37,8 +37,7 @@ const OmsLog = () => {
       width: 150,
       defaultSortOrder: 'descend',
       sortDirections: ['descend', 'ascend'],
-      sorter: (a, b) =>
-        new Date(a.LogTime).getTime() - new Date(b.LogTime).getTime(),
+      sorter: (a, b) => new Date(a.LogTime).getTime() - new Date(b.LogTime).getTime(),
     },
     {
       title: '接口名称',
@@ -65,8 +64,8 @@ const OmsLog = () => {
       width: 850,
       ellipsis: 'true',
       render: record => (
-        <Tooltip placement="left" title={decodeURI(record)}>
-          {decodeURI(record)}
+        <Tooltip placement="left" title={record}>
+          {record}
         </Tooltip>
       ),
     },
@@ -110,10 +109,7 @@ const OmsLog = () => {
   const searchStyle1 = val => {
     let n;
     if (showSearchStyle) {
-      n = val.replace(
-        new RegExp(label, 'g'),
-        `<span style='color:red'>${label}</span>`,
-      );
+      n = val.replace(new RegExp(label, 'g'), `<span style='color:red'>${label}</span>`);
     } else {
       n = val;
     }
@@ -180,10 +176,7 @@ const OmsLog = () => {
   const setTime = time => {
     setEndTime(moment(new Date(), 'YYYY-MM-DD HH:mm:ss'));
     setStartTime(
-      moment(
-        new Date(new Date().getTime() - time * 60 * 60 * 1000),
-        'YYYY-MM-DD HH:mm:ss',
-      ),
+      moment(new Date(new Date().getTime() - time * 60 * 60 * 1000), 'YYYY-MM-DD HH:mm:ss'),
     );
   };
   const handleReset = () => {
@@ -249,8 +242,8 @@ const OmsLog = () => {
             <Button
               type="primary"
               style={{ marginLeft: '10px' }}
-              onClick={() =>{
-                getData()
+              onClick={() => {
+                getData();
                 setShowSearchStyle(true);
               }}
             >
@@ -278,8 +271,7 @@ const OmsLog = () => {
               dataSource={data}
               scroll={{ x: 'max-content', y: 'calc(100vh - 230px)' }}
               pagination={{
-                showTotal: (total, range) =>
-                  `第${range[0]}-${range[1]} 条/共 ${total} 条`,
+                showTotal: (total, range) => `第${range[0]}-${range[1]} 条/共 ${total} 条`,
                 pageSizeOptions: [10, 20, 50, 100],
                 defaultPageSize: 20,
                 showQuickJumper: true,

src/pages/log/serviceLog/index.jsx

@@ -60,10 +60,7 @@ const ServiceLog = () => {
       message: '时间设置有误',
       description: '起始时间应该早于结束时间',
     });
-  } else if (
-    (startMonth !== endMonth && startYear === endYear) ||
-    startYear !== endYear
-  ) {
+  } else if ((startMonth !== endMonth && startYear === endYear) || startYear !== endYear) {
     notification.info({
       message: '时间设置提示',
       description: '不允许跨月份查询',
@@ -137,10 +134,7 @@ const ServiceLog = () => {
   const searchStyle = val => {
     let n;
     if (showSearchStyle) {
-      n = val.replace(
-        new RegExp(searchWord, 'g'),
-        `<span style='color:red'>${searchWord}</span>`,
-      );
+      n = val.replace(new RegExp(searchWord, 'g'), `<span style='color:red'>${searchWord}</span>`);
     } else {
       n = val;
     }
@@ -242,12 +236,7 @@ const ServiceLog = () => {
   const setTime = (time, value) => {
     setTimeInterval(value);
     setEndTime(moment(new Date(), 'YYYY-MM-DD HH:mm:ss'));
-    setStartTime(
-      moment(
-        new Date(new Date().getTime() - time * 60 * 1000),
-        'YYYY-MM-DD HH:mm:ss',
-      ),
-    );
+    setStartTime(moment(new Date(new Date().getTime() - time * 60 * 1000), 'YYYY-MM-DD HH:mm:ss'));
   };
   // 设置返回状态
   const changeStatus = value => {
@@ -337,9 +326,7 @@ const ServiceLog = () => {
         <Spin spinning={loading} tip="loading">
           <Row style={{ background: 'white' }}>
             <Col span={8} style={{ paddingTop: '8px', paddingLeft: '5px' }}>
-              <span style={{ fontSize: '14px', fontWeight: '600' }}>
-                访问量统计
-              </span>
+              <span style={{ fontSize: '14px', fontWeight: '600' }}>访问量统计</span>
               <span style={{ paddingLeft: '60%' }}>间隔：</span>
               <Select
                 defaultValue="每小时"
@@ -355,14 +342,10 @@ const ServiceLog = () => {
               </Select>
             </Col>
             <Col span={7} offset={1} style={{ paddingTop: '8px' }}>
-              <span style={{ fontSize: '14px', fontWeight: '600' }}>
-                接口调用频次统计
-              </span>
+              <span style={{ fontSize: '14px', fontWeight: '600' }}>接口调用频次统计</span>
             </Col>
             <Col span={7} offset={1} style={{ paddingTop: '8px' }}>
-              <span style={{ fontSize: '14px', fontWeight: '600' }}>
-                接口平均耗时统计
-              </span>
+              <span style={{ fontSize: '14px', fontWeight: '600' }}>接口平均耗时统计</span>
             </Col>
           </Row>
           <Row className={styles.chart}>
@@ -403,12 +386,7 @@ const ServiceLog = () => {
                   Path: { alias: '接口调用频次' },
                 }}
               >
-                <Axis
-                  name="Path"
-                  label=""
-                  title={{ offset: 20 }}
-                  className={styles.fontColor}
-                />
+                <Axis name="Path" label="" title={{ offset: 20 }} className={styles.fontColor} />
                 <Axis name="Count" title />
                 <Interval position="Path*Count" />
                 <Tooltip shared lock />
@@ -442,8 +420,7 @@ const ServiceLog = () => {
               dataSource={dataTable}
               scroll={{ x: 'max-content', y: 'calc(100vh - 580px)' }}
               pagination={{
-                showTotal: (total, range) =>
-                  `第${range[0]}-${range[1]} 条/共 ${total} 条`,
+                showTotal: (total, range) => `第${range[0]}-${range[1]} 条/共 ${total} 条`,
                 pageSizeOptions: [10, 20, 50, 100],
                 defaultPageSize: 20,
                 showQuickJumper: true,

src/pages/platformCenter/messageManage/projectManage/components/IISAgentConfig/VisibleIISAgentConfig.jsx

-import React, { useEffect, useState } from 'react'
+import React, { useEffect, useState } from 'react';
 import SiteModal from '@/components/Modal/SiteModa';
-import { Checkbox, Input, Button, Card, InputNumber, Form, Radio, DatePicker, Switch, Select, message } from 'antd'
-import HourOfDaySelect from './HourOfDaySelect'
-import DayOfWeekSelect from './DayOfWeekSelect'
-import styles from './VisibleIISAgentConfig.less'
-import moment from 'moment'
+import {
+  Checkbox,
+  Input,
+  Button,
+  Card,
+  InputNumber,
+  Form,
+  Radio,
+  DatePicker,
+  Switch,
+  Select,
+  message,
+} from 'antd';
+import HourOfDaySelect from './HourOfDaySelect';
+import DayOfWeekSelect from './DayOfWeekSelect';
+import styles from './VisibleIISAgentConfig.less';
+import moment from 'moment';
 import { tr } from 'voca';
 import { EditOutlined, InfoCircleOutlined } from '@ant-design/icons';
 const { Item } = Form;
 
 const { TextArea } = Input;
-let unitType = { Hour: '小时', Minute: '分钟', Second: '秒' }
-const hours = { '1': '星期一', '2': '星期二', '3': '星期三', '4': '星期四', '5': '星期五', '6': '星期六', '7': '星期天' }
+let unitType = { Hour: '小时', Minute: '分钟', Second: '秒' };
+const hours = {
+  '1': '星期一',
+  '2': '星期二',
+  '3': '星期三',
+  '4': '星期四',
+  '5': '星期五',
+  '6': '星期六',
+  '7': '星期天',
+};
 const VisibleIISAgentConfig = props => {
-
   const [loading, setLoading] = useState(false);
-    const [previewVisible, setPreviewVisible] = useState(false)
-    const [selectRole, setSelectRole] = useState([])
-    const [isReentrant, setIsReentrant] = useState(false)
-    const [postCheck, setPostCheck] = useState(false)
-    const [reenCheck, setReenCheck] = useState(false)
-    const [logCheck, setLogCheck] = useState(false)
-    const [isEndTimeShow, setIsEndTimeShow] = useState(false)
-    const [isLoopShow, setIsLoopShow] = useState(false)
-    const [isDayLoopShow, setIsDayLoopShow] = useState(false)
-    const [isWeekLoopShow, setIsWeekLoopShow] = useState(false)
-    const [waitCheck, setWaitCheck] = useState(false)
-    const [isUse, setIsUse] = useState(true)
-    const [interval, setInterval] = useState(1)
-    const [loop_unit, setLoop_unit] = useState('Hour')
-    const [exeType, setExeType] = useState(true)
-    const [isType, setIsType] = useState('重复执行')
-    const [isTypeValue, setIsTypeValue] = useState('BYLOOP')
-    const [time_out, setTime_out] = useState(30)
-    const [weekData, setWeekData] = useState([])
-    const [exeTime, setExeTime] = useState(moment().format('YYYY-MM-DD 00:00:00'))
-    const [selectValues, setSelectValues] = useState([])
+  const [previewVisible, setPreviewVisible] = useState(false);
+  const [selectRole, setSelectRole] = useState([]);
+  const [isReentrant, setIsReentrant] = useState(false);
+  const [postCheck, setPostCheck] = useState(false);
+  const [reenCheck, setReenCheck] = useState(false);
+  const [logCheck, setLogCheck] = useState(false);
+  const [isEndTimeShow, setIsEndTimeShow] = useState(false);
+  const [isLoopShow, setIsLoopShow] = useState(false);
+  const [isDayLoopShow, setIsDayLoopShow] = useState(false);
+  const [isWeekLoopShow, setIsWeekLoopShow] = useState(false);
+  const [waitCheck, setWaitCheck] = useState(false);
+  const [isUse, setIsUse] = useState(true);
+  const [interval, setInterval] = useState(1);
+  const [loop_unit, setLoop_unit] = useState('Hour');
+  const [exeType, setExeType] = useState(true);
+  const [isType, setIsType] = useState('重复执行');
+  const [isTypeValue, setIsTypeValue] = useState('BYLOOP');
+  const [time_out, setTime_out] = useState(30);
+  const [weekData, setWeekData] = useState([]);
+  const [exeTime, setExeTime] = useState(moment().format('YYYY-MM-DD 00:00:00'));
+  const [selectValues, setSelectValues] = useState([]);
   const [form] = Form.useForm();
   const dateFormat = 'YYYY-MM-DD HH:mm:ss';
-    const { agentConfig, value, onIISAgentSubmit } = props
+  const { agentConfig, value, onIISAgentSubmit } = props;
   useEffect(() => {
     if (agentConfig) {
-            let startTime = agentConfig.LoopMode === 'ByOnce' ? moment(new Date(new Date().toLocaleDateString()), 'YYYY-MM-DD 00:00:00').add(1, 'days') : moment(new Date(new Date().toLocaleDateString()), 'YYYY-MM-DD 00:00:00')
+      let startTime =
+        agentConfig.LoopMode === 'ByOnce'
+          ? moment(new Date(new Date().toLocaleDateString()), 'YYYY-MM-DD 00:00:00').add(1, 'days')
+          : moment(new Date(new Date().toLocaleDateString()), 'YYYY-MM-DD 00:00:00');
       form.setFieldsValue({
         is_enable: agentConfig.Enabled,
         url_type: agentConfig.Absolute ? true : false,
@@ -49,82 +71,86 @@ const VisibleIISAgentConfig = props => {
         request_header: agentConfig.CustomHeader,
         plan_type: agentConfig.LoopMode,
         start_time: agentConfig.StartFrom ? moment(agentConfig.StartFrom, dateFormat) : startTime,
-                end_time: agentConfig.EndAt ? moment(agentConfig.EndAt, dateFormat) : '',
+        end_time: agentConfig.EndAt ? moment(agentConfig.EndAt, dateFormat) : null,
         loop_mode: agentConfig.LoopMode,
         interval: agentConfig.Interval,
         loop_unit: agentConfig.LoopUnit,
-                hour_of_day: agentConfig.HourOfDay && agentConfig.HourOfDay.split(","),
+        hour_of_day: agentConfig.HourOfDay && agentConfig.HourOfDay.split(','),
         day_of_week: agentConfig.DayOfWeek,
         time_out: agentConfig.Timeout || 30,
         post_state: agentConfig.UsePostState,
         reentrant: agentConfig.AllowReentrant,
         enable_log: agentConfig.AllowLog,
-            })
-            let startTimeValue = agentConfig.LoopMode === 'ByOnce' ? moment().add(1, 'days').format('YYYY-MM-DD 00:00:00') : moment().format('YYYY-MM-DD 00:00:00')
-            setExeTime(agentConfig.StartFrom ? agentConfig.StartFrom : startTimeValue)
-            setIsUse(agentConfig.Enabled)
-            changeLoopMode(agentConfig.LoopMode)
-            setReenCheck(agentConfig.AllowReentrant)
-            setPostCheck(agentConfig.UsePostState)
-            setLogCheck(agentConfig.AllowLog)
-            setInterval(agentConfig.Interval)
-            setLoop_unit(agentConfig.LoopUnit)
-            setWaitCheck(agentConfig.UseTimeout || false)
-            setTime_out(agentConfig.Timeout)
+      });
+      let startTimeValue =
+        agentConfig.LoopMode === 'ByOnce'
+          ? moment()
+              .add(1, 'days')
+              .format('YYYY-MM-DD 00:00:00')
+          : moment().format('YYYY-MM-DD 00:00:00');
+      setExeTime(agentConfig.StartFrom ? agentConfig.StartFrom : startTimeValue);
+      setIsUse(agentConfig.Enabled);
+      changeLoopMode(agentConfig.LoopMode);
+      setReenCheck(agentConfig.AllowReentrant);
+      setPostCheck(agentConfig.UsePostState);
+      setLogCheck(agentConfig.AllowLog);
+      setInterval(agentConfig.Interval);
+      setLoop_unit(agentConfig.LoopUnit);
+      setWaitCheck(agentConfig.UseTimeout || false);
+      setTime_out(agentConfig.Timeout);
       if (agentConfig.LoopMode === 'ByOnce') {
-                setIsType('执行一次')
+        setIsType('执行一次');
         form.setFieldsValue({
-                    type: '执行一次'
-                })
-                setExeType(false)
-            }
-            else {
-                setIsType('重复执行')
+          type: '执行一次',
+        });
+        setExeType(false);
+      } else {
+        setIsType('重复执行');
         form.setFieldsValue({
-                    type: '重复执行'
-
-                })
+          type: '重复执行',
+        });
         if (agentConfig.LoopMode === 'ByDay') {
-                    setSelectValues(agentConfig.HourOfDay.split(','))
-                }
-                else if (agentConfig.LoopMode === 'ByWeek') {
-                    setWeekData(agentConfig.DayOfWeek.split(','))
+          setSelectValues(agentConfig.HourOfDay.split(','));
+        } else if (agentConfig.LoopMode === 'ByWeek') {
+          setWeekData(agentConfig.DayOfWeek.split(','));
         }
-                setExeType(true)
+        setExeType(true);
       }
-
     } else {
       form.setFieldsValue({
         type: '重复执行',
         url_type: false,
         loop_mode: 'BYLOOP',
-                start_time: moment(new Date(new Date().toLocaleDateString()), 'YYYY-MM-DD 00:00:00')
-            })
-            setExeTime(moment().format('YYYY-MM-DD 00:00:00'))
-            setIsType('重复执行')
-            changeLoopMode('BYLOOP')
-            setIsUse(true)
-            setInterval(1)
-            setLoop_unit('Hour')
-        }
-    }, [agentConfig])
+        start_time: moment(new Date(new Date().toLocaleDateString()), 'YYYY-MM-DD 00:00:00'),
+      });
+      setExeTime(moment().format('YYYY-MM-DD 00:00:00'));
+      setIsType('重复执行');
+      changeLoopMode('BYLOOP');
+      setIsUse(true);
+      setInterval(1);
+      setLoop_unit('Hour');
+    }
+  }, [agentConfig]);
 
   useEffect(() => {
     if (value) {
       form.setFieldsValue({
-                name: value
-            })
-            setSelectRole(props.value)
+        name: value,
+      });
+      setSelectRole(props.value);
     }
-    }, [props])
+  }, [props]);
   const handleCancel = () => {
-        setPreviewVisible(false)
-    }
+    setPreviewVisible(false);
+  };
   const handleOk = async () => {
-        let fv = form.getFieldValue()
-        if ((fv.loop_mode === 'ByDay' && !selectValues.length) || (fv.loop_mode === 'ByWeek' && !weekData.length)) {
-            message.warning('请选择计划执行日')
-            return false
+    let fv = form.getFieldValue();
+    if (
+      (fv.loop_mode === 'ByDay' && !selectValues.length) ||
+      (fv.loop_mode === 'ByWeek' && !weekData.length)
+    ) {
+      message.warning('请选择计划执行日');
+      return false;
     }
     let data = {
       Url: fv.url_path,
@@ -148,158 +174,161 @@ const VisibleIISAgentConfig = props => {
       SiteInfo: null,
       Name: fv.name,
       Tolerate: null,
-            UseTimeout: waitCheck
-        }
-        fv.time_out ? data.MillisecondsTimeout = parseInt(fv.time_out) : ''
-        setPreviewVisible(false)
-        await onIISAgentSubmit && onIISAgentSubmit(
-            data
-        )
-
-    }
+      UseTimeout: waitCheck,
+    };
+    fv.time_out ? (data.MillisecondsTimeout = parseInt(fv.time_out)) : '';
+    setPreviewVisible(false);
+    (await onIISAgentSubmit) && onIISAgentSubmit(data);
+  };
   const handleClick = () => {
     if (value) {
-            setPreviewVisible(true)
+      setPreviewVisible(true);
     } else {
-            message.error("请先输入方案名称！")
+      message.error('请先输入方案名称！');
     }
-
-
-    }
-    const onPostChange = (value) => {
-        setIsReentrant(value)
-        setPostCheck(value)
+  };
+  const onPostChange = value => {
+    setIsReentrant(value);
+    setPostCheck(value);
     form.setFieldsValue({
-            post_state: value
-        })
-    }
-    const onReenChange = (value) => {
-        setReenCheck(value)
+      post_state: value,
+    });
+  };
+  const onReenChange = value => {
+    setReenCheck(value);
     form.setFieldsValue({
-            reentrant: value
-        })
-    }
-    const onLogChange = (value) => {
-        setLogCheck(value)
+      reentrant: value,
+    });
+  };
+  const onLogChange = value => {
+    setLogCheck(value);
     form.setFieldsValue({
-            enable_log: value
-        })
-    }
+      enable_log: value,
+    });
+  };
 
-    const changeLoopMode = (value) => {
-        setIsTypeValue(value)
+  const changeLoopMode = value => {
+    setIsTypeValue(value);
     switch (value) {
-            case "ByOnce":
-                setIsEndTimeShow(false)
-                setIsLoopShow(true)
-                setIsWeekLoopShow(false)
-                setIsDayLoopShow(false)
-                break
-            case "BYLOOP":
-                setIsEndTimeShow(true)
-                setIsLoopShow(true)
-                setIsWeekLoopShow(false)
-                setIsDayLoopShow(false)
-                break
-            case "ByDay":
-                setIsEndTimeShow(true)
-                setIsLoopShow(false)
-                setIsWeekLoopShow(false)
-                setIsDayLoopShow(true)
-                break
-            case "ByWeek":
-                setIsEndTimeShow(true)
-                setIsLoopShow(false)
-                setIsWeekLoopShow(true)
-                setIsDayLoopShow(true)
-                break
-
-        }
-
-    }
-    const onLoopModeChange = (e) => {
-        changeLoopMode(e.target.value)
+      case 'ByOnce':
+        setIsEndTimeShow(false);
+        setIsLoopShow(true);
+        setIsWeekLoopShow(false);
+        setIsDayLoopShow(false);
+        break;
+      case 'BYLOOP':
+        setIsEndTimeShow(true);
+        setIsLoopShow(true);
+        setIsWeekLoopShow(false);
+        setIsDayLoopShow(false);
+        break;
+      case 'ByDay':
+        setIsEndTimeShow(true);
+        setIsLoopShow(false);
+        setIsWeekLoopShow(false);
+        setIsDayLoopShow(true);
+        break;
+      case 'ByWeek':
+        setIsEndTimeShow(true);
+        setIsLoopShow(false);
+        setIsWeekLoopShow(true);
+        setIsDayLoopShow(true);
+        break;
+    }
+  };
+  const onLoopModeChange = e => {
+    changeLoopMode(e.target.value);
     if (e.target.value === 'BYLOOP') {
       form.setFieldsValue({
         hour_of_day: '',
-                day_of_week: ''
-            })
-        }
-    }
-    const onChange = (value) => {
-        setIsUse(value)
-    }
-    const handleExe = (e) => {
-        let obj = form.getFieldValue()
-        let value = e.target.value
-        setIsType(value)
+        day_of_week: '',
+      });
+    }
+  };
+  const onChange = value => {
+    setIsUse(value);
+  };
+  const handleExe = e => {
+    let obj = form.getFieldValue();
+    let value = e.target.value;
+    setIsType(value);
     if (value === '执行一次') {
-            changeLoopMode('ByOnce')
-            setLoop_unit('Second')
+      changeLoopMode('ByOnce');
+      setLoop_unit('Second');
       form.setFieldsValue({
         loop_mode: 'ByOnce',
         hour_of_day: '',
         day_of_week: '',
-                end_time: obj.start_time
-            })
+        end_time: obj.start_time,
+      });
       if (!agentConfig) {
         form.setFieldsValue({
-                    start_time: moment(new Date(new Date().toLocaleDateString()), 'YYYY-MM-DD 00:00:00').add(1, 'days'),
-                    end_time: moment(new Date(new Date().toLocaleDateString()), 'YYYY-MM-DD 00:00:00').add(1, 'days')
-                })
-                setExeTime(moment().add(1, 'days').format('YYYY-MM-DD 00:00:00'))
-            }
-            setExeType(false)
+          start_time: moment(new Date(new Date().toLocaleDateString()), 'YYYY-MM-DD 00:00:00').add(
+            1,
+            'days',
+          ),
+          end_time: moment(new Date(new Date().toLocaleDateString()), 'YYYY-MM-DD 00:00:00').add(
+            1,
+            'days',
+          ),
+        });
+        setExeTime(
+          moment()
+            .add(1, 'days')
+            .format('YYYY-MM-DD 00:00:00'),
+        );
+      }
+      setExeType(false);
     } else {
-            changeLoopMode('BYLOOP')
-            setExeType(true)
+      changeLoopMode('BYLOOP');
+      setExeType(true);
       form.setFieldsValue({
         loop_mode: 'BYLOOP',
-                end_time: ''
-            })
+        end_time: '',
+      });
       if (!agentConfig) {
         form.setFieldsValue({
           start_time: moment(new Date(new Date().toLocaleDateString()), 'YYYY-MM-DD 00:00:00'),
           hour_of_day: '',
-                    day_of_week: ''
-                })
-                setExeTime(moment().format('YYYY-MM-DD 00:00:00'))
-            }
-        }
-    }
-    const onWait = (e) => {
-        setWaitCheck(e)
-    }
-    const changeUnit = (e) => {
-        setLoop_unit(e)
-    }
-    const changeInterval = (e) => {
-        setInterval(e)
-    }
-    const InputTimeOut = (e) => {
-        setTime_out(e)
-    }
-    const changeStartTime = (e) => {
-        setExeTime(moment(e).format('YYYY-MM-DD HH:mm:ss'))
-        let obj = form.getFieldValue()
-        if (obj.loop_mode === 'ByOnce')
-            setLoop_unit('Second')
+          day_of_week: '',
+        });
+        setExeTime(moment().format('YYYY-MM-DD 00:00:00'));
+      }
+    }
+  };
+  const onWait = e => {
+    setWaitCheck(e);
+  };
+  const changeUnit = e => {
+    setLoop_unit(e);
+  };
+  const changeInterval = e => {
+    setInterval(e);
+  };
+  const InputTimeOut = e => {
+    setTime_out(e);
+  };
+  const changeStartTime = e => {
+    setExeTime(moment(e).format('YYYY-MM-DD HH:mm:ss'));
+    let obj = form.getFieldValue();
+    if (obj.loop_mode === 'ByOnce') setLoop_unit('Second');
     form.setFieldsValue({
-            end_time: moment(e).format('YYYY-MM-DD HH:mm:ss')
-        })
-    }
-    const changeDay = (data) => {
+      end_time: moment(e).format('YYYY-MM-DD HH:mm:ss'),
+    });
+  };
+  const changeDay = data => {
     console.log('data', data);
-        if (data) setSelectValues(data)
-    }
-    const changeWeek = (data) => {
-        if (data) setWeekData(data)
-
-    }
+    if (data) setSelectValues(data);
+  };
+  const changeWeek = data => {
+    if (data) setWeekData(data);
+  };
   return (
     <div className={styles.agent_container}>
       <Input value={selectRole} disabled={true} />
-            <div className={styles.select_btn} onClick={handleClick}><EditOutlined style={{ fontSize: '18px' }} /></div>
+      <div className={styles.select_btn} onClick={handleClick}>
+        <EditOutlined style={{ fontSize: '18px' }} />
+      </div>
       <SiteModal
         {...props}
         title="编辑定时任务"
@@ -314,100 +343,72 @@ const VisibleIISAgentConfig = props => {
         onOk={() => handleOk()}
         confirmLoading={loading}
         onCancel={handleCancel}
-
       >
         <div className={styles.IISAgent_container}>
           <Form form={form} labelCol={{ span: 4 }} wrapperCol={{ span: 18 }}>
-                        <Item
-                            label="计划名称"
-                            name="name"
-                        >
+            <Item label="计划名称" name="name">
               <Input placeholder="请输入计划名称" disabled={true} />
             </Item>
 
-                        <Item
-                            label="URL路径"
-                        >
-                            <Item
-                                label=""
-                                name="url_type"
-                                style={{ marginBottom: '0.2rem' }}
-                            >
-                                <Radio.Group >
+            <Item label="URL路径">
+              <Item label="" name="url_type" style={{ marginBottom: '0.2rem' }}>
+                <Radio.Group>
                   <Radio value={false}>相对路径(便于配置迁移)</Radio>
                   <Radio value={true}>绝对路径(用于外链)</Radio>
                 </Radio.Group>
               </Item>
-                            <Item
-                                label=""
-                                name="url_path"
-                                style={{ marginBottom: '0' }}
-                            >
+              <Item label="" name="url_path" style={{ marginBottom: '0' }}>
                 <TextArea rows={3} placeholder="请输入URL名称" />
               </Item>
             </Item>
 
-                        <Item
-                            label="请求头"
-                            name="request_header"
-                        >
+            <Item label="请求头" name="request_header">
               <Input placeholder="请求头，选填" />
             </Item>
-                        <Item
-                            label="计划类型"
-                            name="type"
-                        >
-
+            <Item label="计划类型" name="type">
               <Radio.Group onChange={handleExe}>
                 <Radio.Button value="重复执行">重复执行</Radio.Button>
                 <Radio.Button value="执行一次">执行一次</Radio.Button>
               </Radio.Group>
             </Item>
-                        {exeType && (<Item
-                            label="执行方式"
-                            name="loop_mode"
-                        >
+            {exeType && (
+              <Item label="执行方式" name="loop_mode">
                 <Radio.Group onChange={onLoopModeChange}>
-                                <Radio value={"BYLOOP"}>循环</Radio>
-                                <Radio value={"ByDay"}>每天</Radio>
-                                <Radio value={"ByWeek"}>每周</Radio>
+                  <Radio value={'BYLOOP'}>循环</Radio>
+                  <Radio value={'ByDay'}>每天</Radio>
+                  <Radio value={'ByWeek'}>每周</Radio>
                 </Radio.Group>
-                        </Item>)}
-                        <Item
-                            label="开始时间"
-                            wrapperCol={{ span: 28 }}
-                            style={{ marginBottom: '0' }}
-                        >
+              </Item>
+            )}
+            <Item label="开始时间" wrapperCol={{ span: 28 }} style={{ marginBottom: '0' }}>
               <div style={{ display: 'flex' }}>
-                                <Item
-                                    label=""
-                                    name="start_time"
-                                    style={{ marginRight: '1rem' }}
-                                >
+                <Item label="" name="start_time" style={{ marginRight: '1rem' }}>
                   <DatePicker showTime onChange={changeStartTime} />
                 </Item>
-                                {
-                                    isEndTimeShow && (
-                                        <Item
-                                            label="结束时间"
-                                            name="end_time"
-                                        >
+                {isEndTimeShow && (
+                  <Item label="结束时间" name="end_time">
                     <DatePicker showTime />
                   </Item>
-                                    )
-                                }
+                )}
               </div>
-
             </Item>
 
-
-                        {
-                            isLoopShow && (isType === '重复执行') && (
+            {isLoopShow && isType === '重复执行' && (
               <Card style={{ width: 600, margin: '0 0 1rem 3.6rem', height: '8rem' }}>
                 <div className={styles.loopShow}>
                   <span> 每</span>
-                                        <InputNumber min={0} value={interval} style={{ margin: '0 0.5rem' }} onChange={changeInterval} placeholder="请输入循环周期" />
-                                        <Select value={loop_unit} onChange={changeUnit} style={{ width: '8rem', margin: '0 0.5rem' }} >
+                  <InputNumber
+                    min={0}
+                    value={interval}
+                    style={{ margin: '0 0.5rem' }}
+                    onChange={changeInterval}
+                    placeholder="请输入循环周期"
+                  />
+                  <Select
+                    value={loop_unit}
+                    onChange={changeUnit}
+                    style={{ width: '8rem', margin: '0 0.5rem' }}
+                  >
                     <Select.Option value="Hour">小时</Select.Option>
                     <Select.Option value="Minute">分钟</Select.Option>
                     <Select.Option value="Second">秒</Select.Option>
@@ -415,142 +416,157 @@ const VisibleIISAgentConfig = props => {
                   <span> 执行一次</span>
                 </div>
               </Card>
-
-                            )
-                        }
-                        {
-                            isDayLoopShow && (
-                                <Item
-                                    label="日循环"
-                                    name="hour_of_day"
-                                >
+            )}
+            {isDayLoopShow && (
+              <Item label="日循环" name="hour_of_day">
                 <HourOfDaySelect changeDay={changeDay} />
               </Item>
-                            )
-                        }
-                        {
-                            isWeekLoopShow && (
-                                <Item
-                                    label="周循环"
-                                    name="day_of_week"
-                                >
+            )}
+            {isWeekLoopShow && (
+              <Item label="周循环" name="day_of_week">
                 <DayOfWeekSelect changeWeek={changeWeek} />
               </Item>
+            )}
+            {isTypeValue === 'ByDay'
+              ? !selectValues.length && (
+                  <span style={{ color: '#f00' }} className={styles.exeTime}>
+                    <InfoCircleOutlined style={{ marginRight: '0.2rem' }} />
+                    必须选择计划执行时刻
+                  </span>
                 )
-                        }
-                        {isTypeValue === 'ByDay' ? !selectValues.length && (<span style={{ color: '#f00' }} className={styles.exeTime} ><InfoCircleOutlined style={{ marginRight: '0.2rem' }} />必须选择计划执行时刻</span>) : ''}
+              : ''}
 
-                        {isTypeValue === 'ByWeek' ? !weekData.length && (<span style={{ color: '#f00' }} className={styles.exeTime} ><InfoCircleOutlined style={{ marginRight: '0.2rem' }} />必须选择计划执行时刻</span>) : ''}
-                        <Item
-                            label="说明"
-                        >
+            {isTypeValue === 'ByWeek'
+              ? !weekData.length && (
+                  <span style={{ color: '#f00' }} className={styles.exeTime}>
+                    <InfoCircleOutlined style={{ marginRight: '0.2rem' }} />
+                    必须选择计划执行时刻
+                  </span>
+                )
+              : ''}
+            <Item label="说明">
               <div style={{ color: '#909EB6FF', fontSize: '12px' }}>
-                                {isType === '执行一次' && (<span>
-                                    在{exeTime}执行一次
-                                </span>)}
-                                {isType === '重复执行' && isTypeValue === 'ByDay' && (<span style={{ color: selectValues.length ? '#909EB6FF' : '#f00' }}>
-                                    从{exeTime}开始{selectValues.length ? '，在每天' : ''}{selectValues.length ? selectValues.map((item, index) => {
-                                        return item.length > 1 ? `${item}:00${index == selectValues.length - 1 ? '' : '，'}` : `0${item}:00${index == selectValues.length - 1 ? '' : '，'}`
-                                    }) : ''}{selectValues.length ? '执行' : ''}
-                                </span>)}
-                                {isType === '重复执行' && isTypeValue === 'ByWeek' && (<span style={{ color: weekData.length ? '#909EB6FF' : '#f00' }}>
-                                    从{exeTime}开始{weekData.length ? ',在每周' : ''}{weekData.length ? weekData.map((item, index) => {
-                                        return `${hours[item]}${index == weekData.length - 1 ? '' : '，'}`
-                                    }) : ''}{weekData.length && selectValues.length ? selectValues.map((item, index) => {
-                                        return item.length > 1 ? `${item}:00${index == selectValues.length - 1 ? '' : '，'}` : `0${item}:00${index == selectValues.length - 1 ? '' : '，'}`
-                                    }) : ''} {weekData.length ? '执行' : ''}
-                                </span>)}
-                                {isType === '重复执行' && isTypeValue === 'BYLOOP' && (<span style={{ color: '#909EB6FF' }}>
-                                    从{exeTime}开始，每{interval}{unitType[loop_unit]}执行一次。
-                                </span>)}
+                {isType === '执行一次' && <span>在{exeTime}执行一次</span>}
+                {isType === '重复执行' && isTypeValue === 'ByDay' && (
+                  <span style={{ color: selectValues.length ? '#909EB6FF' : '#f00' }}>
+                    从{exeTime}开始{selectValues.length ? '，在每天' : ''}
+                    {selectValues.length
+                      ? selectValues.map((item, index) => {
+                          return item.length > 1
+                            ? `${item}:00${index == selectValues.length - 1 ? '' : '，'}`
+                            : `0${item}:00${index == selectValues.length - 1 ? '' : '，'}`;
+                        })
+                      : ''}
+                    {selectValues.length ? '执行' : ''}
+                  </span>
+                )}
+                {isType === '重复执行' && isTypeValue === 'ByWeek' && (
+                  <span style={{ color: weekData.length ? '#909EB6FF' : '#f00' }}>
+                    从{exeTime}开始{weekData.length ? ',在每周' : ''}
+                    {weekData.length
+                      ? weekData.map((item, index) => {
+                          return `${hours[item]}${index == weekData.length - 1 ? '' : '，'}`;
+                        })
+                      : ''}
+                    {weekData.length && selectValues.length
+                      ? selectValues.map((item, index) => {
+                          return item.length > 1
+                            ? `${item}:00${index == selectValues.length - 1 ? '' : '，'}`
+                            : `0${item}:00${index == selectValues.length - 1 ? '' : '，'}`;
+                        })
+                      : ''}{' '}
+                    {weekData.length ? '执行' : ''}
+                  </span>
+                )}
+                {isType === '重复执行' && isTypeValue === 'BYLOOP' && (
+                  <span style={{ color: '#909EB6FF' }}>
+                    从{exeTime}开始，每{interval}
+                    {unitType[loop_unit]}执行一次。
+                  </span>
+                )}
               </div>
-
             </Item>
-                        <Item
-                            label="其他设置"
-                            wrapperCol={{ span: 28 }}
-                            style={{ marginBottom: '0' }}
-                        >      <div style={{ display: 'flex' }}>
+            <Item label="其他设置" wrapperCol={{ span: 28 }} style={{ marginBottom: '0' }}>
+              {' '}
               <div style={{ display: 'flex' }}>
-                                    <Item
-                                        name="wait"
-                                        style={{ marginRight: '0.5rem' }}
-                                    >
-                                        <Switch checkedChildren="开启" unCheckedChildren="关闭" onChange={onWait} checked={waitCheck} />
+                <div style={{ display: 'flex' }}>
+                  <Item name="wait" style={{ marginRight: '0.5rem' }}>
+                    <Switch
+                      checkedChildren="开启"
+                      unCheckedChildren="关闭"
+                      onChange={onWait}
+                      checked={waitCheck}
+                    />
                   </Item>
                   <div style={{ paddingTop: '0.3rem' }}>请求等待时间（单位：秒）</div>
                 </div>
 
-                                {waitCheck && (<Item
-                                    name="time_out"
-                                >
+                {waitCheck && (
+                  <Item name="time_out">
                     <div>
                       <InputNumber value={time_out} onChange={InputTimeOut} />
                     </div>
-                                </Item>)}
-
-                            </div></Item>
-                        <Item
-                            label=" "
-                            wrapperCol={{ span: 28 }}
-                            colon={false}
-                            style={{ marginBottom: '0' }}
-
-                        >    <div style={{ display: 'flex' }}>
-                                <Item
-                                    name="post_state"
-                                    style={{ marginRight: '0.5rem' }}
-                                >
-                                    <Switch checkedChildren="开启" unCheckedChildren="关闭" onChange={onPostChange} checked={postCheck} />
                   </Item>
-                                <div style={{ paddingTop: '0.3rem' }}>使用POST维持状态(上一次返回结果传入下一次请求)</div>
+                )}
               </div>
             </Item>
-                        <Item
-                            label=" "
-                            wrapperCol={{ span: 28 }}
-                            colon={false}
-                            style={{ marginBottom: '0' }}
-
-                        >
+            <Item label=" " wrapperCol={{ span: 28 }} colon={false} style={{ marginBottom: '0' }}>
+              {' '}
               <div style={{ display: 'flex' }}>
-                                <Item
-                                    style={{ marginRight: '0.5rem' }}
-                                    name="reentrant"
-                                >
-                                    <Switch checkedChildren="开启" unCheckedChildren="关闭" onChange={onReenChange} disabled={isReentrant} checked={reenCheck} />
+                <Item name="post_state" style={{ marginRight: '0.5rem' }}>
+                  <Switch
+                    checkedChildren="开启"
+                    unCheckedChildren="关闭"
+                    onChange={onPostChange}
+                    checked={postCheck}
+                  />
                 </Item>
-                                <div style={{ paddingTop: '0.3rem' }}>允许重入(上一次未执行完，也会执行下一次请求)</div>
+                <div style={{ paddingTop: '0.3rem' }}>
+                  使用POST维持状态(上一次返回结果传入下一次请求)
+                </div>
               </div>
             </Item>
-                        <Item
-                            label=" "
-                            wrapperCol={{ span: 28 }}
-                            colon={false}
-                            style={{ marginBottom: '0' }}
-
-                        >
+            <Item label=" " wrapperCol={{ span: 28 }} colon={false} style={{ marginBottom: '0' }}>
               <div style={{ display: 'flex' }}>
-                                <Item
-                                    name="enable_log"
-                                    style={{ marginRight: '0.5rem' }}
-                                >
-                                    <Switch checkedChildren="开启" unCheckedChildren="关闭" onChange={onLogChange} checked={logCheck} />
+                <Item style={{ marginRight: '0.5rem' }} name="reentrant">
+                  <Switch
+                    checkedChildren="开启"
+                    unCheckedChildren="关闭"
+                    onChange={onReenChange}
+                    disabled={isReentrant}
+                    checked={reenCheck}
+                  />
+                </Item>
+                <div style={{ paddingTop: '0.3rem' }}>
+                  允许重入(上一次未执行完，也会执行下一次请求)
+                </div>
+              </div>
+            </Item>
+            <Item label=" " wrapperCol={{ span: 28 }} colon={false} style={{ marginBottom: '0' }}>
+              <div style={{ display: 'flex' }}>
+                <Item name="enable_log" style={{ marginRight: '0.5rem' }}>
+                  <Switch
+                    checkedChildren="开启"
+                    unCheckedChildren="关闭"
+                    onChange={onLogChange}
+                    checked={logCheck}
+                  />
                 </Item>
                 <div style={{ paddingTop: '0.3rem' }}>记录日志(小于每分钟一次的请求不会记录)</div>
               </div>
             </Item>
-                        <Item
-                            label="禁用计划"
-                            style={{ color: '#f00' }}
-                            name="is_enable"
-                        >
-                            <Switch checkedChildren="开启" unCheckedChildren="关闭" checked={isUse} onChange={onChange} />
+            <Item label="禁用计划" style={{ color: '#f00' }} name="is_enable">
+              <Switch
+                checkedChildren="开启"
+                unCheckedChildren="关闭"
+                checked={isUse}
+                onChange={onChange}
+              />
             </Item>
           </Form>
         </div>
       </SiteModal>
     </div>
-    )
-}
+  );
+};
 export default VisibleIISAgentConfig;

src/pages/productCenter/webConfig/components/siteConfigDrawer.js

 import React, { useState, useEffect } from 'react';
 import { getLoginPage, getMapCofigs, getWebThemes, getProductList } from '@/services/webConfig/api';
+import { SketchPicker } from 'react-color';
 import {
   Drawer,
   notification,
@@ -14,6 +15,7 @@ import {
   Divider,
   Row,
   Col,
+  Switch,
 } from 'antd';
 import { PlusOutlined, InfoCircleOutlined } from '@ant-design/icons';
 import WebConfigForm from './webConfigForm';
@@ -22,6 +24,16 @@ import styles from './siteConfigDrawer.less';
 const { Option } = Select;
 const plainOptions = ['搜索', '首页', '常用', '反馈', '消息'];
 const defaultCheckedList = ['搜索', '首页', '常用', '反馈', '消息'];
+const colorList = [
+  { key: '薄暮', color: '#F5222D' },
+  { key: '火山', color: '#FA541C' },
+  { key: '日暮', color: '#FAAD14' },
+  { key: '明青', color: '#13C2C2' },
+  { key: '极光绿', color: '#52C41A' },
+  { key: '拂晓蓝', color: '#1890FF' },
+  { key: '极客蓝', color: '#2F54EB' },
+  { key: '酱紫', color: '#722ED1' },
+];
 
 export default props => {
   const { visible, onClose, config, hasIntegerate, isEdit, onOk, submitting, productList } = props;
@@ -30,7 +42,10 @@ export default props => {
   const [checkedList, setCheckedList] = useState([]);
   const [indeterminate, setIndeterminate] = useState(false);
   const [checkAll, setCheckAll] = useState(true);
+  const [displayColorPicker, setDisplayColorPicker] = useState(false);
+  const [color, setColor] = useState('');
   const CheckboxGroup = Checkbox.Group;
+  const [showAdvanced, setShowAdvanced] = useState(false); // 是否显示高级设置
   useEffect(() => {
     onGetLoginPages();
     console.log(isEdit);
@@ -65,16 +80,27 @@ export default props => {
       if (isEdit) {
         // 获取表单回显
         console.log(config, 'config');
-        form.setFieldsValue(config);
+        form.setFieldsValue({
+          ...config,
+          primaryColor: config.primaryColor ? config.primaryColor : '#1890FF',
+          navTheme: config.navTheme ? config.navTheme : 'light',
+          headerPrimaryColor: config.headerPrimaryColor ? config.headerPrimaryColor : '#1890FF',
+        });
+        setColor(config.headerPrimaryColor ? config.headerPrimaryColor : '#1890FF');
       } else {
+        setColor('#1890FF');
         form.setFieldsValue({
           messageMarking: 'All',
           messageVoice: true,
           hideMap: false,
           loginTemplate: 'Default.html',
+          primaryColor: '#1890FF',
+          navTheme: 'light',
+          headerPrimaryColor: '#1890FF',
         });
       }
     } else {
+      setShowAdvanced(false);
       form.resetFields();
     }
   }, [visible]);
@@ -124,6 +150,10 @@ export default props => {
     setIndeterminate(!!list.length && list.length < plainOptions.length);
     setCheckAll(list.length === plainOptions.length);
   };
+  const colorChange = value => {
+    setColor(value.hex);
+    form.setFieldsValue({ headerPrimaryColor: value.hex });
+  };
   return (
     <Drawer
       title={isEdit ? '查看/编辑网站配置' : '新增网站'}
@@ -212,19 +242,18 @@ export default props => {
         >
           <Input autoComplete="off" disabled={isEdit} />
         </Form.Item>
-        <Form.Item name="topMenu" label="顶部功能">
-          <Checkbox
-            indeterminate={indeterminate}
-            onChange={onCheckAllChange}
-            checked={checkAll}
-            style={{ marginTop: '5px', display: 'none' }}
-          >
-            全选
-          </Checkbox>
-          {/* <br />
-          <br /> */}
-          <CheckboxGroup options={plainOptions} value={checkedList} onChange={onChange} />
+        <Form.Item label="登录模板" name="loginTemplate">
+          <Select placeholder="请选择登录模板">
+            {loginPages.map(item => (
+              <Option value={item.value} key={item.value}>
+                {item.value}
+              </Option>
+            ))}
+          </Select>
         </Form.Item>
+        <Divider orientation="left" style={{ borderTopColor: '#99bbe8' }}>
+          主页配置
+        </Divider>
         <Form.Item label="产品类型" name="productType">
           <Select placeholder="请选择主页产品类型">
             {productList.map(item => (
@@ -237,15 +266,97 @@ export default props => {
         <Form.Item label="主页Url" name="homePage">
           <Input placeholder="请输入主页路径" autoComplete="off" />
         </Form.Item>
-        <Form.Item label="登录模板" name="loginTemplate">
-          <Select placeholder="请选择登录模板">
-            {loginPages.map(item => (
-              <Option value={item.value} key={item.value}>
-                {item.value}
+        <Divider orientation="left" style={{ borderTopColor: '#99bbe8' }}>
+          主题配置
+        </Divider>
+        <Form.Item name="headerPrimaryColor" label="顶部">
+          <div className={styles.colorBox}>
+            <div
+              className={styles.colorSwatch}
+              onClick={e => {
+                e.stopPropagation();
+                setDisplayColorPicker(!displayColorPicker);
+              }}
+            >
+              <div>{color}</div>
+              <div
+                style={{
+                  backgroundColor: color,
+                  height: '10px',
+                  width: '10px',
+                  margin: '10px 0 0 5px',
+                }}
+              />
+            </div>
+
+            {displayColorPicker ? (
+              <div className={styles.popover}>
+                <div
+                  onClick={() => setDisplayColorPicker(false)}
+                  style={{
+                    position: 'fixed',
+                    top: '0px',
+                    right: '0px',
+                    bottom: '0px',
+                    left: '0px',
+                  }}
+                />
+                <SketchPicker color={color} onChange={e => colorChange(e)} width="230px" />
+              </div>
+            ) : null}
+          </div>
+        </Form.Item>
+        <Form.Item name="navTheme" label="菜单">
+          <Select placeholder="请选择功能标签">
+            <Option value="light">亮</Option>
+            <Option value="dark">暗</Option>
+          </Select>
+        </Form.Item>
+        <Form.Item name="primaryColor" label="基础">
+          <Select placeholder="请选择颜色">
+            {colorList.map(item => (
+              <Option value={item.color} key={item.color}>
+                <div style={{ display: 'flex', alignItems: 'center' }}>
+                  <div
+                    style={{
+                      height: '10px',
+                      width: '10px',
+                      background: item.color,
+                      marginRight: '5px',
+                    }}
+                  />
+                  {`${item.key}（${item.color}）`}
+                </div>
               </Option>
             ))}
           </Select>
         </Form.Item>
+
+        <Form.Item>
+          <Switch
+            checked={showAdvanced}
+            checkedChildren="高级设置"
+            unCheckedChildren="高级设置"
+            onChange={() => setShowAdvanced(!showAdvanced)}
+          />
+        </Form.Item>
+        <div style={{ display: showAdvanced ? 'block' : 'none' }}>
+          <Form.Item name="topMenu" label="顶部功能">
+            <Checkbox
+              indeterminate={indeterminate}
+              onChange={onCheckAllChange}
+              checked={checkAll}
+              style={{ marginTop: '5px', display: 'none' }}
+            >
+              全选
+            </Checkbox>
+            <CheckboxGroup
+              options={plainOptions}
+              value={checkedList}
+              checked={showAdvanced}
+              onChange={onChange}
+            />
+          </Form.Item>
           <Form.Item label="功能标签" name="mdi">
             <Select placeholder="请选择功能标签">
               <Option value="MDI" key="0">
@@ -296,6 +407,7 @@ export default props => {
               <Radio value={false}>关闭</Radio>
             </Radio.Group>
           </Form.Item>
+        </div>
       </Form>
     </Drawer>
   );

src/pages/productCenter/webConfig/components/siteConfigDrawer.less

-.siteConfigContainer{
+.siteConfigContainer {}
+
+.mask {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vh;
+  height: 100vh;
+  // z-index: 1;
+}
+
+.colorBox {
+  .colorSwatch {
+    display: flex;
+    justify-content: center;
+    width: 80px;
+    height: 30px;
+    line-height: 30px;
+    text-align: center;
+    border: 1px solid #ccc;
+    border-radius: 2px;
+  }
+
+  .popover {
+    position: absolute;
+    z-index: 2;
+  }
 }
\ No newline at end of file

src/pages/userCenter/roleManage/SelectUser/NewSelectUser.jsx

@@ -260,7 +260,7 @@ const NewSelectUser = props => {
           </div>
           {/* 复选框模块 */}
           <div className={styles.checkScrollBox}>
-            <Spin spinning={loading}>
+            {/* <Spin spinning={loading}> */}
             <div className={styles.checkContainer}>
               {allList.map((item, index) => (
                 <div className={styles.checkBoxContent} key={item.groupId}>
@@ -275,7 +275,7 @@ const NewSelectUser = props => {
                 </div>
               ))}
             </div>
-            </Spin>
+            {/* </Spin> */}
           </div>
         </div>
         <div className={styles.tableRight}>

src/pages/userCenter/roleManage/SelectUser/SelectUser.less

@@ -70,10 +70,13 @@
   .tableRight {
     margin-left: 10px;
     height: 100%;
+
     .ant-spin-nested-loading {
       height: 100%;
+
       .ant-table {
         height: 100%;
+
         .ant-table-container {
           height: 100%;
         }