|
|
@@ -76,9 +76,32 @@
|
|
|
</el-row>
|
|
|
<el-row :gutter="20" style="margin-top: 20px">
|
|
|
<el-col :span="12">
|
|
|
- <el-card shadow="hover">
|
|
|
+ <el-card shadow="hover" style="height: 330px">
|
|
|
<h3>空间使用情况</h3>
|
|
|
- <div ref="onlineTime" class="chart-placeholder"></div>
|
|
|
+ <div style="margin-top: 50px">
|
|
|
+ <h2>已用空间:{{ diskUsed }}GB/{{ diskTotal }}GB</h2>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="disk-progress">
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="2">
|
|
|
+ <h3>图片:</h3>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="22">
|
|
|
+ <el-progress :text-inside="true" :stroke-width="26" :percentage="diskImage" />
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
+ <div class="disk-progress">
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="2">
|
|
|
+ <h3>视频:</h3>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="22">
|
|
|
+ <el-progress :text-inside="true" :stroke-width="26" status="success" :percentage="diskVideo" />
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
</el-card>
|
|
|
</el-col>
|
|
|
<el-col :span="12">
|
|
|
@@ -135,7 +158,7 @@
|
|
|
|
|
|
<script setup lang="ts">
|
|
|
import * as echarts from 'echarts';
|
|
|
-import { fileStatistics, fileStatisticsByTag, numLine, statisticsByTypeAndTag } from '@/api/smsb/source/minioData';
|
|
|
+import { diskUse, fileStatistics, fileStatisticsByTag, numLine, statisticsByTypeAndTag } from '@/api/smsb/source/minioData';
|
|
|
import { playTopStatistics, sumOnlineTimeLine } from '@/api/smsb/source/play_record';
|
|
|
|
|
|
const timeRadio = ref('week');
|
|
|
@@ -153,6 +176,18 @@ const topType = ref('1');
|
|
|
const imageTopNum = ref(0);
|
|
|
const videoTopNum = ref(0);
|
|
|
const onlineTimeLine = ref();
|
|
|
+const diskUsed = ref();
|
|
|
+const diskTotal = ref();
|
|
|
+const diskImage = ref();
|
|
|
+const diskVideo = ref();
|
|
|
+
|
|
|
+const getDiskUse = async () => {
|
|
|
+ const res = await diskUse();
|
|
|
+ diskTotal.value = res.data.total / 1024 / 1024;
|
|
|
+ diskUsed.value = (res.data.used / 1024 / 1024).toFixed(3);
|
|
|
+ diskImage.value = ((res.data.imageUse / res.data.total) * 100).toFixed(2);
|
|
|
+ diskVideo.value = ((res.data.videoUse / res.data.total) * 100).toFixed(2);
|
|
|
+};
|
|
|
|
|
|
const getOnlineTimeLine = async () => {
|
|
|
const params = {
|
|
|
@@ -464,6 +499,7 @@ onMounted(() => {
|
|
|
getNumByTypeAndTag();
|
|
|
getPlayTop();
|
|
|
getOnlineTimeLine();
|
|
|
+ getDiskUse();
|
|
|
});
|
|
|
</script>
|
|
|
|
|
|
@@ -495,4 +531,10 @@ onMounted(() => {
|
|
|
/*background: #f5f5f5;*/
|
|
|
border-radius: 8px;
|
|
|
}
|
|
|
+
|
|
|
+.disk-progress .el-progress--line {
|
|
|
+ margin-bottom: 15px;
|
|
|
+ max-width: 600px;
|
|
|
+ margin-top: 50px;
|
|
|
+}
|
|
|
</style>
|