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

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>

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) {

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

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;

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;">
+            <el-icon>
-              <Icon name="style-underline"><styleUnderline class="svg-icon"/></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;
 
@@ -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>

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;

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'],

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
   }>(),

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: {},

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({

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({

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({

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 {
+import { canvasChangeAdaptor, findComponentIndexById, isDashboard } from '@/utils/canvasUtils'
-  canvasChangeAdaptor,
-  findComponentIndexById,
-  findComponentIndexByIdWithFilterHidden,
-  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)
+        eventBus.emit('removeMatrixItemById-canvas-main', component.id)
-        if (curIndex > -1) {
+        dvMainStore.setCurComponent({ component: null, index: null })
-          eventBus.emit('removeMatrixItem-canvas-main', curIndex)
+        component.canvasId = element.value.id + '--' + tabItem.name
-          dvMainStore.setCurComponent({ component: null, index: null })
+        const refInstance = currentInstance.refs['tabCanvas_' + index][0]
-          component.canvasId = element.value.id + '--' + tabItem.name
+        if (refInstance) {
-          const refInstance = currentInstance.refs['tabCanvas_' + index][0]
+          const matrixBase = refInstance.getBaseMatrixSize() //矩阵基础大小
-          if (refInstance) {
+          canvasChangeAdaptor(component, matrixBase)
-            const matrixBase = refInstance.getBaseMatrixSize() //矩阵基础大小
+          component.x = 1
-            canvasChangeAdaptor(component, matrixBase)
+          component.y = 200
-            component.x = 1
+          component.style.left = 0
-            component.y = 200
+          component.style.top = 0
-            component.style.left = 0
+          tabItem.componentData.push(component)
-            component.style.top = 0
+          refInstance.addItemBox(component) //在适当的时候初始化布局组件
-            tabItem.componentData.push(component)
+          nextTick(() => {
-            refInstance.addItemBox(component) //在适当的时候初始化布局组件
+            refInstance.canvasInitImmediately()
-            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) {

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>

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()

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(

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 dataVMobile = !isDashboard() && isMobile()
-const { batchOptStatus } = storeToRefs(dvMainStore)
+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>

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'
-
+defineProps({
-const props = 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;

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
 }
 

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)
         })

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 { ElIcon } from 'element-plus-secondary'
-import { ref, onMounted, onBeforeUnmount, watch, PropType, 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'
@@ -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'],
   () => {

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,
   () => {

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'))
       }
     }
   }

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 => {

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;

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) {

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>

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]))
+      const keyList = getKeyList(next)
-        .filter(ele => !!ele[1])
-        .map(ele => ele[0])
       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 = getKeyList(next)
-    const keyList = Object.entries(next.checkedFieldsMap)
-      .filter(ele => next.checkedFields.includes(ele[0]))
-      .filter(ele => !!ele[1])
-      .map(ele => ele[0])
     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)
+    const keyList = getKeyList(next)
-      .filter(ele => next.checkedFields.includes(ele[0]))
-      .filter(ele => !!ele[1])
-      .map(ele => ele[0])
     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)
+    const keyList = getKeyList(next)
-      .filter(ele => next.checkedFields.includes(ele[0]))
-      .filter(ele => !!ele[1])
-      .map(ele => ele[0])
     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="[
+      :class="['v-query', comLayout, customStyle.titleShow && !!customStyle.title && 'title-show']"
-        'v-query',
-        customStyle.layout,
-        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;

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;
       }

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

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

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

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
 }

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;

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>

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()
-    setTreeDefault()
+  setRelationBack()
-    return
-  }
   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
     }
-
+    setTreeDefault()
-    if (curComponent.value.displayType === '9') {
+    setRelationBack()
-      setTreeDefault()
+    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 =
+    let endTime
-      regularOrTrends === 'fixed'
+    if (relativeToCurrentRange === 'custom') {
-        ? new Date(
+      startTime =
-            dayjs(new Date(regularOrTrendsValue[0])).startOf(noTime).format('YYYY/MM/DD HH:mm:ss')
+        regularOrTrends === 'fixed'
-          )
+          ? new Date(
-        : getAround(relativeToCurrentType, around === 'f' ? 'subtract' : 'add', timeNum)
+              dayjs(new Date(regularOrTrendsValue[0])).startOf(noTime).format('YYYY/MM/DD HH:mm:ss')
-    const endTime =
+            )
-      regularOrTrends === 'fixed'
+          : getAround(relativeToCurrentType, around === 'f' ? 'subtract' : 'add', timeNum)
-        ? new Date(
+      endTime =
-            dayjs(new Date(regularOrTrendsValue[1])).endOf(noTime).format('YYYY/MM/DD HH:mm:ss')
+        regularOrTrends === 'fixed'
-          )
+          ? new Date(
-        : getAround(
+              dayjs(new Date(regularOrTrendsValue[1])).endOf(noTime).format('YYYY/MM/DD HH:mm:ss')
-            relativeToCurrentTypeRange,
+            )
-            aroundRange === 'f' ? 'subtract' : 'add',
+          : getAround(
-            timeNumRange
+              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) {
+  if (!ele.treeDatasetId) {
-    curComponent.value.timeRange.relativeToCurrentRange = 'custom'
+    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(
+    curComponent.value.dataset.fields.filter(ele => ele.groupType === 'd' && ele.deType === 0),
-      ele => ele.deType === +curComponent.value.field.deType
-    ),
     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 } =
+  const {
-    curComponent.value
+    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') {
+  if ([1, 7, 8, 22, 9].includes(+displayType)) {
-    let displayField = null
+    return false
-    return checkedFields.some(id => {
-      const arr = (fields.value || []).find(itx => itx.componentId === id)
-      const field = arr?.id
-      if (!field) return false
-      if (displayField === null) {
-        displayField = field
-        return false
-      }
-      return displayField !== field
-    })
   }
   return (optionValueSource === 1 && !field.id) || (optionValueSource === 2 && !valueSource.length)
 })
@@ -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="list-item_box"
-              :class="element.id === activeCondition && 'active'"
+              :style="{
+                marginBottom: element.treeFieldList
+                  ? element.treeFieldList.slice(1).length * 40 + 'px'
+                  : 0
+              }"
             >
-              <el-icon class="handle" style="color:#fff;">
+              <div
-                <Icon name="icon_drag_outlined"><icon_drag_outlined class="svg-icon" /></Icon>
+                class="list-item_primary"
-              </el-icon>
+                :class="element.id === activeCondition && relationshipChartIndex === 0 && 'active'"
-              <div class="label flex-align-center icon" :title="element.name">
+              >
-                <el-icon
+                <el-icon class="handle">
-                  v-if="!element.auto && element.showError"
+                  <Icon name="icon_drag_outlined"><icon_drag_outlined class="svg-icon" /></Icon>
-                  style="font-size: 16px; color: #f54a45"
+                </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>
+                  {{ itx.name }}
-                </el-icon>
+                </div>
-                {{ element.name }}
+              </template>
-              </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>
         </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">
+          <div
-            <empty-background :description="t('v_query.cannot_be_displayed')" img-type="error" />
+            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 {
+  .ed-select__prefix {
-    border-right: none;
-    padding: 0;
     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;
               }
             }
           }

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;

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="
+    :popper-class="popperClass"
-      visible ? 'load-select filter-select-popper_class' : 'filter-select-popper_class'
-    "
     multiple
     show-checked
     scrollbar-always-on
@@ -661,9 +689,7 @@ defineExpose({
     :style="selectStyle"
     filterable
     radio
-    :popper-class="
+    :popper-class="popperClass"
-      visible ? 'load-select filter-select-popper_class' : 'filter-select-popper_class'
-    "
     :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>

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;

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 =
+    let endTime
-      regularOrTrends === 'fixed'
+    if (relativeToCurrentRange === 'custom') {
-        ? new Date(
+      startTime =
-            dayjs(new Date(regularOrTrendsValue[0]))
+        regularOrTrends === 'fixed'
-              .startOf(queryTimeType.value)
+          ? new Date(
-              .format('YYYY/MM/DD HH:mm:ss')
+              dayjs(new Date(regularOrTrendsValue[0]))
-          )
+                .startOf(queryTimeType.value)
-        : getAround(relativeToCurrentType, around === 'f' ? 'subtract' : 'add', timeNum)
+                .format('YYYY/MM/DD HH:mm:ss')
-    const endTime =
+            )
-      regularOrTrends === 'fixed'
+          : getAround(relativeToCurrentType, around === 'f' ? 'subtract' : 'add', timeNum)
-        ? new Date(
+      endTime =
-            dayjs(new Date(regularOrTrendsValue[1]))
+        regularOrTrends === 'fixed'
-              .endOf(queryTimeType.value)
+          ? new Date(
-              .format('YYYY/MM/DD HH:mm:ss')
+              dayjs(new Date(regularOrTrendsValue[1]))
-          )
+                .endOf(queryTimeType.value)
-        : getAround(
+                .format('YYYY/MM/DD HH:mm:ss')
-            relativeToCurrentTypeRange,
+            )
-            aroundRange === 'f' ? 'subtract' : 'add',
+          : getAround(
-            timeNumRange
+              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(':')}`),
+        start ? start : new Date(`${timeFormat.join('/')} ${currentTime.value.join(':')}`),
-        new Date(`${currentDate.value.join('/')} ${currentTime.value.join(':')}`)
+        new Date(`${timeFormat.join('/')} ${currentTime.value.join(':')}`)
       ]
     } else {
       selectValue.value = [
-        new Date(`${currentDate.value.join('/')} ${currentTime.value.join(':')}`),
+        new Date(`${timeFormat.join('/')} ${currentTime.value.join(':')}`),
-        end ? end : new Date(`${currentDate.value.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(':')}`)
   }
 }
 

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,
+  () => config.value.id,
-  val => {
+  () => {
-    if (config.value.multiple) {
+    changeFromId.value = true
-      treeValue.value = Array.isArray(val) ? [...val] : val
+    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(
+const tagWidth = computed(() => {
-  () => config.value.id,
+  return Math.min(getCustomWidth() / 3, 50) + 'px'
-  () => {
+})
-    init()
+
-  }
+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) {
+    if (props.config.queryConditionWidth !== undefined) {
-      return queryConditionWidth()
+      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>

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
+          <el-select value-key="id" v-model="ele.field" style="width: 300px">
-            :disabled="idx === 0 && ele.field"
-            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"

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 = [

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':

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(dayjs().startOf('month').format('YYYY/MM/DD HH:mm:ss'))
-  return new Date(`${date.getFullYear()}/${date.getMonth() + 1}`)
 }
 
 function getLastStart(val = 'month' as ManipulateType) {
@@ -26,23 +25,19 @@ function getLastMonth() {
 }
 
 function getNextMonth() {
-  const date = getCustomTime(1, 'month', 'month', 'b')
+  return new Date(dayjs().add(1, 'month').startOf('month').format('YYYY/MM/DD HH:mm:ss'))
-  return new Date(`${date.getFullYear()}/${date.getMonth() + 1}`)
 }
 
 function getToday() {
-  const date = new Date()
+  return new Date(dayjs().startOf('day').format('YYYY/MM/DD HH:mm:ss'))
-  return new Date(`${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`)
 }
 
 function getYesterday() {
-  const date = new Date(new Date().getTime() - 24 * 60 * 60 * 1000)
+  return new Date(dayjs().subtract(1, 'day').startOf('day').format('YYYY/MM/DD HH:mm:ss'))
-  return new Date(`${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`)
 }
 
 function getMonthBeginning() {
-  const date = new Date()
+  return new Date(dayjs().startOf('month').format('YYYY/MM/DD HH:mm:ss'))
-  return new Date(`${date.getFullYear()}/${date.getMonth() + 1}/1`)
 }
 
 function getMonthEnd() {
@@ -50,99 +45,50 @@ function getMonthEnd() {
 }
 
 function getYearBeginning() {
-  const date = new Date()
+  return new Date(dayjs().startOf('year').format('YYYY/MM/DD HH:mm:ss'))
-  return new Date(`${date.getFullYear()}/1/1`)
 }
 
-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(
+      return new Date(dayjs(result).endOf(type).format('YYYY/MM/DD HH:mm:ss'))
-        +getCustomTime(1, dateTimeType, dateTimeType, 'b', null, flag, 'start-config', result) -
-          1000
-      )
     }
   }
 }
 
 function getCustomTime(
   timeNum: number,
-  timeType: string,
+  timeType: ManipulateType | 'date',
   timeGranularity: string,
   around: string,
   arbitraryTime?: Date,
   timeGranularityMultiple?: string,
-  sort?: string,
+  sort?: string
-  withDate?: Date
 ) {
-  const date = withDate ? new Date(withDate) : new Date()
+  const type = around === 'f' ? 'subtract' : 'add'
-  const num = around === 'f' ? -timeNum : timeNum
-  const year = date.getFullYear()
-  const month = date.getMonth() + 1
-  const day = date.getDate()
 
-  let resultYear = timeType === 'year' ? year + num : year
+  const result = dayjs()[type](timeNum, timeType === 'date' ? 'day' : timeType)
-  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()
-  }
 
-  switch (timeGranularityMultiple) {
+  if (['monthrange', 'yearrange', 'daterange'].includes(timeGranularityMultiple)) {
-    case 'monthrange':
+    return getYearMonthRange(result, sort, timeGranularityMultiple.split('range')[0])
-      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 (!!arbitraryTime) {
-    const time = new Date(arbitraryTime)
+    const time = dayjs(arbitraryTime).format('YYYY/MM/DD HH:mm:ss')
-    time.setFullYear(resultYear)
+    // eslint-disable-next-line
-    time.setMonth(resultMonth - 1)
+    const [_, q] = time.split(' ')
-    time.setDate(resultDate)
+    const [s] = result.format('YYYY/MM/DD HH:mm:ss').split(' ')
-    return time
+
+    return new Date(`${s} ${q}`)
   }
 
-  switch (timeGranularity) {
+  const [k] = timeGranularity.split('range')
-    case 'year':
+  return new Date(result.startOf(k as ManipulateType).format('YYYY/MM/DD HH:mm:ss'))
-      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
-  }
 }
 
 function getDynamicRange({

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;