dcc
2024-06-07 d5381ec06ab5f549fade867c3a874de613bdd5d4
src/components/trade-deep-data/index.vue
@@ -7,7 +7,7 @@
      </div>
      <div class="text-right items-end justify-end">
        <div class="">{{ $t("数量") }}</div>
        <div class="mt-5">({{ symbol.toUpperCase() || "--" }})</div>
        <div class="mt-5">({{ symbol | _symbolName }})</div>
      </div>
    </div>
    <div
@@ -118,7 +118,13 @@
    this.getHomeList();
  },
  watch: {
    symbol(val) {
    symbol() {
      const init = [];
      for (let i = 0; i < DEEP_LENGTH; i++) {
        init.push({ amount: "", price: "" });
      }
      this.greenData = init;
      this.redData = init;
      this.startDeepSocket();
      this.getHomeList();
    },
@@ -185,11 +191,17 @@
        this.$emit("getList", dataObj);
      });
    },
    startDeepSocket() {
      // 开启socket链接
      this.closeSocket();
      console.log("start deep");
      this.socket = new WebSocket(`${WS_URL}/3/${this.symbol}`);
      this.socket.onopen = () => {
        console.log("WebSocket connection established");
      };
      this.socket.onmessage = (evt) => {
        const { data } = evt;
        const { code, data: _data } = JSON.parse(data);
@@ -197,9 +209,23 @@
          this.handleDeep(_data);
        }
      };
      this.socket.onerror = (error) => {
        console.error("WebSocket error:", error);
        setTimeout(this.startDeepSocket, 5000); // 5秒后尝试重新连接
      };
      this.socket.onclose = (event) => {
        console.log("WebSocket connection closed:", event);
        // 重新连接,可以根据需求添加重连的逻辑,这里只是简单的示例
      };
    },
    handleDeep(data) {
      // 格式化数据
      // console.log(this.symbol, data.symbol);
      if (this.symbol !== data.symbol) {
        return;
      }
      this.deepData = data;
      if (this.selectValue >= 1) {
        this.deepData.asks.map((item) => {