ECS5 / ECS5.0Web · Files

<template>
  <div class="interfacel">
    <el-row :gutter="10">
      <el-col :span="3.5"
        ><div class="interfacel-content bg-purple">
          <div class="interfacel-content-text">接口名：</div>
          <div class="interfacel-content-input">
            <el-input v-model="queryConfig.interfaceName" />
          </div></div
      ></el-col>
      <el-col :span="3.5"
        ><div class="interfacel-content bg-purple">
          <div class="interfacel-content-text">标志：</div>
          <div class="interfacel-content-input">
            <el-select v-model="queryConfig.flag" placeholder="请选择">
              <el-option
                v-for="item in optionsFlag"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </div></div
      ></el-col>
      <el-col :span="3.5"
        ><div class="interfacel-content bg-purple">
          <div class="interfacel-content-text">URL：</div>
          <div class="interfacel-content-input">
            <el-input v-model="queryConfig.url" />
          </div></div
      ></el-col>
      <el-col :span="3.5"
        ><div class="interfacel-content bg-purple">
          <div class="interfacel-content-text">请求方式：</div>
          <div class="interfacel-content-input">
            <el-input v-model="queryConfig.method" />
          </div></div
      ></el-col>
      <el-col :span="3.5"
        ><div class="interfacel-content bg-purple">
          <div class="interfacel-content-text">耗时：</div>
          <div class="interfacel-content-input">
            <el-input
              v-model="queryConfig.totalMilliseconds"
              @input="validateNumber"
            />
            <span v-if="numberError" style="color: red">{{ numberError }}</span>
          </div>
        </div></el-col
      >
      <el-col :span="3.5"
        ><div class="interfacel-content bg-purple">
          <div class="interfacel-content-text">请求：</div>
          <div class="interfacel-content-input">
            <el-input v-model="queryConfig.request" />
          </div></div
      ></el-col>
      <el-col :span="3.5"
        ><div class="interfacel-content bg-purple">
          <div class="interfacel-content-text">回复：</div>
          <div class="interfacel-content-input">
            <el-input v-model="queryConfig.response" />
          </div></div
      ></el-col>
      <el-col :span="3.5"
        ><div class="interfacel-content bg-purple">
          <div class="interfacel-content-text">开始时间：</div>
          <div class="interfacel-content-input">
            <el-date-picker
              v-model="form.startTime"
              type="datetime"
              placeholder="选择日期时间"
            />
          </div></div
      ></el-col>
      <el-col :span="3.5"
        ><div class="interfacel-content bg-purple">
          <div class="interfacel-content-text">结束时间：</div>
          <div class="interfacel-content-input">
            <el-date-picker
              v-model="form.endTime"
              type="datetime"
              placeholder="选择日期时间"
            />
          </div></div
      ></el-col>
      <el-col :span="4"
        ><div class="interfacel-content bg-purple">
          <el-button
            icon="el-icon-search"
            class="T1"
            @click="btnAction()"
            type="primary"
            >查询</el-button
          >
          <el-button class="T1" @click="details()">查询情况</el-button>
          <el-button class="T1" @click="goodsTypeModify()" disabled
            >导出</el-button
          >
        </div></el-col
      >
    </el-row>
    <div class="table">
      <el-table
        :data="tableData"
        style="width: 100%"
        height="700"
        @selection-change="handleSelectionChange"
        :header-cell-style="{ background: '#d9ebfe', color: '#000000' }"
      >
        <el-table-column
          type="selection"
          align="center"
          width="55"
        ></el-table-column>
        <el-table-column prop="id" label="内置ID" width="100">
        </el-table-column>
        <el-table-column
          prop="interfaceName"
          label="接口名"
          width="180"
          :show-overflow-tooltip="true"
        >
        </el-table-column>
        <el-table-column
          prop="url"
          width="180"
          label="URL"
          :show-overflow-tooltip="true"
        >
        </el-table-column>
        <el-table-column prop="method" label="请求方式"> </el-table-column>
        <el-table-column prop="totalMilliseconds" label="耗时">
        </el-table-column>
        <el-table-column prop="request" label="请求"> </el-table-column>
        <el-table-column
          prop="response"
          label="回复"
          width="200"
          :show-overflow-tooltip="true"
        >
        </el-table-column>
        <el-table-column prop="flag" label="标志"> </el-table-column>
        <el-table-column prop="requestIp" label="请求者IP"> </el-table-column>
        <el-table-column prop="remark" label="备注"> </el-table-column>
        <el-table-column prop="created" label="开始时间"> </el-table-column>
        <el-table-column prop="createdBy" label="创建人"> </el-table-column>
      </el-table>
      <div class="pagination-container">
        <el-pagination
          background
          layout="prev, pager, next"
          :current-page="queryConfig.currentPage"
          :page-size="queryConfig.pageSize"
          :total="total"
          @current-change="handleCurrentChange"
        >
        </el-pagination>
      </div>
    </div>
    <el-dialog title="接口日志详情" :visible.sync="dialogFormVisible">
      <div
        class="container"
        v-for="(item, index) in multipleSelection"
        :key="index"
      >
        <div class="box">
          <div class="inner-left">内部id：</div>
          <div class="inner-right">{{ item.id }}</div>
        </div>
        <div class="box">
          <div class="inner-left">接口名：</div>
          <div class="inner-right">{{ item.interfaceName }}</div>
        </div>
        <div class="box">
          <div class="inner-left">耗时：</div>
          <div class="inner-right">{{ item.totalMilliseconds }}</div>
        </div>
        <div class="box">
          <div class="inner-left">标志：</div>
          <div class="inner-right">{{ item.flag }}</div>
        </div>
        <div class="box">
          <div class="inner-left">开始时间：</div>
          <div class="inner-right">{{ item.created }}</div>
        </div>
        <!-- <div class="box">
          <div class="inner-left">结束时间：</div>
          <div class="inner-right"></div>
        </div> -->
        <div class="box">
          <div class="inner-left">请求者IP：</div>
          <div class="inner-right">{{ item.requestIp }}</div>
        </div>
        <div class="box1">
          <div class="inner-left">请求：</div>
          <div class="inner-right">
            <el-input
              type="textarea"
              :autosize="{ minRows: 2, maxRows: 4 }"
              placeholder="请输入内容"
              v-model="item.request"
            />
          </div>
        </div>
        <div class="box1">
          <div class="inner-left">回复：</div>
          <div class="inner-right">
            <el-input
              type="textarea"
              :autosize="{ minRows: 2, maxRows: 4 }"
              placeholder="请输入内容"
              v-model="item.response"
            />
          </div>
        </div>
        <div class="box1">
          <div class="inner-left">内容：</div>
          <div class="inner-right">
            <el-input
              type="textarea"
              :autosize="{ minRows: 2, maxRows: 4 }"
              placeholder="请输入内容"
              v-model="item.content"
            />
          </div>
        </div>
        <div class="box1">
          <div class="inner-left">备注：</div>
          <div class="inner-right">
            <el-input
              type="textarea"
              :autosize="{ minRows: 2, maxRows: 4 }"
              placeholder="请输入内容"
              v-model="item.remark"
            />
          </div>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {
  GetDictWithDetailsLangs,
  GetInterfaceLog,
} from "@/api/logManage/index";
export default {
  data() {
    return {
      tableData: [],
      queryConfig: {
        currentPage: 1,
        pageSize: 20,
        interfaceName: "",
        flag: "",
        url: "",
        method: "",
        totalMilliseconds: 0,
        request: "",
        response: "",
      },
      total: 0,
      form: {
        startTime: this.$moment()
          .subtract(3, "days")
          .format("YYYY-MM-DD 00:00:00"),
        endTime: this.$moment().add(1, "days").format("YYYY-MM-DD 23:59:59"),
      },
      optionsFlag: [
        {
          value: "",
          label: "全部",
        },
      ],
      dialogFormVisible: false,
      multipleSelection: [],
      number: "",
      numberError: "",
    };
  },
  created() {
    this.getFlag("LogLevelFlag");
    this.getTableList();
  },
  methods: {
    btnAction() {
      this.getTableList();
    },
    getFlag(data) {
      let params = { Code: data };
      GetDictWithDetailsLangs(params).then((response) => {
        response.data.dictDetails.forEach((x) => {
          this.optionsFlag.push({ value: x.code, label: x.name });
        });
      });
    },
    getTableList() {
      const params = {
        pageNumber: this.queryConfig.currentPage,
        perPageCount: this.queryConfig.pageSize,
        queryConfig: {
          interfaceName: this.queryConfig.interfaceName,
          url: this.queryConfig.url,
          request: this.queryConfig.request,
          response: this.queryConfig.response,
          method: this.queryConfig.method,
          flag: this.queryConfig.flag,
          content: "",
          totalMilliseconds: this.queryConfig.totalMilliseconds,
          remark: "",
          begin: this.form.startTime,
          end: this.form.endTime,
        },
      };
      this.listLoading = true;
      GetInterfaceLog(params).then((response) => {
        this.total = response.data.totalCount;
        this.tableData = response.data.data;
        this.listLoading = false;
      });
    },
    //   详情
    details() {
      if (this.multipleSelection.length == 0) {
        this.$alert("请选择一条数据！", "标题名称", {
          confirmButtonText: "确定",
        });
      } else {
        this.dialogFormVisible = true;
      }
    },
    //获取表格行数据
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    //分页
    handleCurrentChange(page) {
      this.queryConfig.currentPage = page;
      this.getTableList();
    },
    validateNumber() {
      const regex = /^[0-9]*$/;
      this.numberError = regex.test(this.number) ? "" : "只能输入数字";
    },
  },
};
</script>
<style scoped lang="scss">
.interfacel {
  width: 100%;
}
.el-row {
  margin-bottom: 5px;
}
.interfacel-content {
  display: flex;
  border-radius: 4px;
  min-height: 46px;
  margin-bottom: 10px;
  align-items: center;
}
.table {
  border: 1px solid #e5e9f2;
}
.T1 {
  border: 1px solid #b3d8ff;
}
.pagination-container {
  text-align: center; /* 使分页组件靠右 */
  margin-top: 20px; /* 添加顶部间距 */
}
.el-table .cell {
  max-width: 150px; /* 设置最大宽度 */
  overflow: hidden; /* 隐藏溢出内容 */
  text-overflow: ellipsis; /* 使用省略号 */
  white-space: nowrap; /* 不换行 */
  /* 不使用提示 */
}
.container {
  width: 100%; /* 大 div 宽度 */
  display: flex; /* 使用 Flexbox 布局 */
  flex-wrap: wrap; /* 允许换行 */
  padding: 10px; /* 内边距 */
  box-sizing: border-box; /* 包含内边距在内 */
}
.box {
  width: 50%; /* 小 div 宽度为 50% */
  height: 50px; /* 小 div 高度 */
  margin: 5px 0; /* 上下外边距 */
  display: flex; /* 嵌套使用 Flexbox */
}
.box1 {
  width: 50%; /* 小 div 宽度为 50% */
  height: 100px; /* 小 div 高度 */
  margin: 5px 0; /* 上下外边距 */
  display: flex; /* 嵌套使用 Flexbox */
}
.inner-left {
  width: 40%; /* 内部左侧 div 宽度为 50% */
  height: 100%; /* 高度为 100% */
  display: flex; /* 使用 Flexbox */
  justify-content: flex-end; /* 内容靠右 */
  align-items: center; /* 垂直居中 */
  padding-right: 5px; /* 右侧内边距 */
}
.inner-right {
  width: 50%; /* 内部右侧 div 宽度为 50% */
  height: 100%; /* 高度为 100% */
  display: flex; /* 使用 Flexbox */
  justify-content: flex-start; /* 内容靠左 */
  align-items: center; /* 垂直居中 */
  padding-left: 5px; /* 左侧内边距 */
}
</style>