fj-dc-ui/.svn/pristine/92/929700b8787619c492bdffa8d497fc685586392d.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-input v-model="problemDetail.nm" :disabled="true"></el-input> -->
        </el-form-item>
        <el-form-item label="问题类别:">
          <p
            style="font-weight: bold;border-bottom:1px dashed rgb(198, 226, 255);"
          >{{problemDetail.inspPblmName}}</p>
          <!-- <el-input v-model="problemDetail.inspPblmsName"></el-input> -->
        </el-form-item>
        <el-form-item label="检查项目:">
          <p
            style="font-weight: bold;border-bottom:1px dashed rgb(198, 226, 255);"
          >{{problemDetail.inspPblmsName}}</p>
          <!-- <el-input v-model="problemDetail.checkPoint"></el-input> -->
        </el-form-item>
        <el-form-item label="问题描述:">
          <p
            style="font-weight: bold;border-bottom:1px dashed rgb(198, 226, 255);"
          >{{problemDetail.inspPblmDesc}}</p>
          <!-- <el-input v-model="problemDetail.pblmDesc"></el-input> -->
        </el-form-item>
        <!-- <el-form-item label="详细描述:">
        <p style="font-weight: bold;border-bottom:1px dashed rgb(198, 226, 255);">{{problemDetail.inspPblmDesc}}</p>-->
        <!-- <el-input v-model="problemDetail.pblmDesc"></el-input> -->
        <!-- </el-form-item> -->
        <el-form-item label="整改意见:">
          <p
            style="font-weight: bold;border-bottom:1px dashed rgb(198, 226, 255);;"
          >{{problemDetail.note}}</p>
          <!-- <el-input v-model="problemDetail.note"></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="严重程度:">
          <!-- <p>{{problemDetail.inspPblmCate}}</p> -->
          <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-input v-model="problemDetail.inspPblmCate"></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="处理状态:">
                   <span
                    style="padding: 3px 10px;background:#27C19F;border-radius:15px;color:rgba(255,255,255,1)"
                    v-if="problemDetail.pblmStat == 0"
                  >未督查</span>
                                <span
                    style="padding: 3px 10px;background:#E6A23C;border-radius:15px;color:rgba(255,255,255,1)"
                    v-if="problemDetail.pblmStat == 1"
                  >督查中</span>
                                <span
                    style="padding: 3px 10px;background:#F56C6C;border-radius:15px;color:rgba(255,255,255,1)"
                    v-if="problemDetail.state == 2"
                  >严重</span>
        </el-form-item>-->

        <el-form-item label="上报人:">
          <p
            style="font-weight: bold;border-bottom:1px dashed rgb(198, 226, 255);;"
          >{{problemDetail.persName}}</p>
          <!-- <el-input v-model="problemDetail.persName"></el-input> -->
        </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
            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>
      <!-- <p style="margin-top:10px;margin-bottom: 10px"><i class="el-icon-caret-right"></i><span style="width:120px;padding-left: 10px">图像资料</span><span class="hrs"></span></p>

            <p style="margin-top:10px;margin-bottom: 10px"><i class="el-icon-caret-right"></i><span style="width:120px;padding-left: 10px">音频资料</span><span class="hrs"></span></p>

            <p style="margin-top:10px;margin-bottom: 10px"><i class="el-icon-caret-right"></i><span style="width:120px;padding-left: 10px">视频资料</span><span class="hrs"></span></p>
      -->
    </div>

    <!-- <tr>
                        <td class="name">图像 &nbsp;</td>
                        <td colspan="3"></td>
                    </tr>
                    <tr style id="photo">
                        <td colspan="4">
                            <el-carousel v-if="problemDetail.gwComFiles && problemDetail.gwComFiles.length" :interval="4000" type="card" height="300px">
                                <el-carousel-item v-for="(item,index) in problemDetail.gwComFiles" :key="index">
                                    <a :href="item.gwComFiles" target="_blank">
    <!-- <img style="width:100%;height:100%;" :src="`http://10.1.102.136:8101/${item.filePath}`" alt>-->
    <!-- <img style="width:100%;height:100%;" :src="`${hostUrl}/${item.filePath}`" alt> -->
    <!-- <img style="width:100%;height:100%;" :src="item.filePath" alt>
                        </a>
                                </el-carousel-item>
                            </el-carousel>
                            <p v-else style="margin-left: auto;margin-right: auto;color: #acacac;">暂无图片

    </p>-->
  </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";
// import elaudio from '../widgets/elAudio.vue'
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],
        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 + ")";
      });
    },
  }
};
</script>

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