refactor(remote-log): heartbeat and logs

src/views/platform/remote-log/api.js

@@ -46,17 +46,22 @@ export function getRemoteLogs (query) {
 }
 
 // 获取心跳
-export function getHeartbeats (mac) {
-  if (mac) {
+export function getHeartbeats (params, single) {
+  if (single) {
     return request({
       url: '/device/remoteLog/singleHeartbeat',
       method: 'GET',
-      params: { mac }
+      params
+    }).then(({ data }) => {
+      return { data: data ? [JSON.parse(data)] : [] }
     })
   }
   return request({
     url: '/device/remoteLog/heartbeat',
-    method: 'GET'
+    method: 'GET',
+    params
+  }).then(({ data }) => {
+    return { data: data.map(JSON.parse).sort((a, b) => b.timestamp - a.timestamp) }
   })
 }
 

src/views/platform/remote-log/index.vue

@@ -82,7 +82,7 @@
     <table-dialog
       ref="heartbeatDialog"
       size="lg fixed"
-      title="心跳记录"
+      :title="title"
       :schema="heartbeatSchema"
     />
   </wrapper>
@@ -97,8 +97,7 @@ import {
   startRemoteLog,
   stopRemoteLog,
   getRemoteLogs,
-  getHeartbeats,
-  getDownloadUrl
+  getHeartbeats
 } from './api'
 
 const defaultLogSettingForm = {
@@ -115,24 +114,31 @@ export default {
       logSetting: {},
       schema: {
         autoRefreshEachPage: true,
+        props: {
+          size: 'small'
+        },
         list: this.getDevicesByTenant,
         buttons: [
-          { label: '心跳记录', on: this.onHeartbeats }
+          { label: '未入库设备心跳记录', on: this.onHeartbeats }
         ],
         filters: [
-          { key: 'name', type: 'search', placeholder: '名称' }
+          { key: 'serialNumber', type: 'search', placeholder: '序列号' },
+          { key: 'mac', type: 'search', placeholder: 'MAC' },
+          { key: 'name', type: 'search', placeholder: '名称' },
+          { type: 'refresh' }
         ],
         cols: [
-          { prop: 'remark', label: '型号', width: 100 },
           { prop: 'name', label: '名称', 'min-width': 120 },
-          { prop: 'address', label: '地址', 'min-width': 120 },
+          { prop: 'serialNumber', label: '序列号', 'min-width': 80 },
+          { prop: 'mac', label: 'MAC', 'min-width': 80 },
+          { prop: 'remark', label: '型号', width: 100 },
           { type: 'tag', render: ({ activate, onlineStatus }) => activate
             ? onlineStatus === 0
               ? { type: 'primary', label: '待接入' }
               : onlineStatus === 1
                 ? { type: 'success', label: '在线' }
                 : { type: 'danger', label: '离线' }
-            : { type: 'warning', label: '未激活' } },
+            : { type: 'warning', label: '未激活' }, 'size': 'sm', width: 80 },
           { type: 'invoke', render: [
             { label: '开始抓取', on: this.onStart },
             { label: '停止抓取', on: this.onStop },
@@ -141,26 +147,40 @@ export default {
           ], width: 300 }
         ]
       },
-      heartbeatSchema: {
-        nonPagination: true,
-        autoRefresh: true,
-        list: this.getheartbeatData,
-        filters: [
-          { key: 'name', type: 'search', placeholder: '名称' }
-        ],
-        cols: [
-          { prop: 'name', label: '名称', sortable: true },
-          { prop: 'sn', label: '序列号', sortable: true },
-          { prop: 'mac', label: 'MAC', width: 140 },
-          { prop: 'ip', label: 'ip', width: 140 },
-          { prop: 'settingId', label: '当前事件' },
-          { label: '上报时间', render: ({ timestamp }) => parseTime(timestamp), sortable: true, sortBy: 'timestamp', width: 160 }
-        ]
-      },
-      curDeviceId: null
+      curDeviceId: null,
+      title: '',
+      sn: ''
     }
   },
   computed: {
+    heartbeatSchema () {
+      return {
+        nonPagination: true,
+        autoRefresh: true,
+        list: this.getheartbeatData,
+        condition: { sn: this.sn },
+        filters: this.sn
+          ? null
+          : [
+            { key: 'sn', type: 'search', placeholder: '序列号' },
+            { type: 'refresh' }
+          ],
+        cols: this.sn
+          ? [
+            { prop: 'sn', label: '序列号' },
+            { prop: 'mac', label: 'MAC', width: 160 },
+            { prop: 'ip', label: 'ip', width: 140 },
+            { prop: 'settingId', label: '当前事件' },
+            { label: '上报时间', render: ({ timestamp }) => parseTime(timestamp), width: 180 }
+          ]
+          : [
+            { prop: 'sn', label: '序列号' },
+            { prop: 'mac', label: 'MAC', width: 200 },
+            { prop: 'ip', label: 'ip', width: 180 },
+            { label: '上报时间', render: ({ timestamp }) => parseTime(timestamp), width: 180 }
+          ]
+      }
+    },
     resultSchema () {
       return {
         list: getRemoteLogs,
@@ -170,16 +190,16 @@ export default {
           { prop: 'settingId', label: '事件' },
           { label: '执行状态', type: 'tag', render: ({ status }) => {
             return {
-              type: status ? 'success' : 'danger',
-              label: status ? '成功' : '失败'
+              type: ['warning', 'success', 'danger', 'primary'][status],
+              label: ['抓取中', '成功', '失败', '取消'][status]
             }
           } },
           { prop: 'message', label: '备注' },
+          { prop: 'createTime', label: '抓取开始时间', width: 180, align: 'center' },
           { prop: 'commandArrayString', label: '抓取命令数组' },
-          { prop: 'releaseTime', label: '命令发布时间', width: 180 },
-          { prop: 'createTime', label: '上传时间', width: 180 },
+          { prop: 'duration', label: '抓取时长(s)', width: 100, align: 'center' },
           { type: 'invoke', render: [
-            { label: '下载日志', allow: ({ status }) => status, on: this.onDownload }
+            { label: '下载日志', allow: ({ status }) => status === 1, on: this.onDownload }
           ] }
         ]
       }
@@ -196,6 +216,19 @@ export default {
       }
       return getDevicesByTenant(this.$tenant.path, params)
     },
+    getheartbeatData (params) {
+      return getHeartbeats(params, this.sn)
+    },
+    onHeartbeats () {
+      this.title = '未入库设备心跳记录'
+      this.sn = ''
+      this.$refs.heartbeatDialog.show()
+    },
+    onHeartbeat ({ name, serialNumber }) {
+      this.title = `${name}心跳记录`
+      this.sn = serialNumber
+      this.$refs.heartbeatDialog.show()
+    },
     onStop ({ id }) {
       stopRemoteLog({
         duration: 60,
@@ -244,64 +277,18 @@ export default {
       this.curDeviceId = device.id
       this.$refs.resultDialog.show()
     },
-    getheartbeatData () {
-      return getHeartbeats(this.$mac).then(({ data }) => {
-        if (!data) {
-          return { data: [] }
-        }
-
-        if (Array.isArray(data)) {
-          if (this.$refs?.heartbeatDialog.getTable()?.options.params.name?.length) {
-            return { data: data.filter(i => i).map(i => JSON.parse(i))
-              .filter(i => new RegExp(this.$refs.heartbeatDialog.getTable().options.params.name).test(i.name)) }
-          }
-          return { data: data.filter(i => i).map(i => JSON.parse(i)) }
-        }
-        data = JSON.parse(data)
-        if (this.$mac) {
-          const timestamp = data.timestamp
-          data.name = this.$deviceName
-          this.$heartBeatData = this.$heartBeatData || []
-          if (!(this.$heartBeatData.length && this.$heartBeatData[0].timestamp === timestamp)) {
-            this.$heartBeatData.unshift(data)
-          }
-
-          return { data: this.$heartBeatData }
-        }
-        return { data }
-      })
-    },
-    onHeartbeats () {
-      this.$heartBeatData = []
-      this.$mac = null
-      this.heartbeatSchema.filters = [
-        { key: 'name', type: 'search', placeholder: '设备名称' }
-      ]
-      this.$refs.heartbeatDialog.show()
-    },
-    onHeartbeat (device) {
-      this.$heartBeatData = []
-      this.$deviceName = device.name
-      this.$mac = device.mac
-      this.heartbeatSchema.filters = null
-      this.$refs.heartbeatDialog.show()
-    },
     showDocument () {
       window.open('https://inspur-rd.feishu.cn/docx/M4oIdhmU1oFyvAxErn3cYv6Cnuf', '_blank')
     },
-    onDownload ({ recordId, createTime }) {
-      getDownloadUrl(recordId).then(
-        ({ data: url }) => {
-          const a = document.createElement('a')
-          a.style.display = 'none'
-          a.setAttribute('target', '_blank')
-          a.setAttribute('download', `${this.$deviceName}-${createTime}日志`)
-          a.href = getAssetUrl(url)
-          document.body.appendChild(a)
-          a.click()
-          document.body.removeChild(a)
-        }
-      )
+    onDownload ({ fileName, createTime, duration }) {
+      const a = document.createElement('a')
+      a.style.display = 'none'
+      a.setAttribute('target', '_blank')
+      a.setAttribute('download', `${this.$deviceName}-${createTime}-${duration}s日志.zip`)
+      a.href = getAssetUrl(fileName)
+      document.body.appendChild(a)
+      a.click()
+      document.body.removeChild(a)
     }
   }
 }