1

PC-20250623MANY\Administrator

2025-09-30 9ddad348a549154e7b328f9d7dd9517d2abd330c

 src/components/stock-list.vue

@@ -20,11 +20,21 @@
        <div class="i_name">{{ item.name }}</div>
      </van-col>
      <van-col span="4" class="flex-start item_n">{{ item.nowPrice }}</van-col>

      <van-col span="8" class="item_n">
        <div class="flex-end" style="margin-bottom: .15em;">
        <div
          class="flex-end"
          style="margin-bottom: .15em;"
          :class="{ red: item.hcrate < 0, green: item.hcrate > 0 }"
        >
          {{ item.hcrate }}
        </div>
        <div class="flex-end">{{ item.hcrateP }}</div>
        <div
          class="flex-end"
          :class="{ red: item.hcrate < 0, green: item.hcrate > 0 }"
        >
          {{ item.hcrateP }}
        </div>
      </van-col>

      <div
@@ -56,6 +66,7 @@
import nPagination from "@/components/nPagination.vue";
import * as api from "@/axios/api";
import { Toast } from "vant";
import { WhrWebSocket } from "@/utils/WhrWebSocket";
export default {
  name: "stock_list",
  components: {
@@ -90,9 +101,16 @@
  watch: {
    propOption: {
      handler(val) {
        // 根据当前股票类型连接对应的ws
        if (val.stockType == "US")
          this.initWebSocket("wss://usws.yanshiz.com/websocket-server");
        else this.initWebSocket("wss://ws.acapl.net/websocket-server");

        this.pageNum = 1;
        this.getStockList();
      }
      },
      deep: true,
      immediate: true
    },
    pageNum: {
      handler(val) {
@@ -103,6 +121,7 @@
  },
  mounted() {
    this.getStockList();
    // this.initWebSocket();
  },
  methods: {
    // 获取数据
@@ -151,6 +170,35 @@
      } else {
        Toast.fail(data.msg);
      }
    },
    // 连接ws实时监控变动
    initWebSocket(url) {
      console.log("initWebSocket");
      if (this.Trade) {
        this.Trade.close();
      }
      this.Trade = new WhrWebSocket({
        path: url,
        onmessage: this.getTradeMessage
      });

      this.Trade.init();
    },
    getTradeMessage({ data }) {
      let result = JSON.parse(data);
      let pid = result.pid;
      let userToUpdate = this.stockList.find(item => item.code == pid);
      if (userToUpdate) {
        // 更新对象数据
        userToUpdate.nowPrice = result.last;
        userToUpdate.hcrateP = result.pcp;
      }
    }
  },
  beforeDestroy() {
    if (this.Trade) {
      this.Trade.close();
      console.log("WebSocket disconnected");
    }
  }
};
@@ -203,6 +251,14 @@
      }
    }

    .up {
      color: @dark_green;
    }

    .down {
      color: @red;
    }

    .edit {
      width: 100%;
      height: 100%;