colexiu-mall-admin/src/views/home/index.vue

<template>
  <div class="app-container">
    <div class="address-layout">
      <!-- <el-row :gutter="20">
        <el-col :span="6">
          <div class="out-border">
            <div class="layout-title">后台项目</div>
            <div class="color-main address-content">
              <a href="https://github.com/macrozheng/mall">mall</a>
            </div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="out-border">
            <div class="layout-title">前端项目</div>
            <div class="color-main address-content">
              <a href="https://github.com/macrozheng/mall-admin-web">mall-admin-web</a>
            </div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="out-border">
            <div class="layout-title">学习教程</div>
            <div class="color-main address-content">
              <a href="https://github.com/macrozheng/mall-learning">mall-learning</a>
            </div>
          </div>
        </el-col>
      </el-row> -->
    </div>
    <div class="total-layout">
      <el-row :gutter="20">
        <el-col :span="6">
          <div class="total-frame">
            <img :src="img_home_order" class="total-icon" />
            <div class="total-title">今日订单总数</div>
            <div class="total-value">{{ staticeDate.todayOrderNum }}</div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="total-frame">
            <img :src="img_home_today_amount" class="total-icon" />
            <div class="total-title">今日销售总额</div>
            <div class="total-value">￥{{ staticeDate.todayOrderAmount }}</div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="total-frame">
            <img :src="img_home_yesterday_amount" class="total-icon" />
            <div class="total-title">昨日销售总额</div>
            <div class="total-value">
              ￥{{ staticeDate.yesterdayOrderAmount }}
            </div>
          </div>
        </el-col>
        <!--<el-col :span="6">-->
        <!--<div class="total-frame">-->
        <!--<svg-icon icon-class="total-week" class="total-icon">-->
        <!--</svg-icon>-->
        <!--<div class="total-title">近7天销售总额</div>-->
        <!--<div class="total-value">￥50000.00</div>-->
        <!--</div>-->
        <!--</el-col>-->
      </el-row>
    </div>
    <div class="un-handle-layout">
      <div class="layout-title">待处理事务</div>
      <div class="un-handle-content">
        <el-row :gutter="20">
          <el-col :span="8">
            <div class="un-handle-item" @click="gotoOrder(0)">
              <span class="font-medium">待付款订单</span>
              <span style="float: right" class="color-danger"
                >({{ staticeDate.waitPayOrder }})</span
              >
            </div>
          </el-col>
          <el-col :span="8">
            <div class="un-handle-item"  @click="gotoOrder(3)">
              <span class="font-medium">已完成订单</span>
              <span style="float: right" class="color-danger"
                >({{ staticeDate.successOrder }})</span
              >
            </div>
          </el-col>
          <el-col :span="8">
            <div class="un-handle-item" @click="gotoOrder(2)">
              <span class="font-medium">待确认收货订单</span>
              <span style="float: right" class="color-danger"
                >({{ staticeDate.waitReceiptOrder }})</span
              >
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="8">
            <div class="un-handle-item"  @click="gotoOrder(1)">
              <span class="font-medium">待发货订单</span>
              <span style="float: right" class="color-danger"
                >({{ staticeDate.waitOutOrder }})</span
              >
            </div>
          </el-col>
          <el-col :span="8">
            <div class="un-handle-item" @click="gotoShop(1)">
              <span class="font-medium">缺货登记</span>
              <span style="float: right" class="color-danger"
                >({{ staticeDate.outStockProduct }})</span
              >
            </div>
          </el-col>
          <el-col :span="8">
              <!-- 待处理 -->
            <div class="un-handle-item"  @click="gotoBack(0)">
              <span class="font-medium">待处理退款申请</span>
              <span style="float: right" class="color-danger"
                >({{ staticeDate.waitDisposeRefund }})</span
              >
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="8">
            <div class="un-handle-item" @click="gotoOrder(1)">
              <span class="font-medium">已发货订单</span>
              <span style="float: right" class="color-danger"
                >({{ staticeDate.outOrder }})</span
              >
            </div>
          </el-col>
          <el-col :span="8">
            <!-- 退货中 -->
            <div class="un-handle-item" @click="gotoBack(1)">
              <span class="font-medium">待处理退货订单</span>
              <span style="float: right" class="color-danger"
                >({{ staticeDate.waitDisposeRefundOrder }})</span
              >
            </div>
          </el-col>
          <!-- <el-col :span="8">
            <div class="un-handle-item">
              <span class="font-medium">广告位即将到期</span>
              <span style="float: right" class="color-danger">({{staticeDate.waitDisposeRefund}})</span>
            </div>
          </el-col> -->
        </el-row>
      </div>
    </div>
    <div class="overview-layout">
      <el-row :gutter="20">
        <el-col :span="24">
          <div class="out-border">
            <div class="layout-title">商品总览</div>
            <div style="padding: 40px">
              <el-row>
                <el-col :span="6" class="color-danger overview-item-value">{{
                  staticeDate.delisted
                }}</el-col>
                <el-col :span="6" class="color-danger overview-item-value">{{
                  staticeDate.shelves
                }}</el-col>
                <el-col :span="6" class="color-danger overview-item-value">{{
                  staticeDate.outStock
                }}</el-col>
                <el-col :span="6" class="color-danger overview-item-value">{{
                  staticeDate.productNum
                }}</el-col>
              </el-row>
              <el-row class="font-medium">
                <el-col :span="6" class="overview-item-title">已下架</el-col>
                <el-col :span="6" class="overview-item-title">已上架</el-col>
                <el-col :span="6" class="overview-item-title">库存紧张</el-col>
                <el-col :span="6" class="overview-item-title">全部商品</el-col>
              </el-row>
            </div>
          </div>
        </el-col>
        <!-- <el-col :span="12">
          <div class="out-border">
            <div class="layout-title">用户总览</div>
            <div style="padding: 40px">
              <el-row>
                <el-col :span="6" class="color-danger overview-item-value"
                  >{{staticeDate.productNum}}</el-col
                >
                <el-col :span="6" class="color-danger overview-item-value"
                  >{{staticeDate.productNum}}</el-col
                >
                <el-col :span="6" class="color-danger overview-item-value"
                  >{{staticeDate.productNum}}</el-col
                >
                <el-col :span="6" class="color-danger overview-item-value"
                  >{{staticeDate.productNum}}</el-col
                >
              </el-row>
              <el-row class="font-medium">
                <el-col :span="6" class="overview-item-title">今日新增</el-col>
                <el-col :span="6" class="overview-item-title">昨日新增</el-col>
                <el-col :span="6" class="overview-item-title">本月新增</el-col>
                <el-col :span="6" class="overview-item-title">会员总数</el-col>
              </el-row>
            </div>
          </div>
        </el-col> -->
      </el-row>
    </div>
    <div class="statistics-layout">
      <div class="layout-title">订单统计</div>
      <el-row>
        <el-col :span="4">
          <div style="padding: 20px">
            <div>
              <div style="color: #909399; font-size: 14px">本月订单总数</div>
              <div style="color: #606266; font-size: 24px; padding: 10px 0">
                {{orderStatistis.monthOrderCount}}
              </div>
              <div>
                <span class="color-success" style="font-size: 14px">{{orderStatistis.monthOrderCountProportion}}%</span>
                <span style="color: #c0c4cc; font-size: 14px">同比上月</span>
              </div>
            </div>
            <div style="margin-top: 20px">
              <div style="color: #909399; font-size: 14px">本周订单总数</div>
              <div style="color: #606266; font-size: 24px; padding: 10px 0">
                {{orderStatistis.weekOrderCount}}
              </div>
              <div>
                <span class="color-danger" style="font-size: 14px"> {{orderStatistis.weekOrderCountProportion}}%</span>
                <span style="color: #c0c4cc; font-size: 14px">同比上周</span>
              </div>
            </div>
            <div style="margin-top: 20px">
              <div style="color: #909399; font-size: 14px">本月销售总额</div>
              <div style="color: #606266; font-size: 24px; padding: 10px 0">
                 {{orderStatistis.monthOrderAmount}}
              </div>
              <div>
                <span class="color-success" style="font-size: 14px"> {{orderStatistis.monthOrderAmountProportion}}%</span>
                <span style="color: #c0c4cc; font-size: 14px">同比上月</span>
              </div>
            </div>
            <div style="margin-top: 20px">
              <div style="color: #909399; font-size: 14px">本周销售总额</div>
              <div style="color: #606266; font-size: 24px; padding: 10px 0">
                   {{orderStatistis.weekOrderAmount}}
              </div>
              <div>
                <span class="color-danger" style="font-size: 14px"> {{orderStatistis.weekOrderAmountProportion}}%</span>
                <span style="color: #c0c4cc; font-size: 14px">同比上周</span>
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="20">
          <div style="padding: 10px; border-left: 1px solid #dcdfe6">
            <el-date-picker
              style="float: right; z-index: 1"
              size="small"
              v-model="orderCountDate"
              type="daterange"
              align="right"
              unlink-panels
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
              @change="handleDateChange"
              :picker-options="pickerOptions"
              :clearable="false"
            >
            </el-date-picker>
            <div>
              <ve-line
                :data="chartData"
                :legend-visible="false"
                :loading="loading"
                :data-empty="dataEmpty"
                :settings="chartSettings"
              ></ve-line>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import { str2Date } from "@/utils/date";
import dayjs from "dayjs";
import img_home_order from "@/assets/images/home_order.png";
import img_home_today_amount from "@/assets/images/home_today_amount.png";
import img_home_yesterday_amount from "@/assets/images/home_yesterday_amount.png";
import { getHomeStatistical, getOrderStatisticall } from "./api";
export default {
  name: "home",
  data() {
    return {
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const start = dayjs(new Date())
                .add(-1, "week")
                .startOf("week")
                .add(1, "day")
                .valueOf();

              const end = dayjs(new Date())
                .add(-1, "week")
                .endOf("week")
                .add(1, "day")
                .valueOf();

              picker.$emit("pick", [new Date(start), new Date(end)]);
            },
          },
          {
            text: "最近一月",
            onClick(picker) {
              const start = dayjs(new Date()).startOf("month").valueOf();
              const end = dayjs(new Date()).valueOf();
              var now = dayjs().format("DD"); // 判断今天几号
              picker.$emit("pick", [new Date(start), new Date(end)]);
            },
          },
        ],
      },
      orderCountDate: "",
      chartSettings: {
        // xAxisType: "time",
        area: true,
        axisSite: { right: ["orderAmount"] },
        labelMap: { orderNum: "订单数量", orderAmount: "订单金额" },
      },
      chartData: {
        columns: [],
        rows: [],
      },
      loading: false,
      dataEmpty: false,
      img_home_order,
      img_home_today_amount,
      img_home_yesterday_amount,
      staticeDate: {
        delisted: 0,
        outOrder: 0,
        outStock: 0,
        outStockProduct: 0,
        productNum: 0,
        shelves: 0,
        successOrder: 0,
        todayOrderAmount: 0,
        todayOrderNum: 0,
        waitDisposeRefund: 0,
        waitDisposeRefundOrder: 0,
        waitOutOrder: 0,
        waitPayOrder: 0,
        waitReceiptOrder: 0,
        yesterdayOrderAmount: 0,
        yesterdayOrderNum: 0,
      },
      orderStatistis: {
        monthOrderAmount: 0,
        monthOrderAmountProportion: 0,
        monthOrderCount: 0,
        monthOrderCountProportion: 0,
        orderStatisticalList: [],
        weekOrderAmount: 0,
        weekOrderAmountProportion: 0,
        weekOrderCount: 0,
        weekOrderCountProportion: 0,
      },
    };
  },
  created() {
    this.initOrderCountDate();
    this.getData();
  },
  mounted() {
    this.getHomeStatisticalDate();
  },

  methods: {
    async getHomeStatisticalDate() {
      try {
        const res = await getHomeStatistical();
        this.staticeDate = { ...res.data };
      } catch (e) {
        console.log(e);
      }
    },
    handleDateChange() {
      this.getData();
    },
    initOrderCountDate() {
      let start = new Date();
      // start.setFullYear(2018);
      // start.setMonth(10);
      start.setDate(1);
      start = dayjs(start).format("YYYY-MM-DD");
      const end = dayjs(new Date()).format("YYYY-MM-DD");
      // end.setTime(start.getTime() + 1000 * 60 * 60 * 24 * 7);
      this.orderCountDate = [start, end];
    },
    async getData() {
      try {
        const res = await getOrderStatisticall({
          startDate: this.orderCountDate[0],
          endDate: this.orderCountDate[1],
        });
        this.orderStatistis = {...res.data}
          this.chartData = {
          columns: ["date", "orderNum", "orderAmount"],
          rows: [],
        };
        for (let i = 0; i < this.orderStatistis.orderStatisticalList.length; i++) {
          let item = this.orderStatistis.orderStatisticalList[i];
           this.chartData.rows.push(item);
        }
        this.dataEmpty = false;
        this.loading = false;
      } catch (e) {
        console.log(e);
      }
      // setTimeout(() => {
      //   this.chartData = {
      //     columns: ["date", "orderCount", "orderAmount"],
      //     rows: [],
      //   };
      //   for (let i = 0; i < DATA_FROM_BACKEND.rows.length; i++) {
      //     let item = DATA_FROM_BACKEND.rows[i];
      //     let currDate = str2Date(item.date);
      //     let start = this.orderCountDate[0];
      //     let end = this.orderCountDate[1];
      //     if (
      //       currDate.getTime() >= start.getTime() &&
      //       currDate.getTime() <= end.getTime()
      //     ) {
      //       this.chartData.rows.push(item);
      //     }
      //   }
      //   this.dataEmpty = false;
      //   this.loading = false;
      // }, 1000);
    },
    gotoOrder(status){
      this.$router.push({name:'order',params:{status}})
    },
    gotoShop(status){
        this.$router.push({name:'product',params:{stock:status}})
    },
    gotoBack(status){
       this.$router.push({name:'returnApply',params:{status}})
    }
  },
};
</script>

<style scoped>
.app-container {
  margin-top: 40px;
  margin-left: 120px;
  margin-right: 120px;
}

.address-layout {
}

.total-layout {
  margin-top: 20px;
}

.total-frame {
  border: 1px solid #dcdfe6;
  padding: 20px;
  height: 100px;
}

.total-icon {
  color: #409eff;
  width: 60px;
  height: 60px;
}

.total-title {
  position: relative;
  font-size: 16px;
  color: #909399;
  left: 70px;
  top: -50px;
}

.total-value {
  position: relative;
  font-size: 18px;
  color: #606266;
  left: 70px;
  top: -40px;
}

.un-handle-layout {
  margin-top: 20px;
  border: 1px solid #dcdfe6;
}

.layout-title {
  color: #606266;
  padding: 15px 20px;
  background: #f2f6fc;
  font-weight: bold;
}

.un-handle-content {
  padding: 20px 40px;
}

.un-handle-item {
  cursor: pointer;
  border-bottom: 1px solid #ebeef5;
  padding: 10px;
}

.overview-layout {
  margin-top: 20px;
}

.overview-item-value {
  font-size: 24px;
  text-align: center;
}

.overview-item-title {
  margin-top: 10px;
  text-align: center;
}

.out-border {
  border: 1px solid #dcdfe6;
}

.statistics-layout {
  margin-top: 20px;
  border: 1px solid #dcdfe6;
}
.mine-layout {
  position: absolute;
  right: 140px;
  top: 107px;
  width: 250px;
  height: 235px;
}
.address-content {
  padding: 20px;
  font-size: 18px;
}
</style>