渐变色柱图联动

report-ui/src/utils/screenMixins.js

@@ -185,6 +185,7 @@ const mixin = {
       };
       screenData.widgets.forEach((widget) => {
         widget.value.setup.widgetId = widget.value.widgetId;
+        widget.value.setup.widgetCode = widget.type
       });
       const { code, data } = await insertDashboard(screenData);
       if (code == "200") return this.$message.success("保存成功！");
@@ -332,4 +333,4 @@ const mixin = {
   }
 }
 
-export default mixin
+export default mixin

report-ui/src/views/bigscreenDesigner/designer/index.vue

@@ -508,7 +508,6 @@ export default {
       this.currentWidgetTotal = this.widgets.length; // 当前操作面板上有多少各组件
     },
     dragEnd() {
-      this.dragWidgetCode = "";
       /**
        * 40@remarks 新增组件到操作面板后，右边的配置有更新，但是当前选中的组件没更新，导致配置错乱的bug;
        * 由于拖动组件拖到非操作面板上是不会添加组件，还需判断是否添加组件到操作面板上;
@@ -524,6 +523,7 @@ export default {
           const uuid = Number(Math.random().toString().substr(2)).toString(36);
           this.widgets[this.currentWidgetTotal].value.widgetId = uuid;
           this.layerWidget[this.currentWidgetTotal].widgetId = uuid;
+          this.widgets[this.currentWidgetTotal].value.widgetCode = this.dragWidgetCode;
           const index = this.widgets.length - 1;
           this.layerClick(index); // 选中当前新增的组件
           this.grade = false; // 去除网格线

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

@@ -27,6 +27,11 @@ export const lickageParamsConfig = [
     code: 'widget-barchart',
     paramsKey: ['name', 'value']
   },
+  {
+    name: '柱图-渐变色',
+    code: 'widget-gradient-color-barchart',
+    paramsKey: ['name', 'value']
+  },
   // ……
   {
     name: '折线图',
@@ -70,6 +75,7 @@ export const originWidgetLinkageLogic = function (self, isActiveClick = false, b
       self.$refs.myVChart.chart.on('click', function (params) {
         self.allComponentLinkage[self.widgetIndex].linkageArr.forEach(item => {
           console.log(`bus_${item.originId}_${item.targetId}`, ' -联动逻辑点击-发送消息', params)
+          console.log(self.value)
           let message = {}
           const widgetConfigTemp = getOneConfigByCode(self.value.widgetCode)
           console.log('widgetConfigTemp', widgetConfigTemp)

report-ui/src/views/bigscreenDesigner/designer/tools/configure/barCharts/widget-gradient-barchart.js

@@ -558,6 +558,18 @@ export const widgetGradientBarchart = {
             },
           ],
         },
+        {
+          name: '组件联动',
+          list: [
+            {
+              type: 'componentLinkage',
+              label: '',
+              name: 'componentLinkage',
+              required: false,
+              value: []
+            }
+          ]
+        }
       ],
     ],
     // 数据

report-ui/src/views/bigscreenDesigner/designer/widget/bar/widgetGradientColorBarchart.vue

@@ -1,10 +1,14 @@
 <template>
   <div :style="styleObj">
-    <v-chart :options="options" autoresize />
+    <v-chart ref="myVChart"  :options="options" autoresize />
   </div>
 </template>
 
 <script>
+import {
+  originWidgetLinkageLogic,
+  targetWidgetLinkageLogic,
+} from "@/views/bigscreenDesigner/designer/linkageLogic";
 import echarts from "echarts";
 export default {
   name: "WidgetGradientColorBarchart", //渐变色，参考https://www.makeapie.com/editor.html?c=x0oZWoncE
@@ -12,6 +16,10 @@ export default {
   props: {
     value: Object,
     ispreview: Boolean,
+    widgetIndex: {
+      type: Number,
+      default: 0,
+    }, // 当前组件，在工作区变量widgetInWorkbench中的索引
   },
   data() {
     return {
@@ -130,6 +138,7 @@ export default {
       optionsStyle: {}, // 样式
       optionsData: {}, // 数据
       optionsSetup: {},
+      flagInter: null,
     };
   },
   computed: {
@@ -143,6 +152,9 @@ export default {
         background: this.optionsSetup.background,
       };
     },
+    allComponentLinkage() {
+      return this.$store.state.designer.allComponentLinkage;
+    },
   },
   watch: {
     value: {
@@ -162,6 +174,8 @@ export default {
     this.optionsCollapse = this.value.setup;
     this.optionsSetup = this.value.setup;
     this.editorOptions();
+    targetWidgetLinkageLogic(this); // 联动-目标组件逻辑
+    originWidgetLinkageLogic(this); // 联动-源组件逻辑
   },
   methods: {
     // 修改图标options属性
@@ -379,16 +393,29 @@ export default {
       itemStyle["normal"] = normal;
     },
     // 数据解析
-    setOptionsData() {
+    setOptionsData(e, paramsConfig) {
       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) => {
+          if (keyArr.includes(conf.targetKey)) {
+            myDynamicData.contextData[conf.targetKey] = e[conf.originKey];
+          }
+        });
+      }
+      // 联动接收者逻辑结束
       optionsData.dataType == "staticData"
         ? this.staticDataFn(optionsData.staticData)
-        : this.dynamicDataFn(
-            optionsData.dynamicData,
-            optionsData.refreshTime,
-            optionsSetup
-          );
+        : this.dynamicDataFn(optionsData.refreshTime);
     },
     // 静态数据
     staticDataFn(val) {
@@ -417,7 +444,10 @@ export default {
       }
     },
     // 动态数据
-    dynamicDataFn(val, refreshTime, optionsSetup) {
+    dynamicDataFn(refreshTime) {
+      const optionsSetup = this.optionsSetup;
+      const optionsData = this.optionsData;
+      const val = optionsData.dynamicData;
       if (!val) return;
       if (this.ispreview) {
         this.getEchartData(val, optionsSetup);

report-ui/src/views/bigscreenDesigner/viewer/index.vue

@@ -59,6 +59,7 @@ export default {
       };
       data.dashboard.widgets.forEach((item, index) => {
         item.value.widgetId = item.value.setup.widgetId
+        item.value.widgetCode = item.value.setup.widgetCode
         if (item.value.setup.componentLinkage && item.value.setup.componentLinkage.length) {
           this.$store.commit('SET_ALL_COMPONENT_LINKAGE', {
             index,