简柏林 / thingskit-view · Commits

Commit 59cadca5478ed13ec35e1a6ea362ad10dbb7fde6

Authored by fengwotao
1 parent a2689a1c

feat:联调保存编辑回显

Inline Side-by-side
Showing 19 changed files with 915 additions and 811 deletions
1 -import { defHttp } from '@/utils/external/http/axios'; 1 +import {defHttp} from '@/utils/external/http/axios';
2 import { 2 import {
3 ContentParams, 3 ContentParams,
4 - LoginResultModel,  
5 -} from './model/userModel'; 4 + ContentResultModel,
  5 +} from './model/contentModel';
6 6
7 -import type { ErrorMessageMode } from '/#/external/axios'; 7 +import type {ErrorMessageMode} from '/#/external/axios';
8 8
9 enum Api { 9 enum Api {
10 - CONTENT = '/data_view/content', 10 + CONTENT = '/data_view/content',
  11 + GET_CONTENT = '/data_view',
  12 + FILE_UPLOAD = '/oss/upload'
11 } 13 }
12 14
13 /** 15 /**
14 * @description: content save api 16 * @description: content save api
15 */ 17 */
16 -export function contentSaveApi(params: ContentParams, mode: ErrorMessageMode = 'modal') {  
17 - return defHttp.post<LoginResultModel>(  
18 - {  
19 - url: Api.CONTENT,  
20 - params,  
21 - },  
22 - {  
23 - errorMessageMode: mode,  
24 - }  
25 - ); 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 + );
26 } 28 }
  29 +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 + );
  39 +}
  40 +/**
  41 + * @description:dataView content get api
  42 + */
  43 +
  44 +export const getDataView = (id: string) => {
  45 + return defHttp.get({
  46 + url: `${Api.GET_CONTENT}/get_configuration_info/${id}`,
  47 + });
  48 +};
  49 +
  50 +
  51 +/**
  52 + * @description: content get api
  53 + */
  54 +
  55 +export const getDataViewList = (params: object) => {
  56 + return defHttp.get({
  57 + url: `${Api.GET_CONTENT}`,
  58 + params
  59 + });
  60 +};
  61 +
  62 +/**
  63 + * @description: file Upload
  64 + */
  65 +
  66 +
  67 +// * 上传文件
  68 +export const uploadFile = async (file: FormData, mode: ErrorMessageMode = 'modal') => {
  69 + return defHttp.post({url: Api.FILE_UPLOAD, params: file}, {
  70 + errorMessageMode: mode,
  71 + });
  72 +}
  73 +
1 /** 1 /**
2 * @description: Login interface parameters 2 * @description: Login interface parameters
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 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 } 28 }
  29 +
29 export interface RoleInfo { 30 export interface RoleInfo {
30 - roleName: string;  
31 - value: string; 31 + roleName: string;
  32 + value: string;
32 } 33 }
33 34
34 /** 35 /**
35 * @description: Login interface return value 36 * @description: Login interface return value
36 */ 37 */
37 -export interface LoginResultModel {{  
38 - "content": string,  
39 - "createTime": string,  
40 - "creator": string,  
41 - "defaultConfig": string,  
42 - "description": string,  
43 - "enabled": boolean,  
44 - "icon": string,  
45 - "id": string,  
46 - "name": string,  
47 - "nodeIds": [  
48 - string  
49 - ],  
50 - "remark": string,  
51 - "roleIds": [  
52 - string  
53 - ],  
54 - "tenantExpireTime": string,  
55 - "tenantId": string,  
56 - "tenantProfileId": string,  
57 - "tenantStatus": string,  
58 - "updateTime":string,  
59 - "updater":string,  
60 - "viewId":string 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
61 } 62 }
62 63
@@ -82,3 +82,16 @@ export enum MacKeyboard { @@ -82,3 +82,16 @@ export enum MacKeyboard {
82 ALT_SOURCE_KEY = '⌥', 82 ALT_SOURCE_KEY = '⌥',
83 SPACE = 'Space' 83 SPACE = 'Space'
84 } 84 }
  85 +
  86 +
  87 +// 同步状态枚举
  88 +export enum SyncEnum {
  89 + // 等待
  90 + PENDING,
  91 + // 开始
  92 + START,
  93 + // 成功
  94 + SUCCESS,
  95 + // 失败
  96 + FAILURE
  97 +}
1 -import { PublicConfigClass } from '@/packages/public'  
2 -import { CreateComponentType } from '@/packages/index.d'  
3 -import { LeftCenterRightHeadConfig } from './index' 1 +import {PublicConfigClass} from '@/packages/public'
  2 +import {CreateComponentType} from '@/packages/index.d'
  3 +import {LeftCenterRightHeadCommonConfig} from './index'
4 import cloneDeep from 'lodash/cloneDeep' 4 import cloneDeep from 'lodash/cloneDeep'
5 5
6 export const option = { 6 export const option = {
7 - dataset: '物联网平台数据统计',  
8 - bgSrc: 'src/assets/images/chart/headbackground/bg_top.png',  
9 - fontSize: 36,  
10 - showRight:true,  
11 - textColor:'#00f6ff',  
12 - textRightSizeColor:'#ffffff',  
13 - textRightFontSize:14,  
14 - x:0,  
15 - y:0,  
16 - xT:0,  
17 - yT:0, 7 + colorLefts: ['#1dc1f5', '#1dc1f5'],
  8 + colorRights: ['#1dc1f5', '#1dc1f5'],
  9 + // 是否翻转,组合头部，默认开启
  10 + reverse: true,
  11 + defaultReverse: false,
18 } 12 }
19 13
20 export default class Config extends PublicConfigClass implements CreateComponentType { 14 export default class Config extends PublicConfigClass implements CreateComponentType {
21 - public key = LeftCenterRightHeadConfig.key  
22 - public chartConfig = cloneDeep(LeftCenterRightHeadConfig)  
23 - public option = cloneDeep(option) 15 + public key = LeftCenterRightHeadCommonConfig.key
  16 + public chartConfig = cloneDeep(LeftCenterRightHeadCommonConfig)
  17 + public option = cloneDeep(option)
24 } 18 }
1 <template> 1 <template>
2 - <collapse-item name="信息" :expanded="true">  
3 - <setting-item-box name="背景选择" :alone="true">  
4 - <setting-item>  
5 - <n-select 2 + <CollapseItem name="头部左侧样式" :expanded="true">
  3 + <SettingItemBox
  4 + :name="`颜色-${index + 1}`"
  5 + v-for="(item, index) in optionData.colorLefts"
  6 + :key="index"
  7 + >
  8 + <SettingItem name="颜色">
  9 + <n-color-picker
6 size="small" 10 size="small"
7 - placeholder="请选择您要使用的背景"  
8 - style="width: 250px"  
9 - v-model:value="selectValue"  
10 - :options="selectBgOptions"  
11 - @update:value="selectBgValueHandle"  
12 - />  
13 - </setting-item>  
14 - </setting-item-box>  
15 - <setting-item-box name="文字" :alone="true">  
16 - <setting-item>  
17 - <n-input v-model:value="optionData.dataset" size="small"></n-input>  
18 - </setting-item>  
19 - </setting-item-box>  
20 - </collapse-item>  
21 - <collapse-item name="样式" :expanded="true">  
22 - <setting-item-box name="文字">  
23 - <setting-item name="字体大小">  
24 - <n-input-number v-model:value="optionData.fontSize" size="small" placeholder="字体大小"></n-input-number>  
25 - </setting-item>  
26 - </setting-item-box>  
27 - <setting-item-box name="文字颜色">  
28 - <setting-item name="颜色">  
29 - <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.textColor"></n-color-picker>  
30 - </setting-item>  
31 - </setting-item-box>  
32 - <setting-item-box name="位置x轴">  
33 - <setting-item name="字体位置x轴">  
34 - <n-input-number v-model:value="optionData.x" size="small" placeholder="字体位置"></n-input-number>  
35 - </setting-item>  
36 - </setting-item-box>  
37 - <setting-item-box name="位置y轴">  
38 - <setting-item name="字体位置y轴">  
39 - <n-input-number v-model:value="optionData.y" size="small" placeholder="字体位置"></n-input-number>  
40 - </setting-item>  
41 - </setting-item-box>  
42 - </collapse-item>  
43 - <collapse-item name="右侧" :expanded="true">  
44 - <setting-item-box name="是否显示">  
45 - <setting-item name="">  
46 - <n-switch @change="handleChange" v-model:value="optionData.showRight"/>  
47 - </setting-item>  
48 - </setting-item-box>  
49 - <setting-item-box name="文字">  
50 - <setting-item name="字体大小">  
51 - <n-input-number v-model:value="optionData.textRightFontSize" size="small"  
52 - placeholder="字体大小"></n-input-number>  
53 - </setting-item>  
54 - <setting-item name="字体位置x轴">  
55 - <n-input-number v-model:value="optionData.xT" size="small" placeholder="字体位置"></n-input-number>  
56 - </setting-item>  
57 - <setting-item name="字体位置y轴">  
58 - <n-input-number v-model:value="optionData.yT" size="small" placeholder="字体位置"></n-input-number>  
59 - </setting-item>  
60 - </setting-item-box>  
61 - <setting-item-box name="时间颜色">  
62 - <setting-item name="颜色">  
63 - <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.textRightSizeColor"></n-color-picker>  
64 - </setting-item>  
65 - </setting-item-box>  
66 - </collapse-item> 11 + :modes="['hex']"
  12 + v-model:value="optionData.colorLefts[index]"
  13 + ></n-color-picker>
  14 + </SettingItem>
  15 + <SettingItem>
  16 + <n-button
  17 + size="small"
  18 + @click="optionData.colorLefts[index] = option.colorLefts[index]"
  19 + >
  20 + 恢复默认
  21 + </n-button>
  22 + </SettingItem>
  23 + </SettingItemBox>
  24 + </CollapseItem>
  25 + <CollapseItem name="头部右侧样式" :expanded="true">
  26 + <SettingItemBox
  27 + :name="`颜色-${index + 1}`"
  28 + v-for="(item, index) in optionData.colorRights"
  29 + :key="index"
  30 + >
  31 + <SettingItem name="颜色">
  32 + <n-color-picker
  33 + size="small"
  34 + :modes="['hex']"
  35 + v-model:value="optionData.colorRights[index]"
  36 + ></n-color-picker>
  37 + </SettingItem>
  38 + <SettingItem>
  39 + <n-button
  40 + size="small"
  41 + @click="optionData.colorRights[index] = option.colorRights[index]"
  42 + >
  43 + 恢复默认
  44 + </n-button>
  45 + </SettingItem>
  46 + </SettingItemBox>
  47 + </CollapseItem>
67 </template> 48 </template>
68 49
69 <script setup lang="ts"> 50 <script setup lang="ts">
70 -import {PropType, ref} from 'vue' 51 +import {PropType} from 'vue'
71 import {option} from './config' 52 import {option} from './config'
72 import { 53 import {
73 CollapseItem, 54 CollapseItem,
74 SettingItemBox, 55 SettingItemBox,
75 SettingItem 56 SettingItem
76 } from '@/components/Pages/ChartItemSetting' 57 } from '@/components/Pages/ChartItemSetting'
77 -import {SelectOption} from "naive-ui";  
78 58
79 const props = defineProps({ 59 const props = defineProps({
80 optionData: { 60 optionData: {
@@ -83,28 +63,5 @@ const props = defineProps({ @@ -83,28 +63,5 @@ const props = defineProps({
83 } 63 }
84 }) 64 })
85 65
86 -const selectBgOptions = ref<Array<SelectOption>>([])  
87 -  
88 -const selectValue = ref('')  
89 -  
90 -//TODO待封装 成传文件夹名字获取下面所有图片  
91 -const getFetchImages = () => {  
92 - const imagesModules = import.meta.globEager('@/assets/images/chart/headbackground/*')  
93 - for (const key in imagesModules) {  
94 - selectBgOptions.value.push({  
95 - label: imagesModules[key]?.default.slice(25),  
96 - value: imagesModules[key]?.default  
97 - })  
98 - }  
99 -}  
100 -getFetchImages()  
101 -  
102 -const selectBgValueHandle = (value: string) => {  
103 - selectValue.value = value  
104 - props.optionData.bgSrc = value  
105 -}  
106 66
107 -const handleChange = (value: boolean) => {  
108 - props.optionData.showRight = value  
109 -}  
110 </script> 67 </script>
1 import {ConfigType, PackagesCategoryEnum, ChartFrameEnum} from '@/packages/index.d' 1 import {ConfigType, PackagesCategoryEnum, ChartFrameEnum} from '@/packages/index.d'
2 import {ChatCategoryEnum, ChatCategoryEnumName} from '../../index.d' 2 import {ChatCategoryEnum, ChatCategoryEnumName} from '../../index.d'
3 3
4 -export const LeftCenterRightHeadConfig: ConfigType = {  
5 - key: 'LeftCenterRightHead',  
6 - chartKey: 'VLeftCenterRightHead',  
7 - conKey: 'VCLeftCenterRightHead',  
8 - title: '通用头部', 4 +export const LeftCenterRightHeadCommonConfig: ConfigType = {
  5 + key: 'LeftCenterRightHeadCommon',
  6 + chartKey: 'VLeftCenterRightHeadCommon',
  7 + conKey: 'VCLeftCenterRightHeadCommon',
  8 + title: '头部',
9 category: ChatCategoryEnum.HEADCOMBINATION, 9 category: ChatCategoryEnum.HEADCOMBINATION,
10 categoryName: ChatCategoryEnumName.HEADCOMBINATION, 10 categoryName: ChatCategoryEnumName.HEADCOMBINATION,
11 package: PackagesCategoryEnum.COMPOSES, 11 package: PackagesCategoryEnum.COMPOSES,
1 <template> 1 <template>
2 - <div class="go-text-box">  
3 - <n-grid :style="{'background-image': 'url('+option.configOption.bgSrc+')'}" class="go-n-grid" :x-gap="12" :y-gap="3" 2 + <div>
  3 + <n-grid :x-gap="12"
4 :cols="3" layout-shift-disabled> 4 :cols="3" layout-shift-disabled>
5 <n-grid-item> 5 <n-grid-item>
6 - <!-- 占位-->  
7 - <div></div> 6 + <svg :width="w" :height="h">
  7 + <polyline
  8 + :stroke="colorLefts[0]"
  9 + stroke-width="2"
  10 + fill="transparent"
  11 + :points="`${xFalsePos(0)}, 0 ${xFalsePos(30)}, ${h / 2}`"
  12 + />
  13 +
  14 + <polyline
  15 + :stroke="colorLefts[0]"
  16 + stroke-width="2"
  17 + fill="transparent"
  18 + :points="`${xFalsePos(20)}, 0 ${xFalsePos(50)}, ${h / 2} ${xFalsePos(w)}, ${
  19 + h / 2
  20 + }`"
  21 + />
  22 +
  23 + <polyline
  24 + :stroke="colorLefts[1]"
  25 + fill="transparent"
  26 + stroke-width="3"
  27 + :points="`${xFalsePos(0)}, ${h - 3}, ${xFalsePos(200)}, ${h - 3}`"
  28 + />
  29 + </svg>
8 </n-grid-item> 30 </n-grid-item>
9 <n-grid-item> 31 <n-grid-item>
10 - <span  
11 - style="position:relative"  
12 - :style="{ top:option.configOption.y+'px',marginLeft:option.configOption.x+'px',color: option.configOption.textColor, fontSize: option.configOption.fontSize + 'px' }">{{  
13 - option.configOption.dataset  
14 - }}</span> 32 +<!-- <div style="width:300px;height: 30px"></div>-->
15 </n-grid-item> 33 </n-grid-item>
16 <n-grid-item> 34 <n-grid-item>
17 - <span style="position:relative" v-if="option.configOption.showRight"  
18 - :style="{ top:option.configOption.yT+'px',marginLeft:option.configOption.xT+'px',color: option.configOption.textRightSizeColor, fontSize: option.configOption.textRightFontSize + 'px' }">{{  
19 - newData  
20 - }}</span> 35 +<!-- <svg :width="w" :height="h">-->
  36 +<!-- <polyline-->
  37 +<!-- :stroke="colorRights[0]"-->
  38 +<!-- stroke-width="2"-->
  39 +<!-- fill="transparent"-->
  40 +<!-- :points="`${xPos(0)}, 0 ${xPos(30)}, ${h / 2}`"-->
  41 +<!-- />-->
  42 +
  43 +<!-- <polyline-->
  44 +<!-- :stroke="colorRights[0]"-->
  45 +<!-- stroke-width="2"-->
  46 +<!-- fill="transparent"-->
  47 +<!-- :points="`${xPos(20)}, 0 ${xPos(50)}, ${h / 2} ${xPos(w)}, ${-->
  48 +<!-- h / 2-->
  49 +<!-- }`"-->
  50 +<!-- />-->
  51 +
  52 +<!-- <polyline-->
  53 +<!-- :stroke="colorRights[1]"-->
  54 +<!-- fill="transparent"-->
  55 +<!-- stroke-width="3"-->
  56 +<!-- :points="`${xPos(0)}, ${h - 3}, ${xPos(200)}, ${h - 3}`"-->
  57 +<!-- />-->
  58 +<!-- </svg>-->
21 </n-grid-item> 59 </n-grid-item>
22 </n-grid> 60 </n-grid>
23 </div> 61 </div>
24 </template> 62 </template>
25 <script setup lang="ts"> 63 <script setup lang="ts">
26 -import {PropType, toRefs, shallowReactive, watch, onMounted, onUnmounted, ref} from 'vue' 64 +import {PropType, toRefs} from 'vue'
27 import {CreateComponentType} from '@/packages/index.d' 65 import {CreateComponentType} from '@/packages/index.d'
28 -import {useChartDataFetch} from '@/hooks'  
29 -import {useChartEditStore} from '@/store/modules/chartEditStore/chartEditStore'  
30 -import {option as configOption} from './config'  
31 66
32 const props = defineProps({ 67 const props = defineProps({
33 chartConfig: { 68 chartConfig: {
@@ -36,105 +71,23 @@ const props = defineProps({ @@ -36,105 +71,23 @@ const props = defineProps({
36 } 71 }
37 }) 72 })
38 73
39 -const option = shallowReactive({  
40 - configOption  
41 -})  
42 -  
43 -let yearMonthDay = ref('2021-2-3')  
44 -  
45 -let nowData = ref('08:00:00')  
46 -  
47 -let newData = ref('2021-2-3 08:00:00')  
48 -  
49 -let timer: any = null  
50 -  
51 //默认设置宽高距离位置 74 //默认设置宽高距离位置
52 -props.chartConfig.attr.w = 1920  
53 -props.chartConfig.attr.h = 148  
54 -props.chartConfig.attr.x = 0  
55 -props.chartConfig.attr.y = 0  
56 -  
57 -watch(  
58 - () => props.chartConfig.option,  
59 - (newData: any) => {  
60 - option.configOption = newData  
61 - },  
62 - {  
63 - immediate: true,  
64 - deep: false  
65 - }  
66 -)  
67 -  
68 -useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {  
69 - option.configOption = newData  
70 -})  
71 -  
72 -  
73 -//TODO待封装 这里和原作者时间通用获取当前时间代码一样  
74 -onMounted(() => {  
75 -//格式化当前时间  
76 - timer = setInterval(() => {  
77 - const  
78 - weeks = {  
79 - "0": '星期日',  
80 - "1": '星期一',  
81 - "2": '星期二',  
82 - "3": '星期三',  
83 - "4": '星期四',  
84 - "5": '星期五',  
85 - "6": '星期六',  
86 - }  
87 - const datetime = new Date()  
88 - const year = datetime.getFullYear()  
89 - const month = datetime.getMonth() + 1 < 10 ? '0' + (datetime.getMonth() + 1) : datetime.getMonth() + 1  
90 - const date = datetime.getDate() < 10 ? '0' + datetime.getDate() : datetime.getDate()  
91 - const hh = datetime.getHours() // 时  
92 - const mm = datetime.getMinutes() // 分  
93 - const ss = datetime.getSeconds() // 分  
94 - let weekIndex = datetime.getDay();  
95 - let time = ''  
96 - if (hh < 10) time += '0'  
97 - time += hh + ':'  
98 - if (mm < 10) time += '0'  
99 - time += mm + ':'  
100 - if (ss < 10) time += '0'  
101 - time += ss  
102 - yearMonthDay.value = `${year}-${month}-${date}`  
103 - nowData.value = time  
104 - newData.value = yearMonthDay.value + ' ' + nowData.value + ' ' + weeks[weekIndex]  
105 - }, 500)  
106 -})  
107 -onUnmounted(() => {  
108 - clearInterval(timer)  
109 -})  
110 -  
111 -</script>  
112 -  
113 -<style lang="scss" scoped>  
114 -@include go('text-box') {  
115 - display: flex;  
116 - align-items: center;  
117 - justify-content: center;  
118 - .n-gradient-text {  
119 - white-space: initial;  
120 - } 75 +// props.chartConfig.attr.w = 1920
  76 +// props.chartConfig.attr.h = 148
  77 +// props.chartConfig.attr.x = 0
  78 +// props.chartConfig.attr.y = 0
  79 +const {w, h} = toRefs(props.chartConfig.attr)
  80 +const {colorLefts,colorRights,reverse,defaultReverse} = toRefs(props.chartConfig.option)
  81 +
  82 +const xPos = (pos: number) => {
  83 + if (!reverse.value) return pos
  84 + return w.value - pos
121 } 85 }
122 -  
123 -.light-green {  
124 - height: 108px;  
125 - background-color: rgba(0, 128, 0, 0.12);  
126 -}  
127 -  
128 -.green {  
129 - height: 108px;  
130 - background-color: rgba(0, 128, 0, 0.24); 86 +const xFalsePos = (pos: number) => {
  87 + if (!defaultReverse.value) return pos
  88 + return w.value - pos
131 } 89 }
  90 +</script>
132 91
133 -.go-n-grid {  
134 - background: url(@/assets/images/chart/headbackground/bg_top.png) center no-repeat;  
135 - background-size: 100% 100%;  
136 - text-align: center;  
137 - font-size: 36px;  
138 - line-height: 90px;  
139 -} 92 +<style lang="scss" scoped>
140 </style> 93 </style>
1 import { LeftCenterRightHeadConfig } from './LeftCenterRightHead/index' 1 import { LeftCenterRightHeadConfig } from './LeftCenterRightHead/index'
  2 +import { LeftCenterRightHeadCommonConfig } from './LeftCenterRightHeadCommon/index'
2 3
3 -export default [LeftCenterRightHeadConfig] 4 +export default [LeftCenterRightHeadConfig,LeftCenterRightHeadCommonConfig]
@@ -2,7 +2,6 @@ import { ChartList } from '@/packages/components/Charts/index' @@ -2,7 +2,6 @@ import { ChartList } from '@/packages/components/Charts/index'
2 import { DecorateList } from '@/packages/components/Decorates/index' 2 import { DecorateList } from '@/packages/components/Decorates/index'
3 import { InformationList } from '@/packages/components/Informations/index' 3 import { InformationList } from '@/packages/components/Informations/index'
4 import { TableList } from '@/packages/components/Tables/index' 4 import { TableList } from '@/packages/components/Tables/index'
5 -import { ArtoonsList } from '@/packages/components/Artoons/index'  
6 import { ComposesList } from '@/packages/components/Composes/index' 5 import { ComposesList } from '@/packages/components/Composes/index'
7 import { PackagesCategoryEnum, PackagesType, ConfigType, FetchComFlagType } from '@/packages/index.d' 6 import { PackagesCategoryEnum, PackagesType, ConfigType, FetchComFlagType } from '@/packages/index.d'
8 7
@@ -16,7 +15,6 @@ export let packagesList: PackagesType = { @@ -16,7 +15,6 @@ export let packagesList: PackagesType = {
16 [PackagesCategoryEnum.INFORMATIONS]: InformationList, 15 [PackagesCategoryEnum.INFORMATIONS]: InformationList,
17 [PackagesCategoryEnum.TABLES]: TableList, 16 [PackagesCategoryEnum.TABLES]: TableList,
18 [PackagesCategoryEnum.DECORATES]: DecorateList, 17 [PackagesCategoryEnum.DECORATES]: DecorateList,
19 - [PackagesCategoryEnum.ARTOONS]: ArtoonsList,  
20 [PackagesCategoryEnum.COMPOSES]: ComposesList, 18 [PackagesCategoryEnum.COMPOSES]: ComposesList,
21 } 19 }
22 20
@@ -74,4 +74,4 @@ export const canvasModelIndex = 9999 @@ -74,4 +74,4 @@ export const canvasModelIndex = 9999
74 export const selectBoxIndex = canvasModelIndex + 10 74 export const selectBoxIndex = canvasModelIndex + 10
75 75
76 // 工作台自动保存间隔（s） 76 // 工作台自动保存间隔（s）
77 -export const saveInterval = 120 77 +export const saveInterval =30
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 { 4 import {
4 - RequestHttpEnum,  
5 - RequestContentTypeEnum,  
6 - RequestDataTypeEnum,  
7 - RequestHttpIntervalEnum,  
8 - RequestParams,  
9 - RequestBodyEnum,  
10 - RequestParamsObjType 5 + RequestHttpEnum,
  6 + RequestContentTypeEnum,
  7 + RequestDataTypeEnum,
  8 + RequestHttpIntervalEnum,
  9 + RequestParams,
  10 + RequestBodyEnum,
  11 + RequestParamsObjType
11 } from '@/enums/httpEnum' 12 } from '@/enums/httpEnum'
12 -import { PreviewScaleEnum } from '@/enums/styleEnum'  
13 -import type { ChartColorsNameType, GlobalThemeJsonType } from '@/settings/chartThemes/index' 13 +import {PreviewScaleEnum} from '@/enums/styleEnum'
  14 +import type {ChartColorsNameType, GlobalThemeJsonType} from '@/settings/chartThemes/index'
  15 +
  16 +// 项目数据枚举
  17 +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 +
  30 +// 项目数据
  31 +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 +}
14 38
15 // 编辑画布属性 39 // 编辑画布属性
16 export enum EditCanvasTypeEnum { 40 export enum EditCanvasTypeEnum {
17 - EDIT_LAYOUT_DOM = 'editLayoutDom',  
18 - EDIT_CONTENT_DOM = 'editContentDom',  
19 - OFFSET = 'offset',  
20 - SCALE = 'scale',  
21 - USER_SCALE = 'userScale',  
22 - LOCK_SCALE = 'lockScale',  
23 - IS_CREATE = 'isCreate',  
24 - IS_DRAG = 'isDrag',  
25 - IS_SELECT = 'isSelect' 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',
  48 +
  49 + IS_CREATE = 'isCreate',
  50 + IS_DRAG = 'isDrag',
  51 + IS_SELECT = 'isSelect'
26 } 52 }
27 53
28 // 编辑区域 54 // 编辑区域
29 export type EditCanvasType = { 55 export type EditCanvasType = {
30 - // 编辑区域 DOM  
31 - [EditCanvasTypeEnum.EDIT_LAYOUT_DOM]: HTMLElement | null  
32 - [EditCanvasTypeEnum.EDIT_CONTENT_DOM]: HTMLElement | null  
33 - // 偏移大小  
34 - [EditCanvasTypeEnum.OFFSET]: number  
35 - // 缩放  
36 - [EditCanvasTypeEnum.SCALE]: number  
37 - // 缩放  
38 - [EditCanvasTypeEnum.USER_SCALE]: number  
39 - // 锁定缩放  
40 - [EditCanvasTypeEnum.LOCK_SCALE]: boolean  
41 - // 初始化创建  
42 - [EditCanvasTypeEnum.IS_CREATE]: boolean  
43 - // 拖拽中  
44 - [EditCanvasTypeEnum.IS_DRAG]: boolean  
45 - // 框选中  
46 - [EditCanvasTypeEnum.IS_SELECT]: boolean 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
47 } 75 }
48 76
49 // 滤镜/背景色/宽高主题等 77 // 滤镜/背景色/宽高主题等
50 export enum EditCanvasConfigEnum { 78 export enum EditCanvasConfigEnum {
51 - PROJECT_NAME = 'projectName',  
52 - WIDTH = 'width',  
53 - HEIGHT = 'height',  
54 - CHART_THEME_COLOR = 'chartThemeColor',  
55 - CHART_THEME_SETTING = 'chartThemeSetting',  
56 - BACKGROUND = 'background',  
57 - BACKGROUND_IMAGE = 'backgroundImage',  
58 - SELECT_COLOR = 'selectColor',  
59 - PREVIEW_SCALE_TYPE = 'previewScaleType' 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'
60 } 88 }
61 89
62 export interface EditCanvasConfigType { 90 export interface EditCanvasConfigType {
63 - // 滤镜-启用  
64 - [FilterEnum.FILTERS_SHOW]: boolean  
65 - // 滤镜-色相  
66 - [FilterEnum.HUE_ROTATE]: number  
67 - // 滤镜-饱和度  
68 - [FilterEnum.SATURATE]: number  
69 - // 滤镜-亮度  
70 - [FilterEnum.BRIGHTNESS]: number  
71 - // 滤镜-对比度  
72 - [FilterEnum.CONTRAST]: number  
73 - // 滤镜-不透明度  
74 - [FilterEnum.OPACITY]: number  
75 - // 变换（暂不使用）  
76 - [FilterEnum.ROTATE_Z]: number  
77 - [FilterEnum.ROTATE_X]: number  
78 - [FilterEnum.ROTATE_Y]: number  
79 - [FilterEnum.SKEW_X]: number  
80 - [FilterEnum.SKEW_Y]: number  
81 - [FilterEnum.BLEND_MODE]: string  
82 - // 大屏名称  
83 - [EditCanvasConfigEnum.PROJECT_NAME]?: string  
84 - // 大屏宽度  
85 - [EditCanvasConfigEnum.WIDTH]: number  
86 - // 大屏高度  
87 - [EditCanvasConfigEnum.HEIGHT]: number  
88 - // 背景色  
89 - [EditCanvasConfigEnum.BACKGROUND]?: string  
90 - [EditCanvasConfigEnum.BACKGROUND_IMAGE]?: string | null  
91 - // 图表主题颜色  
92 - [EditCanvasConfigEnum.CHART_THEME_COLOR]: ChartColorsNameType  
93 - // 图表全局配置  
94 - [EditCanvasConfigEnum.CHART_THEME_SETTING]: GlobalThemeJsonType  
95 - // 图表主题颜色  
96 - [EditCanvasConfigEnum.SELECT_COLOR]: boolean  
97 - // 预览展示方式  
98 - [EditCanvasConfigEnum.PREVIEW_SCALE_TYPE]: PreviewScaleEnum 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 } 127 }
100 128
101 // 坐标轴信息 129 // 坐标轴信息
102 // eslint-disable-next-line no-redeclare 130 // eslint-disable-next-line no-redeclare
103 export enum EditCanvasTypeEnum { 131 export enum EditCanvasTypeEnum {
104 - START_X = 'startX',  
105 - START_Y = 'startY',  
106 - X = 'x',  
107 - Y = 'y' 132 + START_X = 'startX',
  133 + START_Y = 'startY',
  134 + X = 'x',
  135 + Y = 'y'
108 } 136 }
109 137
110 // 鼠标位置 138 // 鼠标位置
111 export type MousePositionType = { 139 export type MousePositionType = {
112 - // 开始 X  
113 - [EditCanvasTypeEnum.START_X]: number  
114 - // 开始 Y  
115 - [EditCanvasTypeEnum.START_Y]: number  
116 - // X  
117 - [EditCanvasTypeEnum.X]: number  
118 - // y  
119 - [EditCanvasTypeEnum.Y]: number 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
120 } 148 }
121 149
122 // 操作目标 150 // 操作目标
123 export type TargetChartType = { 151 export type TargetChartType = {
124 - hoverId?: string  
125 - selectId: string[] 152 + hoverId?: string
  153 + selectId: string[]
126 } 154 }
127 155
128 // 数据记录 156 // 数据记录
129 export type RecordChartType = { 157 export type RecordChartType = {
130 - charts: CreateComponentType | CreateComponentGroupType | Array<CreateComponentType | CreateComponentGroupType>  
131 - type: HistoryActionTypeEnum.CUT | HistoryActionTypeEnum.COPY 158 + charts: CreateComponentType | CreateComponentGroupType | Array<CreateComponentType | CreateComponentGroupType>
  159 + type: HistoryActionTypeEnum.CUT | HistoryActionTypeEnum.COPY
132 } 160 }
133 161
134 // Store 枚举 162 // Store 枚举
135 export enum ChartEditStoreEnum { 163 export enum ChartEditStoreEnum {
136 - EDIT_RANGE = 'editRange',  
137 - EDIT_CANVAS = 'editCanvas',  
138 - RIGHT_MENU_SHOW = 'rightMenuShow',  
139 - MOUSE_POSITION = 'mousePosition',  
140 - TARGET_CHART = 'targetChart',  
141 - RECORD_CHART = 'recordChart',  
142 - // 以下需要存储  
143 - EDIT_CANVAS_CONFIG = 'editCanvasConfig',  
144 - REQUEST_GLOBAL_CONFIG = 'requestGlobalConfig',  
145 - COMPONENT_LIST = 'componentList' 164 + PROJECT_INFO = 'projectInfo',
  165 +
  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'
146 } 176 }
147 177
148 // 请求公共类型 178 // 请求公共类型
149 type RequestPublicConfigType = { 179 type RequestPublicConfigType = {
150 - // 时间单位（时分秒）  
151 - requestIntervalUnit: RequestHttpIntervalEnum  
152 - // 请求内容  
153 - requestParams: RequestParams 180 + // 时间单位（时分秒）
  181 + requestIntervalUnit: RequestHttpIntervalEnum
  182 + // 请求内容
  183 + requestParams: RequestParams
154 } 184 }
155 185
156 // 数据池项类型 186 // 数据池项类型
157 export type RequestDataPondItemType = { 187 export type RequestDataPondItemType = {
158 - dataPondId: string,  
159 - dataPondName: string,  
160 - dataPondRequestConfig: RequestConfigType 188 + dataPondId: string,
  189 + dataPondName: string,
  190 + dataPondRequestConfig: RequestConfigType
161 } 191 }
162 192
163 // 全局的图表请求配置 193 // 全局的图表请求配置
164 export interface RequestGlobalConfigType extends RequestPublicConfigType { 194 export interface RequestGlobalConfigType extends RequestPublicConfigType {
165 - // 组件定制轮询时间  
166 - requestInterval: number  
167 - // 请求源地址  
168 - requestOriginUrl?: string  
169 - // 公共数据池  
170 - requestDataPond: RequestDataPondItemType[] 195 + // 组件定制轮询时间
  196 + requestInterval: number
  197 + // 请求源地址
  198 + requestOriginUrl?: string
  199 + // 公共数据池
  200 + requestDataPond: RequestDataPondItemType[]
171 } 201 }
172 202
173 // 单个图表请求配置 203 // 单个图表请求配置
174 export interface RequestConfigType extends RequestPublicConfigType { 204 export interface RequestConfigType extends RequestPublicConfigType {
175 - // 所选全局数据池的对应 id  
176 - requestDataPondId?: string  
177 - // 组件定制轮询时间  
178 - requestInterval?: number  
179 - // 获取数据的方式  
180 - requestDataType: RequestDataTypeEnum  
181 - // 请求方式 get/post/del/put/patch  
182 - requestHttpType: RequestHttpEnum  
183 - // 源后续的 url  
184 - requestUrl?: string  
185 - // 请求内容主体方式 普通/sql  
186 - requestContentType: RequestContentTypeEnum  
187 - // 请求体类型  
188 - requestParamsBodyType: RequestBodyEnum  
189 - // SQL 请求对象  
190 - requestSQLContent: {  
191 - sql: string  
192 - } 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 + }
193 } 223 }
194 224
195 // Store 类型 225 // Store 类型
196 export interface ChartEditStoreType { 226 export interface ChartEditStoreType {
197 - [ChartEditStoreEnum.EDIT_CANVAS]: EditCanvasType  
198 - [ChartEditStoreEnum.EDIT_CANVAS_CONFIG]: EditCanvasConfigType  
199 - [ChartEditStoreEnum.RIGHT_MENU_SHOW]: boolean  
200 - [ChartEditStoreEnum.MOUSE_POSITION]: MousePositionType  
201 - [ChartEditStoreEnum.TARGET_CHART]: TargetChartType  
202 - [ChartEditStoreEnum.RECORD_CHART]?: RecordChartType  
203 - [ChartEditStoreEnum.REQUEST_GLOBAL_CONFIG]: RequestGlobalConfigType  
204 - [ChartEditStoreEnum.COMPONENT_LIST]: Array<CreateComponentType | CreateComponentGroupType> 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>
205 } 236 }
206 237
207 // 存储数据类型 238 // 存储数据类型
208 export interface ChartEditStorage { 239 export interface ChartEditStorage {
209 - [ChartEditStoreEnum.EDIT_CANVAS_CONFIG]: EditCanvasConfigType  
210 - [ChartEditStoreEnum.REQUEST_GLOBAL_CONFIG]: RequestGlobalConfigType  
211 - [ChartEditStoreEnum.COMPONENT_LIST]: Array<CreateComponentType | CreateComponentGroupType> 240 + [ChartEditStoreEnum.EDIT_CANVAS_CONFIG]: EditCanvasConfigType
  241 + [ChartEditStoreEnum.REQUEST_GLOBAL_CONFIG]: RequestGlobalConfigType
  242 + [ChartEditStoreEnum.COMPONENT_LIST]: Array<CreateComponentType | CreateComponentGroupType>
212 } 243 }
@@ -18,6 +18,7 @@ import { @@ -18,6 +18,7 @@ import {
18 import { MenuEnum } from '@/enums/editPageEnum' 18 import { MenuEnum } from '@/enums/editPageEnum'
19 import { getUUID, loadingStart, loadingFinish, loadingError, isString, isArray } from '@/utils' 19 import { getUUID, loadingStart, loadingFinish, loadingError, isString, isArray } from '@/utils'
20 import { 20 import {
  21 + ProjectInfoType,
21 ChartEditStoreEnum, 22 ChartEditStoreEnum,
22 ChartEditStorage, 23 ChartEditStorage,
23 ChartEditStoreType, 24 ChartEditStoreType,
@@ -36,6 +37,14 @@ const settingStore = useSettingStore() @@ -36,6 +37,14 @@ const settingStore = useSettingStore()
36 export const useChartEditStore = defineStore({ 37 export const useChartEditStore = defineStore({
37 id: 'useChartEditStore', 38 id: 'useChartEditStore',
38 state: (): ChartEditStoreType => ({ 39 state: (): ChartEditStoreType => ({
  40 + // 项目数据
  41 + projectInfo: {
  42 + projectId: '',
  43 + projectName: '',
  44 + remarks: '',
  45 + thumbnail: '',
  46 + release: false
  47 + },
39 // 画布属性 48 // 画布属性
40 editCanvas: { 49 editCanvas: {
41 // 编辑区域 Dom 50 // 编辑区域 Dom
@@ -134,6 +143,9 @@ export const useChartEditStore = defineStore({ @@ -134,6 +143,9 @@ export const useChartEditStore = defineStore({
134 componentList: [] 143 componentList: []
135 }), 144 }),
136 getters: { 145 getters: {
  146 + getProjectInfo(): ProjectInfoType {
  147 + return this.projectInfo
  148 + },
137 getMousePosition(): MousePositionType { 149 getMousePosition(): MousePositionType {
138 return this.mousePosition 150 return this.mousePosition
139 }, 151 },
@@ -168,6 +180,10 @@ export const useChartEditStore = defineStore({ @@ -168,6 +180,10 @@ export const useChartEditStore = defineStore({
168 } 180 }
169 }, 181 },
170 actions: { 182 actions: {
  183 + // * 设置 peojectInfo 数据项
  184 + setProjectInfo<T extends keyof ProjectInfoType, K extends ProjectInfoType[T]>(key: T, value: K) {
  185 + this.projectInfo[key] = value
  186 + },
171 // * 设置 editCanvas 数据项 187 // * 设置 editCanvas 数据项
172 setEditCanvas<T extends keyof EditCanvasType, K extends EditCanvasType[T]>(key: T, value: K) { 188 setEditCanvas<T extends keyof EditCanvasType, K extends EditCanvasType[T]>(key: T, value: K) {
173 this.editCanvas[key] = value 189 this.editCanvas[key] = value
@@ -506,7 +522,7 @@ export const useChartEditStore = defineStore({ @@ -506,7 +522,7 @@ export const useChartEditStore = defineStore({
506 item.id = getUUID() 522 item.id = getUUID()
507 }) 523 })
508 } 524 }
509 - 525 +
510 return e 526 return e
511 } 527 }
512 const isCut = recordCharts.type === HistoryActionTypeEnum.CUT 528 const isCut = recordCharts.type === HistoryActionTypeEnum.CUT
1 <template> 1 <template>
2 <!-- <edit-rule></edit-rule> --> 2 <!-- <edit-rule></edit-rule> -->
3 <content-box 3 <content-box
4 - id="go-chart-edit-layout"  
5 - :flex="true"  
6 - :showTop="false"  
7 - :showBottom="true"  
8 - :depth="1"  
9 - :xScroll="true"  
10 - :disabledScroll="true"  
11 - @mousedown="mousedownHandleUnStop"  
12 - @drop="dragHandle"  
13 - @dragover="dragoverHandle"  
14 - @dragenter="dragoverHandle" 4 + id="go-chart-edit-layout"
  5 + :flex="true"
  6 + :showTop="false"
  7 + :showBottom="true"
  8 + :depth="1"
  9 + :xScroll="true"
  10 + :disabledScroll="true"
  11 + @mousedown="mousedownHandleUnStop"
  12 + @drop="dragHandle"
  13 + @dragover="dragoverHandle"
  14 + @dragenter="dragoverHandle"
15 > 15 >
16 <edit-rule> 16 <edit-rule>
17 <!-- 画布主体 --> 17 <!-- 画布主体 -->
@@ -20,7 +20,7 @@ @@ -20,7 +20,7 @@
20 <edit-range> 20 <edit-range>
21 <!-- 滤镜预览 --> 21 <!-- 滤镜预览 -->
22 <div 22 <div
23 - :style="{ 23 + :style="{
24 ...getFilterStyle(chartEditStore.getEditCanvasConfig), 24 ...getFilterStyle(chartEditStore.getEditCanvasConfig),
25 ...rangeStyle 25 ...rangeStyle
26 }" 26 }"
@@ -29,35 +29,35 @@ @@ -29,35 +29,35 @@
29 <div v-for="(item, index) in chartEditStore.getComponentList" :key="item.id"> 29 <div v-for="(item, index) in chartEditStore.getComponentList" :key="item.id">
30 <!-- 分组 --> 30 <!-- 分组 -->
31 <edit-group 31 <edit-group
32 - v-if="item.isGroup"  
33 - :groupData="(item as CreateComponentGroupType)"  
34 - :groupIndex="index" 32 + v-if="item.isGroup"
  33 + :groupData="(item as CreateComponentGroupType)"
  34 + :groupIndex="index"
35 ></edit-group> 35 ></edit-group>
36 36
37 <!-- 单组件 --> 37 <!-- 单组件 -->
38 <edit-shape-box 38 <edit-shape-box
39 - v-else  
40 - :data-id="item.id"  
41 - :index="index"  
42 - :style="{ 39 + v-else
  40 + :data-id="item.id"
  41 + :index="index"
  42 + :style="{
43 ...useComponentStyle(item.attr, index), 43 ...useComponentStyle(item.attr, index),
44 ...getBlendModeStyle(item.styles) as any 44 ...getBlendModeStyle(item.styles) as any
45 }" 45 }"
46 - :item="item"  
47 - @click="mouseClickHandle($event, item)"  
48 - @mousedown="mousedownHandle($event, item)"  
49 - @mouseenter="mouseenterHandle($event, item)"  
50 - @mouseleave="mouseleaveHandle($event, item)"  
51 - @contextmenu="handleContextMenu($event, item, optionsHandle)" 46 + :item="item"
  47 + @click="mouseClickHandle($event, item)"
  48 + @mousedown="mousedownHandle($event, item)"
  49 + @mouseenter="mouseenterHandle($event, item)"
  50 + @mouseleave="mouseleaveHandle($event, item)"
  51 + @contextmenu="handleContextMenu($event, item, optionsHandle)"
52 > 52 >
53 <component 53 <component
54 - class="edit-content-chart"  
55 - :class="animationsClass(item.styles.animations)"  
56 - :is="item.chartConfig.chartKey"  
57 - :chartConfig="item"  
58 - :themeSetting="themeSetting"  
59 - :themeColor="themeColor"  
60 - :style="{ 54 + class="edit-content-chart"
  55 + :class="animationsClass(item.styles.animations)"
  56 + :is="item.chartConfig.chartKey"
  57 + :chartConfig="item"
  58 + :themeSetting="themeSetting"
  59 + :themeColor="themeColor"
  60 + :style="{
61 ...useSizeStyle(item.attr), 61 ...useSizeStyle(item.attr),
62 ...getFilterStyle(item.styles), 62 ...getFilterStyle(item.styles),
63 ...getTransformStyle(item.styles) 63 ...getTransformStyle(item.styles)
@@ -83,42 +83,45 @@ @@ -83,42 +83,45 @@
83 </template> 83 </template>
84 84
85 <script lang="ts" setup> 85 <script lang="ts" setup>
86 -import { onMounted, computed } from 'vue'  
87 -import { chartColors } from '@/settings/chartThemes/index'  
88 -import { MenuEnum } from '@/enums/editPageEnum'  
89 -import { CreateComponentType, CreateComponentGroupType } from '@/packages/index.d'  
90 -import { animationsClass, getFilterStyle, getTransformStyle, getBlendModeStyle } from '@/utils'  
91 -import { useContextMenu } from '@/views/chart/hooks/useContextMenu.hook'  
92 -import { MenuOptionsItemType } from '@/views/chart/hooks/useContextMenu.hook.d'  
93 -import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'  
94 -  
95 -import { useLayout } from './hooks/useLayout.hook'  
96 -import { useAddKeyboard } from '../hooks/useKeyboard.hook'  
97 -import { dragHandle, dragoverHandle, mousedownHandleUnStop, useMouseHandle } from './hooks/useDrag.hook'  
98 -import { useComponentStyle, useSizeStyle } from './hooks/useStyle.hook'  
99 -  
100 -import { ContentBox } from '../ContentBox/index'  
101 -import { EditGroup } from './components/EditGroup'  
102 -import { EditRange } from './components/EditRange'  
103 -import { EditRule } from './components/EditRule'  
104 -import { EditBottom } from './components/EditBottom'  
105 -import { EditShapeBox } from './components/EditShapeBox'  
106 -import { EditTools } from './components/EditTools' 86 +import {onMounted, computed} from 'vue'
  87 +import {chartColors} from '@/settings/chartThemes/index'
  88 +import {MenuEnum} from '@/enums/editPageEnum'
  89 +import {CreateComponentType, CreateComponentGroupType} from '@/packages/index.d'
  90 +import {animationsClass, getFilterStyle, getTransformStyle, getBlendModeStyle} from '@/utils'
  91 +import {useContextMenu} from '@/views/chart/hooks/useContextMenu.hook'
  92 +import {MenuOptionsItemType} from '@/views/chart/hooks/useContextMenu.hook.d'
  93 +import {useChartEditStore} from '@/store/modules/chartEditStore/chartEditStore'
  94 +
  95 +import {useLayout} from './hooks/useLayout.hook'
  96 +import {useAddKeyboard} from '../hooks/useKeyboard.hook'
  97 +import {dragHandle, dragoverHandle, mousedownHandleUnStop, useMouseHandle} from './hooks/useDrag.hook'
  98 +import {useComponentStyle, useSizeStyle} from './hooks/useStyle.hook'
  99 +import {useSync} from '../hooks/useSync.hook'
  100 +
  101 +import {ContentBox} from '../ContentBox/index'
  102 +import {EditGroup} from './components/EditGroup'
  103 +import {EditRange} from './components/EditRange'
  104 +import {EditRule} from './components/EditRule'
  105 +import {EditBottom} from './components/EditBottom'
  106 +import {EditShapeBox} from './components/EditShapeBox'
  107 +import {EditTools} from './components/EditTools'
107 108
108 const chartEditStore = useChartEditStore() 109 const chartEditStore = useChartEditStore()
109 -const { handleContextMenu } = useContextMenu() 110 +const {handleContextMenu} = useContextMenu()
  111 +const {dataSyncFetch, intervalDataSyncUpdate} = useSync()
  112 +
110 113
111 // 布局处理 114 // 布局处理
112 useLayout() 115 useLayout()
113 116
114 // 点击事件 117 // 点击事件
115 -const { mouseenterHandle, mouseleaveHandle, mousedownHandle, mouseClickHandle } = useMouseHandle() 118 +const {mouseenterHandle, mouseleaveHandle, mousedownHandle, mouseClickHandle} = useMouseHandle()
116 119
117 // 右键事件 120 // 右键事件
118 const optionsHandle = ( 121 const optionsHandle = (
119 - targetList: MenuOptionsItemType[],  
120 - allList: MenuOptionsItemType[],  
121 - targetInstance: CreateComponentType 122 + targetList: MenuOptionsItemType[],
  123 + allList: MenuOptionsItemType[],
  124 + targetInstance: CreateComponentType
122 ) => { 125 ) => {
123 // 多选处理 126 // 多选处理
124 if (chartEditStore.getTargetChart.selectId.length > 1) { 127 if (chartEditStore.getTargetChart.selectId.length > 1) {
@@ -164,8 +167,8 @@ const rangeStyle = computed(() => { @@ -164,8 +167,8 @@ const rangeStyle = computed(() => {
164 const backgroundColor = background ? background : undefined 167 const backgroundColor = background ? background : undefined
165 168
166 const computedBackground = selectColor 169 const computedBackground = selectColor
167 - ? { background: backgroundColor }  
168 - : { background: `url(${backgroundImage}) no-repeat center center / cover !important` } 170 + ? {background: backgroundColor}
  171 + : {background: `url(${backgroundImage}) no-repeat center center / cover !important`}
169 172
170 // @ts-ignore 173 // @ts-ignore
171 return { 174 return {
@@ -178,6 +181,10 @@ const rangeStyle = computed(() => { @@ -178,6 +181,10 @@ const rangeStyle = computed(() => {
178 // 键盘事件 181 // 键盘事件
179 onMounted(() => { 182 onMounted(() => {
180 useAddKeyboard() 183 useAddKeyboard()
  184 + // 获取数据
  185 + dataSyncFetch()
  186 + // 定时更新数据
  187 + intervalDataSyncUpdate()
181 }) 188 })
182 </script> 189 </script>
183 190
1 -import { getUUID, fetchRouteParamsLocation } from '@/utils'  
2 -import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'  
3 -import { ChartEditStoreEnum, ChartEditStorage } from '@/store/modules/chartEditStore/chartEditStore.d'  
4 -import { useChartHistoryStore } from '@/store/modules/chartHistoryStore/chartHistoryStore'  
5 -import { useChartLayoutStore } from '@/store/modules/chartLayoutStore/chartLayoutStore'  
6 -import { ChartLayoutStoreEnum } from '@/store/modules/chartLayoutStore/chartLayoutStore.d'  
7 -import { fetchChartComponent, fetchConfigComponent, createComponent } from '@/packages/index'  
8 -import { CreateComponentType, CreateComponentGroupType } from '@/packages/index.d'  
9 -import { BaseEvent, EventLife } from '@/enums/eventEnum'  
10 -import { PublicGroupConfigClass } from '@/packages/public/publicConfig' 1 +import {getUUID, fetchRouteParamsLocation, JSONStringify, JSONParse} from '@/utils'
  2 +import {useChartEditStore} from '@/store/modules/chartEditStore/chartEditStore'
  3 +import {
  4 + EditCanvasTypeEnum,
  5 + ChartEditStoreEnum,
  6 + ChartEditStorage,
  7 + ProjectInfoEnum
  8 +} from '@/store/modules/chartEditStore/chartEditStore.d'
  9 +import {useChartHistoryStore} from '@/store/modules/chartHistoryStore/chartHistoryStore'
  10 +import {useChartLayoutStore} from '@/store/modules/chartLayoutStore/chartLayoutStore'
  11 +import {ChartLayoutStoreEnum} from '@/store/modules/chartLayoutStore/chartLayoutStore.d'
  12 +import {fetchChartComponent, fetchConfigComponent, createComponent} from '@/packages/index'
  13 +import {CreateComponentType, CreateComponentGroupType} from '@/packages/index.d'
  14 +import {BaseEvent, EventLife} from '@/enums/eventEnum'
  15 +import {PublicGroupConfigClass} from '@/packages/public/publicConfig'
11 import merge from 'lodash/merge' 16 import merge from 'lodash/merge'
12 -import { onUnmounted } from 'vue'  
13 -import { saveInterval } from '@/settings/designSetting' 17 +import {onUnmounted} from 'vue'
  18 +import {saveInterval} from '@/settings/designSetting'
14 import throttle from 'lodash/throttle' 19 import throttle from 'lodash/throttle'
15 import html2canvas from 'html2canvas' 20 import html2canvas from 'html2canvas'
  21 +import {contentUpdateApi, getDataView, uploadFile} from '@/api/external/contentSave/content'
  22 +// 画布枚举
  23 +import {SyncEnum} from '@/enums/editPageEnum'
16 24
17 /** 25 /**
18 * * 画布-版本升级对旧数据无法兼容的补丁 26 * * 画布-版本升级对旧数据无法兼容的补丁
19 * @param object 27 * @param object
20 */ 28 */
21 const canvasVersionUpdatePolyfill = (object: any) => { 29 const canvasVersionUpdatePolyfill = (object: any) => {
22 - return object 30 + return object
23 } 31 }
24 32
25 /** 33 /**
@@ -28,38 +36,38 @@ const canvasVersionUpdatePolyfill = (object: any) => { @@ -28,38 +36,38 @@ const canvasVersionUpdatePolyfill = (object: any) => {
28 * @param sources 36 * @param sources
29 */ 37 */
30 const componentVersionUpdatePolyfill = (newObject: any, sources: any) => { 38 const componentVersionUpdatePolyfill = (newObject: any, sources: any) => {
31 - try {  
32 - // 判断是否是组件  
33 - if (sources.id) {  
34 - // 处理事件补丁  
35 - const hasVnodeBeforeMount = 'vnodeBeforeMount' in sources.events  
36 - const hasVnodeMounted = 'vnodeMounted' in sources.events 39 + try {
  40 + // 判断是否是组件
  41 + if (sources.id) {
  42 + // 处理事件补丁
  43 + const hasVnodeBeforeMount = 'vnodeBeforeMount' in sources.events
  44 + const hasVnodeMounted = 'vnodeMounted' in sources.events
37 45
38 - if (hasVnodeBeforeMount) {  
39 - newObject.events.advancedEvents.vnodeBeforeMount = sources?.events.vnodeBeforeMount  
40 - }  
41 - if (hasVnodeMounted) {  
42 - newObject.events.advancedEvents.vnodeMounted = sources?.events.vnodeMounted  
43 - }  
44 - if (hasVnodeBeforeMount || hasVnodeMounted) {  
45 - sources.events = {  
46 - baseEvent: {  
47 - [BaseEvent.ON_CLICK]: undefined,  
48 - [BaseEvent.ON_DBL_CLICK]: undefined,  
49 - [BaseEvent.ON_MOUSE_ENTER]: undefined,  
50 - [BaseEvent.ON_MOUSE_LEAVE]: undefined  
51 - },  
52 - advancedEvents: {  
53 - [EventLife.VNODE_MOUNTED]: undefined,  
54 - [EventLife.VNODE_BEFORE_MOUNT]: undefined  
55 - } 46 + if (hasVnodeBeforeMount) {
  47 + newObject.events.advancedEvents.vnodeBeforeMount = sources?.events.vnodeBeforeMount
  48 + }
  49 + if (hasVnodeMounted) {
  50 + newObject.events.advancedEvents.vnodeMounted = sources?.events.vnodeMounted
  51 + }
  52 + if (hasVnodeBeforeMount || hasVnodeMounted) {
  53 + sources.events = {
  54 + baseEvent: {
  55 + [BaseEvent.ON_CLICK]: undefined,
  56 + [BaseEvent.ON_DBL_CLICK]: undefined,
  57 + [BaseEvent.ON_MOUSE_ENTER]: undefined,
  58 + [BaseEvent.ON_MOUSE_LEAVE]: undefined
  59 + },
  60 + advancedEvents: {
  61 + [EventLife.VNODE_MOUNTED]: undefined,
  62 + [EventLife.VNODE_BEFORE_MOUNT]: undefined
  63 + }
  64 + }
  65 + }
  66 + return newObject
56 } 67 }
57 - }  
58 - return newObject 68 + } catch (error) {
  69 + return newObject
59 } 70 }
60 - } catch (error) {  
61 - return newObject  
62 - }  
63 } 71 }
64 72
65 /** 73 /**
@@ -69,211 +77,266 @@ const componentVersionUpdatePolyfill = (newObject: any, sources: any) => { @@ -69,211 +77,266 @@ const componentVersionUpdatePolyfill = (newObject: any, sources: any) => {
69 * @returns object 77 * @returns object
70 */ 78 */
71 const componentMerge = (newObject: any, sources: any, notComponent = false) => { 79 const componentMerge = (newObject: any, sources: any, notComponent = false) => {
72 - // 处理组件补丁  
73 - componentVersionUpdatePolyfill(newObject, sources) 80 + // 处理组件补丁
  81 + componentVersionUpdatePolyfill(newObject, sources)
74 82
75 - // 非组件不处理  
76 - if (notComponent) return merge(newObject, sources)  
77 - // 组件排除 newObject  
78 - const option = sources.option  
79 - if (!option) return merge(newObject, sources) 83 + // 非组件不处理
  84 + if (notComponent) return merge(newObject, sources)
  85 + // 组件排除 newObject
  86 + const option = sources.option
  87 + if (!option) return merge(newObject, sources)
80 88
81 - // 为 undefined 的 sources 来源对象属性将被跳过详见 https://www.lodashjs.com/docs/lodash.merge  
82 - sources.option = undefined  
83 - if (option) {  
84 - return {  
85 - ...merge(newObject, sources),  
86 - option: option 89 + // 为 undefined 的 sources 来源对象属性将被跳过详见 https://www.lodashjs.com/docs/lodash.merge
  90 + sources.option = undefined
  91 + if (option) {
  92 + return {
  93 + ...merge(newObject, sources),
  94 + option: option
  95 + }
87 } 96 }
88 - }  
89 } 97 }
90 98
91 // 请求处理 99 // 请求处理
92 export const useSync = () => { 100 export const useSync = () => {
93 - const chartEditStore = useChartEditStore()  
94 - const chartHistoryStore = useChartHistoryStore()  
95 - const chartLayoutStore = useChartLayoutStore()  
96 - /**  
97 - * * 组件动态注册  
98 - * @param projectData 项目数据  
99 - * @param isReplace 是否替换数据  
100 - * @returns  
101 - */  
102 - const updateComponent = async (projectData: ChartEditStorage, isReplace = false, changeId = false) => {  
103 - if (isReplace) {  
104 - // 清除列表  
105 - chartEditStore.componentList = []  
106 - // 清除历史记录  
107 - chartHistoryStore.clearBackStack()  
108 - chartHistoryStore.clearForwardStack()  
109 - }  
110 - // 画布补丁处理  
111 - projectData.editCanvasConfig = canvasVersionUpdatePolyfill(projectData.editCanvasConfig)  
112 -  
113 - // 列表组件注册  
114 - projectData.componentList.forEach(async (e: CreateComponentType | CreateComponentGroupType) => {  
115 - const intComponent = (target: CreateComponentType) => {  
116 - if (!window['$vue'].component(target.chartConfig.chartKey)) {  
117 - window['$vue'].component(target.chartConfig.chartKey, fetchChartComponent(target.chartConfig))  
118 - window['$vue'].component(target.chartConfig.conKey, fetchConfigComponent(target.chartConfig)) 101 + const chartEditStore = useChartEditStore()
  102 + const chartHistoryStore = useChartHistoryStore()
  103 + const chartLayoutStore = useChartLayoutStore()
  104 + /**
  105 + * * 组件动态注册
  106 + * @param projectData 项目数据
  107 + * @param isReplace 是否替换数据
  108 + * @returns
  109 + */
  110 + const updateComponent = async (projectData: ChartEditStorage, isReplace = false, changeId = false) => {
  111 + if (isReplace) {
  112 + // 清除列表
  113 + chartEditStore.componentList = []
  114 + // 清除历史记录
  115 + chartHistoryStore.clearBackStack()
  116 + chartHistoryStore.clearForwardStack()
119 } 117 }
120 - }  
121 -  
122 - if (e.isGroup) {  
123 - ;(e as CreateComponentGroupType).groupList.forEach(groupItem => {  
124 - intComponent(groupItem)  
125 - })  
126 - } else {  
127 - intComponent(e as CreateComponentType)  
128 - }  
129 - }) 118 + // 画布补丁处理
  119 + projectData.editCanvasConfig = canvasVersionUpdatePolyfill(projectData.editCanvasConfig)
130 120
131 - // 创建函数-重新创建是为了处理类种方法消失的问题  
132 - const create = async (  
133 - _componentInstance: CreateComponentType,  
134 - callBack?: (componentInstance: CreateComponentType) => void  
135 - ) => {  
136 - // 补充 class 上的方法  
137 - let newComponent: CreateComponentType = await createComponent(_componentInstance.chartConfig)  
138 - if (callBack) {  
139 - if (changeId) {  
140 - callBack(componentMerge(newComponent, { ..._componentInstance, id: getUUID() }))  
141 - } else {  
142 - callBack(componentMerge(newComponent, _componentInstance))  
143 - }  
144 - } else {  
145 - if (changeId) {  
146 - chartEditStore.addComponentList(  
147 - componentMerge(newComponent, { ..._componentInstance, id: getUUID() }),  
148 - false,  
149 - true  
150 - )  
151 - } else {  
152 - chartEditStore.addComponentList(componentMerge(newComponent, _componentInstance), false, true)  
153 - }  
154 - }  
155 - } 121 + // 列表组件注册
  122 + projectData.componentList.forEach(async (e: CreateComponentType | CreateComponentGroupType) => {
  123 + const intComponent = (target: CreateComponentType) => {
  124 + if (!window['$vue'].component(target.chartConfig.chartKey)) {
  125 + window['$vue'].component(target.chartConfig.chartKey, fetchChartComponent(target.chartConfig))
  126 + window['$vue'].component(target.chartConfig.conKey, fetchConfigComponent(target.chartConfig))
  127 + }
  128 + }
156 129
157 - // 数据赋值  
158 - for (const key in projectData) {  
159 - // 组件  
160 - if (key === ChartEditStoreEnum.COMPONENT_LIST) {  
161 - let loadIndex = 0  
162 - const listLength = projectData[key].length  
163 - for (const comItem of projectData[key]) {  
164 - // 设置加载数量  
165 - let percentage = parseInt((parseFloat(`${++loadIndex / listLength}`) * 100).toString())  
166 - chartLayoutStore.setItemUnHandle(ChartLayoutStoreEnum.PERCENTAGE, percentage)  
167 - // 判断类型  
168 - if (comItem.isGroup) {  
169 - // 创建分组  
170 - let groupClass = new PublicGroupConfigClass()  
171 - if (changeId) {  
172 - groupClass = componentMerge(groupClass, { ...comItem, id: getUUID() }) 130 + if (e.isGroup) {
  131 + ;(e as CreateComponentGroupType).groupList.forEach(groupItem => {
  132 + intComponent(groupItem)
  133 + })
173 } else { 134 } else {
174 - groupClass = componentMerge(groupClass, comItem) 135 + intComponent(e as CreateComponentType)
175 } 136 }
  137 + })
176 138
177 - // 异步注册子应用  
178 - const targetList: CreateComponentType[] = []  
179 - for (const groupItem of (comItem as CreateComponentGroupType).groupList) {  
180 - await create(groupItem, e => {  
181 - targetList.push(e)  
182 - }) 139 + // 创建函数-重新创建是为了处理类种方法消失的问题
  140 + const create = async (
  141 + _componentInstance: CreateComponentType,
  142 + callBack?: (componentInstance: CreateComponentType) => void
  143 + ) => {
  144 + // 补充 class 上的方法
  145 + let newComponent: CreateComponentType = await createComponent(_componentInstance.chartConfig)
  146 + if (callBack) {
  147 + if (changeId) {
  148 + callBack(componentMerge(newComponent, {..._componentInstance, id: getUUID()}))
  149 + } else {
  150 + callBack(componentMerge(newComponent, _componentInstance))
  151 + }
  152 + } else {
  153 + if (changeId) {
  154 + chartEditStore.addComponentList(
  155 + componentMerge(newComponent, {..._componentInstance, id: getUUID()}),
  156 + false,
  157 + true
  158 + )
  159 + } else {
  160 + chartEditStore.addComponentList(componentMerge(newComponent, _componentInstance), false, true)
  161 + }
183 } 162 }
184 - groupClass.groupList = targetList  
185 -  
186 - // 分组插入到列表  
187 - chartEditStore.addComponentList(groupClass, false, true)  
188 - } else {  
189 - await create(comItem as CreateComponentType)  
190 - }  
191 } 163 }
192 - } else {  
193 - // 非组件(顺便排除脏数据)  
194 - if (key !== 'editCanvasConfig' && key !== 'requestGlobalConfig') return  
195 - componentMerge(chartEditStore[key], projectData[key], true)  
196 - }  
197 - }  
198 164
199 - // 清除数量  
200 - chartLayoutStore.setItemUnHandle(ChartLayoutStoreEnum.PERCENTAGE, 0)  
201 - } 165 + // 数据赋值
  166 + for (const key in projectData) {
  167 + // 组件
  168 + if (key === ChartEditStoreEnum.COMPONENT_LIST) {
  169 + let loadIndex = 0
  170 + const listLength = projectData[key].length
  171 + for (const comItem of projectData[key]) {
  172 + // 设置加载数量
  173 + let percentage = parseInt((parseFloat(`${++loadIndex / listLength}`) * 100).toString())
  174 + chartLayoutStore.setItemUnHandle(ChartLayoutStoreEnum.PERCENTAGE, percentage)
  175 + // 判断类型
  176 + if (comItem.isGroup) {
  177 + // 创建分组
  178 + let groupClass = new PublicGroupConfigClass()
  179 + if (changeId) {
  180 + groupClass = componentMerge(groupClass, {...comItem, id: getUUID()})
  181 + } else {
  182 + groupClass = componentMerge(groupClass, comItem)
  183 + }
202 184
203 - // 数据保存  
204 - const dataSyncUpdate = throttle(async (updateImg = true) => {  
205 - if (!fetchRouteParamsLocation()) return  
206 - window['$message'].success('保存成功！')  
207 - // let projectId = chartEditStore.getProjectInfo[ProjectInfoEnum.PROJECT_ID]  
208 - // if (projectId === null || projectId === '') {  
209 - // window['$message'].error('数据初未始化成功,请刷新页面！')  
210 - // return  
211 - // } 185 + // 异步注册子应用
  186 + const targetList: CreateComponentType[] = []
  187 + for (const groupItem of (comItem as CreateComponentGroupType).groupList) {
  188 + await create(groupItem, e => {
  189 + targetList.push(e)
  190 + })
  191 + }
  192 + groupClass.groupList = targetList
212 193
213 - // chartEditStore.setEditCanvas(EditCanvasTypeEnum.SAVE_STATUS, SyncEnum.START)  
214 -  
215 - // 异常处理：缩略图上传失败不影响JSON的保存  
216 - try {  
217 - if (updateImg) {  
218 - // 获取缩略图片  
219 - const range = document.querySelector('.go-edit-range') as HTMLElement  
220 - // 生成图片  
221 - const canvasImage: HTMLCanvasElement = await html2canvas(range, {  
222 - backgroundColor: null,  
223 - allowTaint: true,  
224 - useCORS: true  
225 - }) 194 + // 分组插入到列表
  195 + chartEditStore.addComponentList(groupClass, false, true)
  196 + } else {
  197 + await create(comItem as CreateComponentType)
  198 + }
  199 + }
  200 + } else {
  201 + // 非组件(顺便排除脏数据)
  202 + if (key !== 'editCanvasConfig' && key !== 'requestGlobalConfig') return
  203 + componentMerge(chartEditStore[key], projectData[key], true)
  204 + }
  205 + }
226 206
227 - // 上传预览图  
228 - // let uploadParams = new FormData()  
229 - // uploadParams.append(  
230 - // 'object',  
231 - // base64toFile(canvasImage.toDataURL(), `${fetchRouteParamsLocation()}_index_preview.png`)  
232 - // )  
233 - // const uploadRes = await uploadFile(uploadParams)  
234 - // 保存预览图  
235 - // if (uploadRes && uploadRes.code === ResultEnum.SUCCESS) {  
236 - // await updateProjectApi({  
237 - // id: fetchRouteParamsLocation(),  
238 - // indexImage: `${systemStore.getFetchInfo.OSSUrl}${uploadRes.data.fileName}`  
239 - // })  
240 - // }  
241 - }  
242 - } catch (e) {  
243 - console.log(e) 207 + // 清除数量
  208 + chartLayoutStore.setItemUnHandle(ChartLayoutStoreEnum.PERCENTAGE, 0)
244 } 209 }
245 210
246 - // 保存数据  
247 - // let params = new FormData()  
248 - // params.append('projectId', projectId)  
249 - // params.append('content', JSONStringify(chartEditStore.getStorageInfo || {}))  
250 - // const res = await saveProjectApi(params) 211 + /**
  212 + * * 赋值全局数据
  213 + * @param projectData 项目数据
  214 + * @returns
  215 + */
  216 + const updateStoreInfo = (projectData: {
  217 + dataViewId: string,
  218 + dataViewName: string,
  219 + indexImage: string,
  220 + id: string,
  221 + state: number,
  222 + dataViewContent: { id: string, content: string, enabled: boolean }
  223 + }) => {
  224 + const {dataViewId, dataViewName, indexImage, state, dataViewContent} = projectData
  225 + // ID
  226 + chartEditStore.setProjectInfo(ProjectInfoEnum.PROJECT_ID, dataViewId)
  227 + // 名称
  228 + chartEditStore.setProjectInfo(ProjectInfoEnum.PROJECT_NAME, dataViewName)
  229 + // 描述
  230 + chartEditStore.setProjectInfo(ProjectInfoEnum.REMARKS, dataViewContent?.id)
  231 + // 缩略图
  232 + chartEditStore.setProjectInfo(ProjectInfoEnum.THUMBNAIL, indexImage)
  233 + // 发布
  234 + chartEditStore.setProjectInfo(ProjectInfoEnum.RELEASE, state === 1)
  235 + }
  236 + // * 数据获取
  237 + const dataSyncFetch = async () => {
  238 + // FIX:重新执行dataSyncFetch需清空chartEditStore.componentList,否则会导致图层重复
  239 + // 切换语言等操作会导致重新执行 dataSyncFetch,此时pinia中并未清空chartEditStore.componentList，导致图层重复
  240 + chartEditStore.componentList = []
  241 + chartEditStore.setEditCanvas(EditCanvasTypeEnum.SAVE_STATUS, SyncEnum.START)
  242 + try {
  243 + const id = fetchRouteParamsLocation()
  244 + const res = await getDataView(id)
  245 + updateStoreInfo(res)
  246 + // 更新全局数据
  247 + await updateComponent(JSONParse(res.dataViewContent.content))
  248 + return
  249 + // else {
  250 + // chartEditStore.setProjectInfo(ProjectInfoEnum.PROJECT_ID, fetchRouteParamsLocation())
  251 + // }
  252 + setTimeout(() => {
  253 + chartEditStore.setEditCanvas(EditCanvasTypeEnum.SAVE_STATUS, SyncEnum.SUCCESS)
  254 + }, 1000)
  255 + return
  256 + // }
  257 + // chartEditStore.setEditCanvas(EditCanvasTypeEnum.SAVE_STATUS, SyncEnum.FAILURE)
  258 + } catch (error) {
  259 + chartEditStore.setEditCanvas(EditCanvasTypeEnum.SAVE_STATUS, SyncEnum.FAILURE)
  260 + // httpErrorHandle()
  261 + }
  262 + }
  263 + // 数据保存
  264 + const dataSyncUpdate = throttle(async (updateImg = true) => {
  265 + if (!fetchRouteParamsLocation()) return
  266 + const projectId = chartEditStore.getProjectInfo[ProjectInfoEnum.PROJECT_ID]
  267 + const id = chartEditStore.getProjectInfo[ProjectInfoEnum.REMARKS]
  268 + const dataViewName = chartEditStore.getProjectInfo[ProjectInfoEnum.PROJECT_NAME]
251 269
252 - // if (res && res.code === ResultEnum.SUCCESS) {  
253 - // // 成功状态  
254 - // setTimeout(() => {  
255 - // chartEditStore.setEditCanvas(EditCanvasTypeEnum.SAVE_STATUS, SyncEnum.SUCCESS)  
256 - // }, 1000)  
257 - // return  
258 - // }  
259 - // 失败状态  
260 - // chartEditStore.setEditCanvas(EditCanvasTypeEnum.SAVE_STATUS, SyncEnum.FAILURE)  
261 - }, 3000)  
262 - // * 定时处理  
263 - const intervalDataSyncUpdate = () => {  
264 - // 定时获取数据  
265 - const syncTiming = setInterval(() => {  
266 - dataSyncUpdate()  
267 - }, saveInterval * 1000) 270 + if (projectId === null || projectId === '') {
  271 + window['$message'].error('数据初未始化成功,请刷新页面！')
  272 + return
  273 + }
  274 + chartEditStore.setEditCanvas(EditCanvasTypeEnum.SAVE_STATUS, SyncEnum.START)
  275 + // 异常处理：缩略图上传失败不影响JSON的保存
  276 + // try {
  277 + // if (updateImg) {
  278 + // // 获取缩略图片
  279 + // const range = document.querySelector('.go-edit-range') as HTMLElement
  280 + // // 生成图片
  281 + // const canvasImage: HTMLCanvasElement = await html2canvas(range, {
  282 + // backgroundColor: null,
  283 + // allowTaint: true,
  284 + // useCORS: true
  285 + // })
  286 + //
  287 + // // 上传预览图
  288 + // const uploadParams = new FormData()
  289 + // uploadParams.append(
  290 + // 'object',
  291 + // base64toFile(canvasImage.toDataURL(), `${fetchRouteParamsLocation()}_index_preview.png`)
  292 + // )
  293 + // const uploadRes = await uploadFile(uploadParams)
  294 + // // 保存预览图
  295 + // if (uploadRes && uploadRes.code === ResultEnum.SUCCESS) {
  296 + // await updateProjectApi({
  297 + // id: fetchRouteParamsLocation(),
  298 + // thumbnail: `${systemStore.getFetchInfo.OSSUrl}${uploadRes.data.fileName}`
  299 + // })
  300 + // }
  301 + // }
  302 + // } catch (e) {
  303 + // console.log(e)
  304 + // }
  305 + // 保存数据
  306 + const saveContent = {
  307 + dataViewContent: {
  308 + id,
  309 + content: JSONStringify(chartEditStore.getStorageInfo || {})
  310 + },
  311 + dataViewName,
  312 + dataViewId: projectId
  313 + }
  314 + const res = await contentUpdateApi(saveContent)
  315 + window['$message'].success('保存成功！')
  316 + // 成功状态
  317 + setTimeout(() => {
  318 + chartEditStore.setEditCanvas(EditCanvasTypeEnum.SAVE_STATUS, SyncEnum.SUCCESS)
  319 + }, 1000)
  320 + return
  321 + // 失败状态
  322 + // chartEditStore.setEditCanvas(EditCanvasTypeEnum.SAVE_STATUS, SyncEnum.FAILURE)
  323 + }, 3000)
  324 + // * 定时处理
  325 + const intervalDataSyncUpdate = () => {
  326 + // 定时获取数据
  327 + const syncTiming = setInterval(() => {
  328 + dataSyncUpdate()
  329 + }, saveInterval * 1000)
268 330
269 - // 销毁  
270 - onUnmounted(() => {  
271 - clearInterval(syncTiming)  
272 - })  
273 - }  
274 - return {  
275 - updateComponent,  
276 - dataSyncUpdate,  
277 - intervalDataSyncUpdate  
278 - } 331 + // 销毁
  332 + onUnmounted(() => {
  333 + clearInterval(syncTiming)
  334 + })
  335 + }
  336 + return {
  337 + updateComponent,
  338 + dataSyncFetch,
  339 + dataSyncUpdate,
  340 + intervalDataSyncUpdate
  341 + }
279 } 342 }
@@ -36,12 +36,17 @@ @@ -36,12 +36,17 @@
36 import { computed, ref, watch } from 'vue' 36 import { computed, ref, watch } from 'vue'
37 import { MonacoEditor } from '@/components/Pages/MonacoEditor' 37 import { MonacoEditor } from '@/components/Pages/MonacoEditor'
38 import { SavePageEnum } from '@/enums/editPageEnum' 38 import { SavePageEnum } from '@/enums/editPageEnum'
39 -import { getSessionStorageInfo } from '../preview/utils' 39 +import { getSessionStorageInfo, } from '../preview/utils'
40 import type { ChartEditStorageType } from '../preview/index.d' 40 import type { ChartEditStorageType } from '../preview/index.d'
41 -import { setSessionStorage, JSONStringify, JSONParse, setTitle } from '@/utils' 41 +import { setSessionStorage, JSONStringify, JSONParse, setTitle,fetchRouteParamsLocation } from '@/utils'
42 import { StorageEnum } from '@/enums/storageEnum' 42 import { StorageEnum } from '@/enums/storageEnum'
43 import { icon } from '@/plugins' 43 import { icon } from '@/plugins'
  44 +import { useSync } from '@/views/chart/hooks/useSync.hook'
  45 +import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
  46 +import { ProjectInfoEnum } from '@/store/modules/chartEditStore/chartEditStore.d'
44 47
  48 +const chartEditStore = useChartEditStore()
  49 +const { dataSyncUpdate } = useSync()
45 const { ChevronBackOutlineIcon, DownloadIcon } = icon.ionicons5 50 const { ChevronBackOutlineIcon, DownloadIcon } = icon.ionicons5
46 const showOpenFilePicker: Function = (window as any).showOpenFilePicker 51 const showOpenFilePicker: Function = (window as any).showOpenFilePicker
47 const content = ref('') 52 const content = ref('')
@@ -94,6 +99,11 @@ async function updateSync() { @@ -94,6 +99,11 @@ async function updateSync() {
94 const detail = JSONParse(content.value) 99 const detail = JSONParse(content.value)
95 delete detail.id 100 delete detail.id
96 // 保持id不变 101 // 保持id不变
  102 + // 带后端版本额外处理请求
  103 + if (dataSyncUpdate) {
  104 + chartEditStore.setProjectInfo(ProjectInfoEnum.PROJECT_ID, fetchRouteParamsLocation())
  105 + await dataSyncUpdate(false) // JSON界面保存不上传缩略图
  106 + }
97 window.opener.dispatchEvent(new CustomEvent(SavePageEnum.JSON, { detail })) 107 window.opener.dispatchEvent(new CustomEvent(SavePageEnum.JSON, { detail }))
98 } catch (e) { 108 } catch (e) {
99 window['$message'].error('内容格式有误') 109 window['$message'].error('内容格式有误')
@@ -27,8 +27,8 @@ @@ -27,8 +27,8 @@
27 </div> 27 </div>
28 <template #action> 28 <template #action>
29 <div class="go-flex-items-center list-footer" justify="space-between"> 29 <div class="go-flex-items-center list-footer" justify="space-between">
30 - <n-text class="go-ellipsis-1" :title="cardData.title">  
31 - {{ cardData.title || '' }} 30 + <n-text class="go-ellipsis-1" :title="cardData.name">
  31 + {{ cardData.name || '' }}
32 </n-text> 32 </n-text>
33 <!-- 工具 --> 33 <!-- 工具 -->
34 <div class="go-flex-items-center list-footer-ri"> 34 <div class="go-flex-items-center list-footer-ri">
@@ -37,12 +37,12 @@ @@ -37,12 +37,12 @@
37 <n-badge 37 <n-badge
38 class="go-animation-twinkle" 38 class="go-animation-twinkle"
39 dot 39 dot
40 - :color="cardData.release ? '#34c749' : '#fcbc40'" 40 + :color="cardData.state===0 ? '#34c749' : '#fcbc40'"
41 ></n-badge> 41 ></n-badge>
42 {{ 42 {{
43 - cardData.release  
44 - ? $t('project.release')  
45 - : $t('project.unreleased') 43 + cardData.state===0
  44 + ?'未发布'
  45 + : '已发布'
46 }} 46 }}
47 </n-text> 47 </n-text>
48 48
1 import { ref } from 'vue' 1 import { ref } from 'vue'
2 import { goDialog } from '@/utils' 2 import { goDialog } from '@/utils'
3 import { DialogEnum } from '@/enums/pluginEnum' 3 import { DialogEnum } from '@/enums/pluginEnum'
4 -import { ChartList } from '../../..' 4 +// import { ChartList } from '../../../index.d'
5 // 数据初始化 5 // 数据初始化
6 export const useDataListInit = () => { 6 export const useDataListInit = () => {
7 - const list = ref<ChartList>([  
8 - {  
9 - id: 1,  
10 - title: '物料1-假数据不可用',  
11 - release: true,  
12 - label: '官方案例'  
13 - },  
14 - {  
15 - id: 2,  
16 - title: '物料2-假数据不可用',  
17 - release: false,  
18 - label: '官方案例'  
19 - },  
20 - {  
21 - id: 3,  
22 - title: '物料3-假数据不可用',  
23 - release: false,  
24 - label: '官方案例'  
25 - },  
26 - {  
27 - id: 4,  
28 - title: '物料4-假数据不可用',  
29 - release: false,  
30 - label: '官方案例'  
31 - },  
32 - {  
33 - id: 5,  
34 - title: '物料5-假数据不可用',  
35 - release: false,  
36 - label: '官方案例'  
37 - }  
38 - ]) 7 + // const list = ref<ChartList>([
  8 + // {
  9 + // id: 'b6fab428-80d3-42aa-992c-bc7da5f52489',
  10 + // title: '物料1-假数据不可用',
  11 + // release: true,
  12 + // label: '官方案例'
  13 + // },
  14 + // {
  15 + // id: '9c5e3ace-dd8f-4334-9c7e-607d9f74755c',
  16 + // title: '物料2-假数据不可用',
  17 + // release: false,
  18 + // label: '官方案例'
  19 + // },
  20 + // {
  21 + // id: '427a06cf-ddd5-4239-bf96-3d97ab5bf814',
  22 + // title: '物料3-假数据不可用',
  23 + // release: false,
  24 + // label: '官方案例'
  25 + // },
  26 + // {
  27 + // id: 4,
  28 + // title: '物料4-假数据不可用',
  29 + // release: false,
  30 + // label: '官方案例'
  31 + // },
  32 + // {
  33 + // id: 5,
  34 + // title: '物料5-假数据不可用',
  35 + // release: false,
  36 + // label: '官方案例'
  37 + // }
  38 + // ])
39 39
40 // 删除 40 // 删除
41 const deleteHandle = (cardData: object, index: number) => { 41 const deleteHandle = (cardData: object, index: number) => {
42 - goDialog({  
43 - type: DialogEnum.DELETE,  
44 - promise: true,  
45 - onPositiveCallback: () =>  
46 - new Promise(res => setTimeout(() => res(1), 1000)),  
47 - promiseResCallback: (e: any) => {  
48 - window.$message.success('删除成功')  
49 - list.value.splice(index, 1)  
50 - }  
51 - }) 42 + // goDialog({
  43 + // type: DialogEnum.DELETE,
  44 + // promise: true,
  45 + // onPositiveCallback: () =>
  46 + // new Promise(res => setTimeout(() => res(1), 1000)),
  47 + // promiseResCallback: (e: any) => {
  48 + // window.$message.success('删除成功')
  49 + // list.value.splice(index, 1)
  50 + // }
  51 + // })
52 } 52 }
53 53
54 return { 54 return {
55 - list, 55 + // list,
56 deleteHandle 56 deleteHandle
57 } 57 }
58 } 58 }
1 <template> 1 <template>
2 <div class="go-items-list"> 2 <div class="go-items-list">
3 <n-grid 3 <n-grid
4 - :x-gap="20"  
5 - :y-gap="20"  
6 - cols="2 s:2 m:3 l:4 xl:4 xxl:4"  
7 - responsive="screen" 4 + :x-gap="20"
  5 + :y-gap="20"
  6 + cols="2 s:2 m:3 l:4 xl:4 xxl:4"
  7 + responsive="screen"
8 > 8 >
9 <n-grid-item v-for="(item, index) in list" :key="item.id"> 9 <n-grid-item v-for="(item, index) in list" :key="item.id">
10 <project-items-card 10 <project-items-card
11 - :cardData="item"  
12 - @resize="resizeHandle"  
13 - @delete="deleteHandle($event, index)"  
14 - @edit="editHandle" 11 + :cardData="item"
  12 + @resize="resizeHandle"
  13 + @delete="deleteHandle($event, index)"
  14 + @edit="editHandle"
15 ></project-items-card> 15 ></project-items-card>
16 </n-grid-item> 16 </n-grid-item>
17 </n-grid> 17 </n-grid>
18 <div class="list-pagination"> 18 <div class="list-pagination">
19 <n-pagination 19 <n-pagination
20 - :item-count="10"  
21 - :page-sizes="[10, 20, 30, 40]"  
22 - show-size-picker 20 + :item-count="10"
  21 + :page-sizes="[10, 20, 30, 40]"
  22 + show-size-picker
23 /> 23 />
24 </div> 24 </div>
25 </div> 25 </div>
26 <project-items-modal-card 26 <project-items-modal-card
27 - v-if="modalData"  
28 - :modalShow="modalShow"  
29 - :cardData="modalData"  
30 - @close="closeModal"  
31 - @edit="editHandle" 27 + v-if="modalData"
  28 + :modalShow="modalShow"
  29 + :cardData="modalData"
  30 + @close="closeModal"
  31 + @edit="editHandle"
32 ></project-items-modal-card> 32 ></project-items-modal-card>
33 </template> 33 </template>
34 34
35 <script setup lang="ts"> 35 <script setup lang="ts">
36 -import { ProjectItemsCard } from '../ProjectItemsCard/index'  
37 -import { ProjectItemsModalCard } from '../ProjectItemsModalCard/index'  
38 -import { icon } from '@/plugins'  
39 -import { useModalDataInit } from './hooks/useModal.hook'  
40 -import { useDataListInit } from './hooks/useData.hook' 36 +import {ProjectItemsCard} from '../ProjectItemsCard/index'
  37 +import {ProjectItemsModalCard} from '../ProjectItemsModalCard/index'
  38 +import {icon} from '@/plugins'
  39 +import {useModalDataInit} from './hooks/useModal.hook'
  40 +import {useDataListInit} from './hooks/useData.hook'
  41 +import {getDataViewList} from "@/api/external/contentSave/content";
  42 +import {onMounted, ref} from "vue";
  43 +import {ChartList} from '../../index.d'
  44 +
  45 +const {CopyIcon, EllipsisHorizontalCircleSharpIcon} = icon.ionicons5
  46 +const {deleteHandle} = useDataListInit()
  47 +const {modalData, modalShow, closeModal, resizeHandle, editHandle} = useModalDataInit()
  48 +
  49 +
  50 +const list = ref<ChartList>([])
  51 +onMounted(async () => {
  52 + const {items} = await getDataViewList({page: 1, pageSize: 10})
  53 + list.value = items
  54 +})
41 55
42 -const { CopyIcon, EllipsisHorizontalCircleSharpIcon } = icon.ionicons5  
43 -const { list, deleteHandle } = useDataListInit()  
44 -const { modalData, modalShow, closeModal, resizeHandle, editHandle } = useModalDataInit()  
45 </script> 56 </script>
46 57
47 <style lang="scss" scoped> 58 <style lang="scss" scoped>
1 export type Chartype = { 1 export type Chartype = {
2 id: number | string 2 id: number | string
3 - title: string // 标题  
4 - label: string // 标签  
5 - release: boolean // 0未发布 | 1已发布 3 + title?: string // 标题
  4 + label:? string // 标签
  5 + release?: boolean // 0未发布 | 1已发布
  6 + name: string // 0未发布 | 1已发布
  7 + state: number // 0未发布 | 1已发布
6 } 8 }
7 9
8 -export type ChartList = Chartype[]  
  10 +export type ChartList = Chartype[]