update

src/pages/views/process/index.vue

@@ -1,26 +1,22 @@
 <template>
   <div class="process">
-    <svg
-      width="100%"
-      height="100%"
-      viewBox="0 0 1540 920"
-    >
+    <svg viewBox="0 0 1440 780">
       <defs>
         <!-- 24小时文字样式 -->
         <g id="default">
           <rect
-            x="45"
-            y="30"
-            width="1450"
+            x="0"
+            y="0"
+            width="1440"
             height="29"
             fill="#2469C9"
             fill-opacity="0.2"
           />
           <line
-            x1="45"
-            y1="60"
-            x2="1495"
-            y2="60"
+            x1="0"
+            y1="30"
+            x2="1440"
+            y2="30"
             stroke=" #195481"
             stroke-width="1"
           />
@@ -30,28 +26,28 @@
           >
             <g v-if="index < 24">
               <text
-                :x="index * 60 + 65"
-                y="50"
+                :x="index * 60 + 15"
+                y="20"
                 font-size="14"
                 fill="white"
               >
                 {{ index === 23 ? '00:00' : item + ':00' }}
               </text>
               <line
-                :x1="index * 60 + 50"
-                y1="30"
-                :x2="index * 60 + 50"
-                y2="920"
+                :x1="index * 60"
+                y1="0"
+                :x2="index * 60"
+                y2="780"
                 stroke="#195481"
                 stroke-width="1"
               />
             </g>
             <line
               v-else
-              :x1="index * 60 + 50"
-              y1="30"
-              :x2="index * 60 + 50"
-              y2="920"
+              :x1="index * 60"
+              y1="0"
+              :x2="index * 60"
+              y2="780"
               stroke="#195481"
               stroke-width="1"
             />
@@ -78,7 +74,7 @@
             x="20"
             font-size="12"
           >
-            范围：{{ tipData.footge }}
+            范围：{{ tipData.st }}
           </text>
           <text
             fill="white"
@@ -86,7 +82,7 @@
             x="20"
             font-size="12"
           >
-            等级：{{ tipData.grade }}
+            等级：{{ tipData.et }}
           </text>
         </g>
       </defs>
@@ -103,7 +99,7 @@
         :width="item.width"
         height="20"
         :fill="item.color"
-        @click.stop="details($event, item)"
+        @click.stop="details(item)"
       />
       <!-- tips -->
       <use
@@ -116,7 +112,16 @@
 </template>
 
 <script setup lang='ts'>
-import { computed, ref } from 'vue'
+import { ref } from 'vue'
+
+interface Item {
+  name: string,
+  time: number,
+  color: string,
+  X?: number,
+  Y?: number,
+  width?:number
+}
 const time = new Array(25).fill(null).map((_, i) => i + 1)
 const data = [
   {
@@ -145,47 +150,46 @@ const data = [
     color: '#3cecda'
   }
 ]
-const planDetail = setData(data)
+const planDetail = setData(data) as Item[]
 const tipData = ref({
-  X: -100000, txt: '', footge: '1', grade: '2', Y: -10000
+  X: -100000, txt: '', st: 1, et: 1, Y: -10000
 })
 
-function setData(data: { time: number }[]) {
+function setData(list: Item[]) {
   let lastWidth = 0
   const arr = []
-  for (let k = 0; k < data.length; k++) {
-    const el = data[k]
+  for (let k = 0; k < list.length; k++) {
+    const el = list[k]
     arr.push({
       ...el,
       width: el.time * 60,
-      X: 50 + lastWidth,
-      Y: 75 + k * 40
+      X: lastWidth,
+      Y: 50 + k * 40
     })
     lastWidth += el.time * 60
   }
   return arr
 }
 
-const details = (e:MouseEvent, data:any) => {
-  const postion = `left: ${e.clientX - 30}px;top:  ${e.clientY + 40}px;`
-  console.log(123, postion)
+const details = (item: Item) => {
   tipData.value = {
-    txt: data.name,
-    X: data.X + data.width / 2 - 75,
-    Y: data.Y + 20,
-    st: data.time,
-    et: data.time
+    txt: item.name,
+    X: item.X! + item.width! / 2 - 75,
+    Y: item.Y! + 20,
+    st: item.time,
+    et: item.time
   }
 }
 </script>
 <style lang="scss" scoped>
 .process {
-    width: 100%;
-    height: 100%;
-    background: #0C1F3A;
-
-    svg {
-        user-select: none;
-    }
+  width: 100%;
+  height: 100%;
+  padding: 15px;
+  box-sizing: border-box;
+  background: #0c1f3a;
+  svg {
+    user-select: none;
+  }
 }
 </style>