简柏林 / thingskit-view · Commits

Commit 2c490cbf938d58a7a3245e41debc727620624fe8

Authored by xp.Huang
2 parents 3943d4c3 9903f9a4

Merge branch 'main_dev' into 'main' 

feat: 分页画布、组件优化及bug修复

See merge request yunteng/thingskit-view!165
Inline Side-by-side
Showing 66 changed files with 1482 additions and 400 deletions
@@ -28,8 +28,6 @@ module.exports = { @@ -28,8 +28,6 @@ module.exports = {
28 rules: { 28 rules: {
29 'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off', 29 'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
30 'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off', 30 'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
31 - 'no-unused-vars': 'off',  
32 - 'vue/no-unused-vars': 'off',  
33 'vue/multi-word-component-names': 'off', 31 'vue/multi-word-component-names': 'off',
34 'vue/valid-template-root': 'off', 32 'vue/valid-template-root': 'off',
35 'vue/no-mutating-props': 'off' 33 'vue/no-mutating-props': 'off'
@@ -84,3 +84,15 @@ export enum MacKeyboard { @@ -84,3 +84,15 @@ export enum MacKeyboard {
84 ALT_SOURCE_KEY = '⌥', 84 ALT_SOURCE_KEY = '⌥',
85 SPACE = 'Space' 85 SPACE = 'Space'
86 } 86 }
  87 +
  88 +// 同步状态枚举
  89 +export enum SyncEnum {
  90 + // 等待
  91 + PENDING,
  92 + // 开始
  93 + START,
  94 + // 成功
  95 + SUCCESS,
  96 + // 失败
  97 + FAILURE
  98 +}
@@ -20,7 +20,8 @@ export enum InteractEvents { @@ -20,7 +20,8 @@ export enum InteractEvents {
20 // 全局组件交互回调事件触发的类型（当然可以自定义名称） 20 // 全局组件交互回调事件触发的类型（当然可以自定义名称）
21 export enum InteractEventOn { 21 export enum InteractEventOn {
22 CLICK = 'click', 22 CLICK = 'click',
23 - CHANGE = 'change' 23 + CHANGE = 'change',
  24 + PAGE_CHANGE = 'page_change' // THINGS_KIT 修改多画布切换相关代码 用于切换画布
24 } 25 }
25 26
26 // 确定交互组件触发类型 key名称 27 // 确定交互组件触发类型 key名称
  1 +export enum PageOperateEnum {
  2 + PAGE_OPERATE_REMOVE = 'pageOperateRemove',
  3 + PAGE_OPERATE_COPY = 'pageOperateCopy',
  4 + PAGE_OPERATE_RENAME = 'pageOperateRename'
  5 +}
  6 +
  7 +export enum PageOperateNameEnum {
  8 + PAGE_OPERATE_REMOVE = '删除',
  9 + PAGE_OPERATE_COPY = '复制',
  10 + PAGE_OPERATE_RENAME = '重命名'
  11 +}
@@ -23,7 +23,7 @@ export const useChartInteract = ( @@ -23,7 +23,7 @@ export const useChartInteract = (
23 fnOnEvent.forEach(item => { 23 fnOnEvent.forEach(item => {
24 const index = chartEditStore.fetchTargetIndex(item.interactComponentId) 24 const index = chartEditStore.fetchTargetIndex(item.interactComponentId)
25 if (index === -1) return 25 if (index === -1) return
26 - const { Params, Header } = toRefs(chartEditStore.componentList[index].request.requestParams) 26 + const { Params, Header } = toRefs(chartEditStore.getComponentList[index].request.requestParams)
27 Object.keys(item.interactFn).forEach(key => { 27 Object.keys(item.interactFn).forEach(key => {
28 if (Params.value[key]) { 28 if (Params.value[key]) {
29 Params.value[key] = param[item.interactFn[key]] 29 Params.value[key] = param[item.interactFn[key]]
@@ -42,7 +42,7 @@ export const useChartInteract = ( @@ -42,7 +42,7 @@ export const useChartInteract = (
42 * 在遍历图表数组，只要是目标项并且是联动组件则显示，否则隐藏 42 * 在遍历图表数组，只要是目标项并且是联动组件则显示，否则隐藏
43 */ 43 */
44 try { 44 try {
45 - chartEditStore.componentList.forEach((item: any) => { 45 + chartEditStore.getComponentList.forEach((item: any) => {
46 if (item.key !== 'Button') { 46 if (item.key !== 'Button') {
47 if (selectTargetItems.includes(item.id)) { 47 if (selectTargetItems.includes(item.id)) {
48 item.isInteractComponent = true 48 item.isInteractComponent = true
@@ -50,9 +50,9 @@ export const useChartInteract = ( @@ -50,9 +50,9 @@ export const useChartInteract = (
50 } 50 }
51 }) 51 })
52 //优化循环性能 52 //优化循环性能
53 - for (let i = 0, len = chartEditStore.componentList.length; i < len; i++) {  
54 - const compId = chartEditStore.componentList[i].id  
55 - const compItem = chartEditStore.componentList[i] as any 53 + for (let i = 0, len = chartEditStore.getComponentList.length; i < len; i++) {
  54 + const compId = chartEditStore.getComponentList[i].id
  55 + const compItem = chartEditStore.getComponentList[i] as any
56 if (status) { 56 if (status) {
57 if (compItem.key !== 'Button') { 57 if (compItem.key !== 'Button') {
58 if (selectTargetItems.includes(compId) && compItem.isInteractComponent) { 58 if (selectTargetItems.includes(compId) && compItem.isInteractComponent) {
  1 +import { toRefs } from 'vue'
  2 +import { CreateComponentType } from '@/packages/index.d'
  3 +import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
  4 +import { PageChartEditStoreType } from '@/store/modules/chartEditStore/chartEditStore.d'
  5 +// import { useChartDataSocket } from '@/hooks/external/useChartDataSocket'
  6 +
  7 +// 获取类型
  8 +type ChartEditStoreType = typeof useChartEditStore
  9 +
  10 +// Params 参数修改触发 api 更新图表请求
  11 +export const useChartInteract = (
  12 + chartConfig: CreateComponentType,
  13 + useChartEditStore: ChartEditStoreType,
  14 + param: { [T: string]: any },
  15 + interactEventOn: string,
  16 +) => {
  17 + const chartEditStore = useChartEditStore()
  18 + const { data } = param
  19 + const { pageList } = data
  20 + const { interactEvents } = chartConfig.events
  21 + const fnOnEvent = interactEvents.filter(item => {
  22 + return item.interactOn === interactEventOn
  23 + })
  24 + if (fnOnEvent.length === 0) return
  25 + fnOnEvent.forEach(item => {
  26 + const { interactComponentId } = item
  27 + const findNextPageId = pageList.find((pageItem:PageChartEditStoreType) => pageItem.id===interactComponentId)?.id
  28 + if(!findNextPageId) return
  29 + // const { initial } = useChartDataSocket()
  30 + chartEditStore.setCurrentPageSelectId(findNextPageId)
  31 + // chartEditStore.pageConfig.pageList.forEach((pageItem:PageChartEditStoreType)=>{
  32 + // pageItem.componentList.forEach((compItem)=>{
  33 + // initial(compItem, useChartEditStore)
  34 + // })
  35 + // })
  36 + // chartEditStore.setPageConfig(chartEditStore.pageConfig)
  37 + // const index = chartEditStore.fetchTargetIndex(item.interactComponentId)
  38 + // console.log(index)
  39 + // if (index === -1) return
  40 + // console.log(chartEditStore.getComponentList)
  41 + // const { Params, Header } = toRefs(chartEditStore.getComponentList[index].request.requestParams)
  42 + // Object.keys(item.interactFn).forEach(key => {
  43 + // if (Params.value[key]) {
  44 + // Params.value[key] = param[item.interactFn[key]]
  45 + // }
  46 + // if (Header.value[key]) {
  47 + // Header.value[key] = param[item.interactFn[key]]
  48 + // }
  49 + // })
  50 + })
  51 +}
  52 +
  53 +// 联动事件触发的 type 变更时，清除当前绑定内容
  54 +// eslint-disable-next-line @typescript-eslint/no-empty-function
  55 +export const clearInteractEvent = (chartConfig: CreateComponentType) => {}
@@ -116,7 +116,7 @@ export const useChartDataFetch = ( @@ -116,7 +116,7 @@ export const useChartDataFetch = (
116 * 支持分组也可以接受ws 116 * 支持分组也可以接受ws
117 * 如果是分组并且绑定了ws 117 * 如果是分组并且绑定了ws
118 */ 118 */
119 - chartEditStore.componentList.forEach((item:CreateComponentType | CreateComponentGroupType)=>{ 119 + chartEditStore.getComponentList?.forEach((item:CreateComponentType | CreateComponentGroupType)=>{
120 if(item.isGroup){ 120 if(item.isGroup){
121 if(item.request.requestUrl?.includes('ws')){ 121 if(item.request.requestUrl?.includes('ws')){
122 initial(item, useChartEditStore, updateCallback) 122 initial(item, useChartEditStore, updateCallback)
@@ -4,25 +4,18 @@ import { useSocketStore } from "@/store/external/modules/socketStore"; @@ -4,25 +4,18 @@ import { useSocketStore } from "@/store/external/modules/socketStore";
4 import { SocketReceiveMessageType, SocketSendMessageType } from "@/store/external/modules/socketStore.d"; 4 import { SocketReceiveMessageType, SocketSendMessageType } from "@/store/external/modules/socketStore.d";
5 import { useChartEditStore } from "@/store/modules/chartEditStore/chartEditStore"; 5 import { useChartEditStore } from "@/store/modules/chartEditStore/chartEditStore";
6 import { getJwtToken, getShareJwtToken } from "@/utils/external/auth"; 6 import { getJwtToken, getShareJwtToken } from "@/utils/external/auth";
7 -import { useWebSocket, WebSocketResult } from "@vueuse/core"; 7 +import { useWebSocket } from "@vueuse/core";
8 import { onMounted, ref, unref } from "vue"; 8 import { onMounted, ref, unref } from "vue";
9 import { ExtraRequestConfigType } from "@/store/external/modules/extraComponentInfo.d"; 9 import { ExtraRequestConfigType } from "@/store/external/modules/extraComponentInfo.d";
10 import { isShareMode } from "@/views/share/hook"; 10 import { isShareMode } from "@/views/share/hook";
11 11
12 12
13 13
14 -interface SocketConnectionPoolType {  
15 - ws: WebSocketResult<SocketReceiveMessageType>  
16 - url: string  
17 -}  
18 -  
19 interface SaveHistoryWsMessage { 14 interface SaveHistoryWsMessage {
20 id: string 15 id: string
21 message: SocketSendMessageType 16 message: SocketSendMessageType
22 } 17 }
23 18
24 -const socketConnectionPool: SocketConnectionPoolType[] = []  
25 -  
26 const saveHistoryWsMessage = ref([] as SaveHistoryWsMessage[]) 19 const saveHistoryWsMessage = ref([] as SaveHistoryWsMessage[])
27 20
28 const parse = (value: string) => { 21 const parse = (value: string) => {
@@ -43,11 +36,7 @@ const getOriginUrl = (url: string) => { @@ -43,11 +36,7 @@ const getOriginUrl = (url: string) => {
43 const getSocketInstance = (request: ExtraRequestConfigType) => { 36 const getSocketInstance = (request: ExtraRequestConfigType) => {
44 const { requestUrl, requestOriginUrl } = request 37 const { requestUrl, requestOriginUrl } = request
45 const socketStore = useSocketStore() 38 const socketStore = useSocketStore()
46 - const index = socketConnectionPool.findIndex(item => item.url === requestUrl)  
47 -  
48 - if (~index) {  
49 - return socketConnectionPool[index].ws  
50 - } 39 +
51 const token = isShareMode() ? getShareJwtToken() : getJwtToken() 40 const token = isShareMode() ? getShareJwtToken() : getJwtToken()
52 const socketUrl = `${getOriginUrl(requestOriginUrl || '')}${requestUrl}?token=${token}` 41 const socketUrl = `${getOriginUrl(requestOriginUrl || '')}${requestUrl}?token=${token}`
53 42
@@ -63,8 +52,6 @@ const getSocketInstance = (request: ExtraRequestConfigType) => { @@ -63,8 +52,6 @@ const getSocketInstance = (request: ExtraRequestConfigType) => {
63 } 52 }
64 }) 53 })
65 54
66 - socketConnectionPool.push({ url: requestUrl!, ws: instance })  
67 -  
68 return instance 55 return instance
69 } 56 }
70 57
@@ -125,8 +112,8 @@ export const useChartDataSocket = () => { @@ -125,8 +112,8 @@ export const useChartDataSocket = () => {
125 }) 112 })
126 } catch (e) { 113 } catch (e) {
127 console.log(` 114 console.log(`
128 - 错误位置：src/hooks/external/useChartDataSocket.ts  
129 - 错误原因：${e} 115 + 错误位置: useChartDataSocket.ts
  116 + 错误原因: ${e}
130 `) 117 `)
131 } 118 }
132 } 119 }
@@ -34,7 +34,7 @@ export const useChartInteract = ( @@ -34,7 +34,7 @@ export const useChartInteract = (
34 fnOnEvent.forEach((item, itemIndex) => { 34 fnOnEvent.forEach((item, itemIndex) => {
35 const index = chartEditStore.fetchTargetIndex(item.interactComponentId) 35 const index = chartEditStore.fetchTargetIndex(item.interactComponentId)
36 if (index === -1) return 36 if (index === -1) return
37 - const { Params, Header } = toRefs(chartEditStore.componentList[index].request.requestParams) 37 + const { Params, Header } = toRefs(chartEditStore.getComponentList[index].request.requestParams)
38 Object.keys(item.interactFn).forEach(key => { 38 Object.keys(item.interactFn).forEach(key => {
39 if (Params.value[key]) { 39 if (Params.value[key]) {
40 Params.value[key] = param[item.interactFn[key]] 40 Params.value[key] = param[item.interactFn[key]]
@@ -47,7 +47,7 @@ export const useChartInteract = ( @@ -47,7 +47,7 @@ export const useChartInteract = (
47 if (!Array.isArray(dataset)) return 47 if (!Array.isArray(dataset)) return
48 dataset.forEach((combinItem: any, combinIndex: number) => { 48 dataset.forEach((combinItem: any, combinIndex: number) => {
49 if (itemIndex === combinIndex) { 49 if (itemIndex === combinIndex) {
50 - combinItem.targetItem = chartEditStore.componentList[index] 50 + combinItem.targetItem = chartEditStore.getComponentList[index]
51 } 51 }
52 }) 52 })
53 /**新增代码 */ 53 /**新增代码 */
@@ -109,15 +109,16 @@ export const useChartDataPondFetch = () => { @@ -109,15 +109,16 @@ export const useChartDataPondFetch = () => {
109 109
110 // 初始化数据池 110 // 初始化数据池
111 const initDataPond = (useChartEditStore: ChartEditStoreType) => { 111 const initDataPond = (useChartEditStore: ChartEditStoreType) => {
112 - const { requestGlobalConfig } = useChartEditStore() 112 + // const { requestGlobalConfig } = useChartEditStore()
  113 + const { getRequestGlobalConfig } = useChartEditStore()
113 const chartEditStore = useChartEditStore() 114 const chartEditStore = useChartEditStore()
114 // 根据 mapId 查找对应的数据池配置 115 // 根据 mapId 查找对应的数据池配置
115 for (let pondKey of mittDataPondMap.keys()) { 116 for (let pondKey of mittDataPondMap.keys()) {
116 const requestDataPondItem = computed(() => { 117 const requestDataPondItem = computed(() => {
117 - return requestGlobalConfig.requestDataPond.find(item => item.dataPondId === pondKey) 118 + return getRequestGlobalConfig.requestDataPond.find(item => item.dataPondId === pondKey)
118 }) as ComputedRef<RequestDataPondItemType> 119 }) as ComputedRef<RequestDataPondItemType>
119 if (requestDataPondItem) { 120 if (requestDataPondItem) {
120 - newPondItemInterval(chartEditStore.requestGlobalConfig, requestDataPondItem, mittDataPondMap.get(pondKey)) 121 + newPondItemInterval(chartEditStore.getRequestGlobalConfig, requestDataPondItem, mittDataPondMap.get(pondKey))
121 } 122 }
122 } 123 }
123 } 124 }
@@ -23,11 +23,11 @@ export const useChartInteract = ( @@ -23,11 +23,11 @@ export const useChartInteract = (
23 if (fnOnEvent.length === 0) return 23 if (fnOnEvent.length === 0) return
24 fnOnEvent.forEach(item => { 24 fnOnEvent.forEach(item => {
25 25
26 - const globalConfigPindAprndex = chartEditStore.requestGlobalConfig.requestDataPond.findIndex(cItem => 26 + const globalConfigPindAprndex = chartEditStore.getRequestGlobalConfig.requestDataPond.findIndex(cItem =>
27 cItem.dataPondId === item.interactComponentId 27 cItem.dataPondId === item.interactComponentId
28 ) 28 )
29 if (globalConfigPindAprndex !== -1) { 29 if (globalConfigPindAprndex !== -1) {
30 - const { Params, Header } = toRefs(chartEditStore.requestGlobalConfig.requestDataPond[globalConfigPindAprndex].dataPondRequestConfig.requestParams) 30 + const { Params, Header } = toRefs(chartEditStore.getRequestGlobalConfig.requestDataPond[globalConfigPindAprndex].dataPondRequestConfig.requestParams)
31 31
32 Object.keys(item.interactFn).forEach(key => { 32 Object.keys(item.interactFn).forEach(key => {
33 if (key in Params.value) { 33 if (key in Params.value) {
@@ -40,7 +40,7 @@ export const useChartInteract = ( @@ -40,7 +40,7 @@ export const useChartInteract = (
40 } else { 40 } else {
41 const index = chartEditStore.fetchTargetIndex(item.interactComponentId) 41 const index = chartEditStore.fetchTargetIndex(item.interactComponentId)
42 if (index === -1) return 42 if (index === -1) return
43 - const { Params, Header } = toRefs(chartEditStore.componentList[index].request.requestParams) 43 + const { Params, Header } = toRefs(chartEditStore.getComponentList[index].request.requestParams)
44 44
45 Object.keys(item.interactFn).forEach(key => { 45 Object.keys(item.interactFn).forEach(key => {
46 if (key in Params.value) { 46 if (key in Params.value) {
@@ -211,11 +211,16 @@ const updateVChart = (newData: SocketReceiveMessageType) => { @@ -211,11 +211,16 @@ const updateVChart = (newData: SocketReceiveMessageType) => {
211 unref(realTimeList).splice(0, 1) 211 unref(realTimeList).splice(0, 1)
212 } 212 }
213 realTimeList.value.push(record) 213 realTimeList.value.push(record)
214 - vChartRef.value?.setOption({  
215 - dataset: { 214 + const dataset = {
216 dimensions: ['ts', ...keys], 215 dimensions: ['ts', ...keys],
217 source: toRaw(unref(realTimeList)) 216 source: toRaw(unref(realTimeList))
218 - } 217 + }
  218 + vChartRef.value?.setOption({
  219 + ...option.value,
  220 + dataset
  221 + },
  222 + {
  223 + notMerge: true // 修复ws 属性对应属性值不匹配
219 }) 224 })
220 } 225 }
221 226
@@ -18,6 +18,7 @@ export const option = { @@ -18,6 +18,7 @@ export const option = {
18 buttonColor: '', 18 buttonColor: '',
19 buttonTextColor: 'white', 19 buttonTextColor: 'white',
20 buttonTextSize: '16', 20 buttonTextSize: '16',
  21 + buttonTextBold: 500,
21 selectTargetItems: [] 22 selectTargetItems: []
22 } 23 }
23 24
@@ -48,6 +48,16 @@ @@ -48,6 +48,16 @@
48 <n-input v-model:value="optionData.dataset" size="small" placeholder="按钮文字"></n-input> 48 <n-input v-model:value="optionData.dataset" size="small" placeholder="按钮文字"></n-input>
49 </setting-item> 49 </setting-item>
50 </setting-item-box> 50 </setting-item-box>
  51 + <setting-item-box name="文字加粗">
  52 + <setting-item name="">
  53 + <n-input-number :step="200" v-model:value="optionData.buttonTextBold" />
  54 + </setting-item>
  55 + <setting-item>
  56 + <n-button size="small" @click="optionData.buttonTextBold=100">
  57 + 恢复默认
  58 + </n-button>
  59 + </setting-item>
  60 + </setting-item-box>
51 <setting-item-box :alone="true"> 61 <setting-item-box :alone="true">
52 <template #name> 62 <template #name>
53 <n-text>目标</n-text> 63 <n-text>目标</n-text>
@@ -126,7 +136,7 @@ const buttonTypeOptions = [ @@ -126,7 +136,7 @@ const buttonTypeOptions = [
126 const selectTargetItemOptions = ref<{ label: string; value: string }[]>([]) 136 const selectTargetItemOptions = ref<{ label: string; value: string }[]>([])
127 137
128 onMounted(() => { 138 onMounted(() => {
129 - const componentList = chartEditStore.componentList.map(item => ({ 139 + const componentList = chartEditStore.getComponentList.map(item => ({
130 label: item.chartConfig?.title, 140 label: item.chartConfig?.title,
131 value: item.id 141 value: item.id
132 })) 142 }))
@@ -8,7 +8,7 @@ export const ButtonConfig: ConfigType = { @@ -8,7 +8,7 @@ export const ButtonConfig: ConfigType = {
8 key, 8 key,
9 chartKey, 9 chartKey,
10 conKey, 10 conKey,
11 - title: '自定义按钮', 11 + title: '切换菜单按钮',
12 category: ChatCategoryEnum.INPUTS, 12 category: ChatCategoryEnum.INPUTS,
13 categoryName: ChatCategoryEnumName.INPUTS, 13 categoryName: ChatCategoryEnumName.INPUTS,
14 package: PackagesCategoryEnum.INFORMATIONS, 14 package: PackagesCategoryEnum.INFORMATIONS,
@@ -7,7 +7,7 @@ @@ -7,7 +7,7 @@
7 :color="buttonColor" 7 :color="buttonColor"
8 @click="onClick(option.value.selectTargetItems, true)" 8 @click="onClick(option.value.selectTargetItems, true)"
9 > 9 >
10 - <span class="button-text-color">{{ dataset }}</span> 10 + <span :style="`font-weight:${buttonTextBold}`" class="button-text-color">{{ dataset }}</span>
11 </n-button> 11 </n-button>
12 </template> 12 </template>
13 13
@@ -29,7 +29,7 @@ const props = defineProps({ @@ -29,7 +29,7 @@ const props = defineProps({
29 29
30 const { w, h } = toRefs(props.chartConfig.attr) 30 const { w, h } = toRefs(props.chartConfig.attr)
31 31
32 -const { buttonType, buttonDashed, buttonGhost, buttonColor, buttonTextColor, buttonTextSize, dataset } = toRefs( 32 +const { buttonType, buttonDashed, buttonGhost, buttonColor, buttonTextColor, buttonTextSize, dataset,buttonTextBold } = toRefs(
33 props.chartConfig.option 33 props.chartConfig.option
34 ) 34 )
35 35
  1 +import cloneDeep from 'lodash/cloneDeep'
  2 +import { PublicConfigClass } from '@/packages/public'
  3 +import { CreateComponentType } from '@/packages/index.d'
  4 +import { chartInitConfig } from '@/settings/designSetting'
  5 +import { COMPONENT_INTERACT_EVENT_KET } from '@/enums/eventEnum'
  6 +import { interactActions, ComponentInteractEventEnum } from './interact'
  7 +import { PageButtonConfig } from './index'
  8 +
  9 +
  10 +export const option = {
  11 + // 时间组件展示类型，必须和 interactActions 中定义的数据一致
  12 + [COMPONENT_INTERACT_EVENT_KET]: ComponentInteractEventEnum.DATA,
  13 + // 暴露配置内容给用户
  14 + dataset: '第1页',
  15 + buttonType: 'primary',
  16 + buttonGhost: false,
  17 + buttonDashed: false,
  18 + buttonColor: '',
  19 + buttonTextColor: 'white',
  20 + buttonTextSize: '16',
  21 + buttonTextBold: 500,
  22 + selectTargetItems: []
  23 +}
  24 +
  25 +export default class Config extends PublicConfigClass implements CreateComponentType {
  26 + public key = PageButtonConfig.key
  27 + public attr = { ...chartInitConfig, w: 90, h: 40, zIndex: -1 }
  28 + public chartConfig = cloneDeep(PageButtonConfig)
  29 + public interactActions = interactActions
  30 + public option = cloneDeep(option)
  31 +}
  1 +<template>
  2 + <collapse-item name="按钮配置" :expanded="true">
  3 + <setting-item-box name="默认值" :alone="true">
  4 + <n-select size="small" v-model:value="optionData.buttonType" :options="buttonTypeOptions" />
  5 + </setting-item-box>
  6 + <setting-item-box name="虚线">
  7 + <setting-item name="是否开启">
  8 + <n-switch v-model:value="optionData.buttonDashed" />
  9 + </setting-item>
  10 + </setting-item-box>
  11 + <setting-item-box name="透明">
  12 + <setting-item name="是否开启">
  13 + <n-switch v-model:value="optionData.buttonGhost" />
  14 + </setting-item>
  15 + </setting-item-box>
  16 + <setting-item-box name="颜色">
  17 + <setting-item name="">
  18 + <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.buttonColor"></n-color-picker>
  19 + </setting-item>
  20 + <setting-item>
  21 + <n-button size="small" @click="optionData.buttonColor=''">
  22 + 恢复默认
  23 + </n-button>
  24 + </setting-item>
  25 + </setting-item-box>
  26 + <setting-item-box name="文字颜色">
  27 + <setting-item name="">
  28 + <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.buttonTextColor"></n-color-picker>
  29 + </setting-item>
  30 + <setting-item>
  31 + <n-button size="small" @click="optionData.buttonTextColor='white'">
  32 + 恢复默认
  33 + </n-button>
  34 + </setting-item>
  35 + </setting-item-box>
  36 + <setting-item-box name="文字大小">
  37 + <setting-item name="">
  38 + <n-input-number v-model:value="optionData.buttonTextSize" />
  39 + </setting-item>
  40 + <setting-item>
  41 + <n-button size="small" @click="optionData.buttonTextSize='16'">
  42 + 恢复默认
  43 + </n-button>
  44 + </setting-item>
  45 + </setting-item-box>
  46 + <setting-item-box name="文字加粗">
  47 + <setting-item name="">
  48 + <n-input-number :step="200" v-model:value="optionData.buttonTextBold" />
  49 + </setting-item>
  50 + <setting-item>
  51 + <n-button size="small" @click="optionData.buttonTextBold=100">
  52 + 恢复默认
  53 + </n-button>
  54 + </setting-item>
  55 + </setting-item-box>
  56 + <setting-item-box :alone="true">
  57 + <setting-item name="按钮文字" :alone="true">
  58 + <n-input v-model:value="optionData.dataset" size="small" placeholder="按钮文字"></n-input>
  59 + </setting-item>
  60 + </setting-item-box>
  61 + </collapse-item>
  62 +</template>
  63 +
  64 +<script lang="ts" setup>
  65 +import { PropType, ref, onMounted } from 'vue'
  66 +import { CollapseItem, SettingItemBox ,SettingItem} from '@/components/Pages/ChartItemSetting'
  67 +import { option } from './config'
  68 +import { icon } from '@/plugins'
  69 +import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
  70 +
  71 +defineProps({
  72 + optionData: {
  73 + type: Object as PropType<typeof option>,
  74 + required: true
  75 + }
  76 +})
  77 +
  78 +const chartEditStore = useChartEditStore()
  79 +
  80 +const { HelpOutlineIcon } = icon.ionicons5
  81 +
  82 +const targetHelpMessgae = ref(`勾选目标项,支持多个`)
  83 +
  84 +const buttonTypeOptions = [
  85 + {
  86 + label: 'default',
  87 + value: 'default'
  88 + },
  89 + {
  90 + label: 'primary',
  91 + value: 'primary'
  92 + },
  93 + {
  94 + label: 'tertiary',
  95 + value: 'tertiary'
  96 + },
  97 + {
  98 + label: 'info',
  99 + value: 'info'
  100 + },
  101 + {
  102 + label: 'success',
  103 + value: 'success'
  104 + },
  105 + {
  106 + label: 'warning',
  107 + value: 'warning'
  108 + },
  109 + {
  110 + label: 'error',
  111 + value: 'error'
  112 + }
  113 +]
  114 +
  115 +const selectTargetItemOptions = ref<{ label: string; value: string }[]>([])
  116 +
  117 +onMounted(() => {
  118 + const componentList = chartEditStore.getComponentList?.map(item => ({
  119 + label: item.chartConfig?.title,
  120 + value: item.id
  121 + }))
  122 + selectTargetItemOptions.value = componentList
  123 +})
  124 +</script>
  125 +<style lang="scss" scoped>
  126 +.help-span {
  127 + display: flex;
  128 + flex-wrap: wrap;
  129 + width: 8vw;
  130 + color: white;
  131 +}
  132 +</style>
  1 +import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
  2 +import { ChatCategoryEnum, ChatCategoryEnumName } from '@/packages/components/Informations/index.d'
  3 +import { useWidgetKey } from '@/packages/external/useWidgetKey'
  4 +
  5 +const { key, conKey, chartKey } = useWidgetKey('PageButton', true)
  6 +
  7 +export const PageButtonConfig: ConfigType = {
  8 + key,
  9 + chartKey,
  10 + conKey,
  11 + title: '页面切换按钮',
  12 + category: ChatCategoryEnum.INPUTS,
  13 + categoryName: ChatCategoryEnumName.INPUTS,
  14 + package: PackagesCategoryEnum.INFORMATIONS,
  15 + chartFrame: ChartFrameEnum.COMMON,
  16 + image: 'page_button.png'
  17 +}
  1 +<template>
  2 + <n-button
  3 + :style="{ width: `${w}px`, height: `${h}px` }"
  4 + :type="buttonType"
  5 + :dashed="buttonDashed"
  6 + :ghost="buttonGhost"
  7 + :color="buttonColor"
  8 + @click="onClick(useChartEditStore().getPageConfig)"
  9 + >
  10 + <span :style="`font-weight:${buttonTextBold}`" class="button-text-color">{{ dataset }}</span>
  11 + </n-button>
  12 +</template>
  13 +
  14 +<script setup lang="ts">
  15 +import { PropType, toRefs, shallowReactive, watch, onMounted, ref } from 'vue'
  16 +import cloneDeep from 'lodash/cloneDeep'
  17 +import { CreateComponentType } from '@/packages/index.d'
  18 +import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
  19 +import { useChartInteract } from '@/hooks/external/useButtonPageChangeInteract.hook'
  20 +import { InteractEventOn } from '@/enums/eventEnum'
  21 +import { ComponentInteractParamsEnum } from './interact'
  22 +
  23 +const props = defineProps({
  24 + chartConfig: {
  25 + type: Object as PropType<CreateComponentType>,
  26 + required: true
  27 + }
  28 +})
  29 +
  30 +const { w, h } = toRefs(props.chartConfig.attr)
  31 +
  32 +const { buttonType, buttonDashed, buttonGhost, buttonColor, buttonTextColor, buttonTextSize, dataset, buttonTextBold } = toRefs(
  33 + props.chartConfig.option
  34 +)
  35 +
  36 +const option = shallowReactive({
  37 + value: cloneDeep(props.chartConfig.option)
  38 +})
  39 +
  40 +const interactPageId = ref('')
  41 +
  42 +const onClick = (v: any) => {
  43 + // useChartInteract(
  44 + // props.chartConfig,
  45 + // useChartEditStore,
  46 + // { [ComponentInteractParamsEnum.DATA]: v },
  47 + // InteractEventOn.CHANGE,
  48 + // status
  49 + // )
  50 + interactPageId.value = v
  51 + useChartInteract(
  52 + props.chartConfig,
  53 + useChartEditStore,
  54 + { [ComponentInteractParamsEnum.DATA]: v },
  55 + InteractEventOn.PAGE_CHANGE,
  56 + )
  57 +}
  58 +
  59 +onMounted(() => {
  60 + // onClick(option.value.selectTargetItems)
  61 + // onClick(useChartEditStore().getPageConfig)
  62 +})
  63 +
  64 +// 手动更新
  65 +watch(
  66 + () => props.chartConfig.option,
  67 + (newData: any) => {
  68 + option.value = newData
  69 + // onClick(newData.tabValue)
  70 + },
  71 + {
  72 + immediate: true,
  73 + deep: true
  74 + }
  75 +)
  76 +
  77 +watch(()=>interactPageId.value,(newValue:Recordable)=>{
  78 + useChartInteract(
  79 + props.chartConfig,
  80 + useChartEditStore,
  81 + { [ComponentInteractParamsEnum.DATA]: newValue },
  82 + InteractEventOn.PAGE_CHANGE,
  83 + )
  84 +},
  85 +{
  86 + deep:true
  87 +})
  88 +</script>
  89 +
  90 +<style lang="scss" scoped>
  91 +.button-text-color {
  92 + color: v-bind('buttonTextColor');
  93 + font-size: v-bind('`${buttonTextSize}px`');
  94 +}
  95 +</style>
  1 +import { InteractEventOn, InteractActionsType } from '@/enums/eventEnum'
  2 +
  3 +// 时间组件类型
  4 +export enum ComponentInteractEventEnum {
  5 + DATA = 'data'
  6 +}
  7 +
  8 +// 联动参数
  9 +export enum ComponentInteractParamsEnum {
  10 + DATA = 'data'
  11 +}
  12 +
  13 +// 定义组件触发回调事件
  14 +export const interactActions: InteractActionsType[] = [
  15 + // {
  16 + // interactType: InteractEventOn.CHANGE,
  17 + // interactName: '选择完成',
  18 + // componentEmitEvents: {
  19 + // [ComponentInteractEventEnum.DATA]: [
  20 + // {
  21 + // value: ComponentInteractParamsEnum.DATA,
  22 + // label: '选择项'
  23 + // }
  24 + // ]
  25 + // }
  26 + // },
  27 + {
  28 + interactType: InteractEventOn.PAGE_CHANGE, // THINGS_KIT 修改多画布切换相关代码 用于切换画布
  29 + interactName: '画布切换',
  30 + componentEmitEvents: {
  31 + [ComponentInteractEventEnum.DATA]: [
  32 + {
  33 + value: ComponentInteractParamsEnum.DATA,
  34 + label: '选择项'
  35 + }
  36 + ]
  37 + }
  38 + }
  39 +]
@@ -39,12 +39,11 @@ @@ -39,12 +39,11 @@
39 </template> 39 </template>
40 40
41 <script setup lang="ts"> 41 <script setup lang="ts">
42 -import { PropType, onMounted, ref, watch } from 'vue' 42 +import { PropType, onMounted, ref, watch, unref } from 'vue'
43 import { option, shareEnum } from './config' 43 import { option, shareEnum } from './config'
44 import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting' 44 import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
45 import { getConfigurationList, setConfigurationIsShare } from '@/api/external/common/index' 45 import { getConfigurationList, setConfigurationIsShare } from '@/api/external/common/index'
46 import { ConfigurationItemType } from '@/api/external/common/model' 46 import { ConfigurationItemType } from '@/api/external/common/model'
47 -import { Platform } from './help'  
48 47
49 const props = defineProps({ 48 const props = defineProps({
50 optionData: { 49 optionData: {
@@ -65,7 +64,12 @@ const getConfigurationOptions = async (params: object) => { @@ -65,7 +64,12 @@ const getConfigurationOptions = async (params: object) => {
65 value: item.id, 64 value: item.id,
66 ...item 65 ...item
67 })) 66 }))
  67 + if (props.optionData.dataset) {
  68 + const selected = items.find(item => item.id === props.optionData.dataset)
  69 + selected && (props.optionData.isShare = selected.viewType === shareEnum.PUBLIC_VIEW)
  70 + }
68 } 71 }
  72 +
69 } 73 }
70 74
71 watch( 75 watch(
@@ -90,12 +94,16 @@ const handleUpdateValue = (value: string, options: ConfigurationItemType) => { @@ -90,12 +94,16 @@ const handleUpdateValue = (value: string, options: ConfigurationItemType) => {
90 } 94 }
91 95
92 const handleChange = async (value: boolean) => { 96 const handleChange = async (value: boolean) => {
93 - const res = await setConfigurationIsShare(!configurationId.value ? props.optionData.dataset : configurationId.value, value, { 97 + const currentConfigurationId = !configurationId.value ? props.optionData.dataset : configurationId.value
  98 + const res = await setConfigurationIsShare(currentConfigurationId, value, {
94 isShare: value 99 isShare: value
95 }) 100 })
96 if (res) { 101 if (res) {
97 window.$message.success('操作成功！') 102 window.$message.success('操作成功！')
98 - await getConfigurationOptions({ page: props.optionData.pages.page, pageSize: props.optionData.pages.pageSize }) 103 + await getConfigurationOptions({ page: props.optionData.pages.page, pageSize: props.optionData.pages.pageSize })
  104 + const currentItem = unref(configurationOptions).find(item => item.id === currentConfigurationId)
  105 + const { viewType, organizationId, platform, publicId } = currentItem || {}
  106 + Object.assign(props.optionData, { isShare: viewType === shareEnum.PUBLIC_VIEW, organizationId, platform, publicId } as typeof option)
99 } 107 }
100 } 108 }
101 </script> 109 </script>
@@ -16,6 +16,7 @@ interface ScadaLinkParamsType { @@ -16,6 +16,7 @@ interface ScadaLinkParamsType {
16 mode: ScadaModeEnum; 16 mode: ScadaModeEnum;
17 platform: Platform; 17 platform: Platform;
18 publicId?: string; 18 publicId?: string;
  19 + parentPageIsPublic?: boolean
19 } 20 }
20 21
21 const getRandomString = () => Number(Math.random().toString().substring(2)).toString(36); 22 const getRandomString = () => Number(Math.random().toString().substring(2)).toString(36);
@@ -36,15 +37,16 @@ export const encode = (record: Recordable) => { @@ -36,15 +37,16 @@ export const encode = (record: Recordable) => {
36 37
37 38
38 export const createScadaPageLink = ( 39 export const createScadaPageLink = (
39 - record: Partial<Record<'id' | 'organizationId' | 'platform' | 'publicId', string>>, 40 + record: Partial<ScadaLinkParamsType>,
40 mode: ScadaModeEnum = ScadaModeEnum.DESIGN, 41 mode: ScadaModeEnum = ScadaModeEnum.DESIGN,
41 open = true 42 open = true
42 ) => { 43 ) => {
43 const params: ScadaLinkParamsType = { 44 const params: ScadaLinkParamsType = {
44 - configurationId: record.id!, 45 + configurationId: record.configurationId!,
45 organizationId: record.organizationId!, 46 organizationId: record.organizationId!,
46 mode: mode, 47 mode: mode,
47 platform: record.platform as Platform, 48 platform: record.platform as Platform,
  49 + parentPageIsPublic: record.parentPageIsPublic
48 }; 50 };
49 51
50 if (mode === ScadaModeEnum.SHARE) { 52 if (mode === ScadaModeEnum.SHARE) {
@@ -9,11 +9,9 @@ @@ -9,11 +9,9 @@
9 </path> 9 </path>
10 </svg> 10 </svg>
11 </div> 11 </div>
12 - <iframe v-if="iframeLink" id="iframeContent" :src="iframeLink" :width="w" :height="h"  
13 - style="border-width: 0"></iframe>  
14 - <n-empty v-else class="empty" size="huge" description="暂未绑定页面">  
15 -  
16 - </n-empty> 12 + <iframe v-if="iframeLink" id="iframeContent" :src="iframeLink" :width="w" :height="h" style="border-width: 0">
  13 + </iframe>
  14 + <n-empty v-else class="empty" size="huge" :description="description"></n-empty>
17 </div> 15 </div>
18 </template> 16 </template>
19 17
@@ -26,6 +24,7 @@ import { useFullScreen } from '@/packages/components/external/Charts/utls/fullSc @@ -26,6 +24,7 @@ import { useFullScreen } from '@/packages/components/external/Charts/utls/fullSc
26 import { isDevMode } from '@/utils/external/env' 24 import { isDevMode } from '@/utils/external/env'
27 import { createScadaPageLink, ScadaModeEnum } from './help' 25 import { createScadaPageLink, ScadaModeEnum } from './help'
28 import { option as typeOption } from './config' 26 import { option as typeOption } from './config'
  27 +import { isShareMode } from '@/views/share/hook'
29 28
30 const props = defineProps({ 29 const props = defineProps({
31 chartConfig: { 30 chartConfig: {
@@ -56,14 +55,21 @@ const isDev = isDevMode() @@ -56,14 +55,21 @@ const isDev = isDevMode()
56 55
57 const iframeLink = ref('') 56 const iframeLink = ref('')
58 57
  58 +const description = ref('暂未绑定页面')
  59 +
59 // 编辑更新 60 // 编辑更新
60 watch( 61 watch(
61 () => props.chartConfig.option.dataset, 62 () => props.chartConfig.option.dataset,
62 (newData: string) => { 63 (newData: string) => {
  64 + if (isShareMode() && !(props.chartConfig.option as typeof typeOption).isShare) {
  65 + description.value = '组态页面暂未公开'
  66 + return
  67 + }
  68 +
63 const { dataset, publicId, organizationId, platform, isShare } = props.chartConfig.option as typeof typeOption 69 const { dataset, publicId, organizationId, platform, isShare } = props.chartConfig.option as typeof typeOption
64 70
65 if (!dataset) return 71 if (!dataset) return
66 - iframeLink.value = createScadaPageLink({ id: dataset, platform, publicId, organizationId, }, isShare ? ScadaModeEnum.SHARE : ScadaModeEnum.LIGHTBOX, false) 72 + iframeLink.value = createScadaPageLink({ configurationId: dataset, platform, publicId, organizationId, parentPageIsPublic: isShareMode() }, isShare ? ScadaModeEnum.SHARE : ScadaModeEnum.LIGHTBOX, false)
67 }, 73 },
68 { 74 {
69 immediate: true 75 immediate: true
@@ -24,7 +24,7 @@ const props = defineProps({ @@ -24,7 +24,7 @@ const props = defineProps({
24 sourceSrc: { 24 sourceSrc: {
25 type: String 25 type: String
26 }, 26 },
27 - autoplay: { 27 + autoPlay: {
28 type: Boolean 28 type: Boolean
29 }, 29 },
30 name: { 30 name: {
@@ -82,13 +82,13 @@ const fingerprintResult = ref<Nullable<GetResult>>(null) @@ -82,13 +82,13 @@ const fingerprintResult = ref<Nullable<GetResult>>(null)
82 const options: VideoJsPlayerOptions & Recordable = { 82 const options: VideoJsPlayerOptions & Recordable = {
83 language: 'zh-CN', // 设置语言 83 language: 'zh-CN', // 设置语言
84 controls: true, // 是否显示控制条 84 controls: true, // 是否显示控制条
85 - preload: 'auto', // 预加载  
86 - autoplay: true, // 是否自动播放 85 + // preload: 'auto', // 预加载
  86 + autoplay: props.autoPlay ? true : false, // 是否自动播放
87 fluid: false, // 自适应宽高 87 fluid: false, // 自适应宽高
88 poster: props?.avatar || '', 88 poster: props?.avatar || '',
89 // src: getSource() || '', // 要嵌入的视频源的源 URL 89 // src: getSource() || '', // 要嵌入的视频源的源 URL
90 sources: [], 90 sources: [],
91 - muted: true, 91 + muted: props.autoPlay ? true : false,
92 userActions: { 92 userActions: {
93 hotkeys: true 93 hotkeys: true
94 }, 94 },
@@ -147,8 +147,10 @@ watch( @@ -147,8 +147,10 @@ watch(
147 async (newData: any) => { 147 async (newData: any) => {
148 const result = await getSource() 148 const result = await getSource()
149 // props.sourceSrc = newData 149 // props.sourceSrc = newData
150 - videoPlayer?.src(result) as any  
151 - videoPlayer?.play() 150 + if(props.autoPlay){
  151 + videoPlayer?.src(result) as any
  152 + videoPlayer?.play()
  153 + }
152 }, 154 },
153 { 155 {
154 immediate: true 156 immediate: true
@@ -190,3 +192,8 @@ defineExpose({ @@ -190,3 +192,8 @@ defineExpose({
190 } 192 }
191 } 193 }
192 </style> 194 </style>
  195 +<style>
  196 +.vjs-poster {
  197 + background-size: 100% !important;
  198 +}
  199 +</style>
1 <template> 1 <template>
2 <div> 2 <div>
3 - <VideoPlay :w="w" :h="h" :sourceSrc="option.dataset" :autoPlay="autoplay" :avatar="option.poster" /> 3 + <VideoPlay :w="w" :h="h" :sourceSrc="option.dataset" :autoPlay="option.autoplay" :avatar="option.poster" />
4 </div> 4 </div>
5 </template> 5 </template>
6 <script setup lang="ts"> 6 <script setup lang="ts">
@@ -22,7 +22,8 @@ const { autoplay, dataset, poster, url } = toRefs(props.chartConfig.option) @@ -22,7 +22,8 @@ const { autoplay, dataset, poster, url } = toRefs(props.chartConfig.option)
22 22
23 const option = shallowReactive({ 23 const option = shallowReactive({
24 dataset: configOption.dataset, 24 dataset: configOption.dataset,
25 - poster: configOption.poster 25 + poster: configOption.poster,
  26 + autoplay:configOption.autoplay
26 }) 27 })
27 28
28 watch( 29 watch(
@@ -48,6 +49,16 @@ watch( @@ -48,6 +49,16 @@ watch(
48 immediate: true 49 immediate: true
49 } 50 }
50 ) 51 )
  52 +
  53 +watch(
  54 + () => autoplay?.value,
  55 + (newData:boolean) => {
  56 + option.autoplay = newData
  57 + },
  58 + {
  59 + immediate: true
  60 + }
  61 +)
51 </script> 62 </script>
52 63
53 <style lang="scss" scoped></style> 64 <style lang="scss" scoped></style>
@@ -73,7 +73,7 @@ useChartDataFetch(props.chartConfig, useChartEditStore, (newData: string) => { @@ -73,7 +73,7 @@ useChartDataFetch(props.chartConfig, useChartEditStore, (newData: string) => {
73 const chartEditStore = useChartEditStore() 73 const chartEditStore = useChartEditStore()
74 //判断只要是分组并且分组绑定了ws 74 //判断只要是分组并且分组绑定了ws
75 let hasGroupWs = false 75 let hasGroupWs = false
76 - chartEditStore.componentList.some((item: CreateComponentType) => { 76 + chartEditStore.getComponentList.some((item: CreateComponentType) => {
77 if (item.request.requestUrl?.includes('ws')) { 77 if (item.request.requestUrl?.includes('ws')) {
78 hasGroupWs = true 78 hasGroupWs = true
79 } 79 }
@@ -60,7 +60,7 @@ useChartDataFetch(props.chartConfig, useChartEditStore, (newData: string) => { @@ -60,7 +60,7 @@ useChartDataFetch(props.chartConfig, useChartEditStore, (newData: string) => {
60 const chartEditStore = useChartEditStore() 60 const chartEditStore = useChartEditStore()
61 //判断只要是分组并且分组绑定了ws 61 //判断只要是分组并且分组绑定了ws
62 let hasGroupWs = false 62 let hasGroupWs = false
63 - chartEditStore.componentList.some((item: CreateComponentType) => { 63 + chartEditStore.getComponentList.some((item: CreateComponentType) => {
64 if (item.request.requestUrl?.includes('ws')) { 64 if (item.request.requestUrl?.includes('ws')) {
65 hasGroupWs = true 65 hasGroupWs = true
66 } 66 }
@@ -41,7 +41,7 @@ useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => { @@ -41,7 +41,7 @@ useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
41 const chartEditStore = useChartEditStore() 41 const chartEditStore = useChartEditStore()
42 //判断只要是分组并且分组绑定了ws 42 //判断只要是分组并且分组绑定了ws
43 let hasGroupWs = false 43 let hasGroupWs = false
44 - chartEditStore.componentList.some((item: CreateComponentType) => { 44 + chartEditStore.getComponentList.some((item: CreateComponentType) => {
45 if (item.request.requestUrl?.includes('ws')) { 45 if (item.request.requestUrl?.includes('ws')) {
46 hasGroupWs = true 46 hasGroupWs = true
47 } 47 }
@@ -13,6 +13,7 @@ import { OverrideTextBarrageConfig } from '@/packages/components/external/Inform @@ -13,6 +13,7 @@ import { OverrideTextBarrageConfig } from '@/packages/components/external/Inform
13 import { OverrideTextGradientConfig } from '@/packages/components/external/Informations/Texts/OverrideTextGradient' 13 import { OverrideTextGradientConfig } from '@/packages/components/external/Informations/Texts/OverrideTextGradient'
14 import { OverrideVideoConfig } from '@/packages/components/external/Informations/Mores/OverrideVideo' 14 import { OverrideVideoConfig } from '@/packages/components/external/Informations/Mores/OverrideVideo'
15 import { ButtonConfig } from '@/packages/components/external/Informations/Inputs/Button' 15 import { ButtonConfig } from '@/packages/components/external/Informations/Inputs/Button'
  16 +import { PageButtonConfig } from '@/packages/components/external/Informations/Inputs/PageButton'
16 import { TreeConfig } from '@/packages/components/external/Informations/Inputs/Tree' 17 import { TreeConfig } from '@/packages/components/external/Informations/Inputs/Tree'
17 import { CameraConfig } from '@/packages/components/external/Informations/Mores/Camera' 18 import { CameraConfig } from '@/packages/components/external/Informations/Mores/Camera'
18 import { SingleCameraConfig } from '@/packages/components/external/Informations/Mores/SingleCamera' 19 import { SingleCameraConfig } from '@/packages/components/external/Informations/Mores/SingleCamera'
@@ -87,6 +88,7 @@ export function useInjectLib(packagesList: EPackagesType) { @@ -87,6 +88,7 @@ export function useInjectLib(packagesList: EPackagesType) {
87 addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.INFORMATIONS, OverrideCarouselConfig)//重写信息下的轮播图 88 addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.INFORMATIONS, OverrideCarouselConfig)//重写信息下的轮播图
88 addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.INFORMATIONS, OverrideSelectConfig)//重写信息下的select 89 addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.INFORMATIONS, OverrideSelectConfig)//重写信息下的select
89 addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.INFORMATIONS, ButtonConfig)//新增信息下的按钮 90 addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.INFORMATIONS, ButtonConfig)//新增信息下的按钮
  91 + addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.INFORMATIONS, PageButtonConfig)//新增信息下的切换页面按钮
90 addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.INFORMATIONS, TreeConfig)//新增信息下的树形控件 92 addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.INFORMATIONS, TreeConfig)//新增信息下的树形控件
91 addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.INFORMATIONS, OverrideIframeConfig)//重写信息下的远程加载网页 93 addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.INFORMATIONS, OverrideIframeConfig)//重写信息下的远程加载网页
92 addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.INFORMATIONS, OverrideInputsDateConfig)//重写信息下的日期 94 addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.INFORMATIONS, OverrideInputsDateConfig)//重写信息下的日期
@@ -14,7 +14,7 @@ export const groupTitle = "分组" @@ -14,7 +14,7 @@ export const groupTitle = "分组"
14 // 主题配置 14 // 主题配置
15 export const theme = { 15 export const theme = {
16 // 默认是否开启深色主题 16 // 默认是否开启深色主题
17 - darkTheme: true, 17 + darkTheme: false,
18 //默认主题色 18 //默认主题色
19 appTheme: '#51d6a9', 19 appTheme: '#51d6a9',
20 appThemeDetail: null, 20 appThemeDetail: null,
@@ -9,7 +9,7 @@ import { useFilterFn } from "@/hooks/external/useFilterFn"; @@ -9,7 +9,7 @@ import { useFilterFn } from "@/hooks/external/useFilterFn";
9 9
10 10
11 // const KEYS_SEPARATOR = ',' 11 // const KEYS_SEPARATOR = ','
12 -const chartEditStore = useChartEditStore(pinia) 12 +// const chartEditStore = useChartEditStore(pinia) //放在这里总是报错
13 export const useSocketStore = defineStore({ 13 export const useSocketStore = defineStore({
14 id: 'useSocketStore', 14 id: 'useSocketStore',
15 state: (): SocketStoreType => ({ 15 state: (): SocketStoreType => ({
@@ -26,6 +26,7 @@ export const useSocketStore = defineStore({ @@ -26,6 +26,7 @@ export const useSocketStore = defineStore({
26 * @returns 26 * @returns
27 */ 27 */
28 getSocketComponentsRecord(): SocketComponentRecord[] { 28 getSocketComponentsRecord(): SocketComponentRecord[] {
  29 + const chartEditStore = useChartEditStore(pinia)
29 const socketComponents = chartEditStore.getComponentList.filter(item => (item.request.requestContentType as RequestContentTypeEnum) === RequestContentTypeEnum.WEB_SOCKET) 30 const socketComponents = chartEditStore.getComponentList.filter(item => (item.request.requestContentType as RequestContentTypeEnum) === RequestContentTypeEnum.WEB_SOCKET)
30 return socketComponents.map(item => { 31 return socketComponents.map(item => {
31 const { request, id } = item 32 const { request, id } = item
@@ -261,6 +262,7 @@ export const useSocketStore = defineStore({ @@ -261,6 +262,7 @@ export const useSocketStore = defineStore({
261 * 修改后的代码 262 * 修改后的代码
262 * 修改ws绑定单个文本组件，然后有多个，并且进行分组，显示的信息为原始信息，而非过滤函数返回的信息 263 * 修改ws绑定单个文本组件，然后有多个，并且进行分组，显示的信息为原始信息，而非过滤函数返回的信息
263 */ 264 */
  265 + const chartEditStore = useChartEditStore(pinia)
264 chartEditStore.getComponentList.forEach(targetItem => { 266 chartEditStore.getComponentList.forEach(targetItem => {
265 if (targetItem.isGroup) { 267 if (targetItem.isGroup) {
266 /** 268 /**
@@ -23,7 +23,7 @@ export enum EditCanvasTypeEnum { @@ -23,7 +23,7 @@ export enum EditCanvasTypeEnum {
23 IS_CREATE = 'isCreate', 23 IS_CREATE = 'isCreate',
24 IS_DRAG = 'isDrag', 24 IS_DRAG = 'isDrag',
25 IS_SELECT = 'isSelect', 25 IS_SELECT = 'isSelect',
26 - IS_CODE_EDIT="isCodeEdit" 26 + IS_CODE_EDIT = "isCodeEdit"
27 } 27 }
28 28
29 // 编辑区域 29 // 编辑区域
@@ -96,7 +96,7 @@ export interface EditCanvasConfigType { @@ -96,7 +96,7 @@ export interface EditCanvasConfigType {
96 // 图表主题颜色 96 // 图表主题颜色
97 [EditCanvasConfigEnum.CHART_THEME_COLOR]: ChartColorsNameType 97 [EditCanvasConfigEnum.CHART_THEME_COLOR]: ChartColorsNameType
98 // 自定义图表主题颜色 98 // 自定义图表主题颜色
99 - [EditCanvasConfigEnum.CHART_CUSTOM_THEME_COLOR_INFO]?: CustomColorsType[] 99 + [EditCanvasConfigEnum.CHART_CUSTOM_THEME_COLOR_INFO]?: CustomColorsType[]
100 // 图表全局配置 100 // 图表全局配置
101 [EditCanvasConfigEnum.CHART_THEME_SETTING]: GlobalThemeJsonType 101 [EditCanvasConfigEnum.CHART_THEME_SETTING]: GlobalThemeJsonType
102 // 图表主题颜色 102 // 图表主题颜色
@@ -149,7 +149,19 @@ export enum ChartEditStoreEnum { @@ -149,7 +149,19 @@ export enum ChartEditStoreEnum {
149 // 以下需要存储 149 // 以下需要存储
150 EDIT_CANVAS_CONFIG = 'editCanvasConfig', 150 EDIT_CANVAS_CONFIG = 'editCanvasConfig',
151 REQUEST_GLOBAL_CONFIG = 'requestGlobalConfig', 151 REQUEST_GLOBAL_CONFIG = 'requestGlobalConfig',
152 - COMPONENT_LIST = 'componentList' 152 + COMPONENT_LIST = 'componentList',
  153 +
  154 + // THINGS_KIT 修改多画布切换相关代码
  155 + PAGE_LIST_ID = 'id',
  156 +
  157 + // THINGS_KIT 修改多画布切换相关代码
  158 + PAGE_LIST_TITLE = 'title',
  159 +
  160 + // THINGS_KIT 修改多画布切换相关代码
  161 + PAGE_CONFIG = 'pageConfig',
  162 +
  163 + // THINGS_KIT 修改多画布切换相关代码
  164 + PAGE_LIST = 'pageList'
153 } 165 }
154 166
155 // 请求公共类型 167 // 请求公共类型
@@ -200,7 +212,19 @@ export interface RequestConfigType extends RequestPublicConfigType { @@ -200,7 +212,19 @@ export interface RequestConfigType extends RequestPublicConfigType {
200 } 212 }
201 213
202 // Store 类型 214 // Store 类型
203 -export interface ChartEditStoreType { 215 +// export interface ChartEditStoreType {
  216 +// [ChartEditStoreEnum.EDIT_CANVAS]: EditCanvasType
  217 +// [ChartEditStoreEnum.EDIT_CANVAS_CONFIG]: EditCanvasConfigType
  218 +// [ChartEditStoreEnum.RIGHT_MENU_SHOW]: boolean
  219 +// [ChartEditStoreEnum.MOUSE_POSITION]: MousePositionType
  220 +// [ChartEditStoreEnum.TARGET_CHART]: TargetChartType
  221 +// [ChartEditStoreEnum.RECORD_CHART]?: RecordChartType
  222 +// [ChartEditStoreEnum.REQUEST_GLOBAL_CONFIG]: RequestGlobalConfigType
  223 +// [ChartEditStoreEnum.COMPONENT_LIST]: Array<CreateComponentType | CreateComponentGroupType>
  224 +// }
  225 +
  226 +// THINGS_KIT 修改多画布切换相关代码 修改代码在注释之间 Store 类型
  227 +export interface PageChartEditStoreType {
204 [ChartEditStoreEnum.EDIT_CANVAS]: EditCanvasType 228 [ChartEditStoreEnum.EDIT_CANVAS]: EditCanvasType
205 [ChartEditStoreEnum.EDIT_CANVAS_CONFIG]: EditCanvasConfigType 229 [ChartEditStoreEnum.EDIT_CANVAS_CONFIG]: EditCanvasConfigType
206 [ChartEditStoreEnum.RIGHT_MENU_SHOW]: boolean 230 [ChartEditStoreEnum.RIGHT_MENU_SHOW]: boolean
@@ -209,11 +233,34 @@ export interface ChartEditStoreType { @@ -209,11 +233,34 @@ export interface ChartEditStoreType {
209 [ChartEditStoreEnum.RECORD_CHART]?: RecordChartType 233 [ChartEditStoreEnum.RECORD_CHART]?: RecordChartType
210 [ChartEditStoreEnum.REQUEST_GLOBAL_CONFIG]: RequestGlobalConfigType 234 [ChartEditStoreEnum.REQUEST_GLOBAL_CONFIG]: RequestGlobalConfigType
211 [ChartEditStoreEnum.COMPONENT_LIST]: Array<CreateComponentType | CreateComponentGroupType> 235 [ChartEditStoreEnum.COMPONENT_LIST]: Array<CreateComponentType | CreateComponentGroupType>
  236 + [ChartEditStoreEnum.PAGE_LIST_ID]: string
  237 + [ChartEditStoreEnum.PAGE_LIST_TITLE]: string
  238 +}
  239 +//
  240 +
  241 +// THINGS_KIT 修改多画布切换相关代码 修改代码在注释之间
  242 +export interface PageChartListItem {
  243 + currentActiveIndex: number
  244 + currentActiveId: string
  245 + pageList: PageChartEditStoreType[]
212 } 246 }
213 247
214 -// 存储数据类型 248 +export interface ChartEditStoreType {
  249 + pageConfig: PageChartListItem
  250 + [EditCanvasTypeEnum.EDIT_LAYOUT_DOM]: HTMLElement | null
  251 + [EditCanvasTypeEnum.EDIT_CONTENT_DOM]: HTMLElement | null
  252 +}
  253 +//
  254 +
  255 +// // 存储数据类型
  256 +// export interface ChartEditStorage {
  257 +// [ChartEditStoreEnum.EDIT_CANVAS_CONFIG]: EditCanvasConfigType
  258 +// [ChartEditStoreEnum.REQUEST_GLOBAL_CONFIG]: RequestGlobalConfigType
  259 +// [ChartEditStoreEnum.COMPONENT_LIST]: Array<CreateComponentType | CreateComponentGroupType>
  260 +// }
  261 +
  262 +// THINGS_KIT 修改多画布切换相关代码 修改代码在注释之间 存储数据类型
215 export interface ChartEditStorage { 263 export interface ChartEditStorage {
216 - [ChartEditStoreEnum.EDIT_CANVAS_CONFIG]: EditCanvasConfigType  
217 - [ChartEditStoreEnum.REQUEST_GLOBAL_CONFIG]: RequestGlobalConfigType  
218 - [ChartEditStoreEnum.COMPONENT_LIST]: Array<CreateComponentType | CreateComponentGroupType> 264 + [ChartEditStoreEnum.PAGE_CONFIG]: PageChartListItem
219 } 265 }
  266 +//
@@ -26,17 +26,19 @@ import { @@ -26,17 +26,19 @@ import {
26 TargetChartType, 26 TargetChartType,
27 RecordChartType, 27 RecordChartType,
28 RequestGlobalConfigType, 28 RequestGlobalConfigType,
29 - EditCanvasConfigType 29 + EditCanvasConfigType,
  30 + PageChartListItem,
  31 + PageChartEditStoreType,
  32 + EditCanvasTypeEnum
30 } from './chartEditStore.d' 33 } from './chartEditStore.d'
31 -  
32 -import {useChartDataSocket} from "@/hooks/external/useChartDataSocket"; 34 +import { useChartDataSocket } from "@/hooks/external/useChartDataSocket";
33 import { pinia } from '@/store' 35 import { pinia } from '@/store'
34 -const chartHistoryStore = useChartHistoryStore(pinia)  
35 -const settingStore = useSettingStore(pinia)  
36 -// 编辑区域内容  
37 -export const useChartEditStore = defineStore({  
38 - id: 'useChartEditStore',  
39 - state: (): ChartEditStoreType => ({ 36 +
  37 +
  38 +function createNewPageItem(id: string = getUUID(), title = '页面'): PageChartEditStoreType {
  39 + return {
  40 + id,
  41 + title,
40 // 画布属性 42 // 画布属性
41 editCanvas: { 43 editCanvas: {
42 // 编辑区域 Dom 44 // 编辑区域 Dom
@@ -45,9 +47,9 @@ export const useChartEditStore = defineStore({ @@ -45,9 +47,9 @@ export const useChartEditStore = defineStore({
45 // 偏移量 47 // 偏移量
46 offset: 20, 48 offset: 20,
47 // 系统控制缩放 49 // 系统控制缩放
48 - scale: 1, 50 + scale: 0.5, //默认是1
49 // 用户控制的缩放 51 // 用户控制的缩放
50 - userScale: 1, 52 + userScale: 0.5, //默认是1
51 // 锁定缩放 53 // 锁定缩放
52 lockScale: false, 54 lockScale: false,
53 // 初始化 55 // 初始化
@@ -137,103 +139,243 @@ export const useChartEditStore = defineStore({ @@ -137,103 +139,243 @@ export const useChartEditStore = defineStore({
137 }, 139 },
138 // 图表数组（需存储给后端） 140 // 图表数组（需存储给后端）
139 componentList: [] 141 componentList: []
  142 + }
  143 +}
  144 +
  145 +const chartHistoryStore = useChartHistoryStore(pinia)
  146 +
  147 +const settingStore = useSettingStore(pinia)
  148 +
  149 +// 编辑区域内容
  150 +
  151 +// THINGS_KIT 修改多画布切换相关代码 修改代码在注释之间 源代码基本进行注释处理，未删除源代码
  152 +export const useChartEditStore = defineStore({
  153 + id: 'useChartEditStore',
  154 + state: (): ChartEditStoreType => ({
  155 + editLayoutDom: null,
  156 + editContentDom: null,
  157 + pageConfig: {
  158 + currentActiveIndex: 1,
  159 + currentActiveId: '1',
  160 + pageList: [
  161 + createNewPageItem('1', '第 1 页')
  162 + ]
  163 + },
  164 + //
140 }), 165 }),
141 getters: { 166 getters: {
142 getMousePosition(): MousePositionType { 167 getMousePosition(): MousePositionType {
143 - return this.mousePosition 168 + // return this.mousePosition
  169 + const findCurrentPage = this.pageConfig.pageList.findIndex(pageItem => pageItem.id === this.pageConfig.currentActiveId)
  170 + return this.pageConfig.pageList[findCurrentPage]?.mousePosition
144 }, 171 },
145 getRightMenuShow(): boolean { 172 getRightMenuShow(): boolean {
146 - return this.rightMenuShow 173 + // return this.rightMenuShow
  174 + const findCurrentPage = this.pageConfig.pageList.findIndex(pageItem => pageItem.id === this.pageConfig.currentActiveId)
  175 + return this.pageConfig.pageList[findCurrentPage]?.rightMenuShow
147 }, 176 },
148 getEditCanvas(): EditCanvasType { 177 getEditCanvas(): EditCanvasType {
149 - return this.editCanvas 178 + // return this.editCanvas
  179 + const findCurrentPage = this.pageConfig.pageList.findIndex(pageItem => pageItem.id === this.pageConfig.currentActiveId)
  180 + return this.pageConfig.pageList[findCurrentPage]?.editCanvas
150 }, 181 },
151 getEditCanvasConfig(): EditCanvasConfigType { 182 getEditCanvasConfig(): EditCanvasConfigType {
152 - return this.editCanvasConfig 183 + // return this.editCanvasConfig
  184 + const findCurrentPage = this.pageConfig.pageList.findIndex(pageItem => pageItem.id === this.pageConfig.currentActiveId)
  185 + return this.pageConfig.pageList[findCurrentPage]?.editCanvasConfig
153 }, 186 },
154 getTargetChart(): TargetChartType { 187 getTargetChart(): TargetChartType {
155 - return this.targetChart 188 + // return this.targetChart
  189 + const findCurrentPage = this.pageConfig.pageList.findIndex(pageItem => pageItem.id === this.pageConfig.currentActiveId)
  190 + return this.pageConfig.pageList[findCurrentPage]?.targetChart
156 }, 191 },
157 getRecordChart(): RecordChartType | undefined { 192 getRecordChart(): RecordChartType | undefined {
158 - return this.recordChart 193 + // return this.recordChart
  194 + const findCurrentPage = this.pageConfig.pageList.findIndex(pageItem => pageItem.id === this.pageConfig.currentActiveId)
  195 + return this.pageConfig.pageList[findCurrentPage]?.recordChart
159 }, 196 },
160 getRequestGlobalConfig(): RequestGlobalConfigType { 197 getRequestGlobalConfig(): RequestGlobalConfigType {
161 - return this.requestGlobalConfig 198 + // return this.requestGlobalConfig
  199 + const findCurrentPage = this.pageConfig.pageList.findIndex(pageItem => pageItem.id === this.pageConfig.currentActiveId)
  200 + return this.pageConfig.pageList[findCurrentPage]?.requestGlobalConfig
162 }, 201 },
163 getComponentList(): Array<CreateComponentType | CreateComponentGroupType> { 202 getComponentList(): Array<CreateComponentType | CreateComponentGroupType> {
164 - return this.componentList 203 + // return this.componentList
  204 + const findCurrentPage = this.pageConfig.pageList.findIndex(pageItem => pageItem.id === this.pageConfig.currentActiveId)
  205 + return this.pageConfig.pageList[findCurrentPage]?.componentList
  206 + },
  207 + getPageConfig(): ChartEditStoreType['pageConfig'] {
  208 + return this.pageConfig
  209 + },
  210 + getPageList(): PageChartListItem['pageList'] {
  211 + return this.pageConfig.pageList
165 } 212 }
166 }, 213 },
167 actions: { 214 actions: {
  215 + // * 设置当前页面EditCanvasConfig配置
  216 + setPageEditCanvasConfig(editCanvasConfig: EditCanvasConfigType) {
  217 + const findCurrentPage = this.pageConfig.pageList.findIndex(pageItem => pageItem.id === this.pageConfig.currentActiveId)
  218 + this.pageConfig.pageList[findCurrentPage].editCanvasConfig = editCanvasConfig
  219 + },
  220 + // * 设置当前页面全局配置
  221 + setPageRequestGlobalConfig(requestGlobalConfig: RequestGlobalConfigType) {
  222 + const findCurrentPage = this.pageConfig.pageList.findIndex(pageItem => pageItem.id === this.pageConfig.currentActiveId)
  223 + this.pageConfig.pageList[findCurrentPage].requestGlobalConfig = requestGlobalConfig
  224 + },
  225 + // * 设置页面配置
  226 + setPageConfig(pageConfig: ChartEditStoreType['pageConfig']) {
  227 + this.pageConfig = pageConfig
  228 + },
  229 + // * 设置页面列表
  230 + setPageList(pageList: PageChartEditStoreType[]) {
  231 + this.pageConfig.pageList = pageList
  232 + },
  233 + getPageIndexByPageItem(page: PageChartEditStoreType) {
  234 + return this.pageConfig.pageList.findIndex(pageItem => pageItem.id === page.id)
  235 + },
  236 + // * 根据页面id删除对应列表
  237 + pageIdRemovePageItem(page: PageChartEditStoreType) {
  238 + if (this.pageConfig.pageList.length <= 1) {
  239 + this.pageConfig.currentActiveIndex = 0
  240 + this.addPageList()
  241 + }
  242 + const findCurrentPageIndex = this.getPageIndexByPageItem(page)
  243 + let nextIndex = findCurrentPageIndex + 1
  244 + if (!this.pageConfig.pageList[nextIndex]) nextIndex = 0
  245 + this.setCurrentPageSelectId(this.pageConfig.pageList[nextIndex].id)
  246 + this.pageConfig.pageList.splice(findCurrentPageIndex, 1)
  247 + },
  248 + copyPage(page: PageChartEditStoreType) {
  249 + const index = this.getPageIndexByPageItem(page)
  250 + const copySource = this.pageConfig.pageList[index]
  251 + const { title } = copySource
  252 + const target = cloneDeep(copySource)
  253 + const newId = getUUID()
  254 + Object.assign(target, { id: newId, title: `${title} 副本` } as PageChartEditStoreType)
  255 + target.componentList.forEach(item => item.id = getUUID())
  256 + this.pageConfig.pageList.push(target)
  257 + this.pageConfig.currentActiveIndex++
  258 + this.setCurrentPageSelectId(newId)
  259 + },
  260 + // * 当前页面置空
  261 + emptyPageList(): void {
  262 + this.pageConfig.pageList = []
  263 + },
  264 + // * 当前页面组件列表置空
  265 + emptyPageComponentList(): void {
  266 + const findCurrentPage = this.pageConfig.pageList.findIndex(pageItem => pageItem.id === this.pageConfig.currentActiveId)
  267 + this.pageConfig.pageList[findCurrentPage].componentList = []
  268 + },
  269 + // * 设备当前页面组件列表
  270 + setPageComponentList(componentList: Array<CreateComponentType | CreateComponentGroupType>): void {
  271 + const findCurrentPage = this.pageConfig.pageList.findIndex(pageItem => pageItem.id === this.pageConfig.currentActiveId)
  272 + this.pageConfig.pageList[findCurrentPage].componentList = componentList
  273 + },
  274 + // * 当前页面追加数据项
  275 + addPageList(pageItem?: PageChartEditStoreType) {
  276 + pageItem = pageItem || createNewPageItem(getUUID(), `第 ${++this.pageConfig.currentActiveIndex} 页`)
  277 + this.pageConfig.pageList.push(pageItem)
  278 + },
  279 + // * 当前页面的选中id
  280 + setCurrentPageSelectId(currentActiveId: string) {
  281 + this.pageConfig.currentActiveId = currentActiveId
  282 + },
168 // * 获取需要存储的数据项 283 // * 获取需要存储的数据项
169 getStorageInfo(): ChartEditStorage { 284 getStorageInfo(): ChartEditStorage {
  285 + // return {
  286 + // [ChartEditStoreEnum.EDIT_CANVAS_CONFIG]: this.getEditCanvasConfig,
  287 + // [ChartEditStoreEnum.COMPONENT_LIST]: this.getComponentList,
  288 + // [ChartEditStoreEnum.REQUEST_GLOBAL_CONFIG]: this.getRequestGlobalConfig
  289 + // }
170 return { 290 return {
171 - [ChartEditStoreEnum.EDIT_CANVAS_CONFIG]: this.getEditCanvasConfig,  
172 - [ChartEditStoreEnum.COMPONENT_LIST]: this.getComponentList,  
173 - [ChartEditStoreEnum.REQUEST_GLOBAL_CONFIG]: this.getRequestGlobalConfig 291 + [ChartEditStoreEnum.PAGE_CONFIG]: this.getPageConfig,
174 } 292 }
175 }, 293 },
  294 + setEditCanvasDom(key: EditCanvasTypeEnum.EDIT_LAYOUT_DOM | EditCanvasTypeEnum.EDIT_CONTENT_DOM, value: Nullable<HTMLElement>) {
  295 + this[key] = value
  296 + },
176 // * 设置 editCanvas 数据项 297 // * 设置 editCanvas 数据项
177 setEditCanvas<T extends keyof EditCanvasType, K extends EditCanvasType[T]>(key: T, value: K) { 298 setEditCanvas<T extends keyof EditCanvasType, K extends EditCanvasType[T]>(key: T, value: K) {
178 - this.editCanvas[key] = value 299 + // this.editCanvas[key] = value
  300 + const findCurrentPage = this.pageConfig.pageList.findIndex(pageItem => pageItem.id === this.pageConfig.currentActiveId)
  301 + return this.pageConfig.pageList[findCurrentPage].editCanvas[key] = value
179 }, 302 },
180 // * 设置 editCanvasConfig（需保存后端） 数据项 303 // * 设置 editCanvasConfig（需保存后端） 数据项
181 setEditCanvasConfig<T extends keyof EditCanvasConfigType, K extends EditCanvasConfigType[T]>(key: T, value: K) { 304 setEditCanvasConfig<T extends keyof EditCanvasConfigType, K extends EditCanvasConfigType[T]>(key: T, value: K) {
182 - this.editCanvasConfig[key] = value 305 + // this.editCanvasConfig[key] = value
  306 + const findCurrentPage = this.pageConfig.pageList.findIndex(pageItem => pageItem.id === this.pageConfig.currentActiveId)
  307 + return this.pageConfig.pageList[findCurrentPage].editCanvasConfig[key] = value
183 }, 308 },
184 // * 设置右键菜单 309 // * 设置右键菜单
185 setRightMenuShow(value: boolean) { 310 setRightMenuShow(value: boolean) {
186 - this.rightMenuShow = value 311 + // this.rightMenuShow = value
  312 + const findCurrentPage = this.pageConfig.pageList.findIndex(pageItem => pageItem.id === this.pageConfig.currentActiveId)
  313 + return this.pageConfig.pageList[findCurrentPage].rightMenuShow = value
187 }, 314 },
188 // * 设置目标数据 hover 315 // * 设置目标数据 hover
189 setTargetHoverChart(hoverId?: TargetChartType['hoverId']) { 316 setTargetHoverChart(hoverId?: TargetChartType['hoverId']) {
190 - this.targetChart.hoverId = hoverId 317 + // this.targetChart.hoverId = hoverId
  318 + const findCurrentPage = this.pageConfig.pageList.findIndex(pageItem => pageItem.id === this.pageConfig.currentActiveId)
  319 + return this.pageConfig.pageList[findCurrentPage].targetChart.hoverId = hoverId
191 }, 320 },
192 // * 设置目标数据 select 321 // * 设置目标数据 select
193 - setTargetSelectChart(selectId?: string | string[], push: boolean = false) { 322 + setTargetSelectChart(selectId?: string | string[], push = false) {
194 // 重复选中 323 // 重复选中
195 - if (this.targetChart.selectId.find((e: string) => e === selectId)) return 324 + // if (this.targetChart.selectId.find((e: string) => e === selectId)) return
  325 + if (this.getTargetChart.selectId.find((e: string) => e === selectId)) return
196 326
197 // 无 id 清空 327 // 无 id 清空
198 if (!selectId) { 328 if (!selectId) {
199 - this.targetChart.selectId = [] 329 + // this.targetChart.selectId = []
  330 + this.getTargetChart.selectId = []
200 return 331 return
201 } 332 }
202 // 多选 333 // 多选
203 if (push) { 334 if (push) {
204 // 字符串 335 // 字符串
205 if (isString(selectId)) { 336 if (isString(selectId)) {
206 - this.targetChart.selectId.push(selectId) 337 + // this.targetChart.selectId.push(selectId)
  338 + this.getTargetChart.selectId.push(selectId)
207 return 339 return
208 } 340 }
209 // 数组 341 // 数组
210 if (isArray(selectId)) { 342 if (isArray(selectId)) {
211 - this.targetChart.selectId.push(...selectId) 343 + // this.targetChart.selectId.push(...selectId)
  344 + this.getTargetChart.selectId.push(...selectId)
212 return 345 return
213 } 346 }
214 } else { 347 } else {
215 // 字符串 348 // 字符串
216 if (isString(selectId)) { 349 if (isString(selectId)) {
217 - this.targetChart.selectId = [selectId] 350 + // this.targetChart.selectId = [selectId]
  351 + this.getTargetChart.selectId = [selectId]
218 return 352 return
219 } 353 }
220 // 数组 354 // 数组
221 if (isArray(selectId)) { 355 if (isArray(selectId)) {
222 - this.targetChart.selectId = selectId 356 + // this.targetChart.selectId = selectId
  357 + this.getTargetChart.selectId = selectId
223 return 358 return
224 } 359 }
225 } 360 }
226 }, 361 },
227 // * 设置记录数据 362 // * 设置记录数据
228 setRecordChart(item: RecordChartType | undefined) { 363 setRecordChart(item: RecordChartType | undefined) {
229 - this.recordChart = cloneDeep(item) 364 + // this.recordChart = cloneDeep(item)
  365 + const findCurrentPage = this.pageConfig.pageList.findIndex(pageItem => pageItem.id === this.pageConfig.currentActiveId)
  366 + return this.pageConfig.pageList[findCurrentPage].recordChart = cloneDeep(item)
230 }, 367 },
231 // * 设置鼠标位置 368 // * 设置鼠标位置
232 setMousePosition(x?: number, y?: number, startX?: number, startY?: number): void { 369 setMousePosition(x?: number, y?: number, startX?: number, startY?: number): void {
233 - if (x) this.mousePosition.x = x  
234 - if (y) this.mousePosition.y = y  
235 - if (startX) this.mousePosition.startX = startX  
236 - if (startY) this.mousePosition.startY = startY 370 + // if (x) this.mousePosition.x = x
  371 + // if (y) this.mousePosition.y = y
  372 + // if (startX) this.mousePosition.startX = startX
  373 + // if (startY) this.mousePosition.startY = startY
  374 + const findCurrentPage = this.pageConfig.pageList.findIndex(pageItem => pageItem.id === this.pageConfig.currentActiveId)
  375 + if (x) this.pageConfig.pageList[findCurrentPage].mousePosition.x = x
  376 + if (y) this.pageConfig.pageList[findCurrentPage].mousePosition.y = y
  377 + if (startX) this.pageConfig.pageList[findCurrentPage].mousePosition.startX = startX
  378 + if (startY) this.pageConfig.pageList[findCurrentPage].mousePosition.startY = startY
237 }, 379 },
238 // * 找到目标 id 数据的下标位置，id可为父级或子集数组（无则返回-1） 380 // * 找到目标 id 数据的下标位置，id可为父级或子集数组（无则返回-1）
239 fetchTargetIndex(id?: string): number { 381 fetchTargetIndex(id?: string): number {
@@ -242,8 +384,8 @@ export const useChartEditStore = defineStore({ @@ -242,8 +384,8 @@ export const useChartEditStore = defineStore({
242 loadingFinish() 384 loadingFinish()
243 return -1 385 return -1
244 } 386 }
245 - const targetIndex = this.componentList.findIndex(e => e.id === targetId)  
246 - 387 + // const targetIndex = this.componentList.findIndex(e => e.id === targetId)
  388 + const targetIndex = this.getComponentList.findIndex(e => e.id === targetId)
247 // 当前 389 // 当前
248 if (targetIndex !== -1) { 390 if (targetIndex !== -1) {
249 return targetIndex 391 return targetIndex
@@ -297,10 +439,14 @@ export const useChartEditStore = defineStore({ @@ -297,10 +439,14 @@ export const useChartEditStore = defineStore({
297 chartHistoryStore.createAddHistory([componentInstance]) 439 chartHistoryStore.createAddHistory([componentInstance])
298 } 440 }
299 if (isHead) { 441 if (isHead) {
300 - this.componentList.unshift(componentInstance) 442 + // this.componentList.unshift(componentInstance)
  443 + const findCurrentPage = this.pageConfig.pageList.findIndex(pageItem => pageItem.id === this.pageConfig.currentActiveId)
  444 + this.pageConfig.pageList[findCurrentPage].componentList.unshift(componentInstance)
301 return 445 return
302 } 446 }
303 - this.componentList.push(componentInstance) 447 + // this.componentList.push(componentInstance)
  448 + const findCurrentPage = this.pageConfig.pageList.findIndex(pageItem => pageItem.id === this.pageConfig.currentActiveId)
  449 + this.pageConfig.pageList[findCurrentPage].componentList.push(componentInstance)
304 }, 450 },
305 // * 删除组件 451 // * 删除组件
306 removeComponentList(id?: string | string[], isHistory = true): void { 452 removeComponentList(id?: string | string[], isHistory = true): void {
@@ -320,10 +466,12 @@ export const useChartEditStore = defineStore({ @@ -320,10 +466,12 @@ export const useChartEditStore = defineStore({
320 * 修改ws绑定组件，然后删除这个组件，ws还在继续发送消息问题 466 * 修改ws绑定组件，然后删除这个组件，ws还在继续发送消息问题
321 * 修改代码在//之间，其余源码未做修改 467 * 修改代码在//之间，其余源码未做修改
322 */ 468 */
323 - const {disconnectWs}=useChartDataSocket() 469 + const { disconnectWs } = useChartDataSocket()
324 disconnectWs(this.getComponentList[index]) 470 disconnectWs(this.getComponentList[index])
325 // 471 //
326 - this.componentList.splice(index, 1) 472 + // this.componentList.splice(index, 1)
  473 + const findCurrentPage = this.pageConfig.pageList.findIndex(pageItem => pageItem.id === this.pageConfig.currentActiveId)
  474 + this.pageConfig.pageList[findCurrentPage].componentList.splice(index, 1)
327 } 475 }
328 }) 476 })
329 isHistory && chartHistoryStore.createDeleteHistory(history) 477 isHistory && chartHistoryStore.createDeleteHistory(history)
@@ -358,13 +506,21 @@ export const useChartEditStore = defineStore({ @@ -358,13 +506,21 @@ export const useChartEditStore = defineStore({
358 // * 更新组件列表某一项的值 506 // * 更新组件列表某一项的值
359 updateComponentList(index: number, newData: CreateComponentType | CreateComponentGroupType) { 507 updateComponentList(index: number, newData: CreateComponentType | CreateComponentGroupType) {
360 if (index < 1 && index > this.getComponentList.length) return 508 if (index < 1 && index > this.getComponentList.length) return
361 - this.componentList[index] = newData 509 + // this.componentList[index] = newData
  510 + const findCurrentPage = this.pageConfig.pageList.findIndex(pageItem => pageItem.id === this.pageConfig.currentActiveId)
  511 + this.pageConfig.pageList[findCurrentPage].componentList[index] = newData
362 }, 512 },
363 // * 设置页面样式属性 513 // * 设置页面样式属性
364 setPageStyle<T extends keyof CSSStyleDeclaration>(key: T, value: any): void { 514 setPageStyle<T extends keyof CSSStyleDeclaration>(key: T, value: any): void {
365 - const dom = this.getEditCanvas.editContentDom  
366 - if (dom) {  
367 - dom.style[key] = value 515 + try {
  516 + const dom = this.editContentDom
  517 + if (dom) {
  518 + if (key) {
  519 + dom.style[key] = value
  520 + }
  521 + }
  522 + } catch (e) {
  523 + console.log(e)
368 } 524 }
369 }, 525 },
370 // * 移动组件列表层级位置到两端 526 // * 移动组件列表层级位置到两端
@@ -523,7 +679,7 @@ export const useChartEditStore = defineStore({ @@ -523,7 +679,7 @@ export const useChartEditStore = defineStore({
523 return e 679 return e
524 } 680 }
525 const isCut = recordCharts.type === HistoryActionTypeEnum.CUT 681 const isCut = recordCharts.type === HistoryActionTypeEnum.CUT
526 - const targetList = Array.isArray(recordCharts.charts) ? recordCharts.charts : [ recordCharts.charts ] 682 + const targetList = Array.isArray(recordCharts.charts) ? recordCharts.charts : [recordCharts.charts]
527 // 多项 683 // 多项
528 targetList.forEach((e: CreateComponentType | CreateComponentGroupType) => { 684 targetList.forEach((e: CreateComponentType | CreateComponentGroupType) => {
529 this.addComponentList(parseHandle(e), undefined, true) 685 this.addComponentList(parseHandle(e), undefined, true)
@@ -543,7 +699,9 @@ export const useChartEditStore = defineStore({ @@ -543,7 +699,9 @@ export const useChartEditStore = defineStore({
543 setBackAndSetForwardHandle(HistoryItem: HistoryItemType, isForward = false) { 699 setBackAndSetForwardHandle(HistoryItem: HistoryItemType, isForward = false) {
544 // 处理画布 700 // 处理画布
545 if (HistoryItem.targetType === HistoryTargetTypeEnum.CANVAS) { 701 if (HistoryItem.targetType === HistoryTargetTypeEnum.CANVAS) {
546 - this.editCanvas = HistoryItem.historyData[0] as EditCanvasType 702 + // this.editCanvas = HistoryItem.historyData[0] as EditCanvasType
  703 + const findCurrentPage = this.pageConfig.pageList.findIndex(pageItem => pageItem.id === this.pageConfig.currentActiveId)
  704 + this.pageConfig.pageList[findCurrentPage].editCanvas = HistoryItem.historyData[0] as EditCanvasType
547 return 705 return
548 } 706 }
549 707
@@ -551,7 +709,7 @@ export const useChartEditStore = defineStore({ @@ -551,7 +709,7 @@ export const useChartEditStore = defineStore({
551 this.setTargetSelectChart() 709 this.setTargetSelectChart()
552 710
553 // 重新选中 711 // 重新选中
554 - let historyData = HistoryItem.historyData as Array<CreateComponentType | CreateComponentGroupType> 712 + const historyData = HistoryItem.historyData as Array<CreateComponentType | CreateComponentGroupType>
555 if (isArray(historyData)) { 713 if (isArray(historyData)) {
556 // 选中目标元素，支持多个 714 // 选中目标元素，支持多个
557 historyData.forEach((item: CreateComponentType | CreateComponentGroupType) => { 715 historyData.forEach((item: CreateComponentType | CreateComponentGroupType) => {
@@ -760,7 +918,9 @@ export const useChartEditStore = defineStore({ @@ -760,7 +918,9 @@ export const useChartEditStore = defineStore({
760 }) 918 })
761 newSelectIds.forEach((id: string) => { 919 newSelectIds.forEach((id: string) => {
762 // 获取目标数据并从 list 中移除 (成组后不可再次成组, 断言处理) 920 // 获取目标数据并从 list 中移除 (成组后不可再次成组, 断言处理)
763 - const item = this.componentList.splice(this.fetchTargetIndex(id), 1)[0] as CreateComponentType 921 + // const item = this.componentList.splice(this.fetchTargetIndex(id), 1)[0] as CreateComponentType
  922 + const findCurrentPage = this.pageConfig.pageList.findIndex(pageItem => pageItem.id === this.pageConfig.currentActiveId)
  923 + const item = this.pageConfig.pageList[findCurrentPage].componentList.splice(this.fetchTargetIndex(id), 1)[0] as CreateComponentType
764 const { x, y, w, h } = item.attr 924 const { x, y, w, h } = item.attr
765 const { l, t, r, b } = groupAttr 925 const { l, t, r, b } = groupAttr
766 // 左 926 // 左
@@ -848,7 +1008,7 @@ export const useChartEditStore = defineStore({ @@ -848,7 +1008,7 @@ export const useChartEditStore = defineStore({
848 } 1008 }
849 }, 1009 },
850 // * 锁定 1010 // * 锁定
851 - setLock(status: boolean = true, isHistory: boolean = true) { 1011 + setLock(status = true, isHistory = true) {
852 try { 1012 try {
853 // 暂不支持多选 1013 // 暂不支持多选
854 if (this.getTargetChart.selectId.length > 1) return 1014 if (this.getTargetChart.selectId.length > 1) return
@@ -877,11 +1037,11 @@ export const useChartEditStore = defineStore({ @@ -877,11 +1037,11 @@ export const useChartEditStore = defineStore({
877 } 1037 }
878 }, 1038 },
879 // * 解除锁定 1039 // * 解除锁定
880 - setUnLock(isHistory: boolean = true) { 1040 + setUnLock(isHistory = true) {
881 this.setLock(false, isHistory) 1041 this.setLock(false, isHistory)
882 }, 1042 },
883 // * 隐藏 1043 // * 隐藏
884 - setHide(status: boolean = true, isHistory: boolean = true) { 1044 + setHide(status = true, isHistory = true) {
885 try { 1045 try {
886 // 暂不支持多选 1046 // 暂不支持多选
887 if (this.getTargetChart.selectId.length > 1) return 1047 if (this.getTargetChart.selectId.length > 1) return
@@ -910,25 +1070,30 @@ export const useChartEditStore = defineStore({ @@ -910,25 +1070,30 @@ export const useChartEditStore = defineStore({
910 } 1070 }
911 }, 1071 },
912 // * 显示 1072 // * 显示
913 - setShow(isHistory: boolean = true) { 1073 + setShow(isHistory = true) {
914 this.setHide(false, isHistory) 1074 this.setHide(false, isHistory)
915 }, 1075 },
916 // ---------------- 1076 // ----------------
917 // * 设置页面大小 1077 // * 设置页面大小
918 setPageSize(scale: number): void { 1078 setPageSize(scale: number): void {
919 - this.setPageStyle('height', `${this.editCanvasConfig.height * scale}px`)  
920 - this.setPageStyle('width', `${this.editCanvasConfig.width * scale}px`) 1079 + // this.setPageStyle('height', `${this.editCanvasConfig.height * scale}px`)
  1080 + // this.setPageStyle('width', `${this.editCanvasConfig.width * scale}px`)
  1081 + this.setPageStyle('height', `${this.getEditCanvasConfig.height * scale}px`)
  1082 + this.setPageStyle('width', `${this.getEditCanvasConfig.width * scale}px`)
921 }, 1083 },
922 // * 计算缩放 1084 // * 计算缩放
923 computedScale() { 1085 computedScale() {
924 - if (this.getEditCanvas.editLayoutDom) { 1086 + if (this.editLayoutDom) {
925 // 现有展示区域 1087 // 现有展示区域
926 - const width = this.getEditCanvas.editLayoutDom.clientWidth - this.getEditCanvas.offset * 2 - 5  
927 - const height = this.getEditCanvas.editLayoutDom.clientHeight - this.getEditCanvas.offset * 4 1088 + const width = this.editLayoutDom.clientWidth - this.getEditCanvas.offset * 2 - 5
  1089 + const height = this.editLayoutDom.clientHeight - this.getEditCanvas.offset * 4
928 1090
929 // 用户设定大小 1091 // 用户设定大小
930 - const editCanvasWidth = this.editCanvasConfig.width  
931 - const editCanvasHeight = this.editCanvasConfig.height 1092 + // const editCanvasWidth = this.editCanvasConfig.width
  1093 + // const editCanvasHeight = this.editCanvasConfig.height
  1094 + const findCurrentPage = this.pageConfig.pageList.findIndex(pageItem => pageItem.id === this.pageConfig.currentActiveId)
  1095 + const editCanvasWidth = this.pageConfig.pageList[findCurrentPage].editCanvasConfig.width
  1096 + const editCanvasHeight = this.pageConfig.pageList[findCurrentPage].editCanvasConfig.height
932 1097
933 // 需保持的比例 1098 // 需保持的比例
934 const baseProportion = parseFloat((editCanvasWidth / editCanvasHeight).toFixed(5)) 1099 const baseProportion = parseFloat((editCanvasWidth / editCanvasHeight).toFixed(5))
@@ -974,3 +1139,4 @@ export const useChartEditStore = defineStore({ @@ -974,3 +1139,4 @@ export const useChartEditStore = defineStore({
974 } 1139 }
975 } 1140 }
976 }) 1141 })
  1142 +//
@@ -2,12 +2,12 @@ @@ -2,12 +2,12 @@
2 import { EditCanvasConfigEnum } from '@/store/modules/chartEditStore/chartEditStore.d'; 2 import { EditCanvasConfigEnum } from '@/store/modules/chartEditStore/chartEditStore.d';
3 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'; 3 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore';
4 import { NEllipsis, NImage, NSelect, NSpace, NText, SelectOption } from 'naive-ui'; 4 import { NEllipsis, NImage, NSelect, NSpace, NText, SelectOption } from 'naive-ui';
5 -import { h } from 'vue'; 5 +import { computed, h } from 'vue';
6 import { useBackgroundSelect } from '@/utils/external/useBackgroundImageSelect'; 6 import { useBackgroundSelect } from '@/utils/external/useBackgroundImageSelect';
7 7
8 const emit = defineEmits(['bgChange']) 8 const emit = defineEmits(['bgChange'])
9 const chartEditStore = useChartEditStore() 9 const chartEditStore = useChartEditStore()
10 -const canvasConfig = chartEditStore.getEditCanvasConfig 10 +const canvasConfig = computed(() => chartEditStore.getEditCanvasConfig)
11 11
12 const { getAllBackgroundImageList, getBackgroundImagePath } = useBackgroundSelect() 12 const { getAllBackgroundImageList, getBackgroundImagePath } = useBackgroundSelect()
13 13
@@ -23,7 +23,7 @@ const handleUpdateValue = (value: string) => { @@ -23,7 +23,7 @@ const handleUpdateValue = (value: string) => {
23 emit('bgChange',value) 23 emit('bgChange',value)
24 } 24 }
25 25
26 -const removeBg = ()=> canvasConfig.backgroundImage = null 26 +const removeBg = ()=> canvasConfig.value.backgroundImage = null
27 defineExpose({ 27 defineExpose({
28 removeBg 28 removeBg
29 }) 29 })
@@ -128,7 +128,7 @@ @@ -128,7 +128,7 @@
128 </template> 128 </template>
129 129
130 <script setup lang="ts"> 130 <script setup lang="ts">
131 -import { ref, nextTick, watch } from 'vue' 131 +import { ref, nextTick, watch, computed } from 'vue'
132 import { backgroundImageSize } from '@/settings/designSetting' 132 import { backgroundImageSize } from '@/settings/designSetting'
133 import { swatchesColors } from '@/settings/chartThemes/index' 133 import { swatchesColors } from '@/settings/chartThemes/index'
134 import { FileTypeEnum } from '@/enums/fileTypeEnum' 134 import { FileTypeEnum } from '@/enums/fileTypeEnum'
@@ -150,7 +150,7 @@ const { ColorPaletteIcon } = icon.ionicons5 @@ -150,7 +150,7 @@ const { ColorPaletteIcon } = icon.ionicons5
150 const { ScaleIcon, FitToScreenIcon, FitToHeightIcon, FitToWidthIcon } = icon.carbon 150 const { ScaleIcon, FitToScreenIcon, FitToHeightIcon, FitToWidthIcon } = icon.carbon
151 151
152 const chartEditStore = useChartEditStore() 152 const chartEditStore = useChartEditStore()
153 -const canvasConfig = chartEditStore.getEditCanvasConfig 153 +const canvasConfig = computed(() => chartEditStore.getEditCanvasConfig)
154 const editCanvas = chartEditStore.getEditCanvas 154 const editCanvas = chartEditStore.getEditCanvas
155 155
156 const uploadFileListRef = ref() 156 const uploadFileListRef = ref()
@@ -208,7 +208,7 @@ const previewTypeList = [ @@ -208,7 +208,7 @@ const previewTypeList = [
208 ] 208 ]
209 209
210 watch( 210 watch(
211 - () => canvasConfig.selectColor, 211 + () => canvasConfig.value.selectColor,
212 newValue => { 212 newValue => {
213 selectColorValue.value = newValue ? 0 : 1 213 selectColorValue.value = newValue ? 0 : 1
214 }, 214 },
@@ -245,7 +245,7 @@ const beforeUploadHandle = async ({ file }) => { @@ -245,7 +245,7 @@ const beforeUploadHandle = async ({ file }) => {
245 245
246 // 应用颜色 246 // 应用颜色
247 const selectColorValueHandle = (value: number) => { 247 const selectColorValueHandle = (value: number) => {
248 - canvasConfig.selectColor = value == 0 248 + canvasConfig.value.selectColor = value == 0
249 } 249 }
250 250
251 // THINGS_KIT 优化清除背景，背景选择下拉框值还存在 251 // THINGS_KIT 优化清除背景，背景选择下拉框值还存在
@@ -270,7 +270,7 @@ const switchSelectColorHandle = () => { @@ -270,7 +270,7 @@ const switchSelectColorHandle = () => {
270 // 清除颜色 270 // 清除颜色
271 const clearColor = () => { 271 const clearColor = () => {
272 chartEditStore.setEditCanvasConfig(EditCanvasConfigEnum.BACKGROUND, undefined) 272 chartEditStore.setEditCanvasConfig(EditCanvasConfigEnum.BACKGROUND, undefined)
273 - if (canvasConfig.backgroundImage) { 273 + if (canvasConfig.value.backgroundImage) {
274 chartEditStore.setEditCanvasConfig(EditCanvasConfigEnum.SELECT_COLOR, false) 274 chartEditStore.setEditCanvasConfig(EditCanvasConfigEnum.SELECT_COLOR, false)
275 } 275 }
276 switchSelectColorHandle() 276 switchSelectColorHandle()
@@ -234,7 +234,7 @@ defineExpose({ @@ -234,7 +234,7 @@ defineExpose({
234 </NSelect> 234 </NSelect>
235 </NInputGroup> 235 </NInputGroup>
236 </SettingItem> 236 </SettingItem>
237 - <SettingItem name="更新间隔，为 0 只会初始化"> 237 + <SettingItem v-if="requestContentTypeRef !== RequestContentTypeEnum.WEB_SOCKET" name="更新间隔，为 0 只会初始化">
238 <NInputGroup> 238 <NInputGroup>
239 <NInputNumber v-model:value="requestIntervalValueRef" class="select-time-number" size="small" min="0" 239 <NInputNumber v-model:value="requestIntervalValueRef" class="select-time-number" size="small" min="0"
240 :show-button="false" placeholder="请输入数字" /> 240 :show-button="false" placeholder="请输入数字" />
@@ -39,7 +39,7 @@ const getConfigurationData = (): RequestConfigType => { @@ -39,7 +39,7 @@ const getConfigurationData = (): RequestConfigType => {
39 sql: unref(requestSQLContentRef) 39 sql: unref(requestSQLContentRef)
40 }, 40 },
41 requestParams: unref(requestParamsRef), 41 requestParams: unref(requestParamsRef),
42 - requestUrl: `${chartEditStore.requestGlobalConfig.requestOriginUrl}${unref(requestUrlRef)}` 42 + requestUrl: `${chartEditStore.getRequestGlobalConfig.requestOriginUrl}${unref(requestUrlRef)}`
43 } 43 }
44 } 44 }
45 45
@@ -19,6 +19,6 @@ const currenPanel = ref(RequestParamsTypeEnum.HEADER) @@ -19,6 +19,6 @@ const currenPanel = ref(RequestParamsTypeEnum.HEADER)
19 <NTabPane v-model:value="currenPanel" v-for="item in tabs" :name="item" :tab="item" :key="item" /> 19 <NTabPane v-model:value="currenPanel" v-for="item in tabs" :name="item" :tab="item" :key="item" />
20 </NTabs> 20 </NTabs>
21 <section> 21 <section>
22 - <ParamsTable v-if="currenPanel === RequestParamsTypeEnum.HEADER" v-model:value="chartEditStore.requestGlobalConfig.requestParams.Header" /> 22 + <ParamsTable v-if="currenPanel === RequestParamsTypeEnum.HEADER" v-model:value="chartEditStore.getRequestGlobalConfig.requestParams.Header" />
23 </section> 23 </section>
24 </template> 24 </template>
@@ -42,16 +42,16 @@ const themeColor = computed(() => { @@ -42,16 +42,16 @@ const themeColor = computed(() => {
42 }"> 42 }">
43 <!-- 源地址 --> 43 <!-- 源地址 -->
44 <SettingItem name="前置 URL"> 44 <SettingItem name="前置 URL">
45 - <NInput v-model:value="chartEditStore.requestGlobalConfig.requestOriginUrl" default-value="http://127.0.0.1" :disabled="editDisabled" 45 + <NInput v-model:value="chartEditStore.getRequestGlobalConfig.requestOriginUrl" default-value="http://127.0.0.1" :disabled="editDisabled"
46 size="small" placeholder="例:http://127.0.0.1"></NInput> 46 size="small" placeholder="例:http://127.0.0.1"></NInput>
47 </SettingItem> 47 </SettingItem>
48 <SettingItem name="更新间隔，为 0 只会初始化"> 48 <SettingItem name="更新间隔，为 0 只会初始化">
49 <NInputGroup> 49 <NInputGroup>
50 - <NInputNumber v-model:value="chartEditStore.requestGlobalConfig.requestInterval" class="select-time-number" 50 + <NInputNumber v-model:value="chartEditStore.getRequestGlobalConfig.requestInterval" class="select-time-number"
51 size="small" min="0" :show-button="false" :disabled="editDisabled" placeholder="请输入数字"> 51 size="small" min="0" :show-button="false" :disabled="editDisabled" placeholder="请输入数字">
52 </NInputNumber> 52 </NInputNumber>
53 <!-- 单位 --> 53 <!-- 单位 -->
54 - <NSelect v-model:value="chartEditStore.requestGlobalConfig.requestIntervalUnit" class="select-time-options" 54 + <NSelect v-model:value="chartEditStore.getRequestGlobalConfig.requestIntervalUnit" class="select-time-options"
55 size="small" :default-value="RequestHttpIntervalEnum.SECOND" :options="selectTimeOptions as SelectOption[]" 55 size="small" :default-value="RequestHttpIntervalEnum.SECOND" :options="selectTimeOptions as SelectOption[]"
56 :disabled="editDisabled" /> 56 :disabled="editDisabled" />
57 </NInputGroup> 57 </NInputGroup>
@@ -49,7 +49,7 @@ const selectTarget = computed<CreateComponentType | CreateComponentGroupType | u @@ -49,7 +49,7 @@ const selectTarget = computed<CreateComponentType | CreateComponentGroupType | u
49 const selectId = chartEditStore.getTargetChart.selectId 49 const selectId = chartEditStore.getTargetChart.selectId
50 // 排除多个 50 // 排除多个
51 if (selectId.length !== 1) return undefined 51 if (selectId.length !== 1) return undefined
52 - const target = chartEditStore.componentList[chartEditStore.fetchTargetIndex()] 52 + const target = chartEditStore.getComponentList[chartEditStore.fetchTargetIndex()]
53 return target as CreateComponentType | CreateComponentGroupType 53 return target as CreateComponentType | CreateComponentGroupType
54 }) 54 })
55 55
@@ -49,7 +49,7 @@ @@ -49,7 +49,7 @@
49 </n-input-group> 49 </n-input-group>
50 </setting-item-box> 50 </setting-item-box>
51 51
52 - <setting-item-box :alone="true"> 52 + <setting-item-box v-if="!interactActionsIsPageChange" :alone="true">
53 <template #name> 53 <template #name>
54 <n-text>绑定</n-text> 54 <n-text>绑定</n-text>
55 <n-tooltip trigger="hover"> 55 <n-tooltip trigger="hover">
@@ -72,8 +72,26 @@ @@ -72,8 +72,26 @@
72 :options="fnEventsOptions()" 72 :options="fnEventsOptions()"
73 /> 73 />
74 </setting-item-box> 74 </setting-item-box>
  75 +
  76 + <!-- THINGS_KIT 修改多画布切换相关代码 用于切换画布 -->
  77 + <setting-item-box v-if="interactActionsIsPageChange" :alone="true">
  78 + <template #name>
  79 + <n-text>大屏</n-text>
  80 + </template>
  81 + <n-select
  82 + class="select-type-options"
  83 + value-field="id"
  84 + label-field="title"
  85 + size="tiny"
  86 + filterable
  87 + placeholder="请选择大屏"
  88 + v-model:value="item.interactComponentId"
  89 + :options="fnPageConfigEventsOptions()"
  90 + />
  91 + </setting-item-box>
  92 + <!-- THINGS_KIT 修改多画布切换相关代码 用于切换画布 -->
75 93
76 - <setting-item-box v-if="fnDimensionsAndSource(item.interactOn).length" name="查询结果" :alone="true"> 94 + <setting-item-box v-if="!interactActionsIsPageChange&&fnDimensionsAndSource(item.interactOn).length" name="查询结果" :alone="true">
77 <n-table size="small" striped> 95 <n-table size="small" striped>
78 <thead> 96 <thead>
79 <tr> 97 <tr>
@@ -89,8 +107,9 @@ @@ -89,8 +107,9 @@
89 </n-table> 107 </n-table>
90 </setting-item-box> 108 </setting-item-box>
91 109
92 - <n-tag :bordered="false" type="primary"> 关联目标请求参数 </n-tag> 110 + <n-tag v-if="!interactActionsIsPageChange" :bordered="false" type="primary"> 关联目标请求参数 </n-tag>
93 111
  112 + <div v-if="!interactActionsIsPageChange">
94 <setting-item-box 113 <setting-item-box
95 :name="requestParamsItem" 114 :name="requestParamsItem"
96 v-for="requestParamsItem in requestParamsTypeList" 115 v-for="requestParamsItem in requestParamsTypeList"
@@ -116,6 +135,7 @@ @@ -116,6 +135,7 @@
116 暂无数据 135 暂无数据
117 </n-text> 136 </n-text>
118 </setting-item-box> 137 </setting-item-box>
  138 + </div>
119 </n-card> 139 </n-card>
120 </n-collapse-item> 140 </n-collapse-item>
121 </template> 141 </template>
@@ -131,11 +151,20 @@ import { icon } from '@/plugins' @@ -131,11 +151,20 @@ import { icon } from '@/plugins'
131 import noData from '@/assets/images/canvas/noData.png' 151 import noData from '@/assets/images/canvas/noData.png'
132 import { goDialog } from '@/utils' 152 import { goDialog } from '@/utils'
133 import { useTargetData } from '../../../hooks/useTargetData.hook' 153 import { useTargetData } from '../../../hooks/useTargetData.hook'
  154 +import {PageChartEditStoreType} from '@/store/modules/chartEditStore/chartEditStore.d'
134 155
135 const { CloseIcon, AddIcon, HelpOutlineIcon } = icon.ionicons5 156 const { CloseIcon, AddIcon, HelpOutlineIcon } = icon.ionicons5
136 const { targetData, chartEditStore } = useTargetData() 157 const { targetData, chartEditStore } = useTargetData()
137 const requestParamsTypeList = [RequestParamsTypeEnum.PARAMS, RequestParamsTypeEnum.HEADER] 158 const requestParamsTypeList = [RequestParamsTypeEnum.PARAMS, RequestParamsTypeEnum.HEADER]
138 159
  160 +
  161 +// THINGS_KIT 修改多画布切换相关代码 用于切换画布
  162 +const interactActionsIsPageChange = computed(() => {
  163 + const interactActions = targetData.value.interactActions
  164 + if (!interactActions) return []
  165 + return interactActions.map(value => value.interactType).includes(InteractEventOn.PAGE_CHANGE)
  166 +})
  167 +
139 // 获取组件交互事件列表 168 // 获取组件交互事件列表
140 const interactActions = computed(() => { 169 const interactActions = computed(() => {
141 const interactActions = targetData.value.interactActions 170 const interactActions = targetData.value.interactActions
@@ -154,12 +183,12 @@ const option = computed(() => { @@ -154,12 +183,12 @@ const option = computed(() => {
154 // 绑定组件数据 request 183 // 绑定组件数据 request
155 const fnGetRequest = (id: string | undefined, key: RequestParamsTypeEnum) => { 184 const fnGetRequest = (id: string | undefined, key: RequestParamsTypeEnum) => {
156 if (!id) return {} 185 if (!id) return {}
157 - const globalConfigPindApr = chartEditStore.requestGlobalConfig.requestDataPond.find(item => { 186 + const globalConfigPindApr = chartEditStore.getRequestGlobalConfig.requestDataPond.find(item => {
158 return item.dataPondId === id 187 return item.dataPondId === id
159 })?.dataPondRequestConfig.requestParams 188 })?.dataPondRequestConfig.requestParams
160 189
161 if (globalConfigPindApr) return globalConfigPindApr[key] 190 if (globalConfigPindApr) return globalConfigPindApr[key]
162 - return chartEditStore.componentList[chartEditStore.fetchTargetIndex(id)]?.request.requestParams[key] 191 + return chartEditStore.getComponentList[chartEditStore.fetchTargetIndex(id)]?.request.requestParams[key]
163 } 192 }
164 193
165 // 查询结果 194 // 查询结果
@@ -202,7 +231,7 @@ const fnEventsOptions = (): Array<SelectOption | SelectGroupOption> => { @@ -202,7 +231,7 @@ const fnEventsOptions = (): Array<SelectOption | SelectGroupOption> => {
202 ) 231 )
203 } 232 }
204 233
205 - const filterOptionList = fnFlattern(chartEditStore.componentList).filter(item => { 234 + const filterOptionList = fnFlattern(chartEditStore.getComponentList).filter(item => {
206 // 排除自己 235 // 排除自己
207 const isNotSelf = item.id !== targetData.value.id 236 const isNotSelf = item.id !== targetData.value.id
208 // 排除静态组件 237 // 排除静态组件
@@ -220,7 +249,7 @@ const fnEventsOptions = (): Array<SelectOption | SelectGroupOption> => { @@ -220,7 +249,7 @@ const fnEventsOptions = (): Array<SelectOption | SelectGroupOption> => {
220 type: 'componentList' 249 type: 'componentList'
221 })) 250 }))
222 251
223 - const requestDataPond = chartEditStore.requestGlobalConfig.requestDataPond.map(item => ({ 252 + const requestDataPond = chartEditStore.getRequestGlobalConfig.requestDataPond.map(item => ({
224 id: item.dataPondId, 253 id: item.dataPondId,
225 title: item.dataPondName, 254 title: item.dataPondName,
226 disabled: false, 255 disabled: false,
@@ -234,10 +263,23 @@ const fnEventsOptions = (): Array<SelectOption | SelectGroupOption> => { @@ -234,10 +263,23 @@ const fnEventsOptions = (): Array<SelectOption | SelectGroupOption> => {
234 } 263 }
235 }) 264 })
236 }) 265 })
237 - 266 +console.log(tarArr)
238 return tarArr 267 return tarArr
239 } 268 }
240 269
  270 +// 大屏列表
  271 +const fnPageConfigEventsOptions = (): Array<SelectOption | SelectGroupOption> => {
  272 + const getPageList = chartEditStore.getPageList.map((pageItem:PageChartEditStoreType)=>{
  273 + return {
  274 + id:pageItem.id,
  275 + title:pageItem.title,
  276 + disabled: false,
  277 + type: 'componentList'
  278 + }
  279 + })
  280 + return getPageList
  281 +}
  282 +
241 // 新增模块 283 // 新增模块
242 const evAddEventsFn = () => { 284 const evAddEventsFn = () => {
243 targetData.value.events.interactEvents.push({ 285 targetData.value.events.interactEvents.push({
@@ -102,7 +102,8 @@ const selectTarget = computed(() => { @@ -102,7 +102,8 @@ const selectTarget = computed(() => {
102 const selectId = chartEditStore.getTargetChart.selectId 102 const selectId = chartEditStore.getTargetChart.selectId
103 // 排除多个 103 // 排除多个
104 if (selectId.length !== 1) return undefined 104 if (selectId.length !== 1) return undefined
105 - const target = chartEditStore.componentList[chartEditStore.fetchTargetIndex()] 105 + // const target = chartEditStore.componentList[chartEditStore.fetchTargetIndex()]
  106 + const target = chartEditStore.getComponentList[chartEditStore.fetchTargetIndex()]
106 if (target?.isGroup) { 107 if (target?.isGroup) {
107 // eslint-disable-next-line vue/no-side-effects-in-computed-properties 108 // eslint-disable-next-line vue/no-side-effects-in-computed-properties
108 tabsSelect.value = TabsEnum.CHART_SETTING 109 tabsSelect.value = TabsEnum.CHART_SETTING
@@ -101,7 +101,7 @@ const selectTarget = computed(() => { @@ -101,7 +101,7 @@ const selectTarget = computed(() => {
101 const selectId = chartEditStore.getTargetChart.selectId 101 const selectId = chartEditStore.getTargetChart.selectId
102 // 排除多个 102 // 排除多个
103 if (selectId.length !== 1) return undefined 103 if (selectId.length !== 1) return undefined
104 - const target = chartEditStore.componentList[chartEditStore.fetchTargetIndex()] 104 + const target = chartEditStore.getComponentList[chartEditStore.fetchTargetIndex()]
105 if (target?.isGroup) { 105 if (target?.isGroup) {
106 // eslint-disable-next-line vue/no-side-effects-in-computed-properties 106 // eslint-disable-next-line vue/no-side-effects-in-computed-properties
107 tabsSelect.value = TabsEnum.CHART_SETTING 107 tabsSelect.value = TabsEnum.CHART_SETTING
1 <template> 1 <template>
2 <div class="go-edit-bottom"> 2 <div class="go-edit-bottom">
  3 + <!-- THINGS_KIT 修改多画布切换相关代码 -->
  4 + <n-button v-if="chartEditStore.getPageList.length > 3" size="tiny" type="primary" ghost @click="pageContainerLeft">
  5 + <template #icon>
  6 + <n-icon>
  7 + <ArrowBackIcon />
  8 + </n-icon>
  9 + </template>
  10 + </n-button>
  11 + <div class="page-bottom-container">
  12 + <n-scrollbar x-scrollable ref="scrollBarRef">
  13 + <div class="page-scroll-container">
  14 + <template v-for="(pageItem) in chartEditStore.getPageList" :key="pageItem.id">
  15 + <n-button :color="chartEditStore.pageConfig.currentActiveId === pageItem.id ? 'green' : ''" size="small"
  16 + icon-placement="right" secondary strong>
  17 + <template #icon>
  18 + <n-dropdown trigger="click" @select="(key: string) => handleOperateMenu(key, pageItem)"
  19 + :options="getMenuDisableOptions">
  20 + <n-icon>
  21 + <list-icon />
  22 + </n-icon>
  23 + </n-dropdown>
  24 + </template>
  25 + <n-input v-if="pageItem.id === renamePageId" class="rename-input" v-model:value="pageRenameValue"
  26 + @keypress.enter="handleRenameBlur" @blur="handleRenameBlur(pageItem)" autofocus size="small"
  27 + placeholder="请输入页面名称"></n-input>
  28 + <span v-else @click="pageOperateCurrent(pageItem)">
  29 + {{ pageItem.title }}
  30 + </span>
  31 + </n-button>
  32 + </template>
  33 + </div>
  34 + </n-scrollbar>
  35 + </div>
  36 + <n-button v-if="chartEditStore.getPageList.length > 3" size="tiny" type="primary" ghost @click="pageContainerRight">
  37 + <template #icon>
  38 + <n-icon>
  39 + <ArrowForwardIcon />
  40 + </n-icon>
  41 + </template>
  42 + </n-button>
  43 + <n-button v-if="chartEditStore.getPageList.length < 20" size="small" secondary strong @click="pageOperateAdd">
  44 + <template #icon>
  45 + <n-icon><duplicate-icon /></n-icon>
  46 + </template>
  47 + </n-button>
  48 +
3 <n-space> 49 <n-space>
  50 + <!-- THINGS_KIT 修改多画布切换相关代码 -->
4 <!-- 历史记录 --> 51 <!-- 历史记录 -->
5 <edit-history></edit-history> 52 <edit-history></edit-history>
6 <!-- CTRL按键触发展示 --> 53 <!-- CTRL按键触发展示 -->
@@ -12,15 +59,8 @@ @@ -12,15 +59,8 @@
12 <edit-shortcut-key /> 59 <edit-shortcut-key />
13 60
14 <!-- 缩放比例 --> 61 <!-- 缩放比例 -->
15 - <n-select  
16 - ref="selectInstRef"  
17 - class="scale-btn"  
18 - v-model:value="filterValue"  
19 - size="mini"  
20 - :disabled="lockScale"  
21 - :options="filterOptions"  
22 - @update:value="selectHandle"  
23 - ></n-select> 62 + <n-select ref="selectInstRef" class="scale-btn" v-model:value="filterValue" size="mini" :disabled="lockScale"
  63 + :options="filterOptions" @update:value="selectHandle"></n-select>
24 64
25 <!-- 锁定缩放 --> 65 <!-- 锁定缩放 -->
26 <n-tooltip trigger="hover"> 66 <n-tooltip trigger="hover">
@@ -36,35 +76,28 @@ @@ -36,35 +76,28 @@
36 </n-tooltip> 76 </n-tooltip>
37 77
38 <!-- 拖动 --> 78 <!-- 拖动 -->
39 - <n-slider  
40 - class="scale-slider"  
41 - v-model:value="sliderValue"  
42 - :default-value="50"  
43 - :min="10"  
44 - :max="200"  
45 - :step="5"  
46 - :format-tooltip="sliderFormatTooltip"  
47 - :disabled="lockScale"  
48 - :marks="sliderMaks"  
49 - @update:value="sliderHandle"  
50 - ></n-slider> 79 + <n-slider class="scale-slider" v-model:value="sliderValue" :default-value="50" :min="10" :max="200" :step="5"
  80 + :format-tooltip="sliderFormatTooltip" :disabled="lockScale" :marks="sliderMaks"
  81 + @update:value="sliderHandle"></n-slider>
51 </n-space> 82 </n-space>
52 </div> 83 </div>
53 </template> 84 </template>
54 85
55 <script setup lang="ts"> 86 <script setup lang="ts">
56 import { SelectInst } from 'naive-ui' 87 import { SelectInst } from 'naive-ui'
57 -import { reactive, ref, toRefs, watchEffect } from 'vue' 88 +import { computed, reactive, ref, toRefs, unref, watchEffect } from 'vue'
58 import { icon } from '@/plugins' 89 import { icon } from '@/plugins'
59 import { EditHistory } from '../EditHistory/index' 90 import { EditHistory } from '../EditHistory/index'
60 import EditShortcutKey from '../EditShortcutKey/index.vue' 91 import EditShortcutKey from '../EditShortcutKey/index.vue'
61 import { useDesignStore } from '@/store/modules/designStore/designStore' 92 import { useDesignStore } from '@/store/modules/designStore/designStore'
62 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore' 93 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
63 -import { EditCanvasTypeEnum } from '@/store/modules/chartEditStore/chartEditStore.d' 94 +import { EditCanvasTypeEnum, PageChartEditStoreType } from '@/store/modules/chartEditStore/chartEditStore.d'
64 import { useChartLayoutStore } from '@/store/modules/chartLayoutStore/chartLayoutStore' 95 import { useChartLayoutStore } from '@/store/modules/chartLayoutStore/chartLayoutStore'
65 import { ChartLayoutStoreEnum } from '@/store/modules/chartLayoutStore/chartLayoutStore.d' 96 import { ChartLayoutStoreEnum } from '@/store/modules/chartLayoutStore/chartLayoutStore.d'
  97 +import type { MenuOption } from 'naive-ui'
  98 +import { PageOperateEnum, PageOperateNameEnum } from '@/enums/external/pageOperateEnum'
66 99
67 -const { LockClosedOutlineIcon, LockOpenOutlineIcon } = icon.ionicons5 100 +const { LockClosedOutlineIcon, LockOpenOutlineIcon, ListIcon, DuplicateIcon, ArrowBackIcon, ArrowForwardIcon } = icon.ionicons5
68 101
69 // 全局颜色 102 // 全局颜色
70 const designStore = useDesignStore() 103 const designStore = useDesignStore()
@@ -138,11 +171,76 @@ watchEffect(() => { @@ -138,11 +171,76 @@ watchEffect(() => {
138 filterValue.value = `${value}%` 171 filterValue.value = `${value}%`
139 sliderValue.value = parseInt(value) 172 sliderValue.value = parseInt(value)
140 }) 173 })
  174 +
  175 +// THINGS_KIT 修改多画布切换相关代码
  176 +
  177 +const pageRenameValue = ref('')
  178 +
  179 +const renamePageId = ref('')
  180 +
  181 +const getMenuDisableOptions = computed<MenuOption[]>(() => {
  182 + return [
  183 + {
  184 + label: PageOperateNameEnum.PAGE_OPERATE_REMOVE,
  185 + key: PageOperateEnum.PAGE_OPERATE_REMOVE,
  186 + disabled: chartEditStore.pageConfig.pageList.length <= 1
  187 + },
  188 + {
  189 + label: PageOperateNameEnum.PAGE_OPERATE_COPY,
  190 + key: PageOperateEnum.PAGE_OPERATE_COPY,
  191 + },
  192 + {
  193 + label: PageOperateNameEnum.PAGE_OPERATE_RENAME,
  194 + key: PageOperateEnum.PAGE_OPERATE_RENAME,
  195 + },
  196 + ]
  197 +})
  198 +
  199 +const handleOperateMenu = (key: string, pageItem: PageChartEditStoreType) => {
  200 + switch (key) {
  201 + case PageOperateEnum.PAGE_OPERATE_REMOVE:
  202 + chartEditStore.pageIdRemovePageItem(pageItem)
  203 + break;
  204 + case PageOperateEnum.PAGE_OPERATE_COPY:
  205 + chartEditStore.copyPage(pageItem)
  206 + break;
  207 + case PageOperateEnum.PAGE_OPERATE_RENAME:
  208 + pageRenameValue.value = pageItem.title
  209 + renamePageId.value = pageItem.id
  210 + break;
  211 + }
  212 +}
  213 +
  214 +const handleRenameBlur = (pageItem: PageChartEditStoreType) => {
  215 + pageItem.title = unref(pageRenameValue)
  216 + renamePageId.value = ''
  217 +}
  218 +
  219 +const pageOperateAdd = () => chartEditStore.addPageList()
  220 +
  221 +const pageOperateCurrent = (currentItem: PageChartEditStoreType) => {
  222 + chartEditStore.setCurrentPageSelectId(currentItem.id)
  223 +}
  224 +
  225 +const scrollBarRef = ref()
  226 +
  227 +const movePageContainer = (left: number) => {
  228 + scrollBarRef.value.scrollBy({
  229 + left
  230 + })
  231 +}
  232 +
  233 +const pageContainerLeft = () => movePageContainer(-30)
  234 +
  235 +const pageContainerRight = () => movePageContainer(30)
  236 +
  237 +// THINGS_KIT 修改多画布切换相关代码
141 </script> 238 </script>
142 239
143 <style lang="scss" scoped> 240 <style lang="scss" scoped>
144 $min-width: 500px; 241 $min-width: 500px;
145 $max-width: 670px; 242 $max-width: 670px;
  243 +
146 @include go('edit-bottom') { 244 @include go('edit-bottom') {
147 width: 100%; 245 width: 100%;
148 min-width: $min-width; 246 min-width: $min-width;
@@ -151,24 +249,41 @@ $max-width: 670px; @@ -151,24 +249,41 @@ $max-width: 670px;
151 display: flex; 249 display: flex;
152 align-items: center; 250 align-items: center;
153 justify-content: space-between; 251 justify-content: space-between;
  252 +
  253 + .page-bottom-container {
  254 + max-width: 400px;
  255 +
  256 + .page-scroll-container {
  257 + white-space: nowrap;
  258 + padding: 12px;
  259 + display: flex;
  260 + gap: 10px
  261 + }
  262 + }
  263 +
154 .bottom-ri { 264 .bottom-ri {
155 position: relative; 265 position: relative;
156 top: 15px; 266 top: 15px;
  267 +
157 .lock-icon { 268 .lock-icon {
158 padding-top: 4px; 269 padding-top: 4px;
  270 +
159 &.color { 271 &.color {
160 color: v-bind('themeColor'); 272 color: v-bind('themeColor');
161 } 273 }
162 } 274 }
  275 +
163 .scale-btn { 276 .scale-btn {
164 width: 90px; 277 width: 90px;
165 font-size: 12px; 278 font-size: 12px;
  279 +
166 @include deep() { 280 @include deep() {
167 .n-base-selection-label { 281 .n-base-selection-label {
168 padding: 3px; 282 padding: 3px;
169 } 283 }
170 } 284 }
171 } 285 }
  286 +
172 .scale-slider { 287 .scale-slider {
173 position: relative; 288 position: relative;
174 top: -4px; 289 top: -4px;
@@ -176,4 +291,9 @@ $max-width: 670px; @@ -176,4 +291,9 @@ $max-width: 670px;
176 } 291 }
177 } 292 }
178 } 293 }
  294 +
  295 +.rename-input {
  296 + width: 80px !important;
  297 + max-width: 80px !important;
  298 +}
179 </style> 299 </style>
@@ -59,7 +59,7 @@ const startY = ref(0) @@ -59,7 +59,7 @@ const startY = ref(0)
59 const lines = reactive({ h: [], v: [] }) 59 const lines = reactive({ h: [], v: [] })
60 60
61 const scale = computed(() => { 61 const scale = computed(() => {
62 - return chartEditStore.getEditCanvas.scale 62 + return chartEditStore.getEditCanvas?.scale
63 }) 63 })
64 64
65 // 滚动条拖动的高度 65 // 滚动条拖动的高度
@@ -3,6 +3,9 @@ import { UploadCustomRequestOptions } from 'naive-ui' @@ -3,6 +3,9 @@ import { UploadCustomRequestOptions } from 'naive-ui'
3 import { FileTypeEnum } from '@/enums/fileTypeEnum' 3 import { FileTypeEnum } from '@/enums/fileTypeEnum'
4 import { readFile, goDialog, JSONParse } from '@/utils' 4 import { readFile, goDialog, JSONParse } from '@/utils'
5 import { useSync } from '@/views/chart/hooks/useSync.hook' 5 import { useSync } from '@/views/chart/hooks/useSync.hook'
  6 +import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
  7 +
  8 +const chartEditStore = useChartEditStore()
6 9
7 export const useFile = () => { 10 export const useFile = () => {
8 const importUploadFileListRef = ref() 11 const importUploadFileListRef = ref()
@@ -20,6 +23,67 @@ export const useFile = () => { @@ -20,6 +23,67 @@ export const useFile = () => {
20 return true 23 return true
21 } 24 }
22 25
  26 + // THINGS_KIT 兼容导入之前的用户数据
  27 + const compatibleOldUserDataHook = (fileData:object)=>{
  28 + let userData:Recordable = fileData
  29 + if(!Reflect.get(fileData,'pageConfig')){
  30 + userData={
  31 + pageConfig:{
  32 + currentActiveId: "1",
  33 + currentActiveIndex: 1,
  34 + pageList:[
  35 + {
  36 + ...fileData,
  37 + id:"1",
  38 + title:"页面 1",
  39 + editCanvas: {
  40 + // 编辑区域 Dom
  41 + editLayoutDom: null,
  42 + editContentDom: null,
  43 + // 偏移量
  44 + offset: 20,
  45 + // 系统控制缩放
  46 + scale: 0.5,
  47 + // 用户控制的缩放
  48 + userScale: 0.5,
  49 + // 锁定缩放
  50 + lockScale: false,
  51 + // 初始化
  52 + isCreate: false,
  53 + // 拖拽中
  54 + isDrag: false,
  55 + // 框选中
  56 + isSelect: false,
  57 + // 同步中
  58 + // saveStatus: SyncEnum.PENDING,
  59 + // 代码编辑中
  60 + isCodeEdit: false
  61 + },
  62 + // 右键菜单
  63 + rightMenuShow: false,
  64 + // 鼠标定位
  65 + mousePosition: {
  66 + startX: 0,
  67 + startY: 0,
  68 + x: 0,
  69 + y: 0
  70 + },
  71 + // 目标图表
  72 + targetChart: {
  73 + hoverId: undefined,
  74 + selectId: []
  75 + },
  76 + // 记录临时数据（复制等）
  77 + recordChart: undefined,
  78 + }
  79 + ]
  80 + }
  81 + }
  82 + }
  83 + return userData
  84 + }
  85 + //
  86 +
23 // 上传-导入 87 // 上传-导入
24 const importCustomRequest = (options: UploadCustomRequestOptions) => { 88 const importCustomRequest = (options: UploadCustomRequestOptions) => {
25 const { file } = options 89 const { file } = options
@@ -35,7 +99,11 @@ export const useFile = () => { @@ -35,7 +99,11 @@ export const useFile = () => {
35 onPositiveCallback: async () => { 99 onPositiveCallback: async () => {
36 try { 100 try {
37 fileData = JSONParse(fileData) 101 fileData = JSONParse(fileData)
  102 + fileData = compatibleOldUserDataHook(fileData)
38 await updateComponent(fileData, false, true) 103 await updateComponent(fileData, false, true)
  104 + setTimeout(()=>{
  105 + chartEditStore.setPageList(fileData.pageConfig.pageList)//延时处理
  106 + },1000)
39 window['$message'].success('导入成功！') 107 window['$message'].success('导入成功！')
40 } catch (error) { 108 } catch (error) {
41 console.log(error) 109 console.log(error)
@@ -46,7 +114,11 @@ export const useFile = () => { @@ -46,7 +114,11 @@ export const useFile = () => {
46 onNegativeCallback: async () => { 114 onNegativeCallback: async () => {
47 try { 115 try {
48 fileData = JSONParse(fileData) 116 fileData = JSONParse(fileData)
  117 + fileData = compatibleOldUserDataHook(fileData)
49 await updateComponent(fileData, true, true) 118 await updateComponent(fileData, true, true)
  119 + setTimeout(()=>{
  120 + chartEditStore.setPageList(fileData.pageConfig.pageList)//延时处理
  121 + },1000)
50 window['$message'].success('导入成功！') 122 window['$message'].success('导入成功！')
51 } catch (error) { 123 } catch (error) {
52 console.log(error) 124 console.log(error)
@@ -184,8 +184,8 @@ export const useMouseHandle = () => { @@ -184,8 +184,8 @@ export const useMouseHandle = () => {
184 // 若此时按下了 CTRL, 表示多选 184 // 若此时按下了 CTRL, 表示多选
185 if (window.$KeyboardActive?.ctrl) { 185 if (window.$KeyboardActive?.ctrl) {
186 // 若已选中，则去除 186 // 若已选中，则去除
187 - if (chartEditStore.targetChart.selectId.includes(item.id)) {  
188 - const exList = chartEditStore.targetChart.selectId.filter(e => e !== item.id) 187 + if (chartEditStore.getTargetChart.selectId.includes(item.id)) {
  188 + const exList = chartEditStore.getTargetChart.selectId.filter(e => e !== item.id)
189 chartEditStore.setTargetSelectChart(exList) 189 chartEditStore.setTargetSelectChart(exList)
190 } else { 190 } else {
191 chartEditStore.setTargetSelectChart(item.id, true) 191 chartEditStore.setTargetSelectChart(item.id, true)
1 -import { onUnmounted, onMounted } from 'vue' 1 +import { onUnmounted, onMounted, watch } from 'vue'
2 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore' 2 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
3 import { EditCanvasTypeEnum } from '@/store/modules/chartEditStore/chartEditStore.d' 3 import { EditCanvasTypeEnum } from '@/store/modules/chartEditStore/chartEditStore.d'
4 4
@@ -9,11 +9,12 @@ export const useLayout = (fn: () => Promise<void>) => { @@ -9,11 +9,12 @@ export const useLayout = (fn: () => Promise<void>) => {
9 let removeScale: Function = () => { } 9 let removeScale: Function = () => { }
10 onMounted(async () => { 10 onMounted(async () => {
11 // 设置 Dom 值(ref 不生效先用 document) 11 // 设置 Dom 值(ref 不生效先用 document)
12 - chartEditStore.setEditCanvas( 12 + chartEditStore.setEditCanvasDom(
13 EditCanvasTypeEnum.EDIT_LAYOUT_DOM, 13 EditCanvasTypeEnum.EDIT_LAYOUT_DOM,
14 document.getElementById('go-chart-edit-layout') 14 document.getElementById('go-chart-edit-layout')
15 ) 15 )
16 - chartEditStore.setEditCanvas( 16 +
  17 + chartEditStore.setEditCanvasDom(
17 EditCanvasTypeEnum.EDIT_CONTENT_DOM, 18 EditCanvasTypeEnum.EDIT_CONTENT_DOM,
18 document.getElementById('go-chart-edit-content') 19 document.getElementById('go-chart-edit-content')
19 ) 20 )
@@ -25,6 +26,10 @@ export const useLayout = (fn: () => Promise<void>) => { @@ -25,6 +26,10 @@ export const useLayout = (fn: () => Promise<void>) => {
25 26
26 }) 27 })
27 28
  29 + watch(() => chartEditStore.pageConfig.currentActiveId, () => {
  30 + chartEditStore.computedScale()
  31 + })
  32 +
28 onUnmounted(() => { 33 onUnmounted(() => {
29 chartEditStore.setEditCanvas(EditCanvasTypeEnum.EDIT_LAYOUT_DOM, null) 34 chartEditStore.setEditCanvas(EditCanvasTypeEnum.EDIT_LAYOUT_DOM, null)
30 chartEditStore.setEditCanvas(EditCanvasTypeEnum.EDIT_CONTENT_DOM, null) 35 chartEditStore.setEditCanvas(EditCanvasTypeEnum.EDIT_CONTENT_DOM, null)
1 <template> 1 <template>
2 <!-- <edit-rule></edit-rule> --> 2 <!-- <edit-rule></edit-rule> -->
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"  
15 - > 3 + <content-box id="go-chart-edit-layout" :flex="true" :showTop="false" :showBottom="true" :depth="1" :xScroll="true"
  4 + :disabledScroll="true" @mousedown="mousedownHandleUnStop" @drop="dragHandle" @dragover="dragoverHandle"
  5 + @dragenter="dragoverHandle">
16 <edit-rule> 6 <edit-rule>
17 <!-- 画布主体 --> 7 <!-- 画布主体 -->
18 <div id="go-chart-edit-content" @contextmenu="handleContextMenu"> 8 <div id="go-chart-edit-content" @contextmenu="handleContextMenu">
19 <!-- 展示 --> 9 <!-- 展示 -->
20 <edit-range> 10 <edit-range>
21 <!-- 滤镜预览 --> 11 <!-- 滤镜预览 -->
22 - <div  
23 - :style="{  
24 - ...getFilterStyle(chartEditStore.getEditCanvasConfig),  
25 - ...rangeStyle  
26 - }"  
27 - > 12 + <div :style="{
  13 + ...getFilterStyle(chartEditStore.getEditCanvasConfig),
  14 + ...rangeStyle
  15 + }">
28 <!-- 图表 --> 16 <!-- 图表 -->
29 <div v-for="(item, index) in chartEditStore.getComponentList" :key="item.id"> 17 <div v-for="(item, index) in chartEditStore.getComponentList" :key="item.id">
30 <!-- 分组 --> 18 <!-- 分组 -->
31 - <edit-group  
32 - v-if="item.isGroup"  
33 - :groupData="(item as CreateComponentGroupType)"  
34 - :groupIndex="index"  
35 - ></edit-group> 19 + <edit-group v-if="item.isGroup" :groupData="(item as CreateComponentGroupType)"
  20 + :groupIndex="index"></edit-group>
36 21
37 <!-- 单组件 --> 22 <!-- 单组件 -->
38 - <edit-shape-box  
39 - v-else  
40 - :data-id="item.id"  
41 - :index="index"  
42 - :style="{ 23 + <edit-shape-box v-else :data-id="item.id" :index="index" :style="{
43 ...useComponentStyle(item.attr, index), 24 ...useComponentStyle(item.attr, index),
44 ...getBlendModeStyle(item.styles) as any 25 ...getBlendModeStyle(item.styles) as any
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)"  
52 - >  
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="{ 26 + }" :item="item" @click="mouseClickHandle($event, item)" @mousedown="mousedownHandle($event, item)"
  27 + @mouseenter="mouseenterHandle($event, item)" @mouseleave="mouseleaveHandle($event, item)"
  28 + @contextmenu="handleContextMenu($event, item, optionsHandle)">
  29 + <component class="edit-content-chart" :class="animationsClass(item.styles.animations)"
  30 + :is="item.chartConfig.chartKey" :chartConfig="item" :themeSetting="themeSetting"
  31 + :themeColor="themeColor" :style="{
61 ...useSizeStyle(item.attr), 32 ...useSizeStyle(item.attr),
62 ...getFilterStyle(item.styles), 33 ...getFilterStyle(item.styles),
63 ...getTransformStyle(item.styles) 34 ...getTransformStyle(item.styles)
64 - }"  
65 - ></component> 35 + }"></component>
66 </edit-shape-box> 36 </edit-shape-box>
67 </div> 37 </div>
68 </div> 38 </div>
@@ -84,7 +54,6 @@ @@ -84,7 +54,6 @@
84 54
85 <script lang="ts" setup> 55 <script lang="ts" setup>
86 import { onMounted, computed, provide } from 'vue' 56 import { onMounted, computed, provide } from 'vue'
87 -import { chartColors } from '@/settings/chartThemes/index'  
88 import { MenuEnum } from '@/enums/editPageEnum' 57 import { MenuEnum } from '@/enums/editPageEnum'
89 import { CreateComponentType, CreateComponentGroupType } from '@/packages/index.d' 58 import { CreateComponentType, CreateComponentGroupType } from '@/packages/index.d'
90 import { animationsClass, getFilterStyle, getTransformStyle, getBlendModeStyle, colorCustomMerge } from '@/utils' 59 import { animationsClass, getFilterStyle, getTransformStyle, getBlendModeStyle, colorCustomMerge } from '@/utils'
@@ -116,7 +85,7 @@ const { dataSyncFetch, intervalDataSyncUpdate } = useSyncRemote() @@ -116,7 +85,7 @@ const { dataSyncFetch, intervalDataSyncUpdate } = useSyncRemote()
116 provide(SCALE_KEY, null) 85 provide(SCALE_KEY, null)
117 86
118 // 布局处理 87 // 布局处理
119 -useLayout(async () => {}) 88 +useLayout(async () => { })
120 89
121 // 点击事件 90 // 点击事件
122 const { mouseenterHandle, mouseleaveHandle, mousedownHandle, mouseClickHandle } = useMouseHandle() 91 const { mouseenterHandle, mouseleaveHandle, mousedownHandle, mouseClickHandle } = useMouseHandle()
@@ -177,7 +146,6 @@ const rangeStyle = computed(() => { @@ -177,7 +146,6 @@ const rangeStyle = computed(() => {
177 // : { background: `url(${backgroundImage}) no-repeat center center / cover !important` } 146 // : { background: `url(${backgroundImage}) no-repeat center center / cover !important` }
178 // THINGS_KIT 路径转换，同步生产环境与开发环境的保存的静态资源文件路径不一致 147 // THINGS_KIT 路径转换，同步生产环境与开发环境的保存的静态资源文件路径不一致
179 : { background: `url(${getBackgroundImagePath(backgroundImage!)}) no-repeat center center / cover !important` } 148 : { background: `url(${getBackgroundImagePath(backgroundImage!)}) no-repeat center center / cover !important` }
180 - console.log(getBackgroundImagePath(backgroundImage!))  
181 return { 149 return {
182 ...computedBackground, 150 ...computedBackground,
183 width: 'inherit', 151 width: 'inherit',
@@ -155,8 +155,8 @@ const groupMousedownHandle = (e: MouseEvent) => { @@ -155,8 +155,8 @@ const groupMousedownHandle = (e: MouseEvent) => {
155 const id = props.componentGroupData.id 155 const id = props.componentGroupData.id
156 if (e.buttons === MouseEventButton.LEFT && window.$KeyboardActive?.ctrl) { 156 if (e.buttons === MouseEventButton.LEFT && window.$KeyboardActive?.ctrl) {
157 // 若已选中，则去除 157 // 若已选中，则去除
158 - if (chartEditStore.targetChart.selectId.includes(id)) {  
159 - const exList = chartEditStore.targetChart.selectId.filter(e => e !== id) 158 + if (chartEditStore.getTargetChart.selectId.includes(id)) {
  159 + const exList = chartEditStore.getTargetChart.selectId.filter(e => e !== id)
160 chartEditStore.setTargetSelectChart(exList) 160 chartEditStore.setTargetSelectChart(exList)
161 } else { 161 } else {
162 chartEditStore.setTargetSelectChart(id, true) 162 chartEditStore.setTargetSelectChart(id, true)
@@ -169,8 +169,8 @@ const mousedownHandle = (e: MouseEvent, item: CreateComponentType) => { @@ -169,8 +169,8 @@ const mousedownHandle = (e: MouseEvent, item: CreateComponentType) => {
169 const id = item.id 169 const id = item.id
170 if (e.buttons === MouseEventButton.LEFT && window.$KeyboardActive?.ctrl) { 170 if (e.buttons === MouseEventButton.LEFT && window.$KeyboardActive?.ctrl) {
171 // 若已选中，则去除 171 // 若已选中，则去除
172 - if (chartEditStore.targetChart.selectId.includes(id)) {  
173 - const exList = chartEditStore.targetChart.selectId.filter(e => e !== id) 172 + if (chartEditStore.getTargetChart.selectId.includes(id)) {
  173 + const exList = chartEditStore.getTargetChart.selectId.filter(e => e !== id)
174 chartEditStore.setTargetSelectChart(exList) 174 chartEditStore.setTargetSelectChart(exList)
175 } else { 175 } else {
176 chartEditStore.setTargetSelectChart(id, true) 176 chartEditStore.setTargetSelectChart(id, true)
@@ -34,7 +34,9 @@ watch( @@ -34,7 +34,9 @@ watch(
34 return 34 return
35 } 35 }
36 percentage.value = newValue 36 percentage.value = newValue
37 - showModal.value = newValue > 0 37 + // console.log(newValue)
  38 + // showModal.value = newValue > 0
  39 + showModal.value = newValue > 100
38 } 40 }
39 ) 41 )
40 </script> 42 </script>
1 import { fetchRouteParamsLocation, JSONStringify, JSONParse } from '@/utils' 1 import { fetchRouteParamsLocation, JSONStringify, JSONParse } from '@/utils'
2 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore' 2 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
3 -import { ProjectInfoEnum } from '@/store/external/modules/projectInfo.d'  
4 -import { onUnmounted, unref } from 'vue'  
5 -import { saveInterval } from '@/settings/designSetting' 3 +import { unref } from 'vue'
6 import throttle from 'lodash/throttle' 4 import throttle from 'lodash/throttle'
7 import html2canvas from 'html2canvas' 5 import html2canvas from 'html2canvas'
8 import { saveDataViewList, contentUpdateApi, getDataView, uploadFile } from '@/api/external/contentSave/content' 6 import { saveDataViewList, contentUpdateApi, getDataView, uploadFile } from '@/api/external/contentSave/content'
@@ -12,6 +10,7 @@ import { useProjectInfoStore } from '@/store/external/modules/projectInfo' @@ -12,6 +10,7 @@ import { useProjectInfoStore } from '@/store/external/modules/projectInfo'
12 import { useSync } from '../useSync.hook' 10 import { useSync } from '../useSync.hook'
13 import { BaseUpdateContentParams, DateViewConfigurationInfoType } from '@/api/external/contentSave/model/contentModel' 11 import { BaseUpdateContentParams, DateViewConfigurationInfoType } from '@/api/external/contentSave/model/contentModel'
14 import { useRole } from './business/useRole' 12 import { useRole } from './business/useRole'
  13 +import { ChartEditStoreType, PageChartEditStoreType } from '@/store/modules/chartEditStore/chartEditStore.d'
15 14
16 /** 15 /**
17 * * base64转file 16 * * base64转file
@@ -49,22 +48,93 @@ export const useSyncRemote = () => { @@ -49,22 +48,93 @@ export const useSyncRemote = () => {
49 projectInfoStore.setProjectInfo(projectData) 48 projectInfoStore.setProjectInfo(projectData)
50 } 49 }
51 50
  51 + // THINGS_KIT 兼容之前的用户数据
  52 + const compatibleOldUserDataHook = (fileData: ChartEditStoreType | PageChartEditStoreType): ChartEditStoreType => {
  53 + let userData = fileData
  54 + if (!Reflect.get(fileData, 'pageConfig')) {
  55 + userData = {
  56 + editContentDom: null,
  57 + editLayoutDom: null,
  58 + pageConfig: {
  59 + currentActiveId: "1",
  60 + currentActiveIndex: 1,
  61 + pageList: [
  62 + {
  63 + ...(fileData as PageChartEditStoreType),
  64 + id: "1",
  65 + title: "页面 1",
  66 + editCanvas: {
  67 + // 编辑区域 Dom
  68 + editLayoutDom: null,
  69 + editContentDom: null,
  70 + // 偏移量
  71 + offset: 20,
  72 + // 系统控制缩放
  73 + scale: 0.5,
  74 + // 用户控制的缩放
  75 + userScale: 0.5,
  76 + // 锁定缩放
  77 + lockScale: false,
  78 + // 初始化
  79 + isCreate: false,
  80 + // 拖拽中
  81 + isDrag: false,
  82 + // 框选中
  83 + isSelect: false,
  84 + // 同步中
  85 + // saveStatus: SyncEnum.PENDING,
  86 + // 代码编辑中
  87 + isCodeEdit: false,
  88 + },
  89 + // 右键菜单
  90 + rightMenuShow: false,
  91 + // 鼠标定位
  92 + mousePosition: {
  93 + startX: 0,
  94 + startY: 0,
  95 + x: 0,
  96 + y: 0
  97 + },
  98 + // 目标图表
  99 + targetChart: {
  100 + hoverId: undefined,
  101 + selectId: []
  102 + },
  103 + // 记录临时数据（复制等）
  104 + recordChart: undefined,
  105 + }
  106 + ]
  107 + }
  108 + }
  109 + }
  110 + return userData as ChartEditStoreType
  111 + }
  112 + //
  113 +
52 // * 数据获取 114 // * 数据获取
53 const dataSyncFetch = async () => { 115 const dataSyncFetch = async () => {
54 // FIX:重新执行dataSyncFetch需清空chartEditStore.componentList,否则会导致图层重复 116 // FIX:重新执行dataSyncFetch需清空chartEditStore.componentList,否则会导致图层重复
55 // 切换语言等操作会导致重新执行 dataSyncFetch,此时pinia中并未清空chartEditStore.componentList，导致图层重复 117 // 切换语言等操作会导致重新执行 dataSyncFetch,此时pinia中并未清空chartEditStore.componentList，导致图层重复
56 - chartEditStore.componentList = [] 118 + // chartEditStore.componentList = []
  119 + // chartEditStore.emptyPageList()
  120 + // chartEditStore.emptyPageComponentList()
57 projectInfoStore.setSaveStatus(SyncEnum.START) 121 projectInfoStore.setSaveStatus(SyncEnum.START)
58 try { 122 try {
59 const id = fetchRouteParamsLocation() 123 const id = fetchRouteParamsLocation()
60 const res = await getDataView(id) 124 const res = await getDataView(id)
61 updateStoreInfo(res) 125 updateStoreInfo(res)
62 - // 更新全局数据  
63 - await updateComponent(JSONParse(res.dataViewContent.content))  
64 - setTimeout(() => {  
65 - projectInfoStore.setSaveStatus(SyncEnum.SUCCESS)  
66 - }, 1000) 126 + let contentData = JSONParse(res.dataViewContent.content) as ChartEditStoreType
  127 + contentData = compatibleOldUserDataHook(contentData)
67 128
  129 + contentData.pageConfig.currentActiveId = contentData.pageConfig.pageList[0].id
  130 + // 更新全局数据
  131 + await updateComponent(contentData)
  132 + // setTimeout(() => {
  133 + // projectInfoStore.setSaveStatus(SyncEnum.SUCCESS)
  134 + // chartEditStore.setPageConfig(contentData.pageConfig) //延时1秒，不然会造成第一个页面数组叠加
  135 + // }, 1000)
  136 + chartEditStore.setPageConfig(contentData.pageConfig)
  137 + projectInfoStore.setSaveStatus(SyncEnum.SUCCESS)
68 } catch (error) { 138 } catch (error) {
69 projectInfoStore.setSaveStatus(SyncEnum.FAILURE) 139 projectInfoStore.setSaveStatus(SyncEnum.FAILURE)
70 } 140 }
@@ -109,37 +179,37 @@ export const useSyncRemote = () => { @@ -109,37 +179,37 @@ export const useSyncRemote = () => {
109 }, 3000) 179 }, 3000)
110 180
111 //thumbnailSyncUpdate 缩略图保存 181 //thumbnailSyncUpdate 缩略图保存
112 - const thumbnailSyncUpdate = throttle(async(updateImg = true)=>{  
113 - const { state, organizationId, dataViewName } = projectInfoStore.getProjectInfo  
114 - if (updateImg) {  
115 - // 获取缩略图片  
116 - const range = document.querySelector('.go-edit-range') as HTMLElement  
117 - // 生成图片  
118 - const canvasImage: HTMLCanvasElement = await html2canvas(range, {  
119 - backgroundColor: null,  
120 - allowTaint: true,  
121 - useCORS: true,  
122 - logging: false 182 + const thumbnailSyncUpdate = throttle(async (updateImg = true) => {
  183 + const { state, organizationId, dataViewName } = projectInfoStore.getProjectInfo
  184 + if (updateImg) {
  185 + // 获取缩略图片
  186 + const range = document.querySelector('.go-edit-range') as HTMLElement
  187 + // 生成图片
  188 + const canvasImage: HTMLCanvasElement = await html2canvas(range, {
  189 + backgroundColor: null,
  190 + allowTaint: true,
  191 + useCORS: true,
  192 + logging: false
  193 + })
  194 + // 上传预览图
  195 + const uploadParams = new FormData()
  196 + uploadParams.append(
  197 + 'file',
  198 + base64toFile(canvasImage.toDataURL(), `${fetchRouteParamsLocation()}_index_preview.png`)
  199 + )
  200 + const uploadRes = await uploadFile(uploadParams)
  201 + // 保存预览图
  202 + if (uploadRes) {
  203 + await saveDataViewList({
  204 + name: dataViewName,
  205 + organizationId,
  206 + state,
  207 + id: fetchRouteParamsLocation(),
  208 + thumbnail: `${uploadRes.fileStaticUri}`
123 }) 209 })
124 - // 上传预览图  
125 - const uploadParams = new FormData()  
126 - uploadParams.append(  
127 - 'file',  
128 - base64toFile(canvasImage.toDataURL(), `${fetchRouteParamsLocation()}_index_preview.png`)  
129 - )  
130 - const uploadRes = await uploadFile(uploadParams)  
131 - // 保存预览图  
132 - if (uploadRes) {  
133 - await saveDataViewList({  
134 - name: dataViewName,  
135 - organizationId,  
136 - state,  
137 - id: fetchRouteParamsLocation(),  
138 - thumbnail: `${uploadRes.fileStaticUri}`  
139 - })  
140 - window['$message'].success('保存缩略图成功！')  
141 - } 210 + window['$message'].success('保存缩略图成功！')
142 } 211 }
  212 + }
143 }) 213 })
144 214
145 // * 定时处理 215 // * 定时处理
1 -import { ref, nextTick, toRaw } from 'vue' 1 +import { ref, nextTick, toRaw, computed } from 'vue'
2 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore' 2 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
3 import { CreateComponentType, CreateComponentGroupType } from '@/packages/index.d' 3 import { CreateComponentType, CreateComponentGroupType } from '@/packages/index.d'
4 import { renderIcon, loadingError } from '@/utils' 4 import { renderIcon, loadingError } from '@/utils'
@@ -28,7 +28,7 @@ const chartEditStore = useChartEditStore() @@ -28,7 +28,7 @@ const chartEditStore = useChartEditStore()
28 * @param {number} n > 2 28 * @param {number} n > 2
29 * @returns 29 * @returns
30 */ 30 */
31 -export const divider = (n: number = 3) => { 31 +export const divider = (n = 3) => {
32 return { 32 return {
33 type: 'divider', 33 type: 'divider',
34 key: `d${n}` 34 key: `d${n}`
@@ -272,6 +272,6 @@ export const useContextMenu = () => { @@ -272,6 +272,6 @@ export const useContextMenu = () => {
272 handleContextMenu, 272 handleContextMenu,
273 onClickOutSide, 273 onClickOutSide,
274 handleMenuSelect, 274 handleMenuSelect,
275 - mousePosition: chartEditStore.getMousePosition 275 + mousePosition: computed(() => chartEditStore.getMousePosition)
276 } 276 }
277 } 277 }
1 import { getUUID } from '@/utils' 1 import { getUUID } from '@/utils'
2 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore' 2 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
3 -import { ChartEditStoreEnum, ChartEditStorage } from '@/store/modules/chartEditStore/chartEditStore.d' 3 +import { ChartEditStoreEnum, ChartEditStorage, PageChartEditStoreType } from '@/store/modules/chartEditStore/chartEditStore.d'
4 import { useChartHistoryStore } from '@/store/modules/chartHistoryStore/chartHistoryStore' 4 import { useChartHistoryStore } from '@/store/modules/chartHistoryStore/chartHistoryStore'
5 import { useChartLayoutStore } from '@/store/modules/chartLayoutStore/chartLayoutStore' 5 import { useChartLayoutStore } from '@/store/modules/chartLayoutStore/chartLayoutStore'
6 import { ChartLayoutStoreEnum } from '@/store/modules/chartLayoutStore/chartLayoutStore.d' 6 import { ChartLayoutStoreEnum } from '@/store/modules/chartLayoutStore/chartLayoutStore.d'
@@ -104,30 +104,50 @@ export const useSync = () => { @@ -104,30 +104,50 @@ export const useSync = () => {
104 const updateComponent = async (projectData: ChartEditStorage, isReplace = false, changeId = false) => { 104 const updateComponent = async (projectData: ChartEditStorage, isReplace = false, changeId = false) => {
105 if (isReplace) { 105 if (isReplace) {
106 // 清除列表 106 // 清除列表
107 - chartEditStore.componentList = [] 107 + // chartEditStore.componentList = []
  108 + // chartEditStore.emptyPageList()
  109 + chartEditStore.emptyPageComponentList()
108 // 清除历史记录 110 // 清除历史记录
109 chartHistoryStore.clearBackStack() 111 chartHistoryStore.clearBackStack()
110 chartHistoryStore.clearForwardStack() 112 chartHistoryStore.clearForwardStack()
111 } 113 }
112 // 画布补丁处理 114 // 画布补丁处理
113 - projectData.editCanvasConfig = canvasVersionUpdatePolyfill(projectData.editCanvasConfig) 115 + // projectData.editCanvasConfig = canvasVersionUpdatePolyfill(projectData.editCanvasConfig)
  116 + // projectData.editCanvasConfig = canvasVersionUpdatePolyfill(projectData.editCanvasConfig)
114 117
115 // 列表组件注册 118 // 列表组件注册
116 - projectData.componentList.forEach(async (e: CreateComponentType | CreateComponentGroupType) => {  
117 - const intComponent = (target: CreateComponentType) => {  
118 - if (!window['$vue'].component(target.chartConfig.chartKey)) {  
119 - window['$vue'].component(target.chartConfig.chartKey, fetchChartComponent(target.chartConfig))  
120 - window['$vue'].component(target.chartConfig.conKey, fetchConfigComponent(target.chartConfig))  
121 - }  
122 - } 119 + // projectData.componentList.forEach(async (e: CreateComponentType | CreateComponentGroupType) => {
  120 + // const intComponent = (target: CreateComponentType) => {
  121 + // if (!window['$vue'].component(target.chartConfig.chartKey)) {
  122 + // window['$vue'].component(target.chartConfig.chartKey, fetchChartComponent(target.chartConfig))
  123 + // window['$vue'].component(target.chartConfig.conKey, fetchConfigComponent(target.chartConfig))
  124 + // }
  125 + // }
123 126
124 - if (e.isGroup) {  
125 - (e as CreateComponentGroupType).groupList.forEach(groupItem => {  
126 - intComponent(groupItem)  
127 - })  
128 - } else {  
129 - intComponent(e as CreateComponentType)  
130 - } 127 + // if (e.isGroup) {
  128 + // (e as CreateComponentGroupType).groupList.forEach(groupItem => {
  129 + // intComponent(groupItem)
  130 + // })
  131 + // } else {
  132 + // intComponent(e as CreateComponentType)
  133 + // }
  134 + // })
  135 + projectData.pageConfig.pageList.forEach(async (e: PageChartEditStoreType) => {
  136 + e.componentList.forEach((item:CreateComponentType | CreateComponentGroupType)=>{
  137 + const intComponent = (target: CreateComponentType) => {
  138 + if (!window['$vue'].component(target.chartConfig.chartKey)) {
  139 + window['$vue'].component(target.chartConfig.chartKey, fetchChartComponent(target.chartConfig))
  140 + window['$vue'].component(target.chartConfig.conKey, fetchConfigComponent(target.chartConfig))
  141 + }
  142 + }
  143 + if (item.isGroup) {
  144 + (item as CreateComponentGroupType).groupList.forEach(groupItem => {
  145 + intComponent(groupItem)
  146 + })
  147 + } else {
  148 + intComponent(item as CreateComponentType)
  149 + }
  150 + })
131 }) 151 })
132 152
133 // 创建函数-重新创建是为了处理类种方法消失的问题 153 // 创建函数-重新创建是为了处理类种方法消失的问题
@@ -136,7 +156,7 @@ export const useSync = () => { @@ -136,7 +156,7 @@ export const useSync = () => {
136 callBack?: (componentInstance: CreateComponentType) => void 156 callBack?: (componentInstance: CreateComponentType) => void
137 ) => { 157 ) => {
138 // 补充 class 上的方法 158 // 补充 class 上的方法
139 - let newComponent: CreateComponentType = await createComponent(_componentInstance.chartConfig) 159 + const newComponent: CreateComponentType = await createComponent(_componentInstance.chartConfig)
140 if (_componentInstance.chartConfig.redirectComponent) { 160 if (_componentInstance.chartConfig.redirectComponent) {
141 _componentInstance.chartConfig.dataset && (newComponent.option.dataset = _componentInstance.chartConfig.dataset) 161 _componentInstance.chartConfig.dataset && (newComponent.option.dataset = _componentInstance.chartConfig.dataset)
142 newComponent.chartConfig.title = _componentInstance.chartConfig.title 162 newComponent.chartConfig.title = _componentInstance.chartConfig.title
@@ -162,49 +182,92 @@ export const useSync = () => { @@ -162,49 +182,92 @@ export const useSync = () => {
162 } 182 }
163 183
164 // 数据赋值 184 // 数据赋值
165 - for (const key in projectData) { 185 + // const key in projectData
  186 + for (const key in projectData.pageConfig) {
166 // 组件 187 // 组件
167 - if (key === ChartEditStoreEnum.COMPONENT_LIST) {  
168 - let loadIndex = 0  
169 - const listLength = projectData[key].length  
170 - for (const comItem of projectData[key]) {  
171 - // 设置加载数量  
172 - let percentage = parseInt((parseFloat(`${++loadIndex / listLength}`) * 100).toString())  
173 - chartLayoutStore.setItemUnHandle(ChartLayoutStoreEnum.PERCENTAGE, percentage)  
174 - // 判断类型  
175 - if (comItem.isGroup) {  
176 - // 创建分组  
177 - let groupClass = new PublicGroupConfigClass()  
178 - if (changeId) {  
179 - groupClass = componentMerge(groupClass, { ...comItem, id: getUUID() })  
180 - } else {  
181 - groupClass = componentMerge(groupClass, comItem)  
182 - } 188 + //ChartEditStoreEnum.COMPONENT_LIST
  189 + if (key === ChartEditStoreEnum.PAGE_LIST) {
  190 + // let loadIndex = 0
  191 + // const listLength = projectData[key].length
  192 + // const listLength =projectData.pageConfig[key].length
  193 + // for (const comItem of projectData[key]) {
  194 + // // 设置加载数量
  195 + // let percentage = parseInt((parseFloat(`${++loadIndex / listLength}`) * 100).toString())
  196 + // chartLayoutStore.setItemUnHandle(ChartLayoutStoreEnum.PERCENTAGE, percentage)
  197 + // // 判断类型
  198 + // if (comItem.isGroup) {
  199 + // // 创建分组
  200 + // let groupClass = new PublicGroupConfigClass()
  201 + // if (changeId) {
  202 + // groupClass = componentMerge(groupClass, { ...comItem, id: getUUID() })
  203 + // } else {
  204 + // groupClass = componentMerge(groupClass, comItem)
  205 + // }
183 206
184 - // 异步注册子应用  
185 - const targetList: CreateComponentType[] = []  
186 - for (const groupItem of (comItem as CreateComponentGroupType).groupList) {  
187 - await create(groupItem, e => {  
188 - targetList.push(e)  
189 - }) 207 + // // 异步注册子应用
  208 + // const targetList: CreateComponentType[] = []
  209 + // for (const groupItem of (comItem as CreateComponentGroupType).groupList) {
  210 + // await create(groupItem, e => {
  211 + // targetList.push(e)
  212 + // })
  213 + // }
  214 + // groupClass.groupList = targetList
  215 +
  216 + // // 分组插入到列表
  217 + // chartEditStore.addComponentList(groupClass, false, true)
  218 + // } else {
  219 + // await create(comItem as CreateComponentType)
  220 + // }
  221 + // if (percentage === 100) {
  222 + // // 清除历史记录
  223 + // chartHistoryStore.clearBackStack()
  224 + // chartHistoryStore.clearForwardStack()
  225 + // }
  226 + // }
  227 + projectData.pageConfig.pageList.forEach(async (e: PageChartEditStoreType) => {
  228 + let loadIndex = 0
  229 + const listLength = e.componentList.length
  230 + for (const comItem of e.componentList) {
  231 + // 设置加载数量
  232 + const percentage = parseInt((parseFloat(`${++loadIndex / listLength}`) * 100).toString())
  233 + chartLayoutStore.setItemUnHandle(ChartLayoutStoreEnum.PERCENTAGE, percentage)
  234 + // 判断类型
  235 + if (comItem.isGroup) {
  236 + // 创建分组
  237 + let groupClass = new PublicGroupConfigClass()
  238 + if (changeId) {
  239 + groupClass = componentMerge(groupClass, { ...comItem, id: getUUID() })
  240 + } else {
  241 + groupClass = componentMerge(groupClass, comItem)
  242 + }
  243 +
  244 + // 异步注册子应用
  245 + const targetList: CreateComponentType[] = []
  246 + for (const groupItem of (comItem as CreateComponentGroupType).groupList) {
  247 + await create(groupItem, e => {
  248 + targetList.push(e)
  249 + })
  250 + }
  251 + groupClass.groupList = targetList
  252 +
  253 + // 分组插入到列表
  254 + // chartEditStore.addComponentList(groupClass, false, true)
  255 + chartEditStore.addComponentList(groupClass, false, true)
  256 + } else {
  257 + await create(comItem as CreateComponentType)
  258 + }
  259 + if (percentage === 100) {
  260 + // 清除历史记录
  261 + chartHistoryStore.clearBackStack()
  262 + chartHistoryStore.clearForwardStack()
  263 + }
190 } 264 }
191 - groupClass.groupList = targetList  
192 -  
193 - // 分组插入到列表  
194 - chartEditStore.addComponentList(groupClass, false, true)  
195 - } else {  
196 - await create(comItem as CreateComponentType)  
197 - }  
198 - if (percentage === 100) {  
199 - // 清除历史记录  
200 - chartHistoryStore.clearBackStack()  
201 - chartHistoryStore.clearForwardStack()  
202 - }  
203 - } 265 + })
204 } else { 266 } else {
205 // 非组件(顺便排除脏数据) 267 // 非组件(顺便排除脏数据)
206 if (key !== 'editCanvasConfig' && key !== 'requestGlobalConfig') return 268 if (key !== 'editCanvasConfig' && key !== 'requestGlobalConfig') return
207 - componentMerge(chartEditStore[key], projectData[key], true) 269 + // componentMerge(chartEditStore[key], projectData[key], true)
  270 + // componentMerge(chartEditStore[key], projectData[key], true)
208 } 271 }
209 } 272 }
210 273
@@ -59,8 +59,9 @@ window['$message'].warning('请不要刷新此窗口！') @@ -59,8 +59,9 @@ window['$message'].warning('请不要刷新此窗口！')
59 59
60 // 从sessionStorage 获取数据 60 // 从sessionStorage 获取数据
61 async function getDataBySession() { 61 async function getDataBySession() {
62 - const localStorageInfo: ChartEditStorageType = (await getSessionStorageInfo()) as unknown as ChartEditStorageType  
63 - setTitle(`编辑-${localStorageInfo.editCanvasConfig.projectName}`) 62 + // const localStorageInfo: ChartEditStorageType = (await getSessionStorageInfo()) as unknown as ChartEditStorageType
  63 + const localStorageInfo = (await getSessionStorageInfo()) as ChartEditStorageType as any
  64 + setTitle(`编辑-${localStorageInfo?.getEditCanvasConfig?.projectName}`)
64 content.value = JSONStringify(localStorageInfo) 65 content.value = JSONStringify(localStorageInfo)
65 } 66 }
66 setTimeout(getDataBySession) 67 setTimeout(getDataBySession)
1 <template> 1 <template>
2 <div 2 <div
3 class="chart-item" 3 class="chart-item"
4 - v-for="(item, index) in chartEditStore.componentList" 4 + v-for="(item, index) in chartEditStore.getComponentList"
5 :class="animationsClass(item.styles.animations)" 5 :class="animationsClass(item.styles.animations)"
6 :key="item.id" 6 :key="item.id"
7 :style="{ 7 :style="{
@@ -30,9 +30,9 @@ @@ -30,9 +30,9 @@
30 :chartConfig="item" 30 :chartConfig="item"
31 :themeSetting="themeSetting" 31 :themeSetting="themeSetting"
32 :themeColor="themeColor" 32 :themeColor="themeColor"
33 - :style="{  
34 - ...getSizeStyle(item.attr),  
35 - ...getFilterStyle(item.styles) 33 + :style="{
  34 + ...getSizeStyle(item.attr),
  35 + ...getFilterStyle(item.styles)
36 }" 36 }"
37 v-on="useLifeHandler(item)" 37 v-on="useLifeHandler(item)"
38 ></component> 38 ></component>
@@ -40,7 +40,7 @@ @@ -40,7 +40,7 @@
40 </template> 40 </template>
41 41
42 <script setup lang="ts"> 42 <script setup lang="ts">
43 -import { PropType, computed, onMounted } from 'vue' 43 +import { PropType, computed, onMounted, watch } from 'vue'
44 import { useChartDataPondFetch } from '@/hooks' 44 import { useChartDataPondFetch } from '@/hooks'
45 import { ChartEditStorageType } from '../../index.d' 45 import { ChartEditStorageType } from '../../index.d'
46 import { PreviewRenderGroup } from '../PreviewRenderGroup/index' 46 import { PreviewRenderGroup } from '../PreviewRenderGroup/index'
@@ -64,14 +64,14 @@ const chartEditStore = useChartEditStore() @@ -64,14 +64,14 @@ const chartEditStore = useChartEditStore()
64 64
65 // 主题色 65 // 主题色
66 const themeSetting = computed(() => { 66 const themeSetting = computed(() => {
67 - const chartThemeSetting = chartEditStore.editCanvasConfig.chartThemeSetting 67 + const chartThemeSetting = chartEditStore.getEditCanvasConfig?.chartThemeSetting
68 return chartThemeSetting 68 return chartThemeSetting
69 }) 69 })
70 70
71 // 配置项 71 // 配置项
72 const themeColor = computed(() => { 72 const themeColor = computed(() => {
73 - const colorCustomMergeData = colorCustomMerge(chartEditStore.editCanvasConfig.chartCustomThemeColorInfo)  
74 - return colorCustomMergeData[chartEditStore.editCanvasConfig.chartThemeColor] 73 + const colorCustomMergeData = colorCustomMerge(chartEditStore.getEditCanvasConfig?.chartCustomThemeColorInfo)
  74 + return colorCustomMergeData[chartEditStore.getEditCanvasConfig?.chartThemeColor]
75 }) 75 })
76 76
77 // 组件渲染结束初始化数据池 77 // 组件渲染结束初始化数据池
@@ -79,6 +79,13 @@ clearMittDataPondMap() @@ -79,6 +79,13 @@ clearMittDataPondMap()
79 onMounted(() => { 79 onMounted(() => {
80 initDataPond(useChartEditStore) 80 initDataPond(useChartEditStore)
81 }) 81 })
  82 +
  83 +// watch(()=>chartEditStore,(newData)=>{
  84 +// console.log(newData)
  85 +// },{
  86 +// immediate:true,
  87 +// deep:true
  88 +// })
82 </script> 89 </script>
83 90
84 <style lang="scss" scoped> 91 <style lang="scss" scoped>
@@ -4,6 +4,7 @@ import { ChartEditStorageType } from '..' @@ -4,6 +4,7 @@ import { ChartEditStorageType } from '..'
4 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore' 4 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
5 import { useRoute } from 'vue-router' 5 import { useRoute } from 'vue-router'
6 import { ShareEnum } from '@/enums/external/pageEnum' 6 import { ShareEnum } from '@/enums/external/pageEnum'
  7 +import { nextTick } from 'vue'
7 8
8 9
9 const isSharePageMode = () => { 10 const isSharePageMode = () => {
@@ -11,6 +12,67 @@ const isSharePageMode = () => { @@ -11,6 +12,67 @@ const isSharePageMode = () => {
11 return ROUTE.matched.find(item => item.path === ShareEnum.SHARE_PATH) 12 return ROUTE.matched.find(item => item.path === ShareEnum.SHARE_PATH)
12 } 13 }
13 14
  15 + // THINGS_KIT 兼容之前的用户数据
  16 + const compatibleOldUserDataHook = (fileData:object)=>{
  17 + let userData:Recordable = fileData
  18 + if(!Reflect.get(fileData,'pageConfig')){
  19 + userData={
  20 + pageConfig:{
  21 + currentActiveId: "1",
  22 + currentActiveIndex: 1,
  23 + pageList:[
  24 + {
  25 + ...fileData,
  26 + id:"1",
  27 + title:"页面 1",
  28 + editCanvas: {
  29 + // 编辑区域 Dom
  30 + editLayoutDom: null,
  31 + editContentDom: null,
  32 + // 偏移量
  33 + offset: 20,
  34 + // 系统控制缩放
  35 + scale: 0.5,
  36 + // 用户控制的缩放
  37 + userScale: 0.5,
  38 + // 锁定缩放
  39 + lockScale: false,
  40 + // 初始化
  41 + isCreate: false,
  42 + // 拖拽中
  43 + isDrag: false,
  44 + // 框选中
  45 + isSelect: false,
  46 + // 同步中
  47 + // saveStatus: SyncEnum.PENDING,
  48 + // 代码编辑中
  49 + isCodeEdit: false
  50 + },
  51 + // 右键菜单
  52 + rightMenuShow: false,
  53 + // 鼠标定位
  54 + mousePosition: {
  55 + startX: 0,
  56 + startY: 0,
  57 + x: 0,
  58 + y: 0
  59 + },
  60 + // 目标图表
  61 + targetChart: {
  62 + hoverId: undefined,
  63 + selectId: []
  64 + },
  65 + // 记录临时数据（复制等）
  66 + recordChart: undefined,
  67 + }
  68 + ]
  69 + }
  70 + }
  71 + }
  72 + return userData
  73 +}
  74 +//
  75 +
14 export const getSessionStorageInfo = async () => { 76 export const getSessionStorageInfo = async () => {
15 if (isSharePageMode()) return 77 if (isSharePageMode()) return
16 const id = fetchRouteParamsLocation() 78 const id = fetchRouteParamsLocation()
@@ -18,12 +80,24 @@ export const getSessionStorageInfo = async () => { @@ -18,12 +80,24 @@ export const getSessionStorageInfo = async () => {
18 const res = await getDataView(id) 80 const res = await getDataView(id)
19 if (res) { 81 if (res) {
20 const { dataViewContent } = res 82 const { dataViewContent } = res
21 - const content = JSONParse(dataViewContent.content) as ChartEditStorageType 83 + let content = JSONParse(dataViewContent.content) as ChartEditStorageType
  84 + content = compatibleOldUserDataHook(content) as ChartEditStorageType
22 if (content) { 85 if (content) {
23 - const { editCanvasConfig, requestGlobalConfig, componentList } = content  
24 - chartEditStore.editCanvasConfig = editCanvasConfig  
25 - chartEditStore.requestGlobalConfig = requestGlobalConfig  
26 - chartEditStore.componentList = componentList 86 + // const { editCanvasConfig, requestGlobalConfig, componentList } = content
  87 + // chartEditStore.editCanvasConfig = editCanvasConfig
  88 + // chartEditStore.requestGlobalConfig = requestGlobalConfig
  89 + // chartEditStore.componentList = componentList
  90 + await nextTick()
  91 + const { pageConfig } = content
  92 + chartEditStore.setPageConfig(pageConfig)
  93 + // chartEditStore.setPageList(pageConfig.pageList)
  94 + // pageConfig.pageList.forEach(pageItem => {
  95 + // if(pageItem.id===chartEditStore.pageConfig.currentActiveId){
  96 + // chartEditStore.setPageEditCanvasConfig(pageItem.editCanvasConfig)
  97 + // chartEditStore.setPageRequestGlobalConfig(pageItem.requestGlobalConfig)
  98 + // chartEditStore.setPageComponentList(pageItem.componentList)
  99 + // }
  100 + // })
27 } 101 }
28 } 102 }
29 } 103 }
1 -import { ref } from 'vue'  
2 -import { ChartEditStorageType } from '../index.d'  
3 -import { CreateComponentType, CreateComponentGroupType } from '@/packages/index.d' 1 +import { ref } from 'vue'
  2 +import { CreateComponentType } from '@/packages/index.d'
4 import { fetchChartComponent } from '@/packages/index' 3 import { fetchChartComponent } from '@/packages/index'
5 -  
6 -export const useComInstall = (localStorageInfo: ChartEditStorageType) => { 4 +import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
  5 +// ChartEditStorageType
  6 +export const useComInstall = (chartEditStore: ReturnType<typeof useChartEditStore>) => {
7 const show = ref(false) 7 const show = ref(false)
8 8
9 // 注册组件(一开始无法获取window['$vue']) 9 // 注册组件(一开始无法获取window['$vue'])
@@ -17,14 +17,16 @@ export const useComInstall = (localStorageInfo: ChartEditStorageType) => { @@ -17,14 +17,16 @@ export const useComInstall = (localStorageInfo: ChartEditStorageType) => {
17 } 17 }
18 } 18 }
19 19
20 - localStorageInfo.componentList.forEach(async (e: CreateComponentType | CreateComponentGroupType) => {  
21 - if (e.isGroup) {  
22 - (e as CreateComponentGroupType).groupList.forEach(groupItem => {  
23 - intComponent(groupItem)  
24 - })  
25 - } else {  
26 - intComponent(e as CreateComponentType)  
27 - } 20 + chartEditStore.getPageList.forEach(pageItem => {
  21 + pageItem.componentList.forEach(pageComponents => {
  22 + if (pageComponents.isGroup) {
  23 + pageComponents?.groupList?.forEach(groupItem => {
  24 + intComponent(groupItem)
  25 + })
  26 + } else {
  27 + intComponent(pageComponents)
  28 + }
  29 + })
28 }) 30 })
29 show.value = true 31 show.value = true
30 } 32 }
@@ -4,12 +4,12 @@ import type { ChartEditStorageType } from '../index.d' @@ -4,12 +4,12 @@ import type { ChartEditStorageType } from '../index.d'
4 import { PreviewScaleEnum } from '@/enums/styleEnum' 4 import { PreviewScaleEnum } from '@/enums/styleEnum'
5 5
6 export const SCALE_KEY = 'scale-value' 6 export const SCALE_KEY = 'scale-value'
7 -  
8 -export const useScale = (localStorageInfo: ChartEditStorageType) => { 7 +// ChartEditStorageType 暂定any
  8 +export const useScale = (localStorageInfo: any) => {
9 const entityRef = ref() 9 const entityRef = ref()
10 const previewRef = ref() 10 const previewRef = ref()
11 - const width = ref(localStorageInfo.editCanvasConfig.width)  
12 - const height = ref(localStorageInfo.editCanvasConfig.height) 11 + const width = ref(localStorageInfo.getEditCanvasConfig.width)
  12 + const height = ref(localStorageInfo.getEditCanvasConfig.height)
13 const scaleRef = ref({ width: 1, height: 1 }) 13 const scaleRef = ref({ width: 1, height: 1 })
14 14
15 provide(SCALE_KEY, scaleRef) 15 provide(SCALE_KEY, scaleRef)
@@ -57,7 +57,7 @@ export const useScale = (localStorageInfo: ChartEditStorageType) => { @@ -57,7 +57,7 @@ export const useScale = (localStorageInfo: ChartEditStorageType) => {
57 57
58 // 屏幕适配 58 // 屏幕适配
59 onMounted(() => { 59 onMounted(() => {
60 - switch (localStorageInfo.editCanvasConfig.previewScaleType) { 60 + switch (localStorageInfo.getEditCanvasConfig?.previewScaleType) {
61 case PreviewScaleEnum.FIT: 61 case PreviewScaleEnum.FIT:
62 ;(() => { 62 ;(() => {
63 const { calcRate, windowResize, unWindowResize } = usePreviewFitScale( 63 const { calcRate, windowResize, unWindowResize } = usePreviewFitScale(
1 -import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'  
2 -import { ChartEditStoreEnum } from '@/store/modules/chartEditStore/chartEditStore.d'  
3 -import type { ChartEditStorageType } from '../index.d' 1 +// import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
  2 +// import { ChartEditStoreEnum } from '@/store/modules/chartEditStore/chartEditStore.d'
  3 +// import type { ChartEditStorageType } from '../index.d'
  4 +
  5 +import { useChartEditStore } from "@/store/modules/chartEditStore/chartEditStore";
4 6
5 // store 相关 7 // store 相关
6 -export const useStore = (localStorageInfo: ChartEditStorageType) => {  
7 - const chartEditStore = useChartEditStore()  
8 - chartEditStore.requestGlobalConfig = localStorageInfo[ChartEditStoreEnum.REQUEST_GLOBAL_CONFIG] 8 +export const useStore = (chartEditStore: ReturnType<typeof useChartEditStore>) => {
  9 + // const chartEditStore = useChartEditStore()
  10 + // chartEditStore.requestGlobalConfig = localStorageInfo[ChartEditStoreEnum.REQUEST_GLOBAL_CONFIG]
  11 + // chartEditStore.setPageRequestGlobalConfig(localStorageInfo[ChartEditStoreEnum.REQUEST_GLOBAL_CONFIG])
9 } 12 }
1 <template> 1 <template>
2 - <div :class="`go-preview ${chartEditStore.editCanvasConfig.previewScaleType}`" @mousedown="dragCanvas"> 2 + <div :class="`go-preview ${chartEditStore.getEditCanvasConfig?.previewScaleType}`" @mousedown="dragCanvas">
3 <template v-if="showEntity"> 3 <template v-if="showEntity">
4 <!-- 实体区域 --> 4 <!-- 实体区域 -->
5 <div ref="entityRef" class="go-preview-entity"> 5 <div ref="entityRef" class="go-preview-entity">
@@ -38,32 +38,32 @@ import { getSessionStorageInfo } from './external/usePreview' @@ -38,32 +38,32 @@ import { getSessionStorageInfo } from './external/usePreview'
38 38
39 import { useComInstall } from './hooks/useComInstall.hook' 39 import { useComInstall } from './hooks/useComInstall.hook'
40 import { useScale } from './hooks/useScale.hook' 40 import { useScale } from './hooks/useScale.hook'
41 -import { useStore } from './hooks/useStore.hook' 41 +// import { useStore } from './hooks/useStore.hook'
42 import { PreviewScaleEnum } from '@/enums/styleEnum' 42 import { PreviewScaleEnum } from '@/enums/styleEnum'
43 -import type { ChartEditStorageType } from './index.d' 43 +// import type { ChartEditStorageType } from './index.d'
44 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore' 44 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
45 45
46 // const localStorageInfo: ChartEditStorageType = getSessionStorageInfo() as ChartEditStorageType 46 // const localStorageInfo: ChartEditStorageType = getSessionStorageInfo() as ChartEditStorageType
47 47
48 await getSessionStorageInfo() 48 await getSessionStorageInfo()
49 -const chartEditStore = useChartEditStore() as unknown as ChartEditStorageType 49 +const chartEditStore = useChartEditStore()
50 50
51 -setTitle(`预览-${chartEditStore.editCanvasConfig.projectName}`) 51 +setTitle(`预览-${chartEditStore.getEditCanvasConfig.projectName}`)
52 52
53 const previewRefStyle = computed(() => { 53 const previewRefStyle = computed(() => {
54 return { 54 return {
55 overflow: 'hidden', 55 overflow: 'hidden',
56 - ...getEditCanvasConfigStyle(chartEditStore.editCanvasConfig),  
57 - ...getFilterStyle(chartEditStore.editCanvasConfig) 56 + ...getEditCanvasConfigStyle(chartEditStore.getEditCanvasConfig),
  57 + ...getFilterStyle(chartEditStore.getEditCanvasConfig)
58 } 58 }
59 }) 59 })
60 60
61 const showEntity = computed(() => { 61 const showEntity = computed(() => {
62 - const type = chartEditStore.editCanvasConfig.previewScaleType 62 + const type = chartEditStore.getEditCanvasConfig?.previewScaleType
63 return type === PreviewScaleEnum.SCROLL_Y || type === PreviewScaleEnum.SCROLL_X 63 return type === PreviewScaleEnum.SCROLL_Y || type === PreviewScaleEnum.SCROLL_X
64 }) 64 })
65 65
66 -useStore(chartEditStore) 66 +// useStore(chartEditStore)
67 const { entityRef, previewRef } = useScale(chartEditStore) 67 const { entityRef, previewRef } = useScale(chartEditStore)
68 const { show } = useComInstall(chartEditStore) 68 const { show } = useComInstall(chartEditStore)
69 69
@@ -22,10 +22,12 @@ export const getSessionStorageInfo = () => { @@ -22,10 +22,12 @@ export const getSessionStorageInfo = () => {
22 if (storageList) { 22 if (storageList) {
23 for (let i = 0; i < storageList.length; i++) { 23 for (let i = 0; i < storageList.length; i++) {
24 if (id.toString() === storageList[i]['id']) { 24 if (id.toString() === storageList[i]['id']) {
25 - const { editCanvasConfig, requestGlobalConfig, componentList } = storageList[i]  
26 - chartEditStore.editCanvasConfig = editCanvasConfig  
27 - chartEditStore.requestGlobalConfig = requestGlobalConfig  
28 - chartEditStore.componentList = componentList 25 + // const { editCanvasConfig, requestGlobalConfig, componentList } = storageList[i]
  26 + // chartEditStore.editCanvasConfig = editCanvasConfig
  27 + // chartEditStore.requestGlobalConfig = requestGlobalConfig
  28 + // chartEditStore.componentList = componentList
  29 + const { pageConfig } = storageList[i]
  30 + chartEditStore.setPageConfig(pageConfig)
29 return storageList[i] 31 return storageList[i]
30 } 32 }
31 } 33 }
@@ -104,11 +104,15 @@ const getSharePageContentData = async () => { @@ -104,11 +104,15 @@ const getSharePageContentData = async () => {
104 if (!dataViewContent.content) isEmpty.value = true 104 if (!dataViewContent.content) isEmpty.value = true
105 const content = JSONParse(dataViewContent.content || '{}') as ChartEditStorageType 105 const content = JSONParse(dataViewContent.content || '{}') as ChartEditStorageType
106 if (content) { 106 if (content) {
107 - const { editCanvasConfig, requestGlobalConfig, componentList } = content  
108 - chartEditStore.editCanvasConfig = editCanvasConfig  
109 - chartEditStore.requestGlobalConfig = requestGlobalConfig  
110 - chartEditStore.componentList = componentList  
111 - handleRegisterComponent(componentList) 107 + // const { editCanvasConfig, requestGlobalConfig, componentList } = content
  108 + // chartEditStore.editCanvasConfig = editCanvasConfig
  109 + // chartEditStore.requestGlobalConfig = requestGlobalConfig
  110 + // chartEditStore.componentList = componentList
  111 + chartEditStore.setPageConfig(content.pageConfig)
  112 + // handleRegisterComponent(componentList)
  113 + content.pageConfig.pageList.forEach(pageItem=>{
  114 + handleRegisterComponent(pageItem.componentList)
  115 + })
112 } 116 }
113 setTitle(dataViewName || '') 117 setTitle(dataViewName || '')
114 showModal.value = false 118 showModal.value = false