|
@@ -35,15 +35,11 @@
|
|
|
}
|
|
|
</style>
|
|
|
<template>
|
|
|
- <div class="app-container" id="loading" v-loading="loading" style="min-height:600px">
|
|
|
+ <div class="app-container" id="loading" v-loading="loading" style="min-height: 600px">
|
|
|
<el-card v-if="detailData">
|
|
|
<div style="display: flex; width: 500px; margin-bottom: 30px">
|
|
|
<div style="margin-right: 30px">
|
|
|
- <img
|
|
|
- :src="detailData.promoterUrl"
|
|
|
- alt=""
|
|
|
- style="width: 100px; height: auto"
|
|
|
- />
|
|
|
+ <img :src="detailData.promoterUrl" alt="" style="width: 100px; height: auto" />
|
|
|
</div>
|
|
|
<div style="width: 60%" class="item-name-calss">
|
|
|
<a
|
|
@@ -78,18 +74,9 @@
|
|
|
<el-card shadow="never" class="card-show">
|
|
|
<h4><span class="prefix"></span>热销类目</h4>
|
|
|
<el-table :data="dataList.hotSaleChannelInfo">
|
|
|
- <el-table-column
|
|
|
- label="类目"
|
|
|
- align="center"
|
|
|
- prop="hotSaleChannelName"
|
|
|
- >
|
|
|
+ <el-table-column label="类目" align="center" prop="hotSaleChannelName">
|
|
|
</el-table-column>
|
|
|
- <el-table-column
|
|
|
- label="均价"
|
|
|
- align="center"
|
|
|
- prop="avgPrice"
|
|
|
- width="55"
|
|
|
- >
|
|
|
+ <el-table-column label="均价" align="center" prop="avgPrice" width="55">
|
|
|
</el-table-column>
|
|
|
<el-table-column label="销售额" align="center" prop="avgGmv">
|
|
|
</el-table-column>
|
|
@@ -106,11 +93,7 @@
|
|
|
<el-card shadow="never" class="card-show">
|
|
|
<h4><span class="prefix"></span>热销品牌</h4>
|
|
|
<el-table :data="dataList.hotSaleBrandInfo">
|
|
|
- <el-table-column
|
|
|
- label="品牌"
|
|
|
- align="center"
|
|
|
- prop="hotSaleBrandTitle"
|
|
|
- >
|
|
|
+ <el-table-column label="品牌" align="center" prop="hotSaleBrandTitle">
|
|
|
</el-table-column>
|
|
|
<el-table-column label="均价" align="center" prop="avgPrice">
|
|
|
</el-table-column>
|
|
@@ -143,73 +126,49 @@
|
|
|
<div style="width: 49%">
|
|
|
<el-row class="top-sum" :gutter="15">
|
|
|
<el-col :span="6">
|
|
|
- <div
|
|
|
- style="width: 100%; height: 100px"
|
|
|
- class="item-name-calss dh-data"
|
|
|
- >
|
|
|
+ <div style="width: 100%; height: 100px" class="item-name-calss dh-data">
|
|
|
<p>直播次数</p>
|
|
|
<p>{{ dataList.promoteLiveCount }}</p>
|
|
|
</div>
|
|
|
</el-col>
|
|
|
<el-col :span="6">
|
|
|
- <div
|
|
|
- style="width: 100%; height: 100px"
|
|
|
- class="item-name-calss dh-data"
|
|
|
- >
|
|
|
+ <div style="width: 100%; height: 100px" class="item-name-calss dh-data">
|
|
|
<p>场均销售额</p>
|
|
|
<p>{{ dataList.liveStreamGMV }}</p>
|
|
|
</div>
|
|
|
</el-col>
|
|
|
<el-col :span="6">
|
|
|
- <div
|
|
|
- style="width: 100%; height: 100px"
|
|
|
- class="item-name-calss dh-data"
|
|
|
- >
|
|
|
+ <div style="width: 100%; height: 100px" class="item-name-calss dh-data">
|
|
|
<p>进入直播间人数</p>
|
|
|
<p>{{ dataList.liveStreamVisitorCount }}</p>
|
|
|
</div>
|
|
|
</el-col>
|
|
|
<el-col :span="6">
|
|
|
- <div
|
|
|
- style="width: 100%; height: 100px"
|
|
|
- class="item-name-calss dh-data"
|
|
|
- >
|
|
|
+ <div style="width: 100%; height: 100px" class="item-name-calss dh-data">
|
|
|
<p>直播GPM</p>
|
|
|
<p>{{ dataList.liveStreamGPM }}</p>
|
|
|
</div>
|
|
|
</el-col>
|
|
|
<el-col :span="6">
|
|
|
- <div
|
|
|
- style="width: 100%; height: 100px"
|
|
|
- class="item-name-calss dh-data"
|
|
|
- >
|
|
|
+ <div style="width: 100%; height: 100px" class="item-name-calss dh-data">
|
|
|
<p>平均在线人数</p>
|
|
|
<p>{{ dataList.avgVisitorOnlineCount }}</p>
|
|
|
</div>
|
|
|
</el-col>
|
|
|
<el-col :span="6">
|
|
|
- <div
|
|
|
- style="width: 100%; height: 100px"
|
|
|
- class="item-name-calss dh-data"
|
|
|
- >
|
|
|
+ <div style="width: 100%; height: 100px" class="item-name-calss dh-data">
|
|
|
<p>在线人数峰值</p>
|
|
|
<p>{{ dataList.maxSameTimeVisitorCount }}</p>
|
|
|
</div></el-col
|
|
|
>
|
|
|
<el-col :span="6">
|
|
|
- <div
|
|
|
- style="width: 100%; height: 100px"
|
|
|
- class="item-name-calss dh-data"
|
|
|
- >
|
|
|
+ <div style="width: 100%; height: 100px" class="item-name-calss dh-data">
|
|
|
<p>人均观看时长</p>
|
|
|
<p>{{ dataList.avgViewTime }}</p>
|
|
|
</div></el-col
|
|
|
>
|
|
|
<el-col :span="6">
|
|
|
- <div
|
|
|
- style="width: 100%; height: 100px"
|
|
|
- class="item-name-calss dh-data"
|
|
|
- >
|
|
|
+ <div style="width: 100%; height: 100px" class="item-name-calss dh-data">
|
|
|
<p>互动率</p>
|
|
|
<p>{{ dataList.interactionRate }}</p>
|
|
|
</div>
|
|
@@ -217,11 +176,7 @@
|
|
|
</el-row>
|
|
|
</div>
|
|
|
<div style="width: 49%">
|
|
|
- <div
|
|
|
- id="echart"
|
|
|
- ref="echart"
|
|
|
- style="height: 250px; width: 100%"
|
|
|
- ></div>
|
|
|
+ <div id="echart" ref="echart" style="height: 250px; width: 100%"></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</el-card>
|
|
@@ -245,55 +200,37 @@
|
|
|
<div style="width: 49%">
|
|
|
<el-row class="top-sum" :gutter="15">
|
|
|
<el-col :span="6">
|
|
|
- <div
|
|
|
- style="width: 100%; height: 100px"
|
|
|
- class="item-name-calss dh-data"
|
|
|
- >
|
|
|
+ <div style="width: 100%; height: 100px" class="item-name-calss dh-data">
|
|
|
<p>视频数量</p>
|
|
|
<p>{{ dataList.videoCount }}</p>
|
|
|
</div>
|
|
|
</el-col>
|
|
|
<el-col :span="6">
|
|
|
- <div
|
|
|
- style="width: 100%; height: 100px"
|
|
|
- class="item-name-calss dh-data"
|
|
|
- >
|
|
|
+ <div style="width: 100%; height: 100px" class="item-name-calss dh-data">
|
|
|
<p>视频播放量</p>
|
|
|
<p>{{ dataList.videoWatchCount }}</p>
|
|
|
</div>
|
|
|
</el-col>
|
|
|
<el-col :span="6">
|
|
|
- <div
|
|
|
- style="width: 100%; height: 100px"
|
|
|
- class="item-name-calss dh-data"
|
|
|
- >
|
|
|
+ <div style="width: 100%; height: 100px" class="item-name-calss dh-data">
|
|
|
<p>带货视频销售额</p>
|
|
|
<p>{{ dataList.totalSale }}</p>
|
|
|
</div>
|
|
|
</el-col>
|
|
|
<el-col :span="6">
|
|
|
- <div
|
|
|
- style="width: 100%; height: 100px"
|
|
|
- class="item-name-calss dh-data"
|
|
|
- >
|
|
|
+ <div style="width: 100%; height: 100px" class="item-name-calss dh-data">
|
|
|
<p>视频GPM</p>
|
|
|
<p>{{ dataList.videoGPM }}</p>
|
|
|
</div>
|
|
|
</el-col>
|
|
|
<el-col :span="6">
|
|
|
- <div
|
|
|
- style="width: 100%; height: 100px"
|
|
|
- class="item-name-calss dh-data"
|
|
|
- >
|
|
|
+ <div style="width: 100%; height: 100px" class="item-name-calss dh-data">
|
|
|
<p>单视频平均销售额</p>
|
|
|
<p>{{ dataList.avgVideoSales }}</p>
|
|
|
</div>
|
|
|
</el-col>
|
|
|
<el-col :span="6">
|
|
|
- <div
|
|
|
- style="width: 100%; height: 100px"
|
|
|
- class="item-name-calss dh-data"
|
|
|
- >
|
|
|
+ <div style="width: 100%; height: 100px" class="item-name-calss dh-data">
|
|
|
<p>单视频平均观看人数</p>
|
|
|
<p>{{ dataList.avgVideoViewers }}</p>
|
|
|
</div></el-col
|
|
@@ -303,11 +240,7 @@
|
|
|
</el-row>
|
|
|
</div>
|
|
|
<div style="width: 49%">
|
|
|
- <div
|
|
|
- id="echartDsp"
|
|
|
- ref="echartDsp"
|
|
|
- style="height: 250px; width: 100%"
|
|
|
- ></div>
|
|
|
+ <div id="echartDsp" ref="echartDsp" style="height: 250px; width: 100%"></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</el-card>
|
|
@@ -321,11 +254,130 @@
|
|
|
>{{ item.name }}/{{ item.roi }}</el-tag
|
|
|
>
|
|
|
</el-card>
|
|
|
+ <el-card v-if="promoterLabelList" style="margin-top: 20px">
|
|
|
+ <h4>
|
|
|
+ <span class="prefix"></span>达人标签
|
|
|
+
|
|
|
+ <a
|
|
|
+ v-if="$store.getters.userId == detailData.userId"
|
|
|
+ style="display: inline-block; margin-left: 15px"
|
|
|
+ @click="getLabelList"
|
|
|
+ >编辑</a
|
|
|
+ >
|
|
|
+ </h4>
|
|
|
+
|
|
|
+ <el-tag
|
|
|
+ v-for="(item, index) in promoterLabelList"
|
|
|
+ :key="index"
|
|
|
+ style="margin: 10px; color: black"
|
|
|
+ :color="'#' + item.labelColour"
|
|
|
+ >{{ item.labelName }}</el-tag
|
|
|
+ >
|
|
|
+ </el-card>
|
|
|
+ <el-card v-if="followUpRecord" style="margin-top: 20px">
|
|
|
+ <h4>
|
|
|
+ <span class="prefix"></span>跟进记录
|
|
|
+
|
|
|
+ <a
|
|
|
+ v-if="$store.getters.userId == detailData.userId"
|
|
|
+ :class="!editDesc ? 'el-icon-edit' : 'el-icon-check'"
|
|
|
+ @click="updateFollowUpRecords"
|
|
|
+ style="color: deepskyblue; margin-left: 10px; display: inline"
|
|
|
+ ></a>
|
|
|
+ </h4>
|
|
|
+ <div style="width: 100%; margin-bottom: 15px" class="item-name-calss dh-data">
|
|
|
+ <!-- {{ itemInfo.partnerRecommendText }} -->
|
|
|
+ <p v-if="!editDesc" v-html="followUpRecord.txt"></p>
|
|
|
+ <el-input
|
|
|
+ v-else
|
|
|
+ type="textarea"
|
|
|
+ :rows="2"
|
|
|
+ v-model="followUpRecord.txt"
|
|
|
+ placeholder="请输入内容"
|
|
|
+ style="width: 100%"
|
|
|
+ minlength="5"
|
|
|
+ ></el-input>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <el-timeline :reverse="false">
|
|
|
+ <el-timeline-item
|
|
|
+ v-for="(activity, index) in historyFollowUpRecord"
|
|
|
+ :key="index"
|
|
|
+ :timestamp="activity.updateTime.split('T').join(' ') + ' ' + activity.userName"
|
|
|
+ >
|
|
|
+ {{ activity.txt }}
|
|
|
+ </el-timeline-item>
|
|
|
+ </el-timeline>
|
|
|
+ </el-card>
|
|
|
+
|
|
|
+ <el-dialog
|
|
|
+ title="添加标签"
|
|
|
+ :visible.sync="openAllocation"
|
|
|
+ width="800px"
|
|
|
+ append-to-body
|
|
|
+ :close-on-click-modal="false"
|
|
|
+ >
|
|
|
+ <el-form
|
|
|
+ ref="formBroadcast"
|
|
|
+ :model="formBroadcast"
|
|
|
+ label-width="100px"
|
|
|
+ :inline="true"
|
|
|
+ >
|
|
|
+ <el-form-item label="标签" prop="labelId" style="width: 100%" class="entire-line">
|
|
|
+ <el-select
|
|
|
+ v-model="formBroadcast.labelId"
|
|
|
+ filterable
|
|
|
+ allow-create
|
|
|
+ default-first-option
|
|
|
+ placeholder="请选择标签"
|
|
|
+ @change="selectLabel"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="item in options"
|
|
|
+ :key="item.value"
|
|
|
+ :label="item.label"
|
|
|
+ :value="item.value + '@' + item.label + '@' + item.labelColour"
|
|
|
+ >
|
|
|
+ </el-option> </el-select
|
|
|
+ ><br />
|
|
|
+ <el-tag
|
|
|
+ v-for="(item, index) in tagList"
|
|
|
+ :color="'#' + item.color"
|
|
|
+ :key="index"
|
|
|
+ style="margin: 10px 10px 10px 0; color: black"
|
|
|
+ size="medium"
|
|
|
+ closable
|
|
|
+ @close="handleClose(item)"
|
|
|
+ >{{ item.label }}</el-tag
|
|
|
+ >
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ <div slot="footer" class="dialog-footer">
|
|
|
+ <el-button type="primary" @click="submitFormBroadcast" :loading="confirmLoading"
|
|
|
+ >确 定</el-button
|
|
|
+ >
|
|
|
+ <el-button
|
|
|
+ @click="
|
|
|
+ confirmLoading = false;
|
|
|
+ openAllocation = false;
|
|
|
+ formBroadcast = {};
|
|
|
+ "
|
|
|
+ >取 消</el-button
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import { getPromoterDetail } from "@/api/promoter/promoter";
|
|
|
+import {
|
|
|
+ addLabel,
|
|
|
+ getLabelList,
|
|
|
+ deleteLabelById,
|
|
|
+ updatePromoterLabel,
|
|
|
+ updateFollowUpRecords,
|
|
|
+} from "@/api/label";
|
|
|
import { Loading } from "element-ui";
|
|
|
var echarts = require("echarts");
|
|
|
export default {
|
|
@@ -333,6 +385,10 @@ export default {
|
|
|
dicts: ["sys_normal_disable"],
|
|
|
data() {
|
|
|
return {
|
|
|
+ options: [],
|
|
|
+ tagList: [],
|
|
|
+ formBroadcast: {},
|
|
|
+ editDesc: false,
|
|
|
downLoadLoading: false,
|
|
|
dialogTableVisible: false,
|
|
|
logPage: {
|
|
@@ -369,7 +425,7 @@ export default {
|
|
|
// 销售列表
|
|
|
saleList: [],
|
|
|
// 分配销售确定loading
|
|
|
- confirmLoadingSale: false,
|
|
|
+ confirmLoading: false,
|
|
|
// 日期范围
|
|
|
dateRange: [],
|
|
|
// 查询参数
|
|
@@ -388,6 +444,9 @@ export default {
|
|
|
dataList: null,
|
|
|
zbType: "liveVisitorCount",
|
|
|
dspType: "videoWatchCount",
|
|
|
+ promoterLabelList: [],
|
|
|
+ followUpRecord: undefined,
|
|
|
+ historyFollowUpRecord: [],
|
|
|
};
|
|
|
},
|
|
|
created() {
|
|
@@ -403,13 +462,22 @@ export default {
|
|
|
},
|
|
|
methods: {
|
|
|
getItemDetail() {
|
|
|
- this.loading = true
|
|
|
+ this.loading = true;
|
|
|
getPromoterDetail({
|
|
|
id: this.$route.query.id,
|
|
|
}).then((response) => {
|
|
|
- this.loading = false
|
|
|
+ this.loading = false;
|
|
|
this.detailData = response.data.promoterInfo;
|
|
|
this.dataList = response.data.result;
|
|
|
+ this.promoterLabelList = response.data.promoterLabelList
|
|
|
+ ? response.data.promoterLabelList
|
|
|
+ : [];
|
|
|
+ this.followUpRecord = response.data.followUpRecord
|
|
|
+ ? response.data.followUpRecord
|
|
|
+ : undefined;
|
|
|
+ this.historyFollowUpRecord = response.data.historyFollowUpRecord
|
|
|
+ ? response.data.historyFollowUpRecord
|
|
|
+ : [];
|
|
|
this.$nextTick(() => {
|
|
|
this.initEchart(
|
|
|
"echart",
|
|
@@ -417,11 +485,7 @@ export default {
|
|
|
);
|
|
|
this.initEchart(
|
|
|
"echartDsp",
|
|
|
- this.handlerEchartOption(
|
|
|
- this.dataList.shortVideosInfo,
|
|
|
- this.dspType,
|
|
|
- "dsp"
|
|
|
- )
|
|
|
+ this.handlerEchartOption(this.dataList.shortVideosInfo, this.dspType, "dsp")
|
|
|
);
|
|
|
});
|
|
|
});
|
|
@@ -445,11 +509,7 @@ export default {
|
|
|
if (!!e) {
|
|
|
this.initEchart(
|
|
|
"echartDsp",
|
|
|
- this.handlerEchartOption(
|
|
|
- this.dataList.shortVideosInfo,
|
|
|
- this.dspType,
|
|
|
- "dsp"
|
|
|
- )
|
|
|
+ this.handlerEchartOption(this.dataList.shortVideosInfo, this.dspType, "dsp")
|
|
|
);
|
|
|
} else {
|
|
|
this.$message({
|
|
@@ -648,6 +708,92 @@ export default {
|
|
|
handleSelectionChange(selection) {
|
|
|
this.ids = selection.map((item) => item.id);
|
|
|
},
|
|
|
+ handleClose(item) {
|
|
|
+ var index = this.tagList.findIndex((v) => v.value == item.value);
|
|
|
+ this.tagList.splice(index, 1);
|
|
|
+ },
|
|
|
+ getLabelList() {
|
|
|
+ this.openAllocation = true;
|
|
|
+ getLabelList({ pageNum: 1, pageSize: 1000 }).then((res) => {
|
|
|
+ this.options = res.rows.map((item) => {
|
|
|
+ return {
|
|
|
+ ...item,
|
|
|
+ value: item.id,
|
|
|
+ label: item.labelName,
|
|
|
+ };
|
|
|
+ });
|
|
|
+ this.tagList = this.promoterLabelList.map((item) => {
|
|
|
+ return {
|
|
|
+ value: item.labelId,
|
|
|
+ label: item.labelName,
|
|
|
+ color: item.labelColour,
|
|
|
+ };
|
|
|
+ });
|
|
|
+ });
|
|
|
+ },
|
|
|
+ selectLabel(value) {
|
|
|
+ if (value.split("@").length > 1) {
|
|
|
+ var index = this.tagList.findIndex((item) => item.value == value.split("@")[0]);
|
|
|
+ if (index > -1) {
|
|
|
+ } else {
|
|
|
+ this.tagList.push({
|
|
|
+ value: value.split("@")[0],
|
|
|
+ label: value.split("@")[1],
|
|
|
+ color: value.split("@")[2],
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ this.$set(this.formBroadcast, "labelId", undefined);
|
|
|
+ } else {
|
|
|
+ addLabel({
|
|
|
+ labelLevel: "1",
|
|
|
+ labelName: value,
|
|
|
+ labelType: "1",
|
|
|
+ }).then((res) => {
|
|
|
+ this.tagList.push({
|
|
|
+ value: res.result.id,
|
|
|
+ label: res.result.labelName,
|
|
|
+ color: res.result.labelColour,
|
|
|
+ });
|
|
|
+ this.getLabelList();
|
|
|
+ this.$set(this.formBroadcast, "labelId", undefined);
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ submitFormBroadcast: function () {
|
|
|
+ this.$refs["formBroadcast"].validate((valid) => {
|
|
|
+ if (valid) {
|
|
|
+ this.confirmLoading = true;
|
|
|
+
|
|
|
+ updatePromoterLabel({
|
|
|
+ promoterId: this.detailData.promoterId,
|
|
|
+ userId: this.detailData.userId,
|
|
|
+ ids: this.tagList.map((item) => {
|
|
|
+ return item.value;
|
|
|
+ }),
|
|
|
+ }).then((res) => {
|
|
|
+ this.getItemDetail();
|
|
|
+ this.confirmLoading = false;
|
|
|
+ this.openAllocation = false;
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ updateFollowUpRecords() {
|
|
|
+ if (!this.editDesc) {
|
|
|
+ this.editDesc = true;
|
|
|
+ } else {
|
|
|
+ updateFollowUpRecords({
|
|
|
+ promoterId: this.detailData.promoterId,
|
|
|
+ userId: this.detailData.userId,
|
|
|
+ txt: this.followUpRecord.txt,
|
|
|
+ id: this.followUpRecord.id,
|
|
|
+ }).then((res) => {
|
|
|
+ this.editDesc = false;
|
|
|
+ this.$message.success("修改成功");
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
},
|
|
|
};
|
|
|
</script>
|