|
@@ -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%;
|