qushaowei
2024-03-14 e055d2d93b516985fbc2df0f6f5a135f3230cccf
src/views/mdc/base/modules/openRateFractionAnalysis/openRateFractionAnalysisMain.vue
@@ -5,29 +5,28 @@
      <div class="table-page-search-wrapper">
        <a-form layout="inline" @keyup.enter.native="searchQuery">
          <a-row :gutter="24">
            <a-col :md="6" :sm="6">
            <a-col :md="7" :sm="7">
              <a-form-item label="时间">
                <a-range-picker @change="dateParamChange" :disabledDate="disabledDate" format="YYYYMMDD"
                                v-model="dates"/>
                                v-model="dates" :allowClear="false"/>
              </a-form-item>
            </a-col>
            <a-col :md="7" :sm="7" :xs="7">
            <a-col :md="17" :sm="17" :xs="17">
              <a-form-item label="时间段">
                <a-time-picker :default-value="moment('00:00', 'HH:mm')" format="HH:mm" @change="onChangeStart"/>
                至
                <a-time-picker :default-value="moment('08:00', 'HH:mm')" format="HH:mm" @change="onChangeEnd"/>
                <a-space>
                  <a-time-picker :default-value="moment('00:00', 'HH:mm')" format="HH:mm" @change="onChangeStart" :allowClear="false"/>
                  至
                  <a-time-picker :default-value="moment('08:00', 'HH:mm')" format="HH:mm" @change="onChangeEnd" :allowClear="false"/>
                  <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
                </a-space>
              </a-form-item>
            </a-col>
            <a-col :lg="2" :md="3" :sm="3" :xs="3">
              <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
            </a-col>
          </a-row>
        </a-form>
      </div>
      <div id="DeviceList">
        <div class="openRateTrendDg">
          <div id="Efficiency" class="container" style="margin-top: 20px;">
            <a-spin :spinning="loading">
        <a-spin :spinning="loading">
          <div id="Efficiency" class="container" style="margin-bottom: 15px;">
              <div class="table2">
                <table class="dataContent table" border="1" cellspacing="0" cellpadding="0"
                       style="white-space: nowrap;text-align: center;">
@@ -36,7 +35,7 @@
                    <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 class="thgu dong2 name" rowspan="2" style="min-width: 162px; max-width: 162px;width: 162px;">
                      设备名称
                    </th>
                    <th class="thgu dong3 name" rowspan="2" style="min-width: 100px; max-width: 100px;width: 100px;">
@@ -59,10 +58,10 @@
                  </tbody>
                </table>
              </div>
            </a-spin>
          </div>
        </div>
        <div id="openRateTrendChart" style="width: 100%;height: 60%"></div>
        </a-spin>
        <div id="openRateTrendChart"></div>
      </div>
    </div>
  </div>
@@ -81,7 +80,6 @@
  export default {
    // mixins: [JeecgListMixin],
    name: 'openRateFractionAnalysisMain',
    components: {},
    data() {
      return {
        dataSource: [],
@@ -137,9 +135,11 @@
    },
    mounted() {
      this.tableScroll = document.querySelector('.table2')
      window.addEventListener('resize',this.handleWindowResize)
    },
    beforeDestroy() {
      this.tableScroll.removeEventListener('scroll', this.tableScrollX)
      window.removeEventListener('resize',this.handleWindowResize)
    },
    watch: {
      Type(valmath) {
@@ -225,96 +225,20 @@
        this.dates = [v1[0], v1[1]]
      },
      searchQuery() {
        // 因触底刷新会修改参数时间值,故在此用时间选择器的时间值对参数时间值再次赋值,若不这样做则参数时间值则会与时间选择器上的时间值不一致
        this.queryParam.startDate = moment(this.dates[0]).format('YYYYMMDD')
        this.queryParam.endDate = moment(this.dates[1]).format('YYYYMMDD')
        if (this.queryParam.startTime && this.queryParam.endTime && this.dates[0] && this.dates[1]) {
          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.requestAlldataSize = moment.duration(moment(this.queryParam.endDate) - moment(this.queryParam.startDate), 'millisecond').asDays() + 1
          this.loadData1()
        } else {
          this.$notification.warning({
            message: '提示',
            description: '请选择时间或时间段'
          })
        }
        // this.onClearSelected()
        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.requestAlldataSize = moment.duration(moment(this.queryParam.endDate) - moment(this.queryParam.startDate), 'millisecond').asDays() + 1
        this.loadData1()
      },
      // searchReset() {
      //   this.typeTree = this.queryParam.typeTree
      //   this.typeParent =  this.queryParam.parentId
      //   this.typeEquipment = this.queryParam.equipmentId
      //   this.queryParam = {}
      //   this.dates = []
      //   this.queryParam.typeTree = this.typeTree
      //   this.queryParam.parentId = this.typeParent
      //   this.queryParam.equipmentId =  this.typeEquipment
      //   // this.ipagination.current = 1
      //   this.loadData1();
      //   // this.queryParam = {}
      //   // this.dates = []
      //   // this.loadData()
      //   // this.onClearSelected()
      // },
      // loadData1() {
      //   let that = this
      //   that.columns=[
      //     {
      //       title: '设备编号',
      //       align: 'center',
      //       dataIndex: 'equipmentId',
      //       width:'150px'
      //     },
      //     {
      //       title: '设备名称',
      //       align: 'center',
      //       dataIndex: 'equipmentName',
      //       width:'150px'
      //     },
      //   ]
      //   that.tableHeads = []
      //   that.dataList = []
      //   getAction(this.url.efficiencyList, that.queryParam).then(res => {
      //     var tmp = {}
      //     console.log(res)
      //     if (res.success)
      //
      //       that.dataSource = res.result.mdcEfficiencyList
      //       for(var k = 0;k<that.dataSource[0].dataList.length;k++){
      //         that.columns.push(
      //           {
      //             title:that.dataSource[0].dataList.theDate,
      //             align: 'center',
      //             width:'120px',
      //             // dataIndex:'utilizationRate',
      //           }
      //         )
      //       }
      //       for(var i = 0;i<that.dataSource.length;i++){
      //         for (var j = 0; j < that.dataSource[i].dataList.length;j++){
      //           // that.columns.push(
      //           //   {
      //           //     title:that.dataSource[0].dataList[j].theDate,
      //           //     align: 'center',
      //           //     width:'120px',
      //           //     dataIndex:'utilizationRate',
      //           //   }
      //           // )
      //         }
      //
      //       }
      //       console.log(that.columns)
      //       console.log(that.dataSource)
      //       // this.initDeviceType(this.dataList)
      //       this.draw()
      //     }
      //   }
      loadData1() {
        this.loading = true
        this.tableHeads = []
@@ -343,7 +267,7 @@
        })
      },
      draw() {
        let openRateTrendAnalysisChart = this.$echarts.init(document.getElementById('openRateTrendChart'), 'macarons')
        this.openRateTrendAnalysisChart = this.$echarts.init(document.getElementById('openRateTrendChart'), 'macarons')
        let openRateTrendChartOptions = {
          title: {
            text: '利用率分段分析',
@@ -398,7 +322,7 @@
            }
          ]
        }
        openRateTrendAnalysisChart.setOption(openRateTrendChartOptions, true)
        this.openRateTrendAnalysisChart.setOption(openRateTrendChartOptions, true)
      },
      /**
@@ -434,6 +358,13 @@
            this.loading = false
          })
        }
      },
      /**
       * 当浏览器可视窗口尺寸发生改变时触发
       */
      handleWindowResize(){
        if(this.openRateTrendAnalysisChart) this.openRateTrendAnalysisChart.resize()
      }
    }
  }
@@ -455,19 +386,11 @@
    text-align: center;
  }
  /*.dataContent .fixed th {*/
  /*width: 50px;*/
  /*}*/
  .dataContent .thead th {
    background-color: #fafafa;
    text-align: center;
    height: 30px;
    padding: 5px;
  }
  .dataContent .notfixed th {
    /*width: auto;*/
  }
  .dataContent tr td {
@@ -476,22 +399,11 @@
  .dataContent .mathData td {
    padding: 10px;
    /*display: none;*/
    cursor: pointer;
  }
  .dataContent .mathData:hover td {
    background-color: #e6f7ff;
  }
  .dataContent .mathData .td {
    /*background-color: #ff9bd2;*/
    display: inline-block;
    padding: 10px;
  }
  .dataContent .mathData .tdd {
    /*display: none;*/
  }
  .table2 {
@@ -500,12 +412,6 @@
    overflow: auto;
  }
  /*tr th {*/
  /*height: 50px!important;*/
  /*}*/
  /*tr td{*/
  /*height: 50px!important;*/
  /*}*/
  .table2 thead tr th:first-child,
  .table tbody tr .tdgu {
    position: sticky;
@@ -526,25 +432,7 @@
  .table tbody tr .tdgu2 {
    position: sticky;
    left: 300px;
    z-index: 2;
  }
  .table tbody tr .tdgu3 {
    position: sticky;
    left: 450px;
    z-index: 2;
  }
  .table tbody tr .tdgu4 {
    position: sticky;
    left: 550px;
    z-index: 2;
  }
  .table tbody tr .tdgu5 {
    position: sticky;
    left: 700px;
    left: 312px;
    z-index: 2;
  }
@@ -568,7 +456,6 @@
  .table2 thead .equipname .dong1 {
    z-index: 4;
    left: 0;
    /*border: 1px solid #000;*/
  }
  .table2 thead .equipname .dong2 {
@@ -578,79 +465,49 @@
  .table2 thead .equipname .dong3 {
    z-index: 5;
    left: 300px;
    left: 312px;
  }
  .table2 thead .equipname .dong4 {
    z-index: 5;
    left: 450px;
  .efficiency_list #DeviceList {
    height: 90% !important;
  }
  .table2 thead .equipname .dong5 {
    z-index: 5;
    left: 550px;
  #Efficiency{
    overflow: hidden;
  }
  .table2 thead .equipname .dong6 {
    z-index: 5;
    left: 700px;
  #openRateTrendChart{
    width: 100%;
    height: 60%
  }
  @media screen and (min-width: 1920px) {
    #Efficiency {
      height: 337px !important;
      overflow: scroll;
    }
  }
  @media screen and (min-width: 1680px) and (max-width: 1920px) {
    #Efficiency {
      height: 337px !important;
      overflow: scroll;
    }
  }
  @media screen and (min-width: 1400px) and (max-width: 1680px) {
    #Efficiency {
      height: 190px !important;
      overflow: scroll;
      height: 337px !important;
    }
  }
  @media screen and (min-width: 1280px) and (max-width: 1400px) {
    #Efficiency {
      height: 90px !important;
      overflow: scroll;
      height: 200px !important;
    }
  }
  @media screen and (max-width: 1280px) {
    #Efficiency {
      height: 90px !important;
      overflow: scroll;
      height: 200px !important;
    }
  }
  #Efficiency .table_guding1 {
    position: absolute;
    overflow: hidden;
    width: 500px;
  }
  #Efficiency .table_guding2 {
    overflow-x: scroll;
    width: 500px;
  }
  /deep/ .ant-card {
    height: 100% !important;
  }
  /deep/ .ant-card .ant-card-body {
    height: 100% !important;
  }
  .efficiency_list #DeviceList {
    height: 90% !important;
  }
</style>