Merge branch 'zcZhang' into zcZhang_test

JCCDex · Oct 31, 2019 · ac2ca3f · ac2ca3f
2 parents dfb12fe + 046c24b
commit ac2ca3f
Show file tree

Hide file tree

Showing 12 changed files with 90 additions and 68 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "jcc_kline",
-  "version": "0.2.6",
+  "version": "0.2.7",
   "description": "jccdex kline",
   "main": "index.js",
   "scripts": {

diff --git a/src/components/IndicatorChart.vue b/src/components/IndicatorChart.vue
@@ -74,6 +74,7 @@
       class="close-icon"
     ></i>
     <div
+      id="Indicator"
       ref="Indicator"
       :style="{height: `${IndicatorSize.height}`, width: `${IndicatorSize.width}`}"
       @mousemove="getToolTipIndex()"

diff --git a/src/components/klineChart.vue b/src/components/klineChart.vue
@@ -72,8 +72,6 @@
           @click="chooseCycle('everyhour')"
           :class="this.cycle === 'everyhour' ? 'kline-cycle-btn kline-btn-active' : 'kline-cycle-btn'"
         >{{message.timeSharing}}</div>
-        <!-- 均线显示隐藏按钮-->
-        <!-- <div @click="showMA" class="kline-cycle-btn">均线</div> -->
       </div>
       <!-- tooltip数据显示 -->
       <div
@@ -92,7 +90,7 @@
           <font class="tooltip-data-name">{{message.volume}}{{this.toolTipData.volume}}</font>
           <br />
         </div>
-        <div v-if="outspreadMA && this.showIndicatorMA">
+        <div v-if="outspreadMA && this.outspreadMA">
           <font
             v-for="MAitem in this.klineConfig.MA"
             :key="MAitem.id"
@@ -555,7 +553,7 @@ export default {
         this.coinType = this.klineDataObj.coinType;
       }
       this.changeCycleLanguage(this.cycle);
-      this.changeChartDataObj(this.klineDataObj, this.showIndicatorMA);
+      this.changeChartDataObj(this.klineDataObj, this.outspreadMA);
     },
     fullscreen() {
       if (this.fullscreen && getLanguage().language === "en") {
@@ -571,10 +569,7 @@ export default {
     }
   },
   methods: {
-    showMA() {
-      this.showIndicatorMA = !this.showIndicatorMA;
-      this.changeChartDataObj(this.klineDataObj, this.showIndicatorMA);
-    },
+    showMA() {},
     clickMinCycle() {
       this.showMinCycle = !this.showMinCycle;
       if (this.showMinCycle) {
@@ -658,17 +653,15 @@ export default {
       let cycle = data.cycle;
       if (data.klineData) {
         candleData = splitData(data.klineData);
-        if (MA) {
-          for (var i = 0; i < this.klineConfig.MA.length; i++) {
-            MAData[i] = {};
-            MAData[i].name = this.klineConfig.MA[i].name;
-            MAData[i].data = calculateMA(
-              this.klineConfig.MA[i].name.substring(2) * 1,
-              candleData
-            );
-          }
+        for (var i = 0; i < this.klineConfig.MA.length; i++) {
+          MAData[i] = {};
+          MAData[i].name = this.klineConfig.MA[i].name;
+          MAData[i].data = calculateMA(
+            this.klineConfig.MA[i].name.substring(2) * 1,
+            candleData
+          );
         }
-        candleData.showIndicatorMA = this.showIndicatorMA;
+        candleData.showIndicatorMA = this.outspreadMA;
         candleData.MAData = MAData;
         candleData.precision = precision;
       }
@@ -695,11 +688,8 @@ export default {
       };
     },
     showMAData() {
-      if (!this.outspreadMA) {
-        this.outspreadMA = true;
-      } else {
-        this.outspreadMA = false;
-      }
+      this.outspreadMA = !this.outspreadMA;
+      this.changeChartDataObj(this.klineDataObj, this.outspreadMA);
     },
     showIndicatorChart(indicator) {
       if (indicator === this.showIndicator) {
@@ -711,7 +701,7 @@ export default {
       }
       this.showIndicatorOpt = false;
       this.resize();
-      this.changeChartDataObj(this.klineDataObj, this.showIndicatorMA);
+      this.changeChartDataObj(this.klineDataObj, this.outspreadMA);
     },
     // 获取当前鼠标所在点的数据
     getTipDataIndex(index) {

diff --git a/src/components/mobileChart.vue b/src/components/mobileChart.vue
@@ -16,8 +16,6 @@
         <font class="mobile-tooltip-name">{{message.volumeMobile}}</font>
         <font class="mobile-tooltip-data">{{this.toolTipData.volume}}</font>
       </div>
-      <!-- 均线显示隐藏按钮-->
-      <!-- <div @click="showMA" class="mobile-ma-btn">均线</div> -->
       <div v-show="showIndicatorMA" style="font-size:0.16rem; margin-top: 0.1rem;">
         <font
           v-for="MAitem in this.klineConfig.MA"
@@ -69,6 +67,7 @@
       v-on:listenToChildEvent="changeCycle"
       v-on:listenTipIndex="getTipDataIndex"
       v-on:listenIndicatorChartOpenClose="getIndicatorOpenClose"
+      @listenShowMA="showMA"
       :kline-config="klineConfig"
       :chart-data-obj="chartDataObj"
     ></KLine>
@@ -224,15 +223,13 @@ export default {
       };
       if (chartData.cycle !== "everyhour" && chartData.klineData) {
         candleData = splitData(chartData.klineData);
-        if (MA) {
-          for (var i = 0; i < this.klineConfig.MA.length; i++) {
-            MAData[i] = {};
-            MAData[i].name = this.klineConfig.MA[i].name;
-            MAData[i].data = calculateMA(
-              this.klineConfig.MA[i].name.substring(2) * 1,
-              candleData
-            );
-          }
+        for (var i = 0; i < this.klineConfig.MA.length; i++) {
+          MAData[i] = {};
+          MAData[i].name = this.klineConfig.MA[i].name;
+          MAData[i].data = calculateMA(
+            this.klineConfig.MA[i].name.substring(2) * 1,
+            candleData
+          );
         }
         candleData.MAData = MAData;
         candleData.showIndicatorMA = this.showIndicatorMA;

diff --git a/src/components/mobileKline.vue b/src/components/mobileKline.vue
@@ -86,6 +86,10 @@
         <div class="indicator-font">
           <font>{{message.indicator}}</font>
         </div>
+        <div
+          @click="showMA"
+          :class="this.showIndicatorMA ? 'mobile-indicator-div-active' : 'mobile-indicator-div'"
+        >{{message.MA}}</div>
         <div
           @click="showIndicatorChart('MACD')"
           :class="this.showIndicator ==='MACD' ? 'mobile-indicator-div-active' : 'mobile-indicator-div'"
@@ -216,7 +220,8 @@ export default {
       showIndicatorDiv: false,
       showIndicator: "",
       watchLoading: true,
-      loadingTime: 0
+      loadingTime: 0,
+      showIndicatorMA: true //是否展示MA均线
     };
   },
   props: {
@@ -430,6 +435,12 @@ export default {
       this.showMinCycle = false;
       this.showIndicatorDiv = !this.showIndicatorDiv;
     },
+    // 点击显示、隐藏MA事件
+    showMA() {
+      this.showIndicatorMA = !this.showIndicatorMA;
+      this.$emit("listenShowMA", this.showIndicatorMA);
+      this.showIndicatorDiv = false;
+    },
     showIndicatorChart(indicator) {
       let dataZoom = this.kline.getMobileKlineDataZoom();
       let indicatorData = {

diff --git a/src/components/volumeChart.vue b/src/components/volumeChart.vue
@@ -1,5 +1,6 @@
 <template>
   <div
+    id="volume"
     ref="volume"
     :style="{height: `${volumeSize.height}`, width: `${volumeSize.width}`}"
     @mousemove="getToolTipIndex()"

diff --git a/src/css/common.css b/src/css/common.css
@@ -1,3 +1,19 @@
+#kline>div>canvas:active {
+    cursor: pointer;
+}
+
+#Indicator>div>canvas:active {
+    cursor: pointer;
+}
+
+#timeSharing>div>canvas:active {
+    cursor: pointer;
+}
+
+#volume>div>canvas:active {
+    cursor: pointer;
+}
+
 .kline-cycle {
     position: absolute;
     left: 10px;

diff --git a/src/i18n/en-GB.json b/src/i18n/en-GB.json
@@ -36,6 +36,7 @@
   "buy": "Buy",
   "sell": "Sell",
   "indicator": "Indicator",
+  "MA": "MA",
   "MACD": "MACD",
   "Volume": "Volume",
   "KDJ": "KDJ",

diff --git a/src/i18n/zh-CN.json b/src/i18n/zh-CN.json
@@ -36,8 +36,9 @@
   "buy": "买入",
   "sell": "卖出",
   "indicator": "指标",
-  "MACD": "MACD",
   "Volume": "成交量",
+  "MA": "MA",
+  "MACD": "MACD",
   "KDJ": "KDJ",
   "RSI": "RSI",
   "OBV": "OBV",

diff --git a/src/js/KLineMobileSetChart.js b/src/js/KLineMobileSetChart.js
@@ -222,21 +222,23 @@ class KLineMobileSetChartController {
                 }
             }
         ];
-        for (var i = 0; i < data.MAData.length; i++) {
-            s[i + 1] = {
-                name: data.MAData[i].name,
-                data: data.MAData[i].data,
-                type: 'line',
-                smooth: true,
-                showSymbol: false,
-                lineStyle: {
-                    normal: {
-                        color: config.MA[i].color,
-                        opacity: 1,
-                        width: 1
+        if (data.showIndicatorMA) {
+            for (var i = 0; i < data.MAData.length; i++) {
+                s[i + 1] = {
+                    name: data.MAData[i].name,
+                    data: data.MAData[i].data,
+                    type: 'line',
+                    smooth: true,
+                    showSymbol: false,
+                    lineStyle: {
+                        normal: {
+                            color: config.MA[i].color,
+                            opacity: 1,
+                            width: 1
+                        }
                     }
-                }
-            };
+                };
+            }
         }
         return s;
     }

diff --git a/src/js/KLineSetChart.js b/src/js/KLineSetChart.js
@@ -207,22 +207,24 @@ class KLineSetChartController {
                 }
             }
         }];
-        for (var i = 0; i < data.MAData.length; i++) {
-            s[i + 1] = {
-                name: data.MAData[i].name,
-                data: data.MAData[i].data,
-                type: 'line',
-                symbol: 'none', // 
-                smooth: true, //  是否平滑显示 
-                showSymbol: false, // 是否显示 symbol, 如果 false 则只有在 tooltip hover 的时候显示。
-                lineStyle: { // 线的样式
-                    normal: {
-                        color: config.MA[i].color,  // 颜色
-                        opacity: 1, // 图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形
-                        width: 1 // 线宽
+        if (data.showIndicatorMA) {
+            for (var i = 0; i < data.MAData.length; i++) {
+                s[i + 1] = {
+                    name: data.MAData[i].name,
+                    data: data.MAData[i].data,
+                    type: 'line',
+                    symbol: 'none', // 
+                    smooth: true, //  是否平滑显示 
+                    showSymbol: false, // 是否显示 symbol, 如果 false 则只有在 tooltip hover 的时候显示。
+                    lineStyle: { // 线的样式
+                        normal: {
+                            color: config.MA[i].color,  // 颜色
+                            opacity: 1, // 图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形
+                            width: 1 // 线宽
+                        }
                     }
-                }
-            };
+                };
+            }
         }
         return s;
     }