内外业进度

src/styles/schedule/write.scss

@@ -1,14 +1,13 @@
 .hc-layout-box {
     display: flex;
     position: relative;
-    height: calc(100% - 60px);
+    height: 100%;
     .hc-layout-left-box {
-        position: relative;
-        background: white;
-        overflow: auto;
-        border-top: 1px solid #EEEEEE;
-        border-right: 1px solid #EEEEEE;
         width: 382px;
+        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);
         .horizontal-drag-line {
             position: absolute;
             right: 0;
@@ -17,60 +16,40 @@
             height: 100%;
             user-select: none;
             cursor: col-resize;
-            background-color: #e4e4e4;
-            transition: background-color 0.2s;
-            &:hover {
-                background-color: rgba(119, 119, 119, .5);
-            }
+            background-color: #00000000;
         }
         .hc-project-box {
             position: relative;
             padding: 15px 24px;
-            border-bottom: 1px solid #EEEEEE;
-            .project-alias-box {
-                position: relative;
-                color: var(--hc-primary);
+            display: flex;
+            align-items: flex-start;
+            border-bottom: 1px solid #E9E9E9;
+            .hc-project-icon-box {
+                font-size: 30px;
+                color: var(--el-color-primary);
             }
-            .project-name {
+            .project-name-box {
+                flex: auto;
                 position: relative;
-                color: #999999;
-                margin-top: 10px;
+                overflow: hidden;
+                .project-alias {
+                    color: var(--el-color-primary);
+                }
+                .project-name {
+                    margin-top: 6px;
+                    color: #838791;
+                }
             }
         }
-        .hc-el-tree-box {
+        .hc-tree-box {
             position: relative;
             padding: 15px 20px;
-            height: calc(100% - 85px);
-            overflow: auto;
+            height: calc(100% - 80px);
         }
     }
     .hc-layout-content-box {
         flex: 1;
-        overflow: auto;
         position: relative;
-        padding: 0 24px 15px 20px;
-    }
-}
-.hc-card-header {
-    position: relative;
-    font-size: initial;
-    font-weight: initial;
-}
-
-
-html.theme-dark {
-    .hc-layout-box .hc-layout-left-box {
-        background: var(--hc-bg-color);
-        border-top: 1px solid #303030;
-        border-right: 1px solid #303030;
-    }
-    .hc-layout-box .hc-layout-left-box .hc-project-box {
-        border-bottom: 1px solid #303030;
-    }
-    .hc-layout-box .hc-tree-foot-tip-box {
-        border-top: 1px solid #303030;
-    }
-    .hc-layout-box .hc-layout-left-box .horizontal-drag-line {
-        background-color: #303030;
+        margin-left: 24px;
     }
 }

src/views/schedule/write.vue

@@ -1,11 +1,76 @@
 <template>
-    <div class="hc-layout-box">
-        内外业进度
+    <div class="hc-layout-box" id="first-item-node-layout-target">
+        <div class="hc-layout-left-box" :style="'width:' + leftWidth + 'px;'">
+            <div class="hc-project-box">
+                <div class="hc-project-icon-box">
+                    <HcIcon name="stack"/>
+                </div>
+                <div class="ml-2 project-name-box">
+                    <span class="text-xl text-cut project-alias">{{projectInfo['projectAlias']}}</span>
+                    <div class="text-xs text-cut project-name">{{projectInfo['name']}}</div>
+                </div>
+            </div>
+            <div class="hc-tree-box">
+                <el-scrollbar>
+                    tree
+                </el-scrollbar>
+            </div>
+            <!--左右拖动-->
+            <div class="horizontal-drag-line" @mousedown="onmousedown"/>
+        </div>
+        <div class="hc-layout-content-box">
+            <HcCard>
+                <template #header>
+                    123
+                </template>
+                <template #extra>
+                    <!--HcNewSwitch :datas="tabTypeTab" :keys="tabTypeKey" @change="tabTypeChange"/-->
+                </template>
+                456
+            </HcCard>
+        </div>
+
     </div>
 </template>
 
 <script setup>
+import {onMounted, ref, watch} from 'vue'
+import {useAppStore} from "~src/store";
+//import WbsTree from "./components/WbsTree.vue"
+import {getStoreData, setStoreData} from '~src/utils/storage'
+import {getArrValue, isString, getObjValue, getObjNullValue} from "vue-utils-plus"
+
+//变量
+const useAppState = useAppStore()
+const projectId = ref(useAppState.getProjectId);
+const contractId = ref(useAppState.getContractId);
+const projectInfo = ref(useAppState.getProjectInfo);
+const isCollapse = ref(useAppState.getCollapse)
+
+//监听
+watch(() => [
+    useAppState.getCollapse
+], ([Collapse]) => {
+    isCollapse.value = Collapse
+})
+
+
 
+//左右拖动，改变树形结构宽度
+const leftWidth = ref(382)
+const onmousedown = () => {
+    const leftNum = isCollapse.value ? 142 : 272
+    document.onmousemove = (ve) => {
+        const diffVal = ve.clientX - leftNum;
+        if(diffVal >= 310 && diffVal <= 900) {
+            leftWidth.value = diffVal;
+        }
+    }
+    document.onmouseup = () => {
+        document.onmousemove = null;
+        document.onmouseup = null;
+    }
+}
 </script>
 
 <style lang="scss" scoped>