
<template>
  <div style="width: 100%;padding-bottom: 1.75%;">
    <div style="width: 100%">
      <div class="tuCollapse">
        <!--<span style="color: white;">通道断开日志</span>-->
        <div style="margin: 0 auto;border-radius: 8px;display: ''" ref="table">
          <div class="tableBox">
            <vxe-table
              ref="sTable"
              border="inner"
              class="mytable"
              height="400px"
              show-overflow
              auto-resize
              :data="channelDisconLogList">
              <vxe-table-column field="channelName" title="通道名称"></vxe-table-column>
              <vxe-table-column field="disconnectTime"  title="断开时间" :formatter="dateFormat"></vxe-table-column>
              <vxe-table-column field="reconnectTime" title="重连时间" :formatter="dateFormat"></vxe-table-column>
              <vxe-table-column field="duration" title="断开时长" ></vxe-table-column>
            </vxe-table>
          </div>
      </div>

      </div>
    </div>

  </div>
</template>

<script>
export default {
  name: 'Leftcharts',
  data() {
    return {
      channelDisconLogList: [],
      timer:''
    }
  },
  destroyed() {
    // console.log("销毁通道日志页面")
    clearInterval(this.timer)
    this.timer = ''
  },
  mounted() {
    this.getChannelDisconLog()
    this.timer = setInterval(this.getChannelDisconLog, 1000 * 60)
  },
  methods: {
    getChannelDisconLog() {
      this.$axios.get('/dashboard/getChannelDisconLog').then(res => {
        this.channelDisconLogList = res.data
        // console.log(res.data)
      }).catch(error=>{
        this.$message.error("获取预测曲线异常："+error)
      })
    },
    dateFormat({ cellValue, row, column }) {
      return this.$XEUtils.toDateString(cellValue, 'yyyy-MM-dd HH:mm:ss')
    }
  }
}
</script>

<style>
  .tuCollapse .collapse-title {
    flex: 1 0 90%;
    order: 1;
  }
  .tableBox{
    width: 100%;
    padding-left: 0.5%;
  }
  .tuCollapse{
    margin-left: 1%;
    width: 98%;
  }
  .tuCollapse .el-collapse-item__wrap{
    will-change: height;
    background-color: #061f3e;
    overflow: hidden;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border-bottom: 1px solid #061f3e;
  }
  .tuCollapse .el-collapse-item__content{
    padding: 0px;
    font-size: 13px;
    color: white;
    background-color: #061f3e;
    line-height: 1.769230769230769;
  }
  .tuCollapse .el-collapse-item__header{
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    height: 38px;
    line-height: 38px;
    background-color: #061f3e;
    color: white;
    cursor: pointer;
    border: 1px solid #061f3e;
    font-size: 13px;
    font-weight: 500;
    -webkit-transition: border-bottom-color .3s;
    transition: border-bottom-color .3s;
    outline: 0;
    flex: 1 0 auto;
    order: -1;
  }
  .tableBox .vxe-table--main-wrapper {
    background-color: #061f3e !important;
    font-size: 14px;
  }
  .tableBox .vxe-table .vxe-table--body-wrapper, .tableBox .vxe-table .vxe-table--footer-wrapper, .tableBox .vxe-table .vxe-table--header-wrapper{
    background-color: #061f3e !important;
    position: relative;
  }
  .tableBox tr {
    background-color: #061f3e !important;
    color: #00B4DC !important;
    border: 1px solid #ffffff;
  }
</style>
