oil-station/fuintAdmin/src/views/indexcomponents/topindex.vue

<template>
<div class="cont-bl">
  <div class="top-box" v-loading="loading">
    <div class="top-sl" style="background: #E5F8FF;" >
      <div class="right-img">
        <img src="./../../assets/new/ri.png" style="width: 28px;height: 28px " alt="">
      </div>
      <div class="box-title">
        <span style="margin-right: 5px">本日流水总额</span>

      </div>
      <div class="box-size">
        {{ this.statisticsData.today_sum ? this.statisticsData.today_sum : 0  }}
      </div>
      <div class="box-but">

        <div class="icon-lv2" v-if="this.statisticsData.today_sum_chain<=0">

          <i  class="el-icon-bottom"></i>
          <span>{{ this.statisticsData.today_sum_chain }}</span>
        </div>


        <div class="icon-lv"  v-else >
          <i class="el-icon-top"></i>
          <span>{{ this.statisticsData.today_sum_chain }}</span>
        </div>

<!--        <div>环比</div>-->
<!--          <div> <i class="el-icon-arrow-right"></i> </div>-->
      </div>
    </div>

    <div class="top-sl" style="background: #FFF4E5;" >
      <div class="right-img">
        <img src="./../../assets/new/zhou.png"  style="width: 28px;height: 28px " alt="">
      </div>
      <div class="box-title">
        <span style="margin-right: 5px">本周流水总额</span>
      </div>
      <div class="box-size">
        {{ this.statisticsData.this_week_sum?this.statisticsData.this_week_sum:0 }}
      </div>
      <div class="box-but">
        <div class="icon-lv2" v-if="this.statisticsData.week_sum_chain<=0">
          <i v-if="this.statisticsData.week_sum_chain==0"  class="el-icon-minus"></i>
          <i v-else class="el-icon-bottom"></i>
          <span>{{ this.statisticsData.week_sum_chain?this.statisticsData.week_sum_chain:0 }}</span>
        </div>
        <div class="icon-lv"  v-else>
          <i class="el-icon-top"></i>
          <span>{{ this.statisticsData.week_sum_chain?this.statisticsData.week_sum_chain:0 }}</span>
        </div>
      </div>
    </div>

    <div class="top-sl" style="background: #E6E5FF;" >
      <div class="right-img">
        <img src="./../../assets/new/yue.png"  style="width: 28px;height: 28px " alt="">
      </div>
      <div class="box-title">
        <span style="margin-right: 5px">本月流水总额</span>
      </div>
      <div class="box-size">
        {{this.statisticsData.this_month_sum?this.statisticsData.this_month_sum:0}}
      </div>
      <div class="box-but">
        <div class="icon-lv2" v-if="this.statisticsData.month_sum_chain<=0">
          <i v-if="this.statisticsData.month_sum_chain==0"  class="el-icon-minus"></i>
          <i v-else class="el-icon-bottom"></i>
          <span>{{ this.statisticsData.month_sum_chain?this.statisticsData.month_sum_chain:0 }}</span>
        </div>
        <div class="icon-lv"  v-else>
          <i class="el-icon-top"></i>
          <span>{{ this.statisticsData.month_sum_chain?this.statisticsData.month_sum_chain:0 }}</span>
        </div>
      </div>
    </div>
    <div class="top-sl" style="background: #E5F8FF;" >
      <div class="right-img">
        <img src="./../../assets/new/ri.png"  style="width: 28px;height: 28px " alt="">
      </div>
      <div class="box-title">
        <span style="margin-right: 5px">本日流水笔数</span>
      </div>
      <div class="box-size">
        {{ this.statisticsData.today_count }}
      </div>
      <div class="box-but">
        <div class="icon-lv2" v-if="this.statisticsData.today_count_chain<=0">
          <i v-if="this.statisticsData.today_count_chain==0"  class="el-icon-minus"></i>
          <i v-else class="el-icon-bottom"></i>
          <span>{{ this.statisticsData.today_count_chain?this.statisticsData.today_count_chain:0 }}</span>
        </div>
        <div class="icon-lv"  v-else>
          <i class="el-icon-top"></i>
          <span>{{ this.statisticsData.today_count_chain?this.statisticsData.today_count_chain:0 }}</span>
        </div>
      </div>
    </div>

    <div class="top-sl" style="background: #FFF4E5;" >
      <div class="right-img">
        <img src="./../../assets/new/zhou.png"  style="width: 28px;height: 28px " alt="">
      </div>
      <div class="box-title">
        <span style="margin-right: 5px">本周流水笔数</span>
      </div>
      <div class="box-size">
        {{ this.statisticsData.this_week_count }}
      </div>
      <div class="box-but">
        <div class="icon-lv2" v-if="this.statisticsData.week_count_chain<=0">
          <i v-if="this.statisticsData.week_count_chain==0"  class="el-icon-minus"></i>
          <i v-else class="el-icon-bottom"></i>
          <span>{{ this.statisticsData.week_count_chain?this.statisticsData.week_count_chain:0 }}</span>
        </div>
        <div class="icon-lv"  v-else>
          <i class="el-icon-top"></i>
          <span>{{ this.statisticsData.week_count_chain?this.statisticsData.week_count_chain:0 }}</span>
        </div>
      </div>
    </div>

    <div class="top-sl" style="background: #E6E5FF;" >
      <div class="right-img">
        <img src="./../../assets/new/yue.png"  style="width: 28px;height: 28px " alt="">
      </div>
      <div class="box-title">
        <span style="margin-right: 5px">本月流水笔数</span>
      </div>
      <div class="box-size">
        {{ this.statisticsData.this_month_count }}
      </div>
      <div class="box-but">
        <div class="icon-lv2" v-if="this.statisticsData.month_count_chain<=0">
          <i v-if="this.statisticsData.month_count_chain==0"  class="el-icon-minus"></i>
          <i v-else class="el-icon-bottom"></i>
          <span>{{ this.statisticsData.month_count_chain?this.statisticsData.month_count_chain:0 }}</span>
        </div>
        <div class="icon-lv"  v-else>
          <i class="el-icon-top"></i>
          <span>{{ this.statisticsData.month_count_chain?this.statisticsData.month_count_chain:0 }}</span>
        </div>
      </div>
    </div>

  </div>
</div>
</template>

<script>
  import { turnoverStatisticsApi } from "@/api/indexStatistics";

export default {
  name: "topindex",
  data(){
    return{
      loading:false,
      statisticsData: {
        today_count: 0,
        today_sum: 0,
        // yesterday_count: 0,
        // yesterday_sum: 0.0,
        today_count_chain: 0.0,
        today_sum_chain: 0.0,
        // last_month_count: 0,
        // last_month_sum: 0.0,
        this_month_count: 0,
        this_month_sum: 0.0,
        month_count_chain: 0.0,
        month_sum_chain: 0.0,
        // last_week_count: 0,
        // last_week_sum: 0.0,
        this_week_count: 0,
        this_week_sum: 0.0,
        week_count_chain: 0.0,
        week_sum_chain: 0.0,

      }
    }
  },
  created() {
    this.getDate()
  },
  methods:{
    getDate() {
      this.loading = true
      turnoverStatisticsApi().then(res=>{
        if (res.code === 200) {
          this.statisticsData = res.data
          // 遍历 this.statisticsData 对象的所有属性
          for (const key in this.statisticsData) {
            if (Object.hasOwnProperty.call(this.statisticsData, key)) {
              // 如果属性值是数字类型，则保留两位小数
              if (typeof this.statisticsData[key] === 'number') {
                this.statisticsData[key] = this.statisticsData[key].toFixed(2);
              }
            }
          }
          this.loading = false
        }

      })
    }
  }

}
</script>

<style scoped>
.cont-bl{
  width: 100%;
  background: #fff;
  border-radius: 14px;
  box-sizing: border-box;
  padding: 15px;
}
.top-box{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.top-sl{
  width: 16%;
  background: #FFFFFF;
  border-radius: 8px;
  background: #FFFFFF;
  box-sizing: border-box;
  padding: 15px;
  box-shadow: 0px 3px 6px 1px rgba(0,0,0,0.1);
  position: relative;

}
.right-img{
  position: absolute;
  right: 10px;
  top: 10px;
  img{
    width: 18px !important;
    height: 18px  !important;
  }
}
.box-title{
  font-size: 14px;
  font-weight: 400;
  color: rgba(0,0,0,0.6);
}
.box-size{
  font-size: 28px;
  font-weight: 600;
  color: rgba(0,0,0,0.9);
  margin-top: 5px;
  margin-bottom: 15px;
}
.box-but{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: rgba(0,0,0,0.6);
  font-size: 14px;
}
.icon-lv{
  //width: 71px;
  width: auto;
  height: 24px;
  padding-left: 10px;
  padding-right: 10px;
  background: #fff;
  border-radius: 3px 3px 3px 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: #00CF4C;
}

.icon-lv2{
  //width: 71px;
  width: auto;
  padding-left: 10px;
  padding-right: 10px;
  height: 24px;
  background: #fff;
  border-radius: 3px 3px 3px 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: #FF4141;
}
</style>