1、设备综合效率分析页面删除按照班次班制管查询功能与重置查询按钮功能 2、大屏车间管理页面选择已有设备方式从表格多选改为树多选

zhuzhuanzhuan

2023-11-24 91b7b3900aec8a54d188e3109a73784ab7b35b7a

1、设备综合效率分析页面删除按照班次班制管查询功能与重置查询按钮功能
2、大屏车间管理页面选择已有设备方式从表格多选改为树多选

 src/views/WorkshopSignage.vue

@@ -17,11 +17,11 @@
        <a-button type="primary" icon="save" size="large" @click="saveDevicePositionAndSizeByApi">保存位置</a-button>
      </div>
      <div class="device-status-info">
        <div v-for="item in deviceStatusList" :key="item.value" class="single-status-info">
        <a-space v-for="item in deviceStatusList" :key="item.value" class="single-status-info">
          <div>{{ item.label }}</div>
          <div class="status-square" :style="{ backgroundColor: item.color }"></div>
          <div>{{ getDeviceNumberByStatus(item.value) }}</div>
        </div>
        </a-space>
      </div>
    </header>

@@ -340,10 +340,10 @@
        justify-content: space-between;

        .single-status-info {
          width: 60px;
          display: flex;
          align-items: center;
          justify-content: space-between;
          /*width: 70px;*/
          /*display: flex;*/
          /*align-items: center;*/
          /*justify-content: space-between;*/

          .status-square {
            width: 14px;

 src/views/mdc/base/modules/OEEAnalysis/OEEAnalysisList.vue

@@ -17,31 +17,31 @@
                  />
                </a-form-item>
              </a-col>
              <a-col :md="5" :sm="5" :xs="5">
                <a-form-item label="班制">
                  <a-select v-model="queryParam.shiftId" placeholder="请选择班制"
                            @change="initShiftSubList" :allowClear="allowClear">
                    <a-select-option v-for="(em,index) in shiftList" :key="index" :value="em.value">
                      {{ em.label }}
                    </a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :md="5" :sm="5" :xs="5">
                <a-form-item label="班次">
                  <a-select v-model="queryParam.shiftSubId" placeholder="请选择班次" @change="initShiftSubListChange"
                            :allowClear="allowClearSu">
                    <a-select-option v-for="(em,index) in shiftSubList" :key="index" :value="em.value">
                      {{ em.label }}
                    </a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <!--<a-col :md="5" :sm="5" :xs="5">-->
                <!--<a-form-item label="班制">-->
                  <!--<a-select v-model="queryParam.shiftId" placeholder="请选择班制"-->
                            <!--@change="initShiftSubList" :allowClear="allowClear">-->
                    <!--<a-select-option v-for="(em,index) in shiftList" :key="index" :value="em.value">-->
                      <!--{{ em.label }}-->
                    <!--</a-select-option>-->
                  <!--</a-select>-->
                <!--</a-form-item>-->
              <!--</a-col>-->
              <!--<a-col :md="5" :sm="5" :xs="5">-->
                <!--<a-form-item label="班次">-->
                  <!--<a-select v-model="queryParam.shiftSubId" placeholder="请选择班次" @change="initShiftSubListChange"-->
                            <!--:allowClear="allowClearSu">-->
                    <!--<a-select-option v-for="(em,index) in shiftSubList" :key="index" :value="em.value">-->
                      <!--{{ em.label }}-->
                    <!--</a-select-option>-->
                  <!--</a-select>-->
                <!--</a-form-item>-->
              <!--</a-col>-->

              <a-col :md="8" :sm="8" :xs="8">
                <a-space>
                  <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
                  <a-button type="primary" @click="searchReset" icon="reload">重置</a-button>
                  <!--<a-button type="primary" @click="searchReset" icon="reload">重置</a-button>-->
                  <a-button type="primary" @click="exportExcel" icon="download">导出</a-button>
                </a-space>
              </a-col>

 src/views/system/WorkshopSignageManagement.vue

@@ -458,6 +458,7 @@
        this.$refs.selectUserModal.visible = true
        this.$refs.selectUserModal.selectedRowKeys = []
        this.$refs.selectUserModal.selectedRows = []
        this.$refs.selectUserModal.checkedKeys = []
      }
    },


 src/views/system/modules/SelectDeviceModal.vue

@@ -1,228 +1,375 @@
<template>
  <div>
    <a-modal
      centered
      :title="title"
      :width="1000"
      :visible="visible"
      @ok="handleOk"
      @cancel="handleCancel"
      cancelText="关闭">
      cancelText="关闭"
      centered
    >

      <!-- 查询区域 -->
      <div class="table-page-search-wrapper">
        <a-form layout="inline" @keyup.enter.native="searchQuery">
          <a-row :gutter="24">
      <!--&lt;!&ndash; 查询区域 &ndash;&gt;-->
      <!--<div class="table-page-search-wrapper">-->
      <!--<a-form layout="inline" @keyup.enter.native="searchQuery">-->
      <!--<a-row :gutter="24">-->

            <a-col :span="10">
              <a-form-item label="设备名称">
                <a-input placeholder="请输入设备名称" v-model="queryParam.equipmentName"></a-input>
              </a-form-item>
            </a-col>
            <a-col :span="8">
                    <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
                      <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
                      <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
                    </span>
            </a-col>
      <!--<a-col :span="10">-->
      <!--<a-form-item label="设备名称">-->
      <!--<a-input placeholder="请输入设备名称" v-model="queryParam.equipmentName"></a-input>-->
      <!--</a-form-item>-->
      <!--</a-col>-->
      <!--<a-col :span="8">-->
      <!--<span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">-->
      <!--<a-button type="primary" @click="searchQuery" icon="search">查询</a-button>-->
      <!--<a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>-->
      <!--</span>-->
      <!--</a-col>-->

          </a-row>
      <!--</a-row>-->
      <!--</a-form>-->
      <!--</div>-->
      <!--&lt;!&ndash; table区域-begin &ndash;&gt;-->
      <!--<div>-->
      <!--<a-table-->
      <!--size="small"-->
      <!--bordered-->
      <!--rowKey="equipmentId"-->
      <!--:columns="columns1"-->
      <!--:dataSource="dataSource1"-->
      <!--:pagination="ipagination"-->
      <!--:loading="loading"-->
      <!--:scroll="{ y: 240 }"-->
      <!--:rowSelection="{selectedRowKeys: selectedRowKeys,onSelectAll:onSelectAll,onSelect:onSelect,onChange: onSelectChange}"-->
      <!--@change="handleTableChange">-->
      <!--</a-table>-->
      <!--</div>-->
      <!--&lt;!&ndash; table区域-end &ndash;&gt;-->

      <a-spin :spinning="loading">
        <!-- showLine -->
        <a-form>
          <a-form-item label="车间层级：">
            <a-tree showLine ref="tree" :expandedKeys.sync="expandedKeys"
                    :treeData="treeDataSource" checkable @check="onCheck" v-model="checkedKeys"
                    :autoExpandParent="autoExpandParent" @expand="onExpand">
            </a-tree>
          </a-form-item>
        </a-form>
      </div>
      <!-- table区域-begin -->
      <div>
        <a-table
          size="small"
          bordered
          rowKey="equipmentId"
          :columns="columns1"
          :dataSource="dataSource1"
          :pagination="ipagination"
          :loading="loading"
          :scroll="{ y: 240 }"
          :rowSelection="{selectedRowKeys: selectedRowKeys,onSelectAll:onSelectAll,onSelect:onSelect,onChange: onSelectChange}"
          @change="handleTableChange">
        </a-table>
      </div>
      <!-- table区域-end -->

      </a-spin>

      <template slot="footer">
        <div>
          <div>
            <a-dropdown
              style="float: left"
              :trigger="['click']"
              placement="topCenter"
            >
              <a-menu slot="overlay">
                <a-menu-item key="1" @click="expandAll">展开所有</a-menu-item>
                <a-menu-item key="2" @click="closeAll">合并所有</a-menu-item>
                <a-menu-item key="3" @click="refreshTree">刷新</a-menu-item>
              </a-menu>
              <a-button>
                树操作
                <a-icon type="up"/>
              </a-button>
            </a-dropdown>
          </div>
          <a-space>
            <a-button
              @click="handleCancel"
            >关闭
            </a-button>
            <a-button
              @click="handleOk"
              type="primary"
            >确定
            </a-button>
          </a-space>
        </div>
      </template>

    </a-modal>
  </div>
</template>

<script>
  import { filterObj } from '@/utils/util'
  import { getAction } from '@/api/manage'
  // import { filterObj } from '@/utils/util'
  // import { getAction } from '@/api/manage'
  import {
    getAction,
    postAction,
    deleteAction
  } from '@/api/manage'
  import BaseTree from '@/views/mdc/common/BaseTree'
  import DepartTree from '@/views/mdc/base/modules/DepartList/DepartListTree/DepartTree'
  import { mapActions } from 'vuex'

  export default {
    name: 'SelectDeviceModal',
    data() {
      return {
        title: '添加已有设备',
        names: [],
        visible: false,
        placement: 'right',
        description: '',
        // 查询条件
        queryParam: {},
        // 表头
        columns1: [
          {
            title: '#',
            dataIndex: '',
            key: 'rowIndex',
            width: 50,
            align: 'center',
            customRender: function(t, r, index) {
              return parseInt(index) + 1
            }
          },
          {
            title: '设备编号',
            align: 'center',
            width: 100,
            dataIndex: 'equipmentId'
          },
          {
            title: '设备名称',
            align: 'center',
            width: 100,
            dataIndex: 'equipmentName'
          },
          {
            title: '设备类型',
            align: 'center',
            width: 100,
            dataIndex: 'equipmentType'
          },
          {
            title: '驱动类型',
            align: 'center',
            width: 100,
            dataIndex: 'driveType'
          }
        ],
        //数据集
        dataSource1: [],
        dataSource2: [],
        // 分页参数
        ipagination: {
          current: 1,
          pageSize: 10,
          pageSizeOptions: ['10', '20', '30'],
          showTotal: (total, range) => {
            return range[0] + '-' + range[1] + ' 共' + total + '条'
          },
          showQuickJumper: true,
          showSizeChanger: true,
          total: 0
        },
        loading: false,
        selectedRowKeys: [],
        selectedRows: [],
        url: {
          list: '/mdc/mdcEquipment/list'
    components: {
      BaseTree, DepartTree
    },
    props: {
      editDisable: {
        type: Boolean,
        default() {
          return true
        }
      }
    },
    data() {
      return {
        title: '添加已有设备',
        cardLoading: false,
        loading: false,
        treeDataSource: [],
        expandedKeys: [],
        checkedKeys: [],
        url: {
          getBaseTree: '/mdc/mdcEquipment/queryTreeListByProduction'
        },
        dataList: [],
        autoExpandParent: true,
        checkStrictly: true,
        allTreeKeys: [],
        visible: false,
        dataSource: []

        // names: [],
        // placement: 'right',
        // description: '',
        // // 查询条件
        // queryParam: {},
        // // 表头
        // columns1: [
        //   {
        //     title: '#',
        //     dataIndex: '',
        //     key: 'rowIndex',
        //     width: 50,
        //     align: 'center',
        //     customRender: function(t, r, index) {
        //       return parseInt(index) + 1
        //     }
        //   },
        //   {
        //     title: '设备编号',
        //     align: 'center',
        //     width: 100,
        //     dataIndex: 'equipmentId'
        //   },
        //   {
        //     title: '设备名称',
        //     align: 'center',
        //     width: 100,
        //     dataIndex: 'equipmentName'
        //   },
        //   {
        //     title: '设备类型',
        //     align: 'center',
        //     width: 100,
        //     dataIndex: 'equipmentType'
        //   },
        //   {
        //     title: '驱动类型',
        //     align: 'center',
        //     width: 100,
        //     dataIndex: 'driveType'
        //   }
        // ],
        // //数据集
        // dataSource1: [],
        // dataSource2: [],
        // // 分页参数
        // ipagination: {
        //   current: 1,
        //   pageSize: 10,
        //   pageSizeOptions: ['10', '20', '30'],
        //   showTotal: (total, range) => {
        //     return range[0] + '-' + range[1] + ' 共' + total + '条'
        //   },
        //   showQuickJumper: true,
        //   showSizeChanger: true,
        //   total: 0
        // },
        // loading: false,
        // selectedRowKeys: [],
        // selectedRows: [],
        // url: {
        //   list: '/mdc/mdcEquipment/list'
        // },
        // activeKey: '1',
        // isDepartType: ''
      }
    },
    created() {
      this.loadData()
      // this.loadData()
      this.queryTreeData()
      this.closeAll()
    },
    methods: {
      searchQuery() {
        this.loadData(1)
      ...mapActions(['QueryProduction']),

      onExpand(expandedKeys) {
        this.expandedKeys = expandedKeys
        this.autoExpandParent = false
      },
      searchReset() {
        this.queryParam = {}
        this.loadData(1)

      queryTreeData() {
        this.loading = true
        this.cardLoading = true
        this.QueryProduction().then(res => {
          if (res.success) {
            this.dataList = []
            this.allTreeKeys = []
            this.getTreeDataSouce(res.result)
            this.treeDataSource = res.result
            this.generateList(this.treeDataSource)
            console.log('treeDataSource', this.treeDataSource)
          } else {
            this.$message.warn(res.message)
          }
        }).finally(() => {
          this.loading = false
          this.cardLoading = false
        })
      },

      generateList(data) {
        for (let i = 0; i < data.length; i++) {
          const node = data[i]
          const key = node.key
          const title = node.title
          this.dataList.push({
            key,
            title: title
          })
          this.allTreeKeys.push(key)
          if (node.children) {
            this.generateList(node.children)
          }
        }
      },

      getTreeDataSouce(data) {
        data.forEach(item => {
          if (item.children && item.children.length > 0) {
            this.getTreeDataSouce(item.children)
          }
          item.key = item.equipmentId ? item.equipmentId : item.key
          item.value = item.equipmentId ? item.equipmentId : item.value
        })
      },
      expandAll() {
        this.expandedKeys = this.allTreeKeys
      },
      closeAll() {
        this.expandedKeys = ['-1']
      },
      refreshTree() {
        this.queryTreeData()
      },
      onCheck(value) {
        this.checkedKeys = value
      },
      handleCancel() {
        this.visible = false
      },
      handleOk() {
        this.dataSource2 = this.selectedRowKeys
        console.log('data---------' + this.dataSource2)
        if (this.dataSource2.length > 0) {
          this.$emit('selectFinished', this.dataSource2)
        if (this.checkedKeys.length > 0) {
          this.$emit('selectFinished', this.checkedKeys)
        }
        this.visible = false
      },
      add() {
        this.visible = true
      },
      loadData(arg) {
        //加载数据 若传入参数1则加载第一页的内容
        if (arg === 1) {
          this.ipagination.current = 1
        }
        var params = this.getQueryParams()//查询条件
        getAction(this.url.list, params).then((res) => {
          if (res.success) {
            this.dataSource1 = res.result.records
            this.ipagination.total = res.result.total
          }
        })
      },
      getQueryParams() {
        var param = Object.assign({}, this.queryParam, this.isorter)
        param.field = this.getQueryField()
        param.pageNo = this.ipagination.current
        param.pageSize = this.ipagination.pageSize
        return filterObj(param)
      },
      getQueryField() {
        //TODO 字段权限控制
      },
      onSelectAll(selected, selectedRows, changeRows) {
        if (selected === true) {
          for (var a = 0; a < changeRows.length; a++) {
            this.dataSource2.push(changeRows[a])
          }
        } else {
          for (var b = 0; b < changeRows.length; b++) {
            this.dataSource2.splice(this.dataSource2.indexOf(changeRows[b]), 1)
          }
        }
        // console.log(selected, selectedRows, changeRows);
      },
      onSelect(record, selected) {
        console.log(this.selectedRowKeys)
        if (selected === true) {
          this.dataSource2.push(record)
        } else {
          var index = this.dataSource2.indexOf(record)
          //console.log();
          if (index >= 0) {
            this.dataSource2.splice(this.dataSource2.indexOf(record), 1)
          }
        }
      },
      onSelectChange(selectedRowKeys, selectedRows) {
        console.log('selectedRowKeys', selectedRowKeys)
        this.selectedRowKeys = selectedRowKeys
        this.selectionRows = selectedRows
      },
      onClearSelected() {
        this.selectedRowKeys = []
        this.selectionRows = []
      },
      handleDelete: function(record) {
        this.dataSource2.splice(this.dataSource2.indexOf(record), 1)
      },
      handleTableChange(pagination, filters, sorter) {
        //分页、排序、筛选变化时触发
        console.log(sorter)
        //TODO 筛选
        if (Object.keys(sorter).length > 0) {
          this.isorter.column = sorter.field
          this.isorter.order = 'ascend' == sorter.order ? 'asc' : 'desc'
        }
        this.ipagination = pagination
        this.loadData()
      }


      // add() {
      //   this.visible = true
      // },
      // loadData(arg) {
      //   //加载数据 若传入参数1则加载第一页的内容
      //   if (arg === 1) {
      //     this.ipagination.current = 1
      //   }
      //   var params = this.getQueryParams()//查询条件
      //   getAction(this.url.list, params).then((res) => {
      //     if (res.success) {
      //       this.dataSource1 = res.result.records
      //       this.ipagination.total = res.result.total
      //     }
      //   })
      // },
      // getQueryParams() {
      //   var param = Object.assign({}, this.queryParam, this.isorter)
      //   param.field = this.getQueryField()
      //   param.pageNo = this.ipagination.current
      //   param.pageSize = this.ipagination.pageSize
      //   return filterObj(param)
      // },
      // getQueryField() {
      //   //TODO 字段权限控制
      // },
      // onSelectAll(selected, selectedRows, changeRows) {
      //   if (selected === true) {
      //     for (var a = 0; a < changeRows.length; a++) {
      //       this.dataSource2.push(changeRows[a])
      //     }
      //   } else {
      //     for (var b = 0; b < changeRows.length; b++) {
      //       this.dataSource2.splice(this.dataSource2.indexOf(changeRows[b]), 1)
      //     }
      //   }
      //   // console.log(selected, selectedRows, changeRows);
      // },
      // onSelect(record, selected) {
      //   console.log(this.selectedRowKeys)
      //   if (selected === true) {
      //     this.dataSource2.push(record)
      //   } else {
      //     var index = this.dataSource2.indexOf(record)
      //     //console.log();
      //     if (index >= 0) {
      //       this.dataSource2.splice(this.dataSource2.indexOf(record), 1)
      //     }
      //   }
      // },
      // onSelectChange(selectedRowKeys, selectedRows) {
      //   console.log('selectedRowKeys', selectedRowKeys)
      //   this.selectedRowKeys = selectedRowKeys
      //   this.selectionRows = selectedRows
      // },
      // onClearSelected() {
      //   this.selectedRowKeys = []
      //   this.selectionRows = []
      // },
      // handleDelete: function(record) {
      //   this.dataSource2.splice(this.dataSource2.indexOf(record), 1)
      // },
      // handleTableChange(pagination, filters, sorter) {
      //   //分页、排序、筛选变化时触发
      //   console.log(sorter)
      //   //TODO 筛选
      //   if (Object.keys(sorter).length > 0) {
      //     this.isorter.column = sorter.field
      //     this.isorter.order = 'ascend' == sorter.order ? 'asc' : 'desc'
      //   }
      //   this.ipagination = pagination
      //   this.loadData()
      // },


    }
  }
</script>
<style lang="less" scoped>
  /deep/ .ant-modal {
    /*transform-origin: 337px 50px;*/
  }

  .ant-card-body .table-operator {
    margin-bottom: 18px;
  }
@@ -253,4 +400,16 @@
    height: 90% !important;
    overflow-y: hidden
  }

  .drawer-bootom-button {
    position: absolute;
    bottom: 0;
    width: 100%;
    border-top: 1px solid #e8e8e8;
    padding: 10px 16px;
    text-align: right;
    left: 0;
    background: #fff;
    border-radius: 0 0 2px 2px;
  }
</style>