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: [],
@@ -115,7 +113,10 @@
        },
        tableHeads: [],
        XData: [0],
        YData: [0]
        YData: [0],
        isLazyRequest: '',// 是否开启懒加载
        requestAlldataSize: 8,// 总共请求的列表项数目
        everyRequestDataSize: 15// 每次请求的列表项数目
      }
    },
    props: { nodeTree: '', Type: '', nodePeople: '' },
@@ -131,6 +132,14 @@
      this.queryParam.typeTree = '1'
      this.loadData1()

    },
    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) {
@@ -213,9 +222,12 @@
      dateParamChange(v1, v2) {
        this.queryParam.startDate = v2[0]
        this.queryParam.endDate = v2[1]
        this.dates = [v1[0], v1[1]]
      },
      searchQuery() {
        if (this.queryParam.startTime && this.queryParam.endTime && this.dates && this.dates.length > 0) {
        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
@@ -223,6 +235,7 @@
            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({
@@ -303,9 +316,16 @@
      //     }
      //   }
      loadData1() {
        this.loading=true
        this.loading = true
        this.tableHeads = []
        this.dataList = []
        // 若日期选择器设置的查询请求数量超过15条则开启懒加载
        if (this.requestAlldataSize > 15) {
          // 开启懒加载后将结束日期设置为开始日期之后的14天，即先查询15天内的数据
          this.queryParam.endDate = moment(this.queryParam.startDate).add(this.everyRequestDataSize - 1, 'days').format('YYYYMMDD')
          this.isLazyRequest = true
          this.tableScroll.removeEventListener('scroll', this.tableScrollX) // 为避免滚动条有滚动距离后后点击查询按钮触发滚动事件，因此在触发事件前移除事件
        }
        getAction(this.url.efficiencyList, this.queryParam).then(res => {
          if (res.success) {
            this.tableHeads = res.result.dates
@@ -316,17 +336,17 @@
            // this.checkSameData2(this.dataList)
            // this.combineCell();
            // this.initDeviceType(this.dataList)

            this.tableScroll.addEventListener('scroll', this.tableScrollX)
          }
        }).finally(()=>{
          this.loading=false
        }).finally(() => {
          this.loading = false
        })
      },
      draw() {
        let openRateTrendAnalysisChart = this.$echarts.init(document.getElementById('openRateTrendChart'), 'macarons')
        this.openRateTrendAnalysisChart = this.$echarts.init(document.getElementById('openRateTrendChart'), 'macarons')
        let openRateTrendChartOptions = {
          title: {
            text: '利用率走势分析',
            text: '利用率分段分析',
            x: 'center',
            textStyle: {
              fontSize: 18,
@@ -378,7 +398,49 @@
            }
          ]
        }
        openRateTrendAnalysisChart.setOption(openRateTrendChartOptions, true)
        this.openRateTrendAnalysisChart.setOption(openRateTrendChartOptions, true)
      },

      /**
       * 滚动条触底刷新表格数据
       */
      tableScrollX() {
        // 当滚动条触底且懒加载开启时触发滚动条触底刷新
        if (Math.ceil(this.tableScroll.scrollLeft + this.tableScroll.clientWidth) + 1 >= this.tableScroll.scrollWidth && this.isLazyRequest) {
          this.loading = true
          this.queryParam.startDate = moment(this.queryParam.endDate).add(1, 'days').format('YYYYMMDD')
          // 判断设置懒加载后的结束时间是否超过时间选择器中设置的结束时间
          if (moment(this.queryParam.endDate).add(this.everyRequestDataSize - 1, 'days').format('YYYYMMDD') - moment(this.dates[1]).format('YYYYMMDD') < 0) {
            //再次查询后15天内的数据
            this.queryParam.endDate = moment(this.queryParam.endDate).add(this.everyRequestDataSize, 'days').format('YYYYMMDD')
          } else {
            // 如果不小于时间选择器中设置的时间则设置请求结束日期为时间选择器中设置的结束时间并且关闭懒加载（意味着最后一次触底刷新）
            this.queryParam.endDate = moment(this.dates[1]).format('YYYYMMDD')
            this.isLazyRequest = false
          }
          getAction(this.url.efficiencyList, this.queryParam).then(res => {
            if (res.success) {
              this.tableHeads = [...this.tableHeads, ...res.result.dates]
              this.dataList.forEach(item1 => {
                res.result.mdcEfficiencyList.forEach(item2 => {
                  if (item1.equipmentId === item2.equipmentId) {
                    item1.dataList = [...item1.dataList, ...item2.dataList]
                  }
                })
              })
              this.draw()
            }
          }).finally(() => {
            this.loading = false
          })
        }
      },

      /**
       * 当浏览器可视窗口尺寸发生改变时触发
       */
      handleWindowResize(){
        if(this.openRateTrendAnalysisChart) this.openRateTrendAnalysisChart.resize()
      }
    }
  }
@@ -400,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 {
@@ -421,21 +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 {
@@ -444,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;
@@ -470,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;
  }

@@ -512,7 +532,6 @@
  .table2 thead .equipname .dong1 {
    z-index: 4;
    left: 0;
    /*border: 1px solid #000;*/
  }

  .table2 thead .equipname .dong2 {
@@ -522,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>