diff --git a/core/core-frontend/src/views/chart/components/editor/filter/FilterTree.vue b/core/core-frontend/src/views/chart/components/editor/filter/FilterTree.vue
index e2a5454273..bcb2addeb3 100644
--- a/core/core-frontend/src/views/chart/components/editor/filter/FilterTree.vue
+++ b/core/core-frontend/src/views/chart/components/editor/filter/FilterTree.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { ElMessage } from 'element-plus-secondary'
 import { inject, computed, ref, nextTick, provide } from 'vue'
-import RowAuth from '@/views/chart/components/editor/filter/auth-tree/RowAuth.vue'
+import RowAuth from '@/views/chart/components/editor/filter/auth-tree-chart/RowAuth.vue'
 import { snapshotStoreWithOut } from '@/store/modules/data-visualization/snapshot'
 
 const emits = defineEmits(['filter-data'])
diff --git a/core/core-frontend/src/views/chart/components/editor/filter/auth-tree-chart/AuthTree.vue b/core/core-frontend/src/views/chart/components/editor/filter/auth-tree-chart/AuthTree.vue
new file mode 100644
index 0000000000..6f563903b6
--- /dev/null
+++ b/core/core-frontend/src/views/chart/components/editor/filter/auth-tree-chart/AuthTree.vue
@@ -0,0 +1,248 @@
+<script lang="ts">
+import icon_down_outlined from '@/assets/svg/icon_down_outlined.svg'
+import icon_deleteTrash_outlined from '@/assets/svg/icon_delete-trash_outlined.svg'
+export default {
+  name: 'logic-relation'
+}
+</script>
+<script lang="ts" setup>
+import { useI18n } from '@/hooks/web/useI18n'
+import { PropType, computed, toRefs } from 'vue'
+import FilterFiled from './FilterFiled.vue'
+import type { Item } from './FilterFiled.vue'
+export type Logic = 'or' | 'and'
+export type Relation = {
+  child?: Relation[]
+  logic: Logic
+  x: number
+} & Item
+const { t } = useI18n()
+
+const props = defineProps({
+  relationList: {
+    type: Array as PropType<Relation[]>,
+    default: () => []
+  },
+  x: {
+    type: Number,
+    default: 0
+  },
+  logic: {
+    type: String as PropType<Logic>,
+    default: 'or'
+  }
+})
+
+const marginLeft = computed(() => {
+  return {
+    marginLeft: props.x ? '20px' : 0
+  }
+})
+
+const emits = defineEmits([
+  'addCondReal',
+  'changeAndOrDfs',
+  'update:logic',
+  'removeRelationList',
+  'del'
+])
+
+const { relationList } = toRefs(props)
+
+const handleCommand = type => {
+  emits('update:logic', type)
+  emits('changeAndOrDfs', type)
+}
+
+const removeRelationList = index => {
+  relationList.value.splice(index, 1)
+}
+const addCondReal = type => {
+  emits('addCondReal', type, props.logic === 'or' ? 'and' : 'or')
+}
+const add = (type, child, logic) => {
+  child.push(
+    type === 'condition'
+      ? {
+          fieldId: '',
+          value: '',
+          enumValue: '',
+          term: '',
+          filterType: 'logic',
+          name: '',
+          filterTypeTime: 'dateValue',
+          timeValue: '',
+          dynamicTimeSetting: {},
+          deType: ''
+        }
+      : { child: [], logic }
+  )
+}
+const del = (index, child) => {
+  child.splice(index, 1)
+}
+</script>
+
+<template>
+  <div class="logic" :style="marginLeft">
+    <div class="logic-left">
+      <div class="operate-title">
+        <span style="color: #bfbfbf" class="mrg-title" v-if="x">
+          {{ logic === 'or' ? 'OR' : 'AND' }}
+        </span>
+        <el-dropdown @command="handleCommand" trigger="click" v-else>
+          <span style="color: rgba(0 0 0 / 65%)" class="mrg-title fir">
+            {{ logic === 'or' ? 'OR' : 'AND' }}
+            <el-icon>
+              <Icon name="icon_down_outlined"><icon_down_outlined class="svg-icon" /></Icon>
+            </el-icon>
+          </span>
+          <template #dropdown>
+            <el-dropdown-menu>
+              <el-dropdown-item command="and">AND</el-dropdown-item>
+              <el-dropdown-item command="or">OR</el-dropdown-item>
+            </el-dropdown-menu>
+          </template>
+        </el-dropdown>
+      </div>
+      <span class="operate-icon" v-if="x">
+        <el-icon @click="emits('removeRelationList')">
+          <Icon name="icon_delete-trash_outlined"
+            ><icon_deleteTrash_outlined class="svg-icon"
+          /></Icon>
+        </el-icon>
+      </span>
+    </div>
+    <div class="logic-right">
+      <template :key="index" v-for="(item, index) in relationList">
+        <logic-relation
+          v-if="item.child"
+          :x="item.x"
+          @del="idx => del(idx, item.child)"
+          @addCondReal="(type, logic) => add(type, item.child, logic)"
+          :logic="item.logic"
+          @removeRelationList="removeRelationList(index)"
+          :relationList="item.child"
+        >
+        </logic-relation>
+        <filter-filed v-else :item="item" @del="emits('del', index)" :index="index"></filter-filed>
+      </template>
+      <div class="logic-right-add">
+        <button @click="addCondReal('condition')" class="operand-btn">
+          + {{ t('auth.add_condition') }}
+        </button>
+        <button v-if="x < 2" @click="addCondReal('relation')" class="operand-btn">
+          + {{ t('auth.add_relationship') }}
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="less" scoped>
+.logic {
+  display: flex;
+  align-items: center;
+  position: relative;
+  z-index: 1;
+  width: 100%;
+
+  .logic-left {
+    box-sizing: border-box;
+    width: 48px;
+    display: flex;
+    position: relative;
+    align-items: center;
+    z-index: 10;
+
+    .operate-title {
+      font-family: var(--de-custom_font, 'PingFang');
+      word-wrap: break-word;
+      box-sizing: border-box;
+      color: rgba(0, 0, 0, 0.65);
+      font-size: 12px;
+      display: inline-block;
+      white-space: nowrap;
+      margin: 0;
+      padding: 0;
+      width: 65px;
+      background-color: #f8f8fa;
+      line-height: 28px;
+      position: relative;
+      z-index: 1;
+      height: 28px;
+
+      .mrg-title {
+        text-align: left;
+        box-sizing: border-box;
+        position: relative;
+        display: block;
+        margin-left: 11px;
+        margin-right: 11px;
+        line-height: 28px;
+        height: 28px;
+      }
+    }
+
+    &:hover {
+      .operate-icon {
+        display: inline-block;
+      }
+
+      .operate-title {
+        .mrg-title:not(.fir) {
+          margin: 0 5px;
+        }
+      }
+    }
+
+    .operate-icon {
+      width: 40px;
+      height: 28px;
+      line-height: 28px;
+      background-color: #f8f8fa;
+      z-index: 1;
+      display: none;
+
+      i {
+        font-size: 12px;
+        font-style: normal;
+        display: unset;
+        padding: 5px 3px;
+        cursor: pointer;
+        position: relative;
+        z-index: 10;
+      }
+    }
+  }
+
+  .logic-right-add {
+    display: flex;
+    height: 41.4px;
+    align-items: center;
+    padding-left: 26px;
+
+    .operand-btn {
+      box-sizing: border-box;
+      font-weight: 400;
+      text-align: center;
+      box-shadow: 0 2px 0 rgba(0, 0, 0, 0.015);
+      transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+      outline: 0;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      line-height: 1;
+      cursor: pointer;
+      height: 28px;
+      padding: 0 10px;
+      margin-right: 10px;
+      font-size: 12px;
+      color: #246dff;
+      background: #fff;
+      border: 1px solid #246dff;
+      border-radius: 2px;
+    }
+  }
+}
+</style>
diff --git a/core/core-frontend/src/views/chart/components/editor/filter/auth-tree-chart/FilterFiled.vue b/core/core-frontend/src/views/chart/components/editor/filter/auth-tree-chart/FilterFiled.vue
new file mode 100644
index 0000000000..3ce9582533
--- /dev/null
+++ b/core/core-frontend/src/views/chart/components/editor/filter/auth-tree-chart/FilterFiled.vue
@@ -0,0 +1,1258 @@
+<script lang="ts" setup>
+import icon_searchOutline_outlined from '@/assets/svg/icon_search-outline_outlined.svg'
+import icon_deleteTrash_outlined from '@/assets/svg/icon_delete-trash_outlined.svg'
+import { ref, inject, computed, watch, onBeforeMount, toRefs, nextTick } from 'vue'
+import { useI18n } from '@/hooks/web/useI18n'
+import type { SelectConfig } from '../TimeDialog.vue'
+import TimeDialog from '@/views/chart/components/editor/filter/TimeDialog.vue'
+import { multFieldValuesForPermissions } from '@/api/dataset'
+import {
+  textOptions,
+  dateOptions,
+  valueOptions,
+  textOptionsForSysParams,
+  sysParamsIlns,
+  fieldEnums
+} from '@/views/visualized/data/dataset/options.js'
+import { iconFieldMap } from '@/components/icon-group/field-list'
+export interface Item {
+  term: string
+  fieldId: string
+  filterType: string
+  deType: number
+  enumValue: string
+  name: string
+  value: number
+  filterTypeTime?: string
+  timeValue: string
+  dynamicTimeSetting?: SelectConfig
+}
+
+type Props = {
+  index: number
+  item: Item
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  index: 0,
+  item: () => ({
+    term: '',
+    fieldId: '',
+    filterType: '',
+    deType: 0,
+    enumValue: '',
+    name: '',
+    filterTypeTime: 'dateValue',
+    value: null,
+    dynamicTimeSetting: null,
+    timeValue: ''
+  })
+})
+
+const { t } = useI18n()
+const enumInput = ref()
+const deElDropdownMenuFixed = ref()
+const showDel = ref(false)
+const keywords = ref('')
+const activeName = ref('')
+const filterFiled = ref('')
+const enumList = ref([])
+const showTextArea = ref()
+const keydownCanceled = ref(false)
+const checklist = ref([])
+const filterList = ref([])
+const textareaValue = ref('')
+
+const { item } = toRefs(props)
+
+const getAuthTargetType = inject('getAuthTargetType')
+const filedList = inject('filedList')
+
+const checkListWithFilter = computed(() => {
+  if (!filterFiled.value) return enumList.value
+  return enumList.value.filter(ele => ele.includes(filterFiled.value))
+})
+const checkResult = computed(() => {
+  return checklist.value.join(',')
+})
+
+const sysParamsIln = computed(() => {
+  if (['in', 'not in'].includes(item.value.term)) {
+    return [
+      {
+        value: '${sysParams.roles}',
+        label: t('auth.sysParams_type.role')
+      }
+    ]
+  } else {
+    return sysParamsIlns
+  }
+})
+const operators = computed(() => {
+  const { deType } = item.value
+  if (authTargetType.value === 'sysParams') {
+    return textOptionsForSysParams
+  }
+  if ([0, 5, 7].includes(deType)) {
+    return textOptions
+  } else if (deType === 1) {
+    return dateOptions
+  } else {
+    return valueOptions
+  }
+})
+const dimensions = computed(() => {
+  if (!keywords.value) return computedFiledList.value
+  return computedFiledList.value.filter(ele => ele.name.includes(keywords.value))
+})
+const computedFiledList = computed(() => {
+  return Object.values(filedList.value || {})
+})
+
+watch(checkResult, () => {
+  cancelfixValue()
+})
+
+const authTargetType = ref('')
+
+watch(
+  () => getAuthTargetType?.authTargetType,
+  value => {
+    if (authTargetType.value === value || !value) return
+    authTargetType.value = value
+  },
+  {
+    immediate: true
+  }
+)
+
+onBeforeMount(() => {
+  initNameEnumName()
+  filterListInit(item.value.deType)
+})
+
+const confirm = () => {
+  enumInput.value.$el.click()
+}
+const initNameEnumName = () => {
+  const { name, enumValue, fieldId } = item.value
+  const arr = enumValue.trim() ? enumValue.split(',') : []
+  if (!name && fieldId) {
+    checklist.value = arr
+  }
+  if (!name && !fieldId) return
+  initEnumOptions()
+  activeName.value = item.value.name
+  checklist.value = arr
+}
+const cancelKeyDow = () => {
+  if (!showTextArea.value && !keydownCanceled.value) {
+    keydownCanceled.value = true
+  }
+  showTextArea.value = true
+}
+const filterTypeChange = () => {
+  item.value.term = ''
+  item.value.value = null
+  initEnumOptions()
+}
+
+const filterTypeChangeTime = () => {
+  item.value.term = ''
+  item.value.timeValue = null
+}
+const initEnumOptions = () => {
+  // 查找枚举值
+  if (authTargetType.value === 'sysParams') {
+    return
+  }
+  const { deType, filterType, fieldId } = item.value
+  // 查找枚举值
+  if (filterType === 'enum' && [0, 5, 7].includes(deType)) {
+    multFieldValuesForPermissions({ fieldIds: [fieldId] }).then(res => {
+      enumList.value = optionData(res.data)
+    })
+  }
+}
+
+const dialogVisible = ref(false)
+const timeDialog = ref()
+const handleClick = () => {
+  dialogVisible.value = true
+  nextTick(() => {
+    timeDialog.value.init(item.value.dynamicTimeSetting || {})
+  })
+}
+
+const relativeToCurrentTypeMap = {
+  year: '年',
+  month: '月',
+  date: '日',
+  datetime: '日'
+}
+
+const confirmTimeSelect = () => {
+  item.value.dynamicTimeSetting = { ...timeDialog.value.curComponent }
+  const {
+    timeGranularity,
+    timeNum,
+    relativeToCurrentType,
+    around,
+    arbitraryTime,
+    relativeToCurrent
+  } = item.value.dynamicTimeSetting
+  if (relativeToCurrent !== 'custom') {
+    item.value.timeValue = [
+      {
+        label: '今年',
+        value: 'thisYear'
+      },
+      {
+        label: '去年',
+        value: 'lastYear'
+      },
+      {
+        label: '本月',
+        value: 'thisMonth'
+      },
+      {
+        label: '上月',
+        value: 'lastMonth'
+      },
+      {
+        label: '今天',
+        value: 'today'
+      },
+      {
+        label: '昨天',
+        value: 'yesterday'
+      },
+      {
+        label: '月初',
+        value: 'monthBeginning'
+      },
+      {
+        label: '年初',
+        value: 'yearBeginning'
+      }
+    ].find(ele => ele.value === relativeToCurrent).label
+    dialogVisible.value = false
+    return
+  }
+  item.value.timeValue = `${timeNum}${relativeToCurrentTypeMap[relativeToCurrentType]}${
+    around === 'f' ? '前' : '后'
+  }`
+  if (timeGranularity === 'datetime') {
+    item.value.timeValue += new Date(arbitraryTime).toLocaleString().split(' ')[1]
+  }
+
+  dialogVisible.value = false
+}
+
+const optionData = data => {
+  if (!data) return null
+  return data.filter(item => !!item)
+}
+const cancel = () => {
+  item.value.name = activeName.value || ''
+}
+const cancelfixValue = () => {
+  item.value.enumValue = checkResult.value || ''
+}
+const delChecks = idx => {
+  checklist.value.splice(idx, 1)
+}
+const selectItem = ({ name, id, deType }) => {
+  activeName.value = name
+  Object.assign(item.value, {
+    fieldId: id,
+    name,
+    deType,
+    filterType: 'logic',
+    enumValue: '',
+    value: '',
+    term: '',
+    filterTypeTime: 'dateValue',
+    timeValue: '',
+    dynamicTimeSetting: {}
+  })
+  filterListInit(deType)
+  checklist.value = []
+}
+
+const filterListInit = deType => {
+  filterList.value = [
+    {
+      value: 'logic',
+      label: t('deDataset.logic_filter')
+    },
+    {
+      value: 'enum',
+      label: t('deDataset.enum_filter')
+    }
+  ]
+  if (authTargetType.value === 'sysParams' || [1, 2, 3].includes(deType)) {
+    filterList.value = [filterList.value[0]]
+  }
+}
+
+const filterListTime = [
+  {
+    value: 'dateValue',
+    label: '固定值'
+  },
+  {
+    value: 'dynamicDate',
+    label: '动态值'
+  }
+]
+const clearAll = () => {
+  checklist.value = []
+}
+const selectAll = () => {
+  checkListWithFilter.value.forEach(ele => {
+    if (!checklist.value.includes(ele)) {
+      checklist.value.push(ele)
+    }
+  })
+}
+const addFields = () => {
+  const list = textareaValue.value.split('\n').reduce((pre, next) => {
+    const str = next.trim()
+    if (!str) return pre
+    pre.add(str)
+    return pre
+  }, new Set([]))
+  if (list.size) {
+    checklist.value = [...new Set([...checklist.value, ...Array.from(list)])]
+  }
+  showTextArea.value = false
+}
+const checkItem = i => {
+  const index = checklist.value.findIndex(ele => ele === i)
+  if (index === -1) {
+    checklist.value.push(i)
+  } else {
+    delChecks(index)
+  }
+}
+
+const emits = defineEmits(['update:item', 'del'])
+</script>
+
+<template>
+  <div class="white-nowrap">
+    <div class="filed" @mouseover="showDel = true" @mouseleave="showDel = false">
+      <span class="filed-title">{{ t('auth.filter_fields') }}</span>
+
+      <el-dropdown trigger="click" :hide-on-click="false">
+        <el-input
+          :placeholder="t('auth.select_filter_fields')"
+          v-model="item.name"
+          size="small"
+          @input="cancel"
+        >
+        </el-input>
+        <template #dropdown>
+          <el-dropdown-menu class="de-el-dropdown-menu">
+            <el-input
+              @keydown.stop
+              :placeholder="t('auth.enter_keywords')"
+              size="small"
+              v-model="keywords"
+            >
+              <template #prefix>
+                <el-icon>
+                  <Icon name="icon_search-outline_outlined"
+                    ><icon_searchOutline_outlined class="svg-icon"
+                  /></Icon>
+                </el-icon>
+              </template>
+            </el-input>
+            <ul class="dimension">
+              <li
+                @click="selectItem(ele)"
+                :style="{
+                  backgroundColor: activeName === ele.name ? '#f0f7ff' : ''
+                }"
+                :key="ele.id"
+                v-for="ele in dimensions"
+              >
+                <el-icon>
+                  <Icon :className="`field-icon-${fieldEnums[ele.deType]}`"
+                    ><component
+                      class="svg-icon"
+                      :class="`field-icon-${fieldEnums[ele.deType]}`"
+                      :is="iconFieldMap[fieldEnums[ele.deType]]"
+                    ></component
+                  ></Icon>
+                </el-icon>
+                <span>{{ ele.name }}</span>
+              </li>
+            </ul>
+          </el-dropdown-menu>
+        </template>
+      </el-dropdown>
+      <div class="white-nowrap flex-align-center" style="position: relative" v-if="item.fieldId">
+        <template v-if="item.deType !== 1">
+          <span class="filed-title">{{ t('auth.screen_method') }}</span>
+          <el-select
+            size="small"
+            @change="filterTypeChange"
+            v-model="item.filterType"
+            :placeholder="t('auth.select')"
+          >
+            <el-option
+              v-for="ele in filterList"
+              :key="ele.value"
+              :label="ele.label"
+              :value="ele.value"
+            >
+            </el-option>
+          </el-select>
+          <span class="filed-title">{{ t('auth.fixed_value') }}</span>
+        </template>
+        <template v-else>
+          <el-select
+            size="small"
+            class="w100"
+            style="margin-left: 16px"
+            @change="filterTypeChangeTime"
+            v-model="item.filterTypeTime"
+            :placeholder="t('auth.select')"
+          >
+            <el-option
+              v-for="ele in filterListTime"
+              :key="ele.value"
+              :label="ele.label"
+              :value="ele.value"
+            >
+            </el-option>
+          </el-select>
+        </template>
+        <template v-if="item.filterType === 'logic'">
+          <el-select
+            class="w100"
+            size="small"
+            v-model="item.term"
+            :placeholder="t('auth.default_method')"
+          >
+            <el-option
+              v-for="ele in operators"
+              :key="ele.value"
+              :label="t(ele.label)"
+              :value="ele.value"
+            >
+            </el-option>
+          </el-select>
+
+          <template v-if="authTargetType === 'sysParams'">
+            <el-select class="w70 mar5" size="small" v-model="item.value">
+              <el-option
+                v-for="itx in sysParamsIln"
+                :key="itx.value"
+                :label="t(itx.label)"
+                :value="itx.value"
+              >
+              </el-option>
+            </el-select>
+          </template>
+          <template
+            v-else-if="
+              [2, 3].includes(item.deType) &&
+              !['null', 'empty', 'not_null', 'not_empty'].includes(item.term)
+            "
+          >
+            <el-input-number
+              class="w70 mar5"
+              size="small"
+              effect="plain"
+              v-model="item.value"
+              controls-position="right"
+            ></el-input-number>
+            <div class="bottom-line"></div>
+          </template>
+          <template v-else-if="!['null', 'empty', 'not_null', 'not_empty'].includes(item.term)">
+            <el-input
+              v-if="item.deType === 1 && item.filterTypeTime === 'dynamicDate' && !item.timeValue"
+              @click="handleClick"
+              readonly
+              class="w70 mar5"
+              size="small"
+              v-model="item.timeValue"
+            />
+            <el-tooltip
+              class="item"
+              v-else-if="item.deType === 1 && item.filterTypeTime === 'dynamicDate'"
+              effect="light"
+              :content="item.timeValue"
+              placement="top"
+              ><el-input
+                @click="handleClick"
+                readonly
+                class="w70 mar5"
+                size="small"
+                v-model="item.timeValue"
+            /></el-tooltip>
+            <el-input v-else class="w70 mar5" size="small" v-model="item.value" />
+            <div class="bottom-line"></div>
+          </template>
+        </template>
+
+        <el-popover
+          popper-class="de-el-dropdown-menu-fixed"
+          v-else
+          width="360px"
+          trigger="click"
+          ref="deElDropdownMenuFixed"
+          :hide-on-click="false"
+        >
+          <template #reference>
+            <el-input
+              v-model="item.enumValue"
+              ref="enumInput"
+              size="small"
+              @input="cancelfixValue"
+              clearable
+              @clear="clearAll"
+            >
+            </el-input>
+          </template>
+          <div class="de-panel clearfix">
+            <div class="mod-left">
+              <el-input :placeholder="t('auth.enter_keywords')" v-model="filterFiled"> </el-input>
+              <ul class="infinite-list autochecker-list" style="height: 231px; overflow: auto">
+                <li
+                  :key="i"
+                  v-for="i in checkListWithFilter"
+                  class="infinite-list-item"
+                  @click="checkItem(i)"
+                >
+                  <i class="el-icon-check" :style="{ opacity: checklist.includes(i) ? 1 : 0 }"></i>
+                  <label>{{ i }}</label>
+                  <span>+</span>
+                </li>
+              </ul>
+              <button class="select-all" @click="selectAll">
+                {{ t('auth.select_all') }}
+              </button>
+            </div>
+            <div class="mod-left right-de">
+              <div class="right-top clearfix">
+                {{ t('auth.added') }}{{ checklist.length }}
+                <div class="right-btn">
+                  <span @click="cancelKeyDow">
+                    <i class="el-icon-edit"></i>
+                    {{ t('auth.manual_input') }}
+                  </span>
+                  <transition name="el-zoom-in-top">
+                    <div v-if="showTextArea" class="de-el-dropdown-menu-manu">
+                      <div class="text-area">
+                        <textarea
+                          :placeholder="t('auth.please_fill')"
+                          class="input"
+                          v-model="textareaValue"
+                        ></textarea>
+                        <div class="text-area-btn">
+                          <button type="button" @click="showTextArea = false" class="btn">
+                            <span>{{ t('auth.close') }}</span>
+                          </button>
+                          <button type="button" @click="addFields" class="btn right-add">
+                            <span>{{ t('auth.add') }}</span>
+                          </button>
+                        </div>
+                      </div>
+                    </div>
+                  </transition>
+                </div>
+              </div>
+              <ul class="infinite-list autochecker-list" style="overflow: auto">
+                <li :key="i" v-for="(i, idx) in checklist" class="infinite-list-item">
+                  <el-tooltip
+                    class="item"
+                    effect="light"
+                    :content="i"
+                    placement="top"
+                    :open-delay="1000"
+                  >
+                    <label>{{ i }}</label>
+                  </el-tooltip>
+                  <el-icon @click="delChecks(idx)" style="opacity: 1">
+                    <Icon name="icon_delete-trash_outlined"
+                      ><icon_deleteTrash_outlined class="svg-icon"
+                    /></Icon>
+                  </el-icon>
+                </li>
+              </ul>
+              <div class="right-menu-foot">
+                <div class="footer-left">&nbsp;</div>
+                <div class="confirm-btn" @click="confirm">
+                  {{ t('auth.sure') }}
+                </div>
+                <div class="footer-right">
+                  <el-icon @click="clearAll">
+                    <Icon name="icon_delete-trash_outlined"
+                      ><icon_deleteTrash_outlined class="svg-icon"
+                    /></Icon>
+                  </el-icon>
+                </div>
+              </div>
+            </div>
+          </div>
+        </el-popover>
+      </div>
+      <el-icon v-if="showDel" class="font12" @click="emits('del')">
+        <Icon name="icon_delete-trash_outlined"
+          ><icon_deleteTrash_outlined class="svg-icon"
+        /></Icon>
+      </el-icon>
+    </div>
+    <el-dialog
+      class="create-dialog"
+      append-to-body
+      v-model="dialogVisible"
+      title="日期设置"
+      width="420"
+    >
+      <TimeDialog ref="timeDialog"></TimeDialog>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button @click="dialogVisible = false">取消</el-button>
+          <el-button type="primary" @click="confirmTimeSelect"> 确定 </el-button>
+        </div>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<style lang="less" scoped>
+.white-nowrap {
+  white-space: nowrap;
+}
+.filed {
+  width: fit-content;
+  height: 41.4px;
+  padding: 1px 3px 1px 10px;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  margin-left: 20px;
+  min-width: 200px;
+  justify-content: left;
+  position: relative;
+  white-space: nowrap;
+  :deep(.ed-input-number.is-controls-right .ed-input__wrapper) {
+    padding-left: 1px !important;
+    padding-right: 1px !important;
+  }
+
+  .filed-title {
+    word-wrap: break-word;
+    line-height: 28px;
+    color: #7e7e7e;
+    font-size: 12px;
+    white-space: nowrap;
+    box-sizing: border-box;
+    margin-right: 5px;
+    display: inline-block;
+    min-width: 50px;
+    text-align: right;
+  }
+
+  .font12 {
+    font-size: 12px;
+    margin: 0 10px;
+    cursor: pointer;
+  }
+
+  .ed-input {
+    width: 170px;
+  }
+
+  .w100.ed-select {
+    width: 100px;
+  }
+
+  .w70 {
+    width: 70px;
+  }
+
+  .mar5 {
+    margin-left: -5px;
+  }
+
+  :deep(.ed-input-number__decrease:not(.is-disabled)),
+  :deep(.ed-input-number__increase:not(.is-disabled)) {
+    &:hover {
+      z-index: 10;
+      &::after {
+        display: block;
+      }
+      & ~ .ed-input:not(.is-disabled) .ed-input__wrapper {
+        box-shadow: 0 0 0 0 #000 inset !important;
+      }
+    }
+  }
+  :deep(.ed-input-number__decrease),
+  :deep(.ed-input-number__increase) {
+    width: 20px;
+    height: 12px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: height 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+    display: none;
+  }
+
+  :deep(.ed-input-number__decrease:hover) {
+    height: 16px;
+    & + .ed-input-number__increase {
+      height: 8px;
+    }
+  }
+  :deep(.ed-input-number__increase:hover) {
+    height: 16px;
+    & + .ed-input-number__decrease {
+      height: 8px;
+    }
+  }
+
+  .bottom-line {
+    font-family: var(--de-custom_font, 'PingFang');
+    font-variant: tabular-nums;
+    font-feature-settings: 'tnum';
+    word-wrap: break-word;
+    text-align: left;
+    line-height: 28px;
+    color: #7e7e7e;
+    font-size: 12px;
+    white-space: pre;
+    box-sizing: border-box;
+    height: 1px;
+    background-color: #000;
+    opacity: 0.3;
+    position: absolute;
+    right: 5px;
+    bottom: 5px;
+    width: 70px;
+    z-index: 10;
+  }
+
+  :deep(.ed-input-number.is-controls-right .ed-input__inner) {
+    padding-right: 20px;
+  }
+
+  .ed-input-number {
+    line-height: 26px;
+    height: 26px;
+  }
+
+  :deep(.ed-select) {
+    :deep(.ed-input__suffix-inner) {
+      height: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      .ed-input__icon {
+        height: auto;
+      }
+    }
+  }
+
+  :deep(.ed-input__wrapper) {
+    background-color: #f8f8fa;
+    border: none;
+    border-radius: 0;
+    box-shadow: none;
+    height: 26px;
+    font-family: var(--de-custom_font, 'PingFang');
+    word-wrap: break-word;
+    text-align: left;
+    color: rgba(0, 0, 0, 0.65);
+    font-size: 12px;
+    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;
+  }
+  :deep(.ed-select .ed-input.is-focus .ed-input__wrapper),
+  :deep(.ed-select:hover:not(.ed-select--disabled) .ed-input__wrapper),
+  :deep(.ed-select .ed-input__wrapper.is-focus) {
+    box-shadow: none !important;
+  }
+
+  i {
+    margin-left: 5px;
+    color: #7e7e7e;
+  }
+}
+.filed:hover {
+  background-color: #e9eaef;
+  :deep(.ed-input-number__decrease),
+  :deep(.ed-input-number__increase) {
+    display: flex;
+  }
+}
+</style>
+
+<style lang="less">
+.de-el-dropdown-menu {
+  .dimension {
+    max-height: 200px;
+    padding: 0;
+    overflow-y: auto;
+    li {
+      list-style: none;
+      box-sizing: border-box;
+      display: flex;
+      align-items: center;
+      white-space: nowrap;
+      cursor: pointer;
+      transition: color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1),
+        border-color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1),
+        background 0.3s cubic-bezier(0.645, 0.045, 0.355, 1),
+        padding 0.15s cubic-bezier(0.645, 0.045, 0.355, 1);
+      position: relative;
+      overflow: hidden;
+      font-size: 12px;
+      text-overflow: ellipsis;
+      padding: 0 16px 0 28px;
+      line-height: 32px;
+      height: 32px;
+      margin: 0;
+      padding-left: 16px;
+      color: rgba(0, 0, 0, 0.65);
+      .ed-icon {
+        margin-right: 5px;
+      }
+    }
+    li:hover {
+      color: #2e74ff;
+      background-color: #f0f7ff;
+    }
+  }
+
+  .ed-input {
+    font-family: inherit;
+    overflow: visible;
+    box-sizing: border-box;
+    margin: 0;
+    font-variant: tabular-nums;
+    list-style: none;
+    font-feature-settings: 'tnum';
+    display: inline-block;
+    width: 100%;
+    height: 28px;
+    padding: 4px 7px;
+    color: rgba(0, 0, 0, 0.65);
+    font-size: 12px;
+    line-height: 28px;
+    background-color: #fff;
+    background-image: none;
+    transition: all 0.3s;
+    touch-action: manipulation;
+    text-overflow: ellipsis;
+    position: relative;
+    text-align: inherit;
+    min-height: 100%;
+    border: 0;
+    border-radius: 0;
+    padding-left: 26px;
+
+    .ed-input__wrapper {
+      box-shadow: none;
+      border-bottom: 1px solid #e5e5e5;
+      &:focus {
+        box-shadow: 0 0 0 2px rgb(46 116 255 / 20%);
+        border-right-width: 1px !important;
+        outline: 0;
+        border-color: none;
+      }
+    }
+  }
+
+  .ed-input {
+    font-family: var(--de-custom_font, 'PingFang');
+    box-sizing: border-box;
+    margin: 0;
+    color: rgba(0, 0, 0, 0.65);
+    font-size: 12px;
+    font-variant: tabular-nums;
+    line-height: 1.5;
+    list-style: none;
+    font-feature-settings: 'tnum';
+    position: relative;
+    display: inline-block;
+    width: 100%;
+    text-align: start;
+    padding: 0 6px;
+  }
+}
+
+.de-el-dropdown-menu-fixed {
+  padding: 0 !important;
+  border: none !important;
+  .de-panel {
+    color: rgba(0, 0, 0, 0.65);
+    font-size: 12px;
+    box-sizing: border-box;
+    position: relative;
+    padding: 0;
+    width: 360px;
+    max-width: 600px;
+    min-height: 30px;
+    background-color: #fff;
+    box-shadow: none;
+    border: 1px solid rgba(0, 0, 0, 0.05);
+    .mod-left {
+      font-family: var(--de-custom_font, 'PingFang');
+      color: rgba(0, 0, 0, 0.65);
+      font-size: 12px;
+      vertical-align: top;
+      padding: 5px;
+      width: 50%;
+      height: 300px;
+      float: left;
+      box-sizing: border-box;
+      .ed-input__wrapper {
+        font-family: inherit;
+        overflow: visible;
+        box-sizing: border-box;
+        margin: 0;
+        position: relative;
+        display: inline-block;
+        color: rgba(0, 0, 0, 0.65);
+        font-size: 12px;
+        line-height: 28px;
+        background-color: #fff;
+        background-image: none;
+        border-radius: 2px;
+        transition: all 0.3s;
+        -webkit-appearance: none;
+        touch-action: manipulation;
+        text-overflow: ellipsis;
+        width: 100%;
+        border-bottom: 1px solid hsla(0, 0%, 59%, 0.1);
+        border: 1px solid hsla(0, 0%, 59%, 0.1);
+        height: 30px;
+        padding: 0 8px;
+        outline: 0;
+
+        &:focus {
+          box-shadow: 0 0 0 2px rgb(46 116 255 / 20%);
+          border-right-width: 1px !important;
+          outline: 0;
+          border-color: none;
+        }
+      }
+    }
+
+    .right-de {
+      border-left: 1px solid hsla(0, 0%, 59%, 0.1);
+    }
+    .autochecker-list {
+      font-family: var(--de-custom_font, 'PingFang');
+      color: rgba(0, 0, 0, 0.65);
+      box-sizing: border-box;
+      width: 100%;
+      overflow: hidden;
+      overflow-y: auto;
+      height: 221px;
+      position: relative;
+      padding: 0;
+
+      li {
+        direction: ltr;
+        padding: 0 5px;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        color: #333;
+        white-space: nowrap;
+        list-style: none;
+        line-height: 28px;
+        height: 28px;
+        width: 100%;
+        position: relative;
+        box-sizing: border-box;
+
+        &:hover {
+          background-color: #f8f8fa;
+          color: #2153d4;
+          opacity: 1;
+          span {
+            display: block;
+          }
+        }
+
+        i {
+          color: #333;
+          font-size: 12px;
+          cursor: pointer;
+          vertical-align: top;
+          line-height: 28px;
+          height: 28px;
+          display: inline-block;
+          opacity: 0;
+        }
+
+        label {
+          font-family: var(--de-custom_font, 'PingFang');
+          font-size: 12px;
+          direction: ltr;
+          color: #333;
+          box-sizing: border-box;
+          touch-action: manipulation;
+          width: 87%;
+          height: 28px;
+          line-height: 14px;
+          padding: 8px 20px;
+          cursor: pointer;
+          display: inline-block;
+          position: relative;
+          white-space: nowrap;
+          text-overflow: ellipsis;
+          overflow: hidden;
+        }
+
+        span {
+          display: none;
+          position: absolute;
+          width: 14px;
+          height: 14px;
+          line-height: 11px;
+          top: 6px;
+          right: 5px;
+          font-size: 15px;
+          cursor: pointer;
+          background: #2153d4;
+          color: #fff;
+          text-align: center;
+          border-radius: 999px;
+        }
+      }
+    }
+
+    .select-all {
+      box-sizing: border-box;
+      margin: 0;
+      overflow: visible;
+      position: relative;
+      font-weight: 400;
+      white-space: nowrap;
+      border: 1px solid transparent;
+      transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+      user-select: none;
+      touch-action: manipulation;
+      padding: 0 15px;
+      font-size: 12px;
+      outline: 0;
+      color: #fff;
+      border-color: #2e74ff;
+      text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.12);
+      box-shadow: 0 2px 0 rgba(0, 0, 0, 0.045);
+      align-items: center;
+      justify-content: center;
+      line-height: 1;
+      -webkit-appearance: button;
+      cursor: pointer;
+      border-radius: 0;
+      background: #2153d4;
+      padding-left: 5px;
+      text-align: center;
+      display: inline-block;
+      width: 100%;
+      height: 25px;
+
+      &:hover {
+        border: 1px solid transparent;
+        background: #4794ff;
+        color: #fff;
+      }
+    }
+
+    .right-top {
+      color: rgba(0, 0, 0, 0.65);
+      text-align: left;
+      box-sizing: border-box;
+      zoom: 1;
+      border-bottom: 1px solid #f8f8fa;
+      height: 30px;
+      width: 100%;
+      font-size: 12px;
+      line-height: 35px;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+
+      .right-btn {
+        color: rgba(0, 0, 0, 0.65);
+        font-size: 12px;
+        box-sizing: border-box;
+        position: relative;
+        z-index: 10;
+        float: right;
+        cursor: pointer;
+        line-height: 25px;
+        padding: 0 5px;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        background: rgba(70, 140, 255, 0.1);
+        width: 75px;
+      }
+    }
+
+    .right-menu-foot {
+      color: rgba(0, 0, 0, 0.65);
+      font-size: 12px;
+      box-sizing: border-box;
+      height: 30px;
+      text-align: right;
+      line-height: 30px;
+      margin-top: 5px;
+      border-top: 1px solid hsla(0, 0%, 59%, 0.1);
+
+      .footer-left {
+        box-sizing: border-box;
+        float: left;
+      }
+
+      .footer-right {
+        float: right;
+        padding-left: 10px;
+        cursor: pointer;
+      }
+
+      .confirm-btn {
+        box-sizing: border-box;
+        position: relative;
+        font-weight: 400;
+        white-space: nowrap;
+        text-align: center;
+        background-image: none;
+        border: 1px solid transparent;
+        transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+        user-select: none;
+        touch-action: manipulation;
+        height: 28px;
+        padding: 0 15px;
+        font-size: 12px;
+        border-radius: 2px;
+        outline: 0;
+        color: #fff;
+        background-color: #2e74ff;
+        border-color: #2e74ff;
+        text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.12);
+        box-shadow: 0 2px 0 rgba(0, 0, 0, 0.045);
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        line-height: 1;
+        -webkit-appearance: button;
+        cursor: pointer;
+      }
+    }
+  }
+}
+
+.de-el-dropdown-menu-manu {
+  padding: 0;
+  margin: 5px 0;
+  background-color: #fff;
+  border: 1px solid #ebeef5;
+  border-radius: 4px;
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  margin-top: 12px;
+  position: absolute;
+  top: 20px;
+  width: 150px;
+  box-sizing: border-box;
+  right: 0;
+  .text-area {
+    box-sizing: border-box;
+    height: 220px;
+    position: relative;
+    .input {
+      touch-action: manipulation;
+      overflow: auto;
+      resize: vertical;
+      box-sizing: border-box;
+      position: relative;
+      display: inline-block;
+      color: rgba(0, 0, 0, 0.65);
+      font-size: 12px;
+      background-color: #fff;
+      background-image: none;
+      max-width: 100%;
+      min-height: 28px;
+      line-height: 1.5;
+      vertical-align: bottom;
+      transition: all 0.3s, height 0s;
+      text-overflow: ellipsis;
+      outline: 0;
+      padding: 5px 5px 28px;
+      width: 100%;
+      height: 220px;
+      border-radius: 0;
+      border: none;
+      box-shadow: 0 2px 6px 0 rgba(130, 150, 183, 0.72);
+    }
+
+    .text-area-btn {
+      position: absolute;
+      width: 100%;
+      text-align: center;
+      background: #fff;
+      bottom: -1px;
+      padding-bottom: 4px;
+
+      .btn {
+        font-weight: 400;
+        text-align: center;
+        box-shadow: 0 2px 0 rgba(0, 0, 0, 0.015);
+        transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+        user-select: none;
+        touch-action: manipulation;
+        height: 28px;
+        padding: 0 15px;
+        font-size: 12px;
+        color: rgba(0, 0, 0, 0.65);
+        background-color: #fff;
+        outline: 0;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        line-height: 1;
+        -webkit-appearance: button;
+        cursor: pointer;
+        border-radius: 0;
+        width: 70px;
+        border: 1px solid rgba(33, 83, 212, 0.9);
+      }
+
+      .right-add {
+        background: #2153d4;
+        color: #fff;
+      }
+    }
+  }
+}
+
+.clearfix:after {
+  content: '020';
+  display: block;
+  height: 0;
+  clear: both;
+  visibility: hidden;
+}
+
+.clearfix {
+  /* 触发 hasLayout */
+  zoom: 1;
+}
+</style>
diff --git a/core/core-frontend/src/views/chart/components/editor/filter/auth-tree-chart/RowAuth.vue b/core/core-frontend/src/views/chart/components/editor/filter/auth-tree-chart/RowAuth.vue
new file mode 100644
index 0000000000..62b70de1f6
--- /dev/null
+++ b/core/core-frontend/src/views/chart/components/editor/filter/auth-tree-chart/RowAuth.vue
@@ -0,0 +1,447 @@
+<script lang="ts" setup>
+import { ref, computed } from 'vue'
+import { useI18n } from '@/hooks/web/useI18n'
+import AuthTree from './AuthTree.vue'
+
+const { t } = useI18n()
+
+const errorMessage = ref('')
+const logic = ref<'or' | 'and'>('or')
+const relationList = ref([])
+
+const svgRealinePath = computed(() => {
+  const lg = relationList.value.length
+  let a = { x: 0, y: 0, child: relationList.value }
+  a.y = Math.floor(dfsXY(a, 0) / 2)
+  if (!lg) return ''
+  let path = calculateDepth(a)
+  return path
+})
+
+const svgDashinePath = computed(() => {
+  const lg = relationList.value.length
+  let a = { x: 0, y: 0, child: relationList.value }
+  a.y = Math.floor(dfsXY(a, 0) / 2)
+  if (!lg) return `M48 20 L68 20`
+  let path = calculateDepthDash(a)
+  return path
+})
+
+const init = expressionTree => {
+  const { items } = expressionTree
+  logic.value = expressionTree.logic || 'or'
+  relationList.value = dfsInit(items || [])
+}
+const submit = () => {
+  errorMessage.value = ''
+  emits('save', {
+    logic: logic.value,
+    items: dfsSubmit(relationList.value),
+    errorMessage: errorMessage.value
+  })
+}
+const errorDetected = ({
+  enumValue,
+  deType,
+  filterType,
+  term,
+  value,
+  name,
+  timeValue,
+  filterTypeTime
+}) => {
+  if (!name) {
+    errorMessage.value = t('data_set.cannot_be_empty_')
+    return
+  }
+  if (filterType === 'logic') {
+    if (!term) {
+      errorMessage.value = t('data_set.cannot_be_empty_de_ruler')
+      return
+    }
+    if (
+      !term.includes('null') &&
+      !term.includes('empty') &&
+      ['', null, undefined].includes(value) &&
+      deType !== 1
+    ) {
+      errorMessage.value = t('chart.filter_value_can_null')
+      return
+    }
+
+    if (
+      !term.includes('null') &&
+      !term.includes('empty') &&
+      ['', null, undefined].includes(timeValue) &&
+      deType === 1 &&
+      filterTypeTime === 'dynamicDate'
+    ) {
+      errorMessage.value = t('chart.filter_value_can_null')
+      return
+    }
+    if ([2, 3].includes(deType)) {
+      if (parseFloat(value).toString() === 'NaN') {
+        errorMessage.value = t('chart.filter_value_can_not_str')
+        return
+      }
+    }
+  }
+  if (filterType === 'enum') {
+    if (enumValue.length < 1) {
+      errorMessage.value = t('chart.enum_value_can_not_null')
+      return
+    }
+  }
+}
+
+const getTimeValue = dynamicTimeSetting => {
+  const relativeToCurrentTypeMap = {
+    year: '年',
+    month: '月',
+    date: '日',
+    datetime: '日'
+  }
+  let timeValue = ''
+  const {
+    timeGranularity,
+    timeNum,
+    relativeToCurrentType,
+    around,
+    arbitraryTime,
+    relativeToCurrent
+  } = dynamicTimeSetting || {}
+  if (relativeToCurrent !== 'custom') {
+    timeValue = [
+      {
+        label: '今年',
+        value: 'thisYear'
+      },
+      {
+        label: '去年',
+        value: 'lastYear'
+      },
+      {
+        label: '本月',
+        value: 'thisMonth'
+      },
+      {
+        label: '上月',
+        value: 'lastMonth'
+      },
+      {
+        label: '今天',
+        value: 'today'
+      },
+      {
+        label: '昨天',
+        value: 'yesterday'
+      },
+      {
+        label: '月初',
+        value: 'monthBeginning'
+      },
+      {
+        label: '年初',
+        value: 'yearBeginning'
+      }
+    ].find(ele => ele.value === relativeToCurrent)?.label
+    return timeValue
+  }
+  timeValue = `${timeNum}${relativeToCurrentTypeMap[relativeToCurrentType]}${
+    around === 'f' ? '前' : '后'
+  }`
+  if (timeGranularity === 'datetime') {
+    timeValue += new Date(arbitraryTime).toLocaleString().split(' ')[1]
+  }
+
+  return timeValue
+}
+const dfsInit = arr => {
+  const elementList = []
+  arr.forEach(ele => {
+    const { subTree } = ele
+    if (subTree) {
+      const { items = [], logic } = subTree
+      const child = dfsInit(items)
+      elementList.push({ logic, child })
+    } else {
+      const {
+        enumValue,
+        filterTypeTime,
+        dynamicTimeSetting,
+        fieldId,
+        filterType,
+        term,
+        value,
+        field
+      } = ele
+      const { name, deType } = field || {}
+      elementList.push({
+        enumValue: enumValue.join(','),
+        fieldId,
+        filterType,
+        term,
+        timeValue: getTimeValue(dynamicTimeSetting),
+        filterTypeTime,
+        dynamicTimeSetting,
+        value,
+        name,
+        deType
+      })
+    }
+  })
+  return elementList
+}
+const dfsSubmit = arr => {
+  const items = []
+  arr.forEach(ele => {
+    const { child = [] } = ele
+    if (child.length) {
+      const { logic } = ele
+      const subTree = dfsSubmit(child)
+      items.push({
+        enumValue: [],
+        fieldId: '',
+        filterType: '',
+        term: '',
+        type: 'tree',
+        value: '',
+        filterTypeTime: 'dateValue',
+        timeValue: '',
+        dynamicTimeSetting: {},
+        subTree: { logic, items: subTree }
+      })
+    } else {
+      const {
+        enumValue,
+        filterTypeTime,
+        dynamicTimeSetting,
+        fieldId,
+        filterType,
+        deType,
+        term,
+        value,
+        name,
+        timeValue
+      } = ele
+      errorDetected({ deType, enumValue, filterType, term, value, name, timeValue, filterTypeTime })
+      if (fieldId) {
+        items.push({
+          enumValue: enumValue ? enumValue.split(',') : [],
+          fieldId,
+          timeValue,
+          filterType,
+          filterTypeTime,
+          dynamicTimeSetting,
+          term,
+          value,
+          type: 'item',
+          subTree: null
+        })
+      }
+    }
+  })
+  return items
+}
+const removeRelationList = () => {
+  relationList.value = []
+}
+const getY = arr => {
+  const [a] = arr
+  if (a.child?.length) {
+    return getY(a.child)
+  }
+  return a.y
+}
+const calculateDepthDash = obj => {
+  const lg = obj.child?.length
+  let path = ''
+  if (!lg && Array.isArray(obj.child)) {
+    const { x, y } = obj
+    path += `M${48 + x * 68} ${y * 41.4 + 20} L${88 + x * 68} ${y * 41.4 + 20}`
+  } else if (obj.child?.length) {
+    let y = Math.max(dfsY(obj, 0), dfs(obj.child, 0) + getY(obj.child) - 1)
+    let parent = (dfs(obj.child, 0) * 41.4) / 2 + (getY(obj.child) || 0) * 41.4
+    const { x } = obj
+    path += `M${24 + x * 68} ${parent} L${24 + x * 68} ${y * 41.4 + 20} L${64 + x * 68} ${
+      y * 41.4 + 20
+    }`
+    obj.child.forEach(item => {
+      path += calculateDepthDash(item)
+    })
+  }
+
+  return path
+}
+const calculateDepth = obj => {
+  const lg = obj.child.length
+  if (!lg) return ''
+  let path = ''
+  const { x: depth, y } = obj
+  obj.child.forEach((item, index) => {
+    const { y: sibingLg, z } = item
+    if (item.child?.length) {
+      let parent = (dfs(obj.child, 0) * 41.4) / 2 + (getY(obj.child) || 0) * 41.4
+      let children = (dfs(item.child, 0) * 41.4) / 2 + getY(item.child) * 41.4
+      let path1 = 0
+      let path2 = 0
+      if (parent < children) {
+        path1 = parent
+        path2 = children
+      } else {
+        ;[path1, path2] = [children, parent]
+      }
+      if (y >= sibingLg) {
+        path1 = parent
+        path2 = children
+      }
+      path += `M${24 + depth * 68} ${path1} L${24 + depth * 68} ${path2} L${
+        68 + depth * 68
+      } ${path2}`
+      path += calculateDepth(item)
+    }
+    if (!item.child?.length) {
+      if (sibingLg >= y) {
+        path += `M${24 + depth * 68} ${y * 40} L${24 + depth * 68} ${
+          (sibingLg + 1) * 41.4 - 20.69921875
+        } L${68 + depth * 68} ${(sibingLg + 1) * 41.4 - 20.69921875}`
+      } else {
+        path += `M${24 + depth * 68} ${
+          (sibingLg +
+            (lg === 1 && index === 0 ? 0 : 1) +
+            (obj.child[index + 1]?.child?.length ? y - sibingLg - 1 : 0)) *
+            41.4 +
+          20 +
+          (lg === 1 && index === 0 ? 26 : 0)
+        } L${24 + depth * 68} ${
+          (sibingLg + 1) * 41.4 - 20.69921875 - (lg === 1 && index === 0 ? (z || 0) * 1.4 : 0)
+        } L${68 + depth * 68} ${
+          (sibingLg + 1) * 41.4 - 20.69921875 - (lg === 1 && index === 0 ? (z || 0) * 1.4 : 0)
+        }`
+      }
+    }
+  })
+  return path
+}
+const changeAndOrDfs = (arr, logic) => {
+  arr.forEach(ele => {
+    if (ele.child) {
+      ele.logic = logic === 'and' ? 'or' : 'and'
+      changeAndOrDfs(ele.child, ele.logic)
+    }
+  })
+}
+const dfs = (arr, count) => {
+  arr.forEach(ele => {
+    if (ele.child?.length) {
+      count = dfs(ele.child, count)
+    } else {
+      count += 1
+    }
+  })
+  count += 1
+  return count
+}
+const dfsY = (obj, count) => {
+  obj.child.forEach(ele => {
+    if (ele.child?.length) {
+      count = dfsY(ele, count)
+    } else {
+      count = Math.max(count, ele.y, obj.y)
+    }
+  })
+  return count
+}
+const dfsXY = (obj, count) => {
+  obj.child.forEach(ele => {
+    ele.x = obj.x + 1
+    if (ele.child?.length) {
+      let l = dfs(ele.child, 0)
+      ele.y = Math.floor(l / 2) + count
+      count = dfsXY(ele, count)
+    } else {
+      count += 1
+      ele.y = count - 1
+    }
+  })
+  count += 1
+  return count
+}
+const addCondReal = (type, logic) => {
+  relationList.value.push(
+    type === 'condition'
+      ? {
+          fieldId: '',
+          value: '',
+          enumValue: '',
+          term: '',
+          filterType: 'logic',
+          name: '',
+          timeValue: '',
+          filterTypeTime: 'dateValue',
+          dynamicTimeSetting: {},
+          deType: ''
+        }
+      : { child: [], logic }
+  )
+}
+const del = index => {
+  relationList.value.splice(index, 1)
+}
+
+defineExpose({
+  init,
+  submit
+})
+const emits = defineEmits(['save'])
+</script>
+
+<template>
+  <div class="rowAuth">
+    <auth-tree
+      @del="idx => del(idx)"
+      @addCondReal="addCondReal"
+      @removeRelationList="removeRelationList"
+      @changeAndOrDfs="type => changeAndOrDfs(relationList, type)"
+      :relationList="relationList"
+      v-model:logic="logic"
+    />
+    <svg width="388" height="100%" class="real-line">
+      <path
+        stroke-linejoin="round"
+        stroke-linecap="round"
+        :d="svgRealinePath"
+        fill="none"
+        stroke="#CCCCCC"
+        stroke-width="0.5"
+      ></path>
+    </svg>
+    <svg width="388" height="100%" class="dash-line">
+      <path
+        stroke-linejoin="round"
+        stroke-linecap="round"
+        :d="svgDashinePath"
+        fill="none"
+        stroke="#CCCCCC"
+        stroke-width="0.5"
+        stroke-dasharray="4,4"
+      ></path>
+    </svg>
+  </div>
+</template>
+
+<style lang="less" scoped>
+.rowAuth {
+  font-family: Avenir, Helvetica, Arial, sans-serif;
+  text-align: center;
+  color: #2c3e50;
+  position: relative;
+}
+.real-line,
+.dash-line {
+  position: absolute;
+  top: 0;
+  left: 0;
+  user-select: none;
+}
+</style>
diff --git a/core/core-frontend/src/views/chart/components/editor/filter/auth-tree/FilterFiled.vue b/core/core-frontend/src/views/chart/components/editor/filter/auth-tree/FilterFiled.vue
index 3ce9582533..f2e64514d4 100644
--- a/core/core-frontend/src/views/chart/components/editor/filter/auth-tree/FilterFiled.vue
+++ b/core/core-frontend/src/views/chart/components/editor/filter/auth-tree/FilterFiled.vue
@@ -3,8 +3,6 @@ import icon_searchOutline_outlined from '@/assets/svg/icon_search-outline_outlin
 import icon_deleteTrash_outlined from '@/assets/svg/icon_delete-trash_outlined.svg'
 import { ref, inject, computed, watch, onBeforeMount, toRefs, nextTick } from 'vue'
 import { useI18n } from '@/hooks/web/useI18n'
-import type { SelectConfig } from '../TimeDialog.vue'
-import TimeDialog from '@/views/chart/components/editor/filter/TimeDialog.vue'
 import { multFieldValuesForPermissions } from '@/api/dataset'
 import {
   textOptions,
@@ -23,9 +21,7 @@ export interface Item {
   enumValue: string
   name: string
   value: number
-  filterTypeTime?: string
   timeValue: string
-  dynamicTimeSetting?: SelectConfig
 }
 
 type Props = {
@@ -42,9 +38,7 @@ const props = withDefaults(defineProps<Props>(), {
     deType: 0,
     enumValue: '',
     name: '',
-    filterTypeTime: 'dateValue',
     value: null,
-    dynamicTimeSetting: null,
     timeValue: ''
   })
 })
@@ -175,80 +169,6 @@ const initEnumOptions = () => {
   }
 }
 
-const dialogVisible = ref(false)
-const timeDialog = ref()
-const handleClick = () => {
-  dialogVisible.value = true
-  nextTick(() => {
-    timeDialog.value.init(item.value.dynamicTimeSetting || {})
-  })
-}
-
-const relativeToCurrentTypeMap = {
-  year: '年',
-  month: '月',
-  date: '日',
-  datetime: '日'
-}
-
-const confirmTimeSelect = () => {
-  item.value.dynamicTimeSetting = { ...timeDialog.value.curComponent }
-  const {
-    timeGranularity,
-    timeNum,
-    relativeToCurrentType,
-    around,
-    arbitraryTime,
-    relativeToCurrent
-  } = item.value.dynamicTimeSetting
-  if (relativeToCurrent !== 'custom') {
-    item.value.timeValue = [
-      {
-        label: '今年',
-        value: 'thisYear'
-      },
-      {
-        label: '去年',
-        value: 'lastYear'
-      },
-      {
-        label: '本月',
-        value: 'thisMonth'
-      },
-      {
-        label: '上月',
-        value: 'lastMonth'
-      },
-      {
-        label: '今天',
-        value: 'today'
-      },
-      {
-        label: '昨天',
-        value: 'yesterday'
-      },
-      {
-        label: '月初',
-        value: 'monthBeginning'
-      },
-      {
-        label: '年初',
-        value: 'yearBeginning'
-      }
-    ].find(ele => ele.value === relativeToCurrent).label
-    dialogVisible.value = false
-    return
-  }
-  item.value.timeValue = `${timeNum}${relativeToCurrentTypeMap[relativeToCurrentType]}${
-    around === 'f' ? '前' : '后'
-  }`
-  if (timeGranularity === 'datetime') {
-    item.value.timeValue += new Date(arbitraryTime).toLocaleString().split(' ')[1]
-  }
-
-  dialogVisible.value = false
-}
-
 const optionData = data => {
   if (!data) return null
   return data.filter(item => !!item)
@@ -272,9 +192,7 @@ const selectItem = ({ name, id, deType }) => {
     enumValue: '',
     value: '',
     term: '',
-    filterTypeTime: 'dateValue',
-    timeValue: '',
-    dynamicTimeSetting: {}
+    timeValue: ''
   })
   filterListInit(deType)
   checklist.value = []
@@ -296,16 +214,6 @@ const filterListInit = deType => {
   }
 }
 
-const filterListTime = [
-  {
-    value: 'dateValue',
-    label: '固定值'
-  },
-  {
-    value: 'dynamicDate',
-    label: '动态值'
-  }
-]
 const clearAll = () => {
   checklist.value = []
 }
@@ -394,42 +302,22 @@ const emits = defineEmits(['update:item', 'del'])
         </template>
       </el-dropdown>
       <div class="white-nowrap flex-align-center" style="position: relative" v-if="item.fieldId">
-        <template v-if="item.deType !== 1">
-          <span class="filed-title">{{ t('auth.screen_method') }}</span>
-          <el-select
-            size="small"
-            @change="filterTypeChange"
-            v-model="item.filterType"
-            :placeholder="t('auth.select')"
+        <span class="filed-title">{{ t('auth.screen_method') }}</span>
+        <el-select
+          size="small"
+          @change="filterTypeChange"
+          v-model="item.filterType"
+          :placeholder="t('auth.select')"
+        >
+          <el-option
+            v-for="ele in filterList"
+            :key="ele.value"
+            :label="ele.label"
+            :value="ele.value"
           >
-            <el-option
-              v-for="ele in filterList"
-              :key="ele.value"
-              :label="ele.label"
-              :value="ele.value"
-            >
-            </el-option>
-          </el-select>
-          <span class="filed-title">{{ t('auth.fixed_value') }}</span>
-        </template>
-        <template v-else>
-          <el-select
-            size="small"
-            class="w100"
-            style="margin-left: 16px"
-            @change="filterTypeChangeTime"
-            v-model="item.filterTypeTime"
-            :placeholder="t('auth.select')"
-          >
-            <el-option
-              v-for="ele in filterListTime"
-              :key="ele.value"
-              :label="ele.label"
-              :value="ele.value"
-            >
-            </el-option>
-          </el-select>
-        </template>
+          </el-option>
+        </el-select>
+        <span class="filed-title">{{ t('auth.fixed_value') }}</span>
         <template v-if="item.filterType === 'logic'">
           <el-select
             class="w100"
@@ -473,26 +361,13 @@ const emits = defineEmits(['update:item', 'del'])
             <div class="bottom-line"></div>
           </template>
           <template v-else-if="!['null', 'empty', 'not_null', 'not_empty'].includes(item.term)">
-            <el-input
-              v-if="item.deType === 1 && item.filterTypeTime === 'dynamicDate' && !item.timeValue"
-              @click="handleClick"
-              readonly
-              class="w70 mar5"
-              size="small"
-              v-model="item.timeValue"
-            />
             <el-tooltip
               class="item"
-              v-else-if="item.deType === 1 && item.filterTypeTime === 'dynamicDate'"
+              v-if="item.deType === 1"
               effect="light"
               :content="item.timeValue"
               placement="top"
-              ><el-input
-                @click="handleClick"
-                readonly
-                class="w70 mar5"
-                size="small"
-                v-model="item.timeValue"
+              ><el-input class="w70 mar5" size="small" v-model="item.timeValue"
             /></el-tooltip>
             <el-input v-else class="w70 mar5" size="small" v-model="item.value" />
             <div class="bottom-line"></div>
@@ -607,21 +482,6 @@ const emits = defineEmits(['update:item', 'del'])
         /></Icon>
       </el-icon>
     </div>
-    <el-dialog
-      class="create-dialog"
-      append-to-body
-      v-model="dialogVisible"
-      title="日期设置"
-      width="420"
-    >
-      <TimeDialog ref="timeDialog"></TimeDialog>
-      <template #footer>
-        <div class="dialog-footer">
-          <el-button @click="dialogVisible = false">取消</el-button>
-          <el-button type="primary" @click="confirmTimeSelect"> 确定 </el-button>
-        </div>
-      </template>
-    </el-dialog>
   </div>
 </template>
 
diff --git a/core/core-frontend/src/views/chart/components/editor/filter/auth-tree/RowAuth.vue b/core/core-frontend/src/views/chart/components/editor/filter/auth-tree/RowAuth.vue
index 62b70de1f6..b26e407bcb 100644
--- a/core/core-frontend/src/views/chart/components/editor/filter/auth-tree/RowAuth.vue
+++ b/core/core-frontend/src/views/chart/components/editor/filter/auth-tree/RowAuth.vue
@@ -40,16 +40,7 @@ const submit = () => {
     errorMessage: errorMessage.value
   })
 }
-const errorDetected = ({
-  enumValue,
-  deType,
-  filterType,
-  term,
-  value,
-  name,
-  timeValue,
-  filterTypeTime
-}) => {
+const errorDetected = ({ enumValue, deType, filterType, term, value, name, timeValue }) => {
   if (!name) {
     errorMessage.value = t('data_set.cannot_be_empty_')
     return
@@ -73,8 +64,7 @@ const errorDetected = ({
       !term.includes('null') &&
       !term.includes('empty') &&
       ['', null, undefined].includes(timeValue) &&
-      deType === 1 &&
-      filterTypeTime === 'dynamicDate'
+      deType === 1
     ) {
       errorMessage.value = t('chart.filter_value_can_null')
       return
@@ -94,68 +84,6 @@ const errorDetected = ({
   }
 }
 
-const getTimeValue = dynamicTimeSetting => {
-  const relativeToCurrentTypeMap = {
-    year: '年',
-    month: '月',
-    date: '日',
-    datetime: '日'
-  }
-  let timeValue = ''
-  const {
-    timeGranularity,
-    timeNum,
-    relativeToCurrentType,
-    around,
-    arbitraryTime,
-    relativeToCurrent
-  } = dynamicTimeSetting || {}
-  if (relativeToCurrent !== 'custom') {
-    timeValue = [
-      {
-        label: '今年',
-        value: 'thisYear'
-      },
-      {
-        label: '去年',
-        value: 'lastYear'
-      },
-      {
-        label: '本月',
-        value: 'thisMonth'
-      },
-      {
-        label: '上月',
-        value: 'lastMonth'
-      },
-      {
-        label: '今天',
-        value: 'today'
-      },
-      {
-        label: '昨天',
-        value: 'yesterday'
-      },
-      {
-        label: '月初',
-        value: 'monthBeginning'
-      },
-      {
-        label: '年初',
-        value: 'yearBeginning'
-      }
-    ].find(ele => ele.value === relativeToCurrent)?.label
-    return timeValue
-  }
-  timeValue = `${timeNum}${relativeToCurrentTypeMap[relativeToCurrentType]}${
-    around === 'f' ? '前' : '后'
-  }`
-  if (timeGranularity === 'datetime') {
-    timeValue += new Date(arbitraryTime).toLocaleString().split(' ')[1]
-  }
-
-  return timeValue
-}
 const dfsInit = arr => {
   const elementList = []
   arr.forEach(ele => {
@@ -165,25 +93,14 @@ const dfsInit = arr => {
       const child = dfsInit(items)
       elementList.push({ logic, child })
     } else {
-      const {
-        enumValue,
-        filterTypeTime,
-        dynamicTimeSetting,
-        fieldId,
-        filterType,
-        term,
-        value,
-        field
-      } = ele
+      const { enumValue, fieldId, filterType, term, value, timeValue, field } = ele
       const { name, deType } = field || {}
       elementList.push({
         enumValue: enumValue.join(','),
         fieldId,
         filterType,
         term,
-        timeValue: getTimeValue(dynamicTimeSetting),
-        filterTypeTime,
-        dynamicTimeSetting,
+        timeValue,
         value,
         name,
         deType
@@ -206,33 +123,18 @@ const dfsSubmit = arr => {
         term: '',
         type: 'tree',
         value: '',
-        filterTypeTime: 'dateValue',
         timeValue: '',
-        dynamicTimeSetting: {},
         subTree: { logic, items: subTree }
       })
     } else {
-      const {
-        enumValue,
-        filterTypeTime,
-        dynamicTimeSetting,
-        fieldId,
-        filterType,
-        deType,
-        term,
-        value,
-        name,
-        timeValue
-      } = ele
-      errorDetected({ deType, enumValue, filterType, term, value, name, timeValue, filterTypeTime })
+      const { enumValue, fieldId, filterType, deType, term, value, name, timeValue } = ele
+      errorDetected({ deType, enumValue, filterType, term, value, name, timeValue })
       if (fieldId) {
         items.push({
           enumValue: enumValue ? enumValue.split(',') : [],
           fieldId,
           timeValue,
           filterType,
-          filterTypeTime,
-          dynamicTimeSetting,
           term,
           value,
           type: 'item',
@@ -378,8 +280,6 @@ const addCondReal = (type, logic) => {
           filterType: 'logic',
           name: '',
           timeValue: '',
-          filterTypeTime: 'dateValue',
-          dynamicTimeSetting: {},
           deType: ''
         }
       : { child: [], logic }