<template>
  <div class="equipment">
      <p class="info">设备设施</p>
      <div>
        <p><span class="state">设备运行</span>
        <span class="grade" v-if="namalRate>=99">优</span>
        <span class="grade" v-if="99>namalRate>=98">良好</span>
        <span class="grade" v-if="98>namalRate>=95">中</span>
        <span class="grade" v-if="namalRate<95">差</span>
        </p>
      </div>
      <p class="eq-total">设备总量  <span style="padding-left:10px"> {{eqCount}}</span></p>
      <div class="normal-equipment">
        <p>完好的设备 <span>{{normalCount}}（{{namalRate}}%）</span></p>
        <i-Progress :percent="namalRate" :stroke-width="14" />
      </div>
      <div class="normal-equipment">
        <p>故障的设备 <span>{{repairCount}}（{{repairRate}}%）</span></p>
        <i-Progress :percent="repairRate" :stroke-width="14" />
      </div>
     
  </div>
</template>

<script>
import axios from "axios";
var echarts = require("echarts");
export default {
  components: {},

  mixins: [],

  props: {},

  data() {
    return {
      eqCount: "",
      repairCount: "",
      normalCount: "",
      namalRate: 0,
      repairRate: 0
    };
  },

  computed: {},

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

  methods: {
    //设备设施
    getEqCount() {
      axios
        .get(`/equipment/info-mng-backend/saas/getEqRepairCount?projectId=${this.$store.state.projectId}`)
        .then(res => {
          if (res.data.result == "success") {
            let data = res.data.data;
            this.eqCount = data.eqCount;
            this.repairCount = data.repairCount;
            this.normalCount = this.eqCount - this.repairCount;
            this.namalRate = Math.floor(
              this.normalCount == 0
                ? 0
                : (this.normalCount / this.eqCount) * 100
            );
            this.repairRate = Math.floor(
              this.repairCount == 0
                ? 0
                : (this.repairCount / this.eqCount) * 100
            );
          }
        });
    }
  }
};
</script>

<style scoped lang="less" >
.equipment {
  border: 1px solid #ebecf0;
  background: #fff;
  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.05);
  border-radius: 3px;
  //font-size: 14px;
  .info {
    height: 50px;
    line-height: 50px;
    background: #f7f9fc;
    border: 0 solid #f2f2f2;
    padding-left: 20px;
    font-weight: bolder;
    font-size: 18px;
    color: #3b4254;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
  }
  .state {
    display: inline-block;
    color: #3b4254;
    padding-top: 32px;
    padding-left: 20px;
    height: 18px;
    line-height: 18px;
  }
  .grade {
    font-size: 23px;
    color: #73da99;
    display: inline-block;
    width: 60px;
    height: 40px;
    padding-left: 14px;
    text-align: center;
    line-height: 40px;
    margin-bottom: 38px;
  }
  .eq-total {
    width: 160px;
    height: 42px;
    line-height: 42px;
    background: #f4f5f8;
    border-radius: 1px;
    color: #62697b;
    margin-left: 20px;
    padding-left: 20px;
    > span {
      font-family: 'ArialMT';
      font-size: 20px;
      color: #4a9ef9;
    }
  }
  .normal-equipment {
    margin: 31.2px 0;
    padding-left: 20px;
    p {
      color: #62697b;
      padding-bottom: 12px;
      > span {
        padding-left: 10%;
      }
    }
  }
}
</style>
<style lang="less">
.equipment {
  .ivu-progress-text {
    display: none;
  }
  .ivu-progress-bg {
    // border-radius:1px;
  }
  .ivu-progress-inner {
    // border-radius:1px;
    background: #eaf0f8;
  }
}
</style>

