优化

src/components/message.js

@@ -0,0 +1,22 @@
+/**重置message，防止重复点击重复弹出message弹框 */
+import { Message } from "element-ui";
+
+let messageInstance = null;
+const resetMessage = (options) => {
+  if (messageInstance) {
+    messageInstance.close();
+  }
+  messageInstance = Message(options);
+};
+["error", "success", "info", "warning"].forEach((type) => {
+  resetMessage[type] = (options) => {
+    if (typeof options === "string") {
+      options = {
+        message: options,
+      };
+    }
+    options.type = type;
+    return resetMessage(options);
+  };
+});
+export const message = resetMessage;

src/main.js

@@ -6,6 +6,9 @@ import store from "./store";
 //引入element-ui
 import ElementUI from "element-ui";
 import "element-ui/lib/theme-chalk/index.css";
+
+import { message } from "./components/message.js";
+Vue.prototype.$message = message;
 Vue.use(ElementUI, {
   size: "small",
 });
@@ -48,6 +51,19 @@ new Vue({
   render: (h) => h(App),
 }).$mount("#app");
 
+Vue.directive("debounce", {
+  inserted(el, binding, vnode) {
+    let timer = {};
+    el.addEventListener("click", () => {
+      if (timer) {
+        clearTimeout(timer);
+      }
+      timer = setTimeout(() => {
+        binding.value();
+      }, 2000);
+    });
+  },
+});
 //使用钩子函数对路由进行权限跳转
 router.beforeEach((to, from, next) => {
   document.title = `${to.meta.title} | 视频监控可视化平台`;

src/utils/api/index.js

@@ -42,7 +42,9 @@ export function getDeviceList(data) {
     url: "/api/getTerminalStatus",
     method: "post",
     data,
-    headers:{ 'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8' }
+    headers: {
+      "Content-Type": "application/x-www-form-urlencoded;charset=UTF-8",
+    },
   });
 }
 //获取最新装置信息
@@ -301,7 +303,9 @@ export function resetTerminalApi(data) {
     url: "/api/resetTerminal",
     method: "post",
     data,
-    headers:{ 'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8' }
+    headers: {
+      "Content-Type": "application/x-www-form-urlencoded;charset=UTF-8",
+    },
   });
 }
 

src/views/realTimeMonitor/components/infoDialog.vue

@@ -52,7 +52,7 @@
   </el-dialog>
 </template>
 <script>
-import { getTerminalInfoJoggle } from "@/utils/api/index";
+import { getDeviceList, getNewDeviceList } from "@/utils/api/index";
 export default {
   props: {
     title: String,
@@ -66,9 +66,7 @@ export default {
       queryTime: "", //请求时间
     };
   },
-  created() {
+  mounted() {},
-    // console.log("aaaaa");
-  },
   methods: {
     //获取第一次数据
     getListData(val) {
@@ -78,6 +76,7 @@ export default {
         .then((res) => {
           this.infornr = res.data;
           this.queryTime = res.data.queryTime;
+          console.log(this.queryTime);
           this.timer = window.setInterval(() => {
             this.getNewListData(val);
           }, 10000);
@@ -104,9 +103,6 @@ export default {
     },
     display() {
       this.isShow = true;
-      getTerminalInfoJoggle()
-        .then(() => {})
-        .catch((err) => {});
     },
     hide() {
       this.isShow = false;

src/views/realTimeMonitor/index.vue

@@ -80,14 +80,14 @@
               <el-button type="primary" @click.native.stop="handleSetSchedule()"
                 >时间表设置</el-button
               >
-              <el-button type="primary" @click="handleShowPic"
+              <el-button type="primary" v-debounce="handleShowPic"
                 >手动拍照</el-button
               >
 
               <!-- <el-button type="primary" @click="handleShowPic"
                 >手动拍视频</el-button
               > -->
-              <el-button type="primary" @click="handleShowGPS"
+              <el-button type="primary" v-debounce="handleShowGPS"
                 >获取GPS位置</el-button
               >
               <el-button type="primary" @click="handleShowInfo">
@@ -106,7 +106,7 @@
                   <el-dropdown-item command="close">关闭GPS</el-dropdown-item>
                 </el-dropdown-menu>
               </el-dropdown>
-              <el-button type="primary" @click="handleShowErr"
+              <el-button type="primary" v-debounce="handleShowErr"
                 >声光报警</el-button
               >
               <!-- <el-button type="primary" @click="handlehistoryPic"
@@ -418,6 +418,7 @@ export default {
           this.newPicData = res.data;
           console.log(this.newPicData);
           console.log(this.newTermId);
+
           this.timer = window.setInterval(() => {
             this.newPicApi();
             this.i++;
@@ -448,6 +449,7 @@ export default {
           console.log("返回最新图片");
           this.i = 0;
         } else if (res.data == false && this.i > 10) {
+          this.i = 0;
           clearInterval(this.timer);
           this.timer = null;
           this.$message({