<template>
  <div class="powerdist">
    <div class="powerdist-header">
      <div>室内环境</div>
      <div class="powerdist-env">
        <div>
          <img src="@/assets/images/mgr/temperature.svg" alt="">
          <span>温度：62.5°C</span>
        </div>
        <div>
          <img src="@/assets/images/mgr/humidity.svg" alt="">
          <span>湿度：77.88RH</span>
        </div>
        <div>
          <img src="@/assets/images/mgr/smoke.svg" alt="">
          <span>烟感：正常</span>
        </div>
        <div>
          <img src="@/assets/images/mgr/water.svg" alt="">
          <span>水侵：正常</span>
        </div>
      </div>
    </div>
    <div class="powerdist-body">
      <Panel title="变压器">
        <div class="transformer">
          <el-select v-model="transformer" size="mini">
            <el-option label="变压器1" :value="1"></el-option>
            <el-option label="变压器2" :value="2"></el-option>
            <el-option label="变压器3" :value="3"></el-option>
          </el-select>
          <div class="transformer-info">
            <div class="info-header">
              <span>A相</span>
              <span>B相</span>
              <span>C相</span>
            </div>
            <div class="arrowImg">
              <span>10kV</span>
              <img src="@/assets/images/mgr/arrow.svg" alt="">
            </div>
            <img class="transformerImg" src="@/assets/images/mgr/transformer.svg" alt="">
            <div class="info-right">
              <div>
                <img src="@/assets/images/mgr/temperature.svg" alt="">
                <span>温度：62.5°C</span>
              </div>
              <div>
                <img src="@/assets/images/mgr/overhold.svg" alt="">
                <span>负载率：72.5%</span>
              </div>
            </div>
          </div>
          <el-descriptions title="设备参数" :column="2" size="mini" border>
            <el-descriptions-item label="产品型号">S11-M-400/10</el-descriptions-item>
            <el-descriptions-item label="额定容量">400kVA</el-descriptions-item>
            <el-descriptions-item label="额定电压">10±5%/0.4kV</el-descriptions-item>
            <el-descriptions-item label="额定频率">50HZ</el-descriptions-item>
            <el-descriptions-item label="相数">3</el-descriptions-item>
            <el-descriptions-item label="生产厂家">XX电器</el-descriptions-item>
          </el-descriptions>
          <alarm :alarmData="transformerAlarmData" />
        </div>
      </Panel>
      <Panel title="配电柜">
        <div class="power">
          <el-select v-model="power" size="mini">
            <el-option label="配电柜1" :value="1"></el-option>
            <el-option label="配电柜2" :value="2"></el-option>
            <el-option label="配电柜3" :value="3"></el-option>
          </el-select>
          <div class="power-info">
            <div>
              <span>205.2A</span>
              <span>A相</span>
            </div>
            <div>
              <span>205.2A</span>
              <span>B相</span>
            </div>
            <div>
              <span>205.2A</span>
              <span>C相</span>
            </div>
          </div>
          <div class="power-data">
            <div class="power-data-title">实时数据</div>
            <div class="power-data-body">
              <div>
                <div class="data-num">0.76</div>
                <div class="data-name">功率因素</div>
              </div>
              <div>
                <div class="power-data-row">
                  <div>
                    <span class="data-num">233.2V</span>
                    <span class="data-name">A相电压</span>
                  </div>
                  <div>
                    <span class="data-num">233.2V</span>
                    <span class="data-name">A相电压</span>
                  </div>
                  <div>
                    <span class="data-num">233.2V</span>
                    <span class="data-name">A相电压</span>
                  </div>
                </div>
                <div class="power-data-row">
                  <div>
                    <span class="data-num">233.2V</span>
                    <span class="data-name">A相电压</span>
                  </div>
                  <div>
                    <span class="data-num">233.2V</span>
                    <span class="data-name">A相电压</span>
                  </div>
                  <div>
                    <span class="data-num">233.2V</span>
                    <span class="data-name">A相电压</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <alarm :alarmData="powerAlarmData" />
        </div>

      </Panel>
      <Panel title="空开">
        <div class="switch">
          <el-table :data="switchData" style="width: 100%">
            <el-table-column prop="name" align="center" label="支路">
            </el-table-column>
            <el-table-column prop="regularElec" align="center" label="额定电流">
            </el-table-column>
            <el-table-column prop="realElec" align="center" label="实时电流">
            </el-table-column>
            <el-table-column align="center" label="">
              <template slot-scope="scope">
                <el-switch v-model="scope.row.status" size="mini">
                </el-switch>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </Panel>
    </div>
  </div>
</template>
<script>
export default {
  name: 'Powerdist',
  data() {
    return {
      transformer: 1,
      transformerAlarmData: [
        {
          name: '变压器油温值：90.3℃',
          type: '过温预警',
          createTime: '08-25 17:51:35'
        },
        {
          name: '变压器油温值：90.3℃',
          type: '过温预警',
          createTime: '08-25 17:51:35'
        },
        {
          name: '变压器油温值：90.3℃',
          type: '过温预警',
          createTime: '08-25 17:51:35'
        },
        {
          name: '变压器油温值：90.3℃',
          type: '过温预警',
          createTime: '08-25 17:51:35'
        },
        {
          name: '变压器油温值：90.3℃',
          type: '过温预警',
          createTime: '08-25 17:51:35'
        },
        {
          name: '变压器油温值：90.3℃',
          type: '过温预警',
          createTime: '08-25 17:51:35'
        }
      ],
      powerAlarmData: [
        {
          name: '配电柜A相电流：579.4A',
          type: '过流预警',
          createTime: '08-25 17:51:35'
        },
        {
          name: '配电柜A相电流：579.4A',
          type: '过流预警',
          createTime: '08-25 17:51:35'
        },
        {
          name: '配电柜A相电流：579.4A',
          type: '过流预警',
          createTime: '08-25 17:51:35'
        },
        {
          name: '配电柜A相电流：579.4A',
          type: '过流预警',
          createTime: '08-25 17:51:35'
        },
        {
          name: '配电柜A相电流：579.4A',
          type: '过流预警',
          createTime: '08-25 17:51:35'
        },
        {
          name: '配电柜B相电流：579.4A',
          type: '过流预警',
          createTime: '08-25 17:51:35'
        },
        {
          name: '配电柜B相电流：579.4A',
          type: '过流预警',
          createTime: '08-25 17:51:35'
        }
      ],
      power: 1,
      switchData: [
        {
          name:'总开',
          regularElec:'63A',
          realElec:'63A',
          status:true,
        },
        {
          name:'综合楼空调',
          regularElec:'63A',
          realElec:'63A',
          status:true,
        },
        {
          name:'综合楼照明',
          regularElec:'63A',
          realElec:'63A',
          status:true,
        },
        {
          name:'加油站照明',
          regularElec:'63A',
          realElec:'63A',
          status:false,
        },
        {
          name:'综合楼照明',
          regularElec:'63A',
          realElec:'63A',
          status:true,
        },
        {
          name:'加油站照明',
          regularElec:'63A',
          realElec:'63A',
          status:false,
        },
      ]
    }
  },
  components: {
    Panel: () => import('./components/panel'),
    alarm: () => import('./components/alarm.vue')
  },
  mounted() {},
  methods: {}
}
</script>
<style lang='scss' scoped>
.powerdist {
  background: #f6f7f9;
  padding: 10px;
  min-height: inherit;
  display: flex;
  flex-direction: column;
  .powerdist-header {
    background: #fff;
    padding: 20px;
    .powerdist-env {
      display: flex;
      color: #515a6e;
      font-size: 14px;
      margin-left: 80px;
      > div {
        display: flex;
        align-items: center;
        margin-left: 70px;
        img {
          margin-right: 5px;
        }
      }
    }
  }
  .powerdist-body {
    flex: 1;
    margin-top: 10px;
    display: flex;
    > div {
      flex: 1;
      &:not(:first-child) {
        margin-left: 10px;
      }
    }
    .transformer {
      padding: 10px;
      .transformer-info {
        text-align: center;
        margin-top: 50px;
        position: relative;
      }
      .transformerImg {
        height: 150px;
      }
      .arrowImg {
        position: absolute;
        left: 5%;
        top: 50%;
        transform: translateY(-50%);
        img {
          width: 80px;
        }
        span {
          position: absolute;
          top: 10px;
          left: 10px;
        }
      }
      .info-header {
        position: absolute;
        top: -20px;
        left: 50%;
        transform: translateX(-50%);
        font-size: 14px;
        span {
          margin-left: 5px;
          font-weight: bold;
        }
      }
      .info-right {
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        font-size: 14px;
        > div {
          display: flex;
          align-items: center;
          margin-top: 5px;
        }
      }
    }
    ::v-deep .el-descriptions__header {
      margin-bottom: 5px;
    }
    .power {
      padding: 10px;
      .power-info {
        display: flex;
        justify-content: space-between;
        margin-top: 30px;
        padding: 0 10px;
        > div {
          color: #333333;
          border: 2px solid #d7d7d7;
          display: flex;
          flex-direction: column;
          justify-content: center;
          border-radius: 50%;
          height: 100px;
          width: 100px;
          text-align: center;
          font-weight: bold;
          font-size: 16px;
          &:not(:first-of-type) {
            margin-left: 20px;
          }
          span:last-of-type {
            margin-top: 5px;
            color: #7f7f7f;
            font-size: 18px;
          }
        }
      }
      .power-data {
        margin-top: 20px;
        .power-data-title {
          background: #f2f2f2;
          padding: 5px;
          font-size: 14px;
        }
        .power-data-body {
          border: 1px solid #f0f1f2;
          display: flex;
          align-items: center;
          padding: 10px 20px;
          text-align: center;
          > div:last-of-type {
            flex: 1;
            margin-left: 30px;
          }
          .power-data-row {
            display: flex;
            justify-content: space-between;
            margin-top: 20px;
            > div {
              display: flex;
              flex-direction: column;
            }
          }
          .data-name {
            margin-top: 5px;
            font-size: 13px;
            color: #5a5a5a;
          }
          .data-num {
            font-size: 15px;
            font-weight: 500;
          }
        }
      }
    }
    .switch {
      padding: 10px;
    }
  }
}
</style>
