schoolPanel/src/pages/recordTime/recordTime.vue

<template>
  <div>
    <top-header></top-header>
    <div class="mainbox">
      <div class="gas-container">
        <return-back></return-back>
        <!-- <div style="max-width:1920px"> -->
        <div class="timeList">
          <div
            class="timeItem"
            v-for="(item, index) in recordData.slice(
              (currentPage - 1) * Count,
              currentPage * Count
            )"
            :key="index"
            @click="goInspectDetail(item)"
          >
            {{ item.Time }}
            <!-- </div> -->
          </div>
        </div>

        <div
          style="
            position: fixed;
            bottom: 0.3rem;
            text-align: center;
            display: block;
            width: 100%;
          "
        >
          <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-size="Count"
            layout=" prev, pager, next, jumper"
            :total="TotalCount"
          >
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import topHeader from "@/components/topHeader";
import returnBack from "@/components/returnBack";
export default {
  name: "index",
  components: {
    topHeader,
    returnBack,
  },
  data() {
    return {
      StationID: "",

      // 总数据
      recordData: [],
      // 默认显示第几页
      currentPage: 1,
      // 总条数，根据接口获取数据长度(注意：这里不能为空)
      TotalCount: 1,
      // 默认每页显示的条数（可修改）
      Count: 10,
    };
  },
  watch: {
    "$store.state.wsInfo"(val) {
      this.messageHandle(val);
    },
  },

  created() {
    this.StationID = this.$store.state.StationID;

    (this.recordData = [
      {
        Time: "2021-06-15 13:01:14",
      },
      {
        Time: "2021-06-15 13:01:09",
      },
      {
        Time: "2021-06-15 13:01:04",
      },
      {
        Time: "2021-06-15 13:00:59",
      },
      {
        Time: "2021-06-15 13:00:54",
      },
      {
        Time: "2021-06-15 15:01:14",
      },
      {
        Time: "2021-06-15 16:01:09",
      },
      {
        Time: "2021-06-15 17:01:04",
      },
      {
        Time: "2021-06-15 18:00:59",
      },
      {
        Time: "2021-06-15 19:00:54",
      },
      {
        Time: "2021-06-15 13:00:59",
      },
      {
        Time: "2021-06-15 13:00:54",
      },
      {
        Time: "2021-06-15 15:01:14",
      },
      {
        Time: "2021-06-15 16:01:09",
      },
    ]),
      // 将数据的长度赋值给TotalCount
      (this.TotalCount = this.recordData.length);
  },

  mounted() {
    document.getElementsByClassName(
      "el-pagination__jump"
    )[0].childNodes[0].nodeValue = "跳转到: ";
  },
  methods: {
    messageHandle(e) {
      if (e.data.search("{") != -1) {
        const redata = JSON.parse(e.data);
        // 初始化获取站点下拉数据
        if (redata.CMD == "getStationInfo" && redata.RESULT[0].StationID) {
          var json = {};

          json.CMD = "getPatrolRecord";
          json.StationID = this.StationID;
          (json.Start = 0), (json.Limit = 2), (json.Order = "DESC");

          // this.global.sendWs(json);

          setInterval(() => {
            console.log("每隔30秒请求一次getPatrolRecord");
            this.global.sendWs(json);
          }, 30000);
        }

        if (redata.CMD == "getPatrolRecord") {
          this.recordData = redata.RESULT.LIST;
          console.log("this.recordData");
          console.log(this.recordData);
        }
      }
    },

    goInspectDetail(item) {
      this.$router.push({
        path: "/inspectRecord",
        query: { Time: item.Time },
      });
    },

    // 分页
    // 每页显示的条数
    handleSizeChange(val) {
      // 改变每页显示的条数
      this.Count = val;
      // 注意：在改变每页显示的条数时，要将页码显示到第一页
      this.currentPage = 1;
    },
    // 显示第几页
    handleCurrentChange(val) {
      // 改变默认的页数
      this.currentPage = val;
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style >
</style>