<template>
  <div class="">
    <div class="grid-content bg-purple powerPanel">
      <div class="blanceChartTit">
        <span>有功功率和无功功率</span>
      </div>
      <div style="padding: 70px 20px ">
        <div style="display: flex">
          <div class="uList">
            <p>有功功率</p>
            <p>无功功率</p>
          </div>
          <el-table
            :data="tableData"
            :show-header="false"
            border
            style="width: 80%"
          >
            <el-table-column prop="name" label="进度条">
              <template #default="scope">
                <div class="demo-progress" >

                   <el-tooltip
                    class="item"
                    effect="dark"
                    :content="scope.row.name+ ' ' + scope.row.date"
                    placement="top"
                  >
                    <el-progress
                    :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="100"> </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "PowerPanel",
  data() {
    return {
         tableData: [
        {
          date: "10.31(kV)",
          name: "有功功率",
          pointNum: 60,
          status: "warning",
        },
        {
          date: "0(kV)",
          name: "无功功率",
          pointNum: 0,
          status: "exception",
        },
      ],
    };
  },
};
</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>
