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

<template>
<div class="main-container">
  <div class="right_side">
    <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>
</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
  background #fff
  border 1px solid #dcdfe6
  box-shadow 0 2px 4px 0 rgba(0,0,0,.12), 0 0 6px 0 rgba(0,0,0,.04)
.tabs_header
  position relative
  background-color #f5f7fa
  border-bottom 1px solid #e4e7ed
.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 20px
  height 40px
  box-sizing border-box
  line-height 40px
  display inline-block
  list-style none
  font-size 14px
  font-weight 500
  position relative
  transition all .3s cubic-bezier(.645,.045,.355,1)
  border 1px solid transparent
  margin-top -1px
  color #909399
  &:first-child
    margin-left -1px
.is_active
  color: #409eff;
  background-color: #fff;
  border-right-color: #dcdfe6;
  border-left-color: #dcdfe6;
.tabs_content
  overflow: hidden;
  position: relative;
  padding: 15px;
.tab_pane
  _font(16px, 28px, #323232,,)
</style>