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

<template>
<div>
  <div class="top-box" v-loading="loading">
    <div class="top-sl" >
      <div class="box-title">
        <span style="margin-right: 5px">本日流水总额</span>
        <!-- <el-popover
          placement="top-start"
          title="标题"
          width="200"
          trigger="hover"
          content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。">

          <i class="el-icon-warning-outline"  slot="reference" ></i>
        </el-popover> -->
      </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 v-if="this.statisticsData.today_sum_chain==0" class="el-icon-minus"></i>
          <i v-else 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" >
      <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> <i class="el-icon-arrow-right"></i> </div>
      </div>
    </div>

    <div class="top-sl" >
      <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> <i class="el-icon-arrow-right"></i> </div>
      </div>
    </div>

    <div class="top-sl" >
      <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> <i class="el-icon-arrow-right"></i> </div>
      </div>
    </div>

    <div class="top-sl" >
      <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-lv">
          <i class="el-icon-bottom"></i>
          <span>{{ this.statisticsData.week_count_chain }}%</span>
        </div> -->


        <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> <i class="el-icon-arrow-right"></i> </div>
      </div>
    </div>

    <div class="top-sl" >
      <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-lv">
          <i class="el-icon-bottom"></i>
          <span>{{ this.statisticsData.month_count_chain }}%</span>
        </div> -->



        <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> <i class="el-icon-arrow-right"></i> </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>
.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-title{
  font-size: 14px;
  font-weight: 400;
  color: rgba(0,0,0,0.6);
}
.box-size{
  font-size: 28px;
  font-weight: 400;
  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: #E3F9E9;
  border-radius: 3px 3px 3px 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: #2BA471;
}

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