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

<template>
  <el-scrollbar style="height:100%">
    <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
              style="margin: 0px 10px;"
              size="mini"
              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.qyamt }}元</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-row>
      </div>
      <div style="width:100%; height: 360px;background: #FFFFFF;">
        <span style="color:#ff9955;font-size:25px;">|</span>
        <span style="font-size:20px;">销售情况</span>
        <div ref="myChart" style="width:100%; height: 350px;margin: 0px 25px;"></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.createdDate, '{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="receivableAmt" />
          <el-table-column label="到账" align="center" prop ="receivedAmt"/>
          <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)"
              >详情</el-button>
            </template>
          </el-table-column>
        </el-table>
        <pagination
          v-show="total>0"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="dayReportDetail"
        />
      </div>
      <el-dialog :title="title" width="800px"  :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="receivableAmt" />
          <el-table-column label="实收金额（元）" align="center" prop="amt" />
          <el-table-column label="优惠金额（元）" align="center" prop="discountAmt"  />
          <el-table-column label="优惠劵" align="center" prop="discountCouponAmt" v-if="false"/>
          <el-table-column label="会员支付" align="center" prop="menberAmt" v-if="false" />
          <el-table-column label="微信支付" align="center" prop="wxAmt" v-if="false" />
          <el-table-column label="支付宝支付" align="center" prop="zfbAmt"v-if="false" />
          <el-table-column label="会员充值" align="center" prop v-if="false" />
          <el-table-column label="积分消费" align="center" prop v-if="false" />
        </el-table>
        <pagination
          v-show="total1>0"
          :total="total1"
          :page.sync="queryInfo.pageNum"
          :limit.sync="queryInfo.pageSize"
          @pagination="getLookOrder"
        />
      </el-dialog>
    </div>
  </el-scrollbar>
</template>

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

export default {
  name: "source",
  data() {
    return {
      charts: null,
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      total1: 0,
      // 优惠劵管理表格数据
      couponList: [],
      dayReportDetailsList: [],
      dateRangeCreatedDate: [],
      //x轴数据
      xdata: [],
      //92#汽油数据
      qydata92: [],
      //95#汽油数据
      qydata95: [],
      //97#汽油数据
      qydata97: [],
      //0#柴油数据
      cydata0: [],
      //-10#柴油数据
      cydata10: [],
      //-20#柴油数据
      cydata20: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        createdDate: null,
        stationId:null,
        stationName: null,
        beginTime: null,
        endTime: null,
        payDate: null,
        status:"1"
      },
      // 查询参数
      queryInfo: {
        pageNum: 1,
        pageSize: 10,
        payDate: null,
        status: null,
        createdDate: null,
        beginTime: null,
        endTime: null,
        orderType: null,
        stationId:null
      },
      //日报数据
      dayReportList: [],
      // 表单参数
      form: {
        zongAmt: 0,
        zongliters: 0,
        qyamt: 0,
        cyamt: 0
      },
      // 表单校验
      rules: {}
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.queryParams.beginTime = this.getMonthDate();
      this.queryParams.endTime = this.getEndFormatDate(new Date());
      this.queryParams.stationId=this.$store.selectDeptId;
      setTimeout(() => {
        this.initChart();
      }, 1000);
    });
  },
  created() {
    this.dayDataSource();
    //获取折线图的数据
    this.reset();
    this.queryParams.beginTime = this.getMonthDate();
    this.queryParams.endTime = this.getEndFormatDate(new Date());
    this.queryParams.stationId=this.$store.selectDeptId;
    this.getDatas();
  },
  methods: {
    initChart() {
      // 初始化echarts
      this.charts = echarts.init(this.$refs.myChart, "macarons");
      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#", "0#", "-10#", "-20#"]
          },
          animation: false,
          series: [
            {
              name: "92#",
              itemStyle: {
                normal: {
                  color: "#FF005A",
                  lineStyle: {
                    color: "#FF005A",
                    width: 2
                  }
                }
              },
              smooth: true,
              type: "line",
              data: this.qydata92
            },
            {
              name: "95#",
              smooth: true,
              type: "line",
              itemStyle: {
                normal: {
                  color: "#3888fa",
                  lineStyle: {
                    color: "#3888fa",
                    width: 2
                  }
                }
              },
              data: this.qydata95
            },
            {
              name: "97#",
              smooth: true,
              type: "line",
              itemStyle: {
                normal: {
                  color: "#ffff00",
                  lineStyle: {
                    color: "#ffff00",
                    width: 2
                  }
                }
              },
              data: this.qydata97
            },
            {
              name: "0#",
              smooth: true,
              type: "line",
              itemStyle: {
                normal: {
                  color: "#00ff00",
                  lineStyle: {
                    color: "#00ff00",
                    width: 2
                  }
                }
              },
              data: this.cydata0
            },
            {
              name: "-10#",
              smooth: true,
              type: "line",
              itemStyle: {
                normal: {
                  color: "#00bfff",
                  lineStyle: {
                    color: "#00bfff",
                    width: 2
                  }
                }
              },
              data: this.cydata10
            },
            {
              name: "-20#",
              smooth: true,
              type: "line",
              itemStyle: {
                normal: {
                  color: "#ffb6c1",
                  lineStyle: {
                    color: "#ffb6c1",
                    width: 2
                  }
                }
              },
              data: this.cydata20
              /* animationDuration: 2800,
            animationEasing: 'quadraticOut'*/
            }
          ]
        },
        true
      );
    },
    getXData() {
      return listXdata(this.queryParams).then(response => {
        this.xdata = [];
        if(response.hasOwnProperty('rows')){
          for (let i in response.rows) {
            this.xdata.push(response.rows[i].createdDate);
          }
        }
      });
    },

    getQyData92() {
      return listQydata92(this.queryParams).then(response => {
        this.qydata92 = [];
        if(response.hasOwnProperty('rows')){
          for (let i in response.rows) {
            let data = [];
            data.push(response.rows[i].createdDate);
            data.push(response.rows[i].amt);
            this.qydata92.push(data);
          }
        }
      });
    },

    getQydata95() {
      return listQydata95(this.queryParams).then(response => {
        this.qydata95 = [];
        if(response.hasOwnProperty('rows')){
          for (let i in response.rows) {
            let data = [];
            data.push(response.rows[i].createdDate);
            data.push(response.rows[i].amt);
            this.qydata95.push(data);
          }
        }
      });
    },

    getQydata97() {
      return listQydata97(this.queryParams).then(response => {
        this.qydata97 = [];
        if(response.hasOwnProperty('rows')){
          for (let i in response.rows) {
            let data = [];
            data.push(response.rows[i].createdDate);
            data.push(response.rows[i].amt);
            this.qydata97.push(data);
          }
        }
      });
    },

    getQydata0() {
      return listQydata0(this.queryParams).then(response => {
        this.cydata0 = [];
        if(response.hasOwnProperty('rows')){
          for (let i in response.rows) {
            let data = [];
            data.push(response.rows[i].createdDate);
            data.push(response.rows[i].amt);
            this.cydata0.push(data);
          }
        }
      });
    },

    getQydata10() {
      return listQydata10(this.queryParams).then(response => {
        this.cydata10 = [];
        if(response.hasOwnProperty('rows')){
          for (let i in response.rows) {
            let data = [];
            data.push(response.rows[i].createdDate);
            data.push(response.rows[i].amt);
            this.cydata10.push(data);
          }
        }
      });
    },

    getQydata20() {
      return listQydata20(this.queryParams).then(response => {
        this.cydata20 = [];
        if(response.hasOwnProperty('rows')){
          for (let i in response.rows) {
            let data = [];
            data.push(response.rows[i].createdDate);
            data.push(response.rows[i].amt);
            this.cydata20.push(data);
          }
        }
      });
    },

    //获取折线图用到的数据
    getDatas() {
      Promise.all([
        this.getXData(),
        this.getQyData92(),
        this.getQydata95(),
        this.getQydata97(),
        this.getQydata0(),
        this.getQydata10(),
        this.getQydata20()
      ]).then(res => {
        this.initChart();
      });
    },

    /** 查询优惠劵管理列表 */
    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;
            } else if (response.rows[i].oilType === "1") {
              this.form.cyamt = response.rows[i].amt;
            }
          }
        }
      });
      this.dayReportDetail();
    },
    dayReportDetail(){
      selectDayReportDetail(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.queryParams.stationId=this.$store.selectDeptId;
      this.getList();
    },
    //昨天的数据
    yesDataSource() {
      this.reset();
      this.queryParams.beginTime = this.getFormatDate(new Date());
      this.queryParams.endTime = this.getNowFormatDate(new Date());
      this.queryParams.stationId=this.$store.selectDeptId;
      this.getList();
    },
    //本周的数据
    workDataSource() {
      this.reset();
      this.queryParams.beginTime = this.getDates();
      this.queryParams.endTime = this.getEndFormatDate(new Date());
      this.queryParams.stationId=this.$store.selectDeptId;
      //this.initChart();
      this.getDatas();
      this.getList();
    },

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

    //按照指定日期
    queryDataSource() {
      this.reset();
      this.queryParams.beginTime = this.dateRangeCreatedDate[0];
      this.queryParams.endTime = this.dateRangeCreatedDate[1];
      this.queryParams.stationId=this.$store.selectDeptId;
      this.getDatas();
      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 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,
        stationId: null,
        stationName: null,
        beginTime:null,
        endTime:null
      };
      this.form = {
        zongAmt: 0,
        zongliters: 0,
        qyamt: 0,
        cyamt: 0
      };
    },

    /** 查看详情按钮操作 */
    handleLook(row) {
      this.row =row;
      row.page= this.queryInfo.pageNum;
      row.limit= this.queryInfo.pageSize;
      this.getLookOrder(row);
    },
    getLookOrder(row) {
      const createdDate = this.row.createdDate;
      this.queryInfo.beginTime =createdDate.substring(0,10) +" 00:00:00";
      this.queryInfo.endTime =createdDate.substring(0,10) +" 23:59:59";
      this.queryInfo.status = "1";
      this.queryInfo.pageNum=row.page;
      this.queryInfo.pageSize =row.limit;
      this.queryInfo.orderType = "1";
      this.queryInfo.stationId=this.$store.selectDeptId;
      getDetails(this.queryInfo).then(response => {
        this.dayReportDetailsList = response.rows;
        this.total1 = response.total;
        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>