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

<template>
    <div v-if="isShow">
<!--        <a-modal-->
<!--            v-model="isShow"-->
<!--            :title="title"-->
<!--            @ok="handleOk"-->
<!--            @cancel="handleCancel"-->
<!--            ok-text="确认"-->
<!--            cancel-text="取消"-->
<!--            class="p-model"-->
<!--        >-->

<!--        </a-modal>-->
        <div class="video-mask">
            <canvas class="video-canvas"></canvas>
            <div class="video-close" @click="handleCancel">
                x
            </div>
            <div class="operation-list">
                <div class="operation-item">
                    <img src="@/assets/sub-icon.png" alt="">
                    <span>变倍</span>
                    <img src="@/assets/add-icon.png" alt="">
                </div>
                <div class="operation-item">
                    <img src="@/assets/sub-icon.png" alt="">
                    <span>变焦</span>
                    <img src="@/assets/add-icon.png" alt="">
                </div>
                <div class="operation-item">
                    <img src="@/assets/sub-icon.png" alt="">
                    <span>光圈</span>
                    <img src="@/assets/add-icon.png" alt="">
                </div>
            </div>
            <div class="direction-list">
                <div class="direction-item">
                    <img src="@/assets/left-top-icon.png" alt="">
                    <img src="@/assets/top-icon.png" alt="">
                    <img src="@/assets/right-top-icon.png" alt="">
                </div>
                <div class="direction-item">
                    <img src="@/assets/left-icon.png" alt="" @mousedown="leftStart" @mouseup="leftStop">
                    <img src="@/assets/right-icon.png" alt="" @mousedown="rightStart" @mouseup="rightStop">
                </div>
                <div class="direction-item">
                    <img src="@/assets/left-bottom-icon.png" alt="">
                    <img src="@/assets/bottom-icon.png" alt="">
                    <img src="@/assets/right-bottom-icon.png" alt="">
                </div>
            </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
                console.log(newVal)
                // console.log('触发了watch，重新赋值')
                this.$nextTick(()=>{   //this.$nextTick解决不能在表单渲染之前赋值的报错问题
                    console.log(newVal.rtsp)
                    this.$api.httpApi.getChannel({
                        data:{
                            "sourceUrl":newVal.rtsp,
                            "paramBefore": "-y -i",
                            "paramBehind": "-f mpegts -codec:v mpeg1video -an -s 1707*960 -b:v 1000k -r 20 -bf 0 -codec:a mp2 -ar 44100 -ac 1 -b:a 128k"
                        }
                    }).then(res => {
                        console.log(res.data)
                        var url = 'ws://192.168.66.56:9007/api/lychee/stream/live/'+res.data.channel
                        var player = new JSMpeg.Player(url, {
                            canvas: document.querySelector('.video-canvas'),
                            audio: false,
                            pauseWhenHidden: false,
                            videoBufferSize: 8 * 1024 * 1024,
                            loop:false,
                        })
                        player.play()
                    }).catch(err => {

                    })
                })
            }

        },
    },
    data() {
        return {
            isShow:false,
            title:'',
            closable:false,//取消model模态框右上角的X号
            formItemAcrossLayout,
            formItemVerticalLayout,
            confirmLoading: false,
            form: this.$form.createForm(this, { name: 'dynamic_rule' }),
            id:'',
            mdata:[]
        };
    },
    mounted() {
        console.log('mounted执行了')
    },
    methods: {
        leftStart(){
            // console.log(this.id)
            console.log('左转鼠标按下')
            this.$axios.post('/camera/control/left/'+this.id, {
                data: {}
            }).then(res => {

            }).catch(err => {

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

            }).catch(err => {

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

            }).catch(err => {

            })
        },
        rightStop(){
            console.log('左转鼠标抬起')
            this.$axios.post('/camera/control/right/stop/'+this.id, {
                data: {}
            }).then(res => {

            }).catch(err => {

            })
        },
        handleCancel() {
            console.log('Clicked cancel button');
            console.log(this.title);
            location.reload();
            setTimeout(function () {
                this.$emit('close',false,{})
            })

        },
    },
};
</script>
<style lang="scss" scoped>
    .video-mask{
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background-color: #001529;
        z-index: 9999;
        .video-canvas{
            width: 100vw;
            height: 100vh;
        }
        .video-close{
            position: absolute;
            right: 20px;
            top: 20px;
            color: #ffffff;
            font-size: 24px;
        }
        .operation-list{
            position: absolute;
            right: 200px;
            bottom: 20px;
            /*width: 150px;*/
            /*border: solid 1px blue;*/
            .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;
            /*border: solid 1px blue;*/
            .direction-item{
                display: flex;
                align-items: center;
                justify-content: space-between;
                img{
                    width: 42px;
                }
            }
        }
    }
</style>