<template>
  <div class="">
    <div class="grid-content bg-purple voltagePanel">
      <div class="blanceChartTit">
        <span>电压</span>
        <span class="subs">额定电压：10kV</span>
      </div>
      <div>
        <div class="shangXian" style="">
          <div>下限5.37kv</div>
          <div>上限6.18kV</div>
        </div>
        <div style="padding: 20px; display: flex">
          <div class="uList">
            <p>Ua</p>
            <p>Ub</p>
            <p>Uc</p>
          </div>
          <el-table
            :data="tableData"
            :show-header="false"
            border
            style="width: 100%"
          >
            <el-table-column prop="name" label="进度条">
              <template #default="scope">
                <div class="demo-progress" style="width: 100%">
                  <el-tooltip
                    class="item"
                    effect="dark"
                    :content="scope.row.name+ ' ' + scope.row.date"
                    placement="top"
                  >
                    <el-progress
                      style="width: 100%"
                      :text-inside="true"
                      :stroke-width="14"
                      :percentage="scope.row.pointNum"
                      :status="scope.row.status"
                    />
                  </el-tooltip>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="date" label="日期" width="100px"> </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "VoltagePanel",
  data() {
    return {
      tableData: [
        {
          date: "10.31(kV)",
          name: "Ua",
          pointNum: 60,
          status: "warning",
        },
        {
          date: "0(kV)",
          name: "Ub",
          pointNum: 0,
          status: "exception",
        },
        {
          date: "10.35(kV)",
          name: "Uc",
          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>
