fj-dc-ui/.svn/pristine/c4/c4a4f845102c20dbbec9681c96cfd3c813fef91d.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.inspPblmsName}}</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.checkPoint}}</p>
                <!-- <el-input v-model="problemDetail.checkPoint"></el-input> -->
            </el-form-item>
            <el-form-item label="严重程度:" v-if="isShow">
              <!-- <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>
              <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="问题描述:">-->
<!--                 <p style="font-weight: bold;border-bottom:1px dashed rgb(198, 226, 255);">{{problemDetail.pblmDesc}}</p>-->
<!--                &lt;!&ndash; <el-input v-model="problemDetail.pblmDesc"></el-input> &ndash;&gt;-->
<!--            </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="是否为典型问题:">-->
<!--                 &lt;!&ndash; <p>{{problemDetail.ifCasePblm}}</p> &ndash;&gt;-->
<!--                    <span v-if="problemDetail.ifCasePblm == 1">典型</span>-->
<!--                    <span v-if="problemDetail.ifCasePblm == 0">非典型</span>-->
<!--                &lt;!&ndash; <el-input v-model="problemDetail.ifCasePblm"></el-input> &ndash;&gt;-->
<!--            </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.note}}</p>
                <!-- <el-input v-model="problemDetail.note"></el-input> -->
            </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-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 {
    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','objType','pType'],
    components: {

        elaudio: resolve => {
            require(["../../widgets/elAudio.vue"], resolve);
        },

    },
    data() {
        return {
            isShow:true,
            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",
            // 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();
            if(this.objType==53 || this.objType==54 || this.objType==55 || this.objType==56 || this.objType==57){
                this.isShow = false;
            }
    },
    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 + ")";
                }

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

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