绘制 运维版本管理页面

src/router/static.ts

@@ -35,6 +35,15 @@ export const adminBaseRoute = {
                 title: pageTitle('router.supplementaryRecruitment')
             }
         },
+        {
+            // 在线补召
+            path: '/versionMaintenance',
+            name: 'versionMaintenance',
+            component: () => import('@/views/govern/manage/programVersion/comp/versionMaintenance.vue'),
+            meta: {
+                title: pageTitle('router.versionMaintenance')
+            }
+        },
         {
             path: 'cockpit',
             name: '项目管理',

src/views/govern/cloudDeviceEntry/index.vue

@@ -12,7 +12,7 @@
             </pane>
             <pane style="background: #fff">
                 <div class="device-manage-right">
-                    <el-form :inline="true" class="demo-form-inline"  style="height: 42px">
+                    <el-form :inline="true" class="demo-form-inline" style="height: 42px">
                         <el-form-item style="position: relative; z-index: 2">
                             <el-button icon="el-icon-Plus" type="primary" @click="add" v-if="nodeLevel != 4">
                                 {{
@@ -2154,6 +2154,8 @@ const onsubmit = async () => {
                         break
                 }
             }
+        } else {
+            ElMessage.warning('请检查表单数据是否填写完整!')
         }
     })
 }

src/views/govern/device/control/detail.vue

@@ -179,7 +179,6 @@ const init = () => {
                         opacity: 0.35,
                         fontSize: 14
                     },
-                    backgroundColor: 'rgba(0,0,0,0.55)',
                     borderWidth: 0
                 },
 

src/views/govern/manage/basic/popupVersion.vue

@@ -59,13 +59,13 @@
                     placeholder="填写特殊类型(不填默认通用类型)"
                 ></el-input>
             </el-form-item>
-            <el-form-item label="版本协议:" prop="versionAgreement">
+            <el-form-item label="协议版本:" prop="versionAgreement">
                 <el-input
                     maxlength="32"
                     show-word-limit
                     v-model.trim="form.versionAgreement"
                     autocomplete="off"
-                    placeholder="请输入版本协议"
+                    placeholder="请输入协议版本"
                 ></el-input>
             </el-form-item>
             <el-form-item label="版本日期:" prop="versionDate">
@@ -158,7 +158,7 @@ const rules = {
     devType: [{ required: true, message: '请选择装置型号', trigger: 'change' }],
     versionNo: [{ required: true, message: '请输入版本号', trigger: 'blur' }],
     versionType: [{ required: true, message: '请输入版本类型', trigger: 'blur' }],
-    versionAgreement: [{ required: true, message: '请输入版本协议', trigger: 'blur' }],
+    versionAgreement: [{ required: true, message: '请输入协议版本', trigger: 'blur' }],
     versionDate: [{ required: true, message: '请输入版本日期', trigger: 'blur' }],
     description: [{ required: true, message: '请输入描述', trigger: 'blur' }],
     crcInfo: [{ required: true, message: '请输入CRC校验', trigger: 'blur' }],

src/views/govern/manage/basic/version.vue

@@ -3,7 +3,7 @@
         <TableHeader ref="tableHeaderRef" :showReset="false" showExport>
             <template #select>
                 <el-form-item label="装置型号:">
-                    <el-select v-model.trim="tableStore.table.params.devType" placeholder="请选择装置型号" clearable>
+                    <el-select v-model.trim="tableStore.table.params.devType" filterable placeholder="请选择装置型号" clearable>
                         <el-option
                             v-for="item in DevTypeOptions"
                             :key="item.id"
@@ -57,7 +57,7 @@ const tableStore = new TableStore({
         },
         { title: '装置型号', field: 'devTypeName' ,minWidth: '100'},
         { title: '版本号', field: 'versionNo' ,minWidth: '100'},
-        { title: '版本协议', field: 'versionAgreement' ,minWidth: '100'},
+        { title: '协议版本', field: 'versionAgreement' ,minWidth: '100'},
         { title: '版本日期', field: 'versionDate' ,minWidth: '100'},
         { title: '归档日期', field: 'updateTime',minWidth: '150' },
         { title: '描述', field: 'description',minWidth: '200' },

src/views/govern/manage/programVersion/comp/form.vue

@@ -0,0 +1,157 @@
+<template>
+    <el-dialog class="cn-operate-dialog" width="600px" v-model.trim="dialogVisible" :title="title">
+        <el-form :model="form" class="form-one" label-width="auto" ref="formRef" :rules="rules">
+            <el-form-item label="版本号" prop="substationName">
+                <el-input v-model.trim="form.substationName" placeholder="请输入版本号"></el-input>
+            </el-form-item>
+            <el-form-item label="协议版本" prop="name">
+                <el-input v-model.trim="form.name" placeholder="请输入协议版本"></el-input>
+            </el-form-item>
+            <el-form-item label="版本日期" prop="name">
+                <el-input v-model.trim="form.name" placeholder="请输入版本日期"></el-input>
+            </el-form-item>
+            <el-form-item label="装置系列" prop="loadType">
+                <el-select v-model.trim="form.loadType" filterable clearable placeholder="请选择装置系列">
+                    <el-option
+                        v-for="item in DataTypeSelect"
+                        :key="item.id"
+                        :label="item.name"
+                        :value="item.id"
+                    ></el-option>
+                </el-select>
+            </el-form-item>
+
+            <el-form-item label="版本类型" prop="name">
+                <el-input v-model.trim="form.name" placeholder="请输入版本类型"></el-input>
+            </el-form-item>
+            <el-form-item label="描述" prop="name">
+                <el-input
+                    maxlength="32"
+                    :autosize="{ minRows: 2, maxRows: 4 }"
+                    type="textarea"
+                    show-word-limit
+                    v-model.trim="form.remark"
+                    placeholder="请输入描述"
+                ></el-input>
+            </el-form-item>
+            <el-form-item label="上传升级文件" prop="name">
+                <el-upload
+                    :limit="1"
+                    accept=".bin"
+                    :auto-upload="false"
+                    :on-change="fileChange"
+                    :on-exceed="fileExceed"
+                    :on-remove="fileRemove"
+                    :file-list="fileList"
+                >
+                    <el-button type="primary">点击上传</el-button>
+                </el-upload>
+            </el-form-item>
+            <el-form-item label="CRC校验" prop="name">
+                <el-input v-model.trim="form.name" placeholder="请输入版本日期"></el-input>
+            </el-form-item>
+        </el-form>
+
+        <template #footer>
+            <span class="dialog-footer">
+                <el-button @click="dialogVisible = false">取消</el-button>
+                <el-button type="primary" @click="submit">确认</el-button>
+            </span>
+        </template>
+    </el-dialog>
+</template>
+<script lang="ts" setup>
+import { ref, inject } from 'vue'
+import { reactive } from 'vue'
+import { ElMessage } from 'element-plus'
+import TableStore from '@/utils/tableStore'
+import { queryByCode, queryCsDictTree } from '@/api/system-boot/dictTree'
+import { saveUser, updateUser } from '@/api/cs-device-boot/sensitiveLoadMange'
+import { useDictData } from '@/stores/dictData'
+
+const TypeOptions = ref()
+
+const dictData = useDictData()
+const DataTypeSelect = dictData.getBasicData('Interference_Source')
+
+const tableStore = inject('tableStore') as TableStore
+const fileList: any = ref([])
+const formRef = ref()
+const form = reactive<any>({
+    loadType: [],
+    substationName: null,
+    installedCapacity: null,
+    name: null,
+    userAgreementCapacity: null,
+    id: null,
+    sort: 100
+})
+const rules = {
+    substationName: [{ required: true, message: '请输入所属厂站名称', trigger: 'blur' }],
+    name: [{ required: true, message: '请输入敏感用户名称', trigger: 'blur' }],
+    loadType: [{ required: true, message: '请输入请选择敏感负荷类型', trigger: 'blur' }],
+    installedCapacity: [{ required: true, message: '请输入用户协议容量', trigger: 'blur' }],
+    userAgreementCapacity: [{ required: true, message: '请输入装机容量', trigger: 'blur' }],
+    sort: [{ required: true, message: '请输入排序', trigger: 'blur' }]
+}
+
+const dialogVisible = ref(false)
+const title = ref('新增')
+const open = (text: string, data?: anyObj) => {
+    formRef.value?.resetFields()
+    title.value = text
+    dialogVisible.value = true
+    if (data) {
+        for (let key in form) {
+            form[key] = data[key]
+        }
+    } else {
+        for (let key in form) {
+            form[key] = null
+            form.sort = 100
+        }
+    }
+}
+const fileRemove = (e: any) => {
+    form.file = null
+    fileList.value = []
+}
+const fileChange = (e: any) => {
+    if (!beforeUpload(e.raw)) return
+    form.file = e.raw
+    fileList.value = [e.raw]
+}
+const fileExceed = (e: any) => {
+    ElMessage.error('只能上传一个文件')
+}
+// 处理上传前检查
+const beforeUpload = (file: any) => {
+    const isWord = file.name.endsWith('.bin')
+
+    if (!isWord) {
+        ElMessage.error('请上传(.bin)格式文件!')
+        fileList.value = []
+        return false
+    }
+
+    // 校验通过后允许上传，交由 http-request 处理
+    return true
+}
+
+const submit = () => {
+    formRef.value.validate(async (valid: boolean) => {
+        if (valid) {
+            if (form.id) {
+                await updateUser(form)
+            } else {
+                await saveUser(form)
+            }
+            ElMessage.success('操作成功')
+            tableStore.index()
+            dialogVisible.value = false
+        }
+    })
+}
+
+defineExpose({ open })
+</script>

src/views/govern/manage/programVersion/comp/versionMaintenance.vue

@@ -0,0 +1,171 @@
+<template>
+    <div class="default-main">
+        <TableHeader ref="tableHeaderRef" :showReset="false" showExport>
+            <template #select>
+                <el-form-item label="关键字筛选">
+                    <el-input v-model="tableStore.table.params.keywords" clearable placeholder="请输入关键字" />
+                </el-form-item>
+
+                <el-form-item label="装置系列">
+                    <el-select
+                        v-model.trim="tableStore.table.params.devType"
+                        filterable
+                        placeholder="请选择装置系列"
+                        clearable
+                    >
+                        <el-option
+                            v-for="item in DevTypeOptions"
+                            :key="item.id"
+                            :label="item.name"
+                            :value="item.id"
+                        ></el-option>
+                    </el-select>
+                </el-form-item>
+            </template>
+            <template #operation>
+                <el-button :icon="Plus" type="primary" @click="add">新增</el-button>
+                <el-button :icon="Back" @click="go(-1)">返回</el-button>
+            </template>
+        </TableHeader>
+        <Table ref="tableRef" />
+        <!-- 新增 -->
+        <Form ref="formRef" />
+    </div>
+</template>
+<script setup lang="ts">
+import { ref, onMounted, provide } from 'vue'
+import TableStore from '@/utils/tableStore'
+import Table from '@/components/table/index.vue'
+import TableHeader from '@/components/table/header/index.vue'
+import { ElMessage } from 'element-plus'
+import { queryByCode, queryByid } from '@/api/system-boot/dictTree'
+import { useDictData } from '@/stores/dictData'
+import { Plus, EditPen } from '@element-plus/icons-vue'
+import { useRouter } from 'vue-router'
+import { Back, Setting, Search } from '@element-plus/icons-vue'
+import Form from './form.vue'
+defineOptions({
+    name: 'govern/manage/programVersion'
+})
+const dictData = useDictData()
+const DevTypeOptions = ref()
+const tableHeaderRef = ref()
+const { push, go } = useRouter()
+const formRef = ref()
+const tableStore = new TableStore({
+    url: '/cs-device-boot/edData/queryEdDataPage',
+    method: 'POST',
+    column: [
+        {
+            field: 'index',
+            title: '序号',
+            width: '80',
+            formatter: (row: any) => {
+                return (tableStore.table.params.pageNum - 1) * tableStore.table.params.pageSize + row.rowIndex + 1
+            }
+        },
+        { title: '装置系列', field: 'devTypeName', minWidth: '100' },
+        { title: '版本号', field: 'versionNo', minWidth: '100' },
+        { title: '协议版本', field: 'versionAgreement', minWidth: '100' },
+        { title: '版本日期', field: 'versionDate', minWidth: '100' },
+        { title: '修改人员', field: 'versionDate', minWidth: '100' },
+        { title: '修改日期', field: 'versionDate', minWidth: '100' },
+
+        { title: '描述', field: 'versionDate', minWidth: '100' },
+        { title: '版本类型', field: 'versionDate', minWidth: '100' },
+
+        {
+            title: '状态',
+            render: 'switch',
+            width: 100,
+            field: 'usageStatus',
+            activeText: '启用',
+            inactiveText: '停用',
+            inactiveValue: '0',
+            activeValue: '1',
+            onChangeField: (row: any, value: any) => {
+                // console.log("🚀 ~ row:", row)
+                // ElMessageBox.prompt('二次校验密码确认', '', {
+                //     confirmButtonText: '确认',
+                //     cancelButtonText: '取消',
+                //     customClass: 'customInput',
+                //     inputType: 'text',
+                //     beforeClose: (action, instance, done) => {
+                //         if (action === 'confirm') {
+                //             if (instance.inputValue == null) {
+                //                 return ElMessage.warning('请输入密码')
+                //             } else if (instance.inputValue?.length > 32) {
+                //                 return ElMessage.warning(
+                //                     '密码长度不能超过32位,当前密码长度为' + instance.inputValue.length
+                //                 )
+                //             } else {
+                //                 done()
+                //             }
+                //         } else {
+                //             done()
+                //         }
+                //     }
+                // }).then(({ value }) => {
+                //     passwordConfirm(value).then(res => {
+                //         editEquipmentDelivery({
+                //             ...row,
+                //             status: row.status == 5 ? 1 : row.status == 6 ? 2 : row.status,
+                //             usageStatus: row.usageStatus == 1 ? 0 : 1
+                //         }).then(res => {
+                //             ElMessage.success(row.usageStatus == 1 ? '设备停用成功！' : '设备启用成功！')
+                //             tableStore.index()
+                //         })
+                //     })
+                // })
+            }
+        },
+
+        {
+            title: '操作',
+            fixed: 'right',
+            align: 'center',
+            width: '120',
+            render: 'buttons',
+            buttons: [
+                {
+                    name: 'productSetting',
+                    title: '修改',
+                    type: 'primary',
+                    icon: 'el-icon-EditPen',
+                    render: 'basicButton'
+                },
+                {
+                    name: 'productSetting',
+                    title: '删除',
+                    type: 'primary',
+                    icon: 'el-icon-EditPen',
+                    render: 'basicButton'
+                }
+            ]
+        }
+    ],
+    loadCallback: () => {}
+})
+queryByCode('Device_Type').then(res => {
+    const id = res.data.id
+    queryByid(id).then(res1 => {
+        res1.data.map((item: any, index: any) => {
+            if (item.pid == id) {
+                res1.data.splice(index, 1)
+            }
+        })
+
+        DevTypeOptions.value = res1.data
+    })
+})
+
+tableStore.table.params.devType = ''
+provide('tableStore', tableStore)
+
+const add = () => {
+    formRef.value.open('新增版本')
+}
+onMounted(() => {
+    tableHeaderRef.value.onComSearch()
+})
+</script>

src/views/govern/manage/programVersion/index.vue

@@ -0,0 +1,182 @@
+<template>
+    <div class="default-main">
+        <TableHeader ref="tableHeaderRef" :showReset="false" showExport>
+            <template #select>
+                <el-form-item label="关键字筛选">
+                    <el-input v-model="tableStore.table.params.keywords" clearable placeholder="请输入关键字" />
+                </el-form-item>
+                <el-form-item label="通讯状态">
+                    <el-select
+                        v-model.trim="tableStore.table.params.devType"
+                        filterable
+                        placeholder="请选择通讯状态"
+                        clearable
+                    >
+                        <el-option
+                            v-for="item in DevTypeOptions"
+                            :key="item.id"
+                            :label="item.name"
+                            :value="item.id"
+                        ></el-option>
+                    </el-select>
+                </el-form-item>
+                <el-form-item label="装置型号">
+                    <el-select
+                        v-model.trim="tableStore.table.params.devType"
+                        filterable
+                        placeholder="请选择装置型号"
+                        clearable
+                    >
+                        <el-option
+                            v-for="item in DevTypeOptions"
+                            :key="item.id"
+                            :label="item.name"
+                            :value="item.id"
+                        ></el-option>
+                    </el-select>
+                </el-form-item>
+                <el-form-item label="装置系列">
+                    <el-select
+                        v-model.trim="tableStore.table.params.devType"
+                        filterable
+                        placeholder="请选择装置系列"
+                        clearable
+                    >
+                        <el-option
+                            v-for="item in DevTypeOptions"
+                            :key="item.id"
+                            :label="item.name"
+                            :value="item.id"
+                        ></el-option>
+                    </el-select>
+                </el-form-item>
+                <el-form-item label="升级装置筛选">
+                    <el-select
+                        v-model.trim="tableStore.table.params.devType"
+                        filterable
+                        placeholder="请选择升级装置筛选"
+                        clearable
+                    >
+                        <el-option
+                            v-for="item in DevTypeOptions"
+                            :key="item.id"
+                            :label="item.name"
+                            :value="item.id"
+                        ></el-option>
+                    </el-select>
+                </el-form-item>
+            </template>
+            <template #operation>
+                <el-button :icon="EditPen" type="primary" class="ml10" @click="maintenance">终端版本维护</el-button>
+                <el-button :icon="Share" type="primary" class="ml10">批量升级</el-button>
+            </template>
+        </TableHeader>
+        <Table ref="tableRef" />
+    </div>
+</template>
+<script setup lang="ts">
+import { ref, onMounted, provide } from 'vue'
+import TableStore from '@/utils/tableStore'
+import Table from '@/components/table/index.vue'
+import TableHeader from '@/components/table/header/index.vue'
+import { ElMessage } from 'element-plus'
+import { queryByCode, queryByid } from '@/api/system-boot/dictTree'
+import { useDictData } from '@/stores/dictData'
+import { Share, EditPen } from '@element-plus/icons-vue'
+import { useRouter } from 'vue-router'
+defineOptions({
+    name: 'govern/manage/programVersion'
+})
+const dictData = useDictData()
+const DevTypeOptions = ref()
+const tableHeaderRef = ref()
+const { push, options, currentRoute } = useRouter()
+const tableStore = new TableStore({
+    url: '/cs-device-boot/edData/queryEdDataPage',
+    method: 'POST',
+    column: [
+        { type: 'checkbox', width: '60' },
+        {
+            field: 'index',
+            title: '序号',
+            width: '80',
+            formatter: (row: any) => {
+                return (tableStore.table.params.pageNum - 1) * tableStore.table.params.pageSize + row.rowIndex + 1
+            }
+        },
+        { title: '装置名称', field: 'devTypeName', minWidth: '100' },
+        { title: '版本号', field: 'versionNo', minWidth: '100' },
+        { title: '协议版本', field: 'versionAgreement', minWidth: '100' },
+        { title: '版本日期', field: 'versionDate', minWidth: '100' },
+        { title: '装置系列', field: 'versionDate', minWidth: '100' },
+        { title: '装置型号', field: 'versionDate', minWidth: '100' },
+        { title: '供电公司', field: 'versionDate', minWidth: '100' },
+        { title: '变电站', field: 'versionDate', minWidth: '100' },
+        {
+            title: '状态',
+            field: 'status',
+            render: 'tag',
+            minWidth: '80',
+            custom: {
+                0: 'error',
+                1: 'success'
+            },
+            replaceValue: {
+                0: '禁用',
+                1: '启用'
+            }
+        },
+        { title: '更新时间', field: 'versionDate', minWidth: '100' },
+        { title: '修改人员', field: 'versionDate', minWidth: '100' },
+
+        {
+            title: '操作',
+            fixed: 'right',
+            align: 'center',
+            width: '120',
+            render: 'buttons',
+            buttons: [
+                {
+                    name: 'productSetting',
+                    title: '升级',
+                    type: 'primary',
+                    icon: 'el-icon-EditPen',
+                    render: 'basicButton'
+                },
+                {
+                    name: 'productSetting',
+                    title: '升级日志',
+                    type: 'primary',
+                    icon: 'el-icon-EditPen',
+                    render: 'basicButton'
+                }
+            ]
+        }
+    ],
+    loadCallback: () => {}
+})
+queryByCode('Device_Type').then(res => {
+    const id = res.data.id
+    queryByid(id).then(res1 => {
+        res1.data.map((item: any, index: any) => {
+            if (item.pid == id) {
+                res1.data.splice(index, 1)
+            }
+        })
+
+        DevTypeOptions.value = res1.data
+    })
+})
+// 版本维护
+const maintenance = () => {
+    push({
+        path: '/versionMaintenance'
+    })
+}
+
+tableStore.table.params.devType = ''
+provide('tableStore', tableStore)
+onMounted(() => {
+    tableHeaderRef.value.onComSearch()
+})
+</script>

src/views/govern/manage/realTime/index.vue

@@ -1,67 +1,134 @@
+<template>
+    <div class="default-main manage-realTime" :style="{ height: pageHeight.height }">
+        <DeviceTree @node-click="nodeClick" @init="" @deviceTypeChange=""></DeviceTree>
+        <div class="manage-realTime-right">
+            <div class="time-container">
+                <div>
+                    <div>系统时间：{{ realTime }}</div>
+                    <div>终端时间：{{ deviceTime }}</div>
+                </div>
+                <el-button icon="el-icon-RefreshLeft" type="primary" @click="synchronizeTime">对时</el-button>
+            </div>
+            <div :style="echartHeight" class="pl10 pr10">
+                <MyEchart :options="echartsData" />
+            </div>
+            <div class="pl10 pr10">
+                <el-table :data="tableData" border stripe :show-header="false" class="custom-table">
+                    <el-table-column prop="label1" />
+                    <el-table-column prop="label2" />
+                    <el-table-column prop="value1" />
+                    <el-table-column prop="label3" />
+                    <el-table-column prop="value2" />
+                    <el-table-column prop="label4" />
+                    <el-table-column prop="value3" />
+                </el-table>
+            </div>
+        </div>
+    </div>
+</template>
 <script setup lang="ts">
 import { ref, reactive } from 'vue'
 import { mainHeight } from '@/utils/layout'
 import DeviceTree from '@/components/tree/govern/deviceTree.vue'
-import { queryByCode, queryCsDictTree } from '@/api/system-boot/dictTree'
-import { getDevCapacity } from '@/api/cs-device-boot/capacity'
-import { queryCommonStatisticalByTime } from '@/api/cs-harmonic-boot/stable'
-import DatePicker from '@/components/form/datePicker/index.vue'
 import MyEchart from '@/components/echarts/MyEchart.vue'
-import { yMethod, completeTimeSeries } from '@/utils/echartMethod'
-import TableHeader from '@/components/table/header/index.vue'
-import { RefreshLeft } from '@element-plus/icons-vue'
 import { formatToDateTime } from '@/utils/dateUtil'
-
 defineOptions({
     name: 'govern/manage/realTime'
 })
 
 //页面属性
 const pageHeight = mainHeight(20)
-const echartHeight = (mainHeight(180))
+const echartHeight = mainHeight(180)
-
+const realTime = ref<string>('')
+const deviceTime = ref<string>('')
+const timer = ref<any>(null)
 const echartsData = ref<any>({
     title: {
         text: '终端性能'
     },
+    tooltip: {
+        axisPointer: {
+            type: 'cross',
+            label: {
+                color: '#fff',
+                fontSize: 16
+            }
+        },
+        textStyle: {
+            color: '#fff',
+            fontStyle: 'normal',
+            opacity: 0.35,
+            fontSize: 14
+        },
+        backgroundColor: 'rgba(0,0,0,0.55)',
+        borderWidth: 0
+    },
+
     legend: {
         bottom: 0,
         data: ['CPU1使用率', 'CPU2使用率', '内存使用率', '磁盘使用率']
     },
     xAxis: {
-        type: 'category',
+        type: 'time',
-        data: ['2023-05-01', '2023-05-02', '2023-05-03', '2023-05-04', '2023-05-05', '2023-05-06']
+        name: '时间',
+        axisLabel: {
+            formatter: {
+                day: '{MM}-{dd}',
+                month: '{MM}',
+                year: '{yyyy}'
+            }
+        }
     },
     yAxis: {
-        name: '使用率',
+        name: '%',
         type: 'value',
         min: 0,
-        max: 100,
+        max: 100
-        interval: 10,
-        axisLabel: {
-            formatter: '{value} %'
-        }
     },
     series: [
         {
             name: 'CPU1使用率',
             type: 'line',
-            data: [10, 52, 20, 33, 39, 89]
+            showSymbol: false,
+            smooth: true,
+            data: [
+                ['2025-01-01 08:00:00', 10],
+                ['2025-01-01 09:00:00', 10],
+                ['2025-01-01 010:00:00', 10]
+            ]
         },
         {
             name: 'CPU2使用率',
             type: 'line',
-            data: [9, 52, 10, 33, 69, 79]
+            showSymbol: false,
+            smooth: true,
+            data: [
+                ['2025-01-01 08:00:00', 11],
+                ['2025-01-01 09:00:00', 11],
+                ['2025-01-01 010:00:00', 11]
+            ]
         },
         {
             name: '内存使用率',
             type: 'line',
-            data: [10, 62, 80, 13, 29, 39]
+            showSymbol: false,
+            smooth: true,
+            data: [
+                ['2025-01-01 08:00:00', 12],
+                ['2025-01-01 09:00:00', 12],
+                ['2025-01-01 010:00:00', 12]
+            ]
         },
         {
             name: '磁盘使用率',
             type: 'line',
-            data: [50, 52, 40, 55, 49, 61]
+            showSymbol: false,
+            smooth: true,
+            data: [
+                ['2025-01-01 08:00:00', 13],
+                ['2025-01-01 09:00:00', 13],
+                ['2025-01-01 010:00:00', 13]
+            ]
         }
     ]
 })
@@ -125,38 +192,19 @@ const handleClose = () => {
 const synchronizeTime = async () => {
     console.log('对时')
 }
+onMounted(() => {
+    timer.value = setInterval(() => {
+        realTime.value = formatToDateTime(new Date())
+    }, 1000)
+})
+// 在组件卸载时清除定时器
+onUnmounted(() => {
+    if (timer.value) {
+        clearInterval(timer.value)
+        timer.value = null
+    }
+})
 </script>
-
-<template>
-    <div class="default-main manage-realTime" :style="{ height: pageHeight.height }">
-        <DeviceTree @node-click="nodeClick" @init="" @deviceTypeChange=""></DeviceTree>
-        <div class="manage-realTime-right">
-            <div class="time-container">
-                <span>系统时间：{{ formatToDateTime(new Date()) }}</span>
-                <span>终端时间：{{ formatToDateTime(new Date()) }}</span>
-                <el-button size="small" type="primary" @click="synchronizeTime">
-                    <RefreshLeft style="width: 15px;margin-right: 5px" />
-                    <span>对时</span>
-                </el-button>
-            </div>
-            <div :style="echartHeight" style="padding: 10px 20px 0 20px;">
-                <MyEchart :options="echartsData" />
-            </div>
-            <div style="padding: 0 20px 0 20px;">
-                <el-table :data="tableData" border :show-header="false" class="custom-table">
-                    <el-table-column prop="label1" />
-                    <el-table-column prop="label2" />
-                    <el-table-column prop="value1" />
-                    <el-table-column prop="label3" />
-                    <el-table-column prop="value2" />
-                    <el-table-column prop="label4" />
-                    <el-table-column prop="value3" />
-                </el-table>
-            </div>
-        </div>
-    </div>
-</template>
-
 <style scoped lang="scss">
 .manage-realTime {
     display: flex;
@@ -195,14 +243,11 @@ const synchronizeTime = async () => {
         }
 
         :deep(.custom-table .el-table__cell) {
-            border: 1px solid #dcdfe6;
+            border: 0.5px solid #dcdfe6;
         }
 
         /* 2. 第 1、2、4、6 列显示深色背景 */
-        :deep(.custom-table .el-table__row .el-table__cell:nth-child(1)),
+        :deep(.custom-table .el-table__row .el-table__cell:nth-child(1)) {
-        :deep(.custom-table .el-table__row .el-table__cell:nth-child(2)),
-        :deep(.custom-table .el-table__row .el-table__cell:nth-child(4)),
-        :deep(.custom-table .el-table__row .el-table__cell:nth-child(6)) {
             background-color: #f5f7fa;
             font-weight: bold;
         }
@@ -211,7 +256,7 @@ const synchronizeTime = async () => {
         :deep(.custom-table .el-table__row .el-table__cell:nth-child(3)),
         :deep(.custom-table .el-table__row .el-table__cell:nth-child(5)),
         :deep(.custom-table .el-table__row .el-table__cell:nth-child(7)) {
-            background-color: #fff;
+            // background-color: #fff;
         }
     }
 }

src/views/govern/sensitiveLoadMange/detail.vue

@@ -8,7 +8,7 @@
                 <el-input v-model.trim="form.name" placeholder="请输入敏感用户名称"></el-input>
             </el-form-item>
             <el-form-item label="敏感负荷类型" prop="loadType">
-                <el-select v-model.trim="form.loadType" filterable clearable placeholder="请选择数据分类">
+                <el-select v-model.trim="form.loadType" filterable clearable placeholder="请选择敏感负荷类型">
                     <el-option
                         v-for="item in DataTypeSelect"
                         :key="item.id"