样式优化，添加放大

src/views/components/carouselChart.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="thumb-example">
     <div class="picTop">
-      <viewer
+      <div
         class="bigimg"
         :options="OptionssalseImg"
         v-if="
@@ -11,14 +11,29 @@
         :style="
           bigPicPath ? 'backgroundImage:url(' + bigPicPath + '!128x72)' : ''
         "
+        @click="handleBigPic(bigPicPath)"
       >
         <img ref="picJpg" class="animImg" :src="bigPicPath + '!1280x720'" />
+
         <canvas id="myCanvas" class="myCanvas" ref="myCanvas"></canvas>
         <!-- <p class="mark">
           {{ bigPicPath }}
           <span>{{ this.activeSmall }}</span>
         </p> -->
-      </viewer>
+      </div>
+      <div
+        v-if="
+          showBigpic &&
+          bigPicPath.indexOf('nopic') == -1 &&
+          bigPicPath.indexOf('videos') == -1
+        "
+        class="showPic"
+      >
+        <div class="picboxI">
+          <img class="maskPic" :src="bigPicPath" />
+          <i @click="closePic" class="el-icon-circle-close"></i>
+        </div>
+      </div>
       <div class="bigimg" v-else-if="bigPicPath.indexOf('videos') !== -1">
         <video
           width="100%"
@@ -176,6 +191,7 @@ export default {
       imgpic: null,
       color: "#FF0000",
       num: 5,
+      showBigpic: false,
     };
   },
   mounted() {
@@ -204,6 +220,12 @@ export default {
   },
   created() {},
   methods: {
+    handleBigPic() {
+      this.showBigpic = true;
+    },
+    closePic() {
+      this.showBigpic = false;
+    },
     drawline() {
       this.canvas = this.$refs.myCanvas;
       this.imgpic = this.$refs.picJpg;
@@ -220,8 +242,14 @@ export default {
       // 线宽设置，必须放在绘制之前
       this.ctx.lineWidth = this.num;
       for (var i = 0; i < this.localPoints.length; i++) {
-        this.ctx.moveTo(this.localPoints[i].x1, this.localPoints[i].y1);
+        this.ctx.moveTo(
-        this.ctx.lineTo(this.localPoints[i].x2, this.localPoints[i].y2);
+          this.localPoints[i].x1 * this.imgpic.width,
+          this.localPoints[i].y1 * this.imgpic.height
+        );
+        this.ctx.lineTo(
+          this.localPoints[i].x2 * this.imgpic.width,
+          this.localPoints[i].y2 * this.imgpic.height
+        );
       }
 
       this.ctx.closePath();
@@ -299,6 +327,44 @@ export default {
   flex-direction: column;
   height: calc(100% - 0px);
   box-sizing: border-box;
+  .showPic {
+    position: fixed;
+    background-color: rgba(0, 0, 0, 50%);
+    bottom: 0;
+    left: 0;
+    overflow: hidden;
+    right: 0;
+    top: 0;
+    z-index: 9999;
+    display: flex;
+    .picboxI {
+      position: relative;
+      max-width: 1366px;
+      max-height: 768px;
+      margin: auto;
+      animation-name: scaleDraw;
+      /*关键帧名称*/
+      animation-timing-function: ease;
+      /*动画的速度曲线*/
+      animation-iteration-count: 1;
+      /*动画播放的次数*/
+      animation-duration: 0.65s;
+
+      img {
+        max-width: 1366px;
+        max-height: 768px;
+        margin: auto;
+      }
+      .el-icon-circle-close {
+        position: absolute;
+        right: -10px;
+        font-size: 48px;
+        color: #fff;
+        cursor: pointer;
+        top: -24px;
+      }
+    }
+  }
   .picTop {
     width: 100%;
     height: 80%;
@@ -478,5 +544,16 @@ export default {
     }
   }
 }
+@keyframes scaleDraw {
+  /*定义关键帧、scaleDrew是需要绑定到选择器的关键帧名称*/
+  0% {
+    transform: scale(0);
+    /*开始为原始大小*/
+  }
+
+  100% {
+    transform: scale(1);
+  }
+}
 // https://v1.github.surmon.me/vue-awesome-swiper/
 </style>

src/views/management/monitoringEquipment/photographicDevice/components/pictureTags.vue

@@ -152,14 +152,19 @@ export default {
     },
     mouseup(e) {
       console.log("鼠标抬起");
-      console.log(this.x, this.y, e.offsetX, e.offsetY);
+      console.log(
+        this.x / this.imgpic.width,
+        this.y / this.imgpic.height,
+        e.offsetX / this.imgpic.width,
+        e.offsetY / this.imgpic.height
+      );
       this.drawRect(e);
       this.flag = false;
       this.linePoints.push({
-        x1: this.x,
+        x1: this.x / this.imgpic.width,
-        y1: this.y,
+        y1: this.y / this.imgpic.height,
-        x2: e.offsetX,
+        x2: e.offsetX / this.imgpic.width,
-        y2: e.offsetY,
+        y2: e.offsetY / this.imgpic.height,
       });
       console.log(this.linePoints);
     },
@@ -218,8 +223,14 @@ export default {
       // 线宽设置，必须放在绘制之前
       this.ctx.lineWidth = this.num;
       for (var i = 0; i < this.localPoints.length; i++) {
-        this.ctx.moveTo(this.localPoints[i].x1, this.localPoints[i].y1);
+        this.ctx.moveTo(
-        this.ctx.lineTo(this.localPoints[i].x2, this.localPoints[i].y2);
+          this.localPoints[i].x1 * this.imgpic.width,
+          this.localPoints[i].y1 * this.imgpic.height
+        );
+        this.ctx.lineTo(
+          this.localPoints[i].x2 * this.imgpic.width,
+          this.localPoints[i].y2 * this.imgpic.height
+        );
       }
       // this.ctx.moveTo(x, y);
       // this.ctx.lineTo(e.offsetX, e.offsetY);