JDD-SAAS/Yijia-SaaS/yijia-ui/src/views/dataSource/saleReport.vue

<template>
  <div>
    <div>
      <span  style="color:#ff9955;font-size:25px;" >|</span><span style="font-size:20px;">数据概览</span>
      <el-form :model="queryParams" style="margin-left: 20px;" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
        <el-form-item>
          <el-button  size="mini" @click="dayDataSource">今天</el-button>
          <el-button  size="mini" @click="yesDataSource">昨天</el-button>
          <el-button  size="mini" @click="workDataSource">本周</el-button>
          <el-button  size="mini" @click="monthDataSource">本月</el-button>
          <el-date-picker style="margin: 0px 10px;"
            v-model="dateRangeCreatedDate"
            type="daterange"
            size="mini"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
          </el-date-picker>
          <el-button  size="mini" @click="queryDataSource">查询</el-button>
        </el-form-item>
      </el-form>
      <el-row :gutter="10" class="panel-group">
        <el-col :xs="12" :sm="12" :lg="6" >
          <div class="flex xiaoliang">
            <div style="line-height: 62px;font-size: 44px;">
              {{ form.zongliters }}L
            </div>
            <div style="font-size: 28px;">
              总销量
            </div>
          </div>
        </el-col>
        <el-col :xs="12" :sm="12" :lg="6">
          <div  class="flex xiaoe">
            <div style="line-height: 62px;font-size: 44px;">
              {{ form.zongAmt }}元
            </div>
            <div style="font-size: 28px;">
              总金额
            </div>
          </div>
        </el-col>
        <el-col   :xs="12" :sm="12" :lg="6">
          <div class="flex qiyou">
            <div style="font-size: 28px;margin-top: -80px;">  汽油  </div>
            <div class="flex-qy" style="margin-top: 30px;">
              <div class="flex-qy-sx"  style="margin-right: 25px;">
                <div style="font-size: 36px;" >
                  {{ form.qyliters }}L
                </div>
                <div style="font-size: 22px;">升数</div>
              </div>
              <div class="flex-qy-sx"  style="margin-left: 25px;">
                <div style="font-size: 36px;">
                  {{ form.qyamt }}元
                </div>
                <div style="font-size: 22px;">金额</div>
              </div>
            </div>
          </div>
        </el-col>
        <el-col  :xs="12" :sm="12" :lg="6">
          <div class="flex chaiyou">
            <div style="font-size: 28px;margin-top: -80px;">  柴油  </div>
            <div class="flex-qy" style="margin-top: 30px;">
              <div class="flex-qy-sx" style="margin-right: 25px;">
                <div style="font-size: 36px;">{{ form.cyliters }}L</div>
                <div style="font-size: 22px;">升数</div>
              </div>
              <div class="flex-qy-sx" style="margin-left: 25px;">
                <div style="font-size: 36px;">{{ form.cyamt }}元</div>
                <div style="font-size: 22px;">金额</div>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
    <div style="width:100%; height: 181px;background: #FFFFFF;">
      <span  style="color:#ff9955;font-size:25px;" >|</span><span style="font-size:20px;">收入概览</span>
      <el-row style="display:flex; align-items:center;justify-content:center;width:100%; height: 100%;">
        <el-col :xs="12" :sm="12" :lg="3" >
          <div class="flex-sr">
            <div>
              <span class="sr-font">{{ form.wxAmt }}</span>
            </div>
            <div>微信(元)</div>
          </div>
        </el-col>
        <el-col :xs="12" :sm="12" :lg="3">
          <div class="flex-sr">
            <div><span class="sr-font">{{ form.zfbAmt }}</span></div>
            <div>支付宝（元）</div>
          </div>
        </el-col>
        <el-col :xs="12" :sm="12" :lg="3">
          <div class="flex-sr">
            <div>
              <span class="sr-font">{{ form.xjAmt }}</span>
            </div>
            <div >现金（元）</div>
          </div>
        </el-col>
        <el-col :xs="12" :sm="12" :lg="3">
          <div class="flex-sr">
            <div>
              <span class="sr-font">{{ form.posAmt }}</span>
            </div>
            <div >POS（元）</div>
          </div>
        </el-col>
        <el-col :xs="12" :sm="12" :lg="3">
          <div class="flex-sr">
            <div>
              <span class="sr-font">{{ form.didiAppAmt }}</span>
            </div>
            <div>滴滴APP（元）</div>
          </div>
        </el-col>
        <el-col :xs="12" :sm="12" :lg="3">
          <div class="flex-sr">
            <div>
              <span class="sr-font">{{ form.tyAppAmt }}</span>
            </div>
            <div>团油APP（元）</div>
          </div>
        </el-col>
        <el-col :xs="12" :sm="12" :lg="3">
          <div class="flex-sr">
            <div>
              <span class="sr-font">{{ form.otherAmt }}</span>
            </div>
            <div>其他(元)</div>
          </div>
        </el-col>
      </el-row>
    </div>
    <div style="width:100%; height: 181px;">
      <span  style="color:#ff9955;font-size:25px;" >|</span><span style="font-size:20px;">今日数据</span>
      <el-row style="display:flex; align-items:center;justify-content:center;width:100%; height: 100%;">
        <el-col :xs="12" :sm="12" :lg="3">
          <div class="flex-sr">
            <div>
              <span>0</span>
            </div>
            <div>充值金额(元)</div>
          </div>
        </el-col>
        <el-col :xs="12" :sm="12" :lg="3">
          <div class="flex-sr">
            <div>
              <span>0</span>
            </div>
            <div>会员消费金额（元）</div>
          </div>
        </el-col>
        <el-col :xs="12" :sm="12" :lg="3">
          <div class="flex-sr">
            <div><span>0</span></div>
            <div>会员余额（元）</div>
          </div>
        </el-col>
        <el-col :xs="12" :sm="12" :lg="3">
          <div class="flex-sr">
            <div><span>0</span></div>
            <div>新增会员(人)</div>
          </div>
        </el-col>
        <el-col :xs="12" :sm="12" :lg="3">
          <div class="flex-sr">
            <div><span>0</span></div>
            <div>会员总数（人）</div>
          </div>
        </el-col>
        <el-col :xs="12" :sm="12" :lg="3">
          <div class="flex-sr">
            <div><span>0</span></div>
            <div>营销费用(元)</div>
          </div>
        </el-col>
        <el-col :xs="12" :sm="12" :lg="3">
          <div class="flex-sr">
            <div><span>0</span></div>
            <div>营销产出比(%)</div>
          </div>
        </el-col>
      </el-row>
    </div>
<!--    <span  style="color:#ff9955;font-size:25px;" >|</span><span style="font-size:20px;">数据环比</span>-->
<!--    <el-row>-->
<!--      <el-col :span="6"><div class="grid-content bg-purple">汽油升数环比</div></el-col>-->
<!--      <el-col :span="6"><div class="grid-content bg-purple-light">柴油升数环比</div></el-col>-->
<!--      <el-col :span="6"><div class="grid-content bg-purple">总升数环比</div></el-col>-->
<!--      <el-col :span="6"><div class="grid-content bg-purple-light">总金额环比</div></el-col>-->
<!--    </el-row>-->
  </div>
</template>

<script>
  import { listSum,listOilType,listViewData } from "@/api/dataSource/saleReport";

export default {
  name: "source",
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 优惠劵管理表格数据
      couponList: [],
      dateRangeCreatedDate:[],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        createdDate: null,
        stationNo: null,
        stationName: null,
        beginTime:null,
        endTime:null
      },
      // 表单参数
      form: {
        zongAmt:0,
        zongliters:0,
        qyamt:0,
        cyamt:0,
        qyliters:0,
        cyliters:0,
        wxAmt:0,
        zfbAmt:0,
        xjAmt:0,
        didiAppAmt:0,
        tyAppAmt:0,
        otherAmt:0,
        memberAmt:0,
        posAmt:0
      },
      // 表单校验
      rules: {
      }
    };
  },
  created() {
    this.dayDataSource();
  },
  methods: {
    /** 查询优惠劵管理列表 */
    getList() {
      listSum(this.queryParams).then(response => {
        if(response.hasOwnProperty('data')){
          this.form.zongAmt = response.data.amt;
          this.form.zongliters = response.data.orderLiters;
        }

      });
      listOilType(this.queryParams).then(response => {
        if(response.hasOwnProperty('rows')){
          for(let i in response.rows){
            if(response.rows[i].oilType==="2"){
              this.form.qyamt=response.rows[i].amt;
              this.form.qyliters=response.rows[i].orderLiters;
            }else if(response.rows[i].oilType==="1"){
              this.form.cyamt=response.rows[i].amt;
              this.form.cyliters=response.rows[i].orderLiters;
            }
          }
        }
      });
      listViewData(this.queryParams).then(response => {
        if(response.hasOwnProperty('data')){
          if(response.data.wxAmt){
            this.form.wxAmt = response.data.wxAmt;
          }else{
            this.form.wxAmt = 0;
          }
          if(response.data.zfbAmt){
            this.form.zfbAmt = response.data.zfbAmt;
          }else{
            this.form.zfbAmt = 0;
          }
          if(response.data.xjAmt){
            this.form.xjAmt = response.data.xjAmt;
          }else{
            this.form.xjAmt = 0;
          }
          if(response.data.didiAppAmt){
            this.form.didiAppAmt = response.data.didiAppAmt;
          }else{
            this.form.didiAppAmt = 0;
          }
          if(response.data.tyAppAmt){
            this.form.tyAppAmt = response.data.tyAppAmt;
          }else{
            this.form.tyAppAmt = 0;
          }
          if(response.data.otherAmt){
            this.form.otherAmt = response.data.otherAmt;
          }else{
            this.form.otherAmt = 0;
          }
          if(response.data.memberAmt){
            this.form.memberAmt = response.data.memberAmt;
          }else{
            this.form.memberAmt = 0;
          }
          if(response.data.posAmt){
            this.form.posAmt = response.data.posAmt;
          }else{
            this.form.posAmt = 0;
          }
        }
      });
    },
    //本日的数据
    dayDataSource(){
      this.reset();
      this.queryParams.beginTime=this.getNowFormatDate(new Date());
      this.queryParams.endTime =this.getEndFormatDate(new Date());
      this.getList();
    },
    //昨天的数据
    yesDataSource(){
      this.reset();
      this.queryParams.beginTime=this.getFormatDate(new Date());
      this.queryParams.endTime =this.getNowFormatDate(new Date());
      this.getList();
    },
    //本周的数据
    workDataSource(){
      this.reset();
      this.queryParams.beginTime=this.getDates();
      this.queryParams.endTime =this.getEndFormatDate(new Date());
      this.getList();
    },
    //本月数据
    monthDataSource(){
      this.reset();
      this.queryParams.beginTime=this.getMonthDate();
      this.queryParams.endTime =this.getEndFormatDate(new Date());
      this.getList();
    },
    //按照指定日期
    queryDataSource(){
      this.reset();
      this.queryParams.beginTime =this.dateRangeCreatedDate[0];
      this.queryParams.endTime = this.dateRangeCreatedDate[1];
      this.getList();
    },
    //今天
    getNowFormatDate(date){
      let seperator1="-";
      let month=date.getMonth()+1;
      let strDate=date.getDate();
      if (month>=1&&month<=9){
        month="0"+month;
      }
      if (strDate>=0&&strDate<=9){
        strDate="0"+strDate;
      }
      let currentdate=date.getFullYear()+seperator1+month+seperator1+strDate;
      return currentdate;
    },
    //明天
    getEndFormatDate(myDate){
      let date = myDate.getDate();
      date = date +1;
      myDate.setDate(date);
      let seperator1="-";
      let month=myDate.getMonth()+1;
      let strDate=myDate.getDate();
      if (month>=1&&month<=9){
        month="0"+month;
      }
      if (strDate>=0&&strDate<=9){
        strDate="0"+strDate;
      }
      let currentdate=myDate.getFullYear()+seperator1+month+seperator1+strDate;
      return currentdate;
    },
    //昨天
    getFormatDate(myDate){
      let date = myDate.getDate();
      date = date - 1;
      myDate.setDate(date);
      let seperator1="-";
      let month=myDate.getMonth()+1;
      let strDate=myDate.getDate();
      if (month>=1&&month<=9){
        month="0"+month;
      }
      if (strDate>=0&&strDate<=9){
        strDate="0"+strDate;
      }
      let currentdate=myDate.getFullYear()+seperator1+month+seperator1+strDate;
      return currentdate;
    },
    //本周
    getDates() {
      var new_Date = new Date()
      var timesStamp = new_Date.getTime();
      var currenDay = new_Date.getDay();
      var dates = new Date(timesStamp + 24 * 60 * 60 * 1000 * (0 - (currenDay + 6) % 7)).toLocaleDateString().replace(/[年月]/g, '-').replace(/[日上下午]/g, '');
      let s=dates.replace(/-/g,"/");
      var dt =new Date(s);
      var m = dt.getMonth()+1;
      var d = dt.getDate();
      m = m<10?"0"+m:m;
      d = d<10?"0"+d:d;
      dates= dt.getFullYear() +"-"+ m+"-" + d
      return dates;
    },
    /*本月*/
    getMonthDate(){
      let date=new Date();
      let seperator1="-";
      let month=date.getMonth()+1;
      if (month>=1&&month<=9){
        month="0"+month;
      }
      let currentdate=date.getFullYear()+seperator1+month+seperator1+"01";
      return currentdate;
    },
    // 表单重置
    reset() {
      this.queryParams = {
        createdDate: null,
        stationNo: null,
        stationName: null
      };
      this.form = {
          zongAmt:0,
          zongliters:0,
          qyamt:0,
          cyamt:0,
          qyliters:0,
          cyliters:0,
          wxAmt:0,
          zfbAmt:0,
          xjAmt:0,
          didiAppAmt:0,
          tyAppAmt:0,
          otherAmt:0,
          memberAmt:0,
          posAmt:0
      };
    }
  },


};
</script>
<style lang="scss" scoped>
  .flex{
    display:flex;
    align-items:center;
    justify-content:center;
    width: 100%;
    height: 270px;
    flex-direction:column;

  }
  .xiaoliang{
    background-image: url('../../assets/image/bj-1.png');
    background-size: 100% 100%;
  }
  .xiaoe{
    background-image: url('../../assets/image/bj-02.png');
    background-size: 100% 100%;
  }
  .qiyou{
    background-image: url('../../assets/image/bj-3.png');
    background-size: 100% 100%;
  }
  .chaiyou{
    background-image: url('../../assets/image/bj-4.png');
    background-size: 100% 100%;
  }
  .flex-qy{
    display:flex;
    align-items:center;
    justify-content:center;
  }
  .flex-qy-sx{
    display:flex;
    align-items:center;
    justify-content:center;
    flex-direction:column;
  }
  .panel-group {
    padding-left: 10px;
  }

  .flex-sr{
    display:flex;
    align-items:center;
    justify-content:center;
    width: 100%;
    flex-direction:column;
  }
  .sr-font{
    font-size: 20px;
    color: #F4A645;
  }

</style>