feat(图表): 图表下钻后，点击放大按钮可以显示下钻后的状态 #11208 (#14235)

core/core-frontend/src/components/data-visualization/canvas/ComponentWrapper.vue

@@ -115,6 +115,10 @@ const props = defineProps({
     type: String,
     required: false,
     default: 'inherit'
+  },
+  optType: {
+    type: String,
+    required: false
   }
 })
 const {
@@ -418,6 +422,7 @@ const showActive = computed(() => props.popActive || (dvMainStore.mobileInPc &&
           ref="component"
           class="component"
           :canvas-style-data="canvasStyleData"
+          :opt-type="optType"
           :dv-info="dvInfo"
           :dv-type="dvInfo.type"
           :canvas-view-info="canvasViewInfo"

core/core-frontend/src/components/visualization/UserViewEnlarge.vue

@@ -98,6 +98,7 @@
         <component-wrapper
           v-if="optType === 'enlarge'"
           class="enlarge-wrapper"
+          :opt-type="optType"
           :view-info="viewInfo"
           :config="config"
           :dv-info="dvInfo"

core/core-frontend/src/custom-component/user-view/Component.vue

@@ -64,6 +64,10 @@ const props = defineProps({
     type: String,
     required: false,
     default: 'inherit'
+  },
+  optType: {
+    type: String,
+    required: false
   }
 })
 
@@ -106,6 +110,7 @@ const onPointClick = param => {
       :suffixId="suffixId"
       :font-family="fontFamily"
       @onPointClick="onPointClick"
+      :opt-type="optType"
     ></chart>
   </div>
 </template>

core/core-frontend/src/views/chart/components/views/components/DrillPath.vue

@@ -17,6 +17,11 @@ const props = defineProps({
     type: Object,
     required: false,
     default: null
+  },
+  disabled: {
+    type: Boolean,
+    required: false,
+    default: false
   }
 })
 
@@ -75,6 +80,7 @@ const drillPathVar = computed(() => [{ '--drill-color': textColor.value }])
     v-if="props.drillFilters && props.drillFilters.length > 0"
     class="drill"
     :style="drillPathVar"
+    :class="{ noClick: disabled }"
   >
     <el-breadcrumb :separator-icon="ArrowRight" class="drill-style">
       <el-breadcrumb-item class="drill-item" @click="drillJump(0)">
@@ -119,4 +125,7 @@ const drillPathVar = computed(() => [{ '--drill-color': textColor.value }])
     color: var(--drill-color) !important;
   }
 }
+.noClick {
+  pointer-events: none; /* 禁止鼠标点击 */
+}
 </style>

core/core-frontend/src/views/chart/components/views/index.vue

@@ -136,6 +136,10 @@ const props = defineProps({
     type: String,
     required: false,
     default: 'inherit'
+  },
+  optType: {
+    type: String,
+    required: false
   }
 })
 const dynamicAreaId = ref('')
@@ -714,6 +718,7 @@ const changeDataset = () => {
 }
 onMounted(() => {
   if (!view.value.isPlugin) {
+    state.drillClickDimensionList = view.value?.chartExtRequest?.drill ?? []
     queryData(!showPosition.value.includes('viewDialog'))
   }
   if (!listenerEnable.value) {
@@ -1223,7 +1228,11 @@ const titleTooltipWidth = computed(() => {
       :themes="canvasStyleData.dashboard.themeColor"
       :view-icon="view.type"
     ></chart-empty-info>
-    <drill-path :drill-filters="state.drillFilters" @onDrillJump="drillJump" />
+    <drill-path
+      :disabled="optType === 'enlarge'"
+      :drill-filters="state.drillFilters"
+      @onDrillJump="drillJump"
+    />
     <XpackComponent
       ref="openHandler"
       jsname="L2NvbXBvbmVudC9lbWJlZGRlZC1pZnJhbWUvT3BlbkhhbmRsZXI="