优化滚动条样式

src/components/AppConfig/index.vue

@@ -4,6 +4,7 @@
 
 <script setup>
 import {ElMessage, ElLoading, ElNotification, ElMessageBox} from 'element-plus'
+import split from "split.js";
 import {HcLog} from '~uti/tools'
 
 // 将ui的函数挂载在windows对象上
@@ -13,6 +14,7 @@ function registerElTools() {
     window['$message'] = ElMessage;
     window['$notification'] = ElNotification;
     window['$HcLog'] = HcLog;
+    window['$split'] = split;
 }
 
 registerElTools()

src/styles/app/element.scss

@@ -647,6 +647,12 @@
     z-index: 99999;
 }
 
+.scroll-bar-right-16.el-scrollbar {
+    .el-scrollbar__bar {
+        right: -16px;
+    }
+}
+
 //设置表单样式
 .hc-excel-table-form-view {
     position: relative;
@@ -724,3 +730,4 @@
         background-color: #f1f5f8 !important;
     }
 }
+

src/styles/app/main.scss

@@ -53,14 +53,12 @@ html, body, #app {
     flex-direction: column;
 }
 
-
 .hc-sticky-box {
     position: sticky;
     z-index: 99;
     top: 0;
 }
 
-
 .pover-menu-list {
     position: relative;
     .list-item {
@@ -88,7 +86,7 @@ html, body, #app {
 
 #toolPanel, #optionPanel {
     border-radius: 5px;
-    box-shadow: 0 .5em 1em rgba(0,0,0,0.15);
+    box-shadow: 0 .5em 1em rgba(0, 0, 0, 0.15);
 }
 
 .el-radio-group .el-radio {
@@ -140,7 +138,6 @@ html, body, #app {
     transform: translateX(30px);
 }
 
-
 .hc-page-layout-box {
     display: flex;
     position: relative;
@@ -151,12 +148,12 @@ html, body, #app {
         background: #f1f5f8;
         border-radius: 10px;
         margin-right: 24px;
-        box-shadow: -2px 0 10px 0 rgba(32,37,50,0.03), 0 10px 21px 20px rgba(32,37,50,0.03);
+        box-shadow: -2px 0 10px 0 rgba(32, 37, 50, 0.03), 0 10px 21px 20px rgba(32, 37, 50, 0.03);
         .horizontal-drag-line {
             position: absolute;
             right: 0;
             top: 0;
-            width: 2px;
+            width: 4px;
             height: 100%;
             user-select: none;
             cursor: col-resize;
@@ -236,3 +233,20 @@ html, body, #app {
 .z-9999 {
     z-index: 9999 !important;
 }
+
+//分割的样式
+.gutter {
+    background-color: #f1f5f8;
+    background-repeat: no-repeat;
+    background-position: 50%;
+}
+
+.gutter.gutter-vertical {
+    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAFAQMAAABo7865AAAABlBMVEVHcEzMzMzyAv2sAAAAAXRSTlMAQObYZgAAABBJREFUeF5jOAMEEAIEEFwAn3kMwcB6I2AAAAAASUVORK5CYII=');
+    cursor: row-resize;
+}
+
+.gutter.gutter-horizontal {
+    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAeCAYAAADkftS9AAAAIklEQVQoU2M4c+bMfxAGAgYYmwGrIIiDjrELjpo5aiZeMwF+yNnOs5KSvgAAAABJRU5ErkJggg==');
+    cursor: col-resize;
+}

src/styles/data-fill/query.scss

@@ -7,12 +7,12 @@
         position: relative;
         background: #f1f5f8;
         border-radius: 10px;
-        box-shadow: -2px 0 10px 0 rgba(32,37,50,0.03), 0 10px 21px 20px rgba(32,37,50,0.03);
+        box-shadow: -2px 0 10px 0 rgba(32, 37, 50, 0.03), 0 10px 21px 20px rgba(32, 37, 50, 0.03);
         .horizontal-drag-line {
             position: absolute;
             right: 0;
             top: 0;
-            width: 2px;
+            width: 4px;
             height: 100%;
             user-select: none;
             cursor: col-resize;

src/styles/data-fill/wbs.scss

@@ -16,7 +16,7 @@
             position: absolute;
             right: 0;
             top: 0;
-            width: 2px;
+            width: 4px;
             height: 100%;
             user-select: none;
             cursor: col-resize;

src/styles/other-file/image-data.scss

@@ -13,7 +13,7 @@
             position: absolute;
             right: 0;
             top: 0;
-            width: 2px;
+            width: 4px;
             height: 100%;
             user-select: none;
             cursor: col-resize;
@@ -107,7 +107,7 @@
                     .icon-item {
                         cursor: pointer;
                     }
-                    .icon-item + .icon-item{
+                    .icon-item + .icon-item {
                         margin-left: 20px;
                     }
                 }
@@ -177,7 +177,6 @@
     width: 100%;
 }
 
-
 html.theme-dark {
     .hc-layout-box .hc-layout-left-box {
         background: var(--hc-bg-color);

src/styles/other-file/image-form.scss

@@ -8,12 +8,12 @@
         background: #f1f5f8;
         border-radius: 10px;
         margin-right: 24px;
-        box-shadow: -2px 0 10px 0 rgba(32,37,50,0.03), 0 10px 21px 20px rgba(32,37,50,0.03);
+        box-shadow: -2px 0 10px 0 rgba(32, 37, 50, 0.03), 0 10px 21px 20px rgba(32, 37, 50, 0.03);
         .horizontal-drag-line {
             position: absolute;
             right: 0;
             top: 0;
-            width: 2px;
+            width: 4px;
             height: 100%;
             user-select: none;
             cursor: col-resize;

src/styles/other-file/image-view.scss

@@ -7,12 +7,12 @@
         position: relative;
         background: #f1f5f8;
         border-radius: 10px;
-        box-shadow: -2px 0 10px 0 rgba(32,37,50,0.03), 0 10px 21px 20px rgba(32,37,50,0.03);
+        box-shadow: -2px 0 10px 0 rgba(32, 37, 50, 0.03), 0 10px 21px 20px rgba(32, 37, 50, 0.03);
         .horizontal-drag-line {
             position: absolute;
             right: 0;
             top: 0;
-            width: 2px;
+            width: 4px;
             height: 100%;
             user-select: none;
             cursor: col-resize;

src/styles/other-file/project-scanning.scss

@@ -7,12 +7,12 @@
         position: relative;
         background: #f1f5f8;
         border-radius: 10px;
-        box-shadow: -2px 0 10px 0 rgba(32,37,50,0.03), 0 10px 21px 20px rgba(32,37,50,0.03);
+        box-shadow: -2px 0 10px 0 rgba(32, 37, 50, 0.03), 0 10px 21px 20px rgba(32, 37, 50, 0.03);
         .horizontal-drag-line {
             position: absolute;
             right: 0;
             top: 0;
-            width: 2px;
+            width: 4px;
             height: 100%;
             user-select: none;
             cursor: col-resize;
@@ -70,7 +70,7 @@
         flex: 1;
         position: relative;
         height: 100%;
-        border:1px solid #777;
+        border: 1px solid #777;
         overflow: hidden;
         iframe {
             height: 100%;

src/styles/other/first-item.scss

@@ -7,12 +7,12 @@
         position: relative;
         background: #f1f5f8;
         border-radius: 10px;
-        box-shadow: -2px 0 10px 0 rgba(32,37,50,0.03), 0 10px 21px 20px rgba(32,37,50,0.03);
+        box-shadow: -2px 0 10px 0 rgba(32, 37, 50, 0.03), 0 10px 21px 20px rgba(32, 37, 50, 0.03);
         .horizontal-drag-line {
             position: absolute;
             right: 0;
             top: 0;
-            width: 2px;
+            width: 4px;
             height: 100%;
             user-select: none;
             cursor: col-resize;
@@ -69,7 +69,7 @@
             position: relative;
             background: #f1f5f8;
             border-radius: 10px;
-            box-shadow: -2px 0px 10px 0px rgba(32,37,50,0.03), 0px 10px 21px 20px rgba(32,37,50,0.03);
+            box-shadow: -2px 0px 10px 0px rgba(32, 37, 50, 0.03), 0px 10px 21px 20px rgba(32, 37, 50, 0.03);
         }
         .node-file {
             width: 440px;
@@ -77,7 +77,7 @@
             padding: 24px 20px;
             background: #f1f5f8;
             border-radius: 10px;
-            box-shadow: -2px 0px 10px 0px rgba(32,37,50,0.03), 0px 10px 21px 20px rgba(32,37,50,0.03);
+            box-shadow: -2px 0px 10px 0px rgba(32, 37, 50, 0.03), 0px 10px 21px 20px rgba(32, 37, 50, 0.03);
             .title {
                 position: relative;
                 margin-bottom: 14px;
@@ -101,7 +101,7 @@
         display: flex;
         align-items: center;
         padding: 20px 24px;
-        box-shadow: -2px 0px 10px 0 rgba(32,37,50,0.03), 0 -10px 21px 3px rgba(32,37,50,0.03);
+        box-shadow: -2px 0px 10px 0 rgba(32, 37, 50, 0.03), 0 -10px 21px 3px rgba(32, 37, 50, 0.03);
         overflow: hidden;
     }
 }

src/styles/other/order-service.scss

@@ -17,7 +17,7 @@
                 margin-bottom: 24px;
                 padding: 24px;
                 position: relative;
-                box-shadow: -2px 0 10px 0 rgba(32,37,50,0.03), 0 10px 21px 20px rgba(32,37,50,0.03);
+                box-shadow: -2px 0 10px 0 rgba(32, 37, 50, 0.03), 0 10px 21px 20px rgba(32, 37, 50, 0.03);
                 display: flex;
                 align-items: flex-start;
                 .user-avatar-box {
@@ -210,7 +210,7 @@
             position: absolute;
             left: 0;
             top: 0;
-            width: 2px;
+            width: 4px;
             height: 100%;
             user-select: none;
             cursor: col-resize;

src/styles/schedule/write.scss

@@ -7,12 +7,12 @@
         position: relative;
         background: #f1f5f8;
         border-radius: 10px;
-        box-shadow: -2px 0 10px 0 rgba(32,37,50,0.03), 0 10px 21px 20px rgba(32,37,50,0.03);
+        box-shadow: -2px 0 10px 0 rgba(32, 37, 50, 0.03), 0 10px 21px 20px rgba(32, 37, 50, 0.03);
         .horizontal-drag-line {
             position: absolute;
             right: 0;
             top: 0;
-            width: 2px;
+            width: 4px;
             height: 100%;
             user-select: none;
             cursor: col-resize;
@@ -54,6 +54,6 @@
         background: #f1f5f8;
         border-radius: 10px;
         padding-top: 24px;
-        box-shadow: -2px 0 10px 0 rgba(32,37,50,0.03), 0 10px 21px 20px rgba(32,37,50,0.03);
+        box-shadow: -2px 0 10px 0 rgba(32, 37, 50, 0.03), 0 10px 21px 20px rgba(32, 37, 50, 0.03);
     }
 }

src/views/data-fill/components/WbsTree.vue

@@ -38,6 +38,7 @@
                 </div>
                 <!--树组件，操作菜单 END-->
             </div>
+
         </template>
     </ElTree>
     <!--右键菜单-->

src/views/data-fill/wbs.vue

@@ -126,7 +126,7 @@
                         </el-input>
                     </div>
                     <div v-loading="treeLoading" class="hc-tree-scrollbar" element-loading-text="获取数据中...">
-                        <el-scrollbar>
+                        <el-scrollbar class="scroll-bar-right-16">
                             <KeepAlive>
                                 <template v-if="isSearchTree">
                                     <HcTreeData
@@ -171,7 +171,7 @@
                 <!--左右拖动-->
                 <div class="horizontal-drag-line" @mousedown="onmousedown"/>
             </div>
-            <div class="hc-layout-content-box">
+            <div id="wbs-content-box" class="hc-layout-content-box">
                 <!---展开收缩树-->
                 <div class="hc-expansion-contraction-tree" @click="setWbsTreeShow">
                     <HcIcon v-show="isWbsTreeShow" name="arrow-left-s"/>
@@ -749,21 +749,19 @@ watch(() => [
 
 })
 watch(projectId, (val) => {
-        console.log(val, 'val')
         if (val) {
             getSearchTreeData()
         }
-
     },
-
-    {immediate: true}
+    {
+        immediate: true
+    }
 )
 //渲染完成
 onMounted(() => {
     treeLoading.value = typeName === 'tree';
     setContractType(contractInfo.value?.contractType)
     getDictionaryApi()
-
 })
 
 //身份按钮切换数据