fj-dc-ui/.svn/pristine/bc/bcafecdaf94c0c5b26555809eb6a989021908e60.svn-base

<template>
    <div id="eventDetailBody" style="padding: 3px;" :style="{'height':testHeight+'px',}">
        <div :style="{'height':testHeight+'px',}" style="width:100%;float:left;border:1px solid #d5d5ff;">
            <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);min-height: 24px;">{{problemDetail.pblmNm}}</p>
            </el-form-item>
            <el-form-item label="批复意见:">
              <p style="font-weight: bold;border-bottom:1px dashed rgb(198, 226, 255);min-height: 24px;">

                <span v-if="problemDetail.replyState == 0">不通过</span>
                <span v-if="problemDetail.replyState == 1">通过</span>
              </p>
            </el-form-item>
            <el-form-item label="批复说明:">
              <p style="font-weight: bold;border-bottom:1px dashed rgb(198, 226, 255);min-height: 24px;">{{problemDetail.inspPblmDesc}}</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"-->
                            <!--&gt;-->
                            <!--</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 { hostUrl } from "@util/global_variable.js";
import request from '@util/gw_ajax_request.js'
export default {
    props: ['problemId'],
    components: {
        elaudio: resolve => {
            require(["@widget/elAudio.vue"], resolve);
        },
    },
    data() {
        return {
            testHeight: window.innerHeight * 0.3,
            activeName: "0",
            superviseinspect: {},
            fileList: [],
            groupingList: [],
            fileListloading: false,
            groupListloading: false,
            problemDetail:{
                inspPblmDesc:'',
            },
            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],
                sources: [
                    {
                        type: "video/mp4",
                        src: "http://vjs.zencdn.net/v/oceans.mp4",
                    },
                    {
                        type: "video/mp4",
                        src: "http://vjs.zencdn.net/v/oceans.mp4",
                    },
                    {
                        type: "video/mp4",
                        src: "http://vjs.zencdn.net/v/oceans.mp4",
                    },
                    {
                        type: "video/mp4",
                        src: "http://vjs.zencdn.net/v/oceans.mp4",
                    }
                ]
            },
        };
    },
    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() {
            request.get(`/tac/pblm/rect/list/plmb/${this.problemId}`).then(res => {
                this.problemDetail = res.data;
                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);
                      }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 + ")";
                }

            });
        },
    }
};
</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>