简柏林 / 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 2 import {
3 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 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 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 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 30 export interface RoleInfo {
30   - roleName: string;
31   - value: string;
  31 + roleName: string;
  32 + value: string;
32 33 }
33 34
34 35 /**
35 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 82 ALT_SOURCE_KEY = '⌥',
83 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 4 import cloneDeep from 'lodash/cloneDeep'
5 5
6 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 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 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 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 48 </template>
68 49
69 50 <script setup lang="ts">
70   -import {PropType, ref} from 'vue'
  51 +import {PropType} from 'vue'
71 52 import {option} from './config'
72 53 import {
73 54 CollapseItem,
74 55 SettingItemBox,
75 56 SettingItem
76 57 } from '@/components/Pages/ChartItemSetting'
77   -import {SelectOption} from "naive-ui";
78 58
79 59 const props = defineProps({
80 60 optionData: {
... ... @@ -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 67 </script>
... ...
1 1 import {ConfigType, PackagesCategoryEnum, ChartFrameEnum} from '@/packages/index.d'
2 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 9 category: ChatCategoryEnum.HEADCOMBINATION,
10 10 categoryName: ChatCategoryEnumName.HEADCOMBINATION,
11 11 package: PackagesCategoryEnum.COMPOSES,
... ...
1 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 4 :cols="3" layout-shift-disabled>
5 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 30 </n-grid-item>
9 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 33 </n-grid-item>
16 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 59 </n-grid-item>
22 60 </n-grid>
23 61 </div>
24 62 </template>
25 63 <script setup lang="ts">
26   -import {PropType, toRefs, shallowReactive, watch, onMounted, onUnmounted, ref} from 'vue'
  64 +import {PropType, toRefs} from 'vue'
27 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 67 const props = defineProps({
33 68 chartConfig: {
... ... @@ -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 93 </style>
... ...
1 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 2 import { DecorateList } from '@/packages/components/Decorates/index'
3 3 import { InformationList } from '@/packages/components/Informations/index'
4 4 import { TableList } from '@/packages/components/Tables/index'
5   -import { ArtoonsList } from '@/packages/components/Artoons/index'
6 5 import { ComposesList } from '@/packages/components/Composes/index'
7 6 import { PackagesCategoryEnum, PackagesType, ConfigType, FetchComFlagType } from '@/packages/index.d'
8 7
... ... @@ -16,7 +15,6 @@ export let packagesList: PackagesType = {
16 15 [PackagesCategoryEnum.INFORMATIONS]: InformationList,
17 16 [PackagesCategoryEnum.TABLES]: TableList,
18 17 [PackagesCategoryEnum.DECORATES]: DecorateList,
19   - [PackagesCategoryEnum.ARTOONS]: ArtoonsList,
20 18 [PackagesCategoryEnum.COMPOSES]: ComposesList,
21 19 }
22 20
... ...
... ... @@ -74,4 +74,4 @@ export const canvasModelIndex = 9999
74 74 export const selectBoxIndex = canvasModelIndex + 10
75 75
76 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 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 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 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 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 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 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 130 // eslint-disable-next-line no-redeclare
103 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 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 151 export type TargetChartType = {
124   - hoverId?: string
125   - selectId: string[]
  152 + hoverId?: string
  153 + selectId: string[]
126 154 }
127 155
128 156 // 数据记录
129 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 162 // Store 枚举
135 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 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 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 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 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 225 // Store 类型
196 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 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 18 import { MenuEnum } from '@/enums/editPageEnum'
19 19 import { getUUID, loadingStart, loadingFinish, loadingError, isString, isArray } from '@/utils'
20 20 import {
  21 + ProjectInfoType,
21 22 ChartEditStoreEnum,
22 23 ChartEditStorage,
23 24 ChartEditStoreType,
... ... @@ -36,6 +37,14 @@ const settingStore = useSettingStore()
36 37 export const useChartEditStore = defineStore({
37 38 id: 'useChartEditStore',
38 39 state: (): ChartEditStoreType => ({
  40 + // 项目数据
  41 + projectInfo: {
  42 + projectId: '',
  43 + projectName: '',
  44 + remarks: '',
  45 + thumbnail: '',
  46 + release: false
  47 + },
39 48 // 画布属性
40 49 editCanvas: {
41 50 // 编辑区域 Dom
... ... @@ -134,6 +143,9 @@ export const useChartEditStore = defineStore({
134 143 componentList: []
135 144 }),
136 145 getters: {
  146 + getProjectInfo(): ProjectInfoType {
  147 + return this.projectInfo
  148 + },
137 149 getMousePosition(): MousePositionType {
138 150 return this.mousePosition
139 151 },
... ... @@ -168,6 +180,10 @@ export const useChartEditStore = defineStore({
168 180 }
169 181 },
170 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 187 // * 设置 editCanvas 数据项
172 188 setEditCanvas<T extends keyof EditCanvasType, K extends EditCanvasType[T]>(key: T, value: K) {
173 189 this.editCanvas[key] = value
... ... @@ -506,7 +522,7 @@ export const useChartEditStore = defineStore({
506 522 item.id = getUUID()
507 523 })
508 524 }
509   -
  525 +
510 526 return e
511 527 }
512 528 const isCut = recordCharts.type === HistoryActionTypeEnum.CUT
... ...
1 1 <template>
2 2 <!-- <edit-rule></edit-rule> -->
3 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 16 <edit-rule>
17 17 <!-- 画布主体 -->
... ... @@ -20,7 +20,7 @@
20 20 <edit-range>
21 21 <!-- 滤镜预览 -->
22 22 <div
23   - :style="{
  23 + :style="{
24 24 ...getFilterStyle(chartEditStore.getEditCanvasConfig),
25 25 ...rangeStyle
26 26 }"
... ... @@ -29,35 +29,35 @@
29 29 <div v-for="(item, index) in chartEditStore.getComponentList" :key="item.id">
30 30 <!-- 分组 -->
31 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 35 ></edit-group>
36 36
37 37 <!-- 单组件 -->
38 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 43 ...useComponentStyle(item.attr, index),
44 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 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 61 ...useSizeStyle(item.attr),
62 62 ...getFilterStyle(item.styles),
63 63 ...getTransformStyle(item.styles)
... ... @@ -83,42 +83,45 @@
83 83 </template>
84 84
85 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 109 const chartEditStore = useChartEditStore()
109   -const { handleContextMenu } = useContextMenu()
  110 +const {handleContextMenu} = useContextMenu()
  111 +const {dataSyncFetch, intervalDataSyncUpdate} = useSync()
  112 +
110 113
111 114 // 布局处理
112 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 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 127 if (chartEditStore.getTargetChart.selectId.length > 1) {
... ... @@ -164,8 +167,8 @@ const rangeStyle = computed(() => {
164 167 const backgroundColor = background ? background : undefined
165 168
166 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 173 // @ts-ignore
171 174 return {
... ... @@ -178,6 +181,10 @@ const rangeStyle = computed(() => {
178 181 // 键盘事件
179 182 onMounted(() => {
180 183 useAddKeyboard()
  184 + // 获取数据
  185 + dataSyncFetch()
  186 + // 定时更新数据
  187 + intervalDataSyncUpdate()
181 188 })
182 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 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 19 import throttle from 'lodash/throttle'
15 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 27 * @param object
20 28 */
21 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 36 * @param sources
29 37 */
30 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 77 * @returns object
70 78 */
71 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 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 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 36 import { computed, ref, watch } from 'vue'
37 37 import { MonacoEditor } from '@/components/Pages/MonacoEditor'
38 38 import { SavePageEnum } from '@/enums/editPageEnum'
39   -import { getSessionStorageInfo } from '../preview/utils'
  39 +import { getSessionStorageInfo, } from '../preview/utils'
40 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 42 import { StorageEnum } from '@/enums/storageEnum'
43 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 50 const { ChevronBackOutlineIcon, DownloadIcon } = icon.ionicons5
46 51 const showOpenFilePicker: Function = (window as any).showOpenFilePicker
47 52 const content = ref('')
... ... @@ -94,6 +99,11 @@ async function updateSync() {
94 99 const detail = JSONParse(content.value)
95 100 delete detail.id
96 101 // 保持id不变
  102 + // 带后端版本额外处理请求
  103 + if (dataSyncUpdate) {
  104 + chartEditStore.setProjectInfo(ProjectInfoEnum.PROJECT_ID, fetchRouteParamsLocation())
  105 + await dataSyncUpdate(false) // JSON界面保存不上传缩略图
  106 + }
97 107 window.opener.dispatchEvent(new CustomEvent(SavePageEnum.JSON, { detail }))
98 108 } catch (e) {
99 109 window['$message'].error('内容格式有误')
... ...
... ... @@ -27,8 +27,8 @@
27 27 </div>
28 28 <template #action>
29 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 32 </n-text>
33 33 <!-- 工具 -->
34 34 <div class="go-flex-items-center list-footer-ri">
... ... @@ -37,12 +37,12 @@
37 37 <n-badge
38 38 class="go-animation-twinkle"
39 39 dot
40   - :color="cardData.release ? '#34c749' : '#fcbc40'"
  40 + :color="cardData.state===0 ? '#34c749' : '#fcbc40'"
41 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 47 </n-text>
48 48
... ...
1 1 import { ref } from 'vue'
2 2 import { goDialog } from '@/utils'
3 3 import { DialogEnum } from '@/enums/pluginEnum'
4   -import { ChartList } from '../../..'
  4 +// import { ChartList } from '../../../index.d'
5 5 // 数据初始化
6 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 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 54 return {
55   - list,
  55 + // list,
56 56 deleteHandle
57 57 }
58 58 }
... ...
1 1 <template>
2 2 <div class="go-items-list">
3 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 9 <n-grid-item v-for="(item, index) in list" :key="item.id">
10 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 15 ></project-items-card>
16 16 </n-grid-item>
17 17 </n-grid>
18 18 <div class="list-pagination">
19 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 24 </div>
25 25 </div>
26 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 32 ></project-items-modal-card>
33 33 </template>
34 34
35 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 56 </script>
46 57
47 58 <style lang="scss" scoped>
... ...
1 1 export type Chartype = {
2 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[]
\ No newline at end of file
  10 +export type ChartList = Chartype[]
... ...