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