From 5088de7a95fd5657d546b5d44674b656002058f4 Mon Sep 17 00:00:00 2001 From: wangjiahao <1522128093@qq.com> Date: Thu, 11 Apr 2024 19:16:07 +0800 Subject: [PATCH] =?UTF-8?q?refactor(=E5=B7=A5=E4=BD=9C=E5=8F=B0):=20?= =?UTF-8?q?=E8=B0=83=E6=95=B4=E6=A8=A1=E7=89=88=E5=B8=82=E5=9C=BA=E6=96=B0?= =?UTF-8?q?=E5=BB=BA=E6=A8=A1=E5=BC=8F=EF=BC=8C=E5=85=BC=E5=AE=B9=E5=B5=8C?= =?UTF-8?q?=E5=85=A5=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../api/visualization/dataVisualization.ts | 3 +- core/core-frontend/src/utils/canvasUtils.ts | 32 ++++++++++++ .../src/views/dashboard/index.vue | 18 ++++--- .../src/views/data-visualization/index.vue | 25 ++++++--- .../src/views/template-market/index.vue | 51 +++++++++---------- .../src/views/workbranch/index.vue | 31 +++++------ 6 files changed, 101 insertions(+), 59 deletions(-) diff --git a/core/core-frontend/src/api/visualization/dataVisualization.ts b/core/core-frontend/src/api/visualization/dataVisualization.ts index bc08ec025b..d5f3d71fe7 100644 --- 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 => { 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({ diff --git a/core/core-frontend/src/utils/canvasUtils.ts b/core/core-frontend/src/utils/canvasUtils.ts index c2dc84d934..ad2aca03cf 100644 --- 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) +} diff --git a/core/core-frontend/src/views/dashboard/index.vue b/core/core-frontend/src/views/dashboard/index.vue index 8436f9ae28..632af72194 100644 --- 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() diff --git a/core/core-frontend/src/views/data-visualization/index.vue b/core/core-frontend/src/views/data-visualization/index.vue index 478c4d4317..d2d6121c39 100644 --- 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() diff --git a/core/core-frontend/src/views/template-market/index.vue b/core/core-frontend/src/views/template-market/index.vue index 7eeb865ad5..2be6931e94 100644 --- 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 => { diff --git a/core/core-frontend/src/views/workbranch/index.vue b/core/core-frontend/src/views/workbranch/index.vue index ff0bb7ae55..4c93e7e6b0 100644 --- 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 = () => {