|
@@ -52,9 +52,10 @@
|
|
|
<el-card shadow="never" class="top-sum" v-loading="loading">
|
|
|
<div slot="header" class="clearfix">
|
|
|
<span>进行中的项目</span>
|
|
|
+
|
|
|
<el-date-picker
|
|
|
v-model="uploadDate"
|
|
|
- style="width: 240px; float: right; padding: 3px 0"
|
|
|
+ style="width: 250px; float: right"
|
|
|
value-format="yyyy-MM-dd"
|
|
|
format="yyyy-MM-dd"
|
|
|
type="daterange"
|
|
@@ -64,8 +65,13 @@
|
|
|
:picker-options="pickerOptions"
|
|
|
@change="getOrderData"
|
|
|
></el-date-picker>
|
|
|
+ <el-radio-group v-model="mediaId" style="float: right" @change="changeMedia">
|
|
|
+ <el-radio-button label="2">快手</el-radio-button>
|
|
|
+ <el-radio-button label="1">抖音</el-radio-button>
|
|
|
+ </el-radio-group>
|
|
|
+
|
|
|
</div>
|
|
|
- <el-row class="top-sum" style="display: flex">
|
|
|
+ <el-row class="top-sum" style="display: flex" v-if="!!orderData">
|
|
|
<el-col :span="5">
|
|
|
<el-card shadow="never" class="card-show">
|
|
|
<p class="p-title">订单总数</p>
|
|
@@ -101,14 +107,15 @@
|
|
|
</el-card>
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
- <el-row class="top-sum" style="display: flex" v-if="orderData">
|
|
|
+ <el-row class="top-sum" style="display: flex" v-if="!!orderData">
|
|
|
<div style="display: flex; width: 100%">
|
|
|
<div style="margin-right: 20px">
|
|
|
<p class="p-main-data">
|
|
|
- 数据对比:<i
|
|
|
- :style="orderData.dataOrderRate > 0 ? 'color:red' : 'color:green'"
|
|
|
- >{{ (orderData.dataOrderRate * 100).toFixed(2) + "%" }}</i
|
|
|
- >
|
|
|
+ 数据对比:
|
|
|
+
|
|
|
+ <i :style="orderData.dataOrderRate > 0 ? 'color:red' : 'color:green'">
|
|
|
+ {{ (orderData.dataOrderRate * 100).toFixed(2) + "%" }}
|
|
|
+ </i>
|
|
|
</p>
|
|
|
</div>
|
|
|
<div
|
|
@@ -131,7 +138,7 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
</el-row>
|
|
|
- <el-row class="top-sum" style="display: flex">
|
|
|
+ <el-row class="top-sum" style="display: flex" v-if="!!orderData">
|
|
|
<el-col :span="5">
|
|
|
<el-card shadow="never" class="card-show">
|
|
|
<p class="p-title">订单金额</p>
|
|
@@ -174,9 +181,9 @@
|
|
|
</p>
|
|
|
</el-card>
|
|
|
</el-col>
|
|
|
- <el-col :span="5"> </el-col>
|
|
|
+ <el-col :span="5"></el-col>
|
|
|
</el-row>
|
|
|
- <el-row class="top-sum" style="display: flex" v-if="orderData">
|
|
|
+ <el-row class="top-sum" style="display: flex" v-if="!!orderData">
|
|
|
<div style="display: flex; width: 100%">
|
|
|
<div style="margin-right: 20px">
|
|
|
<p class="p-main-data">
|
|
@@ -219,11 +226,11 @@
|
|
|
style="width: 240px; float: right; padding: 3px 0"
|
|
|
@change="changeEchartsType"
|
|
|
>
|
|
|
- <el-option label="销售额" value="orderAmount" />
|
|
|
- <el-option label="服务费" value="regimentalPromotionAmount" />
|
|
|
- <el-option label="达人数" value="promoterCount" v-if="type == 1" />
|
|
|
- <el-option label="订单数" value="orderCount" />
|
|
|
- <el-option label="有效订单数" value="validOrderCount" />
|
|
|
+ <el-option label="销售额" value="orderAmount"/>
|
|
|
+ <el-option label="服务费" value="regimentalPromotionAmount"/>
|
|
|
+ <el-option label="达人数" value="promoterCount" v-if="type == 1"/>
|
|
|
+ <el-option label="订单数" value="orderCount"/>
|
|
|
+ <el-option label="有效订单数" value="validOrderCount"/>
|
|
|
</el-select>
|
|
|
</div>
|
|
|
<div class="flex-class">
|
|
@@ -232,7 +239,7 @@
|
|
|
ref="echart"
|
|
|
style="height: 400px; width: 65%; margin-top: 50px"
|
|
|
></div>
|
|
|
- <div style="height: 400px; width: 30%; margin-top: 50px">
|
|
|
+ <div style="height: 400px; width: 30%; margin-top: 50px" v-if="!!analysis">
|
|
|
<div class="flex-class top-sum">
|
|
|
<div style="width: 150px; text-align: left" class="card-show">
|
|
|
<p class="p-title">月销售额</p>
|
|
@@ -295,12 +302,13 @@
|
|
|
style="float: right; padding: 3px 0"
|
|
|
type="text"
|
|
|
@click="toOrderList"
|
|
|
- >更多>></el-button
|
|
|
+ >更多>>
|
|
|
+ </el-button
|
|
|
>
|
|
|
</div>
|
|
|
<el-table v-loading="orderRankLoading" :data="orderRankList">
|
|
|
<!-- <el-table-column type="selection" width="55" align="center" /> -->
|
|
|
- <el-table-column type="index" :index="indexMethod"> </el-table-column>
|
|
|
+ <el-table-column type="index" :index="indexMethod"></el-table-column>
|
|
|
<el-table-column label="商品名称" align="center" prop="itemTitle">
|
|
|
<template slot-scope="scope">
|
|
|
<a
|
|
@@ -366,7 +374,8 @@
|
|
|
style="float: right; padding: 3px 0"
|
|
|
type="text"
|
|
|
@click="toPersonList"
|
|
|
- >更多>></el-button
|
|
|
+ >更多>>
|
|
|
+ </el-button
|
|
|
>
|
|
|
</div>
|
|
|
<el-table v-loading="promoterLoading" :data="promoterRankList">
|
|
@@ -434,12 +443,15 @@
|
|
|
getPersonalInfo,
|
|
|
getOrderData,
|
|
|
getDataAnalysis,
|
|
|
+ getMediaId,
|
|
|
} from "@/api/index";
|
|
|
+
|
|
|
var echarts = require("echarts");
|
|
|
export default {
|
|
|
name: "sale-html",
|
|
|
data() {
|
|
|
return {
|
|
|
+ mediaId: 2,
|
|
|
echartsType: "orderAmount",
|
|
|
// 遮罩层
|
|
|
loading: false,
|
|
@@ -566,10 +578,8 @@
|
|
|
analysis: {
|
|
|
promoterCount: 0,
|
|
|
promoterRate: 0,
|
|
|
-
|
|
|
orderAmount: 0,
|
|
|
orderAmountRate: 0,
|
|
|
-
|
|
|
regimentalPromotionAmount: 0,
|
|
|
regimentalPromotionAmountRate: 0,
|
|
|
},
|
|
@@ -578,7 +588,7 @@
|
|
|
orderRankList: [],
|
|
|
orderRankLoading: false,
|
|
|
orderTotal: 0,
|
|
|
- queryParams: { pageNum: 1, pageSize: 10, promoterPageNum: 1 },
|
|
|
+ queryParams: {pageNum: 1, pageSize: 10, promoterPageNum: 1},
|
|
|
promoterRankList: [],
|
|
|
promoterLoading: false,
|
|
|
promoterTotal: 0,
|
|
@@ -586,10 +596,12 @@
|
|
|
};
|
|
|
},
|
|
|
filters: {},
|
|
|
+
|
|
|
created() {
|
|
|
this.userId = this.$store.getters.userId;
|
|
|
- // 450127;
|
|
|
- // this.$store.getters.userId;
|
|
|
+ this.getMediaId();
|
|
|
+
|
|
|
+
|
|
|
this.type =
|
|
|
this.$store.getters.roles[0] == "courtshipManager" ||
|
|
|
this.$store.getters.roles[0] == "courtship"
|
|
@@ -609,12 +621,18 @@
|
|
|
dd = dd < 10 ? "0" + dd : dd;
|
|
|
this.uploadDate = [`${y}-${MM}-${dd}`, `${y}-${MM}-${dd}`];
|
|
|
this.getInfomation();
|
|
|
- this.getOrderData();
|
|
|
+ this.getOrderData(this.mediaId);
|
|
|
this.getDataAnalysis();
|
|
|
// this.getIndexPromoterRank();
|
|
|
// this.getIndexOrderRank();
|
|
|
},
|
|
|
methods: {
|
|
|
+ getMediaId() {
|
|
|
+ getMediaId({userId: this.userId}).then((res) => {
|
|
|
+ this.mediaId = res.data;
|
|
|
+ });
|
|
|
+
|
|
|
+ },
|
|
|
getTimeState() {
|
|
|
// 获取当前时间
|
|
|
let timeNow = new Date();
|
|
@@ -640,7 +658,7 @@
|
|
|
return text;
|
|
|
},
|
|
|
getInfomation() {
|
|
|
- getPersonalInfo({ userId: this.userId, type: this.type }).then((res) => {
|
|
|
+ getPersonalInfo({userId: this.userId, type: this.type}).then((res) => {
|
|
|
this.topInfo = res.data;
|
|
|
});
|
|
|
},
|
|
@@ -649,7 +667,7 @@
|
|
|
this.loading = true;
|
|
|
getOrderData(
|
|
|
this.addDateRange(
|
|
|
- { userId: this.userId, type: this.type },
|
|
|
+ {userId: this.userId, type: this.type, mediaId: this.mediaId},
|
|
|
this.uploadDate,
|
|
|
"statDate",
|
|
|
"endDate"
|
|
@@ -665,11 +683,40 @@
|
|
|
this.$message.error("请选择时间");
|
|
|
}
|
|
|
},
|
|
|
+
|
|
|
+ changeMedia() {
|
|
|
+ if (this.uploadDate && this.uploadDate.length == 2) {
|
|
|
+ this.loading = true;
|
|
|
+ getOrderData(
|
|
|
+ this.addDateRange(
|
|
|
+ {userId: this.userId, type: this.type, mediaId: this.mediaId},
|
|
|
+ this.uploadDate,
|
|
|
+ "statDate",
|
|
|
+ "endDate"
|
|
|
+ )
|
|
|
+ ).then((res) => {
|
|
|
+ this.orderData = res.data;
|
|
|
+ if (this.orderData == null) {
|
|
|
+ this.loading = true;
|
|
|
+ } else {
|
|
|
+ this.loading = false;
|
|
|
+ }
|
|
|
+
|
|
|
+ });
|
|
|
+ this.getIndexPromoterRank();
|
|
|
+ this.getIndexOrderRank();
|
|
|
+ this.getDataAnalysis();
|
|
|
+ } else {
|
|
|
+ this.$message.error("请选择时间");
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+
|
|
|
getDataAnalysis() {
|
|
|
this.echartsLoading = true;
|
|
|
getDataAnalysis(
|
|
|
this.addDateRange(
|
|
|
- { userId: this.userId, type: this.type },
|
|
|
+ {userId: this.userId, type: this.type, mediaId: this.mediaId},
|
|
|
this.uploadDate,
|
|
|
"statDate",
|
|
|
"endDate"
|
|
@@ -682,12 +729,13 @@
|
|
|
},
|
|
|
|
|
|
/** 更多操作 */
|
|
|
- handleEdit(item, id) {},
|
|
|
+ handleEdit(item, id) {
|
|
|
+ },
|
|
|
|
|
|
/** 查询字典类型列表 */
|
|
|
getList() {
|
|
|
this.loading = true;
|
|
|
- getSaleClueTaskList({ ...this.queryParams, userId: this.userId }).then(
|
|
|
+ getSaleClueTaskList({...this.queryParams, userId: this.userId}).then(
|
|
|
(response) => {
|
|
|
console.log(response.data.rows);
|
|
|
this.typeList = response.data.rows;
|
|
@@ -937,6 +985,7 @@
|
|
|
dateType: dateType,
|
|
|
pageNum: this.queryParams.promoterPageNum,
|
|
|
pageSize: 10,
|
|
|
+ mediaId: this.mediaId
|
|
|
},
|
|
|
this.uploadDate,
|
|
|
"orderStartDate",
|
|
@@ -973,6 +1022,7 @@
|
|
|
dateType: dateType,
|
|
|
pageNum: this.queryParams.pageNum,
|
|
|
pageSize: 10,
|
|
|
+ mediaId: this.mediaId
|
|
|
},
|
|
|
this.uploadDate,
|
|
|
"orderStartDate",
|
|
@@ -1022,9 +1072,11 @@
|
|
|
font-weight: bold;
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
+
|
|
|
.top-left {
|
|
|
flex: 1;
|
|
|
}
|
|
|
+
|
|
|
.top-right {
|
|
|
flex: 1;
|
|
|
display: flex;
|
|
@@ -1033,34 +1085,42 @@
|
|
|
font-family: none;
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
.p-main-data {
|
|
|
margin: 0;
|
|
|
}
|
|
|
+
|
|
|
.flex-class {
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
}
|
|
|
+
|
|
|
.top-sum {
|
|
|
margin-bottom: 15px;
|
|
|
+
|
|
|
::v-deep .card-show {
|
|
|
text-align: center;
|
|
|
+
|
|
|
.p-title {
|
|
|
width: 100%;
|
|
|
font-size: 10px;
|
|
|
color: darkgray;
|
|
|
font-weight: bold;
|
|
|
}
|
|
|
+
|
|
|
.p-main {
|
|
|
width: 100%;
|
|
|
font-size: 20px;
|
|
|
font-weight: bold;
|
|
|
}
|
|
|
+
|
|
|
.like-a {
|
|
|
color: cornflowerblue;
|
|
|
cursor: pointer;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
::v-deep .el-form-item__label {
|
|
|
white-space: nowrap;
|
|
|
}
|