仪表盘更新

report-ui/src/mixins/queryform.js

@@ -122,9 +122,7 @@ export default {
         chartType == "widget-funnel"
       ) {
         return this.piechartFn(params.chartProperties, data);
-      } else if (chartType == "widget-gauge") {
+      }  else if (chartType == "widget-text") {
-        return this.gaugeFn(params.chartProperties, data);
-      } else if (chartType == "widget-text") {
         return this.widgettext(params.chartProperties, data)
       } else if (chartType == "widget-stackchart") {
         return this.stackChartFn(params.chartProperties, data)
@@ -210,7 +208,7 @@ export default {
       }
       return ananysicData;
     },
-    gaugeFn(chartProperties, data) {
+    /*gaugeFn(chartProperties, data) {
       const ananysicData = [];
       for (let i = 0; i < data.length; i++) {
         const obj = {};
@@ -228,7 +226,7 @@ export default {
         ananysicData.push(obj);
       }
       return ananysicData[0];
-    },
+    },*/
     widgettext(chartProperties, data) {
       const ananysicData = [];
       for (let i = 0; i < data.length; i++) {

report-ui/src/views/report/bigscreen/designer/tools/componentsJSON/widget-gauge.js

@@ -201,7 +201,7 @@ export const widgetGauge = {
               name: 'splitLength',
               require: false,
               placeholder: '',
-              value: 20,
+              value: 14,
             },
             {
               type: 'el-input-number',
@@ -267,7 +267,7 @@ export const widgetGauge = {
               name: 'labelFontSize',
               require: false,
               placeholder: '',
-              value: 10,
+              value: 14,
             },
             {
               type: 'el-select',
@@ -333,7 +333,7 @@ export const widgetGauge = {
         required: false,
         placeholder: 'px',
         relactiveDom: 'dataType',
-        chartType: 'widget-piechart',
+        chartType: 'widget-text',
         dictKey: 'TEXT_PROPERTIES',
         relactiveDomValue: 'dynamicData',
         value: '',

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

@@ -161,20 +161,93 @@ export default {
   },
   methods: {
     editorOptions() {
-      // this.setOptions()
+      this.setOptions()
-      // this.setOptionsData()
+      this.setOptionsData()
     },
     setOptions() {
       const optionsSetup = this.optionsSetup;
       const series = this.options.series;
-      for (const key in series) {
+      if (series[0].type == 'gauge') {
-        if (series[key].type == "gauge") {
+        const axisLine = {
-          series[key].axisLine.lineStyle.width = optionsSetup.tickMarkWeight;
+          show: optionsSetup.ringShow,
-          series[key].axisLabel.show = optionsSetup.showScaleValue;
+          lineStyle: {
-          series[key].axisLabel.fontSize = optionsSetup.scaleFontSize;
+            width: optionsSetup.pieWeight,
-          series[key].axisTick.show = optionsSetup.showTickMarks;
+            color: [
-          series[key].detail.textStyle.fontSize = optionsSetup.targetFontSize;
+              [
+                0.3,
+                new echarts.graphic.LinearGradient(0, 1, 1, 0, [
+                  {
+                    offset: 0,
+                    color: optionsSetup.color30p0,
+                  },
+                  {
+                    offset: 0.5,
+                    color: optionsSetup.color30p5,
+                  },
+                  {
+                    offset: 1,
+                    color: optionsSetup.color30p10,
+                  },
+                ]),
+              ],
+              [
+                0.7,
+                new echarts.graphic.LinearGradient(0, 1, 1, 0, [
+                  {
+                    offset: 0,
+                    color: optionsSetup.color70p0,
+                  },
+                  {
+                    offset: 0.5,
+                    color: optionsSetup.color70p5,
+                  },
+                  {
+                    offset: 1,
+                    color: optionsSetup.color70p10,
+                  },
+                ]),
+              ],
+              [
+                1,
+                new echarts.graphic.LinearGradient(0, 1, 1, 0, [
+                  {
+                    offset: 0,
+                    color: optionsSetup.color100p0,
+                  },
+                  {
+                    offset: 0.5,
+                    color: optionsSetup.color100p5,
+                  },
+                  {
+                    offset: 1,
+                    color: optionsSetup.color100p10,
+                  },
+                ]),
+              ],
+            ],
+          },
+        }
+        const axisTick = {
+          show: optionsSetup.tickShow,
+          distance: optionsSetup.tickDistance,
+          length: optionsSetup.tickLength,
+          lineStyle: {
+            color: 'auto',
+            width: optionsSetup.tickWidth,
+          },
+        }
+        const splitLine = {
+          show: optionsSetup.splitShow,
+          distance: optionsSetup.splitDistance,
+          length: optionsSetup.splitLength,
+          lineStyle: {
+            color: 'auto',
+            width: optionsSetup.splitWidth,
+          },
         }
+        series[0].axisLine = axisLine
+        series[0].axisTick = axisTick
+        series[0].splitLine = splitLine
       }
     },
     setOptionsData() {
@@ -184,12 +257,22 @@ export default {
         : this.dynamicDataFn(optionsData.dynamicData, optionsData.refreshTime);
     },
     staticDataFn(val) {
-      //const staticData = typeof val == "string" ? JSON.parse(val) : val;
+      const optionsSetup = this.optionsSetup;
       const series = this.options.series;
-      for (const key in series) {
+      const data = [
-        //series[key].detail.formatter = `{value}${val.unit}`;
+        {
-        series[key].data = val
+          value: val
+        }
+      ]
+      const detail = {
+        valueAnimation: true,
+        formatter: '{value} %',
+        color: optionsSetup.labelColor,
+        fontSize: optionsSetup.labelFontSize,
+        fontWeight: optionsSetup.labelFontWeight,
       }
+      series[0].data = data
+      series[0].detail = detail
     },
     dynamicDataFn(val, refreshTime) {
       if (!val) return;
@@ -209,14 +292,22 @@ export default {
       });
     },
     renderingFn(val) {
+      const optionsSetup = this.optionsSetup;
       const series = this.options.series;
-      for (const key in series) {
+      const data = [
-        series[key].detail.formatter = `{value}${val.unit}`;
+        {
-        series[key].data[0] = {
+          value: val[0].value
-          value: val.value,
+        }
-          name: val.name || ""
+      ]
-        };
+      const detail = {
+        valueAnimation: true,
+        formatter: '{value} %',
+        color: optionsSetup.labelColor,
+        fontSize: optionsSetup.labelFontSize,
+        fontWeight: optionsSetup.labelFontWeight,
       }
+      series[0].data = data
+      series[0].detail = detail
     }
   }
 };