tzjy-code
/
DataRoom
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat:g2plot代码重构

Browse Source
main
liu.shiyi 2 years ago
parent 2c679f9013
commit 1115de732c
5 changed files with 127 additions and 231 deletions
Show Stats Download Patch File Download Diff File

1
data-room-ui/packages/BigScreenDesign/PageDesignTop.vue
Unescape Escape View File

@ -199,7 +199,6 @@ export default {
saveTimeLine: 'bigScreen/saveTimeLine' saveTimeLine: 'bigScreen/saveTimeLine'
}), }),
setAlign (command) { setAlign (command) {
debugger
const pageInfo = _.cloneDeep(this.pageInfo) const pageInfo = _.cloneDeep(this.pageInfo)
// 获取所有选中的组件 // 获取所有选中的组件
let activeChartList = pageInfo.chartList.filter((chart) => { let activeChartList = pageInfo.chartList.filter((chart) => {

21
data-room-ui/packages/BigScreenDesign/RightSetting/index.vue
Unescape Escape View File

@ -51,6 +51,7 @@ import rightSetting from 'packages/js/utils/rightSettingImport'
import CustomComponent from './G2CustomSetting.vue' import CustomComponent from './G2CustomSetting.vue'
import Svgs from 'packages/Svgs/setting.vue' import Svgs from 'packages/Svgs/setting.vue'
import { mapState, mapMutations } from 'vuex' import { mapState, mapMutations } from 'vuex'
import _ from 'lodash'
// 整体动态导入右侧设置组件，不用手动注册 // 整体动态导入右侧设置组件，不用手动注册
const components = {} const components = {}
for (const key in rightSetting) { for (const key in rightSetting) {
@ -86,23 +87,23 @@ export default {
}, },
configDataSource () { configDataSource () {
return { return {
dataSource: this.config.dataSource, dataSource: _.cloneDeep(this.config.dataSource),
linkage: this.config?.linkage, linkage: _.cloneDeep(this.config?.linkage),
dataHandler: this.config?.dataHandler, dataHandler: this.config?.dataHandler,
dataSourceSetting: this.config?.setting?.filter(item => item.tabName === 'data') || [] dataSourceSetting: _.cloneDeep(this.config?.setting?.filter(item => item.tabName === 'data')) || []
} }
}, },
configStyle () { configStyle () {
return { return {
showTitle: this.config.showTitle, showTitle: this.config.showTitle,
title: this.config?.title, title: _.cloneDeep(this.config?.title),
w: this.config?.w, w: this.config?.w,
h: this.config?.h, h: this.config?.h,
x: this.config?.x, x: this.config?.x,
y: this.config?.y, y: this.config?.y,
z: this.config?.z, z: this.config?.z,
setting: this.config?.setting, setting: _.cloneDeep(this.config?.setting),
customize: this.config?.customize, customize: _.cloneDeep(this.config?.customize),
url: this.config?.url, url: this.config?.url,
dateFormat: this.config?.dateFormat, dateFormat: this.config?.dateFormat,
endTime: this.config?.endTime endTime: this.config?.endTime
@ -112,8 +113,8 @@ export default {
watch: { watch: {
// 只更新样式部分，不调用接口 // 只更新样式部分，不调用接口
configStyle: { configStyle: {
handler (val) { handler (val, oldValue) {
if (val) { if (!_.isEqual(val, oldValue)) {
this.$emit('updateSetting', this.config) this.$emit('updateSetting', this.config)
this.saveTimeLine(`更新${val?.title}组件属性`) this.saveTimeLine(`更新${val?.title}组件属性`)
} }
@ -122,8 +123,8 @@ export default {
}, },
// 更新数据源部分，需要调用接口 // 更新数据源部分，需要调用接口
configDataSource: { configDataSource: {
handler (val) { handler (val, oldValue) {
if (val) { if (!_.isEqual(val, oldValue)) {
this.$emit('updateDataSetting', this.config) this.$emit('updateDataSetting', this.config)
this.saveTimeLine(`更新${val?.title}组件属性`) this.saveTimeLine(`更新${val?.title}组件属性`)
} }

18
data-room-ui/packages/BigScreenDesign/index.vue
Unescape Escape View File

@ -383,20 +383,18 @@ export default {
}, },
// 自定义属性更新 // 自定义属性更新
updateSetting (config) { updateSetting (config) {
config.key = new Date().getTime() if (config.type === 'map') {
config.key = new Date().getTime()
}
this.changeChartConfig(_.cloneDeep(config)) this.changeChartConfig(_.cloneDeep(config))
this.$refs.Render?.$refs['RenderCard' + config.code][0]?.$refs[
config.code
]?.changeStyle(_.cloneDeep(config))
}, },
// 动态属性更新 // 动态属性更新
updateDataSetting (config) { updateDataSetting (config) {
if ( config.key = new Date().getTime()
this.$refs.Render?.$refs['RenderCard' + config.code][0] && this.changeChartConfig(config)
this.$refs.Render?.$refs['RenderCard' + config.code][0]?.$refs[config.code] &&
this.$refs.Render?.$refs['RenderCard' + config.code][0]?.$refs[config.code]?.updateChartData
) {
this.$refs.Render?.$refs['RenderCard' + config.code][0]?.$refs[
config.code
]?.updateChartData(_.cloneDeep(config))
}
}, },
onSelectArea (area) { onSelectArea (area) {
const { startX, startY, endX, endY } = area const { startX, startY, endX, endY } = area

141
data-room-ui/packages/PlotRender/index.vue
Unescape Escape View File

@ -59,7 +59,6 @@ export default {
this.plotList = [...this.plotList, ...getCustomPlots()] this.plotList = [...this.plotList, ...getCustomPlots()]
}, },
mounted () { mounted () {
this.chartInit()
}, },
beforeDestroy () { beforeDestroy () {
if (this.chart) { if (this.chart) {
@ -69,76 +68,37 @@ export default {
methods: { methods: {
...mapMutations('bigScreen', ['changeChartConfig']), ...mapMutations('bigScreen', ['changeChartConfig']),
chartInit () { chartInit () {
// key和code相等，说明是一进来刷新，调用/chart/data/list let config = this.config
// key和code相等，说明是一进来刷新，调用list接口
if (this.config.code === this.config.key || this.isPreview) { if (this.config.code === this.config.key || this.isPreview) {
// 先给默认数据, 渲染出图表 // 改变样式
const config = _.cloneDeep(this.config) config = this.changeStyle(config)
// config.option = plotList.find(plot => plot.name === config.name)?.option // 改变数据
this.newChart(config.option) this.changeDataByCode(config).then((res) => {
// 初始化图表
// 再根据数据更新组件 this.newChart(res)
// this.updateChart() }).catch(() => {})
this.updateData()
} else { } else {
// 否则说明是更新或者复制 // 否则说明是更新，这里的更新只指更新数据（改变样式时是直接调取changeStyle方法），因为更新数据会改变key,调用chart接口
this.newChart(this.config.option) this.changeData(config).then((res) => {
// 初始化图表
this.newChart(res)
})
} }
}, },
/** /**
* 构造chart * 构造chart
*/ */
newChart (option) { newChart (config) {
this.chart = new g2Plot[this.config.chartType](this.chatId, { this.chart = new g2Plot[config.chartType](this.chatId, {
renderer: 'svg', renderer: 'svg',
// 大屏缩放状态下，点击准确 // 仪表盘缩放状态下，点击准确
supportCSSTransform: true, supportCSSTransform: true,
...option || this.config.option ...config.option
}) })
this.chart.render() this.chart.render()
this.registerEvent() this.registerEvent()
}, },
// 根据G2Plot组件配置的dataKey，将获取到的数据赋值给指定的dataKey
updateData () {
this.getCurrentOption().then(({ data, config }) => {
if (data.success) {
// 成功后更新数据
config = this.buildOption(config, data)
const dataKey = config.option.dataKey
// eslint-disable-next-line no-inner-declarations
function getValueFromOption (option, dataKey) {
try {
return eval('option.' + dataKey)
} catch (error) {
return undefined
}
}
const newData = getValueFromOption(config.option, dataKey)
if (this.chart) {
this.chart.changeData(newData)
}
}
})
},
/**
* 更新组件
*/
// updateChart () {
// if (this.isPreview) {
// this.getCurrentOption().then(({ data, config }) => {
// if (data.success) {
// // 成功后更新数据
// config = this.buildOption(config, data)
// this.changeChartConfig(config)
// this.chart.update(config.option)
// } else {
// config.option.data = this.plotList.find(plot => plot.name === config.name)?.option.data
// this.chart.update(config.option)
// }
// })
// } else {
// this.updateChartData(this.config)
// }
// },
/** /**
* 注册事件 * 注册事件
*/ */
@ -155,21 +115,17 @@ export default {
this.linkage(formData) this.linkage(formData)
}) })
}, },
/** // 将config.setting的配置转化为option里的配置，这里之所以将转化的方法提出来，是因为在改变维度指标和样式的时候都需要转化
* 组件的配置 transformSettingToOption (config, type) {
* @returns {Promise<unknown>} let option = null
*/
buildOption (config, data) {
config = _.cloneDeep(config)
// 遍历config.setting，将config.setting中的值赋值给config.option中对应的optionField
config.setting.forEach(set => { config.setting.forEach(set => {
if (set.optionField) { if (set.optionField) {
const optionField = set.optionField.split('.') const optionField = set.optionField.split('.')
let option = config.option option = config.option
optionField.forEach((field, index) => { optionField.forEach((field, index) => {
if (index === optionField.length - 1) { if (index === optionField.length - 1) {
// 数据配置时，必须有值才更新 // 数据配置时，必须有值才更新
if ((set.tabName === 'data' && set.value) || set.tabName === 'custom') { if (set.tabName === type && set.value) {
option[field] = set.value option[field] = set.value
} }
} else { } else {
@ -178,35 +134,50 @@ export default {
}) })
} }
}) })
// eslint-disable-next-line no-unused-vars config.option = option
const option = config.option return config
// eslint-disable-next-line no-unused-vars },
// const setting = config.setting dataFormatting (config, data) {
if (this.config.optionHandler) { // 数据返回成功则赋值
try {
// 此处函数处理config
eval(this.config.optionHandler)
} catch (e) {
console.error(e)
}
}
if (data.success) { if (data.success) {
data = data.data data = data.data
if (this.config.dataHandler) { config = this.transformSettingToOption(config, 'data')
// 获取到后端返回的数据，有则赋值
const option = config.option
const setting = config.setting
if (config.dataHandler) {
try { try {
// 此处函数处理data // 此处函数处理data
eval(this.config.dataHandler) eval(config.dataHandler)
} catch (e) { } catch (e) {
console.error(e) console.error(e)
} }
} }
// eslint-disable-next-line no-undef
config.option = option
config.option.data = data config.option.data = data
} else { } else {
// 数据获取失败，使用前端配置中的默认数据 // 数据返回失败则赋前端的模拟数据
config.option.data = this.plotList?.find(plot => plot.name === this.config.name)?.option?.data config.option.data = this.plotList?.find(plot => plot.name === config.name)?.option?.data
}
return config
},
// 组件的样式改变，返回改变后的config
changeStyle (config) {
config = this.transformSettingToOption(config, 'custom')
// 这里定义了option和setting是为了保证在执行eval时,optionHandler、dataHandler里面可能会用到，
const option = config.option
const setting = config.setting
if (this.config.optionHandler) {
try {
// 此处函数处理config
eval(this.config.optionHandler)
} catch (e) {
console.error(e)
}
}
if (this.chart) {
this.chart.update(config.option)
} }
this.changeChartConfig(config)
return config return config
} }
} }

177
data-room-ui/packages/js/mixins/commonMixins.js
Unescape Escape View File

@ -37,72 +37,25 @@ export default {
* 初始化组件 * 初始化组件
*/ */
chartInit () { chartInit () {
// 初始化组件和数据，若自己的组件的初始化和数据处理不一样，可重写该方法 let config = this.config
// 如果key和code相等，说明是一进来刷新，调用/chart/data/list，否则是更新，调用 chart/data/chart // key和code相等，说明是一进来刷新，调用list接口
// 或者是组件联动isLink,也需要调用/chart/data/list更新 if (this.config.code === this.config.key || this.isPreview) {
if (this.config.code === this.config.key) { // 改变样式
// 根据缓存数据初始化的组件 config = this.changeStyle(config) ? this.changeStyle(config) : config
if (this.config.dataSource.dataSetType === '2') { // 改变数据
this.config = this.buildOption(this.config, { success: false }) config = this.changeDataByCode(config)
this.changeChartConfig(this.config)
this.newChart(this.config.option)
} else {
// 根据数据集初始化的组件
if (this.isPreview) {
this.getCurrentOption().then(({ config, data }) => {
config = this.buildOption(config, data)
this.changeChartConfig(config)
this.newChart(config.option)
})
} else {
this.updateChartData(this.config)
}
}
} else { } else {
this.newChart(this.config.option) // 否则说明是更新，这里的更新只指更新数据（改变样式时是直接调取changeStyle方法），因为更新数据会改变key,调用chart接口
} // eslint-disable-next-line no-unused-vars
}, config = this.changeData(config)
// 组件仅更新数据
changeData () { },
// 组件仅更新样式
changeStyle () {
this.config = _.cloneDeep(this.config)
// 遍历config.setting，将config.setting中的值赋值给config.option中对应的optionField
this.config.setting.forEach(set => {
if (set.optionField) {
const optionField = set.optionField.split('.')
let option = this.config.option
optionField.forEach((field, index) => {
if (index === optionField.length - 1) {
// 数据配置时，必须有值才更新
if ((set.tabName === 'data' && set.value) || set.tabName === 'custom') {
option[field] = set.value
}
} else {
option = option[field]
}
})
}
})
if (this.config.optionHandler) {
try {
// 此处函数处理config
eval(this.config.optionHandler)
} catch (e) {
console.error(e)
}
} }
}, },
/** /**
* 初始化组件时获取后端返回的数据, 返回数据和当前组件的配置 * 初始化组件时获取后端返回的数据, 返回数据和当前组件的配置_list
* @param settingConfig 设置时的配置。不传则为当前组件的配置 * @param settingConfig 设置时的配置。不传则为当前组件的配置
* @returns {Promise<unknown>} * @returns {Promise<unknown>}
*/ */
getCurrentOption (settingConfig) { changeDataByCode (config) {
const pageCode = this.pageCode
const chartCode = this.config.code
const type = this.config.type
const config = _.cloneDeep(settingConfig || this.config)
let currentPage = 1 let currentPage = 1
let size = 10 let size = 10
if (config?.option?.pagination) { if (config?.option?.pagination) {
@ -110,49 +63,28 @@ export default {
size = config.option.pagination.pageSize size = config.option.pagination.pageSize
} }
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
this.getDataByCode(pageCode, chartCode, type, currentPage, size).then((data) => { getChatInfo({
resolve({ // innerChartCode: this.pageCode ? config.code : undefined,
config, data chartCode: config.code,
}) current: currentPage,
pageCode: this.pageCode,
size: size,
type: config.type
}).then((data) => {
config = this.dataFormatting(config, data)
this.changeChartConfig(config)
}).catch((err) => { }).catch((err) => {
reject(err) console.log(err)
}).finally(() => {
resolve(config)
}) })
}) })
}, },
/**
* 根据 chatCode 获取后端返回的数据
* @param pageCode
* @param chartCode
* @param type
* @param current
* @param size
* @returns {Promise<*>}
*/
async getDataByCode (
pageCode,
chartCode,
type,
current = 1,
size = 10
) {
let parentCode
const data = await getChatInfo({
innerChartCode: parentCode ? chartCode : undefined,
chartCode: parentCode || chartCode,
current: current,
pageCode: pageCode,
size: size,
type: type
})
return data
},
/** /**
* @description: 更新chart * @description: 更新chart
* @param {Object} config * @param {Object} config
*/ */
updateChartData (config) { changeData (config, filterList) {
const filterList = this.filterList
const params = { const params = {
chart: { chart: {
...config, ...config,
@ -161,41 +93,36 @@ export default {
current: 1, current: 1,
pageCode: this.pageCode, pageCode: this.pageCode,
type: config.type, type: config.type,
filterList filterList: filterList || this.filterList
} }
// if (config.type === 'remoteComponent') { return new Promise((resolve, reject) => {
// config = this.buildOption(config, { success: false }) getUpdateChartInfo(params).then((data) => {
// config.key = new Date().getTime() config = this.dataFormatting(config, data)
// this.changeChartConfig(config) // this.changeChartConfig(config)
// return if (this.chart) {
// } // 单指标组件和多指标组件的changeData传参不同
getUpdateChartInfo(params).then((res) => { if (['Liquid', 'Gauge', 'RingProgress'].includes(config.chartType)) {
// 数据集脚本前端执行 this.chart.changeData(config.option.percent)
if (res.executionByFrontend) { } else {
try { this.chart.changeData(config.option.data)
const returnResult = eval(`(${res.data})`)() }
res.data = returnResult
} catch (error) {
console.error('数据集脚本执行失败', error)
} }
} }).catch(err => {
config = this.buildOption(config, res) console.log(err)
config.key = new Date().getTime() }).finally(() => {
this.changeChartConfig(config) resolve(config)
// 获取数据后更新组件配置 })
// this.$message.success('更新成功')
}).catch((err) => {
console.error(err)
// this.$message.error('更新失败')
}) })
}, },
newChart () { dataFormatting (config, data) {
// 需要在自己的组件中重写此方法，用于构建自己的组件 // 覆盖
},
newChart (option) {
// 覆盖
}, },
buildOption (config, data) { changeStyle (config) {
// 需要在自己的组件中重写此方法:config当前组件的配置，data后端返回的数据 // this.changeChartConfig(config)
return config // return config
}, },
// 缓存组件数据监听 // 缓存组件数据监听
watchCacheData () { watchCacheData () {
@ -206,7 +133,7 @@ export default {
this.config.dataSource.dataSetType === '2' && this.config.dataSource.dataSetType === '2' &&
this.config.dataSource.businessKey === dataSetId this.config.dataSource.businessKey === dataSetId
) { ) {
const config = this.buildOption(this.config, data) const config = this.dataFormatting(this.config, data)
config.key = new Date().getTime() config.key = new Date().getTime()
this.changeChartConfig(config) this.changeChartConfig(config)
this.newChart(config.option) this.newChart(config.option)

Write Preview
Loading…
Cancel
Save