暂存

lxl

2022-09-20 a1e0209b43af094aa3f6687a2b2df8aa5a1c8418

暂存

 src/assets/lang/en.js

@@ -29,8 +29,11 @@
      username: 'username',
      ownedSystem: 'ownedSystem',
      operationType: 'operationType',
      time: 'time',
      ip: 'ip',
      date: 'date',
      startDate: 'startdate',
      endDate: 'enddate',
      to: 'to',
      ip: 'The client IP',
      search: 'search',
      reset: 'reset',
      all: 'all',
@@ -40,7 +43,11 @@
      edit: "edit",
      query: "query",
      please: 'please choose',

      usernameInfo: 'username,Chinese name,or phonetic initial',
      index: 'index',
      largeModuleName: 'largeModuleName',
      smallModuleName: 'smallModuleName',
      resourceName: 'resourceName',
    },
    userManagement: 'User Management',
    systemLayout: 'System Layout',
@@ -54,6 +61,7 @@
    logLog: 'ConLog',
    operationLog: 'Operation Log',
    databaseMonitoring: 'Database Monitoring',
    blackwhiteList: "Black/White List"
  },
  synthesis: {
    synthesis: 'Comprehensive Display',

 src/assets/lang/zh.js

@@ -29,8 +29,11 @@
      username: '用户名称',
      ownedSystem: '所属系统',
      operationType: '操作类型',
      time: '用户名称',
      ip: '用户名称',
      date: '时间',
      startDate: '开始时间',
      endDate: '结束时间',
      to: 'zhi',
      ip: '客户端IP',
      search: '搜索',
      reset: '重置',
      all: '全部',
@@ -40,6 +43,11 @@
      edit: "修改",
      query: "查询",
      please: '请选择',
      usernameInfo: '输入用户名、中文名或拼音首字母查询',
      index: '序号',
      largeModuleName: '大模块名称',
      smallModuleName: '小模块名称',
      resourceName: '资源名称',
    },
    userManagement: '用户管理',
    systemLayout: '系统配置',
@@ -53,6 +61,24 @@
    logLog: '登录日志',
    operationLog: '操作日志',
    databaseMonitoring: '数据库监控',
    blackwhiteList: "黑/白名单",
    BWL: {
      blackList: "黑名单",
      whiteList: "白名单",
      blackListIP: '黑名单IP',
      blackListIPInfo: '输入IP查询',
      IPState: 'IP状态',
      all: '全部',
      validity: '生效',
      invalidity: '失效',
      interceptionCycle: '拦截周期',
      seconds: '秒',
      mins: '分',
      hours: '时',
      interceptionNumber: '拦截次数',
      change: '修改',
      index:"序号",
    }
  },
  synthesis: {
    synthesis: '综合展示',

 src/components/navMenu.vue

@@ -102,6 +102,9 @@
              <el-menu-item index="databaseMonitoring">{{
                $t("operatManage.databaseMonitoring")
              }}</el-menu-item>
              <el-menu-item index="blackwhiteList">{{
                $t("operatManage.blackwhiteList")
              }}</el-menu-item>
            </el-submenu>
          </el-submenu>


 src/router/index.js

@@ -11,7 +11,9 @@
import authorityManagement from "@/views/maintenance/authorityManagement.vue"; //权限管理
import safetyManagement from "@/views/maintenance/safetyManagement.vue"; //安全管理
import operationLog from "@/views/maintenance/operationLog.vue"; //操作日志
import eventlogManage from "@/views/maintenance/eventlogManage.vue"; //登录日志
import eventlogManage from "@/views/maintenance/eventlogManage.vue"; //事件日志管理
import blackwhiteList from "@/views/maintenance/blackwhiteList.vue"; //登录日志
import logLog from "@/views/maintenance/logLog.vue"; //登录日志
import systemMonitoring from "@/views/maintenance/systemMonitoring.vue"; //系统监控
import databaseMonitoring from "@/views/maintenance/databaseMonitoring.vue"; //数据库监控
import parameterConfiguration from "@/views/maintenance/parameterConfiguration.vue"; //参数配置
@@ -209,7 +211,25 @@
        component: eventlogManage,
        name: "eventlogManage",
        meta: {
          title: "登录日志",
          title: "事件日志管理",
          requireAuth: true, // æ ‡è¯†è¯¥è·¯ç”±æ˜¯å¦éœ€è¦ç™»å½•
        },
      },
      {
        path: "/logLog",
        component: logLog,
        name: "logLog",
        meta: {
          title: "事件日志管理",
          requireAuth: true, // æ ‡è¯†è¯¥è·¯ç”±æ˜¯å¦éœ€è¦ç™»å½•
        },
      },
      {
        path: "/blackwhiteList",
        component: blackwhiteList,
        name: "blackwhiteList",
        meta: {
          title: "黑/白名单",
          requireAuth: true, // æ ‡è¯†è¯¥è·¯ç”±æ˜¯å¦éœ€è¦ç™»å½•
        },
      },

 src/views/maintenance/blackwhiteList.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,306 @@
<template>
  <div class="logLog_box">
    <My-bread
      :list="[
        `${$t('operatManage.operatManage')}`,
        `${$t('operatManage.blackwhiteList')}`,
      ]"
    ></My-bread>
    <el-divider />
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane
        :label="$t('operatManage.BWL.blackList')"
        :name="$t('operatManage.BWL.blackList')"
      >
        <div class="inquire">
          <el-form ref="ruleForm" :model="form" :inline="true">
            <el-form-item
              :label="$t('operatManage.BWL.blackListIP')"
              prop="blackListIP"
            >
              <el-input
                v-model="form.blackListIP"
                :placeholder="$t('operatManage.BWL.blackListIPInfo')"
              />
            </el-form-item>
            <el-form-item
              :label="$t('operatManage.BWL.IPState')"
              prop="IPState"
            >
              <el-select v-model="form.IPState">
                <el-option :label="$t('operatManage.BWL.all')" value="0" />
                <el-option :label="$t('operatManage.BWL.validity')" value="1" />
                <el-option
                  :label="$t('operatManage.BWL.invalidity')"
                  value="2"
                />
              </el-select>
            </el-form-item>
            <el-form-item
              :label="$t('operatManage.BWL.interceptionCycle')"
              prop="interceptionCycle"
            >
              <el-input
                v-model="form.interceptionCycle"
                :placeholder="$t('operatManage.BWL.interceptionCycle')"
              />
            </el-form-item>
            <el-form-item prop="unit">
              <el-select v-model="form.unit">
                <el-option :label="$t('operatManage.BWL.seconds')" value="0" />
                <el-option :label="$t('operatManage.BWL.mins')" value="1" />
                <el-option :label="$t('operatManage.BWL.hours')" value="2" />
              </el-select>
            </el-form-item>

            <el-form-item
              :label="$t('operatManage.BWL.interceptionNumber')"
              prop="interceptionNumber"
            >
              <el-input
                v-model="form.interceptionNumber"
                :placeholder="$t('operatManage.BWL.interceptionNumber')"
              />
            </el-form-item>
            <el-form-item>
              <el-button @click="onSubmit"
                ><i class="el-icon-search"></i> &nbsp;{{
                  $t("operatManage.BWL.change")
                }}</el-button
              >
            </el-form-item>
          </el-form>
        </div>
        <div class="table_box">
          <el-table :data="tableData" stripe style="width: 100%" height="99%">
            <el-table-column
              align="center"
              type="index"
              :label="$t('operatManage.BWL.index')"
              width="70px"
            />
            <el-table-column
              align="center"
              prop="username"
              :label="$t('operatManage.BWL.username')"
            />
            <el-table-column
              align="center"
              prop="ip"
              :label="$t('operatManage.BWL.ip')"
            />
            <el-table-column
              align="center"
              prop="IPState"
              :label="$t('operatManage.BWL.IPState')"
            />
            <el-table-column
              align="center"
              prop="largeModuleName"
              :label="$t('operatManage.BWL.largeModuleName')"
            />
            <el-table-column
              align="center"
              prop="smallModuleName"
              :label="$t('operatManage.BWL.smallModuleName')"
            />
            <el-table-column
              align="center"
              prop="resourceName"
              :label="$t('operatManage.BWL.resourceName')"
            />
            <el-table-column
              align="center"
              prop="date"
              :label="$t('operatManage.BWL.date')"
            />
            <el-table-column
              align="center"
              prop="operationType"
              :label="$t('operatManage.BWL.operationType')"
            />
          </el-table>
          <div style="margin-top: 40px" class="pagination_box">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-sizes="[10, 20, 30, 40]"
              :page-size="10"
              layout="total, sizes, prev, pager, next, jumper"
              :total="9"
            >
            </el-pagination>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
    </el-tabs>
  </div>
</template>
  
  <script>
import MyBread from "../../components/MyBread.vue";

export default {
  //import引入的组件需要注入到对象中才能使用
  components: {
    MyBread,
  },

  data() {
    return {
      activeName: this.$t("operatManage.BWL.blackList"),
      currentPage: 1,
      form: {
        blackListIP: "",
        IPState: this.$t("operatManage.BWL.all"),
        interceptionCycle: "",
        unit: this.$t("operatManage.BWL.seconds"),
        interceptionNumber: "",
      },
      tableData: [
        {
          username: "管理员",
          ip: "221.182.31.12",
          date: "2022-08-05",
          IPState: "",
          largeModuleName: "运维监控",
          smallModuleName: "资源操作日志",
          resourceName: "",
          operationType: "查询",
        },
        {
          date: "2022-08-05",
          username: "管理员",
          IPState: "",
          largeModuleName: "运维监控",
          smallModuleName: "资源操作日志",
          resourceName: "",
          operationType: "查询",
          ip: "221.182.31.12",
        },
        {
          date: "2022-08-05",
          username: "管理员",
          IPState: "",
          largeModuleName: "运维监控",
          smallModuleName: "资源操作日志",
          resourceName: "",
          operationType: "查询",
          ip: "221.182.31.12",
        },
        {
          date: "2022-08-05",
          username: "管理员",
          IPState: "",
          largeModuleName: "运维监控",
          smallModuleName: "资源操作日志",
          resourceName: "",
          operationType: "查询",
          ip: "221.182.31.12",
        },
        {
          date: "2022-08-05",
          username: "管理员",
          IPState: "",
          largeModuleName: "运维监控",
          smallModuleName: "资源操作日志",
          resourceName: "",
          operationType: "查询",
          ip: "221.182.31.12",
        },
        {
          date: "2022-08-05",
          username: "管理员",
          IPState: "",
          largeModuleName: "运维监控",
          smallModuleName: "资源操作日志",
          resourceName: "",
          operationType: "查询",
          ip: "221.182.31.12",
        },
        {
          date: "2022-08-05",
          username: "管理员",
          IPState: "",
          largeModuleName: "运维监控",
          smallModuleName: "资源操作日志",
          resourceName: "",
          operationType: "查询",
          ip: "221.182.31.12",
        },
        {
          date: "2022-08-05",
          username: "管理员",
          IPState: "",
          largeModuleName: "运维监控",
          smallModuleName: "资源操作日志",
          resourceName: "",
          operationType: "查询",
          ip: "221.182.31.12",
        },
        {
          date: "2022-08-05",
          username: "管理员",
          IPState: "",
          largeModuleName: "运维监控",
          smallModuleName: "资源操作日志",
          resourceName: "",
          operationType: "查询",
          ip: "221.182.31.12",
        },
      ],
    };
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} æ¡`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
    onSubmit() {
      console.log("submit!");
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
  created() {},
};
</script>
  <style lang="less" scoped>
//@import url(); å¼•å…¥å…¬å…±cssç±»
.logLog_box {
  background: rgb(240, 242, 245);
  border-radius: 10px;
  height: 100%;
  padding: 10px;
  box-sizing: border-box;
  .el-input {
    width: 300px;
  }
  .inquire {
    padding: 10px;
    margin-top: 20px;
    background: #fff;
    border-radius: 5px;
    border: 1px solid rgb(202, 201, 204);
    margin-bottom: 20px;
  }
  .table_box {
    padding: 10px;
    background: #fff;
    border-radius: 5px;
    border: 1px solid rgb(202, 201, 204);
  }
  .text-center {
    text-align: center;
  }
}
</style>
  

 src/views/maintenance/eventlogManage.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,306 @@
<template>
  <div class="logLog_box">
    <My-bread
      :list="[
        `${$t('operatManage.operatManage')}`,
        `${$t('operatManage.eventlogManage')}`,
      ]"
    ></My-bread>
    <el-divider />
    <div class="inquire">
      <el-form ref="ruleForm" :model="form" :inline="true">
        <el-form-item :label="$t('operatManage.ELM.username')" prop="username">
          <el-input
            v-model="form.username"
            :placeholder="$t('operatManage.ELM.usernameInfo')"
          />
        </el-form-item>
        <el-form-item
          :label="$t('operatManage.ELM.ownedSystem')"
          prop="ownedSystem"
        >
          <el-select
            v-model="form.ownedSystem"
            :placeholder="$t('operatManage.ELM.please')"
          >
            <el-option :label="$t('operatManage.ELM.all')" value="all" />
            <el-option :label="$t('operatManage.ELM.one')" value="one" />
          </el-select>
        </el-form-item>
        <el-form-item
          :label="$t('operatManage.ELM.operationType')"
          prop="operationType"
        >
          <el-select
            v-model="form.operationType"
            :placeholder="$t('operatManage.ELM.please')"
          >
            <el-option :label="$t('operatManage.ELM.all')" value="all" />
            <el-option :label="$t('operatManage.ELM.add')" value="add" />
            <el-option :label="$t('operatManage.ELM.delete')" value="delete" />
            <el-option :label="$t('operatManage.ELM.edit')" value="edit" />
            <el-option :label="$t('operatManage.ELM.query')" value="query" />
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('operatManage.ELM.date')" prop="date">
          <el-date-picker
            v-model="form.date"
            type="daterange"
            align="right"
            unlink-panels
            :range-separator="$t('operatManage.ELM.to')"
            :start-placeholder="$t('operatManage.ELM.startDate')"
            :end-placeholder="$t('operatManage.ELM.endDate')"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item :label="$t('operatManage.ELM.ip')" prop="requestIp">
          <el-input v-model="form.requestIp" placeholder="请输入" />
        </el-form-item>
        <el-form-item>
          <el-button @click="onSubmit"
            ><i class="el-icon-search"></i> &nbsp;{{
              $t("operatManage.ELM.search")
            }}</el-button
          >
        </el-form-item>
        <el-form-item>
          <el-button @click="resetForm('ruleForm')"
            ><i class="el-icon-delete"></i>&nbsp;{{
              $t("operatManage.ELM.reset")
            }}</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <div class="table_box">
      <el-table :data="tableData" stripe style="width: 100%" height="99%">
        <el-table-column
          align="center"
          type="index"
          :label="$t('operatManage.ELM.index')"
          width="70px"
        />
        <el-table-column
          align="center"
          prop="username"
          :label="$t('operatManage.ELM.username')"
        />
        <el-table-column
          align="center"
          prop="ip"
          :label="$t('operatManage.ELM.ip')"
        />
        <el-table-column
          align="center"
          prop="ownedSystem"
          :label="$t('operatManage.ELM.ownedSystem')"
        />
        <el-table-column
          align="center"
          prop="largeModuleName"
          :label="$t('operatManage.ELM.largeModuleName')"
        />
        <el-table-column
          align="center"
          prop="smallModuleName"
          :label="$t('operatManage.ELM.smallModuleName')"
        />
        <el-table-column
          align="center"
          prop="resourceName"
          :label="$t('operatManage.ELM.resourceName')"
        />
        <el-table-column
          align="center"
          prop="date"
          :label="$t('operatManage.ELM.date')"
        />
        <el-table-column
          align="center"
          prop="operationType"
          :label="$t('operatManage.ELM.operationType')"
        />
      </el-table>
      <div style="margin-top: 40px" class="pagination_box">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="10"
          layout="total, sizes, prev, pager, next, jumper"
          :total="9"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import MyBread from "../../components/MyBread.vue";

export default {
  //import引入的组件需要注入到对象中才能使用
  components: {
    MyBread,
  },

  data() {
    return {
      currentPage: 1,
      form: {
        username: "",
        ownedSystem: "",
        requestIp: "",
        operationType: "",
        date: "",
      },
      tableData: [
        {
          username: "管理员",
          ip: "221.182.31.12",
          date: "2022-08-05",
          ownedSystem: "",
          largeModuleName: "运维监控",
          smallModuleName: "资源操作日志",
          resourceName: "",
          operationType: "查询",
        },
        {
          date: "2022-08-05",
          username: "管理员",
          ownedSystem: "",
          largeModuleName: "运维监控",
          smallModuleName: "资源操作日志",
          resourceName: "",
          operationType: "查询",
          ip: "221.182.31.12",
        },
        {
          date: "2022-08-05",
          username: "管理员",
          ownedSystem: "",
          largeModuleName: "运维监控",
          smallModuleName: "资源操作日志",
          resourceName: "",
          operationType: "查询",
          ip: "221.182.31.12",
        },
        {
          date: "2022-08-05",
          username: "管理员",
          ownedSystem: "",
          largeModuleName: "运维监控",
          smallModuleName: "资源操作日志",
          resourceName: "",
          operationType: "查询",
          ip: "221.182.31.12",
        },
        {
          date: "2022-08-05",
          username: "管理员",
          ownedSystem: "",
          largeModuleName: "运维监控",
          smallModuleName: "资源操作日志",
          resourceName: "",
          operationType: "查询",
          ip: "221.182.31.12",
        },
        {
          date: "2022-08-05",
          username: "管理员",
          ownedSystem: "",
          largeModuleName: "运维监控",
          smallModuleName: "资源操作日志",
          resourceName: "",
          operationType: "查询",
          ip: "221.182.31.12",
        },
        {
          date: "2022-08-05",
          username: "管理员",
          ownedSystem: "",
          largeModuleName: "运维监控",
          smallModuleName: "资源操作日志",
          resourceName: "",
          operationType: "查询",
          ip: "221.182.31.12",
        },
        {
          date: "2022-08-05",
          username: "管理员",
          ownedSystem: "",
          largeModuleName: "运维监控",
          smallModuleName: "资源操作日志",
          resourceName: "",
          operationType: "查询",
          ip: "221.182.31.12",
        },
        {
          date: "2022-08-05",
          username: "管理员",
          ownedSystem: "",
          largeModuleName: "运维监控",
          smallModuleName: "资源操作日志",
          resourceName: "",
          operationType: "查询",
          ip: "221.182.31.12",
        },
      ],
    };
  },
  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} æ¡`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
    onSubmit() {
      console.log("submit!");
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
  created() {},
};
</script>
<style lang="less" scoped>
//@import url(); å¼•å…¥å…¬å…±cssç±»
.logLog_box {
  background: rgb(240, 242, 245);
  border-radius: 10px;
  height: 100%;
  padding: 10px;
  box-sizing: border-box;
  .el-input {
    width: 300px;
  }
  .inquire {
    height: 110px;
    overflow: auto;
    padding: 10px;
    margin-top: 20px;
    background: #fff;
    border-radius: 5px;
    border: 1px solid rgb(202, 201, 204);
    margin-bottom: 20px;
    .el-form-item {
      margin: 7px;
    }
  }
  .table_box {
    height: 65%;
    padding: 10px;
    background: #fff;
    border-radius: 5px;
    border: 1px solid rgb(202, 201, 204);
  }
  .text-center {
    text-align: center;
  }
}
</style>