更新 工序

src/pages/views/process/index.vue

@@ -1,22 +1,22 @@
 <template>
   <div class="process">
     <svg
-      viewBox="0 0 1440 780"
+      viewBox="0 0 1600 880"
       @click.stop="details({ X: -10000, Y: -10000, name: '', sTime: 0, eTime: 0 })"
     >
       <defs>
         <!-- 24小时文字样式 -->
         <g id="default">
           <line
-            x1="0"
+            x1="80"
             y1="0"
-            x2="1440"
+            x2="1520"
             y2="0"
             stroke=" #195481"
             stroke-width="1"
           />
           <rect
-            x="0"
+            x="80"
             y="0"
             width="1440"
             height="29"
@@ -24,9 +24,9 @@
             fill-opacity="0.2"
           />
           <line
-            x1="0"
+            x1="80"
             y1="30"
-            x2="1440"
+            x2="1520"
             y2="30"
             stroke=" #195481"
             stroke-width="1"
@@ -37,7 +37,7 @@
           >
             <g v-if="index < 24">
               <text
-                :x="index * 60 + 15"
+                :x="index * 60 + 95"
                 y="20"
                 font-size="14"
                 fill="white"
@@ -45,20 +45,20 @@
                 {{ index === 23 ? '00:00' : item + ':00' }}
               </text>
               <line
-                :x1="index * 60"
+                :x1="index * 60 + 80"
                 y1="0"
-                :x2="index * 60"
-                y2="780"
+                :x2="index * 60 + 80"
+                y2="880"
                 stroke="#195481"
                 stroke-width="1"
               />
             </g>
             <line
               v-else
-              :x1="index * 60"
+              :x1="index * 60 + 80"
               y1="0"
-              :x2="index * 60"
-              y2="780"
+              :x2="index * 60 + 80"
+              y2="880"
               stroke="#195481"
               stroke-width="1"
             />
@@ -96,9 +96,25 @@
             结束时间：{{ tipData.et }}
           </text>
         </g>
+        <!-- 工序文字 -->
+        <g id="text">
+          <g
+            v-for="(item, index) in planDetail"
+            :key="index"
+          >
+            <text
+              font-size="14"
+              fill="white"
+              :y="item.Y!+14"
+              x="0"
+            >{{ item.name }}</text>
+          </g>
+        </g>
       </defs>
       <!-- 24小时 -->
       <use xlink:href="#default" />
+      <!-- 工序名 -->
+      <use xlink:href="#text" />
       <!-- 工序格 -->
       <rect
         v-for="(item, index) in planDetail"
@@ -142,73 +158,73 @@ const props = withDefaults(defineProps<{
   data: () => [
     {
       name: '地质钻探',
-      sTime: 1730795400000,
-      eTime: 1730797200000
+      sTime: 1730739600000,
+      eTime: 1730748300000
     },
     {
       name: '开挖(装药)',
-      sTime: 1730795400000,
-      eTime: 1730797200000
+      sTime: 1730748300000,
+      eTime: 1730759280000
     },
     {
       name: '通风除尘',
-      sTime: 1730797200000,
-      eTime: 1730800800000
+      sTime: 1730759280000,
+      eTime: 1730778900000
     },
     {
       name: '装渣',
-      sTime: 1730795400000,
-      eTime: 1730797200000
+      sTime: 1730759280000,
+      eTime: 1730778900000
     },
     {
       name: '运渣',
-      sTime: 1730795400000,
-      eTime: 1730797200000
+      sTime: 1730759280000,
+      eTime: 1730778900000
     },
     {
       name: '拱架安装',
-      sTime: 1730795400000,
-      eTime: 1730797200000
+      sTime: 1730778900000,
+      eTime: 1730800200000
     },
     {
       name: '锚杆安装',
-      sTime: 1730795400000,
-      eTime: 1730797200000
+      sTime: 1730778900000,
+      eTime: 1730800200000
     },
     {
       name: '湿喷混凝土',
-      sTime: 1730795400000,
-      eTime: 1730797200000
+      sTime: 1730800200000,
+      eTime: 1730814480000
     },
     {
       name: '超前支护',
-      sTime: 1730795400000,
-      eTime: 1730797200000
+      sTime: 1730800200000,
+      eTime: 1730814480000
     },
     {
       name: '仰拱作业',
-      sTime: 1730795400000,
-      eTime: 1730797200000
+      sTime: 1730800200000,
+      eTime: 1730814480000
     },
     {
       name: '防排水',
-      sTime: 1730795400000,
-      eTime: 1730797200000
+      sTime: 1730800200000,
+      eTime: 1730814480000
     },
     {
       name: '二衬作业',
-      sTime: 1730795400000,
-      eTime: 1730797200000
+      sTime: 1730800200000,
+      eTime: 1730814480000
     },
     {
       name: '养护',
-      sTime: 1730795400000,
-      eTime: 1730797200000
+      sTime: 1730800200000,
+      eTime: 1730814480000
     },
     {
       name: '水电槽',
-      sTime: 1730795400000,
-      eTime: 1730797200000
+      sTime: 1730800200000,
+      eTime: 1730814480000
     }
   ]
 })
@@ -238,10 +254,10 @@ const tipData = ref({
 function countTime(item: Item[]) {
   const arr = item.map((el, k) => ({
     ...el,
-    st: `${format(el.sTime, 'HH:mm')}`,
-    et: `${format(el.eTime, 'HH:mm')}`,
+    st: format(el.sTime, 'HH:mm'),
+    et: format(el.eTime, 'HH:mm'),
     width: Math.floor((el.eTime! - el.sTime!) / 1000 / 60 / 60 * 10) / 10 * 60,
-    X: (new Date(el.sTime!).getHours() - 1 + new Date(el.sTime!).getMinutes() / 60) * 60,
+    X: (new Date(el.sTime!).getHours() - 1 + new Date(el.sTime!).getMinutes() / 60) * 60 + 80,
     Y: 50 + k * 40
   }))