sagacloud-alarm-system-pages/src/views/main/HistoryTable.vue

<template>
  <div class="history-table">
      <div class="my-box">
            <i-Table stripe  :columns="columns1" :data="historyTableData" size="large" @on-sort-change="onSortChange"></i-Table>
            <div style="margin: 10px;overflow: hidden" v-if="historyTableData.length>0">
                <div style="float: right;margin-right:100px;">
                    <Page :total="total" :current="current" :pageSize='pageSize' @on-page-size-change="_nowPageSize"
                     @on-change="changePage">
                    </Page>
                </div>
            </div>
      </div>
      <div class="mask-bg"></div>
     <div id="messageBox" v-if="itemsData">
        <pomp-box :itemsData="itemsData" :detailData='detailData' :emailName='emailName' :messageName='messageName' @onClose="close"></pomp-box>
    </div>
  </div>
</template>

<script>
import pompBox from './PompBox'
// import { formatTime, toHourMinute} from '../../tools/formatTime.js'
import axios from 'axios'
export default {
  components: {
    pompBox
  },

  mixins: [],

  props: ['historyTableData', 'total', 'current', 'pageSize'],

  data () {
    return {
      itemsData: {},
      emailName: [],
      messageName: [],
      detailData: {},
      columns1: [
        {
          title: "重要级别",
          key: "level",
          sortable: 'custom',
          render: (h, params) => {
            const text = params.row.level + '级'
            if (params.row.level == 'S') {
              return h('div', [
                h('img', {
                  attrs: {
                    src: '/static/img/ernomal.png'
                  },
                  style: {
                    marginRight: '5px',
                    verticalAlign: 'middle',
                    marginTop: '-3px'
                  }
                }),
                h('span', {
                  style: {
                    color: '#F08378'
                  }
                }, '' + text)
              ])
            } else if (params.row.level == 'A') {
              return h('div', [
                h('span', {
                  style: {
                    color: '#F08378',
                    marginLeft: '10px'
                  }
                }, '' + text)
              ])
            } else if (params.row.level == 'B') {
              return h('div', [
                h('span', {
                  style: {
                    color: '#F3B767',
                    marginLeft: '10px'
                  }
                }, '' + text)
              ])
            } else {
              return h('div', [
                h('span', {
                  style: {
                    marginLeft: '10px'
                  }
                }, '' + text)
              ])
            }
          }
        },
        {
          title: "报警类型",
          key: "type"

        },
        {
          title: "报警内容",
          key: "content",
          width: 400,
          className: "description-td",
          render: (h, params) => {
            const content = params.row.content ? params.row.content : ""
            if (content) {
              const text1 = content.split("/")[0]
              const text2 = content.split("/")[1]
              return h('div', [
                h('span', {
                  style: {
                    marginRight: '18px'
                  }
                }, text1),
                h('span', {
                  style: {
                    color: "#A6ADB5"
                  }
                }, text2)
              ])
            }
          }
        },
        {
          title: "报警开始时间",
          key: "cTime",
          sortable: 'custom'

        },
        {
          title: "报警持续时间",
          key: "durationT",
          sortable: 'custom',
          align: 'right'
        },
        {
          title: "报警状态",
          key: "status",
          align: 'center',
          render: (h, params) => {
            const status = params.row.status
            if (status == 'alarm') {
              return h('div', [
                h('Button', {
                  props: {
                    type: 'text',
                    size: 'small'
                  },
                  style: {
                    color: '#F08378'
                  }
                }, '未恢复')
              ])
            } else {
              return h('div', [
                h('Button', {
                  props: {
                    type: 'text',
                    size: 'small'
                  },
                  style: {
                    color: '#3BC6A1'
                  }
                }, '已恢复')
              ])
            }
          }
        },
        {
          title: "处理情况",
          key: "deal",
          align: 'center',
          render: (h, params) => {
            const deal = params.row.deal
            const status = params.row.event ? params.row.event.status : ""
            const id = params.row.event ? params.row.event.id : ""
            if (deal == 0) {
              return h('div', [
                h('Button', {
                  props: {
                    size: 'small'
                  },
                  style: {
                    marginRight: '5px',
                    color: '#728DEE',
                    border: '1px solid #728DEE'
                  },
                  on: {
                    click: () => {
                      this.handleClick(params.row)
                    }
                  }
                }, '需手动处理')
              ])
            }
            if (deal == 1) {
              const text = '工单状态：' + status + '工单编号:' + id
              return h('div', [
                h('img', {
                  attrs: {
                    src: '/static/img/bill.png'
                  },
                  style: {
                    marginRight: '5px',
                    verticalAlign: 'middle'
                  }
                }),
                h('span', {
                  style: {
                    marginRight: '5px',
                    color: '#6D747C',
                    cursor: 'pointer'
                  },
                  on: {
                    click: () => {
                      this.handleClick(params.row)
                    }
                  }
                }, text)
              ])
            }
            if (deal == 2) {
              const text = '事件状态：' + status + '事件编号：' + id
              return h('div', [
                h('img', {
                  attrs: {
                    src: '/static/img/event.png'
                  },
                  style: {
                    marginRight: '5px',
                    verticalAlign: 'middle'
                  }
                }),
                h('span', {
                  style: {
                    marginRight: '5px',
                    color: '#6D747C',
                    cursor: 'pointer'
                  },
                  on: {
                    click: () => {
                      this.handleClick(params.row)
                    }
                  }
                }, text)
              ])
            }
            if (deal == 3) {
              const text = '上级线路已断，此条自动隐藏'
              return h('div', [
                h('span', {
                  style: {
                    marginRight: '5px',
                    color: '#6D747C',
                    cursor: 'pointer'
                  },
                  on: {
                    click: () => {
                      this.handleClick(params.row)
                    }
                  }
                }, text)
              ])
            }
          }
        }
      ]
    }
  },

  computed: {

  },

  mounted () {

  },

  methods: {
    // iview的排序
    onSortChange (col) {
      this.$emit('setSort', col)
    },
    // 每页显示的数据条数
    _nowPageSize (index) {
      // 实时获取当前需要显示的条数
      this.pageSize = index
    },
    changePage (index) {
      this.$emit('changeCurrentPage', index)
    },
    handleClick (row) {
      document.querySelector('.mask-bg').style.display = 'block'
      document.querySelector('#messageBox').style.display = 'block'
      this.itemsData = row
      this.getEamilInfo(row)
    },
    getEamilInfo (row) {
      let params = {
        id: row.id
      }
      axios.post(`/alarm-system/alarm-system/alarm/detail/query?projectId=${this.$store.state.projId}&secret=${this.$store.state.secret}`, params).then(res => {
        let data = res.data
        if (data.Result == 'success') {
          this.detailData = data.Content
          if (data.Content && data.Content.notification) {
            let emailName = data.Content.notification.mail ? data.Content.notification.mail : []
            let messageName = data.Content.notification.message ? data.Content.notification.message : []
            this.emailName = []
            if (emailName.length > 0) {
              emailName.forEach(el => {
                this.emailName.push(el.name)
              })
            }

            this.messageName = []
            if (messageName.length > 0) {
              messageName.forEach(el => {
                this.messageName.push(el.name)
              })
            } else {
              this.messageName = []
              this.emailName = []
            }
          }
        }
      })
    },
    close () {
      document.querySelector('.mask-bg').style.display = 'none'
      document.querySelector('#messageBox').style.display = 'none'
    }
  }

}
</script>

<style scoped lang="less" >
.history-table {
    .my-box{
       padding: 0 20px 20px 24px;
       background: #fff;
    }
    .mask-bg {
      position: fixed;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      z-index: 99;
      background:rgba(0, 0, 0, .6);
      display: none;
    }
    #messageBox{
      width: 747px;
      height: 630px;
      background: #fff;
      box-shadow: 0 2px 8px 0 rgba(0,0,0,0.12);
      border-radius: 4px;
      z-index: 999;
      position: fixed;
      top: 70px;
      left: 50%;
      margin-left: -360px;
      display: none;
    }
}
</style>
<style lang="less">
.history-table{
    .ivu-table-wrapper {
    border: none;
  }
  .ivu-table td,
  .ivu-table th {
    border: none;
  }
  .ivu-table:before{
      height: 0;
  }
  .ivu-table:after{
      width:0;
  }
  .ivu-table-row .description-td>.ivu-table-cell>span{
        // overflow: hidden;
        // text-overflow: ellipsis;
        // white-space: nowrap;
        max-height: 100px;
        display: inline-block;
    }
}

</style>