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/HashManage/components/SettingBox.vue | 2 dist.rar | 0 src/views/search/components/giantTree/index.vue | 6 ++- src/components/CameraLeft.vue | 10 ++-- src/views/hashrate/CameraManage/index.vue | 48 +++++++++++++++++++++++- package.json | 2 src/views/search/Searching.vue | 24 +++++++----- src/views/search/components/treeMenu/index.vue | 6 ++- src/components/giantTree/index.vue | 12 ++--- src/main.ts | 1 10 files changed, 81 insertions(+), 30 deletions(-) diff --git a/dist.rar b/dist.rar index cd0903b..473c603 100644 --- a/dist.rar +++ b/dist.rar Binary files differ diff --git a/package.json b/package.json index 4bdc30e..f4fb716 100644 --- a/package.json +++ b/package.json @@ -42,7 +42,7 @@ "vue-router": "^3.0.3", "vue-video-player": "^5.0.2", "vue-window-modal": "git+https://github.com/ropbla9/vue-window-modal.git", - "vue2-animate": "^2.1.1", + "vue2-animate": "^2.1.4", "vuedraggable": "^2.23.0", "vuex": "^3.4.0", "webpack": "^4.43.0", diff --git a/src/components/CameraLeft.vue b/src/components/CameraLeft.vue index 49176ec..76f3cbb 100644 --- a/src/components/CameraLeft.vue +++ b/src/components/CameraLeft.vue @@ -1,7 +1,7 @@ <template> - <div class="CameraLeft"> - <div class="tree"> - <transition name="slideLeft"> + <transition name="slideLeft"> + <div class="CameraLeft"> + <div class="tree"> <div class="left-tree-box" v-show="TreeDataPool.showTreeBox" @@ -370,9 +370,9 @@ <button ref="import-btn" v-show="false"></button> </el-upload> </div> - </transition> + </div> </div> - </div> + </transition> </template> <script> diff --git a/src/components/giantTree/index.vue b/src/components/giantTree/index.vue index c7d3d02..9dca0d4 100644 --- a/src/components/giantTree/index.vue +++ b/src/components/giantTree/index.vue @@ -45,11 +45,7 @@ /> <div class="empty" v-if="!node.length">鏆傛棤鎽勫儚鏈烘暟鎹�,璇锋坊鍔犳憚鍍忔満!</div> <div class="dialog-box-bg" v-show="showDialog" @click="hideDialogBox"></div> - <div - class="dialog-box" - v-show="showDialog" - :style="{ left: clientX + 'px', top: clientY + 'px' }" - > + <div class="dialog-box" v-show="showDialog"> <el-card :body-style="{ padding: '10px' }"> <el-form :model="dialogForm" @@ -416,9 +412,11 @@ } .dialog-box { - position: absolute; + top: 415px; + left: 43px; + position: fixed; width: 220px; - z-index: 1; + z-index: 3; } .dialog-box-bg { position: absolute; diff --git a/src/main.ts b/src/main.ts index 7f30d34..1f3cd88 100644 --- a/src/main.ts +++ b/src/main.ts @@ -16,6 +16,7 @@ import "swiper/dist/css/swiper.css"; import './assets/css/element-variables.scss' +import 'vue2-animate/dist/vue2-animate.min.css' 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 { diff --git a/src/views/hashrate/HashManage/components/SettingBox.vue b/src/views/hashrate/HashManage/components/SettingBox.vue index cc03f06..5fde76d 100644 --- a/src/views/hashrate/HashManage/components/SettingBox.vue +++ b/src/views/hashrate/HashManage/components/SettingBox.vue @@ -1,6 +1,6 @@ <template> <div class="SettingBox"> - <div class="title">閫�鍑洪泦缇�</div> + <div class="title">绠楀姏璁剧疆</div> <div class="settingBody"> <div class="settingItem"> diff --git a/src/views/search/Searching.vue b/src/views/search/Searching.vue index 104329b..52a08f4 100644 --- a/src/views/search/Searching.vue +++ b/src/views/search/Searching.vue @@ -141,7 +141,7 @@ <div class="btnArea"> <div class="button light" @click.stop="showDownBox = !showDownBox"> - <span class="el-icon-plus"></span> + <span class="iconfont"></span> 瀵煎嚭鏁版嵁 </div> @@ -1075,39 +1075,43 @@ .btnArea { padding: 0 10px; margin-right: 10px; - background-color: #0064ff; + color: #0064ff; + background-color: #fff; text-align: center; line-height: 28px; display: inline-block; height: 28px; border-radius: 5px; cursor: pointer; - color: #fff; font-size: 12px; + border: 1px solid #0065ff; + + .light { + } .downBox { top: 104px; right: 255px; position: absolute; text-align: center; - border: 1px solid #0064ff; background-color: #fff; - border-radius: 9px; + border-radius: 3px; color: #3d3d3d; - width: 100px; z-index: 10; + padding: 10px; + box-shadow: 0px 1px 10px 0px rgba(0, 0, 0, 0.05), + 0px 4px 5px 0px rgba(0, 0, 0, 0.08), 0px 2px 4px -1px rgba(0, 0, 0, 0.12); .downItem { text-align: center; - height: 28px; - line-height: 28px; + height: 40px; + line-height: 40px; font-size: 12px; - border-radius: 9px; cursor: pointer; &:hover { - background-color: #f5f5fa; + background-color: #f0f5fa; } } } diff --git a/src/views/search/components/giantTree/index.vue b/src/views/search/components/giantTree/index.vue index f24e7a8..faf2f4c 100644 --- a/src/views/search/components/giantTree/index.vue +++ b/src/views/search/components/giantTree/index.vue @@ -346,9 +346,11 @@ </script> <style lang="scss" scoped> .dialog-box { - position: absolute; + top: 415px; + left: 43px; + position: fixed; width: 220px; - z-index: 1; + z-index: 3; } .dialog-box-bg { position: absolute; diff --git a/src/views/search/components/treeMenu/index.vue b/src/views/search/components/treeMenu/index.vue index 1e244bd..2ec54db 100644 --- a/src/views/search/components/treeMenu/index.vue +++ b/src/views/search/components/treeMenu/index.vue @@ -403,9 +403,11 @@ </script> <style lang="scss" scoped> .dialog-box { - position: absolute; + top: 415px; + left: 43px; + position: fixed; width: 220px; - z-index: 1; + z-index: 3; } .dialog-box-bg { position: absolute; -- Gitblit v1.8.0