qianlishi 2 years ago
parent 0a4eb5fa14
commit c6fe59094e

@ -1,8 +1,8 @@
/*
* @Author: chengsl
* @Date: 2023-02-24 09:40:13
* @LastEditors: chengsl
* @LastEditTime: 2023-02-24 13:12:24
* @LastEditors: qianlishi qianlishi@anji-plus.com
* @LastEditTime: 2023-03-24 14:01:08
* @Description: 各联动组件的参数配置 参数paramsKey的值具体封装时再改
*/
import { eventBus as bus } from "@/utils/eventBus";
@ -30,11 +30,11 @@ export const lickageParamsConfig = [
},
]
export const getOneConfigByCode = function(code) {
export const getOneConfigByCode = function (code) {
return lickageParamsConfig.find(item => { return item.code === code })
}
export const getOneConfigByName = function(name) {
export const getOneConfigByName = function (name) {
return lickageParamsConfig.find(item => { return item.name === name })
}
@ -47,20 +47,22 @@ export const getOneConfigByName = function(name) {
* 1v-chart 需添加 ref="myVChart" 以获取实例
* 2 发消息发过去的对象 待封装配置动态兼容
*/
export const originWidgetLinkageLogic = function(self, isActiveClick = false, buttonConfig = {}) {
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(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.$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)
console.log('widgetConfigTemp', widgetConfigTemp)
if (widgetConfigTemp && widgetConfigTemp.paramsKey.length) { // 动态加载各组件的参数来封装
widgetConfigTemp.paramsKey.forEach(key => {
message[key] = params[key]
@ -99,7 +101,7 @@ export const originWidgetLinkageLogic = function(self, isActiveClick = false, bu
* @param self 组件实例对象 this
* @returns
*/
export const targetWidgetLinkageLogic = function(self) {
export const targetWidgetLinkageLogic = function (self) {
const busEvents = []
// 有无有关联的组件
if (!self.allComponentLinkage || !self.allComponentLinkage.length) return

@ -18,14 +18,6 @@ export const widgetFormTime = {
placeholder: '',
value: '时间筛选器',
},
{
type: 'el-input-text',
label: '字段属性值',
name: 'field',
required: false,
placeholder: '请输入',
value: '',
},
{
type: 'vue-color',
label: '字体颜色',
@ -54,7 +46,19 @@ export const widgetFormTime = {
{ code: 'focus', name: 'focus' },
],
value: 'change',
},
[{
name: '组件联动',
list: [
{
type: 'componentLinkage',
label: '',
name: 'componentLinkage',
required: false,
value: []
}
]
}]
],
data: [
{

@ -14,14 +14,6 @@ export const widgetInput = {
placeholder: '',
value: '输入框',
},
{
type: 'el-input-text',
label: '字段属性值',
name: 'field',
required: false,
placeholder: '请输入',
value: '',
},
{
type: 'vue-color',
label: '字体颜色',

@ -22,14 +22,6 @@ export const widgetSelect = {
placeholder: '',
value: '下拉框',
},
{
type: 'el-input-text',
label: '字段属性值',
name: 'field',
required: false,
placeholder: '请输入',
value: '',
},
{
type: 'vue-color',
label: '字体颜色',

@ -4,7 +4,7 @@
* @Author: qianlishi
* @Date: 2021-08-29 07:46:46
* @LastEditors: qianlishi qianlishi@anji-plus.com
* @LastEditTime: 2023-03-06 16:03:17
* @LastEditTime: 2023-04-19 09:22:37
*/
import { widgetText } from "./configure/texts/widget-text"
@ -39,10 +39,10 @@ import { widgetHeatmap } from "./configure/heatmap/widget-heatmap";
import { widgetRadar } from "./configure/radarCharts/widget-radar";
import { widgetBarLineStack } from "./configure/barlineCharts/widget-bar-line-stack";
import { widgetSelect } from "./configure/form/widget-select";
import { widgetInput } from "./configure/form/widget-input";
// import { widgetInput } from "./configure/form/widget-input";
import { widgetFormTime } from "./configure/form/widget-form-time";
import {widgetScaleVertical} from "./configure/scaleCharts/widget-scale-vertical";
import {widgetScaleHorizontal} from "./configure/scaleCharts/widget-scale-horizontal"
import { widgetScaleVertical } from "./configure/scaleCharts/widget-scale-vertical";
import { widgetScaleHorizontal } from "./configure/scaleCharts/widget-scale-horizontal"
export const widgetTool = [
// type=html类型的组件
@ -80,6 +80,6 @@ export const widgetTool = [
widgetScaleVertical,
widgetScaleHorizontal,
widgetSelect,
widgetInput,
// widgetInput,
widgetFormTime
]

@ -5,7 +5,10 @@
</template>
<script>
import { originWidgetLinkageLogic, targetWidgetLinkageLogic } from '@/views/bigscreenDesigner/designer/linkageLogic'
import {
originWidgetLinkageLogic,
targetWidgetLinkageLogic,
} from "@/views/bigscreenDesigner/designer/linkageLogic";
export default {
name: "WidgetBarchart",
components: {},
@ -14,7 +17,7 @@ export default {
ispreview: Boolean,
widgetIndex: {
type: Number,
default: 0
default: 0,
}, // widgetInWorkbench
},
data() {
@ -75,8 +78,8 @@ export default {
};
},
allComponentLinkage() {
return this.$store.state.designer.allComponentLinkage
}
return this.$store.state.designer.allComponentLinkage;
},
},
watch: {
value: {
@ -96,9 +99,8 @@ export default {
this.optionsCollapse = this.value.setup;
this.optionsSetup = this.value.setup;
this.editorOptions();
targetWidgetLinkageLogic(this) // -
originWidgetLinkageLogic(this) // -
targetWidgetLinkageLogic(this); // -
originWidgetLinkageLogic(this); // -
},
methods: {
// options
@ -307,16 +309,20 @@ export default {
const optionsSetup = this.optionsSetup;
const optionsData = this.optionsData; // or
//
optionsData.dynamicData = optionsData.dynamicData || {} // dynamicData undefined
const myDynamicData = optionsData.dynamicData
clearInterval(this.flagInter) //
if (e && optionsData.dataType !== 'staticData' && Object.keys(myDynamicData.contextData).length) {
const keyArr = Object.keys(myDynamicData.contextData)
paramsConfig.forEach(conf => {
optionsData.dynamicData = optionsData.dynamicData || {}; // dynamicData undefined
const myDynamicData = optionsData.dynamicData;
clearInterval(this.flagInter); //
if (
e &&
optionsData.dataType !== "staticData" &&
Object.keys(myDynamicData.contextData).length
) {
const keyArr = Object.keys(myDynamicData.contextData);
paramsConfig.forEach((conf) => {
if (keyArr.includes(conf.targetKey)) {
myDynamicData.contextData[conf.targetKey] = e[conf.originKey]
myDynamicData.contextData[conf.targetKey] = e[conf.originKey];
}
})
});
}
//
optionsData.dataType == "staticData"

@ -2,19 +2,18 @@
* @Author: qianlishi qianlishi@anji-plus.com
* @Date: 2023-03-06 15:38:10
* @LastEditors: qianlishi qianlishi@anji-plus.com
* @LastEditTime: 2023-03-06 16:11:21
* @LastEditTime: 2023-04-20 13:54:57
-->
<template>
<el-date-picker
:style="styleObj"
v-model="timeValue"
value-format="yyyy-MM-dd HH:mm:ss"
type="daterange"
@[eventChange]="change"
/>
</template>
<script>
import { eventBus } from "@/utils/eventBus";
export default {
name: "WidgetSelect",
props: {
@ -64,11 +63,15 @@ export default {
},
methods: {
change(event) {
console.log(event);
const optionsSetup = this.optionsSetup;
const params = {};
params[optionsSetup.field] = event;
params["assChart"] = optionsSetup.assChart;
eventBus.$emit("eventParams", params);
console.log(event);
// console.log(params)
const optionsData = this.optionsData;
console.log(optionsData);
},
setOptions() {
const optionsData = this.optionsData;

@ -6,17 +6,23 @@
:localOptions="options"
label="label"
option="value"
@[eventChange]="change"
@[eventChange]="(val, item) => change(val, item)"
/>
</template>
<script>
import { eventBus } from "@/utils/eventBus";
import {
originWidgetLinkageLogic,
targetWidgetLinkageLogic,
} from "@/views/bigscreenDesigner/designer/linkageLogic";
export default {
name: "WidgetSelect",
props: {
value: Object,
ispreview: Boolean,
widgetIndex: {
type: Number,
default: 0,
},
},
data() {
return {
@ -43,6 +49,9 @@ export default {
eventChange() {
return this.optionsSetup.event || "change";
},
allComponentLinkage() {
return this.$store.state.designer.allComponentLinkage;
},
},
watch: {
value: {
@ -60,14 +69,15 @@ export default {
this.optionsData = this.value.data;
this.optionsStyle = this.value.position;
this.setOptions();
targetWidgetLinkageLogic(this); // -
},
methods: {
change(event) {
const optionsSetup = this.optionsSetup;
const params = {};
params[optionsSetup.field] = event;
params["assChart"] = optionsSetup.assChart;
eventBus.$emit("eventParams", params);
change(event, item) {
console.log(item);
originWidgetLinkageLogic(this, true, {
currentData: item,
}); // -
},
setOptions() {
const optionsData = this.optionsData;

@ -304,6 +304,9 @@ export default {
},
//
setOptionsData(e, paramsConfig) {
console.log("ces", e);
console.log("ces", paramsConfig);
const optionsData = this.optionsData; // or
optionsData.dynamicData = optionsData.dynamicData || {}; // dynamicData undefined
const myDynamicData = optionsData.dynamicData;
@ -320,6 +323,7 @@ export default {
}
});
}
console.log(myDynamicData);
optionsData.dataType == "staticData"
? this.staticDataFn(optionsData.staticData)
: this.dynamicDataFn(optionsData.dynamicData, optionsData.refreshTime);

Loading…
Cancel
Save