统计详情
This commit is contained in:
余同学
parent
e2451fb087
commit
5477a783a8
|
|
@ -173,72 +173,59 @@ export default {
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
// {
|
{
|
||||||
// "menuId": getUUID(),
|
menuId: getUUID(),
|
||||||
// "parentId": 0,
|
parentId: 0,
|
||||||
// "parentName": null,
|
parentName: null,
|
||||||
// "name": "教务管理",
|
name: "数据中心",
|
||||||
// "url": "local-affairs",
|
url: "",
|
||||||
// "perms": "",
|
perms: "",
|
||||||
// "type": 0,
|
type: 0,
|
||||||
// "elIcon": "el-icon-office-building",
|
elIcon: "el-icon-tickets",
|
||||||
// "orderNum": 0,
|
orderNum: 0,
|
||||||
// "open": null,
|
open: null,
|
||||||
// list: [
|
list: [
|
||||||
// {
|
{
|
||||||
// "menuId": getUUID(),
|
menuId: getUUID(),
|
||||||
// "parentId": 2,
|
parentId: 0,
|
||||||
// "parentName": null,
|
parentName: null,
|
||||||
// "name": "年级管理",
|
name: "客户分析",
|
||||||
// "url": "local-affairs/grade",
|
url: "datacenter/customer-analysis/index",
|
||||||
// "perms": "",
|
perms: "",
|
||||||
// "type": 1,
|
type: 1,
|
||||||
// "icon": "log",
|
elIcon: "el-icon-user",
|
||||||
// "orderNum": 0,
|
orderNum: 0,
|
||||||
// "open": null,
|
open: null,
|
||||||
// "list": []
|
list: [],
|
||||||
// },
|
},
|
||||||
// {
|
{
|
||||||
// "menuId": getUUID(),
|
menuId: getUUID(),
|
||||||
// "parentId": 2,
|
parentId: 0,
|
||||||
// "parentName": null,
|
parentName: null,
|
||||||
// "name": "班级管理",
|
name: "商品分析",
|
||||||
// "url": "local-affairs/class",
|
url: "datacenter/product-analysis/index",
|
||||||
// "perms": "",
|
perms: "",
|
||||||
// "type": 1,
|
type: 1,
|
||||||
// "icon": "log",
|
elIcon: "el-icon-data-analysis",
|
||||||
// "orderNum": 0,
|
orderNum: 0,
|
||||||
// "open": null,
|
open: null,
|
||||||
// "list": []
|
list: [],
|
||||||
// },
|
},
|
||||||
// {
|
{
|
||||||
// "menuId": getUUID(),
|
menuId: getUUID(),
|
||||||
// "parentId": 2,
|
parentId: 0,
|
||||||
// "parentName": null,
|
parentName: null,
|
||||||
// "name": "教师管理",
|
name: "订单统计分析",
|
||||||
// "url": "local-teacher/teacher",
|
url: "datacenter/order-analysis/index",
|
||||||
// "perms": "",
|
perms: "",
|
||||||
// "type": 1,
|
type: 1,
|
||||||
// "icon": "log",
|
elIcon: "el-icon-shopping-cart-full",
|
||||||
// "orderNum": 0,
|
orderNum: 0,
|
||||||
// "open": null,
|
open: null,
|
||||||
// "list": []
|
list: [],
|
||||||
// },
|
},
|
||||||
// {
|
],
|
||||||
// "menuId": getUUID(),
|
},
|
||||||
// "parentId": 0,
|
|
||||||
// "parentName": null,
|
|
||||||
// "name": "学校管理",
|
|
||||||
// "url": "local-school/school",
|
|
||||||
// "perms": "",
|
|
||||||
// "type": 1,
|
|
||||||
// "elIcon": "el-icon-school",
|
|
||||||
// "orderNum": 0,
|
|
||||||
// "open": null,
|
|
||||||
// list: []
|
|
||||||
// },
|
|
||||||
// ]
|
|
||||||
// },
|
|
||||||
],
|
],
|
||||||
code: 0,
|
code: 0,
|
||||||
permissions: [],
|
permissions: [],
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,237 @@
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<div>
|
||||||
|
<el-select
|
||||||
|
style="margin-right: 20px"
|
||||||
|
v-model="value1"
|
||||||
|
placeholder="请选择统计类型"
|
||||||
|
>
|
||||||
|
<el-option
|
||||||
|
v-for="item in [
|
||||||
|
{ value: '1', label: '1' },
|
||||||
|
{ value: '2', label: '2' },
|
||||||
|
]"
|
||||||
|
:key="item.value"
|
||||||
|
:label="item.label"
|
||||||
|
:value="item.value"
|
||||||
|
>
|
||||||
|
</el-option>
|
||||||
|
</el-select>
|
||||||
|
<el-select
|
||||||
|
style="margin-right: 20px"
|
||||||
|
v-model="value"
|
||||||
|
placeholder="请选择"
|
||||||
|
>
|
||||||
|
<el-option
|
||||||
|
v-for="item in [
|
||||||
|
{ value: '1', label: '日' },
|
||||||
|
{ value: '2', label: '周' },
|
||||||
|
{ value: '3', label: '月' },
|
||||||
|
{ value: '4', label: '年' },
|
||||||
|
]"
|
||||||
|
:key="item.value"
|
||||||
|
:label="item.label"
|
||||||
|
:value="item.value"
|
||||||
|
>
|
||||||
|
</el-option>
|
||||||
|
</el-select>
|
||||||
|
<el-button type="primary">查询</el-button>
|
||||||
|
<el-button type="success">导出</el-button>
|
||||||
|
</div>
|
||||||
|
<div class="stat-list">
|
||||||
|
<div class="stat-item">
|
||||||
|
<i style="font-size: 22px" class="el-icon-camera-solid"></i>
|
||||||
|
<div class="stat-right">
|
||||||
|
<div class="stat-title">展现量 （次）</div>
|
||||||
|
<div class="stat-value">
|
||||||
|
<span style="font-size: 20px">562</span>
|
||||||
|
<span style="font-size: 16px; margin: 0 5px; color: green">↓</span>
|
||||||
|
<span
|
||||||
|
style="font-size: 16px; margin: 0 5px; color: red"
|
||||||
|
v-if="false"
|
||||||
|
>↑</span
|
||||||
|
>
|
||||||
|
<span style="font-size: 16px">56%</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="stat-item">
|
||||||
|
<i style="font-size: 22px" class="el-icon-user-solid"></i>
|
||||||
|
<div class="stat-right">
|
||||||
|
<div class="stat-title">浏览人数 （人）</div>
|
||||||
|
<div class="stat-value">
|
||||||
|
<span style="font-size: 20px">62</span>
|
||||||
|
<span
|
||||||
|
style="font-size: 16px; margin: 0 5px; color: green"
|
||||||
|
v-if="false"
|
||||||
|
>↓</span
|
||||||
|
>
|
||||||
|
<span style="font-size: 16px; margin: 0 5px; color: red">↑</span>
|
||||||
|
<span style="font-size: 16px">56%</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="stat-item">
|
||||||
|
<i style="font-size: 22px" class="el-icon-user-solid"></i>
|
||||||
|
<div class="stat-right">
|
||||||
|
<div class="stat-title">新客数量 （人）</div>
|
||||||
|
<div class="stat-value">
|
||||||
|
<span style="font-size: 20px">62</span>
|
||||||
|
<span
|
||||||
|
style="font-size: 16px; margin: 0 5px; color: green"
|
||||||
|
v-if="false"
|
||||||
|
>↓</span
|
||||||
|
>
|
||||||
|
<span style="font-size: 16px; margin: 0 5px; color: red">↑</span>
|
||||||
|
<span style="font-size: 16px">56%</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="stat-item">
|
||||||
|
<i style="font-size: 22px" class="el-icon-user-solid"></i>
|
||||||
|
<div class="stat-right">
|
||||||
|
<div class="stat-title">支付订单人数 （人）</div>
|
||||||
|
<div style="font-size: 20px" class="stat-value">199</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="stat-item">
|
||||||
|
<i style="font-size: 22px" class="el-icon-s-order"></i>
|
||||||
|
<div class="stat-right">
|
||||||
|
<div class="stat-title">支付订单转化率 （%）</div>
|
||||||
|
<div style="font-size: 20px" class="stat-value">1256</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="stat-item">
|
||||||
|
<i style="font-size: 22px" class="el-icon-s-order"></i>
|
||||||
|
<div class="stat-right">
|
||||||
|
<div class="stat-title">客户复购率 （%）</div>
|
||||||
|
<div style="font-size: 20px" class="stat-value">1256</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<el-row class="echarts-line">
|
||||||
|
<div
|
||||||
|
id="echarts-LineChart"
|
||||||
|
style="
|
||||||
|
width: 100%;
|
||||||
|
height: calc(100vh - 500px);
|
||||||
|
margin-top: 20px;
|
||||||
|
border: 1px solid #ccc;
|
||||||
|
"
|
||||||
|
/>
|
||||||
|
</el-row>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import * as echarts from "echarts";
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
value1: "",
|
||||||
|
value: "",
|
||||||
|
};
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.init();
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
init() {
|
||||||
|
this.$nextTick(() => {
|
||||||
|
// 折线图
|
||||||
|
const myChat = echarts.init(
|
||||||
|
document.getElementById("echarts-LineChart")
|
||||||
|
);
|
||||||
|
myChat.setOption(this.LineChart());
|
||||||
|
window.addEventListener("resize", () => {
|
||||||
|
myChat.resize();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
},
|
||||||
|
LineChart() {
|
||||||
|
return {
|
||||||
|
title: {
|
||||||
|
text: "交易趋势分析",
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
trigger: "axis",
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
data: ["订单金额", "订单数", "订单商品数"],
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
left: "3%",
|
||||||
|
right: "4%",
|
||||||
|
bottom: "3%",
|
||||||
|
containLabel: true,
|
||||||
|
},
|
||||||
|
toolbox: {
|
||||||
|
feature: {
|
||||||
|
saveAsImage: {},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
type: "category",
|
||||||
|
boundaryGap: false,
|
||||||
|
data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
type: "value",
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: "订单金额",
|
||||||
|
type: "line",
|
||||||
|
stack: "Total",
|
||||||
|
data: [120, 132, 101, 134, 90, 230, 210],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "订单数",
|
||||||
|
type: "line",
|
||||||
|
stack: "Total",
|
||||||
|
data: [220, 182, 191, 234, 290, 330, 310],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "订单商品数",
|
||||||
|
type: "line",
|
||||||
|
stack: "Total",
|
||||||
|
data: [150, 232, 201, 154, 190, 330, 410],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.stat-list {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
/* justify-content: space-between; */
|
||||||
|
flex-wrap: wrap;
|
||||||
|
margin-top: 20px;
|
||||||
|
padding: 10px;
|
||||||
|
border: 1px solid #ccc;
|
||||||
|
}
|
||||||
|
.stat-item {
|
||||||
|
width: 25%;
|
||||||
|
margin: 30px 30px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.stat-icon {
|
||||||
|
background: rgb(99 152 252);
|
||||||
|
width: 60px;
|
||||||
|
height: 60px;
|
||||||
|
border-radius: 3px;
|
||||||
|
}
|
||||||
|
.stat-right {
|
||||||
|
margin-left: 12px;
|
||||||
|
font-size: 18px;
|
||||||
|
}
|
||||||
|
.stat-title {
|
||||||
|
color: #969696;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,285 @@
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<div>
|
||||||
|
<el-select
|
||||||
|
style="margin-right: 20px"
|
||||||
|
v-model="value1"
|
||||||
|
placeholder="请选择统计类型"
|
||||||
|
>
|
||||||
|
<el-option
|
||||||
|
v-for="item in [
|
||||||
|
{ value: '1', label: '1' },
|
||||||
|
{ value: '2', label: '2' },
|
||||||
|
]"
|
||||||
|
:key="item.value"
|
||||||
|
:label="item.label"
|
||||||
|
:value="item.value"
|
||||||
|
>
|
||||||
|
</el-option>
|
||||||
|
</el-select>
|
||||||
|
<el-button type="primary">查询</el-button>
|
||||||
|
</div>
|
||||||
|
<div class="product">
|
||||||
|
<div style="font-size: 18px">订单分析</div>
|
||||||
|
<div class="stat-list">
|
||||||
|
<div class="stat-item">
|
||||||
|
<div class="stat-right">
|
||||||
|
<div class="stat-title">下单订单数量</div>
|
||||||
|
<div style="font-size: 20px" class="stat-value">435</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="stat-item">
|
||||||
|
<div class="stat-right">
|
||||||
|
<div class="stat-title">支付订单数量</div>
|
||||||
|
<div style="font-size: 20px" class="stat-value">45</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="stat-item">
|
||||||
|
<div class="stat-right">
|
||||||
|
<div class="stat-title">有效订单数量</div>
|
||||||
|
<div style="font-size: 20px" class="stat-value">34</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="stat-item">
|
||||||
|
<div class="stat-right">
|
||||||
|
<div class="stat-title">有效订单率</div>
|
||||||
|
<div style="font-size: 20px" class="stat-value">199</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="stat-item">
|
||||||
|
<div class="stat-right">
|
||||||
|
<div class="stat-title">订单实付金额（元）</div>
|
||||||
|
<div style="font-size: 20px" class="stat-value">1256</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="stat-item">
|
||||||
|
<div class="stat-right">
|
||||||
|
<div class="stat-title">订单退款金额（元）</div>
|
||||||
|
<div style="font-size: 20px" class="stat-value">1256</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="stat-item">
|
||||||
|
<div class="stat-right">
|
||||||
|
<div class="stat-title">售后订单数量</div>
|
||||||
|
<div style="font-size: 20px" class="stat-value">34</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="stat-item">
|
||||||
|
<div class="stat-right">
|
||||||
|
<div class="stat-title">售后订单率（%）</div>
|
||||||
|
<div style="font-size: 20px" class="stat-value">199</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div style="padding: 20px; border: 1px solid #ccc; margin-top: 20px">
|
||||||
|
<div style="font-size: 18px; margin-bottom: 40px">订单结算明细</div>
|
||||||
|
<el-form :inline="true" :model="formInline" class="demo-form-inline">
|
||||||
|
<el-form-item label="下单时间">
|
||||||
|
<el-date-picker
|
||||||
|
v-model="value"
|
||||||
|
type="datetimerange"
|
||||||
|
start-placeholder="开始日期"
|
||||||
|
end-placeholder="结束日期"
|
||||||
|
>
|
||||||
|
</el-date-picker>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="结算时间">
|
||||||
|
<el-date-picker
|
||||||
|
v-model="value"
|
||||||
|
type="datetimerange"
|
||||||
|
start-placeholder="开始日期"
|
||||||
|
end-placeholder="结束日期"
|
||||||
|
>
|
||||||
|
</el-date-picker>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="状态：">
|
||||||
|
<el-select v-model="formInline.marketId" placeholder="请选择状态">
|
||||||
|
<el-option
|
||||||
|
v-for="item in [
|
||||||
|
{ label: '全部', value: '' },
|
||||||
|
{ label: '进行中', value: '1' },
|
||||||
|
{ label: '已结算', value: '2' },
|
||||||
|
]"
|
||||||
|
:key="item.value"
|
||||||
|
:label="item.label"
|
||||||
|
:value="item.value"
|
||||||
|
></el-option>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item>
|
||||||
|
<el-button type="primary">查询</el-button>
|
||||||
|
<el-button type="primary">导出</el-button>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
<div
|
||||||
|
style="
|
||||||
|
background: #edf4ff;
|
||||||
|
height: 80px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
font-size: 16px;
|
||||||
|
"
|
||||||
|
class="stat-list"
|
||||||
|
>
|
||||||
|
<div>
|
||||||
|
<span>退款金额</span><span style="margin-left: 10px">￥</span
|
||||||
|
><span style="font-weight: 600; font-size: 22px">999</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<span>订单支出</span><span style="margin-left: 10px">￥</span
|
||||||
|
><span style="font-weight: 600; font-size: 22px">999</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<span>待入账金额</span><span style="margin-left: 10px">￥</span
|
||||||
|
><span style="font-weight: 600; font-size: 22px">888</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<span>已入账金额</span><span style="margin-left: 10px">￥</span
|
||||||
|
><span style="font-weight: 600; font-size: 22px">888</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<el-table :data="tableData" border style="width: 100%">
|
||||||
|
<el-table-column align="center" type="index" label="排名" width="50">
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column prop="date" label="订单编号"> </el-table-column>
|
||||||
|
<el-table-column
|
||||||
|
align="center"
|
||||||
|
prop="name"
|
||||||
|
label="下单时间"
|
||||||
|
width="140"
|
||||||
|
>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column
|
||||||
|
align="center"
|
||||||
|
prop="name"
|
||||||
|
label="结算时间"
|
||||||
|
>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column
|
||||||
|
align="center"
|
||||||
|
prop="name"
|
||||||
|
label="实付金额（元）"
|
||||||
|
>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column
|
||||||
|
align="center"
|
||||||
|
prop="name"
|
||||||
|
label="退款金额（元）"
|
||||||
|
width="140"
|
||||||
|
>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column
|
||||||
|
align="center"
|
||||||
|
prop="name"
|
||||||
|
label="订单支出（元）"
|
||||||
|
width="140"
|
||||||
|
>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column
|
||||||
|
align="center"
|
||||||
|
prop="name"
|
||||||
|
label="入账金额（元）"
|
||||||
|
width="140"
|
||||||
|
>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column align="center" prop="name" label="状态" width="140">
|
||||||
|
</el-table-column>
|
||||||
|
</el-table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
value1: "",
|
||||||
|
value: "",
|
||||||
|
formInline: {
|
||||||
|
marketId: "",
|
||||||
|
shopId: "",
|
||||||
|
name: "",
|
||||||
|
},
|
||||||
|
tableData: [
|
||||||
|
{
|
||||||
|
date: "2016-05-02",
|
||||||
|
name: "王小虎",
|
||||||
|
address: "上海市普陀区金沙江路 1518 弄",
|
||||||
|
url: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
date: "2016-05-04",
|
||||||
|
name: "王小虎",
|
||||||
|
address: "上海市普陀区金沙江路 1517 弄",
|
||||||
|
url: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
date: "2016-05-01",
|
||||||
|
name: "王小虎",
|
||||||
|
address: "上海市普陀区金沙江路 1519 弄",
|
||||||
|
url: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
date: "2016-05-03",
|
||||||
|
name: "王小虎",
|
||||||
|
address: "上海市普陀区金沙江路 1516 弄",
|
||||||
|
url: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
date: "2016-05-03",
|
||||||
|
name: "王小虎",
|
||||||
|
address: "上海市普陀区金沙江路 1516 弄",
|
||||||
|
url: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
init() {},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.product {
|
||||||
|
margin-top: 20px;
|
||||||
|
padding: 10px;
|
||||||
|
// border: 1px solid #ccc;
|
||||||
|
background: #edf4ff;
|
||||||
|
}
|
||||||
|
.stat-list {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
// margin-top: 20px;
|
||||||
|
padding: 10px;
|
||||||
|
// border: 1px solid #ccc;
|
||||||
|
}
|
||||||
|
.stat-item {
|
||||||
|
width: 21%;
|
||||||
|
margin: 30px 0;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.stat-icon {
|
||||||
|
background: rgb(99 152 252);
|
||||||
|
width: 60px;
|
||||||
|
height: 60px;
|
||||||
|
border-radius: 3px;
|
||||||
|
}
|
||||||
|
.stat-right {
|
||||||
|
margin-left: 12px;
|
||||||
|
font-size: 18px;
|
||||||
|
}
|
||||||
|
.stat-title {
|
||||||
|
// color: #969696;
|
||||||
|
font-weight: 600;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
.grid-content {
|
||||||
|
margin-bottom: 20px;
|
||||||
|
font-size: 20px;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,242 @@
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<div>
|
||||||
|
<el-select
|
||||||
|
style="margin-right: 20px"
|
||||||
|
v-model="value1"
|
||||||
|
placeholder="请选择统计类型"
|
||||||
|
>
|
||||||
|
<el-option
|
||||||
|
v-for="item in [
|
||||||
|
{ value: '1', label: '1' },
|
||||||
|
{ value: '2', label: '2' },
|
||||||
|
]"
|
||||||
|
:key="item.value"
|
||||||
|
:label="item.label"
|
||||||
|
:value="item.value"
|
||||||
|
>
|
||||||
|
</el-option>
|
||||||
|
</el-select>
|
||||||
|
<el-select
|
||||||
|
style="margin-right: 20px"
|
||||||
|
v-model="value"
|
||||||
|
placeholder="请选择"
|
||||||
|
>
|
||||||
|
<el-option
|
||||||
|
v-for="item in [
|
||||||
|
{ value: '1', label: '日' },
|
||||||
|
{ value: '2', label: '周' },
|
||||||
|
{ value: '3', label: '月' },
|
||||||
|
{ value: '4', label: '年' },
|
||||||
|
]"
|
||||||
|
:key="item.value"
|
||||||
|
:label="item.label"
|
||||||
|
:value="item.value"
|
||||||
|
>
|
||||||
|
</el-option>
|
||||||
|
</el-select>
|
||||||
|
<el-button type="primary">查询</el-button>
|
||||||
|
<el-button type="success">导出</el-button>
|
||||||
|
</div>
|
||||||
|
<div class="product">
|
||||||
|
<div style="font-size: 18px">商品整体概况</div>
|
||||||
|
<div class="stat-list">
|
||||||
|
<div class="stat-item">
|
||||||
|
<div class="stat-right">
|
||||||
|
<div class="stat-title">在售商品数</div>
|
||||||
|
<div style="font-size: 20px" class="stat-value">435</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="stat-item">
|
||||||
|
<div class="stat-right">
|
||||||
|
<div class="stat-title">被访问商品数</div>
|
||||||
|
<div style="font-size: 20px" class="stat-value">45</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="stat-item">
|
||||||
|
<div class="stat-right">
|
||||||
|
<div class="stat-title">折扣商品数</div>
|
||||||
|
<div style="font-size: 20px" class="stat-value">34</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="stat-item">
|
||||||
|
<div class="stat-right">
|
||||||
|
<div class="stat-title">预售商品数</div>
|
||||||
|
<div style="font-size: 20px" class="stat-value">199</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="stat-item">
|
||||||
|
<div class="stat-right">
|
||||||
|
<div class="stat-title">商品浏览量</div>
|
||||||
|
<div style="font-size: 20px" class="stat-value">1256</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="stat-item">
|
||||||
|
<div class="stat-right">
|
||||||
|
<div class="stat-title">商品浏览人数</div>
|
||||||
|
<div style="font-size: 20px" class="stat-value">1256</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="stat-item">
|
||||||
|
<div class="stat-right">
|
||||||
|
<div class="stat-title">商品加购件数</div>
|
||||||
|
<div style="font-size: 20px" class="stat-value">34</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="stat-item">
|
||||||
|
<div class="stat-right">
|
||||||
|
<div class="stat-title">商品点赞件数</div>
|
||||||
|
<div style="font-size: 20px" class="stat-value">199</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="stat-item">
|
||||||
|
<div class="stat-right">
|
||||||
|
<div class="stat-title">商品支付件数</div>
|
||||||
|
<div style="font-size: 20px" class="stat-value">1256</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div style="padding: 10px; border: 1px solid #ccc; margin-top: 20px">
|
||||||
|
<div style="font-size: 18px; margin-bottom: 40px">商品排行榜</div>
|
||||||
|
<el-row style="" type="flex" justify="space-between">
|
||||||
|
<el-col :span="11"
|
||||||
|
><div class="grid-content bg-purple">商品访客数TOP</div>
|
||||||
|
<el-table :data="tableData" border style="width: 100%;" >
|
||||||
|
<el-table-column align="center" type="index" label="排名" width="50">
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column prop="date" label="商品名称">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<div style="display: flex; align-items: center">
|
||||||
|
<div>
|
||||||
|
<el-image
|
||||||
|
style="width: 60px; height: 60px"
|
||||||
|
:src="scope.row.url"
|
||||||
|
:preview-src-list="[scope.row.url]"
|
||||||
|
>
|
||||||
|
</el-image>
|
||||||
|
</div>
|
||||||
|
<div style="margin-left:10px;color:blue">{{ scope.row.name }}</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column align="center" prop="name" label="访客数" width="140">
|
||||||
|
</el-table-column> </el-table
|
||||||
|
></el-col>
|
||||||
|
<el-col :span="11"
|
||||||
|
><div class="grid-content bg-purple">商品支付转化率TOP</div>
|
||||||
|
<el-table :data="tableData" border style="width: 100%">
|
||||||
|
<el-table-column align="center" type="index" label="排名" width="50">
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column prop="date" label="商品名称">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<div style="display: flex; align-items: center">
|
||||||
|
<div>
|
||||||
|
<el-image
|
||||||
|
style="width: 60px; height: 60px"
|
||||||
|
:src="scope.row.url"
|
||||||
|
:preview-src-list="[scope.row.url]"
|
||||||
|
>
|
||||||
|
</el-image>
|
||||||
|
</div>
|
||||||
|
<div style="margin-left:10px;color:blue">{{ scope.row.name }}</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column align="center" prop="name" label="支付转化率（%）" width="140">
|
||||||
|
</el-table-column> </el-table
|
||||||
|
>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
value1: "",
|
||||||
|
value: "",
|
||||||
|
tableData: [
|
||||||
|
{
|
||||||
|
date: "2016-05-02",
|
||||||
|
name: "王小虎",
|
||||||
|
address: "上海市普陀区金沙江路 1518 弄",
|
||||||
|
url: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
date: "2016-05-04",
|
||||||
|
name: "王小虎",
|
||||||
|
address: "上海市普陀区金沙江路 1517 弄",
|
||||||
|
url: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
date: "2016-05-01",
|
||||||
|
name: "王小虎",
|
||||||
|
address: "上海市普陀区金沙江路 1519 弄",
|
||||||
|
url: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
date: "2016-05-03",
|
||||||
|
name: "王小虎",
|
||||||
|
address: "上海市普陀区金沙江路 1516 弄",
|
||||||
|
url: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
date: "2016-05-03",
|
||||||
|
name: "王小虎",
|
||||||
|
address: "上海市普陀区金沙江路 1516 弄",
|
||||||
|
url: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
init() {},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.product {
|
||||||
|
margin-top: 20px;
|
||||||
|
padding: 10px;
|
||||||
|
border: 1px solid #ccc;
|
||||||
|
}
|
||||||
|
.stat-list {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
/* justify-content: space-between; */
|
||||||
|
flex-wrap: wrap;
|
||||||
|
// margin-top: 20px;
|
||||||
|
padding: 10px;
|
||||||
|
// border: 1px solid #ccc;
|
||||||
|
}
|
||||||
|
.stat-item {
|
||||||
|
width: 25%;
|
||||||
|
margin: 30px 30px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.stat-icon {
|
||||||
|
background: rgb(99 152 252);
|
||||||
|
width: 60px;
|
||||||
|
height: 60px;
|
||||||
|
border-radius: 3px;
|
||||||
|
}
|
||||||
|
.stat-right {
|
||||||
|
margin-left: 12px;
|
||||||
|
font-size: 18px;
|
||||||
|
}
|
||||||
|
.stat-title {
|
||||||
|
// color: #969696;
|
||||||
|
font-weight: 600;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
.grid-content {
|
||||||
|
margin-bottom: 20px;
|
||||||
|
font-size: 20px;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -334,11 +334,47 @@ export default {
|
||||||
{
|
{
|
||||||
title: "预售价",
|
title: "预售价",
|
||||||
align: "center",
|
align: "center",
|
||||||
field: "discountActivity",
|
field: "presalePrice",
|
||||||
type: "jsx",
|
type: "jsx",
|
||||||
render: ({ row }) => {
|
render: ({ row }) => {
|
||||||
if (row.discountActivity) {
|
if (
|
||||||
return <span>{row.discountActivity.ruleObject.discount}折</span>;
|
Math.min.apply(
|
||||||
|
Math,
|
||||||
|
row.productSpecificationList.map((item) => item.presalePrice)
|
||||||
|
) ==
|
||||||
|
Math.max.apply(
|
||||||
|
Math,
|
||||||
|
row.productSpecificationList.map((item) => item.presalePrice)
|
||||||
|
)
|
||||||
|
) {
|
||||||
|
return (
|
||||||
|
<span>
|
||||||
|
{Math.min.apply(
|
||||||
|
Math,
|
||||||
|
row.productSpecificationList.map(
|
||||||
|
(item) => item.presalePrice
|
||||||
|
)
|
||||||
|
)}
|
||||||
|
</span>
|
||||||
|
);
|
||||||
|
} else {
|
||||||
|
return (
|
||||||
|
<span>
|
||||||
|
{Math.min.apply(
|
||||||
|
Math,
|
||||||
|
row.productSpecificationList.map(
|
||||||
|
(item) => item.presalePrice
|
||||||
|
)
|
||||||
|
)}
|
||||||
|
至
|
||||||
|
{Math.max.apply(
|
||||||
|
Math,
|
||||||
|
row.productSpecificationList.map(
|
||||||
|
(item) => item.presalePrice
|
||||||
|
)
|
||||||
|
)}
|
||||||
|
</span>
|
||||||
|
);
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|
|
||||||
|
|
@ -20,8 +20,8 @@
|
||||||
<el-form-item label="订金支付时间：" prop="startTime">
|
<el-form-item label="订金支付时间：" prop="startTime">
|
||||||
<el-date-picker
|
<el-date-picker
|
||||||
@change="getOrderTime"
|
@change="getOrderTime"
|
||||||
format="yyyy-MM-dd HH:mm:ss"
|
format="yyyy-MM-dd HH:mm"
|
||||||
data-format="yyyy-MM-dd HH:mm:ss"
|
data-format="yyyy-MM-dd HH:mm"
|
||||||
value-format="yyyy-MM-dd HH:mm:ss"
|
value-format="yyyy-MM-dd HH:mm:ss"
|
||||||
v-model="orderTime"
|
v-model="orderTime"
|
||||||
type="datetimerange"
|
type="datetimerange"
|
||||||
|
|
@ -319,7 +319,7 @@ export default {
|
||||||
console.log(row.startTime, row.endTime);
|
console.log(row.startTime, row.endTime);
|
||||||
this.orderTime = [row.startTime, row.endTime];
|
this.orderTime = [row.startTime, row.endTime];
|
||||||
this.arrears = [row.balancePaymentStartTime, row.balancePaymentEndTime];
|
this.arrears = [row.balancePaymentStartTime, row.balancePaymentEndTime];
|
||||||
this.delivery = [];
|
this.delivery = [row.estimatedStartDeliveryTime, row.estimatedEndDeliveryTime];
|
||||||
this.ruleForm.productList = [
|
this.ruleForm.productList = [
|
||||||
{
|
{
|
||||||
productId: row.id,
|
productId: row.id,
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue