Condition页面结构优化

.hbuilderx/launch.json

@@ -2,7 +2,7 @@
     "version" : "1.0",
     "configurations" : [
         {
-            "customPlaygroundType" : "device",
+            "customPlaygroundType" : "local",
             "packageName" : "io.dcloud.HBuilder",
             "playground" : "custom",
             "type" : "uni-app:app-android"

api/tcpConnection.js

@@ -6,7 +6,7 @@
  */
 
 // 引用TCP插件
-// const TCPSocket = uni.requireNativePlugin('Aimer-TCPPlugin');
+const TCPSocket = uni.requireNativePlugin('Aimer-TCPPlugin');
 // const TCPSocket = uni.requireNativePlugin("Aimer-TCPPlugin");
 
 // TCP连接配置

pages/marketSituation/marketCondition.vue

@@ -211,7 +211,7 @@
               <button class="mini-btn" type="default" size="mini" @click="ChangeKLinePeriod(4)">1M</button>
               <button class="mini-btn" type="default" size="mini" @click="ChangeKLinePeriod(5)">15M</button>
             </view>
-        <view style='background-color:#ffffff;'>
+            <view style="background-color: #ffffff">
               <HQChartControl ref="HQChartCtrl" DefaultChart="{Type:'KLine'}" :DefaultSymbol="Symbol"> </HQChartControl>
             </view>
           </view>
@@ -249,45 +249,43 @@ import { HCharts } from "@/common/canvasMethod.js";
 import tcpConnection, { TCPConnection, TCP_CONFIG } from "../../api/tcpConnection";
 import { useMarketSituationStore } from "../../stores/modules/marketSituation.js";
 const marketSituationStore = useMarketSituationStore();
-import HQChartControl from '@/uni_modules/jones-hqchart2/js_sdk/HQChartControl.vue'
+import HQChartControl from "@/uni_modules/jones-hqchart2/js_sdk/HQChartControl.vue";
 
 //测试数据
-import HQData from "@/uni_modules/jones-hqchart2/js_sdk/umychart.NetworkFilterTest.vue.js"
-import { dailyDataPackets } from '@/common/dailyData.js'
-
+import HQData from "@/uni_modules/jones-hqchart2/js_sdk/umychart.NetworkFilterTest.vue.js";
+import { dailyDataPackets } from "@/common/dailyData.js";
 
 // 响应式数据
-const Symbol = ref('GBPAUD.FXCM')
-const ChartWidth = ref(350)
-const ChartHeight = ref(500)
-const HQChartCtrl = ref(null)
+const Symbol = ref("GBPAUD.FXCM");
+const HQChartCtrl = ref(null);
 
 // 方法定义
 const CreateHQChart = () => {
-    const chartHeight = ChartHeight.value
-    const hqchartCtrl = HQChartCtrl.value
+  const width = canvasWidth.value;
+  const height = canvasHeight.value;
+  const hqchartCtrl = HQChartCtrl.value;
 
-    if (!hqchartCtrl) return
+  if (!hqchartCtrl) return;
 
   //修改option
   //hqchartCtrl.KLine.Option.
-    hqchartCtrl.NetworkFilter = NetworkFilter
-    hqchartCtrl.SetSize(ChartWidth.value, chartHeight)
-    hqchartCtrl.OnSize()
+  hqchartCtrl.NetworkFilter = NetworkFilter;
+  hqchartCtrl.SetSize(width, height);
+  hqchartCtrl.OnSize();
 
-    hqchartCtrl.KLine.Option.IsAutoUpdate = false
-    hqchartCtrl.KLine.Option.KLine.Period = 4
+  hqchartCtrl.KLine.Option.IsAutoUpdate = false;
+  hqchartCtrl.KLine.Option.KLine.Period = 4;
 
   nextTick(() => {
-        hqchartCtrl.CreateHQChart()
-    })
-}
+    hqchartCtrl.CreateHQChart();
+  });
+};
 
 const transformDailyDataToHQChart = (dailyDataPackets) => {
-    const symbol = dailyDataPackets.stock_code || Symbol.value
-    const rows = Array.isArray(dailyDataPackets.data) ? dailyDataPackets.data : []
+  const symbol = dailyDataPackets.stock_code || Symbol.value;
+  const rows = Array.isArray(dailyDataPackets.data) ? dailyDataPackets.data : [];
   // HQChart日线数据格式: [Date, Open, High, Low, Close, Volume]
-    const data = rows.map((r, idx) => ([
+  const data = rows.map((r, idx) => [
     parseInt(r.trade_date, 10), // Date: YYYYMMDD
     Number(idx > 0 ? rows[idx - 1].bid_close : r.bid_close), // YClose: 昨收
     Number(r.bid_open), // Open
@@ -295,100 +293,76 @@ const transformDailyDataToHQChart = (dailyDataPackets) => {
     Number(r.bid_low), // Low
     Number(r.bid_close), // Close
     Number(r.tick_qty || 0), // Volume
-        Number(r.amount || 0)                                  // Amount（如无则填0）
-    ]))
-    return { name: symbol, symbol, ver: 2.0, data }
-}
+    Number(r.amount || 0), // Amount（如无则填0）
+  ]);
+  return { name: symbol, symbol, ver: 2.0, data };
+};
 
 const ClearHQChart = () => {
-    const hqchartCtrl = HQChartCtrl.value
-    if (hqchartCtrl) hqchartCtrl.ClearChart()
-}
+  const hqchartCtrl = HQChartCtrl.value;
+  if (hqchartCtrl) hqchartCtrl.ClearChart();
+};
 
 const ChangeMinutePeriod = (days) => {
-    const hqchartCtrl = HQChartCtrl.value
-    if (hqchartCtrl) hqchartCtrl.ChangeMinutePeriod(days)
-}
+  const hqchartCtrl = HQChartCtrl.value;
+  if (hqchartCtrl) hqchartCtrl.ChangeMinutePeriod(days);
+};
 
 const ChangeKLinePeriod = (period) => {
-    const hqchartCtrl = HQChartCtrl.value
-    if (hqchartCtrl) hqchartCtrl.ChangeKLinePeriod(period)
-}
+  const hqchartCtrl = HQChartCtrl.value;
+  if (hqchartCtrl) hqchartCtrl.ChangeKLinePeriod(period);
+};
 
 const NetworkFilter = (data, callback) => {
-    console.log(`[App:NetworkFilter] Name=${data.Name} Explain=${data.Explain}`)
+  console.log(`[App:NetworkFilter] Name=${data.Name} Explain=${data.Explain}`);
   // 阻止默认行为（默认会走HQData的CDN）
-    data.PreventDefault = true
+  data.PreventDefault = true;
 
-    const reqSymbol = (data?.Request?.Data?.symbol) || Symbol.value || 'GBPAUD.FXCM'
+  const reqSymbol = data?.Request?.Data?.symbol || Symbol.value || "GBPAUD.FXCM";
 
   switch (data.Name) {
     // 日K历史数据
-        case 'KLineChartContainer::RequestHistoryData': {
-            const packet = dailyDataPackets[reqSymbol]
+    case "KLineChartContainer::RequestHistoryData": {
+      const packet = dailyDataPackets[reqSymbol];
       if (packet) {
-                const mock = transformDailyDataToHQChart(packet)
-                callback({ data: mock })
+        const mock = transformDailyDataToHQChart(packet);
+        callback({ data: mock });
       } else {
         // 没有该代码的本地包时，返回空结构
-                callback({ data: { name: reqSymbol, symbol: reqSymbol, ver: 2.0, data: [] } })
+        callback({ data: { name: reqSymbol, symbol: reqSymbol, ver: 2.0, data: [] } });
       }
-            break
+      break;
     }
     // 日K实时数据（我们已关闭自动更新；如触发则回空）
-        case 'KLineChartContainer::RequestRealtimeData': {
-            callback({ data: { name: reqSymbol, symbol: reqSymbol, ver: 2.0, data: [] } })
-            break
+    case "KLineChartContainer::RequestRealtimeData": {
+      callback({ data: { name: reqSymbol, symbol: reqSymbol, ver: 2.0, data: [] } });
+      break;
     }
     // 分时/分钟数据（如暂不支持，统一回空；后续可加分钟数据转换）
-        case 'KLineChartContainer::ReqeustHistoryMinuteData':
-        case 'KLineChartContainer::RequestMinuteRealtimeData':
-        case 'MinuteChartContainer::RequestMinuteData':
-        case 'MinuteChartContainer::RequestHistoryMinuteData': {
-            callback({ data: { name: reqSymbol, symbol: reqSymbol, ver: 2.0, data: [] } })
-            break
+    case "KLineChartContainer::ReqeustHistoryMinuteData":
+    case "KLineChartContainer::RequestMinuteRealtimeData":
+    case "MinuteChartContainer::RequestMinuteData":
+    case "MinuteChartContainer::RequestHistoryMinuteData": {
+      callback({ data: { name: reqSymbol, symbol: reqSymbol, ver: 2.0, data: [] } });
+      break;
     }
     default: {
       // 未覆盖的请求返回空，保持引擎稳定
-            callback({ data: { name: reqSymbol, symbol: reqSymbol, ver: 2.0, data: [] } })
-            break
-        }
+      callback({ data: { name: reqSymbol, symbol: reqSymbol, ver: 2.0, data: [] } });
+      break;
     }
-}
-
-// 页面显示时的处理
-const handleShow = () => {
-    uni.getSystemInfo({
-        success: (res) => {
-            const width = res.windowWidth
-            const height = res.windowHeight
-            ChartWidth.value = width
-            ChartHeight.value = height - 65
-            nextTick(() => {
-                CreateHQChart()
-            })
   }
-    })
-}
+};
 
 // 页面隐藏时的处理
 const handleHide = () => {
-    ClearHQChart()
-}
+  ClearHQChart();
+};
 
 // 页面卸载时的处理
 const handleUnload = () => {
-    ClearHQChart()
-}
-
-// 生命周期钩子
-onMounted(() => {
-    handleShow()
-})
-
-onUnmounted(() => {
-    handleUnload()
-})
+  ClearHQChart();
+};
 
 // TCP相关响应式变量
 const tcpConnected = ref(false);
@@ -750,8 +724,8 @@ const toRightPage = () => {
 
 const updateStockInformation = (stock) => {
   klineTab.value = 1;
-  stockInformation.value.stockName = stock.stockName||stock.name;
-  stockInformation.value.stockCode = stock.stockCode||stock.code;
+  stockInformation.value.stockName = stock.stockName || stock.name;
+  stockInformation.value.stockCode = stock.stockCode || stock.code;
   sendTcpMessage("stop_real_time");
   sendTcpMessage("init_real_time");
 };
@@ -2393,8 +2367,8 @@ onLoad((options) => {
 
       // 更新stockInformation
       if (stockData) {
-        stockInformation.value.stockName = stockData.stockName||stockData.name;
-        stockInformation.value.stockCode = stockData.stockCode||stockData.code;
+        stockInformation.value.stockName = stockData.stockName || stockData.name;
+        stockInformation.value.stockCode = stockData.stockCode || stockData.code;
       }
     } catch (error) {
       console.error("解析股票数据失败：", error);
@@ -2425,6 +2399,7 @@ onLoad((options) => {
 
 // 保存定时器，用于页面卸载时清理
 onUnmounted(() => {
+  handleUnload();
   removeTcpListeners();
   disconnectTcp();
   if (timer) {
@@ -2468,6 +2443,7 @@ onMounted(async () => {
     await nextTick();
     setTimeout(() => {
       initCanvas();
+      CreateHQChart();
     }, 100);
     console.log("所有初始化步骤完成");
   } catch (error) {