liwq/bocai
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

调整

Browse Source
This commit is contained in:
liwq
2026-01-23 14:52:07 +08:00
parent b032c621c8
commit c53e7a6076
7 changed files with 162 additions and 299 deletions
Download Patch File Download Diff File Expand all files Collapse all files

246
frontend/src/components/index.vue
View File

@@ -10,8 +10,7 @@ const input2 = ref('');
// 登录模态框数据
const loginDialogVisible = ref(false);
const isLoggedIn = ref(false);
const username = ref('用户名');
const accountBalance = ref('账户余额');
const username = ref('未记录');
const loginForm = ref({
username: '',
password: '',
@@ -25,39 +24,51 @@ const tableData = ref([]);
const tableLoading = ref(false);
const tableError = ref('');
// 生成从7:00到第二天6:55的时间标签，每隔5分钟
function generateTimeLabels() {
const labels = [];
// 从7:00到23:55
for (let hour = 7; hour < 24; hour++) {
for (let minute = 0; minute < 60; minute += 5) {
labels.push(`${hour.toString().padStart(2, '0')}:${minute.toString().padStart(2, '0')}`);
}
}
// 从0:00到6:55
for (let hour = 0; hour < 6; hour++) {
for (let minute = 0; minute < 60; minute += 5) {
labels.push(`${hour.toString().padStart(2, '0')}:${minute.toString().padStart(2, '0')}`);
}
}
return labels;
}
// 生成对应长度的随机数据
function generateRandomData(length) {
return Array.from({ length }, () => Math.floor(Math.random() * 100) + 10);
}
// 折线图数据
const chartData1 = ref([65, 59, 80, 81, 56, 55, 40]);
const chartData2 = ref([28, 48, 40, 19, 86, 27, 90]);
const chartLabels = ref(['1月', '2月', '3月', '4月', '5月', '6月', '7月']);
const chartLabels = ref(generateTimeLabels());
const chartData1 = ref(generateRandomData(chartLabels.value.length));
const loading = ref(false);
const error = ref('');
// ECharts实例
const chart1Ref = ref(null);
const chart2Ref = ref(null);
const chart1 = ref(null);
const chart2 = ref(null);
// 初始化ECharts图表
function initCharts() {
console.log('开始初始化图表');
console.log('chart1Ref.value:', chart1Ref.value);
console.log('chart2Ref.value:', chart2Ref.value);
// 初始化图表1
// 初始化图表
if (chart1Ref.value) {
console.log('初始化图表1');
console.log('初始化图表');
chart1.value = echarts.init(chart1Ref.value);
updateChart1();
}
// 初始化图表2
if (chart2Ref.value) {
console.log('初始化图表2');
chart2.value = echarts.init(chart2Ref.value);
updateChart2();
}
console.log('图表初始化完成');
}
@@ -85,14 +96,19 @@ function updateChart1() {
grid: {
left: '3%',
right: '4%',
bottom: '15%',
bottom: '30%',
top: '20%',
containLabel: true
},
xAxis: {
type: 'category',
boundaryGap: false,
data: chartLabels.value
data: chartLabels.value,
axisLabel: {
rotate: 45,
interval: 11, // 每12个标签显示一个，避免重叠
fontSize: 10
}
},
yAxis: {
type: 'value'
@@ -131,80 +147,9 @@ function updateChart1() {
console.log('图表1更新完成');
}
// 更新图表2
function updateChart2() {
console.log('更新图表2');
console.log('chart2.value:', chart2.value);
console.log('chartData2.value:', chartData2.value);
console.log('chartLabels.value:', chartLabels.value);
if (!chart2.value) return;
const option = {
title: {
text: '折线图2',
left: 'center'
},
tooltip: {
trigger: 'axis'
},
legend: {
data: ['数据'],
bottom: 0
},
grid: {
left: '3%',
right: '4%',
bottom: '15%',
top: '20%',
containLabel: true
},
xAxis: {
type: 'category',
boundaryGap: false,
data: chartLabels.value
},
yAxis: {
type: 'value'
},
series: [
{
name: '数据',
type: 'line',
smooth: true,
data: chartData2.value,
itemStyle: {
color: '#2196F3'
},
areaStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0,
color: 'rgba(33, 150, 243, 0.3)'
}, {
offset: 1,
color: 'rgba(33, 150, 243, 0.1)'
}]
}
}
}
]
};
console.log('设置图表2选项');
chart2.value.setOption(option);
console.log('图表2更新完成');
}
// 监听窗口大小变化
function handleResize() {
chart1.value?.resize();
chart2.value?.resize();
}
// 从后端获取折线图数据
@@ -214,33 +159,28 @@ async function fetchChartData() {
error.value = '';
try {
// 获取折线图1数据
console.log('获取折线图1数据');
const response1 = await axios.get('http://localhost:8080/api/charts/line1');
console.log('折线图1数据响应:', response1.data);
if (response1.data) {
chartData1.value = response1.data.data || chartData1.value;
chartLabels.value = response1.data.labels || chartLabels.value;
}
// 获取折线图2数据
console.log('获取折线图2数据');
const response2 = await axios.get('http://localhost:8080/api/charts/line2');
console.log('折线图2数据响应:', response2.data);
if (response2.data) {
chartData2.value = response2.data.data || chartData2.value;
// 获取折线图数据
console.log('获取折线图数据');
const response = await axios.get('http://localhost:8080/api/charts/line1');
console.log('折线图数据响应:', response.data);
if (response.data && response.data.data) {
chartData1.value = response.data.data;
// 确保数据长度与标签长度一致
if (chartData1.value.length !== chartLabels.value.length) {
console.warn('数据长度与标签长度不一致，使用默认数据');
chartData1.value = generateRandomData(chartLabels.value.length);
}
}
console.log('图表数据获取完成');
console.log('chartData1.value:', chartData1.value);
console.log('chartData2.value:', chartData2.value);
console.log('chartLabels.value:', chartLabels.value);
console.log('标签数量:', chartLabels.value.length);
// 更新图表
nextTick(() => {
console.log('更新图表数据');
updateChart1();
updateChart2();
});
} catch (err) {
console.error('获取图表数据失败:', err);
@@ -248,14 +188,12 @@ async function fetchChartData() {
// 使用默认数据
console.log('使用默认数据');
console.log('默认 chartData1.value:', chartData1.value);
console.log('默认 chartData2.value:', chartData2.value);
console.log('默认 chartLabels.value:', chartLabels.value);
// 更新图表
nextTick(() => {
console.log('使用默认数据更新图表');
updateChart1();
updateChart2();
});
} finally {
loading.value = false;
@@ -280,12 +218,48 @@ async function fetchTableData() {
}
}
// 从后端获取用户设置数据（用户名、止盈点、止亏点）
async function fetchUserSettings() {
console.log('开始获取用户设置数据');
try {
// 获取用户设置数据
console.log('获取用户设置数据');
const response = await axios.get('http://localhost:8080/api/ocr/userSettings');
console.log('用户设置数据响应:', response.data);
if (response.data) {
// 更新用户名
if (response.data.username) {
username.value = response.data.username;
isLoggedIn.value = true;
}
// 更新止盈点
if (response.data.winNum) {
input1.value = response.data.winNum;
}
// 更新止亏点
if (response.data.loseNum) {
input2.value = response.data.loseNum;
}
}
console.log('用户设置数据获取完成');
console.log('username.value:', username.value);
console.log('input1.value:', input1.value);
console.log('input2.value:', input2.value);
} catch (err) {
console.error('获取用户设置数据失败:', err);
// 失败时不显示错误，使用默认值
}
}
onMounted(() => {
console.log('组件挂载完成');
// 从后端获取数据
fetchChartData();
fetchTableData();
fetchUserSettings();
// 初始化图表（延迟一点时间，确保DOM完全渲染）
setTimeout(() => {
@@ -325,20 +299,14 @@ async function handleLogin() {
});
// 处理登录结果
if (response.data && response.data.code === 1) {
if (response.data && response.code !== 500) {
// 登录成功
loginLoading.value = false;
loginDialogVisible.value = false;
isLoggedIn.value = true;
// 更新用户名和账户余额
// 更新用户名
username.value = loginForm.value.username;
accountBalance.value = response.data.balance || '¥10000.00';
// 保存登录信息（可选）
if (response.data.token) {
localStorage.setItem('token', response.data.token);
}
// 重置表单
loginForm.value = {
@@ -368,7 +336,6 @@ function handleLogout() {
isLoggedIn.value = false;
// 重置用户名和账户余额
username.value = '用户名';
accountBalance.value = '账户余额';
// 清除登录状态
localStorage.removeItem('token');
// 这里可以添加其他清理逻辑
@@ -400,7 +367,7 @@ async function handleConfirm() {
const response = await axios.post('http://localhost:8080/api/ocr/saveUserInfo', submitData);
// 处理响应结果
if (response.data && response.data.code === 1) {
if (response.data && response.code !== 500) {
console.log('提交成功:', response.data);
alert('设置保存成功');
} else {
@@ -425,12 +392,12 @@ async function handleStop() {
});
// 处理响应结果
if (response.data && response.data.code === 1) {
if (response.data && response.code !== 500) {
console.log('停止成功:', response.data);
alert('停止操作成功');
alert('停止成功');
} else {
console.error('停止失败:', response.data);
alert('停止操作失败: ' + (response.data.message || '未知错误'));
alert('停止失败: ' + (response.data.message || '未知错误'));
}
} catch (err) {
@@ -442,7 +409,6 @@ async function handleStop() {
onUnmounted(() => {
// 销毁图表
chart1.value?.dispose();
chart2.value?.dispose();
// 移除事件监听器
window.removeEventListener('resize', handleResize);
@@ -458,11 +424,9 @@ onUnmounted(() => {
<div class="account-avatar">👤</div>
<div class="account-details">
<div class="account-name">{{ username }}</div>
<div class="account-role">{{ accountBalance }}</div>
</div>
<div class="account-actions">
<button v-if="!isLoggedIn" type="button" class="login-button" @click="loginDialogVisible = true">登录</button>
<button v-else type="button" class="logout-button" @click="handleLogout">退出</button>
<button type="button" class="login-button" @click="loginDialogVisible = true">账号信息</button>
</div>
</div>
@@ -493,8 +457,8 @@ onUnmounted(() => {
<div class="form-actions">
<button type="button" class="cancel-button" @click="loginDialogVisible = false">取消</button>
<button type="submit" class="submit-button" :disabled="loginLoading">
<span v-if="loginLoading">登录中...</span>
<span v-else>登录</span>
<span v-if="loginLoading">保存中...</span>
<span v-else>保存</span>
</button>
</div>
</form>
@@ -535,21 +499,17 @@ onUnmounted(() => {
<thead>
<tr>
<th>ID</th>
<th>项目名称</th>
<th>数值</th>
<th>状态</th>
<th>期数</th>
<th>开奖时间</th>
<th>开奖号码</th>
</tr>
</thead>
<tbody>
<tr v-for="item in tableData" :key="item.id">
<td>{{ item.id }}</td>
<td>{{ item.name }}</td>
<td>{{ item.value }}</td>
<td>
<span :class="`status-badge ${item.status === '正常' ? 'status-normal' : item.status === '警告' ? 'status-warning' : 'status-error'}`">
{{ item.status }}
</span>
</td>
<td>{{ item.time }}</td>
<td>{{ item.result }}</td>
</tr>
</tbody>
</table>
@@ -568,14 +528,7 @@ onUnmounted(() => {
<div v-if="loading" class="chart-loading">
加载中...
</div>
<div v-else ref="chart1Ref" class="echart-container" style="width: 100%; height: 300px; border: 1px solid #ddd;"></div>
</div>
<div class="chart-container">
<div v-if="loading" class="chart-loading">
加载中...
</div>
<div v-else ref="chart2Ref" class="echart-container" style="width: 100%; height: 300px; border: 1px solid #ddd;"></div>
<div v-else ref="chart1Ref" class="echart-container" style="width: 100%; height: 100%; border: 1px solid #ddd;"></div>
</div>
</div>
</div>
@@ -794,10 +747,11 @@ onUnmounted(() => {
/* 图表区域 */
.chart-container {
flex: 1;
display: flex;
flex-direction: column;
gap: 15px;
height: 300px;
min-height: 0;
}
.input-group label {