<template>
  <div>
     <!-- 筛选start -->
    <div class="filter-container">
      <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>
          <el-button type="primary" class="search-button">搜索</el-button>
        </div>
      </div>
       <div class="right descIcon">
        <img src="@/assets/images/descIcon.png" alt=""  >
        指标说明
      </div>
    </div>
    <!-- 筛选end -->
    

    
    <el-row :gutter="20" class="mt-20">

      <!-- 三项不平衡度 -->
      <el-col   :md="24" :lg="8" >
        <div class="grid-content bg-purple loopUnbanlancePanel">
          <div class="blanceChartTit">
            <span>三项不平衡度</span>
          </div>
          <el-row :gutter="20" style="padding: 20px; border-bottom: 1px solid #d3dce6;" >
            <el-col :span="12"  class="loopUnbanlanceCard">
              <div
                class="grid-content "
                style="text-align: center" >
                 <loop-radarChart></loop-radarChart>
                </div>
            </el-col>
            <el-col :span="12" class="loopUnbanlanceCard">
              <div style="width:90%;background:#1187FF;margin:0px auto;text-align:center;color:#fff;padding:10px 0px">
                <div class="mb-10">电压不平衡度</div>
                <div>100%</div>
              </div>
              <ul>
                <li>
                 <div>A相电压</div>
                 <div>
                   <div class="mb-5">幅值:9.72A</div>
                   <div>相角:-</div>
                 </div>
                </li>
                <li>
                 <div>A相电压</div>
                 <div>
                   <div class="mb-5">幅值:9.72A</div>
                   <div>相角:-</div>
                 </div>
                </li>
                <li>
                 <div>A相电压</div>
                 <div>
                   <div class="mb-5">幅值:9.72A</div>
                   <div>相角:-</div>
                 </div>
                </li>
              </ul>
            </el-col>
          </el-row>

          <el-row :gutter="20" style="padding: 20px; border-bottom: 1px solid #d3dce6;" >
            <el-col :span="12" class="loopUnbanlanceCard">
              <div
                class="grid-content "
                style="text-align: center" >
                 <loop-radarChart></loop-radarChart>
                </div>
            </el-col>
            <el-col :span="12" class="loopUnbanlanceCard">
              <div style="width:90%;background:#1187FF;margin:0px auto;text-align:center;color:#fff;padding:10px 0px">
                <div class="mb-10">电流不平衡度</div>
                <div>100%</div>
              </div>
              <ul>
                <li>
                 <div>A相电压</div>
                 <div>
                   <div class="mb-5">幅值:9.72A</div>
                   <div>相角:-</div>
                 </div>
                </li>
                <li>
                 <div>A相电压</div>
                 <div>
                   <div class="mb-5">幅值:9.72A</div>
                   <div>相角:-</div>
                 </div>
                </li>
                <li>
                 <div>A相电压</div>
                 <div>
                   <div class="mb-5">幅值:9.72A</div>
                   <div>相角:-</div>
                 </div>
                </li>
              </ul>
            </el-col>
          </el-row>


        </div>
      </el-col>
       <!-- 三项不平衡度 end -->

      <!-- 谐波 -->
      <el-col  :md="24" :lg="16">
        <harmonic-panel></harmonic-panel>
      </el-col>
       <!-- 谐波 end -->
    </el-row>


    <el-row :gutter="20" class="mt-20">

     <!-- 电压start -->
      <el-col :md="24" :lg="8" class="mb-20">
         <voltage-panel></voltage-panel>
      </el-col>
      <!-- 电压end -->

      <!-- 频率 start-->
      <el-col :md="24" :lg="8" class="mb-20">
        <frequency-panel></frequency-panel>   
      </el-col>
      <!-- 频率 end -->

      <!-- 有功功率 -->
      <el-col :md="24" :lg="8">
        <power-panel></power-panel>
      </el-col>
       <!-- 有功功率 end -->
  
    </el-row>
    
  </div>
 
</template>

<script> 
import loopRadarChart from "./loopMonitorComponent/loopRadarChart";

import harmonicPanel from "./loopMonitorComponent/harmonicPanel";
import voltagePanel from "./loopMonitorComponent/voltagePanel";
import frequencyPanel from "./loopMonitorComponent/frequencyPanel";
import powerPanel from "./loopMonitorComponent/powerPanel";
export default {
   components: { loopRadarChart,harmonicPanel,voltagePanel,frequencyPanel,powerPanel },
  name: "LoopMonitor",
 
  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>