SAAS-FRONTEND/src/views/overview/Overview_LngSummary.vue

<template>
  <div>
    <div>
      <span style="color: #ff9955; font-size: 25px">|</span
      ><span style="font-size: 20px">数据概览</span>
      <el-form
        style="margin-left: 20px"
        ref="queryForm"
        :inline="true"
        v-show="showSearch"
        label-width="68px"
      >
        <el-form-item>
          <el-button size="mini" @click="getData(0)">今天</el-button>
          <el-button size="mini" @click="getData(1)">昨天</el-button>
          <el-button size="mini" @click="getData(2)">本周</el-button>
          <el-button size="mini" @click="getData(3)">本月</el-button>
          <el-date-picker
            style="margin: 0px 10px"
            v-model="dateRangeCreatedDate"
            type="datetimerange"
            value-format="yyyy-MM-dd HH:mm:ss"
            size="mini"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          >
          </el-date-picker>
          <el-button type="cyan" size="mini" @click="getData(4)"
            >查询</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: 2vw">
              {{ form.zongliters }}
            </div>
            <div style="font-size: 2vw">总销量(L)</div>
          </div>
        </el-col>
        <el-col :xs="12" :sm="12" :lg="6">
          <div class="flex xiaoe">
            <div style="line-height: 62px; font-size: 2vw">
              {{ form.zongAmt }}
            </div>
            <div style="font-size: 2vw">总金额(元)</div>
          </div>
        </el-col>
        <el-col :xs="12" :sm="12" :lg="6">
          <div class="flex qiyou">
            <div style="font-size: 28px; margin-top: -20px">汽油</div>
            <div class="flex-qy" style="margin-top: 30px">
              <div class="flex-qy-sx" style="margin-right: 10px">
                <div style="font-size: 1.5vw">{{ form.qyliters }}</div>
                <div style="font-size: 1.5vw">升数(L)</div>
              </div>
              <div class="flex-qy-sx" style="margin-left: 10px">
                <div style="font-size: 1.5vw">{{ form.qyamt }}</div>
                <div style="font-size: 1.5vw">金额(元)</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: -20px">柴油</div>
            <div class="flex-qy" style="margin-top: 30px">
              <div class="flex-qy-sx" style="margin-right: 10px">
                <div style="font-size: 1.5vw">{{ form.cyliters }}</div>
                <div style="font-size: 1.5vw">升数(L)</div>
              </div>
              <div class="flex-qy-sx" style="margin-left: 10px">
                <div style="font-size: 1.5vw">{{ form.cyamt }}</div>
                <div style="font-size: 1.5vw">金额(元)</div>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
    <div style="width: 100%; height: 151px; 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: 151px">
      <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">{{ infoFrom.czAmt }}</span>
            </div>
            <div>充值金额(元)</div>
          </div>
        </el-col>
        <el-col :xs="12" :sm="12" :lg="3">
          <div class="flex-sr">
            <div>
              <span class="sr-font">{{ infoFrom.xfAmt }}</span>
            </div>
            <div>消费金额(元)</div>
          </div>
        </el-col>
        <el-col :xs="12" :sm="12" :lg="3">
          <div class="flex-sr">
            <div>
              <span class="sr-font"> 0 </span>
            </div>
            <div>余额(元)</div>
          </div>
        </el-col>
        <el-col :xs="12" :sm="12" :lg="3">
          <div class="flex-sr">
            <div>
              <span class="sr-font">{{ infoFrom.jrhy }}</span>
            </div>
            <div>新增电子卡(个)</div>
          </div>
        </el-col>
        <el-col :xs="12" :sm="12" :lg="3">
          <div class="flex-sr">
            <div>
              <span class="sr-font"> 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>
  </div>
</template>

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

export default {
  name: "Overview_LngSummary",
  data() {
    return {
      // 显示搜索条件
      showSearch: true,
      dateRangeCreatedDate: [],
      // 数据概览 和 收入概览
      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,
      },

      // 今日数据
      infoFrom: {
        czAmt: 0,
        xfAmt: 0,
        yeAmt: 0,
        jrhy: 0,
        zonghy: 0,
      },
      // 表单校验
      rules: {},
    };
  },
  created() {
    this.getData(0);
  },
  methods: {
    /** 查询优惠劵管理列表 */
    getList(query) {
      listSum(query).then((response) => {
        if (response.data!=null ) {
          this.form.zongAmt = response.data.amt;
          this.form.zongliters = response.data.orderLiters;
        }
      });
      listOilType(query).then((response) => {
        if (response.hasOwnProperty("rows")) {
          for (let i in response.rows) {
            if (response.rows[i].oilType === "1") {
              this.form.qyamt = response.rows[i].amt;
              this.form.qyliters = response.rows[i].orderLiters;
            } else if (response.rows[i].oilType === "2") {
              this.form.cyamt = response.rows[i].amt;
              this.form.cyliters = response.rows[i].orderLiters;
            }
          }
        }
      });
      listViewData(query).then((response) => {
        if (response.data!=null ) {
          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;
          }
        }
      });
    },
    //本日的数据
    getTodayList(query) {
      // 查询汇总充值金额
      listCZXFData(query).then((response) => {
        if (response.data!=null ) {
          if (response.data.czAmt) {
            this.infoFrom.czAmt = response.data.czAmt;
          } else {
            this.infoFrom.czAmt = 0;
          }
          if (response.data.xfAmt) {
            this.infoFrom.xfAmt = response.data.xfAmt;
          } else {
            this.infoFrom.xfAmt = 0;
          }
        }
      });
     
      // 汇总电子卡数据
      listHYData(query).then((response) => {
        if (response.data!=null ) {
          if (response.data.amt) {
            this.infoFrom.yeAmt = response.data.amt;
          } else {
            this.infoFrom.yeAmt = 0;
          }
          if (response.data.num) {
            this.infoFrom.zonghy = response.data.num;
          } else {
            this.infoFrom.zonghy = 0;
          }
        }
      });
      // 今日汇总数据
      listJRHYData(query).then((response) => {
        if (response.data!=null ) {
          if (response.data.num) {
            this.infoFrom.jrhy = response.data.num;
          } else {
            this.infoFrom.jrhy = 0;
          }
        }
      });
    },
    getData(type) {
      let day;
      this.reset()
      const query = {
        stationId: null,
        createdDate: null,
        stationName: null,
        beginTime: null,
        endTime: null,
        levelId: this.levelId
      };
      switch (type) {
        case 0: // 今日
          query.beginTime = this.dateCalculate();
          query.endTime = this.dateCalculate(1);
          this.getTodayList(query);
          break;
        case 1: // 昨天
          query.beginTime = this.dateCalculate(-1);
          query.endTime = this.dateCalculate();
          break;
        case 2: // 本周
          day = new Date().getDay();
          day = day === 0 ? 7 : day;
          day = -(day - 1);
          query.beginTime = this.dateCalculate(day);
          query.endTime = this.dateCalculate(1);
          break;
        case 3: // 本月
          day = new Date().getDay();
          let datetime =new Date();
          query.beginTime =datetime.getFullYear() +"-" + (new Date().getMonth() + 1) +
          "-01 00:00:00";
           //query.beginTime = this .dateCalculate(day);
          query.endTime = this.dateCalculate(1);
          break;
        case 4: // 指定日期
          query.beginTime = this.dateRangeCreatedDate[0];
          query.endTime = this.dateRangeCreatedDate[1];
        default:
          console.log("switch");
      }
      this.getList(query)
    },
    

    dateCalculate(num = 0, date = false) {
      if (!date) {
        date = new Date(); //没有传入值时,默认是当前日期
        date =
          date.getFullYear() +
          "-" +
          (date.getMonth() + 1) +
          "-" +
          date.getDate();
      }
      date += " 00:00:00"; //设置为当天凌晨12点
      date = date.replace(/-/g, '/');
      date = Date.parse(new Date(date)) / 1000; //转换为时间戳
      date += 86400 * num; //修改后的时间戳
      var newDate = new Date(parseInt(date) * 1000); //转换为时间
      return (
        newDate.getFullYear() +
        "-" +
        (newDate.getMonth() + 1) +
        "-" +
        newDate.getDate()
      );
    },
    // 表单重置
    reset() {
      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: 170px;
  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>