1

PC-20250623MANY\Administrator

2025-08-23 7c4de2cb1422f6f4748928df5bbcc802d85dd820

 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: {
@@ -66,7 +77,7 @@
      pageNum: 1,
      pageSize: 10,
      total: 1,
      stockList: []
      stockList: [],
    };
  },
  props: {
@@ -103,6 +114,7 @@
  },
  mounted() {
    this.getStockList();
    this.initWebSocket();
  },
  methods: {
    // 获取数据
@@ -151,6 +163,32 @@
      } else {
        Toast.fail(data.msg);
      }
    },
    // 连接ws实时监控变动
    initWebSocket() {
      console.log("initWebSocket");
      this.Trade = new WhrWebSocket({
        path: `wss://ws.acapl.net/websocket-server `,
        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 +241,14 @@
      }
    }

    .up {
      color: @dark_green;
    }

    .down {
      color: @red;
    }

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