<template>
  <div class="app-container harmonicReport">
    <!-- 筛选start -->
    <div class="filter-container mb-10">
      <div class="left">
        <div>
          <div class="filter-item">
            设备:
            <el-select
              v-model="region"
              placeholder="请选择"
              style="width: 200px"
            >
              <el-option label="设备一" value="1"></el-option>
              <el-option label="设备二" value="2"></el-option>
            </el-select>
          </div>

          <div class="filter-item">
            日期：
            <el-date-picker
              v-model="value4"
              type="dates"
              placeholder="请选择"
              style="width: 200px"
            >
            </el-date-picker>
          </div>

          <el-button type="primary" class="search-button">搜索</el-button>
        </div>
      </div>
    </div>
    <!-- 筛选end -->
    <el-row :gutter="20" >
      <el-col :md="24" :lg="12">
        <div class="grid-content bg-purple">
          <div class="blanceChartTit">电压不平衡度</div>
          <voltage-chart></voltage-chart>
          <el-divider></el-divider>
          <voltage-chart2></voltage-chart2>
        </div>
      </el-col>
      <el-col :md="24" :lg="12">
        <div class="grid-content bg-purple">
           <div class="blanceChartTit">电流不平衡度</div>
          <electric-chart></electric-chart>
          <el-divider></el-divider>
          <electric-chart2></electric-chart2>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import voltageChart from "./voltageChart";
import voltageChart2 from "./voltageChart2";
import electricChart from "./electricChart";
import electricChart2 from "./electricChart2";

export default {
  name: "VariableList",
  components: {
    voltageChart,
    voltageChart2,
    electricChart,
    electricChart2,
  },

  data() {
    return {
      value4: "请选择",
      number: 1,
      measurType: 1,
      select: 1,
      currentPage4: 4,
      showDialog: false,
      tabPosition: "one",
      input: "",
      region: "",
    };
  },
  methods: {},
};
</script>

<style lang="scss" scoped>
.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>
