MDC停机原因和待机停机页面开发100%

zhaowei

2025-03-18 9259e3f205c29c5c8ac5ffbb0b8d479cab7266a1

MDC停机原因和待机停机页面开发100%

 src/views/mdc/base/EquipmentShutDownReasonList.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,170 @@
<template>
  <a-card :bordered="false">
    <!-- æŸ¥è¯¢åŒºåŸŸ -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
        <a-row :gutter="24">
          <a-col :md="4" :sm="4">
            <a-form-item label="停机类型">
              <a-radio-group v-model="queryParam.downtimeType" placeholder="请选择停机类型" @change="searchQuery">
                <a-radio :value="0">计划停机</a-radio>
                <a-radio :value="1">非计划停机</a-radio>
              </a-radio-group>
            </a-form-item>
          </a-col>

          <a-col :md="5" :sm="5">
            <a-form-item label="停机原因描述">
              <a-input v-model="queryParam.downtimeDescription" placeholder="请输入停机原因"/>
            </a-form-item>
          </a-col>

          <a-col :md="4" :sm="4">
            <a-space>
              <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
              <a-button type="primary" @click="searchReset" icon="reload">重置</a-button>
            </a-space>
          </a-col>
        </a-row>
      </a-form>
    </div>

    <!-- æ“ä½œæŒ‰é’®åŒºåŸŸ -->
    <div class="table-operator">
      <a-button @click="handleAdd" type="primary" icon="plus">新增</a-button>
      <a-dropdown v-if="selectedRowKeys.length > 0">
        <a-menu slot="overlay" @click="handleMenuClick">
          <a-menu-item key="1">
            <a-icon type="delete" @click="batchDel"/>
            åˆ é™¤
          </a-menu-item>
        </a-menu>
        <a-button style="margin-left: 8px">
          æ‰¹é‡æ“ä½œ
          <a-icon type="down"/>
        </a-button>
      </a-dropdown>
    </div>

    <!-- table区域-begin -->
    <div>
      <div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">
        <i class="anticon anticon-info-circle ant-alert-icon"></i>已选择&nbsp;<a style="font-weight: 600">{{
          selectedRowKeys.length
        }}</a>项&nbsp;&nbsp;
        <a style="margin-left: 24px" @click="onClearSelected">清空</a>
      </div>

      <a-table
        ref="table"
        bordered
        size="middle"
        rowKey="id"
        :scroll="{x:'max-content',y:600}"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="ipagination"
        :loading="loading"
        :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
        @change="handleTableChange">
        <template slot="downtimeType" slot-scope="text">
          {{ text === 0 ? '计划停机' : '非计划停机' }}
        </template>

        <template slot="action" slot-scope="text, record">
          <a @click="handleEdit(record)">编辑</a>

          <a-divider type="vertical"/>

          <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
            <a>删除</a>
          </a-popconfirm>
        </template>
      </a-table>
    </div>
    <!-- table区域-end -->

    <EquipmentShutDownReasonModal ref="modalForm" @ok="modalFormOk"/>
  </a-card>
</template>

<script>
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import EquipmentShutDownReasonModal from '@views/mdc/base/modules/EquipmentShutDownReasonList/EquipmentShutDownReasonModal.vue'

export default {
  name: 'EquipmentShutDownReasonList',
  mixins: [JeecgListMixin],
  components: {
    EquipmentShutDownReasonModal
  },
  data() {
    return {
      queryParam: {},
      /* åˆ†é¡µå‚æ•° */
      ipagination: {
        current: 1,
        pageSize: 30,
        pageSizeOptions: ['30', '50', '100'],
        showTotal: (total, range) => {
          return range[0] + '-' + range[1] + ' å…±' + total + '条'
        },
        showQuickJumper: true,
        showSizeChanger: true,
        total: 0
      },
      columns: [
        {
          title: '#',
          dataIndex: '',
          key: 'rowIndex',
          width: 60,
          align: 'center',
          customRender: function(t, r, index) {
            return parseInt(index) + 1
          }
        },
        {
          title: '停机原因',
          align: 'center',
          width: 350,
          dataIndex: 'downtimeDescription'
        },
        {
          title: '停机类型',
          align: 'center',
          scopedSlots: { customRender: 'downtimeType' },
          dataIndex: 'downtimeType',
          width: 350
        },
        {
          title: '备注',
          align: 'center',
          dataIndex: 'remark',
          width: 350
        },
        {
          title: '操作',
          dataIndex: 'action',
          scopedSlots: { customRender: 'action' },
          align: 'center',
          width: 150
        }
      ],
      url: {
        list: '/mdc/mdcDowntimeReason/list',
        delete: '/mdc/mdcDowntimeReason/delete',
        deleteBatch: '/mdc/mdcDowntimeReason/deleteBatch'
      }
    }
  },
  methods: {
    handleMenuClick(e) {
      if (e.key == 1) {
        this.batchDel()
      }
    }
  }

}
</script>

 src/views/mdc/base/EquipmentStandbyShutDown.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,121 @@
<template>
  <div style="width: 100%; height: 100%;">
    <a-card :bordered="false">
      <a-row type="flex" :gutter="16">
        <a-col :md="5">
          <a-tabs :activeKey="activeKey" @change="tabChange">
            <a-tab-pane key="1" tab="车间层级" force-render>
              <base-tree @getCurrSelected="changeSelectionNode"></base-tree>
            </a-tab-pane>
            <a-tab-pane v-if="isDepartType == 0" key="2" tab="部门层级">
              <depart-tree @getCurrSelectedDD="changeSelectionNodedd"></depart-tree>
            </a-tab-pane>
          </a-tabs>
        </a-col>
        <a-col :md="19">
          <EquipmentStandbyShutdownList :node='selectedEquipment' :Type="selectedTypeTree"/>
        </a-col>
      </a-row>
    </a-card>
  </div>

</template>

<script>
import BaseTree from '../common/BaseTree'
import DepartTree from './modules/DepartList/DepartListTree/DepartTree'
import { mapActions } from 'vuex'
import EquipmentStandbyShutdownList
  from '@views/mdc/base/modules/EquipmentStandbyShutDown/EquipmentStandbyShutdownList.vue'

export default {
  name: 'EquipmentStandbyShutDown',
  components: {
    EquipmentStandbyShutdownList,
    BaseTree,
    DepartTree
  },
  data() {
    return {
      activeKey: '1',
      selectedEquipment: {},
      selectedTypeTree: '',
      isDepartType: ''
    }
  },
  created() {
    this.queryTreeData()
  },
  methods: {
    ...mapActions(['QueryDepartTree']),

    queryTreeData() {
      this.QueryDepartTree()
        .then(res => {
          if (res.success) {
            this.isDepartType = res.result[0].value
          } else {
            this.$notification.warning({
              message: '消息',
              description: res.message
            })
          }
        })
    },

    tabChange(val) {
      this.activeKey = val
      this.selectedTypeTree = val
    },
    changeSelectionNode(val) {
      this.selectedEquipment = val
      this.selectedTypeTree = '1'
    },
    changeSelectionNodedd(val) {
      this.selectedEquipment = val
      this.selectedTypeTree = '2'
    }
  }

}
</script>
<style scoped>
@import '~@assets/less/common.less';

.equipMessage {
  width: 100%;
  height: 10%;
}

.equipMessage table {
  width: 60%;
  height: 100%;
  line-height: 50%;
}

.equipMessage table td {
  text-align: center;
}

.equipMessage table td span {
  display: inline-block;
  width: 15px;
  height: 15px;
}

.equipMessage table td .equipShutdown {
  background-color: #808080;
}

.equipMessage table td .equipStandby {
  background-color: #ffbf37;
}

.equipMessage table td .equipRun {
  background-color: #19FE01;
}

.equipMessage table td .equipAlarm {
  background-color: #FD0008;
}
</style>

 src/views/mdc/base/modules/EquipmentShutDownReasonList/EquipmentShutDownReasonModal.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,159 @@
<template>
  <a-modal
    :title="title"
    :maskClosable="true"
    :width="modalWidth"
    @cancel="handleCancel"
    :visible="visible">
    <a-spin :spinning="confirmLoading">
      <a-form-model ref="form" :form="form" :model="model" :rules="validatorRules" :labelCol="labelColLong"
                    :wrapperCol="wrapperColLong">
        <a-row :gutter="24">
          <a-col :span="24">
            <a-form-model-item prop="downtimeType" label="停机类型">
<!--              <a-select v-model="model.downtimeType" placeholder="请选择停机类型">-->
<!--                <a-select-option :key="0">计划停机</a-select-option>-->
<!--                <a-select-option :key="1">非计划停机</a-select-option>-->
<!--              </a-select>-->
              <a-radio-group v-model="model.downtimeType" placeholder="请选择停机类型">
                <a-radio :value="0">计划停机</a-radio>
                <a-radio :value="1">非计划停机</a-radio>
              </a-radio-group>
            </a-form-model-item>
          </a-col>
        </a-row>

        <a-row :gutter="24">
          <a-col :span="24">
            <a-form-model-item prop="downtimeDescription" label="停机原因">
              <a-input v-model="model.downtimeDescription" placeholder="请输入停机原因"/>
            </a-form-model-item>
          </a-col>
        </a-row>

        <a-row :gutter="24">
          <a-col :span="24">
            <a-form-model-item  label="备注">
              <a-textarea v-model="model.remark" placeholder="请输入备注"/>
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
    </a-spin>

    <template slot="footer">
      <a-space>
        <a-button @click="handleCancel">取消</a-button>
        <a-button @click="handleSubmit" type="primary" :loading="confirmLoading">提交</a-button>
      </a-space>
    </template>

  </a-modal>

</template>

<script>
import { postAction } from '@/api/manage'

export default {
  name: 'EquipmentCloseReasonModal',
  components: {},
  data() {
    return {
      modalWidth: 500,
      form: this.$form.createForm(this),
      validatorRules: {
        downtimeType: [
          {
            required: true, message: '请选择停机类型'
          }
        ],
        downtimeDescription: [
          {
            required: true, message: '请输入停机原因'
          }
        ]
      },
      title: '操作',
      visible: false,
      model: {},
      labelColLong: {
        xs: { span: 24 },
        sm: { span: 6 }
      },
      wrapperColLong: {
        xs: { span: 24 },
        sm: { span: 17 }
      },
      confirmLoading: false,
      url: {
        add: '/mdc/mdcDowntimeReason/add',
        edit: '/mdc/mdcDowntimeReason/edit'
      }
    }
  },
  methods: {
    add() {
      this.model = {}
      this.visible = true
    },

    edit(record) {
      this.model = Object.assign({}, record)
      this.visible = true
    },

    handleSubmit() {
      const that = this
      // è§¦å‘表单验证
      this.$refs.form.validate(valid => {
        if (valid) {
          that.confirmLoading = true
          let apiUrl
          if (!this.model.id) {
            apiUrl = that.url.add
          } else {
            apiUrl = that.url.edit
          }
          postAction(apiUrl, that.model)
            .then((res) => {
              if (res.success) {
                that.$notification.success({
                  message: '消息',
                  description: res.message
                })
                that.$emit('ok')
                that.handleCancel()
              } else {
                that.$notification.warning({
                  message: '消息',
                  description: res.message
                })
              }
            })
            .finally(() => {
              that.confirmLoading = false
            })
        } else {
          return false
        }
      })
    },

    handleCancel() {
      this.visible = false
      this.removeValidate()
    },

    // å…³é—­å¼¹çª—时清楚表单校验
    removeValidate() {
      if (this.$refs.form) this.$refs.form.clearValidate()
    }
  }

}
</script>

<style scoped>

</style>

 src/views/mdc/base/modules/EquipmentStandbyShutDown/EquipmentStandbyShutdownList.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,213 @@
<template>
  <div class="page-container">
    <!-- æŸ¥è¯¢åŒºåŸŸ -->
    <div>
      <div class="table-page-search-wrapper">
        <a-form layout="inline" @keyup.enter.native="searchQuery">
          <a-row :gutter="24">
            <a-col :md="4" :sm="4">
              <a-form-item label="日期">
                <a-date-picker value-format="YYYY-MM-DD" style="width: 100%" v-model="queryParam.theDate"/>
              </a-form-item>
            </a-col>

            <a-col :md="2" :sm="2" :xs="2">
              <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
            </a-col>
          </a-row>
        </a-form>
      </div>
    </div>

    <div style="overflow: hidden;width: 100%;flex: 1" id="DeviceList">
      <a-table ref="table" bordered :scroll="{x:'max-content',y:scrollY}"
               size="middle" rowKey="id" :columns="columns"
               @change="handleTableChange"
               :dataSource="dataSource" :pagination="ipagination"
               :loading="loading">
        <template slot="downtimeType" slot-scope="text">
          {{ text !== null ? text === 0 ? '计划停机' : '非计划停机' : '' }}
        </template>

        <template slot="action" slot-scope="text, record">
          <a @click="handleReport(record)">上报</a>

          <a-divider type="vertical"/>

          <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
            <a>删除</a>
          </a-popconfirm>
        </template>
      </a-table>
    </div>

    <EquipmentStandbyShutdownModal ref="modalForm" @ok="modalFormOk"/>
  </div>
</template>

<script>
import moment from 'moment'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import EquipmentStandbyShutdownModal
  from '@views/mdc/base/modules/EquipmentStandbyShutDown/EquipmentStandbyShutdownModal.vue'

export default {
  name: 'EquipmentStandbyShutdownList',
  components: { EquipmentStandbyShutdownModal },
  mixins: [JeecgListMixin],
  data() {
    return {
      disableMixinCreated: true,
      scrollY: 465,
      queryParam: {
        theDate: moment().subtract('days', 1).format('YYYY-MM-DD')
      },
      columns: [
        {
          title: '#',
          dataIndex: '',
          key: 'rowIndex',
          width: 60,
          align: 'center',
          customRender: function(t, r, index) {
            return parseInt(index) + 1
          }
        },
        {
          title: '设备编号',
          align: 'center',
          dataIndex: 'equipmentId',
          width: 200
        },
        {
          title: '设备名称',
          align: 'center',
          dataIndex: 'equipmentName',
          width: 200
        },
        {
          title: '停机类型',
          align: 'center',
          dataIndex: 'downtimeType',
          scopedSlots: { customRender: 'downtimeType' },
          width: 150
        },
        {
          title: '停机原因',
          align: 'center',
          dataIndex: 'downtimeDescription',
          width: 200
        },
        {
          title: '开始时间',
          align: 'center',
          dataIndex: 'startDate',
          width: 150
        },
        {
          title: '结束时间',
          align: 'center',
          dataIndex: 'endDate',
          width: 150
        },
        {
          title: '备注',
          align: 'center',
          dataIndex: 'remark',
          width: 200
        },
        {
          title: '操作',
          dataIndex: 'action',
          align: 'center',
          width: 150,
          scopedSlots: { customRender: 'action' },
          fixed: 'right'
        }
      ],
      url: {
        list: '/mdc/mdcDowntime/list',
        delete: '/mdc/mdcDowntime/delete'
      }
    }
  },
  props: { node: {}, Type: '' },
  created() {
    this.queryParam.typeTree = '1'
    this.loadData()
  },
  mounted() {
    window.addEventListener('resize', this.handleWindowResize)
    this.handleWindowResize()
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.handleWindowResize)
  },
  watch: {
    Type(valmath) {
      this.queryParam.typeTree = valmath
    },
    node(val) { //监听currSelected å˜åŒ–，将变化后的数值传递给 getCurrSelected äº‹ä»¶
      if (JSON.stringify(val) != '{}') {
        if (val.equipmentId != null) {
          this.queryParam.equipmentId = val.equipmentId
          this.queryParam.parentId = ''
        } else {
          this.queryParam.parentId = val.key
          this.queryParam.equipmentId = ''
        }
        this.loadData(1)
      }
    }
  },
  methods: {
    handleReport(record) {
      this.$refs.modalForm.edit(record)
      this.$refs.modalForm.title = '上报'
    },

    handleWindowResize() {
      const boxHeight = +window.getComputedStyle(document.getElementById('DeviceList')).height.slice(0, -2)
      const tableHeadHeight = +window.getComputedStyle(document.querySelector('.ant-table-thead th')).height.slice(0, -2)
      this.scrollY = boxHeight - tableHeadHeight - 50
    }
  }
}
</script>
<style scoped>
.page-container {
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

@media screen and (min-width: 1920px) {
  .page-container {
    height: 812px !important;
  }
}

@media screen and (min-width: 1680px) and (max-width: 1920px) {
  .page-container {
    height: 812px !important;
  }
}

@media screen and (min-width: 1400px) and (max-width: 1680px) {
  .page-container {
    height: 664px !important;
  }
}

@media screen and (min-width: 1280px) and (max-width: 1400px) {
  .page-container {
    height: 565px !important;
  }
}

@media screen and (max-width: 1280px) {
  .page-container {
    height: 565px !important;
  }
}
</style>

 src/views/mdc/base/modules/EquipmentStandbyShutDown/EquipmentStandbyShutdownModal.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,167 @@
<template>
  <a-modal :title="title" :width="500" :visible="visible" :confirmLoading="confirmLoading" @ok="handleOk"
           @cancel="handleCancel" cancelText="关闭">
    <a-spin :spinning="confirmLoading">
      <a-form-model ref="form" :form="form" :model="model" :rules="validatorRules" :labelCol="labelColLong"
                    :wrapperCol="wrapperColLong">
        <a-row :gutter="24">
          <a-col :span="24">
            <a-form-model-item label="停机类型" prop="downtimeType">
              <a-radio-group v-model="model.downtimeType" placeholder="请选择停机类型"
                             @change="handleDowntimeTypeChange">
                <a-radio :value="0">计划停机</a-radio>
                <a-radio :value="1">非计划停机</a-radio>
              </a-radio-group>
            </a-form-model-item>
          </a-col>
        </a-row>

        <a-row :gutter="24">
          <a-col :span="24">
            <a-form-model-item label="停机原因" prop="reasonId">
              <a-select v-model="model.reasonId" placeholder="请选择停机原因">
                <a-select-option v-for="item in downtimeDescriptionList" :key="item.id">
                  {{ item.downtimeDescription }}
                </a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
        </a-row>

        <a-row :gutter="24">
          <a-col :span="24">
            <a-form-model-item label="备注">
              <a-textarea v-model="model.remark" placeholder="请输入备注"/>
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
    </a-spin>
  </a-modal>
</template>

<script>
import { getAction, postAction } from '@api/manage'

export default {
  name: 'EquipmentStandbyShutdownModal',
  components: {},
  props: {},
  data() {
    return {
      title: '',
      visible: false,
      model: {},
      downtimeDescriptionList: [],
      labelColLong: {
        xs: {
          span: 24
        },
        sm: {
          span: 5
        }
      },
      wrapperColLong: {
        xs: {
          span: 24
        },
        sm: {
          span: 17
        }
      },
      confirmLoading: false,
      form: this.$form.createForm(this),
      validatorRules: {
        downtimeType: [
          {
            required: true, message: '请选择停机类型'
          }
        ],
        reasonId: [
          {
            required: true, message: '请选择停机原因'
          }
        ]
      },
      url: {
        edit: '/mdc/mdcDowntime/edit',
        getDowntimeDescriptionListByDowntimeType: '/mdc/mdcDowntimeReason/downtimeReasonList'
      }
    }
  },
  methods: {
    edit(record) {
      this.model = Object.assign({}, record)
      this.getDowntimeDescriptionListByApi()
      if (this.model.downtimeType === null) {
        delete this.model.downtimeType
        delete this.model.reasonId
      }
      this.visible = true
    },

    // åœæœºç±»åž‹å€¼å‘生改变时触发清空停机原因并重新获取对应停机类型的停机原因列表
    handleDowntimeTypeChange() {
      if (this.model.reasonId) delete this.model.reasonId
      this.removeValidate()
      this.getDowntimeDescriptionListByApi()
    },

    // è°ƒç”¨æŽ¥å£èŽ·å–停机原因列表
    getDowntimeDescriptionListByApi() {
      const that = this
      this.downtimeDescriptionList = []
      getAction(this.url.getDowntimeDescriptionListByDowntimeType, { downtimeType: this.model.downtimeType })
        .then(res => {
          if (res.success) that.downtimeDescriptionList = res.result
        })
    },

    handleOk() {
      const that = this
      // è§¦å‘表单验证
      this.$refs.form.validate(valid => {
        if (valid) {
          that.confirmLoading = true
          postAction(this.url.edit, that.model)
            .then((res) => {
              if (res.success) {
                that.$notification.success({
                  message: '消息',
                  description: res.message
                })
                that.$emit('ok', res.result)
                that.handleCancel()
              } else {
                that.$notification.warning({
                  message: '消息',
                  description: res.message
                })
              }
            })
            .finally(() => {
              that.confirmLoading = false
            })
        } else {
          return false
        }
      })
    },

    handleCancel() {
      this.visible = false
      this.removeValidate()
    },

    // å…³é—­å¼¹çª—时清楚表单校验
    removeValidate() {
      if (this.$refs.form) this.$refs.form.clearValidate()
    }
  }
}
</script>