修改箭头

src/views/workspace/index.vue

@@ -11,10 +11,13 @@
             <div class="card-title">当前金币余量</div>
             <div>{{ currentGold / 100 }}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;较前一日 {{ dailyChange / 100 }} 
               <template v-if="dailyChange > 0">
-                <el-icon style="color:forestgreen"><SemiSelect /></el-icon>
+                <el-icon style="color:red"><ArrowUpBold /></el-icon>
               </template>
               <template v-else-if="dailyChange < 0">
-                <el-icon style="color:red"><Bottom /></el-icon>
+                <el-icon style="color:forestgreen"><ArrowDownBold /></el-icon>
+              </template>
+              <template v-else>
+                <el-icon style="color:grey"><SemiSelect /></el-icon>
               </template>
             </div>
           </div>
@@ -22,8 +25,8 @@
         <div>
           <div class="margin-bottom">永久金币：{{ currentPermanent / 100 }}</div>
           <div class="margin-bottom">免费金币：{{ currentFree / 100 }}</div>
-          <div class="margin-bottom">[六月到期|{{ currentFreeJune / 100 }}]&nbsp;&nbsp;&nbsp;&nbsp;[12月到期|{{ currentFreeDecember }}]</div>
-          <div>任务金币：{{ currentTask }}</div>
+          <div class="margin-bottom">[六月到期|{{ currentFreeJune / 100 }}]&nbsp;&nbsp;&nbsp;&nbsp;[12月到期|{{ currentFreeDecember / 100 }}]</div>
+          <div>任务金币：{{ currentTask / 100 }}</div>
         </div>
       </el-card>
     </el-col>
@@ -63,8 +66,28 @@
       <el-card class="card-item">
         <el-col class="card-title">全年累计充值人头数</el-col>
         <el-col class="card-title">{{ yearlyRechargeNum }}</el-col>
-        <el-col class="center-card">周同比:{{ wow }}</el-col>
-        <el-col class="center-card">日环比:{{ daily }}%</el-col>
+        <el-col class="center-card">周同比:{{ wow }}%&nbsp;&nbsp;&nbsp;&nbsp;
+        <template v-if="wow > 0">
+                <el-icon style="color:red"><ArrowUpBold /></el-icon>
+              </template>
+              <template v-else-if="wow < 0">
+                <el-icon style="color:forestgreen"><ArrowDownBold /></el-icon>
+              </template>
+              <template v-else>
+                <el-icon style="color:grey"><SemiSelect /></el-icon>
+              </template>
+            </el-col>
+        <el-col class="center-card">日环比:{{ daily }}%&nbsp;&nbsp;&nbsp;&nbsp;
+        <template v-if="daily > 0">
+                <el-icon style="color:red"><ArrowUpBold /></el-icon>
+              </template>
+              <template v-else-if="daily < 0">
+                <el-icon style="color:forestgreen"><ArrowDownBold /></el-icon>
+              </template>
+              <template v-else>
+                <el-icon style="color:grey"><SemiSelect /></el-icon>
+              </template>
+            </el-col>
         <template #footer>
           <el-col class="margin-bottom center-card">昨日充值人数：{{ rechargeNum }}</el-col>
           <el-col class="margin-bottom center-card">其中首充：{{ firstRecharge }}</el-col>
@@ -133,7 +156,7 @@ import * as echarts from 'echarts'
 import { ref, onMounted, nextTick, watch } from 'vue'
 import API from '@/util/http'
 import { ElMessage } from 'element-plus'
-import { Top, Bottom, SemiSelect } from '@element-plus/icons-vue'
+import { ArrowUpBold, ArrowDownBold, SemiSelect } from '@element-plus/icons-vue'
 // 地区数据
 const markets = ref([])
 // 图表相关
@@ -302,6 +325,7 @@ const processChartData = (marketCards) => {
   const chartData = {
     rechargePermanent: [],
     rechargeFree: [],
+    rechargeTask: [],
     consumePermanent: [],
     consumeFree: [],
     consumeTask: []
@@ -311,6 +335,7 @@ const processChartData = (marketCards) => {
   marketCards.forEach(market => {
     chartData.rechargePermanent.push(market.sumRechargePermanent / 100 || 0)
     chartData.rechargeFree.push(market.sumRechargeFree / 100 || 0)
+    chartData.rechargeTask.push(market.sumRechargeTask / 100 || 0)
     chartData.consumePermanent.push(market.sumConsumePermanent / 100 || 0)
     chartData.consumeFree.push(market.sumConsumeFree / 100 || 0)
     chartData.consumeTask.push(market.sumConsumeTask / 100 || 0)
@@ -372,10 +397,19 @@ const updateChart = (chartData) => {
         type: 'bar',
         stack: 'recharge',
         data: chartData.rechargeFree,
-        itemStyle: { color: '#91cc75' }
+        itemStyle: { color: '#91cc75' },
+        barWidth:30
+      },
+      {
+        name: '任务金币',
+        type: 'bar',
+        stack: 'recharge',
+        data: chartData.rechargeTask,
+        itemStyle: { color: '#fac858' },
+        barWidth:30
       }
     ]
-    legend = ['永久金币', '免费金币']
+    legend = ['永久金币', '免费金币','任务金币']
   } else {
     series = [
       {
@@ -391,14 +425,16 @@ const updateChart = (chartData) => {
         type: 'bar',
         stack: 'consume',
         data: chartData.consumeFree,
-        itemStyle: { color: '#91cc75' }
+        itemStyle: { color: '#91cc75' },
+        barWidth:30
       },
       {
         name: '任务金币',
         type: 'bar',
         stack: 'consume',
         data: chartData.consumeTask,
-        itemStyle: { color: '#fac858' }
+        itemStyle: { color: '#fac858' },
+        barWidth:30
       }
     ]
     legend = ['永久金币', '免费金币', '任务金币']