<!--
|
* @Author: lzhe lzhe@example.com
|
* @Date: 2024-03-26 10:28:33
|
* @LastEditors: lzhe lzhe@example.com
|
* @LastEditTime: 2024-04-03 11:22:57
|
* @FilePath: /smart-web/src/views/master/person/main/index.vue
|
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
|
-->
|
<template>
|
<div class="api-main">
|
<el-form :inline="true" :model="searchData" label-width="80px">
|
<el-form-item label="服务id">
|
<el-input v-model="searchData.serviceId" placeholder="服务id" clearable />
|
</el-form-item>
|
<el-form-item label="服务host">
|
<el-input v-model="searchData.serverHost" placeholder="服务host" clearable />
|
</el-form-item>
|
<el-form-item>
|
<el-button type="primary" @click="searchclick">搜索</el-button>
|
<el-button @click="searchClearBtn">清空</el-button>
|
</el-form-item>
|
</el-form>
|
<div>
|
<div class="api-table">
|
<el-table ref="multipleTableRef" :data="tableData" border style="width: 100%" class="multipleTableRef">
|
<el-table-column prop="serviceId" label="服务id"></el-table-column>
|
<el-table-column prop="serverHost" label="服务host"></el-table-column>
|
<el-table-column prop="serverIp" label="服务ip"></el-table-column>
|
<el-table-column prop="env" label="软件环境"></el-table-column>
|
<el-table-column prop="requestUri" label="请求接口"></el-table-column>
|
<el-table-column prop="createTime" label="日志时间"></el-table-column>
|
<el-table-column fixed="right" label="操作">
|
<template #default="scope">
|
<el-button text type="primary" size="small" @click="table_show(scope.row, scope.$index)">查看</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
<el-pagination
|
style="margin-top: 12px;"
|
@size-change="handleSizeChange"
|
@current-change="handleCurrentChange"
|
:current-page="currentPage4"
|
:page-sizes="[15, 50, 100]"
|
:page-size="15"
|
layout="total, sizes, prev, pager, next, jumper"
|
:total="total">
|
</el-pagination>
|
</div>
|
</div>
|
<el-drawer v-model="drawer" title="查 看" direction="rtl" :before-close="handleClose" size="60%" modal-class="viewData">
|
<el-form :inline="true" :model="viewData" label-width="80px" class="form-view-data">
|
<el-row>
|
<el-col :span="12">
|
<el-form-item label="服务id" center>
|
<span>{{viewData.serviceId}}</span>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="服务host" center>
|
<span>{{viewData.serverHost}}</span>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="服务ip" center>
|
<span>{{viewData.serverIp}}</span>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="软件环境" center>
|
<span>{{viewData.env}}</span>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="请求接口" center>
|
<span>{{viewData.requestUri}}</span>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="日志时间" center>
|
<span>{{viewData.createTime}}</span>
|
</el-form-item>
|
</el-col>
|
<el-col :span="24">
|
<el-form-item label="用户代理" center>
|
<span>{{viewData.userAgent}}</span>
|
</el-form-item>
|
</el-col>
|
<el-col :span="24">
|
<el-form-item label="日志数据" center>
|
<span></span>
|
</el-form-item>
|
</el-col>
|
<el-col :span="24">
|
<el-form-item label="请求数据" center>
|
<span>{{viewData.params}}</span>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
</el-form>
|
</el-drawer>
|
</div>
|
</template>
|
<script>
|
export default {
|
name: "allocation",
|
data(){
|
return {
|
viewData: {
|
serviceId: "",
|
serverHost: "",
|
serverIp: "",
|
env: "",
|
requestUri: "",
|
createTime: "",
|
userAgent: "",
|
params: ""
|
},
|
drawer: false,
|
searchData: {
|
serviceId: "",
|
serverHost: "",
|
current: "1",
|
size: "15"
|
},
|
dialog: {
|
save: false,
|
allocation: false
|
},
|
leftActive: true,
|
input: '',
|
input3: '',
|
tableData: []
|
}
|
},
|
created(){
|
|
},
|
mounted(){
|
this.searchBtn();
|
},
|
methods: {
|
handleClose() {
|
this.drawer = false;
|
},
|
searchClearBtn() {
|
this.searchData = {
|
code: "",
|
dictValue: "",
|
current: "1",
|
size: "15"
|
}
|
this.searchBtn();
|
},
|
searchclick() {
|
this.searchData.current = "1";
|
this.searchData.size = "15";
|
this.searchBtn();
|
},
|
searchBtn() {
|
this.$HTTP.get("/api/blade-log/usual/list",this.searchData).then(res=> {
|
if(res.code == 200) {
|
this.tableData = res.data.records;
|
this.total = res.data.total;
|
}
|
})
|
},
|
//查看
|
table_show(row){
|
this.$HTTP.get("/api/blade-log/api/detail?id="+row.id).then(res=> {
|
if(res.code == 200) {
|
this.viewData = res.data;
|
this.drawer = true;
|
}
|
})
|
},
|
handleSizeChange(val) {
|
console.log(`每页 ${val} 条`);
|
},
|
handleCurrentChange(val) {
|
console.log(`当前页: ${val}`);
|
},
|
handleSizeChange(val) {
|
console.log(`每页 ${val} 条`);
|
this.searchData.current = "1";
|
this.searchData.size = val;
|
this.searchBtn();
|
},
|
handleCurrentChange(val) {
|
console.log(`当前页: ${val}`);
|
this.searchData.current = val;
|
this.searchBtn();
|
}
|
}
|
}
|
</script>
|
|
<style scoped>
|
.api-main {
|
background-color: #fff;
|
margin: 8px;
|
padding: 8px;
|
}
|
.api-table {
|
padding-left: 8px;
|
padding-right: 8px;
|
margin-bottom: 8px;
|
|
}
|
.multipleTableRef {
|
margin-bottom: 8px;
|
}
|
.form-view-data {
|
padding-left: 160px;
|
padding-right: 50px;
|
}
|
</style>
|
<style>
|
.viewData .el-drawer .el-drawer__header {
|
border-bottom: 1px solid #f0f0f0;
|
padding-bottom: 20px;
|
margin-bottom: 20px;
|
}
|
</style>
|
