From 02df70868a0e5552cca6bfa84c83abe9dd9ddb03 Mon Sep 17 00:00:00 2001
From: qianlishi <1432731663@qq.com>
Date: Tue, 29 Jun 2021 14:32:06 +0800
Subject: [PATCH] =?UTF-8?q?=E5=9B=BE=E8=A1=A8=E6=B7=BB=E5=8A=A0=E5=88=B7?=
 =?UTF-8?q?=E6=96=B0=E6=97=B6=E9=97=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 report-ui/src/mixins/queryform.js             | 101 +++++++++++++++++-
 .../designer/form/dynamicComponents.vue       |  98 +----------------
 .../views/report/bigscreen/designer/tools.js  |   4 +-
 .../designer/widget/widgetBarchart.vue        |  62 +++++++----
 4 files changed, 144 insertions(+), 121 deletions(-)

diff --git a/report-ui/src/mixins/queryform.js b/report-ui/src/mixins/queryform.js
index 39e0e97c..5b9052ed 100644
--- a/report-ui/src/mixins/queryform.js
+++ b/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: {
diff --git a/report-ui/src/views/report/bigscreen/designer/form/dynamicComponents.vue b/report-ui/src/views/report/bigscreen/designer/form/dynamicComponents.vue
index af0e78c7..0e06f12d 100644
--- a/report-ui/src/views/report/bigscreen/designer/form/dynamicComponents.vue
+++ b/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);
-      const { code, data } = await getData(params);
-      const analysisData = this.analysisChartsData(data);
-      console.log(analysisData);
-      this.$emit("input", analysisData);
+      this.$emit("input", params);
       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];
     }
   }
 };
diff --git a/report-ui/src/views/report/bigscreen/designer/tools.js b/report-ui/src/views/report/bigscreen/designer/tools.js
index 292d5034..acae3527 100644
--- a/report-ui/src/views/report/bigscreen/designer/tools.js
+++ b/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',
diff --git a/report-ui/src/views/report/bigscreen/designer/widget/widgetBarchart.vue b/report-ui/src/views/report/bigscreen/designer/widget/widgetBarchart.vue
index af25039c..a3ee95ae 100644
--- a/report-ui/src/views/report/bigscreen/designer/widget/widgetBarchart.vue
+++ b/report-ui/src/views/report/bigscreen/designer/widget/widgetBarchart.vue
@@ -1,7 +1,6 @@
 <template>
   <div :style="styleObj">
-    <v-chart :options="options"
-             autoresize />
+    <v-chart :options="options" autoresize />
   </div>
 </template>
 
@@ -13,7 +12,7 @@ export default {
     value: Object,
     ispreview: Boolean
   },
-  data () {
+  data() {
     return {
       options: {
         grid: {},
@@ -55,11 +54,12 @@ export default {
       },
       optionsStyle: {}, // 样式
       optionsData: {}, // 数据
-      optionsSetup: {}
+      optionsSetup: {},
+      flagInter: null
     };
   },
   computed: {
-    styleObj () {
+    styleObj() {
       return {
         position: this.ispreview ? "absolute" : "static",
         width: this.optionsStyle.width + "px",
@@ -72,8 +72,7 @@ export default {
   },
   watch: {
     value: {
-      handler (val) {
-        console.log(val);
+      handler(val) {
         this.optionsStyle = val.position;
         this.optionsData = val.data;
         this.optionsCollapse = val.setup;
@@ -83,7 +82,7 @@ export default {
       deep: true
     }
   },
-  mounted () {
+  mounted() {
     this.optionsStyle = this.value.position;
     this.optionsData = this.value.data;
     this.optionsCollapse = this.value.setup;
@@ -92,7 +91,7 @@ export default {
   },
   methods: {
     // 修改图标options属性
-    editorOptions () {
+    editorOptions() {
       this.setOptionsTitle();
       this.setOptionsX();
       this.setOptionsY();
@@ -104,7 +103,7 @@ export default {
       this.setOptionsData();
     },
     // 标题修改
-    setOptionsTitle () {
+    setOptionsTitle() {
       const optionsCollapse = this.optionsSetup;
       const title = {};
       title.text = optionsCollapse.titleText;
@@ -125,7 +124,7 @@ export default {
       this.options.title = title;
     },
     // X轴设置
-    setOptionsX () {
+    setOptionsX() {
       const optionsCollapse = this.optionsSetup;
       const xAxis = {
         type: "category",
@@ -156,7 +155,7 @@ export default {
       this.options.xAxis = xAxis;
     },
     // Y轴设置
-    setOptionsY () {
+    setOptionsY() {
       const optionsCollapse = this.optionsSetup;
       const yAxis = {
         type: "value",
@@ -188,7 +187,7 @@ export default {
       this.options.yAxis = yAxis;
     },
     // 数值设定 or 柱体设置
-    setOptionsTop () {
+    setOptionsTop() {
       const optionsCollapse = this.optionsSetup;
       const series = this.options.series;
 
@@ -209,7 +208,7 @@ export default {
       this.options.series = series;
     },
     // tooltip 设置
-    setOptionsTooltip () {
+    setOptionsTooltip() {
       const optionsCollapse = this.optionsSetup;
       const tooltip = {
         trigger: "item",
@@ -222,7 +221,7 @@ export default {
       this.options.tooltip = tooltip;
     },
     // 边距设置
-    setOptionsMargin () {
+    setOptionsMargin() {
       const optionsCollapse = this.optionsSetup;
       const grid = {
         left: optionsCollapse.marginLeft,
@@ -234,7 +233,7 @@ export default {
       this.options.grid = grid;
     },
     // 图例操作 legend
-    setOptionsLegend () {
+    setOptionsLegend() {
       const optionsCollapse = this.optionsSetup;
       const legend = this.options.legend;
       legend.show = optionsCollapse.isShowLegend;
@@ -251,7 +250,7 @@ export default {
       legend.itemWidth = optionsCollapse.lengedWidth;
     },
     // 图例颜色修改
-    setOptionsColor () {
+    setOptionsColor() {
       const optionsCollapse = this.optionsSetup;
       const customColor = optionsCollapse.customColor;
       if (!customColor) return;
@@ -275,17 +274,20 @@ export default {
       this.options = Object.assign({}, this.options);
     },
     // 数据解析
-    setOptionsData () {
+    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) {
+    staticDataFn(val, optionsSetup) {
       const staticData = JSON.parse(val);
       // x轴
       if (optionsSetup.verticalShow) {
@@ -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 = [];