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

core/core-frontend/src/viewsnew/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,34 +119,45 @@ const loadCanvasDataAsync = async (dvId, dvType, ignoreParams = false) => {
 
   await initCanvasData(
     dvId,
-    dvType,
+    { busiFlag: dvType, resourceTable: state.editPreview ? 'snapshot' : 'core' },
-    function ({
+    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 (jumpParam) {
+      if (state.dvInfo.status) {
-        dvMainStore.addViewTrackFilter(jumpParam)
+        if (jumpParam) {
-      }
+          dvMainStore.addViewTrackFilter(jumpParam)
-      if (!ignoreParams) {
+        }
-        state.initState = false
+        if (!ignoreParams) {
-        dvMainStore.addOuterParamsFilter(attachParam)
+          state.initState = false
-        state.initState = true
+          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))
+  await Promise.all([new Promise(r => (p = r)), new Promise(r => (p1 = r))])
-  const dvId = embeddedStore.dvId || router.currentRoute.value.query.dvId
+  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/viewsnew/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,
+    { busiFlag: dvType },
-    function ({
+    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 (jumpParam) {
+      if (state.dvInfo.status) {
-        dvMainStore.addViewTrackFilter(jumpParam)
+        if (jumpParam) {
+          dvMainStore.addViewTrackFilter(jumpParam)
+        }
+
+        state.initState = false
+        dvMainStore.addOuterParamsFilter(attachParam)
+        state.initState = true
       }
-      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/viewsnew/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/viewsnew/data-visualization/PreviewShow.vue

@@ -9,8 +9,6 @@ import EmptyBackground from '@/components/empty-background/src/EmptyBackground.v
 import { storeToRefs } from 'pinia'
 import { useAppStoreWithOut } from '@/store/modules/app'
 import { initCanvasData, initCanvasDataPrepare, onInitReady } from '@/utils/canvasUtils'
-import { useRequestStoreWithOut } from '@/store/modules/request'
-import { usePermissionStoreWithOut } from '@/store/modules/permission'
 import { useMoveLine } from '@/hooks/web/useMoveLine'
 import { Icon } from '@/components/icon-custom'
 import { download2AppTemplate, downloadCanvas2 } from '@/utils/imgUtils'
@@ -32,7 +30,6 @@ const { dvInfo, canvasViewDataInfo } = storeToRefs(dvMainStore)
 const previewCanvasContainer = ref(null)
 const dvPreviewRef = ref(null)
 const slideShow = ref(true)
-const permissionStore = usePermissionStoreWithOut()
 const dataInitState = ref(true)
 const downloadStatus = ref(false)
 const { width, node } = useMoveLine('DASHBOARD')
@@ -47,6 +44,11 @@ const props = defineProps({
     required: false,
     type: Boolean,
     default: false
+  },
+  resourceTable: {
+    required: false,
+    type: String,
+    default: 'core'
   }
 })
 
@@ -76,7 +78,7 @@ const loadCanvasData = (dvId, weight?, ext?) => {
   dataInitState.value = false
   initMethod(
     dvId,
-    'dataV',
+    { busiFlag: 'dataV', resourceTable: 'core' },
     function ({
       canvasDataResult,
       canvasStyleResult,
@@ -251,12 +253,13 @@ onBeforeMount(() => {
         v-show="slideShow"
         :cur-canvas-type="'dataV'"
         :show-position="showPosition"
+        :resource-table="resourceTable"
         @node-click="resourceNodeClick"
       />
     </el-aside>
     <el-container
       class="preview-area"
-      :class="{ 'no-data': !hasTreeData }"
+      :class="{ 'no-data': !state.dvInfo?.id }"
       v-loading="!dataInitState"
     >
       <div @click="slideOpenChange" class="flexible-button-area" v-if="false">
@@ -392,6 +395,6 @@ onBeforeMount(() => {
 
 .multiplexing-content {
   padding: 12px;
-  background-color: rgb(33,33,33);
+  background-color: rgb(245, 246, 247);
 }
 </style>

core/core-frontend/src/viewsnew/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',
+      width: width * scrollOffset.value + 'px',
-      height: height * 1.5 + '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 scrollX = (scrollOffset.value * width - mainWidth) / 2
-      const scrollY = (1.5 * height - mainHeight.value) / 2 + 20
+      const scrollY = (scrollOffset.value * height - mainHeight.value) / 2 + 20
       // 设置画布初始滚动条位置
       canvasOut.value.scrollTo(scrollX, scrollY)
     }
@@ -290,31 +293,38 @@ 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'
+  const busiFlag = opt === 'copy' ? 'dataV-copy' : 'dataV'
-  await initCanvasData(resourceId, busiFlg, function () {
+  await initCanvasData(
-    state.canvasInitStatus = true
+    resourceId,
-    // afterInit
+    { busiFlag, resourceTable: 'snapshot', source: 'main-edit' },
-    nextTick(() => {
+    function () {
-      dvMainStore.setDataPrepareState(true)
+      state.canvasInitStatus = true
-      snapshotStore.recordSnapshotCache('renderChart')
+      // afterInit
-      if (dvInfo.value && opt === 'copy') {
+      nextTick(() => {
-        dvInfo.value.dataState = 'prepare'
+        dvMainStore.setDataPrepareState(true)
-        dvInfo.value.optType = 'copy'
+        snapshotStore.recordSnapshotCache('renderChart')
-        dvInfo.value.pid = sourcePid
+        if (dvInfo.value && opt === 'copy') {
-        setTimeout(() => {
+          dvInfo.value.dataState = 'prepare'
-          snapshotStore.recordSnapshotCache('renderChart')
+          dvInfo.value.optType = 'copy'
-        }, 1500)
+          dvInfo.value.pid = sourcePid
-      }
+          setTimeout(() => {
-      onInitReady({ resourceId: resourceId })
+            snapshotStore.recordSnapshotCache('renderChart')
-    })
+          }, 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>
@@ -671,7 +696,7 @@ eventBus.on('tabSort', tabSort)
 }
 
 .dv-common-layout {
-  height: calc(100vh - 1px);
+  height: 100vh;
   width: 100vw;
   overflow: hidden;
   color: @dv-canvas-main-font-color;
@@ -771,4 +796,4 @@ eventBus.on('tabSort', tabSort)
   font-size: 12px;
   color: rgb(169, 175, 184);
 }
-</style>
+</style>