更新前端src/views/custom-component目录文件

2025-06-24 10:05:47 +08:00 · 2025-06-24 10:05:47 +08:00 · 092b51445a
commit 092b51445a
parent f2582cb0d0
46 changed files with 1438 additions and 510 deletions
--- a/core/core-frontend/src/custom-component/common/CarouselSetting.vue
+++ b/core/core-frontend/src/custom-component/common/CarouselSetting.vue
@ -72,7 +72,6 @@ const handleInput = value => {
          <span style="font-size: 12px">{{ t('visualization.carousel_time') }}</span>
          <el-tooltip class="item" :effect="themes" placement="top">
            <template #content>
-              <div>{{ t('visualization.carousel_tips') }}</div>
              <div v-if="element.innerType === 'picture-group'">
                {{ t('visualization.carousel_tips2') }}
              </div>
--- a/core/core-frontend/src/custom-component/common/CommonAttr.vue
+++ b/core/core-frontend/src/custom-component/common/CommonAttr.vue
@ -58,7 +58,7 @@ const onBackgroundChange = val => {
  emits('onAttrChange', { custom: 'commonBackground' })
 }

-const onTitleBackgroundEnableChange = val => {
+const onTitleBackgroundEnableChange = () => {
  snapshotStore.recordSnapshotCacheToMobile('titleBackground')
 }

@ -252,7 +252,7 @@ onMounted(() => {
    }
  }
  :deep(.ed-collapse-item__content) {
-    padding: 16px 8px 0;
+    padding: 16px 8px 8px !important;
    border: none;
  }
  :deep(.ed-form-item) {
--- a/core/core-frontend/src/custom-component/common/CommonBorderSetting.vue
+++ b/core/core-frontend/src/custom-component/common/CommonBorderSetting.vue
@ -83,7 +83,7 @@ watch(

 <template>
  <el-row class="custom-row" style="padding-bottom: 8px">
-    <el-form label-position="top">
+    <el-form size="small" label-position="top">
      <template v-if="isSvgComponent">
        <el-row style="display: flex">
          <el-form-item
@ -93,7 +93,7 @@ watch(
            :class="'form-item-' + themes"
          >
            <el-color-picker
-              :label="t('visualization.color')"
+              :title="t('visualization.color')"
              :disabled="!styleForm.borderActive"
              v-model="styleForm.borderColor"
              class="color-picker-style"
@ -102,7 +102,7 @@ watch(
              show-alpha
              :predefine="state.predefineColors"
              @change="changeStylePre('borderColor')"
-            >{{visualization.color}}
+            >
            </el-color-picker>
          </el-form-item>
          <el-form-item
--- a/core/core-frontend/src/custom-component/common/CommonEvent.vue
+++ b/core/core-frontend/src/custom-component/common/CommonEvent.vue
@ -130,6 +130,11 @@ const typeMap = {
 </template>

 <style scoped lang="less">
+.form-item-light {
+  .ed-radio {
+    margin-right: 3px !important;
+  }
+}
 .form-item-dark {
  .ed-radio {
    margin-right: 3px !important;
--- a/core/core-frontend/src/custom-component/common/CommonStyleSet.vue
+++ b/core/core-frontend/src/custom-component/common/CommonStyleSet.vue
@ -175,8 +175,8 @@
            :class="{ dark: themes === 'dark', active: styleForm.textDecoration === 'underline' }"
            @click="checkTextDecoration"
          >
-            <el-icon style="color: red;">
-              <Icon name="style-underline"><styleUnderline class="svg-icon"/></Icon>
+            <el-icon>
+              <Icon name="style-underline"><styleUnderline class="svg-icon" /></Icon>
            </el-icon>
          </div>
        </el-tooltip>
@ -316,7 +316,7 @@ import styleUnderline from '@/assets/svg/style-underline.svg'
 import icon_leftAlignment_outlined from '@/assets/svg/icon_left-alignment_outlined.svg'
 import icon_centerAlignment_outlined from '@/assets/svg/icon_center-alignment_outlined.svg'
 import icon_rightAlignment_outlined from '@/assets/svg/icon_right-alignment_outlined.svg'
-import { computed, h, reactive, ref, toRefs, watch } from 'vue'
+import { computed, reactive, ref, toRefs, watch } from 'vue'
 import { COLOR_PANEL } from '@/views/chart/components/editor/util/chart'
 import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
 import { useI18n } from '@/hooks/web/useI18n'
@ -685,7 +685,7 @@ watch(
  border-radius: 4px;
  padding-top: 1px;

-  color: #a6a6a6;
+  color: #1f2329;

  cursor: pointer;

@ -727,7 +727,7 @@ watch(
    margin-bottom: 0 !important;
  }
 }
-.custom-row-inner { 
+.custom-row-inner {
  margin: 0 0 16px;
 }

@ -777,4 +777,13 @@ watch(
    background-color: rgba(31, 35, 41, 0.1);
  }
 }
+
+.form-item-dark {
+  :deep(.ed-color-picker__trigger) {
+    border-color: #5f5f5f;
+  }
+  :deep(.ed-color-picker__custom-icon::after) {
+    background-color: #5f5f5f;
+  }
+}
 </style>
--- a/core/core-frontend/src/custom-component/component-group/UserViewGroup.vue
+++ b/core/core-frontend/src/custom-component/component-group/UserViewGroup.vue
@ -1,6 +1,6 @@
 <script setup lang="tsx">
 import { iconChartMap } from '@/components/icon-group/chart-list'
-import { reactive, ref, toRefs } from 'vue'
+import { computed, reactive, ref, toRefs } from 'vue'
 import eventBus from '@/utils/eventBus'
 import { CHART_TYPE_CONFIGS } from '@/views/chart/components/editor/util/chart'
 import Icon from '@/components/icon-custom/src/Icon.vue'
@ -62,6 +62,36 @@ const handleDragEnd = e => {
  commonHandleDragEnd(e, dvModel.value)
 }

+const chartGroupListScroll = computed(() => {
+  return state.chartGroupList.reduce(
+    (pre, next) => {
+      if (next.display !== 'hidden') {
+        const height = (Math.floor((next.details.length - 1) / 3) + 1) * 88 + 20
+        if (pre.top === 0) {
+          pre.top += height
+          pre[0] = next.category
+        } else {
+          pre[pre.top] = next.category
+          pre.top += height
+        }
+        return pre
+      }
+      return pre
+    },
+    { top: 0 }
+  )
+})
+
+const handleScroll = val => {
+  let scrollTop: string | number = 0
+  for (const key in chartGroupListScroll.value) {
+    if (val.scrollTop > key) {
+      scrollTop = key
+    }
+  }
+  state.curCategory = chartGroupListScroll.value[scrollTop]
+}
+
 const groupActiveChange = category => {
  state.curCategory = category
  anchorPosition('#' + category)
@ -118,7 +148,7 @@ const loadPluginCategory = data => {
        </li>
      </ul>
    </div>
-    <el-scrollbar ref="userViewGroup" class="group-right" height="392px">
+    <el-scrollbar ref="userViewGroup" @scroll="handleScroll" class="group-right" height="392px">
      <el-row
        :id="chartGroupInfo.category"
        v-for="chartGroupInfo in state.chartGroupList"
@ -177,13 +207,13 @@ const loadPluginCategory = data => {
    border-left: 1px solid @side-outline-border-color-light!important;
  }
  :deep(.item-top) {
-    background-color: #1a1a1a !important;
+    background-color: #f5f6f7 !important;
  }
  :deep(.ul-custom) {
    color: @chart-change-font-color-light!important;
  }
  :deep(.li-custom) {
-    color: #a6a6a6 !important;
+    color: #646a73 !important;
    &.li-custom-active {
      color: var(--ed-color-primary) !important;
    }
@ -192,10 +222,10 @@ const loadPluginCategory = data => {
    }
  }
  :deep(.item-bottom) {
-    color: @chart-change-font-color-light ;
+    color: @chart-change-font-color-light!important;
  }
  :deep(.item-top-icon) {
-    color: @chart-change-font-color-light;
+    color: @chart-change-font-color-light!important;
  }
  :deep(.group-title) {
    color: #1f2329;
--- a/core/core-frontend/src/custom-component/component-list.ts
+++ b/core/core-frontend/src/custom-component/component-list.ts
@ -296,6 +296,7 @@ const list = [
    icon: 'icon_search',
    innerType: 'VQuery',
    isHang: false,
+    freeze: false, // 是否冻结再顶部 主画布生效
    x: 1,
    y: 1,
    sizeX: 72,
@ -648,7 +649,14 @@ export function findBaseDeFaultAttr(componentName) {
    if (comp.component === componentName) {
      const stylePropertyInner = []
      Object.keys(comp.style).forEach(styleKey => {
-        stylePropertyInner.push(styleKey)
+        if (
+          (!['width', 'height'].includes(styleKey) &&
+            componentName === 'VQuery' &&
+            !Object.keys(commonStyle).includes(styleKey)) ||
+          componentName !== 'VQuery'
+        ) {
+          stylePropertyInner.push(styleKey)
+        }
      })
      result = {
        properties: ['common-style', 'background-overall-component'],
--- a/core/core-frontend/src/custom-component/de-frame/Attr.vue
+++ b/core/core-frontend/src/custom-component/de-frame/Attr.vue
@ -22,7 +22,7 @@ import { useI18n } from '@/hooks/web/useI18n'
 const dvMainStore = dvMainStoreWithOut()
 const { curComponent, mobileInPc } = storeToRefs(dvMainStore)
 const { t } = useI18n()
-const props = withDefaults(
+withDefaults(
  defineProps<{
    themes?: EditorTheme
  }>(),
--- a/core/core-frontend/src/custom-component/de-frame/ComponentFrame.vue
+++ b/core/core-frontend/src/custom-component/de-frame/ComponentFrame.vue
@ -32,10 +32,6 @@
 import { nextTick, onMounted, reactive, toRefs } from 'vue'
 import { useEmitt } from '@/hooks/web/useEmitt'
 import { useI18n } from '@/hooks/web/useI18n'
-import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
-import { storeToRefs } from 'pinia'
-const dvMainStore = dvMainStoreWithOut()
-const { canvasStyleData } = storeToRefs(dvMainStore)

 const { t } = useI18n()

@ -63,7 +59,7 @@ const props = defineProps({
  }
 })

-const { propValue, element, isEdit, active, screenShot } = toRefs(props)
+const { element, isEdit, screenShot } = toRefs(props)

 const state = reactive({
  pOption: {},
--- a/core/core-frontend/src/custom-component/de-frame/FrameLinks.vue
+++ b/core/core-frontend/src/custom-component/de-frame/FrameLinks.vue
@ -27,7 +27,7 @@

 <script setup lang="ts">
 import icon_info_outlined from '@/assets/svg/icon_info_outlined.svg'
-import { reactive, ref, toRefs, watch, computed } from 'vue'
+import { reactive, toRefs, watch, computed } from 'vue'
 import { dvMainStoreWithOut } from '../../store/modules/data-visualization/dvMain'
 import { storeToRefs } from 'pinia/dist/pinia'
 import { checkAddHttp, deepCopy } from '../../utils/utils'
@ -35,10 +35,8 @@ import { snapshotStoreWithOut } from '../../store/modules/data-visualization/sna
 import { useI18n } from '../../hooks/web/useI18n'
 import { useEmitt } from '@/hooks/web/useEmitt'
 const dvMainStore = dvMainStoreWithOut()
-const { curComponent, curActiveTabInner } = storeToRefs(dvMainStore)
+const { curComponent } = storeToRefs(dvMainStore)
 const snapshotStore = snapshotStoreWithOut()
-const emits = defineEmits(['close'])
-const popover = ref(null)
 const { t } = useI18n()

 const props = defineProps({
@ -60,7 +58,7 @@ const props = defineProps({
 const { frameLinks } = toRefs(props)

 const toolTip = computed(() => {
-  return props.themes === 'dark' ? 'ndark' : 'dark'
+  return props.themes === 'dark' ? 'light' : 'dark'
 })

 const state = reactive({
--- a/core/core-frontend/src/custom-component/de-stream-media/Component.vue
+++ b/core/core-frontend/src/custom-component/de-stream-media/Component.vue
@ -55,7 +55,7 @@ const props = defineProps({
  }
 })

-const { propValue, element, editMode } = toRefs(props)
+const { element } = toRefs(props)
 let currentInstance

 const state = reactive({
--- a/core/core-frontend/src/custom-component/de-stream-media/StreamMediaLinks.vue
+++ b/core/core-frontend/src/custom-component/de-stream-media/StreamMediaLinks.vue
@ -45,7 +45,7 @@
 </template>

 <script setup lang="ts">
-import { reactive, ref, toRefs, watch, computed } from 'vue'
+import { reactive, toRefs, watch } from 'vue'
 import { dvMainStoreWithOut } from '../../store/modules/data-visualization/dvMain'
 import { storeToRefs } from 'pinia/dist/pinia'
 import { checkAddHttp, deepCopy } from '../../utils/utils'
@ -55,8 +55,6 @@ import { useEmitt } from '@/hooks/web/useEmitt'
 const dvMainStore = dvMainStoreWithOut()
 const { curComponent, curActiveTabInner } = storeToRefs(dvMainStore)
 const snapshotStore = snapshotStoreWithOut()
-const emits = defineEmits(['close'])
-const popover = ref(null)
 const { t } = useI18n()

 const props = defineProps({
--- a/core/core-frontend/src/custom-component/de-tabs/Component.vue
+++ b/core/core-frontend/src/custom-component/de-tabs/Component.vue
@ -161,12 +161,7 @@ import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
 import { storeToRefs } from 'pinia'
 import { guid } from '@/views/visualized/data/dataset/form/util'
 import eventBus from '@/utils/eventBus'
-import {
-  canvasChangeAdaptor,
-  findComponentIndexById,
-  findComponentIndexByIdWithFilterHidden,
-  isDashboard
-} from '@/utils/canvasUtils'
+import { canvasChangeAdaptor, findComponentIndexById, isDashboard } from '@/utils/canvasUtils'
 import DeCustomTab from '@/custom-component/de-tabs/DeCustomTab.vue'
 import DePreview from '@/components/data-visualization/canvas/DePreview.vue'
 import { getPanelAllLinkageInfo } from '@/api/visualization/linkage'
@ -176,6 +171,7 @@ import { snapshotStoreWithOut } from '@/store/modules/data-visualization/snapsho
 import { useI18n } from '@/hooks/web/useI18n'
 import { imgUrlTrans } from '@/utils/imgUtils'
 import Board from '@/components/de-board/Board.vue'
+import ChartCarouselTooltip from '@/views/chart/components/js/g2plot_tooltip_carousel'
 const dvMainStore = dvMainStoreWithOut()
 const snapshotStore = snapshotStoreWithOut()
 const { tabMoveInActiveId, bashMatrixInfo, editMode, mobileInPc } = storeToRefs(dvMainStore)
@ -274,6 +270,23 @@ const svgInnerActiveEnable = itemName => {
  )
 }

+// tooltips 轮播会影响tab 展示
+const viewToolTipsChange = () => {
+  element.value.propValue?.forEach(tabItem => {
+    const tMethod =
+      editableTabsValue.value === tabItem.name
+        ? ChartCarouselTooltip.resume
+        : ChartCarouselTooltip.paused
+    tabItem.componentData?.forEach(componentItem => {
+      tMethod(componentItem.id)
+      if (componentItem.component === 'Group')
+        componentItem.propValue.forEach(groupItem => {
+          tMethod(groupItem.id)
+        })
+    })
+  })
+}
+
 const handleMouseEnter = () => {
  state.hoverFlag = true
 }
@ -402,7 +415,10 @@ function handleCommand(command) {
 const reloadLinkage = () => {
  // 刷新联动信息
  if (dvInfo.value.id) {
-    getPanelAllLinkageInfo(dvInfo.value.id).then(rsp => {
+    const resourceTable = ['canvas', 'canvasDataV', 'edit'].includes(showPosition.value)
+      ? 'snapshot'
+      : 'core'
+    getPanelAllLinkageInfo(dvInfo.value.id, resourceTable).then(rsp => {
      dvMainStore.setNowPanelTrackInfo(rsp.data)
    })
  }
@ -413,25 +429,22 @@ const componentMoveIn = component => {
    if (editableTabsValue.value === tabItem.name) {
      //获取主画布当前组件的index
      if (isDashboard()) {
-        const curIndex = findComponentIndexByIdWithFilterHidden(component.id)
-        if (curIndex > -1) {
-          eventBus.emit('removeMatrixItem-canvas-main', curIndex)
-          dvMainStore.setCurComponent({ component: null, index: null })
-          component.canvasId = element.value.id + '--' + tabItem.name
-          const refInstance = currentInstance.refs['tabCanvas_' + index][0]
-          if (refInstance) {
-            const matrixBase = refInstance.getBaseMatrixSize() //矩阵基础大小
-            canvasChangeAdaptor(component, matrixBase)
-            component.x = 1
-            component.y = 200
-            component.style.left = 0
-            component.style.top = 0
-            tabItem.componentData.push(component)
-            refInstance.addItemBox(component) //在适当的时候初始化布局组件
-            nextTick(() => {
-              refInstance.canvasInitImmediately()
-            })
-          }
+        eventBus.emit('removeMatrixItemById-canvas-main', component.id)
+        dvMainStore.setCurComponent({ component: null, index: null })
+        component.canvasId = element.value.id + '--' + tabItem.name
+        const refInstance = currentInstance.refs['tabCanvas_' + index][0]
+        if (refInstance) {
+          const matrixBase = refInstance.getBaseMatrixSize() //矩阵基础大小
+          canvasChangeAdaptor(component, matrixBase)
+          component.x = 1
+          component.y = 200
+          component.style.left = 0
+          component.style.top = 0
+          tabItem.componentData.push(component)
+          refInstance.addItemBox(component) //在适当的时候初始化布局组件
+          nextTick(() => {
+            refInstance.canvasInitImmediately()
+          })
        }
      } else {
        const curIndex = findComponentIndexById(component.id)
@ -629,6 +642,12 @@ watch(
  }
 )

+watch(
+  () => editableTabsValue.value,
+  () => {
+    viewToolTipsChange()
+  }
+)
 const initCarousel = () => {
  carouselTimer && clearInterval(carouselTimer)
  carouselTimer = null
@ -661,12 +680,14 @@ onMounted(() => {
    eventBus.on('onTabMoveOut-' + element.value.id, componentMoveOut)
    eventBus.on('onTabSortChange-' + element.value.id, reShow)
  }
-
  currentInstance = getCurrentInstance()
  initCarousel()
  nextTick(() => {
    groupSizeStyleAdaptor(element.value)
  })
+  setTimeout(() => {
+    viewToolTipsChange()
+  }, 1000)
 })
 onBeforeUnmount(() => {
  if (['canvas', 'canvasDataV', 'edit'].includes(showPosition.value) && !mobileInPc.value) {
--- a/core/core-frontend/src/custom-component/de-time-clock/TimeClockFormat.vue
+++ b/core/core-frontend/src/custom-component/de-time-clock/TimeClockFormat.vue
@ -35,6 +35,14 @@
          />
        </el-select>
      </el-form-item>
+      <el-form-item>
+        <el-checkbox
+          :effect="themes"
+          v-model="formatInfo.showWeek"
+          :label="t('visualization.show_week')"
+          @change="onFormatChange"
+        />
+      </el-form-item>
    </el-form>
  </el-row>
 </template>
--- a/core/core-frontend/src/custom-component/de-video/Component.vue
+++ b/core/core-frontend/src/custom-component/de-video/Component.vue
@ -12,7 +12,7 @@
 <script setup lang="ts">
 import { VideoPlayer } from '@videojs-player/vue'
 import 'video.js/dist/video-js.css'
-import { computed, nextTick, reactive, toRefs, watch, onMounted, ref } from 'vue'
+import { computed, nextTick, reactive, toRefs, watch, onMounted } from 'vue'
 import { useEmitt } from '@/hooks/web/useEmitt'
 import { useI18n } from '@/hooks/web/useI18n'
 const { t } = useI18n()
--- a/core/core-frontend/src/custom-component/de-video/VideoLinks.vue
+++ b/core/core-frontend/src/custom-component/de-video/VideoLinks.vue
@ -36,7 +36,7 @@
 </template>

 <script setup lang="ts">
-import { reactive, ref, toRefs, watch, computed } from 'vue'
+import { reactive, toRefs, watch } from 'vue'
 import { dvMainStoreWithOut } from '../../store/modules/data-visualization/dvMain'
 import { storeToRefs } from 'pinia/dist/pinia'
 import { checkAddHttp, deepCopy } from '../../utils/utils'
@ -46,8 +46,6 @@ import { useEmitt } from '@/hooks/web/useEmitt'
 const dvMainStore = dvMainStoreWithOut()
 const { curComponent, curActiveTabInner } = storeToRefs(dvMainStore)
 const snapshotStore = snapshotStoreWithOut()
-const emits = defineEmits(['close'])
-const popover = ref(null)
 const { t } = useI18n()

 const props = defineProps({
@ -96,12 +94,7 @@ const onChange = () => {
  snapshotStore.recordSnapshotCache('video-onChange')
  useEmitt().emitter.emit('videoLinksChange-' + curComponent.value.id)
 }
-const onBlur = () => {
-  state.linkInfoTemp.src = checkAddHttp(state.linkInfoTemp.src)
-  curComponent.value.frameLinks.src = state.linkInfoTemp.src
-  snapshotStore.recordSnapshotCache('video-onBlur')
-  useEmitt().emitter.emit('frameLinksChange-' + curComponent.value.id)
-}
+
 init()

 watch(
--- a/core/core-frontend/src/custom-component/indicator/DeIndicator.vue
+++ b/core/core-frontend/src/custom-component/indicator/DeIndicator.vue
@ -3,7 +3,7 @@ import { getData } from '@/api/chart'
 import { ref, reactive, shallowRef, computed, CSSProperties, toRefs, PropType } from 'vue'
 import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
 import { customAttrTrans, customStyleTrans, recursionTransObj } from '@/utils/canvasStyle'
-import { deepCopy } from '@/utils/utils'
+import { deepCopy, isMobile } from '@/utils/utils'
 import { cloneDeep, defaultsDeep, defaultTo } from 'lodash-es'
 import {
  BASE_VIEW_CONFIG,
@ -13,8 +13,23 @@ import {
 } from '@/views/chart/components/editor/util/chart'
 import { valueFormatter } from '@/views/chart/components/js/formatter'
 import { storeToRefs } from 'pinia'
+import { isDashboard, trackBarStyleCheck } from '@/utils/canvasUtils'
+import ViewTrackBar from '@/components/visualization/ViewTrackBar.vue'

 const props = defineProps({
+  // 公共参数集
+  commonParams: {
+    type: Object,
+    required: false
+  },
+  element: {
+    type: Object,
+    default() {
+      return {
+        propValue: null
+      }
+    }
+  },
  view: {
    type: Object as PropType<ChartObj>,
    default() {
@ -50,18 +65,26 @@ const props = defineProps({
  }
 })

-const { view, scale, terminal } = toRefs(props)
+const { view, scale, terminal, showPosition, commonParams } = toRefs(props)

 const dvMainStore = dvMainStoreWithOut()
-
-const { batchOptStatus } = storeToRefs(dvMainStore)
-
+const dataVMobile = !isDashboard() && isMobile()
+const { embeddedCallBack, nowPanelTrackInfo, nowPanelJumpInfo, mobileInPc, inMobile } =
+  storeToRefs(dvMainStore)
+const viewTrack = ref(null)
+const indicatorRef = ref(null)
 const errMsg = ref('')
 const isError = ref(false)
 const state = reactive({
+  pointParam: null,
  data: null,
  loading: false,
-  totalItems: 0
+  totalItems: 0,
+  trackBarStyle: {
+    position: 'absolute',
+    left: '50%',
+    top: '50%'
+  }
 })

 const chartData = shallowRef<Partial<Chart['data']>>({
@ -101,7 +124,6 @@ const result = computed(() => {
 })

 const indicatorColor = ref(DEFAULT_INDICATOR_STYLE.color)
-
 const thresholdColor = computed(() => {
  let color: string = indicatorColor.value
  let backgroundColor: string = DEFAULT_INDICATOR_STYLE.backgroundColor
@ -184,8 +206,13 @@ const formattedResult = computed(() => {
  return _result
 })

-const emit = defineEmits(['onChartClick', 'onDrillFilters', 'onJumpClick'])
-
+const emit = defineEmits([
+  'onPointClick',
+  'onChartClick',
+  'onDrillFilters',
+  'onJumpClick',
+  'onComponentEvent'
+])
 const contentStyle = ref<CSSProperties>({
  display: 'flex',
  'flex-direction': 'column',
@ -264,7 +291,7 @@ const renderChart = async view => {
  recursionTransObj(customStyleTrans, chart.customStyle, scale.value, terminal.value)

  if (chart.customAttr) {
-    const { indicator, indicatorName, basicStyle } = chart.customAttr
+    const { indicator, indicatorName } = chart.customAttr

    if (indicator) {
      switch (indicator.hPosition) {
@ -375,6 +402,177 @@ const calcData = (view, callback) => {
  }
 }

+const trackClick = trackAction => {
+  const param = state.pointParam
+  if (!param?.data?.dimensionList && !param?.data?.quotaList) {
+    return
+  }
+  const linkageParam = {
+    option: 'linkage',
+    innerType: 'indicator',
+    name: state.pointParam.data.name,
+    viewId: view.value.id,
+    dimensionList: state.pointParam.data.dimensionList,
+    quotaList: state.pointParam.data.quotaList,
+    customFilter: state.pointParam.data.customFilter
+  }
+  const jumpParam = {
+    option: 'jump',
+    innerType: 'indicator',
+    name: state.pointParam.data.name,
+    viewId: view.value.id,
+    dimensionList: state.pointParam.data.dimensionList,
+    quotaList: state.pointParam.data.quotaList,
+    sourceType: state.pointParam.data.sourceType
+  }
+
+  const clickParams = {
+    option: 'pointClick',
+    innerType: 'indicator',
+    name: state.pointParam.data.name,
+    viewId: view.value.id,
+    dimensionList: state.pointParam.data.dimensionList,
+    quotaList: state.pointParam.data.quotaList,
+    customFilter: state.pointParam.data.customFilter
+  }
+
+  switch (trackAction) {
+    case 'pointClick':
+      emit('onPointClick', clickParams)
+      break
+    case 'linkageAndDrill':
+      dvMainStore.addViewTrackFilter(linkageParam)
+      emit('onChartClick', param)
+      break
+    case 'drill':
+      emit('onChartClick', param)
+      break
+    case 'linkage':
+      dvMainStore.addViewTrackFilter(linkageParam)
+      break
+    case 'jump':
+      if (mobileInPc.value && !inMobile.value) return
+      emit('onJumpClick', jumpParam)
+      break
+    case 'event_jump':
+    case 'event_download':
+    case 'event_share':
+    case 'event_fullScreen':
+    case 'event_showHidden':
+    case 'event_refreshDataV':
+    case 'event_refreshView':
+      emit('onComponentEvent', jumpParam)
+      break
+    default:
+      break
+  }
+}
+
+const trackMenu = computed(() => {
+  let trackMenuInfo = []
+  if (showPosition.value === 'viewDialog') {
+    return trackMenuInfo
+  }
+  let linkageCount = 0
+  let jumpCount = 0
+  chartData.value?.fields?.forEach(item => {
+    const sourceInfo = view.value.id + '#' + item.id
+    if (nowPanelTrackInfo.value[sourceInfo]) {
+      linkageCount++
+    }
+    if (nowPanelJumpInfo.value[sourceInfo]) {
+      jumpCount++
+    }
+  })
+  jumpCount &&
+    view.value?.jumpActive &&
+    (!mobileInPc.value || inMobile.value) &&
+    trackMenuInfo.push('jump')
+  linkageCount && view.value?.linkageActive && trackMenuInfo.push('linkage')
+  view.value.drillFields.length && trackMenuInfo.push('drill')
+  // 如果同时配置jump linkage drill 切配置联动时同时下钻 在实际只显示两个 '跳转' '联动和下钻'
+  if (trackMenuInfo.length === 3 && props.element.actionSelection.linkageActive === 'auto') {
+    trackMenuInfo = ['jump', 'linkageAndDrill']
+  } else if (
+    trackMenuInfo.length === 2 &&
+    props.element.actionSelection.linkageActive === 'auto' &&
+    !trackMenuInfo.includes('jump')
+  ) {
+    trackMenuInfo = ['linkageAndDrill']
+  }
+  if (commonParams.value?.eventEnable) {
+    trackMenuInfo.push('event_' + commonParams.value?.eventType)
+  }
+  return trackMenuInfo
+})
+
+const showCursor = computed(() => {
+  return trackMenu.value.length || embeddedCallBack.value === 'yes'
+})
+
+const pointClickTrans = () => {
+  if (embeddedCallBack.value === 'yes') {
+    trackClick('pointClick')
+  }
+}
+
+const action = param => {
+  state.pointParam = param
+  // 点击
+  pointClickTrans()
+  // 联动 跳转
+  if (trackMenu.value.length < 2) {
+    // 只有一个事件直接调用
+    trackClick(trackMenu.value[0])
+  } else {
+    setTimeout(() => {
+      const barStyleTemp = {
+        left: param.x - 50,
+        top: param.y + 10
+      }
+      trackBarStyleCheck(props.element, barStyleTemp, props.scale, trackMenu.value.length)
+      if (dataVMobile) {
+        state.trackBarStyle.left = barStyleTemp.left + 40 + 'px'
+        state.trackBarStyle.top = barStyleTemp.top + 70 + 'px'
+      } else {
+        state.trackBarStyle.left = barStyleTemp.left + 'px'
+        state.trackBarStyle.top = barStyleTemp.top + 'px'
+      }
+      viewTrack.value.trackButtonClick()
+    }, 200)
+  }
+}
+
+const onPointClick = event => {
+  if (view.value?.yAxis?.length) {
+    const axis = view.value.yAxis[0]
+    // 获取鼠标的全局坐标
+    const mouseX = event.clientX
+    const mouseY = event.clientY
+
+    // 获取最外层 div 的偏移量
+    const rect = indicatorRef.value.getBoundingClientRect()
+    const offsetX = rect.left
+    const offsetY = rect.top
+
+    // 计算鼠标相对于最外层 div 的坐标
+    const left = mouseX - offsetX
+    let top = mouseY - offsetY
+    // 模拟点击
+    const params = {
+      x: left,
+      y: top,
+      data: {
+        name: axis.name,
+        dimensionList: view.value.xAxis,
+        quotaList: view.value.yAxis,
+        customFilter: view.value.customFilter
+      }
+    }
+    action(params)
+  }
+}
+
 defineExpose({
  calcData,
  renderChart
@ -382,7 +580,21 @@ defineExpose({
 </script>

 <template>
-  <div :style="contentStyle">
+  <div
+    ref="indicatorRef"
+    :class="{ 'menu-point': showCursor }"
+    :style="contentStyle"
+    @mousedown="onPointClick"
+  >
+    <view-track-bar
+      ref="viewTrack"
+      :track-menu="trackMenu"
+      :font-family="fontFamily"
+      class="track-bar"
+      :style="state.trackBarStyle"
+      @trackClick="trackClick"
+      :is-data-v-mobile="dataVMobile"
+    />
    <div>
      <span :style="indicatorClass">{{ formattedResult }}</span>
      <span :style="indicatorSuffixClass" v-if="showSuffix">{{ suffixContent }}</span>
@ -393,4 +605,8 @@ defineExpose({
  </div>
 </template>

-<style scoped lang="less"></style>
+<style scoped lang="less">
+.menu-point {
+  cursor: pointer;
+}
+</style>
--- a/core/core-frontend/src/custom-component/picture-group/Attr.vue
+++ b/core/core-frontend/src/custom-component/picture-group/Attr.vue
@ -8,8 +8,7 @@ import PictureGroupUploadAttr from '@/custom-component/picture-group/PictureGrou
 import PictureGroupDatasetSelect from '@/custom-component/picture-group/PictureGroupDatasetSelect.vue'
 import CarouselSetting from '@/custom-component/common/CarouselSetting.vue'
 import PictureGroupThreshold from '@/custom-component/picture-group/PictureGroupThreshold.vue'
-
-const props = defineProps({
+defineProps({
  themes: {
    type: String as PropType<EditorTheme>,
    default: 'dark'
@ -73,10 +72,6 @@ const { curComponent, canvasViewInfo, mobileInPc, batchOptStatus } = storeToRefs
      margin: 0 6px 0 8px;
    }
  }
-
-  :deep(.ed-collapse-item__content) {
-    padding: 16px 8px 0;
-  }
  :deep(.ed-form-item) {
    display: block;
    margin-bottom: 8px;
--- a/core/core-frontend/src/custom-component/picture-group/Component.vue
+++ b/core/core-frontend/src/custom-component/picture-group/Component.vue
@ -26,7 +26,6 @@ import {
  onBeforeMount
 } from 'vue'
 import { imgUrlTrans } from '@/utils/imgUtils'
-import eventBus from '@/utils/eventBus'
 import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
 import { getData } from '@/api/chart'
 import { parseJson } from '@/views/chart/components/js/util'
@ -35,7 +34,7 @@ import { storeToRefs } from 'pinia'
 import ChartEmptyInfo from '@/views/chart/components/views/components/ChartEmptyInfo.vue'
 import ChartError from '@/views/chart/components/views/components/ChartError.vue'
 const dvMainStore = dvMainStoreWithOut()
-const { canvasViewInfo, editMode, mobileInPc, canvasStyleData } = storeToRefs(dvMainStore)
+const { canvasViewInfo, mobileInPc, fullscreenFlag } = storeToRefs(dvMainStore)
 const state = reactive({
  emptyValue: '-',
  data: null,
@ -77,7 +76,9 @@ const dataRowFiledName = ref([])
 let carouselTimer = null
 const { element, view, showPosition } = toRefs(props)

-const isEditMode = computed(() => showPosition.value.includes('canvas') && !mobileInPc.value)
+const isEditMode = computed(
+  () => showPosition.value.includes('canvas') && !mobileInPc.value && !fullscreenFlag.value
+)

 watch(
  () => isEditMode.value,
@ -121,12 +122,6 @@ const imageAdapter = computed(() => {
  return style as CSSProperties
 })

-const uploadImg = () => {
-  nextTick(() => {
-    eventBus.emit('uploadImg')
-  })
-}
-
 const initCurFields = chartDetails => {
  dataRowFiledName.value = []
  dataRowSelect.value = {}
@ -251,7 +246,7 @@ const calcData = (viewCalc: Chart, callback) => {
 }

 // 初始化此处不必刷新
-const renderChart = viewInfo => {
+const renderChart = () => {
  //do renderView
 }

--- a/core/core-frontend/src/custom-component/picture-group/PictureGroupDatasetSelect.vue
+++ b/core/core-frontend/src/custom-component/picture-group/PictureGroupDatasetSelect.vue
@ -32,7 +32,6 @@ const onDatasetUpdate = () => {
          res.quotaList.pop()
          view.value.xAxis.push(...res.dimensionList, ...res.quotaList)
          const viewTarget = view.value
-          debugger
          useEmitt().emitter.emit('calcData-' + viewTarget.id, viewTarget)
          snapshotStore.recordSnapshotCache('calc', view.value.id)
        })
--- a/core/core-frontend/src/custom-component/picture-group/PictureGroupUploadAttr.vue
+++ b/core/core-frontend/src/custom-component/picture-group/PictureGroupUploadAttr.vue
@ -3,8 +3,8 @@ import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
 import { snapshotStoreWithOut } from '@/store/modules/data-visualization/snapshot'

 import { storeToRefs } from 'pinia'
-import { ElIcon, ElMessage } from 'element-plus-secondary'
-import { ref, onMounted, onBeforeUnmount, watch, PropType, computed } from 'vue'
+import { ElIcon } from 'element-plus-secondary'
+import { ref, onMounted, onBeforeUnmount, watch, PropType } from 'vue'
 import { beforeUploadCheck, uploadFileResult } from '@/api/staticResource'
 import { imgUrlTrans } from '@/utils/imgUtils'
 import eventBus from '@/utils/eventBus'
@ -42,14 +42,13 @@ const dialogImageUrl = ref('')
 const dialogVisible = ref(false)
 const uploadDisabled = ref(false)
 const files = ref(null)
-const maxImageSize = 15000000

 const handlePictureCardPreview = file => {
  dialogImageUrl.value = file.url
  dialogVisible.value = true
 }

-const handleRemove = (file, fileListArray) => {
+const handleRemove = file => {
  uploadDisabled.value = false
  let file_static_part = file.url.split('static-resource/')[1]
  let index = element.value.propValue['urlList'].findIndex(
@ -79,10 +78,6 @@ const goFile = () => {
  files.value.click()
 }

-const sizeMessage = () => {
-  ElMessage.success('图片大小不符合')
-}
-
 const fileListInit = () => {
  fileList.value = []
  if (element.value.propValue.urlList && element.value.propValue.urlList.length > 0) {
@ -95,10 +90,6 @@ const init = () => {
  fileListInit()
 }

-const toolTip = computed(() => {
-  return props.themes === 'dark' ? 'ndark' : 'dark'
-})
-
 watch(
  () => element.value.propValue['urlList'],
  () => {
--- a/core/core-frontend/src/custom-component/picture/Attr.vue
+++ b/core/core-frontend/src/custom-component/picture/Attr.vue
@ -5,7 +5,7 @@ import { snapshotStoreWithOut } from '@/store/modules/data-visualization/snapsho

 import { storeToRefs } from 'pinia'
 import { ElIcon, ElMessage } from 'element-plus-secondary'
-import { ref, onMounted, onBeforeUnmount, watch, PropType, reactive, toRefs, computed } from 'vue'
+import { ref, onMounted, onBeforeUnmount, watch, PropType } from 'vue'
 import { beforeUploadCheck, uploadFileResult } from '@/api/staticResource'
 import { imgUrlTrans } from '@/utils/imgUtils'
 import eventBus from '@/utils/eventBus'
@ -13,7 +13,7 @@ import ImgViewDialog from '@/custom-component/ImgViewDialog.vue'
 import { useI18n } from '@/hooks/web/useI18n'
 const { t } = useI18n()

-const props = defineProps({
+defineProps({
  themes: {
    type: String as PropType<EditorTheme>,
    default: 'dark'
@ -31,7 +31,6 @@ const dialogVisible = ref(false)
 const uploadDisabled = ref(false)
 const files = ref(null)
 const maxImageSize = 15000000
-const state = reactive({})

 const handlePictureCardPreview = file => {
  dialogImageUrl.value = file.url
@ -73,7 +72,7 @@ const reUpload = e => {
 }

 const sizeMessage = () => {
-  ElMessage.success('图片大小不符合')
+  ElMessage.success('图片大小不能超过15M')
 }
 const init = () => {
  if (curComponent.value.propValue.url) {
@ -83,10 +82,6 @@ const init = () => {
  }
 }

-const toolTip = computed(() => {
-  return props.themes === 'dark' ? 'ndark' : 'dark'
-})
-
 watch(
  () => curComponent.value.propValue.url,
  () => {
--- a/core/core-frontend/src/custom-component/pop-area/Component.vue
+++ b/core/core-frontend/src/custom-component/pop-area/Component.vue
@ -118,7 +118,7 @@ const handleDragOver = e => {
  e.dataTransfer.dropEffect = 'copy'
 }

-const handleDragLeave = e => {
+const handleDragLeave = () => {
  areaActive.value = false
 }

@ -142,7 +142,7 @@ const handleDrop = e => {
        adaptCurThemeCommonStyle(component)
        snapshotStore.recordSnapshotCache('renderChart', component.id)
      } else {
-        ElMessage.error('及支持添加查询组件')
+        ElMessage.error(t('visualization.support_query'))
      }
    }
  }
--- a/core/core-frontend/src/custom-component/rich-text/DeRichTextView.vue
+++ b/core/core-frontend/src/custom-component/rich-text/DeRichTextView.vue
@ -218,7 +218,7 @@ const init = ref({
      })

      // 监听 mouseup 事件以结束调整
-      doc.addEventListener('mouseup', event => {
+      doc.addEventListener('mouseup', () => {
        if (cloneHandle) {
          // 显示原始手柄并移除克隆手柄
          originalHandle.style.display = ''
@ -370,7 +370,7 @@ const jumpTargetAdaptor = () => {

 const assignment = content => {
  if (content) {
-    const on = content?.match(/\[(.+?)\]/g)
+    const on = content?.match(/\[(.+?)\]/g) || []
    if (on) {
      const thresholdStyleInfo = conditionAdaptor(state.viewDataInfo)
      on.forEach(itm => {
--- a/core/core-frontend/src/custom-component/scroll-text/Attr.vue
+++ b/core/core-frontend/src/custom-component/scroll-text/Attr.vue
@ -37,9 +37,6 @@ const { themes } = toRefs(props)
    font-size: 12px !important;
    font-weight: 400 !important;
  }
-  :deep(.ed-collapse-item__content) {
-    padding: 16px !important;
-  }
  :deep(.ed-form-item) {
    display: block;
    margin-bottom: 8px;
--- a/core/core-frontend/src/custom-component/scroll-text/Component.vue
+++ b/core/core-frontend/src/custom-component/scroll-text/Component.vue
@ -42,7 +42,7 @@ const props = defineProps({

 const { element, showPosition } = toRefs(props)
 const dvMainStore = dvMainStoreWithOut()
-const { editMode, curComponent, canvasStyleData } = storeToRefs(dvMainStore)
+const { editMode, curComponent } = storeToRefs(dvMainStore)

 const onComponentClick = () => {
  if (curComponent.value.id !== element.value.id) {
--- a/core/core-frontend/src/custom-component/user-view/Component.vue
+++ b/core/core-frontend/src/custom-component/user-view/Component.vue
@ -4,6 +4,11 @@ import Chart from '@/views/chart/components/views/index.vue'
 import { isISOMobile } from '@/utils/utils'

 const props = defineProps({
+  // 公共参数集
+  commonParams: {
+    type: Object,
+    required: false
+  },
  active: {
    type: Boolean,
    default: false
@ -90,7 +95,7 @@ const autoStyle = computed(() => {
    return {}
  }
 })
-const emits = defineEmits(['onPointClick'])
+const emits = defineEmits(['onPointClick', 'onComponentEvent'])

 const onPointClick = param => {
  emits('onPointClick', param)
@ -109,7 +114,9 @@ const onPointClick = param => {
      :disabled="disabled"
      :suffixId="suffixId"
      :font-family="fontFamily"
+      :common-params="commonParams"
      @onPointClick="onPointClick"
+      @onComponentEvent="() => emits('onComponentEvent')"
      :opt-type="optType"
    ></chart>
  </div>
--- a/core/core-frontend/src/custom-component/v-query/Component.vue
+++ b/core/core-frontend/src/custom-component/v-query/Component.vue
@ -2,7 +2,10 @@
 import icon_edit_outlined from '@/assets/svg/icon_edit_outlined.svg'
 import icon_deleteTrash_outlined from '@/assets/svg/icon_delete-trash_outlined.svg'
 import eventBus from '@/utils/eventBus'
+import colorFunctions from 'less/lib/less/functions/color.js'
+import colorTree from 'less/lib/less/tree/color.js'
 import { isISOMobile, isMobile } from '@/utils/utils'
+import { cloneDeep } from 'lodash-es'
 import { ElMessage } from 'element-plus-secondary'
 import { snapshotStoreWithOut } from '@/store/modules/data-visualization/snapshot'
 import QueryConditionConfiguration from './QueryConditionConfiguration.vue'
@ -61,7 +64,8 @@ const { element, view, scale } = toRefs(props)
 const { t } = useI18n()
 const vQueryRef = ref()
 const dvMainStore = dvMainStoreWithOut()
-const { curComponent, canvasViewInfo, mobileInPc, firstLoadMap } = storeToRefs(dvMainStore)
+const { curComponent, canvasViewInfo, mobileInPc, firstLoadMap, editMode } =
+  storeToRefs(dvMainStore)
 const canEdit = ref(false)
 const queryConfig = ref()
 const defaultStyle = {
@ -88,16 +92,18 @@ const defaultStyle = {
  queryConditionWidth: 227,
  nameboxSpacing: 8,
  queryConditionSpacing: 16,
+  queryConditionHeight: 32,
  btnColor: '#3370ff',
  labelColorBtn: '#ffffff'
 }
 const customStyle = reactive({ ...defaultStyle })
 const snapshotStore = snapshotStoreWithOut()
+const userAgent = navigator.userAgent.toLowerCase()
+// 判断是否为飞书内置浏览器
+const isFeiShu = /lark/i.test(userAgent)

 const btnStyle = computed(() => {
  const style = {
-    backgroundColor: customStyle.btnColor,
-    borderColor: customStyle.btnColor,
    color: customStyle.labelColorBtn
  } as CSSProperties
  if (customStyle.fontSizeBtn) {
@ -115,6 +121,76 @@ const btnStyle = computed(() => {
  return style
 })

+function rgbaTo16color(color) {
+  let val = color
+    .replace(/rgba?\(/, '')
+    .replace(/\)/, '')
+    .replace(/[\s+]/g, '')
+    .split(',')
+  let a = parseFloat(val[3] || 1),
+    r = Math.floor(a * parseInt(val[0]) + (1 - a) * 255),
+    g = Math.floor(a * parseInt(val[1]) + (1 - a) * 255),
+    b = Math.floor(a * parseInt(val[2]) + (1 - a) * 255)
+  return (
+    '#' +
+    ('0' + r.toString(16)).slice(-2) +
+    ('0' + g.toString(16)).slice(-2) +
+    ('0' + b.toString(16)).slice(-2)
+  )
+}
+
+const btnHoverStyle = computed(() => {
+  let btnColor = customStyle.btnColor
+  if (customStyle.btnColor.startsWith('rgb')) {
+    btnColor = rgbaTo16color(customStyle.btnColor)
+  }
+
+  if (btnColor.startsWith('#')) {
+    btnColor = btnColor.substr(1)
+  }
+
+  return {
+    rawColor: customStyle.btnColor ?? '#3370ff',
+    hoverColor: customStyle.btnColor
+      ? colorFunctions
+          .mix(new colorTree('ffffff'), new colorTree(btnColor), {
+            value: 15
+          })
+          .toRGB()
+      : '#5285FF',
+    activeColor: customStyle.btnColor
+      ? colorFunctions
+          .mix(new colorTree('000000'), new colorTree(btnColor), {
+            value: 15
+          })
+          .toRGB()
+      : '#2B5FD9'
+  }
+})
+
+const btnPrimaryColor = computed(() => {
+  return btnHoverStyle.value.rawColor
+})
+
+const btnPrimaryHoverColor = computed(() => {
+  return btnHoverStyle.value.hoverColor
+})
+
+const btnPrimaryActiveColor = computed(() => {
+  return btnHoverStyle.value.activeColor
+})
+
+const tagColor = computed(() => {
+  if (customStyle.background && !customStyle.background.toLowerCase().includes('#ffffff')) {
+    return colorFunctions
+      .mix(new colorTree('ffffff'), new colorTree(customStyle.background.substr(1)), {
+        value: 15
+      })
+      .toRGB()
+  }
+  return '#f0f2f5'
+})
+
 const btnPlainStyle = computed(() => {
  const style = {
    backgroundColor: 'transparent',
@ -162,6 +238,7 @@ const setCustomStyle = val => {
    queryConditionWidth,
    nameboxSpacing,
    queryConditionSpacing,
+    queryConditionHeight,
    labelColorBtn,
    btnColor,
    placeholderSize,
@ -195,6 +272,7 @@ const setCustomStyle = val => {
  customStyle.queryConditionWidth = queryConditionWidth ?? 227
  customStyle.nameboxSpacing = nameboxSpacing ?? 8
  customStyle.queryConditionSpacing = queryConditionSpacing ?? 16
+  customStyle.queryConditionHeight = queryConditionHeight ?? 32
  customStyle.labelColorBtn = labelColorBtn || '#ffffff'
  customStyle.labelShow = labelShow ?? true
  customStyle.btnColor = btnColor || '#3370ff'
@ -245,12 +323,77 @@ const { emitter } = useEmitt()
 const unMountSelect = shallowRef([])
 onBeforeMount(() => {
  unMountSelect.value = list.value.map(ele => ele.id)
+  ;(props.element.cascade || []).forEach(ele => {
+    ele.forEach(item => {
+      item.currentSelectValue = item.selectValue
+    })
+  })
 })

 const releaseSelect = id => {
  unMountSelect.value = unMountSelect.value.filter(ele => ele !== id)
 }

+const getKeyList = next => {
+  let checkedFieldsMapArr = Object.entries(next.checkedFieldsMap).filter(ele =>
+    next.checkedFields.includes(ele[0])
+  )
+  if (next.displayType === '9') {
+    checkedFieldsMapArr = (
+      next.treeCheckedList?.length
+        ? next.treeCheckedList.filter((_, index) => index < next.treeFieldList.length)
+        : next.treeFieldList.map(() => {
+            return {
+              checkedFields: [...next.checkedFields],
+              checkedFieldsMap: cloneDeep(next.checkedFieldsMap)
+            }
+          })
+    )
+      .map(item =>
+        Object.entries(item.checkedFieldsMap).filter(ele => item.checkedFields.includes(ele[0]))
+      )
+      .flat()
+  }
+  return checkedFieldsMapArr.filter(ele => !!ele[1]).map(ele => ele[0])
+}
+
+const fillRequireVal = arr => {
+  element.value.propValue.forEach(next => {
+    if (arr.some(itx => next.checkedFields.includes(itx)) && next.required) {
+      if (next.displayType === '8') {
+        const { conditionValueF, conditionValueS, conditionType } = next
+        if (conditionType === 0 && conditionValueF === '') {
+          next.conditionValueF = next.defaultConditionValueF
+        } else if (conditionValueF === '' || conditionValueS === '') {
+          next.conditionValueF = next.defaultConditionValueF
+          next.conditionValueS = next.defaultConditionValueS
+        }
+      } else if (next.displayType === '22') {
+        if (
+          (next.numValueStart !== 0 && !next.numValueStart) ||
+          (next.numValueEnd !== 0 && !next.numValueEnd)
+        ) {
+          next.numValueStart = next.defaultNumValueStart
+          next.numValueEnd = next.defaultNumValueEnd
+        }
+      } else if (
+        (Array.isArray(next.selectValue) && !next.selectValue.length) ||
+        (next.selectValue !== 0 && !next.selectValue)
+      ) {
+        if (
+          next.optionValueSource === 1 &&
+          (next.defaultMapValue?.length || next.displayId) &&
+          ![1, 7].includes(+next.displayType)
+        ) {
+          next.mapValue = next.defaultMapValue
+          next.selectValue = next.multiple ? next.defaultMapValue : next.defaultMapValue[0]
+        } else {
+          next.selectValue = next.defaultValue
+        }
+      }
+    }
+  })
+}
 const queryDataForId = id => {
  let requiredName = ''
  let numName = ''
@ -302,10 +445,8 @@ const queryDataForId = id => {
          requiredName = next.name
        }
      }
-      const keyList = Object.entries(next.checkedFieldsMap)
-        .filter(ele => next.checkedFields.includes(ele[0]))
-        .filter(ele => !!ele[1])
-        .map(ele => ele[0])
+
+      const keyList = getKeyList(next)
      pre = [...new Set([...keyList, ...pre])]
      return pre
    }, [])
@ -318,6 +459,7 @@ const queryDataForId = id => {
    return
  }
  if (!emitterList.length) return
+  fillRequireVal(emitterList)
  emitterList.forEach(ele => {
    emitter.emit(`query-data-${ele}`)
  })
@ -490,11 +632,7 @@ const resetData = () => {
        }
      })
    })
-
-    const keyList = Object.entries(next.checkedFieldsMap)
-      .filter(ele => next.checkedFields.includes(ele[0]))
-      .filter(ele => !!ele[1])
-      .map(ele => ele[0])
+    const keyList = getKeyList(next)
    pre = [...new Set([...keyList, ...pre])]
    return pre
  }, [])
@ -525,10 +663,7 @@ const clearData = () => {
      next.numValueEnd = undefined
      next.numValueStart = undefined
    }
-    const keyList = Object.entries(next.checkedFieldsMap)
-      .filter(ele => next.checkedFields.includes(ele[0]))
-      .filter(ele => !!ele[1])
-      .map(ele => ele[0])
+    const keyList = getKeyList(next)
    pre = [...new Set([...keyList, ...pre])]
    return pre
  }, [])
@ -558,6 +693,10 @@ const boxWidth = computed(() => {
  return `${customStyle.placeholderSize}px`
 })

+const boxHeight = computed(() => {
+  return `${customStyle.queryConditionHeight || 32}px`
+})
+
 const queryData = () => {
  let requiredName = ''
  let numName = ''
@ -607,10 +746,7 @@ const queryData = () => {
        requiredName = next.name
      }
    }
-    const keyList = Object.entries(next.checkedFieldsMap)
-      .filter(ele => next.checkedFields.includes(ele[0]))
-      .filter(ele => !!ele[1])
-      .map(ele => ele[0])
+    const keyList = getKeyList(next)
    pre = [...new Set([...keyList, ...pre])]
    return pre
  }, [])
@ -657,20 +793,24 @@ const labelStyle = computed(() => {
  return style
 })

+const comLayout = computed(() => {
+  return customStyle.labelShow ? customStyle.layout : 'horizontal'
+})
+
 const paddingTop = computed<CSSProperties>(() => {
  return {
-    paddingTop: customStyle.layout !== 'horizontal' ? customStyle.nameboxSpacing + 22 + 'px' : '0'
+    paddingTop: comLayout.value !== 'horizontal' ? customStyle.nameboxSpacing + 22 + 'px' : '0'
  }
 })

 const marginRight = computed<CSSProperties>(() => {
  return {
-    marginRight: customStyle.layout === 'horizontal' ? customStyle.nameboxSpacing + 'px' : '8px'
+    marginRight: comLayout.value === 'horizontal' ? customStyle.nameboxSpacing + 'px' : '8px'
  }
 })

 const autoStyle = computed(() => {
-  if (isISOMobile()) {
+  if (isISOMobile() || isFeiShu) {
    return {
      position: 'absolute',
      height: 100 / scale.value + '%!important',
@ -691,11 +831,7 @@ const autoStyle = computed(() => {
      {{ customStyle.title }}
    </p>
    <div
-      :class="[
-        'v-query',
-        customStyle.layout,
-        customStyle.titleShow && !!customStyle.title && 'title-show'
-      ]"
+      :class="['v-query', comLayout, customStyle.titleShow && !!customStyle.title && 'title-show']"
      @dragover.prevent.stop="dragover"
      @drop.prevent.stop="drop"
    >
@ -703,7 +839,7 @@ const autoStyle = computed(() => {
        <div class="container flex-align-center">
          {{ t('v_query.here_or_click') }}
          <el-button
-            :disabled="showPosition === 'preview' || mobileInPc"
+            :disabled="showPosition === 'preview' || mobileInPc || editMode === 'preview'"
            @click="addCriteriaConfigOut"
            style="font-family: inherit"
            text
@ -737,7 +873,9 @@ const autoStyle = computed(() => {
              </div>
              <div
                class="label-wrapper-tooltip"
-                v-if="showPosition !== 'preview' && !dvMainStore.mobileInPc"
+                v-if="
+                  showPosition !== 'preview' && !dvMainStore.mobileInPc && editMode !== 'preview'
+                "
              >
                <el-tooltip
                  effect="dark"
@ -813,11 +951,46 @@ const autoStyle = computed(() => {
  position: relative;
  --ed-font-size-base: v-bind(boxWidth);

+  :deep(.ed-select-v2 .ed-select-v2__selection .ed-tag),
+  :deep(.select-trigger .ed-select__tags .ed-tag) {
+    background-color: v-bind(tagColor);
+  }
+
+  :deep(.ed-input),
+  :deep(.ed-date-editor) {
+    --ed-input-height: v-bind(boxHeight);
+  }
+
+  :deep(.ed-select__wrapper),
+  :deep(.text-search-select .ed-input__wrapper),
+  :deep(.text-search-select .ed-select__wrapper) {
+    height: v-bind(boxHeight);
+  }
+
+  .ed-button--primary {
+    --ed-button-bg-color: v-bind(btnHoverStyle.rawColor);
+    --ed-button-border-color: v-bind(btnHoverStyle.rawColor);
+    --ed-button-hover-border-color: v-bind(btnHoverStyle.hoverColor);
+    --ed-button-hover-bg-color: v-bind(btnHoverStyle.hoverColor);
+    background-color: v-bind(btnPrimaryColor);
+  }
+
+  .ed-button--primary.ed-button--primary.ed-button--primary:hover,
+  .ed-button--primary.ed-button--primary.ed-button--primary:focus {
+    background-color: v-bind(btnPrimaryHoverColor);
+  }
+
+  .ed-button--primary.ed-button--primary.ed-button--primary:active {
+    background-color: v-bind(btnPrimaryActiveColor);
+    border-color: v-bind(btnPrimaryHoverColor);
+  }
+
  :deep(.ed-tag) {
    --ed-tag-font-size: v-bind(boxWidth);
  }

-  :deep(.ed-select-v2) {
+  :deep(.ed-select-v2),
+  :deep(.ed-select__wrapper) {
    font-size: v-bind(boxWidth);
  }

@ -1017,7 +1190,7 @@ const autoStyle = computed(() => {
          .label-wrapper-tooltip {
            position: absolute;
            right: 0;
-            top: -26px;
+            top: -21px;
            z-index: 11;
            padding: 4px 8px;
            height: 26px;
--- a/core/core-frontend/src/custom-component/v-query/ConditionDefaultConfiguration.vue
+++ b/core/core-frontend/src/custom-component/v-query/ConditionDefaultConfiguration.vue
@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import icon_admin_outlined from '@/assets/svg/icon_admin_outlined.svg'
 import { ElSelect } from 'element-plus-secondary'
-import { computed, ref, toRefs } from 'vue'
+import { computed, nextTick, ref, toRefs, watch } from 'vue'
 import RangeFilterTime from '@/custom-component/v-query/RangeFilterTime.vue'
 import FilterTime from '@/custom-component/v-query/FilterTime.vue'
 import { useI18n } from '@/hooks/web/useI18n'
@ -56,9 +56,19 @@ const props = defineProps({
 })

 const showFlag = computed(() => props.showPosition === 'main')
-
 const { curComponent } = toRefs(props)
-
+const loadingDefault = ref(true)
+watch(
+  () => curComponent.value.id,
+  val => {
+    if (!val) return
+    loadingDefault.value = false
+    nextTick(() => {
+      loadingDefault.value = true
+    })
+  },
+  { immediate: true }
+)
 const relativeToCurrentTypeList = computed(() => {
  if (!curComponent.value) return []
  let index = ['year', 'month', 'date', 'datetime'].indexOf(curComponent.value.timeGranularity) + 1
@ -200,6 +210,10 @@ const relativeToCurrentListRange = computed(() => {
          label: t('dynamic_month.last'),
          value: 'lastMonth'
        },
+        {
+          label: t('dynamic_time.tquarter'),
+          value: 'thisQuarter'
+        },
        {
          label: t('v_query.last_3_months'),
          value: 'LastThreeMonths'
@ -225,6 +239,10 @@ const relativeToCurrentListRange = computed(() => {
          label: t('dynamic_time.yesterday'),
          value: 'yesterday'
        },
+        {
+          label: t('dynamic_time.cweek'),
+          value: 'thisWeek'
+        },
        {
          label: t('v_query.last_3_days'),
          value: 'LastThreeDays'
@ -456,7 +474,8 @@ defineExpose({
      </el-popover>
      <span
        v-if="
-          curComponent.timeRange.intervalType !== 'none' || curComponent.timeRange.dynamicWindow
+          curComponent.timeRange &&
+          (curComponent.timeRange.intervalType !== 'none' || curComponent.timeRange.dynamicWindow)
        "
        class="config-flag range-filter-time-flag"
        >{{ t('v_query.configured') }}</span
@ -637,7 +656,11 @@ defineExpose({
        </div>
      </template>
    </div>
-    <div v-if="curComponent.defaultValueCheck" class="parameters" :class="dynamicTime && 'setting'">
+    <div
+      v-if="curComponent.defaultValueCheck && loadingDefault"
+      class="parameters"
+      :class="dynamicTime && 'setting'"
+    >
      <div class="setting-label" v-if="dynamicTime">{{ t('template_manage.preview') }}</div>
      <div :class="dynamicTime ? 'setting-value' : 'w100'">
        <component :config="curComponent" isConfig ref="inputCom" :is="filterTypeCom"></component>
@ -874,6 +897,11 @@ defineExpose({
      padding-left: 86px;
      justify-content: flex-end;
      align-items: center;
+      width: 100%;
+      .ed-select {
+        --ed-select-width: 100px;
+      }
+
      &.range {
        padding-left: 0px;
      }
--- a/core/core-frontend/src/custom-component/v-query/DynamicTime.vue
+++ b/core/core-frontend/src/custom-component/v-query/DynamicTime.vue
@ -1,4 +1,5 @@
 <script lang="ts" setup>
+import type { ManipulateType } from 'dayjs'
 import { toRefs, PropType, ref, onBeforeMount, watch, computed } from 'vue'
 import { Calendar } from '@element-plus/icons-vue'
 import { type DatePickType } from 'element-plus-secondary'
@ -22,7 +23,7 @@ interface SelectConfig {
  defaultValueCheck: boolean
  id: string
  timeNum: number
-  relativeToCurrentType: string
+  relativeToCurrentType: ManipulateType
  around: string
  arbitraryTime: Date
  timeGranularity: DatePickType
--- a/core/core-frontend/src/custom-component/v-query/DynamicTimeFiltering.vue
+++ b/core/core-frontend/src/custom-component/v-query/DynamicTimeFiltering.vue
@ -3,7 +3,7 @@ import { toRefs, PropType, onBeforeMount, watch, computed } from 'vue'
 import { Calendar } from '@element-plus/icons-vue'
 import { type DatePickType } from 'element-plus-secondary'
 import type { ManipulateType } from 'dayjs'
-import { getThisStart, getLastStart, getAround } from './time-format-dayjs'
+import { getThisStart, getThisEnd, getLastStart, getAround } from './time-format-dayjs'
 interface SelectConfig {
  intervalType: string
  regularOrTrendsValue: Date
@ -114,6 +114,9 @@ const init = () => {
      case 'monthBeginning':
        config.value.regularOrTrendsValue = getThisStart('month')
        break
+      case 'monthEnd':
+        config.value.regularOrTrendsValue = getThisEnd('month')
+        break
      case 'yearBeginning':
        config.value.regularOrTrendsValue = getThisStart('year')
        break
--- a/core/core-frontend/src/custom-component/v-query/DynamicTimeForViewFilter.vue
+++ b/core/core-frontend/src/custom-component/v-query/DynamicTimeForViewFilter.vue
@ -1,4 +1,5 @@
 <script lang="ts" setup>
+import type { ManipulateType } from 'dayjs'
 import { toRefs, PropType, ref, onBeforeMount, watch, computed } from 'vue'
 import { type DatePickType } from 'element-plus-secondary'
 import {
@ -15,7 +16,7 @@ import {
 interface SelectConfig {
  relativeToCurrent: string
  timeNum: number
-  relativeToCurrentType: string
+  relativeToCurrentType: ManipulateType
  around: string
  arbitraryTime: Date
  timeGranularity: DatePickType
--- a/core/core-frontend/src/custom-component/v-query/DynamicTimeRange.vue
+++ b/core/core-frontend/src/custom-component/v-query/DynamicTimeRange.vue
@ -1,4 +1,5 @@
 <script lang="ts" setup>
+import type { ManipulateType } from 'dayjs'
 import { toRefs, PropType, ref, onBeforeMount, watch, computed } from 'vue'
 import { Calendar } from '@element-plus/icons-vue'
 import { type DatePickType } from 'element-plus-secondary'
@ -13,12 +14,12 @@ interface SelectConfig {
  id: string
  relativeToCurrentRange: string
  timeNum: number
-  relativeToCurrentType: string
+  relativeToCurrentType: ManipulateType
  around: string
  arbitraryTime: Date
  timeGranularity: DatePickType
  timeNumRange: number
-  relativeToCurrentTypeRange: string
+  relativeToCurrentTypeRange: ManipulateType
  aroundRange: string
  arbitraryTimeRange: Date
 }
--- a/core/core-frontend/src/custom-component/v-query/FilterTime.vue
+++ b/core/core-frontend/src/custom-component/v-query/FilterTime.vue
@ -1,10 +1,11 @@
 <script lang="ts" setup>
 import type { DatePickType } from 'element-plus-secondary'
-import { toRefs, computed } from 'vue'
+import { toRefs, computed, watch } from 'vue'
 import { type TimeRange } from './time-format'
 import { useI18n } from '@/hooks/web/useI18n'
 import DynamicTime from './DynamicTimeFiltering.vue'
 import DynamicTimeRange from './DynamicTimeRangeFiltering.vue'
+import { ManipulateType } from 'dayjs'
 const props = withDefaults(
  defineProps<{
    timeRange: TimeRange
@ -253,6 +254,35 @@ const relativeToCurrentListRange = computed(() => {
    }
  ]
 })
+watch(
+  () => relativeToCurrentListRange.value,
+  val => {
+    if (!val.some(ele => ele.value === timeRange.value.relativeToCurrentRange)) {
+      timeRange.value.relativeToCurrentRange = val[0].value
+    }
+  },
+  { immediate: true }
+)
+
+watch(
+  () => relativeToCurrentList.value,
+  val => {
+    if (!val.some(ele => ele.value === timeRange.value.relativeToCurrent)) {
+      timeRange.value.relativeToCurrent = val[0].value
+    }
+  },
+  { immediate: true }
+)
+
+watch(
+  () => relativeToCurrentTypeList.value,
+  val => {
+    if (!val.some(ele => ele.value === timeRange.value.relativeToCurrentType)) {
+      timeRange.value.relativeToCurrentType = val[0].value as ManipulateType
+    }
+  },
+  { immediate: true }
+)
 </script>

 <template>
@ -417,6 +447,9 @@ const relativeToCurrentListRange = computed(() => {
    --ed-radio-input-height: 16px;
    --ed-radio-input-width: 16px;
  }
+  .ed-select {
+    --ed-select-width: 100px;
+  }
  .title {
    font-size: 14px;
    font-weight: 500;
--- a/core/core-frontend/src/custom-component/v-query/NumberInput.vue
+++ b/core/core-frontend/src/custom-component/v-query/NumberInput.vue
@ -55,7 +55,7 @@ onBeforeMount(() => {
  setParams()
 })
 const queryConditionWidth = inject('com-width', Function, true)
-const customStyle = inject<{ background: string }>('$custom-style-filter')
+const customStyle = inject<{ background: string; border: string }>('$custom-style-filter')
 const isConfirmSearch = inject('is-confirm-search', Function, true)

 const getCustomWidth = () => {
@ -78,6 +78,10 @@ const handleValueChange = () => {
    return
  }
 }
+
+const color = computed(() => {
+  return customStyle.border
+})
 </script>

 <template>
@ -104,11 +108,18 @@ const handleValueChange = () => {
 .num-search-select {
  display: flex;
  align-items: center;
+  border-radius: 4px;
  .num-value_line {
    background: #1f2329;
    width: 12px;
    height: 1px;
    margin: 0 8px;
  }
+
+  :deep(.ed-input-number__increase),
+  :deep(.ed-input-number__decrease) {
+    background-color: transparent !important;
+    border-color: v-bind(color) !important;
+  }
 }
 </style>
--- a/core/core-frontend/src/custom-component/v-query/QueryConditionConfiguration.vue
+++ b/core/core-frontend/src/custom-component/v-query/QueryConditionConfiguration.vue
@ -28,7 +28,13 @@ import CustomSortFilter from './CustomSortFilter.vue'
 import { addQueryCriteriaConfig } from './options'
 import { getCustomTime } from './time-format'
 import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
-import { getThisStart, getLastStart, getAround, getCustomRange } from './time-format-dayjs'
+import {
+  getThisStart,
+  getThisEnd,
+  getLastStart,
+  getAround,
+  getCustomRange
+} from './time-format-dayjs'
 import { snapshotStoreWithOut } from '@/store/modules/data-visualization/snapshot'
 import { useI18n } from '@/hooks/web/useI18n'
 import { fieldType } from '@/utils/attr'
@ -85,7 +91,6 @@ const activeConditionForRename = reactive({
 })
 const datasetMap = {}
 const snapshotStore = snapshotStoreWithOut()
-
 const dfsComponentData = () => {
  let arr = componentData.value.filter(
    com => !['VQuery', 'DeTabs'].includes(com.innerType) && com.component !== 'Group'
@ -99,6 +104,17 @@ const dfsComponentData = () => {
            com => !['VQuery', 'DeTabs'].includes(com.innerType) && com.component !== 'Group'
          )
        ]
+
+        itx.componentData.forEach(j => {
+          if (j.component === 'Group') {
+            arr = [
+              ...arr,
+              j.propValue.filter(
+                com => !['VQuery', 'DeTabs'].includes(com.innerType) && com.component !== 'Group'
+              )
+            ]
+          }
+        })
      })
    } else if (ele.component === 'Group') {
      arr = [
@ -262,22 +278,6 @@ const showTypeError = computed(() => {
  })
 })

-const showDatasetError = computed(() => {
-  if (!curComponent.value || curComponent.value.displayType !== '9') 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: t('data_fill.rename'),
@ -295,52 +295,6 @@ const handleCheckAllChange = (val: boolean) => {
  val && setSameId()
 }

-const setTreeDefault = () => {
-  if (!!curComponent.value.checkedFields.length) {
-    let checkId = ''
-    let tableId = ''
-    let comId = ''
-    fields.value.forEach(ele => {
-      if (
-        curComponent.value.checkedFields.includes(ele.componentId) &&
-        curComponent.value.checkedFieldsMap[ele.componentId] &&
-        !checkId
-      ) {
-        checkId = curComponent.value.checkedFieldsMap[ele.componentId]
-        comId = ele.componentId
-        tableId = datasetFieldList.value.find(itx => itx.id === ele.componentId)?.tableId
-      }
-    })
-    if (checkId && tableId) {
-      const componentObj = fields.value.find(ele => ele.componentId === comId)
-      const fieldArr =
-        curComponent.value.optionValueSource === 0
-          ? componentObj?.fields?.dimensionList
-          : (fields.value.find(itx => itx.id === tableId) || {}).fields?.dimensionList
-      fields.value.forEach(ele => {
-        if (curComponent.value.checkedFields.includes(ele.componentId)) {
-          if (datasetFieldList.value.find(itx => itx.id === ele.componentId)?.tableId === tableId) {
-            curComponent.value.checkedFieldsMap[ele.componentId] = checkId
-          }
-        }
-      })
-      const fieldObj = fieldArr.find(element => element.id === checkId)
-      if (!!curComponent.value.treeFieldList.length) {
-        const [fir] = curComponent.value.treeFieldList
-        if (fir && fir.field !== checkId) {
-          const [top] = curComponent.value.treeFieldList || []
-          if (top?.id === fieldObj.id) return
-
-          curComponent.value.treeFieldList = [fieldObj]
-        }
-      } else if (fieldObj) {
-        const [top] = curComponent.value.treeFieldList || []
-        if (top?.id === fieldObj.id) return
-        curComponent.value.treeFieldList = [fieldObj]
-      }
-    }
-  }
-}
 const handleCheckedFieldsChange = (value: string[]) => {
  handleDialogClick()
  const checkedCount = value.length
@ -387,10 +341,8 @@ const handleCheckedFieldsChangeTree = (value: string[]) => {
  isIndeterminate.value = checkedCount > 0 && checkedCount < fields.value.length
  setSameId()
  if (curComponent.value.displayType === '8') return
-  if (curComponent.value.displayType === '9') {
-    setTreeDefault()
-    return
-  }
+  setTreeDefault()
+  setRelationBack()
  setType()
 }

@ -538,6 +490,44 @@ const timeTypeChange = () => {
  timeDialogShow.value = false
 }

+const setTreeDefault = () => {
+  if (curComponent.value.displayType !== '9' || relationshipChartIndex.value !== 0) return
+  if (!!curComponent.value.checkedFields.length) {
+    let tableId = ''
+    fields.value.forEach(ele => {
+      if (
+        curComponent.value.checkedFields.includes(ele.componentId) &&
+        curComponent.value.checkedFieldsMap[ele.componentId] &&
+        !tableId
+      ) {
+        tableId = datasetFieldList.value.find(itx => itx.id === ele.componentId)?.tableId
+      }
+    })
+    if (tableId && !curComponent.value.treeDatasetId) {
+      curComponent.value.treeDatasetId = tableId
+      getOptions(curComponent.value.treeDatasetId, curComponent.value)
+    }
+  }
+}
+
+const setTreeDefaultBatch = ele => {
+  if (!!ele.checkedFields.length) {
+    let tableId = ''
+    fields.value.forEach(ele => {
+      if (
+        ele.checkedFields.includes(ele.componentId) &&
+        ele.checkedFieldsMap[ele.componentId] &&
+        !tableId
+      ) {
+        tableId = datasetFieldList.value.find(itx => itx.id === ele.componentId)?.tableId
+      }
+    })
+    if (tableId && !ele.treeDatasetId) {
+      ele.treeDatasetId = tableId
+    }
+  }
+}
+
 const numTypeChange = () => {
  if (!curComponent.value.checkedFieldsMapArrNum[currentComponentId]) {
    curComponent.value.checkedFieldsMapArrNum[currentComponentId] = []
@ -743,9 +733,8 @@ const setParameters = field => {

  if (notChangeType) return
  setType()
-  if (curComponent.value.displayType === '9') {
-    setTreeDefault()
-  }
+  setTreeDefault()
+  setRelationBack()
 }

 const setType = () => {
@ -793,6 +782,27 @@ const setType = () => {
  }
 }

+let oldDisplayType
+
+const handleSetTypeChange = () => {
+  let displayType = curComponent.value.displayType
+  if (oldDisplayType === '9' && ['0', '8'].includes(displayType)) {
+    curComponent.value.displayType = '9'
+    ElMessageBox.confirm(t('common.changing_the_display'), {
+      confirmButtonType: 'primary',
+      type: 'warning',
+      cancelButtonText: t('common.cancel'),
+      autofocus: false,
+      showClose: false
+    }).then(() => {
+      curComponent.value.displayType = displayType
+      setTypeChange()
+    })
+  } else {
+    setTypeChange()
+  }
+}
+
 const setTypeChange = () => {
  handleDialogClick()
  nextTick(() => {
@ -806,10 +816,13 @@ const setTypeChange = () => {
    ) {
      curComponent.value.timeGranularityMultiple = curComponent.value.timeGranularity
    }
-
-    if (curComponent.value.displayType === '9') {
-      setTreeDefault()
+    setTreeDefault()
+    setRelationBack()
+    if (curComponent.value.displayType === '0' && curComponent.value.treeFieldList?.length) {
+      curComponent.value.treeFieldList = []
+      curComponent.value.treeCheckedList = []
    }
+    oldDisplayType = curComponent.value.displayType
  })
 }

@ -980,6 +993,14 @@ const handleDatasetChange = () => {
  getOptions(curComponent.value.dataset.id, curComponent.value)
 }

+const handleDatasetTreeChange = () => {
+  curComponent.value.treeFieldList = []
+  curComponent.value.treeCheckedList = []
+  relationshipChartIndex.value = 0
+  curComponent.value.oldTreeLoad = true
+  getOptions(curComponent.value.treeDatasetId, curComponent.value)
+}
+
 const handleFieldChange = () => {
  if (!curComponent.value.defaultValueCheck) return
  curComponent.value.defaultValue = curComponent.value.multiple ? [] : undefined
@ -1042,10 +1063,12 @@ const isInRange = (ele, startWindowTime, timeStamp) => {
    dynamicWindow,
    maximumSingleQuery,
    timeNumRange,
+    relativeToCurrentRange,
    relativeToCurrentTypeRange,
    aroundRange
  } = ele.timeRange || {}
  let isDynamicWindowTime = false
+
  const noTime = ele.timeGranularityMultiple.split('time').join('').split('range')[0]
  const queryTimeType = noTime === 'date' ? 'day' : (noTime as ManipulateType)
  if (startWindowTime && dynamicWindow) {
@ -1079,6 +1102,14 @@ const isInRange = (ele, startWindowTime, timeStamp) => {
      case 'lastMonth':
        startTime = getLastStart('month')
        break
+      case 'thisQuarter':
+        startTime = getThisStart('quarter')
+        break
+      case 'thisWeek':
+        startTime = new Date(
+          dayjs().startOf('week').add(1, 'day').startOf('day').format('YYYY/MM/DD HH:mm:ss')
+        )
+        break
      case 'today':
        startTime = getThisStart('day')
        break
@ -1088,6 +1119,9 @@ const isInRange = (ele, startWindowTime, timeStamp) => {
      case 'monthBeginning':
        startTime = getThisStart('month')
        break
+      case 'monthEnd':
+        startTime = getThisEnd('month')
+        break
      case 'yearBeginning':
        startTime = getThisStart('year')
        break
@ -1106,22 +1140,27 @@ const isInRange = (ele, startWindowTime, timeStamp) => {
  }

  if (intervalType === 'timeInterval') {
-    const startTime =
-      regularOrTrends === 'fixed'
-        ? new Date(
-            dayjs(new Date(regularOrTrendsValue[0])).startOf(noTime).format('YYYY/MM/DD HH:mm:ss')
-          )
-        : getAround(relativeToCurrentType, around === 'f' ? 'subtract' : 'add', timeNum)
-    const endTime =
-      regularOrTrends === 'fixed'
-        ? new Date(
-            dayjs(new Date(regularOrTrendsValue[1])).endOf(noTime).format('YYYY/MM/DD HH:mm:ss')
-          )
-        : getAround(
-            relativeToCurrentTypeRange,
-            aroundRange === 'f' ? 'subtract' : 'add',
-            timeNumRange
-          )
+    let endTime
+    if (relativeToCurrentRange === 'custom') {
+      startTime =
+        regularOrTrends === 'fixed'
+          ? new Date(
+              dayjs(new Date(regularOrTrendsValue[0])).startOf(noTime).format('YYYY/MM/DD HH:mm:ss')
+            )
+          : getAround(relativeToCurrentType, around === 'f' ? 'subtract' : 'add', timeNum)
+      endTime =
+        regularOrTrends === 'fixed'
+          ? new Date(
+              dayjs(new Date(regularOrTrendsValue[1])).endOf(noTime).format('YYYY/MM/DD HH:mm:ss')
+            )
+          : getAround(
+              relativeToCurrentTypeRange,
+              aroundRange === 'f' ? 'subtract' : 'add',
+              timeNumRange
+            )
+    } else {
+      ;[startTime, endTime] = getCustomRange(relativeToCurrentRange)
+    }

    return (
      startWindowTime < +new Date(startTime) - 1000 ||
@ -1210,6 +1249,49 @@ const validate = () => {
      return true
    }

+    if (
+      ele.displayType === '0' &&
+      ele.defaultValueCheck &&
+      ((Array.isArray(ele.defaultValue) && !ele.defaultValue.length) || !ele.defaultValue)
+    ) {
+      ElMessage.error(t('report.filter.title'))
+      return true
+    }
+
+    if (ele.displayType === '9') {
+      if (
+        ele.defaultValueCheck &&
+        ((Array.isArray(ele.defaultValue) && !ele.defaultValue.length) || !ele.defaultValue)
+      ) {
+        ElMessage.error(t('report.filter.title'))
+        return true
+      }
+      if (!ele.treeDatasetId) {
+        setTreeDefaultBatch(ele)
+        if (!ele.treeDatasetId) {
+          ElMessage.error(t('data_set.dataset_cannot_be'))
+        }
+        return true
+      }
+
+      if (!ele.treeFieldList?.length) {
+        ElMessage.error(t('common.tree_structure'))
+        return true
+      }
+      if (
+        ele.treeCheckedList
+          ?.slice(0, ele.treeFieldList.length)
+          .some(
+            item =>
+              !item.checkedFields?.length ||
+              item.checkedFields.some(itx => !item.checkedFieldsMap[itx])
+          )
+      ) {
+        ElMessage.error(t('v_query.be_linked_first'))
+        return true
+      }
+    }
+
    if (ele.displayType === '22' && ele.defaultValueCheck) {
      ele.numValueEnd = ele.defaultNumValueEnd
      ele.numValueStart = ele.defaultNumValueStart
@ -1432,10 +1514,6 @@ const validate = () => {
      return false
    }

-    if ([1].includes(+ele.displayType)) {
-      return false
-    }
-
    if (
      ele.displayType !== '9' &&
      ele.optionValueSource === 2 &&
@ -1445,7 +1523,11 @@ const validate = () => {
      return true
    }

-    if (!['9', '22'].includes(ele.displayType) && ele.optionValueSource === 1 && !ele.field.id) {
+    if (
+      !['9', '22', '1', '7'].includes(ele.displayType) &&
+      ele.optionValueSource === 1 &&
+      !ele.field.id
+    ) {
      ElMessage.error(
        !ele.dataset?.id ? t('v_query.option_value_field') : t('v_query.the_data_set')
      )
@ -1458,6 +1540,8 @@ const handleBeforeClose = () => {
  defaultConfigurationRef.value?.mult()
  defaultConfigurationRef.value?.single()
  handleDialogClick()
+  curComponent.value.id = ''
+  relationshipChartIndex.value = 0
  dialogVisible.value = false
 }
 const emits = defineEmits(['queryData'])
@ -1492,6 +1576,8 @@ const confirmClick = () => {
    cascadeArr = []
    queryElement.value.propValue = cloneDeep(conditions.value)
    snapshotStore.recordSnapshotCache('confirmClick')
+    curComponent.value.id = ''
+    relationshipChartIndex.value = 0
    nextTick(() => {
      emits('queryData')
    })
@ -1542,12 +1628,16 @@ const confirmValueSource = () => {
 }

 const setCondition = (queryId: string) => {
-  conditions.value = cloneDeep(props.queryElement.propValue) || []
+  conditions.value = (cloneDeep(props.queryElement.propValue) || []).map(ele =>
+    parameterCompletion(ele)
+  )
  init(queryId)
 }

 const setConditionOut = () => {
-  conditions.value = cloneDeep(props.queryElement.propValue) || []
+  conditions.value = (cloneDeep(props.queryElement.propValue) || []).map(ele =>
+    parameterCompletion(ele)
+  )
  addQueryCriteria()
  init(conditions.value[conditions.value.length - 1].id)
 }
@ -1567,6 +1657,7 @@ const setActiveSelectTab = (arr, id) => {

 const init = (queryId: string) => {
  initDataset()
+  relationshipChartIndex.value = 0
  renameInput.value = []
  handleCondition({ id: queryId })
  cascadeArr = cloneDeep(queryElement.value.cascade || [])
@ -1617,6 +1708,11 @@ const init = (queryId: string) => {
        .filter(ele => !!ele)
    })
    .finally(() => {
+      if (!curComponent.value.treeDatasetId) {
+        nextTick(() => {
+          setTreeDefault()
+        })
+      }
      handleCheckedFieldsChange(curComponent.value.checkedFields)
    })
 }
@ -1625,7 +1721,7 @@ const weightlessness = () => {
  valueSource.value = Array.from(new Set(valueSource.value))
 }

-const parameterCompletion = () => {
+const parameterCompletion = ele => {
  const attributes = {
    timeType: 'fixed',
    hideConditionSwitching: false,
@ -1653,6 +1749,7 @@ const parameterCompletion = () => {
    timeNumRange: 0,
    relativeToCurrentTypeRange: 'year',
    aroundRange: 'f',
+    treeDatasetId: '',
    displayId: '',
    sortId: '',
    sort: 'asc',
@ -1677,18 +1774,26 @@ const parameterCompletion = () => {
      relativeToCurrentTypeRange: 'year',
      aroundRange: 'f'
    },
+    oldTreeLoad: false,
+    treeCheckedList: [],
    treeFieldList: []
  }
  Object.entries(attributes).forEach(([key, val]) => {
-    curComponent.value[key] ?? (curComponent.value[key] = val)
+    ele[key] ?? (ele[key] = val)
  })

-  if (!curComponent.value.timeRange.relativeToCurrentRange) {
-    curComponent.value.timeRange.relativeToCurrentRange = 'custom'
+  if (!ele.treeDatasetId) {
+    ele.treeDatasetId = ele.dataset.id
  }
+
+  if (!ele.timeRange.relativeToCurrentRange) {
+    ele.timeRange.relativeToCurrentRange = 'custom'
+  }
+
+  return ele
 }

-const handleCondition = item => {
+const handleCondition = (item, idx = 0) => {
  handleDialogClick()
  if (activeConditionForRename.id) return
  activeCondition.value = item.id
@ -1780,8 +1885,18 @@ const handleCondition = item => {
  if (!valueSource.value.length) {
    valueSource.value.push('')
  }
-  parameterCompletion()
  nextTick(() => {
+    if (curComponent.value.displayType === '9') {
+      oldDisplayType = '9'
+      handleRelationshipChart(idx, true)
+      if (!curComponent.value.treeDatasetId && fields.value?.length) {
+        nextTick(() => {
+          setTreeDefault()
+        })
+      } else if (curComponent.value.treeDatasetId) {
+        getOptions(curComponent.value.treeDatasetId, curComponent.value)
+      }
+    }
    curComponent.value.showError = showError.value
    curComponent.value.auto && (document.querySelector('.chart-field').scrollTop = 0)
  })
@ -1828,42 +1943,72 @@ const sortComputed = computed(() => {

 const treeDialog = ref()
 const startTreeDesign = () => {
-  const [comId] = curComponent.value.checkedFields
-  const componentObj = fields.value.find(ele => ele.componentId === comId)
  treeDialog.value.init(
-    componentObj?.fields?.dimensionList.filter(
-      ele => ele.deType === +curComponent.value.field.deType
-    ),
+    curComponent.value.dataset.fields.filter(ele => ele.groupType === 'd' && ele.deType === 0),
    curComponent.value.treeFieldList
  )
 }
 const saveTree = arr => {
  curComponent.value.treeFieldList = arr
+  setSameField()
 }
+
+const setSameField = () => {
+  curComponent.value.treeFieldList.forEach((ele, index) => {
+    if (!curComponent.value.treeCheckedList[index]) {
+      curComponent.value.treeCheckedList = [
+        ...curComponent.value.treeCheckedList,
+        {
+          checkedFields: [...curComponent.value.checkedFields],
+          checkedFieldsMap: cloneDeep(curComponent.value.checkedFieldsMap)
+        }
+      ]
+    }
+    fields.value.forEach(item => {
+      const ids = item.fields.dimensionList.map(itx => itx.id)
+      if (ids.includes(ele.id)) {
+        curComponent.value.treeCheckedList[index].checkedFieldsMap[item.componentId] = ele.id
+      }
+    })
+  })
+
+  curComponent.value.checkedFields =
+    curComponent.value.treeCheckedList[relationshipChartIndex.value].checkedFields
+  curComponent.value.checkedFieldsMap =
+    curComponent.value.treeCheckedList[relationshipChartIndex.value].checkedFieldsMap
+}
+
 const showError = computed(() => {
  if (!curComponent.value) return false
-  const { optionValueSource, checkedFieldsMap, checkedFields, field, valueSource, displayType } =
-    curComponent.value
+  const {
+    optionValueSource,
+    checkedFieldsMap,
+    checkedFields,
+    field,
+    valueSource,
+    displayType,
+    treeCheckedList,
+    treeFieldList
+  } = curComponent.value
  const arr = checkedFields.filter(ele => !!checkedFieldsMap[ele])
  if (!checkedFields.length || !arr.length) {
    return true
  }
-  if ([1, 7, 8, 22].includes(+displayType)) {
-    return false
+
+  if (9 === +displayType) {
+    for (const key in treeCheckedList) {
+      if (key > treeFieldList.length) continue
+      const treeArr = treeCheckedList[key].checkedFields.filter(
+        ele => !!treeCheckedList[key].checkedFieldsMap[ele]
+      )
+      if (!treeCheckedList[key].checkedFields.length || !treeArr.length) {
+        return true
+      }
+    }
  }

-  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
-    })
+  if ([1, 7, 8, 22, 9].includes(+displayType)) {
+    return false
  }
  return (optionValueSource === 1 && !field.id) || (optionValueSource === 2 && !valueSource.length)
 })
@ -2091,6 +2236,55 @@ watch(
 const setRenameInput = val => {
  renameInput.value.push(val)
 }
+const relationshipChartIndex = ref(0)
+const notCurrentEle = (ele, index) => {
+  if (activeCondition.value !== ele.id) {
+    handleCondition(ele, index)
+  } else {
+    handleRelationshipChart(index)
+  }
+}
+
+const setRelationBack = () => {
+  curComponent.value.treeCheckedList[relationshipChartIndex.value] = {
+    checkedFields: [...curComponent.value.checkedFields],
+    checkedFieldsMap: cloneDeep(curComponent.value.checkedFieldsMap)
+  }
+}
+const handleRelationshipChart = (index, initShip = false) => {
+  if (curComponent.value.treeCheckedList?.length && !initShip) {
+    curComponent.value.treeCheckedList[relationshipChartIndex.value] = {
+      checkedFields: [...curComponent.value.checkedFields],
+      checkedFieldsMap: cloneDeep(curComponent.value.checkedFieldsMap)
+    }
+  }
+  relationshipChartIndex.value = index
+  if (!curComponent.value?.treeCheckedList?.length && !curComponent.value.oldTreeLoad) {
+    curComponent.value.treeCheckedList = curComponent.value.treeFieldList.map(ele => {
+      return {
+        checkedFields: [...curComponent.value.checkedFields],
+        checkedFieldsMap: curComponent.value.checkedFields.reduce((pre, next) => {
+          pre[next] = ele.id
+          return pre
+        }, {})
+      }
+    })
+  } else if (!curComponent.value?.treeCheckedList?.length && curComponent.value.oldTreeLoad) {
+    curComponent.value.treeCheckedList = curComponent.value.treeFieldList.map(() => {
+      return {
+        checkedFields: [...curComponent.value.checkedFields],
+        checkedFieldsMap: cloneDeep(curComponent.value.checkedFieldsMap)
+      }
+    })
+  }
+  if (!curComponent.value?.treeCheckedList[index]) return
+  const { checkedFields, checkedFieldsMap } = curComponent.value?.treeCheckedList[index]
+  curComponent.value.checkedFields = checkedFields
+  curComponent.value.checkedFieldsMap = checkedFieldsMap
+  const checkedCount = checkedFields?.length
+  checkAll.value = checkedCount === fields.value?.length
+  isIndeterminate.value = checkedCount > 0 && checkedCount < fields.value?.length
+}

 const addOperation = (cmd, condition, index) => {
  switch (cmd) {
@ -2146,7 +2340,8 @@ const renameInputBlur = () => {
 }

 const addQueryCriteria = () => {
-  conditions.value.push(addQueryCriteriaConfig())
+  relationshipChartIndex.value = 0
+  conditions.value.push(parameterCompletion(addQueryCriteriaConfig()))
 }

 const addQueryCriteriaAndSelect = () => {
@ -2191,48 +2386,80 @@ defineExpose({
              :key="element.id"
              @dblclick.stop="addOperation('rename', element, index)"
              @click.stop="handleCondition(element)"
-              class="list-item_primary"
-              :class="element.id === activeCondition && 'active'"
+              class="list-item_box"
+              :style="{
+                marginBottom: element.treeFieldList
+                  ? element.treeFieldList.slice(1).length * 40 + 'px'
+                  : 0
+              }"
            >
-              <el-icon class="handle" style="color:#fff;">
-                <Icon name="icon_drag_outlined"><icon_drag_outlined class="svg-icon" /></Icon>
-              </el-icon>
-              <div class="label flex-align-center icon" :title="element.name">
-                <el-icon
-                  v-if="!element.auto && element.showError"
-                  style="font-size: 16px; color: #f54a45"
+              <div
+                class="list-item_primary"
+                :class="element.id === activeCondition && relationshipChartIndex === 0 && 'active'"
+              >
+                <el-icon class="handle">
+                  <Icon name="icon_drag_outlined"><icon_drag_outlined class="svg-icon" /></Icon>
+                </el-icon>
+                <div class="label flex-align-center icon" :title="element.name">
+                  <el-icon
+                    v-if="!element.auto && element.showError"
+                    style="font-size: 16px; color: #f54a45"
+                  >
+                    <icon name="icon_warning_filled"><icon_warning_filled class="svg-icon" /></icon>
+                  </el-icon>
+                  {{ element.name }}
+                </div>
+                <div class="condition-icon flex-align-center">
+                  <handle-more
+                    @handle-command="cmd => addOperation(cmd, element, index)"
+                    :menu-list="typeList"
+                    :icon-name="more_v"
+                    placement="bottom-end"
+                  ></handle-more>
+                  <el-icon
+                    class="hover-icon"
+                    @click.stop="element.visible = !element.visible"
+                    v-if="element.visible"
+                  >
+                    <Icon name="icon_visible_outlined"
+                      ><icon_visible_outlined class="svg-icon"
+                    /></Icon>
+                  </el-icon>
+                  <el-icon
+                    class="hover-icon"
+                    @click.stop="element.visible = !element.visible"
+                    v-else
+                  >
+                    <Icon name="de_pwd_invisible"><de_pwd_invisible class="svg-icon" /></Icon>
+                  </el-icon>
+                </div>
+                <div @click.stop v-if="activeConditionForRename.id === element.id" class="rename">
+                  <el-input
+                    @blur="renameInputBlur"
+                    :ref="setRenameInput"
+                    v-model="activeConditionForRename.name"
+                  ></el-input>
+                </div>
+              </div>
+              <template v-if="element.treeFieldList">
+                <div
+                  :class="
+                    element.id === activeCondition &&
+                    relationshipChartIndex === index + 1 &&
+                    'active'
+                  "
+                  class="list-item_primary list-tree_primary"
+                  :style="{
+                    top: 40 * (index + 1) + 'px',
+                    paddingLeft: 32 + 16 * (index + 1) + 'px'
+                  }"
+                  v-for="(itx, index) in element.treeFieldList.slice(1)"
+                  :key="itx.field"
+                  @click.stop="notCurrentEle(element, index + 1)"
                >
-                  <icon name="icon_warning_filled"><icon_warning_filled class="svg-icon" /></icon>
-                </el-icon>
-                {{ element.name }}
-              </div>
-              <div class="condition-icon flex-align-center">
-                <handle-more
-                  @handle-command="cmd => addOperation(cmd, element, index)"
-                  :menu-list="typeList"
-                  :icon-name="more_v"
-                  placement="bottom-end"
-                ></handle-more>
-                <el-icon
-                  class="hover-icon"
-                  @click.stop="element.visible = !element.visible"
-                  v-if="element.visible"
-                >
-                  <Icon name="icon_visible_outlined"
-                    ><icon_visible_outlined class="svg-icon"
-                  /></Icon>
-                </el-icon>
-                <el-icon class="hover-icon" @click.stop="element.visible = !element.visible" v-else>
-                  <Icon name="de_pwd_invisible"><de_pwd_invisible class="svg-icon" /></Icon>
-                </el-icon>
-              </div>
-              <div @click.stop v-if="activeConditionForRename.id === element.id" class="rename">
-                <el-input
-                  @blur="renameInputBlur"
-                  :ref="setRenameInput"
-                  v-model="activeConditionForRename.name"
-                ></el-input>
-              </div>
+                  {{ itx.name }}
+                </div>
+              </template>
            </div>
          </template>
        </draggable>
@ -2246,7 +2473,7 @@ defineExpose({
              <el-radio :disabled="!curComponent.auto" :label="true">
                <div class="flex-align-center">
                  {{ t('chart.margin_model_auto') }}
-                  <el-tooltip placement="top">
+                  <el-tooltip effect="dark" placement="top">
                    <template #content>
                      <div>
                        {{ t('v_query.be_switched_to') }}
@ -2622,13 +2849,19 @@ defineExpose({
          <div class="title flex-align-center">
            {{ t('v_query.query_condition_configuration') }}
            <el-checkbox
-              :disabled="curComponent.auto"
+              :disabled="
+                curComponent.auto ||
+                (curComponent.displayType === '9' && relationshipChartIndex !== 0)
+              "
              v-model="curComponent.required"
              :label="t('v_query.required_items')"
            />
          </div>
          <div
-            v-show="showConfiguration && !showTypeError && !showDatasetError"
+            v-show="
+              (curComponent.displayType !== '9' && showConfiguration && !showTypeError) ||
+              (curComponent.displayType === '9' && relationshipChartIndex == 0)
+            "
            class="configuration-list"
          >
            <div class="list-item">
@ -2636,7 +2869,7 @@ defineExpose({
              <div class="value">
                <el-select
                  @focus="handleDialogClick"
-                  @change="setTypeChange"
+                  @change="handleSetTypeChange"
                  v-model="curComponent.displayType"
                >
                  <el-option
@ -2706,6 +2939,42 @@ defineExpose({
                </el-radio-group>
              </div>
            </div>
+            <div class="list-item" v-if="curComponent.displayType === '9'">
+              <div :title="t('copilot.pls_choose_dataset')" class="label ellipsis">
+                {{ t('copilot.pls_choose_dataset') }}
+              </div>
+              <div class="value">
+                <el-tree-select
+                  :teleported="false"
+                  v-model="curComponent.treeDatasetId"
+                  :data="datasetTree"
+                  :placeholder="t('copilot.pls_choose_dataset')"
+                  @change="handleDatasetTreeChange"
+                  :props="dsSelectProps"
+                  placement="bottom"
+                  :render-after-expand="false"
+                  filterable
+                  popper-class="dataset-tree"
+                >
+                  <template #default="{ node, data }">
+                    <div class="content">
+                      <el-icon size="18px" v-if="!data.leaf">
+                        <Icon><dvFolder class="svg-icon" /></Icon>
+                      </el-icon>
+                      <el-icon size="18px" v-if="data.leaf">
+                        <Icon><icon_dataset class="svg-icon" /></Icon>
+                      </el-icon>
+                      <span
+                        class="label-tree ellipsis"
+                        style="margin-left: 8px"
+                        :title="node.label"
+                        >{{ node.label }}</span
+                      >
+                    </div>
+                  </template>
+                </el-tree-select>
+              </div>
+            </div>
            <div class="list-item" v-if="curComponent.displayType === '9'">
              <div class="label" style="width: 135px; height: 26px; line-height: 26px">
                {{ t('v_query.tree_structure_design') }}
@ -2715,7 +2984,7 @@ defineExpose({
                  @click="startTreeDesign"
                >
                  <template #icon>
-                    <icon name="icon_edit_outlined"><icon_edit_outlined class="svg-icon" /></icon>
+                    <icon><icon_edit_outlined class="svg-icon" /></icon>
                  </template>
                </el-button>
              </div>
@ -2731,7 +3000,7 @@ defineExpose({
                    >
                    <span class="field-type"
                      ><el-icon>
-                        <Icon :className="`field-icon-${fieldType[ele.deType]}`"
+                        <Icon
                          ><component
                            :class="`field-icon-${fieldType[ele.deType]}`"
                            class="svg-icon"
@ -2739,10 +3008,18 @@ defineExpose({
                          ></component
                        ></Icon> </el-icon
                    ></span>
-                    <span class="field-tree_name">{{ ele.name }}</span>
+                    <span class="field-tree_name ellipsis" :title="ele.name">{{ ele.name }}</span>
+                    <span class="field-relationship_chart" v-if="index === 0">{{
+                      t('common.associated_chart_first')
+                    }}</span>
+                    <span class="field-relationship_chart" v-else>
+                      <el-button text @click="handleRelationshipChart(index)">
+                        {{ t('common.associated_chart') }}
+                      </el-button>
+                    </span>
                  </div>
                </template>
-                <el-button @click="startTreeDesign" v-else text>
+                <el-button class="start-tree_design" @click="startTreeDesign" v-else text>
                  <template #icon>
                    <Icon name="icon_add_outlined"><icon_add_outlined class="svg-icon" /></Icon>
                  </template>
@ -3158,8 +3435,11 @@ defineExpose({
          <div v-if="showTypeError && showConfiguration" class="empty">
            <empty-background :description="t('v_query.cannot_be_performed')" img-type="error" />
          </div>
-          <div v-else-if="showDatasetError && showConfiguration" class="empty">
-            <empty-background :description="t('v_query.cannot_be_displayed')" img-type="error" />
+          <div
+            v-else-if="curComponent.displayType === '9' && relationshipChartIndex !== 0"
+            class="empty"
+          >
+            <empty-background :description="t('common.other_levels')" img-type="error" />
          </div>
          <div v-else-if="!showConfiguration" class="empty">
            <empty-background :description="t('v_query.be_linked_first')" img-type="noneWhite" />
@ -3169,10 +3449,10 @@ defineExpose({
    </div>
    <template #footer>
      <div class="dialog-footer">
-        <el-button type="primary" class="query-cascade" @click="openCascadeDialog">{{
+        <el-button class="query-cascade" @click="openCascadeDialog">{{
          t('v_query.component_cascade_configuration')
        }}</el-button>
-        <el-button @click="cancelClick">{{ t('chart.cancel') }}</el-button>
+        <el-button @click="cancelClick">{{ t('chart.cancel') }} </el-button>
        <el-button @click="confirmClick" type="primary">{{ t('chart.confirm') }} </el-button>
      </div>
    </template>
@ -3235,7 +3515,7 @@ defineExpose({
  min-width: 210px !important;
 }
 .ed-select-dropdown__header {
-  padding: 0 8px;
+  padding: 0 8px !important;
  .params-select--header {
    --ed-tabs-header-height: 32px;
    .ed-tabs__item {
@ -3287,11 +3567,11 @@ defineExpose({
    justify-content: center;
  }

-  .ed-input .ed-select__prefix--light {
-    border-right: none;
-    padding: 0;
+  .ed-select__prefix {
    font-size: 16px;
-    margin-right: 4px;
+    &::after {
+      display: none;
+    }
  }
  .container {
    font-size: 14px;
@ -3331,6 +3611,17 @@ defineExpose({
          color: var(--ed-color-primary);
        }
      }
+
+      .list-item_box {
+        width: 100%;
+        position: relative;
+        .list-tree_primary {
+          position: absolute;
+          left: 0;
+          padding: 8px 32px;
+          width: 100%;
+        }
+      }
      .list-item_primary {
        border-radius: 0;
        position: relative;
@ -3533,13 +3824,13 @@ defineExpose({
          flex-wrap: wrap;
          .search-tree {
            width: 100%;
-            height: 200px;
+            height: 216px;
            margin-top: 8px;
            position: relative;
            padding: 16px;
            box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.12);

-            .ed-button {
+            .start-tree_design {
              position: absolute;
              left: 50%;
              top: 50%;
@ -3563,6 +3854,11 @@ defineExpose({

              .field-tree_name {
                margin-left: 8px;
+                width: 100px;
+              }
+
+              .field-relationship_chart {
+                margin-left: 8px;
              }
            }
          }
--- a/core/core-frontend/src/custom-component/v-query/RangeFilterTime.vue
+++ b/core/core-frontend/src/custom-component/v-query/RangeFilterTime.vue
@ -1,9 +1,10 @@
 <script lang="ts" setup>
-import { toRefs, computed, PropType } from 'vue'
+import { toRefs, computed, PropType, watch } from 'vue'
 import { type TimeRange } from './time-format'
 import { useI18n } from '@/hooks/web/useI18n'
 import DynamicTime from './DynamicTimeFiltering.vue'
 import DynamicTimeRange from './DynamicTimeRangeFiltering.vue'
+import { ManipulateType } from 'dayjs'
 const props = defineProps({
  timeRange: {
    type: Object as PropType<TimeRange>,
@ -264,6 +265,40 @@ const relativeToCurrentListRange = computed(() => {
    }
  ]
 })
+
+watch(
+  () => relativeToCurrentListRange.value,
+  val => {
+    if (!val.some(ele => ele.value === timeRange.value.relativeToCurrentRange)) {
+      timeRange.value.relativeToCurrentRange = val[0].value
+    }
+  },
+  { immediate: true }
+)
+
+watch(
+  () => relativeToCurrentList.value,
+  val => {
+    if (!val.some(ele => ele.value === timeRange.value.relativeToCurrent)) {
+      timeRange.value.relativeToCurrent = val[0].value
+    }
+  },
+  { immediate: true }
+)
+
+watch(
+  () => relativeToCurrentTypeList.value,
+  val => {
+    if (!val.some(ele => ele.value === timeRange.value.relativeToCurrentType)) {
+      timeRange.value.relativeToCurrentType = val[0].value as ManipulateType
+    }
+
+    if (!val.some(ele => ele.value === timeRange.value.relativeToCurrentTypeRange)) {
+      timeRange.value.relativeToCurrentTypeRange = val[0].value as ManipulateType
+    }
+  },
+  { immediate: true }
+)
 </script>

 <template>
@ -448,6 +483,9 @@ const relativeToCurrentListRange = computed(() => {
    --ed-radio-input-height: 16px;
    --ed-radio-input-width: 16px;
  }
+  .ed-select {
+    --ed-select-width: 100px;
+  }
  .title {
    font-size: 14px;
    font-weight: 500;
--- a/core/core-frontend/src/custom-component/v-query/Select.vue
+++ b/core/core-frontend/src/custom-component/v-query/Select.vue
@ -4,6 +4,7 @@ import {
  toRefs,
  PropType,
  onBeforeMount,
+  onMounted,
  shallowRef,
  watch,
  nextTick,
@ -171,6 +172,7 @@ const getCascadeFieldId = () => {
  cascade.value.forEach(ele => {
    let condition = null
    ele.forEach(item => {
+      // eslint-disable-next-line
      const [_, queryId, fieldId] = item.datasetId.split('--')
      if (queryId === config.value.id && condition) {
        if (item.fieldId) {
@ -617,6 +619,34 @@ onBeforeMount(() => {
  })
 })

+const isDataV = ref(false)
+
+const popperClass = computed(() => {
+  let str = 'filter-select-popper_class'
+  if (visible.value) {
+    str = 'load-select ' + str
+  }
+
+  if (isDataV.value) {
+    str = str + ' color-scrollbar__thumb'
+  }
+  return str
+})
+
+onMounted(() => {
+  isDataV.value =
+    Boolean(document.querySelector('#canvas-dv-outer')) ||
+    Boolean(document.querySelector('.datav-preview'))
+})
+
+const tagWidth = computed(() => {
+  return Math.min((getCustomWidth() - 60) / 2, 50) + 'px'
+})
+
+const tagTextWidth = computed(() => {
+  return Math.min((getCustomWidth() - 60) / 2 - 25, 40) + 'px'
+})
+
 defineExpose({
  displayTypeChange,
  mult,
@ -635,9 +665,7 @@ defineExpose({
    filterable
    @click="selectHideClick"
    @change="handleValueChange"
-    :popper-class="
-      visible ? 'load-select filter-select-popper_class' : 'filter-select-popper_class'
-    "
+    :popper-class="popperClass"
    multiple
    show-checked
    scrollbar-always-on
@ -661,9 +689,7 @@ defineExpose({
    :style="selectStyle"
    filterable
    radio
-    :popper-class="
-      visible ? 'load-select filter-select-popper_class' : 'filter-select-popper_class'
-    "
+    :popper-class="popperClass"
    :options="options"
  >
    <template #default="{ item }">
@ -705,4 +731,23 @@ defineExpose({
    color: #1f2329;
  }
 }
+
+.color-scrollbar__thumb {
+  .ed-scrollbar__thumb {
+    background: #bbbfc4 !important;
+    opacity: 1 !important;
+  }
+}
+</style>
+
+<style lang="less" scoped>
+:deep(.ed-select__selected-item) {
+  .ed-tag {
+    max-width: v-bind(tagWidth) !important;
+  }
+
+  .ed-select__tags-text {
+    max-width: v-bind(tagTextWidth) !important;
+  }
+}
 </style>
--- a/core/core-frontend/src/custom-component/v-query/TextSearch.vue
+++ b/core/core-frontend/src/custom-component/v-query/TextSearch.vue
@ -181,7 +181,8 @@ const handleInnerMouseDown = e => {
  .condition-type {
    display: flex;
    position: relative;
-    :deep(.ed-input__wrapper) {
+    :deep(.ed-input__wrapper),
+    :deep(.ed-select__wrapper) {
      border: none;
      border-radius: 0;
      box-shadow: none !important;
--- a/core/core-frontend/src/custom-component/v-query/Time.vue
+++ b/core/core-frontend/src/custom-component/v-query/Time.vue
@ -7,7 +7,13 @@ import { type TimeRange } from './time-format'
 import dayjs from 'dayjs'
 import { useI18n } from '@/hooks/web/useI18n'
 import { useShortcuts } from './shortcuts'
-import { getThisStart, getLastStart, getAround } from './time-format-dayjs'
+import {
+  getThisStart,
+  getThisEnd,
+  getLastStart,
+  getAround,
+  getCustomRange
+} from './time-format-dayjs'
 import VanPopup from 'vant/es/popup'
 import VanDatePicker from 'vant/es/date-picker'
 import VanTimePicker from 'vant/es/time-picker'
@ -139,6 +145,9 @@ watch(
 )

 const handleValueChange = () => {
+  selectValue.value = Array.isArray(selectValue.value)
+    ? selectValue.value.map(ele => ele && dayjs(ele).format('YYYY/MM/DD HH:mm:ss'))
+    : selectValue.value && dayjs(selectValue.value).format('YYYY/MM/DD HH:mm:ss')
  const value = Array.isArray(selectValue.value) ? [...selectValue.value] : selectValue.value
  if (!props.isConfig) {
    config.value.selectValue = Array.isArray(selectValue.value)
@ -251,6 +260,7 @@ const disabledDate = val => {
    regularOrTrends,
    regularOrTrendsValue,
    relativeToCurrent,
+    relativeToCurrentRange,
    timeNum,
    relativeToCurrentType,
    around,
@ -261,6 +271,7 @@ const disabledDate = val => {
    aroundRange
  } = config.value.timeRange || {}
  let isDynamicWindowTime = false
+
  if (startWindowTime.value && dynamicWindow) {
    isDynamicWindowTime =
      dayjs(startWindowTime.value)
@ -297,6 +308,14 @@ const disabledDate = val => {
      case 'lastMonth':
        startTime = getLastStart('month')
        break
+      case 'thisQuarter':
+        startTime = getThisStart('quarter')
+        break
+      case 'thisWeek':
+        startTime = new Date(
+          dayjs().startOf('week').add(1, 'day').startOf('day').format('YYYY/MM/DD HH:mm:ss')
+        )
+        break
      case 'today':
        startTime = getThisStart('day')
        break
@ -306,6 +325,9 @@ const disabledDate = val => {
      case 'monthBeginning':
        startTime = getThisStart('month')
        break
+      case 'monthEnd':
+        startTime = getThisEnd('month')
+        break
      case 'yearBeginning':
        startTime = getThisStart('year')
        break
@ -325,26 +347,31 @@ const disabledDate = val => {
  }

  if (intervalType === 'timeInterval') {
-    const startTime =
-      regularOrTrends === 'fixed'
-        ? new Date(
-            dayjs(new Date(regularOrTrendsValue[0]))
-              .startOf(queryTimeType.value)
-              .format('YYYY/MM/DD HH:mm:ss')
-          )
-        : getAround(relativeToCurrentType, around === 'f' ? 'subtract' : 'add', timeNum)
-    const endTime =
-      regularOrTrends === 'fixed'
-        ? new Date(
-            dayjs(new Date(regularOrTrendsValue[1]))
-              .endOf(queryTimeType.value)
-              .format('YYYY/MM/DD HH:mm:ss')
-          )
-        : getAround(
-            relativeToCurrentTypeRange,
-            aroundRange === 'f' ? 'subtract' : 'add',
-            timeNumRange
-          )
+    let endTime
+    if (relativeToCurrentRange === 'custom') {
+      startTime =
+        regularOrTrends === 'fixed'
+          ? new Date(
+              dayjs(new Date(regularOrTrendsValue[0]))
+                .startOf(queryTimeType.value)
+                .format('YYYY/MM/DD HH:mm:ss')
+            )
+          : getAround(relativeToCurrentType, around === 'f' ? 'subtract' : 'add', timeNum)
+      endTime =
+        regularOrTrends === 'fixed'
+          ? new Date(
+              dayjs(new Date(regularOrTrendsValue[1]))
+                .endOf(queryTimeType.value)
+                .format('YYYY/MM/DD HH:mm:ss')
+            )
+          : getAround(
+              relativeToCurrentTypeRange,
+              aroundRange === 'f' ? 'subtract' : 'add',
+              timeNumRange
+            )
+    } else {
+      ;[startTime, endTime] = getCustomRange(relativeToCurrentRange)
+    }
    return (
      timeStamp < +new Date(startTime) - 1000 ||
      timeStamp > +new Date(endTime) ||
@ -388,21 +415,24 @@ const selectSecond = ref(false)

 const setArrValue = () => {
  currentDate.value = currentDate.value.slice(0, getIndex() + 1)
+  const timeFormat = [1, 2].includes(currentDate.value.length)
+    ? currentDate.value.concat(Array([0, 2, 1][currentDate.value.length]).fill('01'))
+    : currentDate.value
  if (isRange.value) {
    const [start, end] = selectValue.value || []
    if (selectSecond.value) {
      selectValue.value = [
-        start ? start : new Date(`${currentDate.value.join('/')} ${currentTime.value.join(':')}`),
-        new Date(`${currentDate.value.join('/')} ${currentTime.value.join(':')}`)
+        start ? start : new Date(`${timeFormat.join('/')} ${currentTime.value.join(':')}`),
+        new Date(`${timeFormat.join('/')} ${currentTime.value.join(':')}`)
      ]
    } else {
      selectValue.value = [
-        new Date(`${currentDate.value.join('/')} ${currentTime.value.join(':')}`),
-        end ? end : new Date(`${currentDate.value.join('/')} ${currentTime.value.join(':')}`)
+        new Date(`${timeFormat.join('/')} ${currentTime.value.join(':')}`),
+        end ? end : new Date(`${timeFormat.join('/')} ${currentTime.value.join(':')}`)
      ]
    }
  } else {
-    selectValue.value = new Date(`${currentDate.value.join('/')} ${currentTime.value.join(':')}`)
+    selectValue.value = new Date(`${timeFormat.join('/')} ${currentTime.value.join(':')}`)
  }
 }

--- a/core/core-frontend/src/custom-component/v-query/Tree.vue
+++ b/core/core-frontend/src/custom-component/v-query/Tree.vue
@ -66,50 +66,58 @@ const placeholderText = computed(() => {
  return ' '
 })
 const { config } = toRefs(props)
-
+const fromTreeSelectConfirm = ref(false)
 const multiple = ref(false)
-
 const treeSelectConfirm = val => {
  treeValue.value = val
  handleValueChange()
 }

 const handleValueChange = () => {
+  fromTreeSelectConfirm.value = true
  const value = Array.isArray(treeValue.value) ? [...treeValue.value] : treeValue.value
  if (!props.isConfig) {
    config.value.selectValue = Array.isArray(treeValue.value)
      ? [...treeValue.value]
      : treeValue.value
    nextTick(() => {
+      fromTreeSelectConfirm.value = false
      isConfirmSearch(config.value.id)
    })
    return
  }
  config.value.defaultValue = value
+  fromTreeSelectConfirm.value = false
 }

+const changeFromId = ref(false)
 watch(
-  () => config.value.defaultValue,
-  val => {
-    if (config.value.multiple) {
-      treeValue.value = Array.isArray(val) ? [...val] : val
-    }
+  () => config.value.id,
+  () => {
+    changeFromId.value = true
+    init()
    nextTick(() => {
-      multiple.value = config.value.multiple
+      changeFromId.value = false
    })
  }
 )
-
+let oldId
 watch(
  () => config.value.treeFieldList,
-  () => {
+  val => {
+    let idStr = val.map(ele => ele.id).join('-')
+    if (changeFromId.value || idStr === oldId) return
+    oldId = idStr
    treeValue.value = config.value.multiple ? [] : undefined
+    config.value.defaultValue = config.value.multiple ? [] : undefined
+    config.value.selectValue = config.value.multiple ? [] : undefined
    showOrHide.value = false
    getTreeOption()
  }
 )

 const init = () => {
+  loading.value = true
  const { defaultValueCheck, multiple: plus, defaultValue } = config.value
  if (defaultValueCheck) {
    config.value.selectValue = Array.isArray(defaultValue)
@ -121,17 +129,24 @@ const init = () => {
    treeValue.value = plus ? [] : undefined
  }
  nextTick(() => {
+    oldId = config.value.treeFieldList?.map(ele => ele.id).join('-')
    multiple.value = config.value.multiple
  })
  getTreeOption()
 }

-watch(
-  () => config.value.id,
-  () => {
-    init()
-  }
-)
+const tagWidth = computed(() => {
+  return Math.min(getCustomWidth() / 3, 50) + 'px'
+})
+
+const tagsWidth = computed(() => {
+  return getCustomWidth() - 40 + 'px'
+})
+
+const tagTextWidth = computed(() => {
+  return Math.min(getCustomWidth() / 3, 50) - 25 + 'px'
+})
+
 const showOrHide = ref(true)
 const queryConditionWidth = inject('com-width', Function, true)
 const isConfirmSearch = inject('is-confirm-search', Function, true)
@ -148,12 +163,27 @@ onMounted(() => {
 })

 watch(
-  () => config.value.selectValue,
+  () => config.value.defaultValue,
  val => {
    if (props.isConfig) return
    if (config.value.multiple) {
      treeValue.value = Array.isArray(val) ? [...val] : val
    }
+    nextTick(() => {
+      multiple.value = config.value.multiple
+    })
+  }
+)
+
+watch(
+  () => config.value.selectValue,
+  val => {
+    if (props.isConfig || fromTreeSelectConfirm.value) return
+
+    if (config.value.multiple) {
+      treeValue.value = Array.isArray(val) ? [...val] : val
+    }
+
    nextTick(() => {
      multiple.value = config.value.multiple
      if (!config.value.multiple) {
@ -164,11 +194,12 @@ watch(
    })
  }
 )
+
 const showWholePath = ref(false)
 watch(
  () => config.value.multiple,
  val => {
-    if (!props.isConfig) return
+    if (!props.isConfig || changeFromId.value) return
    showWholePath.value = false
    if (val) {
      treeValue.value = []
@ -227,14 +258,14 @@ watch(
    }
  }
 )
-const fakeValue = ''
+const fakeValue = ref('')
 const treeValue = ref()
 const getCustomWidth = () => {
  if (placeholder?.value?.placeholderShow) {
-    if (props.config.queryConditionWidth === undefined) {
-      return queryConditionWidth()
+    if (props.config.queryConditionWidth !== undefined) {
+      return props.config.queryConditionWidth
    }
-    return props.config.queryConditionWidth
+    return queryConditionWidth()
  }
  return 227
 }
@ -253,12 +284,13 @@ const selectStyle = computed(() => {
    :render-after-expand="false"
    show-checkbox
    showBtn
+    @change="handleValueChange"
    :placeholder="placeholderText"
    collapse-tags
    :filter-node-method="filterMethod"
    :showWholePath="showWholePath"
    collapse-tags-tooltip
-    key="multipleTree"
+    :key="'multipleTree' + getCustomWidth()"
    filterable
    :style="selectStyle"
    multiple
@ -273,7 +305,7 @@ const selectStyle = computed(() => {
    :placeholder="placeholderText"
    :render-after-expand="false"
    v-else-if="!multiple && !loading"
-    key="singleTree"
+    :key="'singleTree' + getCustomWidth()"
    :showWholePath="showWholePath"
    :style="selectStyle"
    filterable
@ -294,4 +326,15 @@ const selectStyle = computed(() => {
 :deep(.ed-select-tags-wrapper) {
  display: inline-flex !important;
 }
+
+:deep(.ed-select__tags) {
+  max-width: v-bind(tagsWidth) !important;
+  .ed-tag {
+    max-width: v-bind(tagWidth);
+  }
+
+  .ed-select__tags-text {
+    max-width: v-bind(tagTextWidth) !important;
+  }
+}
 </style>
--- a/core/core-frontend/src/custom-component/v-query/TreeFieldDialog.vue
+++ b/core/core-frontend/src/custom-component/v-query/TreeFieldDialog.vue
@ -39,7 +39,7 @@ const cancelClick = () => {
 const setCascadeArrBack = () => {
  let isError = false
  const arr = cloneDeep(treeList.value).map(item => {
-    if (!item.field) {
+    if (!item.field?.id) {
      isError = true
    }
    return item.field
@ -80,7 +80,7 @@ defineExpose({
  <el-dialog
    v-model="dialogVisible"
    width="600"
-    custom-class="tree-field_dialog"
+    modal-class="tree-field_dialog"
    :before-close="handleBeforeClose"
    @mousedown.stop
    @mousedup.stop
@ -102,12 +102,7 @@ defineExpose({
      <div class="cascade-item" v-for="(ele, idx) in treeList" :key="ele.id">
        <div class="label">{{ t('visualization.level') }}{{ indexNumCascade[idx] }}</div>
        <div class="item-name">
-          <el-select
-            :disabled="idx === 0 && ele.field"
-            value-key="id"
-            v-model="ele.field"
-            style="width: 300px"
-          >
+          <el-select value-key="id" v-model="ele.field" style="width: 300px">
            <el-option
              :disabled="disableFieldArr.includes(item.id)"
              v-for="item in datasetMap"
@ -117,7 +112,7 @@ defineExpose({
            />
          </el-select>
        </div>
-        <el-button v-show="idx !== 0" @click="deleteCascade(idx)" class="cascade-delete" text>
+        <el-button @click="deleteCascade(idx)" class="cascade-delete" text>
          <template #icon>
            <Icon name="icon_delete-trash_outlined"
              ><icon_deleteTrash_outlined class="svg-icon"
--- a/core/core-frontend/src/custom-component/v-query/com-info.ts
+++ b/core/core-frontend/src/custom-component/v-query/com-info.ts
@ -25,6 +25,18 @@ export const comInfo = () => {
              com => !['VQuery', 'DeTabs'].includes(com.innerType) && com.component !== 'Group'
            )
          ]
+
+          itx.componentData.forEach(element => {
+            if (element.component === 'Group') {
+              arr = [
+                ...arr,
+                element.propValue.filter(
+                  coms =>
+                    !['VQuery', 'DeTabs'].includes(coms.innerType) && coms.component !== 'Group'
+                )
+              ]
+            }
+          })
        })
      } else if (ele.component === 'Group') {
        arr = [
--- a/core/core-frontend/src/custom-component/v-query/time-format-dayjs.ts
+++ b/core/core-frontend/src/custom-component/v-query/time-format-dayjs.ts
@ -1,10 +1,10 @@
 import dayjs from 'dayjs'
 import type { ManipulateType } from 'dayjs'
-function getThisStart(val = 'month' as ManipulateType) {
+function getThisStart(val = 'month' as ManipulateType | 'quarter') {
  return new Date(dayjs().startOf(val).format('YYYY/MM/DD HH:mm:ss'))
 }

-function getThisEnd(val = 'month' as ManipulateType) {
+function getThisEnd(val = 'month' as ManipulateType | 'quarter') {
  return new Date(dayjs().endOf(val).format('YYYY/MM/DD HH:mm:ss'))
 }

@ -17,9 +17,19 @@ function getLastEnd(val = 'month' as ManipulateType) {
 }

 function getAround(val = 'month' as ManipulateType, type = 'add', num = 0) {
+  if (val === 'week') {
+    return new Date(dayjs().endOf('week').add(1, 'day').endOf('day').format('YYYY/MM/DD HH:mm:ss'))
+  }
  return new Date(dayjs()[type](num, val).startOf('day').format('YYYY/MM/DD HH:mm:ss'))
 }

+function getThisWeek(): [Date, Date] {
+  return [
+    new Date(dayjs().startOf('week').add(1, 'day').startOf('day').format('YYYY/MM/DD HH:mm:ss')),
+    new Date(dayjs().endOf('week').add(1, 'day').endOf('day').format('YYYY/MM/DD HH:mm:ss'))
+  ]
+}
+
 function getCustomRange(relativeToCurrentRange: string): [Date, Date] {
  switch (relativeToCurrentRange) {
    case 'thisYear':
@ -30,6 +40,10 @@ function getCustomRange(relativeToCurrentRange: string): [Date, Date] {
      return [getThisStart('month'), getThisEnd('month')]
    case 'lastMonth':
      return [getLastStart('month'), getLastEnd('month')]
+    case 'thisQuarter':
+      return [getThisStart('quarter'), getThisEnd('quarter')]
+    case 'thisWeek':
+      return getThisWeek()
    case 'LastThreeMonths':
      return [
        new Date(dayjs().subtract(3, 'month').startOf('month').format('YYYY/MM/DD HH:mm:ss')),
@ -51,7 +65,7 @@ function getCustomRange(relativeToCurrentRange: string): [Date, Date] {
      return [getLastStart('day'), getLastEnd('day')]
    case 'LastThreeDays':
      return [
-        new Date(dayjs().subtract(3, 'day').startOf('day').format('YYYY/MM/DD HH:mm:ss')),
+        new Date(dayjs().subtract(2, 'day').startOf('day').format('YYYY/MM/DD HH:mm:ss')),
        getThisEnd('day')
      ]
    case 'monthBeginning':
--- a/core/core-frontend/src/custom-component/v-query/time-format.ts
+++ b/core/core-frontend/src/custom-component/v-query/time-format.ts
@ -1,20 +1,19 @@
 import type { ManipulateType } from 'dayjs'
 import dayjs from 'dayjs'
 function getThisYear() {
-  return new Date(`${new Date().getFullYear()}/1`)
+  return new Date(dayjs().startOf('year').format('YYYY/MM/DD HH:mm:ss'))
 }

 function getLastYear() {
-  return new Date(`${new Date().getFullYear() - 1}/1`)
+  return new Date(dayjs().subtract(1, 'year').startOf('year').format('YYYY/MM/DD HH:mm:ss'))
 }

 function getNextYear() {
-  return new Date(`${new Date().getFullYear() + 1}/1`)
+  return new Date(dayjs().add(1, 'year').startOf('year').format('YYYY/MM/DD HH:mm:ss'))
 }

 function getThisMonth() {
-  const date = new Date()
-  return new Date(`${date.getFullYear()}/${date.getMonth() + 1}`)
+  return new Date(dayjs().startOf('month').format('YYYY/MM/DD HH:mm:ss'))
 }

 function getLastStart(val = 'month' as ManipulateType) {
@ -26,23 +25,19 @@ function getLastMonth() {
 }

 function getNextMonth() {
-  const date = getCustomTime(1, 'month', 'month', 'b')
-  return new Date(`${date.getFullYear()}/${date.getMonth() + 1}`)
+  return new Date(dayjs().add(1, 'month').startOf('month').format('YYYY/MM/DD HH:mm:ss'))
 }

 function getToday() {
-  const date = new Date()
-  return new Date(`${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`)
+  return new Date(dayjs().startOf('day').format('YYYY/MM/DD HH:mm:ss'))
 }

 function getYesterday() {
-  const date = new Date(new Date().getTime() - 24 * 60 * 60 * 1000)
-  return new Date(`${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`)
+  return new Date(dayjs().subtract(1, 'day').startOf('day').format('YYYY/MM/DD HH:mm:ss'))
 }

 function getMonthBeginning() {
-  const date = new Date()
-  return new Date(`${date.getFullYear()}/${date.getMonth() + 1}/1`)
+  return new Date(dayjs().startOf('month').format('YYYY/MM/DD HH:mm:ss'))
 }

 function getMonthEnd() {
@ -50,99 +45,50 @@ function getMonthEnd() {
 }

 function getYearBeginning() {
-  const date = new Date()
-  return new Date(`${date.getFullYear()}/1/1`)
+  return new Date(dayjs().startOf('year').format('YYYY/MM/DD HH:mm:ss'))
 }

-function getYearMonthRange(result, flag, sort) {
+function getYearMonthRange(result, sort, type) {
  const [direction, scene] = (sort || '').split('-')
-  const [dateTimeType] = (flag || '').split('range')
  if (direction === 'start') {
-    return result
+    return new Date(result.startOf(type).format('YYYY/MM/DD HH:mm:ss'))
  } else if (direction === 'end') {
    if (scene === 'config') {
-      return result
+      return new Date(result.format('YYYY/MM/DD HH:mm:ss'))
    } else if (scene === 'panel') {
-      return new Date(
-        +getCustomTime(1, dateTimeType, dateTimeType, 'b', null, flag, 'start-config', result) -
-          1000
-      )
+      return new Date(dayjs(result).endOf(type).format('YYYY/MM/DD HH:mm:ss'))
    }
  }
 }

 function getCustomTime(
  timeNum: number,
-  timeType: string,
+  timeType: ManipulateType | 'date',
  timeGranularity: string,
  around: string,
  arbitraryTime?: Date,
  timeGranularityMultiple?: string,
-  sort?: string,
-  withDate?: Date
+  sort?: string
 ) {
-  const date = withDate ? new Date(withDate) : new Date()
-  const num = around === 'f' ? -timeNum : timeNum
-  const year = date.getFullYear()
-  const month = date.getMonth() + 1
-  const day = date.getDate()
+  const type = around === 'f' ? 'subtract' : 'add'

-  let resultYear = timeType === 'year' ? year + num : year
-  let resultMonth = timeType === 'month' ? month + num : month
-  if (resultMonth > 12) {
-    resultYear += parseInt(`${resultMonth / 12}`)
-    resultMonth = resultMonth % 12
-  } else if (resultMonth < 0) {
-    resultYear += parseInt(`${resultMonth / 12}`) - 1
-    resultMonth = (resultMonth % 12) + 12
-  } else if (resultMonth === 0) {
-    resultYear += parseInt(`${resultMonth / 12}`) - 1
-    resultMonth = 12
-  }
-  const resultDate =
-    timeType === 'date' ? new Date(date.getTime() + 24 * 60 * 60 * 1000 * num).getDate() : day
-  if (timeType === 'date') {
-    resultMonth = new Date(date.getTime() + 24 * 60 * 60 * 1000 * num).getMonth() + 1
-    resultYear = new Date(date.getTime() + 24 * 60 * 60 * 1000 * num).getFullYear()
-  }
+  const result = dayjs()[type](timeNum, timeType === 'date' ? 'day' : timeType)

-  switch (timeGranularityMultiple) {
-    case 'monthrange':
-      return getYearMonthRange(new Date(`${resultYear}/${resultMonth}/1`), 'monthrange', sort)
-    case 'yearrange':
-      return getYearMonthRange(new Date(`${resultYear}/1`), 'yearrange', sort)
-    case 'daterange':
-      return getYearMonthRange(
-        new Date(`${resultYear}/${resultMonth}/${resultDate}`),
-        'daterange',
-        sort
-      )
-    default:
-      break
+  if (['monthrange', 'yearrange', 'daterange'].includes(timeGranularityMultiple)) {
+    return getYearMonthRange(result, sort, timeGranularityMultiple.split('range')[0])
  }

  if (!!arbitraryTime) {
-    const time = new Date(arbitraryTime)
-    time.setFullYear(resultYear)
-    time.setMonth(resultMonth - 1)
-    time.setDate(resultDate)
-    return time
+    const time = dayjs(arbitraryTime).format('YYYY/MM/DD HH:mm:ss')
+    // eslint-disable-next-line
+    const [_, q] = time.split(' ')
+    const [s] = result.format('YYYY/MM/DD HH:mm:ss').split(' ')
+
+    return new Date(`${s} ${q}`)
  }

-  switch (timeGranularity) {
-    case 'year':
-      return new Date(`${resultYear}/1`)
-    case 'month':
-      return new Date(`${resultYear}/${resultMonth}/1`)
-    case 'date':
-      return new Date(`${resultYear}/${resultMonth}/${resultDate}`)
-    case 'monthrange':
-      return new Date(`${resultYear}/${resultMonth}/1`)
-    case 'yearrange':
-      return new Date(`${resultYear}/1`)
-    default:
-      break
-  }
+  const [k] = timeGranularity.split('range')
+  return new Date(result.startOf(k as ManipulateType).format('YYYY/MM/DD HH:mm:ss'))
 }

 function getDynamicRange({
--- a/core/core-frontend/src/custom-component/v-text/Attr.vue
+++ b/core/core-frontend/src/custom-component/v-text/Attr.vue
@ -37,9 +37,6 @@ const { themes } = toRefs(props)
    font-size: 12px !important;
    font-weight: 400 !important;
  }
-  :deep(.ed-collapse-item__content) {
-    padding: 16px !important;
-  }
  :deep(.ed-form-item) {
    display: block;
    margin-bottom: 8px;