|
@@ -82,31 +82,55 @@
|
|
</div>
|
|
</div>
|
|
<el-row class="top-sum" style="display: flex" v-if="!!orderData">
|
|
<el-row class="top-sum" style="display: flex" v-if="!!orderData">
|
|
<el-col :span="5">
|
|
<el-col :span="5">
|
|
- <el-card shadow="never" class="card-show">
|
|
|
|
|
|
+ <el-card shadow="never" class="card-show" style="height: 145px">
|
|
<p class="p-title">订单总数</p>
|
|
<p class="p-title">订单总数</p>
|
|
<p class="p-main">{{ orderData.allNumber }}</p>
|
|
<p class="p-main">{{ orderData.allNumber }}</p>
|
|
|
|
+
|
|
|
|
+ <div style="display: flex; width: 100%">
|
|
|
|
+ <p class="p-title-1">
|
|
|
|
+ 环比:<i :style="orderData.dateOrderRate > 0 ? 'color:red' : 'color:green'"
|
|
|
|
+ >{{ (orderData.dateOrderRate * 100).toFixed(2) + "%" }}
|
|
|
|
+ </i>
|
|
|
|
+ </p>
|
|
|
|
+ </div>
|
|
</el-card>
|
|
</el-card>
|
|
</el-col>
|
|
</el-col>
|
|
<el-col :span="5">
|
|
<el-col :span="5">
|
|
- <el-card shadow="never" class="card-show">
|
|
|
|
|
|
+ <el-card shadow="never" class="card-show" style="height: 145px">
|
|
<p class="p-title">有效订单数</p>
|
|
<p class="p-title">有效订单数</p>
|
|
<p class="p-main">{{ orderData.validOrderNUm }}</p>
|
|
<p class="p-main">{{ orderData.validOrderNUm }}</p>
|
|
|
|
+ <div style="display: flex; width: 100%">
|
|
|
|
+ <p class="p-title-1">
|
|
|
|
+ 环比:<i :style="orderData.validOrderNUmRoi > 0 ? 'color:red' : 'color:green'"
|
|
|
|
+ >{{ (orderData.validOrderNUmRoi) + "%" }}
|
|
|
|
+ </i>
|
|
|
|
+ </p>
|
|
|
|
+ </div>
|
|
</el-card>
|
|
</el-card>
|
|
</el-col>
|
|
</el-col>
|
|
<el-col :span="5">
|
|
<el-col :span="5">
|
|
- <el-card shadow="never" class="card-show">
|
|
|
|
|
|
+ <el-card shadow="never" class="card-show" style="height: 145px">
|
|
<p class="p-title">失效订单数</p>
|
|
<p class="p-title">失效订单数</p>
|
|
<p class="p-main">{{ orderData.inValidOrderNUm }}</p>
|
|
<p class="p-main">{{ orderData.inValidOrderNUm }}</p>
|
|
|
|
+ <div style="display: flex; width: 100%">
|
|
|
|
+ <p class="p-title-1">
|
|
|
|
+ 环比:<i :style="orderData.inValidOrderNUmRoi > 0 ? 'color:red' : 'color:green'"
|
|
|
|
+ >{{ (orderData.inValidOrderNUmRoi) + "%" }}
|
|
|
|
+ </i>
|
|
|
|
+ </p>
|
|
|
|
+
|
|
|
|
+ </div>
|
|
|
|
+
|
|
</el-card>
|
|
</el-card>
|
|
</el-col>
|
|
</el-col>
|
|
<el-col :span="5">
|
|
<el-col :span="5">
|
|
- <el-card shadow="never" class="card-show">
|
|
|
|
|
|
+ <el-card shadow="never" class="card-show" style="height: 145px">
|
|
<p class="p-title">达人总数</p>
|
|
<p class="p-title">达人总数</p>
|
|
<p class="p-main">{{ orderData.promoterCount }}</p>
|
|
<p class="p-main">{{ orderData.promoterCount }}</p>
|
|
</el-card>
|
|
</el-card>
|
|
</el-col>
|
|
</el-col>
|
|
<el-col :span="5">
|
|
<el-col :span="5">
|
|
- <el-card shadow="never" class="card-show">
|
|
|
|
|
|
+ <el-card shadow="never" class="card-show" style="height: 145px">
|
|
<p class="p-title">
|
|
<p class="p-title">
|
|
{{ type == 1 ? "完成作业数" : "发货数" }}
|
|
{{ type == 1 ? "完成作业数" : "发货数" }}
|
|
</p>
|
|
</p>
|
|
@@ -119,7 +143,7 @@
|
|
<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="display: flex; width: 100%">
|
|
<div style="margin-right: 20px">
|
|
<div style="margin-right: 20px">
|
|
- <p class="p-main-data">
|
|
|
|
|
|
+ <p class="p-main-data" v-if="!!orderData.dataOrderRate">
|
|
数据对比:
|
|
数据对比:
|
|
|
|
|
|
<i :style="orderData.dataOrderRate > 0 ? 'color:red' : 'color:green'">
|
|
<i :style="orderData.dataOrderRate > 0 ? 'color:red' : 'color:green'">
|
|
@@ -138,38 +162,48 @@
|
|
>
|
|
>
|
|
</p>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
- <div :style="dateType == 0 ? '' : 'visibility: hidden'">
|
|
|
|
- <p class="p-main-data">
|
|
|
|
- 日环比:<i :style="orderData.dateOrderRate > 0 ? 'color:red' : 'color:green'"
|
|
|
|
- >{{ (orderData.dateOrderRate * 100).toFixed(2) + "%" }}
|
|
|
|
- </i>
|
|
|
|
- </p>
|
|
|
|
- </div>
|
|
|
|
</div>
|
|
</div>
|
|
</el-row>
|
|
</el-row>
|
|
<el-row class="top-sum" style="display: flex" v-if="!!orderData">
|
|
<el-row class="top-sum" style="display: flex" v-if="!!orderData">
|
|
<el-col :span="5">
|
|
<el-col :span="5">
|
|
- <el-card shadow="never" class="card-show">
|
|
|
|
|
|
+ <el-card shadow="never" class="card-show" style="height: 145px">
|
|
<p class="p-title">订单金额</p>
|
|
<p class="p-title">订单金额</p>
|
|
<p class="p-main">
|
|
<p class="p-main">
|
|
{{
|
|
{{
|
|
orderData.orderAmount >= 0 ? priceFormat(orderData.orderAmount / 100) : 0
|
|
orderData.orderAmount >= 0 ? priceFormat(orderData.orderAmount / 100) : 0
|
|
}}
|
|
}}
|
|
</p>
|
|
</p>
|
|
|
|
+
|
|
|
|
+ <div style="display: flex; width: 100%">
|
|
|
|
+ <p class="p-title-1">
|
|
|
|
+ 环比:<i
|
|
|
|
+ :style="orderData.dateAmountRate > 0 ? 'color:red' : 'color:green'"
|
|
|
|
+ >{{ (orderData.dateAmountRate * 100).toFixed(2) + "%" }}
|
|
|
|
+ </i>
|
|
|
|
+ </p>
|
|
|
|
+ </div>
|
|
|
|
+
|
|
</el-card>
|
|
</el-card>
|
|
</el-col>
|
|
</el-col>
|
|
<el-col :span="5">
|
|
<el-col :span="5">
|
|
- <el-card shadow="never" class="card-show">
|
|
|
|
|
|
+ <el-card shadow="never" class="card-show" style="height: 145px">
|
|
<p class="p-title">有效订单金额</p>
|
|
<p class="p-title">有效订单金额</p>
|
|
<p class="p-main">
|
|
<p class="p-main">
|
|
{{
|
|
{{
|
|
orderData.baseAmount >= 0 ? priceFormat(orderData.baseAmount / 100) : 0
|
|
orderData.baseAmount >= 0 ? priceFormat(orderData.baseAmount / 100) : 0
|
|
}}
|
|
}}
|
|
</p>
|
|
</p>
|
|
|
|
+ <div style="display: flex; width: 100%">
|
|
|
|
+ <p class="p-title-1">
|
|
|
|
+ 环比:<i :style="orderData.baseAmountRoi > 0 ? 'color:red' : 'color:green'"
|
|
|
|
+ >{{ (orderData.baseAmountRoi) + "%" }}
|
|
|
|
+ </i>
|
|
|
|
+ </p>
|
|
|
|
+ </div>
|
|
</el-card>
|
|
</el-card>
|
|
</el-col>
|
|
</el-col>
|
|
<el-col :span="5">
|
|
<el-col :span="5">
|
|
- <el-card shadow="never" class="card-show">
|
|
|
|
|
|
+ <el-card shadow="never" class="card-show" style="height: 145px">
|
|
<p class="p-title">预估服务费</p>
|
|
<p class="p-title">预估服务费</p>
|
|
<p class="p-main">
|
|
<p class="p-main">
|
|
{{
|
|
{{
|
|
@@ -178,11 +212,18 @@
|
|
: 0
|
|
: 0
|
|
}}
|
|
}}
|
|
</p>
|
|
</p>
|
|
|
|
+ <div style="display: flex; width: 100%">
|
|
|
|
+ <p class="p-title-1">
|
|
|
|
+ 环比:<i :style="orderData.regimentalPromotionAmountRoi > 0 ? 'color:red' : 'color:green'"
|
|
|
|
+ >{{ (orderData.regimentalPromotionAmountRoi) + "%" }}
|
|
|
|
+ </i>
|
|
|
|
+ </p>
|
|
|
|
+ </div>
|
|
</el-card>
|
|
</el-card>
|
|
</el-col>
|
|
</el-col>
|
|
|
|
|
|
<el-col :span="5" v-if="this.mediaId == 1">
|
|
<el-col :span="5" v-if="this.mediaId == 1">
|
|
- <el-card shadow="never" class="card-show">
|
|
|
|
|
|
+ <el-card shadow="never" class="card-show" style="height: 145px">
|
|
<p class="p-title">预估服务费支出</p>
|
|
<p class="p-title">预估服务费支出</p>
|
|
<p class="p-main">
|
|
<p class="p-main">
|
|
{{
|
|
{{
|
|
@@ -195,7 +236,7 @@
|
|
</el-col>
|
|
</el-col>
|
|
|
|
|
|
<el-col :span="5">
|
|
<el-col :span="5">
|
|
- <el-card shadow="never" class="card-show">
|
|
|
|
|
|
+ <el-card shadow="never" class="card-show" style="height: 145px">
|
|
<p class="p-title">
|
|
<p class="p-title">
|
|
{{ type == 1 ? "合格作业率" : "订单发货率" }}
|
|
{{ type == 1 ? "合格作业率" : "订单发货率" }}
|
|
</p>
|
|
</p>
|
|
@@ -209,7 +250,7 @@
|
|
<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="display: flex; width: 100%">
|
|
<div style="margin-right: 20px">
|
|
<div style="margin-right: 20px">
|
|
- <p class="p-main-data">
|
|
|
|
|
|
+ <p class="p-main-data" v-if="!!orderData.dataAmountRate">
|
|
数据对比:<i
|
|
数据对比:<i
|
|
:style="orderData.dataAmountRate > 0 ? 'color:red' : 'color:green'"
|
|
:style="orderData.dataAmountRate > 0 ? 'color:red' : 'color:green'"
|
|
>{{ (orderData.dataAmountRate * 100).toFixed(2) + "%" }}</i
|
|
>{{ (orderData.dataAmountRate * 100).toFixed(2) + "%" }}</i
|
|
@@ -227,14 +268,6 @@
|
|
>
|
|
>
|
|
</p>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
- <div :style="dateType == 0 ? '' : 'visibility: hidden'">
|
|
|
|
- <p class="p-main-data">
|
|
|
|
- 日环比:<i
|
|
|
|
- :style="orderData.dateAmountRate > 0 ? 'color:red' : 'color:green'"
|
|
|
|
- >{{ (orderData.dateAmountRate * 100).toFixed(2) + "%" }}
|
|
|
|
- </i>
|
|
|
|
- </p>
|
|
|
|
- </div>
|
|
|
|
</div>
|
|
</div>
|
|
</el-row>
|
|
</el-row>
|
|
</el-card>
|
|
</el-card>
|
|
@@ -685,7 +718,7 @@ export default {
|
|
this.chartList = res.result.today
|
|
this.chartList = res.result.today
|
|
this.initEchart(
|
|
this.initEchart(
|
|
'hourEchart',
|
|
'hourEchart',
|
|
- this.hourEchartOption(res.result.today, res.result.yesterday, [], [])
|
|
|
|
|
|
+ this.hourEchartOption(res.result.today, res.result.yesterday, res.result.roi, [], [])
|
|
)
|
|
)
|
|
}
|
|
}
|
|
this.hourEchartsLoading = false
|
|
this.hourEchartsLoading = false
|
|
@@ -1096,7 +1129,7 @@ export default {
|
|
});
|
|
});
|
|
},
|
|
},
|
|
toOrderDetail(item) {
|
|
toOrderDetail(item) {
|
|
- if(this.mediaId == 2){
|
|
|
|
|
|
+ if (this.mediaId == 2) {
|
|
this.$router.replace({
|
|
this.$router.replace({
|
|
path: "/supplyChain/kuaishou/goodsDetails",
|
|
path: "/supplyChain/kuaishou/goodsDetails",
|
|
query: {
|
|
query: {
|
|
@@ -1109,7 +1142,7 @@ export default {
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
- if(this.mediaId == 1){
|
|
|
|
|
|
+ if (this.mediaId == 1) {
|
|
this.$router.replace({
|
|
this.$router.replace({
|
|
path: "/supplyChain/bytedance/bytedanceGoodsDetails",
|
|
path: "/supplyChain/bytedance/bytedanceGoodsDetails",
|
|
query: {
|
|
query: {
|
|
@@ -1123,17 +1156,16 @@ export default {
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
-
|
|
|
|
},
|
|
},
|
|
toOrderList() {
|
|
toOrderList() {
|
|
- if(this.mediaId == 2){
|
|
|
|
|
|
+ if (this.mediaId == 2) {
|
|
this.$router.replace({
|
|
this.$router.replace({
|
|
path: "/supplyChain/kuaishou/goods",
|
|
path: "/supplyChain/kuaishou/goods",
|
|
});
|
|
});
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
- if(this.mediaId == 1){
|
|
|
|
|
|
+ if (this.mediaId == 1) {
|
|
this.$router.replace({
|
|
this.$router.replace({
|
|
|
|
|
|
path: "/supplyChain/bytedance/bytedanceGoods",
|
|
path: "/supplyChain/bytedance/bytedanceGoods",
|
|
@@ -1142,7 +1174,7 @@ export default {
|
|
|
|
|
|
},
|
|
},
|
|
toPersonDetail(item) {
|
|
toPersonDetail(item) {
|
|
- if(this.mediaId == 2 ){
|
|
|
|
|
|
+ if (this.mediaId == 2) {
|
|
this.$router.replace({
|
|
this.$router.replace({
|
|
path: "/supplyChain/kuaishou/indexDetails",
|
|
path: "/supplyChain/kuaishou/indexDetails",
|
|
query: {
|
|
query: {
|
|
@@ -1155,7 +1187,7 @@ export default {
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
- if(this.mediaId == 1 ){
|
|
|
|
|
|
+ if (this.mediaId == 1) {
|
|
this.$router.replace({
|
|
this.$router.replace({
|
|
path: "/supplyChain/bytedance/bytedancePromoterDetail",
|
|
path: "/supplyChain/bytedance/bytedancePromoterDetail",
|
|
query: {
|
|
query: {
|
|
@@ -1170,14 +1202,14 @@ export default {
|
|
|
|
|
|
},
|
|
},
|
|
toPersonList() {
|
|
toPersonList() {
|
|
- if(this.mediaId == 2){
|
|
|
|
|
|
+ if (this.mediaId == 2) {
|
|
this.$router.replace({
|
|
this.$router.replace({
|
|
path: "/supplyChain/kuaishou/index",
|
|
path: "/supplyChain/kuaishou/index",
|
|
});
|
|
});
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
- if(this.mediaId == 1){
|
|
|
|
|
|
+ if (this.mediaId == 1) {
|
|
this.$router.replace({
|
|
this.$router.replace({
|
|
path: "/supplyChain/bytedance/bytedancePromoterList",
|
|
path: "/supplyChain/bytedance/bytedancePromoterList",
|
|
});
|
|
});
|
|
@@ -1291,7 +1323,7 @@ export default {
|
|
return num;
|
|
return num;
|
|
},
|
|
},
|
|
|
|
|
|
- hourEchartOption(todayList, yesterdayList, timeData, lengthData) {
|
|
|
|
|
|
+ hourEchartOption(todayList, yesterdayList, roi, timeData, lengthData) {
|
|
var that = this
|
|
var that = this
|
|
if (!!yesterdayList) {
|
|
if (!!yesterdayList) {
|
|
let option = {
|
|
let option = {
|
|
@@ -1300,8 +1332,11 @@ export default {
|
|
formatter: function (params) {
|
|
formatter: function (params) {
|
|
if (todayList[0].time == 0) {
|
|
if (todayList[0].time == 0) {
|
|
if (params.length > 1) {
|
|
if (params.length > 1) {
|
|
- return `${params[0].marker}今天${params[0].name}时: ${params[0].value}<br/>
|
|
|
|
- ${params[1].marker}昨天${params[1].name}时: ${params[1].value}`
|
|
|
|
|
|
+ return `${params[0].marker}今天${params[0].name}时:${params[0].value}<br/>
|
|
|
|
+ ${params[1].marker}昨天${params[1].name}时:${params[1].value}<br/>
|
|
|
|
+ ${params[2].marker}环比:${params[2].value}<br/>
|
|
|
|
+
|
|
|
|
+`
|
|
} else {
|
|
} else {
|
|
return `${params[0].marker}昨天${params[0].name}时: ${params[0].value}`
|
|
return `${params[0].marker}昨天${params[0].name}时: ${params[0].value}`
|
|
}
|
|
}
|
|
@@ -1345,6 +1380,20 @@ export default {
|
|
position: 'bottom',
|
|
position: 'bottom',
|
|
offset: 30,
|
|
offset: 30,
|
|
},
|
|
},
|
|
|
|
+ {
|
|
|
|
+ id: 2,
|
|
|
|
+ type: 'category',
|
|
|
|
+ boundaryGap: false,
|
|
|
|
+ data: roi.map((item) => {
|
|
|
|
+ return item.time
|
|
|
|
+ }),
|
|
|
|
+ axisPointer: {
|
|
|
|
+ type: 'none',
|
|
|
|
+ },
|
|
|
|
+ position: 'bottom',
|
|
|
|
+ offset: 30,
|
|
|
|
+ },
|
|
|
|
+
|
|
],
|
|
],
|
|
|
|
|
|
yAxis: {
|
|
yAxis: {
|
|
@@ -1403,6 +1452,35 @@ export default {
|
|
borderColor: '#00FF00',
|
|
borderColor: '#00FF00',
|
|
},
|
|
},
|
|
},
|
|
},
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+ {
|
|
|
|
+ id: 2,
|
|
|
|
+ name: '环比',
|
|
|
|
+ type: 'line',
|
|
|
|
+ smooth: true,
|
|
|
|
+ symbol: 'circle',
|
|
|
|
+ xAxisIndex: 1,
|
|
|
|
+ data:
|
|
|
|
+ this.mediaDimension === 'a'
|
|
|
|
+ ? roi.map((item) => {
|
|
|
|
+ return item.roi
|
|
|
|
+ })
|
|
|
|
+ : roi.map((item) => {
|
|
|
|
+ return item.roi
|
|
|
|
+ }),
|
|
|
|
+
|
|
|
|
+ lineStyle: {
|
|
|
|
+ width: 0, // 线宽是0
|
|
|
|
+ color: 'rgba(0, 0, 0, 0)' // 线的颜色是透明的
|
|
|
|
+ },
|
|
|
|
+ itemStyle: {
|
|
|
|
+ borderColor: "#ffffff",
|
|
|
|
+ borderWidth: 0,
|
|
|
|
+ },
|
|
|
|
+ },
|
|
|
|
+
|
|
|
|
+
|
|
],
|
|
],
|
|
}
|
|
}
|
|
return option
|
|
return option
|
|
@@ -1516,7 +1594,7 @@ export default {
|
|
}
|
|
}
|
|
|
|
|
|
.top-sum {
|
|
.top-sum {
|
|
- margin-bottom: 15px;
|
|
|
|
|
|
+ margin-bottom: 10px;
|
|
|
|
|
|
::v-deep .card-show {
|
|
::v-deep .card-show {
|
|
text-align: center;
|
|
text-align: center;
|
|
@@ -1528,6 +1606,14 @@ export default {
|
|
font-weight: bold;
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
+ .p-title-1 {
|
|
|
|
+ width: 100%;
|
|
|
|
+ font-size: 12px;
|
|
|
|
+ color: darkgray;
|
|
|
|
+ font-weight: bold;
|
|
|
|
+ margin-right: 1px;
|
|
|
|
+ }
|
|
|
|
+
|
|
.p-main {
|
|
.p-main {
|
|
width: 100%;
|
|
width: 100%;
|
|
font-size: 20px;
|
|
font-size: 20px;
|