Merge pull request #9073 from dataease/pr@dev-v2@refactor_inject

refactor(工作台): 调整模版市场新建模式，兼容嵌入式
2024-04-11 19:16:47 +08:00 · 2024-04-11 19:16:47 +08:00 · 51d2161e13
commit 51d2161e13
parent 03d638b83b 5088de7a95
6 changed files with 101 additions and 59 deletions
--- a/core/core-frontend/src/api/visualization/dataVisualization.ts
+++ b/core/core-frontend/src/api/visualization/dataVisualization.ts
@ -72,7 +72,8 @@ export const storeStatusApi = (id: string): Promise<IResponse> => {
  return request.get({ url: `/store/favorited/${id}` })
 }

-export const decompression = data => request.post({ url: '/dataVisualization/decompression', data })
+export const decompression = async data =>
+  request.post({ url: '/dataVisualization/decompression', data })

 export const viewDetailList = dvId => {
  return request.get({
--- a/core/core-frontend/src/utils/canvasUtils.ts
+++ b/core/core-frontend/src/utils/canvasUtils.ts
@ -7,6 +7,7 @@ import componentList, {
 import eventBus from '@/utils/eventBus'
 import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
 import {
+  decompression,
  findById,
  findCopyResource,
  saveCanvas,
@ -388,3 +389,34 @@ export function findParentIdByChildIdRecursive(tree, targetChildId) {

  return null // 没有找到匹配的子节点
 }
+
+export async function decompressionPre(params, callBack) {
+  let deTemplateData
+  await decompression(params)
+    .then(response => {
+      const deTemplateDataTemp = response.data
+      const sourceComponentData = JSON.parse(deTemplateDataTemp['componentData'])
+      sourceComponentData.forEach(componentItem => {
+        // 2 为基础版本 此处需要增加仪表板矩阵密度
+        if (
+          (!deTemplateDataTemp.version || deTemplateDataTemp.version === 2) &&
+          deTemplateDataTemp.type === 'dashboard'
+        ) {
+          componentItem.x = 1 + (componentItem.x - 1) * 2
+          componentItem.y = 1 + (componentItem.y - 1) * 2
+          componentItem.sizeX = componentItem.sizeX * 2
+          componentItem.sizeY = componentItem.sizeY * 2
+        }
+      })
+      const sourceCanvasStyle = JSON.parse(deTemplateDataTemp['canvasStyleData'])
+      deTemplateData = {
+        canvasStyleData: sourceCanvasStyle,
+        componentData: sourceComponentData,
+        canvasViewInfo: deTemplateDataTemp['canvasViewInfo']
+      }
+    })
+    .catch(e => {
+      console.error(e)
+    })
+  callBack(deTemplateData)
+}
--- a/core/core-frontend/src/views/dashboard/index.vue
+++ b/core/core-frontend/src/views/dashboard/index.vue
@ -13,7 +13,7 @@ import ViewEditor from '@/views/chart/components/editor/index.vue'
 import { getDatasetTree } from '@/api/dataset'
 import { Tree } from '@/views/visualized/data/dataset/form/CreatDsGroup.vue'
 import DbCanvasAttr from '@/components/dashboard/DbCanvasAttr.vue'
-import { initCanvasData } from '@/utils/canvasUtils'
+import { decompressionPre, initCanvasData } from '@/utils/canvasUtils'
 import ChartStyleBatchSet from '@/views/chart/components/editor/editor-style/ChartStyleBatchSet.vue'
 import DeCanvas from '@/views/canvas/DeCanvas.vue'
 import { check, compareStorage } from '@/utils/CrossPermission'
@ -24,6 +24,7 @@ import { snapshotStoreWithOut } from '@/store/modules/data-visualization/snapsho
 import { interactiveStoreWithOut } from '@/store/modules/interactive'
 import { watermarkFind } from '@/api/watermark'
 import { XpackComponent } from '@/components/plugin'
+import { Base64 } from 'js-base64'
 const interactiveStore = interactiveStoreWithOut()
 const embeddedStore = useEmbedded()
 const { wsCache } = useCache()
@ -114,7 +115,7 @@ onMounted(async () => {
  window.addEventListener('storage', eventCheck)
  const resourceId = embeddedStore.resourceId || router.currentRoute.value.query.resourceId
  const pid = embeddedStore.pid || router.currentRoute.value.query.pid
-  const { opt, createType } = router.currentRoute.value.query
+  const { opt, createType, templateParams } = router.currentRoute.value.query
  const checkResult = await checkPer(resourceId)
  if (!checkResult) {
    return
@ -147,15 +148,20 @@ onMounted(async () => {
    } catch (e) {
      console.error('can not find watermark info')
    }
+    let deTemplateData
+    if (createType === 'template') {
+      const templateParamsApply = JSON.parse(Base64.decode(templateParams + ''))
+      await decompressionPre(templateParamsApply, result => {
+        deTemplateData = result
+      })
+    }
    nextTick(() => {
      dvMainStore.createInit('dashboard', null, pid, watermarkBaseInfo)
      // 从模板新建
      if (createType === 'template') {
-        const deTemplateDataStr = wsCache.get(`de-template-data`)
-        const deTemplateData = JSON.parse(deTemplateDataStr)
        wsCache.delete('de-template-data')
-        dvMainStore.setComponentData(JSON.parse(deTemplateData['componentData']))
-        dvMainStore.setCanvasStyle(JSON.parse(deTemplateData['canvasStyleData']))
+        dvMainStore.setComponentData(deTemplateData['componentData'])
+        dvMainStore.setCanvasStyle(deTemplateData['canvasStyleData'])
        dvMainStore.setCanvasViewInfo(deTemplateData['canvasViewInfo'])
        setTimeout(() => {
          snapshotStore.recordSnapshotCache()
--- a/core/core-frontend/src/views/data-visualization/index.vue
+++ b/core/core-frontend/src/views/data-visualization/index.vue
@ -17,7 +17,12 @@ import Editor from '@/views/chart/components/editor/index.vue'
 import { guid } from '@/views/visualized/data/dataset/form/util.js'
 import { getDatasetTree } from '@/api/dataset'
 import { Tree } from '@/views/visualized/data/dataset/form/CreatDsGroup.vue'
-import { findDragComponent, findNewComponent, initCanvasData } from '@/utils/canvasUtils'
+import {
+  decompressionPre,
+  findDragComponent,
+  findNewComponent,
+  initCanvasData
+} from '@/utils/canvasUtils'
 import CanvasCore from '@/components/data-visualization/canvas/CanvasCore.vue'
 import { listenGlobalKeyDown, releaseAttachKey } from '@/utils/DeShortcutKey'
 import { adaptCurThemeCommonStyle } from '@/utils/canvasStyle'
@ -30,6 +35,7 @@ import RealTimeListTree from '@/components/data-visualization/RealTimeListTree.v
 import { interactiveStoreWithOut } from '@/store/modules/interactive'
 import { watermarkFind } from '@/api/watermark'
 import { XpackComponent } from '@/components/plugin'
+import { Base64 } from 'js-base64'
 const interactiveStore = interactiveStoreWithOut()
 const embeddedStore = useEmbedded()
 const { wsCache } = useCache()
@ -214,7 +220,7 @@ onMounted(async () => {
  }
  const dvId = embeddedStore.dvId || router.currentRoute.value.query.dvId
  const pid = embeddedStore.pid || router.currentRoute.value.query.pid
-  const { opt, createType } = router.currentRoute.value.query
+  const { opt, createType, templateParams } = router.currentRoute.value.query
  const checkResult = await checkPer(dvId)
  if (!checkResult) {
    return
@ -250,7 +256,13 @@ onMounted(async () => {
    } catch (e) {
      console.error('can not find watermark info')
    }
-
+    let deTemplateData
+    if (createType === 'template') {
+      const templateParamsApply = JSON.parse(Base64.decode(templateParams + ''))
+      await decompressionPre(templateParamsApply, result => {
+        deTemplateData = result
+      })
+    }
    dvMainStore.createInit('dataV', null, pid, watermarkBaseInfo)
    nextTick(() => {
      state.canvasInitStatus = true
@ -258,11 +270,8 @@ onMounted(async () => {
      snapshotStore.recordSnapshotCache('renderChart')
      // 从模板新建
      if (createType === 'template') {
-        const deTemplateDataStr = wsCache.get(`de-template-data`)
-        wsCache.delete('de-template-data')
-        const deTemplateData = JSON.parse(deTemplateDataStr)
-        dvMainStore.setComponentData(JSON.parse(deTemplateData['componentData']))
-        dvMainStore.setCanvasStyle(JSON.parse(deTemplateData['canvasStyleData']))
+        dvMainStore.setComponentData(deTemplateData['componentData'])
+        dvMainStore.setCanvasStyle(deTemplateData['canvasStyleData'])
        dvMainStore.setCanvasViewInfo(deTemplateData['canvasViewInfo'])
        setTimeout(() => {
          snapshotStore.recordSnapshotCache()
--- a/core/core-frontend/src/views/template-market/index.vue
+++ b/core/core-frontend/src/views/template-market/index.vue
@ -166,13 +166,13 @@ import elementResizeDetectorMaker from 'element-resize-detector'
 import { nextTick, reactive, watch, onMounted, ref, computed } from 'vue'
 import { useI18n } from '@/hooks/web/useI18n'
 import { ElMessage } from 'element-plus-secondary'
-import { decompression } from '@/api/visualization/dataVisualization'
 import { useCache } from '@/hooks/web/useCache'
 import MarketPreviewV2 from '@/views/template-market/component/MarketPreviewV2.vue'
 import { imgUrlTrans } from '@/utils/imgUtils'
 import CategoryTemplateV2 from '@/views/template-market/component/CategoryTemplateV2.vue'
 import { interactiveStoreWithOut } from '@/store/modules/interactive'
 import { XpackComponent } from '@/components/plugin'
+import { Base64 } from 'js-base64'
 const { t } = useI18n()
 const { wsCache } = useCache()

@ -399,6 +399,7 @@ const nextOne = () => {
 const templateApply = template => {
  state.curApplyTemplate = template
  state.dvCreateForm.name = template.title
+  state.dvCreateForm.nodeType = template.templateType
  if (template.source === 'market') {
    state.dvCreateForm.newFrom = 'new_market_template'
    state.dvCreateForm.templateUrl = template.metas.theme_repo
@ -407,38 +408,34 @@ const templateApply = template => {
    state.dvCreateForm.newFrom = 'new_inner_template'
    state.dvCreateForm.templateId = template.id
  }
-  apply()
+  apply(template)
 }

-const apply = () => {
+const apply = template => {
  if (state.dvCreateForm.newFrom === 'new_market_template' && !state.dvCreateForm.templateUrl) {
    ElMessage.warning('未获取模板下载链接请联系模板市场官方')
    return false
  }
-  state.loading = true
-  decompression(state.dvCreateForm)
-    .then(response => {
-      state.curApplyTemplate.recentUseTime = Date.now()
-      state.curApplyTemplate.categoryNames.push('最近使用')
-      state.loading = false
-      const templateData = response.data
-      // do create
-      wsCache.set(`de-template-data`, JSON.stringify(templateData))
-      const baseUrl =
-        templateData.type === 'dataV'
-          ? '#/dvCanvas?opt=create&createType=template'
-          : '#/dashboard?opt=create&createType=template'
-      let newWindow = null
-      if (state.pid) {
-        newWindow = window.open(baseUrl + `&pid=${state.pid}`, '_blank')
-      } else {
-        newWindow = window.open(baseUrl, '_blank')
-      }
-      initOpenHandler(newWindow)
-    })
-    .catch(() => {
-      state.loading = false
-    })
+  const templateTemplate = {
+    newFrom: state.dvCreateForm.newFrom,
+    templateUrl: state.dvCreateForm.templateUrl,
+    resourceName: state.dvCreateForm.resourceName
+  }
+  state.curApplyTemplate.recentUseTime = Date.now()
+  state.curApplyTemplate.categoryNames.push('最近使用')
+  const baseUrl =
+    (['dataV', 'SCREEN'].includes(state.dvCreateForm.nodeType)
+      ? '#/dvCanvas?opt=create&createType=template'
+      : '#/dashboard?opt=create&createType=template') +
+    '&templateParams=' +
+    Base64.encode(JSON.stringify(templateTemplate))
+  let newWindow = null
+  if (state.pid) {
+    newWindow = window.open(baseUrl + `&pid=${state.pid}`, '_blank')
+  } else {
+    newWindow = window.open(baseUrl, '_blank')
+  }
+  initOpenHandler(newWindow)
 }
 const openHandler = ref(null)
 const initOpenHandler = newWindow => {
--- a/core/core-frontend/src/views/workbranch/index.vue
+++ b/core/core-frontend/src/views/workbranch/index.vue
@ -11,9 +11,9 @@ import { useRouter } from 'vue-router'
 import { searchMarketRecommend } from '@/api/templateMarket'
 import TemplateBranchItem from '@/views/workbranch/TemplateBranchItem.vue'
 import { ElMessage } from 'element-plus-secondary'
-import { decompression } from '@/api/visualization/dataVisualization'
 import { useCache } from '@/hooks/web/useCache'
 import DeResourceCreateOptV2 from '@/views/common/DeResourceCreateOptV2.vue'
+import { Base64 } from 'js-base64'
 const userStore = useUserStoreWithOut()
 const interactiveStore = interactiveStoreWithOut()
 const permissionStore = usePermissionStoreWithOut()
@ -203,6 +203,7 @@ const templateApply = template => {
  state.dvCreateForm.name = template.title
  state.dvCreateForm.templateUrl = template.metas.theme_repo
  state.dvCreateForm.resourceName = template.id
+  state.dvCreateForm.nodeType = template.templateType
  apply()
 }

@ -211,22 +212,18 @@ const apply = () => {
    ElMessage.warning('未获取模板下载链接请联系模板市场官方')
    return false
  }
-  state.loading = true
-  decompression(state.dvCreateForm)
-    .then(response => {
-      state.loading = false
-      const templateData = response.data
-      // do create
-      wsCache.set(`de-template-data`, JSON.stringify(templateData))
-      const baseUrl =
-        templateData.type === 'dataV'
-          ? '#/dvCanvas?opt=create&createType=template'
-          : '#/dashboard?opt=create&createType=template'
-      window.open(baseUrl, '_blank')
-    })
-    .catch(() => {
-      state.loading = false
-    })
+  const templateTemplate = {
+    newFrom: state.dvCreateForm.newFrom,
+    templateUrl: state.dvCreateForm.templateUrl,
+    resourceName: state.dvCreateForm.resourceName
+  }
+  const baseUrl =
+    (['dataV', 'SCREEN'].includes(state.dvCreateForm.nodeType)
+      ? '#/dvCanvas?opt=create&createType=template'
+      : '#/dashboard?opt=create&createType=template') +
+    '&templateParams=' +
+    Base64.encode(JSON.stringify(templateTemplate))
+  window.open(baseUrl, '_blank')
 }

 const toTemplateMarket = () => {