From 6d45c36fdbd5d4f02718883d8ba6ba95f78c7998 Mon Sep 17 00:00:00 2001
From: Tuzki <1720599558@qq.com>
Date: Thu, 8 May 2025 14:21:22 +0800
Subject: [PATCH] =?UTF-8?q?feat(report):=20=E4=BA=8B=E4=BB=B6=E5=8E=86?=
 =?UTF-8?q?=E5=8F=B2=E8=AE=B0=E5=BD=95=E6=B7=BB=E5=8A=A0=E6=96=87=E4=BB=B6?=
 =?UTF-8?q?=E9=A2=84=E8=A7=88=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 新增文件预览模块，支持图片和 PDF 文件的查看
- 实现放大、缩小、旋转等功能
- 优化对话框布局，支持全屏预览
- 修改相关组件以适应新功能
---
 src/views/report/eventHistory/index.vue       | 339 +++++++++++++++++-
 .../eventList/EquipmentRegistrationForm.vue   |   5 +-
 src/views/report/eventList/printDemo.vue      |  39 +-
 3 files changed, 355 insertions(+), 28 deletions(-)

diff --git a/src/views/report/eventHistory/index.vue b/src/views/report/eventHistory/index.vue
index cc871a9..4cf912b 100644
--- a/src/views/report/eventHistory/index.vue
+++ b/src/views/report/eventHistory/index.vue
@@ -8,13 +8,12 @@
       <el-form class="m-search-form" :class="searchState ? 'col' : ''" :model="queryParams" ref="queryForm"
         :inline="true" v-show="showSearch" label-width="">
         <el-form-item label="单位名称/姓名" prop="userUnit">
-          <el-input v-model="queryParams.userUnit" placeholder="请输入单位名称/姓名" 
-            @keyup.enter.native="handleQuery" />
+          <el-input v-model="queryParams.userUnit" placeholder="请输入单位名称/姓名" @keyup.enter.native="handleQuery" />
         </el-form-item>
         <el-form-item label="创建时间" prop="createTime" label-width="100px">
-          <el-date-picker v-model="queryParams.createTime" :clearable="false" style="width: 240px" value-format="yyyy-MM-dd HH:mm:ss"
-            type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"
-            :default-time="['00:00:00', '23:59:59']" />
+          <el-date-picker v-model="queryParams.createTime" :clearable="false" style="width: 240px"
+            value-format="yyyy-MM-dd HH:mm:ss" type="daterange" range-separator="-" start-placeholder="开始日期"
+            end-placeholder="结束日期" :default-time="['00:00:00', '23:59:59']" />
         </el-form-item>
       </el-form>
       <div class="m-search-button">
@@ -33,7 +32,7 @@
         <template v-else>
           <div class="event-history-item" v-for="item in list">
             <div class="event-history-item-left">
-              <div class="enent-name">{{ item.userUnit+'-'+item.licensePlate || '--' }}</div>
+              <div class="enent-name">{{ item.userUnit + '-' + item.licensePlate || '--' }}</div>
               <div class="event-history-item-time">创建时间:{{ parseTime(item.createTime) }}</div>
             </div>
             <div class="event-history-item-right">
@@ -47,9 +46,67 @@
       <pagination class="m-pagination" v-show="total > 0" :total="total" :page.sync="queryParams.pageNo"
         :limit.sync="queryParams.pageSize" @pagination="getList" />
     </div>
-    <el-dialog class="m-dialog" title="记录详情" :visible.sync="open" width="1000px" v-dialogDrag append-to-body>
-      <div v-if="Object.keys(formData).length === 0">加载中...</div>
-      <EquipmentRegistrationForm :disabled="formDisabled" v-else :initialData="formData" />
+    <el-dialog class="m-dialog" title="记录详情" :visible.sync="open" width="1000px" v-dialogDrag append-to-body fullscreen>
+      <div class="view-box">
+        <div class="file-view-box" v-if="fileList && fileList.length > 0">
+          <div class="list-scroll-nomore">
+            <div class="list-scroll-box">
+              <div v-for="item in fileList" class="file-item" @click="bigView(item)">
+                <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>
+          </div>
+
+          <div class="file-view-content">
+            <div class="btn-box">
+              <div class="pagination">
+                <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="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="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>
+                <el-button @click="currentPage = currentPage - 1" :disabled="currentPage <= 1"
+                  style="font-size: 14px;padding: 10px 15px;">上一页</el-button>
+                <span style="font-size: 14px;margin: 0 10px;">第 {{ currentPage }} 页 / 共 {{ pageCount }} 页</span>
+                <el-button @click="currentPage = currentPage + 1" :disabled="currentPage >= pageCount"
+                  style="font-size: 14px;padding: 10px 15px;">下一页</el-button>
+              </div>
+            </div>
+            <div class="nomore-view">
+              <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 style="width: 100%;" 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>
+
+            </div>
+
+
+
+          </div>
+        </div>
+        <div class="export-bx">
+          <div class="word-view-box">
+            <div v-if="Object.keys(formData).length === 0">加载中...</div>
+            <EquipmentRegistrationForm :disabled="formDisabled" v-else :initialData="formData" />
+          </div>
+        </div>
+      </div>
+
     </el-dialog>
 
   </div>
@@ -60,18 +117,45 @@
   import VMixins from '@/utils/v-mixins'
   import VDefault from '@/views/components/v-default/index.vue'
   import EquipmentRegistrationForm from '../eventList/EquipmentRegistrationForm.vue'
+  import pdf from 'vue-pdf';
 
   export default {
     name: 'TicketSort',
     mixins: [VMixins],
     components: {
       VDefault,
-      EquipmentRegistrationForm
+      EquipmentRegistrationForm,
+      pdf
     },
     data() {
       return {
         open: false,
         formDisabled: false,
+        fileList: [],
+        currentPage: 1,   // 当前页码
+        pageCount: 0,     // 总页数
+        isLoading: false, // 加载状态
+        rotate: 0,
+        rotates: 0,
+        showUrl: '',
+        showType: '',
+        scale: 1,        // 缩放比例
+        position: {      // 当前元素位置
+          x: 0,
+          y: 0
+        },
+        dragging: false, // 拖动状态
+        startX: 0,       // 拖动起始X坐标
+        startY: 0,       // 拖动起始Y坐标
+        initialX: 0,     // 元素初始X位置
+        initialY: 0,     // 元素初始Y位置
+        centerOffset: { x: 0, y: 0 }, // 用于中心点偏移计算
+        progress: {
+          visible: false,
+          current: 0,
+          total: 0,
+          text: ''
+        },
         // 遮罩层
         loading: true,
         // 导出遮罩层
@@ -82,7 +166,7 @@
         total: 1,
         // 门票分类列表
         list: [
-          
+
         ],
         formData: {},
         // 是否展开，默认全部展开
@@ -103,6 +187,31 @@
     created() {
       this.getList()
     },
+    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) 
+            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', // 确保缩放基于左上角
+          position: 'absolute',
+          cursor: this.dragging ? 'grabbing' : 'grab'
+        };
+      }
+    },
     methods: {
       /** 查询列表 */
       async getList() {
@@ -121,7 +230,11 @@
         const res = await TicketSortApi.getEquipmentt(val.id)
         this.formData = res.data
         this.formData.infoList = JSON.parse(this.formData.infoList)
-        this.formData.commissionDate = this.formData.commissionDate.join('-')
+        // this.formData.commissionDate = this.formData.commissionDate.join('-')
+        this.fileList = this.formData.fileUrl ? JSON.parse(this.formData.fileUrl) : []
+        if (this.fileList.length > 0) {
+          this.bigView(this.fileList[0])
+        }
         console.log(res)
       },
       /** 搜索按钮操作 */
@@ -163,12 +276,208 @@
         } finally {
           this.exportLoading = false
         }
+      },
+      bigView(val) {
+        //重制缩放和旋转和拖拽
+        this.position = {
+          x: 0,
+          y: 0
+        }
+        this.centerOffset = {
+          x: 0,
+          y: 0
+        }
+        this.rotate = 0
+        this.scale = 1
+        this.dragging = false
+        this.currentPage = 1;
+        //重制缩放和旋转和拖拽结束
+
+        this.showUrl = ''
+        this.showUrl = val.url;
+        this.showType = val.type;
+        this.$nextTick(() => {
+          const box = this.$el.querySelector('.drag-box');
+          if (box) {
+            this.centerOffset = {
+              x: 0,
+              y: 0
+            };
+          }
+        });
+      },
+      // 放大
+      zoomIn() {
+        this.scale = Math.min(this.scale * 1.2, 4); // 限制最大放大倍数
+      },
+      // 缩小
+      zoomOut() {
+        this.scale = Math.max(this.scale * 0.8, 0.5); // 限制最小缩小倍数
+      },
+      // 开始拖动
+      startDrag(e) {
+        this.dragging = true;
+        this.startX = e.clientX;
+        this.startY = e.clientY;
+        this.initialX = this.position.x;
+        this.initialY = this.position.y;
+        document.addEventListener('mousemove', this.onDrag);
+        document.addEventListener('mouseup', this.stopDrag);
+      },
+      // 拖动中
+      onDrag(e) {
+        if (!this.dragging) return;
+        const dx = e.clientX - this.startX;
+        const dy = e.clientY - this.startY;
+        this.position.x = this.initialX + dx;
+        this.position.y = this.initialY + dy;
+      },
+      // 停止拖动
+      stopDrag() {
+        this.dragging = false;
+        document.removeEventListener('mousemove', this.onDrag);
+        document.removeEventListener('mouseup', this.stopDrag);
       }
     }
   }
 </script>
 <style scoped lang="scss">
-.event-history-item:not(:last-child){
-  margin-bottom: 10px;
-}
+  .event-history-item:not(:last-child) {
+    margin-bottom: 10px;
+  }
+
+  .view-box {
+    display: flex;
+    align-items: flex-start;
+    width: 100%;
+    justify-content: space-between;
+    overflow-y: scroll;
+  }
+
+  .file-view-box {
+    flex: 1;
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    overflow-y: scroll;
+    height: calc(100vh - 125px);
+    overflow-y: scroll;
+    background-color: #fff;
+    padding: 15px;
+    scrollbar-width: none;
+    margin-right: 10px;
+
+    .list-scroll-nomore {
+      margin-top: 55px;
+      height: 77vh;
+      overflow-y: scroll;
+      scrollbar-width: none;
+      width: 10%;
+    }
+
+    .list-scroll-box {
+
+      height: fit-content;
+      background-color: #eef1f9;
+      padding: 5px;
+
+      .file-item {
+        width: 100%;
+        background: #fff;
+        padding: 5px 0;
+      }
+
+      .file-item:not(:last-child) {
+        margin-bottom: 15px;
+        cursor: pointer;
+      }
+    }
+
+    .file-view-content {
+      flex: 1;
+      margin-left: 10px;
+      position: relative;
+
+      .btn-box {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        .pagination {
+          margin: 10px;
+          text-align: center;
+          display: flex;
+          align-items: center;
+        }
+
+      }
+
+      .nomore-view {
+        width: 100%;
+        height: calc(100vh - 200px);
+        background-color: #eef1f9;
+        overflow: hidden;
+        position: relative;
+
+        .pdf-img-box {
+          overflow: scroll;
+          scrollbar-width: none;
+          /* Firefox */
+          -ms-overflow-style: none;
+          /* Internet Explorer 10+ */
+        }
+
+        .drag-box {
+          width: 100%;
+          height: fit-content;
+          background: #f0f0f0;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          user-select: none;
+
+          img {
+            width: 100%;
+            user-select: none;
+            -webkit-user-drag: none;
+            /* Safari/Chrome */
+            pointer-events: none;
+            /* 可选：彻底禁止图片触发事件 */
+          }
+
+          /* 防止文字被选中 */
+        }
+
+        .mask {
+          background-color: rgba(0, 0, 0, 0.5);
+          height: 100%;
+          width: 100%;
+          color: #fff;
+          text-align: center;
+          line-height: 100vh;
+          z-index: 9999;
+          position: relative;
+        }
+      }
+
+    }
+  }
+
+  .export-bx {
+    background-color: #fff;
+    position: relative;
+    height: calc(100vh - 126px);
+    overflow-y: scroll;
+    scrollbar-width: none;
+  }
+
+  .word-view-box {
+    width: fit-content;
+    min-width: 50%;
+    height: calc(100vh - 200px);
+    overflow-y: scroll;
+    scrollbar-width: thin !important;
+    scrollbar-color: #7dbdfc #f5f5f5;
+  }
+
 </style>
\ No newline at end of file
diff --git a/src/views/report/eventList/EquipmentRegistrationForm.vue b/src/views/report/eventList/EquipmentRegistrationForm.vue
index c68708a..77f5187 100644
--- a/src/views/report/eventList/EquipmentRegistrationForm.vue
+++ b/src/views/report/eventList/EquipmentRegistrationForm.vue
@@ -265,7 +265,8 @@
           "telephone": "",//单位固定电话
           "safetyManager": "",//安全管理员
           "mobilePhone": "",//移动电话
-          "infoList": []
+          "infoList": [],
+          "fileUrl":""
         },
         rules: {
           equipmentType: [{ required: true, message: '设备品种不能为空', trigger: 'blur' }],
@@ -281,7 +282,7 @@
             // { validator: validateNumber('L') }
           ],
           contractor: [{ required: true, message: '施工单位不能为空', trigger: 'blur' }],
-          supervisionAgency: [{ required: true, message: '监督检验机构不能为空', trigger: 'blur' }],
+          // supervisionAgency: [{ required: true, message: '监督检验机构不能为空', trigger: 'blur' }],
           userUnit: [{ required: true, message: '使用单位不能为空', trigger: 'blur' }],
           userAddress: [{ required: true, message: '使用地址不能为空', trigger: 'blur' }],
           unifiedSocialCode: [{ required: true, message: '统一信用代码不能为空', trigger: 'blur' }],
diff --git a/src/views/report/eventList/printDemo.vue b/src/views/report/eventList/printDemo.vue
index 340563a..43cddd0 100644
--- a/src/views/report/eventList/printDemo.vue
+++ b/src/views/report/eventList/printDemo.vue
@@ -25,8 +25,8 @@
             <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>
-            <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>
             <el-button @click="currentPage = currentPage - 1" :disabled="currentPage <= 1"
               style="font-size: 14px;padding: 10px 15px;">上一页</el-button>
             <span style="font-size: 14px;margin: 0 10px;">第 {{ currentPage }} 页 / 共 {{ pageCount }} 页</span>
@@ -338,9 +338,14 @@
           const maxAgencies = agencies.slice(0, 3);
 
           // 3. 拼接字符串
-          formData.supervisionAgency = maxAgencies.length > 0
-            ? maxAgencies.join('/ ')
-            : '';
+          if (formData.fillingMedium == "LNG" || formData.fillingMedium == "") {
+            formData.supervisionAgency = maxAgencies.length > 0
+              ? maxAgencies.join('/ ')
+              : '';
+          } else {
+            formData.supervisionAgency = ""
+          }
+
         } catch (e) {
           console.error('监督检验机构处理失败:', e);
           formData.supervisionAgency = '';
@@ -419,7 +424,7 @@
               internalId: ''
             };
           });
-
+          formData.cylinderQuantity = tempInfoList.length;
           // 5. 追加剩余未使用的ID（最多补满3条）
           while (tempInfoList.length < 3 && remainingIds.length > 0) {
             tempInfoList.push({
@@ -546,13 +551,24 @@
                   ]
                 }
               }
+              // 处理对象类型的extractedData（新增优先级控制）
+              const currentType = item.type
+              const isIdCard = currentType === 'idCard'
+              const isVehicle = currentType === 'vehicleLicense'
               // 处理对象类型的extractedData
+              debugger
               return {
-                ...acc,
-                ...item.extractedData // 合并对象属性
+                ...acc, // 保留已有字段
+                ...item.extractedData, // 常规合并
+                // 特殊处理userAddress
+                userAddress: isIdCard
+                  ? (item.extractedData.userAddress || acc.userAddress) // idCard优先
+                  : isVehicle
+                    ? (acc.userAddress || item.extractedData.userAddress) // vehicle补充
+                    : acc.userAddress // 其他类型不处理
               }
             }
-            return acc;
+            return acc
           }, {
             registrationCategory: this.formData.registrationCategory,
             equipmentType: "特种气瓶",//设备品种
@@ -579,7 +595,8 @@
             mobilePhone: "",//移动电话
             postalCode: "050200",//邮政编码
             certificateList: [], // 初始化数组容器
-            infoList: []
+            infoList: [],
+            fileUrl: JSON.stringify(this.fileList)
           });
           console.log('合并结果', mergedData);
           // const mergedData = {
@@ -720,7 +737,7 @@
           //   ]
           // }
 
-          this.calculateCylinderQuantity(mergedData);//气瓶数量
+          // this.calculateCylinderQuantity(mergedData);//气瓶数量
           this.processFillingMedium(mergedData);//重装介质
           this.processNominalPressure(mergedData);//工作压力
           this.processCylinderVolume(mergedData);//气瓶容积