bonus
/
smart-car-web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

网络设置

This commit is contained in:
cwchen 2025-12-25 17:41:28 +08:00
parent e1db651893
commit 1a82946c5a
2 changed files with 182 additions and 131 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
src/api/devops/network.js
View File

@ -1,45 +1,27 @@
import request from '@/utils/request'
// 系统运维->网络配置->查询TCP/IP配置
export function getTCPIPConfigAPI(params) {
export function getNetworkDetailAPI(params) {
return request({
url: '/smartCar/data/device/getTCPIPConfig',
url: '/smartCar/data/network/getNetworkDetail',
method: 'GET',
params
})
}
// 系统运维->网络配置->更新TCP/IP配置
export function updateTCPIPConfigAPI(data) {
export function updateNetworkEthernetAPI(data) {
return request({
url: '/smartCar/data/device/updateTCPIPConfig',
url: '/smartCar/data/network/updateNetworkEthernet',
method: 'POST',
data
})
}
// 系统运维->网络配置->查询网络状态
export function getNetworkStatusAPI(params) {
// 系统运维->网络配置->更新4G/5G配置
export function updateNetworkSimAPI(data) {
return request({
url: '/smartCar/data/device/getNetworkStatus',
method: 'GET',
params
})
}
// 系统运维->网络配置->查询网络配置
export function getNetworkConfigAPI(params) {
return request({
url: '/smartCar/data/device/getNetworkConfig',
method: 'GET',
params
})
}
// 系统运维->网络配置->更新网络配置
export function updateNetworkConfigAPI(data) {
return request({
url: '/smartCar/data/device/updateNetworkConfig',
url: '/smartCar/data/network/updateNetworkSim',
method: 'POST',
data
})

281
src/views/devops/network/index.vue
View File

@ -4,37 +4,47 @@
<el-card class="network-card">
<div slot="header" class="card-header">
<div class="tab-header">
<div class="tab-item" :class="{ active: activeTab === 'tcpip' }" @click="activeTab = 'tcpip'">TCP/IP</div>
<div class="tab-item" :class="{ active: activeTab === '4g5g' }" @click="activeTab = '4g5g'">4G/5G</div>
<div class="tab-item" :class="{ active: activeTab === 'tcpip' }" @click="activeTab = 'tcpip'">TCP/IP
</div>
<div class="tab-item" :class="{ active: activeTab === '4g5g' }" @click="activeTab = '4g5g'">4G/5G
</div>
</div>
</div>
<!-- TCP/IP 标签页 -->
<div v-if="activeTab === 'tcpip'" class="tab-content">
<el-form :model="tcpipForm" :rules="tcpipRules" ref="tcpipForm" label-width="120px">
<el-form-item label="以太网接口">
<el-form-item label="以太网接口" prop="ethernetInterface" required>
<el-select v-model="tcpipForm.ethernetInterface" style="width: 400px">
<el-option label="eth0" value="eth0"></el-option>
<el-option v-for="item in dict.type.ethernet_port" :key="item.value" :label="item.label"
:value="item.value"></el-option>
</el-select>
</el-form-item>
<el-form-item label="启用DHCP">
<el-checkbox v-model="tcpipForm.enableDHCP" @change="handleDHCPChange"></el-checkbox>
</el-form-item>
<el-form-item label="IP地址" prop="ipAddress" required>
<el-input v-model="tcpipForm.ipAddress" placeholder="请输入IP地址" style="width: 400px" :disabled="tcpipForm.enableDHCP"></el-input>
<el-form-item label="IP地址" prop="ipAddress" :required="!tcpipForm.enableDHCP">
<el-input v-model="tcpipForm.ipAddress" placeholder="请输入IP地址" style="width: 400px"
:disabled="tcpipForm.enableDHCP" maxlength="32" clearable show-word-limit></el-input>
</el-form-item>
<el-form-item label="子网掩码" prop="subnetMask" required>
<el-input v-model="tcpipForm.subnetMask" placeholder="请输入子网掩码" style="width: 400px" :disabled="tcpipForm.enableDHCP"></el-input>
<el-form-item label="子网掩码" prop="subnetMask" :required="!tcpipForm.enableDHCP">
<el-input v-model="tcpipForm.subnetMask" placeholder="请输入子网掩码" style="width: 400px"
:disabled="tcpipForm.enableDHCP" maxlength="15" clearable show-word-limit></el-input>
</el-form-item>
<el-form-item label="默认网关">
<el-input v-model="tcpipForm.defaultGateway" placeholder="请输入默认网关" style="width: 400px" :disabled="tcpipForm.enableDHCP"></el-input>
<el-input v-model="tcpipForm.defaultGateway" placeholder="请输入默认网关" style="width: 400px"
:disabled="tcpipForm.enableDHCP" maxlength="15" clearable show-word-limit></el-input>
</el-form-item>
<el-form-item label="DNS">
<div class="dns-list">
<div v-for="(dns, index) in tcpipForm.dnsList" :key="index" class="dns-item">
<el-input v-model="dns.value" placeholder="请输入DNS" style="width: 350px" :disabled="tcpipForm.enableDHCP"></el-input>
<el-button type="text" icon="el-icon-plus" class="dns-btn add-btn" @click="addDNS" :disabled="tcpipForm.enableDHCP"></el-button>
<el-button type="text" icon="el-icon-minus" class="dns-btn remove-btn" @click="removeDNS(index)" :disabled="tcpipForm.enableDHCP || tcpipForm.dnsList.length === 1"></el-button>
<el-input v-model="dns.value" placeholder="请输入DNS" style="width: 350px"
:disabled="tcpipForm.enableDHCP" maxlength="32" clearable show-word-limit></el-input>
<el-button type="text" icon="el-icon-plus" class="dns-btn add-btn" @click="addDNS"
:disabled="tcpipForm.enableDHCP"></el-button>
<el-button type="text" icon="el-icon-minus" class="dns-btn remove-btn"
@click="removeDNS(index)"
:disabled="tcpipForm.enableDHCP || tcpipForm.dnsList.length === 1"></el-button>
</div>
</div>
</el-form-item>
@ -59,27 +69,27 @@
<div class="status-list">
<div class="status-item">
<span class="status-label">模块状态：</span>
<span class="status-value">{{ statusInfo.moduleStatus }}</span>
<span class="status-value">{{ statusInfo.moduleStatus || '--' }}</span>
</div>
<div class="status-item">
<span class="status-label">信号强度：</span>
<span class="status-value">{{ statusInfo.signalStrength }}</span>
<span class="status-value">{{ statusInfo.signalStrength || '--' }}</span>
</div>
<div class="status-item">
<span class="status-label">拨号获取的IP地址：</span>
<span class="status-value">{{ statusInfo.dialupIp }}</span>
<span class="status-value">{{ statusInfo.dialupIp || '--' }}</span>
</div>
<div class="status-item">
<span class="status-label">当前网络模式：</span>
<span class="status-value">{{ statusInfo.networkMode }}</span>
<span class="status-value">{{ statusInfo.networkMode || '--' }}</span>
</div>
<div class="status-item">
<span class="status-label">当前网络运营商：</span>
<span class="status-value">{{ statusInfo.operator }}</span>
<span class="status-value">{{ statusInfo.operator || '--' }}</span>
</div>
<div class="status-item">
<span class="status-label">模块IMEI：</span>
<span class="status-value">{{ statusInfo.imei }}</span>
<span class="status-value">{{ statusInfo.imei || '--' }}</span>
</div>
</div>
</div>
@ -98,16 +108,20 @@
<el-checkbox v-model="networkForm.enableDialup"></el-checkbox>
</el-form-item>
<el-form-item label="APN" prop="apn">
<el-input v-model="networkForm.apn" placeholder="请输入APN" style="width: 400px"></el-input>
<el-input v-model="networkForm.apn" placeholder="请输入APN"
style="width: 400px" maxlength="32" clearable show-word-limit></el-input>
</el-form-item>
<el-form-item label="接入号" prop="accessNumber">
<el-input v-model="networkForm.accessNumber" placeholder="请输入接入号" style="width: 400px"></el-input>
<el-input v-model="networkForm.accessNumber" placeholder="请输入接入号"
style="width: 400px" maxlength="32" clearable show-word-limit></el-input>
</el-form-item>
<el-form-item label="拨号用户名" prop="dialupUsername">
<el-input v-model="networkForm.dialupUsername" placeholder="请输入拨号用户名" style="width: 400px"></el-input>
<el-input v-model="networkForm.dialupUsername" placeholder="请输入拨号用户名"
style="width: 400px" maxlength="32" clearable show-word-limit></el-input>
</el-form-item>
<el-form-item label="拨号密码" prop="dialupPassword">
<el-input v-model="networkForm.dialupPassword" type="password" placeholder="请输入拨号密码" style="width: 400px" show-password></el-input>
<el-input v-model="networkForm.dialupPassword" type="password" placeholder="请输入拨号密码"
style="width: 400px" show-password maxlength="32" clearable show-word-limit></el-input>
</el-form-item>
<el-form-item>
<el-button class="save-btn" @click="handleSaveNetwork">保存</el-button>
@ -121,41 +135,67 @@
</template>
<script>
import { getTCPIPConfigAPI, updateTCPIPConfigAPI, getNetworkStatusAPI, getNetworkConfigAPI, updateNetworkConfigAPI } from '@/api/devops/network'
import { getNetworkDetailAPI, updateNetworkEthernetAPI, updateNetworkSimAPI } from '@/api/devops/network'
export default {
name: 'Network',
dicts: ['ethernet_port'],
data() {
return {
loading: false,
activeTab: 'tcpip',
tcpipForm: {
ethernetInterface: 'eth0',
networkEthernetId: null,
systemId: 1,
ethernetInterface: '',
enableDHCP: false,
ipAddress: '',
subnetMask: '',
defaultGateway: '',
dnsList: [{ value: '' }],
macAddress: '18-F2-2C-32-DF-B6'
macAddress: ''
},
tcpipRules: {
ethernetInterface: [
{ required: true, message: '以太网接口不能为空', trigger: 'change' }
],
ipAddress: [
{ required: true, message: 'IP地址不能为空', trigger: 'blur' }
{
validator: (rule, value, callback) => {
if (!this.tcpipForm.enableDHCP && !value) {
callback(new Error('IP地址不能为空'))
} else {
callback()
}
},
trigger: 'blur'
}
],
subnetMask: [
{ required: true, message: '子网掩码不能为空', trigger: 'blur' }
{
validator: (rule, value, callback) => {
if (!this.tcpipForm.enableDHCP && !value) {
callback(new Error('子网掩码不能为空'))
} else {
callback()
}
},
trigger: 'blur'
}
]
},
statusInfo: {
moduleStatus: '拨号成功',
signalStrength: '96',
dialupIp: '10.52.34.103',
networkMode: 'LTE TDD',
operator: '中国移动',
imei: '862819047641246'
moduleStatus: '',
signalStrength: '',
dialupIp: '',
networkMode: '',
operator: '',
imei: ''
},
networkForm: {
networkType: '4G',
simId: null,
systemId: 1,
networkType: '',
enableDialup: false,
apn: '',
accessNumber: '',
@ -166,79 +206,104 @@ export default {
}
},
created() {
this.getTCPIPConfig()
this.getNetworkStatus()
this.getNetworkConfig()
this.getNetworkDetail()
},
methods: {
/** 获取TCP/IP配置 */
async getTCPIPConfig() {
/** 获取网络详情（包含以太网和SIM卡配置） */
async getNetworkDetail() {
try {
this.loading = true
const res = await getTCPIPConfigAPI()
const res = await getNetworkDetailAPI()
if (res.code === 200 && res.data) {
const data = res.data
this.tcpipForm = {
ethernetInterface: data.ethernetInterface || 'eth0',
enableDHCP: data.enableDHCP || false,
ipAddress: data.ipAddress || '',
subnetMask: data.subnetMask || '',
defaultGateway: data.defaultGateway || '',
dnsList: data.dnsList && data.dnsList.length > 0 ? data.dnsList.map(dns => ({ value: dns })) : [{ value: '' }],
macAddress: data.macAddress || '18-F2-2C-32-DF-B6'
// 处理以太网配置 (ethernet)
if (data.ethernet) {
const ethernet = data.ethernet
// 处理DNS，将逗号分隔的字符串分割为数组
let dnsList = [{ value: '' }]
if (ethernet.dns) {
if (typeof ethernet.dns === 'string') {
// 使用逗号分割字符串，过滤空值
const dnsArray = ethernet.dns.split(',').map(dns => dns.trim()).filter(dns => dns)
dnsList = dnsArray.length > 0
? dnsArray.map(dns => ({ value: dns }))
: [{ value: '' }]
} else if (Array.isArray(ethernet.dns)) {
dnsList = ethernet.dns.length > 0
? ethernet.dns.map(dns => ({ value: dns }))
: [{ value: '' }]
}
}
this.tcpipForm = {
networkEthernetId: ethernet.networkEthernetId || null,
systemId: ethernet.systemId || 1,
ethernetInterface: ethernet.ethernetInterface || '',
enableDHCP: ethernet.enableDhcp === '1' || ethernet.enableDhcp === 1,
ipAddress: ethernet.ipAddress || '',
subnetMask: ethernet.subnetMask || '',
defaultGateway: ethernet.defaultGateway || '',
dnsList: dnsList,
macAddress: ethernet.macAddress || ''
}
// 初始化后清除验证状态，让验证规则根据 enableDHCP 状态重新应用
this.$nextTick(() => {
if (this.$refs.tcpipForm) {
this.$refs.tcpipForm.clearValidate(['ipAddress', 'subnetMask'])
}
})
}
// 处理SIM卡配置 (sim)
if (data.sim) {
const sim = data.sim
// 状态信息
this.statusInfo = {
moduleStatus: sim.moduleStatus || '',
signalStrength: sim.signalStrength || '',
dialupIp: sim.dialingIpAddress || '',
networkMode: sim.currentNetworkMode || '',
operator: sim.currentNetworkOperators || '',
imei: sim.moduleImel || ''
}
// 配置信息
this.networkForm = {
simId: sim.simId || null,
systemId: sim.systemId || 1,
networkType: sim.signalType || '',
enableDialup: sim.enableDialing === '1' || sim.enableDialing === 1,
apn: sim.apn || '',
accessNumber: sim.accessNumber || '',
dialupUsername: sim.dialUpUsername || '',
dialupPassword: sim.dialingPassword || ''
}
}
}
} catch (error) {
console.error('获取TCP/IP配置失败:', error)
console.error('获取网络详情失败:', error)
} finally {
this.loading = false
}
},
/** 获取网络状态 */
async getNetworkStatus() {
try {
const res = await getNetworkStatusAPI()
if (res.code === 200 && res.data) {
this.statusInfo = {
moduleStatus: res.data.moduleStatus || '拨号成功',
signalStrength: res.data.signalStrength || '96',
dialupIp: res.data.dialupIp || '10.52.34.103',
networkMode: res.data.networkMode || 'LTE TDD',
operator: res.data.operator || '中国移动',
imei: res.data.imei || '862819047641246'
}
}
} catch (error) {
console.error('获取网络状态失败:', error)
}
},
/** 获取网络配置 */
async getNetworkConfig() {
try {
const res = await getNetworkConfigAPI()
if (res.code === 200 && res.data) {
const data = res.data
this.networkForm = {
networkType: data.networkType || '4G',
enableDialup: data.enableDialup || false,
apn: data.apn || '',
accessNumber: data.accessNumber || '',
dialupUsername: data.dialupUsername || '',
dialupPassword: data.dialupPassword || ''
}
}
} catch (error) {
console.error('获取网络配置失败:', error)
}
},
/** DHCP切换 */
handleDHCPChange() {
// DHCP启用时，清空IP相关字段
// DHCP启用时，清空IP相关字段和DNS
if (this.tcpipForm.enableDHCP) {
this.tcpipForm.ipAddress = ''
this.tcpipForm.subnetMask = ''
this.tcpipForm.defaultGateway = ''
// 清空DNS列表，重置为只有一个空值
this.tcpipForm.dnsList = [{ value: '' }]
}
// 清除验证状态
this.$nextTick(() => {
if (this.$refs.tcpipForm) {
this.$refs.tcpipForm.clearValidate(['ipAddress', 'subnetMask'])
}
})
},
/** 添加DNS */
addDNS() {
@ -253,8 +318,9 @@ export default {
/** 保存TCP/IP配置 */
async handleSaveTCPIP() {
try {
// 表单验证，如果验证失败会抛出错误，错误信息会显示在表单项下方
await this.$refs.tcpipForm.validate()
// 如果未启用DHCP，额外验证IP地址和子网掩码
if (!this.tcpipForm.enableDHCP) {
if (!this.tcpipForm.ipAddress) {
this.$message.error('IP地址不能为空')
@ -266,28 +332,33 @@ export default {
}
}
// 验证通过后，开始保存
this.loading = true
// 处理DNS，将数组用逗号拼接成字符串
const dnsValue = this.tcpipForm.dnsList
.map(item => item.value)
.filter(item => item)
.join(',')
const params = {
networkEthernetId: this.tcpipForm.networkEthernetId,
ethernetInterface: this.tcpipForm.ethernetInterface,
enableDHCP: this.tcpipForm.enableDHCP,
enableDhcp: this.tcpipForm.enableDHCP ? '1' : '0',
ipAddress: this.tcpipForm.ipAddress,
subnetMask: this.tcpipForm.subnetMask,
defaultGateway: this.tcpipForm.defaultGateway,
dnsList: this.tcpipForm.dnsList.map(item => item.value).filter(item => item),
dns: dnsValue,
macAddress: this.tcpipForm.macAddress
}
const res = await updateTCPIPConfigAPI(params)
const res = await updateNetworkEthernetAPI(params)
if (res.code === 200) {
this.$message.success('保存成功')
// 保存后重新获取数据
this.getNetworkDetail()
} else {
this.$message.error(res.msg || '保存失败')
}
} catch (error) {
if (error.message !== '数据未填写完整') {
console.error('保存TCP/IP配置失败:', error)
this.$message.error('保存失败，请稍后重试')
}
} finally {
this.loading = false
}
},
@ -296,24 +367,23 @@ export default {
try {
this.loading = true
const params = {
networkType: this.networkForm.networkType,
enableDialup: this.networkForm.enableDialup,
simId: this.networkForm.simId,
signalType: this.networkForm.networkType,
enableDialing: this.networkForm.enableDialup ? '1' : '0',
apn: this.networkForm.apn,
accessNumber: this.networkForm.accessNumber,
dialupUsername: this.networkForm.dialupUsername,
dialupPassword: this.networkForm.dialupPassword
dialUpUsername: this.networkForm.dialupUsername,
dialingPassword: this.networkForm.dialupPassword
}
const res = await updateNetworkConfigAPI(params)
const res = await updateNetworkSimAPI(params)
if (res.code === 200) {
this.$message.success('保存成功')
// 保存后重新获取状态
this.getNetworkStatus()
// 保存后重新获取数据
this.getNetworkDetail()
} else {
this.$message.error(res.msg || '保存失败')
}
} catch (error) {
console.error('保存网络配置失败:', error)
this.$message.error('保存失败，请稍后重试')
} finally {
this.loading = false
}
@ -529,4 +599,3 @@ export default {
}
}
</style>