架子已经搭好

src/components/HeaderElement.vue

@@ -236,7 +236,7 @@ li {
   cursor: pointer;
   text-align: center;
   color: #fff;
-  line-height: 100px;
+  line-height: 80px;
 }
 .box:hover {
   content: '点击换肤';

src/components/SideMenu.vue

@@ -71,6 +71,9 @@ export default {
   },
   watch: {
     $route(newVal) {
+      // 标题名称
+      let name = newVal.meta.title;
+      this.$emit('setRouterName', name);
       let parentName = newVal.meta.parentName;
       let routerName = newVal.meta.permission;
       if(this.mode) {

src/router/ChildrenRouters.js

@@ -104,6 +104,144 @@ const childrenRouters = [
     }
   },
 
+  /**
+   *
+   * 生产数据
+   *
+   * **/
+
+  {
+    path: '/checkPig',
+    name: 'CheckPig',
+    component: () => import('../views/PdcData/CheckPig.vue'),
+    meta: {
+      title: '智能盘猪',
+      permission: 'checkPig',
+      parentName: '生产数据'
+    }
+  },
+  {
+    path: '/checkLog',
+    name: 'CheckLog',
+    component: () => import('../views/PdcData/CheckLog.vue'),
+    meta: {
+      title: '盘猪记录',
+      permission: 'checkLog',
+      parentName: '生产数据'
+    }
+  },
+  {
+    path: '/analysis',
+    name: 'Analysis',
+    component: () => import('../views/PdcData/Analysis.vue'),
+    meta: {
+      title: 'ERP数据分析',
+      permission: 'analysis',
+      parentName: '生产数据'
+    }
+  },
+  /**
+   *
+   * 生态监测
+   *
+   * **/
+
+
+  {
+    path: '/sewage',
+    name: 'Sewage',
+    component: () => import('../views/Zoology/Sewage.vue'),
+    meta: {
+      title: '污水排放',
+      permission: 'sewage',
+      parentName: '生态监测'
+    }
+  },
+
+  /**
+   *
+   * 违规报警
+   *
+   * **/
+
+  {
+    path: '/alarmWarn',
+    name: 'AlarmWarn',
+    component: () => import('../views/Alarm/AlarmWarn.vue'),
+    meta: {
+      title: '报警信息',
+      permission: 'alarmWarn',
+      parentName: '违规报警'
+    }
+  },
+  {
+    path: '/eventRem',
+    name: 'EventRem',
+    component: () => import('../views/Alarm/EventRem.vue'),
+    meta: {
+      title: '事件提醒',
+      permission: 'eventRem',
+      parentName: '违规报警'
+    }
+  },
+  {
+    path: '/outage',
+    name: 'Outage',
+    component: () => import('../views/Alarm/Outage.vue'),
+    meta: {
+      title: '断电报警',
+      permission: 'outage',
+      parentName: '违规报警'
+    }
+  },
+  {
+    path: '/violationUser',
+    name: 'ViolationUser',
+    component: () => import('../views/Alarm/ViolationUser.vue'),
+    meta: {
+      title: '人员违规报警',
+      permission: 'violationUser',
+      parentName: '违规报警'
+    }
+  },
+  {
+    path: '/envWarn',
+    name: 'EnvWarn',
+    component: () => import('../views/Alarm/EnvWarn.vue'),
+    meta: {
+      title: '环境监测报警',
+      permission: 'envWarn',
+      parentName: '违规报警'
+    }
+  },
+  {
+    path: '/sewageWarn',
+    name: 'SewageWarn',
+    component: () => import('../views/Alarm/SewageWarn.vue'),
+    meta: {
+      title: '污水排放报警',
+      permission: 'sewageWarn',
+      parentName: '违规报警'
+    }
+  },
+
+  /**
+   *
+   * 视频监控
+   *
+   * **/
+
+  {
+    path: '/videoLook',
+    name: 'VideoLook',
+    component: () => import('../views/Video/VideoLook.vue'),
+    meta: {
+      title: '监控查看',
+      permission: 'videoLook',
+      parentName: '视频监控'
+    }
+  },
+
   /*
   *
   * 系统管理

src/store/index.js

@@ -1,5 +1,6 @@
 import Vue from 'vue'
 import Vuex from 'vuex'
+import { getMyButton } from '../utils/api'
 
 Vue.use(Vuex)
 
@@ -8,7 +9,7 @@ export default new Vuex.Store({
     color: '#31C3A6',
     mode: true,
     // 按钮权限
-    buttons: ['menu:add', 'menu:del']
+    buttons: []
   },
   mutations: {
     setColor(state, data) {
@@ -27,6 +28,21 @@ export default new Vuex.Store({
     },
     setColorAsync(context, data) {
       context.commit('setColor', data)
+    },
+    // 获取用户按钮权限
+    GetButtons({ commit }) {
+      return new Promise((resolve, reject) => {
+        getMyButton({userId: localStorage.getItem('UserId')}).then(res => {
+          if(res.code === 10000) {
+            commit('SET_BUTTONS', res.data)
+            resolve(res.data)
+          } else {
+            reject(new Error(res.message))
+          }
+        }).catch(error => {
+            reject(error)
+          })
+      })
     }
   },
   modules: {

src/utils/api.js

@@ -37,6 +37,7 @@ export function getUserMenu(data) {
   })
 }
 
+// 拿到菜单用户列表
 export function getUserMenuAndButon(data) {
   return axios({
     url: '/auth/getMyMenuAndButton',
@@ -45,6 +46,15 @@ export function getUserMenuAndButon(data) {
   })
 }
 
+// 拿到按钮权限
+export function getMyButton(data) {
+  return axios({
+    url: '/auth/getMyButton',
+    method: 'get',
+    params: data
+  })
+}
+
 // 获取纯菜单(不带按钮)
 export function getMenuList() {
   return axios({
@@ -168,3 +178,39 @@ export function getUserList(data) {
     data: data
   })
 }
+
+// 用户添加
+export function addUser(data) {
+  return axios({
+    url: '/user/add',
+    method: 'post',
+    data: data
+  })
+}
+
+// 用户编辑
+export function editUser(data) {
+  return axios({
+    url: '/user/edit',
+    method: 'post',
+    data: data
+  })
+}
+
+// 是否启用账号
+export function isUser(data) {
+  return axios({
+    url: '/account/setAccountStatus',
+    method: 'post',
+    params: data
+  })
+}
+
+// 用户删除
+export function delUser(data) {
+  return axios({
+    url: '/user/remove',
+    method: 'get',
+    params: data
+  })
+}

src/views/Alarm/AlarmWarn.vue

@@ -0,0 +1,13 @@
+<template>
+  <div>报警信息</div>
+</template>
+
+<script>
+export default {
+  name: "AlarmWarn"
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/Alarm/EnvWarn.vue

@@ -0,0 +1,13 @@
+<template>
+  <div>环境监测报警</div>
+</template>
+
+<script>
+export default {
+  name: "EnvWarn"
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/Alarm/EventRem.vue

@@ -0,0 +1,13 @@
+<template>
+    <div>事件提醒</div>
+</template>
+
+<script>
+export default {
+  name: "EventRem"
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/Alarm/Outage.vue

@@ -0,0 +1,13 @@
+<template>
+  <div>断电报警</div>
+</template>
+
+<script>
+export default {
+  name: "Outage"
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/Alarm/SewageWarn.vue

@@ -0,0 +1,13 @@
+<template>
+  <div>污水排放报警</div>
+</template>
+
+<script>
+export default {
+  name: "SewageWarn"
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/Alarm/ViolationUser.vue

@@ -0,0 +1,13 @@
+<template>
+  <div>人员违规报警</div>
+</template>
+
+<script>
+export default {
+  name: "ViolationUser"
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/MainLayout.vue

@@ -5,10 +5,19 @@
     </el-header>
     <el-container>
       <el-aside width="250px">
-        <side-menu></side-menu>
+        <side-menu @setRouterName="setRouterName"></side-menu>
       </el-aside>
       <el-main>
-        <router-view></router-view>
+        <div class="box_header">
+          <div class="line" :style="{ backgroundColor:  color}"></div>
+          <span style="padding-left: 8px">{{routerName}}</span>
+          <div class="button-right">
+            <el-button size="mini" icon="el-icon-refresh" @click="refresh">刷新</el-button>
+          </div>
+        </div>
+        <div class="operant">
+          <router-view></router-view>
+        </div>
       </el-main>
     </el-container>
   </el-container>
@@ -18,7 +27,7 @@
 import HeaderElement from "../components/HeaderElement";
 import SideMenu from "../components/SideMenu";
 import { findOne } from '../utils/api';
-import { mapActions } from 'vuex';
+import { mapActions, mapState } from 'vuex';
 export default {
   name: "MainLayout",
   components: {
@@ -28,10 +37,14 @@ export default {
   data() {
     return {
       menuList: [],
+      routerName: '',
     }
   },
+  computed: {
+    ...mapState(['color'])
+  },
   methods: {
-    ...mapActions(['setModeAsync', 'setColorAsync']),
+    ...mapActions(['setModeAsync', 'setColorAsync', 'GetButtons']),
     init() {
       let params = {
         id: localStorage.getItem('UserId'),
@@ -42,9 +55,17 @@ export default {
           this.setColorAsync(res.data.color);
         }
       })
+    },
+    setRouterName(data) {
+      this.routerName = data;
+    },
+    refresh() {
+      location.reload();
     }
   },
   mounted() {
+    this.routerName = this.$route.meta.title;
+    this.GetButtons();
     this.init();
   }
 }
@@ -59,4 +80,42 @@ export default {
    padding: 0;
    margin: 0;
  }
+ .box_header {
+   box-sizing: border-box;
+   width: 100%;
+   height: 50px;
+   line-height: 50px;
+   border-bottom: 1px solid #ddd;
+   background-color: #F3F3F3;
+   padding: 0 20px;
+ }
+ .line {
+   width: 5px;
+   height: 18px;
+   float: left;
+   margin-top: 16px;
+ }
+ .button-right {
+   float: right;
+ }
+ .operant {
+   width: 100%;
+   height: calc(100vh - 120px);
+   overflow-y: auto;
+ }
+ .operant::-webkit-scrollbar {
+   width: 6px;
+   height: 6px;
+ }
+ .operant::-webkit-scrollbar-track {
+   -webkit-box-shadow: inset 0 0 3px rgba(0,0,0,0.2);
+   -webkit-border-radius: 6px;
+   border-radius: 6px;
+ }
+ .operant::-webkit-scrollbar-thumb {
+   -webkit-border-radius: 6px;
+   border-radius: 6px;
+   background: rgba(153,153,153,0.4);
+   -webkit-box-shadow: inset 0 0 3px rgba(0,0,0,0.3);
+ }
 </style>

src/views/PdcData/Analysis.vue

@@ -0,0 +1,13 @@
+<template>
+  <div>erp数据分析</div>
+</template>
+
+<script>
+export default {
+  name: "Analysis"
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/PdcData/CheckLog.vue

@@ -0,0 +1,13 @@
+<template>
+  <div>盘猪记录</div>
+</template>
+
+<script>
+export default {
+  name: "CheckLog"
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/PdcData/CheckPig.vue

@@ -0,0 +1,13 @@
+<template>
+  <div>智能盘猪</div>
+</template>
+
+<script>
+export default {
+  name: "CheckPig"
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/SystemAdmin/AuthAdmin.vue

@@ -11,7 +11,7 @@
             <el-button @click="search" type="success">搜索</el-button>
           </el-form-item>
           <el-form-item>
-            <el-button type="primary" @click="dialogVisible = true">新增权限组</el-button>
+            <el-button type="primary" v-if="hasPerm('auth:add')" @click="dialogVisible = true">新增权限组</el-button>
           </el-form-item>
         </el-form>
       </div>
@@ -19,7 +19,7 @@
         <el-table
             :data="tableData"
             border
-            :height="590 + 'px'">
+            :height="720 + 'px'">
           <el-table-column
               prop="id"
               label="权限组id">
@@ -37,18 +37,22 @@
               <el-button
                   size="mini"
                   type="primary"
+                  v-if="hasPerm('auth:edit')"
                   @click="handleEdit(scope.row)">编辑</el-button>
               <el-button
                   size="mini"
                   type="warning"
+                  v-if="hasPerm('auth:Limits')"
                   @click="handleLimits(scope.row)">权限分配</el-button>
               <el-button
                   size="mini"
                   type="danger"
+                  v-if="hasPerm('auth:User')"
                   @click="handleUser(scope.row)">用户分配</el-button>
               <el-button
                   size="mini"
                   type="danger"
+                  v-if="hasPerm('auth:del')"
                   @click="del(scope.row)">删除</el-button>
             </template>
           </el-table-column>

src/views/SystemAdmin/MenuAdmin.vue

@@ -2,14 +2,14 @@
   <div class="box">
     <div>
       <div style="margin-bottom: 10px">
-        <el-button type="primary"  @click="addMenu" v-if="hasPerm('menu:add')">添加菜单</el-button>
+        <el-button type="primary" v-if="hasPerm('menu:add')"  @click="addMenu">添加菜单</el-button>
       </div>
       <div>
         <el-table
             :data="tableData"
             border
             row-key="id"
-            :height="670 + 'px'"
+            :height="800 + 'px'"
             :tree-props="{children: 'children'}"
             default-expand-all>
           <el-table-column prop="title" label="菜单名称"></el-table-column>
@@ -30,7 +30,7 @@
               label="操作"
               fixed="right">
             <template slot-scope="scope">
-              <el-button size="mini" type="info" @click="setEdit(scope.row)" style="margin-right: 10px">编辑</el-button>
+              <el-button size="mini" type="info" v-if="hasPerm('menu:edit')" @click="setEdit(scope.row)" style="margin-right: 10px">编辑</el-button>
 <!--              <el-button size="mini" type="primary" style="margin-right: 10px" @click="addChildren(scope.row, scope.$index)">添加子菜单</el-button>-->
               <el-popconfirm
                   :title="scope.row.parentId === 0 ? '这是父菜单，删除后，子菜单将不复存在！确定要删除这个菜单吗' : '确定要删除这个菜单吗？'"
@@ -84,68 +84,7 @@
           <el-input v-model="form.sort" autocomplete="off"></el-input>
         </el-form-item>
       </el-form>
-<!--      <a-form :form="form">-->
-<!--        <a-form.item label="父级菜单">-->
-<!--          <a-tree-select-->
-<!--              style="width: 100%"-->
-<!--              :dropdownStyle="{ maxHeight: '300px', overflow: 'auto' }"-->
-<!--              :treeData="menuTreeData"-->
-<!--              placeholder="请选择父级菜单"-->
-<!--              treeDefaultExpandAll-->
-<!--          >-->
-<!--            <span slot="title" slot-scope="{ id }">{{ id }}-->
-<!--            </span>-->
-<!--          </a-tree-select>-->
-<!--        </a-form.item>-->
-<!--      </a-form>-->
     </a-modal>
-<!--    <el-dialog :title="showType ? '编辑菜单' : '新增菜单'" :visible.sync="dialogFormVisible">-->
-<!--      <a-form :form="form" :label-col="{ span: 5}" :warpper-col="{ span: 12 }">-->
-<!--        <a-form-item label="父级菜单">-->
-<!--          <a-tree-select-->
-<!--              style="width: 100%"-->
-<!--              :dropdownStyle="{ maxHeight: '300px', overflow: 'auto' }"-->
-<!--              :treeData="menuTreeData"-->
-<!--              placeholder="请选择父级菜单"-->
-<!--              treeDefaultExpandAll-->
-<!--          >-->
-<!--            <span slot="title" slot-scope="{ id }">{{ id }}-->
-<!--            </span>-->
-<!--          </a-tree-select>-->
-<!--        </a-form-item>-->
-<!--      </a-form>-->
-
-<!--      <el-form :model="form"  ref="ruleForm">-->
-<!--        <el-form-item label="父级菜单" :label-width="formLabelWidth">-->
-<!--          <a-tree-select-->
-<!--              style="width: 100%"-->
-<!--              :dropdownStyle="{ maxHeight: '300px', overflow: 'auto' }"-->
-<!--              :treeData="menuTreeData"-->
-<!--              placeholder="请选择父级菜单"-->
-<!--              treeDefaultExpandAll-->
-<!--          >-->
-<!--                  <span slot="title" slot-scope="{ id }">{{ id }}-->
-<!--                  </span>-->
-<!--          </a-tree-select>-->
-<!--&lt;!&ndash;          <el-input v-model="form.parentId" disabled autocomplete="off"></el-input>&ndash;&gt;-->
-<!--        </el-form-item>-->
-<!--        <el-form-item label="菜单排序" :label-width="formLabelWidth">-->
-<!--          <el-input v-model="form.sort"  autocomplete="off"></el-input>-->
-<!--        </el-form-item>-->
-<!--        <el-form-item label="菜单名字" :label-width="formLabelWidth" prop="name">-->
-<!--          <el-input v-model="form.name" autocomplete="off"></el-input>-->
-<!--        </el-form-item>-->
-<!--        <el-form-item label="菜单路由" :label-width="formLabelWidth">-->
-<!--          <el-input v-model="form.url" autocomplete="off"></el-input>-->
-<!--        </el-form-item>-->
-<!--      </el-form>-->
-
-<!--      <div slot="footer" class="dialog-footer">-->
-<!--        <el-button @click="dialogFormVisible = false">取 消</el-button>-->
-<!--        <el-button v-if="!showType" type="primary" @click="add('ruleForm')">新 增</el-button>-->
-<!--        <el-button v-else type="primary" @click="setUpdate('ruleForm')">更 新</el-button>-->
-<!--      </div>-->
-<!--    </el-dialog>-->
   </div>
 </template>
 

src/views/SystemAdmin/UserAdmin.vue

@@ -1,13 +1,365 @@
 <template>
-  <div>1111</div>
+  <div class="box">
+    <div>
+      <div style="margin-bottom: 10px">
+        <el-form :inline="true" label-width="80px">
+          <el-form-item>
+            <el-input v-model="keyword"  placeholder="请输入用户姓名或手机号"></el-input>
+          </el-form-item>
+          <el-form-item>
+            <el-button @click="search" type="success">搜索</el-button>
+          </el-form-item>
+          <el-form-item>
+            <el-button v-if="hasPerm('user:add')" type="primary" @click="addUser">添加用户</el-button>
+          </el-form-item>
+          <el-form-item>
+            <el-button type="danger" v-if="hasPerm('user:del')" @click="delAll">删除用户</el-button>
+          </el-form-item>
+        </el-form>
+      </div>
+      <div>
+        <el-table
+            border
+            :data="tableData"
+            style="width: 100%"
+            :height="590+'px'"
+            ref="multipleTable"
+            tooltip-effect="dark"
+            @selection-change="handleSelectionChange">
+          <el-table-column
+              type="selection"
+              width="55">
+          </el-table-column>
+          <el-table-column
+              prop="id"
+              label="用户ID"
+              width="80"></el-table-column>
+          <el-table-column
+              prop="userName"
+              label="用户姓名"></el-table-column>
+          <el-table-column prop="accountName" label="登录名"></el-table-column>
+          <el-table-column label="性别">
+            <template slot-scope="scope">
+              <span v-if="scope.row.male == 1">男</span>
+              <span v-else>女</span>
+            </template>
+          </el-table-column>
+          <el-table-column
+              prop="birthday"
+              label="出生日期"></el-table-column>
+          <el-table-column
+              prop="mobile"
+              label="手机号"></el-table-column>
+          <el-table-column
+              prop="job"
+              label="职务"></el-table-column>
+          <el-table-column
+              prop="address"
+              label="住址"></el-table-column>
+          <el-table-column
+              prop="remark"
+              label="备注"></el-table-column>
+          <el-table-column
+              v-if="hasPerm('user:is')"
+              label="是否启用">
+            <template slot-scope="scope">
+              <el-switch v-model="scope.row.accountStatus"  :active-value="1"  :inactive-value="0" @change="handleSwitch($event, scope.row)">
+              </el-switch>
+            </template>
+          </el-table-column>
+          <el-table-column label="操作">
+            <template slot-scope="scope">
+              <el-button type="primary" v-if="hasPerm('user:edit')" size="mini" style="margin-right: 10px;" @click="edit(scope.row)">编辑</el-button>
+              <el-popconfirm
+                  title=" 确定要删除这个用户吗？"
+                  @confirm="del(scope.row)"
+              >
+                <el-button type="danger" v-if="hasPerm('user:del')" size="mini" slot="reference">删除</el-button>
+              </el-popconfirm>
+            </template>
+          </el-table-column>
+        </el-table>
+        <table-footer
+            :totals="total"
+            :size="size"
+            @sizeChange="sizeChange"
+            @pageChange="pageChange"></table-footer>
+
+      </div>
+    </div>
+    <el-dialog
+        :title="showType ? '编辑用户' : '新增用户'"
+        :visible.sync="dialogVisible"
+        width="50%">
+      <div>
+        <el-form ref="form" :model="forms" label-width="80px" :rules="rules">
+          <el-form-item label="用户姓名" prop="userName">
+            <el-input v-model="forms.userName" placeholder="默认手机号为登录名，如没有填写手机号则是用户姓名为登录名"></el-input>
+          </el-form-item>
+          <el-form-item label="性别">
+            <el-radio-group v-model="forms.male">
+              <el-radio :label="0">女</el-radio>
+              <el-radio :label="1">男</el-radio>
+            </el-radio-group>
+          </el-form-item>
+          <el-form-item label="出生日期">
+            <el-date-picker type="date" placeholder="选择日期" v-model="forms.birthday" value-format="yyyy-MM-dd" style="width: 100%;"></el-date-picker>
+          </el-form-item>
+          <el-form-item label="手机号">
+            <el-input v-model="forms.mobile" placeholder="默认手机号为登录名，如没有填写手机号则是用户姓名为登录名"></el-input>
+          </el-form-item>
+          <el-form-item label="住址">
+            <el-input v-model="forms.address"></el-input>
+          </el-form-item>
+          <el-form-item label="职务">
+            <el-input v-model="forms.job"></el-input>
+          </el-form-item>
+          <el-form-item label="描述">
+            <el-input v-model="forms.remark"></el-input>
+          </el-form-item>
+        </el-form>
+      </div>
+
+      <span slot="footer" class="dialog-footer">
+                <el-button @click="dialogVisible = false">取 消</el-button>
+                <el-button type="primary" @click="onSubmit('form')">{{showType ? '更 新' : '新 增'}}</el-button>
+              </span>
+    </el-dialog>
+  </div>
 </template>
 
 <script>
+import TableFooter from '../../components/TableFooter';
+import {getUserList, addUser, editUser, isUser, delUser} from '../../utils/api';
 export default {
-  name: "UserAdmin"
+  name: "UserAdmin",
+  components: {
+    TableFooter
+  },
+  data() {
+    return {
+      dialogVisible: false,
+      showType: false,
+      keyword: '',
+      tableData: [],
+      total: 0,
+      size: 20,
+      pageNum: 1,
+      forms: {
+        userName: '',
+        remark: '',
+        mobile: '',
+        male: 0,
+        job: '',
+        birthday: '',
+        address: '',
+        id: ''
+      },
+      selectList: '',
+      rules: {
+        userName: [ { required: true, message: '请输入用户姓名', trigger: 'blur' },]
+      }
+    };
+  },
+  created() {
+  },
+  methods: {
+    // 搜索
+    search() {
+      this.init();
+    },
+    // 修改size
+    sizeChange(val) {
+      this.size = val;
+      this.init();
+    },
+    // 修改页数
+    pageChange(val) {
+      this.pageNum= val;
+      this.init();
+    },
+    // 初始化
+    init() {
+      let params = {
+        pageNum: this.pageNum,
+        pageSize: 100,
+        searchStr: this.keyword
+      };
+      getUserList(params)
+          .then(res => {
+            if(res.code === 10001) {
+              this.tableData = res.data;
+              this.total = res.totalElements;
+            } else {
+              this.$message(res.message);
+            }
+          })
+    },
+    // 添加用户
+    addUser() {
+      this.dialogVisible = true;
+      this.showType = false;
+    },
+    // 用户编辑
+    edit(data) {
+      this.forms =  {
+        userName: data.userName,
+        remark: data.remark,
+        mobile: data.mobile,
+        male: parseInt(data.male),
+        job: data.job,
+        birthday: data.birthday,
+        address: data.address,
+        id: data.id
+      };
+      this.forms.userId = data.userId;
+      this.showType = true;
+      this.dialogVisible = true;
+    },
+    // 用户删除
+    del(data) {
+      delUser( {userIds: data.id})
+          .then(res => {
+            if(res.code === 10000) {
+              this.init();
+              this.$message.success(res.message);
+            } else {
+              this.$message.error(res.message);
+            }
+          })
+    },
+    // 保存
+    onSubmit(formName) {
+      this.$refs[formName].validate((valid) => {
+        if (valid) {
+          if(this.showType) {
+            let params = {};
+            params.userName = this.forms.userName;
+            params.male = this.forms.male;
+            params.birthday = this.forms.birthday;
+            params.mobile = this.forms.mobile;
+            params.address = this.forms.address;
+            params.job = this.forms.job;
+            params.remark = this.forms.remark;
+            params.id = this.forms.id;
+            params.userId = this.forms.userId;
+            editUser(params)
+                .then(res => {
+                  if(res.code === 10000) {
+                    this.init();
+                    this.$message.success(res.message);
+                  } else {
+                    this.$message.error(res.message);
+                  }
+                  this.reset();
+                })
+          } else {
+            let params = {};
+            params.userName = this.forms.userName;
+            params.male = this.forms.male;
+            params.birthday = this.forms.birthday;
+            params.mobile = this.forms.mobile;
+            params.address = this.forms.address;
+            params.job = this.forms.job;
+            params.remark = this.forms.remark;
+            addUser(params)
+                .then(res => {
+                  if(res.code === 10000) {
+                    this.init();
+                    this.$message.success(res.message);
+                  } else {
+                    this.$message.error(res.message);
+                  }
+                  this.reset();
+                })
+          }
+          this.dialogVisible = false;
+        } else {
+          console.log('error submit!!');
+          return false;
+        }
+      });
+    },
+    // 重置
+    reset() {
+      this.forms = {
+        userName: '',
+        remark: '',
+        mobile: '',
+        male: '',
+        job: '',
+        birthday: '',
+        address: '',
+        id: ''
+      };
+      this.pageNum = 1;
+      this.keyword = '';
+    },
+    // 选择
+    handleSelectionChange(val) {
+      let arr = [];
+      val.forEach(item => {
+        arr.push(item.id);
+      });
+      this.selectList = arr.join(',');
+    },
+    // 批量删除
+    delAll() {
+      if(this.selectList) {
+        this.$confirm('此操作将永久删除批量删除, 是否继续?', '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }).then(() => {
+          delUser( {userIds: this.selectList})
+              .then(res => {
+                if(res.code === 10000) {
+                  this.init();
+                  this.selectList = '';
+                  this.$message.success(res.message);
+                } else {
+                  this.$message.error(res.message);
+                }
+              })
+        }).catch(() => {
+          this.$message({
+            type: 'info',
+            message: '已取消删除'
+          });
+        });
+      } else {
+        this.$alert('请先选择批量删除的用户！');
+      }
+    },
+    // 是否启用
+    handleSwitch(val, data) {
+      let accountStatus = '';
+      if(val) {
+        accountStatus = 1;
+      } else {
+        accountStatus = 0;
+      }
+      isUser( {ids: data.id, status: accountStatus})
+          .then(res => {
+            if(res.code ===  10000) {
+              this.$message.success(res.message);
+            } else {
+              this.$message.error(res.message);
+            }
+          })
+    }
+  },
+  mounted() {
+    this.init();
+  }
 }
 </script>
 
 <style scoped>
-
+.box {
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  padding: 20px;
+}
 </style>

src/views/Video/VideoLook.vue

@@ -0,0 +1,13 @@
+<template>
+  <div>视频监控</div>
+</template>
+
+<script>
+export default {
+  name: "VideoLook"
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/Zoology/Sewage.vue

@@ -0,0 +1,13 @@
+<template>
+  <div>污水排放</div>
+</template>
+
+<script>
+export default {
+  name: "Sewage"
+}
+</script>
+
+<style scoped>
+
+</style>