fiveFollowing-admin/src/views/powerQuality/realTimeMonitoring/loopMonitorComponent/frequencyPanel.vue

<template>
  <div>
      <div class="grid-content bg-purple">
          <div class="blanceChartTit">
            <span>频率</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>
  </div>
</template>
<script>
export default {
  name: "FrenquencyPanel",
  data() {
    return {
      tableData: [
        {
          date: "10.31(kV)",
          name: "Tom",
          pointNum: 60,
          status: "warning",
        },
        {
          date: "0(kV)",
          name: "Tom2",
          pointNum: 0,
          status: "exception",
        },
        {
          date: "10.35(kV)",
          name: "Tom",
          pointNum: 70,
        },
      ],
    };
  },
};
</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>