1

PC-20250623MANY\Administrator

2025-09-30 9ddad348a549154e7b328f9d7dd9517d2abd330c

 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>
@@ -34,8 +67,8 @@
</template>

<script>
let timerss = null; //定时器
import * as echarts from "echarts";

import _ from "lodash";
import HQChart from "hqchart";
import "hqchart/src/jscommon/umychart.resource/css/tools.css";
@@ -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,10 +91,10 @@
      // { 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,
    IsAutoUpdate: false, // 是自动更新数据
    AutoUpdateFrequency: 2000,
    DayCount: 1, // 1 最新交易日数据 >1 多日走势图
    IsShowRightMenu: false, // 是否显示右键菜单
    CorssCursorTouchEnd: true,
@@ -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"),
@@ -1106,7 +1139,6 @@

      VolChartHeight: 10,
      chartType: "kline",
      timerss: null,
      isShow: false,
      xData: []
    };
@@ -1136,22 +1168,9 @@

    // this.CreateKLineChart();
    this.$nextTick(() => {
      // this.timerss = setInterval(() => {
      this.CreateMinuteChart();
      this.CreateKLineChart();
      // }, 3000);
      // timerss = setInterval(() => {
      // this.CreateMinuteChart();
      // this.CreateKLineChart();
      // this.timerss = setInterval(() => {
      //   // this.KLineChart = null
      //   // this.CreateMinuteChart();
      //   // this.CreateKLineChart();
      //   console.log(this.KLinePeriodMenu);
      //   //此处为了 让k线实时刷新
      //   this.OnClickKLinePeriodMenu(this.KLinePeriodIndex, 0, 'kline')
      //   this.OnClickKLinePeriodMenu(this.KLinePeriodIndex, this.KLinePeriodMenu[this.KLinePeriodIndex],
      //     'kline')
      // }, 3000);
      this.CreateKLineChart();
    });
    let that = this;
    window.onresize = _.debounce(this.OnSize, 200);
@@ -1176,7 +1195,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; // 将监听到的宽高进行赋值
@@ -1186,8 +1205,9 @@
    });
  },
  beforeDestroy() {
    clearInterval(this.timerss); // 在组件销毁前清除定时器
    this.timerss = null;
    clearInterval(timerss); // 在组件销毁前清除定时器
    timerss = null;
    this.clearTime();
  },
  methods: {
    OnSize() {
@@ -1209,7 +1229,16 @@
      if (this.Chart) this.Chart.OnSize();
      if (this.KLineChart) this.KLineChart.OnSize();
    },

    // 清除所有定时器
    clearTime() {
      // 创建一个额外的定时器以获取当前最大定时器 ID
      let lastIntervalId = setInterval(() => {}, 1000);
      // 遍历并清除所有定时器
      for (let i = 1; i <= lastIntervalId; i++) {
        clearInterval(i);
        clearTimeout(i);
      }
    },
    changeRightContent(type) {
      this.KLinePeriodIndex = 0;
      this.chartType = type;
@@ -1294,7 +1323,7 @@
      item,
      type // K线周期
    ) {
      console.log("1");
      this.clearTime();
      //分时额外处理才注释的
      this.chartType = type;
      this.KLinePeriodIndex = index;
@@ -1328,37 +1357,11 @@
      callback // 第3方数据替换接口
    ) {
      EastMoney.HQData.Log("[HQChartDemo::NetworkFilter] data", data);
      if (this.timerss) {
        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;
        }
      }, 2000);
      EastMoney.HQData.NetworkFilter(data, callback);
      timerss = setInterval(() => {
        EastMoney.HQData.NetworkFilter(data, callback);
      }, 3000);
    },

    handleSelect(key, keyPath) {
@@ -1434,7 +1437,7 @@
      justify-content: center;
      // flex-direction: column;

      >.btn {
      > .btn {
        cursor: pointer;
        width: 100%;
        text-align: center;