|
@@ -250,11 +250,10 @@
|
|
|
@change="changeEchartsType"
|
|
|
>
|
|
|
<el-option label="销售额" value="orderAmount"/>
|
|
|
- <el-option label="销售额(有效)" value="validOrderAmount"/>
|
|
|
+ <el-option label="订单数" value="orderCount"/>
|
|
|
<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">
|
|
@@ -493,6 +492,7 @@ import {
|
|
|
getMediaId,
|
|
|
getGmvHour,
|
|
|
} from "@/api/index";
|
|
|
+import fa from "element-ui/src/locale/lang/fa";
|
|
|
|
|
|
var echarts = require("echarts");
|
|
|
export default {
|
|
@@ -502,6 +502,7 @@ export default {
|
|
|
hourEchartsLoading: false,
|
|
|
mediaId: 2,
|
|
|
echartsType: "orderAmount",
|
|
|
+ echartsTwoType: "validOrderAmount",
|
|
|
// 遮罩层
|
|
|
loading: false,
|
|
|
// 选中数组
|
|
@@ -857,7 +858,15 @@ export default {
|
|
|
|
|
|
changeEchartsType(e) {
|
|
|
if (!!e) {
|
|
|
- // this.getDataAnalysis();
|
|
|
+ if (e == 'orderAmount') {
|
|
|
+ this.echartsTwoType = 'validOrderAmount'
|
|
|
+ }
|
|
|
+
|
|
|
+ if (e == 'orderCount') {
|
|
|
+ this.echartsTwoType = 'validOrderCount'
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
this.initEchart("echart", this.handlerEchartOption(this.analysis.list));
|
|
|
} else {
|
|
|
this.$message({
|
|
@@ -881,120 +890,203 @@ export default {
|
|
|
} /** echarts数据展示 订单统计*/,
|
|
|
handlerEchartOption(data) {
|
|
|
let option = {
|
|
|
- noDataLoadingOption: {
|
|
|
- text: "暂无数据",
|
|
|
- effect: "bubble",
|
|
|
- effectOption: {
|
|
|
- effect: {
|
|
|
- n: 0,
|
|
|
+ noDataLoadingOption: {
|
|
|
+ text: "暂无数据",
|
|
|
+ effect: "bubble",
|
|
|
+ effectOption: {
|
|
|
+ effect: {
|
|
|
+ n: 0,
|
|
|
+ },
|
|
|
},
|
|
|
},
|
|
|
- },
|
|
|
- tooltip: {
|
|
|
- trigger: "axis",
|
|
|
- // formatter: function(params) {
|
|
|
- // if(typeShow == 'play_duration_3s'){
|
|
|
- // return `${params[0].marker}${params[0].name}<br/>${params[0].seriesName}:${params[0].value}%`
|
|
|
- // }else{
|
|
|
- // return `${params[0].marker}${params[0].name}<br/>${params[0].seriesName}:${params[0].value}`
|
|
|
- // }
|
|
|
-
|
|
|
- // },
|
|
|
- },
|
|
|
- grid: {
|
|
|
- left: "3%",
|
|
|
- right: "4%",
|
|
|
- bottom: "3%",
|
|
|
- containLabel: true,
|
|
|
- },
|
|
|
- legend: {
|
|
|
- icon: "circle",
|
|
|
- top: "5%",
|
|
|
- right: "5%",
|
|
|
- itemWidth: 6,
|
|
|
- itemGap: 20,
|
|
|
- textStyle: {
|
|
|
- color: "#556677",
|
|
|
+ tooltip: {
|
|
|
+ trigger: "axis"
|
|
|
},
|
|
|
- },
|
|
|
- xAxis: {
|
|
|
- type: "category",
|
|
|
- data: data.map((item) => {
|
|
|
- return item.date;
|
|
|
- }),
|
|
|
- boundaryGap: false,
|
|
|
- // 坐标轴线
|
|
|
- axisLine: {
|
|
|
- show: false,
|
|
|
- lineStyle: {
|
|
|
- color: "#999",
|
|
|
- },
|
|
|
+ grid: {
|
|
|
+ left: "3%",
|
|
|
+ right: "4%",
|
|
|
+ bottom: "3%",
|
|
|
+ containLabel: true
|
|
|
},
|
|
|
- // 分割线
|
|
|
- splitLine: {
|
|
|
- show: true,
|
|
|
- lineStyle: {
|
|
|
- type: "dashed",
|
|
|
- color: "#e5e5e5",
|
|
|
+ legend: {
|
|
|
+ icon: "circle",
|
|
|
+ top: "5%",
|
|
|
+ right: "5%",
|
|
|
+ itemWidth: 6,
|
|
|
+ itemGap: 20,
|
|
|
+ textStyle: {
|
|
|
+ color: "#556677"
|
|
|
},
|
|
|
},
|
|
|
- },
|
|
|
- yAxis: {
|
|
|
- type: "value",
|
|
|
- axisLine: {
|
|
|
- show: false,
|
|
|
- lineStyle: {
|
|
|
- color: "#999",
|
|
|
+ xAxis: {
|
|
|
+ type: "category",
|
|
|
+ data: data.map((item) => {
|
|
|
+ return item.date;
|
|
|
+ }),
|
|
|
+ boundaryGap: false,
|
|
|
+ // 坐标轴线
|
|
|
+ axisLine: {
|
|
|
+ show: false,
|
|
|
+ lineStyle: {
|
|
|
+ color: "#999"
|
|
|
+ },
|
|
|
},
|
|
|
- },
|
|
|
- splitLine: {
|
|
|
- lineStyle: {
|
|
|
- type: "dashed",
|
|
|
- color: "#e5e5e5",
|
|
|
+ // 分割线
|
|
|
+ splitLine: {
|
|
|
+ show: true,
|
|
|
+ lineStyle: {
|
|
|
+ type: "dashed",
|
|
|
+ color: "#e5e5e5"
|
|
|
+ },
|
|
|
},
|
|
|
},
|
|
|
- },
|
|
|
- series: [
|
|
|
- {
|
|
|
- smooth: true,
|
|
|
- name:
|
|
|
- this.echartsType == "orderAmount"
|
|
|
- ? "销售额"
|
|
|
- : this.echartsType == "regimentalPromotionAmount"
|
|
|
- ? "服务费"
|
|
|
- : this.echartsType == "promoterCount"
|
|
|
- ? "达人数"
|
|
|
- : this.echartsType == "orderCount"
|
|
|
- ? "订单数"
|
|
|
- : "",
|
|
|
-
|
|
|
- type: "line",
|
|
|
- stack: "总量",
|
|
|
- data: data.map((item) => {
|
|
|
- if (
|
|
|
- this.echartsType == "orderAmount" ||
|
|
|
- this.echartsType == "regimentalPromotionAmount"
|
|
|
- || this.echartsType == "validOrderAmount"
|
|
|
- ) {
|
|
|
- return (item[this.echartsType] / 100).toFixed(2);
|
|
|
- } else {
|
|
|
- return item[this.echartsType];
|
|
|
- }
|
|
|
- }),
|
|
|
- symbol: "circle",
|
|
|
- symbolSize: 6,
|
|
|
- lineStyle: {
|
|
|
- normal: {
|
|
|
- width: 2,
|
|
|
+
|
|
|
+ yAxis: {
|
|
|
+ type: "value",
|
|
|
+ axisLine: {
|
|
|
+ show: false,
|
|
|
+ lineStyle: {
|
|
|
+ color: "#999",
|
|
|
},
|
|
|
},
|
|
|
- itemStyle: {
|
|
|
- borderColor: "#ffffff",
|
|
|
- borderWidth: 0,
|
|
|
+ splitLine: {
|
|
|
+ lineStyle: {
|
|
|
+ type: "dashed",
|
|
|
+ color: "#e5e5e5",
|
|
|
+ },
|
|
|
},
|
|
|
},
|
|
|
- ],
|
|
|
- };
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ smooth: true,
|
|
|
+ name:
|
|
|
+ this.echartsType == "orderAmount"
|
|
|
+ ? "销售额"
|
|
|
+ : this.echartsType == "orderCount"
|
|
|
+ ? "订单数"
|
|
|
+ : this.echartsType == "regimentalPromotionAmount"
|
|
|
+ ? "服务费"
|
|
|
+ : this.echartsType == "promoterCount"
|
|
|
+ ? "达人数"
|
|
|
+ : "",
|
|
|
+
|
|
|
+ type: "line",
|
|
|
+ stack: "总量",
|
|
|
+ data: data.map((item) => {
|
|
|
+ if (
|
|
|
+ this.echartsType == "orderAmount" ||
|
|
|
+ this.echartsType == "regimentalPromotionAmount"
|
|
|
+ || this.echartsType == "validOrderAmount"
|
|
|
+ ) {
|
|
|
+ return (item[this.echartsType] / 100).toFixed(2);
|
|
|
+ } else {
|
|
|
+ return item[this.echartsType];
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ),
|
|
|
+ symbol: "circle",
|
|
|
+ symbolSize: 6,
|
|
|
+ lineStyle: {
|
|
|
+ normal: {width: 2},
|
|
|
+ },
|
|
|
+ itemStyle: {
|
|
|
+ borderColor: "#ffffff", borderWidth: 0,
|
|
|
+ },
|
|
|
+ },
|
|
|
+
|
|
|
+ {
|
|
|
+ smooth: true,
|
|
|
+ name:
|
|
|
+ this.echartsType == "orderAmount"
|
|
|
+ ? "有效额"
|
|
|
+ : this.echartsType == "orderCount"
|
|
|
+ ? "有效单数"
|
|
|
+ : "",
|
|
|
+
|
|
|
+ type: "line",
|
|
|
+ stack: "有效",
|
|
|
+ data: data.map((item) => {
|
|
|
+ if (this.echartsType == "orderAmount") {
|
|
|
+ return (item[this.echartsTwoType] / 100).toFixed(2);
|
|
|
+ }
|
|
|
+ if (this.echartsType == 'orderCount') {
|
|
|
+ return item[this.echartsTwoType];
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ),
|
|
|
+ symbol: "circle",
|
|
|
+ symbolSize: 6,
|
|
|
+ lineStyle:
|
|
|
+ {
|
|
|
+ normal: {
|
|
|
+ width: 2
|
|
|
+ },
|
|
|
+ },
|
|
|
+ itemStyle: {
|
|
|
+ borderColor: "#ffffff",
|
|
|
+ borderWidth: 0
|
|
|
+ },
|
|
|
+ },
|
|
|
+
|
|
|
+ {
|
|
|
+ smooth: true,
|
|
|
+ showSymbol: false,
|
|
|
+ name:
|
|
|
+ this.echartsType == "orderAmount" || this.echartsType == "orderCount" ? "t-1有效率" : "",
|
|
|
+ type: "line",
|
|
|
+ stack: "实时率",
|
|
|
+ data: data.map((item) => {
|
|
|
+ if (this.$store.getters.roles[0] == "supplyChainAdmin") {
|
|
|
+ if (this.echartsType == "orderAmount") {
|
|
|
+ return item['validGmvRate'];
|
|
|
+ }
|
|
|
+ if (this.echartsType == "orderCount") {
|
|
|
+ return item['validOrderRate'];
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ),
|
|
|
+ symbol: "circle",
|
|
|
+ symbolSize:
|
|
|
+ 6,
|
|
|
+ lineStyle: {
|
|
|
+ width: 0, // 线宽是0
|
|
|
+ color: 'rgba(0, 0, 0, 0)' // 线的颜色是透明的
|
|
|
+ },
|
|
|
+ itemStyle: {
|
|
|
+ borderColor: "#ffffff",
|
|
|
+ borderWidth: 0,
|
|
|
+ },
|
|
|
+ },
|
|
|
+
|
|
|
+ {
|
|
|
+ smooth: true,
|
|
|
+ showSymbol: false,
|
|
|
+ name:
|
|
|
+ this.echartsType == "orderAmount" || this.echartsType == "orderCount" ? "实时有效率" : "",
|
|
|
+ type: "line",
|
|
|
+ stack: "率",
|
|
|
+ data: data.map((item) => {
|
|
|
+ if (this.echartsType == "orderAmount" || this.echartsType == "orderCount") {
|
|
|
+ return (item[this.echartsTwoType] / item[this.echartsType] * 100).toFixed(2);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ),
|
|
|
+ symbol: "circle",
|
|
|
+ symbolSize:
|
|
|
+ 6,
|
|
|
+ lineStyle: {
|
|
|
+ width: 0, // 线宽是0
|
|
|
+ color: 'rgba(0, 0, 0, 0)' // 线的颜色是透明的
|
|
|
+ },
|
|
|
+ itemStyle: {
|
|
|
+ borderColor: "#ffffff",
|
|
|
+ borderWidth: 0,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ }
|
|
|
+ ;
|
|
|
return option;
|
|
|
},
|
|
|
toSamplingList(item) {
|
|
@@ -1004,36 +1096,93 @@ export default {
|
|
|
});
|
|
|
},
|
|
|
toOrderDetail(item) {
|
|
|
- this.$router.replace({
|
|
|
- path: "/supplyChain/kuaishou/goodsDetails",
|
|
|
- query: {
|
|
|
- id: item.itemId,
|
|
|
- name: item.itemTitle,
|
|
|
- orderStartDate: this.uploadDate[0],
|
|
|
- orderEndDate: this.uploadDate[1],
|
|
|
- },
|
|
|
- });
|
|
|
+ if(this.mediaId == 2){
|
|
|
+ this.$router.replace({
|
|
|
+ path: "/supplyChain/kuaishou/goodsDetails",
|
|
|
+ query: {
|
|
|
+ id: item.itemId,
|
|
|
+ name: item.itemTitle,
|
|
|
+ orderStartDate: this.uploadDate[0],
|
|
|
+ orderEndDate: this.uploadDate[1],
|
|
|
+ },
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ if(this.mediaId == 1){
|
|
|
+ this.$router.replace({
|
|
|
+ path: "/supplyChain/bytedance/bytedanceGoodsDetails",
|
|
|
+ query: {
|
|
|
+ id: item.itemId,
|
|
|
+ name: item.itemTitle,
|
|
|
+ orderStartDate: this.uploadDate[0],
|
|
|
+ orderEndDate: this.uploadDate[1],
|
|
|
+ },
|
|
|
+ });
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
},
|
|
|
toOrderList() {
|
|
|
- this.$router.replace({
|
|
|
- path: "/supplyChain/kuaishou/goods",
|
|
|
- });
|
|
|
+ if(this.mediaId == 2){
|
|
|
+ this.$router.replace({
|
|
|
+ path: "/supplyChain/kuaishou/goods",
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ if(this.mediaId == 1){
|
|
|
+ this.$router.replace({
|
|
|
+
|
|
|
+ path: "/supplyChain/bytedance/bytedanceGoods",
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
},
|
|
|
toPersonDetail(item) {
|
|
|
- this.$router.replace({
|
|
|
- path: "/supplyChain/kuaishou/indexDetails",
|
|
|
- query: {
|
|
|
- id: item.promoterId,
|
|
|
- name: item.promoterNickName,
|
|
|
- orderStartDate: this.uploadDate[0],
|
|
|
- orderEndDate: this.uploadDate[1],
|
|
|
- },
|
|
|
- });
|
|
|
+ if(this.mediaId == 2 ){
|
|
|
+ this.$router.replace({
|
|
|
+ path: "/supplyChain/kuaishou/indexDetails",
|
|
|
+ query: {
|
|
|
+ id: item.promoterId,
|
|
|
+ name: item.promoterNickName,
|
|
|
+ orderStartDate: this.uploadDate[0],
|
|
|
+ orderEndDate: this.uploadDate[1],
|
|
|
+ },
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ if(this.mediaId == 1 ){
|
|
|
+ this.$router.replace({
|
|
|
+ path: "/supplyChain/bytedance/bytedancePromoterDetail",
|
|
|
+ query: {
|
|
|
+ id: item.promoterId,
|
|
|
+ name: item.promoterNickName,
|
|
|
+ orderStartDate: this.uploadDate[0],
|
|
|
+ orderEndDate: this.uploadDate[1],
|
|
|
+ },
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
},
|
|
|
toPersonList() {
|
|
|
- this.$router.replace({
|
|
|
- path: "/supplyChain/kuaihsou/index",
|
|
|
- });
|
|
|
+ if(this.mediaId == 2){
|
|
|
+ this.$router.replace({
|
|
|
+ path: "/supplyChain/kuaishou/index",
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ if(this.mediaId == 1){
|
|
|
+ this.$router.replace({
|
|
|
+ path: "/supplyChain/bytedance/bytedancePromoterList",
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
},
|
|
|
indexMethod(index) {
|
|
|
return index + 1 + (this.queryParams.pageNum - 1) * 10;
|