<template>
  <div id="frontTwo">
    <div class="bg-color-black">
      <div class="content-box">
        <div>
          <!--<dv-decoration-11 style="width:200px;height:60px;">裂解炉</dv-decoration-11>
          <dv-decoration-11 style="width:200px;height:60px;">急冷油塔</dv-decoration-11>
          <dv-decoration-11 style="width:200px;height:60px;">压缩机</dv-decoration-11>-->
          <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item @click="changeType(1)">裂解炉</el-breadcrumb-item>
            <el-breadcrumb-item @click="changeType(2)">急冷油塔</el-breadcrumb-item>
            <el-breadcrumb-item>压缩机</el-breadcrumb-item>
          </el-breadcrumb>
        </div>
        <div v-if="equipmentType === 1">
          <cracking-chart />
        </div>
        <div v-if="equipmentType === 2">
          123
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import crackingChart from "../dashboard/crackingChart"
  export default {
    data() {
      return {
        equipmentType: 1,
      };
    },
    name: "materialBalance",
    components: {
      crackingChart
    },
    methods: {
      changeType(val) {
        if (val === 1) {
          this.equipmentType = 1
        }else if (val === 2) {
          this.equipmentType = 2
        }else if (val === 3) {
          this.equipmentType = 3
        }
      }
    }
  }
</script>

<style lang="scss">
  #frontTwo {
    padding: 0.2rem;
    height: 11.7rem;
    min-width: 3.75rem;
    border-radius: 0.0625rem;
    .bg-color-black {
      height: 11.5rem;
      border-radius: 0.125rem;
    }
    .text {
      color: #c3cbde;
    }
    .chart-box {
      margin-top: 0.2rem;
      width: 2.125rem;
      height: 2.125rem;
      .active-ring-name {
        padding-top: 0.125rem;
      }
    }

    .bottom-data {
      .item-box {
        float: right;
        position: relative;
        width: 50%;
        color: #d3d6dd;
        // 金币
        .coin {
          position: absolute;
          left: 0.1rem;
          top: 0.2125rem;
          font-size: 0.25rem;
          color: #ffc107;
        }
        .colorYellow {
          color: yellowgreen;
        }
      }
    }
  }
</style>
