jiahe_device/src/views/energySources/component/equipmentAnalyze.vue

<template>
  <div class="equipmentAnalyze box">
    <tit :title="'设备日均负载分析'">
      <div class="tit-r">
        <span style="color: #fff;">选择时间：</span>
        <el-date-picker size="mini" v-model="selectDay" type="date" placeholder="选择月" @change="changeDate"
          style="width: 1.3rem;margin-right: 0.26rem;" value-format="yyyy-MM-dd" format="yyyy-MM-dd">
        </el-date-picker>
      </div>
    </tit>
    <el-table :data="tableData" style="width: 100%;" height="92%" :stripe="true" :size="mini"
      :row-class-name="tableRowClassName">
      <el-table-column prop="name" label="设备名称" show-overflow-tooltip>
        <template slot-scope="scope">
          <span style="color: #fff;font-size: 0.14rem;">{{ scope.row.name }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="kongzai" label="空载">
        <template slot-scope="scope">
          <span :style="{ color: scope.row.kongzai > 0 ? '#10EFBD' : 'rgba($color: #fff, $alpha: 0.2)' }">{{
            scope.row.kongzai }}%</span>
        </template>
      </el-table-column>
      <el-table-column prop="qingzai" label="轻载">
        <template slot-scope="scope">
          <span :style="{ color: scope.row.qingzai > 0 ? '#00A2FF' : 'rgba($color: #fff, $alpha: 0.2)' }">{{
            scope.row.qingzai }}%</span>
        </template>
      </el-table-column>
      <el-table-column prop="zhengchang" label="正常">
        <template slot-scope="scope">
          <span :style="{ color: scope.row.zhengchang > 0 ? '#fff' : 'rgba($color: #fff, $alpha: 0.2)' }">{{
            scope.row.zhengchang
          }}%</span>
        </template>
      </el-table-column>
      <el-table-column prop="guozai" label="过载">
        <template slot-scope="scope">
          <span :style="{ color: scope.row.guozai > 0 ? '#FBA62D' : 'rgba($color: #fff, $alpha: 0.2)' }">{{
            scope.row.guozai }}%</span>
        </template>
      </el-table-column>
      <el-table-column prop="zhongzai" label="重载">
        <template slot-scope="scope">
          <span :style="{ color: scope.row.zhongzai > 0 ? '#FB5E2D' : 'rgba($color: #fff, $alpha: 0.2)' }">{{
            scope.row.zhongzai }}%</span>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import tit from "./tit.vue";

import { mapGetters } from "vuex";
import { getInstrumentDaylyLoad } from "@/api/energySources/energySources"
export default {
  data() {
    return {
      selectDay: "",
      tableData: [],
      timeFun: null
    };
  },
  components: {
    tit
  },
  computed: {
    ...mapGetters(["userInfo", "permission"]),
  },
  created() {
    this.selectDay = this.$moment().format('YYYY-MM-DD')
    this.getTotalData()
    this.timeFun = setInterval(() => {
      this.getTotalData()
    }, 300000)
  },
  beforeDestroyed() {
    clearInterval(this.timeFun)
  },
  methods: {
    changeDate() {
      this.getTotalData()
    },
    getTotalData() {
      getInstrumentDaylyLoad({ manufacturerBrand: this.userInfo.dept_name, today: this.selectDay }).then(res => {
        this.tableData = res.data.data;
        // this.yearNum = data.currentYear.toString().split('')
        // this.monthNum = data.currentMonth.toString().split('')
        // this.yesterdayNum = data.yesterday.toString().split('')
        // this.todayNum = data.today.toString().split('')
      })
    },
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex % 2 === 0) {

        return 'trEven';
      } else {
        return '';
      }
    }
  },
};
</script>
<style></style>
<style lang="scss" scoped>
.equipmentAnalyze /deep/ .el-table,
.equipmentAnalyze /deep/ .el-table__expanded-cell {
  background-color: transparent;
  border: 0 !important;
}

.equipmentAnalyze /deep/ .el-table th,
.equipmentAnalyze /deep/ .el-table tr,
.equipmentAnalyze /deep/ .el-table td {
  background-color: transparent !important;
  border: 0 !important;
}

.equipmentAnalyze /deep/ .el-table td span {
  font-size: 0.18rem;
  font-family: Acumin-Pro-Condensed-Regular-2;
}

.equipmentAnalyze /deep/ .el-table::before {
  height: 0 !important;
}

.equipmentAnalyze /deep/ .trEven td {
  background: rgba($color: #0de5ff, $alpha: 0.1) !important;
}

.equipmentAnalyze /deep/ .el-input__inner {
  background: transparent !important;
  color: #fff !important;
  border-radius: 0;
  border-color: rgba($color: #fff, $alpha: 0.2) !important;
  height: 0.24rem !important;
}

.equipmentAnalyze /deep/ .el-input__icon {
  line-height: 0.24rem !important;
}

.box {
  width: 6.78rem;
  height: 3.7rem;
  box-sizing: border-box;
  background: url("../../../../public/img/energySources/equipmentAnalyze.png");
  background-size: 100% 100%;
  padding: 0.54rem 0.22rem 0 0.22rem;
  position: relative;

  .tit-r {
    font-size: 0.14rem;
    color: #0096FF;
    margin-top: 0.04rem;
  }

}
</style>