图表添加刷新时间

report-ui/src/mixins/queryform.js

@@ -1,4 +1,5 @@
 import miment from 'miment'
+import {getData} from '@/api/bigscreen'
 export default {
   data() {
     return {
@@ -52,7 +53,7 @@ export default {
         // disabledDate(time){
         //   return time.getTime() > Date.now() 
         // }
-      }
+      },
     }
   },
   computed: {
@@ -91,6 +92,104 @@ export default {
     },
     handlerInputchange(val){
       this.parseParamsBySelectInput(this.selectInput.keyname, val)
+    },
+    // 查询echarts 数据
+    queryEchartsData(params) {
+      return new Promise(async(resolve) => {
+        const { code, data } = await getData(params);
+        if(code != 200) return
+        const analysisData = this.analysisChartsData(params,  data);
+        resolve(analysisData)
+      })
+    },
+    // 解析不同图标的数据
+    analysisChartsData(params, data) {
+      // widget-barchart 柱线图、widget-linechart 折线图、 widget-barlinechart 柱线图、widget-piechart 饼图、widget-hollow-piechart 空心饼图
+      // widget-funnel 漏斗图  widget-gauge 仪表盘
+      const chartType = params.chartType
+      if (
+        chartType == "widget-barchart" ||
+        chartType == "widget-linechart" ||
+        chartType == "widget-barlinechart"
+      ) {
+        return this.barOrLineChartFn(params.chartProperties, data);
+      } else if (
+        chartType == "widget-piechart" ||
+        chartType == "widget-hollow-piechart" ||
+        chartType == "widget-funnel"
+      ) {
+        return this.piechartFn(params.chartProperties, data);
+      } else if (chartType == "widget-gauge") {
+        return this.gaugeFn(params.chartProperties, data);
+      } else {
+      }
+    },
+    // 柱状图、折线图、折柱图
+    barOrLineChartFn(chartProperties, data) {
+      const ananysicData = {};
+      const xAxisList = [];
+      const series = [];
+      for (const key in chartProperties) {
+        const obj = {};
+        const seriesData = [];
+        const value = chartProperties[key];
+        obj["type"] = value;
+        for (let i = 0; i < data.length; i++) {
+          if (value.startsWith("xAxis")) {
+            // 代表为x轴
+            xAxisList[i] = data[i][key];
+          } else {
+            // 其他的均为series展示数据
+            seriesData[i] = data[i][key];
+          }
+        }
+        obj["data"] = seriesData;
+        if (!obj["type"].startsWith("xAxis")) {
+          series.push(obj);
+        }
+      }
+      ananysicData["xAxis"] = xAxisList;
+      ananysicData["series"] = series;
+      // console.log(ananysicData, '结果数据')
+      return ananysicData;
+    },
+    // 饼图或者空心饼图或者漏斗图
+    piechartFn(chartProperties, data) {
+      const ananysicData = [];
+      for (let i = 0; i < data.length; i++) {
+        const obj = {};
+        for (const key in chartProperties) {
+          const value = chartProperties[key];
+          if (value === "name") {
+            obj["name"] = data[i][key];
+          } else {
+            obj["value"] = data[i][key];
+          }
+        }
+        ananysicData.push(obj);
+      }
+      // console.log(ananysicData, '结果数据')
+      return ananysicData;
+    },
+    gaugeFn(chartProperties, data) {
+      const ananysicData = [];
+      for (let i = 0; i < data.length; i++) {
+        const obj = {};
+        for (const key in chartProperties) {
+          const value = chartProperties[key];
+          if (value === "name") {
+            obj["name"] = data[i][key];
+          } else {
+            obj["value"] = data[i][key];
+          }
+        }
+        if (!obj["unit"]) {
+          obj["unit"] = "%";
+        }
+        ananysicData.push(obj);
+      }
+      // console.log(ananysicData, '结果数据')
+      return ananysicData[0];
     }
   },
   watch: {

report-ui/src/views/report/bigscreen/designer/form/dynamicComponents.vue

@@ -43,7 +43,7 @@
   </div>
 </template>
 <script>
-import { queryAllDataSet, detailBysetId, getData } from "@/api/bigscreen";
+import { queryAllDataSet, detailBysetId } from "@/api/bigscreen";
 import Dictionary from "@/components/Dictionary/index";
 
 export default {
@@ -108,105 +108,11 @@ export default {
         chartProperties: this.chartProperties,
         contextData
       };
-      console.log(params);
+      this.$emit("input", params);
-      const { code, data } = await getData(params);
-      const analysisData = this.analysisChartsData(data);
-      console.log(analysisData);
-      this.$emit("input", analysisData);
       this.$emit("change", params);
-      if (code != "200") return;
     },
     selectParams(val, key) {
       this.chartProperties[key] = val;
-    },
-    // 解析不同图标的数据
-    analysisChartsData(data) {
-      // widget-barchart 柱线图、widget-linechart 折线图、 widget-barlinechart 柱线图、widget-piechart 饼图、widget-hollow-piechart 空心饼图
-      // widget-funnel 漏斗图  widget-gauge 仪表盘
-      const chartType = this.chartType;
-      if (
-        chartType == "widget-barchart" ||
-        chartType == "widget-linechart" ||
-        chartType == "widget-barlinechart"
-      ) {
-        return this.barOrLineChartFn(data);
-      } else if (
-        chartType == "widget-piechart" ||
-        chartType == "widget-hollow-piechart" ||
-        chartType == "widget-funnel"
-      ) {
-        return this.piechartFn(data);
-      } else if (chartType == "widget-gauge") {
-        return this.gaugeFn(data);
-      } else {
-      }
-    },
-    // 柱状图、折线图、折柱图
-    barOrLineChartFn(data) {
-      const ananysicData = {};
-      const xAxisList = [];
-      const series = [];
-      for (const key in this.chartProperties) {
-        const obj = {};
-        const seriesData = [];
-        const value = this.chartProperties[key];
-        obj["type"] = value;
-        for (let i = 0; i < data.length; i++) {
-          if (value.startsWith("xAxis")) {
-            // 代表为x轴
-            xAxisList[i] = data[i][key];
-          } else {
-            // 其他的均为series展示数据
-            seriesData[i] = data[i][key];
-          }
-        }
-        obj["data"] = seriesData;
-        if (!obj["type"].startsWith("xAxis")) {
-          series.push(obj);
-        }
-      }
-      ananysicData["xAxis"] = xAxisList;
-      ananysicData["series"] = series;
-      // console.log(ananysicData, '结果数据')
-      return ananysicData;
-    },
-    // 饼图或者空心饼图或者漏斗图
-    piechartFn(data) {
-      const ananysicData = [];
-      for (let i = 0; i < data.length; i++) {
-        const obj = {};
-        for (const key in this.chartProperties) {
-          const value = this.chartProperties[key];
-          if (value === "name") {
-            obj["name"] = data[i][key];
-          } else {
-            obj["value"] = data[i][key];
-          }
-        }
-        ananysicData.push(obj);
-      }
-      // console.log(ananysicData, '结果数据')
-      return ananysicData;
-    },
-    gaugeFn(data) {
-      const ananysicData = [];
-      for (let i = 0; i < data.length; i++) {
-        const obj = {};
-        for (const key in this.chartProperties) {
-          const value = this.chartProperties[key];
-          if (value === "name") {
-            obj["name"] = data[i][key];
-          } else {
-            obj["value"] = data[i][key];
-          }
-        }
-        if (!obj["unit"]) {
-          obj["unit"] = "%";
-        }
-        ananysicData.push(obj);
-      }
-      // console.log(ananysicData, '结果数据')
-      return ananysicData[0];
     }
   }
 };

report-ui/src/views/report/bigscreen/designer/tools.js

@@ -1449,11 +1449,11 @@ const widgetTools = [
         },
         {
           type: 'el-input-number',
-          label: '刷新时间(秒)',
+          label: '刷新时间(毫秒)',
           name: 'refreshTime',
           relactiveDom: 'dataType',
           relactiveDomValue: 'dynamicData',
-          value: 30
+          value: 5000
         },
         {
           type: 'el-button',

report-ui/src/views/report/bigscreen/designer/widget/widgetBarchart.vue

@@ -1,7 +1,6 @@
 <template>
   <div :style="styleObj">
-    <v-chart :options="options"
+    <v-chart :options="options" autoresize />
-             autoresize />
   </div>
 </template>
 
@@ -55,7 +54,8 @@ export default {
       },
       optionsStyle: {}, // 样式
       optionsData: {}, // 数据
-      optionsSetup: {}
+      optionsSetup: {},
+      flagInter: null
     };
   },
   computed: {
@@ -73,7 +73,6 @@ export default {
   watch: {
     value: {
       handler(val) {
-        console.log(val);
         this.optionsStyle = val.position;
         this.optionsData = val.data;
         this.optionsCollapse = val.setup;
@@ -277,12 +276,15 @@ export default {
     // 数据解析
     setOptionsData() {
       const optionsSetup = this.optionsSetup;
-      console.log(optionsSetup);
       const optionsData = this.optionsData; // 数据类型 静态 or 动态
       console.log(optionsData);
       optionsData.dataType == "staticData"
         ? this.staticDataFn(optionsData.staticData, optionsSetup)
-        : this.dynamicDataFn(optionsData.dynamicData, optionsSetup);
+        : this.dynamicDataFn(
+            optionsData.dynamicData,
+            optionsData.refreshTime,
+            optionsSetup
+          );
     },
     // 静态数据
     staticDataFn(val, optionsSetup) {
@@ -308,8 +310,24 @@ export default {
       }
     },
     // 动态数据
-    dynamicDataFn (val, optionsSetup) {
+    dynamicDataFn(val, refreshTime, optionsSetup) {
       if (!val) return;
+      if (this.ispreview) {
+        this.getEchartData(val, optionsSetup);
+        this.flagInter = setInterval(() => {
+          this.getEchartData(val, optionsSetup);
+        }, refreshTime);
+      } else {
+        this.getEchartData(val, optionsSetup);
+      }
+    },
+    getEchartData(val, optionsSetup) {
+      const data = this.queryEchartsData(val);
+      data.then(res => {
+        this.renderingFn(optionsSetup, res);
+      });
+    },
+    renderingFn(optionsSetup, val) {
       // x轴
       if (optionsSetup.verticalShow) {
         this.options.xAxis.data = [];