feat: 节点添加优先级和处理人tag

src/components/PriorityTag.vue

@@ -1,12 +1,12 @@
 <template>
   <template v-if="priority === '紧急'">
-    <ElTag type="warning">{{priority}}</ElTag>
+    <ElTag :size="size" type="warning">{{priority}}</ElTag>
   </template>
   <template v-else-if="priority === '一般'">
-    <ElTag>{{priority}}</ElTag>
+    <ElTag :size="size">{{priority}}</ElTag>
   </template>
   <template v-else-if="priority === '宽松'">
-    <ElTag type="success">{{priority}}</ElTag>
+    <ElTag :size="size" type="success">{{priority}}</ElTag>
   </template>
 </template>
 
@@ -16,6 +16,10 @@ import { defineComponent } from 'vue';
 export default defineComponent({
   props: {
     priority: String,
+    size: {
+      type: String,
+      default: '',
+    },
   },
 });
 </script>

src/components/Tree.vue

@@ -5,6 +5,8 @@
       <TreeNode
         v-for="item in col"
         v-bind="item"
+        :processor="item.processorName"
+        :priority="item.priority"
         :key="item.id"
         :position-x="index"
         :node-style="NODE_STYLE"
@@ -38,7 +40,7 @@ const WIDTH = 1000;
 const TREE_MAX_HEIGHT = 4;
 const NODE_STYLE = {
   width: 250,
-  height: 100,
+  height: 140,
   padding: 25,
 };
 
@@ -117,7 +119,7 @@ export default {
       this.data.forEach((item) => {
         if (item.positionY && item.positionY > maxPositionY) maxPositionY = item.positionY;
       });
-      this.drawLine((maxPositionY * 130 + 100).toFixed(0));
+      this.drawLine((maxPositionY * 140 + 100).toFixed(0));
       // 返回col
       return colList;
     },

src/components/TreeNode.vue

@@ -8,6 +8,10 @@
             <ElTag class="node-state" :type="getTagTypeFromState(state)">{{state}}</ElTag>
           </div>
         </template>
+          <div class="card-body">
+            <PriorityTag :size="'mini'" :priority="priority"></PriorityTag>
+            <ElTag size="mini" >{{processor}}</ElTag>
+          </div>
       </ElCard>
     </div>
     <div class="node-postfix">
@@ -20,6 +24,8 @@
 </template>
 
 <script>
+import PriorityTag from '@/components/PriorityTag.vue';
+
 const getTagTypeFromState = (state) => {
   if (state === '已创建') {
     return '';
@@ -33,6 +39,7 @@ const getTagTypeFromState = (state) => {
 
 export default {
   name: 'TreeNode',
+  components: { PriorityTag },
   props: {
     id: Number,
     state: String,
@@ -41,11 +48,13 @@ export default {
     positionX: Number,
     nodeStyle: Object,
     depth: Number,
+    processor: String,
+    priority: String,
   },
   computed: {
     containerStyle() {
       return {
-        top: `${this.positionY * 130}px`,
+        top: `${this.positionY * 140}px`,
         left: `${280 * this.positionX - 100}px`,
         width: `${this.nodeStyle.width + this.nodeStyle.padding * 2}px`,
         height: `${this.nodeStyle.height + this.nodeStyle.padding * 2}px`,
@@ -109,6 +118,10 @@ export default {
   display: flex;
   justify-content: space-between;
 }
+.card-body{
+  display: flex;
+  justify-content: space-between;
+}
 .icon {
   width: 14px;
   height: 14px;