源文件
This commit is contained in:
381
src/views/home/data_forms.vue
Normal file
381
src/views/home/data_forms.vue
Normal file
@@ -0,0 +1,381 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<el-tabs v-model="orderType" @tab-click="getTableData">
|
||||
<el-tab-pane label="收款" name="1"></el-tab-pane>
|
||||
<el-tab-pane label="销量" name="2"></el-tab-pane>
|
||||
</el-tabs>
|
||||
<div class="head-container">
|
||||
<el-form :model="query" label-position="left">
|
||||
<el-form-item>
|
||||
<el-radio-group v-model="timeValue" @change="timeChange">
|
||||
<el-radio-button label="">全部</el-radio-button>
|
||||
<el-radio-button label="0">今天</el-radio-button>
|
||||
<el-radio-button label="-1">昨天</el-radio-button>
|
||||
<el-radio-button label="-7">最近7天</el-radio-button>
|
||||
<el-radio-button label="-30">最近30天</el-radio-button>
|
||||
<el-radio-button label="week">本周</el-radio-button>
|
||||
<el-radio-button label="month">本月</el-radio-button>
|
||||
<el-radio-button label="custom">自定义</el-radio-button>
|
||||
</el-radio-group>
|
||||
<el-date-picker
|
||||
v-model="query.createdAt"
|
||||
type="daterange"
|
||||
range-separator="至"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
:default-time="['00:00:00', '23:59:59']"
|
||||
value-format="yyyy-MM-dd HH:mm:ss"
|
||||
v-if="timeValue == 'custom'"
|
||||
>
|
||||
</el-date-picker
|
||||
><el-button type="primary" @click="getTableData">查询</el-button>
|
||||
<el-button @click="resetHandle">重置</el-button>
|
||||
<el-button
|
||||
icon="el-icon-download"
|
||||
v-loading="downloadLoading"
|
||||
@click="downloadHandle"
|
||||
>
|
||||
<span v-if="!downloadLoading">导出Excel</span>
|
||||
<span v-else>下载中...</span>
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<div class="head-container">
|
||||
<div class="collect_wrap">
|
||||
<div class="item" v-for="item in payCountList" :key="item.id">
|
||||
<div class="icon_wrap" style="--bg-color:#C978EE">
|
||||
<i class="icon" :class="item.icon"></i>
|
||||
</div>
|
||||
<div class="info">
|
||||
<div class="m">￥{{ item.payAmount }}</div>
|
||||
<div class="t">{{ item.payType }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="head-container">
|
||||
<el-table
|
||||
:data="tableData.data"
|
||||
v-loading="tableData.loading"
|
||||
v-if="orderType == 1"
|
||||
>
|
||||
<el-table-column label="日期" prop="tradeDay"></el-table-column>
|
||||
<el-table-column label="总金额" prop="total"></el-table-column>
|
||||
<el-table-column label="微信小程序支付" prop="wxLite"></el-table-column>
|
||||
<el-table-column label="扫码支付金额" prop="scanCode"></el-table-column>
|
||||
<el-table-column label="现金支付金额" prop="cash"></el-table-column>
|
||||
</el-table>
|
||||
<el-table
|
||||
:data="tableData.data"
|
||||
v-loading="tableData.loading"
|
||||
v-if="orderType == 2"
|
||||
>
|
||||
<el-table-column label="商品名称" prop="productName"></el-table-column>
|
||||
<el-table-column
|
||||
label="商品描述"
|
||||
prop="productSkuName"
|
||||
></el-table-column>
|
||||
<el-table-column label="销量" prop="salesNum"></el-table-column>
|
||||
<el-table-column label="退单量" prop="refNum"></el-table-column>
|
||||
<el-table-column label="总量" prop="num"></el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
<div class="head-container">
|
||||
<el-pagination
|
||||
:total="tableData.total"
|
||||
:current-page="tableData.page + 1"
|
||||
:page-size="tableData.size"
|
||||
@current-change="paginationChange"
|
||||
@size-change="sizeChange"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
></el-pagination>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { daydownload, daycount, summaryday } from "@/api/home";
|
||||
import dayjs from "dayjs";
|
||||
import { downloadFile } from "@/utils/index";
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
timeValue: "",
|
||||
resetQuery: null,
|
||||
orderType: "1",
|
||||
query: {
|
||||
createdAt: []
|
||||
},
|
||||
tableData: {
|
||||
data: [],
|
||||
page: 0,
|
||||
size: 10,
|
||||
loading: false,
|
||||
total: 0
|
||||
},
|
||||
downloadLoading: false,
|
||||
payCountList: "",
|
||||
payCountTotal: 0
|
||||
};
|
||||
},
|
||||
filters: {
|
||||
timeFilter(time) {
|
||||
return dayjs(time).format("YYYY-MM-DD HH:mm:ss");
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.resetQuery = { ...this.query };
|
||||
this.getTableData();
|
||||
},
|
||||
methods: {
|
||||
// 获取订单汇总
|
||||
async daycount() {
|
||||
try {
|
||||
const res = await daycount({
|
||||
startTime: this.query.createdAt[0],
|
||||
endTime: this.query.createdAt[1]
|
||||
});
|
||||
this.payCountList = res;
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
},
|
||||
// 导出Excel
|
||||
async downloadHandle() {
|
||||
try {
|
||||
this.downloadLoading = true;
|
||||
const file = await daydownload({
|
||||
type: this.orderType,
|
||||
startTime: this.query.createdAt[0],
|
||||
endTime: this.query.createdAt[1]
|
||||
});
|
||||
downloadFile(file, "数据", "xlsx");
|
||||
this.downloadLoading = false;
|
||||
} catch (error) {
|
||||
this.downloadLoading = false;
|
||||
console.log(error);
|
||||
}
|
||||
},
|
||||
// 重置查询
|
||||
resetHandle() {
|
||||
this.timeValue = "";
|
||||
this.query = { ...this.resetQuery };
|
||||
this.page = 0;
|
||||
this.getTableData();
|
||||
},
|
||||
// 分页大小改变
|
||||
sizeChange(e) {
|
||||
this.tableData.size = e;
|
||||
this.getTableData();
|
||||
},
|
||||
// 分页回调
|
||||
paginationChange(e) {
|
||||
this.tableData.page = e - 1;
|
||||
this.getTableData();
|
||||
},
|
||||
async getTableData() {
|
||||
this.tableData.loading = true;
|
||||
try {
|
||||
this.daycount();
|
||||
const res = await summaryday({
|
||||
page: this.tableData.page,
|
||||
size: this.tableData.size,
|
||||
type: this.orderType,
|
||||
startTime: this.query.createdAt[0],
|
||||
endTime: this.query.createdAt[1]
|
||||
});
|
||||
this.tableData.loading = false;
|
||||
this.tableData.data = res.content;
|
||||
this.tableData.total = res.totalElements;
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
},
|
||||
// 切换时间
|
||||
timeChange(e) {
|
||||
const format = ["YYYY-MM-DD 00:00:00", "YYYY-MM-DD 23:59:59"];
|
||||
switch (e) {
|
||||
case "":
|
||||
// 全部
|
||||
this.query.createdAt = [];
|
||||
break;
|
||||
case "0":
|
||||
// 今天
|
||||
this.query.createdAt = [
|
||||
dayjs().format(format[0]),
|
||||
dayjs().format(format[1])
|
||||
];
|
||||
break;
|
||||
case "-1":
|
||||
// 昨天
|
||||
this.query.createdAt = [
|
||||
dayjs()
|
||||
.add(-1, "d")
|
||||
.format(format[0]),
|
||||
dayjs()
|
||||
.add(-1, "d")
|
||||
.format(format[1])
|
||||
];
|
||||
break;
|
||||
case "-7":
|
||||
// 最近7天
|
||||
this.query.createdAt = [
|
||||
dayjs()
|
||||
.add(-7, "d")
|
||||
.format(format[0]),
|
||||
dayjs().format(format[1])
|
||||
];
|
||||
break;
|
||||
case "-30":
|
||||
// 最近7天
|
||||
this.query.createdAt = [
|
||||
dayjs()
|
||||
.add(-30, "d")
|
||||
.format(format[0]),
|
||||
dayjs().format(format[1])
|
||||
];
|
||||
break;
|
||||
case "week":
|
||||
// 本周
|
||||
this.query.createdAt = [
|
||||
dayjs()
|
||||
.startOf("week")
|
||||
.format(format[0]),
|
||||
dayjs()
|
||||
.endOf("week")
|
||||
.format(format[1])
|
||||
];
|
||||
break;
|
||||
case "month":
|
||||
// 本周
|
||||
this.query.createdAt = [
|
||||
dayjs()
|
||||
.startOf("month")
|
||||
.format(format[0]),
|
||||
dayjs()
|
||||
.endOf("month")
|
||||
.format(format[1])
|
||||
];
|
||||
break;
|
||||
case "custom":
|
||||
// 自定义
|
||||
this.query.createdAt = [];
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.collect_wrap {
|
||||
display: flex;
|
||||
gap: 14px;
|
||||
|
||||
.item {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background-color: #f5f5f5;
|
||||
padding: 20px;
|
||||
|
||||
.icon_wrap {
|
||||
$size: 34px;
|
||||
$border: 6px;
|
||||
width: $size;
|
||||
height: $size;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: var(--bg-color);
|
||||
border-radius: 50%;
|
||||
position: relative;
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
width: $size + $border;
|
||||
height: $size + $border;
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
background-color: var(--bg-color);
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
.icon {
|
||||
font-size: 16px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.img {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.info {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding-left: 10px;
|
||||
|
||||
.m {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.t {
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
padding-top: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.refund {
|
||||
color: #ff9731;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.table_order_info {
|
||||
.order_no {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.type {
|
||||
color: #e6a23c;
|
||||
}
|
||||
}
|
||||
|
||||
.goods_info {
|
||||
.row {
|
||||
display: flex;
|
||||
|
||||
&:not(:first-child) {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.cover {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.info {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding-left: 10px;
|
||||
|
||||
.sku {
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
899
src/views/home/home.vue
Normal file
899
src/views/home/home.vue
Normal file
@@ -0,0 +1,899 @@
|
||||
<template>
|
||||
<div class="app-container" style="padding-bottom: 100px;">
|
||||
<div class="card_wrap">
|
||||
<div class="card">
|
||||
<div class="header">
|
||||
<div class="card_title">总销售额</div>
|
||||
<el-tooltip effect="dark" content="订单支付金额" placement="top">
|
||||
<i class="icon el-icon-warning-outline"></i>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
<div class="number">{{ topData.totalSales || 0 }}</div>
|
||||
<div class="row">平均每单{{ topData.averageSales || 0 }}</div>
|
||||
<div class="row">今日销售额{{ topData.totalSalesToday || 0 }}</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="header">
|
||||
<div class="card_title">支付笔数</div>
|
||||
</div>
|
||||
<div class="number">{{ topData.paymentsNumber }}</div>
|
||||
<div class="row" ref="cardPayChart" style="padding-bottom: 2px;"></div>
|
||||
<div class="row">
|
||||
今日支付笔数{{ topData.paymentsNumberToday || 0 }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="header">
|
||||
<div class="card_title">访问量</div>
|
||||
</div>
|
||||
<div class="number">{{ topData.totalVisits }}</div>
|
||||
<div class="row" ref="cardCountChart" style="padding-bottom: 2px;"></div>
|
||||
<div class="row">
|
||||
<div class="dot"></div>
|
||||
今日访问 {{ topData.totalVisitsToday || 0 }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="header">
|
||||
<div class="card_title">用户数</div>
|
||||
</div>
|
||||
<div class="number">{{ topData.totalUser }}</div>
|
||||
<div class="row" ref="cardUserChart" style="padding-bottom: 2px;"></div>
|
||||
<div class="row">
|
||||
今日新增 {{ topData.userToday || 0 }}
|
||||
<i class="icon el-icon-caret-top"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 销售额 -->
|
||||
<div class="chart_wrap">
|
||||
<div class="item">
|
||||
<div class="header">
|
||||
<div class="tab_wrap">
|
||||
<div class="item active">销售额</div>
|
||||
</div>
|
||||
<el-radio-group v-model="saleActive" @change="dateAmount">
|
||||
<el-radio-button label="7">近7天</el-radio-button>
|
||||
<el-radio-button label="30">30天</el-radio-button>
|
||||
</el-radio-group>
|
||||
</div>
|
||||
<div
|
||||
class="chart"
|
||||
ref="saleChart"
|
||||
v-loading="saleLoading"
|
||||
style="height: 400px;"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="chart_wrap" style="display: flex;">
|
||||
<!-- 商品销售排行 -->
|
||||
<div class="item">
|
||||
<div class="header">
|
||||
<div class="tab_wrap">
|
||||
<div class="item active">商品销售排行</div>
|
||||
</div>
|
||||
<el-radio-group v-model="saleTableActive" @change="rankChange">
|
||||
<el-radio-button label="1">今天</el-radio-button>
|
||||
<el-radio-button label="7">近7天</el-radio-button>
|
||||
<el-radio-button label="30">30天</el-radio-button>
|
||||
</el-radio-group>
|
||||
</div>
|
||||
<div class="sale_data">
|
||||
<div class="card">
|
||||
<div class="sale_data_header">
|
||||
<div class="card_title">销售数量</div>
|
||||
</div>
|
||||
<div class="number">{{ productCount }}</div>
|
||||
<div class="product_chart_wrap" ref="productCountChart"></div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="sale_data_header">
|
||||
<div class="card_title">销售金额</div>
|
||||
</div>
|
||||
<div class="number">￥{{ productSum }}</div>
|
||||
<div class="product_chart_wrap" ref="productSumChart"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="table">
|
||||
<el-table :data="saleTable" v-loading="saleTableLoading">
|
||||
<el-table-column label="排名" prop="productId"></el-table-column>
|
||||
<el-table-column
|
||||
label="商品名称"
|
||||
prop="productName"
|
||||
></el-table-column>
|
||||
<el-table-column label="数量" prop="productNum"></el-table-column>
|
||||
<el-table-column label="金额" prop="amount"></el-table-column>
|
||||
</el-table>
|
||||
<div
|
||||
class="head-container"
|
||||
style="padding-top: 20px;display: flex;justify-content: flex-end;"
|
||||
>
|
||||
<el-pagination
|
||||
:total="saleTableTotal"
|
||||
:page-size="saleTableSize"
|
||||
:current-page="saleTablePage"
|
||||
@current-change="paginationChange"
|
||||
layout="total, prev, pager, next, jumper"
|
||||
></el-pagination>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 支付类型占比 -->
|
||||
<div class="item" style="margin-left: 20px;">
|
||||
<div class="header">
|
||||
<div class="tab_wrap">
|
||||
<div class="item active">支付占比类型</div>
|
||||
</div>
|
||||
<el-radio-group v-model="payChartDay" @change="datePayType">
|
||||
<el-radio-button label="7">近7天</el-radio-button>
|
||||
<el-radio-button label="30">30天</el-radio-button>
|
||||
</el-radio-group>
|
||||
</div>
|
||||
<div
|
||||
style="height: 400px;margin-top: 30px;"
|
||||
ref="payChart"
|
||||
v-loading="payChartLoading"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
summaryGet,
|
||||
summaryTodayGet,
|
||||
dateProduct,
|
||||
dateAmount,
|
||||
datePayType,
|
||||
summaryDateGet
|
||||
} from "@/api/home";
|
||||
import echarts from "echarts";
|
||||
import { debounce } from "@/utils";
|
||||
export default {
|
||||
name: "home",
|
||||
data() {
|
||||
return {
|
||||
topData: "",
|
||||
saleTab: "sale",
|
||||
saleActive: "7",
|
||||
cardPayChart: null,
|
||||
cardCountChart: null,
|
||||
cardUserChart: null,
|
||||
saleLoading: false,
|
||||
saleChart: null,
|
||||
payChartDay: "7",
|
||||
payChartLoading: false,
|
||||
payChart: null,
|
||||
chartType: 1,
|
||||
productCount: 0,
|
||||
productSum: 0,
|
||||
saleTableActive: "1",
|
||||
saleTable: [],
|
||||
saleTableLoading: false,
|
||||
saleTablePage: 1,
|
||||
saleTableTotal: 0,
|
||||
saleTableSize: 5,
|
||||
__resizeHandler: null,
|
||||
productCountChart: null,
|
||||
productSumChart: null
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.summaryGet();
|
||||
this.dateAmount();
|
||||
this.dateProduct();
|
||||
this.datePayType();
|
||||
this.summaryDateGet();
|
||||
|
||||
this.__resizeHandler = debounce(() => {
|
||||
if (this.saleChart) {
|
||||
this.saleChart.resize();
|
||||
}
|
||||
if (this.payChart) {
|
||||
this.payChart.resize();
|
||||
}
|
||||
if (this.cardPayChart) {
|
||||
this.cardPayChart.resize();
|
||||
}
|
||||
if (this.cardUserChart) {
|
||||
this.cardUserChart.resize();
|
||||
}
|
||||
if (this.productCountChart) {
|
||||
this.productCountChart.resize();
|
||||
}
|
||||
if (this.productSumChart) {
|
||||
this.productSumChart.resize();
|
||||
}
|
||||
}, 100);
|
||||
window.addEventListener("resize", this.__resizeHandler);
|
||||
this.initCardUserChart();
|
||||
},
|
||||
methods: {
|
||||
// 初始化支付笔数柱状图
|
||||
initCardPayChart(time = [], data = []) {
|
||||
this.cardPayChart = echarts.init(this.$refs.cardPayChart);
|
||||
this.cardPayChart.setOption({
|
||||
tooltip: {
|
||||
trigger: "axis"
|
||||
},
|
||||
grid: {
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 0
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: "category",
|
||||
data: time,
|
||||
show: false, // 不显示坐标轴线、坐标轴刻度线和坐标轴上的文字
|
||||
axisTick: {
|
||||
show: false // 不显示坐标轴刻度线
|
||||
},
|
||||
axisLine: {
|
||||
show: false // 不显示坐标轴线
|
||||
},
|
||||
axisLabel: {
|
||||
show: false // 不显示坐标轴上的文字
|
||||
},
|
||||
splitLine: {
|
||||
show: false // 不显示网格线
|
||||
}
|
||||
}
|
||||
],
|
||||
color: "#409eff",
|
||||
yAxis: [
|
||||
{
|
||||
type: "value",
|
||||
show: false, // 不显示坐标轴线、坐标轴刻度线和坐标轴上的文字
|
||||
axisTick: {
|
||||
show: false // 不显示坐标轴刻度线
|
||||
},
|
||||
axisLine: {
|
||||
show: false // 不显示坐标轴线
|
||||
},
|
||||
axisLabel: {
|
||||
show: false // 不显示坐标轴上的文字
|
||||
},
|
||||
splitLine: {
|
||||
show: false // 不显示网格线
|
||||
}
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
data: data,
|
||||
type: "bar",
|
||||
barWidth: "30%"
|
||||
}
|
||||
]
|
||||
});
|
||||
},
|
||||
// 初始化访问量柱状图
|
||||
initCardCountChart(time = [], data = []) {
|
||||
this.cardCountChart = echarts.init(this.$refs.cardCountChart);
|
||||
this.cardCountChart.setOption({
|
||||
tooltip: {
|
||||
trigger: "axis"
|
||||
},
|
||||
grid: {
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 0
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: "category",
|
||||
data: time,
|
||||
show: false, // 不显示坐标轴线、坐标轴刻度线和坐标轴上的文字
|
||||
axisTick: {
|
||||
show: false // 不显示坐标轴刻度线
|
||||
},
|
||||
axisLine: {
|
||||
show: false // 不显示坐标轴线
|
||||
},
|
||||
axisLabel: {
|
||||
show: false // 不显示坐标轴上的文字
|
||||
},
|
||||
splitLine: {
|
||||
show: false // 不显示网格线
|
||||
}
|
||||
}
|
||||
],
|
||||
color: "#409eff",
|
||||
yAxis: [
|
||||
{
|
||||
type: "value",
|
||||
show: false, // 不显示坐标轴线、坐标轴刻度线和坐标轴上的文字
|
||||
axisTick: {
|
||||
show: false // 不显示坐标轴刻度线
|
||||
},
|
||||
axisLine: {
|
||||
show: false // 不显示坐标轴线
|
||||
},
|
||||
axisLabel: {
|
||||
show: false // 不显示坐标轴上的文字
|
||||
},
|
||||
splitLine: {
|
||||
show: false // 不显示网格线
|
||||
}
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
data: data,
|
||||
type: "bar",
|
||||
barWidth: "30%"
|
||||
}
|
||||
]
|
||||
});
|
||||
},
|
||||
// 初始化用户数折线图
|
||||
initCardUserChart(time = [], data = []) {
|
||||
this.cardUserChart = echarts.init(this.$refs.cardUserChart);
|
||||
this.cardUserChart.setOption({
|
||||
tooltip: {
|
||||
trigger: "axis"
|
||||
},
|
||||
grid: {
|
||||
x: 0,
|
||||
y: 10,
|
||||
x2: 0,
|
||||
y2: 2
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: "category",
|
||||
data: time,
|
||||
show: false, // 不显示坐标轴线、坐标轴刻度线和坐标轴上的文字
|
||||
axisTick: {
|
||||
show: false // 不显示坐标轴刻度线
|
||||
},
|
||||
axisLine: {
|
||||
show: false // 不显示坐标轴线
|
||||
},
|
||||
axisLabel: {
|
||||
show: false // 不显示坐标轴上的文字
|
||||
},
|
||||
splitLine: {
|
||||
show: false // 不显示网格线
|
||||
}
|
||||
}
|
||||
],
|
||||
color: "#409eff",
|
||||
yAxis: [
|
||||
{
|
||||
type: "value",
|
||||
show: false, // 不显示坐标轴线、坐标轴刻度线和坐标轴上的文字
|
||||
axisTick: {
|
||||
show: false // 不显示坐标轴刻度线
|
||||
},
|
||||
axisLine: {
|
||||
show: false // 不显示坐标轴线
|
||||
},
|
||||
axisLabel: {
|
||||
show: false // 不显示坐标轴上的文字
|
||||
},
|
||||
splitLine: {
|
||||
show: false // 不显示网格线
|
||||
}
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
data: data,
|
||||
type: "line",
|
||||
symbol: "none"
|
||||
}
|
||||
]
|
||||
});
|
||||
},
|
||||
// 初始化销售额图标
|
||||
initSaleChart(time, data) {
|
||||
this.saleChart = null;
|
||||
this.saleChart = echarts.init(this.$refs.saleChart);
|
||||
this.saleChart.setOption({
|
||||
title: {
|
||||
text: "销售趋势",
|
||||
x: "center"
|
||||
},
|
||||
tooltip: {
|
||||
trigger: "axis"
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: "category",
|
||||
data: time,
|
||||
axisTick: {
|
||||
alignWithLabel: true
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: "#999"
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
rotate: time.length <= 7 ? 0 : 45,
|
||||
interval: 0,
|
||||
textStyle: {
|
||||
fontSize: "9"
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
color: "#409eff",
|
||||
yAxis: [
|
||||
{
|
||||
type: "value",
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: "#999"
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
type: "dashed",
|
||||
color: "#ececec"
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
data: data,
|
||||
type: "bar",
|
||||
barWidth: time.length <= 7 ? "50%" : "30%"
|
||||
}
|
||||
]
|
||||
});
|
||||
},
|
||||
// 初始化销售额图表
|
||||
initPayChart(data) {
|
||||
this.payChart = echarts.init(this.$refs.payChart);
|
||||
this.payChart.setOption({
|
||||
tooltip: {
|
||||
trigger: "item"
|
||||
},
|
||||
legend: {
|
||||
top: "5%",
|
||||
left: "center"
|
||||
},
|
||||
color: [
|
||||
"#409eff",
|
||||
"#91cc75",
|
||||
"#fac858",
|
||||
"#ee6666",
|
||||
"#73c0de",
|
||||
"#3ba272",
|
||||
"#fc8452",
|
||||
"#9a60b4",
|
||||
"#ea7ccc"
|
||||
],
|
||||
series: [
|
||||
{
|
||||
type: "pie",
|
||||
radius: ["40%", "70%"],
|
||||
avoidLabelOverlap: false,
|
||||
label: {
|
||||
show: false,
|
||||
position: "center"
|
||||
},
|
||||
emphasis: {
|
||||
label: {
|
||||
show: true,
|
||||
fontSize: 20
|
||||
}
|
||||
},
|
||||
labelLine: {
|
||||
show: false
|
||||
},
|
||||
data: data
|
||||
}
|
||||
]
|
||||
});
|
||||
},
|
||||
// 获取销售额柱状图数据
|
||||
async dateAmount() {
|
||||
try {
|
||||
this.saleLoading = true;
|
||||
const res = await dateAmount(this.saleActive);
|
||||
const data = res.total.map(item => item.amount);
|
||||
const time = res.total.map(item => item.tradeDay);
|
||||
this.initSaleChart(time, data);
|
||||
setTimeout(() => {
|
||||
this.saleLoading = false;
|
||||
}, 300);
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
},
|
||||
paginationChange(e) {
|
||||
this.saleTablePage = e;
|
||||
this.dateProduct();
|
||||
},
|
||||
// 获取销售额排行表格数据
|
||||
async dateProduct() {
|
||||
try {
|
||||
this.saleTableLoading = true;
|
||||
const res = await dateProduct(
|
||||
this.saleTableActive,
|
||||
this.saleTablePage,
|
||||
this.saleTableSize
|
||||
);
|
||||
this.saleTable = res.totalProduct;
|
||||
this.saleTableTotal = res.total;
|
||||
this.productCount = res.productCount;
|
||||
this.productSum = res.productSum;
|
||||
setTimeout(() => {
|
||||
this.saleTableLoading = false;
|
||||
}, 300);
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
},
|
||||
// 支付类型占比 饼图
|
||||
async datePayType() {
|
||||
try {
|
||||
this.payChartLoading = true;
|
||||
const res = await datePayType(this.payChartDay);
|
||||
const data = res.countPayType.map(item => {
|
||||
return {
|
||||
value: item.count,
|
||||
name: item.payType
|
||||
};
|
||||
});
|
||||
setTimeout(() => {
|
||||
this.payChartLoading = false;
|
||||
}, 300);
|
||||
this.initPayChart(data);
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
},
|
||||
// 汇总数据
|
||||
async summaryGet() {
|
||||
try {
|
||||
const res1 = await summaryGet();
|
||||
const res2 = await summaryTodayGet();
|
||||
this.topData = {
|
||||
...res1,
|
||||
...res2
|
||||
};
|
||||
let payTime = res1.countDateList.map(item => item.tradeDay);
|
||||
let payData = res1.countDateList.map(item => item.count);
|
||||
|
||||
let countTime = res1.visitsCountList.map(item => item.tradeDay);
|
||||
let countData = res1.visitsCountList.map(item => item.count);
|
||||
|
||||
this.initCardPayChart(payTime, payData);
|
||||
this.initCardCountChart(countTime, countData);
|
||||
console.log(this.topData);
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
},
|
||||
rankChange() {
|
||||
this.dateProduct();
|
||||
this.summaryDateGet();
|
||||
},
|
||||
// 初始化销售图标
|
||||
initProduceChart(p1, p2) {
|
||||
this.productCountChart = echarts.init(this.$refs.productCountChart);
|
||||
this.productSumChart = echarts.init(this.$refs.productSumChart);
|
||||
|
||||
this.productCountChart.setOption({
|
||||
tooltip: {
|
||||
trigger: "axis"
|
||||
},
|
||||
grid: {
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 0
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
boundaryGap: false,
|
||||
type: "category",
|
||||
data: p1[0],
|
||||
show: false, // 不显示坐标轴线、坐标轴刻度线和坐标轴上的文字
|
||||
axisTick: {
|
||||
show: false // 不显示坐标轴刻度线
|
||||
},
|
||||
axisLine: {
|
||||
show: false // 不显示坐标轴线
|
||||
},
|
||||
axisLabel: {
|
||||
show: false // 不显示坐标轴上的文字
|
||||
},
|
||||
splitLine: {
|
||||
show: false // 不显示网格线
|
||||
}
|
||||
}
|
||||
],
|
||||
color: "#409eff",
|
||||
yAxis: [
|
||||
{
|
||||
type: "value",
|
||||
show: false, // 不显示坐标轴线、坐标轴刻度线和坐标轴上的文字
|
||||
axisTick: {
|
||||
show: false // 不显示坐标轴刻度线
|
||||
},
|
||||
axisLine: {
|
||||
show: false // 不显示坐标轴线
|
||||
},
|
||||
axisLabel: {
|
||||
show: false // 不显示坐标轴上的文字
|
||||
},
|
||||
splitLine: {
|
||||
show: false // 不显示网格线
|
||||
}
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
data: p1[1],
|
||||
type: "line",
|
||||
symbol: "none",
|
||||
smooth: true,
|
||||
areaStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: "#409eff" // 渐变颜色
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "#409eff" // 渐变颜色
|
||||
}
|
||||
])
|
||||
}
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
this.productSumChart.setOption({
|
||||
tooltip: {
|
||||
trigger: "axis"
|
||||
},
|
||||
grid: {
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 0
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
boundaryGap: false,
|
||||
type: "category",
|
||||
data: p2[0],
|
||||
show: false, // 不显示坐标轴线、坐标轴刻度线和坐标轴上的文字
|
||||
axisTick: {
|
||||
show: false // 不显示坐标轴刻度线
|
||||
},
|
||||
axisLine: {
|
||||
show: false // 不显示坐标轴线
|
||||
},
|
||||
axisLabel: {
|
||||
show: false // 不显示坐标轴上的文字
|
||||
},
|
||||
splitLine: {
|
||||
show: false // 不显示网格线
|
||||
}
|
||||
}
|
||||
],
|
||||
color: "#409eff",
|
||||
yAxis: [
|
||||
{
|
||||
type: "value",
|
||||
show: false, // 不显示坐标轴线、坐标轴刻度线和坐标轴上的文字
|
||||
axisTick: {
|
||||
show: false // 不显示坐标轴刻度线
|
||||
},
|
||||
axisLine: {
|
||||
show: false // 不显示坐标轴线
|
||||
},
|
||||
axisLabel: {
|
||||
show: false // 不显示坐标轴上的文字
|
||||
},
|
||||
splitLine: {
|
||||
show: false // 不显示网格线
|
||||
}
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
data: p2[1],
|
||||
type: "line",
|
||||
symbol: "none",
|
||||
smooth: true,
|
||||
areaStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: "#409eff" // 渐变颜色
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "#409eff" // 渐变颜色
|
||||
}
|
||||
])
|
||||
}
|
||||
}
|
||||
]
|
||||
});
|
||||
},
|
||||
// 日期汇总数据
|
||||
async summaryDateGet() {
|
||||
try {
|
||||
const res = await summaryDateGet(this.saleTableActive);
|
||||
let p1 = [
|
||||
res.numList.map(item => item.tradeDay),
|
||||
res.numList.map(item => item.count)
|
||||
];
|
||||
let p2 = [
|
||||
res.amountList.map(item => item.tradeDay),
|
||||
res.amountList.map(item => item.count)
|
||||
];
|
||||
this.initProduceChart(p1, p2);
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.app-container {
|
||||
padding: 20px;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
.card_wrap {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 20px;
|
||||
|
||||
.card {
|
||||
flex: 1;
|
||||
background-color: #fff;
|
||||
border-radius: 2px;
|
||||
padding: 0 20px;
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
color: #999;
|
||||
padding-top: 20px;
|
||||
|
||||
.card_title {
|
||||
font-size: 14px;
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.number {
|
||||
padding: 20px 0 10px 0;
|
||||
font-size: 24px;
|
||||
height: 60px;
|
||||
}
|
||||
|
||||
.row {
|
||||
height: 50px;
|
||||
color: #555;
|
||||
font-size: 14px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
&:not(:last-child) {
|
||||
border-bottom: 1px solid #ececec;
|
||||
}
|
||||
|
||||
.icon {
|
||||
color: rgb(255, 85, 85);
|
||||
margin-left: 4px;
|
||||
}
|
||||
|
||||
.dot {
|
||||
$size: 6px;
|
||||
width: $size;
|
||||
height: $size;
|
||||
border-radius: 50%;
|
||||
background-color: #1890ff;
|
||||
margin-right: 6px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.chart_wrap {
|
||||
margin-top: 20px;
|
||||
|
||||
.sale_data {
|
||||
display: flex;
|
||||
|
||||
.card {
|
||||
flex: 1;
|
||||
background-color: #fff;
|
||||
border-radius: 2px;
|
||||
padding: 0 20px;
|
||||
|
||||
.sale_data_header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
color: #999;
|
||||
padding-top: 20px;
|
||||
|
||||
.card_title {
|
||||
font-size: 14px;
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.number {
|
||||
padding-top: 10px;
|
||||
font-size: 24px;
|
||||
height: 60px;
|
||||
}
|
||||
|
||||
.product_chart_wrap {
|
||||
height: 50px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.item {
|
||||
flex: 1;
|
||||
background-color: #fff;
|
||||
border-radius: 2px;
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
border-bottom: 1px solid #ececec;
|
||||
padding: 0 20px;
|
||||
|
||||
.tab_wrap {
|
||||
display: flex;
|
||||
$color: #1890ff;
|
||||
|
||||
.item {
|
||||
padding: 0 10px;
|
||||
height: 60px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 14px;
|
||||
color: $color;
|
||||
|
||||
&.active {
|
||||
position: relative;
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
width: 100%;
|
||||
border-bottom: 2px solid $color;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.chart {
|
||||
padding: 20px 0;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.table {
|
||||
padding: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user