hb_sis_zhfx/src/views/sisView/index.vue

<template>
  <div class="sisViewBox">
    <div class="viewItem">
      <clock :width="330" :height="290" />
      <div class="viewTitle">综<br /><br />合<br /><br />参<br /><br />数</div>
      <div class="contentBox">
        <div class="contentItem">
          <div class="itemName">装机容量</div>
          <div class="itemNum">{{items.zjrl}}</div>
          <div class="itemUnit">MW</div>
          <div class="itemName">安全天数</div>
          <div class="itemNum">{{items.aqts}}</div>
          <div class="itemUnit">天</div>
          <div class="itemName">总功率</div>
          <div class="itemNum">{{items.zgl}}</div>
          <div class="itemUnit">MW</div>
        </div>
        <div class="contentItem">
          <div class="itemName">日发电量</div>
          <div class="itemNum">{{items.rfdl}}</div>
          <div class="itemUnit">万kWh</div>
          <div class="itemName">年利用小时</div>
          <div class="itemNum">{{items.nlyxs}}</div>
          <div class="itemUnit">小时</div>
          <div class="itemName">年发电量</div>
          <div class="itemNum">{{items.nfdl}}</div>
          <div class="itemUnit">万kWh</div>
        </div>
        <div class="contentItem">
          <div class="itemName">上网电量</div>
          <div class="itemNum">{{items.swdl}}</div>
          <div class="itemUnit">万kWh</div>
          <div class="itemName">月利用小时</div>
          <div class="itemNum">{{items.ylyxs}}</div>
          <div class="itemUnit">小时</div>
          <div class="itemName">月发电量</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">年计划电量</div>
          <div class="itemNum">{{items.njhdl}}</div>
          <div class="itemUnit">万kWh</div>
          <div class="itemName">年完成率</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">月计划电量</div>
          <div class="itemNum">{{items.yjhdl}}</div>
          <div class="itemUnit">万kWh</div>
          <div class="itemName">月完成率</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">月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">月可靠性</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:{}
	};
  },

  // 函数
  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() {
	  var that = this;
	  that.API.requestData({
	    method: "GET",
	    subUrl: "http://10.155.32.4:8034/bigscreen/list",
	    success(res) {
			var keys = Object.keys(res.data);
			var 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();
	  setInterval(() => {this.viewAjax()},1000);
  },
  mounted() {
    this.resetViewTitleHeight();
  },
};
</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: 10px 0;

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

    .viewTitle {
      font-family: Arial, Helvetica, sans-serif;
      width: 30px;
      padding: 10px 40px;
      font-size: 25px;
      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: 25px;

      .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;
        }

        .itemNum {
          font-family: Arial, Helvetica, sans-serif;
          color: #f25656;
          width: 130px;
        }

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