1

jhzh

2025-04-28 7daac23c401bc5b173be989c66dbe575be0e4d46

1

 src/page/kline/components/kLine.vue

@@ -6,60 +6,27 @@
          <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>
@@ -99,7 +66,10 @@
    IsShowRightMenu: false, // 是否显示右键菜单
    CorssCursorTouchEnd: true,

    CorssCursorInfo: { Left: 1, Right: 1 },
      CorssCursorInfo: {
        Left: 1,
        Right: 1
      },

    MinuteLine: {
      IsDrawAreaPrice: true, // 是否画价格面积图
@@ -112,13 +82,24 @@
      Right: 1, // 右边间距
      Top: 0,
      Bottom: 1,
      AutoRight: { Blank: 10, MinWidth: 40 },
      AutoLeft: { Blank: 10, MinWidth: 40 },
        AutoRight: {
          Blank: 10,
          MinWidth: 40
        },
        AutoLeft: {
          Blank: 10,
          MinWidth: 40
        },
    },

    // 子框架设置
    // Height 是否显示成交量 柱状图 0 false
    Frame: [{ SplitCount: 5 }, { SplitCount: 3, Height: 0 }],
      Frame: [{
        SplitCount: 5
      }, {
        SplitCount: 3,
        Height: 0
      }],

    // 扩展图形
    ExtendChart: [
@@ -130,24 +111,62 @@
};

DefaultData.GetMinuteIndexMenu = function () {
  var data = [
    { Name: "MACD", ID: "MACD", WindowIndex: 2 },
    { Name: "KDJ", ID: "KDJ", WindowIndex: 2 },
    { Name: "DMI", ID: "DMI", WindowIndex: 2 },
    { Name: "ROC", ID: "ROC", WindowIndex: 2 },
    var data = [{
        Name: "MACD",
        ID: "MACD",
        WindowIndex: 2
      },
      {
        Name: "KDJ",
        ID: "KDJ",
        WindowIndex: 2
      },
      {
        Name: "DMI",
        ID: "DMI",
        WindowIndex: 2
      },
      {
        Name: "ROC",
        ID: "ROC",
        WindowIndex: 2
      },
  ];

  return data;
};

DefaultData.GetKLineIndexMenu = function () {
  var data = [
    { Name: "MA", ID: "MA", WindowIndex: 0 },
    { Name: "BOLL", ID: "BOLL", WindowIndex: 0 },
    { Name: "MACD", ID: "MACD", WindowIndex: 1 },
    { Name: "KDJ", ID: "KDJ", WindowIndex: 1 },
    { Name: "DMI", ID: "DMI", WindowIndex: 1 },
    { Name: "ROC", ID: "ROC", WindowIndex: 1 },
    var data = [{
        Name: "MA",
        ID: "MA",
        WindowIndex: 0
      },
      {
        Name: "BOLL",
        ID: "BOLL",
        WindowIndex: 0
      },
      {
        Name: "MACD",
        ID: "MACD",
        WindowIndex: 1
      },
      {
        Name: "KDJ",
        ID: "KDJ",
        WindowIndex: 1
      },
      {
        Name: "DMI",
        ID: "DMI",
        WindowIndex: 1
      },
      {
        Name: "ROC",
        ID: "ROC",
        WindowIndex: 1
      },
  ];

  return data;
@@ -155,12 +174,10 @@

DefaultData.GetTestSymbolMenu = function () {
  // 品种代码规则 ${东方财富品种代码}_${东方财富市场}.${HQChart内部市场后缀}
  var data = [
    {
    var data = [{
      Title: "美股",
      Icon: "",
      Sub: [
        {
        Sub: [{
          Name: "网易",
          Code: "NTES_105.usa",
        },
@@ -205,8 +222,7 @@
    {
      Title: "沪深A股",
      Icon: "",
      Sub: [
        {
        Sub: [{
          Name: "浦发银行",
          Code: "600000_1.sh",
        },
@@ -227,8 +243,7 @@
    {
      Title: "北交所",
      Icon: "",
      Sub: [
        {
        Sub: [{
          Name: "凯添燃气",
          Code: "831010_0.bj",
        },
@@ -249,8 +264,7 @@
    {
      Title: "ETF基金",
      Icon: "",
      Sub: [
        {
        Sub: [{
          Name: "50ETF基金",
          Code: "510800_1.sh",
        },
@@ -271,8 +285,7 @@
    {
      Title: "港股",
      Icon: "",
      Sub: [
        {
        Sub: [{
          Name: "比亚迪股份",
          Code: "01211_116.hk",
        },
@@ -297,8 +310,7 @@
    {
      Title: "外汇",
      Icon: "",
      Sub: [
        {
        Sub: [{
          Name: "美元兑加元",
          Code: "USDCAD_119.FOREX",
        },
@@ -323,8 +335,7 @@
    {
      Title: "上海期货交易所",
      Icon: "",
      Sub: [
        {
        Sub: [{
          Name: "沪铜主力",
          Code: "CUM_113.SHFE",
        },
@@ -393,8 +404,7 @@
    {
      Title: "上海国际能源交易中心",
      Icon: "",
      Sub: [
        {
        Sub: [{
          Name: "原油主力",
          Code: "SCM_142.SHFE",
        },
@@ -415,8 +425,7 @@
    {
      Title: "大连商品交易所",
      Icon: "",
      Sub: [
        {
        Sub: [{
          Name: "玉米主力",
          Code: "CM_114.DCE",
        },
@@ -507,8 +516,7 @@
    {
      Title: "郑州商品交易所",
      Icon: "",
      Sub: [
        {
        Sub: [{
          Name: "强麦主力",
          Code: "WHM_115.CZC",
        },
@@ -605,8 +613,7 @@
    {
      Title: "中国金融期货交易所",
      Icon: "",
      Sub: [
        {
        Sub: [{
          Name: "二债主力",
          Code: "TS-130130_8.CFE",
        },
@@ -635,8 +642,7 @@
    {
      Title: "芝加哥商业交易所",
      Icon: "",
      Sub: [
        {
        Sub: [{
          Name: "小麦当月连续",
          Code: "ZW00Y_103.CBOT",
        },
@@ -715,8 +721,7 @@
    {
      Title: "纽约商品交易所",
      Icon: "",
      Sub: [
        {
        Sub: [{
          Name: "NYMEX原油",
          Code: "CL00Y_102.NYMEX",
        },
@@ -753,8 +758,7 @@
    {
      Title: "纽约商业期货交易所",
      Icon: "",
      Sub: [
        {
        Sub: [{
          Name: "COMEX白银",
          Code: "SI00Y_101.COMEX",
        },
@@ -783,18 +787,15 @@
    {
      Title: "纽约期货交易所",
      Icon: "",
      Sub: [
        {
        Sub: [{
          Name: "棉花当月连续",
          Code: "CT00Y_108.NYBOT",
        },
      ],
        }, ],
    },
    {
      Title: "伦敦金属交易所",
      Icon: "",
      Sub: [
        {
        Sub: [{
          Name: "综合镍03",
          Code: "NI-LNKT_109.LME",
        },
@@ -823,8 +824,7 @@
    {
      Title: "东京商品交易所",
      Icon: "",
      Sub: [
        {
        Sub: [{
          Name: "日铂金当月连续",
          Code: "JPL00Y_111.TOCOM",
        },
@@ -857,8 +857,7 @@
    {
      Title: "美国洲际交易所",
      Icon: "",
      Sub: [
        {
        Sub: [{
          Name: "布伦特原油当月连续",
          Code: "B00Y_112.IPE",
        },
@@ -879,10 +878,19 @@
    Type: "历史K线图", // 创建图形类型
    Language: "EN", // 英文 'EN' 简体中文:'CN' 繁体中文："TC"
    // 窗口指标
    Windows: [
      { Index: "MA", Modify: true, Change: false, height: 20 },
      Windows: [{
          Index: "MA",
          Modify: true,
          Change: false,
          height: 20
        },
      // { Index: 'MA', Modify: true, Modify: false, Change: false, height: 20 },
      { Index: "ATR", Modify: false, Change: false, Close: false },
        {
          Index: "ATR",
          Modify: false,
          Change: false,
          Close: false
        },
      // { Index: 'MACD', Modify: true, Change: true, Close: false }
    ],
    Symbol: "600015.sh",
@@ -904,7 +912,10 @@
      RightSpaceCount: 2,
    },

    CorssCursorInfo: { Left: 0, Right: 1 },
      CorssCursorInfo: {
        Left: 0,
        Right: 1
      },

    // 标题设置
    KLineTitle: {
@@ -919,24 +930,30 @@
      Right: 1, // 右边间距
      Top: 0,
      Bottom: 15,
      AutoRight: { Blank: 10, MinWidth: 40 },
        AutoRight: {
          Blank: 10,
          MinWidth: 40
        },
    },

    // 子框架设置
    Frame: [
      {
      Frame: [{
        SplitCount: 5,
        IsShowLeftText: false,
        IsShowYLine: false,
        Custom: [
          {
          Custom: [{
            Type: 0,
            Position: "right",
          }, ],
          },
        ],
        {
          SplitCount: 3,
          IsShowLeftText: false
      },
      { SplitCount: 3, IsShowLeftText: false },
      { SplitCount: 3, IsShowLeftText: false },
        {
          SplitCount: 3,
          IsShowLeftText: false
        },
    ],

    // 扩展图形
@@ -949,12 +966,26 @@
};

DefaultData.GetMinuteDayMenu = function () {
  var data = [
    { Name: "1D", ID: 1 },
    { Name: "2D", ID: 2 },
    { Name: "3D", ID: 3 },
    { Name: "4D", ID: 4 },
    { Name: "5D", ID: 5 },
    var data = [{
        Name: "1D",
        ID: 1
      },
      {
        Name: "2D",
        ID: 2
      },
      {
        Name: "3D",
        ID: 3
      },
      {
        Name: "4D",
        ID: 4
      },
      {
        Name: "5D",
        ID: 5
      },
  ];

  return data;
@@ -964,22 +995,48 @@
  var data = [
    // { Name: i18n.t('hj86'), ID: 3 },分时额外处理
    // { Name: i18n.t("hj86"), ID: 4 },
    { Name: i18n.t("hj87"), ID: 0 },
    { Name: i18n.t("hj88"), ID: 1 },
    { Name: i18n.t("hj89"), ID: 2 },
    { Name: i18n.t("hj90"), ID: 4 },
    { Name: i18n.t("hj91"), ID: 5 },
    { Name: i18n.t("hj92"), ID: 7 },
      {
        Name: i18n.t("hj87"),
        ID: 0
      },
      {
        Name: i18n.t("hj88"),
        ID: 1
      },
      {
        Name: i18n.t("hj89"),
        ID: 2
      },
      {
        Name: i18n.t("hj90"),
        ID: 4
      },
      {
        Name: i18n.t("hj91"),
        ID: 5
      },
      {
        Name: i18n.t("hj92"),
        ID: 7
      },
  ];

  return data;
};

DefaultData.GetKLineRightMenu = function () {
  var data = [
    { Name: i18n.t("hj93"), ID: 0 },
    { Name: i18n.t("hj94"), ID: 1 },
    { Name: i18n.t("hj95"), ID: 2 },
    var data = [{
        Name: i18n.t("hj93"),
        ID: 0
      },
      {
        Name: i18n.t("hj94"),
        ID: 1
      },
      {
        Name: i18n.t("hj95"),
        ID: 2
      },
  ];

  return data;
@@ -1024,7 +1081,9 @@
  },

  created() {
    const { query } = this.$route;
      const {
        query
      } = this.$route;
    if (query.if_zhishu === "0") {
      this.Symbol = `${query.code}_${query.sok}.${query.type}`;
    } else if (query.code.indexOf("hk") > -1 && query.if_zhishu !== 0) {
@@ -1043,21 +1102,26 @@
    this.offHeight = this.$refs["rightContent"].offsetHeight;
    this.OnSize();
    this.SetChartStyle();
      // this.CreateMinuteChart();

      // this.CreateKLineChart();
    this.$nextTick(() => {
        // this.timerss = setInterval(() => {
      this.CreateMinuteChart();
        this.CreateKLineChart();
      this.timerss = setInterval(() => {
        this.KLineChart = null
        this.CreateMinuteChart();
        this.CreateKLineChart();
        console.log(this.KLinePeriodMenu);
        // this.KLineChart.ChangePeriod(this.KLinePeriodMenu[this.KLinePeriodIndex].ID);
        //此处为了 让k线实时刷新
        // }, 3000);
        // 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')
        // this.OnClickKLinePeriodMenu(this.KLinePeriodIndex+1, this.KLinePeriodMenu[this.KLinePeriodIndex+1], 'kline')
        // this.OnClickKLinePeriodMenu(this.KLinePeriodIndex-1, this.KLinePeriodMenu[this.KLinePeriodIndex-1], 'kline')
      }, 5000);
        //   this.OnClickKLinePeriodMenu(this.KLinePeriodIndex, this.KLinePeriodMenu[this.KLinePeriodIndex],
        //     'kline')
        // }, 3000);
    });
    let that = this;
    window.onresize = _.debounce(this.OnSize, 200);
@@ -1155,6 +1219,7 @@

      var option = DefaultData.GetKLineOption();
      option.Symbol = this.Symbol;

      option.NetworkFilter = (data, callback) => {
        this.NetworkFilter(data, callback);

@@ -1235,6 +1300,7 @@
    ) {
      EastMoney.HQData.Log("[HQChartDemo::NetworkFilter] data", data);

        this.timerss = setInterval(() => {
      switch (data.Name) {
        // 分时图数据对接
        case "MinuteChartContainer::RequestMinuteData":
@@ -1260,6 +1326,9 @@
          EastMoney.HQData.NetworkFilter(data, callback);
          break;
      }
        }, 2000);


    },

    handleSelect(key, keyPath) {
@@ -1396,6 +1465,7 @@
          border-right: none;
        }
      }

      .active {
        color: rgb(2, 99, 226);
        font-weight: 800;
@@ -1436,6 +1506,7 @@
    }
  }
}

// .schart-drawing {
//   height: 100% !important;
// }
@@ -1447,17 +1518,21 @@
  justify-content: center;
  background: #fff !important;
}

.btnGroup {
  height: 100%;

  .bt2 {
    height: 100% !important;
    box-shadow: none !important;

    img {
      width: 0.5rem; //dengwo xia
      height: 0.5rem;
    }
  }
}

.btn2 {
  width: 9.4%;
  display: flex;
@@ -1465,19 +1540,23 @@
  justify-content: center;
  align-items: center;
  border-radius: 0.15rem;

  img {
    width: 0.5rem;
    height: 0.5rem;
  }

  .active {
    color: rgb(2, 99, 226);
    font-weight: 800;
    background: rgb(245, 245, 245);
  }
}

canvas {
  height: 100% !important;
}

.hqchart {
  width: 100%;
  height: 100vh;

 src/page/kline/index.vue

@@ -486,7 +486,7 @@
    } else {
      this.timer = setInterval(() => {
        this.getSingDetails();
      }, 5000);
      }, 2000);
    }
    this.getOpation();
    // this.$Lazyload();