按照IOT TPM修改样式阶段一；以及菜单高亮的暂时解决办法

src/App.vue

@@ -37,8 +37,16 @@
     }
   }
 </script>
-<style>
+<style lang="less">
+  /* IoT TPM相关 修改框架 */
+  @import '~@assets/less/interLock.less';
   #app {
     height: 100%;
   }
+  html,
+  body,
+  #app{
+    font-family: Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif !important;
+    font-size: 16px;
+  }
 </style>

src/assets/less/common.css

@@ -61,13 +61,3 @@
 .jee-hidden {
   display: none;
 }
-/**IoT Edge相关 修改框架 */
-.ant-btn-primary {
-  background: linear-gradient(0deg, rgba(1, 159, 243, 0.4), rgba(138, 210, 249, 0.4)) !important;
-  background-color: #0fabfe !important;
-  border-color: #0fabfe !important;
-}
-.ant-card:not(.topo-card) {
-  border: 1px solid #cadae6;
-  box-shadow: 0 3px 8px 0 rgba(2, 72, 109, 0.15);
-}

src/assets/less/common.less

@@ -59,14 +59,3 @@
 
 /**隐藏样式-modal确定按钮 */
 .jee-hidden{display: none}
-
-/**IoT Edge相关 修改框架 */
-.ant-btn-primary{
-   background: linear-gradient(0deg,rgba(1,159,243,.4),rgba(138,210,249,.4)) !important;
-   background-color: #0fabfe!important;
-   border-color: #0fabfe!important;
-}
-.ant-card:not(.topo-card){
-  border: 1px solid #cadae6;
-  box-shadow: 0 3px 8px 0 rgba(2,72,109,.15);
-}

src/assets/less/interLock.css

@@ -0,0 +1,65 @@
+/**IoT Edge相关 修改框架 */
+/**
+  .iotmenu-content{
+    .ant-btn-primary{
+      background: linear-gradient(0deg,rgba(1,159,243,.4),rgba(138,210,249,.4)) !important;
+      background-color: #0fabfe!important;
+      border-color: #0fabfe!important;
+    }
+    .ant-card:not(.topo-card){
+      border: 1px solid #cadae6;
+      box-shadow: 0 3px 8px 0 rgba(2,72,109,.15);
+    }
+  } 
+*/
+/**IoT TPM相关 修改框架 */
+.iotmenu-content-layout .iotmenu-content {
+  overflow: auto;
+}
+.iotmenu-content-layout .ant-btn-primary {
+  background: #008cd6 !important;
+  border-color: #1890ff !important;
+  font-size: 16px;
+}
+.iotmenu-content-layout .table-page-search-wrapper .ant-form .ant-form-item .ant-form-item-label label {
+  color: #323233;
+  font-size: 16px;
+  font-weight: 400;
+}
+.iotmenu-content-layout .ant-table {
+  background: transparent !important;
+}
+.iotmenu-content-layout .ant-table .ant-table-thead tr th {
+  color: #323233 !important;
+  font-size: 16px !important;
+  font-weight: 700 !important;
+}
+.iotmenu-content-layout .ant-table .ant-table-tbody tr td {
+  color: #323233 !important;
+  font-size: 15px;
+}
+.iotmenu-content-layout .ant-tabs .ant-tabs-bar {
+  margin: 0 !important;
+}
+.iotmenu-content-layout .ant-tabs .ant-tabs-bar .ant-tabs-nav-container {
+  height: 48px !important;
+  margin: 0;
+}
+.iotmenu-content-layout .ant-tabs .ant-tabs-bar .ant-tabs-nav-container .ant-tabs-nav-wrap {
+  height: 48px !important;
+}
+.iotmenu-content-layout .ant-tabs .ant-tabs-bar .ant-tabs-nav-container .ant-tabs-nav-wrap .ant-tabs-nav .ant-tabs-tab {
+  font-size: 16px;
+  height: 48px !important;
+  line-height: 48px;
+}
+.iotmenu-content-layout .interlock-detail-header {
+  font-size: 24px;
+  font-weight: 700;
+  color: #323233;
+  padding: 8px 24px;
+}
+.iotmenu-content-layout .interlock-detail-header .anticon {
+  color: #008cd6;
+  padding-right: 4px;
+}

src/assets/less/interLock.less

@@ -0,0 +1,96 @@
+/**IoT Edge相关 修改框架 */
+/**
+  .iotmenu-content{
+    .ant-btn-primary{
+      background: linear-gradient(0deg,rgba(1,159,243,.4),rgba(138,210,249,.4)) !important;
+      background-color: #0fabfe!important;
+      border-color: #0fabfe!important;
+    }
+    .ant-card:not(.topo-card){
+      border: 1px solid #cadae6;
+      box-shadow: 0 3px 8px 0 rgba(2,72,109,.15);
+    }
+  } 
+*/
+
+/**IoT TPM相关 修改框架 */
+.iotmenu-content-layout{
+  .iotmenu-content{
+    overflow: auto;
+  }
+  // primary状态按钮
+  .ant-btn-primary{
+     background: #008cd6 !important;
+     border-color: #1890ff!important;
+     font-size: 16px;
+  }
+  // 搜索
+  .table-page-search-wrapper{
+    .ant-form{
+      .ant-form-item{
+        .ant-form-item-label label{
+          color: #323233;
+          font-size: 16px;
+          font-weight: 400;
+        }
+      }
+    }
+  }
+  // 表格
+  .ant-table{
+    background: transparent !important;
+    .ant-table-thead{
+      tr{
+        th{
+          color: #323233 !important;
+          font-size: 16px !important;
+          font-weight: 700 !important;
+        }
+      }
+    }
+    .ant-table-tbody{
+      tr{
+        td{
+          color: #323233 !important;
+          font-size: 15px;
+        }
+      }
+    }
+  }
+  // tab标签
+  .ant-tabs{
+    .ant-tabs-bar{
+      margin: 0 !important;
+      .ant-tabs-nav-container{
+        height: 48px !important;
+        margin: 0;
+        // 
+        .ant-tabs-nav-wrap{
+          height: 48px !important;
+          .ant-tabs-nav{
+            .ant-tabs-tab{
+              font-size: 16px;
+              height: 48px !important;
+              line-height: 48px;
+            }
+          }
+        }
+      }
+    }
+    // 选中tab
+    .ant-tabs-tab-active{
+
+    }
+  }
+  // 详情页面头部
+  .interlock-detail-header{
+    font-size: 24px; 
+    font-weight: 700;
+    color: #323233;
+    padding: 8px 24px;
+    .anticon{
+      color: #008cd6;
+      padding-right: 4px;
+    }
+  }
+}

src/components/layouts/TabLayout.vue

@@ -5,7 +5,7 @@
     <!-- update-end- author:sunjianlei --- date:20191009 --- for: 提升右键菜单的层级 -->
     <a-tabs
       @contextmenu.native="e => onContextmenu(e)"
-      v-if="multipage"
+      v-if="multipage &&  layoutMode !== 'iotmenu'"
       :active-key="activePage"
       class="tab-layout-tabs"
       style="height:52px"
@@ -18,8 +18,10 @@
         <span slot="tab" :pagekey="page.fullPath">{{ page.meta.title }}</span>
       </a-tab-pane>
     </a-tabs>
+    <!-- IoT TPM相关 修改框架 -->
+    <div :style="layoutMode !== 'iotmenu'?'margin: 12px 12px 0;':''" :class="layoutMode === 'iotmenu'?'iotmenu-content':''">
     <!-- IoT Edge相关 修改框架 -->
-    <div :style="layoutMode === 'iotmenu'?'margin: 20px 16px 0;':'margin: 12px 12px 0;'">
+    <!-- <div :style="layoutMode === 'iotmenu'?'margin: 20px 16px 0;':'margin: 12px 12px 0;'"> -->
     <!-- <div style="margin: 12px 12px 0;"> -->
       <!-- update-begin-author:taoyan date:20201221 for:此处删掉transition标签 不知道为什么加上后 页面路由切换的时候即1及菜单切到2及菜单的时候 两个菜单页面会同时出现300-500秒左右 -->
       <keep-alive v-if="multipage">
@@ -66,7 +68,7 @@
           { key: '2', icon: 'arrow-right', text: '关闭右侧' },
           { key: '3', icon: 'close', text: '关闭其它' }
         ],
-        reloadFlag:true
+        reloadFlag:true,
       }
     },
     /* update_begin author:wuxianquan date:20190828 for: 关闭当前tab页，供子页面调用 ->望菜单能配置外链，直接弹出新页面而不是嵌入iframe #428 */

src/components/menu/SideMenu.vue

@@ -1,10 +1,12 @@
 <template>
   <a-layout-sider
     :class="['sider', isDesktop() ? null : 'shadow', theme, fixSiderbar ? 'ant-fixed-sidemenu' : null, layoutMode === 'iotmenu' ? 'iot-menu-set' : '' ]"
-    width="208px"
+    width="315px"
     :collapsible="collapsible"
     v-model="collapsed"
     :trigger="null">
+    <!-- IoT TPM相关 修改框架 -->
+    <!-- width="208px" -->
     <!-- IoT Edge相关 修改框架 -->
     <logo v-if="layoutMode !== 'iotmenu'" />
     <!-- <logo /> -->
@@ -80,33 +82,97 @@
 </script>
 <style lang="less">
   // IoT Edge相关 修改框架
+  // .iot-menu-set{
+  //   padding-top: 12px;
+  //   background: linear-gradient(0deg,#e6edf3,#fff) !important;
+  //   box-shadow: 0 0 14px 0 rgba(2,72,109,.2)!important;
+  //   ul.ant-menu {
+  //     background-color: transparent;
+  //     .ant-menu-item{
+  //       margin: 0;
+  //     }
+  //   }
+  //   // 选种样式
+  //   .ant-menu-submenu-selected{
+  //     // 父级菜单
+  //     .ant-menu-submenu-title{
+  //       background-color: #1890ff !important;
+  //       color: #fff;
+  //       margin: 0;
+  //     }
+  //     // 子级
+  //     .ant-menu-item-selected{
+  //       background: linear-gradient(90deg,hsla(0,0%,100%,0),rgba(1,159,243,.5));
+  //     }
+  //   }
+  //   .ant-menu-submenu-open{
+  //     .ant-menu-submenu-title{
+  //       background: linear-gradient(90deg,hsla(0,0%,100%,0),rgba(1,159,243,.5));
+  //     }
+  //   }
+  // }
+  // IoT TPM相关 修改框架
   .iot-menu-set{
-    padding-top: 12px;
-    background: linear-gradient(0deg,#e6edf3,#fff) !important;
-    box-shadow: 0 0 14px 0 rgba(2,72,109,.2)!important;
+    background-color: #E1E1E1 !important;
+    box-shadow: 1px 0 4px #c8c8c8 !important;
+    border-right: 1px solid #c8c8c8;
+    // 根菜单（最外层菜单）
+    // .ant-menu-root{
+
+    // }
+    // 每一层menu
     ul.ant-menu {
       background-color: transparent;
-      .ant-menu-item{
-        margin: 0;
+      // 每一个有子级的菜单区域
+      .ant-menu-submenu{
+        // 标题
+        .ant-menu-submenu-title{
+          font-size: 16px;
+          color: #323233;
+          // line-height: 24px;
+          font-weight: 700;
+        }
+        // 子级每一个
+        .ant-menu-item{
+          // margin: 0;
+          font-size: 16px;
+          font-weight: 400;
+          font-style: normal;
+          a{
+            color: #323233;
+          }
+        }
       }
-    }
-    // 选种样式
-    .ant-menu-submenu-selected{
-      // 父级菜单
-      .ant-menu-submenu-title{
-        background-color: #1890ff !important;
-        color: #fff;
-        margin: 0;
-      }
-      // 子级
-      .ant-menu-item-selected{
-        background: linear-gradient(90deg,hsla(0,0%,100%,0),rgba(1,159,243,.5));
+      // 有子级的菜单选中状态
+      .ant-menu-submenu-selected{
+        background: #fafafa;
       }
-    }
-    .ant-menu-submenu-open{
-      .ant-menu-submenu-title{
-        background: linear-gradient(90deg,hsla(0,0%,100%,0),rgba(1,159,243,.5));
+      // 有子级的菜单打开状态
+      .ant-menu-submenu-open{
+
       }
+      // 打开状态下当前菜单的子级区域 
+      ul.ant-menu-sub{
+        // 每一个子级页面菜单（无子级）
+        .ant-menu-item{
+
+        }
+        // 选中的子级页面菜单（无子级）
+        .ant-menu-item-selected{
+          background: linear-gradient(315deg,rgba(11,76,217,.1) 0%,rgba(0,140,214,.1) 100%),#ffffff;
+        }
+      }
+      
+    }
+    // 滚动条样式
+    &::-webkit-scrollbar{
+      width: 6px !important;
+    }
+    &::-webkit-scrollbar-track{
+      background: #E1E1E1 !important;
+    }
+    &::-webkit-scrollbar-thumb{
+      background-color: #E9E9E2 !important;
     }
   }
 </style>

src/components/module_interLock/UEquipmentTree/UEquipmentTree.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="equipment-tree-container">
+  <div class="interlock-tree-container">
     <div v-if="treeData.type != 'history'">
       <a-button  type="primary" icon="plus"  style="width:12%;" @click="handleAdd" v-has="'add:tree'"/>
       <a-input-search style="width:86%;margin-left:2%" allow-clear placeholder="请输入" @change="onChange" />
@@ -8,7 +8,7 @@
       <a-input-search style="width:100%;margin-left:2%" allow-clear placeholder="请输入" @change="onChange" />
     </div>
 
-    <div class="tree-container">
+    <div class="interlock-tree-content">
       <a-tree
         :expanded-keys="expandedKeys"
         auto-expand-parent
@@ -19,8 +19,11 @@
         blockNode
         >
         <template v-slot:title="nodeData">
-          <div style="display: flex; justify-content: space-between; width: 100%;">
-            <div>{{nodeData.interlockName}}</div>
+          <div class="item-node-container">
+            <div>
+              <a-icon slot="icon" type="carry-out" />
+              <span class="item-node-name">{{nodeData.interlockName}}</span>
+            </div>
             <div v-if="treeData.type != 'history'" v-has="'edit:tree'">
               <a-dropdown>
                 <a-icon type="more" />
@@ -211,18 +214,68 @@
   })
 </script>
 
-<style lang="less" scoped>
-.equipment-tree-container{
+<style lang="less">
+.interlock-tree-container{
   width: 100%;
   height: 100%;
-  background-color: #fff;
+  background-color: transparent;
   padding: 15px;
-  border: 1px solid #CADAE6;
-  box-shadow: 0px 5px 10px 0 #CADAE6;
-  .tree-container{
+  // border: 1px solid #CADAE6;
+  // box-shadow: 0px 5px 10px 0 #CADAE6;
+  .interlock-tree-content{
     width: 100%;
     height: calc(100% - 40px);
     overflow: auto;
+    .ant-tree{
+      li{
+        padding: 0;
+        span.ant-tree-switcher{
+          height: 40px;
+          line-height: 40px;
+        }
+        .ant-tree-node-content-wrapper{
+          height: 40px;
+        }
+        .ant-tree-node-content-wrapper:hover{
+          background: linear-gradient(315deg,rgba(11,76,217,.05) 0%,rgba(11,76,217,.05) 0%,rgba(0,140,214,.05) 100%),#ffffff;
+        }
+      }
+      .ant-tree-title{
+        .item-node-container{
+          width: 100%;
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          font-size: 16px;
+          color: #323233;
+          height: 40px;
+        }
+        .item-node-name{
+          padding-left: 8px;
+        }
+      }
+      // 节点折叠时
+      .ant-tree-treenode-switcher-close{
+        
+      }
+      // 节点打开时
+      .ant-tree-treenode-switcher-open{
+
+      }
+      // 节点行被选择时
+      .ant-tree-treenode-selected{
+        // 节点文字
+        .ant-tree-node-selected{
+          background: linear-gradient(to right,#a1c4fd8a 0%,#c2e9fb8a 100%)!important;
+          // background: linear-gradient(to right,#a1c4fd 0%,#c2e9fb 100%)!important;
+          // background: transparent;
+          .item-node-container{
+            // color: #008cd6;
+            // font-weight: 700;
+          }
+        }
+      }
+    }
   }
 }
 </style>

src/components/page/GlobalHeader.vue

@@ -197,13 +197,33 @@
 <style lang="less" scoped>
 
   // IoT Edge相关 修改框架
+  // @iotHContentHeight: 48px;
+  // @iotHLineHeight: 8px;
+  // .iotmenu-header{
+  //   .top-line{
+  //     width: 100%;
+  //     height: @iotHLineHeight;
+  //     background: linear-gradient(90deg,#008cd6,#004280);
+  //   }
+  //   .iotmenu-header-content{
+  //     height: @iotHContentHeight !important;
+  //     line-height: @iotHContentHeight !important;
+  //     .user-wrapper{
+  //       /deep/ .avatar{
+  //         margin: 0 10px 0 0 !important;
+  //       }
+  //     }
+  //   }
+  // }
+  // IoT TPM相关 修改框架
   @iotHContentHeight: 48px;
   @iotHLineHeight: 8px;
   .iotmenu-header{
+    // height: @iotHContentHeight !important;
     .top-line{
       width: 100%;
       height: @iotHLineHeight;
-      background: linear-gradient(90deg,#008cd6,#004280);
+      background: linear-gradient(90deg,#019ff3,#004280);
     }
     .iotmenu-header-content{
       height: @iotHContentHeight !important;

src/components/page/GlobalLayout.vue

@@ -73,7 +73,7 @@
       <!-- layout content -->
       <a-layout-content :style="{ height: '100%', paddingTop: fixedHeader ? '59px' : '0' }">
         <!-- IoT Edge相关 修改框架 -->
-        <template v-if="layoutMode === 'iotmenu' ">
+        <template v-if="layoutMode === 'iotmenu'">
           <!-- <a-drawer
             v-if="device === 'mobile'"
             :wrapClassName="'drawer-sider ' + navTheme"
@@ -103,7 +103,7 @@
             :collapsed="collapsed"
             :collapsible="true"></side-menu>
           
-          <div class="iotmenu-content">
+          <div class="iotmenu-content-layout">
             <slot></slot>
           </div>
         </template>
@@ -114,7 +114,8 @@
       </a-layout-content>
 
       <!-- layout footer -->
-      <a-layout-footer style="padding: 0px">
+       <!-- IoT TPM相关 修改框架 -->
+      <a-layout-footer  v-if="layoutMode !== 'iotmenu'" style="padding: 0px">
         <global-footer/>
       </a-layout-footer>
     </a-layout>
@@ -357,12 +358,12 @@
       }
     }
 
-    // IoT Edge相关 修改框架 --强制修改布局样式
+    // IoT TPM相关 修改框架 --强制修改布局样式
     .iotmenu{
       display: block !important;
       height: 100vh;
       overflow: hidden;
-      background-color: #edf2f7 !important;
+      background-color: #EDEDED !important;
       .ant-layout-header{
         .header{
           // height: 56px !important;
@@ -381,13 +382,44 @@
           height: 100%;
           overflow: auto;
         }
-        .iotmenu-content{
+        .iotmenu-content-layout{
           width: 100%;
-          height: 100%;
-          overflow: auto;
+          height: calc(100% - 6px);
+          overflow: hidden;
         }
       }
     }
+    // // IoT Edge相关 修改框架 --强制修改布局样式
+    // .iotmenu{
+    //   display: block !important;
+    //   height: 100vh;
+    //   overflow: hidden;
+    //   background-color: #edf2f7 !important;
+    //   .ant-layout-header{
+    //     .header{
+    //       // height: 56px !important;
+    //       background-color: #fff;
+    //       color: rgba(0,0,0,65);
+    //       box-shadow: 0 2px 4px 0 rgba(50,50,51,.5);
+    //       z-index: 999;
+    //       padding: 0;
+    //     }
+    //   }
+    //   .ant-layout-content{
+    //     display: flex !important;
+    //     height: calc(100vh - 56px) !important;
+    //     overflow: hidden;
+    //     .ant-layout-sider{
+    //       height: 100%;
+    //       overflow: auto;
+    //     }
+    //     .iotmenu-content-layout{
+    //       width: 100%;
+    //       height: 100%;
+    //       overflow: auto;
+    //     }
+    //   }
+    // }
 
     .header {
       height: 64px;

src/main.js

@@ -7,6 +7,8 @@ import Storage from 'vue-ls'
 import router from './router'
 import store from './store/'
 import { VueAxios } from "@/utils/request"
+// 修改框架：全局引入外部字体
+import 'roboto-fontface/css/roboto/roboto-fontface.css';
 
 require('@jeecg/antd-online-mini')
 require('@jeecg/antd-online-mini/dist/OnlineForm.css')

src/mixins/JeecgListMixin.js

@@ -19,6 +19,7 @@ export const JeecgListMixin = {
       /* 分页参数 */
       ipagination:{
         current: 1,
+        // IoT TPM相关 修改框架
         pageSize: 500,
         pageSizeOptions: ['10', '100', '500'],
         showTotal: (total, range) => {

src/views/module_interLock/InterlockDetail/InterlockDetailList.vue

@@ -1,128 +1,134 @@
 <template>
-  <a-card :bordered="false">
-    <!-- 查询区域 -->
-    <div class="table-page-search-wrapper">
-      <a-form layout="inline" @keyup.enter.native="searchQuery">
-        <a-row :gutter="24">
-          <!-- <a-col :xl="6" :lg="7" :md="8" :sm="24">
-            <a-form-item label="联锁总表id">
-              <a-input placeholder="请输入联锁总表id" v-model="queryParam.summaryid"></a-input>
-            </a-form-item>
-          </a-col> -->
-          <!-- <a-col :xl="6" :lg="7" :md="8" :sm="24">
-            <a-form-item label="联锁名称">
-              <a-input placeholder="请输入联锁名称" v-model="queryParam.interlockname"></a-input>
-            </a-form-item>
-          </a-col> -->
-          <a-col :xl="6" :lg="7" :md="8" :sm="24">
-              <a-form-item label="联锁条件">
-                <a-input placeholder="请输入联锁条件" v-model="queryParam.interlockConditionTag"></a-input>
+  <div>
+    <div class="interlock-detail-header">
+      <a-icon type="arrow-left" @click="goBack"/>
+      <span>联锁名称</span>
+    </div>
+    <a-card :bordered="false" style="background-color: #FAFAFA;">
+      <!-- 查询区域 -->
+      <div class="table-page-search-wrapper">
+        <a-form layout="inline" @keyup.enter.native="searchQuery">
+          <a-row :gutter="24">
+            <!-- <a-col :xl="6" :lg="7" :md="8" :sm="24">
+              <a-form-item label="联锁总表id">
+                <a-input placeholder="请输入联锁总表id" v-model="queryParam.summaryid"></a-input>
               </a-form-item>
-            </a-col>
-          <!-- <template v-if="toggleSearchStatus">
-            <a-col :xl="6" :lg="7" :md="8" :sm="24">
-              <a-form-item label="仪表状态判断方式">
-                <j-dict-select-tag placeholder="请选择仪表状态判断方式" v-model="queryParam.instrumentStatusJuge" dictCode="instrument_status_juge"/>
+            </a-col> -->
+            <!-- <a-col :xl="6" :lg="7" :md="8" :sm="24">
+              <a-form-item label="联锁名称">
+                <a-input placeholder="请输入联锁名称" v-model="queryParam.interlockname"></a-input>
               </a-form-item>
+            </a-col> -->
+            <a-col :xl="6" :lg="7" :md="8" :sm="24">
+                <a-form-item label="联锁条件">
+                  <a-input placeholder="请输入联锁条件" v-model="queryParam.interlockConditionTag"></a-input>
+                </a-form-item>
+              </a-col>
+            <!-- <template v-if="toggleSearchStatus">
+              <a-col :xl="6" :lg="7" :md="8" :sm="24">
+                <a-form-item label="仪表状态判断方式">
+                  <j-dict-select-tag placeholder="请选择仪表状态判断方式" v-model="queryParam.instrumentStatusJuge" dictCode="instrument_status_juge"/>
+                </a-form-item>
+              </a-col>
+            </template> -->
+            <a-col :xl="6" :lg="7" :md="8" :sm="24">
+              <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
+                <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
+                <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
+                <!-- <a @click="handleToggleSearch" style="margin-left: 8px">
+                  {{ toggleSearchStatus ? '收起' : '展开' }}
+                  <a-icon :type="toggleSearchStatus ? 'up' : 'down'"/>
+                </a> -->
+              </span>
             </a-col>
-          </template> -->
-          <a-col :xl="6" :lg="7" :md="8" :sm="24">
-            <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
-              <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
-              <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
-              <!-- <a @click="handleToggleSearch" style="margin-left: 8px">
-                {{ toggleSearchStatus ? '收起' : '展开' }}
-                <a-icon :type="toggleSearchStatus ? 'up' : 'down'"/>
-              </a> -->
-            </span>
-          </a-col>
-        </a-row>
-      </a-form>
-    </div>
-    <!-- 查询区域-END -->
-
-    <!-- 操作按钮区域 -->
-    <!-- <div class="table-operator">
-      <a-button @click="handleAdd" type="primary" icon="plus">新增</a-button>
-      <a-button type="primary" icon="download" @click="handleExportXls('联锁详细信息表')">导出</a-button>
-      <a-upload name="file" :showUploadList="false" :multiple="false" :headers="tokenHeader" :action="importExcelUrl" @change="handleImportExcel">
-        <a-button type="primary" icon="import">导入</a-button>
-      </a-upload> -->
-      <!-- 高级查询区域 -->
-      <!-- <j-super-query :fieldList="superFieldList" ref="superQueryModal" @handleSuperQuery="handleSuperQuery"></j-super-query>
-      <a-dropdown v-if="selectedRowKeys.length > 0">
-        <a-menu slot="overlay">
-          <a-menu-item key="1" @click="batchDel"><a-icon type="delete"/>删除</a-menu-item>
-        </a-menu>
-        <a-button style="margin-left: 8px"> 批量操作 <a-icon type="down" /></a-button>
-      </a-dropdown>
-    </div> -->
-
-    <!-- table区域-begin -->
-    <div>
-      <!-- <div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">
-        <i class="anticon anticon-info-circle ant-alert-icon"></i> 已选择 <a style="font-weight: 600">{{ selectedRowKeys.length }}</a>项
-        <a style="margin-left: 24px" @click="onClearSelected">清空</a>
+          </a-row>
+        </a-form>
+      </div>
+      <!-- 查询区域-END -->
+  
+      <!-- 操作按钮区域 -->
+      <!-- <div class="table-operator">
+        <a-button @click="handleAdd" type="primary" icon="plus">新增</a-button>
+        <a-button type="primary" icon="download" @click="handleExportXls('联锁详细信息表')">导出</a-button>
+        <a-upload name="file" :showUploadList="false" :multiple="false" :headers="tokenHeader" :action="importExcelUrl" @change="handleImportExcel">
+          <a-button type="primary" icon="import">导入</a-button>
+        </a-upload> -->
+        <!-- 高级查询区域 -->
+        <!-- <j-super-query :fieldList="superFieldList" ref="superQueryModal" @handleSuperQuery="handleSuperQuery"></j-super-query>
+        <a-dropdown v-if="selectedRowKeys.length > 0">
+          <a-menu slot="overlay">
+            <a-menu-item key="1" @click="batchDel"><a-icon type="delete"/>删除</a-menu-item>
+          </a-menu>
+          <a-button style="margin-left: 8px"> 批量操作 <a-icon type="down" /></a-button>
+        </a-dropdown>
       </div> -->
-
-      <a-table
-        ref="table"
-        size="middle"
-        :scroll="{x:true}"
-        bordered
-        rowKey="id"
-        :columns="columns"
-        :dataSource="dataSource"
-        :pagination="ipagination"
-        :loading="loading"
-        class="j-table-force-nowrap"
-        @change="handleTableChange">
-        <!-- :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}" -->
-
-        <template slot="htmlSlot" slot-scope="text">
-          <div v-html="text"></div>
-        </template>
-        <template slot="imgSlot" slot-scope="text,record">
-          <span v-if="!text" style="font-size: 12px;font-style: italic;">无图片</span>
-          <img v-else :src="getImgView(text)" :preview="record.id" height="25px" alt="" style="max-width:80px;font-size: 12px;font-style: italic;"/>
-        </template>
-        <template slot="fileSlot" slot-scope="text">
-          <span v-if="!text" style="font-size: 12px;font-style: italic;">无文件</span>
-          <a-button
-            v-else
-            :ghost="true"
-            type="primary"
-            icon="download"
-            size="small"
-            @click="downloadFile(text)">
-            下载
-          </a-button>
-        </template>
-
-        <span slot="action" slot-scope="text, record">
-          <a @click="handleEdit(record)">编辑</a>
-
-          <a-divider type="vertical" />
-          <a-dropdown>
-            <a class="ant-dropdown-link">更多 <a-icon type="down" /></a>
-            <a-menu slot="overlay">
-              <a-menu-item>
-                <a @click="handleDetail(record)">详情</a>
-              </a-menu-item>
-              <a-menu-item>
-                <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
-                  <a>删除</a>
-                </a-popconfirm>
-              </a-menu-item>
-            </a-menu>
-          </a-dropdown>
-        </span>
-
-      </a-table>
-    </div>
-
-    <interlock-detail-modal ref="modalForm" @ok="modalFormOk"></interlock-detail-modal>
-  </a-card>
+  
+      <!-- table区域-begin -->
+      <div>
+        <!-- <div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">
+          <i class="anticon anticon-info-circle ant-alert-icon"></i> 已选择 <a style="font-weight: 600">{{ selectedRowKeys.length }}</a>项
+          <a style="margin-left: 24px" @click="onClearSelected">清空</a>
+        </div> -->
+  
+        <a-table
+          ref="table"
+          size="middle"
+          :scroll="{x:true}"
+          bordered
+          rowKey="id"
+          :columns="columns"
+          :dataSource="dataSource"
+          :pagination="ipagination"
+          :loading="loading"
+          class="j-table-force-nowrap"
+          @change="handleTableChange">
+          <!-- :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}" -->
+  
+          <template slot="htmlSlot" slot-scope="text">
+            <div v-html="text"></div>
+          </template>
+          <template slot="imgSlot" slot-scope="text,record">
+            <span v-if="!text" style="font-size: 12px;font-style: italic;">无图片</span>
+            <img v-else :src="getImgView(text)" :preview="record.id" height="25px" alt="" style="max-width:80px;font-size: 12px;font-style: italic;"/>
+          </template>
+          <template slot="fileSlot" slot-scope="text">
+            <span v-if="!text" style="font-size: 12px;font-style: italic;">无文件</span>
+            <a-button
+              v-else
+              :ghost="true"
+              type="primary"
+              icon="download"
+              size="small"
+              @click="downloadFile(text)">
+              下载
+            </a-button>
+          </template>
+  
+          <span slot="action" slot-scope="text, record">
+            <a @click="handleEdit(record)">编辑</a>
+  
+            <a-divider type="vertical" />
+            <a-dropdown>
+              <a class="ant-dropdown-link">更多 <a-icon type="down" /></a>
+              <a-menu slot="overlay">
+                <a-menu-item>
+                  <a @click="handleDetail(record)">详情</a>
+                </a-menu-item>
+                <a-menu-item>
+                  <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
+                    <a>删除</a>
+                  </a-popconfirm>
+                </a-menu-item>
+              </a-menu>
+            </a-dropdown>
+          </span>
+  
+        </a-table>
+      </div>
+  
+      <interlock-detail-modal ref="modalForm" @ok="modalFormOk"></interlock-detail-modal>
+    </a-card>
+  </div>
 </template>
 
 <script>
@@ -140,6 +146,7 @@
     components: {
       InterlockDetailModal
     },
+    props: ['currentData'],
     data () {
       return {
         description: '联锁详细信息表管理页面',
@@ -252,6 +259,16 @@
         superFieldList:[],
       }
     },
+    // watch: {
+    //   currentData: {
+    //     handler(newVal, oldVal){
+    //       console.log(newVal, oldVal)
+    //       this.loadData()
+    //     },
+    //     immediate: true,
+    //     deep: true
+    //   }
+    // },
     created() {
       // this.queryParam.summaryid = this.$route.query.summaryid
       this.getSuperFieldList();
@@ -272,11 +289,15 @@
         if (arg === 1) {
           this.ipagination.current = 1;
         }
-        if (this.$route.query.summaryid) {
-          this.queryParam.summaryid = this.$route.query.summaryid
-        }
-        this.queryParam.interlockSystemId = this.$route.query.interlockSystemId
+        // if (this.$route.query.summaryid) {
+        //   this.queryParam.summaryid = this.$route.query.summaryid
+        // }
+        // this.queryParam.interlockSystemId = this.$route.query.interlockSystemId
+        this.queryParam.summaryid = this.currentData.summaryid
+        this.queryParam.interlockSystemId = this.currentData.interlockSystemId
         var params = this.getQueryParams();//查询条件
+        // console.log('currentData', this.currentData)
+        
         this.loading = true;
         getAction(this.url.list, params).then((res) => {
           if (res.success) {
@@ -387,6 +408,9 @@
           this.loading = false
         })
       },
+      goBack(){
+        this.$emit('click')
+      },
       initDictConfig(){
       },
       getSuperFieldList(){

src/views/module_interLock/InterlockSummary/InterlockSummaryList.vue

@@ -167,12 +167,10 @@
             align:"center",
             dataIndex: 'interlockname',
             customRender:(t,record,index)=> {
-              const text = record.interlockname
-              var childrenMore = (
-                <a onClick={() => {this.handleDetail(record)}}>{{ text }}</a>
-              )
-              return {children: childrenMore,attrs: {rowSpan:record.rowSpan}};
+              return {children: record.interlockname,attrs: {rowSpan:record.rowSpan}};
             },
+            customCell: (record, index)=>{ return this.customCellDetail(record, index)}
+            // sorter: (a, b) => a.interlockname - b.interlockname,
           },
           {
             title:'联锁条件',
@@ -353,6 +351,28 @@
           }
         }
       },
+      // 单元格点击事件
+      customCellDetail(record, index, columnValue, columnTitle){
+        return {
+          style: {
+            'color': "#008cd6 !important",
+            'cursor': "pointer",
+            'font-size': "16px",
+            'font-weight': "700",
+          },
+          on: {
+            // 点击事件
+            click: (event) => {
+              // this.$router.push({path: '/interLock/detail',query:{summaryid:record.summaryid,interlockSystemId:record.interlockSystemId}})
+              var data = {
+                summaryid: record.summaryid,
+                interlockSystemId: record.interlockSystemId
+              }
+              this.$emit('click', data)
+            },
+          }
+        }
+      },
       // 处理父组件传过来的数据
       getDataList(){
         console.log(111,this.selectData)
@@ -513,10 +533,6 @@
         this.$refs.modalForm.disableSubmit = false;
         this.$refs.modalForm.addInterlock = this.selectData;
       },
-      handleDetail(record){
-        console.log(record)
-        this.$router.push({path: '/interLock/detail',query:{summaryid:record.summaryid,interlockSystemId:record.interlockSystemId}})
-      },
       initDictConfig(){
       },
       getSuperFieldList(){

src/views/module_interLock/InterlockSummary/index.vue

@@ -1,25 +1,43 @@
 <template>
-  <div class="all" id="box" ref="box">
-    <div class="left" id="left">
-      <u-equipment-tree @select="selectEquipment"></u-equipment-tree>
-    </div>
-    <div class="resize" id="resize" title="收缩侧边栏">⋮</div>
-    <div class="right" id="right">
-      <interlock-summary-list ref="summaryList" :selectData="selectData"></interlock-summary-list>
+  <div>
+    <!-- 为了解决菜单高亮的问题，暂时的解决方式是将两个页面作为组件写入页面，通过判断显示不同组件 -->
+    <!-- 联锁总表 -->
+    <div v-if="showPage === 'summary'">
+      <!-- IoT TPM相关 修改框架 -->
+      <!-- <a-tabs v-if="layoutMode === 'iotmenu'"  type="card" default-active-key="1">
+        <a-tab-pane :id="page.fullPath" :key="page.fullPath" v-for="page in iotTpmageList">
+          <span slot="tab" :pagekey="page.fullPath">{{ page.meta.title }}</span>
+        </a-tab-pane>
+      </a-tabs> -->
+      <div class="all" id="box" ref="box">
+        <div class="left" id="left">
+          <u-equipment-tree @select="selectEquipment"></u-equipment-tree>
+        </div>
+        <div class="resize" id="resize" title="收缩侧边栏">⋮</div>
+        <div class="right" id="right">
+          <interlock-summary-list ref="summaryList" :selectData="selectData" @click="summaryListClick"></interlock-summary-list>
+        </div>
+      </div>
     </div>
+    <!-- 详情 -->
+    <interlock-detail-list v-if="showPage === 'detail'" @click="showPage='summary'" ref="summaryDetailRef" :currentData="currentData"></interlock-detail-list>
   </div>
 </template>
 
 <script>
   import InterlockSummaryList from './InterlockSummaryList.vue';
+  import InterlockDetailList from '../InterlockDetail/InterlockDetailList.vue';
 
   export default({
     components: {
-      InterlockSummaryList
+      InterlockSummaryList,
+      InterlockDetailList
     },
     data () {
       return {
-        selectData: {}
+        showPage: 'summary',
+        selectData: {},
+        currentData: {}
       }
     },
     mounted() {
@@ -44,6 +62,14 @@
           })
         }
       },
+      summaryListClick(data){
+        this.showPage='detail'
+        this.currentData = data
+        // this.$nextTick(()=>{
+        //   this.$refs.summaryDetailRef.currentData = data
+        //   console.log('ref', this.$refs.summaryDetailRef.currentData)
+        // })
+      },
       // 拖拽事件
       dragControllerDiv(){
         let resize = document.getElementById("resize");
@@ -115,7 +141,7 @@
   width: 20%;
   /* border: 2px solid red; */
   /* margin-right: 10px; */
-  margin-left: 5px;
+  /* margin-left: 5px; */
 }
 /*拖拽区div样式*/
 .resize {

src/views/module_interLock/interlockHistoryData/InterlockHistory/InterlockHistoryList.vue

@@ -176,7 +176,6 @@
             //   return {children: t,attrs: {rowSpan:r.rowSpan}};
             // },
             customRender:(t,record,index)=> {
-              console.log('t是什么',t)
               const text = record.interlockname
               var childrenMore = (
                 <a onClick={() => {this.handleDetail(record)}}>{{ text }}</a>