diff --git a/core/core-frontend/src/api/dataset.ts b/core/core-frontend/src/api/dataset.ts
index d0e07760c7..df843b335b 100644
--- a/core/core-frontend/src/api/dataset.ts
+++ b/core/core-frontend/src/api/dataset.ts
@@ -293,3 +293,9 @@ export const listByDsIds = async (data): Promise<IResponse> => {
     return res?.data
   })
 }
+
+export const getFieldTree = async (data): Promise<IResponse> => {
+  return request.post({ url: 'datasetData/getFieldTree', data }).then(res => {
+    return res?.data
+  })
+}
diff --git a/core/core-frontend/src/custom-component/v-query/ConditionDefaultConfiguration.vue b/core/core-frontend/src/custom-component/v-query/ConditionDefaultConfiguration.vue
index 00dba34bfc..a1e4da2c58 100644
--- a/core/core-frontend/src/custom-component/v-query/ConditionDefaultConfiguration.vue
+++ b/core/core-frontend/src/custom-component/v-query/ConditionDefaultConfiguration.vue
@@ -8,6 +8,7 @@ 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'
+import Tree from '@/custom-component/v-query/Tree.vue'
 const { t } = useI18n()
 
 const visiblePopover = ref(false)
@@ -29,6 +30,8 @@ const filterTypeCom = computed(() => {
         ? DynamicTime
         : DynamicTimeRange
       : Time
+    : '9' === displayType
+    ? Tree
     : Select
 })
 
@@ -191,10 +194,12 @@ const multipleChange = (val: boolean, isMultipleChange = false) => {
         : []
       : defaultValue
   }
+
   if (curComponent.value.field.deType === 1) {
     curComponent.value.multiple = val
     return
   }
+
   curComponent.value.multiple = val
 }
 
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 35e92e3b0a..6c61f8942b 100644
--- a/core/core-frontend/src/custom-component/v-query/QueryConditionConfiguration.vue
+++ b/core/core-frontend/src/custom-component/v-query/QueryConditionConfiguration.vue
@@ -23,6 +23,7 @@ import { ElMessage, ElSelect } from 'element-plus-secondary'
 import type { DatasetDetail } from '@/api/dataset'
 import { getDsDetailsWithPerm, getSqlParams, listFieldsWithPermissions } from '@/api/dataset'
 import EmptyBackground from '@/components/empty-background/src/EmptyBackground.vue'
+import TreeFieldDialog from '@/custom-component/v-query/TreeFieldDialog.vue'
 import { cloneDeep } from 'lodash-es'
 import { getDatasetTree } from '@/api/dataset'
 import { Tree } from '@/views/visualized/data/dataset/form/CreatDsGroup.vue'
@@ -176,6 +177,23 @@ const showTypeError = computed(() => {
     return displayTypeField !== field?.deType
   })
 })
+
+const showDatasetError = computed(() => {
+  if (!curComponent.value) return false
+  if (!curComponent.value.checkedFields?.length) return false
+  if (!fields.value?.length) return false
+  let displayField = null
+  return curComponent.value.checkedFields.some(id => {
+    const arr = fields.value.find(itx => itx.componentId === id)
+    const field = arr.id
+    if (!field) return false
+    if (displayField === null) {
+      displayField = field
+      return false
+    }
+    return displayField !== field
+  })
+})
 const typeList = [
   {
     label: '重命名',
@@ -234,10 +252,12 @@ const setType = () => {
 
     if (field?.deType !== undefined) {
       let displayType = curComponent.value.displayType
+      if (curComponent.value.displayType === '9') {
+        return
+      }
       if (!(field?.deType === 1 && curComponent.value.displayType === '7')) {
         curComponent.value.displayType = `${[3, 4].includes(field?.deType) ? 2 : field?.deType}`
       }
-
       if (
         displayType !== curComponent.value.displayType &&
         !([3, 4].includes(+displayType) && +curComponent.value.displayType === 2)
@@ -299,10 +319,10 @@ const typeTimeMap = {
 
 const timeParameterList = computed(() => {
   if (!isTimeParameter.value) return timeList
-  const [_, y] = curComponent.value.parameters?.filter(
+  const [year, y] = curComponent.value.parameters?.filter(
     ele => ele.deType === 1 && !!ele.variableName
   )[0].type
-  return timeList.filter(ele => ele.value === typeTimeMap[y])
+  return timeList.filter(ele => ele.value === (typeTimeMap[y] || typeTimeMap[year]))
 })
 
 const cancelClick = () => {
@@ -344,7 +364,26 @@ const handleValueSourceChange = () => {
 }
 
 const multipleChange = (val: boolean, isMultipleChange = false) => {
-  defaultConfigurationRef.value?.multipleChange(val, isMultipleChange)
+  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
 }
 
 const isInRange = (ele, startWindowTime, timeStamp) => {
@@ -461,6 +500,8 @@ const openCascadeDialog = () => {
   cascadeDialog.value.init(cascadeMap)
 }
 
+const indexCascade = ' 一二三四五'
+
 const validateConditionType = ({
   defaultConditionValueF,
   defaultConditionValueS,
@@ -612,12 +653,16 @@ const validate = () => {
       return false
     }
 
-    if (ele.optionValueSource === 2 && !ele.valueSource?.filter(ele => !!ele).length) {
+    if (
+      ele.displayType !== '9' &&
+      ele.optionValueSource === 2 &&
+      !ele.valueSource?.filter(ele => !!ele).length
+    ) {
       ElMessage.error('手工输入-选项值不能为空')
       return true
     }
 
-    if (ele.optionValueSource === 1 && !ele.field.id) {
+    if (ele.displayType !== '9' && ele.optionValueSource === 1 && !ele.field.id) {
       ElMessage.error('请选择数据集的选项值字段')
       return true
     }
@@ -829,7 +874,8 @@ const parameterCompletion = () => {
       timeNumRange: 0,
       relativeToCurrentTypeRange: 'year',
       aroundRange: 'f'
-    }
+    },
+    treeFieldList: []
   }
   Object.entries(attributes).forEach(([key, val]) => {
     !curComponent.value[key] && (curComponent.value[key] = val)
@@ -888,6 +934,18 @@ const getOptions = (id, component) => {
   })
 }
 
+const treeDialog = ref()
+const startTreeDesign = () => {
+  treeDialog.value.init(
+    curComponent.value.dataset?.fields.filter(
+      ele => ele.deType === +curComponent.value.field.deType
+    ),
+    curComponent.value.treeFieldList
+  )
+}
+const saveTree = arr => {
+  curComponent.value.treeFieldList = arr
+}
 const showError = computed(() => {
   if (!curComponent.value) return false
   const { optionValueSource, checkedFieldsMap, checkedFields, field, valueSource, displayType } =
@@ -899,6 +957,20 @@ const showError = computed(() => {
   if ([1, 7, 8].includes(+displayType)) {
     return false
   }
+
+  if (displayType === '9') {
+    let displayField = null
+    return checkedFields.some(id => {
+      const arr = fields.value.find(itx => itx.componentId === id)
+      const field = arr.id
+      if (!field) return false
+      if (displayField === null) {
+        displayField = field
+        return false
+      }
+      return displayField !== field
+    })
+  }
   return (optionValueSource === 1 && !field.id) || (optionValueSource === 2 && !valueSource.length)
 })
 const handleDialogClick = () => {
@@ -1313,7 +1385,10 @@ defineExpose({
             label="必填项"
           />
         </div>
-        <div v-show="showConfiguration && !showTypeError" class="configuration-list">
+        <div
+          v-show="showConfiguration && !showTypeError && !showDatasetError"
+          class="configuration-list"
+        >
           <div class="list-item">
             <div class="label">展示类型</div>
             <div class="value">
@@ -1323,15 +1398,20 @@ defineExpose({
                 v-model="curComponent.displayType"
               >
                 <el-option
-                  :disabled="!['0', '8'].includes(curComponent.displayType)"
+                  :disabled="!['0', '8', '9'].includes(curComponent.displayType)"
                   label="文本下拉"
                   value="0"
                 />
                 <el-option
-                  :disabled="!['0', '8'].includes(curComponent.displayType)"
+                  :disabled="!['0', '8', '9'].includes(curComponent.displayType)"
                   label="文本搜索"
                   value="8"
                 />
+                <el-option
+                  :disabled="!['0', '8', '9'].includes(curComponent.displayType)"
+                  label="下拉树"
+                  value="9"
+                />
                 <el-option
                   v-if="curComponent.displayType === '2'"
                   :disabled="curComponent.displayType !== '2'"
@@ -1357,6 +1437,42 @@ defineExpose({
               </el-select>
             </div>
           </div>
+          <div class="list-item" v-if="curComponent.displayType === '9'">
+            <div class="label" style="width: 135px; height: 26px; line-height: 26px">
+              下拉树结构设计
+              <el-button v-if="!!curComponent.treeFieldList.length" text @click="startTreeDesign">
+                <template #icon>
+                  <icon name="icon_edit_outlined"></icon>
+                </template>
+              </el-button>
+            </div>
+            <div class="search-tree">
+              <template v-if="!!curComponent.treeFieldList.length">
+                <div
+                  v-for="(ele, index) in curComponent.treeFieldList"
+                  :key="ele.id"
+                  class="tree-field"
+                >
+                  <span class="level-index">层级{{ indexCascade[index + 1] }}</span>
+                  <span class="field-type"
+                    ><el-icon>
+                      <Icon
+                        :name="`field_${fieldType[ele.deType]}`"
+                        :className="`field-icon-${fieldType[ele.deType]}`"
+                      ></Icon> </el-icon
+                  ></span>
+                  <span class="field-tree_name">{{ ele.name }}</span>
+                </div>
+              </template>
+              <el-button @click="startTreeDesign" v-else text>
+                <template #icon>
+                  <Icon name="icon_add_outlined"></Icon>
+                </template>
+                点击进行树结构设计
+              </el-button>
+            </div>
+            <TreeFieldDialog ref="treeDialog" @save-tree="saveTree"></TreeFieldDialog>
+          </div>
           <div class="list-item" v-if="['1', '7'].includes(curComponent.displayType)">
             <div class="label">时间粒度</div>
             <div class="value">
@@ -1391,7 +1507,7 @@ defineExpose({
           </div>
           <div
             class="list-item top-item"
-            v-if="!['1', '7', '8'].includes(curComponent.displayType)"
+            v-if="!['1', '7', '8', '9'].includes(curComponent.displayType)"
           >
             <div class="label">选项值来源</div>
             <div class="value">
@@ -1680,6 +1796,9 @@ defineExpose({
         <div v-if="showTypeError && showConfiguration" class="empty">
           <empty-background description="所选字段类型不一致，无法进行查询配置" img-type="error" />
         </div>
+        <div v-else-if="showDatasetError && showConfiguration" class="empty">
+          <empty-background description="图表所使用的数据集不同, 无法展示配置项" img-type="error" />
+        </div>
         <div v-else-if="!showConfiguration" class="empty">
           <empty-background description="请先勾选需要联动的图表及字段" img-type="noneWhite" />
         </div>
@@ -1874,6 +1993,7 @@ defineExpose({
           display: flex;
           align-items: center;
           margin-bottom: 8px;
+
           .ed-checkbox__label {
             display: inline-flex;
             align-items: center;
@@ -1970,6 +2090,41 @@ defineExpose({
           justify-content: space-between;
           margin-bottom: 10.5px;
           flex-wrap: wrap;
+          .search-tree {
+            width: 100%;
+            height: 200px;
+            margin-top: 8px;
+            position: relative;
+            padding: 16px;
+            box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.12);
+
+            .ed-button {
+              position: absolute;
+              left: 50%;
+              top: 50%;
+              transform: translate(-50%, -50%);
+            }
+
+            .tree-field {
+              display: flex;
+              align-items: center;
+              margin-bottom: 16px;
+              .level-index {
+                margin-right: 40px;
+              }
+
+              .field-type {
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                font-size: 16px;
+              }
+
+              .field-tree_name {
+                margin-left: 8px;
+              }
+            }
+          }
 
           .setting-content {
             width: 100%;
diff --git a/core/core-frontend/src/custom-component/v-query/StyleInject.vue b/core/core-frontend/src/custom-component/v-query/StyleInject.vue
index b149f50cf8..e879532c6a 100644
--- a/core/core-frontend/src/custom-component/v-query/StyleInject.vue
+++ b/core/core-frontend/src/custom-component/v-query/StyleInject.vue
@@ -3,6 +3,7 @@ import { provide, PropType } from 'vue'
 import Select from './Select.vue'
 import Time from './Time.vue'
 import TextSearch from './TextSearch.vue'
+import Tree from './Tree.vue'
 
 interface SelectConfig {
   selectValue: any
@@ -55,7 +56,7 @@ const filterTypeCom = (displayType: string) => {
   if (displayType === '8') {
     return TextSearch
   }
-  return ['1', '7'].includes(displayType) ? Time : Select
+  return ['1', '7'].includes(displayType) ? Time : displayType === '9' ? Tree : Select
 }
 provide('$custom-style-filter', props.customStyle)
 </script>
diff --git a/core/core-frontend/src/custom-component/v-query/Tree.vue b/core/core-frontend/src/custom-component/v-query/Tree.vue
new file mode 100644
index 0000000000..e8aaa653ad
--- /dev/null
+++ b/core/core-frontend/src/custom-component/v-query/Tree.vue
@@ -0,0 +1,242 @@
+<script lang="ts" setup>
+import {
+  ref,
+  PropType,
+  toRefs,
+  nextTick,
+  watch,
+  onMounted,
+  computed,
+  inject,
+  shallowRef
+} from 'vue'
+import { cloneDeep, debounce } from 'lodash-es'
+import { getFieldTree } from '@/api/dataset'
+interface SelectConfig {
+  selectValue: any
+  defaultMapValue: any
+  defaultValue: any
+  checkedFieldsMap: object
+  displayType: string
+  id: string
+  checkedFields: string[]
+  treeFieldList: Array<any>
+  dataset: {
+    id: string
+  }
+  field: {
+    id: string
+  }
+  defaultValueCheck: boolean
+  multiple: boolean
+}
+
+const props = defineProps({
+  config: {
+    type: Object as PropType<SelectConfig>,
+    default: () => {
+      return {
+        selectValue: '',
+        defaultValue: '',
+        displayType: '',
+        defaultValueCheck: false,
+        multiple: false,
+        checkedFieldsMap: {},
+        treeFieldList: []
+      }
+    }
+  },
+  isConfig: {
+    type: Boolean,
+    default: false
+  }
+})
+const { config } = toRefs(props)
+
+const multiple = ref(false)
+
+const handleValueChange = () => {
+  const value = Array.isArray(treeValue.value) ? [...treeValue.value] : treeValue.value
+  if (!props.isConfig) {
+    config.value.selectValue = Array.isArray(treeValue.value)
+      ? [...treeValue.value]
+      : treeValue.value
+    return
+  }
+  config.value.defaultValue = value
+}
+
+watch(
+  () => config.value.defaultValue,
+  val => {
+    if (config.value.multiple) {
+      treeValue.value = Array.isArray(val) ? [...val] : val
+    }
+    nextTick(() => {
+      multiple.value = config.value.multiple
+    })
+  }
+)
+
+watch(
+  () => config.value.treeFieldList,
+  () => {
+    treeValue.value = config.value.multiple ? [] : undefined
+    showOrHide.value = false
+    getTreeOption()
+  }
+)
+
+const init = () => {
+  const { defaultValueCheck, multiple: plus, defaultValue } = config.value
+  if (defaultValueCheck) {
+    config.value.selectValue = Array.isArray(defaultValue)
+      ? cloneDeep([...defaultValue])
+      : defaultValue
+    treeValue.value = Array.isArray(defaultValue) ? cloneDeep([...defaultValue]) : defaultValue
+  } else {
+    config.value.selectValue = plus ? [] : undefined
+    treeValue.value = plus ? [] : undefined
+  }
+  nextTick(() => {
+    multiple.value = config.value.multiple
+  })
+  getTreeOption()
+}
+
+watch(
+  () => config.value.id,
+  () => {
+    init()
+  }
+)
+const showOrHide = ref(true)
+const queryConditionWidth = inject('com-width', Function, true)
+watch(
+  () => config.value.id,
+  () => {
+    getTreeOption()
+  }
+)
+onMounted(() => {
+  setTimeout(() => {
+    init()
+  }, 0)
+})
+
+watch(
+  () => config.value.selectValue,
+  val => {
+    if (props.isConfig) return
+    if (config.value.multiple) {
+      treeValue.value = Array.isArray(val) ? [...val] : val
+    }
+    nextTick(() => {
+      multiple.value = config.value.multiple
+      if (!config.value.multiple) {
+        treeValue.value = Array.isArray(config.value.selectValue)
+          ? [...config.value.selectValue]
+          : config.value.selectValue
+      }
+    })
+  }
+)
+
+watch(
+  () => config.value.multiple,
+  val => {
+    if (!props.isConfig) return
+    if (val) {
+      treeValue.value = []
+    }
+    nextTick(() => {
+      multiple.value = val
+      if (!val) {
+        nextTick(() => {
+          treeValue.value = undefined
+        })
+      }
+    })
+  }
+)
+let cacheId = ''
+let treeOptionList = shallowRef([])
+
+const dfs = arr => {
+  return (arr || []).map(ele => {
+    let children = []
+    if (!!ele.children?.length) {
+      children = dfs(ele.children)
+    }
+    return { ...ele, value: ele.id, label: ele.text, children }
+  })
+}
+
+const loading = ref(false)
+
+const getTreeOption = debounce(() => {
+  loading.value = true
+  getFieldTree(props.config.treeFieldList.map(ele => ele.id))
+    .then(res => {
+      treeOptionList.value = dfs(res)
+    })
+    .finally(() => {
+      loading.value = false
+    })
+}, 300)
+watch(
+  () => props.config.treeFieldList,
+  val => {
+    if (!props.isConfig) return
+    const ids = val.map(ele => ele.id).join('')
+    if (cacheId !== val.map(ele => ele.id).join('')) {
+      cacheId = ids
+      getTreeOption()
+    }
+  }
+)
+const fakeValue = ''
+const treeValue = ref()
+const selectStyle = computed(() => {
+  return props.isConfig ? {} : { width: queryConditionWidth() + 'px' }
+})
+</script>
+
+<template>
+  <el-tree-select
+    v-model="treeValue"
+    :data="treeOptionList"
+    v-if="multiple && !loading"
+    clearable
+    @change="handleValueChange"
+    :render-after-expand="false"
+    show-checkbox
+    key="multipleTree"
+    filterable
+    :style="selectStyle"
+    multiple
+  />
+  <el-tree-select
+    v-model="treeValue"
+    @change="handleValueChange"
+    :data="treeOptionList"
+    check-strictly
+    clearable
+    :render-after-expand="false"
+    v-else-if="!loading"
+    key="singleTree"
+    :style="selectStyle"
+    filterable
+  />
+  <el-tree-select
+    v-model="fakeValue"
+    v-loading="loading"
+    :data="[]"
+    :render-after-expand="false"
+    v-else
+    key="fakeTree"
+    :style="selectStyle"
+  />
+</template>
+
+<style lang="less" scoped></style>
diff --git a/core/core-frontend/src/custom-component/v-query/TreeFieldDialog.vue b/core/core-frontend/src/custom-component/v-query/TreeFieldDialog.vue
new file mode 100644
index 0000000000..0cd7fdb4f7
--- /dev/null
+++ b/core/core-frontend/src/custom-component/v-query/TreeFieldDialog.vue
@@ -0,0 +1,142 @@
+<script lang="ts" setup>
+import { guid } from '@/views/visualized/data/dataset/form/util.js'
+import { ElMessage } from 'element-plus-secondary'
+import { ref, shallowRef } from 'vue'
+import { cloneDeep } from 'lodash-es'
+
+const dialogVisible = ref(false)
+const treeList = ref([])
+const datasetMap = shallowRef([])
+const emits = defineEmits(['saveTree'])
+
+const addCascadeItem = () => {
+  treeList.value.push({
+    field: null,
+    id: guid()
+  })
+}
+const handleBeforeClose = () => {
+  dialogVisible.value = false
+}
+const init = (arr, treeArr) => {
+  datasetMap.value = cloneDeep(arr)
+  treeList.value = cloneDeep(treeArr).map(ele => ({ field: ele, id: ele.id }))
+  dialogVisible.value = true
+}
+
+const cancelClick = () => {
+  handleBeforeClose()
+}
+const setCascadeArrBack = () => {
+  let isError = false
+  const arr = cloneDeep(treeList.value).map(item => {
+    if (!item.field) {
+      isError = true
+    }
+    return item.field
+  })
+
+  return {
+    arr,
+    isError
+  }
+}
+const confirmClick = () => {
+  const { isError, arr } = setCascadeArrBack()
+  if (isError) {
+    ElMessage.error('层级字段不能为空,请选择字段!')
+    return
+  }
+  emits('saveTree', arr)
+  handleBeforeClose()
+}
+const indexCascade = ' 一二三四五'
+
+const deleteCascade = idx => {
+  treeList.value.splice(idx, 1)
+}
+
+defineExpose({
+  init
+})
+</script>
+
+<template>
+  <el-dialog
+    v-model="dialogVisible"
+    width="600"
+    custom-class="tree-field_dialog"
+    :before-close="handleBeforeClose"
+    @mousedown.stop
+    @mousedup.stop
+    title="下拉树结构设计"
+  >
+    <div class="cascade-content">
+      <div style="display: flex; align-items: center; justify-content: space-between">
+        <el-button :disabled="treeList.length === 5" text @click="addCascadeItem">
+          <template #icon>
+            <Icon name="icon_add_outlined"></Icon>
+          </template>
+          添加层级
+        </el-button>
+      </div>
+      <div class="cascade-item">
+        <div class="label">层级</div>
+        <div class="item-name">下拉树查询字段</div>
+      </div>
+      <div class="cascade-item" v-for="(ele, idx) in treeList" :key="ele.id">
+        <div class="label">层级{{ indexCascade[idx + 1] }}</div>
+        <div class="item-name">
+          <el-select value-key="id" v-model="ele.field" style="width: 300px">
+            <el-option v-for="item in datasetMap" :key="item.id" :label="item.name" :value="item" />
+          </el-select>
+        </div>
+        <el-button v-show="idx !== 0" @click="deleteCascade(idx)" class="cascade-delete" text>
+          <template #icon>
+            <Icon name="icon_delete-trash_outlined"></Icon>
+          </template>
+        </el-button>
+      </div>
+    </div>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button secondary @click="cancelClick">取消</el-button>
+        <el-button type="primary" @click="confirmClick"> 确定 </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<style lang="less">
+.tree-field_dialog {
+  .cascade-content {
+    box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.12);
+    border: 1px solid #e4e7ed;
+    padding: 24px;
+    padding-top: 8px;
+    margin-top: 8px;
+
+    .cascade-item {
+      display: flex;
+      align-items: center;
+      width: 100%;
+      height: 40px;
+      .label {
+        width: 100px;
+      }
+
+      .item-name {
+        width: 300px;
+      }
+    }
+
+    .cascade-delete-block,
+    .cascade-delete {
+      width: 40px;
+      font-size: 20px;
+      color: #646a73;
+      margin-left: 20px;
+    }
+  }
+}
+</style>
diff --git a/core/core-frontend/src/hooks/web/useFilter.ts b/core/core-frontend/src/hooks/web/useFilter.ts
index c1273a2c82..9a49209380 100644
--- a/core/core-frontend/src/hooks/web/useFilter.ts
+++ b/core/core-frontend/src/hooks/web/useFilter.ts
@@ -76,6 +76,15 @@ const getDayEnd = timestamp => {
   return [+new Date(timestamp), +new Date(timestamp) + 60 * 1000 * 60 * 24 - 1000]
 }
 
+const getFieldId = (arr, result) => {
+  const [obj] = result
+  const idArr = obj.split(',')
+  return arr
+    .map(ele => ele.id)
+    .slice(0, idArr.length)
+    .join(',')
+}
+
 const getValueByDefaultValueCheckOrFirstLoad = (
   defaultValueCheck: boolean,
   defaultValue: any,
@@ -88,6 +97,20 @@ const getValueByDefaultValueCheckOrFirstLoad = (
   displayType: string,
   displayId: string
 ) => {
+  if (+displayType === 9) {
+    if (firstLoad) {
+      return defaultValueCheck
+        ? multiple
+          ? defaultValue.map(ele => ele.split('-de-').join(','))
+          : (defaultValue || '').split('-de-').join(',')
+        : []
+    }
+    return selectValue?.length
+      ? multiple
+        ? selectValue.map(ele => ele.split('-de-').join(','))
+        : (selectValue || '').split('-de-').join(',')
+      : []
+  }
   if (
     optionValueSource === 1 &&
     (defaultMapValue?.length || displayId) &&
@@ -152,6 +175,9 @@ const getOperator = (
   conditionValueS,
   firstLoad
 ) => {
+  if (+displayType === 9) {
+    return multiple ? 'in' : 'eq'
+  }
   const valueF = firstLoad ? defaultConditionValueF : conditionValueF
   const valueS = firstLoad ? defaultConditionValueS : conditionValueS
   const operatorF = firstLoad ? defaultConditionValueOperatorF : conditionValueOperatorF
@@ -186,9 +212,8 @@ export const searchQuery = (queryComponentList, filter, curComponentId, firstLoa
             const {
               selectValue: value,
               timeGranularityMultiple,
-              parametersStart,
-              parametersEnd,
               conditionType = 0,
+              treeFieldList = [],
               defaultConditionValueOperatorF = 'eq',
               defaultConditionValueF = '',
               defaultConditionValueOperatorS = 'like',
@@ -204,13 +229,14 @@ export const searchQuery = (queryComponentList, filter, curComponentId, firstLoa
               defaultMapValue,
               mapValue,
               parameters = [],
-              isTree = false,
               timeGranularity = 'date',
               displayType,
               displayId,
               multiple
             } = item
 
+            const isTree = +displayType === 9
+
             if (timeType === 'dynamic' && [1, 7].includes(+displayType) && firstLoad) {
               if (+displayType === 1) {
                 selectValue = getDynamicRange(item)
@@ -303,7 +329,9 @@ export const searchQuery = (queryComponentList, filter, curComponentId, firstLoa
               if (result?.length) {
                 filter.push({
                   componentId: ele.id,
-                  fieldId: item.checkedFieldsMap[curComponentId],
+                  fieldId: isTree
+                    ? getFieldId(treeFieldList, result)
+                    : item.checkedFieldsMap[curComponentId],
                   operator,
                   value: result,
                   parameters,