<template>
  <div id="bVCenter">
<!--    <icon name="chart-line" class="text-icon"></icon>-->
<!--    <span class="text">设备振动实时数据</span>-->
    <div class="body-box">
      <p slot="title" class="text">设备振动实时数据</p>
      <Table stripe :row-class-name="rowClassName" max-height="290" :columns="config.columns" :data="config.data"></Table>
      <!--      <dv-scroll-board  :config="config"/>-->

    </div>
  </div>
</template>

<script>
import {getAction} from "@api/manage";

export default {

  // data() {
  //   return {
    //   config: {
    //     header: ['设备名称','采集时间','x向加速度(m/s²)','y向加速度(m/s²)','z向加速度(m/s²)','x向速度(mm/s)','y向速度(mm/s)','z向速度(mm/s)','x向位移(um)','y向位移(um)','z向位移(um)','温度(℃)'],
    //     data: [],
    //     rowNum: 7, //表格行数
    //     headerHeight: 45,
    //     headerBGC: '#f0f2f3', //表头
    //     oddRowBGC: '#f1f1f1', //奇数行
    //     evenRowBGC: '#ffffff', //偶数行
    //     index: false,
    //     columnWidth: [220,160,130,130,130,130,130,130,130,130,130,80],
    //     align: ['center','center','center','center','center','center','center','center','center','center','center','left'],
    //     waitTime:31536000000,
    //   },
    //   url: {
    //     getBuVibrationData: "/energy/buVibration/getBuVibrationData",
    //   },
    // }
  // },
  // mounted () {
  //   let that = this
  //   that.get()
  //   // 定时请求数据
  //   this.timer = setInterval(this.get, 1000 * 60 * 10)
  // },
  data() {
    return {
      config: {
        rowStyleOption: {
          // stripe: true,
        },
        columns: [
          {
            key: "deviceName",
            title: "设备名称",
            width: 220,
            align: "center",
          },
          {
            key: "createTime",
            title: "采集时间",
            width: 160,
            align: "center",
          },
          {
            key: "accX",
            title: "x向加速度(m/s²)",
            width: 125,
            align: "center",
          },
          {
            key: "accY",
            title: "y向加速度(m/s²)",
            width: 125,
            align: "center",
          },
          {
            key: "accZ",
            title: "z向加速度(m/s²)",
            width: 125,
            align: "center",
          },
          {
            key: "speedX",
            title: "x向速度(mm/s)",
            width: 120,
            align: "center",
          },
          {
            key: "speedY",
            title: "y向速度(mm/s)",
            width: 120,
            align: "center",
          },
          {
            key: "speedZ",
            title: "z向速度(mm/s)",
            width: 120,
            align: "center",
          },
          {
            key: "displacementX",
            title: "x向位移(um)",
            width: 115,
            align: "center",
          },
          {
            key: "displacementY",
            title: "y向位移(um)",
            width: 115,
            align: "center",
          },
          {
            key: "displacementZ",
            title: "z向位移(um)",
            width: 115,
            align: "center",
          },
          {
            key: "temperature",
            title: "温度(℃)",
            // width: 80,
            align: "center",
          },
          {
            key: "voltage",
            title: "电池电压(V)",
            // width: 80,
            align: "center",
          },
        ],
        data: [],
      },

      url: {
        getBuVibrationData: "/energy/buVibration/getBuVibrationData",
      },
    };
  },
  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.getBuVibrationData, {}, 'get').then((res) => {
        if(res.result.length>0){
          this.config.data = res.result
          this.config = { ...this.config }
          this.$emit('vTransmit', true)
        }else {
          this.$emit('vTransmit', false)
        }
      })
    }
  },
  beforeDestroy () {
    clearInterval(this.timer)
  }
}
</script>

<style lang="scss">
//$box-height: 400px;
//$box-width: calc(100%);
#bVCenter {
  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}

  .ivu-table-cell {
    padding-left: 0px;
    padding-right: 0px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    word-break: break-all;
    box-sizing: border-box;
  }





  //padding: 5px;
  ////height: 400px;
  ////width: calc(100%);
  //border-radius: 5px;
  //.bg-color-black {
  //  height: 400px - 10px;
  //  border-radius: 5px;
  //}
  //.text {
  //  color: #000000;
  //  font-size: 16px;
  //  font-weight:bold;
  //}
  //.header{
  //  height: 45px;
  //  font-size: 15px;
  //}
  //.body-box {
  //  border-radius: 5px;
  //  overflow: hidden;
  //  .dv-scroll-board {
  //    width: 100%;
  //    height: 340px;
  //    color: #0a0000;
  //  }
  //}
  //.rows {
  //  overflow-y: auto; /* 允许垂直滚动 */
  //  position: relative; /* 确保滚动条定位正确 */
  //}
  //.rows::-webkit-scrollbar {
  //  width: 10px; /* 滚动条宽度 */
  //}
  //
  //.rows::-webkit-scrollbar-track {
  //  background: #f1f1f1; /* 滚动条轨道背景色 */
  //}
  //
  //.rows::-webkit-scrollbar-thumb {
  //  background: #888; /* 滚动条滑块背景色 */
  //  border-radius: 5px; /* 滑块边角半径 */
  //}
  //
  //.rows::-webkit-scrollbar-thumb:hover {
  //  background: #555; /* 滑块鼠标悬停时背景色 */
  //}
}


</style>
