123 lines
3.1 KiB
Vue
123 lines
3.1 KiB
Vue
|
<template>
|
|||
|
|
<div v-if="['xxl', 'xl', 'md'].includes(widthType)">
|
|||
|
|
<div>
|
|||
|
|
<GIcon name="gt-plane-upload-black" />
|
|||
|
|
<span class="text-[#000] text-[16px] ml-2 font-semibold">下载使用量</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="flex mt-4 items-end">
|
|||
|
|
<div class="text-[#2951E0] text-xl mr-8 font-semibold">
|
|||
|
|
{{ total }}
|
|||
|
|
</div>
|
|||
|
|
<div class="num-empty" v-if="isEmpty"></div>
|
|||
|
|
<div v-else id="download" style="width: 100%; height: 56px"></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div v-else class="p-2 download-chart-mobile">
|
|||
|
|
<div class="mb-4">
|
|||
|
|
<span class="text-[#000] text-[16px] ml-2 font-semibold">下载使用量：</span>
|
|||
|
|
<span class="text-[#2951E0] text-[16px] font-semibold">
|
|||
|
|
{{ total }}
|
|||
|
|
</span>
|
|||
|
|
</div>
|
|||
|
|
<div v-if="isEmpty" class="num-empty"></div>
|
|||
|
|
<div v-else id="download" style="width: 100%; height: 56px"></div>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
<script lang="ts" setup>
|
|||
|
|
import { onMounted, ref, nextTick } from 'vue';
|
|||
|
|
import { getRepoClone } from '@/api/repo';
|
|||
|
|
import { usePageResize } from '@/utils/hooks/usePageResize';
|
|||
|
|
import * as echarts from 'echarts';
|
|||
|
|
|
|||
|
|
const props = defineProps<{
|
|||
|
|
repoId: string;
|
|||
|
|
}>();
|
|||
|
|
|
|||
|
|
const { widthType } = usePageResize();
|
|||
|
|
const isEmpty = ref(false);
|
|||
|
|
|
|||
|
|
const initGitCode = () => {
|
|||
|
|
const myChart = echarts.init(document.getElementById('download'));
|
|||
|
|
|
|||
|
|
myChart.setOption({
|
|||
|
|
xAxis: {
|
|||
|
|
type: 'category',
|
|||
|
|
show: false,
|
|||
|
|
boundaryGap: false
|
|||
|
|
},
|
|||
|
|
yAxis: {
|
|||
|
|
type: 'value',
|
|||
|
|
show: false
|
|||
|
|
},
|
|||
|
|
tooltip: {
|
|||
|
|
trigger: 'axis',
|
|||
|
|
renderMode: 'richText',
|
|||
|
|
formatter: function(params) {
|
|||
|
|
return `${params[0].value}`;
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
grid: {
|
|||
|
|
left: 0,
|
|||
|
|
bottom: 2,
|
|||
|
|
top: 0,
|
|||
|
|
right: 0,
|
|||
|
|
height: 50
|
|||
|
|
},
|
|||
|
|
series: [
|
|||
|
|
{
|
|||
|
|
data: downloadList.value,
|
|||
|
|
type: 'line',
|
|||
|
|
symbol: 'none',
|
|||
|
|
lineStyle: { color: '#2951E0' },
|
|||
|
|
areaStyle: {
|
|||
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|||
|
|
{ offset: 0, color: 'rgba(41, 81, 224, 0.24)' },
|
|||
|
|
{ offset: 1, color: 'rgba(41, 81, 224, 0.04)' }
|
|||
|
|
])
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
});
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const downloadList = ref([]);
|
|||
|
|
const total = ref(0);
|
|||
|
|
const getDownloadData = () => {
|
|||
|
|
getRepoClone(props.repoId).then((data) => {
|
|||
|
|
if (data?.data?.data) {
|
|||
|
|
total.value = data.data.data[0]?.total_dl_cnt || 0;
|
|||
|
|
data.data.data.forEach((item) => {
|
|||
|
|
downloadList.value.unshift(item.today_dl_cnt || 0);
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
if (total.value === 0) {
|
|||
|
|
isEmpty.value = true;
|
|||
|
|
} else {
|
|||
|
|
// 只有一天数据，前面加个0，展示折线
|
|||
|
|
downloadList.value.length === 1 && (downloadList.value.unshift(0));
|
|||
|
|
nextTick(() => {
|
|||
|
|
initGitCode();
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
onMounted(() => {
|
|||
|
|
getDownloadData();
|
|||
|
|
});
|
|||
|
|
</script>
|
|||
|
|
<style lang="scss" scoped>
|
|||
|
|
.download-chart-mobile {
|
|||
|
|
border-radius: 4px;
|
|||
|
|
border: 1px solid #E3E3EE;
|
|||
|
|
background: #F1F1F8;
|
|||
|
|
}
|
|||
|
|
.num-empty {
|
|||
|
|
height: 10px;
|
|||
|
|
border-top: 2px solid #2951E0;
|
|||
|
|
width: 100%;
|
|||
|
|
background: linear-gradient(180deg, rgba(41, 81, 224, 0.12) 0%, rgba(41, 81, 224, 0.04) 100%);
|
|||
|
|
}
|
|||
|
|
</style>
|