<template> <div class="flowTable"> <div class="success_info_body" v-show="showFlag"> <!-- 参数名称、列数根据实际情况调整 --> <div class="table_body"> <div class="table_th"> <div class="tr1 th_style">危险级别</div> <div class="tr2 th_style">事件描述</div> <div class="tr1 th_style">事件状态</div> <div class="tr2 th_style">事件类别</div> <div class="tr4 th_style">发生时间</div> <div class="tr5 th_style">事件照片</div> </div> <div class="table_main_body"> <div class="table_inner_body" :style="{top: tableTop + 'px'}"> <div v-for="(item,index) in tableList" class="table_tr" :class="checkCell(item,index)" :key="index" @click="JumpDevice(item)"> <div class="tr1 tr">{{item.levelName}}</div> <div class="tr2 tr">{{item.description}}</div> <div class="tr1 tr">{{item.statusName}}</div> <div class="tr2 tr">{{item.typeName}}</div> <div class="tr4 tr">{{item.happenTime}}</div> <div class="tr5 tr"> <img :src="item.eventPicture ? `${item.eventPicture}`: defaultPhoto" width="40px" height="40px" style="margin-left: 5px" @error="errorImg" @click="isbig=true;picurl=item.eventPicture ? `${item.eventPicture}`: defaultPhoto"> </div> </div> </div> </div> </div> </div> <el-image class="bottom-big-pic" :src="picurl" v-if="isbig" @error="errorImg" @click="isbig=false"/> </div> </template> <script> import { getCaseListPage } from '@/api/case' import { repostSocket } from '@/api/common' export default { name: 'CaseTable', components: {}, data() { return { picurl: '', defaultPhoto: require('@/assets/global_images/photo_error.png'), errorImg: require('@/assets/global_images/photo_error.png'), showFlag: true, tableTimer: null, tableTop: 0, isbig: false, tableList: [], tableListSize: 0, componentTimer: null, visibleSize: 5, // 容器内可视最大完整行数 lineHeight: 45, // 每行的实际高度(包含margin-top/bottom,border等) componentTimerInterval: 3600000, // 刷新数据的时间间隔 tableTimerInterval: 50 // 向上滚动 1px 所需要的时间,越小越快,推荐值 100 } }, // 如果没有父元素传值,将watch内的内容搬至mounted中即可 props: ['activeFactoryId'], watch: { activeFactoryId(val, oldVal) { clearInterval(this.componentTimer) this.fetchData() this.componentTimerFun() } }, mounted() { clearInterval(this.tableTimer) this.fetchData() }, beforeDestroy() { clearInterval(this.componentTimer) clearInterval(this.tableTimer) }, methods: { checkCell(val, index) { if (val.statusName === '未解决' || val.statusName === '解决中') { switch (val.levelName) { case '重大': return 'hard-state' case '较大': return 'medium-state' default: return 'low-state' } } else if (index % 2 === 1) { return 'table_tr1' } return '' }, JumpDevice(item) { const params = { type: 'force', message: item.drawNo } repostSocket(params).then(response => { if (response.code === 200) { } }) }, fetchData() { this.picurl = '' this.isbig = false getCaseListPage({ offset: 1, limit: 15 }).then(response => { if (response.code === 200) { this.tableList = response.data.rows this.tableActionFun() } }) // this.tableList = [ // { // id: '', // drawNo: 'YQ-001', // levelName: '一般', // description: '保安脱岗', // status: '0', // statusName: '未解决', // typeName: '临时事件', // devName: '视频监控摄像机5', // positionName: '一期主楼', // areaName: '3F', // isKeyAreaName: '否', // detailLocation: '详细位置', // happenTime: '2022-05-06 21:55:00' // } // ] }, tableActionFun() { this.tableListSize = this.tableList.length if (this.tableListSize > this.visibleSize) { this.tableList = this.tableList.concat(this.tableList) this.tableTimerFun() } else { this.fillTableList() } }, // 当数据过少时,不触发自动轮播事件,并填充没有数据的行,参数根据实际情况修改即可 fillTableList() { var addLength = this.visibleSize - this.tableListSize for (var i = 0; i < addLength; i++) { this.tableList.push({ planNo: '-', type: '-', startDate: '-', endDate: '-', process: '-' }) } }, tableTimerFun() { var count = 0 this.tableTimer = setInterval(() => { if (count < (this.tableList.length / 2) * this.lineHeight) { this.tableTop -= 1 count++ } else { count = 0 this.tableTop = 0 } }, this.tableTimerInterval) }, componentTimerFun() { this.componentTimer = setInterval(() => { this.fetchData() }, this.componentTimerInterval) } } } </script> <style rel="stylesheet/scss" lang="scss" scoped> .flowTable { width: 100%; height: 150px; padding: 0px 10px; } .table_body { width: 100%; margin-top: 0px; } .table_th { width: 100%; display: flex; height: 15px; line-height: 15px; } .tr { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; box-sizing: border-box; padding: 0 5px; text-align: center; font-size: 13px; } .tr1 { width: 13%; } .tr2 { width: 18%; } .tr3 { width: 15%; font-size: 13px; } .tr4 { flex: 1; } .tr5 { width: 100px; } .th_style { color: #b8dffd; font-size: 13px; font-weight: bold; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; box-sizing: border-box; text-align: center; } .table_main_body { width: 100%; height: 155px; overflow: hidden; position: relative; margin-top: 5px; } .table_inner_body { width: 100%; position: absolute; left: 0; color: #cce9ff; } .table_tr { display: flex; font-size: 13px; border: 1px solid rgb(71, 160, 199); margin-top: 2px; height: 40px; line-height: 40px; cursor: pointer; :hover{ background: rgba(255, 153, 51, 0.6); } } .hard-state{ background:red; } .medium-state{ background: #ea9700; } .low-state{ background: #646464; } .table_tr0 { background: rgba(3, 145, 167, 0.1); } .table_tr1 { background: rgb(64, 87, 120); } .bottom-big-pic{ position: fixed; bottom: 10px; left: calc( 50% - 380px); height: 220px; z-index: 999999999; } </style>