优化甘特图显示问题

src/components/GGanttBar.vue

 <template>
-  <div
-    :id="bar.ganttBarConfig.id"
-    class="g-gantt-bar"
-    :style="barStyle"
-    @mousedown="onMouseEvent"
-    @mouseup="onMouseEvent"
-    @dblclick="onMouseEvent"
-    @mouseenter="onMouseEvent"
-    @mouseleave="onMouseEvent"
-    @contextmenu="onMouseEvent"
-  >
-    <el-popover
-      placement="right"
-      trigger="hover"
-      title="保障资源信息"
-    >
+  <div :id="bar.ganttBarConfig.id" class="g-gantt-bar" :style="barStyle" @mousedown="onMouseEvent"
+    @mouseup="onMouseEvent" @dblclick="onMouseEvent" @mouseenter="onMouseEvent" @mouseleave="onMouseEvent"
+    @contextmenu="onMouseEvent">
+    <el-popover placement="right" trigger="hover" title="信息">
       <template #reference>
         <div class="g-gantt-bar-label">
           <slot :bar="bar">
@@ -25,24 +13,30 @@
         </div>
       </template>
       <template #default>
-        <template v-if="bar.dataResource">
+
+        <h4 class="info-title">执行时间</h4>
+        <div>
+          开始时间：<span>{{ bar.beginProcessDate }}</span>
+        </div>
+        <div>
+          结束时间：<span>{{ bar.endProcessDate }}</span>
+        </div>
+
+        <template v-if="bar.ganttBarConfig.label">
+          <h4 class="info-title">工序信息</h4>
           <div class="card-header">
+
             <!-- <span>保障设备:</span><el-link type="primary" v-for="item in bar.equipmentResourceList" :key="item.id">{{item.name}}</el-link> -->
-               <el-link type="primary">{{bar.dataResource.name}}</el-link> 
+            <span>{{ bar.ganttBarConfig.label }}</span>
           </div>
         </template>
-        <!-- <template v-if="bar.manpowerResourceList && bar.manpowerResourceList.length">
+        <template v-if="bar.dataResource">
+          <h4  class="info-title">保障资源信息:</h4>
           <div class="card-header">
-              <span>人力资源:</span><el-link type="primary" v-for="item in bar.manpowerResourceList" :key="item.id">{{item.name}}</el-link>
+            <!-- <span>保障设备:</span><el-link type="primary" v-for="item in bar.equipmentResourceList" :key="item.id">{{item.name}}</el-link> -->
+            <el-link type="primary">{{ bar.dataResource.name }}</el-link>
           </div>
         </template>
-        <template v-if="bar.toolResourceList && bar.toolResourceList.length">
-            <div class="card-header">
-              <span>保障工具:</span><el-link type="primary" v-for="item in bar.toolResourceList" :key="item.id">{{item.name}}</el-link>
-            </div>
-        </template> -->
-        
-    
       </template>
     </el-popover>
     <template v-if="bar.ganttBarConfig.hasHandles">
@@ -173,17 +167,20 @@ const barStyle = computed(() => {
   width: 100%;
   height: 100%;
   box-sizing: border-box;
-  padding: 0 14px 0 14px; /* 14px is the width of the handle */
+  padding: 0 14px 0 14px;
+  /* 14px is the width of the handle */
   display: flex;
   justify-content: center;
   align-items: center;
   font-size: 14px;
 }
-.g-gantt-bar-label > * {
+
+.g-gantt-bar-label>* {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
+
 .g-gantt-bar-handle-left,
 .g-gantt-bar-handle-right {
   position: absolute;
@@ -195,9 +192,11 @@ const barStyle = computed(() => {
   cursor: w-resize;
   top: 0;
 }
+
 .g-gantt-bar-handle-left {
   left: 0;
 }
+
 .g-gantt-bar-handle-right {
   right: 0;
 }
@@ -219,8 +218,11 @@ const barStyle = computed(() => {
 .item {
   margin-bottom: 18px;
 }
-.card-header{
+
+.card-header {
   font-size: 12px;
 }
-
+.info-title{
+  margin-bottom: 10px;
+}
 </style>

src/components/GGanttRow.vue

@@ -103,6 +103,7 @@ const onDrop = (e: MouseEvent) => {
     border-top: 1px solid #eaeaea;
     width: 100%;
     border-bottom: 1px solid #eaeaea;
+    /* left: 80px; */
   }
 
   .g-gantt-row-label {

src/components/GGanttTimeaxis.vue

@@ -98,6 +98,7 @@ const { timeaxisUnits } = useTimeaxisUnits(gGanttChartPropsRefs)
     display: flex;
     flex-direction: column;
     justify-content: center;
+    align-items: flex-start;
   }
 
   .g-upper-timeunit {