初始化

2025-11-08 10:38:36 +08:00
commit 3beeec7296
1626 changed files with 198488 additions and 0 deletions
--- a/frontend/packages/js/store/actions.js
+++ b/frontend/packages/js/store/actions.js
@@ -0,0 +1,266 @@
+// 组件配置转化
+// import _ from 'lodash'
+import cloneDeep from 'lodash/cloneDeep'
+import { setModules, dataModules } from 'data-room-ui/js/utils/configImport'
+import { getScreenInfo, getDataSetDetails, getDataByDataSetId } from '../api/bigScreenApi'
+import plotSettings from 'data-room-ui/G2Plots/settings'
+import echartSettings from 'data-room-ui/Echarts/settings'
+import { stringToFunction } from '../utils/evalFunctions'
+import { EventBus } from '../utils/eventBus'
+import plotList from 'data-room-ui/G2Plots/plotList'
+import { settingToTheme, themeToSetting } from 'data-room-ui/js/utils/themeFormatting'
+
+export default {
+  // 初始化页面数据
+  initLayout ({ commit, dispatch }, code) {
+    return new Promise(resolve => {
+      getScreenInfo(code).then(data => {
+        // 配置兼容
+        const pageInfo = handleResData(data)
+        // 兼容边框配置
+        pageInfo.chartList.forEach((chart) => {
+          // 对数据源的方式进行兼容
+          if (chart.dataSource && ['texts', 'numbers'].includes(chart.type)) {
+            if (chart.dataSource.source === 'dataset' && (!chart.dataSource.businessKey)) {
+              chart.dataSource.source = 'static'
+            }
+          } else if (!chart.dataSource.source) {
+            chart.dataSource.source = 'dataset'
+          }
+
+          if (!chart.border) {
+            chart.border = { type: '', titleHeight: 60, fontSize: 16, isTitle: true, padding: [0, 0, 0, 0] }
+          }
+          if (!chart.border.padding) {
+            chart.border.padding = [0, 0, 0, 0]
+          }
+          const plotSettingsIterator = false
+          const echartSettingsIterator = false
+          if (chart.type === 'customComponent') {
+            // 为本地G2组件配置添加迭代器
+            if (!plotSettingsIterator) {
+              plotSettings[Symbol.iterator] = function * () {
+                const keys = Object.keys(plotSettings)
+                for (const k of keys) {
+                  yield [k, plotSettings[k]]
+                }
+              }
+            }
+            for (const [key, localPlotSetting] of plotSettings) {
+              if (chart.name == localPlotSetting.name) {
+                // 本地配置项
+                const localSettings = JSON.parse(JSON.stringify(localPlotSetting.setting))
+                chart.setting = localSettings.map((localSet) => {
+                  // 在远程组件配置中找到 与 本地组件的配置项 相同的项索引
+                  const index = chart.setting.findIndex(remoteSet => remoteSet.field == localSet.field)
+                  if (index !== -1) {
+                    // 使用远程的值替换本地值
+                    localSet.field = chart.setting[index].field
+                    localSet.value = chart.setting[index].value
+                  }
+                  return localSet
+                })
+              }
+            }
+          } else if (chart.type === 'echartsComponent') {
+            // 为本地echarts组件配置添加迭代器
+            if (!echartSettingsIterator) {
+              echartSettings[Symbol.iterator] = function * () {
+                const keys = Object.keys(echartSettings)
+                for (const k of keys) {
+                  yield [k, echartSettings[k]]
+                }
+              }
+            }
+            for (const [key, localPlotSetting] of echartSettings) {
+              if (chart.name == localPlotSetting.name) {
+                // 本地配置项
+                const localSettings = JSON.parse(JSON.stringify(localPlotSetting.setting))
+                chart.setting = localSettings.map((localSet) => {
+                  // 在远程组件配置中找到 与 本地组件的配置项 相同的项索引
+                  const index = chart.setting.findIndex(remoteSet => remoteSet.field == localSet.field)
+                  if (index !== -1) {
+                    // 使用远程的值替换本地值
+                    localSet.field = chart.setting[index].field
+                    localSet.value = chart.setting[index].value
+                  }
+                  return localSet
+                })
+              }
+            }
+          }
+        })
+
+        // 改变页面数据
+        commit('changePageInfo', pageInfo)
+        commit('changeZIndex', pageInfo.chartList)
+        // 初始化缓存数据集数据
+        // eslint-disable-next-line no-unused-expressions
+        pageInfo.pageConfig.cacheDataSets?.map((cacheDataSet) => {
+          dispatch('getCacheDataSetData', { dataSetId: cacheDataSet.dataSetId })
+          dispatch('getCacheDataFields', { dataSetId: cacheDataSet.dataSetId })
+        })
+        // 页面加载成功
+        resolve(true)
+        commit('saveTimeLine', '初始化')
+      })
+    })
+  },
+  // 初始化缓存数据集数据
+  getCacheDataSetData ({ commit, dispatch }, { dataSetId }) {
+    getDataByDataSetId(dataSetId).then(res => {
+      const data = res.data
+      commit('changeCacheDataSetData', { dataSetId, data })
+      // 推送数据到各个组件
+      emitDataToChart(dataSetId, data)
+    })
+  },
+  // 初始化缓存数据集字段
+  getCacheDataFields ({ commit, dispatch }, { dataSetId }) {
+    getDataSetDetails(dataSetId).then(data => {
+      commit('changeCacheDataFields', { dataSetId, data })
+      commit('changeCacheDataParams', { dataSetId, data })
+    })
+  }
+}
+
+// 处理后端返回的数据
+export function handleResData (data) {
+  let pageInfo = {}
+  if (data.pageConfig) {
+    pageInfo = {
+      ...data,
+      pageConfig: {
+        ...data.pageConfig,
+        lightBgColor: data.pageConfig.lightBgColor || '#f5f7fa'
+      }
+    }
+  } else {
+    pageInfo = {
+      ...data,
+      pageConfig: {
+        w: 1920,
+        h: 1080,
+        bgColor: '#151a26', // 背景色
+        lightBgColor: '#f5f7fa',
+        lightBg: '',
+        bg: '', // 背景图
+        customTheme: 'dark',
+        opacity: 100
+      }
+    }
+  }
+  // 如果pageConfig中的cacheDataSets为null，赋值[]
+  pageInfo.pageConfig.cacheDataSets = pageInfo.pageConfig.cacheDataSets || []
+  pageInfo.pageConfig.refreshConfig = pageInfo.pageConfig.refreshConfig || []
+  let originalConfig = {}
+  pageInfo.chartList.forEach((chart) => {
+    if (!['customComponent', 'remoteComponent', 'echartsComponent'].includes(chart.type)) {
+      originalConfig = { option: { ...setModules[chart.type] }, ...dataModules[chart.type] }
+      // 如果没有版本号，或者版本号修改了则需要进行旧数据兼容
+      if ((!chart.version) || chart.version !== originalConfig.version) {
+        chart = compatibility(chart, originalConfig)
+      } else {
+        chart.option = cloneDeep(setModules[chart.type])
+      }
+    } else {
+      originalConfig = plotList?.find(plot => plot.name === chart.name)
+      chart.option = stringToFunction(chart.option)
+      // 如果是自定义组件，且没配数据集，就给前端的模拟数据
+      if (!chart?.dataSource?.businessKey) {
+        chart.option.data = plotList?.find(plot => plot.name === chart.name)?.option?.data || chart?.option?.data
+      }
+      // 如果没有版本号，或者版本号修改了则需要进行旧数据兼容
+      if ((!chart.version) || (originalConfig && chart.version !== originalConfig?.version)) {
+        // TODO 远程组件需要重新写处理函数
+        if (chart.type === 'customComponent') {
+          chart = compatibility(chart, originalConfig)
+        }
+      }
+    }
+    // 初始化时应该判断，是否存在theme配置，没有的话添加默认的两套主题，这是为了兼容旧组件
+    if (!chart.theme) {
+      chart.theme = settingToTheme(chart, 'dark')
+      chart.theme = settingToTheme(chart, 'light')
+    }
+    chart.key = chart.code
+  })
+  // 主题兼容
+  // pageInfo.chartList = themeToSetting(pageInfo.chartList, pageInfo.pageConfig.customTheme)
+  // 存储修改后的配置
+  localStorage.setItem('pageInfo', JSON.stringify(pageInfo))
+  return pageInfo
+}
+
+// 组件属性兼容
+function compatibility (config, originalConfig) {
+  const newConfig = config
+  newConfig.version = originalConfig?.version || '2023071001'
+  newConfig.optionHandler = originalConfig.optionHandler || ''
+  newConfig.dataSource = objCompare(newConfig?.dataSource, originalConfig?.dataSource)
+  newConfig.customize = objCompare(newConfig?.customize, originalConfig?.customize)
+  newConfig.option = {
+    ...objCompare(newConfig.option, originalConfig?.option),
+    displayOption: originalConfig?.option?.displayOption
+  }
+  newConfig.setting = arrCompare(newConfig?.setting, originalConfig?.setting)
+  return newConfig
+}
+
+// 对象比较
+function objCompare (obj1, obj2) {
+  const keys1 = obj1 ? Object.keys(obj1) : []
+  const keys2 = obj2 ? Object.keys(obj2) : []
+  // 交集
+  const intersection = keys1?.filter(function (v) {
+    return keys2.indexOf(v) > -1
+  }) || []
+  // 差集
+  const differenceSet = keys2?.filter(function (v) {
+    return keys1.indexOf(v) === -1
+  }) || []
+  const obj = {}
+  for (const item of intersection) {
+    obj[item] = obj1[item]
+  }
+  for (const item of differenceSet) {
+    obj[item] = obj2[item]
+  }
+  return obj
+}
+
+// 数组比较
+function arrCompare (list1, list2) {
+  const fieldList = list1?.map(item => item.field) || []
+  const list = list2?.map(item => {
+    let value = null
+    // 如果存在交集
+    if (fieldList.includes(item.field)) {
+      // 保留旧数据的value
+      value = (list1.filter(j => {
+        return j.field === item.field
+      }))[0].value
+    } else {
+      // 不存在交集，直接覆盖
+      value = item.value
+    }
+    return {
+      ...item,
+      value
+    }
+  }) || []
+  return list
+}
+
+// 推送数据到各个组件
+function emitDataToChart (dataSetId, data) {
+  if (data && data.length) {
+    EventBus.$emit('cacheDataInit',
+      {
+        success: true,
+        data: data
+      },
+      dataSetId
+    )
+  }
+}
--- a/frontend/packages/js/store/getters.js
+++ b/frontend/packages/js/store/getters.js
@@ -0,0 +1,3 @@
+export default {
+
+}
--- a/frontend/packages/js/store/index.js
+++ b/frontend/packages/js/store/index.js
@@ -0,0 +1,12 @@
+import state from './state'
+import mutations from './mutations'
+import actions from './actions'
+import getters from './getters'
+
+export default {
+  namespaced: true,
+  state,
+  mutations,
+  actions,
+  getters
+}
--- a/frontend/packages/js/store/mutation-types.js
+++ b/frontend/packages/js/store/mutation-types.js
@@ -0,0 +1,3 @@
+// 使用常量替代 mutation 事件类型在各种 Flux 实现中是很常见的模式。
+// 这样可以使 linter 之类的工具发挥作用，
+// 同时把这些常量放在单独的文件中可以让你的代码合作者对整个 app 包含的 mutation 一目了然：
--- a/frontend/packages/js/store/mutations.js
+++ b/frontend/packages/js/store/mutations.js
@@ -0,0 +1,512 @@
+/*
+ * @description: vuex mutations 事件
+ * @Date: 2023-03-13 10:04:59
+ * @Author: xing.heng
+ * @LastEditors: xing.heng
+ * @LastEditTime: 2023-06-08 15:24:01
+ */
+
+import Vue from 'vue'
+// import _ from 'lodash'
+import cloneDeep from 'lodash/cloneDeep'
+import uniq from 'lodash/uniq'
+import { defaultData } from './state'
+import moment from 'moment'
+import { randomString } from 'data-room-ui/js/utils'
+import { EventBus } from 'data-room-ui/js/utils/eventBus'
+import CloneDeep from 'lodash-es/cloneDeep'
+export default {
+  // 改变页面基本信息，后端请求的页面信息存储到此处
+  changePageInfo (state, pageInfo) {
+    state.pageInfo = pageInfo
+  },
+  // 改变组件列表
+  changeLayout (state, layout) {
+    state.pageInfo.chartList = layout
+  },
+  //
+  changeIframeDialog  (state, dialogVisible) {
+    state.iframeDialog = dialogVisible
+  },
+  // 改变当前选择组件id
+  changeActiveCode (state, code) {
+    state.activeCode = code
+    state.hoverCode = code
+    let activeItem = {}
+    // let activeItem = cloneDeep(state.pageInfo.chartList?.find(
+    //   item => item.code === code
+    // ))
+    for (const item of state.pageInfo.chartList) {
+      // 检查当前项的 code 是否与 currentCode 匹配
+      if (item.code === code) {
+        activeItem = item
+        break // 找到匹配的项后，退出循环
+      }
+      // 如果当前项的 type 为 'chartTab'，则进一步检查其 tabList
+      if (item.type === 'chartTab') {
+        for (const tabItem of item.customize.tabList) {
+          // 检查 tabList 中的每一项的 code 是否与 currentCode 匹配
+          if (tabItem.chartCode === code) {
+            activeItem = tabItem.chart
+            break // 找到匹配的项后，退出循环
+          }
+        }
+      }
+    }
+    changeGroup(code, state)
+    state.activeItemConfig = cloneDeep(activeItem)
+  },
+  changeActiveCodes (state, codes) {
+    // 传入codes，将codes中的组件的group改为tempGroup，不传入或者传入空数组，将所有组件的group改为''，即取消组合
+    if (codes.length !== 0) {
+      state.activeCodes = codes
+      state.pageInfo.chartList = state.pageInfo.chartList?.map(chart => {
+        return {
+          ...chart,
+          group: (codes.includes(chart.code) && !chart.group) ? 'tempGroup' : chart.group
+        }
+      })
+    } else {
+      state.activeCodes = codes
+      state.pageInfo.chartList = state.pageInfo.chartList?.map(chart => {
+        return {
+          ...chart,
+          // 确保取消高亮状态时不会使得原本设置过的组合被取消
+          group: chart.group === 'tempGroup' ? '' : chart.group
+        }
+      })
+    }
+  },
+  // 情况页面选中的组件
+  clearActiveCodes (state) {
+    state.activeCodes = []
+  },
+  // 改变当前hover组件id
+  changeHoverCode (state, code) {
+    state.hoverCode = code
+  },
+  // 改变当前选中组件id
+  changePageLoading (state, booleanValue) {
+    // 改变loading状态
+    state.pageLoading = booleanValue
+  },
+  // 改变当前组件的加载状态
+  changeChartLoading (state, itemConfig) {
+    // 改变loading状态
+    state.pageInfo.chartList.forEach((chart, index) => {
+      if (chart.code === itemConfig.code) {
+        chart.loading = itemConfig.loading
+      }
+    })
+  },
+  // 改变当前组件配置
+  changeChartConfig (state, itemConfig) {
+    // 如果存在parentCode的组件，则是tab中的组件
+    if (itemConfig?.parentCode) {
+      state.pageInfo.chartList.forEach((chart, index) => {
+        if (chart.code === itemConfig.parentCode) {
+          chart.customize.tabList.forEach((tabItem, i) => {
+            if (tabItem.chartCode === itemConfig.code) {
+              Vue.set(state.pageInfo.chartList[index].customize.tabList[i], 'chart', {
+                ...state.pageInfo.chartList[index].customize.tabList[i].chart,
+                ...itemConfig
+              })
+            }
+          })
+        }
+      })
+    } else {
+      // 如果是一般的组件
+      let index = null
+      index = state.pageInfo.chartList.findIndex(
+        item => item.code === itemConfig.code
+      )
+      Vue.set(state.pageInfo.chartList, index, {
+        ...state.pageInfo.chartList[index],
+        ...itemConfig
+      })
+      // 对比之前的config和当前的itemConfig的xywh，如果有变化，就改变卡尺对齐线
+      const oldConfig = state.pageInfo.chartList[index]
+      if (
+        oldConfig.x !== itemConfig.x ||
+        oldConfig.y !== itemConfig.y ||
+        oldConfig.w !== itemConfig.w ||
+        oldConfig.h !== itemConfig.h
+      ) {
+        // 改变当前组件的卡尺对齐线
+        changePresetLine(state, itemConfig)
+      }
+    }
+  },
+  setPresetLine (state, { x, y, w, h }) {
+    state.presetLine = [
+      { type: 'h', site: y || 0 },
+      { type: 'v', site: x || 0 }
+    ]
+  },
+  changeActiveItemConfig (state, config) {
+    state.activeItemConfig = cloneDeep(config)
+  },
+  // 新增一个组件
+  addItem (state, itemConfig) {
+    // 放到第一项
+    state.pageInfo.chartList.unshift(itemConfig)
+    changeZIndexFuc(state, state.pageInfo.chartList)
+    saveTimeLineFunc(state, '新增组件' + itemConfig?.title)
+  },
+  // 删除组件/批量删除组件
+  delItem (state, codes) {
+    if (Array.isArray(codes)) {
+      const delCharts = state.pageInfo.chartList.filter(chart => codes.includes(chart.code))
+      // 如果删除的组件中有跑马灯，需要删除将跑马灯组件的音频实例销毁
+      delCharts.some(item => { item.type === 'marquee' && EventBus.$emit('deleteComponent', item.code) })
+      state.pageInfo.chartList = state.pageInfo.chartList.filter(chart => !codes.includes(chart.code))
+    } else {
+      // 如果删除的组件是跑马灯，需要删除将跑马灯组件的音频实例销毁
+      const delChart = state.pageInfo.chartList.find(chart => codes === chart.code)
+      if (delChart && delChart.type === 'marquee') {
+        EventBus.$emit('deleteComponent', codes)
+      }
+      state.pageInfo.chartList = state.pageInfo.chartList.filter(chart => codes !== chart.code)
+      // 删除组件时，将该组件的缓存数据库中的数据也删除
+      deldataset(state, 'dataset', codes)
+      deldataset(state, 'computedDatas', codes)
+    }
+    // 存储删除后的状态
+    saveTimeLineFunc(state, '删除组件')
+    if (state.pageInfo.chartList.findIndex(item => item.code === state.activeCode) == -1) {
+      state.activeItemConfig = null
+      state.activeCode = null
+      EventBus.$emit('closeRightPanel')
+    }
+    // 发送事件，关闭配置面板
+  },
+  changePageConfig (state, pageConfig) {
+    Vue.set(state.pageInfo, 'pageConfig', cloneDeep(pageConfig))
+    state.updateKey = new Date().getTime()
+  },
+  changeActiveItem (state, activeItem) {
+    state.activeItem = cloneDeep(activeItem)
+    state.activeId = activeItem.code
+    // state.settingJson = cloneDeep(activeItem.settingConfig) || {}
+  },
+  // 改变当前组件的xywh
+  changeActiveItemWH (state, chart) {
+    if (chart.code === state.activeItemConfig.code) {
+      state.activeItemConfig = {
+        ...state.activeItemConfig,
+        ...chart
+      }
+    }
+  },
+  // 清空卡尺对齐线
+  resetPresetLine (state) {
+    state.presetLine = []
+  },
+  // 改变组件的层级
+  changeZIndex (state, list) {
+    changeZIndexFuc(state, list)
+  },
+  // 改变锁定状态
+  changeLocked (state, config) {
+    // 如果是多选，则改变框选中的所有组件的锁定状态
+    if (state.activeCodes && state.activeCodes.length > 1) {
+      state.pageInfo.chartList = state.pageInfo.chartList?.map(chart => {
+        return {
+          ...chart,
+          locked: state.activeCodes.includes(chart.code) ? !config.locked : chart.locked
+        }
+      })
+      saveTimeLineFunc(state, config.locked ? '解锁选中组件' : '锁定选中组件')
+    } else {
+      // 如果不是多选，则只改变当前一个
+      const index = state.pageInfo.chartList.findIndex(
+        item => item.code === config.code
+      )
+      Vue.set(state.pageInfo.chartList[index], 'locked', !config.locked)
+      saveTimeLineFunc(state, !config.locked ? `解锁${config?.title}` : `锁定${config?.title}`)
+    }
+  },
+  // 改变网格显示状态
+  changeGridShow (state, isShow) {
+    state.hasGrid = isShow
+  },
+  // 改变组件的key
+  changeChartKey (state, code) {
+    const index = state.pageInfo.chartList.findIndex(
+      item => item.code === code
+    )
+    if (index < 0) {
+      return
+    }
+    const config = state.pageInfo.chartList[index]
+    Vue.set(config, 'key', config.code + new Date().getTime())
+  },
+  // 改变缓存数据集中的字段列表
+  changeCacheDataFields (state, { dataSetId, data }) {
+    // 将 state.pageInfo.pageConfig.cacheDataSets 中的 dataSetId 对应fields字段数据替换为 data
+    const index = state.pageInfo.pageConfig.cacheDataSets.findIndex(cacheData => cacheData.dataSetId === dataSetId)
+    if (index < 0) {
+      return
+    }
+    Vue.set(state.pageInfo.pageConfig.cacheDataSets[index], 'fields', data?.fields || [])
+  },
+  // 改变缓存数据集中的数据参数
+  changeCacheDataParams (state, { dataSetId, data }) {
+    // 将 state.pageInfo.pageConfig.cacheDataSets 中的 dataSetId 对应fields字段数据替换为 data
+    const index = state.pageInfo.pageConfig.cacheDataSets.findIndex(cacheData => cacheData.dataSetId === dataSetId)
+    if (index < 0) {
+      return
+    }
+    Vue.set(state.pageInfo.pageConfig.cacheDataSets[index], 'params', data?.params || [])
+  },
+  // 改变缓存数据集中的数据
+  changeCacheDataSetData (state, { dataSetId, data }) {
+    const index = state.pageInfo.pageConfig.cacheDataSets.findIndex(cacheData => cacheData.dataSetId === dataSetId)
+    if (index < 0) {
+      return
+    }
+    state.pageInfo.pageConfig.cacheDataSets[index].data = data || []
+  },
+  // 改变shift是否被按下
+  changeCtrlOrCommandDown (state, isDown) {
+    state.shiftKeyDown = isDown
+  },
+  // 初始化store中的数据，防止污染
+  resetStoreData (state) {
+    for (const stateKey in state) {
+      state[stateKey] = cloneDeep(defaultData[stateKey])
+    }
+  },
+  changeZoom (state, zoom) {
+    state.zoom = zoom
+  },
+  changeFitZoom (state, zoom) {
+    state.fitZoom = zoom
+  },
+  changeActivePos (state, { diffX, diffY }) {
+    const activeCodes = state.activeCodes
+    activeCodes?.forEach(code => {
+      const chart = state.pageInfo.chartList.find(item => item.code === code)
+      if (chart) {
+        chart.x += diffX
+        chart.y += diffY
+      }
+      const index = state.pageInfo.chartList.findIndex(
+        item => item.code === chart.code
+      )
+      if (index < 0) {
+        return
+      }
+      Vue.set(state.pageInfo.chartList, index, {
+        ...state.pageInfo.chartList[index],
+        ...chart
+      })
+      changePresetLine(state, chart)
+    })
+  },
+  // 保存当前状态
+  saveTimeLine (state, title) {
+    const date = new Date()
+    const time = moment(date).format('HH:mm:ss')
+    // title默认获取当前时间，时分秒
+    if (!title) {
+      const date = new Date()
+      title = `${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`
+    }
+    saveTimeLineFunc(state, title, time)
+  },
+  // 撤回/反撤回当前事件线 （undo和redo放到一个函数中，用isUndo区分）
+  undoTimeLine (state, isUndo = true) {
+    let currentStore = {}
+    // 撤回
+    if (isUndo) {
+      if (state.timelineStore.length > 0 && state.currentTimeLine > 1) {
+        // 时间线往前推一个
+        state.currentTimeLine = state.currentTimeLine - 1
+        currentStore = state.timelineStore[state.currentTimeLine - 1]
+        if (currentStore?.chartList) {
+          state.pageInfo.chartList = cloneDeep(currentStore?.chartList)
+          state.activeItemConfig = cloneDeep(currentStore?.chartList?.find(item => item.code === state.activeCode) || {})
+          EventBus.$emit('operationRollback', true)
+        }
+      }
+    }
+    // 反撤回 redo
+    if (!isUndo) {
+      if (state.currentTimeLine < state.timelineStore.length) {
+        // 时间线往后推一个
+        state.currentTimeLine = state.currentTimeLine + 1
+        currentStore = state.timelineStore[state.currentTimeLine - 1]
+        state.pageInfo.chartList = cloneDeep(currentStore?.chartList || [])
+      }
+    }
+    state.pageInfo.chartList = state.pageInfo.chartList.map(chart => {
+      return {
+        ...chart,
+        key: chart.code + new Date().getTime()
+      }
+    })
+  },
+  clearTimeline (state) {
+    // 最后一个状态
+    const lastStore = state.timelineStore[state.timelineStore.length - 1]
+    // 将最后一个状态作为初始状态，否则下次拖拽后无法回到之前
+    state.timelineStore = [
+      {
+        ...lastStore,
+        timelineTitle: '初始状态',
+        updateTime: moment(new Date()).format('HH:mm:ss')
+      }
+    ]
+    state.currentTimeLine = 1
+  },
+  // 回退到指定时间线
+  rollbackTimeline (state, index) {
+    state.pageInfo.chartList = cloneDeep(state.timelineStore[index]?.chartList || [])
+    state.currentTimeLine = index + 1
+  },
+  // 复制组件
+  copyCharts (state) {
+    state.copyChartCodes = cloneDeep(state.activeCodes)
+  },
+  // 粘贴组件
+  pasteCharts (state) {
+    const copyChartCodes = state.copyChartCodes
+    const chartList = state.pageInfo.chartList
+    // 将选中的组件复制一份， code加上 随机后缀, key 也加上随机后缀， x, y 各增加50
+    const additionCode = randomString(5)
+    const copyCharts = copyChartCodes.map(code => {
+      const chart = chartList.find(item => item.code === code)
+      const copyChart = cloneDeep(chart)
+      copyChart.code = `${copyChart.code}_${additionCode}`
+      copyChart.key = `${copyChart.key}_${additionCode}`
+      copyChart.group = (copyChart.group && copyChart.group !== 'tempGroup') ? `${copyChart.group}_${additionCode}` : ''
+      copyChart.x += 50
+      copyChart.y += 50
+      return copyChart
+    })
+    // 将复制的组件添加到chartList中
+    state.pageInfo.chartList = [...copyCharts, ...state.pageInfo.chartList]
+  },
+  // 更新数据集库中的内容
+  updateDataset (state, res) {
+    // 如果只是更新了组件的标题
+    if (res.isChangeTitle) {
+      if (state.dataset.hasOwnProperty(res.oldTitle + '_' + res.code)) {
+        const _dataset = CloneDeep(state.dataset)
+        _dataset[res.title + '_' + res.code] = _dataset[res.oldTitle + '_' + res.code]
+        delete _dataset[res.oldTitle + '_' + res.code]
+        state.dataset = CloneDeep(_dataset)
+      }
+    } else {
+      Vue.set(state.dataset, res.title + '_' + res.code, res.data)
+    }
+  },
+  // 更新数据集库中的内容
+  updateComputedDatas (state, res) {
+    // 如果只是更新了组件的标题
+    if (res.isChangeTitle) {
+      if ((!res.isExpression) && state.computedDatas.hasOwnProperty(res.oldTitle + '_' + res.code)) {
+        const _computedDatas = CloneDeep(state.computedDatas)
+        _computedDatas[res.title + '_' + res.code] = _computedDatas[res.oldTitle + '_' + res.code]
+        delete _computedDatas[res.oldTitle + '_' + res.code]
+        state.computedDatas = CloneDeep(_computedDatas)
+      }
+    } else {
+      Vue.set(state.computedDatas, res.title + '_' + res.code, res.data)
+    }
+  },
+  // 清空数据集库
+  emptyDataset (state) {
+    state.dataset = {}
+  },
+  // 清空数据集库
+  emptyComputedDatas (state) {
+    state.computedDatas = {}
+  },
+  // 修改磁吸状态
+  snapChange (state, snap) {
+    state.snapTolerance = snap
+  }
+}
+function deldataset (state, type, codes) {
+  const datasets = state[type]
+  for (const code of codes) {
+    for (const key in datasets) {
+      if (key.endsWith(code)) {
+        delete state[type][key]
+        break // 找到匹配的属性后，退出内层循环
+      }
+    }
+  }
+}
+function changeZIndexFuc (state, list) {
+  const len = list?.length - 1 || 0
+  list.forEach((item, i) => {
+    const index = state.pageInfo.chartList.findIndex(
+      _item => _item.code === item.code
+    )
+    Vue.set(state.pageInfo.chartList[len - index], 'z', i)
+  })
+}
+
+// 改变当前组件的卡尺对齐线
+function changePresetLine (state, { x, y, w, h }) {
+  state.presetLine = [
+    { type: 'h', site: y || 0 },
+    { type: 'v', site: x || 0 }
+  ]
+}
+
+function changeGroup (code, state) {
+  if (code) {
+    // 找到和此组件group相同的组件，并添加到activeCodes中
+    const group = state.pageInfo.chartList?.find(item => item.code === code)?.group
+    if (group) {
+      state.activeCodes = state.pageInfo.chartList?.filter(chart => chart.group === group && chart.group).map(item => item.code)
+    }
+    if (state.shiftKeyDown) {
+      state.activeCodes = uniq([...state.activeCodes, code])
+      // eslint-disable-next-line no-unused-expressions
+      state.pageInfo.chartList?.forEach(chart => {
+        if (state.activeCodes.includes(chart.code)) {
+          chart.group = 'tempGroup'
+        }
+      })
+    } else {
+      if (!group) {
+        state.activeCodes = [code]
+      }
+    }
+  } else {
+    state.activeCodes = []
+    state.pageInfo.chartList = state.pageInfo.chartList?.map(chart => ({
+      ...chart,
+      group: chart.group === 'tempGroup' ? '' : chart.group
+    }))
+  }
+}
+
+function saveTimeLineFunc (state, title, time) {
+  // 最多保存10个状态
+  const MAX_TIME_LINE = 10
+  const stateCopy = cloneDeep(state.pageInfo)
+  const date = new Date()
+  time = time || moment(date).format('HH:mm:ss')
+  stateCopy.timelineTitle = title
+  stateCopy.updateTime = time
+
+  if (!Array.isArray(state.timelineStore)) {
+    state.timelineStore = []
+  }
+  if (!Number.isInteger(state.currentTimeLine)) {
+    state.currentTimeLine = 0
+  }
+  if (state.timelineStore.length >= MAX_TIME_LINE) {
+    // 去掉最早的一个
+    state.timelineStore.shift()
+  }
+  state.timelineStore?.push(stateCopy)
+  state.currentTimeLine = state.timelineStore?.length
+}
--- a/frontend/packages/js/store/state.js
+++ b/frontend/packages/js/store/state.js
@@ -0,0 +1,83 @@
+// import _ from 'lodash'
+import cloneDeep from 'lodash/cloneDeep'
+export const defaultData = {
+  // 大屏信息
+  pageInfo: {
+    className:
+      'com.gccloud.dataroom.core.module.manage.dto.DataRoomPageDTO',
+    id: '',
+    name: '测试bigScreen',
+    code: '',
+    icon: '',
+    iconColor: '#007aff',
+    orderNum: 0,
+    remark: '',
+    type: 'bigScreen',
+    style: '',
+    parentCode: '0',
+
+    // 大屏页面的配置
+    pageConfig: {
+      w: 1920,
+      h: 1080,
+      bgColor: '#151a26', // 背景色
+      bg: '', // 背景图
+      lightBgColor: '#f5f7fa',
+      lightBg: '',
+      opacity: 100,
+      customTheme: 'dark',
+      themeJson: {}, // 自定义主题配置
+      // 缓存的数据集 { name: '', dataSetId: '' }
+      cacheDataSets: [],
+      refreshConfig: [],
+      // 自适应模式  无(none) 、自动(auto)、宽度铺满(fitWidth)、高度铺满(fitHeight)和 双向铺满（cover） 5 种自适应模式
+      fitMode: 'none'
+    },
+
+    // 图表的集合
+    chartList: []
+  },
+
+  // 当前选中的组件code
+  activeCode: null,
+  // 当前鼠标悬浮的组件code
+  hoverCode: null,
+  // 页面初始化加载状态
+  pageLoading: true,
+  // 当前选中的组件的配置
+  activeItemConfig: null,
+  // 当前选中的组件的对齐线
+  presetLine: [],
+  //  强制更新键
+  updateKey: null,
+
+  // 是否显示网格
+  hasGrid: false,
+
+  // 多选的组件code数据
+  activeCodes: [],
+  // 复制到粘贴板上的组件编码
+  copyChartCodes: [],
+  // false 表示 shift 键没有被按下， true表示 shift 键被按下
+  shiftKeyDown: false,
+  // 缩放
+  zoom: 100,
+  // 自适应下的缩放比例
+  fitZoom: 100,
+  iframeDialog: false,
+  // 页面上所有组件的数据集的数据信息
+  dataset: {},
+  // 页面上所有组件的数据集的数据信息
+  computedDatas: {},
+  // 是否开启磁吸
+  snapTolerance: 3
+}
+
+export default () => ({
+  // 存储的大屏timeline信息
+  timelineStore: [],
+  // 当前的timeline 的index
+  currentTimeLine: 0,
+  // 具体信息
+  ...cloneDeep(defaultData)
+})