oneao/workspace
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

u

Browse Source
This commit is contained in:
oneao committed 2026-01-30 17:22:20 +08:00
1 parent c62c9d080b
commit 6a8c31e20c
29 files changed
+1454 -357
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

code/allapp/allapp-rn/test.html
+80 -73
View File
@@ -1,87 +1,94 @@
<!DOCTYPE html>
<html lang="zh-CN">
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>财务分析 Demo</title>
<script src="https://cdn.tailwindcss.com"></script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>WebSocket Test</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
}
#output {
margin-top: 20px;
padding: 10px;
border: 1px solid #ccc;
min-height: 150px;
}
#sendMessage {
margin-top: 20px;
padding: 10px;
width: 100%;
}
</style>
</head>
<body class="bg-gray-100 p-4">
<body>
<!-- Header: 收支切换 -->
<div class="flex justify-center gap-4 mb-4">
<button id="expenseBtn" class="px-4 py-2 rounded-full bg-blue-500 text-white font-semibold">支出</button>
<button id="incomeBtn" class="px-4 py-2 rounded-full bg-gray-200 text-gray-700 font-semibold">收入</button>
</div>
<!-- 时间维度选择 -->
<div class="flex justify-center gap-2 mb-4">
<button class="timeBtn px-3 py-1 rounded-full bg-blue-500 text-white font-medium" data-type="month">按月</button>
<button class="timeBtn px-3 py-1 rounded-full bg-gray-200 text-gray-700 font-medium" data-type="year">按年</button>
<button class="timeBtn px-3 py-1 rounded-full bg-gray-200 text-gray-700 font-medium" data-type="custom">自定义</button>
</div>
<!-- 日期选择 -->
<div id="datePickerContainer" class="flex justify-center mb-4">
<!-- 默认显示按月日期选择 -->
<input type="month" id="monthInput" class="p-2 rounded border border-gray-300">
<input type="month" id="yearInput" class="p-2 rounded border border-gray-300 hidden">
<div id="customInput" class="flex gap-2 hidden">
<input type="date" id="startDate" class="p-2 rounded border border-gray-300">
<span class="self-center">~</span>
<input type="date" id="endDate" class="p-2 rounded border border-gray-300">
<h2>WebSocket Test</h2>
<div>
<label for="messageInput">Enter Message:</label>
<input type="text" id="messageInput" placeholder="Type your message here">
<button id="sendBtn">Send Message</button>
</div>
</div>
<!-- 示例图表区域 -->
<div class="bg-white p-4 rounded shadow text-center">
<p class="text-gray-500">这里显示图表或分析结果</p>
</div>
<div id="output">
<h3>Messages:</h3>
<div id="messages"></div>
</div>
<script>
const expenseBtn = document.getElementById('expenseBtn')
const incomeBtn = document.getElementById('incomeBtn')
const timeBtns = document.querySelectorAll('.timeBtn')
const monthInput = document.getElementById('monthInput')
const yearInput = document.getElementById('yearInput')
const customInput = document.getElementById('customInput')
<script>
// Create a new WebSocket connection
const socket = new WebSocket('ws://192.168.1.137:8086/app/ws');
// 收支切换逻辑
expenseBtn.addEventListener('click', () => {
expenseBtn.classList.add('bg-blue-500', 'text-white')
expenseBtn.classList.remove('bg-gray-200', 'text-gray-700')
incomeBtn.classList.add('bg-gray-200', 'text-gray-700')
incomeBtn.classList.remove('bg-blue-500', 'text-white')
})
// Get HTML elements
const sendButton = document.getElementById('sendBtn');
const messageInput = document.getElementById('messageInput');
const messagesDiv = document.getElementById('messages');
incomeBtn.addEventListener('click', () => {
incomeBtn.classList.add('bg-blue-500', 'text-white')
incomeBtn.classList.remove('bg-gray-200', 'text-gray-700')
expenseBtn.classList.add('bg-gray-200', 'text-gray-700')
expenseBtn.classList.remove('bg-blue-500', 'text-white')
})
// WebSocket onopen event: Fired when WebSocket connection is established
socket.onopen = function(event) {
console.log("Connected to WebSocket server!");
displayMessage("Connected to WebSocket server!");
};
// 时间维度切换逻辑
timeBtns.forEach(btn => {
btn.addEventListener('click', () => {
timeBtns.forEach(b => {
b.classList.remove('bg-blue-500', 'text-white')
b.classList.add('bg-gray-200', 'text-gray-700')
})
btn.classList.add('bg-blue-500', 'text-white')
btn.classList.remove('bg-gray-200', 'text-gray-700')
// WebSocket onmessage event: Fired when a message is received from the server
socket.onmessage = function(event) {
console.log("Received message from server: " + event.data);
displayMessage("Server: " + event.data);
};
// 显示对应日期选择控件
const type = btn.dataset.type
monthInput.classList.add('hidden')
yearInput.classList.add('hidden')
customInput.classList.add('hidden')
// WebSocket onerror event: Fired when there's an error with the WebSocket
socket.onerror = function(error) {
console.log(error)
console.error("WebSocket Error: " + error);
displayMessage("WebSocket Error: " + error);
};
if (type === 'month') monthInput.classList.remove('hidden')
if (type === 'year') yearInput.classList.remove('hidden')
if (type === 'custom') customInput.classList.remove('hidden')
})
})
</script>
// WebSocket onclose event: Fired when the connection is closed
socket.onclose = function(event) {
console.log("WebSocket connection closed");
displayMessage("WebSocket connection closed");
};
// Function to display messages on the page
function displayMessage(message) {
const messageElement = document.createElement('div');
messageElement.textContent = message;
messagesDiv.appendChild(messageElement);
}
// Button to send the message
sendButton.onclick = function() {
const message = messageInput.value;
if (message) {
console.log("Sending message: " + message);
socket.send(message);
displayMessage("You: " + message);
messageInput.value = ''; // Clear the input field
} else {
alert("Please enter a message!");
}
};
</script>
</body>
</html>