From 3beb3b2344ddde14e4bf2f51d8e0ae1573d43b42 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BB=BB=E7=8F=AE=E5=AE=87?= <peiyu_ren@163.com>
Date: Fri, 8 Dec 2023 17:46:11 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BA=8C=E7=BA=A7=E8=8F=9C=E5=8D=95=E7=9A=84?=
 =?UTF-8?q?=E6=A0=B7=E5=BC=8F=E8=B0=83=E6=95=B4=20Analysis=20Monitor=20?=
 =?UTF-8?q?=E6=A8=A1=E5=9D=97=E8=A1=A8=E6=A0=BC=E4=BA=8B=E4=BB=B6=E8=B0=83?=
 =?UTF-8?q?=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/page/GlobalLayout.vue          | 1392 ++++++++---------
 .../analysisMonitor/alarmHistory/index.vue    |  252 +--
 2 files changed, 842 insertions(+), 802 deletions(-)

diff --git a/src/components/page/GlobalLayout.vue b/src/components/page/GlobalLayout.vue
index c3614e7..ecba22e 100644
--- a/src/components/page/GlobalLayout.vue
+++ b/src/components/page/GlobalLayout.vue
@@ -2,7 +2,8 @@
   <a-layout class="layout" :class="[device]">
     <a-layout
       :class="[layoutMode, `content-width-${contentWidth}`]"
-      :style="{ paddingLeft: fixSiderbar && isDesktop() ? `${sidebarOpened ? 200 : 80}px` : '0' }">
+      :style="{ paddingLeft: fixSiderbar && isDesktop() ? `${sidebarOpened ? 200 : 80}px` : '0' }"
+    >
       <!-- layout header -->
       <global-header
         :mode="layoutMode"
@@ -15,27 +16,27 @@
       />
       <div class="global-content">
         <div class="content-top-border">
-          <img src="@/assets/images/content/top.png" alt="">
+          <img src="@/assets/images/content/top.png" alt="" />
         </div>
         <div class="content-main">
           <div class="content-left-border">
-            <img src="@/assets/images/content/left.png" alt="">
+            <img src="@/assets/images/content/left.png" alt="" />
           </div>
           <!-- layout content -->
           <a-layout-content>
             <div class="sub-menus" v-if="currentChildrenMenus && currentChildrenMenus.length">
               <s-menu :menu="currentChildrenMenus" mode="horizontal" theme="light"></s-menu>
             </div>
-            <div class="real-content" :class="currentChildrenMenus.length? 'has-submenu': ''">
+            <div class="real-content" :class="currentChildrenMenus.length ? 'has-submenu' : ''">
               <slot></slot>
             </div>
           </a-layout-content>
           <div class="content-right-border">
-            <img src="@/assets/images/content/left.png" alt="">
+            <img src="@/assets/images/content/left.png" alt="" />
           </div>
         </div>
         <div class="content-bottom-border">
-          <img src="@/assets/images/content/bottom.png" alt="">
+          <img src="@/assets/images/content/bottom.png" alt="" />
         </div>
       </div>
     </a-layout>
@@ -47,293 +48,306 @@
 </template>
 
 <script>
-  import SideMenu from '@/components/menu/SideMenu'
-  import GlobalHeader from '@/components/page/GlobalHeader'
-  import GlobalFooter from '@/components/page/GlobalFooter'
-  import { triggerWindowResizeEvent } from '@/utils/util'
-  import { mapActions, mapState } from 'vuex'
-  import { mixin, mixinDevice } from '@/utils/mixin.js'
-  import SMenu from '../menu/index'
-  // update-start---- author:os_chengtgen -- date:20190830 --  for:issues/463 -编译主题颜色已生效，但还一直转圈，显示主题 正在编译 ------
-  // import SettingDrawer from '@/components/setting/SettingDrawer'
-  // 注释这个因为在个人设置模块已经加载了SettingDrawer页面
-  // update-end ---- author:os_chengtgen -- date:20190830 --  for:issues/463 -编译主题颜色已生效，但还一直转圈，显示主题 正在编译 ------
-
-  export default {
-    name: 'GlobalLayout',
-    components: {
-      SideMenu,
-      GlobalHeader,
-      GlobalFooter,
-      SMenu
-      // update-start---- author:os_chengtgen -- date:20190830 --  for:issues/463 -编译主题颜色已生效，但还一直转圈，显示主题 正在编译 ------
-      // // SettingDrawer
-      // 注释这个因为在个人设置模块已经加载了SettingDrawer页面
-      // update-end ---- author:os_chengtgen -- date:20190830 --  for:issues/463 -编译主题颜色已生效，但还一直转圈，显示主题 正在编译 ------
-
-    },
-    mixins: [mixin, mixinDevice],
-    data() {
-      return {
-        collapsed: false,
-        activeMenu:{},
-        menus: []
-      }
-    },
-    computed: {
-      ...mapState({
-        // 主路由
-        mainRouters: state => state.permission.addRouters,
-        // 后台菜单
-        permissionMenuList: state => state.user.permissionList
-      }),
-
-      // 当前页面子路由
-      currentChildrenMenus () {
-        const hasSubmenuPathList = ['/isystem', '/system'] // 需要显示二级菜单的路由列表（仅需一级菜单路由）
-        const hasSubMenu = hasSubmenuPathList.some(item => this.$route.path.indexOf(item) == 0)
-        return hasSubMenu? this.findSubMenus(this.$route.name): []
-      }
-    },
-    watch: {
-      sidebarOpened(val) {
-        this.collapsed = !val
-      }
-    },
-    created() {
-      //--update-begin----author:scott---date:20190320------for:根据后台菜单配置，判断是否路由菜单字段，动态选择是否生成路由（为了支持参数URL菜单）------
-      //this.menus = this.mainRouters.find((item) => item.path === '/').children;
-      this.menus = this.permissionMenuList
-      
-      //--update-begin----author:liusq---date:20210223------for:关于测边菜单遮挡内容问题详细说明 #2255
-      this.collapsed=!this.sidebarOpened;
-      //--update-begin----author:liusq---date:20210223------for:关于测边菜单遮挡内容问题详细说明 #2255
-  
-      // 根据后台配置菜单，重新排序加载路由信息
-      //console.log('----加载菜单逻辑----')
-      //console.log(this.mainRouters)
-      //console.log(this.permissionMenuList)
-      //console.log('----navTheme------'+this.navTheme)
-      //--update-end----author:scott---date:20190320------for:根据后台菜单配置，判断是否路由菜单字段，动态选择是否生成路由（为了支持参数URL菜单）------
-    },
-    methods: {
-      ...mapActions(['setSidebar']),
-      /**
-       * 根据路由名查找二级路由列表
-       * @param {Array} menus
-       * @param {String} routeName
-       */
-       findSubMenus(routeName) {
-        for (const menu of this.menus) {
-          if (menu.children) {
-            const find = menu.children.find(child => child.name === routeName || child.children && child.children.find(item => item.name === routeName))
-            if (find) {
-              return menu.children
-            }
-          }
-        }
-        return []
-      },
-      toggle() {
-        this.collapsed = !this.collapsed
-        this.setSidebar(!this.collapsed)
-        triggerWindowResizeEvent()
-      },
-      menuSelect() {
-        if (!this.isDesktop()) {
-          this.collapsed = false
-        }
-      },
-      //update-begin-author:taoyan date:20190430 for:动态路由title显示配置的菜单title而不是其对应路由的title
-      myMenuSelect(value){
-        //此处触发动态路由被点击事件
-        this.findMenuBykey(this.menus,value.key)
-        this.$emit("dynamicRouterShow",value.key,this.activeMenu.meta.title)
-      },
-      findMenuBykey(menus,key){
-        for(let i of menus){
-          if(i.path==key){
-            this.activeMenu = {...i}
-          }else if(i.children && i.children.length>0){
-            this.findMenuBykey(i.children,key)
-          }
-        }
-      },
-      //update-end-author:taoyan date:20190430 for:动态路由title显示配置的菜单title而不是其对应路由的title
-
-      // update-begin-author:sunjianlei date:20210409 for: 修复动态功能测试菜单、带参数菜单标题错误、展开错误的问题
-      handleUpdateMenuTitle(value) {
-        this.findMenuBykey(this.menus, value.path)
-        this.activeMenu.meta.title = value.meta.title
-        this.$emit('dynamicRouterShow', value.path, this.activeMenu.meta.title)
-      },
-      // update-end-author:sunjianlei date:20210409 for: 修复动态功能测试菜单、带参数菜单标题错误、展开错误的问题
+import SideMenu from '@/components/menu/SideMenu'
+import GlobalHeader from '@/components/page/GlobalHeader'
+import GlobalFooter from '@/components/page/GlobalFooter'
+import { triggerWindowResizeEvent } from '@/utils/util'
+import { mapActions, mapState } from 'vuex'
+import { mixin, mixinDevice } from '@/utils/mixin.js'
+import SMenu from '../menu/index'
+// update-start---- author:os_chengtgen -- date:20190830 --  for:issues/463 -编译主题颜色已生效，但还一直转圈，显示主题 正在编译 ------
+// import SettingDrawer from '@/components/setting/SettingDrawer'
+// 注释这个因为在个人设置模块已经加载了SettingDrawer页面
+// update-end ---- author:os_chengtgen -- date:20190830 --  for:issues/463 -编译主题颜色已生效，但还一直转圈，显示主题 正在编译 ------
 
+export default {
+  name: 'GlobalLayout',
+  components: {
+    SideMenu,
+    GlobalHeader,
+    GlobalFooter,
+    SMenu,
+    // update-start---- author:os_chengtgen -- date:20190830 --  for:issues/463 -编译主题颜色已生效，但还一直转圈，显示主题 正在编译 ------
+    // // SettingDrawer
+    // 注释这个因为在个人设置模块已经加载了SettingDrawer页面
+    // update-end ---- author:os_chengtgen -- date:20190830 --  for:issues/463 -编译主题颜色已生效，但还一直转圈，显示主题 正在编译 ------
+  },
+  mixins: [mixin, mixinDevice],
+  data() {
+    return {
+      collapsed: false,
+      activeMenu: {},
+      menus: [],
     }
-  }
+  },
+  computed: {
+    ...mapState({
+      // 主路由
+      mainRouters: (state) => state.permission.addRouters,
+      // 后台菜单
+      permissionMenuList: (state) => state.user.permissionList,
+    }),
 
+    // 当前页面子路由
+    currentChildrenMenus() {
+      const hasSubmenuPathList = ['/isystem', '/system'] // 需要显示二级菜单的路由列表（仅需一级菜单路由）
+      const hasSubMenu = hasSubmenuPathList.some((item) => this.$route.path.indexOf(item) == 0)
+      return hasSubMenu ? this.findSubMenus(this.$route.name) : []
+    },
+  },
+  watch: {
+    sidebarOpened(val) {
+      this.collapsed = !val
+    },
+  },
+  created() {
+    //--update-begin----author:scott---date:20190320------for:根据后台菜单配置，判断是否路由菜单字段，动态选择是否生成路由（为了支持参数URL菜单）------
+    //this.menus = this.mainRouters.find((item) => item.path === '/').children;
+    this.menus = this.permissionMenuList
+
+    //--update-begin----author:liusq---date:20210223------for:关于测边菜单遮挡内容问题详细说明 #2255
+    this.collapsed = !this.sidebarOpened
+    //--update-begin----author:liusq---date:20210223------for:关于测边菜单遮挡内容问题详细说明 #2255
+
+    // 根据后台配置菜单，重新排序加载路由信息
+    //console.log('----加载菜单逻辑----')
+    //console.log(this.mainRouters)
+    //console.log(this.permissionMenuList)
+    //console.log('----navTheme------'+this.navTheme)
+    //--update-end----author:scott---date:20190320------for:根据后台菜单配置，判断是否路由菜单字段，动态选择是否生成路由（为了支持参数URL菜单）------
+  },
+  methods: {
+    ...mapActions(['setSidebar']),
+    /**
+     * 根据路由名查找二级路由列表
+     * @param {Array} menus
+     * @param {String} routeName
+     */
+    findSubMenus(routeName) {
+      for (const menu of this.menus) {
+        if (menu.children) {
+          const find = menu.children.find(
+            (child) =>
+              child.name === routeName || (child.children && child.children.find((item) => item.name === routeName))
+          )
+          if (find) {
+            return menu.children
+          }
+        }
+      }
+      return []
+    },
+    toggle() {
+      this.collapsed = !this.collapsed
+      this.setSidebar(!this.collapsed)
+      triggerWindowResizeEvent()
+    },
+    menuSelect() {
+      if (!this.isDesktop()) {
+        this.collapsed = false
+      }
+    },
+    //update-begin-author:taoyan date:20190430 for:动态路由title显示配置的菜单title而不是其对应路由的title
+    myMenuSelect(value) {
+      //此处触发动态路由被点击事件
+      this.findMenuBykey(this.menus, value.key)
+      this.$emit('dynamicRouterShow', value.key, this.activeMenu.meta.title)
+    },
+    findMenuBykey(menus, key) {
+      for (let i of menus) {
+        if (i.path == key) {
+          this.activeMenu = { ...i }
+        } else if (i.children && i.children.length > 0) {
+          this.findMenuBykey(i.children, key)
+        }
+      }
+    },
+    //update-end-author:taoyan date:20190430 for:动态路由title显示配置的菜单title而不是其对应路由的title
+
+    // update-begin-author:sunjianlei date:20210409 for: 修复动态功能测试菜单、带参数菜单标题错误、展开错误的问题
+    handleUpdateMenuTitle(value) {
+      this.findMenuBykey(this.menus, value.path)
+      this.activeMenu.meta.title = value.meta.title
+      this.$emit('dynamicRouterShow', value.path, this.activeMenu.meta.title)
+    },
+    // update-end-author:sunjianlei date:20210409 for: 修复动态功能测试菜单、带参数菜单标题错误、展开错误的问题
+  },
+}
 </script>
 
 <style lang="less">
-  body {
-    // 打开滚动条固定显示
-    // 注释原因：issues/I5VK11
-    //overflow-y: scroll;
+body {
+  // 打开滚动条固定显示
+  // 注释原因：issues/I5VK11
+  //overflow-y: scroll;
 
-    &.colorWeak {
-      filter: invert(80%);
-    }
+  &.colorWeak {
+    filter: invert(80%);
   }
+}
 
-  .layout {
-    min-height: 100vh !important;
-    overflow-x: hidden;
+.layout {
+  min-height: 100vh !important;
+  overflow-x: hidden;
 
-    &.mobile {
-
-      .ant-layout-content {
-
-        .content {
-          margin: 24px 0 0;
-        }
+  &.mobile {
+    .ant-layout-content {
+      .content {
+        margin: 24px 0 0;
       }
+    }
 
-      /**
+    /**
        * ant-table-wrapper
        * 覆盖的表格手机模式样式，如果想修改在手机上表格最低宽度，可以在这里改动
        */
-      .ant-table-wrapper {
-        .ant-table-content {
-          overflow-y: auto;
-        }
-        .ant-table-body {
-          // update-begin---author:sunjianlei Date:20220104 for： 【JTC-480】移动端不支持左右拖动，需要注释掉此段代码 ------------
-          //min-width: 800px;
-          // update-end---author:sunjianlei Date:20220104 for： 【JTC-480】移动端不支持左右拖动，需要注释掉此段代码 ------------
-        }
+    .ant-table-wrapper {
+      .ant-table-content {
+        overflow-y: auto;
       }
-      .sidemenu {
-        .ant-header-fixedHeader {
-
-          &.ant-header-side-opened, &.ant-header-side-closed {
-            width: 100%
-          }
-        }
-      }
-
-      .topmenu {
-        /* 必须为 topmenu  才能启用流式布局 */
-        &.content-width-Fluid {
-          .header-index-wide {
-            margin-left: 0;
-          }
-        }
-      }
-      .header, .top-nav-header-index {
-        .user-wrapper .action {
-          padding: 0 12px;
-        }
+      .ant-table-body {
+        // update-begin---author:sunjianlei Date:20220104 for： 【JTC-480】移动端不支持左右拖动，需要注释掉此段代码 ------------
+        //min-width: 800px;
+        // update-end---author:sunjianlei Date:20220104 for： 【JTC-480】移动端不支持左右拖动，需要注释掉此段代码 ------------
       }
     }
-
-    &.ant-layout-has-sider {
-      flex-direction: row;
-    }
-
-    .trigger {
-      font-size: 22px;
-      line-height: 42px;
-      padding: 0 18px;
-      cursor: pointer;
-      transition: color 300ms, background 300ms;
-
-      &:hover {
-        background: rgba(255, 255, 255, 0.3);
+    .sidemenu {
+      .ant-header-fixedHeader {
+        &.ant-header-side-opened,
+        &.ant-header-side-closed {
+          width: 100%;
+        }
       }
     }
 
     .topmenu {
-      .ant-header-fixedHeader {
-        position: fixed;
-        top: 0;
-        right: 0;
-        z-index: 9;
-        width: 100%;
-        transition: width .2s;
-
-        &.ant-header-side-opened {
-          width: 100%;
-        }
-
-        &.ant-header-side-closed {
-          width: 100%;
-        }
-      }
       /* 必须为 topmenu  才能启用流式布局 */
       &.content-width-Fluid {
         .header-index-wide {
-          max-width: unset;
-          margin-left: 24px;
-        }
-
-        .page-header-index-wide {
-          max-width: unset;
+          margin-left: 0;
         }
       }
-
     }
+    .header,
+    .top-nav-header-index {
+      .user-wrapper .action {
+        padding: 0 12px;
+      }
+    }
+  }
 
-    .sidemenu {
-      .ant-header-fixedHeader {
-        position: fixed;
-        top: 0;
-        right: 0;
-        z-index: 9;
+  &.ant-layout-has-sider {
+    flex-direction: row;
+  }
+
+  .trigger {
+    font-size: 22px;
+    line-height: 42px;
+    padding: 0 18px;
+    cursor: pointer;
+    transition: color 300ms, background 300ms;
+
+    &:hover {
+      background: rgba(255, 255, 255, 0.3);
+    }
+  }
+
+  .topmenu {
+    .ant-header-fixedHeader {
+      position: fixed;
+      top: 0;
+      right: 0;
+      z-index: 9;
+      width: 100%;
+      transition: width 0.2s;
+
+      &.ant-header-side-opened {
         width: 100%;
-        transition: width .2s;
+      }
 
-        &.ant-header-side-opened {
-          width: calc(100% - 200px)
+      &.ant-header-side-closed {
+        width: 100%;
+      }
+    }
+    /* 必须为 topmenu  才能启用流式布局 */
+    &.content-width-Fluid {
+      .header-index-wide {
+        max-width: unset;
+        margin-left: 24px;
+      }
+
+      .page-header-index-wide {
+        max-width: unset;
+      }
+    }
+  }
+
+  .sidemenu {
+    .ant-header-fixedHeader {
+      position: fixed;
+      top: 0;
+      right: 0;
+      z-index: 9;
+      width: 100%;
+      transition: width 0.2s;
+
+      &.ant-header-side-opened {
+        width: calc(100% - 200px);
+      }
+
+      &.ant-header-side-closed {
+        width: calc(100% - 80px);
+      }
+    }
+  }
+
+  .header {
+    height: 64px;
+    padding: 0 12px 0 0;
+    background: #fff;
+    box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
+    position: relative;
+  }
+
+  .header,
+  .top-nav-header-index {
+    .user-wrapper {
+      width: 140px;
+      height: 100%;
+      margin-left: 30px;
+      .action {
+        cursor: pointer;
+        padding: 0 10px;
+        display: inline-block;
+        &:hover {
+          background: rgba(255, 255, 255, 0.3);
         }
 
-        &.ant-header-side-closed {
-          width: calc(100% - 80px)
+        .avatar {
+          margin: 20px 10px 20px 0;
+          color: #1890ff;
+          background: hsla(0, 0%, 100%, 0.85);
+          vertical-align: middle;
+        }
+
+        .icon {
+          font-size: 16px;
+          padding: 4px;
+        }
+
+        .anticon {
+          color: inherit;
         }
       }
     }
 
-    .header {
-      height: 64px;
-      padding: 0 12px 0 0;
-      background: #fff;
-      box-shadow: 0 1px 4px rgba(0, 21, 41, .08);
-      position: relative;
-    }
-
-    .header, .top-nav-header-index {
-
+    &.dark {
       .user-wrapper {
-        width: 140px;
-        height: 100%;
-        margin-left: 30px;
         .action {
-          cursor: pointer;
-          padding: 0 10px;
-          display: inline-block;
+          color: black;
+
           &:hover {
-            background: rgba(255, 255, 255, 0.3);
-          }
-
-          .avatar {
-            margin: 20px 10px 20px 0;
-            color: #1890ff;
-            background: hsla(0, 0%, 100%, .85);
-            vertical-align: middle;
-          }
-
-          .icon {
-            font-size: 16px;
-            padding: 4px;
+            background: rgba(0, 0, 0, 0.05);
           }
 
           .anticon {
@@ -341,518 +355,490 @@
           }
         }
       }
-
-      &.dark {
-        .user-wrapper {
-
-          .action {
-            color: black;
-
-            &:hover {
-              background: rgba(0, 0, 0, 0.05);
-            }
-
-            .anticon {
-              color: inherit;
-            }
-          }
-        }
-      }
-    }
-
-    &.mobile {
-      .top-nav-header-index {
-
-        .header-index-wide {
-
-          .header-index-left {
-
-            .trigger {
-              color: rgba(255, 255, 255, 0.85);
-              padding: 0 12px;
-            }
-
-            .logo.top-nav-header {
-              text-align: center;
-              width: 56px;
-              line-height: 58px;
-            }
-          }
-        }
-
-        .user-wrapper .action .avatar {
-          margin: 20px 0;
-        }
-
-        &.light {
-
-          .header-index-wide {
-
-            .header-index-left {
-              .trigger {
-                color: rgba(0, 0, 0, 0.65);
-              }
-            }
-          }
-          //
-        }
-      }
-    }
-
-    &.tablet {
-      // overflow: hidden; text-overflow:ellipsis; white-space: nowrap;
-      .top-nav-header-index {
-
-        .header-index-wide {
-
-          .header-index-left {
-            .logo > a {
-              overflow: hidden;
-              text-overflow: ellipsis;
-              white-space: nowrap;
-            }
-          }
-        }
-      }
-
     }
+  }
 
+  &.mobile {
     .top-nav-header-index {
-      box-shadow: 0 1px 4px rgba(0, 21, 41, .08);
-      position: relative;
-      transition: background .3s, width .2s;
-
       .header-index-wide {
-        width: 100%;
-        margin: auto;
-        padding: 0 20px 0 0;
-        display: flex;
-
-        .ant-menu.ant-menu-horizontal {
-          border: none;
-          height: 64px;
-          line-height: 64px;
-        }
-
         .header-index-left {
-          flex: 1 1;
-          display: flex;
+          .trigger {
+            color: rgba(255, 255, 255, 0.85);
+            padding: 0 12px;
+          }
 
           .logo.top-nav-header {
-            position: relative;
-            img {
-              display: inline-block;
-              vertical-align: middle;
-            }
-
-            h1 {
-              color: #fff;
-              display: inline-block;
-              vertical-align: top;
-              font-size: 16px;
-              margin: 0 0 0 12px;
-              font-weight: 400;
-            }
+            text-align: center;
+            width: 56px;
+            line-height: 58px;
           }
         }
+      }
 
-        .header-index-right {
-          overflow: hidden;
-          .action:hover {
-            background-color: rgba(0, 0, 0, 0.05);
-          }
-        }
+      .user-wrapper .action .avatar {
+        margin: 20px 0;
       }
 
       &.light {
-        background-color: #fff;
-
         .header-index-wide {
           .header-index-left {
-            .logo {
-              h1 {
-                color: #002140;
-              }
+            .trigger {
+              color: rgba(0, 0, 0, 0.65);
             }
           }
         }
+        //
       }
+    }
+  }
 
-      &.dark {
-
-        .user-wrapper {
-
-          .action {
-            color: white;
-
-            &:hover {
-              background: rgba(255, 255, 255, 0.3);
-            }
+  &.tablet {
+    // overflow: hidden; text-overflow:ellipsis; white-space: nowrap;
+    .top-nav-header-index {
+      .header-index-wide {
+        .header-index-left {
+          .logo > a {
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
           }
         }
-        .header-index-wide .header-index-left .trigger:hover {
-          background: rgba(255, 255, 255, 0.3);
-        }
       }
-
-    }
-
-    // 内容区
-    .layout-content {
-      margin: 24px 24px 0px;
-      height: 64px;
-      padding: 0 12px 0 0;
-    }
-
-  }
-
-  .topmenu {
-    .page-header-index-wide {
-      margin: 0 auto;
-      width: 100%;
     }
   }
 
-  // drawer-sider 自定义
-  .ant-drawer.drawer-sider {
-    .sider {
-      box-shadow: none;
-    }
-
-    &.dark {
-      .ant-drawer-content {
-        background-color: rgb(0, 21, 41);
-      }
-    }
-    &.light {
-      box-shadow: none;
-      .ant-drawer-content {
-        background-color: #fff;
-      }
-    }
-
-    .ant-drawer-body {
-      padding: 0
-    }
-  }
-
-  // 菜单样式
-  .sider {
-    box-shadow: 2px 116px 6px 0 rgba(0, 21, 41, .35);
+  .top-nav-header-index {
+    box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
     position: relative;
-    z-index: 10;
+    transition: background 0.3s, width 0.2s;
 
-    &.ant-fixed-sidemenu {
-      position: fixed;
-      height: 100%;
-    }
+    .header-index-wide {
+      width: 100%;
+      margin: auto;
+      padding: 0 20px 0 0;
+      display: flex;
 
-    .logo {
-      height: 64px;
-      position: relative;
-      line-height: 64px;
-      padding-left: 24px;
-      -webkit-transition: all .3s;
-      transition: all .3s;
-      background: #002140;
-      overflow: hidden;
-
-      img, h1 {
-        display: inline-block;
-        vertical-align: middle;
+      .ant-menu.ant-menu-horizontal {
+        border: none;
+        height: 64px;
+        line-height: 64px;
       }
 
-      img {
-        height: 32px;
+      .header-index-left {
+        flex: 1 1;
+        display: flex;
+
+        .logo.top-nav-header {
+          position: relative;
+          img {
+            display: inline-block;
+            vertical-align: middle;
+          }
+
+          h1 {
+            color: #fff;
+            display: inline-block;
+            vertical-align: top;
+            font-size: 16px;
+            margin: 0 0 0 12px;
+            font-weight: 400;
+          }
+        }
       }
 
-      h1 {
-        color: #fff;
-        font-size: 18px;
-        margin: 0 0 0 8px;
-        font-family: "Chinese Quote", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
-        font-weight: 600;
+      .header-index-right {
+        overflow: hidden;
+        .action:hover {
+          background-color: rgba(0, 0, 0, 0.05);
+        }
       }
     }
 
     &.light {
       background-color: #fff;
-      box-shadow: 2px 116px 8px 0 rgba(29, 35, 41, 0.05);
 
-      .logo {
-        background: #fff;
-        box-shadow: 1px 1px 0 0 #e8e8e8;
-
-        h1 {
-          color: unset;
+      .header-index-wide {
+        .header-index-left {
+          .logo {
+            h1 {
+              color: #002140;
+            }
+          }
         }
       }
+    }
 
-      .ant-menu-light {
-        border-right-color: transparent;
+    &.dark {
+      .user-wrapper {
+        .action {
+          color: white;
+
+          &:hover {
+            background: rgba(255, 255, 255, 0.3);
+          }
+        }
+      }
+      .header-index-wide .header-index-left .trigger:hover {
+        background: rgba(255, 255, 255, 0.3);
+      }
+    }
+  }
+
+  // 内容区
+  .layout-content {
+    margin: 24px 24px 0px;
+    height: 64px;
+    padding: 0 12px 0 0;
+  }
+}
+
+.topmenu {
+  .page-header-index-wide {
+    margin: 0 auto;
+    width: 100%;
+  }
+}
+
+// drawer-sider 自定义
+.ant-drawer.drawer-sider {
+  .sider {
+    box-shadow: none;
+  }
+
+  &.dark {
+    .ant-drawer-content {
+      background-color: rgb(0, 21, 41);
+    }
+  }
+  &.light {
+    box-shadow: none;
+    .ant-drawer-content {
+      background-color: #fff;
+    }
+  }
+
+  .ant-drawer-body {
+    padding: 0;
+  }
+}
+
+// 菜单样式
+.sider {
+  box-shadow: 2px 116px 6px 0 rgba(0, 21, 41, 0.35);
+  position: relative;
+  z-index: 10;
+
+  &.ant-fixed-sidemenu {
+    position: fixed;
+    height: 100%;
+  }
+
+  .logo {
+    height: 64px;
+    position: relative;
+    line-height: 64px;
+    padding-left: 24px;
+    -webkit-transition: all 0.3s;
+    transition: all 0.3s;
+    background: #002140;
+    overflow: hidden;
+
+    img,
+    h1 {
+      display: inline-block;
+      vertical-align: middle;
+    }
+
+    img {
+      height: 32px;
+    }
+
+    h1 {
+      color: #fff;
+      font-size: 18px;
+      margin: 0 0 0 8px;
+      font-family: 'Chinese Quote', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB',
+        'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
+        'Segoe UI Symbol';
+      font-weight: 600;
+    }
+  }
+
+  &.light {
+    background-color: #fff;
+    box-shadow: 2px 116px 8px 0 rgba(29, 35, 41, 0.05);
+
+    .logo {
+      background: #fff;
+      box-shadow: 1px 1px 0 0 #e8e8e8;
+
+      h1 {
+        color: unset;
       }
     }
 
+    .ant-menu-light {
+      border-right-color: transparent;
+    }
+  }
+}
+
+// 外置的样式控制
+.user-dropdown-menu-wrapper.ant-dropdown-menu {
+  padding: 4px 0;
+
+  .ant-dropdown-menu-item {
+    width: 160px;
   }
 
-  // 外置的样式控制
-  .user-dropdown-menu-wrapper.ant-dropdown-menu {
-    padding: 4px 0;
+  .ant-dropdown-menu-item > .anticon:first-child,
+  .ant-dropdown-menu-item > a > .anticon:first-child,
+  .ant-dropdown-menu-submenu-title > .anticon:first-child .ant-dropdown-menu-submenu-title > a > .anticon:first-child {
+    min-width: 12px;
+    margin-right: 8px;
+  }
+}
 
-    .ant-dropdown-menu-item {
-      width: 160px;
+// 数据列表 样式
+.table-alert {
+  margin-bottom: 16px;
+}
+
+.table-page-search-wrapper {
+  .ant-form-inline {
+    .ant-form-item {
+      display: flex;
+      margin-bottom: 24px;
+      margin-right: 0;
+
+      .ant-form-item-control-wrapper {
+        flex: 1 1;
+        display: inline-block;
+        vertical-align: middle;
+      }
+
+      > .ant-form-item-label {
+        line-height: 32px;
+        padding-right: 8px;
+        width: auto;
+      }
+      .ant-form-item-control {
+        height: 32px;
+        line-height: 32px;
+      }
     }
+  }
 
-    .ant-dropdown-menu-item > .anticon:first-child,
-    .ant-dropdown-menu-item > a > .anticon:first-child,
-    .ant-dropdown-menu-submenu-title > .anticon:first-child
-    .ant-dropdown-menu-submenu-title > a > .anticon:first-child {
-      min-width: 12px;
+  .table-page-search-submitButtons {
+    display: block;
+    margin-bottom: 24px;
+    white-space: nowrap;
+  }
+}
+
+.content {
+  .table-operator {
+    margin-bottom: 18px;
+
+    button {
       margin-right: 8px;
     }
-
   }
+}
 
-  // 数据列表 样式
-  .table-alert {
-    margin-bottom: 16px;
-  }
-
-  .table-page-search-wrapper {
-
-    .ant-form-inline {
-
-      .ant-form-item {
-        display: flex;
-        margin-bottom: 24px;
-        margin-right: 0;
-
-        .ant-form-item-control-wrapper {
-          flex: 1 1;
-          display: inline-block;
-          vertical-align: middle;
-        }
-
-        > .ant-form-item-label {
-          line-height: 32px;
-          padding-right: 8px;
-          width: auto;
-        }
-        .ant-form-item-control {
-          height: 32px;
-          line-height: 32px;
-        }
-      }
-    }
-
-    .table-page-search-submitButtons {
-      display: block;
-      margin-bottom: 24px;
-      white-space: nowrap;
-    }
-
-  }
-
-  .content {
-
-    .table-operator {
-      margin-bottom: 18px;
-
-      button {
-        margin-right: 8px;
-      }
-    }
-  }
-
-  .sub-menus {
-    border-top: 1px solid rgba(12, 235, 201, .3);
-    border-bottom: 1px solid rgba(12, 235, 201, .3);
-    margin-bottom: 16px;
-    padding: 5px 10px 8px;
-    background-color: rgba(12, 235, 201, .05);
-    overflow: auto;
-    .ant-menu {
-      border-bottom: none;
-      font-size: 16px;
-      line-height: normal;
-      background-color: transparent;
-      .ant-menu-item {
-        background: rgba(58, 236, 240, .22) !important;
-        border-bottom: none !important;
-        margin-right: 10px;
-        height: 30px;
-        line-height: 30px;
-        padding: 0 16px;
-        letter-spacing: 2px;
-        position: relative;
-        > a {
-          color: #c9f6f6;
-          font-weight: bold;
-          font-family: BookmanOldStyle;
-        }
-        &-active,
-        &-selected {
-          > a {
-            color: #2affdf !important;
-          }
-
-          &::before,
-          &::after {
-            border-color: #0cecca !important;
-          }
-        }
-
-        &::before,
-        &::after {
-          content: '';
-          position: absolute;
-          border: 2px solid #569e9e;
-          width: 7px;
-          height: 30px;
-          top: 0;
-        }
-        &::before {
-          left: 0;
-          border-right: 0;
-        }
-        &::after {
-          right: 0;
-          border-left: 0;
-        }
-      }
-      .ant-menu-submenu{
-        background: rgba(58, 236, 240, .22) !important;
-        border-bottom: none !important;
-        margin-right: 10px;
-        height: 30px;
-        line-height: 30px;
-        padding: 0 16px;
-        letter-spacing: 2px;
-        position: relative;
-        &-title {
-          color: #c9f6f6;
-          font-weight: bold;
-          font-family: BookmanOldStyle;
-          padding: 0;
-        }
-        &-active,
-        &-selected {
-          > a {
-            color: #2affdf !important;
-          }
-
-          &::before,
-          &::after {
-            border-color: #0cecca !important;
-          }
-        }
-        &::before,
-        &::after {
-          content: '';
-          position: absolute;
-          border: 2px solid #569e9e;
-          width: 7px;
-          height: 30px;
-          top: 0;
-        }
-        &::before {
-          left: 0;
-          border-right: 0;
-        }
-        &::after {
-          right: 0;
-          border-left: 0;
-        }
-      }
-    }
-  }
-  .global-content {
-    width: 100%;
-    height: calc(100% - 73px);
-    overflow: hidden;
-    position: relative;
-    .content-main {
-      display: flex;
-      height: 100%;
-      overflow: hidden;
-      .ant-layout-content {
-        flex: 1;
-        overflow: hidden;
-        margin-top: 34px;
-        margin-bottom: 34px;
-        .real-content {
-          height: 100%;
-          overflow: hidden auto;
-          padding-right: 5px;
-        }
-        .has-submenu {
-          height: calc(100% - 60px);
-        }
-      }
-    }
-    .content-top-border {
-      position: absolute;
-      top: 11px;
-      left: 0;
-      width: 100%;
-      img {
-        width: 100%;
-        height: 21px;
-      }
-    }
-    .content-bottom-border {
-      position: absolute;
-      bottom: 6px;
-      img {
-        width: 100%;
-        height: 21px;
-      }
-    }
-    .content-left-border {
-      width: 3px;
-      height: 100%;
-      margin-left: 12px;
+.sub-menus {
+  border-top: 1px solid rgba(12, 235, 201, 0.3);
+  border-bottom: 1px solid rgba(12, 235, 201, 0.3);
+  margin-bottom: 16px;
+  padding: 5px 10px 8px;
+  background-color: rgba(12, 235, 201, 0.05);
+  overflow: auto;
+  .ant-menu {
+    border-bottom: none;
+    font-size: 16px;
+    line-height: normal;
+    background-color: transparent;
+    .ant-menu-item {
+      background: rgba(58, 236, 240, 0.22) !important;
+      border-bottom: none !important;
       margin-right: 10px;
-    }
-    .content-right-border {
-      width: 3px;
-      height: 100%;
-      margin-right: 14px;
-      margin-left: 5px;
-    }
+      height: 30px;
+      line-height: 30px;
+      padding: 0 16px;
+      letter-spacing: 2px;
+      position: relative;
+      > a {
+        color: #c9f6f6;
+        font-weight: bold;
+        font-family: BookmanOldStyle;
+      }
+      &-active,
+      &-selected {
+        > a {
+          color: #2affdf !important;
+        }
 
-    .content-left-border,
-    .content-right-border {
-      img {
-        width: 100%;
+        &::before,
+        &::after {
+          border-color: #0cecca !important;
+        }
+      }
+
+      &::before,
+      &::after {
+        content: '';
+        position: absolute;
+        border: 2px solid #569e9e;
+        width: 7px;
+        height: 30px;
+        top: 0;
+      }
+      &::before {
+        left: 0;
+        border-right: 0;
+      }
+      &::after {
+        right: 0;
+        border-left: 0;
+      }
+    }
+    .ant-menu-submenu {
+      background: rgba(58, 236, 240, 0.22) !important;
+      border-bottom: none !important;
+      margin-right: 10px;
+      height: 30px;
+      line-height: 30px;
+      padding: 0 16px;
+      letter-spacing: 2px;
+      position: relative;
+      &-title {
+        color: #c9f6f6;
+        font-weight: bold;
+        font-family: BookmanOldStyle;
+        padding: 0;
+      }
+      &-active,
+      &-selected {
+        > a {
+          color: #2affdf !important;
+        }
+
+        &::before,
+        &::after {
+          border-color: #0cecca !important;
+        }
+      }
+      &::before,
+      &::after {
+        content: '';
+        position: absolute;
+        border: 2px solid #569e9e;
+        width: 7px;
+        height: 30px;
+        top: 0;
+      }
+      &::before {
+        left: 0;
+        border-right: 0;
+      }
+      &::after {
+        right: 0;
+        border-left: 0;
+      }
+    }
+  }
+}
+.global-content {
+  width: 100%;
+  height: calc(100% - 73px);
+  overflow: hidden;
+  position: relative;
+  .content-main {
+    display: flex;
+    height: 100%;
+    overflow: hidden;
+    .ant-layout-content {
+      flex: 1;
+      overflow: hidden;
+      margin-top: 34px;
+      margin-bottom: 34px;
+      .real-content {
         height: 100%;
+        overflow: hidden auto;
+        padding-right: 5px;
+      }
+      .has-submenu {
+        height: calc(100% - 60px);
       }
     }
   }
-  .ant-menu-submenu-popup .ant-menu-item{
-    display: block !important;
-    width: 100%;
-    padding: 0 16px !important;
-    height: 32px !important;
-    line-height: 32px !important;
-    color: #fff;
-    font-family: Arial;
-    margin-bottom: 0 !important;
-  }
-  .ant-menu-submenu-popup .ant-menu{
-    height: auto;
-    width: 220px;
+  .content-top-border {
     position: absolute;
-    left: -16px;
-    a{
-      color: white;
-      &:hover{
-        color: white;
-      }
+    top: 11px;
+    left: 0;
+    width: 100%;
+    img {
+      width: 100%;
+      height: 21px;
     }
   }
-  .ant-menu-submenu-popup{
-    position: relative;
+  .content-bottom-border {
+    position: absolute;
+    bottom: 6px;
+    img {
+      width: 100%;
+      height: 21px;
+    }
   }
-  
+  .content-left-border {
+    width: 3px;
+    height: 100%;
+    margin-left: 12px;
+    margin-right: 10px;
+  }
+  .content-right-border {
+    width: 3px;
+    height: 100%;
+    margin-right: 14px;
+    margin-left: 5px;
+  }
+
+  .content-left-border,
+  .content-right-border {
+    img {
+      width: 100%;
+      height: 100%;
+    }
+  }
+}
+.ant-menu-submenu-popup .ant-menu-item {
+  display: block !important;
+  width: 100%;
+  padding: 0 16px !important;
+  height: 32px !important;
+  line-height: 32px !important;
+  color: #fff;
+  font-family: Arial;
+  margin-bottom: 0 !important;
+}
+.ant-menu-submenu-popup .ant-menu {
+  height: auto;
+  width: 220px;
+  position: absolute;
+  left: -16px;
+  a {
+    color: white;
+    &:hover {
+      color: white;
+    }
+  }
+}
+.ant-menu-submenu-popup {
+  position: relative;
+}
+</style>
+<style lang="less" scoped>
+.ant-menu {
+  width: 1750px;
+}
 </style>
\ No newline at end of file
diff --git a/src/views/abnormalAlarm/analysisMonitor/alarmHistory/index.vue b/src/views/abnormalAlarm/analysisMonitor/alarmHistory/index.vue
index 2fd9dc4..4964cc0 100644
--- a/src/views/abnormalAlarm/analysisMonitor/alarmHistory/index.vue
+++ b/src/views/abnormalAlarm/analysisMonitor/alarmHistory/index.vue
@@ -1,6 +1,6 @@
 <template>
-  <div style="height: 100%;">
-    <div v-if="!isDetail" style="height: 100%;">
+  <div style="height: 100%">
+    <div v-if="!isDetail" style="height: 100%">
       <SearchBar type="analysisMonitor" :options="stationOptions" @search="handleSearch"></SearchBar>
       <div class="analysis-main">
         <TableList
@@ -10,63 +10,88 @@
           :list="dataSource"
           :loading="loading"
           :pagination="false"
-          @selectRowClick="rowClick"
+          @rowDbclick="rowClick"
         >
           <template slot="stationList" slot-scope="{ text }">
             <a-tooltip placement="topLeft">
               <template slot="title">
-                {{ text.join("、") }}
+                {{ text.join('、') }}
               </template>
-              {{ text.join("、") }}
+              {{ text.join('、') }}
             </a-tooltip>
           </template>
           <template slot="sourceList" slot-scope="{ text }">
             <a-tooltip placement="topLeft">
               <template slot="title">
-                {{ text.join("、") }}
+                {{ text.join('、') }}
               </template>
-              {{ text.join("、") }}
+              {{ text.join('、') }}
             </a-tooltip>
           </template>
           <template slot="info" slot-scope="{ text, record }">
-            <a-popover placement="bottomLeft" overlayClassName="qqqqq">
-              <template slot="content">
-                <a-table
-                  :columns="columns_info"
-                  :dataSource="record.nuclideList"
-                  :pagination="false"
-                  rowKey="nuclide"
-                ></a-table>
-              </template>
-              {{ text }}
+            <a-popover
+              trigger="hover"
+              :visible="record.popHovered"
+              @visibleChange="(visible) => handleHoverChange(visible, record)"
+            >
+              <div slot="content">{{ text }}</div>
+              <a-popover
+                placement="bottomLeft"
+                trigger="click"
+                :visible="record.popClicked"
+                @visibleChange="(visible) => handleClickChange(visible, record)"
+                overlayClassName="qqqqq"
+              >
+                <template slot="content">
+                  <a-table
+                    :columns="columns_info"
+                    :dataSource="record.nuclideList"
+                    :pagination="false"
+                    rowKey="nuclide"
+                  ></a-table>
+                </template>
+                <span
+                  style="
+                    display: inline-block;
+                    width: 95%;
+                    overflow: hidden;
+                    white-space: nowrap;
+                    text-overflow: ellipsis;
+                  "
+                  >{{ text }}</span
+                >
+              </a-popover>
             </a-popover>
           </template>
         </TableList>
-        <a-pagination 
+        <a-pagination
           size="small"
-          v-model="ipagination.current" 
+          v-model="ipagination.current"
           :pageSize="ipagination.pageSize"
           :page-size-options="ipagination.pageSizeOptions"
           show-size-changer
           show-quick-jumper
           :total="ipagination.total"
-          :show-total="(total, range) => `Total ${total} items　Page ${ipagination.current} / ${Math.ceil(total / ipagination.pageSize)}`"
-          show-less-items 
+          :show-total="
+            (total, range) =>
+              `Total ${total} items　Page ${ipagination.current} / ${Math.ceil(total / ipagination.pageSize)}`
+          "
+          show-less-items
           @change="handlePageChange"
           @showSizeChange="handleSizeChange"
         />
       </div>
     </div>
-    <div v-if="isDetail" style="height: 100%;margin-left: 20px;">
+    <div v-if="isDetail" style="height: 100%; margin-left: 20px">
       <div class="detail-top">
         <div class="top-back" @click="handleback">
           <span title="Return" class="actions-back"></span>
-          <span style="margin-left: 10px;">return</span>
+          <span style="margin-left: 10px">return</span>
         </div>
       </div>
       <div class="detail-main">
         <div class="pane-title">GENERAL INFORMATION</div>
-        <div style="padding: 15px 15px 20px;">
+        <div style="padding: 15px 15px 20px">
           <a-row>
             <a-col :span="13">
               <a-row>
@@ -78,7 +103,8 @@
               <a-row>
                 <a-col :span="14" class="info-key">Sample Geometry:</a-col>
                 <a-col :span="10" class="info-val">{{ sampleInfo.headerBlock.sampleGeometry }}</a-col>
-              </a-row></a-col>
+              </a-row></a-col
+            >
           </a-row>
           <a-row>
             <a-col :span="13">
@@ -91,7 +117,8 @@
               <a-row>
                 <a-col :span="14" class="info-key">Spectrum Qualifier:</a-col>
                 <a-col :span="10" class="info-val">{{ sampleInfo.headerBlock.spectrumQualifier }}</a-col>
-              </a-row></a-col>
+              </a-row></a-col
+            >
           </a-row>
           <a-row>
             <a-col :span="13">
@@ -104,7 +131,8 @@
               <a-row>
                 <a-col :span="14" class="info-key">Sample Reference Identification:</a-col>
                 <a-col :span="10" class="info-val">{{ sampleInfo.headerBlock.sampleReferenceIdentification }}</a-col>
-              </a-row></a-col>
+              </a-row></a-col
+            >
           </a-row>
           <a-row>
             <a-col :span="13">
@@ -117,7 +145,8 @@
               <a-row>
                 <a-col :span="14" class="info-key">Gas Background Measurement Identification:</a-col>
                 <a-col :span="10" class="info-val">{{ sampleInfo.headerBlock.gasBackgroundMeasurementId }}</a-col>
-              </a-row></a-col>
+              </a-row></a-col
+            >
           </a-row>
           <a-row>
             <a-col :span="13">
@@ -130,11 +159,12 @@
               <a-row>
                 <a-col :span="14" class="info-key">Transmit Time:</a-col>
                 <a-col :span="10" class="info-val">{{ sampleInfo.headerBlock.transmitDate }}</a-col>
-              </a-row></a-col>
+              </a-row></a-col
+            >
           </a-row>
         </div>
         <div class="pane-title">ACQUISITION</div>
-        <div style="padding: 15px 15px 20px;">
+        <div style="padding: 15px 15px 20px">
           <a-row>
             <a-col :span="13">
               <a-row>
@@ -174,10 +204,11 @@
 
 <script>
 import dateFormat from '@/components/jeecg/JEasyCron/format-date'
-import SearchBar from '../../components/searchBar';
-import TableList from '../../components/tableList.vue';
+import SearchBar from '../../components/searchBar'
+import TableList from '../../components/tableList.vue'
 import { getAction, postAction, httpAction, deleteAction } from '@/api/manage'
-const columns = [{
+const columns = [
+  {
     title: 'STATION',
     align: 'center',
     dataIndex: 'stationList',
@@ -185,18 +216,21 @@ const columns = [{
     ellipsis: true,
     scopedSlots: {
       customRender: 'stationList',
-    }
-  },{
+    },
+  },
+  {
     title: 'COLLECTION START',
     align: 'center',
     dataIndex: 'collectionDate',
     width: 200,
-  },{
+  },
+  {
     title: 'ALARM TIME',
     align: 'center',
     dataIndex: 'alarmStartDate',
     width: 200,
-  },{
+  },
+  {
     title: 'DATA SOURCES ',
     align: 'center',
     dataIndex: 'sourceList',
@@ -204,33 +238,37 @@ const columns = [{
     ellipsis: true,
     scopedSlots: {
       customRender: 'sourceList',
-    }
-  },{
+    },
+  },
+  {
     title: 'ALARM INFO',
     align: 'left',
     dataIndex: 'alarmInfo',
+    ellipsis: true,
     scopedSlots: {
       customRender: 'info',
-    }
-  }
+    },
+  },
 ]
-const columns_info = [{
+const columns_info = [
+  {
     title: 'NUCLIDE',
     align: 'left',
     dataIndex: 'nuclide',
-    width:200
-  },{
+    width: 200,
+  },
+  {
     title: 'THRESHOLD ',
     align: 'left',
     dataIndex: 'threshold',
-    width:200
-  },{
+    width: 200,
+  },
+  {
     title: 'VALUE ',
     align: 'left',
     dataIndex: 'value',
-    width:200
+    width: 200,
   },
-  
 ]
 export default {
   components: {
@@ -239,16 +277,18 @@ export default {
   },
   data() {
     return {
+      popClicked: false,
+      popHovered: false,
       stationOptions: [],
       paramsArg: {
         startDate: dateFormat(new Date(), 'yyyy-MM-dd'),
-        endDate: dateFormat(new Date(), 'yyyy-MM-dd')
+        endDate: dateFormat(new Date(), 'yyyy-MM-dd'),
       },
       columns,
       columns_info,
       dataSource: [],
       loading: false,
-      ipagination:{
+      ipagination: {
         current: 1,
         pageSize: 10,
         pageSizeOptions: ['10', '20', '30'],
@@ -258,66 +298,80 @@ export default {
         },
         showQuickJumper: true,
         showSizeChanger: true,
-        total: 0
+        total: 0,
       },
       isDetail: false,
-      dataSourceDetailNuclide:[],
-      url: { 
-        list: "/alarmAnalysisLog/findPage",
-        sampleInfo: "/webStatistics/sampleInfo"
+      dataSourceDetailNuclide: [],
+      url: {
+        list: '/alarmAnalysisLog/findPage',
+        sampleInfo: '/webStatistics/sampleInfo',
       },
       selectRow: {},
-      sampleInfo: {}
+      sampleInfo: {},
     }
   },
-  mounted () {
-    this.getStationList();
-    this.getPageData();
+  mounted() {
+    this.getStationList()
+    this.getPageData()
   },
   methods: {
+    handleHoverChange(visible, row) {
+      row.popClicked = false
+      row.popHovered = visible
+    },
+    handleClickChange(visible, row) {
+      row.popClicked = visible
+      row.popHovered = false
+    },
     getStationList() {
-      getAction("/webStatistics/findStationList",{menuName:""}).then(res => {
+      getAction('/webStatistics/findStationList', { menuName: '' }).then((res) => {
         if (res.success) {
-          if (res.result.length>0) {
-            this.stationOptions = res.result.map(item => {
+          if (res.result.length > 0) {
+            this.stationOptions = res.result.map((item) => {
               return {
                 label: item.stationCode,
-                value: item.stationId
+                value: item.stationId,
               }
             })
           } else {
-            this.stationOptions=[]
+            this.stationOptions = []
           }
         } else {
-          this.$message.warning("This operation fails. Contact your system administrator")
+          this.$message.warning('This operation fails. Contact your system administrator')
         }
       })
     },
     getPageData() {
-      this.loading = true;
+      this.loading = true
       let param = {
-        source: this.paramsArg.sources, 
-        stations: this.paramsArg.stations, 
+        source: this.paramsArg.sources,
+        stations: this.paramsArg.stations,
         nuclides: this.paramsArg.nuclides,
         startDate: this.paramsArg.startDate,
         endDate: this.paramsArg.endDate,
         pageNo: this.ipagination.current,
-        pageSize: this.ipagination.pageSize
+        pageSize: this.ipagination.pageSize,
       }
-      getAction(this.url.list, param).then(res => {
-        this.loading = false;
+      getAction(this.url.list, param).then((res) => {
+        this.loading = false
         if (res.success) {
-          this.dataSource = res.result.records
+          this.dataSource = res.result.records.map((item) => {
+            return {
+              ...item,
+              popClicked: false,
+              popHovered: false,
+            }
+          })
           this.ipagination.total = res.result.total
         } else {
-          this.$message.warning("This operation fails. Contact your system administrator")
+          this.$message.warning('This operation fails. Contact your system administrator')
         }
       })
     },
     async getSampleInfo() {
-      await getAction(this.url.sampleInfo, { sampleId: this.selectRow.sampleId}).then(res=> {
-        this.sampleInfo = res.result;
-        this.loading = false;
+      await getAction(this.url.sampleInfo, { sampleId: this.selectRow.sampleId }).then((res) => {
+        this.sampleInfo = res.result
+        this.loading = false
       })
     },
     handleSearch({ startDate, endDate, stations, sources }) {
@@ -326,15 +380,15 @@ export default {
         startDate,
         endDate,
         stations,
-        sources
+        sources,
       }
       this.getPageData()
     },
     async rowClick(record) {
-      this.loading = true;
-      this.selectRow = record;
+      this.loading = true
+      this.selectRow = record
       this.dataSourceDetailNuclide = record.nuclideList
-      await this.getSampleInfo();
+      await this.getSampleInfo()
       this.isDetail = true
     },
     handlePageChange(page, pageSize) {
@@ -349,13 +403,13 @@ export default {
     },
     handleback() {
       this.isDetail = false
-    }
+    },
   },
 }
 </script>
 
 <style lang="less" scoped>
-.analysis-main{
+.analysis-main {
   width: 100%;
   height: calc(100% - 50px);
   overflow: hidden;
@@ -363,13 +417,13 @@ export default {
   margin-left: 20px;
   position: relative;
 }
-.ant-pagination{
+.ant-pagination {
   position: absolute;
   left: 50%;
   bottom: 0;
   transform: translateX(-50%);
 }
-.detail-top{
+.detail-top {
   width: 100%;
   height: 50px;
   padding: 0 10px;
@@ -380,36 +434,36 @@ export default {
   align-items: center;
   justify-content: space-between;
   margin-bottom: 16px;
-  .top-back{
+  .top-back {
     font-family: MicrosoftYaHei;
     font-size: 16px;
     color: #69a19f;
     display: flex;
     align-items: center;
     cursor: pointer;
-    span{
+    span {
       display: inline-block;
       width: 28px;
       height: 24px;
     }
-    .actions-back{
+    .actions-back {
       background: url(~@/assets/images/abnormalAlarm/return.png) no-repeat;
       background-size: 100% 100%;
-      &:hover{
+      &:hover {
         background: url(~@/assets/images/abnormalAlarm/return-active.png) no-repeat;
         background-size: 100% 100%;
       }
     }
   }
 }
-.detail-main{
+.detail-main {
   height: calc(100% - 67px);
   margin-top: 15px;
   overflow: hidden;
   background-color: rgba(2, 40, 43, 0.5);
-	border: solid 1px #416f7f;
+  border: solid 1px #416f7f;
   padding: 15px 20px;
-  .pane-title{
+  .pane-title {
     height: 40px;
     background-color: rgba(12, 235, 201, 0.05);
     line-height: 40px;
@@ -421,14 +475,14 @@ export default {
     color: #0cebc9;
     padding: 0 0 0 18px;
   }
-  .info-key{
+  .info-key {
     font-family: ArialMT;
     font-size: 14px;
     font-weight: bold;
     line-height: 36px;
     color: #ffffff;
   }
-  .info-val{
+  .info-val {
     font-family: ArialMT;
     font-size: 14px;
     line-height: 36px;
@@ -437,21 +491,21 @@ export default {
 }
 </style>
 <style lang="less">
-.qqqqq{
-  .ant-popover-arrow{
+.qqqqq {
+  .ant-popover-arrow {
     border-left-color: #1993cc !important;
     border-top-color: #1993cc !important;
   }
-  .ant-popover-inner-content{
+  .ant-popover-inner-content {
     padding: 0;
   }
-  .ant-table-thead > tr th{
+  .ant-table-thead > tr th {
     background-color: #1993cc !important;
   }
-  .ant-table-tbody tr{
+  .ant-table-tbody tr {
     background-color: #084a5b;
   }
-  .ant-table-tbody tr:nth-child(2n){
+  .ant-table-tbody tr:nth-child(2n) {
     background-color: rgba(13, 113, 139, 0.2);
   }
 }