InternetCompetition/src/components/netConfiguration.vue

168 lines
6.2 KiB
Vue

<template>
<div>
<el-button @click="dialogVisible = true">串口及网络协议设置</el-button>
<el-dialog
title="串口及网络协议设置"
:visible.sync="dialogVisible"
:before-close="handleClose"
>
<h3>串口参数设置</h3>
<el-divider></el-divider>
<div class="formOne">
<el-form
:model="ruleForm"
:rules="rules"
ref="ruleForm"
label-width="150px"
class="demo-ruleForm"
:label-position="labelPosition"
>
<el-form-item label="波特率(bps):" prop="btl">
<el-select v-model="ruleForm.btl" placeholder="请选择波特率">
<el-option label="区域一" value="shanghai"></el-option>
<el-option label="区域二" value="beijing"></el-option>
</el-select>
</el-form-item>
<el-form-item label="检验位:" prop="jyw">
<el-select v-model="ruleForm.jyw" placeholder="请选择检验位">
<el-option label="区域一" value="shanghai"></el-option>
<el-option label="区域二" value="beijing"></el-option>
</el-select>
</el-form-item>
<el-form-item label="流控:" prop="lk">
<el-select v-model="ruleForm.lk" placeholder="请选择流控">
<el-option label="区域一" value="shanghai"></el-option>
<el-option label="区域二" value="beijing"></el-option>
</el-select>
</el-form-item>
<el-form-item label="自适应波特率(类RFC2117):" prop="rfc">
<el-select v-model="ruleForm.rfc" placeholder="请选择自适应波特率">
<el-option label="区域一" value="shanghai"></el-option>
<el-option label="区域二" value="beijing"></el-option>
</el-select>
</el-form-item>
</el-form>
<el-form
:model="ruleForm"
:rules="rules"
ref="ruleForm"
label-width="150px"
class="demo-ruleForm"
:label-position="labelPosition"
>
<el-form-item label="数据位(bit):" prop="sjw">
<el-select v-model="ruleForm.sjw" placeholder="请选择数据位">
<el-option label="区域一" value="shanghai"></el-option>
<el-option label="区域二" value="beijing"></el-option>
</el-select>
</el-form-item>
<el-form-item label="停止位:" prop="tzw">
<el-select v-model="ruleForm.tzw" placeholder="请选择停止位">
<el-option label="区域一" value="shanghai"></el-option>
<el-option label="区域二" value="beijing"></el-option>
</el-select>
</el-form-item>
<el-form-item label="485功能:" prop="gn">
<el-select v-model="ruleForm.gn" placeholder="请选择485功能">
<el-option label="区域一" value="shanghai"></el-option>
<el-option label="区域二" value="beijing"></el-option>
</el-select>
</el-form-item>
</el-form>
</div>
<h3>其他设置</h3>
<el-divider></el-divider>
<div class="formOne">
<el-form
:model="ruleForm"
:rules="rules"
ref="ruleForm"
label-width="150px"
class="demo-ruleForm"
:label-position="labelPosition"
>
<el-form-item label="串口自动成频:" prop="ckzdcp">
<el-select v-model="ruleForm.ckzdcp">
<el-option label="区域一" value="shanghai"></el-option>
<el-option label="区域二" value="beijing"></el-option>
</el-select>
</el-form-item>
<el-form-item label="注册包类型:" prop="zcblx">
<el-select v-model="ruleForm.zcblx">
<el-option label="区域一" value="shanghai"></el-option>
<el-option label="区域二" value="beijing"></el-option>
</el-select>
</el-form-item>
<el-form-item label="自定义心跳包:" prop="zdyxtb">
<el-select v-model="ruleForm.zdyxtb">
<el-option label="区域一" value="shanghai"></el-option>
<el-option label="区域二" value="beijing"></el-option>
</el-select>
</el-form-item>
<el-form-item label="套接字分发功能:" prop="tjz">
<el-select v-model="ruleForm.tjz">
<el-option label="区域一" value="shanghai"></el-option>
<el-option label="区域二" value="beijing"></el-option>
</el-select>
</el-form-item>
</el-form>
<div>
注意:开启后,模块主动向服务器发送注册包,此功能用于辨识设备。
first:模块建议时发送注册包,every:每次发送数据时发送注册包
</div>
</div>
<span slot="footer" class="dialog-footer">
<el-button type="primary" @click="dialogVisible = false"
>保存</el-button
>
<el-button @click="dialogVisible = false">取 消</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
export default {
data() {
return {
dialogVisible: false,
labelPosition: "left",
ruleForm: {
btl: "",
jyw: "",
lk: "",
rfc: "",
sjw: "",
tzw: "",
gn: "",
ckzdcp: "",
zcblx: "",
zdyxtb: "",
tjz: "",
},
rules: {
btl: [{ required: true, trigger: "change" }],
jyw: [{ required: true, trigger: "change" }],
lk: [{ required: true, trigger: "change" }],
rfc: [{ required: true, trigger: "change" }],
sjw: [{ required: true, trigger: "change" }],
tzw: [{ required: true, trigger: "change" }],
gn: [{ required: true, trigger: "change" }],
ckzdcp: [{ required: true, trigger: "change" }],
zcblx: [{ required: true, trigger: "change" }],
zdyxtb: [{ required: true, trigger: "change" }],
tjz: [{ required: true, trigger: "change" }],
},
};
},
};
</script>
<style scoped lang="less">
.formOne {
display: flex;
justify-content: space-around;
}
.demo-ruleForm {
width: 50%;
}
</style>