<template>
  <div class="">
    <div class="grid-content bg-purple loopHarmonicPanel">
      <div class="blanceChartTit">
        <span>谐波</span>
      </div>

      <div style="text-align: center; margin-top: 20px">
        <el-button
          class="search-button timeTab"
          @click="num = 0"
          :type="num == 0 ? 'primary' : ''"
          >含量</el-button
        >
        <el-button
          class="search-button timeTab"
          @click="num = 1"
          :type="num == 1 ? 'primary' : ''"
          style="margin-left: 0 !important; margin-right: 20px"
          >有效值</el-button
        >
      </div>
      <div class="harmonicCard" style="border-bottom: 1px solid #d3dce6">
        <div style="text-align: center; margin-top:20px">电压谐波 / %</div>
        <loopLine-Chart></loopLine-Chart>
      </div>
      <div class="harmonicCard">
        <div style="text-align: center; margin-top:20px">电压谐波 / %</div>
        <loopLine-Chart></loopLine-Chart>
      </div>
    </div>
  </div>
</template>
<script>
import loopLineChart from "./loopLineChart";
export default {
  components: { loopLineChart },
  name: "HarmonicPanel",
  data() {
    return {
      num: 0,
      tableData: [
        {
          date: "10.31(kV)",
          name: "Tom",
          pointNum: 60,
          status: "warning",
        },
        {
          date: "0(kV)",
          name: "Tom2",
          pointNum: 0,
          status: "exception",
        },
      ],
    };
  },
};
</script>
<style scoped lang="scss">
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  border: 1px solid #99a9bf;
}
.bg-purple {
  border: 1px solid #d3dce6;
}
.bg-purple-light {
  border: 1px solid #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  border: 1px solid #f9fafc;
}
</style>
