| | |
| | | </el-select> |
| | | </el-form-item> |
| | | <el-form-item label="操作时间范围"> |
| | | <el-date-picker |
| | | <!-- <el-date-picker |
| | | v-model="searchDateRange" |
| | | type="datetimerange" |
| | | range-separator="至" |
| | |
| | | start-placeholder="开始时间" |
| | | end-placeholder="结束时间" |
| | | @change="handleSearchTimeChange" |
| | | ></el-date-picker> |
| | | ></el-date-picker> --> |
| | | <el-date-picker type="datetime" v-model="searchForm.startTime" value-format="yyyy-MM-dd HH:mm:ss" |
| | | placeholder="请选择开始时间" @change="changeRadio" /> |
| | | <el-date-picker type="datetime" v-model="searchForm.endTime" value-format="yyyy-MM-dd HH:mm:ss" |
| | | placeholder="请选择结束时间" @change="changeRadio" /> |
| | | </el-form-item> |
| | | <section> |
| | | <el-button type="primary" @click="search">搜索</el-button> |
| | |
| | | </div> |
| | | <!-- 表格和分页 --> |
| | | <template v-slot:table-wrap> |
| | | <el-table |
| | | v-loading="isWorking.search" |
| | | :data="tableData.list" |
| | | stripe |
| | | :default-sort="{prop: 'operaTime', order: 'descending'}" |
| | | :row-class-name="tableRowClassName" |
| | | @sort-change="handleSortChange" |
| | | > |
| | | <el-table v-loading="isWorking.search" :data="tableData.list" stripe |
| | | :default-sort="{ prop: 'operaTime', order: 'descending' }" :row-class-name="tableRowClassName" |
| | | @sort-change="handleSortChange"> |
| | | <el-table-column prop="operaModule" label="业务模块" min-width="100px"></el-table-column> |
| | | <el-table-column prop="operaRemark" label="操作说明" min-width="100px"></el-table-column> |
| | | <el-table-column prop="requestMethod" label="请求方式" min-width="80px"></el-table-column> |
| | |
| | | <ColumnDetail v-if="row.requestResult != null" :content="row.requestResult"/> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column prop="exceptionLevel" label="异常等级" sortable="custom" sort-by="EXCEPTION_LEVEL" min-width="100px"> |
| | | <el-table-column prop="exceptionLevel" label="异常等级" sortable="custom" sort-by="EXCEPTION_LEVEL" |
| | | min-width="100px"> |
| | | <template slot-scope="{row}"> |
| | | {{row.exceptionLevel | exceptionLevelText}} |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column prop="exceptionStack" label="异常信息" min-width="170px"> |
| | | <template slot-scope="{row}"> |
| | | <ColumnDetail v-if="row.exceptionStack != null" :content="row.exceptionStack" :button-type="getExceptionButtonType(row.exceptionLevel)"/> |
| | | <ColumnDetail v-if="row.exceptionStack != null" :content="row.exceptionStack" |
| | | :button-type="getExceptionButtonType(row.exceptionLevel)" /> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column prop="operaSpendTime" label="请求耗时(ms)" sortable="custom" sort-by="OPERA_SPEND_TIME" min-width="120px"></el-table-column> |
| | | <el-table-column prop="operaSpendTime" label="请求耗时(ms)" sortable="custom" sort-by="OPERA_SPEND_TIME" |
| | | min-width="120px"></el-table-column> |
| | | <el-table-column prop="userRealname" label="操作人" min-width="100px"></el-table-column> |
| | | <el-table-column prop="operaTime" label="操作时间" sortable="custom" sort-by="OPERA_TIME" min-width="140px"></el-table-column> |
| | | <el-table-column prop="operaTime" label="操作时间" sortable="custom" sort-by="OPERA_TIME" |
| | | min-width="140px"></el-table-column> |
| | | <el-table-column prop="platform" label="操作平台" min-width="100px"></el-table-column> |
| | | <el-table-column prop="systemVersion" label="系统版本" min-width="80px"></el-table-column> |
| | | <el-table-column prop="serverIp" label="处理服务器IP" min-width="100px"></el-table-column> |
| | |
| | | <el-table-column prop="clientInfo" label="用户客户端" min-width="200px"></el-table-column> |
| | | <el-table-column prop="osInfo" label="用户操作系统" min-width="100px"></el-table-column> |
| | | </el-table> |
| | | <pagination |
| | | @size-change="handleSizeChange" |
| | | @current-change="handlePageChange" |
| | | :pagination="tableData.pagination" |
| | | ></pagination> |
| | | <pagination @size-change="handleSizeChange" @current-change="handlePageChange" :pagination="tableData.pagination"> |
| | | </pagination> |
| | | </template> |
| | | </TableLayout> |
| | | </template> |
| | |
| | | methods: { |
| | | // 搜索框重置 |
| | | reset () { |
| | | this.$refs.searchForm.resetFields() |
| | | this.searchDateRange = [] |
| | | this.searchForm.startTime = null |
| | | this.searchForm.endTime = null |
| | | this.searchForm = { |
| | | userRealname: '', |
| | | operaModule: '', |
| | | requestUri: '', |
| | | status: null, |
| | | exceptionLevel: null, |
| | | startTime: null, |
| | | endTime: null |
| | | } |
| | | this.search() |
| | | }, |
| | | changeRadio() { |
| | | |
| | | if (this.searchForm.startTime && this.searchForm.endTime && new Date(this.searchForm.startTime).getTime() > new Date(this.searchForm.endTime).getTime()) { |
| | | this.$message.error('开始时间不能大于结束时间') |
| | | this.searchForm.startTime = '' |
| | | return |
| | | } |
| | | this.search() |
| | | }, |
| | | // 标记行class |
| | |
| | | // 状态栏 |
| | | .status-bar { |
| | | padding: 0 16px; |
| | | |
| | | [class^=status-] { |
| | | font-size: 13px; |
| | | margin-right: 12px; |
| | | line-height: 40px; |
| | | |
| | | &::before { |
| | | position: relative; |
| | | top: 2px; |
| | |
| | | margin-right: 6px; |
| | | } |
| | | } |
| | | |
| | | .status-warn::before { |
| | | background-color: oldlace; |
| | | border-color: orange; |
| | | } |
| | | |
| | | .status-danger::before { |
| | | background-color: #fdf0f0; |
| | | border-color: indianred; |
| | | } |
| | | } |
| | | |
| | | /deep/ .table-content { |
| | | margin-top: 0; |
| | | } |
| | | |
| | | // 警告级日志 |
| | | /deep/ .warning-log td { |
| | | background-color: oldlace !important; |
| | | } |
| | | |
| | | // 危险级日志 |
| | | /deep/ .danger-log td { |
| | | background-color: #fdf0f0 !important; |