From dc6ec4ac94db83120d56bdf8ee5275ed5845f3e9 Mon Sep 17 00:00:00 2001
From: xbx <1827135378@qq.com>
Date: Sat, 11 May 2024 12:32:18 +0800
Subject: [PATCH] =?UTF-8?q?=E9=A6=96=E9=A1=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/live/shouye.vue | 286 ++++++++++++++++++++++++++++++++++++++
 1 file changed, 286 insertions(+)
 create mode 100644 src/views/live/shouye.vue

diff --git a/src/views/live/shouye.vue b/src/views/live/shouye.vue
new file mode 100644
index 0000000..9fcdbd7
--- /dev/null
+++ b/src/views/live/shouye.vue
@@ -0,0 +1,286 @@
+<template>
+    <div class="outer">
+        <div class="grid">
+            <a-card :loading="loading" :bordered="false">
+                <a-row style="height: 100%;width: 98%;">
+                    <a-col :span="24" style="height: 100%;padding: 6px">
+                        <a-card style="height: 300px; width:100%; border-radius: 10px;"
+                            :body-style="{ height: '95%', width: '100%', borderRadius: '10px' }">
+                            <div style="font-size: 25px;font-weight: bold;padding-bottom: 15px;">平台当天直播概况</div>
+                            <div style="display: flex; flex-wrap: nowrap; 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: 30px;">{{ num }}</div>
+                                </div>
+                                <div style="flex: 50%; text-align: center; padding: 5px;">
+                                    <div style="font-size: 20px;font-weight: bold;">平均热度</div>
+                                    <div style="font-size: 30px;">{{ redu }}</div>
+                                </div>
+                                <div style="flex: 50%; text-align: center; padding: 5px;">
+                                    <div style="font-size: 20px;font-weight: bold;">直播类型</div>
+                                    <div style="font-size: 30px;">{{ danmu }}</div>
+                                </div>
+                                <div style="flex: 50%; text-align: center; padding: 5px;">
+                                    <div style="font-size: 20px;font-weight: bold;">活跃观众</div>
+                                    <div style="font-size: 30px;">{{ liwu }}</div>
+                                </div>
+                            </div>
+                            <div style="display: flex; flex-wrap: nowrap; 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: 30px;">3399623</div>
+                                </div>
+                                <div style="flex: 50%; text-align: center; padding: 5px;">
+                                    <div style="font-size: 20px;font-weight: bold;">弹幕人数</div>
+                                    <div style="font-size: 30px;">930726</div>
+                                </div>
+                                <div style="flex: 50%; text-align: center; padding: 5px;">
+                                    <div style="font-size: 20px;font-weight: bold;">礼物价值（元）</div>
+                                    <div style="font-size: 30px;">6274697.4</div>
+                                </div>
+                                <div style="flex: 50%; text-align: center; padding: 5px;">
+                                    <div style="font-size: 20px;font-weight: bold;">礼物人数</div>
+                                    <div style="font-size: 30px;">197557</div>
+                                </div>
+                            </div>
+                        </a-card>
+                    </a-col>
+                </a-row>
+                <a-row style="height: 100%;width: 98%; padding-top: 10px;">
+                    <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="flex: 50%; text-align: center; padding: 5px;">
+                                <div style="font-size: 24px; font-weight: bold; color: #333; margin-bottom: 10px;">系统介绍
+                                    <div style="font-size: 16px; line-height: 2.0; color: #666;">
+                                        <br>
+                                        该平台能够实时监控并分析来自多个直播源的数据。通过采集包括观众互动、观看时长、弹幕评论等多维度数据，平台能够为直播运营者提供关键的业务洞察，帮助他们优化内容策略、提升观众参与度，并有效地调整营销活动。此外，该平台还将应用机器学习算法对观众偏好进行预测，以推动个性化内容推荐和广告投放，最终实现增强用户体验和提升商业收益的双重目标。
+                                    </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="main1" style="height: 100%; width: 100%"></div>
+                        </a-card>
+                    </a-col>
+                </a-row>
+            </a-card>
+        </div>
+    </div>
+</template>
+<script>
+import * as echarts from 'echarts';
+
+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,
+                },
+            ],
+            loading: false,
+            data2: [
+                27408,
+                27975,
+                28537,
+                28654,
+                29596,
+                30146,
+                30356,
+                30510,
+                31701,
+                32036,
+                32988,
+                59523
+            ],
+            data3: [80002, 82024, 85383.5],
+            data4: [10869, 11108, 12109],
+            num: 4149861,
+            redu: 31904,
+            danmu: 9028189,
+            liwu: 303691,
+        };
+    },
+    methods: {
+        initChart1() {
+            this.chartInstance2 = echarts.init(document.getElementById('main1'));
+            const option = {
+                title: {
+                    text: '主播当天热度排行'
+                },
+                xAxis: {
+                    type: 'value',
+                    name: '热度'
+                },
+                yAxis: {
+                    type: 'category',
+                    data: [
+                        "谢彬DD",
+                        "pigff",
+                        "狂仔酷炫",
+                        "进击D神乐",
+                        "Xleft小叮当",
+                        "王者荣耀官方赛事",
+                        "叫我老陈就好了",
+                        "即将拥有人鱼线的PDD",
+                        "进击的神乐",
+                        "金咕咕金咕咕doinb",
+                        "MrGemini",
+                        "英雄联盟赛事"
+                    ],
+                    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);
+        },
+        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.updateData4();
+    }
+};
+</script>