1、组件联动案例(柱图：触发者+接收者; 折线图：触发者+接收者; 百分比图：接收者; )
2、保存、预览、撤回按钮可点击范围调整; 3、拖入组件配置项定位不准的bug修复; 4、修复初始大屏默认背景色不生效的问题;
程序员世林
2 years ago
parent
afbc639913
commit
7a56f172d2
@ -0,0 +1,42 @@
|
||||
/*
|
||||
* @Author: chengsl
|
||||
* @Date: 2022-11-08 10:30:37
|
||||
* @LastEditors: chengsl
|
||||
* @LastEditTime: 2023-02-24 09:54:34
|
||||
* @Description: 设计器公用变量
|
||||
*/
|
||||
|
||||
const designer = {
|
||||
state: {
|
||||
allComponentLinkage: [], // 所有组件之间的联动配置
|
||||
},
|
||||
|
||||
mutations: {
|
||||
SET_ALL_COMPONENT_LINKAGE: (state, params) => {
|
||||
var { index = -1, widgetId = '', linkageArr } = params
|
||||
try {
|
||||
console.log('params---', params)
|
||||
linkageArr = linkageArr.map(item => {
|
||||
const arr = item.widgetValue.split('-$-')
|
||||
return {
|
||||
originId: widgetId,
|
||||
targetId: arr[0],
|
||||
targetName: arr[1],
|
||||
paramsConfig: item.paramsConfig
|
||||
}
|
||||
})
|
||||
} catch (error) {
|
||||
linkageArr = [] // 兼容异常错误导致页面加载不出来
|
||||
}
|
||||
state.allComponentLinkage[index] = {
|
||||
index: +index,
|
||||
widgetId,
|
||||
linkageArr
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
actions: {}
|
||||
}
|
||||
|
||||
export default designer
|
||||
@ -0,0 +1,128 @@
|
||||
/*
|
||||
* @Author: chengsl
|
||||
* @Date: 2023-02-24 09:40:13
|
||||
* @LastEditors: chengsl
|
||||
* @LastEditTime: 2023-02-24 13:12:24
|
||||
* @Description: 各联动组件的参数配置 参数paramsKey的值具体封装时再改
|
||||
*/
|
||||
import { eventBus as bus } from "@/utils/eventBus";
|
||||
export const lickageParamsConfig = [
|
||||
// {
|
||||
// name: '按钮组',
|
||||
// code: 'widgetButtonGroup',
|
||||
// paramsKey: [] // 40@remarks 动态：[...row, index]
|
||||
// },
|
||||
{
|
||||
name: '柱图',
|
||||
code: 'widget-barchart',
|
||||
paramsKey: ['name', 'value']
|
||||
},
|
||||
// ……
|
||||
{
|
||||
name: '折线图',
|
||||
code: 'widget-linechart',
|
||||
paramsKey: ['name', 'value']
|
||||
},
|
||||
{
|
||||
name: '百分比图',
|
||||
code: 'widgetPiePercentageChart',
|
||||
paramsKey: ['value']
|
||||
},
|
||||
]
|
||||
|
||||
export const getOneConfigByCode = function(code) {
|
||||
return lickageParamsConfig.find(item => { return item.code === code })
|
||||
}
|
||||
|
||||
export const getOneConfigByName = function(name) {
|
||||
return lickageParamsConfig.find(item => { return item.name === name })
|
||||
}
|
||||
|
||||
/**
|
||||
* 源组件 - 初始化联动逻辑
|
||||
* @param self 组件实例对象 this
|
||||
* @param isActiveClick 主动触发(非echart类click事件触发)
|
||||
* @param buttonConfig 按钮组组件的配置
|
||||
* 40@remarks
|
||||
* 1、v-chart 需添加 ref="myVChart" 以获取实例
|
||||
* 2、 发消息发过去的对象 待封装配置动态兼容
|
||||
*/
|
||||
export const originWidgetLinkageLogic = function(self, isActiveClick = false, buttonConfig = {}) {
|
||||
// if (self.allComponentLinkage && self.allComponentLinkage.length && self.allComponentLinkage[self.widgetIndex].index !== -1 && self.allComponentLinkage[self.widgetIndex].linkageArr.length) {
|
||||
if (self.optionsSetup.componentLinkage && self.optionsSetup.componentLinkage.length) {
|
||||
if (isActiveClick) { // 主动触发
|
||||
self.allComponentLinkage[self.widgetIndex].linkageArr.forEach(item => {
|
||||
console.log(`bus_${item.originId}_${item.targetId}`, ' -联动逻辑点击-发送消息', buttonConfig)
|
||||
bus.$emit(`bus_${item.originId}_${item.targetId}`, buttonConfig.currentData)
|
||||
})
|
||||
} else { // chart 组件
|
||||
self.$refs.myVChart.chart.on('click', function(params) {
|
||||
self.allComponentLinkage[self.widgetIndex].linkageArr.forEach(item => {
|
||||
console.log(`bus_${item.originId}_${item.targetId}`, ' -联动逻辑点击-发送消息', params)
|
||||
let message = {}
|
||||
const widgetConfigTemp = getOneConfigByCode(self.value.widgetCode)
|
||||
if (widgetConfigTemp && widgetConfigTemp.paramsKey.length) { // 动态加载各组件的参数来封装
|
||||
widgetConfigTemp.paramsKey.forEach(key => {
|
||||
message[key] = params[key]
|
||||
})
|
||||
// 40@remarks 部分组件 传参需要特殊处理下
|
||||
// ……
|
||||
// 40@remarks 专用于测试联动发消息 手动改造消息内容
|
||||
// if (self.value.widgetCode === 'widgetMap2d') {
|
||||
// const nameTemp = ['苹果', '三星', '小米', '华为', 'OPPO', 'VIVO']
|
||||
// // message = {
|
||||
// // name: nameTemp[(params.dataIndex % 6)],
|
||||
// // value: params.value,
|
||||
// // dataIndex: params.dataIndex
|
||||
// // }
|
||||
// // message.name = nameTemp[(+params.value % 6)]
|
||||
// message.name = nameTemp[(parseInt(Math.random() * 6) % 6)]
|
||||
// }
|
||||
// if (self.value.widgetCode === 'widget-piechart') {
|
||||
// message.name = (parseInt(Math.random() * 2) % 2) === 0 ? '深圳市' : '盐田区'
|
||||
// }
|
||||
} else {
|
||||
message = {
|
||||
name: params.name,
|
||||
value: params.value
|
||||
}
|
||||
}
|
||||
bus.$emit(`bus_${item.originId}_${item.targetId}`, message)
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 目标组件 - 初始化联动逻辑
|
||||
* @param self 组件实例对象 this
|
||||
* @returns
|
||||
*/
|
||||
export const targetWidgetLinkageLogic = function(self) {
|
||||
const busEvents = []
|
||||
// 有无有关联的组件
|
||||
if (!self.allComponentLinkage || !self.allComponentLinkage.length) return
|
||||
self.allComponentLinkage.some(item => {
|
||||
if (item.index !== -1 && item.linkageArr.length) {
|
||||
item.linkageArr.some(obj => {
|
||||
if (obj.targetId === self.value.setup.widgetId) {
|
||||
self.hasLinkage = true
|
||||
busEvents.push({
|
||||
eventName: `bus_${obj.originId}_${obj.targetId}`,
|
||||
paramsConfig: obj.paramsConfig
|
||||
})
|
||||
return true
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
if (self.hasLinkage) {
|
||||
busEvents.forEach(item => {
|
||||
bus.$on(item.eventName, e => {
|
||||
console.log(item.eventName, ' 接收消息e', e)
|
||||
self.setOptionsData(e, item.paramsConfig)
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue