11-mes-new/src/views/EquipmentManager/equipmentMonitoring/currentState.vue

<!--
 * @Author: lb
 * @Date: 2022-07-11 15:36:52
 * @LastEditors: lb
 * @LastEditTime: 2022-07-11 15:36:52
 * @FilePath:
 * @Description: 设备管理-设备当前状态页面
-->
<template>
  <div class="app-container">
    <head-form :form-config="headFormConfig" @headBtnClick="btnClick" />
    <base-table
      :page="listQuery.current"
      :limit="listQuery.size"
      :table-config="tableProps"
      :table-data="dataList"
      @emitFun="handleTableEvents"
    >
      <!-- @clickTopBtn="clickTopBtn" -->
      <!-- :is-loading="listLoading" -->
      <!-- <method-btn slot="handleBtn" :width="trueWidth" :method-list="tableBtn" @clickBtn="handleClick" /> -->
    </base-table>
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="listQuery.current"
      :limit.sync="listQuery.size"
      @pagination="getList()"
    />
  </div>
</template>

<script>
import { list, getProductLineList, getEquipmentList } from '@/api/factory-manage/equipmentMonitoring'
import HeadForm from '@/components/basicData/HeadForm'
import BaseTable from '@/components/BaseTable'
import Pagination from '@/components/Pagination' // Secondary package based on el-pagination'
// import { timeFormatter } from '@/filters'
// import i18n from '@/lang'
import commonBtn from '@/components/BaseTable/subcomponents/CommonBtn.vue'
/**
 * 表格表头配置项 TypeScript接口注释
 * tableConfig<ConfigItem> = []
 *
 * Interface ConfigItem = {
 *  prop: string,
 *  label: string,
 *  width: string,
 *  align: string,
 *  subcomponent: function,
 *  filter: function
 * }
 *
 *
 */
// const tableBtn = [
//   {
//     type: 'detail',
//     btnName: 'btn.detail'
//   },
//   {
//     type: 'edit',
//     btnName: 'btn.alarmHandle',
//     showParam: {
//       type: '&',
//       data: [
//         {
//           name: 'status',
//           type: 'unequal',
//           value: 3
//         }
//       ]
//     }
//   }
// ]
const tableProps = [
  {
    prop: 'eqName',
    label: '设备名称'
  },
  {
    prop: 'status',
    label: '运行状态'
  },
  {
    prop: 'error',
    label: '是否故障'
  },
  {
    prop: '报警记录',
    label: '报警记录',
    subcomponent: commonBtn,
    buttonContent: '查看报警记录',
    actionName: 'view-alarm-record',
    emitFullData: true
  }
]

export default {
  name: 'EquipmentCurrentStateMonitoring',
  components: { Pagination, BaseTable, HeadForm },
  data() {
    return {
      // addOrUpdateVisible: false,
      // showDetail: false,
      // tableBtn,
      // trueWidth: 80,
      tableProps,
      dataList: [],
      total: 0,
      listLoading: true,
      listQuery: {
        current: 1,
        size: 20
      },
      headFormConfig: [
        {
          type: 'select',
          label: '产线',
          placeholder: '产线',
          selectOptions: [],
          param: 'lineId',
          defaultSelect: ''
        },
        {
          type: 'select',
          label: '设备名称', // 输入过滤
          placeholder: '设备名称',
          filterable: true,
          valueField: 'name',
          param: 'eqName',
          selectOptions: [],
          defaultSelect: ''
        },
        // {
        //   type: 'datePicker',
        //   label: this.$t('module.factory.abnormalAlarm.timeQuantum'),
        //   dateType: 'daterange',
        //   rangeSeparator: '-',
        //   startPlaceholder: this.$t('module.orderManage.order.StartTime'),
        //   endPlaceholder: this.$t('module.orderManage.order.StartTime'),
        //   param: 'timeSlot'
        // },
        {
          type: 'button',
          btnName: 'btn.search',
          name: 'search',
          color: 'primary'
        }
      ],
      headFormValue: {}
    }
  },
  created() {
    this.getList()
    this.fetchList('product-line')
    this.fetchList('equipment')
  },
  methods: {
    fetchList(type) {
      switch (type) {
        case 'product-line':
          return getProductLineList().then(res => {
            if (res.data && res.data.length > 0) {
              this.headFormConfig[0].selectOptions = res.data.map(item => ({ id: item.id, name: item.name }))
            } else {
              this.headFormConfig[0].selectOptions.splice(0)
            }
          })
        case 'equipment':
          return getEquipmentList().then(res => {
            if (res.data && res.data.length > 0) {
              this.headFormConfig[1].selectOptions = res.data.map(item => ({ id: item.id, name: item.name }))
            } else {
              this.headFormConfig[1].selectOptions.splice(0)
            }
          })
      }
    },

    getList() {
      this.listLoading = true
      const pdlId = this.headFormValue.lineId || ''
      const name = this.headFormValue.eqName || ''

      list({ ...this.listQuery, pdlId, name }).then(response => {
        if (response.data.records) {
          // this.dataList = response.data.records
          // 11-mes 修改模拟数据
          this.dataList = response.data.records.map(item => ({...item, error: '无故障'}))
          
        } else {
          this.dataList.splice(0)
        }

        this.total = response.data.total
        this.listLoading = false
      })
    },

    btnClick(val) {
      this.headFormValue = val
      // 如果点击的是搜索栏的其他按钮在这里继续写判断
      if (this.headFormValue.btnName === 'search') {
        this.getList()
      }
    },

    handleTableEvents({ action, data }) {
      // 跳转到<厂务>-<设备报警> 那边
      this.$router.push({
        name: 'EquipmentAlarm',
        params: {
          eqName: data.eqName
        }
      })
    }

    // 新增 / 修改
    // addNew(id) {
    //   this.addOrUpdateVisible = true
    //   this.$nextTick(() => {
    //     this.$refs.addOrUpdate.init(id)
    //   })
    // },
    // clickTopBtn(val) {
    //   if (val === 'add') {
    //     this.addNew() // 新增
    //   }
    // }
    // handleClick(raw) {
    //   if (raw.type === 'edit') {
    //     this.addNew(raw.data.id)
    //   } else if (raw.type === 'detail') {
    // this.showDetail = true
    //     this.$nextTick(() => {
    //       this.$refs.detailShow.emitClick(raw.data.id)
    //     })
    //   }
    // },
  }
}
</script>