CKQ/src/views/particulars/video.vue

<template>
    <div class="video-page">
        <header>
            <div :class="activeId===item.id?'active item':'item'" v-for="item in items" :key="item.id" @click="changeHead(item)">{{ item.name }}</div>  
        </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 dataList" :key="index" @click="showVideo(item)" :data="item">
                            <img src="./images/video.png">
                            <p style="cursor:pointer;">{{NumConvertLM(item.goafOrebelt)}}-{{item.goafOrebody}}-{{item.goafOreheight}}-{{item.goafName}}</p>
                        </div>
                    </div>
                    <div class="el-pagination-wrap">
                        <el-pagination small layout="prev, pager, next" :total="total" />
                     </div>                                   
                </div>
            </div>
        </div>
        <div class="video-dialog" v-if="videoDialogVisible">
            <div class="video-dialog-container">
                <div class="header">
                    <div class="name">{{ video.goafDevName }}</div>
                    <div class="close" @click="videoDialogVisible=false"><el-icon><Close /></el-icon></div>
                </div>
                <!-- <HkwsVideo ref="HkwsVideo"></HkwsVideo> -->
                <iframe id="video" :src="video.src" frameborder="0" style="height: 80%;" />
            </div>
        </div>           
    </div>
</template>
<script>
import HkwsVideo from '@/components/HkwsVideo/iframe'
import {  getGoafBaseInfo } from '@/api/goaf/info'
import { getSensor } from '@/api/goaf/sensor'
import { NumConvertLM } from '@/utils'
import axios from 'axios'
 export default {
    name:"particulars_video",
    components:{
        HkwsVideo
    },
    data(){
        return{
            activeId:'5',
            activetab:'1',
            items:[
                {name:"首页",id:"1",path:"/particulars/sensor"},
                {name:"压力传感器",id:"2",path:"/particulars/check"},
                {name:"位移传感器",id:"3",path:"/particulars/goaf-info"},
                {name:"有害气体传感器",id:"4",path:"/particulars/goaf-info"},
                {name:"视频监控",id:"5",path:"/particulars/goaf-info"},
            ],
            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: [],  
            dataList:[]                
        }
    },
    created(){
        this.init()
    },
    methods:{
        NumConvertLM,
        init(){
            getGoafBaseInfo().then((res) => {
                const goafOrebelts = res.data.map(item => item.goafOrebelt)
                this.goafOrebelts = [...new Set(goafOrebelts)]
                this.goafList = res.data
            })  
            this.getData()
        },
        changeHead(item){
            this.activeId=item.id
            if(item.id!=='5'){
                this.$router.push(`/particulars/sensor?id=${item.id}`)
            }else{
                this.init()
            }
        },
        searchSubmit(){
            this.conditions.page=1
            this.getData()
        },
        resetSubmit(){
            this.conditions={
                page: 1,
                limit: 10,
                goafId: '',
                goafOrebelt: '',
                goafOrebody: '',
                goafOreheight: '',
                goafName:"",
                goafDevName:""
            }
            this.goafOrebodys=[]
            this.goafOreheights=[]
            this.goafNames=[]  
            this.getData()
        },
        getData() {
            for(let key in this.conditions){
                if(this.conditions[key]===undefined||this.conditions[key]===''||this.conditions[key]==='undefined'){
                    delete this.conditions[key]
                }
            }
            getSensor(this.conditions).then((resp) => {
                this.listLoading = false
                const { data } = resp
                const start = (this.conditions.page - 1) * this.conditions.limit
                const end = this.conditions.page * this.conditions.limit
                const dataList = data.filter((item) => item.goafDevTypename.includes('摄像头'))
                this.dataList = dataList.filter((item, index) => index >= start && index < end)
                this.total = dataList.length
                this.$nextTick(()=>{
                    this.dataList.forEach((item)=>{
                        if(this.$refs['HkwsVideo'+item.goafDevId]){
                            this.$refs['HkwsVideo'+item.goafDevId][0].loadData({
                                streamServeUrl:item.goafDevSocketAddr,
                                szIP: item.goafDevIp,    // protocol ip
                                szPort: item.goafDevPort,            // protocol port
                                szUsername:item.goafDevAccount,     // device username
                                szPassword: item.goafDevPwd, // device password    
                                state:false    
                            })
                        }
                    })
                })
            })
        },
        showVideo(item) {
            axios({
                url: 'https://open.ys7.com/api/lapp/token/get',
                method: 'POST',
                params: {
                appKey: item.appKey,
                appSecret: item.appSecret
                }
            }).then((res) => {
                const accessToken = res.data.data.accessToken
                if (!accessToken) {
                this.$message.error('获取监控token失败！')
                return
                }
                this.videoDialogVisible = true
                this.video = {
                ...item,
                src: `https://open.ys7.com/ezopen/h5/iframe?url=ezopen://open.ys7.com/${item.deviceSerial}/1.live&autoplay=1&accessToken=${accessToken}`
                }
            }).catch((res) => {
                console.error(res)
                this.$message.error('获取监控失败！')
            })
        },       
        showLocalVideo(item){
                if(this.isNull(item.goafDevSocketAddr)){
                    console.error('未配置推流地址')
                    return
                }
                if(this.isNull(item.goafDevIp)){
                    console.error('未配置设备IP')
                    return
                }    
                if(this.isNull(item.goafDevPort)){
                    console.error('未配置设备端口')
                    return
                }
                if(this.isNull(item.goafDevAccount)){
                    console.error('未配置设备账号')
                    return
                }      
                if(this.isNull(item.goafDevPwd)){
                    console.error('未配置设备密码')
                    return
                }    
                this.videoDialogVisible=true;             
                this.$nextTick(()=>{
                    this.$refs.HkwsVideo.loadData({
                        streamServeUrl:item.goafDevSocketAddr,
                        szIP: item.goafDevIp,    // protocol ip
                        szPort: item.goafDevPort,            // protocol port
                        szUsername:item.goafDevAccount,     // device username
                        szPassword: item.goafDevPwd, // device password        
                    })
                })
        },
        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(goafOreheights, '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()
        },  
        isNull(val){
            if(val===undefined||val==="undefined"&&val===null&&val===""){
                return true
            }
            return false
        },
        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: 9999;
        left: 10px;
        top: 0;
        right: 10px;
        bottom: 0;
        background-color: rgba(222, 229, 236, 0.45);
        .video-dialog-container{
            width: 860px;
            height: 70%;
            max-width: 80%;
            background-color: #051933;
            border-radius: 20px;
            margin: 20px auto;
        }
        .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;
        .item{
            width: 188px;
            height: 36px;
            line-height: 36px;
            text-align: center;
            background-image: url(@/assets/sensor/head.png);
            background-size: 100% 100%;
            background-repeat: no-repeat;
            margin-right: 12px;
            max-width: 20%;
            color: #7FCFF4;
            cursor: pointer;
            &.active{
                background-image: url(@/assets/sensor/head_active.png); 
                color: #2AFFFF;
            }
        }       
    }
    .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: 3vh;
                    .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: 3vh;
                    ::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>