fj-dc-ui/.svn/pristine/fd/fd2ff30593705478b002c531c30885dbaefed8d8.svn-base

<template>

    <div id="eventDetailBody" style="padding: 3px;" :style="{'height':testHeight+'px',}">
        <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.pnm}}</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.inspPblmDesc}}</p>
                </el-form-item>
                <el-form-item label="扣分值:" style="text-align: left;">
                  {{problemDetail.score}}
                </el-form-item>
<!--                <el-form-item label="是否典型问题:">-->
<!--                  <p style="font-weight: bold;border-bottom:1px dashed rgb(198, 226, 255);;">-->
<!--                    {{problemDetail.ifCasePblm == '1' ? '典型' : '非典型'}}</p>-->
<!--                </el-form-item>-->
<!--                <el-form-item label="问题等级:">-->
<!--                  <p style="font-weight: bold;border-bottom:1px dashed rgb(198, 226, 255);">{{problemDetail.inspPblmCate-->
<!--                    == 1 ? "较重" : problemDetail.inspPblmCate == 2 ? "严重" : problemDetail.inspPblmCate == 3 ? "特别严重":-->
<!--                    problemDetail.inspPblmCate == 0 ? "一般" : "" }}</p>-->
<!--                </el-form-item>-->
<!--                <el-form-item label="附件序号:">-->
<!--                  <p style="font-weight: bold;border-bottom:1px dashed rgb(198, 226, 255);;">-->
<!--                    {{problemDetail.attachBz}}</p>-->
<!--                </el-form-item>-->
<!--                <el-form-item label="问题序号:">-->
<!--                  <p style="font-weight: bold;border-bottom:1px dashed rgb(198, 226, 255);;">-->
<!--                    {{problemDetail.snNumBz}}</p>-->
<!--                </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">
                        <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 {
        deleteFileById,
        getsuperviseinspect,
        getFileByBiz,
        getSuperviseGroup,
        showDetailsXq,
    } from "@api/duChaAPI.js";
    // import elaudio from '../widgets/elAudio.vue'
    import request from '@util/gw_ajax_request'
    import { hostUrl } from "@util/global_variable.js";
    export default {
        props: ["details",'problemId','objType'],
        components: {

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

        },
        data() {
            return {
                testHeight: window.innerHeight * 0.5,
                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();
        },
        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 => {
                request.get(`/dc/insp/pblm/${this.problemId}`).then(res =>{
                    this.problemDetail = res.data;
                    console.log(this.hostUrl);
                    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);
                            }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 + ")";
                    this.filetabName = "其它资料(" + this.fileArray.length + ")";
                });
            },
            timestampToTime(detail) {
                if(detail){
                    var date = new Date(detail);
                    var Y = date.getFullYear() + "-";
                    var M =
                        (date.getMonth() + 1 < 10 ?
                            "0" + (date.getMonth() + 1) :
                            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;
                }else{
                    return "";
                }


            }
        },
        filters:{
            zgqk(val){
                switch(val){
                    case '0':
                        return '未整改';
                    case '1':
                        return '整改中';
                    case '2':
                        return '已整改';
                }
            },
            inspPblmCate(val){
                if(!val || val == ''){
                    return ''
                }
                if(val == '0'){
                    return '一般'
                }else if(val == '1'){
                    return '较重'
                }else if(val == '2'){
                    return '严重'
                }else{
                    return val
                }
            },
        }
    };
</script>

<style scoped>
    .name {
        background-color: #ebf8ff;
    }

    .details>>>.el-tabs__content {
        height: 360px;
        overflow-y: auto;
    }

    .flexbody>div {
        display: flex;
        align-items: flex-start;
        line-height: 30px;
    }

    .flexbody div span:first-child {
        width: 100px;
        flex-shrink: 0;
    }

    .flexbody div span:first-child {
        color: blue;
    }

    .fileList span {
        margin-right: 10px;
        cursor: pointer;
    }

    .fileList span:hover {
        color: blueviolet;
    }

    .el-form-item {
        width: 100%;
        margin-bottom: 0;
    }
</style>