Merge remote-tracking branch 'gitee/master' into gitee-master

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

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <el-form label-width="80px" label-position="left">
+    <el-form label-width="100px" label-position="left">
       <el-form-item label="数据集">
         <el-select
           size="mini"
@@ -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/form/dynamicForm.vue

@@ -6,7 +6,7 @@
  !-->
 <template>
   <div class="collapse-input-style">
-    <el-form label-width="80px" label-position="left">
+    <el-form label-width="100px" label-position="left">
       <template v-for="(item, index) in options">
         <div v-if="isShowForm(item, '[object Object]')" :key="index">
           <el-form-item
@@ -117,19 +117,21 @@
               width="50%"
               :before-close="handleClose"
             >
-<!--              <codemirror-->
+              <!--              <codemirror-->
-<!--                v-model.trim="formData[item.name]"-->
+              <!--                v-model.trim="formData[item.name]"-->
-<!--                class="code-mirror"-->
+              <!--                class="code-mirror"-->
-<!--                :options="optionsJavascript"-->
+              <!--                :options="optionsJavascript"-->
-<!--                style="height: 190px"-->
+              <!--                style="height: 190px"-->
-<!--              />-->
+              <!--              />-->
-              <vue-json-editor v-model="formData[item.name]"
+              <vue-json-editor
+                v-model="formData[item.name]"
                 :show-btns="false"
                 :mode="'code'"
                 lang="zh"
                 class="my-editor"
                 @json-change="onJsonChange"
-                               @json-save="onJsonSave" />
+                @json-save="onJsonSave"
+              />
               <span slot="footer" class="dialog-footer">
                 <el-button @click="dialogVisibleStaticData = false"
                   >取 消</el-button
@@ -263,7 +265,7 @@
 
 <script>
 import ColorPicker from "./colorPicker.vue";
-import vueJsonEditor from 'vue-json-editor'
+import vueJsonEditor from "vue-json-editor";
 import "codemirror/lib/codemirror.css"; // 核心样式
 import "codemirror/theme/cobalt.css"; // 引入主题后还需要在 options 中指定主题才会生效
 // language
@@ -344,8 +346,8 @@ export default {
         }
       }
     },
-    onJsonChange (value) { },
+    onJsonChange(value) {},
-    onJsonSave (value) { },
+    onJsonSave(value) {},
     saveData() {
       this.$emit("onChanged", this.formData);
       this.dialogVisibleStaticData = false;

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

@@ -1481,11 +1481,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>
 
@@ -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) {
+      handler(val) {
-        console.log(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",
@@ -162,7 +161,7 @@ export default {
       this.options.xAxis = xAxis;
     },
     // Y轴设置
-    setOptionsY () {
+    setOptionsY() {
       const optionsCollapse = this.optionsSetup;
       const yAxis = {
         type: "value",
@@ -200,7 +199,7 @@ export default {
       this.options.yAxis = yAxis;
     },
     // 数值设定 or 柱体设置
-    setOptionsTop () {
+    setOptionsTop() {
       const optionsCollapse = this.optionsSetup;
       const series = this.options.series;
 
@@ -221,7 +220,7 @@ export default {
       this.options.series = series;
     },
     // tooltip 设置
-    setOptionsTooltip () {
+    setOptionsTooltip() {
       const optionsCollapse = this.optionsSetup;
       const tooltip = {
         trigger: "item",
@@ -234,7 +233,7 @@ export default {
       this.options.tooltip = tooltip;
     },
     // 边距设置
-    setOptionsMargin () {
+    setOptionsMargin() {
       const optionsCollapse = this.optionsSetup;
       const grid = {
         left: optionsCollapse.marginLeft,
@@ -246,7 +245,7 @@ export default {
       this.options.grid = grid;
     },
     // 图例操作 legend
-    setOptionsLegend () {
+    setOptionsLegend() {
       const optionsCollapse = this.optionsSetup;
       const legend = this.options.legend;
       legend.show = optionsCollapse.isShowLegend;
@@ -263,7 +262,7 @@ export default {
       legend.itemWidth = optionsCollapse.lengedWidth;
     },
     // 图例颜色修改
-    setOptionsColor () {
+    setOptionsColor() {
       const optionsCollapse = this.optionsSetup;
       const customColor = optionsCollapse.customColor;
       if (!customColor) return;
@@ -287,17 +286,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) {
@@ -320,8 +322,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 = [];