170 lines
5.1 KiB
Vue
170 lines
5.1 KiB
Vue
<template>
|
||
<!-- 绑定安全生产监控相机 -->
|
||
<view>
|
||
<view class="page_padding">
|
||
<view class="page_content contentboxsty font13">
|
||
<view class="content_row">
|
||
<view class="name font_bold">串流推流Url</view>
|
||
<view class="text">
|
||
<input v-model="form.stream_url" placeholder="请输入串流推流Url" disabled/>
|
||
</view>
|
||
</view>
|
||
<view class="content_row">
|
||
<view class="name font_bold">AppName</view>
|
||
<view class="text">
|
||
<input v-model="form.app_name" placeholder="请输入APP名称"/>
|
||
</view>
|
||
</view>
|
||
<view class="content_row noborbot">
|
||
<view class="name"></view>
|
||
<view class="tip">
|
||
不超过256字符，支持数字、大小写字母、短划线（-）、下划线（_）、等号（=）。
|
||
</view>
|
||
</view>
|
||
<view class="content_row">
|
||
<view class="name font_bold">StreamName</view>
|
||
<view class="text">
|
||
<input v-model="form.stream_name" placeholder="请输入StreamName"/>
|
||
</view>
|
||
</view>
|
||
<view class="content_row noborbot">
|
||
<view class="name"></view>
|
||
<view class="tip">
|
||
不超过256字符，支持数字、大小写字母、短划线（-）、下划线（_）、等号（=）。
|
||
</view>
|
||
</view>
|
||
<view class="content_row">
|
||
<view class="name font_bold">设备IP</view>
|
||
<view class="text">
|
||
<input v-model="form.monitor_ip" placeholder="请输入设备IP"/>
|
||
</view>
|
||
</view>
|
||
<view class="content_row">
|
||
<view class="name font_bold">端口</view>
|
||
<view class="text">
|
||
<input v-model="form.monitor_port" placeholder="请输入设备端口"/>
|
||
</view>
|
||
</view>
|
||
<view class="content_row">
|
||
<view class="name font_bold">用户名</view>
|
||
<view class="text">
|
||
<input v-model="form.monitor_account" placeholder="请输入您的用户名"/>
|
||
</view>
|
||
</view>
|
||
<view class="content_row">
|
||
<view class="name font_bold">密码</view>
|
||
<view class="text">
|
||
<input password type="safe-password" v-model="form.monitor_password" placeholder="请输入密码"/>
|
||
</view>
|
||
</view>
|
||
<view class="content_row">
|
||
<view class="name font_bold">监控推流权限</view>
|
||
<view class="text flex_layout">
|
||
<view class="switch" @click="form.stream_type=1">
|
||
<view v-if="form.stream_type ==1" class="t-icon t-icon-qiyong1 contenticon"></view>
|
||
<view v-else class="t-icon t-icon-jinyong1 contenticon"></view>
|
||
<text class="text">Token验证</text>
|
||
</view>
|
||
<view class="switch" @click="form.stream_type=2">
|
||
<view v-if="form.stream_type ==2" class="t-icon t-icon-qiyong1 contenticon"></view>
|
||
<view v-else class="t-icon t-icon-jinyong1 contenticon"></view>
|
||
<text class="text">禁用</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="bottom_but flex_layout">
|
||
<view class="but_color font13" @click="save">保存</view>
|
||
<view class="font13" @click="cancel">取消</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
form:{
|
||
id:'',
|
||
stream_url:'',
|
||
app_name:'',
|
||
stream_name:'',
|
||
stream_type:1,
|
||
monitor_ip:'',
|
||
monitor_port:'',
|
||
monitor_account:'',
|
||
monitor_password:''
|
||
}
|
||
}
|
||
},
|
||
onLoad(option) {
|
||
this.form.id = option.id;
|
||
this.getVideo(option.id);
|
||
},
|
||
onReady() {
|
||
|
||
},
|
||
methods: {
|
||
getVideo(id){
|
||
this.$api.request('/get.video.config',{id:id}).then(res=>{
|
||
this.form.stream_url = res.data.stream_url;
|
||
if(res.data.app_name && res.data.eq_name){
|
||
this.form.app_name = res.data.app_name;
|
||
this.form.stream_name = res.data.stream_name;
|
||
this.form.stream_type = res.data.stream_type;
|
||
this.form.monitor_ip = res.data.monitor_ip;
|
||
this.form.monitor_port = res.data.monitor_port;
|
||
this.form.monitor_account = res.data.monitor_account;
|
||
this.form.monitor_password = res.data.monitor_password;
|
||
}
|
||
}).catch(err=>{
|
||
|
||
})
|
||
},
|
||
save(){
|
||
this.$api.postFuncLoading('/bind.video.config',this.form).then(res=>{
|
||
this.parentClick();
|
||
this.reset();
|
||
this.$wf.toast({type:'success',text:'保存成功'});
|
||
}).catch(err=>{
|
||
|
||
})
|
||
},
|
||
cancel(){
|
||
this.reset();
|
||
},
|
||
reset(){
|
||
this.form.app_name = '';
|
||
this.form.stream_name = '';
|
||
this.form.stream_type = 1;
|
||
this.form.monitor_ip = '';
|
||
this.form.monitor_port = '';
|
||
this.form.monitor_account = '';
|
||
this.form.monitor_password = '';
|
||
},
|
||
parentClick(){
|
||
const pages = getCurrentPages();
|
||
if (pages.length >= 2) {
|
||
const prevPage = pages[pages.length - 2];
|
||
prevPage.$vm.getList();
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.page_content{padding: 0 12px;}
|
||
.content_row{display: flex;border-bottom: 1px solid #2D3A6F;height: 44px;align-items: center;
|
||
.name{flex-basis: 96px;}
|
||
.text{flex: 1;}
|
||
.tip{width: 70%;font-size: 10px;color: #666;}
|
||
.flex_layout{
|
||
.contenticon{width: 16px;height: 16px;}
|
||
.text{padding: 0 20px 0 5px;}
|
||
}
|
||
}
|
||
.switch{display: flex;align-items: center;}
|
||
</style>
|