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">
            <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="">
                    <img src="@/assets/right-icon.png" alt="">
                </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.mdata=newVal
                this.id = newVal.id
                // console.log('触发了watch，重新赋值')
                this.$nextTick(()=>{   //this.$nextTick解决不能在表单渲染之前赋值的报错问题
                    this.form.setFieldsValue({  //setFieldsValue 表示对form表单重新设置值
                        ip:newVal.ip,
                        rtsp: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:[]
        };
    },
    mounted() {
        console.log('mounted执行了')
    },
    methods: {
        handleOk() {
            this.confirmLoading = true;
            setTimeout(() => {
                this.form.validateFields((err, values) => {
                    console.log(values)
                    if (!err) {
                        console.log(this.title)
                        if(this.title=='新增球机'){
                            this.$api.httpApi.addCamera({
                                data:values
                            }).then(res => {
                                if(res.code==200){
                                    this.$emit('sure',false)
                                    this.$message.success('新增球机成功');
                                }
                            }).catch(err => {

                            });
                        }else if(this.title=='编辑球机'){
                            values.id = this.id
                            this.$api.httpApi.editCamera({
                                data:values
                            }).then(res => {
                                if(res.code==200){
                                    this.$emit('sure',false)
                                    this.$message.success('编辑球机成功');
                                }
                            }).catch(err => {

                            });
                        }
                    }
                });
                this.confirmLoading = false;
            }, 500);
        },
        handleCancel() {
            console.log('Clicked cancel button');
            console.log(this.title);
            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-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>