|
|
@@ -1,247 +1,528 @@
|
|
|
<template>
|
|
|
<div class="app-container mod-home">
|
|
|
- <div class="grand1">
|
|
|
+ <div class="grand1" v-if="statistics">
|
|
|
<div class="box1">
|
|
|
- <img :src="require('@/assets/images/icon5.png')" />
|
|
|
- <div class="right">
|
|
|
- <p>今日交易额</p>
|
|
|
- <p>{{ statistics.todayAmount || 0 }}元</p>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="box1">
|
|
|
- <img :src="require('@/assets/images/icon6.png')" />
|
|
|
+ <img :src="require('@/assets/images/order.png')" />
|
|
|
<div class="right">
|
|
|
<p>今日订单数</p>
|
|
|
- <p>{{ statistics.todayOrderNum || 0 }}笔</p>
|
|
|
+ <p>{{ statistics.todayOrderNum }}</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
+
|
|
|
<div class="box1">
|
|
|
- <img :src="require('@/assets/images/icon7.png')" />
|
|
|
+ <img :src="require('@/assets/images/total-money.png')" />
|
|
|
<div class="right">
|
|
|
- <p>活跃用户</p>
|
|
|
- <p>{{ statistics.activeUser || 0 }}个</p>
|
|
|
+ <p>今日销售总额</p>
|
|
|
+ <p>{{ statistics.todayOrderAmount }}</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="box1" v-if="userType != 'sys_user'">
|
|
|
- <img :src="require('@/assets/images/icon10.png')" />
|
|
|
- <div class="right">
|
|
|
- <p>新增用户</p>
|
|
|
- <p>{{ statistics.totalUser || 0 }}名</p>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="box1" v-if="userType == 'sys_user'">
|
|
|
- <img :src="require('@/assets/images/icon8.png')" />
|
|
|
+
|
|
|
+ <div class="box1">
|
|
|
+ <img :src="require('@/assets/images/yesterday.png')" />
|
|
|
<div class="right">
|
|
|
- <p>待审核提现</p>
|
|
|
- <p>￥ {{ statistics.withdrawalAmount || 0 }}</p>
|
|
|
+ <p>昨日销售总额</p>
|
|
|
+ <p>{{ statistics.yesterdayOrderAmount }}</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
+
|
|
|
<div class="box1">
|
|
|
- <img :src="require('@/assets/images/icon9.png')" />
|
|
|
+ <img :src="require('@/assets/images/7day.png')" />
|
|
|
<div class="right">
|
|
|
- <p>补贴排队中</p>
|
|
|
- <p>{{ statistics.queueCount || 0 }}</p>
|
|
|
+ <p>近7天销售总额</p>
|
|
|
+ <p>{{ statistics.sevenDayOrderAmount }}</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="border">
|
|
|
- <h3 class="label">运营快捷管理</h3>
|
|
|
- <div class="quick">
|
|
|
-
|
|
|
- <template v-if="userType === 'business_user'">
|
|
|
- <div class="quick_item" @click="goRouter('/order/order/orderList')">
|
|
|
- <img src="@/assets/images/order-list.png" alt="" />
|
|
|
- <div>订单管理</div>
|
|
|
+ <el-card class="box-card" v-if="statistics">
|
|
|
+ <div slot="header" class="clearfix">
|
|
|
+ <span>待处理事务</span>
|
|
|
+ </div>
|
|
|
+ <div class="card1">
|
|
|
+ <div class="flex">
|
|
|
+ <div>
|
|
|
+ <p>待付款订单</p>
|
|
|
+ <p>
|
|
|
+ (<span>{{ statistics.waitPayOrderNum }}</span>)
|
|
|
+ </p>
|
|
|
</div>
|
|
|
- <div class="quick_item" @click="goRouter('/member/business')">
|
|
|
- <img src="@/assets/images/user.png" alt="" />
|
|
|
- <div>会员管理</div>
|
|
|
+ <div>
|
|
|
+ <p>退款成功维权单数</p>
|
|
|
+ <p>(<span>{{ statistics.refundSuccessRightsOrderNum }}</span>)</p>
|
|
|
</div>
|
|
|
- <div class="quick_item" @click="goRouter('/goods/list')">
|
|
|
- <img src="@/assets/images/add.png" alt="" />
|
|
|
- <div>添加商品</div>
|
|
|
+ </div>
|
|
|
+ <div class="flex">
|
|
|
+ <div>
|
|
|
+ <p>待发货订单</p>
|
|
|
+ <p>
|
|
|
+ (<span>{{ statistics.waitShipOrderNum }}</span>)
|
|
|
+ </p>
|
|
|
</div>
|
|
|
- </template>
|
|
|
- <template v-if="userType === 'sys_user'">
|
|
|
- <div class="quick_item" @click="goRouter('/queuingOrder/offlineOrdersList')">
|
|
|
- <img src="@/assets/images/order-list.png" alt="" />
|
|
|
- <div>线下订单</div>
|
|
|
+ <div>
|
|
|
+ <p>待退款维权订单数</p>
|
|
|
+ <p>(<span>{{ statistics.waitRefundRightsOrderNum }}</span>)</p>
|
|
|
</div>
|
|
|
- <div class="quick_item" @click="goRouter('/member/platform')">
|
|
|
- <img src="@/assets/images/user.png" alt="" />
|
|
|
- <div>会员管理</div>
|
|
|
+ </div>
|
|
|
+ <div class="flex">
|
|
|
+ <div>
|
|
|
+ <p>待收货订单数</p>
|
|
|
+ <p>(<span>{{ statistics.waitReceiptOrderNum }}</span>)</p>
|
|
|
</div>
|
|
|
- <div class="quick_item" @click="goRouter('/agentManage/agentList')">
|
|
|
- <img src="@/assets/images/agent.png" alt="" />
|
|
|
- <div>代理商管理</div>
|
|
|
+ <div>
|
|
|
+ <p>待收货维权单数</p>
|
|
|
+ <p>
|
|
|
+ (<span>{{ statistics.waitReceiptRightsOrderNum }}</span>)
|
|
|
+ </p>
|
|
|
</div>
|
|
|
- <div class="quick_item" @click="goRouter('/shop/shopList')">
|
|
|
- <img src="@/assets/images/shop.png" alt="" />
|
|
|
- <div>店铺管理</div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ <div class="flex">
|
|
|
+ <div>
|
|
|
+ <p>已完成订单</p>
|
|
|
+ <p>
|
|
|
+ (<span>{{ statistics.completeOrderNum }}</span>)
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <p>待处理维权订单</p>
|
|
|
+ <p>(<span>{{ statistics.waitDisposeRightsOrderNum }}</span>)</p>
|
|
|
</div>
|
|
|
- </template>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- <div class="overview">
|
|
|
- <div class="overview_item">
|
|
|
- <h3 class="label">商品总览</h3>
|
|
|
- <div class="overview_item_list">
|
|
|
+ </el-card>
|
|
|
+ <el-card class="box-card" style="margin-top: 20px">
|
|
|
+ <div slot="header" class="clearfix">
|
|
|
+ <span>运营快捷入口</span>
|
|
|
+ </div>
|
|
|
+ <div class="card2">
|
|
|
+ <div @click="goRouter('/goods/list')" v-hasPermi="['product:product:list']">
|
|
|
+ <img :src="require('@/assets/images/add.png')" />
|
|
|
+ <p>添加商品</p>
|
|
|
+ </div>
|
|
|
+ <div @click="goRouter('/order/order/orderList')">
|
|
|
+ <img :src="require('@/assets/images/order-list.png')" />
|
|
|
+ <p>订单列表</p>
|
|
|
+ </div>
|
|
|
+ <div @click="goRouter('/user/user/index')" v-hasPermi="['system:miniapp:user:page']">
|
|
|
+ <img :src="require('@/assets/images/user.png')" />
|
|
|
+ <p>用户管理</p>
|
|
|
+ </div>
|
|
|
+ <!-- <div v-if="(roleType==0||roleType==1)" @click="goRouter(roleType==2||roleType==3?'/merchant-content/advertisingList':'/platform-ad/list')">
|
|
|
+ <img :src="require('@/assets/images/banner.png')" />
|
|
|
+ <p>广告管理</p>
|
|
|
+ </div>
|
|
|
+ <div v-if="roleType==0" @click="goRouter('/platform-content/classifyList')">
|
|
|
+ <img :src="require('@/assets/images/zhuan.png')" />
|
|
|
+ <p>专题管理</p>
|
|
|
+ </div>
|
|
|
+ <div v-if="roleType==2||roleType==3||roleType==0" @click="goRouter('/merchant-marketing/seckillList')">
|
|
|
+ <img :src="require('@/assets/images/time.png')" />
|
|
|
+ <p>秒杀管理</p>
|
|
|
+ </div> -->
|
|
|
+ </div>
|
|
|
+ </el-card>
|
|
|
+ <div class="card-2">
|
|
|
+ <el-card class="box-card">
|
|
|
+ <div slot="header" class="clearfix">
|
|
|
+ <span>商品总览</span>
|
|
|
+ </div>
|
|
|
+ <div class="card3" v-if="goodsInfo">
|
|
|
<div>
|
|
|
- <div class="overview_item_list_val">
|
|
|
- {{ goodsInfo.unShelvedCount || 0 }}
|
|
|
- </div>
|
|
|
- <div class="overview_item_list_lab">已下架</div>
|
|
|
+ <h3>{{ goodsInfo.unShelvedCount }}</h3>
|
|
|
+ <p>已下架</p>
|
|
|
</div>
|
|
|
<div>
|
|
|
- <div class="overview_item_list_val">
|
|
|
- {{ goodsInfo.shelvedCount || 0 }}
|
|
|
- </div>
|
|
|
- <div class="overview_item_list_lab">已上架</div>
|
|
|
+ <h3>{{ goodsInfo.shelvedCount }}</h3>
|
|
|
+ <p>已上架</p>
|
|
|
</div>
|
|
|
<div>
|
|
|
- <div class="overview_item_list_val">
|
|
|
- {{ goodsInfo.stockTenseCount || 0 }}
|
|
|
- </div>
|
|
|
- <div class="overview_item_list_lab">库存紧张</div>
|
|
|
+ <h3>{{ goodsInfo.stockTenseCount }}</h3>
|
|
|
+ <p>库存紧张</p>
|
|
|
</div>
|
|
|
<div>
|
|
|
- <div class="overview_item_list_val">
|
|
|
- {{ goodsInfo.allCount || 0 }}
|
|
|
- </div>
|
|
|
- <div class="overview_item_list_lab">全部商品</div>
|
|
|
+ <h3>{{ goodsInfo.allCount }}</h3>
|
|
|
+ <p>全部商品</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- <div class="overview_item">
|
|
|
- <h3 class="label">用户总览</h3>
|
|
|
- <div class="overview_item_list">
|
|
|
+ </el-card>
|
|
|
+ <el-card class="box-card">
|
|
|
+ <div slot="header" class="clearfix">
|
|
|
+ <span>用户总览</span>
|
|
|
+ </div>
|
|
|
+ <div class="card3" v-if="memberInfo">
|
|
|
<div>
|
|
|
- <div class="overview_item_list_val">
|
|
|
- {{ memberInfo.todayUser || 0 }}
|
|
|
- </div>
|
|
|
- <div class="overview_item_list_lab">今日新增</div>
|
|
|
+ <h3>{{ memberInfo.todayNum }}</h3>
|
|
|
+ <p>今日新增</p>
|
|
|
</div>
|
|
|
<div>
|
|
|
- <div class="overview_item_list_val">
|
|
|
- {{ memberInfo.yesterdayUser || 0 }}
|
|
|
- </div>
|
|
|
- <div class="overview_item_list_lab">昨日新增</div>
|
|
|
+ <h3>{{ memberInfo.yesterdayNum }}</h3>
|
|
|
+ <p>昨日新增</p>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <h3>{{ memberInfo.monthNum }}</h3>
|
|
|
+ <p>本月新增</p>
|
|
|
</div>
|
|
|
<div>
|
|
|
- <div class="overview_item_list_val">
|
|
|
- {{ memberInfo.monthUser || 0 }}
|
|
|
+ <h3>{{ memberInfo.totalNum }}</h3>
|
|
|
+ <p>会员总数</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-card>
|
|
|
+ </div>
|
|
|
+ <el-card class="box-card" style="margin-top: 20px">
|
|
|
+ <div slot="header" class="clearfix">
|
|
|
+ <span>订单统计</span>
|
|
|
+ </div>
|
|
|
+ <div class="card4">
|
|
|
+ <div class="left">
|
|
|
+ <div class="row1" v-if="orderInfo && (isActive == 1 || isActive == 2)">
|
|
|
+ <p>
|
|
|
+ <span v-if="isActive == 1">本周</span><span v-if="isActive == 2">本月</span>订单总数
|
|
|
+ </p>
|
|
|
+ <h3>{{ orderInfo.current }}</h3>
|
|
|
+ <p>
|
|
|
+ {{ orderInfo.rate }}% 同比<span v-if="isActive == 1">上周</span><span v-if="isActive == 2">上月</span>
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="right">
|
|
|
+ <div class="date-piker">
|
|
|
+ <div class="date">
|
|
|
+ <span :class="isActive == 1 ? 'active' : ''" @click="dateChange(1)">本周</span>
|
|
|
+ <span :class="isActive == 2 ? 'active' : ''" @click="dateChange(2)">本月</span>
|
|
|
</div>
|
|
|
- <div class="overview_item_list_lab">本月新增</div>
|
|
|
+ <el-date-picker v-model="date" type="daterange" value-format="yyyy-MM-dd" range-separator="至"
|
|
|
+ start-placeholder="开始日期" end-placeholder="结束日期" @change="changeDate">
|
|
|
+ </el-date-picker>
|
|
|
</div>
|
|
|
<div>
|
|
|
- <div class="overview_item_list_val">
|
|
|
- {{ memberInfo.totalUser || 0 }}
|
|
|
+ <!-- <chart ref="chart1" :options="orderOption" :auto-resize="true" style="width: 100%"></chart> -->
|
|
|
+ <div ref="categoryChart" style="height: 300px;"></div>
|
|
|
+ </div>
|
|
|
+ <div></div>
|
|
|
+ <div></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-card>
|
|
|
+ <el-card class="box-card" style="margin-top: 20px">
|
|
|
+ <div slot="header" class="clearfix">
|
|
|
+ <span>销售统计</span>
|
|
|
+ </div>
|
|
|
+ <div class="card4">
|
|
|
+ <div class="left">
|
|
|
+ <div class="row1" v-if="moneyInfo && (isActive2 == 1 || isActive2 == 2)">
|
|
|
+ <p>
|
|
|
+ <span v-if="isActive2 == 1">本周</span><span v-if="isActive2 == 2">本月</span>销售额
|
|
|
+ </p>
|
|
|
+ <h3>{{ moneyInfo.current }}</h3>
|
|
|
+ <p>
|
|
|
+ {{ moneyInfo.rate }}% 同比<span v-if="isActive2 == 1">上周</span><span v-if="isActive2 == 2">上月</span>
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="right">
|
|
|
+ <div class="date-piker">
|
|
|
+ <div class="date">
|
|
|
+ <span :class="isActive2 == 1 ? 'active' : ''" @click="dateChange2(1)">本周</span>
|
|
|
+ <span :class="isActive2 == 2 ? 'active' : ''" @click="dateChange2(2)">本月</span>
|
|
|
</div>
|
|
|
- <div class="overview_item_list_lab">会员总数</div>
|
|
|
+ <el-date-picker v-model="date2" type="daterange" range-separator="至" start-placeholder="开始日期"
|
|
|
+ end-placeholder="结束日期" value-format="yyyy-MM-dd" @change="changeDate2">
|
|
|
+ </el-date-picker>
|
|
|
</div>
|
|
|
+ <div>
|
|
|
+ <!-- <chart ref="chart1" :options="saleOption" :auto-resize="true" style="width: 100%"></chart> -->
|
|
|
+ <div ref="categoryChart1" style="height: 300px;"></div>
|
|
|
+ </div>
|
|
|
+ <div></div>
|
|
|
+ <div></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- <div class="chartList">
|
|
|
- <!-- 交易统计 -->
|
|
|
- <transactionItem :userType="userType" :weekList="weekList" />
|
|
|
- <!-- 订单统计 -->
|
|
|
- <orderItem :userType="userType" :weekList="weekList" />
|
|
|
-
|
|
|
- <!-- 用户统计 -->
|
|
|
- <userItem :userType="userType" :weekList="weekList" />
|
|
|
-
|
|
|
- <!-- 提现统计 -->
|
|
|
- <settlementItem :userType="userType" :weekList="weekList" />
|
|
|
- </div>
|
|
|
+ </el-card>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import {
|
|
|
- simpleStatistics_Api,
|
|
|
- businessSimpleStatistics_Api,
|
|
|
- platformUserOverview_Api,
|
|
|
- businessUserOverview_Api,
|
|
|
- productCount_Api,
|
|
|
-} from "@/api/home.js";
|
|
|
-import { montYearData } from "@/utils/index";
|
|
|
-import { mapGetters } from "vuex";
|
|
|
-import transactionItem from "./components/homeStatistics/transaction.vue";
|
|
|
-import orderItem from "./components/homeStatistics/order.vue";
|
|
|
-
|
|
|
-import settlementItem from "./components/homeStatistics/settlement.vue";
|
|
|
-import userItem from "./components/homeStatistics/user.vue"; // 重复引入，可以删除
|
|
|
-
|
|
|
+import { montYearData } from '@/utils/index'
|
|
|
+import { shopOrderSingleCount, shopOrderDaysCount, statisticsOrderNum, statisticsOrderAmount, productCount, userBusinessRoleCount } from '@/api/home.js'
|
|
|
+import * as echarts from "echarts";
|
|
|
export default {
|
|
|
- components: {
|
|
|
- transactionItem,
|
|
|
- orderItem,
|
|
|
- settlementItem,
|
|
|
- userItem,
|
|
|
- },
|
|
|
data() {
|
|
|
return {
|
|
|
- statistics: {},
|
|
|
- goodsInfo: {},
|
|
|
- memberInfo: {},
|
|
|
- weekList: [
|
|
|
- "星期一",
|
|
|
- "星期二",
|
|
|
- "星期三",
|
|
|
- "星期四",
|
|
|
- "星期五",
|
|
|
- "星期六",
|
|
|
- "星期日",
|
|
|
- ],
|
|
|
- };
|
|
|
+ orderOption: {
|
|
|
+ title: {
|
|
|
+ text: '订单统计'
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ type: 'category',
|
|
|
+ boundaryGap: false,
|
|
|
+ data: []
|
|
|
+ },
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'axis',
|
|
|
+ axisPointer: {
|
|
|
+ type: 'cross',
|
|
|
+ label: {
|
|
|
+ backgroundColor: '#17B3A3'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ type: 'value'
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+
|
|
|
+ {
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ color: '#17B3A3'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ smooth: true,
|
|
|
+ data: [],
|
|
|
+ type: 'line',
|
|
|
+ areaStyle: {}
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ saleOption: {
|
|
|
+ title: {
|
|
|
+ text: '销售统计'
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ type: 'category',
|
|
|
+ boundaryGap: false,
|
|
|
+ data: []
|
|
|
+ },
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'axis',
|
|
|
+ axisPointer: {
|
|
|
+ type: 'cross',
|
|
|
+ label: {
|
|
|
+ backgroundColor: '#17B3A3'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ type: 'value'
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ color: '#17B3A3'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ smooth: true,
|
|
|
+ data: [],
|
|
|
+ type: 'line',
|
|
|
+ areaStyle: {}
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ date: null,
|
|
|
+ date2: null,
|
|
|
+ statistics: null,
|
|
|
+ isActive: 1,
|
|
|
+ isActive2: 1,
|
|
|
+ weekOrMonthOrYear: null,
|
|
|
+ memberInfo: null,
|
|
|
+ goodsInfo: null,
|
|
|
+ orderInfo: null,
|
|
|
+ moneyInfo: null,
|
|
|
+ params: {
|
|
|
+ data_type: null,
|
|
|
+ type: null
|
|
|
+ },
|
|
|
+ roleType: null,
|
|
|
+ userInfo: {},
|
|
|
+ categoryChart: null,
|
|
|
+ categoryChart1: null,
|
|
|
+ }
|
|
|
},
|
|
|
- computed: {
|
|
|
- ...mapGetters(["userType"]),
|
|
|
+ created() {
|
|
|
+
|
|
|
},
|
|
|
- mounted() {
|
|
|
- this.getBaseData();
|
|
|
+ async mounted() {
|
|
|
+ this.weekOrMonthOrYear = montYearData()
|
|
|
+ this.getBaseData()
|
|
|
+ this.dateChange(1)
|
|
|
+ setTimeout(() => {
|
|
|
+ this.dateChange2(1)
|
|
|
+ }, 1000)
|
|
|
},
|
|
|
methods: {
|
|
|
+ goRouter(url) {
|
|
|
+ if (url) {
|
|
|
+ this.$router.push({
|
|
|
+ path: url
|
|
|
+
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ this.$message.error('暂未开放，敬请期待！')
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 第一个时间段筛选
|
|
|
+ changeDate() {
|
|
|
+ this.params.data_type = 'count'
|
|
|
+ this.params.type = 'custom'
|
|
|
+ this.params.startDay = this.date[0]
|
|
|
+ this.params.endDay = this.date[1]
|
|
|
+ this.isActive = 4
|
|
|
+ this.statisticsBuyDays()
|
|
|
+ },
|
|
|
+ // 第二个时间段筛选
|
|
|
+ changeDate2() {
|
|
|
+ this.params.data_type = 'amount'
|
|
|
+ this.params.type = 'custom'
|
|
|
+ this.params.startDay = this.date2[0]
|
|
|
+ this.params.endDay = this.date2[1]
|
|
|
+ this.isActive2 = 4
|
|
|
+ this.statisticsBuyDays()
|
|
|
+ },
|
|
|
+ // 第一个时间段tab筛选
|
|
|
+ dateChange(number) {
|
|
|
+ delete this.params.startDay
|
|
|
+ delete this.params.endDay
|
|
|
+ this.params.data_type = 'count'
|
|
|
+ this.isActive = number
|
|
|
+ switch (number) {
|
|
|
+ case 0:
|
|
|
+ this.date = null
|
|
|
+ break
|
|
|
+ case 1:
|
|
|
+ this.date = [
|
|
|
+ this.weekOrMonthOrYear.begin,
|
|
|
+ this.weekOrMonthOrYear.end
|
|
|
+ ]
|
|
|
+ this.params.type = 'week'
|
|
|
+ this.statisticsOrderNum()
|
|
|
+ this.statisticsBuyDays()
|
|
|
+ break
|
|
|
+ case 2:
|
|
|
+ this.date = [
|
|
|
+ this.weekOrMonthOrYear.firstMonthDay,
|
|
|
+ this.weekOrMonthOrYear.lastMonthDay
|
|
|
+ ]
|
|
|
+ this.params.type = 'month'
|
|
|
+ this.statisticsOrderNum()
|
|
|
+ this.statisticsBuyDays()
|
|
|
+ break
|
|
|
+
|
|
|
+ default:
|
|
|
+ this.date = [
|
|
|
+ this.weekOrMonthOrYear.begin,
|
|
|
+ this.weekOrMonthOrYear.end
|
|
|
+ ]
|
|
|
+ this.statisticsOrderNum()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 第二个时间段tab筛选
|
|
|
+ dateChange2(number) {
|
|
|
+ this.params.data_type = 'amount'
|
|
|
+ this.isActive2 = number
|
|
|
+ switch (number) {
|
|
|
+ case 0:
|
|
|
+ this.date2 = null
|
|
|
+ break
|
|
|
+ case 1:
|
|
|
+ this.date2 = [
|
|
|
+ this.weekOrMonthOrYear.begin,
|
|
|
+ this.weekOrMonthOrYear.end
|
|
|
+ ]
|
|
|
+ this.params.type = 'week'
|
|
|
+ this.statisticsMoney()
|
|
|
+ this.statisticsBuyDays()
|
|
|
+ break
|
|
|
+ case 2:
|
|
|
+ this.date2 = [
|
|
|
+ this.weekOrMonthOrYear.firstMonthDay,
|
|
|
+ this.weekOrMonthOrYear.lastMonthDay
|
|
|
+ ]
|
|
|
+ this.params.type = 'month'
|
|
|
+ this.statisticsMoney()
|
|
|
+ this.statisticsBuyDays()
|
|
|
+ break
|
|
|
+
|
|
|
+ default:
|
|
|
+ this.date2 = [
|
|
|
+ this.weekOrMonthOrYear.begin,
|
|
|
+ this.weekOrMonthOrYear.end
|
|
|
+ ]
|
|
|
+ this.statisticsMoney()
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
getBaseData() {
|
|
|
- let url =
|
|
|
- this.userType == "sys_user"
|
|
|
- ? simpleStatistics_Api
|
|
|
- : businessSimpleStatistics_Api;
|
|
|
- url().then((res) => {
|
|
|
+ shopOrderSingleCount().then((res) => {
|
|
|
if (res && res.code == 200) {
|
|
|
- this.statistics = res.data;
|
|
|
+ this.statistics = res.data
|
|
|
}
|
|
|
- });
|
|
|
- let url1 =
|
|
|
- this.userType == "sys_user"
|
|
|
- ? platformUserOverview_Api
|
|
|
- : businessUserOverview_Api;
|
|
|
- url1().then((res) => {
|
|
|
+ })
|
|
|
+ userBusinessRoleCount().then((res) => {
|
|
|
if (res && res.code == 200) {
|
|
|
- this.memberInfo = res.data;
|
|
|
+ this.memberInfo = res.data
|
|
|
}
|
|
|
- });
|
|
|
- productCount_Api().then((res) => {
|
|
|
+ })
|
|
|
+ productCount().then((res) => {
|
|
|
if (res && res.code == 200) {
|
|
|
- this.goodsInfo = res.data;
|
|
|
+ this.goodsInfo = res.data
|
|
|
}
|
|
|
- });
|
|
|
+ })
|
|
|
},
|
|
|
- goRouter(url) {
|
|
|
- if (url) {
|
|
|
- this.$router.push({
|
|
|
- path: url,
|
|
|
- });
|
|
|
- } else {
|
|
|
- this.$message.error("暂未开放，敬请期待！");
|
|
|
- }
|
|
|
+ statisticsBuyDays() {
|
|
|
+ shopOrderDaysCount(this.params).then((res) => {
|
|
|
+ if (res && res.code == 200) {
|
|
|
+ if (this.params.data_type == 'count') {
|
|
|
+ this.orderOption.xAxis.data = res.data.map(
|
|
|
+ (val) => val.timeStr
|
|
|
+ )
|
|
|
+ this.orderOption.series[0].data = res.data.map(
|
|
|
+ (val) => val.orderNum
|
|
|
+ )
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.categoryChart = echarts.init(this.$refs.categoryChart);
|
|
|
+ this.categoryChart.setOption(this.orderOption);
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ this.saleOption.xAxis.data = res.data.map(
|
|
|
+ (val) => val.timeStr
|
|
|
+ )
|
|
|
+ this.saleOption.series[0].data = res.data.map(
|
|
|
+ (val) => val.orderAmount
|
|
|
+ )
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.categoryChart1 = echarts.init(this.$refs.categoryChart1);
|
|
|
+ this.categoryChart1.setOption(this.saleOption);
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
},
|
|
|
- },
|
|
|
-};
|
|
|
+ statisticsMoney() {
|
|
|
+ statisticsOrderAmount({ type: this.isActive2 == 1 ? 'week' : 'month' })
|
|
|
+ .then((res) => {
|
|
|
+ if (res && res.code == 200) {
|
|
|
+ this.moneyInfo = res.data
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ statisticsOrderNum() {
|
|
|
+ statisticsOrderNum({ type: this.isActive == 1 ? 'week' : 'month', })
|
|
|
+ .then((res) => {
|
|
|
+ if (res && res.code == 200) {
|
|
|
+ this.orderInfo = res.data
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ initCategoryChart() {
|
|
|
+ this.categoryChart = echarts.init(this.$refs.categoryChart);
|
|
|
+ this.categoryChart.setOption(this.orderOption);
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
</script>
|
|
|
|
|
|
-<style lang="scss" scoped>
|
|
|
+<style lang='scss' scoped>
|
|
|
.mod-home {
|
|
|
line-height: 1.5;
|
|
|
}
|
|
|
@@ -255,15 +536,10 @@ export default {
|
|
|
.box1 {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
+ width: 20%;
|
|
|
border: 1px solid #ebeef5;
|
|
|
box-shadow: 0 2px 12px 0 #f0f0f0;
|
|
|
font-size: 14px;
|
|
|
- flex: 1;
|
|
|
- margin-right: 10px;
|
|
|
-
|
|
|
- &:last-child {
|
|
|
- margin-right: 0;
|
|
|
- }
|
|
|
|
|
|
img {
|
|
|
width: 50px;
|
|
|
@@ -277,80 +553,114 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
|
|
|
-.border {
|
|
|
- border: 1px solid #ebeef5;
|
|
|
- box-shadow: 0 2px 12px 0 #f0f0f0;
|
|
|
- margin-bottom: 20px;
|
|
|
-
|
|
|
- h3 {
|
|
|
- font-size: 16px;
|
|
|
- font-weight: 700;
|
|
|
- padding-left: 20px;
|
|
|
- padding-bottom: 15px;
|
|
|
- border-bottom: 1px solid #ebeef5;
|
|
|
- }
|
|
|
+.card1 {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
|
|
|
- .quick {
|
|
|
+ .flex {
|
|
|
display: flex;
|
|
|
- justify-content: space-around;
|
|
|
- padding-bottom: 20px;
|
|
|
+ width: 25%;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
|
|
|
- .quick_item {
|
|
|
+ div {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ border-bottom: 1px solid #ebeef5;
|
|
|
font-size: 14px;
|
|
|
- text-align: center;
|
|
|
- cursor: pointer;
|
|
|
- img {
|
|
|
- width: 50px;
|
|
|
- height: 50px;
|
|
|
+
|
|
|
+ span {
|
|
|
+ color: red;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
-.overview {
|
|
|
+.card2 {
|
|
|
+ display: flex;
|
|
|
+ // justify-content: space-between;
|
|
|
+ justify-content: space-around;
|
|
|
+
|
|
|
+ div {
|
|
|
+ cursor: pointer;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ font-size: 14px;
|
|
|
+ // img {
|
|
|
+ // width: 50px;
|
|
|
+ // height: 50px;
|
|
|
+ // }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.card-2 {
|
|
|
+ margin-top: 20px;
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
- margin-bottom: 20px;
|
|
|
|
|
|
- .overview_item {
|
|
|
- width: calc(50% - 10px);
|
|
|
- padding: 20px 0;
|
|
|
- border: 1px solid #ebeef5;
|
|
|
- box-shadow: 0 2px 12px 0 #f0f0f0;
|
|
|
+ .box-card {
|
|
|
+ width: 48%;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.card3 {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+
|
|
|
+ div {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ align-content: center;
|
|
|
+
|
|
|
+ p {
|
|
|
+ margin: 0;
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
|
|
|
h3 {
|
|
|
- font-size: 16px;
|
|
|
font-weight: 700;
|
|
|
- padding-bottom: 15px;
|
|
|
- padding-left: 20px;
|
|
|
- border-bottom: 1px solid #ebeef5;
|
|
|
- margin: 0;
|
|
|
+ font-size: 18px;
|
|
|
}
|
|
|
+ }
|
|
|
+}
|
|
|
|
|
|
- .overview_item_list {
|
|
|
- display: flex;
|
|
|
- justify-content: space-around;
|
|
|
- padding-top: 20px;
|
|
|
+.card4 {
|
|
|
+ display: flex;
|
|
|
|
|
|
- >div {
|
|
|
- text-align: center;
|
|
|
+ .left {
|
|
|
+ width: 200px;
|
|
|
+ font-size: 14px;
|
|
|
|
|
|
- .overview_item_list_val {
|
|
|
- font-size: 16px;
|
|
|
- font-weight: 700;
|
|
|
- margin-bottom: 10px;
|
|
|
- }
|
|
|
+ .row1 {
|
|
|
+ margin-bottom: 60px;
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
- .overview_item_list_lab {
|
|
|
- font-size: 14px;
|
|
|
- }
|
|
|
+ .right {
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .date-piker {
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-end;
|
|
|
+ align-content: center;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .date {
|
|
|
+ display: flex;
|
|
|
+ margin-right: 20px;
|
|
|
+
|
|
|
+ span {
|
|
|
+ margin-right: 20px;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+
|
|
|
+ .active {
|
|
|
+ color: #17b3a3;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
-.chartList {
|
|
|
- display: flex;
|
|
|
- flex-wrap: wrap;
|
|
|
-}
|
|
|
</style>
|
chengjunhui