pagedit

frontend/src/components/ProcessView/index.less

@@ -1,4 +1,111 @@
 .process_box {
-    width: 100%;
-    height: 100%;
+    position: fixed;
+    bottom: 20px;
+    right: 6px;
+    width: 230px;
+    height: 230px;
+    background: url('../../assets/chart/chart.png') no-repeat;
+    background-size: cover;
+
+    .body-box {
+        position: relative;
+        width: 100%;
+        height: 100%;
+
+        .out_list {
+            width: 100%;
+            position: relative;
+
+            .out_item {
+                position: absolute;
+
+                .item_text {
+                    position: relative;
+                    width: 56px;
+                    height: 56px;
+                    display: flex;
+                    flex-direction: column;
+                    align-items: center;
+                    justify-content: center;
+                    padding-top: 5px;
+                    img {
+                        width: 56px;
+                        height: 56px;
+                        position: absolute;
+                        top: 0;
+                        left: 0;
+                    }
+
+                    p {
+                        font-size: 12px;
+                        width: 20px;
+                        height: 20px;
+                        border-radius: 50%;
+                        display: flex;
+                        align-items: center;
+                        justify-content: center;
+                        transform: scale(0.8);
+                    }
+
+                    span {
+                        transform: scale(0.6);
+                        font-size: 12px;
+                    }
+                }
+
+                &:nth-child(2) {
+                    top: 2px;
+                    left: 2px;
+
+                    p {
+                        background: #FBEEB7;
+                        color: #DAA600;
+                    }
+
+                    span {
+                        color: #DAA600;
+                    }
+                }
+
+                &:nth-child(3) {
+                    top: 1px;
+                    right: -2px;
+                    p {
+                        background: #c5e0b4;
+                        color: #e58881;
+                    }
+
+                    span {
+                        color: #5e913b;
+                    }
+                }
+
+                &:nth-child(4) {
+                    top: 173px;
+                    right: -2px;
+                    p {
+                        background: #cccfde;
+                        color: #5e913b;
+                    }
+
+                    span {
+                        color: #5e913b;
+                    }
+                }
+
+                &:nth-child(5) {
+                    top: 173px;
+                    left: 1px;
+                    p {
+                        background: #edd1cf;
+                        color: #e58881;
+                    }
+
+                    span {
+                        color: #e58881;
+                    }
+                }
+            }
+        }
+    }
 }

frontend/src/components/ProcessView/index.vue

@@ -1,12 +1,56 @@
 <template>
-  <div class="process_box" v-show="isCollapse"></div>
+  <div class="process_box" v-show="isCollapse">
+    <div class="body-box">
+      <div class="out_list">
+        <div class="out_item" v-for="(item,index) in outList" :key="index">
+          <div class="item_text" v-if="index">
+            <img :src="item.url" alt="" />
+            <p>{{ item.goup }}</p>
+            <span>{{ item.content }}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script setup lang="ts">
-import { ref, defineExpose, defineEmits } from 'vue'
-const isCollapse = ref<boolean>(false)
+import { ref, defineExpose, defineEmits } from "vue";
+import oneRound from "../../assets/chart/one_round.png";
+import twoRound from "../../assets/chart/two_round.png";
+import threeRound from "../../assets/chart/three_round.png";
+import fourRound from "../../assets/chart/four_round.png";
+import fiveRound from "../../assets/chart/five_round.png";
+const isCollapse = ref<boolean>(true);
+const outList = ref<Array<any>>([
+  {
+    url: oneRound,
+    goup: 'G1',
+    content: 'ORCHESTRATOR'
+  },
+  {
+    url: twoRound,
+    goup: 'G2',
+    content: 'SCIENTIST'
+  },
+  {
+    url: threeRound,
+    goup: 'G3',
+    content: 'ENGINEER'
+  },
+  {
+    url: fourRound,
+    goup: 'G4',
+    content: 'EXECUTOR'
+  },
+  {
+    url: fiveRound,
+    goup: 'G5',
+    content: 'ANALYST'
+  },
+]);
 </script>
 
 <style scoped>
-@import './index.less';
+@import "./index.less";
 </style>

frontend/src/components/collapseView/index.less

@@ -3,14 +3,14 @@
 }
 
 .aside-box {
-    // height: calc(100vh - 175px);
+    height: calc(100vh - 175px);
     overflow: inherit;
     position: relative;
 
     .collapse-demo {
         width: 36px;
-        height: 100%;
-        // height: calc(100% - 260px);
+        // height: 100%;
+        height: calc(100% - 260px);
         background: #093e7a;
         border: 1px solid rgba(2, 83, 137, 1);
         padding: 12px;

frontend/src/components/collapseView/index.vue

@@ -17,6 +17,7 @@
         <div style="height: 100%" v-show="isCollapse">
           <steps-view :reasoningList="reasoningList" />
         </div>
+        <ProcessView />
         <!-- <div class="user-box">
         <img src="../../assets/logo.png" alt="" />
         <span v-show="isCollapse">Jayson</span>
@@ -95,6 +96,7 @@
 
 <script setup lang="ts">
 import StepsView from "../StepsView.vue";
+import ProcessView from "../ProcessView/index.vue";
 import { ref, defineProps, defineExpose, defineEmits } from "vue";
 import { ArrowLeft, ArrowRight } from "@element-plus/icons-vue";
 import { generateTitle } from "../../utils/i18n";