ha-mes-vue/src/views/modules/board/sopBoard_old.vue

<template>
  <div class="mod-config container ">
    <div  class="pdfMenu" >
      <h1 style="color: white">SOP指导书  当前派工单|{{seqNo}}</h1>
    </div>
    <div  class="pdf-wrapper" ref="pdfWrapper">
      <pdf ref="pdfViewer"
           :src="sopUrl"
           :page="sopPage"
           @num-pages="setSopPages"
           @page-loaded="setPageLoaded"
           class="pdf-document"

      ></pdf>
    </div>
    <div  class="pdfMenu" >
      <h1 style="color: white">SQC指导书  当前操作员|{{operator}}</h1>
    </div>
    <div  class="pdf-wrapper" ref="pdfWrapper">
      <pdf ref="pdfViewer"
           :src="badUrl"
           :page="badPage"
           @num-pages="setBadPages"
           @page-loaded="setPageLoaded"
           class="pdf-document"
      ></pdf>

    </div>

  </div>
</template>

<script>
  let rollstop = ''
  let rolltimer = ''// 自动滚动的定时任务
  let refresher = '' //数据刷新定时器
  import {
    getSopAddress,
  } from '@/api/board.js'
  import pdf from 'vue-pdf'
  export default {
    name: 'sopBoard',
    components: {
      pdf
    },
    data () {

      return {
        tvId:this.$route.query.ip?this.$route.query.ip:'TV001',
        operator:'',
        seqNo:'',
        sopMax: 1,
        sopPage: 1,
        badMax: 1,
        badPage: 1,
        height: 200,
        tableData: [],
        // 默认的刷新，滚动时间，滚动间距
        // refreshTime: 5,
        // rollTime: 5,
        // rollPx: 1,
        sopUrl: '',
        badUrl: '',
        pageLoaded: false,
        timeOut:30000,
        // packageUrl:'http://192.168.1.130/upload/',
        packageUrl:'http://192.168.2.172/sopFile/',
        // packageUrl:'http://192.168.1.83:81/upload/',
      }
    },
    mounted () {
      this.$nextTick(() => {
        this.changePdf();
        this.changePage();
        this.getPDF();
      });
    },
    methods: {

      setSopPages(numPages) {
        this.sopMax = numPages
      },
      setBadPages(numPages) {
        this.badMax = numPages
      },
      setPageLoaded() {
        this.pageLoaded = true
      },
      changePage() {
        refresher = setInterval(() => {
           if(this.sopPage==this.sopMax){
             this.sopPage=1;
           }else {
            this.sopPage=Number(this.sopPage)+1
           }
          if(this.badPage==this.badMax){
            this.badPage=1;
          }else {
            this.badPage=Number(this.badPage)+1
          }
        }, this.timeOut)
      },

      changePdf() {
        refresher = setInterval(() => {
          this.getPDF();
        }, 30000)
      },
      getPDF(){
        let data={
          tvId: this.tvId
        }
        getSopAddress(data).then(({data}) => {
          if(data.code==0){
            if(this.sopUrl!=this.packageUrl+data.data.sopAddress){
              this.sopUrl=this.packageUrl+data.data.sopAddress;
              this.sopPage=1;
            }
            if(this.badUrl!=this.packageUrl+data.data.badAddress){
              this.badUrl=this.packageUrl+data.data.badAddress;
              this.badPage=1;
            }
            console.log(this.sopUrl)
            this.operator=data.data.nowOperator;
            this.seqNo=data.data.nowSeqNo;
          }else {
            this.sopUrl='';
            this.badUrl='';
            this.seqNo='无';
            this.operator='无';
          }
        })
      }
    },
    created () {
      // this.search()
      // this.refreshTable()

    }
  }
</script>

<style >


  .board2 .el-table .cell {
    line-height: 13px;
    font-size: 12px;
    height: 13px;
    padding: 0px;
  }
  .board2 .el-table .green {
    background: #8cee8c;
  }
  .board2 .el-table .success-row {
    background: #1bb61b;
  }
  .board2 .el-table .false-row {
    /*background: #cbcb14;*/
    background: #db1212;
  }
  .board2 .el-table .yellow-row{
    background: #ffff00;
  }
  .container {
    font-size: 13px;
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    content: "";
    background-image: url(~@/assets/img/factory.jpg);
    background-size: cover;
  }
  .pdf-container {
    position: relative;
    width: 100%;
    height: 100%;
  }

  .pdf-wrapper {
    position: relative;
    width: 43%;
    height: 100%;
    float: left;
    margin-top: 0%;
    margin-left: 0%;
    overflow: hidden;
    display: flex;
    align-items: center; /* 垂直居中 */
    justify-content: center; /* 水平居中 */
  }
  .pdf-document {
    transform-origin: center;
    width: 100%;
    height: 100%;
  }
  .pdfMenu {
    width: 7%;
    height: 100%;
    float: left;
    writing-mode: vertical-lr; /* 竖排显示，从左到右 */
    text-orientation: upright; /* 竖排文字方向为正常朝向 */
    display: flex; /* 使用 Flex 布局 */
    align-items: center; /* 垂直居中对齐 */
  }
  .vertical-text {
    writing-mode: vertical-lr; /* 竖排显示，从左到右 */
    text-orientation: upright; /* 竖排文字方向为正常朝向 */
  }

</style>