273 lines
8.1 KiB
Vue
273 lines
8.1 KiB
Vue
<template>
|
|
<div class="pagemain">
|
|
<div class="pageTitle">{{ $t("route.systemSetting") }}</div>
|
|
<div class="pageCon">
|
|
<el-form
|
|
class="detail-form agree-form"
|
|
label-width="180px"
|
|
label-position="right"
|
|
:model="formData"
|
|
>
|
|
<el-form-item :label="$t('table.productName')">
|
|
<el-input v-model="formData.name" />
|
|
</el-form-item>
|
|
<el-form-item :label="$t('table.productMode')">
|
|
<el-input v-model="formData.model" />
|
|
</el-form-item>
|
|
<el-form-item :label="$t('table.macAddress')">
|
|
<el-input v-model="formData.mac" disabled />
|
|
</el-form-item>
|
|
<!-- <el-form-item :label="$t('table.serialNumber')">
|
|
<el-input v-model="formData.serialNum" disabled />
|
|
</el-form-item> -->
|
|
<el-form-item :label="$t('table.firmwareVercion')">
|
|
<el-input v-model="formData.version" disabled />
|
|
</el-form-item>
|
|
<el-form-item :label="$t('table.deviceID')">
|
|
<el-input v-model="formData.id" />
|
|
</el-form-item>
|
|
<el-form-item :label="$t('table.deviceIP')">
|
|
<el-input v-model="formData.ip" />
|
|
</el-form-item>
|
|
<el-form-item :label="$t('table.gatewal')">
|
|
<el-input v-model="formData.gateway" />
|
|
</el-form-item>
|
|
<el-form-item :label="$t('table.suonetMask')">
|
|
<el-input v-model="formData.subnet" />
|
|
</el-form-item>
|
|
<el-form-item :label="$t('table.dhcp')">
|
|
<el-radio v-model="formData.dhcp" label="on">{{
|
|
$t("table.open")
|
|
}}</el-radio>
|
|
<el-radio v-model="formData.dhcp" label="off">{{
|
|
$t("table.close")
|
|
}}</el-radio>
|
|
</el-form-item>
|
|
<el-form-item :label="$t('table.microphoneSwitch')">
|
|
<el-radio v-model="formData.microphone" label="on">{{
|
|
$t("table.open")
|
|
}}</el-radio>
|
|
<el-radio v-model="formData.microphone" label="off">{{
|
|
$t("table.close")
|
|
}}</el-radio>
|
|
</el-form-item>
|
|
<el-form-item :label="$t('table.aiVol')">
|
|
<el-slider
|
|
v-model="formData.aiVol"
|
|
:step="1"
|
|
:max="10"
|
|
@change="aiVolChange"
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item :label="$t('table.aoVol')">
|
|
<el-slider
|
|
v-model="formData.aoVol"
|
|
:step="1"
|
|
:max="10"
|
|
@change="aoVolChange"
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item :label="$t('table.DNS1')">
|
|
<el-input v-model="formData.dns0" />
|
|
</el-form-item>
|
|
<el-form-item :label="$t('table.DNS2')">
|
|
<el-input v-model="formData.dns1" />
|
|
</el-form-item>
|
|
</el-form>
|
|
<el-button
|
|
type="primary"
|
|
style="width: 10%; margin-left: 40%; margin-bottom: 100px"
|
|
@click="submitForm"
|
|
>
|
|
{{ $t("table.save") }}
|
|
</el-button>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { deviceInfo, deviceEdit } from '@/api/index.js'
|
|
export default {
|
|
name: 'SystemSetting',
|
|
data() {
|
|
return {
|
|
formData: {
|
|
dns0: '',
|
|
dns1: '',
|
|
name: '',
|
|
model: '',
|
|
mac: '',
|
|
serialNum: '',
|
|
version: '',
|
|
id: '',
|
|
ip: '',
|
|
gateway: '',
|
|
subnet: '',
|
|
dhcp: 'off',
|
|
microphone: 'off',
|
|
aiVol: 0,
|
|
aoVol: 0
|
|
}
|
|
}
|
|
},
|
|
mounted() {
|
|
this.getDeviceInfo()
|
|
},
|
|
methods: {
|
|
getDeviceInfo() {
|
|
deviceInfo({}).then((res) => {
|
|
if (res.code === 200) {
|
|
this.deviceInfo = res.data
|
|
this.formData.name = res.data.name || ''
|
|
this.formData.model = res.data.model || ''
|
|
this.formData.mac = res.data.mac || ''
|
|
this.formData.serialNum = res.data.serialNum || ''
|
|
this.formData.version = res.data.version || ''
|
|
this.formData.id = res.data.id || ''
|
|
this.formData.ip = res.data.ip || ''
|
|
this.formData.gateway = res.data.gateway || ''
|
|
this.formData.subnet = res.data.subnet || ''
|
|
this.formData.dhcp = res.data.dhcp || ''
|
|
this.formData.microphone = res.data.microphone || ''
|
|
this.formData.aiVol = parseInt(res.data.aiVol) || 0
|
|
this.formData.aoVol = parseInt(res.data.aoVol) || 0
|
|
this.formData.dns0 = res.data.dns0 || ''
|
|
this.formData.dns1 = res.data.dns1 || ''
|
|
} else {
|
|
this.$message.error(res.message)
|
|
}
|
|
})
|
|
},
|
|
submitForm() {
|
|
const param = {
|
|
...this.formData
|
|
}
|
|
const ipv4Regex = /^(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/
|
|
const idRegex = /^(?:[2-9]\d{0,3}|1\d{0,3}|9999)$/
|
|
const subnetRegex = /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])(\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])){3}$/
|
|
// const dnsRegex = /^(?!-)[A-Za-z0-9-]{1,63}(?<!-)(\.(?!-)[A-Za-z0-9-]{1,63}(?<!-))*$/
|
|
// 终端Id
|
|
if (!param.id) {
|
|
this.$message({
|
|
type: 'warning',
|
|
message: this.$i18n.t('table.deviceID') + this.$i18n.t('table.isEmpty')
|
|
})
|
|
return
|
|
}
|
|
if (!idRegex.test(param.id)) {
|
|
this.$message({
|
|
type: 'warning',
|
|
message: this.$i18n.t('table.deviceID') + this.$i18n.t('table.isRight3')
|
|
})
|
|
return
|
|
}
|
|
// 终端Ip
|
|
if (!param.ip) {
|
|
this.$message({
|
|
type: 'warning',
|
|
message: this.$i18n.t('table.deviceIP') + this.$i18n.t('table.isEmpty')
|
|
})
|
|
return
|
|
}
|
|
if (!ipv4Regex.test(param.ip)) {
|
|
this.$message({
|
|
type: 'warning',
|
|
message: this.$i18n.t('table.deviceIP') + this.$i18n.t('table.isRight')
|
|
})
|
|
return
|
|
}
|
|
// 默认网关
|
|
if (!param.gateway) {
|
|
this.$message({
|
|
type: 'warning',
|
|
message: this.$i18n.t('table.gatewal') + this.$i18n.t('table.isEmpty')
|
|
})
|
|
return
|
|
}
|
|
if (!ipv4Regex.test(param.gateway)) {
|
|
this.$message({
|
|
type: 'warning',
|
|
message: this.$i18n.t('table.gatewal') + this.$i18n.t('table.isRight')
|
|
})
|
|
return
|
|
}
|
|
// 子网掩码
|
|
if (!param.subnet) {
|
|
this.$message({
|
|
type: 'warning',
|
|
message: this.$i18n.t('table.suonetMask') + this.$i18n.t('table.isEmpty')
|
|
})
|
|
return
|
|
}
|
|
if (!subnetRegex.test(param.subnet)) {
|
|
this.$message({
|
|
type: 'warning',
|
|
message: this.$i18n.t('table.suonetMask') + this.$i18n.t('table.isRight4')
|
|
})
|
|
return
|
|
}
|
|
if (!param.dns0) {
|
|
this.$message({
|
|
type: 'warning',
|
|
message: this.$i18n.t('table.DNS1') + this.$i18n.t('table.isEmpty')
|
|
})
|
|
return
|
|
}
|
|
if (!ipv4Regex.test(param.dns0)) {
|
|
this.$message({
|
|
type: 'warning',
|
|
message: this.$i18n.t('table.DNS1') + this.$i18n.t('table.isRight')
|
|
})
|
|
return
|
|
}
|
|
if (!param.dns1) {
|
|
this.$message({
|
|
type: 'warning',
|
|
message: this.$i18n.t('table.DNS2') + this.$i18n.t('table.isEmpty')
|
|
})
|
|
return
|
|
}
|
|
if (!ipv4Regex.test(param.dns1)) {
|
|
this.$message({
|
|
type: 'warning',
|
|
message: this.$i18n.t('table.DNS2') + this.$i18n.t('table.isRight')
|
|
})
|
|
return
|
|
}
|
|
deviceEdit(param).then(res => {
|
|
if (res.code === 200) {
|
|
this.$message({
|
|
type: 'success',
|
|
message: this.$i18n.t('table.save') + this.$i18n.t('table.success')
|
|
})
|
|
} else {
|
|
this.$message({
|
|
type: 'error',
|
|
message: this.$i18n.t('table.save') + this.$i18n.t('table.failed')
|
|
})
|
|
}
|
|
})
|
|
},
|
|
aiVolChange(e) {
|
|
this.formData.aiVol = e
|
|
console.log(e)
|
|
},
|
|
aoVolChange(e) {
|
|
this.formData.aoVol = e
|
|
console.log(e)
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style lang="scss">
|
|
.agree-form .el-form-item {
|
|
width: 50%;
|
|
}
|
|
</style>
|
|
<style lang="scss" scoped>
|
|
::v-deep .agree-form .el-slider {
|
|
width: 50%;
|
|
margin-left: 16px;
|
|
}
|
|
</style>
|