feat-下拉框动态解析数据

report-ui/src/mixins/queryform.js

@@ -112,6 +112,7 @@ export default {
       // widget-heatmap 热力图
       // widget-mapline 中国地图-路线图
       // widget-radar 雷达图
+      // widget-select 下拉框
       const chartType = params.chartType
       if (
         chartType == "widget-barchart" ||
@@ -134,13 +135,15 @@ export default {
         return this.linemapChartFn(params.chartProperties, data)
       } else if (chartType == "widget-radar") {
         return this.radarChartFn(params.chartProperties, data)
+      } else if (chartType == "widget-select") {
+        return this.selectChartFn(params.chartProperties, data)
       } else {
         return data
       }
     },
     // 柱状图、折线图、柱线图
     barOrLineChartFn(chartProperties, data) {
-      const ananysicData = {};
+      const analysisData = {};
       const xAxisList = [];
       const series = [];
       for (const key in chartProperties) {
@@ -163,13 +166,13 @@ export default {
           series.push(obj);
         }
       }
-      ananysicData["xAxis"] = xAxisList;
+      analysisData["xAxis"] = xAxisList;
-      ananysicData["series"] = series;
+      analysisData["series"] = series;
-      return ananysicData;
+      return analysisData;
     },
     //堆叠图
     stackChartFn(chartProperties, data) {
-      const ananysicData = {};
+      const analysisData = {};
       const series = [];
       //全部字段字典值
       const types = Object.values(chartProperties)
@@ -196,13 +199,13 @@ export default {
           })
         }
       }
-      ananysicData["xAxis"] = xAxisList;
+      analysisData["xAxis"] = xAxisList;
-      ananysicData["series"] = series;
+      analysisData["series"] = series;
-      return ananysicData;
+      return analysisData;
     },
     // 饼图、漏斗图
     piechartFn(chartProperties, data) {
-      const ananysicData = [];
+      const analysisData = [];
       for (let i = 0; i < data.length; i++) {
         const obj = {};
         for (const key in chartProperties) {
@@ -213,12 +216,12 @@ export default {
             obj["value"] = data[i][key];
           }
         }
-        ananysicData.push(obj);
+        analysisData.push(obj);
       }
-      return ananysicData;
+      return analysisData;
     },
     widgettext(chartProperties, data) {
-      const ananysicData = [];
+      const analysisData = [];
       for (let i = 0; i < data.length; i++) {
         const obj = {};
         for (const key in chartProperties) {
@@ -228,13 +231,13 @@ export default {
             obj["value"] = data[i][key];
           }
         }
-        ananysicData.push(obj);
+        analysisData.push(obj);
       }
-      return ananysicData;
+      return analysisData;
     },
     // 坐标系数据解析
     coordChartFn(chartProperties, data) {
-      const ananysicData = {};
+      const analysisData = {};
       let series = [];
       //全部字段字典值
       const types = Object.values(chartProperties)
@@ -245,17 +248,17 @@ export default {
       //x轴数值去重，y轴去重
       const xAxisList = this.setUnique(data.map(item => item[xAxisField]))
       const yAxisList = this.setUnique(data.map(item => item[yAxisField]))
-      ananysicData["xAxis"] = xAxisList;
+      analysisData["xAxis"] = xAxisList;
-      ananysicData["yAxis"] = yAxisList;
+      analysisData["yAxis"] = yAxisList;
       for (const i in data) {
         series[i] = [data[i][xAxisField], data[i][yAxisField], data[i][dataField]];
       }
-      ananysicData["series"] = series;
+      analysisData["series"] = series;
-      return ananysicData;
+      return analysisData;
     },
     // 中国地图。路线图数据解析，适合source、target、value
     linemapChartFn(chartProperties, data) {
-      const ananysicData = [];
+      const analysisData = [];
       for (let i = 0; i < data.length; i++) {
         const obj = {};
         for (const key in chartProperties) {
@@ -268,12 +271,13 @@ export default {
             obj["value"] = data[i][key];
           }
         }
-        ananysicData.push(obj);
+        analysisData.push(obj);
       }
-      return ananysicData;
+      return analysisData;
     },
+    // 雷达图
     radarChartFn(chartProperties, data) {
-      const ananysicData = {};
+      const analysisData = {};
       // 字段名
       const radarField = [];
       let nameField;
@@ -286,10 +290,37 @@ export default {
         }
       }
       // 拿到数值
-      ananysicData["name"] = nameField;
+      analysisData["name"] = nameField;
-      ananysicData["keys"] = radarField;
+      analysisData["keys"] = radarField;
-      ananysicData["value"] = data;
+      analysisData["value"] = data;
-      return ananysicData;
+      return analysisData;
+    },
+    // 下拉框
+    selectChartFn(chartProperties, data){
+      let valueField;
+      let labelField;
+      for (const key in chartProperties) {
+        if (chartProperties[key] == "value") {
+          valueField = key;
+        }
+        if (chartProperties[key] == "label") {
+          labelField = key;
+        }
+      }
+      if (valueField == null && labelField != null) {
+        valueField = labelField;
+      }
+      if (labelField == null && valueField != null) {
+        labelField = valueField
+      }
+      const analysisData = [];
+      for (let i = 0; i < data.length; i++) {
+        const obj = {};
+        obj["value"] = data[i][valueField];
+        obj["label"] = data[i][labelField];
+        analysisData.push(obj);
+      }
+      return analysisData;
     },
     setUnique(arr) {
       let newArr = [];

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

@@ -90,6 +90,14 @@ export const widgetSelect = {
         ],
         value: 'staticData',
       },
+      {
+        type: 'el-input-number',
+        label: '刷新时间(毫秒)',
+        name: 'refreshTime',
+        relactiveDom: 'dataType',
+        relactiveDomValue: 'dynamicData',
+        value: 5000
+      },
       {
         type: 'el-button',
         label: '静态数据',
@@ -99,11 +107,11 @@ export const widgetSelect = {
         relactiveDom: 'dataType',
         relactiveDomValue: 'staticData',
         value: [
-          { "name": "苹果", "code": 1000 },
+          { "label": "苹果", "value": 1000 },
-          { "name": "三星", "code": 2229 },
+          { "label": "三星", "value": 2229 },
-          { "name": "小米", "code": 3879 },
+          { "label": "小米", "value": 3879 },
-          { "name": "oppo", "code": 2379 },
+          { "label": "oppo", "value": 2379 },
-          { "name": "vivo", "code": 4079 },
+          { "label": "vivo", "value": 4079 },
         ],
       },
       {
@@ -154,4 +162,4 @@ export const widgetSelect = {
       },
     ],
   }
-}
+}

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

@@ -4,13 +4,14 @@
     :style="styleObj"
     v-model="selectValue"
     :localOptions="options"
-    label="name"
+    label="label"
-    option="code"
+    option="value"
     @[eventChange]="change"
   />
 </template>
 <script>
-import { eventBus } from "@/utils/eventBus";
+import {eventBus} from "@/utils/eventBus";
+
 export default {
   name: "WidgetSelect",
   props: {
@@ -23,6 +24,7 @@ export default {
       optionsStyle: {},
       optionsData: {},
       optionsSetup: {},
+      options:{}
     };
   },
   computed: {
@@ -35,10 +37,6 @@ 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";
     },
@@ -46,10 +44,10 @@ export default {
   watch: {
     value: {
       handler(val) {
-        console.log("val", val);
         this.optionsSetup = val.setup;
         this.optionsData = val.data;
         this.optionsStyle = val.position;
+        this.setOptions()
       },
       deep: true,
     },
@@ -58,6 +56,7 @@ export default {
     this.optionsSetup = this.value.setup;
     this.optionsData = this.value.data;
     this.optionsStyle = this.value.position;
+    this.setOptions()
   },
   methods: {
     change(event) {
@@ -67,17 +66,49 @@ export default {
       params["assChart"] = optionsSetup.assChart;
       eventBus.$emit("eventParams", params);
     },
+    setOptions() {
+        const optionsData = this.optionsData;
+        return optionsData.dataType == "staticData"
+          ? this.staticData(optionsData.staticData)
+          : this.dynamicDataFn(optionsData.dynamicData, optionsData.refreshTime);
+    },
+    staticData(data) {
+      this.options = data
+    },
+    //动态数据字典解析
+    dynamicDataFn(val, refreshTime) {
+      if (!val) return;
+      if (this.ispreview) {
+        this.getEchartData(val);
+        this.flagInter = setInterval(() => {
+          this.getEchartData(val);
+        }, refreshTime);
+      } else {
+        this.getEchartData(val);
+      }
+    },
+    getEchartData(val) {
+      const data = this.queryEchartsData(val);
+      data.then((res) => {
+        this.renderingFn(res);
+      });
+    },
+    renderingFn(val) {
+      this.options = val;
+    },
   },
 };
 </script>
 <style lang="scss" scoped>
-/deep/.el-select {
+/deep/ .el-select {
   height: 100%;
+
   .el-input {
     height: 100%;
+
     .el-input__inner {
       height: 100%;
     }
   }
 }
-</style>
+</style>