1

PC-20250623MANY\Administrator

2025-08-23 7c4de2cb1422f6f4748928df5bbcc802d85dd820

 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">
    <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>
@@ -15,17 +20,39 @@
        <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 class="edit flex-end" v-show="editorShow">
      <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"
    >
      <img src="@/assets/img/zhaobudao2.png" alt="" />
    </div>

    <n-pagination
      :pageNo.sync="pageNum"
@@ -38,6 +65,8 @@
<script>
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: {
@@ -45,11 +74,10 @@
  },
  data() {
    return {
      editorShow: false, // 编辑状态
      pageNum: 1,
      pageSize: 10,
      total: 0,
      stockList: []
      total: 1,
      stockList: [],
    };
  },
  props: {
@@ -58,29 +86,39 @@
      default: () => {
        return {};
      }
    },
    listApi: {
      default: () => {
        return api.getStockByType;
      }
    },
    // 编辑状态
    editorShow: {
      type: Boolean,
      default: false
    }
  },
  watch: {
    propOption: {
      handler(val) {
        this.pageNum = 1;
        this.getStockList();
      }
    },
    pageNum: {
      handler(val) {
        console.log(val);
        // this.stockList = [];
        this.getStockList();
      }
    }
  },
  mounted() {
    this.getStockList();
    this.initWebSocket();
  },
  methods: {
    onEdit() {
      this.editorShow = !this.editorShow;
    },
    // 获取数据
    async getStockList() {
      // 获取数据
      let opt = {
        pageNum: this.pageNum,
        pageSize: this.pageSize,
@@ -92,9 +130,65 @@

      opt = { ...opt, ...this.propOption };

      let data = await api.getStockByType(opt);
      let data = await this.listApi(opt);
      this.stockList = data.data.list;
      this.total = data.data.total;
      this.total = data.data.total || 1;
    },
    // 点击进入详情
    toDetails(item) {
      const obj = {
        pid: item.code || "",
        type: item.stock_type || ""
      };
      window.localStorage.setItem("kLine", JSON.stringify(obj));

      this.$router.push({
        path: "/kline",
        query: {
          code: item.code,
          type: item.stock_type
        }
      });
    },
    // 删除自选股
    async deleteStock(item) {
      let opt = {
        code: item.code
      };
      let data = await api.delOption(opt);
      if (data.status === 0) {
        this.$emit("update:editorShow", false);
        Toast.success(data.msg);
        this.getStockList();
      } 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");
    }
  }
};
@@ -147,6 +241,14 @@
      }
    }

    .up {
      color: @dark_green;
    }

    .down {
      color: @red;
    }

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