Merge branch 'master' of http://117.34.109.166:18448/r/vue_mdc_430 into dev...

qushaowei

2024-01-15 017886be8a6c07ccaaf6300b8c7652ddbd41d734

 src/views/mdc/base/modules/openRateFractionAnalysis/openRateFractionAnalysisMain.vue

@@ -11,23 +11,22 @@
                                v-model="dates"/>
              </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"/>
                  至
                  <a-time-picker :default-value="moment('08:00', 'HH:mm')" format="HH:mm" @change="onChangeEnd"/>
                  <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) {
@@ -343,7 +343,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 +398,7 @@
            }
          ]
        }
        openRateTrendAnalysisChart.setOption(openRateTrendChartOptions, true)
        this.openRateTrendAnalysisChart.setOption(openRateTrendChartOptions, true)
      },

      /**
@@ -434,6 +434,13 @@
            this.loading = false
          })
        }
      },

      /**
       * 当浏览器可视窗口尺寸发生改变时触发
       */
      handleWindowResize(){
        if(this.openRateTrendAnalysisChart) this.openRateTrendAnalysisChart.resize()
      }
    }
  }
@@ -455,19 +462,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 +475,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 +488,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 +508,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 +532,6 @@
  .table2 thead .equipname .dong1 {
    z-index: 4;
    left: 0;
    /*border: 1px solid #000;*/
  }

  .table2 thead .equipname .dong2 {
@@ -578,79 +541,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>