feat:添加断网提示

sample-form-client-ui/admin/src/App.vue

 <template>
   <div class="app">
     <router-view></router-view>
+    <NetworkError :isShowError="isShowError"></NetworkError>
   </div>
 </template>
 
 <script>
 import local from "@/utils/local";
+import NetworkError from "@/components/NetworkError.vue";
 import mq from "@/mixin/mq";
 import { getHomeInfo } from "@/api";
 import { mapMutations } from "vuex";
 export default {
   mixins: [mq],
+  components: {
+    NetworkError,
+  },
   data() {
     return {
       routeQuery: "",
       devicenum: "",
       linkDom: null, // 换皮
+      isShowError: false,
     };
   },
   watch: {
@@ -58,6 +64,17 @@ export default {
       this.WebSocketMq(obj);
     }
   },
+  mounted() {
+    // 设备在线
+    window.addEventListener("online", () => {
+      this.isShowError = false;
+      location.reload();
+    });
+    // 设备离线
+    window.addEventListener("offline", () => {
+      this.isShowError = true;
+    });
+  },
   methods: {
     ...mapMutations(["SET_homeInfo", "SET_datumList", "SET_matterList"]),
     // 简析url

sample-form-client-ui/admin/src/components/NetworkError.vue

+<template>
+  <div class="network_error" v-show="isShowError">
+    <div class="network_error_box">
+      <img class="network_error_img" src="../assets/img/网络出错@3x.png" />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    isShowError: {
+      type: Boolean,
+      required: true,
+      default: false,
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.network_error {
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.2);
+  position: fixed;
+  top: 0px;
+  left: 0px;
+  z-index: 999;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  .network_error_box {
+    width: 400px;
+    height: 400px;
+    background-color: #fff;
+    border-radius: 4px;
+    .network_error_img {
+      width: 100%;
+      height: 100%;
+    }
+  }
+}
+</style>
\ No newline at end of file