添加下拉事件

report-ui/src/utils/eventBus.js

@@ -0,0 +1,5 @@
+import Vue from 'vue'
+
+const eventBus = new Vue()
+
+export { eventBus }

report-ui/src/utils/screen.js

@@ -0,0 +1,17 @@
+export function setAssChartData(widgets, options) {
+  const selectOptions = options.filter(item => item.uuid).map(item => {
+    return {
+      code: item.uuid,
+      name: item.label
+    }
+  })
+  widgets.forEach(item => {
+    const setup = item['options']['setup']
+    console.log(setup)
+    setup.forEach(sItem => {
+      if (sItem.name == 'assChart') {
+        sItem['selectOptions'] = selectOptions
+      }
+    })
+  })
+}

report-ui/src/views/bigscreenDesigner/designer/components/dynamicForm.vue

@@ -88,6 +88,7 @@
               size="mini"
               :disabled="item.disabled"
               v-model="formData[item.name]"
+              :multiple="item.multiple"
               clearable
               placeholder="请选择"
               @change="(val) => changed(val, item.name)"
@@ -384,6 +385,8 @@ export default {
     },
     // 无论哪个输入框改变 都需要触发事件 将值回传
     changed(val, key) {
+      console.log(val);
+      console.log(key);
       if (val.extend) {
         this.$set(this.formData, key, val.value);
       } else {

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

@@ -312,6 +312,7 @@ import VueRulerTool from "vue-ruler-tool"; // 大屏设计页面的标尺插件
 import contentMenu from "./components/contentMenu";
 import { getToken } from "@/utils/auth";
 import { Revoke } from "@/utils/revoke"; //处理历史记录 2022-02-22
+import { setAssChartData } from "@/utils/screen.js";
 
 export default {
   name: "Login",
@@ -444,7 +445,6 @@ export default {
   watch: {
     widgets: {
       handler(val) {
-        this.handlerLayerWidget(val);
         //以下部分是记录历史
         this.$nextTick(() => {
           this.revoke.push(this.widgets);
@@ -491,7 +491,7 @@ export default {
       this.widgets = record;
     },
     handlerLayerWidget(val) {
-      console.log(val)
+      console.log(val);
       const layerWidgetArr = [];
       for (let i = 0; i < val.length; i++) {
         const obj = {};
@@ -501,11 +501,14 @@ export default {
           if (el.name == "layerName") {
             obj.label = el.value;
           }
+          if (el.name == "uuid") {
+            obj.uuid = el.value;
+          }
         });
         layerWidgetArr.push(obj);
       }
       this.layerWidget = layerWidgetArr;
-      console.log(this.layerWidget);
+      setAssChartData(this.widgets, this.layerWidget);
     },
     async initEchartData() {
       const reportCode = this.$route.query.reportCode;
@@ -517,6 +520,7 @@ export default {
       this.dashboard = screenData;
       this.bigscreenWidth = this.dashboard.width;
       this.bigscreenHeight = this.dashboard.height;
+      this.handlerLayerWidget(this.widgets);
     },
     handleBigScreen(data) {
       const optionScreen = getToolByCode("screen").options;
@@ -746,6 +750,7 @@ export default {
       this.setOptionsOnClickWidget(this.widgets.length - 1);
 
       console.log("123", this.widgets);
+      this.handlerLayerWidget(this.widgets);
     },
 
     // 对组件默认值处理

report-ui/src/views/bigscreenDesigner/designer/tools/configure/form/widget-select.js

@@ -3,7 +3,7 @@
  * @Author: qianlishi qianlishi@anji-plus.com
  * @Date: 2023-01-09 13:02:59
  * @LastEditors: qianlishi qianlishi@anji-plus.com
- * @LastEditTime: 2023-01-10 09:40:53
+ * @LastEditTime: 2023-01-12 14:39:29
  */
 
 export const widgetSelect = {
@@ -24,11 +24,11 @@ export const widgetSelect = {
       },
       {
         type: 'el-input-text',
-        label: '默认值',
-        name: 'text',
+        label: '字段属性值',
+        name: 'field',
         required: false,
-        placeholder: '',
-        value: '超链接',
+        placeholder: '请输入',
+        value: '',
       },
       {
         type: 'vue-color',
@@ -52,11 +52,8 @@ export const widgetSelect = {
         name: 'assChart',
         required: false,
         placeholder: '',
-        selectOptions: [
-          { code: 'center', name: '居中' },
-          { code: 'left', name: '左对齐' },
-          { code: 'right', name: '右对齐' },
-        ],
+        multiple: true,
+        selectOptions: [],
         value: '',
       },
       {
@@ -102,11 +99,11 @@ export const widgetSelect = {
         relactiveDom: 'dataType',
         relactiveDomValue: 'staticData',
         value: [
-          { "axis": "苹果", "data": 1000 },
-          { "axis": "三星", "data": 2229 },
-          { "axis": "小米", "data": 3879 },
-          { "axis": "oppo", "data": 2379 },
-          { "axis": "vivo", "data": 4079 },
+          { "name": "苹果", "code": 1000 },
+          { "name": "三星", "code": 2229 },
+          { "name": "小米", "code": 3879 },
+          { "name": "oppo", "code": 2379 },
+          { "name": "vivo", "code": 4079 },
         ],
       },
       {
@@ -117,8 +114,8 @@ export const widgetSelect = {
         placeholder: '',
         relactiveDom: 'dataType',
         relactiveDomValue: 'dynamicData',
-        chartType: 'widget-barchart',
-        dictKey: 'BAR_PROPERTIES',
+        chartType: 'widget-select',
+        dictKey: 'SELECT_PROPERTIES',
         value: '',
       },
     ],

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

@@ -1,16 +1,17 @@
 <template>
   <div :style="styleObj">
-    <v-chart :options="options" autoresize/>
+    <v-chart :options="options" autoresize />
   </div>
 </template>
 
 <script>
+import { eventBus } from "@/utils/eventBus";
 export default {
   name: "WidgetBarchart",
   components: {},
   props: {
     value: Object,
-    ispreview: Boolean
+    ispreview: Boolean,
   },
   data() {
     return {
@@ -18,8 +19,8 @@ export default {
         grid: {},
         legend: {
           textStyle: {
-            color: "#fff"
-          }
+            color: "#fff",
+          },
         },
         xAxis: {
           type: "category",
@@ -27,9 +28,9 @@ export default {
           axisLabel: {
             show: true,
             textStyle: {
-              color: "#fff"
-            }
-          }
+              color: "#fff",
+            },
+          },
         },
         yAxis: {
           type: "value",
@@ -37,9 +38,9 @@ export default {
           axisLabel: {
             show: true,
             textStyle: {
-              color: "#fff"
-            }
-          }
+              color: "#fff",
+            },
+          },
         },
         series: [
           {
@@ -47,15 +48,15 @@ export default {
             type: "bar",
             barGap: "0%",
             itemStyle: {
-              borderRadius: null
-            }
-          }
-        ]
+              borderRadius: null,
+            },
+          },
+        ],
       },
       optionsStyle: {}, // 样式
       optionsData: {}, // 数据
       optionsSetup: {},
-      flagInter: null
+      flagInter: null,
     };
   },
   computed: {
@@ -66,9 +67,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: {
@@ -79,8 +80,8 @@ export default {
         this.optionsSetup = val.setup;
         this.editorOptions();
       },
-      deep: true
-    }
+      deep: true,
+    },
   },
   mounted() {
     this.optionsStyle = this.value.position;
@@ -88,6 +89,20 @@ 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);
+      }
+    });
   },
   methods: {
     // 修改图标options属性
@@ -134,7 +149,7 @@ export default {
         name: optionsSetup.nameX,
         nameTextStyle: {
           color: optionsSetup.nameColorX,
-          fontSize: optionsSetup.nameFontSizeX
+          fontSize: optionsSetup.nameFontSizeX,
         },
         // 轴反转
         inverse: optionsSetup.reversalX,
@@ -147,23 +162,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;
     },
@@ -181,7 +196,7 @@ export default {
         name: optionsSetup.textNameY,
         nameTextStyle: {
           color: optionsSetup.nameColorY,
-          fontSize: optionsSetup.nameFontSizeY
+          fontSize: optionsSetup.nameFontSizeY,
         },
         // 轴反转
         inverse: optionsSetup.reversalY,
@@ -192,23 +207,23 @@ export default {
           textStyle: {
             // 坐标文字颜色
             color: optionsSetup.colorY,
-            fontSize: optionsSetup.fontSizeY
-          }
+            fontSize: optionsSetup.fontSizeY,
+          },
         },
         axisLine: {
           show: true,
           lineStyle: {
             color: optionsSetup.lineColorY,
             width: optionsSetup.lineWidthY,
-          }
+          },
         },
         splitLine: {
           show: optionsSetup.isShowSplitLineY,
           lineStyle: {
             color: optionsSetup.splitLineColorY,
             width: optionsSetup.splitLineWidthY,
-          }
-        }
+          },
+        },
       };
       this.options.yAxis = yAxis;
     },
@@ -220,14 +235,14 @@ export default {
         if (optionsSetup.verticalShow) {
           series[0].label = {
             show: optionsSetup.isShow,
-            position: 'right',
+            position: "right",
             distance: optionsSetup.distance,
             textStyle: {
               fontSize: optionsSetup.fontSize,
               color: optionsSetup.subTextColor,
-              fontWeight: optionsSetup.fontWeight
-            }
-          }
+              fontWeight: optionsSetup.fontWeight,
+            },
+          };
         } else {
           series[0].label = {
             show: optionsSetup.isShow,
@@ -235,8 +250,8 @@ export default {
             distance: optionsSetup.distance,
             fontSize: optionsSetup.fontSize,
             color: optionsSetup.subTextColor,
-            fontWeight: optionsSetup.fontWeight
-          }
+            fontWeight: optionsSetup.fontWeight,
+          };
         }
       }
       series[0].barWidth = optionsSetup.maxWidth;
@@ -250,8 +265,8 @@ export default {
         show: true,
         textStyle: {
           color: optionsSetup.tipsColor,
-          fontSize: optionsSetup.tipsFontSize
-        }
+          fontSize: optionsSetup.tipsFontSize,
+        },
       };
       this.options.tooltip = tooltip;
     },
@@ -263,7 +278,7 @@ export default {
         right: optionsSetup.marginRight,
         bottom: optionsSetup.marginBottom,
         top: optionsSetup.marginTop,
-        containLabel: true
+        containLabel: true,
       };
       this.options.grid = grid;
     },
@@ -278,11 +293,11 @@ export default {
       }
       const itemStyle = {
         normal: {
-          color: params => {
+          color: (params) => {
             return arrColor[params.dataIndex];
           },
-          barBorderRadius: optionsSetup.radius
-        }
+          barBorderRadius: optionsSetup.radius,
+        },
       };
       for (const key in this.options.series) {
         if (this.options.series[key].type == "bar") {
@@ -297,11 +312,7 @@ export default {
       const optionsData = this.optionsData; // 数据类型 静态 or 动态
       optionsData.dataType == "staticData"
         ? this.staticDataFn(optionsData.staticData)
-        : this.dynamicDataFn(
-          optionsData.dynamicData,
-          optionsData.refreshTime,
-          optionsSetup
-        );
+        : this.dynamicDataFn(optionsData.refreshTime);
     },
     // 静态数据
     staticDataFn(val) {
@@ -311,7 +322,7 @@ export default {
       let data = [];
       for (const i in val) {
         axis[i] = val[i].axis;
-        data[i] = val[i].data
+        data[i] = val[i].data;
       }
       // x轴
       if (optionsSetup.verticalShow) {
@@ -330,7 +341,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);
@@ -343,7 +357,7 @@ export default {
     },
     getEchartData(val, optionsSetup) {
       const data = this.queryEchartsData(val);
-      data.then(res => {
+      data.then((res) => {
         this.renderingFn(optionsSetup, res);
       });
     },
@@ -367,8 +381,8 @@ export default {
           series[i].data = val.series[i].data;
         }
       }
-    }
-  }
+    },
+  },
 };
 </script>
 

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

@@ -4,11 +4,13 @@
     :style="styleObj"
     v-model="selectValue"
     :localOptions="options"
-    label="text"
-    option="id"
+    label="name"
+    option="code"
+    @[eventChange]="change"
   />
 </template>
 <script>
+import { eventBus } from "@/utils/eventBus";
 export default {
   name: "WidgetSelect",
   props: {
@@ -17,28 +19,6 @@ export default {
   },
   data() {
     return {
-      options: [
-        {
-          id: "选项1",
-          text: "黄金糕",
-        },
-        {
-          id: "选项2",
-          text: "双皮奶",
-        },
-        {
-          id: "选项3",
-          text: "蚵仔煎",
-        },
-        {
-          id: "选项4",
-          text: "龙须面",
-        },
-        {
-          id: "选项5",
-          text: "北京烤鸭",
-        },
-      ],
       selectValue: "",
       optionsStyle: {},
       optionsData: {},
@@ -55,10 +35,18 @@ export default {
         top: this.optionsStyle.top + "px",
       };
     },
+    options() {
+      const data = this.optionsData;
+      return data.dataType == "staticData" ? data.staticData : data.dynamicData;
+    },
+    eventChange() {
+      return this.optionsSetup.event || "change";
+    },
   },
   watch: {
     value: {
       handler(val) {
+        console.log("val", val);
         this.optionsSetup = val.setup;
         this.optionsData = val.data;
         this.optionsStyle = val.position;
@@ -71,7 +59,15 @@ export default {
     this.optionsData = this.value.data;
     this.optionsStyle = this.value.position;
   },
-  methods: {},
+  methods: {
+    change(event) {
+      const optionsSetup = this.optionsSetup;
+      const params = {};
+      params[optionsSetup.field] = event;
+      params["assChart"] = optionsSetup.assChart;
+      eventBus.$emit("params", params);
+    },
+  },
 };
 </script>
 <style lang="scss" scoped>