IIoT/src/views/bigScreen/home/components/alertRectifyInfo.vue

<template>
  <div class="item report">
    <div class="title">
      <span class="name">告警整改情况</span>
    </div>
    <div class="container" :style="height?'height:'+height:''">
      <vueSeamlessScroll ref="seamlessScroll" :data="items" :class-option="defaultOption">
        <div class="table-wrap">
          <table>
            <tr class="report-title">
              <td>名称</td>
              <td>未完成</td>
              <td>已完成</td>
              <td>操作</td>
            </tr>
            <tr v-for="(item,index) in items" :key="index" class="report-item">
              <td>{{ parseTime(item.goafSensorAlarmReportTime,'{y}-{m}-{d}') }}告警整改情况</td>
              <td>{{ item.goafSensorAlarmEndNum }}</td>
              <td>{{ item.goafSensorAlarmFinishNum }}</td>
              <td class="handle">
                <span class="edit" @click="handle(item,1)">编辑</span>
                <span class="detail" @click="handle(item,2)">查看</span>
              </td>
            </tr>
          </table>
        </div>
      </vueSeamlessScroll>
      <div class="pagination-warp" style="text-align: right;">
        <el-pagination
          small
          layout="prev, pager, next"
          :total="total"
          :page-size="conditions.limit"
          background
          style="background-color:transparent ;"
          @current-change="changePageNumber"
        />
      </div>
    </div>
    <alertRectifyHand ref="alertRectifyHand" @success="handlesuccess" />
  </div>
</template>
<script>
import { getAlertRectifyInfoByPage } from '@/api/goaf/alarm'
import vueSeamlessScroll from 'vue-seamless-scroll'
import alertRectifyHand from './alertRectifyHand.vue'
import { parseTime } from '@/utils'
export default {
  name: 'AlertRectifyInfo',
  components: {
    vueSeamlessScroll,
    alertRectifyHand
  },
  props: {
    height: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      defaultOption: {
        step: 1, // 数值越大速度滚动越快
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true,
        singleHeight: 0,
        singleWidth: 0,
        waitTime: 1000
      },
      items: [],
      conditions: {
        page: 1,
        limit: 5
      },
      total: 0
    }
  },
  created() {
    this.loadData()
  },
  methods: {
    parseTime,
    dangerStatus(val) {
      const status = ['待提交', '待评审', '待整改', '待验收', '完成']
      return val === -1 ? '撤销' : status[val]
    },
    AlarmLevel(val) {
      const obj = { 0: '一般', 1: '重大' }
      return obj[val] || '--'
    },
    loadData() {
      getAlertRectifyInfoByPage(this.conditions).then((res) => {
        const { data } = res
        this.total = data.totalCount
        this.items = data.list
      })
    },
    handle(data, type) {
      this.$refs['alertRectifyHand'].loadData(data, type)
    },
    handlesuccess() {
      this.loadData()
    },
    changePageNumber(page) {
      this.conditions.page = page
      this.loadData()
    }
  }
}
</script>
  <style lang="scss" scoped>
  .container{
      height: 36vh !important;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding-bottom: 5px;
      box-sizing: border-box;
      .table-wrap{
        table{
          tr td{
            font-size: 8px !important;
            text-align: center;
            &.handle{
                .edit{
                    color: #2AFFFF;
                    padding: 5px;
                }
                .detail{
                    color: #e0dbdb;
                    padding: 5px;
                }
            }
          }
        }
      }
  }
  </style>