Merge pull request #10356 from dataease/pr@dev-v2@refactor_dv-edit

Pr@dev v2@refactor dv edit

core/core-frontend/src/components/data-visualization/ComponentToolBar.vue

@@ -94,6 +94,13 @@ onMounted(() => {
       useEmitt().emitter.emit('initScroll')
     })
   }, 1000)
+  useEmitt({
+    name: 'canvasScrollRestore',
+    callback: function () {
+      // 用于全屏后还原编辑状态大小
+      changeSizeWithScale(scale.value)
+    }
+  })
 })
 
 onUnmounted(() => {

core/core-frontend/src/components/data-visualization/DvToolbar.vue

@@ -23,6 +23,7 @@ import ComponentButton from '@/components/visualization/ComponentButton.vue'
 import OuterParamsSet from '@/components/visualization/OuterParamsSet.vue'
 import MultiplexingCanvas from '@/views/common/MultiplexingCanvas.vue'
 import ComponentButtonLabel from '@/components/visualization/ComponentButtonLabel.vue'
+import DeFullscreen from '@/components/visualization/common/DeFullscreen.vue'
 let nameEdit = ref(false)
 let inputName = ref('')
 let nameInput = ref(null)
@@ -36,6 +37,7 @@ let scaleEdit = 100
 const { wsCache } = useCache('localStorage')
 const dvModel = 'dataV'
 const outerParamsSetRef = ref(null)
+const fullScreeRef = ref(null)
 
 const closeEditCanvasName = () => {
   nameEdit.value = false
@@ -303,7 +305,12 @@ const multiplexingCanvasOpen = () => {
         >
           编辑
         </el-button>
-        <el-button v-else class="preview-button" @click="preview()" style="float: right">
+        <el-button
+          v-else
+          class="preview-button"
+          @click="() => fullScreeRef.toggleFullscreen()"
+          style="float: right"
+        >
           预览
         </el-button>
         <el-button
@@ -335,6 +342,7 @@ const multiplexingCanvasOpen = () => {
       ref="resourceGroupOpt"
     />
   </div>
+  <de-fullscreen ref="fullScreeRef" show-position="dvEdit"></de-fullscreen>
   <multiplexing-canvas ref="multiplexingRef"></multiplexing-canvas>
   <outer-params-set ref="outerParamsSetRef"> </outer-params-set>
   <XpackComponent ref="openHandler" jsname="L2NvbXBvbmVudC9lbWJlZGRlZC1pZnJhbWUvT3BlbkhhbmRsZXI=" />

core/core-frontend/src/components/visualization/common/DeFullscreen.vue

@@ -4,6 +4,7 @@ import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
 const dvMainStore = dvMainStoreWithOut()
 import screenfull from 'screenfull'
 import { onBeforeUnmount, onMounted, toRefs } from 'vue'
+import { useEmitt } from '@/hooks/web/useEmitt'
 
 const props = defineProps({
   themes: {
@@ -33,6 +34,10 @@ const fullscreenChange = () => {
         dvMainStore.setEditMode('edit')
       }
     }
+    // 大屏编辑使用
+    if (props.showPosition === 'dvEdit') {
+      useEmitt().emitter.emit('canvasScrollRestore')
+    }
   }
 }
 

core/core-frontend/src/store/modules/data-visualization/dvMain.ts

@@ -4,7 +4,8 @@ import { deepCopy } from '@/utils/utils'
 import {
   BASE_VIEW_CONFIG,
   DEFAULT_INDICATOR_NAME_STYLE,
-  DEFAULT_INDICATOR_STYLE
+  DEFAULT_INDICATOR_STYLE,
+  SENIOR_STYLE_SETTING_LIGHT
 } from '@/views/chart/components/editor/util/chart'
 import {
   DEFAULT_CANVAS_STYLE_DATA_DARK,
@@ -224,6 +225,8 @@ export const dvMainStore = defineStore('dataVisualization', {
     },
 
     setCanvasStyle(style) {
+      style.component['seniorStyleSetting'] =
+        style.component['seniorStyleSetting'] || deepCopy(SENIOR_STYLE_SETTING_LIGHT)
       this.canvasStyleData = style
     },
     setCanvasViewInfo(canvasViewInfo) {

core/core-frontend/src/views/data-visualization/DvPreview.vue

@@ -0,0 +1,89 @@
+<script setup lang="ts">
+import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
+import { ref } from 'vue'
+import DePreview from '@/components/data-visualization/canvas/DePreview.vue'
+import { storeToRefs } from 'pinia'
+
+const dvMainStore = dvMainStoreWithOut()
+const { fullscreenFlag } = storeToRefs(dvMainStore)
+const dePreviewRef = ref(null)
+const dataInitState = ref(true)
+defineProps({
+  canvasStylePreview: {
+    required: true,
+    type: Object
+  },
+  canvasDataPreview: {
+    required: true,
+    type: Object
+  },
+  canvasViewInfoPreview: {
+    required: true,
+    type: Object
+  },
+  dvInfo: {
+    required: true,
+    type: Object
+  },
+  curPreviewGap: {
+    required: false,
+    type: Number,
+    default: 0
+  },
+  showPosition: {
+    required: false,
+    type: String,
+    default: 'preview'
+  },
+  downloadStatus: {
+    required: false,
+    type: Boolean,
+    default: false
+  }
+})
+
+const restore = () => {
+  dePreviewRef.value.restore()
+}
+
+defineExpose({
+  restore
+})
+</script>
+
+<template>
+  <div id="de-preview-content" :class="{ 'de-screen-full': fullscreenFlag }" class="content-outer">
+    <div class="content-inner">
+      <de-preview
+        ref="dePreviewRef"
+        v-if="canvasStylePreview && dataInitState"
+        :component-data="canvasDataPreview"
+        :canvas-style-data="canvasStylePreview"
+        :canvas-view-info="canvasViewInfoPreview"
+        :dv-info="dvInfo"
+        :cur-gap="curPreviewGap"
+        :show-position="showPosition"
+        :download-status="downloadStatus"
+      ></de-preview>
+    </div>
+  </div>
+</template>
+
+<style lang="less">
+.content-outer {
+  width: 100%;
+  height: calc(100vh - 112px);
+  background: #f5f6f7;
+  display: flex;
+  overflow-y: auto;
+  align-items: center;
+  flex-direction: column;
+  justify-content: center; /* 上下居中 */
+  .content-inner {
+    width: 100%;
+    height: auto;
+    overflow-x: hidden;
+    overflow-y: auto;
+  }
+}
+</style>

core/core-frontend/src/views/data-visualization/PreviewShow.vue

@@ -3,7 +3,6 @@ import DeResourceTree from '@/views/common/DeResourceTree.vue'
 import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
 import ArrowSide from '@/views/common/DeResourceArrow.vue'
 import { nextTick, onBeforeMount, reactive, ref, computed } from 'vue'
-import DePreview from '@/components/data-visualization/canvas/DePreview.vue'
 import PreviewHead from '@/views/data-visualization/PreviewHead.vue'
 import EmptyBackground from '@/components/empty-background/src/EmptyBackground.vue'
 import { storeToRefs } from 'pinia'
@@ -15,11 +14,12 @@ import { useMoveLine } from '@/hooks/web/useMoveLine'
 import { Icon } from '@/components/icon-custom'
 import { download2AppTemplate, downloadCanvas2 } from '@/utils/imgUtils'
 import MultiplexPreviewShow from '@/views/data-visualization/MultiplexPreviewShow.vue'
+import DvPreview from '@/views/data-visualization/DvPreview.vue'
 
 const dvMainStore = dvMainStoreWithOut()
-const { dvInfo, fullscreenFlag } = storeToRefs(dvMainStore)
+const { dvInfo } = storeToRefs(dvMainStore)
 const previewCanvasContainer = ref(null)
-const dvPreview = ref(null)
+const dvPreviewRef = ref(null)
 const slideShow = ref(true)
 const requestStore = useRequestStoreWithOut()
 const permissionStore = usePermissionStoreWithOut()
@@ -83,7 +83,7 @@ const loadCanvasData = (dvId, weight?) => {
       if (props.showPosition === 'preview') {
         dvMainStore.updateCurDvInfo(dvInfo)
         nextTick(() => {
-          dvPreview.value?.restore()
+          dvPreviewRef.value?.restore()
         })
       }
     }
@@ -216,25 +216,17 @@ onBeforeMount(() => {
           ></multiplex-preview-show>
         </div>
         <div v-if="showPosition === 'preview'" ref="previewCanvasContainer" class="content">
-          <div
+          <dv-preview
-            id="de-preview-content"
+            ref="dvPreviewRef"
-            :class="{ 'de-screen-full': fullscreenFlag }"
+            v-if="state.canvasStylePreview && dataInitState"
-            class="content-outer"
+            :show-position="showPosition"
-          >
+            :canvas-data-preview="state.canvasDataPreview"
-            <div class="content-inner">
+            :canvas-style-preview="state.canvasStylePreview"
-              <de-preview
+            :canvas-view-info-preview="state.canvasViewInfoPreview"
-                ref="dvPreview"
+            :dv-info="state.dvInfo"
-                v-if="state.canvasStylePreview && dataInitState"
+            :cur-preview-gap="state.curPreviewGap"
-                :component-data="state.canvasDataPreview"
+            :download-status="downloadStatus"
-                :canvas-style-data="state.canvasStylePreview"
+          ></dv-preview>
-                :canvas-view-info="state.canvasViewInfoPreview"
-                :dv-info="state.dvInfo"
-                :cur-gap="state.curPreviewGap"
-                :show-position="showPosition"
-                :download-status="downloadStatus"
-              ></de-preview>
-            </div>
-          </div>
         </div>
       </template>
       <template v-else-if="hasTreeData && mounted">

core/core-frontend/src/views/data-visualization/index.vue

@@ -38,9 +38,11 @@ import { XpackComponent } from '@/components/plugin'
 import { Base64 } from 'js-base64'
 import CanvasCacheDialog from '@/components/visualization/CanvasCacheDialog.vue'
 import { deepCopy } from '@/utils/utils'
+import DvPreview from '@/views/data-visualization/DvPreview.vue'
 const interactiveStore = interactiveStoreWithOut()
 const embeddedStore = useEmbedded()
 const { wsCache } = useCache()
+const dvPreviewRef = ref(null)
 const eventCheck = e => {
   if (e.key === 'screen-weight' && !compareStorage(e.oldValue, e.newValue)) {
     const opt = embeddedStore.opt || router.currentRoute.value.query.opt
@@ -63,6 +65,7 @@ const composeStore = composeStoreWithOut()
 const canvasCacheOutRef = ref(null)
 
 const {
+  fullscreenFlag,
   componentData,
   curComponent,
   isClickComponent,
@@ -454,6 +457,15 @@ eventBus.on('handleNew', handleNew)
     @load-fail="XpackLoaded"
   />
   <canvas-cache-dialog ref="canvasCacheOutRef" @doUseCache="doUseCache"></canvas-cache-dialog>
+  <dv-preview
+    v-if="fullscreenFlag"
+    style="z-index: 10"
+    ref="dvPreviewRef"
+    :canvas-data-preview="componentData"
+    :canvas-style-preview="canvasStyleData"
+    :canvas-view-info-preview="canvasViewInfo"
+    :dv-info="dvInfo"
+  ></dv-preview>
 </template>
 
 <style lang="less">