SzplatformWeb/src/views/index.vue

<template>
  <div class="L-app-container home" id="L-size-main">
    <div class="tabsBottom" :style="tabHeader">
      <div class="headerText">
        <div class="searchP">算法运行监测</div>
      </div>
      <section class="table-box">
        <el-table v-loading="loading" :data="tableData" border>
          <el-table-column
            type="index"
            label="序号"
            width="55"
            align="center"
          />
          <el-table-column label="算法运行时间" align="center" prop="runningTime">
          </el-table-column>
          <el-table-column label="获取事件条数" align="center" prop="hqTotal">
          </el-table-column>
          <el-table-column label="推送驾驶舱条数" align="center" prop="tsTotal">
          </el-table-column>
        </el-table>
      </section>
    </div>
    <div class="my-pagination">
      <pagination
        id="L-pagination"
        :total="total"
        :page="pages.current"
        :limit="pages.size"
        @pagination="getPagination"
        :current-page.sync="pages.current"
      ></pagination>
    </div>
  </div>
</template>

<script>
// import tabContent from "./components/algorithmTime"
import { getEventLogs } from "@/api/platform/index"
export default {
  // components:{
  //   tabContent
  // },
  name: "Index",
  data() {
    return {
      pages: {
        current: 1,
        size: 10,
      },
      loading:false,
      tableData: [],
      total:0,
      tabHeader: {
        height: '',
      },
    };
  },
  mounted() {
    this.getList();
    this.cancalDebounce();
    window.addEventListener('resize', this.cancalDebounce);
  },
  destroyed() {
    window.removeEventListener('resize', this.cancalDebounce);
  },
  methods: {
    handleClick(tab, event){
      // if (this.activeName == "type") {
      //   this.type = true;
      //   this.grade = false;
      //   this.source = false;
      // } else if (this.activeName == "grade") {
      //   this.type = false;
      //   this.grade = true;
      //   this.source = false;
      // } else if (this.activeName == "source") {
      //   this.type = false;
      //   this.grade = false;
      //   this.source = true;
      // }
    },
    // 获取列表
    getList(){
      this.loading = true;
      getEventLogs(this.pages).then(res=>{
        this.loading = false;
        this.total = res.data.total;
        this.tableData = res.data.records;
      })
    },
    // 页码获取
    getPagination(pages){
      this.pages.current = pages.page;
      this.pages.size = pages.limit;
      this.getList()
    },
    // 屏幕尺寸变化
    cancalDebounce(){
      const element = document.getElementById('L-size-main'); // 通过元素的 ID 获取元素
      const pagination = document.getElementById('L-pagination'); // 通过元素的 ID 获取元素
      const elementHeight = element.offsetHeight;
      const paginationtHeight = pagination.offsetHeight;
      this.tabHeader.height = (elementHeight - paginationtHeight - 100) + 'px';
    }
  }
};
</script>

<style scoped lang="scss">
</style>