jiangping
2025-03-05 c88fe3ea9fd8bd1ea556b4769a1a0cd6c9b5661d
admin/src/views/system/traceLog.vue
@@ -26,7 +26,7 @@
        </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,14 +53,9 @@
    </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>
@@ -76,19 +75,23 @@
            <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>
@@ -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>
@@ -162,10 +162,24 @@
  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
@@ -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;