简柏林 / 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,6 +27,10 @@
27 </div> 27 </div>
28 </div> 28 </div>
29 </div> 29 </div>
  30 + <!-- THINGS_KIT -->
  31 + <script>
  32 + document.title="大屏设计器"
  33 + </script>
30 <script type="module" src="/src/main.ts"></script> 34 <script type="module" src="/src/main.ts"></script>
31 </body> 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 enum Api { 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 export function contentSaveApi(params: object, mode: ErrorMessageMode = 'modal') { 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 export const getDataViewList = (params: object) => { 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 export const uploadFile = async (file: FormData, mode: ErrorMessageMode = 'modal') => { 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 <template> 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 <div class="user-info-box"> 3 <div class="user-info-box">
9 <person-icon v-if="fallback"></person-icon> 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 </div> 6 </div>
19 </n-dropdown> 7 </n-dropdown>
20 8
@@ -34,12 +22,7 @@ import { GoSystemInfo } from '@/components/GoSystemInfo/index' @@ -34,12 +22,7 @@ import { GoSystemInfo } from '@/components/GoSystemInfo/index'
34 import Person from './person.png' 22 import Person from './person.png'
35 23
36 import { icon } from '@/plugins' 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 const t = window['$t'] 27 const t = window['$t']
45 28
@@ -62,11 +45,7 @@ const renderUserInfo = () => { @@ -62,11 +45,7 @@ const renderUserInfo = () => {
62 style: 'margin-right: 12px;', 45 style: 'margin-right: 12px;',
63 src: Person 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,11 +65,12 @@ const options = ref([
86 key: 'sysSet', 65 key: 'sysSet',
87 icon: renderIcon(SettingsSharpIcon) 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 type: 'divider', 75 type: 'divider',
96 key: 'd3' 76 key: 'd3'
@@ -29,6 +29,11 @@ export enum PageEnum { @@ -29,6 +29,11 @@ export enum PageEnum {
29 RELOAD = '/reload', 29 RELOAD = '/reload',
30 RELOAD_NAME = 'Reload', 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 BASE_HOME = '/project', 39 BASE_HOME = '/project',
@@ -151,7 +151,6 @@ export enum PackagesCategoryEnum { @@ -151,7 +151,6 @@ export enum PackagesCategoryEnum {
151 INFORMATIONS = 'Informations', 151 INFORMATIONS = 'Informations',
152 DECORATES = 'Decorates', 152 DECORATES = 'Decorates',
153 // THINGS_KIT 153 // THINGS_KIT
154 - ARTOONS = 'Artoons',  
155 COMPOSES = 'Composes', 154 COMPOSES = 'Composes',
156 } 155 }
157 156
@@ -162,7 +161,6 @@ export enum PackagesCategoryName { @@ -162,7 +161,6 @@ export enum PackagesCategoryName {
162 INFORMATIONS = '信息', 161 INFORMATIONS = '信息',
163 DECORATES = '小组件', 162 DECORATES = '小组件',
164 // THINGS_KIT 163 // THINGS_KIT
165 - ARTOONS='动画',  
166 COMPOSES='组合', 164 COMPOSES='组合',
167 } 165 }
168 166
@@ -179,6 +177,5 @@ export type PackagesType = { @@ -179,6 +177,5 @@ export type PackagesType = {
179 [PackagesCategoryEnum.TABLES]: ConfigType[] 177 [PackagesCategoryEnum.TABLES]: ConfigType[]
180 [PackagesCategoryEnum.DECORATES]: ConfigType[] 178 [PackagesCategoryEnum.DECORATES]: ConfigType[]
181 // THINGS_KIT 179 // THINGS_KIT
182 - [PackagesCategoryEnum.ARTOONS]: ConfigType[]  
183 [PackagesCategoryEnum.COMPOSES]: ConfigType[] 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 import { SyncEnum } from '@/enums/editPageEnum' 3 import { SyncEnum } from '@/enums/editPageEnum'
4 import { 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 } from '@/enums/httpEnum' 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 export enum ProjectInfoEnum { 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 export type ProjectInfoType = { 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 export enum EditCanvasTypeEnum { 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 export type EditCanvasType = { 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 export enum EditCanvasConfigEnum { 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 export interface EditCanvasConfigType { 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 // eslint-disable-next-line no-redeclare 138 // eslint-disable-next-line no-redeclare
131 export enum EditCanvasTypeEnum { 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 export type MousePositionType = { 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 export type TargetChartType = { 159 export type TargetChartType = {
152 - hoverId?: string  
153 - selectId: string[] 160 + hoverId?: string
  161 + selectId: string[]
154 } 162 }
155 163
156 // 数据记录 164 // 数据记录
157 export type RecordChartType = { 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 // Store 枚举 170 // Store 枚举
163 export enum ChartEditStoreEnum { 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 type RequestPublicConfigType = { 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 export type RequestDataPondItemType = { 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 export interface RequestGlobalConfigType extends RequestPublicConfigType { 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 export interface RequestConfigType extends RequestPublicConfigType { 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 // Store 类型 233 // Store 类型
226 export interface ChartEditStoreType { 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 export interface ChartEditStorage { 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,7 +44,11 @@ export const useChartEditStore = defineStore({
44 projectName: '', 44 projectName: '',
45 remarks: '', 45 remarks: '',
46 thumbnail: '', 46 thumbnail: '',
47 - release: false 47 + release: false,
  48 + // THINGS_KIT
  49 + //保存缩图需要的组织id
  50 + organizationId: '',
  51 + state: 0,
48 }, 52 },
49 // 画布属性 53 // 画布属性
50 editCanvas: { 54 editCanvas: {
@@ -184,7 +188,7 @@ export const useChartEditStore = defineStore({ @@ -184,7 +188,7 @@ export const useChartEditStore = defineStore({
184 actions: { 188 actions: {
185 // THINGS_KIT 189 // THINGS_KIT
186 // * 设置 peojectInfo 数据项 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 this.projectInfo[key] = value 192 this.projectInfo[key] = value
189 }, 193 },
190 // * 设置 editCanvas 数据项 194 // * 设置 editCanvas 数据项
@@ -521,7 +525,7 @@ export const useChartEditStore = defineStore({ @@ -521,7 +525,7 @@ export const useChartEditStore = defineStore({
521 e.id = getUUID() 525 e.id = getUUID()
522 // 分组列表生成新 id 526 // 分组列表生成新 id
523 if (e.isGroup) { 527 if (e.isGroup) {
524 - (e as CreateComponentGroupType).groupList.forEach((item: CreateComponentType) => { 528 + ;(e as CreateComponentGroupType).groupList.forEach((item: CreateComponentType) => {
525 item.id = getUUID() 529 item.id = getUUID()
526 }) 530 })
527 } 531 }
@@ -529,7 +533,7 @@ export const useChartEditStore = defineStore({ @@ -529,7 +533,7 @@ export const useChartEditStore = defineStore({
529 return e 533 return e
530 } 534 }
531 const isCut = recordCharts.type === HistoryActionTypeEnum.CUT 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 targetList.forEach((e: CreateComponentType | CreateComponentGroupType) => { 538 targetList.forEach((e: CreateComponentType | CreateComponentGroupType) => {
535 this.addComponentList(parseHandle(e), undefined, true) 539 this.addComponentList(parseHandle(e), undefined, true)
@@ -20,9 +20,9 @@ export const readFile = (file: File) => { @@ -20,9 +20,9 @@ export const readFile = (file: File) => {
20 20
21 /** 21 /**
22 * * 通过 a 标签下载数据 22 * * 通过 a 标签下载数据
23 - * @param url  
24 - * @param filename  
25 - * @param fileSuffix 23 + * @param url
  24 + * @param filename
  25 + * @param fileSuffix
26 */ 26 */
27 export const downloadByA = (url: string, filename = new Date().getTime(), fileSuffix?: string) => { 27 export const downloadByA = (url: string, filename = new Date().getTime(), fileSuffix?: string) => {
28 const ele = document.createElement('a') // 创建下载链接 28 const ele = document.createElement('a') // 创建下载链接
@@ -43,12 +43,26 @@ export const downloadByA = (url: string, filename = new Date().getTime(), fileSu @@ -43,12 +43,26 @@ export const downloadByA = (url: string, filename = new Date().getTime(), fileSu
43 * @param { ?string } filename 文件名称（默认随机字符） 43 * @param { ?string } filename 文件名称（默认随机字符）
44 * @param { ?string } fileSuffix 文件名称（默认随机字符） 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 // 字符内容转变成blob地址 47 // 字符内容转变成blob地址
52 const blob = new Blob([content]) 48 const blob = new Blob([content])
53 downloadByA(URL.createObjectURL(blob), filename, fileSuffix) 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,7 +28,8 @@ export const exportHandle = () => {
28 // 百分百展示页面 28 // 百分百展示页面
29 chartEditStore.setScale(1, true) 29 chartEditStore.setScale(1, true)
30 // 展示水印 30 // 展示水印
31 - watermark.style.display = 'block' 31 + // THINGS_KIT
  32 + watermark.style.display = 'none'
32 33
33 setTimeout(() => { 34 setTimeout(() => {
34 canvasCut(range, () => { 35 canvasCut(range, () => {
1 // THINGS_KIT 1 // THINGS_KIT
2 -import { getUUID, fetchRouteParamsLocation, JSONStringify, JSONParse } from '@/utils' 2 +import { getUUID, fetchRouteParamsLocation, JSONStringify, JSONParse, base64toFile } from '@/utils'
3 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore' 3 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
4 import { 4 import {
5 EditCanvasTypeEnum, 5 EditCanvasTypeEnum,
@@ -20,7 +20,7 @@ import { saveInterval } from '@/settings/designSetting' @@ -20,7 +20,7 @@ import { saveInterval } from '@/settings/designSetting'
20 import throttle from 'lodash/throttle' 20 import throttle from 'lodash/throttle'
21 // THINGS_KIT 21 // THINGS_KIT
22 import html2canvas from 'html2canvas' 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 import { SyncEnum } from '@/enums/editPageEnum' 25 import { SyncEnum } from '@/enums/editPageEnum'
26 26
@@ -221,9 +221,10 @@ export const useSync = () => { @@ -221,9 +221,10 @@ export const useSync = () => {
221 indexImage: string 221 indexImage: string
222 id: string 222 id: string
223 state: number 223 state: number
  224 + organizationId: string
224 dataViewContent: { id: string; content: string; enabled: boolean } 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 // ID 228 // ID
228 chartEditStore.setProjectInfo(ProjectInfoEnum.PROJECT_ID, dataViewId) 229 chartEditStore.setProjectInfo(ProjectInfoEnum.PROJECT_ID, dataViewId)
229 // 名称 230 // 名称
@@ -234,6 +235,8 @@ export const useSync = () => { @@ -234,6 +235,8 @@ export const useSync = () => {
234 chartEditStore.setProjectInfo(ProjectInfoEnum.THUMBNAIL, indexImage) 235 chartEditStore.setProjectInfo(ProjectInfoEnum.THUMBNAIL, indexImage)
235 // 发布 236 // 发布
236 chartEditStore.setProjectInfo(ProjectInfoEnum.RELEASE, state === 1) 237 chartEditStore.setProjectInfo(ProjectInfoEnum.RELEASE, state === 1)
  238 + chartEditStore.setProjectInfo(ProjectInfoEnum.ORGANIZATIONID, organizationId)
  239 + chartEditStore.setProjectInfo(ProjectInfoEnum.STATE_DATA, state)
237 } 240 }
238 // THINGS_KIT 241 // THINGS_KIT
239 // * 数据获取 242 // * 数据获取
@@ -248,14 +251,12 @@ export const useSync = () => { @@ -248,14 +251,12 @@ export const useSync = () => {
248 updateStoreInfo(res) 251 updateStoreInfo(res)
249 // 更新全局数据 252 // 更新全局数据
250 await updateComponent(JSONParse(res.dataViewContent.content)) 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 setTimeout(() => { 256 setTimeout(() => {
256 chartEditStore.setEditCanvas(EditCanvasTypeEnum.SAVE_STATUS, SyncEnum.SUCCESS) 257 chartEditStore.setEditCanvas(EditCanvasTypeEnum.SAVE_STATUS, SyncEnum.SUCCESS)
257 }, 1000) 258 }, 1000)
258 - return 259 + // return
259 // } 260 // }
260 // chartEditStore.setEditCanvas(EditCanvasTypeEnum.SAVE_STATUS, SyncEnum.FAILURE) 261 // chartEditStore.setEditCanvas(EditCanvasTypeEnum.SAVE_STATUS, SyncEnum.FAILURE)
261 } catch (error) { 262 } catch (error) {
@@ -270,6 +271,8 @@ export const useSync = () => { @@ -270,6 +271,8 @@ export const useSync = () => {
270 const projectId = chartEditStore.getProjectInfo[ProjectInfoEnum.PROJECT_ID] 271 const projectId = chartEditStore.getProjectInfo[ProjectInfoEnum.PROJECT_ID]
271 const id = chartEditStore.getProjectInfo[ProjectInfoEnum.REMARKS] 272 const id = chartEditStore.getProjectInfo[ProjectInfoEnum.REMARKS]
272 const dataViewName = chartEditStore.getProjectInfo[ProjectInfoEnum.PROJECT_NAME] 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 if (projectId === null || projectId === '') { 277 if (projectId === null || projectId === '') {
275 window['$message'].error('数据初未始化成功,请刷新页面！') 278 window['$message'].error('数据初未始化成功,请刷新页面！')
@@ -277,35 +280,39 @@ export const useSync = () => { @@ -277,35 +280,39 @@ export const useSync = () => {
277 } 280 }
278 chartEditStore.setEditCanvas(EditCanvasTypeEnum.SAVE_STATUS, SyncEnum.START) 281 chartEditStore.setEditCanvas(EditCanvasTypeEnum.SAVE_STATUS, SyncEnum.START)
279 // 异常处理：缩略图上传失败不影响JSON的保存 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 const saveContent = { 317 const saveContent = {
311 dataViewContent: { 318 dataViewContent: {
@@ -313,9 +320,10 @@ export const useSync = () => { @@ -313,9 +320,10 @@ export const useSync = () => {
313 content: JSONStringify(chartEditStore.getStorageInfo || {}) 320 content: JSONStringify(chartEditStore.getStorageInfo || {})
314 }, 321 },
315 dataViewName, 322 dataViewName,
316 - dataViewId: projectId 323 + dataViewId: projectId,
  324 + projectId
317 } 325 }
318 - const res = await contentUpdateApi(saveContent) 326 + await contentUpdateApi(saveContent)
319 window['$message'].success('保存成功！') 327 window['$message'].success('保存成功！')
320 // 成功状态 328 // 成功状态
321 setTimeout(() => { 329 setTimeout(() => {
1 import { ChartEditStorage } from '@/store/modules/chartEditStore/chartEditStore.d' 1 import { ChartEditStorage } from '@/store/modules/chartEditStore/chartEditStore.d'
2 2
3 export interface ChartEditStorageType extends ChartEditStorage { 3 export interface ChartEditStorageType extends ChartEditStorage {
  4 + // THINGS_KIT
4 id: string 5 id: string
5 -}  
  6 + isRelease?: boolean
  7 +}
  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 +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 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]  
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 -}  
  37 +}
1 export type Chartype = { 1 export type Chartype = {
2 id: number | string 2 id: number | string
3 title?: string // 标题 3 title?: string // 标题
4 - label:? string // 标签 4 + label?: string // 标签
5 release?: boolean // 0未发布 | 1已发布 5 release?: boolean // 0未发布 | 1已发布
6 name: string // 0未发布 | 1已发布 6 name: string // 0未发布 | 1已发布
  7 + // THINGS_KIT
7 state: number // 0未发布 | 1已发布 8 state: number // 0未发布 | 1已发布
8 } 9 }
9 10