zant-admin 2.0.2 → 2.0.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.editorconfig +6 -0
- package/.env.development +3 -0
- package/.env.production +1 -0
- package/.env.test +1 -0
- package/.gitignore +36 -0
- package/.prettierrc.json +9 -0
- package/README.en.md +461 -272
- package/README.md +4 -3
- package/bin/cli.js +1 -1
- package/eslint.config.js +30 -0
- package/index.html +13 -0
- package/jsconfig.json +8 -0
- package/package.json +11 -3
- package/src/App.vue +16 -16
- package/src/api/methods/logError.js +8 -8
- package/src/api/methods/logOperation.js +8 -8
- package/src/api/methods/login.js +6 -6
- package/src/api/methods/quartz.js +36 -36
- package/src/api/methods/region.js +16 -16
- package/src/api/methods/sysAccount.js +29 -29
- package/src/api/methods/sysDict.js +29 -29
- package/src/api/methods/sysDictItem.js +26 -26
- package/src/api/methods/sysMenu.js +42 -42
- package/src/api/methods/sysRole.js +35 -35
- package/src/api/methods/sysUser.js +25 -25
- package/src/api/methods/system.js +15 -15
- package/src/api/request.js +225 -225
- package/src/assets/css/zcui.css +1023 -1023
- package/src/components/IconPicker.vue +351 -351
- package/src/components/MainPage.vue +838 -838
- package/src/components/details/logErrorDetails.vue +58 -58
- package/src/components/details/logOperationDetails.vue +76 -76
- package/src/components/edit/QuartzEdit.vue +221 -221
- package/src/components/edit/SysAccountEdit.vue +185 -185
- package/src/components/edit/SysDictEdit.vue +116 -116
- package/src/components/edit/SysDictItemEdit.vue +136 -136
- package/src/components/edit/SysRoleEdit.vue +111 -111
- package/src/config/index.js +74 -74
- package/src/directives/permission.js +49 -49
- package/src/main.js +37 -37
- package/src/stores/config.js +43 -43
- package/src/stores/dict.js +33 -33
- package/src/stores/menu.js +81 -81
- package/src/stores/user.js +21 -21
- package/src/utils/baseEcharts.js +661 -661
- package/src/utils/dictTemplate.js +26 -26
- package/src/utils/regionUtils.js +173 -173
- package/src/utils/useFormCRUD.js +59 -59
- package/src/views/baiscstatis/center.vue +474 -474
- package/src/views/baiscstatis/iframePage.vue +29 -29
- package/src/views/baiscstatis/notFound.vue +192 -192
- package/src/views/console.vue +821 -821
- package/src/views/demo/button.vue +269 -269
- package/src/views/demo/importexport.vue +119 -119
- package/src/views/demo/region.vue +322 -322
- package/src/views/demo/statistics.vue +214 -214
- package/src/views/home.vue +6 -6
- package/src/views/operations/log/logError.vue +78 -78
- package/src/views/operations/log/logLogin.vue +66 -66
- package/src/views/operations/log/logOperation.vue +103 -103
- package/src/views/operations/log/logQuartz.vue +56 -56
- package/src/views/operations/quartz.vue +179 -179
- package/src/views/operations/serviceMonitoring.vue +134 -134
- package/src/views/system/sysAccount.vue +128 -128
- package/src/views/system/sysDict.vue +159 -159
- package/src/views/system/sysDictItem.vue +118 -118
- package/src/views/system/sysMenu.vue +225 -225
- package/src/views/system/sysRole.vue +207 -207
- package/vite.config.js +33 -0
|
@@ -1,179 +1,179 @@
|
|
|
1
|
-
<template>
|
|
2
|
-
<form-table
|
|
3
|
-
:formState="formState"
|
|
4
|
-
:columns="columns"
|
|
5
|
-
modulePath="quartz"
|
|
6
|
-
:permissionModulePath="permissionModulePath"
|
|
7
|
-
@edit="edit"
|
|
8
|
-
ftableDeleteAction="deleteTask"
|
|
9
|
-
ref="childRef"
|
|
10
|
-
>
|
|
11
|
-
<template #custom-status="{ record }">
|
|
12
|
-
<span class="" v-if="record.status == 0">暂停</span>
|
|
13
|
-
<span class="text-color-primary" v-if="record.status == 1">开启</span>
|
|
14
|
-
<span class="text-color-success" v-if="record.status == 2">运行中</span>
|
|
15
|
-
</template>
|
|
16
|
-
<template #custom-taskType="{ record }">
|
|
17
|
-
<span class="" v-if="record.taskType == 0">DLL</span>
|
|
18
|
-
<span class="" v-if="record.taskType == 1">API</span>
|
|
19
|
-
</template>
|
|
20
|
-
<template #custom-operation="{ record }">
|
|
21
|
-
<a-divider type="vertical" />
|
|
22
|
-
<a-dropdown class="">
|
|
23
|
-
<a @click.prevent> 更多 <DownOutlined /></a>
|
|
24
|
-
<template #overlay>
|
|
25
|
-
<a-menu @click="e => moreClick(e, record.id)">
|
|
26
|
-
<span v-permission="permissionModulePath + ':resumeTask'">
|
|
27
|
-
<a-menu-item key="1">
|
|
28
|
-
<a @click="empower(record)">恢复任务</a>
|
|
29
|
-
</a-menu-item>
|
|
30
|
-
</span>
|
|
31
|
-
<span v-permission="permissionModulePath + ':pauseTask'">
|
|
32
|
-
<a-menu-item key="2">
|
|
33
|
-
<a @click="empower(record)">暂停任务</a>
|
|
34
|
-
</a-menu-item>
|
|
35
|
-
</span>
|
|
36
|
-
<span v-permission="permissionModulePath + ':executeTask'">
|
|
37
|
-
<a-menu-item key="3">
|
|
38
|
-
<a @click="empower(record)">立即执行</a>
|
|
39
|
-
</a-menu-item>
|
|
40
|
-
</span>
|
|
41
|
-
<span v-permission="permissionModulePath + ':viewLog'">
|
|
42
|
-
<a-menu-item key="4">
|
|
43
|
-
<a @click="empower(record)">执行记录</a>
|
|
44
|
-
</a-menu-item>
|
|
45
|
-
</span>
|
|
46
|
-
</a-menu>
|
|
47
|
-
</template>
|
|
48
|
-
</a-dropdown>
|
|
49
|
-
</template>
|
|
50
|
-
</form-table>
|
|
51
|
-
<!-- 新增修改 -->
|
|
52
|
-
<QuartzEdit
|
|
53
|
-
:open="editopen"
|
|
54
|
-
@close="editopen = false"
|
|
55
|
-
@updateData="refreshData"
|
|
56
|
-
ref="editRef"
|
|
57
|
-
>
|
|
58
|
-
</QuartzEdit>
|
|
59
|
-
|
|
60
|
-
<a-modal
|
|
61
|
-
v-model:open="quartzLogopen"
|
|
62
|
-
width="60%"
|
|
63
|
-
wrap-class-name="full-modal"
|
|
64
|
-
title="执行记录"
|
|
65
|
-
:footer="null"
|
|
66
|
-
:destroyOnClose="true"
|
|
67
|
-
>
|
|
68
|
-
<logQuartz :recordwhere="recordwhere"> </logQuartz>
|
|
69
|
-
</a-modal>
|
|
70
|
-
</template>
|
|
71
|
-
<script setup>
|
|
72
|
-
import { ref } from 'vue'
|
|
73
|
-
import FormTable from '@/components/FormTable.vue'
|
|
74
|
-
import QuartzEdit from '@/components/edit/QuartzEdit.vue'
|
|
75
|
-
import logQuartz from '@/views/operations/log/logQuartz.vue'
|
|
76
|
-
import quartz from '@/api/methods/quartz'
|
|
77
|
-
import { message } from 'ant-design-vue'
|
|
78
|
-
// 权限模块路径
|
|
79
|
-
const permissionModulePath = ref('operations:quartz')
|
|
80
|
-
|
|
81
|
-
const formState = ref({
|
|
82
|
-
name: { label: '任务', value: '', type: 'text' },
|
|
83
|
-
})
|
|
84
|
-
const columns = ref([
|
|
85
|
-
{
|
|
86
|
-
title: '序号',
|
|
87
|
-
key: 'num',
|
|
88
|
-
width: 80,
|
|
89
|
-
},
|
|
90
|
-
{
|
|
91
|
-
title: '任务',
|
|
92
|
-
dataIndex: 'name',
|
|
93
|
-
key: 'name',
|
|
94
|
-
},
|
|
95
|
-
{
|
|
96
|
-
title: '分组',
|
|
97
|
-
dataIndex: 'jobGroup',
|
|
98
|
-
key: 'jobGroup',
|
|
99
|
-
},
|
|
100
|
-
{
|
|
101
|
-
title: 'Cron',
|
|
102
|
-
dataIndex: 'cron',
|
|
103
|
-
key: 'cron',
|
|
104
|
-
},
|
|
105
|
-
{
|
|
106
|
-
title: '任务类型',
|
|
107
|
-
dataIndex: 'taskType',
|
|
108
|
-
key: 'taskType',
|
|
109
|
-
},
|
|
110
|
-
{
|
|
111
|
-
title: '运行状态',
|
|
112
|
-
dataIndex: 'status',
|
|
113
|
-
key: 'status',
|
|
114
|
-
},
|
|
115
|
-
{
|
|
116
|
-
title: '最后一次运行时间',
|
|
117
|
-
dataIndex: 'lastRunTime',
|
|
118
|
-
key: 'lastRunTime',
|
|
119
|
-
},
|
|
120
|
-
{
|
|
121
|
-
title: '任务描述',
|
|
122
|
-
key: 'remark',
|
|
123
|
-
dataIndex: 'remark',
|
|
124
|
-
},
|
|
125
|
-
{
|
|
126
|
-
title: '操作',
|
|
127
|
-
key: 'operation',
|
|
128
|
-
fixed: 'right',
|
|
129
|
-
width: 200,
|
|
130
|
-
},
|
|
131
|
-
])
|
|
132
|
-
const quartzLogopen = ref(false)
|
|
133
|
-
const recordwhere = ref({})
|
|
134
|
-
// 表格更多点击事件
|
|
135
|
-
const moreClick = (e, id) => {
|
|
136
|
-
switch (e.key) {
|
|
137
|
-
case '1':
|
|
138
|
-
quartz.resumeTask({ id }).then(() => {
|
|
139
|
-
message.success('成功', 1, () => {
|
|
140
|
-
childRef.value.tableLoad()
|
|
141
|
-
})
|
|
142
|
-
})
|
|
143
|
-
break
|
|
144
|
-
case '2':
|
|
145
|
-
quartz.pauseTask({ id }).then(() => {
|
|
146
|
-
message.success('成功', 1, () => {
|
|
147
|
-
childRef.value.tableLoad()
|
|
148
|
-
})
|
|
149
|
-
})
|
|
150
|
-
break
|
|
151
|
-
case '3':
|
|
152
|
-
quartz.triggerTask({ id }).then(() => {
|
|
153
|
-
message.success('成功', 1, () => {
|
|
154
|
-
childRef.value.tableLoad()
|
|
155
|
-
})
|
|
156
|
-
})
|
|
157
|
-
break
|
|
158
|
-
case '4':
|
|
159
|
-
recordwhere.value = { quartzTaskId: id }
|
|
160
|
-
quartzLogopen.value = true
|
|
161
|
-
break
|
|
162
|
-
default:
|
|
163
|
-
break
|
|
164
|
-
}
|
|
165
|
-
}
|
|
166
|
-
//编辑
|
|
167
|
-
const editopen = ref(false)
|
|
168
|
-
const editRef = ref(null)
|
|
169
|
-
const edit = record => {
|
|
170
|
-
editRef.value.init(record.id)
|
|
171
|
-
editopen.value = true
|
|
172
|
-
}
|
|
173
|
-
const childRef = ref(null)
|
|
174
|
-
const refreshData = () => {
|
|
175
|
-
childRef.value.tableLoad()
|
|
176
|
-
}
|
|
177
|
-
</script>
|
|
178
|
-
|
|
179
|
-
<style></style>
|
|
1
|
+
<template>
|
|
2
|
+
<form-table
|
|
3
|
+
:formState="formState"
|
|
4
|
+
:columns="columns"
|
|
5
|
+
modulePath="quartz"
|
|
6
|
+
:permissionModulePath="permissionModulePath"
|
|
7
|
+
@edit="edit"
|
|
8
|
+
ftableDeleteAction="deleteTask"
|
|
9
|
+
ref="childRef"
|
|
10
|
+
>
|
|
11
|
+
<template #custom-status="{ record }">
|
|
12
|
+
<span class="" v-if="record.status == 0">暂停</span>
|
|
13
|
+
<span class="text-color-primary" v-if="record.status == 1">开启</span>
|
|
14
|
+
<span class="text-color-success" v-if="record.status == 2">运行中</span>
|
|
15
|
+
</template>
|
|
16
|
+
<template #custom-taskType="{ record }">
|
|
17
|
+
<span class="" v-if="record.taskType == 0">DLL</span>
|
|
18
|
+
<span class="" v-if="record.taskType == 1">API</span>
|
|
19
|
+
</template>
|
|
20
|
+
<template #custom-operation="{ record }">
|
|
21
|
+
<a-divider type="vertical" />
|
|
22
|
+
<a-dropdown class="">
|
|
23
|
+
<a @click.prevent> 更多 <DownOutlined /></a>
|
|
24
|
+
<template #overlay>
|
|
25
|
+
<a-menu @click="e => moreClick(e, record.id)">
|
|
26
|
+
<span v-permission="permissionModulePath + ':resumeTask'">
|
|
27
|
+
<a-menu-item key="1">
|
|
28
|
+
<a @click="empower(record)">恢复任务</a>
|
|
29
|
+
</a-menu-item>
|
|
30
|
+
</span>
|
|
31
|
+
<span v-permission="permissionModulePath + ':pauseTask'">
|
|
32
|
+
<a-menu-item key="2">
|
|
33
|
+
<a @click="empower(record)">暂停任务</a>
|
|
34
|
+
</a-menu-item>
|
|
35
|
+
</span>
|
|
36
|
+
<span v-permission="permissionModulePath + ':executeTask'">
|
|
37
|
+
<a-menu-item key="3">
|
|
38
|
+
<a @click="empower(record)">立即执行</a>
|
|
39
|
+
</a-menu-item>
|
|
40
|
+
</span>
|
|
41
|
+
<span v-permission="permissionModulePath + ':viewLog'">
|
|
42
|
+
<a-menu-item key="4">
|
|
43
|
+
<a @click="empower(record)">执行记录</a>
|
|
44
|
+
</a-menu-item>
|
|
45
|
+
</span>
|
|
46
|
+
</a-menu>
|
|
47
|
+
</template>
|
|
48
|
+
</a-dropdown>
|
|
49
|
+
</template>
|
|
50
|
+
</form-table>
|
|
51
|
+
<!-- 新增修改 -->
|
|
52
|
+
<QuartzEdit
|
|
53
|
+
:open="editopen"
|
|
54
|
+
@close="editopen = false"
|
|
55
|
+
@updateData="refreshData"
|
|
56
|
+
ref="editRef"
|
|
57
|
+
>
|
|
58
|
+
</QuartzEdit>
|
|
59
|
+
|
|
60
|
+
<a-modal
|
|
61
|
+
v-model:open="quartzLogopen"
|
|
62
|
+
width="60%"
|
|
63
|
+
wrap-class-name="full-modal"
|
|
64
|
+
title="执行记录"
|
|
65
|
+
:footer="null"
|
|
66
|
+
:destroyOnClose="true"
|
|
67
|
+
>
|
|
68
|
+
<logQuartz :recordwhere="recordwhere"> </logQuartz>
|
|
69
|
+
</a-modal>
|
|
70
|
+
</template>
|
|
71
|
+
<script setup>
|
|
72
|
+
import { ref } from 'vue'
|
|
73
|
+
import FormTable from '@/components/FormTable.vue'
|
|
74
|
+
import QuartzEdit from '@/components/edit/QuartzEdit.vue'
|
|
75
|
+
import logQuartz from '@/views/operations/log/logQuartz.vue'
|
|
76
|
+
import quartz from '@/api/methods/quartz'
|
|
77
|
+
import { message } from 'ant-design-vue'
|
|
78
|
+
// 权限模块路径
|
|
79
|
+
const permissionModulePath = ref('operations:quartz')
|
|
80
|
+
|
|
81
|
+
const formState = ref({
|
|
82
|
+
name: { label: '任务', value: '', type: 'text' },
|
|
83
|
+
})
|
|
84
|
+
const columns = ref([
|
|
85
|
+
{
|
|
86
|
+
title: '序号',
|
|
87
|
+
key: 'num',
|
|
88
|
+
width: 80,
|
|
89
|
+
},
|
|
90
|
+
{
|
|
91
|
+
title: '任务',
|
|
92
|
+
dataIndex: 'name',
|
|
93
|
+
key: 'name',
|
|
94
|
+
},
|
|
95
|
+
{
|
|
96
|
+
title: '分组',
|
|
97
|
+
dataIndex: 'jobGroup',
|
|
98
|
+
key: 'jobGroup',
|
|
99
|
+
},
|
|
100
|
+
{
|
|
101
|
+
title: 'Cron',
|
|
102
|
+
dataIndex: 'cron',
|
|
103
|
+
key: 'cron',
|
|
104
|
+
},
|
|
105
|
+
{
|
|
106
|
+
title: '任务类型',
|
|
107
|
+
dataIndex: 'taskType',
|
|
108
|
+
key: 'taskType',
|
|
109
|
+
},
|
|
110
|
+
{
|
|
111
|
+
title: '运行状态',
|
|
112
|
+
dataIndex: 'status',
|
|
113
|
+
key: 'status',
|
|
114
|
+
},
|
|
115
|
+
{
|
|
116
|
+
title: '最后一次运行时间',
|
|
117
|
+
dataIndex: 'lastRunTime',
|
|
118
|
+
key: 'lastRunTime',
|
|
119
|
+
},
|
|
120
|
+
{
|
|
121
|
+
title: '任务描述',
|
|
122
|
+
key: 'remark',
|
|
123
|
+
dataIndex: 'remark',
|
|
124
|
+
},
|
|
125
|
+
{
|
|
126
|
+
title: '操作',
|
|
127
|
+
key: 'operation',
|
|
128
|
+
fixed: 'right',
|
|
129
|
+
width: 200,
|
|
130
|
+
},
|
|
131
|
+
])
|
|
132
|
+
const quartzLogopen = ref(false)
|
|
133
|
+
const recordwhere = ref({})
|
|
134
|
+
// 表格更多点击事件
|
|
135
|
+
const moreClick = (e, id) => {
|
|
136
|
+
switch (e.key) {
|
|
137
|
+
case '1':
|
|
138
|
+
quartz.resumeTask({ id }).then(() => {
|
|
139
|
+
message.success('成功', 1, () => {
|
|
140
|
+
childRef.value.tableLoad()
|
|
141
|
+
})
|
|
142
|
+
})
|
|
143
|
+
break
|
|
144
|
+
case '2':
|
|
145
|
+
quartz.pauseTask({ id }).then(() => {
|
|
146
|
+
message.success('成功', 1, () => {
|
|
147
|
+
childRef.value.tableLoad()
|
|
148
|
+
})
|
|
149
|
+
})
|
|
150
|
+
break
|
|
151
|
+
case '3':
|
|
152
|
+
quartz.triggerTask({ id }).then(() => {
|
|
153
|
+
message.success('成功', 1, () => {
|
|
154
|
+
childRef.value.tableLoad()
|
|
155
|
+
})
|
|
156
|
+
})
|
|
157
|
+
break
|
|
158
|
+
case '4':
|
|
159
|
+
recordwhere.value = { quartzTaskId: id }
|
|
160
|
+
quartzLogopen.value = true
|
|
161
|
+
break
|
|
162
|
+
default:
|
|
163
|
+
break
|
|
164
|
+
}
|
|
165
|
+
}
|
|
166
|
+
//编辑
|
|
167
|
+
const editopen = ref(false)
|
|
168
|
+
const editRef = ref(null)
|
|
169
|
+
const edit = record => {
|
|
170
|
+
editRef.value.init(record.id)
|
|
171
|
+
editopen.value = true
|
|
172
|
+
}
|
|
173
|
+
const childRef = ref(null)
|
|
174
|
+
const refreshData = () => {
|
|
175
|
+
childRef.value.tableLoad()
|
|
176
|
+
}
|
|
177
|
+
</script>
|
|
178
|
+
|
|
179
|
+
<style></style>
|
|
@@ -1,134 +1,134 @@
|
|
|
1
|
-
<template>
|
|
2
|
-
<a-row :gutter="16">
|
|
3
|
-
<a-col :span="12">
|
|
4
|
-
<a-card :bordered="false" :loading="loading">
|
|
5
|
-
<template #title
|
|
6
|
-
><DesktopOutlined :style="{ color: '#1677ff' }" /> CPU</template
|
|
7
|
-
>
|
|
8
|
-
<div class="flex-row text-font-bold">
|
|
9
|
-
<div class="flex-item">属性</div>
|
|
10
|
-
<div class="flex-item">值</div>
|
|
11
|
-
</div>
|
|
12
|
-
<hr />
|
|
13
|
-
<div class="flex-row">
|
|
14
|
-
<div class="flex-item">核心数</div>
|
|
15
|
-
<div class="flex-item">{{ data.processorCount }}</div>
|
|
16
|
-
</div>
|
|
17
|
-
<hr />
|
|
18
|
-
<div class="flex-row">
|
|
19
|
-
<div class="flex-item">用户使用率</div>
|
|
20
|
-
<div class="flex-item">{{ data.processorCount }}</div>
|
|
21
|
-
</div>
|
|
22
|
-
<hr />
|
|
23
|
-
<div class="flex-row">
|
|
24
|
-
<div class="flex-item">系统使用率</div>
|
|
25
|
-
<div class="flex-item">{{ data.cpuLoad }}</div>
|
|
26
|
-
</div>
|
|
27
|
-
<hr />
|
|
28
|
-
<div class="flex-row">
|
|
29
|
-
<div class="flex-item">当前空闲率</div>
|
|
30
|
-
<div class="flex-item">{{ data.cpuSurplusLoad }}</div>
|
|
31
|
-
</div>
|
|
32
|
-
</a-card>
|
|
33
|
-
</a-col>
|
|
34
|
-
<a-col :span="12">
|
|
35
|
-
<a-card :bordered="false" :loading="loading">
|
|
36
|
-
<template #title
|
|
37
|
-
><DatabaseOutlined :style="{ color: '#1677ff' }" /> 内存</template
|
|
38
|
-
>
|
|
39
|
-
<div class="flex-row text-font-bold">
|
|
40
|
-
<div class="flex-item">属性</div>
|
|
41
|
-
<div class="flex-item">值</div>
|
|
42
|
-
</div>
|
|
43
|
-
<hr />
|
|
44
|
-
<div class="flex-row">
|
|
45
|
-
<div class="flex-item">总内存</div>
|
|
46
|
-
<div class="flex-item">{{ data.physicalMemory }}</div>
|
|
47
|
-
</div>
|
|
48
|
-
<hr />
|
|
49
|
-
<div class="flex-row">
|
|
50
|
-
<div class="flex-item">已用内存</div>
|
|
51
|
-
<div class="flex-item">{{ data.memoryUsed }}</div>
|
|
52
|
-
</div>
|
|
53
|
-
<hr />
|
|
54
|
-
<div class="flex-row">
|
|
55
|
-
<div class="flex-item">剩余内存</div>
|
|
56
|
-
<div class="flex-item">{{ data.memoryAvailable }}</div>
|
|
57
|
-
</div>
|
|
58
|
-
<hr />
|
|
59
|
-
<div class="flex-row">
|
|
60
|
-
<div class="flex-item">使用率</div>
|
|
61
|
-
<div class="flex-item">{{ data.memoryUsage }}</div>
|
|
62
|
-
</div>
|
|
63
|
-
</a-card>
|
|
64
|
-
</a-col>
|
|
65
|
-
</a-row>
|
|
66
|
-
<a-card :bordered="false" class="margin-top-10" :loading="loading">
|
|
67
|
-
<template #title
|
|
68
|
-
><DesktopOutlined :style="{ color: '#1677ff' }" /> 服务器信息</template
|
|
69
|
-
>
|
|
70
|
-
<div class="flex-row text-font-bold">
|
|
71
|
-
<div class="flex-item">服务器名称</div>
|
|
72
|
-
<div class="flex-item">服务器 IP</div>
|
|
73
|
-
<div class="flex-item">操作系统</div>
|
|
74
|
-
<div class="flex-item">系统架构</div>
|
|
75
|
-
</div>
|
|
76
|
-
<hr />
|
|
77
|
-
<div class="flex-row">
|
|
78
|
-
<div class="flex-item">{{ data.hostName }}</div>
|
|
79
|
-
<div class="flex-item">{{ data.stringIP }}</div>
|
|
80
|
-
<div class="flex-item">{{ data.osDescription }}</div>
|
|
81
|
-
<div class="flex-item">{{ data.osArchitecture }}</div>
|
|
82
|
-
</div>
|
|
83
|
-
</a-card>
|
|
84
|
-
<a-card :bordered="false" class="margin-top-10" :loading="loading">
|
|
85
|
-
<template #title
|
|
86
|
-
><DesktopOutlined :style="{ color: '#1677ff' }" /> 磁盘状态</template
|
|
87
|
-
>
|
|
88
|
-
<div class="flex-row text-font-bold">
|
|
89
|
-
<div class="flex-item">盘符</div>
|
|
90
|
-
<div class="flex-item">总大小</div>
|
|
91
|
-
<div class="flex-item">已用大小</div>
|
|
92
|
-
<div class="flex-item">可用大小</div>
|
|
93
|
-
<div class="flex-item">已用百分比</div>
|
|
94
|
-
</div>
|
|
95
|
-
<hr />
|
|
96
|
-
<template v-for="(item, index) in data.disks" v-bind:key="index">
|
|
97
|
-
<div class="flex-row">
|
|
98
|
-
<div class="flex-item">{{ item.driveletter }}</div>
|
|
99
|
-
<div class="flex-item">{{ item.totalsize }}</div>
|
|
100
|
-
<div class="flex-item">{{ item.usedSize }}</div>
|
|
101
|
-
<div class="flex-item">{{ item.availableSize }}</div>
|
|
102
|
-
<div class="flex-item">{{ item.percentSize }}</div>
|
|
103
|
-
</div>
|
|
104
|
-
<hr />
|
|
105
|
-
</template>
|
|
106
|
-
</a-card>
|
|
107
|
-
</template>
|
|
108
|
-
<script setup>
|
|
109
|
-
import system from '@/api/methods/system'
|
|
110
|
-
import { ref } from 'vue'
|
|
111
|
-
const loading = ref(true)
|
|
112
|
-
const data = ref({})
|
|
113
|
-
const init = () => {
|
|
114
|
-
system.getSystemDescription().then(res => {
|
|
115
|
-
data.value = res.data
|
|
116
|
-
|
|
117
|
-
loading.value = !loading.value
|
|
118
|
-
})
|
|
119
|
-
}
|
|
120
|
-
init()
|
|
121
|
-
</script>
|
|
122
|
-
<style scoped>
|
|
123
|
-
hr {
|
|
124
|
-
height: 0;
|
|
125
|
-
line-height: 0;
|
|
126
|
-
margin: 10px 0;
|
|
127
|
-
padding: 0;
|
|
128
|
-
border: none;
|
|
129
|
-
border-bottom: 1px solid #eee;
|
|
130
|
-
clear: both;
|
|
131
|
-
overflow: hidden;
|
|
132
|
-
background: 0 0;
|
|
133
|
-
}
|
|
134
|
-
</style>
|
|
1
|
+
<template>
|
|
2
|
+
<a-row :gutter="16">
|
|
3
|
+
<a-col :span="12">
|
|
4
|
+
<a-card :bordered="false" :loading="loading">
|
|
5
|
+
<template #title
|
|
6
|
+
><DesktopOutlined :style="{ color: '#1677ff' }" /> CPU</template
|
|
7
|
+
>
|
|
8
|
+
<div class="flex-row text-font-bold">
|
|
9
|
+
<div class="flex-item">属性</div>
|
|
10
|
+
<div class="flex-item">值</div>
|
|
11
|
+
</div>
|
|
12
|
+
<hr />
|
|
13
|
+
<div class="flex-row">
|
|
14
|
+
<div class="flex-item">核心数</div>
|
|
15
|
+
<div class="flex-item">{{ data.processorCount }}</div>
|
|
16
|
+
</div>
|
|
17
|
+
<hr />
|
|
18
|
+
<div class="flex-row">
|
|
19
|
+
<div class="flex-item">用户使用率</div>
|
|
20
|
+
<div class="flex-item">{{ data.processorCount }}</div>
|
|
21
|
+
</div>
|
|
22
|
+
<hr />
|
|
23
|
+
<div class="flex-row">
|
|
24
|
+
<div class="flex-item">系统使用率</div>
|
|
25
|
+
<div class="flex-item">{{ data.cpuLoad }}</div>
|
|
26
|
+
</div>
|
|
27
|
+
<hr />
|
|
28
|
+
<div class="flex-row">
|
|
29
|
+
<div class="flex-item">当前空闲率</div>
|
|
30
|
+
<div class="flex-item">{{ data.cpuSurplusLoad }}</div>
|
|
31
|
+
</div>
|
|
32
|
+
</a-card>
|
|
33
|
+
</a-col>
|
|
34
|
+
<a-col :span="12">
|
|
35
|
+
<a-card :bordered="false" :loading="loading">
|
|
36
|
+
<template #title
|
|
37
|
+
><DatabaseOutlined :style="{ color: '#1677ff' }" /> 内存</template
|
|
38
|
+
>
|
|
39
|
+
<div class="flex-row text-font-bold">
|
|
40
|
+
<div class="flex-item">属性</div>
|
|
41
|
+
<div class="flex-item">值</div>
|
|
42
|
+
</div>
|
|
43
|
+
<hr />
|
|
44
|
+
<div class="flex-row">
|
|
45
|
+
<div class="flex-item">总内存</div>
|
|
46
|
+
<div class="flex-item">{{ data.physicalMemory }}</div>
|
|
47
|
+
</div>
|
|
48
|
+
<hr />
|
|
49
|
+
<div class="flex-row">
|
|
50
|
+
<div class="flex-item">已用内存</div>
|
|
51
|
+
<div class="flex-item">{{ data.memoryUsed }}</div>
|
|
52
|
+
</div>
|
|
53
|
+
<hr />
|
|
54
|
+
<div class="flex-row">
|
|
55
|
+
<div class="flex-item">剩余内存</div>
|
|
56
|
+
<div class="flex-item">{{ data.memoryAvailable }}</div>
|
|
57
|
+
</div>
|
|
58
|
+
<hr />
|
|
59
|
+
<div class="flex-row">
|
|
60
|
+
<div class="flex-item">使用率</div>
|
|
61
|
+
<div class="flex-item">{{ data.memoryUsage }}</div>
|
|
62
|
+
</div>
|
|
63
|
+
</a-card>
|
|
64
|
+
</a-col>
|
|
65
|
+
</a-row>
|
|
66
|
+
<a-card :bordered="false" class="margin-top-10" :loading="loading">
|
|
67
|
+
<template #title
|
|
68
|
+
><DesktopOutlined :style="{ color: '#1677ff' }" /> 服务器信息</template
|
|
69
|
+
>
|
|
70
|
+
<div class="flex-row text-font-bold">
|
|
71
|
+
<div class="flex-item">服务器名称</div>
|
|
72
|
+
<div class="flex-item">服务器 IP</div>
|
|
73
|
+
<div class="flex-item">操作系统</div>
|
|
74
|
+
<div class="flex-item">系统架构</div>
|
|
75
|
+
</div>
|
|
76
|
+
<hr />
|
|
77
|
+
<div class="flex-row">
|
|
78
|
+
<div class="flex-item">{{ data.hostName }}</div>
|
|
79
|
+
<div class="flex-item">{{ data.stringIP }}</div>
|
|
80
|
+
<div class="flex-item">{{ data.osDescription }}</div>
|
|
81
|
+
<div class="flex-item">{{ data.osArchitecture }}</div>
|
|
82
|
+
</div>
|
|
83
|
+
</a-card>
|
|
84
|
+
<a-card :bordered="false" class="margin-top-10" :loading="loading">
|
|
85
|
+
<template #title
|
|
86
|
+
><DesktopOutlined :style="{ color: '#1677ff' }" /> 磁盘状态</template
|
|
87
|
+
>
|
|
88
|
+
<div class="flex-row text-font-bold">
|
|
89
|
+
<div class="flex-item">盘符</div>
|
|
90
|
+
<div class="flex-item">总大小</div>
|
|
91
|
+
<div class="flex-item">已用大小</div>
|
|
92
|
+
<div class="flex-item">可用大小</div>
|
|
93
|
+
<div class="flex-item">已用百分比</div>
|
|
94
|
+
</div>
|
|
95
|
+
<hr />
|
|
96
|
+
<template v-for="(item, index) in data.disks" v-bind:key="index">
|
|
97
|
+
<div class="flex-row">
|
|
98
|
+
<div class="flex-item">{{ item.driveletter }}</div>
|
|
99
|
+
<div class="flex-item">{{ item.totalsize }}</div>
|
|
100
|
+
<div class="flex-item">{{ item.usedSize }}</div>
|
|
101
|
+
<div class="flex-item">{{ item.availableSize }}</div>
|
|
102
|
+
<div class="flex-item">{{ item.percentSize }}</div>
|
|
103
|
+
</div>
|
|
104
|
+
<hr />
|
|
105
|
+
</template>
|
|
106
|
+
</a-card>
|
|
107
|
+
</template>
|
|
108
|
+
<script setup>
|
|
109
|
+
import system from '@/api/methods/system'
|
|
110
|
+
import { ref } from 'vue'
|
|
111
|
+
const loading = ref(true)
|
|
112
|
+
const data = ref({})
|
|
113
|
+
const init = () => {
|
|
114
|
+
system.getSystemDescription().then(res => {
|
|
115
|
+
data.value = res.data
|
|
116
|
+
|
|
117
|
+
loading.value = !loading.value
|
|
118
|
+
})
|
|
119
|
+
}
|
|
120
|
+
init()
|
|
121
|
+
</script>
|
|
122
|
+
<style scoped>
|
|
123
|
+
hr {
|
|
124
|
+
height: 0;
|
|
125
|
+
line-height: 0;
|
|
126
|
+
margin: 10px 0;
|
|
127
|
+
padding: 0;
|
|
128
|
+
border: none;
|
|
129
|
+
border-bottom: 1px solid #eee;
|
|
130
|
+
clear: both;
|
|
131
|
+
overflow: hidden;
|
|
132
|
+
background: 0 0;
|
|
133
|
+
}
|
|
134
|
+
</style>
|