From ff28404999d5dc0644e32dde168dc393deb4c93e Mon Sep 17 00:00:00 2001
From: Cool <747682928@qq.com>
Date: Fri, 10 May 2024 17:08:46 +0800
Subject: [PATCH] =?UTF-8?q?=E4=B8=BB=E6=92=AD=E5=88=97=E8=A1=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/live/AllGlory.vue | 1064 +++++++++++++++++++++++++++++++++--
 1 file changed, 1006 insertions(+), 58 deletions(-)

diff --git a/src/views/live/AllGlory.vue b/src/views/live/AllGlory.vue
index e3cf502..f2569f1 100644
--- a/src/views/live/AllGlory.vue
+++ b/src/views/live/AllGlory.vue
@@ -1,14 +1,25 @@
 <template>
   <div class="outer">
     <div class="grid">
-      <div style="width: 100%;padding-left: 90%;">
-        <a-button type="primary" @click="flech">刷新页面</a-button>
+      <div style="display: flex; padding: 10px">
+        <div style="width: 200px">
+          <div style="display: flex">
+            <a-radio-group v-model:value="radio" @change="change">
+              <a-radio :value="1">直播中</a-radio>
+              <a-radio :value="2">未开播</a-radio>
+            </a-radio-group>
+          </div>
+        </div>
+        <div style="width: 100%; display: flex; justify-content: flex-end; margin-right: 1.5%">
+          <a-button type="primary" @click="flech">刷新页面</a-button>
+        </div>
       </div>
+
       <a-row v-if="!loading">
         <a-col :span="6" v-for="(item, index) in gloryData" :key="index">
-          <a-card style="cursor: pointer;" :bordered="false" @click="goto">
+          <a-card style="cursor: pointer" :bordered="false">
             <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">
               <span class="name"> {{ item.id }}</span>
               <div class="hot">
@@ -16,13 +27,46 @@
                 <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 style="padding-top: 10px; float: right">
+              <a-button type="primary" @click="detail(index)">查看详情</a-button>
+              <a-button type="primary" style="margin-left: 10px" @click="gotoReal(index)">实时分析</a-button>
             </div>
           </a-card>
         </a-col>
       </a-row>
+      <a-modal v-model:open="isShow" :mask="false" title="直播详情" @ok="isShow = false" @cancel="isShow = false" style="width: 1000px">
+        <div style="display: flex; padding: 20px">
+          <div style="width: 250px">
+            <p style="font-weight: bold">主播信息</p>
+
+            <p>直播标题：{{ gloryData[gloryindex].title }}</p>
+            <p>主播：{{ gloryData[gloryindex].id }}</p>
+            <p>直播间ID：{{ gloryData[gloryindex].roomID }}</p>
+            <p>热度：{{ gloryData[gloryindex].hot }}</p>
+            <p>类型：{{ gloryData[gloryindex].type }}</p>
+            <p>点赞数：{{ gloryData[gloryindex].history['2024-05-10'].likes }}</p>
+            <p>评论数：{{ gloryData[gloryindex].history['2024-05-10'].comments }}</p>
+            <p>观看人数：{{ gloryData[gloryindex].history['2024-05-10'].viewers }}</p>
+            <p>收入：{{ gloryData[gloryindex].history['2024-05-10'].revenue }}</p>
+          </div>
+          <div style="width: 400px" class="modal">
+            <span style="font-weight: bold">历史数据</span>
+
+            <a-row :span="12" style="padding-top: 20px">
+              <a-col :span="12" v-for="(item, index) in gloryData[gloryindex].history" :key="index">
+                <a-card style="margin: 1px">
+                  <p>日期：{{ index }}</p>
+                  <p>观看人数：{{ item.viewers }}</p>
+                  <p>评论数：{{ item.comments }}</p>
+                  <p>点赞数：{{ item.likes }}</p>
+                  <p>收入：{{ item.revenue }}</p>
+                </a-card>
+              </a-col>
+            </a-row>
+          </div>
+          <div id="map1" style="width: 250px; height: 500px"> </div>
+        </div>
+      </a-modal>
       <a-spin v-if="loading">
         <div>正在查询中</div>
       </a-spin>
@@ -47,107 +91,944 @@ import pic13 from '@/assets/live/pic13.jpg';
 import pic14 from '@/assets/live/pic14.jpg';
 import pic15 from '@/assets/live/pic15.jpg';
 import pic16 from '@/assets/live/pic16.jpg';
+import * as echarts from 'echarts';
 
 export default {
   data() {
     return {
+      isShow: false,
+      gloryindex: 0,
+      radio: 0,
       gloryData: [
         {
           title: 'BLG 2:1 PSG MSI胜败分组赛',
           id: '虎牙英雄联盟赛事',
           hot: '100万',
           img: pic1,
+          type: '英雄联盟',
+          roomID: '681518',
+          history: {
+            '2024-05-05': {
+              viewers: 3055672,
+              comments: 6064893,
+              likes: 953607,
+              dislikes: 56078,
+              shares: 397026,
+              revenue: 1972068,
+            },
+            '2024-05-06': {
+              viewers: 3869472,
+              comments: 7656893,
+              likes: 1053607,
+              dislikes: 66078,
+              shares: 497026,
+              revenue: 2972068,
+            },
+            '2024-05-07': {
+              viewers: 4378142,
+              comments: 8666893,
+              likes: 1153607,
+              dislikes: 76078,
+              shares: 597026,
+              revenue: 3972068,
+            },
+            '2024-05-08': {
+              viewers: 3896172,
+              comments: 9676893,
+              likes: 1253607,
+              dislikes: 86078,
+              shares: 697026,
+              revenue: 4972068,
+            },
+            '2024-05-09': {
+              viewers: 4389172,
+              comments: 10676893,
+              likes: 1353607,
+              dislikes: 96078,
+              shares: 797026,
+              revenue: 5972068,
+            },
+            '2024-05-10': {
+              viewers: 5213472,
+              comments: 11676893,
+              likes: 1453607,
+              dislikes: 106078,
+              shares: 897026,
+              revenue: 6972068,
+            },
+          },
         },
         {
-          title: "haohaodapaiwei",
+          title: 'haohaodapaiwei',
           id: 'JDG.Kanavi',
-          hot: "13.3万",
-          img: pic2
+          hot: '13.3万',
+          img: pic2,
+          type: '英雄联盟',
+          roomID: '682219',
+          history: {
+            '2024-05-05': {
+              viewers: 355672,
+              comments: 664893,
+              likes: 95367,
+              dislikes: 5678,
+              shares: 39726,
+              revenue: 197268,
+            },
+            '2024-05-06': {
+              viewers: 386947,
+              comments: 765893,
+              likes: 105367,
+              dislikes: 6678,
+              shares: 49726,
+              revenue: 297268,
+            },
+            '2024-05-07': {
+              viewers: 437814,
+              comments: 866893,
+              likes: 115367,
+              dislikes: 7678,
+              shares: 59726,
+              revenue: 397268,
+            },
+            '2024-05-08': {
+              viewers: 389617,
+              comments: 967893,
+              likes: 125367,
+              dislikes: 8678,
+              shares: 69726,
+              revenue: 497268,
+            },
+            '2024-05-09': {
+              viewers: 438917,
+              comments: 1067893,
+              likes: 135367,
+              dislikes: 9678,
+              shares: 79726,
+              revenue: 597268,
+            },
+            '2024-05-10': {
+              viewers: 521347,
+              comments: 1167893,
+              likes: 145367,
+              dislikes: 10678,
+              shares: 89726,
+              revenue: 697268,
+            },
+          },
         },
         {
-          title: "韩一拉夫 韩服冲千分",
+          title: '韩一拉夫 韩服冲千分',
           id: '阿呆奥拉夫',
-          hot: "22.3万",
-          img: pic3
+          hot: '22.3万',
+          img: pic3,
+          type: '英雄联盟',
+          roomID: '679160',
+          history: {
+            '2024-05-05': {
+              viewers: 355672,
+              comments: 664893,
+              likes: 95367,
+              dislikes: 5678,
+              shares: 39726,
+              revenue: 197268,
+            },
+            '2024-05-06': {
+              viewers: 386947,
+              comments: 765893,
+              likes: 105367,
+              dislikes: 6678,
+              shares: 49726,
+              revenue: 297268,
+            },
+            '2024-05-07': {
+              viewers: 437814,
+              comments: 866893,
+              likes: 115367,
+              dislikes: 7678,
+              shares: 59726,
+              revenue: 397268,
+            },
+            '2024-05-08': {
+              viewers: 389617,
+              comments: 967893,
+              likes: 125367,
+              dislikes: 8678,
+              shares: 69726,
+              revenue: 497268,
+            },
+            '2024-05-09': {
+              viewers: 438917,
+              comments: 1067893,
+              likes: 135367,
+              dislikes: 9678,
+              shares: 79726,
+              revenue: 597268,
+            },
+            '2024-05-10': {
+              viewers: 521347,
+              comments: 1167893,
+              likes: 145367,
+              dislikes: 10678,
+              shares: 89726,
+              revenue: 697268,
+            },
+          },
         },
         {
-          title: "国服第一诺手!峡谷宗师冲王者!!!",
+          title: '国服第一诺手!峡谷宗师冲王者!!!',
           id: '黑洞king1',
-          hot: "24.5万",
-          img: pic4
+          hot: '24.5万',
+          img: pic4,
+          type: '英雄联盟',
+          roomID: '681518',
+          history: {
+            '2024-05-05': {
+              viewers: 355672,
+              comments: 664893,
+              likes: 95367,
+              dislikes: 5678,
+              shares: 39726,
+              revenue: 197268,
+            },
+            '2024-05-06': {
+              viewers: 386947,
+              comments: 765893,
+              likes: 105367,
+              dislikes: 6678,
+              shares: 49726,
+              revenue: 297268,
+            },
+            '2024-05-07': {
+              viewers: 437814,
+              comments: 866893,
+              likes: 115367,
+              dislikes: 7678,
+              shares: 59726,
+              revenue: 397268,
+            },
+            '2024-05-08': {
+              viewers: 389617,
+              comments: 967893,
+              likes: 125367,
+              dislikes: 8678,
+              shares: 69726,
+              revenue: 497268,
+            },
+            '2024-05-09': {
+              viewers: 438917,
+              comments: 1067893,
+              likes: 135367,
+              dislikes: 9678,
+              shares: 79726,
+              revenue: 597268,
+            },
+            '2024-05-10': {
+              viewers: 521347,
+              comments: 1167893,
+              likes: 145367,
+              dislikes: 10678,
+              shares: 89726,
+              revenue: 697268,
+            },
+          },
         },
         {
-          title: "解说下今天的比赛~",
+          title: '解说下今天的比赛~',
           id: 'kRYST4L',
-          hot: "559.9万",
-          img: pic5
+          hot: '559.9万',
+          img: pic5,
+          type: '英雄联盟',
+          roomID: '682219',
+          history: {
+            '2024-05-05': {
+              viewers: 1355672,
+              comments: 3664893,
+              likes: 795367,
+              dislikes: 45678,
+              shares: 379726,
+              revenue: 697268,
+            },
+            '2024-05-06': {
+              viewers: 1869472,
+              comments: 6656893,
+              likes: 1053607,
+              dislikes: 66078,
+              shares: 497026,
+              revenue: 2972068,
+            },
+            '2024-05-07': {
+              viewers: 2378142,
+              comments: 8666893,
+              likes: 1153607,
+              dislikes: 76078,
+              shares: 597026,
+              revenue: 3972068,
+            },
+            '2024-05-08': {
+              viewers: 1896172,
+              comments: 9676893,
+              likes: 1253607,
+              dislikes: 86078,
+              shares: 697026,
+              revenue: 4972068,
+            },
+            '2024-05-09': {
+              viewers: 2389172,
+              comments: 10676893,
+              likes: 1353607,
+              dislikes: 96078,
+              shares: 797026,
+              revenue: 5972068,
+            },
+            '2024-05-10': {
+              viewers: 2213472,
+              comments: 11676893,
+              likes: 1453607,
+              dislikes: 106078,
+              shares: 897026,
+              revenue: 6972068,
+            },
+          },
         },
 
         {
-          title: "5点跟姿态队练",
+          title: '5点跟姿态队练',
           id: 'Letme严君泽',
-          hot: "247.1万",
-          img: pic6
+          hot: '247.1万',
+          img: pic6,
+          type: '英雄联盟',
+          roomID: '679160',
+          history: {
+            '2024-05-05': {
+              viewers: 355672,
+              comments: 664893,
+              likes: 95367,
+              dislikes: 5678,
+              shares: 39726,
+              revenue: 197268,
+            },
+            '2024-05-06': {
+              viewers: 386947,
+              comments: 765893,
+              likes: 105367,
+              dislikes: 6678,
+              shares: 49726,
+              revenue: 297268,
+            },
+            '2024-05-07': {
+              viewers: 437814,
+              comments: 866893,
+              likes: 115367,
+              dislikes: 7678,
+              shares: 59726,
+              revenue: 397268,
+            },
+            '2024-05-08': {
+              viewers: 389617,
+              comments: 967893,
+              likes: 125367,
+              dislikes: 8678,
+              shares: 69726,
+              revenue: 497268,
+            },
+            '2024-05-09': {
+              viewers: 438917,
+              comments: 1067893,
+              likes: 135367,
+              dislikes: 9678,
+              shares: 79726,
+              revenue: 597268,
+            },
+            '2024-05-10': {
+              viewers: 521347,
+              comments: 1167893,
+              likes: 145367,
+              dislikes: 10678,
+              shares: 89726,
+              revenue: 697268,
+            },
+          },
         },
         {
-          title: "勤奋天王",
+          title: '勤奋天王',
           id: 'DANK1NG',
-          hot: "426.7万",
-          img: pic7
+          hot: '426.7万',
+          img: pic7,
+          type: 'CS2',
+          roomID: '289218',
+          history: {
+            '2024-05-05': {
+              viewers: 355672,
+              comments: 664893,
+              likes: 95367,
+              dislikes: 5678,
+              shares: 39726,
+              revenue: 197268,
+            },
+            '2024-05-06': {
+              viewers: 386947,
+              comments: 765893,
+              likes: 105367,
+              dislikes: 6678,
+              shares: 49726,
+              revenue: 297268,
+            },
+            '2024-05-07': {
+              viewers: 437814,
+              comments: 866893,
+              likes: 115367,
+              dislikes: 7678,
+              shares: 59726,
+              revenue: 397268,
+            },
+            '2024-05-08': {
+              viewers: 389617,
+              comments: 967893,
+              likes: 125367,
+              dislikes: 8678,
+              shares: 69726,
+              revenue: 497268,
+            },
+            '2024-05-09': {
+              viewers: 438917,
+              comments: 1067893,
+              likes: 135367,
+              dislikes: 9678,
+              shares: 79726,
+              revenue: 597268,
+            },
+            '2024-05-10': {
+              viewers: 521347,
+              comments: 1167893,
+              likes: 145367,
+              dislikes: 10678,
+              shares: 89726,
+              revenue: 697268,
+            },
+          },
         },
         {
-          title: "【Mr.mao】少点谩骂 多点鼓励!",
+          title: '【Mr.mao】少点谩骂 多点鼓励!',
           id: 'MAX-Mrmao',
-          hot: "19.1万",
-          img: pic8
+          hot: '19.1万',
+          img: pic8,
+          type: 'CS2',
+          roomID: '281738',
+          history: {
+            '2024-05-05': {
+              viewers: 355672,
+              comments: 664893,
+              likes: 95367,
+              dislikes: 5678,
+              shares: 39726,
+              revenue: 197268,
+            },
+            '2024-05-06': {
+              viewers: 386947,
+              comments: 765893,
+              likes: 105367,
+              dislikes: 6678,
+              shares: 49726,
+              revenue: 297268,
+            },
+            '2024-05-07': {
+              viewers: 437814,
+              comments: 866893,
+              likes: 115367,
+              dislikes: 7678,
+              shares: 59726,
+              revenue: 397268,
+            },
+            '2024-05-08': {
+              viewers: 389617,
+              comments: 967893,
+              likes: 125367,
+              dislikes: 8678,
+              shares: 69726,
+              revenue: 497268,
+            },
+            '2024-05-09': {
+              viewers: 438917,
+              comments: 1067893,
+              likes: 135367,
+              dislikes: 9678,
+              shares: 79726,
+              revenue: 597268,
+            },
+            '2024-05-10': {
+              viewers: 521347,
+              comments: 1167893,
+              likes: 145367,
+              dislikes: 10678,
+              shares: 89726,
+              revenue: 697268,
+            },
+          },
         },
         {
-          title: "小播一会儿，新主播",
+          title: '小播一会儿，新主播',
           id: '青象-矍然吖',
-          hot: "4.0万",
-          img: pic9
+          hot: '4.0万',
+          img: pic9,
+          type: 'CS2',
+          roomID: '234938',
+          history: {
+            '2024-05-05': {
+              viewers: 104934,
+              comments: 564893,
+              likes: 65367,
+              dislikes: 8678,
+              shares: 39726,
+              revenue: 8176,
+            },
+            '2024-05-06': {
+              viewers: 186947,
+              comments: 765893,
+              likes: 105367,
+              dislikes: 6678,
+              shares: 49726,
+              revenue: 297268,
+            },
+            '2024-05-07': {
+              viewers: 237814,
+              comments: 866893,
+              likes: 115367,
+              dislikes: 7678,
+              shares: 59726,
+              revenue: 397268,
+            },
+            '2024-05-08': {
+              viewers: 189617,
+              comments: 967893,
+              likes: 125367,
+              dislikes: 8678,
+              shares: 69726,
+              revenue: 497268,
+            },
+            '2024-05-09': {
+              viewers: 238917,
+              comments: 1067893,
+              likes: 135367,
+              dislikes: 9678,
+              shares: 79726,
+              revenue: 597268,
+            },
+            '2024-05-10': {
+              viewers: 221347,
+              comments: 1167893,
+              likes: 145367,
+              dislikes: 10678,
+              shares: 89726,
+              revenue: 697268,
+            },
+          },
         },
         {
-          title: "【新主播】上S的第一天~",
+          title: '【新主播】上S的第一天~',
           id: '十三月的故事',
-          hot: "12.6万",
-          img: pic10
+          hot: '12.6万',
+          img: pic10,
+          type: 'CS2',
+          roomID: '217637',
+          history: {
+            '2024-05-05': {
+              viewers: 355672,
+              comments: 664893,
+              likes: 95367,
+              dislikes: 5678,
+              shares: 39726,
+              revenue: 197268,
+            },
+            '2024-05-06': {
+              viewers: 386947,
+              comments: 765893,
+              likes: 105367,
+              dislikes: 6678,
+              shares: 49726,
+              revenue: 297268,
+            },
+            '2024-05-07': {
+              viewers: 437814,
+              comments: 866893,
+              likes: 115367,
+              dislikes: 7678,
+              shares: 59726,
+              revenue: 397268,
+            },
+            '2024-05-08': {
+              viewers: 389617,
+              comments: 967893,
+              likes: 125367,
+              dislikes: 8678,
+              shares: 69726,
+              revenue: 497268,
+            },
+            '2024-05-09': {
+              viewers: 438917,
+              comments: 1067893,
+              likes: 135367,
+              dislikes: 9678,
+              shares: 79726,
+              revenue: 597268,
+            },
+            '2024-05-10': {
+              viewers: 521347,
+              comments: 1167893,
+              likes: 145367,
+              dislikes: 10678,
+              shares: 89726,
+              revenue: 697268,
+            },
+          },
         },
         {
-          title: "速看 只整新奥恩大活!",
+          title: '速看 只整新奥恩大活!',
           id: '丸子头的文',
-          hot: "40.7万",
-          img: pic11
+          hot: '40.7万',
+          img: pic11,
+          type: '英雄联盟',
+          roomID: '619371',
+          history: {
+            '2024-05-05': {
+              viewers: 355672,
+              comments: 664893,
+              likes: 95367,
+              dislikes: 5678,
+              shares: 39726,
+              revenue: 197268,
+            },
+            '2024-05-06': {
+              viewers: 386947,
+              comments: 765893,
+              likes: 105367,
+              dislikes: 6678,
+              shares: 49726,
+              revenue: 297268,
+            },
+            '2024-05-07': {
+              viewers: 437814,
+              comments: 866893,
+              likes: 115367,
+              dislikes: 7678,
+              shares: 59726,
+              revenue: 397268,
+            },
+            '2024-05-08': {
+              viewers: 389617,
+              comments: 967893,
+              likes: 125367,
+              dislikes: 8678,
+              shares: 69726,
+              revenue: 497268,
+            },
+            '2024-05-09': {
+              viewers: 438917,
+              comments: 1067893,
+              likes: 135367,
+              dislikes: 9678,
+              shares: 79726,
+              revenue: 597268,
+            },
+            '2024-05-10': {
+              viewers: 521347,
+              comments: 1167893,
+              likes: 145367,
+              dislikes: 10678,
+              shares: 89726,
+              revenue: 697268,
+            },
+          },
         },
         {
-          title: "2024NBPL春季赛",
+          title: '2024NBPL春季赛',
           id: '虎牙永劫无间赛事',
-          hot: "112.3万",
-          img: pic12
+          hot: '112.3万',
+          img: pic12,
+          type: '永劫无间',
+          roomID: '1359712',
+          history: {
+            '2024-05-05': {
+              viewers: 355672,
+              comments: 664893,
+              likes: 95367,
+              dislikes: 5678,
+              shares: 39726,
+              revenue: 197268,
+            },
+            '2024-05-06': {
+              viewers: 386947,
+              comments: 765893,
+              likes: 105367,
+              dislikes: 6678,
+              shares: 49726,
+              revenue: 297268,
+            },
+            '2024-05-07': {
+              viewers: 437814,
+              comments: 866893,
+              likes: 115367,
+              dislikes: 7678,
+              shares: 59726,
+              revenue: 397268,
+            },
+            '2024-05-08': {
+              viewers: 389617,
+              comments: 967893,
+              likes: 125367,
+              dislikes: 8678,
+              shares: 69726,
+              revenue: 497268,
+            },
+            '2024-05-09': {
+              viewers: 438917,
+              comments: 1067893,
+              likes: 135367,
+              dislikes: 9678,
+              shares: 79726,
+              revenue: 597268,
+            },
+            '2024-05-10': {
+              viewers: 521347,
+              comments: 1167893,
+              likes: 145367,
+              dislikes: 10678,
+              shares: 89726,
+              revenue: 697268,
+            },
+          },
         },
         {
-          title: "天人前10 书300分 接3排",
+          title: '天人前10 书300分 接3排',
           id: '巅峰-鱼子酱KK',
-          hot: "8.2万",
-          img: pic13
+          hot: '8.2万',
+          img: pic13,
+          type: '永劫无间',
+          roomID: '1379347',
+          history: {
+            '2024-05-05': {
+              viewers: 355672,
+              comments: 664893,
+              likes: 95367,
+              dislikes: 5678,
+              shares: 39726,
+              revenue: 197268,
+            },
+            '2024-05-06': {
+              viewers: 386947,
+              comments: 765893,
+              likes: 105367,
+              dislikes: 6678,
+              shares: 49726,
+              revenue: 297268,
+            },
+            '2024-05-07': {
+              viewers: 437814,
+              comments: 866893,
+              likes: 115367,
+              dislikes: 7678,
+              shares: 59726,
+              revenue: 397268,
+            },
+            '2024-05-08': {
+              viewers: 389617,
+              comments: 967893,
+              likes: 125367,
+              dislikes: 8678,
+              shares: 69726,
+              revenue: 497268,
+            },
+            '2024-05-09': {
+              viewers: 438917,
+              comments: 1067893,
+              likes: 135367,
+              dislikes: 9678,
+              shares: 79726,
+              revenue: 597268,
+            },
+            '2024-05-10': {
+              viewers: 521347,
+              comments: 1167893,
+              likes: 145367,
+              dislikes: 10678,
+              shares: 89726,
+              revenue: 697268,
+            },
+          },
         },
         {
-          title: "鬼刀一开看不见看不见，迦南启动!",
+          title: '鬼刀一开看不见看不见，迦南启动!',
           id: '终憾﹀奇星互娱',
-          hot: "23.9万",
-          img: pic14
+          hot: '23.9万',
+          img: pic14,
+          type: '永劫无间',
+          roomID: '1394712',
+          history: {
+            '2024-05-05': {
+              viewers: 355672,
+              comments: 664893,
+              likes: 95367,
+              dislikes: 5678,
+              shares: 39726,
+              revenue: 197268,
+            },
+            '2024-05-06': {
+              viewers: 386947,
+              comments: 765893,
+              likes: 105367,
+              dislikes: 6678,
+              shares: 49726,
+              revenue: 297268,
+            },
+            '2024-05-07': {
+              viewers: 437814,
+              comments: 866893,
+              likes: 115367,
+              dislikes: 7678,
+              shares: 59726,
+              revenue: 397268,
+            },
+            '2024-05-08': {
+              viewers: 389617,
+              comments: 967893,
+              likes: 125367,
+              dislikes: 8678,
+              shares: 69726,
+              revenue: 497268,
+            },
+            '2024-05-09': {
+              viewers: 438917,
+              comments: 1067893,
+              likes: 135367,
+              dislikes: 9678,
+              shares: 79726,
+              revenue: 597268,
+            },
+            '2024-05-10': {
+              viewers: 521347,
+              comments: 1167893,
+              likes: 145367,
+              dislikes: 10678,
+              shares: 89726,
+              revenue: 697268,
+            },
+          },
         },
         {
-          title: "苏州KSG vs 武汉eStarKPL春季赛",
+          title: '苏州KSG vs 武汉eStarKPL春季赛',
           id: '虎牙王者荣耀赛事',
-          hot: "591.8万",
-          img: pic15
+          hot: '591.8万',
+          type: '王者荣耀',
+          img: pic15,
+          roomID: '2672993',
+          history: {
+            '2024-05-05': {
+              viewers: 355672,
+              comments: 664893,
+              likes: 95367,
+              dislikes: 5678,
+              shares: 39726,
+              revenue: 197268,
+            },
+            '2024-05-06': {
+              viewers: 386947,
+              comments: 765893,
+              likes: 105367,
+              dislikes: 6678,
+              shares: 49726,
+              revenue: 297268,
+            },
+            '2024-05-07': {
+              viewers: 437814,
+              comments: 866893,
+              likes: 115367,
+              dislikes: 7678,
+              shares: 59726,
+              revenue: 397268,
+            },
+            '2024-05-08': {
+              viewers: 389617,
+              comments: 967893,
+              likes: 125367,
+              dislikes: 8678,
+              shares: 69726,
+              revenue: 497268,
+            },
+            '2024-05-09': {
+              viewers: 438917,
+              comments: 1067893,
+              likes: 135367,
+              dislikes: 9678,
+              shares: 79726,
+              revenue: 597268,
+            },
+            '2024-05-10': {
+              viewers: 521347,
+              comments: 1167893,
+              likes: 145367,
+              dislikes: 10678,
+              shares: 89726,
+              revenue: 697268,
+            },
+          },
         },
         {
-          title: "我来诠释发育路!",
+          title: '我来诠释发育路!',
           id: 'AzZ、口袋',
-          hot: "117.1万",
-          img: pic16
+          hot: '117.1万',
+          img: pic16,
+          roomID: '2693712',
+          type: '王者荣耀',
+
+          history: {
+            '2024-05-05': {
+              viewers: 355672,
+              comments: 664893,
+              likes: 95367,
+              dislikes: 5678,
+              shares: 39726,
+              revenue: 197268,
+            },
+            '2024-05-06': {
+              viewers: 386947,
+              comments: 765893,
+              likes: 105367,
+              dislikes: 6678,
+              shares: 49726,
+              revenue: 297268,
+            },
+            '2024-05-07': {
+              viewers: 437814,
+              comments: 866893,
+              likes: 115367,
+              dislikes: 7678,
+              shares: 59726,
+              revenue: 397268,
+            },
+            '2024-05-08': {
+              viewers: 389617,
+              comments: 967893,
+              likes: 125367,
+              dislikes: 8678,
+              shares: 69726,
+              revenue: 497268,
+            },
+            '2024-05-09': {
+              viewers: 438917,
+              comments: 1067893,
+              likes: 135367,
+              dislikes: 9678,
+              shares: 79726,
+              revenue: 597268,
+            },
+            '2024-05-10': {
+              viewers: 521347,
+              comments: 1167893,
+              likes: 145367,
+              dislikes: 10678,
+              shares: 89726,
+              revenue: 697268,
+            },
+          },
         },
       ],
       loading: false,
@@ -155,18 +1036,79 @@ export default {
   },
   methods: {
     goto() {
-      console.log("Test")
+      console.log('Test');
     },
     flech() {
-      this.loading = true
+      this.loading = true;
       setTimeout(() => {
-        this.loading = false
-      }, 1500)
+        this.loading = false;
+      }, 1500);
+    },
+    detail(index) {
+      this.gloryindex = index;
+      this.isShow = true;
+      setTimeout(() => {
+        this.drawLine(index);
+      }, 100);
+
+    },
+    drawLine(index) {
+      //在map1上根据观看人数以及日期画一个折线图
+      //如果map1存在图表，先销毁
+
+      let myChart = document.getElementById('map1');
+      if (myChart) {
+        myChart = echarts.getInstanceByDom(myChart);
+        if (myChart) {
+          myChart.dispose();
+        }
+      }
+      myChart = echarts.init(document.getElementById('map1'));
+      let option = {
+        title: {
+          text: '观看人数',
+        },
+        tooltip: {
+          trigger: 'axis',
+        },
+        legend: {
+          data: ['观看人数'],
+        },
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '3%',
+          containLabel: true,
+        },
+        toolbox: {
+          feature: {
+            saveAsImage: {},
+          },
+        },
+        xAxis: {
+          type: 'category',
+          boundaryGap: false,
+          data: Object.keys(this.gloryData[index].history),
+        },
+        yAxis: {
+          type: 'value',
+        },
+        series: [
+          {
+            name: '观看人数',
+            type: 'line',
+            stack: '总量',
+            data: Object.values(this.gloryData[index].history).map((item) => item.viewers),
+          },
+        ],
+      };
+      myChart.setOption(option);
     },
     // 查看详情（转跳详情页面）
-    gotoReal() {
+    gotoReal(index) {
       this.$router.push({
         path: '/live/realTime',
+        query: { index: index },
       });
     },
   },
@@ -198,4 +1140,10 @@ export default {
     }
   }
 }
-</style>
\ No newline at end of file
+.modal {
+  p {
+    //取消空行
+    margin: 0;
+  }
+}
+</style>