添加了工作台的加载动画

vue/gold-system/package.json

@@ -4,7 +4,7 @@
   "version": "0.0.0",
   "type": "module",
   "scripts": {
-    "dev": "vite",
+    "dev": "vite --host 0.0.0.0",
     "build": "vue-tsc -b && vite build",
     "preview": "vite preview",
     "serve": "vite - service serve --host 0.0.0.0 --port 8080"

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

@@ -6,6 +6,8 @@ import { Bs1CircleFill, Bs2CircleFill, Bs3CircleFill, Bs4Circle, Bs5Circle, Bs6C
 import axios, { all } from 'axios';
 
 // 变量
+// 加载对象
+const loading = ref(true)
 // 总览对象
 const getSumCoin = ref({});
 const statistics = ref({});
@@ -136,13 +138,13 @@ const get = async function () {
         payMonthRecharge.value = getMediuPayCoin.value.map(item => Math.abs(item.rechargeSumCoin)).reverse();
         payMonthFree.value = getMediuPayCoin.value.map(item => Math.abs(item.freeSumCoin)).reverse();
         payMonthTask.value = getMediuPayCoin.value.map(item => Math.abs(item.taskSumCoin)).reverse();
-        payMonthRecharge.value.forEach((number)=>{
+        payMonthRecharge.value.forEach((number) => {
             payTotalRecharge.value += number
         })
-        payMonthFree.value.forEach((number)=>{
+        payMonthFree.value.forEach((number) => {
             payTotalFree.value += number
         })
-        payMonthTask.value.forEach((number)=>{
+        payMonthTask.value.forEach((number) => {
             payTotalTask.value += number
         })
         console.log('payMonthCategory', payMonthCategory.value);
@@ -157,13 +159,13 @@ const get = async function () {
         consumeMonthRecharge.value = getMediuConsumeCoin.value.map(item => Math.abs(item.rechargeSumCoin)).reverse();
         consumeMonthFree.value = getMediuConsumeCoin.value.map(item => Math.abs(item.freeSumCoin)).reverse();
         consumeMonthTask.value = getMediuConsumeCoin.value.map(item => Math.abs(item.taskSumCoin)).reverse();
-        consumeMonthRecharge.value.forEach((number)=>{
+        consumeMonthRecharge.value.forEach((number) => {
             consumeTotalRecharge.value += number
         })
-        consumeMonthFree.value.forEach((number)=>{
+        consumeMonthFree.value.forEach((number) => {
             consumeTotalFree.value += number
         })
-        consumeMonthTask.value.forEach((number)=>{
+        consumeMonthTask.value.forEach((number) => {
             consumeTotalTask.value += number
         })
         console.log('consumeMonthCategory', consumeMonthCategory.value);
@@ -293,6 +295,9 @@ const get = async function () {
             { value: (Number(ERPData.value[2].value) + Number(HCData.value[2].value) + Number(LinkData.value[2].value) + Number(goldData.value[2].value)), name: '第3学科' },
             { value: (Number(ERPData.value[3].value) + Number(HCData.value[3].value) + Number(LinkData.value[3].value) + Number(goldData.value[3].value)), name: '第4学科' },
         ]
+
+        loading.value = false;
+
         console.log('allData', allData.value);
     } catch (error) {
         console.log('请求失败', error);
@@ -728,6 +733,7 @@ onMounted(async function () {
 </script>
 
 <template>
+    <div v-loading="loading">
         <el-row :gutter="20">
             <el-col :span="6">
                 <el-card>
@@ -756,7 +762,8 @@ onMounted(async function () {
                             </div>
                         </span>
                     </p>
-                <template #footer>充值{{ formatNum(getSumCoin.todayRecharge) }} 免费{{ formatNum(getSumCoin.todayFree) }}
+                    <template #footer>充值{{ formatNum(getSumCoin.todayRecharge) }} 免费{{ formatNum(getSumCoin.todayFree)
+                        }}
                         任务{{ formatNum(getSumCoin.todayTask) }}</template>
                 </el-card>
             </el-col>
@@ -958,47 +965,56 @@ onMounted(async function () {
                                         <div class="ranking-item" v-if="areaSizeConsume >= 1">
                                             <Bs1CircleFill />
                                             <span style="margin-left: 10px;">{{ ConsumeRank[0].name }}</span>
-                                        <span style="margin-left: auto;">{{ formatNum(ConsumeRank[0].value) }}</span>
+                                            <span style="margin-left: auto;">{{ formatNum(ConsumeRank[0].value)
+                                                }}</span>
                                         </div>
                                         <div class="ranking-item" v-if="areaSizeConsume >= 2">
                                             <Bs2CircleFill />
                                             <span style="margin-left: 10px;">{{ ConsumeRank[1].name }}</span>
-                                        <span style="margin-left: auto;">{{ formatNum(ConsumeRank[1].value) }}</span>
+                                            <span style="margin-left: auto;">{{ formatNum(ConsumeRank[1].value)
+                                                }}</span>
                                         </div>
                                         <div class="ranking-item" v-if="areaSizeConsume >= 3">
                                             <Bs3CircleFill />
                                             <span style="margin-left: 10px;">{{ ConsumeRank[2].name }}</span>
-                                        <span style="margin-left: auto;">{{ formatNum(ConsumeRank[2].value) }}</span>
+                                            <span style="margin-left: auto;">{{ formatNum(ConsumeRank[2].value)
+                                                }}</span>
                                         </div>
                                         <div class="ranking-item" v-if="areaSizeConsume >= 4">
                                             <Bs4Circle />
                                             <span style="margin-left: 10px;">{{ ConsumeRank[3].name }}</span>
-                                        <span style="margin-left: auto;">{{ formatNum(ConsumeRank[3].value) }}</span>
+                                            <span style="margin-left: auto;">{{ formatNum(ConsumeRank[3].value)
+                                                }}</span>
                                         </div>
                                         <div class="ranking-item" v-if="areaSizeConsume >= 5">
                                             <Bs5Circle />
                                             <span style="margin-left: 10px;">{{ ConsumeRank[4].name }}</span>
-                                        <span style="margin-left: auto;">{{ formatNum(ConsumeRank[4].value) }}</span>
+                                            <span style="margin-left: auto;">{{ formatNum(ConsumeRank[4].value)
+                                                }}</span>
                                         </div>
                                         <div class="ranking-item" v-if="areaSizeConsume >= 6">
                                             <Bs6Circle />
                                             <span style="margin-left: 10px;">{{ ConsumeRank[5].name }}</span>
-                                        <span style="margin-left: auto;">{{ formatNum(ConsumeRank[5].value) }}</span>
+                                            <span style="margin-left: auto;">{{ formatNum(ConsumeRank[5].value)
+                                                }}</span>
                                         </div>
                                         <div class="ranking-item" v-if="areaSizeConsume >= 7">
                                             <Bs7Circle />
                                             <span style="margin-left: 10px;">{{ ConsumeRank[6].name }}</span>
-                                        <span style="margin-left: auto;">{{ formatNum(ConsumeRank[6].value) }}</span>
+                                            <span style="margin-left: auto;">{{ formatNum(ConsumeRank[6].value)
+                                                }}</span>
                                         </div>
                                         <div class="ranking-item" v-if="areaSizeConsume >= 8">
                                             <Bs8Circle />
                                             <span style="margin-left: 10px;">{{ ConsumeRank[7].name }}</span>
-                                        <span style="margin-left: auto;">{{ formatNum(ConsumeRank[7].value) }}</span>
+                                            <span style="margin-left: auto;">{{ formatNum(ConsumeRank[7].value)
+                                                }}</span>
                                         </div>
                                         <div class="ranking-item" v-if="areaSizeConsume >= 9">
                                             <Bs9Circle />
                                             <span style="margin-left: 10px;">{{ ConsumeRank[8].name }}</span>
-                                        <span style="margin-left: auto;">{{ formatNum(ConsumeRank[8].value) }}</span>
+                                            <span style="margin-left: auto;">{{ formatNum(ConsumeRank[8].value)
+                                                }}</span>
                                         </div>
                                     </div>
 
@@ -1059,6 +1075,7 @@ onMounted(async function () {
                 </el-card>
             </el-col>
         </el-row>
+    </div>
 </template>
 
 <style scoped>
@@ -1067,7 +1084,7 @@ onMounted(async function () {
     font-weight: bold;
 }
 
-.mid-head-font{
+.mid-head-font {
     font-weight: bold;
     color: #5eb7ff;
 }