|
@@ -62,62 +62,23 @@ p {
|
|
|
background-image: url("../../assets/images/head_bg.png");
|
|
|
background-size: 100% 100%;
|
|
|
}
|
|
|
+// ../../assets/images/head_bg.png"
|
|
|
|
|
|
-::v-deep .ant-progress-circle .ant-progress-text {
|
|
|
+::v-deep .el-progress-circle .ant-progress-text {
|
|
|
color: #fff;
|
|
|
}
|
|
|
|
|
|
-::v-deep .ant-input {
|
|
|
+::v-deep .el-input {
|
|
|
background-color: rgba(2, 28, 69, 1) !important;
|
|
|
border: 1px solid #00bfff;
|
|
|
color: #ccc;
|
|
|
}
|
|
|
|
|
|
-::v-deep .ant-radio-button-wrapper {
|
|
|
+::v-deep .el-radio-button__inner {
|
|
|
background-color: rgba(2, 28, 69, 1) !important;
|
|
|
border: 1px solid #6633ff;
|
|
|
color: #6633ff;
|
|
|
}
|
|
|
-.ant-radio-group-solid
|
|
|
- .ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled) {
|
|
|
- color: #fff;
|
|
|
- border-color: #00bfff;
|
|
|
-}
|
|
|
-::v-deep .ant-calendar-picker-clear {
|
|
|
- background: none !important;
|
|
|
- color: #ccc !important;
|
|
|
-}
|
|
|
-
|
|
|
-::v-deep .ant-table-thead > tr > th {
|
|
|
- color: white;
|
|
|
- /* background: rgba(2, 28, 69, 1) !important; */
|
|
|
- border-bottom: 1px solid rgba(2, 28, 69, 1);
|
|
|
- padding: 10px;
|
|
|
- background-color: rgb(26, 52, 104);
|
|
|
-}
|
|
|
-
|
|
|
-::v-deep .ant-table-placeholder {
|
|
|
- background: rgba(2, 28, 69, 1);
|
|
|
- border-bottom: none;
|
|
|
- border-top: none;
|
|
|
- color: #fff;
|
|
|
-}
|
|
|
-
|
|
|
-::v-deep .ant-table-tbody > tr > td {
|
|
|
- color: white;
|
|
|
- background: rgba(2, 28, 69, 1) !important;
|
|
|
- border: none;
|
|
|
- padding-top: 0;
|
|
|
- padding-bottom: 0;
|
|
|
-}
|
|
|
-
|
|
|
-::v-deep .ant-progress-circle-trail {
|
|
|
- stroke: rgb(39, 53, 102) !important;
|
|
|
-}
|
|
|
-
|
|
|
-::v-deep .ant-empty-description {
|
|
|
- color: #fff;
|
|
|
-}
|
|
|
|
|
|
.threeList {
|
|
|
width: 20px;
|
|
@@ -235,12 +196,13 @@ p {
|
|
|
font-weight: bold;
|
|
|
"
|
|
|
>
|
|
|
- 电商数据监控中心
|
|
|
+ 567睿选
|
|
|
|
|
|
<el-radio-group
|
|
|
v-model="mediaId"
|
|
|
size="mini"
|
|
|
style="position: fixed; top: 3px; left: 0; opacity: 0.7"
|
|
|
+ @change="changeData"
|
|
|
>
|
|
|
<el-radio-button label="2">快手</el-radio-button>
|
|
|
<el-radio-button label="1">抖音</el-radio-button>
|
|
@@ -330,25 +292,29 @@ p {
|
|
|
"
|
|
|
></div>
|
|
|
<span style="color: #0099ff; font-size: 1vw; padding: 10px">达人排行榜</span>
|
|
|
- <el-table v-loading="promoterLoading" :data="promoterRankList">
|
|
|
+ <el-table :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>
|
|
|
+ <div style="display: flex">
|
|
|
+ <img
|
|
|
+ :src="scope.row.promoterUrl"
|
|
|
+ alt=""
|
|
|
+ style="width: 1.2vw; height: auto; margin-right: 5px"
|
|
|
+ />
|
|
|
+ <a
|
|
|
+ :title="scope.row.promoterNickName"
|
|
|
+ style="
|
|
|
+ width: 200px;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ white-space: nowrap;
|
|
|
+ overflow: hidden;
|
|
|
+ text-align: left;
|
|
|
+ "
|
|
|
+ >
|
|
|
+ {{ scope.row.promoterNickName }}
|
|
|
+ </a>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
<el-table-column label="订单数" align="center" prop="orderNum">
|
|
@@ -385,7 +351,47 @@ p {
|
|
|
opacity: 0.7;
|
|
|
"
|
|
|
:class="fullscreenShow ? 'fullCol' : 'fullScreenCol'"
|
|
|
- ></div>
|
|
|
+ >
|
|
|
+ <div
|
|
|
+ style="
|
|
|
+ width: 100%;
|
|
|
+ height: 20%;
|
|
|
+ color: #f2f2f2;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-around;
|
|
|
+ font-size: 3vw;
|
|
|
+ line-height: 13vh;
|
|
|
+ "
|
|
|
+ >
|
|
|
+ <count-to
|
|
|
+ :start-val="0"
|
|
|
+ :end-val="(orderData.baseAmount / 100).toFixed(2)"
|
|
|
+ :decimals="2"
|
|
|
+ :duration="3600"
|
|
|
+ class="card-panel-num"
|
|
|
+ style="color:darkkhaki"
|
|
|
+ />
|
|
|
+
|
|
|
+ <!-- <count-to
|
|
|
+ :start-val="0"
|
|
|
+ :end-val="orderData.validOrderNUm"
|
|
|
+ :duration="3600"
|
|
|
+ class="card-panel-num"
|
|
|
+ /> -->
|
|
|
+
|
|
|
+ <!-- <span> {{ (orderData.baseAmount / 100).toFixed(2) }}</span>
|
|
|
+ <span>
|
|
|
+ {{ orderData.validOrderNUm }}
|
|
|
+ </span> -->
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div
|
|
|
+ ref="volumn"
|
|
|
+ class="volume"
|
|
|
+ id="volumn"
|
|
|
+ style="width: 100%; height: 80%"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
</el-col>
|
|
|
<el-col :span="8">
|
|
|
<div
|
|
@@ -432,18 +438,27 @@ p {
|
|
|
"
|
|
|
></div>
|
|
|
<span style="color: #0099ff; font-size: 1vw; padding: 10px">商品排行榜</span>
|
|
|
- <el-table v-loading="orderRankLoading" :data="orderRankList">
|
|
|
+ <el-table :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>
|
|
|
+ <div style="display: flex">
|
|
|
+ <img
|
|
|
+ :src="scope.row.imageUrl"
|
|
|
+ alt=""
|
|
|
+ style="width: 1.2vw; height: auto; margin-right: 5px"
|
|
|
+ />
|
|
|
+ <a
|
|
|
+ :title="scope.row.itemTitle"
|
|
|
+ style="
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ white-space: nowrap;
|
|
|
+ overflow: hidden;
|
|
|
+ "
|
|
|
+ >
|
|
|
+ {{ scope.row.itemTitle }}
|
|
|
+ </a>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
<el-table-column label="订单数" align="center" prop="orderNum">
|
|
@@ -497,8 +512,8 @@ p {
|
|
|
margin-left: 10px;
|
|
|
"
|
|
|
></div>
|
|
|
- <span style="color: #0099ff; font-size: 1vw; padding: 10px">七日订单</span>
|
|
|
- <div id="echart" ref="echart" style="width: 98%; height: 80%"></div>
|
|
|
+ <span style="color: #0099ff; font-size: 1vw; padding: 10px">销量趋势</span>
|
|
|
+ <div id="echart" ref="echart" style="width: 98%; height: 90%"></div>
|
|
|
<!-- <a-empty :image="emptyImg" /> -->
|
|
|
</div>
|
|
|
</el-col>
|
|
@@ -521,15 +536,21 @@ require("echarts/lib/component/title");
|
|
|
require("echarts/lib/component/graphic");
|
|
|
require("echarts/lib/component/toolbox");
|
|
|
require("echarts/lib/component/legend");
|
|
|
-
|
|
|
+import "echarts-gl";
|
|
|
const color = ["#8A2BE2", "#FFA500", "#00FFFF", "#4169E1", "#FF00FF", "#48D1CC"];
|
|
|
|
|
|
+import aa from "./dataJson/map2.json";
|
|
|
+import world from "./dataJson/mapData.json";
|
|
|
+
|
|
|
+import CountTo from "vue-count-to";
|
|
|
+echarts.registerMap("world", world);
|
|
|
import {
|
|
|
getIndexPromoterRank, //获取达人排行
|
|
|
getIndexOrderRank, //获取商品排行
|
|
|
getPersonalInfo,
|
|
|
getOrderData,
|
|
|
getDataAnalysis,
|
|
|
+ getBigDataAnalysis,
|
|
|
getOrderHourData,
|
|
|
getMediaId,
|
|
|
} from "@/api/index";
|
|
@@ -555,8 +576,13 @@ export default {
|
|
|
uploadDate: [],
|
|
|
promoterRankList: [],
|
|
|
orderRankList: [],
|
|
|
+ fullscreenShow: false,
|
|
|
+ myChart: null,
|
|
|
};
|
|
|
},
|
|
|
+ components: {
|
|
|
+ CountTo,
|
|
|
+ },
|
|
|
created() {
|
|
|
let date = new Date();
|
|
|
let y = date.getFullYear();
|
|
@@ -574,9 +600,27 @@ export default {
|
|
|
this.getOrderHourData();
|
|
|
this.getIndexOrderRank();
|
|
|
this.getIndexPromoterRank();
|
|
|
+ // this.initEchart("volumn", this.drawChart());
|
|
|
+ this.drawChart();
|
|
|
+ var that = this;
|
|
|
+ setInterval(function () {
|
|
|
+ that.getOrderData();
|
|
|
+ that.getIndexPromoterRank();
|
|
|
+ that.getOrderHourData();
|
|
|
+ that.getIndexOrderRank();
|
|
|
+ // this.initEchart("volumn", this.drawChart());
|
|
|
+ }, 120000);
|
|
|
});
|
|
|
},
|
|
|
methods: {
|
|
|
+ changeData(e) {
|
|
|
+ console.log(e);
|
|
|
+ this.getOrderData();
|
|
|
+ this.getIndexPromoterRank();
|
|
|
+ this.getOrderHourData();
|
|
|
+ this.getIndexOrderRank();
|
|
|
+ this.getDataAnalysis();
|
|
|
+ },
|
|
|
//获取echart的值
|
|
|
initEchart(idName, optionName) {
|
|
|
let that = this;
|
|
@@ -617,7 +661,7 @@ export default {
|
|
|
document.body.msRequestFullscreen();
|
|
|
}
|
|
|
this.fullText = false;
|
|
|
- // this.fullscreenShow = true;
|
|
|
+ this.fullscreenShow = true;
|
|
|
// this.fullShow = false;
|
|
|
},
|
|
|
// 退出全屏
|
|
@@ -633,7 +677,7 @@ export default {
|
|
|
document.msExitFullscreen();
|
|
|
}
|
|
|
this.fullText = true;
|
|
|
- // this.fullscreenShow = false;
|
|
|
+ this.fullscreenShow = false;
|
|
|
// this.fullShow = true;
|
|
|
},
|
|
|
getIndexPromoterRank() {
|
|
@@ -719,18 +763,11 @@ export default {
|
|
|
let sdd = start.getDate();
|
|
|
sdd = sdd < 10 ? "0" + sdd : sdd;
|
|
|
let dateNow = [`${sy}-${sMM}-${sdd}`, `${ey}-${eMM}-${edd}`];
|
|
|
- getDataAnalysis(
|
|
|
- this.addDateRange(
|
|
|
- { userId: 510127, type: 1, mediaId: this.mediaId },
|
|
|
- dateNow,
|
|
|
- "statDate",
|
|
|
- "endDate"
|
|
|
- )
|
|
|
- ).then((response) => {
|
|
|
+ getBigDataAnalysis({ mediaId: this.mediaId }).then((response) => {
|
|
|
this.echartsLoading = false;
|
|
|
- this.analysis = response.data;
|
|
|
+ this.analysis = response;
|
|
|
this.$nextTick(() => {
|
|
|
- this.initEchart("echart", this.getDataAnalysisData(response.data.list));
|
|
|
+ this.initEchart("echart", this.getDataAnalysisData(response));
|
|
|
});
|
|
|
});
|
|
|
},
|
|
@@ -1173,13 +1210,19 @@ export default {
|
|
|
return option;
|
|
|
},
|
|
|
|
|
|
- // 柱状图-有效订单
|
|
|
+ // 柱状图-销量
|
|
|
getDataAnalysisData(data) {
|
|
|
var option = {
|
|
|
+ grid: {
|
|
|
+ left: "0%",
|
|
|
+ right: "0%",
|
|
|
+ bottom: "5%",
|
|
|
+ containLabel: true,
|
|
|
+ },
|
|
|
xAxis: {
|
|
|
type: "category",
|
|
|
data: data.map((item) => {
|
|
|
- return item.date.split("2024-")[1];
|
|
|
+ return item.date;
|
|
|
}),
|
|
|
axisLine: {
|
|
|
lineStyle: {
|
|
@@ -1201,15 +1244,25 @@ export default {
|
|
|
|
|
|
axisLabel: {
|
|
|
fontSize: 16,
|
|
|
+ color: "rgb(39, 53, 102,0)",
|
|
|
},
|
|
|
},
|
|
|
series: [
|
|
|
{
|
|
|
data: data.map((item) => {
|
|
|
- return item.validOrderCount;
|
|
|
+ return item.orderCount;
|
|
|
}),
|
|
|
type: "bar",
|
|
|
itemStyle: {
|
|
|
+ color: "rgba(200,137,255,1.0)",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ data: data.map((item) => {
|
|
|
+ return item.payAmount / 10;
|
|
|
+ }),
|
|
|
+ type: "line",
|
|
|
+ itemStyle: {
|
|
|
color: "rgba(0,137,255,1.0)",
|
|
|
},
|
|
|
},
|
|
@@ -1390,6 +1443,77 @@ export default {
|
|
|
return optionTwo;
|
|
|
}
|
|
|
},
|
|
|
+
|
|
|
+ drawChart() {
|
|
|
+ this.myChart = echarts.init(this.$refs.volumn);
|
|
|
+ var baseTexture = null;
|
|
|
+ var option = null;
|
|
|
+ var geoJson = null;
|
|
|
+ var bb = null;
|
|
|
+
|
|
|
+ function getGeoJsonData() {
|
|
|
+ geoJson = world;
|
|
|
+ bb = aa
|
|
|
+ .filter(function (dataItem) {
|
|
|
+ return dataItem[2] > 0;
|
|
|
+ })
|
|
|
+ .map(function (dataItem) {
|
|
|
+ return [dataItem[0], dataItem[1], Math.sqrt(dataItem[2])];
|
|
|
+ });
|
|
|
+ getBaseTexture();
|
|
|
+ }
|
|
|
+
|
|
|
+ function getBaseTexture() {
|
|
|
+ echarts.registerMap("world", geoJson);
|
|
|
+ let canvas = document.createElement("canvas");
|
|
|
+ baseTexture = echarts.init(canvas, null, {
|
|
|
+ width: 4096,
|
|
|
+ height: 2048,
|
|
|
+ });
|
|
|
+ baseTexture.setOption({
|
|
|
+ backgroundColor: "#00BFFF",
|
|
|
+ });
|
|
|
+ drawEarth();
|
|
|
+ }
|
|
|
+ var self = this;
|
|
|
+ function drawEarth() {
|
|
|
+ option = {
|
|
|
+ visualMap: {
|
|
|
+ show: false,
|
|
|
+ min: 0,
|
|
|
+ max: 60,
|
|
|
+ inRange: {
|
|
|
+ symbolSize: [1.0, 10.0],
|
|
|
+ },
|
|
|
+ },
|
|
|
+ globe: {
|
|
|
+ show: false,
|
|
|
+ globeOuterRadius: 100,
|
|
|
+ shading: "color",
|
|
|
+ environment: "#001213", //00060C
|
|
|
+ light: {
|
|
|
+ ambient: {
|
|
|
+ intensity: 1,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ type: "scatter3D",
|
|
|
+ coordinateSystem: "globe",
|
|
|
+ itemStyle: {
|
|
|
+ color: "#4ECAF1", //球上面点颜色 4ECAF1
|
|
|
+ opacity: 1,
|
|
|
+ },
|
|
|
+ data: bb,
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ };
|
|
|
+ self.myChart.clear();
|
|
|
+ self.myChart.setOption(option, true);
|
|
|
+ }
|
|
|
+ getGeoJsonData();
|
|
|
+ },
|
|
|
},
|
|
|
};
|
|
|
</script>
|