推送202210111118

src/App.vue

@@ -1,7 +1,7 @@
 <template>
   <div id="app">
     <header>
-      <heads class="headS" ></heads>
+      <heads class="headS"></heads>
     </header>
     <div class="viewContent">
       <keep-alive>
@@ -38,7 +38,7 @@ export default {
 <style lang='scss' scoped >
 #app {
   .headS {
-    width:100%;
+    width: 100%;
   }
   .viewContent {
     flex: 1;
@@ -46,6 +46,4 @@ export default {
     overflow: hidden;
   }
 }
-
-
 </style>

src/assets/scss/common.scss

@@ -290,11 +290,11 @@ body {
         }
         .leftBtn {
             left: 6.85rem;
-            text-align: left;
+            text-align: center;
         }
         .rightBtn {
             right: -0.225rem;
-            text-align: right;
+            text-align: center;
         }
         .centerContent {
             // border: 1px solid #0198af;

src/components/funnel/index.vue

@@ -13,7 +13,9 @@ export default {
     color: { type: String, default: () => "#468EFD" },
   },
   data() {
-    return {};
+    return {
+      fontSize: 20,
+    };
   },
   watch: {
     dataMap(val) {
@@ -25,138 +27,79 @@ export default {
   },
   methods: {
     getData() {
-      if(document.body.clientWidth >1940){
-        echarts.init(this.$refs.echartD).setOption({
-          backgroundColor: "transparent",
-          color: [
-            "rgba(255,199,6,1)",
-            "rgba(11,255,109,1)",
-            "rgba(10,218,255,1)",
-            "rgba(12,210,0,1)",
-          ],
-          series: [
-            {
-              zlevel: 1,
-              name: "漏斗图",
-              type: "funnel",
-              left: 30,
-              top: 0,
-              bottom: 0,
-              width: "100%",
-              min: 0,
-              max: 120,
-              minSize: "3%",
-              maxSize: "100%",
-              sort: "ascending",
-              gap: 15,
-              label: {
-                show: true,
-                position: "left",
-                // width: "400px",
-                align: "left",
-                textBorderColor: "transparent",
-                formatter: function (params) {
-                  return params.data.reaVal + "%";
-                },
-                // fontSize: 24,
-                fontSize: 100,
-                opacity: 1,
-                fontFamily: '"DS", "DS-B", "DS-BB", "DS-BS"',
-              },
-              labelLine: {
-                show: true,
-                length: 50,
-                lineStyle: {
-                  width: 1,
-                  type: "solid",
-                },
-              },
-              itemStyle: {
-                borderColor: "transparent",
-                borderWidth: 0,
-                opacity: 0.5,
-                shadowColor: "#CCC",
-                // shadowOffsetX: 1,
-                // shadowBlur: 1,
-                // shadowOffsetY: -1,
+      if (document.body.clientWidth < 1920) {
+        this.fontSize = 25;
+      } else if (document.body.clientWidth > 1920) {
+        this.fontSize = 40;
+      }
+
+      echarts.init(this.$refs.echartD).setOption({
+        backgroundColor: "transparent",
+        color: [
+          "rgba(255,199,6,1)",
+          "rgba(11,255,109,1)",
+          "rgba(10,218,255,1)",
+          "rgba(12,210,0,1)",
+        ],
+        series: [
+          {
+            zlevel: 1,
+            name: "漏斗图",
+            type: "funnel",
+            left: 30,
+            top: 0,
+            bottom: 0,
+            width: "100%",
+            min: 0,
+            max: 120,
+            minSize: "3%",
+            maxSize: "100%",
+            sort: "ascending",
+            gap: 15,
+            label: {
+              show: true,
+              position: "left",
+              // width: "400px",
+              align: "left",
+              textBorderColor: "transparent",
+              formatter: function (params) {
+                return params.data.reaVal + "%";
               },
-              emphasis: {
-                label: {
-                  fontSize: 30,
-                },
+              // fontSize: 24,
+              fontSize: this.fontSize,
+              opacity: 1,
+              fontFamily: '"DS", "DS-B", "DS-BB", "DS-BS"',
+            },
+            labelLine: {
+              show: true,
+              length: 50,
+              lineStyle: {
+                width: 1,
+                type: "solid",
               },
-              data:this.dataMap,
             },
-          ],
-        });
-      }else{
-        echarts.init(this.$refs.echartD).setOption({
-          backgroundColor: "transparent",
-          color: [
-            "rgba(255,199,6,1)",
-            "rgba(11,255,109,1)",
-            "rgba(10,218,255,1)",
-            "rgba(12,210,0,1)",
-          ],
-          series: [
-            {
-              zlevel: 1,
-              name: "漏斗图",
-              type: "funnel",
-              left: 30,
-              top: 0,
-              bottom: 0,
-              width: "100%",
-              min: 0,
-              max: 120,
-              minSize: "3%",
-              maxSize: "100%",
-              sort: "ascending",
-              gap: 15,
+            itemStyle: {
+              borderColor: "transparent",
+              borderWidth: 0,
+              opacity: 0.5,
+              shadowColor: "#CCC",
+              // shadowOffsetX: 1,
+              // shadowBlur: 1,
+              // shadowOffsetY: -1,
+            },
+            emphasis: {
               label: {
-                show: true,
-                position: "left",
-                // width: "400px",
-                align: "left",
-                textBorderColor: "transparent",
-                formatter: function (params) {
-                  return params.data.reaVal + "%";
-                },
-                // fontSize: 24,
-                fontSize: 25,
-                opacity: 1,
-                fontFamily: '"DS", "DS-B", "DS-BB", "DS-BS"',
-              },
-              labelLine: {
-                show: true,
-                length: 50,
-                lineStyle: {
-                  width: 1,
-                  type: "solid",
-                },
-              },
-              itemStyle: {
-                borderColor: "transparent",
-                borderWidth: 0,
-                opacity: 0.5,
-                shadowColor: "#CCC",
-                // shadowOffsetX: 1,
-                // shadowBlur: 1,
-                // shadowOffsetY: -1,
+                fontSize: 30,
               },
-              emphasis: {
-                label: {
-                  fontSize: 30,
-                },
-              },
-              data:this.dataMap,
             },
-          ],
-        });
-      }
+            data: this.dataMap,
+          },
+        ],
+      });
     },
     resize() {
       echarts.init(this.$refs.echartD).resize();
+      this.getData();
     },
   },
 };

src/components/gauge/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    ref="echartD"
+    ref="echartD1"
     style="width: 100%; height: 100%; display: flex; justify-content: center"
   ></div>
 </template>
@@ -12,12 +12,13 @@ export default {
     dataMap: { type: Number, default: () => 0 },
     dataNumber: { type: Number, default: () => 0 },
     color: { type: String, default: () => "#468EFD" },
-    size: { type: Number, default: () => 20 },
     tick: { type: Boolean, default: () => true },
-    with: { type: Number, default: () => 20 },
   },
   data() {
-    return {};
+    return {
+      size: 20,
+      with: 20,
+    };
   },
   watch: {
     dataMap(val) {
@@ -32,8 +33,15 @@ export default {
   },
   methods: {
     getData() {
-      console.log(this.dataMap,this.dataNumber,this.tick)
-      echarts.init(this.$refs.echartD).setOption({
+      if (document.body.clientWidth < 1920) {
+        this.size = 20;
+        this.with = 20;
+      } else if (document.body.clientWidth > 1920) {
+        this.size = 25;
+        this.with = 25;
+      }
+
+      echarts.init(this.$refs.echartD1).setOption({
         // backgroundColor: "none",
         grid: {
           // top: 0,
@@ -57,7 +65,7 @@ export default {
                   [this.dataMap, this.color],
                   [1, "#111F42"],
                 ],
-                width: 500,
+                width: 20,
               },
             },
             axisLabel: {
@@ -73,14 +81,16 @@ export default {
               show: false,
             },
             detail: {
-              formatter:  (value) => {
-                return this.dataNumber ? this.dataNumber  :`${(value * 100).toFixed(0)}%`;
+              formatter: (value) => {
+                return this.dataNumber
+                  ? this.dataNumber
+                  : `${(value * 100).toFixed(0)}%`;
               },
               offsetCenter: [0, "0%"],
               textStyle: {
                 fontSize: 20,
                 fontWeight: "700",
-                color:"#000", 
+                color: this.color,
                 // color: "#FFF",
                 fontFamily: '"DS", "DS-B", "DS-BB", "DS-BS"',
               },
@@ -91,9 +101,7 @@ export default {
             pointer: {
               show: false,
             },
-            data: [
-                (this.dataNumber || this.dataMap),
-            ],
+            data: [this.dataNumber || this.dataMap],
           },
           // 刻度
           {
@@ -152,7 +160,8 @@ export default {
       });
     },
     resize() {
-      echarts.init(this.$refs.echartD).resize();
+      echarts.init(this.$refs.echartD1).resize();
+      this.getData();
     },
   },
 };

src/components/gauge/index2.vue

@@ -1,159 +0,0 @@
-<template>
-  <div
-    ref="echartD"
-    style="width: 100%; height: 100%; display: flex; justify-content: center"
-  ></div>
-</template>
-
-<script>
-import * as echarts from "echarts";
-export default {
-  props: {
-    dataMap: { type: Number, default: () => 0 },
-    dataNumber: { type: Number, default: () => 0 },
-    color: { type: String, default: () => "#468EFD" },
-    size: { type: Number, default: () => 20 },
-    tick: { type: Boolean, default: () => true },
-    with: { type: Number, default: () => 20 },
-  },
-  data() {
-    return {};
-  },
-  watch: {
-    dataMap(val) {
-      this.getData(val);
-    },
-    dataNumber(val) {
-      this.getData(val);
-    },
-  },
-  mounted() {
-    this.getData();
-  },
-  methods: {
-    getData() {
-      echarts.init(this.$refs.echartD).setOption({
-        // backgroundColor: "none",
-        grid: {
-          // top: 0,
-          // bottom: 0,
-          // left: 0,
-          // right: 0,
-          // margi
-        },
-        series: [
-          // 进度条
-          {
-            name: "仪表盘",
-            type: "gauge",
-            radius: "90%", // 半径
-            startAngle: 220, //开始角度 左侧角度
-            endAngle: -40, //结束角度 右侧
-            splitNumber: 10,
-            axisLine: {
-              lineStyle: {
-                color: [
-                  [this.dataMap, this.color],
-                  [1, "#111F42"],
-                ],
-                width: this.with,
-              },
-            },
-            axisLabel: {
-              show: false,
-            },
-            axisTick: {
-              show: false,
-            },
-            splitLine: {
-              show: false,
-            },
-            itemStyle: {
-              show: false,
-            },
-            detail: {
-              formatter:  (value) => {
-                return this.dataNumber ? this.dataNumber  + '%' :`${(value * 100).toFixed(0)}%`;
-              },
-              offsetCenter: [0, "0%"],
-              textStyle: {
-                //fontSize: this.size,
-                fontSize: this.size,
-                fontWeight: "700",
-                color:this.color, 
-                // color: "#FFF",
-                fontFamily: '"DS", "DS-B", "DS-BB", "DS-BS"',
-              },
-            },
-            title: {
-              offsetCenter: [0, "10%"],
-            },
-            pointer: {
-              show: false,
-            },
-            data: [
-                (this.dataNumber || this.dataMap),
-            ],
-          },
-          // 刻度
-          {
-            type: "gauge",
-            // center: ["50%", "60%"],
-            name: "仪表盘",
-            radius: "132%", // 半径
-            startAngle: 220, //开始角度 左侧角度
-            endAngle: -40, //结束角度 右侧
-            splitNumber: 5,
-            z: 2,
-            axisTick: {
-              show: this.tick,
-              lineStyle: {
-                color: "#6B9DD7",
-                width: 3,
-              },
-              length: -1,
-            }, //刻度样式
-            splitLine: {
-              show: this.tick,
-              lineStyle: {
-                color: "#6B9DD7",
-                width: 3,
-              },
-              length: -1,
-            }, //分隔线样式
-            axisLabel: {
-              color: "rgba(255,255,255,0)",
-              fontSize: 12,
-            }, //刻度节点文字颜色
-            pointer: {
-              show: false,
-            },
-            axisLine: {
-              show: false,
-            },
-            label: {
-              show: false,
-            },
-            //仪表盘详情，用于显示数据。
-            detail: {
-              show: false,
-              offsetCenter: ["0", "0%"],
-              color: "#A2C7F3",
-              formatter: function (params) {
-                return params;
-              },
-              textStyle: {
-                fontSize: 20,
-                fontFamily: '"DS", "DS-B", "DS-BB", "DS-BS"',
-              },
-            },
-          },
-        ],
-      });
-    },
-    resize() {
-      echarts.init(this.$refs.echartD).resize();
-    },
-  },
-};
-</script>

src/components/gauge/index4.vue

@@ -11,13 +11,14 @@ export default {
   props: {
     dataMap: { type: Number, default: () => 0 },
     dataNumber: { type: Number, default: () => 0 },
-    color: { type: String, default: () => "#468EFD" },
-    size: { type: Number, default: () => 20 },
-    tick: { type: Boolean, default: () => true },
-    with: { type: Number, default: () => 20 },
+    color: { type: String, default: () => "#1AF3FD" },
   },
   data() {
-    return {};
+    return {
+      size: 20,
+      tick: true,
+      with: 10,
+    };
   },
   watch: {
     dataMap(val) {
@@ -32,128 +33,17 @@ export default {
   },
   methods: {
     getData() {
-      console.log(document.body.clientWidth)
-      if(document.body.clientWidth >1940){
-        echarts.init(this.$refs.echartD).setOption({
-        // backgroundColor: "none",
-        grid: {
-          // top: 0,
-          // bottom: 0,
-          // left: 0,
-          // right: 0,
-          // margi
-        },
-        series: [
-          // 进度条
-          {
-            name: "仪表盘",
-            type: "gauge",
-            radius: "90%", // 半径
-            startAngle: 220, //开始角度 左侧角度
-            endAngle: -40, //结束角度 右侧
-            splitNumber: 8,
-            axisLine: {
-              lineStyle: {
-                color: [
-                  [this.dataMap, this.color],
-                  [1, "#111F42"],
-                ],
-                width: 40,
-              },
-            },
-            axisLabel: {
-              show: false,
-            },
-            axisTick: {
-              show: false,
-            },
-            splitLine: {
-              show: false,
-            },
-            itemStyle: {
-              show: false,
-            },
-            detail: {
-              formatter:  (value) => {
-                return this.dataNumber ? this.dataNumber :`${(value * 100).toFixed(0)}%`;
-              },
-              offsetCenter: [0, "0%"],
-              textStyle: {
-                //fontSize: this.size,
-                fontSize: 80,
-                fontWeight: "400",
-                color:this.color, 
-                // color: "#FFF",
-                fontFamily: '"DS", "DS-B", "DS-BB", "DS-BS"',
-              },
-            },
-            title: {
-              offsetCenter: [0, "10%"],
-            },
-            pointer: {
-              show: false,
-            },
-            data: [
-                (this.dataNumber || this.dataMap),
-            ],
-          },
-          // 刻度
-          {
-            type: "gauge",
-            // center: ["50%", "60%"],
-            name: "仪表盘",
-            radius: "60%", // 半径
-            startAngle: 220, //开始角度 左侧角度
-            endAngle: -40, //结束角度 右侧
-            splitNumber: 5,
-            z: 2,
-            axisTick: {
-              show: this.tick,
-              lineStyle: {
-                color: "#6B9DD7",
-                width: 3,
-              },
-              length: -1,
-            }, //刻度样式
-            splitLine: {
-              show: this.tick,
-              lineStyle: {
-                color: "#6B9DD7",
-                width: 3,
-              },
-              length: -1,
-            }, //分隔线样式
-            axisLabel: {
-              color: "rgba(255,255,255,0)",
-              fontSize: 12,
-            }, //刻度节点文字颜色
-            pointer: {
-              show: false,
-            },
-            axisLine: {
-              show: false,
-            },
-            label: {
-              show: false,
-            },
-            //仪表盘详情，用于显示数据。
-            detail: {
-              show: false,
-              offsetCenter: ["0", "0%"],
-              color: "#A2C7F3",
-              formatter: function (params) {
-                return params;
-              },
-              textStyle: {
-                fontSize: 16,
-                fontFamily: '"DS", "DS-B", "DS-BB", "DS-BS"',
-              },
-            },
-          },
-        ],
-      });
-      }else{
-        echarts.init(this.$refs.echartD).setOption({
+      if (document.body.clientWidth < 1920) {
+        this.size = 21;
+        this.with = 10;
+        this.tick = false;
+      } else if (document.body.clientWidth > 1920) {
+        this.size = 28;
+        this.with = 12;
+        this.tick = false;
+      }
+
+      echarts.init(this.$refs.echartD).setOption({
         // backgroundColor: "none",
         grid: {
           // top: 0,
@@ -193,15 +83,17 @@ export default {
               show: false,
             },
             detail: {
-              formatter:  (value) => {
-                return this.dataNumber ? this.dataNumber  :`${(value * 100).toFixed(0)}%`;
+              formatter: (value) => {
+                return this.dataNumber
+                  ? this.dataNumber
+                  : `${(value * 100).toFixed(0)}%`;
               },
               offsetCenter: [0, "0%"],
               textStyle: {
                 //fontSize: this.size,
                 fontSize: this.size,
                 fontWeight: "700",
-                color:this.color, 
+                color: this.color,
                 // color: "#FFF",
                 fontFamily: '"DS", "DS-B", "DS-BB", "DS-BS"',
               },
@@ -212,9 +104,7 @@ export default {
             pointer: {
               show: false,
             },
-            data: [
-                (this.dataNumber || this.dataMap),
-            ],
+            data: [this.dataNumber || this.dataMap],
           },
           // 刻度
           {
@@ -271,11 +161,10 @@ export default {
           },
         ],
       });
-      }
-      
     },
     resize() {
       echarts.init(this.$refs.echartD).resize();
+      this.getData();
     },
   },
 };

src/components/water-gauge/index copy.vue

@@ -1,169 +0,0 @@
-<template>
-  <div
-    ref="echartD"
-    style="width: 100%; height: 100%; display: flex; justify-content: center"
-  ></div>
-</template>
-
-<script>
-import * as echarts from "echarts";
-export default {
-  props: {
-    dataMap: { type: Number, default: () => 0 },
-  },
-  data() {
-    return {};
-  },
-  watch: {
-    dataMap(val) {
-       this.getData(val)
-    },
-  },
-  mounted() {
-    this.getData();
-  },
-  methods: {
-    getData() {
-      echarts.init(this.$refs.echartD).setOption({
-        title: {
-          show: true,
-          text: "水源完好率",
-          left: "center",
-          // right:'auto',
-          bottom: "10%",
-          textStyle: {
-            color: "#FFF",
-            fontSize: 18,
-            align: "center",
-            fontFamily: '"DS", "DS-B", "DS-BB", "DS-BS"',
-          },
-        },
-        series: [
-          {
-            name: "刻度",
-            type: "gauge",
-            radius: "89%",
-            min: 0, //最小刻度
-            max: 100, //最大刻度
-            startAngle: 220, //开始角度 左侧角度
-            endAngle: -40, //结束角度 右侧
-            splitNumber: 10,
-            axisLine: {
-              show: true,
-              lineStyle: {
-                width: 1,
-                color: [[1, "rgba(0,0,0,0)"]],
-              },
-            }, //仪表盘轴线
-            axisLabel: {
-              show: true,
-              color: "#30cfff",
-              fontSize: 16,
-              distance: 5,
-              formatter: function (v) {
-                return v;
-              },
-            }, //刻度标签。
-            axisTick: {
-              show: true,
-              splitNumber: 5,
-              lineStyle: {
-                color: "#3880B3",
-                width: 1,
-                // length:10
-              },
-              length: 10,
-            }, //刻度样式
-            splitLine: {
-              show: true,
-              length: 20,
-              lineStyle: {
-                color: "#3880B3",
-                width: 2,
-              },
-            }, //分隔线样式
-          },
-          {
-            type: "gauge",
-            radius: "90%",
-            // center: ["50%","70%"],
-            splitNumber: 5, //刻度数量
-            startAngle: 220,
-            endAngle: -40,
-            axisLine: {
-              show: true,
-              lineStyle: {
-                width: 20,
-                color: [
-                  [
-                    1,
-                    new echarts.graphic.LinearGradient(0, 0, 1, 0, [
-                      {
-                        offset: 0,
-                        color: "#fcfe92",
-                      },
-                      {
-                        offset: 1,
-                        color: "#4ccb96",
-                      },
-                    ]),
-                  ],
-                ],
-              },
-            },
-            //分隔线样式。
-            splitLine: {
-              show: false,
-            },
-            axisLabel: {
-              show: false,
-            },
-            axisTick: {
-              show: false,
-            },
-            pointer: {
-              show: true,
-              length: "70%",
-              width: "2%",
-            },
-            title: {
-              show: false,
-              offsetCenter: [0, 0], // x, y，单位px
-              textStyle: {
-                fontWeight: "bold",
-                color: "#0ab7ff",
-                fontSize: 30,
-              },
-            },
-            //仪表盘详情，用于显示数据。
-            detail: {
-              show: true,
-              offsetCenter: [0, "70%"],
-              color: "#ffffff",
-              textStyle: {
-                fontSize: 40,
-                color: "#4aca96",
-                fontFamily: '"DS", "DS-B", "DS-BB", "DS-BS"',
-              },
-              formatter: function (v) {
-                return v * 100 + "%";
-              },
-            },
-            data: [
-              {
-                value: this.dataMap,
-              },
-            ],
-          },
-        ],
-      });
-    },
-    resize() {
-      echarts.init(this.$refs.echartD).resize();
-    },
-  },
-};
-</script>
-
-<style scoped>
-</style>

src/components/water-gauge/index.vue

@@ -12,7 +12,10 @@ export default {
     dataMap: { type: Number, default: () => 0 },
   },
   data() {
-    return {};
+    return {
+      titleTextStyleFontSize: 10,
+      seriesDetailTextStyleFontSize: 60,
+    };
   },
   watch: {
     dataMap(val) {
@@ -24,313 +27,15 @@ export default {
   },
   methods: {
     getData() {
-      if(document.body.clientWidth >1940){
-        echarts.init(this.$refs.echartD).setOption({
-          // backgroundColor:{
-          //       type: 'radial',
-          //       x: 0.5,
-          //       y: 0.5,
-          //       r: 0.5,
-          //       colorStops: [
-          //         { offset: 0,color: "#122c7a",},
-          //         { offset: 0.9,color: "#122c7a",},
-          //         { offset: 0.9,color: "#0b1f61",},
-          //         { offset: 1,color: "#0b1f61",},
-          //         { offset: 1,color: "transparent",},
-          //       ],
-          //       global: true // 缺省为 false
-          // },
-          title: {
-            show: true,
-            text: "水源完好率",
-            left: "center",
-            right: "center",
-            bottom: "center",
-            top: "52%",
-            center: 20,
-            // textStyle: {
-            //   color: "#FFF",
-            //   fontSize: 30,
-            //   align: "center",
-            //   fontWeight: "100",
-            //   fontFamily: '"DS", "DS-B", "DS-BB", "DS-BS"',
-            // },
-            textStyle: {
-              color: "#FFF",
-              fontSize: 50,
-              align: "center",
-              fontWeight: "100",
-              fontFamily: '"DS", "DS-B", "DS-BB", "DS-BS"',
-            },
-          },
-          series: [
-            {
-              name: "刻度",
-              type: "gauge",
-              radius: "80%",
-              min: 0, //最小刻度
-              max: 100, //最大刻度
-              startAngle: 225, //开始角度 左侧角度
-              endAngle: -135, //结束角度 右侧
-              z: 4,
-              splitNumber: 10,
-              axisLine: {
-                show: true,
-                lineStyle: {
-                  width: 1,
-                  color: [[1, "rgba(0,0,0,0)"]],
-                },
-              }, //仪表盘轴线
-              axisLabel: {
-                show: false,
-                color: "#00faff",
-                fontSize: 50,
-                distance: 20,
-                formatter: function (v) {
-                  return v;
-                },
-              }, //刻度标签。
-              axisTick: {
-                show: true,
-                splitNumber: 6,
-                lineStyle: {
-                  color: "#00faff",
-                  width: 1,
-                  // length:10
-                },
-                length: 5,
-              }, //刻度样式
-              splitLine: {
-                show: true,
-                length: -10,
-                lineStyle: {
-                  color: "#00faff",
-                  width: 1,
-                },
-              }, //分隔线样式
-            },
-            {
-              type: "gauge",
-              radius: "60%",
-              // center: ["50%","70%"],
-              splitNumber: 5, //刻度数量
-              startAngle: 225, //开始角度 左侧角度
-              endAngle: -135, //结束角度 右侧
-              z: 4,
-              axisLine: {
-                show: true,
-                roundCap: true,
-                lineStyle: {
-                  width: 10,
-                  color: [
-                    [
-                      this.dataMap > 1 ? 1 : this.dataMap,
-                      new echarts.graphic.LinearGradient(0, 0, 1, 0, [
-                        { offset: 0, color: "#0099ff" },
-                        { offset: 1, color: "#00d5ff" },
-                      ]),
-                    ],
-                    // [1, "#111F42"],
-                  ],
-                },
-              },
-              //分隔线样式。
-              splitLine: {
-                show: false,
-              },
-              axisLabel: {
-                show: false,
-              },
-              axisTick: {
-                show: false,
-              },
-              pointer: {
-                show: false,
-                length: "70%",
-                width: "2%",
-              },
-              title: {
-                show: false,
-                offsetCenter: [0, 0], // x, y，单位px
-                textStyle: {
-                  fontWeight: "100",
-                  color: "#0ab7ff",
-                  fontSize: 50,
-                },
-              },
-              //仪表盘详情，用于显示数据。
-              detail: {
-                show: true,
-                offsetCenter: [0, "-20%"],
-                color: "#ffffff",
-                textStyle: {
-                  fontSize: 90,
-                  color: "#FFF",
-                  fontWeight: "500",
-                  fontFamily: '"DS", "DS-B", "DS-BB", "DS-BS"',
-                },
-                formatter: function (v) {
-                  return v * 100 + "%";
-                },
-              },
-              data: [
-                {
-                  value: this.dataMap,
-                },
-              ],
-            },
-            {
-              //内圆
-              type: "pie",
-              radius: "46%",
-              center: ["50%", "50%"],
-              z: 3,
-              itemStyle: {
-                normal: {
-                  color: new echarts.graphic.RadialGradient(
-                    0.5,
-                    0.5,
-                    0.8,
-                    [
-                      {
-                        offset: 0,
-                        color: "#00b8f8",
-                      },
-                      {
-                        offset: 0.5,
-                        color: "#0068d4",
-                      },
-                      {
-                        offset: 1,
-                        color: "#0068d3",
-                      },
-                    ],
-                    false
-                  ),
-                  label: {
-                    show: false,
-                  },
-                  labelLine: {
-                    show: false,
-                  },
-                },
-              },
-              hoverAnimation: false,
-              label: {
-                show: false,
-              },
-              tooltip: {
-                show: false,
-              },
-              data: [100],
-            },
-            // 刻度圈
-            {
-              type: "pie",
-              radius: ["0%", "90%"],
-              center: ["50%", "50%"],
-              avoidLabelOverlap: false,
-              z: 3,
-              label: {
-                normal: {
-                  show: false,
-                  position: "center",
-                },
-                emphasis: {
-                  show: false,
-                  textStyle: {
-                    fontWeight: "bold",
-                  },
-                },
-              },
-              itemStyle: {
-                normal: {
-                  color: {
-                    type: "linear",
-                    x: 0,
-                    y: 0,
-                    x2: 0,
-                    y2: 1,
-                    colorStops: [
-                      {
-                        offset: 0,
-                        color: "#122c7a",
-                      },
-                      {
-                        offset: 1,
-                        color: "#122c7a",
-                      },
-                    ],
-                  },
-                },
-              },
-              labelLine: {
-                normal: {
-                  show: false,
-                },
-              },
-              data: [
-                {
-                  value: 100,
-                },
-              ],
-            },
-            //最外层圈
-            {
-              type: "pie",
-              radius: ["0%", "100%"],
-              center: ["50%", "50%"],
-              avoidLabelOverlap: false,
-              z: 2,
-              hoverAnimation: false,
-              label: {
-                normal: {
-                  show: false,
-                  position: "center",
-                },
-                emphasis: {
-                  show: false,
-                  textStyle: {
-                    fontWeight: "bold",
-                  },
-                },
-              },
-              itemStyle: {
-                normal: {
-                  color: {
-                    type: "linear",
-                    x: 0,
-                    y: 0,
-                    x2: 0,
-                    y2: 1,
-                    colorStops: [
-                      {
-                        offset: 0,
-                        color: "#0b1f61",
-                      },
-                      {
-                        offset: 1,
-                        color: "#0b1f61",
-                      },
-                    ],
-                  },
-                },
-              },
-              labelLine: {
-                normal: {
-                  show: false,
-                },
-              },
-              data: [
-                {
-                  value: 100,
-                },
-              ],
-            },
-          ],
-        });
-      }else{
-        echarts.init(this.$refs.echartD).setOption({
+      if (document.body.clientWidth < 1920) {
+        this.titleTextStyleFontSize = 18;
+        this.seriesDetailTextStyleFontSize = 60;
+      } else if (document.body.clientWidth > 1920) {
+        this.titleTextStyleFontSize = 25;
+        this.seriesDetailTextStyleFontSize = 80;
+      }
+
+      echarts.init(this.$refs.echartD).setOption({
         // backgroundColor:{
         //       type: 'radial',
         //       x: 0.5,
@@ -362,7 +67,7 @@ export default {
           // },
           textStyle: {
             color: "#FFF",
-            fontSize: 18,
+            fontSize: this.titleTextStyleFontSize,
             align: "center",
             fontWeight: "100",
             fontFamily: '"DS", "DS-B", "DS-BB", "DS-BS"',
@@ -469,7 +174,7 @@ export default {
               offsetCenter: [0, "-20%"],
               color: "#ffffff",
               textStyle: {
-                fontSize: 60,
+                fontSize: this.seriesDetailTextStyleFontSize,
                 color: "#FFF",
                 fontWeight: "500",
                 fontFamily: '"DS", "DS-B", "DS-BB", "DS-BS"',
@@ -634,10 +339,10 @@ export default {
           },
         ],
       });
-      }
     },
     resize() {
       echarts.init(this.$refs.echartD).resize();
+      this.getData();
     },
   },
 };

src/views/Home.vue

@@ -55,6 +55,7 @@
               </el-form>
               <!-- 饼图 -->
               <fire-pie ref="firePie1" :dataMap="fireCauseRatioList" :isVs="isVsFirePie" :radius="isVsFirePie ? 80 : 120"></fire-pie>
+              
             </div>
             <div class="line" v-show="isVsFirePie"></div>
             <div class="flexBoxE" v-show="isVsFirePie">

src/views/fire-data-analysis.vue

@@ -13,26 +13,66 @@
           <el-row class="leftTopContent">
             <el-row class="selectBar">
               <el-row>
-                <el-button style="margin-left:0.125rem !important" size="mini" @click="searchTime(1)" :class="{ btnClick: timeArea === 1 }">近一年</el-button>
-                <el-button size="mini" @click="searchTime(3)" :class="{ btnClick: timeArea === 3 }">近三年</el-button>
-                <el-button size="mini" @click="searchTime(5)" :class="{ btnClick: timeArea === 5 }">近五年</el-button>
+                <el-button
+                  style="margin-left: 0.125rem !important"
+                  size="mini"
+                  @click="searchTime(1)"
+                  :class="{ btnClick: timeArea === 1 }"
+                  >近一年</el-button
+                >
+                <el-button
+                  size="mini"
+                  @click="searchTime(3)"
+                  :class="{ btnClick: timeArea === 3 }"
+                  >近三年</el-button
+                >
+                <el-button
+                  size="mini"
+                  @click="searchTime(5)"
+                  :class="{ btnClick: timeArea === 5 }"
+                  >近五年</el-button
+                >
               </el-row>
               <el-form :inline="true" size="mini" :model="barForm">
                 <el-form-item label="">
-                  <el-select v-model="barForm.address" @change="getTrend()" filterable clearable placeholder="街道" >
-                    <el-option :label="item" :value="item" v-for="(item,ind) in fireAddressList" :key="ind"></el-option>
+                  <el-select
+                    v-model="barForm.address"
+                    @change="getTrend()"
+                    filterable
+                    clearable
+                    placeholder="街道"
+                  >
+                    <el-option
+                      :label="item"
+                      :value="item"
+                      v-for="(item, ind) in fireAddressList"
+                      :key="ind"
+                    ></el-option>
                   </el-select>
                 </el-form-item>
                 <el-form-item label="">
-                  <el-select @change="getTrend()" v-model="barForm.fireType" placeholder="火灾类型" filterable clearable >
-                    <el-option :value="item"  v-for="(item,ind) in fireTypeList" :key="ind" ></el-option>
+                  <el-select
+                    @change="getTrend()"
+                    v-model="barForm.fireType"
+                    placeholder="火灾类型"
+                    filterable
+                    clearable
+                  >
+                    <el-option
+                      :value="item"
+                      v-for="(item, ind) in fireTypeList"
+                      :key="ind"
+                    ></el-option>
                   </el-select>
                 </el-form-item>
               </el-form>
             </el-row>
             <el-row class="fireBar">
               <!-- 柱状图 -->
-              <category-line ref="categoryLine" :dataMap="timeData"></category-line>
+              <category-line
+                ref="categoryLine"
+                :dataMap="timeData"
+              ></category-line>
             </el-row>
           </el-row>
         </el-col>
@@ -45,29 +85,79 @@
             <el-row class="dj dj4"></el-row>
           </div>
           <el-row class="threeBox">
-            <div class="flexBoxE" :style="{'padding-top': isVsFirePie ? '0.75rem' : 0 }">
-              <el-form v-show="isVsFirePie" :inline="true" size="mini" :model="fireCauseRatioObj">
+            <div
+              class="flexBoxE"
+              :style="{ 'padding-top': isVsFirePie ? '0.75rem' : 0 }"
+            >
+              <el-form
+                v-show="isVsFirePie"
+                :inline="true"
+                size="mini"
+                :model="fireCauseRatioObj"
+              >
                 <el-form-item label="街道：">
-                  <el-select @change="getFireCause(1)" v-model="fireCauseRatioObj.address" placeholder="选择街道" filterable clearable >
-                    <el-option  :label="item" :value="item" v-for="item in fireAddressList" :key="item" ></el-option>
+                  <el-select
+                    @change="getFireCause(1)"
+                    v-model="fireCauseRatioObj.address"
+                    placeholder="选择街道"
+                    filterable
+                    clearable
+                  >
+                    <el-option
+                      :label="item"
+                      :value="item"
+                      v-for="item in fireAddressList"
+                      :key="item"
+                    ></el-option>
                   </el-select>
                 </el-form-item>
               </el-form>
               <!-- 饼图 -->
-              <fire-pie ref="firePie1" :dataMap="fireCauseRatioList" :isVs="isVsFirePie" :radius="isVsFirePie ? 80 : 120"></fire-pie>
+              <fire-pie
+                ref="firePie1"
+                :dataMap="fireCauseRatioList"
+                :isVs="isVsFirePie"
+                :radius="isVsFirePie ? 80 : 120"
+              ></fire-pie>
             </div>
             <div class="line" v-show="isVsFirePie"></div>
             <div class="flexBoxE" v-show="isVsFirePie">
-              <el-form v-show="isVsFirePie" :inline="true" size="mini" :model="fireCauseRatioObj">
+              <el-form
+                v-show="isVsFirePie"
+                :inline="true"
+                size="mini"
+                :model="fireCauseRatioObj"
+              >
                 <el-form-item label="街道：">
-                  <el-select @change="getFireCause(2)" v-model="fireCauseRatioObj.address2" placeholder="选择街道" filterable clearable>
-                    <el-option :label="item" :value="item" v-for="item in fireAddressList" :key="item" ></el-option>
+                  <el-select
+                    @change="getFireCause(2)"
+                    v-model="fireCauseRatioObj.address2"
+                    placeholder="选择街道"
+                    filterable
+                    clearable
+                  >
+                    <el-option
+                      :label="item"
+                      :value="item"
+                      v-for="item in fireAddressList"
+                      :key="item"
+                    ></el-option>
                   </el-select>
                 </el-form-item>
               </el-form>
-              <fire-pie style="flex: 1" ref="firePie2" :dataMap="fireCauseRatioList2" :isVs="isVsFirePie" :radius="isVsFirePie ? 80 : 80"></fire-pie>
+              <fire-pie
+                style="flex: 1"
+                ref="firePie2"
+                :dataMap="fireCauseRatioList2"
+                :isVs="isVsFirePie"
+                :radius="isVsFirePie ? 80 : 80"
+              ></fire-pie>
             </div>
-            <div class="VS"  @click="vsClick('isVsFirePie')" :style="{ 'font-size': isVsFirePie ? '.15rem' : '.15rem' }">
+            <div
+              class="VS"
+              @click="vsClick('isVsFirePie')"
+              :style="{ 'font-size': isVsFirePie ? '.15rem' : '.15rem' }"
+            >
               {{ isVsFirePie ? "返回" : "对比" }}
             </div>
           </el-row>
@@ -75,13 +165,17 @@
       </el-col>
     </transition>
     <transition name="el-fade-in-linear">
-      <el-col class="centerBox" style="width:100%">
+      <el-col class="centerBox" style="width: 100%">
         <el-row class="leftBtn btnW" @click="leftBtnClick()">
-          <i :class="leftBtn ? 'el-icon-arrow-left' : 'el-icon-arrow-right'"></i>
+          <i
+            :class="leftBtn ? 'el-icon-arrow-left' : 'el-icon-arrow-right'"
+          ></i>
         </el-row>
         <el-row class="centerContent" id="mapF"></el-row>
         <el-row class="rightBtn btnW" @click="rightBtnClick()">
-          <i :class="rightBtn ? 'el-icon-arrow-right' : 'el-icon-arrow-left'"></i>
+          <i
+            :class="rightBtn ? 'el-icon-arrow-right' : 'el-icon-arrow-left'"
+          ></i>
         </el-row>
         <el-row class="mapTips">
           <el-col class="greenImage">一级火灾</el-col>
@@ -92,7 +186,7 @@
       </el-col>
     </transition>
     <transition name="el-fade-in-linear">
-      <el-col class="rightBox" v-show="rightBtn" >
+      <el-col class="rightBox" v-show="rightBtn">
         <el-col class="rightTop">
           <h4>详细火灾情况</h4>
           <div class="jiao">
@@ -109,7 +203,7 @@
             height="100%"
             :cell-class-name="tableRowClassName"
           >
-            <el-table-column 
+            <el-table-column
               show-overflow-tooltip
               min-width="20"
               v-for="item in headerData"
@@ -146,10 +240,10 @@ import map from "@c/mixins/map-gaode";
 
 export default {
   components: { categoryLine, firePie, scatter },
-  mixins: [linstener,map],
+  mixins: [linstener, map],
   data() {
     return {
-      box:null,
+      box: null,
       tableData: [
         // {"address":"x街道45号","burnedArea":"2","propertyLoss":"5","deathToll":"0","nonFatal":"1","disasterHome":"2","nature":"居民","fireCause":"家电","fireGoodsOne":"电视机"},
         // {"address":"x街道45号","burnedArea":"2","propertyLoss":"5","deathToll":"0","nonFatal":"1","disasterHome":"2","nature":"居民","fireCause":"家电","fireGoodsOne":"电视机"},
@@ -175,13 +269,13 @@ export default {
       fireTypeList: [],
       fireCauseRatioList: [],
       fireCauseRatioList2: [],
-      fireCauseRatioObj:{
-        address:'',
-        address2:'',
+      fireCauseRatioObj: {
+        address: "",
+        address2: "",
       },
-      tabObj:{
-        address:'',
-        address2:'',
+      tabObj: {
+        address: "",
+        address2: "",
       },
       timeData: [],
       fireBubbleList: [],
@@ -190,37 +284,38 @@ export default {
         address: "",
       },
       timeArea: 1,
-      isScroll:true,
+      isScroll: true,
     };
   },
   created() {
     this.getData();
   },
-  watch:{
-    isVsFirePie(val){
-      if(!val){ 
-        this.fireCauseRatioObj.address = ''
-        this.getFireCause(1)
+  watch: {
+    isVsFirePie(val) {
+      if (!val) {
+        this.fireCauseRatioObj.address = "";
+        this.getFireCause(1);
       }
-    }
+    },
   },
   mounted() {
     // 通过$refs获取dom元素
     this.box = this.$refs.seTable.$el.childNodes[2];
     // 监听这个dom的scroll事件
-    this.box.addEventListener('scroll', (e) => {
-      const scrollTop = e.target.scrollTop // 已滚动到可视区域上方的高度
-      const clientHeight = e.target.clientHeight // 可视区域高度
-      const scrollHeight = e.target.scrollHeight // 滚动内容的总高度
-      if (scrollHeight - (scrollTop + clientHeight) <= 20) { // 不足10像素触发加载更多
-        if(this.isScroll){
-          this.isScroll = false
-          ++this.current
-          this.getFireStatis()
-          console.log(scrollHeight - (scrollTop + clientHeight) <= 20)
+    this.box.addEventListener("scroll", (e) => {
+      const scrollTop = e.target.scrollTop; // 已滚动到可视区域上方的高度
+      const clientHeight = e.target.clientHeight; // 可视区域高度
+      const scrollHeight = e.target.scrollHeight; // 滚动内容的总高度
+      if (scrollHeight - (scrollTop + clientHeight) <= 20) {
+        // 不足10像素触发加载更多
+        if (this.isScroll) {
+          this.isScroll = false;
+          ++this.current;
+          this.getFireStatis();
+          console.log(scrollHeight - (scrollTop + clientHeight) <= 20);
         }
       }
-    })
+    });
     window.addEventListener(
       "resize",
       () =>
@@ -232,13 +327,12 @@ export default {
         ]),
       true
     );
-    this.initMap()
+    this.initMap();
   },
   methods: {
-    load(){
-    },
-    tableRowClassName({row, column}) {
-      if (column.property === 'deathToll' && row.deathToll > 0) {
+    load() {},
+    tableRowClassName({ row, column }) {
+      if (column.property === "deathToll" && row.deathToll > 0) {
         return "death";
       }
     },
@@ -289,91 +383,134 @@ export default {
     },
     /* 火灾情况分析 气泡图*/
     async policeInfo() {
-      await this.$axios.get(
-        this.$api.fire.fireBubble +
-          "?" +
-          this.$qs.stringify({
-            unitId: '',
-            fireType: '',
-            startTime:'2015-01-01 00:00:00',
-            endTime:'2022-01-01 00:00:00',
-            // startTime: this.$store.state.timeList[0] || "",
-            // endTime: this.$store.state.timeList[1] || "",
-          })
-      ).then(res =>{
-        console.log(res)
-        this.fireBubbleList = res.data;
-      });
+      await this.$axios
+        .get(
+          this.$api.fire.fireBubble +
+            "?" +
+            this.$qs.stringify({
+              unitId: "",
+              fireType: "",
+              startTime: "2015-01-01 00:00:00",
+              endTime: "2022-01-01 00:00:00",
+              // startTime: this.$store.state.timeList[0] || "",
+              // endTime: this.$store.state.timeList[1] || "",
+            })
+        )
+        .then((res) => {
+          console.log(res);
+          this.fireBubbleList = res.data;
+        });
     },
     /* 火灾趋势图 柱状图 */
     async getTrend() {
-      await this.$axios.get(
-        this.$api.fire.trendQuery +
-          "?" +
-          this.$qs.stringify({
-            address: this.barForm.address,
-            fireType: this.barForm.fireType,
-            startTime: (new Date().getFullYear() - this.timeArea) + '-' + (new Date().getMonth() + 1) + '-' + new Date().getDate() + ' 00:00:00',
-            endTime: new Date().getFullYear() + '-' + (new Date().getMonth() + 1) + '-' + new Date().getDate() + ' 00:00:00',
-          })
-      ).then(res =>{
-        this.timeData = res.data;
-      });
+      await this.$axios
+        .get(
+          this.$api.fire.trendQuery +
+            "?" +
+            this.$qs.stringify({
+              address: this.barForm.address,
+              fireType: this.barForm.fireType,
+              startTime:
+                new Date().getFullYear() -
+                this.timeArea +
+                "-" +
+                (new Date().getMonth() + 1) +
+                "-" +
+                new Date().getDate() +
+                " 00:00:00",
+              endTime:
+                new Date().getFullYear() +
+                "-" +
+                (new Date().getMonth() + 1) +
+                "-" +
+                new Date().getDate() +
+                " 00:00:00",
+            })
+        )
+        .then((res) => {
+          this.timeData = res.data;
+        });
     },
     /* 火灾原因占比 饼图 */
     async getFireCause(val) {
-      await this.$axios.get(
-        this.$api.fire.fireCauseRatio +
-          "?" +
-          this.$qs.stringify({
-            startTime: this.$store.state.timeList[0] || "",
-            endTime: this.$store.state.timeList[1] || "",
-            address:val === 1 ? this.fireCauseRatioObj.address :val === 2 ? this.fireCauseRatioObj.address2 : ''
-          })
-      ).then(res =>{
-        let ratioList = res.data.map((val) => {
-          return {
-            name: val.fireType || " ",
-            value: val.radio ? val.radio * 100 : 0,
-            itemStyle: {
-              opacity: 0.9,
-            },
-          };
-        })
-        if(val === 1){
-          this.fireCauseRatioList = ratioList
-        } else if(val === 2) {
-          this.fireCauseRatioList2 = ratioList
-        } else{
-          this.fireCauseRatioList = ratioList
-          this.fireCauseRatioList2 = ratioList
-        }
-      });
+      await this.$axios
+        .get(
+          this.$api.fire.fireCauseRatio +
+            "?" +
+            this.$qs.stringify({
+              startTime: this.$store.state.timeList[0] || "",
+              endTime: this.$store.state.timeList[1] || "",
+              address:
+                val === 1
+                  ? this.fireCauseRatioObj.address
+                  : val === 2
+                  ? this.fireCauseRatioObj.address2
+                  : "",
+            })
+        )
+        .then((res) => {
+          let ratioList = res.data.map((val) => {
+            return {
+              name: val.fireType || " ",
+              value: val.radio ? val.radio * 100 : 0,
+              itemStyle: {
+                opacity: 0.9,
+              },
+            };
+          });
+          if (val === 1) {
+            this.fireCauseRatioList = ratioList;
+          } else if (val === 2) {
+            this.fireCauseRatioList2 = ratioList;
+          } else {
+            this.fireCauseRatioList = ratioList;
+            this.fireCauseRatioList2 = ratioList;
+          }
+        });
     },
     // 详细火灾情况，表格val
     async getFireStatis() {
-      await this.$axios.get(
-        this.$api.fire.fireStatistics +
-          "?" +
-          this.$qs.stringify({
-            current: this.current,
-            size: this.size,
-            startTime: (new Date().getFullYear() - this.timeArea) + '-' + (new Date().getMonth() + 1) + '-' + new Date().getDate() + ' 00:00:00',
-            endTime: new Date().getFullYear() + '-' + (new Date().getMonth() + 1) + '-' + new Date().getDate() + ' 00:00:00',
-          })
-      ).then(res =>{
-        this.isScroll = true
-        this.tableData.push(...(res.data.records.map(val=> {
-          val.propertyLoss = val.propertyLoss && (val.propertyLoss / 10000) || val.propertyLoss
-          return val
-        })));
-      });
+      await this.$axios
+        .get(
+          this.$api.fire.fireStatistics +
+            "?" +
+            this.$qs.stringify({
+              current: this.current,
+              size: this.size,
+              startTime:
+                new Date().getFullYear() -
+                this.timeArea +
+                "-" +
+                (new Date().getMonth() + 1) +
+                "-" +
+                new Date().getDate() +
+                " 00:00:00",
+              endTime:
+                new Date().getFullYear() +
+                "-" +
+                (new Date().getMonth() + 1) +
+                "-" +
+                new Date().getDate() +
+                " 00:00:00",
+            })
+        )
+        .then((res) => {
+          this.isScroll = true;
+          this.tableData.push(
+            ...res.data.records.map((val) => {
+              val.propertyLoss =
+                (val.propertyLoss && val.propertyLoss / 10000) ||
+                val.propertyLoss;
+              return val;
+            })
+          );
+        });
+    },
+    searchTime(val) {
+      if (val === this.timeArea) return;
+      this.timeArea = val;
+      this.getTrend();
     },
-    searchTime(val){
-      if(val === this.timeArea) return
-      this.timeArea = val
-      this.getTrend()
-    }
   },
 };
 </script>
@@ -384,39 +521,39 @@ export default {
   // font-family: "DS", "DS-B", "DS-BB", "DS-BS";
   .leftBox {
     .leftTop {
-      height:24.8437%;
-      max-height:5.9256rem;
+      height: 24.8437%;
+      max-height: 5.9256rem;
       padding: 0.675rem 0.25rem 0.1875rem;
       display: flex;
       justify-content: center;
       align-items: center;
       box-sizing: border-box;
-      width:100%;
+      width: 100%;
       .leftTopContent {
         height: 100%;
         vertical-align: top;
-        .el-button{
+        .el-button {
           vertical-align: top;
-          padding:0;
+          padding: 0;
         }
         .selectBar {
           width: 100%;
           display: flex;
           justify-content: space-between;
           height: 0.675rem;
-          .el-row{
+          .el-row {
             display: flex;
           }
         }
         .fireBar {
-          margin-left:2%;
-          width:6.875rem;
+          margin-left: 2%;
+          width: 6.875rem;
           height: calc(100% - 0.875rem);
         }
       }
     }
     .leftBot {
-      margin-top:0.125rem;
+      margin-top: 0.125rem;
       padding: 0.375rem 0.45rem 0.1875rem;
       width: 100%;
       .threeBox {
@@ -455,46 +592,45 @@ export default {
         }
         // 对比按钮
         .VS {
-            position: absolute;
-            right: -0.2rem;
-            top: -0.2rem;
-            padding: .0625rem 0.2rem;
-            box-sizing: border-box;
-            text-align: center;
-            box-shadow: inset 0 0 0.05rem 0.05rem rgba(27, 79, 144, 1);
-            background: rgba(#132A5A, 0.8) !important;
-            color: #fff;
-            cursor: pointer;
-            -webkit-touch-callout: none;
-            -webkit-user-select: none;
-            -moz-user-select: none;
-            -ms-user-select: none;
-            user-select: none;
-            border-radius: .0625rem;
+          position: absolute;
+          right: -0.2rem;
+          top: -0.2rem;
+          padding: 0.0625rem 0.2rem;
+          box-sizing: border-box;
+          text-align: center;
+          box-shadow: inset 0 0 0.05rem 0.05rem rgba(27, 79, 144, 1);
+          background: rgba(#132a5a, 0.8) !important;
+          color: #fff;
+          cursor: pointer;
+          -webkit-touch-callout: none;
+          -webkit-user-select: none;
+          -moz-user-select: none;
+          -ms-user-select: none;
+          user-select: none;
+          border-radius: 0.0625rem;
         }
       }
     }
   }
   .rightBox {
-      .rightTop{
-        height:24.8437%;
-        max-height:5.9256rem;
-        padding: 0.675rem 0.025rem 0.0625rem;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        box-sizing: border-box;
-        width:100%;
-      }
-      .rightBot{
-        margin-top:0.125rem;
-        padding: 0.375rem 0.45rem 0.1875rem;
-        width: 100%;
-      }
-
+    .rightTop {
+      height: 24.8437%;
+      max-height: 5.9256rem;
+      padding: 0.675rem 0.025rem 0.0625rem;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      box-sizing: border-box;
+      width: 100%;
+    }
+    .rightBot {
+      margin-top: 0.125rem;
+      padding: 0.375rem 0.45rem 0.1875rem;
+      width: 100%;
+    }
   }
 }
-.el-form--inline{
-  margin-top:0.06rem;
+.el-form--inline {
+  margin-top: 0.06rem;
 }
 </style>

src/views/self-management.vue

@@ -26,7 +26,7 @@
               </el-row>
               <el-row>
                 <el-row class="rightTopChart">
-                  <gauge2 ref="gauge1" :dataMap="0.5"  :dataNumber="50" color="#E4951E"></gauge2>
+                  <gauge ref="gauge3" :dataMap="0.5"  :dataNumber="50+'%'" color="#E4951E"></gauge>
                 </el-row>
                 <el-row class="rightTopNumber">培训合格率</el-row>
               </el-row>
@@ -299,12 +299,11 @@ import shebei1 from "@c/shebei";
 import seTable from "@c/se-table";
 import yw from "@c/yw";
 import gauge from "@c/gauge";
-import gauge2 from "@c/gauge/index2.vue";
 // import map from "@c/mixins/map-data";
 import map from "@c/mixins/map-gaode-selfManagement";
 import radarChart from "@c/radar";
 export default {
-  components: { categoryEnterprise, seTable, shebei1, radarChart, gauge, gauge2, yw},
+  components: { categoryEnterprise, seTable, shebei1, radarChart, gauge, yw},
   mixins: [linstener,map],
   data() {
     return {
@@ -406,7 +405,10 @@ export default {
       "resize",
       () =>
         this.resizeTimeActions([
-          this.$refs.gauge,
+          this.$refs.gauge1,
+          this.$refs.gauge2,
+          this.$refs.gauge3,
+          this.$refs.categoryEnterprise,
           this.$refs.categoryLine,
           this.$refs.category,
           this.$refs.radarChart,

src/views/time-select.vue

@@ -124,7 +124,7 @@ export default {
     top: 0.8rem;
     color: #fff;
     background: rgba(0, 255, 255, 0.1);
-    border: 1px solid rgba(0, 255, 252, 0.6);
+    // border: 1px solid rgba(0, 255, 252, 0.6);
     border-left: none;
     .wrap{
         width:100%;

src/views/water-sources.vue

@@ -100,9 +100,6 @@
                       ref="gauge1"
                       :dataMap="fireWaterStatisticsObj.municipalGetWaterRadio || 0"
                       color="#1AF3FD"
-                      :size="21"
-                      :with="10"
-                      :tick="false"
                     ></gauge>
                   </el-col>
                   <el-col :span="12">
@@ -118,9 +115,6 @@
                       ref="gauge2"
                       :dataMap="fireWaterStatisticsObj.landGetWaterRadio || 0"
                       color="#FDC51A"
-                      :size="21"
-                      :with="10"
-                      :tick="false"
                     ></gauge>
                   </el-col>
                   <el-col :span="12">