spot-inspection-big-screen/src/views/info.vue

<template>
  <div id="main">
    <div class="title">
      <div>{{ mainTitle }}</div>
      <div style="width:1.5rem;height:1.5rem;margin-left: 0.625rem;cursor: pointer;" @click="back"><img src="../assets/img/tuichu.png"></div>
    </div>
    <div class="content">
      <div class="content_child">
        <table border="1" cellspacing="0" style="width:100%;">
           <tr height="53">
              <th colspan="2">班次</th>
              <th colspan="2">{{ data.shift }}</th>
              <th>检查人</th>
              <th>{{ data.commitUser.name }}</th>
              <th colspan="3">检查时间</th>
              <th colspan="2">{{ data.time }}</th>
           </tr>
           <template v-if="data.projectCommonList.length">
             <tr height="53" v-for="(item,index) in newProjectCommonList">
               <th colspan="2">{{ item.commonList[0] | argIfExistName }}</th>
                <th colspan="2">{{ item.commonList[0] | argIfExistValue }}</th>
                <th>{{ item.commonList[1] | argIfExistName }}</th>
                <th>{{ item.commonList[1] | argIfExistValue }}</th>
                <th colspan="3">{{ item.commonList[2] | argIfExistName }}</th>
                <th colspan="2">{{ item.commonList[2] | argIfExistValue }}</th>
             </tr>
           </template>
           <tr height="53" v-if="data.projectGroupList.length">
              <th>序号</th>
              <th>点检位置</th>
              <th>项目</th>
              <th>点检方法</th>
              <th style="width:16.125rem">点检内容和标准</th>
              <th style="width:16.125rem">数值</th>
              <th>可视化参考</th>
              <th>结果</th>
              <th>备注</th>
              <th>图片</th>
              <th>工程师确认</th>
           </tr>
           <template v-if="data.projectGroupList.length">
             <template v-for="(item,index) in data.projectGroupList">
               <tr height="53" v-for="(iten,indey) in item.projectList"  :key="indey">
                 <th>{{ jisuan(indey) }}</th>
                 <th :rowspan="item.projectList.length" v-if="indey === 0">{{ item.name }}</th>
                 <th>{{ iten.name }}</th>
                 <th>{{ iten.method}} </th>
                 <th style="width:16.125rem">{{ iten.standard }}</th>
                 <th style="width:16.125rem;">
                   <div style="display: inline-block;width:30%;" v-for="(iteo,indez) in iten.projectSubList" :key="indez">
                     <div>{{ iteo.name }}</div>
                     <div>{{ iteo.value }}</div>
                   </div>
                 </th>
                 <th>
                   <template v-if="iten.file.url">
                     <img style="width:4.5rem;height:6rem;" :src="iten.file.url" alt="" @click="clickImg($event)">
                     <big-img  v-if="showImg" :imgSrc="iten.file.url" @cancelEnlarge="cancelEnlarge"></big-img>
                   </template>
                 </th>
                 <th :style="{background: backgroundStyle(iten.status)}">{{ iten.statusValue }}</th>
                 <th>{{ iten.remark }}</th>
                 <th style="display: flex;justify-content: space-evenly;" v-if="iten.fileList.length">
                   <div v-for="(item,indea) in iten.fileList">
                     <img style="width:4.5rem;height:6rem;" :src="item.url" alt="" @click="clickImg($event)">
                     <big-img  v-if="showImg" :imgSrc="item.url" @cancelEnlarge="cancelEnlarge"></big-img>
                   </div>
                  </th>
                  <th v-else></th>
                 <th>{{ iten.engineer.remark }}</th>
               </tr>
             </template>
           </template>
        </table>
      </div>
    </div>
  </div>
</template>

<script>
  import timg from '../assets/img/timg.jpg'
  import bigImg from "../components/bigImg.vue"
  import { selectDetailById } from '@/api/bigScreen'
  let num  = 0
  export default {
    components: {
      bigImg
    },
    created() {
      num = 0
      this.mainTitle = this.$route.query.name
      const rLoading = this.openLoading()
      selectDetailById({'id':this.$route.query.id}).then(res=> {
        if (res.status === "20000") {
          rLoading.close()
          this.data = res.data
          let commonNum = Math.ceil(res.data.projectCommonList.length/3)
          let projectCommonList = res.data.projectCommonList
          let newProjectCommonList = []
          for (let i=0;i<commonNum;i++){
            let data = {}
            let dataItem = projectCommonList.slice(i*commonNum,(i+1)*commonNum)
            data['commonList'] = dataItem
            newProjectCommonList.push(data)
          }
          this.newProjectCommonList = newProjectCommonList
        } else {
          this.$message.error(res.message)
        }
      })
    },
    mounted() {
    },
    data() {
      return {
        showImg: false,
        data: {},
        mainTitle: '',
        commonNum: 0,
        newProjectCommonList: []
      }
    },
    computed: {
      jisuan(){
        return function(){
          num += 1
          return num
        }
      },
      backgroundStyle() {
        return function(i){
          if( i === 1 ) {
            return 'green'
          } else if ( i=== 2 ) {
            return 'red'
          } else {
            return ''
          }
        }
      },
      // getCommonList() {
      //   let projectCommonList = this.data.projectCommonList
      //   let commonNum = this.commonNum
      //   let newProjectCommonList = []
      //   for (let i=0;i<commonNum;i++){
      //     let data = {}
      //     let dataItem = projectCommonList.slice(i*commonNum,(i+1)*commonNum)
      //     data['commonList'] = dataItem
      //     newProjectCommonList.push(data)
      //   }
      // }
    },
    methods: {
      clickImg () {
            this.showImg = true
      },
      cancelEnlarge () {
        this.showImg = false
      },
      back() {
        this.$router.back()
      }
     },
    filters: {
      argIfExistName(item) {
        return item ? item.name  : ''
      },
      argIfExistValue(item) {
        return item ? item.value  : ''
      }
    }
  }
</script>

<style>
  #main{
    width: 100%;
    height: 100%;
    /*min-height: 100vh;*/
    overflow: hidden;
    color: #fff;
    background-image: url("../assets/img/bg.png");
    background-size: cover;
    background-position: center center;
  }
  .title{
    font-size: 1.6875rem;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .content {
    width: 91%;
    height: 80%;
    margin-top: 2%;
    margin-left: 5rem;
    text-align: center;
    background-image: url("../assets/img/info_bg.png");
    /* background-size: cover; */
    background-size: contain;
    /* background-position: center center; */
    background-repeat: no-repeat;
    position: relative;
  }
  .content_child {
    width: 92%;
    height: 90%;
    overflow-y: auto;
    margin-left:3.25rem;
    position: absolute;
    top: 5%;
  }
  table {
     border: 2px solid #03B8FF;
  }
  th {
    border: 2px solid #03B8FF;
  }
  ::-webkit-scrollbar {   /*隐藏滚动条*/
    display: none;
  }
</style>