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

<template>
  <div class="app-container">
    <el-card>
      <div style="margin-top: 7px; margin-bottom: 7px">
        <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()"/>
      </div>
      <el-table
        v-loading="loading"
        :data="tableData"
        highlight-current-row
        border
        stripe
        size="small"
        style="width: 771px"
        height="748"
        @sort-change="sortChange">
        <el-table-column
          :width="setColumnWidth('物料编号')"
          label="工位号"
          align="center"
          prop="状态"
          sortable="custom"
          show-overflow-tooltip>
          <template slot-scope="scope">
            {{ scope.row.工位号 }}
          </template>
        </el-table-column>
        <el-table-column
          :width="setColumnWidth('加工设备')"
          label="设备名称"
          align="center"
          sortable="custom"
          show-overflow-tooltip>
          <template slot-scope="scope">
            {{ scope.row.设备名称 }}
          </template>
        </el-table-column>
        <el-table-column
          :width="setColumnWidth('加工设备')"
          label="工作时长"
          align="center"
          sortable="custom"
          show-overflow-tooltip>
          <template slot-scope="scope">
            {{ scope.row.工作时长 }}
          </template>
        </el-table-column>
        <el-table-column :width="setColumnWidth('加工设备')" label="关机时长" align="center" sortable="custom">
          <template slot-scope="scope">
            {{ scope.row.关机时长 }}
          </template>
        </el-table-column>
        <el-table-column :width="setColumnWidth('加工设备')" label="报警时长" align="center" sortable="custom">
          <template slot-scope="scope">
            {{ scope.row.报警时长 }}
          </template>
        </el-table-column>
        <el-table-column :width="setColumnWidth('加工设备')" label="空闲时长H" sortable="custom" 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 {
      customerNameValue: '', // 买方名称
      customerName: [], // 买方名称数组
      dateRange: '', // 提交日期
      contractStateValue: '', // 合同状态
      contractState: [
        {
          value: 2,
          label: '未提交'
        }, {
          value: 1,
          label: '提交'
        }
      ], // 合同状态数组
      loading: false, // 数据加载
      total: 0, // 分页总数
      tableData: [], // 合同信息表
      pageCurrent: 1, // 分页当前页
      pageSize: 100, // 分页每页显示条数
      orderName: '', // 排序列名
      order: '' // 排序方式
    }
  },
  computed: {
    ...mapGetters([
      'id',
      'token'
    ])
  },
  created() {
    this.fetchData()
  },
  methods: {
    fetchData() {
      this.getCustomer('')
    },
    getCustomer(query) {
      this.customerName = []
      var param = []
      param[0] = ['客户名称', query]
      var Data = this.CreateData('11', '合同管理_客户信息_查询数据_bak', param)
      this.ExecDatabase(Data).then(response => {
        for (let i = 0; i < response.data.length; i++) {
          this.customerName.push({
            label: response.data[i].客户名称,
            value: response.data[i].客户流水号
          })
        }
      })
    },
    searchTable() {
      var param = []
      param[0] = ['排序名称', this.orderName]
      param[1] = ['排序方式', this.order]
      param[2] = ['开始时间', this.dateRange[0]]
      param[3] = ['结束时间', this.dateRange[1]]
      var Data = this.CreateData('11', '设备管理_设备状态统计_查询数据', param, this.pageSize, this.pageCurrent)
      this.ExecDatabase(Data).then(response => {
        for (let i = 0; i < response.data.length; i++) {
          this.tableData.push({
            工位号: response.data[i].工位号,
            设备名称: response.data[i].设备名称,
            工作时长: response.data[i].工作时长,
            关机时长: response.data[i].关机时长,
            报警时长: response.data[i].报警时长,
            空闲时长: response.data[i].空闲时长,
            edit: false
          })
        }
        this.tableData = response.data.rows
        this.total = response.data.total
      })
    },
    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()
    },
    handleSizeChanges(val) {
      this.pageCurrent = 1
      this.pageSize = val
      this.searchTable()
    },
    handleCurrentChanges(val) {
      this.pageCurrent = val
      this.searchTable()
    }
  }
}
</script>