ll

liukangdong

2025-03-05 886de155147766e78199b7f85346f553fb88bc1d

 admin/src/views/system/traceLog.vue

@@ -13,20 +13,20 @@
      </el-form-item>
      <el-form-item label="状态" prop="status">
        <el-select v-model="searchForm.status" clearable @change="search">
          <el-option value="-1" label="未处理"/>
          <el-option value="0" label="失败"/>
          <el-option value="1" label="成功"/>
          <el-option value="-1" label="未处理" />
          <el-option value="0" label="失败" />
          <el-option value="1" label="成功" />
        </el-select>
      </el-form-item>
      <el-form-item label="异常等级" prop="exceptionLevel">
        <el-select v-model="searchForm.exceptionLevel" clearable @change="search">
          <el-option value="10" label="高"/>
          <el-option value="5" label="中"/>
          <el-option value="0" label="低"/>
          <el-option value="10" label="高" />
          <el-option value="5" label="中" />
          <el-option value="0" label="低" />
        </el-select>
      </el-form-item>
      <el-form-item label="操作时间范围">
        <el-date-picker
        <!-- <el-date-picker
          v-model="searchDateRange"
          type="datetimerange"
          range-separator="至"
@@ -34,7 +34,11 @@
          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>
@@ -49,46 +53,45 @@
    </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>
        <el-table-column prop="requestUri" label="请求地址" min-width="200px"></el-table-column>
        <el-table-column prop="status" label="状态" min-width="80px">
          <template slot-scope="{row}">
            {{row.status | statusText}}
            {{ row.status | statusText }}
          </template>
        </el-table-column>
        <el-table-column prop="requestParams" label="请求参数" min-width="80px">
          <template slot-scope="{row}">
            <ColumnDetail v-if="row.requestParams != null" :content="row.requestParams" :limit="0"/>
            <ColumnDetail v-if="row.requestParams != null" :content="row.requestParams" :limit="0" />
          </template>
        </el-table-column>
        <el-table-column prop="requestResult" label="请求结果" min-width="80px">
          <template slot-scope="{row}">
            <ColumnDetail v-if="row.requestResult != null" :content="row.requestResult"/>
            <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}}
            {{ 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>
@@ -96,11 +99,8 @@
        <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>
@@ -115,7 +115,7 @@
  name: 'SystemTraceLog',
  extends: BaseTable,
  components: { ColumnDetail, TableLayout, Pagination },
  data () {
  data() {
    return {
      // 搜索时间反胃
      searchDateRange: [],
@@ -133,7 +133,7 @@
  },
  filters: {
    // 状态
    statusText (value) {
    statusText(value) {
      if (value === 1) {
        return '成功'
      }
@@ -143,7 +143,7 @@
      return '未处理'
    },
    // 异常等级
    exceptionLevelText (value) {
    exceptionLevelText(value) {
      if (value == null) {
        return ''
      }
@@ -161,15 +161,29 @@
  },
  methods: {
    // 搜索框重置
    reset () {
      this.$refs.searchForm.resetFields()
      this.searchDateRange = []
      this.searchForm.startTime = null
      this.searchForm.endTime = null
    reset() {
      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
    tableRowClassName ({ row }) {
    tableRowClassName({ row }) {
      if (row.exceptionLevel === 5 || row.status === -1) {
        return 'warning-log'
      } else if (row.exceptionLevel === 10) {
@@ -178,7 +192,7 @@
      return ''
    },
    // 获取异常查看按钮类型
    getExceptionButtonType (level) {
    getExceptionButtonType(level) {
      if (level === 5) {
        return 'warning'
      }
@@ -188,7 +202,7 @@
      return null
    },
    // 时间搜索范围变化
    handleSearchTimeChange (value) {
    handleSearchTimeChange(value) {
      this.searchForm.startTime = null
      this.searchForm.endTime = null
      if (value != null) {
@@ -198,7 +212,7 @@
      this.search()
    }
  },
  created () {
  created() {
    this.config({
      api: '/system/traceLog',
      sorts: [{
@@ -215,10 +229,12 @@
// 状态栏
.status-bar {
  padding: 0 16px;

  [class^=status-] {
    font-size: 13px;
    margin-right: 12px;
    line-height: 40px;

    &::before {
      position: relative;
      top: 2px;
@@ -231,22 +247,27 @@
      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;