duoji-frontend/src/views/realTimeMonitoring/model.vue

<template>
   <div class="video-mask" v-if="isShow">
<!--       <canvas class="video-canvas"></canvas>-->
       <div class="vxgplayer" id="video"
            :url="mdata.rtsp"
            autostart
            avsync
            nmf-src="video_play_plugins/pnacl/Release/media_player.nmf"
            nmf-path="media_player.nmf"
            latency="0"
       >
       </div>
       <div class="video-close" @click="handleCancel">
           ╳
       </div>
       <div class="operation-list">
           <div class="operation-item">
               <img :src="zoomSubUrl" alt="" @mousedown="zoomDecStart" @mouseup="zoomDecStop">
               <span>变倍</span>
               <img :src="zoomAddUrl" alt="" @mousedown="zoomAddStart" @mouseup="zoomAddStop">
           </div>
           <div class="operation-item">
               <img :src="focusSubUrl" alt="" @mousedown="focusDecStart" @mouseup="focusDecStop">
               <span>变焦</span>
               <img :src="focusAddUrl" alt="" @mousedown="focusAddStart" @mouseup="focusAddStop">
           </div>
           <div class="operation-item">
               <img :src="irisSubUrl" alt="" @mousedown="irisDecStart" @mouseup="irisDecStop">
               <span>光圈</span>
               <img :src="irisAddUrl" alt="" @mousedown="irisAddStart" @mouseup="irisAddStop">
           </div>
       </div>
       <div class="direction-list">
           <div class="direction-item">
               <img :src="leftUpUrl" alt="" @mousedown="leftUpStart" @mouseup="leftUpStop">
               <img :src="upUrl" alt="" @mousedown="upStart" @mouseup="upStop">
               <img :src="rightUpUrl" alt="" @mousedown="rightUpStart" @mouseup="rightUpStop">
           </div>
           <div class="direction-item">
               <img :src="leftUrl" alt="" @mousedown="leftStart" @mouseup="leftStop">
               <img :src="rightUrl" alt="" @mousedown="rightStart" @mouseup="rightStop">
           </div>
           <div class="direction-item">
               <img :src="leftDownUrl" alt="" @mousedown="leftDownStart" @mouseup="leftDownStop">
               <img :src="downUrl" alt="" @mousedown="downStart" @mouseup="downStop">
               <img :src="rightDownUrl" alt="" @mousedown="rightDownStart" @mouseup="rightDownStop">
           </div>
       </div>
   </div>
</template>
<script>
var formItemAcrossLayout = {  //formItemAcrossLayout当表单内item横向排列时用
    labelCol: { span: 8 },    //lable长度
    wrapperCol: { span: 14 },  //input长度
};
var formItemVerticalLayout = { //formItemVerticalLayout当表单内item纵向排列时用
    labelCol: { span: 4 },
    wrapperCol: { span: 8, offset: 4 },
};
export default {
    props:[ 'visible', 'modelData'],
    watch: {
        //监听并接收父组件的visible并赋值给isShow（子组件接收父组件props传过来的值时不能起一样的类名，会报重复定义的错）
        visible: function(newVal){
            this.isShow = newVal;  //newVal即是visible
            // newVal && this.showConfirm(); //newVal存在的话执行showConfirm函数
        },
        modelData: function(newVal){
            // console.log(newVal)
            if(newVal.id){
                this.id = newVal.id
                this.mdata = newVal
                console.log(newVal)
                console.log('触发了watch，重新赋值')
                this.$nextTick(()=>{   //this.$nextTick解决不能在表单渲染之前赋值的报错问题
                    console.log(newVal.rtsp)
                    this.getHdVideos(newVal.rtsp)
                })
            }

        },
    },
    data() {
        return {
            isShow:false,
            title:'',
            closable:false,//取消model模态框右上角的X号
            formItemAcrossLayout,
            formItemVerticalLayout,
            confirmLoading: false,
            form: this.$form.createForm(this, { name: 'dynamic_rule' }),
            id:'',
            mdata:[],
            zoomSubUrl:require('@/assets/sub-icon.png'),
            zoomAddUrl:require('@/assets/add-icon.png'),
            focusSubUrl:require('@/assets/sub-icon.png'),
            focusAddUrl:require('@/assets/add-icon.png'),
            irisSubUrl:require('@/assets/sub-icon.png'),
            irisAddUrl:require('@/assets/add-icon.png'),
            leftUpUrl:require('@/assets/left-up-icon.png'),
            upUrl:require('@/assets/up-icon.png'),
            rightUpUrl:require('@/assets/right-up-icon.png'),
            leftUrl:require('@/assets/left-icon.png'),
            rightUrl:require('@/assets/right-icon.png'),
            leftDownUrl:require('@/assets/left-down-icon.png'),
            downUrl:require('@/assets/down-icon.png'),
            rightDownUrl:require('@/assets/right-down-icon.png'),
            player:'',
        };
    },
    // provide(){ //提供
    //     return {
    //         reload: this.reloadModel
    //     }
    // },
    // inject: ['reload'],
    // mounted() {
    //     console.log('mounted执行了')
    // },
    methods: {
        // reloadModel(){
        //     this.isRouter = false
        //     this.$nextTick( function () {
        //         this.isRouter = true
        //         console.log(this.mdata)
        //         this.player= this.player.destroy()
        //         this.getHdVideos(this.mdata)
        //     })
        // },
        handleCancel() {
            console.log('Clicked cancel button');
            console.log(this.title);
            location.reload();
            const that=this
            setTimeout(function () {
                that.$emit('close',false,{})
            },500)
        },
        getHdVideos(rtsp){
            this.$nextTick(() => {
                // window.vxgplayer('vxg_media_player1').stop();
                window.vxgplayer('video').src(rtsp);
                window.vxgplayer('video').play();
                vxgplayer('video').size('100%', '100%');
            })
        },
        zoomDecStart(){
            console.log('变倍-按下')
            this.zoomSubUrl=require('@/assets/sub-active-icon.png')
            this.$axios.post('/camera/control/zoomDec/start/'+this.id, {
                data: {}
            }).then(res => {

            }).catch(err => {

            })
        },
        zoomDecStop(){
            console.log('变倍-抬起')
            this.zoomSubUrl=require('@/assets/sub-icon.png')
            this.$axios.post('/camera/control/zoomDec/stop/'+this.id, {
                data: {}
            }).then(res => {

            }).catch(err => {

            })
        },
        zoomAddStart(){
            console.log('变倍+按下')
            this.zoomAddUrl=require('@/assets/add-active-icon.png')
            this.$axios.post('/camera/control/zoomAdd/start/'+this.id, {
                data: {}
            }).then(res => {

            }).catch(err => {

            })
        },
        zoomAddStop(){
            console.log('变倍+抬起')
            this.zoomAddUrl=require('@/assets/add-icon.png')
            this.$axios.post('/camera/control/zoomAdd/stop/'+this.id, {
                data: {}
            }).then(res => {

            }).catch(err => {

            })
        },
        focusDecStart(){
            console.log('变焦-按下')
            this.focusSubUrl=require('@/assets/sub-active-icon.png')
            this.$axios.post('/camera/control/focusDec/start/'+this.id, {
                data: {}
            }).then(res => {

            }).catch(err => {

            })
        },
        focusDecStop(){
            console.log('变焦-抬起')
            this.focusSubUrl=require('@/assets/sub-icon.png')
            this.$axios.post('/camera/control/focusDec/stop/'+this.id, {
                data: {}
            }).then(res => {

            }).catch(err => {

            })
        },
        focusAddStart(){
            console.log('变焦+按下')
            this.focusAddUrl=require('@/assets/add-active-icon.png')
            this.$axios.post('/camera/control/focusAdd/start/'+this.id, {
                data: {}
            }).then(res => {

            }).catch(err => {

            })
        },
        focusAddStop(){
            console.log('变焦+抬起')
            this.focusAddUrl=require('@/assets/add-icon.png')
            this.$axios.post('/camera/control/focusAdd/stop/'+this.id, {
                data: {}
            }).then(res => {

            }).catch(err => {

            })
        },
        irisDecStart(){
            console.log('光圈-按下')
            this.irisSubUrl=require('@/assets/sub-active-icon.png')
            this.$axios.post('/camera/control/irisDec/start/'+this.id, {
                data: {}
            }).then(res => {

            }).catch(err => {

            })
        },
        irisDecStop(){
            console.log('光圈-抬起')
            this.irisSubUrl=require('@/assets/sub-icon.png')
            this.$axios.post('/camera/control/irisDec/stop/'+this.id, {
                data: {}
            }).then(res => {

            }).catch(err => {

            })
        },
        irisAddStart(){
            console.log('光圈+按下')
            this.irisAddUrl=require('@/assets/add-active-icon.png')
            this.$axios.post('/camera/control/irisAdd/start/'+this.id, {
                data: {}
            }).then(res => {

            }).catch(err => {

            })
        },
        irisAddStop(){
            console.log('光圈+抬起')
            this.irisAddUrl=require('@/assets/add-icon.png')
            this.$axios.post('/camera/control/irisAdd/stop/'+this.id, {
                data: {}
            }).then(res => {

            }).catch(err => {

            })
        },
        leftUpStart(){
            console.log('左上鼠标按下')
            this.leftUpUrl=require('@/assets/left-up-active-icon.png')
            this.$axios.post('/camera/control/leftUp/'+this.id, {
                data: {}
            }).then(res => {

            }).catch(err => {

            })
        },
        leftUpStop(){
            console.log('左上鼠标抬起')
            this.leftUpUrl=require('@/assets/left-up-icon.png')
            this.$axios.post('/camera/control/leftUp/stop/'+this.id, {
                data: {}
            }).then(res => {

            }).catch(err => {

            })
        },
        upStart(){
            console.log('上鼠标按下')
            this.upUrl=require('@/assets/up-active-icon.png')
            this.$axios.post('/camera/control/up/'+this.id, {
                data: {}
            }).then(res => {

            }).catch(err => {

            })
        },
        upStop(){
            console.log('上鼠标抬起')
            this.upUrl=require('@/assets/up-icon.png')
            this.$axios.post('/camera/control/up/stop/'+this.id, {
                data: {}
            }).then(res => {

            }).catch(err => {

            })
        },
        rightUpStart(){
            console.log('右上鼠标按下')
            this.rightUpUrl=require('@/assets/right-up-active-icon.png')
            this.$axios.post('/camera/control/rightUp/'+this.id, {
                data: {}
            }).then(res => {

            }).catch(err => {

            })
        },
        rightUpStop(){
            console.log('右上鼠标抬起')
            this.rightUpUrl=require('@/assets/right-up-icon.png')
            this.$axios.post('/camera/control/rightUp/stop/'+this.id, {
                data: {}
            }).then(res => {

            }).catch(err => {

            })
        },
        leftStart(){
            // console.log(this.id)
            console.log('左转鼠标按下')
            this.leftUrl=require('@/assets/left-active-icon.png')
            this.$axios.post('/camera/control/left/'+this.id, {
                data: {}
            }).then(res => {

            }).catch(err => {

            })
        },
        leftStop(){
            this.leftUrl=require('@/assets/left-icon.png')
            console.log('左转鼠标抬起')
            this.$axios.post('/camera/control/left/stop/'+this.id, {
                data: {}
            }).then(res => {

            }).catch(err => {

            })
        },
        rightStart(){
            console.log('右转鼠标按下')
            this.rightUrl=require('@/assets/right-active-icon.png')
            this.$axios.post('/camera/control/right/'+this.id, {
                data: {}
            }).then(res => {

            }).catch(err => {

            })
        },
        rightStop(){
            console.log('右转鼠标抬起')
            this.rightUrl=require('@/assets/right-icon.png')
            this.$axios.post('/camera/control/right/stop/'+this.id, {
                data: {}
            }).then(res => {

            }).catch(err => {

            })
        },
        leftDownStart(){
            console.log('左下鼠标按下')
            this.leftDownUrl=require('@/assets/left-down-active-icon.png')
            this.$axios.post('/camera/control/leftDown/'+this.id, {
                data: {}
            }).then(res => {

            }).catch(err => {

            })
        },
        leftDownStop(){
            console.log('左下鼠标抬起')
            this.leftDownUrl=require('@/assets/left-down-icon.png')
            this.$axios.post('/camera/control/leftDown/stop/'+this.id, {
                data: {}
            }).then(res => {

            }).catch(err => {

            })
        },
        downStart(){
            console.log('下鼠标按下')
            this.downUrl=require('@/assets/down-active-icon.png')
            this.$axios.post('/camera/control/down/'+this.id, {
                data: {}
            }).then(res => {

            }).catch(err => {

            })
        },
        downStop(){
            console.log('下鼠标抬起')
            this.downUrl=require('@/assets/down-icon.png')
            this.$axios.post('/camera/control/down/stop/'+this.id, {
                data: {}
            }).then(res => {

            }).catch(err => {

            })
        },
        rightDownStart(){
            console.log('右下鼠标按下')
            this.rightDownUrl=require('@/assets/right-down-active-icon.png')
            this.$axios.post('/camera/control/rightDown/'+this.id, {
                data: {}
            }).then(res => {

            }).catch(err => {

            })
        },
        rightDownStop(){
            console.log('右下鼠标抬起')
            this.rightDownUrl=require('@/assets/right-down-icon.png')
            this.$axios.post('/camera/control/rightDown/stop/'+this.id, {
                data: {}
            }).then(res => {

            }).catch(err => {

            })
        },
    },
};
</script>
<style lang="scss" scoped>
    .video-mask{
        position:fixed;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        /*background-color: #001529;*/
        z-index:1000;
        #video{

        }
        .video-close{
            position: absolute;
            right: 20px;
            top: 20px;
            color: #ffffff;
            font-size: 24px;
            width: 32px;
            height: 32px;
            background: rgba(0,0,0,0.5);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            z-index: 10;
        }
        .operation-list{
            position: absolute;
            right: 200px;
            bottom: 20px;
            /*width: 150px;*/
            /*border: solid 1px blue;*/
            z-index: 10;
            .operation-item{
                img{
                    width: 42px;
                }
                span{
                    padding: 5px 10px;
                    background: rgba(0,0,0,0.5);
                    font-size: 18px;
                    color: #ffffff;
                }
            }
        }
        .direction-list{
            position: absolute;
            right: 30px;
            bottom: 20px;
            width: 150px;
            z-index: 10;
            /*border: solid 1px blue;*/
            .direction-item{
                display: flex;
                align-items: center;
                justify-content: space-between;

                img {
                    width: 42px;
                }
            }
        }

        img {
            cursor: pointer;
        }

        .vxgplayer {
            border: none;
            margin: 0;
        }
    }
</style>