sis_zhfx/src/views/WindSite/pages/Info/Base-Info.vue

<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>
        {{ sourceMap.code }}
      </div>
      <div class="wind-site-tag">
        <div class="tag-text">所属线路</div>
        <div class="tag-value">{{ sourceMap.lnname }}</div>
      </div>
      <div class="wind-site-tag">
        <div class="tag-text">机型</div>
        <div class="tag-value">{{ sourceMap.model }}</div>
      </div>
      <div class="wind-site-tag">
        <div class="tag-text">告警时间</div>
        <div class="tag-value">{{ sourceMap.gxkmap && sourceMap.gxkmap.bjsj }}</div>
      </div>
      <div class="wind-site-tag">
        <div class="tag-text">告警内容</div>
        <div class="tag-value">{{ sourceMap.gxkmap && sourceMap.gxkmap.bjmc }}</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">{{ sourceMap.jczbmap && sourceMap.jczbmap.RFDL }}<span class="unit">kwh</span></div>
          </div>
          <el-row class="wind-site-state">
            <el-col :span="6" class="generation-item">
              <i class="svg-icon svg-icon-lg svg-icon-gray">
                <svg-icon :svgid="'svg-availability'" />
              </i>
              <div class="value">{{ sourceMap.jczbmap && sourceMap.jczbmap.FJKYL }}</div>
              <div class="text">月可利用率</div>
            </el-col>
            <el-col :span="6" class="generation-item">
              <i class="svg-icon svg-icon-lg svg-icon-gray not-first">
                <svg-icon :svgid="'svg-availability'" />
              </i>
              <div class="value">{{ sourceMap.gxkmap && sourceMap.gxkmap.ygzxs }}</div>
              <div class="text">月故障小时数</div>
            </el-col>
            <el-col :span="6" class="generation-item">
              <i class="svg-icon svg-icon-lg svg-icon-gray not-first">
                <svg-icon :svgid="'svg-availability'" />
              </i>
              <div class="value">{{ sourceMap.gxkmap && sourceMap.gxkmap.ytjxs }}</div>
              <div class="text">月待机小时数</div>
            </el-col>
            <el-col :span="6" class="generation-item">
              <i class="svg-icon svg-icon-lg svg-icon-gray not-first">
                <svg-icon :svgid="'svg-availability'" />
              </i>
              <div class="value">{{ sourceMap.gxkmap && sourceMap.gxkmap.yyxxs }}</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="sourceMap.jczbmap && sourceMap.jczbmap[item.key]" height="9.722vh" />
          </el-col>
        </el-row>
      </el-col>
    </el-row>
    <!-- 基本信息 -->
    <el-row>
      <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-base-info'" style="margin: 3px 0 -3px 0;" />
            </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">{{ sourceMap.fdjmap && sourceMap.fdjmap.U1YZWD }}</td>
                <td class="unit gray">℃</td>
                <td class="text gray">V1绕组温度</td>
                <td class="value green">{{ sourceMap.fdjmap && sourceMap.fdjmap.V1YZWD }}</td>
                <td class="unit gray">℃</td>
              </tr>
              <tr>
                <td class="text gray">W1绕组温度</td>
                <td class="value green">{{ sourceMap.fdjmap && sourceMap.fdjmap.W1YZWD }}</td>
                <td class="unit gray">℃</td>
                <td class="text gray">发电机轴承A温度</td>
                <td class="value green">{{ sourceMap.fdjmap && sourceMap.fdjmap.FDJZCAWD }}</td>
                <td class="unit gray">℃</td>
              </tr>
              <tr>
                <td class="text gray">发电机轴承B温度</td>
                <td class="value green">{{ sourceMap.fdjmap && sourceMap.fdjmap.FDJZCBWD }}</td>
                <td class="unit gray">℃</td>
                <td class="text gray">发电机冷却风温度</td>
                <td class="value green">{{ sourceMap.fdjmap && sourceMap.fdjmap.FDJLQFWD }}</td>
                <td class="unit gray">℃</td>
              </tr>
              <tr>
                <td class="text gray">发电机滑环温度</td>
                <td class="value green">{{ sourceMap.fdjmap && sourceMap.fdjmap.FDJHHWD }}</td>
                <td class="unit gray">℃</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-parameter'" style="margin: 6px 0 -6px 0;" />
            </div>
            <div class="title">齿轮箱</div>
          </div>
          <div class="panel-body">
            <table class="table-form">
              <tr>
                <td class="text gray">润滑油滤网入口压力</td>
                <td class="value green">{{ sourceMap.clxmap && sourceMap.clxmap.RHYLWRKYL }}</td>
                <td class="unit gray">Kw</td>
                <td class="text gray">润滑油滤网出口压力</td>
                <td class="value green">{{ sourceMap.clxmap && sourceMap.clxmap.RHYLWCKYL }}</td>
                <td class="unit gray">Kw</td>
              </tr>
              <tr>
                <td class="text gray">齿轮箱输入轴1温度</td>
                <td class="value green">{{ sourceMap.clxmap && sourceMap.clxmap.CLXSRZ1WD }}</td>
                <td class="unit gray">℃</td>
                <td class="text gray">齿轮箱输入轴2温度</td>
                <td class="value green">{{ sourceMap.clxmap && sourceMap.clxmap.CLXSRZ2WD }}</td>
                <td class="unit gray">℃</td>
              </tr>
              <tr>
                <td class="text gray">齿轮箱油温</td>
                <td class="value green">{{ sourceMap.clxmap && sourceMap.clxmap.CLXYW }}</td>
                <td class="unit gray">℃</td>
                <td class="text gray">齿轮箱入口油温</td>
                <td class="value green">{{ sourceMap.clxmap && sourceMap.clxmap.CLXRKYW }}</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-pitch-info'" style="margin: 3px 0 -3px 0;padding: 2px;" />
            </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">{{ sourceMap.bjmap && sourceMap.bjmap.U1YZDL }}</td>
                <td class="unit gray">A</td>
                <td class="text gray">U2项绕组电流</td>
                <td class="value green">{{ sourceMap.bjmap && sourceMap.bjmap.U2YZDL }}</td>
                <td class="unit gray">A</td>
              </tr>
              <tr>
                <td class="text gray">U3项绕组电流</td>
                <td class="value green">{{ sourceMap.bjmap && sourceMap.bjmap.U3YZDL }}</td>
                <td class="unit gray">A</td>
                <td class="text gray">U1项绕组电压</td>
                <td class="value green">{{ sourceMap.bjmap && sourceMap.bjmap.U1YZDY }}</td>
                <td class="unit gray">V</td>
              </tr>
              <tr>
                <td class="text gray">U2项绕组电压</td>
                <td class="value green">{{ sourceMap.bjmap && sourceMap.bjmap.U2YZDY }}</td>
                <td class="unit gray">V</td>
                <td class="text gray">U2项绕组电压</td>
                <td class="value green">{{ sourceMap.bjmap && sourceMap.bjmap.U3YZDY }}</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-power-grid'" />
            </div>
            <div class="title">偏航信息</div>
          </div>
          <div class="panel-body">
            <table class="table-form">
              <tr>
                <td class="text gray">对风角度</td>
                <td class="value green">{{ sourceMap.phmap && sourceMap.phmap.DFJD }}</td>
                <td class="unit gray">度</td>
                <td class="text gray">偏航位置</td>
                <td class="value green">{{ sourceMap.phmap && sourceMap.phmap.PHWZ }}</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-temperature-info'" style="margin: 3px -5px -3px 5px;" />
            </div>
            <div class="title">液压信息</div>
          </div>
          <div class="panel-body">
            <table class="table-form">
              <tr>
                <td class="text gray">液压系统油压</td>
                <td class="value green">{{ sourceMap.yymap && sourceMap.yymap.YYXTYY }}</td>
                <td class="unit gray">Pa</td>
                <td class="text gray">转子刹车系统液压</td>
                <td class="value green">{{ sourceMap.yymap && sourceMap.yymap.ZZSCXTYY }}</td>
                <td class="unit gray">Pa</td>
              </tr>
              <tr>
                <td class="text gray">液压油温</td>
                <td class="value green">{{ sourceMap.yymap && sourceMap.yymap.YYYW }}</td>
                <td class="unit gray">℃</td>
                <td class="text gray">液压系统油压</td>
                <td class="value green">{{ sourceMap.yymap && sourceMap.yymap.FDJLQSWD }}</td>
                <td class="unit gray">Pa</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: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      sourceMap: {},
      // 功率复核数据
      PowerLoad: [
        {
          title: "风速",
          key: "FS",
        },
        {
          title: "保证功率",
          key: "LLGL",
        },
        {
          title: "应发功率",
          key: "YFGL",
        },
        {
          title: "实发功率",
          key: "GL",
        },
      ],
    };
  },
  methods: {},

  mounted() {
    this.sourceMap = this.data;
  },

  watch: {
    data(value) {
      this.sourceMap = value;
    },
  },
};
</script>

<style lang="less">
.wind-site-base-info {
  // 风机名称
  .wind-site-name {
    padding: 0.37vh 2.222vh;
    display: flex;
    align-items: center;
    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;
      }
    }

    .generation-item {
      position: relative;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      text-align: center;
      i {
        position: absolute;
        left: calc(50% - 44px);
        top: -8px;
        svg {
          width: 90px;
          height: 90px;
        }

        &.not-first {
          left: calc(50% - 38px);
        }
      }
      .value {
        margin: 32px 0;
        align-items: center;
        flex: 1 0 auto;
        font-size: 12px;
      }
      .text {
        font-size: 12px;
      }
    }
  }

  .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, 40);
      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>