|
@@ -0,0 +1,349 @@
|
|
|
+<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-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: 181px;background: #FFFFFF;">
|
|
|
+ <span style="color:#ff9955;font-size:25px;" >|</span><span style="font-size:20px;">销售情况</span>
|
|
|
+
|
|
|
+ </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="oilGunNo" />
|
|
|
+ <el-table-column label="销额" align="center" prop="oilName" />
|
|
|
+ <el-table-column label="销量(L)" align="center" prop="stationId" v-if="false" />
|
|
|
+ <el-table-column label="汽油" align="center" prop="stationName" />
|
|
|
+ <el-table-column label="柴油" align="center" prop="stationName" />
|
|
|
+ <el-table-column label="订单数" align="center" prop="stationName" />
|
|
|
+ <el-table-column label="营销费" align="center" prop="stationName" />
|
|
|
+ <el-table-column label="应收" align="center" prop="stationName" />
|
|
|
+ <el-table-column label="到账" align="center" prop="stationName" />
|
|
|
+ <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="handleUpdate(scope.row)"
|
|
|
+ v-hasPermi="['station:gun:edit']"
|
|
|
+ >下载</el-button>
|
|
|
+ <el-button
|
|
|
+ size="mini"
|
|
|
+ type="text"
|
|
|
+ icon="el-icon-delete"
|
|
|
+ @click="handleDelete(scope.row)"
|
|
|
+ v-hasPermi="['station:gun:remove']"
|
|
|
+ >详情</el-button>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import { listSum,listOilType,listDayReport } from "@/api/dataSource/saleReport";
|
|
|
+export default {
|
|
|
+ name: "source",
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ // 遮罩层
|
|
|
+ loading: true,
|
|
|
+ // 选中数组
|
|
|
+ ids: [],
|
|
|
+ // 非单个禁用
|
|
|
+ single: true,
|
|
|
+ // 非多个禁用
|
|
|
+ multiple: true,
|
|
|
+ // 显示搜索条件
|
|
|
+ showSearch: true,
|
|
|
+ // 总条数
|
|
|
+ total: 0,
|
|
|
+ // 优惠劵管理表格数据
|
|
|
+ couponList: [],
|
|
|
+ // 弹出层标题
|
|
|
+ title: "",
|
|
|
+ // 是否显示弹出层
|
|
|
+ open: false,
|
|
|
+ // 查询参数
|
|
|
+ queryParams: {
|
|
|
+ createdDate: null,
|
|
|
+ stationNo: null,
|
|
|
+ stationName: null,
|
|
|
+ beginTime:null,
|
|
|
+ endTime:null
|
|
|
+ },
|
|
|
+ //日报数据
|
|
|
+ dayReportList: [],
|
|
|
+ // 表单参数
|
|
|
+ form: {
|
|
|
+ zongAmt:0,
|
|
|
+ zongliters:0,
|
|
|
+ qyamt:0,
|
|
|
+ cyamt:0
|
|
|
+ },
|
|
|
+ // 表单校验
|
|
|
+ rules: {
|
|
|
+ }
|
|
|
+ };
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.getList();
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ /** 查询优惠劵管理列表 */
|
|
|
+ getList() {
|
|
|
+ listSum(this.queryParams).then(response => {
|
|
|
+ if(response.data==="undefined"){
|
|
|
+ }else{
|
|
|
+ this.form.zongAmt = response.data.amt;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ 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 => {
|
|
|
+ if(response.rows==="undefined"){
|
|
|
+ }else{
|
|
|
+ this.dayReportList = response.rows;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ //本日的数据
|
|
|
+ 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();
|
|
|
+ },
|
|
|
+ //今天
|
|
|
+ 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
|
|
|
+ };
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+
|
|
|
+};
|
|
|
+</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>
|