From 408b743b5ef9affaea95b48d5bea40080dbca34e Mon Sep 17 00:00:00 2001
From: PC-20250623MANY\Administrator <344137771@qq.com>
Date: Sat, 20 Sep 2025 20:36:41 +0800
Subject: [PATCH] 修改ws
---
src/page/kline/components/kLine.vue | 205 +++++++++++++++++++++++++++++++--------------------
1 files changed, 124 insertions(+), 81 deletions(-)
diff --git a/src/page/kline/components/kLine.vue b/src/page/kline/components/kLine.vue
index 93b5b8b..4a4ead1 100644
--- a/src/page/kline/components/kLine.vue
+++ b/src/page/kline/components/kLine.vue
@@ -6,27 +6,60 @@
<div class="periodWrap kline_periodWrap" ref="kline_periodWrap">
<!-- DWM 分 -->
<div class="btnGroup" style="position: relative">
- <div class="btn2" v-for="(item, index) in KLinePeriodMenu" :class="{ active: KLinePeriodIndex == index }"
- :key="item.ID" @click="OnClickKLinePeriodMenu(index, item, 'kline')">
+ <div
+ class="btn2"
+ v-for="(item, index) in KLinePeriodMenu"
+ :class="{ active: KLinePeriodIndex == index }"
+ :key="item.ID"
+ @click="OnClickKLinePeriodMenu(index, item, 'kline')"
+ >
<span>{{ item.Name }}</span>
</div>
- <div style="position: absolute; right: 0; top: 25px; z-index: 99" v-if="isShow == true">
- <div class="btnGroup" v-show="IsShowRightMenu" style="display: flex; flex-direction: column">
- <div class="btn" :class="{ active: KLineRightIndex == index }" v-for="(item, index) in KLineRightMenu"
- :key="item.ID" style="padding: 10px" @click="OnClickKLineRightMenu(index, item)">
+ <div
+ style="position: absolute; right: 0; top: 25px; z-index: 99"
+ v-if="isShow == true"
+ >
+ <div
+ class="btnGroup"
+ v-show="IsShowRightMenu"
+ style="display: flex; flex-direction: column"
+ >
+ <div
+ class="btn"
+ :class="{ active: KLineRightIndex == index }"
+ v-for="(item, index) in KLineRightMenu"
+ :key="item.ID"
+ style="padding: 10px"
+ @click="OnClickKLineRightMenu(index, item)"
+ >
{{ item.Name }}
</div>
- <div class="btn" v-for="item in KLineIndexMenu" :key="item.ID" style="padding: 10px"
- @click="ChangeKLineIndex(item)">
+ <div
+ class="btn"
+ v-for="item in KLineIndexMenu"
+ :key="item.ID"
+ style="padding: 10px"
+ @click="ChangeKLineIndex(item)"
+ >
{{ item.Name }}
</div>
</div>
</div>
</div>
</div>
- <div class="hqchart" id="hqchart_minute" ref="kline" v-show="chartType == 'minute'"></div>
- <div class="hqchart" id="hqchart_kline" ref="kline2" v-show="chartType == 'kline'"></div>
+ <div
+ class="hqchart"
+ id="hqchart_minute"
+ ref="kline"
+ v-show="chartType == 'minute'"
+ ></div>
+ <div
+ class="hqchart"
+ id="hqchart_kline"
+ ref="kline2"
+ v-show="chartType == 'kline'"
+ ></div>
</div>
</div>
</div>
@@ -43,12 +76,12 @@
import EastMoney from "../../../eastmoney/HQData.js";
import i18n from "@/locales/index.js";
-HQChart.Chart.MARKET_SUFFIX_NAME.GetMarketStatus = function (symbol) {
+HQChart.Chart.MARKET_SUFFIX_NAME.GetMarketStatus = function(symbol) {
return 2;
}; // 一直交易
-function DefaultData() { }
+function DefaultData() {}
-DefaultData.GetMinuteOption = function () {
+DefaultData.GetMinuteOption = function() {
var option = {
Type: "分钟走势图", // 创建图形类型
// Type:'分钟走势图横屏',
@@ -58,7 +91,7 @@
// { Index:"KDJ", Modify: false, Change: true, Close: true},
// { Index: "KDJ", Modify: false, Change: false, Close: false }
],
- SplashTitle: 'loading...',
+ SplashTitle: "loading...",
Symbol: "AAPL.usa",
IsAutoUpdate: true, // 是自动更新数据
AutoUpdateFrequency: 20000,
@@ -113,7 +146,7 @@
return option;
};
-DefaultData.GetMinuteIndexMenu = function () {
+DefaultData.GetMinuteIndexMenu = function() {
var data = [
{
Name: "MACD",
@@ -140,7 +173,7 @@
return data;
};
-DefaultData.GetKLineIndexMenu = function () {
+DefaultData.GetKLineIndexMenu = function() {
var data = [
{
Name: "MA",
@@ -177,7 +210,7 @@
return data;
};
-DefaultData.GetTestSymbolMenu = function () {
+DefaultData.GetTestSymbolMenu = function() {
// 品种代码规则 ${东方财富品种代码}_${东方财富市场}.${HQChart内部市场后缀}
var data = [
{
@@ -898,7 +931,7 @@
};
// k形图
-DefaultData.GetKLineOption = function () {
+DefaultData.GetKLineOption = function() {
var option = {
Type: "历史K线图", // 创建图形类型
Language: "EN", // 英文 'EN' 简体中文:'CN' 繁体中文："TC"
@@ -919,9 +952,9 @@
}
// { Index: 'MACD', Modify: true, Change: true, Close: false }
],
- SplashTitle: 'loading...',
+ SplashTitle: "loading...",
Symbol: "600015.sh",
- IsAutoUpdate: true, // 是自动更新数据
+ IsAutoUpdate: false, // 是自动更新数据
AutoUpdateFrequency: 15000,
IsApiPeriod: true,
IsShowRightMenu: false, // 是否显示右键菜单
@@ -995,7 +1028,7 @@
return option;
};
-DefaultData.GetMinuteDayMenu = function () {
+DefaultData.GetMinuteDayMenu = function() {
var data = [
{
Name: "1D",
@@ -1022,7 +1055,7 @@
return data;
};
-DefaultData.GetKLinePeriodMenu = function () {
+DefaultData.GetKLinePeriodMenu = function() {
var data = [
// { Name: i18n.t('hj86'), ID: 3 },分时额外处理
// { Name: i18n.t("hj86"), ID: 4 },
@@ -1038,14 +1071,14 @@
Name: i18n.t("hj89"),
ID: 2
},
- {
- Name: i18n.t("hj90"),
- ID: 4
- },
- {
- Name: i18n.t("hj91"),
- ID: 5
- },
+ // {
+ // Name: i18n.t("hj90"),
+ // ID: 4
+ // },
+ // {
+ // Name: i18n.t("hj91"),
+ // ID: 5
+ // },
{
Name: i18n.t("hj92"),
ID: 7
@@ -1055,7 +1088,7 @@
return data;
};
-DefaultData.GetKLineRightMenu = function () {
+DefaultData.GetKLineRightMenu = function() {
var data = [
{
Name: i18n.t("hj93"),
@@ -1136,12 +1169,9 @@
// this.CreateKLineChart();
this.$nextTick(() => {
- // this.timerss = setInterval(() => {
- this.CreateMinuteChart();
- this.CreateKLineChart();
- // }, 3000);
// this.CreateMinuteChart();
- // this.CreateKLineChart();
+ this.CreateKLineChart();
+
// this.timerss = setInterval(() => {
// // this.KLineChart = null
// // this.CreateMinuteChart();
@@ -1176,7 +1206,7 @@
var self = this;
// 侦听元素的调整大小事件，并使用元素作为调整大小事件的参数来调用侦听器函数。传递给函数的选项将
// 覆盖实例选项
- erd.listenTo(this.$refs["rightContent"], function (element) {
+ erd.listenTo(this.$refs["rightContent"], function(element) {
var width = element.offsetWidth;
var height = element.offsetHeight;
self.tableHeight = height - 10; // 将监听到的宽高进行赋值
@@ -1188,8 +1218,19 @@
beforeDestroy() {
clearInterval(this.timerss); // 在组件销毁前清除定时器
this.timerss = null;
+ this.clearTime();
},
methods: {
+ // 清除所有定时器
+ clearTime() {
+ // 创建一个额外的定时器以获取当前最大定时器 ID
+ let lastIntervalId = setInterval(() => {}, 1000);
+ // 遍历并清除所有定时器
+ for (let i = 1; i <= lastIntervalId; i++) {
+ clearInterval(i);
+ clearTimeout(i);
+ }
+ },
OnSize() {
var width = this.$refs.right.clientWidth;
// var rightTab = this.$refs.rightTab
@@ -1221,8 +1262,9 @@
SetChartStyle() {
EastMoney.HQData.SetMinuteChartCoordinate();
var blackStyle = HQChart.Chart.HQChartStyle.GetStyleConfig(
- HQChart.Chart.STYLE_TYPE_ID.WHITE_ID
- ); // 读取黑色风格配置
+ // HQChart.Chart.STYLE_TYPE_ID.WHITE_ID // 白色风格
+ HQChart.Chart.STYLE_TYPE_ID.BLACK_ID // 黑色风格
+ );
blackStyle.UpBarColor = "#449b54"; //上涨
blackStyle.DownBarColor = "#e13b45";
@@ -1242,7 +1284,7 @@
chart.SetOption(option);
this.Chart = chart;
},
-
+ // k线图创建
CreateKLineChart() {
if (this.KLineChart) return;
@@ -1250,9 +1292,8 @@
option.Symbol = this.Symbol;
option.NetworkFilter = (data, callback) => {
+ // console.log("data, callback", data, callback);
this.NetworkFilter(data, callback);
-
- // this.NetworkFilter(data, callback);
}; // 网络请求回调函数
var chart = HQChart.Chart.JSChart.Init(this.$refs.kline2);
HQChart.Chart.JSChart.GetResource().FrameLogo.Text = null;
@@ -1294,7 +1335,7 @@
item,
type // K线周期
) {
- console.log("1");
+ this.clearTime();
//分时额外处理才注释的
this.chartType = type;
this.KLinePeriodIndex = index;
@@ -1328,39 +1369,39 @@
callback // 第3方数据替换接口
) {
EastMoney.HQData.Log("[HQChartDemo::NetworkFilter] data", data);
- if (this.timerss) {
- clearInterval(this.timerss);
- this.timerss = null;
- }
+
+ this.getFilter(data, callback);
this.timerss = setInterval(() => {
- switch (data.Name) {
- // 分时图数据对接
- case "MinuteChartContainer::RequestMinuteData":
- EastMoney.HQData.NetworkFilter(data, callback);
- break;
- case "MinuteChartContainer::RequestHistoryMinuteData":
- EastMoney.HQData.NetworkFilter(data, callback);
- break;
-
- case "KLineChartContainer::RequestHistoryData": // 日线全量数据下载
- EastMoney.HQData.NetworkFilter(data, callback);
- break;
- case "KLineChartContainer::RequestRealtimeData": // 日线实时数据更新
- EastMoney.HQData.NetworkFilter(data, callback);
- break;
- case "KLineChartContainer::RequestFlowCapitalData": // 流通股本
- EastMoney.HQData.NetworkFilter(data, callback);
- break;
- case "KLineChartContainer::ReqeustHistoryMinuteData": // 分钟全量数据下载
- EastMoney.HQData.NetworkFilter(data, callback);
- break;
- case "KLineChartContainer::RequestMinuteRealtimeData": // 分钟增量数据更新
- EastMoney.HQData.NetworkFilter(data, callback);
- break;
- }
- }, 2000);
+ this.getFilter(data, callback);
+ }, 5000);
},
+ getFilter(data, callback) {
+ switch (data.Name) {
+ // 分时图数据对接
+ case "MinuteChartContainer::RequestMinuteData":
+ EastMoney.HQData.NetworkFilter(data, callback);
+ break;
+ case "MinuteChartContainer::RequestHistoryMinuteData":
+ EastMoney.HQData.NetworkFilter(data, callback);
+ break;
+ case "KLineChartContainer::RequestHistoryData": // 日线全量数据下载
+ EastMoney.HQData.NetworkFilter(data, callback);
+ break;
+ case "KLineChartContainer::RequestRealtimeData": // 日线实时数据更新
+ EastMoney.HQData.NetworkFilter(data, callback);
+ break;
+ case "KLineChartContainer::RequestFlowCapitalData": // 流通股本
+ EastMoney.HQData.NetworkFilter(data, callback);
+ break;
+ case "KLineChartContainer::ReqeustHistoryMinuteData": // 分钟全量数据下载
+ EastMoney.HQData.NetworkFilter(data, callback);
+ break;
+ case "KLineChartContainer::RequestMinuteRealtimeData": // 分钟增量数据更新
+ EastMoney.HQData.NetworkFilter(data, callback);
+ break;
+ }
+ },
handleSelect(key, keyPath) {
console.log(key, keyPath);
this.ChangeSymbol(keyPath[1]);
@@ -1378,7 +1419,9 @@
</script>
<style lang="less">
@animation-duration: 0.3s;
-
+.parameter{
+ background-color: #333 !important;
+}
.box {
width: 100%;
height: 100%;
@@ -1434,7 +1477,7 @@
justify-content: center;
// flex-direction: column;
- >.btn {
+ > .btn {
cursor: pointer;
width: 100%;
text-align: center;
@@ -1479,9 +1522,9 @@
.btnGroup {
// border: 1px solid #242424;
- color: #000;
+ color: #fff;
display: flex;
- background: #fff;
+ // background: #fff;
.btn {
margin: 0 0.1rem;
@@ -1499,7 +1542,7 @@
.active {
color: #c4d600;
font-weight: 800;
- background: rgb(245, 245, 245);
+ background: #444;
}
}
@@ -1514,14 +1557,14 @@
#hqchart_minute {
// height: 100%;
- background-color: #fff;
+ background-color: #000;
height: 5rem;
position: relative;
}
#hqchart_kline {
// height: 100% !important;
- background-color: #fff;
+ background-color: #000;
height: 5rem;
position: relative;
}
@@ -1546,7 +1589,7 @@
display: flex;
align-items: center;
justify-content: center;
- background: #fff !important;
+ // background: #fff !important;
}
.btnGroup {
--
Gitblit v1.9.3