<template>
  <div class="">
    <div class="grid-content bg-purple frequencyPanel">
      <div class="blanceChartTit">
        <span>频率</span>
      </div>
      <div style="padding: 30px">
        <div class="frequencyTit">当前频率 50.03hZ</div>
        <div class="frequencyTit2">
          频率偏差
          <span>0.06%</span>
        </div>
        <el-row class="mt-40 frequencyBox">
          <el-col :span="2"><div class="grid-content bg-purple"></div></el-col>
          <el-col :span="5"
            ><div class="grid-content bg-purple-light"></div
          ></el-col>
          <el-col class="rightSplitRed" :span="5">
            <div class="grid-content bg-purple">
              <el-tooltip
                class="item"
                effect="dark"
                content="50.02 Hz"
                placement="right"
              >
                <div class="rightSplitRedInner"></div>
              </el-tooltip>
              
            </div>
            <i class="el-icon-caret-top"></i>
            <div class="greenShadow"></div>
          </el-col>
          <el-col :span="5"
            ><div class="grid-content bg-purple-light"></div
          ></el-col>
          <el-col :span="5"
            ><div class="grid-content bg-purple-light"></div
          ></el-col>
          <el-col :span="2"><div class="grid-content bg-purple"></div></el-col>
        </el-row>
        <el-row class="mt-20" style="text-align: right">
          <el-col :span="2">49</el-col>
          <el-col :span="5">49.5</el-col>
          <el-col :span="5">50</el-col>
          <el-col :span="5">50.5</el-col>
          <el-col :span="5">51</el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "WorkPanel",
  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>
