336 lines
9.9 KiB
Vue
336 lines
9.9 KiB
Vue
<template>
|
||
<GiPageLayout>
|
||
<div class="version-upgrade-container">
|
||
<!-- 当前系统版本信息 -->
|
||
<a-card title="当前系统版本信息" class="mb-6">
|
||
<a-descriptions :column="2" bordered>
|
||
<a-descriptions-item label="系统名称">风电智能管理系统</a-descriptions-item>
|
||
<a-descriptions-item label="当前版本">v2.3.1</a-descriptions-item>
|
||
<a-descriptions-item label="发布日期">2024-02-15</a-descriptions-item>
|
||
<a-descriptions-item label="系统环境">生产环境</a-descriptions-item>
|
||
<a-descriptions-item label="数据库版本">MySQL 8.0.35</a-descriptions-item>
|
||
<a-descriptions-item label="运行时间">45天</a-descriptions-item>
|
||
<a-descriptions-item label="许可证状态">
|
||
<a-tag color="green">已激活</a-tag>
|
||
</a-descriptions-item>
|
||
<a-descriptions-item label="技术支持">
|
||
<a-tag color="blue">有效至 2024-12-31</a-tag>
|
||
</a-descriptions-item>
|
||
</a-descriptions>
|
||
</a-card>
|
||
|
||
<!-- 版本更新提醒 -->
|
||
<a-card title="版本更新提醒" class="mb-6">
|
||
<template #extra>
|
||
<a-space>
|
||
<a-button @click="checkForUpdates">
|
||
<template #icon><icon-refresh /></template>
|
||
检查更新
|
||
</a-button>
|
||
<a-button type="primary" @click="configureAlerts">
|
||
<template #icon><icon-settings /></template>
|
||
配置提醒
|
||
</a-button>
|
||
</a-space>
|
||
</template>
|
||
|
||
<div v-if="latestVersion">
|
||
<a-alert
|
||
type="info"
|
||
:title="`发现新版本 ${latestVersion.version}`"
|
||
:description="latestVersion.description"
|
||
show-icon
|
||
closable
|
||
class="mb-4"
|
||
>
|
||
<template #action>
|
||
<a-space>
|
||
<a-button size="small" @click="viewChangelog">查看更新日志</a-button>
|
||
<a-button size="small" type="primary" @click="startUpgrade">立即升级</a-button>
|
||
</a-space>
|
||
</template>
|
||
</a-alert>
|
||
</div>
|
||
|
||
<div v-else>
|
||
<a-empty description="当前已是最新版本" />
|
||
</div>
|
||
</a-card>
|
||
|
||
<!-- 版本历史记录 -->
|
||
<a-card title="版本历史记录" class="mb-6">
|
||
<GiTable
|
||
row-key="id"
|
||
:data="versionHistory"
|
||
:columns="versionColumns"
|
||
:pagination="false"
|
||
>
|
||
<!-- 版本状态 -->
|
||
<template #status="{ record }">
|
||
<a-tag :color="getVersionStatusColor(record.status)">
|
||
{{ getVersionStatusText(record.status) }}
|
||
</a-tag>
|
||
</template>
|
||
|
||
<!-- 版本类型 -->
|
||
<template #versionType="{ record }">
|
||
<a-tag :color="getVersionTypeColor(record.versionType)">
|
||
{{ record.versionType }}
|
||
</a-tag>
|
||
</template>
|
||
|
||
<!-- 操作 -->
|
||
<template #action="{ record }">
|
||
<a-space>
|
||
<a-link @click="viewVersionDetail(record)">详情</a-link>
|
||
<a-link @click="downloadVersion(record)">下载</a-link>
|
||
<a-link
|
||
@click="rollbackVersion(record)"
|
||
v-if="record.status === 'installed' && record.id !== currentVersionId"
|
||
>
|
||
回滚
|
||
</a-link>
|
||
</a-space>
|
||
</template>
|
||
</GiTable>
|
||
</a-card>
|
||
|
||
<!-- 升级配置 -->
|
||
<a-card title="升级配置">
|
||
<a-form :model="upgradeConfig" layout="vertical">
|
||
<a-row :gutter="16">
|
||
<a-col :span="12">
|
||
<a-form-item label="自动检查更新">
|
||
<a-switch v-model="upgradeConfig.autoCheck" />
|
||
<div class="text-gray-500 text-sm mt-1">启用后系统将定期自动检查版本更新</div>
|
||
</a-form-item>
|
||
</a-col>
|
||
<a-col :span="12">
|
||
<a-form-item label="检查频率">
|
||
<a-select v-model="upgradeConfig.checkFrequency" :disabled="!upgradeConfig.autoCheck">
|
||
<a-option value="daily">每日</a-option>
|
||
<a-option value="weekly">每周</a-option>
|
||
<a-option value="monthly">每月</a-option>
|
||
</a-select>
|
||
</a-form-item>
|
||
</a-col>
|
||
</a-row>
|
||
|
||
<a-row :gutter="16">
|
||
<a-col :span="12">
|
||
<a-form-item label="升级提醒方式">
|
||
<a-checkbox-group v-model="upgradeConfig.notificationMethods">
|
||
<a-checkbox value="email">邮件通知</a-checkbox>
|
||
<a-checkbox value="sms">短信通知</a-checkbox>
|
||
<a-checkbox value="system">系统通知</a-checkbox>
|
||
</a-checkbox-group>
|
||
</a-form-item>
|
||
</a-col>
|
||
<a-col :span="12">
|
||
<a-form-item label="维护窗口">
|
||
<a-time-range-picker
|
||
v-model="upgradeConfig.maintenanceWindow"
|
||
format="HH:mm"
|
||
/>
|
||
<div class="text-gray-500 text-sm mt-1">系统升级的推荐时间窗口</div>
|
||
</a-form-item>
|
||
</a-col>
|
||
</a-row>
|
||
|
||
<a-form-item>
|
||
<a-space>
|
||
<a-button type="primary" @click="saveUpgradeConfig">保存配置</a-button>
|
||
<a-button @click="resetUpgradeConfig">重置</a-button>
|
||
</a-space>
|
||
</a-form-item>
|
||
</a-form>
|
||
</a-card>
|
||
</div>
|
||
</GiPageLayout>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { ref, reactive } from 'vue'
|
||
import { Message } from '@arco-design/web-vue'
|
||
import type { TableColumnData } from '@arco-design/web-vue'
|
||
|
||
// 当前版本ID
|
||
const currentVersionId = ref(3)
|
||
|
||
// 最新版本信息
|
||
const latestVersion = ref({
|
||
version: 'v2.4.0',
|
||
description: '新增项目管理模块，优化系统性能，修复已知bug',
|
||
releaseDate: '2024-03-20',
|
||
size: '156.8 MB'
|
||
})
|
||
|
||
// 版本历史记录
|
||
const versionHistory = ref([
|
||
{
|
||
id: 1,
|
||
version: 'v2.1.0',
|
||
versionType: '功能版本',
|
||
releaseDate: '2023-12-15',
|
||
installDate: '2023-12-20',
|
||
status: 'archived',
|
||
description: '初始版本发布，包含基础功能模块',
|
||
size: '128.5 MB'
|
||
},
|
||
{
|
||
id: 2,
|
||
version: 'v2.2.0',
|
||
versionType: '功能版本',
|
||
releaseDate: '2024-01-15',
|
||
installDate: '2024-01-20',
|
||
status: 'archived',
|
||
description: '新增用户管理和权限控制功能',
|
||
size: '142.3 MB'
|
||
},
|
||
{
|
||
id: 3,
|
||
version: 'v2.3.1',
|
||
versionType: '补丁版本',
|
||
releaseDate: '2024-02-15',
|
||
installDate: '2024-02-20',
|
||
status: 'current',
|
||
description: '修复安全漏洞，优化界面交互',
|
||
size: '145.7 MB'
|
||
},
|
||
{
|
||
id: 4,
|
||
version: 'v2.4.0',
|
||
versionType: '功能版本',
|
||
releaseDate: '2024-03-20',
|
||
installDate: '',
|
||
status: 'available',
|
||
description: '新增项目管理模块，优化系统性能',
|
||
size: '156.8 MB'
|
||
}
|
||
])
|
||
|
||
// 版本表格列配置
|
||
const versionColumns: TableColumnData[] = [
|
||
{ title: '版本号', dataIndex: 'version', width: 120 },
|
||
{ title: '版本类型', dataIndex: 'versionType', slotName: 'versionType', width: 120 },
|
||
{ title: '发布日期', dataIndex: 'releaseDate', width: 120 },
|
||
{ title: '安装日期', dataIndex: 'installDate', width: 120 },
|
||
{ title: '状态', dataIndex: 'status', slotName: 'status', width: 100 },
|
||
{ title: '文件大小', dataIndex: 'size', width: 100 },
|
||
{ title: '描述', dataIndex: 'description', width: 300, ellipsis: true, tooltip: true },
|
||
{ title: '操作', slotName: 'action', width: 200 }
|
||
]
|
||
|
||
// 升级配置
|
||
const upgradeConfig = reactive({
|
||
autoCheck: true,
|
||
checkFrequency: 'weekly',
|
||
notificationMethods: ['email', 'system'],
|
||
maintenanceWindow: ['02:00', '06:00']
|
||
})
|
||
|
||
// 获取版本状态颜色
|
||
const getVersionStatusColor = (status: string) => {
|
||
const colorMap: Record<string, string> = {
|
||
'current': 'green',
|
||
'available': 'blue',
|
||
'archived': 'gray',
|
||
'deprecated': 'red'
|
||
}
|
||
return colorMap[status] || 'gray'
|
||
}
|
||
|
||
// 获取版本状态文本
|
||
const getVersionStatusText = (status: string) => {
|
||
const textMap: Record<string, string> = {
|
||
'current': '当前版本',
|
||
'available': '可升级',
|
||
'archived': '已归档',
|
||
'deprecated': '已弃用'
|
||
}
|
||
return textMap[status] || status
|
||
}
|
||
|
||
// 获取版本类型颜色
|
||
const getVersionTypeColor = (type: string) => {
|
||
const colorMap: Record<string, string> = {
|
||
'主要版本': 'red',
|
||
'功能版本': 'blue',
|
||
'补丁版本': 'green',
|
||
'热修复': 'orange'
|
||
}
|
||
return colorMap[type] || 'gray'
|
||
}
|
||
|
||
// 操作方法
|
||
const checkForUpdates = () => {
|
||
Message.info('正在检查更新...')
|
||
setTimeout(() => {
|
||
Message.success('检查完成，发现新版本')
|
||
}, 2000)
|
||
}
|
||
|
||
const configureAlerts = () => {
|
||
Message.info('配置提醒功能开发中...')
|
||
}
|
||
|
||
const viewChangelog = () => {
|
||
Message.info('查看更新日志功能开发中...')
|
||
}
|
||
|
||
const startUpgrade = () => {
|
||
Message.info('立即升级功能开发中...')
|
||
}
|
||
|
||
const viewVersionDetail = (version: any) => {
|
||
Message.info(`查看版本详情: ${version.version}`)
|
||
}
|
||
|
||
const downloadVersion = (version: any) => {
|
||
Message.info(`下载版本: ${version.version}`)
|
||
}
|
||
|
||
const rollbackVersion = (version: any) => {
|
||
Message.info(`回滚到版本: ${version.version}`)
|
||
}
|
||
|
||
const saveUpgradeConfig = () => {
|
||
Message.success('升级配置已保存')
|
||
}
|
||
|
||
const resetUpgradeConfig = () => {
|
||
Object.assign(upgradeConfig, {
|
||
autoCheck: true,
|
||
checkFrequency: 'weekly',
|
||
notificationMethods: ['email', 'system'],
|
||
maintenanceWindow: ['02:00', '06:00']
|
||
})
|
||
Message.success('升级配置已重置')
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.version-upgrade-container {
|
||
padding: 16px;
|
||
}
|
||
|
||
.mb-6 {
|
||
margin-bottom: 24px;
|
||
}
|
||
|
||
.mb-4 {
|
||
margin-bottom: 16px;
|
||
}
|
||
|
||
.text-gray-500 {
|
||
color: #6b7280;
|
||
}
|
||
|
||
.text-sm {
|
||
font-size: 14px;
|
||
}
|
||
|
||
.mt-1 {
|
||
margin-top: 4px;
|
||
}
|
||
</style> |