提示网络状况不佳

src/plugins/axios.js

@@ -2,6 +2,7 @@ import Vue from "vue";
 import axios from "axios";
 import router from "../router";
 import { loadProgressBar } from "axios-progress-bar";
+import networkInformationHint from "./networkInformationHint.js";
 
 const ERROR_MSG_CONFIG = require("./errorMsgConfig").default;
 
@@ -40,6 +41,7 @@ function getRootOrgId() {
 
 _$httpWith500Msg.interceptors.request.use(
   function(config) {
+    networkInformationHint();
     // Do something before request is sent
     if (
       config.url.includes("/login") === false &&
@@ -88,6 +90,7 @@ _$httpWith500Msg.interceptors.request.use(
 _$http.interceptors.request.use(
   // no auto 500 error UI
   function(config) {
+    networkInformationHint();
     // Do something before request is sent
     if (config.url.includes("/login") === false) {
       if (!wk_token) {
@@ -299,5 +302,27 @@ loadProgressBar({}, Vue.$http);
 loadProgressBar({}, Vue.$httpWithMsg);
 loadProgressBar({}, Vue.$httpWithoutAuth);
 
+// const update = (type, e) => {
+//   // debugger;
+//   console.log(type);
+//   console.log(
+//     "e.target.url: ",
+//     e.target.responseURL,
+//     " timeStamp: ",
+//     e.timeStamp.toFixed(2),
+//     " loaded:",
+//     e.loaded,
+//     " total: ",
+//     e.total
+//   );
+//   console.log(e);
+// };
+// Vue.$httpWithMsg.defaults.onDownloadProgress = e => {
+//   update("下载", e);
+// };
+// Vue.$httpWithMsg.defaults.onUploadProgress = e => {
+//   update("上传", e);
+// };
+
 import "axios-progress-bar/dist/nprogress.css";
 export default Plugin;

src/plugins/networkInformationHint.js

@@ -0,0 +1,41 @@
+import Vue from "vue";
+
+let ___networkInformationHintLastTime = Date.now();
+const sessionNoNetworkHint = "networkInformationHint-nohint";
+
+export default function networkInformationHint() {
+  if (navigator.connection && navigator.connection.downlink) {
+    window._hmt.push([
+      "_trackEvent",
+      "网络状况不佳",
+      "下载小于2Mb，延迟大于1000ms"
+    ]);
+    if (navigator.connection.downlink < 2 || navigator.connection.rtt > 1000) {
+      if (
+        Date.now() - ___networkInformationHintLastTime > 3000 &&
+        !sessionStorage.getItem(sessionNoNetworkHint)
+      ) {
+        Vue.prototype.$notify({
+          showClose: true,
+          duration: 2000,
+          title: "当前网络状况不佳！",
+          message: `当前网速：下载(${
+            navigator.connection.downlink
+          }Mb) 网络延时(${navigator.connection.rtt}ms) (点击不再提示)`,
+          type: "warning",
+          onClick: () => {
+            Vue.prototype
+              .$alert("不在提示网络状况？", "提示", {
+                confirmButtonText: "确定",
+                cancelButtonText: "取消"
+              })
+              .then(() => {
+                sessionStorage.setItem(sessionNoNetworkHint, true);
+              });
+          }
+        });
+        ___networkInformationHintLastTime = Date.now();
+      }
+    }
+  }
+}