feat(tab)

ChrisGray0626 · Jul 22, 2024 · 2de0261 · 2de0261
1 parent 9b60b96
commit 2de0261
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 37 deletions.
diff --git a/src/components/BreakdownChart.vue b/src/components/BreakdownChart.vue
@@ -25,6 +25,7 @@ onMounted(() => {
   tree.value = new G6.TreeGraph({
     container: getGraphNum(),
     animate: false,
+    linkCenter: true,
     layout: {
       type: "indented",
       direction: "LR",

diff --git a/src/pages/Workflow/components/LeftBox.vue b/src/pages/Workflow/components/LeftBox.vue
@@ -6,37 +6,11 @@ const sessionStore = useSessionStore();
 </script>
 
 <template>
-  <el-skeleton animated :loading="sessionStore.loading">
-    <template #template>
-      <div style="padding: 20px">
-        <el-skeleton-item
-          variant="h1"
-          style="height: 50px; margin-bottom: 5px"
-        ></el-skeleton-item>
-        <el-skeleton-item
-          variant="h3"
-          style="height: 30px; width: 95%; margin-bottom: 10px"
-        ></el-skeleton-item>
-        <el-skeleton-item
-          variant="h3"
-          style="height: 30px; width: 95%; margin-bottom: 10px"
-        ></el-skeleton-item>
-        <el-skeleton-item
-          variant="h3"
-          style="height: 30px; width: 95%; margin-bottom: 10px"
-        ></el-skeleton-item>
-        <el-skeleton-item
-          variant="h1"
-          style="height: 50px; margin-bottom: 5px"
-        ></el-skeleton-item>
-        <el-skeleton-item
-          variant="image"
-          style="width: 100%; height: 500px"
-        ></el-skeleton-item>
-      </div>
-    </template>
-
-    <template #default>
+  <el-tabs stretch type="border-card">
+    <el-tab-pane
+      label="breakdown"
+      style="height: calc(100vh - 131px); overflow-y: auto"
+    >
       <template v-if="sessionStore.graphShow">
         <div class="collapse-item">
           <div class="collapse-title">
@@ -50,24 +24,30 @@ const sessionStore = useSessionStore();
           <div class="collapse-title">
             <div>Breakdown</div>
           </div>
-          <div class="collapse-content" style="height: calc(100vh - 380px)">
+          <div class="collapse-content" style="height: calc(100vh - 350px)">
             <BreakdownChart
               :graph-id="sessionStore.session.sessionId + '-breakdown'"
             />
           </div>
         </div>
       </template>
-    </template>
-  </el-skeleton>
+    </el-tab-pane>
+    <el-tab-pane
+      label="workspace"
+      style="height: calc(100vh - 131px); overflow-y: auto"
+    >
+      <div style="text-align: center; height: 100%">BUILDING</div>
+    </el-tab-pane>
+  </el-tabs>
 </template>
 
 <style lang="less" scoped>
 .collapse-item {
-  box-sizing: border-box;
-  background-color: #ffffff;
+  //box-sizing: border-box;
+  //background-color: #ffffff;
   border: 1px solid rgb(220, 223, 230);
   border-radius: 3px;
-  margin: 20px 20px 0 20px;
+  margin: 20px;
   .collapse-title {
     box-sizing: border-box;
     margin: 10px;