@@ -154,11 +171,11 @@ onMounted(async function () {
- 现有金币:免费金币:(),充值金币:(),任务金币:()
+ 现有金币:免费金币:{{freeCoin}},充值金币:{{rechargeCoin}},任务金币:{{taskCoin}}
-
-
+
+
@@ -167,37 +184,55 @@ onMounted(async function () {
-
-
-
-
-
+
+
+
+
+
-
-
+
+
-
\ No newline at end of file
diff --git a/vue/gold-system/src/views/workspace/index.vue b/vue/gold-system/src/views/workspace/index.vue
index f2d1f8c..b88e3d4 100644
--- a/vue/gold-system/src/views/workspace/index.vue
+++ b/vue/gold-system/src/views/workspace/index.vue
@@ -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 () {
当前金币余量
- 数据待填充
- 较前一天(数据待填充)
- 充值() 免费() 任务()
+
+ {{ formatNum(totalData.todayTotalCoin) }}
+
+
+
+
+ 较前一天 {{ formatNum(totalData.coinDifference) }}
+
+
+
+
+
+ 较前一天 {{ formatNum(totalData.coinDifference) }}
+
+
+
+
+ 充值{{formatNum(totalData.todayRecharge)}} 免费{{formatNum(totalData.todayFree)}} 任务{{formatNum(totalData.todayTask)}}
@@ -608,6 +659,10 @@ onMounted(function () {