code-image-backup-public/lilishop-ui
1
0
Fork 0
mirror of https://gitee.com/beijing_hongye_huicheng/lilishop-ui.git synced 2026-08-06 19:07:25 +08:00
Code Issues Packages Projects Releases Wiki Activity

manager 升级到vue3

Browse Source
This commit is contained in:
pikachu1995@126.com
2026-05-25 10:49:09 +08:00
parent e7350899bf
commit 615ee91511
239 changed files with 22907 additions and 30841 deletions
Download Patch File Download Diff File Expand all files Collapse all files

87
manager/src/views/statistics/goods.vue
View File

@@ -1,78 +1,69 @@
<template>
<div>
<Affix :offset-top="100">
<Card class="card fixed-bottom">
<affixTime :closeShop="true" @selected="clickBreadcrumb"/>
</Card>
</Affix>
<Card class="card">
<Tabs @on-click="handleClickType">
<TabPane label="热门商品订单数量" name="NUM">
<Table :columns="columns" :data="data"></Table>
</TabPane>
<TabPane label="热门商品订单金额" name="PRICE">
<Table :columns="columns" :data="data"></Table>
</TabPane>
</Tabs>
</Card>
<el-affix :offset="100">
<el-card class="card fixed-bottom">
<affixTime :closeShop="true" @selected="clickBreadcrumb" />
</el-card>
</el-affix>
<el-card class="card">
<el-tabs v-model="params.type" @tab-click="handleClickType">
<el-tab-pane label="热门商品订单数量" name="NUM">
<el-table :data="data" stripe style="width: 100%">
<el-table-column prop="goodsName" label="商品名称" min-width="160" />
<el-table-column prop="num" label="销售数量" min-width="120" />
<el-table-column label="销售金额" min-width="120">
<template #default="{ row }">
<priceColorScheme v-if="row" :value="row.price" :color="$mainColor" />
</template>
</el-table-column>
</el-table>
</el-tab-pane>
<el-tab-pane label="热门商品订单金额" name="PRICE">
<el-table :data="data" stripe style="width: 100%">
<el-table-column prop="goodsName" label="商品名称" min-width="160" />
<el-table-column prop="num" label="销售数量" min-width="120" />
<el-table-column label="销售金额" min-width="120">
<template #default="{ row }">
<priceColorScheme v-if="row" :value="row.price" :color="$mainColor" />
</template>
</el-table-column>
</el-table>
</el-tab-pane>
</el-tabs>
</el-card>
</div>
</template>
<script>
import memberLayout from "@/views/member/list";
import * as API_Goods from "@/api/goods";
import affixTime from "@/components/affix-time";
export default {
components: {
affixTime,
memberLayout
},
data() {
return {
params: { // 请求参数
params: {
searchType: "LAST_SEVEN",
year: "",
month: "",
shopId: "",
type: "NUM"
type: "NUM",
},
columns: [ // 表头
{
title: "商品名称",
key: "goodsName",
},
{
title: "销售数量",
key: "num",
},
{
title: "销售金额",
key: "price",
render: (h, params) => {
return h("priceColorScheme", {props:{value:params.row.price,color:this.$mainColor}} );
},
},
],
data: [], // 数据
data: [],
};
},
methods: {
// tab切换
handleClickType(name) {
this.params.type = name;
handleClickType(tab) {
this.params.type = tab.paneName;
this.getData();
},
// 条件删选
clickBreadcrumb(item, index) {
let callback = item;
let type = this.params.type;
this.params = {...callback};
clickBreadcrumb(item) {
const type = this.params.type;
this.params = { ...item };
this.params.type = type;
this.getData();
},
// 获取数据
getData() {
Promise.all([API_Goods.goodsStatistics(this.params)]).then((res) => {
if (res[0].result) {

137
manager/src/views/statistics/member.vue
View File

@@ -1,26 +1,34 @@
<template>
<div class="wrapper">
<Affix :offset-top="100">
<Card class="card fixed-bottom">
<el-affix :offset="100">
<el-card class="card fixed-bottom">
<affixTime :closeShop="true" @selected="clickBreadcrumb" />
</Card>
</Affix>
</el-card>
</el-affix>
<Card class="card">
<el-card class="card">
<div>
<h4>客户增长趋势 <Button style="margin-left:10px" @click="()=>{enableShowMemberCount = !enableShowMemberCount; initMemberChart()}" size="small">{{enableShowMemberCount ? '关闭' : '显示'}}用户总人数</Button></h4>
<h4>
客户增长趋势
<el-button style="margin-left: 10px" size="small" @click="toggleMemberCount">
{{ enableShowMemberCount ? "关闭" : "显示" }}用户总人数
</el-button>
</h4>
<div id="orderChart"></div>
</div>
</Card>
</el-card>
<Card class="card">
<el-card class="card">
<div>
<h4>客户增长报表</h4>
<Table class="mt_10" stripe :columns="columns" :data="data"></Table>
<el-table class="mt_10" stripe :data="data" style="width: 100%">
<el-table-column prop="createDate" label="日期" min-width="120" sortable />
<el-table-column prop="memberCount" label="当前会员" min-width="120" />
<el-table-column prop="newlyAdded" label="新增会员" min-width="120" />
<el-table-column prop="activeQuantity" label="活跃会员" min-width="120" />
</el-table>
</div>
</Card>
</el-card>
</div>
</template>
<script>
@@ -32,101 +40,56 @@ export default {
components: { affixTime },
data() {
return {
columns: [ // 表头
{
key: "createDate",
title: "日期",
sortable: true,
},
{
key: "memberCount",
title: "当前会员",
},
{
key: "newlyAdded",
title: "新增会员",
},
{
key: "activeQuantity",
title: "活跃会员",
},
],
// 时间
dateList: [
{
title: "今天",
selected: false,
value: "TODAY",
},
{
title: "昨天",
selected: false,
value: "YESTERDAY",
},
{
title: "过去7天",
selected: true,
value: "LAST_SEVEN",
},
{
title: "过去30天",
selected: false,
value: "LAST_THIRTY",
},
],
year: "", // 当前年限
orderChart: "", // 订单表格
params: { // 请求参数
orderChart: "",
params: {
searchType: "LAST_SEVEN",
year: "",
month: "",
shopId: "",
},
data: [], // 数据
enableShowMemberCount:false
data: [],
enableShowMemberCount: false,
year: "",
};
},
watch: {
params: {
handler(val) {
handler() {
this.init();
},
deep: true,
immediate:true,
immediate: true,
},
year(val) {
this.params.year = new Date(val).getFullYear();
},
},
methods: {
// 订单图
toggleMemberCount() {
this.enableShowMemberCount = !this.enableShowMemberCount;
this.initMemberChart();
},
initMemberChart() {
// 默认已经加载 legend-filter 交互
/**
* 将数据分成三组来进行展示
*/
let count = [];
let newly = [];
let actives = [];
const count = [];
const newly = [];
const actives = [];
this.data.forEach((item) => {
if (this.enableShowMemberCount && (item.memberCount!="" || item.memberCount!=null)) {
if (this.enableShowMemberCount && (item.memberCount != "" || item.memberCount != null)) {
count.push({
createDate: item.createDate,
memberCount:item.memberCount,
memberCount: item.memberCount,
title: "当前会员数量",
});
}
if (!this.enableShowMemberCount && (item.newlyAdded!="" || item.newlyAdded!=null)) {
if (!this.enableShowMemberCount && (item.newlyAdded != "" || item.newlyAdded != null)) {
newly.push({
createDate: item.createDate,
memberCount: item.newlyAdded,
title: "新增会员数量",
});
}
if (!this.enableShowMemberCount && (item.activeQuantity!="" || item.activeQuantity!=null)) {
if (!this.enableShowMemberCount && (item.activeQuantity != "" || item.activeQuantity != null)) {
actives.push({
createDate: item.createDate,
memberCount: item.activeQuantity,
@@ -135,9 +98,9 @@ export default {
}
});
let data = [...count, ...newly, ...actives];
const chartData = [...count, ...newly, ...actives];
this.orderChart.data(data);
this.orderChart.data(chartData);
this.orderChart.scale({
activeQuantity: {
range: [0, 1],
@@ -166,21 +129,15 @@ export default {
stroke: "#fff",
lineWidth: 1,
});
this.orderChart.area().position("createDate*memberCount").color("title").shape("smooth");
this.orderChart.area().position("createDate*memberCount").color("title").shape("smooth");
this.orderChart.render();
},
// 条件查询
clickBreadcrumb(item, index) {
let callback = item;
console.warn(callback);
this.params = {...callback};
clickBreadcrumb(item) {
this.params = { ...item };
},
// 初始化数据
init() {
this.orderChart ? this.orderChart.clear() : ''
this.orderChart ? this.orderChart.clear() : "";
API_Member.getMemberStatistics(this.params).then((res) => {
if (res.result) {
res.result.forEach((item) => {
@@ -202,8 +159,7 @@ export default {
},
},
mounted() {
let data = new Date();
this.year = data;
this.year = new Date();
},
};
</script>
@@ -214,4 +170,7 @@ export default {
.card {
margin-bottom: 10px;
}
.mt_10 {
margin-top: 10px;
}
</style>

372
manager/src/views/statistics/order.vue
View File

@@ -1,12 +1,12 @@
<template>
<div class="wrapper">
<Affix :offset-top="100">
<Card class="card fixed-bottom">
<el-affix :offset="100">
<el-card class="card fixed-bottom">
<affixTime @selected="clickBreadcrumb" />
</Card>
</Affix>
</el-card>
</el-affix>
<Card class="card">
<el-card class="card">
<div>
<h4>交易概况</h4>
<div class="flex">
@@ -59,7 +59,7 @@
<div class="card-item">
<div class="card-item-label">下单金额</div>
<div class="card-item-value">
{{ overViewList.orderAmount || 0 | unitPrice("￥") }}
{{ $filters.unitPrice(overViewList.orderAmount || 0, "￥") }}
</div>
</div>
<div class="card-item">
@@ -77,7 +77,7 @@
<div class="card-item">
<div class="card-item-label">付款金额</div>
<div class="card-item-value">
{{ overViewList.paymentAmount || 0 | unitPrice("￥") }}
{{ $filters.unitPrice(overViewList.paymentAmount || 0, "￥") }}
</div>
</div>
</div>
@@ -91,7 +91,7 @@
<div class="card-item">
<div class="card-item-label">退单金额</div>
<div class="card-item-value">
{{ overViewList.refundOrderPrice || 0 | unitPrice("￥") }}
{{ $filters.unitPrice(overViewList.refundOrderPrice || 0, "￥") }}
</div>
</div>
</div>
@@ -142,9 +142,9 @@
</div>
</div>
</div>
</Card>
</el-card>
<Card class="card">
<el-card class="card">
<div>
<h4>交易趋势</h4>
<div></div>
@@ -153,49 +153,108 @@
<div>
<div id="orderChart"></div>
</div>
</Card>
</el-card>
<Card class="card">
<div>
<h4>订退单统计</h4>
<div class="breadcrumb" style="margin-bottom: 20px">
<RadioGroup
v-model="orderOrRefund"
type="button"
size="small"
button-style="solid"
>
<Radio :label="1">订单</Radio>
<Radio :label="0">退单</Radio>
</RadioGroup>
</div>
<div>
<Table stripe :columns="columns" :data="data"></Table>
</div>
<!-- (index) => {
refundParams.pageNumber = index;
} -->
<!-- (size) => {
(refundParams.pageSize = size), (refundParams.pageNumber = 1);
} -->
<Page
v-if="showRecords"
size="small"
@on-change="
pageNumberChange
"
@on-page-size-change="
pageSizeChange
"
class="mt_10"
show-total
show-sizer
show-elevator
:total="total"
:page-size-opts="[20, 50, 100]"
/>
</div>
</Card>
<el-card class="card">
<el-tabs v-model="orderOrRefund">
<el-tab-pane label="订单" name="order">
<el-table stripe :data="data" style="width: 100%">
<el-table-column type="expand" width="50">
<template #default="{ row }">
<orderRow v-if="row" :res="row" />
</template>
</el-table-column>
<el-table-column prop="storeName" label="商家名称" min-width="120" />
<el-table-column prop="memberName" label="用户名" min-width="100" />
<el-table-column label="订单状态" min-width="100">
<template #default="{ row }">
<span v-if="row">{{ orderStatusList[row.orderStatus] }}</span>
</template>
</el-table-column>
<el-table-column prop="createTime" label="创建时间" min-width="160" />
<el-table-column label="支付时间" min-width="160">
<template #default="{ row }">
<span v-if="row">{{ row.paymentTime || "暂无" }}</span>
</template>
</el-table-column>
<el-table-column label="价格" min-width="110">
<template #default="{ row }">
<span v-if="row" :style="{ color: $mainColor }">
{{ $filters.unitPrice(row.flowPrice, "￥") }}</span>
</template>
</el-table-column>
<el-table-column label="操作" width="80" align="center">
<template #default="{ row }">
<a v-if="row" class="link-text" @click="goDetail(row)">查看</a>
</template>
</el-table-column>
</el-table>
</el-tab-pane>
<el-tab-pane label="退单" name="refund">
<el-table stripe :data="data" style="width: 100%">
<el-table-column type="expand" width="50">
<template #default="{ row }">
<refundRow v-if="row" :res="row" />
</template>
</el-table-column>
<el-table-column label="商品图片" width="90" align="center">
<template #default="{ row }">
<img
v-if="row && row.goodsImage"
:src="row.goodsImage"
style="width: 60px; vertical-align: middle"
alt=""
/>
</template>
</el-table-column>
<el-table-column prop="goodsName" label="商品名称" min-width="140" show-overflow-tooltip />
<el-table-column prop="storeName" label="商家名称" min-width="120" />
<el-table-column label="售后单类型" min-width="100">
<template #default="{ row }">
<span v-if="row">{{ serviceTypeList[row.serviceType] }}</span>
</template>
</el-table-column>
<el-table-column label="售后单状态" min-width="120">
<template #default="{ row }">
<span v-if="row">{{ serviceStatusList[row.serviceStatus] }}</span>
</template>
</el-table-column>
<el-table-column label="退款时间" min-width="160">
<template #default="{ row }">
<span v-if="row">{{ row.refundTime || "暂无" }}</span>
</template>
</el-table-column>
<el-table-column label="申请退款金额" min-width="120">
<template #default="{ row }">
<span v-if="row" :style="{ color: $mainColor }">
{{ $filters.unitPrice(row.applyRefundPrice, "￥") }}</span>
</template>
</el-table-column>
<el-table-column prop="reason" label="申请原因" min-width="120" show-overflow-tooltip />
<el-table-column label="实际金额" min-width="110">
<template #default="{ row }">
<span v-if="row">{{ $filters.unitPrice(row.flowPrice || 0, "￥") }}</span>
</template>
</el-table-column>
<el-table-column label="操作" width="90" align="center">
<template #default="{ row }">
<a v-if="row" class="link-text" @click="goDetail(row)">查看</a>
</template>
</el-table-column>
</el-table>
</el-tab-pane>
</el-tabs>
<el-pagination
v-if="showRecords"
v-model:current-page="refundParams.pageNumber"
v-model:page-size="refundParams.pageSize"
class="mt_10"
:total="total"
:page-sizes="[20, 50, 100]"
layout="total, sizes, prev, pager, next, jumper"
size="small"
/>
</el-card>
</div>
</template>
<script>
@@ -210,7 +269,7 @@ export default {
data() {
return {
orderOrRefund: 1, // 订单还是退单
orderOrRefund: "order", // order | refund
total: 0, // 总数
// 订单状态
orderStatusList: {
@@ -246,185 +305,7 @@ export default {
},
//
data: [], //定退单存储值
columns: [], // 定退单title
orderColumns: [
// 表头
{
type: "expand",
width: 50,
render: (h, params) => {
return h(orderRow, {
props: {
res: params.row,
},
});
},
},
{
title: "商家名称",
key: "storeName",
},
{
title: "用户名",
key: "memberName",
},
{
title: "订单状态",
key: "orderStatus",
render: (h, params) => {
return h("div", this.orderStatusList[params.row.orderStatus]);
},
},
{
title: "创建时间",
key: "createTime",
},
{
title: "支付时间",
key: "paymentTime",
render: (h, params) => {
return h("div", params.row.paymentTime || "暂无");
},
},
{
title: "价格",
key: "flowPrice",
render: (h, params) => {
return h("priceColorScheme", {props:{value:params.row.flowPrice,color:this.$mainColor}} );
},
},
{
title: "操作",
key: "action",
render: (h, params) => {
return h(
'a',
{
style: {
color: '#2d8cf0',
cursor: 'pointer',
textDecoration: 'none'
},
on: {
click: () => {
const { sn } = params.row
this.$router.push({
query: { sn },
path: this.orderOrRefund == 1 ? 'order-detail' : 'after-order-detail' + '?sn=' + sn
})
}
}
},
'查看'
)
},
},
],
refundColumns: [
// 表头
{
type: "expand",
width: 50,
render: (h, params) => {
return h(refundRow, {
props: {
res: params.row,
},
});
},
},
{
title: "商品图片",
key: "goodsImage",
render: (h, params) => {
return h("img", {
attrs: {
src: params.row.goodsImage,
},
style: {
width: "60px",
verticalAlign: "middle",
},
});
},
},
{
title: "商品名称",
key: "goodsName",
},
{
title: "商家名称",
key: "storeName",
},
{
title: "售后单类型",
key: "serviceType",
render: (h, params) => {
return h("div", this.serviceTypeList[params.row.serviceType]);
},
},
{
title: "售后单状态",
key: "serviceStatus",
render: (h, params) => {
return h("div", this.serviceStatusList[params.row.serviceStatus]);
},
},
{
title: "退款时间",
key: "refundTime",
render: (h, params) => {
return h("div", params.row.refundTime || "暂无");
},
},
{
title: "申请退款金额",
key: "applyRefundPrice",
render: (h, params) => {
return h("priceColorScheme", {props:{value:params.row.applyRefundPrice,color:this.$mainColor}} );
},
},
{
title: "申请原因",
key: "reason",
},
{
title: "实际金额",
key: "flowPrice",
render: (h, params) => {
return h(
"div",
this.$options.filters.unitPrice(params.row.flowPrice?params.row.flowPrice:0, "￥")
);
},
},
{
title: "操作",
key: "action",
render: (h, params) => {
return h('Button',{
props:{
size:'small'
},
on:{
click: () => {
const { sn } = params.row
this.$router.push({
query: {sn},
path: this.orderOrRefund == 1 ? 'order-detail' : 'after-order-detail' + '?sn='+sn
})
}
}
},'查看')
},
},
],
data: [],
// 交易概况
transactionList: [
@@ -515,7 +396,7 @@ export default {
},
orderOrRefund() {
this.showRecords = false;
this.$set(this.refundParams, "pageNumber", 1);
this.refundParams.pageNumber = 1;
this.getOrderList();
},
orderParams: {
@@ -532,13 +413,10 @@ export default {
},
},
methods: {
pageNumberChange(val){
this.refundParams.pageNumber = val
this.getOrderList();
},
pageSizeChange(val){
this.refundParams.pageSize = val
this.getOrderList();
goDetail(row) {
const sn = row.sn;
const path = this.orderOrRefund === "order" ? "order-detail" : "after-order-detail";
this.$router.push({ path, query: { sn } });
},
// 订单图
initOrderChart() {
@@ -618,7 +496,7 @@ export default {
// 统计相关订单统计
async getOrderList() {
let res;
if (this.orderOrRefund == 1) {
if (this.orderOrRefund === "order") {
// 订单
res = await API_Goods.statisticsOrderList(this.refundParams);
} else {
@@ -628,8 +506,6 @@ export default {
if (res.success) {
this.showRecords = true;
this.data = res.result.records;
this.columns =
this.orderOrRefund == 1 ? this.orderColumns : this.refundColumns;
this.total = res.result.total;
}
},
@@ -789,7 +665,7 @@ export default {
z-index: 2;
}
}
::v-deep .box {
:deep(.box){
color: #fff;
position: absolute;
@@ -866,4 +742,12 @@ h4 {
.card {
margin-bottom: 10px;
}
.link-text {
color: #409eff;
cursor: pointer;
text-decoration: none;
}
.mt_10 {
margin-top: 10px;
}
</style>

10
manager/src/views/statistics/order/orderDetail.vue
View File

@@ -5,7 +5,7 @@
<div class="shop-item">
<div class="label-item">
<span>订单来源</span>
<span>{{ res.clientType | clientTypeWay }}</span>
<span>{{ $filters.clientTypeWay(res.clientType) }}</span>
</div>
<div class="label-item">
<span>订单状态</span>
@@ -67,17 +67,15 @@
<div class="goods-title">
<div>{{ item.name }}</div>
<div>{{ "x" + item.num }}</div>
<div class="goods-price">{{ res.flowPrice | unitPrice("￥") }}</div>
<div class="goods-price">{{ $filters.unitPrice(res.flowPrice, "￥") }}</div>
</div>
</div>
</div>
<div class="count-price">
<div class="label-item">
<span>总价格</span>
<span class="flowPrice">
<priceColorScheme :value="row.flowPrice" :color="$mainColor"></priceColorScheme>
</span>
<span class="flowPrice" :style="{ color: $mainColor }">
{{ $filters.unitPrice(res.flowPrice, "￥") }}</span>
</div>
</div>
</div>

15
manager/src/views/statistics/order/refundOrder.vue
View File

@@ -14,13 +14,16 @@
<div class="label-item">
<span>退款时间</span>
<span>{{res.refundTime ? (new Date(res.refundTime).getTime()/1000 | unixToDate) : '暂无'}}</span>
<span>{{
res.refundTime
? $filters.unixToDate(new Date(res.refundTime).getTime() / 1000)
: "暂无"
}}</span>
</div>
<div class="label-item">
<span>申请退款金额</span>
<span>
<priceColorScheme :value="res.applyRefundPrice" :color="$mainColor"></priceColorScheme>
</span>
<span :style="{ color: $mainColor }">
{{ $filters.unitPrice(res.applyRefundPrice, "￥") }}</span>
</div>
<div class="label-item">
<span>商家备注</span>
@@ -56,7 +59,7 @@
<div class="goods-title">
<div>{{res.goodsName}}</div>
<div>{{'x'+res.num}}</div>
<div class="goods-price">{{res.flowPrice | unitPrice('￥')}}</div>
<div class="goods-price">{{ $filters.unitPrice(res.flowPrice, "￥") }}</div>
</div>
@@ -65,7 +68,7 @@
<div class="count-price">
<div class="label-item">
<span>实际退款金额</span>
<span class="flowPrice">{{res.flowPrice | unitPrice('￥')}}</span>
<span class="flowPrice">{{ $filters.unitPrice(res.flowPrice, "￥") }}</span>
</div>
</div>
</div>

119
manager/src/views/statistics/traffic.vue
View File

@@ -1,54 +1,43 @@
<template>
<div class="wrapper">
<Affix :offset-top="100">
<Card class="card fixed-bottom">
<el-affix :offset="100">
<el-card class="card fixed-bottom">
<affixTime @selected="clickBreadcrumb" />
</Card>
</Affix>
<Card class="card">
</el-card>
</el-affix>
<el-card class="card">
<div>
<h4>流量概况</h4>
</div>
<div class="box">
<div class="box-item">
<div>
访客数UV
</div>
<div>
{{uvs||0}}
</div>
<div>访客数UV</div>
<div>{{ uvs || 0 }}</div>
</div>
<div class="box-item">
<div>
浏览量PV
</div>
<div>
{{pvs||0}}
</div>
<div>浏览量PV</div>
<div>{{ pvs || 0 }}</div>
</div>
</div>
</el-card>
</Card>
<Card class="card">
<el-card class="card">
<div>
<h4>流量趋势</h4>
<div id="orderChart"></div>
</div>
</Card>
</el-card>
<Card class="card">
<el-card class="card">
<div>
<h4>会员流量报表</h4>
<Table class="table" stripe :columns="columns" :data="data"></Table>
<el-table class="table" stripe :data="data" style="width: 100%">
<el-table-column prop="date" label="日期" min-width="120" />
<el-table-column prop="pvNum" label="浏览量" min-width="120" />
<el-table-column prop="uvNum" label="访客数" min-width="120" />
</el-table>
</div>
</Card>
</el-card>
</div>
</template>
<script>
@@ -61,59 +50,20 @@ export default {
data() {
return {
uvs: 0, // 访客数
pvs: 0, // 浏览量
dateList: [
// 选择项
{
title: "今天",
selected: false,
value: "TODAY",
},
{
title: "昨天",
selected: false,
value: "YESTERDAY",
},
{
title: "过去7天",
selected: true,
value: "LAST_SEVEN",
},
{
title: "过去30天",
selected: false,
value: "LAST_THIRTY",
},
],
orderChart: "", // 初始化图表
uvs: 0,
pvs: 0,
orderChart: "",
params: {
// 请求参数
searchType: "LAST_SEVEN",
year: "",
month: "",
},
columns: [
{
key: "date",
title: "日期",
},
{
key: "pvNum",
title: "浏览量",
},
{
key: "uvNum",
title: "访客数",
},
],
data: [], // 图表数据
data: [],
};
},
watch: {
params: {
handler(val) {
handler() {
this.uvs = 0;
this.pvs = 0;
this.init();
@@ -122,10 +72,9 @@ export default {
},
},
methods: {
// 订单图
initChart() {
let uv = [];
let pv = [];
const uv = [];
const pv = [];
this.data.forEach((item) => {
uv.push({
@@ -142,9 +91,9 @@ export default {
});
});
let data = [...uv, ...pv];
const chartData = [...uv, ...pv];
this.orderChart.data(data);
this.orderChart.data(chartData);
this.orderChart.scale({
activeQuantity: {
range: [0, 1],
@@ -173,19 +122,15 @@ export default {
stroke: "#fff",
lineWidth: 1,
});
this.orderChart.area().position("date*pv").color("title").shape("smooth");
this.orderChart.area().position("date*pv").color("title").shape("smooth");
this.orderChart.render();
},
// 通过时间来筛选
clickBreadcrumb(item, index) {
let callback = JSON.parse(JSON.stringify(item));
this.params = callback;
clickBreadcrumb(item) {
this.params = JSON.parse(JSON.stringify(item));
},
// 初始化数据
init() {
this.orderChart ? this.orderChart.clear() : ''
this.orderChart ? this.orderChart.clear() : "";
API_Member.getStatisticsList(this.params).then((res) => {
if (res.result) {
this.data = res.result;