报警信息 整屏滚动

src/views/components/WarehouseWarning.vue

@@ -34,8 +34,29 @@ export default {
       tableData: []
     }
   },
-  created() {
+  mounted() {
     this.getData()
+    console.log(11333)
+    this.$nextTick(() => {
+      this.tableRefScroll()
+    })
+    // this.$nextTick(() => {
+    //   this.scroll = new Bscroll('.warehose-el-table .el-table__body-wrapper', {
+    //     scrollY: true
+    //     ,startY: 10
+    //   })
+    //   this.scroll.on('scrollEnd', () => {
+    //     // let pageIndex = this.scroll.getCurrentPage().pageX;
+    //     // this.currentPageIndex = pageIndex;
+    //     // if(vm.autoPlay) {
+    //     //     vm.play();
+    //     // }
+    //     console.log('scrollEnd')
+    //   })
+    // })
+  },
+  destroyed() {
+    clearInterval(this.timer)
   },
   methods: {
     getData() {
@@ -48,6 +69,41 @@ export default {
       } else {
         return ''
       }
+    },
+    // table滚动
+    tableRefScroll() {
+      clearInterval(this.timer) // 清除定时器
+      const table = this.$refs.table // 获取DOM元素
+      const wrapperHeight = table.$el.offsetHeight - 30
+      this.scollNum = Math.floor(wrapperHeight / 40)
+      const bodyWrapper = table.bodyWrapper // 获取表格中承载数据的div元素
+      this.addTableRefScroll(bodyWrapper)
+      // 鼠标移入
+      bodyWrapper.onmouseover = () => {
+        clearInterval(this.timer)
+      }
+      // 鼠标移出
+      bodyWrapper.onmouseout = () => {
+        this.addTableRefScroll(bodyWrapper)
+      }
+    },
+    addTableRefScroll(bodyWrapper) {
+      let scrollTop = bodyWrapper.scrollTop
+      this.timer = setInterval(() => {
+        scrollTop = bodyWrapper.scrollTop
+        bodyWrapper.scrollTop += this.scollNum * 40
+        if (scrollTop === bodyWrapper.scrollTop) {
+          if (this.isScroll) {
+            scrollTop = 0
+            bodyWrapper.scrollTop = 0
+          } else {
+            if (this.flag === 1) {
+              this.currentPage++
+              this.handleSearch() // 函数中需要清楚定时器
+            }
+          }
+        }
+      }, 1000 * 3 * this.scollNum)
     }
   }
 }

src/views/components/data1.json

@@ -78,22 +78,22 @@
     {
       "time":"2022-6-30 13:00",
       "warehouse":"文书档案库房",
-      "warning":"温度温度温度温度温度温度"
+      "warning":"4温度温度温度温度温度温度"
     },
     {
       "time":"2022-6-30 13:00",
       "warehouse":"文书档案库房",
-      "warning":"温度温度温度温度温度温度"
+      "warning":"3温度温度温度温度温度温度"
     },
     {
       "time":"2022-6-30 13:00",
       "warehouse":"文书档案库房",
-      "warning":"温度温度温度温度温度温度"
+      "warning":"2温度温度温度温度温度温度"
     },
     {
       "time":"2022-6-30 13:00",
       "warehouse":"文书档案库房",
-      "warning":"温度温度温度温度温度温度"
+      "warning":"1温度温度温度温度温度温度"
     }
 
   ]

src/views/home.vue

@@ -120,7 +120,7 @@
         </el-col>
         <el-col :xs="24" :sm="24" :lg="8">
           <!-- 报警记录 -->
-          <warehouse-warning />
+          <warehouse-warning :height="'calc(100% - 40px)'" />
         </el-col>
       </el-row>
       <el-row :gutter="20" style="height: calc(50vh - 251px);">

src/views/storeManage/warehouse3D/archivesStorage/index.vue

@@ -58,11 +58,11 @@
           </li>
         </ul>
       </div>
-
     </div>
     <div class="warehouse-right">
       <!-- 报警记录 -->
-      <div class="container-wrap" style="margin-bottom:20px">
+      <warehouse-warning :height="'calc(100% - 40px)'" />
+      <!-- <div class="container-wrap" style="margin-bottom:20px">
         <span class="right-top-line" />
         <span class="left-bottom-line" />
         <h3 class="table-title">
@@ -80,7 +80,7 @@
           <el-table-column prop="warehouse" label="库房" align="center" min-width="60" />
           <el-table-column prop="warning" label="警情" align="center" :show-overflow-tooltip="true" min-width="85" />
         </el-table>
-      </div>
+      </div> -->
       <!-- 门禁记录 -->
       <div class="container-wrap">
         <span class="right-top-line" />
@@ -107,8 +107,10 @@
 
 <script>
 import data1 from '../data1.json'
+import WarehouseWarning from '@/views/components/WarehouseWarning'
 export default {
   name: 'FullView',
+  components: { WarehouseWarning },
   data() {
     return {
       tableData: [],
@@ -117,9 +119,6 @@ export default {
       isScroll: false // 是否滚动
     }
   },
-  created() {
-    this.getData()
-  },
   mounted() {
     const _this = this
     this.iframeWin = this.$refs.myIframe.contentWindow
@@ -128,9 +127,9 @@ export default {
       _this.deviceState()
     }
     window.addEventListener('message', this.handleMessageDevice)
-    this.$nextTick(() => {
-      this.tableRefScroll()
-    })
+    // this.$nextTick(() => {
+    //   this.tableRefScroll()
+    // })
   },
   methods: {
     // 传入设备状态data  / 给iframe传初始值
@@ -194,44 +193,44 @@ export default {
       } else {
         return ''
       }
-    },
-    // table滚动
-    tableRefScroll() {
-      clearInterval(this.timer) // 清除定时器
-      const table = this.$refs.table // 获取DOM元素
-      const bodyWrapper = table.bodyWrapper // 获取表格中承载数据的div元素
-      this.addTableRefScroll(bodyWrapper)
-      // 鼠标移入
-      bodyWrapper.onmouseover = () => {
-        clearInterval(this.timer)
-      }
-      // 鼠标移出
-      bodyWrapper.onmouseout = () => {
-        this.addTableRefScroll(bodyWrapper)
-      }
-    },
-    addTableRefScroll(bodyWrapper) {
-      let scrollTop = bodyWrapper.scrollTop
-      this.timer = setInterval(() => {
-        scrollTop = bodyWrapper.scrollTop
-        bodyWrapper.scrollTop += 5
-        if (scrollTop === bodyWrapper.scrollTop) {
-          if (this.isScroll) {
-            scrollTop = 0
-            bodyWrapper.scrollTop = 0
-          } else {
-            if (this.flag === 1) {
-              this.currentPage++
-              this.handleSearch() // 函数中需要清楚定时器
-            }
-          }
-        }
-      }, 100)
-    },
-    handleSearch() {
-      // 清楚定时器
-      clearInterval(this.timer)
     }
+    // table滚动
+    // tableRefScroll() {
+    //   clearInterval(this.timer) // 清除定时器
+    //   const table = this.$refs.table // 获取DOM元素
+    //   const bodyWrapper = table.bodyWrapper // 获取表格中承载数据的div元素
+    //   this.addTableRefScroll(bodyWrapper)
+    //   // 鼠标移入
+    //   bodyWrapper.onmouseover = () => {
+    //     clearInterval(this.timer)
+    //   }
+    //   // 鼠标移出
+    //   bodyWrapper.onmouseout = () => {
+    //     this.addTableRefScroll(bodyWrapper)
+    //   }
+    // },
+    // addTableRefScroll(bodyWrapper) {
+    //   let scrollTop = bodyWrapper.scrollTop
+    //   this.timer = setInterval(() => {
+    //     scrollTop = bodyWrapper.scrollTop
+    //     bodyWrapper.scrollTop += 5
+    //     if (scrollTop === bodyWrapper.scrollTop) {
+    //       if (this.isScroll) {
+    //         scrollTop = 0
+    //         bodyWrapper.scrollTop = 0
+    //       } else {
+    //         if (this.flag === 1) {
+    //           this.currentPage++
+    //           this.handleSearch() // 函数中需要清楚定时器
+    //         }
+    //       }
+    //     }
+    //   }, 100)
+    // },
+    // handleSearch() {
+    //   // 清楚定时器
+    //   clearInterval(this.timer)
+    // }
   }
 }
 </script>
@@ -246,5 +245,7 @@ export default {
   height: calc(100%/2 - 10px);
   overflow: hidden;
 }
-
+.container-wrap{
+  margin-bottom: 20px;
+}
 </style>

src/views/storeManage/warehouse3D/data1.json

@@ -78,22 +78,22 @@
     {
       "time":"2022-6-30 13:00",
       "warehouse":"文书档案库房",
-      "warning":"温度温度温度温度温度温度"
+      "warning":"4温度温度温度温度温度温度"
     },
     {
       "time":"2022-6-30 13:00",
       "warehouse":"文书档案库房",
-      "warning":"温度温度温度温度温度温度"
+      "warning":"3温度温度温度温度温度温度"
     },
     {
       "time":"2022-6-30 13:00",
       "warehouse":"文书档案库房",
-      "warning":"温度温度温度温度温度温度"
+      "warning":"2温度温度温度温度温度温度"
     },
     {
       "time":"2022-6-30 13:00",
       "warehouse":"文书档案库房",
-      "warning":"温度温度温度温度温度温度"
+      "warning":"1温度温度温度温度温度温度"
     }
 
   ]

src/views/storeManage/warehouse3D/fullView/index.vue

@@ -14,7 +14,7 @@
         />
       </div>
     </div>
-    <warehouse-warning :width="'458px'" />
+    <warehouse-warning :width="'458px'" :height="'calc(100% - 40px)'" />
   </div>
 </template>