Merge pull request #1532 from dataease/pr@dev@feat_date_range_dynamic

frontend/src/components/widget/DeWidget/DeDate.vue

@@ -72,7 +72,8 @@ export default {
       this.setCondition()
     },
     'defaultValueStr': function(value, old) {
-      if (this.element.serviceName === 'timeDateWidget' && this.element.options.attrs.default.isDynamic) {
+      if ((this.element.serviceName === 'timeDateWidget' || this.element.serviceName === 'timeDateRangeWidget') &&
+          this.element.options.attrs.default.isDynamic) {
         // 如果设置了动态时间 不做任何操作
         return
       }
@@ -82,7 +83,7 @@ export default {
     },
     'defaultoptions': function(val, old) {
       // console.log('default chaneg')
-      if (this.element.serviceName !== 'timeDateWidget') {
+      if (this.element.serviceName !== 'timeDateWidget' || this.element.serviceName === 'timeDateRangeWidget') {
         if (!this.element.options.attrs.default.isDynamic) {
           this.values = this.fillValueDerfault()
           this.dateChange(this.values)
@@ -96,7 +97,8 @@ export default {
     }
   },
   created() {
-    if (this.element.serviceName === 'timeDateWidget' && this.element.options.attrs.default && this.element.options
+    if ((this.element.serviceName === 'timeDateWidget' || this.element.serviceName === 'timeDateRangeWidget') && this
+      .element.options.attrs.default && this.element.options
       .attrs.default.isDynamic) {
       if (this.element.options.attrs.default) {
         const widget = ApplicationContext.getService(this.element.serviceName)
@@ -177,10 +179,16 @@ export default {
     fillValueDerfault() {
       const defaultV = this.element.options.value === null ? '' : this.element.options.value.toString()
       if (this.element.options.attrs.type === 'daterange') {
-        if (defaultV === null || typeof defaultV === 'undefined' || defaultV === '' || defaultV === '[object Object]') { return [] }
+        if (defaultV === null || typeof defaultV === 'undefined' || defaultV === '' || defaultV ===
+            '[object Object]') {
+          return []
+        }
         return defaultV.split(',').map(item => parseFloat(item))
       } else {
-        if (defaultV === null || typeof defaultV === 'undefined' || defaultV === '' || defaultV === '[object Object]') { return null }
+        if (defaultV === null || typeof defaultV === 'undefined' || defaultV === '' || defaultV ===
+            '[object Object]') {
+          return null
+        }
         return parseFloat(defaultV.split(',')[0])
       }
     }

frontend/src/components/widget/serviceImpl/TimeDateRangeServiceImpl.js

-import { WidgetService } from '../service/WidgetService'
+import {
+  WidgetService
+} from '../service/WidgetService'
 
 const leftPanel = {
   icon: 'iconfont icon-riqi',
@@ -15,7 +17,17 @@ const dialogPanel = {
       endPlaceholder: 'dedaterange.to_placeholder',
       viewIds: [],
       fieldId: '',
-      dragItems: []
+      dragItems: [],
+      default: {
+        isDynamic: false,
+        dkey: 0,
+        sDynamicPrefix: 1,
+        sDynamicInfill: 'day',
+        sDynamicSuffix: 'before',
+        eDynamicPrefix: 1,
+        eDynamicInfill: 'day',
+        eDynamicSuffix: 'after'
+      }
     },
     value: ''
   },
@@ -40,7 +52,9 @@ const drawPanel = {
 
 class TimeDateRangeServiceImpl extends WidgetService {
   constructor(options = {}) {
-    Object.assign(options, { name: 'timeDateRangeWidget' })
+    Object.assign(options, {
+      name: 'timeDateRangeWidget'
+    })
     super(options)
     this.filterDialog = true
     this.showSwitch = false
@@ -66,6 +80,150 @@ class TimeDateRangeServiceImpl extends WidgetService {
       return field['deType'] === 1
     })
   }
+  getStartDayOfWeek() {
+    var now = new Date() // 当前日期
+    var nowDayOfWeek = now.getDay()
+    var nowDay = now.getDate() // 当前日
+    var nowMonth = now.getMonth() // 当前月
+    var day = nowDayOfWeek || 7
+    return new Date(now.getFullYear(), nowMonth, nowDay + 1 - day)
+  }
+  getEndDayOfWeek() {
+    var now = new Date() // 当前日期
+    var nowDayOfWeek = now.getDay()
+    var nowDay = now.getDate() // 当前日
+    var nowMonth = now.getMonth() // 当前月
+    var day = nowDayOfWeek || 7
+    return new Date(now.getFullYear(), nowMonth, nowDay + 7 - day)
+  }
+  getStartDayOfMonth() {
+    var now = new Date()
+    var nowMonth = now.getMonth() // 当前月
+    var monthStartDate = new Date(now.getFullYear(), nowMonth, 1)
+    return monthStartDate
+  }
+  getEndDayOfMonth() {
+    var now = new Date()
+    var nowMonth = now.getMonth() // 当前月
+    var monthEndDate = new Date(now.getFullYear(), nowMonth, this.getMonthDays())
+    return monthEndDate
+  }
+  getStartQuarter() {
+    var now = new Date()
+    var nowMonth = now.getMonth()
+    const startMonth = Math.floor((nowMonth / 3)) * 3
+    return new Date(now.getFullYear(), startMonth, 1)
+  }
+  getEndQuarter() {
+    var now = new Date()
+    var nowMonth = now.getMonth()
+    const endMonth = Math.floor((nowMonth / 3)) * 3 + (nowMonth % 3)
+    const days = (endMonth === 5 || endMonth === 8) ? 30 : 31
+    return new Date(now.getFullYear(), endMonth, days)
+  }
+  getStartYear() {
+    var now = new Date()
+    return new Date(now.getFullYear(), 0, 1)
+  }
+  getEndYear() {
+    var now = new Date()
+    return new Date(now.getFullYear(), 11, 31)
+  }
+  /**
+   * 获得本月天数
+   *
+   * @returns
+   */
+  getMonthDays() {
+    var now = new Date()
+    var nowMonth = now.getMonth() // 当前月
+    var monthStartDate = new Date(now.getFullYear(), nowMonth, 1)
+    var monthEndDate = new Date(now.getFullYear(), nowMonth + 1, 1)
+    var days = (monthEndDate - monthStartDate) / (1000 * 60 * 60 * 24)
+    return days
+  }
+  customTime(dynamicPrefix, dynamicInfill, dynamicSuffix) {
+    if (dynamicInfill === 'day') {
+      const oneday = 24 * 3600 * 1000
+      const step = oneday * dynamicPrefix
+      return dynamicSuffix === 'before' ? (Date.now() - step) : (Date.now() + step)
+    }
+    if (dynamicInfill === 'week') {
+      const oneday = 24 * 3600 * 1000
+      const step = oneday * dynamicPrefix * 7
+      return dynamicSuffix === 'before' ? (Date.now() - step) : (Date.now() + step)
+    }
+    if (dynamicInfill === 'month') {
+      const now = new Date()
+      const nowMonth = now.getMonth()
+      const nowYear = now.getFullYear()
+      const nowDate = now.getDate()
+
+      const tarYear = nowYear
+      if (dynamicSuffix === 'before') {
+        const deffMonth = nowMonth - dynamicPrefix
+        let diffYear = deffMonth / 12
+        if (deffMonth < 0) {
+          diffYear -= 1
+        }
+        return new Date(tarYear + diffYear, nowMonth - dynamicPrefix % 12, nowDate).getTime()
+      } else {
+        const deffMonth = nowMonth + dynamicPrefix
+        const diffYear = deffMonth / 12
+        return new Date(tarYear + diffYear, deffMonth % 12, nowDate).getTime()
+      }
+    }
+    if (dynamicInfill === 'year') {
+      const now = new Date()
+      const nowMonth = now.getMonth()
+      const nowYear = now.getFullYear()
+      const nowDate = now.getDate()
+
+      return new Date(dynamicSuffix === 'before' ? (nowYear - dynamicPrefix) : (nowYear + dynamicPrefix), nowMonth, nowDate).getTime()
+    }
+  }
+  dynamicDateFormNow(element) {
+    if (element.options.attrs.default === null || typeof element.options.attrs.default === 'undefined' || !element.options.attrs.default.isDynamic) return null
+
+    if (element.options.attrs.default.dkey === 0) {
+      // 本周
+      return [this.getStartDayOfWeek().getTime(), this.getEndDayOfWeek().getTime()]
+    }
+
+    if (element.options.attrs.default.dkey === 1) {
+      return [this.getStartDayOfMonth().getTime(), this.getEndDayOfMonth().getTime()]
+    }
+
+    if (element.options.attrs.default.dkey === 2) {
+      return [this.getStartQuarter().getTime(), this.getEndQuarter().getTime()]
+    }
+    if (element.options.attrs.default.dkey === 3) {
+      return [this.getStartYear().getTime(), this.getEndYear().getTime()]
+    }
+
+    if (element.options.attrs.default.dkey === 4) {
+      const sDynamicPrefix = parseInt(element.options.attrs.default.sDynamicPrefix)
+      const sDynamicInfill = element.options.attrs.default.sDynamicInfill
+      const sDynamicSuffix = element.options.attrs.default.sDynamicSuffix
+
+      const eDynamicPrefix = parseInt(element.options.attrs.default.eDynamicPrefix)
+      const eDynamicInfill = element.options.attrs.default.eDynamicInfill
+      const eDynamicSuffix = element.options.attrs.default.eDynamicSuffix
+      const startTime = this.customTime(sDynamicPrefix, sDynamicInfill, sDynamicSuffix)
+      const endTime = this.customTime(eDynamicPrefix, eDynamicInfill, eDynamicSuffix)
+      return [startTime, endTime]
+    }
+  }
+  validDynamicValue(element) {
+    if (!element.options.attrs.default.isDynamic) return true
+    if (element.options.attrs.default.dkey !== 4) return true
+    try {
+      const arr = this.dynamicDateFormNow(element)
+      return arr[0] < arr[1]
+    } catch (error) {
+      return false
+    }
+  }
 }
 const timeDateRangeServiceImpl = new TimeDateRangeServiceImpl()
 export default timeDateRangeServiceImpl

frontend/src/lang/en.js

@@ -1729,5 +1729,28 @@ export default {
     complex_repeat: 'Complex repeat',
     pixel_tip: 'Please code custom pixel(such as 2560 * 1600) or select'
 
+  },
+  dynamic_time: {
+    set_default: 'Set Default',
+    fix: 'Fixed Time',
+    dynamic: 'Dynamic Time',
+    relative: 'Relative Current',
+    today: 'Today',
+    yesterday: 'Yesterday',
+    firstOfMonth: 'Month Beginning',
+    custom: 'Custom',
+    date: 'date',
+    week: 'week',
+    month: 'Month',
+    year: 'Year',
+    before: 'Before',
+    after: 'After',
+    preview: 'Preview',
+    set: 'Set',
+
+    cweek: 'This Week',
+    cmonth: 'This Month',
+    cquarter: 'This Quarter',
+    cyear: 'This Year'
   }
 }

frontend/src/lang/tw.js

@@ -1741,5 +1741,28 @@ export default {
     complex_repeat: '複雜重複',
     pixel_tip: '可直接輸入分辨率(例如:2560 * 1600)或者選擇'
 
+  },
+  dynamic_time: {
+    set_default: '設置默認值',
+    fix: '固定時間',
+    dynamic: '動態時間',
+    relative: '相對當前',
+    today: '今天',
+    yesterday: '昨天',
+    firstOfMonth: '月初',
+    custom: '自定義',
+    date: '日',
+    week: '周',
+    month: '月',
+    year: '年',
+    before: '前',
+    after: '後',
+    preview: '預覽',
+    set: '設置',
+
+    cweek: '本周',
+    cmonth: '本月',
+    cquarter: '本季',
+    cyear: '本年'
   }
 }

frontend/src/lang/zh.js

@@ -1751,5 +1751,28 @@ export default {
     complex_repeat: '复杂重复',
     pixel_tip: '可直接输入自定义分辨率(例如:2560 * 1600)或选择'
 
+  },
+  dynamic_time: {
+    set_default: '设置默认值',
+    fix: '固定时间',
+    dynamic: '动态时间',
+    relative: '相对当前',
+    today: '今天',
+    yesterday: '昨天',
+    firstOfMonth: '月初',
+    custom: '自定义',
+    date: '日',
+    week: '周',
+    month: '月',
+    year: '年',
+    before: '前',
+    after: '后',
+    preview: '预览',
+    set: '设置',
+
+    cweek: '本周',
+    cmonth: '本月',
+    cquarter: '本季',
+    cyear: '本年'
   }
 }

frontend/src/styles/index.scss

@@ -94,7 +94,7 @@ div:focus {
 
 .de-filter-dialog {
   min-width: 500px !important;
-  width: 50% !important;
+  width: 55% !important;
 
   .el-dialog__header {
     // background-color: #f4f4f5;

frontend/src/views/panel/filter/defaultValue/DeDateDefault.vue

@@ -2,20 +2,20 @@
   <div v-if="element">
     <el-form ref="form" :model="element.options.attrs.default" label-width="100px">
 
-      <el-form-item label="设定默认值">
+      <el-form-item :label="$t('dynamic_time.set_default')">
         <el-radio-group v-model="element.options.attrs.default.isDynamic" @change="dynamicChange">
-          <el-radio :label="false">固定时间</el-radio>
-          <el-radio :label="true">动态时间</el-radio>
+          <el-radio :label="false">{{ $t('dynamic_time.fix') }}</el-radio>
+          <el-radio :label="true">{{ $t('dynamic_time.dynamic') }}</el-radio>
         </el-radio-group>
       </el-form-item>
 
-      <el-form-item v-if="element.options.attrs.default.isDynamic" label="相对当前时间">
+      <el-form-item v-if="element.options.attrs.default.isDynamic" :label="$t('dynamic_time.relative')">
 
         <el-select v-model="element.options.attrs.default.dkey" placeholder="" class="relative-time" @change="dkeyChange">
-          <el-option label="今天" :value="0" />
-          <el-option label="昨天" :value="1" />
-          <el-option label="本月首日" :value="2" />
-          <el-option label="自定义" :value="3" />
+          <el-option :label="$t('dynamic_time.today')" :value="0" />
+          <el-option :label="$t('dynamic_time.yesterday')" :value="1" />
+          <el-option :label="$t('dynamic_time.firstOfMonth')" :value="2" />
+          <el-option :label="$t('dynamic_time.custom')" :value="3" />
         </el-select>
 
       </el-form-item>
@@ -28,24 +28,24 @@
 
         <el-form-item v-if="element.options.attrs.default.isDynamic && element.options.attrs.default.dkey === 3" label="" class="no-label-item">
           <el-select v-model="element.options.attrs.default.dynamicInfill" size="mini" placeholder="" @change="dynamicInfillChange">
-            <el-option label="天" value="day" />
-            <el-option label="周" value="week" />
-            <el-option label="月" value="month" />
-            <el-option label="年" value="year" />
+            <el-option :label="$t('dynamic_time.date')" value="day" />
+            <el-option :label="$t('dynamic_time.week')" value="week" />
+            <el-option :label="$t('dynamic_time.month')" value="month" />
+            <el-option :label="$t('dynamic_time.year')" value="year" />
           </el-select>
         </el-form-item>
 
         <el-form-item v-if="element.options.attrs.default.isDynamic && element.options.attrs.default.dkey === 3" label="" class="no-label-item">
 
           <el-select v-model="element.options.attrs.default.dynamicSuffix" size="mini" placeholder="" @change="dynamicSuffixChange">
-            <el-option label="前" value="before" />
-            <el-option label="后" value="after" />
+            <el-option :label="$t('dynamic_time.before')" value="before" />
+            <el-option :label="$t('dynamic_time.after')" value="after" />
           </el-select>
         </el-form-item>
 
       </div>
 
-      <el-form-item v-if="element.options.attrs.default.isDynamic" label="预览">
+      <el-form-item v-if="element.options.attrs.default.isDynamic" :label="$t('dynamic_time.preview')">
         <el-date-picker
           v-model="dval"
           type="date"
@@ -55,7 +55,7 @@
         />
       </el-form-item>
 
-      <el-form-item v-else label="设置">
+      <el-form-item v-else :label="$t('dynamic_time.set')">
         <component
           :is="element.component"
           :id="'component' + element.id"

frontend/src/views/panel/filter/defaultValue/DeDateRangeDefault.vue

+<template>
+  <div v-if="element">
+    <el-form ref="form" :model="element.options.attrs.default" label-width="100px">
+
+      <el-form-item :label="$t('dynamic_time.set_default')">
+        <el-radio-group v-model="element.options.attrs.default.isDynamic" @change="dynamicChange">
+          <el-radio :label="false">{{ $t('dynamic_time.fix') }}</el-radio>
+          <el-radio :label="true">{{ $t('dynamic_time.dynamic') }}</el-radio>
+        </el-radio-group>
+      </el-form-item>
+
+      <el-form-item v-if="element.options.attrs.default.isDynamic" :label="$t('dynamic_time.relative')">
+
+        <el-select
+          v-model="element.options.attrs.default.dkey"
+          placeholder=""
+          class="relative-time"
+          @change="dkeyChange"
+        >
+          <el-option :label="$t('dynamic_time.cweek')" :value="0" />
+          <el-option :label="$t('dynamic_time.cmonth')" :value="1" />
+          <el-option :label="$t('dynamic_time.cquarter')" :value="2" />
+          <el-option :label="$t('dynamic_time.cyear')" :value="3" />
+
+          <el-option :label="$t('dynamic_time.custom')" :value="4" />
+        </el-select>
+
+      </el-form-item>
+
+      <div class="inline-first">
+
+        <el-form-item
+          v-if="element.options.attrs.default.isDynamic && element.options.attrs.default.dkey === 4"
+          :label="$t('dataset.start_time')"
+        >
+          <el-input
+            v-model="element.options.attrs.default.sDynamicPrefix"
+            type="number"
+            size="mini"
+            :min="1"
+            :max="10"
+            @input="sDynamicPrefixChange"
+          />
+        </el-form-item>
+
+        <el-form-item
+          v-if="element.options.attrs.default.isDynamic && element.options.attrs.default.dkey === 4"
+          label=""
+          class="no-label-item"
+        >
+          <el-select
+            v-model="element.options.attrs.default.sDynamicInfill"
+            size="mini"
+            placeholder=""
+            @change="dynamicInfillChange"
+          >
+            <el-option :label="$t('dynamic_time.date')" value="day" />
+            <el-option :label="$t('dynamic_time.week')" value="week" />
+            <el-option :label="$t('dynamic_time.month')" value="month" />
+            <el-option :label="$t('dynamic_time.year')" value="year" />
+          </el-select>
+        </el-form-item>
+
+        <el-form-item
+          v-if="element.options.attrs.default.isDynamic && element.options.attrs.default.dkey === 4"
+          label=""
+          class="no-label-item"
+        >
+
+          <el-select
+            v-model="element.options.attrs.default.sDynamicSuffix"
+            size="mini"
+            placeholder=""
+            @change="dynamicSuffixChange"
+          >
+            <el-option :label="$t('dynamic_time.before')" value="before" />
+            <el-option :label="$t('dynamic_time.after')" value="after" />
+          </el-select>
+        </el-form-item>
+
+      </div>
+
+      <div class="inline-first">
+
+        <el-form-item
+          v-if="element.options.attrs.default.isDynamic && element.options.attrs.default.dkey === 4"
+          :label="$t('dataset.end_time')"
+        >
+          <el-input
+            v-model="element.options.attrs.default.eDynamicPrefix"
+            type="number"
+            size="mini"
+            :min="1"
+            :max="10"
+            @input="eDynamicPrefixChange"
+          />
+        </el-form-item>
+
+        <el-form-item
+          v-if="element.options.attrs.default.isDynamic && element.options.attrs.default.dkey === 4"
+          label=""
+          class="no-label-item"
+        >
+          <el-select
+            v-model="element.options.attrs.default.eDynamicInfill"
+            size="mini"
+            placeholder=""
+            @change="dynamicInfillChange"
+          >
+            <el-option :label="$t('dynamic_time.date')" value="day" />
+            <el-option :label="$t('dynamic_time.week')" value="week" />
+            <el-option :label="$t('dynamic_time.month')" value="month" />
+            <el-option :label="$t('dynamic_time.year')" value="year" />
+          </el-select>
+        </el-form-item>
+
+        <el-form-item
+          v-if="element.options.attrs.default.isDynamic && element.options.attrs.default.dkey === 4"
+          label=""
+          class="no-label-item"
+        >
+
+          <el-select
+            v-model="element.options.attrs.default.eDynamicSuffix"
+            size="mini"
+            placeholder=""
+            @change="dynamicSuffixChange"
+          >
+            <el-option :label="$t('dynamic_time.before')" value="before" />
+            <el-option :label="$t('dynamic_time.after')" value="after" />
+          </el-select>
+        </el-form-item>
+
+      </div>
+
+      <el-form-item v-if="element.options.attrs.default.isDynamic" :label="$t('dynamic_time.preview')">
+        <el-date-picker
+          v-model="dval"
+          :type="element.options.attrs.type"
+          disabled
+          class="relative-time"
+          placeholder=""
+        />
+      </el-form-item>
+
+      <el-form-item v-else :label="$t('dynamic_time.set')">
+        <component
+          :is="element.component"
+          :id="'component' + element.id"
+          :style="element.style"
+          :element="element"
+          class="relative-time"
+          :in-draw="false"
+        />
+      </el-form-item>
+
+    </el-form>
+  </div>
+</template>
+
+<script>
+import {
+  ApplicationContext
+} from '@/utils/ApplicationContext'
+import bus from '@/utils/bus'
+export default {
+  name: 'DeDateRangeDefault',
+  props: {
+
+    element: {
+      type: Object,
+      default: null
+    }
+  },
+  data() {
+    return {
+      dval: null
+    }
+  },
+  created() {
+    this.setDval()
+  },
+  methods: {
+    dynamicChange(value) {
+      this.setDval()
+    },
+    dkeyChange(value) {
+      this.setDval()
+    },
+
+    sDynamicPrefixChange(value) {
+      if (value < 1) {
+        value = 1
+        this.element.options.attrs.default.sDynamicPrefix = 1
+      }
+      this.setDval()
+    },
+    eDynamicPrefixChange(value) {
+      if (value < 1) {
+        value = 1
+        this.element.options.attrs.default.eDynamicPrefix = 1
+      }
+      this.setDval()
+    },
+    dynamicInfillChange(value) {
+      this.setDval()
+    },
+    dynamicSuffixChange(value) {
+      this.setDval()
+    },
+    setDval() {
+      const widget = ApplicationContext.getService(this.element.serviceName)
+      const time = widget.dynamicDateFormNow(this.element)
+      this.dval = time
+      bus.$emit('valid-values-change', (!time || time.length === 0 || time[1] > time[0]))
+    }
+  }
+}
+
+</script>
+
+<style lang="scss" scoped>
+  .inline-first,
+  .inline {
+    display: flex;
+
+    >>>.el-input--mini {
+      min-width: 70px;
+    }
+
+  }
+
+  .inline-first {
+    .el-form-item {
+      margin-bottom: 5px !important;
+    }
+  }
+
+  .relative-time {
+    width: 100%;
+  }
+
+</style>

frontend/src/views/panel/filter/filterDialog.vue

@@ -178,7 +178,7 @@ import draggable from 'vuedraggable'
 import FilterHead from './filterMain/FilterHead'
 import FilterControl from './filterMain/FilterControl'
 import FilterFoot from './filterMain/FilterFoot'
-
+import bus from '@/utils/bus'
 import {
   mapState
 } from 'vuex'
@@ -319,6 +319,11 @@ export default {
     this.initWithField()
     this.loadViews()
   },
+  mounted() {
+    bus.$on('valid-values-change', valid => {
+      this.validateFilterValue(valid)
+    })
+  },
 
   methods: {
     initWithField() {
@@ -550,12 +555,23 @@ export default {
     },
 
     enableSureButton() {
-      const enable = this.currentElement.options.attrs.dragItems && this.currentElement.options.attrs.dragItems.length > 0
-      this.$emit('sure-button-status', enable)
+      let valid = true
+      const enable = this.currentElement.options.attrs.dragItems && this.currentElement.options.attrs.dragItems
+        .length > 0
+      if (this.widget.validDynamicValue) {
+        valid = this.widget.validDynamicValue(this.currentElement)
+      }
+      this.$emit('sure-button-status', enable && valid)
     },
 
     getElementInfo() {
       return this.currentElement
+    },
+
+    validateFilterValue(valid) {
+      const enable = this.currentElement.options.attrs.dragItems && this.currentElement.options.attrs.dragItems
+        .length > 0
+      this.$emit('sure-button-status', enable && valid)
     }
 
   }

frontend/src/views/panel/filter/filterMain/FilterFoot.vue

@@ -2,7 +2,10 @@
   <el-row>
     <el-col :span="24">
       <div class="filter-content">
-        <el-card v-if="element.serviceName && element.serviceName !== 'timeDateWidget'" class="box-card">
+        <el-card
+          v-if="element.serviceName && element.serviceName !== 'timeDateWidget' && element.serviceName !== 'timeDateRangeWidget'"
+          class="box-card"
+        >
           <div style="margin-bottom: 10px;">
             <span>默认值设置</span>
           </div>
@@ -23,6 +26,13 @@
           <de-date-default v-if="element.serviceName && element.serviceName === 'timeDateWidget'" :element="element" />
         </el-card>
 
+        <el-card v-if="element.serviceName && element.serviceName === 'timeDateRangeWidget'" class="box-card">
+          <de-date-range-default
+            v-if="element.serviceName && element.serviceName === 'timeDateRangeWidget'"
+            :element="element"
+          />
+        </el-card>
+
       </div>
     </el-col>
   </el-row>
@@ -31,10 +41,12 @@
 
 <script>
 import DeDateDefault from '@/views/panel/filter/defaultValue/DeDateDefault'
+import DeDateRangeDefault from '@/views/panel/filter/defaultValue/DeDateRangeDefault'
 export default {
   name: 'FilterFoot',
   components: {
-    DeDateDefault
+    DeDateDefault,
+    DeDateRangeDefault
   },
   props: {