hp-storeroom-system/src/views/components/WarehouseWarning.vue

<template>
  <div class="warehouse-right container-wrap">
    <span class="right-top-line" />
    <span class="left-bottom-line" />
    <h3 class=" table-title" @click="toPage">
      <p class="title-arrow" style="cursor: pointer;">
        <svg-icon icon-class="alerm" class-name="warehouse-svg" />环控实时报警
      </p>
    </h3>
    <!--表格渲染-->
    <el-table ref="table" style="min-width: 100%;" :width="width" :height="height" :data="tableData" class="warehose-el-table" :row-class-name="rowBgColor" @row-click="toPage">
      <el-table-column prop="TS" label="时间" align="center" width="160">
        <template slot-scope="scope">
          <span v-if="scope.row.TS">{{ scope.row.TS | formatTs }}</span>
          <!-- <span v-if="scope.row.TS">{{ scope.row.TS | parseTime }}</span> -->
        </template>
      </el-table-column>
      <el-table-column prop="siteName" label="设备" align="center" :show-overflow-tooltip="true" :width="isScreen ? 112 :''">
        <template slot-scope="scope">
          <!-- siteName = "环境监控.空气净化机" -->
          <span>{{ getDeviceName(scope.row.siteName) }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="value" label="警情" align="center" :show-overflow-tooltip="true" :width="isScreen ? 136 :''" />
    </el-table>
  </div>
</template>
<script>
import alarmApi from '@/api/home/alarm'
import { mapGetters } from 'vuex'
export default {
  name: 'WarehouseWarning',
  props: {
    isScreen: {
      type: Boolean,
      default: false
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '100%'
    },
    storeroomId: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      tableData: [], // 正在展示的警情数据
      scrollTimer: null
    }
  },
  computed: {
    ...mapGetters([
      'roles'
    ])
  },
  watch: {
    // 如果 `tableData` 发生改变，这个函数就会运行
    // tableData: function(newData, oldData) {
    //   this.tableRefScroll()
    // }
  },
  created() {
    this.getAlarmInfo()
  },
  mounted() {
    this.scrollTimer = setInterval(() => {
      this.getAlarmInfo()
    }, 15000)
  },
  destroyed() {
    clearInterval(this.scrollTimer)
    this.scrollTimer = null
  },
  methods: {
    getDeviceName(siteName) {
      if (!siteName) return ''
      const parts = siteName.split('.')
      return parts.length > 1 ? parts[1] : siteName
    },
    toPage() {
      this.$router.push({
        name: 'RunningLog',
        params: {
          locationIndex: 0
        }
      })
      // if (this.roles.includes('admin') || this.roles.includes('RunningLog:list')) {

      // } else {
      //   this.$message({
      //     message: '当前账号没有权限',
      //     type: 'warning'
      //   })
      // }
    },
    // 表格隔行变色
    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.getAlarmInfo()
        }, 15000)
        //  * 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.getAlarmInfo()
          } else {
            bodyWrapper.scrollTop += this.displayNum * 40
          }
          // if (scrollTop === bodyWrapper.scrollTop) {
          //   if (this.isScroll) {
          //     scrollTop = 0
          //     bodyWrapper.scrollTop = 0
          //   } else {
          //     if (this.flag === 1) {
          //       this.currentPage++
          //       this.handleSearch() // 函数中需要清楚定时器
          //     }
          //   }
          // }
        }, 15000)
        //  * this.displayNum
        console.log('this.displayNum', this.displayNum)
      }
    },
    getAlarmInfo() {
      // this.tableData = [{"alarmid": "88347b05","lscid": 1,"WYID":"192.168.99.101:5004_1","Itemlevels":7, "siteName": "环境监控.空气净化机", "TS":"2026/1/6 15:08:56", "id":11955, "isAD":1,"type":0,"IP":" 192.168.99.101:5004 ","name":"串口", "value":"无响应", "dw":"", "ItemClass":3},{"alarmid": "4b232d46","lscid": 1,"WYID":"192.168.99.101:5003_1","Itemlevels":7, "siteName": "环境监控.恒湿净化机", "TS":"2026/1/6 16:13:31", "id":11922, "isAD":1,"type":0,"IP":" 192.168.99.101:5003 ","name":"串口", "value":"无响应", "dw":"", "ItemClass":1},{"alarmid": "3a309a0a","lscid": 9,"WYID":"192.168.99.101:6003_9","Itemlevels":7, "siteName": "环境监控.环控设备监测", "TS":"2026/1/6 16:18:33", "id":12061, "isAD":1,"type":0,"IP":" 192.168.99.101:6003 ","name":"红外感应", "value":"OFF", "dw":"", "ItemClass":3},{"alarmid": "63df6a30","lscid": 1,"WYID":"192.168.99.101:5005_1","Itemlevels":7, "siteName": "环境监控.温湿度传感器", "TS":"2026/1/6 16:19:58", "id":11305, "isAD":1,"type":0,"IP":" 192.168.99.101:5005 ","name":"串口", "value":"无响应", "dw":"", "ItemClass":1}]
      // this.tableData = [
      //   {
      //     'id': 'eb6b8653',
      //     'lscid': 0,
      //     'wyid': '',
      //     'itemLevels': 1,
      //     'siteName': '.环境监控',
      //     'TS': 1765944141000,
      //     'isAd': true,
      //     'type': 0,
      //     'ip': '192.168.99.101:6003',
      //     'name': '开关量',
      //     'value': '设备断线',
      //     'dw': '',
      //     'itemClass': 1
      //   }
      // ]
      // name 6字 说明 7 字
      alarmApi.info({ storeroomId: this.storeroomId }).then((data) => {
        this.tableData = []
        if (data && data.length > 0) {
          // this.tableData.splice(0, data.length, ...data)
          this.tableData = data
        } else {
          this.tableData = []
        }
      })
    }
  }
}
</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;
  }
}
</style>