1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
| <template>
| <el-scrollbar height="calc(100vh - 88px - 40px - 50px)">
| <el-row>
| <!-- 磁盘使用量统计 -->
| <el-col :span="12" class="mt-3">
| <el-card class="ml-3" :gutter="12" shadow="hover">
| <!-- <div ref="chartRef" style="width: 100%; height: 90%"></div>-->
| <Echart :options="usedDiskEchartChika" :height="420" />
| <!-- <Echart :options="usedDiskEchartChika" :height="420" />-->
| </el-card>
| </el-col>
| </el-row>
| </el-scrollbar>
| </template>
| <script lang="ts" setup>
| import { ref, onMounted } from "vue";
| import * as StorageApi from '@/api/infra/storage'
| import { StorageMonitorInfoVO } from '@/api/infra/storage/types'
| const disks = ref<StorageMonitorInfoVO>()
| const disk = ref<StorageMonitorInfoVO>()
|
| // 基本信息
| const readDiskInfo = async () => {
| const data = await StorageApi.getDiskInfo()
| disks.value = data
| disk.value = data[0]
| }
|
| // 内存使用情况
| const usedDiskEchartChika = reactive<any>({
| title: {
| // 仪表盘标题。
| text: '磁盘使用情况',
| left: 'center',
| show: true, // 是否显示标题,默认 true。
| offsetCenter: [0, '20%'], //相对于仪表盘中心的偏移位置，数组第一项是水平方向的偏移，第二项是垂直方向的偏移。可以是绝对的数值，也可以是相对于仪表盘半径的百分比。
| color: 'yellow', // 文字的颜色,默认 #333。
| fontSize: 20 // 文字的字体大小,默认 15。
| },
| toolbox: {
| show: false,
| feature: {
| restore: { show: true },
| saveAsImage: { show: true }
| }
| },
| series: [
| {
| name: '峰值',
| type: 'gauge',
| min: 0,
| max: 500,
| splitNumber: 10,
| //这是指针的颜色
| color: '#F5C74E',
| radius: '85%',
| center: ['50%', '50%'],
| startAngle: 225,
| endAngle: -45,
| axisLine: {
| // 坐标轴线
| lineStyle: {
| // 属性lineStyle控制线条样式
| color: [
| [0.2, '#7FFF00'],
| [0.8, '#00FFFF'],
| [1, '#FF0000']
| ],
| //width: 6 外框的大小（环的宽度）
| width: 10
| }
| },
| axisTick: {
| // 坐标轴小标记
| //里面的线长是5（短线）
| length: 5, // 属性length控制线长
| lineStyle: {
| // 属性lineStyle控制线条样式
| color: '#76D9D7'
| }
| },
| splitLine: {
| // 分隔线
| length: 20, // 属性length控制线长
| lineStyle: {
| // 属性lineStyle（详见lineStyle）控制线条样式
| color: '#76D9D7'
| }
| },
| axisLabel: {
| color: '#76D9D7',
| distance: 15,
| fontSize: 15
| },
| pointer: {
| // 指针的大小
| width: 7,
| show: true
| },
| detail: {
| textStyle: {
| fontWeight: 'normal',
| // 里面文字下的数值大小（50）
| fontSize: 15,
| color: '#FFFFFF'
| },
| valueAnimation: true
| },
| progress: {
| show: true
| }
| }
| ]
| })
|
|
| /** 加载数据 */
| const getSummary = () => {
| // 初始化命令图表
| usedDiskInstance()
| }
|
| const usedDiskInstance = async () => {
| try {
| const data = await StorageApi.getDiskInfo()
| disks.value = data
| disk.value = data[0]
| // data.forEach((disk) => {
| console.log(disk.value)
| console.log(disk.value.name)
| console.log(disk.value!.restPPT)
| // 仪表盘详情，用于显示数据。
| usedDiskEchartChika.series[0].detail = {
| show: true, // 是否显示详情,默认 true。
| offsetCenter: [0, '50%'], // 相对于仪表盘中心的偏移位置，数组第一项是水平方向的偏移，第二项是垂直方向的偏移。可以是绝对的数值，也可以是相对于仪表盘半径的百分比。
| color: 'auto', // 文字的颜色,默认 auto。
| fontSize: 30, // 文字的字体大小,默认 15。
| formatter: disk.value!.restPPT // 格式化函数或者字符串
| }
| console.log(disk.value.restPPT)
| usedDiskEchartChika.series[0].data[0] = {
| value: disk.value!.restPPT,
| name: '磁盘消耗'
| }
| console.log(disk.value)
| usedDiskEchartChika.tooltip = {
| formatter: '{b} <br/>{a} : ' + disk.value!.restPPT
| }
| // })
| } catch {}
| }
|
| /** 初始化 **/
| onMounted(() => {
| readDiskInfo()
| // 读取 redis 信息
| // readDiskInfo()
| // // 加载数据
| getSummary()
| })
| </script>
|
|
