sisweb/src/views/index/index.vue

<template>
  <div class="page">
    
    <!-- 左侧地图区域 -->
    <div class="mapControl">
      <bdMap></bdMap>
    </div>
    
    <!-- 右侧数据区域 -->
    <div class="data">
      <!-- 综合指标 -->
      <div class="item shadow">
        <div class="title">综合指标</div>
        <div class="con">
          
          <div class="one">
            <div class="name"><div>装机容量</div></div>
            <div class="number"><div>734</div></div>
            <div class="unit"><div>MW</div></div>
          </div>
          <div class="one">
            <div class="name"><div>上网电量(日)</div></div>
            <div class="number"><div>734</div></div>
            <div class="unit"><div>万kwh</div></div>
          </div>
          <div class="one">
            <div class="name"><div>日发电量</div></div>
            <div class="number"><div>734</div></div>
            <div class="unit"><div>万kwh</div></div>
          </div>
          <div class="one">
            <div class="name"><div>月发电量</div></div>
            <div class="number"><div>734</div></div>
            <div class="unit"><div>万kwh</div></div>
          </div>
          <div class="one">
            <div class="name"><div>年发电量</div></div>
            <div class="number"><div>734</div></div>
            <div class="unit"><div>万kwh</div></div>
          </div>
          
          <div class="one">
            <div class="name"><div>年等效可用系数</div></div>
            <div class="number"><div>734</div></div>
            <div class="unit"><div>%</div></div>
          </div>
          <div class="one">
            <div class="name"><div>利用小时(月)</div></div>
            <div class="number"><div>734</div></div>
            <div class="unit"><div>小时</div></div>
          </div>
          <div class="one">
            <div class="name"><div>日故障损失电量</div></div>
            <div class="number"><div>734</div></div>
            <div class="unit"><div>万kwh</div></div>
          </div>
          <div class="one">
            <div class="name"><div>月故障损失电量</div></div>
            <div class="number"><div>734</div></div>
            <div class="unit"><div>万kwh</div></div>
          </div>
          <div class="one">
            <div class="name"><div>年故障损失电量</div></div>
            <div class="number"><div>734</div></div>
            <div class="unit"><div>万kwh</div></div>
          </div>
          
          <div class="one">
            <div class="name"><div>装机台数</div></div>
            <div class="number"><div>734</div></div>
            <div class="unit"><div>台</div></div>
          </div>
          <div class="one">
            <div class="name"><div>运行台数</div></div>
            <div class="number"><div>734</div></div>
            <div class="unit"><div>台</div></div>
          </div>
          <div class="one">
            <div class="name"><div>日维护损失电量</div></div>
            <div class="number"><div>734</div></div>
            <div class="unit"><div>万kwh</div></div>
          </div>
          <div class="one">
            <div class="name"><div>月维护损失电量</div></div>
            <div class="number"><div>734</div></div>
            <div class="unit"><div>万kwh</div></div>
          </div>
          <div class="one">
            <div class="name"><div>年维护损失电量</div></div>
            <div class="number"><div>734</div></div>
            <div class="unit"><div>万kwh</div></div>
          </div>
          
          <div class="one">
            <div class="name"><div>待机台数</div></div>
            <div class="number"><div>734</div></div>
            <div class="unit"><div>台</div></div>
          </div>
          <div class="one">
            <div class="name"><div>维护台数</div></div>
            <div class="number"><div>734</div></div>
            <div class="unit"><div>台</div></div>
          </div>
          <div class="one">
            <div class="name"><div>日性能损失电量</div></div>
            <div class="number"><div>734</div></div>
            <div class="unit"><div>万kwh</div></div>
          </div>
          <div class="one">
            <div class="name"><div>月性能损失电量</div></div>
            <div class="number"><div>734</div></div>
            <div class="unit"><div>万kwh</div></div>
          </div>
          <div class="one">
            <div class="name"><div>年性能损失电量</div></div>
            <div class="number"><div>734</div></div>
            <div class="unit"><div>万kwh</div></div>
          </div>
          
          <div class="one">
            <div class="name"><div>故障台数</div></div>
            <div class="number"><div>734</div></div>
            <div class="unit"><div>台</div></div>
          </div>
          <div class="one">
            <div class="name"><div>中断台数</div></div>
            <div class="number"><div>734</div></div>
            <div class="unit"><div>台</div></div>
          </div>
          <div class="one">
            <div class="name"><div>日限电损失电量</div></div>
            <div class="number"><div>734</div></div>
            <div class="unit"><div>万kwh</div></div>
          </div>
          <div class="one">
            <div class="name"><div>月限电损失电量</div></div>
            <div class="number"><div>734</div></div>
            <div class="unit"><div>万kwh</div></div>
          </div>
          <div class="one">
            <div class="name"><div>年限电损失电量</div></div>
            <div class="number"><div>73.41</div></div>
            <div class="unit"><div>万kwh</div></div>
          </div>
          
        </div>
      </div>
      <!-- 完成电量 -->
      <div class="item2">
        <div class="finishedPower shadow">
          <div class="title">完成电量</div>
          <div class="con">
            <div id="finishedPower" class="comReport"></div>
          </div>
        </div>
        <div class="powerLoad shadow">
          <div class="title">功率负荷</div>
          <div class="con">
            <div id="powerLoad" class="comReport"></div>
          </div>
        </div>
      </div>
      <!-- 功率曲线 -->
      <div class="item">
        <div class="title">功率曲线</div>
        <div class="con">
          <div id="powerLine" class="comReport"></div>
        </div>
      </div>
      <!-- 日发电量 -->
      <div class="item">
        <div class="title">日发电量</div>
        <div class="con">
          <div id="dayPowerTotal" class="comReport"></div>
        </div>
      </div>

    </div>

  </div>
</template>


<script>
  import index from '@assets/js/index/index'
  export default index
</script>

<style lang="scss" scoped>
  @import "@assets/css/index/index.scss";
</style>