|
|
@@ -1,10 +1,39 @@
|
|
|
<template>
|
|
|
<div class="app-container">
|
|
|
<div class="overview">
|
|
|
- <div class="title">{{ $t('operational.overview') }}</div>
|
|
|
+ <div class="title">{{ $t('operational.dataOverview') }}</div>
|
|
|
<div class="content" v-loading="loading">
|
|
|
<el-row class="line">
|
|
|
- <!-- <el-col class="item" :span="6">
|
|
|
+ <div class="date-picker">
|
|
|
+ <el-form :inline="true" class="demo-form-inline">
|
|
|
+ <el-form-item label="时间范围">
|
|
|
+ <el-date-picker
|
|
|
+ v-model="timeRange"
|
|
|
+ value-format="yyyy-MM-dd HH:mm:ss"
|
|
|
+ type="datetimerange"
|
|
|
+ style="width: 400px"
|
|
|
+ :start-placeholder="$t('orderList.startTime')"
|
|
|
+ :end-placeholder="$t('orderList.endTime')"
|
|
|
+ :picker-options="pickerOptions"
|
|
|
+ ></el-date-picker>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </div>
|
|
|
+ <div class="do-search">
|
|
|
+ <el-button icon="el-icon-refresh" size="small" @click="reset">
|
|
|
+ {{ $t('operational.reset') }}
|
|
|
+ </el-button>
|
|
|
+ <el-button type="primary" icon="el-icon-search" size="small" @click="getMainData">
|
|
|
+ {{ $t('operational.query') }}
|
|
|
+ </el-button>
|
|
|
+ <span class="ex" @click="setDay(3)">{{ $t('operational.lastThreeDays') }}</span>
|
|
|
+ <span class="ex" @click="setDay(7)">{{ $t('operational.lastSevenDays') }}</span>
|
|
|
+ <span class="ex" @click="setDay(15)">{{ $t('operational.lastFifteenDays') }}</span>
|
|
|
+ <span class="ex" @click="setDay(30)">{{ $t('operational.lastThirtyDays') }}</span>
|
|
|
+ </div>
|
|
|
+ </el-row>
|
|
|
+ <el-row class="line">
|
|
|
+ <el-col class="item" :span="6">
|
|
|
<div class="do">
|
|
|
<svg
|
|
|
t="1641957967018"
|
|
|
@@ -27,10 +56,10 @@
|
|
|
p-id="7599"
|
|
|
></path>
|
|
|
</svg>
|
|
|
- <p class="text">今日新增订单数（笔）</p>
|
|
|
- <p class="number">{{ homeData.todayOrder }}</p>
|
|
|
+ <p class="text">{{ $t('operational.orderCount') }}</p>
|
|
|
+ <p class="number">{{ mainData.orderCount }}</p>
|
|
|
</div>
|
|
|
- </el-col> -->
|
|
|
+ </el-col>
|
|
|
<el-col class="item" :span="6">
|
|
|
<div class="do">
|
|
|
<svg
|
|
|
@@ -54,13 +83,9 @@
|
|
|
p-id="10176"
|
|
|
></path>
|
|
|
</svg>
|
|
|
- <p class="text">{{$t('today.revenue')}}（{{$t('curency')}}）</p>
|
|
|
+ <p class="text">{{ $t('operational.transactionAmount') }}</p>
|
|
|
<p class="number">
|
|
|
- {{
|
|
|
- homeData.todayPay
|
|
|
- ? homeData.todayPay.toFixed(2)
|
|
|
- : (0.0).toFixed(2)
|
|
|
- }}
|
|
|
+ {{ mainData.payAmount ? mainData.payAmount.toFixed(2) : (0.0).toFixed(2) }}
|
|
|
</p>
|
|
|
</div>
|
|
|
</el-col>
|
|
|
@@ -81,131 +106,15 @@
|
|
|
p-id="3587"
|
|
|
fill="#8a8a8a"
|
|
|
></path>
|
|
|
- <path
|
|
|
- d="M576 128L352 352h448L576 128z"
|
|
|
- p-id="3588"
|
|
|
- fill="#8a8a8a"
|
|
|
- ></path>
|
|
|
+ <path d="M576 128L352 352h448L576 128z" p-id="3588" fill="#8a8a8a"></path>
|
|
|
</svg>
|
|
|
- <p class="text">{{ $t('operational.totalTransactionAmount') }}</p>
|
|
|
+ <p class="text">{{ $t('operational.totalPayAmount') }}</p>
|
|
|
<p class="number">
|
|
|
- {{ homeData.totalPay ? homeData.totalPay : "0.00" }}
|
|
|
+ {{ mainData.totalPayAmount ? mainData.totalPayAmount : '0.00' }}
|
|
|
</p>
|
|
|
</div>
|
|
|
</el-col>
|
|
|
- <!-- <el-col class="item" :span="6">
|
|
|
- <div class="do">
|
|
|
- <svg
|
|
|
- t="1641957839736"
|
|
|
- class="icon"
|
|
|
- viewBox="0 0 1024 1024"
|
|
|
- version="1.1"
|
|
|
- xmlns="http://www.w3.org/2000/svg"
|
|
|
- p-id="6014"
|
|
|
- width="64"
|
|
|
- height="64"
|
|
|
- >
|
|
|
- <path
|
|
|
- d="M624.6 211.8c58.3 0 105.7 46.3 105.7 103.2s-47.4 103.2-105.7 103.2S518.9 371.9 518.9 315s47.4-103.2 105.7-103.2m0-50c-86 0-155.7 68.6-155.7 153.2s69.7 153.2 155.7 153.2S780.3 399.6 780.3 315s-69.7-153.2-155.7-153.2zM427 314.9c0-24.3 5.9-47.3 16.5-67.7-22.8-19.5-52.9-31.4-85.8-31.4-71.2 0-128.9 55.2-128.9 123.4s57.7 123.4 128.9 123.4c43.2 0 81.4-20.3 104.8-51.6-22.3-26.2-35.5-59.6-35.5-96.1zM297.5 727.2v16.9c0-103.5 72.5-191.8 173.7-226.2-29.2-13.3-62.1-20.9-96.9-20.9h-28.5c-118.6 0-215.6 87.2-215.6 194.7v-13.6c0 56.3-4.5 102.3 57.6 102.3H298c-0.9-16.2-0.5-34.2-0.5-53.2z"
|
|
|
- p-id="6015"
|
|
|
- fill="#8a8a8a"
|
|
|
- ></path>
|
|
|
- <path
|
|
|
- d="M639.4 561c27.9 0 55.1 5.2 80.6 15.4 24.5 9.8 46.6 23.9 65.5 41.7 38.3 36.2 59.4 83.9 59.4 134.5h0.2c0.1 5.1 0.3 10 0.4 14.9 0.4 13 0.8 25.2 0.3 34.9-0.3 4.5-0.7 7.7-1.1 9.8-1.9 0.3-4.8 0.5-8.7 0.5H418.4c-8.1 0-12.1-1.1-13.7-1.6-0.7-1.6-2.3-5.9-3.4-15.6-1.3-11.8-1.3-26.8-1.2-42.8h0.1c0-50.6 21.1-98.3 59.4-134.5 18.9-17.9 40.9-31.9 65.5-41.7 25.5-10.2 52.6-15.4 80.6-15.4h33.7m0-50.1h-33.8c-140.5 0-255.5 108.3-255.5 241.6v-16.9c0 69.8-5.3 127 68.2 127H836c73.6 0 58.9-57.1 58.9-127v16.9c0-133.4-115-241.6-255.5-241.6z"
|
|
|
- p-id="6016"
|
|
|
- fill="#8a8a8a"
|
|
|
- ></path>
|
|
|
- <path
|
|
|
- d="M785.1 706.4c0 10.2-8.4 18.5-18.7 18.5h-37.9v36.4c0 10.2-8.4 18.5-18.7 18.5h-9.4c-10.3 0-18.7-8.3-18.7-18.5v-36.4h-39.8c-10.3 0-18.7-8.3-18.7-18.5v-9.2c0-10.2 8.4-18.5 18.7-18.5h39.8v-40.2c0-10.2 8.4-18.5 18.7-18.5h9.4c10.3 0 18.7 8.3 18.7 18.5v40.2h37.9c10.3 0 18.7 8.3 18.7 18.5v9.2z"
|
|
|
- p-id="6017"
|
|
|
- fill="#8a8a8a"
|
|
|
- ></path>
|
|
|
- </svg>
|
|
|
- <p class="text">今日新增会员数</p>
|
|
|
- <p class="number">{{ homeData.todayUser }}</p>
|
|
|
- </div>
|
|
|
- </el-col> -->
|
|
|
- <!-- <el-col class="item" :span="6">
|
|
|
- <div class="do">
|
|
|
- <svg
|
|
|
- t="1641958094548"
|
|
|
- class="icon"
|
|
|
- viewBox="0 0 1024 1024"
|
|
|
- version="1.1"
|
|
|
- xmlns="http://www.w3.org/2000/svg"
|
|
|
- p-id="9210"
|
|
|
- width="64"
|
|
|
- height="64"
|
|
|
- >
|
|
|
- <path
|
|
|
- d="M888.34834 0.000284H127.658773A126.776854 126.776854 0 0 0 0.853475 126.777138v295.82214a126.776854 126.776854 0 0 0 126.805298 126.805298v169.045287a211.313719 211.313719 0 0 0 169.045287 207.075498v46.506653a42.268433 42.268433 0 0 0 84.508421 0V887.466705c0-23.324438-18.91555-42.268433-42.268433-42.268433a126.776854 126.776854 0 0 1-126.776854-126.776854v-169.045286h302.16525a241.3226 241.3226 0 0 0-42.268433 146.63107 42.268433 42.268433 0 1 0 84.536865 0c-1.706666-146.63107 120.433744-146.63107 120.433745-146.63107a42.268433 42.268433 0 0 0 42.268433-42.268433 54.527985 54.527985 0 0 0 0-8.021331 44.799988 44.799988 0 0 0 0-8.021331v-142.421294a48.611542 48.611542 0 0 1 42.268432-52.849763 48.611542 48.611542 0 0 1 42.268433 52.849763v369.777675a126.776854 126.776854 0 0 1-126.805298 126.776854c-23.324438 0-42.239988 18.91555-42.239988 42.268433v84.536865a42.268433 42.268433 0 0 0 84.508421 0v-46.506654a211.313719 211.313719 0 0 0 169.045286-207.075498v-169.045286a126.776854 126.776854 0 0 0 126.805298-126.776854v-295.82214A126.776854 126.776854 0 0 0 888.319895 0.000284z m42.268433 422.627439c0 23.324438-18.91555 42.239988-42.268433 42.239988v-116.195523a132.693296 132.693296 0 0 0-126.776854-137.386629 122.993744 122.993744 0 0 0-105.642637 62.151094 150.015958 150.015958 0 1 0-21.134216 76.060423v115.370635H127.630329c-23.324438 0-42.239988-18.91555-42.239988-42.239988v-295.82214c0-23.352882 18.91555-42.268433 42.268432-42.268433H888.319895c23.324438 0 42.268433 18.91555 42.268433 42.239988v295.82214z m-359.224789-147.91107a63.402649 63.402649 0 1 1-126.776854 0 63.402649 63.402649 0 0 1 126.776854 0z"
|
|
|
- p-id="9211"
|
|
|
- fill="#8a8a8a"
|
|
|
- ></path>
|
|
|
- </svg>
|
|
|
- <p class="text">今日活跃会员数</p>
|
|
|
- <p class="number">{{ homeData.todayActiveUser }}</p>
|
|
|
- </div>
|
|
|
- </el-col> -->
|
|
|
- </el-row>
|
|
|
- <el-row class="line">
|
|
|
- <!-- <el-col class="item second-line" :span="6">
|
|
|
- <div class="do">
|
|
|
- <svg
|
|
|
- t="1641957661068"
|
|
|
- class="icon"
|
|
|
- viewBox="0 0 1024 1024"
|
|
|
- version="1.1"
|
|
|
- xmlns="http://www.w3.org/2000/svg"
|
|
|
- p-id="5770"
|
|
|
- width="64"
|
|
|
- height="64"
|
|
|
- >
|
|
|
- <path
|
|
|
- d="M261.7 522.6h0.2c19.3 0 35-15.7 35-35s-15.7-35-35-35c-31.9 0-58.8-37.7-58.8-82.4s26.9-82.4 58.8-82.4c19.3 0 35-15.7 35-35s-15.7-35-35-35c-35.4 0-69.5 17.3-93.7 47.5-22.6 28.4-35.1 65.6-35.1 104.9s12.5 76.5 35.1 104.9c0.6 0.8 1.3 1.6 2 2.4-22.9 13.2-43.4 31-61.1 53.2-38.3 48-59.5 111.4-59.5 178.4 0 19.3 15.7 35 35 35s35-15.7 35-35c0-51.2 15.7-99.1 44.1-134.7 26.6-33.3 61.3-51.7 97.7-51.7 0.2 0 0.3-0.1 0.3-0.1zM914.8 530.7c-17.7-22.2-38.2-40-61.1-53.2 0.7-0.8 1.3-1.6 2-2.4 22.6-28.4 35.1-65.6 35.1-104.9s-12.5-76.5-35.1-104.9c-24.1-30.2-58.3-47.5-93.7-47.5-19.3 0-35 15.7-35 35s15.7 35 35 35c31.9 0 58.8 37.7 58.8 82.4s-26.9 82.4-58.8 82.4c-19.3 0-35 15.7-35 35s15.7 35 35 35H762.3c36.4 0 71.1 18.4 97.7 51.7 28.5 35.6 44.1 83.5 44.1 134.7 0 19.3 15.7 35 35 35s35-15.7 35-35c0.2-67-21-130.3-59.3-178.3z"
|
|
|
- p-id="5771"
|
|
|
- fill="#8a8a8a"
|
|
|
- ></path>
|
|
|
- <path
|
|
|
- d="M747.4 541c-30.9-30.8-66.9-54.7-106.1-70.8 40.3-34.7 65.8-86 65.8-143.2 0-104.2-84.8-188.9-188.9-188.9-104.2 0-188.9 84.8-188.9 188.9 0 57 25.4 108.2 65.4 142.9C355.2 486 318.9 510 287.8 541c-61.2 61.1-95.1 142.4-95.5 228.9V850.8c0 19.3 15.7 35 35 35h580.5c19.3 0 35-15.7 35-35v-80.2-0.8c-0.3-86.4-34.2-167.6-95.4-228.8zM518.2 208.1c65.6 0 118.9 53.4 118.9 118.9s-53.4 118.9-118.9 118.9S399.3 392.6 399.3 327s53.4-118.9 118.9-118.9z m254.7 607.8H262.3v-44.6-0.6c0.2-140.5 114.8-254.8 255.3-254.8s255 114.3 255.3 254.8v45.2z"
|
|
|
- p-id="5772"
|
|
|
- fill="#8a8a8a"
|
|
|
- ></path>
|
|
|
- </svg>
|
|
|
- <p class="text">总会员数</p>
|
|
|
- <p class="number">{{ homeData.totalUser }}</p>
|
|
|
- </div>
|
|
|
- </el-col> -->
|
|
|
- <!-- <el-col class="item second-line" :span="6">
|
|
|
- <div class="do">
|
|
|
- <svg
|
|
|
- t="1641969647517"
|
|
|
- class="icon"
|
|
|
- viewBox="0 0 1024 1024"
|
|
|
- version="1.1"
|
|
|
- xmlns="http://www.w3.org/2000/svg"
|
|
|
- p-id="3586"
|
|
|
- width="64"
|
|
|
- height="64"
|
|
|
- >
|
|
|
- <path
|
|
|
- d="M128 544h128v288H128zM320 480h128v352H320zM512 320h128v512H512zM704 416h128v416H704z"
|
|
|
- p-id="3587"
|
|
|
- fill="#8a8a8a"
|
|
|
- ></path>
|
|
|
- <path
|
|
|
- d="M576 128L352 352h448L576 128z"
|
|
|
- p-id="3588"
|
|
|
- fill="#8a8a8a"
|
|
|
- ></path>
|
|
|
- </svg>
|
|
|
- <p class="text">总交易金额（元）</p>
|
|
|
- <p class="number">
|
|
|
- {{ homeData.totalPay ? homeData.totalPay : "0.00" }}
|
|
|
- </p>
|
|
|
- </div>
|
|
|
- </el-col> -->
|
|
|
- <!-- <el-col class="item second-line" :span="6">
|
|
|
+ <el-col class="item second-line" :span="6">
|
|
|
<div class="do">
|
|
|
<svg
|
|
|
t="1641957411945"
|
|
|
@@ -223,11 +132,13 @@
|
|
|
p-id="4781"
|
|
|
></path>
|
|
|
</svg>
|
|
|
- <p class="text">总订单数</p>
|
|
|
- <p class="number">{{ homeData.totalOrder }}</p>
|
|
|
+ <p class="text">{{ $t('operational.totalOrderCount') }}</p>
|
|
|
+ <p class="number">{{ mainData.totalOrderCount }}</p>
|
|
|
</div>
|
|
|
- </el-col> -->
|
|
|
- <!-- <el-col class="item second-line" :span="6">
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <!-- <el-row class="line">
|
|
|
+ <el-col class="item second-line" :span="6">
|
|
|
<div class="do">
|
|
|
<svg
|
|
|
t="1641958462543"
|
|
|
@@ -260,171 +171,308 @@
|
|
|
fill="#8a8a8a"
|
|
|
></path>
|
|
|
</svg>
|
|
|
- <p class="text">总支付人数</p>
|
|
|
- <p class="number">{{ homeData.totalPayUser }}</p>
|
|
|
+ <p class="text">{{ $t('operational.totalPayUserCount') }}</p>
|
|
|
+ <p class="number">{{ mainData.totalPayUserCount }}</p>
|
|
|
</div>
|
|
|
- </el-col> -->
|
|
|
- </el-row>
|
|
|
+ </el-col>
|
|
|
+ </el-row> -->
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="overview">
|
|
|
- <div class="title">{{ $t('operational.commonFunctions') }}</div>
|
|
|
- <div class="content">
|
|
|
- <el-row class="line home-tools">
|
|
|
- <!-- <el-col class="item no-border" :span="8"
|
|
|
- ><div class="do" @click="toCashier('/fuintCashier/')">
|
|
|
- <img class="t-icon" src="@/assets/images/home/pay.png" />
|
|
|
- <div class="text">收银下单</div>
|
|
|
- </div></el-col
|
|
|
- > -->
|
|
|
- <!-- <el-col class="item no-border" :span="8"
|
|
|
- ><div class="do" @click="toTarget('/coupon/confirm/index')">
|
|
|
- <img class="t-icon" src="@/assets/images/home/coupon.png" />
|
|
|
- <div class="text">核销卡券</div>
|
|
|
- </div></el-col
|
|
|
- > -->
|
|
|
- <!-- <el-col class="item no-border" :span="8"
|
|
|
- ><div class="do" @click="toTarget('/member/index')">
|
|
|
- <img class="t-icon" src="@/assets/images/home/member.png" />
|
|
|
- <div class="text">会员管理</div>
|
|
|
- </div></el-col
|
|
|
- > -->
|
|
|
- <el-col class="item no-border" :span="8">
|
|
|
- <div class="do" @click="toTarget('/order/index')">
|
|
|
- <img class="t-icon" src="@/assets/images/home/order.png" />
|
|
|
- <div class="text">{{ $t('operational.orderManagement') }}</div>
|
|
|
- </div>
|
|
|
- </el-col>
|
|
|
- <el-col class="item no-border" :span="8">
|
|
|
- <div class="do" @click="toTarget('/goods/goods/index')">
|
|
|
- <img class="t-icon" src="@/assets/images/home/goods.png" />
|
|
|
- <div class="text">{{ $t('operational.goodsManagement') }}</div>
|
|
|
- </div>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
- </div>
|
|
|
+ <div class="title">{{ $t('operational.operationTrend') }}</div>
|
|
|
+ <div class="content">
|
|
|
+ <el-row>
|
|
|
+ <el-col class="item" :span="24">
|
|
|
+ <commonChart
|
|
|
+ v-if="chartData1.length > 0"
|
|
|
+ :title="chart1.title"
|
|
|
+ :color="chart1.color"
|
|
|
+ :chart-type="chart1.chartType"
|
|
|
+ :head-list="chart1.header"
|
|
|
+ :data-list="chartData1"
|
|
|
+ width="100%"
|
|
|
+ id="chart1"
|
|
|
+ height="400px"
|
|
|
+ />
|
|
|
+ </el-col>
|
|
|
+ <!-- <el-col class="item" :span="12">
|
|
|
+ <commonChart
|
|
|
+ v-if="chartData2.length > 0"
|
|
|
+ :title="chart2.title"
|
|
|
+ :color="chart2.color"
|
|
|
+ :chart-type="chart2.chartType"
|
|
|
+ :head-list="chart2.header"
|
|
|
+ :data-list="chartData2"
|
|
|
+ width="100%"
|
|
|
+ id="chart2"
|
|
|
+ height="400px"
|
|
|
+ />
|
|
|
+ </el-col> -->
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- <div class="overview">
|
|
|
- <div class="title">{{ $t('operational.reportStatistics') }}</div>
|
|
|
- <div class="content">
|
|
|
- <el-row>
|
|
|
- <el-col class="item" :span="12">
|
|
|
- <commonChart
|
|
|
- v-if="chartData1.length > 0"
|
|
|
- :title="chart1.title"
|
|
|
- :color="chart1.color"
|
|
|
- :chart-type="chart1.chartType"
|
|
|
- :head-list="chart1.header"
|
|
|
- :data-list="chartData1"
|
|
|
- width="100%"
|
|
|
- id="chart1"
|
|
|
- height="400px"
|
|
|
- />
|
|
|
- </el-col>
|
|
|
- <el-col class="item" :span="12">
|
|
|
- <commonChart
|
|
|
- v-if="chartData2.length > 0"
|
|
|
- :title="chart2.title"
|
|
|
- :color="chart2.color"
|
|
|
- :chart-type="chart2.chartType"
|
|
|
- :head-list="chart2.header"
|
|
|
- :data-list="chartData2"
|
|
|
- width="100%"
|
|
|
- id="chart2"
|
|
|
- height="400px"
|
|
|
- />
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
- </div>
|
|
|
+ <div class="overview" v-if="chartData3.length > 0">
|
|
|
+ <div class="title">{{ $t('operational.StoreRanking') }}</div>
|
|
|
+ <div class="content">
|
|
|
+ <el-row>
|
|
|
+ <div class="date-picker">
|
|
|
+ <el-form :inline="true" class="demo-form-inline">
|
|
|
+ <el-form-item label="时间范围">
|
|
|
+ <el-date-picker
|
|
|
+ v-model="timeRange2"
|
|
|
+ value-format="yyyy-MM-dd HH:mm:ss"
|
|
|
+ type="datetimerange"
|
|
|
+ style="width: 400px"
|
|
|
+ :start-placeholder="$t('orderList.startTime')"
|
|
|
+ :end-placeholder="$t('orderList.endTime')"
|
|
|
+ :picker-options="pickerOptions"
|
|
|
+ ></el-date-picker>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ </el-form>
|
|
|
+ </div>
|
|
|
+ <div class="do-search">
|
|
|
+ <el-button icon="el-icon-refresh" size="small" @click="reset2">
|
|
|
+ {{ $t('operational.reset') }}
|
|
|
+ </el-button>
|
|
|
+ <el-button type="primary" icon="el-icon-search" size="small" @click="getChartsData2">
|
|
|
+ {{ $t('operational.query') }}
|
|
|
+ </el-button>
|
|
|
+ <span class="ex" @click="setDay2(3)">{{ $t('operational.lastThreeDays') }}</span>
|
|
|
+ <span class="ex" @click="setDay2(7)">{{ $t('operational.lastSevenDays') }}</span>
|
|
|
+ <span class="ex" @click="setDay2(15)">{{ $t('operational.lastFifteenDays') }}</span>
|
|
|
+ <span class="ex" @click="setDay2(30)">{{ $t('operational.lastThirtyDays') }}</span>
|
|
|
+ </div>
|
|
|
+ </el-row>
|
|
|
+ <el-row>
|
|
|
+ <el-col class="item" :span="24">
|
|
|
+ <commonChart
|
|
|
+ v-if="chartData3.length > 0"
|
|
|
+ :title="chart3.title"
|
|
|
+ :color="chart3.color"
|
|
|
+ :chart-type="chart3.chartType"
|
|
|
+ :head-list="chart3.header"
|
|
|
+ :data-list="chartData3"
|
|
|
+ width="100%"
|
|
|
+ id="chart3"
|
|
|
+ height="400px"
|
|
|
+ />
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
+ <!-- <ECharts :options="chartOptions" /> -->
|
|
|
+ <!-- <div class="overview">
|
|
|
+ <div class="title">{{ $t('operational.dataRanking') }}</div>
|
|
|
+ <div class="content">
|
|
|
+ <el-row>
|
|
|
+ <el-col class="item" :span="12">
|
|
|
+ <div class="title">{{ $t('operational.goodsSalesRanking') }}</div>
|
|
|
+ <el-table v-loading="loading" :data="goodsList" style="border: solid 1px #cccccc">
|
|
|
+ <el-table-column :label="$t('operational.id')" prop="id" width="60" />
|
|
|
+ <el-table-column :label="$t('operational.goodsName')" align="center">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <span>{{ scope.row.name }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column :label="$t('operational.salesVolume')" align="center" prop="num" />
|
|
|
+ <el-table-column :label="$t('operational.salesAmount')" align="center" prop="amount">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <span>{{ scope.row.amount.toFixed(2) }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </el-col>
|
|
|
+ <el-col class="item" :span="12">
|
|
|
+ <div class="title">{{ $t('operational.userConsumptionRanking') }}</div>
|
|
|
+ <el-table v-loading="loading" :data="memberList" style="border: solid 1px #cccccc">
|
|
|
+ <el-table-column :label="$t('operational.id')" prop="id" width="60" />
|
|
|
+ <el-table-column :label="$t('operational.userName')" align="center" width="100">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <span>{{ scope.row.name }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ :label="$t('operational.memberNumber')"
|
|
|
+ align="center"
|
|
|
+ prop="userNo"
|
|
|
+ />
|
|
|
+ <el-table-column
|
|
|
+ :label="$t('operational.consumptionAmount')"
|
|
|
+ align="center"
|
|
|
+ prop="amount"
|
|
|
+ >
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <span>{{ scope.row.amount.toFixed(2) }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
+ </div> -->
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import { getHomeData, getStatisticData } from "@/api/home";
|
|
|
-import commonChart from "./components/charts/index";
|
|
|
+import { getNumDayTime } from '@/utils/fuint'
|
|
|
+import { getStatisticData, getStatisticData2 } from '@/api/home'
|
|
|
+import { getMainData, getTopData } from '@/api/statistic'
|
|
|
+import commonChart from '@/views/components/charts/index'
|
|
|
+import ECharts from '@/components/eCharts/eCharts'
|
|
|
+
|
|
|
export default {
|
|
|
- name: "HomePage",
|
|
|
+ name: 'Statistic',
|
|
|
components: {
|
|
|
commonChart,
|
|
|
+ ECharts
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
+ // 配置日期选择器的选项
|
|
|
+ pickerOptions: {
|
|
|
+ disabledDate(time) {
|
|
|
+ // 禁止选择当前时间之后的日期
|
|
|
+ return time.getTime() > Date.now()
|
|
|
+ }
|
|
|
+ },
|
|
|
loading: false,
|
|
|
- homeData: {
|
|
|
- todayUser: 0,
|
|
|
- totalUser: 0,
|
|
|
- todayOrder: 0,
|
|
|
- totalOrder: 0,
|
|
|
- todayPay: 0,
|
|
|
- totalPay: 0,
|
|
|
- todayActiveUser: 0,
|
|
|
- totalPayUser: 0,
|
|
|
+ startTime: getNumDayTime(30),
|
|
|
+ endTime: getNumDayTime(0),
|
|
|
+ timeRange: [getNumDayTime(30), getNumDayTime(0)],
|
|
|
+ timeRange2: [getNumDayTime(30), getNumDayTime(0)],
|
|
|
+ mainData: {
|
|
|
+ userCount: 0,
|
|
|
+ totalUserCount: 0,
|
|
|
+ orderCount: 0,
|
|
|
+ totalOrderCount: 0,
|
|
|
+ payAmount: 0,
|
|
|
+ totalPayAmount: 0,
|
|
|
+ activeUserCount: 0,
|
|
|
+ totalPayUserCount: 0
|
|
|
},
|
|
|
chart1: {
|
|
|
- title: this.$t('operational.lastSevenDaysOrderCount'),
|
|
|
- color: "#ff5b57",
|
|
|
- chartType: "bar",
|
|
|
- header: [this.$t('operational.orderStatistics')],
|
|
|
+ title: this.$t('operational.lastSevenDaysOrderCount'),
|
|
|
+ color: '#ff5b57',
|
|
|
+ chartType: 'bar',
|
|
|
+ header: [this.$t('operational.orderStatistics')]
|
|
|
},
|
|
|
chart2: {
|
|
|
- title: this.$t('operational.incomeComparisonAmount'),
|
|
|
- color: "#113a28",
|
|
|
- chartType: "line",
|
|
|
- header: [this.$t('operational.income')],
|
|
|
+ title: this.$t('operational.incomeTrendChart'),
|
|
|
+ color: '#113a28',
|
|
|
+ chartType: 'line',
|
|
|
+ header: [this.$t('operational.memberStatistics')]
|
|
|
+ },
|
|
|
+ chart3: {
|
|
|
+ title: this.$t('operational.StoreRanking'),
|
|
|
+ color: '#ff5b57',
|
|
|
+ chartType: 'bar',
|
|
|
+ header: [this.$t('operational.SalesStatistics')]
|
|
|
},
|
|
|
chartData1: [],
|
|
|
chartData2: [],
|
|
|
- };
|
|
|
- },
|
|
|
- computed: {
|
|
|
+ chartData3: [],
|
|
|
+ goodsList: [],
|
|
|
+ memberList: []
|
|
|
+ }
|
|
|
},
|
|
|
created() {
|
|
|
- this.getHomeData();
|
|
|
- this.getChartsData();
|
|
|
+ this.getMainData()
|
|
|
+ this.getChartsData()
|
|
|
+ this.getChartsData2()
|
|
|
+ this.getTopData()
|
|
|
},
|
|
|
methods: {
|
|
|
+ // 重置
|
|
|
+ reset() {
|
|
|
+ this.startTime = ''
|
|
|
+ this.endTime = ''
|
|
|
+ this.timeRange = [this.startTime, this.endTime]
|
|
|
+ },
|
|
|
+ reset2() {
|
|
|
+ this.timeRange2 = [this.startTime, this.endTime]
|
|
|
+ },
|
|
|
+ // 设置日期
|
|
|
+ setDay(day) {
|
|
|
+ this.startTime = getNumDayTime(day - 1)
|
|
|
+ this.endTime = getNumDayTime(0)
|
|
|
+ this.timeRange = [this.startTime, this.endTime]
|
|
|
+ this.getMainData()
|
|
|
+ this.getTopData()
|
|
|
+ },
|
|
|
+ setDay2(day) {
|
|
|
+ this.timeRange2 = [getNumDayTime(day - 1), getNumDayTime(0)]
|
|
|
+ this.getChartsData2()
|
|
|
+ },
|
|
|
// 查询首页数据
|
|
|
- getHomeData() {
|
|
|
- this.loading = true;
|
|
|
- getHomeData().then((response) => {
|
|
|
- this.homeData = response.data;
|
|
|
- this.loading = false;
|
|
|
- });
|
|
|
+ getMainData() {
|
|
|
+ this.loading = true
|
|
|
+ const param = { startTime: this.timeRange[0], endTime: this.timeRange[1] }
|
|
|
+ getMainData(param).then((response) => {
|
|
|
+ this.mainData = response.data
|
|
|
+ this.loading = false
|
|
|
+ })
|
|
|
+ },
|
|
|
+ getChartsData2(){
|
|
|
+ const app = this
|
|
|
+ app.loading = true
|
|
|
+ // 查询店铺排名数据
|
|
|
+ getStatisticData2({startTime:this.timeRange2[0],endTime:this.timeRange2[1]}).then((response) => {
|
|
|
+ // console.log(response)
|
|
|
+ // return;
|
|
|
+ const data = response.data
|
|
|
+
|
|
|
+ const dataList = []
|
|
|
+ for(let i = 0; i<data.dataY.length; i++){
|
|
|
+ dataList.push({name:data.dataX[i],value0:data.dataY[i]})
|
|
|
+ }
|
|
|
+
|
|
|
+ // data.labels.forEach(function (label, index) {
|
|
|
+ // const value1 = labelData1[index] ? labelData1[index] : 0
|
|
|
+ // const value2 = labelData2[index] ? labelData2[index] : 0
|
|
|
+ // dataList1.push({ name: label, value0: value1 })
|
|
|
+ // dataList2.push({ name: label, value0: value2 })
|
|
|
+ // })
|
|
|
+ app.chartData3 = dataList
|
|
|
+ app.loading = false
|
|
|
+ })
|
|
|
},
|
|
|
// 查询统计数据
|
|
|
getChartsData() {
|
|
|
- const app = this;
|
|
|
- app.loading = true;
|
|
|
- // 近7日订单数量和活跃会员数量
|
|
|
- getStatisticData({ tag: "order,user_active" }).then((response) => {
|
|
|
- const data = response.data;
|
|
|
- const labelData1 = data.data[0] ? data.data[0] : [];
|
|
|
- const labelData2 = data.data[1] ? data.data[1] : [];
|
|
|
- const dataList1 = [];
|
|
|
- const dataList2 = [];
|
|
|
+ const app = this
|
|
|
+ app.loading = true
|
|
|
+ getStatisticData({ tag: 'order,user_active' }).then((response) => {
|
|
|
+ const data = response.data
|
|
|
+ const labelData1 = data.data[0] ? data.data[0] : []
|
|
|
+ const labelData2 = data.data[1] ? data.data[1] : []
|
|
|
+ const dataList1 = []
|
|
|
+ const dataList2 = []
|
|
|
|
|
|
data.labels.forEach(function (label, index) {
|
|
|
- const value1 = labelData1[index] ? labelData1[index] : 0;
|
|
|
- const value2 = labelData2[index] ? labelData2[index] : 0;
|
|
|
- dataList1.push({ name: label, value0: value1 });
|
|
|
- dataList2.push({ name: label, value0: value2 });
|
|
|
- });
|
|
|
- app.chartData1 = dataList1;
|
|
|
- app.chartData2 = dataList2;
|
|
|
- app.loading = false;
|
|
|
- });
|
|
|
- },
|
|
|
- // 页面跳转
|
|
|
- toTarget(url) {
|
|
|
- this.$router.push({ path: url });
|
|
|
- },
|
|
|
- // 去收银台
|
|
|
- toCashier(url) {
|
|
|
- window.open(url, "_blank");
|
|
|
+ const value1 = labelData1[index] ? labelData1[index] : 0
|
|
|
+ const value2 = labelData2[index] ? labelData2[index] : 0
|
|
|
+ dataList1.push({ name: label, value0: value1 })
|
|
|
+ dataList2.push({ name: label, value0: value2 })
|
|
|
+ })
|
|
|
+ app.chartData1 = dataList1
|
|
|
+ app.chartData2 = dataList2
|
|
|
+ app.loading = false
|
|
|
+ })
|
|
|
+
|
|
|
},
|
|
|
- },
|
|
|
-};
|
|
|
+ // 查询排行榜数据
|
|
|
+ getTopData() {
|
|
|
+ const app = this
|
|
|
+ app.loading = true
|
|
|
+ const param = { startTime: this.startTime, endTime: this.endTime }
|
|
|
+ getTopData(param).then((response) => {
|
|
|
+ app.loading = false
|
|
|
+ app.goodsList = response.data.goodsList
|
|
|
+ app.memberList = response.data.memberList
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
</script>
|
|
|
|
|
|
<style scoped lang="scss">
|
|
|
@@ -445,6 +493,26 @@ export default {
|
|
|
.content {
|
|
|
padding: 15px;
|
|
|
border: solid 1px #d5d7d8;
|
|
|
+ .date-picker {
|
|
|
+ margin-left: 5px;
|
|
|
+ float: left;
|
|
|
+ margin-right: 10px;
|
|
|
+ }
|
|
|
+ .do-search {
|
|
|
+ margin-top: 2px;
|
|
|
+ float: left;
|
|
|
+ .ex {
|
|
|
+ color: #666666;
|
|
|
+ font-size: 12px;
|
|
|
+ width: 60px;
|
|
|
+ margin-left: 20px;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ .ex:hover {
|
|
|
+ color: #ff5b57;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+ }
|
|
|
.item {
|
|
|
display: block;
|
|
|
border-right: none;
|
|
|
@@ -482,30 +550,6 @@ export default {
|
|
|
color: #ff5b57;
|
|
|
}
|
|
|
}
|
|
|
- .home-tools {
|
|
|
- .do {
|
|
|
- height: 90px;
|
|
|
- margin-bottom: 10px;
|
|
|
- cursor: pointer;
|
|
|
- font-weight: bold;
|
|
|
- color: #666666;
|
|
|
- border-radius: 2px;
|
|
|
- text-align: left;
|
|
|
- padding: 20px 0px 10px 20px;
|
|
|
- float: left;
|
|
|
- width: 100%;
|
|
|
- background: #ffffff;
|
|
|
- border: solid 1px #cccccc;
|
|
|
- .text {
|
|
|
- margin-top: 14px;
|
|
|
- }
|
|
|
- }
|
|
|
- .t-icon {
|
|
|
- width: 50px;
|
|
|
- height: 50px;
|
|
|
- float: left;
|
|
|
- }
|
|
|
- }
|
|
|
}
|
|
|
}
|
|
|
</style>
|
