This commit is contained in:
hh
parent
24940b5594
commit
0ba780b0c5
File diff suppressed because it is too large
Load Diff
|
|
@ -1,9 +1,12 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="outer">
|
<div class="outer">
|
||||||
<div class="grid">
|
<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-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="" />
|
<img :src="item.img" alt="" />
|
||||||
<p style="font-weight: bold;margin-top: 5px;padding-left: 5px;">{{ item.title }}</p>
|
<p style="font-weight: bold;margin-top: 5px;padding-left: 5px;">{{ item.title }}</p>
|
||||||
<div style="display: flex">
|
<div style="display: flex">
|
||||||
|
|
@ -12,12 +15,17 @@
|
||||||
<a-icon type="fire" style="color: red; margin-left: auto" />
|
<a-icon type="fire" style="color: red; margin-left: auto" />
|
||||||
<span>{{ item.hot }}</span>
|
<span>{{ item.hot }}</span>
|
||||||
</div>
|
</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>
|
</div>
|
||||||
</a-card>
|
</a-card>
|
||||||
</a-col>
|
</a-col>
|
||||||
</a-row>
|
</a-row>
|
||||||
|
<a-spin v-if="loading">
|
||||||
|
<div>正在查询中</div>
|
||||||
|
</a-spin>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
@ -142,8 +150,26 @@ export default {
|
||||||
img: pic16
|
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>
|
</script>
|
||||||
|
|
||||||
|
|
@ -157,12 +183,14 @@ export default {
|
||||||
|
|
||||||
/* margin: 30px; */
|
/* margin: 30px; */
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
||||||
// height: 1000px;
|
// height: 1000px;
|
||||||
.hot {
|
.hot {
|
||||||
padding-right: 5px;
|
padding-right: 5px;
|
||||||
margin-left: auto;
|
margin-left: auto;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
|
|
||||||
.name {
|
.name {
|
||||||
padding-left: 5px;
|
padding-left: 5px;
|
||||||
margin-right: auto;
|
margin-right: auto;
|
||||||
|
|
|
||||||
|
|
@ -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,39 +1,40 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="card">
|
<div class="outer">
|
||||||
|
<div class="grid">
|
||||||
<a-card title="直播实时数据分析" :loading="loading" :bordered="false">
|
<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-row style="height: 100%;width: 98%;">
|
||||||
<a-col :span="12" style="height: 100%;padding: 6px">
|
<a-col :span="12" style="height: 100%;padding: 6px">
|
||||||
<a-card style="height: 400px; width:100%; border-radius: 10px;"
|
<a-card style="height: 400px; width:100%; border-radius: 10px;"
|
||||||
:body-style="{ height: '95%', width: '100%', borderRadius: '10px' }">
|
:body-style="{ height: '95%', width: '100%', borderRadius: '10px' }">
|
||||||
<div style="font-size: 30px;font-weight: bold;padding-bottom: 15px;">直播概况</div>
|
<iframe :src="iframeUrl" style="width: 100%; height: 500px;"></iframe>
|
||||||
<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-card>
|
||||||
|
|
||||||
</a-col>
|
</a-col>
|
||||||
<a-col :span="12" style="height: 100%;padding: 6px">
|
<a-col :span="12" style="height: 100%;padding: 6px">
|
||||||
<a-card style="height: 400px; width:100%; border-radius: 10px;"
|
<a-card style="height: 400px; width:100%; border-radius: 10px;"
|
||||||
:body-style="{ height: '95%', width: '100%', borderRadius: '10px' }">
|
:body-style="{ height: '95%', width: '100%', borderRadius: '10px' }">
|
||||||
<div id="main2" style="height: 100%; width: 100%"></div>
|
<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>
|
||||||
</a-card>
|
</a-card>
|
||||||
</a-col>
|
</a-col>
|
||||||
</a-row>
|
</a-row>
|
||||||
|
|
||||||
<a-row style="height: 100%; width: 98%; display: flex; justify-content: space-between;">
|
<a-row style="height: 100%; width: 98%; display: flex; justify-content: space-between;">
|
||||||
<a-col :span="12" style="height: 100%; padding: 6px">
|
<a-col :span="12" style="height: 100%; padding: 6px">
|
||||||
<a-card style="height: 400px; width:100%; border-radius: 10px;"
|
<a-card style="height: 400px; width:100%; border-radius: 10px;"
|
||||||
|
|
@ -48,14 +49,10 @@
|
||||||
</a-card>
|
</a-card>
|
||||||
</a-col>
|
</a-col>
|
||||||
</a-row>
|
</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>
|
</a-card>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
@ -97,6 +94,7 @@ const columns = [
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
iframeUrl: 'https://www.huya.com/520209',
|
||||||
datasets: [
|
datasets: [
|
||||||
{
|
{
|
||||||
name: '英雄联盟赛事',
|
name: '英雄联盟赛事',
|
||||||
|
|
@ -219,29 +217,15 @@ export default {
|
||||||
28654,
|
28654,
|
||||||
28537,
|
28537,
|
||||||
],
|
],
|
||||||
data3: [80002, 82024, 85383.5],
|
data3: [802, 8224, 883.5],
|
||||||
data4: [10869, 11108, 12109],
|
data4: [169, 108, 129],
|
||||||
num: 4149861,
|
num: 41461,
|
||||||
redu: 31904,
|
redu: 304,
|
||||||
danmu: 9028189,
|
danmu: 90189,
|
||||||
liwu: 303691,
|
liwu: 3691,
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
methods: {
|
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() {
|
initChart1() {
|
||||||
this.chartInstance2 = echarts.init(document.getElementById('main1'));
|
this.chartInstance2 = echarts.init(document.getElementById('main1'));
|
||||||
const option = {
|
const option = {
|
||||||
|
|
@ -298,64 +282,11 @@ export default {
|
||||||
});
|
});
|
||||||
}, 1000);
|
}, 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() {
|
initChart3() {
|
||||||
this.chartInstance4 = echarts.init(document.getElementById('main3'));
|
this.chartInstance4 = echarts.init(document.getElementById('main3'));
|
||||||
const option = {
|
const option = {
|
||||||
title: {
|
title: {
|
||||||
text: '每小时弹幕人数'
|
text: '实时弹幕人数'
|
||||||
},
|
},
|
||||||
legend: {
|
legend: {
|
||||||
data: ['弹幕人数']
|
data: ['弹幕人数']
|
||||||
|
|
@ -386,7 +317,7 @@ export default {
|
||||||
if (this.data4.length >= 24) {
|
if (this.data4.length >= 24) {
|
||||||
this.data4.shift();
|
this.data4.shift();
|
||||||
}
|
}
|
||||||
this.data4.push(Math.floor(Math.random() * 15000) + 500);
|
this.data4.push(Math.floor(Math.random() * 150) + 50);
|
||||||
this.chartInstance4.setOption({
|
this.chartInstance4.setOption({
|
||||||
series: [{
|
series: [{
|
||||||
data: this.data4
|
data: this.data4
|
||||||
|
|
@ -407,8 +338,6 @@ export default {
|
||||||
mounted() {
|
mounted() {
|
||||||
this.initChart1();
|
this.initChart1();
|
||||||
this.updateData1();
|
this.updateData1();
|
||||||
this.initChart2();
|
|
||||||
this.updateData3();
|
|
||||||
this.initChart3();
|
this.initChart3();
|
||||||
this.updateData2();
|
this.updateData2();
|
||||||
this.updateData4();
|
this.updateData4();
|
||||||
|
|
@ -417,6 +346,13 @@ export default {
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="less" scoped>
|
<style lang="less" scoped>
|
||||||
|
.outer {
|
||||||
|
padding: 30px;
|
||||||
|
|
||||||
|
.grid {
|
||||||
|
background-color: white;
|
||||||
|
padding: 30px;
|
||||||
|
|
||||||
.peripheral {
|
.peripheral {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
|
|
@ -429,4 +365,6 @@ export default {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
@ -146,11 +146,6 @@
|
||||||
let multi_depart = loginResult.multi_depart;
|
let multi_depart = loginResult.multi_depart;
|
||||||
//0:无部门 1:一个部门 2:多个部门
|
//0:无部门 1:一个部门 2:多个部门
|
||||||
if (multi_depart == 0) {
|
if (multi_depart == 0) {
|
||||||
notification.warn({
|
|
||||||
message: '提示',
|
|
||||||
description: `您尚未归属部门,请确认账号信息`,
|
|
||||||
duration: 3,
|
|
||||||
});
|
|
||||||
isMultiDepart.value = false;
|
isMultiDepart.value = false;
|
||||||
} else if (multi_depart == 2) {
|
} else if (multi_depart == 2) {
|
||||||
isMultiDepart.value = true;
|
isMultiDepart.value = true;
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue