优化用户管理页面表单填写界面选择设备功能，车间重新选择后重置选择设备

zhuzhuanzhuan

2024-03-04 b4d09a09d2a8ffc939e97f8b400ff94a64d13eb7

 src/views/mdc/base/modules/efficiencyShiftReport/EfficiencyShiftList.vue

@@ -6,7 +6,7 @@
        <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-col :md="5" :sm="5" >
              <a-form-item label="设备类型">
                <a-select placeholder="请选择设备类型" :triggerChange="true" v-model="queryParam.equipmentType" :allowClear="true">
                  <a-select-option v-for='item in selectList' :key='item.id' :value='item.equipmentTypeName'>
@@ -15,9 +15,19 @@
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :md="5" :sm="5">
              <a-form-item label="驱动类型">
                <a-auto-complete
                  v-model="queryParam.driveType"
                  :data-source="driveTypeList"
                  placeholder="请选择驱动类型"
                  :filter-option="filterOption"
                />
              </a-form-item>
            </a-col>
            <a-col :md="5" :sm="5" :xs="5">
              <a-form-item label="时间">
                <a-range-picker @change="dateParamChange" :disabledDate="disabledDate" format="YYYYMMDD" v-model="dates"/>
                <a-range-picker @change="dateParamChange" :disabledDate="disabledDate" format="YYYYMMDD" v-model="dates" :allowClear="false"/>
              </a-form-item>
            </a-col>
            <a-col :md="4" :sm="4" :xs="4">
@@ -39,20 +49,25 @@
                </a-select>
              </a-form-item>
            </a-col>
            <!--<a-col :md="7" :sm="7" :xs="7">-->
              <!--<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="exportExcel" icon="download">导出</a-button>-->
              <!--</a-space>-->
            <!--</a-col>-->
          </a-row>
          <a-row :gutter="24">
            <a-col :md="9" :sm="9" :xs="9">
              <a-checkbox-group :value="checkedList" :default-value="['lyl']" :options="efficiencyOptions"
                                @change="efficiencyOptionsOnChange"/>
            </a-col>
            <a-col :md="5" :sm="5">
              <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="exportExcel" icon="download">导出</a-button>
              </a-space>
            </a-col>
            <a-col :md="10" :sm="10">
          <a-row :gutter="24" type="flex" align="middle">
            <a-col :md="24" :sm="24" :xs="24" style="display: flex;justify-content: space-between;align-items: flex-start">
              <div>
                <a-space style="margin-right: 20px">
                  <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="exportExcel" icon="download">导出</a-button>
                </a-space>
                <a-checkbox-group :value="checkedList" :default-value="['lyl']" :options="efficiencyOptions"
                                  @change="efficiencyOptionsOnChange"/>
              </div>
              <table cellpadding="5" cellspacing="1" style="border: 1px solid darkgray;">
                <tr>
                  <td v-for="(item, index) in identifying">{{item.title}}</td>
@@ -118,9 +133,20 @@
              <tbody>
              <tr class="mathData" v-for="(item, index) in dataList">
                <template v-if="item.level1!=='合计'&&item.level1!=='平均值'">
                  <td  class="tdgu kaitou wenzi" :rowspan="item.level1span" :class="{hidden: item.level1dis,noExl:item.level1dis}"  v-show="!item.level1dis">{{item.level1}}</td>
                  <td  class="tdgu1 kaitou wenzi" :rowspan="item.level2span" :class="{hidden: item.level2dis,noExl:item.level2dis}"  v-show="!item.level2dis">{{item.level2}}</td>
                  <td  class="tdgu2 kaitou wenzi" :rowspan="item.level3span" :class="{hidden: item.level3dis,noExl:item.level3dis}"  v-show="!item.level3dis">{{item.level3}}</td>
                  <td  class="tdgu kaitou" :rowspan="item.level1span" :class="{hidden: item.level1dis,noExl:item.level1dis}"  v-show="!item.level1dis">
                    <div class="wenzi">
                    {{item.level1}}
                  </div></td>
                  <td  class="tdgu1 kaitou" :rowspan="item.level2span" :class="{hidden: item.level2dis,noExl:item.level2dis}"  v-show="!item.level2dis">
                    <div class="wenzi">
                      {{item.level2}}
                    </div>
                  </td>
                  <td  class="tdgu2 kaitou" :rowspan="item.level3span" :class="{hidden: item.level3dis,noExl:item.level3dis}"  v-show="!item.level3dis">
                    <div class="wenzi">
                      {{item.level3}}
                    </div>
                  </td>
                  <td class="tdgu3  kaitou">{{item.equipmentId}}</td>
                  <td class="tdgu4  kaitou" style="min-width: 162px; max-width: 162px;width: 162px;">{{item.equipmentName}}</td>
                  <td class="tdgu5  kaitou">{{item.equipmentType}}</td>
@@ -175,6 +201,8 @@
  import $ from 'jquery'
  import '@/components/table2excel/table2excel'
  import { ajaxGetDictItems, getDictItemsFromCache, duplicateCheck } from '@/api/api'
  import api from '@/api/mdc'

  export default {
    name: 'EfficiencyShiftList',
    components: {},
@@ -187,6 +215,7 @@
        allowClearSu:true,
        dates: [],
        selectList:[],
        driveTypeList:[],
        identifying: [],
        queryParam: {},
        queryParamEquip:{},
@@ -228,6 +257,7 @@
      this.queryParam.typeTree = "1"
      this.loadData();
      this.queryGroup()
      this.getDriveTypeByApi()
    },
    watch: {
      Type(valmath){
@@ -276,7 +306,7 @@
       */
      getFormattedTime(seconds) {
        if (seconds) {
          return parseFloat((seconds / 3600).toFixed(2)) + '小时'
          return parseFloat((seconds / 3600).toFixed(2))
        } else {
          return '0'
        }
@@ -446,7 +476,7 @@
        this.queryParam.startTime = v2[0]
        this.queryParam.endTime = v2[1]
        // 点击时间选择器的清空按钮时会触发此判断(点击重置按钮不会触发)，实现重置列表功能，切实改变列表显示效果
        if(!this.queryParam.startTime&&!this.queryParam.endTime)this.searchReset()
        // if(!this.queryParam.startTime&&!this.queryParam.endTime)this.searchReset()
      },
      efficiencyOptionsOnChange(checkedList) {
        let index = checkedList.indexOf('lyl')
@@ -461,22 +491,14 @@
        this.checkedList = checkedList
      },
      searchQuery() {
        if(this.dates != ''){
          if(this.queryParam.typeTree == "1"){
            this.queryParam.parentId =  this.queryParamEquip.parentId
            this.queryParam.equipmentId = this.queryParamEquip.equipmentId
          }else{
            this.queryParam.parentId = this.queryParamPeople.parentId
            this.queryParam.equipmentId = ""
          }
          this.loadData()
        if(this.queryParam.typeTree == "1"){
          this.queryParam.parentId =  this.queryParamEquip.parentId
          this.queryParam.equipmentId = this.queryParamEquip.equipmentId
        }else{
          // this.$message.warning("请选择时间")
          this.$notification.warning({
            message:'消息',
            description:"请选择时间"
          });
          this.queryParam.parentId = this.queryParamPeople.parentId
          this.queryParam.equipmentId = ""
        }
        this.loadData()
        // this.onClearSelected()
      },
      searchReset() {
@@ -484,7 +506,9 @@
        this.typeParent =  this.queryParam.parentId
        this.typeEquipment = this.queryParam.equipmentId
        this.queryParam = {}
        this.dates = []
        this.dates = [moment().subtract('days', 7), moment().subtract('days', 1)]
        this.queryParam.startTime = moment(this.dates[0]).format('YYYYMMDD')
        this.queryParam.endTime = moment(this.dates[1]).format('YYYYMMDD')
        this.queryParam.typeTree = this.typeTree
        this.queryParam.parentId = this.typeParent
        this.queryParam.equipmentId =  this.typeEquipment
@@ -499,6 +523,12 @@
          if (res.success) {
            this.tableHeads = res.result.dates
            this.dataList = res.result.mdcEfficiencyList
            if (res.result.mdcEfficiencyList && !res.result.mdcEfficiencyList.length) {
              this.$notification.info({
                message: '消息',
                description: '暂无该设备类型数据'
              })
            }
            this.checkSameData(this.dataList)
            this.checkSameData1(this.dataList)
            this.checkSameData2(this.dataList)
@@ -526,7 +556,28 @@
        }).finally(() => {
          this.loading = false
        })
      }
      },

      /**
       * 调用接口获取控制系统类型
       */
      getDriveTypeByApi(){
        api.getDriveTypeApi().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
        );
      },
    }
  }
</script>
@@ -590,27 +641,32 @@
    top:0;
    z-index: 3;
  }

  .table2 thead .gudingth th{
    position: sticky;
    top: 32px;
    z-index: 2;
  }

  .table2 thead .equipname .name{
    z-index: 3;
  }

  .table2 thead .equipname .dong1{
    z-index: 4;
    left: 0;
    /*border: 1px solid #000;*/
  }

  .table2 thead .equipname .dong2{
    z-index: 5;
    left: 50px;
  }

  .table2 thead .equipname .dong3{
    z-index: 5;
    left: 100px;
  }

  .table2 thead .equipname .dong4{
    z-index: 5;
    left: 150px;
@@ -619,43 +675,48 @@
    z-index: 5;
    left: 250px;
  }

  .table2 thead .equipname .dong6{
    z-index: 5;
    left: 412px;
  }

  .table2 thead .equipname .dong7{
    z-index: 6;
    left: 512px;
  }

  #EfficiencyShift{
    overflow: hidden;
  }

  @media screen and (min-width: 1920px){
    #EfficiencyShift{
      height: 670px!important;
      overflow: scroll;
    }
  }

  @media screen and (min-width: 1680px) and (max-width: 1920px){
    #EfficiencyShift{
      height: 670px!important;
      overflow: scroll;
    }
  }

  @media screen and (min-width: 1400px) and (max-width: 1680px){
    #EfficiencyShift{
      height: 522px!important;
      overflow: scroll;
    }
  }

  @media screen and (min-width: 1280px) and (max-width: 1400px){
    #EfficiencyShift{
      height: 414px!important;
      overflow: scroll;
    }
  }

  @media screen and (max-width: 1280px){
    #EfficiencyShift{
      height: 414px!important;
      overflow: scroll;
    }
  }

@@ -681,10 +742,6 @@
    text-align: center;
  }

  .dataContent .fixed th {
    width: 50px;
  }

  .dataContent .thead th {
    background-color: #fafafa;
    text-align: center;
@@ -692,31 +749,8 @@
    padding: 5px;
  }

  .dataContent .notfixed th {
    width: auto;
  }

  /*.dataContent tr td {*/
    /*height: 35px*/
  /*}*/

  .dataContent .mathData td {
    padding: 10px;
    /*display: none;*/
  }

  .dataContent .mathData .td {
    /*background-color: #ff9bd2;*/
    display: inline-block;
    padding: 10px;
  }

  .dataContent .mathData .tdd {
    /*display: none;*/
  }
  /*.seach-content{*/
    /*display: flex;*/
    /*justify-content: space-between;*/
  /*}*/

</style>