jiuyiUniapp/jiuyi2/pages/index/dataCenter/dataCenter.vue

342 lines
7.1 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<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>