|
|
|
@ -4,8 +4,11 @@ import * as echarts from 'echarts'; |
|
|
|
import { ref, onMounted, reactive, computed } from "vue"; |
|
|
|
import { VscInfo } from 'vue-icons-plus/vsc' |
|
|
|
import { Bs1CircleFill, Bs2CircleFill, Bs3CircleFill, Bs4Circle, Bs5Circle, Bs6Circle, Bs7Circle, Bs8Circle } from 'vue-icons-plus/bs' |
|
|
|
import axios from 'axios'; |
|
|
|
|
|
|
|
// 变量 |
|
|
|
// 总览对象 |
|
|
|
const totalData = ref({}); |
|
|
|
// 搜索对象 |
|
|
|
const getObj = ref({ |
|
|
|
goldType: '', |
|
|
|
@ -170,12 +173,13 @@ const option3 = { |
|
|
|
trigger: 'item' |
|
|
|
}, |
|
|
|
legend: { |
|
|
|
top: '5%', |
|
|
|
left: 'center' |
|
|
|
bottom: '1%', |
|
|
|
left: 'center', |
|
|
|
orient: 'vertical' |
|
|
|
}, |
|
|
|
series: [ |
|
|
|
{ |
|
|
|
name: 'Access From', |
|
|
|
name: '全年累计金币数', |
|
|
|
type: 'pie', |
|
|
|
radius: ['40%', '70%'], |
|
|
|
avoidLabelOverlap: false, |
|
|
|
@ -194,12 +198,11 @@ const option3 = { |
|
|
|
show: false |
|
|
|
}, |
|
|
|
data: [ |
|
|
|
{ value: 1048, name: 'Search Engine' }, |
|
|
|
{ value: 735, name: 'Direct' }, |
|
|
|
{ value: 580, name: 'Email' }, |
|
|
|
{ value: 484, name: 'Union Ads' }, |
|
|
|
{ value: 300, name: 'Video Ads' } |
|
|
|
] |
|
|
|
{ value: 1048, name: '充值金币' }, |
|
|
|
{ value: 735, name: '免费金币' }, |
|
|
|
{ value: 580, name: '任务金币' }, |
|
|
|
], |
|
|
|
color: ['#57a5ff', '#7f29ff', '#f2d113'] |
|
|
|
} |
|
|
|
] |
|
|
|
}; |
|
|
|
@ -208,12 +211,13 @@ const option4 = { |
|
|
|
trigger: 'item' |
|
|
|
}, |
|
|
|
legend: { |
|
|
|
top: '5%', |
|
|
|
left: 'center' |
|
|
|
bottom: '1%', |
|
|
|
left: 'center', |
|
|
|
orient: 'vertical' |
|
|
|
}, |
|
|
|
series: [ |
|
|
|
{ |
|
|
|
name: 'Access From', |
|
|
|
name: '全年累计消耗金币数', |
|
|
|
type: 'pie', |
|
|
|
radius: ['40%', '70%'], |
|
|
|
avoidLabelOverlap: false, |
|
|
|
@ -232,12 +236,11 @@ const option4 = { |
|
|
|
show: false |
|
|
|
}, |
|
|
|
data: [ |
|
|
|
{ value: 1048, name: 'Search Engine' }, |
|
|
|
{ value: 735, name: 'Direct' }, |
|
|
|
{ value: 580, name: 'Email' }, |
|
|
|
{ value: 484, name: 'Union Ads' }, |
|
|
|
{ value: 300, name: 'Video Ads' } |
|
|
|
] |
|
|
|
{ value: 1048, name: '充值金币' }, |
|
|
|
{ value: 735, name: '免费金币' }, |
|
|
|
{ value: 580, name: '任务金币' }, |
|
|
|
], |
|
|
|
color: ['#57a5ff', '#7f29ff', '#f2d113'] |
|
|
|
} |
|
|
|
] |
|
|
|
}; |
|
|
|
@ -246,12 +249,19 @@ const option5 = { |
|
|
|
trigger: 'item' |
|
|
|
}, |
|
|
|
legend: { |
|
|
|
top: '5%', |
|
|
|
left: 'center' |
|
|
|
bottom: '1%', |
|
|
|
left: 'center', |
|
|
|
orient: 'vertical' |
|
|
|
}, |
|
|
|
grid: { |
|
|
|
top: '10%', // 设置图表距离容器顶部的距离为10%，使饼图上移 |
|
|
|
bottom: '20%', // 因为图例在底部占了10%，这里适当调整底部距离 |
|
|
|
left: '10%', |
|
|
|
right: '10%' |
|
|
|
}, |
|
|
|
series: [ |
|
|
|
{ |
|
|
|
name: 'Access From', |
|
|
|
name: '当前金币余量', |
|
|
|
type: 'pie', |
|
|
|
radius: ['40%', '70%'], |
|
|
|
avoidLabelOverlap: false, |
|
|
|
@ -270,12 +280,11 @@ const option5 = { |
|
|
|
show: false |
|
|
|
}, |
|
|
|
data: [ |
|
|
|
{ value: 1048, name: 'Search Engine' }, |
|
|
|
{ value: 735, name: 'Direct' }, |
|
|
|
{ value: 580, name: 'Email' }, |
|
|
|
{ value: 484, name: 'Union Ads' }, |
|
|
|
{ value: 300, name: 'Video Ads' } |
|
|
|
] |
|
|
|
{ value: 1048, name: '充值金币' }, |
|
|
|
{ value: 735, name: '免费金币' }, |
|
|
|
{ value: 580, name: '任务金币' }, |
|
|
|
], |
|
|
|
color: ['#57a5ff', '#7f29ff', '#f2d113'] |
|
|
|
} |
|
|
|
] |
|
|
|
}; |
|
|
|
@ -289,7 +298,7 @@ const option6 = { |
|
|
|
}, |
|
|
|
series: [ |
|
|
|
{ |
|
|
|
name: 'Access From', |
|
|
|
name: '当前金币余量', |
|
|
|
type: 'pie', |
|
|
|
radius: ['40%', '70%'], |
|
|
|
avoidLabelOverlap: false, |
|
|
|
@ -325,6 +334,22 @@ const list = ref([]); |
|
|
|
const get = function () { |
|
|
|
console.log(getObj.value); |
|
|
|
} |
|
|
|
// 搜索方法1（当前金币余量） |
|
|
|
const get1 = async function () { |
|
|
|
try { |
|
|
|
// 发送POST请求 |
|
|
|
const result = await axios.post('http://192.168.8.147:10070/statistics/getSumCoin'); |
|
|
|
|
|
|
|
// 将响应结果存储到响应式数据中 |
|
|
|
console.log('请求成功', result); |
|
|
|
// 存储总览数据 |
|
|
|
totalData.value = result.data.data; |
|
|
|
console.log('totalData', totalData.value); |
|
|
|
} catch (error) { |
|
|
|
console.log('请求失败', error); |
|
|
|
// 在这里可以处理错误逻辑，比如显示错误提示等 |
|
|
|
} |
|
|
|
} |
|
|
|
// 全部平台 |
|
|
|
const allPlatform = function () { |
|
|
|
list.value = [ |
|
|
|
@ -366,9 +391,20 @@ const HomilyLink = function () { |
|
|
|
getObj.value.platform = 'HomilyLink'; |
|
|
|
get(); |
|
|
|
} |
|
|
|
// 计算属性 |
|
|
|
// 格式化数字 |
|
|
|
const formatNum = function (val) { |
|
|
|
console.log(val); |
|
|
|
if (val === undefined) { |
|
|
|
return ''; // 或者返回其他合适的默认值，避免调用toString报错 |
|
|
|
} else { |
|
|
|
return val.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ','); |
|
|
|
} |
|
|
|
}; |
|
|
|
|
|
|
|
onMounted(function () { |
|
|
|
get(); |
|
|
|
get1(); |
|
|
|
// 第一个柱状图 基于准备好的dom，初始化echarts实例 |
|
|
|
var rechargeBar = echarts.init(document.getElementById('recharge')); |
|
|
|
// 使用刚指定的配置项和数据显示图表。 |
|
|
|
@ -414,9 +450,24 @@ onMounted(function () { |
|
|
|
<el-card> |
|
|
|
<p>当前金币余量 |
|
|
|
</p> |
|
|
|
<p>数据待填充</p> |
|
|
|
<p>较前一天（数据待填充）</p> |
|
|
|
<template #footer>充值（） 免费（） 任务（）</template> |
|
|
|
<p> |
|
|
|
{{ formatNum(totalData.todayTotalCoin) }} |
|
|
|
</p> |
|
|
|
<p> |
|
|
|
<span v-if="totalData.coinDifference > 0"> |
|
|
|
<div class="comparedWithYesterday"> |
|
|
|
<span>较前一天 {{ formatNum(totalData.coinDifference) }}</span> |
|
|
|
<span class="red-triangle" style="margin: 6px 0px 0px 7px;"></span> |
|
|
|
</div> |
|
|
|
</span> |
|
|
|
<span v-if="totalData.coinDifference < 0"> |
|
|
|
<div class="comparedWithYesterday"> |
|
|
|
<span>较前一天 {{ formatNum(totalData.coinDifference) }}</span> |
|
|
|
<span class="green-triangle" style="margin: 6px 0px 0px 7px;"></span> |
|
|
|
</div> |
|
|
|
</span> |
|
|
|
</p> |
|
|
|
<template #footer>充值{{formatNum(totalData.todayRecharge)}} 免费{{formatNum(totalData.todayFree)}} 任务{{formatNum(totalData.todayTask)}}</template> |
|
|
|
</el-card> |
|
|
|
</el-col> |
|
|
|
<el-col :span="6"> |
|
|
|
@ -608,6 +659,10 @@ onMounted(function () { |
|
|
|
</template> |
|
|
|
|
|
|
|
<style scoped> |
|
|
|
.comparedWithYesterday { |
|
|
|
display: flex; |
|
|
|
} |
|
|
|
|
|
|
|
.ranking-item { |
|
|
|
margin-bottom: 10px; |
|
|
|
} |
|
|
|
|
hongxilin
7 months ago