Browse Source

feat--文本栏文本、滚动文本、表格被联动

qianming 2 years ago
parent
commit
db13276b94

+ 26 - 2
report-ui/src/views/bigscreenDesigner/designer/widget/texts/widgetMarquee.vue

@@ -7,6 +7,8 @@
 </template>
 </template>
 
 
 <script>
 <script>
+import {targetWidgetLinkageLogic} from "@/views/bigscreenDesigner/designer/linkageLogic";
+
 export default {
 export default {
   name: "WidgetMarquee",
   name: "WidgetMarquee",
   components: {},
   components: {},
@@ -16,7 +18,8 @@ export default {
   },
   },
   data() {
   data() {
     return {
     return {
-      options: {}
+      options: {},
+      flagInter: null,
     };
     };
   },
   },
   computed: {
   computed: {
@@ -42,6 +45,9 @@ export default {
         styleColor: this.transStyle.marqueeQuit
         styleColor: this.transStyle.marqueeQuit
       };
       };
     },
     },
+    allComponentLinkage() {
+      return this.$store.state.designer.allComponentLinkage;
+    },
     isBehavior() {
     isBehavior() {
       return this.styleColor.marqueeSet ? "start()" : "stop()";
       return this.styleColor.marqueeSet ? "start()" : "stop()";
     }
     }
@@ -51,6 +57,7 @@ export default {
       handler(val) {
       handler(val) {
         this.options = val;
         this.options = val;
         this.optionsData = val.data;
         this.optionsData = val.data;
+        targetWidgetLinkageLogic(this); // 联动-目标组件逻辑
         this.setOptionsData();
         this.setOptionsData();
       },
       },
       deep: true
       deep: true
@@ -63,8 +70,25 @@ export default {
   },
   },
   methods: {
   methods: {
     // 数据解析
     // 数据解析
-    setOptionsData() {
+    setOptionsData(e, paramsConfig) {
       const optionsData = this.optionsData; // 数据类型 静态 or 动态
       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) => {
+          if (keyArr.includes(conf.targetKey)) {
+            myDynamicData.contextData[conf.targetKey] = e[conf.originKey];
+          }
+        });
+      }
+      // 联动接收者逻辑结束
       if (optionsData.dataType == "dynamicData") {
       if (optionsData.dataType == "dynamicData") {
         this.dynamicDataFn(optionsData.dynamicData, optionsData.refreshTime);
         this.dynamicDataFn(optionsData.dynamicData, optionsData.refreshTime);
       } else {};
       } else {};

+ 29 - 4
report-ui/src/views/bigscreenDesigner/designer/widget/texts/widgetTable.vue

@@ -40,12 +40,15 @@
 <script>
 <script>
 import vue from "vue";
 import vue from "vue";
 import VueSuperSlide from "vue-superslide";
 import VueSuperSlide from "vue-superslide";
+import { targetWidgetLinkageLogic } from "@/views/bigscreenDesigner/designer/linkageLogic";
 
 
 vue.use(VueSuperSlide);
 vue.use(VueSuperSlide);
 export default {
 export default {
+  name: 'widgetTable',
+  components: {},
   props: {
   props: {
     value: Object,
     value: Object,
-    ispreview: Boolean
+    ispreview: Boolean,
   },
   },
   data() {
   data() {
     return {
     return {
@@ -64,7 +67,8 @@ export default {
       list: [],
       list: [],
       optionsSetUp: {},
       optionsSetUp: {},
       optionsPosition: {},
       optionsPosition: {},
-      optionsData: {}
+      optionsData: {},
+      flagInter: null,
     };
     };
   },
   },
   computed: {
   computed: {
@@ -80,6 +84,9 @@ export default {
         background: this.optionsSetUp.tableBgColor
         background: this.optionsSetUp.tableBgColor
       };
       };
     },
     },
+    allComponentLinkage() {
+      return this.$store.state.designer.allComponentLinkage;
+    },
     headerTableStlye() {
     headerTableStlye() {
       const headStyle = this.optionsSetUp;
       const headStyle = this.optionsSetUp;
       return {
       return {
@@ -122,12 +129,13 @@ export default {
     this.optionsPosition = this.value.position;
     this.optionsPosition = this.value.position;
     this.optionsData = this.value.data;
     this.optionsData = this.value.data;
     this.initData();
     this.initData();
+    targetWidgetLinkageLogic(this); // 联动-目标组件逻辑
   },
   },
   methods: {
   methods: {
     initData() {
     initData() {
       this.handlerRollFn();
       this.handlerRollFn();
       this.handlerHead();
       this.handlerHead();
-      this.handlerData();
+      this.setOptionsData();
       this.visConfig();
       this.visConfig();
     },
     },
     visConfig() {
     visConfig() {
@@ -148,8 +156,25 @@ export default {
       const head = this.optionsSetUp.dynamicAddTable;
       const head = this.optionsSetUp.dynamicAddTable;
       this.header = head;
       this.header = head;
     },
     },
-    handlerData() {
+    setOptionsData(e, paramsConfig) {
       const tableData = this.optionsData;
       const tableData = this.optionsData;
+      tableData.dynamicData = tableData.dynamicData || {}; // 兼容 dynamicData undefined
+
+      const myDynamicData = tableData.dynamicData;
+      clearInterval(this.flagInter); // 不管咋,先干掉上一次的定时任务,避免多跑
+      if (
+        e &&
+        tableData.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];
+          }
+        });
+      }
+
       tableData.dataType == "staticData"
       tableData.dataType == "staticData"
         ? this.handlerStaticData(tableData.staticData)
         ? this.handlerStaticData(tableData.staticData)
         : this.handlerDynamicData(tableData.dynamicData, tableData.refreshTime);
         : this.handlerDynamicData(tableData.dynamicData, tableData.refreshTime);

+ 27 - 4
report-ui/src/views/bigscreenDesigner/designer/widget/texts/widgetText.vue

@@ -7,8 +7,9 @@
 <template>
 <template>
   <div class="text" :style="styleColor">{{ styleColor.text }}</div>
   <div class="text" :style="styleColor">{{ styleColor.text }}</div>
 </template>
 </template>
-
 <script>
 <script>
+import {targetWidgetLinkageLogic} from "@/views/bigscreenDesigner/designer/linkageLogic";
+
 export default {
 export default {
   name: "WidgetText",
   name: "WidgetText",
   components: {},
   components: {},
@@ -19,7 +20,8 @@ export default {
   data() {
   data() {
     return {
     return {
       options: {},
       options: {},
-      optionsData: {}
+      optionsData: {},
+      flagInter: null,
     };
     };
   },
   },
   computed: {
   computed: {
@@ -43,7 +45,10 @@ export default {
         right: this.transStyle.right + "px",
         right: this.transStyle.right + "px",
         whiteSpace: this.transStyle.whiteSpace ? "pre-line": "normal"
         whiteSpace: this.transStyle.whiteSpace ? "pre-line": "normal"
       };
       };
-    }
+    },
+    allComponentLinkage() {
+      return this.$store.state.designer.allComponentLinkage;
+    },
   },
   },
   watch: {
   watch: {
     value: {
     value: {
@@ -58,12 +63,30 @@ export default {
   mounted() {
   mounted() {
     this.options = this.value;
     this.options = this.value;
     this.optionsData = this.value.data;
     this.optionsData = this.value.data;
+    targetWidgetLinkageLogic(this); // 联动-目标组件逻辑
     this.setOptionsData();
     this.setOptionsData();
   },
   },
   methods: {
   methods: {
     // 数据解析
     // 数据解析
-    setOptionsData() {
+    setOptionsData(e, paramsConfig) {
       const optionsData = this.optionsData; // 数据类型 静态 or 动态
       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) => {
+          if (keyArr.includes(conf.targetKey)) {
+            myDynamicData.contextData[conf.targetKey] = e[conf.originKey];
+          }
+        });
+      }
+      // 联动接收者逻辑结束
       if (optionsData.dataType == "dynamicData") {
       if (optionsData.dataType == "dynamicData") {
         this.dynamicDataFn(optionsData.dynamicData, optionsData.refreshTime);
         this.dynamicDataFn(optionsData.dynamicData, optionsData.refreshTime);
       } else {};
       } else {};