IIoT/src/views/iiot/equipment/alarm.vue

<template>
  <div class="page-wrap">
    <el-row class="tool-bar">
      <el-col :span="12" class="left">
        <div class="content-title">
          报警记录
        </div>
      </el-col>
      <el-col :span="12" class="right">
        <el-input v-model="conditions.goafSensorName" class="search-input m-right-15" placeholder="请输入设备名称">
          <el-button slot="append" icon="el-icon-search" @click="getData()" />
        </el-input>
      </el-col>
    </el-row>
    <div class="tablefilter-wrap">
      <el-dropdown :hide-on-click="false">
        <span class="el-dropdown-link">
          过滤器<i class="el-icon-arrow-down el-icon--right" />
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item>
            <el-checkbox-group v-model="tablefilter" class="tablefilter-column">
              <el-checkbox v-for=" item in tablefilters" :key="item.value" :label="item.value">{{ item.name }}</el-checkbox>
            </el-checkbox-group>
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
    <el-row class="m-top-15">
      <el-table v-loading="listLoading" class="page-table" border fit :data="dataList">
        <el-table-column header-align="center" type="index" label="序号" align="center" width="60" />
        <el-table-column header-align="center" align="center" prop="goafDevName" label="待测设备名称" />
        <el-table-column header-align="center" align="center" prop="goafDevTypename" label="待测设备类型" />
        <el-table-column header-align="center" align="center" prop="goafSensorName" label="传感器名称" />
        <el-table-column v-if="showColumn('goafSensorAlarmType')" header-align="center" align="center" prop="goafSensorAlarmType" label="告警类型" />
        <el-table-column v-if="showColumn('goafSensorAlarmLevel')" header-align="center" align="center" prop="goafSensorAlarmLevel" label="告警级别">
          <template v-slot="{row}">
            <span>{{ row.goafSensorAlarmLevel|filtersLevel }}</span>
          </template>
        </el-table-column>
        <el-table-column v-if="showColumn('frequency')" header-align="center" align="center" label="频率（HZ）">
          <el-table-column
            header-align="center"
            align="center"
            prop="name"
            label="X轴"
            width="80"
          >
            <template v-slot="{row}">
              <span>{{ parseFloat((row.frequencyX/10).toFixed(2)) }}</span>
            </template>
          </el-table-column>
          <el-table-column
            header-align="center"
            align="center"
            prop="name"
            label="Y轴"
            width="80"
          >
            <template v-slot="{row}">
              <span>{{ parseFloat((row.frequencyY/10).toFixed(2)) }}</span>
            </template>
          </el-table-column>
          <el-table-column
            header-align="center"
            align="center"
            prop="name"
            label="Z轴"
            width="80"
          >
            <template v-slot="{row}">
              <span>{{ parseFloat((row.frequencyZ/10).toFixed(2)) }}</span>
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column v-if="showColumn('vel')" header-align="center" align="center" label="速度（mm/s）">
          <el-table-column
            header-align="center"
            align="center"
            prop="name"
            label="X轴"
            width="80"
          >
            <template v-slot="{row}">
              <span>{{ parseFloat((row.velX/100).toFixed(2)) }}</span>
            </template>
          </el-table-column>
          <el-table-column
            header-align="center"
            align="center"
            prop="name"
            label="Y轴"
            width="80"
          >
            <template v-slot="{row}">
              <span>{{ parseFloat((row.velY/100).toFixed(2)) }}</span>
            </template>
          </el-table-column>
          <el-table-column
            header-align="center"
            align="center"
            prop="name"
            label="Z轴"
            width="80"
          >
            <template v-slot="{row}">
              <span>{{ parseFloat((row.velZ/100).toFixed(2)) }}</span>
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column v-if="showColumn('acc')" header-align="center" label="加速度（m/s2）">
          <el-table-column
            header-align="center"
            align="center"
            prop="name"
            label="X轴"
            width="80"
          >
            <template v-slot="{row}">
              <span>{{ parseFloat((row.accX/100).toFixed(2)) }}</span>
            </template>
          </el-table-column>
          <el-table-column
            header-align="center"
            align="center"
            prop="name"
            label="Y轴"
            width="80"
          >
            <template v-slot="{row}">
              <span>{{ parseFloat((row.accY/100).toFixed(2)) }}</span>
            </template>
          </el-table-column>
          <el-table-column
            header-align="center"
            align="center"
            prop="name"
            label="Z轴"
            width="80"
          >
            <template v-slot="{row}">
              <span>{{ parseFloat((row.accZ/100).toFixed(2)) }}</span>
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column v-if="showColumn('dis')" header-align="center" label="位移（um）">
          <el-table-column
            header-align="center"
            align="center"
            prop="name"
            label="X轴"
            width="80"
          >
            <template v-slot="{row}">
              <span>{{ row.disX }}</span>
            </template>
          </el-table-column>
          <el-table-column
            header-align="center"
            align="center"
            prop="name"
            label="Y轴"
            width="80"
          >
            <template v-slot="{row}">
              <span>{{ row.disY }}</span>
            </template>
          </el-table-column>
          <el-table-column
            header-align="center"
            align="center"
            prop="name"
            label="Z轴"
            width="80"
          >
            <template v-slot="{row}">
              <span>{{ row.disZ }}</span>
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column v-if="showColumn('ang')" header-align="center" align="center" label="倾角（°）">
          <el-table-column
            header-align="center"
            align="center"
            prop="name"
            label="X轴"
            width="80"
          >
            <template v-slot="{row}">
              <span>{{ parseFloat((row.angX/100).toFixed(2)) }}</span>
            </template>
          </el-table-column>
          <el-table-column
            header-align="center"
            align="center"
            prop="name"
            label="Y轴"
            width="80"
          >
            <template v-slot="{row}">
              <span>{{ parseFloat((row.angY/100).toFixed(2)) }}</span>
            </template>
          </el-table-column>
          <el-table-column
            header-align="center"
            align="center"
            prop="name"
            label="Z轴"
            width="80"
          >
            <template v-slot="{row}">
              <span>{{ parseFloat((row.angZ/100).toFixed(2)) }}</span>
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column header-align="center" align="center" prop="sensorTemperature" label="温度（℃）">
          <template v-slot="{row}">
            <span>{{ parseFloat((row.sensorTemperature/10).toFixed(2)) }}</span>
          </template>
        </el-table-column>
        <el-table-column v-if="showColumn('goafDatareportTime')" header-align="center" align="center" prop="goafDatareportTime" label="上传时间" />
        <el-table-column label="波形" header-align="center" align="center" min-width="60">
          <template v-slot="{row}">
            <el-button size="mini" type="text" style="color:#1B81FF" @click="showDetail(row)">波形</el-button>
          </template>
        </el-table-column>
        <el-table-column label="整改记录" header-align="center" align="center" min-width="80">
          <template v-slot="{row}">
            <el-button size="mini" type="text" style="color:#1B81FF" @click="showRectifyRecord(row)">查看记录</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination-container" style="float:right;margin-right:40px;">
        <pagination v-show="total>0" :total="total" :page.sync="conditions.page" :limit.sync="conditions.limit" @pagination="getData" />
      </div>
    </el-row>
    <MonitorChartDetail ref="chart-detail" />
    <RectifyRecord ref="rectify-record" />
  </div>
</template>

<script>
import { getWavedata } from '@/api/goaf/sensor'
import { getAlarmByPage } from '@/api/goaf/alarm'
import { Pagination } from '@/components'
import { NumConvertLM } from '@/utils'
import MonitorChartDetail from '@/views/iiot/equipment/components/MonitorChartDetail.vue'
import RectifyRecord from './components/RectifyRecord.vue'
export default {
  components: { Pagination, MonitorChartDetail, RectifyRecord },
  filters: {
    filtersLevel(val) {
      const obj = { 0: '一般', 1: '重大' }
      return obj[val] || '--'
    }
  },
  data() {
    return {
      dataList: [],
      total: 0,
      tablefilters: [
        { name: '告警类型', value: 'goafSensorAlarmType' },
        { name: '告警级别', value: 'goafSensorAlarmLevel' },
        { name: '频率', value: 'frequency' },
        { name: '速度', value: 'vel' },
        { name: '加速度', value: 'acc' },
        { name: '倾角', value: 'ang' },
        { name: '位移', value: 'dis' },
        { name: '上传时间', value: 'goafDatareportTime' }
      ],
      tablefilter: ['frequency', 'vel', 'acc', 'ang', 'dis', 'goafDatareportTime', 'goafSensorAlarmType', 'goafSensorAlarmLevel'],
      listLoading: false,
      conditions: {
        page: 1,
        limit: 10,
        goafSensorName: ''
      }
    }
  },
  created() {
    this.getData()
  },
  methods: {
    // fetch data
    NumConvertLM,
    showColumn(name) {
      return this.tablefilter.includes(name)
    },
    getData() {
      this.listLoading = true
      getAlarmByPage(this.conditions).then((resp) => {
        this.listLoading = false
        const { code, msg, data, total } = resp
        if (code === 0) {
          this.dataList = data
          this.total = total
        } else {
          this.$message.error(msg)
        }
      }).catch((error) => {
        console.log(error)
      })
    },
    showDetail(params) {
      getWavedata(params.goafDataId).then((resp) => {
        const { data } = resp
        const x = data.tdWaveValueX.split(',').map(item => parseFloat((item / 100).toFixed(2)))
        const y = data.tdWaveValueY.split(',').map(item => parseFloat((item / 100).toFixed(2)))
        const z = data.tdWaveValueZ.split(',').map(item => parseFloat((item / 100).toFixed(2)))
        const params = { x, y, z }
        this.$refs['chart-detail'].show(params)
      })
    },
    showRectifyRecord(item) {
      this.$refs['rectify-record'].loadData(item)
    }
  }
}
</script>
  <style lang="scss" scoped>
  ::v-deep{
    .tablefilter-wrap{
      text-align: right;
      padding-top: 10px;
    }
    .tablefilter-column{
          display: flex;
          justify-content: center;
          flex-direction: column;
      }
      .el-dropdown-link {
          cursor: pointer;
          color: #409EFF;
      }
  }
  .page-wrap{
      min-height:90vh;
      padding: 15px;
      background-color: #071A29;
      ::v-deep {
        .el-table thead.is-group th.el-table__cell{
          background-color: #132938;
        }
        .el-table__header-wrapper{
          border-bottom: 1px solid #5994bb;
        }
        .el-table--border th.el-table__cell{
          // border-bottom: 1px solid #5994bb;
          border-right: 1px solid #5994bb;
          border-top: 1px solid #5994bb;
          border-color: #5994bb;
        }
        .el-table.el-table--border  th.el-table__cell.is-leaf, .el-table td.el-table__cell{
          border-right: 1px solid #5994bb;
          border-top: 1px solid #5994bb;
        }
        .el-table.el-table--border {
          border-bottom: 1px solid #5994bb;
          border-left: 1px solid #5994bb;
        }
      }

  }
  </style>