admin
2026-02-06 8402f0794434bac13c0de02d47fb5c28d6e2639c
src/components/stock-list.vue
@@ -6,7 +6,12 @@
      <van-col span="8" class="flex-end head_item">{{ $t("Change") }}</van-col>
    </van-row>
    <van-row class="markets_item" v-for="item in stockList" :key="item.id" @click="toDetails(item)">
    <van-row
      class="markets_item"
      v-for="item in stockList"
      :key="item.id"
      @click="toDetails(item)"
    >
      <van-col span="12" class="item_n">
        <div class="flex-start">
          <span class="i_icon">{{ item.stock_type }}</span>
@@ -17,25 +22,43 @@
      <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;" :class="{ red: item.hcrate < 0, green: item.hcrate > 0 }">
        <div
          class="flex-end"
          style="margin-bottom: .15em;"
          :class="{ red: item.hcrate < 0, green: item.hcrate > 0 }"
        >
          {{ item.hcrate }}
        </div>
        <div class="flex-end" :class="{ red: item.hcrate < 0, green: item.hcrate > 0 }">
        <div
          class="flex-end"
          :class="{ red: item.hcrate < 0, green: item.hcrate > 0 }"
        >
          {{ item.hcrateP }}
        </div>
      </van-col>
      <div class="edit flex-end" v-show="editorShow" @click.stop="deleteStock(item)">
      <div
        class="edit flex-end"
        v-show="editorShow"
        @click.stop="deleteStock(item)"
      >
        <span>{{ $t("移除") }}</span>
      </div>
    </van-row>
    <!-- 无数据时显示 -->
    <div class="no_data flex-center" v-show="!stockList || stockList.length == 0">
    <div
      class="no_data flex-center"
      v-show="!stockList || stockList.length == 0"
    >
      <img src="@/assets/img/zhaobudao2.png" alt="" />
    </div>
    <n-pagination :pageNo.sync="pageNum" :pageSize="pageSize" :total="total"></n-pagination>
    <n-pagination
      :pageNo.sync="pageNum"
      :pageSize="pageSize"
      :total="total"
    ></n-pagination>
  </div>
</template>
@@ -54,7 +77,8 @@
      pageNum: 1,
      pageSize: 10,
      total: 1,
      stockList: []
      stockList: [],
      premarketTimer: null // 盘前数据轮询定时器
    };
  },
  props: {
@@ -78,9 +102,16 @@
  watch: {
    propOption: {
      handler(val) {
        // 根据当前股票类型连接对应的ws
        if (val.stockType == "US")
          this.initWebSocket("wss://ws.fidelitys.cfd/websocket-server");
        else this.initWebSocket("wss://ws.jafco1.cc/websocket-server");
        this.pageNum = 1;
        this.getStockList();
      }
      },
      deep: true,
      immediate: true
    },
    pageNum: {
      handler(val) {
@@ -91,7 +122,9 @@
  },
  mounted() {
    this.getStockList();
    this.initWebSocket();
    // this.initWebSocket();
    this.getPremarketStock();
    this.startPremarketPolling();
  },
  methods: {
    // 获取数据
@@ -110,6 +143,51 @@
      let data = await this.listApi(opt);
      this.stockList = data.data.list;
      this.total = data.data.total || 1;
      // 列表更新后,重新应用盘前数据(如果轮询已启动)
      if (this.premarketTimer) {
        this.getPremarketStock();
      }
    },
    // 获取后台设置的盘前数据
    async getPremarketStock() {
      try {
        let data = await api.getPremarketStock({});
        if (data.status === 0) {
          let list = data.data || [];
          // 通过code匹配,更新stockList中的nowPrice
          list.forEach((premarketItem) => {
            const stockItem = this.stockList.find(
              (item) => item.code === premarketItem.code
            );
            if (stockItem && premarketItem.price) {
              // 更新价格
              stockItem.nowPrice = premarketItem.price;
              stockItem.hcrate = premarketItem.hcrate;
              stockItem.hcrateP = premarketItem.hcrateP;
              // 标记该价格已被盘前数据更新,防止WebSocket覆盖
              this.$set(stockItem, 'isPremarketUpdated', true);
            }
          });
        }
      } catch (error) {
        console.error('获取盘前数据失败:', error);
      }
    },
    // 启动盘前数据轮询
    startPremarketPolling() {
      // 清除已有定时器
      this.stopPremarketPolling();
      // 每3秒轮询一次(可根据需要调整间隔)
      this.premarketTimer = setInterval(() => {
        this.getPremarketStock();
      }, 3000);
    },
    // 停止盘前数据轮询
    stopPremarketPolling() {
      if (this.premarketTimer) {
        clearInterval(this.premarketTimer);
        this.premarketTimer = null;
      }
    },
    // 点击进入详情
    toDetails(item) {
@@ -142,11 +220,14 @@
      }
    },
    // 连接ws实时监控变动
    initWebSocket() {
    initWebSocket(url) {
      console.log("initWebSocket");
      if (this.Trade) {
        this.Trade.close();
      }
      this.Trade = new WhrWebSocket({
        path: `wss://ws.kuspitai.com/websocket-server `,
        onmessage: this.getTradeMessage,
        path: url,
        onmessage: this.getTradeMessage
      });
      this.Trade.init();
@@ -154,20 +235,27 @@
    getTradeMessage({ data }) {
      let result = JSON.parse(data);
      let pid = result.pid;
      let userToUpdate = this.stockList.find((item) => item.code == pid);
      let userToUpdate = this.stockList.find(item => item.code == pid);
      if (userToUpdate) {
        // 更新对象数据
        userToUpdate.nowPrice = result.last;
        userToUpdate.hcrateP = result.pcp;
        // 如果该股票的价格已被盘前数据更新,则不再通过WebSocket覆盖
        if (!userToUpdate.isPremarketUpdated) {
          // 更新对象数据
          userToUpdate.nowPrice = result.last;
          userToUpdate.hcrateP = result.pcp;
          userToUpdate.hcrate = result.pc;
        }
      }
    },
  },
  beforeDestroy() {
    if (this.Trade) {
      this.Trade.close();
      console.log('WebSocket disconnected');
    }
  },
  beforeDestroy() {
    // 清除WebSocket连接
    if (this.Trade) {
      this.Trade.close();
      console.log("WebSocket disconnected");
    }
    // 清除盘前数据轮询定时器
    this.stopPremarketPolling();
  }
};
</script>
@@ -232,9 +320,11 @@
      position: absolute;
      top: 0;
      left: 0;
      background: linear-gradient(to right,
          rgba(0, 0, 0, 0),
          rgba(0, 0, 0, 0.8));
      background: linear-gradient(
        to right,
        rgba(0, 0, 0, 0),
        rgba(0, 0, 0, 0.8)
      );
      text-align: end;
      color: @red;
      padding-right: 0.25em;