src/views/mdc/base/modules/openRateTrendAnalysis/openRateTrendAnalysisMain.vue
@@ -5,7 +5,7 @@
      <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"/>
@@ -17,10 +17,12 @@
          </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;">
@@ -29,7 +31,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;">
@@ -52,10 +54,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>
@@ -127,9 +129,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) {
@@ -351,7 +355,7 @@
        })
      },
      draw() {
        let openRateTrendAnalysisChart = this.$echarts.init(document.getElementById('openRateTrendChart'), 'macarons')
        this.openRateTrendAnalysisChart = this.$echarts.init(document.getElementById('openRateTrendChart'), 'macarons')
        let openRateTrendChartOptions = {
          title: {
            text: '利用率走势分析',
@@ -406,7 +410,7 @@
            }
          ]
        }
        openRateTrendAnalysisChart.setOption(openRateTrendChartOptions, true)
        this.openRateTrendAnalysisChart.setOption(openRateTrendChartOptions, true)
      },
      /**
@@ -442,6 +446,13 @@
            this.loading = false
          })
        }
      },
      /**
       * 当浏览器可视窗口尺寸发生改变时触发
       */
      handleWindowResize(){
        if(this.openRateTrendAnalysisChart) this.openRateTrendAnalysisChart.resize()
      }
    }
  }
@@ -457,15 +468,8 @@
    border: 1px solid #ccc;
    /*border: 1px solid #ccc;*/
    width: 100%;
    /*height: 100%;*/
    /*overflow: hidden;*/
    /*overflow-y: auto;*/
    text-align: center;
  }
  /*.dataContent .fixed th {*/
  /*width: 50px;*/
  /*}*/
  .dataContent .thead th {
    background-color: #fafafa;
@@ -474,32 +478,17 @@
    padding: 5px;
  }
  .dataContent .notfixed th {
    /*width: auto;*/
  }
  .dataContent tr td {
    height: 35px;
  }
  .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 {
@@ -508,12 +497,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;
@@ -534,25 +517,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;
  }
@@ -576,7 +541,6 @@
  .table2 thead .equipname .dong1 {
    z-index: 4;
    left: 0;
    /*border: 1px solid #000;*/
  }
  .table2 thead .equipname .dong2 {
@@ -586,79 +550,51 @@
  .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>