feat:新增snmp tab 面包屑 & menu新增tab类型和icon

2021-04-15 12:55:11 +08:00
parent 783f22b880
commit 1cbf048150
8 changed files with 94 additions and 13 deletions
--- a/nezha-fronted/src/components/charts/chart-table.vue
+++ b/nezha-fronted/src/components/charts/chart-table.vue
@@ -434,7 +434,6 @@ export default {
      if (!seriesItem || !seriesItem.length > 0) return []
      if (!statistics) return seriesItem
      const copy = JSON.parse(JSON.stringify(seriesItem))
-      copy.sort((x, y) => { return parseFloat(y.data[0]) - parseFloat(x.data[0]) })[0]
      const classifies = []
      let maxGroup = 0
      const map = new Map()// 用于记录在第几组
@@ -452,6 +451,7 @@ export default {
      let result
      switch (statistics) {
        case 'null': {
+          copy.sort((x, y) => { return parseFloat(y.data[0]) - parseFloat(x.data[0]) })
          result = copy.map(item => {
            return {
              element: item.element,
--- a/nezha-fronted/src/components/charts/chartPreview.vue
+++ b/nezha-fronted/src/components/charts/chartPreview.vue
@@ -1392,7 +1392,7 @@ export default {
      if (!seriesItem || !seriesItem.length > 0) return []
      if (!statistics) return seriesItem
      const copy = JSON.parse(JSON.stringify(seriesItem))
-      copy.sort((x, y) => { return parseFloat(y.data[0]) - parseFloat(x.data[0]) })[0]
+      copy.sort((x, y) => { return parseFloat(y.data[0]) - parseFloat(x.data[0]) })
      const classifies = []
      let maxGroup = 0
      const map = new Map()// 用于记录在第几组
--- a/nezha-fronted/src/components/common/rightBox/menuBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/menuBox.vue
@@ -25,6 +25,7 @@
          <el-radio-group v-model="editMenu.type" id="menu-box-input-type">
            <el-radio :label="1">{{$t('config.menus.menu')}}</el-radio>
            <el-radio :label="2">{{$t('config.menus.button')}}</el-radio>
+            <el-radio :label="3">{{$t('config.menus.tab')}}</el-radio>
          </el-radio-group>
        </el-form-item>
        <!--name-->
@@ -40,6 +41,9 @@
        <el-form-item :label="$t('config.menus.route')" prop="route">
          <el-input  placeholder="" type="text" v-model="editMenu.route" id="menu-box-input-route"></el-input>
        </el-form-item>
+        <el-form-item :label="$t('config.menus.icon')" prop="icon">
+          <el-input  placeholder="" type="text" v-model="editMenu.icon" id="menu-box-input-icon"></el-input>
+        </el-form-item>
        <!--<el-form-item :label="$t('config.menus.perms')" prop="perms">
          <el-input  type="text" placeholder="" v-model="editMenu.perms" ></el-input>
        </el-form-item>-->
--- a/nezha-fronted/src/components/common/table/settings/menuTable.vue
+++ b/nezha-fronted/src/components/common/table/settings/menuTable.vue
@@ -49,6 +49,9 @@
        <template v-else-if="item.prop === 'type'">
          <span>{{scope.row[item.prop] === 2?$t('config.menus.button'):$t('config.menus.menu')}}</span>
        </template>
+        <template v-else-if="item.prop === 'icon'">
+          <span><i :class="scope.row[item.prop]"></i>{{scope.row[item.prop]}}</span>
+        </template>
        <span v-else>{{scope.row[item.prop]}}</span>
      </template>
    </el-table-column>
@@ -101,6 +104,10 @@ export default {
          label: this.$t('config.menus.type'),
          prop: 'type',
          show: true
+        }, {
+          label: this.$t('config.menus.icon'),
+          prop: 'icon',
+          show: true
        }, {
          label: this.$t('config.menus.route'),
          prop: 'route',
--- a/nezha-fronted/src/components/page/config/mib.vue
+++ b/nezha-fronted/src/components/page/config/mib.vue
@@ -12,10 +12,10 @@
        <div id="module-type-1" class="nz-tab-item-box">
          <div class="nz-tab-item nz-tab-item-active">{{$t("config.mib.mibFiles")}}</div>
        </div>
-        <div id="module-type-2"  class="nz-tab-item-box" @click="showTab = 'browser'"><!--v-has="'snmp_browser_view'"-->
+        <div id="module-type-2"  class="nz-tab-item-box" @click="clickTab(['mib','browser'],'browser')"><!--v-has="'snmp_browser_view'"-->
          <div class="nz-tab-item">{{$t("config.mib.mibBrowser")}}</div>
        </div>
-        <div id="module-type-3"  class="nz-tab-item-box" @click="showTab = 'credentials'">
+        <div id="module-type-3"  class="nz-tab-item-box" @click="clickTab(['mib','credentials'],'credentials')">
          <div class="nz-tab-item">{{$t("config.mib.credentials")}}</div>
        </div>
      </template>
@@ -46,36 +46,32 @@
        <Pagination ref="Pagination" :pageObj="pageObj" :tableId="tableId" @pageNo='pageNo' @pageSize='pageSize'></Pagination>
      </template>
    </nz-data-list>
-    <mib-browser :show-tab="showTab" v-if="showTab == 'browser'" @toFileTab="showTab = 'file'" @toCredentialTab="showTab = 'credentials'"></mib-browser>
-    <credentials :show-tab="showTab" v-if="showTab == 'credentials'" @toFileTab="showTab = 'file'" @toBrowserTab="showTab = 'browser'"></credentials>
    <transition name="right-box">
      <mib-box v-if="rightBox.show" ref="mibBox" :mib="object" @close="closeRightBox" @reload="getTableData"></mib-box>
    </transition>
  </div>
 </template>
 <script>
-import mibBrowser from './mibBrowser'
 import mibBox from '@/components/common/rightBox/mibBox'
 import deleteButton from '@/components/common/deleteButton'
 import nzDataList from '@/components/common/table/nzDataList'
 import dataListMixin from '@/components/common/mixin/dataList'
 import mibTable from '@/components/common/table/settings/mibTable'
-import credentials from './credentials'
 export default {
  name: 'mib',
  components: {
-    credentials,
    mibBox,
-    mibBrowser,
    deleteButton,
    nzDataList,
    mibTable
  },
  mixins: [dataListMixin],
+  props: {
+    showTab: String
+  },
  data () {
    return {
      url: 'mib',
-      showTab: 'file', // file/browser
      tableId: 'mibTable', // 需要分页的table的id，用于记录每页数量
      blankObject: {
        id: null,
@@ -101,6 +97,14 @@ export default {
        }]
      }
    }
+  },
+  methods: {
+    toCredentialTab () {
+      this.$emit('toCredentialTab')
+    },
+    toBrowserTab () {
+      this.$emit('toBrowserTab')
+    }
  }
 }
 </script>
--- a/nezha-fronted/src/components/page/config/snmp.vue
+++ b/nezha-fronted/src/components/page/config/snmp.vue
@@ -0,0 +1,63 @@
+<template>
+    <div>
+      <mib-file :show-tab="showTab" v-if="showTab == 'file'" @toCredentialTab="changeTab(['mib','credentials'],'credentials')" @toBrowserTab="changeTab(['mib','browser'],'browser')"></mib-file>
+      <mib-browser :show-tab="showTab" v-if="showTab == 'browser'" @toFileTab="changeTab(['mib','file'],'file')" @toCredentialTab="changeTab(['mib','credentials'],'credentials')"></mib-browser>
+      <credentials :show-tab="showTab" v-if="showTab == 'credentials'" @toFileTab="changeTab(['mib','file'],'file')" @toBrowserTab="changeTab(['mib','browser'],'browser')"></credentials>
+    </div>
+</template>
+
+<script>
+import mibBrowser from './mibBrowser'
+import credentials from './credentials'
+import mibFile from './mib'
+export default {
+  name: 'snmp',
+  components: {
+    credentials,
+    mibBrowser,
+    mibFile
+  },
+  data () {
+    return {
+      showTab: 'file'
+    }
+  },
+  methods: {
+    changeTab: function (paths, tab) {
+      let path = '/'
+      if (paths && paths instanceof Array) {
+        paths.forEach(p => {
+          path += p + '/'
+        })
+        path = path.substring(0, path.length - 1)
+      } else {
+        path = paths
+      }
+      this.showTab = tab // 此处需要组建中有showTab 属性
+      this.toPath(path)
+    },
+    toPath: function (path) {
+      this.$router.push({
+        path: path,
+        query: {
+          t: +new Date()
+        }
+      })
+    }
+  },
+  watch: {
+    route: {
+      immediate: true,
+      handler (n, o) {
+        if (n.indexOf('mib') != -1 && this.$route.params.tab) {
+          this.$set(this, 'showTab', this.$route.params.tab)
+        }
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
--- a/nezha-fronted/src/main.js
+++ b/nezha-fronted/src/main.js
@@ -166,6 +166,9 @@ Vue.mixin({
    },
    getButtonList () {
      return this.$store.state.buttonList
+    },
+    route: function () {
+      return this.$route.path
    }
  }
 })
--- a/nezha-fronted/src/router/index.js
+++ b/nezha-fronted/src/router/index.js
@@ -98,8 +98,8 @@ export default new Router({
          component: resolve => require(['../components/page/config/about.vue'], resolve)
        },
        {
-          path: '/mib',
-          component: resolve => require(['../components/page/config/mib.vue'], resolve)
+          path: '/mib/:tab',
+          component: resolve => require(['../components/page/config/snmp.vue'], resolve)
        },
        {
          path: '/system',