From 80dbdcc049b9730adfa94212ab84389424fcdc4b Mon Sep 17 00:00:00 2001
From: wangjiahao <1522128093@qq.com>
Date: Mon, 24 Jun 2024 15:42:00 +0800
Subject: [PATCH] =?UTF-8?q?refactor(=E6=95=B0=E6=8D=AE=E5=A4=A7=E5=B1=8F?=
 =?UTF-8?q?=E3=80=81=E4=BB=AA=E8=A1=A8=E6=9D=BF):=20=E8=BF=87=E6=BB=A4?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6=E4=BC=98=E5=8C=96=EF=BC=8C=E6=8A=BD=E5=8F=96?=
 =?UTF-8?q?=E9=BB=98=E8=AE=A4=E9=80=89=E9=A1=B9=E8=AE=BE=E7=BD=AE=E7=AD=89?=
 =?UTF-8?q?=E5=85=AC=E5=85=B1=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../v-query/ConditionDefaultConfiguration.vue | 705 ++++++++++++++++++
 .../v-query/QueryConditionConfiguration.vue   | 315 +-------
 2 files changed, 714 insertions(+), 306 deletions(-)
 create mode 100644 core/core-frontend/src/custom-component/v-query/ConditionDefaultConfiguration.vue

diff --git a/core/core-frontend/src/custom-component/v-query/ConditionDefaultConfiguration.vue b/core/core-frontend/src/custom-component/v-query/ConditionDefaultConfiguration.vue
new file mode 100644
index 0000000000..00dba34bfc
--- /dev/null
+++ b/core/core-frontend/src/custom-component/v-query/ConditionDefaultConfiguration.vue
@@ -0,0 +1,705 @@
+getLastStart
+<script lang="ts" setup>
+import { ElSelect } from 'element-plus-secondary'
+import { computed, ref, toRefs } from 'vue'
+import RangeFilterTime from '@/custom-component/v-query/RangeFilterTime.vue'
+import { useI18n } from '@/hooks/web/useI18n'
+import DynamicTime from '@/custom-component/v-query/DynamicTime.vue'
+import DynamicTimeRange from '@/custom-component/v-query/DynamicTimeRange.vue'
+import Time from '@/custom-component/v-query/Time.vue'
+import Select from '@/custom-component/v-query/Select.vue'
+const { t } = useI18n()
+
+const visiblePopover = ref(false)
+
+const handleDialogClick = () => {
+  visiblePopover.value = false
+}
+
+const handleVisiblePopover = ev => {
+  ev.stopPropagation()
+  visiblePopover.value = !visiblePopover.value
+}
+
+const filterTypeCom = computed(() => {
+  const { displayType, timeType = 'fixed' } = curComponent.value
+  return ['1', '7'].includes(displayType)
+    ? timeType === 'dynamic'
+      ? displayType === '1'
+        ? DynamicTime
+        : DynamicTimeRange
+      : Time
+    : Select
+})
+
+const props = defineProps({
+  curComponent: {
+    type: Object,
+    required: true
+  }
+})
+
+const { curComponent } = toRefs(props)
+
+const relativeToCurrentTypeList = computed(() => {
+  if (!curComponent.value) return []
+  let index = ['year', 'month', 'date', 'datetime'].indexOf(curComponent.value.timeGranularity) + 1
+  if (+curComponent.value.displayType === 7) {
+    index =
+      ['yearrange', 'monthrange', 'daterange', 'datetimerange'].indexOf(
+        curComponent.value.timeGranularityMultiple
+      ) + 1
+  }
+  return [
+    {
+      label: '年',
+      value: 'year'
+    },
+    {
+      label: '月',
+      value: 'month'
+    },
+    {
+      label: '日',
+      value: 'date'
+    }
+  ].slice(0, index)
+})
+
+const relativeToCurrentList = computed(() => {
+  let list = []
+  if (!curComponent.value) return list
+  switch (curComponent.value.timeGranularity) {
+    case 'year':
+      list = [
+        {
+          label: '今年',
+          value: 'thisYear'
+        },
+        {
+          label: '去年',
+          value: 'lastYear'
+        }
+      ]
+      break
+    case 'month':
+      list = [
+        {
+          label: '本月',
+          value: 'thisMonth'
+        },
+        {
+          label: '上月',
+          value: 'lastMonth'
+        }
+      ]
+      break
+    case 'date':
+      list = [
+        {
+          label: '今天',
+          value: 'today'
+        },
+        {
+          label: '昨天',
+          value: 'yesterday'
+        },
+        {
+          label: '月初',
+          value: 'monthBeginning'
+        },
+        {
+          label: '年初',
+          value: 'yearBeginning'
+        }
+      ]
+      break
+    case 'datetime':
+      list = [
+        {
+          label: '今天',
+          value: 'today'
+        },
+        {
+          label: '昨天',
+          value: 'yesterday'
+        },
+        {
+          label: '月初',
+          value: 'monthBeginning'
+        },
+        {
+          label: '年初',
+          value: 'yearBeginning'
+        }
+      ]
+      break
+
+    default:
+      break
+  }
+
+  return [
+    ...list,
+    {
+      label: '自定义',
+      value: 'custom'
+    }
+  ]
+})
+
+const aroundList = [
+  {
+    label: '前',
+    value: 'f'
+  },
+  {
+    label: '后',
+    value: 'b'
+  }
+]
+
+const dynamicTime = computed(() => {
+  const { displayType, timeType } = curComponent.value
+  return timeType === 'dynamic' && [1, 7].includes(+displayType)
+})
+
+const operators = [
+  {
+    label: '精确匹配',
+    value: 'eq'
+  },
+  {
+    label: '模糊匹配',
+    value: 'like'
+  }
+]
+
+const multiple = ref(false)
+
+const multipleChange = (val: boolean, isMultipleChange = false) => {
+  if (isMultipleChange) {
+    curComponent.value.defaultValue = val ? [] : undefined
+  }
+  const { defaultValue } = curComponent.value
+  if (Array.isArray(defaultValue)) {
+    curComponent.value.selectValue = val ? defaultValue : undefined
+  } else {
+    curComponent.value.selectValue = val
+      ? defaultValue !== undefined
+        ? [defaultValue]
+        : []
+      : defaultValue
+  }
+  if (curComponent.value.field.deType === 1) {
+    curComponent.value.multiple = val
+    return
+  }
+  curComponent.value.multiple = val
+}
+
+defineExpose({
+  multipleChange,
+  handleDialogClick
+})
+</script>
+
+<template>
+  <div class="list-item top-item" v-if="curComponent.displayType === '8'">
+    <div class="label">设置默认值</div>
+    <div class="value">
+      <div class="condition-type">
+        <el-select
+          class="condition-value-select"
+          popper-class="condition-value-select-popper"
+          v-model="curComponent.defaultConditionValueOperatorF"
+        >
+          <el-option
+            v-for="ele in operators"
+            :key="ele.value"
+            :label="ele.label"
+            :value="ele.value"
+          >
+          </el-option>
+        </el-select>
+        <el-input class="condition-value-input" v-model="curComponent.defaultConditionValueF" />
+        <div class="bottom-line"></div>
+      </div>
+      <div class="condition-type" v-if="[1, 2].includes(curComponent.conditionType)">
+        <sapn class="condition-type-tip">{{ curComponent.conditionType === 1 ? '与' : '或' }}</sapn>
+        <el-select
+          class="condition-value-select"
+          popper-class="condition-value-select-popper"
+          v-model="curComponent.defaultConditionValueOperatorS"
+        >
+          <el-option
+            v-for="ele in operators"
+            :key="ele.value"
+            :label="ele.label"
+            :value="ele.value"
+          >
+          </el-option>
+        </el-select>
+        <el-input class="condition-value-input" v-model="curComponent.defaultConditionValueS" />
+        <div class="bottom-line next-line"></div>
+      </div>
+    </div>
+  </div>
+  <div v-if="!['1', '7', '8'].includes(curComponent.displayType)" class="list-item">
+    <div class="label">选项类型</div>
+    <div class="value">
+      <el-radio-group
+        class="larger-radio"
+        @change="val => multipleChange(val as boolean, true)"
+        v-model="multiple"
+      >
+        <el-radio :label="false">{{ t('visualization.single_choice') }}</el-radio>
+        <el-radio :label="true">{{ t('visualization.multiple_choice') }}</el-radio>
+      </el-radio-group>
+    </div>
+  </div>
+  <div v-if="curComponent.displayType === '7'" class="list-item">
+    <div class="label">
+      <el-checkbox v-model="curComponent.setTimeRange" label="设置时间筛选范围" />
+    </div>
+    <div class="setting-content">
+      <el-popover
+        :show-arrow="false"
+        popper-class="range-filter-time"
+        placement="bottom-start"
+        :width="452"
+        :visible="visiblePopover"
+        :offset="4"
+      >
+        <template #reference>
+          <el-button
+            :disabled="!curComponent.setTimeRange"
+            @click="handleVisiblePopover($event)"
+            text
+            style="margin-left: -4px"
+          >
+            <template #icon>
+              <Icon name="icon_admin_outlined"></Icon>
+            </template>
+            设置
+          </el-button>
+        </template>
+        <RangeFilterTime
+          :timeRange="curComponent.timeRange"
+          :timeGranularityMultiple="curComponent.timeGranularityMultiple"
+        />
+      </el-popover>
+      <span
+        v-if="
+          curComponent.timeRange.intervalType !== 'none' || curComponent.timeRange.dynamicWindow
+        "
+        class="config-flag range-filter-time-flag"
+        >已配置</span
+      >
+    </div>
+  </div>
+  <div
+    class="list-item"
+    v-if="+curComponent.displayType === 0 && curComponent.optionValueSource !== 1"
+  >
+    <div class="label">
+      <el-tooltip
+        effect="dark"
+        content="绑定参数后，不支持传空数据"
+        :disabled="!curComponent.parametersCheck"
+        placement="top"
+      >
+        <el-checkbox
+          :disabled="curComponent.parametersCheck"
+          v-model="curComponent.showEmpty"
+          label="选项值包含空数据"
+        />
+      </el-tooltip>
+    </div>
+  </div>
+  <div v-if="!['8'].includes(curComponent.displayType)" class="list-item">
+    <div class="label">
+      <el-checkbox v-model="curComponent.defaultValueCheck" label="设置默认值" />
+    </div>
+    <div
+      class="setting-content"
+      v-if="curComponent.defaultValueCheck && ['1', '7'].includes(curComponent.displayType)"
+    >
+      <div class="setting">
+        <el-radio-group v-model="curComponent.timeType">
+          <el-radio label="fixed">固定时间</el-radio>
+          <el-radio label="dynamic">动态时间</el-radio>
+        </el-radio-group>
+      </div>
+      <template v-if="dynamicTime && curComponent.displayType === '1'">
+        <div class="setting">
+          <div class="setting-label">相对当前</div>
+          <div class="setting-value select">
+            <el-select @focus="handleDialogClick" v-model="curComponent.relativeToCurrent">
+              <el-option
+                v-for="item in relativeToCurrentList"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              />
+            </el-select>
+          </div>
+        </div>
+        <div class="setting" v-if="curComponent.relativeToCurrent === 'custom'">
+          <div
+            class="setting-input"
+            :class="curComponent.timeGranularity === 'datetime' && 'with-date'"
+          >
+            <el-input-number v-model="curComponent.timeNum" :min="0" controls-position="right" />
+            <el-select @focus="handleDialogClick" v-model="curComponent.relativeToCurrentType">
+              <el-option
+                v-for="item in relativeToCurrentTypeList"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              />
+            </el-select>
+            <el-select @focus="handleDialogClick" v-model="curComponent.around">
+              <el-option
+                v-for="item in aroundList"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              />
+            </el-select>
+            <el-time-picker
+              v-if="curComponent.timeGranularity === 'datetime'"
+              v-model="curComponent.arbitraryTime"
+            />
+          </div>
+        </div>
+      </template>
+      <template v-else-if="dynamicTime && curComponent.displayType === '7'">
+        <div
+          class="setting"
+          :class="
+            ['yearrange', 'monthrange', 'daterange'].includes(
+              curComponent.timeGranularityMultiple
+            ) && 'is-year-month-range'
+          "
+        >
+          <div class="setting-label">开始时间</div>
+          <div class="setting-input with-date range">
+            <el-input-number v-model="curComponent.timeNum" :min="0" controls-position="right" />
+            <el-select @focus="handleDialogClick" v-model="curComponent.relativeToCurrentType">
+              <el-option
+                v-for="item in relativeToCurrentTypeList"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              />
+            </el-select>
+            <el-select @focus="handleDialogClick" v-model="curComponent.around">
+              <el-option
+                v-for="item in aroundList"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              />
+            </el-select>
+            <el-time-picker v-model="curComponent.arbitraryTime" />
+          </div>
+        </div>
+        <div
+          class="setting"
+          :class="
+            ['yearrange', 'monthrange', 'daterange'].includes(
+              curComponent.timeGranularityMultiple
+            ) && 'is-year-month-range'
+          "
+        >
+          <div class="setting-label">结束时间</div>
+          <div class="setting-input with-date range">
+            <el-input-number
+              v-model="curComponent.timeNumRange"
+              :min="0"
+              controls-position="right"
+            />
+            <el-select @focus="handleDialogClick" v-model="curComponent.relativeToCurrentTypeRange">
+              <el-option
+                v-for="item in relativeToCurrentTypeList"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              />
+            </el-select>
+            <el-select @focus="handleDialogClick" v-model="curComponent.aroundRange">
+              <el-option
+                v-for="item in aroundList"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              />
+            </el-select>
+            <el-time-picker v-model="curComponent.arbitraryTimeRange" />
+          </div>
+        </div>
+      </template>
+    </div>
+    <div v-if="curComponent.defaultValueCheck" class="parameters" :class="dynamicTime && 'setting'">
+      <div class="setting-label" v-if="dynamicTime">预览</div>
+      <div :class="dynamicTime ? 'setting-value' : 'w100'">
+        <component :config="curComponent" isConfig ref="inputCom" :is="filterTypeCom"></component>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="less">
+.condition-value-select-popper {
+  .ed-select-dropdown__item.selected::after {
+    display: none;
+  }
+}
+.list-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 10.5px;
+  flex-wrap: wrap;
+
+  .setting-content {
+    width: 100%;
+    padding-left: 24px;
+  }
+
+  &.top-item {
+    .label {
+      margin-bottom: auto;
+      padding-top: 5.5px;
+    }
+  }
+  .label {
+    width: 100px;
+    color: #1f2329;
+  }
+
+  .value {
+    .ed-select {
+      width: 321px;
+    }
+    width: 321px;
+    .value {
+      margin-top: 8px;
+      &:first-child {
+        margin-top: -0.5px;
+      }
+      .search-field {
+        width: 257px;
+      }
+
+      .sort-field {
+        width: 176px;
+      }
+
+      .label {
+        line-height: 32px;
+        font-size: 14px;
+        margin-right: 8px;
+      }
+    }
+  }
+
+  .value {
+    width: 321px;
+    .condition-type {
+      margin-top: 3px !important;
+      display: flex;
+      position: relative;
+      .ed-input__wrapper {
+        border: none;
+        border-radius: 0;
+        box-shadow: none;
+        height: 26px;
+        font-family: '阿里巴巴普惠体 3.0 55 Regular L3', Hiragino Sans GB, Microsoft YaHei,
+          sans-serif;
+        word-wrap: break-word;
+        text-align: left;
+        color: rgba(0, 0, 0, 0.65);
+        list-style: none;
+        user-select: none;
+        cursor: pointer;
+        line-height: 26px;
+        box-sizing: border-box;
+        max-width: 100%;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        opacity: 1;
+      }
+
+      .ed-select .ed-input.is-focus .ed-input__wrapper,
+      .ed-select:hover:not(.ed-select--disabled) .ed-input__wrapper,
+      .ed-select .ed-input__wrapper.is-focus {
+        box-shadow: none !important;
+      }
+
+      .ed-select {
+        width: 120px;
+        .ed-input__wrapper {
+          padding: 0;
+        }
+      }
+
+      .condition-type-tip {
+        font-size: 12px;
+        color: #646a73;
+        line-height: 26px;
+        margin-right: 8px;
+      }
+
+      .bottom-line {
+        box-sizing: border-box;
+        height: 1px;
+        background-color: #000;
+        opacity: 0.3;
+        position: absolute;
+        right: 5px;
+        bottom: 3px;
+        width: 220px;
+        z-index: 10;
+
+        &.next-line {
+          width: 206px;
+        }
+      }
+      &:first-child {
+        margin-top: -0.5px;
+      }
+    }
+  }
+  .value {
+    .sort-field {
+      width: 240px;
+    }
+    .sort-type {
+      width: 73px;
+      margin-left: 8px;
+    }
+  }
+  .parameters {
+    margin-left: auto;
+    margin-top: 8px;
+
+    .w100 {
+      width: 100%;
+    }
+    .ed-select,
+    .ed-date-editor,
+    .ed-date-editor--datetime .ed-input__wrapper,
+    .ed-select-v2 {
+      width: 415px;
+    }
+
+    .ed-date-editor {
+      .ed-input__wrapper {
+        width: 100%;
+      }
+    }
+  }
+  .parameters-range {
+    width: 100%;
+    padding-left: 24px;
+    display: flex;
+    flex-wrap: wrap;
+
+    .range-title,
+    .params-start,
+    .params-end {
+      width: 50%;
+    }
+
+    .params-start,
+    .params-end {
+      margin-top: 8px;
+      .ed-select {
+        width: 100%;
+      }
+    }
+
+    .params-end {
+      padding-left: 4px;
+    }
+
+    .params-start {
+      padding-right: 4px;
+    }
+  }
+
+  .setting {
+    &.setting {
+      margin-top: 8px;
+    }
+    &.parameters {
+      width: 100%;
+      padding-left: 24px;
+      .ed-date-editor {
+        width: 325px !important;
+      }
+    }
+    margin-left: auto;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    .setting-label {
+      width: 80px;
+      margin-right: 8px;
+    }
+
+    .setting-value {
+      margin: 8px 0;
+      &.select {
+        margin-top: 0;
+        .ed-select {
+          width: 325px;
+        }
+      }
+    }
+
+    .setting-input {
+      display: flex;
+      padding-left: 86px;
+      justify-content: flex-end;
+      align-items: center;
+      &.range {
+        padding-left: 0px;
+      }
+      & > div + div {
+        margin-left: 8px;
+      }
+
+      &.with-date {
+        .ed-input-number {
+          width: 71px;
+        }
+        .ed-select {
+          width: 62px;
+        }
+
+        .ed-date-editor.ed-input {
+          width: 106px;
+        }
+      }
+    }
+
+    &.is-year-month-range {
+      .setting-input {
+        &.with-date {
+          .ed-input-number,
+          .ed-select {
+            width: 103px;
+          }
+        }
+        .ed-date-editor.ed-input {
+          display: none;
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/core/core-frontend/src/custom-component/v-query/QueryConditionConfiguration.vue b/core/core-frontend/src/custom-component/v-query/QueryConditionConfiguration.vue
index 8074a95152..79bf179229 100644
--- a/core/core-frontend/src/custom-component/v-query/QueryConditionConfiguration.vue
+++ b/core/core-frontend/src/custom-component/v-query/QueryConditionConfiguration.vue
@@ -34,11 +34,12 @@ import draggable from 'vuedraggable'
 import RangeFilterTime from './RangeFilterTime.vue'
 import type { ManipulateType } from 'dayjs'
 import dayjs from 'dayjs'
+import ConditionDefaultConfiguration from '@/custom-component/v-query/ConditionDefaultConfiguration.vue'
 
 const { t } = useI18n()
 const dvMainStore = dvMainStoreWithOut()
 const { componentData, canvasViewInfo } = storeToRefs(dvMainStore)
-
+const defaultConfigurationRef = ref(null)
 interface DatasetField {
   type?: string
   innerType?: string
@@ -146,11 +147,6 @@ const { queryElement } = toRefs(props)
 const getDetype = (id, arr) => {
   return arr.flat().find(ele => ele.id === id)?.deType
 }
-const visiblePopover = ref(false)
-const handleVisiblePopover = ev => {
-  ev.stopPropagation()
-  visiblePopover.value = !visiblePopover.value
-}
 const showConfiguration = computed(() => {
   if (!curComponent.value) return false
   if (!curComponent.value.checkedFields?.length) return false
@@ -315,7 +311,7 @@ const timeParameterList = computed(() => {
 })
 
 const cancelClick = () => {
-  visiblePopover.value = false
+  handleDialogClick()
   dialogVisible.value = false
 }
 
@@ -353,24 +349,7 @@ const handleValueSourceChange = () => {
 }
 
 const multipleChange = (val: boolean, isMultipleChange = false) => {
-  if (isMultipleChange) {
-    curComponent.value.defaultValue = val ? [] : undefined
-  }
-  const { defaultValue } = curComponent.value
-  if (Array.isArray(defaultValue)) {
-    curComponent.value.selectValue = val ? defaultValue : undefined
-  } else {
-    curComponent.value.selectValue = val
-      ? defaultValue !== undefined
-        ? [defaultValue]
-        : []
-      : defaultValue
-  }
-  if (curComponent.value.field.deType === 1) {
-    curComponent.value.multiple = val
-    return
-  }
-  curComponent.value.multiple = val
+  defaultConfigurationRef.value?.multipleChange(val, isMultipleChange)
 }
 
 const isInRange = (ele, startWindowTime, timeStamp) => {
@@ -675,7 +654,6 @@ const handleBeforeClose = () => {
   inputCom.value?.single?.handleClickOutside?.()
   handleDialogClick()
   dialogVisible.value = false
-  visiblePopover.value = false
 }
 
 const confirmClick = () => {
@@ -683,7 +661,6 @@ const confirmClick = () => {
   inputCom.value?.mult?.handleClickOutside?.()
   inputCom.value?.single?.handleClickOutside?.()
   handleDialogClick()
-  visiblePopover.value = false
   dialogVisible.value = false
   conditions.value.forEach(ele => {
     curComponent.value = ele
@@ -941,7 +918,7 @@ const showError = computed(() => {
   return (optionValueSource === 1 && !field.id) || (optionValueSource === 2 && !valueSource.length)
 })
 const handleDialogClick = () => {
-  visiblePopover.value = false
+  defaultConfigurationRef.value?.handleDialogClick()
 }
 
 const operators = [
@@ -1752,284 +1729,10 @@ defineExpose({
               </div>
             </div>
           </div>
-          <div class="list-item top-item" v-if="curComponent.displayType === '8'">
-            <div class="label">设置默认值</div>
-            <div class="value">
-              <div class="condition-type">
-                <el-select
-                  class="condition-value-select"
-                  popper-class="condition-value-select-popper"
-                  v-model="curComponent.defaultConditionValueOperatorF"
-                >
-                  <el-option
-                    v-for="ele in operators"
-                    :key="ele.value"
-                    :label="ele.label"
-                    :value="ele.value"
-                  >
-                  </el-option>
-                </el-select>
-                <el-input
-                  class="condition-value-input"
-                  v-model="curComponent.defaultConditionValueF"
-                />
-                <div class="bottom-line"></div>
-              </div>
-              <div class="condition-type" v-if="[1, 2].includes(curComponent.conditionType)">
-                <sapn class="condition-type-tip">{{
-                  curComponent.conditionType === 1 ? '与' : '或'
-                }}</sapn>
-                <el-select
-                  class="condition-value-select"
-                  popper-class="condition-value-select-popper"
-                  v-model="curComponent.defaultConditionValueOperatorS"
-                >
-                  <el-option
-                    v-for="ele in operators"
-                    :key="ele.value"
-                    :label="ele.label"
-                    :value="ele.value"
-                  >
-                  </el-option>
-                </el-select>
-                <el-input
-                  class="condition-value-input"
-                  v-model="curComponent.defaultConditionValueS"
-                />
-                <div class="bottom-line next-line"></div>
-              </div>
-            </div>
-          </div>
-          <div v-if="!['1', '7', '8'].includes(curComponent.displayType)" class="list-item">
-            <div class="label">选项类型</div>
-            <div class="value">
-              <el-radio-group
-                class="larger-radio"
-                @change="val => multipleChange(val as boolean, true)"
-                v-model="multiple"
-              >
-                <el-radio :label="false">{{ t('visualization.single_choice') }}</el-radio>
-                <el-radio :label="true">{{ t('visualization.multiple_choice') }}</el-radio>
-              </el-radio-group>
-            </div>
-          </div>
-          <div v-if="curComponent.displayType === '7'" class="list-item">
-            <div class="label">
-              <el-checkbox v-model="curComponent.setTimeRange" label="设置时间筛选范围" />
-            </div>
-            <div class="setting-content">
-              <el-popover
-                :show-arrow="false"
-                popper-class="range-filter-time"
-                placement="bottom-start"
-                :width="452"
-                :visible="visiblePopover"
-                :offset="4"
-              >
-                <template #reference>
-                  <el-button
-                    :disabled="!curComponent.setTimeRange"
-                    @click="handleVisiblePopover($event)"
-                    text
-                    style="margin-left: -4px"
-                  >
-                    <template #icon>
-                      <Icon name="icon_admin_outlined"></Icon>
-                    </template>
-                    设置
-                  </el-button>
-                </template>
-                <RangeFilterTime
-                  :timeRange="curComponent.timeRange"
-                  :timeGranularityMultiple="curComponent.timeGranularityMultiple"
-                />
-              </el-popover>
-              <span
-                v-if="
-                  curComponent.timeRange.intervalType !== 'none' ||
-                  curComponent.timeRange.dynamicWindow
-                "
-                class="config-flag range-filter-time-flag"
-                >已配置</span
-              >
-            </div>
-          </div>
-          <div
-            class="list-item"
-            v-if="+curComponent.displayType === 0 && curComponent.optionValueSource !== 1"
-          >
-            <div class="label">
-              <el-tooltip
-                effect="dark"
-                content="绑定参数后，不支持传空数据"
-                :disabled="!curComponent.parametersCheck"
-                placement="top"
-              >
-                <el-checkbox
-                  :disabled="curComponent.parametersCheck"
-                  v-model="curComponent.showEmpty"
-                  label="选项值包含空数据"
-                />
-              </el-tooltip>
-            </div>
-          </div>
-          <div v-if="!['8'].includes(curComponent.displayType)" class="list-item">
-            <div class="label">
-              <el-checkbox v-model="curComponent.defaultValueCheck" label="设置默认值" />
-            </div>
-            <div
-              class="setting-content"
-              v-if="curComponent.defaultValueCheck && ['1', '7'].includes(curComponent.displayType)"
-            >
-              <div class="setting">
-                <el-radio-group v-model="curComponent.timeType">
-                  <el-radio label="fixed">固定时间</el-radio>
-                  <el-radio label="dynamic">动态时间</el-radio>
-                </el-radio-group>
-              </div>
-              <template v-if="dynamicTime && curComponent.displayType === '1'">
-                <div class="setting">
-                  <div class="setting-label">相对当前</div>
-                  <div class="setting-value select">
-                    <el-select @focus="handleDialogClick" v-model="curComponent.relativeToCurrent">
-                      <el-option
-                        v-for="item in relativeToCurrentList"
-                        :key="item.value"
-                        :label="item.label"
-                        :value="item.value"
-                      />
-                    </el-select>
-                  </div>
-                </div>
-                <div class="setting" v-if="curComponent.relativeToCurrent === 'custom'">
-                  <div
-                    class="setting-input"
-                    :class="curComponent.timeGranularity === 'datetime' && 'with-date'"
-                  >
-                    <el-input-number
-                      v-model="curComponent.timeNum"
-                      :min="0"
-                      controls-position="right"
-                    />
-                    <el-select
-                      @focus="handleDialogClick"
-                      v-model="curComponent.relativeToCurrentType"
-                    >
-                      <el-option
-                        v-for="item in relativeToCurrentTypeList"
-                        :key="item.value"
-                        :label="item.label"
-                        :value="item.value"
-                      />
-                    </el-select>
-                    <el-select @focus="handleDialogClick" v-model="curComponent.around">
-                      <el-option
-                        v-for="item in aroundList"
-                        :key="item.value"
-                        :label="item.label"
-                        :value="item.value"
-                      />
-                    </el-select>
-                    <el-time-picker
-                      v-if="curComponent.timeGranularity === 'datetime'"
-                      v-model="curComponent.arbitraryTime"
-                    />
-                  </div>
-                </div>
-              </template>
-              <template v-else-if="dynamicTime && curComponent.displayType === '7'">
-                <div
-                  class="setting"
-                  :class="
-                    ['yearrange', 'monthrange', 'daterange'].includes(
-                      curComponent.timeGranularityMultiple
-                    ) && 'is-year-month-range'
-                  "
-                >
-                  <div class="setting-label">开始时间</div>
-                  <div class="setting-input with-date range">
-                    <el-input-number
-                      v-model="curComponent.timeNum"
-                      :min="0"
-                      controls-position="right"
-                    />
-                    <el-select
-                      @focus="handleDialogClick"
-                      v-model="curComponent.relativeToCurrentType"
-                    >
-                      <el-option
-                        v-for="item in relativeToCurrentTypeList"
-                        :key="item.value"
-                        :label="item.label"
-                        :value="item.value"
-                      />
-                    </el-select>
-                    <el-select @focus="handleDialogClick" v-model="curComponent.around">
-                      <el-option
-                        v-for="item in aroundList"
-                        :key="item.value"
-                        :label="item.label"
-                        :value="item.value"
-                      />
-                    </el-select>
-                    <el-time-picker v-model="curComponent.arbitraryTime" />
-                  </div>
-                </div>
-                <div
-                  class="setting"
-                  :class="
-                    ['yearrange', 'monthrange', 'daterange'].includes(
-                      curComponent.timeGranularityMultiple
-                    ) && 'is-year-month-range'
-                  "
-                >
-                  <div class="setting-label">结束时间</div>
-                  <div class="setting-input with-date range">
-                    <el-input-number
-                      v-model="curComponent.timeNumRange"
-                      :min="0"
-                      controls-position="right"
-                    />
-                    <el-select
-                      @focus="handleDialogClick"
-                      v-model="curComponent.relativeToCurrentTypeRange"
-                    >
-                      <el-option
-                        v-for="item in relativeToCurrentTypeList"
-                        :key="item.value"
-                        :label="item.label"
-                        :value="item.value"
-                      />
-                    </el-select>
-                    <el-select @focus="handleDialogClick" v-model="curComponent.aroundRange">
-                      <el-option
-                        v-for="item in aroundList"
-                        :key="item.value"
-                        :label="item.label"
-                        :value="item.value"
-                      />
-                    </el-select>
-                    <el-time-picker v-model="curComponent.arbitraryTimeRange" />
-                  </div>
-                </div>
-              </template>
-            </div>
-            <div
-              v-if="curComponent.defaultValueCheck"
-              class="parameters"
-              :class="dynamicTime && 'setting'"
-            >
-              <div class="setting-label" v-if="dynamicTime">预览</div>
-              <div :class="dynamicTime ? 'setting-value' : 'w100'">
-                <component
-                  :config="curComponent"
-                  isConfig
-                  ref="inputCom"
-                  :is="filterTypeCom"
-                ></component>
-              </div>
-            </div>
-          </div>
+          <condition-default-configuration
+            ref="defaultConfigurationRef"
+            :cur-component="curComponent"
+          ></condition-default-configuration>
         </div>
         <div v-if="showTypeError && showConfiguration" class="empty">
           <empty-background description="所选字段类型不一致，无法进行查询配置" img-type="error" />