nezha-nezha-fronted/nezha-fronted/src/components/common/bottomBox/tabs/endpointQuery.vue

<template>
  <div class="full-width-height endpoint-tab-new">
    <nz-bottom-data-list
      :showTitle='showTitle'
      :api="url"
      :layout="['searchInput', 'elementSet']"
      :search-msg="searchMsg"
      :tabs="tabs"
      :targetTab="targetTab"
      :showPagination="false"
      @changeTab="changeTab"
      :customTool="true"
      class="full-width-height"
    >
      <template v-slot:title><span :title="obj.name">{{obj.name}}</span></template>
      <template v-slot:top-tool-right>
        <div class="top-tool-right">
          <div class="top-tool-search margin-r-20">
            <el-input ref="elementQuery" @clear="clearInput" id="elementQuery" @focus="focusInput"  @blur="blurInput" v-model="queryExpression" class="query-input-inactive" size="mini" clearable  :placeholder="$t('project.endpoint.promExpr')" >
              <i slot="suffix" class="el-input__icon nz-icon nz-icon-search" style="float:right" @click="focusInput"></i>
            </el-input>
          </div>
          <div class="margin-r-20 nz-btn-group nz-btn-group-size-small nz-btn-group-light">
            <button @click="changeTime(-10)" class="nz-btn nz-btn-size-normal nz-btn-style-light change-time-height nz-input-group-prepend" id="endpoint-query-changetime"><i class="el-icon-d-arrow-left"></i></button><my-date-picker
            v-model="formatTime"
            type="datetime"
            size="mini"
            class="project-calendar nz-input-group-middle"
            clearable
            :time-arrow-control="true"
            placeholder="Moment"
            value-format="yyyy-MM-dd HH:mm:ss"
          >
          </my-date-picker><button @click="changeTime(10)" class="nz-btn nz-btn-size-normal nz-btn-style-light change-time-height nz-input-group-append"><i class="el-icon-d-arrow-right"></i></button>
          </div>
          <div class="nz-btn-group nz-btn-group-size-normal nz-btn-group-light" style="height: 24px;">
            <button class="nz-btn nz-btn-size-normal nz-btn-style-light" @click="viewGraph">
              <i class="nz-icon nz-icon-chart"  :class="{'control-icon-unchecked':selectedEndpoints.length<1,'control-icon-checked':selectedEndpoints.length>0}"></i>
            </button><button @mouseenter="dropdownHandler(true)" @mouseleave="dropdownHandler(false)" class="nz-btn nz-btn-size-normal nz-btn-style-light export-dropdown-btn" id="browser-go">
            <i class="nz-icon nz-icon-arrow-down"></i>
            <transition name="el-zoom-in-top">
              <div v-if="dropdownShow" class="endpoint-query-dropdown el-popover">
                <span style="padding-top: 2px">{{$t('project.endpoint.hideSameLabels')}}</span>
                <el-switch v-model="hideSameLabels" active-color="#ee9d3f" size="small"></el-switch>
              </div>
            </transition>
          </button>
          </div>
        </div>
      </template>
      <template v-slot>
        <endpointQueryTab
          ref="endpointQueryTab"
          :from="from"
          :obj="obj"
          :formatTime="formatTime"
          :hideSameLabels="hideSameLabels"
          :queryExpression="queryExpression"
          @changSelection="changSelectionF"
        />
      </template>
<!--      <template v-slot:pagination>-->
<!--        <Pagination ref="Pagination" :pageObj="pageObj" :tableId="tableId" @pageNo='pageNo' @pageSize='pageSize'></Pagination>-->
<!--      </template>-->
    </nz-bottom-data-list>
  </div>
</template>

<script>
import subDataListMixin from '@/components/common/mixin/subDataList'
import nzBottomDataList from '@/components/common/bottomBox/nzBottomDataList'
import endpointQueryTab from '@/components/common/table/special/endpointQueryTab'
import bus from '@/libs/bus'
import detailViewRightMixin from '@/components/common/mixin/detailViewRightMixin'
export default {
  name: 'endpointTab',
  mixins: [subDataListMixin, detailViewRightMixin],
  props: {
    from: {}
  },
  components: {
    nzBottomDataList,
    endpointQueryTab
  },
  watch: {
    obj: {
      immediate: true,
      handler (n) {
        this.formatTime = new Date(bus.computeTimezoneTime(new Date()))
      }
    }
  },
  data () {
    return {
      url: 'monitor/endpoint',
      tableId: 'endpointTab', // 需要分页的table的id，用于记录每页数量
      searchMsg: { // 给搜索框子组件传递的信息
        zheze_none: true,
        searchLabelList: [/* {
          id: 12,
          name: 'endpoint name',
          type: 'input',
          label: 'name',
          disabled: false
        },
        {
          id: 13,
          name: 'endpoint id',
          type: 'input',
          label: 'id',
          disabled: false
        } */]
      },
      nowTime: '',
      rightBox: {
        editShow: false,
        show: false
      },
      fromBottom: true,
      selectedEndpoints: [],
      queryExpression: '',
      dropdownShow: '',
      timeout: null,
      formatTime: '',
      hideSameLabels: true
    }
  },
  methods: {
    focusInput () {
      let classVal = document.getElementById('elementQuery').parentElement.getAttribute('class')
      classVal = classVal.replace('query-input-inactive', 'query-input-active')
      document.getElementById('elementQuery').parentElement.setAttribute('class', classVal)
      this.$refs.elementQuery.focus()
    },
    blurInput () {
      if (!this.queryExpression || this.queryExpression == '') {
        setTimeout(function () {
          let classVal = document.getElementById('elementQuery').parentElement.getAttribute('class')
          classVal = classVal.replace('query-input-active', 'query-input-inactive')
          document.getElementById('elementQuery').parentElement.setAttribute('class', classVal)
        }, 100)
      }
    },
    clearInput () {
      this.$refs.elementQuery.focus()
    },
    changeTime (size, unit) {
      this.formatTime = this.getTime(size, unit)
    },
    getTime (size, unit) { // 计算时间
      const now = !this.formatTime ? new Date(bus.computeTimezone(new Date().getTime())) : new Date(this.formatTime)
      if (unit) {
        switch (unit) {
          case 'y':
            now.setFullYear(now.getFullYear() + size)
            break
          case 'M':
            now.setMonth(now.getMonth() + size)
            break
          case 'd':
            now.setDate(now.getDate() + size)
            break
          case 'h':
            now.setHours(now.getHours() + size)
            break
          case 'm':
            now.setMinutes(now.getMinutes() + size)
            break
          case 's':
            now.setSeconds(now.getSeconds() + size)
            break
          default:
            console.error('unit error')
        }
      } else {
        now.setSeconds(now.getSeconds() + size)
      }
      const year = now.getFullYear()
      let month = now.getMonth() + 1
      month = month < 10 ? '0' + month : month
      let day = now.getDate()
      day = day < 10 ? '0' + day : day
      let hour = now.getHours()
      hour = hour < 10 ? '0' + hour : hour
      let minute = now.getMinutes()
      minute = minute < 10 ? '0' + minute : minute
      let second = now.getSeconds()
      second = second < 10 ? '0' + second : second
      return year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second
    },
    viewGraph () {
      this.$refs.endpointQueryTab.viewGraph()
    },
    dropdownHandler (show) {
      if (show) {
        clearTimeout(this.timeout)
        this.dropdownShow = true
      } else {
        this.timeout = setTimeout(() => {
          this.dropdownShow = false
        }, 700)
      }
    },
    changSelectionF (arr) {
      this.changSelection = arr
    },
    toTop (wrap) {
      let currentTop = wrap.scrollTop
      const interval = currentTop / 10
      const intervalFunc = setInterval(function () { // 花200ms分10次回到顶部，模拟动画效果
        if (currentTop === 0) {
          clearInterval(intervalFunc)
        } else {
          currentTop = (currentTop - interval) < interval * 0.5 ? 0 : currentTop - interval
          wrap.scrollTop = currentTop
        }
      }, 20)
    }
  }
}
</script>
<style scoped>
  .full-width-height{
    width: 100%;
    height: 100%;
  }
</style>