342 lines
7.1 KiB
Vue
342 lines
7.1 KiB
Vue
<script setup>
|
||
// 数据中心
|
||
import {
|
||
ref,
|
||
reactive,
|
||
computed,
|
||
} from 'vue';
|
||
import {
|
||
onLoad,
|
||
onReady,
|
||
onHide,
|
||
onUnload,
|
||
} from '@dcloudio/uni-app'
|
||
//
|
||
import api from '@/api/index.js'
|
||
//
|
||
import util from '@/common/js/util.js'
|
||
import {
|
||
useStore
|
||
} from 'vuex'
|
||
// 顶部导航
|
||
import apex from '@/components/header/apex.vue'
|
||
// 支付密码
|
||
import payPwd from '@/components/mine/payPwd.vue'
|
||
//
|
||
const store = useStore()
|
||
// 配置项
|
||
const opts = reactive({
|
||
color: ["#D8D8D8", "#C2ECFF", "#FFD2D2", "#C2FFCC", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4", "#ea7ccc"],
|
||
padding: [0, 35, 0, 0],
|
||
touchMoveLimit: 24,
|
||
enableScroll: true,
|
||
legend: {
|
||
padding: 20,
|
||
margin: 30,
|
||
position: 'top',
|
||
backgroundColor: 'rgb(0,0,0)',
|
||
fontColor: '#fff',
|
||
itemGap: 10,
|
||
},
|
||
xAxis: {
|
||
titleFontSize: 16,
|
||
disableGrid: true,
|
||
scrollShow: true,
|
||
itemCount: 10,
|
||
showTitle: true,
|
||
title: '秒数',
|
||
},
|
||
yAxis: {
|
||
data: [{
|
||
min: 0,
|
||
titleFontSize: 16,
|
||
title: '人数',
|
||
}],
|
||
showTitle: true,
|
||
},
|
||
extra: {
|
||
column: {
|
||
type: "group",
|
||
width: 5,
|
||
activeBgColor: "#000000",
|
||
activeBgOpacity: 0.08
|
||
},
|
||
}
|
||
})
|
||
// 图表数据
|
||
const chartData = reactive({})
|
||
// 详情
|
||
const detail = reactive({})
|
||
// 视频id
|
||
const videoId = ref('')
|
||
// 是否解锁
|
||
const isLock = ref(false)
|
||
// 系统配置
|
||
const config = computed(() => {
|
||
return store.state.config
|
||
})
|
||
|
||
onLoad((option) => {
|
||
if (option.videoId) videoId.value = option.videoId
|
||
// 获取详情
|
||
getDetail()
|
||
// 获取流量统计
|
||
getFlow()
|
||
})
|
||
|
||
// 查看流量
|
||
function getFlow() {
|
||
api.video.getFlow({
|
||
data: {
|
||
videoId: videoId.value,
|
||
},
|
||
}).then(res => {
|
||
if (res.code === 200) {
|
||
const result = res.data
|
||
// 是否解锁
|
||
if (result.isLock) Object.assign(chartData, {}, res.data)
|
||
isLock.value = result.isLock
|
||
return
|
||
}
|
||
util.alert({
|
||
content: res.msg,
|
||
showCancel: false,
|
||
})
|
||
})
|
||
}
|
||
|
||
// 详情
|
||
function getDetail() {
|
||
api.video.getStatistics({
|
||
data: {
|
||
videoId: videoId.value,
|
||
},
|
||
}).then(res => {
|
||
if (res.code === 200) {
|
||
// 详情
|
||
Object.assign(detail, {}, res.data)
|
||
return
|
||
}
|
||
util.alert({
|
||
content: res.msg,
|
||
showCancel: false,
|
||
})
|
||
})
|
||
}
|
||
|
||
// 解锁查看流量统计表
|
||
function handleUnlock() {
|
||
api.video.unlockStatistics({}).then(res => {
|
||
if (res.code === 200) {
|
||
// 获取流量统计
|
||
getFlow()
|
||
return
|
||
}
|
||
util.alert({
|
||
content: res.msg,
|
||
showCancel: false,
|
||
})
|
||
})
|
||
}
|
||
|
||
/**
|
||
* 跳转
|
||
* @param {Object} url 路径参数
|
||
*/
|
||
function link(url) {
|
||
uni.navigateTo({
|
||
url,
|
||
})
|
||
}
|
||
</script>
|
||
|
||
<template>
|
||
<view class="app">
|
||
<apex title="数据中心">
|
||
<template #right>
|
||
<view class="rows c999 f24" @click="link(util.setUrl('/pages/index/dataCenter/like',{videoId: videoId}))">
|
||
<view class="ver mr10">
|
||
<image class="wh26" src="/static/indexLike1.png" mode="aspectFit" />
|
||
<view>公开赞</view>
|
||
</view>
|
||
<view class="ver mr10">
|
||
<image class="wh26" src="/static/privateLike.png" mode="aspectFit" />
|
||
<view>隐私赞</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
</apex>
|
||
|
||
<!-- 顶部 -->
|
||
<view class="apex ptb30 plr30 bfff">
|
||
<view class="rows">
|
||
<view class="title c333 f36 b">统计中心</view>
|
||
</view>
|
||
<!-- 查看时间 -->
|
||
<view class="line mt20 c999 f26">统计时间：{{detail.statisticsTime}}</view>
|
||
</view>
|
||
|
||
<!-- 视频详情 -->
|
||
<view class="video df mtb20 ptb20 plr30 bfff">
|
||
<image class="poster br10" :src="detail.coverUrl" mode="aspectFill" />
|
||
<view class="info df fdc jcsb f1 ml30">
|
||
<view class="title t2hd f34 c111">{{detail.title}}</view>
|
||
<view class="desc t2hd f28 c666">{{detail.description}}</view>
|
||
<view class="time f26 c999">{{detail.createTime}}</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="container">
|
||
<view class="rows">
|
||
<view class="title">流量统计</view>
|
||
|
||
<view class="lock rows ptb5 plr20 bar cfff f28" :class="{'active': !isLock}">
|
||
<image class="lockImg wh30" src="/static/dataLock.png" mode="aspectFit" />
|
||
<image class="unlockImg wh30" src="/static/dataUnlock.png" mode="aspectFit" />
|
||
|
||
<view class="ml5" v-if="!isLock" @click="$refs.payPwdRef.open()">去解锁</view>
|
||
<view class="ml5" v-else>已解锁</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="charts" v-if="isLock">
|
||
<qiun-data-charts type="column" :opts="opts" :chartData="chartData" :ontouch="true" />
|
||
</view>
|
||
<view class="mtb30 fmid" v-else>
|
||
<view>点击消耗榴莲果</view>
|
||
<image class="wh30" src="/static/fruit.png" mode="aspectFit" />
|
||
<view>{{config.UNLOCK_FLOW_STATISTICS}}解锁查看24h</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="container">
|
||
<view class="title">数据统计</view>
|
||
|
||
<view class="dataList">
|
||
<view class="main">
|
||
<!-- <view class="item tac">
|
||
<view class="key">公开赞</view>
|
||
<view class="value">1000</view>
|
||
</view>
|
||
<view class="item tac">
|
||
<view class="key">隐私赞</view>
|
||
<view class="value">20</view>
|
||
</view> -->
|
||
<view class="item tac">
|
||
<view class="key">展播量推流</view>
|
||
<view class="value">{{detail.exhibitionScreening}}</view>
|
||
</view>
|
||
<view class="item tac">
|
||
<view class="key">完播量推流</view>
|
||
<view class="value">{{detail.completeViewing}}</view>
|
||
</view>
|
||
<view class="item tac">
|
||
<view class="key">评论</view>
|
||
<view class="value">{{detail.commentCount}}</view>
|
||
</view>
|
||
<view class="item tac">
|
||
<view class="key">收藏</view>
|
||
<view class="value">{{detail.collectCount}}</view>
|
||
</view>
|
||
</view>
|
||
<view class="item tac mt20" @click="link('/pages/index/dataCenter/otherPush')">
|
||
<view class="key">推广总数</view>
|
||
<view class="value">{{detail.othersPromotionCount}}</view>
|
||
</view>
|
||
<view class="item tac mt20">
|
||
<view class="key">下单数量</view>
|
||
<view class="value">{{detail.placeAnOrderCount}}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="fill" style="height: 30rpx;"></view>
|
||
|
||
<!-- 支付密码 -->
|
||
<payPwd ref="payPwdRef" :check="true" @confirm="handleUnlock" />
|
||
</view>
|
||
</template>
|
||
|
||
<style lang="scss" scoped>
|
||
// 页面标题
|
||
.apex {
|
||
border-bottom: 2rpx solid #eee;
|
||
}
|
||
|
||
// 视频
|
||
.video {
|
||
|
||
.poster {
|
||
height: 288rpx;
|
||
width: 162rpx;
|
||
}
|
||
}
|
||
|
||
// 锁
|
||
.lock {
|
||
background-color: #FF9B27;
|
||
|
||
.lockImg {
|
||
display: none;
|
||
}
|
||
|
||
.unlockImg {
|
||
display: block;
|
||
}
|
||
|
||
&.active {
|
||
background-color: #ddd;
|
||
|
||
.lockImg {
|
||
display: block;
|
||
}
|
||
|
||
.unlockImg {
|
||
display: none;
|
||
}
|
||
}
|
||
}
|
||
|
||
// 内容
|
||
.container {
|
||
margin: 30rpx;
|
||
padding: 30rpx 20rpx;
|
||
background-color: #fff;
|
||
border-radius: 20rpx;
|
||
|
||
// 标题
|
||
.title {
|
||
margin: 0 30rpx;
|
||
font-size: 30rpx;
|
||
font-weight: bold;
|
||
}
|
||
|
||
// 图表
|
||
.charts {
|
||
height: 700rpx;
|
||
}
|
||
|
||
// 数据列表
|
||
.dataList {
|
||
margin-top: 30rpx;
|
||
|
||
.main {
|
||
display: grid;
|
||
grid-template-columns: repeat(2, 1fr);
|
||
grid-gap: 20rpx;
|
||
}
|
||
|
||
.item {
|
||
padding: 30rpx 0;
|
||
background-color: #f8f8f8;
|
||
border-radius: 20rpx;
|
||
|
||
.value {
|
||
margin-top: 10rpx;
|
||
font-size: 40rpx;
|
||
font-weight: bold;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style> |