更新前端src/views/data-visualization目录文件

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

@@ -129,7 +129,7 @@ const init = () => {
   componentData.value?.forEach(item => {
     curMultiplexTargetComponentsInfo.value.push({
       id: item.id,
-      label: item.label,
+      label: item.name,
       icon: item.icon,
       multiplexActive: false,
       component: item.component

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

@@ -17,6 +17,8 @@ import { downloadCanvas2 } from '@/utils/imgUtils'
 import { isLink, setTitle } from '@/utils/utils'
 import EmptyBackground from '../../components/empty-background/src/EmptyBackground.vue'
 import { useRoute } from 'vue-router'
+import { filterEnumMapSync } from '@/utils/componentUtils'
+import CanvasOptBar from '@/components/visualization/CanvasOptBar.vue'
 const routeWatch = useRoute()
 
 const dvMainStore = dvMainStoreWithOut()
@@ -31,7 +33,12 @@ const state = reactive({
   dvInfo: null,
   curPreviewGap: 0,
   initState: true,
-  showPosition: null
+  editPreview: false,
+  showPosition: 'preview',
+  showOffset: {
+    top: 3,
+    left: 3
+  }
 })
 
 const props = defineProps({
@@ -57,7 +64,8 @@ const loadCanvasDataAsync = async (dvId, dvType, ignoreParams = false) => {
       sourceDvId: jumpParam.sourceDvId,
       sourceViewId: jumpParam.sourceViewId,
       sourceFieldId: null,
-      targetDvId: dvId
+      targetDvId: dvId,
+      resourceTable: state.editPreview ? 'snapshot' : 'core'
     }
     try {
       // 刷新跳转目标仪表板联动信息
@@ -111,19 +119,28 @@ const loadCanvasDataAsync = async (dvId, dvType, ignoreParams = false) => {
 
   await initCanvasData(
     dvId,
-    dvType,
-    function ({
+    { busiFlag: dvType, resourceTable: state.editPreview ? 'snapshot' : 'core' },
+    async function ({
       canvasDataResult,
       canvasStyleResult,
       dvInfo,
       canvasViewInfoPreview,
       curPreviewGap
     }) {
+      state.dvInfo = dvInfo
+      if (state.dvInfo.status) {
+        if (jumpParam || (!ignoreParams && attachParam)) {
+          await filterEnumMapSync(canvasDataResult)
+        }
+      }
       state.canvasDataPreview = canvasDataResult
       state.canvasStylePreview = canvasStyleResult
       state.canvasViewInfoPreview = canvasViewInfoPreview
-      state.dvInfo = dvInfo
+      if (state.editPreview) {
+        state.dvInfo.status = 1
+      }
       state.curPreviewGap = curPreviewGap
+      if (state.dvInfo.status) {
         if (jumpParam) {
           dvMainStore.addViewTrackFilter(jumpParam)
         }
@@ -132,13 +149,15 @@ const loadCanvasDataAsync = async (dvId, dvType, ignoreParams = false) => {
           dvMainStore.addOuterParamsFilter(attachParam)
           state.initState = true
         }
+      }
+
       if (props.publicLinkStatus) {
         // 设置浏览器title为当前仪表板名称
         document.title = dvInfo.name
         setTitle(dvInfo.name)
       }
       initBrowserTimer()
-      nextTick(() => {
+      await nextTick(() => {
         onInitReady({ resourceId: dvId })
       })
     }
@@ -165,7 +184,9 @@ watch(
 )
 
 let p = null
+let p1 = null
 const XpackLoaded = () => p(true)
+const initIframe = () => p1(true)
 onMounted(async () => {
   useEmitt({
     name: 'canvasDownload',
@@ -173,14 +194,19 @@ onMounted(async () => {
       downloadH2(type)
     }
   })
-  await new Promise(r => (p = r))
-  const dvId = embeddedStore.dvId || router.currentRoute.value.query.dvId
+  await Promise.all([new Promise(r => (p = r)), new Promise(r => (p1 = r))])
+  let dvId = embeddedStore.dvId || router.currentRoute.value.query.dvId
+  if (router.currentRoute.value.query.jumpInfoParam && router.currentRoute.value.query.dvId) {
+    dvId = router.currentRoute.value.query.dvId
+  }
   // 检查外部参数
   const ignoreParams = router.currentRoute.value.query.ignoreParams === 'true'
   const isPopWindow = router.currentRoute.value.query.popWindow === 'true'
   const isFrameFlag = window.self !== window.top
+  state.editPreview = router.currentRoute.value.query.editPreview === 'true'
   dvMainStore.setIframeFlag(isFrameFlag)
   dvMainStore.setIsPopWindow(isPopWindow)
+  state.showPosition = state.editPreview ? 'edit-preview' : 'preview'
   const { dvType, callBackFlag, taskId, showWatermark } = router.currentRoute.value.query
   if (!!taskId) {
     dvMainStore.setCanvasAttachInfo({ taskId, showWatermark })
@@ -197,6 +223,11 @@ const dataVKeepSize = computed(() => {
   return state.canvasStylePreview?.screenAdaptor === 'keep'
 })
 
+const freezeStyle = computed(() => [
+  { '--top-show-offset': state.showOffset.top },
+  { '--left-show-offset': state.showOffset.left }
+])
+
 defineExpose({
   loadCanvasDataAsync
 })
@@ -208,7 +239,14 @@ defineExpose({
     v-loading="!state.initState"
     :class="{ 'canvas_keep-size': dataVKeepSize }"
     ref="previewCanvasContainer"
+    :style="freezeStyle"
   >
+    <canvas-opt-bar
+      style="position: fixed"
+      canvas-id="canvas-main"
+      :canvas-style-data="state.canvasStylePreview || {}"
+      :component-data="state.canvasDataPreview || []"
+    ></canvas-opt-bar>
     <de-preview
       ref="dvPreview"
       v-if="state.canvasStylePreview && state.initState"
@@ -220,6 +258,8 @@ defineExpose({
       :is-selector="props.isSelector"
       :download-status="downloadStatus"
       :show-pop-bar="true"
+      :show-position="state.showPosition"
+      :show-linkage-button="false"
     ></de-preview>
     <empty-background
       v-if="!state.initState"
@@ -232,6 +272,12 @@ defineExpose({
     @loaded="XpackLoaded"
     @load-fail="XpackLoaded"
   />
+
+  <XpackComponent
+    jsname="L2NvbXBvbmVudC9lbWJlZGRlZC1pZnJhbWUvRW50cmFuY2Vz"
+    @init-iframe="initIframe"
+    @load-fail="initIframe"
+  />
 </template>
 
 <style lang="less" scoped>
@@ -239,6 +285,7 @@ defineExpose({
   display: none;
 }
 .content {
+  position: relative;
   background-color: #ffffff;
   width: 100%;
   height: 100vh;

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

@@ -14,6 +14,8 @@ import { XpackComponent } from '@/components/plugin'
 import { propTypes } from '@/utils/propTypes'
 import { setTitle } from '@/utils/utils'
 import EmptyBackground from '../../components/empty-background/src/EmptyBackground.vue'
+import { filterEnumMapSync } from '@/utils/componentUtils'
+import CanvasOptBar from '@/components/visualization/CanvasOptBar.vue'
 
 const dvMainStore = dvMainStoreWithOut()
 const { t } = useI18n()
@@ -95,8 +97,8 @@ const loadCanvasDataAsync = async (dvId, dvType) => {
   const req = dvType === 'dashboard' ? initCanvasDataMobile : initCanvasData
   req(
     dvId,
-    dvType,
-    function ({
+    { busiFlag: dvType },
+    async function ({
       canvasDataResult,
       canvasStyleResult,
       dvInfo,
@@ -104,22 +106,28 @@ const loadCanvasDataAsync = async (dvId, dvType) => {
       curPreviewGap
     }) {
       if (!dvInfo.mobileLayout && dvType === 'dashboard') {
-        router.push('/DashboardEmpty')
+        await router.push('/DashboardEmpty')
         return
       }
+      state.dvInfo = dvInfo
+      if (state.dvInfo.status) {
+        if (jumpParam || attachParam) {
+          await filterEnumMapSync(canvasDataResult)
+        }
+      }
       state.canvasDataPreview = canvasDataResult
       state.canvasStylePreview = canvasStyleResult
       state.canvasViewInfoPreview = canvasViewInfoPreview
-      state.dvInfo = dvInfo
       state.curPreviewGap = curPreviewGap
+      if (state.dvInfo.status) {
         if (jumpParam) {
           dvMainStore.addViewTrackFilter(jumpParam)
         }
-      state.initState = false
 
+        state.initState = false
         dvMainStore.addOuterParamsFilter(attachParam)
         state.initState = true
-
+      }
       if (props.publicLinkStatus) {
         // 设置浏览器title为当前仪表板名称
         document.title = dvInfo.name
@@ -163,6 +171,11 @@ defineExpose({
 
 <template>
   <div class="content" v-if="state.initState">
+    <canvas-opt-bar
+      canvas-id="canvas-main"
+      :canvas-style-data="state.canvasStylePreview || {}"
+      :component-data="state.canvasDataPreview || []"
+    ></canvas-opt-bar>
     <de-preview
       ref="dvPreview"
       v-if="state.canvasStylePreview"
@@ -171,6 +184,7 @@ defineExpose({
       :canvas-view-info="state.canvasViewInfoPreview"
       :dv-info="state.dvInfo"
       :cur-gap="state.curPreviewGap"
+      :show-linkage-button="false"
       :is-selector="props.isSelector"
     ></de-preview>
   </div>
@@ -194,6 +208,7 @@ defineExpose({
   align-items: center;
   overflow-x: hidden;
   overflow-y: auto;
+  position: relative;
   ::-webkit-scrollbar {
     width: 0px !important;
     height: 0px !important;

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

@@ -114,13 +114,16 @@ const initOpenHandler = newWindow => {
 <template>
   <div class="preview-head flex-align-center">
     <div :title="dvInfo.name" class="canvas-name ellipsis">{{ dvInfo.name }}</div>
-
+    <div v-show="dvInfo.status === 2" class="canvas-have-update">
+      {{ t('visualization.publish_update_tips') }}
+    </div>
     <el-tooltip
       effect="dark"
       :content="favorited ? t('visualization.cancel_store') : t('visualization.store')"
       placement="top"
     >
       <el-icon
+        v-if="dvInfo.status !== 0"
         class="custom-icon hover-icon"
         @click="executeStore"
         :style="{ color: favorited ? '#FFC60A' : '#646A73' }"
@@ -150,6 +153,7 @@ const initOpenHandler = newWindow => {
     <div class="canvas-opt-button">
       <el-button
         v-if="!isIframe"
+        :disabled="dvInfo.status === 0"
         secondary
         @click="() => useEmitt().emitter.emit('canvasFullscreen')"
       >
@@ -158,7 +162,7 @@ const initOpenHandler = newWindow => {
         </template>
         {{ t('visualization.fullscreen') }}</el-button
       >
-      <el-button secondary @click="preview()">
+      <el-button secondary @click="preview()" :disabled="dvInfo.status === 0">
         <template #icon>
           <icon name="icon_pc_outlined"><icon_pc_outlined class="svg-icon" /></icon>
         </template>
@@ -166,6 +170,7 @@ const initOpenHandler = newWindow => {
       </el-button>
       <ShareVisualHead
         v-if="!shareDisable"
+        :disabled="dvInfo.status === 0"
         :resource-id="dvInfo.id"
         :weight="dvInfo.weight"
         :resource-type="dvInfo.type"
@@ -176,7 +181,7 @@ const initOpenHandler = newWindow => {
         </template>
         {{ t('visualization.edit') }}</el-button
       >
-      <el-dropdown popper-class="pad12" trigger="click">
+      <el-dropdown :disabled="dvInfo.status === 0" popper-class="pad12" trigger="click">
         <el-icon class="head-more-icon">
           <Icon name="dv-head-more"><dvHeadMore class="svg-icon" /></Icon>
         </el-icon>
@@ -251,6 +256,16 @@ const initOpenHandler = newWindow => {
     font-size: 16px;
     font-weight: 500;
   }
+  .canvas-have-update {
+    background-color: rgba(52, 199, 36, 0.2);
+    color: rgba(44, 169, 31, 1);
+    font-weight: 400;
+    font-size: 12px;
+    line-height: 20px;
+    vertical-align: middle;
+    padding: 0 4px;
+    margin-left: 8px;
+  }
   .custom-icon {
     cursor: pointer;
     margin-left: 8px;

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

@@ -47,6 +47,7 @@ import { usePermissionStoreWithOut } from '@/store/modules/permission'
 import ChartStyleBatchSet from '@/views/chart/components/editor/editor-style/ChartStyleBatchSet.vue'
 import CustomTabsSort from '@/custom-component/de-tabs/CustomTabsSort.vue'
 import { useI18n } from '@/hooks/web/useI18n'
+import { recoverToPublished } from '@/api/visualization/dataVisualization'
 const interactiveStore = interactiveStoreWithOut()
 const embeddedStore = useEmbedded()
 const { wsCache } = useCache()
@@ -162,8 +163,8 @@ const contentStyle = computed(() => {
   } else {
     return {
       minWidth: '1600px',
-      width: width * 1.5 + 'px',
-      height: height * 1.5 + 'px'
+      width: width * scrollOffset.value + 'px',
+      height: height * scrollOffset.value + 'px'
     }
   }
 })
@@ -259,6 +260,8 @@ const initDataset = () => {
   })
 }
 
+const scrollOffset = computed(() => (canvasStyleData.value.scale < 150 ? 1.5 : 2))
+
 // 全局监听按键事件
 listenGlobalKeyDown()
 
@@ -268,8 +271,8 @@ const initScroll = () => {
       const { width, height } = canvasStyleData.value
       const mainWidth = canvasCenterRef.value.clientWidth
       mainHeight.value = canvasCenterRef.value.clientHeight
-      const scrollX = (1.5 * width - mainWidth) / 2
-      const scrollY = (1.5 * height - mainHeight.value) / 2 + 20
+      const scrollX = (scrollOffset.value * width - mainWidth) / 2
+      const scrollY = (scrollOffset.value * height - mainHeight.value) / 2 + 20
       // 设置画布初始滚动条位置
       canvasOut.value.scrollTo(scrollX, scrollY)
     }
@@ -290,15 +293,20 @@ const doUseCache = flag => {
       }, 2000)
     })
   } else {
-    initLocalCanvasData()
+    initLocalCanvasData(() => {
+      // do init
+    })
     wsCache.delete('DE-DV-CATCH-' + state.resourceId)
   }
 }
 
-const initLocalCanvasData = async () => {
+const initLocalCanvasData = async callback => {
   const { opt, sourcePid, resourceId } = state
-  const busiFlg = opt === 'copy' ? 'dataV-copy' : 'dataV'
-  await initCanvasData(resourceId, busiFlg, function () {
+  const busiFlag = opt === 'copy' ? 'dataV-copy' : 'dataV'
+  await initCanvasData(
+    resourceId,
+    { busiFlag, resourceTable: 'snapshot', source: 'main-edit' },
+    function () {
       state.canvasInitStatus = true
       // afterInit
       nextTick(() => {
@@ -313,8 +321,10 @@ const initLocalCanvasData = async () => {
           }, 1500)
         }
         onInitReady({ resourceId: resourceId })
+        callback && callback()
       })
-  })
+    }
+  )
 }
 
 const previewScaleChange = () => {
@@ -343,7 +353,7 @@ const checkPer = async resourceId => {
   if (!window.DataEaseBi || !resourceId) {
     return true
   }
-  const request = { busiFlag: 'dataV' }
+  const request = { busiFlag: 'dataV', resourceTable: 'core' }
   await interactiveStore.setInteractive(request)
   return check(wsCache.get('screen-weight'), resourceId, 4)
 }
@@ -399,7 +409,9 @@ onMounted(async () => {
     if (canvasCache) {
       canvasCacheOutRef.value?.dialogInit({ canvasType: 'dataV', resourceId: dvId })
     } else {
-      await initLocalCanvasData()
+      await initLocalCanvasData(() => {
+        // do init
+      })
     }
   } else if (opt && opt === 'create') {
     state.canvasInitStatus = false
@@ -496,6 +508,18 @@ const popComponentData = computed(() =>
   componentData.value.filter(ele => ele.category && ele.category === 'hidden')
 )
 
+const doRecoverToPublished = () => {
+  recoverToPublished({ id: dvInfo.value.id, type: 'dataV', name: dvInfo.value.name }).then(() => {
+    state.resourceId = dvInfo.value.id
+    state.sourcePid = dvInfo.value.pid
+    state.opt = null
+    initLocalCanvasData(() => {
+      dvMainStore.updateDvInfoCall(1)
+      useEmitt().emitter.emit('calcData-all')
+    })
+  })
+}
+
 eventBus.on('handleNew', handleNew)
 
 eventBus.on('tabSort', tabSort)
@@ -507,7 +531,7 @@ eventBus.on('tabSort', tabSort)
     class="dv-common-layout"
     :class="isDataEaseBi && !newWindowFromDiv && 'dataease-w-h'"
   >
-    <DvToolbar />
+    <DvToolbar @recover-to-published="doRecoverToPublished" />
     <div class="custom-dv-divider" />
     <el-container
       v-if="loadFinish"
@@ -654,10 +678,11 @@ eventBus.on('tabSort', tabSort)
     v-if="fullscreenFlag"
     style="z-index: 10"
     ref="dvPreviewRef"
+    show-position="edit-preview"
     :canvas-data-preview="componentData"
     :canvas-style-preview="canvasStyleData"
     :canvas-view-info-preview="canvasViewInfo"
-    :dv-info="dvInfo"
+    :dv-info="{ ...dvInfo, status: 1 }"
   ></dv-preview>
   <custom-tabs-sort ref="customTabsSortRef"></custom-tabs-sort>
 </template>