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>
|