<template>
  <div id="bKCenter">
<!--    <icon name="chart-line" class="text-icon"></icon>-->
<!--    <span class="text">地坑环境实时数据</span>-->
    <div class="body-box" >
      <p slot="title" class="text">流量传感器实时数据</p>
      <Table  :row-class-name="rowClassName" max-height="290" :columns="config.columns" :data="config.data" :border="false"></Table>
<!--      <dv-scroll-board  :config="config" />-->
    </div>
  </div>
</template>

<script>
import {getAction} from "@api/manage";
import '@/assets/less/TableExpand.less'
export default {
  data() {
    return {
      rowStyleOption: {
        stripe: true,
      },
      config:{
        columns: [
          {
            key: "deviceName",
            title: "设备名称",
            width: 230,
            align: "center",
          },
          {
            key: "createTime",
            title: "采集时间",
            width: 180,
            align: "center",
          },
          {
            key: "discharge",
            title: "流量(m³/s)",
            // width: 150,
            align: "center",
          },
          {
            key: "flowspeed",
            title: "流速(m/s)",
            // width: 150,
            align: "center",
          },
          {
            key: "flowrate",
            title: "累计流量(m³)",
            // width: 150,
            align: "center",
          },
        ],
        data: [],
      },

      url: {
        getFlowData: "/energy/buFlowOnline/getFlowData",
      },
    };
  },
  created() {
    this.get()
  },
  methods: {
    rowClassName (row, index) {
      if (index %2) {
        return 'demo-table-error-row';
      } else{
        return 'demo-table-info-row';
      }
      return '';
    },
    get(){
        getAction(this.url.getFlowData, {}, 'get').then((res) => {
          if(res.result.length>0){
            debugger
            this.config.data = res.result
            this.config = { ...this.config }
            this.$emit('FTransmit', true)
          }else {
            this.$emit('FTransmit', false)
          }
        })
    }
  },
  // beforeDestroy() {
  //   clearInterval(this.timer)
  // }
}
</script>

<style lang="scss">
#bKCenter {
  padding: 5px;
  .ivu-table .demo-table-info-row td{
    background-color: #ffffff;
    height: 40px;
    color: #000000;
    font-size: 14px;
    border: #f1f1f1;
  }
  .ivu-table .demo-table-error-row td{
    background-color: #f1f1f1;
    height: 40px;
    color: #000000;
    font-size: 14px;
    border: #f1f1f1;
  }
  .ivu-table th {
    height: 40px;
    font-size: 15px;
    background-color: #f0f2f3;
  }
  .ivu-table-header th {
    font-weight: normal;
    color: #000000;
    font-family: 'Arial', sans-serif;
  }
  .text {
    color: #000000;
    font-size: 16px;
    font-weight:bold;
    margin-top: 0;
    margin-bottom: 0;
    //text-align: center;
  }
  .ivu-table-wrapper {
    border: none;
    border-radius: 6px;
    padding-top: 5px;
  }
  .ivu-table:before{content:'';width:100%;height:0px;position:absolute;left:0;bottom:0;z-index:1}
  .ivu-table:after{content:'';width:0px;height:100%;position:absolute;top:0;right:0;z-index:3}

}


</style>
