CKQ/src/views/particulars/video.vue

<template>
    <div class="video-page">
        <header></header>
        <div class="tab">
            <el-select v-model="conditions.goafOrebelt" placeholder="矿带"  @change="changeArea(1)" style="width:120px" clearable>
                <el-option v-for="(item,index) in goafOrebelts" :key="index" :value="item" :label="item" />
            </el-select>
            <el-select v-model="conditions.goafOrebody" placeholder="矿体"  @change="changeArea(2)" style="width:120px;margin:0 12px;">
                <el-option v-for="(item,index) in goafOrebodys" :key="index" :value="item.goafOrebody" :label="item.goafOrebody" />
            </el-select>
            <el-select v-model="conditions.goafOreheight" placeholder="中段"  @change="changeArea(3)" style="width:120px">
                <el-option v-for="(item,index) in goafOreheights" :key="index" :value="item.goafOreheight" :label="item.goafOreheight" />
            </el-select>   
        </div>
        <div class="container">
            <div class="lf">
                <div class="search-container">
                    <el-select v-model="conditions.goafId" placeholder="采空区编号"  @change="changeArea(4)" style="width:210px;margin:0 12px;">
                        <el-option v-for="item in goafNames" :key="item.goafId" :value="item.goafId" :label="item.goafName" />
                    </el-select>  
                    <div class="bt search" @click="searchSubmit">查询</div>
                    <div class="bt" @click="resetSubmit">重置</div>
                </div>
                <div class="lf-container"> 
                    <div class="video-container">
                        <div class="item" v-for="(item,index) in 10" :key="index" @click="showVideo(item)">
                            <video src="https://www.runoob.com/try/demo_source/movie.mp4" poster="./images/video.png">
                                <source src="movie.mp4"  type="video/mp4">
                            </video>
                            <p>{Ⅲ号-770-32008}：封堵口</p>
                        </div>
                    </div>
                    <div class="el-pagination-wrap">
                        <el-pagination small layout="prev, pager, next" :total="50" />
                     </div>                                   
                </div>
            </div>
        </div>
        <div class="video-dialog" v-if="videoDialogVisible">
             <div class="header">
                <div class="name">{{ video.name }}</div>
                <div class="close" @click="videoDialogVisible=false"><el-icon><Close /></el-icon></div>
             </div>
            <!-- <video :src="video.src" id="video" controls></video> -->
            <HkwsVideo></HkwsVideo>
        </div>    
    </div>
</template>
<script>
import HkwsVideo from '@/components/HkwsVideo'
import {  getGoafBaseInfo } from '@/api/goaf/info'
 export default {
    name:"particulars_video",
    components:{
        HkwsVideo
    },
    data(){
        return{
            activeId:'1',
            activetab:'1',
            video:{
                src:"",
                name:""
            },
            videoDialogVisible:false,
            tabs:[
                {name:"Ⅲ号",id:"1"},
                {name:"770",id:"2"},
                {name:"32001",id:"3"},
            ],
            conditions: {
                page: 1,
                limit: 10,
                goafId: '',
                goafOrebelt: '',
                goafOrebody: '',
                goafOreheight: '',
                goafName:"",
                goafDevName:""
            }, 
            goafList: [],
            goafOrebelts: [],
            goafOrebodys: [],
            goafOreheights: [],
            goafNames: [],                  
        }
    },
    created(){
        this.init()
    },
    methods:{
        init(){
            getGoafBaseInfo().then((res) => {
                const goafOrebelts = res.data.map(item => item.goafOrebelt)
                this.goafOrebelts = [...new Set(goafOrebelts)]
                this.goafList = res.data
            })  
        },
        changeHead(item){
            this.activeId=item.id
        },
        searchSubmit(){
            this.getData()
        },
        resetSubmit(){
            this.conditions={
                page: 1,
                limit: 10,
                goafId: '',
                goafOrebelt: '',
                goafOrebody: '',
                goafOreheight: '',
                goafName:"",
                goafDevName:""
            }
            this.goafOrebodys=[]
            this.goafOreheights=[]
            this.goafNames=[]  
            this.getData()
        },
        getData(){

        },
        showVideo(item){
            this.video={
                src:'https://www.runoob.com/try/demo_source/movie.mp4',
                name:"{Ⅲ号-770-32008}：封堵口"
            }
            this.videoDialogVisible=true;
        },
        changeArea(type) {
            const goafs = this.deeepClone(this.goafList)
            let goafOrebodys = this.deeepClone(this.goafOrebodys)
            let goafOreheights = this.deeepClone(this.goafOreheights)
            let goafNames = this.deeepClone(this.goafNames)
            if (type === 1) {
                goafOrebodys = goafs.filter(item => item.goafOrebelt === this.conditions.goafOrebelt)
                goafOrebodys = this.unique(goafOrebodys, 'goafOrebody')
                this.goafOrebodys = goafOrebodys
                this.goafOreheights = []
                this.goafNames = []
                this.conditions.goafOrebody = ''
                this.conditions.goafOreheight = ''
                this.conditions.goafName = ''
                this.conditions.goafId = ''
            } else if (type === 2) {
                goafOreheights = goafs.filter(item => (item.goafOrebody === this.conditions.goafOrebody) && (item.goafOrebelt === this.conditions.goafOrebelt))
                goafOreheights = this.unique(goafOrebodys, 'goafOreheight')
                this.goafOreheights = goafOreheights
                this.goafNames = []
                this.conditions.goafOreheight = ''
                this.conditions.goafName = ''
                this.conditions.goafId = ''
            } else if (type === 3) {
                goafNames = goafs.filter(item => (item.goafOreheight === this.conditions.goafOreheight) && (item.goafOrebody === this.conditions.goafOrebody) && (item.goafOrebelt === this.conditions.goafOrebelt))
                this.goafNames = goafNames
                this.conditions.goafName = ''
                this.conditions.goafId = ''
            } else {
                for (let i = 0; i < goafNames.length; i++) {
                if (this.conditions.goafId === goafNames[i].goafId) {
                    this.conditions.goafName = goafNames[i].goafName
                }
                }
            }
            this.$forceUpdate()
        },  
        unique(arr = [], name = 'name') {
            const res = new Map()
            return arr.filter((item) => !res.has(item[name]) && res.set(item[name], 1))
        },        
        deeepClone(params) {
            return JSON.parse(JSON.stringify(params))
        } 
    }
 }
</script>
<style lang="scss" scoped>
.video-page{
    .search-item{
        display: flex;
            justify-content: center;
            align-items: center;
            margin-bottom: 14px;
            span{
                font-family: 'Ping Hei';
                font-size: 14px;
                line-height: 1;
                color: rgba(255, 255, 255, 0.7);
            }
        }
        .input,.select,.el-date-editor{
            width: 180px;
            margin-right:16px;
            color: #fff;
        }
        ::v-deep{
            .el-input__wrapper{
                background-color:  rgba(8, 128, 255, 0.2);
                border: 0;
                box-shadow: none;               
            }
            .el-input__inner{
                color: #fff;
            }
    } 
    .video-dialog{
        position: fixed;
        z-index: 999;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(5, 25, 51, 0.98);
        .name{
            color: #fff;
            font-size: 20px;
            line-height:1 ;  
            text-indent: 20px;        
        }
        .header{
            display: flex;
            justify-content: space-between;
            align-items: center;
            .close{
                height: 50px;
                line-height: 50px;
                display: inline-block;
                padding: 10px 20px;
                cursor: pointer;
                color: #fff;
                font-size: 36px;
            }
        }
        #video{
            display: block;
            width: 80%;
            max-height: 80vh;
            box-shadow: 2px 2px 4px rgba(0,0,0,0.6);
            margin: 10px auto;
        }        
    }
    header{
        display: flex;
        justify-content: center;
        align-items: center;
        padding-top: 0.5vh;
        padding-top:36px;
    }
    .tab{
        padding-top: 1.5vh;
        .item{
            display: inline-block;
            padding: 5px 10px;
            color: #fff;
            font-size: 16px;
            background: #003B7A;
            border: 1px solid #004EA2;
            letter-spacing: 0.6px;
            margin-right: 24px;
            border-radius: 4px 15px 8px 4px;
            cursor: pointer;
            &.active{
                background: #0083CF;
                border: 1px solid #0097DD;
            }
        }
    }
    .container{
        display: flex;
        .lf{
            width: 100%;
            padding-left: 100px;
            .search-container{
                padding:4.4vh 0 5vh 0;
                box-sizing: border-box;
                display: flex;
                flex-wrap: wrap;
                .input,.select,.el-date-editor{
                    width: 220px;
                    height: 36px;
                    margin-right:16px;
                    color: #fff;
                }
                ::v-deep{
                    .el-input__wrapper{
                        background-color:  rgba(8, 128, 255, 0.2);
                        border: 0;
                        box-shadow: none;               
                    }
                    .el-input__inner{
                        color: #fff;
                    }
                } 
                .bt{
                    width: 100px;
                    height: 36px;
                    line-height: 36px;
                    text-align: center;
                    color: #fff;
                    font-size: 14px;
                    background: rgba(8, 128, 255, 0.2);
                    border-radius: 4px;   
                    cursor: pointer;              
                    &.search{
                        background: linear-gradient(rgba(94, 226, 255, 1),rgba(79, 175, 255, 1));
                        margin-right:14px;
                    }
                }       
            }
            .lf-container{
                .video-container{
                    display: flex;
                    justify-content: flex-start;
                    align-items: center;
                    flex-wrap: wrap;
                    margin-top: 5vh;
                    .item{
                        width: 20%;
                        display: flex;
                        justify-content: center;
                        align-items: center; 
                        flex-direction: column;    
                        padding: 20px;     
                        box-sizing: border-box;   
                        color: #fff;       
                        font-size: 14px;
                        video{
                            display: block;
                            width: 100%;
                            cursor: pointer;
                        }
                        p{
                            padding-top: 10px;
                        }
                    }
                }
                .el-pagination-wrap{
                    float: right;
                    margin-top: 5vh;
                    ::v-deep{
                        .el-pager li,button{
                            background-color: #00539F;
                            margin-left: 10px;
                            color: rgba(255, 255, 255, 0.75);
                            &.is-active{
                                background-color: rgba(0, 131, 207, 1);
                            }
                        }
                    }
                }
            }         
        }
    }
}

</style>