sis_zhfx/src/views/sisView/index.vue

<template>
  <div class="sisViewBox">
    <div class="viewItem">
      <clock :width="330" :height="300" />
      <div class="viewTitle">综<br /><br />合<br /><br />参<br /><br />数</div>
      <div class="contentBox">
        <div class="contentItem">
          <div class="itemName">装机容量</div>
          <div class="itemNum">123</div>
          <div class="itemUnit">MW</div>
          <div class="itemName">安全天数</div>
          <div class="itemNum"></div>
          <div class="itemUnit">天</div>
          <div class="itemName">总功率</div>
          <div class="itemNum"></div>
          <div class="itemUnit">MW</div>
        </div>
        <div class="contentItem">
          <div class="itemName">日发电量</div>
          <div class="itemNum"></div>
          <div class="itemUnit">万kwh</div>
          <div class="itemName">年利用小时</div>
          <div class="itemNum"></div>
          <div class="itemUnit">小时</div>
          <div class="itemName">年发电量</div>
          <div class="itemNum"></div>
          <div class="itemUnit">万kwh</div>
        </div>
        <div class="contentItem">
          <div class="itemName">上网电量</div>
          <div class="itemNum"></div>
          <div class="itemUnit">万kwh</div>
          <div class="itemName">月利用小时</div>
          <div class="itemNum"></div>
          <div class="itemUnit">小时</div>
          <div class="itemName">月发电量</div>
          <div class="itemNum"></div>
          <div class="itemUnit">万kwh</div>
        </div>
        <div class="contentItem">
          <div class="itemName">复位及时率</div>
          <div class="itemNum"></div>
          <div class="itemUnit">%</div>
          <div class="itemName">年计划电量</div>
          <div class="itemNum"></div>
          <div class="itemUnit">万kwh</div>
          <div class="itemName">完成率</div>
          <div class="itemNum"></div>
          <div class="itemUnit">%</div>
        </div>
        <div class="contentItem">
          <div class="itemName">转换及时率</div>
          <div class="itemNum"></div>
          <div class="itemUnit">%</div>
          <div class="itemName">月计划电量</div>
          <div class="itemNum"></div>
          <div class="itemUnit">万kwh</div>
          <div class="itemName">完成率</div>
          <div class="itemNum"></div>
          <div class="itemUnit">%</div>
        </div>
        <div class="contentItem">
          <div class="itemName">消缺及时率</div>
          <div class="itemNum"></div>
          <div class="itemUnit">%</div>
          <div class="itemName noPd">综合厂用电率</div>
          <div class="itemNum"></div>
          <div class="itemUnit">%</div>
          <div class="itemName">月M&nbsp;T&nbsp;B&nbsp;F</div>
          <div class="itemNum"></div>
          <div class="itemUnit">小时</div>
        </div>
        <div class="contentItem">
          <div class="itemName">风能利用率</div>
          <div class="itemNum"></div>
          <div class="itemUnit">%</div>
          <div class="itemName noPd">设备可利用率</div>
          <div class="itemNum"></div>
          <div class="itemUnit">%</div>
          <div class="itemName">月可靠性</div>
          <div class="itemNum"></div>
          <div class="itemUnit">%</div>
        </div>
      </div>
    </div>
    <div class="viewItem">
      <div class="viewTitle">风<br /><br />电<br /><br />参<br /><br />数</div>
      <div class="contentBox">
        <div class="contentItem">
          <div class="itemName">装机容量</div>
          <div class="itemNum"></div>
          <div class="itemUnit">MW</div>
          <div class="itemName">实时风速</div>
          <div class="itemNum"></div>
          <div class="itemUnit">m/s</div>
          <div class="itemName">月发电量</div>
          <div class="itemNum"></div>
          <div class="itemUnit">万kwh</div>
          <div class="itemName">年发电量</div>
          <div class="itemNum"></div>
          <div class="itemUnit">万kwh</div>
        </div>
        <div class="contentItem">
          <div class="itemName">日发电量</div>
          <div class="itemNum"></div>
          <div class="itemUnit">万kwh</div>
          <div class="itemName">实时功率</div>
          <div class="itemNum"></div>
          <div class="itemUnit">MW</div>
          <div class="itemName">利用小时</div>
          <div class="itemNum"></div>
          <div class="itemUnit">小时(月)</div>
          <div class="itemName">利用小时</div>
          <div class="itemNum"></div>
          <div class="itemUnit">小时(年)</div>
        </div>
        <div class="contentItem">
          <div class="itemName">上网电量</div>
          <div class="itemNum"></div>
          <div class="itemUnit">万kwh</div>
          <div class="itemName">总欠发</div>
          <div class="itemNum"></div>
          <div class="itemUnit">万kwh</div>
        </div>
        <div class="contentItem">
          <div class="itemName">牛发电量</div>
          <div class="itemNum"></div>
          <div class="itemUnit">万kwh</div>
          <div class="itemName">牛欠发</div>
          <div class="itemNum"></div>
          <div class="itemUnit">万kwh</div>
          <div class="itemName">牛风速</div>
          <div class="itemNum"></div>
          <div class="itemUnit">m/s</div>
          <div class="itemName">牛功率</div>
          <div class="itemNum"></div>
          <div class="itemUnit">MW</div>
        </div>
        <div class="contentItem">
          <div class="itemName">麻发电量</div>
          <div class="itemNum"></div>
          <div class="itemUnit">万kwh</div>
          <div class="itemName">麻欠发</div>
          <div class="itemNum"></div>
          <div class="itemUnit">万kwh</div>
          <div class="itemName">麻风速</div>
          <div class="itemNum"></div>
          <div class="itemUnit">m/s</div>
          <div class="itemName">麻功率</div>
          <div class="itemNum"></div>
          <div class="itemUnit">MW</div>
        </div>
        <div class="contentItem">
          <div class="itemName">青发电量</div>
          <div class="itemNum"></div>
          <div class="itemUnit">万kwh</div>
          <div class="itemName">青欠发</div>
          <div class="itemNum"></div>
          <div class="itemUnit">万kwh</div>
          <div class="itemName">青风速</div>
          <div class="itemNum"></div>
          <div class="itemUnit">m/s</div>
          <div class="itemName">青功率</div>
          <div class="itemNum"></div>
          <div class="itemUnit">MW</div>
        </div>
        <div class="contentItem">
          <div class="itemName">石发电量</div>
          <div class="itemNum"></div>
          <div class="itemUnit">万kwh</div>
          <div class="itemName">石欠发</div>
          <div class="itemNum"></div>
          <div class="itemUnit">万kwh</div>
          <div class="itemName">石风速</div>
          <div class="itemNum"></div>
          <div class="itemUnit">m/s</div>
          <div class="itemName">石功率</div>
          <div class="itemNum"></div>
          <div class="itemUnit">MW</div>
        </div>
        <div class="contentItem">
          <div class="itemName">香发电量</div>
          <div class="itemNum"></div>
          <div class="itemUnit">万kwh</div>
          <div class="itemName">香欠发</div>
          <div class="itemNum"></div>
          <div class="itemUnit">万kwh</div>
          <div class="itemName">香风速</div>
          <div class="itemNum"></div>
          <div class="itemUnit">m/s</div>
          <div class="itemName">香功率</div>
          <div class="itemNum"></div>
          <div class="itemUnit">MW</div>
        </div>
      </div>
    </div>
    <div class="viewItem">
      <div class="viewTitle">光<br /><br />伏<br /><br />参<br /><br />数</div>
      <div class="contentBox">
        <div class="contentItem">
          <div class="itemName">装机容量</div>
          <div class="itemNum"></div>
          <div class="itemUnit">MW</div>
          <div class="itemName">日照强度</div>
          <div class="itemNum"></div>
          <div class="itemUnit">W/㎡</div>
          <div class="itemName">实时功率</div>
          <div class="itemNum"></div>
          <div class="itemUnit">MW</div>
        </div>
        <div class="contentItem">
          <div class="itemName">日发电量</div>
          <div class="itemNum"></div>
          <div class="itemUnit">万kwh</div>
          <div class="itemName">月发电量</div>
          <div class="itemNum"></div>
          <div class="itemUnit">万kwh</div>
          <div class="itemName">年发电量</div>
          <div class="itemNum"></div>
          <div class="itemUnit">万kwh</div>
        </div>
        <div class="contentItem">
          <div class="itemName">上网电量</div>
          <div class="itemNum"></div>
          <div class="itemUnit">万kwh</div>
          <div class="itemName">利用小时</div>
          <div class="itemNum"></div>
          <div class="itemUnit">小时(月)</div>
           <div class="itemName">利用小时</div>
          <div class="itemNum"></div>
          <div class="itemUnit">小时(年)</div>
        </div>
        <div class="contentItem">
          <div class="itemName">武发电量</div>
          <div class="itemNum"></div>
          <div class="itemUnit">万kwh</div>
          <div class="itemName">武日强度</div>
          <div class="itemNum"></div>
          <div class="itemUnit">W/㎡</div>
          <div class="itemName">武功率</div>
          <div class="itemNum"></div>
          <div class="itemUnit">MW</div>
        </div>
        <div class="contentItem">
          <div class="itemName">平发电量</div>
          <div class="itemNum"></div>
          <div class="itemUnit">万kwh</div>
          <div class="itemName">平日强度</div>
          <div class="itemNum"></div>
          <div class="itemUnit">W/㎡</div>
          <div class="itemName">平功率</div>
          <div class="itemNum"></div>
          <div class="itemUnit">MW</div>
        </div>
        <div class="contentItem">
          <div class="itemName">宣发电量</div>
          <div class="itemNum"></div>
          <div class="itemUnit">万kwh</div>
          <div class="itemName">宣日强度</div>
          <div class="itemNum"></div>
          <div class="itemUnit">W/㎡</div>
          <div class="itemName">宣功率</div>
          <div class="itemNum"></div>
          <div class="itemUnit">MW</div>
        </div>
        <div class="contentItem">
          <div class="itemName">马发电量</div>
          <div class="itemNum"></div>
          <div class="itemUnit">万kwh</div>
          <div class="itemName">马日强度</div>
          <div class="itemNum"></div>
          <div class="itemUnit">W/㎡</div>
          <div class="itemName">马功率</div>
          <div class="itemNum"></div>
          <div class="itemUnit">MW</div>
        </div>
        <div class="contentItem">
          <div class="itemName">海发电量</div>
          <div class="itemNum"></div>
          <div class="itemUnit">万kwh</div>
          <div class="itemName">海日强度</div>
          <div class="itemNum"></div>
          <div class="itemUnit">W/㎡</div>
          <div class="itemName">海功率</div>
          <div class="itemNum"></div>
          <div class="itemUnit">MW</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import $ from "jquery";
import clock from "@com/other/clock/index.vue";
export default {
  // 名称
  name: "sisView",

  // 使用组件
  components: {
    clock,
  },

  // 数据
  data() {
    return {};
  },

  // 函数
  methods: {
    resetViewTitleHeight() {
      let viewTitle = $(".viewTitle");
      for (let i = 0; i < viewTitle.length; i++) {
        viewTitle
          .eq(i)
          .css("height", viewTitle.eq(i).parent(".viewItem").css("height"));
      }
    },
  },

  created() {},

  mounted() {
    this.resetViewTitleHeight();
  },

  unmounted() {},
};
</script>

<style lang="less" scoped>
.sisViewBox {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: start;
  align-items: flex-start;
  flex-direction: column;

  .viewItem {
    display: flex;
    justify-content: start;
    align-items: center;
    margin: 10px 0;

    &:first-child {
      margin: 0 0 10px 0;
    }

    .viewTitle {
      font-family: Arial, Helvetica, sans-serif;
      width: 30px;
      padding: 10px 40px;
      font-size: 30px;
      font-weight: 700;
      color: #ff0;
      text-decoration: none;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-wrap: wrap;
      background-color: rgb(0, 52, 102);
      margin-right: 10px;
    }

    .contentBox {
      display: flex;
      justify-content: start;
      align-items: flex-start;
      flex-direction: column;
      font-family: Georgia, "Times New Roman", Times, serif;
      font-size: 30px;

      .contentItem {
        display: flex;
        justify-content: start;
        align-items: center;
        padding: 2px 0;

        .itemName {
          width: 220px;
          padding: 0 10px;
          text-align: justify;
          text-align-last: justify;

          &.noPd {
            width: 220px;
            padding: 0 0 0 10px;
          }
        }

        .itemNum {
          font-family: Arial, Helvetica, sans-serif;
          color: #f25656;
          width: 110px;
          text-align: center;
        }

        .itemUnit {
          font-family: Arial, Helvetica, sans-serif;
          font-size: 18px;
          color: #0f0;
          width: 110px;
          text-align: left;
          height: 100%;
          vertical-align: middle;
        }
      }
    }
  }
}
</style>