From ed35d0b4c2051e067bd9904c4b0158257d5db0d9 Mon Sep 17 00:00:00 2001 From: ZZJ <10913410+zzj2100@user.noreply.gitee.com> Date: 星期二, 02 八月 2022 18:58:30 +0800 Subject: [PATCH] 摄像机树样式,导出数据样式 --- src/views/hashrate/CameraManage/index.vue | 48 ++++++++++++++++++++++++++++++++++++++++++++++-- 1 files changed, 46 insertions(+), 2 deletions(-) diff --git a/src/views/hashrate/CameraManage/index.vue b/src/views/hashrate/CameraManage/index.vue index b738df9..5101a13 100644 --- a/src/views/hashrate/CameraManage/index.vue +++ b/src/views/hashrate/CameraManage/index.vue @@ -13,7 +13,10 @@ </el-select> </div> <div class="content"> - <CameraLeft :appName="'Camera'" ref="left"></CameraLeft> + <div class="column-left" ref="left"> + <div class="resize-line" @mousedown="TextWidthChange"></div> + <CameraLeft :appName="'Camera'" ref="left"></CameraLeft> + </div> <div class="right"> <div class="tabs"> <div @@ -165,6 +168,31 @@ }); }, methods: { + TextWidthChange(e) { + console.log(1212); + let odivParent = e.currentTarget.parentNode; //鑾峰彇鐩爣鐖跺厓绱� + let dx = e.clientX; //褰撲綘绗竴娆″崟鍑荤殑鏃跺�欙紝瀛樺偍x杞寸殑鍧愭爣銆� + let dw = odivParent.offsetWidth; //瀛樺偍榛樿鐨刣iv鐨勫搴︺�� + document.onmousemove = (e) => { + odivParent.style.width = dw + (e.clientX - dx) + "px"; + + if (odivParent.offsetWidth <= 100) { + //褰撶洅瀛愮缉灏忓埌涓�瀹氳寖鍥村唴鐨勬椂鍊欙紝璁╀粬淇濇寔涓�涓浐瀹氬�硷紝涓嶅啀缁х画鏀瑰彉 + odivParent.style.width = "100px"; + } + + if (odivParent.offsetWidth + odivParent.offsetLeft >= this.pdfWidth) { + odivParent.style.width = this.pdfWidth - odivParent.offsetLeft + "px"; + } + }; + document.onmouseup = (e) => { + document.onmousemove = null; + document.onmouseup = null; + }; + e.stopPropagation(); + e.preventDefault(); + return false; + }, handAddDevice(node) { let _this = this; setTimeout(() => { @@ -312,9 +340,25 @@ margin-bottom: 60px; display: flex; align-items: stretch; - .CameraLeft { + .column-left { + position: relative; margin-right: 24px; width: 292px; + background-color: #fff; + } + + .resize-line { + position: absolute; + right: 0; + top: 0; + bottom: 0; + border-right: 2px solid #efefef; + border-left: 2px solid #e0e0e0; + z-index: 1; + cursor: ew-resize; + } + .resize-line:hover { + border-left: 2px dashed skyblue; } .right { -- Gitblit v1.8.0