From d2249ca1d04d7b82b1232eae050c4743a1083bea Mon Sep 17 00:00:00 2001
From: fanluyan <754122931@qq.com>
Date: Mon, 13 Nov 2023 16:55:22 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0tags=E7=BC=93=E5=AD=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                             |  63 ++++++-
 src/components/Home.vue                 |  20 +-
 src/components/LayoutTabs.vue           | 234 ++++++++++++++++++++++++
 src/components/Sidebar.vue              |   8 +-
 src/router/index.js                     | 107 +++++------
 src/store/cache.js                      |  57 ++++++
 src/store/index.js                      |   8 +-
 src/utils/event-bus.js                  |   4 +
 src/views/alarmHandling/index.vue       |   1 +
 src/views/cameraChannel/index.vue       |   1 +
 src/views/devicePhotoSchedule/index.vue |   1 +
 src/views/homePage/index.vue            |   8 +-
 src/views/lineInformation/index.vue     |   1 +
 src/views/photographicDevice/index.vue  |   1 +
 src/views/pictureRotation/index.vue     |   1 +
 src/views/realTimeMonitor/index.vue     |   1 +
 src/views/realTimeSearch/index.vue      |   1 +
 src/views/system/globalTools/index.vue  |  71 +------
 src/views/system/userManagement.vue     |   1 +
 src/views/towerInformation/index.vue    |   1 +
 src/views/waterMark/index.vue           |   2 +-
 21 files changed, 438 insertions(+), 154 deletions(-)
 create mode 100644 src/components/LayoutTabs.vue
 create mode 100644 src/store/cache.js
 create mode 100644 src/utils/event-bus.js

diff --git a/src/App.vue b/src/App.vue
index ea346eb..d090084 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,10 +1,63 @@
 <template>
   <div id="app">
-    <router-view />
+    <router-view></router-view>
   </div>
 </template>
 
-<style lang="less">
-#app {
-}
-</style>
+<script>
+import { mapActions } from "vuex";
+
+export default {
+  name: "App",
+  methods: {
+    ...mapActions("cache", ["addCache", "removeCache"]),
+    // 收集缓存（通过监听）
+    collectCaches() {
+      // 收集当前路由相关的缓存
+      this.$route.matched.forEach((routeMatch) => {
+        const instance = routeMatch.components?.default;
+        const componentName = instance?.name;
+
+        console.log(componentName);
+        if (process.env.NODE_ENV === "development") {
+          this.checkRouteComponentName(componentName, instance?.__file);
+        }
+
+        // 配置了meta.keepAlive的路由组件添加到缓存
+        if (routeMatch.meta.keepAlive) {
+          if (!componentName) {
+            console.warn(`${routeMatch.path} 路由的组件名称name为空`);
+            return;
+          }
+          this.addCache(componentName);
+        } else {
+          this.removeCache(componentName);
+        }
+      });
+    },
+    // 检测路由组件名称是否重复（组件重名会缓存到不该缓存的组件，而且不容易排查问题，所以开发环境时检测重名）
+    checkRouteComponentName(name, file) {
+      if (!this.cmpNames) this.cmpNames = {};
+      if (this.cmpNames[name]) {
+        if (this.cmpNames[name] !== file) {
+          console.warn(
+            `${file} 与${this.cmpNames[name]} 组件名称重复： ${name}`
+          );
+        }
+      } else {
+        this.cmpNames[name] = file;
+      }
+    },
+  },
+  watch: {
+    "$route.path": {
+      immediate: true,
+      handler() {
+        this.collectCaches();
+      },
+    },
+  },
+};
+</script>
+
+<style lang="less"></style>
diff --git a/src/components/Home.vue b/src/components/Home.vue
index 51027c4..0b3d945 100644
--- a/src/components/Home.vue
+++ b/src/components/Home.vue
@@ -1,11 +1,15 @@
 <template>
   <div class="wrapper">
     <v-head></v-head>
+    <layout-tabs></layout-tabs>
+
     <div class="content-box">
       <div class="content">
-        <transition name="move" mode="out-in">
-          <router-view></router-view>
-        </transition>
+        <!-- <transition name="move" mode="out-in"> -->
+        <keep-alive :include="caches">
+          <router-view v-if="isRenderTab"></router-view>
+        </keep-alive>
+        <!-- </transition> -->
       </div>
     </div>
   </div>
@@ -13,13 +17,19 @@
 
 <script>
 import vHead from "./header.vue";
-
+import LayoutTabs from "./LayoutTabs.vue";
+import { mapState } from "vuex";
 export default {
   data() {
     return {};
   },
   components: {
     vHead,
+    LayoutTabs,
+  },
+  computed: {
+    ...mapState("cache", ["caches"]),
+    ...mapState(["isRenderTab"]),
   },
   created() {},
 };
@@ -31,7 +41,7 @@ export default {
     position: absolute;
     left: 0px;
     right: 0;
-    top: 56px;
+    top: 92px;
     bottom: 0;
     //padding-bottom: 30px;
     -webkit-transition: left 0.3s ease-in-out;
diff --git a/src/components/LayoutTabs.vue b/src/components/LayoutTabs.vue
new file mode 100644
index 0000000..4aec1bc
--- /dev/null
+++ b/src/components/LayoutTabs.vue
@@ -0,0 +1,234 @@
+<template>
+  <div class="layout-tabs">
+    <el-tabs
+      type="border-card"
+      v-model="curTabKey"
+      closable
+      @tab-click="clickTab"
+      @tab-remove="removeTab"
+    >
+      <el-tab-pane
+        v-for="item in tabs"
+        :label="item.title"
+        :name="item.tabKey"
+        :key="item.tabKey"
+      >
+        <template slot="label"
+          >{{ item.title }}
+          <i
+            v-if="curTabKey === item.tabKey"
+            class="el-icon-refresh"
+            @click="refreshTab(item)"
+          ></i
+        ></template>
+      </el-tab-pane>
+    </el-tabs>
+    <div class="close-tabs" @click="closeOtherTabs">关闭其他</div>
+  </div>
+</template>
+
+<script>
+import { mapMutations, mapActions } from "vuex";
+import EventBus from "@/utils/event-bus";
+
+export default {
+  name: "LayoutTabs",
+  props: {
+    // 【根据项目修改】tab页面在路由的第几层，或者说第几层的 router-view 组件（当前项目为第二层）
+    tabRouteViewDepth: {
+      type: Number,
+      default: 2,
+    },
+    // tab页面的key值，从route对象中取，一个key值对应一个tab页面
+    // 默认为matchRoute.path值
+    getTabKey: {
+      type: Function,
+      default: function (routeMatch /* , route */) {
+        return routeMatch.path;
+      },
+    },
+    // tab页签的标题，默认从路由meta.title中获取
+    tabTitleKey: {
+      type: String,
+      default: "title",
+    },
+  },
+  data() {
+    return {
+      tabs: [],
+      curTabKey: "",
+    };
+  },
+  methods: {
+    ...mapActions("cache", ["addCache", "removeCache", "removeCacheEntry"]),
+    ...mapMutations(["setIsRenderTab"]),
+    // 切换tab
+    changeCurTab() {
+      // 当前路由信息
+      const { path, query, params, hash, matched } = this.$route;
+      // tab标签页路由信息：meta、componentName
+      const routeMatch = matched[this.tabRouteViewDepth - 1];
+      const meta = routeMatch.meta;
+      const componentName = routeMatch.components?.default?.name;
+      // 获取tab标签页信息：tabKey标签页key值；title-标签页标题；tab-存在的标签页
+      const tabKey = this.getTabKey(routeMatch, this.$route);
+      const title = String(meta[this.tabTitleKey] || "");
+      const tab = this.tabs.find((tab) => tab.tabKey === tabKey);
+
+      if (!tabKey) {
+        // tabKey默认为路由的name值
+        console.warn(
+          `LayoutTabs组件：${path} 路由没有匹配的tab标签页，如有需要请配置tab标签页的key值`
+        );
+        return;
+      }
+
+      // 同一个路由，但是新旧路径不同时，需要清除路由缓存。例如route.path配置为 '/detail/:id'时路径会不同
+      // 这里判断 props.tabRouteViewDepth === matched.length 必须是跟tab同级路由，否则会影响多级路由缓存
+      if (
+        tab &&
+        tab.path !== path &&
+        this.tabRouteViewDepth === matched.length
+      ) {
+        this.removeCacheEntry(componentName || "");
+        tab.title = "";
+      }
+
+      const newTab = {
+        tabKey,
+        title: tab?.title || title,
+        path,
+        params,
+        query,
+        hash,
+        componentName,
+      };
+      tab ? Object.assign(tab, newTab) : this.tabs.push(newTab);
+      this.curTabKey = tabKey;
+    },
+    // 点击tab
+    clickTab(pane) {
+      if (!pane.index) return;
+
+      const tab = this.tabs[Number(pane.index)];
+      if (tab.path !== this.$route.path) {
+        this.gotoTab(tab);
+      }
+    },
+    // 移除tab
+    async removeTab(tabKey) {
+      // 剩下一个时不能删
+      if (this.tabs.length === 1) return;
+
+      const index = this.tabs.findIndex((tab) => tab.tabKey === tabKey);
+      if (index < -1) return;
+
+      const tab = this.tabs[index];
+      this.tabs.splice(index, 1);
+
+      // 如果删除的是当前tab，则切换到最后一个tab
+      if (tab.tabKey === this.curTabKey) {
+        const lastTab = this.tabs[this.tabs.length - 1];
+        lastTab && this.gotoTab(lastTab);
+      }
+      this.removeCache(tab.componentName || "");
+    },
+    // 跳转tab页面
+    async gotoTab(tab) {
+      await this.$router.push({
+        path: tab.path,
+        query: tab.query,
+        hash: tab.hash,
+      });
+    },
+    // 关闭非当前页的所有tab页签
+    closeOtherTabs() {
+      this.tabs
+        .filter((tab) => tab.tabKey !== this.curTabKey)
+        .forEach((tab) => {
+          this.removeCache(tab.componentName || "");
+        });
+      this.tabs = this.tabs.filter((tab) => tab.tabKey === this.curTabKey);
+    },
+    // 刷新当前tab页面
+    async refreshTab(tab) {
+      this.setIsRenderTab(false);
+      await this.removeCacheEntry(tab.componentName);
+      this.setIsRenderTab(true);
+    },
+    // 关闭tab页面，默认关闭当前页
+    async closeLayoutTab(tabKey = this.curTabKey) {
+      const index = this.tabs.findIndex((tab) => tab.tabKey === tabKey);
+      if (index > -1) {
+        this.removeCache(this.tabs[index].componentName);
+        this.tabs.splice(index, 1);
+      }
+    },
+    // 设置当前tab的标题
+    setCurTabTitle(title) {
+      const curTab = this.tabs.find((tab) => tab.tabKey === this.curTabKey);
+      if (curTab) {
+        curTab.title = title;
+      }
+    },
+  },
+  watch: {
+    "$route.path": {
+      handler() {
+        this.changeCurTab();
+      },
+      immediate: true,
+    },
+  },
+  created() {
+    // 对外提供的事件：关闭弹窗；设置tab标题
+    EventBus.$on("LayoutTabs:closeTab", (tabKey) => {
+      this.closeLayoutTab(tabKey);
+    });
+    EventBus.$on("LayoutTabs:setTabTitle", (title) => {
+      this.setCurTabTitle(title);
+    });
+  },
+};
+</script>
+
+<style lang="less">
+.layout-tabs {
+  position: relative;
+  height: 32px;
+  line-height: 32px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background-color: #f5f7fa;
+  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.12), 0 0 6px 0 rgba(0, 0, 0, 0.04);
+  //background-color: #fcc;
+  .close-tabs {
+    padding-right: 12px;
+    cursor: pointer;
+    color: #999;
+    height: 32px;
+    line-height: 32px;
+    font-size: 12px;
+    &:hover {
+      color: #169e8c;
+    }
+  }
+  .el-tabs--border-card {
+    height: 30px;
+    flex: 1;
+    margin-right: 12px;
+    border: 1px solid #dcdfe6;
+    box-shadow: none;
+  }
+
+  .el-tabs__item {
+    height: 30px;
+    line-height: 30px;
+    font-size: 12px;
+  }
+  .el-tabs__content {
+    display: none;
+  }
+}
+</style>
diff --git a/src/components/Sidebar.vue b/src/components/Sidebar.vue
index 8ea5b1c..30607fe 100644
--- a/src/components/Sidebar.vue
+++ b/src/components/Sidebar.vue
@@ -106,10 +106,10 @@ export default {
               index: "/devicePhotoSchedule",
               title: "拍照时间表设置",
             },
-            {
-              index: "/deviceReport",
-              title: "装置报表",
-            },
+            // {
+            //   index: "/deviceReport",
+            //   title: "装置报表",
+            // },
             {
               index: "/waterMark",
               title: "水印下发",
diff --git a/src/router/index.js b/src/router/index.js
index 11a62df..be6169b 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -8,135 +8,116 @@ const routes = [
   {
     path: "/stritl",
     component: () => import("../components/Home.vue"),
-    meta: { title: "首页" },
     children: [
       {
-        path: "/stritl",
-        component: () =>
-          import(
-            /* webpackChunkName: "dashboard" */ "../views/homePage/index.vue"
-          ),
+        path: "",
+        component: () => import("../views/homePage/index.vue"),
+        name: "home",
         meta: {
           title: "首页",
           icon: "el-icon-s-home",
+          // keepAlive: true,
         },
       },
       {
         path: "/realTimeMonitor",
-        component: () =>
-          import(
-            /* webpackChunkName: "home" */ "../views/realTimeMonitor/index.vue"
-          ),
+        component: () => import("../views/realTimeMonitor/index.vue"),
+        name: "realTimeMonitor",
         meta: {
           title: "实时监控",
           permission: true,
           icon: "el-icon-camera",
+          keepAlive: true,
         },
       },
       {
         path: "/pictureRotation",
-        component: () =>
-          import(
-            /* webpackChunkName: "home" */ "../views/pictureRotation/index.vue"
-          ),
+        component: () => import("../views/pictureRotation/index.vue"),
+        name: "pictureRotation",
         meta: {
           title: "图片轮巡",
           permission: true,
           icon: "el-icon-camera",
+          keepAlive: true,
         },
       },
       {
         path: "/realTimeSearch",
-        component: () =>
-          import(
-            /* webpackChunkName: "home" */ "../views/realTimeSearch/index.vue"
-          ),
+
+        component: () => import("../views/realTimeSearch/index.vue"),
+        name: "realTimeSearch",
         meta: {
           title: "历史图片",
           permission: true,
           icon: "el-icon-camera",
+          keepAlive: true,
         },
       },
       {
         path: "/photoAlarm",
-        component: () =>
-          import(
-            /* webpackChunkName: "home" */ "../views/alarmHandling/index.vue"
-          ),
+        component: () => import("../views/alarmHandling/index.vue"),
+        name: "alarmHandling",
         meta: {
           title: "告警处理",
           permission: true,
           icon: "el-icon-camera",
+          keepAlive: true,
         },
       },
 
       {
         path: "/userManagement",
-        component: () =>
-          import(
-            /* webpackChunkName: "tabs" */ "../views/system/userManagement.vue"
-          ),
-        meta: { title: "用户管理", icon: "el-icon-monitor" },
+        component: () => import("../views/system/userManagement.vue"),
+        name: "userManagement",
+        meta: { title: "用户管理", icon: "el-icon-monitor", keepAlive: true },
       },
       {
         path: "/globalTools",
-        component: () =>
-          import(
-            /* webpackChunkName: "tabs" */ "../views/system/globalTools/index.vue"
-          ),
-        meta: { title: "全局设置" },
+        component: () => import("../views/system/globalTools/index.vue"),
+        name: "globalTools",
+        meta: { title: "全局设置", keepAlive: true },
       },
       {
         path: "/lineInformation",
-        component: () =>
-          import(
-            /* webpackChunkName: "tabs" */ "../views/lineInformation/index.vue"
-          ),
-        meta: { title: "线路信息管理", icon: "" },
+        component: () => import("../views/lineInformation/index.vue"),
+        name: "lineInformation",
+        meta: { title: "线路信息管理", icon: "", keepAlive: true },
       },
       {
         path: "/towerInformation",
-        component: () =>
-          import(
-            /* webpackChunkName: "tabs" */ "../views/towerInformation/index.vue"
-          ),
-        meta: { title: "杆塔信息管理", icon: "" },
+        component: () => import("../views/towerInformation/index.vue"),
+        name: "towerInformation",
+        meta: { title: "杆塔信息管理", icon: "", keepAlive: true },
       },
       {
         path: "/cameraChannel",
-        component: () =>
-          import(
-            /* webpackChunkName: "tabs" */ "../views/cameraChannel/index.vue"
-          ),
-        meta: { title: "通道管理", icon: "" },
+        component: () => import("../views/cameraChannel/index.vue"),
+        name: "cameraChannel",
+        meta: { title: "通道管理", icon: "", keepAlive: true },
       },
       {
         path: "/photographicDevice",
-        component: () =>
-          import(
-            /* webpackChunkName: "tabs" */ "../views/photographicDevice/index.vue"
-          ),
-        meta: { title: "拍照装置管理", icon: "" },
+        component: () => import("../views/photographicDevice/index.vue"),
+        name: "photographicDevice",
+        meta: { title: "拍照装置管理", icon: "", keepAlive: true },
       },
       {
         path: "/devicePhotoSchedule",
-        component: () =>
-          import(
-            /* webpackChunkName: "tabs" */ "../views/devicePhotoSchedule/index.vue"
-          ),
-        meta: { title: "拍照时间表设置", icon: "" },
+        component: () => import("../views/devicePhotoSchedule/index.vue"),
+        name: "devicePhotoSchedule",
+        meta: { title: "拍照时间表设置", icon: "", keepAlive: true },
       },
       {
         path: "/waterMark",
-        component: () =>
-          import(/* webpackChunkName: "tabs" */ "../views/waterMark/index.vue"),
-        meta: { title: "水印下发", icon: "" },
+        component: () => import("../views/waterMark/index.vue"),
+        name: "waterMark",
+        meta: { title: "水印下发", icon: "", keepAlive: true },
       },
       {
         path: "/echarts",
-        component: () =>
-          import(/* webpackChunkName: "tabs" */ "../echartsDemo.vue"),
-        meta: { title: "echarts图表", icon: "" },
+        component: () => import("../echartsDemo.vue"),
+        name: "echartsDemo",
+        meta: { title: "echarts图表", icon: "", keepAlive: true },
       },
     ],
   },
diff --git a/src/store/cache.js b/src/store/cache.js
new file mode 100644
index 0000000..30f742f
--- /dev/null
+++ b/src/store/cache.js
@@ -0,0 +1,57 @@
+import Vue from "vue";
+
+export default {
+  namespaced: true,
+  state: {
+    caches: [],
+  },
+  actions: {
+    // 添加缓存的路由组件
+    addCache({ state, dispatch }, componentName) {
+      if (Array.isArray(componentName)) {
+        componentName.forEach((item) => {
+          dispatch("addCache", item);
+        });
+        return;
+      }
+
+      const { caches } = state;
+      if (!componentName || caches.includes(componentName)) return;
+
+      caches.push(componentName);
+      console.log("缓存路由组件：", componentName);
+    },
+
+    // 移除缓存的路由组件
+    removeCache({ state, dispatch }, componentName) {
+      if (Array.isArray(componentName)) {
+        componentName.forEach((item) => {
+          dispatch("removeCache", item);
+        });
+        return;
+      }
+
+      const { caches } = state;
+      const index = caches.indexOf(componentName);
+      if (index > -1) {
+        console.log("清除缓存的路由组件：", componentName);
+        return caches.splice(index, 1)[0];
+      }
+    },
+    // 移除缓存的路由组件的实例
+    async removeCacheEntry({ dispatch }, componentName) {
+      const cacheRemoved = await dispatch("removeCache", componentName);
+      if (cacheRemoved) {
+        await Vue.nextTick();
+        dispatch("addCache", componentName);
+      }
+    },
+    // 清除缓存的路由组件的实例
+    clearEntry({ state, dispatch }) {
+      const { caches } = state;
+      caches.slice().forEach((key) => {
+        dispatch("removeCacheEntry", key);
+      });
+    },
+  },
+};
diff --git a/src/store/index.js b/src/store/index.js
index 46d5523..7b7c696 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -1,6 +1,6 @@
 import Vue from "vue";
 import Vuex from "vuex";
-
+import cacheModule from "./cache";
 Vue.use(Vuex);
 
 export default new Vuex.Store({
@@ -16,6 +16,7 @@ export default new Vuex.Store({
     protocol: "",
     cmdId: "",
     channelIdList: [],
+    isRenderTab: true,
   },
   getters: {
     token: (state) => state.token,
@@ -73,7 +74,10 @@ export default new Vuex.Store({
     REMOVE_INFO(state) {
       localStorage.clear();
     },
+    setIsRenderTab(state, data) {
+      state.isRenderTab = data;
+    },
   },
   actions: {},
-  modules: {},
+  modules: { cache: cacheModule },
 });
diff --git a/src/utils/event-bus.js b/src/utils/event-bus.js
new file mode 100644
index 0000000..8e25695
--- /dev/null
+++ b/src/utils/event-bus.js
@@ -0,0 +1,4 @@
+import Vue from 'vue'
+
+const EventBus = new Vue()
+export default EventBus
\ No newline at end of file
diff --git a/src/views/alarmHandling/index.vue b/src/views/alarmHandling/index.vue
index fb2980a..a69386a 100644
--- a/src/views/alarmHandling/index.vue
+++ b/src/views/alarmHandling/index.vue
@@ -364,6 +364,7 @@ import {
 import morePicPreveiw from "../realTimeMonitor/components/morePicPreveiw";
 import moment from "moment";
 export default {
+  name: "alarmHandling",
   components: {
     morePicPreveiw,
   },
diff --git a/src/views/cameraChannel/index.vue b/src/views/cameraChannel/index.vue
index 226a174..7e52140 100644
--- a/src/views/cameraChannel/index.vue
+++ b/src/views/cameraChannel/index.vue
@@ -100,6 +100,7 @@ import addChannelDialog from "./components/addChannelDialog.vue";
 import { getChannelListapi, deleteChannelapi } from "@/utils/api/index";
 
 export default {
+  name: "cameraChannel",
   components: {
     addChannelDialog,
   },
diff --git a/src/views/devicePhotoSchedule/index.vue b/src/views/devicePhotoSchedule/index.vue
index 43362c9..7b686b5 100644
--- a/src/views/devicePhotoSchedule/index.vue
+++ b/src/views/devicePhotoSchedule/index.vue
@@ -96,6 +96,7 @@ import adddeviceDialog from "./components/adddeviceDialog.vue";
 import bdSchedule from "./components/bdSchedule.vue";
 
 export default {
+  name: "devicePhotoSchedule",
   components: {
     adddeviceDialog,
     bdSchedule,
diff --git a/src/views/homePage/index.vue b/src/views/homePage/index.vue
index 5372873..3b0aa52 100644
--- a/src/views/homePage/index.vue
+++ b/src/views/homePage/index.vue
@@ -126,7 +126,7 @@ import {
   getOnlineTerminalListExcel,
 } from "@/utils/api/index";
 export default {
-  name: "",
+  name: "home",
   data() {
     return {
       termDataNum: "", //总数
@@ -477,11 +477,11 @@ export default {
 </script>
 <style lang="less">
 .stritleEchartsPage {
-  height: calc(100% - 32px);
-  padding: 16px;
+  height: calc(100% - 24px);
+  padding: 12px;
   display: flex;
   flex-direction: column;
-  justify-content: space-around;
+  justify-content: space-between;
   .echart-top {
     display: flex;
     height: 48%;
diff --git a/src/views/lineInformation/index.vue b/src/views/lineInformation/index.vue
index f7d2562..df30209 100644
--- a/src/views/lineInformation/index.vue
+++ b/src/views/lineInformation/index.vue
@@ -127,6 +127,7 @@ import { getLineListJoggle, deleteLineJoggle } from "@/utils/api/index";
 import addLineDialog from "./components/addLineDialog.vue";
 import addTowerDialog from "./components/addTowerDialog.vue";
 export default {
+  name: "lineInformation",
   components: {
     addLineDialog,
     addTowerDialog,
diff --git a/src/views/photographicDevice/index.vue b/src/views/photographicDevice/index.vue
index fe24f73..a833b8a 100644
--- a/src/views/photographicDevice/index.vue
+++ b/src/views/photographicDevice/index.vue
@@ -339,6 +339,7 @@ import gpsSite from "./components/gpsSite.vue";
 import addLineDialog from "./components/addLineDialog.vue";
 import towerDialog from "./components/towerDialog.vue";
 export default {
+  name: "photographicDevice",
   components: {
     addPhotoDialog,
     pictureTags,
diff --git a/src/views/pictureRotation/index.vue b/src/views/pictureRotation/index.vue
index 8ef38c0..d671e5f 100644
--- a/src/views/pictureRotation/index.vue
+++ b/src/views/pictureRotation/index.vue
@@ -163,6 +163,7 @@ import { getPictureList, getTerminalPhotoListJoggle } from "@/utils/api/index";
 import morePicPreveiw from "../realTimeMonitor/components/morePicPreveiw";
 import defaultImage from "../../assets/img/nodatapic2.jpg";
 export default {
+  name: "pictureRotation",
   components: {
     morePicPreveiw,
   },
diff --git a/src/views/realTimeMonitor/index.vue b/src/views/realTimeMonitor/index.vue
index 0643f2e..b0aa145 100644
--- a/src/views/realTimeMonitor/index.vue
+++ b/src/views/realTimeMonitor/index.vue
@@ -40,6 +40,7 @@ import morePicPreveiw from "./components/morePicPreveiw";
 
 import { mapGetters, mapState } from "vuex";
 export default {
+  name: "realTimeMonitor",
   data() {
     return {
       LineFlag: false, //如果是线路显示
diff --git a/src/views/realTimeSearch/index.vue b/src/views/realTimeSearch/index.vue
index 1f7e079..14b0106 100644
--- a/src/views/realTimeSearch/index.vue
+++ b/src/views/realTimeSearch/index.vue
@@ -206,6 +206,7 @@
 import { getSearchInfo, getRealtimePhoto } from "@/utils/api/index";
 import defaultImage from "../../assets/img/nodatapic2.jpg";
 export default {
+  name: "realTimeSearch",
   data() {
     return {
       pickerOptions: {
diff --git a/src/views/system/globalTools/index.vue b/src/views/system/globalTools/index.vue
index d8af5b8..41d8258 100644
--- a/src/views/system/globalTools/index.vue
+++ b/src/views/system/globalTools/index.vue
@@ -50,9 +50,6 @@
         >
       </el-card>
     </div>
-    <div class="" v-for="item in infoMl">
-      {{ item }}
-    </div>
   </div>
 </template>
 <script>
@@ -65,6 +62,7 @@ import {
 } from "@/utils/api/index";
 
 export default {
+  name: "globalTools",
   components: {},
   data() {
     return {
@@ -73,47 +71,11 @@ export default {
       probList: [],
       tdOptions: [{ id: -1, name: "全部", alias: null }], //通道数据
       channel: "",
-      infoMl: [],
-      tongdao: ["1", "2", "3", "4"],
-      cmdidArr: [
-        "12M10010107139801",
-        "12M10010107139802",
-        "12M10010107139803",
-        "12M10010107139804",
-        "12M10010107139805",
-        "12M10010107139806",
-        "12M10010107139807",
-        "12M10010107139808",
-        "12M10010107139809",
-      ],
-      leftWater: [
-        "欣影-2023-10-08",
-        "欣影-2023-10-08",
-        "欣影-2023-10-08",
-        "欣影-2023-10-08",
-        "欣影-2023-10-08",
-        "欣影-2023-10-08",
-        "欣影-2023-10-08",
-        "欣影-2023-10-08",
-        "欣影-2023-10-08",
-      ],
-      rightWater: [
-        "安庆- 输电运检一班-220kV文邓4C70线#052大号侧",
-        "安庆- 输电运检一班-220kV文邓4C70线#053大号侧",
-        "安庆- 输电运检一班-220kV文邓4C70线#053大号侧",
-        "安庆- 输电运检一班-220kV文邓4C70线#053大号侧",
-        "安庆- 输电运检一班-220kV文邓4C70线#053大号侧",
-        "安庆- 输电运检一班-220kV文邓4C70线#053大号侧",
-        "安庆- 输电运检一班-220kV文邓4C70线#053大号侧",
-        "安庆- 输电运检一班-220kV文邓4C70线#053大号侧",
-        "安庆- 输电运检一班-220kV文邓4C70线#053大号侧",
-      ],
     };
   },
   created() {
     this.getalarmList();
     this.getmark();
-    this.getWater();
   },
   methods: {
     //获取图片绘制状态
@@ -195,37 +157,6 @@ export default {
           console.log(err);
         });
     },
-    getWater() {
-      for (let j = 0; j < this.tongdao.length; j++) {
-        for (let i = 0; i < this.cmdidArr.length; i++) {
-          // console.log(this.cmdidArr[i]);
-          // console.log(this.leftWater[i]);
-          // console.log(this.rightWater[i]);
-          var a =
-            "/usr/local/bin/xympadmn --server=127.0.0.1 --port=6891 --act=osd --cmdid=" +
-            this.cmdidArr[i] +
-            " --flag=1 --channel=" +
-            this.tongdao[j] +
-            ' --leftBottom="' +
-            this.leftWater[i] +
-            '" --rightBottom="' +
-            this.rightWater[i] +
-            '" --clientid=5 --reqid=TS; sleep 0.5';
-          this.infoMl.push(a);
-          console.log(
-            "/usr/local/bin/xympadmn --server=127.0.0.1 --port=6891 --act=osd --cmdid=" +
-              this.cmdidArr[i] +
-              " --flag=1 --channel=" +
-              this.tongdao[j] +
-              '" --leftBottom="' +
-              this.leftWater[i] +
-              '" --rightBottom="' +
-              this.rightWater[i] +
-              '" --clientid=5 --reqid=TS; sleep 0.5'
-          );
-        }
-      }
-    },
   },
 };
 </script>
diff --git a/src/views/system/userManagement.vue b/src/views/system/userManagement.vue
index 2f48de0..3c9545c 100644
--- a/src/views/system/userManagement.vue
+++ b/src/views/system/userManagement.vue
@@ -81,6 +81,7 @@ import addUser from "./components/addUser.vue";
 import { getUserList, delUserApi } from "@/utils/api/index";
 
 export default {
+  name: "userManagement",
   components: {
     addUser,
   },
diff --git a/src/views/towerInformation/index.vue b/src/views/towerInformation/index.vue
index c2a3e11..b0e9439 100644
--- a/src/views/towerInformation/index.vue
+++ b/src/views/towerInformation/index.vue
@@ -163,6 +163,7 @@ import { getTowerListApi, delTowerApi, getSearchInfo } from "@/utils/api/index";
 import addDialog from "./components/addDialog.vue";
 
 export default {
+  name: "towerInformation",
   components: {
     addDialog,
   },
diff --git a/src/views/waterMark/index.vue b/src/views/waterMark/index.vue
index 0f8d731..06d284f 100644
--- a/src/views/waterMark/index.vue
+++ b/src/views/waterMark/index.vue
@@ -63,7 +63,7 @@
 </template>
 <script>
 export default {
-  components: {},
+  name: "waterMark",
   data() {
     return {
       channelList: [