From 90d901daf17ba0644eb5c3096450262cfd76ef58 Mon Sep 17 00:00:00 2001
From: dcc <dcc@163.com>
Date: Thu, 27 Jun 2024 18:28:50 +0800
Subject: [PATCH] 123

---
 src/page/list/tradingList/data.list.vue |  170 ++++++++++++++++++++++++++++++++------------------------
 1 files changed, 96 insertions(+), 74 deletions(-)

diff --git a/src/page/list/tradingList/data.list.vue b/src/page/list/tradingList/data.list.vue
index da4ef60..cb6df2d 100644
--- a/src/page/list/tradingList/data.list.vue
+++ b/src/page/list/tradingList/data.list.vue
@@ -24,81 +24,62 @@
         </van-col>
       </van-row>
     </div>
-
-    <van-list
-      style="margin-bottom: 50px"
-      v-model="loadings"
-      :finished="finished"
-      :finished-text="$t('hj43')"
-      :loading-text="$t('hj430')"
-      @load="onLoads"
-      :immediate-check="false"
-    >
-      <div
-        class="item"
-        @click="handleGoToKlineDetail1(item, index)"
-        v-for="(item, index) in listArr"
-        :key="item.indexCode"
-      >
-        <van-row type="flex" align="center" gutter="20">
-          <van-col span="8">
-            <div>
-              <div class="tp">
-                <div class="collection" @click="optionszx(item)">
-                  <div
-                    class="shu"
-                    :class="item.isOption == '1' ? 'shublue' : ''"
-                  ></div>
-                </div>
-                <div
-                  class="title_color"
-                  style="
+    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
+      <van-list style="margin-bottom: 50px" v-model="loadings" :finished="finished" :finished-text="$t('hj43')"
+        :loading-text="$t('hj430')" @load="onLoads" :immediate-check="false">
+        <div class="item" @click="handleGoToKlineDetail1(item, index)" v-for="(item, index) in listArr"
+          :key="item.indexCode">
+          <van-row type="flex" align="center" gutter="20">
+            <van-col span="8">
+              <div>
+                <div class="tp">
+                  <div class="collection" @click="optionszx(item)">
+                    <div class="shu" :class="item.isOption == '1' ? 'shublue' : ''"></div>
+                  </div>
+                  <div class="title_color" style="
                     width: 100%;
                     overflow: hidden;
                     text-overflow: ellipsis;
                     white-space: nowrap;
-                  "
-                >
-                  {{ item.name }}
+                  ">
+                    {{ item.name }}
+                  </div>
+                </div>
+                <div class="bt">
+                  <span>{{ item.spell }}</span>
                 </div>
               </div>
-              <div class="bt">
-                <span>{{ item.spell }}</span>
-              </div>
-            </div>
-          </van-col>
+            </van-col>
 
-          <van-col span="3">
-            <div style="text-align: right">
-              {{ item.gid }}
-            </div>
-          </van-col>
+            <van-col span="3">
+              <div style="text-align: right">
+                {{ item.gid }}
+              </div>
+            </van-col>
 
-          <van-col span="7">
-            <div style="text-align: right">
-              <div class="tp">
-                <span class="price_color">
-                  {{ item.nowPrice | _toLocaleString(false) }}
-                </span>
+            <van-col span="7">
+              <div style="text-align: right">
+                <div class="tp">
+                  <span class="price_color">
+                    {{ item.nowPrice | _toLocaleString(false) }}
+                  </span>
+                </div>
+                <div class="bt">
+                  <span>{{ item.addTime }}</span>
+                </div>
               </div>
-              <div class="bt">
-                <span>{{ item.addTime }}</span>
+            </van-col>
+            <van-col span="6">
+              <div style="text-align: right">
+                <div class="tp right_bs" :class="`${item.color > 0 ? 'green' : 'red'}`">
+                  <span class="price_color">{{ item.hcrateP }}</span>
+                </div>
               </div>
-            </div>
-          </van-col>
-          <van-col span="6">
-            <div style="text-align: right">
-              <div
-                class="tp right_bs"
-                :class="`${item.color > 0 ? 'green' : 'red'}`"
-              >
-                <span class="price_color">{{ item.hcrateP }}</span>
-              </div>
-            </div>
-          </van-col>
-        </van-row>
-      </div>
-    </van-list>
+            </van-col>
+          </van-row>
+        </div>
+      </van-list>
+    </van-pull-refresh>
 
     <dazy ref="dazy" />
   </div>
@@ -108,6 +89,7 @@
 import * as api from "@/axios/api";
 import handleDt from "@/utils/deTh";
 import dazy from "./dazy.vue";
+import { WhrWebSocket } from "@/utils/WhrWebSocket";
 
 export default {
   components: { dazy },
@@ -163,7 +145,8 @@
       listArr: [],
       pageNumVal: 1,
       getInterval: null,
-      num: 1
+      num: 1,
+      refreshing: false
     };
   },
 
@@ -171,9 +154,10 @@
     this.listArr = [];
     this.pageNumVal = 1;
     this.getStock(this.active, this.zxactive, 1);
-    this.getInterval = setInterval(() => {
-      this.getStock(this.active, this.zxactive, 1);
-    }, 5000);
+    this.initWebSocket()
+    // this.getInterval = setInterval(() => {
+    //   this.getStock(this.active, this.zxactive, 1);
+    // }, 5000);
   },
   methods: {
     filterSH(val) {
@@ -232,7 +216,7 @@
       let pageNumVal = c || this.pageNumVal;
       let opt = {
         pageNum: pageNumVal,
-        pageSize: 20*this.num,
+        pageSize: 20 * this.num,
         stockPlate: "",
         keyWords: this.sousuo,
         stockType: stockType,
@@ -258,7 +242,7 @@
               this.listArr = data.data.list;
               this.loadings = false;
               // this.finished = true;
-              if(this.listArr.length % 20 ){
+              if (this.listArr.length % 20) {
                 this.finished = true;
               }
             }
@@ -267,7 +251,7 @@
               this.listArr = data.data.list;
               this.loadings = false;
               // this.finished = true;
-              if(this.listArr.length % 20 ){
+              if (this.listArr.length % 20) {
                 this.finished = true;
               }
             }
@@ -277,14 +261,48 @@
         this.finished = true;
       }
     }, 500),
+
+    onRefresh() {
+      // 清空列表数据
+      this.finished = false;
+
+      // 重新加载数据
+      // 将 loading 设置为 true,表示处于加载状态
+      this.loading = true;
+      if (this.refreshing) {
+        // this.listArr = [];
+        this.refreshing = false;
+      }
+      this.getStock();
+    },
+
+    initWebSocket() {
+      this.Trade = new WhrWebSocket({
+        path: `ws://ws.is4vc.com:8001/websocket-server`,
+        onmessage: this.getTradeMessage,
+      });
+
+      this.Trade.init();
+    },
+    getTradeMessage({ data }) {
+      let result = JSON.parse(data)
+      let pid = result.pid
+      let userToUpdate = this.listArr.find(item => item.code == pid)
+      if (userToUpdate) {
+        // 更新对象数据
+        userToUpdate.nowPrice = result.last;
+        userToUpdate.hcrateP = result.pcp;
+      }
+    },
+
     onLoads() {
       console.log('onLoads');
       // this.pageNumVal++;
       this.loadings = true;
-      this.num+=1
+      this.num += 1
       this.getStock();
     },
-    optionszx() {},
+    optionszx() { },
   },
   destroyed() {
     clearInterval(this.getInterval);
@@ -312,6 +330,7 @@
   // display: flex;
   // justify-content: space-between;
   border-bottom: 1px solid #f0f2f3;
+
   .right_bs {
     text-align: center;
     border-radius: 0.05333rem;
@@ -331,10 +350,12 @@
   .green {
     background-color: rgb(3, 173, 143);
   }
+
   .red {
     background-color: rgb(208, 75, 100);
   }
 }
+
 .center_price {
   font-style: normal;
   font-weight: 500;
@@ -346,6 +367,7 @@
   flex: 1;
   margin-right: 20px;
 }
+
 .title_color {
   font-style: normal;
   font-weight: 500;

--
Gitblit v1.9.3