1、看板页面图表完成100% 2、调整全局页脚 3、新增设备信息维护、零件与物料信息等页面

zhaowei

2024-06-25 8d967a454017761dde33acc2d1bbe1b86163d0a2

1、看板页面图表完成100%
2、调整全局页脚
3、新增设备信息维护、零件与物料信息等页面

 src/api/mdc.js

@@ -1,7 +1,6 @@
import { getAction, deleteAction, putAction, postAction, httpAction } from '@/api/manage'

export default {
  // -------------------------------------驱动参数管理页面----------------------------------------
  // èŽ·å–控制系统类型
  getDriveTypeApi: () => getAction('/mdc/mdcDriveTypeParamConfig/getDriveParamOptions'),
  // -------------------------------------车间看板页面--------------------------------------------

 src/assets/image/MDC_151A.png

 src/assets/image/MDC_a.png

 src/assets/image/MDC_index.png

 src/assets/image/MES_a.png

 src/assets/image/VR_a.png

 src/assets/image/stateImg_gray.gif

 src/assets/image/stateImg_green.gif

 src/assets/image/stateImg_red.gif

 src/assets/image/stateImg_yellow.gif

 src/components/page/GlobalFooter.vue

@@ -1,31 +1,21 @@
<template>
  <div class="footer">
    <div class="links">
      <a href="http://www.jeecg.com" target="_blank">JEECG é¦–页</a>
      <a href="https://github.com/zhangdaiscott/jeecg-boot" target="_blank">
        <a-icon type="github"/>
      </a>
      <a href="https://ant.design/">Ant Design</a>
      <a href="https://vuecomponent.github.io/ant-design-vue/docs/vue/introduce-cn/">Vue Antd</a>
    </div>
    <div class="copyright">
      Copyright
      <a-icon type="copyright"/>
      2019 <span>JEECG开源社区 å‡ºå“</span>
      2024 <span>2015-2025 çµç§€æ™ºèƒ½</span>
    </div>
  </div>
</template>

<script>
  export default {
    name: "LayoutFooter"
    name: 'LayoutFooter'
  }
</script>

<style lang="less" scoped>
  .footer {
    padding: 0 16px;
    margin: 48px 0 24px;
    text-align: center;

    .links {

 src/views/mdc/base/DncWorkshopSignage.vue

ÎļþÌ«´ó

 src/views/mdc/base/EquipmentInfoMaintenance.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,233 @@
<template>
  <a-card>
    <!-- æŸ¥è¯¢åŒºåŸŸ -->
    <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-input placeholder="请输入设备编号" v-model="queryParam.equipmentId"></a-input>
            </a-form-item>
          </a-col>

          <a-col :md="4" :sm="4">
            <a-form-item label="设备名称">
              <a-input placeholder="请输入设备名称" v-model="queryParam.equipmentName"></a-input>
            </a-form-item>
          </a-col>

          <a-col :md="4" :sm="4">
            <a-form-item label="车间名称">
              <a-tree-select v-model="queryParam.productionName" :treeData="workshopTreeData" placeholder="请选择车间"
                             :treeDefaultExpandedKeys="treeDefaultExpandedKeys"></a-tree-select>
            </a-form-item>
          </a-col>

          <a-col :md="4" :sm="4">
            <a-form-item label="驱动类型">
              <a-auto-complete
                v-model="queryParam.controlSystemType"
                :data-source="driveTypeList"
                placeholder="请选择控制系统类型"
                :filter-option="filterOption"
                :allowClear="true"
              />
            </a-form-item>
          </a-col>

          <a-col :md="4" :sm="4">
            <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
            <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
          </a-col>
        </a-row>
      </a-form>
    </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:465}"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="ipagination"
        :loading="loading"
        :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
        @change="handleTableChange">
        <span slot="action" slot-scope="text, record">
          <a @click="handleEdit(record)">编辑</a>

          <a-divider type="vertical"/>

          <a-dropdown>
            <a class="ant-dropdown-link">
              æ›´å¤š <a-icon type="down"/>
            </a>
            <a-menu slot="overlay">
              <a-menu-item>
                <a href="javascript:;" @click="handleDetail(record)">详情</a>
              </a-menu-item>

              <a-menu-item>
                <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
                  <a>删除</a>
                </a-popconfirm>
              </a-menu-item>
            </a-menu>
          </a-dropdown>
        </span>


      </a-table>
    </div>
    <!-- table区域-end -->

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

<script>
  import { JeecgListMixin } from '@/mixins/JeecgListMixin'
  import { queryProductionTreeList } from '@/api/api'
  import { getAction } from '@/api/manage'
  import EquipmentInfoMaintenanceModal from './modules/EquipmentInfoMaintenance/EquipmentInfoMaintenanceModal'

  export default {
    name: 'EquipmentInfoMaintenance',
    components: { EquipmentInfoMaintenanceModal },
    mixins: [JeecgListMixin],
    data() {
      return {
        queryParam: {},
        url: {
          list: '/mdc/mdcEquipment/list',
          queryDriveType: '/mdc/mdcDriveTypeParamConfig/getDriveParamOptions'
        },
        workshopTreeData: [],
        treeDefaultExpandedKeys: [],
        driveTypeList:[],
        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',
            width: 280,
            dataIndex: 'equipmentName'
          },
          {
            title: '车间',
            align: 'center',
            width: 280,
            dataIndex: 'productionName'
          },
          {
            title: '驱动类型',
            align: 'center',
            width: 200,
            dataIndex: 'driveType'
          },
          {
            title: '重点设备标记',
            align: 'center',
            width: 200,
            dataIndex: 'isImportant'
          },
          {
            title: '维修标记',
            align: 'center',
            width: 200,
            dataIndex: 'maintainType'
          },
          {
            title: '空转启用/停用',
            align: 'center',
            width: 200,
            dataIndex: 'isSpace'
          },
          {
            title: '操作',
            dataIndex: 'action',
            scopedSlots: { customRender: 'action' },
            align: 'center',
            width: 150,
            fixed: 'right'
          }

        ]
      }
    },
    created() {
      this.getWorkshopListByApi()
      this.getDriveTypeByApi()
    },
    methods: {
      /**
       * è°ƒç”¨æŽ¥å£èŽ·å–查询区域车间树列表
       */
      getWorkshopListByApi() {
        queryProductionTreeList().then(res => {
          if (res.success) {
            this.workshopTreeData = res.result
            this.treeDefaultExpandedKeys = [...res.result].map(item => item.key)
          }
        })
      },
      /**
       * è°ƒç”¨æŽ¥å£èŽ·å–控制系统类型
       */
      getDriveTypeByApi() {
        getAction(this.url.queryDriveType).then((res) => {
          this.driveTypeList = res.result.map(item => item.value)
        })
      },
      /**
       * è”想输入框筛选功能
       * @param input è¾“入的内容
       * @param option é…ç½®
       * @returns {boolean} åˆ¤æ–­æ˜¯å¦ç­›é€‰
       */
      filterOption(input, option) {
        return (
          option.componentOptions.children[0].text.toUpperCase().indexOf(input.toUpperCase()) >= 0
        )
      },

      handleEdit: function(record) {
        this.$refs.modalForm.edit(record)
        this.$refs.modalForm.title = '编辑'

        // è°ƒç”¨æŠ½å±‰è¡¨å•ç»„件中的清除表单验证方法
        this.$refs.modalForm.removeValidate()
      },
    }
  }
</script>

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

 src/views/mdc/base/IdleDataMaintenance.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,20 @@
<template>
  <a-card>
    ç©ºè½¬æ•°æ®ç»´æŠ¤
  </a-card>
</template>

<script>
  export default {
    name: 'IdleDataMaintenance',
    components: {},
    data() {
      return {}
    },
    methods: {}
  }
</script>

<style scoped>

</style>

 src/views/mdc/base/PartsAndMaterialInfo.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,194 @@
<template>
  <a-card>
    <!-- æŸ¥è¯¢åŒºåŸŸ -->
    <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-input placeholder="请输入零件号" v-model="queryParam.partsCode"></a-input>
            </a-form-item>
          </a-col>

          <a-col :md="4" :sm="4">
            <a-form-item label="物料号">
              <a-input placeholder="请输入物料号" v-model="queryParam.materialCode"></a-input>
            </a-form-item>
          </a-col>

          <a-col :md="4" :sm="4">
            <a-form-item label="添加时间">
              <a-date-picker style="width: 200px" v-model="queryParam.operateTime" format='YYYY-MM-DD'
                             valueFormat="YYYY-MM-DD"/>
            </a-form-item>
          </a-col>

          <a-col :md="4" :sm="4">
            <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
            <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
          </a-col>
        </a-row>

      </a-form>
    </div>

    <!-- æ“ä½œæŒ‰é’®åŒºåŸŸ -->
    <div class="table-operator" style="border-top: 5px">
      <a-button @click="handleAdd" type="primary" icon="plus">新增</a-button>
      <a-button type="primary" icon="download" @click="handleExportXls('零件与物料信息')">导出</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:465}"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="ipagination"
        :loading="loading"
        :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
        @change="handleTableChange">
        <span slot="action" slot-scope="text, record">
          <a @click="handleEdit(record)">编辑</a>

          <a-divider type="vertical"/>

          <a-dropdown>
            <a class="ant-dropdown-link">
              æ›´å¤š <a-icon type="down"/>
            </a>
            <a-menu slot="overlay">
              <a-menu-item>
                <a href="javascript:;" @click="handleDetail(record)">详情</a>
              </a-menu-item>

              <a-menu-item>
                <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
                  <a>删除</a>
                </a-popconfirm>
              </a-menu-item>
            </a-menu>
          </a-dropdown>
        </span>


      </a-table>
    </div>
    <!-- table区域-end -->

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

<script>
  import { JeecgListMixin } from '@/mixins/JeecgListMixin'
  import PartsAndMaterialInfoModal from './modules/PartsAndMaterialInfo/PartsAndMaterialInfoModal'

  export default {
    name: 'PartsAndMaterialInfo',
    components: { PartsAndMaterialInfoModal },
    mixins: [JeecgListMixin],
    data() {
      return {
        queryParam: {},
        url: {
          list: '/mdc/mdcEquipment/list',
          exportXlsUrl: ''
        },
        columns: [
          {
            title: '#',
            dataIndex: '',
            key: 'rowIndex',
            width: 60,
            align: 'center',
            customRender: function(t, r, index) {
              return parseInt(index) + 1
            }
          },
          {
            title: '零件号',
            align: 'center',
            dataIndex: 'partsCode',
            width: 400
          },
          {
            title: '物料号',
            align: 'center',
            width: 400,
            dataIndex: 'materialCode'
          },
          {
            title: '添加时间',
            align: 'center',
            width: 400,
            dataIndex: 'operateTime'
          },
          {
            title: '操作员',
            align: 'center',
            width: 350,
            dataIndex: 'operator'
          },
          {
            title: '操作',
            dataIndex: 'action',
            scopedSlots: { customRender: 'action' },
            align: 'center',
            width: 150,
            fixed: 'right'
          }

        ]
      }
    },
    methods: {
      handleAdd: function() {
        this.$refs.modalForm.add()
        this.$refs.modalForm.title = '新增'

        // è°ƒç”¨æŠ½å±‰è¡¨å•ç»„件中的清除表单验证方法
        this.$refs.modalForm.removeValidate()
      },
      handleEdit: function(record) {
        this.$refs.modalForm.edit(record)
        this.$refs.modalForm.title = '编辑'

        // è°ƒç”¨æŠ½å±‰è¡¨å•ç»„件中的清除表单验证方法
        this.$refs.modalForm.removeValidate()
      },
      handleMenuClick(e) {
        if (e.key == 1) {
          this.batchDel()
        }
      }
    }
  }
</script>

<style scoped>

</style>

 src/views/mdc/base/modules/EquipmentInfoMaintenance/EquipmentInfoMaintenanceModal.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,146 @@
<template>
  <a-modal
    :title="title"
    :maskClosable="true"
    :width="modalWidth"
    @cancel="visible=false"
    :visible="visible">
    <a-spin :spinning="confirmLoading">
      <a-form-model ref="form" :form="form" :model="model" :labelCol="labelCol" :wrapperCol="wrapperCol">

        <a-row :gutter="24">
          <a-col :span="24">
            <a-form-model-item prop="isImportant" label="重点设备">
              <a-select v-model="model.isImportant">
                <a-select-option :value="1">普通</a-select-option>
                <a-select-option :value="2">重点</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 prop="maintainType" label="维修设备">
              <a-select v-model="model.maintainType">
                <a-select-option :value="1">正常</a-select-option>
                <a-select-option :value="2">大修,项修</a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
    </a-spin>


    <template slot="footer">
      <a-popconfirm title="确定放弃操作？" @confirm="visible=false" okText="确定" cancelText="取消">
        <a-button style="margin-right: .8rem">取消</a-button>
      </a-popconfirm>
      <a-button @click="handleSubmit" type="primary" :loading="confirmLoading">提交</a-button>
    </template>

  </a-modal>

</template>

<script>
  import pick from 'lodash.pick'
  import api from '@/api/mdc'

  export default {
    name: 'EquipmentInfoMaintenanceModal',
    components: {},
    data() {
      return {
        modalWidth: 700,
        form: this.$form.createForm(this),
        title: '操作',
        visible: false,
        model: {
          isImportant: '',
          maintainType: ''
        },
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 }
        },
        confirmLoading: false
      }
    },
    created() {

    },
    methods: {
      add() {
        this.visible = true
        this.model = {
          partsCode: '',
          materialCode: ''
        }
        this.$nextTick(() => {
          this.form.setFieldsValue(pick(this.model, 'isImportant', 'maintainType'))
        })
      },

      edit(record) {
        this.visible = true
        this.model = Object.assign({}, record)
        this.$nextTick(() => {
          this.form.setFieldsValue(pick(this.model, 'isImportant', 'maintainType'))
        })
      },

      handleSubmit() {
        const that = this
        // è§¦å‘表单验证
        this.$refs.form.validate(valid => {
          if (valid) {
            that.confirmLoading = true
            let obj
            if (this.title == '新增') {
              obj = api.addParamThresholdApi(this.model)
            } else {
              obj = api.editParamThresholdApi(this.model)
            }
            obj.then((res) => {
              if (res.success) {
                that.$notification.success({
                  message: '消息',
                  description: res.message
                })
                that.$emit('ok')
              } else {
                that.$notification.warning({
                  message: '消息',
                  description: res.message
                })
              }
            }).finally(() => {
              that.confirmLoading = false
              this.visible = false
            })
          } else {
            return false
          }
        })
      },

      /**
       * ç¼–辑或查看详情数据时清除抽屉表单验证
       */
      removeValidate() {
        if (this.$refs.form) this.$refs.form.clearValidate()
      }
    }

  }
</script>

<style scoped>

</style>

 src/views/mdc/base/modules/IdleDataMaintenance/IdleDataMaintenanceModal.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,20 @@
<template>
    <div>

    </div>
</template>

<script>
  export default {
    name: 'IdleDataMaintenanceModal',
    components: {},
    data() {
      return {}
    },
    methods: {}
  }
</script>

<style scoped>

</style>

 src/views/mdc/base/modules/PartsAndMaterialInfo/PartsAndMaterialInfoModal.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,153 @@
<template>
  <a-modal
    :title="title"
    :maskClosable="true"
    :width="modalWidth"
    @cancel="visible=false"
    :visible="visible">
    <a-spin :spinning="confirmLoading">
      <a-form-model ref="form" :form="form" :model="model" :rules="validatorRules" :labelCol="labelCol"
                    :wrapperCol="wrapperCol">

        <a-row :gutter="24">
          <a-col :span="24">
            <a-form-model-item prop="partsCode" label="零件号">
              <a-input placeholder="请输入零件号" v-model="model.partsCode"></a-input>
            </a-form-model-item>
          </a-col>
        </a-row>

        <a-row :gutter="24">
          <a-col :span="24">
            <a-form-model-item prop="materialCode" label="物料号">
              <a-input placeholder="请输入物料号" v-model="model.materialCode"></a-input>
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
    </a-spin>


    <template slot="footer">
      <a-popconfirm title="确定放弃操作？" @confirm="visible=false" okText="确定" cancelText="取消">
        <a-button style="margin-right: .8rem">取消</a-button>
      </a-popconfirm>
      <a-button @click="handleSubmit" type="primary" :loading="confirmLoading">提交</a-button>
    </template>

  </a-modal>

</template>

<script>
  import pick from 'lodash.pick'
  import api from '@/api/mdc'

  export default {
    name: 'PartsAndMaterialInfoModal',
    components: {},
    data() {
      return {
        modalWidth: 700,
        form: this.$form.createForm(this),
        validatorRules: {
          partsCode: [
            {
              required: true, message: '请输入零件号'
            }
          ],
          materialCode: [
            {
              required: true, message: '请输入物料号'
            }
          ]
        },
        title: '操作',
        visible: false,
        model: {
          partsCode: '',
          materialCode: ''
        },
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 }
        },
        confirmLoading: false,
      }
    },
    created() {

    },
    methods: {
      add() {
        this.visible = true
        this.model = {
          partsCode: '',
          materialCode: ''
        }
        this.$nextTick(() => {
          this.form.setFieldsValue(pick(this.model, 'partsCode', 'materialCode'))
        })
      },

      edit(record) {
        this.visible = true
        this.model = Object.assign({}, record)
        this.$nextTick(() => {
          this.form.setFieldsValue(pick(this.model, 'partsCode', 'materialCode'))
        })
      },

      handleSubmit() {
        const that = this
        // è§¦å‘表单验证
        this.$refs.form.validate(valid => {
          if (valid) {
            that.confirmLoading = true
            let obj
            if (this.title == '新增') {
              obj = api.addParamThresholdApi(this.model)
            } else {
              obj = api.editParamThresholdApi(this.model)
            }
            obj.then((res) => {
              if (res.success) {
                that.$notification.success({
                  message: '消息',
                  description: res.message
                })
                that.$emit('ok')
              } else {
                that.$notification.warning({
                  message: '消息',
                  description: res.message
                })
              }
            }).finally(() => {
              that.confirmLoading = false
              this.visible = false
            })
          } else {
            return false
          }
        })
      },

      /**
       * ç¼–辑或查看详情数据时清除抽屉表单验证
       */
      removeValidate() {
        if (this.$refs.form) this.$refs.form.clearValidate()
      }
    }

  }
</script>

<style scoped>

</style>