feat(report): 优化事件报告打印预览功能

- 为图片添加旋转功能
- 实现图片和 PDF 的单独旋转控制
- 优化图片显示样式，使其充满屏幕
- 添加禁止图片拖拽和选择的样式
- 修复 PDF 旋转功能，使用正确的旋转角度

src/views/report/eventList/printDemo.vue

@@ -4,7 +4,7 @@
       <div class="list-scroll-nomore">
         <div class="list-scroll-box">
           <div v-for="item in fileList" class="file-item" @click="bigView(item)">
-            <img v-if="item.type === 'image'" :src="item.url" class="preview-image">
+            <img style="width: 100%;" v-if="item.type === 'image'" :src="item.url" class="preview-image">
             <pdf v-if="item.type === 'pdf'" :src="item.url"></pdf>
           </div>
         </div>
@@ -16,9 +16,13 @@
             <el-button style="font-size: 22px;padding: 5px 15px;" @click="zoomIn">+</el-button>
             <el-button style="font-size: 22px;padding: 5px 15px;" @click="zoomOut">-</el-button>
           </div>
+          <div class="pagination" v-if="showType === 'image'">
+            <el-button @click="rotateClockwise" style="font-size: 22px;padding: 5px 15px;">&#x27F3;</el-button>
+            <el-button @click="rotateCounterClockwise" style="font-size: 22px;padding: 5px 15px;">&#x27F2;</el-button>
+          </div>
           <div class="pagination" v-if="showType === 'pdf' && pageCount <= 1">
-            <el-button @click="rotate += 90" style="font-size: 22px;padding: 5px 15px;">&#x27F3;</el-button>
-            <el-button @click="rotate -= 90" style="font-size: 22px;padding: 5px 15px;">&#x27F2;</el-button>
+            <el-button @click="rotates += 90" style="font-size: 22px;padding: 5px 15px;">&#x27F3;</el-button>
+            <el-button @click="rotates -= 90" style="font-size: 22px;padding: 5px 15px;">&#x27F2;</el-button>
           </div>
           <div class="pagination" v-if="showType === 'pdf' && pageCount > 1">
             <el-button @click="rotate += 90" style="font-size: 22px;padding: 5px 15px;">&#x27F3;</el-button>
@@ -31,9 +35,10 @@
           </div>
         </div>
         <div class="nomore-view">
-          <div class="pdf-img-box drag-box" :style="boxStyle" @mousedown="startDrag">
-            <img v-if="showType === 'image'" :src="showUrl" class="preview-image">
-            <pdf v-if="showType === 'pdf'" :src="showUrl" :rotate="rotate" :page="currentPage"
+          <div class="pdf-img-box drag-box" :style="showType === 'image'?boxStyle:boxStyle1" @mousedown="startDrag">
+            <img v-if="showType === 'image'" :src="showUrl" class="preview-image" draggable="false" @mousedown.prevent
+              @dragstart.prevent>
+            <pdf v-if="showType === 'pdf'" :src="showUrl" :rotate="rotates" :page="currentPage"
               @num-pages="pageCount = $event" @progress="isLoading = true" @loaded="isLoading = false"></pdf>
           </div>
           <div class="mask" v-if="isLoading">加载中...</div>
@@ -63,6 +68,7 @@
         pageCount: 0,     // 总页数
         isLoading: false, // 加载状态
         rotate: 0,
+        rotates: 0,
         formData: {}, // 初始为空，模拟接口返回后赋值
         fileList: [],
         showUrl: '',
@@ -76,12 +82,28 @@
         startX: 0,       // 拖动起始X坐标
         startY: 0,       // 拖动起始Y坐标
         initialX: 0,     // 元素初始X位置
-        initialY: 0      // 元素初始Y位置
+        initialY: 0,     // 元素初始Y位置
+        centerOffset: { x: 0, y: 0 } // 用于中心点偏移计算
       }
     },
     computed: {
       // 动态计算元素样式
       boxStyle() {
+        return {
+          transform: `
+            translate(${this.position.x}px, ${this.position.y}px) 
+            translate(${this.centerOffset.x}px, ${this.centerOffset.y}px)
+            rotate(${this.rotate}deg) 
+            translate(-${this.centerOffset.x}px, -${this.centerOffset.y}px)
+            scale(${this.scale})
+            translateZ(0)
+          `,
+          transformOrigin: 'center center', // 修改旋转中心
+          position: 'absolute',
+          cursor: this.dragging ? 'grabbing' : 'grab',
+        };
+      },
+      boxStyle1() {
         return {
           transform: `translate(${this.position.x}px, ${this.position.y}px) scale(${this.scale})`,
           transformOrigin: '0 0', // 确保缩放基于左上角
@@ -96,9 +118,16 @@
       const newFileList = [...data.basicFiles, ...data.usageFiles]
       this.fileList = newFileList
       console.log(newFileList)
+      this.bigView(newFileList[0])
       this.mockFetchData()
     },
     methods: {
+      rotateClockwise() {
+        this.rotate = (this.rotate + 90) % 360;
+      },
+      rotateCounterClockwise() {
+        this.rotate = (this.rotate - 90 + 360) % 360;
+      },
       // 模拟接口调用
       mockFetchData() {
         setTimeout(() => {
@@ -133,6 +162,15 @@
         this.showUrl = ''
         this.showUrl = val.url;
         this.showType = val.type;
+        this.$nextTick(() => {
+          const box = this.$el.querySelector('.drag-box');
+          if (box) {
+            this.centerOffset = {
+              x: box.offsetWidth / 2,
+              y: box.offsetHeight / 2
+            };
+          }
+        });
       },
       // 放大
       zoomIn() {
@@ -187,6 +225,7 @@
       overflow-y: scroll;
       background-color: #fff;
       padding: 15px;
+      scrollbar-width: none;
 
       .list-scroll-nomore {
         margin-top: 55px;
@@ -202,6 +241,10 @@
         background-color: #eef1f9;
         padding: 5px;
 
+        .file-item {
+          width: 100%;
+        }
+
         .file-item:not(:last-child) {
           margin-bottom: 10px;
           cursor: pointer;
@@ -249,6 +292,15 @@
             align-items: center;
             justify-content: center;
             user-select: none;
+
+            img {
+              user-select: none;
+              -webkit-user-drag: none;
+              /* Safari/Chrome */
+              pointer-events: none;
+              /* 可选：彻底禁止图片触发事件 */
+            }
+
             /* 防止文字被选中 */
           }