最新

XIGUASSR

2022-11-12 cf0d36bbe155ecdfd8bca429666405e830d0dc7a

 src/page/kline/components/kLine.vue

@@ -52,15 +52,15 @@
                      <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')"
              >
@@ -1060,20 +1060,56 @@
  created() {
    const { query } = this.$route;
    console.log(query, "33333");
    this.Symbol = `${query.code}_${query.sok}.${query.type}`;
    console.log(query.if_zhishu != "0", "44444");
    if (query.if_zhishu == "0") {
      this.Symbol = `${query.code}_${query.sok}.${query.type}`;
    } else {
      this.Symbol = `${query.if_zhishu}_${query.sok}.${query.type}`;
    }

    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 +1120,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 +1479,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;