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

<template>
  <div class="equipmentLoadmodal">
    <el-dialog title="收货地址" :visible.sync="visible" class="my-info-dialog" @close="onClose">
      <tit :title="'监测明细'" style="width: 78%">
        <div class="tit-r">
          <span style="color: #fff;">选择设备：</span>
          <el-select size="mini" style="width: 1.2rem;margin-right: 0.26rem;" v-model="value" placeholder="请选择"
            @change="change">
            <el-option v-for="item in options" :key="item.name" :label="item.name" :value="item.name">
            </el-option>
          </el-select>
          <img src="../../../../public/img/energySources/close.png" alt="" srcset="" style="width: 12px; height: 12px;"
            @click="onClose">
        </div>
      </tit>
      <div class="emodal">
        <el-table :data="tableData" style="width: 100%; margin-top: 0.14rem;" height="90%" :stripe="true" :size="mini"
          :row-class-name="tableRowClassName">
          <el-table-column prop="name" label="设备名称" show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop="singleElectricity" label="用电量">
            <template slot-scope="scope">
              <span>{{ scope.row.singleElectricity }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="sendTime" label="时间" show-overflow-tooltip>
          </el-table-column>
        </el-table>
        <el-pagination background layout="prev, pager, next" small :total="total" style="text-align: right;" @current-change="currentChange">
        </el-pagination>
      </div>

    </el-dialog>
  </div>
</template>

<script>
import tit from "./tit.vue";
import { mapGetters } from "vuex";
import { getPeriodElectricity, getInstrumentRunDetail } from "@/api/energySources/energySources"
export default {
  data() {
    return {
      tableData: [],
      options: [],
      value: '',
      total: 0,
      current: 1,
      size: 10
    };
  },
  components: {
    tit
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    selectDay: {
      type: String
    }
  },
  watch: {
    visible(v) {
      if (v) {
        this.getData()
        this.getTableData()
      }
    }
  },
  computed: {
    ...mapGetters(["userInfo", "permission"]),
  },
  created() {
    this.getTableData()
    // this.getData()
  },
  methods: {
    getTableData() {
      getPeriodElectricity({ manufacturerBrand: this.userInfo.dept_name }).then(res => {
        this.options = res.data.data
        // this.value = this.options[0].name
      })
    },
    getData() {
      getInstrumentRunDetail({ manufacturerBrand: this.userInfo.dept_name, today: this.selectDay, name: this.value }).then(res => {
        console.log(res)
        this.tableData = res.data.records
        this.total = res.data.total
      })
    },
    getData() {
      getInstrumentRunDetail({
        manufacturerBrand: this.userInfo.dept_name,
        today:  this.selectDay,
        name: this.value,
        current: this.current,
        size: this.size
      }).then(res => {
        this.tableData = res.data.data.records
        this.total = res.data.data.total
      })
    },
    currentChange(v) {
      this.current = v
      this.getData()
    },
    change() {
      this.getData()
    },
    onClose() {
      this.$emit('onvisible', false)
    },
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex % 2 === 0) {
        if (row.loadRate > 0) {
          return 'trEven';
        } else {
          return 'trEven';
        }

      } else {
        if (row.loadRate > 0) {
          return 'trOdd';
        } else {
          return 'trOdd';
        }
      }
    }
  },
};
</script>
<style>
.my-info-dialog .el-dialog {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}

.my-info-dialog .el-dialog__header {
  display: none !important;
}

.my-info-dialog .el-dialog__body {
  padding: 0 !important;
}
</style>

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

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

.equipmentLoadmodal /deep/ .el-table td span {
  font-size: 0.14rem !important;
  font-family: Acumin-Pro-Condensed-Regular-2;
}

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

.equipmentLoadmodal /deep/ .trOdd td {
  color: #fff;
}

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

.equipmentLoadmodal /deep/.colorFB5E2D td {
  // color: #FB5E2D !important;
}


.equipmentLoadmodal /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;
}

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

.equipmentLoadmodal /deep/ .btn-prev {
  background: transparent !important;
  color: #fff !important;
}

.equipmentLoadmodal /deep/ .btn-next {
  background: transparent !important;
  color: #fff !important;
}

.equipmentLoadmodal /deep/ .el-pagination .is-background .el-pager li {
  background: transparent !important;
}

.emodal {

  width: 8.38rem;
  height: 6.14rem;

  background: url("../../../../public/img/energySources/modals.png");

  box-sizing: border-box;
  background-size: 100% 100%;
  margin-right: 0.22rem;
  padding: 0.54rem 0.22rem 0 0.22rem;
  position: relative;



}

.tit-r {
  font-size: 0.14rem;

  color: rgba($color: #fff, $alpha: 0.4);
  margin-top: 0.04rem;
}
</style>