src/views/mdc/base/modules/efficiencyShiftReport/EfficiencyShiftList.vue
@@ -1,17 +1,26 @@
<template>
  <div style="width: 100%;">
    <a-card :bordered="false">
    <div :bordered="false">
      <!-- 查询区域 -->
      <div class="seach-content">
        <div class="table-page-search-wrapper">
        <a-form layout="inline" @keyup.enter.native="searchQuery">
          <a-row :gutter="24">
            <a-col :md="9" :sm="9" :xs="9">
            <a-col :md="4" :sm="4" >
              <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'>
                    {{item.equipmentTypeName}}
                  </a-select-option>
                </a-select>
              </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-form-item>
            </a-col>
            <a-col :md="6" :sm="6" :xs="6">
            <a-col :md="4" :sm="4" :xs="4">
              <a-form-item label="班制">
                <a-select v-model="queryParam.shiftId" placeholder="请选择班制"
                          @change="initShiftSubList" :allowClear = "allowClear">
@@ -21,7 +30,7 @@
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="6" :xs="6">
            <a-col :md="4" :sm="4" :xs="4">
              <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">
@@ -30,46 +39,55 @@
                </a-select>
              </a-form-item>
            </a-col>
          </a-row>
          <a-row :gutter="24">
            <a-col :md="14" :sm="14" :xs="14">
            <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="3" :sm="3" :xs="3">
              <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
            <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="3" :sm="3" :xs="3">
              <a-button type="primary" @click="searchReset" icon="reload">重置</a-button>
            </a-col>
            <a-col :md="3" :sm="3" :xs="3">
              <a-button type="primary" @click="exportExcel" icon="download">导出</a-button>
            <a-col :md="10" :sm="10">
              <table cellpadding="5" cellspacing="1" style="border: 1px solid darkgray;">
                <tr>
                  <td v-for="(item, index) in identifying">{{item.title}}</td>
                </tr>
                <tr>
                  <td style="text-align:center;" v-for="(item, index) in identifying">
                    <div class="identifyingclass" :style="{background: item.color}"></div>
                  </td>
                </tr>
              </table>
            </a-col>
          </a-row>
        </a-form>
      </div>
        <div style="width: 400px;top: 20px; right: 0px;">
        <table cellpadding="5" cellspacing="1" style="border: 1px solid darkgray;">
          <tr>
            <td v-for="(item, index) in identifying">{{item.title}}</td>
          </tr>
          <tr>
            <td style="text-align:center;" v-for="(item, index) in identifying">
              <div class="identifyingclass" :style="{background: item.color}"></div>
            </td>
          </tr>
        </table>
      </div>
        </div>
        <!--<div style="width: 530px;position:absolute;top: 10px; right: 0;">-->
          <!--<table cellpadding="5" cellspacing="1" style="border: 1px solid darkgray;">-->
            <!--<tr>-->
              <!--<td v-for="(item, index) in identifying">{{item.title}}</td>-->
            <!--</tr>-->
            <!--<tr>-->
              <!--<td style="text-align:center;" v-for="(item, index) in identifying">-->
                <!--<div class="identifyingclass" :style="{background: item.color}"></div>-->
              <!--</td>-->
            <!--</tr>-->
          <!--</table>-->
        <!--</div>-->
      </div>
      <div class="container" id="EfficiencyShift" style="margin-top: 20px;">
        <div class="table2">
          <table class="dataContent table" border="1" cellspacing="0" cellpadding="0" style="white-space: nowrap">
            <thead>
            <tr class="thead fixed equipname">
              <th class="thgu dong1 name" rowspan="2" style="min-width: 150px; max-width: 150px;width: 150px;"></th>
              <th  class="thgu dong2 name" rowspan="2" style="min-width: 150px; max-width: 150px;width: 150px;"></th>
              <th  class="thgu dong3 name" rowspan="2" style="min-width: 150px; max-width: 150px;width: 150px;"></th>
              <th class="thgu dong1 name" rowspan="2" style="min-width: 50px; max-width: 50px;width: 50px;"></th>
              <th  class="thgu dong2 name" rowspan="2" style="min-width: 50px; max-width: 50px;width: 50px;"></th>
              <th  class="thgu dong3 name" rowspan="2" style="min-width: 50px; max-width: 50px;width: 50px;"></th>
              <th class="thgu dong4 name" rowspan="2" style="min-width: 100px; max-width: 100px;width: 100px;">设备编号</th>
              <th class="thgu dong5 name" rowspan="2" style="min-width: 150px; max-width: 150px;width: 150px;">设备名称</th>
              <th class="thgu dong6 name" rowspan="2" style="min-width: 100px; max-width: 100px;width: 100px;">设备类型</th>
@@ -101,9 +119,9 @@
            </thead>
            <tbody>
            <tr class="mathData" v-for="(item, index) in dataList">
              <td  class="tdgu kaitou" :rowspan="item.level1span" :class="{hidden: item.level1dis}"  v-show="!item.level1dis">{{item.level1}}</td>
              <td  class="tdgu1 kaitou" :rowspan="item.level2span" :class="{hidden: item.level2dis}"  v-show="!item.level2dis">{{item.level2}}</td>
              <td  class="tdgu2 kaitou" :rowspan="item.level3span" :class="{hidden: item.level3dis}"  v-show="!item.level3dis">{{item.level3}}</td>
              <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="tdgu3  kaitou">{{item.equipmentId}}</td>
              <td class="tdgu4  kaitou">{{item.equipmentName}}</td>
              <td class="tdgu5  kaitou">{{item.equipmentType}}</td>
@@ -143,7 +161,7 @@
          </table>
        </div>
      </div>
    </a-card>
    </div>
  </div>
</template>
@@ -164,6 +182,7 @@
        allowClear:true,
        allowClearSu:true,
        dates: [],
        selectList:[],
        identifying: [],
        queryParam: {},
        queryParamEquip:{},
@@ -186,7 +205,8 @@
          list: '/mdc/efficiencyReport/efficiencyShiftList',
          listByType: '/mdc/MdcUtilizationRate/getByType',
          initShiftList: '/mdc/mdcMdcShift/initShiftList',
          initShiftSubList: '/mdc/mdcShiftSub/initShiftSubList'
          initShiftSubList: '/mdc/mdcShiftSub/initShiftSubList',
          queryEquipmentType: '/mdc/mdcEquipmentType/queryEquipmentType'
        },
        tableHeads: [],
        shiftList: [],
@@ -202,6 +222,7 @@
      this.queryParam.endTime = moment(this.dates[1]).format('YYYYMMDD')
      this.queryParam.typeTree = "1"
      this.loadData();
      this.queryGroup()
    },
    watch: {
      Type(valmath){
@@ -370,11 +391,11 @@
        })
      },
      initShiftSubList(val) {
        this.queryParam.shiftSubId = null;
        //每次重新选择班制时班次清空且显示placeholder内容
        this.queryParam.shiftSubId = undefined;
        getAction(this.url.initShiftSubList, { shiftId: val }).then((res) => {
          if (res.success) {
            this.shiftSubList = res.result;
          }
        })
      },
@@ -406,24 +427,38 @@
      dateParamChange(v1, v2) {
        this.queryParam.startTime = v2[0]
        this.queryParam.endTime = v2[1]
        // 点击时间选择器的清空按钮时会触发此判断(点击重置按钮不会触发),实现重置列表功能,切实改变列表显示效果
        if(!this.queryParam.startTime&&!this.queryParam.endTime)this.searchReset()
      },
      efficiencyOptionsOnChange(checkedList) {
        let index = checkedList.indexOf('lyl')
        if (index < 0) {
          this.$message.warn('不能取消查询利用率')
          // this.$message.warn('不能取消查询利用率')
          this.$notification.warning({
            message:'消息',
            description:"不能取消查询班次利用率"
          })
          return false
        }
        this.checkedList = checkedList
      },
      searchQuery() {
        if(this.queryParam.typeTree == "1"){
          this.queryParam.parentId =  this.queryParamEquip.parentId
          this.queryParam.equipmentId = this.queryParamEquip.equipmentId
        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()
        }else{
          this.queryParam.parentId = this.queryParamPeople.parentId
          this.queryParam.equipmentId = ""
          // this.$message.warning("请选择时间")
          this.$notification.warning({
            message:'消息',
            description:"请选择时间"
          });
        }
        this.loadData()
        // this.onClearSelected()
      },
      searchReset() {
@@ -452,6 +487,24 @@
            // this.initDeviceType(this.dataList)
          }
        })
      },
      queryGroup() {
        getAction(this.url.queryEquipmentType).then(res => {
          if (res.success) {
            this.selectList = res.result
            // this.selectList = res.result.map((item, index, arr) => {
            //   return { label: item.id, value: item.equipmentTypeName + '' }
            // })
          } else {
            // this.$message.warning(res.message)
            this.$notification.warning({
              message: '消息',
              description: res.message
            })
          }
        }).finally(() => {
          this.loading = false
        })
      }
    }
  }
@@ -468,38 +521,45 @@
    left: 0;
    z-index: 1;
  }
  .table tbody tr .wenzi{
    /*writing-mode: vertical-lr;*/
    /*text-orientation: upright;*/
    transform: rotate(360deg);
    writing-mode: vertical-lr;
    letter-spacing: 2px;
  }
  .table tbody tr .kaitou{
    z-index: 1;
    background-color: white;
  }
  .table tbody tr .tdgu1{
    position: sticky;
    left: 150px;
    left: 50px;
    z-index: 2;
  }
  .table tbody tr .tdgu2{
    position: sticky;
    left: 300px;
    left: 100px;
    z-index: 2;
  }
  .table tbody tr .tdgu3{
    position: sticky;
    left: 450px;
    left: 150px;
    z-index: 2;
  }
  .table tbody tr .tdgu4{
    position: sticky;
    left: 550px;
    left: 250px;
    z-index: 2;
  }
  .table tbody tr .tdgu5{
    position: sticky;
    left: 700px;
    left: 400px;
    z-index: 2;
  }
  .table tbody tr .tdgu6{
    position: sticky;
    left: 800px;
    left: 500px;
    z-index: 2;
  }
@@ -524,27 +584,27 @@
  }
  .table2 thead .equipname .dong2{
    z-index: 5;
    left: 150px;
    left: 50px;
  }
  .table2 thead .equipname .dong3{
    z-index: 5;
    left: 300px;
    left: 100px;
  }
  .table2 thead .equipname .dong4{
    z-index: 5;
    left: 450px;
    left: 150px;
  }
  .table2 thead .equipname .dong5{
    z-index: 5;
    left: 550px;
    left: 250px;
  }
  .table2 thead .equipname .dong6{
    z-index: 5;
    left: 700px;
    left: 400px;
  }
  .table2 thead .equipname .dong7{
    z-index: 6;
    left: 800px;
    left: 500px;
  }
  @media screen and (min-width: 1920px){
@@ -587,7 +647,7 @@
  .dataContent {
    white-space: nowrap;
    /*margin: 0;*/
    border: none;
    /*border: none;*/
    border-collapse: separate;
    border-spacing: 0;
    /*table-layout: fixed;*/
@@ -615,9 +675,9 @@
    width: auto;
  }
  .dataContent tr td {
    height: 35px
  }
  /*.dataContent tr td {*/
    /*height: 35px*/
  /*}*/
  .dataContent .mathData td {
    padding: 10px;
@@ -633,9 +693,9 @@
  .dataContent .mathData .tdd {
    /*display: none;*/
  }
  .seach-content{
    display: flex;
    justify-content: space-between;
  }
  /*.seach-content{*/
    /*display: flex;*/
    /*justify-content: space-between;*/
  /*}*/
</style>