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

<template>
  <div class="wind-site-base-info">
    <!-- 电机基本信息 -->
    <el-row class="mg-b-8">
      <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-8">
      <el-col :span="14">
        <el-row class="generation background mg-r-8">
          <div class="mg-r-8">
            <div class="generation-text">日发电量</div>
            <div class="generation-value green" style="display:inline-block">{{ sourceMap.jczbmap && sourceMap.jczbmap.RFDL }}</div><span class="green" style="font-size:26px;margin-left: 0.37vh;">kWh</span>
          </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">
                <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">
                <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">
                <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 v-for="(pItem, pIndex) in fdjmap" :key="pIndex">
                <template v-for="(cItem, cIndex) in pItem" :key="cIndex">
                  <td class="text gray">{{ cItem.name }}</td>
                  <td class="value green">{{ cItem.value }}</td>
                  <td class="unit gray">{{ cItem.unit }}</td>
                </template>
              </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 v-for="(pItem, pIndex) in clxmap" :key="pIndex">
                <template v-for="(cItem, cIndex) in pItem" :key="cIndex">
                  <td class="text gray">{{ cItem.name }}</td>
                  <td class="value green">{{ cItem.value }}</td>
                  <td class="unit gray">{{ cItem.unit }}</td>
                </template>
              </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 v-for="(pItem, pIndex) in bjmap" :key="pIndex">
                <template v-for="(cItem, cIndex) in pItem" :key="cIndex">
                  <td class="text gray">{{ cItem.name }}</td>
                  <td class="value green">{{ cItem.value }}</td>
                  <td class="unit gray">{{ cItem.unit }}</td>
                </template>
              </tr>
            </table>
          </div>
        </div>
      </el-col>
      <el-col :span="12" style="padding-left:8px;">
        <!-- 电网信息 -->
        <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 v-for="(pItem, pIndex) in phmap" :key="pIndex">
                <template v-for="(cItem, cIndex) in pItem" :key="cIndex">
                  <td class="text gray">{{ cItem.name }}</td>
                  <td class="value green">{{ cItem.value }}</td>
                  <td class="unit gray">{{ cItem.unit }}</td>
                </template>
              </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 v-for="(pItem, pIndex) in yymap" :key="pIndex">
                <template v-for="(cItem, cIndex) in pItem" :key="cIndex">
                  <td class="text gray">{{ cItem.name }}</td>
                  <td class="value green">{{ cItem.value }}</td>
                  <td class="unit gray">{{ cItem.unit }}</td>
                </template>
              </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 {
      pageReady: false,
      sourceMap: {
      },
      fdjmap: [],
      clxmap: [],
      bjmap: [],
      phmap: [],
      yymap: [],
      // 功率复核数据
      PowerLoad: [
        {
          title: "风速",
          key: "FS",
        },
        {
          title: "保证功率",
          key: "LLGL",
        },
        {
          title: "应发功率",
          key: "YFGL",
        },
        {
          title: "实发功率",
          key: "GL",
        },
      ],
    };
  },
  methods: {
    /**
     * 清洗数据，将原数据处理成符合布局渲染的格式，其中：
     * @param { Array } array 传入的原数据
     * @param { Int } length 每行显示的数量
    **/
    rinseData (array = [], length) {
      let index = 0;
      let newArray = [];

      while (index < array.length) {
        newArray.push(array.slice(index, index += length));
      }

      return newArray;
    }
  },

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

  watch: {
    data (value) {
      this.sourceMap = value;
      this.fdjmap = this.rinseData(value.fdjmap.ai, 2);
      this.clxmap = this.rinseData(value.clxmap.ai, 2);
      this.bjmap = this.rinseData(value.bjmap.ai, 2);
      this.phmap = this.rinseData(value.phmap.ai, 2);
      this.yymap = this.rinseData(value.yymap.ai, 2);
    }
  },
};
</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;
    }
  }
  .el-col + .el-col {
    padding: 0;
  }
  .generation {
    height: 120px;
    align-items: center;
    padding-left: 16px;

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

    .generation-value {
      font-size: 50px;
      font-family: "Bicubik";
      .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: 8px 4px;

    .el-col + .el-col {
      padding: 0;
    }
  }

  .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: 8px;
    }
  }
}
</style>