1

src/components/work/bonus.vue

@@ -34,19 +34,27 @@
             </q-btn>
           </div>
         </div>
-        <div class="row items-center q-my-lg">
+        <div class="row items-center q-my-lg" v-if="tab==1">
           <div class="col no-wrap flex q-pl-lg">
             <img src="../../assets/images/newindex/bonus.png" alt="" style="width:62px;height:62px;">
             <div class="flex content-between q-pl-lg">
-              <div class="full-width block-name">{{tab==1?"月":"年"}}度总奖金</div>
-              <div class="block-num flex items-baseline"><span class="block-icon">¥</span>
-                {{dataList.TotalBonusMoney}}<span class="block-after"></span> </div>
+              <div class="full-width block-name">月度总奖金</div>
+              <div class="block-num flex no-wrap items-baseline"><span class="block-icon">¥</span>
+                {{formatPrice(dataList.TotalBonusMoney)||0}}<span class="block-after">{{formatPrice(dataList.TotalBonusMoney,2)}}</span> </div>
             </div>
           </div>
           <div class="q-pr-md">
             <VueApexCharts width="80%" height="105" :options="chartOptions4" :series="series4"></VueApexCharts>
           </div>
         </div>
+        <div class="col no-wrap flex q-py-lg" v-if="tab==2">
+          <img src="../../assets/images/newindex/month.png" alt="" style="width:62px;height:62px;">
+          <div class="flex  content-between q-pl-lg">
+            <div class="full-width block-name">达标月份</div>
+            <div class="block-num flex items-baseline">
+              {{dataList.ReachCount}}<span class="block-after">个月</span> </div>
+          </div>
+        </div>
         <template v-if="tab==1">
           <div class="list-box">
             <div class="list flex no-wrap items-center">
@@ -111,17 +119,16 @@
           </div>
         </template>
         <template v-if="tab==2">
-          <div class="list-box">
-            <div class="list flex no-wrap items-center">
-              <div class="name">达标月份</div>
-              <div class="progress"> <span class="cur">{{dataList.ReachCount}}</span></div>
-            </div>
-            <div class="list flex no-wrap items-center">
-              <div class="name">累计金额</div>
-              <div class="progress"><span class="cur">{{dataList.TotalBonusMoney}}</span></div>
+          <div class="col no-wrap flex q-my-lg " style="border-top:1px solid #EAEBF0;padding-top:48px">
+            <img src="../../assets/images/newindex/bonus2.png" alt="" style="width:62px;height:62px;">
+            <div class="flex content-between q-pl-lg">
+              <div class="full-width block-name">累计金额</div>
+              <div class="block-num flex no-wrap items-baseline"><span class="block-icon">¥</span>
+                {{formatPrice(dataList.TotalBonusMoney)||0}}<span class="block-after">{{formatPrice(dataList.TotalBonusMoney,2)}}</span> </div>
             </div>
           </div>
         </template>
+
       </div>
     </q-card>
   </div>
@@ -131,6 +138,7 @@
     queryPersonnelBonusStatic
   } from '../../api/course/index'
   import VueApexCharts from "vue-apexcharts";
+  import {formatPrice} from '../../utils/formatPrice'
   export default {
     components: {
       VueApexCharts
@@ -178,14 +186,18 @@
 
     },
     mounted() {
+      const date = new Date();
+      const year = date.getFullYear(); //获取完整的年份(4位)
+      const month = date.getMonth()+1;
+      this.date=year+'-'+month;
       this.getList();
-
     },
     methods: {
+      formatPrice,
       //计算百分比
       calcpercentage(startNum, totalNum) {
         var percent = Number(startNum) / Number(totalNum);
-        return percent.toFixed(2);
+        return Number(percent.toFixed(2));
       },
       //点击切换
       checkTab(type) {
@@ -216,6 +228,7 @@
           //月度
           if (this.qMsg.Type == 1) {
             this.qMsg.Month = MonthStr;
+            this.data
           }
           //年度
           else {
@@ -366,7 +379,7 @@
         font-size: 14px;
         font-weight: 500;
         color: #999999;
-        white-space:nowrap;
+        white-space: nowrap;
       }
     }
   }

src/components/work/commission.vue

@@ -13,7 +13,7 @@
       </div>
       <div>
         <el-date-picker v-model="msg.Month" value-format="yyyy-MM" size="small" :type="elDateType" style="width:110px"
-          :placeholder="elDatePlaceholder" class="q-mr-sm" @change="getData">
+          :placeholder="elDatePlaceholder" class="q-mr-sm" @change="getData" :clearable="false">
         </el-date-picker>
         <q-btn class="btn_bg" dense flat icon="more_horiz">
           <q-menu auto-close>
@@ -39,7 +39,7 @@
         <div class="flex content-between q-pl-lg" style="height:62px">
           <div class="full-width block-name">本月交易额</div>
           <div class="block-num flex no-wrap items-baseline"><span
-              class="block-icon">¥</span>{{formatPrice(commissionData.TotalSaleMoney,1)}}<span
+              class="block-icon">¥</span>{{formatPrice(commissionData.TotalSaleMoney,1)||0}}<span
               class="block-after">{{formatPrice(commissionData.TotalSaleMoney,2)}}</span> </div>
         </div>
       </div>
@@ -72,7 +72,7 @@
         <div class="flex content-between q-pl-lg">
           <div class="full-width block-name">提成</div>
           <div class="block-num flex no-wrap items-baseline"><span class="block-icon">¥</span>
-            {{formatInt(commissionData.MonthCommission)}}<span
+            {{formatInt(commissionData.MonthCommission)||0}}<span
               class="block-after">{{formatDecimal(commissionData.MonthCommission)}}</span> </div>
         </div>
       </div>
@@ -80,7 +80,7 @@
         <div class="statistic-block flex wrap justify-center content-center">
           <div class="statistic-price full-width flex no-wrap justify-center items-baseline">
             <span class="before">¥</span>
-            {{formatInt(commissionData.TotalCommission)}}
+            {{formatInt(commissionData.TotalCommission)||0}}
             <span class="after">{{formatDecimal(commissionData.TotalCommission)}}</span>
           </div>
           <div class="statistic-name">
@@ -90,7 +90,7 @@
         <div class="statistic-block flex wrap justify-center content-center">
           <div class="statistic-price full-width flex no-wrap justify-center items-baseline">
             <span class="before">¥</span>
-            {{formatInt(commissionData.GiveOutCommission)}}
+            {{formatInt(commissionData.GiveOutCommission)||0}}
             <span class="after">{{formatDecimal(commissionData.GiveOutCommission)}}</span>
           </div>
           <div class="statistic-name">
@@ -100,7 +100,7 @@
         <div class="statistic-block flex wrap justify-center content-center">
           <div class="statistic-price full-width flex justify-center items-baseline">
             <span class="before">¥</span>
-            {{formatInt(commissionData.WaitCommission)}}
+            {{formatInt(commissionData.WaitCommission)||0}}
             <span class="after">{{formatDecimal(commissionData.WaitCommission)}}</span>
           </div>
           <div class="statistic-name">
@@ -511,6 +511,7 @@
       font-family: PingFang SC;
       border-radius: 7px;
       line-height:12px;
+      white-space:nowrap;
     }
     .active-rate{
       background-color: #FF7262 !important;

src/utils/formatPrice.js

@@ -5,9 +5,9 @@ export const formatPrice = (price, type = 1) => {
     } else if (type == 2) {
         const findDot = Number(price).toFixed(2).toString().indexOf('.')
         if (findDot > -1) {
-            return Number(price).toFixed(2).toString().slice(findDot)
+            return  Number(price).toFixed(2).toString().slice(findDot)
         } else {
-            return '00'
+            return '.00'
         }
     }
 }