<template>
  <div id="app-container-annual">
    <div class="annual-box">
      <div>
        <div class="m-7" style="position: relative;">
          <div class="m-7-k">
            <div class="m-7xz1 xzleft"></div>
            <div class="m-7xz2"></div>
            <div class="m-7xz3 xzleft"></div>
            <div class="m-7zt1">{{ $t('年产量') }}%</div>
            <div class="m-7zt2" id="sx1">{{ dashboarddata.outputAnnual }}</div>
          </div>
        </div>
      </div>
      <div style="margin:auto; top: 0; bottom: 0;margin-left: -0.5rem; right: 0;width: 100%; display: flex;flex-wrap: wrap;justify-content: space-between;align-items: flex-start;">
        <!--<div class="annual">2233 t</div>
        <dv-decoration-8 :reverse="true" style="width:150px;height:30px;" />-->
        <div style="margin-bottom:20px">
          <div style="margin-left: 0.35rem; margin-bottom: -0.2rem; font-weight:bold">C2H4</div>
          <dv-border-box-10 style="width:110px; height:0.7rem;">
            <div class="annual">{{ dashboarddata.outputYixi }} t</div>
          </dv-border-box-10>
        </div>

        <div style="margin-bottom:20px">
          <div style="margin-left: 0.35rem; margin-bottom: -0.2rem; font-weight:bold">C3H6</div>
          <dv-border-box-10 :reverse="true" style="width:110px; height:0.7rem">
            <div class="annual">{{ dashboarddata.outputBx }} t</div>
          </dv-border-box-10>
        </div>

        <div style="margin-bottom:20px">
          <div style="margin-left: 0.35rem; margin-bottom: -0.2rem;  font-weight:bold">瞬时能耗</div>
          <dv-border-box-10 :reverse="true" style="width:110px; height:0.7rem">
            <div class="annual">{{ dashboarddata.instantaneous }}</div>
          </dv-border-box-10>
        </div>

        <div style="margin-bottom:20px">
          <div style="margin-left: 0.35rem; margin-bottom: -0.2rem; font-weight:bold">累计能耗</div>
          <dv-border-box-10 :reverse="true" style="width:110px; height:0.7rem">
            <div class="annual">{{ dashboarddata.cumulative }}</div>
          </dv-border-box-10>
        </div>
        <!--<div class="annual">650 t</div>
        <dv-decoration-8 :reverse="true" style="width:150px;height:30px;" />-->
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: ['dashboarddata']
}
</script>

<style lang="scss">
  #app-container-annual {
    padding: 0.2rem 0.2rem 0;
    height: 220px;
    // min-width: 3.75rem;
    width: 100%;
    border-radius: 0.0625rem;
    .bg-color-black {
      height: 2.5rem;
      border-radius: 0.125rem;
    }
    .text {
      color: #c3cbde;
    }
  }
</style>
