update

src/pages/views/process/index.vue

@@ -2,11 +2,19 @@
   <div class="process">
     <svg
       viewBox="0 0 1440 780"
-      @click.stop="details({ X: -10000, Y: -10000 })"
+      @click.stop="details({ X: -10000, Y: -10000, name: '', sTime: 0, eTime: 0 })"
     >
       <defs>
         <!-- 24小时文字样式 -->
         <g id="default">
+          <line
+            x1="0"
+            y1="0"
+            x2="1440"
+            y2="0"
+            stroke=" #195481"
+            stroke-width="1"
+          />
           <rect
             x="0"
             y="0"
@@ -60,32 +68,32 @@
         <g id="tip">
           <image
             href="./img/1.png"
-            width="150"
+            width="130"
             height="80"
           />
           <text
             fill="white"
-            y="25"
-            x="60"
+            y="28"
+            x="15"
             font-size="13"
           >
-            {{ tipData.txt }}
+            {{ tipData.name }}
           </text>
           <text
             fill="white"
-            y="45"
-            x="20"
+            y="48"
+            x="15"
             font-size="12"
           >
-            范围：{{ tipData.st }}
+            开始时间：{{ tipData.st }}
           </text>
           <text
             fill="white"
-            y="65"
-            x="20"
+            y="68"
+            x="15"
             font-size="12"
           >
-            等级：{{ tipData.et }}
+            结束时间：{{ tipData.et }}
           </text>
         </g>
       </defs>
@@ -101,7 +109,7 @@
         ry="2"
         :width="item.width"
         height="20"
-        :fill="item.color"
+        :fill="colorDic[item.name!]"
         @click.stop="details(item)"
       />
       <!-- tips -->
@@ -115,74 +123,142 @@
 </template>
 
 <script setup lang='ts'>
-import { ref } from 'vue'
+import { ref, watch } from 'vue'
 
 interface Item {
-  name?: string,
-  time?: number,
-  color?: string,
+  name: string,
   X?: number,
   Y?: number,
-  width?: number
+  width?: number,
+  sTime: number,
+  eTime: number,
+  st?: string,
+  et?: string
+}
+const props = withDefaults(defineProps<{
+  data?: Item[]
+}>(), {
+  data: () => [
+    {
+      name: '地质钻探',
+      sTime: 1730795400000,
+      eTime: 1730797200000
+    },
+    {
+      name: '开挖(装药)',
+      sTime: 1730795400000,
+      eTime: 1730797200000
+    },
+    {
+      name: '通风除尘',
+      sTime: 1730797200000,
+      eTime: 1730800800000
+    },
+    {
+      name: '装渣',
+      sTime: 1730795400000,
+      eTime: 1730797200000
+    },
+    {
+      name: '运渣',
+      sTime: 1730795400000,
+      eTime: 1730797200000
+    },
+    {
+      name: '拱架安装',
+      sTime: 1730795400000,
+      eTime: 1730797200000
+    },
+    {
+      name: '锚杆安装',
+      sTime: 1730795400000,
+      eTime: 1730797200000
+    },
+    {
+      name: '湿喷混凝土',
+      sTime: 1730795400000,
+      eTime: 1730797200000
+    },
+    {
+      name: '超前支护',
+      sTime: 1730795400000,
+      eTime: 1730797200000
+    },
+    {
+      name: '仰拱作业',
+      sTime: 1730795400000,
+      eTime: 1730797200000
+    },
+    {
+      name: '防排水',
+      sTime: 1730795400000,
+      eTime: 1730797200000
+    },
+    {
+      name: '二衬作业',
+      sTime: 1730795400000,
+      eTime: 1730797200000
+    },
+    {
+      name: '养护',
+      sTime: 1730795400000,
+      eTime: 1730797200000
+    },
+    {
+      name: '水电槽',
+      sTime: 1730795400000,
+      eTime: 1730797200000
+    }
+  ]
+})
+
+const colorDic: Object = {
+  地质钻探: '#6fff8c',
+  '开挖(装药)': '#439bff',
+  通风除尘: '#ff7e47',
+  装渣: '#ff64d3',
+  运渣: '#3cecda',
+  拱架安装: '#ffc941',
+  锚杆安装: '#956dff',
+  湿喷混凝土: '#ffeb81',
+  超前支护: '#20c8ff',
+  仰拱作业: '#d510ff',
+  防排水: '#0000FF',
+  二衬作业: '#0000CD',
+  养护: '#B0C4DE',
+  水电槽: '#B0E0E6'
 }
 const time = new Array(25).fill(null).map((_, i) => i + 1)
-const data = [
-  {
-    name: '测量放样',
-    time: 0.5,
-    color: '#6fff8c'
-  },
-  {
-    name: '钻孔',
-    time: 2.5,
-    color: '#439bff'
-  },
-  {
-    name: '装药',
-    time: 0.75,
-    color: '#ff7e47'
-  },
-  {
-    name: '爆破除尘',
-    time: 0.5,
-    color: '#ff64d3'
-  },
-  {
-    name: '出渣',
-    time: 3.5,
-    color: '#3cecda'
-  }
-]
-const planDetail = setData(data) as Item[]
+const planDetail = ref([] as Item[])
 const tipData = ref({
-  X: -100000, txt: '', st: 1, et: 1, Y: -10000
-})
+  X: -100000, name: '', st: '', et: '', Y: -10000
+} as Item)
+
+function countTime(item: Item[]) {
+  const arr = item.map((el, k) => ({
+    ...el,
+    st: `${el.sTime}`,
+    et: `${el.eTime}`,
+    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,
+    Y: 50 + k * 40
+  }))
 
-function setData(list: Item[]) {
-  let lastWidth = 0
-  const arr = [] as Item[]
-  for (let k = 0; k < list.length; k++) {
-    const el = list[k]
-    arr.push({
-      ...el,
-      width: el.time! * 60,
-      X: lastWidth,
-      Y: 50 + k * 40
-    })
-    lastWidth += el.time! * 60
-  }
   return arr
 }
 
-const details = (item: Item) => {
+function details(item: Item) {
   tipData.value = {
-    txt: item.name || '',
-    X: item.X! + item.width! / 2 - 75,
-    Y: item.Y! + 20,
-    st: item.time || 0,
-    et: item.time || 0
+    ...item,
+    X: item.X! + item.width! / 2 - (130 / 2),
+    Y: item.Y! + 20
   }
 }
+
+watch(() => props.data, (v) => {
+  planDetail.value = countTime(v)
+}, { immediate: true })
+
 </script>
 <style lang="scss" scoped>
 .process {