增加进度svg

README.md

@@ -17,3 +17,5 @@
 ![image](./public/imgs/8.png)
 9. '/three' threejs 3D
 ![image](./public/imgs/9.png)
+10. '/process' svg-进度
+![image](./public/imgs/10.png)

src/pages/views/process/index.vue

@@ -0,0 +1,191 @@
+<template>
+  <div class="process">
+    <svg
+      width="100%"
+      height="100%"
+      viewBox="0 0 1540 920"
+    >
+      <defs>
+        <!-- 24小时文字样式 -->
+        <g id="default">
+          <rect
+            x="45"
+            y="30"
+            width="1450"
+            height="29"
+            fill="#2469C9"
+            fill-opacity="0.2"
+          />
+          <line
+            x1="45"
+            y1="60"
+            x2="1495"
+            y2="60"
+            stroke=" #195481"
+            stroke-width="1"
+          />
+          <g
+            v-for="(item, index) in time"
+            :key="index"
+          >
+            <g v-if="index < 24">
+              <text
+                :x="index * 60 + 65"
+                y="50"
+                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"
+                stroke="#195481"
+                stroke-width="1"
+              />
+            </g>
+            <line
+              v-else
+              :x1="index * 60 + 50"
+              y1="30"
+              :x2="index * 60 + 50"
+              y2="920"
+              stroke="#195481"
+              stroke-width="1"
+            />
+          </g>
+        </g>
+        <!-- tip -->
+        <g id="tip">
+          <image
+            href="./img/1.png"
+            width="150"
+            height="80"
+          />
+          <text
+            fill="white"
+            y="25"
+            x="60"
+            font-size="13"
+          >
+            {{ tipData.txt }}
+          </text>
+          <text
+            fill="white"
+            y="45"
+            x="20"
+            font-size="12"
+          >
+            范围：{{ tipData.footge }}
+          </text>
+          <text
+            fill="white"
+            y="65"
+            x="20"
+            font-size="12"
+          >
+            等级：{{ tipData.grade }}
+          </text>
+        </g>
+      </defs>
+      <!-- 24小时 -->
+      <use xlink:href="#default" />
+      <!-- 工序格 -->
+      <rect
+        v-for="(item, index) in planDetail"
+        :key="index"
+        :x="item.X"
+        :y="item.Y"
+        rx="2"
+        ry="2"
+        :width="item.width"
+        height="20"
+        :fill="item.color"
+        @click.stop="details($event, item)"
+      />
+      <!-- tips -->
+      <use
+        xlink:href="#tip"
+        :x="tipData.X"
+        :y="tipData.Y"
+      />
+    </svg>
+  </div>
+</template>
+
+<script setup lang='ts'>
+import { computed, ref } from 'vue'
+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)
+const tipData = ref({
+  X: -100000, txt: '', footge: '1', grade: '2', Y: -10000
+})
+
+function setData(data: { time: number }[]) {
+  let lastWidth = 0
+  const arr = []
+  for (let k = 0; k < data.length; k++) {
+    const el = data[k]
+    arr.push({
+      ...el,
+      width: el.time * 60,
+      X: 50 + lastWidth,
+      Y: 75 + 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)
+  tipData.value = {
+    txt: data.name,
+    X: data.X + data.width / 2 - 75,
+    Y: data.Y + 20,
+    st: data.time,
+    et: data.time
+  }
+}
+</script>
+<style lang="scss" scoped>
+.process {
+    width: 100%;
+    height: 100%;
+    background: #0C1F3A;
+
+    svg {
+        user-select: none;
+    }
+}
+</style>

src/pages/views/process/route.ts

@@ -0,0 +1,9 @@
+import { RouteRecordRaw } from 'vue-router'
+import process from './index.vue'
+export default {
+  path: '/process',
+  meta: {
+    authorize: true
+  },
+  component: process
+} as RouteRecordRaw