JY1.0/src/views/DeviceManagement/EquipmentEnergy/index.vue

<template>
  <div class="app-container">
    <el-card>
      <div style="margin-top: 7px; margin-bottom: 7px">
        <el-select v-model="MachineValue" filterable size="small" style="width:160px" placeholder="选择工位-设备">
          <el-option
            v-for="item in Machine"
            :key="item.value"
            :label="item.label"
            :value="item.value"
            @change="searchTable()">
            <div style="float: left">{{ item.label }}</div>
            <div style="float: right; color: #8492a6; font-size: 13px">{{ item.value2 }}</div>
          </el-option>
        </el-select>
        <span style="font-size: 13px;color: black">日期</span>
        <el-date-picker
          v-model="dateRange"
          size="small"
          type="daterange"
          align="center"
          style="width: 240px;"
          value-format="yyyy-MM-dd"
          format="yyyy-MM-dd"
          range-separator="～"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          @change="searchTable()"/>
        <el-button type="primary" plain size="small" icon="el-icon-search" style="margin-left: 15px" @click="searchTable()">查询</el-button>
      </div>
      <el-table v-loading="loading" :data="tableData" highlight-current-row border stripe size="small" style="width: 1091px" height="750" @sort-change="sortChange">
        <el-table-column :width="setColumnWidth('物料编号')" label="工位号" prop="工位" align="center" sortable="custom" show-overflow-tooltip>
          <template slot-scope="scope">
            {{ scope.row.工位 }}
          </template>
        </el-table-column>
        <el-table-column :width="setColumnWidth('加工设备')" label="设备名称" prop="设备" align="center" sortable="custom" show-overflow-tooltip>
          <template slot-scope="scope">
            {{ scope.row.设备 }}
          </template>
        </el-table-column>
        <el-table-column :width="setColumnWidth('加工设备')" label="工作时长" prop="生产H" align="center" sortable="custom" show-overflow-tooltip>
          <template slot-scope="scope">
            {{ scope.row.生产h }}
          </template>
        </el-table-column>
        <el-table-column :width="setColumnWidth('加工设备')" label="关机时长" prop="关机H" align="center" sortable="custom" show-overflow-tooltip>
          <template slot-scope="scope">
            {{ scope.row.关机h }}
          </template>
        </el-table-column>
        <el-table-column :width="setColumnWidth('加工设备')" label="报警时长" prop="报警H" align="center" sortable="custom" show-overflow-tooltip>
          <template slot-scope="scope">
            {{ scope.row.报警h }}
          </template>
        </el-table-column>
        <el-table-column :width="setColumnWidth('加工设备')" label="空闲时长" prop="空闲H" align="center" sortable="custom" show-overflow-tooltip>
          <template slot-scope="scope">
            {{ scope.row.空闲h }}
          </template>
        </el-table-column>
        <el-table-column :width="setColumnWidth('加工设备')" label="有用电量" align="center">
          <template slot-scope="scope">
            {{ scope.row.有功电量 }}
          </template>
        </el-table-column>
        <el-table-column label="无用电量" align="center">
          <template slot-scope="scope">
            {{ scope.row.无功电量 }}
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  data() {
    return {
      MachineValue: '',
      Machine: [],
      dateRange: '', // 提交日期
      loading: false, // 数据加载
      total: 0, // 分页总数
      tableData: [],
      pageCurrent: 1, // 分页当前页
      pageSize: 100, // 分页每页显示条数
      orderName: '', // 排序列名
      order: '' // 排序方式
    }
  },
  computed: {
    ...mapGetters([
      'id',
      'token'
    ])
  },
  created() {
    this.fetchData()
  },
  methods: {
    // fetchData() {
    //   this.getCustomer()
    // },
    fetchData() {
      var param = []
      var Data = this.CreateData('11', '车间生产管理工艺_加工顺序调整_查询工位及人员', param)
      this.ExecDatabase(Data).then(response => {
        for (let i = 0; i < response.data.length; i++) {
          this.Machine.push({
            label: response.data[i].终端编号,
            value: response.data[i].终端编号,
            value2: response.data[i].设备名称
          })
        }
      })
    },
    searchTable() {
      let MachineValue_check, dateRange_check
      this.MachineValue ? MachineValue_check = 1 : MachineValue_check = 0
      this.dateRange ? dateRange_check = 1 : (dateRange_check = 0, this.dateRange = '')
      var param = []
      param[0] = ['排序名称', this.orderName]
      param[1] = ['排序方式', this.order]
      param[2] = ['开始时间', this.dateRange[0]]
      param[3] = ['结束时间', this.dateRange[1]]
      param[4] = ['时间_check', dateRange_check]
      param[5] = ['工位号_check', MachineValue_check]
      param[6] = ['工位号', this.MachineValue]
      if (this.dateRange[0] === undefined || this.dateRange[1] === undefined) {
        this.$message.error('请选择时间')
      } else {
        var Data = this.CreateData('11', '设备管理_设备能耗统计_查询数据', param, this.pageSize, this.pageCurrent)
        this.ExecDatabase(Data).then(response => {
          this.tableData = response.data.rows
          console.log(this.tableData)
          this.total = response.data.total
          // console.log(response.data, '刘浩')
        })
      }
    },
    // sortChange(column) {
    //   if (column.prop === '状态') {
    //     this.orderName = 1
    //   }
    //   if (column.order === 'ascending') {
    //     this.order = 1
    //   } else if (column.order === 'descending') { this.order = 2 } else {
    //     this.order = ''
    //   }
    //   this.searchTable()
    // },
    sortChange(column) {
      if (column.prop === '生产H') {
        this.orderName = 1
      } else if (column.prop === '关机H') {
        this.orderName = 2
      } else if (column.prop === '报警H') {
        this.orderName = 3
      } else if (column.prop === '空闲H') {
        this.orderName = 4
      } else {
        this.orderName = 0
      }
      if (column.order === 'ascending') {
        this.order = 1
      } else if (column.order === 'descending') { this.order = 2 } else {
        this.order = ''
      }
      this.searchTable1()
    },
    handleSizeChanges(val) {
      this.pageCurrent = 1
      this.pageSize = val
      this.searchTable()
    },
    handleCurrentChanges(val) {
      this.pageCurrent = val
      this.searchTable()
    }
  }
}
</script>

<style>

</style>