NEZ-871 feat: asset支持talon配置，列表增加talon列

2021-07-28 14:12:58 +08:00
parent 60ce814186
commit 79b1b94171
5 changed files with 126 additions and 42 deletions
--- a/nezha-fronted/src/components/common/language/cn.js
+++ b/nezha-fronted/src/components/common/language/cn.js
@@ -582,7 +582,10 @@ const cn = {
  },
  asset: {
    asset: '资产',
+    talon: '爪子',
    alertNum: '告警',
+    userName: '用户名',
+    address: '地址',
    assetType: '资产类型', // '资产类型'
    batchEditAsset: '批量修改资产',
    selectAsset: '已选择的资产',
@@ -609,7 +612,6 @@ const cn = {
    reloginpinTip: 'RELOGIN提示',
    userPinIntroduce: '请指定用户名和密码提示以便TELNET登录过程可自动运行',
    reLoginPinIntroduce: '请指定密码提示以便RELOGIN登录过程可自动运行',
-    username: '用户名',
    port: '端口',
    upload: '上传',
    clickToUpload: '上传',
--- a/nezha-fronted/src/components/common/language/en.js
+++ b/nezha-fronted/src/components/common/language/en.js
@@ -589,6 +589,9 @@ const en = {
  },
  asset: {
    asset: 'Asset ',
+    talon: 'Talon',
+    userName: 'User name',
+    address: 'Address',
    assets: 'Asset', // '资产'
    editAsset: 'Edit asset', // '编辑资产'
    createAsset: 'New asset', // '编辑资产'
@@ -613,7 +616,6 @@ const en = {
    reloginPinTip: 'Relogin tip', // 密码提示
    userPinIntroduce: 'Please specify a user name and password so that the telenet login process can automatically log in',
    reLoginPinIntroduce: 'Please specify the password prompt so that the login process can run automatically',
-    username: 'Username', // '用户名'
    port: 'Port', // '端口'
    upload: 'Upload', // '上传'
    clickToUpload: 'Upload', // '上传'
--- a/nezha-fronted/src/components/common/rightBox/asset/assetBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/asset/assetBox.vue
@@ -178,7 +178,7 @@
                <el-option v-for="type in assetConstants.authTypeOptions" :key="type.value" :label="type.label" :value="type.value"/>
              </el-select>
            </el-form-item>
-            <el-form-item :label="$t('asset.username')" prop="authUsername">
+            <el-form-item :label="$t('asset.userName')" prop="authUsername">
              <el-input maxlength="64" show-word-limit v-model="editAsset.authUsername" size="small"/>
            </el-form-item>
            <!-- Key支持私钥 -->
@@ -197,7 +197,7 @@
          <!-- TELNET -->
          <template v-if="editAsset.type && editAsset.type.authProtocol === assetConstants.authProtocolData.telnet">
            <div class="form__sub-title">TELNET</div>
-            <el-form-item :label="$t('asset.username')" prop="authUsername">
+            <el-form-item :label="$t('asset.userName')" prop="authUsername">
              <el-input maxlength="64" show-word-limit v-model="editAsset.authUsername" size="small"/>
            </el-form-item>
            <el-form-item :label="$t('asset.pin')" prop="authPin">
@@ -222,6 +222,40 @@
              </el-select>
            </el-form-item>
          </template>
+          <!-- TALON -->
+          <template v-if="editAsset.type && editAsset.type.clientEnable === 1">
+            <div class="el-form__sub-title">TALON
+              <el-popover
+                placement="right"
+                trigger="hover"
+                content="This is a prompt text">
+                <i slot="reference" class="nz-icon nz-icon-about"></i>
+              </el-popover>
+            </div>
+            <el-form-item :label="$t('asset.userName')" prop="clientUser">
+              <el-input maxlength="64" show-word-limit v-model="editAsset.clientUser" size="small"/>
+            </el-form-item>
+            <el-form-item :label="$t('asset.pin')" prop="clientPin">
+              <el-input type="password" show-word-limit v-model="editAsset.clientPin" size="small"/>
+            </el-form-item>
+            <el-form-item :label="$t('asset.port')" prop="clientPort">
+              <el-input v-model="editAsset.clientPort" size="small"/>
+            </el-form-item>
+            <transition name="el-zoom-in-top">
+              <div v-show="showAllTalonOption">
+                <el-form-item :label="$t('asset.address')" prop="clientAddress">
+                  <el-input v-model="editAsset.clientAddress" size="small"/>
+                </el-form-item>
+              </div>
+            </transition>
+            <template v-if="showAddressOption">
+              <div style="text-align: center;margin-bottom: 40px">
+                <span class="nz-btn-size-normal-new nz-btn-style-light-new" style="border: none" @click="showAddress">
+                  {{$t('overall.moreOption')}}<i class="nz-icon nz-icon-arrow-down"></i>
+                </span>
+              </div>
+            </template>
+          </template>
        </el-form>
      </div>
    </div>
@@ -259,6 +293,8 @@ export default {
    const vm = this
    return {
      assetConstants,
+      showAllTalonOption: false,
+      showAddressOption: true,
      editAsset: {},
      url: 'asset/asset',
      rightBox: { model: { show: false } },
@@ -452,6 +488,10 @@ export default {
    clickOutside () {
      this.esc(false)
    },
+    showAddress () {
+      this.showAddressOption = false
+      this.showAllTalonOption = true
+    },
    setLocationData ({ cabinet, dc, u }) {
      if (cabinet) {
        this.editAsset.cabinetId = cabinet.id
@@ -678,4 +718,20 @@ export default {
  .placeholder-emphasize input::-webkit-input-placeholder {
    color: #606266 !important;
  }
+  .el-form__sub-title {
+    background-color: #F6F6F6;
+    font-size: 14px;
+    font-weight: bold;
+    padding: 0 10px;
+    line-height: 32px;
+    color: #555;
+    margin: 0 0 20px;
+  }
+  .nz-btn-size-normal-new.nz-btn-style-light-new {
+    font-size: 12px;
+    color: #3C92F1;
+    i {
+      font-size: 12px;
+    }
+  }
 </style>
--- a/nezha-fronted/src/components/common/table/asset/assetTable.vue
+++ b/nezha-fronted/src/components/common/table/asset/assetTable.vue
@@ -51,10 +51,12 @@
          <span v-if="scope.row.cabinet && scope.row.cabinet !== '--'">{{scope.row.cabinet.name}}&nbsp;{{returnCabinet( scope.row.cabinetStart, scope.row.cabinetEnd)}}</span>
          <span v-else >-</span>
        </template>
-        <template v-else-if="item.prop == 'pingInfo'">
-          <div @mouseenter="showTableTooltip( formatPingTime(scope.row.pingInfo.lastUpdate), true, $event)" @mouseleave="hideTableTooltip" v-if="scope.row.pingInfo">
-            <div :class="{'active-icon green-bg':scope.row.pingInfo.status == 1,'active-icon red-bg':scope.row.pingInfo.status == 0}"></div><span>{{scope.row.pingInfo.rtt?scope.row.pingInfo.rtt+'ms':''}}</span>
+        <template v-else-if="item.prop === 'pingInfo'">
+          <el-popover :content="$t('asset.assetStatPre')+(scope.row.pingInfo.lastUpdate?utcTimeToTimezoneStr(scope.row.pingInfo.lastUpdate):$t('asset.assetStatDown'))" v-if="scope.row.pingInfo" placement="right" trigger="hover">
+            <div slot="reference">
+              <div :class="{'active-icon green-bg':scope.row.pingInfo.status == 1,'active-icon red-bg':scope.row.pingInfo.status == 0}"></div>{{scope.row.pingInfo.rtt?scope.row.pingInfo.rtt+'ms':''}}
            </div>
+          </el-popover>
        </template>
        <template v-else-if="item.prop === 'model'">{{scope.row.model ? scope.row.model.name : '-'}}</template>
        <template v-else-if="item.prop === 'parent'">
@@ -80,6 +82,18 @@
 <!--          <span v-else-if="scope.row.pid == -1">  <i class="nz-icon nz-icon-overview-project monitorColor color23BF9A"></i> 0 </span>-->
          <span v-else> - </span>
        </template>
+        <template v-else-if="item.prop === 'clientState'">
+          <div v-if="scope.row[item.prop]===1">
+            <div class="active-icon green-bg inline-block"></div> 正常
+          </div>
+          <div v-else-if="scope.row[item.prop]===0">
+            <div class="active-icon red-bg inline-block"></div> 不正常
+          </div>
+          <div v-else-if="scope.row[item.prop]===-1">
+            <div class="active-icon red-bg inline-block"></div> 认证失败
+          </div>
+          <template v-else>-</template>
+        </template>
        <template v-else-if="item.prop === 'brand'">{{scope.row.brand ? scope.row.brand.name : '-'}}</template>
        <template v-else-if="item.prop === 'purchaseDate'">{{scope.row.purchaseDate ? scope.row.purchaseDate : '--'}}</template>
        <template v-else>
@@ -121,7 +135,7 @@
 <script>
 import table from '@/components/common/mixin/table'
 import { showTableTooltip, hideTableTooltip } from '@/components/common/js/tools'
-import bus from '@/libs/bus'
+// import bus from '@/libs/bus'
 import alertLabel from '@/components/common/alert/alertLabel'
 export default {
  name: 'assetTable',
@@ -155,81 +169,87 @@ export default {
          label: this.$t('asset.manageIp'),
          prop: 'manageIp',
          show: true,
-          width: 140,
+          minWidth: 140,
          sortable: 'custom'
        }, {
          label: this.$t('overall.parent'),
          prop: 'parent',
          show: false,
-          width: 110
+          minWidth: 110
        }, {
          label: this.$t('overall.children'),
          prop: 'children',
          show: false,
-          width: 120
+          minWidth: 120
        }, {
          label: this.$t('overall.type'),
          prop: 'type',
          show: true,
-          width: 140,
+          minWidth: 140,
          sortable: 'custom'
        }, {
          label: this.$t('asset.state'),
          prop: 'state',
          show: true,
-          width: 100,
+          minWidth: 110,
          sortable: 'custom'
        }, {
          label: this.$t('asset.pingInfo'),
          prop: 'pingInfo',
          show: true,
-          width: 110
+          minWidth: 110
        }, {
          label: this.$t('overall.dc'),
          prop: 'dc',
          show: true,
-          width: 140,
+          minWidth: 140,
          sortable: 'custom'
        }, {
          label: this.$t('asset.cabinet'),
          prop: 'cabinet',
          show: true,
-          width: 110,
+          minWidth: 110,
          sortable: 'custom'
        }, {
          label: this.$t('asset.alertNum'),
          prop: 'alertNum',
          show: true,
-          width: 140,
+          minWidth: 140,
          sortable: 'custom'
        }, {
          label: this.$t('asset.endpointNum2'),
          prop: 'endpointNum',
          show: true,
-          width: 160,
+          minWidth: 160,
          sortable: 'custom'
        }, {
          label: this.$t('asset.brand'),
          prop: 'brand',
          show: true,
-          width: 120,
+          minWidth: 120,
          sortable: 'custom'
        }, {
          label: this.$t('asset.model'),
          prop: 'model',
          show: true,
-          width: 110,
+          minWidth: 110,
          sortable: 'custom'
        }, {
          label: 'SN',
          prop: 'sn',
          show: true,
-          width: 110
+          minWidth: 110
+        }, {
+          label: this.$t('asset.talon'),
+          prop: 'clientState',
+          show: true,
+          sortable: 'custom',
+          minWidth: 150
        }, {
          label: this.$t('asset.purchaseDate'),
          prop: 'purchaseDate',
          show: false,
-          width: 110
+          minWidth: 120
        }
      ]
    }
@@ -239,10 +259,14 @@ export default {
    hideTableTooltip,
    tableDataSort (item) {
      let orderBy = ''
-      const str = item.prop
+      let str = item.prop
      if (str === 'dc') {
        orderBy = str
      }
+      if (str === 'clientState') {
+        str = 'talon_status'
+        orderBy = str
+      }
      if (item.order === 'ascending') {
        orderBy = str
      }
@@ -292,22 +316,22 @@ export default {
        return ''
      }
      return `[${start}-${end}]`
-    },
-    formatPingTime (str) {
-      if (!str || str == '') {
-        return this.$t('asset.assetStatPre') + this.$t('asset.assetStatDown')
-      }
-      const ds = '-'
-      const ts = ':'
-      const time = new Date(bus.UTCTimeToConfigTimezone(str))
-      const year = time.getFullYear()
-      const month = time.getMonth() + 1 > 9 ? time.getMonth() + 1 : ('0' + (time.getMonth() + 1))
-      const day = time.getDate() > 9 ? time.getDate() : ('0' + time.getDate())
-      const hours = time.getHours() > 9 ? time.getHours() : ('0' + time.getHours())
-      const minutes = time.getMinutes() > 9 ? time.getMinutes() : ('0' + time.getMinutes())
-      const seconds = time.getSeconds() > 9 ? time.getSeconds() : ('0' + time.getSeconds())
-      return this.$t('asset.assetStatPre') + year + ds + month + ds + day + ' ' + hours + ts + minutes + ts + seconds
    }
+    // formatPingTime (str) {
+    //   if (!str || str == '') {
+    //     return this.$t('asset.assetStatPre') + this.$t('asset.assetStatDown')
+    //   }
+    //   const ds = '-'
+    //   const ts = ':'
+    //   const time = new Date(bus.UTCTimeToConfigTimezone(str))
+    //   const year = time.getFullYear()
+    //   const month = time.getMonth() + 1 > 9 ? time.getMonth() + 1 : ('0' + (time.getMonth() + 1))
+    //   const day = time.getDate() > 9 ? time.getDate() : ('0' + time.getDate())
+    //   const hours = time.getHours() > 9 ? time.getHours() : ('0' + time.getHours())
+    //   const minutes = time.getMinutes() > 9 ? time.getMinutes() : ('0' + time.getMinutes())
+    //   const seconds = time.getSeconds() > 9 ? time.getSeconds() : ('0' + time.getSeconds())
+    //   return this.$t('asset.assetStatPre') + year + ds + month + ds + day + ' ' + hours + ts + minutes + ts + seconds
+    // }
  }
 }
 </script>
--- a/nezha-fronted/src/components/common/table/settings/terminalLogTable.vue
+++ b/nezha-fronted/src/components/common/table/settings/terminalLogTable.vue
@@ -138,7 +138,7 @@ export default {
        {
          label: this.$t('config.terminallog.source'),
          prop: 'remoteAddr',
-          minWidth: 200,
+          minWidth: 100,
          show: true
        },
        {
@@ -154,7 +154,7 @@ export default {
        {
          label: this.$t('config.terminallog.startTime'),
          prop: 'startTime',
-          minWidth: 200,
+          minWidth: 100,
          show: true
        },
        {
@@ -171,7 +171,7 @@ export default {
          label: this.$t('config.terminallog.status'), // killusername鼠标悬停形式
          prop: 'status',
          show: true,
-          width: 100
+          width: 150
        }
      ]
    }