src/views/sopManager/sop.vue

@@ -6,6 +6,8 @@
        浙江优步体育用品股份有限公司工序SOP
      </div>

      <screenfull id="screenfull" class="right-menu-item hover-effect" />

      <div class="bodyTopFormGroup">
        <el-form
          ref="form"
@@ -277,7 +279,6 @@
        </el-table>
      </div>
    </div>

    <!--    sop-->
    <el-dialog
      title="浙江优步体育用品股份有限公司SOP预览"
@@ -320,27 +321,30 @@
        </el-form-item>
      </el-form>

      <div style="border: 5px solid #ccc;">
        <!--        <vue-office-pdf-->
        <!--          :src="baseUrl+dialogSopForm.sop"-->
        <!--          style="width: 100%;height: 80vh"-->
        <!--          @rendered="renderedHandler"-->
        <!--          @error="errorHandler"-->
        <!--        />-->
        <iframe
      <div style="border: 5px solid #ccc;" class="sop-preview-container" :class="{ 'fullscreen': isFullscreen }">
        <!-- 全屏切换按钮 -->
        <div class="fullscreen-toggle" @click="toggleFullscreen">
          <svg-icon v-if="!isFullscreen" icon-class="fullscreen" />
          <svg-icon v-else icon-class="exit-fullscreen" />
        </div>

        <!-- 图片类型预览 -->
        <el-image
          v-if="isImageType(dialogSopForm.sop)"
          :src="baseUrl+dialogSopForm.sop"
          style="width: 100%;height: 80vh"
          fit="contain"
          class="sop-image-preview"
          :style="{height: isFullscreen ? '100vh' : '80vh'}"
        />

        <!-- PDF 或其他类型使用 iframe -->
        <iframe
          v-else
          id="iframe"
          :src="`${baseUrl}${dialogSopForm.sop}#view=FitH`"
          :style="{width: '100%', height: isFullscreen ? '100vh' : '80vh'}"
          frameborder="0"
        />
        <!--        <pdf-->
        <!--          v-for="item in numPages"-->
        <!--          :key="item"-->
        <!--          ref="pdf"-->
        <!--          :src="baseUrl+dialogSopForm.sop"-->
        <!--          :page="item"-->
        <!--          style="display: inline-block;width: 800px;height: 500px;"-->
        <!--        />-->

      </div>

      <span slot="footer" class="dialog-footer">
@@ -363,15 +367,14 @@
  SopSearchMesOrderSearch,
  SopSearchUpdateMesOrderStepSearch
} from '@/api/SopManager'
// 引入VueOfficePdf组件
import VueOfficePdf from '@vue-office/pdf'
import pdf from 'vue-pdf'
import Screenfull from '@/components/Screenfull'

export default {
  name: 'WorkOrderList',
  components: {
    VueOfficePdf,
    Pagination
    Pagination,
    Screenfull
  },
  directives: { elDragDialog, waves },
  data() {
@@ -406,7 +409,8 @@
      tableDataDetail: [],
      rowData: {}, // 行点击事件存储值
      SopDialogVisible: false,
      dialogSopForm: { // 设备SOP表单
      isFullscreen: false, // 全屏状态
      dialogSopForm: { // 设备 SOP 表单
        sop: '',
        v: ''
      },
@@ -446,13 +450,25 @@
    errorHandler() {
      console.log('渲染失败')
    },
    // 切换全屏
    toggleFullscreen() {
      this.isFullscreen = !this.isFullscreen
    },
    // 弹出框关闭
    handleSopClose() {
      this.SopDialogVisible = false
      this.dialogSopForm = { // 设备SOP表单
      this.isFullscreen = false // 重置全屏状态
      this.dialogSopForm = { // 设备 SOP 表单
        sop: '',
        v: ''
      }
    },
    // 判断是否为图片类型
    isImageType(filepath) {
      if (!filepath) return false
      const imageExtensions = ['.jpg', '.jpeg', '.png', '.gif', '.bmp', '.webp']
      const lowerPath = filepath.toLowerCase()
      return imageExtensions.some(ext => lowerPath.endsWith(ext))
    },
    sopChange(val) {
      this.dialogSopForm.v = this.sopArr.find(i => i.filepath === val).version
@@ -610,4 +626,68 @@
    height: 26px !important;
  }
}

#screenfull{
  position: absolute;
  right: 20px;
  top:20px;
  font-size: 28px;
  cursor: pointer;
}

.sop-preview-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 80vh;
  position: relative;
  transition: all 0.3s ease;
}

.fullscreen {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  background: #fff;
  border: none !important;
  padding: 0;
  margin: 0;
  height: 100%;
}

.fullscreen-toggle {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 10000;
  cursor: pointer;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.6);
  border-radius: 50%;
  transition: all 0.3s ease;

  &:hover {
    background: rgba(0, 0, 0, 0.8);
    transform: scale(1.1);
  }

  ::v-deep .svg-icon {
    font-size: 20px;
    color: #fff;
  }
}

.sop-image-preview {
  max-width: 100%;
  //max-height: 80vh;
  display: block;

}
</style>