328 lines
9.3 KiB
Vue
328 lines
9.3 KiB
Vue
<template>
|
||
<div>
|
||
<div>
|
||
<el-form :inline="true" :model="formInline" class="demo-form-inline">
|
||
<el-form-item label="日期类型">
|
||
<el-select
|
||
style="margin-right: 20px"
|
||
v-model="formInline.dateType"
|
||
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-form-item>
|
||
<el-form-item label="统计类型">
|
||
<el-select
|
||
style="margin-right: 20px"
|
||
v-model="formInline.elementType"
|
||
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-form-item>
|
||
<el-form-item>
|
||
<el-button @click="getList" type="primary">查询</el-button>
|
||
<el-button @click="batchExport" type="success">导出</el-button>
|
||
</el-form-item>
|
||
</el-form>
|
||
</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">{{
|
||
analysis.viewCount ? analysis.viewCount : "0"
|
||
}}</span>
|
||
<span
|
||
v-if="analysis.viewCountRatio < '0%'"
|
||
style="font-size: 16px; margin: 0 5px; color: green"
|
||
>↓</span
|
||
>
|
||
<span style="font-size: 16px; margin: 0 5px; color: red" v-else
|
||
>↑</span
|
||
>
|
||
<span style="font-size: 16px">{{ analysis.viewCountRatio }}</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">{{ analysis.peopleCount }}</span>
|
||
<span
|
||
v-if="analysis.peopleCountRatio < '0%'"
|
||
style="font-size: 16px; margin: 0 5px; color: green"
|
||
>↓</span
|
||
>
|
||
<span style="font-size: 16px; margin: 0 5px; color: red" v-else
|
||
>↑</span
|
||
>
|
||
<span style="font-size: 16px">{{ analysis.peopleCountRatio }}</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">{{
|
||
analysis.newPeopleCount ? analysis.newPeopleCount : "0"
|
||
}}</span>
|
||
<span
|
||
v-if="analysis.newPeopleCountRatio < '0%'"
|
||
style="font-size: 16px; margin: 0 5px; color: green"
|
||
>↓</span
|
||
>
|
||
<span style="font-size: 16px; margin: 0 5px; color: red" v-else
|
||
>↑</span
|
||
>
|
||
<span style="font-size: 16px">{{
|
||
analysis.newPeopleCountRatio
|
||
}}</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">
|
||
{{ analysis.payCount ? analysis.payCount : "0" }}
|
||
</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">
|
||
{{ analysis.payConversion ? analysis.payConversion : "0" }}
|
||
</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">
|
||
{{ analysis.repurchaseRate ? analysis.repurchaseRate : "0" }}
|
||
</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 XLSX from "xlsx";
|
||
import { saveAs } from "file-saver";
|
||
import { mapState } from "vuex";
|
||
import * as echarts from "echarts";
|
||
export default {
|
||
data() {
|
||
return {
|
||
value1: "",
|
||
value: "",
|
||
formInline: {
|
||
dateType: "1",
|
||
elementType: "1",
|
||
},
|
||
analysis: {},
|
||
trend: [],
|
||
};
|
||
},
|
||
mounted() {
|
||
this.getList();
|
||
},
|
||
methods: {
|
||
getList() {
|
||
console.log("1213");
|
||
this.$api.dataCenter
|
||
.customerAnalysis({ dateType: this.formInline.dateType })
|
||
.then((res) => {
|
||
this.analysis = res.data.data;
|
||
});
|
||
this.$api.dataCenter.customerTrend(this.formInline).then((res) => {
|
||
this.trend = res.data.data;
|
||
this.init(res.data.data);
|
||
});
|
||
},
|
||
init(data) {
|
||
this.$nextTick(() => {
|
||
// 折线图
|
||
const myChat = echarts.init(
|
||
document.getElementById("echarts-LineChart")
|
||
);
|
||
myChat.setOption(this.LineChart(data));
|
||
window.addEventListener("resize", () => {
|
||
myChat.resize();
|
||
});
|
||
});
|
||
},
|
||
LineChart(data) {
|
||
return {
|
||
title: {
|
||
text: "数据趋势分析",
|
||
},
|
||
tooltip: {
|
||
trigger: "axis",
|
||
},
|
||
legend: {
|
||
data: [this.elementTypeName(this.formInline.elementType)],
|
||
},
|
||
grid: {
|
||
left: "3%",
|
||
right: "4%",
|
||
bottom: "3%",
|
||
containLabel: true,
|
||
},
|
||
toolbox: {
|
||
feature: {
|
||
saveAsImage: {},
|
||
},
|
||
},
|
||
xAxis: {
|
||
type: "category",
|
||
boundaryGap: false,
|
||
data: data.map((item) => {
|
||
return item.countDate;
|
||
}),
|
||
},
|
||
yAxis: {
|
||
type: "value",
|
||
},
|
||
series: [
|
||
{
|
||
name: this.elementTypeName(this.formInline.elementType),
|
||
type: "line",
|
||
stack: "Total",
|
||
data: data.map((item) => {
|
||
return item.value;
|
||
}),
|
||
},
|
||
],
|
||
};
|
||
},
|
||
elementTypeName(row) {
|
||
if (row == "1") {
|
||
return "浏览数量";
|
||
} else if (row == "2") {
|
||
return "浏览人数";
|
||
} else if (row == "3") {
|
||
return "新客数量";
|
||
} else if (row == "4") {
|
||
return "支付订单人数";
|
||
}
|
||
},
|
||
async batchExport() {
|
||
let trendData = this.trend.map((item) => {
|
||
return {
|
||
日期: item.countDate,
|
||
数量: item.value,
|
||
};
|
||
});
|
||
let row = this.analysis;
|
||
const analysisData = [
|
||
{
|
||
展现量: row.viewCount,
|
||
浏览人数: row.peopleCount,
|
||
新客数量: row.newPeopleCount,
|
||
支付订单人数: row.payCount,
|
||
支付订单转化率: row.payConversion,
|
||
},
|
||
];
|
||
const workbook = XLSX.utils.book_new();
|
||
const worksheet = XLSX.utils.json_to_sheet(analysisData);
|
||
const worksheetOne = XLSX.utils.json_to_sheet(trendData);
|
||
|
||
XLSX.utils.book_append_sheet(workbook, worksheet, "总数据");
|
||
XLSX.utils.book_append_sheet(workbook, worksheetOne, "数据趋势");
|
||
const excelData = XLSX.write(workbook, {
|
||
type: "array",
|
||
bookType: "xlsx",
|
||
});
|
||
const blob = new Blob([excelData], { type: "application/octet-stream" });
|
||
saveAs(blob, "客户分析.xlsx");
|
||
},
|
||
},
|
||
computed: {
|
||
...mapState("userData", [
|
||
"isMerchant",
|
||
"marketList",
|
||
"storeList",
|
||
"marketId",
|
||
"shopId",
|
||
]),
|
||
},
|
||
};
|
||
</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> |