<template>
  <div>
    <!-- 筛选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="14">
        <div class="grid-content bg-purple">
          <div class="blanceChartTit">
            <span>电压质量</span>
            <span class="subs">标称电压：380V</span>
          </div>

          <el-row :gutter="20" style="padding: 20px">
            <el-col  :md="24" :lg="8">
              <div
                class="grid-content bg-purple assCard"
                style="text-align: center"
              >
                <div class="subTits">A相电压</div>
                <el-row :gutter="20" style="padding: 0 20px">
                  <el-col :span="12">
                    <div class="grid-content bg-purple assSmallbox">
                      <div class="assNum">0/128</div>
                      <div class="assTxt">超限数/测点数</div>
                    </div>
                  </el-col>
                  <el-col :span="12">
                    <div class="grid-content bg-purple assSmallbox">
                      <div class="assNum greenRate">100%</div>
                      <div class="assTxt">合格率</div>
                    </div>
                  </el-col>
                </el-row>
                <el-button class="banlanceBtn" round type="primary">
                  合格
                </el-button>
                <ul>
                  <li>
                    <div>最大值：234.87V(6.76%)</div>
                    <span>未超限</span>
                  </li>
                  <li>
                    <div>最小值：234.87V(6.76%)</div>
                    <span>未超限</span>
                  </li>
                  <li>
                    <div>平均值：234.87V(6.76%)</div>
                    <span>未超限</span>
                  </li>
                </ul>
              </div>
            </el-col>
            <el-col  :md="24" :lg="8">
              <div
                class="grid-content bg-purple assCard"
                style="text-align: center"
              >
                <div class="subTits">B相电压</div>
                <el-row :gutter="20" style="padding: 0 20px">
                  <el-col :span="12">
                    <div class="grid-content bg-purple assSmallbox">
                      <div class="assNum">0/128</div>
                      <div class="assTxt">超限数/测点数</div>
                    </div>
                  </el-col>
                  <el-col :span="12">
                    <div class="grid-content bg-purple assSmallbox">
                      <div class="assNum greenRate">100%</div>
                      <div class="assTxt">合格率</div>
                    </div>
                  </el-col>
                </el-row>
                <el-button class="banlanceBtn" round type="danger">
                  不合格，会影响设备安全运行
                </el-button>
                <ul>
                  <li>
                    <div>最大值：234.87V(6.76%)</div>
                    <span class="overLimit">超限</span>
                  </li>
                  <li>
                    <div>最小值：234.87V(6.76%)</div>
                    <span>未超限</span>
                  </li>
                  <li>
                    <div>平均值：234.87V(6.76%)</div>
                    <span>未超限</span>
                  </li>
                </ul>
              </div>
            </el-col>
            <el-col  :md="24" :lg="8">
              <div
                class="grid-content bg-purple assCard"
                style="text-align: center"
              >
                <div class="subTits">C相电压</div>
                <el-row :gutter="20" style="padding: 0 20px">
                  <el-col :span="12">
                    <div class="grid-content bg-purple assSmallbox">
                      <div class="assNum">0/128</div>
                      <div class="assTxt">超限数/测点数</div>
                    </div>
                  </el-col>
                  <el-col :span="12">
                    <div class="grid-content bg-purple assSmallbox">
                      <div class="assNum greenRate">100%</div>
                      <div class="assTxt">合格率</div>
                    </div>
                  </el-col>
                </el-row>
                <el-button class="banlanceBtn" round type="primary">
                  合格
                </el-button>
                <ul>
                  <li>
                    <div>最大值：234.87V(6.76%)</div>
                    <span class="overLimit">超限</span>
                  </li>
                  <li>
                    <div>最小值：234.87V(6.76%)</div>
                    <span>未超限</span>
                  </li>
                  <li>
                    <div>平均值：234.87V(6.76%)</div>
                    <span>未超限</span>
                  </li>
                </ul>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-col>
      <el-col  :md="12" :lg="5">
        <div class="grid-content bg-purple">
          <div class="blanceChartTit">
            <span>频率质量</span>
            <span class="subs">标称频率：50Hz</span>
          </div>
          <el-row :gutter="20" style="padding: 20px">
            <el-col :span="24">
              <div
                class="grid-content bg-purple assCard"
                style="text-align: center"
              >
                <div class="subTits">频率</div>
                <el-row :gutter="20" style="padding: 0 20px">
                  <el-col :span="12">
                    <div class="grid-content bg-purple assSmallbox">
                      <div class="assNum">0/128</div>
                      <div class="assTxt">超限数/测点数</div>
                    </div>
                  </el-col>
                  <el-col :span="12">
                    <div class="grid-content bg-purple assSmallbox">
                      <div class="assNum greenRate">100%</div>
                      <div class="assTxt">合格率</div>
                    </div>
                  </el-col>
                </el-row>
                <el-button class="banlanceBtn" round type="primary">
                  合格
                </el-button>
                <ul>
                  <li>
                    <div>最大值：234.87V(6.76%)</div>
                    <span>未超限</span>
                  </li>
                  <li>
                    <div>最小值：234.87V(6.76%)</div>
                    <span>未超限</span>
                  </li>
                  <li>
                    <div>平均值：234.87V(6.76%)</div>
                    <span>未超限</span>
                  </li>
                </ul>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-col>
      <el-col  :md="12" :lg="5">
        <div class="grid-content bg-purple">
          <div class="blanceChartTit">功率因数分析</div>
          <el-row :gutter="20" style="padding: 20px">
            <el-col :span="24">
              <div
                class="grid-content bg-purple assCard"
                style="text-align: center"
              >
                <div class="subTits">功率因数</div>
                <el-row :gutter="20" style="padding: 0 20px">
                  <el-col :span="24" style="margin-bottom: 20px">
                    <div class="grid-content bg-purple assSmallbox">
                      <div class="assNum">0.9</div>
                      <div class="assTxt">考核限值</div>
                    </div>
                  </el-col>
                  <el-col :span="24" style="margin-bottom: 20px">
                    <div class="grid-content bg-purple assSmallbox">
                      <div class="assNum greenRate">-</div>
                      <div class="assTxt">数值</div>
                    </div>
                  </el-col>
                </el-row>
                <el-button class="banlanceBtn" round type="warning">
                  暂无数据
                </el-button>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-col>
    </el-row>

    <el-row :gutter="20" class="mt-20">
      <el-col   :md="24" :lg="14">
        <div class="grid-content bg-purple">
          <div class="blanceChartTit">
            <span>谐波畸变率</span>
            <span class="subs">数值标准</span>
          </div>

          <el-row :gutter="20" style="padding: 20px">
            <el-col :md="24" :lg="8">
              <div
                class="grid-content bg-purple assCard"
                style="text-align: center"
              >
                <div class="subTits">A相电流谐波畸变率</div>
                <img
                  class="noDataImg"
                  src="@/assets/images/noDataImg.png"
                  alt=""
                />
              </div>
            </el-col>
            <el-col :md="24" :lg="8">
              <div
                class="grid-content bg-purple assCard"
                style="text-align: center"
              >
                <div class="subTits">B相电流谐波畸变率</div>
                <el-row :gutter="20" style="padding: 0 20px">
                  <el-col :span="12">
                    <div class="grid-content bg-purple assSmallbox">
                      <div class="assNum">0/128</div>
                      <div class="assTxt">超限数/测点数</div>
                    </div>
                  </el-col>
                  <el-col :span="12">
                    <div class="grid-content bg-purple assSmallbox">
                      <div class="assNum greenRate">100%</div>
                      <div class="assTxt">合格率</div>
                    </div>
                  </el-col>
                </el-row>
                <el-button class="banlanceBtn" round type="danger">
                  不合格，会影响设备安全运行
                </el-button>
                <ul>
                  <li>
                    <div>最大值：234.87V(6.76%)</div>
                    <span class="overLimit">超限</span>
                  </li>
                  <li>
                    <div>最小值：234.87V(6.76%)</div>
                    <span>未超限</span>
                  </li>
                  <li>
                    <div>平均值：234.87V(6.76%)</div>
                    <span>未超限</span>
                  </li>
                </ul>
              </div>
            </el-col>
            <el-col :md="24" :lg="8">
              <div
                class="grid-content bg-purple assCard"
                style="text-align: center"
              >
                <div class="subTits">C相电流谐波畸变率</div>
                <el-row :gutter="20" style="padding: 0 20px">
                  <el-col :span="12">
                    <div class="grid-content bg-purple assSmallbox">
                      <div class="assNum">0/128</div>
                      <div class="assTxt">超限数/测点数</div>
                    </div>
                  </el-col>
                  <el-col :span="12">
                    <div class="grid-content bg-purple assSmallbox">
                      <div class="assNum greenRate">100%</div>
                      <div class="assTxt">合格率</div>
                    </div>
                  </el-col>
                </el-row>
                <el-button class="banlanceBtn" round type="primary">
                  合格
                </el-button>
                <ul>
                  <li>
                    <div>最大值：234.87V(6.76%)</div>
                    <span class="overLimit">超限</span>
                  </li>
                  <li>
                    <div>最小值：234.87V(6.76%)</div>
                    <span>未超限</span>
                  </li>
                  <li>
                    <div>平均值：234.87V(6.76%)</div>
                    <span>未超限</span>
                  </li>
                </ul>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-col>
      <el-col  :md="24" :lg="10">
        <div class="grid-content bg-purple">
          <div class="blanceChartTit">
            <span>不平衡度</span>
            <span class="subs">数值标准</span>
          </div>
          <el-row :gutter="20" style="padding: 20px">
            <el-col :span="12">
              <div
                class="grid-content bg-purple assCard"
                style="text-align: center"
              >
                <div class="subTits">电流不平衡度</div>
                <el-row :gutter="20" style="padding: 0 20px">
                  <el-col :span="12">
                    <div class="grid-content bg-purple assSmallbox">
                      <div class="assNum">0/128</div>
                      <div class="assTxt">超限数/测点数</div>
                    </div>
                  </el-col>
                  <el-col :span="12">
                    <div class="grid-content bg-purple assSmallbox">
                      <div class="assNum greenRate">100%</div>
                      <div class="assTxt">合格率</div>
                    </div>
                  </el-col>
                </el-row>
                <el-button class="banlanceBtn" round type="primary">
                  合格
                </el-button>
                <ul>
                  <li>
                    <div>最大值：234.87V(6.76%)</div>
                    <span>未超限</span>
                  </li>
                  <li>
                    <div>最小值：234.87V(6.76%)</div>
                    <span>未超限</span>
                  </li>
                  <li>
                    <div>平均值：234.87V(6.76%)</div>
                    <span>未超限</span>
                  </li>
                </ul>
              </div>
            </el-col>

            <el-col :span="12">
              <div
                class="grid-content bg-purple assCard"
                style="text-align: center"
              >
                <div class="subTits">电压不平衡度</div>
                <el-row :gutter="20" style="padding: 0 20px">
                  <el-col :span="12">
                    <div class="grid-content bg-purple assSmallbox">
                      <div class="assNum">0/128</div>
                      <div class="assTxt">超限数/测点数</div>
                    </div>
                  </el-col>
                  <el-col :span="12">
                    <div class="grid-content bg-purple assSmallbox">
                      <div class="assNum greenRate">100%</div>
                      <div class="assTxt">合格率</div>
                    </div>
                  </el-col>
                </el-row>
                <el-button class="banlanceBtn" round type="primary">
                  合格
                </el-button>
                <ul>
                  <li>
                    <div>最大值：234.87V(6.76%)</div>
                    <span>未超限</span>
                  </li>
                  <li>
                    <div>最小值：234.87V(6.76%)</div>
                    <span>未超限</span>
                  </li>
                  <li>
                    <div>平均值：234.87V(6.76%)</div>
                    <span>未超限</span>
                  </li>
                </ul>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'LoopReport',

  data() {
    return {
      value4: '请选择',
      number: 1,
      measurType: 1,
      select: 1,
      currentPage4: 4,
      showDialog: false,
      tabPosition: 'one',
      input: '',
      region: '',
    }
  },
  methods: {},
}
</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>