操作记录界面提交

whyczyk

2021-05-08 873f749fdc3d80200bb26ad5164d3c75822ec3a1

操作记录界面提交

 src/assets/css/science-blue.css

@@ -387,7 +387,7 @@
}

.el-science-blue .el-table__fixed-right {
    background-color: #2e347e;
    background-color: #222767;
    z-index: 9;
}

@@ -917,4 +917,21 @@

.el-science-blue .el-form-item__label {
    color: #409eff;
}

.el-menu {
    background-color: #2a3879;
}

.pageSlideMenu .el-menu--collapse>.el-menu-item [class^=el-icon-],
.pageSlideMenu .el-menu--collapse>.el-submenu>.el-submenu__title [class^=el-icon-] {
    width: 30px;
    height: 30px;
}

.pageSlideMenu .el-submenu__title {
    padding: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

 src/components/PageMenu.vue

@@ -1,5 +1,5 @@
<template>
    <el-menu :default-active="acTabs" class="pageMenu">
    <el-menu :default-active="acTabs" class="pageMenu" :collapse="true">
        <template v-for="menu in menus">
            <el-submenu v-if="menu.childrens" :key="menu.name" :index="menu.name">
                <template slot="title">
@@ -36,6 +36,12 @@
                            icon: "el-icon-s-platform",
                            name: "topoGraph",
                            src: "topoGraph",
                            childrens: [{
                                label: "系统拓扑图",
                                icon: "el-icon-s-platform",
                                name: "topoGraph",
                                src: "topoGraph",
                            }]
                        },
                        {
                            label: "3D拓扑图",
@@ -194,8 +200,8 @@
                    }, {
                        label: "系统日志管理",
                        icon: "el-icon-s-platform",
                        name: "",
                        src: "",
                        name: "userOperation",
                        src: "userOperation",
                    }]
                }, ]
            }

 src/pages/home/topoGraph.vue

@@ -676,8 +676,8 @@
                    .dynamometer == 1 && this.AFEcabinet == 1 && this.transformer == 1) {
                    this.axis1 = diagram.getZoomLineInfo('line10');
                    this.axis2 = diagram.getZoomLineInfo('line11');
                    this.axis2[0][0] = this.axis2[0][0] - 10;
                    this.axis2[1][0] = this.axis2[1][0] + 10;
                    this.axis2[0][0] = this.axis2[0][0] - 30;
                    this.axis2[1][0] = this.axis2[1][0] - 40;
                }
            },
            setDiagramByType() {
@@ -767,8 +767,8 @@
                    this.axis1 = diagram.getZoomLineInfo('line10');
                    setTimeout(() => {
                        this.axis2 = diagram.getZoomLineInfo('line11');
                        this.axis2[0][0] = this.axis2[0][0] - 10;
                        this.axis2[1][0] = this.axis2[1][0] + 10;
                        this.axis2[0][0] = this.axis2[0][0] - 30;
                        this.axis2[1][0] = this.axis2[1][0] - 40;
                    }, 100);
                }
                diagramStates(diagram, this.run);

 src/pages/index.vue

@@ -42,14 +42,12 @@
  .pageSlideMenu {
    padding-left: 5px;
    padding-bottom: 8px;
    width: 260px;
    overflow-y: auto;
    overflow-x: hidden;
  }

  .pageConten {
    flex: 1;
    width: calc(100% - 260px);
  }

  .viewCon {

 src/pages/user/js/api.js

@@ -1,13 +1,28 @@
import axios from "@/assets/js/axios";

/**
 * 操作日志-查询分页
 */
export const operationLogPage = (page, data) => {
  return axios({
    method: "POST",
    url: "/operationLog/page",
    params: page,
    data: data
  });
}


/**
 * 根据id查询用户信息
 */
export const getUserInfo = (id) => {
  return axios({
    method: "GET",
    url: "/user/all",
    params: {id}
    params: {
      id
    }
  });
}

@@ -82,6 +97,8 @@
  return axios({
    method: "DELETE",
    url: "/user",
    params: {id}
    params: {
      id
    }
  });
}

 src/pages/user/userOperation.vue

New file
@@ -0,0 +1,179 @@
<template>
  <div class="container">
    <flex-layout>
      <page-panel class="page-list-banner" title="数据筛选" :border="true" slot="header">
        <template slot="btnGrp">
          <el-button type="primary" @click="resetParams" size="mini">高级筛选</el-button>
        </template>
        <div class="table-layout">
          <div class="table-row">
            <!-- 查询条件 -->
            <div class="table-cell text-right">输入查询</div>
            <div class="table-cell">
              <el-input type="text" v-model.trim="content" size="small" placeholder="内容信息"></el-input>
            </div>
            <div class="table-cell text-right">操作类型</div>
            <div class="table-cell">
              <el-select size="small" v-model="type">
                <el-option label="全部" :value="null"></el-option>
                <el-option v-for="(item, index) in types" :key="'job_' + index" :label="item.value" :value="item.value">
                </el-option>
              </el-select>
            </div>
            <div class="table-cell text-right">时间范围</div>
            <div class="table-cell">
              <el-date-picker v-model="startTime" size="small" class="time_box" type="date" placeholder="选择日期"
                value-format="yyyy-MM-dd"></el-date-picker>
              -
              <el-date-picker v-model="endTime" size="small" class="time_box" type="date" placeholder="选择日期"
                value-format="yyyy-MM-dd"></el-date-picker>
            </div>
          </div>
        </div>
        <div class="banner-btn-grp">
          <div class="el-pagination-btns">
            <el-button type="primary" @click="getList" round size="mini" icon="el-icon-search">查询
            </el-button>
          </div>
          <div class="el-pagination-btns">
            <el-button type="primary" @click="resetParams" round size="mini" icon="el-icon-refresh-right">重置</el-button>
          </div>
        </div>
      </page-panel>
      <page-panel title="数据列表" class="flex-page-content">
        <template slot="btnGrp">
          <el-button type="primary" @click="resetParams" size="mini" icon="el-icon-download">导入</el-button>
          <el-button type="primary" @click="resetParams" size="mini" icon="el-icon-plus">添加</el-button>
        </template>
        <el-table stripe size="mini" header-row-class-name="header-primary" height="100%" :data="table.datas"
          v-loading="table.loading" element-loading-background="rgba(0, 0, 0, 0.8)">
          <!-- <el-table-column type="index" width="50" label="序号"></el-table-column> -->
          <el-table-column :prop="item.prop" :label="item.label" :width="item.width" :resizable="false" align="center"
            v-for="(item,index) in table.headers" :key="index">
          </el-table-column>
        </el-table>
      </page-panel>
      <div class="flex-page-footer" slot="footer">
        <el-pagination size="mini" :current-page="page.pageCurr" :page-sizes="[10, 20, 30, 50, 100]"
          :page-size="page.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="page.pageAll"
          @current-change="currentChange" @size-change="sizeChange"></el-pagination>
      </div>
    </flex-layout>
  </div>
</template>

<script>
  import pagePanel from '@/components/pagePanel';
  import {
    operationLogPage
  } from './js/api';

  export default {
    data() {
      return {
        content: null,
        types: [{
          value: '新增'
        }, {
          value: '删除'
        }, {
          value: '修改'
        }, ],
        type: null,
        startTime: null,
        endTime: null,
        table: {
          headers: [{
            prop: "createTime",
            label: "日志时间",
            width: 180
          }, {
            prop: "type",
            label: "操作类型",
            width: 140
          }, {
            prop: "userName",
            label: "操作人员",
            width: 140
          }, {
            prop: "terminalIp",
            label: "IP地址",
            width: 120
          }, {
            prop: "content",
            label: "内容",
          }],
          datas: [],
          loading: false
        },
        page: {
          pageCurr: 1,
          pageSize: 10,
          pageAll: 0
        }
      };
    },
    components: {
      pagePanel
    },
    methods: {
      // 查询用户列表
      getList() {
        let params = {
          pageNum: this.page.pageCurr,
          pageSize: this.page.pageSize
        };
        let data = {
          content: this.content,
          type: this.type,
          startTime: this.startTime,
          endTime: this.endTime,
        };

        operationLogPage(params, data).then((res) => {
          console.log(res);
          res = res.data.data;
          this.page.pageAll = res.total;
          this.table.datas = res.list;
        }).catch((err) => {
          this.$message({
            type: 'error',
            message: err
          });
        });
      },
      // 重置搜索条件
      resetParams() {

      },
      edit() {

      },
      currentChange(value) {
        this.page.pageCurr = value;
        this.getList();
      },
      sizeChange(value) {
        this.page.pageCurr = 1;
        this.page.pageSize = value;
        this.getList();
      }
    },
    mounted() {
      this.getList();
    },
    beforeDestroy() {

    }
  };
</script>

<style scoped>
  .container {
    height: 100%;
  }

  .page-list-banner {
    margin-bottom: 10px;
  }
</style>

 src/router/routes.js

@@ -38,5 +38,10 @@
        name: 'userList',
        meta: {},
        component: (resolve) => require(['@/pages/user/list.vue'], resolve),
    }, { // 用户操作
        path: 'userOperation',
        name: 'userOperation',
        meta: {},
        component: (resolve) => require(['@/pages/user/userOperation.vue'], resolve),
    }, ]
}];