日志优化修改-设备监控优化

acs/qd/src/views/monitor/logback/index.vue

@@ -23,24 +23,38 @@
             />
           </el-select>
         </el-form-item>
-        <el-form-item label="时间范围" style="margin-left: 10px">
+        <el-form-item label="方向">
+          <el-radio-group v-model="direction" size="mini" @change="queryData">
+            <el-radio label="backward">backward</el-radio>
+            <el-radio label="forward">forward</el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label="时间范围" style="margin-left: 10px" v-show="!showOptions">
           <el-date-picker
             v-model="timeRange"
             size="mini"
             clearable
             type="datetimerange"
-            :picker-options="pickerOptions"
             range-separator="至"
             start-placeholder="开始日期"
             end-placeholder="结束日期"
             align="right"
           />
         </el-form-item>
-        <el-form-item label="方向">
-          <el-radio-group v-model="direction" size="mini" @change="queryData">
-            <el-radio label="backward">backward</el-radio>
-            <el-radio label="forward">forward</el-radio>
-          </el-radio-group>
+        <el-form-item v-show="showOptions" label="时差" style="margin-left: 10px">
+          <el-select v-model="timeZoneValue" filterable placeholder="请选择标签" size="mini" @change="queryData">
+            <el-option
+              v-for="item in timeZoneOptions"
+              :key="item.index"
+              :label="item.label"
+              :value="item.value"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item>
+          <el-tooltip class="item" effect="dark" content="切换查询条件" placement="top">
+            <span class="el-icon-sort" @click="changeShow" />
+          </el-tooltip>
         </el-form-item>
       </el-form>
       <el-form :inline="true" class="demo-form-inline">
@@ -118,101 +132,10 @@ export default {
       labelValueOptions: [], // 标签值
       logLabel: '',
       logLabelValue: '',
-      timeRange: '',
+      timeRange: [],
       text: '',
       limits: 100,
       direction: 'backward',
-      pickerOptions: {
-        shortcuts: [{
-          text: '最近5分钟',
-          onClick(picker) {
-            const end = new Date()
-            const start = new Date()
-            start.setTime(start.getTime() - 300 * 1000)
-            picker.$emit('pick', [start, end])
-          }
-        }, {
-          text: '最近15分钟',
-          onClick(picker) {
-            const end = new Date()
-            const start = new Date()
-            start.setTime(start.getTime() - 900 * 1000)
-            picker.$emit('pick', [start, end])
-          }
-        }, {
-          text: '最近30分钟',
-          onClick(picker) {
-            const end = new Date()
-            const start = new Date()
-            start.setTime(start.getTime() - 1800 * 1000)
-            picker.$emit('pick', [start, end])
-          }
-        }, {
-          text: '最近1小时',
-          onClick(picker) {
-            const end = new Date()
-            const start = new Date()
-            start.setTime(start.getTime() - 3600 * 1000)
-            picker.$emit('pick', [start, end])
-          }
-        }, {
-          text: '最近3小时',
-          onClick(picker) {
-            const end = new Date()
-            const start = new Date()
-            start.setTime(start.getTime() - 3600 * 1000 * 3)
-            picker.$emit('pick', [start, end])
-          }
-        }, {
-          text: '最近6小时',
-          onClick(picker) {
-            const end = new Date()
-            const start = new Date()
-            start.setTime(start.getTime() - 3600 * 1000 * 6)
-            picker.$emit('pick', [start, end])
-          }
-        }, {
-          text: '最近12小时',
-          onClick(picker) {
-            const end = new Date()
-            const start = new Date()
-            start.setTime(start.getTime() - 3600 * 1000 * 12)
-            picker.$emit('pick', [start, end])
-          }
-        }, {
-          text: '最近24小时',
-          onClick(picker) {
-            const end = new Date()
-            const start = new Date()
-            start.setTime(start.getTime() - 3600 * 1000 * 24)
-            picker.$emit('pick', [start, end])
-          }
-        }, {
-          text: '最近2天',
-          onClick(picker) {
-            const end = new Date()
-            const start = new Date()
-            start.setTime(start.getTime() - 3600 * 1000 * 24 * 2)
-            picker.$emit('pick', [start, end])
-          }
-        }, {
-          text: '最近7天',
-          onClick(picker) {
-            const end = new Date()
-            const start = new Date()
-            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
-            picker.$emit('pick', [start, end])
-          }
-        }, {
-          text: '最近15天',
-          onClick(picker) {
-            const end = new Date()
-            const start = new Date()
-            start.setTime(start.getTime() - 3600 * 1000 * 24 * 15)
-            picker.$emit('pick', [start, end])
-          }
-        }]
-      },
       logData: [],
       logs: [], // 所有日志
       showEmpty: true,
@@ -244,7 +167,43 @@ export default {
       }, {
         label: '30m',
         value: 1800000
-      }]
+      }],
+      timeZoneOptions: [{
+        label: '最近5分钟',
+        value: 300 * 1000
+      }, {
+        label: '最近15分钟',
+        value: 900 * 1000
+      }, {
+        label: '最近30分钟',
+        value: 1800 * 1000
+      }, {
+        label: '最近1小时',
+        value: 3600 * 1000
+      }, {
+        label: '最近3小时',
+        value: 3600 * 1000 * 3
+      }, {
+        label: '最近6小时',
+        value: 3600 * 1000 * 6
+      }, {
+        label: '最近12小时',
+        value: 3600 * 1000 * 12
+      }, {
+        label: '最近24小时',
+        value: 3600 * 1000 * 24
+      }, {
+        label: '最近2天',
+        value: 3600 * 1000 * 24 * 2
+      }, {
+        label: '最近7天',
+        value: 3600 * 1000 * 24 * 7
+      }, {
+        label: '最近15天',
+        value: 3600 * 1000 * 24 * 15
+      }],
+      timeZoneValue: '',
+      showOptions: true
     }
   },
   mounted() {
@@ -271,16 +230,15 @@ export default {
       })
     },
     queryData() {
-      console.log('参数：', queryParam)
       // 清空查询数据
       this.clearParam()
-      if (this.logLabel !== '') {
+      if (this.logLabel !== '') { // 标签
         queryParam.logLabel = this.logLabel
       }
-      if (this.logLabelValue !== '') {
+      if (this.logLabelValue !== '') { // 标签值
         queryParam.logLabelValue = this.logLabelValue
       }
-      if (queryParam.logLabelValue === null) {
+      if (queryParam.logLabelValue === null) { // 判空
         this.$message({
           showClose: true,
           message: '请选择标签',
@@ -290,22 +248,29 @@ export default {
         this.emptyText = '请选择标签'
         return
       }
-      if (this.timeRange !== '' && this.timeRange !== null) {
+      if (this.timeRange.length !== 0) { // 如果是输入时间范围
         queryParam.start = (new Date(this.timeRange[0]).getTime() * 1000000).toString()
         queryParam.end = (new Date(this.timeRange[1]).getTime() * 1000000).toString()
       }
-      if (this.text !== '') {
-        queryParam.text = this.text.replace(/^\s*|\s*$/g,'')
+      if (this.timeZoneValue) {
+        // console.log('时差：', this.timeZoneValue)
+        // console.log('start时间：', new Date().getTime() - this.timeZoneValue)
+        // console.log('end时间：', new Date().getTime())
+        const time = new Date()
+        queryParam.start = ((time.getTime() - this.timeZoneValue) * 1000000).toString()
+        queryParam.end = (time.getTime() * 1000000).toString()
       }
-      if (this.limits !== '') {
-        console.log(this.limits)
+      if (this.text) {
+        queryParam.text = this.text.replace(/^\s*|\s*$/g, '')
+      }
+      if (this.limits) {
         queryParam.limits = this.limits
       }
       queryParam.direction = this.direction
-      console.log(queryParam)
+      console.log('最后参数：', queryParam)
       var ansi_up = new AnsiUp()
       logOperation.getLogData(queryParam).then(res => {
-        console.log(res)
+        console.log('结果', res)
         this.showEmpty = false
         if (res.data.result.length === 1) {
           this.logs = res.data.result[0].values
@@ -320,7 +285,6 @@ export default {
               this.logs.push(res.data.result[j].values[values_index])
             }
           }
-          console.log(this.logs)
           for (const k in this.logs) {
             this.logs[k][1] = ansi_up.ansi_to_html(this.logs[k][1])
           }
@@ -329,7 +293,6 @@ export default {
           } else {
             this.logs.sort((a, b) => a[0] - b[0])
           }
-          console.log(this.logs)
         } else {
           this.showEmpty = true
           this.emptyText = '暂无日志信息，请选择时间段试试'
@@ -337,38 +300,48 @@ export default {
       })
     },
     clearParam() {
-      const end = new Date()
-      const start = new Date()
-      start.setTime(start.getTime() - 3600 * 1000 * 6)
       queryParam = {
         logLabel: null,
         logLabelValue: null,
-        start: (start.getTime() * 1000000).toString(),
-        end: (end.getTime() * 1000000).toString(),
+        start: null,
+        end: null,
         text: null,
         limits: 100,
         direction: 'backward'
       }
     },
-    handleScroll() {
+    handleScroll() { // 滚动事件
       const scrollTop = document.documentElement.scrollTop// 滚动高度
       const clientHeight = document.documentElement.clientHeight// 可视高度
       const scrollHeight = document.documentElement.scrollHeight// 内容高度
-      const bottomest = Math.round(scrollTop + clientHeight)
-      if (bottomest === scrollHeight) {
+      const bottomest = Math.ceil(scrollTop + clientHeight)
+      if (bottomest >= scrollHeight) {
+        console.log(1)
         // 加载新数据
         queryParam.limits = this.scrollStep
         queryParam.direction = this.direction
-        if (this.direction === 'backward') {
-          queryParam.start = (this.logs[this.logs.length - 1][0] - (queryParam.end - queryParam.start)).toString()
+        // 获取时间差
+        let zone = queryParam.end - queryParam.start
+        if (this.timeRange.length) { // 如果是输入时间范围
+          zone = ((new Date(this.timeRange[1]).getTime() - new Date(this.timeRange[0]).getTime()) * 1000000).toString()
+        }
+        if (this.timeZoneValue) {
+          zone = this.timeZoneValue * 1000000
+        }
+        if (zone === 0) {
+          zone = 3600 * 1000 * 6
+        }
+        console.log('时间差:', zone)
+        if (this.direction === 'backward') { // 设置时间区间
+          queryParam.start = (this.logs[this.logs.length - 1][0] - zone).toString()
           queryParam.end = this.logs[this.logs.length - 1][0]
         } else {
           queryParam.start = this.logs[this.logs.length - 1][0]
-          queryParam.end = (parseFloat(this.logs[this.logs.length - 1][0]) + parseFloat((queryParam.end - queryParam.start).toString())).toString()
+          queryParam.end = (parseFloat(this.logs[this.logs.length - 1][0]) + parseFloat(zone.toString())).toString()
         }
+        console.log('滚动的参数：', queryParam)
         var ansi_up = new AnsiUp()
         logOperation.getLogData(queryParam).then(res => {
-          console.log(res)
           this.showEmpty = false
           if (res.data.result.length === 1) {
             const log = res.data.result[0].values
@@ -384,7 +357,6 @@ export default {
                 tempArray.push(res.data.result[j].values[values_index])
               }
             }
-            console.log(tempArray)
             if (this.direction === 'backward') { // 由于使用公共标签会导致时间顺序错乱，因此对二维数组进行排序
               tempArray.sort((a, b) => b[0] - a[0])
             } else {
@@ -412,20 +384,25 @@ export default {
           this.intervalLogs()
         }, item.value)
       } else {
-        // console.log('销毁了')
+        console.log('销毁了')
         clearInterval(this.timer)
       }
     },
-    intervalLogs() {
-      console.log('定时的参数：', queryParam)
+    intervalLogs() { // 定时器的方法
       // 组织参数
       // 设置开始时间和结束时间
       // 开始为现在时间
       const start = new Date()
       const end = new Date()
       // 时差判断
-      const zone = queryParam.end - queryParam.start
-      if (zone === 0) {
+      let zone = queryParam.end - queryParam.start
+      if (this.timeRange.length) { // 如果是输入时间范围
+        zone = ((new Date(this.timeRange[1]).getTime() - new Date(this.timeRange[0]).getTime()) * 1000000).toString()
+      }
+      if (this.timeZoneValue) {
+        zone = this.timeZoneValue * 1000000
+      }
+      if (zone === 0) { // 防止空指针
         start.setTime(start.getTime() - 3600 * 1000 * 6)
         queryParam.start = (start.getTime() * 1000000).toString()
       } else {
@@ -433,6 +410,7 @@ export default {
       }
       queryParam.end = (end.getTime() * 1000000).toString()
       queryParam.limits = this.limits
+      console.log('定时器最后参数：', queryParam)
       var ansi_up = new AnsiUp() // 后端日志格式转化
       logOperation.getLogData(queryParam).then(res => {
         console.log('res', res)
@@ -451,7 +429,6 @@ export default {
               this.logs.push(res.data.result[j].values[values_index])
             }
           }
-          console.log(this.logs)
           for (const k in this.logs) {
             this.logs[k][1] = ansi_up.ansi_to_html(this.logs[k][1])
           }
@@ -465,6 +442,12 @@ export default {
           this.emptyText = '暂无日志信息，请选择时间段试试'
         }
       })
+    },
+    changeShow() {
+      // 清空数据
+      this.timeZoneValue = ''
+      this.timeRange = []
+      this.showOptions = !this.showOptions
     }
   }
 }