增加巡检内容

src/components/circleTemplate.vue

@@ -0,0 +1,55 @@
+<template>
+    <view :style="{
+          width: size + 'rpx',
+          height: size + 'rpx',
+          '--offset': offset
+        }"
+        v-html="svgHtml"
+        ref="svgRef"
+    >
+    </view>
+    <!-- <svg viewBox="0 0 100 100">
+        <circle cx="50" cy="50" r="40" stroke="#7C7C7C" stroke-width="7" fill="none" />
+        <circle cx="50" cy="50" r="40" stroke="#10F6FC" stroke-width="7" fill="none" stroke-dasharray="251.2" stroke-dashoffset="251.2" class="progress-bar"/>
+    </svg> -->
+</template>
+
+<script setup>
+import { ref, computed, watch } from "vue";
+
+const props = defineProps({
+  size: {
+    type: Number,
+    default: 280,
+  },
+  color: {
+    type: String,
+    default: "#333333",
+  },
+  progress:{}
+});
+
+const svgRef = ref(null)
+const offset = ref(251.2);
+const svgHtml = ref(`<svg viewBox="0 0 100 100">
+      <circle cx="50" cy="50" r="40" stroke="#7C7C7C" stroke-width="7" fill="none" />
+      <circle cx="50" cy="50" r="40" stroke="#10F6FC" stroke-width="7" fill="none" stroke-dasharray="251.2" stroke-dashoffset="${offset.value}"/>
+  </svg>`);
+
+watch(() => props.progress, (newVal, oldVal) => {
+  updateProgress(newVal)
+},{deep:true});
+
+// 更新进度函数
+const updateProgress=(newProgress)=>{
+  offset.value = 251.2 - (251.2 * newProgress) / 100;
+  svgHtml.value = `<svg viewBox="0 0 100 100">
+      <circle cx="50" cy="50" r="40" stroke="#7C7C7C" stroke-width="7" fill="none" />
+      <circle cx="50" cy="50" r="40" stroke="#10F6FC" stroke-width="7" fill="none" stroke-dasharray="251.2" stroke-dashoffset="${offset.value}"/>
+  </svg>`
+}
+</script>
+
+<style scoped>
+
+</style>