历史拖拽

src/views/module_interLock/InterlockSummary/InterlockSummaryList.vue

@@ -167,7 +167,6 @@
             align:"center",
             dataIndex: 'interlockname',
             customRender:(t,record,index)=> {
-              console.log('t是什么',t)
               const text = record.interlockname
               var childrenMore = (
                 <a onClick={() => {this.handleDetail(record)}}>{{ text }}</a>
@@ -221,7 +220,6 @@
             //   return {children: t,attrs: {rowSpan:r.rowSpan3}};
             // },
             customRender:(t,record,index)=> {
-              console.log('t是什么',t)
               const text = record.loopHealthLevel
               var childrenMore = (
                 // <a-tooltip>

src/views/module_interLock/interlockHistoryData/InterlockHistoryIndex.vue

@@ -1,9 +1,10 @@
 <template>
-    <div class="all">
-        <div class="left">
+    <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="right">
+        <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>
@@ -27,6 +28,9 @@ import InterlockHistoryList from './InterlockHistory/InterlockHistoryList.vue'
                 selectData: {}
             }
         },
+        mounted() {
+            this.dragControllerDiv()
+        },
         methods: {
             selectEquipment(selectedKeys,e){
                 // console.log(99,selectedKeys,e)
@@ -45,7 +49,62 @@ import InterlockHistoryList from './InterlockHistory/InterlockHistoryList.vue'
                         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;
+                };
+            },
         },
     })
 </script>
@@ -64,6 +123,27 @@ import InterlockHistoryList from './InterlockHistory/InterlockHistoryList.vue'
     // 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%;