简柏林 / thingskit-view · Commits

Commit 9e1bdb20cc46e79f368fdc03a1e87f009bedf878

Authored by xp.Huang
2 parents 66b62536 8f0b9cc4

Merge branch 'ft' into 'main' 

feat：大屏新增预览

See merge request yunteng/thingskit-view!3
Inline Side-by-side
Showing 16 changed files with 522 additions and 468 deletions
... ... @@ -27,6 +27,10 @@
27 27 </div>
28 28 </div>
29 29 </div>
  30 + <!-- THINGS_KIT -->
  31 + <script>
  32 + document.title="大屏设计器"
  33 + </script>
30 34 <script type="module" src="/src/main.ts"></script>
31 35 </body>
32 36
... ...
1   -import {defHttp} from '@/utils/external/http/axios';
2   -import {
3   - ContentParams,
4   - ContentResultModel,
5   -} from './model/contentModel';
  1 +import { defHttp } from '@/utils/external/http/axios'
  2 +import { BaseSaveContentParams, BaseUpdateContentParams } from './model/contentModel'
6 3
7   -import type {ErrorMessageMode} from '/#/external/axios';
  4 +import type { ErrorMessageMode } from '/#/external/axios'
8 5
9 6 enum Api {
10   - CONTENT = '/data_view/content',
11   - GET_CONTENT = '/data_view',
12   - FILE_UPLOAD = '/oss/upload'
  7 + //大屏设计器
  8 + DATA_VIEW_CONTENT = '/data_view/content',
  9 + //大屏内容
  10 + DATA_VIEW = '/data_view',
  11 + FILE_UPLOAD = '/oss/upload'
13 12 }
14 13
15 14 /**
16   - * @description: content save api
  15 + * @description: 大屏设计器 update api
17 16 */
18   -export function contentUpdateApi(params: object, mode: ErrorMessageMode = 'modal') {
19   - return defHttp.put(
20   - {
21   - url: Api.CONTENT,
22   - params,
23   - },
24   - {
25   - errorMessageMode: mode,
26   - }
27   - );
  17 +export function contentUpdateApi(params: BaseUpdateContentParams, mode: ErrorMessageMode = 'modal') {
  18 + return defHttp.put<BaseUpdateContentParams>(
  19 + {
  20 + url: Api.DATA_VIEW_CONTENT,
  21 + params
  22 + },
  23 + {
  24 + errorMessageMode: mode
  25 + }
  26 + )
28 27 }
  28 +
  29 +/**
  30 + * @description: 大屏设计器 save api
  31 + */
29 32 export function contentSaveApi(params: object, mode: ErrorMessageMode = 'modal') {
30   - return defHttp.post(
31   - {
32   - url: Api.CONTENT,
33   - params,
34   - },
35   - {
36   - errorMessageMode: mode,
37   - }
38   - );
  33 + return defHttp.post<BaseSaveContentParams>(
  34 + {
  35 + url: Api.DATA_VIEW_CONTENT,
  36 + params
  37 + },
  38 + {
  39 + errorMessageMode: mode
  40 + }
  41 + )
39 42 }
  43 +
40 44 /**
41   - * @description:dataView content get api
  45 + * @description: 大屏设计器 delete api
42 46 */
  47 +export function contentDeleteApi(data: [string], mode: ErrorMessageMode = 'modal') {
  48 + return defHttp.delete(
  49 + {
  50 + url: Api.DATA_VIEW_CONTENT,
  51 + data
  52 + },
  53 + {
  54 + errorMessageMode: mode
  55 + }
  56 + )
  57 +}
43 58
44   -export const getDataView = (id: string) => {
45   - return defHttp.get({
46   - url: `${Api.GET_CONTENT}/get_configuration_info/${id}`,
47   - });
48   -};
  59 +/**
  60 + * @description:大屏内容 content get api
  61 + */
49 62
  63 +export const getDataView = (id: string) => {
  64 + return defHttp.get({
  65 + url: `${Api.DATA_VIEW}/get_configuration_info/${id}`
  66 + })
  67 +}
50 68
51 69 /**
52   - * @description: content get api
  70 + * @description: 大屏内容 get api
53 71 */
54 72
55 73 export const getDataViewList = (params: object) => {
56   - return defHttp.get({
57   - url: `${Api.GET_CONTENT}`,
58   - params
59   - });
60   -};
61   -
  74 + return defHttp.get({
  75 + url: `${Api.DATA_VIEW}`,
  76 + params
  77 + })
  78 +}
62 79 /**
63   - * @description: file Upload
  80 + * @description: 大屏内容 保存 api
64 81 */
65 82
  83 +export const saveDataViewList = (data: object) => {
  84 + return defHttp.put({
  85 + url: `${Api.DATA_VIEW}`,
  86 + data
  87 + })
  88 +}
66 89
67   -// * 上传文件
  90 +/**
  91 + * @description: file Upload
  92 + */
68 93 export const uploadFile = async (file: FormData, mode: ErrorMessageMode = 'modal') => {
69   - return defHttp.post({url: Api.FILE_UPLOAD, params: file}, {
70   - errorMessageMode: mode,
71   - });
  94 + return defHttp.post(
  95 + { url: Api.FILE_UPLOAD, params: file },
  96 + {
  97 + errorMessageMode: mode
  98 + }
  99 + )
72 100 }
73   -
... ...
1 1 /**
2   - * @description: Login interface parameters
  2 + * @description: 大屏新增内容Model
3 3 */
4   -export interface ContentParams {
5   - "content": string,
6   - "createTime"?: string,
7   - "creator"?: string,
8   - "defaultConfig"?: string,
9   - "description"?: string,
10   - "enabled"?: boolean,
11   - "icon"?: string,
12   - "id": string,
13   - "name"?: string,
14   - "nodeIds"?: [
15   - string
16   - ],
17   - "remark"?: string,
18   - "roleIds"?: [
19   - string
20   - ],
21   - "tenantExpireTime"?: string,
22   - "tenantId"?: string,
23   - "tenantProfileId"?: string,
24   - "tenantStatus"?: string,
25   - "updateTime"?: string,
26   - "updater"?: string,
27   - "viewId"?: string
28   -}
29   -
30   -export interface RoleInfo {
31   - roleName: string;
32   - value: string;
  4 +export interface BaseSaveContentParams {
  5 + content: string
  6 + createTime?: string
  7 + creator?: string
  8 + defaultConfig?: string
  9 + description?: string
  10 + enabled?: boolean
  11 + icon?: string
  12 + id: string
  13 + name?: string
  14 + nodeIds?: [string]
  15 + remark?: string
  16 + roleIds?: [string]
  17 + tenantExpireTime?: string
  18 + tenantId?: string
  19 + tenantProfileId?: string
  20 + tenantStatus?: string
  21 + updateTime?: string
  22 + updater?: string
  23 + viewId?: string
33 24 }
34 25
35 26 /**
36   - * @description: Login interface return value
  27 + * @description: 大屏更新内容Model
37 28 */
38   -export interface ContentResultModel {
39   - "content": string,
40   - "createTime": string,
41   - "creator": string,
42   - "defaultConfig": string,
43   - "description": string,
44   - "enabled": boolean,
45   - "icon": string,
46   - "id": string,
47   - "name": string,
48   - "nodeIds": [
49   - string
50   - ],
51   - "remark": string,
52   - "roleIds": [
53   - string
54   - ],
55   - "tenantExpireTime": string,
56   - "tenantId": string,
57   - "tenantProfileId": string,
58   - "tenantStatus": string,
59   - "updateTime": string,
60   - "updater": string,
61   - "viewId": string
  29 +export interface BaseUpdateContentParams {
  30 + dataViewContent: BaseSaveContentParams
  31 + dataViewId?: string
  32 + dataViewName: string
  33 + state?: number
62 34 }
63   -
... ...
1 1 <template>
2   - <n-dropdown
3   - trigger="hover"
4   - @select="handleSelect"
5   - :show-arrow="true"
6   - :options="options"
7   - >
  2 + <n-dropdown trigger="hover" @select="handleSelect" :show-arrow="true" :options="options">
8 3 <div class="user-info-box">
9 4 <person-icon v-if="fallback"></person-icon>
10   - <n-avatar
11   - v-if="!fallback"
12   - round
13   - object-fit="cover"
14   - size="medium"
15   - :src="Person"
16   - @error="errorHandle"
17   - ></n-avatar>
  5 + <n-avatar v-if="!fallback" round object-fit="cover" size="medium" :src="Person" @error="errorHandle"></n-avatar>
18 6 </div>
19 7 </n-dropdown>
20 8
... ... @@ -34,12 +22,7 @@ import { GoSystemInfo } from '@/components/GoSystemInfo/index'
34 22 import Person from './person.png'
35 23
36 24 import { icon } from '@/plugins'
37   -const {
38   - ChatboxEllipsesIcon,
39   - PersonIcon,
40   - LogOutOutlineIcon,
41   - SettingsSharpIcon
42   -} = icon.ionicons5
  25 +const { ChatboxEllipsesIcon, PersonIcon, LogOutOutlineIcon, SettingsSharpIcon } = icon.ionicons5
43 26
44 27 const t = window['$t']
45 28
... ... @@ -62,11 +45,7 @@ const renderUserInfo = () => {
62 45 style: 'margin-right: 12px;',
63 46 src: Person
64 47 }),
65   - h('div', null, [
66   - h('div', null, [
67   - h(NText, { depth: 2 }, { default: () => '奔跑的面条' })
68   - ])
69   - ])
  48 + h('div', null, [h('div', null, [h(NText, { depth: 2 }, { default: () => '奔跑的面条' })])])
70 49 ]
71 50 )
72 51 }
... ... @@ -86,11 +65,12 @@ const options = ref([
86 65 key: 'sysSet',
87 66 icon: renderIcon(SettingsSharpIcon)
88 67 },
89   - {
90   - label: renderLang('global.contact'),
91   - key: 'contact',
92   - icon: renderIcon(ChatboxEllipsesIcon)
93   - },
  68 + // THINGS_KIT
  69 + // {
  70 + // label: renderLang('global.contact'),
  71 + // key: 'contact',
  72 + // icon: renderIcon(ChatboxEllipsesIcon)
  73 + // },
94 74 {
95 75 type: 'divider',
96 76 key: 'd3'
... ...
... ... @@ -29,6 +29,11 @@ export enum PageEnum {
29 29 RELOAD = '/reload',
30 30 RELOAD_NAME = 'Reload',
31 31
  32 + // THINGS_KIT
  33 + // 未发布
  34 + REDIRECT_UN_PUBLISH = '/redirect/unPublish',
  35 + REDIRECT_UN_PUBLISH_NAME = 'redirect-un-publish',
  36 +
32 37
33 38 // 首页
34 39 BASE_HOME = '/project',
... ...
... ... @@ -151,7 +151,6 @@ export enum PackagesCategoryEnum {
151 151 INFORMATIONS = 'Informations',
152 152 DECORATES = 'Decorates',
153 153 // THINGS_KIT
154   - ARTOONS = 'Artoons',
155 154 COMPOSES = 'Composes',
156 155 }
157 156
... ... @@ -162,7 +161,6 @@ export enum PackagesCategoryName {
162 161 INFORMATIONS = '信息',
163 162 DECORATES = '小组件',
164 163 // THINGS_KIT
165   - ARTOONS='动画',
166 164 COMPOSES='组合',
167 165 }
168 166
... ... @@ -179,6 +177,5 @@ export type PackagesType = {
179 177 [PackagesCategoryEnum.TABLES]: ConfigType[]
180 178 [PackagesCategoryEnum.DECORATES]: ConfigType[]
181 179 // THINGS_KIT
182   - [PackagesCategoryEnum.ARTOONS]: ConfigType[]
183 180 [PackagesCategoryEnum.COMPOSES]: ConfigType[]
184 181 }
... ...
1   -import {CreateComponentType, CreateComponentGroupType, FilterEnum} from '@/packages/index.d'
2   -import {HistoryActionTypeEnum} from '@/store/modules/chartHistoryStore/chartHistoryStore.d'
  1 +import { CreateComponentType, CreateComponentGroupType, FilterEnum } from '@/packages/index.d'
  2 +import { HistoryActionTypeEnum } from '@/store/modules/chartHistoryStore/chartHistoryStore.d'
3 3 import { SyncEnum } from '@/enums/editPageEnum'
4 4 import {
5   - RequestHttpEnum,
6   - RequestContentTypeEnum,
7   - RequestDataTypeEnum,
8   - RequestHttpIntervalEnum,
9   - RequestParams,
10   - RequestBodyEnum,
11   - RequestParamsObjType
  5 + RequestHttpEnum,
  6 + RequestContentTypeEnum,
  7 + RequestDataTypeEnum,
  8 + RequestHttpIntervalEnum,
  9 + RequestParams,
  10 + RequestBodyEnum,
  11 + RequestParamsObjType
12 12 } from '@/enums/httpEnum'
13   -import {PreviewScaleEnum} from '@/enums/styleEnum'
14   -import type {ChartColorsNameType, GlobalThemeJsonType} from '@/settings/chartThemes/index'
  13 +import { PreviewScaleEnum } from '@/enums/styleEnum'
  14 +import type { ChartColorsNameType, GlobalThemeJsonType } from '@/settings/chartThemes/index'
15 15
  16 +// THINGS_KIT
16 17 // 项目数据枚举
17 18 export enum ProjectInfoEnum {
18   - // ID
19   - PROJECT_ID = "projectId",
20   - // 名称
21   - PROJECT_NAME = 'projectName',
22   - // 描述
23   - REMARKS = 'remarks',
24   - // 缩略图
25   - THUMBNAIL = 'thumbnail',
26   - // 是否公开发布
27   - RELEASE = 'release'
28   -}
29   -
  19 + // ID
  20 + PROJECT_ID = 'projectId',
  21 + // 名称
  22 + PROJECT_NAME = 'projectName',
  23 + // 描述
  24 + REMARKS = 'remarks',
  25 + // 缩略图
  26 + THUMBNAIL = 'thumbnail',
  27 + // 是否公开发布
  28 + RELEASE = 'release',
  29 + // organizationId
  30 + ORGANIZATIONID = 'organizationId',
  31 + //保存给服务端的state
  32 + STATE_DATA = 'state',
  33 +}
  34 +// THINGS_KIT
30 35 // 项目数据
31 36 export type ProjectInfoType = {
32   - [ProjectInfoEnum.PROJECT_ID]: string,
33   - [ProjectInfoEnum.PROJECT_NAME]: string,
34   - [ProjectInfoEnum.REMARKS]: string,
35   - [ProjectInfoEnum.THUMBNAIL]: string,
36   - [ProjectInfoEnum.RELEASE]: boolean
  37 + [ProjectInfoEnum.PROJECT_ID]: string
  38 + [ProjectInfoEnum.PROJECT_NAME]: string
  39 + [ProjectInfoEnum.REMARKS]: string
  40 + [ProjectInfoEnum.THUMBNAIL]: string
  41 + [ProjectInfoEnum.RELEASE]: boolean
  42 + [ProjectInfoEnum.RELEASE]: boolean
  43 + [ProjectInfoEnum.ORGANIZATIONID]: string
  44 + [ProjectInfoEnum.STATE_DATA]: number
37 45 }
38 46
39 47 // 编辑画布属性
40 48 export enum EditCanvasTypeEnum {
41   - EDIT_LAYOUT_DOM = 'editLayoutDom',
42   - EDIT_CONTENT_DOM = 'editContentDom',
43   - OFFSET = 'offset',
44   - SCALE = 'scale',
45   - USER_SCALE = 'userScale',
46   - LOCK_SCALE = 'lockScale',
47   - SAVE_STATUS = 'saveStatus',
  49 + EDIT_LAYOUT_DOM = 'editLayoutDom',
  50 + EDIT_CONTENT_DOM = 'editContentDom',
  51 + OFFSET = 'offset',
  52 + SCALE = 'scale',
  53 + USER_SCALE = 'userScale',
  54 + LOCK_SCALE = 'lockScale',
  55 + SAVE_STATUS = 'saveStatus',
48 56
49   - IS_CREATE = 'isCreate',
50   - IS_DRAG = 'isDrag',
51   - IS_SELECT = 'isSelect'
  57 + IS_CREATE = 'isCreate',
  58 + IS_DRAG = 'isDrag',
  59 + IS_SELECT = 'isSelect'
52 60 }
53 61
54 62 // 编辑区域
55 63 export type EditCanvasType = {
56   - // 编辑区域 DOM
57   - [EditCanvasTypeEnum.EDIT_LAYOUT_DOM]: HTMLElement | null
58   - [EditCanvasTypeEnum.EDIT_CONTENT_DOM]: HTMLElement | null
59   - // 偏移大小
60   - [EditCanvasTypeEnum.OFFSET]: number
61   - // 缩放
62   - [EditCanvasTypeEnum.SCALE]: number
63   - // 缩放
64   - [EditCanvasTypeEnum.USER_SCALE]: number
65   - // 锁定缩放
66   - [EditCanvasTypeEnum.LOCK_SCALE]: boolean
67   - // 初始化创建
68   - [EditCanvasTypeEnum.IS_CREATE]: boolean
69   - // 保存状态
70   - [EditCanvasTypeEnum.SAVE_STATUS]: SyncEnum
71   - // 拖拽中
72   - [EditCanvasTypeEnum.IS_DRAG]: boolean
73   - // 框选中
74   - [EditCanvasTypeEnum.IS_SELECT]: boolean
  64 + // 编辑区域 DOM
  65 + [EditCanvasTypeEnum.EDIT_LAYOUT_DOM]: HTMLElement | null
  66 + [EditCanvasTypeEnum.EDIT_CONTENT_DOM]: HTMLElement | null
  67 + // 偏移大小
  68 + [EditCanvasTypeEnum.OFFSET]: number
  69 + // 缩放
  70 + [EditCanvasTypeEnum.SCALE]: number
  71 + // 缩放
  72 + [EditCanvasTypeEnum.USER_SCALE]: number
  73 + // 锁定缩放
  74 + [EditCanvasTypeEnum.LOCK_SCALE]: boolean
  75 + // 初始化创建
  76 + [EditCanvasTypeEnum.IS_CREATE]: boolean
  77 + // 保存状态
  78 + [EditCanvasTypeEnum.SAVE_STATUS]: SyncEnum
  79 + // 拖拽中
  80 + [EditCanvasTypeEnum.IS_DRAG]: boolean
  81 + // 框选中
  82 + [EditCanvasTypeEnum.IS_SELECT]: boolean
75 83 }
76 84
77 85 // 滤镜/背景色/宽高主题等
78 86 export enum EditCanvasConfigEnum {
79   - PROJECT_NAME = 'projectName',
80   - WIDTH = 'width',
81   - HEIGHT = 'height',
82   - CHART_THEME_COLOR = 'chartThemeColor',
83   - CHART_THEME_SETTING = 'chartThemeSetting',
84   - BACKGROUND = 'background',
85   - BACKGROUND_IMAGE = 'backgroundImage',
86   - SELECT_COLOR = 'selectColor',
87   - PREVIEW_SCALE_TYPE = 'previewScaleType'
  87 + PROJECT_NAME = 'projectName',
  88 + WIDTH = 'width',
  89 + HEIGHT = 'height',
  90 + CHART_THEME_COLOR = 'chartThemeColor',
  91 + CHART_THEME_SETTING = 'chartThemeSetting',
  92 + BACKGROUND = 'background',
  93 + BACKGROUND_IMAGE = 'backgroundImage',
  94 + SELECT_COLOR = 'selectColor',
  95 + PREVIEW_SCALE_TYPE = 'previewScaleType'
88 96 }
89 97
90 98 export interface EditCanvasConfigType {
91   - // 滤镜-启用
92   - [FilterEnum.FILTERS_SHOW]: boolean
93   - // 滤镜-色相
94   - [FilterEnum.HUE_ROTATE]: number
95   - // 滤镜-饱和度
96   - [FilterEnum.SATURATE]: number
97   - // 滤镜-亮度
98   - [FilterEnum.BRIGHTNESS]: number
99   - // 滤镜-对比度
100   - [FilterEnum.CONTRAST]: number
101   - // 滤镜-不透明度
102   - [FilterEnum.OPACITY]: number
103   - // 变换（暂不使用）
104   - [FilterEnum.ROTATE_Z]: number
105   - [FilterEnum.ROTATE_X]: number
106   - [FilterEnum.ROTATE_Y]: number
107   - [FilterEnum.SKEW_X]: number
108   - [FilterEnum.SKEW_Y]: number
109   - [FilterEnum.BLEND_MODE]: string
110   - // 大屏名称
111   - [EditCanvasConfigEnum.PROJECT_NAME]?: string
112   - // 大屏宽度
113   - [EditCanvasConfigEnum.WIDTH]: number
114   - // 大屏高度
115   - [EditCanvasConfigEnum.HEIGHT]: number
116   - // 背景色
117   - [EditCanvasConfigEnum.BACKGROUND]?: string
118   - [EditCanvasConfigEnum.BACKGROUND_IMAGE]?: string | null
119   - // 图表主题颜色
120   - [EditCanvasConfigEnum.CHART_THEME_COLOR]: ChartColorsNameType
121   - // 图表全局配置
122   - [EditCanvasConfigEnum.CHART_THEME_SETTING]: GlobalThemeJsonType
123   - // 图表主题颜色
124   - [EditCanvasConfigEnum.SELECT_COLOR]: boolean
125   - // 预览展示方式
126   - [EditCanvasConfigEnum.PREVIEW_SCALE_TYPE]: PreviewScaleEnum
  99 + // 滤镜-启用
  100 + [FilterEnum.FILTERS_SHOW]: boolean
  101 + // 滤镜-色相
  102 + [FilterEnum.HUE_ROTATE]: number
  103 + // 滤镜-饱和度
  104 + [FilterEnum.SATURATE]: number
  105 + // 滤镜-亮度
  106 + [FilterEnum.BRIGHTNESS]: number
  107 + // 滤镜-对比度
  108 + [FilterEnum.CONTRAST]: number
  109 + // 滤镜-不透明度
  110 + [FilterEnum.OPACITY]: number
  111 + // 变换（暂不使用）
  112 + [FilterEnum.ROTATE_Z]: number
  113 + [FilterEnum.ROTATE_X]: number
  114 + [FilterEnum.ROTATE_Y]: number
  115 + [FilterEnum.SKEW_X]: number
  116 + [FilterEnum.SKEW_Y]: number
  117 + [FilterEnum.BLEND_MODE]: string
  118 + // 大屏名称
  119 + [EditCanvasConfigEnum.PROJECT_NAME]?: string
  120 + // 大屏宽度
  121 + [EditCanvasConfigEnum.WIDTH]: number
  122 + // 大屏高度
  123 + [EditCanvasConfigEnum.HEIGHT]: number
  124 + // 背景色
  125 + [EditCanvasConfigEnum.BACKGROUND]?: string
  126 + [EditCanvasConfigEnum.BACKGROUND_IMAGE]?: string | null
  127 + // 图表主题颜色
  128 + [EditCanvasConfigEnum.CHART_THEME_COLOR]: ChartColorsNameType
  129 + // 图表全局配置
  130 + [EditCanvasConfigEnum.CHART_THEME_SETTING]: GlobalThemeJsonType
  131 + // 图表主题颜色
  132 + [EditCanvasConfigEnum.SELECT_COLOR]: boolean
  133 + // 预览展示方式
  134 + [EditCanvasConfigEnum.PREVIEW_SCALE_TYPE]: PreviewScaleEnum
127 135 }
128 136
129 137 // 坐标轴信息
130 138 // eslint-disable-next-line no-redeclare
131 139 export enum EditCanvasTypeEnum {
132   - START_X = 'startX',
133   - START_Y = 'startY',
134   - X = 'x',
135   - Y = 'y'
  140 + START_X = 'startX',
  141 + START_Y = 'startY',
  142 + X = 'x',
  143 + Y = 'y'
136 144 }
137 145
138 146 // 鼠标位置
139 147 export type MousePositionType = {
140   - // 开始 X
141   - [EditCanvasTypeEnum.START_X]: number
142   - // 开始 Y
143   - [EditCanvasTypeEnum.START_Y]: number
144   - // X
145   - [EditCanvasTypeEnum.X]: number
146   - // y
147   - [EditCanvasTypeEnum.Y]: number
  148 + // 开始 X
  149 + [EditCanvasTypeEnum.START_X]: number
  150 + // 开始 Y
  151 + [EditCanvasTypeEnum.START_Y]: number
  152 + // X
  153 + [EditCanvasTypeEnum.X]: number
  154 + // y
  155 + [EditCanvasTypeEnum.Y]: number
148 156 }
149 157
150 158 // 操作目标
151 159 export type TargetChartType = {
152   - hoverId?: string
153   - selectId: string[]
  160 + hoverId?: string
  161 + selectId: string[]
154 162 }
155 163
156 164 // 数据记录
157 165 export type RecordChartType = {
158   - charts: CreateComponentType | CreateComponentGroupType | Array<CreateComponentType | CreateComponentGroupType>
159   - type: HistoryActionTypeEnum.CUT | HistoryActionTypeEnum.COPY
  166 + charts: CreateComponentType | CreateComponentGroupType | Array<CreateComponentType | CreateComponentGroupType>
  167 + type: HistoryActionTypeEnum.CUT | HistoryActionTypeEnum.COPY
160 168 }
161 169
162 170 // Store 枚举
163 171 export enum ChartEditStoreEnum {
164   - PROJECT_INFO = 'projectInfo',
  172 + PROJECT_INFO = 'projectInfo',
165 173
166   - EDIT_RANGE = 'editRange',
167   - EDIT_CANVAS = 'editCanvas',
168   - RIGHT_MENU_SHOW = 'rightMenuShow',
169   - MOUSE_POSITION = 'mousePosition',
170   - TARGET_CHART = 'targetChart',
171   - RECORD_CHART = 'recordChart',
172   - // 以下需要存储
173   - EDIT_CANVAS_CONFIG = 'editCanvasConfig',
174   - REQUEST_GLOBAL_CONFIG = 'requestGlobalConfig',
175   - COMPONENT_LIST = 'componentList'
  174 + EDIT_RANGE = 'editRange',
  175 + EDIT_CANVAS = 'editCanvas',
  176 + RIGHT_MENU_SHOW = 'rightMenuShow',
  177 + MOUSE_POSITION = 'mousePosition',
  178 + TARGET_CHART = 'targetChart',
  179 + RECORD_CHART = 'recordChart',
  180 + // 以下需要存储
  181 + EDIT_CANVAS_CONFIG = 'editCanvasConfig',
  182 + REQUEST_GLOBAL_CONFIG = 'requestGlobalConfig',
  183 + COMPONENT_LIST = 'componentList'
176 184 }
177 185
178 186 // 请求公共类型
179 187 type RequestPublicConfigType = {
180   - // 时间单位（时分秒）
181   - requestIntervalUnit: RequestHttpIntervalEnum
182   - // 请求内容
183   - requestParams: RequestParams
  188 + // 时间单位（时分秒）
  189 + requestIntervalUnit: RequestHttpIntervalEnum
  190 + // 请求内容
  191 + requestParams: RequestParams
184 192 }
185 193
186 194 // 数据池项类型
187 195 export type RequestDataPondItemType = {
188   - dataPondId: string,
189   - dataPondName: string,
190   - dataPondRequestConfig: RequestConfigType
  196 + dataPondId: string
  197 + dataPondName: string
  198 + dataPondRequestConfig: RequestConfigType
191 199 }
192 200
193 201 // 全局的图表请求配置
194 202 export interface RequestGlobalConfigType extends RequestPublicConfigType {
195   - // 组件定制轮询时间
196   - requestInterval: number
197   - // 请求源地址
198   - requestOriginUrl?: string
199   - // 公共数据池
200   - requestDataPond: RequestDataPondItemType[]
  203 + // 组件定制轮询时间
  204 + requestInterval: number
  205 + // 请求源地址
  206 + requestOriginUrl?: string
  207 + // 公共数据池
  208 + requestDataPond: RequestDataPondItemType[]
201 209 }
202 210
203 211 // 单个图表请求配置
204 212 export interface RequestConfigType extends RequestPublicConfigType {
205   - // 所选全局数据池的对应 id
206   - requestDataPondId?: string
207   - // 组件定制轮询时间
208   - requestInterval?: number
209   - // 获取数据的方式
210   - requestDataType: RequestDataTypeEnum
211   - // 请求方式 get/post/del/put/patch
212   - requestHttpType: RequestHttpEnum
213   - // 源后续的 url
214   - requestUrl?: string
215   - // 请求内容主体方式 普通/sql
216   - requestContentType: RequestContentTypeEnum
217   - // 请求体类型
218   - requestParamsBodyType: RequestBodyEnum
219   - // SQL 请求对象
220   - requestSQLContent: {
221   - sql: string
222   - }
  213 + // 所选全局数据池的对应 id
  214 + requestDataPondId?: string
  215 + // 组件定制轮询时间
  216 + requestInterval?: number
  217 + // 获取数据的方式
  218 + requestDataType: RequestDataTypeEnum
  219 + // 请求方式 get/post/del/put/patch
  220 + requestHttpType: RequestHttpEnum
  221 + // 源后续的 url
  222 + requestUrl?: string
  223 + // 请求内容主体方式 普通/sql
  224 + requestContentType: RequestContentTypeEnum
  225 + // 请求体类型
  226 + requestParamsBodyType: RequestBodyEnum
  227 + // SQL 请求对象
  228 + requestSQLContent: {
  229 + sql: string
  230 + }
223 231 }
224 232
225 233 // Store 类型
226 234 export interface ChartEditStoreType {
227   - [ChartEditStoreEnum.PROJECT_INFO]: ProjectInfoType
228   - [ChartEditStoreEnum.EDIT_CANVAS]: EditCanvasType
229   - [ChartEditStoreEnum.EDIT_CANVAS_CONFIG]: EditCanvasConfigType
230   - [ChartEditStoreEnum.RIGHT_MENU_SHOW]: boolean
231   - [ChartEditStoreEnum.MOUSE_POSITION]: MousePositionType
232   - [ChartEditStoreEnum.TARGET_CHART]: TargetChartType
233   - [ChartEditStoreEnum.RECORD_CHART]?: RecordChartType
234   - [ChartEditStoreEnum.REQUEST_GLOBAL_CONFIG]: RequestGlobalConfigType
235   - [ChartEditStoreEnum.COMPONENT_LIST]: Array<CreateComponentType | CreateComponentGroupType>
  235 + [ChartEditStoreEnum.PROJECT_INFO]: ProjectInfoType
  236 + [ChartEditStoreEnum.EDIT_CANVAS]: EditCanvasType
  237 + [ChartEditStoreEnum.EDIT_CANVAS_CONFIG]: EditCanvasConfigType
  238 + [ChartEditStoreEnum.RIGHT_MENU_SHOW]: boolean
  239 + [ChartEditStoreEnum.MOUSE_POSITION]: MousePositionType
  240 + [ChartEditStoreEnum.TARGET_CHART]: TargetChartType
  241 + [ChartEditStoreEnum.RECORD_CHART]?: RecordChartType
  242 + [ChartEditStoreEnum.REQUEST_GLOBAL_CONFIG]: RequestGlobalConfigType
  243 + [ChartEditStoreEnum.COMPONENT_LIST]: Array<CreateComponentType | CreateComponentGroupType>
236 244 }
237 245
238 246 // 存储数据类型
239 247 export interface ChartEditStorage {
240   - [ChartEditStoreEnum.EDIT_CANVAS_CONFIG]: EditCanvasConfigType
241   - [ChartEditStoreEnum.REQUEST_GLOBAL_CONFIG]: RequestGlobalConfigType
242   - [ChartEditStoreEnum.COMPONENT_LIST]: Array<CreateComponentType | CreateComponentGroupType>
  248 + [ChartEditStoreEnum.EDIT_CANVAS_CONFIG]: EditCanvasConfigType
  249 + [ChartEditStoreEnum.REQUEST_GLOBAL_CONFIG]: RequestGlobalConfigType
  250 + [ChartEditStoreEnum.COMPONENT_LIST]: Array<CreateComponentType | CreateComponentGroupType>
243 251 }
... ...
... ... @@ -44,7 +44,11 @@ export const useChartEditStore = defineStore({
44 44 projectName: '',
45 45 remarks: '',
46 46 thumbnail: '',
47   - release: false
  47 + release: false,
  48 + // THINGS_KIT
  49 + //保存缩图需要的组织id
  50 + organizationId: '',
  51 + state: 0,
48 52 },
49 53 // 画布属性
50 54 editCanvas: {
... ... @@ -184,7 +188,7 @@ export const useChartEditStore = defineStore({
184 188 actions: {
185 189 // THINGS_KIT
186 190 // * 设置 peojectInfo 数据项
187   - setProjectInfo<T extends keyof ProjectInfoType, K extends ProjectInfoType[T]>(key: T, value: K) {
  191 + setProjectInfo<T extends keyof ProjectInfoType, K extends ProjectInfoType[T]>(key: T, value: K) {
188 192 this.projectInfo[key] = value
189 193 },
190 194 // * 设置 editCanvas 数据项
... ... @@ -521,7 +525,7 @@ export const useChartEditStore = defineStore({
521 525 e.id = getUUID()
522 526 // 分组列表生成新 id
523 527 if (e.isGroup) {
524   - (e as CreateComponentGroupType).groupList.forEach((item: CreateComponentType) => {
  528 + ;(e as CreateComponentGroupType).groupList.forEach((item: CreateComponentType) => {
525 529 item.id = getUUID()
526 530 })
527 531 }
... ... @@ -529,7 +533,7 @@ export const useChartEditStore = defineStore({
529 533 return e
530 534 }
531 535 const isCut = recordCharts.type === HistoryActionTypeEnum.CUT
532   - const targetList = Array.isArray(recordCharts.charts) ? recordCharts.charts : [ recordCharts.charts ]
  536 + const targetList = Array.isArray(recordCharts.charts) ? recordCharts.charts : [recordCharts.charts]
533 537 // 多项
534 538 targetList.forEach((e: CreateComponentType | CreateComponentGroupType) => {
535 539 this.addComponentList(parseHandle(e), undefined, true)
... ...
... ... @@ -20,9 +20,9 @@ export const readFile = (file: File) => {
20 20
21 21 /**
22 22 * * 通过 a 标签下载数据
23   - * @param url
24   - * @param filename
25   - * @param fileSuffix
  23 + * @param url
  24 + * @param filename
  25 + * @param fileSuffix
26 26 */
27 27 export const downloadByA = (url: string, filename = new Date().getTime(), fileSuffix?: string) => {
28 28 const ele = document.createElement('a') // 创建下载链接
... ... @@ -43,12 +43,26 @@ export const downloadByA = (url: string, filename = new Date().getTime(), fileSu
43 43 * @param { ?string } filename 文件名称（默认随机字符）
44 44 * @param { ?string } fileSuffix 文件名称（默认随机字符）
45 45 */
46   -export const downloadTextFile = (
47   - content: string,
48   - filename = new Date().getTime(),
49   - fileSuffix?: string
50   -) => {
  46 +export const downloadTextFile = (content: string, filename = new Date().getTime(), fileSuffix?: string) => {
51 47 // 字符内容转变成blob地址
52 48 const blob = new Blob([content])
53 49 downloadByA(URL.createObjectURL(blob), filename, fileSuffix)
54 50 }
  51 +// THINGS_KIT
  52 +/**
  53 + * * base64转file
  54 + * @param dataurl
  55 + * @param fileName
  56 + * @returns
  57 + */
  58 +export const base64toFile = (dataurl: string, fileName: string) => {
  59 + let dataArr = dataurl.split(','),
  60 + mime = (dataArr as any[])[0].match(/:(.*?);/)[1],
  61 + bstr = atob(dataArr[1]),
  62 + n = bstr.length,
  63 + u8arr = new Uint8Array(n)
  64 + while (n--) {
  65 + u8arr[n] = bstr.charCodeAt(n)
  66 + }
  67 + return new File([u8arr], fileName, { type: mime })
  68 +}
... ...
... ... @@ -28,7 +28,8 @@ export const exportHandle = () => {
28 28 // 百分百展示页面
29 29 chartEditStore.setScale(1, true)
30 30 // 展示水印
31   - watermark.style.display = 'block'
  31 + // THINGS_KIT
  32 + watermark.style.display = 'none'
32 33
33 34 setTimeout(() => {
34 35 canvasCut(range, () => {
... ...
1 1 // THINGS_KIT
2   -import { getUUID, fetchRouteParamsLocation, JSONStringify, JSONParse } from '@/utils'
  2 +import { getUUID, fetchRouteParamsLocation, JSONStringify, JSONParse, base64toFile } from '@/utils'
3 3 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
4 4 import {
5 5 EditCanvasTypeEnum,
... ... @@ -20,7 +20,7 @@ import { saveInterval } from '@/settings/designSetting'
20 20 import throttle from 'lodash/throttle'
21 21 // THINGS_KIT
22 22 import html2canvas from 'html2canvas'
23   -import { contentUpdateApi, getDataView, uploadFile } from '@/api/external/contentSave/content'
  23 +import { saveDataViewList, contentUpdateApi, getDataView, uploadFile } from '@/api/external/contentSave/content'
24 24 // 画布枚举
25 25 import { SyncEnum } from '@/enums/editPageEnum'
26 26
... ... @@ -221,9 +221,10 @@ export const useSync = () => {
221 221 indexImage: string
222 222 id: string
223 223 state: number
  224 + organizationId: string
224 225 dataViewContent: { id: string; content: string; enabled: boolean }
225 226 }) => {
226   - const { dataViewId, dataViewName, indexImage, state, dataViewContent } = projectData
  227 + const { dataViewId, dataViewName, indexImage, state, dataViewContent, organizationId } = projectData
227 228 // ID
228 229 chartEditStore.setProjectInfo(ProjectInfoEnum.PROJECT_ID, dataViewId)
229 230 // 名称
... ... @@ -234,6 +235,8 @@ export const useSync = () => {
234 235 chartEditStore.setProjectInfo(ProjectInfoEnum.THUMBNAIL, indexImage)
235 236 // 发布
236 237 chartEditStore.setProjectInfo(ProjectInfoEnum.RELEASE, state === 1)
  238 + chartEditStore.setProjectInfo(ProjectInfoEnum.ORGANIZATIONID, organizationId)
  239 + chartEditStore.setProjectInfo(ProjectInfoEnum.STATE_DATA, state)
237 240 }
238 241 // THINGS_KIT
239 242 // * 数据获取
... ... @@ -248,14 +251,12 @@ export const useSync = () => {
248 251 updateStoreInfo(res)
249 252 // 更新全局数据
250 253 await updateComponent(JSONParse(res.dataViewContent.content))
251   - return
252   - // else {
253   - // chartEditStore.setProjectInfo(ProjectInfoEnum.PROJECT_ID, fetchRouteParamsLocation())
254   - // }
  254 +
  255 + chartEditStore.setProjectInfo(ProjectInfoEnum.PROJECT_ID, res.dataViewId)
255 256 setTimeout(() => {
256 257 chartEditStore.setEditCanvas(EditCanvasTypeEnum.SAVE_STATUS, SyncEnum.SUCCESS)
257 258 }, 1000)
258   - return
  259 + // return
259 260 // }
260 261 // chartEditStore.setEditCanvas(EditCanvasTypeEnum.SAVE_STATUS, SyncEnum.FAILURE)
261 262 } catch (error) {
... ... @@ -270,6 +271,8 @@ export const useSync = () => {
270 271 const projectId = chartEditStore.getProjectInfo[ProjectInfoEnum.PROJECT_ID]
271 272 const id = chartEditStore.getProjectInfo[ProjectInfoEnum.REMARKS]
272 273 const dataViewName = chartEditStore.getProjectInfo[ProjectInfoEnum.PROJECT_NAME]
  274 + const organizationId = chartEditStore.getProjectInfo[ProjectInfoEnum.ORGANIZATIONID]
  275 + const state = chartEditStore.getProjectInfo[ProjectInfoEnum.STATE_DATA]
273 276
274 277 if (projectId === null || projectId === '') {
275 278 window['$message'].error('数据初未始化成功,请刷新页面！')
... ... @@ -277,35 +280,39 @@ export const useSync = () => {
277 280 }
278 281 chartEditStore.setEditCanvas(EditCanvasTypeEnum.SAVE_STATUS, SyncEnum.START)
279 282 // 异常处理：缩略图上传失败不影响JSON的保存
280   - // try {
281   - // if (updateImg) {
282   - // // 获取缩略图片
283   - // const range = document.querySelector('.go-edit-range') as HTMLElement
284   - // // 生成图片
285   - // const canvasImage: HTMLCanvasElement = await html2canvas(range, {
286   - // backgroundColor: null,
287   - // allowTaint: true,
288   - // useCORS: true
289   - // })
290   - //
291   - // // 上传预览图
292   - // const uploadParams = new FormData()
293   - // uploadParams.append(
294   - // 'object',
295   - // base64toFile(canvasImage.toDataURL(), `${fetchRouteParamsLocation()}_index_preview.png`)
296   - // )
297   - // const uploadRes = await uploadFile(uploadParams)
298   - // // 保存预览图
299   - // if (uploadRes && uploadRes.code === ResultEnum.SUCCESS) {
300   - // await updateProjectApi({
301   - // id: fetchRouteParamsLocation(),
302   - // thumbnail: `${systemStore.getFetchInfo.OSSUrl}${uploadRes.data.fileName}`
303   - // })
304   - // }
305   - // }
306   - // } catch (e) {
307   - // console.log(e)
308   - // }
  283 + try {
  284 + if (updateImg) {
  285 + // 获取缩略图片
  286 + const range = document.querySelector('.go-edit-range') as HTMLElement
  287 + // 生成图片
  288 + const canvasImage: HTMLCanvasElement = await html2canvas(range, {
  289 + backgroundColor: null,
  290 + allowTaint: true,
  291 + useCORS: true
  292 + })
  293 +
  294 + // 上传预览图
  295 + const uploadParams = new FormData()
  296 + uploadParams.append(
  297 + 'file',
  298 + base64toFile(canvasImage.toDataURL(), `${fetchRouteParamsLocation()}_index_preview.png`)
  299 + )
  300 + const uploadRes = await uploadFile(uploadParams)
  301 + console.log(uploadRes.fileStaticUri)
  302 + // 保存预览图
  303 + if (uploadRes) {
  304 + await saveDataViewList({
  305 + name: dataViewName,
  306 + organizationId,
  307 + state,
  308 + id: fetchRouteParamsLocation(),
  309 + thumbnail: `${uploadRes.fileStaticUri}`
  310 + })
  311 + }
  312 + }
  313 + } catch (e) {
  314 + console.log(e)
  315 + }
309 316 // 保存数据
310 317 const saveContent = {
311 318 dataViewContent: {
... ... @@ -313,9 +320,10 @@ export const useSync = () => {
313 320 content: JSONStringify(chartEditStore.getStorageInfo || {})
314 321 },
315 322 dataViewName,
316   - dataViewId: projectId
  323 + dataViewId: projectId,
  324 + projectId
317 325 }
318   - const res = await contentUpdateApi(saveContent)
  326 + await contentUpdateApi(saveContent)
319 327 window['$message'].success('保存成功！')
320 328 // 成功状态
321 329 setTimeout(() => {
... ...
1 1 import { ChartEditStorage } from '@/store/modules/chartEditStore/chartEditStore.d'
2 2
3 3 export interface ChartEditStorageType extends ChartEditStorage {
  4 + // THINGS_KIT
4 5 id: string
5   -}
\ No newline at end of file
  6 + isRelease?: boolean
  7 +}
... ...
  1 +<!-- THINGS_KIT -->
  2 +
1 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 7 </template>
28 8
29 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 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 +setTitle(`预览-${localStorageInfo?.projectName}`)
  47 +// THINGS_KIT
  48 +// @ts-ignore
  49 +// if (localStorageInfo.isRelease === false) {
  50 +// routerTurnByName(PageEnum.REDIRECT_UN_PUBLISH_NAME, true, false)
  51 +// }
  52 +
  53 +const previewRefStyle = computed(() => {
  54 + return {
  55 + ...getEditCanvasConfigStyle(localStorageInfo.editCanvasConfig),
  56 + ...getFilterStyle(localStorageInfo.editCanvasConfig.filterShow ? localStorageInfo.editCanvasConfig : undefined)
  57 + }
  58 +})
  59 +
  60 +const showEntity = computed(() => {
  61 + const type = localStorageInfo.editCanvasConfig.previewScaleType
  62 + return type === PreviewScaleEnum.SCROLL_Y || type === PreviewScaleEnum.SCROLL_X
  63 +})
  64 +
  65 +useStore(localStorageInfo)
  66 +const { entityRef, previewRef } = useScale(localStorageInfo)
  67 +const { show } = useComInstall(localStorageInfo)
  68 +</script>
  69 +
  70 +<style lang="scss" scoped>
  71 +@include go('preview') {
  72 + position: relative;
  73 + height: 100vh;
  74 + width: 100vw;
  75 + @include background-image('background-image');
  76 + &.fit,
  77 + &.full {
  78 + display: flex;
  79 + align-items: center;
  80 + justify-content: center;
  81 + overflow: hidden;
  82 + .go-preview-scale {
  83 + transform-origin: center center;
  84 + }
  85 + }
  86 + &.scrollY {
  87 + overflow-x: hidden;
  88 + .go-preview-scale {
  89 + transform-origin: left top;
  90 + }
  91 + }
  92 + &.scrollX {
  93 + overflow-y: hidden;
  94 + .go-preview-scale {
  95 + transform-origin: left top;
  96 + }
  97 + }
  98 + .go-preview-entity {
  99 + overflow: hidden;
  100 + }
  101 +}
  102 +</style>
... ...
1   -import { getSessionStorage } from '@/utils'
  1 +import { getSessionStorage, fetchRouteParamsLocation, JSONParse } from '@/utils'
2 2 import { StorageEnum } from '@/enums/storageEnum'
3 3 import { ChartEditStorage } from '@/store/modules/chartEditStore/chartEditStore.d'
  4 +import { getDataView } from '@/api/external/contentSave/content'
4 5
5 6 export interface ChartEditStorageType extends ChartEditStorage {
6 7 id: string
7 8 }
8   -
  9 +// THINGS_KIT
9 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]
24   - }
  11 +export const getSessionStorageInfo = async () => {
  12 + const id = fetchRouteParamsLocation()
  13 + const storageList: ChartEditStorageType[] = getSessionStorage(StorageEnum.GO_CHART_STORAGE_LIST)
  14 + console.log(id)
  15 + console.log(storageList)
  16 + // 是否本地预览
  17 + // if (!storageList || storageList.findIndex(e => e.id === id.toString()) === -1) {
  18 + // 接口调用
  19 + const res = await getDataView(id)
  20 + if (res) {
  21 + const { dataViewContent, state, dataViewName, dataViewId } = res
  22 + // if (state === 1) {
  23 + // // 跳转未发布页
  24 + // return { isRelease: false }
  25 + // }
  26 + return { ...JSONParse(dataViewContent?.content), id: dataViewId, projectName: dataViewName }
  27 + // } else {
  28 + // console.log('本地读取')
  29 + // // 本地读取
  30 + // for (let i = 0; i < storageList.length; i++) {
  31 + // if (id.toString() === storageList[i]['id']) {
  32 + // return storageList[i]
  33 + // }
  34 + // }
  35 + // }
25 36 }
26   -}
\ No newline at end of file
  37 +}
... ...
1 1 export type Chartype = {
2 2 id: number | string
3 3 title?: string // 标题
4   - label:? string // 标签
  4 + label?: string // 标签
5 5 release?: boolean // 0未发布 | 1已发布
6 6 name: string // 0未发布 | 1已发布
  7 + // THINGS_KIT
7 8 state: number // 0未发布 | 1已发布
8 9 }
9 10
... ...