sis_zhfx/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">
        <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="提升率" />
        <card-1
          class="increase-info"
          title="风能利用率"
          :value="fnlyl_"
          :isIncrease="fnlyl_ >= 0"
        />
        <card-1
          class="increase-info"
          title="综合场用电率"
          :value="zhcydl_"
          :isIncrease="zhcydl_ >= 0"
        />
      </Col>
      <Col :span="12">
        <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="降低率" />
        <card-1
          class="increase-info"
          title="设备可利用率"
          :value="sbklyl_"
          :isIncrease="sbklyl_ >= 0"
        />
        <card-1
          class="increase-info"
          title="存在隐患风机"
          :value="yhfj_"
          :isIncrease="yhfj_ >= 0"
        />
      </Col>
    </row>
  </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: 30,
      // 避免故障
      bmgz_: 32,
      // 提升率
      tsl_: 0,
      // 降低率
      jdl_: '61',
      // 风能利用率
      fnlyl_: 0,
      // 设备科利用率
      sbklyl_: 0,
      // 综合场用电率
      zhcydl_: 0,
      // 存在隐患风机
      yhfj_: 0,
    };
  },
  mounted() {
    this.bmgz_ = this.bmgz ? this.bmgz : 32;
    this.tsl_ = this.tsl;
    this.jdl_ = this.jdl_ ? this.jdl_ : 61;
    this.fnlyl_ = this.fnlyl;
    this.sbklyl_ = this.sbklyl;
    this.zhcydl_ = this.zhcydl;
    this.yhfj_ = this.yhfj;
  },
  methods: {
    selectionItemClick(item) {
      // console.log(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: 0.741vh;
    }
    .value {
      font-size: @fontsize;
    }
  }

  .increase-info {
    margin: 30px 0;

    &:last-child {
      margin-top: 4.4444vh;
      margin-bottom: 24px;
    }
  }

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

    &.green use {
      fill: @green;
    }

    &.yellow use {
      fill: @yellow;
    }
  }
}
</style>