|
|
@@ -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 {
|