fj-dc-ui/.svn/pristine/0e/0e372af37aab8a2b265cd5c0c7ea7e61d8afb73d.svn-base

<template>
  <div id="eventDetailBody" style="padding: 3px;height:400px;" class="problem_detail_wrapper">
    <div style="width:46%;height:450px;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="height:100%;"
        :model="problemDetail"
      >
        <el-form-item label="督查问题区域:">
          <p>{{problemDetail.nm}}</p>
          <!-- <el-input v-model="problemDetail.nm" :disabled="true"></el-input> -->
        </el-form-item>
        <el-form-item label="督查问题类别:">
          <p>{{problemDetail.inspPblmsName}}</p>
          <!-- <el-input v-model="problemDetail.inspPblmsName"></el-input> -->
        </el-form-item>
        <el-form-item label="是否为典型问题:">
          <!-- <p>{{problemDetail.ifCasePblm}}</p> -->
          <span v-if="problemDetail.ifCasePblm == 1">典型</span>
          <span v-if="problemDetail.ifCasePblm == 0">非典型</span>
          <!-- <el-input v-model="problemDetail.ifCasePblm"></el-input> -->
        </el-form-item>
        <!-- <el-form-item label="严重程度:">

                   <span
                    style="padding: 3px 10px;background:#27C19F;border-radius:15px;color:rgba(255,255,255,1)"
                    v-if="problemDetail.inspPblmCate == 0"
                  >一般</span>
                                <span
                    style="padding: 3px 10px;background:#E6A23C;border-radius:15px;color:rgba(255,255,255,1)"
                    v-if="problemDetail.inspPblmCate == 1"
                  >较重</span>
                                <span
                    style="padding: 3px 10px;background:#F56C6C;border-radius:15px;color:rgba(255,255,255,1)"
                    v-if="problemDetail.inspPblmCate == 2"
                  >严重</span>

        </el-form-item>-->
        <el-form-item label="督查问题描述:">
          <p>{{problemDetail.inspPblmDesc}}</p>
          <!-- <el-input v-model="problemDetail.pblmDesc"></el-input> -->
        </el-form-item>
        <el-form-item label="处理状态:">
          <span v-if="problemDetail.pblmStat == 1">已上报</span>
          <span v-else-if="problemDetail.pblmStat == 0">未上报</span>
        </el-form-item>

        <el-form-item label="上报人:">
          <p>{{problemDetail.persName}}</p>
          <!-- <el-input v-model="problemDetail.persName"></el-input> -->
        </el-form-item>
        <el-form-item label="采集日期:">
          <p>{{timestampToTime(problemDetail)}}</p>
          <!-- <el-input v-model="problemDetail.persName"></el-input> -->
        </el-form-item>
      </el-form>
    </div>
    <div style="width:50%;height:450px;float:left;border:1px solid #d5d5ff;">
      <p style="font-weight:bolder;background-color:#d5d5ff;padding:3px;">多媒体信息</p>
      <el-tabs style="height: 400px;margin:5px;">
        <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-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 { hostUrl } from "@util/global_variable.js";

export default {
  props: ["details", "problemId"],
  components: {
    elaudio: resolve => {
      require(["../../widgets/elAudio.vue"], resolve);
    }
  },
  data() {
    return {
      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: ""
      },
      picturetabName: "",
      audiotabName: "",
      videotabName: "",
      pictureArray: [],
      audioArray: [],
      videoArray: [],
      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.showDetails();
  },
  watch: {
    problemId: function() {
      this.problemDetail = {};
      this.pictureArray = [];
      this.audioArray = [];
      this.videoArray = [];
      this.showDetails();
    }
  },
  methods: {
    init() {
      this.activeName = "0";
    },
    showDetails() {
      showDetailsXq(this.problemId).then(res => {
        this.problemDetail = res.data;
        // pictureArray
        // audioArray
        // videoArray
        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"
          ) {
            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"
                }
              ]
            });
          }
        });
        this.picturetabName = "图片资料(" + this.pictureArray.length + ")";
        this.audiotabName = "音频资料(" + this.audioArray.length + ")";
        this.videotabName = "视频资料(" + this.videoArray.length + ")";
      });
    },
    timestampToTime(row, column) {
      var date = new Date(row.collTime);
      var Y = date.getFullYear() + "-";
      var M =
        (date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : "0" + 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;
    }
  }
};
</script>

<style scoped>
@import '../../assets/style/global.css';
.el-form-item {
  width: 100%;
  margin-bottom: 0;
}
</style>