|
|
|
@ -204,16 +204,16 @@ |
|
|
|
</view> |
|
|
|
<view class="test" v-else-if="klineTab === 11"> |
|
|
|
<view class="button-sp-area"> |
|
|
|
<button class="mini-btn" type="default" size="mini" @click="ChangeMinutePeriod(1)">分时</button> |
|
|
|
<button class="mini-btn" type="default" size="mini" @click="ChangeMinutePeriod(5)">5D</button> |
|
|
|
<button class="mini-btn" type="default" size="mini" @click="ChangeKLinePeriod(0)">D</button> |
|
|
|
<button class="mini-btn" type="default" size="mini" @click="ChangeKLinePeriod(1)">W</button> |
|
|
|
<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;'> |
|
|
|
<HQChartControl ref="HQChartCtrl" DefaultChart="{Type:'KLine'}" :DefaultSymbol="Symbol"> </HQChartControl> |
|
|
|
</view> |
|
|
|
<button class="mini-btn" type="default" size="mini" @click="ChangeMinutePeriod(1)">分时</button> |
|
|
|
<button class="mini-btn" type="default" size="mini" @click="ChangeMinutePeriod(5)">5D</button> |
|
|
|
<button class="mini-btn" type="default" size="mini" @click="ChangeKLinePeriod(0)">D</button> |
|
|
|
<button class="mini-btn" type="default" size="mini" @click="ChangeKLinePeriod(1)">W</button> |
|
|
|
<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"> |
|
|
|
<HQChartControl ref="HQChartCtrl" DefaultChart="{Type:'KLine'}" :DefaultSymbol="Symbol"> </HQChartControl> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<view v-else class="kline-chart-container"> |
|
|
|
<text>K线图开发中...</text> |
|
|
|
@ -249,146 +249,120 @@ 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() |
|
|
|
//修改option |
|
|
|
//hqchartCtrl.KLine.Option. |
|
|
|
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() |
|
|
|
}) |
|
|
|
} |
|
|
|
nextTick(() => { |
|
|
|
hqchartCtrl.CreateHQChart(); |
|
|
|
}); |
|
|
|
}; |
|
|
|
|
|
|
|
const transformDailyDataToHQChart = (dailyDataPackets) => { |
|
|
|
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) => ([ |
|
|
|
parseInt(r.trade_date, 10), // Date: YYYYMMDD |
|
|
|
Number(idx > 0 ? rows[idx - 1].bid_close : r.bid_close), // YClose: 昨收 |
|
|
|
Number(r.bid_open), // Open |
|
|
|
Number(r.bid_high), // High |
|
|
|
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 } |
|
|
|
} |
|
|
|
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) => [ |
|
|
|
parseInt(r.trade_date, 10), // Date: YYYYMMDD |
|
|
|
Number(idx > 0 ? rows[idx - 1].bid_close : r.bid_close), // YClose: 昨收 |
|
|
|
Number(r.bid_open), // Open |
|
|
|
Number(r.bid_high), // High |
|
|
|
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 }; |
|
|
|
}; |
|
|
|
|
|
|
|
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}`) |
|
|
|
// 阻止默认行为（默认会走HQData的CDN） |
|
|
|
data.PreventDefault = true |
|
|
|
|
|
|
|
const reqSymbol = (data?.Request?.Data?.symbol) || Symbol.value || 'GBPAUD.FXCM' |
|
|
|
|
|
|
|
switch (data.Name) { |
|
|
|
// 日K历史数据 |
|
|
|
case 'KLineChartContainer::RequestHistoryData': { |
|
|
|
const packet = dailyDataPackets[reqSymbol] |
|
|
|
if (packet) { |
|
|
|
const mock = transformDailyDataToHQChart(packet) |
|
|
|
callback({ data: mock }) |
|
|
|
} else { |
|
|
|
// 没有该代码的本地包时，返回空结构 |
|
|
|
callback({ data: { name: reqSymbol, symbol: reqSymbol, ver: 2.0, data: [] } }) |
|
|
|
} |
|
|
|
break |
|
|
|
} |
|
|
|
// 日K实时数据（我们已关闭自动更新；如触发则回空） |
|
|
|
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 |
|
|
|
} |
|
|
|
default: { |
|
|
|
// 未覆盖的请求返回空，保持引擎稳定 |
|
|
|
callback({ data: { name: reqSymbol, symbol: reqSymbol, ver: 2.0, data: [] } }) |
|
|
|
break |
|
|
|
} |
|
|
|
console.log(`[App:NetworkFilter] Name=${data.Name} Explain=${data.Explain}`); |
|
|
|
// 阻止默认行为（默认会走HQData的CDN） |
|
|
|
data.PreventDefault = true; |
|
|
|
|
|
|
|
const reqSymbol = data?.Request?.Data?.symbol || Symbol.value || "GBPAUD.FXCM"; |
|
|
|
|
|
|
|
switch (data.Name) { |
|
|
|
// 日K历史数据 |
|
|
|
case "KLineChartContainer::RequestHistoryData": { |
|
|
|
const packet = dailyDataPackets[reqSymbol]; |
|
|
|
if (packet) { |
|
|
|
const mock = transformDailyDataToHQChart(packet); |
|
|
|
callback({ data: mock }); |
|
|
|
} else { |
|
|
|
// 没有该代码的本地包时，返回空结构 |
|
|
|
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() |
|
|
|
}) |
|
|
|
} |
|
|
|
}) |
|
|
|
} |
|
|
|
// 日K实时数据（我们已关闭自动更新；如触发则回空） |
|
|
|
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; |
|
|
|
} |
|
|
|
default: { |
|
|
|
// 未覆盖的请求返回空，保持引擎稳定 |
|
|
|
callback({ data: { name: reqSymbol, symbol: reqSymbol, ver: 2.0, data: [] } }); |
|
|
|
break; |
|
|
|
} |
|
|
|
} |
|
|
|
}; |
|
|
|
|
|
|
|
// 页面隐藏时的处理 |
|
|
|
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) { |
|
|
|
|
hongxilin