fd_dwgz_zhyw_nx/src/views/Home/components/coulometric-analysis.vue

<template>
  <div class="coulometric-analysis">
    <tab @select="selectionItemClick" v-if="false" />
    <row style="margin-top: 36px">
      <Col :span="12" style="padding-left: 7%">
        <div class="coulometric-info">
          <svg-icon svgid="svg-arrow-up" class="icon green" />
          <span class="title gray">增发电量</span>
          <span class="value">{{ AddElectricity }}</span>
        </div>
        <percent-card :value="tsl_" color="green" title="提升率" />
      </Col>
      <Col :span="12" style="padding-left: 7%">
        <div class="coulometric-info">
          <svg-icon svgid="svg-arrow-down" class="icon yellow" />
          <span class="title gray">避免故障</span>
          <span class="value">{{ bmgz_ }}次</span>
        </div>
        <percent-card :value="jdl_" color="yellow" title="降低率" />
      </Col>
    </row>
    <div class="rate">
      <card-1
        class="increase-info"
        title="设备可利用率"
        :value="sbklyl_"
        :isIncrease="sbklyl_ >= 0"
      />
      <card-1
        class="increase-info"
        title="风能利用率"
        :value="fnlyl_"
        :isIncrease="fnlyl_ >= 0"
      />
      <card-1
        class="increase-info"
        title="综合场用电率"
        :value="zhcydl_"
        :isIncrease="zhcydl_ >= 0"
      />
    </div>
  </div>
</template>

<script>
import percentCard from "@/components/coms/cards/percent-card.vue";
import Col from "@/components/coms/grid/col.vue";
import Row from "@/components/coms/grid/row.vue";
import Tab from "@/components/coms/tabs/tab.vue";
import SvgIcon from "@/components/coms/icon/svg-icon.vue";
import Card1 from "../../../components/coms/cards/card-1.vue";

export default {
  components: { percentCard, Row, Col, Tab, SvgIcon, Card1 },
  props: {
    bmgz: {
      type: Number,
      default: 0,
    },
    tsl: {
      type: Number,
      default: 0,
    },
    jdl: {
      type: Number,
      default: 0,
    },
    fnlyl: {
      type: Number,
      default: 0,
    },
    sbklyl: {
      type: Number,
      default: 0,
    },
    zhcydl: {
      type: Number,
      default: 0,
    },
    yhfj: {
      type: Number,
      default: 0,
    },
  },
  data() {
    // 电量分析
    return {
      // 增发电量
      AddElectricity: 0,
      // 避免故障
      bmgz_: 0,
      // 提升率
      tsl_: 0,
      // 降低率
      jdl_: "0",
      // 风能利用率
      fnlyl_: 0,
      // 设备科利用率
      sbklyl_: 0,
      // 综合场用电率
      zhcydl_: 0,
      // 存在隐患风机
      yhfj_: 0,
    };
  },
  mounted() {
    this.bmgz_ = this.bmgz ? this.bmgz : 0;
    this.tsl_ = this.tsl;
    this.jdl_ = this.jdl_ ? this.jdl_ : 0;
    this.fnlyl_ = this.fnlyl;
    this.sbklyl_ = this.sbklyl;
    this.zhcydl_ = this.zhcydl;
    this.yhfj_ = this.yhfj;
  },
  methods: {
    selectionItemClick(item) {},
  },
  watch: {
    bmgz(res) {
      this.bmgz_ = res;
    },
    tsl(res) {
      this.tsl_ = res;
    },
    jdl(res) {
      this.jdl_ = res;
    },
    fnlyl(res) {
      this.fnlyl_ = res;
    },
    sbklyl(res) {
      this.sbklyl_ = res;
    },
    zhcydl(res) {
      this.zhcydl_ = res;
    },
    yhfj(res) {
      this.yhfj_ = res;
    },
  },
};
</script>

<style lang="less">
.coulometric-analysis {
  padding: 0 8px;

  .coulometric-info {
    margin-bottom: 1.4815vh;

    .title {
      font-size: @fontsize;
      margin-right: 10px;
    }

    .value {
      font-size: @fontsize;
    }
  }

  .increase-info {
    width: 33%;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .icon {
    width: 1.204vh;
    height: 1.204vh;
    margin-right: 10px;

    &.green use {
      fill: @green;
    }

    &.yellow use {
      fill: @yellow;
    }
  }
}

.rate {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin: 3% 0% 3% 0%;
}
</style>