1.sop优化

小小儁爺

7 天以前 9e14e61e61a3dfb5271f387bf0844bf31c21daab

1.sop优化

 src/views/sopManager/sop.vue

@@ -321,7 +321,12 @@
        </el-form-item>
      </el-form>

      <div style="border: 5px solid #ccc;" class="sop-preview-container">
      <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
@@ -329,6 +334,7 @@
          :src="baseUrl+dialogSopForm.sop"
          fit="contain"
          class="sop-image-preview"
          :style="{height: isFullscreen ? '100vh' : '80vh'}"
        />

        <!-- PDF 或其他类型使用 iframe -->
@@ -336,10 +342,9 @@
          v-else
          id="iframe"
          :src="`${baseUrl}${dialogSopForm.sop}#view=FitH`"
          style="width: 100%;height: 80vh"
          :style="{width: '100%', height: isFullscreen ? '100vh' : '80vh'}"
          frameborder="0"
        />
        <!--        :src="baseUrl+dialogSopForm.sop"-->
      </div>

      <span slot="footer" class="dialog-footer">
@@ -362,15 +367,12 @@
  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,
    Screenfull
  },
@@ -407,7 +409,8 @@
      tableDataDetail: [],
      rowData: {}, // 行点击事件存储值
      SopDialogVisible: false,
      dialogSopForm: { // 设备SOP表单
      isFullscreen: false, // 全屏状态
      dialogSopForm: { // 设备 SOP 表单
        sop: '',
        v: ''
      },
@@ -447,10 +450,15 @@
    errorHandler() {
      console.log('渲染失败')
    },
    // 切换全屏
    toggleFullscreen() {
      this.isFullscreen = !this.isFullscreen
    },
    // 弹出框关闭
    handleSopClose() {
      this.SopDialogVisible = false
      this.dialogSopForm = { // 设备SOP表单
      this.isFullscreen = false // 重置全屏状态
      this.dialogSopForm = { // 设备 SOP 表单
        sop: '',
        v: ''
      }
@@ -632,11 +640,54 @@
  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;
  //max-height: 80vh;
  display: block;

}
</style>