处理放大布局

src/App.vue

@@ -4,12 +4,16 @@
   </div>
 </template>
 <script>
+import DevicePixelRatio from "./components/common/devicePixelRatio";
 export default {
   name: "App",
   data() {
     return {};
   },
   mounted() {},
+  created() {
+    new DevicePixelRatio().init();
+  },
 };
 </script>
 

src/components/common/devicePixelRatio.js

@@ -0,0 +1,60 @@
+class DevicePixelRatio {
+  constructor() {
+    //this.flag = false;
+  }
+  //获取系统类型
+  _getSystem() {
+    let flag = false;
+    var agent = navigator.userAgent.toLowerCase();
+    //		var isMac = /macintosh|mac os x/i.test(navigator.userAgent);
+    //		if(isMac) {
+    //			return false;
+    //		}
+    //现只针对windows处理，其它系统暂无该情况，如有，继续在此添加
+    if (agent.indexOf("windows") >= 0) {
+      return true;
+    }
+  }
+  //获取页面缩放比例
+  //	_getDevicePixelRatio() {
+  //		let t = this;
+  //	}
+  //监听方法兼容写法
+  _addHandler(element, type, handler) {
+    if (element.addEventListener) {
+      element.addEventListener(type, handler, false);
+    } else if (element.attachEvent) {
+      element.attachEvent("on" + type, handler);
+    } else {
+      element["on" + type] = handler;
+    }
+  }
+  //校正浏览器缩放比例
+  _correct() {
+    let t = this;
+    //页面devicePixelRatio（设备像素比例）变化后，计算页面body标签zoom修改其大小，来抵消devicePixelRatio带来的变化。
+    document.getElementsByTagName("body")[0].style.zoom =
+      1 / window.devicePixelRatio;
+  }
+  //监听页面缩放
+  _watch() {
+    let t = this;
+    t._addHandler(window, "resize", function () {
+      //注意这个方法是解决全局有两个window.resize
+      //重新校正
+      t._correct();
+    });
+  }
+  //初始化页面比例
+  init() {
+    let t = this;
+    if (t._getSystem()) {
+      //判断设备，目前只在windows系统下校正浏览器缩放比例
+      //初始化页面校正浏览器缩放比例
+      t._correct();
+      //开启监听页面缩放
+      t._watch();
+    }
+  }
+}
+export default DevicePixelRatio;

src/views/management/userEquipment/lineInformation/components/addTowerDialog.vue

@@ -56,6 +56,9 @@ export default {
             trigger: "blur",
           },
         ],
+        address: [
+          { required: true, message: "请输入杆塔地址", trigger: "blur" },
+        ],
       },
     };
   },

src/views/management/userEquipment/towerInformation/components/addDialog.vue

@@ -61,6 +61,9 @@ export default {
         lineId: [
           { required: true, message: "请选择线路编号", trigger: "blur" },
         ],
+        address: [
+          { required: true, message: "请输入杆塔地址", trigger: "blur" },
+        ],
         order: [{ required: true, message: "请输入排序号", trigger: "blur" }],
       },
     };

src/views/stritl/index.vue

@@ -26,7 +26,12 @@
       </el-card>
       <el-card class="box-card">
         <h3>装置在线统计</h3>
-        <div id="echart2" class="chartClass" v-loading="pieloading"></div>
+        <div
+          id="echart2"
+          class="chartClass"
+          v-loading="pieloading"
+          :style="`zoom:${zoom};transform:scale(${1});transform-origin:0 0`"
+        ></div>
       </el-card>
     </div>
     <div class="echart-top">
@@ -44,7 +49,11 @@
           >
           </el-date-picker>
         </div>
-        <div id="echart3" class="chartClass"></div>
+        <div
+          id="echart3"
+          class="chartClass"
+          :style="`zoom:${zoom};transform:scale(${1});transform-origin:0 0`"
+        ></div>
       </el-card>
       <el-card class="box-card" v-loading="pie2loading">
         <h3>告警类型统计</h3>
@@ -59,7 +68,11 @@
           >
           </el-date-picker>
         </div>
-        <div id="echart4" class="chartClass"></div>
+        <div
+          id="echart4"
+          class="chartClass"
+          :style="`zoom:${zoom};transform:scale(${1});transform-origin:0 0`"
+        ></div>
       </el-card>
     </div>
   </div>
@@ -91,13 +104,21 @@ export default {
       pieloading: false,
       barloading: false,
       pie2loading: false,
+      zoom: 1,
     };
   },
+  created() {
+    console.log(window.devicePixelRatio);
+  },
   mounted() {
     this.getDateTime(); //获取当前时间
     this.getTermData();
     this.getWeekAlarmStatistics();
     this.getTodayAlarmStatistics();
+    this.zoom = 1 / document.body.style.zoom;
+    window.addEventListener("resize", () => {
+      this.zoom = 1 / document.body.style.zoom;
+    });
   },
   watch: {
     "$store.state.collapse"(val) {
@@ -393,6 +414,8 @@ export default {
       .chartClass {
         height: calc(100% - 32px);
         width: 100%;
+        transform-origin: 0 0;
+        zoom: 1;
       }
       h3 {
         font-size: 18px;