From cf0d36bbe155ecdfd8bca429666405e830d0dc7a Mon Sep 17 00:00:00 2001
From: XIGUASSR <623844246@qq.com>
Date: Sat, 12 Nov 2022 04:22:49 +0800
Subject: [PATCH] 最新
---
src/page/kline/components/kLine.vue | 57 ++++++++++++++++++++++++++++++++++++++++++++-------------
1 files changed, 44 insertions(+), 13 deletions(-)
diff --git a/src/page/kline/components/kLine.vue b/src/page/kline/components/kLine.vue
index 25824cb..9a121ab 100644
--- a/src/page/kline/components/kLine.vue
+++ b/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,26 +1060,56 @@
created() {
const { query } = this.$route;
console.log(query, "33333");
- console.log(query.if_zhishu!= '0', "44444");
- if(query.if_zhishu== '0'){
+ console.log(query.if_zhishu != "0", "44444");
+ if (query.if_zhishu == "0") {
this.Symbol = `${query.code}_${query.sok}.${query.type}`;
- }else{
+ } 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: {
@@ -1090,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();
@@ -1453,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;
--
Gitblit v1.9.3