From 29199412e0eba3967d38264c40bdd0f0ced700e5 Mon Sep 17 00:00:00 2001
From: cwchen <1048842385@qq.com>
Date: Wed, 24 Dec 2025 13:28:14 +0800
Subject: [PATCH] =?UTF-8?q?=E7=B3=BB=E7=BB=9F=E4=BF=A1=E6=81=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/devops/info.js                        |  28 ++
 .../devops/info/components/SystemInfoForm.vue | 263 +++++++++++++
 src/views/devops/info/index.vue               | 360 ++++++++++++++++++
 3 files changed, 651 insertions(+)
 create mode 100644 src/api/devops/info.js
 create mode 100644 src/views/devops/info/components/SystemInfoForm.vue
 create mode 100644 src/views/devops/info/index.vue

diff --git a/src/api/devops/info.js b/src/api/devops/info.js
new file mode 100644
index 0000000..0a15abf
--- /dev/null
+++ b/src/api/devops/info.js
@@ -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
+    })
+}
\ No newline at end of file
diff --git a/src/views/devops/info/components/SystemInfoForm.vue b/src/views/devops/info/components/SystemInfoForm.vue
new file mode 100644
index 0000000..61ba37d
--- /dev/null
+++ b/src/views/devops/info/components/SystemInfoForm.vue
@@ -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>
\ No newline at end of file
diff --git a/src/views/devops/info/index.vue b/src/views/devops/info/index.vue
new file mode 100644
index 0000000..edad2ed
--- /dev/null
+++ b/src/views/devops/info/index.vue
@@ -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>
+