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

<template>
  <div>
    <div>
      <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
            v-model="dateRangeCreatedDate"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
          </el-date-picker>
          <el-button  size="mini" @click="queryDataSource">查询</el-button>
        </el-form-item>
      </el-form>
      <span  style="color:#ff9955;font-size:25px;" >|</span><span style="font-size:20px;">数据概览</span>
      <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 xiaoliang">
            <div style="line-height: 62px;font-size: 44px;">
              {{ form.cyamt}}元
            </div>
            <div style="font-size: 28px;">
              柴油
            </div>
          </div>
        </el-col>

        <el-col :xs="12" :sm="12" :lg="6" >
          <div class="flex xiaoliang">
            <div style="line-height: 62px;font-size: 44px;">
              {{ form.qyamt }}元
            </div>
            <div style="font-size: 28px;">
              汽油
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
    <div style="width:100%; height: 360px;margin: 0px 30px;background: #FFFFFF;">
      <span  style="color:#ff9955;font-size:25px;" >|</span><span style="font-size:20px;">销售情况</span>
      <div  ref="myChart"  style="width:100%; height: 350px;" ></div>
    </div>
    <div style="width:100%; height: 181px;">
      <span  style="color:#ff9955;font-size:25px;" >|</span><span style="font-size:20px;">详情：</span>
      <el-table v-loading="loading" :data="dayReportList">
        <el-table-column label="日期" align="center" prop="payDate" >
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.payDate, '{y}-{m}-{d}') }}</span>
          </template>
        </el-table-column>
        <el-table-column label="销额" align="center" prop="amt" />
        <el-table-column label="销量（L）" align="center" prop="orderLiters" v-if="false" />
        <el-table-column label="汽油" align="center" prop="qyAmt" />
        <el-table-column label="柴油" align="center" prop="cyAmt" />
        <el-table-column label="订单数" align="center" prop="orderNo" />
        <el-table-column label="营销费" align="center" prop="" />
        <el-table-column label="应收" align="center" prop="menberAmt" />
        <el-table-column label="到账" align="center" prop="" />
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              icon="el-icon-edit"
              @click="handleLook(scope.row)"
              v-hasPermi="['station:gun:list']"
            >详情</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-dialog :title="title" :visible.sync="open"  append-to-body>
      <el-table v-loading="loading" :data="dayReportDetailsList" >
        <el-table-column label="油品" align="center" prop="oilName" />
        <el-table-column label="油枪号" align="center" prop="oilGun" />
        <el-table-column label="销量（L）" align="center" prop="orderLiters"/>
        <el-table-column label="销额（元）" align="center" prop="amt" />
        <el-table-column label="优惠" align="center" prop="" v-if="false" />
        <el-table-column label="优惠卷" align="center" prop="" />
        <el-table-column label="实收" align="center" prop="" />
        <el-table-column label="会员支付" align="center" prop="menberAmt" />
        <el-table-column label="微信支付" align="center" prop="wxAmt" />
        <el-table-column label="支付宝支付" align="center" prop="zfbAmt" />
        <el-table-column label="会员充值" align="center" prop="" v-if="false"/>
        <el-table-column label="积分消费" align="center" prop="" v-if="false"/>

      </el-table>
    </el-dialog>
  </div>
</template>

<script>
import echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
import { listSum,listOilType,listDayReport,getDetails,listXdata,listQydata92,listQydata95,listQydata97 } from "@/api/dataSource/saleReport";

export default {
  name: "source",
  data() {
    return {
      charts: null,
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 优惠劵管理表格数据
      couponList: [],
      dayReportDetailsList: [],
      dateRangeCreatedDate:[],
      //x轴数据
      xdata:[],
      //92#汽油数据
      qydata92:[],
      //95#汽油数据
      qydata95:[],
      //97#汽油数据
      qydata97:[],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        createdDate: null,
        stationNo: null,
        stationName: null,
        beginTime:null,
        endTime:null,
        payDate:null
      },
      //日报数据
      dayReportList: [],
      // 表单参数
      form: {
        zongAmt:0,
        zongliters:0,
        qyamt:0,
        cyamt:0
      },
      // 表单校验
      rules: {
      }
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart();
    });
  },
  created() {
    //获取折线图的数据
    this.reset();
    this.queryParams.beginTime = this.getMonthDate();
    this.queryParams.endTime = this.getEndFormatDate(new Date());
    this.getDatas();
    this.dayDataSource();
    //不加等待时间的话，初始化了echarts,，getDatas的数据没有获取到。等待后数据获取到，重新加载就可以了。
    setTimeout(() =>{
      this.initChart();
    },1000);
  },
  methods: {
    initChart(){
      // 初始化echarts
      this.charts = echarts.init(this.$refs.myChart, 'macarons');
      console.log("xdata",this.xdata);
      this.charts.setOption({
        xAxis: {
          data: this.xdata,
            boundaryGap: false,
            axisTick: {
            show: false
          }
        },
        tooltip: {
          trigger: 'axis',
            axisPointer: {
            type: 'cross'
          },
          padding: [5, 10]
        },
        yAxis: {
          axisTick: {
            show: false
          }
        },
        legend: {
          data: ['92#', '95#','97#']
        },
        series: [{
          name: '92#', itemStyle: {
            normal: {
              color: '#FF005A',
              lineStyle: {
                color: '#FF005A',
                width: 2
              }
            }
          },
          smooth: true,
          type: 'line',
          data: this.qydata92,
          animationDuration: 2800,
          animationEasing: 'cubicInOut'
        },
          {
            name: '95#',
            smooth: true,
            type: 'line',
            itemStyle: {
              normal: {
                color: '#3888fa',
                lineStyle: {
                  color: '#3888fa',
                  width: 2
                },
              }
            },
            data: this.qydata95,
            animationDuration: 2800,
            animationEasing: 'quadraticOut'
          },
          {
            name: '97#',
            smooth: true,
            type: 'line',
            itemStyle: {
              normal: {
                color: '#ffff00',
                lineStyle: {
                  color: '#ffff00',
                  width: 2
                },
              }
            },
            data: this.qydata97,
            animationDuration: 2800,
            animationEasing: 'quadraticOut'
          }]
      });
    },
    //获取折线图用到的数据
    getDatas(){
      listXdata(this.queryParams).then(response => {
        this.xdata=[];
        console.log("查询到的xdata",response.rows);
        if (response.rows === "undefined") {
        } else {
          for (let i in response.rows){
            this.xdata.push(response.rows[i].createdDate);
          }
        }
      });
      listQydata92(this.queryParams).then(response => {
        this.qydata92=[];
        if (response.rows === "undefined") {
        } else {
          for (let i in response.rows){
            this.qydata92.push(response.rows[i].amt);
          }
        }
      });
      listQydata95(this.queryParams).then(response => {
        this.qydata95=[];
        if (response.rows === "undefined") {
        } else {
          for (let i in response.rows){
            this.qydata95.push(response.rows[i].amt);
          }
        }
      });
      listQydata97(this.queryParams).then(response => {
        this.qydata97=[];
        if (response.rows === "undefined") {
        } else {
          for (let i in response.rows){
            this.qydata97.push(response.rows[i].amt);
          }
        }
      });
    },

    /** 查询优惠劵管理列表 */
    getList() {
      listSum(this.queryParams).then(response => {
        if (response.data === "undefined") {
        } else {
          this.form.zongAmt = response.data.amt;
          this.form.zongliters = response.data.orderLiters;
        }
      });
      listOilType(this.queryParams).then(response => {
        if (response.rows === "undefined") {
        } else {
          for (let i in response.rows) {
            if (response.rows[i].oilType === "1") {
              this.form.qyamt = response.rows[i].amt;
            } else if (response.rows[i].oilType === "2") {
              this.form.cyamt = response.rows[i].amt;
            }
          }
        }
      });
      listDayReport(this.queryParams).then(response => {
        this.dayReportList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    //本日的数据
    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.getDatas();
      this.getList();
      setTimeout(() =>{
        this.initChart();
      },1000);
    },

    //本月数据
    monthDataSource() {
      this.reset();
      this.queryParams.beginTime = this.getMonthDate();
      this.queryParams.endTime = this.getEndFormatDate(new Date());
      this.getDatas();
      this.getList();
      this.initChart();
    },

    //按照指定日期
    queryDataSource() {
      this.reset();
      this.queryParams.beginTime = this.dateRangeCreatedDate[0];
      this.queryParams.endTime = this.dateRangeCreatedDate[1];
      this.getDatas();
      this.getList();
      setTimeout(() =>{
        this.initChart();
      },1000);
    },
    //今天
    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 currentdate1 = date.getFullYear() + seperator1 + month + seperator1 + strDate;
      return currentdate1;
    },
    //明天
    getEndFormatDate(myDate) {
      let date = myDate.getDate();
      date = date + 1;
      myDate.setDate(date);
      let seperator2 = "-";
      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 currentdate2 = myDate.getFullYear() + seperator2 + month + seperator2 + strDate;
      return currentdate2;
    },
    //昨天
    getFormatDate(myDate) {
      let date = myDate.getDate();
      date = date - 1;
      myDate.setDate(date);
      let seperator3 = "-";
      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 currentdate3 = myDate.getFullYear() + seperator3 + month + seperator3 + strDate;
      return currentdate3;
    },
    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
      };
    },

    /** 修改按钮操作 */
    handleLook(row) {
      const payDate = row.payDate;
      getDetails(payDate).then(response => {
        this.dayReportDetailsList = response.rows;
        this.open = true;
        this.title = "";
      });
    }
  }

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

  }
  .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>