From 4b781e90e51f69ada7d2e2bd1e70ee4ab918b608 Mon Sep 17 00:00:00 2001
From: xuhuajiao <13476289682@163.com>
Date: Mon, 12 Jun 2023 15:05:24 +0800
Subject: [PATCH] =?UTF-8?q?=E9=97=A8=E7=A6=81page=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/components/SecurityDoor.vue | 272 +++++++++++++-------------
 1 file changed, 136 insertions(+), 136 deletions(-)

diff --git a/src/views/components/SecurityDoor.vue b/src/views/components/SecurityDoor.vue
index 46d2cde..ffedcb7 100644
--- a/src/views/components/SecurityDoor.vue
+++ b/src/views/components/SecurityDoor.vue
@@ -1,136 +1,136 @@
-<template>
-  <div class="container-wrap">
-    <span class="right-top-line" />
-    <span class="left-bottom-line" />
-    <h3 class="table-title">
-      <p class="title-arrow">
-        <svg-icon icon-class="menjin" class-name="warehouse-svg" />门禁记录
-      </p>
-    </h3>
-    <el-table ref="table" style="min-width: 100%;" :height="height" :data="tableData" class="warehose-el-table" stripe>
-      <el-table-column prop="createTime" label="时间" align="center" min-width="60">
-        <template slot-scope="scope">
-          <div>{{ scope.row.createTime | parseTime }}</div>
-        </template>
-      </el-table-column>
-      <el-table-column label="库房" align="center" min-width="30">
-        <template>
-          档案库
-        </template>
-      </el-table-column>
-      <el-table-column prop="alarmMsg" label="警情" align="center" :show-overflow-tooltip="true" min-width="85" />
-    </el-table>
-  </div>
-</template>
-<script>
-import { securitydoor } from '@/api/home/securityDoor/securityDoor'
-export default {
-  name: 'SecurityDoor',
-  props: {
-    width: {
-      type: String,
-      default: '100%'
-    },
-    height: {
-      type: String,
-      default: '100%'
-    }
-  },
-  data() {
-    return {
-      tableData: [], // 正在展示的数据
-      scrollTimer: null,
-      getDataTimer: null
-    }
-  },
-  watch: {
-    // 如果 `tableData` 发生改变，这个函数就会运行
-    tableData: function(newData, oldData) {
-      this.tableRefScroll()
-    }
-  },
-  created() {
-    this.getSecuritydoor()
-  },
-  destroyed() {
-    clearInterval(this.scrollTimer)
-    this.scrollTimer = null
-  },
-  methods: {
-    // 表格隔行变色
-    rowBgColor({ row, rowIndex }) {
-      if (rowIndex % 2 === 1) {
-        return 'light-blue'
-      } else {
-        return ''
-      }
-    },
-    // table滚动
-    tableRefScroll() {
-      clearInterval(this.scrollTimer) // 清除定时器
-      const table = this.$refs.table // 获取DOM元素
-      this.wrapperHeight = table.$el.offsetHeight - 30
-      // 组件一页能完整展示的数据条数
-      this.displayNum = Math.floor(this.wrapperHeight / 40)
-      if (this.tableData.length > this.displayNum) {
-        const bodyWrapper = table.bodyWrapper // 获取表格中承载数据的div元素
-        this.addTableRefScroll(bodyWrapper)
-        // 鼠标移入
-        bodyWrapper.onmouseover = () => {
-          clearInterval(this.scrollTimer)
-        }
-        // 鼠标移出
-        bodyWrapper.onmouseout = () => {
-          this.addTableRefScroll(bodyWrapper)
-        }
-      } else {
-        this.scrollTimer = setInterval(() => {
-          this.getSecuritydoor()
-        }, 1000 * 3 * this.tableData.length)
-      }
-    },
-    addTableRefScroll(bodyWrapper) {
-      // let scrollTop = bodyWrapper.scrollTop
-      if (this.displayNum && this.displayNum > 0) {
-        this.scrollTimer = setInterval(() => {
-          // scrollTop = bodyWrapper.scrollTop
-          if (bodyWrapper.scrollTop + this.wrapperHeight >= this.tableData.length * 40) {
-            bodyWrapper.scrollTop = 0
-            this.getSecuritydoor()
-          } else {
-            bodyWrapper.scrollTop += this.displayNum * 40
-          }
-        }, 1000 * 3 * this.displayNum)
-      }
-    },
-    getSecuritydoor() {
-      securitydoor({ page: 1, size: 30 }).then((data) => {
-        if (data.content && data.content.length > 0) {
-          this.tableData.splice(0, data.content.length, ...data.content)
-        }
-      })
-    }
-  }
-}
-</script>
-<style lang="scss" scoped>
-@import "~@/assets/styles/lend-manage.scss";
-.warehouse-left {
-  position: relative;
-  h2 {
-    position: absolute;
-    left: 50%;
-    top: 0;
-    transform: translateX(-50%);
-    color: #fff;
-    font-size: 16px;
-  }
-}
-::v-deep
-  .el-table--striped
-  .el-table__body
-  tr.el-table__row--striped
-  td.el-table__cell {
-  background: #02255f;
-}
-</style>
+<template>
+  <div class="container-wrap">
+    <span class="right-top-line" />
+    <span class="left-bottom-line" />
+    <h3 class="table-title">
+      <p class="title-arrow">
+        <svg-icon icon-class="menjin" class-name="warehouse-svg" />门禁记录
+      </p>
+    </h3>
+    <el-table ref="table" style="min-width: 100%;" :height="height" :data="tableData" class="warehose-el-table" stripe>
+      <el-table-column prop="createTime" label="时间" align="center" min-width="60">
+        <template slot-scope="scope">
+          <div>{{ scope.row.createTime | parseTime }}</div>
+        </template>
+      </el-table-column>
+      <el-table-column label="库房" align="center" min-width="30">
+        <template>
+          档案库
+        </template>
+      </el-table-column>
+      <el-table-column prop="alarmMsg" label="警情" align="center" :show-overflow-tooltip="true" min-width="85" />
+    </el-table>
+  </div>
+</template>
+<script>
+import { securitydoor } from '@/api/home/securityDoor/securityDoor'
+export default {
+  name: 'SecurityDoor',
+  props: {
+    width: {
+      type: String,
+      default: '100%'
+    },
+    height: {
+      type: String,
+      default: '100%'
+    }
+  },
+  data() {
+    return {
+      tableData: [], // 正在展示的数据
+      scrollTimer: null,
+      getDataTimer: null
+    }
+  },
+  watch: {
+    // 如果 `tableData` 发生改变，这个函数就会运行
+    tableData: function(newData, oldData) {
+      this.tableRefScroll()
+    }
+  },
+  created() {
+    this.getSecuritydoor()
+  },
+  destroyed() {
+    clearInterval(this.scrollTimer)
+    this.scrollTimer = null
+  },
+  methods: {
+    // 表格隔行变色
+    rowBgColor({ row, rowIndex }) {
+      if (rowIndex % 2 === 1) {
+        return 'light-blue'
+      } else {
+        return ''
+      }
+    },
+    // table滚动
+    tableRefScroll() {
+      clearInterval(this.scrollTimer) // 清除定时器
+      const table = this.$refs.table // 获取DOM元素
+      this.wrapperHeight = table.$el.offsetHeight - 30
+      // 组件一页能完整展示的数据条数
+      this.displayNum = Math.floor(this.wrapperHeight / 40)
+      if (this.tableData.length > this.displayNum) {
+        const bodyWrapper = table.bodyWrapper // 获取表格中承载数据的div元素
+        this.addTableRefScroll(bodyWrapper)
+        // 鼠标移入
+        bodyWrapper.onmouseover = () => {
+          clearInterval(this.scrollTimer)
+        }
+        // 鼠标移出
+        bodyWrapper.onmouseout = () => {
+          this.addTableRefScroll(bodyWrapper)
+        }
+      } else {
+        this.scrollTimer = setInterval(() => {
+          this.getSecuritydoor()
+        }, 1000 * 3 * this.tableData.length)
+      }
+    },
+    addTableRefScroll(bodyWrapper) {
+      // let scrollTop = bodyWrapper.scrollTop
+      if (this.displayNum && this.displayNum > 0) {
+        this.scrollTimer = setInterval(() => {
+          // scrollTop = bodyWrapper.scrollTop
+          if (bodyWrapper.scrollTop + this.wrapperHeight >= this.tableData.length * 40) {
+            bodyWrapper.scrollTop = 0
+            this.getSecuritydoor()
+          } else {
+            bodyWrapper.scrollTop += this.displayNum * 40
+          }
+        }, 1000 * 3 * this.displayNum)
+      }
+    },
+    getSecuritydoor() {
+      securitydoor({ page: 0, size: 30 }).then((data) => {
+        if (data.content && data.content.length > 0) {
+          this.tableData.splice(0, data.content.length, ...data.content)
+        }
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+@import "~@/assets/styles/lend-manage.scss";
+.warehouse-left {
+  position: relative;
+  h2 {
+    position: absolute;
+    left: 50%;
+    top: 0;
+    transform: translateX(-50%);
+    color: #fff;
+    font-size: 16px;
+  }
+}
+::v-deep
+  .el-table--striped
+  .el-table__body
+  tr.el-table__row--striped
+  td.el-table__cell {
+  background: #02255f;
+}
+</style>