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-24 13:28:14 +08:00
parent 5656ab0bd5
commit 29199412e0
3 changed files with 651 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
src/api/devops/info.js Normal file
View File

@ -0,0 +1,28 @@
import request from '@/utils/request'
// 系统运维->设备信息->查询设备信息
export function getDeviceInfoAPI(params) {
return request({
url: '/smartCar/data/device/getDeviceInfo',
method: 'GET',
params
})
}
// 系统运维->设备信息->修改设备信息
export function updateDeviceInfoAPI(data) {
return request({
url: '/smartCar/data/device/updateDevice',
method: 'POST',
data
})
}
// 系统运维->设备信息->更新告警状态
export function updateDeviceAlarmStatusAPI(data) {
return request({
url: '/smartCar/data/device/updateAlarmStatus',
method: 'post',
data
})
}

263
src/views/devops/info/components/SystemInfoForm.vue Normal file
View File

@ -0,0 +1,263 @@
<template>
<!-- 小型弹窗，用于完成，删除，保存等操作 -->
<el-dialog class="l-dialog" :class="lDialog" :title="title" :visible.sync="dialogVisible" :showClose="true"
:closeOnClickModal="false" @close="handleClose" :append-to-body="true">
<div class="dialog-content-scrollable">
<el-form :model="form" :rules="rules" ref="ruleForm" label-width="110px" label-position="top">
<el-form-item label="设备名称" prop="equipmentName">
<el-input class="form-item" v-model="form.equipmentName" clearable show-word-limit
placeholder="请输入设备名称" maxlength="32"></el-input>
</el-form-item>
</el-form>
</div>
<span slot="footer" class="dialog-footer">
<el-button type="primary" class="confirm-btn" @click="submitForm('ruleForm')">确认</el-button>
<el-button class="cancel-btn" @click="handleClose">取消</el-button>
</span>
</el-dialog>
</template>
<script>
import _ from 'lodash'
import { updateDeviceInfoAPI } from '@/api/devops/info'
// 默认参数
export default {
name: "SystemInfoForm",
props: ["width", "rowData", "title", "isAdd"],
data() {
return {
lDialog: this.width > 500 ? "w700" : "w500",
dialogVisible: true,
form: {
systemId: null,
equipmentName: '',
},
rules: {
equipmentName: [
{ required: true, message: '设备名称不能为空', trigger: 'blur' }
],
},
};
},
watch: {
isAdd: {
handler(newVal) {
if (newVal === 'edit') {
this.initFormData();
}
},
immediate: true,
},
},
methods: {
/** 初始化表单数据 */
async initFormData() {
if (!this.rowData) return;
// 编辑模式：填充表单数据
this.form = {
systemId: this.rowData.systemId,
equipmentName: this.rowData.equipmentName || '',
};
},
/*关闭弹窗 */
handleClose() {
this.dialogVisible = false;
this.$emit("closeDialog");
},
/**确认弹窗 */
sureBtnClick() {
this.dialogVisible = false;
this.$emit("closeDialog");
},
/**重置表单*/
reset() {
this.form = {
systemId: null,
equipmentName: '',
};
this.resetForm("ruleForm");
},
handleReuslt(res) {
this.$modal.msgSuccess(res.msg);
this.reset();
this.$emit('handleQuery');
this.handleClose();
},
validate(formName) {
return new Promise((resolve, reject) => {
this.$refs[formName].validate((valid) => {
if (valid) {
resolve(this.form) // 校验成功返回表单数据
} else {
reject(new Error('数据未填写完整'))
}
})
})
},
/**验证 */
async submitForm(formName) {
try {
const data = await this.validate(formName);
// 所有校验通过，组装完整数据
let formData = {
...data,
}
// 显示遮罩层
this.loading = this.$loading({
lock: true,
text: "数据提交中，请稍候...",
background: 'rgba(0,0,0,0.5)',
target: this.$el.querySelector('.el-dialog') || document.body
})
console.log('所有表单校验通过，完整数据:', formData)
const res = await this.saveData(formData)
if (res.code === 200) {
this.handleReuslt(res);
} else {
this.$modal.msgError(res.msg);
}
} catch (error) {
} finally {
if (this.loading) {
this.loading.close()
}
}
},
// 保存接口
async saveData(formData) {
return new Promise((resolve, reject) => {
updateDeviceInfoAPI(formData).then(res => {
resolve(res)
}).catch(error => {
reject(error)
})
})
},
}
};
</script>
<style lang="scss" scoped>
.w700 ::v-deep .el-dialog {
width: 700px;
font-family: Source Han Sans CN, Source Han Sans CN;
max-height: 90vh;
display: flex;
flex-direction: column;
margin-top: 5vh !important;
margin-bottom: 5vh !important;
}
.w500 ::v-deep .el-dialog {
width: 500px;
font-family: Source Han Sans CN, Source Han Sans CN;
max-height: 90vh;
display: flex;
flex-direction: column;
margin-top: 5vh !important;
margin-bottom: 5vh !important;
}
// 弹窗主体区域
.w500 ::v-deep .el-dialog__body,
.w700 ::v-deep .el-dialog__body {
flex: 1;
overflow: hidden;
padding: 20px;
display: flex;
flex-direction: column;
}
.w500 ::v-deep .el-dialog__header,
.w700 ::v-deep .el-dialog__header {
flex-shrink: 0;
border-bottom: 1px solid #EBEEF5;
.el-dialog__title {
font-size: 16px;
}
}
.yxq .el-range-separator {
margin-right: 7px !important;
}
.el-date-editor--daterange.el-input__inner {
width: 260px;
}
.form-item {
width: 100%;
}
.select-style {
display: flex;
justify-content: space-between;
}
.confirm-btn {
width: 98px;
height: 36px;
background: #1F72EA;
box-shadow: 0px 4px 8px 0px rgba(51, 135, 255, 0.5);
border-radius: 4px 4px 4px 4px;
color: #fff;
border: none;
font-size: 14px;
transition: all 0.3s;
&:hover {
background: #4A8BFF;
box-shadow: 0px 6px 12px 0px rgba(51, 135, 255, 0.6);
}
}
.cancel-btn {
width: 98px;
height: 36px;
background: #E5E5E5;
box-shadow: 0px 4px 8px 0px rgba(76, 76, 76, 0.2);
border-radius: 4px 4px 4px 4px;
color: #333;
border: none;
font-size: 14px;
transition: all 0.3s;
&:hover {
background: #d0d0d0;
box-shadow: 0px 6px 12px 0px rgba(76, 76, 76, 0.3);
}
}
::v-deep .el-dialog__footer {
text-align: center;
flex-shrink: 0;
}
// 内容区域可滚动
.dialog-content-scrollable {
flex: 1;
overflow-y: auto;
overflow-x: hidden;
padding-right: 6px;
max-height: calc(90vh - 120px); // 减去头部和底部的高度
// 自定义滚动条样式
&::-webkit-scrollbar {
width: 6px;
}
&::-webkit-scrollbar-track {
background: transparent;
}
&::-webkit-scrollbar-thumb {
background: rgba(0, 0, 0, 0.2);
border-radius: 3px;
&:hover {
background: rgba(0, 0, 0, 0.3);
}
}
}
</style>

360
src/views/devops/info/index.vue Normal file
View File

@ -0,0 +1,360 @@
<template>
<!-- 设备运维-设备信息 -->
<el-card class="device-info-container" v-loading="loading">
<!-- 基本信息 -->
<el-card class="info-card basic-info-card">
<div slot="header" class="card-header">
<span class="card-title">基本信息</span>
<el-button class="edit-btn" @click="handleEdit">编辑</el-button>
</div>
<el-descriptions :column="2" border>
<el-descriptions-item label="设备名称">
{{ deviceInfo.equipmentName }}
</el-descriptions-item>
<el-descriptions-item label="设备型号">
{{ deviceInfo.equipmentModel }}
</el-descriptions-item>
<el-descriptions-item label="固件版本">
{{ deviceInfo.firmwareVersion }}
</el-descriptions-item>
<el-descriptions-item label="软件版本">
{{ deviceInfo.softwareVersion }}
</el-descriptions-item>
<el-descriptions-item label="运行内存">
{{ deviceInfo.ram }}
</el-descriptions-item>
<el-descriptions-item label="硬盘大小">
{{ deviceInfo.hardDriveSize }}
</el-descriptions-item>
<el-descriptions-item label="NPU">
{{ deviceInfo.npu }}
</el-descriptions-item>
<el-descriptions-item label="电池容量">
{{ deviceInfo.batteryCapacity }}
</el-descriptions-item>
<el-descriptions-item label="TF存储">
{{ deviceInfo.tfStorage }}
</el-descriptions-item>
<el-descriptions-item label="序列号">
{{ deviceInfo.serialNumber }}
</el-descriptions-item>
</el-descriptions>
</el-card>
<!-- 设备运行信息 -->
<el-card class="info-card operation-info-card">
<div slot="header" class="card-header">
<span class="card-title">设备运行信息</span>
</div>
<el-descriptions :column="2" border>
<el-descriptions-item label="设备状态">
<el-tag :type="getStatusType(deviceOperation.equipmentStatusText)">
{{ deviceOperation.equipmentStatusText }}
</el-tag>
</el-descriptions-item>
<el-descriptions-item label="供电方式">
{{ deviceOperation.powerSupplyMethodText }}
</el-descriptions-item>
<el-descriptions-item label="电池电量">
<el-progress :percentage="deviceOperation.batteryPowerNum" :color="getBatteryColor(deviceOperation.batteryPowerNum)"></el-progress>
</el-descriptions-item>
<el-descriptions-item label="设备运行温度">
{{ deviceOperation.equipmentOperatingTemperature }}
</el-descriptions-item>
<el-descriptions-item label="告警状态">
<el-switch v-model="deviceOperation.alarmStatus" active-color="#1f72ea" inactive-color="#dcdfe6" @change="handleAlarmStatusChange"></el-switch>
</el-descriptions-item>
<el-descriptions-item label="网络连接方式">
{{ deviceOperation.networkConnectionMethod }}
</el-descriptions-item>
</el-descriptions>
</el-card>
<!-- 新建团队/修改团队 -->
<SystemInfoForm ref="systemInfoForm" v-if="isflag" :isAdd="isAdd" :rowData="row" @handleQuery="handleQuery" :title="title"
@closeDialog="closeDialog" :width="600" />
</el-card>
</template>
<script>
import SystemInfoForm from './components/SystemInfoForm.vue'
import { getDeviceInfoAPI, updateDeviceAlarmStatusAPI } from '@/api/devops/info'
export default {
name: 'DeviceInfo',
components: {
SystemInfoForm
},
data() {
return {
editDialogVisible: false,
deviceInfo: {
systemId: null,
equipmentName: '',
equipmentModel: '',
firmwareVersion: '',
softwareVersion: '',
ram: '',
hardDriveSize: '',
npu: '',
batteryCapacity: '',
tfStorage: '',
serialNumber: ''
},
deviceOperation: {
equipmentStatus: '',
equipmentStatusText: '',
powerSupplyMethod: '',
powerSupplyMethodText: '',
batteryPower: '',
batteryPowerNum: 0,
equipmentOperatingTemperature: '',
alarmStatus: false,
alarmStatusStr: '0',
networkConnectionMethod: ''
},
editForm: {},
isflag: false,
isAdd: '',
title: '',
row: {},
loading: false
}
},
created() {
this.getDeviceInfo()
},
methods: {
/** 获取设备信息 */
async getDeviceInfo() {
try {
this.loading = true
const res = await getDeviceInfoAPI()
if (res.code === 200 && res.data) {
const data = res.data
// 基本信息
this.deviceInfo = {
systemId: data.systemId,
equipmentName: data.equipmentName || '',
equipmentModel: data.equipmentModel || '',
firmwareVersion: data.firmwareVersion || '',
softwareVersion: data.softwareVersion || '',
ram: data.ram || '',
hardDriveSize: data.hardDriveSize || '',
npu: data.npu || '',
batteryCapacity: data.batteryCapacity || '',
tfStorage: data.tfStorage || '',
serialNumber: data.serialNumber || ''
}
// 设备运行信息
this.deviceOperation = {
equipmentStatus: data.equipmentStatus || '0',
equipmentStatusText: this.getEquipmentStatusText(data.equipmentStatus),
powerSupplyMethod: data.powerSupplyMethod || '1',
powerSupplyMethodText: this.getPowerSupplyMethodText(data.powerSupplyMethod),
batteryPower: data.batteryPower || '0',
batteryPowerNum: parseInt(data.batteryPower) || 0,
equipmentOperatingTemperature: data.equipmentOperatingTemperature || '',
alarmStatus: data.alarmStatus === '1',
alarmStatusStr: data.alarmStatus || '0',
networkConnectionMethod: data.networkConnectionMethod || ''
}
} else {
this.$message.error(res.msg || '获取设备信息失败')
}
} catch (error) {
console.error('获取设备信息失败:', error)
this.$message.error('获取设备信息失败，请稍后重试')
} finally {
this.loading = false
}
},
/** 获取设备状态文本 */
getEquipmentStatusText(status) {
const statusMap = {
'1': '在线',
'0': '离线',
'2': '待机',
'3': '升级中'
}
return statusMap[status] || '未知'
},
/** 获取供电方式文本 */
getPowerSupplyMethodText(method) {
const methodMap = {
'1': '外接电源',
'2': '电池供电'
}
return methodMap[method] || '未知'
},
/** 编辑操作 */
handleEdit() {
this.title = '修改设备信息'
this.isAdd = 'edit'
this.row = { ...this.deviceInfo }
this.isflag = true
},
closeDialog() {
this.isflag = false;
},
// 执行查询
handleQuery() {
this.getDeviceInfo()
},
/** 获取设备状态类型 */
getStatusType(status) {
const statusMap = {
'在线': 'success',
'离线': 'info',
'待机': 'warning',
'升级中': 'danger',
'未知': 'info'
}
return statusMap[status] || 'info'
},
/** 获取电池电量颜色 */
getBatteryColor(level) {
if (level >= 50) {
return '#67c23a'
} else if (level >= 20) {
return '#e6a23c'
} else {
return '#f56c6c'
}
},
/** 告警状态切换 */
async handleAlarmStatusChange(value) {
try {
const params = {
alarmStatus: value ? '1' : '0'
}
const res = await updateDeviceAlarmStatusAPI(params)
if (res.code === 200) {
this.deviceOperation.alarmStatusStr = params.alarmStatus
this.$message.success('告警状态更新成功')
} else {
// 如果更新失败，恢复原状态
this.deviceOperation.alarmStatus = !value
this.deviceOperation.alarmStatusStr = value ? '0' : '1'
this.$message.error(res.msg || '告警状态更新失败')
}
} catch (error) {
// 如果更新失败，恢复原状态
this.deviceOperation.alarmStatus = !value
this.deviceOperation.alarmStatusStr = value ? '0' : '1'
console.error('更新告警状态失败:', error)
this.$message.error('告警状态更新失败，请稍后重试')
}
}
}
}
</script>
<style scoped lang="scss">
.device-info-container {
height: calc(100vh - 84px);
overflow-y: auto;
background: linear-gradient(180deg, #f1f6ff 20%, #e5efff 100%);
padding: 16px;
::v-deep .el-card__body {
padding: 0;
}
.info-card {
margin-bottom: 16px;
background: #fff;
border-radius: 8px;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
&:last-child {
margin-bottom: 0;
}
.card-header {
display: flex;
justify-content: space-between;
align-items: center;
background: #fff;
padding: 0px;
border-radius: 8px 8px 0 0;
.card-title {
font-size: 16px;
font-weight: 600;
color: #333;
}
.edit-btn {
width: 98px;
height: 36px;
background: #1f72ea;
box-shadow: 0px 4px 8px 0px rgba(51, 135, 255, 0.5);
border-radius: 4px;
color: #fff;
border: none;
font-size: 14px;
transition: all 0.3s;
&:hover {
background: #4a8bff;
box-shadow: 0px 6px 12px 0px rgba(51, 135, 255, 0.6);
}
}
}
::v-deep .el-card__body {
padding: 16px 20px;
}
::v-deep .el-descriptions {
margin: 0;
.el-descriptions__table {
border-collapse: separate;
border-spacing: 0;
.el-descriptions__label {
font-weight: 500;
color: #606266;
background-color: #f5f7fa;
padding: 12px 16px;
width: 150px;
}
.el-descriptions__content {
color: #303133;
padding: 12px 16px;
}
td {
border: 1px solid #ebeef5;
}
}
}
}
.basic-info-card {
::v-deep .el-descriptions {
.el-descriptions__table {
.el-descriptions__label {
width: 150px;
}
}
}
}
.operation-info-card {
::v-deep .el-descriptions {
.el-descriptions__table {
.el-descriptions__label {
width: 150px;
}
}
.el-progress {
width: 200px;
}
}
}
}
</style>