|
@@ -0,0 +1,525 @@
|
|
|
+<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>
|