273 lines
8.3 KiB
Vue
273 lines
8.3 KiB
Vue
|
<script setup lang="ts">
|
||
|
|
import { ref, onMounted } from 'vue'
|
||
|
|
import { ElMessage, ElMessageBox } from 'element-plus'
|
||
|
|
|
||
|
|
// 表单数据
|
||
|
|
const formData = ref({
|
||
|
|
networkCard: '网卡二',
|
||
|
|
ipAddress: '192.168.1.56',
|
||
|
|
subnetMask: '255.255.255.255',
|
||
|
|
gateway: '192.168.1.56',
|
||
|
|
tcpProtocol: 'Modbus TCP',
|
||
|
|
// 串口设置
|
||
|
|
comPort: 'COM3',
|
||
|
|
baudRate: 115200,
|
||
|
|
parity: 'NONE',
|
||
|
|
dataBits: 8,
|
||
|
|
stopBits: 1,
|
||
|
|
rtuProtocol: 'Modbus RTU'
|
||
|
|
})
|
||
|
|
|
||
|
|
const networkCardOptions = [
|
||
|
|
{ label: '网卡一', value: '网卡一' },
|
||
|
|
{ label: '网卡二', value: '网卡二' }
|
||
|
|
]
|
||
|
|
|
||
|
|
const tcpProtocolOptions = [
|
||
|
|
{ label: 'Modbus TCP', value: 'Modbus TCP' },
|
||
|
|
{ label: 'IEC104 ', value: 'IEC104' }
|
||
|
|
]
|
||
|
|
|
||
|
|
const comPortOptions = [
|
||
|
|
{ label: 'COM1', value: 'COM1' },
|
||
|
|
{ label: 'COM2', value: 'COM2' },
|
||
|
|
{ label: 'COM3', value: 'COM3' }
|
||
|
|
]
|
||
|
|
|
||
|
|
const baudRateOptions = [
|
||
|
|
{ label: '9600', value: 9600 },
|
||
|
|
{ label: '19200', value: 19200 },
|
||
|
|
{ label: '38400', value: 38400 },
|
||
|
|
{ label: '57600', value: 57600 },
|
||
|
|
{ label: '115200', value: 115200 }
|
||
|
|
]
|
||
|
|
|
||
|
|
const parityOptions = [
|
||
|
|
{ label: 'NONE', value: 'NONE' },
|
||
|
|
{ label: 'EVEN', value: 'EVEN' },
|
||
|
|
{ label: 'ODD', value: 'ODD' }
|
||
|
|
]
|
||
|
|
|
||
|
|
const dataBitsOptions = [
|
||
|
|
{ label: '5', value: 5 },
|
||
|
|
{ label: '6', value: 6 },
|
||
|
|
{ label: '7', value: 7 },
|
||
|
|
{ label: '8', value: 8 }
|
||
|
|
]
|
||
|
|
|
||
|
|
const stopBitsOptions = [
|
||
|
|
{ label: '1', value: 1 },
|
||
|
|
{ label: '2', value: 2 }
|
||
|
|
]
|
||
|
|
|
||
|
|
const rtuProtocolOptions = [
|
||
|
|
{ label: 'Modbus RTU', value: 'Modbus RTU' },
|
||
|
|
{ label: 'IEC101 ', value: 'IEC101' }
|
||
|
|
]
|
||
|
|
|
||
|
|
// 保存
|
||
|
|
const handleSave = () => {
|
||
|
|
ElMessageBox.prompt('请输入密码', '保存', {
|
||
|
|
confirmButtonText: '确定',
|
||
|
|
cancelButtonText: '取消',
|
||
|
|
closeOnClickModal: false,
|
||
|
|
// inputType: 'password',
|
||
|
|
})
|
||
|
|
.then(({ value }) => {
|
||
|
|
console.log(value)
|
||
|
|
|
||
|
|
// ElMessage({
|
||
|
|
// type: 'success',
|
||
|
|
// message: `密码正确，保存成功`,
|
||
|
|
// })
|
||
|
|
})
|
||
|
|
.catch(() => {
|
||
|
|
// ElMessage({
|
||
|
|
// type: 'info',
|
||
|
|
// message: '密码错误',
|
||
|
|
// })
|
||
|
|
})
|
||
|
|
console.log('保存配置:', formData.value)
|
||
|
|
}
|
||
|
|
function init() {
|
||
|
|
|
||
|
|
}
|
||
|
|
onMounted(() => {
|
||
|
|
init()
|
||
|
|
})
|
||
|
|
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<div class="communication-container">
|
||
|
|
<el-form :model="formData" label-width="100px" class="form-wrapper">
|
||
|
|
<div class="section">
|
||
|
|
<div class="section-title">
|
||
|
|
<div class="icon"></div>
|
||
|
|
<div>常规配置</div>
|
||
|
|
</div>
|
||
|
|
<div class="form-row">
|
||
|
|
<el-form-item label="网卡号">
|
||
|
|
<el-select v-model="formData.networkCard" placeholder="请选择">
|
||
|
|
<el-option v-for="item in networkCardOptions" :key="item.value" :label="item.label"
|
||
|
|
:value="item.value" />
|
||
|
|
</el-select>
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item label="IP地址">
|
||
|
|
<el-input v-model="formData.ipAddress" />
|
||
|
|
</el-form-item>
|
||
|
|
</div>
|
||
|
|
<div class="form-row">
|
||
|
|
<el-form-item label="子网掩码">
|
||
|
|
<el-input v-model="formData.subnetMask" />
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item label="默认网关">
|
||
|
|
<el-input v-model="formData.gateway" />
|
||
|
|
</el-form-item>
|
||
|
|
</div>
|
||
|
|
<div class="form-row">
|
||
|
|
<el-form-item label="通讯协议">
|
||
|
|
<el-select v-model="formData.tcpProtocol" placeholder="请选择">
|
||
|
|
<el-option v-for="item in tcpProtocolOptions" :key="item.value" :label="item.label"
|
||
|
|
:value="item.value" />
|
||
|
|
</el-select>
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="section">
|
||
|
|
<div class="section-title">
|
||
|
|
<div class="icon"></div>
|
||
|
|
<div>串口设置</div>
|
||
|
|
</div>
|
||
|
|
<div class="form-row">
|
||
|
|
<el-form-item label="串口号">
|
||
|
|
<el-select v-model="formData.comPort" placeholder="请选择">
|
||
|
|
<el-option v-for="item in comPortOptions" :key="item.value" :label="item.label"
|
||
|
|
:value="item.value" />
|
||
|
|
</el-select>
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item label="波特率">
|
||
|
|
<el-select v-model="formData.baudRate" placeholder="请选择">
|
||
|
|
<el-option v-for="item in baudRateOptions" :key="item.value" :label="item.label"
|
||
|
|
:value="item.value" />
|
||
|
|
</el-select>
|
||
|
|
</el-form-item>
|
||
|
|
</div>
|
||
|
|
<div class="form-row">
|
||
|
|
<el-form-item label="校验位">
|
||
|
|
<el-select v-model="formData.parity" placeholder="请选择">
|
||
|
|
<el-option v-for="item in parityOptions" :key="item.value" :label="item.label"
|
||
|
|
:value="item.value" />
|
||
|
|
</el-select>
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item label="数据位">
|
||
|
|
<el-select v-model="formData.dataBits" placeholder="请选择">
|
||
|
|
<el-option v-for="item in dataBitsOptions" :key="item.value" :label="item.label"
|
||
|
|
:value="item.value" />
|
||
|
|
</el-select>
|
||
|
|
</el-form-item>
|
||
|
|
</div>
|
||
|
|
<div class="form-row">
|
||
|
|
<el-form-item label="停止位">
|
||
|
|
<el-select v-model="formData.stopBits" placeholder="请选择">
|
||
|
|
<el-option v-for="item in stopBitsOptions" :key="item.value" :label="item.label"
|
||
|
|
:value="item.value" />
|
||
|
|
</el-select>
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item label="通讯协议">
|
||
|
|
<el-select v-model="formData.rtuProtocol" placeholder="请选择">
|
||
|
|
<el-option v-for="item in rtuProtocolOptions" :key="item.value" :label="item.label"
|
||
|
|
:value="item.value" />
|
||
|
|
</el-select>
|
||
|
|
</el-form-item>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</el-form>
|
||
|
|
<div class="btn-wrapper">
|
||
|
|
<el-button type="primary" style="background-color: #0099ff;width: 150px;height: 40px;"
|
||
|
|
@click="handleSave">保存</el-button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<style scoped lang="scss">
|
||
|
|
.communication-container {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
padding: 20px;
|
||
|
|
.form-wrapper {
|
||
|
|
background: #fff;
|
||
|
|
padding: 20px 50px;
|
||
|
|
border-radius: 4px;
|
||
|
|
padding-bottom: 120px;
|
||
|
|
box-shadow: 0px 0px 10px rgba(219, 225, 236, 1);
|
||
|
|
}
|
||
|
|
.section {
|
||
|
|
margin-bottom: 24px;
|
||
|
|
padding-bottom: 16px;
|
||
|
|
border-bottom: 1px solid #ebeef5;
|
||
|
|
|
||
|
|
&:last-child {
|
||
|
|
border-bottom: none;
|
||
|
|
margin-bottom: 0;
|
||
|
|
padding-bottom: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.section-title {
|
||
|
|
font-size: 16px;
|
||
|
|
font-weight: 500;
|
||
|
|
margin: 0 0 21px 0;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
font-weight: 700;
|
||
|
|
font-style: normal;
|
||
|
|
font-size: 18px;
|
||
|
|
color: #333333;
|
||
|
|
|
||
|
|
.icon {
|
||
|
|
width: 4px;
|
||
|
|
height: 14px;
|
||
|
|
margin-right: 8px;
|
||
|
|
background-color: #0099ff;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.form-row {
|
||
|
|
display: flex;
|
||
|
|
gap: 40px;
|
||
|
|
margin-bottom: 16px;
|
||
|
|
|
||
|
|
.el-form-item {
|
||
|
|
flex: 1;
|
||
|
|
margin-bottom: 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.btn-wrapper {
|
||
|
|
margin-top: 20px;
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
:deep(.el-form-item--label-right .el-form-item__label) {
|
||
|
|
text-align: left;
|
||
|
|
justify-content: flex-start;
|
||
|
|
color: #787878;
|
||
|
|
}
|
||
|
|
|
||
|
|
:deep(.el-select__placeholder) {
|
||
|
|
color: #363636;
|
||
|
|
}
|
||
|
|
|
||
|
|
:deep(.el-input__inner) {
|
||
|
|
color: #363636;
|
||
|
|
min-height: 40px;
|
||
|
|
}
|
||
|
|
|
||
|
|
:deep(.el-select__wrapper) {
|
||
|
|
min-height: 40px;
|
||
|
|
}
|
||
|
|
</style>
|