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