VPNWeb/src/views/log.vue

<template>
  <el-container>
    <el-header class="header">
      <h3>{{ title }}</h3>
    </el-header>
    <el-main class="main">
      <div class="btnbox">
        <el-button type="primary" @click="logdw">下载日志</el-button>
        <el-button type="primary" @click="query">刷新日志</el-button>
      </div>
      <div class="per">{{ logdata }}</div>
    </el-main>
  </el-container>
</template>

<script>
import { mapActions, mapState } from 'vuex'
export default {
  name: 'log',
  components: {},
  data () {
    return {
      title: null,
      type: null
    }
  },
  computed: {
    ...mapState(['logdata'])
  },
  mounted () {
    const type = this.$route.params.type
    this.parms(type)
  },
  methods: {
    ...mapActions(['logquery']),
    logdw () {
      window.open(`/api/logdownload?type=${this.type}`)
    },
    async query () {
      await this.logquery({ type: this.type })
    },
    parms (type) {
      switch (type) {
        case 'system':
          this.title = '系统日志'
          this.type = 'systemct'
          break
        case 'sslvpn':
          this.title = 'SSLVPN日志'
          this.type = 'ssl'
          break
        case 'ipsecvpn':
          this.title = 'IPSecVPN日志'
          this.type = 'sec'
          break
      }
      this.query()
    }
  },
  watch: {
    $route: {
      handler () {
        const type = this.$route.params.type
        this.parms(type)
      },
      deep: true
    }
  }
}
</script>
<style lang="less" scoped>
h3 {
  width: 90%;
  text-align: left;
  text-indent: 1em;
  line-height: 3em;
  border-bottom: 2px solid #999;
}
.main {
  width: 70%;
  margin: 0 auto;
  .per {
    width: 100%;
    height: 85%;
    margin: 0 auto;
    border: 1px solid #999;
    overflow-y: auto;
  }
  .btnbox {
    margin: 2% 0;
    width: 100%;
    overflow: hidden;
    .el-button {
      float: right;
      margin-left: 2%;
    }
  }
}
</style>