From 468126a928a899d3b43bd1783e5170ab59852178 Mon Sep 17 00:00:00 2001
From: tjxt <1325917080@qq.com>
Date: Wed, 17 Jul 2024 14:35:04 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9E=E6=97=A5=E5=BF=97=E7=AE=A1?=
 =?UTF-8?q?=E7=90=86=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/system/log.js                      | 100 +++++++++
 src/utils/download.js                      |  26 +++
 src/views/system/log/abnormalLog/index.vue | 240 +++++++++++++++++++++
 src/views/system/log/businessLog/index.vue | 233 ++++++++++++++++++++
 src/views/system/log/logAnalyse/index.vue  | 180 ++++++++++++++++
 src/views/system/log/logCapacity/index.vue |  61 ++++++
 src/views/system/log/systemLog/index.vue   | 234 ++++++++++++++++++++
 7 files changed, 1074 insertions(+)
 create mode 100644 src/api/system/log.js
 create mode 100644 src/utils/download.js
 create mode 100644 src/views/system/log/abnormalLog/index.vue
 create mode 100644 src/views/system/log/businessLog/index.vue
 create mode 100644 src/views/system/log/logAnalyse/index.vue
 create mode 100644 src/views/system/log/logCapacity/index.vue
 create mode 100644 src/views/system/log/systemLog/index.vue

diff --git a/src/api/system/log.js b/src/api/system/log.js
new file mode 100644
index 00000000..cb89e913
--- /dev/null
+++ b/src/api/system/log.js
@@ -0,0 +1,100 @@
+import request from '@/utils/request'
+//查询业务日志列表
+export function getYwLogs(data) {
+    return request({
+      url: '/system/sys/sysLog/getYwLogs',
+      method: 'get',
+      params: data
+    })
+  }
+
+//备份业务日志列表
+export function downloadYwLogs(data) {
+    return request({
+      url: '/system/sys/sysLog/downloadYwLogs',
+      method: 'get',
+      params: data,
+      responseType: 'blob'
+    })
+  }
+
+//查询系统日志列表
+export function getSysLogs(data) {
+  return request({
+    url: '/system/sys/sysLog/getSystemLogs',
+    method: 'get',
+    params: data
+  })
+}
+
+//备份系统日志列表
+export function downloadSysLogs(data) {
+  return request({
+    url: '/system/sys/sysLog/downloadSysLogs',
+    method: 'get',
+    params: data,
+    responseType: 'blob'
+  })
+}
+
+//查询异常日志列表
+export function getErrLogs(data) {
+  return request({
+    url: '/system/sys/sysLog/getErrLogs',
+    method: 'get',
+    params: data
+  })
+}
+
+//备份异常日志列表
+export function downloadErrLogs(data) {
+  return request({
+    url: '/system/sys/sysLog/downloadErrLogs',
+    method: 'get',
+    params: data,
+    responseType: 'blob'
+  })
+}
+
+//获取日志分析数据
+export function getAnalyseData(data) {
+    return request({
+      url: '/system/sys/sysLog/getLogStatistics',
+      method: 'post',
+      data: data
+    })
+  }
+
+
+  //获取日志容量
+export function getLogSize(data) {
+    return request({
+      url: '/system/sys/sysLog/getLogsSet',
+      method: 'post',
+      data
+    })
+  }
+    //设置日志容量
+  export function updateLogSize(data) {
+    return request({
+      url: '/system/sys/sysLog/setLogsSet',
+      method: 'post',
+      data:data
+    })
+  }
+  
+   //添加异常Ip日志
+   export function addLogs(data) {
+    return request({
+      url: '/system/sys/sysLog/addLogs',
+      method: 'post',
+      data:data
+    })
+  }
+  
+
+
+
+
+
+
diff --git a/src/utils/download.js b/src/utils/download.js
new file mode 100644
index 00000000..aba2d534
--- /dev/null
+++ b/src/utils/download.js
@@ -0,0 +1,26 @@
+// 下载blob文件
+export const downloadFile = ({ fileData, fileType, fileName }) => {
+  const blob = new Blob([fileData], {
+    type: fileType
+  })
+  const link = document.createElement('a')
+  link.href = URL.createObjectURL(blob)
+  link.download = fileName
+  link.style.display = 'none'
+  document.body.appendChild(link)
+  link.click()
+  URL.revokeObjectURL(link.href)
+  document.body.removeChild(link)
+}
+
+// 通用a链接下载
+export const downloadFileByUrl = (url) => {
+  const link = document.createElement('a')
+  link.href = url
+  link.setAttribute('download', '')
+  link.style.display = 'none'
+  document.body.appendChild(link)
+  link.click()
+  URL.revokeObjectURL(link.href)
+  document.body.removeChild(link)
+}
diff --git a/src/views/system/log/abnormalLog/index.vue b/src/views/system/log/abnormalLog/index.vue
new file mode 100644
index 00000000..470b83d2
--- /dev/null
+++ b/src/views/system/log/abnormalLog/index.vue
@@ -0,0 +1,240 @@
+<template>
+  <div class="app-container">
+    <div class="filter-container">
+
+      <el-input v-model="listQuery.ip" placeholder="请输入IP地址"
+        style="width: 200px" class="filter-item ml-20" :maxlength="30"
+        @keyup.enter.native="handleFilter"
+      />
+      <el-date-picker
+          v-model="rangeDate"
+          style="width: 300px"
+          class="filter-item ml-20"
+          value-format="yyyy-MM-dd"
+          type="daterange"
+          range-separator="至"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+      />
+      <el-select v-model="listQuery.errLevel" placeholder="请选择异常等级" style="width: 200px" class="filter-item ml-20">
+          <el-option v-for="item in Object.keys(levelList)" :key="item" :value="levelList[item]" :label="levelList[item]" />
+      </el-select>
+      <!-- <el-input v-model="listQuery.errType" placeholder="请输入异常类型"
+        style="width: 200px" class="filter-item" :maxlength="30"
+        @keyup.enter.native="handleFilter"
+      /> -->
+      <el-select v-model="listQuery.errType" placeholder="请选择异常类型" style="width: 200px" class="filter-item ml-20">
+          <el-option v-for="item in Object.keys(typeList)" :key="item" :value="typeList[item]" :label="typeList[item]" />
+      </el-select>
+
+      <el-select v-model="listQuery.logSort" clearable filterable style="width: 200px" class="filter-item ml-20" placeholder="请选择" >
+          <el-option v-for="item in timeList" :key="item.id" :label="item.name" :value="item.id" />
+      </el-select>
+      <el-select v-model="listQuery.logDesc" clearable filterable style="width: 200px" class="filter-item ml-20" placeholder="请选择" >
+          <el-option v-for="item in sortList" :key="item.id" :label="item.name" :value="item.id" />
+      </el-select>
+      <el-button style="margin-left: 20px" class="filter-item" type="primary" @click="handleFilter">
+        查询
+      </el-button>
+      <el-button style="margin-left: 20px" class="filter-item"  @click="resetFilter">
+        重置
+      </el-button>
+      <el-button v-throttle-click="handleBackups" class="filter-item" style="margin-left: 20px" type="warning">
+        备份
+      </el-button>
+    </div>
+
+    <el-table
+      :key="tableKey"
+      v-loading="listLoading"
+      :data="list"
+      border
+      fit
+      highlight-current-row
+      style="width: 100%"
+      :max-height="tableHeight"
+    >
+      <el-table-column label="序号" align="center" width="80" type="index">
+        <template scope="scope">
+          <span>{{ (listQuery.pageNum - 1) * 10 + scope.$index + 1 }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="操作人" align="center" prop="operaUserName">
+        <template slot-scope="scope">
+            <span>{{ scope.row.operaUserName||'/' }}</span>
+        </template>
+
+      </el-table-column>
+      <el-table-column label="操作时间" align="center" prop="operTime" width="180"/>
+      <el-table-column label="IP地址" align="center" prop="ip"/>
+      <el-table-column label="操作模块" align="center" prop="model" >
+        <template slot-scope="scope">
+            <span>{{ scope.row.model||'/' }}</span>
+        </template>
+
+      </el-table-column>
+      <el-table-column label="异常类型" align="center" prop="errType" />
+      <el-table-column label="异常原因" align="center" prop="failureReason"/>
+      <el-table-column label="异常等级" align="center" prop="grade"/>
+      <el-table-column label="事件结果" align="center" prop="fruit"/>
+      <el-table-column label="操作类型" align="center" prop="operaType" />
+      <!--
+      <el-table-column label="操作详情" align="center" prop="operateDetail" />
+
+      <el-table-column label="操作结果" align="center" prop="errLevel">
+        <template slot-scope="{ row }">
+          {{ getStatus(row.errLevel) }}
+        </template>
+      </el-table-column>
+      <el-table-column label="操作参数" align="center" prop="params" />
+      <el-table-column label="操作方法" align="center" prop="method" /> -->
+      <el-table-column label="操作路径" align="center" prop="operUri" />
+      <!-- <el-table-column label="执行时间(ms)" align="center" prop="times" /> -->
+    </el-table>
+
+    <pagination
+      v-show="total > 0"
+      :total="total"
+      :page.sync="listQuery.pageNum"
+      :limit.sync="listQuery.pageSize"
+      @pagination="getList"
+    />
+  </div>
+</template>
+
+<script>
+import Pagination from '@/components/Pagination'
+
+import _ from 'lodash/fp'
+import { downloadFile } from '@/utils/download'
+
+import { getErrLogs,downloadErrLogs } from '@/api/system/log'
+
+
+const levelList = {
+  1:'高',
+  2:'中',
+  3:'低'
+};
+const typeList = {
+  1:'越权访问',
+  2:'IP异常',
+  // 3:'删除',
+  // 4:'查询',
+  // 5:'导出',
+  // 6:'下载',
+  // 7:'备份',
+  // 8:'登录',
+  // 9:'登出'
+};
+
+export default {
+  components: { Pagination },
+  data() {
+    return {
+      tableKey: 0,
+      list: [],
+      levelList: levelList,
+      total: 0,
+      listLoading: false,
+      tableHeight: 650,
+      typeList: typeList,
+      timeList:[{id:1,name:'时间'},{id:2,name:'操作人'},{id:4,name:'ip'},{id:5,name:'异常等级'}],
+      sortList:[{id:1,name:'倒序'},{id:2,name:'升序'}],
+      listQuery: {
+        pageNum: 1,
+        pageSize: 10,
+        errType: '',
+        ip: '',
+        errLevel: '',
+        operTime:'',
+        // logSort:1,
+        logDesc:1,
+      },
+      rangeDate:[],
+    }
+  },
+  created() {
+    // this.getList()
+    // this.getOperate()
+  },
+  mounted() {
+    this.listQuery.operTime = this.getCurrentDate()+' - '+this.getCurrentDate();
+    this.rangeDate = [this.getCurrentDate(),this.getCurrentDate()]
+    this.getList()
+  },
+  methods: {
+    getStatus(val) {
+      return this.levelList[val]
+    },
+    //获取下拉数据
+    getOperate(){
+      // getOperateList().then((response) => {
+      //   this.typeList = response.data
+      // })
+    },
+
+    getList() {
+      this.listLoading = true
+      if(this.rangeDate && this.rangeDate.length>0){
+        this.listQuery.operTime = this.rangeDate[0]+' - '+this.rangeDate[1];
+      }
+      getErrLogs(this.listQuery).then((response) => {
+        this.list = response.rows.map(item => {
+          return item
+        })
+        this.total = response.total
+      })
+      setTimeout(()=>{
+        this.listLoading = false
+      },500)
+    },
+    // 查询
+    handleFilter() {
+      this.listQuery.pageNum = 1
+      this.getList()
+    },
+    //重置
+    resetFilter() {
+      this.listQuery={
+        pageNum: 1,
+        pageSize: 10,
+        errType: '',
+        ip: '',
+        errLevel: '',
+        // logSort:1,
+        logDesc:1,
+      };
+      this.rangeDate=[this.getCurrentDate(),this.getCurrentDate()]
+      this.handleFilter()
+    },
+    // 备份
+    handleBackups() {
+      downloadErrLogs().then(res => {
+        downloadFile({ fileName: '异常日志.sql', fileData: res, fileType: 'text/html;charset=UTF-8'})
+      })
+    },
+    //导出
+    handleExport(){
+
+      // exportCarDetail().then(res => {
+      //   downloadFile({ fileName: '设备详情.xlsx', fileData: res, fileType: 'application/vnd.ms-excel;charset=utf-8' })
+      // })
+    },
+    getCurrentDate() {
+      let now = new Date();
+      let year = now.getFullYear();
+      let month = now.getMonth() + 1;
+      if(month<10){
+        month = '0'+month
+      }
+      let day = now.getDate();
+      if(day<10){
+        day = '0'+day
+      }
+      return year + "-" + month + "-" + day;
+    }
+
+  }
+}
+</script>
diff --git a/src/views/system/log/businessLog/index.vue b/src/views/system/log/businessLog/index.vue
new file mode 100644
index 00000000..46b0d445
--- /dev/null
+++ b/src/views/system/log/businessLog/index.vue
@@ -0,0 +1,233 @@
+<template>
+    <div class="app-container">
+      <div class="filter-container">
+        <el-input v-model="listQuery.operaUserName" placeholder="请输入操作人"
+          style="width: 200px" class="filter-item" :maxlength="30"
+          @keyup.enter.native="handleFilter"
+        />
+        <el-input v-model="listQuery.ip" placeholder="请输入IP地址"
+          style="width: 200px" class="filter-item ml-20" :maxlength="30"
+          @keyup.enter.native="handleFilter"
+        />
+        <el-date-picker
+            v-model="rangeDate"
+            style="width: 300px"
+            class="filter-item ml-20"
+            value-format="yyyy-MM-dd"
+            type="daterange"
+            range-separator="至"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期"
+        />
+        <el-input v-model="listQuery.content" placeholder="请输入操作内容"
+          style="width: 200px" class="filter-item ml-20" :maxlength="30"
+          @keyup.enter.native="handleFilter"
+        />
+        <el-select v-model="listQuery.result" placeholder="请选择事件结果" style="width: 200px" class="filter-item ml-20">
+            <el-option v-for="item in Object.keys(outcomeList)" :key="item" :value="outcomeList[item]" :label="outcomeList[item]" />
+        </el-select>
+        <el-select v-model="listQuery.operateType" placeholder="请选择操作类型" style="width: 200px" class="filter-item ml-20">
+            <el-option v-for="item in Object.keys(operateList)" :key="item" :value="operateList[item]" :label="operateList[item]" />
+        </el-select>
+
+        <el-select v-model="listQuery.logSort" clearable filterable style="width: 200px" class="filter-item ml-20" placeholder="请选择" >
+            <el-option v-for="item in timeList" :key="item.id" :label="item.name" :value="item.id" />
+        </el-select>
+        <el-select v-model="listQuery.logDesc" clearable filterable style="width: 200px" class="filter-item ml-20" placeholder="请选择" >
+            <el-option v-for="item in sortList" :key="item.id" :label="item.name" :value="item.id" />
+        </el-select>
+        <el-button style="margin-left: 20px" class="filter-item" type="primary" @click="handleFilter">
+          查询
+        </el-button>
+        <el-button style="margin-left: 20px" class="filter-item"  @click="resetFilter">
+          重置
+        </el-button>
+        <el-button v-throttle-click="handleBackups" class="filter-item" style="margin-left: 20px" type="warning">
+          备份
+        </el-button>
+      </div>
+
+      <el-table
+        :key="tableKey"
+        v-loading="listLoading"
+        :data="list"
+        border
+        fit
+        highlight-current-row
+        style="width: 100%"
+        :max-height="tableHeight"
+      >
+        <el-table-column label="序号" align="center" width="80" type="index">
+          <template scope="scope">
+            <span>{{ (listQuery.pageNum - 1) * 10 + scope.$index + 1 }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作人" align="center" prop="operaUserName" />
+
+        <el-table-column label="操作时间" align="center" prop="operTime" />
+        <el-table-column label="IP地址" align="center" prop="ip" />
+        <el-table-column label="操作模块" align="center" prop="model" />
+        <el-table-column label="操作类型" align="center" prop="operaType" />
+        <el-table-column label="操作详情" align="center" prop="operateDetail" />
+
+        <el-table-column label="操作结果" align="center" prop="fruit">
+          <template slot-scope="{ row }">
+            {{ row.fruit }}
+          </template>
+        </el-table-column>
+        <el-table-column label="操作参数" align="center" prop="params" />
+        <el-table-column label="操作方法" align="center" prop="method" />
+        <el-table-column label="操作路径" align="center" prop="operUri" />
+        <el-table-column label="执行时间(ms)" align="center" prop="times" />
+      </el-table>
+
+      <pagination
+        v-show="total > 0"
+        :total="total"
+        :page.sync="listQuery.pageNum"
+        :limit.sync="listQuery.pageSize"
+        @pagination="getList"
+      />
+    </div>
+  </template>
+
+  <script>
+  import Pagination from '@/components/Pagination'
+
+  import _ from 'lodash/fp'
+  import { downloadFile } from '@/utils/download'
+
+  import { getYwLogs,downloadYwLogs } from '@/api/system/log'
+
+
+  const outcomeList = {
+    1:'成功',
+    2:'失败'
+  };
+  const operateList = {
+    1:'新增',
+    2:'修改',
+    3:'删除',
+    4:'查询',
+    5:'导出',
+    6:'下载',
+    7:'备份',
+    8:'登录',
+    9:'登出'
+  };
+
+  export default {
+    components: { Pagination },
+    data() {
+      return {
+        tableKey: 0,
+        list: [],
+        outcomeList: outcomeList,
+        total: 0,
+        listLoading: false,
+        tableHeight: 650,
+        operateList: operateList,
+        timeList:[{id:1,name:'时间'},{id:2,name:'操作人'},{id:3,name:'操作模块'},{id:4,name:'ip'},],
+        sortList:[{id:1,name:'倒序'},{id:2,name:'升序'}],
+        listQuery: {
+          pageNum: 1,
+          pageSize: 10,
+          operaUserName: '',
+          ip: '',
+          content:'',
+          result: '',
+          operTime:'',
+          operateType: '',
+          logSort:1,
+          logDesc:1,
+        },
+        rangeDate:[],
+      }
+    },
+    created() {
+      // this.getList()
+      // this.getOperate()
+    },
+    mounted() {
+      this.listQuery.operTime = this.getCurrentDate()+' - '+this.getCurrentDate();
+      this.rangeDate = [this.getCurrentDate(),this.getCurrentDate()]
+      this.getList()
+    },
+    methods: {
+      getStatus(val) {
+        return this.outcomeList[val]
+      },
+      //获取下拉数据
+      getOperate(){
+        // getOperateList().then((response) => {
+        //   this.operateList = response.data
+        // })
+      },
+
+      getList() {
+        this.listLoading = true
+        if(this.rangeDate && this.rangeDate.length>0){
+          this.listQuery.operTime = this.rangeDate[0]+' - '+this.rangeDate[1];
+        }
+        getYwLogs(this.listQuery).then((response) => {
+          this.list = response.rows.map(item => {
+            return item
+          })
+          this.total = response.total
+        })
+        setTimeout(()=>{
+        this.listLoading = false
+      },500)
+      },
+      // 查询
+      handleFilter() {
+        this.listQuery.pageNum = 1
+        this.getList()
+      },
+      //重置
+      resetFilter() {
+        this.listQuery={
+          pageNum: 1,
+          pageSize: 10,
+          operaUserName: '',
+          ip: '',
+
+          content:'',
+          result: '',
+          operateType: '',
+          logSort:1,
+          logDesc:1,
+        };
+        this.rangeDate=[this.getCurrentDate(),this.getCurrentDate()]
+        this.handleFilter()
+      },
+      // 备份
+      handleBackups() {
+        downloadYwLogs().then(res => {
+          downloadFile({ fileName: '业务日志.sql', fileData: res, fileType: 'text/html;charset=UTF-8'})
+        })
+      },
+      //导出
+      handleExport(){
+
+        // exportCarDetail().then(res => {
+        //   downloadFile({ fileName: '设备详情.xlsx', fileData: res, fileType: 'application/vnd.ms-excel;charset=utf-8' })
+        // })
+      },
+      getCurrentDate() {
+        let now = new Date();
+        let year = now.getFullYear();
+        let month = now.getMonth() + 1;
+        if(month<10){
+          month = '0'+month
+        }
+        let day = now.getDate();
+        if(day<10){
+          day = '0'+day
+        }
+        return year + "-" + month + "-" + day;
+      }
+
+    }
+  }
+  </script>
diff --git a/src/views/system/log/logAnalyse/index.vue b/src/views/system/log/logAnalyse/index.vue
new file mode 100644
index 00000000..b3540337
--- /dev/null
+++ b/src/views/system/log/logAnalyse/index.vue
@@ -0,0 +1,180 @@
+<template>
+    <div class="app-container">
+      <div class="filter-container">
+        <el-date-picker
+            v-model="rangeDate"
+            style="width: 300px"
+            class="filter-item ml-20"
+            value-format="yyyy-MM-dd"
+            type="daterange"
+            range-separator="至"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期"
+        />
+        <el-radio-group v-model="listQuery.type" class="ml-20">
+            <el-radio label="1">日志类型</el-radio>
+            <el-radio label="2">操作类型</el-radio>
+        </el-radio-group>
+        <el-button style="margin-left: 20px" class="filter-item" type="primary" @click="handleFilter">
+          查询
+        </el-button>
+        <el-button style="margin-left: 20px" class="filter-item"  @click="resetFilter">
+          重置
+        </el-button>
+        <span style="margin-left: 40px;">总数:{{sumNum}}</span>
+        <span class="ml-20">成功:{{successNum}}</span>
+        <span class="ml-20">失败:{{failedNum}}</span>
+      </div>
+      <div style="width: 95%;height:650px;">
+        <h3 style="text-align: center;">日志类型</h3>
+        <div id="eChartBox" style="width: 60%;height:90%;margin: 0 auto;"></div>
+      </div>
+
+    </div>
+  </template>
+
+  <script>
+  import * as echarts from 'echarts';
+  import { getAnalyseData } from '@/api/system/log'
+  export default {
+    data() {
+      return {
+        tableKey: 0,
+        list: [],
+        total: 0,
+        listLoading: false,
+        listQuery: {
+          operTime:'',
+          type:'1',
+        },
+        rangeDate:[],
+        echartData:[
+            {
+            value: 45,
+            name: "CARD",
+            },
+            {
+            value: 25,
+            name: "SSD",
+            },
+            {
+            value: 15,
+            name: "ADD",
+            },
+            {
+            value: 8,
+            name: "CBC",
+            },
+            {
+            value: 7,
+            name: "FLASH",
+            },
+        ],
+        sumNum:0,
+        successNum:0,
+        failedNum:0,
+      }
+    },
+    mounted() {
+      this.listQuery.operTime = this.getCurrentDate()+' - '+this.getCurrentDate();
+      this.rangeDate = [this.getCurrentDate(),this.getCurrentDate()]
+      this.getData()
+
+    },
+    methods: {
+        getData() {
+
+          if(this.rangeDate && this.rangeDate.length>0){
+            this.listQuery.operTime = this.rangeDate[0]+' - '+this.rangeDate[1];
+          }
+          getAnalyseData(this.listQuery).then((response) => {
+            this.sumNum = response.data.allNum||0
+            this.successNum = response.data.sNum||0
+            this.failedNum= response.data.eNum||0
+            this.echartData = response.data.list.map((item,index)=>{
+              let obj = {
+                name:item,
+                value:response.data.nums[index]
+              }
+              return obj
+            });
+            console.log(this.echartData)
+            this.getInitData()
+          })
+        },
+        // 查询
+        handleFilter() {
+            this.listQuery.pageNum = 1
+            this.getData()
+        },
+        //重置
+        resetFilter() {
+            this.listQuery={
+                rangeDate:[],
+                type:'1',
+            },
+            this.handleFilter()
+        },
+        getInitData() {
+            let option = {
+                tooltip: {
+                    trigger: "item",
+                    formatter: "{a} <br/>{b} : {c} ({d}%)",
+                },
+                series: [
+                    {
+                    name: "日志分析",
+                    type: "pie",
+                    radius: "68%",
+                    center: ["50%", "50%"],
+                    clockwise: false,
+                    data: this.echartData,
+                    label: {
+                        normal: {
+                        textStyle: {
+                            color: "#999",
+                            fontSize: 14,
+                        },
+                        },
+                    },
+                    labelLine: {
+                        normal: {
+                        show: false,
+                        },
+                    },
+                    itemStyle: {
+                        normal: {
+                        borderWidth: 4,
+                        borderColor: "#ffffff",
+                        },
+                        emphasis: {
+                        borderWidth: 0,
+                        shadowBlur: 10,
+                        shadowOffsetX: 0,
+                        shadowColor: "rgba(0, 0, 0, 0.5)",
+                        },
+                    },
+                    },
+                ],
+                color: ["#00acee", "#52cdd5", "#79d9f1", "#a7e7ff", "#c8efff"],
+                backgroundColor: "#fff",
+            };
+            let myCharts = echarts.init(document.querySelector('#eChartBox'));
+            myCharts.setOption(option)
+        },
+        getCurrentDate() {
+          let now = new Date();
+          let year = now.getFullYear();
+          let month = now.getMonth() + 1;
+          if(month<10){
+            month = '0'+month
+          }
+          let day = now.getDate();
+          if(day<10){
+            day = '0'+day
+          }
+          return year + "-" + month + "-" + day;
+        }
+    }
+  }
+  </script>
diff --git a/src/views/system/log/logCapacity/index.vue b/src/views/system/log/logCapacity/index.vue
new file mode 100644
index 00000000..375ef4e6
--- /dev/null
+++ b/src/views/system/log/logCapacity/index.vue
@@ -0,0 +1,61 @@
+<template>
+    <div class="app-container">
+        <el-form :model="capacityForm"
+            ref="capacityForm"
+            size="small" :inline="true"
+            label-width="100px">
+
+            <el-form-item label="日志容量配置" prop="logCapacity">
+                <el-input
+                    v-model="capacityForm.logCapacity"
+                    placeholder="请输入关键字"
+                    clearable
+                    style="width: 240px"
+                />
+                <span style="margin-left: 10px;">MB</span>
+            </el-form-item>
+    
+    
+            <el-button type="primary" size="mini" style="margin-left: 20px;" @click="submit">确定</el-button
+          >
+        </el-form>
+    </div>
+  </template>
+  
+  <script>
+  import { getLogSize,updateLogSize } from '@/api/system/log'
+  export default {
+    data() {
+      return {
+        capacityForm:{
+            logCapacity:1024
+        }
+      }
+    },
+    created() {
+      this.getSize()
+    },
+    methods: {
+      getSize(){
+        getLogSize().then((response) => {
+          this.capacityForm.logCapacity = response.data;
+        })
+      },
+      submit(){
+        updateLogSize(Number(this.capacityForm.logCapacity)).then((response) => {
+          if(response.code==200){
+            this.$message({
+              showClose: true,
+              message: response.msg,
+              type: 'success',
+              duration: 2000
+            })
+          }
+        })
+      },
+      
+ 
+    }
+  }
+  </script>
+  
\ No newline at end of file
diff --git a/src/views/system/log/systemLog/index.vue b/src/views/system/log/systemLog/index.vue
new file mode 100644
index 00000000..e6034f35
--- /dev/null
+++ b/src/views/system/log/systemLog/index.vue
@@ -0,0 +1,234 @@
+<template>
+  <div class="app-container">
+    <div class="filter-container">
+      <el-input v-model="listQuery.operaUserName" placeholder="请输入操作人"
+        style="width: 200px" class="filter-item" :maxlength="30"
+        @keyup.enter.native="handleFilter"
+      />
+      <el-input v-model="listQuery.ip" placeholder="请输入IP地址"
+        style="width: 200px" class="filter-item ml-20" :maxlength="30"
+        @keyup.enter.native="handleFilter"
+      />
+      <el-date-picker
+          v-model="rangeDate"
+          style="width: 300px"
+          class="filter-item ml-20"
+          value-format="yyyy-MM-dd"
+          type="daterange"
+          range-separator="至"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+      />
+      <el-input v-model="listQuery.content" placeholder="请输入操作内容"
+        style="width: 200px" class="filter-item ml-20" :maxlength="30"
+        @keyup.enter.native="handleFilter"
+      />
+      <el-select v-model="listQuery.result" placeholder="请选择事件结果" style="width: 200px" class="filter-item ml-20">
+          <el-option v-for="item in Object.keys(outcomeList)" :key="item" :value="outcomeList[item]" :label="outcomeList[item]" />
+      </el-select>
+      <el-select v-model="listQuery.operateType" placeholder="请选择操作类型" style="width: 200px" class="filter-item ml-20">
+          <el-option v-for="item in Object.keys(operateList)" :key="item" :value="operateList[item]" :label="operateList[item]" />
+      </el-select>
+
+      <el-select v-model="listQuery.logSort" clearable filterable style="width: 200px" class="filter-item ml-20" placeholder="请选择" >
+          <el-option v-for="item in timeList" :key="item.id" :label="item.name" :value="item.id" />
+      </el-select>
+      <el-select v-model="listQuery.logDesc" clearable filterable style="width: 200px" class="filter-item ml-20" placeholder="请选择" >
+          <el-option v-for="item in sortList" :key="item.id" :label="item.name" :value="item.id" />
+      </el-select>
+      <el-button style="margin-left: 20px" class="filter-item" type="primary" @click="handleFilter">
+        查询
+      </el-button>
+      <el-button style="margin-left: 20px" class="filter-item"  @click="resetFilter">
+        重置
+      </el-button>
+      <el-button v-throttle-click="handleBackups" class="filter-item" style="margin-left: 20px" type="warning">
+        备份
+      </el-button>
+    </div>
+
+    <el-table
+      :key="tableKey"
+      v-loading="listLoading"
+      :data="list"
+      border
+      fit
+      highlight-current-row
+      style="width: 100%"
+      :max-height="tableHeight"
+    >
+      <el-table-column label="序号" align="center" width="80" type="index">
+        <template scope="scope">
+          <span>{{ (listQuery.pageNum - 1) * 10 + scope.$index + 1 }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="操作人" align="center" prop="operaUserName" />
+
+      <el-table-column label="操作时间" align="center" prop="operTime" />
+      <el-table-column label="IP地址" align="center" prop="ip" />
+      <el-table-column label="操作模块" align="center" prop="model" />
+      <el-table-column label="操作类型" align="center" prop="operaType" />
+      <el-table-column label="操作详情" align="center" prop="operateDetail" />
+
+      <el-table-column label="操作结果" align="center" prop="fruit">
+        <template slot-scope="{ row }">
+          {{ row.fruit }}
+        </template>
+      </el-table-column>
+      <el-table-column label="操作参数" align="center" prop="params" />
+      <el-table-column label="操作方法" align="center" prop="method" />
+      <el-table-column label="操作路径" align="center" prop="operUri" />
+      <el-table-column label="执行时间(ms)" align="center" prop="times" />
+    </el-table>
+
+    <pagination
+      v-show="total > 0"
+      :total="total"
+      :page.sync="listQuery.pageNum"
+      :limit.sync="listQuery.pageSize"
+      @pagination="getList"
+    />
+  </div>
+</template>
+
+<script>
+import Pagination from '@/components/Pagination'
+
+import _ from 'lodash/fp'
+import { downloadFile } from '@/utils/download'
+
+import { getSysLogs,downloadSysLogs } from '@/api/system/log'
+
+
+const outcomeList = {
+  1:'成功',
+  2:'失败'
+};
+const operateList = {
+  1:'新增',
+  2:'修改',
+  3:'删除',
+  4:'查询',
+  5:'导出',
+  6:'下载',
+  7:'备份',
+  8:'登录',
+  9:'登出'
+};
+
+export default {
+  components: { Pagination },
+  data() {
+    return {
+      tableKey: 0,
+      list: [],
+      outcomeList: outcomeList,
+      total: 0,
+      listLoading: false,
+      tableHeight: 650,
+      operateList: operateList,
+      timeList:[{id:1,name:'时间'},{id:2,name:'操作人'},{id:3,name:'操作模块'},{id:4,name:'ip'},],
+      sortList:[{id:1,name:'倒序'},{id:2,name:'升序'}],
+      listQuery: {
+        pageNum: 1,
+        pageSize: 10,
+        operaUserName: '',
+        ip: '',
+        content:'',
+        result: '',
+        operTime:'',
+        operateType: '',
+        logSort:1,
+        logDesc:1,
+      },
+      rangeDate:[],
+    }
+  },
+  created() {
+    // this.getList()
+    // this.getOperate()
+  },
+  mounted() {
+    this.listQuery.operTime = this.getCurrentDate()+' - '+this.getCurrentDate();
+    this.rangeDate = [this.getCurrentDate(),this.getCurrentDate()]
+    this.getList()
+  },
+  methods: {
+    getStatus(val) {
+      return this.outcomeList[val]
+    },
+    //获取下拉数据
+    getOperate(){
+      // getOperateList().then((response) => {
+      //   this.operateList = response.data
+      // })
+    },
+
+    getList() {
+      this.listLoading = true
+      if(this.rangeDate && this.rangeDate.length>0){
+        this.listQuery.operTime = this.rangeDate[0]+' - '+this.rangeDate[1];
+      }
+      getSysLogs(this.listQuery).then((response) => {
+        this.list = response.rows.map(item => {
+          return item
+        })
+        this.total = response.total
+      })
+      setTimeout(()=>{
+        this.listLoading = false
+      },500)
+    },
+    // 查询
+    handleFilter() {
+      this.listQuery.pageNum = 1
+      this.getList()
+    },
+    //重置
+    resetFilter() {
+      this.listQuery={
+        pageNum: 1,
+        pageSize: 10,
+        operaUserName: '',
+        ip: '',
+
+        content:'',
+        result: '',
+        operateType: '',
+        logSort:1,
+        logDesc:1,
+      };
+      this.rangeDate=[this.getCurrentDate(),this.getCurrentDate()]
+      this.handleFilter()
+    },
+    // 备份
+    handleBackups() {
+      downloadSysLogs().then(res => {
+          downloadFile({ fileName: '系统日志.sql', fileData: res, fileType: 'text/html;charset=UTF-8' })
+      })
+
+    },
+    //导出
+    handleExport(){
+
+      // exportCarDetail().then(res => {
+      //   downloadFile({ fileName: '设备详情.xlsx', fileData: res, fileType: 'application/vnd.ms-excel;charset=utf-8' })
+      // })
+    },
+    getCurrentDate() {
+      let now = new Date();
+      let year = now.getFullYear();
+      let month = now.getMonth() + 1;
+      if(month<10){
+        month = '0'+month
+      }
+      let day = now.getDate();
+      if(day<10){
+        day = '0'+day
+      }
+      return year + "-" + month + "-" + day;
+    }
+
+  }
+}
+</script>