267 lines
9.7 KiB
JavaScript
267 lines
9.7 KiB
JavaScript
// 组件配置转化
|
||
// 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
|
||
)
|
||
}
|
||
}
|