11111

DESKTOP-CVS3R96\我恁爹

2022-11-15 a1fb6cd3c3b8a48da4f9393e09718da04f51a373

 src/page/kline/components/kLine.vue

@@ -19,7 +19,7 @@
                  <el-menu-item v-for="subItem in item.Sub" :key='subItem.Code' :index="subItem.Code">{{subItem.Name}}</el-menu-item>
              </el-submenu>
          </el-menu>
    </div>-->
    </div> -->

    <div class="right" ref="right">
      <!-- <div class="rightTab" ref="rightTab">
@@ -52,22 +52,23 @@
                      <div class="btnGroup">
                          <div class="btn" v-for="(item) in KLineIndexMenu" :key="item.ID"
                              @click="ChangeKLineIndex(item)">{{ item.Name }}</div>
                      </div>
                      </div>:class="{ active: KLinePeriodIndex == index }"
          </div>-->
          <div class="periodWrap kline_periodWrap" ref="kline_periodWrap">
            <!-- DWM 分 -->
            <div class="btnGroup" style="position:relative">
              <div
                class="btn2"
                :class="{ active: KLinePeriodIndex == index }"
                v-for="(item, index) in KLinePeriodMenu"
                :class="{ active: KLinePeriodIndex == index }"
                :key="item.ID"
                @click="index == 0 ? changeRightContent('minute') : OnClickKLinePeriodMenu(index, item, 'kline')"
              >
                <span>{{ item.Name }}</span>
              </div>
              <div class="btn2" @click="isShow ? isShow = false : isShow = true">
                <div class="btn2" :class="KLinePeriodIndex === index ? 'active' : ''">
                <div class="btn2">
                  <!-- :class="KLinePeriodIndex === index ? 'active' : ''" -->
                  <img src="../../../assets/img/options.png" alt />
                </div>
              </div>
@@ -118,7 +119,7 @@
import "hqchart/src/jscommon/umychart.resource/css/tools.css";
import "hqchart/src/jscommon/umychart.resource/font/iconfont.css";
import EastMoney from "../../../eastmoney/HQData.js";

import i18n from '@/locales/index.js'
//源码调试用
//import Chart from '../jscommon/umychart.vue/umychart.vue.js'
//import '../jscommon/umychart.resource/css/tools.css'
@@ -127,7 +128,6 @@
HQChart.Chart.MARKET_SUFFIX_NAME.GetMarketStatus = function(symbol) {
  return 2;
}; //一直交易

function DefaultData() {}

DefaultData.GetMinuteOption = function() {
@@ -1009,13 +1009,13 @@

DefaultData.GetKLinePeriodMenu = function() {
  var data = [
    { Name: "分时", ID: 3 },
    { Name: "天", ID: 0 },
    { Name: "周", ID: 1 },
    { Name: "月", ID: 2 },
    { Name: "1分", ID: 4 },
    { Name: "5分", ID: 5 },
    { Name: "30分", ID: 7 }
    { Name: i18n.t('hj86'), ID: 3 },
    { 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;
@@ -1023,15 +1023,21 @@

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

  return data;
};

export default {
  props:{
    hktype:{
      type:String,
      default:''
    }
  },
  data() {
    return {
      MinuteDayMenu: DefaultData.GetMinuteDayMenu(),
@@ -1059,21 +1065,58 @@
  },
  created() {
    const { query } = this.$route;
    console.log(query, "33333");
    this.Symbol = `${query.code}_${query.sok}.${query.type}`;
    if (query.if_zhishu == "0") {
      this.Symbol = `${query.code}_${query.sok}.${query.type}`;
    } else if((query.code.indexOf('hk') > -1) && query.if_zhishu != 0){
      this.Symbol = `${query.if_zhishu}_${query.sok}.hk`;
    } else {
      this.Symbol = `${query.if_zhishu}_${query.sok}.${query.type}`;
    }
    // this.Symbol = 'BRK_A106.usa'

    console.log(this.Symbol);
  },

  
  mounted() {
    console.log(this.NavMenuAry, "333333333");
    this.offHeight = this.$refs["rightContent"].offsetHeight;
    this.OnSize();
    this.SetChartStyle();
    this.$nextTick(() => {
      this.CreateMinuteChart();
      this.CreateKLineChart();
    });

    let that = this;
    window.onresize = _.debounce(this.OnSize, 200);
    // 自适应K线图
    var elementResizeDetectorMaker = require("element-resize-detector");

    // 创建实例，无参数
    var erd = elementResizeDetectorMaker(); //使用默认选项（将使用基于对象的方法）。

    // 创建实例带参数
    // 使用基于超快速滚动的方法。
    // 这是推荐的策略。
    var erdUltraFast = elementResizeDetectorMaker({
      strategy: "scroll",
      callOnAdd: true, //callOnAdd选项，用于确定在添加侦听器时是否应调用它们。默认为true。
      //如果为true，则确保在添加侦听器后将对其进行调用。如果为false，则在添加侦听器时将不保证其
      //被调用（不会阻止其被调用）
      debug: true
    });
    //监听class为staticNextMain的元素 大小变化
    var self = this;
    //侦听元素的调整大小事件，并使用元素作为调整大小事件的参数来调用侦听器函数。传递给函数的选项将
    //覆盖实例选项
    erd.listenTo(this.$refs["rightContent"], function(
      element
    ) {
      var width = element.offsetWidth;
      var height = element.offsetHeight;
      self.tableHeight = height - 100; //将监听到的宽高进行赋值
      self.tableWidth = width - 20;
      that.offHeight = height;
      that.OnSize();
    });
  },

  methods: {
@@ -1084,18 +1127,14 @@
      var indexWrap = this.$refs.minute_indexWrap;
      var statementWrap = this.$refs.minute_statementWrap;
      // var chartHeight = window.innerHeight - rightTab.offsetHeight - periodWrap.offsetHeight - indexWrap.offsetHeight;
      var chartHeight = 280;
      var chartHeight = this.offHeight;

      var kline = this.$refs.kline;
      kline.style.width = width + "px";
      kline.style.height = chartHeight + "px";
      console.log(width, chartHeight, '333333333333333333333');

      var chartHeight = 280;
      var kline2 = this.$refs.kline2;
      kline2.style.width = width + "px";
      kline2.style.height = chartHeight + "px";
      

      if (this.Chart) this.Chart.OnSize();
      if (this.KLineChart) this.KLineChart.OnSize();
@@ -1447,6 +1486,11 @@
    width: 0.5rem;
    height: 0.5rem;
  }
        .active {
        color: rgb(2, 99, 226);
        font-weight: 800;
        background: rgb(245, 245, 245);
      }
}
canvas {
  height: 100% !important;