1、报警分析页面报警页面调整比例饼图颜色 2、维修看板页面设备平均故障率柱状图Y轴去除%号以及去除柱子注释含义 3、设备管理页面新增弹窗添加禁止手输设...

zhaowei

2025-05-29 20f77a55f8eeaceb026d1c5ad96de75d6edb712a

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

@@ -1,9 +1,18 @@
<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"
    <a-spin :spinning="spinning">
      <a-form-model ref="form" :model="model" :rules="validatorRules" :labelCol="labelColLong"
                    :wrapperCol="wrapperColLong">
        <a-row :gutter="24">
          <a-col :span="24">
            <a-form-model-item label="设备组" prop="equipmentIds">
              <a-input-search readOnly v-model="model.equipmentIds" @search="deviceSearch" enter-button
                              placeholder="请选择设备"/>
            </a-form-model-item>
          </a-col>
        </a-row>

        <a-row :gutter="24">
          <a-col :span="24">
            <a-form-model-item label="停机类型" prop="downtimeType">
@@ -14,6 +23,7 @@
              </a-radio-group>
            </a-form-model-item>
          </a-col>

        </a-row>

        <a-row :gutter="24">
@@ -30,6 +40,38 @@

        <a-row :gutter="24">
          <a-col :span="24">
            <a-form-model-item label="停机日期" prop="theDate">
              <a-date-picker v-model="model.theDate" placeholder="请选择停机日期" value-format="YYYY-MM-DD"
                             style="width: 100%"/>
            </a-form-model-item>
          </a-col>

        </a-row>

        <a-row :gutter="24">
          <a-col :span="24">
            <a-form-model-item label="停机时长(min)" prop="downLong">
              <a-input-number v-model="model.downLong" :min="1" :step="1" :precision="0" placeholder="请输入停机时长(min)"
                              style="width: 100%"/>
            </a-form-model-item>
          </a-col>
        </a-row>

        <!--<a-row :gutter="24">-->
        <!--<a-col :span="12">-->
        <!--<a-form-model-item label="开始时间" prop="startTime">-->
        <!--<a-time-picker v-model="model.startTime" value-format="HH:mm:ss" style="width: 100%"/>-->
        <!--</a-form-model-item>-->
        <!--</a-col>-->
        <!--<a-col :span="12">-->
        <!--<a-form-model-item label="结束时间" prop="endTime">-->
        <!--<a-time-picker v-model="model.endTime" value-format="HH:mm:ss" style="width: 100%"/>-->
        <!--</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>
@@ -37,128 +79,164 @@
        </a-row>
      </a-form-model>
    </a-spin>

    <select-device-drawer ref="selectDeviceDrawer" @selectFinished="selectOK" :title="'选择设备'"/>
  </a-modal>
</template>

<script>
import { getAction, postAction } from '@api/manage'
  import { getAction, postAction } from '@api/manage'
  import SelectDeviceDrawer from '../../../../system/modules/SelectDeviceDrawer'

export default {
  name: 'EquipmentStandbyShutdownModal',
  components: {},
  props: {},
  data() {
    return {
      title: '',
      visible: false,
      model: {},
      downtimeDescriptionList: [],
      labelColLong: {
        xs: {
          span: 24
  export default {
    name: 'EquipmentStandbyShutdownModal',
    components: { SelectDeviceDrawer },
    props: {},
    data() {
      return {
        title: '',
        visible: false,
        model: {},
        equipmentList: [],
        downtimeDescriptionList: [],
        labelColLong: {
          xs: { span: 24 },
          sm: { span: 6 }
        },
        sm: {
          span: 5
        }
      },
      wrapperColLong: {
        xs: {
          span: 24
        wrapperColLong: {
          xs: { span: 24 },
          sm: { span: 16 }
        },
        sm: {
          span: 17
        confirmLoading: false,
        spinning: false,
        disableSelectDevice: false,
        validatorRules: {
          equipmentIds: [
            { required: true, message: '请选择设备', trigger: 'change' }
          ],
          downtimeType: [
            { required: true, message: '请选择停机类型' }
          ],
          reasonId: [
            { required: true, message: '请选择停机原因' }
          ],
          theDate: [
            { required: true, message: '请选择停机日期' }
          ],
          downLong: [
            { required: true, message: '请输入停机时长(min)' }
          ]
        },
        url: {
          add: '/mdc/mdcDowntime/add',
          edit: '/mdc/mdcDowntime/edit',
          getDowntimeDescriptionListByDowntimeType: '/mdc/mdcDowntimeReason/downtimeReasonList'
        }
      },
      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
    methods: {
      add() {
        this.edit({
          downtimeType: 0
        })
    },
      },

    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
      edit(record) {
        this.model = Object.assign({}, record, { equipmentIds: record.equipmentId })
        this.getDowntimeDescriptionListByApi()
        if (this.model.downtimeType === null) {
          delete this.model.downtimeType
          delete this.model.reasonId
        }
      })
    },
        this.visible = true
      },

    handleCancel() {
      this.visible = false
      this.removeValidate()
    },
      // 停机类型值发生改变时触发清空停机原因并重新获取对应停机类型的停机原因列表
      handleDowntimeTypeChange() {
        if (this.model.reasonId) delete this.model.reasonId
        this.removeValidate()
        this.getDowntimeDescriptionListByApi()
      },

    // 关闭弹窗时清楚表单校验
    removeValidate() {
      if (this.$refs.form) this.$refs.form.clearValidate()
      // 调用接口获取停机原因列表
      getDowntimeDescriptionListByApi() {
        const that = this
        this.downtimeDescriptionList = []
        this.spinning = true
        getAction(this.url.getDowntimeDescriptionListByDowntimeType, { downtimeType: this.model.downtimeType })
          .then(res => {
            if (res.success) that.downtimeDescriptionList = res.result
          })
          .finally(() => {
            that.spinning = false
          })
      },

      handleOk() {
        const that = this
        // 触发表单验证
        console.log('model', this.model)
        this.$refs.form.validate(valid => {
          if (valid) {
            that.confirmLoading = that.spinning = true
            let url
            if (!that.model.id) {
              url = that.url.add
            } else {
              url = that.url.edit
            }
            postAction(url, 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 = that.spinning = false
              })
          } else {
            return false
          }
        })
      },

      deviceSearch() {
        this.$refs.selectDeviceDrawer.visible = true
        this.$refs.selectDeviceDrawer.selectedRowKeys = []
        this.$refs.selectDeviceDrawer.selectedRows = []
        this.$refs.selectDeviceDrawer.checkedKeys = this.model.equipmentIds ? this.model.equipmentIds.split(',') : []
      },

      /**
       * 选择已有设备后点击确定时触发
       * @param data 已选择的设备
       */
      selectOK(data) {
        this.$set(this.model, 'equipmentIds', data.join(','))
        if (this.model.equipmentIds) this.$refs.form.clearValidate('equipmentIds')
      },

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

      // 关闭弹窗时清楚表单校验
      removeValidate() {
        if (this.$refs.form) this.$refs.form.clearValidate()
      }
    }
  }
}
</script>