免费金币到期时间工作台展示

vue/gold-system/src/views/workspace/index.vue

@@ -7,6 +7,7 @@ import axios, { all } from "axios";
 import API from "../../api/index";
 import moment from "moment";
 import * as math from 'mathjs';
+import { getTime } from "element-plus/es/components/countdown/src/utils.mjs";
 
 // 变量
 // 加载对象
@@ -93,7 +94,7 @@ const get = async function () {
       {}
     );
     const result2 = await API.post(
-      "http://192.168.8.93:10010/statistics/a",
+      "http://192.168.8.174:10010/statistics/a",
       {}
     );
     const result3 = await API.post(
@@ -953,9 +954,12 @@ onMounted(async function () {
     tooltip: {
       trigger: "item",
       position: ["15%", "-3%"],
+      formatter: function (params) {
+        return params.seriesName + '<br/>' + params.name;
+      }
     },
     legend: {
-      bottom: "-2%",
+      bottom: "-1%",
       left: "center",
       orient: "vertical",
     },
@@ -989,9 +993,12 @@ onMounted(async function () {
     tooltip: {
       trigger: "item",
       position: ["15%", "-3%"],
+      formatter: function (params) {
+        return params.seriesName + '<br/>' + params.name;
+      }
     },
     legend: {
-      bottom: "-2%",
+      bottom: "-1%",
       left: "center",
       orient: "vertical",
     },
@@ -1030,9 +1037,12 @@ onMounted(async function () {
     tooltip: {
       trigger: "item",
       position: ["15%", "-3%"],
+      formatter: function (params) {
+        return params.seriesName + '<br/>' + params.name + (params.value == getSumCoin.value.todayFree ? '</br>6月到期 | ' + statistics.value.free6SumCoin + ' ; 12月到期 | ' + statistics.value.free12SumCoin : '');
+      }
     },
     legend: {
-      bottom: "-2%",
+      bottom: "-1%",
       left: "center",
       orient: "vertical",
     },
@@ -1088,7 +1098,7 @@ onMounted(async function () {
   <div v-loading="loading">
     <el-row :gutter="20">
       <el-col :span="6">
-        <el-card>
+        <el-card style="height: 260px;">
           <p>当前金币余量</p>
           <p class="head-mid-font">
             {{ formatNum(getSumCoin.todayTotalCoin) }}
@@ -1113,14 +1123,17 @@ onMounted(async function () {
               </div>
             </span>
           </p>
-          <template #footer>充值{{ formatNum(getSumCoin.todayRecharge) }} 免费{{
-            formatNum(getSumCoin.todayFree)
-          }}
-            任务{{ formatNum(getSumCoin.todayTask) }}</template>
+          <template #footer>
+            <span>充值{{ formatNum(getSumCoin.todayRecharge) }}
+              免费{{ formatNum(getSumCoin.todayFree) }}
+              任务{{ formatNum(getSumCoin.todayTask) }}
+            </span>
+            <p style="font-size: 12px;">免费金币：6月到期 | {{ formatNum(statistics.free6SumCoin) }} ; 12月到期 |{{ formatNum(statistics.free12SumCoin) }}</p>
+          </template>
         </el-card>
       </el-col>
       <el-col :span="6">
-        <el-card>
+        <el-card style="height: 260px;">
           <p>全年累计金币数</p>
           <p class="head-mid-font">
             {{ formatNum(Math.abs(statistics.totalSumCoin)) }}
@@ -1137,7 +1150,7 @@ onMounted(async function () {
         </el-card>
       </el-col>
       <el-col :span="6">
-        <el-card>
+        <el-card style="height: 260px;">
           <p>全年累计消耗金币数</p>
           <p class="head-mid-font">
             {{ formatNum(Math.abs(getYearConsumeCoin.yearsumCoin)) }}
@@ -1153,7 +1166,7 @@ onMounted(async function () {
         </el-card>
       </el-col>
       <el-col :span="6">
-        <el-card>
+        <el-card style="height: 260px;">
           <p>全年累计充值人数</p>
           <p class="head-mid-font">
             {{ formatNum(Math.abs(statistics.rechargeCount)) }}
@@ -1345,9 +1358,9 @@ onMounted(async function () {
             </div>
           </template>
           <div class="pie">
-            <div id="yearRecharge" style="width: 400px; height: 400px"></div>
-            <div id="yearConsume" style="width: 400px; height: 400px"></div>
-            <div id="nowGold" style="width: 400px; height: 400px"></div>
+            <div id="yearRecharge" style="width: 400px; height: 450px"></div>
+            <div id="yearConsume" style="width: 400px; height: 450px"></div>
+            <div id="nowGold" style="width: 400px; height: 450px"></div>
           </div>
         </el-card>
       </el-col>