From f0404842343c85600e7de61e251009bff8cb7932 Mon Sep 17 00:00:00 2001
From: wangjiahao <1522128093@qq.com>
Date: Wed, 16 Oct 2024 12:00:59 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E5=A4=96=E9=83=A8=E5=8F=82?=
 =?UTF-8?q?=E6=95=B0=E6=94=AF=E6=8C=81=E5=BF=85=E5=A1=AB=E6=A0=A1=E9=AA=8C?=
 =?UTF-8?q?=E9=BB=98=E8=AE=A4=E5=80=BC=E8=AE=BE=E7=BD=AE=E4=BC=98=E5=8C=96?=
 =?UTF-8?q?=EF=BC=8C=E6=94=AF=E6=8C=81=E5=89=8D=E7=AB=AF=E6=8F=90=E7=A4=BA?=
 =?UTF-8?q?=E7=AD=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/dashboard/DbToolbar.vue     |  2 +-
 .../data-visualization/canvas/DePreview.vue    | 12 ++++++++----
 .../src/pages/panel/DashboardPreview.vue       | 13 ++++++-------
 .../src/pages/panel/ViewWrapper.vue            | 18 ++++++++++--------
 .../store/modules/data-visualization/dvMain.ts |  4 ++--
 .../views/data-visualization/PreviewCanvas.vue | 11 ++++++-----
 .../data-visualization/PreviewCanvasMobile.vue | 13 ++++++++-----
 7 files changed, 41 insertions(+), 32 deletions(-)

diff --git a/core/core-frontend/src/components/dashboard/DbToolbar.vue b/core/core-frontend/src/components/dashboard/DbToolbar.vue
index 938f1baa45..9f44ec5270 100644
--- a/core/core-frontend/src/components/dashboard/DbToolbar.vue
+++ b/core/core-frontend/src/components/dashboard/DbToolbar.vue
@@ -549,7 +549,7 @@ const initOpenHandler = newWindow => {
             is-label
             :base-width="115"
             :icon-name="dvMoreCom"
-            :title="'visualization.more'"
+            :title="t('visualization.more')"
           >
             <db-more-com-group themes="light" :dv-model="dvModel"></db-more-com-group>
           </component-group>
diff --git a/core/core-frontend/src/components/data-visualization/canvas/DePreview.vue b/core/core-frontend/src/components/data-visualization/canvas/DePreview.vue
index 277c5c1bd7..a0e0ecd2a5 100644
--- a/core/core-frontend/src/components/data-visualization/canvas/DePreview.vue
+++ b/core/core-frontend/src/components/data-visualization/canvas/DePreview.vue
@@ -2,7 +2,7 @@
 import { getCanvasStyle, getShapeItemStyle } from '@/utils/style'
 import ComponentWrapper from './ComponentWrapper.vue'
 import { changeStyleWithScale } from '@/utils/translate'
-import { computed, nextTick, ref, toRefs, watch, onBeforeUnmount, onMounted } from 'vue'
+import { computed, nextTick, ref, toRefs, watch, onBeforeUnmount, onMounted, reactive } from 'vue'
 import { changeRefComponentsSizeWithScalePoint } from '@/utils/changeComponentsSizeWithScale'
 import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
 import { storeToRefs } from 'pinia'
@@ -105,6 +105,9 @@ const renderReady = ref(false)
 const dashboardActive = computed(() => {
   return dvInfo.value.type === 'dashboard'
 })
+const state = reactive({
+  initState: true
+})
 
 const curSearchCount = computed(() => {
   return outerSearchCount.value + searchCount.value
@@ -304,9 +307,9 @@ const winMsgHandle = event => {
     isMainCanvas(canvasId.value)
   ) {
     const attachParams = msgInfo.params
-    if (attachParams) {
-      dvMainStore.addOuterParamsFilter(attachParams, baseComponentData.value, 'outer')
-    }
+    state.initState = false
+    dvMainStore.addOuterParamsFilter(attachParams, baseComponentData.value, 'outer')
+    state.initState = true
   }
 }
 
@@ -402,6 +405,7 @@ defineExpose({
     :class="{ 'de-download-custom': downloadStatus, 'datav-preview': dataVPreview }"
     ref="previewCanvas"
     @mousedown="handleMouseDown"
+    v-if="state.initState"
   >
     <!--弹框触发区域-->
     <canvas-filter-btn v-if="filterBtnShow"></canvas-filter-btn>
diff --git a/core/core-frontend/src/pages/panel/DashboardPreview.vue b/core/core-frontend/src/pages/panel/DashboardPreview.vue
index ed92398eef..8411f11390 100644
--- a/core/core-frontend/src/pages/panel/DashboardPreview.vue
+++ b/core/core-frontend/src/pages/panel/DashboardPreview.vue
@@ -11,8 +11,6 @@ import { getOuterParamsInfo } from '@/api/visualization/outerParams'
 import { ElMessage } from 'element-plus-secondary'
 import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
 import { useI18n } from '@/hooks/web/useI18n'
-import VanSticky from 'vant/es/sticky'
-import VanNavBar from 'vant/es/nav-bar'
 import request from '@/config/axios'
 import 'vant/es/nav-bar/style'
 import 'vant/es/sticky/style'
@@ -29,7 +27,8 @@ const state = reactive({
   canvasStylePreview: null,
   canvasViewInfoPreview: null,
   dvInfo: null,
-  curPreviewGap: 0
+  curPreviewGap: 0,
+  initState: true
 })
 const dvMainStore = dvMainStoreWithOut()
 
@@ -106,9 +105,9 @@ onBeforeMount(async () => {
       nextTick(() => {
         dashboardPreview.value.restore()
       })
-      if (attachParams) {
-        dvMainStore.addOuterParamsFilter(attachParams, canvasDataResult, 'outer')
-      }
+      state.initState = false
+      dvMainStore.addOuterParamsFilter(attachParams, canvasDataResult, 'outer')
+      state.initState = true
     }
   )
 })
@@ -117,7 +116,7 @@ onBeforeMount(async () => {
 <template>
   <div
     :class="isPc ? 'dashboard-preview' : 'dv-common-layout-mobile_embedded'"
-    v-if="state.canvasStylePreview"
+    v-if="state.canvasStylePreview && state.initState"
   >
     <de-preview
       ref="dashboardPreview"
diff --git a/core/core-frontend/src/pages/panel/ViewWrapper.vue b/core/core-frontend/src/pages/panel/ViewWrapper.vue
index 32867c2a1f..4fb555cc4e 100644
--- a/core/core-frontend/src/pages/panel/ViewWrapper.vue
+++ b/core/core-frontend/src/pages/panel/ViewWrapper.vue
@@ -26,7 +26,8 @@ const state = reactive({
   canvasViewInfoPreview: null,
   dvInfo: null,
   chartId: null,
-  suffixId: 'common'
+  suffixId: 'common',
+  initState: true
 })
 
 const embeddedParams = embeddedParamsDiv?.chartId ? embeddedParamsDiv : embeddedStore
@@ -37,9 +38,9 @@ const winMsgHandle = event => {
   // 校验targetSourceId
   if (msgInfo && msgInfo.type === 'attachParams' && msgInfo.targetSourceId === state.chartId + '') {
     const attachParams = msgInfo.params
-    if (attachParams) {
-      dvMainStore.addOuterParamsFilter(attachParams, state.canvasDataPreview, 'outer')
-    }
+    state.initState = false
+    dvMainStore.addOuterParamsFilter(attachParams, state.canvasDataPreview, 'outer')
+    state.initState = true
   }
 }
 
@@ -89,9 +90,10 @@ onBeforeMount(async () => {
       state.canvasStylePreview = canvasStyleResult
       state.canvasViewInfoPreview = canvasViewInfoPreview
       state.dvInfo = dvInfo
-      if (attachParams) {
-        dvMainStore.addOuterParamsFilter(attachParams, canvasDataResult)
-      }
+      state.initState = false
+      dvMainStore.addOuterParamsFilter(attachParams, canvasDataResult)
+      state.initState = true
+
       viewInfo.value = canvasViewInfoPreview[chartId]
       ;(
         (canvasDataResult as unknown as Array<{
@@ -151,7 +153,7 @@ const onPointClick = param => {
 </script>
 
 <template>
-  <div class="de-view-wrapper" v-if="!!config">
+  <div class="de-view-wrapper" v-if="!!config && state.initState">
     <ComponentWrapper
       style="width: 100%; height: 100%"
       :view-info="viewInfo"
diff --git a/core/core-frontend/src/store/modules/data-visualization/dvMain.ts b/core/core-frontend/src/store/modules/data-visualization/dvMain.ts
index 778f9eea0c..a573bf9375 100644
--- a/core/core-frontend/src/store/modules/data-visualization/dvMain.ts
+++ b/core/core-frontend/src/store/modules/data-visualization/dvMain.ts
@@ -996,7 +996,7 @@ export const dvMainStore = defineStore('dataVisualization', {
         let errorMes = ''
         Object.keys(this.nowPanelOuterParamsBaseInfo).forEach(key => {
           const targetInfo = this.nowPanelOuterParamsBaseInfo[key]
-          const userParams = paramsPre[key]
+          const userParams = paramsPre ? paramsPre[key] : null
           const userParamsIsNull = !userParams || userParams.length === 0
           if (targetInfo.required && userParamsIsNull) {
             // 要求用户必填 但是用户没有输入参数
@@ -1016,7 +1016,7 @@ export const dvMainStore = defineStore('dataVisualization', {
         })
         if (errorCount > 0) {
           ElMessage.error('参数错误 ' + errorMes + '为必填参数')
-          return
+          throw new Error('参数错误 ' + errorMes + '为必填参数')
         }
       } else {
         return
diff --git a/core/core-frontend/src/views/data-visualization/PreviewCanvas.vue b/core/core-frontend/src/views/data-visualization/PreviewCanvas.vue
index 77df16cf35..c461fd1911 100644
--- a/core/core-frontend/src/views/data-visualization/PreviewCanvas.vue
+++ b/core/core-frontend/src/views/data-visualization/PreviewCanvas.vue
@@ -26,7 +26,8 @@ const state = reactive({
   canvasStylePreview: null,
   canvasViewInfoPreview: null,
   dvInfo: null,
-  curPreviewGap: 0
+  curPreviewGap: 0,
+  initState: false
 })
 
 const props = defineProps({
@@ -114,6 +115,7 @@ const loadCanvasDataAsync = async (dvId, dvType) => {
       canvasViewInfoPreview,
       curPreviewGap
     }) {
+      state.initState = false
       state.canvasDataPreview = canvasDataResult
       state.canvasStylePreview = canvasStyleResult
       state.canvasViewInfoPreview = canvasViewInfoPreview
@@ -122,9 +124,8 @@ const loadCanvasDataAsync = async (dvId, dvType) => {
       if (jumpParam) {
         dvMainStore.addViewTrackFilter(jumpParam)
       }
-      if (attachParam) {
-        dvMainStore.addOuterParamsFilter(attachParam)
-      }
+      dvMainStore.addOuterParamsFilter(attachParam)
+      state.initState = true
       if (props.publicLinkStatus) {
         // 设置浏览器title为当前仪表板名称
         document.title = dvInfo.name
@@ -176,7 +177,7 @@ defineExpose({
   <div class="content" ref="previewCanvasContainer">
     <de-preview
       ref="dvPreview"
-      v-if="state.canvasStylePreview"
+      v-if="state.canvasStylePreview && state.initState"
       :component-data="state.canvasDataPreview"
       :canvas-style-data="state.canvasStylePreview"
       :canvas-view-info="state.canvasViewInfoPreview"
diff --git a/core/core-frontend/src/views/data-visualization/PreviewCanvasMobile.vue b/core/core-frontend/src/views/data-visualization/PreviewCanvasMobile.vue
index fe9e9beb06..db8d96e675 100644
--- a/core/core-frontend/src/views/data-visualization/PreviewCanvasMobile.vue
+++ b/core/core-frontend/src/views/data-visualization/PreviewCanvasMobile.vue
@@ -22,7 +22,8 @@ const state = reactive({
   canvasStylePreview: null,
   canvasViewInfoPreview: null,
   dvInfo: null,
-  curPreviewGap: 0
+  curPreviewGap: 0,
+  initState: true
 })
 
 const props = defineProps({
@@ -111,9 +112,11 @@ const loadCanvasDataAsync = async (dvId, dvType) => {
       if (jumpParam) {
         dvMainStore.addViewTrackFilter(jumpParam)
       }
-      if (attachParam) {
-        dvMainStore.addOuterParamsFilter(attachParam)
-      }
+      state.initState = false
+
+      dvMainStore.addOuterParamsFilter(attachParam)
+      state.initState = true
+
       if (props.publicLinkStatus) {
         // 设置浏览器title为当前仪表板名称
         document.title = dvInfo.name
@@ -156,7 +159,7 @@ defineExpose({
 </script>
 
 <template>
-  <div class="content">
+  <div class="content" v-if="state.initState">
     <de-preview
       ref="dvPreview"
       v-if="state.canvasStylePreview"