fj-dc-ui/.svn/pristine/8e/8e02ff61de5d6aeca7d51fee3f03e8bc9521fabe.svn-base

<template>
    <div id="eventDetailBody" style="padding: 3px;overflow: auto" :style="{'height':testHeight+'px',}" class="problem_detail_wrapper">
        <p style="font-weight:bolder;background-color:#d5d5ff;padding:3px;">整改描述</p>
        <div style="width: 100%;min-height: 40px;"><span>{{currentRow.crtInfo}}</span></div>
        <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-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 :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-tabs style="overflow-y: auto;margin:5px;" :style="{'max-height':testHeight-40 +'px',}">
            <el-tab-pane :label="picturetabName1" style="height: 350px;">
              <el-carousel :interval="4000" height="350px">
                <el-carousel-item v-for="(item,index) in pictureArray1" :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="pictureArray1.length==0">
                  <p>暂无图片信息</p>
                </el-carousel-item>
              </el-carousel>
            </el-tab-pane>

            <el-tab-pane :label="audiotabName1">
              <elaudio v-for="(audio,index) in audioArray1" :key="index" style="margin-left:15%"
                       :theUrl="`${hostUrl}/${audio.filePath}`"></elaudio>
              <p v-if="audioArray1.length==0">暂无音频信息</p>
            </el-tab-pane>
            <el-tab-pane :label="videotabName1">
              <el-carousel :interval="4000" height="350px">
                <el-carousel-item v-for="(item,index) in videoArray1" :key="index">
                  <video-player class="vjs-custom-skin" ref="videoPlayer" :options="item" :playsinline="true">
                  </video-player>
                </el-carousel-item>
                <el-carousel-item v-if="videoArray1.length==0">
                  <p>暂无视频信息</p>
                </el-carousel-item>
              </el-carousel>
            </el-tab-pane>
            <el-tab-pane :label="filetabName1">
              <el-table border :data="fileArray1" 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 {showDetailsXq1} from "@api/InspectionReport.js";
    import request from '@util/gw_ajax_request.js'
    import { hostUrl } from "@util/global_variable.js";
    export default {
        props: ["details", 'problemId', 'objType', 'pType','currentRow','type'],
        components: {
            elaudio: resolve => {
                require(["../../widgets/elAudio.vue"], resolve);
            }
        },
        data() {
            return {
                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: [],
                pictureArray1: [],
                audioArray1: [],
                videoArray1: [],
                fileArray1: [],
                audiotabName: "",
                videotabName: "",
                picturetabName: "",
                filetabName: "",
                audiotabName1: "",
                videotabName1: "",
                picturetabName1: "",
                filetabName1: "",
                playerOptions: {
                    height: '120',
                    autoplay: true,
                    muted: true,
                    language: 'en',
                    playbackRates: [0.7, 1.0, 1.5, 2.0],
                    labelName: '',
                    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 = [];

            if(this.currentRow.pblmId){
                this.showDetails();
            }
            this.getPicArray();
        },
        methods: {
            getPicArray(){
                this.pictureArray1 = [];
                this.audioArray1 = [];
                this.videoArray1 = [];
                this.fileArray1 = [];
                let params = {
                    bizId: this.currentRow.id,
                    bizType: this.type
                }
                request.post(`/file/findPageInfo`,params).then(res =>{
                    if(res.success) {
                        res.data.list.forEach(
                            (item) => {
                                if (item.fileExt == 'mp3' || item.fileExt == 'MP3' || item.fileExt == 'm4a') {
                                    this.audioArray1.push(item);
                                } else if (item.fileExt == 'jpg' || item.fileExt == 'JPEG' || item.fileExt == 'jpeg' || item.fileExt == 'JPG' || item.fileExt == 'png' || item.fileExt == 'PNG') {
                                    this.pictureArray1.push(item);
                                } else if (item.fileExt == 'mp4' || item.fileExt == 'MP4') {
                                    this.videoArray1.push(
                                        {
                                            height: '350',
                                            autoplay: false,
                                            muted: true,
                                            language: 'en',
                                            playbackRates: [0.7, 1.0, 1.5, 2.0],
                                            sources: [{
                                                type: "video/mp4",
                                                src: `${this.hostUrl}/${item.filePath}`
                                            }],

                                        },
                                    );
                                } else {
                                    this.fileArray1.push(item);
                                }
                            }
                        );
                        this.picturetabName1 = "图片资料(" + this.pictureArray1.length + ")";
                        this.audiotabName1 = "音频资料(" + this.audioArray1.length + ")";
                        this.videotabName1 = "视频资料(" + this.videoArray1.length + ")";
                        this.filetabName1 = "其它资料(" + this.fileArray1.length + ")";
                    }
                })
            },
            init() {
                this.activeName = "0";
            },
            showDetails() {
                showDetailsXq1(this.currentRow.pblmId).then(res => {
                    this.problemDetail = res.data;
                    if (res.data.gwComFileList) {
                        res.data.gwComFileList.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",
                                                src: `${this.hostUrl}/${item.filePath}`
                                            }],

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