Merge branch 'master' of https://gitee.com/anji-plus/report

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
@@ -123,13 +123,15 @@
               <!--                :options="optionsJavascript"-->
               <!--                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

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

@@ -585,14 +585,14 @@ export default {
     widgetValueChanged(key, val) {
       if (this.screenCode == "screen") {
         this.dashboard = this.deepClone(val);
-      }
+      } else {
-
         for (let i = 0; i < this.widgets.length; i++) {
           if (this.widgetIndex == i) {
             this.widgets[i].value[key] = this.deepClone(val);
             this.setDefaultValue(this.widgets[i].options[key], val);
           }
         }
+      }
     },
     rightClick(event, index) {
       this.rightClickIndex = index;

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>
 
@@ -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;
@@ -289,12 +288,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) {
@@ -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 = [];

report-ui/src/views/report/resultset/index.vue

@@ -428,6 +428,8 @@
 import { queryAllDataSourceSet, verificationSet, testTransformSet, dataSetPreview, addDataSet, editDataSet, deleteDataSet, dataSetPageList } from '@/api/report'
 import Dictionary from '@/components/Dictionary/index'
 import { codemirror } from 'vue-codemirror' // 引入codeMirror全局实例
+import 'codemirror/mode/sql/sql.js'
+import 'codemirror/mode/javascript/javascript.js'
 import 'codemirror/lib/codemirror.css' // 核心样式
 import 'codemirror/theme/cobalt.css' // 引入主题后还需要在 options 中指定主题才会生效
 import vueJsonEditor from 'vue-json-editor'
@@ -467,7 +469,6 @@ export default {
         lineNumbers: true, // 显示行号
         line: true,
         styleActiveLine: true, // 高亮选中行
-
         hintOptions: {
           completeSingle: true, // 当匹配只有一项的时候是否自动补全
         },