按照IOT TPM 样式修改阶段二；树拖拽优化

src/assets/less/interLock.css

@@ -1,6 +1,6 @@
 /**IoT Edge相关 修改框架 */
 /**
-  .iotmenu-content{
+  .iotmenu-content-layout{
     .ant-btn-primary{
       background: linear-gradient(0deg,rgba(1,159,243,.4),rgba(138,210,249,.4)) !important;
       background-color: #0fabfe!important;
@@ -13,53 +13,98 @@
   } 
 */
 /**IoT TPM相关 修改框架 */
-.iotmenu-content-layout .iotmenu-content {
+.iotmenu-content-container .iotmenu-content-layout {
+  height: 100%;
+  overflow: hidden;
+  /** 系统自带的main */
+}
+.iotmenu-content-container .iotmenu-content-layout .iotmenu-content-header {
+  width: 160px;
+  height: 48px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 12px 16px 12px 24px;
+  border-radius: 8px 8px 0 0 ;
+  color: #323233;
+  background: #FAFAFA;
+  font-size: 16px;
+  font-weight: 700;
+}
+.iotmenu-content-container .iotmenu-content-layout .iotmenu-content-header .anticon {
+  color: #008cd6;
+  padding-right: 12px;
+}
+.iotmenu-content-container .iotmenu-content-layout .iotmenu-content {
+  height: calc(100vh - 59px - 48px - 6px);
+  background: #FAFAFA;
   overflow: auto;
 }
-.iotmenu-content-layout .ant-btn-primary {
+.iotmenu-content-container .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 {
+.iotmenu-content-container .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 {
+.iotmenu-content-container .ant-table {
   background: transparent !important;
 }
-.iotmenu-content-layout .ant-table .ant-table-thead tr th {
+.iotmenu-content-container .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 {
+.iotmenu-content-container .ant-table .ant-table-tbody tr td {
   color: #323233 !important;
   font-size: 15px;
 }
-.iotmenu-content-layout .ant-tabs .ant-tabs-bar {
+.iotmenu-content-container .ant-tabs .ant-tabs-bar {
   margin: 0 !important;
+  border: none;
 }
-.iotmenu-content-layout .ant-tabs .ant-tabs-bar .ant-tabs-nav-container {
+.iotmenu-content-container .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 {
+.iotmenu-content-container .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;
+.iotmenu-content-container .ant-tabs .ant-tabs-bar .ant-tabs-nav-container .ant-tabs-nav-wrap .ant-tabs-nav .ant-tabs-tab {
+  width: 160px;
   height: 48px !important;
   line-height: 48px;
+  font-size: 16px;
+  text-align: center;
+  color: #89898a;
+  padding: 0 24px;
+  font-weight: 700;
+  background: transparent;
+  border: transparent;
+  border-radius: 8px 8px 0 0;
+}
+.iotmenu-content-container .ant-tabs .ant-tabs-bar .ant-tabs-nav-container .ant-tabs-nav-wrap .ant-tabs-nav .ant-tabs-tab-active {
+  color: #323233;
+  background: #fafafa;
+  border: transparent;
+  box-shadow: 0 3px 8px 0 rgba(2, 72, 109, 0.15);
 }
-.iotmenu-content-layout .interlock-detail-header {
+.iotmenu-content-container .ant-tabs .ant-tabs-bar .ant-tabs-nav-container .ant-tabs-nav-wrap .ant-tabs-nav .ant-tabs-tab-active .anticon {
+  color: #008cd6;
+}
+.iotmenu-content-container .interlock-detail-header {
   font-size: 24px;
   font-weight: 700;
   color: #323233;
   padding: 8px 24px;
 }
-.iotmenu-content-layout .interlock-detail-header .anticon {
+.iotmenu-content-container .interlock-detail-header .anticon {
   color: #008cd6;
   padding-right: 4px;
 }
+.iotmenu-content-container .ant-card {
+  background: #FAFAFA;
+}

src/assets/less/interLock.less

@@ -1,6 +1,6 @@
 /**IoT Edge相关 修改框架 */
 /**
-  .iotmenu-content{
+  .iotmenu-content-layout{
     .ant-btn-primary{
       background: linear-gradient(0deg,rgba(1,159,243,.4),rgba(138,210,249,.4)) !important;
       background-color: #0fabfe!important;
@@ -14,9 +14,49 @@
 */
 
 /**IoT TPM相关 修改框架 */
-.iotmenu-content-layout{
-  .iotmenu-content{
-    overflow: auto;
+@iotTpmFontColor: #323233;
+@iotTpmContentBg: #FAFAFA;
+
+
+.iotmenu-content-container{
+  .iotmenu-content-layout{
+    height: 100%;
+    overflow: hidden;
+    /** 系统自带的main */
+    // .main{
+    //   height: 100%;
+    //   overflow: hidden;
+    // }
+    // .iotmenu-content-page{
+    //   height: 100%;
+    //   overflow: hidden;
+    // }
+    .iotmenu-content-header{
+      width: 160px;
+      // width: 210px;
+      height: 48px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      padding: 12px 16px 12px 24px;
+      border-radius: 8px 8px 0 0 ;
+      color: @iotTpmFontColor;
+      background: @iotTpmContentBg;
+      font-size: 16px;
+      font-weight: 700;
+      // color: #008cd6;
+      // box-shadow: 0 0 8px 0 rgba(2,72,109,.15);
+      .anticon{
+        color: #008cd6;
+        padding-right: 12px;
+      }
+    }
+    .iotmenu-content{
+      // height: calc(100% - 48px);
+      height: calc(100vh - 59px - 48px - 6px);
+      background: @iotTpmContentBg;
+      overflow: auto;
+    }
   }
   // primary状态按钮
   .ant-btn-primary{
@@ -29,7 +69,7 @@
     .ant-form{
       .ant-form-item{
         .ant-form-item-label label{
-          color: #323233;
+          color: @iotTpmFontColor;
           font-size: 16px;
           font-weight: 400;
         }
@@ -42,7 +82,7 @@
     .ant-table-thead{
       tr{
         th{
-          color: #323233 !important;
+          color: @iotTpmFontColor !important;
           font-size: 16px !important;
           font-weight: 700 !important;
         }
@@ -51,7 +91,7 @@
     .ant-table-tbody{
       tr{
         td{
-          color: #323233 !important;
+          color: @iotTpmFontColor !important;
           font-size: 15px;
         }
       }
@@ -61,17 +101,39 @@
   .ant-tabs{
     .ant-tabs-bar{
       margin: 0 !important;
+      border: none;
       .ant-tabs-nav-container{
         height: 48px !important;
         margin: 0;
-        // 
+        // tab行
         .ant-tabs-nav-wrap{
           height: 48px !important;
+          // 所有tab标签
           .ant-tabs-nav{
+            // 每个tab标签
             .ant-tabs-tab{
-              font-size: 16px;
+              width: 160px;
               height: 48px !important;
               line-height: 48px;
+              font-size: 16px;
+              text-align: center;
+              color: #89898a;
+              padding: 0 24px;
+              font-weight: 700;
+              background: transparent;
+              border: transparent;
+              border-radius: 8px 8px 0 0;
+            }
+            // 选中的tab
+            .ant-tabs-tab-active{
+              color: @iotTpmFontColor;
+              // color: #008cd6;
+              background: #fafafa;
+              border: transparent;
+              box-shadow: 0 3px 8px 0 rgba(2,72,109,.15);
+              .anticon{
+                color: #008cd6;
+              }
             }
           }
         }
@@ -86,11 +148,14 @@
   .interlock-detail-header{
     font-size: 24px; 
     font-weight: 700;
-    color: #323233;
+    color: @iotTpmFontColor;
     padding: 8px 24px;
     .anticon{
       color: #008cd6;
       padding-right: 4px;
     }
   }
+  .ant-card{
+    background: @iotTpmContentBg;
+  }
 }

src/components/layouts/TabLayout.vue

@@ -19,7 +19,7 @@
       </a-tab-pane>
     </a-tabs>
     <!-- IoT TPM相关 修改框架 -->
-    <div :style="layoutMode !== 'iotmenu'?'margin: 12px 12px 0;':''" :class="layoutMode === 'iotmenu'?'iotmenu-content':''">
+    <div :style="layoutMode !== 'iotmenu'?'margin: 12px 12px 0;':''" :class="layoutMode === 'iotmenu'?'iotmenu-content-layout':''">
     <!-- IoT Edge相关 修改框架 -->
     <!-- <div :style="layoutMode === 'iotmenu'?'margin: 20px 16px 0;':'margin: 12px 12px 0;'"> -->
     <!-- <div style="margin: 12px 12px 0;"> -->

src/components/module_interLock/UEquipmentTree/UEquipmentTreeDrag.vue

@@ -0,0 +1,383 @@
+<template>
+  <div id="dragBox" ref="dragBoxRef" class="u-tree-drag">
+    <!-- 左侧树 -->
+    <div id="leftTree" class="left-tree">
+      <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" />
+        </div>
+        <div v-if="treeData.type == 'history'">
+          <a-input-search style="width:100%;margin-left:2%" allow-clear placeholder="请输入" @change="onChange" />
+        </div>
+
+        <div class="interlock-tree-content">
+          <a-tree
+            :expanded-keys="expandedKeys"
+            auto-expand-parent
+            :tree-data="tpmTreeData"
+            @expand="onExpand"
+            :replace-fields="replaceFields"
+            @select="selectNode"
+            blockNode
+            >
+            <template v-slot:title="nodeData">
+              <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" />
+                    <a-menu slot="overlay">
+                      <a-menu-item>
+                        <a @click="handleEdit(nodeData)">修改</a>
+                      </a-menu-item>
+                      <a-menu-item>
+                        <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(nodeData.id)">
+                          <a>删除</a>
+                        </a-popconfirm>
+                      </a-menu-item>
+                    </a-menu>
+                  </a-dropdown>
+                </div>
+              </div>
+            </template>
+            <!-- :filter-tree-node="filterTreeNode" -->
+          </a-tree>
+        </div>
+      </div>
+    </div>
+    <!-- 拖拽盒子 -->
+    <div class="resize" id="resize" title="收缩侧边栏">⋮</div>
+    <!-- 右侧slot -->
+    <div id="rightSlot" class="right-content">
+      <slot></slot>
+    </div>
+    <!-- 新增修改弹框 -->
+    <base-InterLock-modal ref="modalForm" @ok="modalFormOk"></base-InterLock-modal>
+  </div>
+</template>
+
+<script>
+  import { getAction,deleteAction } from '@api/manage'
+  import BaseInterLockModal from '@/views/module_interLock/baseInterLock/modules/BaseInterLockModal.vue'
+  export default({
+    name: 'UEquipmentTree',
+    components: {
+      BaseInterLockModal
+    },
+    props: {
+      treeData: {
+        type: Object,
+        default: function(){
+            return {} // 使用工厂函数返回默认值
+        }
+      },
+    },
+    data () {
+      return {
+        expandedKeys: [],
+        searchValue: '',
+        autoExpandParent: true,
+        tpmListData: [], // 原始数据
+        tpmTreeData: [], // 树形列表使用数据
+        replaceFields: {
+          children: 'children',
+          title: 'interlockName',
+        },
+        url: {
+          delete: "/base/interlockBase/delete",
+        },
+      }
+    },
+    created() {
+      this.getTpmTreeData()
+    },
+    mounted() {
+      this.dragControllerDiv()
+    },
+    methods: {
+      getTpmTreeData(){
+        // 现版本
+        // getAction(`/base/interlockBase/lever12`).then(res=>{
+        // 原版本
+        getAction(`/base/interlockBase/list`).then(res=>{
+          // if (res.success) {
+            console.log('11111',res)
+            // 防止res.result对tpmListData造成地址赋值的问题
+            this.tpmListData = JSON.parse(JSON.stringify(res))
+            // 现版本
+            // this.tpmTreeData = this.tpmListData
+            // 原版本
+            this.tpmTreeData = this.handleTree(res, "id", "pid")
+            console.log(this.tpmTreeData)
+          // } else {
+
+          // }
+        })
+      },
+      filterTreeNode(node) {
+        // console.log(node)
+        // if (!inputValue) return true;
+        return node.title.indexOf('设备') !== -1;
+      },
+      onExpand(expandedKeys) {
+        this.expandedKeys = expandedKeys;
+        this.autoExpandParent = false;
+      },
+      onChange(e) {
+        const value = e.target.value;
+        // 筛选后数据
+        var filterData = []
+        // 筛选符合条件的数据：包含当前搜索的项
+        console.log('原数据',this.tpmListData)
+        filterData = this.tpmListData.filter(item => (item.interlockName.indexOf(value) !== -1))
+        // var data = []
+        // filterData.forEach(item => {
+        //   var arr = this.tpmListData.filter(data => item.pid === data.id)
+        //   console.log('父级', arr)
+        //   // filterData = [...filterData, ...arr]
+        // })
+        // 循环寻找父级
+        // console.log(this.findParents(this.tpmTreeData, '287813167808513'))
+
+
+
+        // 原版本
+        this.tpmTreeData = this.handleTree(filterData, "id", "pid")
+        // 现版本
+        // this.tpmTreeData = filterData
+        // const expandedKeys = dataList.map(item => {
+        //   if (item.name.indexOf(value) > -1) {
+        //       // return getParentKey(item.key, gData);
+        //       return this.filterNode(item.key, gData);
+        //   }
+        //   return null;
+        // }).filter((item, i, self) => item && self.indexOf(item) === i);
+        // Object.assign(this, {
+        //   expandedKeys,
+        //   searchValue: value,
+        //   autoExpandParent: true,
+        // });
+      },
+      // findParents(treeData,id){
+      //   let allparents = []
+      //   if(treeData.length==0){
+      //     return
+      //   }
+
+      //   let findele = (data,id) => {
+      //     if(!id) return
+      //     data.forEach((item,index) => {
+      //       if(item.id == id){
+      //         allparents.unshift(item.id)
+      //         findele(treeData,item.parentid)
+
+      //       }else{
+      //         if(!!item.children){
+      //             findele(item.children,id)
+      //         }
+
+      //       }
+      //     })
+      //   }
+
+      //   findele(treeData,id)
+      //   return allparents
+
+      // },
+      selectNode(selectedKeys, e){
+        this.$emit('select', selectedKeys, e)
+      },
+      handleAdd: function () {
+        this.$refs.modalForm.add();
+        this.$refs.modalForm.title = "新增";
+        this.$refs.modalForm.disableSubmit = false;
+        this.$refs.modalForm.disableEdit = false;
+      },
+      handleEdit: function (record) {
+        this.$refs.modalForm.edit(record);
+        this.$refs.modalForm.title = "编辑";
+        this.$refs.modalForm.disableSubmit = false;
+        this.$refs.modalForm.disableEdit = true;
+      },
+      handleDelete: function (id) {
+        if(!this.url.delete){
+          this.$message.error("请设置url.delete属性!")
+          return
+        }
+        var that = this;
+        deleteAction(that.url.delete, {id: id}).then((res) => {
+          if (res.success) {
+            that.getTpmTreeData();
+            that.$message.success(res.message);
+          } else {
+            that.$message.warning(res.message);
+          }
+        });
+      },
+      modalFormOk() {
+        // 新增/修改 成功时，重载列表
+        this.getTpmTreeData();
+      },
+      // 拖拽事件
+      dragControllerDiv(){
+        let resize = document.getElementById("resize");
+        let leftTree = document.getElementById("leftTree");
+        let rightSlot = document.getElementById("rightSlot");
+        let dragBox = document.getElementById("dragBox");
+
+        // 鼠标按下事件
+        resize.onmousedown = function (e) {
+          // 记录坐标起始位置
+          let startX = e.clientX;
+
+          // 左边元素起始宽度
+          resize.left = leftTree.offsetWidth;
+          // console.log("宽度：", resize.left);
+          // 鼠标拖动事件
+          document.onmousemove = function (e) {
+            // 鼠标拖动的终止位置
+            let endX = e.clientX;
+
+            // （endx-startx）= 移动的距离
+            //  resize.left + 移动的距离 = 左边区域最后的宽度
+            let moveLen = resize.left + (endX - startX);
+            // console.log(moveLen);
+
+            // 左右两边区域的总宽度 = 大容器宽度 - 中间区域拖拉框的宽度
+            let maxWidth = dragBox.clientWidth - resize.offsetWidth;
+
+            // 限制左边区域的最小宽度为80px
+            if (moveLen < 180) moveLen = 180;
+
+            // 右边区域最小宽度为 150px 限制左边区域到150后不能再拉宽
+            if (moveLen > maxWidth - 420) moveLen = maxWidth - 420;
+
+            // 设置左边区域的宽度，通过换算为百分比的形式，实现窗体放大缩小自适应
+            // console.log((moveLen / maxWidth) * 100);
+            // leftTree.style.width =(moveLen / maxWidth * 100) + '%';
+            leftTree.style.width = moveLen + "px";
+
+            // 右边区域即是总大小 - 左边宽度 - 拖动条宽度
+            // console.log(((maxWidth - moveLen) / maxWidth) * 100);
+            rightSlot.style.width = maxWidth - moveLen + "px";
+            // console.log(moveLen);
+          };
+          // 鼠标松开事件
+          document.onmouseup = function (evt) {
+            // console.log(11);
+            document.onmousemove = null;
+            document.onmouseup = null;
+            resize.releaseCapture && resize.releaseCapture(); //当你不在需要继续获得鼠标消息就要应该调用ReleaseCapture()释放掉
+          };
+          resize.setCapture && resize.setCapture(); //该函数在属于当前线程的指定窗口里设置鼠标捕获
+          return false;
+        };
+      },
+    },
+  })
+</script>
+
+<style lang="less">
+.u-tree-drag{
+  height: 100%;
+  width: 100%;
+  display: flex;
+  .left-tree{
+    height: 100%;
+    width: 20%;
+  }
+  /*拖拽区div样式*/
+  .resize {
+    cursor: col-resize;
+    float: left;
+    position: relative;
+    top: 45%;
+    background-color: #d6d6d6;
+    border-radius: 5px;
+    margin-top: -10px;
+    width: 10px;
+    height: 50px;
+    background-size: cover;
+    background-position: center;
+    /*z-index: 99999;*/
+    font-size: 32px;
+    color: white;
+  }
+  /*拖拽区鼠标悬停样式*/
+  .resize:hover {
+    color: #444444;
+  }
+  /* 右侧 */
+  .right-content{
+    height: 100%;
+    width: 80%;
+  }
+}
+.interlock-tree-container{
+  width: 100%;
+  height: 100%;
+  background-color: transparent;
+  padding: 15px;
+  // 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/module_interLock/index.js

@@ -1,8 +1,10 @@
 import UEquipmentTree from './UEquipmentTree/UEquipmentTree'
+import UEquipmentTreeDrag from './UEquipmentTree/UEquipmentTreeDrag'
 
 export default {
   install(Vue) {
     Vue.component('UEquipmentTree', UEquipmentTree)
+    Vue.component('UEquipmentTreeDrag', UEquipmentTreeDrag)
 
     //注册全局js函数和变量
     // Vue.prototype.$UModal = UModal

src/components/page/GlobalLayout.vue

@@ -103,7 +103,7 @@
             :collapsed="collapsed"
             :collapsible="true"></side-menu>
           
-          <div class="iotmenu-content-layout">
+          <div class="iotmenu-content-container">
             <slot></slot>
           </div>
         </template>
@@ -382,7 +382,7 @@
           height: 100%;
           overflow: auto;
         }
-        .iotmenu-content-layout{
+        .iotmenu-content-container{
           width: 100%;
           height: calc(100% - 6px);
           overflow: hidden;
@@ -413,7 +413,7 @@
     //       height: 100%;
     //       overflow: auto;
     //     }
-    //     .iotmenu-content-layout{
+    //     .iotmenu-content-container{
     //       width: 100%;
     //       height: 100%;
     //       overflow: auto;

src/views/module_interLock/InterlockSummary/index.vue

@@ -2,23 +2,23 @@
   <div>
     <!-- 为了解决菜单高亮的问题，暂时的解决方式是将两个页面作为组件写入页面，通过判断显示不同组件 -->
     <!-- 联锁总表 -->
-    <div v-if="showPage === 'summary'">
+    <template 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">
+      <div class="iotmenu-content-header">
+        <a-icon type="file-text" />
+        <span>联锁总表</span>
+      </div>
+      <div class="iotmenu-content">
+        <u-equipment-tree-drag @select="selectEquipment">
           <interlock-summary-list ref="summaryList" :selectData="selectData" @click="summaryListClick"></interlock-summary-list>
-        </div>
+        </u-equipment-tree-drag>
       </div>
-    </div>
+    </template>
     <!-- 详情 -->
     <interlock-detail-list v-if="showPage === 'detail'" @click="showPage='summary'" ref="summaryDetailRef" :currentData="currentData"></interlock-detail-list>
   </div>
@@ -41,7 +41,6 @@
       }
     },
     mounted() {
-      this.dragControllerDiv()
     },
     methods: {
       selectEquipment(selectedKeys,e){
@@ -70,104 +69,7 @@
         //   console.log('ref', this.$refs.summaryDetailRef.currentData)
         // })
       },
-      // 拖拽事件
-      dragControllerDiv(){
-        let resize = document.getElementById("resize");
-        let left = document.getElementById("left");
-        let right = document.getElementById("right");
-        let box = document.getElementById("box");
-
-        // 鼠标按下事件
-        resize.onmousedown = function (e) {
-          // 记录坐标起始位置
-          let startX = e.clientX;
-
-          // 左边元素起始宽度
-          resize.left = left.offsetWidth;
-          // console.log("宽度：", resize.left);
-          // 鼠标拖动事件
-          document.onmousemove = function (e) {
-            // 鼠标拖动的终止位置
-            let endX = e.clientX;
-
-            // （endx-startx）= 移动的距离
-            //  resize.left + 移动的距离 = 左边区域最后的宽度
-            let moveLen = resize.left + (endX - startX);
-            // console.log(moveLen);
-
-            // 左右两边区域的总宽度 = 大容器宽度 - 中间区域拖拉框的宽度
-            let maxWidth = box.clientWidth - resize.offsetWidth;
-
-            // 限制左边区域的最小宽度为80px
-            if (moveLen < 80) moveLen = 80;
-
-            // 右边区域最小宽度为 150px 限制左边区域到150后不能再拉宽
-            if (moveLen > maxWidth - 420) moveLen = maxWidth - 420;
-
-            // 设置左边区域的宽度，通过换算为百分比的形式，实现窗体放大缩小自适应
-            // console.log((moveLen / maxWidth) * 100);
-            // left.style.width =(moveLen / maxWidth * 100) + '%';
-            left.style.width = moveLen + "px";
-
-            // 右边区域即是总大小 - 左边宽度 - 拖动条宽度
-            // console.log(((maxWidth - moveLen) / maxWidth) * 100);
-            right.style.width = maxWidth - moveLen + "px";
-            // console.log(moveLen);
-          };
-          // 鼠标松开事件
-          document.onmouseup = function (evt) {
-            // console.log(11);
-            document.onmousemove = null;
-            document.onmouseup = null;
-            resize.releaseCapture && resize.releaseCapture(); //当你不在需要继续获得鼠标消息就要应该调用ReleaseCapture()释放掉
-          };
-          resize.setCapture && resize.setCapture(); //该函数在属于当前线程的指定窗口里设置鼠标捕获
-          return false;
-        };
-      },
     },
   })
 </script>
 
-<style scoped>
-.all{
-  height: calc(100vh - 1px);
-  /* height: 100%; */
-  width: 100%;
-  display: flex;
-}
-.left{
-  height: 100%;
-  width: 20%;
-  /* border: 2px solid red; */
-  /* margin-right: 10px; */
-  /* margin-left: 5px; */
-}
-/*拖拽区div样式*/
-.resize {
-  cursor: col-resize;
-  float: left;
-  position: relative;
-  top: 45%;
-  background-color: #d6d6d6;
-  border-radius: 5px;
-  margin-top: -10px;
-  width: 10px;
-  height: 50px;
-  background-size: cover;
-  background-position: center;
-  /*z-index: 99999;*/
-  font-size: 32px;
-  color: white;
-}
-/*拖拽区鼠标悬停样式*/
-.resize:hover {
-  color: #444444;
-}
-/* 右侧 */
-.right{
-  height: 100%;
-  width: 80%;
-  /* border: 2px solid red; */
-}
-</style>

src/views/module_interLock/interlockHistoryData/InterlockHistoryIndex.vue

@@ -1,152 +1,52 @@
 <template>
-    <div class="all" id="box" ref="box">
-        <div class="left" id="left">
-            <u-equipment-tree @select="selectEquipment" :treeData="treeData"></u-equipment-tree>
-        </div>
-        <div class="resize" id="resize" title="收缩侧边栏">⋮</div>
-        <div class="right" id="right">
-          <interlock-history-list ref="summaryList" :selectData="selectData"></interlock-history-list>
-          <!-- <interlock-summary-list ref="summaryList" :selectData="selectData"></interlock-summary-list> -->
-        </div>
-    </div>
+  <div class="iotmenu-content">
+    <u-equipment-tree-drag @select="selectEquipment" :treeData="treeData">
+      <interlock-history-list ref="summaryList" :selectData="selectData"></interlock-history-list>
+    </u-equipment-tree-drag>
+  </div>
 </template>
 
 <script>
 
 import InterlockSummaryList from '../InterlockSummary/InterlockSummaryList.vue'
 import InterlockHistoryList from './InterlockHistory/InterlockHistoryList.vue'
-    export default({
-        components: {
-          InterlockHistoryList,
-          InterlockSummaryList
+  export default({
+    components: {
+      InterlockHistoryList,
+      InterlockSummaryList
+    },
+    data () {
+      return {
+        treeData: {
+          type: 'history',
         },
-        data () {
-            return {
-                treeData: {
-                    type: 'history',
-                },
-                selectData: {}
-            }
-        },
-        mounted() {
-            this.dragControllerDiv()
-        },
-        methods: {
-            selectEquipment(selectedKeys,e){
-                // console.log(99,selectedKeys,e)
-                if (selectedKeys.length == 0) {
-                    this.$nextTick(()=>{
-                        this.$refs.summaryList.searchReset();
-                    })
-                } else {
-                    let interlockType = e.selectedNodes[0].data.props.interlockType
-                    let pid = e.selectedNodes[0].data.props.pid
-                    // console.log(88,interlockType)
-                    this.selectData.interlockType = interlockType
-                    this.selectData.pid = pid
-                    this.selectData.id = e.selectedNodes[0].data.props.id
-                    this.$nextTick(()=>{
-                        this.$refs.summaryList.getDataList();
-                    })
-                }
-            },
-            // 拖拽事件
-            dragControllerDiv(){
-                let resize = document.getElementById("resize");
-                let left = document.getElementById("left");
-                let right = document.getElementById("right");
-                let box = document.getElementById("box");
-
-                // 鼠标按下事件
-                resize.onmousedown = function (e) {
-                // 记录坐标起始位置
-                let startX = e.clientX;
-
-                // 左边元素起始宽度
-                resize.left = left.offsetWidth;
-                // console.log("宽度：", resize.left);
-                // 鼠标拖动事件
-                document.onmousemove = function (e) {
-                    // 鼠标拖动的终止位置
-                    let endX = e.clientX;
-
-                    // （endx-startx）= 移动的距离
-                    //  resize.left + 移动的距离 = 左边区域最后的宽度
-                    let moveLen = resize.left + (endX - startX);
-                    // console.log(moveLen);
-
-                    // 左右两边区域的总宽度 = 大容器宽度 - 中间区域拖拉框的宽度
-                    let maxWidth = box.clientWidth - resize.offsetWidth;
-
-                    // 限制左边区域的最小宽度为80px
-                    if (moveLen < 80) moveLen = 80;
-
-                    // 右边区域最小宽度为 150px 限制左边区域到150后不能再拉宽
-                    if (moveLen > maxWidth - 420) moveLen = maxWidth - 420;
-
-                    // 设置左边区域的宽度，通过换算为百分比的形式，实现窗体放大缩小自适应
-                    // console.log((moveLen / maxWidth) * 100);
-                    // left.style.width =(moveLen / maxWidth * 100) + '%';
-                    left.style.width = moveLen + "px";
-
-                    // 右边区域即是总大小 - 左边宽度 - 拖动条宽度
-                    // console.log(((maxWidth - moveLen) / maxWidth) * 100);
-                    right.style.width = maxWidth - moveLen + "px";
-                    // console.log(moveLen);
-                };
-                // 鼠标松开事件
-                document.onmouseup = function (evt) {
-                    // console.log(11);
-                    document.onmousemove = null;
-                    document.onmouseup = null;
-                    resize.releaseCapture && resize.releaseCapture(); //当你不在需要继续获得鼠标消息就要应该调用ReleaseCapture()释放掉
-                };
-                resize.setCapture && resize.setCapture(); //该函数在属于当前线程的指定窗口里设置鼠标捕获
-                return false;
-                };
-            },
-        },
-    })
+        selectData: {}
+      }
+    },
+    mounted() {
+    },
+    methods: {
+      selectEquipment(selectedKeys,e){
+        // console.log(99,selectedKeys,e)
+        if (selectedKeys.length == 0) {
+          this.$nextTick(()=>{
+            this.$refs.summaryList.searchReset();
+          })
+        } else {
+          let interlockType = e.selectedNodes[0].data.props.interlockType
+          let pid = e.selectedNodes[0].data.props.pid
+          // console.log(88,interlockType)
+          this.selectData.interlockType = interlockType
+          this.selectData.pid = pid
+          this.selectData.id = e.selectedNodes[0].data.props.id
+          this.$nextTick(()=>{
+            this.$refs.summaryList.getDataList();
+          })
+        }
+      },
+    },
+  })
 </script>
 
 <style lang="less" scoped>
-.all{
-    // height: calc(100vh - 2px);
-    height: 100%;
-    width: 100%;
-    display: flex;
-}
-.left{
-    height: 100%;
-    width: 20%;
-    /* border: 2px solid red; */
-    // margin-right: 10px;
-    margin-left: 5px;
-}
-/*拖拽区div样式*/
-.resize {
-  cursor: col-resize;
-  float: left;
-  position: relative;
-  top: 45%;
-  background-color: #d6d6d6;
-  border-radius: 5px;
-  margin-top: -10px;
-  width: 10px;
-  height: 50px;
-  background-size: cover;
-  background-position: center;
-  /*z-index: 99999;*/
-  font-size: 32px;
-  color: white;
-}
-/*拖拽区鼠标悬停样式*/
-.resize:hover {
-  color: #444444;
-}
-.right{
-    height: 100%;
-    width: 80%;
-    /* border: 2px solid red; */
-}
 </style>

src/views/module_interLock/interlockHistoryData/InterlockReport/InterlockDataReportList.vue

@@ -1,6 +1,5 @@
 <template>
-  <!-- <a-card :bordered="false"> -->
-  <div>
+  <a-card :bordered="false">
     <!-- 查询区域 -->
     <div class="table-page-search-wrapper">
       <a-form layout="inline" @keyup.enter.native="searchQuery">
@@ -124,8 +123,7 @@
     </div>
 
     <interlock-data-report-modal ref="modalForm" @ok="modalFormOk"></interlock-data-report-modal>
-  </div>
-  <!-- </a-card> -->
+  </a-card>
 </template>
 
 <script>

src/views/module_interLock/interlockHistoryData/InterlockTimedReport.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="iotmenu-content">
     <InterlockDataReportList></InterlockDataReportList>
   </div>
 </template>

src/views/module_interLock/interlockHistoryData/index.vue

@@ -1,14 +1,20 @@
 <template>
-  <a-card :bordered="false">
-    <a-tabs @change="callback">
-      <a-tab-pane key="historyData" tab="历史数据">
-        <interlock-history-index></interlock-history-index>
-      </a-tab-pane>
-      <a-tab-pane key="timedReport" tab="定时报表">
-        <interlock-timedReport></interlock-timedReport>
-      </a-tab-pane>
-    </a-tabs>
-  </a-card>
+  <a-tabs type="card">
+    <a-tab-pane key="historyData">
+      <span slot="tab">
+        <a-icon type="file-text" />
+        历史数据
+      </span>
+      <interlock-history-index></interlock-history-index>
+    </a-tab-pane>
+    <a-tab-pane key="timedReport">
+      <span slot="tab">
+        <a-icon type="file-text" />
+        定时报表
+      </span>
+      <interlock-timedReport></interlock-timedReport>
+    </a-tab-pane>
+  </a-tabs>
 </template>
 
 <script>
@@ -29,9 +35,6 @@ export default {
   mounted () {
   },
   methods: {
-    callback(key){
-      console.log(key);
-    },
   }
 }
 </script>