联调终端停机上报页面列表查询、维护停机和拆分停机信息功能

zhaowei

2025-06-09 fe011cf7399e8ad5738ab7668a7d6109d9a5cbc6

联调终端停机上报页面列表查询、维护停机和拆分停机信息功能

 src/views/dnc/base/modules/TerminalIndex/ReportEquipmentClose.vue

@@ -7,33 +7,34 @@
      <div class="table-page-search-wrapper">
        <a-form layout="inline">
          <a-row :gutter="24">
            <a-col :span="4">
            <a-col :span="5">
              <a-form-item label="设备">
                <a-select placeholder="请选择设备" v-model="queryParam.equipmentId"></a-select>
                <a-select placeholder="请选择设备" v-model="queryParam.equipmentId">
                  <a-select-option v-for="item in equipmentList" :key="item.equipmentId">
                    {{item.equipmentId+`[${item.equipmentName}]`}}
                  </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>

            <a-col :span="4">
            <a-col :span="5">
              <a-form-item label="开始时间">
                <a-date-picker style="width: 100%" show-time placeholder="请选择开始时间" v-model="queryParam.startTime"/>
                <a-date-picker style="width: 100%" show-time placeholder="请选择开始时间" v-model="queryParam.startDate"/>
              </a-form-item>
            </a-col>

            <a-col :span="4">
            <a-col :span="5">
              <a-form-item label="结束时间">
                <a-date-picker style="width: 100%" show-time placeholder="请选择结束时间" v-model="queryParam.endTime"/>
                <a-date-picker style="width: 100%" show-time placeholder="请选择结束时间" v-model="queryParam.endDate"/>
              </a-form-item>
            </a-col>

            <a-col :span="4">
            <a-col :span="5">
              <a-form-item label="停机原因">
                <a-select placeholder="请选择停机原因" v-model="queryParam.closeReason"></a-select>
              </a-form-item>
            </a-col>

            <a-col :span="4">
              <a-form-item label="停机时间">
                <a-date-picker style="width: 100%" placeholder="请选择停机时间" v-model="queryParam.closeTime"/>
                <a-select placeholder="请选择停机原因" v-model="queryParam.downtimeDescription">
                  <a-select-option v-for="item in downtimeDescriptionList" :key="item.value">{{item.label}}
                  </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>

@@ -51,17 +52,26 @@

      <!-- 操作按钮区域 -->
      <div class="table-operator">
        <a-button type="primary" @click="handleMaintainShutdown">维护停机</a-button>
        <a-button type="primary" @click="handleSplitShutdownInfo">拆分停机信息</a-button>
        <a-button type="primary" @click="handleMaintainShutdown" :disabled="selectedRowKeys.length===0">维护停机</a-button>
        <a-button type="primary" @click="handleSplitShutdownInfo"
                  :disabled="selectedRowKeys.length===0||selectedRowKeys.length>1">拆分停机信息
        </a-button>
      </div>

      <a-table :dataSource="dataSource" :columns="columns" rowKey="id" bordered :pagination="false"
               :rowSelection="{selectedRowKeys, onChange: onSelectChange}"/>
      <a-table :dataSource="dataSource" :columns="columns" rowKey="id" bordered :pagination="false" :loading="loading"
               :rowSelection="{selectedRowKeys, onChange: onSelectChange}">
        <template slot="downtimeType" slot-scope="text">
          {{ text!=null?text === 0 ? '计划停机' : '非计划停机':'' }}
        </template>
      </a-table>
    </a-card>

    <maintain-shutdown-modal ref="maintainShutdownModal"/>
    <maintain-shutdown-modal :downtimeDescriptionList="downtimeDescriptionList" ref="maintainShutdownModal"
                             @submitSuccess="loadData"/>

    <split-shutdown-info-modal ref="splitShutdownInfoModal"/>
    <split-shutdown-info-modal ref="splitShutdownInfoModal" :selectedRow="selectionRows[0]"
                               :downtimeDescriptionList="downtimeDescriptionList"
                               @submitSuccess="clearSelectedRowKeysAndLoadData"/>
  </div>
</template>

@@ -69,6 +79,7 @@
  import { JeecgListMixin } from '@/mixins/JeecgListMixin'
  import MaintainShutdownModal from './ReportEquipmentClose/MaintainShutdownModal'
  import SplitShutdownInfoModal from './ReportEquipmentClose/SplitShutdownInfoModal'
  import { getAction } from '@/api/manage'

  export default {
    name: 'ReportEquipmentClose',
@@ -76,6 +87,8 @@
    mixins: [JeecgListMixin],
    data() {
      return {
        equipmentList: [],
        downtimeDescriptionList: [],
        columns: [
          {
            title: '设备编号',
@@ -89,17 +102,19 @@
            dataIndex: 'equipmentName'
          },
          {
            title: '停机编号',
            title: '停机原因',
            align: 'center',
            dataIndex: 'shutdownId'
            dataIndex: 'downtimeDescription'
          },
          {
            title: '停机类型',
            align: 'center',
            dataIndex: 'shutdownType'
            scopedSlots: { customRender: 'downtimeType' },
            dataIndex: 'downtimeType',
            width: 150
          },
          {
            title: '停机时间',
            title: '停机时间(MIN)',
            align: 'center',
            width: 150,
            dataIndex: 'shutdownDuration'
@@ -108,63 +123,62 @@
            title: '开始时间',
            align: 'center',
            width: 200,
            dataIndex: 'startTime'
            dataIndex: 'startDate'
          },
          {
            title: '结束时间',
            align: 'center',
            width: 200,
            dataIndex: 'endTime'
            dataIndex: 'endDate'
          },
          {
            title: '录入类型',
            align: 'center',
            width: 100,
            dataIndex: 'recordType'
          }
        ],
        dataSource: [
          {
            id: 1,
            equipmentId: '3140221',
            equipmentName: '数控机床',
            shutdownDuration: 360,
            startTime: '2025-05-20 02:21:49',
            endTime: '2525-05-20 08:21:59',
            recordType: '自动上报'
          },
          {
            id: 2,
            equipmentId: '3140221',
            equipmentName: '数控机床',
            shutdownDuration: 360,
            startTime: '2025-05-20 02:21:49',
            endTime: '2525-05-20 08:21:59',
            recordType: '自动上报'
          },
          {
            id: 3,
            equipmentId: '3140221',
            equipmentName: '数控机床',
            shutdownDuration: 360,
            startTime: '2025-05-20 02:21:49',
            endTime: '2525-05-20 08:21:59',
            recordType: '自动上报'
            dataIndex: 'enterType_dictText'
          }
        ],
        url: {
          list: ''
          equipmentList: '/mdc/mdcEquipment/getEquipmentList',
          downtimeDescriptionList: '/mdc/mdcDowntimeReason/reasonList',
          list: '/mdc/operator/mdcDowntime/list'
        }
      }
    },
    created() {
      this.getEquipmentListByApi()
      this.getDowntimeDescriptionListByApi()
    },
    methods: {
      getEquipmentListByApi() {
        const that = this
        getAction(this.url.equipmentList)
          .then(res => {
            if (res.success) that.equipmentList = res.result
          })
      },

      getDowntimeDescriptionListByApi() {
        const that = this
        getAction(this.url.downtimeDescriptionList)
          .then(res => {
            if (res.success) that.downtimeDescriptionList = res.result
          })
      },

      handleMaintainShutdown() {
        this.$refs.maintainShutdownModal.visible = true
        this.$refs.maintainShutdownModal.model = {}
        this.$refs.maintainShutdownModal.model = { downTimeIds: this.selectedRowKeys.join() }
      },

      handleSplitShutdownInfo() {
        this.$refs.splitShutdownInfoModal.visible = true
        this.$refs.splitShutdownInfoModal.setDateTime(this.selectionRows[0])
      },

      clearSelectedRowKeysAndLoadData() {
        this.selectedRowKeys = this.selectionRows = []
        this.loadData()
      }
    }
  }

 src/views/dnc/base/modules/TerminalIndex/ReportEquipmentClose/MaintainShutdownModal.vue

@@ -1,58 +1,69 @@
<template>
  <a-modal :visible="visible" title="维护停机" @ok="handleSubmit" @cancel="handleCancel">
  <j-modal :visible="visible" title="维护停机" @ok="handleSubmit" @cancel="handleCancel" :confirmLoading="confirmLoading">
    <a-form-model ref="form" :model="model" :rules="validateRules" :labelCol="{span:5}" :wrapperCol="{span:18}">
      <a-form-model-item prop="closeReason" label="停机原因">
        <a-select v-model="model.closeReason" placeholder="请选择停机原因">
          <a-select-option v-for="item in closeReasonList" :key="item.id">
      <a-form-model-item prop="reasonId" label="停机原因">
        <a-select v-model="model.reasonId" placeholder="请选择停机原因">
          <a-select-option v-for="item in downtimeDescriptionList" :key="item.value">
            {{item.label}}
          </a-select-option>
        </a-select>
      </a-form-model-item>
    </a-form-model>
  </a-modal>
  </j-modal>
</template>

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

  export default {
    name: 'MaintainShutdownModal',
    props: {
      downtimeDescriptionList: {
        type: Array
      }
    },
    data() {
      return {
        visible: false,
        model: {},
        validateRules: {
          closeReason: [{ required: true, message: '请选择停机原因！' }]
          reasonId: [{ required: true, message: '请选择停机原因！' }]
        },
        closeReasonList: [
          {
            id: 1,
            label: '吃饭时间休息'
          },
          {
            id: 2,
            label: '工作时间休息'
          },
          {
            id: 3,
            label: '计划性停电'
          },
          {
            id: 4,
            label: '待料停机'
          },
          {
            id: 5,
            label: '首件调试'
          },
          {
            id: 6,
            label: '刀量具准备'
          }
        ]
        confirmLoading: false,
        url: {
          submit: '/mdc/operator/mdcDowntime/updateReason'
        }
      }
    },
    methods: {
      handleSubmit() {

        const that = this
        this.confirmLoading = true
        this.$refs.form.validate(valid => {
          if (valid) {
            postAction(that.url.submit, that.model)
              .then(res => {
                if (res.success) {
                  that.$notification.success({
                    message: '消息',
                    description: res.message
                  })
                  that.handleCancel()
                  that.$emit('submitSuccess')
                } else {
                  that.$notification.warning({
                    message: '消息',
                    description: res.message
                  })
                }
              })
              .finally(() => {
                that.confirmLoading = false
              })
          } else {
            return false
          }
        })
      },

      handleCancel() {

 src/views/dnc/base/modules/TerminalIndex/ReportEquipmentClose/SplitShutdownInfoModal.vue

@@ -1,113 +1,208 @@
<template>
  <a-modal :visible="visible" :width="800" title="拆分停机信息" @ok="handleSubmit" @cancel="handleCancel">
    <a-form-model ref="form" :model="model" :rules="validateRules" :labelCol="{span:8}" :wrapperCol="{span:12}">
  <j-modal :visible="visible" :width="800" title="拆分停机信息" @ok="handleSubmit" @cancel="handleCancel"
           :confirmLoading="confirmLoading"
           :maskClosable="false">
    <a-form-model ref="form" :model="model" :rules="validateRules" :hideRequiredMark="true" :labelCol="{span:8}"
                  :wrapperCol="{span:12}">
      <a-row>
        <a-col :span="10">
          <a-form-model-item prop="startTime" label="开始时间">
            <a-date-picker show-time value-format="YYYY-MM-DD HH:mm:ss" v-model="model.startTime"/>
        <a-col :span="12">
          <a-form-model-item label="开始时间">
            <a-date-picker disabled show-time value-format="YYYY-MM-DD HH:mm:ss" v-model="model.startDate"/>
          </a-form-model-item>
        </a-col>
      </a-row>

      <div v-for="item in splitList" :key="item.title">
        <a-divider orientation="left">{{item.title}}</a-divider>
      <a-divider orientation="left">拆分一段</a-divider>

        <a-row>
          <a-col :span="10">
            <a-form-model-item prop="endTime" label="结束日期">
              <a-date-picker show-time value-format="YYYY-MM-DD HH:mm:ss" v-model="item.splitParams.endTime"/>
            </a-form-model-item>
          </a-col>
      <a-row>
        <a-col :span="12">
          <a-form-model-item label="    " :colon="false" prop="firstMiddleTime">
            <a-date-picker show-time :showToday="false" value-format="YYYY-MM-DD HH:mm:ss"
                           v-model="model.firstMiddleTime"
                           @change="handleFirstMiddleTimeChange"
                           :disabledDate="disabledDate1"/>
          </a-form-model-item>
        </a-col>

          <a-col :span="10">
            <a-form-model-item prop="closeReason" label="停机原因">
              <a-select v-model="item.splitParams.closeReason" placeholder="请选择停机原因">
                <a-select-option v-for="item in closeReasonList" :key="item.id">
                  {{item.label}}
                </a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
        <a-col :span="12">
          <a-form-model-item label="停机原因">
            <a-select v-model="model.firstDowntimeDescription" placeholder="请选择停机原因">
              <a-select-option v-for="item in downtimeDescriptionList" :key="item.value">
                {{item.label}}
              </a-select-option>
            </a-select>
          </a-form-model-item>
        </a-col>
      </a-row>

          <a-col :span="4">
            <a-form-model-item label="选择">
              <a-checkbox @change="handleCheckboxChange(item,$event)"/>
            </a-form-model-item>
          </a-col>
        </a-row>
      </div>
      <a-divider orientation="left">拆分二段</a-divider>

      <a-row>
        <a-col :span="12">
          <a-form-model-item label="    " :colon="false">
            <a-date-picker show-time :showToday="false" value-format="YYYY-MM-DD HH:mm:ss"
                           v-model="model.secondMiddleTime"
                           :disabled="!model.firstMiddleTime" :disabledDate="disabledDate2"/>
          </a-form-model-item>
        </a-col>

        <a-col :span="12">
          <a-form-model-item label="停机原因">
            <a-select v-model="model.secondDowntimeDescription" placeholder="请选择停机原因"
                      :disabled="!model.firstMiddleTime">
              <a-select-option v-for="item in downtimeDescriptionList" :key="item.value">
                {{item.label}}
              </a-select-option>
            </a-select>
          </a-form-model-item>
        </a-col>
      </a-row>

      <a-divider orientation="left">拆分三段</a-divider>

      <a-row>
        <a-col :span="12">
          <a-form-model-item label="结束日期">
            <a-date-picker disabled show-time value-format="YYYY-MM-DD HH:mm:ss" v-model="model.endDate"/>
          </a-form-model-item>
        </a-col>

        <a-col :span="12">
          <a-form-model-item label="停机原因">
            <a-select v-model="model.thirdDowntimeDescription" placeholder="请选择停机原因">
              <a-select-option v-for="item in downtimeDescriptionList" :key="item.value">
                {{item.label}}
              </a-select-option>
            </a-select>
          </a-form-model-item>
        </a-col>
      </a-row>
    </a-form-model>
  </a-modal>
  </j-modal>
</template>

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

  export default {
    name: 'SplitShutdownInfoModal',
    props: {
      downtimeDescriptionList: {
        type: Array
      }
    },
    data() {
      return {
        visible: false,
        model: {},
        validateRules: {
          startTime: [{ required: true, message: '请选择开始时间！', trigger: 'change' }]
          firstMiddleTime: [{ required: true, message: '请选择拆分一段时间！', trigger: 'change' }]
        },
        closeReasonList: [
          {
            id: 1,
            label: '吃饭时间休息'
          },
          {
            id: 2,
            label: '工作时间休息'
          },
          {
            id: 3,
            label: '计划性停电'
          },
          {
            id: 4,
            label: '待料停机'
          },
          {
            id: 5,
            label: '首件调试'
          },
          {
            id: 6,
            label: '刀量具准备'
          }
        ],
        splitList: [
          {
            title: '拆分一段',
            splitParams: {}
          },
          {
            title: '拆分二段',
            splitParams: {}
          },
          {
            title: '拆分三段',
            splitParams: {}
          }
        ]
        confirmLoading: false,
        url: {
          submit: '/mdc/operator/mdcDowntime/splitDowntime'
        }
      }
    },
    methods: {
      handleCheckboxChange(record, event) {
        console.log('record', record)
        record.splitParams.checked = event.target.checked
      /**
       * 设置开始及结束日期时间
       * @param record 列表行记录对象
       */
      setDateTime(record) {
        this.model = {
          id: record.id,
          startDate: record.startDate,
          endDate: record.endDate
        }
      },

      /**
       * 拆分一段时间值发生改变时触发
       * @param value 改变后的值
       */
      handleFirstMiddleTimeChange(value) {
        // 若时间值被清空时触发
        if (!value) {
          delete this.model.secondMiddleTime
          delete this.model.secondDowntimeDescription
        }
      },

      /**
       * 拆分一段禁用日期范围
       * @param current 禁用范围
       * @returns {boolean}
       */
      disabledDate1(current) {
        const { startDate, endDate, secondMiddleTime } = this.model
        let nextEndTime

        if (!secondMiddleTime) nextEndTime = endDate
        else nextEndTime = secondMiddleTime

        return current < moment(startDate).startOf('days') || current > moment(nextEndTime).endOf('days')
      },

      /**
       * 拆分二段禁用日期范围
       * @param current  禁用范围
       * @returns {boolean}
       */
      disabledDate2(current) {
        const { endDate, firstMiddleTime } = this.model

        return current < moment(firstMiddleTime).startOf('days') || current > moment(endDate).endOf('days')
      },

      /**
       * 创建禁用时间范围数组
       * @param start 开始时间（时分秒）
       * @param end 结束时间（时分秒）
       * @returns {Array}
       */
      handleCreateTimeRangeArray(start, end) {
        const result = []
        for (let i = start; i < end; i++) {
          result.push(i)
        }
        return result
      },

      // 表单提交事件
      handleSubmit() {
        const that = this
        that.confirmLoading = true
        this.$refs.form.validate(valid => {
          if (valid) {

            postAction(that.url.submit, that.model)
              .then(res => {
                if (res.success) {
                  that.$notification.success({
                    message: '消息',
                    description: res.message
                  })
                  that.handleCancel()
                  that.$emit('submitSuccess')
                } else {
                  that.$notification.warning({
                    message: '消息',
                    description: res.message
                  })
                }
              })
              .finally(() => {
                that.confirmLoading = false
              })
            console.log('model', this.model)
          } else {
            return false
          }
        })
      },

      // 关闭弹窗事件
      handleCancel() {
        this.$refs.form.clearValidate()
        this.visible = false