fj-dc-ui/.svn/pristine/3b/3bd99f9575becff2a6ccae5638ace94a9a7784be.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="this.objType == '6' ? '水闸名称:' : this.objType == '13' ? '水源地名称:' : this.objType == '14' ? '督查对象名称:' : '水库名称:'">-->
                <!--<p style="font-weight: bold;border-bottom:1px dashed rgb(198, 226, 255);">{{problemDetail.nm}}</p>-->
                <!--&lt;!&ndash; <el-input v-model="problemDetail.nm" :disabled="true"></el-input> &ndash;&gt;-->
            <!--</el-form-item>-->
            <el-form-item label="整改状态:">
                <p style="font-weight: bold;border-bottom:1px dashed rgb(198, 226, 255);">{{zhengGaiState(problemDetail.rectConc)}}</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>-->
                <!--&lt;!&ndash; <el-input v-model="problemDetail.checkPoint"></el-input> &ndash;&gt;-->
            <!--</el-form-item>-->
            <!--<el-form-item label="审核状态:">-->
                <!--<p style="font-weight: bold;border-bottom:1px dashed rgb(198, 226, 255);">{{shenheState(problemDetail.chkState)}}</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="整改时间:">
                 <p style="font-weight: bold;border-bottom:1px dashed rgb(198, 226, 255);">{{timestampToTime(problemDetail.rectTm)}}</p>
            </el-form-item>
            <el-form-item label="备注描述:">
                <p style="font-weight: bold;border-bottom:1px dashed rgb(198, 226, 255);;">{{problemDetail.rectNote}}</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">
                                <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" style="margin-left:15%" :key="index" :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 request from "@util/gw_ajax_request";
import { hostUrl } from "@util/global_variable.js";
export default {
    props: ['problemId','rowId','objType'],
    components: {

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

    },
    data() {
        return {
            testHeight: window.innerHeight * 0.48,
            activeName: "0",
            superviseinspect: {},
            fileList: [],
            groupingList: [],
            fileListloading: false,
            groupListloading: false,
            problemDetail:{
                rectConc:'',
                chkState:'',
                inspPblmDesc:'',
                rectTm:'',
                rectNote:'',
                persName:'',
            },
            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:{
        rowId:function(){
            this.problemDetail = {};
            this.pictureArray = [];
            this.audioArray = [];
            this.videoArray = [];
            this.fileArray = [];
            this.showDetails();
        }
    },
    methods: {
        init() {
            this.activeName = "0";
        },
        showDetails() {
            request.get(`/bis/insp/rect/pblm/province/${this.rowId}`).then(res => {
                this.problemDetail = res.data;
                console.log(this.hostUrl);
                res.data.gwFiles.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) {

            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;

        },
        zhengGaiState(val){
            return val == '0' ? '未反馈' : val == '1' ? '已整改' : val == '2' ? '整改中' : val == '3' ? '不具备整改条件' : ''
        },
        shenheState(val){
            return val == '0' ? '未审核' : val == '1' ? '(市)通过' : val == '2' ? '(市)驳回' : val == '3' ? '(省)销号' : val == '4' ? '(省)待复查'  : val == '5' ? '(省)驳回' : ''
        }
    }
};
</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>