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

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: '上传',

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', // '上传'

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>

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'">
+        <template v-else-if="item.prop === 'pingInfo'">
-          <div @mouseenter="showTableTooltip( formatPingTime(scope.row.pingInfo.lastUpdate), true, $event)" @mouseleave="hideTableTooltip" v-if="scope.row.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 :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>
+            <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>

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
         }
       ]
     }