feat:组态基本完成

src/components/card2.vue

@@ -2,7 +2,7 @@
   <div class="canvas-container">
     <!-- 工具栏 -->
     <div class="toolbar">
-      <button @click="toggleViewMode" :class="{ 'active': isViewMode }">
+      <button @click="toggleViewMode" :class="{ active: isViewMode }">
         {{ isViewMode ? '退出查看模式' : '进入查看模式' }}
       </button>
       <button @click="addRandomPoint" :disabled="isViewMode">添加随机点</button>
@@ -35,7 +35,10 @@
       <div class="modal-content">
         <div class="detail-row">
           <span class="detail-label">位置:</span>
-          <span class="detail-value">({{ Math.round(viewModal.point.x) }}, {{ Math.round(viewModal.point.y) }})</span>
+          <span class="detail-value"
+            >({{ Math.round(viewModal.point.x) }},
+            {{ Math.round(viewModal.point.y) }})</span
+          >
         </div>
         <div class="detail-row">
           <span class="detail-label">大小:</span>
@@ -213,7 +216,10 @@ export default {
 
       // 在主canvas上绘制
       this.ctx.save()
-      this.ctx.translate(pointScreenX - canvasPos.left, pointScreenY - canvasPos.top)
+      this.ctx.translate(
+        pointScreenX - canvasPos.left,
+        pointScreenY - canvasPos.top
+      )
       this.ctx.rotate(angle)
       this.ctx.drawImage(lineCanvas, 0, -1) // -1是为了让线居中
       this.ctx.restore()
@@ -307,7 +313,7 @@ export default {
       }
 
       // 激活点位效果
-      this.points.forEach(p => p.isActive = false)
+      this.points.forEach(p => (p.isActive = false))
       point.isActive = true
     },
 
@@ -363,6 +369,7 @@ export default {
         const point = this.points[i]
         const distance = Math.sqrt(
           Math.pow(x - point.x, 2) + Math.pow(y - point.y, 2)
+        )
         if (distance <= point.radius) {
           return point
         }

src/views/makePie/index.vue

@@ -16,21 +16,26 @@
     </div>
     <div v-if="type == 1">
       <CanvasWithExternalBackground
-        :width="800"
-        :height="600"
+        :width="600"
+        :height="350"
+        :isViewMode="isViewMode"
         :background-image-url="backgroundUrl"
         @background-updated="handleBackgroundUpdate"
       />
     </div>
     <div v-if="type == 2">
       <CanvasWithExternalBackground
-        :width="800"
-        :height="600"
+        :width="600"
+        :isViewMode="isViewMode"
+        :height="350"
         :background-image-url="backgroundUrl"
         @background-updated="handleBackgroundUpdate"
       />
     </div>
     <div class="controls">
+      <button @click="toggleViewMode" :class="{ active: isViewMode }">
+        {{ isViewMode ? '退出查看模式' : '进入查看模式' }}
+      </button>
       <button @click="changeBackground">更换背景图</button>
       <input
         type="file"
@@ -45,15 +50,15 @@
 
 <script>
 import CanvasWithExternalBackground from '@/components/CanvasWithExternalBackground.vue'
-import CanvasWithExternalBackground from '@/components/CanvasWithExternalBackground.vue'
-
+import card2 from '@/components/card2.vue'
 
 import pic1 from '@/assets/image/变压器抠图-1.png'
 import pic2 from '@/assets/image/变压器抠图-2.png'
 export default {
   name: 'App',
   components: {
-    CanvasWithExternalBackground
+    CanvasWithExternalBackground,
+    card2
   },
   props: {
     url: {
@@ -63,6 +68,7 @@ export default {
   },
   data() {
     return {
+      isViewMode: false,
       backgroundUrl: pic1, // 默认背景图URL
       type: 1,
       pic1,
@@ -73,6 +79,14 @@ export default {
     this.loadBackgroundImage(this.pic1)
   },
   methods: {
+    toggleViewMode() {
+      this.isViewMode = !this.isViewMode
+      this.viewModal.visible = false
+      this.isAddMode = false
+      this.infoText = this.isViewMode
+        ? '查看模式: 点击点位查看详情'
+        : '编辑模式: 点击添加点位'
+    },
     changeBackground() {
       this.$refs.bgInput.click()
     },
@@ -131,13 +145,14 @@ export default {
   margin: 0 auto;
 } */
 .controls {
-  margin-top: 20px;
-  text-align: center;
+  text-align: left;
 }
 .controls button {
   padding: 8px 16px;
+  margin-left: 20px;
   background-color: #4caf50;
   color: white;
+  font-size: 12px;
   border: none;
   border-radius: 4px;
   cursor: pointer;