jhbigscreen/src/pages/photography.vue

<template>
    <div class="prj-photography-main">
        <div class="screen-content">
            <el-row>
                <el-col :span="6">
                    <module-one-3-1 label="项目全景列表">
                        <div class="left-list scroll">
                            <template v-if="showPrjs && showPrjs.length>0">
                        <el-collapse v-model="activeNames" >                           
                            <el-collapse-item v-for="(it, idx) in showPrjs" :key="idx" :name="it">
                                <template slot="title">
                                    <div style="position:relative;padding-left:20px;width: 100%;">
                                        <span>{{ it }}</span>
                                        
                                    </div>
                                </template>
                                <div class="img-items">
                                    <div v-for="(item, index) in it.images" :key="index" class="img-item">
                                        <el-image :src="item.url + '.min.jpg'" style="width: 90%;"
                                            :preview-src-list="[item.url]" />
                                        <div class="div-date">{{ item.date }}</div>
                                    </div>
                                </div>
                                <div v-for="(item,index) in infoList[it]" :key="index" class="video-item" @click.stop="playVideo(item)">
                                    <span class="div-date">{{ item.videoDate }}</span>
                                    <i class="header-icon el-icon-camera-solid" 
                                            style="font-size: 24px;color: aqua;"></i>
                                </div>
                            </el-collapse-item>
                        </el-collapse>
                    </template>
                        <div v-else style="text-align: center;" class="div-no-data">
                                        <img src="images/nodata.png" style="width: 120px;">
                                        <div style="text-align: center;font-size: 12px;color:#888;">暂无数据</div>
                                    </div>
                    </div>
                    </module-one-3-1>
                </el-col>
                <el-col :span="18" class="no-title">
                    <module-one-3-3 label="" :notitle="true">
                        <template v-if="info">
                        <div class="right-title">
                            <span class="sp-title">{{info.videoDate }}</span>
                        </div>
                        <video controls v-if="info">
                            <source :src="info.videoUrl" type="video/mp4" />
                            您的浏览器不支持Video标签。
                        </video>
                        </template>
                        <div v-else style="text-align: center;" class="div-no-data">
                                        <img src="images/nodata.png" style="width: 120px;">
                                        <div style="text-align: center;font-size: 12px;color:#888;">暂无数据</div>
                                    </div>
                    </module-one-3-3>
                </el-col>
            </el-row>
        </div>
    </div>
</template>

<script>
import '../components/module/module-one-3-1'
import '../components/module/module-one-3-3'
import debounce from 'lodash.debounce'
export default {
    name: 'JhbigscreenPhotography',

    data() {
        return {
            prj: {},
            prjs: [],
            dataList: [],
            activeNames: [],
            info: null,
            dept:null,
            showPrjs:[],
            infoList:{},
        };
    },

    mounted() {
        this.$bus.$on("projectChange", debounce(res => {            
            this.prj = res;
            this.prjs=this.$root.projects||this.prjs;
            this.dept=this.$root.dept||this.dept;
            this.loadData2();
        }));
        if (this.$root.hasInitHeader) {            
            this.initMe();
        }
    },

    methods: {
        playVideo(it){
            this.info=null;
            setTimeout(()=>{
                this.info=it;
            },400)
        },
        loadData2() {
            this.info=null;
            this.prj = this.$root.project;
            this.prjs=this.$root.projects||this.prjs;
            this.dept=this.$root.dept||this.dept;
                this.$api.project.listPhotography(this.prj.id, this.dept.id || 0).then(d => {
                    let tmps = (d.data || []).map(it => {
                        it.images = this.$tryToJson(it.imageUrl);
                        return it;
                    })
                    if (tmps.length > 0) {
                        this.activeNames = [tmps[0].updateBy];
                        this.info = tmps[0];
                    }
                    let obj={};
                    this.showPrjs=[];
                    tmps.forEach(it=>{
                        if(!obj[it.updateBy]){
                            obj[it.updateBy]=[it]
                            this.showPrjs.push(it.updateBy);
                        }else{
                            obj[it.updateBy].push(it);
                        }
                    });
                    for(let k in obj){
                        let v=obj[k].sort((a,b)=>b.videoDate.localeCompare(a.videoDate));
                        obj[k]=v;
                    }
                    this.infoList=obj;
                })

           
        },
        initMe() {
            this.prj = this.$root.project || {};
            this.prjs = this.$root.projects || [];            
            this.loadData2();
        },
        getProjectId(cb) {
            let func = () => {
                let prjId = this.prj?.id || 0;
                if (prjId == 0) {
                    if (!this.prjs || this.prjs.length == 0) {
                        setTimeout(func, 100);
                    } else {
                        if(this.prjs.length>1){
                            cb && cb(this.prjs[1].id);
                        }else{
                            cb(0);
                        }
                    }
                } else {
                    cb && cb(prjId);
                }
            }
            func();
        },
    },
};
</script>

<style lang="less" scoped>
.prj-photography-main {
    .div-no-data{
        text-align: center;
    height: 600px;
    display: flex;
    align-items: center;
    justify-content: center;
    }
    .no-title {
        /deep/ .screen-one-3-3 {
            background-image: none;
            border: solid 1px #409eff5c;
            .module-title{
                display: none;
            }
            .right-title{
                height: 200px;
                display: flex;
                align-items: center;
                justify-content: center
            }
            .sp-title{
                display: inline-block;
                line-height: 72px;
                padding: 0px 40px;
                font-size: 40px;
                background-size: 100% 100%;
                background-image: url('../assets/images/bgphoto.png');
            }
            video{
                width: 100%;
                height: calc(100% - 201px);
            }
        }
    }
    .left-list{
        max-height: calc(100% - 40px);
        overflow-y: auto;
        &::-webkit-scrollbar {
            width: 4px;
            height: 4px;
        }
    }
    /deep/ .screen-one-3-1 {
        .el-collapse {
            border: none;
            margin-top: 4px;

            .el-collapse-item {}

            .el-collapse-item__header {
                background-color: #097fca2e;
                color: #089fff;
                border-bottom: dotted 1px #089fff77;
            }

            .el-collapse-item__content {
                padding-bottom: 12px;
            }

            .el-collapse-item__wrap {
                background-color: transparent;
                border: none;                
                .img-item {
                    margin-top: 8px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    flex-direction: column;
                    color: #fff;
                    position: relative;
                    
                }
                .video-item{
                        position: relative;
                        line-height: 30px;
                        display: flex;
                        align-items: center;
                        cursor: pointer;
                        border-bottom: solid 1px #089fff77;
                        .div-date {
                            width: calc(90% - 24px);
                            text-align: left;                            
                            bottom: 0px;
                            color:#089fff;
                            padding-left: 24px;
                        }
                    }
                   
            }
        }
    }
}</style>