From 83555f9830e17d55a6c7da14e3a6538af837efd4 Mon Sep 17 00:00:00 2001
From: junjie <junjie.xia@fit2cloud.com>
Date: Wed, 26 May 2021 18:46:19 +0800
Subject: [PATCH] feat(cron):cron fix

---
 .../io/dataease/service/ScheduleService.java  |   3 +
 frontend/package.json                         |   1 -
 frontend/src/components/cron/cron.vue         | 169 ++++++++++++++++++
 frontend/src/components/cron/cron/day.vue     | 160 +++++++++++++++++
 frontend/src/components/cron/cron/hour.vue    | 142 +++++++++++++++
 frontend/src/components/cron/cron/month.vue   | 143 +++++++++++++++
 .../components/cron/cron/secondAndMinute.vue  | 146 +++++++++++++++
 frontend/src/components/cron/cron/week.vue    | 157 ++++++++++++++++
 frontend/src/components/cron/cron/year.vue    | 130 ++++++++++++++
 frontend/src/lang/en.js                       |  39 +++-
 frontend/src/lang/tw.js                       |  38 +++-
 frontend/src/lang/zh.js                       |  37 ++++
 frontend/src/views/chart/view/ChartEdit.vue   |   2 +-
 .../src/views/dataset/data/UpdateInfo.vue     |  11 +-
 14 files changed, 1171 insertions(+), 7 deletions(-)
 create mode 100644 frontend/src/components/cron/cron.vue
 create mode 100644 frontend/src/components/cron/cron/day.vue
 create mode 100644 frontend/src/components/cron/cron/hour.vue
 create mode 100644 frontend/src/components/cron/cron/month.vue
 create mode 100644 frontend/src/components/cron/cron/secondAndMinute.vue
 create mode 100644 frontend/src/components/cron/cron/week.vue
 create mode 100644 frontend/src/components/cron/cron/year.vue

diff --git a/backend/src/main/java/io/dataease/service/ScheduleService.java b/backend/src/main/java/io/dataease/service/ScheduleService.java
index 8aa4e85735..8181953a43 100644
--- a/backend/src/main/java/io/dataease/service/ScheduleService.java
+++ b/backend/src/main/java/io/dataease/service/ScheduleService.java
@@ -34,6 +34,9 @@ public class ScheduleService {
                 endTime = null;
             } else {
                 endTime = new Date(datasetTableTask.getEndTime());
+                if (endTime.before(new Date())) {
+                    return;
+                }
             }
 
             scheduleManager.addOrUpdateCronJob(new JobKey(datasetTableTask.getId(), datasetTableTask.getTableId()),
diff --git a/frontend/package.json b/frontend/package.json
index 16fc2d7b53..284ab8cb6b 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -38,7 +38,6 @@
     "vue-axios": "3.2.4",
     "vue-clipboard2": "0.3.1",
     "vue-codemirror": "^4.0.6",
-    "vue-cron": "^1.0.9",
     "vue-i18n": "7.3.2",
     "vue-router": "3.0.6",
     "vue-uuid": "2.0.2",
diff --git a/frontend/src/components/cron/cron.vue b/frontend/src/components/cron/cron.vue
new file mode 100644
index 0000000000..b90f5aa0f9
--- /dev/null
+++ b/frontend/src/components/cron/cron.vue
@@ -0,0 +1,169 @@
+<template lang="html">
+  <div class="cron" :val="value_">
+    <el-tabs v-model="activeName">
+      <el-tab-pane :label="$t('cron.second')" name="s">
+        <second-and-minute v-model="sVal" :label="$t('cron.second')" />
+      </el-tab-pane>
+      <el-tab-pane :label="$t('cron.minute')" name="m">
+        <second-and-minute v-model="mVal" :label="$t('cron.minute')" />
+      </el-tab-pane>
+      <el-tab-pane :label="$t('cron.hour')" name="h">
+        <hour v-model="hVal" :label="$t('cron.hour')" />
+      </el-tab-pane>
+      <el-tab-pane :label="$t('cron.day')" name="d">
+        <day v-model="dVal" :label="$t('cron.day')" />
+      </el-tab-pane>
+      <el-tab-pane :label="$t('cron.month')" name="month">
+        <month v-model="monthVal" :label="$t('cron.month')" />
+      </el-tab-pane>
+      <el-tab-pane :label="$t('cron.week')" name="week">
+        <week v-model="weekVal" :label="$t('cron.week')" />
+      </el-tab-pane>
+      <el-tab-pane :label="$t('cron.year')" name="year">
+        <year v-model="yearVal" :label="$t('cron.year')" />
+      </el-tab-pane>
+    </el-tabs>
+    <!-- table -->
+    <el-table
+      :data="tableData"
+      size="mini"
+      border
+      style="width: 100%;"
+    >
+      <el-table-column
+        prop="sVal"
+        :label="$t('cron.second')"
+        width="70"
+      />
+      <el-table-column
+        prop="mVal"
+        :label="$t('cron.minute')"
+        width="70"
+      />
+      <el-table-column
+        prop="hVal"
+        :label="$t('cron.hour')"
+        width="70"
+      />
+      <el-table-column
+        prop="dVal"
+        :label="$t('cron.day')"
+        width="70"
+      />
+      <el-table-column
+        prop="monthVal"
+        :label="$t('cron.month')"
+        width="70"
+      />
+      <el-table-column
+        prop="weekVal"
+        :label="$t('cron.week')"
+        width="70"
+      />
+      <el-table-column
+        prop="yearVal"
+        :label="$t('cron.year')"
+      />
+    </el-table>
+  </div>
+</template>
+
+<script>
+import SecondAndMinute from './cron/secondAndMinute'
+import hour from './cron/hour'
+import day from './cron/day'
+import month from './cron/month'
+import week from './cron/week'
+import year from './cron/year'
+export default {
+  components: {
+    SecondAndMinute, hour, day, month, week, year
+  },
+  props: {
+    value: {
+      type: String
+    }
+  },
+  data() {
+    return {
+      //
+      activeName: 's',
+      sVal: '',
+      mVal: '',
+      hVal: '',
+      dVal: '',
+      monthVal: '',
+      weekVal: '',
+      yearVal: ''
+    }
+  },
+  computed: {
+    tableData() {
+      return [{
+        sVal: this.sVal,
+        mVal: this.mVal,
+        hVal: this.hVal,
+        dVal: this.dVal,
+        monthVal: this.monthVal,
+        weekVal: this.weekVal,
+        yearVal: this.yearVal
+      }]
+    },
+    value_() {
+      if (!this.dVal && !this.weekVal) {
+        return ''
+      }
+      if (this.dVal === '?' && this.weekVal === '?') {
+        this.$message({
+          message: this.$t('cron.d_w_cant_not_set'),
+          type: 'error'
+        })
+      }
+      if (this.dVal !== '?' && this.weekVal !== '?') {
+        this.$message({
+          message: this.$t('cron.d_w_must_one_set'),
+          type: 'error'
+        })
+      }
+      const v = `${this.sVal} ${this.mVal} ${this.hVal} ${this.dVal} ${this.monthVal} ${this.weekVal} ${this.yearVal}`
+      if (v !== this.value) {
+        this.$emit('input', v)
+      }
+      return v
+    }
+  },
+  watch: {
+    'value'(a, b) {
+      this.updateVal()
+    }
+  },
+  created() {
+    this.updateVal()
+  },
+  methods: {
+    updateVal() {
+      if (!this.value) {
+        return
+      }
+      const arrays = this.value.split(' ')
+      this.sVal = arrays[0]
+      this.mVal = arrays[1]
+      this.hVal = arrays[2]
+      this.dVal = arrays[3]
+      this.monthVal = arrays[4]
+      this.weekVal = arrays[5]
+      this.yearVal = arrays[6]
+    }
+  }
+}
+</script>
+
+<style lang="css">
+.cron {
+  text-align: left;
+  padding: 10px;
+  background: #fff;
+  border: 1px solid #dcdfe6;
+  box-shadow: 0 2px 4px 0 rgba(0,0,0,.12), 0 0 6px 0 rgba(0,0,0,.04);
+}
+</style>
diff --git a/frontend/src/components/cron/cron/day.vue b/frontend/src/components/cron/cron/day.vue
new file mode 100644
index 0000000000..150d7ff41d
--- /dev/null
+++ b/frontend/src/components/cron/cron/day.vue
@@ -0,0 +1,160 @@
+<template lang="html">
+  <div :val="value_">
+    <div>
+      <el-radio v-model="type" label="1" size="mini" border>{{ $t('cron.every_day') }}</el-radio>
+    </div>
+    <div>
+      <el-radio v-model="type" label="5" size="mini" border>{{ $t('cron.not_set') }}</el-radio>
+    </div>
+    <div>
+      <el-radio v-model="type" label="2" size="mini" border>{{ $t('cron.cycle') }}</el-radio>
+      <span style="margin-left: 10px; margin-right: 5px;">{{ $t('cron.from') }}</span>
+      <el-input-number v-model="cycle.start" :min="1" :max="31" size="mini" style="width: 100px;" @change="type = '2'" />
+      <span style="margin-left: 5px; margin-right: 5px;">{{ $t('cron.to') }}</span>
+      <el-input-number v-model="cycle.end" :min="2" :max="31" size="mini" style="width: 100px;" @change="type = '2'" />
+      {{ $t('cron.day') }}
+    </div>
+    <div>
+      <el-radio v-model="type" label="3" size="mini" border>{{ $t('cron.repeat') }}</el-radio>
+      <span style="margin-left: 10px; margin-right: 5px;">{{ $t('cron.from') }}</span>
+      <el-input-number v-model="loop.start" :min="1" :max="31" size="mini" style="width: 100px;" @change="type = '3'" />
+      <span style="margin-left: 5px; margin-right: 5px;">{{ $t('cron.day_begin') }}</span>
+      <el-input-number v-model="loop.end" :min="1" :max="31" size="mini" style="width: 100px;" @change="type = '3'" />
+      {{ $t('cron.day_exec') }}
+    </div>
+    <div>
+      <el-radio v-model="type" label="8" size="mini" border>{{ $t('cron.work_day') }}</el-radio>
+      <span style="margin-left: 10px; margin-right: 5px;">{{ $t('cron.this_month') }}</span>
+      <el-input-number v-model="work" :min="1" :max="7" size="mini" style="width: 100px;" @change="type = '8'" />
+      {{ $t('cron.day_near_work_day') }}
+    </div>
+    <div>
+      <el-radio v-model="type" label="6" size="mini" border>{{ $t('cron.this_week_last_day') }}</el-radio>
+    </div>
+    <div>
+      <el-radio v-model="type" label="4" size="mini" border>{{ $t('cron.set') }}</el-radio>
+      <el-checkbox-group v-model="appoint">
+        <div v-for="i in 4" :key="i" style="margin-left: 10px;  line-height: 25px;">
+          <el-checkbox v-for="j in 10" v-if="parseInt((i - 1) + '' + (j - 1)) < 32 && !(i === 1 && j === 1)" :key="j" :label="(i - 1) + '' + (j - 1)" @change="type = '4'" />
+        </div>
+      </el-checkbox-group>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    value: {
+      type: String,
+      default: '?'
+    }
+  },
+  data() {
+    return {
+      type: '5', // 类型
+      cycle: { // 周期
+        start: 0,
+        end: 0
+      },
+      loop: { // 循环
+        start: 0,
+        end: 0
+      },
+      week: { // 指定周
+        start: 0,
+        end: 0
+      },
+      work: 0,
+      last: 0,
+      appoint: [] // 指定
+    }
+  },
+  computed: {
+    value_() {
+      const result = []
+      switch (this.type) {
+        case '1': // 每秒
+          result.push('*')
+          break
+        case '2': // 周期
+          result.push(`${this.cycle.start}-${this.cycle.end}`)
+          break
+        case '3': // 循环
+          result.push(`${this.loop.start}/${this.loop.end}`)
+          break
+        case '4': // 指定
+          result.push(this.appoint.join(','))
+          break
+        case '6': // 最后
+          result.push(`${this.last === 0 ? '' : this.last}L`)
+          break
+        case '7': // 指定周
+          result.push(`${this.week.start}#${this.week.end}`)
+          break
+        case '8': // 工作日
+          result.push(`${this.work}W`)
+          break
+        default: // 不指定
+          result.push('?')
+          break
+      }
+      this.$emit('input', result.join(''))
+      return result.join('')
+    }
+  },
+  watch: {
+    'value'(a, b) {
+      this.updateVal()
+    }
+  },
+  created() {
+    this.updateVal()
+  },
+  methods: {
+    updateVal() {
+      if (!this.value) {
+        return
+      }
+      if (this.value === '?') {
+        this.type = '5'
+      } else if (this.value.indexOf('-') !== -1) { // 2周期
+        if (this.value.split('-').length === 2) {
+          this.type = '2'
+          this.cycle.start = this.value.split('-')[0]
+          this.cycle.end = this.value.split('-')[1]
+        }
+      } else if (this.value.indexOf('/') !== -1) { // 3循环
+        if (this.value.split('/').length === 2) {
+          this.type = '3'
+          this.loop.start = this.value.split('/')[0]
+          this.loop.end = this.value.split('/')[1]
+        }
+      } else if (this.value.indexOf('*') !== -1) { // 1每
+        this.type = '1'
+      } else if (this.value.indexOf('L') !== -1) { // 6最后
+        this.type = '6'
+        this.last = this.value.replace('L', '')
+      } else if (this.value.indexOf('#') !== -1) { // 7指定周
+        if (this.value.split('#').length === 2) {
+          this.type = '7'
+          this.week.start = this.value.split('#')[0]
+          this.week.end = this.value.split('#')[1]
+        }
+      } else if (this.value.indexOf('W') !== -1) { // 8工作日
+        this.type = '8'
+        this.work = this.value.replace('W', '')
+      } else { // *
+        this.type = '4'
+        this.appoint = this.value.split(',')
+      }
+    }
+  }
+}
+</script>
+
+<style lang="css">
+.el-checkbox+.el-checkbox {
+    margin-left: 10px;
+}
+</style>
diff --git a/frontend/src/components/cron/cron/hour.vue b/frontend/src/components/cron/cron/hour.vue
new file mode 100644
index 0000000000..30f9abd571
--- /dev/null
+++ b/frontend/src/components/cron/cron/hour.vue
@@ -0,0 +1,142 @@
+<template lang="html">
+  <div :val="value_">
+    <div>
+      <el-radio v-model="type" label="1" size="mini" border>{{ $t('cron.every_hour') }}</el-radio>
+    </div>
+    <div>
+      <el-radio v-model="type" label="2" size="mini" border>{{ $t('cron.cycle') }}</el-radio>
+      <span style="margin-left: 10px; margin-right: 5px;">{{ $t('cron.from') }}</span>
+      <el-input-number v-model="cycle.start" :min="0" :max="23" size="mini" style="width: 100px;" @change="type = '2'" />
+      <span style="margin-left: 5px; margin-right: 5px;">{{ $t('cron.to') }}</span>
+      <el-input-number v-model="cycle.end" :min="2" :max="23" size="mini" style="width: 100px;" @change="type = '2'" />
+      {{ $t('cron.hour') }}
+    </div>
+    <div>
+      <el-radio v-model="type" label="3" size="mini" border>{{ $t('cron.repeat') }}</el-radio>
+      <span style="margin-left: 10px; margin-right: 5px;">{{ $t('cron.from') }}</span>
+      <el-input-number v-model="loop.start" :min="0" :max="23" size="mini" style="width: 100px;" @change="type = '3'" />
+      <span style="margin-left: 5px; margin-right: 5px;">{{ $t('cron.hour_begin') }}</span>
+      <el-input-number v-model="loop.end" :min="1" :max="23" size="mini" style="width: 100px;" @change="type = '3'" />
+      {{ $t('cron.hour_exec') }}
+    </div>
+    <div>
+      <el-radio v-model="type" label="4" size="mini" border>{{ $t('cron.set') }}</el-radio>
+      <el-checkbox-group v-model="appoint">
+        <div v-for="i in 3" :key="i" style="margin-left: 10px;  line-height: 25px;">
+          <el-checkbox v-for="j in 10" v-if="parseInt((i - 1) + '' + (j - 1)) < 24" :key="j" :label="(i - 1) + '' + (j - 1)" @change="type = '4'" />
+        </div>
+      </el-checkbox-group>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    value: {
+      type: String,
+      default: '*'
+    }
+  },
+  data() {
+    return {
+      type: '1', // 类型
+      cycle: { // 周期
+        start: 0,
+        end: 0
+      },
+      loop: { // 循环
+        start: 0,
+        end: 0
+      },
+      week: { // 指定周
+        start: 0,
+        end: 0
+      },
+      work: 0,
+      last: 0,
+      appoint: [] // 指定
+    }
+  },
+  computed: {
+    value_() {
+      const result = []
+      switch (this.type) {
+        case '1': // 每秒
+          result.push('*')
+          break
+        case '2': // 年期
+          result.push(`${this.cycle.start}-${this.cycle.end}`)
+          break
+        case '3': // 循环
+          result.push(`${this.loop.start}/${this.loop.end}`)
+          break
+        case '4': // 指定
+          result.push(this.appoint.join(','))
+          break
+        case '6': // 最后
+          result.push(`${this.last === 0 ? '' : this.last}L`)
+          break
+        default: // 不指定
+          result.push('?')
+          break
+      }
+      this.$emit('input', result.join(''))
+      return result.join('')
+    }
+  },
+  watch: {
+    'value'(a, b) {
+      this.updateVal()
+    }
+  },
+  created() {
+    this.updateVal()
+  },
+  methods: {
+    updateVal() {
+      if (!this.value) {
+        return
+      }
+      if (this.value === '?') {
+        this.type = '5'
+      } else if (this.value.indexOf('-') !== -1) { // 2周期
+        if (this.value.split('-').length === 2) {
+          this.type = '2'
+          this.cycle.start = this.value.split('-')[0]
+          this.cycle.end = this.value.split('-')[1]
+        }
+      } else if (this.value.indexOf('/') !== -1) { // 3循环
+        if (this.value.split('/').length === 2) {
+          this.type = '3'
+          this.loop.start = this.value.split('/')[0]
+          this.loop.end = this.value.split('/')[1]
+        }
+      } else if (this.value.indexOf('*') !== -1) { // 1每
+        this.type = '1'
+      } else if (this.value.indexOf('L') !== -1) { // 6最后
+        this.type = '6'
+        this.last = this.value.replace('L', '')
+      } else if (this.value.indexOf('#') !== -1) { // 7指定周
+        if (this.value.split('#').length === 2) {
+          this.type = '7'
+          this.week.start = this.value.split('#')[0]
+          this.week.end = this.value.split('#')[1]
+        }
+      } else if (this.value.indexOf('W') !== -1) { // 8工作日
+        this.type = '8'
+        this.work = this.value.replace('W', '')
+      } else { // *
+        this.type = '4'
+        this.appoint = this.value.split(',')
+      }
+    }
+  }
+}
+</script>
+
+<style lang="css">
+.el-checkbox+.el-checkbox {
+    margin-left: 10px;
+}
+</style>
diff --git a/frontend/src/components/cron/cron/month.vue b/frontend/src/components/cron/cron/month.vue
new file mode 100644
index 0000000000..20a0321f80
--- /dev/null
+++ b/frontend/src/components/cron/cron/month.vue
@@ -0,0 +1,143 @@
+<template lang="html">
+  <div :val="value_">
+    <div>
+      <el-radio v-model="type" label="1" size="mini" border>{{ $t('cron.every_month') }}</el-radio>
+    </div>
+    <div>
+      <el-radio v-model="type" label="5" size="mini" border>{{ $t('cron.not_set') }}</el-radio>
+    </div>
+    <div>
+      <el-radio v-model="type" label="2" size="mini" border>{{ $t('cron.cycle') }}</el-radio>
+      <span style="margin-left: 10px; margin-right: 5px;">{{ $t('cron.from') }}</span>
+      <el-input-number v-model="cycle.start" :min="1" :max="12" size="mini" style="width: 100px;" @change="type = '2'" />
+      <span style="margin-left: 5px; margin-right: 5px;">{{ $t('cron.to') }}</span>
+      <el-input-number v-model="cycle.end" :min="2" :max="12" size="mini" style="width: 100px;" @change="type = '2'" />
+      {{ $t('cron.month') }}
+    </div>
+    <div>
+      <el-radio v-model="type" label="3" size="mini" border>{{ $t('cron.repeat') }}</el-radio>
+      <span style="margin-left: 10px; margin-right: 5px;">{{ $t('cron.from') }}</span>
+      <el-input-number v-model="loop.start" :min="1" :max="12" size="mini" style="width: 100px;" @change="type = '3'" />
+      <span style="margin-left: 5px; margin-right: 5px;">{{ $t('cron.month_begin') }}</span>
+      <el-input-number v-model="loop.end" :min="1" :max="12" size="mini" style="width: 100px;" @change="type = '3'" />
+      {{ $t('cron.month_exec') }}
+    </div>
+    <div>
+      <el-radio v-model="type" label="4" size="mini" border>{{ $t('cron.set') }}</el-radio>
+      <el-checkbox-group v-model="appoint" style="margin-left: 0px;  line-height: 25px;">
+        <el-checkbox v-for="i in 12" :key="i" :label="i+''" @change="type = '4'" />
+      </el-checkbox-group>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    value: {
+      type: String,
+      default: '*'
+    }
+  },
+  data() {
+    return {
+      type: '1', // 类型
+      cycle: { // 周期
+        start: 0,
+        end: 0
+      },
+      loop: { // 循环
+        start: 0,
+        end: 0
+      },
+      week: { // 指定周
+        start: 0,
+        end: 0
+      },
+      work: 0,
+      last: 0,
+      appoint: [] // 指定
+    }
+  },
+  computed: {
+    value_() {
+      const result = []
+      switch (this.type) {
+        case '1': // 每秒
+          result.push('*')
+          break
+        case '2': // 年期
+          result.push(`${this.cycle.start}-${this.cycle.end}`)
+          break
+        case '3': // 循环
+          result.push(`${this.loop.start}/${this.loop.end}`)
+          break
+        case '4': // 指定
+          result.push(this.appoint.join(','))
+          break
+        case '6': // 最后
+          result.push(`${this.last === 0 ? '' : this.last}L`)
+          break
+        default: // 不指定
+          result.push('?')
+          break
+      }
+      this.$emit('input', result.join(''))
+      return result.join('')
+    }
+  },
+  watch: {
+    'value'(a, b) {
+      this.updateVal()
+    }
+  },
+  created() {
+    this.updateVal()
+  },
+  methods: {
+    updateVal() {
+      if (!this.value) {
+        return
+      }
+      if (this.value === '?') {
+        this.type = '5'
+      } else if (this.value.indexOf('-') !== -1) { // 2周期
+        if (this.value.split('-').length === 2) {
+          this.type = '2'
+          this.cycle.start = this.value.split('-')[0]
+          this.cycle.end = this.value.split('-')[1]
+        }
+      } else if (this.value.indexOf('/') !== -1) { // 3循环
+        if (this.value.split('/').length === 2) {
+          this.type = '3'
+          this.loop.start = this.value.split('/')[0]
+          this.loop.end = this.value.split('/')[1]
+        }
+      } else if (this.value.indexOf('*') !== -1) { // 1每
+        this.type = '1'
+      } else if (this.value.indexOf('L') !== -1) { // 6最后
+        this.type = '6'
+        this.last = this.value.replace('L', '')
+      } else if (this.value.indexOf('#') !== -1) { // 7指定周
+        if (this.value.split('#').length === 2) {
+          this.type = '7'
+          this.week.start = this.value.split('#')[0]
+          this.week.end = this.value.split('#')[1]
+        }
+      } else if (this.value.indexOf('W') !== -1) { // 8工作日
+        this.type = '8'
+        this.work = this.value.replace('W', '')
+      } else { // *
+        this.type = '4'
+        this.appoint = this.value.split(',')
+      }
+    }
+  }
+}
+</script>
+
+<style lang="css">
+.el-checkbox+.el-checkbox {
+    margin-left: 10px;
+}
+</style>
diff --git a/frontend/src/components/cron/cron/secondAndMinute.vue b/frontend/src/components/cron/cron/secondAndMinute.vue
new file mode 100644
index 0000000000..b6e1962254
--- /dev/null
+++ b/frontend/src/components/cron/cron/secondAndMinute.vue
@@ -0,0 +1,146 @@
+<!-- 秒,分钟 -->
+<template lang="html">
+  <div :val="value_">
+    <div>
+      <el-radio v-model="type" label="1" size="mini" border>{{ $t('cron.every') }}{{ lable }}</el-radio>
+    </div>
+    <div>
+      <el-radio v-model="type" label="2" size="mini" border>{{ $t('cron.cycle') }}</el-radio>
+      <span style="margin-left: 10px; margin-right: 5px;">{{ $t('cron.from') }}</span>
+      <el-input-number v-model="cycle.start" :min="1" :max="59" size="mini" style="width: 100px;" @change="type = '2'" />
+      <span style="margin-left: 5px; margin-right: 5px;">{{ $t('cron.to') }}</span>
+      <el-input-number v-model="cycle.end" :min="2" :max="59" size="mini" style="width: 100px;" @change="type = '2'" />
+      {{ lable }}
+    </div>
+    <div>
+      <el-radio v-model="type" label="3" size="mini" border>{{ $t('cron.repeat') }}</el-radio>
+      <span style="margin-left: 10px; margin-right: 5px;">{{ $t('cron.from') }}</span>
+      <el-input-number v-model="loop.start" :min="0" :max="59" size="mini" style="width: 100px;" @change="type = '3'" />
+      <span style="margin-left: 5px; margin-right: 5px;">{{ lable }}{{ $t('cron.every_begin') }}</span>
+      <el-input-number v-model="loop.end" :min="1" :max="59" size="mini" style="width: 100px;" @change="type = '3'" />
+      {{ lable }}{{ $t('cron.every_exec') }}
+    </div>
+    <div>
+      <el-radio v-model="type" label="4" size="mini" border>{{ $t('cron.set') }}</el-radio>
+      <el-checkbox-group v-model="appoint">
+        <div v-for="i in 6" :key="i" style="margin-left: 10px; line-height: 25px;">
+          <el-checkbox v-for="j in 10" :key="j" :label="(i - 1) + '' + (j - 1)" @change="type = '4'" />
+        </div>
+      </el-checkbox-group>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    value: {
+      type: String,
+      default: '*'
+    },
+    lable: {
+      type: String
+    }
+  },
+  data() {
+    return {
+      type: '1', // 类型
+      cycle: { // 周期
+        start: 0,
+        end: 0
+      },
+      loop: { // 循环
+        start: 0,
+        end: 0
+      },
+      week: { // 指定周
+        start: 0,
+        end: 0
+      },
+      work: 0,
+      last: 0,
+      appoint: [] // 指定
+    }
+  },
+  computed: {
+    value_() {
+      const result = []
+      switch (this.type) {
+        case '1': // 每秒
+          result.push('*')
+          break
+        case '2': // 年期
+          result.push(`${this.cycle.start}-${this.cycle.end}`)
+          break
+        case '3': // 循环
+          result.push(`${this.loop.start}/${this.loop.end}`)
+          break
+        case '4': // 指定
+          result.push(this.appoint.join(','))
+          break
+        case '6': // 最后
+          result.push(`${this.last === 0 ? '' : this.last}L`)
+          break
+        default: // 不指定
+          result.push('?')
+          break
+      }
+      this.$emit('input', result.join(''))
+      return result.join('')
+    }
+  },
+  watch: {
+    'value'(a, b) {
+      this.updateVal()
+    }
+  },
+  created() {
+    this.updateVal()
+  },
+  methods: {
+    updateVal() {
+      if (!this.value) {
+        return
+      }
+      if (this.value === '?') {
+        this.type = '5'
+      } else if (this.value.indexOf('-') !== -1) { // 2周期
+        if (this.value.split('-').length === 2) {
+          this.type = '2'
+          this.cycle.start = this.value.split('-')[0]
+          this.cycle.end = this.value.split('-')[1]
+        }
+      } else if (this.value.indexOf('/') !== -1) { // 3循环
+        if (this.value.split('/').length === 2) {
+          this.type = '3'
+          this.loop.start = this.value.split('/')[0]
+          this.loop.end = this.value.split('/')[1]
+        }
+      } else if (this.value.indexOf('*') !== -1) { // 1每
+        this.type = '1'
+      } else if (this.value.indexOf('L') !== -1) { // 6最后
+        this.type = '6'
+        this.last = this.value.replace('L', '')
+      } else if (this.value.indexOf('#') !== -1) { // 7指定周
+        if (this.value.split('#').length === 2) {
+          this.type = '7'
+          this.week.start = this.value.split('#')[0]
+          this.week.end = this.value.split('#')[1]
+        }
+      } else if (this.value.indexOf('W') !== -1) { // 8工作日
+        this.type = '8'
+        this.work = this.value.replace('W', '')
+      } else { // *
+        this.type = '4'
+        this.appoint = this.value.split(',')
+      }
+    }
+  }
+}
+</script>
+
+<style lang="css">
+.el-checkbox+.el-checkbox {
+    margin-left: 10px;
+}
+</style>
diff --git a/frontend/src/components/cron/cron/week.vue b/frontend/src/components/cron/cron/week.vue
new file mode 100644
index 0000000000..12d81cfee8
--- /dev/null
+++ b/frontend/src/components/cron/cron/week.vue
@@ -0,0 +1,157 @@
+<template lang="html">
+  <div :val="value_">
+    <div>
+      <el-radio v-model="type" label="1" size="mini" border>{{ $t('cron.every_week') }}</el-radio>
+    </div>
+    <div>
+      <el-radio v-model="type" label="5" size="mini" border>{{ $t('cron.not_set') }}</el-radio>
+    </div>
+    <div>
+      <el-radio v-model="type" label="2" size="mini" border>{{ $t('cron.cycle') }}</el-radio>
+      <span style="margin-left: 10px; margin-right: 5px;">{{ $t('cron.week_start') }}</span>
+      <el-input-number v-model="cycle.start" :min="1" :max="7" size="mini" style="width: 100px;" @change="type = '2'" />
+      <span style="margin-left: 5px; margin-right: 5px;">{{ $t('cron.week_end') }}</span>
+      <el-input-number v-model="cycle.end" :min="2" :max="7" size="mini" style="width: 100px;" @change="type = '2'" />
+    </div>
+    <div>
+      <el-radio v-model="type" label="3" size="mini" border>{{ $t('cron.repeat') }}</el-radio>
+      <span style="margin-left: 10px; margin-right: 5px;">{{ $t('cron.week_start') }}</span>
+      <el-input-number v-model="loop.start" :min="1" :max="7" size="mini" style="width: 100px;" @change="type = '3'" />
+      <span style="margin-left: 5px; margin-right: 5px;">{{ $t('cron.every_begin') }}</span>
+      <el-input-number v-model="loop.end" :min="1" :max="7" size="mini" style="width: 100px;" @change="type = '3'" />
+      {{ $t('cron.day_exec') }}
+    </div>
+    <!--    <div>-->
+    <!--      <el-radio v-model="type" label="7" size="mini" border>指定周</el-radio>-->
+    <!--      <span style="margin-left: 10px; margin-right: 5px;">本月第</span>-->
+    <!--      <el-input-number v-model="week.start" :min="1" :max="4" size="mini" style="width: 100px;" @change="type = '7'" />-->
+    <!--      <span style="margin-left: 5px; margin-right: 5px;">周，星期</span>-->
+    <!--      <el-input-number v-model="week.end" :min="1" :max="7" size="mini" style="width: 100px;" @change="type = '7'" />-->
+    <!--    </div>-->
+    <!--    <div>-->
+    <!--      <el-radio v-model="type" label="6" size="mini" border>本月最后一个</el-radio>-->
+    <!--      <span style="margin-left: 10px; margin-right: 5px;">星期</span>-->
+    <!--      <el-input-number v-model="last" :min="1" :max="7" size="mini" style="width: 100px;" @change="type = '6'" />-->
+    <!--    </div>-->
+    <div>
+      <el-radio v-model="type" label="4" size="mini" border>{{ $t('cron.set') }}</el-radio>
+      <el-checkbox-group v-model="appoint" style="margin-left: 50px;  line-height: 25px;">
+        <el-checkbox v-for="i in 7" :key="i" :label="i+''" @change="type = '4'" />
+      </el-checkbox-group>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    value: {
+      type: String,
+      default: '*'
+    }
+  },
+  data() {
+    return {
+      type: '1', // 类型
+      cycle: { // 周期
+        start: 0,
+        end: 0
+      },
+      loop: { // 循环
+        start: 0,
+        end: 0
+      },
+      week: { // 指定周
+        start: 0,
+        end: 0
+      },
+      work: 0,
+      last: 0,
+      appoint: [] // 指定
+    }
+  },
+  computed: {
+    value_() {
+      const result = []
+      switch (this.type) {
+        case '1': // 每秒
+          result.push('*')
+          break
+        case '2': // 年期
+          result.push(`${this.cycle.start}-${this.cycle.end}`)
+          break
+        case '3': // 循环
+          result.push(`${this.loop.start}/${this.loop.end}`)
+          break
+        case '4': // 指定
+          result.push(this.appoint.join(','))
+          break
+        case '6': // 最后
+          result.push(`${this.last === 0 ? '' : this.last}L`)
+          break
+        case '7': // 指定周
+          result.push(`${this.week.start}#${this.week.end}`)
+          break
+        default: // 不指定
+          result.push('?')
+          break
+      }
+      this.$emit('input', result.join(''))
+      return result.join('')
+    }
+  },
+  watch: {
+    'value'(a, b) {
+      this.updateVal()
+    }
+  },
+  created() {
+    this.updateVal()
+  },
+  methods: {
+    updateVal() {
+      if (!this.value) {
+        return
+      }
+      if (this.value === '?') {
+        this.type = '5'
+      } else if (this.value.indexOf('-') !== -1) { // 2周期
+        if (this.value.split('-').length === 2) {
+          this.type = '2'
+          this.cycle.start = this.value.split('-')[0]
+          this.cycle.end = this.value.split('-')[1]
+        }
+      } else if (this.value.indexOf('/') !== -1) { // 3循环
+        if (this.value.split('/').length === 2) {
+          this.type = '3'
+          this.loop.start = this.value.split('/')[0]
+          this.loop.end = this.value.split('/')[1]
+        }
+      } else if (this.value.indexOf('*') !== -1) { // 1每
+        this.type = '1'
+      } else if (this.value.indexOf('L') !== -1) { // 6最后
+        this.type = '6'
+        this.last = this.value.replace('L', '')
+      } else if (this.value.indexOf('#') !== -1) { // 7指定周
+        if (this.value.split('#').length === 2) {
+          this.type = '7'
+          this.week.start = this.value.split('#')[0]
+          this.week.end = this.value.split('#')[1]
+        }
+      } else if (this.value.indexOf('W') !== -1) { // 8工作日
+        this.type = '8'
+        this.work = this.value.replace('W', '')
+      } else { // *
+        this.type = '4'
+        this.appoint = this.value.split(',')
+      }
+    }
+  }
+}
+</script>
+
+<style lang="css">
+.el-checkbox+.el-checkbox {
+    margin-left: 10px;
+}
+</style>
diff --git a/frontend/src/components/cron/cron/year.vue b/frontend/src/components/cron/cron/year.vue
new file mode 100644
index 0000000000..fdf45d068c
--- /dev/null
+++ b/frontend/src/components/cron/cron/year.vue
@@ -0,0 +1,130 @@
+<template lang="html">
+  <div :val="value_">
+    <div>
+      <el-radio v-model="type" label="1" size="mini" border>{{ $t('cron.every_year') }}</el-radio>
+    </div>
+    <div>
+      <el-radio v-model="type" label="5" size="mini" border>{{ $t('cron.not_set') }}</el-radio>
+    </div>
+    <div>
+      <el-radio v-model="type" label="2" size="mini" border>{{ $t('cron.cycle') }}</el-radio>
+      <span style="margin-left: 10px; margin-right: 5px;">{{ $t('cron.from') }}</span>
+      <el-input-number v-model="cycle.start" :min="2000" size="mini" style="width: 100px;" @change="type = '2'" />
+      <span style="margin-left: 5px; margin-right: 5px;">{{ $t('cron.to') }}</span>
+      <el-input-number v-model="cycle.end" :min="2000" size="mini" style="width: 100px;" @change="type = '2'" />
+      {{ $t('cron.year') }}
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    value: {
+      type: String,
+      default: '*'
+    }
+  },
+  data() {
+    const year = new Date().getFullYear()
+    return {
+      type: '1', // 类型
+      cycle: { // 周期
+        start: year,
+        end: year
+      },
+      loop: { // 循环
+        start: 0,
+        end: 0
+      },
+      week: { // 指定周
+        start: 0,
+        end: 0
+      },
+      work: 0,
+      last: 0,
+      appoint: [] // 指定
+    }
+  },
+  computed: {
+    value_() {
+      const result = []
+      switch (this.type) {
+        case '1': // 每秒
+          result.push('*')
+          break
+        case '2': // 年期
+          result.push(`${this.cycle.start}-${this.cycle.end}`)
+          break
+        case '3': // 循环
+          result.push(`${this.loop.start}/${this.loop.end}`)
+          break
+        case '4': // 指定
+          result.push(this.appoint.join(','))
+          break
+        case '6': // 最后
+          result.push(`${this.last === 0 ? '' : this.last}L`)
+          break
+        default: // 不指定
+          result.push('?')
+          break
+      }
+      this.$emit('input', result.join(''))
+      return result.join('')
+    }
+  },
+  watch: {
+    'value'(a, b) {
+      this.updateVal()
+    }
+  },
+  created() {
+    this.updateVal()
+  },
+  methods: {
+    updateVal() {
+      if (!this.value) {
+        return
+      }
+      if (this.value === '?') {
+        this.type = '5'
+      } else if (this.value.indexOf('-') !== -1) { // 2周期
+        if (this.value.split('-').length === 2) {
+          this.type = '2'
+          this.cycle.start = this.value.split('-')[0]
+          this.cycle.end = this.value.split('-')[1]
+        }
+      } else if (this.value.indexOf('/') !== -1) { // 3循环
+        if (this.value.split('/').length === 2) {
+          this.type = '3'
+          this.loop.start = this.value.split('/')[0]
+          this.loop.end = this.value.split('/')[1]
+        }
+      } else if (this.value.indexOf('*') !== -1) { // 1每
+        this.type = '1'
+      } else if (this.value.indexOf('L') !== -1) { // 6最后
+        this.type = '6'
+        this.last = this.value.replace('L', '')
+      } else if (this.value.indexOf('#') !== -1) { // 7指定周
+        if (this.value.split('#').length === 2) {
+          this.type = '7'
+          this.week.start = this.value.split('#')[0]
+          this.week.end = this.value.split('#')[1]
+        }
+      } else if (this.value.indexOf('W') !== -1) { // 8工作日
+        this.type = '8'
+        this.work = this.value.replace('W', '')
+      } else { // *
+        this.type = '4'
+        this.appoint = this.value.split(',')
+      }
+    }
+  }
+}
+</script>
+
+<style lang="css">
+.el-checkbox+.el-checkbox {
+    margin-left: 10px;
+}
+</style>
diff --git a/frontend/src/lang/en.js b/frontend/src/lang/en.js
index 9a24291c9a..5ce5dfb5ba 100644
--- a/frontend/src/lang/en.js
+++ b/frontend/src/lang/en.js
@@ -967,7 +967,44 @@ export default {
   template: {
     exit_same_template_check: 'The Same Name Exists In Now Class. Do You Want To Override It?',
     override: 'Override',
-    cancel: '取消',
+    cancel: 'Cancel',
     confirm_upload: 'Upload Confirm'
+  },
+  cron: {
+    second: 'Second',
+    minute: 'Minute',
+    hour: 'Hour',
+    day: 'Day',
+    month: 'Month',
+    week: 'Week',
+    year: 'Year',
+    d_w_cant_not_set: 'Day and Week can not same as "Not set"',
+    d_w_must_one_set: 'Day and Week at least on as "Not set"',
+    every_day: 'Every day',
+    cycle: 'Cycle',
+    not_set: 'Not set',
+    from: 'From',
+    to: 'To',
+    repeat: 'Repeat',
+    day_begin: 'begin,every',
+    day_exec: 'execute once',
+    work_day: 'weekday',
+    this_month: 'This month',
+    day_near_work_day: 'nearly weekday',
+    this_week_last_day: 'this month last day',
+    set: 'Set',
+    every_hour: 'Every hour',
+    hour_begin: 'begin,every',
+    hour_exec: 'execute once',
+    every_month: 'Every month',
+    month_begin: 'begin,every',
+    month_exec: 'execute once',
+    every: 'Every',
+    every_begin: 'begin,every',
+    every_exec: 'execute once',
+    every_week: 'Every week',
+    week_start: 'From week',
+    week_end: 'to week',
+    every_year: 'Every year'
   }
 }
diff --git a/frontend/src/lang/tw.js b/frontend/src/lang/tw.js
index cf377d1ae5..8ce56d835c 100644
--- a/frontend/src/lang/tw.js
+++ b/frontend/src/lang/tw.js
@@ -968,6 +968,42 @@ export default {
     override: '覆盖',
     cancel: '取消',
     confirm_upload: '上传确认'
+  },
+  cron: {
+    second: '秒',
+    minute: '分',
+    hour: '時',
+    day: '日',
+    month: '月',
+    week: '周',
+    year: '年',
+    d_w_cant_not_set: '日期與星期不可以同時為“不指定”',
+    d_w_must_one_set: '日期與星期必須有一個為“不指定”',
+    every_day: '每日',
+    cycle: '周期',
+    not_set: '不指定',
+    from: '從',
+    to: '至',
+    repeat: '循環',
+    day_begin: '日開始，每',
+    day_exec: '日執行一次',
+    work_day: '工作日',
+    this_month: '本月',
+    day_near_work_day: '號，最近的工作日',
+    this_week_last_day: '本月最後一天',
+    set: '指定',
+    every_hour: '每時',
+    hour_begin: '時開始，每',
+    hour_exec: '時執行一次',
+    every_month: '每月',
+    month_begin: '月開始，每',
+    month_exec: '月執行一次',
+    every: '每',
+    every_begin: '開始，每',
+    every_exec: '執行一次',
+    every_week: '每周',
+    week_start: '從星期',
+    week_end: '至星期',
+    every_year: '每年'
   }
-
 }
diff --git a/frontend/src/lang/zh.js b/frontend/src/lang/zh.js
index 256d5ee025..d1355b9e8c 100644
--- a/frontend/src/lang/zh.js
+++ b/frontend/src/lang/zh.js
@@ -971,5 +971,42 @@ export default {
     override: '覆盖',
     cancel: '取消',
     confirm_upload: '上传确认'
+  },
+  cron: {
+    second: '秒',
+    minute: '分',
+    hour: '时',
+    day: '日',
+    month: '月',
+    week: '周',
+    year: '年',
+    d_w_cant_not_set: '日期与星期不可以同时为“不指定”',
+    d_w_must_one_set: '日期与星期必须有一个为“不指定”',
+    every_day: '每日',
+    cycle: '周期',
+    not_set: '不指定',
+    from: '从',
+    to: '至',
+    repeat: '循环',
+    day_begin: '日开始，每',
+    day_exec: '日执行一次',
+    work_day: '工作日',
+    this_month: '本月',
+    day_near_work_day: '号，最近的工作日',
+    this_week_last_day: '本月最后一天',
+    set: '指定',
+    every_hour: '每时',
+    hour_begin: '时开始，每',
+    hour_exec: '时执行一次',
+    every_month: '每月',
+    month_begin: '月开始，每',
+    month_exec: '月执行一次',
+    every: '每',
+    every_begin: '开始，每',
+    every_exec: '执行一次',
+    every_week: '每周',
+    week_start: '从星期',
+    week_end: '至星期',
+    every_year: '每年'
   }
 }
diff --git a/frontend/src/views/chart/view/ChartEdit.vue b/frontend/src/views/chart/view/ChartEdit.vue
index 45512556c6..7b9298db5f 100644
--- a/frontend/src/views/chart/view/ChartEdit.vue
+++ b/frontend/src/views/chart/view/ChartEdit.vue
@@ -979,7 +979,7 @@ export default {
   }
 
   .attr-style{
-    height: calc(100vh - 56px - 25vh - 40px - 62px - 60px);
+    height: calc(100vh - 56px - 25vh - 40px - 62px - 60px - 20px);
   }
 
   .attr-selector{
diff --git a/frontend/src/views/dataset/data/UpdateInfo.vue b/frontend/src/views/dataset/data/UpdateInfo.vue
index af0b653c86..889b95431f 100644
--- a/frontend/src/views/dataset/data/UpdateInfo.vue
+++ b/frontend/src/views/dataset/data/UpdateInfo.vue
@@ -64,6 +64,7 @@
     </el-row>
 
     <el-dialog
+      v-dialogDrag
       :title="$t('dataset.detail')"
       :visible="show_error_massage"
       :show-close="false"
@@ -77,6 +78,7 @@
     </el-dialog>
 
     <el-dialog
+      v-dialogDrag
       :title="table.name+' '+$t('dataset.update_setting')"
       :visible="update_setting"
       :show-close="false"
@@ -84,6 +86,7 @@
       class="dialog-css"
     >
       <el-dialog
+        v-dialogDrag
         :title="$t('dataset.task_update')"
         :visible="update_task"
         :show-close="false"
@@ -92,7 +95,7 @@
         append-to-body
       >
         <el-col>
-          <el-form :form="taskForm" label-width="80px" size="mini">
+          <el-form :form="taskForm" label-width="100px" size="mini">
             <el-form-item :label="$t('dataset.task_name')" prop="name">
               <el-input
                 v-model="taskForm.name"
@@ -135,7 +138,7 @@
             </el-form-item>
             <el-form-item v-if="taskForm.rate === 'CRON'" label="">
               <el-popover v-model="cronEdit">
-                <cron :i18n="lang" @close="cronEdit = false" @change="cronChange" />
+                <cron v-model="taskForm.cron" @close="cronEdit = false" />
                 <el-input slot="reference" v-model="taskForm.cron" size="mini" style="width: 50%" @click="cronEdit = true" />
               </el-popover>
             </el-form-item>
@@ -289,7 +292,7 @@ import 'codemirror/addon/hint/show-hint.css'
 import 'codemirror/addon/hint/sql-hint'
 import 'codemirror/addon/hint/show-hint'
 // vue-cron
-import { cron } from 'vue-cron'
+import cron from '@/components/cron/cron'
 
 export default {
   name: 'UpdateInfo',
@@ -524,6 +527,8 @@ export default {
         this.taskForm.end = '0'
         this.taskForm.endTime = ''
         this.taskForm.cron = ''
+      } else {
+        this.taskForm.cron = '0 0 * ? * * *'
       }
     },
     listTaskLog() {