qa-regulatory-gwj-vue/src/views/keyprojects/punish/components/hiddenInfo.vue

<template>
  <div>
    <div class="app-container">
      <el-page-header content="查看详情" @back="goBack"/>
      <table class="table-ui mt-20">
        <tr>
          <td class="tbg">隐患照片</td>
          <td v-viewer>
            <img v-for="(item,index) in pd.hiddenImgs" :key="index" :src="config.fileUrl + item.FILEPATH" alt="" style="width: 100px;height: 100px;margin-left: 10px;">
          </td>
        </tr>
        <tr v-if="pd.hiddenVideos && pd.hiddenVideos.length !== 0 && pd.hiddenVideos[0].FILEPATH">
          <td class="tbg">隐患视频</td>
          <td>
            <el-button icon="el-icon-video-camera" circle @click="goViewVideo(config.fileUrl + pd.hiddenVideos[0].FILEPATH)"/>
          </td>
        </tr>
        <tr>
          <td class="tbg">隐患描述</td>
          <td>{{ pd.HIDDENDESCR }}</td>
        </tr>
        <tr>
          <td class="tbg">隐患部位</td>
          <td>{{ pd.HIDDENPART }}</td>
        </tr>
        <tr>
          <td class="tbg">隐患级别</td>
          <td>{{ pd.HIDDENLEVEL_NAME }}</td>
        </tr>
        <tr>
          <td class="tbg">隐患类型</td>
          <td>{{ pd.HIDDENTYPE_NAME }}</td>
        </tr>
        <tr>
          <td class="tbg">隐患处置</td>
          <td>限期整改</td>
        </tr>
        <tr>
          <td class="tbg">整改期限</td>
          <td>{{ pd.RECTIFICATIONDEADLINE }}</td>
        </tr>
        <tr>
          <td class="tbg">整改部门</td>
          <td>{{ pd.RECTIFICATIONDEPT_NAME }}</td>
        </tr>
        <tr>
          <td class="tbg">整改人</td>
          <td>{{ pd.RECTIFICATIONOR_NAME }}</td>
        </tr>
        <tr>
          <td class="tbg">整改时间</td>
          <td>{{ pd.RECTIFICATIONTIME }}</td>
        </tr>
        <tr>
          <td class="tbg">整改照片</td>
          <td v-viewer>
            <img v-for="(item,index) in pd.zgImgs" :key="index" :src="config.fileUrl + item.FILEPATH" alt="" style="width: 100px;height: 100px;margin-left: 10px;">
          </td>
        </tr>
        <tr v-if="pd.STATE === '4'">
          <td class="tbg">验收时间</td>
          <td>{{ pd.CHECKTIME }}</td>
        </tr>
        <tr v-if="pd.STATE === '4'">
          <td class="tbg">验收图片</td>
          <td v-viewer>
            <img v-for="(item,index) in pd.ysImgs" :key="index" :src="config.fileUrl + item.FILEPATH" alt="" style="width: 100px;height: 100px;margin-left: 10px;">
          </td>
        </tr>
        <tr v-if="pd.STATE === '4'">
          <td class="tbg">是否进行罚款</td>
          <td colspan="3">{{ pd.ISPUNISH === '1' ? '是' : '否' }}</td>
        </tr>
      </table>
      <div v-if="projectEntity && projectEntity.KEYPROJECTPUNISH_ID">
        <div style="font-weight: bold;margin-top: 20px">
          罚款详情
        </div>
        <div>
          <table class="table-ui mt-20">
            <tr>
              <td class="tbg">处罚原因</td>
              <td>{{ projectEntity.REASON }}</td>
            </tr>
            <tr>
              <td class="tbg">处罚金额</td>
              <td>{{ projectEntity.AMOUT }}元</td>
            </tr>
            <tr>
              <td class="tbg">被处罚单位</td>
              <td>{{ projectEntity.UNITS_NAME }}</td>
            </tr>
            <tr>
              <td class="tbg">被处罚人</td>
              <td>{{ projectEntity.PERSON_NAME }}</td>
            </tr>
            <tr>
              <td class="tbg">下发人</td>
              <td>{{ projectEntity.CREATOR_NAME }}</td>
            </tr>
            <tr>
              <td class="tbg">下发处罚时间</td>
              <td>{{ projectEntity.DATE }}</td>
            </tr>
            <tr v-if="projectEntity.HANDLED === '1'">
              <td class="tbg">罚款缴纳单</td>
              <td v-viewer>
                <img :src="config.fileUrl + projectEntity.HANDLE_IMG" alt="" style="width: 100px;height: 100px;">
              </td>
            </tr>
            <tr>
              <td class="tbg">处罚处理人</td>
              <td>{{ projectEntity.PERSON_NAME }}</td>
            </tr>
            <tr v-if="projectEntity.HANDLED === '1'">
              <td class="tbg">处罚处理时间</td>
              <td colspan="3">{{ projectEntity.HANLDE_TIME }}</td>
            </tr>
            <div class="ui-height" />
            <div class="ui-foot">
              <el-button icon="el-icon-arrow-left" @click="goBack">返 回</el-button>
            </div>
          </table>
        </div>
      </div>
    </div>
    <el-dialog :visible.sync="dialogViewVideo" title="视频" width="800px" @close="closePlay">
      <div>
        <video-player
          ref="hdVideoPlayer"
          :playsinline="true"
          :options="playerOptions"
          class="video-player vjs-custom-skin"/>
      </div>
    </el-dialog>
    <div class="ui-height" />
    <div class="ui-foot">
      <el-button icon="el-icon-arrow-left" @click="goBack">返 回</el-button>
    </div>
  </div>
</template>

<script>
import { requestFN } from '@/utils/request'
import { videoPlayer } from 'vue-video-player'
import 'video.js/dist/video-js.css'
export default {
  components: { videoPlayer },
  data() {
    return {
      config,
      pd: {},
      projectEntity: {},
      dialogViewVideo: false,
      playerOptions: {
        playbackRates: [0.5, 1.0, 1.5, 2.0], // 可选的播放速度
        autoplay: false, // 如果为true,浏览器准备好时开始回放。
        muted: false, // 默认情况下将会消除任何音频。
        loop: false, // 是否视频一结束就重新开始。
        preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
        language: 'zh-CN',
        aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
        fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
        sources: [{
          type: 'video/mp4', // 类型
          src: '' // url地址
        }],
        poster: '', // 封面地址
        notSupportedMessage: '此视频暂无法播放，请稍后再试', // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
        controlBar: {
          timeDivider: true, // 当前时间和持续时间的分隔符
          durationDisplay: true, // 显示持续时间
          remainingTimeDisplay: true, // 是否显示剩余时间功能
          fullscreenToggle: true // 是否显示全屏按钮
        }
      }
    }
  },
  created() {
    this.getData()
  },
  methods: {
    getData() {
      requestFN(
        '/keyprojectpunish/hiddenInfo',
        {
          HIDDEN_ID: this.$parent.HIDDEN_ID,
          KEYPROJECTPUNISH_ID: this.$parent.KEYPROJECTPUNISH_ID
        }
      ).then((data) => {
        this.pd = data.pd
        this.projectEntity = data.projectEntity
      })
    },
    goViewVideo(FILEPATH) {
      this.playerOptions.sources[0].src = FILEPATH
      this.dialogViewVideo = true
    },
    closePlay() {
      this.$refs.hdVideoPlayer.player.pause()
    },
    goBack() {
      this.$parent.activeName = 'List2'
      this.$parent.HIDDEN_ID = ''
    }
  }
}
</script>

<style scoped></style>