修改

2026-02-02 09:27:47 +08:00 · 2023-04-28 13:37:57 +08:00
parent 0a4eb5fa14
commit c6fe59094e
9 changed files with 78 additions and 65 deletions
--- a/report-ui/src/views/bigscreenDesigner/designer/linkageLogic.js
+++ b/report-ui/src/views/bigscreenDesigner/designer/linkageLogic.js
@@ -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) {
 * 1、v-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
--- a/report-ui/src/views/bigscreenDesigner/designer/tools/configure/form/widget-form-time.js
+++ b/report-ui/src/views/bigscreenDesigner/designer/tools/configure/form/widget-form-time.js
@@ -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: [
      {
--- a/report-ui/src/views/bigscreenDesigner/designer/tools/configure/form/widget-input.js
+++ b/report-ui/src/views/bigscreenDesigner/designer/tools/configure/form/widget-input.js
@@ -14,14 +14,6 @@ export const widgetInput = {
        placeholder: '',
        value: '输入框',
      },
-      {
-        type: 'el-input-text',
-        label: '字段属性值',
-        name: 'field',
-        required: false,
-        placeholder: '请输入',
-        value: '',
-      },
      {
        type: 'vue-color',
        label: '字体颜色',
--- a/report-ui/src/views/bigscreenDesigner/designer/tools/configure/form/widget-select.js
+++ b/report-ui/src/views/bigscreenDesigner/designer/tools/configure/form/widget-select.js
@@ -22,14 +22,6 @@ export const widgetSelect = {
        placeholder: '',
        value: '下拉框',
      },
-      {
-        type: 'el-input-text',
-        label: '字段属性值',
-        name: 'field',
-        required: false,
-        placeholder: '请输入',
-        value: '',
-      },
      {
        type: 'vue-color',
        label: '字体颜色',
--- a/report-ui/src/views/bigscreenDesigner/designer/tools/main.js
+++ b/report-ui/src/views/bigscreenDesigner/designer/tools/main.js
@@ -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
 ]
--- a/report-ui/src/views/bigscreenDesigner/designer/widget/bar/widgetBarchart.vue
+++ b/report-ui/src/views/bigscreenDesigner/designer/widget/bar/widgetBarchart.vue
@@ -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"
--- a/report-ui/src/views/bigscreenDesigner/designer/widget/form/widgetFormTime.vue
+++ b/report-ui/src/views/bigscreenDesigner/designer/widget/form/widgetFormTime.vue
@@ -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;
--- a/report-ui/src/views/bigscreenDesigner/designer/widget/form/widgetSelect.vue
+++ b/report-ui/src/views/bigscreenDesigner/designer/widget/form/widgetSelect.vue
@@ -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;
--- a/report-ui/src/views/bigscreenDesigner/designer/widget/line/widgetLinechart.vue
+++ b/report-ui/src/views/bigscreenDesigner/designer/widget/line/widgetLinechart.vue
@@ -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);