瀏覽代碼

update NginxLog.vue

reghao 2 月之前
父節點
當前提交
7dbffbed19
共有 2 個文件被更改,包括 32 次插入17 次删除
  1. 0 4
      src/api/devops.js
  2. 32 13
      src/views/devops/srv/NginxLog.vue

+ 0 - 4
src/api/devops.js

@@ -133,10 +133,6 @@ export function getNginxLogCount(queryInfo) {
   return get(devopsApi.getMachineNginx + '/count', queryInfo)
 }
 
-export function getNginxLogChart1(queryInfo) {
-  return get(devopsApi.getMachineNginx + '/log/chart1', queryInfo)
-}
-
 export function getNginxLogChart2(queryInfo) {
   return get(devopsApi.getMachineNginx + '/log/chart2', queryInfo)
 }

+ 32 - 13
src/views/devops/srv/NginxLog.vue

@@ -2,7 +2,7 @@
   <el-container>
     <el-header height="220">
       <el-row style="margin-top: 10px">
-<!--        <span>
+        <!--        <span>
           <span v-if="wsConnectStatus" style="color: green; margin: 5px">WebSocket 已连接</span>
           <span v-if="!wsConnectStatus" style="color: red; margin: 5px">WebSocket 未连接</span>
         </span>-->
@@ -119,7 +119,7 @@
                     size="mini"
                     type="success"
                     @click="onGetWeekly(scope.$index, scope.row)"
-                  >当周数量</el-button>
+                  >最近一周</el-button>
                 </template>
               </el-table-column>
             </el-table>
@@ -213,15 +213,18 @@
 
 <script>
 import * as echarts from 'echarts'
-import { getLogDates, getNginxLog2, getNginxLogChart1, getNginxLogChart2, getNginxLogChart3, getNginxLogChart4, getNginxLogChart5, getNginxLogChart6, getNginxLogCount } from '@/api/devops'
+import { getLogDates, getNginxLog2, getNginxLogChart2, getNginxLogChart3, getNginxLogChart4, getNginxLogChart5, getNginxLogChart6, getNginxLogCount } from '@/api/devops'
 
 export default {
   name: 'NginxLog',
   data() {
     return {
       queryInfo: {
-        dateStr: '',
-        aggregateField: '',
+        dateStr: ''
+      },
+      dateTimeQuery: {
+        start: '',
+        end: '',
         url: ''
       },
       logDateList: [],
@@ -373,7 +376,6 @@ export default {
       this.$message.info('数据正在刷新')
     },
     onSelectChange() {
-      this.queryInfo.url = ''
       this.$router.push({
         path: '/bg/backend/access_log',
         query: this.queryInfo
@@ -381,18 +383,24 @@ export default {
       this.onRefresh()
     },
     onGetDaily(index, row) {
-      this.queryInfo.url = row.name
+      this.dateTimeQuery.url = row.name
       this.showChart4Dialog = true
       this.chart4DialogTitle = row.name + ' 接口 ' + this.queryInfo.dateStr + ' 访问时间分布'
     },
     onGetWeekly(index, row) {
-      this.queryInfo.url = row.name
+      this.dateTimeQuery.url = row.name
       this.showChart5Dialog = true
       this.chart5DialogTitle = row.name + ' 接口 ' + this.queryInfo.dateStr + ' 前 7 天访问数量分布'
     },
     handleDialogOpened1() {
+      var dateArr = this.queryInfo.dateStr.split('-')
+      var end = new Date(dateArr[0], dateArr[1] - 1, dateArr[2], 23, 59, 59)
+      var start = new Date(dateArr[0], dateArr[1] - 1, dateArr[2])
+      start.setDate(start.getDate() - 7)
+      this.dateTimeQuery.start = this.formatDateTime(start)
+      this.dateTimeQuery.end = this.formatDateTime(end)
       this.$nextTick(() => {
-        getNginxLogChart1(this.queryInfo).then(resp => {
+        getNginxLogChart5(this.dateTimeQuery).then(resp => {
           if (resp.code === 0) {
             const respData = resp.data
             const xData = respData[0]
@@ -436,7 +444,10 @@ export default {
     handleDialogOpened() {
       // 使用$nextTick确保DOM已完全渲染
       this.$nextTick(() => {
-        getNginxLogChart2(this.queryInfo).then(resp => {
+        const queryInfo = {}
+        queryInfo.dateStr = this.queryInfo.dateStr
+        queryInfo.url = this.dateTimeQuery.url
+        getNginxLogChart2(queryInfo).then(resp => {
           if (resp.code === 0) {
             const respData = resp.data
             const xData = respData[0]
@@ -488,8 +499,14 @@ export default {
       }
     },
     handleDialogOpened5() {
+      var dateArr = this.queryInfo.dateStr.split('-')
+      var end = new Date(dateArr[0], dateArr[1] - 1, dateArr[2], 23, 59, 59)
+      var start = new Date(dateArr[0], dateArr[1] - 1, dateArr[2])
+      start.setDate(start.getDate() - 7)
+      this.dateTimeQuery.start = this.formatDateTime(start)
+      this.dateTimeQuery.end = this.formatDateTime(end)
       this.$nextTick(() => {
-        getNginxLogChart5(this.queryInfo).then(resp => {
+        getNginxLogChart5(this.dateTimeQuery).then(resp => {
           if (resp.code === 0) {
             const respData = resp.data
             const xData = respData[0]
@@ -524,8 +541,10 @@ export default {
       }
     },
     onGetUrlChart() {
-      this.queryInfo.aggregateField = 'url'
-      getNginxLogChart3(this.queryInfo).then(resp => {
+      const queryInfo = {}
+      queryInfo.dateStr = this.queryInfo.dateStr
+      queryInfo.aggregateField = 'url'
+      getNginxLogChart3(queryInfo).then(resp => {
         if (resp.code === 0) {
           this.urlList = resp.data
         } else {