<template>
  <div class="wind-site-base-info">
    <!-- 电机基本信息 -->
    <el-row class="mg-b-16">
      <div class="wind-site-name green mg-r-8">
        <span class="svg-icon svg-icon-green mg-r-8">
          <svg-icon class="" :svgid="'svg-normal-power'" />
        </span>
        MA B401
      </div>
      <div class="wind-site-tag">
        <div class="tag-text">所属线路</div>
        <div class="tag-value">某某某1线</div>
      </div>
      <div class="wind-site-tag">
        <div class="tag-text">机型</div>
        <div class="tag-value">GW1000</div>
      </div>
      <div class="wind-site-tag">
        <div class="tag-text">告警时间</div>
        <div class="tag-value">2021年5月10日 12:23:31</div>
      </div>
      <div class="wind-site-tag">
        <div class="tag-text">告警内容</div>
        <div class="tag-value">通讯中断</div>
      </div>
    </el-row>
    <!-- 发电信息 -->
    <el-row class="mg-b-16">
      <el-col :span="14">
        <el-row class="generation background pd-8 mg-r-8">
          <div class="mg-r-8">
            <div class="generation-text">日发电量</div>
            <div class="generation-value green">1,495<span class="unit">kwh</span></div>
          </div>
          <el-row class="wind-site-state">
            <el-col :span="6">
              <div class="value">123</div>
              <div class="text">月可利用率</div>
            </el-col>
            <el-col :span="6">
              <div class="value">123</div>
              <div class="text">月故障小时数</div>
            </el-col>
            <el-col :span="6">
              <div class="value">123</div>
              <div class="text">月等效小时数</div>
            </el-col>
            <el-col :span="6">
              <div class="value">123</div>
              <div class="text">月发电小时数</div>
            </el-col>
          </el-row>
        </el-row>
      </el-col>
      <el-col :span="10" class="background">
        <el-row type="flex" justify="center" :align="'middle'" class="power-load">
          <!-- 功率复核 PowerLoad -->
          <el-col v-for="item in PowerLoad" :key="item" :span="6">
            <dash-pie-chart :title="item.title" :value="item.value" height="9.722vh" />
          </el-col>
        </el-row>
      </el-col>
    </el-row>
    <!-- 基本信息 -->
    <el-row>
      <el-col :span="12" class="pd-r-16">
        <!-- 基本信息 -->
        <div class="info-panel base-info">
          <div class="panel-title gary-l">
            <div class="svg-icon svg-icon-gray-l mg-r-16">
              <svg-icon :svgid="'svg-normal-power'" />
            </div>
            <div class="title">基本信息</div>
          </div>
          <div class="panel-body">
            <table class="table-form">
              <tr>
                <td class="text gray">有功功率</td>
                <td class="value green">1557</td>
                <td class="unit gray">KW</td>
                <td class="text gray">风速</td>
                <td class="value green">12.57</td>
                <td class="unit gray">m/s</td>
              </tr>
              <tr>
                <td class="text gray">有功功率</td>
                <td class="value green">1557</td>
                <td class="unit gray">KW</td>
                <td class="text gray">风速</td>
                <td class="value green">12.57</td>
                <td class="unit gray">m/s</td>
              </tr>
              <tr>
                <td class="text gray">有功功率</td>
                <td class="value green">1557</td>
                <td class="unit gray">KW</td>
                <td class="text gray"></td>
                <td class="value green"></td>
                <td class="unit gray"></td>
              </tr>
            </table>
          </div>
        </div>
        <!-- 运行参数 -->
        <div class="info-panel base-info">
          <div class="panel-title gary-l">
            <div class="svg-icon svg-icon-gray-l mg-r-16">
              <svg-icon :svgid="'svg-normal-power'" />
            </div>
            <div class="title">基本信息</div>
          </div>
          <div class="panel-body">
            <table class="table-form">
              <tr>
                <td class="text gray">风机型号</td>
                <td class="value green">1557</td>
                <td class="unit gray"></td>
                <td class="text gray">控制版本系统</td>
                <td class="value green">12.57</td>
                <td class="unit gray"></td>
              </tr>
              <tr>
                <td class="text gray">变桨类型</td>
                <td class="value green">1557</td>
                <td class="unit gray"></td>
                <td class="text gray">变频器类型</td>
                <td class="value green">12.57</td>
                <td class="unit gray"></td>
              </tr>
              <tr>
                <td class="text gray">齿香类型</td>
                <td class="value green">1557</td>
                <td class="unit gray"></td>
                <td class="text gray">发电机类型</td>
                <td class="value green"></td>
                <td class="unit gray"></td>
              </tr>
              <tr>
                <td class="text gray">总发电量</td>
                <td class="value green">2455619</td>
                <td class="unit gray">VKwh</td>
                <td class="text gray"></td>
                <td class="value green"></td>
                <td class="unit gray"></td>
              </tr>
            </table>
          </div>
        </div>
        <!-- 变桨信息 -->
        <div class="info-panel base-info">
          <div class="panel-title gary-l">
            <div class="svg-icon svg-icon-gray-l mg-r-16">
              <svg-icon :svgid="'svg-normal-power'" />
            </div>
            <div class="title">基本信息</div>
          </div>
          <div class="panel-body">
            <table class="table-form">
              <tr>
                <td class="text gray">叶片1偏角</td>
                <td class="value green">7.14</td>
                <td class="unit gray">°</td>
                <td class="text gray">叶片2偏角</td>
                <td class="value green">7.14</td>
                <td class="unit gray">°</td>
              </tr>
              <tr>
                <td class="text gray">U1项绕组电压</td>
                <td class="value green">123.57</td>
                <td class="unit gray">V</td>
                <td class="text gray">U1项绕组电压</td>
                <td class="value green">123.57</td>
                <td class="unit gray">V</td>
              </tr>
              <tr>
                <td class="text gray">U1项绕组电压</td>
                <td class="value green">123.57</td>
                <td class="unit gray">V</td>
                <td class="text gray">U1项绕组电压</td>
                <td class="value green">123.57</td>
                <td class="unit gray">V</td>
              </tr>
              <tr>
                <td class="text gray">U1项绕组电压</td>
                <td class="value green">123.57</td>
                <td class="unit gray">V</td>
                <td class="text gray">U1项绕组电压</td>
                <td class="value green">123.57</td>
                <td class="unit gray">V</td>
              </tr>
            </table>
          </div>
        </div>
      </el-col>
      <el-col :span="12">
        <!-- 电网信息 -->
        <div class="info-panel base-info">
          <div class="panel-title gary-l">
            <div class="svg-icon svg-icon-gray-l mg-r-16">
              <svg-icon :svgid="'svg-normal-power'" />
            </div>
            <div class="title">基本信息</div>
          </div>
          <div class="panel-body">
            <table class="table-form">
              <tr>
                <td class="text gray">U1项绕组电压</td>
                <td class="value green">123.57</td>
                <td class="unit gray">V</td>
                <td class="text gray">U1项绕组电压</td>
                <td class="value green">123.57</td>
                <td class="unit gray">V</td>
              </tr>
              <tr>
                <td class="text gray">U1项绕组电压</td>
                <td class="value green">123.57</td>
                <td class="unit gray">V</td>
                <td class="text gray">U1项绕组电压</td>
                <td class="value green">123.57</td>
                <td class="unit gray">V</td>
              </tr>
              <tr>
                <td class="text gray">U1项绕组电压</td>
                <td class="value green">123.57</td>
                <td class="unit gray">V</td>
                <td class="text gray">U1项绕组电压</td>
                <td class="value green">123.57</td>
                <td class="unit gray">V</td>
              </tr>
              <tr>
                <td class="text gray">功率因数</td>
                <td class="value green">0</td>
                <td class="unit gray"></td>
                <td class="text gray">频率</td>
                <td class="value green">50.02</td>
                <td class="unit gray">HZ</td>
              </tr>
            </table>
          </div>
        </div>
        <!-- 温度信息 -->
        <div class="info-panel base-info">
          <div class="panel-title gary-l">
            <div class="svg-icon svg-icon-gray-l mg-r-16">
              <svg-icon :svgid="'svg-normal-power'" />
            </div>
            <div class="title">基本信息</div>
          </div>
          <div class="panel-body">
            <table class="table-form">
              <tr>
                <td class="text gray">U1项绕组电压</td>
                <td class="value green">123.57</td>
                <td class="unit gray">V</td>
                <td class="text gray">U1项绕组电压</td>
                <td class="value green">123.57</td>
                <td class="unit gray">V</td>
              </tr>
              <tr>
                <td class="text gray">U1项绕组电压</td>
                <td class="value green">123.57</td>
                <td class="unit gray">V</td>
                <td class="text gray">U1项绕组电压</td>
                <td class="value green">123.57</td>
                <td class="unit gray">V</td>
              </tr>
              <tr>
                <td class="text gray">U1项绕组电压</td>
                <td class="value green">123.57</td>
                <td class="unit gray">V</td>
                <td class="text gray">U1项绕组电压</td>
                <td class="value green">123.57</td>
                <td class="unit gray">V</td>
              </tr>
              <tr>
                <td class="text gray">功率因数</td>
                <td class="value green">0</td>
                <td class="unit gray"></td>
                <td class="text gray">频率</td>
                <td class="value green">50.02</td>
                <td class="unit gray">HZ</td>
              </tr>
              <tr>
                <td class="text gray">功率因数</td>
                <td class="value green">0</td>
                <td class="unit gray"></td>
                <td class="text gray">频率</td>
                <td class="value green">50.02</td>
                <td class="unit gray">HZ</td>
              </tr>
            </table>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import DashPieChart from "../../../../components/chart/pie/dash-pie-chart.vue";
import SvgIcon from "../../../../components/coms/icon/svg-icon.vue";
export default {
  name: "wind-site-base-info",
  components: { SvgIcon, DashPieChart },
  props: {
    id: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      // 功率复核数据
      PowerLoad: [
        {
          title: "风速",
          value: 12.3,
        },
        {
          title: "保证功率",
          value: 22,
        },
        {
          title: "应发功率",
          value: 33,
        },
        {
          title: "实发功率",
          value: 44,
        },
      ],
    };
  },
  methods: {},
};
</script>

<style lang="less">
.wind-site-base-info {
  // 风机名称
  .wind-site-name {
    padding: 0.37vh 2.222vh;
    display: flex;
    font-size: @fontsize-s;
    border: 1px solid @green;
    .svg-icon {
      svg {
        height: 1.481vh;
        width: 1.481vh;
      }
    }
  }

  // 风机信息 tag样式
  .wind-site-tag {
    flex: 1 1 auto;
    padding: 0.37vh 0.741vh;
    display: flex;
    align-items: center;
    font-size: @fontsize-s;
    background: fade(@darkgray, 30);

    .tag-text {
      color: @gray;
      flex: 0 0 auto;
      margin-right: 0.741vh;
      font-weight: 600;
    }

    .tag-value {
      min-width: 9.259vh;
      color: fade(@white, 80);
    }

    & + .wind-site-tag {
      margin-left: 0.741vh;
    }
  }

  .generation {
    height: 100%;
    align-items: center;

    .generation-text {
      font-size: 2.037vh;
      letter-spacing: 1px;
    }

    .generation-value {
      font-size: 3.704vh;
      .unit {
        margin-left: 0.37vh;
        font-size: 2.037vh;
      }
    }
  }

  .power-load {
    height: 100%;
    padding: 0.7407vh 0.3704vh;
  }

  .wind-site-state {
    flex: 1 1 auto;
  }

  .info-panel {
    flex: 1 0 auto;
    width: 100%;
    .panel-title {
      display: flex;
      width: 100%;
      background: fade(@darkgray, 20);
      padding: 0.37vh;
      padding-left: 2.222vh;
      align-items: center;
      font-size: @fontsize-s;
      color: #b2bdc0;

      svg {
        .svg-use path {
          fill: @gray;
        }

        width: 2.222vh;
        height: 2.222vh;
      }
    }

    .panel-body {
      border: 1px solid fade(@darkgray, 40);
      border-top: 0px;
    }

    & + .info-panel {
      margin-top: 1.481vh;
    }
  }
}
</style>
