fj-dc-ui/.svn/pristine/4d/4d8b8441de24b2bd0fa1c2d172066aa0e1a0e41f.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="140px" style="height:100%;" :model="problemDetail">
                <el-form-item label="问题标题:">
                    <p>{{problemDetail.cpTitle}}</p>
                </el-form-item>
                <el-form-item label="问题描述:">
                    <p>{{problemDetail.cpDesc}}</p>
                </el-form-item>
                <el-form-item label="填报人姓名:">
                    <p>{{problemDetail.cpResnm}}</p>
                </el-form-item>
                <el-form-item label="记录时间:">
                    <p>{{problemDetail.cpIttm}}</p>
                </el-form-item>
                <el-form-item label="发生问题位置经度:">
                    <p>{{problemDetail.cpLgtd}}</p>
                </el-form-item>
                <el-form-item label="发生问题位置纬度:">
                    <p>{{problemDetail.cpLttd}}</p>
                </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" >
                                        <img style="height:100%;margin-left:15%" :src="`${hostUrl}/${item.filePath}`" alt>
                                </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>
                    <el-carousel-item v-if="audioArray.length==0">
                                   <p>暂无音频信息</p>
                                </el-carousel-item>
                </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"
                                    style="margin-left:15%"
                                    :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>
            <!-- <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 {hostUrl} from "@util/global_variable.js";
import { gettongYongDetail} from "../../api/duChaAPI.js";
// import elaudio from '../widgets/elAudio.vue'
export default {
    props: ['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:'',
            },
            pictureArray:[],
            audioArray:[],
            videoArray:[],
            fileArray:[],
            audiotabName: "",
            videotabName: "",
            filetabName:"",
            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.fileArray = [];
        this.showDetails();
    },
    watch:{
        problemId:function(){
            this.problemDetail = {};
            this.pictureArray = [];
            this.audioArray = [];
            this.videoArray = [];
            this.fileArray = [];
            this.showDetails();
        }
    },
    methods: {
        init() {
            this.activeName = "0";
        },
        showDetails() {
            gettongYongDetail(this.problemId).then(res => {
                this.problemDetail = res.data;
                // pictureArray
                // audioArray
                // videoArray
                res.data.fileList.forEach(
                    (item) =>{
                        if(item.fileExt == 'mp3'){
                            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'){
                            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 + ")";
            });
        },
    }
};
</script>

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