style: 调整图表异常时明细显示的样式问题

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

@@ -121,12 +121,19 @@
           :font-family="canvasStyleData?.fontFamily"
           show-position="viewDialog"
         />
-        <chart-component-s2
-          v-if="optType === 'details' && !sourceViewType.includes('chart-mix')"
-          :view="viewInfo"
-          show-position="viewDialog"
-          ref="chartComponentDetails"
-        />
+        <template v-if="optType === 'details' && !sourceViewType.includes('chart-mix')">
+          <chart-component-s2
+            v-if="!detailsError"
+            :view="viewInfo"
+            show-position="viewDialog"
+            ref="chartComponentDetails"
+          />
+          <empty-background
+            v-if="detailsError"
+            :description="t('visualization.no_details')"
+            img-type="noneWhite"
+          />
+        </template>
         <template v-else-if="optType === 'details' && sourceViewType.includes('chart-mix')">
           <el-tabs class="tab-header" v-model="activeName" @tab-change="handleClick">
             <el-tab-pane :label="t('chart.drag_block_value_axis_left')" name="left"></el-tab-pane>
@@ -173,6 +180,7 @@ import { usePermissionStoreWithOut } from '@/store/modules/permission'
 import { activeWatermarkCheckUser } from '@/components/watermark/watermark'
 import { getCanvasStyle } from '@/utils/style'
 import { exportPermission } from '@/utils/utils'
+import EmptyBackground from '../empty-background/src/EmptyBackground.vue'
 const downLoading = ref(false)
 const dvMainStore = dvMainStoreWithOut()
 const dialogShow = ref(false)
@@ -190,6 +198,7 @@ const { dvInfo, editMode, isIframe } = storeToRefs(dvMainStore)
 const exportLoading = ref(false)
 const sourceViewType = ref()
 const activeName = ref('left')
+const detailsError = ref(false)
 const DETAIL_CHART_ATTR: DeepPartial<ChartObj> = {
   render: 'antv',
   type: 'table-info',
@@ -240,8 +249,7 @@ const exportPermissions = computed(() =>
 
 const customExport = computed(() => {
   const style =
-    canvasStyleData.value &&
-    (optType.value === 'enlarge' || state.componentSourceType?.includes('table'))
+    canvasStyleData.value && optType.value === 'enlarge'
       ? getCanvasStyle(canvasStyleData.value, 'canvas-main')
       : {}
   if (downLoading.value) {
@@ -295,6 +303,7 @@ const pixelOptions = [
 const dialogInit = (canvasStyle, view, item, opt, params = { scale: 0.5 }) => {
   state.scale = params.scale
   sourceViewType.value = view.type
+  detailsError.value = false
   optType.value = opt
   dialogShow.value = true
   state.componentSourceType = view.type
@@ -321,11 +330,15 @@ const dialogInit = (canvasStyle, view, item, opt, params = { scale: 0.5 }) => {
 const dataDetailsOpt = () => {
   nextTick(() => {
     const viewDataInfo = dvMainStore.getViewDataDetails(viewInfo.value.id)
-    if (sourceViewType.value.includes('chart-mix')) {
-      chartComponentDetails.value?.renderChartFromDialog(viewInfo.value, viewDataInfo.left)
-      chartComponentDetails2.value?.renderChartFromDialog(viewInfo.value, viewDataInfo.right)
+    if (viewDataInfo) {
+      if (sourceViewType.value.includes('chart-mix')) {
+        chartComponentDetails.value?.renderChartFromDialog(viewInfo.value, viewDataInfo.left)
+        chartComponentDetails2.value?.renderChartFromDialog(viewInfo.value, viewDataInfo.right)
+      } else {
+        chartComponentDetails.value.renderChartFromDialog(viewInfo.value, viewDataInfo)
+      }
     } else {
-      chartComponentDetails.value.renderChartFromDialog(viewInfo.value, viewDataInfo)
+      detailsError.value = true
     }
   })
 }

core/core-frontend/src/locales/en.ts

@@ -2833,6 +2833,7 @@ Scatter chart (bubble) chart: {a} (series name), {b} (data name), {c} (value arr
     column_name: 'Field name'
   },
   visualization: {
+    no_details: 'No Data',
     sync_pc_design: 'Synchronize PC Design',
     title_background: 'Title Background',
     active_title_background: 'Active Title Background',

core/core-frontend/src/locales/tw.ts

@@ -2760,6 +2760,7 @@ export default {
     column_name: '欄位名稱'
   },
   visualization: {
+    no_details: '無明細數據',
     sync_pc_design: '同步PC設計',
     title_background: '標題背景',
     active_title_background: '激活標題背景',

core/core-frontend/src/locales/zh-CN.ts

@@ -2770,6 +2770,7 @@ export default {
     column_name: '字段名称'
   },
   visualization: {
+    no_details: '无明细数据',
     sync_pc_design: '同步PC设计',
     title_background: '标题背景',
     active_title_background: '激活标题背景',

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

@@ -411,26 +411,6 @@ const windowsJump = (url, jumpType, size = 'middle') => {
     let newWindow
     if ('newPop' === jumpType) {
       dePreviewPopDialogRef.value.previewInit({ url, size })
-      // let sizeX, sizeY
-      // if (size === 'large') {
-      //   sizeX = 0.95
-      //   sizeY = 0.9
-      // } else if (size === 'middle') {
-      //   sizeX = 0.8
-      //   sizeY = 0.75
-      // } else {
-      //   sizeX = 0.6
-      //   sizeY = 0.5
-      // }
-      // const height = screen.height * sizeY
-      // const width = screen.width * sizeX
-      // const left = screen.width * ((1 - sizeX) / 2)
-      // const top = screen.height * ((1 - sizeY) / 2)
-      // newWindow = window.open(
-      //   url,
-      //   '_blank',
-      //   `width=${width},height=${height},left=${left},top=${top},toolbar=no,scrollbars=yes,resizable=yes,location=no`
-      // )
     } else if ('_self' === jumpType) {
       newWindow = window.open(url, jumpType)
       if (inMobile.value) {