fj-dc-ui/.svn/pristine/cf/cfd2fee2ce3a827931ad51952ae90f1de268bb3a.svn-base

<template>

  <div id="eventDetailBody" style="padding: 3px;position: relative;" :style="{'height':testHeight+'px',}" class="problem_detail_wrapper">
    <div :style="{'height':testHeight+'px',}" style="width:46%;float:left;border:1px solid #d5d5ff;margin-right:5px;">
      <p style="font-weight:bolder;background-color:#d5d5ff;padding:3px;">基本信息</p>
      <el-form label-position="right" label-width="120px" :style="{'max-height':testHeight-30+'px',}"
               style="overflow-y: auto;height:100%;margin:5px;" :model="problemDetail">
        <el-form-item label="对象名称">
          <p style="font-weight: bold;border-bottom:1px dashed rgb(198, 226, 255);">{{ problemDetail.nm }}</p>
        </el-form-item>
        <el-form-item label="问题类别:">
          <p style="font-weight: bold;border-bottom:1px dashed rgb(198, 226, 255);">
            {{ problemDetail.inspPblmsName }}</p>
        </el-form-item>
        <el-form-item label="检查项目:">
          <p style="font-weight: bold;border-bottom:1px dashed rgb(198, 226, 255);">{{ problemDetail.checkPoint }}</p>
        </el-form-item>
        <el-form-item label="问题描述:">
          <p style="font-weight: bold;border-bottom:1px dashed rgb(198, 226, 255);">{{ problemDetail.pblmDesc }}</p>
        </el-form-item>
        <el-form-item label="详细描述:">
          <p style="font-weight: bold;border-bottom:1px dashed rgb(198, 226, 255);">{{ problemDetail.inspPblmDesc }}</p>
        </el-form-item>
        <el-form-item label="备注:">
          <p style="font-weight: bold;border-bottom:1px dashed rgb(198, 226, 255);;">{{ problemDetail.note }}</p>
        </el-form-item>
        <el-form-item label="上报人:">
          <p style="font-weight: bold;border-bottom:1px dashed rgb(198, 226, 255);;">{{ problemDetail.persName }}</p>
        </el-form-item>
      </el-form>
    </div>
    <div :style="{'height':testHeight+'px',}" style="width:50%;float:left;border:1px solid #d5d5ff;">
      <p style="font-weight:bolder;background-color:#d5d5ff;padding:3px;">多媒体信息</p>
      <el-tabs style="overflow-y: auto;margin:5px;" :style="{'max-height':testHeight-40 +'px',}">

        <el-tab-pane :label="picturetabName" style="height: 350px;">

          <el-carousel :interval="4000" height="350px" id="detailImg">
            <el-carousel-item v-for="(item,index) in pictureArray" :key="index">
                <img style="height:100%;" :src="item.filePath" alt v-if="item.filePath.indexOf('http')>-1">
                <img style="height:100%;" :src="`${hostUrl}/${item.filePath}`" alt v-if="item.filePath.indexOf('http')<0">
            </el-carousel-item>
            <el-carousel-item v-if="pictureArray.length==0">
              <p>暂无图片信息</p>
            </el-carousel-item>
          </el-carousel>
        </el-tab-pane>

        <el-tab-pane :label="audiotabName">
          <elaudio v-for="(audio,index) in audioArray" :key="index" style="margin-left:15%"
                   :theUrl="`${hostUrl}/${audio.filePath}`"></elaudio>

          <p v-if="audioArray.length==0">暂无音频信息</p>

        </el-tab-pane>
        <el-tab-pane :label="videotabName">
          <el-carousel :interval="4000" height="350px">
            <el-carousel-item v-for="(item,index) in videoArray" :key="index">
              <video-player class="vjs-custom-skin" ref="videoPlayer" :options="item"
                            :playsinline="true" ></video-player>
            </el-carousel-item>
            <el-carousel-item v-if="videoArray.length==0">
              <p>暂无视频信息</p>
            </el-carousel-item>
          </el-carousel>
        </el-tab-pane>
        <el-tab-pane :label="filetabName">
          <el-table border :data="fileArray" style="width: 100%;margin: 0 auto;">
            <el-table-column header-align="center" align="center" label="文档">
              <template slot-scope="scope">
                <p>
                  <a :href="`${hostUrl}/${scope.row.filePath}`" target="_blank" rel="noopener noreferrer">
                    {{ scope.row.fileName }}
                  </a>
                </p>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>

</template>

<script>
import Viewer from 'viewerjs';
import 'viewerjs/dist/viewer.css';
import {showDetailsXq} from "../../api/duChaAPI.js";
import {hostUrl} from "@util/global_variable.js";
export default {
  props: ["details", 'problemId', 'objType'],
  components: {
    elaudio: resolve => {
      require(["../../widgets/elAudio.vue"], resolve);
    },
    pblmConfirmShett: resolve => {
        require(["../duChaDuiXiang/pblmConfirmShett"], resolve);
    }
  },
  data() {
    return {
      testHeight: window.innerHeight * 0.6,
      activeName: "0",
      superviseinspect: {},
      fileList: [],
      groupingList: [],
      fileListloading: false,
      groupListloading: false,
      problemDetail: {
        checkPoint: '',
        collTime: '',
        commonFileIds: '',
        cwsCode: '',
        cwsName: '',
        dataStat: '',
        endTime: '',
        fileNo: '',
        fileNoNumber: '',
        gwComFiles: '',
        ifCasePblm: '',
        inspAddDesc: '',
        inspGroupId: '',
        inspPblmCate: '',
        inspPblmCode: '',
        inspPblmDesc: '',
        inspPblmName: '',
        inspPblmOrgName: '',
        inspPblmType: '',
        inspPblmsName: '',
        nm: '',
        note: '',
        objId: '',
        objNm: '',
        objType: '',
        pblmDesc: '',
        pblmId: '',
        pblmLat: '',
        pblmLong: '',
        pblmPersName: '',
        pblmStat: '',
        pblmsId: '',
        pblmsTypeId: '',
        persName: '',
        pguid: '',
        recPers: '',
        regid: '',
        reviConc: '',
        reviOpin: '',
        reviOrgGuid: '',
        srcDesc: '',
        startTime: '',
        state: '',
        villType: '',
        villageCode: '',
      },
      pictureArray: [],
      audioArray: [],
      videoArray: [],
      fileArray: [],
      audiotabName: "",
      videotabName: "",
      picturetabName: "",
      filetabName: "",
      playerOptions: {
        height: '120',
        autoplay: true,
        muted: true,
        language: 'en',
        playbackRates: [0.7, 1.0, 1.5, 2.0],
        labelName: '',
        sources: [{
          type: "video/mp4",
          src: "http://vjs.zencdn.net/v/oceans.mp4"
        },
          {
            type: "video/mp4",
            src: "http://vjs.zencdn.net/v/oceans.mp4"
          },
          {
            type: "video/mp4",
            src: "http://vjs.zencdn.net/v/oceans.mp4"
          },
          {
            type: "video/mp4",
            src: "http://vjs.zencdn.net/v/oceans.mp4"
          }],

      },
    };
  },
  computed: {
    hostUrl() {
      return hostUrl
    }
  },
  mounted: function () {
    this.problemDetail = {};
    this.pictureArray = [];
    this.audioArray = [];
    this.videoArray = [];
    this.fileArray = [];
    this.showDetails();
  },
  watch: {
    problemId: function () {
      this.problemDetail = {};
      this.pictureArray = [];
      this.audioArray = [];
      this.videoArray = [];
      this.fileArray = [];
      this.showDetails();
    }
  },
  methods: {
    init() {
      this.activeName = "0";
    },
    showDetails() {
      showDetailsXq(this.problemId).then(res => {
        this.problemDetail = res.data;
        console.log(this.hostUrl);
        if (res.data.gwComFiles) {
          res.data.gwComFiles.forEach(
            (item) => {
              if (item.fileExt == 'mp3' || item.fileExt == 'MP3' || item.fileExt == 'm4a') {
                this.audioArray.push(item);
              } else if (item.fileExt == 'jpg' || item.fileExt == 'JPEG' || item.fileExt == 'jpeg' || item.fileExt == 'JPG' || item.fileExt == 'png' || item.fileExt == 'PNG') {
                this.pictureArray.push(item);
                this.$nextTick(function(){
                    var  ViewerDom = document.getElementById('detailImg');
                    var  viewer = new Viewer(ViewerDom, {
                        // hide:function(){ //在图片消失的时候销毁viewer
                        //     viewer.destroy();
                        // }
                    })
                });
              } else if (item.fileExt == 'mp4' || item.fileExt == 'MP4') {
                this.videoArray.push(
                  {
                    height: '350',
                    autoplay: false,
                    muted: true,
                    language: 'en',
                    playbackRates: [0.7, 1.0, 1.5, 2.0],
                    sources: [{
                      type: "video/mp4",
                      // mp4
                      src: `${this.hostUrl}/${item.filePath}`,
                      // webm
                      // src: "https://cdn.theguardian.tv/webM/2015/07/20/150716YesMen_synd_768k_vp8.webm"
                    }],

                  },
                );
              } else {
                this.fileArray.push(item);
              }
            }
          );
          this.picturetabName = "图片资料(" + this.pictureArray.length + ")";
          this.audiotabName = "音频资料(" + this.audioArray.length + ")";
          this.videotabName = "视频资料(" + this.videoArray.length + ")";
          this.filetabName = "其他资料(" + this.fileArray.length + ")";
        }

      });
    },
  }
};
</script>

<style scoped>
@import '../../assets/style/global.css';

.el-form-item {
  width: 100%;
  margin-bottom: 0;
}
</style>