仪表盘修改

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

@@ -1,162 +1,378 @@
 /*
  * @Descripttion: 仪表盘 json
- * @version: 
+ * @version:
  * @Author: qianlishi
  * @Date: 2021-08-29 07:30:25
  * @LastEditors: qianlishi
  * @LastEditTime: 2021-08-29 07:30:25
  */
 export const widgetGauge = {
-    code: 'widget-gauge',
-    type: 'chart',
-    label: '仪表盘',
-    icon: 'iconyibiaopan',
-    options: {
-      // 配置
-      setup: [
+  code: 'widget-gauge',
+  type: 'chart',
+  label: '仪表盘',
+  icon: 'iconyibiaopan',
+  options: {
+    // 配置
+    setup: [
+      {
+        type: 'el-input-text',
+        label: '图层名称',
+        name: 'layerName',
+        required: false,
+        placeholder: '',
+        value: '仪表盘',
+      },
+      {
+        type: 'vue-color',
+        label: '背景颜色',
+        name: 'background',
+        required: false,
+        placeholder: '',
+        value: ''
+      },
+      [
         {
-          type: 'el-input-text',
-          label: '图层名称',
-          name: 'layerName',
-          required: false,
-          placeholder: '',
-          value: '仪表盘',
-        },
-        {
-          type: 'el-input-number',
-          label: '刻度线粗度',
-          name: 'tickMarkWeight',
-          require: false,
-          placeholder: '',
-          value: 10,
-        },
-        {
-          type: 'el-switch',
-          label: '显示刻度值',
-          name: 'showScaleValue',
-          require: false,
-          placeholder: '',
-          value: true,
-        },
-        {
-          type: 'el-switch',
-          label: '显示刻度线',
-          name: 'showTickMarks',
-          require: false,
-          placeholder: '',
-          value: true,
-        },
-        {
-          type: 'el-input-number',
-          label: '刻度字号',
-          name: 'scaleFontSize',
-          require: false,
-          placeholder: '',
-          value: 16,
-        },
-        {
-          type: 'el-input-number',
-          label: '指标字号',
-          name: 'targetFontSize',
-          require: false,
-          placeholder: '',
-          value: 20,
-        },
-        {
-          type: 'vue-color',
-          label: '背景颜色',
-          name: 'background',
-          required: false,
-          placeholder: '',
-          value: ''
-        },
-      ],
-      // 数据
-      data: [
-        {
-          type: 'el-radio-group',
-          label: '数据类型',
-          name: 'dataType',
-          require: false,
-          placeholder: '',
-          selectValue: true,
-          selectOptions: [
+          name: "圆环设置",
+          list: [
             {
-              code: 'staticData',
-              name: '静态数据',
+              type: 'el-switch',
+              label: '显示',
+              name: 'ringShow',
+              required: false,
+              placeholder: '',
+              value: true,
             },
             {
-              code: 'dynamicData',
-              name: '动态数据',
+              type: 'el-input-number',
+              label: '圆环宽度',
+              name: 'pieWeight',
+              require: false,
+              placeholder: '',
+              value: 10,
             },
-          ],
-          value: 'staticData',
+          ]
         },
         {
-          type: 'el-input-number',
-          label: '刷新时间(毫秒)',
-          name: 'refreshTime',
-          relactiveDom: 'dataType',
-          relactiveDomValue: 'dynamicData',
-          value: 5000
+          name: '0%~30%渐变色',
+          list: [
+            {
+              type: 'vue-color',
+              label: '0处颜色',
+              name: 'color30p0',
+              required: false,
+              placeholder: '',
+              value: 'rgba(0, 237, 3,0.1)'
+            },
+            {
+              type: 'vue-color',
+              label: '0.5处颜色',
+              name: 'color30p5',
+              required: false,
+              placeholder: '',
+              value: 'rgba(0, 237, 3,0.6)'
+            },
+            {
+              type: 'vue-color',
+              label: '1处颜色',
+              name: 'color30p10',
+              required: false,
+              placeholder: '',
+              value: 'rgba(0, 237, 3,1)'
+            },
+          ]
         },
         {
-          type: 'el-button',
-          label: '静态数据',
-          name: 'staticData',
-          required: false,
-          placeholder: 'px',
-          relactiveDom: 'dataType',
-          relactiveDomValue: 'staticData',
-          value: {value: 50, name: "名称", unit: "%"},
+          name: '30%~70%渐变色',
+          list: [
+            {
+              type: 'vue-color',
+              label: '0处颜色',
+              name: 'color70p0',
+              required: false,
+              placeholder: '',
+              value: 'rgba(255, 184, 0,0.1)'
+            },
+            {
+              type: 'vue-color',
+              label: '0.5处颜色',
+              name: 'color70p5',
+              required: false,
+              placeholder: '',
+              value: 'rgba(255, 184, 0,0.6)'
+            },
+            {
+              type: 'vue-color',
+              label: '1处颜色',
+              name: 'color70p10',
+              required: false,
+              placeholder: '',
+              value: 'rgba(255, 184, 0,1)'
+            },
+          ]
         },
         {
-          type: 'dycustComponents',
-          label: '',
-          name: 'dynamicData',
-          required: false,
-          placeholder: 'px',
-          relactiveDom: 'dataType',
-          chartType: 'widget-gauge',
-          dictKey: 'TEXT_PROPERTIES',
-          relactiveDomValue: 'dynamicData',
-          value: '',
+          name: '70%~100%渐变色',
+          list: [
+            {
+              type: 'vue-color',
+              label: '0处颜色',
+              name: 'color100p0',
+              required: false,
+              placeholder: '',
+              value: 'rgba(175, 36, 74,0.1)'
+            },
+            {
+              type: 'vue-color',
+              label: '0.5处颜色',
+              name: 'color100p5',
+              required: false,
+              placeholder: '',
+              value: 'rgba(255, 36, 74,0.6)'
+            },
+            {
+              type: 'vue-color',
+              label: '1处颜色',
+              name: 'color100p10',
+              required: false,
+              placeholder: '',
+              value: 'rgba(255, 36, 74,1)'
+            },
+          ]
         },
-      ],
-      // 坐标
-      position: [
         {
-          type: 'el-input-number',
-          label: '左边距',
-          name: 'left',
-          required: false,
-          placeholder: 'px',
-          value: 0,
+          name: "刻度线",
+          list: [
+            {
+              type: 'el-switch',
+              label: '显示',
+              name: 'tickShow',
+              required: false,
+              placeholder: '',
+              value: true,
+            },
+            {
+              type: 'el-input-number',
+              label: '距离',
+              name: 'tickDistance',
+              require: false,
+              placeholder: '',
+              value: 0,
+            },
+            {
+              type: 'el-input-number',
+              label: '长度',
+              name: 'tickLength',
+              require: false,
+              placeholder: '',
+              value: 10,
+            },
+            {
+              type: 'el-input-number',
+              label: '宽度',
+              name: 'tickWidth',
+              require: false,
+              placeholder: '',
+              value: 2,
+            },
+          ]
         },
         {
-          type: 'el-input-number',
-          label: '上边距',
-          name: 'top',
-          required: false,
-          placeholder: 'px',
-          value: 0,
+          name: "指标线",
+          list: [
+            {
+              type: 'el-switch',
+              label: '显示',
+              name: 'splitShow',
+              required: false,
+              placeholder: '',
+              value: true,
+            },
+            {
+              type: 'el-input-number',
+              label: '距离',
+              name: 'splitDistance',
+              require: false,
+              placeholder: '',
+              value: 0,
+            },
+            {
+              type: 'el-input-number',
+              label: '长度',
+              name: 'splitLength',
+              require: false,
+              placeholder: '',
+              value: 20,
+            },
+            {
+              type: 'el-input-number',
+              label: '宽度',
+              name: 'splitWidth',
+              require: false,
+              placeholder: '',
+              value: 4,
+            },
+          ]
         },
         {
-          type: 'el-input-number',
-          label: '宽度',
-          name: 'width',
-          required: false,
-          placeholder: '该容器在1920px大屏中的宽度',
-          value: 400,
+          name: "指标",
+          list: [
+            {
+              type: 'el-switch',
+              label: '显示',
+              name: 'labelShow',
+              required: false,
+              placeholder: '',
+              value: true,
+            },
+            {
+              type: 'el-input-number',
+              label: '距离',
+              name: 'labelDistance',
+              require: false,
+              placeholder: '',
+              value: 0,
+            },
+            {
+              type: 'el-input-number',
+              label: '字号',
+              name: 'labelFontSize',
+              require: false,
+              placeholder: '',
+              value: 10,
+            },
+            {
+              type: 'vue-color',
+              label: '颜色',
+              name: 'labelColor',
+              required: false,
+              placeholder: '',
+              value: '#fff',
+            },
+          ]
         },
         {
-          type: 'el-input-number',
-          label: '高度',
-          name: 'height',
-          required: false,
-          placeholder: '该容器在1080px大屏中的高度',
-          value: 200,
+          name: "数值",
+          list: [
+            {
+              type: 'vue-color',
+              label: '颜色',
+              name: 'labelColor',
+              required: false,
+              placeholder: '',
+              value: '#fff',
+            },
+            {
+              type: 'el-input-number',
+              label: '字号',
+              name: 'labelFontSize',
+              require: false,
+              placeholder: '',
+              value: 10,
+            },
+            {
+              type: 'el-select',
+              label: '字体粗细',
+              name: 'labelFontWeight',
+              required: false,
+              placeholder: '',
+              selectOptions: [
+                {code: 'normal', name: '正常'},
+                {code: 'bold', name: '粗体'},
+                {code: 'bolder', name: '特粗体'},
+                {code: 'lighter', name: '细体'}
+              ],
+              value: 'normal'
+            },
+          ]
         },
       ],
-    }
+    ],
+    // 数据
+    data: [
+      {
+        type: 'el-radio-group',
+        label: '数据类型',
+        name: 'dataType',
+        require: false,
+        placeholder: '',
+        selectValue: true,
+        selectOptions: [
+          {
+            code: 'staticData',
+            name: '静态数据',
+          },
+          {
+            code: 'dynamicData',
+            name: '动态数据',
+          },
+        ],
+        value: 'staticData',
+      },
+      {
+        type: 'el-input-number',
+        label: '刷新时间(毫秒)',
+        name: 'refreshTime',
+        relactiveDom: 'dataType',
+        relactiveDomValue: 'dynamicData',
+        value: 5000
+      },
+      {
+        type: 'el-button',
+        label: '静态数据',
+        name: 'staticData',
+        required: false,
+        placeholder: 'px',
+        relactiveDom: 'dataType',
+        relactiveDomValue: 'staticData',
+        value: 50,
+      },
+      {
+        type: 'dycustComponents',
+        label: '',
+        name: 'dynamicData',
+        required: false,
+        placeholder: 'px',
+        relactiveDom: 'dataType',
+        chartType: 'widget-piechart',
+        dictKey: 'TEXT_PROPERTIES',
+        relactiveDomValue: 'dynamicData',
+        value: '',
+      },
+    ],
+    // 坐标
+    position: [
+      {
+        type: 'el-input-number',
+        label: '左边距',
+        name: 'left',
+        required: false,
+        placeholder: 'px',
+        value: 0,
+      },
+      {
+        type: 'el-input-number',
+        label: '上边距',
+        name: 'top',
+        required: false,
+        placeholder: 'px',
+        value: 0,
+      },
+      {
+        type: 'el-input-number',
+        label: '宽度',
+        name: 'width',
+        required: false,
+        placeholder: '该容器在1920px大屏中的宽度',
+        value: 400,
+      },
+      {
+        type: 'el-input-number',
+        label: '高度',
+        name: 'height',
+        required: false,
+        placeholder: '该容器在1080px大屏中的高度',
+        value: 200,
+      },
+    ],
   }
+}

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

@@ -1,10 +1,12 @@
 <template>
   <div :style="styleObj">
-    <v-chart :options="options" autoresize />
+    <v-chart :options="options" autoresize/>
   </div>
 </template>
 
 <script>
+import echarts from "echarts";
+
 export default {
   name: "WidgetGauge",
   components: {},
@@ -17,35 +19,108 @@ export default {
       options: {
         series: [
           {
-            name: "Pressure",
-            type: "gauge",
-            detail: {
-              formatter: "{value}",
-              textStyle: {
-                fontSize: 12
-              }
-            },
+            type: 'gauge',
+            z: 100,
             axisLine: {
+              lineStyle: {
+                width: 10,
+                color: [
+                  [
+                    0.3,
+                    new echarts.graphic.LinearGradient(0, 1, 1, 0, [
+                      {
+                        offset: 0,
+                        color: 'rgba(0, 237, 3,0.1)',
+                      },
+                      {
+                        offset: 0.5,
+                        color: 'rgba(0, 237, 3,0.6)',
+                      },
+                      {
+                        offset: 1,
+                        color: 'rgba(0, 237, 3,1)',
+                      },
+                    ]),
+                  ],
+                  [
+                    0.7,
+                    new echarts.graphic.LinearGradient(0, 1, 1, 0, [
+                      {
+                        offset: 0,
+                        color: 'rgba(255, 184, 0,0.1)',
+                      },
+                      {
+                        offset: 0.5,
+                        color: 'rgba(255, 184, 0,0.6)',
+                      },
+                      {
+                        offset: 1,
+                        color: 'rgba(255, 184, 0,1)',
+                      },
+                    ]),
+                  ],
+                  [
+                    1,
+                    new echarts.graphic.LinearGradient(0, 1, 1, 0, [
+                      {
+                        offset: 0,
+                        color: 'rgba(175, 36, 74,0.1)',
+                      },
+                      {
+                        offset: 0.5,
+                        color: 'rgba(255, 36, 74,0.6)',
+                      },
+                      {
+                        offset: 1,
+                        color: 'rgba(255, 36, 74,1)',
+                      },
+                    ]),
+                  ],
+                ],
+              },
+            },
+            pointer: {
+              itemStyle: {
+                color: 'auto',
+              },
+            },
+            axisTick: {
               show: true,
+              distance: 0,
+              length: 10,
               lineStyle: {
-                width: 10
-              }
+                color: 'auto',
+                width: 2,
+              },
+            },
+            splitLine: {
+              show: true,
+              distance: 0,
+              length: 14,
+              lineStyle: {
+                color: 'auto',
+                width: 4,
+              },
             },
             axisLabel: {
               show: true,
-              fontSize: 12
+              color: 'white',
+              distance: 2,
+              fontSize: 10,
             },
-            axisTick: {
-              show: true
+            detail: {
+              valueAnimation: true,
+              formatter: '{value} %',
+              color: 'white',
+              fontSize: 18,
             },
             data: [
               {
-                value: 50,
-                name: ""
-              }
-            ]
-          }
-        ]
+                value: 70,
+              },
+            ],
+          },
+        ],
       },
       optionsStyle: {}, // 样式
       optionsData: {}, // 数据
@@ -72,8 +147,7 @@ export default {
         this.optionsData = val.data; // 数据
         this.optionsCollapse = val.collapse; // 折叠数据
         this.optionsSetup = val.setup; // 样式
-        this.setOptions();
-        this.setOptionsData();
+        this.editorOptions();
       },
       deep: true
     }
@@ -83,10 +157,13 @@ export default {
     this.optionsData = this.value.data;
     this.optionsCollapse = this.value.collapse;
     this.optionsSetup = this.value.setup;
-    this.setOptions();
-    this.setOptionsData();
+    this.editorOptions();
   },
   methods: {
+    editorOptions() {
+      // this.setOptions()
+      // this.setOptionsData()
+    },
     setOptions() {
       const optionsSetup = this.optionsSetup;
       const series = this.options.series;
@@ -107,14 +184,11 @@ export default {
         : this.dynamicDataFn(optionsData.dynamicData, optionsData.refreshTime);
     },
     staticDataFn(val) {
-      const staticData = typeof val == "string" ? JSON.parse(val) : val;
+      //const staticData = typeof val == "string" ? JSON.parse(val) : val;
       const series = this.options.series;
       for (const key in series) {
-        series[key].detail.formatter = `{value}${staticData.unit}`;
-        series[key].data[0] = {
-          value: staticData.value,
-          name: staticData.name
-        };
+        //series[key].detail.formatter = `{value}${val.unit}`;
+        series[key].data = val
       }
     },
     dynamicDataFn(val, refreshTime) {