fj-dc-ui/.svn/pristine/b1/b1bd01eb3e609d84b68335eb54e2823fa1d76846.svn-base

<template>
  <div id="eventDetailBody" style="padding: 3px;" :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.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.inspPblmOrgName}}</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="是否为典型问题:">
          <span v-if="problemDetail.ifCasePblm == 1">典型</span>
          <span v-if="problemDetail.ifCasePblm == 0">非典型</span>
        </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>
          <span
            style="padding: 3px 10px;background:#F56C6C;border-radius:15px;color:rgba(255,255,255,1)"
            v-if="problemDetail.inspPblmCate == 3"
          >特别严重</span>
        </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
            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">
<!--              <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
            :key="audio"
            v-for="audio in audioArray"
            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 {
      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: [],
      audiotabName: "",
      videotabName: "",
      picturetabName: "",
      playerOptions: {
        height: "120",
        autoplay: true,
        muted: true,
        language: "en",
        playbackRates: [0.7, 1.0, 1.5, 2.0],
        labelName: "",
        sources: [
          {
            type: "video/mp4",
            // mp4
            src: "http://vjs.zencdn.net/v/oceans.mp4"
          },
          {
            type: "video/mp4",
            // mp4
            src: "http://vjs.zencdn.net/v/oceans.mp4"
          },
          {
            type: "video/mp4",
            // mp4
            src: "http://vjs.zencdn.net/v/oceans.mp4"
          },
          {
            type: "video/mp4",
            // mp4
            src: "http://vjs.zencdn.net/v/oceans.mp4"
          }
        ]
      }
    };
  },
  computed: {
    hostUrl() {
      return hostUrl;
    }
  },
  mounted: function() {
    this.problemDetail = {};
    this.pictureArray = [];
    this.audioArray = [];
    this.videoArray = [];
    this.showDetails();
  },
  watch: {
    problemId: function(val) {
      if(val){
        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;
        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}`
                }
              ]
            });
          }
        });
        this.picturetabName = "图片资料(" + this.pictureArray.length + ")";
        this.audiotabName = "音频资料(" + this.audioArray.length + ")";
        this.videotabName = "视频资料(" + this.videoArray.length + ")";
      });
    },
  }
};
</script>

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