fix: 样式调整

This commit is contained in:
kaizheng(郑凯) 2025-02-27 20:10:10 +08:00
parent f0e0372298
commit df7ee15cce
11 changed files with 686 additions and 662 deletions

View File

@ -78,7 +78,8 @@
"vuex": "3.1.0", "vuex": "3.1.0",
"wangeditor": "^4.7.11", "wangeditor": "^4.7.11",
"webpack": "^4.47.0", "webpack": "^4.47.0",
"xlsx": "^0.14.1" "xlsx": "^0.14.1",
"postcss-pxtorem": "^5.1.1"
}, },
"devDependencies": { "devDependencies": {
"@babel/parser": "^7.7.4", "@babel/parser": "^7.7.4",

View File

@ -1,5 +1,19 @@
module.exports = { module.exports = {
plugins: { 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;
} }
} }
}
}
};

View File

@ -7,7 +7,9 @@
alt="" alt=""
/> />
</div> </div>
<h1 class="title"><span>{{ viewData.title }}</span></h1> <h1 class="title">
<span>{{ viewData.title }}</span>
</h1>
<div class="content"> <div class="content">
<div class="left"> <div class="left">
<div class="user-share"> <div class="user-share">
@ -228,7 +230,7 @@ import {
getLiveMapConfig, getLiveMapConfig,
showFields showFields
} from "./config"; } from "./config";
import { clientTypeObj } from "@/utils/options" import { clientTypeObj } from "@/utils/options";
export default { export default {
data() { data() {
return { return {
@ -256,7 +258,7 @@ export default {
liveMapChart: null, liveMapChart: null,
timer: null, timer: null,
detail: {}, detail: {},
allData:{} allData: {}
}; };
}, },
async mounted() { async mounted() {
@ -274,8 +276,8 @@ export default {
// window.close(); // // window.close(); //
// } // }
this.videoId = this.$route.query.videoId; this.videoId = this.$route.query.videoId;
let ret = await this.getDetail() const ret = await this.getDetail();
if(!ret)return if (!ret) return;
window.addEventListener("resize", this.resizeFn); window.addEventListener("resize", this.resizeFn);
this.initData(); this.initData();
// //
@ -324,22 +326,26 @@ export default {
}, },
methods: { methods: {
async getDetail() { async getDetail() {
let res = await infoGet({ id: this.videoId }) const res = await infoGet({ id: this.videoId });
if(res && res.code === 0) { if (res && res.code === 0) {
this.detail = res.data this.detail = res.data;
if(this.detail.advisorBasic.deptName !== this.$store.state.user.user.user.deptName && this.$store.state.user.user.user.deptId !== '1') { if (
this.detail.advisorBasic.deptName !==
this.$store.state.user.user.user.deptName &&
this.$store.state.user.user.user.deptId !== "1"
) {
// //
this.$alert('暂无查看权限!', '', { this.$alert("暂无查看权限!", "", {
confirmButtonText: '确定', confirmButtonText: "确定",
callback: action => { callback: action => {
window.close() window.close();
} }
}); });
return false return false;
} }
return true return true;
} }
return false return false;
}, },
resizeFn() { resizeFn() {
this.$nextTick(() => { this.$nextTick(() => {
@ -351,8 +357,8 @@ export default {
}); });
}, },
async initData() { async initData() {
let { code, data } = await liveScreen({ videoId: this.videoId }); const { code, data } = await liveScreen({ videoId: this.videoId });
if(code == 0 && data){ if (code == 0 && data) {
this.allData = data; this.allData = data;
this.setUserShare(); this.setUserShare();
// this.setUserSource(); // this.setUserSource();
@ -361,8 +367,6 @@ export default {
this.setOnlinePeople(); this.setOnlinePeople();
this.setVolumeTransaction(); this.setVolumeTransaction();
this.setLiveMap(); this.setLiveMap();
}else{
} }
}, },
// //
@ -410,13 +414,15 @@ export default {
this.userSourceChart = echarts.init(this.$refs["userSourceRef"]); this.userSourceChart = echarts.init(this.$refs["userSourceRef"]);
} }
const config = userSourceConfig; 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) { if (code == 0 && data) {
config.title.show = false; config.title.show = false;
let allNum = 0 let allNum = 0;
const seriesData = data.map(item => { const seriesData = data.map(item => {
allNum+=item.count allNum += item.count;
return { return {
value: item.count, value: item.count,
name: clientTypeObj[item.clientType] 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; config.series[0].data = seriesData;
} else { } else {
@ -481,7 +487,9 @@ export default {
// let { code, data } = await nowTrend({ videoId: this.videoId }); // let { code, data } = await nowTrend({ videoId: this.videoId });
if (this.allData.videoLiveTrendVOS) { if (this.allData.videoLiveTrendVOS) {
config.title.show = false; 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( config.xAxis.axisLabel.interval = parseInt(
xData.length / (xData.length % 2 == 0 ? 2 : 3) 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[0].data = this.allData.videoLiveTrendVOS.map(
config.series[1].data = this.allData.videoLiveTrendVOS.map(item => item.attendNum); item => item.onlineNum
config.series[2].data = this.allData.videoLiveTrendVOS.map(item => item.leaveNum); );
config.series[1].data = this.allData.videoLiveTrendVOS.map(
item => item.attendNum
);
config.series[2].data = this.allData.videoLiveTrendVOS.map(
item => item.leaveNum
);
} else { } else {
config.title.show = true; config.title.show = true;
config.series[0].data = []; config.series[0].data = [];
@ -521,11 +535,19 @@ export default {
// const { code, data } = await productSaleLine({ // const { code, data } = await productSaleLine({
// videoId: this.videoId // 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) { 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.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) => { config.xAxis.data = xData.map((item, index) => {
return { return {
value: item, value: item,
@ -560,10 +582,12 @@ export default {
// const { code, data } = await userProvince({ videoId: this.videoId }); // const { code, data } = await userProvince({ videoId: this.videoId });
if (this.allData.videoUserProvinceVOS) { 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 => { const seriesData = this.allData.videoUserProvinceVOS.map(item => {
return { return {
name: item.provinceName.replace(/市|省/,''), name: item.provinceName.replace(/市|省/, ""),
value: item.num, value: item.num,
proportion: item.proportion proportion: item.proportion
}; };
@ -601,7 +625,7 @@ export default {
beforeDestroy() { beforeDestroy() {
window.removeEventListener("resize", this.resizeFn); window.removeEventListener("resize", this.resizeFn);
if (this.timer) clearInterval(this.timer); if (this.timer) clearInterval(this.timer);
}, }
// destroyed() { // // destroyed() { //
// localStorage.removeItem('pageOpened'); // // localStorage.removeItem('pageOpened'); //
// }, // },
@ -650,7 +674,8 @@ h1 {
padding: 0; padding: 0;
width: 100vw; width: 100vw;
height: 100vh; 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%; background-size: 100% 100%;
overflow: hidden; overflow: hidden;
.title { .title {
@ -672,7 +697,7 @@ h1 {
// overflow: hidden; // overflow: hidden;
width: 100%; width: 100%;
height: 55px; height: 55px;
span{ span {
width: 27%; width: 27%;
text-align: center; text-align: center;
word-break: break-all; word-break: break-all;
@ -682,11 +707,10 @@ h1 {
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
} }
} }
.content { .content {
display: flex; display: flex;
padding: 20px 80px 0 80px; padding: 20px 20px 0 20px;
height: 92%; height: 92%;
margin-top: -2%; margin-top: -2%;
.left, .left,
@ -798,7 +822,7 @@ h1 {
> div:last-of-type { > div:last-of-type {
flex-shrink: 0; flex-shrink: 0;
} }
> div:first-child{ > div:first-child {
width: 60px; width: 60px;
flex: none; flex: none;
} }

View File

@ -265,7 +265,7 @@
" "
type="text" type="text"
@click="toDateDetail(scope.row)" @click="toDateDetail(scope.row)"
>数据大屏</el-button >实时大屏</el-button
> >
<el-button <el-button
v-if="[1, 4].includes(scope.row.status)" v-if="[1, 4].includes(scope.row.status)"

View File

@ -265,7 +265,7 @@
" "
type="text" type="text"
@click="toDateDetail(scope.row)" @click="toDateDetail(scope.row)"
>数据大屏</el-button >实时大屏</el-button
> >
<el-button <el-button
v-if="[1, 4].includes(scope.row.status)" v-if="[1, 4].includes(scope.row.status)"

View File

@ -41,6 +41,403 @@
/> />
</div> </div>
<div class="content"> <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">
<div class="audience-border"> <div class="audience-border">
<div class="box-tab"> <div class="box-tab">
@ -502,429 +899,6 @@
</div> </div>
</div> </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> </div>
<!-- 禁言弹窗 --> <!-- 禁言弹窗 -->
<el-dialog <el-dialog

View File

@ -1276,21 +1276,21 @@ export default {
} }
} }
.trapezoid1 { .trapezoid1 {
border-top: 100px solid #5583f7; border-top: 100px solid #5a8af6;
border-left: 45px solid transparent; border-left: 45px solid transparent;
border-right: 45px solid transparent; border-right: 45px solid transparent;
width: 440px; width: 440px;
line-height: 100px; line-height: 100px;
} }
.trapezoid2 { .trapezoid2 {
border-top: 100px solid #8400ff; border-top: 100px solid #64cbba;
border-left: 45px solid transparent; border-left: 45px solid transparent;
border-right: 45px solid transparent; border-right: 45px solid transparent;
width: 340px; width: 340px;
line-height: 100px; line-height: 100px;
} }
.trapezoid3 { .trapezoid3 {
border-top: 100px solid #35b63d; border-top: 100px solid #f5c277;
border-left: 45px solid transparent; border-left: 45px solid transparent;
border-right: 45px solid transparent; border-right: 45px solid transparent;
width: 240px; width: 240px;

View File

@ -263,7 +263,7 @@
" "
type="text" type="text"
@click="toDateDetail(scope.row)" @click="toDateDetail(scope.row)"
>数据大屏</el-button >实时大屏</el-button
> >
<el-button <el-button
v-if="[5].includes(scope.row.status)" v-if="[5].includes(scope.row.status)"

View File

@ -240,7 +240,7 @@
" "
type="text" type="text"
@click="toDateDetail(scope.row)" @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="[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)" <!-- <el-button v-if="[3].includes(scope.row.status) && !scope.row.weight && user.roles[0] !== '运营'" @click="openRecommend(scope.row,1)"

View File

@ -53,7 +53,7 @@
format="yyyy 第 WW 周" format="yyyy 第 WW 周"
placeholder="选择周" placeholder="选择周"
value-format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss"
:picker-options="{firstDayOfWeek: 1}" :picker-options="{ firstDayOfWeek: 1 }"
> >
</el-date-picker> </el-date-picker>
<el-date-picker <el-date-picker
@ -84,10 +84,14 @@
:class="[optActive === item.key ? 'active' : '']" :class="[optActive === item.key ? 'active' : '']"
@click="setLineChart(item.key, index)" @click="setLineChart(item.key, index)"
> >
<p v-if="item.key === 'finishReadRateMap'">{{ (item.num * 100).toFixed(2) }}% </p> <p v-if="item.key === 'finishReadRateMap'">
<p v-else-if="item.key === 'orderAmountMap'">{{ (item.num / 100).toFixed(2) }} </p> {{ (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-if="item.unit === 's'">{{ formatDuration(item.num) }}</p>
<p v-else>{{ item.num }} </p> <p v-else>{{ item.num }}</p>
<h5>{{ item.label }}</h5> <h5>{{ item.label }}</h5>
</li> </li>
</ul> </ul>
@ -126,7 +130,13 @@
</div> </div>
<div> <div>
<h3>订单金额</h3> <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>
<!-- <div> <!-- <div>
<h3>提佣订单数</h3> <h3>提佣订单数</h3>
@ -148,7 +158,13 @@
</div> </div>
<div> <div>
<h3>成交金额</h3> <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>
<!-- <div> <!-- <div>
<h3>提佣签约订单数</h3> <h3>提佣签约订单数</h3>
@ -173,13 +189,10 @@
:start-time="startTime1" :start-time="startTime1"
:rank-type="1" :rank-type="1"
:rankingType="rankingType" :rankingType="rankingType"
:timeType1 = "timeType1" :timeType1="timeType1"
/> />
</el-tab-pane> </el-tab-pane>
<el-tab-pane <el-tab-pane key="2" label="观看时长榜单" name="2"
key="2"
label="观看时长榜单"
name="2"
><DataTable ><DataTable
v-if="activeName === '2'" v-if="activeName === '2'"
key="2" key="2"
@ -188,12 +201,9 @@
:start-time="startTime1" :start-time="startTime1"
:rank-type="2" :rank-type="2"
:rankingType="rankingType" :rankingType="rankingType"
:timeType1 = "timeType1" :timeType1="timeType1"
/></el-tab-pane> /></el-tab-pane>
<el-tab-pane <el-tab-pane key="3" label="带货订单数榜单" name="3"
key="3"
label="带货订单数榜单"
name="3"
><DataTable ><DataTable
v-if="activeName === '3'" v-if="activeName === '3'"
key="3" key="3"
@ -202,12 +212,9 @@
:start-time="startTime1" :start-time="startTime1"
:rank-type="3" :rank-type="3"
:rankingType="rankingType" :rankingType="rankingType"
:timeType1 = "timeType1" :timeType1="timeType1"
/></el-tab-pane> /></el-tab-pane>
<el-tab-pane <el-tab-pane key="4" label="带货订单金额榜单" name="4"
key="4"
label="带货订单金额榜单"
name="4"
><DataTable ><DataTable
v-if="activeName === '4'" v-if="activeName === '4'"
key="4" key="4"
@ -216,7 +223,7 @@
:start-time="startTime1" :start-time="startTime1"
:rank-type="4" :rank-type="4"
:rankingType="rankingType" :rankingType="rankingType"
:timeType1 = "timeType1" :timeType1="timeType1"
/></el-tab-pane> /></el-tab-pane>
</el-tabs> </el-tabs>
<el-form <el-form
@ -238,7 +245,7 @@
{ label: '年榜', id: 2 }, { label: '年榜', id: 2 },
{ label: '月', id: 3 }, { label: '月', id: 3 },
{ label: '周', id: 4 }, { label: '周', id: 4 },
{ label: '日', id: 5 }, { label: '日', id: 5 }
]" ]"
:key="item.id" :key="item.id"
:label="item.label" :label="item.label"
@ -273,7 +280,7 @@
placeholder="选择周" placeholder="选择周"
value-format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss"
style="width: 100px" style="width: 100px"
:picker-options="{firstDayOfWeek: 1}" :picker-options="{ firstDayOfWeek: 1 }"
> >
</el-date-picker> </el-date-picker>
<el-date-picker <el-date-picker
@ -294,177 +301,177 @@
</div> </div>
</template> </template>
<script> <script>
import * as echarts from 'echarts' import * as echarts from "echarts";
import dayjs from 'dayjs' import dayjs from "dayjs";
import DataTable from './components/DataTable.vue' import DataTable from "./components/DataTable.vue";
import { setLineOptions } from './config' import { setLineOptions } from "./config";
import { tgList } from '@/api/adviser' import { tgList } from "@/api/adviser";
import { liveFunnelStatistic, liveOperationStatistic } from '@/api/index' import { liveFunnelStatistic, liveOperationStatistic } from "@/api/index";
import { mapGetters } from 'vuex' import { mapGetters } from "vuex";
import "dayjs/locale/zh-cn"; import "dayjs/locale/zh-cn";
var weekday = require('dayjs/plugin/weekday') var weekday = require("dayjs/plugin/weekday");
dayjs.extend(weekday) dayjs.extend(weekday);
dayjs.locale('zh-cn') dayjs.locale("zh-cn");
export default { export default {
components: { DataTable }, components: { DataTable },
activated() {}, activated() {},
data() { data() {
return { return {
tgId: '', tgId: "",
tgList: [], tgList: [],
timeType: 1, timeType: 1,
timeType1: 1, timeType1: 1,
activeName: '1', activeName: "1",
startTime: '', startTime: "",
startTime1: '', startTime1: "",
endTime: '', endTime: "",
endTime1: '', endTime1: "",
rankingType: '', // rankingType: "", //
time: '', time: "",
time1: '', time1: "",
optActive: '', optActive: "",
optArr: [ optArr: [
{ {
num: 0, num: 0,
label: '直播数', label: "直播数",
key: 'videoCountMap', key: "videoCountMap",
unit: '' unit: ""
}, },
{ {
num: 0, num: 0,
label: '直播时长', label: "直播时长",
key: 'videoHourMap', key: "videoHourMap",
unit: 's' unit: "s"
}, },
{ {
num: 0, num: 0,
label: '观看人次', label: "观看人次",
key: 'readCountMap', key: "readCountMap",
unit: '' unit: ""
}, },
{ {
num: 0, num: 0,
label: '观看人数', label: "观看人数",
key: 'readUserCountMap', key: "readUserCountMap",
unit: '' unit: ""
}, },
{ {
num: 0, num: 0,
label: '观看时长', label: "观看时长",
key: 'readHoursMap', key: "readHoursMap",
unit: 's' unit: "s"
}, },
{ {
num: 0, num: 0,
label: '人均观看时长', label: "人均观看时长",
key: 'avgReadHoursMap', key: "avgReadHoursMap",
unit: 's' unit: "s"
}, },
{ {
num: 0, num: 0,
label: '完播率', label: "完播率",
key: 'finishReadRateMap', key: "finishReadRateMap",
unit: '%' unit: "%"
}, },
{ {
num: 0, num: 0,
label: '参与互动人数', label: "参与互动人数",
key: 'joinUserCountMap', key: "joinUserCountMap",
unit: '' unit: ""
}, },
{ {
num: 0, num: 0,
label: '点击产品数', label: "点击产品数",
key: 'browseProCountMap', key: "browseProCountMap",
unit: '' unit: ""
}, },
{ {
num: 0, num: 0,
label: '下单未支付数', label: "下单未支付数",
key: 'orderButNotPayCountMap', key: "orderButNotPayCountMap",
unit: '' unit: ""
}, },
{ {
num: 0, num: 0,
label: '直播成交订单数', label: "直播成交订单数",
key: 'orderCountMap', key: "orderCountMap",
unit: '' unit: ""
}, },
{ {
num: 0, num: 0,
label: '直播成交金额', label: "直播成交金额",
key: 'orderAmountMap', key: "orderAmountMap",
unit: '分' unit: "分"
} }
], ],
optDataObj: {}, optDataObj: {},
funnelDataObj: {}, // funnelDataObj: {}, //
lineChart: null lineChart: null
} };
}, },
computed: { computed: {
...mapGetters(['user']) ...mapGetters(["user"])
}, },
watch: { watch: {
timeType(value) { timeType(value) {
this.time = this.startTime = this.endTime = '' this.time = this.startTime = this.endTime = "";
}, },
time(value) { time(value) {
this.startTime = value this.startTime = value;
if(value === null){ if (value === null) {
return this.endTime1 = null return (this.endTime1 = null);
} }
switch (this.timeType) { switch (this.timeType) {
case 1: case 1:
this.startTime = dayjs(value) this.startTime = dayjs(value).format("YYYY-MM-DD HH:mm:ss");
.format('YYYY-MM-DD HH:mm:ss')
this.endTime = dayjs(value) this.endTime = dayjs(value)
.add(7, 'day') .add(7, "day")
.format('YYYY-MM-DD HH:mm:ss') .format("YYYY-MM-DD HH:mm:ss");
break break;
case 2: case 2:
this.endTime = dayjs(value) this.endTime = dayjs(value)
.add(1, 'month') .add(1, "month")
.format('YYYY-MM-DD HH:mm:ss') .format("YYYY-MM-DD HH:mm:ss");
break break;
case 3: case 3:
this.endTime = dayjs(value) this.endTime = dayjs(value)
.add(1, 'year') .add(1, "year")
.format('YYYY-MM-DD HH:mm:ss') .format("YYYY-MM-DD HH:mm:ss");
break break;
default: default:
break break;
} }
}, },
timeType1(value) { timeType1(value) {
this.time1 = this.startTime1 = this.endTime1 = '' this.time1 = this.startTime1 = this.endTime1 = "";
}, },
time1(value) { time1(value) {
this.startTime1 = value this.startTime1 = value;
if(value === null || value === ''){ if (value === null || value === "") {
return this.endTime1 = null return (this.endTime1 = null);
} }
if(this.startTime1 !== null){ if (this.startTime1 !== null) {
this.startTime1 = dayjs(this.startTime1).format('YYYY-MM-DD HH:mm:ss') this.startTime1 = dayjs(this.startTime1).format("YYYY-MM-DD HH:mm:ss");
} }
if(this.timeType1 == 2){ if (this.timeType1 == 2) {
this.endTime1 = dayjs(value) this.endTime1 = dayjs(value)
.add(1, 'year') .add(1, "year")
.format('YYYY-MM-DD HH:mm:ss') .format("YYYY-MM-DD HH:mm:ss");
}else if(this.timeType1 == 3){ } else if (this.timeType1 == 3) {
this.endTime1 = dayjs(value) this.endTime1 = dayjs(value)
.add(1, 'month') .add(1, "month")
.format('YYYY-MM-DD HH:mm:ss') .format("YYYY-MM-DD HH:mm:ss");
}else if(this.timeType1 == 4){ } else if (this.timeType1 == 4) {
this.startTime1 = dayjs(value).subtract(1, 'day') this.startTime1 = dayjs(value)
.format('YYYY-MM-DD HH:mm:ss') .subtract(1, "day")
.format("YYYY-MM-DD HH:mm:ss");
this.endTime1 = dayjs(value) this.endTime1 = dayjs(value)
.add(6, 'day') .add(6, "day")
.format('YYYY-MM-DD HH:mm:ss') .format("YYYY-MM-DD HH:mm:ss");
}else if(this.timeType1 == 5){ } else if (this.timeType1 == 5) {
this.endTime1 = dayjs(value) this.endTime1 = dayjs(value)
.add(1, 'day') .add(1, "day")
.format('YYYY-MM-DD HH:mm:ss') .format("YYYY-MM-DD HH:mm:ss");
} }
// switch (this.timeType1) { // switch (this.timeType1) {
// case 2: // case 2:
@ -493,21 +500,21 @@ export default {
// break // break
// } // }
}, },
activeName(value){ activeName(value) {
if(value){ if (value) {
this.timeType1 = 1 this.timeType1 = 1;
} }
} }
}, },
created() { created() {
this.time = `${dayjs() this.time = `${dayjs()
.weekday(0) .weekday(0)
.format('YYYY-MM-DD')} 00:00:00` .format("YYYY-MM-DD")} 00:00:00`;
}, },
mounted() { mounted() {
this.$nextTick(() => { this.$nextTick(() => {
this.onSubmit() this.onSubmit();
}) });
}, },
methods: { methods: {
@ -515,14 +522,14 @@ export default {
const ret = await tgList({ const ret = await tgList({
current: 1, current: 1,
name, name,
showName: '', showName: "",
size: 100000, size: 100000,
staffNo: '', staffNo: "",
status: 3, status: 3,
deptId:this.user.user.deptId deptId: this.user.user.deptId
}) });
if (ret.code === 0) { if (ret.code === 0) {
this.tgList = ret.data.list this.tgList = ret.data.list;
} }
}, },
async getLiveOperationStatistic() { async getLiveOperationStatistic() {
@ -531,97 +538,101 @@ export default {
endTime: this.endTime, endTime: this.endTime,
searchType: this.timeType ? this.timeType : 3, searchType: this.timeType ? this.timeType : 3,
startTime: this.startTime, startTime: this.startTime,
userType:3 userType: 3
}) });
if (ret.code === 0 && ret.data) { if (ret.code === 0 && ret.data) {
this.optDataObj = ret.data this.optDataObj = ret.data;
let readHoursMap = 0 let readHoursMap = 0;
let readUserCountMap = 0 let readUserCountMap = 0;
this.optArr.forEach(item => { this.optArr.forEach(item => {
item.num = 0 item.num = 0;
if(item.key === 'finishReadRateMap'){ if (item.key === "finishReadRateMap") {
item.num = this.optDataObj.totalFinishRate item.num = this.optDataObj.totalFinishRate;
} else if (item.key === 'avgReadHoursMap') { } else if (item.key === "avgReadHoursMap") {
item.num = readUserCountMap ? readHoursMap/readUserCountMap : 0 item.num = readUserCountMap ? readHoursMap / readUserCountMap : 0;
} else { } else {
for (const key in this.optDataObj[item.key] || {}) { 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') { if (item.key === "readHoursMap") {
readHoursMap = item.num readHoursMap = item.num;
} else if (item.key === 'readUserCountMap') { } else if (item.key === "readUserCountMap") {
readUserCountMap = item.num readUserCountMap = item.num;
} }
}) });
this.setLineChart('videoCountMap', 0) this.setLineChart("videoCountMap", 0);
} else { } else {
this.lineChart && this.lineChart.clear() this.lineChart && this.lineChart.clear();
this.optArr.forEach(item => { this.optArr.forEach(item => {
item.num = 0 item.num = 0;
}) });
} }
}, },
async getLiveFunnelStatistic() { async getLiveFunnelStatistic() {
console.log(this.startTime1,this.endTime1) console.log(this.startTime1, this.endTime1);
const data = { const data = {
type: this.tgId ? 1 : 3, type: this.tgId ? 1 : 3,
advisorId:this.tgId, advisorId: this.tgId,
startTime :this.startTime, startTime: this.startTime,
endTime: this.endTime, endTime: this.endTime,
userType:3 userType: 3
} };
const ret = await liveFunnelStatistic(data) const ret = await liveFunnelStatistic(data);
if (ret.code === 0 && ret.data) { if (ret.code === 0 && ret.data) {
this.funnelDataObj = ret.data this.funnelDataObj = ret.data;
} }
}, },
setLineChart(key, index) { setLineChart(key, index) {
this.optActive = key this.optActive = key;
this.lineChart = echarts.init(document.getElementById('line-chart')) this.lineChart = echarts.init(document.getElementById("line-chart"));
const xData = [] const xData = [];
const seriesData = [] const seriesData = [];
for (const subKey in this.optDataObj[key]) { for (const subKey in this.optDataObj[key]) {
if(this.timeType === 3){ if (this.timeType === 3) {
xData.push(`${dayjs(subKey).format('MM')}`) xData.push(`${dayjs(subKey).format("MM")}`);
} else { } 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( this.lineChart.setOption(
setLineOptions({ xData, seriesData, unit: this.optArr[index].unit }) setLineOptions({ xData, seriesData, unit: this.optArr[index].unit })
) );
}, },
onSubmit() { onSubmit() {
this.getTgList() this.getTgList();
if(!this.endTime || !this.startTime){ if (!this.endTime || !this.startTime) {
this.startTime = "1999-01-01 00:00:00" this.startTime = "1999-01-01 00:00:00";
this.endTime = dayjs().format('YYYY-MM-DD HH:mm:ss') this.endTime = dayjs().format("YYYY-MM-DD HH:mm:ss");
} }
this.getLiveFunnelStatistic() this.getLiveFunnelStatistic();
this.getLiveOperationStatistic() this.getLiveOperationStatistic();
}, },
onTableSubmit() { onTableSubmit() {
this.$nextTick(() => { 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() { handleExport() {
this.$nextTick(() => { this.$nextTick(() => {
this.$refs[`tableRef${this.activeName}`].handleExport() this.$refs[`tableRef${this.activeName}`].handleExport();
}) });
}, },
formatDuration(milliseconds) { formatDuration(milliseconds) {
var hours = Math.floor(milliseconds / 3600); var hours = Math.floor(milliseconds / 3600);
var minutes = Math.floor((milliseconds % 3600) / 60); var minutes = Math.floor((milliseconds % 3600) / 60);
var secs = Math.floor(milliseconds % 60); var secs = Math.floor(milliseconds % 60);
return hours + '时' + minutes + '分' + secs + '秒'; return hours + "时" + minutes + "分" + secs + "秒";
} }
} }
} };
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
@ -756,21 +767,21 @@ export default {
} }
} }
.trapezoid1 { .trapezoid1 {
border-top: 100px solid #5583f7; border-top: 100px solid #5a8af6;
border-left: 45px solid transparent; border-left: 45px solid transparent;
border-right: 45px solid transparent; border-right: 45px solid transparent;
width: 440px; width: 440px;
line-height: 100px; line-height: 100px;
} }
.trapezoid2 { .trapezoid2 {
border-top: 100px solid #8400ff; border-top: 100px solid #64cbba;
border-left: 45px solid transparent; border-left: 45px solid transparent;
border-right: 45px solid transparent; border-right: 45px solid transparent;
width: 340px; width: 340px;
line-height: 100px; line-height: 100px;
} }
.trapezoid3 { .trapezoid3 {
border-top: 100px solid #35b63d; border-top: 100px solid #f5c277;
border-left: 45px solid transparent; border-left: 45px solid transparent;
border-right: 45px solid transparent; border-right: 45px solid transparent;
width: 240px; width: 240px;
@ -785,9 +796,9 @@ export default {
} }
} }
} }
.tabs-wrap{ .tabs-wrap {
position: relative; position: relative;
.el-form{ .el-form {
position: absolute; position: absolute;
right: 0; right: 0;
top: 0; top: 0;

View File

@ -754,21 +754,21 @@ export default {
} }
} }
.trapezoid1 { .trapezoid1 {
border-top: 100px solid #5583f7; border-top: 100px solid #5a8af6;
border-left: 45px solid transparent; border-left: 45px solid transparent;
border-right: 45px solid transparent; border-right: 45px solid transparent;
width: 440px; width: 440px;
line-height: 100px; line-height: 100px;
} }
.trapezoid2 { .trapezoid2 {
border-top: 100px solid #8400ff; border-top: 100px solid #64cbba;
border-left: 45px solid transparent; border-left: 45px solid transparent;
border-right: 45px solid transparent; border-right: 45px solid transparent;
width: 340px; width: 340px;
line-height: 100px; line-height: 100px;
} }
.trapezoid3 { .trapezoid3 {
border-top: 100px solid #35b63d; border-top: 100px solid #f5c277;
border-left: 45px solid transparent; border-left: 45px solid transparent;
border-right: 45px solid transparent; border-right: 45px solid transparent;
width: 240px; width: 240px;