zant-admin 2.0.0 → 2.0.1

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.
Files changed (81) hide show
  1. package/README.md +460 -268
  2. package/bin/cli.js +1 -1
  3. package/bin/generator.js +502 -502
  4. package/bin/prompts.js +158 -158
  5. package/bin/utils.js +133 -133
  6. package/package.json +1 -1
  7. package/public/logo.png +0 -0
  8. package/src/App.vue +16 -16
  9. package/src/api/methods/department.js +36 -0
  10. package/src/api/methods/employee.js +22 -0
  11. package/src/api/methods/logError.js +8 -8
  12. package/src/api/methods/logOperation.js +8 -8
  13. package/src/api/methods/login.js +6 -6
  14. package/src/api/methods/position.js +26 -0
  15. package/src/api/methods/quartz.js +36 -36
  16. package/src/api/methods/region.js +16 -16
  17. package/src/api/methods/sysAccount.js +29 -29
  18. package/src/api/methods/sysDict.js +29 -29
  19. package/src/api/methods/sysDictItem.js +26 -26
  20. package/src/api/methods/sysMenu.js +42 -42
  21. package/src/api/methods/sysRole.js +35 -35
  22. package/src/api/methods/sysUser.js +25 -25
  23. package/src/api/methods/system.js +15 -15
  24. package/src/api/request.js +225 -225
  25. package/src/assets/css/style.css +2 -2
  26. package/src/assets/css/zcui.css +1023 -1023
  27. package/src/assets/imgs/logo.png +0 -0
  28. package/src/assets/imgs/md/console.png +0 -0
  29. package/src/assets/imgs/md/login.png +0 -0
  30. package/src/assets/imgs/md/menu.png +0 -0
  31. package/src/assets/imgs/md/serviceMonitoring.png +0 -0
  32. package/src/assets/imgs/md/statistics.png +0 -0
  33. package/src/components/FormTable.vue +5 -19
  34. package/src/components/IconPicker.vue +351 -351
  35. package/src/components/MainPage.vue +838 -838
  36. package/src/components/details/logErrorDetails.vue +58 -58
  37. package/src/components/details/logOperationDetails.vue +76 -76
  38. package/src/components/edit/QuartzEdit.vue +221 -221
  39. package/src/components/edit/SysAccountEdit.vue +185 -185
  40. package/src/components/edit/SysDictEdit.vue +116 -116
  41. package/src/components/edit/SysDictItemEdit.vue +136 -136
  42. package/src/components/edit/SysRoleEdit.vue +111 -111
  43. package/src/components/edit/organizationalStructure/DepartmentEdit.vue +162 -0
  44. package/src/components/edit/organizationalStructure/EmployeeEdit.vue +295 -0
  45. package/src/components/edit/organizationalStructure/PositionEdit.vue +166 -0
  46. package/src/components/edit/sysMenuEdit.vue +2 -1
  47. package/src/config/index.js +74 -74
  48. package/src/directives/permission.js +49 -49
  49. package/src/main.js +37 -37
  50. package/src/stores/config.js +43 -43
  51. package/src/stores/dict.js +33 -33
  52. package/src/stores/menu.js +81 -81
  53. package/src/stores/user.js +21 -21
  54. package/src/utils/baseEcharts.js +661 -661
  55. package/src/utils/dictTemplate.js +26 -26
  56. package/src/utils/regionUtils.js +173 -173
  57. package/src/utils/useFormCRUD.js +59 -59
  58. package/src/views/baiscstatis/center.vue +474 -474
  59. package/src/views/baiscstatis/iframePage.vue +29 -29
  60. package/src/views/baiscstatis/notFound.vue +192 -192
  61. package/src/views/console.vue +821 -821
  62. package/src/views/demo/button.vue +269 -269
  63. package/src/views/demo/importexport.vue +119 -119
  64. package/src/views/demo/region.vue +322 -322
  65. package/src/views/demo/statistics.vue +214 -214
  66. package/src/views/home.vue +6 -6
  67. package/src/views/login.vue +12 -2
  68. package/src/views/operations/log/logError.vue +78 -78
  69. package/src/views/operations/log/logLogin.vue +66 -66
  70. package/src/views/operations/log/logOperation.vue +103 -103
  71. package/src/views/operations/log/logQuartz.vue +56 -56
  72. package/src/views/operations/quartz.vue +179 -179
  73. package/src/views/operations/serviceMonitoring.vue +134 -134
  74. package/src/views/organizationalStructure/department.vue +194 -0
  75. package/src/views/organizationalStructure/employee.vue +234 -0
  76. package/src/views/organizationalStructure/position.vue +196 -0
  77. package/src/views/system/sysAccount.vue +128 -128
  78. package/src/views/system/sysDict.vue +159 -159
  79. package/src/views/system/sysDictItem.vue +118 -118
  80. package/src/views/system/sysMenu.vue +225 -225
  81. package/src/views/system/sysRole.vue +207 -207
@@ -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>