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

<template>
  <div class="mod-config container ">
    <div  class="pdfMenu" >
        <div  v-bind:style="{ width: '100%', height: '13%', backgroundColor: color,border: '3px',borderColor: 'white' ,borderStyle:'solid'}"></div>
<!--        <button v-on:click="changeColor">Change Color</button>-->
      <h1 style="color: white">SOP指导书  派工单|{{seqNo}}</h1>
    </div>
    <div  class="pdf-wrapper" ref="pdfWrapper">
      <img style="max-width:  100%;max-height: 100%;vertical-align:middle;" :src="sopUrl">
<!--      <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">SIP指导书  操作员|{{operator}}</h1>
    </div>
    <div  class="pdf-wrapper" ref="pdfWrapper">
      <img style="max-width:  100%;max-height: 100%;vertical-align:middle;" :src="badUrl">
<!--      <pdf ref="pdfViewer"-->
<!--           :src="badUrl"-->
<!--           :page="badPage"-->
<!--           @num-pages="setBadPages"-->
<!--           @page-loaded="setPageLoaded"-->
<!--           class="pdf-document"-->
<!--      ></pdf>-->

    </div>

  </div>
</template>

<script>
  import {
    getSopAddress,
  } from '@/api/board.js'
  export default {
    name: 'sopBoard',

    data () {

      return {
        color:'#ffff00',
        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: '',
        sopList:[],
        badList:[],
        pageLoaded: false,
        timeOut:30000,
        // packageUrl:'http://192.168.1.130/upload/',
        // packageUrl:'http://192.168.2.172/sopFile/',
        packageUrl:this.$store.state.user.tvSopUrl,
      }
    },
    mounted () {
      this.changePdf();
      this.changePage();
      this.getPDF();
    },
    methods: {
      changePdf() {
        //获取图片数据
        setInterval(() => {
          this.getPDF();
        }, 90000)
      },
      changePage() {
        //刷新图片
        setInterval(() => {
         this.changePic()
        }, 30000)
        // }, this.timeOut)
      },
      changePic(){
        if(this.sopPage==this.sopMax){
          this.sopPage=1;
        }else {
          this.sopPage=Number(this.sopPage)+1
        }
        this.sopUrl=this.packageUrl+this.sopList[this.sopPage-1].attaFileNameDb;
        if(this.badPage==this.badMax){
          this.badPage=1;
        }else {
          this.badPage=Number(this.badPage)+1
        }
        this.badUrl=this.packageUrl+this.badList[this.badPage-1].attaFileNameDb;
      },
      changeColor(type){
        if(type==='1'){
          this.color='#00ff00'
        }else if(type==='2'){
          this.color='#ffff00'
        }else if(type==='3'){
          this.color='#ff0303'
        }else {
          this.color='#ffff00'
        }
      },

      getPDF(){
        let data={
          tvId: this.tvId
        }
        getSopAddress(data).then(({data}) => {
          if(data.code==0){
            if(data.data.nowSeqNo==null||data.data.nowSeqNo==''){
              this.sopUrl='';
              this.badUrl='';
              this.sopList=[];
              this.badList=[];
              this.seqNo='无';
              this.operator='无';
              this.changeColor(data.data.colourFlag)
            }else if(this.seqNo!=data.data.nowSeqNo) {
              this.sopUrl='';
              this.badUrl='';
              this.operator = data.data.nowOperator;
              this.seqNo = data.data.nowSeqNo;
              this.sopList=data.sop;
              this.badList=data.bad;
              this.sopPage=1;
              this.badPage=1;
              this.sopMax=data.sop.length;
              this.badMax=data.bad.length;
              this.changeColor(data.data.colourFlag)
              if(this.sopList.length>0){
                this.sopUrl=this.packageUrl+this.sopList[0].attaFileNameDb;
              }
              if(this.badList.length>0){
                this.badUrl=this.packageUrl+this.badList[0].attaFileNameDb;
              }
            }else if(this.seqNo==data.data.nowSeqNo) {
              this.sopList=data.sop;
              this.badList=data.bad;
              this.sopMax=data.sop.length;
              this.badMax=data.bad.length;
              this.changeColor(data.data.colourFlag)
            }
            // console.log("SOP："+ this.sopUrl)
            // console.log("不良："+ this.badUrl)
            // console.log(this.$store.state.user.tvSopUrl)
            // console.log(this.sopList)
            // console.log("SOP："+ this.sopList[0].attaFileNameDb)
          }else {
            this.sopUrl='';
            this.badUrl='';
            this.sopList=[];
            this.badList=[];
            this.seqNo='无';
            this.operator='无';
            this.changeColor('2')
          }
        })
      }
    },
    created () {
      // this.search()
      // this.refreshTable()

    }
  }
</script>

<style >


  .board2 .el-table .cell {
    line-height: 13px;
    font-size: 12px;
    height: 13px;
    padding: 0px;
  }
  .board2 .el-table .#00ff00 {
    background: #8cee8c;
  }
  .board2 .el-table .success-row {
    background: #00ff00;
  }
  .board2 .el-table .false-row {
    /*background: #cbcb14;*/
    background: #ff0000;
  }
  .board2 .el-table .#ffff00-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 {
    font-size: 11px;
    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>