update

src/pages/views/process/index.vue

@@ -1,6 +1,9 @@
 <template>
   <div class="process">
-    <svg viewBox="0 0 1440 780">
+    <svg
+      viewBox="0 0 1440 780"
+      @click.stop="details({ X: -10000, Y: -10000 })"
+    >
       <defs>
         <!-- 24小时文字样式 -->
         <g id="default">
@@ -115,12 +118,12 @@
 import { ref } from 'vue'
 
 interface Item {
-  name: string,
-  time: number,
-  color: string,
+  name?: string,
+  time?: number,
+  color?: string,
   X?: number,
   Y?: number,
-  width?:number
+  width?: number
 }
 const time = new Array(25).fill(null).map((_, i) => i + 1)
 const data = [
@@ -157,27 +160,27 @@ const tipData = ref({
 
 function setData(list: Item[]) {
   let lastWidth = 0
-  const arr = []
+  const arr = [] as Item[]
   for (let k = 0; k < list.length; k++) {
     const el = list[k]
     arr.push({
       ...el,
-      width: el.time * 60,
+      width: el.time! * 60,
       X: lastWidth,
       Y: 50 + k * 40
     })
-    lastWidth += el.time * 60
+    lastWidth += el.time! * 60
   }
   return arr
 }
 
 const details = (item: Item) => {
   tipData.value = {
-    txt: item.name,
+    txt: item.name || '',
     X: item.X! + item.width! / 2 - 75,
     Y: item.Y! + 20,
-    st: item.time,
-    et: item.time
+    st: item.time || 0,
+    et: item.time || 0
   }
 }
 </script>
@@ -188,6 +191,7 @@ const details = (item: Item) => {
   padding: 15px;
   box-sizing: border-box;
   background: #0c1f3a;
+
   svg {
     user-select: none;
   }