样式修正

src/App.vue

@@ -8,6 +8,22 @@
 export default {
   name: "App",
   components: {},
+  methods: {
+    bodyScale() {
+      var devicewidth = document.documentElement.clientWidth; //获取当前分辨率下的可是区域宽度
+      var scale = devicewidth / 1920; // 分母——设计稿的尺寸
+      document.body.style.zoom = scale; //放大缩小相应倍数
+      let charts = document.getElementsByClassName("chart-container");
+      for (let i = 0; i < charts.length; i++) {
+        charts[i].style.zoom = 1;
+      }
+    },
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.bodyScale();
+    });
+  },
 };
 </script>
 

src/components/Index.vue

@@ -100,7 +100,6 @@ export default {
   line-height: 70px;
   padding: 0 18px;
   min-height: 78px;
-  height: 7.22vh;
   margin: 0px;
   background: url("@/assets/nav.png") no-repeat;
   background-size: 100% 100%;

src/components/construction/Index.vue

@@ -427,6 +427,17 @@ export default {
   mounted() {
     this.renderSecurityChart();
     this.renderQualityChart();
+
+    this.$nextTick(() => {
+      // 解决echarts图表放大溢出父容器
+      const resizeOb = new ResizeObserver((entries) => {
+        for (const entry of entries) {
+          this.$echarts.getInstanceByDom(entry.target).resize();
+        }
+      });
+      resizeOb.observe(document.getElementById("security-chart"));
+      resizeOb.observe(document.getElementById("quality-chart"));
+    });
   },
 };
 </script>

src/components/earlywarning/Index.vue

@@ -433,6 +433,17 @@ export default {
     this.renderWarningChart();
     this.renderTodayChart();
     this.renderHistoryChart();
+    this.$nextTick(() => {
+      // 解决echarts图表放大溢出父容器
+      const resizeOb = new ResizeObserver((entries) => {
+        for (const entry of entries) {
+          this.$echarts.getInstanceByDom(entry.target).resize();
+        }
+      });
+      resizeOb.observe(document.getElementById("today-chart"));
+      resizeOb.observe(document.getElementById("history-chart"));
+      resizeOb.observe(document.getElementById("warning-chart"));
+    });
   },
 };
 </script>

src/components/noise/Index.vue

@@ -556,6 +556,18 @@ export default {
     this.renderNoiseChart();
     this.renderAQIChart();
     this.renderAqiQualityChart();
+    this.$nextTick(() => {
+      // 解决echarts图表放大溢出父容器
+      const resizeOb = new ResizeObserver((entries) => {
+        for (const entry of entries) {
+          this.$echarts.getInstanceByDom(entry.target).resize();
+        }
+      });
+      resizeOb.observe(document.getElementById("device-chart"));
+      resizeOb.observe(document.getElementById("noise-chart"));
+      resizeOb.observe(document.getElementById("aqi-chart"));
+      resizeOb.observe(document.getElementById("aqi-quality-chart"));
+    });
   },
 };
 </script>

src/components/realname/Index.vue

@@ -504,6 +504,18 @@ export default {
     this.renderWeekCheckChart();
     this.renderWeekWorkChart();
     this.renderInOutChart();
+    this.$nextTick(() => {
+      // 解决echarts图表放大溢出父容器
+      const resizeOb = new ResizeObserver((entries) => {
+        for (const entry of entries) {
+          this.$echarts.getInstanceByDom(entry.target).resize();
+        }
+      });
+      resizeOb.observe(document.getElementById("area-chart"));
+      resizeOb.observe(document.getElementById("week-check-chart"));
+      resizeOb.observe(document.getElementById("week-work-chart"));
+      resizeOb.observe(document.getElementById("in-out-chart"));
+    });
   },
 };
 </script>

src/components/tower/Index.vue

@@ -404,6 +404,17 @@ export default {
     this.renderDeviceChart();
     this.renderForceChart();
     this.renderDipChart();
+    this.$nextTick(() => {
+      // 解决echarts图表放大溢出父容器
+      const resizeOb = new ResizeObserver((entries) => {
+        for (const entry of entries) {
+          this.$echarts.getInstanceByDom(entry.target).resize();
+        }
+      });
+      resizeOb.observe(document.getElementById("device-chart"));
+      resizeOb.observe(document.getElementById("force-chart"));
+      resizeOb.observe(document.getElementById("dip-chart"));
+    });
   },
 };
 </script>
@@ -527,7 +538,7 @@ export default {
 }
 .warn-message {
   position: relative;
-  height: 39vh;
+  height: 400px;
   .warn-icon {
     position: absolute;
     left: 50%;