Commit 90d58d1ad86a1efd362f8ddc8f0997105cc99204

Authored by fengwotao
1 parent db6661cc

feat:大屏新增预览

  1 +<!-- THINGS_KIT -->
  2 +
1 <template> 3 <template>
2 - <div :class="`go-preview ${localStorageInfo.editCanvasConfig.previewScaleType}`">  
3 - <template v-if="showEntity">  
4 - <!-- 实体区域 -->  
5 - <div ref="entityRef" class="go-preview-entity">  
6 - <!-- 缩放层 -->  
7 - <div ref="previewRef" class="go-preview-scale">  
8 - <!-- 展示层 -->  
9 - <div :style="previewRefStyle" v-if="show">  
10 - <!-- 渲染层 -->  
11 - <preview-render-list :localStorageInfo="localStorageInfo"></preview-render-list>  
12 - </div>  
13 - </div>  
14 - </div>  
15 - </template>  
16 - <template v-else>  
17 - <!-- 缩放层 -->  
18 - <div ref="previewRef" class="go-preview-scale">  
19 - <!-- 展示层 -->  
20 - <div :style="previewRefStyle" v-if="show">  
21 - <!-- 渲染层 -->  
22 - <preview-render-list :localStorageInfo="localStorageInfo"></preview-render-list>  
23 - </div>  
24 - </div>  
25 - </template>  
26 - </div> 4 + <suspense>
  5 + <suspense-index></suspense-index>
  6 + </suspense>
27 </template> 7 </template>
28 8
29 <script setup lang="ts"> 9 <script setup lang="ts">
30 -import { computed } from 'vue'  
31 -import { PreviewRenderList } from './components/PreviewRenderList'  
32 -import { getFilterStyle, setTitle } from '@/utils'  
33 -import { getEditCanvasConfigStyle, getSessionStorageInfo } from './utils'  
34 -import { useComInstall } from './hooks/useComInstall.hook'  
35 -import { useScale } from './hooks/useScale.hook'  
36 -import { useStore } from './hooks/useStore.hook'  
37 -import { PreviewScaleEnum } from '@/enums/styleEnum'  
38 -import type { ChartEditStorageType } from './index.d'  
39 -  
40 -const localStorageInfo: ChartEditStorageType = getSessionStorageInfo() as ChartEditStorageType  
41 -setTitle(`预览-${localStorageInfo.editCanvasConfig.projectName}`)  
42 -  
43 -const previewRefStyle = computed(() => {  
44 - return {  
45 - ...getEditCanvasConfigStyle(localStorageInfo.editCanvasConfig),  
46 - ...getFilterStyle(localStorageInfo.editCanvasConfig)  
47 - }  
48 -})  
49 -  
50 -const showEntity = computed(() => {  
51 - const type = localStorageInfo.editCanvasConfig.previewScaleType  
52 - return type === PreviewScaleEnum.SCROLL_Y || type === PreviewScaleEnum.SCROLL_X  
53 -})  
54 -  
55 -useStore(localStorageInfo)  
56 -const { entityRef, previewRef } = useScale(localStorageInfo)  
57 -const { show } = useComInstall(localStorageInfo) 10 +import suspenseIndex from './suspenseIndex.vue'
58 </script> 11 </script>
59 -  
60 -<style lang="scss" scoped>  
61 -@include go('preview') {  
62 - position: relative;  
63 - height: 100vh;  
64 - width: 100vw;  
65 - @include background-image('background-image');  
66 - &.fit,  
67 - &.full {  
68 - display: flex;  
69 - align-items: center;  
70 - justify-content: center;  
71 - overflow: hidden;  
72 - .go-preview-scale {  
73 - transform-origin: center center;  
74 - }  
75 - }  
76 - &.scrollY {  
77 - overflow-x: hidden;  
78 - .go-preview-scale {  
79 - transform-origin: left top;  
80 - }  
81 - }  
82 - &.scrollX {  
83 - overflow-y: hidden;  
84 - .go-preview-scale {  
85 - transform-origin: left top;  
86 - }  
87 - }  
88 - .go-preview-entity {  
89 - overflow: hidden;  
90 - }  
91 -}  
92 -</style>  
  1 +<!-- THINGS_KIT -->
  2 +<template>
  3 + <div :class="`go-preview ${localStorageInfo.editCanvasConfig.previewScaleType}`">
  4 + <template v-if="showEntity">
  5 + <!-- 实体区域 -->
  6 + <div ref="entityRef" class="go-preview-entity">
  7 + <!-- 缩放层 -->
  8 + <div ref="previewRef" class="go-preview-scale">
  9 + <!-- 展示层 -->
  10 + <div :style="previewRefStyle" v-if="show">
  11 + <!-- 渲染层 -->
  12 + <preview-render-list :localStorageInfo="localStorageInfo"></preview-render-list>
  13 + </div>
  14 + </div>
  15 + </div>
  16 + </template>
  17 + <template v-else>
  18 + <!-- 缩放层 -->
  19 + <div ref="previewRef" class="go-preview-scale">
  20 + <!-- 展示层 -->
  21 + <div :style="previewRefStyle" v-if="show">
  22 + <!-- 渲染层 -->
  23 + <preview-render-list :localStorageInfo="localStorageInfo"></preview-render-list>
  24 + </div>
  25 + </div>
  26 + </template>
  27 + </div>
  28 +</template>
  29 +
  30 +<script setup lang="ts">
  31 +import { computed } from 'vue'
  32 +import { PreviewRenderList } from './components/PreviewRenderList'
  33 +import { getFilterStyle, routerTurnByName, getSessionStorage, setTitle } from '@/utils'
  34 +import { getEditCanvasConfigStyle, getSessionStorageInfo } from './utils'
  35 +import { PageEnum } from '@/enums/pageEnum'
  36 +import { StorageEnum } from '@/enums/storageEnum'
  37 +import { useScale } from './hooks/useScale.hook'
  38 +import { useStore } from './hooks/useStore.hook'
  39 +import { PreviewScaleEnum } from '@/enums/styleEnum'
  40 +import { useComInstall } from './hooks/useComInstall.hook'
  41 +import type { ChartEditStorageType } from './index.d'
  42 +
  43 +const storageList: ChartEditStorageType[] = getSessionStorage(StorageEnum.GO_CHART_STORAGE_LIST)
  44 +// THINGS_KIT
  45 +const localStorageInfo = (await getSessionStorageInfo()) as unknown as ChartEditStorageType
  46 +console.log(localStorageInfo)
  47 +setTitle(`预览-${localStorageInfo?.projectName}`)
  48 +// THINGS_KIT
  49 +// @ts-ignore
  50 +if (localStorageInfo.isRelease === false) {
  51 + // routerTurnByName(PageEnum.REDIRECT_UN_PUBLISH_NAME, true, false)
  52 +}
  53 +
  54 +const previewRefStyle = computed(() => {
  55 + return {
  56 + ...getEditCanvasConfigStyle(localStorageInfo.editCanvasConfig),
  57 + ...getFilterStyle(localStorageInfo.editCanvasConfig.filterShow ? localStorageInfo.editCanvasConfig : undefined)
  58 + }
  59 +})
  60 +
  61 +const showEntity = computed(() => {
  62 + const type = localStorageInfo.editCanvasConfig.previewScaleType
  63 + return type === PreviewScaleEnum.SCROLL_Y || type === PreviewScaleEnum.SCROLL_X
  64 +})
  65 +
  66 +useStore(localStorageInfo)
  67 +const { entityRef, previewRef } = useScale(localStorageInfo)
  68 +const { show } = useComInstall(localStorageInfo)
  69 +</script>
  70 +
  71 +<style lang="scss" scoped>
  72 +@include go('preview') {
  73 + position: relative;
  74 + height: 100vh;
  75 + width: 100vw;
  76 + @include background-image('background-image');
  77 + &.fit,
  78 + &.full {
  79 + display: flex;
  80 + align-items: center;
  81 + justify-content: center;
  82 + overflow: hidden;
  83 + .go-preview-scale {
  84 + transform-origin: center center;
  85 + }
  86 + }
  87 + &.scrollY {
  88 + overflow-x: hidden;
  89 + .go-preview-scale {
  90 + transform-origin: left top;
  91 + }
  92 + }
  93 + &.scrollX {
  94 + overflow-y: hidden;
  95 + .go-preview-scale {
  96 + transform-origin: left top;
  97 + }
  98 + }
  99 + .go-preview-entity {
  100 + overflow: hidden;
  101 + }
  102 +}
  103 +</style>
1 -import { getSessionStorage } from '@/utils' 1 +import { getSessionStorage, fetchRouteParamsLocation, JSONParse } from '@/utils'
2 import { StorageEnum } from '@/enums/storageEnum' 2 import { StorageEnum } from '@/enums/storageEnum'
3 import { ChartEditStorage } from '@/store/modules/chartEditStore/chartEditStore.d' 3 import { ChartEditStorage } from '@/store/modules/chartEditStore/chartEditStore.d'
  4 +import { getDataView } from '@/api/external/contentSave/content'
4 5
5 export interface ChartEditStorageType extends ChartEditStorage { 6 export interface ChartEditStorageType extends ChartEditStorage {
6 id: string 7 id: string
7 } 8 }
8 - 9 +// THINGS_KIT
9 // 根据路由 id 获取存储数据的信息 10 // 根据路由 id 获取存储数据的信息
10 -export const getSessionStorageInfo = () => {  
11 - const urlHash = document.location.hash  
12 - const toPathArray = urlHash.split('/')  
13 - const id = toPathArray && toPathArray[toPathArray.length - 1]  
14 -  
15 - const storageList: ChartEditStorageType[] = getSessionStorage(  
16 - StorageEnum.GO_CHART_STORAGE_LIST  
17 - )  
18 -  
19 - if(!storageList) return  
20 -  
21 - for (let i = 0; i < storageList.length; i++) {  
22 - if (id.toString() === storageList[i]['id']) {  
23 - return storageList[i] 11 +export const getSessionStorageInfo = async () => {
  12 + const id = fetchRouteParamsLocation()
  13 + const storageList: ChartEditStorageType[] = getSessionStorage(StorageEnum.GO_CHART_STORAGE_LIST)
  14 + // 是否本地预览
  15 + if (!storageList || storageList.findIndex(e => e.id === id.toString()) === -1) {
  16 + // 接口调用
  17 + const res = await getDataView(id)
  18 + if (res) {
  19 + const { dataViewContent, state, dataViewName, dataViewId } = res
  20 + // if (state === 1) {
  21 + // // 跳转未发布页
  22 + // return { isRelease: false }
  23 + // }
  24 + return { ...JSONParse(dataViewContent?.content), id: dataViewId, projectName: dataViewName }
  25 + } else {
  26 + // 本地读取
  27 + for (let i = 0; i < storageList.length; i++) {
  28 + if (id.toString() === storageList[i]['id']) {
  29 + return storageList[i]
  30 + }
  31 + }
24 } 32 }
25 } 33 }
26 -}  
  34 +}