mes_mobile/pages/equipmentManage/bindingDevice.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>