diff --git a/src/components/DetailCard/ItemValue.vue b/src/components/DetailCard/ItemValue.vue
index fe2dd1ab5..7642a8c61 100644
--- a/src/components/DetailCard/ItemValue.vue
+++ b/src/components/DetailCard/ItemValue.vue
@@ -32,6 +32,16 @@ export default {
         <span class='item-value'>{this.toChoicesDisplay(this.value)}</span>
       )
     }
+    if (this.value instanceof Array) {
+      const newArr = this.value || []
+      return (
+        <span class='item-value'>
+          {
+            newArr.map((item, index) => <div key={index}>{item.key}：{item.value} </div>)
+          }
+        </span>
+      )
+    }
     return (
       <span class='item-value'>{this.value}</span>
     )
diff --git a/src/components/FormFields/WeekCronSelect.vue b/src/components/FormFields/WeekCronSelect.vue
index 3f9ec5e0b..c824cd618 100644
--- a/src/components/FormFields/WeekCronSelect.vue
+++ b/src/components/FormFields/WeekCronSelect.vue
@@ -1,250 +1,398 @@
 <template>
-  <div>
-    <div class="hours-container">
-      <div v-for="(item, index) in hours" :key="index" class="hours-item">
-        <div class="hours-item-header">{{ compItem(item) }}</div>
-        <div class="hours-item-value">
-          <div
-            :class="compClass(2 * item)"
-            @click="handleClick(2 * item)"
-            @mouseover="handleHover(2 * item)"
+  <div class="c-weektime">
+    <div class="c-schedue" />
+    <div :class="{'c-schedue': true, 'c-schedue-notransi': mode}" :style="styleValue" />
+
+    <table class="c-weektime-table" :class="{'c-min-table': colspan < 2}">
+      <thead class="c-weektime-head">
+        <tr>
+          <th rowspan="8" class="week-td">{{ this.$t('common.WeekCronSelect.WeekOrTime') }}</th>
+          <th :colspan="12 * colspan">00:00 - 12:00</th>
+          <th :colspan="12 * colspan">12:00 - 24:00</th>
+        </tr>
+        <tr>
+          <td v-for="t in theadArr" :key="t" :colspan="colspan">{{ t }}</td>
+        </tr>
+      </thead>
+      <tbody class="c-weektime-body">
+        <tr v-for="t in weektimeData" :key="t.row">
+          <td>{{ t.value }}</td>
+          <td
+            v-for="n in t.child"
+            :key="`${n.row}-${n.col}`"
+            :data-week="n.row"
+            :data-time="n.col"
+            :class="selectClasses(n)"
+            class="weektime-atom-item"
+            @mouseenter="cellEnter(n)"
+            @mousedown="cellDown(n)"
+            @mouseup="cellUp(n)"
           />
-        </div>
-      </div>
-    </div>
-    <div class="tips">{{ tips }}</div>
+        </tr>
+        <tr>
+          <td colspan="49" class="c-weektime-preview">
+            <div class="g-clearfix c-weektime-con">
+              <span class="g-pull-left">{{ this.$t('common.WeekCronSelect.CanDragSelect') }}</span>
+              <a class="g-pull-right" @click.prevent="clearWeektime">{{ this.$t('common.WeekCronSelect.ClearSelection') }}</a>
+            </div>
+          </td>
+        </tr>
+      </tbody>
+    </table>
   </div>
 </template>
 <script>
+const createArr = len => {
+  return Array.from(Array(len)).map((ret, id) => id)
+}
+function splicing(list) {
+  let same
+  let i = -1
+  const len = list.length
+  const arr = []
+
+  if (!len) return
+  while (++i < len) {
+    const item = list[i]
+    if (item.check) {
+      if (item.check !== Boolean(same)) {
+        arr.push(...['、', item.begin, '~', item.end])
+      } else if (arr.length) {
+        arr.pop()
+        arr.push(item.end)
+      }
+    }
+    same = Boolean(item.check)
+  }
+  arr.shift()
+  return arr.join('')
+}
 export default {
-  model: {
-    prop: 'sendTimeList'
-  },
+  name: 'WeekCronSelect',
   props: {
-    sendTimeList: {
-      type: Object,
-      required: true,
+    value: {
+      type: Array,
       default: () => []
     },
-    readonly: {
-      type: Boolean,
-      default: false
+    colspan: {
+      type: Number,
+      default() {
+        return 2
+      }
     }
   },
   data() {
     return {
-      hours: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23], // 选项
-      selectStart: false, // 开始
-      startIndex: '', // 开始下标
-      timeRangeList: [], // 选择的时间段
-      timeRangeListIndex: [], // 选中的下标
-      tempRangeIndex: [], // 预选下标
-      tips: '向右选中，向左取消选择'
+      width: 0,
+      height: 0,
+      left: 0,
+      top: 0,
+      mode: 0,
+      row: 0,
+      col: 0,
+      theadArr: [],
+      weekArr: [
+        this.$t('common.WeekCronSelect.Monday'),
+        this.$t('common.WeekCronSelect.Tuesday'),
+        this.$t('common.WeekCronSelect.Wednesday'),
+        this.$t('common.WeekCronSelect.Thursday'),
+        this.$t('common.WeekCronSelect.Friday'),
+        this.$t('common.WeekCronSelect.Saturday'),
+        this.$t('common.WeekCronSelect.Sunday')
+      ],
+      weektimeData: [],
+      timeRange: [] // 格式化之后数据
     }
   },
   computed: {
-  },
-  watch: {
-    timeRangeList: function(value) {
-      this.$emit('change', value)
-      this.$parent.$emit('el.form.change')// 触发父组件的校验规则
+    styleValue() {
+      return {
+        width: `${this.width}px`,
+        height: `${this.height}px`,
+        left: `${this.left}px`,
+        top: `${this.top}px`
+      }
     },
-    sendTimeList: {
-      handler() {
-        this.transformedIndex()
-      },
-      deep: true
+    selectClasses() {
+      return n => n.check ? 'ui-selected' : ''
     }
   },
-  mounted() {
-    this.transformedIndex()
+  created() {
+    this.init()
+    if (this.value.length > 0) this.nextValue()
   },
   methods: {
-    // 时间区间转换成下标区间
-    transformedIndex() {
-      this.timeRangeListIndex = []
-      this.timeRangeList = this.sendTimeList
-      this.timeRangeList.forEach(element => {
-        const [startTime, endTime] = element.match(/\d+\:\d+/g)
-        if (startTime && endTime) {
-          const [startHour, startMin] = startTime.split(':')
-          const [endHour, endMin] = endTime.split(':')
-          if (startHour && startMin && endHour && endMin) {
-            let startNum, endNum
-            if (startMin === '00') {
-              startNum = 2 * parseInt(startHour)
-            } else {
-              startNum = 2 * parseInt(startHour) + 1
+    // 初始化数据结构
+    init() {
+      this.theadArr = createArr(24)
+      const isData = this.weekArr.map((ret, index) => {
+        const children = (ret, row, max) => {
+          return createArr(max).map((t, col) => {
+            const curValue = this.formatWeektime(col)
+            return {
+              week: ret,
+              value: curValue,
+              begin: curValue.split('~')[0],
+              end: curValue.split('~')[1],
+              row: row,
+              col: col
             }
-            if (endMin === '00') {
-              endNum = 2 * parseInt(endHour) - 1
-            } else {
-              endNum = 2 * parseInt(endHour)
-            }
-            while (endNum >= startNum) {
-              this.timeRangeListIndex.push(startNum)
-              startNum++
-            }
-          } else {
-            this.$message.error('时间段格式不正确')
-          }
-        } else {
-          this.$message.error('没有拿到开始时间或结束时间或者时间段格式不对')
+          })
+        }
+        return {
+          value: ret,
+          row: index,
+          child: children(ret, index, 48)
         }
       })
-      this.tips = this.timeRangeList && this.timeRangeList.length > 0 ? this.timeRangeList : '向右选中，向左取消选择'
+      this.weektimeData = isData
     },
-    // 下标区间转换成时间区间
-    transformedSection() {
-      this.timeRangeList = []
-      let startTime = ''; let endTime = ''; const len = this.hours.length
-      for (let index = this.hours[0] * 2; index < 2 * (len + 1); index++) {
-        if (this.timeRangeListIndex.indexOf(index) > -1) {
-          if (startTime) { // 如果有开始时间，直接确定结束时间
-            const endHour = Math.floor((index + 1) / 2)
-            const endMin = (index + 1) % 2 === 0 ? '00' : '30'
-            endTime = `${endHour < 10 ? '0' + endHour : endHour}:${endMin}`
-          } else { // 没有开始时间，确定当前点为开始时间
-            const startHour = Math.floor(index / 2)
-            const startMin = index % 2 === 0 ? '00' : '30'
-            startTime = `${startHour < 10 ? '0' + startHour : startHour}:${startMin}`
-          }
-          if (index === 2 * this.hours.length + 1) { // 如果是最后一格，直接结束
-            endTime = `${Math.floor((index + 1) / 2)}:00`
-            this.timeRangeList.push(`${startTime || '23:30'}-${endTime}`)
-            startTime = ''
-            endTime = ''
-          }
-        } else { // 若这个点不在选择区间，确定一个时间段
-          if (startTime && endTime) {
-            this.timeRangeList.push(`${startTime}-${endTime}`)
-            startTime = ''
-            endTime = ''
-          } else if (startTime && !endTime) { // 这里可能只选半个小时
-            const endHour = Math.floor(index / 2)
-            const endMin = index % 2 === 0 ? '00' : '30'
-            endTime = `${endHour < 10 ? '0' + endHour : endHour}:${endMin}`
-            this.timeRangeList.push(`${startTime}-${endTime}`)
-            startTime = ''
-            endTime = ''
-          }
-        }
-      }
-      this.tips = this.timeRangeList && this.timeRangeList.length > 0 ? this.timeRangeList : '向右选中，向左取消选择'
-    },
-    // 点击事件
-    handleClick(index) {
-      if (this.selectStart) {
-        if (index === this.startIndex) { // 双击取反
-          if (this.timeRangeListIndex.indexOf(index) > -1) {
-            this.timeRangeListIndex.splice(this.timeRangeListIndex.indexOf(index), 1)
-          } else {
-            this.timeRangeListIndex.push(this.startIndex)
-          }
-        } else if (index > this.startIndex) { // 选取数据--向右添加，向左取消
-          while (index >= this.startIndex) {
-            this.timeRangeListIndex.push(this.startIndex)
-            this.startIndex++
-          }
-          this.timeRangeListIndex = Array.from(new Set(this.timeRangeListIndex))
-        } else { // 删除数据
-          while (this.startIndex >= index) {
-            if (this.timeRangeListIndex.indexOf(index) > -1) {
-              this.timeRangeListIndex.splice(this.timeRangeListIndex.indexOf(index), 1)
-            }
-            index++
-          }
-        }
-        this.startIndex = ''
-        this.tempRangeIndex = []
-        this.transformedSection()
-      } else {
-        this.startIndex = index
-      }
-      this.selectStart = !this.selectStart
-    },
-    // 预选区间
-    handleHover(index) {
-      if (this.selectStart) {
-        this.tempRangeIndex = []
-        if (index > this.startIndex) { // 选取数据--向右添加，向左取消
-          while (index >= this.startIndex) {
-            this.tempRangeIndex.push(index)
-            index--
-          }
-        } else { // 删除数据
-          while (this.startIndex >= index) {
-            this.tempRangeIndex.push(index)
-            index++
+    // 反解析传递过来的默认值
+    nextValue() {
+      const deepValue = _.cloneDeep(this.value)
+      for (let i = 0, len = deepValue.length; i < len; i++) {
+        const cur = deepValue[i]
+        const curValue = cur?.value
+        if (curValue.length > 0) {
+          const childValue = curValue.split('、')
+          for (let j = 0; j < childValue.length; j++) {
+            const curJ = childValue[j]
+            this.renderWeekRange(curJ, cur.id)
           }
         }
       }
     },
-    // 是否选中，计算className
-    compClass(index) {
-      if (index === this.startIndex) {
-        return 'hours-item-left preSelected'
+    // 渲染时间区间
+    renderWeekRange(val, id) {
+      const idNum = id === 0 ? 6 : id - 1
+      const [start, end] = val.split('~')
+      const startVal = this.countIndex(start)
+      const endVal = this.countIndex(end)
+      for (let i = startVal; i < (endVal === 0 ? 48 : endVal); i++) {
+        const curWeek = this.weektimeData[idNum]
+        curWeek.child[i].check = true
       }
-      if (index >= this.startIndex) {
-        if (this.tempRangeIndex.indexOf(index) > -1) {
-          return 'hours-item-left preSelected'
-        }
-      } else {
-        if (this.tempRangeIndex.indexOf(index) > -1) {
-          return 'hours-item-left unSelected'
-        }
-      }
-      return this.timeRangeListIndex.indexOf(index) > -1 ? 'hours-item-left selected' : 'hours-item-left'
     },
-    compItem(item) { // 不足10前面补0
-      return item < 10 ? `0${item}` : item
-    }
+    // 计算索引
+    countIndex(val) {
+      const one = val.substr(0, 2)
+      const a1 = one.startsWith('0') ? one.substr(1, 2) : one
+      var reg = RegExp(/30/)
+      const a2 = val.match(reg) ? 1 : 0
+      const curIndex = (a1 * 2) + a2
+      return curIndex
+    },
+    formatDate(date, fmt) {
+      const o = {
+        'M+': date.getMonth() + 1,
+        'd+': date.getDate(),
+        'h+': date.getHours(),
+        'm+': date.getMinutes(),
+        's+': date.getSeconds(),
+        'q+': Math.floor((date.getMonth() + 3) / 3),
+        'S': date.getMilliseconds()
+      }
+      if (/(y+)/.test(fmt)) {
+        fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length))
+      }
+      for (var k in o) {
+        if (new RegExp('(' + k + ')').test(fmt)) {
+          fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? (o[k]) : (('00' + o[k]).substr(('' + o[k]).length)))
+        }
+      }
+      return fmt
+    },
+    formatWeektime(col) {
+      const timeStamp = 1542384000000 // '2018-11-17 00:00:00'
+      const beginStamp = timeStamp + col * 1800000 // col * 30 * 60 * 1000
+      const endStamp = beginStamp + 1800000
 
+      const begin = this.formatDate(new Date(beginStamp), 'hh:mm')
+      const end = this.formatDate(new Date(endStamp), 'hh:mm')
+      return `${begin}~${end}`
+    },
+    // 清空时间段
+    clearWeektime() {
+      this.weektimeData.forEach(item => {
+        item.child.forEach(t => {
+          this.$set(t, 'check', false)
+        })
+      })
+      this.timeRange = []
+      this.$emit('change', this.timeRange)
+    },
+    setTimeRange() {
+      this.timeRange = this.weektimeData.map(item => {
+        return {
+          id: item.row === 6 ? 0 : item.row + 1,
+          value: splicing(item.child)
+        }
+      })
+      this.$emit('change', this.timeRange)
+    },
+    cellEnter(item) {
+      const ele = document.querySelector(`td[data-week='${item.row}'][data-time='${item.col}']`)
+      if (ele && !this.mode) {
+        this.left = ele.offsetLeft
+        this.top = ele.offsetTop
+      } else {
+        if (item.col <= this.col && item.row <= this.row) {
+          this.width = (this.col - item.col + 1) * ele.offsetWidth
+          this.height = (this.row - item.row + 1) * ele.offsetHeight
+          this.left = ele.offsetLeft
+          this.top = ele.offsetTop
+        } else if (item.col >= this.col && item.row >= this.row) {
+          this.width = (item.col - this.col + 1) * ele.offsetWidth
+          this.height = (item.row - this.row + 1) * ele.offsetHeight
+          if (item.col > this.col && item.row === this.row) this.top = ele.offsetTop
+          if (item.col === this.col && item.row > this.row) this.left = ele.offsetLeft
+        } else if (item.col > this.col && item.row < this.row) {
+          this.width = (item.col - this.col + 1) * ele.offsetWidth
+          this.height = (this.row - item.row + 1) * ele.offsetHeight
+          this.top = ele.offsetTop
+        } else if (item.col < this.col && item.row > this.row) {
+          this.width = (this.col - item.col + 1) * ele.offsetWidth
+          this.height = (item.row - this.row + 1) * ele.offsetHeight
+          this.left = ele.offsetLeft
+        }
+      }
+    },
+    cellDown(item) {
+      const ele = document.querySelector(`td[data-week='${item.row}'][data-time='${item.col}']`)
+      this.check = Boolean(item.check)
+      this.mode = 1
+      if (ele) {
+        this.width = ele.offsetWidth
+        this.height = ele.offsetHeight
+      }
+
+      this.row = item.row
+      this.col = item.col
+    },
+    cellUp(item) {
+      if (item.col <= this.col && item.row <= this.row) {
+        this.selectWeek([item.row, this.row], [item.col, this.col], !this.check)
+      } else if (item.col >= this.col && item.row >= this.row) {
+        this.selectWeek([this.row, item.row], [this.col, item.col], !this.check)
+      } else if (item.col > this.col && item.row < this.row) {
+        this.selectWeek([item.row, this.row], [this.col, item.col], !this.check)
+      } else if (item.col < this.col && item.row > this.row) {
+        this.selectWeek([this.row, item.row], [item.col, this.col], !this.check)
+      }
+
+      this.width = 0
+      this.height = 0
+      this.mode = 0
+
+      this.setTimeRange()
+    },
+    selectWeek(row, col, check) {
+      const [minRow, maxRow] = row
+      const [minCol, maxCol] = col
+      this.weektimeData.forEach(item => {
+        item.child.forEach(t => {
+          if (t.row >= minRow && t.row <= maxRow && t.col >= minCol && t.col <= maxCol) {
+            this.$set(t, 'check', check)
+          }
+        })
+      })
+    }
   }
 }
 </script>
+<style lang="scss" scoped>
 
-<style lang='scss' scoped>
-.hours-container {
-  display: flex;
-  cursor: pointer;
-  .hours-item {
-    width: 30px;
-    height: 60px;
-    border: 1px solid #c2d0f3;
-    border-right: none;
+.c-weektime {
+  min-width: 640px;
+  position: relative;
+  display: inline-block;
+}
+.c-schedue {
+  background: #598fe6;
+  position: absolute;
+  width: 0;
+  height: 0;
+  opacity: .6;
+  pointer-events: none;
+}
+.c-schedue-notransi {
+  transition: width .12s ease, height .12s ease, top .12s ease, left .12s ease;
+}
+.c-weektime-table {
+  border-collapse: collapse;
+  th {
+    vertical-align: inherit;
+    font-weight: bold;
+  }
+  tr {
+    height: 30px;
+  }
+  tr, td, th {
+    user-select: none;
+    border: 1px solid #dee4f5;
     text-align: center;
-    &:last-child {
-      border-right: 1px solid #c2d0f3;
+    min-width: 12px;
+    line-height: 1.6em;
+    transition: background .16s ease;
+  }
+  .c-weektime-head {
+    font-size: 12px;
+    .week-td {
+      width: 72px;
     }
-    .hours-item-header {
-      width: 100%;
-      height: 30px;
-      line-height: 30px;
-      border-bottom: 1px solid #c2d0f3;
+  }
+  .c-weektime-body {
+    font-size: 12px;
+    td {
+      &.weektime-atom-item {
+        user-select: unset;
+        background-color: #f5f5f5;
+      }
+      &.ui-selected {
+        background-color: #598fe6;
+      }
     }
-    .hours-item-value {
-      width: 100%;
-      height: 30px;
-      box-sizing: border-box;
-      display: flex;
+  }
+  .c-weektime-preview {
+    line-height: 2.4em;
+    padding: 0 10px;
+    font-size: 13px;
+    .c-weektime-con {
+      line-height: 42px;
+      user-select: none;
     }
-    .selected {
-      background-color: #4e84fe;
-      border-bottom: 1px solid #c2d0f3;
-    }
-    .preSelected {
-      background-color: #8eaffc;
-      border-bottom: 1px solid #c2d0f3;
-    }
-    .unSelected {
-      background-color: #ffffff;
-      border-bottom: 1px solid #c2d0f3;
+    .c-weektime-time {
+      text-align: left;
+      line-height: 2.4em;
+      p {
+        max-width: 625px;
+        line-height: 1.4em;
+        word-break: break-all;
+        margin-bottom: 8px;
+      }
     }
   }
 }
-.tips {
-  width: 100%;
-  line-height: 30px;
+.c-min-table {
+  tr, td, th {
+    min-width: 24px;
+  }
+}
+.g-clearfix {
+  &:after, &:before {
+    clear: both;
+    content: " ";
+    display: table;
+  }
+}
+.g-pull-left {
+  float: left;
+}
+.g-pull-right {
+  float: right;
+  color: #409eff!important;
+}
+.g-tip-text {
+  color: #999;
 }
 </style>
diff --git a/src/i18n/langs/cn.json b/src/i18n/langs/cn.json
index e68f0864d..81f194afa 100644
--- a/src/i18n/langs/cn.json
+++ b/src/i18n/langs/cn.json
@@ -9,12 +9,15 @@
     "name": "名称",
     "username": "用户名",
     "ip_group": "IP 组",
+    "ip_group_help_text": "格式为逗号分隔的字符串, * 表示匹配所有。例如: 192.168.10.1, 192.168.1.0/24, 10.1.1.1-10.1.1.20, 2001:db8:2de::e13, 2001:db8:1a:1110::/64",
     "action": "动作",
+    "Rules": "规则",
+    "Action": "动作",
     "priority": "优先级",
     "date_created": "创建时间",
     "created_by": "创建者",
     "asset": "资产信息",
-    "users":"用户信息",
+    "users":"用户",
     "system_user": "系统用户",
     "username_group":"用户名",
     "hostname_group":"资产名",
@@ -25,6 +28,7 @@
     "apply_login_asset": "申请登录资产",
     "apply_login_system_user": "申请登录系统用户",
     "apply_login_user": "申请登录用户",
+    "login_confirm_user": "登录复核 受理人",
     "RuleDetail": "规则详情"
   },
   "applications": {
@@ -427,6 +431,19 @@
     },
     "lastCannotBeDeleteMsg": "最后一项，不能被删除",
     "InvalidJson": "不是合法 JSON",
+    "time_period": "时段",
+    "WeekCronSelect": {
+      "Monday": "星期一",
+      "Tuesday": "星期二",
+      "Wednesday": "星期三", 
+      "Thursday": "星期四",
+      "Friday": "星期五",
+      "Saturday": "星期六",
+      "Sunday": "星期天",
+      "ClearSelection": "清空选择",
+      "CanDragSelect": "可拖动鼠标选择时间段",
+      "WeekOrTime": "星期/时间"
+    },
     "CronTab": {
       "newCron": "生成 cron",
       "timeExpression": "时间表达式",
@@ -658,11 +675,11 @@
     "KubernetesAppUpdate": "更新Kubernetes",
     "Acl": "访问控制",
     "UserAclList": "用户登录",
-    "UserAclCreate": "创建用户登录规则",
+    "UserLoginACLCreate": "创建用户登录规则",
     "UserAclLists": "用户登录规则",
-    "UserAclUpdate": "更新用户登录规则",
+    "UserLoginACLUpdate": "更新用户登录规则",
     "UserAclDetail": "用户登录规则详情",
-    "AssetAclList": "登录资产",
+    "AssetAclList": "资产登录",
     "AssetAclCreate": "创建资产登录规则",
     "AssetAclUpdate": "更新资产登录规则",
     "AssetAclDetail": "资产登录规则详情",
@@ -738,7 +755,8 @@
     "WebFTP": "文件管理",
     "WebTerminal": "Web终端",
     "Notifications": "通知",
-    "SiteMessageList": "站内信"
+    "SiteMessageList": "站内信",
+    "UserLoginACL": "用户登录"
   },
   "sessions": {
     "SetToDefaultStorage": "设置为默认存储",
diff --git a/src/i18n/langs/en.json b/src/i18n/langs/en.json
index 1ed4d932e..fe3cf3f7a 100644
--- a/src/i18n/langs/en.json
+++ b/src/i18n/langs/en.json
@@ -418,6 +418,7 @@
     },
     "lastCannotBeDeleteMsg": "The last one can't be delete",
     "InvalidJson": "Not a valid json format",
+    "time_period": "Time period",
     "CronTab": {
       "newCron": "new cron",
       "timeExpression": "time expression",
@@ -452,6 +453,19 @@
       "runningTimes": "last 5 running times",
       "calculationResults": "calculationResults...",
       "failedConditions": "cron expression error"
+    },
+    "Cycle": "Cycle",
+    "WeekCronSelect": {
+      "Monday": "Monday",
+      "Tuesday": "Tuesday",
+      "Wednesday": "Wednesday", 
+      "Thursday": "Thursday",
+      "Friday": "Friday",
+      "Saturday": "Saturday",
+      "Sunday": "Sunday",
+      "ClearSelection": "Clear selection",
+      "CanDragSelect": "Can drag the mouse to select a time period",
+      "WeekOrTime": "Week/Time"
     }
   },
   "dashboard": {
@@ -722,7 +736,8 @@
     "WebFTP": "WebFTP",
     "WebTerminal": "Web Terminal",
     "Notifications": "Notifications",
-    "SiteMessageList": "Site message"
+    "SiteMessageList": "Site message",
+    "UserLoginACL": "User Login ACL"
   },
   "sessions": {
     "SetToDefaultStorage": "Set to default storage",
diff --git a/src/router/acl.js b/src/router/acl.js
index e5884c7cb..b765cbd9e 100644
--- a/src/router/acl.js
+++ b/src/router/acl.js
@@ -38,5 +38,33 @@ export default [
         hidden: true
       }
     ]
+  },
+  {
+    path: 'user-login-acl',
+    component: empty,
+    redirect: '',
+    children: [
+      {
+        path: 'create',
+        name: 'UserLoginACLCreate',
+        component: () => import('@/views/acl/UserLoginACL/UserLoginACLCreateUpdate'),
+        meta: { title: i18n.t('route.UserLoginACLCreate'), activeMenu: '/users/users' },
+        hidden: true
+      },
+      {
+        path: ':id',
+        name: 'UserLoginACLDetail',
+        component: () => import('@/views/acl/UserLoginACL/UserDetail'),
+        meta: { title: i18n.t('route.UserLoginACL'), activeMenu: '/users/users' },
+        hidden: true
+      },
+      {
+        path: ':id/update',
+        name: 'UserLoginACLUpdate',
+        component: () => import('@/views/acl/UserLoginACL/UserLoginACLCreateUpdate'),
+        meta: { title: i18n.t('route.UserLoginACLUpdate'), activeMenu: '/users/users' },
+        hidden: true
+      }
+    ]
   }
 ]
diff --git a/src/router/users.js b/src/router/users.js
index 1d087c004..6ea0aa177 100644
--- a/src/router/users.js
+++ b/src/router/users.js
@@ -1,5 +1,4 @@
 import i18n from '@/i18n/i18n'
-import empty from '@/layout/empty'
 export default [
   {
     path: 'users',
@@ -54,42 +53,5 @@ export default [
     name: 'UserGroupDetail',
     hidden: true,
     meta: { title: i18n.t('route.UserGroupDetail'), activeMenu: '/users/groups' }
-  },
-  {
-    path: 'user-acl',
-    component: empty,
-    redirect: '',
-    meta: { title: i18n.t('route.UserAclList') },
-    hidden: true,
-    children: [
-      {
-        path: '',
-        name: 'UserAclList',
-        component: () => import('@/views/acl/UserAcl/UserAclList'),
-        meta: { title: i18n.t('route.UserAclList'), activeMenu: '/users/users' },
-        hidden: true
-      },
-      {
-        path: 'create',
-        name: 'UserAclCreate',
-        component: () => import('@/views/acl/UserAcl/UserAclCreateUpdate'),
-        meta: { title: i18n.t('route.UserAclCreate'), activeMenu: '/users/users' },
-        hidden: true
-      },
-      {
-        path: ':id',
-        name: 'UserAclDetail',
-        component: () => import('@/views/acl/UserAcl/UserAclDetail'),
-        meta: { title: i18n.t('route.UserAclDetail'), activeMenu: '/users/users' },
-        hidden: true
-      },
-      {
-        path: ':id/update',
-        name: 'UserAclUpdate',
-        component: () => import('@/views/acl/UserAcl/UserAclCreateUpdate'),
-        meta: { title: i18n.t('route.UserAclUpdate') },
-        hidden: true
-      }
-    ]
   }
 ]
diff --git a/src/views/acl/UserAcl/UserAclCreateUpdate.vue b/src/views/acl/UserAcl/UserAclCreateUpdate.vue
deleted file mode 100644
index d66645e1f..000000000
--- a/src/views/acl/UserAcl/UserAclCreateUpdate.vue
+++ /dev/null
@@ -1,94 +0,0 @@
-<template>
-  <GenericCreateUpdatePage v-bind="$data" />
-</template>
-
-<script>
-import GenericCreateUpdatePage from '@/layout/components/GenericCreateUpdatePage'
-export default {
-  name: 'AclCreateUpdate',
-  components: {
-    GenericCreateUpdatePage
-  },
-  data() {
-    return {
-      initial: {
-        action: 'reject',
-        ip_group: '*',
-        user: this.$route.query.user
-      },
-      fields: [
-        [this.$t('common.Basic'), ['name', 'user', 'ip_group', 'action', 'priority']],
-        [this.$t('common.Other'), ['is_active', 'comment']]
-      ],
-      fieldsMeta: {
-        is_active: {
-          type: 'checkbox'
-        },
-        user: {
-          el: {
-            disabled: true,
-            multiple: false,
-            ajax: {
-              url: '/api/v1/users/users/?fields_size=mini',
-              transformOption: (item) => {
-                return { label: item.name + '(' + item.username + ')', value: item.id }
-              }
-            }
-          }
-        }
-      },
-      getUrl() {
-        const query = this.$route.query
-        const params = this.$route.params
-        let url = `/api/v1/acls/login-acls/`
-        if (params.id) {
-          url = `${url}${params.id}/`
-        }
-        if (query.user) {
-          url = `${url}?user=${query.user}`
-        }
-        return url
-      },
-      updateSuccessNextRoute: { name: 'UserDetail', params: {
-        id: this.$route.query.user
-      }},
-      createSuccessNextRoute: { name: 'UserDetail', params: {
-        id: this.$route.query.user
-      }},
-      onPerformError(error, method, vm) {
-        this.$emit('submitError', error)
-        const response = error.response
-        const data = response.data
-        if (response.status === 400) {
-          for (const key of Object.keys(data)) {
-            let value = data[key]
-            if (key === 'ip_group') {
-              value = Object.values(data[key])
-            }
-            if (value instanceof Array) {
-              value = value.join(';')
-            }
-            this.$refs.form.setFieldError(key, value)
-          }
-        }
-      },
-      afterGetFormValue(validValues) {
-        validValues.ip_group = validValues.ip_group.toString()
-        return validValues
-      },
-      cleanFormValue(value) {
-        if (!Array.isArray(value.ip_group)) {
-          value.ip_group = value.ip_group ? value.ip_group.split(',') : []
-        }
-        return value
-      }
-    }
-  },
-  methods: {
-  }
-}
-</script>
-
-<style>
-
-</style>
diff --git a/src/views/acl/UserAcl/UserAclDetail/Detail.vue b/src/views/acl/UserLoginACL/UserDetail/Detail.vue
similarity index 56%
rename from src/views/acl/UserAcl/UserAclDetail/Detail.vue
rename to src/views/acl/UserLoginACL/UserDetail/Detail.vue
index ac4909f41..b80814504 100644
--- a/src/views/acl/UserAcl/UserAclDetail/Detail.vue
+++ b/src/views/acl/UserLoginACL/UserDetail/Detail.vue
@@ -11,14 +11,11 @@
 
 <script>
 import DetailCard from '@/components/DetailCard'
-// import RelationCard from '@/components/RelationCard'
 import { toSafeLocalDateStr } from '@/utils/common'
-
 export default {
   name: 'Detail',
   components: {
     DetailCard
-    // RelationCard
   },
   props: {
     object: {
@@ -52,7 +49,8 @@ export default {
         onAddSuccess: () => {
           this.$refs.RelationCard.$refs.select2.clearSelected()
         }
-      }
+      },
+      dataVal: []
     }
   },
   computed: {
@@ -68,7 +66,11 @@ export default {
         },
         {
           key: this.$t('acl.ip_group'),
-          value: this.object.ip_group.toString()
+          value: this.object.rules.ip_group.toString()
+        },
+        {
+          key: this.$t('common.time_period'),
+          value: this.dataVal
         },
         {
           key: this.$t('acl.action'),
@@ -85,13 +87,70 @@ export default {
         {
           key: this.$t('acl.created_by'),
           value: this.object.created_by
+        },
+        {
+          key: this.$t('acl.login_confirm_user'),
+          value: this.object.action === 'confirm' ? this.object.reviewers_display : ''
         }
       ]
     }
+  },
+  created() {
+    const arrs = this.object.rules.time_period
+    for (let i = 0; i < arrs.length; i++) {
+      const cur = arrs[i]
+      if (cur.value.length > 0) {
+        let obj = {}
+        switch (cur.id) {
+          case 0:
+            obj = {
+              key: this.$t('common.WeekCronSelect.Sunday'),
+              value: cur.value
+            }
+            break
+          case 1:
+            obj = {
+              key: this.$t('common.WeekCronSelect.Monday'),
+              value: cur.value
+            }
+            break
+          case 2:
+            obj = {
+              key: this.$t('common.WeekCronSelect.Tuesday'),
+              value: cur.value
+            }
+            break
+          case 3:
+            obj = {
+              key: this.$t('common.WeekCronSelect.Wednesday'),
+              value: cur.value
+            }
+            break
+          case 4:
+            obj = {
+              key: this.$t('common.WeekCronSelect.Thursday'),
+              value: cur.value
+            }
+            break
+          case 5:
+            obj = {
+              key: this.$t('common.WeekCronSelect.Friday'),
+              value: cur.value
+            }
+            break
+          case 6:
+            obj = {
+              key: this.$t('common.WeekCronSelect.Saturday'),
+              value: cur.value
+            }
+            break
+        }
+        this.dataVal.push(obj)
+      }
+    }
   }
 }
 </script>
 
 <style lang='less' scoped>
-
 </style>
diff --git a/src/views/acl/UserAcl/UserAclDetail/index.vue b/src/views/acl/UserLoginACL/UserDetail/index.vue
similarity index 99%
rename from src/views/acl/UserAcl/UserAclDetail/index.vue
rename to src/views/acl/UserLoginACL/UserDetail/index.vue
index fe037e7a5..ff826782e 100644
--- a/src/views/acl/UserAcl/UserAclDetail/index.vue
+++ b/src/views/acl/UserLoginACL/UserDetail/index.vue
@@ -37,5 +37,4 @@ export default {
 </script>
 
 <style scoped>
-
 </style>
diff --git a/src/views/acl/UserLoginACL/UserLoginACLCreateUpdate.vue b/src/views/acl/UserLoginACL/UserLoginACLCreateUpdate.vue
new file mode 100644
index 000000000..68762d94f
--- /dev/null
+++ b/src/views/acl/UserLoginACL/UserLoginACLCreateUpdate.vue
@@ -0,0 +1,152 @@
+<template>
+  <GenericCreateUpdatePage
+    v-bind="$data"
+    :after-get-form-value="afterGetFormValue"
+  />
+</template>
+
+<script>
+import GenericCreateUpdatePage from '@/layout/components/GenericCreateUpdatePage'
+import { WeekCronSelect } from '@/components/FormFields'
+
+export default {
+  name: 'AclCreateUpdate',
+  components: {
+    GenericCreateUpdatePage
+  },
+  data() {
+    return {
+      initial: {
+        action: 'reject',
+        rules: {
+          ip_group: '*'
+        },
+        user: this.$route.query.user,
+        users: {
+          username_group: ''
+        }
+      },
+      url: '/api/v1/acls/login-acls/',
+      fields: [
+        [this.$t('common.Basic'), ['name', 'priority']],
+        [this.$t('acl.users'), ['user']],
+        [this.$t('acl.Rules'), ['rules']],
+        [this.$t('acl.Action'), ['action', 'reviewers']],
+        [this.$t('common.Other'), ['is_active', 'comment']]
+      ],
+      fieldsMeta: {
+        is_active: {
+          type: 'checkbox'
+        },
+        user: {
+          el: {
+            disabled: !!this.$route.query.user,
+            multiple: false,
+            ajax: {
+              url: '/api/v1/users/users/?fields_size=mini&all=true',
+              transformOption: (item) => {
+                return { label: item.name + '(' + item.username + ')', value: item.id }
+              }
+            }
+          }
+        },
+        reviewers: {
+          el: {
+            value: [],
+            ajax: {
+              url: '/api/v1/users/users/?fields_size=mini&all=true',
+              transformOption: (item) => {
+                return { label: item.name + '(' + item.username + ')', value: item.id }
+              }
+            }
+          },
+          hidden: (formValue) => {
+            return formValue.action !== 'confirm'
+          }
+        },
+        rules: {
+          fields: [
+            'ip_group', 'time_period'
+          ],
+          fieldsMeta: {
+            ip_group: {
+              label: this.$t('acl.ip_group'),
+              helpText: this.$t('acl.ip_group_help_text')
+            },
+            time_period: {
+              label: this.$t('common.time_period'),
+              component: WeekCronSelect
+            }
+          }
+        }
+      },
+      getUrl() {
+        const query = this.$route.query
+        const params = this.$route.params
+        let url = `/api/v1/acls/login-acls/`
+        if (params.id) {
+          url = `${url}${params.id}/`
+        }
+        if (query.user) {
+          url = `${url}?user=${query.user}`
+        }
+        return url
+      },
+      updateSuccessNextRoute: this.$route.query.user ? { name: 'UserDetail', params: {
+        id: this.$route.query.user
+      }} : { name: 'UserLoginACLList' },
+      createSuccessNextRoute: this.$route.query.user ? { name: 'UserDetail', params: {
+        id: this.$route.query.user
+      }} : { name: 'UserLoginACLList' },
+      onPerformError(error, method, vm) {
+        this.$emit('submitError', error)
+        const response = error.response
+        const data = response.data
+        if (response.status === 400) {
+          for (const key of Object.keys(data)) {
+            let value = data[key]
+            if (key === 'ip_group') {
+              value = Object.values(data[key])
+            }
+            if (value instanceof Array) {
+              value = value.join(';')
+            }
+            this.$refs.form.setFieldError(key, value)
+          }
+        }
+      },
+      afterGetFormValue(validValues) {
+        validValues.rules.ip_group = validValues.rules.ip_group.toString()
+        if (!this.$route.query.user) {
+          validValues.users.username_group = validValues.users.username_group.toString()
+        }
+        return validValues
+      },
+      cleanFormValue(value) {
+        if (!Array.isArray(value.rules.ip_group)) {
+          value.rules.ip_group = value.rules.ip_group ? value.rules.ip_group.split(',') : []
+        }
+        if (!this.$route.query.user) {
+          if (!Array.isArray(value.users.username_group)) {
+            value.users.username_group = value.users.username_group ? value.users.username_group.split(',') : []
+          }
+        } else {
+          delete value.users
+        }
+        if (value.action !== 'confirm') {
+          value.reviewers = []
+        }
+        return value
+      }
+    }
+  },
+  mounted() {
+  },
+  methods: {
+  }
+}
+</script>
+
+<style>
+
+</style>
diff --git a/src/views/acl/UserAcl/UserAclList.vue b/src/views/acl/UserLoginACL/UserLoginACLList.vue
similarity index 73%
rename from src/views/acl/UserAcl/UserAclList.vue
rename to src/views/acl/UserLoginACL/UserLoginACLList.vue
index 5c5fd9290..71d7126c2 100644
--- a/src/views/acl/UserAcl/UserAclList.vue
+++ b/src/views/acl/UserLoginACL/UserLoginACLList.vue
@@ -14,15 +14,15 @@ export default {
     return {
       tableConfig: {
         url: `/api/v1/acls/login-acls/?user=${this.$route.params.id}`,
-        columns: ['name', 'ip_group', 'priority', 'action', 'is_active', 'comment', 'actions'],
+        columns: ['name', 'ip_group', 'reviewers', 'priority', 'user_display', 'is_active', 'comment', 'actions'],
         columnsShow: {
           min: ['name', 'actions'],
-          default: ['name', 'ip_group', 'priority', 'action', 'is_active', 'comment', 'actions']
+          default: ['name', 'priority', 'is_active', 'user_display', 'comment', 'actions']
         },
         columnsMeta: {
           name: {
             formatterArgs: {
-              route: 'UserAclDetail',
+              route: 'UserLoginACLDetail',
               routeQuery: {
                 user: this.$route.params.id
               }
@@ -35,10 +35,13 @@ export default {
           action: {
             prop: 'action_display'
           },
+          reviewers: {
+            prop: 'reviewers_amount'
+          },
           actions: {
             formatterArgs: {
               hasClone: false,
-              updateRoute: { name: 'UserAclUpdate', query: { user: this.$route.params.id }},
+              updateRoute: { name: 'UserLoginACLUpdate', query: { user: this.$route.params.id }},
               performDelete: ({ row, col }) => {
                 const id = row.id
                 const url = `/api/v1/acls/login-acls/${id}/?user=${this.$route.params.id}`
@@ -49,7 +52,7 @@ export default {
         }
       },
       headerActions: {
-        createRoute: { name: 'UserAclCreate', query: { user: this.$route.params.id }},
+        createRoute: { name: 'UserLoginACLCreate', query: { user: this.$route.params.id }},
         hasRefresh: true,
         hasExport: false,
         hasImport: false,
diff --git a/src/views/users/User/UserDetail/UserInfo.vue b/src/views/users/User/UserDetail/UserInfo.vue
index cd699cbf7..64aaaba67 100644
--- a/src/views/users/User/UserDetail/UserInfo.vue
+++ b/src/views/users/User/UserDetail/UserInfo.vue
@@ -6,7 +6,6 @@
     <el-col :md="10" :sm="24">
       <QuickActions :actions="quickActions" type="primary" />
       <RelationCard v-bind="relationConfig" type="info" style="margin-top: 15px" />
-      <RelationCard v-if="this.$store.getters.publicSettings.LOGIN_CONFIRM_ENABLE" v-bind="loginConfirmSetting" type="warning" style="margin-top: 15px" />
     </el-col>
   </el-row>
 </template>
@@ -192,32 +191,6 @@ export default {
           })
           return this.$axios.post(relationUrl, data)
         }
-      },
-      loginConfirmSetting: {
-        icon: 'fa-user',
-        title: this.$t('users.LoginConfirm'),
-        objectsAjax: {
-          url: '/api/v1/users/users/'
-        },
-        hasObjectsId: this.object.login_confirm_settings,
-        performDelete: (item) => {
-          const objectId = this.object.id
-          const relationUrl = `/api/v1/authentication/login-confirm-settings/${objectId}/`
-          const data = {
-            reviewers: this.object.login_confirm_settings.filter(approver => approver !== item.value)
-          }
-          return this.$axios.patch(relationUrl, data)
-        },
-        performAdd: (items) => {
-          const objectId = this.object.id
-          const relationUrl = `/api/v1/authentication/login-confirm-settings/${objectId}/`
-          const data = {
-            reviewers: [...this.object.login_confirm_settings || [], ...items.map(v => {
-              return v.value
-            })]
-          }
-          return this.$axios.patch(relationUrl, data)
-        }
       }
     }
   },
diff --git a/src/views/users/User/UserDetail/index.vue b/src/views/users/User/UserDetail/index.vue
index ebf663d48..1b8983fe9 100644
--- a/src/views/users/User/UserDetail/index.vue
+++ b/src/views/users/User/UserDetail/index.vue
@@ -15,7 +15,7 @@ import UserApplicationPermissionRules from './UserApplicationsPermissionRules'
 import UserGrantedDatabases from './UserGrantedDatabases'
 import UserGrantedK8Ss from './UserGrantedK8Ss'
 import UserK8SPermissionRules from './UserK8SPermissionRules'
-import UserAclList from '@/views/acl/UserAcl/UserAclList'
+import UserLoginACLList from '@/views/acl/UserLoginACL/UserLoginACLList'
 import UserDatabasePermissionRules from './UserDatabasePermissionRules'
 import UserInfo from './UserInfo'
 
@@ -31,7 +31,7 @@ export default {
     UserDatabasePermissionRules,
     UserK8SPermissionRules,
     UserGrantedK8Ss,
-    UserAclList
+    UserLoginACLList
   },
   data() {
     const vm = this
@@ -66,7 +66,7 @@ export default {
           },
           {
             title: this.$t('route.UserAclLists'),
-            name: 'UserAclList'
+            name: 'UserLoginACLList'
           }
         ]
       }