|
@@ -29,6 +29,18 @@
|
|
|
}
|
|
|
</style>
|
|
|
<style lang="scss" scoped>
|
|
|
+::v-deep .el-table__body tr.el-table__row {
|
|
|
+ background-color: rgb(2, 28, 69); /* 你想要的颜色 */
|
|
|
+}
|
|
|
+::v-deep .el-table__header tr th {
|
|
|
+ background-color: rgb(2, 28, 69); /* 你想要的颜色 */
|
|
|
+}
|
|
|
+::v-deep .el-table__header tr .el-table__cell {
|
|
|
+ color: #f2f2f2; /* 你想要的文字颜色 */
|
|
|
+}
|
|
|
+::v-deep .el-table__body .el-table__cell {
|
|
|
+ color: #f2f2f2; /* 你想要的文字颜色 */
|
|
|
+}
|
|
|
p {
|
|
|
margin-top: 0;
|
|
|
}
|
|
@@ -266,14 +278,14 @@ p {
|
|
|
|
|
|
<el-row
|
|
|
:class="fullscreenShow ? 'fullScreen' : 'fullScreenRow'"
|
|
|
- style="padding: 0 20px; margin: 30px 0"
|
|
|
+ style="padding: 0 20px; margin: 0"
|
|
|
gutter="20"
|
|
|
>
|
|
|
<el-col :span="8">
|
|
|
<div
|
|
|
style="
|
|
|
width: 100%;
|
|
|
- height: 300px;
|
|
|
+ height: 30%;
|
|
|
background-color: rgba(2, 28, 69, 1);
|
|
|
opacity: 0.7;
|
|
|
"
|
|
@@ -300,12 +312,88 @@ p {
|
|
|
<a-list v-else :data-source="[]" />
|
|
|
<!-- <a-empty :image="emptyImg" /> -->
|
|
|
</div>
|
|
|
+ <div
|
|
|
+ style="
|
|
|
+ width: 100%;
|
|
|
+ height: 30%;
|
|
|
+ background-color: rgba(2, 28, 69, 1);
|
|
|
+ opacity: 0.7;
|
|
|
+ "
|
|
|
+ :class="fullscreenShow ? 'fullCol' : 'fullScreenCol'"
|
|
|
+ >
|
|
|
+ <br />
|
|
|
+ <div
|
|
|
+ style="
|
|
|
+ width: 5px;
|
|
|
+ height: 14px;
|
|
|
+ background: #0099ff;
|
|
|
+ display: inline-block;
|
|
|
+ margin-left: 10px;
|
|
|
+ "
|
|
|
+ ></div>
|
|
|
+ <span style="color: #0099ff; font-size: 1vw; padding: 10px">达人排行榜</span>
|
|
|
+ <el-table v-loading="promoterLoading" :data="promoterRankList">
|
|
|
+ <!-- <el-table-column type="selection" width="55" align="center" /> -->
|
|
|
+ <el-table-column type="index" :index="indexMethodTwo" width="70">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="达人名称" align="center" prop="promoterNickName">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <a
|
|
|
+ :title="scope.row.promoterNickName"
|
|
|
+ @click="toPersonDetail(scope.row)"
|
|
|
+ style="
|
|
|
+ width: 200px;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ white-space: nowrap;
|
|
|
+ overflow: hidden;
|
|
|
+ text-align: left;
|
|
|
+ "
|
|
|
+ >
|
|
|
+ {{ scope.row.promoterNickName }}
|
|
|
+ </a>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="订单数" align="center" prop="orderNum">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="有效订单" align="center" prop="validOrderNUm">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="有效率" align="center" prop="validRadio">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ {{
|
|
|
+ scope.row.validRadio
|
|
|
+ ? (scope.row.validRadio * 100).toFixed(2) + "%"
|
|
|
+ : "-"
|
|
|
+ }}
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+
|
|
|
+ <el-table-column label="日涨幅" align="center" prop="radio">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <i :style="scope.row.radio > 0 ? 'color:red' : 'color:green'">{{
|
|
|
+ scope.row.radio ? (scope.row.radio * 100).toFixed(2) + "%" : "-"
|
|
|
+ }}</i>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ <!-- <a-empty :image="emptyImg" /> -->
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8">
|
|
|
+ <div
|
|
|
+ style="
|
|
|
+ width: 100%;
|
|
|
+ height: 60%;
|
|
|
+ background-color: rgba(2, 28, 69, 1);
|
|
|
+ opacity: 0.7;
|
|
|
+ "
|
|
|
+ :class="fullscreenShow ? 'fullCol' : 'fullScreenCol'"
|
|
|
+ ></div>
|
|
|
</el-col>
|
|
|
- <el-col :span="16">
|
|
|
+ <el-col :span="8">
|
|
|
<div
|
|
|
style="
|
|
|
width: 100%;
|
|
|
- height: 300px;
|
|
|
+ height: 30%;
|
|
|
background-color: rgba(2, 28, 69, 1);
|
|
|
opacity: 0.7;
|
|
|
"
|
|
@@ -327,19 +415,10 @@ p {
|
|
|
</div>
|
|
|
<!-- <a-empty :image="emptyImg" /> -->
|
|
|
</div>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
- <el-row
|
|
|
- :class="fullscreenShow ? 'fullScreen' : 'fullScreenRow'"
|
|
|
- style="padding: 0 20px; margin: 0"
|
|
|
- gutter="20"
|
|
|
- >
|
|
|
- <el-col :span="8">
|
|
|
- <!-- 饼图 -->
|
|
|
<div
|
|
|
style="
|
|
|
width: 100%;
|
|
|
- height: 300px;
|
|
|
+ height: 30%;
|
|
|
background-color: rgba(2, 28, 69, 1);
|
|
|
opacity: 0.7;
|
|
|
"
|
|
@@ -355,16 +434,58 @@ p {
|
|
|
margin-left: 10px;
|
|
|
"
|
|
|
></div>
|
|
|
- <span style="color: #0099ff; font-size: 1vw; padding: 10px">七日订单</span>
|
|
|
- <div id="echart" ref="echart" style="width: 98%; height: 250px"></div>
|
|
|
+ <span style="color: #0099ff; font-size: 1vw; padding: 10px">商品排行榜</span>
|
|
|
+ <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 label="商品名称" align="center" prop="itemTitle">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <a
|
|
|
+ :title="scope.row.itemTitle"
|
|
|
+ @click="toOrderDetail(scope.row)"
|
|
|
+ style="text-overflow: ellipsis; white-space: nowrap; overflow: hidden"
|
|
|
+ >
|
|
|
+ {{ scope.row.itemTitle }}
|
|
|
+ </a>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="订单数" align="center" prop="orderNum">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="有效订单" align="center" prop="validOrderNUm">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="有效率" align="center" prop="validRadio">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ {{
|
|
|
+ scope.row.validRadio
|
|
|
+ ? (scope.row.validRadio * 100).toFixed(2) + "%"
|
|
|
+ : "-"
|
|
|
+ }}
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+
|
|
|
+
|
|
|
+ <el-table-column label="日涨幅" align="center" prop="radio">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <i :style="scope.row.radio > 0 ? 'color:red' : 'color:green'">{{
|
|
|
+ scope.row.radio ? (scope.row.radio * 100).toFixed(2) + "%" : "-"
|
|
|
+ }}</i>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
<!-- <a-empty :image="emptyImg" /> -->
|
|
|
</div>
|
|
|
</el-col>
|
|
|
- <el-col :span="16">
|
|
|
+ </el-row>
|
|
|
+ <el-row
|
|
|
+ :class="fullscreenShow ? 'fullScreen' : 'fullScreenRow'"
|
|
|
+ style="padding: 0 20px; margin: 0"
|
|
|
+ gutter="20"
|
|
|
+ >
|
|
|
+ <el-col :span="24">
|
|
|
<div
|
|
|
style="
|
|
|
width: 100%;
|
|
|
- height: 300px;
|
|
|
+ height: 30%;
|
|
|
background-color: rgba(2, 28, 69, 1);
|
|
|
opacity: 0.7;
|
|
|
"
|
|
@@ -380,15 +501,8 @@ p {
|
|
|
margin-left: 10px;
|
|
|
"
|
|
|
></div>
|
|
|
- <span style="color: #0099ff; font-size: 1vw; padding: 10px">排行榜</span>
|
|
|
- <div v-if="emptyShowOne">
|
|
|
- <div
|
|
|
- id="accountIndexEchartOnePie"
|
|
|
- ref="accountIndexEchartOnePie"
|
|
|
- style="width: 90%; height: 300px; margin-right: 20px"
|
|
|
- ></div>
|
|
|
- </div>
|
|
|
- <a-list v-else :data-source="[]" />
|
|
|
+ <span style="color: #0099ff; font-size: 1vw; padding: 10px">七日订单</span>
|
|
|
+ <div id="echart" ref="echart" style="width: 98%; height: 250px"></div>
|
|
|
<!-- <a-empty :image="emptyImg" /> -->
|
|
|
</div>
|
|
|
</el-col>
|
|
@@ -443,6 +557,8 @@ export default {
|
|
|
},
|
|
|
loading: false,
|
|
|
uploadDate: [],
|
|
|
+ promoterRankList: [],
|
|
|
+ orderRankList: [],
|
|
|
};
|
|
|
},
|
|
|
created() {
|
|
@@ -460,6 +576,8 @@ export default {
|
|
|
this.getOrderData();
|
|
|
this.getDataAnalysis();
|
|
|
this.getOrderHourData();
|
|
|
+ this.getIndexOrderRank();
|
|
|
+ this.getIndexPromoterRank();
|
|
|
});
|
|
|
},
|
|
|
methods: {
|
|
@@ -522,6 +640,40 @@ export default {
|
|
|
// this.fullscreenShow = false;
|
|
|
// this.fullShow = true;
|
|
|
},
|
|
|
+ getIndexPromoterRank() {
|
|
|
+ getIndexPromoterRank(
|
|
|
+ this.addDateRange(
|
|
|
+ {
|
|
|
+ dateType: 1,
|
|
|
+ pageNum: 1,
|
|
|
+ pageSize: 5,
|
|
|
+ mediaId: this.mediaId,
|
|
|
+ },
|
|
|
+ this.uploadDate,
|
|
|
+ "orderStartDate",
|
|
|
+ "orderEndDate"
|
|
|
+ )
|
|
|
+ ).then((response) => {
|
|
|
+ this.promoterRankList = response.rows;
|
|
|
+ });
|
|
|
+ },
|
|
|
+ getIndexOrderRank() {
|
|
|
+ getIndexOrderRank(
|
|
|
+ this.addDateRange(
|
|
|
+ {
|
|
|
+ dateType: 1,
|
|
|
+ pageNum: 1,
|
|
|
+ pageSize: 5,
|
|
|
+ mediaId: this.mediaId,
|
|
|
+ },
|
|
|
+ this.uploadDate,
|
|
|
+ "orderStartDate",
|
|
|
+ "orderEndDate"
|
|
|
+ )
|
|
|
+ ).then((response) => {
|
|
|
+ this.orderRankList = response.rows;
|
|
|
+ });
|
|
|
+ },
|
|
|
getOrderData() {
|
|
|
this.loading = true;
|
|
|
var areaArray = ["GMV", "有效单量", "达人数", "商品数"];
|
|
@@ -1078,8 +1230,14 @@ export default {
|
|
|
tooltip: {
|
|
|
trigger: "axis",
|
|
|
formatter: function (params) {
|
|
|
- return `${params[0].marker}今天${params[0].name}时: ${params[0].value}<br/>
|
|
|
- ${params[1].marker}昨天${params[1].name}时: ${params[1].value}`;
|
|
|
+ if (todayList[0].hour == 0) {
|
|
|
+ if (params.length > 1) {
|
|
|
+ return `${params[0].marker}今天${params[0].name}时: ${params[0].value}<br/>
|
|
|
+ ${params[1].marker}昨天${params[1].name}时: ${params[1].value}`;
|
|
|
+ } else {
|
|
|
+ return `${params[0].marker}昨天${params[0].name}时: ${params[0].value}`;
|
|
|
+ }
|
|
|
+ }
|
|
|
},
|
|
|
},
|
|
|
grid: {
|