新主题

src/styles/app/main.scss

@@ -14,6 +14,28 @@ embed {
     margin-right: 16px;
 }
 
+.hc-expansion-contraction-tree {
+    position: absolute;
+    left: -13px;
+    top: 0;
+    width: 10px;
+    height: 100%;
+    user-select: none;
+    cursor: pointer;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    color: #8c9099;
+    font-size: 22px;
+    border-radius: 5px;
+    transition: background 0.2s;
+    background: rgba(255, 255, 255, 0);
+    &:hover {
+        background: #f1f5f8;
+        color: var(--el-color-primary);
+    }
+}
+
 //设置表单样式
 .hc-excel-table-form-view {
     position: relative;

src/styles/data-fill/query.scss

@@ -7,6 +7,7 @@
         position: relative;
         background: #f1f5f8;
         border-radius: 10px;
+        margin-right: 16px;
         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;
@@ -95,7 +96,7 @@
         flex: 1;
         display: inline-grid;
         position: relative;
-        margin-left: 24px;
+        //margin-left: 16px;
         .hc-card-max-h-box {
             position: relative;
             height: calc(100% - 56px);

src/styles/tentative/detect/test.scss

@@ -26,24 +26,4 @@
         }
     }
 }
-.hc-expansion-contraction-tree {
-    position: absolute;
-    left: -13px;
-    top: 0;
-    width: 10px;
-    height: 100%;
-    user-select: none;
-    cursor: pointer;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    color: #8c9099;
-    font-size: 22px;
-    border-radius: 5px;
-    transition: background 0.2s;
-    background: rgba(255, 255, 255, 0);
-    &:hover {
-        background: #f1f5f8;
-        color: var(--el-color-primary);
-    }
-}
+

src/views/data-fill/query.vue

@@ -1,6 +1,9 @@
 <template>
     <div class="hc-layout-box">
-        <div id="wbs-left-tree" :style="`width:${leftWidth}px;`" class="hc-layout-left-box">
+        <div
+            id="wbs-left-tree" :style="`width:${isWbsTreeShow ? leftWidth : 0}px; ${isWbsTreeShow ? '' : 'display: none'}`"
+            class="hc-layout-left-box" :class="[isWbsTreeShow ? 'show' : '']"
+        >
             <div class="hc-project-box">
                 <div class="hc-project-icon-box">
                     <HcIcon name="stack" />
@@ -50,6 +53,11 @@
             <div class="horizontal-drag-line" @mousedown="onmousedown" />
         </div>
         <div class="hc-layout-content-box">
+            <!---展开收缩树 -->
+            <div class="hc-expansion-contraction-tree" @click="setWbsTreeShow">
+                <HcIcon v-show="isWbsTreeShow" name="arrow-left-s" />
+                <HcIcon v-show="!isWbsTreeShow" name="arrow-right-s" />
+            </div>
             <HcNewCard padding>
                 <template #header>
                     <HcTooltip keys="query_report">
@@ -752,6 +760,11 @@ const batchOnline = async () => {
     }
 }
 
+//树展开和收起
+const isWbsTreeShow = ref(true)
+const setWbsTreeShow = () => {
+    isWbsTreeShow.value = !isWbsTreeShow.value
+}
 
 //左右拖动，改变树形结构宽度
 const leftWidth = ref(505)