From 36a9e661aebf78b211a0067f9691bc9ec75cf812 Mon Sep 17 00:00:00 2001 From: Gary <3489015381@qq.com> Date: Wed, 8 Jan 2025 18:14:19 +0800 Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E6=88=90=E5=89=8D=E7=AB=AF=E7=95=8C?= =?UTF-8?q?=E9=9D=A2=E5=92=8C=E5=90=8E=E7=AB=AF=E7=9A=84=E9=93=BE=E6=8E=A5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- pages/index/index.vue | 900 ++++-------------------------------------- static/css/index.scss | 847 +++++++++++++++++++++++++++++++++++++++ 2 files changed, 930 insertions(+), 817 deletions(-) create mode 100644 static/css/index.scss diff --git a/pages/index/index.vue b/pages/index/index.vue index 0701eba..2b06432 100644 --- a/pages/index/index.vue +++ b/pages/index/index.vue @@ -13,7 +13,7 @@ - + @@ -52,7 +65,7 @@ - + 剩余时间 第{{now_class}}节 {{now_minute}}:{{now_seconds}} @@ -63,7 +76,7 @@ - + 各队技术统计 各队技术统计 @@ -119,7 +132,7 @@ - + @@ -133,7 +146,7 @@ - + 双方球员技术统计 @@ -316,8 +329,8 @@ export default { nbaDuration: 2000, // NBA 图片显示时长（毫秒） logoDuration: 2000, // Logo 图片显示时长（毫秒） signatureDuration: 2000, // 签名显示时长（毫秒） - is_wolf_attack: true, - is_laker_attack: true, + is_wolf_attack: false, + is_laker_attack: false, showNBA: true, // 是否显示NBA图片 后期要改true showLogo: false, // 是否显示Logo图片 showSignature: false, // 是否显示签名 @@ -325,10 +338,10 @@ export default { now_class: "4", //当前节数 now_minute: "8", //当前分钟 now_seconds: "23", //当前秒数 - laker_score: 57, // 湖人队得分 - wolf_score: 58, // 森林狼队得分 - three_point_shot_laker: 38, // 湖人队三分球得分 - two_point_shot_laker: 1, // 湖人队2分球得分 + laker_score: 34, // 湖人队得分 + wolf_score: 53, // 森林狼队得分 + three_point_shot_laker: 12, // 湖人队三分球得分 + two_point_shot_laker: 21, // 湖人队2分球得分 three_point_shot_wolf: 38, // 森林狼队三分球得分 @@ -654,7 +667,7 @@ export default { points: '3' } ], - currentEvent: "爱德华兹 三分投篮命中 (3分) (朱利叶斯-兰德尔 2次助攻)", // 当前显示的比赛事件 + currentEvent: "欢迎进入体育直播可视化系统！", // 当前显示的比赛事件 }; }, onReady() { @@ -662,17 +675,56 @@ export default { this.getServerData_laker_score(); this.getServerData_laker_tech(); this.getServerData_wolf_tech(); + uni.connectSocket({ + url: 'ws://localhost:9090/exercise', + success: () => { + console.log('WebSocket连接成功'); + }, + fail: (err) => { + console.error('WebSocket连接失败', err); + }}); + uni.onSocketOpen(() => { + console.log('WebSocket连接已打开'); + uni.sendSocketMessage({ + data: '可以发送消息！！！', + }) + }); + uni.onSocketMessage((res) => { + console.log('收到服务器消息：', res.data); + + // 尝试解析 JSON 数据 + try { + const data = JSON.parse(res.data); + console.log('解析后的数据：', data); // 输出解析后的数据 + + this.currentEvent = data.action; + this.now_minute = data.leftMinute; + this.now_seconds = data.leftSecond; + this.laker_score = data.lakerScore; + this.wolf_score = data.wolfScore; + this.now_class=data.classNumber; + + // 输出每个字段的值 + console.log('当前事件:', this.currentEvent); + console.log('剩余分钟:', this.now_minute); + console.log('剩余秒数:', this.now_seconds); + console.log('湖人得分:', this.laker_score); + console.log('森林狼得分:', this.wolf_score); + } catch (e) { + console.error('解析数据时出错:', e); + } + }); + uni.onSocketError((err) => { + console.error('WebSocket连接错误', err); + }); + uni.onSocketClose(() => { + console.log('WebSocket连接已关闭'); + }); }, onLoad() { - uni.connectSocket( - { - url: "ws:// 192.168.12.106:8080/ ws", - complete: (e) => { - console.log("socket :", e); - } - });//创建一个websocket连接 this.transition(); }, + methods: { transition() { // 显示NBA图片 @@ -755,806 +807,20 @@ export default { }; this.chartData_laker_tech = JSON.parse(JSON.stringify(res)); }, 500); + }, + simulate_the_flow_of_the_competition(){ + uni.sendSocketMessage({ + data: '可以开始发送消息' + }) + }, + retryConnection(){ + uni.closeSocket();//关闭所有socket连接 + this.connectSocket();//重新连接websocket } - }, + } + }; \ No newline at end of file diff --git a/static/css/index.scss b/static/css/index.scss new file mode 100644 index 0000000..3015b56 --- /dev/null +++ b/static/css/index.scss @@ -0,0 +1,847 @@ +/* 定义图片渐变消失动画 */ +@keyframes fadeOut { + 0% { + opacity: 1; + } + 100% { + opacity: 0; + } +} + +.background { + position: relative; + background-color: #000; /* 黑色背景 */ + height: 530vh; /* 设置高度覆盖视口 */ + overflow: hidden; + -ms-overflow-style:none; //兼容Edge + scrollbar-width: none;//兼容火狐 + + + + /*过渡界面部分*/ + + .transition { + position: absolute; + height: 100vh; + width: 100%; + z-index: 1; + .transition_nba { + position: absolute; + height: 40%; + width: 20%; + left: 40%; + top: 30%; + opacity: 1; /* 初始透明度 */ + animation: fadeOut 2s ease-out forwards; /* 动画定义 */ + } + + .transition_logo { + position: absolute; + height: 40%; + width: 30%; + left: 35%; + top: 30%; + opacity: 1; /* 初始透明度 */ + animation: fadeOut 2s ease-out forwards; /* 动画定义 */ + } + + .transition_signature { + position: absolute; + top: 40%; + width: 100%; + text-align: center; /* 居中对齐 */ + color: #ffffff; /* 白色文字 */ + font-size: 50px; /* 调整字体大小 */ + line-height: 1.5; /* 设置行高 */ + font-weight: bold; /* 加粗 */ + opacity: 1; /* 初始透明度 */ + animation: fadeOut 2s ease-out forwards; /* 动画定义 */ + + .transition_text { + display: block; /* 强制换行 */ + margin-bottom: 5px; /* 设置行间距（可选） */ + } + } + + } /*过渡部分结束*/ + /*比赛内容部分*/ + .content { + position: relative; + width: 100%; + z-index: 0; + + .top_logo { + position: absolute; + width: 100%; + height: 12%; + z-index: 1; + + .top_logo_nba { + position: absolute; + height: 80%; + width: 5%; + top: 10%; + margin: 0 auto; + display: block; + } + + .top_logo_signature { + position: absolute; + height: 100%; + width: 40%; + left: 30%; + margin: 0 auto; + display: flex; + justify-content: center; + align-items: center; + text-align: center; + color: #ffffff; + font-size: 55px; + line-height: 1.5; + font-weight: bold; + } + + .transition_text { + display: block; + margin-bottom: 5px; + } + + .top_logo_all_sport { + position: absolute; + height: 89%; + width: 9%; + top: 5%; + left: 89%; + margin: 0 auto; + display: block; + } + } + + + .line1 { + position: absolute; + width: 90%; + height: 2px; + left: 5%; + top: 14%; + background-color: #ffffff; + z-index: 1; + } + + .basketball_match { + position: absolute; + width: 100%; + height: 87%; + top: 13%; + + z-index: 1; + + .image { + width: 95%; + height: 90%; + left: 2.5%; + top: 4%; + } + .arrow_wolf_attack { + position: absolute; + width: 50%; + height: 20%; + left: 15%; + top: 60%; + z-index: 100; + opacity: 0.7; /* 设置透明度为低 */ + } + .wolf_word_area { + position: absolute; + height: 16%; + width: 30%; + left: 25%; + top: 62%; + + z-index: 101; + display: flex; /* 使用 flexbox 来控制内容布局 */ + justify-content: center; /* 居中对齐 */ + align-items: center; /* 垂直居中对齐 */ + text-align: center; /* 文字水平居中 */ + color: #000000; /* 字体颜色为黑色 */ + font-size: 16px; /* 字体大小，适当调整 */ + font-weight: bold; /* 加粗字体 */ + word-wrap: break-word; /* 自动换行 */ + white-space: normal; /* 允许文本换行 */ + padding: 5px; /* 可选：添加内边距来增加空间 */ + line-height: 1.5; /* 行高，适当调整 */ + } + + + .arrow_laker_attack { + position: absolute; + width: 50%; + height: 20%; + left: 28%; + top: 63%; + z-index: 100; + opacity: 0.7; /* 设置透明度为低 */ + } + .laker_word_area{ + position: absolute; + height: 16%; + width: 30%; + left: 38%; + top:65%; + + z-index: 101; + } + + .event_screen { + position: absolute; + width: 40%; + height: 25%; + left: 30%; + top: 6.5%; + background-color: rgba(0, 0, 0, 0.7); + border: 2px solid #4cd964; + border-radius: 10px; + z-index: 99; + display: flex; + flex-direction: column; + padding: 10px; + box-shadow: 0 0 10px rgba(76, 217, 100, 0.5); + + .event_buttons { + display: flex; + justify-content: space-around; + padding: 10px 0; + margin-top: 10px; + border-top: 1px solid rgba(76, 217, 100, 0.3); + } + + .event_btn { + width: 40%; + height: 36px; + line-height: 36px; + text-align: center; + font-size: 14px; + border-radius: 18px; + background: transparent; + border: 1px solid #4cd964; + color: #4cd964; + transition: all 0.2s ease; /* 添加过渡效果 */ + + /* 移除默认按钮样式 */ + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + outline: none; + + /* 添加点击效果 */ + &:active { + transform: scale(0.95); + opacity: 0.8; + } + } + + .send_btn { + background: #4cd964; + color: #000000; + + &:active { + background: #45c559; + } + } + + .retry_btn { + background: transparent; + color: #4cd964; + + &:active { + background: rgba(76, 217, 100, 0.1); + } + } + } + + .event_title { + color: #4cd964; + font-size: 24px; + font-weight: bold; + text-align: center; + margin-bottom: 10px; + border-bottom: 1px solid #4cd964; + padding-bottom: 5px; + } + + .event_content { + flex: 1; + display: flex; + align-items: center; + justify-content: center; + overflow-y: auto; + } + + .event_text { + color: #ffffff; + font-size: 20px; + text-align: center; + line-height: 1.5; + padding: 0 10px; + } + } + .line2{ + position: absolute; + width: 90%; + height: 2px; + left: 5%; + top: 98%; + background-color: #ffffff; + z-index: 1; + } + .score{ + position: absolute; + width: 100%; + height: 7%; + top: 100%; + /* border: #4cd964 solid 2px;*/ + } + }/*比赛内容部分结束*/ + + /*比分部分开始*/ + .score { + position: relative; + height: 50vh; + + .now_time1 { + position: absolute; + height: 10%; + width: 100%; + margin: 0 auto; + display: flex; + justify-content: center; + align-items: center; + text-align: center; + color: #ffffff; + font-size: 55px; /* 设置字体大小 */ + line-height: 1.5; + font-weight: bold; + top: 2%; /* 定位在顶部 */ + } + + .now_time2 { + position: absolute; + height: 10%; + width: 100%; + margin: 0 auto; + display: flex; + justify-content: center; + align-items: center; + text-align: center; + color: #ffffff; + font-size: 40px; /* 设置字体大小较小 */ + line-height: 1.5; + font-weight: normal; + letter-spacing: 20px; + top: 14%; + } + .wolf_score_text{ + position: absolute; + height: 14%; + width: 14%; + left: 8%; + top: 27%; + } + .vs{ + position: absolute; + height: 60%; + width: 32%; + left: 34%; + top: 28%; + } + .laker_score_text{ + position: absolute; + height: 14%; + width: 11%; + right: 10%; + top: 27%; + } + .wolf_score{ + position: absolute; + + height: 40%; + top: 48%; + left: 10%; + width: 9%; + margin: 0 auto; + display: flex; + align-items: center; + justify-content: center; + text-align: center; + color: #ffffff; + font-size: 120px; /* 设置字体大小较小 */ + line-height: 1.5; + font-weight: normal; + letter-spacing: 20px; + + } + .laker_score{ + position: absolute; + height: 40%; + top: 48%; + right: 10%; + width: 9%; + margin: 0 auto; + display: flex; + align-items: center; + justify-content: center; + text-align: center; + color: #ffffff; + font-size: 120px; /* 设置字体大小较小 */ + line-height: 1.5; + font-weight: normal; + letter-spacing: 20px; + } + }/*比分部分结束*/ + + /*球队数据开始*/ + .team_statics{ + position: relative; + height: 150vh; + .cut_off_line{ + position: absolute; + height: 100%; + width: 2px; + left: 50%; + } + .statistics1{ + position: absolute; + + height: 8%; + top: 1%; + right: 5%; + width: 40%; + margin: 0 auto; + display: flex; + align-items: center; + justify-content: center; + text-align: center; + color: #ffffff; + font-size: 50px; /* 设置字体大小较小 */ + line-height: 1.5; + font-weight: normal; + letter-spacing: 20px; + } + .statistics2{ + position: absolute; + + height: 8%; + top: 1%; + left: 5%; + width: 40%; + margin: 0 auto; + display: flex; + align-items: center; + justify-content: center; + text-align: center; + color: #ffffff; + font-size: 50px; /* 设置字体大小较小 */ + line-height: 1.5; + font-weight: normal; + letter-spacing: 20px; + } + .three_point_wolf{ + position: absolute; + + height: 15%; + top: 8%; + left: 1%; + width: 22%; + margin: 0 auto; + display: flex; + align-items: center; + justify-content: center; + text-align: center; + color: #ffffff; + font-size: 30px; /* 设置字体大小较小 */ + line-height: 1.5; + font-weight: normal; + letter-spacing: 20px; + } + .three_point_laker{ + position: absolute; + + height: 15%; + top: 8%; + right: 28%; + width: 22%; + margin: 0 auto; + display: flex; + align-items: center; + justify-content: center; + text-align: center; + color: #ffffff; + font-size: 30px; /* 设置字体大小较小 */ + line-height: 1.5; + font-weight: normal; + letter-spacing: 20px; + } + + + + .charts-box-score-wolf{ + position: absolute; + width: 25%; + height: 28%; + top: 18%; + left: 12%; + } + .charts-box-score-laker{ + position: absolute; + width: 25%; + height: 28%; + top: 18%; + right: 12%; + } + .charts-box-tech-wolf{ + position: absolute; + width: 25%; + height: 28%; + top: 68%; + left: 12%; + } + .charts-box-tech-laker{ + position: absolute; + width: 25%; + height: 28%; + top: 68%; + right: 12%; + } + + + + .two_point_wolf{ + position: absolute; + + height: 15%; + top: 8%; + left: 28%; + width: 22%; + margin: 0 auto; + display: flex; + align-items: center; + justify-content: center; + text-align: center; + color: #ffffff; + font-size: 30px; /* 设置字体大小较小 */ + line-height: 1.5; + font-weight: normal; + letter-spacing: 20px; + } + .two_point_laker{ + position: absolute; + + height: 15%; + top: 8%; + right: 1%; + width: 22%; + margin: 0 auto; + display: flex; + align-items: center; + justify-content: center; + text-align: center; + color: #ffffff; + font-size: 30px; /* 设置字体大小较小 */ + line-height: 1.5; + font-weight: normal; + letter-spacing: 20px; + } + .foul_wolf{ + position: absolute; + + height: 15%; + top: 40%; + left: 1%; + width: 22%; + margin: 0 auto; + display: flex; + align-items: center; + justify-content: center; + text-align: center; + color: #ffffff; + font-size: 30px; /* 设置字体大小较小 */ + line-height: 1.5; + font-weight: normal; + letter-spacing: 20px; + } + .block_wolf{ + position: absolute; + + height: 15%; + top: 50%; + left: 1%; + width: 22%; + margin: 0 auto; + display: flex; + align-items: center; + justify-content: center; + text-align: center; + color: #ffffff; + font-size: 30px; /* 设置字体大小较小 */ + line-height: 1.5; + font-weight: normal; + letter-spacing: 20px; + } + .rebound_wolf{ + position: absolute; + + height: 15%; + top: 40%; + left: 28%; + width: 22%; + margin: 0 auto; + display: flex; + align-items: center; + justify-content: center; + text-align: center; + color: #ffffff; + font-size: 30px; /* 设置字体大小较小 */ + line-height: 1.5; + font-weight: normal; + letter-spacing: 20px; + } + .steal_wolf{ + position: absolute; + + height: 15%; + top: 50%; + left: 28%; + width: 22%; + margin: 0 auto; + display: flex; + align-items: center; + justify-content: center; + text-align: center; + color: #ffffff; + font-size: 30px; /* 设置字体大小较小 */ + line-height: 1.5; + font-weight: normal; + letter-spacing: 20px; + } + .foul_laker{ + position: absolute; + + height: 15%; + top: 40%; + right: 28%; + width: 22%; + margin: 0 auto; + display: flex; + align-items: center; + justify-content: center; + text-align: center; + color: #ffffff; + font-size: 30px; /* 设置字体大小较小 */ + line-height: 1.5; + font-weight: normal; + letter-spacing: 20px; + } + .block_laker{ + position: absolute; + + height: 15%; + top: 50%; + right: 28%; + width: 22%; + margin: 0 auto; + display: flex; + align-items: center; + justify-content: center; + text-align: center; + color: #ffffff; + font-size: 30px; /* 设置字体大小较小 */ + line-height: 1.5; + font-weight: normal; + letter-spacing: 20px; + } + .rebound_laker{ + position: absolute; + + height: 15%; + top: 40%; + right: 1%; + width: 22%; + margin: 0 auto; + display: flex; + align-items: center; + justify-content: center; + text-align: center; + color: #ffffff; + font-size: 30px; /* 设置字体大小较小 */ + line-height: 1.5; + font-weight: normal; + letter-spacing: 20px; + } + .steal_laker{ + position: absolute; + + height: 15%; + top: 50%; + right: 1%; + width: 22%; + margin: 0 auto; + display: flex; + align-items: center; + justify-content: center; + text-align: center; + color: #ffffff; + font-size: 30px; /* 设置字体大小较小 */ + line-height: 1.5; + font-weight: normal; + letter-spacing: 20px; + } + }/*球队数据部分结束*/ + .line3{ + position: absolute; + height: 2px; + width: 90%; + left: 5%; + top: 57%; + } + + + + + + + + + + + + + + + + + /*球员数据开始*/ + .human_statics{ + position: relative; + height: 230vh; + /* border: #4cd964 2px solid;*/ + .tech{ + position: absolute; + height: 8%; + top: 0%; + left: 35%; + width: 30%; + margin: 0 auto; + display: flex; + align-items: center; + justify-content: center; + text-align: center; + color: #ffffff; + font-size: 30px; /* 设置字体大小较小 */ + line-height: 1.0; + font-weight: normal; + letter-spacing: 10px; + } + .laker_icon{ + position: absolute; + height: 8%; + width: 30%; + top: 5%; + left: 35%; + } + .laker_charts{ + position: absolute; + height: 40%; + width: 90%; + top: 13.5%; + left: 5%; + } + .wolf_icon{ + position: absolute; + height: 8%; + width: 40%; + top: 53%; + left: 30%; + } + .wolf_charts{ + position: absolute; + height: 36%; + width: 90%; + top: 61%; + left: 5%; + } + .player_table { + position: absolute; + width: 95%; + left: 2.5%; + border: #4cd964 2px solid; + background-color: rgba(255, 255, 255, 0.1); + border-radius: 8px; + display: flex; + flex-direction: column; + height: 100%; /* 确保表格容器占满整个高度 */ + } + + .laker_table { + top: 13.5%; + height: 35%; + } + + .wolf_table { + top: 61%; + height: 35%; + } + + .table_header { + display: flex; + background-color: rgba(255, 255, 255, 0.2); + padding: 10px 0; + flex: 0 0 auto; /* 表头固定高度 */ + } + + .table_row { + display: flex; + border-bottom: 1px solid rgba(255, 255, 255, 0.1); + padding: 8px 0; + flex: 1; /* 让每一行平均分配剩余空间 */ + &:hover { + background-color: rgba(255, 255, 255, 0.05); + } + } + + .header_cell, .cell { + flex: 1; + text-align: center; + color: #ffffff; + font-size: 14px; + padding: 0 2px; + white-space: nowrap; + display: flex; + align-items: center; /* 垂直居中 */ + justify-content: center; /* 水平居中 */ + } + + .header_cell:nth-child(1), .cell:nth-child(1) { + flex: 2; + } + .header_cell:nth-child(2), .cell:nth-child(2) { + flex: 0.8; + } + .header_cell:nth-child(3), .cell:nth-child(3) { + flex: 0.8; + } + + .header_cell { + font-weight: bold; + font-size: 16px; + } + + /* 让表格内容区域占满剩余空间 */ + .table_content { + display: flex; + flex-direction: column; + flex: 1; + overflow-y: auto; /* 如果内容过多则显示滚动条 */ + } + }/*球员数据部分结束*/ + +}