jiaoyixt/src/pages/MainSec/SignalTable.vue

<template>
  <custom-base-table
    :data="data"
    :columns="columns"
    thead-classes="text-primary"
  >
    <template slot="LogType" slot-scope="item">
      {{ LogTypes.filter(i => i.value == item.row.item.LogType)[0].title }}
    </template>
  </custom-base-table>
</template>

<script>
import Bus from "../../common/bus";
import CustomBaseTable from "../../components/CustomBaseTable";
import moment from "moment";
import { LogTypes } from "../prePages/js/selectoptions";
import { secondLogColumns } from "../prePages/js/columns";
export default {
  props: {
    RobotId: { type: String, default: "60521323-28C3-AC14-0076-48B075584510" }
  },
  components: { CustomBaseTable },
  data() {
    return {
      LogTypes,
      columns: secondLogColumns,
      data: [],
      noMoreData: false,
      endTime: null,
      scrollInstance: null,
      nullPlusTime: 0
    };
  },
  created() {
    let endTime = moment();
    this.endTime = endTime;
    this.getLatestLog(endTime);
  },

  mounted() {
    Bus.$on("tradeLog", data => {
      console.log(data, "received from ws Bus");
      this.data.unshift(data);
    });
    this.initScroller();
  },

  destroyed() {
    if (this.scrollInstance)
      this.scrollInstance.removeEventListener("scroll", this.scrollerListener);
  },
  methods: {
    initScroller() {
      let target = document.getElementById("tradeLog");
      this.scrollInstance = target;
      this.scrollInstance.addEventListener(
        "scroll",
        this.scrollerListener,
        false
      );
    },

    getPreday() {},

    scrollerListener() {
      //   console.log(
      //     this.scrollInstance.scrollTop,
      //     this.scrollInstance.scrollHeight,
      //     this.scrollInstance.clientHeight
      //   );
      if (
        this.scrollInstance.scrollTop + this.scrollInstance.clientHeight ==
        this.scrollInstance.scrollHeight
      ) {
        if (!this.spinning && !this.noMoreData) this.getLatestLog(this.endTime);
      }
    },

    getLatestLog(endTime) {
      this.spinning = true;
      let _endTime = endTime.format("YYYY-MM-DD HH:mm:ss");

      this.$http
        .get(
          `/Api/ExecutionLog/GetList?robotId=${this.RobotId}&endTime=${_endTime}`
        )
        .then(res => {
          this.spinning = false;
          if (res.Code == 200) {
            if (res.Data.length > 0) {
              if (this.data.length > 0) {
                res.Data.forEach(item => this.data.push(item));
                this.endTime = moment(
                  this.data[this.data.length - 1].CreateTime
                );
              } else {
                this.data = res.Data;
              }
            } else {
              this.noMoreData = true;
              this.sMessage("danger", "已经没有更多日志了");
            }
          }
        });
    },
    // 封装showNotification
    sMessage(type, message) {
      this.$notify({
        type: type,
        message,
        timeout: 1800
      });
    }
  }
};
</script>

<style scoped></style>