|
|
|
@ -36,19 +36,19 @@ |
|
|
|
<scroll-view class="content" :style="{ top: contentTopPosition + 'px' }" scroll-y="true"> |
|
|
|
<!-- 股票列表 --> |
|
|
|
<view class="stock-list"> |
|
|
|
<view class="stock-row" v-for="(stock, index) in sortedStockList" :key="index" @click="viewIndexDetail(stock)"> |
|
|
|
<view class="stock-row" v-for="(item,index) in sortedStockList" :key="item" @click="viewIndexDetail(item,index)"> |
|
|
|
<view class="stock-cell name-column"> |
|
|
|
<view class="stock-name">{{ stock.stockName }}</view> |
|
|
|
<view class="stock-code">{{ stock.stockCode }}</view> |
|
|
|
<view class="stock-name">{{ item.stockName }}</view> |
|
|
|
<view class="stock-code">{{ item.stockCode }}</view> |
|
|
|
</view> |
|
|
|
<view class="stock-cell price-column"> |
|
|
|
<text class="stock-price" :class="stock.isRising ? 'rising' : 'falling'"> |
|
|
|
{{ typeof stock.price === "number" ? stock.price.toFixed(2) : stock.price }} |
|
|
|
<text class="stock-price" :class="item.isRising ? 'rising' : 'falling'"> |
|
|
|
{{ typeof item.currentPrice === "number" ? item.currentPrice.toFixed(2) : item.currentPrice }} |
|
|
|
</text> |
|
|
|
</view> |
|
|
|
<view class="stock-cell change-column"> |
|
|
|
<text class="stock-change" :class="stock.isRising ? 'rising' : 'falling'"> |
|
|
|
{{ stock.change || stock.changePercent }} |
|
|
|
<text class="stock-change" :class="item.isRising ? 'rising' : 'falling'"> |
|
|
|
{{ item.changePercent }} |
|
|
|
</text> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
@ -64,10 +64,12 @@ |
|
|
|
</template> |
|
|
|
|
|
|
|
<script setup> |
|
|
|
import { ref, computed, onMounted, watch } from "vue"; |
|
|
|
import { ref, computed, onMounted, onUnmounted, nextTick, watch } from "vue"; |
|
|
|
import { onLoad } from "@dcloudio/uni-app"; |
|
|
|
import footerBar from "@/components/footerBar.vue"; |
|
|
|
import { getRegionalGroupListAPI } from "../../api/marketSituation/marketSituation.js"; |
|
|
|
import { useMarketSituationStore } from "../../stores/modules/marketSituation.js"; |
|
|
|
const marketSituationStore = useMarketSituationStore(); |
|
|
|
// 响应式数据 |
|
|
|
const iSMT = ref(0); |
|
|
|
const contentHeight = ref(0); |
|
|
|
@ -185,8 +187,8 @@ const contentTopPosition = computed(() => { |
|
|
|
}); |
|
|
|
|
|
|
|
const sortedStockList = computed(() => { |
|
|
|
console.log("计算sortedStockList，原始数据长度:", stockList.value.length); |
|
|
|
let list = [...stockList.value]; |
|
|
|
console.log("计算sortedStockList，原始数据长度:", marketSituationStore.marketDetailCardData.length); |
|
|
|
let list = [...marketSituationStore.marketDetailCardData]; |
|
|
|
|
|
|
|
if (sortType.value === "price") { |
|
|
|
list.sort((a, b) => { |
|
|
|
@ -194,8 +196,8 @@ const sortedStockList = computed(() => { |
|
|
|
}); |
|
|
|
} else if (sortType.value === "change") { |
|
|
|
list.sort((a, b) => { |
|
|
|
const aChange = parseFloat(a.change.replace(/[+%-]/g, "")); |
|
|
|
const bChange = parseFloat(b.change.replace(/[+%-]/g, "")); |
|
|
|
const aChange = parseFloat(a.changePercent.replace(/[+%-]/g, "")); |
|
|
|
const bChange = parseFloat(b.changePercent.replace(/[+%-]/g, "")); |
|
|
|
return sortOrder.value === "asc" ? aChange - bChange : bChange - aChange; |
|
|
|
}); |
|
|
|
} |
|
|
|
@ -210,35 +212,23 @@ const getRegionalGroupList = async () => { |
|
|
|
name: marketTitle.value, |
|
|
|
}); |
|
|
|
regionalGroupArray.value = result.data; |
|
|
|
marketSituationStore.marketDetailCardData = result.data; |
|
|
|
} catch (e) { |
|
|
|
console.error("获取区域分组列表失败:", e); |
|
|
|
} |
|
|
|
}; |
|
|
|
|
|
|
|
// 页面加载时接收参数 |
|
|
|
onLoad(async (options) => { |
|
|
|
if (options && options.market) { |
|
|
|
marketTitle.value = options.market; |
|
|
|
await getRegionalGroupList(); |
|
|
|
} |
|
|
|
}); |
|
|
|
|
|
|
|
// 方法 |
|
|
|
const goBack = () => { |
|
|
|
uni.navigateBack(); |
|
|
|
}; |
|
|
|
|
|
|
|
// 方法：查看指数详情 |
|
|
|
const viewIndexDetail = (item) => { |
|
|
|
const viewIndexDetail = (item,index) => { |
|
|
|
console.log("查看指数详情:", item.stockName); |
|
|
|
// uni.showToast({ |
|
|
|
// title: `查看 ${item.stockName} 详情`, |
|
|
|
// icon: 'none', |
|
|
|
// duration: 2000 |
|
|
|
// }) |
|
|
|
// 这里可以跳转到具体的指数详情页面 |
|
|
|
uni.navigateTo({ |
|
|
|
url: `/pages/marketSituation/marketCondition?stockInformation=${encodeURIComponent(JSON.stringify(item))}`, |
|
|
|
url: `/pages/marketSituation/marketCondition?stockInformation=${encodeURIComponent(JSON.stringify(item))}&index=${index}&from=marketDetail`, |
|
|
|
}); |
|
|
|
}; |
|
|
|
|
|
|
|
@ -260,6 +250,302 @@ const sortByChange = () => { |
|
|
|
} |
|
|
|
}; |
|
|
|
|
|
|
|
// TCP相关响应式变量 |
|
|
|
import tcpConnection, { TCPConnection, TCP_CONFIG } from "@/api/tcpConnection.js"; |
|
|
|
const tcpConnected = ref(false); |
|
|
|
const connectionListener = ref(null); |
|
|
|
const messageListener = ref(null); |
|
|
|
// 初始化TCP监听器 |
|
|
|
const initTcpListeners = () => { |
|
|
|
// 创建连接状态监听器并保存引用 |
|
|
|
connectionListener.value = (status, result) => { |
|
|
|
tcpConnected.value = status === "connected"; |
|
|
|
console.log("TCP连接状态变化:", status, tcpConnected.value); |
|
|
|
|
|
|
|
// 如果连接，发送获取批量数据 |
|
|
|
if (status === "connected") { |
|
|
|
sendTcpMessage("batch_real_time"); |
|
|
|
} |
|
|
|
}; |
|
|
|
|
|
|
|
// 创建消息监听器并保存引用 |
|
|
|
messageListener.value = (type, message, parsedArray) => { |
|
|
|
const messageObj = { |
|
|
|
type: type, |
|
|
|
content: message, |
|
|
|
parsedArray: parsedArray, |
|
|
|
timestamp: new Date().toLocaleTimeString(), |
|
|
|
direction: "received", |
|
|
|
}; |
|
|
|
|
|
|
|
// 解析股票数据 |
|
|
|
parseStockData(message); |
|
|
|
}; |
|
|
|
|
|
|
|
// 注册监听器 |
|
|
|
tcpConnection.onConnectionChange(connectionListener.value); |
|
|
|
tcpConnection.onMessage(messageListener.value); |
|
|
|
}; |
|
|
|
|
|
|
|
// 连接TCP服务器 |
|
|
|
const connectTcp = () => { |
|
|
|
console.log("开始连接TCP服务器..."); |
|
|
|
tcpConnection.connect(); |
|
|
|
}; |
|
|
|
|
|
|
|
// 断开TCP连接 |
|
|
|
const disconnectTcp = () => { |
|
|
|
console.log("断开TCP连接..."); |
|
|
|
tcpConnection.disconnect(); |
|
|
|
tcpConnected.value = false; |
|
|
|
}; |
|
|
|
|
|
|
|
// 发送TCP消息 |
|
|
|
const sendTcpMessage = (command) => { |
|
|
|
let messageData; |
|
|
|
let messageDataArray = []; |
|
|
|
if (command == "batch_real_time") { |
|
|
|
messageDataArray = regionalGroupArray.value.map((item) => item.code); |
|
|
|
} |
|
|
|
console.log(messageDataArray); |
|
|
|
|
|
|
|
switch (command) { |
|
|
|
// 实时行情推送 |
|
|
|
case "real_time": |
|
|
|
messageData = { |
|
|
|
command: "real_time", |
|
|
|
stock_code: "SH.000001", |
|
|
|
}; |
|
|
|
break; |
|
|
|
// 初始化获取行情历史数据 |
|
|
|
case "init_real_time": |
|
|
|
messageData = { |
|
|
|
command: "init_real_time", |
|
|
|
stock_code: "SH.000001", |
|
|
|
}; |
|
|
|
break; |
|
|
|
case "stop_real_time": |
|
|
|
messageData = { |
|
|
|
command: "stop_real_time", |
|
|
|
}; |
|
|
|
break; |
|
|
|
// 股票列表 |
|
|
|
case "stock_list": |
|
|
|
messageData = { |
|
|
|
command: "stock_list", |
|
|
|
}; |
|
|
|
break; |
|
|
|
case "batch_real_time": |
|
|
|
messageData = { |
|
|
|
command: "batch_real_time", |
|
|
|
stock_codes: messageDataArray, |
|
|
|
}; |
|
|
|
break; |
|
|
|
case "help": |
|
|
|
messageData = { |
|
|
|
command: "help", |
|
|
|
}; |
|
|
|
break; |
|
|
|
} |
|
|
|
if (!messageData) { |
|
|
|
|
|
|
|
return; |
|
|
|
} else { |
|
|
|
try { |
|
|
|
// 发送消息 |
|
|
|
const success = tcpConnection.send(messageData); |
|
|
|
if (success) { |
|
|
|
console.log("home发送TCP消息:", messageData); |
|
|
|
} |
|
|
|
} catch (error) { |
|
|
|
console.error("发送TCP消息时出错:", error); |
|
|
|
} |
|
|
|
} |
|
|
|
}; |
|
|
|
|
|
|
|
// 获取TCP连接状态 |
|
|
|
const getTcpStatus = () => { |
|
|
|
const status = tcpConnection.getConnectionStatus(); |
|
|
|
uni.showModal({ |
|
|
|
title: "TCP连接状态", |
|
|
|
content: `当前状态: ${status ? "已连接" : "未连接"}`, |
|
|
|
showCancel: false, |
|
|
|
}); |
|
|
|
}; |
|
|
|
|
|
|
|
let isMorePacket = { |
|
|
|
init_batch_real_time: false, |
|
|
|
batch_real_time: false, |
|
|
|
}; |
|
|
|
let receivedMessage; |
|
|
|
|
|
|
|
// 解析TCP股票数据 |
|
|
|
const parseStockData = (message) => { |
|
|
|
try { |
|
|
|
console.log("进入parseStockData, message类型:", typeof message); |
|
|
|
|
|
|
|
let parsedMessage; |
|
|
|
// 如果isMorePacket是true，说明正在接受分包数据，无条件接收 |
|
|
|
// 如果message是字符串且以{开头，说明是JSON字符串，需要解析 |
|
|
|
// 如果不属于以上两种情况，说明是普通字符串，不预解析 |
|
|
|
if (message.includes("欢迎连接到股票数据服务器")) { |
|
|
|
console.log("服务器命令列表，不予处理"); |
|
|
|
return; |
|
|
|
} |
|
|
|
if ((typeof message === "string" && message.includes("batch_data_start")) || isMorePacket.init_batch_real_time) { |
|
|
|
if (typeof message === "string" && message.includes("batch_data_start")) { |
|
|
|
console.log("开始接受分包数据"); |
|
|
|
receivedMessage = ""; |
|
|
|
} else { |
|
|
|
console.log("接收分包数据过程中"); |
|
|
|
} |
|
|
|
isMorePacket.init_batch_real_time = true; |
|
|
|
receivedMessage += message; |
|
|
|
// 如果当前消息包含}，说明收到JSON字符串结尾，结束接收，开始解析 |
|
|
|
if (receivedMessage.includes("batch_data_complete")) { |
|
|
|
console.log("接受分包数据结束"); |
|
|
|
isMorePacket.init_batch_real_time = false; |
|
|
|
|
|
|
|
console.log("展示数据", receivedMessage); |
|
|
|
let startIndex = 0; |
|
|
|
let startCount = 0; |
|
|
|
let endIndex = receivedMessage.indexOf("batch_data_complete"); |
|
|
|
for (let i = 0; i < receivedMessage.length; ++i) { |
|
|
|
if (receivedMessage[i] == "{") { |
|
|
|
startCount++; |
|
|
|
if (startCount == 2) { |
|
|
|
startIndex = i; |
|
|
|
break; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
for (let i = receivedMessage.indexOf("batch_data_complete"); i >= 0; --i) { |
|
|
|
if (receivedMessage[i] == "}" || startIndex == endIndex) { |
|
|
|
endIndex = i; |
|
|
|
break; |
|
|
|
} |
|
|
|
} |
|
|
|
if (startIndex >= endIndex) { |
|
|
|
throw new Error("JSON字符串格式错误"); |
|
|
|
} |
|
|
|
console.log("message", startIndex, endIndex, receivedMessage[endIndex], receivedMessage[startIndex]); |
|
|
|
parsedMessage = JSON.parse(receivedMessage.substring(startIndex, endIndex + 1)); |
|
|
|
|
|
|
|
console.log("JSON解析成功，解析后类型:", typeof parsedMessage, parsedMessage); |
|
|
|
|
|
|
|
const stockDataArray = parsedMessage.data; |
|
|
|
marketSituationStore.marketDetailCardData = regionalGroupArray.value.map((item) => ({ |
|
|
|
market: item.market, |
|
|
|
stockCode: item.code, |
|
|
|
stockName: item.name, |
|
|
|
id: item.id, |
|
|
|
currentPrice: stockDataArray[item.code][0].current_price.toFixed(2), |
|
|
|
changeAmount: (stockDataArray[item.code][0].current_price - stockDataArray[item.code][0].pre_close).toFixed(2), |
|
|
|
changePercent: ((100 * (stockDataArray[item.code][0].current_price - stockDataArray[item.code][0].pre_close)) / stockDataArray[item.code][0].pre_close).toFixed(2) + "%", |
|
|
|
isRising: stockDataArray[item.code][0].current_price - stockDataArray[item.code][0].pre_close >= 0, |
|
|
|
})); |
|
|
|
} |
|
|
|
} else if ((typeof message === "string" && message.includes('{"count')) || isMorePacket.batch_real_time) { |
|
|
|
if (typeof message === "string" && message.includes('{"count')) { |
|
|
|
console.log("开始接受分包数据"); |
|
|
|
receivedMessage = ""; |
|
|
|
} else { |
|
|
|
console.log("接收分包数据过程中"); |
|
|
|
} |
|
|
|
isMorePacket.batch_real_time = true; |
|
|
|
receivedMessage += message; |
|
|
|
// 如果当前消息包含}，说明收到JSON字符串结尾，结束接收，开始解析 |
|
|
|
if (receivedMessage.includes("batch_realtime_data")) { |
|
|
|
console.log("接受分包数据结束"); |
|
|
|
isMorePacket.batch_real_time = false; |
|
|
|
|
|
|
|
console.log("展示数据", receivedMessage); |
|
|
|
let startIndex = 0; |
|
|
|
let endIndex = receivedMessage.length - 1; |
|
|
|
for (let i = 0; i < receivedMessage.length; ++i) { |
|
|
|
if (receivedMessage[i] == "{") { |
|
|
|
startIndex = i; |
|
|
|
break; |
|
|
|
} |
|
|
|
} |
|
|
|
for (let i = receivedMessage.length - 1; i >= 0; --i) { |
|
|
|
if (receivedMessage[i] == "}" || startIndex == endIndex) { |
|
|
|
endIndex = i; |
|
|
|
break; |
|
|
|
} |
|
|
|
} |
|
|
|
if (startIndex >= endIndex) { |
|
|
|
throw new Error("JSON字符串格式错误"); |
|
|
|
} |
|
|
|
parsedMessage = JSON.parse(receivedMessage.substring(startIndex, endIndex + 1)); |
|
|
|
|
|
|
|
console.log("JSON解析成功，解析后类型:", typeof parsedMessage, parsedMessage); |
|
|
|
const stockDataArray = parsedMessage.data; |
|
|
|
marketSituationStore.marketDetailCardData = regionalGroupArray.value.map((item) => ({ |
|
|
|
market: item.market, |
|
|
|
stockCode: item.code, |
|
|
|
stockName: item.name, |
|
|
|
id: item.id, |
|
|
|
currentPrice: stockDataArray[item.code][0].current_price.toFixed(2), |
|
|
|
changeAmount: (stockDataArray[item.code][0].current_price - stockDataArray[item.code][0].pre_close).toFixed(2), |
|
|
|
changePercent: ((100 * (stockDataArray[item.code][0].current_price - stockDataArray[item.code][0].pre_close)) / stockDataArray[item.code][0].pre_close).toFixed(2) + "%", |
|
|
|
isRising: stockDataArray[item.code][0].current_price - stockDataArray[item.code][0].pre_close >= 0, |
|
|
|
})); |
|
|
|
} |
|
|
|
} else { |
|
|
|
// 没有通过JSON解析判断，说明不是需要的数据 |
|
|
|
console.log("不是需要的数据，不做处理"); |
|
|
|
} |
|
|
|
} catch (error) { |
|
|
|
console.error("解析TCP股票数据失败:", error.message); |
|
|
|
console.error("错误详情:", error); |
|
|
|
} |
|
|
|
}; |
|
|
|
|
|
|
|
// 移除TCP监听器 |
|
|
|
const removeTcpListeners = () => { |
|
|
|
if (connectionListener.value) { |
|
|
|
tcpConnection.removeConnectionListener(connectionListener.value); |
|
|
|
connectionListener.value = null; |
|
|
|
console.log("已移除TCP连接状态监听器"); |
|
|
|
} |
|
|
|
|
|
|
|
if (messageListener.value) { |
|
|
|
tcpConnection.removeMessageListener(messageListener.value); |
|
|
|
messageListener.value = null; |
|
|
|
console.log("已移除TCP消息监听器"); |
|
|
|
} |
|
|
|
}; |
|
|
|
|
|
|
|
const startTcp = () => { |
|
|
|
try { |
|
|
|
removeTcpListeners(); |
|
|
|
disconnectTcp(); |
|
|
|
initTcpListeners(); |
|
|
|
connectTcp(); |
|
|
|
} catch (error) { |
|
|
|
console.error("建立连接并设置监听出错:", error); |
|
|
|
} |
|
|
|
}; |
|
|
|
|
|
|
|
// 页面加载时接收参数 |
|
|
|
onLoad(async (options) => { |
|
|
|
if (options && options.market) { |
|
|
|
marketTitle.value = options.market; |
|
|
|
await getRegionalGroupList(); |
|
|
|
initTcpListeners(); |
|
|
|
await nextTick(); |
|
|
|
// 开始连接 |
|
|
|
startTcp(); |
|
|
|
} |
|
|
|
}); |
|
|
|
|
|
|
|
onUnmounted(() => { |
|
|
|
sendTcpMessage("stop_real_time"); |
|
|
|
removeTcpListeners(); |
|
|
|
disconnectTcp(); |
|
|
|
}); |
|
|
|
|
|
|
|
onMounted(() => { |
|
|
|
// 获取状态栏高度 |
|
|
|
iSMT.value = uni.getSystemInfoSync().statusBarHeight; |
|
|
|
|
hongxilin
4 weeks ago