fj-dc-ui/.svn/pristine/9a/9aa045c0d91439b0964d030efd97f64ef25d12ce.svn-base

<template>
  <div id="eventDetailBody" style="padding: 3px;" :style="{'height':testHeight+'px',}">
    <div style="width:46%;float:left;border:1px solid #d5d5ff;margin-right:5px;" :style="{'height':testHeight+'px',}">
      <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="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.inspPblmName}}</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.inspPblmCate | inspPblmCate}}</p>
        </el-form-item>
        <el-form-item label="是否为典型问题:">
          <span v-if="problemDetail.ifCasePblm == 1">典型</span>
          <span v-if="problemDetail.ifCasePblm == 0">非典型</span>
        </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.wtdstNote}}</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="width:50%;float:left;border:1px solid #d5d5ff;" :style="{'height':testHeight+'px',}">
      <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">
              <a :href="`${hostUrl}/${item.filePath}`" target="_blank">
                <img style="height:100%;" :src="`${hostUrl}/${item.filePath}`" alt>
              </a>
            </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-tab-pane label="问题确认单">
          <pblmConfirmShett :openType="false" :currentObjectId="problemDetail.objId" :key="problemDetail.objId"></pblmConfirmShett>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
  import Viewer from 'viewerjs';
  import 'viewerjs/dist/viewer.css';
  import {
    deleteFileById,
    getsuperviseinspect,
    getFileByBiz,
    getSuperviseGroup,
    showDetailsXq
  } from "../../api/duChaAPI.js";
  // import elaudio from '../widgets/elAudio.vue'
  import {hostUrl} from "@util/global_variable.js";
  export default {
    props: ["details", "problemId"],
    components: {
      elaudio: resolve => {
        require(["../../widgets/elAudio.vue"], resolve);
      },
      pblmConfirmShett: resolve => {
          require(["../duChaDuiXiang/pblmConfirmShett"], resolve);
      }
    },
    data() {
      return {
        picturetabName: '',
        audiotabName: '',
        videotabName: '',
        filetabName: "",
        activeName: "0",
        testHeight: window.innerHeight * 0.6,
        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: [],
        playerOptions: {
          height: "120",
          autoplay: true,
          muted: true,
          language: "en",
          playbackRates: [0.7, 1.0, 1.5, 2.0],
          sources: [
            {
              type: "video/mp4",
              // mp4
              src: "http://vjs.zencdn.net/v/oceans.mp4"
              // webm
              // src: "https://cdn.theguardian.tv/webM/2015/07/20/150716YesMen_synd_768k_vp8.webm"
            },
            {
              type: "video/mp4",
              // mp4
              src: "http://vjs.zencdn.net/v/oceans.mp4"
              // webm
              // src: "https://cdn.theguardian.tv/webM/2015/07/20/150716YesMen_synd_768k_vp8.webm"
            },
            {
              type: "video/mp4",
              // mp4
              src: "http://vjs.zencdn.net/v/oceans.mp4"
              // webm
              // src: "https://cdn.theguardian.tv/webM/2015/07/20/150716YesMen_synd_768k_vp8.webm"
            },
            {
              type: "video/mp4",
              // mp4
              src: "http://vjs.zencdn.net/v/oceans.mp4"
              // webm
              // src: "https://cdn.theguardian.tv/webM/2015/07/20/150716YesMen_synd_768k_vp8.webm"
            }
          ]
        }
      };
    },
    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;
          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 == "JPG" ||
              item.fileExt == "png" ||
              item.fileExt == "PNG" ||
              item.fileExt == "JPEG" ||
              item.fileExt == "jpeg"
            ) {
              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 + ")";
        });
      },
      timestampToTime(detail) {
        var date = new Date(detail);
        var Y = date.getFullYear() + "-";
        var M =
          (date.getMonth() + 1 < 10
            ? "0" + (date.getMonth() + 1)
            : date.getMonth() + 1) + "-";
        var D =
          (date.getDate() < 10 ? "0" + date.getDate() : date.getDate()) + " ";
        var h =
          (date.getHours() < 10 ? "0" + date.getHours() : date.getHours()) + ":";
        var m =
          date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
        return Y + M + D + h + m;
      }
    },
    filters: {
      inspPblmCate(val) {
        if (!val || val == '') {
          return ''
        }
        if (val == '0') {
          return '一般'
        } else if (val == '1') {
          return '较重'
        } else if (val == '2') {
          return '严重'
        } else {
          return val
        }
      },
    }
  };
</script>

<style scoped>
  .name {
    background-color: #ebf8ff;
  }

  .details>>>.el-tabs__content {
    height: 360px;
    overflow-y: auto;
  }

  .flexbody>div {
    display: flex;
    align-items: flex-start;
    line-height: 30px;
  }

  .flexbody div span:first-child {
    width: 100px;
    flex-shrink: 0;
  }

  .flexbody div span:first-child {
    color: blue;
  }

  .fileList span {
    margin-right: 10px;
    cursor: pointer;
  }

  .fileList span:hover {
    color: blueviolet;
  }

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