完善日志监控模块, 需要配合valog-server使用

zhangzengfei

2022-02-22 5bd66255ccd4e995337b9039094964d2677db4cc

 src/pages/syslog/index/App.vue

@@ -2,7 +2,7 @@
  <div class="s-log-management">
    <div class="top">
      <!-- <b>日志类型:</b>
      <el-select v-model="logValue" placeholder="请选择" size="small">
      <el-select v-model="logLevel" placeholder="请选择" size="small">
        <el-option
          v-for="item in logOptions"
          :key="item.value"
@@ -18,25 +18,12 @@
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        value-format="yyyy-MM-dd HH:mm:ss"
        style="width: 244px;"
      ></el-date-picker>
      <b>模块:</b>
      <el-select v-model="logValue" placeholder="请选择" size="mini">
        <el-option
          v-for="item in logOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        ></el-option>
      </el-select>
      <b>功能:</b>
      <el-select v-model="logValue" placeholder="请选择" size="mini">
        <el-option
          v-for="item in logOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        ></el-option>
      <b>日志级别:</b>
      <el-select v-model="logLevel" placeholder="请选择" size="mini">
        <el-option v-for="item in logOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
      </el-select>
      <el-input
        v-model="searchValue"
@@ -45,9 +32,9 @@
        style="width: 150px;margin: 0px 10px;"
        size="mini"
      ></el-input>
      <el-button type="primary" size="mini">搜索</el-button>
      <el-button type="danger" size="mini" @click="delSelected">批量删除</el-button>
      <el-button type="text" size="mini" style="font-size: 13px;font-weight: 600;">导出</el-button>
      <el-button type="primary" size="mini" @click="getVaSystemLog">搜索</el-button>
      <!-- <el-button type="danger" size="mini" @click="delSelected">批量删除</el-button> -->
      <!-- <el-button type="text" size="mini" style="font-size: 13px;font-weight: 600;">导出</el-button> -->
    </div>
    <div class="foot-table s-table">
      <el-table
@@ -55,123 +42,116 @@
        highlight-current-row
        :data="tableData"
        style="width: 100%"
        :header-cell-style="{background:'#f8f8f8',color:'#222222'}"
        :header-cell-style="{ background: '#f8f8f8', color: '#222222' }"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column :align="'center'" sortable prop="index" label="序号"></el-table-column>
        <el-table-column :align="'center'" sortable prop="logtype" label="日志类型"></el-table-column>
        <el-table-column :align="'center'" sortable prop="username" label="用户名"></el-table-column>
        <el-table-column :align="'center'" sortable prop="ipaddress" label="IP地址"></el-table-column>
        <el-table-column :align="'center'" sortable prop="operation" label="操作功能"></el-table-column>
        <el-table-column :align="'center'" sortable prop="operatetime" label="操作时间"></el-table-column>
        <el-table-column :align="'center'" sortable prop="operateinfo" label="操作信息"></el-table-column>
        <el-table-column label="操作" :align="'center'">
        <el-table-column :align="'center'" prop="createDate" label="创建日期" width="200px"></el-table-column>
        <el-table-column :align="'center'" prop="procName" label="日志模块" width="100px"></el-table-column>
        <el-table-column :align="'center'" prop="level" label="日志等级" width="100px">
          <template slot-scope="scope">
            <el-button
              type="text"
              style="color: red;font-size:16px"
              @click="handleDelete(scope.$index, scope.row)"
              icon="el-icon-delete"
            ></el-button>
            <span>{{ scope.row.level | leverFilter }}</span>
          </template>
        </el-table-column>
        <el-table-column :align="'left'" prop="info" label="日志内容"></el-table-column>
      </el-table>
    </div>

    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="page"
      :page-sizes="[15, 30, 50, 100]"
      :page-size="15"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
  </div>
</template>

<script>
import { querySystemLog } from "@/api/log"
let logLevels = [
  {
    value: -1,
    label: "全部"
  },
  {
    value: 0,
    label: "错误"
  },
  {
    value: 1,
    label: "警告"
  },
  {
    value: 2,
    label: "信息"
  }
]
export default {
  data() {
    return {
      tableData: [
        {
          index: "1",
          logtype: "异常",
          username: "admin",
          ipaddress: "192.168.10.110",
          operation: "添加摄像机",
          operatetime: "2019-5-31 16:38:21",
          operateinfo: "添加操作"
        },
        {
          index: "2",
          logtype: "信息",
          username: "admin",
          ipaddress: "192.168.10.108",
          operation: "删除摄像机",
          operatetime: "2019-5-31 16:38:21",
          operateinfo: "添加操作"
        },
        {
          index: "3",
          logtype: "操作",
          username: "admin",
          ipaddress: "192.168.10.110",
          operation: "添加摄像机",
          operatetime: "2019-5-31 16:38:21",
          operateinfo: "添加操作"
        },
        {
          index: "4",
          logtype: "异常",
          username: "admin",
          ipaddress: "192.168.10.110",
          operation: "添加摄像机",
          operatetime: "2019-5-31 16:38:21",
          operateinfo: "添加操作"
        },
        {
          index: "5",
          logtype: "异常",
          username: "admin",
          ipaddress: "192.168.10.110",
          operation: "删除摄像机",
          operatetime: "2019-5-31 16:38:21",
          operateinfo: "添加操作"
        },
        {
          index: "6",
          logtype: "异常",
          username: "admin",
          ipaddress: "192.168.10.110",
          operation: "添加摄像机",
          operatetime: "2019-5-31 16:38:21",
          operateinfo: "添加操作"
        }
      ],
      tableData: [],
      multipleSelection: [],
      logOptions: [
        {
          value: "全部类型",
          label: "全部类型"
        },
        {
          value: "其他类型",
          label: "其他类型"
      logOptions: logLevels,
      logLevel: -1,
      timeValue: "",
      searchValue: "",
      page: 1,
      pageSize: 15,
      total: 0
    }
  },
  filters: {
    leverFilter(val) {
      for (let i = 0; i < logLevels.length; i++) {
        if (val == logLevels[i].value) {
          return logLevels[i].label
        }
      ],
      logValue: "全部类型",
      timeValue: [
        new Date(2000, 10, 10, 10, 10),
        new Date(2000, 10, 11, 10, 10)
      ],
      searchValue: ""
    };
      }
    }
  },
  mounted() {
    this.getVaSystemLog()
  },
  methods: {
    handleDelete(index, row) {
      console.log(index, row);
      console.log(index, row)
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
      this.multipleSelection = val
    },
    delSelected() {
      console.log(this.multipleSelection);
      console.log(this.multipleSelection)
    },
    handleSizeChange(val) {
      this.pageSize = val
      this.getVaSystemLog()
    },
    handleCurrentChange(val) {
      this.page = val
      this.getVaSystemLog()
    },
    getVaSystemLog() {
      let body = {
        FuzzySearch: this.searchValue,
        level: this.logLevel,
        page: this.page,
        pageSize: this.pageSize
      }
      if (!!this.timeValue && this.timeValue.length == 2) {
        body.timeStart = this.timeValue[0]
        body.timeEnd = this.timeValue[1]
      }

      querySystemLog(body).then((res) => {
        this.tableData = res.data.list
        this.total = res.data.total
      })
    }
  }
};
}
</script>
<style lang="scss">
.s-log-management {
@@ -181,7 +161,7 @@
  box-sizing: border-box;
  .top {
    width: 100%;
    

    margin-bottom: 20px;
    overflow-y: auto;
    min-width: 1156px;