From facd3463f9b965df159cd45781bc99452ae2b9f9 Mon Sep 17 00:00:00 2001
From: 李凌 <344137771@qq.com>
Date: Mon, 15 Sep 2025 17:59:49 +0800
Subject: [PATCH] 1

---
 src/views/cryptos/Trade/index.vue |   46 ++++++++++++++++++++++++++++++++++++++--------
 1 files changed, 38 insertions(+), 8 deletions(-)

diff --git a/src/views/cryptos/Trade/index.vue b/src/views/cryptos/Trade/index.vue
index 8d97938..86f45e2 100644
--- a/src/views/cryptos/Trade/index.vue
+++ b/src/views/cryptos/Trade/index.vue
@@ -15,6 +15,12 @@
       <trade-head :isReturn="true" :backFunc="() => $router.push('/')" :symbolName="symbolName" :symbol="symbol"
         :price="price" :range="range" :isTrade="true" @update-coin="onUpdate" @data="quote = $event" />
 
+      <!-- k line-->
+      <div class="mt-35 h-482-px">
+        <kline-charts :update-key="updateKey" :update-data="quote" :isChangeLine="isChangeLine" :symbol="symbol"
+          v-if="symbol" @updataLine="isChangeLine = false" :isNight="isNight" :isChange="isChange" />
+      </div>
+
       <div class="trade-buy-sell flex justify-between px-30 py-30">
         <trade-order-area :symbol="symbol" :symbolName="symbolName" :init-open="initOpen" :init-close="initClose"
           :price="price" @ordered="onOrdered" />
@@ -63,8 +69,8 @@
           @cancelOrder="cancelOrder" />
       </div>
       <div class="py-20 px-20" v-else-if="tabType == '2'">
-        <history-item unit="USDT" v-for="item in entrustList" :key="item.order_no" :coinPrice="coinPrice" :entrust="item"
-          :state="item.state" @cancelOrder="cancelOrder" />
+        <history-item unit="USDT" v-for="item in entrustList" :key="item.order_no" :coinPrice="coinPrice"
+          :entrust="item" :state="item.state" @cancelOrder="cancelOrder" />
       </div>
       <div class="py-20 px-20" v-else>
         <div class="mb-20">
@@ -126,7 +132,7 @@
         <k-line-charts :update-key="updateKey" :update-data="quote" :symbol="symbol" v-if="symbol && showCharts"
           :showBottom="false" />
       </div> -->
-      
+
       <!-- <div class="fixed-box">
         <div class="flex justify-between items-center px-30 py-20" @click.stop="handleClickShowKlineChart()">
           <span class="font-30  textColor2">{{ symbol.toUpperCase() }}&nbsp;&nbsp;{{ $t('k线图表') }}</span>
@@ -221,7 +227,7 @@
       futrueHistroy: [], // 交割历史
       socket: null, // 行情
       sockets: {
-        quotes: null, // 行情
+        quote: null, // 行情
         deep: null /// 深度
       },
       curTab: '', // 当前委托还是持有仓位
@@ -268,7 +274,10 @@
       symbolName: '',
       updateKey: 1,
       currency: {},
-      timer3: null
+      timer3: null,
+      isChangeLine: false,
+      isNight: true,
+      isChange: true, //是否有切换黑夜白天模式
     }
   },
   async created() {
@@ -319,7 +328,27 @@
       _getHomeList(val).then((res) => {
         this.symbolName = res[0].name
         this.coinPrice = res[0].close
+
+        // 获取k线数据
+        this.quote = res[0]
+        this.symbolData = res[0].symbol_data
+        this.$nextTick(() => {
+          if (!this.sockets.quote && this.symbol) {
+            this.startQuoteScoket()
+          }
+        })
       })
+    },
+    startQuoteScoket() {
+      this.sockets.quote = new WebSocket(`${WS_URL}/1/${this.symbol}`)
+      this.sockets.quote.onmessage = (evt) => {
+        const { data } = evt
+        const { code, data: _data } = JSON.parse(data)
+        if (code / 1 === 0) {
+          this.quote = _data[0]
+          this.updateKey++
+        }
+      }
     },
     tabClick(type) {
       this.tabType = type;
@@ -403,7 +432,7 @@
     init(symbol) { // 初始化页面
       this.symbol = symbol
       if (!this.socket) {
-        this.startQuoteSocket()
+        // this.startQuoteSocket()
       }
       this.initParam(symbol) // 'open'
       this.clearTimer()
@@ -542,6 +571,7 @@
 @import "@/assets/init.scss";
 
 #cryptos {
+
   // background-color: $mainbgWhiteColor;
   :v-deep(.px-4) {
     padding-left: 30px !important;
@@ -553,11 +583,11 @@
     padding-bottom: 30px !important;
   }
 
-  .diviLine{
+  .diviLine {
     background: $main2_background;
   }
 
-  .border-b-color{
+  .border-b-color {
     border-bottom-color: $inp_b;
     padding-bottom: 5px;
   }

--
Gitblit v1.9.3