This commit is contained in:
hh
parent
24940b5594
commit
0ba780b0c5
File diff suppressed because it is too large
Load Diff
|
|
@ -1,23 +1,31 @@
|
|||
<template>
|
||||
<div class="outer">
|
||||
<div class="grid">
|
||||
<a-row >
|
||||
<div style="width: 100%;padding-left: 90%;">
|
||||
<a-button type="primary" @click="flech">刷新页面</a-button>
|
||||
</div>
|
||||
<a-row v-if="!loading">
|
||||
<a-col :span="6" v-for="(item, index) in gloryData" :key="index">
|
||||
<a-card :bordered="false">
|
||||
<a-card style="cursor: pointer;" :bordered="false" @click="goto">
|
||||
<img :src="item.img" alt="" />
|
||||
<p style="font-weight: bold;margin-top: 5px;padding-left: 5px;">{{ item.title }}</p>
|
||||
<div style="display: flex" >
|
||||
<span class="name"> {{ item.id }}</span>
|
||||
<div class="hot">
|
||||
<a-icon type="fire" style="color: red; margin-left: auto" />
|
||||
<span >{{ item.hot }}</span>
|
||||
</div>
|
||||
|
||||
|
||||
<div style="display: flex">
|
||||
<span class="name"> {{ item.id }}</span>
|
||||
<div class="hot">
|
||||
<a-icon type="fire" style="color: red; margin-left: auto" />
|
||||
<span>{{ item.hot }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div style="padding-top: 10px;float: right;">
|
||||
<a-button type="primary">查看详情</a-button>
|
||||
<a-button type="primary" style="margin-left: 10px;" @click="gotoReal">实时分析</a-button>
|
||||
</div>
|
||||
</a-card>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-spin v-if="loading">
|
||||
<div>正在查询中</div>
|
||||
</a-spin>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -51,99 +59,117 @@ export default {
|
|||
img: pic1,
|
||||
},
|
||||
{
|
||||
title:"haohaodapaiwei",
|
||||
id:'JDG.Kanavi',
|
||||
hot:"13.3万",
|
||||
img:pic2
|
||||
title: "haohaodapaiwei",
|
||||
id: 'JDG.Kanavi',
|
||||
hot: "13.3万",
|
||||
img: pic2
|
||||
},
|
||||
{
|
||||
title:"韩一拉夫 韩服冲千分",
|
||||
id:'阿呆奥拉夫',
|
||||
hot:"22.3万",
|
||||
img:pic3
|
||||
title: "韩一拉夫 韩服冲千分",
|
||||
id: '阿呆奥拉夫',
|
||||
hot: "22.3万",
|
||||
img: pic3
|
||||
},
|
||||
{
|
||||
title:"国服第一诺手!峡谷宗师冲王者!!!",
|
||||
id:'黑洞king1',
|
||||
hot:"24.5万",
|
||||
img:pic4
|
||||
title: "国服第一诺手!峡谷宗师冲王者!!!",
|
||||
id: '黑洞king1',
|
||||
hot: "24.5万",
|
||||
img: pic4
|
||||
},
|
||||
{
|
||||
title:"解说下今天的比赛~",
|
||||
id:'kRYST4L',
|
||||
hot:"559.9万",
|
||||
img:pic5
|
||||
title: "解说下今天的比赛~",
|
||||
id: 'kRYST4L',
|
||||
hot: "559.9万",
|
||||
img: pic5
|
||||
},
|
||||
|
||||
|
||||
{
|
||||
title:"5点跟姿态队练",
|
||||
id:'Letme严君泽',
|
||||
hot:"247.1万",
|
||||
img:pic6
|
||||
title: "5点跟姿态队练",
|
||||
id: 'Letme严君泽',
|
||||
hot: "247.1万",
|
||||
img: pic6
|
||||
},
|
||||
{
|
||||
title:"勤奋天王",
|
||||
id:'DANK1NG',
|
||||
hot:"426.7万",
|
||||
img:pic7
|
||||
title: "勤奋天王",
|
||||
id: 'DANK1NG',
|
||||
hot: "426.7万",
|
||||
img: pic7
|
||||
},
|
||||
{
|
||||
title:"【Mr.mao】少点谩骂 多点鼓励!",
|
||||
id:'MAX-Mrmao',
|
||||
hot:"19.1万",
|
||||
img:pic8
|
||||
title: "【Mr.mao】少点谩骂 多点鼓励!",
|
||||
id: 'MAX-Mrmao',
|
||||
hot: "19.1万",
|
||||
img: pic8
|
||||
},
|
||||
{
|
||||
title:"小播一会儿，新主播",
|
||||
id:'青象-矍然吖',
|
||||
hot:"4.0万",
|
||||
img:pic9
|
||||
title: "小播一会儿，新主播",
|
||||
id: '青象-矍然吖',
|
||||
hot: "4.0万",
|
||||
img: pic9
|
||||
},
|
||||
{
|
||||
title:"【新主播】上S的第一天~",
|
||||
id:'十三月的故事',
|
||||
hot:"12.6万",
|
||||
img:pic10
|
||||
title: "【新主播】上S的第一天~",
|
||||
id: '十三月的故事',
|
||||
hot: "12.6万",
|
||||
img: pic10
|
||||
},
|
||||
{
|
||||
title:"速看 只整新奥恩大活!",
|
||||
id:'丸子头的文',
|
||||
hot:"40.7万",
|
||||
img:pic11
|
||||
title: "速看 只整新奥恩大活!",
|
||||
id: '丸子头的文',
|
||||
hot: "40.7万",
|
||||
img: pic11
|
||||
},
|
||||
{
|
||||
title:"2024NBPL春季赛",
|
||||
id:'虎牙永劫无间赛事',
|
||||
hot:"112.3万",
|
||||
img:pic12
|
||||
title: "2024NBPL春季赛",
|
||||
id: '虎牙永劫无间赛事',
|
||||
hot: "112.3万",
|
||||
img: pic12
|
||||
},
|
||||
{
|
||||
title:"天人前10 书300分 接3排",
|
||||
id:'巅峰-鱼子酱KK',
|
||||
hot:"8.2万",
|
||||
img:pic13
|
||||
title: "天人前10 书300分 接3排",
|
||||
id: '巅峰-鱼子酱KK',
|
||||
hot: "8.2万",
|
||||
img: pic13
|
||||
},
|
||||
{
|
||||
title:"鬼刀一开看不见看不见，迦南启动!",
|
||||
id:'终憾﹀奇星互娱',
|
||||
hot:"23.9万",
|
||||
img:pic14
|
||||
title: "鬼刀一开看不见看不见，迦南启动!",
|
||||
id: '终憾﹀奇星互娱',
|
||||
hot: "23.9万",
|
||||
img: pic14
|
||||
},
|
||||
{
|
||||
title:"苏州KSG vs 武汉eStarKPL春季赛",
|
||||
id:'虎牙王者荣耀赛事',
|
||||
hot:"591.8万",
|
||||
img:pic15
|
||||
title: "苏州KSG vs 武汉eStarKPL春季赛",
|
||||
id: '虎牙王者荣耀赛事',
|
||||
hot: "591.8万",
|
||||
img: pic15
|
||||
},
|
||||
{
|
||||
title:"我来诠释发育路!",
|
||||
id:'AzZ、口袋',
|
||||
hot:"117.1万",
|
||||
img:pic16
|
||||
title: "我来诠释发育路!",
|
||||
id: 'AzZ、口袋',
|
||||
hot: "117.1万",
|
||||
img: pic16
|
||||
},
|
||||
],
|
||||
loading: false,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
goto() {
|
||||
console.log("Test")
|
||||
},
|
||||
flech() {
|
||||
this.loading = true
|
||||
setTimeout(() => {
|
||||
this.loading = false
|
||||
}, 1500)
|
||||
},
|
||||
// 查看详情（转跳详情页面）
|
||||
gotoReal() {
|
||||
this.$router.push({
|
||||
path: '/live/realTime',
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
|
|
@ -157,16 +183,18 @@ export default {
|
|||
|
||||
/* margin: 30px; */
|
||||
width: 100%;
|
||||
|
||||
// height: 1000px;
|
||||
.hot{
|
||||
padding-right: 5px;
|
||||
margin-left: auto;
|
||||
font-weight: bold;
|
||||
.hot {
|
||||
padding-right: 5px;
|
||||
margin-left: auto;
|
||||
font-weight: bold;
|
||||
}
|
||||
.name{
|
||||
padding-left: 5px;
|
||||
margin-right: auto;
|
||||
font-weight: bold;
|
||||
|
||||
.name {
|
||||
padding-left: 5px;
|
||||
margin-right: auto;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,443 @@
|
|||
<template>
|
||||
<div class="outer">
|
||||
<div class="grid">
|
||||
<a-card title="平台数据分析" :loading="loading" :bordered="false">
|
||||
<a-row style="height: 100%;width: 98%;">
|
||||
<a-col :span="12" style="height: 100%;padding: 6px">
|
||||
<a-card style="height: 400px; width:100%; border-radius: 10px;"
|
||||
:body-style="{ height: '95%', width: '100%', borderRadius: '10px' }">
|
||||
<div style="font-size: 30px;font-weight: bold;padding-bottom: 15px;">直播概况</div>
|
||||
<div style="display: flex; flex-wrap: wrap; justify-content: center; padding-top: 15px;">
|
||||
<div style="flex: 50%; text-align: center; padding: 5px;">
|
||||
<div style="font-size: 20px; font-weight: bold;">活跃观众</div>
|
||||
<div style="font-size: 40px;">{{ num }}</div>
|
||||
</div>
|
||||
<div style="flex: 50%; text-align: center; padding: 5px;">
|
||||
<div style="font-size: 14px;font-weight: bold;">平均热度</div>
|
||||
<div style="font-size: 40px;">{{ redu }}</div>
|
||||
</div>
|
||||
<div style="flex: 50%; text-align: center; padding: 5px;">
|
||||
<div style="font-size: 14px;font-weight: bold;">弹幕数量</div>
|
||||
<div style="font-size: 40px;">{{ danmu }}</div>
|
||||
</div>
|
||||
<div style="flex: 50%; text-align: center; padding: 5px;">
|
||||
<div style="font-size: 14px;font-weight: bold;">礼物数量</div>
|
||||
<div style="font-size: 40px;">{{ liwu }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</a-card>
|
||||
|
||||
</a-col>
|
||||
<a-col :span="12" style="height: 100%;padding: 6px">
|
||||
<a-card style="height: 400px; width:100%; border-radius: 10px;"
|
||||
:body-style="{ height: '95%', width: '100%', borderRadius: '10px' }">
|
||||
<div id="main2" style="height: 100%; width: 100%"></div>
|
||||
</a-card>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-row style="height: 100%; width: 98%; display: flex; justify-content: space-between;">
|
||||
<a-col :span="12" style="height: 100%; padding: 6px">
|
||||
<a-card style="height: 400px; width:100%; border-radius: 10px;"
|
||||
:body-style="{ height: '95%', width: '100%', borderRadius: '10px' }">
|
||||
<div id="main3" style="height: 100%; width: 100%"></div>
|
||||
</a-card>
|
||||
</a-col>
|
||||
<a-col :span="12" style="height: 100%; padding: 6px">
|
||||
<a-card style="height: 400px; width:100%; border-radius: 10px;"
|
||||
:body-style="{ height: '95%', width: '100%', borderRadius: '10px' }">
|
||||
<div id="main1" style="height: 100%; width: 100%"></div>
|
||||
</a-card>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<!-- <template #extra>
|
||||
<a-button type="primary" @click="getData()">同步数据</a-button>
|
||||
</template>
|
||||
<a-table :columns="columns" :data-source="datasets" bordered>
|
||||
</a-table> -->
|
||||
|
||||
</a-card>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from 'echarts';
|
||||
|
||||
const columns = [
|
||||
{
|
||||
title: '主播',
|
||||
dataIndex: 'name',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
title: '活跃观众',
|
||||
dataIndex: 'Aperson',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
title: '弹幕数量',
|
||||
dataIndex: 'Cnumber',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
title: '弹幕人数',
|
||||
dataIndex: 'Cperson',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
title: '礼物人数',
|
||||
dataIndex: 'Gperson',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
title: '礼物总值(元)',
|
||||
dataIndex: 'Gsum',
|
||||
align: 'center',
|
||||
},
|
||||
];
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
datasets: [
|
||||
{
|
||||
name: '英雄联盟赛事',
|
||||
Aperson: 59523,
|
||||
Cnumber: 64785,
|
||||
Cperson: 29715,
|
||||
Gperson: 268,
|
||||
Gsum: 1396,
|
||||
},
|
||||
{
|
||||
name: 'MrGemini',
|
||||
Aperson: 32988,
|
||||
Cnumber: 30731,
|
||||
Cperson: 10369,
|
||||
Gperson: 9443,
|
||||
Gsum: 74918,
|
||||
},
|
||||
{
|
||||
key: '3',
|
||||
name: '金咕咕金咕咕doinb',
|
||||
Aperson: 32036,
|
||||
Cnumber: 71838,
|
||||
Cperson: 11965,
|
||||
Gperson: 3354,
|
||||
Gsum: 32585,
|
||||
},
|
||||
{
|
||||
key: '4',
|
||||
name: '进击的神乐',
|
||||
Aperson: 31701,
|
||||
Cnumber: 27065,
|
||||
Cperson: 8067,
|
||||
Gperson: 733,
|
||||
Gsum: 7334,
|
||||
},
|
||||
{
|
||||
key: '5',
|
||||
name: '即将拥有人鱼线的PDD',
|
||||
Aperson: 30510,
|
||||
Cnumber: 20,
|
||||
Cperson: 20,
|
||||
Gperson: 2408,
|
||||
Gsum: 12930,
|
||||
},
|
||||
{
|
||||
key: '6',
|
||||
name: '叫我老陈就好了',
|
||||
Aperson: 30356,
|
||||
Cnumber: 35978,
|
||||
Cperson: 8772,
|
||||
Gperson: 1946,
|
||||
Gsum: 15495,
|
||||
},
|
||||
{
|
||||
key: '7',
|
||||
name: '王者荣耀官方赛事',
|
||||
Aperson: 30146,
|
||||
Cnumber: 16291,
|
||||
Cperson: 13303,
|
||||
Gperson: 59,
|
||||
Gsum: 293,
|
||||
},
|
||||
{
|
||||
key: '8',
|
||||
name: 'Xleft小叮当',
|
||||
Aperson: 29596,
|
||||
Cnumber: 27503,
|
||||
Cperson: 8337,
|
||||
Gperson: 3799,
|
||||
Gsum: 25646,
|
||||
},
|
||||
{
|
||||
key: '9',
|
||||
name: '进击D神乐',
|
||||
Aperson: 28654,
|
||||
Cnumber: 10968,
|
||||
Cperson: 6090,
|
||||
Gperson: 304,
|
||||
Gsum: 4922,
|
||||
},
|
||||
{
|
||||
key: '10',
|
||||
name: '狂仔酷炫',
|
||||
Aperson: 28537,
|
||||
Cnumber: 7290,
|
||||
Cperson: 5090,
|
||||
Gperson: 90,
|
||||
Gsum: 321,
|
||||
},
|
||||
{
|
||||
key: '11',
|
||||
name: 'pigff',
|
||||
Aperson: 27975,
|
||||
Cnumber: 23003,
|
||||
Cperson: 7454,
|
||||
Gperson: 2204,
|
||||
Gsum: 18051,
|
||||
},
|
||||
{
|
||||
key: '12',
|
||||
name: '谢彬DD',
|
||||
Aperson: 27408,
|
||||
Cnumber: 56633,
|
||||
Cperson: 12039,
|
||||
Gperson: 1575,
|
||||
Gsum: 14466,
|
||||
},
|
||||
],
|
||||
columns,
|
||||
loading: false,
|
||||
data2: [
|
||||
59523,
|
||||
32988,
|
||||
32036,
|
||||
31701,
|
||||
30510,
|
||||
30356,
|
||||
30146,
|
||||
29596,
|
||||
28654,
|
||||
28537,
|
||||
],
|
||||
data3: [80002, 82024, 85383.5],
|
||||
data4: [10869, 11108, 12109],
|
||||
num: 4149861,
|
||||
redu: 31904,
|
||||
danmu: 9028189,
|
||||
liwu: 303691,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
getData() {
|
||||
this.loading = true;
|
||||
setTimeout(() => {
|
||||
//将数据进行随机的加减变化
|
||||
this.datasets.forEach((item) => {
|
||||
item.Aperson += Math.floor(Math.random() * 100);
|
||||
item.Cnumber += Math.floor(Math.random() * 50);
|
||||
item.Cperson += Math.floor(Math.random() * 10);
|
||||
item.Gperson += Math.floor(Math.random() * 10);
|
||||
item.Gsum += Math.floor(Math.random() * 1000);
|
||||
});
|
||||
this.loading = false;
|
||||
}, 2000);
|
||||
},
|
||||
initChart1() {
|
||||
this.chartInstance2 = echarts.init(document.getElementById('main1'));
|
||||
const option = {
|
||||
title: {
|
||||
text: '主播实时热度排行'
|
||||
},
|
||||
xAxis: {
|
||||
type: 'value',
|
||||
name: '热度'
|
||||
},
|
||||
yAxis: {
|
||||
type: 'category',
|
||||
data: [
|
||||
"英雄联盟赛事",
|
||||
"MrGemini",
|
||||
"金咕咕金咕咕doinb",
|
||||
"进击的神乐",
|
||||
"即将拥有人鱼线的PDD",
|
||||
"叫我老陈就好了",
|
||||
"王者荣耀官方赛事",
|
||||
"Xleft小叮当",
|
||||
"进击D神乐",
|
||||
"狂仔酷炫",
|
||||
],
|
||||
name: '主播'
|
||||
},
|
||||
legend: {
|
||||
data: ['热度']
|
||||
},
|
||||
series: [
|
||||
{
|
||||
data: this.data2,
|
||||
type: 'bar',
|
||||
label: {
|
||||
show: true,
|
||||
position: 'right'
|
||||
},
|
||||
name: '热度'
|
||||
}
|
||||
]
|
||||
};
|
||||
this.chartInstance2.setOption(option);
|
||||
},
|
||||
updateData1() {
|
||||
setInterval(() => {
|
||||
// 每个数据为随机+20-50
|
||||
this.data2 = this.data2.map(item => item + Math.floor(Math.random() * 31) + 20);
|
||||
// 对数据进行排序
|
||||
this.data2.sort((a, b) => a - b);
|
||||
this.chartInstance2.setOption({
|
||||
series: [{
|
||||
data: this.data2
|
||||
}]
|
||||
});
|
||||
}, 1000);
|
||||
},
|
||||
initChart2() {
|
||||
this.chartInstance3 = echarts.init(document.getElementById('main2'));
|
||||
const option = {
|
||||
title: {
|
||||
text: '礼物实时总值'
|
||||
},
|
||||
legend: {
|
||||
data: ['礼物总值']
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
name: '每10分钟'
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
name: '礼物总值'
|
||||
},
|
||||
series: [{
|
||||
data: this.data3,
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
name: '礼物总值',
|
||||
itemStyle: {
|
||||
opacity: 0
|
||||
},
|
||||
lineStyle: {
|
||||
width: 2
|
||||
}
|
||||
}]
|
||||
}
|
||||
this.chartInstance3.setOption(option);
|
||||
},
|
||||
updateData3() {
|
||||
setInterval(() => {
|
||||
if (this.data3.length >= 60) {
|
||||
this.data3.shift();
|
||||
}
|
||||
this.data3.push(Math.floor(Math.random() * (5000 - 3000 + 1)) + this.data3[this.data3.length - 1]);
|
||||
this.chartInstance3.setOption({
|
||||
xAxis: {
|
||||
data: this.data3.map((item, index) => {
|
||||
const date = new Date();
|
||||
date.setMinutes(date.getMinutes() - this.data3.length + index);
|
||||
return `${date.getHours()}:${date.getMinutes()}`;
|
||||
})
|
||||
},
|
||||
series: [{
|
||||
data: this.data3
|
||||
}]
|
||||
});
|
||||
}, 1000);
|
||||
},
|
||||
initChart3() {
|
||||
this.chartInstance4 = echarts.init(document.getElementById('main3'));
|
||||
const option = {
|
||||
title: {
|
||||
text: '每小时弹幕人数'
|
||||
},
|
||||
legend: {
|
||||
data: ['弹幕人数']
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
name: '每小时'
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
name: '弹幕人数'
|
||||
},
|
||||
series: [{
|
||||
data: this.data4,
|
||||
type: 'line',
|
||||
areaStyle: {},
|
||||
name: '弹幕人数',
|
||||
itemStyle: {
|
||||
opacity: 0
|
||||
}
|
||||
}]
|
||||
}
|
||||
this.chartInstance4.setOption(option);
|
||||
},
|
||||
updateData2() {
|
||||
setInterval(() => {
|
||||
if (this.data4.length >= 24) {
|
||||
this.data4.shift();
|
||||
}
|
||||
this.data4.push(Math.floor(Math.random() * 15000) + 500);
|
||||
this.chartInstance4.setOption({
|
||||
series: [{
|
||||
data: this.data4
|
||||
}]
|
||||
});
|
||||
}, 1000);
|
||||
},
|
||||
updateData4() {
|
||||
setInterval(() => {
|
||||
// + 50-100
|
||||
this.num += Math.floor(Math.random() * 50) + 50;
|
||||
this.redu += Math.floor(Math.random() * 50) + 50;
|
||||
this.danmu += Math.floor(Math.random() * 50) + 50;
|
||||
this.liwu += Math.floor(Math.random() * 50) + 50;
|
||||
}, 1000);
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.initChart1();
|
||||
this.updateData1();
|
||||
this.initChart2();
|
||||
this.updateData3();
|
||||
this.initChart3();
|
||||
this.updateData2();
|
||||
this.updateData4();
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.outer {
|
||||
padding: 30px;
|
||||
|
||||
.grid {
|
||||
background-color: white;
|
||||
padding: 30px;
|
||||
|
||||
.peripheral {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background-color: rgb(239, 239, 239);
|
||||
|
||||
.card {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,60 +1,57 @@
|
|||
<template>
|
||||
<div class="card">
|
||||
<a-card title="直播实时数据分析" :loading="loading" :bordered="false">
|
||||
<a-row style="height: 100%;width: 98%;">
|
||||
<a-col :span="12" style="height: 100%;padding: 6px">
|
||||
<a-card style="height: 400px; width:100%; border-radius: 10px;"
|
||||
:body-style="{ height: '95%', width: '100%', borderRadius: '10px' }">
|
||||
<div style="font-size: 30px;font-weight: bold;padding-bottom: 15px;">直播概况</div>
|
||||
<div style="display: flex; flex-wrap: wrap; justify-content: center; padding-top: 15px;">
|
||||
<div style="flex: 50%; text-align: center; padding: 5px;">
|
||||
<div style="font-size: 20px; font-weight: bold;">活跃观众</div>
|
||||
<div style="font-size: 40px;">{{ num }}</div>
|
||||
<div class="outer">
|
||||
<div class="grid">
|
||||
<a-card title="直播实时数据分析" :loading="loading" :bordered="false">
|
||||
<template #extra>
|
||||
<div style="font-size: 25px;">当前主播为 林cute哟</div>
|
||||
</template>
|
||||
<a-row style="height: 100%;width: 98%;">
|
||||
<a-col :span="12" style="height: 100%;padding: 6px">
|
||||
<a-card style="height: 400px; width:100%; border-radius: 10px;"
|
||||
:body-style="{ height: '95%', width: '100%', borderRadius: '10px' }">
|
||||
<iframe :src="iframeUrl" style="width: 100%; height: 500px;"></iframe>
|
||||
</a-card>
|
||||
</a-col>
|
||||
<a-col :span="12" style="height: 100%;padding: 6px">
|
||||
<a-card style="height: 400px; width:100%; border-radius: 10px;"
|
||||
:body-style="{ height: '95%', width: '100%', borderRadius: '10px' }">
|
||||
<div style="font-size: 30px;font-weight: bold;padding-bottom: 15px;">主播信息</div>
|
||||
<div style="flex-wrap: wrap; justify-content: center; padding-top: 15px;">
|
||||
<div style="font-size: 20px;font-weight: bold;float: left;">
|
||||
<div>ID: 153443</div>
|
||||
</br>
|
||||
<div style="padding-top: 5px;">昵称: 林cute哟</div></br>
|
||||
<div style="padding-top: 5px;">等级: 125</div></br>
|
||||
<div style="padding-top: 5px;">性别: 女</div></br>
|
||||
</div>
|
||||
<div style="font-size: 20px;font-weight: bold;float: right;">
|
||||
<div>直播间ID: 6818</div>
|
||||
</br>
|
||||
<div style="padding-top: 5px;">主题: 【火锅点歌】</div></br>
|
||||
<div style="padding-top: 5px;">标签: 跳舞，唱歌，聊天</div></br>
|
||||
</div>
|
||||
</div>
|
||||
<div style="flex: 50%; text-align: center; padding: 5px;">
|
||||
<div style="font-size: 14px;font-weight: bold;">平均热度</div>
|
||||
<div style="font-size: 40px;">{{ redu }}</div>
|
||||
</div>
|
||||
<div style="flex: 50%; text-align: center; padding: 5px;">
|
||||
<div style="font-size: 14px;font-weight: bold;">弹幕数量</div>
|
||||
<div style="font-size: 40px;">{{ danmu }}</div>
|
||||
</div>
|
||||
<div style="flex: 50%; text-align: center; padding: 5px;">
|
||||
<div style="font-size: 14px;font-weight: bold;">礼物数量</div>
|
||||
<div style="font-size: 40px;">{{ liwu }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</a-card>
|
||||
</a-card>
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
||||
</a-col>
|
||||
<a-col :span="12" style="height: 100%;padding: 6px">
|
||||
<a-card style="height: 400px; width:100%; border-radius: 10px;"
|
||||
:body-style="{ height: '95%', width: '100%', borderRadius: '10px' }">
|
||||
<div id="main2" style="height: 100%; width: 100%"></div>
|
||||
</a-card>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-row style="height: 100%; width: 98%; display: flex; justify-content: space-between;">
|
||||
<a-col :span="12" style="height: 100%; padding: 6px">
|
||||
<a-card style="height: 400px; width:100%; border-radius: 10px;"
|
||||
:body-style="{ height: '95%', width: '100%', borderRadius: '10px' }">
|
||||
<div id="main3" style="height: 100%; width: 100%"></div>
|
||||
</a-card>
|
||||
</a-col>
|
||||
<a-col :span="12" style="height: 100%; padding: 6px">
|
||||
<a-card style="height: 400px; width:100%; border-radius: 10px;"
|
||||
:body-style="{ height: '95%', width: '100%', borderRadius: '10px' }">
|
||||
<div id="main1" style="height: 100%; width: 100%"></div>
|
||||
</a-card>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<!-- <template #extra>
|
||||
<a-button type="primary" @click="getData()">同步数据</a-button>
|
||||
</template>
|
||||
<a-table :columns="columns" :data-source="datasets" bordered>
|
||||
</a-table> -->
|
||||
<a-row style="height: 100%; width: 98%; display: flex; justify-content: space-between;">
|
||||
<a-col :span="12" style="height: 100%; padding: 6px">
|
||||
<a-card style="height: 400px; width:100%; border-radius: 10px;"
|
||||
:body-style="{ height: '95%', width: '100%', borderRadius: '10px' }">
|
||||
<div id="main3" style="height: 100%; width: 100%"></div>
|
||||
</a-card>
|
||||
</a-col>
|
||||
<a-col :span="12" style="height: 100%; padding: 6px">
|
||||
<a-card style="height: 400px; width:100%; border-radius: 10px;"
|
||||
:body-style="{ height: '95%', width: '100%', borderRadius: '10px' }">
|
||||
<div id="main1" style="height: 100%; width: 100%"></div>
|
||||
</a-card>
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
||||
</a-card>
|
||||
</a-card>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -97,6 +94,7 @@ const columns = [
|
|||
export default {
|
||||
data() {
|
||||
return {
|
||||
iframeUrl: 'https://www.huya.com/520209',
|
||||
datasets: [
|
||||
{
|
||||
name: '英雄联盟赛事',
|
||||
|
|
@ -219,29 +217,15 @@ export default {
|
|||
28654,
|
||||
28537,
|
||||
],
|
||||
data3: [80002, 82024, 85383.5],
|
||||
data4: [10869, 11108, 12109],
|
||||
num: 4149861,
|
||||
redu: 31904,
|
||||
danmu: 9028189,
|
||||
liwu: 303691,
|
||||
data3: [802, 8224, 883.5],
|
||||
data4: [169, 108, 129],
|
||||
num: 41461,
|
||||
redu: 304,
|
||||
danmu: 90189,
|
||||
liwu: 3691,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
getData() {
|
||||
this.loading = true;
|
||||
setTimeout(() => {
|
||||
//将数据进行随机的加减变化
|
||||
this.datasets.forEach((item) => {
|
||||
item.Aperson += Math.floor(Math.random() * 100);
|
||||
item.Cnumber += Math.floor(Math.random() * 50);
|
||||
item.Cperson += Math.floor(Math.random() * 10);
|
||||
item.Gperson += Math.floor(Math.random() * 10);
|
||||
item.Gsum += Math.floor(Math.random() * 1000);
|
||||
});
|
||||
this.loading = false;
|
||||
}, 2000);
|
||||
},
|
||||
initChart1() {
|
||||
this.chartInstance2 = echarts.init(document.getElementById('main1'));
|
||||
const option = {
|
||||
|
|
@ -298,64 +282,11 @@ export default {
|
|||
});
|
||||
}, 1000);
|
||||
},
|
||||
initChart2() {
|
||||
this.chartInstance3 = echarts.init(document.getElementById('main2'));
|
||||
const option = {
|
||||
title: {
|
||||
text: '礼物实时总值'
|
||||
},
|
||||
legend: {
|
||||
data: ['礼物总值']
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
name: '每10分钟'
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
name: '礼物总值'
|
||||
},
|
||||
series: [{
|
||||
data: this.data3,
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
name: '礼物总值',
|
||||
itemStyle: {
|
||||
opacity: 0
|
||||
},
|
||||
lineStyle: {
|
||||
width: 2
|
||||
}
|
||||
}]
|
||||
}
|
||||
this.chartInstance3.setOption(option);
|
||||
},
|
||||
updateData3() {
|
||||
setInterval(() => {
|
||||
if (this.data3.length >= 60) {
|
||||
this.data3.shift();
|
||||
}
|
||||
this.data3.push(Math.floor(Math.random() * (5000 - 3000 + 1)) + this.data3[this.data3.length - 1]);
|
||||
this.chartInstance3.setOption({
|
||||
xAxis: {
|
||||
data: this.data3.map((item, index) => {
|
||||
const date = new Date();
|
||||
date.setMinutes(date.getMinutes() - this.data3.length + index);
|
||||
return `${date.getHours()}:${date.getMinutes()}`;
|
||||
})
|
||||
},
|
||||
series: [{
|
||||
data: this.data3
|
||||
}]
|
||||
});
|
||||
}, 1000);
|
||||
},
|
||||
initChart3() {
|
||||
this.chartInstance4 = echarts.init(document.getElementById('main3'));
|
||||
const option = {
|
||||
title: {
|
||||
text: '每小时弹幕人数'
|
||||
text: '实时弹幕人数'
|
||||
},
|
||||
legend: {
|
||||
data: ['弹幕人数']
|
||||
|
|
@ -386,7 +317,7 @@ export default {
|
|||
if (this.data4.length >= 24) {
|
||||
this.data4.shift();
|
||||
}
|
||||
this.data4.push(Math.floor(Math.random() * 15000) + 500);
|
||||
this.data4.push(Math.floor(Math.random() * 150) + 50);
|
||||
this.chartInstance4.setOption({
|
||||
series: [{
|
||||
data: this.data4
|
||||
|
|
@ -407,8 +338,6 @@ export default {
|
|||
mounted() {
|
||||
this.initChart1();
|
||||
this.updateData1();
|
||||
this.initChart2();
|
||||
this.updateData3();
|
||||
this.initChart3();
|
||||
this.updateData2();
|
||||
this.updateData4();
|
||||
|
|
@ -417,16 +346,25 @@ export default {
|
|||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.peripheral {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background-color: rgb(239, 239, 239);
|
||||
.outer {
|
||||
padding: 30px;
|
||||
|
||||
.card {
|
||||
height: 100%;
|
||||
.grid {
|
||||
background-color: white;
|
||||
padding: 30px;
|
||||
|
||||
.peripheral {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background-color: rgb(239, 239, 239);
|
||||
|
||||
.card {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -146,11 +146,6 @@
|
|||
let multi_depart = loginResult.multi_depart;
|
||||
//0:无部门 1:一个部门 2:多个部门
|
||||
if (multi_depart == 0) {
|
||||
notification.warn({
|
||||
message: '提示',
|
||||
description: `您尚未归属部门,请确认账号信息`,
|
||||
duration: 3,
|
||||
});
|
||||
isMultiDepart.value = false;
|
||||
} else if (multi_depart == 2) {
|
||||
isMultiDepart.value = true;
|
||||
|
|
|
|||
Loading…
Reference in New Issue