fzu102201435
/
exercise_front
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from '36a9e661ae'
${ noResults }
exercise_front/pages/index/index.vue

826 lines
26 KiB
Raw Blame History

<template>
<view class="background" style="overflow: hidden" >
<view class="transition">
<!-- NBA图片过渡界面 -->
<image v-show="showNBA" src="@/static/transition/nba.png" class="transition_nba"></image>
<!-- Logo图片过渡界面 -->
<image v-show="showLogo" src="@/static/transition/logo.png" class="transition_logo"></image>
<!-- 签名 -->
<view v-show="showSignature" class="transition_signature">
<view class="transition_text">体育直播可视化系统</view>
<text class="transition_text">102201435 龚嘉伟</text>
</view>
</view>
<!-- 内容 -->
<!-- 如果要显示过渡动画 在下面添加如下部分 v-show="!showNBA && !showLogo && !showSignature" -->
<view class="content" :style="{ minHeight: '100vh' }" v-show="!showNBA && !showLogo && !showSignature" >
<!-- 顶部Logo部分 -->
<view class="top_logo">
<image src="@/static/transition/nba.png" class="top_logo_nba"></image>
<text class="top_logo_signature">体育直播可视化系统</text>
<image src="@/static/transition/logo.png" class="top_logo_all_sport"></image>
</view>
<!-- 过渡线 -->
<image src="@/static/content/line/line.png" class="line1"></image>
<!-- 篮球比赛部分 -->
<view class="basketball_match">
<image src="@/static/content/court/basketball_court.png" class="image"></image>
<!-- 比赛事件显示屏 -->
<view class="event_screen">
<text class="event_title">比赛事件</text>
<view class="event_content">
<text class="event_text">{{currentEvent}}</text>
</view>
<!-- &lt;!&ndash; 添加按钮容器 &ndash;&gt;
<view class="event_buttons">
<button
class="event_btn send_btn"
@click="simulate_the_flow_of_the_competition"
hover-class="button-hover"
>模拟比赛流程</button>
<button
class="event_btn retry_btn"
@click="retryConnection"
hover-class="button-hover"
>重试</button>
</view>-->
</view>
<!-- 湖人队进攻动画部分 -->
<view class="laker_attack" v-if="is_laker_attack">
<image class="arrow_laker_attack" src="@//static/content/court/arrow_back.png"></image>
<text class="laker_word_area">湖人队进攻</text>
</view>
<!-- 森林狼队进攻动画部分 -->
<view class="wolf_attack" v-if="is_wolf_attack">
<image class="arrow_wolf_attack" src="@/static/content/court/arrow.png"></image>
<text class="wolf_word_area">森林狼队进攻</text>
</view>
</view>
<!-- 过渡线 -->
<image src="@/static/content/line/line.png" class="line2"></image>
</view>
<!-- 比分部分 -->
<view class="score" >
<text class="now_time1">剩余时间</text>
<text class="now_time2">第{{now_class}}节 {{now_minute}}:{{now_seconds}}</text>
<image class="wolf_score_text" src="@/static/content/score/wole_score_text.png"></image>
<image class="vs" src="@/static/content/score/vs.png"></image>
<image class="laker_score_text" src="@/static/content/score/laker_score_text.png"></image>
<text class="wolf_score">{{wolf_score}}</text>
<text class="laker_score">{{laker_score}}</text>
</view>
<!-- 球队数据部分 -->
<view class="team_statics" >
<image class="cut_off_line" src="@/static/content/team_statics/cut_off_line.png"></image>
<text class="statistics1">各队技术统计</text>
<text class="statistics2">各队技术统计</text>
<text class="three_point_wolf">三分球得分 {{three_point_shot_wolf}}</text>
<text class="three_point_laker">三分球得分 {{three_point_shot_laker}}</text>
<text class="two_point_wolf">两分球得分 {{two_point_shot_wolf}}</text>
<text class="two_point_laker">两分球得分 {{two_point_shot_laker}}</text>
<!-- 湖人队得分统计图 -->
<view class="charts-box-score-wolf">
<qiun-data-charts
type="pie"
:opts="opts_wolf_score"
:chartData="chartData_wolf_score"
/>
</view>
<!-- 湖人队得分统计图 -->
<view class="charts-box-score-laker">
<qiun-data-charts
type="pie"
:opts="opts_laker_score"
:chartData="chartData_laker_score"
/>
</view>
<text class="foul_wolf">犯规数 {{foul_wolf}}</text>
<text class="block_wolf">盖帽数 {{block_wolf}}</text>
<text class="rebound_wolf">篮板数 {{rebound_wolf}}</text>
<text class="steal_wolf">抢断 {{steal_wolf}}</text>
<!-- 森林狼队技术统计图 -->
<view class="charts-box-tech-wolf">
<qiun-data-charts
type="pie"
:opts="opts_wolf_tech"
:chartData="chartData_wolf_tech"
/>
</view>
<text class="foul_laker">犯规数 {{foul_laker}}</text>
<text class="block_laker">盖帽数 {{block_laker}}</text>
<text class="rebound_laker">篮板数 {{rebound_laker}}</text>
<text class="steal_laker">抢断 {{steal_laker}}</text>
<!-- 湖人队技术统计图 -->
<view class="charts-box-tech-laker">
<qiun-data-charts
type="pie"
:opts="opts_laker_tech"
:chartData="chartData_laker_tech"
/>
</view>
</view>
<!-- 过渡线 -->
<image src="@/static/content/line/line.png" class="line3" v-show="!showNBA && !showLogo && !showSignature" ></image>
<!-- 球员数据部分 -->
<view class="human_statics" >
<text class="tech">双方球员技术统计</text>
<image class="laker_icon" src="@/static/content/players/laker.png"></image>
<!-- 湖人队数据表格 -->
<view class="player_table laker_table">
<view class="table_header">
<text class="header_cell">球员</text>
<text class="header_cell">位置</text>
<text class="header_cell">时间</text>
<text class="header_cell">投篮</text>
<text class="header_cell">三分</text>
<text class="header_cell">罚球</text>
<text class="header_cell">进攻</text>
<text class="header_cell">防守</text>
<text class="header_cell">总计</text>
<text class="header_cell">助攻</text>
<text class="header_cell">犯规</text>
<text class="header_cell">抢断</text>
<text class="header_cell">失误</text>
<text class="header_cell">盖帽</text>
<text class="header_cell">得分</text>
</view>
<view class="table_content">
<view class="table_row" v-for="(player, index) in lakerPlayers" :key="index">
<text class="cell">{{player.name}}</text>
<text class="cell">{{player.position}}</text>
<text class="cell">{{player.time}}</text>
<text class="cell">{{player.fieldGoals}}</text>
<text class="cell">{{player.threePoints}}</text>
<text class="cell">{{player.freeThrows}}</text>
<text class="cell">{{player.offenseRebounds}}</text>
<text class="cell">{{player.defenseRebounds}}</text>
<text class="cell">{{player.totalRebounds}}</text>
<text class="cell">{{player.assists}}</text>
<text class="cell">{{player.fouls}}</text>
<text class="cell">{{player.steals}}</text>
<text class="cell">{{player.turnovers}}</text>
<text class="cell">{{player.blocks}}</text>
<text class="cell">{{player.points}}</text>
</view>
</view>
</view>
<image class="wolf_icon" src="@/static/content/players/wolf.png"></image>
<!-- 森林狼队数据表格 -->
<view class="player_table wolf_table">
<view class="table_header">
<text class="header_cell">球员</text>
<text class="header_cell">位置</text>
<text class="header_cell">时间</text>
<text class="header_cell">投篮</text>
<text class="header_cell">三分</text>
<text class="header_cell">罚球</text>
<text class="header_cell">进攻</text>
<text class="header_cell">防守</text>
<text class="header_cell">总计</text>
<text class="header_cell">助攻</text>
<text class="header_cell">犯规</text>
<text class="header_cell">抢断</text>
<text class="header_cell">失误</text>
<text class="header_cell">盖帽</text>
<text class="header_cell">得分</text>
</view>
<view class="table_content">
<view class="table_row" v-for="(player, index) in wolfPlayers" :key="index">
<text class="cell">{{player.name}}</text>
<text class="cell">{{player.position}}</text>
<text class="cell">{{player.time}}</text>
<text class="cell">{{player.fieldGoals}}</text>
<text class="cell">{{player.threePoints}}</text>
<text class="cell">{{player.freeThrows}}</text>
<text class="cell">{{player.offenseRebounds}}</text>
<text class="cell">{{player.defenseRebounds}}</text>
<text class="cell">{{player.totalRebounds}}</text>
<text class="cell">{{player.assists}}</text>
<text class="cell">{{player.fouls}}</text>
<text class="cell">{{player.steals}}</text>
<text class="cell">{{player.turnovers}}</text>
<text class="cell">{{player.blocks}}</text>
<text class="cell">{{player.points}}</text>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
import uCharts from '@/uni_modules/qiun-data-charts/js_sdk/u-charts/u-charts.js';
var uChartsInstance = {};
export default {
data() {
return {
chartData_wolf_score: {},
chartData_wolf_tech: {},
chartData_laker_score: {},
chartData_laker_tech: {},
opts_laker_score: {
color: ["#a983d5", "#1d55cd"],
padding: [0, 0, 0, 0],
enableScroll: false,
fontSize: 24,
extra: {
pie: {
activeOpacity: 0.5,
activeRadius: 10,
offsetAngle: 0,
labelWidth: 15,
border: false,
borderWidth: 3,
borderColor: "#FFFFFF",
labelFontSize: 24,
labelLineHeight: 30,
},
}
},
opts_wolf_score: {
color: ["#a983d5", "#1d55cd"],
padding: [0, 0, 0, 0],
enableScroll: false,
fontSize: 24,
extra: {
pie: {
activeOpacity: 0.5,
activeRadius: 10,
offsetAngle: 0,
labelWidth: 15,
border: false,
borderWidth: 3,
borderColor: "#FFFFFF",
labelFontSize: 24,
labelLineHeight: 30,
}
}
},
opts_wolf_tech: {
color: ["#a983d5", "#1d55cd","#61ca86","#cc8324"],
padding: [0, 0, 0, 0],
enableScroll: false,
fontSize: 24,
width: 200,
height: 200,
extra: {
pie: {
activeOpacity: 0.5,
activeRadius: 10,
offsetAngle: 0,
labelWidth: 15,
border: false,
borderWidth: 3,
borderColor: "#FFFFFF",
labelFontSize: 24,
labelLineHeight: 30,
}
}
},
opts_laker_tech: {
color: ["#a983d5", "#1d55cd","#61ca86","#cc8324"],
padding: [0, 0, 0, 0],
enableScroll: false,
fontSize: 24,
width: 200,
height: 200,
extra: {
pie: {
activeOpacity: 0.5,
activeRadius: 10,
offsetAngle: 0,
labelWidth: 15,
border: false,
borderWidth: 3,
borderColor: "#FFFFFF",
labelFontSize: 24,
labelLineHeight: 30,
}
}
},
nbaDuration: 2000, // NBA 图片显示时长（毫秒）
logoDuration: 2000, // Logo 图片显示时长（毫秒）
signatureDuration: 2000, // 签名显示时长（毫秒）
is_wolf_attack: false,
is_laker_attack: false,
showNBA: true, // 是否显示NBA图片 后期要改true
showLogo: false, // 是否显示Logo图片
showSignature: false, // 是否显示签名
left_time: "",
now_class: "4", //当前节数
now_minute: "8", //当前分钟
now_seconds: "23", //当前秒数
laker_score: 34, // 湖人队得分
wolf_score: 53, // 森林狼队得分
three_point_shot_laker: 12, // 湖人队三分球得分
two_point_shot_laker: 21, // 湖人队2分球得分
three_point_shot_wolf: 38, // 森林狼队三分球得分
two_point_shot_wolf: 20, // 森林狼队2分球得分
foul_laker: 1, // 湖人队犯规数
block_laker: 2, // 湖人队盖帽数
rebound_laker: 3, // 湖人队篮板数
steal_laker: 4, // 湖人队抢断数
foul_wolf: 5, // 森林狼队犯规数
block_wolf: 6, // 森林狼队盖帽数
rebound_wolf: 7, // 森林狼队篮板数
steal_wolf: 8, // 森林狼队抢断数
lakerPlayers: [
{
name: '奥斯汀·里维斯',
position: '后卫',
time: '36',
fieldGoals: '6-14',
threePoints: '0-5',
freeThrows: '0-1',
offenseRebounds: '4',
defenseRebounds: '5',
totalRebounds: '9',
assists: '4',
fouls: '4',
steals: '1',
turnovers: '0',
blocks: '1',
points: '12'
},
{
name: '德安杰洛·拉塞尔',
position: '后卫',
time: '34',
fieldGoals: '4-12',
threePoints: '1-7',
freeThrows: '0-0',
offenseRebounds: '0',
defenseRebounds: '1',
totalRebounds: '1',
assists: '5',
fouls: '2',
steals: '2',
turnovers: '1',
blocks: '0',
points: '9'
},
{
name: '勒布朗·詹姆斯',
position: '前锋',
time: '35',
fieldGoals: '7-16',
threePoints: '1-4',
freeThrows: '1-1',
offenseRebounds: '0',
defenseRebounds: '5',
totalRebounds: '5',
assists: '4',
fouls: '3',
steals: '0',
turnovers: '2',
blocks: '2',
points: '16'
},
{
name: '八村塁',
position: '前锋',
time: '35',
fieldGoals: '7-14',
threePoints: '1-4',
freeThrows: '3-4',
offenseRebounds: '3',
defenseRebounds: '2',
totalRebounds: '5',
assists: '1',
fouls: '2',
steals: '2',
turnovers: '0',
blocks: '1',
points: '18'
},
{
name: '安东尼·戴维斯',
position: '中锋',
time: '38',
fieldGoals: '11-23',
threePoints: '1-3',
freeThrows: '13-15',
offenseRebounds: '3',
defenseRebounds: '13',
totalRebounds: '16',
assists: '4',
fouls: '1',
steals: '1',
turnovers: '1',
blocks: '3',
points: '36'
},
{
name: '盖布·文森特',
position: '后卫',
time: '17',
fieldGoals: '1-2',
threePoints: '0-0',
freeThrows: '0-0',
offenseRebounds: '0',
defenseRebounds: '2',
totalRebounds: '2',
assists: '2',
fouls: '1',
steals: '0',
turnovers: '2',
blocks: '0',
points: '2'
},
{
name: '道尔顿·克里克特',
position: '后卫',
time: '16',
fieldGoals: '2-4',
threePoints: '1-3',
freeThrows: '0-0',
offenseRebounds: '0',
defenseRebounds: '1',
totalRebounds: '1',
assists: '2',
fouls: '1',
steals: '1',
turnovers: '1',
blocks: '0',
points: '5'
},
{
name: '贾克森·海耶斯',
position: '中锋',
time: '15',
fieldGoals: '4-5',
threePoints: '0-0',
freeThrows: '2-2',
offenseRebounds: '3',
defenseRebounds: '1',
totalRebounds: '4',
assists: '0',
fouls: '3',
steals: '0',
turnovers: '0',
blocks: '1',
points: '10'
},
{
name: '马克斯·克里斯蒂',
position: '前锋',
time: '11',
fieldGoals: '0-3',
threePoints: '0-3',
freeThrows: '2-2',
offenseRebounds: '1',
defenseRebounds: '1',
totalRebounds: '2',
assists: '0',
fouls: '5',
steals: '0',
turnovers: '0',
blocks: '0',
points: '2'
},
{
name: '布朗尼·詹姆斯',
position: '前锋',
time: '3',
fieldGoals: '0-2',
threePoints: '0-1',
freeThrows: '0-0',
offenseRebounds: '1',
defenseRebounds: '0',
totalRebounds: '1',
assists: '0',
fouls: '0',
steals: '0',
turnovers: '0',
blocks: '0',
points: '0'
}
],
wolfPlayers: [
{
name: '安东尼·爱德华兹',
position: '后卫',
time: '41',
fieldGoals: '10-25',
threePoints: '5-13',
freeThrows: '2-3',
offenseRebounds: '0',
defenseRebounds: '6',
totalRebounds: '6',
assists: '3',
fouls: '3',
steals: '0',
turnovers: '4',
blocks: '0',
points: '27'
},
{
name: '迈克·康利',
position: '后卫',
time: '20',
fieldGoals: '1-7',
threePoints: '0-5',
freeThrows: '3-3',
offenseRebounds: '2',
defenseRebounds: '2',
totalRebounds: '4',
assists: '2',
fouls: '1',
steals: '1',
turnovers: '3',
blocks: '0',
points: '5'
},
{
name: '朱利叶斯·兰德尔',
position: '前锋',
time: '34',
fieldGoals: '5-10',
threePoints: '1-3',
freeThrows: '5-7',
offenseRebounds: '3',
defenseRebounds: '6',
totalRebounds: '9',
assists: '4',
fouls: '3',
steals: '0',
turnovers: '2',
blocks: '0',
points: '16'
},
{
name: '杰登·麦克丹尼尔斯',
position: '前锋',
time: '16',
fieldGoals: '3-8',
threePoints: '0-3',
freeThrows: '0-0',
offenseRebounds: '0',
defenseRebounds: '2',
totalRebounds: '2',
assists: '1',
fouls: '5',
steals: '1',
turnovers: '1',
blocks: '0',
points: '6'
},
{
name: '戈贝尔',
position: '中锋',
time: '12',
fieldGoals: '1-3',
threePoints: '0-0',
freeThrows: '1-2',
offenseRebounds: '1',
defenseRebounds: '4',
totalRebounds: '5',
assists: '0',
fouls: '1',
steals: '0',
turnovers: '2',
blocks: '0',
points: '3'
},
{
name: '拿斯列特',
position: '前锋',
time: '10',
fieldGoals: '1-1',
threePoints: '1-1',
freeThrows: '0-0',
offenseRebounds: '0',
defenseRebounds: '3',
totalRebounds: '3',
assists: '0',
fouls: '1',
steals: '0',
turnovers: '1',
blocks: '0',
points: '3'
},
{
name: '迪温琴佐',
position: '后卫',
time: '8',
fieldGoals: '1-3',
threePoints: '0-1',
freeThrows: '0-2',
offenseRebounds: '1',
defenseRebounds: '0',
totalRebounds: '1',
assists: '3',
fouls: '1',
steals: '0',
turnovers: '0',
blocks: '0',
points: '2'
},
{
name: '尼基尔-亚历山大-沃克',
position: '后卫',
time: '6',
fieldGoals: '1-1',
threePoints: '1-1',
freeThrows: '0-0',
offenseRebounds: '0',
defenseRebounds: '0',
totalRebounds: '0',
assists: '0',
fouls: '0',
steals: '0',
turnovers: '0',
blocks: '0',
points: '3'
}
],
currentEvent: "欢迎进入体育直播可视化系统！", // 当前显示的比赛事件
};
},
onReady() {
this.getServerData_wolf_score();
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() {
this.transition();
},
methods: {
transition() {
// 显示NBA图片
setTimeout(() => {
this.showNBA = false; // 隐藏NBA图片
this.showLogo = true; // 显示Logo图片
// 显示Logo图片后隐藏并显示签名
setTimeout(() => {
this.showLogo = false; // 隐藏Logo图片
this.showSignature = true; // 显示签名
// 签名显示后隐藏并显示内容
setTimeout(() => {
this.showSignature = false; // 隐藏签名
}, this.signatureDuration);
}, this.logoDuration);
}, this.nbaDuration);
},
getServerData_wolf_score() {
//模拟从服务器获取数据时的延时
setTimeout(() => {
//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
let res = {
series: [
{
data: [{"name": "三分球", "value": this.three_point_shot_wolf},
{"name": "两分球", "value": this.two_point_shot_wolf}]
}
]
};
this.chartData_wolf_score = JSON.parse(JSON.stringify(res));
}, 500);
},
getServerData_laker_score() {
//模拟从服务器获取数据时的延时
setTimeout(() => {
//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
let res = {
series: [
{
data: [{"name": "三分球", "value": this.three_point_shot_laker},
{"name": "两分球", "value": this.two_point_shot_laker}]
}
]
};
this.chartData_laker_score = JSON.parse(JSON.stringify(res));
}, 500);
},
getServerData_wolf_tech() {
//模拟从服务器获取数据时的延时
setTimeout(() => {
let res = {
series: [
{
data: [
{"name": "犯规数", "value": this.foul_wolf},
{"name": "盖帽数", "value": this.block_wolf},
{"name": "篮板数", "value": this.rebound_wolf},
{"name": "抢断", "value": this.steal_wolf}
]
}
]
};
this.chartData_wolf_tech = JSON.parse(JSON.stringify(res));
}, 500);
},
getServerData_laker_tech() {
//模拟从服务器获取数据时的延时
setTimeout(() => {
let res = {
series: [
{
data: [
{"name": "犯规数", "value": this.foul_laker},
{"name": "盖帽数", "value": this.block_laker},
{"name": "篮板数", "value": this.rebound_laker},
{"name": "抢断", "value": this.steal_laker}
]
}
]
};
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
}
}
};
</script>
<style>
@import '@/static/css/index.scss';
</style>
Reference in new issue View Git Blame Copy Permalink