初始化
This commit is contained in:
砂糖
266
frontend/packages/js/store/actions.js
Normal file
266
frontend/packages/js/store/actions.js
Normal file
@@ -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
|
||||
)
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user