fix: 样式调整
This commit is contained in:
kaizheng(郑凯)
parent
f0e0372298
commit
df7ee15cce
@ -78,7 +78,8 @@
|
||||
"vuex": "3.1.0",
|
||||
"wangeditor": "^4.7.11",
|
||||
"webpack": "^4.47.0",
|
||||
"xlsx": "^0.14.1"
|
||||
"xlsx": "^0.14.1",
|
||||
"postcss-pxtorem": "^5.1.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/parser": "^7.7.4",
|
||||
|
||||
@ -1,5 +1,19 @@
|
||||
module.exports = {
|
||||
plugins: {
|
||||
autoprefixer: {}
|
||||
autoprefixer: {},
|
||||
"postcss-pxtorem": {
|
||||
// 判断是否是vant的文件 如果是就使用 37.5为根节点字体大小
|
||||
rootValue({ file }) {
|
||||
return 192;
|
||||
},
|
||||
// 配置的文件尺寸需要转化为rem *表示所有的都要转化
|
||||
// 需要转换的css属性，默认*全部
|
||||
propList: ["*"],
|
||||
exclude: e => {
|
||||
if (!/src(\\|\/)views(\\|\/)largeScreen/.test(e)) {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
@ -7,7 +7,9 @@
|
||||
alt=""
|
||||
/>结束直播
|
||||
</div>
|
||||
<h1 class="title"><span>{{ viewData.title }}</span></h1>
|
||||
<h1 class="title">
|
||||
<span>{{ viewData.title }}</span>
|
||||
</h1>
|
||||
<div class="content">
|
||||
<div class="left">
|
||||
<div class="user-share">
|
||||
@ -228,7 +230,7 @@ import {
|
||||
getLiveMapConfig,
|
||||
showFields
|
||||
} from "./config";
|
||||
import { clientTypeObj } from "@/utils/options"
|
||||
import { clientTypeObj } from "@/utils/options";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
@ -256,7 +258,7 @@ export default {
|
||||
liveMapChart: null,
|
||||
timer: null,
|
||||
detail: {},
|
||||
allData:{}
|
||||
allData: {}
|
||||
};
|
||||
},
|
||||
async mounted() {
|
||||
@ -270,12 +272,12 @@ export default {
|
||||
// } else {
|
||||
// // 页面已打开，可以弹窗提示用户
|
||||
// alert('该页面已在浏览器中打开！');
|
||||
|
||||
|
||||
// window.close(); // 可选：关闭当前页面
|
||||
// }
|
||||
this.videoId = this.$route.query.videoId;
|
||||
let ret = await this.getDetail()
|
||||
if(!ret)return
|
||||
const ret = await this.getDetail();
|
||||
if (!ret) return;
|
||||
window.addEventListener("resize", this.resizeFn);
|
||||
this.initData();
|
||||
//观众来源写死
|
||||
@ -324,22 +326,26 @@ export default {
|
||||
},
|
||||
methods: {
|
||||
async getDetail() {
|
||||
let res = await infoGet({ id: this.videoId })
|
||||
if(res && res.code === 0) {
|
||||
this.detail = res.data
|
||||
if(this.detail.advisorBasic.deptName !== this.$store.state.user.user.user.deptName && this.$store.state.user.user.user.deptId !== '1') {
|
||||
const res = await infoGet({ id: this.videoId });
|
||||
if (res && res.code === 0) {
|
||||
this.detail = res.data;
|
||||
if (
|
||||
this.detail.advisorBasic.deptName !==
|
||||
this.$store.state.user.user.user.deptName &&
|
||||
this.$store.state.user.user.user.deptId !== "1"
|
||||
) {
|
||||
// 不是一个部门的不让查看 总部的可以查看所有
|
||||
this.$alert('暂无查看权限！', '', {
|
||||
confirmButtonText: '确定',
|
||||
this.$alert("暂无查看权限！", "", {
|
||||
confirmButtonText: "确定",
|
||||
callback: action => {
|
||||
window.close()
|
||||
window.close();
|
||||
}
|
||||
});
|
||||
return false
|
||||
return false;
|
||||
}
|
||||
return true
|
||||
return true;
|
||||
}
|
||||
return false
|
||||
return false;
|
||||
},
|
||||
resizeFn() {
|
||||
this.$nextTick(() => {
|
||||
@ -351,8 +357,8 @@ export default {
|
||||
});
|
||||
},
|
||||
async initData() {
|
||||
let { code, data } = await liveScreen({ videoId: this.videoId });
|
||||
if(code == 0 && data){
|
||||
const { code, data } = await liveScreen({ videoId: this.videoId });
|
||||
if (code == 0 && data) {
|
||||
this.allData = data;
|
||||
this.setUserShare();
|
||||
// this.setUserSource();
|
||||
@ -361,8 +367,6 @@ export default {
|
||||
this.setOnlinePeople();
|
||||
this.setVolumeTransaction();
|
||||
this.setLiveMap();
|
||||
}else{
|
||||
|
||||
}
|
||||
},
|
||||
// 用户占比
|
||||
@ -410,13 +414,15 @@ export default {
|
||||
this.userSourceChart = echarts.init(this.$refs["userSourceRef"]);
|
||||
}
|
||||
const config = userSourceConfig;
|
||||
const { code, data } = await queryUserClientType({videoId: this.$route.query.videoId})
|
||||
const { code, data } = await queryUserClientType({
|
||||
videoId: this.$route.query.videoId
|
||||
});
|
||||
|
||||
if (code == 0 && data) {
|
||||
config.title.show = false;
|
||||
let allNum = 0
|
||||
let allNum = 0;
|
||||
const seriesData = data.map(item => {
|
||||
allNum+=item.count
|
||||
allNum += item.count;
|
||||
return {
|
||||
value: item.count,
|
||||
name: clientTypeObj[item.clientType]
|
||||
@ -435,7 +441,7 @@ export default {
|
||||
"",
|
||||
"…",
|
||||
{}
|
||||
)}}{v|${parseFloat(v/allNum * 100).toFixed(2)}%}`;
|
||||
)}}{v|${parseFloat((v / allNum) * 100).toFixed(2)}%}`;
|
||||
};
|
||||
config.series[0].data = seriesData;
|
||||
} else {
|
||||
@ -481,7 +487,9 @@ export default {
|
||||
// let { code, data } = await nowTrend({ videoId: this.videoId });
|
||||
if (this.allData.videoLiveTrendVOS) {
|
||||
config.title.show = false;
|
||||
const xData = this.allData.videoLiveTrendVOS.map(item => item.time.split(" ")[1]);
|
||||
const xData = this.allData.videoLiveTrendVOS.map(
|
||||
item => item.time.split(" ")[1]
|
||||
);
|
||||
config.xAxis.axisLabel.interval = parseInt(
|
||||
xData.length / (xData.length % 2 == 0 ? 2 : 3)
|
||||
);
|
||||
@ -498,9 +506,15 @@ export default {
|
||||
}
|
||||
};
|
||||
});
|
||||
config.series[0].data = this.allData.videoLiveTrendVOS.map(item => item.onlineNum);
|
||||
config.series[1].data = this.allData.videoLiveTrendVOS.map(item => item.attendNum);
|
||||
config.series[2].data = this.allData.videoLiveTrendVOS.map(item => item.leaveNum);
|
||||
config.series[0].data = this.allData.videoLiveTrendVOS.map(
|
||||
item => item.onlineNum
|
||||
);
|
||||
config.series[1].data = this.allData.videoLiveTrendVOS.map(
|
||||
item => item.attendNum
|
||||
);
|
||||
config.series[2].data = this.allData.videoLiveTrendVOS.map(
|
||||
item => item.leaveNum
|
||||
);
|
||||
} else {
|
||||
config.title.show = true;
|
||||
config.series[0].data = [];
|
||||
@ -521,11 +535,19 @@ export default {
|
||||
// const { code, data } = await productSaleLine({
|
||||
// videoId: this.videoId
|
||||
// });
|
||||
this.allData.videoProductSaleLineVOS = this.allData.videoProductSaleLineVOS.sort((x,y)=>{return (new Date(x.time).getTime()-new Date(y.time).getTime())})
|
||||
this.allData.videoProductSaleLineVOS = this.allData.videoProductSaleLineVOS.sort(
|
||||
(x, y) => {
|
||||
return new Date(x.time).getTime() - new Date(y.time).getTime();
|
||||
}
|
||||
);
|
||||
if (this.allData.videoProductSaleLineVOS) {
|
||||
const xData = this.allData.videoProductSaleLineVOS.map(item => item.time);
|
||||
const xData = this.allData.videoProductSaleLineVOS.map(
|
||||
item => item.time
|
||||
);
|
||||
config.title.show = false;
|
||||
config.series[0].data = this.allData.videoProductSaleLineVOS.map(item => item.amount / 100);
|
||||
config.series[0].data = this.allData.videoProductSaleLineVOS.map(
|
||||
item => item.amount / 100
|
||||
);
|
||||
config.xAxis.data = xData.map((item, index) => {
|
||||
return {
|
||||
value: item,
|
||||
@ -560,10 +582,12 @@ export default {
|
||||
|
||||
// const { code, data } = await userProvince({ videoId: this.videoId });
|
||||
if (this.allData.videoUserProvinceVOS) {
|
||||
this.userProvinceData = this.allData.videoUserProvinceVOS.sort((x,y)=>y.num-x.num);
|
||||
this.userProvinceData = this.allData.videoUserProvinceVOS.sort(
|
||||
(x, y) => y.num - x.num
|
||||
);
|
||||
const seriesData = this.allData.videoUserProvinceVOS.map(item => {
|
||||
return {
|
||||
name: item.provinceName.replace(/市|省/,''),
|
||||
name: item.provinceName.replace(/市|省/, ""),
|
||||
value: item.num,
|
||||
proportion: item.proportion
|
||||
};
|
||||
@ -601,7 +625,7 @@ export default {
|
||||
beforeDestroy() {
|
||||
window.removeEventListener("resize", this.resizeFn);
|
||||
if (this.timer) clearInterval(this.timer);
|
||||
},
|
||||
}
|
||||
// destroyed() { //进行监听销毁
|
||||
// localStorage.removeItem('pageOpened'); // 确保标志位被清除
|
||||
// },
|
||||
@ -650,7 +674,8 @@ h1 {
|
||||
padding: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background: url("~@/assets/images/largeScreen/ls-bg.png") no-repeat;
|
||||
// background: url("~@/assets/images/largeScreen/ls-bg.png") no-repeat;
|
||||
background: #101d4a;
|
||||
background-size: 100% 100%;
|
||||
overflow: hidden;
|
||||
.title {
|
||||
@ -672,7 +697,7 @@ h1 {
|
||||
// overflow: hidden;
|
||||
width: 100%;
|
||||
height: 55px;
|
||||
span{
|
||||
span {
|
||||
width: 27%;
|
||||
text-align: center;
|
||||
word-break: break-all;
|
||||
@ -682,11 +707,10 @@ h1 {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
}
|
||||
.content {
|
||||
display: flex;
|
||||
padding: 20px 80px 0 80px;
|
||||
padding: 20px 20px 0 20px;
|
||||
height: 92%;
|
||||
margin-top: -2%;
|
||||
.left,
|
||||
@ -798,7 +822,7 @@ h1 {
|
||||
> div:last-of-type {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
> div:first-child{
|
||||
> div:first-child {
|
||||
width: 60px;
|
||||
flex: none;
|
||||
}
|
||||
|
||||
@ -265,7 +265,7 @@
|
||||
"
|
||||
type="text"
|
||||
@click="toDateDetail(scope.row)"
|
||||
>数据大屏</el-button
|
||||
>实时大屏</el-button
|
||||
>
|
||||
<el-button
|
||||
v-if="[1, 4].includes(scope.row.status)"
|
||||
|
||||
@ -265,7 +265,7 @@
|
||||
"
|
||||
type="text"
|
||||
@click="toDateDetail(scope.row)"
|
||||
>数据大屏</el-button
|
||||
>实时大屏</el-button
|
||||
>
|
||||
<el-button
|
||||
v-if="[1, 4].includes(scope.row.status)"
|
||||
|
||||
@ -41,6 +41,403 @@
|
||||
/>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div ref="videoBox" class="video-box">
|
||||
<div class="video-box-top">
|
||||
<!-- :class="{ 'sticky': isSticky }" :style="{'width': isSticky ? `${divWidth}px`:'100%'}" -->
|
||||
<div
|
||||
v-if="
|
||||
(renderPlayer && renderStatus == 'living-player') ||
|
||||
renderStatus == 'back-player'
|
||||
"
|
||||
ref="videoPlayer"
|
||||
class="w-full h-full"
|
||||
/>
|
||||
<div v-else-if="renderStatus == 'before-img' || pullBuffer">
|
||||
<img style="height:600px;width:100%;" :src="beforeImgUrl" />
|
||||
</div>
|
||||
<div
|
||||
v-else-if="renderStatus == 'suspend-player' || !renderStatus"
|
||||
class="suspend"
|
||||
>
|
||||
<img src="@/assets/logo/wait.png" class="user-avatar" />
|
||||
<p>主播离开一会儿，请耐心等待~</p>
|
||||
</div>
|
||||
<div v-if="![5].includes(type)" class="video-box-bottom">
|
||||
<el-tabs v-model="activeName" type="card" @tab-click="handleClick">
|
||||
<!-- <el-tab-pane label="聊天" name="1"></el-tab-pane>
|
||||
<el-tab-pane v-if="detail.liveStatus !== 4 " label="互动设置" name="2"></el-tab-pane> -->
|
||||
<el-tab-pane
|
||||
v-if="[1, 2, 4].includes(type)"
|
||||
label="购物车"
|
||||
name="3"
|
||||
/>
|
||||
<!-- <el-tab-pane
|
||||
v-if="[1, 2, 4].includes(type)"
|
||||
label="发优惠券"
|
||||
name="4"
|
||||
/> -->
|
||||
<el-tab-pane
|
||||
v-if="[1, 2, 4].includes(type)"
|
||||
label="问卷"
|
||||
name="5"
|
||||
/>
|
||||
<!-- <el-tab-pane
|
||||
v-if="[1, 2, 4].includes(type)"
|
||||
label="营销二维码"
|
||||
name="6"
|
||||
/> -->
|
||||
<!-- <el-tab-pane
|
||||
v-if="[1, 2, 4].includes(type) && detail.playType === 1"
|
||||
label="转播设置"
|
||||
name="7"
|
||||
/> -->
|
||||
<el-tab-pane
|
||||
v-if="[1, 2, 4].includes(type)"
|
||||
label="嘉宾设置"
|
||||
name="8"
|
||||
/>
|
||||
</el-tabs>
|
||||
|
||||
<!-- 互动设置 -->
|
||||
<div v-if="activeName === '2'" class="interaction-box">
|
||||
<div class="interaction-box_switch">
|
||||
开放观众发言
|
||||
<el-switch
|
||||
v-model="isSpeak"
|
||||
:inactive-value="2"
|
||||
:active-value="1"
|
||||
@change="setUp()"
|
||||
/>
|
||||
<el-checkbox
|
||||
v-model="isSendMessage"
|
||||
:true-label="1"
|
||||
:false-label="2"
|
||||
>在聊天框中发送禁言/开启发言通知</el-checkbox
|
||||
>
|
||||
</div>
|
||||
<div class="interaction-box_switch">
|
||||
开启审核
|
||||
<el-switch
|
||||
v-model="messageAudit"
|
||||
:inactive-value="2"
|
||||
:active-value="1"
|
||||
@change="setUpTwo()"
|
||||
/>
|
||||
</div>
|
||||
<!-- <el-button type="success" @click="" :disabled="isSpeak === detail.isSpeak && messageAudit === detail.messageAudit">保存设置</el-button> -->
|
||||
</div>
|
||||
<!-- 购物车 -->
|
||||
<div v-if="activeName === '3'" class="shopping-box">
|
||||
<div class="shop-header">
|
||||
<p>
|
||||
产品列表 （说明：产品列表中仅展示申请上架直播时{{
|
||||
settingToC ? "配置" : "选择"
|
||||
}}的产品）
|
||||
</p>
|
||||
<div v-if="[1, 2, 4].includes(type)">
|
||||
<el-button
|
||||
type="success"
|
||||
size="mini"
|
||||
@click="cancelPushProduct"
|
||||
>取消推送产品</el-button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<el-table
|
||||
key="cartVOList"
|
||||
:data="detail.cartVOList"
|
||||
border
|
||||
style="width: 100%"
|
||||
>
|
||||
<el-table-column
|
||||
prop="productType"
|
||||
label="产品类型"
|
||||
width="180"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
{{ productTypeList[scope.row.productType] }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="productName"
|
||||
label="产品名称"
|
||||
width="180"
|
||||
/>
|
||||
<el-table-column prop="address" label="投顾名称">
|
||||
<template slot-scope="scope">
|
||||
{{
|
||||
scope.row.advisorBasic
|
||||
? scope.row.advisorBasic.showName
|
||||
: ""
|
||||
}}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<!-- <el-table-column prop="subCount" label="产品订阅数">
|
||||
</el-table-column> -->
|
||||
<el-table-column prop="saleLimit" label="可销售数量">
|
||||
<template slot-scope="scope">
|
||||
{{
|
||||
scope.row.saleLimit === null ? "" : scope.row.saleLimit
|
||||
}}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
v-if="[1, 2, 4].includes(type)"
|
||||
label="操作"
|
||||
fixed="right"
|
||||
width="160px"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
v-if="scope.row.status === 1"
|
||||
type="text"
|
||||
@click="updateStatus(scope.row, 4)"
|
||||
>下架产品</el-button
|
||||
>
|
||||
<el-button
|
||||
v-if="scope.row.status === 1 && !settingToC"
|
||||
type="text"
|
||||
@click="updateStatus(scope.row, 9)"
|
||||
>修改可销售数量</el-button
|
||||
>
|
||||
<el-button
|
||||
v-if="scope.row.status === 1 && !scope.row.weight"
|
||||
type="text"
|
||||
@click="updateStatus(scope.row, 10)"
|
||||
>推荐</el-button
|
||||
>
|
||||
<el-button
|
||||
v-if="scope.row.status === 1 && scope.row.weight"
|
||||
type="text"
|
||||
@click="updateStatus(scope.row, 11)"
|
||||
>取消推荐</el-button
|
||||
>
|
||||
<el-button
|
||||
v-if="scope.row.status === 2"
|
||||
type="text"
|
||||
@click="updateStatus(scope.row, 3)"
|
||||
>上架产品</el-button
|
||||
>
|
||||
<el-button
|
||||
v-if="scope.row.coverImgUrl"
|
||||
type="text"
|
||||
@click="setCartPush(scope.row)"
|
||||
>推送产品</el-button
|
||||
>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<p v-if="[1, 2, 4].includes(type)" style="text-align: right;">
|
||||
（此处的上下架产品仅控制是否在购物车列表展示）
|
||||
</p>
|
||||
</div>
|
||||
<!-- 发优惠券 && detail.liveStatus !== 4 -->
|
||||
<div v-if="activeName === '4'" class="preferential-box">
|
||||
<el-button
|
||||
v-if="
|
||||
[1, 2, 4].includes(type) &&
|
||||
detail.liveStatus !== 4 &&
|
||||
detail.playType === 1
|
||||
"
|
||||
type="primary"
|
||||
@click="toOpenCoupon()"
|
||||
>添加优惠券</el-button
|
||||
>
|
||||
<createCoupon ref="coupon" @child-event="queryListPreferential" />
|
||||
<div class="table-box">
|
||||
<p>发放记录</p>
|
||||
<el-table
|
||||
key="preferentialData"
|
||||
:data="preferentialData"
|
||||
border
|
||||
style="width: 100%"
|
||||
>
|
||||
<el-table-column type="index" label="序号" width="100" />
|
||||
<el-table-column
|
||||
prop="couponId"
|
||||
label="优惠券ID"
|
||||
width="180"
|
||||
/>
|
||||
<el-table-column prop="name" label="优惠券名称" />
|
||||
<el-table-column prop="couponType" label="优惠券类型">
|
||||
<template slot-scope="scope">
|
||||
{{ couponTypeList[scope.row.couponType] }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<!-- <el-table-column prop="uTime" label="用券时间">
|
||||
</el-table-column> -->
|
||||
<el-table-column label="领取要求">
|
||||
<template slot-scope="scope">
|
||||
{{ receiveRequirementList[scope.row.receiveRequirement] }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="sendTotalNumber" label="发放数量" />
|
||||
<el-table-column prop="sendGottenNumber" label="已领取数量" />
|
||||
<el-table-column prop="sendUsedNumber" label="已用数量" />
|
||||
<el-table-column prop="cTime" label="发放时间" />
|
||||
<el-table-column prop="state" label="状态">
|
||||
<template slot-scope="scope">
|
||||
{{ stateList[scope.row.state] }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column
|
||||
v-if="detail.liveStatus !== 4"
|
||||
label="操作"
|
||||
fixed="right"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
v-if="[1].includes(scope.row.state)"
|
||||
type="text"
|
||||
@click="sendcoupon(scope.row, 1)"
|
||||
>发放</el-button
|
||||
>
|
||||
<el-button
|
||||
v-if="[1].includes(scope.row.state)"
|
||||
type="text"
|
||||
@click="sendcoupon(scope.row, 2)"
|
||||
>删除</el-button
|
||||
>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<!--分页组件-->
|
||||
<el-pagination
|
||||
:total="queryParamsPreferential.total"
|
||||
:current-page="queryParamsPreferential.current"
|
||||
:page-size="queryParamsPreferential.size"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
@size-change="handleSizeChangePreferential"
|
||||
@current-change="handleCurrentChangePreferential"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 问卷 -->
|
||||
<div v-if="activeName === '5'" class="questionnaire-box">
|
||||
<el-button
|
||||
v-if="detail.liveStatus !== 4 && detail.playType === 1"
|
||||
type="primary"
|
||||
style="margin-bottom:50px;"
|
||||
@click="createQuestionnaire"
|
||||
>创建问卷</el-button
|
||||
>
|
||||
<el-table
|
||||
key="questionnaireList"
|
||||
:data="questionnaireList"
|
||||
fit
|
||||
highlight-current-row
|
||||
border
|
||||
style="width: 100%;"
|
||||
:header-cell-style="{ 'text-align': 'center' }"
|
||||
:cell-style="{ 'text-align': 'center' }"
|
||||
>
|
||||
<el-table-column type="index" label="序号" width="100" />
|
||||
<el-table-column prop="title" label="问卷名称" width="200">
|
||||
<template slot-scope="scope">
|
||||
<span
|
||||
class="button-text"
|
||||
type="text"
|
||||
@click="openView(scope.row)"
|
||||
>{{ scope.row.title }}</span
|
||||
>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="createTime" label="创建时间" width="200">
|
||||
<template slot-scope="scope">
|
||||
{{ scope.row.createTime }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="startTime"
|
||||
label="发起时间"
|
||||
width="200"
|
||||
/>
|
||||
<el-table-column prop="writeNum" label="填写人数" width="100" />
|
||||
<el-table-column prop="status" label="状态" width="100">
|
||||
<template slot-scope="scope">
|
||||
{{ questionnaireStatusList[scope.row.status] }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" fixed="right">
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
v-if="[1].includes(scope.row.status) && operate !== 1"
|
||||
type="text"
|
||||
@click="question(scope.row, -1)"
|
||||
>发起问卷</el-button
|
||||
>
|
||||
<el-button
|
||||
v-if="[1].includes(scope.row.status)"
|
||||
type="text"
|
||||
@click="updateQuestion(scope.row, 1)"
|
||||
>编辑</el-button
|
||||
>
|
||||
<el-button
|
||||
v-if="[1, 2].includes(scope.row.status)"
|
||||
type="text"
|
||||
@click="updateQuestion(scope.row, 2)"
|
||||
>复制</el-button
|
||||
>
|
||||
<el-button
|
||||
v-if="[1, 2, 3].includes(scope.row.status)"
|
||||
type="text"
|
||||
@click="question(scope.row, -2)"
|
||||
>删除</el-button
|
||||
>
|
||||
<el-button
|
||||
v-if="[2].includes(scope.row.status) && operate !== 1"
|
||||
type="text"
|
||||
@click="question(scope.row, -3)"
|
||||
>重发至互动区</el-button
|
||||
>
|
||||
<el-button
|
||||
v-if="
|
||||
[2, 3].includes(scope.row.status) && scope.row.writeNum
|
||||
"
|
||||
type="text"
|
||||
@click="toExport(scope.row)"
|
||||
>导出数据</el-button
|
||||
>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<!--分页组件-->
|
||||
<el-pagination
|
||||
style="margin-top:10px;"
|
||||
:total="queryParamsQuestionnaire.total"
|
||||
:current-page="queryParamsQuestionnaire.current"
|
||||
:page-size="queryParamsQuestionnaire.size"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
@size-change="handleSizeChangeQuestionnaire"
|
||||
@current-change="handleCurrentChangeQuestionnaire"
|
||||
/>
|
||||
</div>
|
||||
<div v-if="activeName === '6'">
|
||||
<div class="marketing-code">
|
||||
<label>展示营销二维码</label>
|
||||
<el-switch
|
||||
v-model="detail.openQw"
|
||||
:active-value="1"
|
||||
:inactive-value="2"
|
||||
@change="changeOpenQw"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="activeName === '7'">
|
||||
<rebroadcast
|
||||
:push-list="detail.pushList"
|
||||
:live-status="detail.liveStatus"
|
||||
:type="type"
|
||||
@addPush="addPush"
|
||||
/>
|
||||
</div>
|
||||
<div v-if="activeName === '8'">
|
||||
<guestList :live-status="detail.liveStatus" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="audience">
|
||||
<div class="audience-border">
|
||||
<div class="box-tab">
|
||||
@ -502,429 +899,6 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div ref="videoBox" class="video-box">
|
||||
<div class="video-box-top">
|
||||
<!-- :class="{ 'sticky': isSticky }" :style="{'width': isSticky ? `${divWidth}px`:'100%'}" -->
|
||||
<div
|
||||
v-if="
|
||||
(renderPlayer && renderStatus == 'living-player') ||
|
||||
renderStatus == 'back-player'
|
||||
"
|
||||
ref="videoPlayer"
|
||||
class="w-full h-full"
|
||||
/>
|
||||
<div v-else-if="renderStatus == 'before-img' || pullBuffer">
|
||||
<img style="height:600px;width:100%;" :src="beforeImgUrl" />
|
||||
</div>
|
||||
<div
|
||||
v-else-if="renderStatus == 'suspend-player' || !renderStatus"
|
||||
class="suspend"
|
||||
>
|
||||
<img src="@/assets/logo/wait.png" class="user-avatar" />
|
||||
<p>主播离开一会儿，请耐心等待~</p>
|
||||
</div>
|
||||
<div v-if="![5].includes(type)" class="video-box-bottom">
|
||||
<el-tabs v-model="activeName" type="card" @tab-click="handleClick">
|
||||
<!-- <el-tab-pane label="聊天" name="1"></el-tab-pane>
|
||||
<el-tab-pane v-if="detail.liveStatus !== 4 " label="互动设置" name="2"></el-tab-pane> -->
|
||||
<el-tab-pane
|
||||
v-if="[1, 2, 4].includes(type)"
|
||||
label="购物车"
|
||||
name="3"
|
||||
/>
|
||||
<!-- <el-tab-pane
|
||||
v-if="[1, 2, 4].includes(type)"
|
||||
label="发优惠券"
|
||||
name="4"
|
||||
/> -->
|
||||
<el-tab-pane
|
||||
v-if="[1, 2, 4].includes(type)"
|
||||
label="问卷"
|
||||
name="5"
|
||||
/>
|
||||
<!-- <el-tab-pane
|
||||
v-if="[1, 2, 4].includes(type)"
|
||||
label="营销二维码"
|
||||
name="6"
|
||||
/> -->
|
||||
<!-- <el-tab-pane
|
||||
v-if="[1, 2, 4].includes(type) && detail.playType === 1"
|
||||
label="转播设置"
|
||||
name="7"
|
||||
/> -->
|
||||
<el-tab-pane
|
||||
v-if="[1, 2, 4].includes(type)"
|
||||
label="嘉宾设置"
|
||||
name="8"
|
||||
/>
|
||||
</el-tabs>
|
||||
|
||||
<!-- 互动设置 -->
|
||||
<div v-if="activeName === '2'" class="interaction-box">
|
||||
<div class="interaction-box_switch">
|
||||
开放观众发言
|
||||
<el-switch
|
||||
v-model="isSpeak"
|
||||
:inactive-value="2"
|
||||
:active-value="1"
|
||||
@change="setUp()"
|
||||
/>
|
||||
<el-checkbox
|
||||
v-model="isSendMessage"
|
||||
:true-label="1"
|
||||
:false-label="2"
|
||||
>在聊天框中发送禁言/开启发言通知</el-checkbox
|
||||
>
|
||||
</div>
|
||||
<div class="interaction-box_switch">
|
||||
开启审核
|
||||
<el-switch
|
||||
v-model="messageAudit"
|
||||
:inactive-value="2"
|
||||
:active-value="1"
|
||||
@change="setUpTwo()"
|
||||
/>
|
||||
</div>
|
||||
<!-- <el-button type="success" @click="" :disabled="isSpeak === detail.isSpeak && messageAudit === detail.messageAudit">保存设置</el-button> -->
|
||||
</div>
|
||||
<!-- 购物车 -->
|
||||
<div v-if="activeName === '3'" class="shopping-box">
|
||||
<div class="shop-header">
|
||||
<p>
|
||||
产品列表 （说明：产品列表中仅展示申请上架直播时{{
|
||||
settingToC ? "配置" : "选择"
|
||||
}}的产品）
|
||||
</p>
|
||||
<div v-if="[1, 2, 4].includes(type)">
|
||||
<el-button
|
||||
type="success"
|
||||
size="mini"
|
||||
@click="cancelPushProduct"
|
||||
>取消推送产品</el-button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<el-table
|
||||
key="cartVOList"
|
||||
:data="detail.cartVOList"
|
||||
border
|
||||
style="width: 100%"
|
||||
>
|
||||
<el-table-column
|
||||
prop="productType"
|
||||
label="产品类型"
|
||||
width="180"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
{{ productTypeList[scope.row.productType] }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="productName"
|
||||
label="产品名称"
|
||||
width="180"
|
||||
/>
|
||||
<el-table-column prop="address" label="投顾名称">
|
||||
<template slot-scope="scope">
|
||||
{{
|
||||
scope.row.advisorBasic
|
||||
? scope.row.advisorBasic.showName
|
||||
: ""
|
||||
}}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<!-- <el-table-column prop="subCount" label="产品订阅数">
|
||||
</el-table-column> -->
|
||||
<el-table-column prop="saleLimit" label="可销售数量">
|
||||
<template slot-scope="scope">
|
||||
{{
|
||||
scope.row.saleLimit === null ? "" : scope.row.saleLimit
|
||||
}}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
v-if="[1, 2, 4].includes(type)"
|
||||
label="操作"
|
||||
fixed="right"
|
||||
width="160px"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
v-if="scope.row.status === 1"
|
||||
type="text"
|
||||
@click="updateStatus(scope.row, 4)"
|
||||
>下架产品</el-button
|
||||
>
|
||||
<el-button
|
||||
v-if="scope.row.status === 1 && !settingToC"
|
||||
type="text"
|
||||
@click="updateStatus(scope.row, 9)"
|
||||
>修改可销售数量</el-button
|
||||
>
|
||||
<el-button
|
||||
v-if="scope.row.status === 1 && !scope.row.weight"
|
||||
type="text"
|
||||
@click="updateStatus(scope.row, 10)"
|
||||
>推荐</el-button
|
||||
>
|
||||
<el-button
|
||||
v-if="scope.row.status === 1 && scope.row.weight"
|
||||
type="text"
|
||||
@click="updateStatus(scope.row, 11)"
|
||||
>取消推荐</el-button
|
||||
>
|
||||
<el-button
|
||||
v-if="scope.row.status === 2"
|
||||
type="text"
|
||||
@click="updateStatus(scope.row, 3)"
|
||||
>上架产品</el-button
|
||||
>
|
||||
<el-button
|
||||
v-if="scope.row.coverImgUrl"
|
||||
type="text"
|
||||
@click="setCartPush(scope.row)"
|
||||
>推送产品</el-button
|
||||
>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<p v-if="[1, 2, 4].includes(type)" style="text-align: right;">
|
||||
（此处的上下架产品仅控制是否在购物车列表展示）
|
||||
</p>
|
||||
</div>
|
||||
<!-- 发优惠券 && detail.liveStatus !== 4 -->
|
||||
<div v-if="activeName === '4'" class="preferential-box">
|
||||
<el-button
|
||||
v-if="
|
||||
[1, 2, 4].includes(type) &&
|
||||
detail.liveStatus !== 4 &&
|
||||
detail.playType === 1
|
||||
"
|
||||
type="primary"
|
||||
@click="toOpenCoupon()"
|
||||
>添加优惠券</el-button
|
||||
>
|
||||
<createCoupon ref="coupon" @child-event="queryListPreferential" />
|
||||
<!-- <el-form v-if="detail.liveStatus !== 4" ref="form" :model="formPreferential">
|
||||
<el-form-item label="选择优惠券">
|
||||
<el-select v-model="formPreferential.couponId" filterable placeholder="请选择优惠券">
|
||||
<el-option
|
||||
v-for="(item,index) in couponList"
|
||||
:key="index"
|
||||
:label="item.name"
|
||||
:value="item.couponId"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="发放数量">
|
||||
<el-input-number v-model="formPreferential.sendTotalNumber" :step="1" :precision="0" :min="0" :max="100" label="请输入发放数量"></el-input-number>
|
||||
</el-form-item>
|
||||
<el-form-item label="领取要求">
|
||||
<el-radio-group v-model="formPreferential.receiveRequirement">
|
||||
<el-radio :label="0">无要求</el-radio>
|
||||
<el-radio :label="1">关注主播</el-radio>
|
||||
<el-radio :label="2">评论互动</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="onSubmit()">发 放</el-button>
|
||||
</el-form-item>
|
||||
</el-form> -->
|
||||
<div class="table-box">
|
||||
<p>发放记录</p>
|
||||
<el-table
|
||||
key="preferentialData"
|
||||
:data="preferentialData"
|
||||
border
|
||||
style="width: 100%"
|
||||
>
|
||||
<el-table-column type="index" label="序号" width="100" />
|
||||
<el-table-column
|
||||
prop="couponId"
|
||||
label="优惠券ID"
|
||||
width="180"
|
||||
/>
|
||||
<el-table-column prop="name" label="优惠券名称" />
|
||||
<el-table-column prop="couponType" label="优惠券类型">
|
||||
<template slot-scope="scope">
|
||||
{{ couponTypeList[scope.row.couponType] }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<!-- <el-table-column prop="uTime" label="用券时间">
|
||||
</el-table-column> -->
|
||||
<el-table-column label="领取要求">
|
||||
<template slot-scope="scope">
|
||||
{{ receiveRequirementList[scope.row.receiveRequirement] }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="sendTotalNumber" label="发放数量" />
|
||||
<el-table-column prop="sendGottenNumber" label="已领取数量" />
|
||||
<el-table-column prop="sendUsedNumber" label="已用数量" />
|
||||
<el-table-column prop="cTime" label="发放时间" />
|
||||
<el-table-column prop="state" label="状态">
|
||||
<template slot-scope="scope">
|
||||
{{ stateList[scope.row.state] }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column
|
||||
v-if="detail.liveStatus !== 4"
|
||||
label="操作"
|
||||
fixed="right"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
v-if="[1].includes(scope.row.state)"
|
||||
type="text"
|
||||
@click="sendcoupon(scope.row, 1)"
|
||||
>发放</el-button
|
||||
>
|
||||
<el-button
|
||||
v-if="[1].includes(scope.row.state)"
|
||||
type="text"
|
||||
@click="sendcoupon(scope.row, 2)"
|
||||
>删除</el-button
|
||||
>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<!--分页组件-->
|
||||
<el-pagination
|
||||
:total="queryParamsPreferential.total"
|
||||
:current-page="queryParamsPreferential.current"
|
||||
:page-size="queryParamsPreferential.size"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
@size-change="handleSizeChangePreferential"
|
||||
@current-change="handleCurrentChangePreferential"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 问卷 -->
|
||||
<div v-if="activeName === '5'" class="questionnaire-box">
|
||||
<el-button
|
||||
v-if="detail.liveStatus !== 4 && detail.playType === 1"
|
||||
type="primary"
|
||||
style="margin-bottom:50px;"
|
||||
@click="createQuestionnaire"
|
||||
>创建问卷</el-button
|
||||
>
|
||||
<el-table
|
||||
key="questionnaireList"
|
||||
:data="questionnaireList"
|
||||
fit
|
||||
highlight-current-row
|
||||
border
|
||||
style="width: 100%;"
|
||||
:header-cell-style="{ 'text-align': 'center' }"
|
||||
:cell-style="{ 'text-align': 'center' }"
|
||||
>
|
||||
<el-table-column type="index" label="序号" width="100" />
|
||||
<el-table-column prop="title" label="问卷名称" width="200">
|
||||
<template slot-scope="scope">
|
||||
<span
|
||||
class="button-text"
|
||||
type="text"
|
||||
@click="openView(scope.row)"
|
||||
>{{ scope.row.title }}</span
|
||||
>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="createTime" label="创建时间" width="200">
|
||||
<template slot-scope="scope">
|
||||
{{ scope.row.createTime }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="startTime"
|
||||
label="发起时间"
|
||||
width="200"
|
||||
/>
|
||||
<el-table-column prop="writeNum" label="填写人数" width="100" />
|
||||
<el-table-column prop="status" label="状态" width="100">
|
||||
<template slot-scope="scope">
|
||||
{{ questionnaireStatusList[scope.row.status] }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" fixed="right">
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
v-if="[1].includes(scope.row.status) && operate !== 1"
|
||||
type="text"
|
||||
@click="question(scope.row, -1)"
|
||||
>发起问卷</el-button
|
||||
>
|
||||
<el-button
|
||||
v-if="[1].includes(scope.row.status)"
|
||||
type="text"
|
||||
@click="updateQuestion(scope.row, 1)"
|
||||
>编辑</el-button
|
||||
>
|
||||
<el-button
|
||||
v-if="[1, 2].includes(scope.row.status)"
|
||||
type="text"
|
||||
@click="updateQuestion(scope.row, 2)"
|
||||
>复制</el-button
|
||||
>
|
||||
<el-button
|
||||
v-if="[1, 2, 3].includes(scope.row.status)"
|
||||
type="text"
|
||||
@click="question(scope.row, -2)"
|
||||
>删除</el-button
|
||||
>
|
||||
<el-button
|
||||
v-if="[2].includes(scope.row.status) && operate !== 1"
|
||||
type="text"
|
||||
@click="question(scope.row, -3)"
|
||||
>重发至互动区</el-button
|
||||
>
|
||||
<el-button
|
||||
v-if="
|
||||
[2, 3].includes(scope.row.status) && scope.row.writeNum
|
||||
"
|
||||
type="text"
|
||||
@click="toExport(scope.row)"
|
||||
>导出数据</el-button
|
||||
>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<!--分页组件-->
|
||||
<el-pagination
|
||||
style="margin-top:10px;"
|
||||
:total="queryParamsQuestionnaire.total"
|
||||
:current-page="queryParamsQuestionnaire.current"
|
||||
:page-size="queryParamsQuestionnaire.size"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
@size-change="handleSizeChangeQuestionnaire"
|
||||
@current-change="handleCurrentChangeQuestionnaire"
|
||||
/>
|
||||
</div>
|
||||
<div v-if="activeName === '6'">
|
||||
<div class="marketing-code">
|
||||
<label>展示营销二维码</label>
|
||||
<el-switch
|
||||
v-model="detail.openQw"
|
||||
:active-value="1"
|
||||
:inactive-value="2"
|
||||
@change="changeOpenQw"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="activeName === '7'">
|
||||
<rebroadcast
|
||||
:push-list="detail.pushList"
|
||||
:live-status="detail.liveStatus"
|
||||
:type="type"
|
||||
@addPush="addPush"
|
||||
/>
|
||||
</div>
|
||||
<div v-if="activeName === '8'">
|
||||
<guestList :live-status="detail.liveStatus" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 禁言弹窗 -->
|
||||
<el-dialog
|
||||
|
||||
@ -1276,21 +1276,21 @@ export default {
|
||||
}
|
||||
}
|
||||
.trapezoid1 {
|
||||
border-top: 100px solid #5583f7;
|
||||
border-top: 100px solid #5a8af6;
|
||||
border-left: 45px solid transparent;
|
||||
border-right: 45px solid transparent;
|
||||
width: 440px;
|
||||
line-height: 100px;
|
||||
}
|
||||
.trapezoid2 {
|
||||
border-top: 100px solid #8400ff;
|
||||
border-top: 100px solid #64cbba;
|
||||
border-left: 45px solid transparent;
|
||||
border-right: 45px solid transparent;
|
||||
width: 340px;
|
||||
line-height: 100px;
|
||||
}
|
||||
.trapezoid3 {
|
||||
border-top: 100px solid #35b63d;
|
||||
border-top: 100px solid #f5c277;
|
||||
border-left: 45px solid transparent;
|
||||
border-right: 45px solid transparent;
|
||||
width: 240px;
|
||||
|
||||
@ -263,7 +263,7 @@
|
||||
"
|
||||
type="text"
|
||||
@click="toDateDetail(scope.row)"
|
||||
>数据大屏</el-button
|
||||
>实时大屏</el-button
|
||||
>
|
||||
<el-button
|
||||
v-if="[5].includes(scope.row.status)"
|
||||
|
||||
@ -240,7 +240,7 @@
|
||||
"
|
||||
type="text"
|
||||
@click="toDateDetail(scope.row)"
|
||||
>数据大屏</el-button
|
||||
>实时大屏</el-button
|
||||
>
|
||||
<!-- <el-button v-if="[5].includes(scope.row.status)" type="text" @click="listing(scope.row)">重新上架</el-button> -->
|
||||
<!-- <el-button v-if="[3].includes(scope.row.status) && !scope.row.weight && user.roles[0] !== '运营'" @click="openRecommend(scope.row,1)"
|
||||
|
||||
@ -53,7 +53,7 @@
|
||||
format="yyyy 第 WW 周"
|
||||
placeholder="选择周"
|
||||
value-format="yyyy-MM-dd HH:mm:ss"
|
||||
:picker-options="{firstDayOfWeek: 1}"
|
||||
:picker-options="{ firstDayOfWeek: 1 }"
|
||||
>
|
||||
</el-date-picker>
|
||||
<el-date-picker
|
||||
@ -84,10 +84,14 @@
|
||||
:class="[optActive === item.key ? 'active' : '']"
|
||||
@click="setLineChart(item.key, index)"
|
||||
>
|
||||
<p v-if="item.key === 'finishReadRateMap'">{{ (item.num * 100).toFixed(2) }}% </p>
|
||||
<p v-else-if="item.key === 'orderAmountMap'">{{ (item.num / 100).toFixed(2) }}元 </p>
|
||||
<p v-if="item.key === 'finishReadRateMap'">
|
||||
{{ (item.num * 100).toFixed(2) }}%
|
||||
</p>
|
||||
<p v-else-if="item.key === 'orderAmountMap'">
|
||||
{{ (item.num / 100).toFixed(2) }}元
|
||||
</p>
|
||||
<p v-else-if="item.unit === 's'">{{ formatDuration(item.num) }}</p>
|
||||
<p v-else>{{ item.num }} </p>
|
||||
<p v-else>{{ item.num }}</p>
|
||||
<h5>{{ item.label }}</h5>
|
||||
</li>
|
||||
</ul>
|
||||
@ -101,7 +105,7 @@
|
||||
<div class="data-chart">
|
||||
<div class="data-item">
|
||||
<h3>累计观看直播用户</h3>
|
||||
<p>{{ funnelDataObj.totalReadUserCount || 0 }}</p>
|
||||
<p>{{ funnelDataObj.totalReadUserCount || 0 }}</p>
|
||||
<div class="trapezoid-wrap trapezoid-wrap1">
|
||||
<div class="trapezoid trapezoid1"></div>
|
||||
<span>直播间用户</span>
|
||||
@ -109,7 +113,7 @@
|
||||
</div>
|
||||
<div class="data-item">
|
||||
<h3>累计点击产品用户</h3>
|
||||
<p>{{ funnelDataObj.totalReadCartUserCount || 0 }}</p>
|
||||
<p>{{ funnelDataObj.totalReadCartUserCount || 0 }}</p>
|
||||
<div class="trapezoid-wrap trapezoid-wrap2">
|
||||
<div class="trapezoid trapezoid2"></div>
|
||||
<span>访问产品</span>
|
||||
@ -126,7 +130,13 @@
|
||||
</div>
|
||||
<div>
|
||||
<h3>订单金额</h3>
|
||||
<p>{{funnelDataObj.orderAmount ? (funnelDataObj.orderAmount / 100).toFixed(2) :'0.00' }}</p>
|
||||
<p>
|
||||
{{
|
||||
funnelDataObj.orderAmount
|
||||
? (funnelDataObj.orderAmount / 100).toFixed(2)
|
||||
: "0.00"
|
||||
}}
|
||||
</p>
|
||||
</div>
|
||||
<!-- <div>
|
||||
<h3>提佣订单数</h3>
|
||||
@ -144,11 +154,17 @@
|
||||
</div>
|
||||
<div>
|
||||
<h3>成交订单数</h3>
|
||||
<p>{{ funnelDataObj.paidOrderCount || 0 }}</p>
|
||||
<p>{{ funnelDataObj.paidOrderCount || 0 }}</p>
|
||||
</div>
|
||||
<div>
|
||||
<h3>成交金额</h3>
|
||||
<p>{{ funnelDataObj.paidAmount ? (funnelDataObj.paidAmount/ 100).toFixed(2) : '0.00'}}</p>
|
||||
<p>
|
||||
{{
|
||||
funnelDataObj.paidAmount
|
||||
? (funnelDataObj.paidAmount / 100).toFixed(2)
|
||||
: "0.00"
|
||||
}}
|
||||
</p>
|
||||
</div>
|
||||
<!-- <div>
|
||||
<h3>提佣签约订单数</h3>
|
||||
@ -173,13 +189,10 @@
|
||||
:start-time="startTime1"
|
||||
:rank-type="1"
|
||||
:rankingType="rankingType"
|
||||
:timeType1 = "timeType1"
|
||||
:timeType1="timeType1"
|
||||
/>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane
|
||||
key="2"
|
||||
label="观看时长榜单"
|
||||
name="2"
|
||||
<el-tab-pane key="2" label="观看时长榜单" name="2"
|
||||
><DataTable
|
||||
v-if="activeName === '2'"
|
||||
key="2"
|
||||
@ -188,12 +201,9 @@
|
||||
:start-time="startTime1"
|
||||
:rank-type="2"
|
||||
:rankingType="rankingType"
|
||||
:timeType1 = "timeType1"
|
||||
:timeType1="timeType1"
|
||||
/></el-tab-pane>
|
||||
<el-tab-pane
|
||||
key="3"
|
||||
label="带货订单数榜单"
|
||||
name="3"
|
||||
<el-tab-pane key="3" label="带货订单数榜单" name="3"
|
||||
><DataTable
|
||||
v-if="activeName === '3'"
|
||||
key="3"
|
||||
@ -202,12 +212,9 @@
|
||||
:start-time="startTime1"
|
||||
:rank-type="3"
|
||||
:rankingType="rankingType"
|
||||
:timeType1 = "timeType1"
|
||||
:timeType1="timeType1"
|
||||
/></el-tab-pane>
|
||||
<el-tab-pane
|
||||
key="4"
|
||||
label="带货订单金额榜单"
|
||||
name="4"
|
||||
<el-tab-pane key="4" label="带货订单金额榜单" name="4"
|
||||
><DataTable
|
||||
v-if="activeName === '4'"
|
||||
key="4"
|
||||
@ -216,7 +223,7 @@
|
||||
:start-time="startTime1"
|
||||
:rank-type="4"
|
||||
:rankingType="rankingType"
|
||||
:timeType1 = "timeType1"
|
||||
:timeType1="timeType1"
|
||||
/></el-tab-pane>
|
||||
</el-tabs>
|
||||
<el-form
|
||||
@ -238,7 +245,7 @@
|
||||
{ label: '年榜', id: 2 },
|
||||
{ label: '月', id: 3 },
|
||||
{ label: '周', id: 4 },
|
||||
{ label: '日', id: 5 },
|
||||
{ label: '日', id: 5 }
|
||||
]"
|
||||
:key="item.id"
|
||||
:label="item.label"
|
||||
@ -273,7 +280,7 @@
|
||||
placeholder="选择周"
|
||||
value-format="yyyy-MM-dd HH:mm:ss"
|
||||
style="width: 100px"
|
||||
:picker-options="{firstDayOfWeek: 1}"
|
||||
:picker-options="{ firstDayOfWeek: 1 }"
|
||||
>
|
||||
</el-date-picker>
|
||||
<el-date-picker
|
||||
@ -294,177 +301,177 @@
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import * as echarts from 'echarts'
|
||||
import dayjs from 'dayjs'
|
||||
import DataTable from './components/DataTable.vue'
|
||||
import { setLineOptions } from './config'
|
||||
import { tgList } from '@/api/adviser'
|
||||
import { liveFunnelStatistic, liveOperationStatistic } from '@/api/index'
|
||||
import { mapGetters } from 'vuex'
|
||||
import * as echarts from "echarts";
|
||||
import dayjs from "dayjs";
|
||||
import DataTable from "./components/DataTable.vue";
|
||||
import { setLineOptions } from "./config";
|
||||
import { tgList } from "@/api/adviser";
|
||||
import { liveFunnelStatistic, liveOperationStatistic } from "@/api/index";
|
||||
import { mapGetters } from "vuex";
|
||||
import "dayjs/locale/zh-cn";
|
||||
var weekday = require('dayjs/plugin/weekday')
|
||||
dayjs.extend(weekday)
|
||||
dayjs.locale('zh-cn')
|
||||
var weekday = require("dayjs/plugin/weekday");
|
||||
dayjs.extend(weekday);
|
||||
dayjs.locale("zh-cn");
|
||||
export default {
|
||||
components: { DataTable },
|
||||
activated() {},
|
||||
data() {
|
||||
return {
|
||||
tgId: '',
|
||||
tgId: "",
|
||||
tgList: [],
|
||||
timeType: 1,
|
||||
timeType1: 1,
|
||||
activeName: '1',
|
||||
startTime: '',
|
||||
startTime1: '',
|
||||
endTime: '',
|
||||
endTime1: '',
|
||||
rankingType: '', // 榜单类型
|
||||
time: '',
|
||||
time1: '',
|
||||
optActive: '',
|
||||
activeName: "1",
|
||||
startTime: "",
|
||||
startTime1: "",
|
||||
endTime: "",
|
||||
endTime1: "",
|
||||
rankingType: "", // 榜单类型
|
||||
time: "",
|
||||
time1: "",
|
||||
optActive: "",
|
||||
optArr: [
|
||||
{
|
||||
num: 0,
|
||||
label: '直播数',
|
||||
key: 'videoCountMap',
|
||||
unit: ''
|
||||
label: "直播数",
|
||||
key: "videoCountMap",
|
||||
unit: ""
|
||||
},
|
||||
{
|
||||
num: 0,
|
||||
label: '直播时长',
|
||||
key: 'videoHourMap',
|
||||
unit: 's'
|
||||
label: "直播时长",
|
||||
key: "videoHourMap",
|
||||
unit: "s"
|
||||
},
|
||||
{
|
||||
num: 0,
|
||||
label: '观看人次',
|
||||
key: 'readCountMap',
|
||||
unit: ''
|
||||
label: "观看人次",
|
||||
key: "readCountMap",
|
||||
unit: ""
|
||||
},
|
||||
{
|
||||
num: 0,
|
||||
label: '观看人数',
|
||||
key: 'readUserCountMap',
|
||||
unit: ''
|
||||
label: "观看人数",
|
||||
key: "readUserCountMap",
|
||||
unit: ""
|
||||
},
|
||||
{
|
||||
num: 0,
|
||||
label: '观看时长',
|
||||
key: 'readHoursMap',
|
||||
unit: 's'
|
||||
label: "观看时长",
|
||||
key: "readHoursMap",
|
||||
unit: "s"
|
||||
},
|
||||
{
|
||||
num: 0,
|
||||
label: '人均观看时长',
|
||||
key: 'avgReadHoursMap',
|
||||
unit: 's'
|
||||
label: "人均观看时长",
|
||||
key: "avgReadHoursMap",
|
||||
unit: "s"
|
||||
},
|
||||
{
|
||||
num: 0,
|
||||
label: '完播率',
|
||||
key: 'finishReadRateMap',
|
||||
unit: '%'
|
||||
label: "完播率",
|
||||
key: "finishReadRateMap",
|
||||
unit: "%"
|
||||
},
|
||||
{
|
||||
num: 0,
|
||||
label: '参与互动人数',
|
||||
key: 'joinUserCountMap',
|
||||
unit: ''
|
||||
label: "参与互动人数",
|
||||
key: "joinUserCountMap",
|
||||
unit: ""
|
||||
},
|
||||
{
|
||||
num: 0,
|
||||
label: '点击产品数',
|
||||
key: 'browseProCountMap',
|
||||
unit: ''
|
||||
label: "点击产品数",
|
||||
key: "browseProCountMap",
|
||||
unit: ""
|
||||
},
|
||||
{
|
||||
num: 0,
|
||||
label: '下单未支付数',
|
||||
key: 'orderButNotPayCountMap',
|
||||
unit: ''
|
||||
label: "下单未支付数",
|
||||
key: "orderButNotPayCountMap",
|
||||
unit: ""
|
||||
},
|
||||
{
|
||||
num: 0,
|
||||
label: '直播成交订单数',
|
||||
key: 'orderCountMap',
|
||||
unit: ''
|
||||
label: "直播成交订单数",
|
||||
key: "orderCountMap",
|
||||
unit: ""
|
||||
},
|
||||
{
|
||||
num: 0,
|
||||
label: '直播成交金额',
|
||||
key: 'orderAmountMap',
|
||||
unit: '分'
|
||||
label: "直播成交金额",
|
||||
key: "orderAmountMap",
|
||||
unit: "分"
|
||||
}
|
||||
],
|
||||
optDataObj: {},
|
||||
funnelDataObj: {}, // 漏斗数据
|
||||
lineChart: null
|
||||
}
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(['user'])
|
||||
...mapGetters(["user"])
|
||||
},
|
||||
watch: {
|
||||
timeType(value) {
|
||||
this.time = this.startTime = this.endTime = ''
|
||||
this.time = this.startTime = this.endTime = "";
|
||||
},
|
||||
time(value) {
|
||||
this.startTime = value
|
||||
if(value === null){
|
||||
return this.endTime1 = null
|
||||
this.startTime = value;
|
||||
if (value === null) {
|
||||
return (this.endTime1 = null);
|
||||
}
|
||||
switch (this.timeType) {
|
||||
case 1:
|
||||
this.startTime = dayjs(value)
|
||||
.format('YYYY-MM-DD HH:mm:ss')
|
||||
this.startTime = dayjs(value).format("YYYY-MM-DD HH:mm:ss");
|
||||
this.endTime = dayjs(value)
|
||||
.add(7, 'day')
|
||||
.format('YYYY-MM-DD HH:mm:ss')
|
||||
break
|
||||
.add(7, "day")
|
||||
.format("YYYY-MM-DD HH:mm:ss");
|
||||
break;
|
||||
case 2:
|
||||
this.endTime = dayjs(value)
|
||||
.add(1, 'month')
|
||||
.format('YYYY-MM-DD HH:mm:ss')
|
||||
break
|
||||
.add(1, "month")
|
||||
.format("YYYY-MM-DD HH:mm:ss");
|
||||
break;
|
||||
case 3:
|
||||
this.endTime = dayjs(value)
|
||||
.add(1, 'year')
|
||||
.format('YYYY-MM-DD HH:mm:ss')
|
||||
break
|
||||
.add(1, "year")
|
||||
.format("YYYY-MM-DD HH:mm:ss");
|
||||
break;
|
||||
default:
|
||||
break
|
||||
break;
|
||||
}
|
||||
},
|
||||
timeType1(value) {
|
||||
this.time1 = this.startTime1 = this.endTime1 = ''
|
||||
this.time1 = this.startTime1 = this.endTime1 = "";
|
||||
},
|
||||
time1(value) {
|
||||
this.startTime1 = value
|
||||
if(value === null || value === ''){
|
||||
return this.endTime1 = null
|
||||
this.startTime1 = value;
|
||||
if (value === null || value === "") {
|
||||
return (this.endTime1 = null);
|
||||
}
|
||||
if(this.startTime1 !== null){
|
||||
this.startTime1 = dayjs(this.startTime1).format('YYYY-MM-DD HH:mm:ss')
|
||||
if (this.startTime1 !== null) {
|
||||
this.startTime1 = dayjs(this.startTime1).format("YYYY-MM-DD HH:mm:ss");
|
||||
}
|
||||
if(this.timeType1 == 2){
|
||||
if (this.timeType1 == 2) {
|
||||
this.endTime1 = dayjs(value)
|
||||
.add(1, 'year')
|
||||
.format('YYYY-MM-DD HH:mm:ss')
|
||||
}else if(this.timeType1 == 3){
|
||||
.add(1, "year")
|
||||
.format("YYYY-MM-DD HH:mm:ss");
|
||||
} else if (this.timeType1 == 3) {
|
||||
this.endTime1 = dayjs(value)
|
||||
.add(1, 'month')
|
||||
.format('YYYY-MM-DD HH:mm:ss')
|
||||
}else if(this.timeType1 == 4){
|
||||
this.startTime1 = dayjs(value).subtract(1, 'day')
|
||||
.format('YYYY-MM-DD HH:mm:ss')
|
||||
this.endTime1 = dayjs(value)
|
||||
.add(6, 'day')
|
||||
.format('YYYY-MM-DD HH:mm:ss')
|
||||
}else if(this.timeType1 == 5){
|
||||
this.endTime1 = dayjs(value)
|
||||
.add(1, 'day')
|
||||
.format('YYYY-MM-DD HH:mm:ss')
|
||||
.add(1, "month")
|
||||
.format("YYYY-MM-DD HH:mm:ss");
|
||||
} else if (this.timeType1 == 4) {
|
||||
this.startTime1 = dayjs(value)
|
||||
.subtract(1, "day")
|
||||
.format("YYYY-MM-DD HH:mm:ss");
|
||||
this.endTime1 = dayjs(value)
|
||||
.add(6, "day")
|
||||
.format("YYYY-MM-DD HH:mm:ss");
|
||||
} else if (this.timeType1 == 5) {
|
||||
this.endTime1 = dayjs(value)
|
||||
.add(1, "day")
|
||||
.format("YYYY-MM-DD HH:mm:ss");
|
||||
}
|
||||
// switch (this.timeType1) {
|
||||
// case 2:
|
||||
@ -493,21 +500,21 @@ export default {
|
||||
// break
|
||||
// }
|
||||
},
|
||||
activeName(value){
|
||||
if(value){
|
||||
this.timeType1 = 1
|
||||
activeName(value) {
|
||||
if (value) {
|
||||
this.timeType1 = 1;
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.time = `${dayjs()
|
||||
.weekday(0)
|
||||
.format('YYYY-MM-DD')} 00:00:00`
|
||||
.format("YYYY-MM-DD")} 00:00:00`;
|
||||
},
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
this.onSubmit()
|
||||
})
|
||||
this.onSubmit();
|
||||
});
|
||||
},
|
||||
|
||||
methods: {
|
||||
@ -515,14 +522,14 @@ export default {
|
||||
const ret = await tgList({
|
||||
current: 1,
|
||||
name,
|
||||
showName: '',
|
||||
showName: "",
|
||||
size: 100000,
|
||||
staffNo: '',
|
||||
staffNo: "",
|
||||
status: 3,
|
||||
deptId:this.user.user.deptId
|
||||
})
|
||||
deptId: this.user.user.deptId
|
||||
});
|
||||
if (ret.code === 0) {
|
||||
this.tgList = ret.data.list
|
||||
this.tgList = ret.data.list;
|
||||
}
|
||||
},
|
||||
async getLiveOperationStatistic() {
|
||||
@ -531,97 +538,101 @@ export default {
|
||||
endTime: this.endTime,
|
||||
searchType: this.timeType ? this.timeType : 3,
|
||||
startTime: this.startTime,
|
||||
userType:3
|
||||
})
|
||||
userType: 3
|
||||
});
|
||||
if (ret.code === 0 && ret.data) {
|
||||
this.optDataObj = ret.data
|
||||
let readHoursMap = 0
|
||||
let readUserCountMap = 0
|
||||
this.optDataObj = ret.data;
|
||||
let readHoursMap = 0;
|
||||
let readUserCountMap = 0;
|
||||
this.optArr.forEach(item => {
|
||||
item.num = 0
|
||||
if(item.key === 'finishReadRateMap'){
|
||||
item.num = this.optDataObj.totalFinishRate
|
||||
} else if (item.key === 'avgReadHoursMap') {
|
||||
item.num = readUserCountMap ? readHoursMap/readUserCountMap : 0
|
||||
item.num = 0;
|
||||
if (item.key === "finishReadRateMap") {
|
||||
item.num = this.optDataObj.totalFinishRate;
|
||||
} else if (item.key === "avgReadHoursMap") {
|
||||
item.num = readUserCountMap ? readHoursMap / readUserCountMap : 0;
|
||||
} else {
|
||||
for (const key in this.optDataObj[item.key] || {}) {
|
||||
item.num += this.optDataObj[item.key][key]
|
||||
item.num += this.optDataObj[item.key][key];
|
||||
}
|
||||
}
|
||||
if(item.key === 'readHoursMap') {
|
||||
readHoursMap = item.num
|
||||
} else if (item.key === 'readUserCountMap') {
|
||||
readUserCountMap = item.num
|
||||
if (item.key === "readHoursMap") {
|
||||
readHoursMap = item.num;
|
||||
} else if (item.key === "readUserCountMap") {
|
||||
readUserCountMap = item.num;
|
||||
}
|
||||
})
|
||||
});
|
||||
|
||||
this.setLineChart('videoCountMap', 0)
|
||||
this.setLineChart("videoCountMap", 0);
|
||||
} else {
|
||||
this.lineChart && this.lineChart.clear()
|
||||
this.lineChart && this.lineChart.clear();
|
||||
this.optArr.forEach(item => {
|
||||
item.num = 0
|
||||
})
|
||||
item.num = 0;
|
||||
});
|
||||
}
|
||||
},
|
||||
async getLiveFunnelStatistic() {
|
||||
console.log(this.startTime1,this.endTime1)
|
||||
console.log(this.startTime1, this.endTime1);
|
||||
const data = {
|
||||
type: this.tgId ? 1 : 3,
|
||||
advisorId:this.tgId,
|
||||
startTime :this.startTime,
|
||||
advisorId: this.tgId,
|
||||
startTime: this.startTime,
|
||||
endTime: this.endTime,
|
||||
userType:3
|
||||
}
|
||||
const ret = await liveFunnelStatistic(data)
|
||||
userType: 3
|
||||
};
|
||||
const ret = await liveFunnelStatistic(data);
|
||||
if (ret.code === 0 && ret.data) {
|
||||
this.funnelDataObj = ret.data
|
||||
this.funnelDataObj = ret.data;
|
||||
}
|
||||
},
|
||||
setLineChart(key, index) {
|
||||
this.optActive = key
|
||||
this.lineChart = echarts.init(document.getElementById('line-chart'))
|
||||
const xData = []
|
||||
const seriesData = []
|
||||
this.optActive = key;
|
||||
this.lineChart = echarts.init(document.getElementById("line-chart"));
|
||||
const xData = [];
|
||||
const seriesData = [];
|
||||
for (const subKey in this.optDataObj[key]) {
|
||||
if(this.timeType === 3){
|
||||
xData.push(`${dayjs(subKey).format('MM')}月`)
|
||||
if (this.timeType === 3) {
|
||||
xData.push(`${dayjs(subKey).format("MM")}月`);
|
||||
} else {
|
||||
xData.push(`${dayjs(subKey).format('YYYY-MM-DD')}`)
|
||||
xData.push(`${dayjs(subKey).format("YYYY-MM-DD")}`);
|
||||
}
|
||||
seriesData.push(this.optDataObj[key][subKey])
|
||||
seriesData.push(this.optDataObj[key][subKey]);
|
||||
}
|
||||
this.lineChart.setOption(
|
||||
setLineOptions({ xData, seriesData, unit: this.optArr[index].unit })
|
||||
)
|
||||
);
|
||||
},
|
||||
onSubmit() {
|
||||
this.getTgList()
|
||||
if(!this.endTime || !this.startTime){
|
||||
this.startTime = "1999-01-01 00:00:00"
|
||||
this.endTime = dayjs().format('YYYY-MM-DD HH:mm:ss')
|
||||
this.getTgList();
|
||||
if (!this.endTime || !this.startTime) {
|
||||
this.startTime = "1999-01-01 00:00:00";
|
||||
this.endTime = dayjs().format("YYYY-MM-DD HH:mm:ss");
|
||||
}
|
||||
this.getLiveFunnelStatistic()
|
||||
this.getLiveOperationStatistic()
|
||||
this.getLiveFunnelStatistic();
|
||||
this.getLiveOperationStatistic();
|
||||
},
|
||||
onTableSubmit() {
|
||||
this.$nextTick(() => {
|
||||
this.$refs[`tableRef${this.activeName}`].pageChange(1,this.startTime1,this.endTime1)
|
||||
})
|
||||
this.$refs[`tableRef${this.activeName}`].pageChange(
|
||||
1,
|
||||
this.startTime1,
|
||||
this.endTime1
|
||||
);
|
||||
});
|
||||
},
|
||||
handleExport() {
|
||||
this.$nextTick(() => {
|
||||
this.$refs[`tableRef${this.activeName}`].handleExport()
|
||||
})
|
||||
this.$refs[`tableRef${this.activeName}`].handleExport();
|
||||
});
|
||||
},
|
||||
formatDuration(milliseconds) {
|
||||
var hours = Math.floor(milliseconds / 3600);
|
||||
var minutes = Math.floor((milliseconds % 3600) / 60);
|
||||
var secs = Math.floor(milliseconds % 60);
|
||||
|
||||
return hours + '时' + minutes + '分' + secs + '秒';
|
||||
return hours + "时" + minutes + "分" + secs + "秒";
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@ -756,21 +767,21 @@ export default {
|
||||
}
|
||||
}
|
||||
.trapezoid1 {
|
||||
border-top: 100px solid #5583f7;
|
||||
border-top: 100px solid #5a8af6;
|
||||
border-left: 45px solid transparent;
|
||||
border-right: 45px solid transparent;
|
||||
width: 440px;
|
||||
line-height: 100px;
|
||||
}
|
||||
.trapezoid2 {
|
||||
border-top: 100px solid #8400ff;
|
||||
border-top: 100px solid #64cbba;
|
||||
border-left: 45px solid transparent;
|
||||
border-right: 45px solid transparent;
|
||||
width: 340px;
|
||||
line-height: 100px;
|
||||
}
|
||||
.trapezoid3 {
|
||||
border-top: 100px solid #35b63d;
|
||||
border-top: 100px solid #f5c277;
|
||||
border-left: 45px solid transparent;
|
||||
border-right: 45px solid transparent;
|
||||
width: 240px;
|
||||
@ -785,9 +796,9 @@ export default {
|
||||
}
|
||||
}
|
||||
}
|
||||
.tabs-wrap{
|
||||
.tabs-wrap {
|
||||
position: relative;
|
||||
.el-form{
|
||||
.el-form {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
|
||||
@ -754,21 +754,21 @@ export default {
|
||||
}
|
||||
}
|
||||
.trapezoid1 {
|
||||
border-top: 100px solid #5583f7;
|
||||
border-top: 100px solid #5a8af6;
|
||||
border-left: 45px solid transparent;
|
||||
border-right: 45px solid transparent;
|
||||
width: 440px;
|
||||
line-height: 100px;
|
||||
}
|
||||
.trapezoid2 {
|
||||
border-top: 100px solid #8400ff;
|
||||
border-top: 100px solid #64cbba;
|
||||
border-left: 45px solid transparent;
|
||||
border-right: 45px solid transparent;
|
||||
width: 340px;
|
||||
line-height: 100px;
|
||||
}
|
||||
.trapezoid3 {
|
||||
border-top: 100px solid #35b63d;
|
||||
border-top: 100px solid #f5c277;
|
||||
border-left: 45px solid transparent;
|
||||
border-right: 45px solid transparent;
|
||||
width: 240px;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user