修改

report-ui/src/views/bigscreenDesigner/designer/linkageLogic.js

@@ -1,8 +1,8 @@
 /*
  * @Author: chengsl
  * @Date: 2023-02-24 09:40:13
- * @LastEditors: chengsl
+ * @LastEditors: qianlishi qianlishi@anji-plus.com
- * @LastEditTime: 2023-02-24 13:12:24
+ * @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

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: [
       {

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: '字体颜色',

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: '字体颜色',

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 { widgetScaleVertical } from "./configure/scaleCharts/widget-scale-vertical";
-import {widgetScaleHorizontal} from "./configure/scaleCharts/widget-scale-horizontal"
+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
 ]

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) // 联动-目标组件逻辑
+    targetWidgetLinkageLogic(this); // 联动-目标组件逻辑
-    originWidgetLinkageLogic(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
+      optionsData.dynamicData = optionsData.dynamicData || {}; // 兼容 dynamicData undefined
-      const myDynamicData = optionsData.dynamicData
+      const myDynamicData = optionsData.dynamicData;
-      clearInterval(this.flagInter) // 不管咋，先干掉上一次的定时任务，避免多跑
+      clearInterval(this.flagInter); // 不管咋，先干掉上一次的定时任务，避免多跑
-      if (e && optionsData.dataType !== 'staticData' && Object.keys(myDynamicData.contextData).length) {
+      if (
-        const keyArr = Object.keys(myDynamicData.contextData)
+        e &&
-        paramsConfig.forEach(conf => {
+        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"

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;

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) {
+    change(event, item) {
-      const optionsSetup = this.optionsSetup;
+      console.log(item);
-      const params = {};
+      originWidgetLinkageLogic(this, true, {
-      params[optionsSetup.field] = event;
+        currentData: item,
-      params["assChart"] = optionsSetup.assChart;
+      }); // 联动-源组件逻辑
-      eventBus.$emit("eventParams", params);
     },
     setOptions() {
       const optionsData = this.optionsData;

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);