DMJS-IT
/
merchant-web
12
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

统计详情

This commit is contained in:
余同学 2024-12-03 18:47:55 +08:00
parent e2451fb087
commit 5477a783a8
6 changed files with 860 additions and 73 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

119
src/router/full-routers.js
View File

@ -173,72 +173,59 @@ export default {
},
],
},
// {
// "menuId": getUUID(),
// "parentId": 0,
// "parentName": null,
// "name": "教务管理",
// "url": "local-affairs",
// "perms": "",
// "type": 0,
// "elIcon": "el-icon-office-building",
// "orderNum": 0,
// "open": null,
// list: [
// {
// "menuId": getUUID(),
// "parentId": 2,
// "parentName": null,
// "name": "年级管理",
// "url": "local-affairs/grade",
// "perms": "",
// "type": 1,
// "icon": "log",
// "orderNum": 0,
// "open": null,
// "list": []
// },
// {
// "menuId": getUUID(),
// "parentId": 2,
// "parentName": null,
// "name": "班级管理",
// "url": "local-affairs/class",
// "perms": "",
// "type": 1,
// "icon": "log",
// "orderNum": 0,
// "open": null,
// "list": []
// },
// {
// "menuId": getUUID(),
// "parentId": 2,
// "parentName": null,
// "name": "教师管理",
// "url": "local-teacher/teacher",
// "perms": "",
// "type": 1,
// "icon": "log",
// "orderNum": 0,
// "open": null,
// "list": []
// },
// {
// "menuId": getUUID(),
// "parentId": 0,
// "parentName": null,
// "name": "学校管理",
// "url": "local-school/school",
// "perms": "",
// "type": 1,
// "elIcon": "el-icon-school",
// "orderNum": 0,
// "open": null,
// list: []
// },
// ]
// },
{
menuId: getUUID(),
parentId: 0,
parentName: null,
name: "数据中心",
url: "",
perms: "",
type: 0,
elIcon: "el-icon-tickets",
orderNum: 0,
open: null,
list: [
{
menuId: getUUID(),
parentId: 0,
parentName: null,
name: "客户分析",
url: "datacenter/customer-analysis/index",
perms: "",
type: 1,
elIcon: "el-icon-user",
orderNum: 0,
open: null,
list: [],
},
{
menuId: getUUID(),
parentId: 0,
parentName: null,
name: "商品分析",
url: "datacenter/product-analysis/index",
perms: "",
type: 1,
elIcon: "el-icon-data-analysis",
orderNum: 0,
open: null,
list: [],
},
{
menuId: getUUID(),
parentId: 0,
parentName: null,
name: "订单统计分析",
url: "datacenter/order-analysis/index",
perms: "",
type: 1,
elIcon: "el-icon-shopping-cart-full",
orderNum: 0,
open: null,
list: [],
},
],
},
],
code: 0,
permissions: [],

237
src/views/modules/datacenter/customer-analysis/index.vue Normal file
View File

@ -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>

285
src/views/modules/datacenter/order-analysis/index.vue Normal file
View File

@ -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>

242
src/views/modules/datacenter/product-analysis/index.vue Normal file
View File

@ -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>

42
src/views/modules/presale/products/index.vue
View File

@ -334,11 +334,47 @@ export default {
{
title: "预售价",
align: "center",
field: "discountActivity",
field: "presalePrice",
type: "jsx",
render: ({ row }) => {
if (row.discountActivity) {
return <span>{row.discountActivity.ruleObject.discount}折</span>;
if (
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>
);
}
},
},

6
src/views/modules/presale/products/popup/add-or-update.vue
View File

@ -20,8 +20,8 @@
<el-form-item label="订金支付时间：" prop="startTime">
<el-date-picker
@change="getOrderTime"
format="yyyy-MM-dd HH:mm:ss"
data-format="yyyy-MM-dd HH:mm:ss"
format="yyyy-MM-dd HH:mm"
data-format="yyyy-MM-dd HH:mm"
value-format="yyyy-MM-dd HH:mm:ss"
v-model="orderTime"
type="datetimerange"
@ -319,7 +319,7 @@ export default {
console.log(row.startTime, row.endTime);
this.orderTime = [row.startTime, row.endTime];
this.arrears = [row.balancePaymentStartTime, row.balancePaymentEndTime];
this.delivery = [];
this.delivery = [row.estimatedStartDeliveryTime, row.estimatedEndDeliveryTime];
this.ruleForm.productList = [
{
productId: row.id,