apt-nl-new/src/pages/modules/systemmanage/developer.vue

<template>
<div class="main-container">
  <div class="right_side">
    <div class="content_wrap">
      <div class="title_wrap">
        <h2>开发者选项</h2>
      </div>
      <div class="page_container">
        <div class="tabs_container">
          <div class="tabs_header">
            <div class="tabs_wrap">
              <div class="tabs_scroll">
                <div class="tabs_nav">
                  <div class="tabs_item" v-for="e in tabs" :key="e.id" :class="{'is_active': tab === e.id}" @click="changeTab(e.id)">{{ e.label }}</div>
                </div>
              </div>
            </div>
          </div>
          <div class="tabs_content">
            <div v-show="tab === '1'" class="tab_pane">{{ result1 }}</div>
            <div v-show="tab === '2'" class="tab_pane">{{ result2 }}</div>
            <div v-show="tab === '3'" class="tab_pane">{{ result3 }}</div>
            <div v-show="tab === '4'" class="tab_pane">{{ result4 }}</div>
            <div v-show="tab === '5'" class="tab_pane">{{ result5 }}</div>
            <div v-show="tab === '6'" class="tab_pane">{{ result6 }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
</template>

<script>
import { getIP, getLogList, getROSNodeList, temperature, debugInfo, softwareVersion } from '@/config/getData2.js'
export default {
  data () {
    return {
      tabs: [{id: '1', label: 'ifconfig'}, {id: '2', label: '日志列表'}, {id: '3', label: 'ROS运行列表'}, {id: '4', label: '芯片温度/主频'}, {id: '5', label: '调试信息'}, {id: '6', label: '软/硬件版本'}],
      tab: '1',
      interTime: this.$store.getters.setTime,
      timer: null,
      result1: '',
      result2: '',
      result3: '',
      result4: '',
      result5: '',
      result6: ''
    }
  },
  created () {
    this._getIP()
  },
  methods: {
    refresh () {
      this.timer = setInterval(() => {
        this._getIP()
      }, this.interTime)
    },
    async _getIP () {
      let res = await getIP()
      if (res.code === '1') {
        this.result1 = res.result.result_info
      } else {
        this.toast(res.desc)
      }
    },
    async _getLogList () {
      let res = await getLogList()
      if (res.code === '1') {
        this.result2 = res.result.result_info
      } else {
        this.toast(res.desc)
      }
    },
    async _getROSNodeList () {
      let res = await getROSNodeList()
      if (res.code === '1') {
        this.result3 = res.result.result_info
      } else {
        this.toast(res.desc)
      }
    },
    async _temperature () {
      let res = await temperature()
      if (res.code === '1') {
        this.result4 = res.result.result_info
      } else {
        this.toast(res.desc)
      }
    },
    async _debugInfo () {
      let res = await debugInfo()
      if (res.code === '1') {
        this.result5 = res.result.result_info
      } else {
        this.toast(res.desc)
      }
    },
    async _softwareVersion () {
      let res = await softwareVersion()
      if (res.code === '1') {
        this.result6 = res.result.result_info
      } else {
        this.toast(res.desc)
      }
    },
    changeTab (id) {
      this.tab = id
      switch (id) {
        case '1':
          this._getIP()
          break
        case '2':
          this._getLogList()
          break
        case '3':
          this._getROSNodeList()
          break
        case '4':
          this._temperature()
          break
        case '5':
          this._debugInfo()
          break
        case '6':
          this._softwareVersion()
          break
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '~@style/mixin'
.tabs_container
  position relative
  _wh(100%,100%)
.tabs_header
  position absolute
  top: -92px;
  right: -52px;
.tabs_wrap
  overflow hidden
  margin-bottom -1px
  position relative
.tabs_scroll
  overflow hidden
.tabs_nav
  white-space nowrap
  position relative
  transition transform .3s
  float left
  z-index 2
.tabs_item
  padding 0 10px
  width 200px
  height 46px
  box-sizing border-box
  line-height 46px
  display inline-block
  list-style none
  _font(24px, 46px, #ACBFE3, 500, center)
  font-family: SourceHanSansCN-Medium;
  position relative
  transition all .3s cubic-bezier(.645,.045,.355,1)
  margin-top -1px
  background center / 100% 100% url(../../../images/new/tab_bg.png) no-repeat
  &:first-child
    margin-left -1px
.is_active
  color: #3CC1FF;
  background center / 100% 100% url(../../../images/new/tab_bg_active.png) no-repeat
.tabs_content
  _wh(100%, 100%)
  overflow: hidden;
  position: relative;
  padding: 15px;
.tab_pane
  _wh(100%,100%)
  _font(24px, 36px, #fff,,)
  font-family SourceHanSansCN-Regular
  white-space pre-line
  word-break break-all
  overflow-y auto
</style>