order-ui-pc/src/views/bigScreen/bigScreenOld/datavScr/centerLeft1.vue

<template>
  <div id="centerLeft1">
    <div class="bg-color-black">
      <div class="d-flex pt-2 pl-2">
        <div class="d-flex" style="display:flex;">
          <span class="fs-xl text mx-2" style="margin-right:8px;">今日销量与采购</span>
          <dv-decoration-3 class="dv-dec-3" />
        </div>
      </div>
      <div class="d-flex jc-center">
      </div>

      <div class="bottom-data">
        <h3 class="title">今日销量</h3>
        <div class="item-box mt-2">
            <div class="d-flex">
              <span class="cex">{{datatodaysalesvolume.orders_number}}</span>
            </div>
            <p class="text" style="text-align: center;">
              今日销售单数
              <span class="colorYellow">(单)</span>
            </p>
        </div>

        <div class="item-box mt-2">
            <div class="d-flex">
              <span class="cex">{{datatodaysalesvolume.money | getNum}}</span>
            </div>
            <p class="text" style="text-align: center;">
              今日销售金额
              <span class="colorYellow">(元)</span>
            </p>
        </div>
        <h3 class="title">今日采购</h3>
        <div class="item-box mt-2">
            <div class="d-flex">
              <span class="cex">{{datatodaypurchase.orders_number}}</span>
            </div>
            <p class="text" style="text-align: center;">
              采购订单数量
              <span class="colorYellow">(单)</span>
            </p>
        </div>
        <div class="item-box mt-2">
            <div class="d-flex">
              <span class="cex">{{datatodaypurchase.good_num}}</span>
            </div>
            <p class="text" style="text-align: center;">
              商品数量
              <span class="colorYellow">(件)</span>
            </p>
        </div>
        <div class="item-box mt-2">
            <div class="d-flex">
              <span class="cex">{{datatodaypurchase.consult_info_total}}</span>
            </div>
            <p class="text" style="text-align: center;">
              竞价单数
              <span class="colorYellow">(单)</span>
            </p>
        </div>
        <div class="item-box mt-2">
            <div class="d-flex">
              <span class="cex">{{datatodaypurchase.consult_bids_total}}</span>
            </div>
            <p class="text" style="text-align: center;">
              反馈商品数
              <span class="colorYellow">(件)</span>
            </p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import asyncRequest from "@/apis/service/bigScreen";
// import resToken from "@/mixins/resToken";
export default {
  data() {
    return {
   
      datatodaysalesvolume:{},
  
      datatodaypurchase:{},
    }
  },
  mounted() {
   this.initHttp()
  //  console.log(this.getNum(18990.230))
  },
  methods: {
  async initHttp(){
    
     let res = await asyncRequest.datatodaysalesvolume();
     console.log(res)
     if(res.code == 0){
       this.datatodaysalesvolume = res.data;
      //  console.log(this.datatodaysalesvolume)
     }else{
       this.$message.error(res.message)
       return;
     }

     let res_1 = await asyncRequest.datatodaypurchase();
     if(res_1.code == 0){
      //  console.log(res_1)
       this.datatodaypurchase = res_1.data;
      //  console.log(this.datatodaypurchase)
     }else{
       this.$message.error(res_1.message)
       return;
     }
   },
  getNum(num){
    num = Number(num);
    if(!num) return '0.00';
    if(num > 10000 || num < -10000){
      const moneys = num/10000
      const realVal =parseFloat(moneys).toFixed(2);
      return realVal+"万"
    }else{
      return num.toFixed(2)
    }
  }

   
  },

}
</script>

<style lang="scss" scoped>
$box-width: 300px;
$box-height: 410px;

#centerLeft1 {
  padding: 16px;
  height: $box-height;
  width: 100%;
  border-radius: 10px;
  .bg-color-black {
    height: $box-height - 30px;
    border-radius: 10px;
  }
  .text {
    font-size: 12px;

    color: #c3cbde;
  }
  .dv-dec-3 {
    position: relative;
    width: 100px;
    height: 20px;
    top: -3px;
  }

  .bottom-data {
    .item-box {
      & > div {
        padding-right: 5px;
      }
      font-size: 14px;
      float: right;
      position: relative;
      width: 50%;
      color: #d3d6dd;
      margin-bottom: 20px;
      .dv-digital-flop {
        width: 120px;
        height: 30px;
      }
      // 金币
      .coin {
        position: relative;
        top: 6px;
        font-size: 20px;
        color: #ffc107;
      }
      .colorYellow {
        color: yellowgreen;
      }
      p {
        text-align: center;
      }
    }
  }
  .cex{
    color: #28ffcd;
    width: 100%;
    font-size: 18px;
    text-align: center;
    font-weight: 800;
    display: inline-block;
    margin: 5px 10px;
  }
  .title{
    width: 100%;
    float: left;
    font-size: 16px;
    margin-top: 40px;
    margin-bottom: 15px;
    text-indent: 10px;
    color: #ffbc25;
  }
}
</style>