1

PC-20250623MANY\Administrator

2025-07-26 35ba5f69dc6f207e73c99af9c46e0820a7388852

 src/components/stock-list.vue

@@ -6,12 +6,7 @@
      <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>
@@ -22,43 +17,25 @@
      <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>

@@ -66,6 +43,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: {
@@ -113,6 +91,7 @@
  },
  mounted() {
    this.getStockList();
    this.initWebSocket();
  },
  methods: {
    // 获取数据
@@ -161,8 +140,34 @@
      } else {
        Toast.fail(data.msg);
      }
    },
    // 连接ws实时监控变动
    initWebSocket() {
      console.log("initWebSocket");
      this.Trade = new WhrWebSocket({
        path: `wss://ws.kuspitai.com/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');
    }
  }
  },
};
</script>

@@ -227,11 +232,9 @@
      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;