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

<template>
  <div class="center" >

    <div class="left-box">
      <div class="but-box">
        <div class="hui"><span class="title-hei">油品销售额</span>   </div>

        <div >
          <el-radio-group @change="getOilSales()" v-model="radio"  size="mini">
            <el-radio-button label="7天"></el-radio-button>
            <el-radio-button label="15天"></el-radio-button>
            <el-radio-button label="30天"></el-radio-button>

          </el-radio-group>
        </div>
      </div>

      <div><span>{{radio}}交易金额总计：</span><span class="title-lan">{{sum}}</span> <span>元</span></div>
      <div v-loading="oilLoading" id="ccccc" style="width: 100%; height: 400px;"></div>
    </div>



    <div class="right-box">
        <div class="title-hei">员工销售排行</div>
      <div class="four-box">
        <div class="pm">排名</div>
        <div class="mc">员工名称</div>
        <div class="xs">储值卡销售额</div>
        <div class="xs">屯油卡销售额</div>
        <div class="xs">油品销售额</div>
        <div class="xse">总销售额(万)</div>
      </div>
      <template v-loading="employeLoading" >
        <div class="four-boxx" v-for="(item,index) in employeList" :key="index" >
        <div class="pm">{{index+1}}</div>
        <div class="dis">
          <div class="touxiang">
            <img src="../../../src/assets/images/avatar.png" class="touxiang">
          </div>
          <div class="name">{{item.realName}}</div>
        </div>
        <div class="xs">{{item.cardSum}}</div>
        <div class="xs">{{item.fuelSum}}</div>
        <div class="xs">{{item.oilSum}}</div>
        <div class="xse">{{item.totalSum}}</div>
      </div>
      </template>

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

<script>
import echarts from "echarts";
import { employeeSalesApi,oilSalesApi } from "@/api/indexStatistics";

import { parseTime } from "@/utils/fuint"

export default {
  name: "centenrindex",
  data(){
    return{
      radio:'7天',
      oilLoading:false,
      employeLoading:false,
      // 时间轴
      timeDate:[],
      oilDate:[],
      sum:0,
      employeList:{

      }
    }
  },
  async mounted() {
    await this.getOilSales()
    // this.initChart()
  },
  async created() {
    // this.getOilSales()
    this.getEmployeList()
  },
  methods:{
    // 油品销售
    async getOilSales() {
      this.oilLoading = true
      await oilSalesApi().then(res=>{
          if (res.code === 200) {
            this.timeDate=[]
            this.oilDate=[]
            this.sum = 0
            let dataList = res.data
            if (this.radio === '7天' && dataList.length >= 7) {
              // dataList = dataList.slice(0, 7);
              dataList = dataList.slice(-7);

            } else if (this.radio === '15天' && dataList.length >= 15) {
              // dataList = dataList.slice(0, 15);
              dataList = dataList.slice(-15);

            } else if (this.radio === '30天' && dataList.length >= 30) {
              // dataList = dataList.slice(0, 30);
              dataList = dataList.slice(-30);

            }

            dataList.forEach(element => {
              this.timeDate.push(parseTime(element.sales_day,'{y}-{m}-{d}'));
              this.oilDate.push(element.total_sales);
              this.sum+=element.total_sales
              this.sum = parseFloat(this.sum.toFixed(2));

            });
            this.initChart()
            // this.changeLabel();
            this.oilLoading = false

          }
      })
    },

    getEmployeList() {
      this.employeLoading = true
      employeeSalesApi().then(res=>{
        if(res.code == 200) {
          if (res.data.length >=10) {
            this.employeList = res.data.slice(0, 10);
          } else {
            this.employeList = res.data
          }
          this.employeLoading = false
        }


      })
    },

    changeLabel() {
      if (this.radio === '7天' && this.timeDate.length >= 7) {
        // this.timeDate = this.timeDate.slice(0, 7);
        // this.oilDate = this.oilDate.slice(0, 7);

        this.timeDate = this.timeDate.slice(-7);
        this.oilDate = this.oilDate.slice(-7);
      } else if (this.radio === '15天' && this.timeDate.length >= 15) {
        // this.timeDate = this.timeDate.slice(0, 15);
        // this.oilDate = this.oilDate.slice(0, 15);
        this.timeDate = this.timeDate.slice(-15);
        this.oilDate = this.oilDate.slice(-15);
      } else if (this.radio === '30天' && this.timeDate.length >= 30) {
        // this.timeDate = this.timeDate.slice(0, 30);
        // this.oilDate = this.oilDate.slice(0, 30);
        this.timeDate = this.timeDate.slice(-30);
        this.oilDate = this.oilDate.slice(-30);
      }
      this.initChart()
    },


    initChart() {
      const chart = echarts.init(document.getElementById('ccccc'))

      const option = {
        color: [
          '#77A8F9',
          '#86E1BB',
          '#8195F5',
        ],
        dataset: {
          source: [
            ['product', '#92', '#95', '#98'],

          ]
        },
        xAxis: {
          type: 'category',
          // data: ['2023.1.1', '2023.2.1', '2023.3.1', '2023.4.1', '2023.5.1', '2023.6.1', '2023.7.1']
          data: this.timeDate
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: this.oilDate,
            type: 'line'
          },
          // {
          //   data: [210, 230, 264, 318, 235, 247, 160],


          //   type: 'line'
          // },
          // {
          //   data: [120, 220, 214, 118, 235, 227, 110],
          //   type: 'line'
          // }
        ]
      };

      chart.setOption(option)
    }
  }
}
</script>

<style scoped>
.center{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 10px auto;
}
.left-box{
  width: 49.5%;
  background: #FFFFFF;
  box-sizing: border-box;
  padding: 15px;
  border-radius: 8px;
}
.right-box{
  width: 49.5%;
  background: #FFFFFF;
  box-sizing: border-box;
  padding: 15px;
  border-radius: 8px;
  height: 455px;
  overflow: hidden;
}
.but-box{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.hui{
  font-size: 14px;
  font-weight: 400;
  color: #999999;
}
.title-hei{
  font-size: 18px;
  font-weight: bold;
  color: #1a1a1a;
}
.title-lan{
  font-size: 16px;
  font-weight: bold;
  color: #4F6EE3;
}
.four-box{
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 16px;
  font-weight: 400;
  color: #999999;
}
.four-boxx{
  margin: 10px auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 16px;
  font-weight: 400;
  color: #333333;
}
.touxiang{
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #00acac;
  margin-right: 5px;
  overflow: hidden;
}
.dis{
  width: 30%;
  display: flex;
  align-items: center;

}
.pm{
  width: 10%;
  text-align: center;
}
.mc{
  width: 30%;
  text-align: left;
}
.xs{
  width: 30%;
  text-align: left;
}
.xs{
  width: 30%;
  text-align: center;
}
.xse{
  width: 30%;
  text-align: right;
}
</style>