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" style="height: 300px">
        <div class="contentItem">
          <div class="itemName size5">装机容量</div>
          <div class="itemNum">{{ items.zjrl }}</div>
          <div class="itemUnit">MW</div>
          <div class="itemName size6">安全天数</div>
          <div class="itemNum">{{ items.aqts }}</div>
          <div class="itemUnit">天</div>
          <div class="itemName size5">总功率</div>
          <div class="itemNum">{{ items.zgl }}</div>
          <div class="itemUnit">MW</div>
        </div>
        <div class="contentItem">
          <div class="itemName size5">日发电量</div>
          <div class="itemNum">{{ items.rfdl }}</div>
          <div class="itemUnit">万kWh</div>
          <div class="itemName size6">年利用小时</div>
          <div class="itemNum">{{ items.nlyxs }}</div>
          <div class="itemUnit">小时</div>
          <div class="itemName size5">年发电量</div>
          <div class="itemNum">{{ items.nfdl }}</div>
          <div class="itemUnit">万kWh</div>
        </div>
        <div class="contentItem">
          <div class="itemName size5">上网电量</div>
          <div class="itemNum">{{ items.swdl }}</div>
          <div class="itemUnit">万kWh</div>
          <div class="itemName size6">月利用小时</div>
          <div class="itemNum">{{ items.ylyxs }}</div>
          <div class="itemUnit">小时</div>
          <div class="itemName size5">月发电量</div>
          <div class="itemNum">{{ items.yfdl }}</div>
          <div class="itemUnit">万kWh</div>
        </div>
        <div class="contentItem">
          <div class="itemName">复位及时率</div>
          <div class="itemNum">{{ items.fwjsl }}</div>
          <div class="itemUnit">%</div>
          <div class="itemName size6">年计划电量</div>
          <div class="itemNum">{{ items.njhdl }}</div>
          <div class="itemUnit">万kWh</div>
          <div class="itemName size5">年完成率</div>
          <div class="itemNum">{{ items.nwcl }}</div>
          <div class="itemUnit">%</div>
        </div>
        <div class="contentItem">
          <div class="itemName">转换及时率</div>
          <div class="itemNum">{{ items.zhjsl }}</div>
          <div class="itemUnit">%</div>
          <div class="itemName size6">月计划电量</div>
          <div class="itemNum">{{ items.yjhdl }}</div>
          <div class="itemUnit">万kWh</div>
          <div class="itemName size5">月完成率</div>
          <div class="itemNum">{{ items.ywcl }}</div>
          <div class="itemUnit">%</div>
        </div>
        <div class="contentItem">
          <div class="itemName">消缺及时率</div>
          <div class="itemNum">{{ items.xqjsl }}</div>
          <div class="itemUnit">%</div>
          <div class="itemName">综合厂用电率</div>
          <div class="itemNum">{{ items.zhcydl }}</div>
          <div class="itemUnit">%</div>
          <div class="itemName size5">月M&nbsp;T&nbsp;B&nbsp;F</div>
          <div class="itemNum">{{ items.ymtbf }}</div>
          <div class="itemUnit">小时</div>
        </div>
        <div class="contentItem">
          <div class="itemName">风能利用率</div>
          <div class="itemNum">{{ items.fnlyl }}</div>
          <div class="itemUnit">%</div>
          <div class="itemName">设备可利用率</div>
          <div class="itemNum">{{ items.sbklyl }}</div>
          <div class="itemUnit">%</div>
          <div class="itemName size5">月可靠性</div>
          <div class="itemNum">{{ items.ykkx }}</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">{{ items.fdzjrl }}</div>
          <div class="itemUnit">MW</div>
          <div class="itemName">实时风速</div>
          <div class="itemNum">{{ items.fdssfs }}</div>
          <div class="itemUnit">m/s</div>
          <div class="itemName">月发电量</div>
          <div class="itemNum">{{ items.fdyfdl }}</div>
          <div class="itemUnit">万kWh</div>
          <div class="itemName">年发电量</div>
          <div class="itemNum">{{ items.fdnfdl }}</div>
          <div class="itemUnit">万kWh</div>
        </div>
        <div class="contentItem">
          <div class="itemName">日发电量</div>
          <div class="itemNum">{{ items.fdrfdl }}</div>
          <div class="itemUnit">万kWh</div>
          <div class="itemName">实时功率</div>
          <div class="itemNum">{{ items.fdssgl }}</div>
          <div class="itemUnit">MW</div>
          <div class="itemName">利用小时</div>
          <div class="itemNum">{{ items.fdylyxs }}</div>
          <div class="itemUnit">小时(月)</div>
          <div class="itemName">利用小时</div>
          <div class="itemNum">{{ items.fdnlyxs }}</div>
          <div class="itemUnit">小时(年)</div>
        </div>
        <div class="contentItem">
          <div class="itemName">上网电量</div>
          <div class="itemNum">{{ items.fdswdl }}</div>
          <div class="itemUnit">万kWh</div>
          <div class="itemName">总欠发</div>
          <div class="itemNum">{{ items.fdzqf }}</div>
          <div class="itemUnit">万kWh</div>
        </div>
        <div class="contentItem">
          <div class="itemName">牛发电量</div>
          <div class="itemNum">{{ items.nssfdl }}</div>
          <div class="itemUnit">万kWh</div>
          <div class="itemName">牛欠发</div>
          <div class="itemNum">{{ items.nssqf }}</div>
          <div class="itemUnit">万kWh</div>
          <div class="itemName">牛风速</div>
          <div class="itemNum">{{ items.nssfs }}</div>
          <div class="itemUnit">m/s</div>
          <div class="itemName">牛功率</div>
          <div class="itemNum">{{ items.nssgl }}</div>
          <div class="itemUnit">MW</div>
        </div>
        <div class="contentItem">
          <div class="itemName">麻发电量</div>
          <div class="itemNum">{{ items.mhsfdl }}</div>
          <div class="itemUnit">万kWh</div>
          <div class="itemName">麻欠发</div>
          <div class="itemNum">{{ items.mhsqf }}</div>
          <div class="itemUnit">万kWh</div>
          <div class="itemName">麻风速</div>
          <div class="itemNum">{{ items.mhsfs }}</div>
          <div class="itemUnit">m/s</div>
          <div class="itemName">麻功率</div>
          <div class="itemNum">{{ items.mhsgl }}</div>
          <div class="itemUnit">MW</div>
        </div>
        <div class="contentItem">
          <div class="itemName">青发电量</div>
          <div class="itemNum">{{ items.qsfdl }}</div>
          <div class="itemUnit">万kWh</div>
          <div class="itemName">青欠发</div>
          <div class="itemNum">{{ items.qsqf }}</div>
          <div class="itemUnit">万kWh</div>
          <div class="itemName">青风速</div>
          <div class="itemNum">{{ items.qsfs }}</div>
          <div class="itemUnit">m/s</div>
          <div class="itemName">青功率</div>
          <div class="itemNum">{{ items.qsgl }}</div>
          <div class="itemUnit">MW</div>
        </div>
        <div class="contentItem">
          <div class="itemName">石发电量</div>
          <div class="itemNum">{{ items.sbqfdl }}</div>
          <div class="itemUnit">万kWh</div>
          <div class="itemName">石欠发</div>
          <div class="itemNum">{{ items.sbqqf }}</div>
          <div class="itemUnit">万kWh</div>
          <div class="itemName">石风速</div>
          <div class="itemNum">{{ items.sbqfs }}</div>
          <div class="itemUnit">m/s</div>
          <div class="itemName">石功率</div>
          <div class="itemNum">{{ items.sbqgl }}</div>
          <div class="itemUnit">MW</div>
        </div>
        <div class="contentItem">
          <div class="itemName">香发电量</div>
          <div class="itemNum">{{ items.xsfdl }}</div>
          <div class="itemUnit">万kWh</div>
          <div class="itemName">香欠发</div>
          <div class="itemNum">{{ items.xsqf }}</div>
          <div class="itemUnit">万kWh</div>
          <div class="itemName">香风速</div>
          <div class="itemNum">{{ items.xsfs }}</div>
          <div class="itemUnit">m/s</div>
          <div class="itemName">香功率</div>
          <div class="itemNum">{{ items.xsgl }}</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">{{ items.gfzjrl }}</div>
          <div class="itemUnit">MW</div>
          <div class="itemName">日照强度</div>
          <div class="itemNum">{{ items.gfrzqd }}</div>
          <div class="itemUnit">W/㎡</div>
          <div class="itemName">实时功率</div>
          <div class="itemNum">{{ items.gfssgl }}</div>
          <div class="itemUnit">MW</div>
        </div>
        <div class="contentItem">
          <div class="itemName">日发电量</div>
          <div class="itemNum">{{ items.gfrfdl }}</div>
          <div class="itemUnit">万kWh</div>
          <div class="itemName">月发电量</div>
          <div class="itemNum">{{ items.gfyfdl }}</div>
          <div class="itemUnit">万kWh</div>
          <div class="itemName">年发电量</div>
          <div class="itemNum">{{ items.gfnfdl }}</div>
          <div class="itemUnit">万kWh</div>
        </div>
        <div class="contentItem">
          <div class="itemName">上网电量</div>
          <div class="itemNum">{{ items.gfswdl }}</div>
          <div class="itemUnit">万kWh</div>
          <div class="itemName">利用小时</div>
          <div class="itemNum">{{ items.gfylyxs }}</div>
          <div class="itemUnit">小时(月)</div>
          <div class="itemName">利用小时</div>
          <div class="itemNum">{{ items.gfnlyxs }}</div>
          <div class="itemUnit">小时(年)</div>
        </div>
        <div class="contentItem">
          <div class="itemName">武发电量</div>
          <div class="itemNum">{{ items.dwkfdl }}</div>
          <div class="itemUnit">万kWh</div>
          <div class="itemName">武日强度</div>
          <div class="itemNum">{{ items.dwkrzqd }}</div>
          <div class="itemUnit">W/㎡</div>
          <div class="itemName">武功率</div>
          <div class="itemNum">{{ items.dwkgl }}</div>
          <div class="itemUnit">MW</div>
        </div>
        <div class="contentItem">
          <div class="itemName">平发电量</div>
          <div class="itemNum">{{ items.plfdl }}</div>
          <div class="itemUnit">万kWh</div>
          <div class="itemName">平日强度</div>
          <div class="itemNum">{{ items.plrzqd }}</div>
          <div class="itemUnit">W/㎡</div>
          <div class="itemName">平功率</div>
          <div class="itemNum">{{ items.plgl }}</div>
          <div class="itemUnit">MW</div>
        </div>
        <div class="contentItem">
          <div class="itemName">宣发电量</div>
          <div class="itemNum">{{ items.xhfdl }}</div>
          <div class="itemUnit">万kWh</div>
          <div class="itemName">宣日强度</div>
          <div class="itemNum">{{ items.xhrzqd }}</div>
          <div class="itemUnit">W/㎡</div>
          <div class="itemName">宣功率</div>
          <div class="itemNum">{{ items.xhgl }}</div>
          <div class="itemUnit">MW</div>
        </div>
        <div class="contentItem">
          <div class="itemName">马发电量</div>
          <div class="itemNum">{{ items.mchfdl }}</div>
          <div class="itemUnit">万kWh</div>
          <div class="itemName">马日强度</div>
          <div class="itemNum">{{ items.mchrzqd }}</div>
          <div class="itemUnit">W/㎡</div>
          <div class="itemName">马功率</div>
          <div class="itemNum">{{ items.mchgl }}</div>
          <div class="itemUnit">MW</div>
        </div>
        <div class="contentItem">
          <div class="itemName">海发电量</div>
          <div class="itemNum">{{ items.hzjfdl }}</div>
          <div class="itemUnit">万kWh</div>
          <div class="itemName">海日强度</div>
          <div class="itemNum">{{ items.hzjrzqd }}</div>
          <div class="itemUnit">W/㎡</div>
          <div class="itemName">海功率</div>
          <div class="itemNum">{{ items.hzjgl }}</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 {
      items: {},
      timmer: null,
    };
  },

  // 函数
  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"));
      }
    },

    viewAjax() {
      let that = this;
      that.API.requestData({
        method: "GET",
        subUrl: "http://10.155.32.4:8034/bigscreen/list",
        success(res) {
          let keys = Object.keys(res.data);
          let items = res.data;
          keys.forEach((ele) => {
            if (items[ele].toFixed(2).split(".")[1] == "00") {
              items[ele] = items[ele].toFixed(2).split(".")[0];
            } else {
              items[ele] = items[ele].toFixed(2);
            }
          });
          that.items = items;
        },
      });
    },
  },

  created() {
    this.viewAjax();
    this.timmer = setInterval(() => {
      this.viewAjax();
    }, 6000);
  },

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

  unmounted() {
    clearInterval(this.timmer);
    this.timmer = null;
  },
};
</script>

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

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

    &:first-child {
      margin: 0;
	  .contentItem {
		  .itemNum {
			width: 157px !important;
		  }
	  }
    }

    .viewTitle {
      font-family: Arial, Helvetica, sans-serif;
      width: 30px;
      padding: 10px 40px;
      font-size: 29px;
      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: space-around;
      align-items: flex-start;
      flex-direction: column;
      font-family: Georgia, "Times New Roman", Times, serif;
      font-size: 29px;

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

        .size5 {
          width: 165px;
        }

        .size6 {
          width: 195px;
        }

        .itemName {
          min-width: 136px;
          padding: 0 10px;
          text-align: justify;
          text-align-last: justify;
        }

        .itemNum {
          font-family: Arial, Helvetica, sans-serif;
          color: red;
          width: 187px;
          margin-left: 15px;
        }

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