U logs目录

he wei

2024-11-01 a96fc40cabd6bb44d799c61551aaaefd9cb4e839

U logs目录

 .gitignore

@@ -1,5 +1,4 @@
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*

 src/views/logs/api.js

New file
@@ -0,0 +1,25 @@
import axios from "@/assets/js/axios";

/**
 * 事件类型-查询
 */
export const getTypes = () => {
  return axios({
    method: "GET",
    url: "operationLog/getTypes",
  });
};


/**
 * 事件类型-查询
 */
export const getLogList = (data) => {
  return axios({
    method: "POST",
    url: "operationLog/getPage",
    data
  });
};



 src/views/logs/sysLogs.vue

New file
@@ -0,0 +1,273 @@
<script setup name="sysLogs">
import { ref, reactive, onMounted } from "vue";
import { getTypes, getLogList } from "./api";
import { getAllUsers } from "../user/api";
import { exportToCSV } from "@/assets/js/tools/exportCsv.js";

const headers = [
  {
    prop: "type2Name",
    label: "事件类型",
    width: "",
  },
  {
    prop: "msg",
    label: "事件内容",
    width: "",
  },
  {
    prop: "detail",
    label: "事件详情",
    width: "",
  },
  {
    prop: "createTime",
    label: "事件时间",
    width: "",
  },
  {
    prop: "userName",
    label: "操作人",
    width: "",
  },
];
const pageCurr = ref(1);
const pageSize = ref(10);
const dateStart = ref();
const dateEnd = ref();

const total = ref(0);
const datas = reactive({
  tableData: [],
  userInfo: {},
  users: [],
  eventList: [],
});
const devType = ref();
const eventType = ref(0);
const userId = ref(0);
const alarmId = ref();
const alarmList = reactive([]);

// 展示数据数量
function handleSizeChange(val) {
  pageSize.value = val;
  getList();
}
// 翻页
function handleCurrentChange(val) {
  pageCurr.value = val;
  getList();
}

function getList() {
  let params = {
    pageNum: pageCurr.value,
    pageSize: pageSize.value,
    endTime: dateEnd.value ? dateEnd.value : undefined,
    startTime: dateStart.value ? dateStart.value : undefined,
    userId: userId.value ? userId.value : undefined,
  };

  getLogList(params)
    .then((res) => {
      let { code, data } = res.data;
      let _list = [];
      let _total = 0;
      if (code && data) {
        console.log(data);
        _list = data.list;
        _total = data.total;
      }
      datas.tableData = _list;
      total.value = _total;
    })
    .catch((err) => {
      console.log(err);
    });
}

function getTypelist() {
  getTypes()
    .then((res) => {
      let { code, data } = res.data;
      let _list = [];
      if (code && data) {
        console.log(data);
        Object.keys(data).forEach((v) => {
          data[v].forEach((vv) => {
            _list.push({ label: vv.type2Name, value: vv.type2 });
          });
        });
      }
      datas.eventList = _list;
    })
    .catch((err) => {
      console.log(err);
    });
}
function getUserList() {
  getAllUsers()
    .then((res) => {
      let { code, data, data2 } = res.data;
      let _list = [];
      if (code && data) {
        _list = data2.map((v) => ({ label: v.uname, key: v.uid }));
      }
      datas.users = _list;
    })
    .catch((err) => {
      console.log(err);
    });
}

function getCsv() {
  exportToCSV(headers, datas.tableData, "hh");
}
onMounted(() => {
  getTypelist();
  getUserList();
  getList();
});
</script>

<template>
  <div class="page">
    <div class="filter">
      <div class="label">事件类型</div>
      <div class="content select-wrap">
        <el-select v-model="eventType" class="yc-select" placeholder="">
          <el-option label="全部" :value="0" />
          <el-option
            v-for="ev in datas.eventList"
            :key="ev.id"
            :label="ev.label"
            :value="ev.value"
          />
        </el-select>
      </div>
      <div class="label">用户</div>
      <div class="content select-wrap">
        <el-select v-model="userId" class="yc-select" placeholder="">
          <el-option label="全部" :value="0" />
          <el-option
            v-for="user in datas.users"
            :key="user.key"
            :label="user.label"
            :value="user.key"
          />
        </el-select>
      </div>
      <div class="label">事件发生时间</div>
      <div class="content">
        <el-date-picker
          class="yc-datepicker"
          v-model="dateStart"
          type="date"
          placeholder="请选择"
        />
        至
        <el-date-picker
          class="yc-datepicker"
          v-model="dateEnd"
          type="date"
          placeholder="请选择"
        />
      </div>
      <div class="btn" @click="getCsv">导出</div>
      <div class="btn" @click="getList">查询</div>
    </div>
    <div class="p-content">
      <!-- 用户列表 -->
      <div class="table-wrap posR">
        <div class="pos-full">
          <el-table
            class="yc-table"
            stripe
            height="100%"
            size="small"
            :data="datas.tableData"
            style="width: 100%"
          >
            <el-table-column
              type="index"
              label="序号"
              width="80"
            ></el-table-column>
            <el-table-column
              v-for="header in headers"
              :key="header.prop"
              :prop="header.prop"
              :label="header.label"
              :min-width="header.width"
              align="center"
            ></el-table-column>
          </el-table>
        </div>
      </div>
      <!-- 底部 -->
      <!-- 底部分页 -->
      <el-pagination
        class="yc-pagination"
        :current-page="pageCurr"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[10, 20, 30, 50, 100]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>
  </div>
</template>

<style scoped lang="less">
.page {
  height: 100%;
  padding: 0 8px;
  display: flex;
  flex-direction: column;
  .filter {
    display: grid;
    grid-template-rows: 1fr;
    // grid-template-columns: 7em 1fr 7em 2fr 5em 5em;
    grid-template-columns: repeat(2, 7em 1fr) 7em 2fr 5em 5em;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 10px;
    // place-items: end;
    .label {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      &::after {
        content: ":";
      }
    }
    .content {
      display: flex;
      align-items: center;
    }
    .btn {
      background: #0ff;
      border-radius: 6px;
      color: #333;
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
    }
  }
  .p-content {
    flex: 1;
    margin-top: 4px;
    display: flex;
    flex-direction: column;
    .table-wrap {
      flex: 1;
      margin-top: 6px;
      margin-bottom: 6px;
    }
  }
}
</style>