qa-prevention-gwj-vue/src/views/safetyenvironmental/archive/components/info.vue

<template>
  <div>
    <div class="app-container">
      <div id="printContent" class="dialogContent mb-20">
        <div class="no-print">
          <div class="level-title">
            <h1>秦港股份有限公司现场{{ pd.INSPECTION_SUBJECT }}检查记录</h1>
          </div>
        </div>
        <h3 class="no-show" style="text-align: center">秦港股份有限公司现场{{ pd.INSPECTION_SUBJECT }}检查记录</h3>
        <div class="mb-20">
          <table class="table-ui">
            <tr>
              <td class="tbg" width="12%">被检查单位</td>
              <td width="30%">{{ pd.INSPECTED_DEPARTMENT_NAMES }}</td>
              <td class="tbg" width="15%">被检查单位现场负责人</td>
              <td width="40%">{{ pd.INSPECTED_SITEUSER_NAME }}</td>
            </tr>
            <tr>
              <!--              <td class="tbg" width="12%">被检查单位</td>-->
              <!--              <td width="38%">{{ pd.INSPECTED_DEPARTMENT_NAMES }}</td>-->
              <!--              <td class="tbg" width="15%">被检查单位现场负责人</td>-->
              <!--              <td width="35%">{{ pd.INSPECTED_SITEUSER_NAME }}</td>-->
              <td class="tbg">检查场所</td>
              <td colspan="3">{{ pd.INSPECTION_PLACE }}</td>
            </tr>
            <tr>
              <!--              <td class="tbg">检查部门</td>-->
              <!--              <td>{{ pd.INSPECTION_LEADDEPARTMENT_NAME }}</td>-->
              <!--              <td class="tbg">检查类型</td>-->
              <!--              <td>{{ pd.INSPECTION_TYPE_NAME }}</td>-->
              <td class="tbg">牵头检查部门</td>
              <td>{{ pd.INSPECTION_LEADDEPARTMENT_NAME }}</td>
              <td class="tbg">检查人员</td>
              <td>{{ pd.INSPECTION_USER_NAME }}</td>
            </tr>
            <!--            <tr>-->
            <!--              <td class="tbg">检查场所</td>-->
            <!--              <td colspan="3">{{ pd.INSPECTION_PLACE }}</td>-->
            <!--            </tr>-->
            <tr>
              <!--              <td class="tbg">检查时间</td>-->
              <!--              <td colspan="3">{{ formatTime(pd.INSPECTION_TIME_START) }} 至 {{ formatTime(pd.INSPECTION_TIME_END) }}</td>-->
              <td class="tbg">检查类型</td>
              <td>{{ pd.INSPECTION_TYPE_NAME }}</td>
              <td class="tbg">检查时间</td>
              <td>{{ formatTime(pd.INSPECTION_TIME_START) }} 至 {{ formatTime(pd.INSPECTION_TIME_END) }}</td>
            </tr>
            <tr>
              <td class="tbg">记录填写时间</td>
              <td colspan="3">{{ pd.CREATTIME }}</td>
            </tr>

            <tr v-if="pd.situationList">
              <td colspan="4" style="padding: 0;">
                <table class="table-vi">
                  <tr>
                    <th>检查情况</th>
                  </tr>
                  <tr v-for="(item,index) in pd.situationList" :key="'situation'+index">
                    <td>{{ index + 1 }}. {{ item.SITUATION }}</td>
                  </tr>
                </table>
              </td>
            </tr>
            <tr v-if="pd.hiddenList">
              <td colspan="4" style="padding: 0;">
                <table class="table-vi">
                  <tr>
                    <th colspan="5">发现问题</th>
                  </tr>
                  <tbody v-for="(item) in pd.hiddenList" :key="item.HIDDEN_ID" class="no-print">
                    <tr>
                      <td class="tbg">隐患描述</td>
                      <td>{{ item.HIDDENDESCR }}</td>
                      <td class="tbg">隐患部位</td>
                      <td>{{ item.HIDDENPART_NAME?item.HIDDENPART_NAME:item.HIDDENPART }}</td>
                      <td width="300">
                        <el-button icon="el-icon-view" size="mini" @click="goView(item.HIDDEN_ID)">查看</el-button>
                        <el-button type="success" icon="el-icon-view" size="mini" @click="checkFlow(item)">流程图</el-button>
                        <el-button v-if="( pd.INSPECTION_STATUS == '0' && isDeleteDisplay) || ( isDeleteDisplay && pd.INSPECTION_STATUS =='2' )" type="danger" icon="el-icon-view" size="mini" @click="goDelete(item)">删除</el-button>
                      </td>
                    </tr>
                  </tbody>
                  <tr v-for="(item,index) in pd.hiddenList" :key="'hidden'+index" class="no-tr-show">
                    <td>{{ index + 1 }}. {{ item.HIDDENDESCR }}</td>
                  </tr>
                </table>
              </td>
            </tr>
          </table>
        </div>
        <div class="no-print">
          <div v-if="pd.inspectorList && pd.inspectorList.length > 0" class="level-title">
            <h1>检查人员核实情况</h1>
          </div>
          <div v-if="pd.inspectorList && pd.inspectorList.length > 0" class="mb-20">
            <table class="table-ui">
              <tr>
                <th>序号</th>
                <th>核实人员</th>
                <th>核实时间</th>
                <th>核实意见</th>
                <th>签字</th>
              </tr>
              <tr v-for="(item, index) in pd.inspectorList" :key="'inspector'+index">
                <td>{{ index+1 }}</td>
                <td>{{ item.INSPECTION_USER_NAME }}</td>
                <td>{{ item.INSPECTION_USER_SIGN_TIME }}</td>
                <td>{{ item.INSPECTION_USER_OPINION }}</td>
                <td>
                  <el-image
                    :src="config.fileUrl + item.INSPECTION_USER_SIGN_IMG"
                    :preview-src-list="new Array(config.fileUrl + item.INSPECTION_USER_SIGN_IMG)"
                    style="width: 100px; height: 100px"/>
                </td>
              </tr>
            </table>
          </div>
        </div>
        <div class="no-show">
          <div style="display: flex">
            <p>检查人员（签名）：</p>
            <div v-if="pd.inspectorList && pd.inspectorList.length > 0" class="mb-20">
              <el-image
                v-for="(item, index) in pd.inspectorList"
                :key="'inspector'+index"
                :src="config.fileUrl + item.INSPECTION_USER_SIGN_IMG"
                :preview-src-list="new Array(config.fileUrl + item.INSPECTION_USER_SIGN_IMG)"
                style="width: 100px; height: 100px;margin-left: 20px"/>
            </div>
          </div>
        </div>
        <div class="no-print">
          <div v-if="pd.INSPECTED_SITEUSER_SIGN_TIME" class="level-title">
            <h1>被检查单位负责人确认情况</h1>
          </div>
          <div v-if="pd.INSPECTED_SITEUSER_SIGN_TIME" class="mb-20">
            <table class="table-ui">
              <tr>
                <td class="tbg" style="width: 200px;">被检查单位负责人（签字）：</td>
                <td>
                  <el-image
                    :src="config.fileUrl + pd.INSPECTED_SITEUSER_SIGN_IMG"
                    :preview-src-list="new Array(config.fileUrl + pd.INSPECTED_SITEUSER_SIGN_IMG)"
                    style="width: 100px; height: 100px"/>
                </td>
                <!--<td class="tbg">确认时间：</td>-->
                <!--<td>{{ pd.INSPECTED_SITEUSER_SIGN_TIME }}</td>-->
              </tr>
            </table>
          </div>
        </div>
        <div class="no-show">
          <div style="display: flex;align-items: center">
            <p>被检查单位负责人（签名）：</p>
            <div style="display: flex;align-items: center">
              <div>
                <el-image
                  :src="config.fileUrl + pd.INSPECTED_SITEUSER_SIGN_IMG"
                  :preview-src-list="new Array(config.fileUrl + pd.INSPECTED_SITEUSER_SIGN_IMG)"
                  style="width: 100px; height: 100px"/>
              </div>
              <span>{{ pd.INSPECTED_SITEUSER_SIGN_TIME }}</span>
            </div>
          </div>
        </div>
      </div>

      <el-dialog :visible.sync="dialogMap" :title="'隐患位置'" width="80%">
        <div>
          <iframe id="iframe" ref="iframe" :src="iframeSrc" frameborder="0" allowtransparency="true" width="100%" height="600"/>
        </div>
      </el-dialog>

      <video id="videoPlayer" controls="controls" crossOrigin="anonymous" style="display: none">
        <source id="videoSource" src="" type="video/mp4">
      </video>
      <canvas id="canvasVideo" style="display: none"/>

      <div class="ui-height" />
      <div class="ui-foot">
        <el-button v-print="'#printContent'" type="primary" icon="el-icon-printer" size="mini">打印</el-button>
        <el-button plain type="info" @click="goBack">返 回</el-button>
      </div>
    </div>

    <information ref="information"/>
    <flowChart ref="flowChart"/>
  </div>
</template>

<script>
import { requestFN } from '@/utils/request'
import dateformat from '@/utils/dateformat'
import information from '../../../hiddenUtil/information'
import flowChart from '../../../hiddenUtil/flowChart'
export default {
  components: { information, flowChart },
  data() {
    return {
      listLoading: true,
      config: config,
      iframeSrc: '',
      dialogMap: false,
      pd: {
        INSPECTION_SOURCE: '5', // 检查来源（4-监管端 5-企业端）
        inspectorList: [], // 检查人员
        INSPECTION_ORIGINATOR_NAME: '', // 检查发起人
        INSPECTED_DEPARTMENT_NAME: '', // 被检查单位
        INSPECTED_SITEUSER_NAME: '', // 被检查单位现场负责人
        INSPECTED_EXPLAIN: '', // 申辩内容
        INSPECTED_SITEUSER_SIGN_IMG: '', // 被检查单位现场负责人签字
        INSPECTED_SITEUSER_SIGN_TIME: '', // 被检查单位现场负责人签字时间
        INSPECTION_TYPE_NAME: '', // 检查类型
        INSPECTION_PLACE: '', // 检查场所
        INSPECTION_TIME_START: '', // 检查开始时间
        INSPECTION_TIME_END: '', // 检查结束时间
        INSPECTION_STATUS: '', // 状态(0.暂存 1.检查人待确认、2.被检查人待确认、3.归档 -1.检查人异议打回 -2被检查人申辩)
        CREATTIME: '',
        situationList: [''], // 检查情况
        hiddenList: [], // 隐患信息集合,
        INSPECTION_USER_ID: '' // 检查人ID数组
      },
      isDeleteDisplay: false,
      loginUserId: JSON.parse(sessionStorage.getItem('user')).USER_ID
    }
  },
  created() {
    this.iframeSrc = this.config.weburl + 'static/mapshow.html?t=' + Math.random()
  },
  async mounted() {
    await this.getData()
  },
  methods: {
    formatTime(date, column) {
      if (date) {
        return dateformat(date, 'YYYY年MM月DD日HH时mm分')
      } else {
        return ''
      }
    },
    getData() {
      return new Promise((resolve) => {
        requestFN(
          '/safetyenvironmental/goShow',
          {
            INSPECTION_ID: this.$parent.INSPECTION_ID
          }
        ).then((data) => {
          this.pd = Object.assign({}, data.pd) // copy obj
          this.pd.hiddenList.forEach(item => {
            if (item.hiddenVideos.length > 0) {
              this.$set(item.hiddenVideos[0], 'IMGFILEPATH', this.findvideocover(item.hiddenVideos[0]))
            }
          })
          // 判断登录人是否为检查人员,并判断是否能删除
          if (this.pd.INSPECTION_USER_ID != null && this.pd.INSPECTION_USER_ID != '') {
            this.pd.INSPECTION_USER_ID.split(',').forEach(item => {
              if (item == this.loginUserId) {
                this.isDeleteDisplay = true
              }
            })
          }
          this.listLoading = false
          console.info(this.pd)
          resolve()
        }).catch((e) => {
          this.listLoading = false
        })
      })
    },
    findvideocover(item) {
      const source = document.getElementById('videoSource') // 获取视频对象
      source.src = this.config.fileUrl + item.FILEPATH
      const video = document.getElementById('videoPlayer')
      video.currentTime = 1 // 第一帧
      video.load()
      var canvas = document.getElementById('canvasVideo') // 获取 canvas 对象
      video.oncanplay = () => {
        // 利用canvas对象方法绘图
        canvas.getContext('2d').drawImage(video, 0, 0, video.clientWidth, video.clientHeight)
        // 转换成base64形式
        item.IMGFILEPATH = canvas.toDataURL('image/png') // 截取后的视频封面
      }
    },
    goView(id) {
      this.$refs.information.init(id)
    },
    closePlay() {
      this.$refs.hdVideoPlayer.player.pause()
    },
    showMap(obj) {
      this.dialogMap = true
      this.iframeSrc = this.config.weburl + 'static/mapshow.html?t=' + Math.random()
      this.$nextTick(() => {
        const iframe = document.querySelector('#iframe')
        // 处理兼容行问题
        if (iframe.attachEvent) {
          iframe.attachEvent('onload', function() {
            this.contentWindow.postMessage(
              {
                'name': obj.HIDDENDESCR,
                'longitude': Number(obj.LONGITUDE),
                'latitude': Number(obj.LATITUDE)
              }, '*')
          })
        } else {
          iframe.onload = function() {
            this.contentWindow.postMessage(
              {
                'name': obj.HIDDENDESCR,
                'longitude': Number(obj.LONGITUDE),
                'latitude': Number(obj.LATITUDE)
              }, '*')
          }
        }
      })
    },
    checkFlow(item) {
      this.$refs.flowChart.init(item)
    },
    goDelete(item) {
      this.$confirm('确定要删除此隐患吗？', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        requestFN(
          '/hiddenApi/deleteHiddenForSafetyenvironmental',
          {
            HIDDEN_ID: item.HIDDEN_ID,
            tm: new Date().getTime()
          }
        ).then((res) => {
          if (res.result === 'success') {
            this.$message({
              message: '删除成功',
              type: 'success'
            })
          } else {
            this.$message({
              message: res.codeMsg,
              type: 'error'
            })
          }
          this.getData()
        }).catch((e) => {})
      }).catch(() => {})
    },
    goBack() {
      this.$parent.INSPECTION_ID = ''
      this.$parent.activeName = 'List'
    }
  }
}
</script>

<style scoped>
</style>