fix(仪表板): v2 版本脱敏后字段显示效果不规范 #9736

core/core-frontend/src/views/chart/components/editor/drag-item/DimensionItem.vue

@@ -159,6 +159,10 @@ const removeItem = () => {
 }
 
 const getItemTagType = () => {
+  if (props.chart.type !== 'table-info' && props.item.desensitized) {
+    tagType.value = '#F54A45'
+    return
+  }
   tagType.value = getItemType(props.dimensionData, props.quotaData, props.item)
 }
 
@@ -204,7 +208,10 @@ onMounted(() => {
           :content="item.chartShowName ? item.chartShowName : item.name"
         >
           <span class="item-span-style">
-            <span class="item-name">{{ item.chartShowName ? item.chartShowName : item.name }}</span>
+            <span class="item-name"
+              >{{ item.chartShowName ? item.chartShowName : item.name
+              }}{{ item.desensitized && '(已脱敏)' }}</span
+            >
           </span>
         </el-tooltip>
 

core/core-frontend/src/views/chart/components/editor/drag-item/DrillItem.vue

@@ -18,6 +18,10 @@ const props = defineProps({
     type: Object,
     required: true
   },
+  chart: {
+    type: Object,
+    required: true
+  },
   index: {
     type: Number,
     required: true
@@ -70,6 +74,10 @@ const removeItem = () => {
   emit('onDimensionItemRemove', item.value)
 }
 const getItemTagType = () => {
+  if (props.chart.type !== 'table-info' && props.item.desensitized) {
+    tagType.value = '#F54A45'
+    return
+  }
   tagType.value = getItemType(props.dimensionData, props.quotaData, props.item)
 }
 onMounted(() => {
@@ -93,7 +101,9 @@ onMounted(() => {
             ></Icon>
           </el-icon>
         </span>
-        <span class="item-span-style" :title="item.name">{{ item.name }}</span>
+        <span class="item-span-style" :title="item.name"
+          >{{ item.name }}{{ item.desensitized && '(已脱敏)' }}</span
+        >
         <el-icon class="child remove-icon" size="14px">
           <Icon name="icon_delete-trash_outlined" class-name="inner-class" @click="removeItem" />
         </el-icon>

core/core-frontend/src/views/chart/components/editor/drag-item/QuotaItem.vue

@@ -214,6 +214,10 @@ const removeItem = () => {
 }
 
 const getItemTagType = () => {
+  if (props.chart.type !== 'table-info' && props.item.desensitized) {
+    tagType.value = '#F54A45'
+    return
+  }
   tagType.value = getItemType(props.dimensionData, props.quotaData, props.item)
 }
 
@@ -304,7 +308,10 @@ onMounted(() => {
           :content="item.chartShowName ? item.chartShowName : item.name"
         >
           <span class="item-span-style">
-            <span class="item-name">{{ item.chartShowName ? item.chartShowName : item.name }}</span>
+            <span class="item-name"
+              >{{ item.chartShowName ? item.chartShowName : item.name
+              }}{{ item.desensitized && '(已脱敏)' }}</span
+            >
             <span v-if="item.summary !== ''" class="item-right-summary">
               ({{ t('chart.' + item.summary) }})
             </span>

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

@@ -1519,19 +1519,30 @@ const dragOver = (ev: MouseEvent) => {
 }
 
 const drop = (ev: MouseEvent, type = 'xAxis') => {
+  let hasSesensitized = false
   ev.preventDefault()
   const arr = activeDimension.value.length ? activeDimension.value : activeQuota.value
   for (let i = 0; i < arr.length; i++) {
     const obj = cloneDeep(arr[i])
+    if (obj.desensitized && view.value.type !== 'table-info') {
+      hasSesensitized = true
+      continue
+    }
+
     state.moveId = obj.id as unknown as number
     view.value[type].push(obj)
     const e = { newDraggableIndex: view.value[type].length - 1 }
+
     if ('drillFields' === type) {
       addDrill(e)
     } else {
       addAxis(e, type as AxisType)
     }
   }
+
+  if (hasSesensitized) {
+    ElMessage.error('脱敏字段不能用于制作该图表!')
+  }
 }
 
 const fieldLoading = ref(false)
@@ -2277,6 +2288,7 @@ const deleteChartFieldItem = id => {
                             <drill-item
                               :key="element.id"
                               :index="index"
+                              :chart="view"
                               :item="element"
                               :dimension-data="state.dimension"
                               :quota-data="state.quota"