|
|
|
|
@ -0,0 +1,198 @@
|
|
|
|
|
<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>
|
张鑫
5 years ago
