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">
                        <el-collapse v-model="activeNames" >
                            <el-collapse-item v-for="(it, idx) in dataList" :key="idx" :name="it.videoDate">
                                <template slot="title">
                                    <div style="position:relative;padding-left:20px;width: 100%;">
                                        <span>{{ it.videoDate }}</span>
                                        <i class="header-icon el-icon-camera-solid" @click.stop="playVideo(it)"
                                            style="position: absolute;right: 30px;top: 10px;font-size: 30px;"></i>
                                    </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>
                            </el-collapse-item>
                        </el-collapse>
                    </div>
                    </module-one-3-1>
                </el-col>
                <el-col :span="18" class="no-title">
                    <module-one-3-3 label="" :notitle="true">
                        <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>
                    </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,
        };
    },

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

    methods: {
        playVideo(it){
            this.info=it;
        },
        loadData() {
            this.getProjectId(id => {
                this.$api.project.listPhotography(id).then(d => {
                    this.dataList = (d.data || []).map(it => {
                        it.images = this.$tryToJson(it.imageUrl);
                        return it;
                    })
                    if (this.dataList.length > 0) {
                        this.activeNames = [this.dataList[0].videoDate];
                        this.info = this.dataList[0];
                    }
                })

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

<style lang="less" scoped>
.prj-photography-main {
    .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: none;
            }

            .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;

                    .div-date {
                        width: calc(90% - 24px);
                        text-align: left;
                        position: absolute;
                        bottom: 0px;
                        background-color: #ffffff38;
                        padding-left: 24px;
                    }
                }
            }
        }
    }
}</style>