更新

report-ui/src/mixins/queryform.js

@@ -1,6 +1,5 @@
 import miment from 'miment'
-import {getData} from '@/api/bigscreen'
-
+import { getData } from '@/api/bigscreen'
 export default {
   data() {
     return {
@@ -59,6 +58,7 @@ export default {
   },
   computed: {},
   created() {
+
   },
   mounted() {
   },
@@ -96,7 +96,7 @@ export default {
     // 查询echarts 数据
     queryEchartsData(params) {
       return new Promise(async (resolve) => {
-        const {code, data} = await getData(params);
+        const { code, data } = await getData(params);
         if (code != 200) return
         const analysisData = this.analysisChartsData(params, data);
         resolve(analysisData)
@@ -277,7 +277,7 @@ export default {
       // 字段名
       const radarField = [];
       let nameField;
-      for(const key in chartProperties) {
+      for (const key in chartProperties) {
         if (chartProperties[key] == 'radar') {
           radarField.push(key)
         }

report-ui/src/utils/screen.js

@@ -1,3 +1,5 @@
+import { eventBus } from "@/utils/eventBus";
+
 export function setAssChartData(widgets, options) {
   const selectOptions = options.filter(item => item.uuid).map(item => {
     return {
@@ -15,3 +17,18 @@ export function setAssChartData(widgets, options) {
     })
   })
 }
+
+export function eventBusParams(optionsSetup, optionsData, callback) {
+  eventBus.$on("eventParams", (formParams) => {
+    const uuid = optionsSetup.uuid;
+    if (formParams.assChart.includes(uuid)) {
+      const contextData = optionsData.dynamicData.contextData;
+      for (const key in contextData) {
+        if (formParams.hasOwnProperty(key)) {
+          contextData[key] = formParams[key];
+        }
+      }
+      callback(optionsData.dynamicData, optionsSetup)
+    }
+  });
+}

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

@@ -5,7 +5,7 @@
 </template>
 
 <script>
-import { eventBus } from "@/utils/eventBus";
+import { eventBusParams } from "@/utils/screen";
 export default {
   name: "WidgetBarchart",
   components: {},
@@ -89,20 +89,14 @@ export default {
     this.optionsCollapse = this.value.setup;
     this.optionsSetup = this.value.setup;
     this.editorOptions();
-    eventBus.$on("params", (formParams) => {
-      const optionsSetup = this.optionsSetup;
-      const optionsData = this.optionsData;
-      const uuid = optionsSetup.uuid;
-      if (formParams.assChart.includes(uuid)) {
-        const contextData = optionsData.dynamicData.contextData;
-        for (const key in contextData) {
-          if (formParams.hasOwnProperty(key)) {
-            contextData[key] = formParams[key];
-          }
-        }
-        this.getEchartData(optionsData.dynamicData, optionsSetup);
+
+    eventBusParams(
+      this.optionsSetup,
+      this.optionsData,
+      (dynamicData, optionsSetup) => {
+        this.getEchartData(dynamicData, optionsSetup);
       }
-    });
+    );
   },
   methods: {
     // 修改图标options属性

report-ui/src/views/bigscreenDesigner/designer/widget/barline/widgetBarlinechart.vue

@@ -1,16 +1,17 @@
 <template>
   <div :style="styleObj">
-    <v-chart :options="options" autoresize/>
+    <v-chart :options="options" autoresize />
   </div>
 </template>
 
 <script>
+import { eventBusParams } from "@/utils/screen";
 export default {
   name: "WidgetBarlinechart",
   components: {},
   props: {
     value: Object,
-    ispreview: Boolean
+    ispreview: Boolean,
   },
   data() {
     return {
@@ -20,16 +21,16 @@ export default {
         title: {
           text: "",
           textStyle: {
-            color: "#fff"
-          }
+            color: "#fff",
+          },
         },
         tooltip: {
           trigger: "item",
-          formatter: "{a} <br/>{b} : {c}%"
+          formatter: "{a} <br/>{b} : {c}%",
         },
         legend: {
           textStyle: {
-            color: "#fff"
+            color: "#fff",
           },
         },
         xAxis: [
@@ -39,10 +40,10 @@ export default {
             axisLabel: {
               show: false,
               textStyle: {
-                color: "#fff"
-              }
-            }
-          }
+                color: "#fff",
+              },
+            },
+          },
         ],
         yAxis: [
           {
@@ -54,9 +55,9 @@ export default {
             axisLabel: {
               show: true,
               textStyle: {
-                color: "#fff"
-              }
-            }
+                color: "#fff",
+              },
+            },
           },
           {
             type: "value",
@@ -67,10 +68,10 @@ export default {
             axisLabel: {
               show: true,
               textStyle: {
-                color: "#fff"
-              }
-            }
-          }
+                color: "#fff",
+              },
+            },
+          },
         ],
         series: [
           {
@@ -79,22 +80,22 @@ export default {
             yAxisIndex: 0,
             data: [],
             itemStyle: {
-              barBorderRadius: null
-            }
+              barBorderRadius: null,
+            },
           },
           {
             name: "",
             type: "line",
             yAxisIndex: 1,
             data: [],
-            itemStyle: {}
-          }
-        ]
+            itemStyle: {},
+          },
+        ],
       },
       optionsStyle: {}, // 样式
       optionsData: {}, // 数据
       optionsCollapse: {}, // 图标属性
-      optionsSetup: {}
+      optionsSetup: {},
     };
   },
   computed: {
@@ -105,9 +106,9 @@ export default {
         height: this.optionsStyle.height + "px",
         left: this.optionsStyle.left + "px",
         top: this.optionsStyle.top + "px",
-        background: this.optionsSetup.background
+        background: this.optionsSetup.background,
       };
-    }
+    },
   },
   watch: {
     value: {
@@ -118,8 +119,8 @@ export default {
         this.optionsSetup = val.setup;
         this.editorOptions();
       },
-      deep: true
-    }
+      deep: true,
+    },
   },
   created() {
     this.optionsStyle = this.value.position;
@@ -127,6 +128,14 @@ export default {
     this.optionsCollapse = this.value.collapse;
     this.optionsSetup = this.value.setup;
     this.editorOptions();
+
+    eventBusParams(
+      this.optionsSetup,
+      this.optionsData,
+      (dynamicData, optionsSetup) => {
+        this.getEchartData(dynamicData, optionsSetup);
+      }
+    );
   },
   methods: {
     // 修改图标options属性
@@ -175,7 +184,7 @@ export default {
         name: optionsSetup.nameX,
         nameTextStyle: {
           color: optionsSetup.nameColorX,
-          fontSize: optionsSetup.nameFontSizeX
+          fontSize: optionsSetup.nameFontSizeX,
         },
         // 轴反转
         inverse: optionsSetup.reversalX,
@@ -188,23 +197,23 @@ export default {
           textStyle: {
             // 坐标文字颜色
             color: optionsSetup.colorX,
-            fontSize: optionsSetup.fontSizeX
-          }
+            fontSize: optionsSetup.fontSizeX,
+          },
         },
         axisLine: {
           show: true,
           lineStyle: {
             color: optionsSetup.lineColorX,
             width: optionsSetup.lineWidthX,
-          }
+          },
         },
         splitLine: {
           show: optionsSetup.isShowSplitLineX,
           lineStyle: {
             color: optionsSetup.splitLineColorX,
             width: optionsSetup.splitLineWidthX,
-          }
-        }
+          },
+        },
       };
       this.options.xAxis = xAxis;
     },
@@ -223,7 +232,7 @@ export default {
           // 别名
           nameTextStyle: {
             color: optionsSetup.nameColorYLeft,
-            fontSize: optionsSetup.nameFontSizeYLeft
+            fontSize: optionsSetup.nameFontSizeYLeft,
           },
           axisLabel: {
             show: true,
@@ -232,10 +241,11 @@ export default {
             textStyle: {
               // 坐标文字颜色
               color: optionsSetup.colorYLeft,
-              fontSize: optionsSetup.fontSizeYLeft
-            }
+              fontSize: optionsSetup.fontSizeYLeft,
+            },
           },
-          axisTick: { // 刻度
+          axisTick: {
+            // 刻度
             show: optionsSetup.tickLineYLeft,
           },
           axisLine: {
@@ -243,15 +253,15 @@ export default {
             lineStyle: {
               width: optionsSetup.lineWidthYLeft,
               color: optionsSetup.lineColorYLeft,
-            }
+            },
           },
           splitLine: {
             show: optionsSetup.isShowSplitLineYLeft,
             lineStyle: {
               color: optionsSetup.splitLineColorYLeft,
               width: optionsSetup.splitLineFontWidthYLeft,
-            }
-          }
+            },
+          },
         },
         {
           type: "value",
@@ -264,7 +274,7 @@ export default {
           // 别名
           nameTextStyle: {
             color: optionsSetup.nameColorYRight,
-            fontSize: optionsSetup.nameFontSizeYRight
+            fontSize: optionsSetup.nameFontSizeYRight,
           },
           axisLabel: {
             show: true,
@@ -273,10 +283,11 @@ export default {
             textStyle: {
               // 坐标文字颜色
               color: optionsSetup.colorYRight,
-              fontSize: optionsSetup.fontSizeYRight
-            }
+              fontSize: optionsSetup.fontSizeYRight,
+            },
           },
-          axisTick: { // 刻度
+          axisTick: {
+            // 刻度
             show: optionsSetup.tickLineYRight,
           },
           axisLine: {
@@ -284,16 +295,16 @@ export default {
             lineStyle: {
               width: optionsSetup.lineWidthYRight,
               color: optionsSetup.lineColorYRight,
-            }
+            },
           },
           splitLine: {
             show: optionsSetup.isShowSplitLineYRight,
             lineStyle: {
               color: optionsSetup.splitLineColorYRight,
               width: optionsSetup.splitLineFontWidthYRight,
-            }
-          }
-        }
+            },
+          },
+        },
       ];
       this.options.yAxis = yAxis;
     },
@@ -309,15 +320,15 @@ export default {
           series[key].smooth = optionsSetup.smoothCurve;
           if (optionsSetup.area) {
             series[key].areaStyle = {
-              opacity: optionsSetup.areaThickness / 100
+              opacity: optionsSetup.areaThickness / 100,
             };
           } else {
             series[key].areaStyle = {
-              opacity: 0
+              opacity: 0,
             };
           }
           series[key].lineStyle = {
-            width: optionsSetup.lineWidth
+            width: optionsSetup.lineWidth,
           };
           series[key].itemStyle.borderRadius = optionsSetup.radius;
           series[key].label = {
@@ -326,7 +337,7 @@ export default {
             distance: optionsSetup.distanceLine,
             fontSize: optionsSetup.fontSizeLine,
             color: optionsSetup.subTextColorLine,
-            fontWeight: optionsSetup.fontWeightLine
+            fontWeight: optionsSetup.fontWeightLine,
           };
         }
       }
@@ -344,7 +355,7 @@ export default {
             distance: optionsSetup.distanceBar,
             fontSize: optionsSetup.fontSizeBar,
             color: optionsSetup.subTextColorBar,
-            fontWeight: optionsSetup.fontWeightBar
+            fontWeight: optionsSetup.fontWeightBar,
           };
           series[key].barWidth = optionsSetup.maxWidth;
           series[key].barMinHeight = optionsSetup.minHeight;
@@ -361,8 +372,8 @@ export default {
         show: true,
         textStyle: {
           color: optionsSetup.tipsColor,
-          fontSize: optionsSetup.tipsFontSize
-        }
+          fontSize: optionsSetup.tipsFontSize,
+        },
       };
       this.options.tooltip = tooltip;
     },
@@ -374,7 +385,7 @@ export default {
         right: optionsSetup.marginRight,
         bottom: optionsSetup.marginBottom,
         top: optionsSetup.marginTop,
-        containLabel: true
+        containLabel: true,
       };
       this.options.grid = grid;
     },
@@ -384,32 +395,31 @@ export default {
       legend.show = optionsSetup.isShowLegend;
       legend.left = optionsSetup.lateralPosition;
       legend.top = optionsSetup.longitudinalPosition;
-      legend.bottom =
-        optionsSetup.longitudinalPosition;
+      legend.bottom = optionsSetup.longitudinalPosition;
       legend.orient = optionsSetup.layoutFront;
       legend.textStyle = {
         color: optionsSetup.legendColor,
-        fontSize: optionsSetup.legendFontSize
+        fontSize: optionsSetup.legendFontSize,
       };
       legend.itemWidth = optionsSetup.legendWidth;
     },
     // 图例名称设置
-    setOptionsLegendName(name){
+    setOptionsLegendName(name) {
       const optionsSetup = this.optionsSetup;
       const series = this.options.series;
       const legendName = optionsSetup.legendName;
       // 图例没有手动写则显示原值，写了则显示新值
-      if (null == legendName || legendName == '') {
+      if (null == legendName || legendName == "") {
         for (let i = 0; i < name.length; i++) {
           series[i].name = name[i];
         }
-        this.options.legend['data'] = name;
-      }else {
-        const arr = legendName.split('|');
+        this.options.legend["data"] = name;
+      } else {
+        const arr = legendName.split("|");
         for (let i = 0; i < arr.length; i++) {
           series[i].name = arr[i];
         }
-        this.options.legend['data'] = arr
+        this.options.legend["data"] = arr;
       }
     },
     // 图例颜色修改
@@ -452,9 +462,9 @@ export default {
         }
       }
       const legendName = [];
-      legendName.push('bar');
-      legendName.push('line');
-      this.options.legend['data'] = legendName;
+      legendName.push("bar");
+      legendName.push("line");
+      this.options.legend["data"] = legendName;
       this.setOptionsLegendName(legendName);
     },
     dynamicDataFn(val, refreshTime) {
@@ -470,7 +480,7 @@ export default {
     },
     getEchartData(val) {
       const data = this.queryEchartsData(val);
-      data.then(res => {
+      data.then((res) => {
         this.renderingFn(res);
       });
     },
@@ -487,10 +497,10 @@ export default {
         }
         legendName.push(val.series[i].name);
       }
-      this.options.legend['data'] = legendName;
+      this.options.legend["data"] = legendName;
       this.setOptionsLegendName(legendName);
-    }
-  }
+    },
+  },
 };
 </script>
 

report-ui/src/views/bigscreenDesigner/designer/widget/form/widgetSelect.vue

@@ -65,7 +65,7 @@ export default {
       const params = {};
       params[optionsSetup.field] = event;
       params["assChart"] = optionsSetup.assChart;
-      eventBus.$emit("params", params);
+      eventBus.$emit("eventParams", params);
     },
   },
 };