jiaoyixt/src/pages/Robot/order.vue

<template>
  <card>
    <el-tabs v-model="activeName">
      <el-tab-pane label="历史订单" name="first">
        <custom-base-table
          :data="historyOrders"
          :columns="OrderColumns.filter(item => !item.hidden)"
          thead-classes="text-primary"
        ></custom-base-table>
        <el-pagination
          small
          :hide-on-single-page="true"
          layout="prev, pager, next"
          :total="historyOrdersPagination.total"
          :page-size="historyOrdersPagination.pageSize"
          :current-page="historyOrdersPagination.current"
        >
        </el-pagination>
      </el-tab-pane>
      <el-tab-pane label="持仓订单" name="second">
        <custom-base-table
          :data="nowOrders"
          :columns="OrderColumns"
          thead-classes="text-primary"
        ></custom-base-table>
      </el-tab-pane>
    </el-tabs>

    <card>
      <h5 slot="header" class="title">账号配置信息</h5>
      <div class="row">
        <div class="col-md-3">
          <base-input v-model="basic.CoinCount" label="持币数量" disabled>
          </base-input>
        </div>
        <div class="col-md-3">
          <base-input
            v-model="basic.TotalPurchasePrice"
            label="持仓总价"
            disabled
          >
          </base-input>
        </div>
        <div class="col-md-3">
          <base-input
            v-model="basic.AvgPurchasePrice"
            label="持仓均价"
            disabled
          >
          </base-input>
        </div>
        <div class="col-md-3">
          <base-input
            v-model="basic.TotalPurchasePriceRatio"
            label="持仓占比(%)"
            disabled
          >
          </base-input>
        </div>
        <div class="col-md-3">
          <base-input v-model="basic.FloatingPL" label="浮动盈亏(%)" disabled>
          </base-input>
        </div>
        <div class="col-md-3">
          <base-input
            v-model="basic.TotalPurchasePriceProfit"
            label="浮动持仓利润(已预扣手续费)"
            disabled
          >
          </base-input>
        </div>
        <div class="col-md-3">
          <base-input
            v-model="basic.TotalProfit"
            label="总利润(已预扣手续费)"
            disabled
          >
          </base-input>
        </div>
        <div class="col-md-3">
          <base-input v-model="basic.NewestPrice" label="最新成交价" disabled>
          </base-input>
        </div>
      </div>
    </card>
  </card>
</template>
<script>
import { OrderColumns } from "../../pages/prePages/js/columns";
import CustomBaseTable from "../../components/CustomBaseTable";
import Bus from "../../common/bus";

import {
  sendSock,
  initWebSocket,
  closeWebSocket
} from "../../utils/plugin/socket";

const S_PING = 100;
const R_PONG = 101;
const SUBSCRIBE = 102;
const ACCOUNT_INFO = 103;
const ORDER_PUBLISH = 104;
const TRADE_LOG = 105;

export default {
  components: { CustomBaseTable },
  props: {
    RobotId: { type: String, default: "60521323-28C3-AC14-0076-48B075584510" }
  },
  data() {
    return {
      activeName: "first",
      OrderColumns,
      historyOrders: [],
      nowOrders: [],
      basic: {},
      historyOrdersPagination: { current: 1, pageSize: 15 },
      pingInterval: null
    };
  },

  created() {
    this.initOrders(); //初始化两个订单列表
  },

  mounted() {
    console.log("connecting");
    this.initWs(); //初始化ws连接
  },

  beforeDestroy() {
    closeWebSocket();
    localStorage.clear();
    clearInterval(this.pingInterval);
  },

  methods: {
    initOrders() {
      this.initHistoryOrders();
      this.initNowOrders();
    },
    initHistoryOrders() {
      let pageIndex = this.historyOrdersPagination.current;
      let pageSize = this.historyOrdersPagination.pageSize;
      this.$http
        .get(
          `/Api/Order/GetHistorySpotGoodsOrder?pageIndex=${pageIndex}&pageSize=${pageSize}&robotId=${this.RobotId}`
        )
        .then(res => {
          if (res.Code == 200) {
            this.historyOrders = res.Data.List;
            const pager = { ...this.historyOrdersPagination };
            pager.total = res.Data.Count;
            this.historyOrdersPagination = pager;
          }
        });
    },

    //触发分页
    historyOrdersChange(pagination) {
      this.historyOrdersPagination = pagination;
      this.initHistoryOrders();
    },

    initNowOrders() {
      this.$http
        .get(`/Api/Order/GetRuningSpotGoodsOrder?robotId=${this.RobotId}`)
        .then(res => {
          if (res.Code == 200) {
            this.nowOrders = res.Data;
          }
        });
    },

    initWs() {
      let that = this;
      initWebSocket("ws://54.249.164.224").then(
        rs => {
          //订阅事件
          sendSock(
            {
              Notify: SUBSCRIBE,
              RobotId: this.RobotId
            },
            that.wsCb
          );
          //ping包检测连接
          that.pingIntervalKeeper();
        },
        rj => {
          that.$message.error("连接websocket失败，正在重连");
          that.initWs();
        }
      );
    },

    wsCb(data) {
      console.log("ws received", data);

      if (data && data.Notify == ACCOUNT_INFO) {
        this.dealAccountInfo(data);
      } else if (data && data.Notify == ORDER_PUBLISH) {
        this.dealOrder(data);
      } else if (data && data.Notify == R_PONG) {
        this.dealPong(data);
      } else if (data && data.Notify == TRADE_LOG) {
        Bus.$emit("tradeLog", data);
      }
    },

    pingPkg() {
      console.log("心跳包检测发送");
      let timeStamp = Date.now();
      let that = this;
      sendSock(
        {
          Notify: S_PING,
          TimeStamp: timeStamp
        },
        that.wsCb
      );
      localStorage.setItem("pingTimeStamp", timeStamp);
      if (!localStorage.getItem("missPkg")) {
        localStorage.setItem("missPkg", 1);
      } else {
        let missPkgCount = parseInt(localStorage.getItem("missPkg")) + 1;
        localStorage.setItem("missPkg", missPkgCount);
        console.log("丢包次数增加1", missPkgCount);
        if (missPkgCount > 3) {
          /** 达到丢包上限
           * 1.停止ping包interval
           * 2.关闭ws
           * 3.重新获取订单列表
           */
          console.log("达到丢包次数", missPkgCount);
          clearInterval(this.pingInterval);
          localStorage.clear();
          closeWebSocket();
          this.initOrders();
          this.initWs();
        }
      }
    },

    //心跳包ping包定时发送
    pingIntervalKeeper() {
      let that = this;
      that.pingPkg();
      this.pingInterval = setInterval(() => {
        that.pingPkg();
      }, 30000);
    },

    //心跳包pong包检测
    dealPong(data) {
      //收到pong包后与本地得timeStamp匹配到之后丢包次数默认-1
      let timeStamp = localStorage.getItem("pingTimeStamp");
      let missPkgCount = parseInt(localStorage.getItem("missPkg"));
      if (data.TimeStamp == timeStamp) {
        missPkgCount--;
        console.log("丢包次数减少1", missPkgCount);
        localStorage.setItem("missPkg", missPkgCount);
      }
    },

    //账号信息推送处理
    dealAccountInfo(data) {
      this.basic = { ...this.basic, ...data };
      if (
        this.nowOrders.length > 0 &&
        data.NewestPrice &&
        data.NewestPrice != 0
      ) {
        this.nowOrders.forEach(item => {
          let totalSalePrice = data.NewestPrice * item.PurchaseCoinCount; //销售总价
          let saleFee = totalSalePrice * 0.02; //销售手续费
          let Profit =
            totalSalePrice -
            item.TotalPurchasePrice -
            saleFee -
            item.PurchaseFee;
          item.Profit = Profit.toFixed(5); //算出利润
          item.UnstableProfit = (
            (data.NewestPrice / item.PurchasePrice - 1) *
            100
          ).toFixed(5); //算出浮动盈亏
          // console.log(item.UnstableProfit, "看看数据");
        });
      }
    },

    //订单推送处理
    dealOrder(data) {
      //4|| 6
      let targetIndex = -1;
      for (let i = 0; i < this.nowOrders.length; i++) {
        if (data.Id == this.nowOrders[i].Id) {
          targetIndex = i;
          break;
        }
      }
      if (targetIndex == -1) {
        this.nowOrders.push(data);
      } else {
        this.nowOrders[targetIndex] = {
          ...this.nowOrders[targetIndex],
          ...data
        };
        if (data.Status == 4 || data.Status == 6) {
          this.nowOrders.splice(targetIndex, 1);
          if (this.historyOrdersPagination.current == 1)
            this.initHistoryOrders();
        }
      }
    },
    statusRender(status) {
      //已创建=0,部分购买=1,已购买=2,部分购买被撤销=3,购买被撤销=4,部分卖出=5,已卖出=6,部分卖出已撤销=7,卖出已撤销=8
      switch (status) {
        case 0:
          return "已创建";
        case 1:
          return "部分购买";
        case 2:
          return "已购买";
        case 3:
          return "部分购买被撤销";
        case 4:
          return "购买被撤销";
        case 5:
          return "部分卖出";
        case 6:
          return "已卖出";
        case 7:
          return "部分卖出已撤销";
        case 8:
          return "卖出已撤销";
      }
    }
  }
};
</script>
<style>
.el-pagination button:disabled {
  background-color: transparent;
}
.el-pager li {
  background-color: transparent;
}
</style>