From aaf66f2d542927c18fa189642ff4617f0e1039e3 Mon Sep 17 00:00:00 2001
From: PC-20250623MANY\Administrator <344137771@qq.com>
Date: Wed, 20 Aug 2025 16:23:40 +0800
Subject: [PATCH] 1
---
src/page/kline/index.vue | 129 ++++++++++++++++++-------
src/page/kline/components/kLine.vue | 139 +++++++++++++++++----------
2 files changed, 182 insertions(+), 86 deletions(-)
diff --git a/src/page/kline/components/kLine.vue b/src/page/kline/components/kLine.vue
index fb9777c..124ed1d 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,7 +952,7 @@
}
// { Index: 'MACD', Modify: true, Change: true, Close: false }
],
- SplashTitle: 'loading...',
+ SplashTitle: "loading...",
Symbol: "600015.sh",
IsAutoUpdate: true, // 是自动更新数据
AutoUpdateFrequency: 15000,
@@ -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 },
@@ -1055,7 +1088,7 @@
return data;
};
-DefaultData.GetKLineRightMenu = function () {
+DefaultData.GetKLineRightMenu = function() {
var data = [
{
Name: i18n.t("hj93"),
@@ -1176,7 +1209,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; // 将监听到的宽高进行赋值
@@ -1187,7 +1220,10 @@
},
beforeDestroy() {
clearInterval(this.timerss); // 在组件销毁前清除定时器
- this.timerss = null;
+ this.timerss = null;
+ },
+ destroyed() {
+ clearInterval(this.timerss); // 在组件销毁前清除定时器
},
methods: {
OnSize() {
@@ -1332,32 +1368,35 @@
clearInterval(this.timerss);
this.timerss = null;
}
- 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;
- }
+ EastMoney.HQData.NetworkFilter(data, callback);
+ this.timerss = setInterval(() => {
+ EastMoney.HQData.NetworkFilter(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;
+ // }
}, 5000);
},
@@ -1434,7 +1473,7 @@
justify-content: center;
// flex-direction: column;
- >.btn {
+ > .btn {
cursor: pointer;
width: 100%;
text-align: center;
diff --git a/src/page/kline/index.vue b/src/page/kline/index.vue
index dbeb3d8..732090a 100644
--- a/src/page/kline/index.vue
+++ b/src/page/kline/index.vue
@@ -81,14 +81,19 @@
<span class="i_icon">{{ bayType }}</span>
<span class="i_hint" style="color:#777">{{ singDetails.spell }}</span>
</div>
- <div class="detail_title_a">{{ singDetails.name }}({{ singDetails.gid }})</div>
+ <div class="detail_title_a">
+ {{ singDetails.name }}({{ singDetails.gid }})
+ </div>
<div class="real_time_detail">
<div class="left_now_price">
<div class="top_now">
<!-- <span :class="singDetails.nowPrice - singDetails.preclose_px > 0 ? 'price green' : 'price red'">{{
singDetails.nowPrice
}}</span> -->
- <span :class="singDetails.hcrate > 0 ? 'price green' : 'price red'">{{ singDetails.nowPrice }}</span>
+ <span
+ :class="singDetails.hcrate > 0 ? 'price green' : 'price red'"
+ >{{ singDetails.nowPrice }}</span
+ >
</div>
<div class="bottom_now">
<div>
@@ -99,14 +104,19 @@
<span v-else>
{{
(singDetails.nowPrice - singDetails.preclose_px).toFixed(2)
- }}</span>
+ }}</span
+ >
</div>
- <div class="tew" :class="singDetails.hcrate > 0 ? 'number green' : 'number red'">
+ <div
+ class="tew"
+ :class="singDetails.hcrate > 0 ? 'number green' : 'number red'"
+ >
<span v-if="singDetails.nowPrice === 0">-</span>
<!-- <span v-else>({{ singDetails.nowPrice - singDetails.preclose_px > 0 ? '+' : '' }}
{{ singDetails.hcrate ? singDetails.hcrate : '0' }}%)</span> -->
<span v-else>
- ({{ singDetails.hcrate ? singDetails.hcrate : "0" }}%)</span>
+ ({{ singDetails.hcrate ? singDetails.hcrate : "0" }}%)</span
+ >
</div>
</div>
</div>
@@ -117,16 +127,24 @@
<!-- <span :class="singDetails.preclose_px < 0 ? 'number green' : 'number red'">{{
singDetails.open_px
}}</span> -->
- <span :class="singDetails.hcrate > 0 ? 'number green' : 'number red'
- ">{{ singDetails.open_px }}</span>
+ <span
+ :class="
+ singDetails.hcrate > 0 ? 'number green' : 'number red'
+ "
+ >{{ singDetails.open_px }}</span
+ >
</div>
<div class="rights topes">
<span class="titles">{{ $t("hj73") }}</span>
<!-- <span :class="singDetails.preclose_px < 0 ? 'number green' : 'number red'">{{
singDetails.today_max
}}</span> -->
- <span :class="singDetails.hcrate > 0 ? 'number green' : 'number red'
- ">{{ singDetails.today_max }}</span>
+ <span
+ :class="
+ singDetails.hcrate > 0 ? 'number green' : 'number red'
+ "
+ >{{ singDetails.today_max }}</span
+ >
</div>
</div>
<div class="bottoms">
@@ -135,16 +153,24 @@
<!-- <span :class="singDetails.preclose_px < 0 ? 'number green' : 'number red'">{{
singDetails.preclose_px
}}</span> -->
- <span :class="singDetails.hcrate > 0 ? 'number green' : 'number red'
- ">{{ singDetails.preclose_px }}</span>
+ <span
+ :class="
+ singDetails.hcrate > 0 ? 'number green' : 'number red'
+ "
+ >{{ singDetails.preclose_px }}</span
+ >
</div>
<div class="rights bots">
<span class="titles">{{ $t("hj75") }}</span>
<!-- <span :class="singDetails.preclose_px < 0 ? 'number green' : 'number red'">{{
singDetails.today_min
}}</span> -->
- <span :class="singDetails.hcrate > 0 ? 'number green' : 'number red'
- ">{{ singDetails.today_min }}</span>
+ <span
+ :class="
+ singDetails.hcrate > 0 ? 'number green' : 'number red'
+ "
+ >{{ singDetails.today_min }}</span
+ >
</div>
</div>
</div>
@@ -153,12 +179,16 @@
<div class="k_line_detail">
<Kline :key="key" :type="singDetails.type" />
</div>
- <div class="priect_top_bottom" style="display: none" v-if="
- kLineDetails.if_us != 1 &&
- kLineDetails.type != 'hk' &&
- kLineDetails.type != 'hk' &&
- kLineDetails.if_zhishu == 0
- ">
+ <div
+ class="priect_top_bottom"
+ style="display: none"
+ v-if="
+ kLineDetails.if_us != 1 &&
+ kLineDetails.type != 'hk' &&
+ kLineDetails.type != 'hk' &&
+ kLineDetails.if_zhishu == 0
+ "
+ >
<div class="t_title">
<span>{{ $t("hj76") }}</span>
</div>
@@ -264,7 +294,11 @@
<div class="t_ma">
<span>{{ $t("hj80") }}</span>
</div>
- <div class="ets" v-for="(item, i) in timedata.data.details" :key="i">
+ <div
+ class="ets"
+ v-for="(item, i) in timedata.data.details"
+ :key="i"
+ >
<div class="left_sell1">
<span>{{ item.split(",")[0] }}</span>
</div>
@@ -277,7 +311,11 @@
<div class="t_ma">
<span>{{ $t("hj81") }}</span>
</div>
- <div class="ets" v-for="(item, i) in timedata.data.details" :key="i">
+ <div
+ class="ets"
+ v-for="(item, i) in timedata.data.details"
+ :key="i"
+ >
<div class="left_sell1">
<span>{{ item.split(",")[1] }}</span>
</div>
@@ -290,7 +328,11 @@
<div class="t_ma">
<span>{{ $t("hj82") }}</span>
</div>
- <div class="ets" v-for="(item, i) in timedata.data.details" :key="i">
+ <div
+ class="ets"
+ v-for="(item, i) in timedata.data.details"
+ :key="i"
+ >
<div class="left_sell1">
<span>{{ item.split(",")[2] }}</span>
</div>
@@ -384,7 +426,11 @@
<div class="btns">
<div class="lefts">
<div class="left_ca" @click="option()">
- <img src="../../assets/img/meishoucang.png" alt v-if="isOptionOpt === false" />
+ <img
+ src="../../assets/img/meishoucang.png"
+ alt
+ v-if="isOptionOpt === false"
+ />
<img src="../../assets/img/shoucangle.png" alt v-else />
</div>
<!-- <div class="right_xx" @click="handleJj()">
@@ -443,11 +489,19 @@
},
created() {
+ // 进入页面的时候清除所以得计时器,防止页面切换的时候出现多个定时器
+ let end = setTimeout(function() {}, 0);
+ for (let i = 0; i <= end; i++) {
+ clearTimeout(i);
+ clearInterval(i);
+ }
+
const { query } = this.$route;
this.kLineDetails = query;
if (query.if_us === "1") {
this.getSingDetailUs();
} else {
+ this.getSingDetails();
this.timer = setInterval(() => {
this.getSingDetails();
}, 5000);
@@ -457,6 +511,9 @@
this.getNohknews();
},
beforeDestroy() {
+ this.clearInterval(this.timer); // 在组件销毁前清除定时器
+ },
+ destroyed() {
this.clearInterval(this.timer); // 在组件销毁前清除定时器
},
// beforeDestroy() {
@@ -803,7 +860,7 @@
height: calc(100% - 1.7rem);
overflow: auto;
- >.content {
+ > .content {
width: 100%;
height: 100%;
position: relative;
@@ -825,10 +882,10 @@
background: #fff;
.detail_title_a {
- font-size: .45rem;
+ font-size: 0.45rem;
font-weight: 500;
- margin-top: .2rem;
- line-height: .45rem;
+ margin-top: 0.2rem;
+ line-height: 0.45rem;
}
.i_icon {
@@ -853,7 +910,7 @@
align-items: center;
margin-right: 10vw;
- >img {
+ > img {
// margin-top: 0.2rem;
width: 0.6rem;
height: 0.6rem;
@@ -941,13 +998,13 @@
max-width: 70%;
height: 100%;
- >div {
+ > div {
width: 100%;
padding: 0.15rem 0;
display: flex;
align-items: center;
- >div {
+ > div {
// width: 50%;
height: 100%;
display: flex;
@@ -1014,7 +1071,7 @@
justify-content: space-between;
margin-top: 0.6rem;
- >div {
+ > div {
width: 49%;
height: 100%;
}
@@ -1035,7 +1092,7 @@
display: flex;
margin-top: 0.08rem;
- >div {
+ > div {
width: 50%;
height: 100%;
display: flex;
@@ -1118,9 +1175,9 @@
height: 70%;
display: flex;
align-items: center;
- padding-left: .3rem;
+ padding-left: 0.3rem;
- >div {
+ > div {
width: 50%;
height: 100%;
display: flex;
@@ -1140,9 +1197,9 @@
display: flex;
align-items: center;
justify-content: center;
- padding-right: .2rem;
+ padding-right: 0.2rem;
- >div {
+ > div {
border-radius: 0.15rem;
}
--
Gitblit v1.9.3