update

.env.development

@@ -2,4 +2,5 @@
 ENV = 'development'
 
 # base api
-VUE_APP_BASE_API = '/dev-api'
+# VUE_APP_BASE_API = '/dev-api'
+VUE_APP_BASE_API = ''

package.json

@@ -59,6 +59,7 @@
     "eslint": "6.7.2",
     "eslint-plugin-vue": "6.2.2",
     "html-webpack-plugin": "3.2.0",
+    "http-proxy-middleware": "^2.0.1",
     "husky": "1.3.1",
     "lint-staged": "8.1.5",
     "mockjs": "1.0.1-beta3",

src/api/article.js

@@ -39,3 +39,4 @@ export function updateArticle(data) {
     data
   })
 }
+

src/api/devicemanagement.js

@@ -0,0 +1,49 @@
+import request from '@/utils/request'
+
+export function fetchList(query) {
+  return request({
+    url: '/ncjtEntranceGuard/getDevicePageList',
+    method: 'get',
+    params: query
+  })
+}
+
+export function fetchGroupIdList(data) {
+  return request({
+    url: '/ncjtEntranceGuard/getGroupList',
+    method: 'post',
+    data
+  })
+}
+
+export function createDevice(data) {
+  return request({
+    url: '/ncjtEntranceGuard/addDeviceWithGroupId',
+    method: 'post',
+    data
+  })
+}
+
+export function updateDevice(data) {
+  return request({
+    url: '/vue-element-admin/article/update',
+    method: 'post',
+    data
+  })
+}
+
+export function fetchDevice(id) {
+  return request({
+    url: '/vue-element-admin/article/detail',
+    method: 'get',
+    params: { id }
+  })
+}
+
+export function fetchPv(pv) {
+  return request({
+    url: '/vue-element-admin/article/pv',
+    method: 'get',
+    params: { pv }
+  })
+}

src/api/getuser.js

@@ -0,0 +1,45 @@
+import request from '@/utils/request'
+
+export function fetchList(query) {
+  return request({
+    url: '/ncjtEntranceGuard/getUserAdminPageList',
+    method: 'get',
+    params: query
+  })
+}
+
+export function createAdmin(data) {
+  return request({
+    url: '/ncjtEntranceGuard/registerAdmin',
+    method: 'post',
+    data
+  })
+}
+
+export function updateAdmin(data) {
+  return request({
+    url: '/vue-element-admin/article/update',
+    method: 'post',
+    data
+  })
+}
+
+// export function fetchAdmin(id) {
+//   return request({
+//     url: '/vue-element-admin/article/detail',
+//     method: 'get',
+//     params: {
+//       id
+//     }
+//   })
+// }
+
+// export function fetchPv(pv) {
+//   return request({
+//     url: '/vue-element-admin/article/pv',
+//     method: 'get',
+//     params: {
+//       pv
+//     }
+//   })
+// }

src/api/groupmanagement.js

@@ -0,0 +1,49 @@
+import request from '@/utils/request'
+
+export function fetchList(query) {
+  return request({
+    url: '/ncjtEntranceGuard/getGroupList',
+    method: 'get',
+    params: query
+  })
+}
+
+export function fetchDataList(query) {
+  return request({
+    url: '/ncjtEntranceGuard/getUserByGroupId',
+    method: 'get',
+    params: query
+  })
+}
+
+export function createGroup(data) {
+  return request({
+    url: '/vue-element-admin/article/create',
+    method: 'post',
+    data
+  })
+}
+
+export function updateGroup(data) {
+  return request({
+    url: '/vue-element-admin/article/update',
+    method: 'post',
+    data
+  })
+}
+
+// export function fetchGroup(id) {
+//   return request({
+//     url: '/vue-element-admin/article/detail',
+//     method: 'get',
+//     params: { id }
+//   })
+// }
+
+// export function fetchPv(pv) {
+//   return request({
+//     url: '/vue-element-admin/article/pv',
+//     method: 'get',
+//     params: { pv }
+//   })
+// }

src/api/index.js

@@ -0,0 +1,49 @@
+import request from '@/utils/request'
+
+export function fetchList(query) {
+  return request({
+    url: '/ncjtEntranceGuard/getGroupList',
+    method: 'get',
+    params: query
+  })
+}
+
+export function fetchGroupIdList(query) {
+  return request({
+    url: '/vue-element-admin/article/list',
+    method: 'get',
+    params: query
+  })
+}
+
+// export function fetchArticle(id) {
+//   return request({
+//     url: '/vue-element-admin/article/detail',
+//     method: 'get',
+//     params: { id }
+//   })
+// }
+
+// export function fetchPv(pv) {
+//   return request({
+//     url: '/vue-element-admin/article/pv',
+//     method: 'get',
+//     params: { pv }
+//   })
+// }
+
+// export function createArticle(data) {
+//   return request({
+//     url: '/vue-element-admin/article/create',
+//     method: 'post',
+//     data
+//   })
+// }
+
+// export function updateArticle(data) {
+//   return request({
+//     url: '/vue-element-admin/article/update',
+//     method: 'post',
+//     data
+//   })
+// }

src/api/user.js

@@ -2,6 +2,7 @@ import request from '@/utils/request'
 
 export function login(data) {
   return request({
+    // url: '/ncjtEntranceGuard/loginAdmin',
     url: '/vue-element-admin/user/login',
     method: 'post',
     data
@@ -10,6 +11,7 @@ export function login(data) {
 
 export function getInfo(token) {
   return request({
+    // url: '/ncjtEntranceGuard/getInfoAdmin',
     url: '/vue-element-admin/user/info',
     method: 'get',
     params: { token }

src/components/Charts/MixChart.vue

@@ -46,13 +46,13 @@ export default {
       this.chart = echarts.init(document.getElementById(this.id))
       const xData = (function() {
         const data = []
-        for (let i = 1; i < 13; i++) {
-          data.push(i + 'month')
+        for (let i = 1; i < 25; i++) {
+          data.push(i + ':00')
         }
         return data
       }())
       this.chart.setOption({
-        backgroundColor: '#344b58',
+        backgroundColor: '#fff',
         title: {
           text: 'statistics',
           x: '20',
@@ -78,20 +78,12 @@ export default {
           left: '5%',
           right: '5%',
           borderWidth: 0,
-          top: 150,
+          top: '5%',
           bottom: 95,
           textStyle: {
             color: '#fff'
           }
         },
-        legend: {
-          x: '5%',
-          top: '10%',
-          textStyle: {
-            color: '#90979c'
-          },
-          data: ['female', 'male', 'average']
-        },
         calculable: true,
         xAxis: [{
           type: 'category',
@@ -135,109 +127,17 @@ export default {
             show: false
           }
         }],
-        dataZoom: [{
-          show: true,
-          height: 30,
-          xAxisIndex: [
-            0
-          ],
-          bottom: 30,
-          start: 10,
-          end: 80,
-          handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
-          handleSize: '110%',
-          handleStyle: {
-            color: '#d3dee5'
-
-          },
-          textStyle: {
-            color: '#fff' },
-          borderColor: '#90979c'
-
-        }, {
-          type: 'inside',
-          show: true,
-          height: 15,
-          start: 1,
-          end: 35
-        }],
-        series: [{
-          name: 'female',
-          type: 'bar',
-          stack: 'total',
-          barMaxWidth: 35,
-          barGap: '10%',
-          itemStyle: {
-            normal: {
-              color: 'rgba(255,144,128,1)',
-              label: {
-                show: true,
-                textStyle: {
-                  color: '#fff'
-                },
-                position: 'insideTop',
-                formatter(p) {
-                  return p.value > 0 ? p.value : ''
-                }
-              }
-            }
-          },
-          data: [
-            709,
-            1917,
-            2455,
-            2610,
-            1719,
-            1433,
-            1544,
-            3285,
-            5208,
-            3372,
-            2484,
-            4078
-          ]
-        },
 
+        series: [
         {
-          name: 'male',
-          type: 'bar',
-          stack: 'total',
-          itemStyle: {
-            normal: {
-              color: 'rgba(0,191,183,1)',
-              barBorderRadius: 0,
-              label: {
-                show: true,
-                position: 'top',
-                formatter(p) {
-                  return p.value > 0 ? p.value : ''
-                }
-              }
-            }
-          },
-          data: [
-            327,
-            1776,
-            507,
-            1200,
-            800,
-            482,
-            204,
-            1390,
-            1001,
-            951,
-            381,
-            220
-          ]
-        }, {
-          name: 'average',
+          name: '',
           type: 'line',
           stack: 'total',
           symbolSize: 10,
           symbol: 'circle',
           itemStyle: {
             normal: {
-              color: 'rgba(252,230,48,1)',
+              color: '#2B95F8',
               barBorderRadius: 0,
               label: {
                 show: true,
@@ -253,6 +153,18 @@ export default {
             3693,
             2962,
             3810,
+            25190,
+            1915,
+            1748,
+            4675,
+            6209,
+            4323,
+            2865,
+            4298,
+            10360,
+            3693,
+            2962,
+            3810,
             2519,
             1915,
             1748,

src/components/Pagination/index.vue

@@ -35,7 +35,7 @@ export default {
     pageSizes: {
       type: Array,
       default() {
-        return [10, 20, 30, 50]
+        return [4, 8, 10, 20, 30, 50]
       }
     },
     layout: {

src/layout/components/Navbar - 副本.vue

@@ -0,0 +1,167 @@
+<template>
+  <div class="navbar">
+    <hamburger id="hamburger-container" :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />
+
+    <breadcrumb id="breadcrumb-container" class="breadcrumb-container" />
+
+    <div class="right-menu">
+      <template v-if="device!=='mobile'">
+        <search id="header-search" class="right-menu-item" />
+
+        <error-log class="errLog-container right-menu-item hover-effect" />
+
+        <screenfull id="screenfull" class="right-menu-item hover-effect" />
+
+        <el-tooltip content="Global Size" effect="dark" placement="bottom">
+          <size-select id="size-select" class="right-menu-item hover-effect" />
+        </el-tooltip>
+
+      </template>
+
+      <el-dropdown class="avatar-container right-menu-item hover-effect" trigger="click">
+        <div class="avatar-wrapper">
+          <img :src="avatar+'?imageView2/1/w/80/h/80'" class="user-avatar">
+          <i class="el-icon-caret-bottom" />
+        </div>
+        <el-dropdown-menu slot="dropdown">
+          <router-link to="/profile/index">
+            <el-dropdown-item>Profile</el-dropdown-item>
+          </router-link>
+          <router-link to="/">
+            <el-dropdown-item>首页</el-dropdown-item>
+          </router-link>
+          <a target="_blank" href="https://github.com/PanJiaChen/vue-element-admin/">
+            <el-dropdown-item>Github</el-dropdown-item>
+          </a>
+          <a target="_blank" href="https://panjiachen.github.io/vue-element-admin-site/#/">
+            <el-dropdown-item>Docs</el-dropdown-item>
+          </a>
+          <el-dropdown-item divided @click.native="logout">
+            <span style="display:block;">登出</span>
+          </el-dropdown-item>
+        </el-dropdown-menu>
+      </el-dropdown>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import Breadcrumb from '@/components/Breadcrumb'
+import Hamburger from '@/components/Hamburger'
+import ErrorLog from '@/components/ErrorLog'
+import Screenfull from '@/components/Screenfull'
+import SizeSelect from '@/components/SizeSelect'
+import Search from '@/components/HeaderSearch'
+
+export default {
+  components: {
+    Breadcrumb,
+    Hamburger,
+    ErrorLog,
+    Screenfull,
+    SizeSelect,
+    Search
+  },
+  computed: {
+    ...mapGetters([
+      'sidebar',
+      'avatar',
+      'device'
+    ])
+  },
+  methods: {
+    toggleSideBar() {
+      this.$store.dispatch('app/toggleSideBar')
+    },
+    async logout() {
+      await this.$store.dispatch('user/logout')
+      this.$router.push(`/login?redirect=${this.$route.fullPath}`)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.navbar {
+  height: 50px;
+  overflow: hidden;
+  position: relative;
+  background: #fff;
+  box-shadow: 0 1px 4px rgba(0,21,41,.08);
+
+  .hamburger-container {
+    line-height: 46px;
+    height: 100%;
+    float: left;
+    cursor: pointer;
+    transition: background .3s;
+    -webkit-tap-highlight-color:transparent;
+
+    &:hover {
+      background: rgba(0, 0, 0, .025)
+    }
+  }
+
+  .breadcrumb-container {
+    float: left;
+  }
+
+  .errLog-container {
+    display: inline-block;
+    vertical-align: top;
+  }
+
+  .right-menu {
+    float: right;
+    height: 100%;
+    line-height: 50px;
+
+    &:focus {
+      outline: none;
+    }
+
+    .right-menu-item {
+      display: inline-block;
+      padding: 0 8px;
+      height: 100%;
+      font-size: 18px;
+      color: #5a5e66;
+      vertical-align: text-bottom;
+
+      &.hover-effect {
+        cursor: pointer;
+        transition: background .3s;
+
+        &:hover {
+          background: rgba(0, 0, 0, .025)
+        }
+      }
+    }
+
+    .avatar-container {
+      margin-right: 30px;
+
+      .avatar-wrapper {
+        margin-top: 5px;
+        position: relative;
+
+        .user-avatar {
+          cursor: pointer;
+          width: 40px;
+          height: 40px;
+          border-radius: 10px;
+        }
+
+        .el-icon-caret-bottom {
+          cursor: pointer;
+          position: absolute;
+          right: -20px;
+          top: 25px;
+          font-size: 12px;
+        }
+      }
+    }
+  }
+}
+</style>

src/layout/components/Navbar-1.vue

@@ -1,175 +0,0 @@
-<template>
-
-  <div class="navbar">
-    <div class="navbar-img">
-      <img src="../../../public/title.png">
-    </div>
-    <div class="navbar-info">
-      门禁设备管理平台
-    </div>
-
-    <el-dropdown class="avatar-container right-menu-item hover-effect" trigger="click">
-      <div class="avatar-wrapper">
-        <img :src="avatar+'?imageView2/1/w/80/h/80'" class="user-avatar">
-        <i class="el-icon-caret-bottom" />
-      </div>
-      <el-dropdown-menu slot="dropdown">
-        <router-link to="/profile/index">
-          <el-dropdown-item>Profile</el-dropdown-item>
-        </router-link>
-        <router-link to="/">
-          <el-dropdown-item>Dashboard</el-dropdown-item>
-        </router-link>
-        <a target="_blank" href="https://github.com/PanJiaChen/vue-element-admin/">
-          <el-dropdown-item>Github</el-dropdown-item>
-        </a>
-        <a target="_blank" href="https://panjiachen.github.io/vue-element-admin-site/#/">
-          <el-dropdown-item>Docs</el-dropdown-item>
-        </a>
-        <el-dropdown-item divided @click.native="logout">
-          <span style="display:block;">Log Out</span>
-        </el-dropdown-item>
-      </el-dropdown-menu>
-    </el-dropdown>
-
-  </div>
-
-</template>
-
-<script>
-
-  import { mapGetters } from 'vuex'
-  import Breadcrumb from '@/components/Breadcrumb'
-  import Hamburger from '@/components/Hamburger'
-  import ErrorLog from '@/components/ErrorLog'
-  import Screenfull from '@/components/Screenfull'
-  import SizeSelect from '@/components/SizeSelect'
-  import Search from '@/components/HeaderSearch'
-
-  export default {
-    components: {
-      Breadcrumb,
-      Hamburger,
-      ErrorLog,
-      Screenfull,
-      SizeSelect,
-      Search
-    },
-    computed: {
-      ...mapGetters([
-        'sidebar',
-        'avatar',
-        'device'
-      ])
-    },
-    methods: {
-      toggleSideBar() {
-        this.$store.dispatch('app/toggleSideBar')
-      },
-      async logout() {
-        await this.$store.dispatch('user/logout')
-        this.$router.push(`/login?redirect=${this.$route.fullPath}`)
-      }
-    }
-  }
-
-</script>
-
-<style lang="scss" scoped>
-  .navbar {
-    display: flex;
-    margin-top: 21px;
-    line-height: 50px;
-    font-size: 30px;
-    font-weight: bold;
-    background: #fff;
-    box-shadow: 0 1px 4px rgba(0, 21, 41, .08);
-
-    .navbar-img {
-      margin-left: 30px;
-
-      img {
-        width: 49px;
-      }
-    }
-
-    .navbar-info {
-      margin-left: 18px;
-    }
-
-
-    .hamburger-container {
-      line-height: 46px;
-      height: 100%;
-      float: left;
-      cursor: pointer;
-      transition: background .3s;
-      -webkit-tap-highlight-color: transparent;
-
-      &:hover {
-        background: rgba(0, 0, 0, .025)
-      }
-    }
-
-    .breadcrumb-container {
-      float: left;
-    }
-
-    .errLog-container {
-      display: inline-block;
-      vertical-align: top;
-    }
-
-    .right-menu {
-      float: right;
-      height: 100%;
-      line-height: 50px;
-
-      &:focus {
-        outline: none;
-      }
-
-      .right-menu-item {
-        display: inline-block;
-        padding: 0 8px;
-        height: 100%;
-        font-size: 18px;
-        color: #5a5e66;
-        vertical-align: text-bottom;
-
-        &.hover-effect {
-          cursor: pointer;
-          transition: background .3s;
-
-          &:hover {
-            background: rgba(0, 0, 0, .025)
-          }
-        }
-      }
-
-      .avatar-container {
-        margin-right: 30px;
-
-        .avatar-wrapper {
-          margin-top: 5px;
-          position: relative;
-
-          .user-avatar {
-            cursor: pointer;
-            width: 40px;
-            height: 40px;
-            border-radius: 10px;
-          }
-
-          .el-icon-caret-bottom {
-            cursor: pointer;
-            position: absolute;
-            right: -20px;
-            top: 25px;
-            font-size: 12px;
-          }
-        }
-      }
-    }
-  }
-</style>

src/layout/components/Navbar.vue

@@ -1,44 +1,34 @@
 <template>
   <div class="navbar">
-    <hamburger id="hamburger-container" :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />
 
-    <breadcrumb id="breadcrumb-container" class="breadcrumb-container" />
+    <div class="left-menu">
+      <div class="navbar-img">
+        <img src="../../../public/title.png">
+      </div>
+      <div class="navbar-info">
+        门禁设备管理平台
+      </div>
+    </div>
 
     <div class="right-menu">
-      <template v-if="device!=='mobile'">
-        <search id="header-search" class="right-menu-item" />
-
-        <error-log class="errLog-container right-menu-item hover-effect" />
-
-        <screenfull id="screenfull" class="right-menu-item hover-effect" />
-
-        <el-tooltip content="Global Size" effect="dark" placement="bottom">
-          <size-select id="size-select" class="right-menu-item hover-effect" />
-        </el-tooltip>
-
-      </template>
-
+      <div class="right-menu-time">
+        <span>{{dateFormat(newDate)}}</span>
+      </div>
       <el-dropdown class="avatar-container right-menu-item hover-effect" trigger="click">
         <div class="avatar-wrapper">
-          <img :src="avatar+'?imageView2/1/w/80/h/80'" class="user-avatar">
-          <i class="el-icon-caret-bottom" />
+          退出
+          <svg-icon class="icon" icon-class="退出" />
         </div>
         <el-dropdown-menu slot="dropdown">
-          <router-link to="/profile/index">
-            <el-dropdown-item>Profile</el-dropdown-item>
-          </router-link>
+
           <router-link to="/">
-            <el-dropdown-item>Dashboard</el-dropdown-item>
+            <el-dropdown-item>首页</el-dropdown-item>
           </router-link>
-          <a target="_blank" href="https://github.com/PanJiaChen/vue-element-admin/">
-            <el-dropdown-item>Github</el-dropdown-item>
-          </a>
-          <a target="_blank" href="https://panjiachen.github.io/vue-element-admin-site/#/">
-            <el-dropdown-item>Docs</el-dropdown-item>
-          </a>
+
           <el-dropdown-item divided @click.native="logout">
-            <span style="display:block;">Log Out</span>
+            <span style="display:block;">退出账号</span>
           </el-dropdown-item>
+
         </el-dropdown-menu>
       </el-dropdown>
     </div>
@@ -46,122 +36,130 @@
 </template>
 
 <script>
-import { mapGetters } from 'vuex'
-import Breadcrumb from '@/components/Breadcrumb'
-import Hamburger from '@/components/Hamburger'
-import ErrorLog from '@/components/ErrorLog'
-import Screenfull from '@/components/Screenfull'
-import SizeSelect from '@/components/SizeSelect'
-import Search from '@/components/HeaderSearch'
-
-export default {
-  components: {
-    Breadcrumb,
-    Hamburger,
-    ErrorLog,
-    Screenfull,
-    SizeSelect,
-    Search
-  },
-  computed: {
-    ...mapGetters([
-      'sidebar',
-      'avatar',
-      'device'
-    ])
-  },
-  methods: {
-    toggleSideBar() {
-      this.$store.dispatch('app/toggleSideBar')
+  import {
+    mapGetters
+  } from 'vuex'
+  import ErrorLog from '@/components/ErrorLog'
+  import SizeSelect from '@/components/SizeSelect'
+  import Search from '@/components/HeaderSearch'
+
+  export default {
+    components: {
+      ErrorLog,
+      SizeSelect,
+      Search
+    },
+    computed: {
+      ...mapGetters([
+        'sidebar',
+        'avatar',
+        'device'
+      ])
+    },
+    data() {
+      return {
+        newDate: new Date()
+      };
+    },
+    mounted() {
+      let that = this
+      this.timer = setInterval(function() {
+        that.newDate = new Date().toLocaleString()
+      })
     },
-    async logout() {
-      await this.$store.dispatch('user/logout')
-      this.$router.push(`/login?redirect=${this.$route.fullPath}`)
+    // 销毁时清除计时器
+    beforeDestroy: function() {
+      if (this.timer) {
+        clearInterval(this.timer)
+      }
+    },
+    methods: {
+      async logout() {
+        await this.$store.dispatch('user/logout')
+        this.$router.push(`/login?redirect=${this.$route.fullPath}`)
+      },
+      dateFormat() {
+        var date = new Date()
+        var year = date.getFullYear()
+        var month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1
+        var day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate()
+        var hours = date.getHours() < 10 ? '0' + date.getHours() : date.getHours()
+        var minutes = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()
+        var seconds = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds()
+        let week = date.getDay() // 星期
+        let weekArr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
+        // 拼接 时间格式处理
+        return year + '年' + month + '月' + day + '日 ' + hours + ':' + minutes + ':' + seconds + ' ' + weekArr[week]
+      }
     }
   }
-}
 </script>
 
 <style lang="scss" scoped>
-.navbar {
-  height: 50px;
-  overflow: hidden;
-  position: relative;
-  background: #fff;
-  box-shadow: 0 1px 4px rgba(0,21,41,.08);
-
-  .hamburger-container {
-    line-height: 46px;
-    height: 100%;
-    float: left;
-    cursor: pointer;
-    transition: background .3s;
-    -webkit-tap-highlight-color:transparent;
-
-    &:hover {
-      background: rgba(0, 0, 0, .025)
-    }
-  }
-
-  .breadcrumb-container {
-    float: left;
-  }
-
-  .errLog-container {
-    display: inline-block;
-    vertical-align: top;
-  }
-
-  .right-menu {
-    float: right;
-    height: 100%;
+  .navbar {
+    display: flex;
+    margin-top: 21px;
     line-height: 50px;
+    font-size: 30px;
+    font-weight: bold;
+    background: #fff;
+    box-shadow: 0 1px 4px rgba(0, 21, 41, .08);
 
-    &:focus {
-      outline: none;
-    }
-
-    .right-menu-item {
-      display: inline-block;
-      padding: 0 8px;
-      height: 100%;
-      font-size: 18px;
-      color: #5a5e66;
-      vertical-align: text-bottom;
+    .left-menu {
+      display: flex;
+      flex: 1;
 
-      &.hover-effect {
-        cursor: pointer;
-        transition: background .3s;
+      .navbar-img {
+        margin-left: 30px;
 
-        &:hover {
-          background: rgba(0, 0, 0, .025)
+        img {
+          width: 49px;
         }
       }
+
+      .navbar-info {
+        margin-left: 18px;
+      }
     }
 
-    .avatar-container {
-      margin-right: 30px;
+    .right-menu {
+      display: flex;
+      font-size: 15px;
+
+      &:focus {
+        outline: none;
+      }
+      .right-menu-time {
+        margin-right: 50px;
+      }
 
-      .avatar-wrapper {
-        margin-top: 5px;
-        position: relative;
+      .right-menu-item {
+        display: inline-block;
+        padding: 0 8px;
+        height: 100%;
+        font-size: 18px;
+        color: #5a5e66;
+        vertical-align: text-bottom;
 
-        .user-avatar {
+        &.hover-effect {
           cursor: pointer;
-          width: 40px;
-          height: 40px;
-          border-radius: 10px;
+          transition: background .3s;
+
+          &:hover {
+            background: rgba(0, 0, 0, .025)
+          }
         }
 
-        .el-icon-caret-bottom {
-          cursor: pointer;
-          position: absolute;
-          right: -20px;
-          top: 25px;
-          font-size: 12px;
+        .avatar-wrapper {
+          .icon {
+            margin-left: 10px;
+          }
         }
       }
+
+      .avatar-container {
+        margin-right: 30px;
+      }
     }
   }
-}
 </style>

src/main.js

@@ -28,10 +28,10 @@ import * as filters from './filters' // global filters
  * Currently MockJs will be used in the production environment,
  * please remove it before going online ! ! !
  */
-if (process.env.NODE_ENV === 'production') {
-  const { mockXHR } = require('../mock')
-  mockXHR()
-}
+// if (process.env.NODE_ENV === 'production') {
+//   const { mockXHR } = require('../mock')
+//   mockXHR()
+// }
 
 Vue.use(Element, {
   size: Cookies.get('size') || 'medium', // set element-ui default size

src/router/index.js

@@ -73,37 +73,37 @@ export const constantRoutes = [
   {
     path: '/',
     component: Layout,
-    redirect: '/dashboard',
+    redirect: '/index',
     children: [
       {
-        path: 'dashboard',
-        component: () => import('@/views/dashboard/index'),
-        name: 'Dashboard',
+        path: 'index',
+        component: () => import('@/views/index/index'),
+        name: 'Index',
         meta: { title: '首页', icon: '首页', affix: true }
       }
     ]
   },
   {
-    path: '/documentation',
+    path: '/deviceManagement',
     component: Layout,
     children: [
       {
         path: 'index',
-        component: () => import('@/views/documentation/index'),
-        name: 'Documentation',
+        component: () => import('@/views/deviceManagement/index'),
+        name: 'deviceManagement',
         meta: { title: '设备管理', icon: '设备管理', noCache: true }
       }
     ]
   },
   {
-    path: '/guide',
+    path: '/groupManagement',
     component: Layout,
-    redirect: '/guide/index',
+    redirect: '/groupManagement/index',
     children: [
       {
         path: 'index',
-        component: () => import('@/views/guide/index'),
-        name: 'Guide',
+        component: () => import('@/views/groupManagement/index'),
+        name: 'groupManagement',
         meta: { title: '分组管理', icon: '分组管理', noCache: true }
       }
     ]

src/store/modules/app.js

@@ -2,7 +2,8 @@ import Cookies from 'js-cookie'
 
 const state = {
   sidebar: {
-    opened: Cookies.get('sidebarStatus') ? !!+Cookies.get('sidebarStatus') : true,
+    // opened: Cookies.get('sidebarStatus') ? !!+Cookies.get('sidebarStatus') : true,
+    opened: true,
     withoutAnimation: false
   },
   device: 'desktop',
@@ -11,7 +12,8 @@ const state = {
 
 const mutations = {
   TOGGLE_SIDEBAR: state => {
-    state.sidebar.opened = !state.sidebar.opened
+    // state.sidebar.opened = !state.sidebar.opened
+    state.sidebar.opened = true,
     state.sidebar.withoutAnimation = false
     if (state.sidebar.opened) {
       Cookies.set('sidebarStatus', 1)
@@ -21,7 +23,8 @@ const mutations = {
   },
   CLOSE_SIDEBAR: (state, withoutAnimation) => {
     Cookies.set('sidebarStatus', 0)
-    state.sidebar.opened = false
+    // state.sidebar.opened = false
+    state.sidebar.opened = true
     state.sidebar.withoutAnimation = withoutAnimation
   },
   TOGGLE_DEVICE: (state, device) => {

src/utils/request.js

@@ -48,7 +48,7 @@ service.interceptors.response.use(
     // if the custom code is not 20000, it is judged as an error.
     if (res.code !== 20000) {
       Message({
-        message: res.message || 'Error',
+        message: res.error || 'Error',
         type: 'error',
         duration: 5 * 1000
       })

src/views/deviceManagement/index.vue

@@ -0,0 +1,511 @@
+<template>
+  <div class="body">
+    <!-- 头部区域开始 -->
+
+    <div class="head">
+      <div class="head-img">
+        <img src="../../../public/img-1.png" />
+      </div>
+      <div class="head-info">设备管理</div>
+    </div>
+
+    <!-- 头部区域结束 -->
+
+    <!-- 开关按钮区域开始 -->
+
+    <div class="switch">
+      所有设备
+      <div class="switch-sw">
+        <el-switch v-model="value" active-color="#3BAAFD" inactive-color="#CCCCCC" @change="changeMainSwitch">
+        </el-switch>
+      </div>
+
+      <div class="switch-button">
+        <el-row>
+          <el-button type="primary" size="small" @click="handleCreate"><img src="../../../public/img-3.png" />添加
+          </el-button>
+        </el-row>
+
+        <!-- 添加按钮弹窗区域开始 -->
+
+        <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogVisible" width="30%" center>
+          <el-form ref="dataForm" :model="temp" :rules="rules">
+            <el-form-item style="white-space: pre" label="序列号：" class="switch-button-item" prop="serialNumber">
+              <el-col :span="12">
+                <el-input v-model="temp.serialNumber" autocomplete="off" placeholder="请输入序列号"></el-input>
+              </el-col>
+            </el-form-item>
+            <el-form-item style="white-space: pre" label="名    称：" class="switch-button-item" prop="deviceName">
+              <el-col :span="12">
+                <el-input v-model="temp.deviceName" autocomplete="off" placeholder="请输入名称"></el-input>
+              </el-col>
+            </el-form-item>
+            <el-form-item style="white-space: pre" label="分    组：" class="switch-button-item" prop="groupId">
+              <el-col :span="12">
+                <el-select v-model="temp.groupId" placeholder="请选择活动区域" style="width: 100%">
+                  <el-option :value="item.id" :label="item.name" v-for="item in groupidlist">{{item.name}}</el-option>
+                </el-select>
+              </el-col>
+            </el-form-item>
+          </el-form>
+          <span slot="footer">
+            <el-button type="primary" @click="dialogStatus==='create'?createData():updateData()">确 定</el-button>
+            <el-button @click="dialogVisible = false">取 消</el-button>
+          </span>
+        </el-dialog>
+
+        <!-- 添加按钮弹窗区域结束 -->
+      </div>
+    </div>
+
+    <!-- 开关按钮区域结束 -->
+
+    <!-- 表格区域开始 -->
+    <div class="form">
+      <el-table :data="list" @sort-change="sortChange">
+        
+        <!-- 不显示 -->
+        <el-table-column label="序号" align="center" v-if="false">
+          <template slot-scope="{ row }">
+            <span>{{ row.id }}</span>
+          </template>
+        </el-table-column>
+        <!-- 不显示 -->
+        
+        <el-table-column label="序列号" width="300px" align="center">
+          <template slot-scope="{ row }">
+            <span>{{ row.serialNumber }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="名称" width="300px" align="center">
+          <template slot-scope="{ row }">
+            <span>{{ row.name }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="分组" align="center">
+          <template slot-scope="{ row }">
+            <span>{{ row.group }}</span>
+          </template>
+        </el-table-column>
+
+        <el-table-column label="开关" align="center">
+          <template slot-scope="scope">
+            <el-switch v-model="scope.row.value" active-color="#3BAAFD" inactive-color="#CCCCCC" @change="changeSwitch(scope.row)">
+            </el-switch>
+          </template>
+        </el-table-column>
+
+        </el-table-column>
+
+        <el-table-column label="操作" width="180px" align="center">
+          <template slot-scope="{ row, $index }">
+            <el-button type="text" size="small" @click="handleUpdate(row)">编辑</el-button>
+
+            <el-button @click="dialogTableVisible = true" type="text" size="small">
+              查看详情</el-button>
+
+            <el-button @click="handleDelete(row, $index)" type="text" size="small" class="button"><img
+                src="../../../public/img-2.png" />删除</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <!-- 查看详情弹窗区域开始 -->
+
+      <el-dialog title="通行记录" :visible.sync="dialogTableVisible">
+        <el-row :gutter="20">
+          <el-col :span="7">
+            <div>
+              姓名：
+              <el-input v-model="gridData.name" autocomplete="off" placeholder="请输入姓名" style="width: 150px"></el-input>
+            </div>
+          </el-col>
+          <el-col :span="7">
+            <div>
+              学号：
+              <el-input v-model="gridData.number" autocomplete="off" placeholder="请输入学号" style="width: 150px">
+              </el-input>
+            </div>
+          </el-col>
+          <el-col :span="7">
+            <div>
+              时间：
+              <el-date-picker v-model="gridData.date" type="datetime" placeholder="选择日期时间" style="width: 150px">
+              </el-date-picker>
+            </div>
+          </el-col>
+          <el-col :span="3">
+            <div>
+              <el-button type="primary">搜索</el-button>
+            </div>
+          </el-col>
+        </el-row>
+
+        <el-table :data="gridData">
+          <el-table-column type="selection" width="55">
+            <template slot-scope="scope">
+              <el-checkbox v-model="scope.row.checked"></el-checkbox>
+            </template>
+          </el-table-column>
+          <el-table-column property="name" label="姓名"></el-table-column>
+          <el-table-column property="number" label="学号"></el-table-column>
+          <el-table-column property="date" label="通行时间"></el-table-column>
+        </el-table>
+
+        <el-row :gutter="20">
+          <el-col :span="8">
+            <div class="foot-button">
+              <el-button type="primary">导出记录</el-button>
+            </div>
+          </el-col>
+          <el-col :span="16">
+            <div>
+              <pagination v-show="total > 0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit"
+                @pagination="getList" />
+            </div>
+          </el-col>
+        </el-row>
+      </el-dialog>
+
+      <!-- 查看详情弹窗区域结束 -->
+
+      <!-- 删除弹窗开始 -->
+
+      <!-- <el-dialog title="提示" :visible.sync="dialogremove" width="30%" center>
+        <div class="button-img" align="center">
+          <img src="../../../public/group-2.png" />
+        </div>
+
+        <div class="button-info" align="center">
+          删除该设备将删除设备上的所有人员信息
+        </div>
+
+        <span slot="footer">
+          <el-button type="primary" @click="handleDelete(row, $index)">确 定</el-button>
+          <el-button @click="dialogremove = false">取 消</el-button>
+        </span>
+      </el-dialog> -->
+
+      <!-- 删除弹窗结束 -->
+    </div>
+
+    <!-- 表格区域结束 -->
+
+    <!-- 底部分页区开始 -->
+
+    <div class="block">
+      <template>
+        <pagination :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />
+      </template>
+    </div>
+
+    <!-- 底部分页区结束 -->
+  </div>
+</template>
+
+<script>
+  import Pagination from "@/components/Pagination";
+  import {
+    fetchList,
+    fetchGroupIdList,
+    createDevice,
+    updateDevice,
+    // fetchDevice,
+    // fetchPv
+  } from "@/api/devicemanagement";
+  export default {
+    components: {
+      Pagination,
+    },
+    data() {
+      return {
+        list: [],
+        groupidlist: [],
+        gridData: [{
+            date: "2016-05-02 11:15:02",
+            name: "王小虎",
+            number: "1403090101",
+          },
+          {
+            date: "2016-05-04 11:15:56",
+            name: "王虎",
+            number: "1403090102",
+          },
+          {
+            date: "2016-05-04 11:15:56",
+            name: "王虎",
+            number: "1403090102",
+          },
+          {
+            date: "2016-05-04 11:15:56",
+            name: "王虎",
+            number: "1403090102",
+          },
+          {
+            date: "2016-05-04 11:15:56",
+            name: "王虎",
+            number: "1403090102",
+          },
+          {
+            date: "2016-05-04 11:15:56",
+            name: "王虎",
+            number: "1403090102",
+          },
+        ],
+        total: 0, //数据的总数//
+        listQuery: {
+          page: 1, //当前在第几页//
+          limit: 8, //一页几条//
+        },
+        groupidlistQuery:[],
+        value: false,
+        dialogVisible: false,
+        dialogTableVisible: false,
+        dialogStatus: "",
+        textMap: {
+          update: "编辑",
+          create: "添加",
+        },
+        temp: {
+          id: "",
+          serialNumber: "",
+          deviceName: "",
+          groupId: "",
+        },
+        rules: {
+          serialNumber: [{
+            required: true,
+            message: '请输入序列号',
+            trigger: 'change'
+          }],
+          deviceName: [{
+            required: true,
+            message: '请输入名称',
+            trigger: 'change'
+          }],
+          groupId: [{
+            required: true,
+            message: '请输入分组',
+            trigger: 'change'
+          }],
+        },
+      };
+    },
+    created() {
+      this.getList();
+    },
+    methods: {
+      getList() {
+        fetchList(this.listQuery).then((response) => {
+          this.list = response.data;
+          this.total = response.total;
+        });
+      },
+      handleDelete(row, index) {
+        if (confirm('是否删除？')) {
+          createGroup(this.list).then(() => {
+            this.$notify({
+              title: "删除成功",
+              type: "success",
+              duration: 2000,
+            });
+            this.list.splice(index, 1);
+          });
+        }
+      },
+      resetTemp() {
+        this.temp = {
+          id: undefined,
+          serialNumber: "",
+          deviceName: "",
+          groupId: "",
+        };
+        // this.temp.id = (this.tableData.length - 0) + 1
+      },
+      handleCreate() {
+        this.getGroupIdList();
+        this.resetTemp();
+        this.dialogStatus = "create";
+        this.dialogVisible = true;
+        this.$nextTick(() => {
+          this.$refs["dataForm"].clearValidate();
+        });
+      },
+      getGroupIdList() {
+        fetchGroupIdList(this.groupidlistQuery).then((response) => {
+          this.groupidlist = response.data;
+        });
+      },
+      createData() {
+        this.$refs["dataForm"].validate((valid) => {
+          if (valid) {
+            // this.temp.id = parseInt(Math.random() * 100) + 1024 // mock a id
+            // this.temp.author = 'vue-element-admin'
+            createDevice(this.temp).then(() => {
+              this.list.push({serialNumber:this.temp.serialNumber, name:this.temp.deviceName, group:this.temp.groupId});
+              this.dialogVisible = false;
+              this.$notify({
+                title: "添加成功",
+                type: "success",
+                duration: 2000,
+              });
+            });
+          }
+        });
+      },
+      updateData() {
+        this.$refs["dataForm"].validate((valid) => {
+          if (valid) {
+            const tempData = Object.assign({}, this.temp);
+            // tempData.timestamp = +new Date(tempData
+            //   .timestamp); // change Thu Nov 30 2017 16:41:05 GMT+0800 (CST) to 1512031311464
+            updateDevice(tempData).then(() => {
+              const index = this.list.findIndex((v) => v.id === this.temp.id);
+              this.list.splice(index, 1, this.temp);
+              this.dialogVisible = false;
+              this.$notify({
+                title: "编辑成功",
+                type: "success",
+                duration: 2000,
+              });
+            });
+          }
+        });
+      },
+      handleUpdate(row) {
+        this.temp = Object.assign({}, row); // copy obj
+        this.temp.timestamp = new Date(this.temp.timestamp);
+        this.dialogStatus = "update";
+        this.dialogVisible = true;
+        this.$nextTick(() => {
+          this.$refs["dataForm"].clearValidate();
+        });
+      },
+      handleFilter() {
+        this.listQuery.page = 1
+        this.getList()
+      },
+      sortChange(data) {
+        const {
+          prop,
+          order
+        } = data
+        if (prop === 'id') {
+          this.sortByID(order)
+        }
+      },
+      sortByID(order) {
+        if (order === 'ascending') {
+          this.listQuery.sort = '+id'
+        } else {
+          this.listQuery.sort = '-id'
+        }
+        this.handleFilter()
+      },
+      changeSwitch(data) {
+        console.log(data.value);
+      },
+      changeMainSwitch(value) {
+        console.log(value)
+      }
+    },
+  };
+</script>
+
+<style lang="scss" scoped>
+  .body {
+    width: 1551px;
+    height: 480.5px;
+    margin: 29px 29px 0 31px;
+
+    .head {
+      display: flex;
+      width: 1380px;
+      height: 55px;
+      margin-left: 40px;
+      border-bottom: 1px solid #cccccc;
+
+      .head-img {
+        width: 30px;
+        height: 30px;
+
+        img {
+          width: 30px;
+        }
+      }
+
+      .head-info {
+        width: 95px;
+        height: 22px;
+        margin-top: 5px;
+        margin-left: 16px;
+        font-weight: bold;
+      }
+    }
+
+    .switch {
+      display: flex;
+      width: 1380px;
+      line-height: 58px;
+      margin-left: 40px;
+      font-size: 9px;
+
+      .switch-sw {
+        width: 45px;
+        margin-left: 19px;
+      }
+
+      .switch-button {
+        width: 50px;
+        margin-left: 103px;
+
+        img {
+          width: 10.5px;
+          margin-right: 8px;
+        }
+
+        .switch-button-item {
+          margin-left: 120px;
+          margin-bottom: 50px;
+        }
+      }
+    }
+
+    .form {
+      margin-left: 40px;
+      width: 1380px;
+      // height: 398px;
+      // overflow: hidden;
+
+      .button-img {
+        img {
+          width: 53.5px;
+        }
+      }
+
+      .button-info {
+        margin-top: 39px;
+      }
+
+      .button {
+        color: red;
+      }
+
+      img {
+        width: 8.5px;
+        margin-right: 8px;
+      }
+    }
+
+    .block {
+      display: flex;
+      position: absolute;
+      right: 129px;
+      bottom: 45px;
+    }
+
+    .foot-button {
+      margin-top: 53px;
+    }
+  }
+</style>

src/views/documentation/index.vue

@@ -1,391 +0,0 @@
-<template>
-  <div class="body">
-
-    <!-- 头部区域开始 -->
-
-    <div class="head">
-      <div class="head-img">
-        <img src="../../../public/img-1.png">
-      </div>
-      <div class="head-info">
-        设备管理
-      </div>
-    </div>
-
-    <!-- 头部区域结束 -->
-
-    <!-- 开关按钮区域开始 -->
-
-    <div class="switch">
-      所有设备
-      <div class="switch-sw">
-        <el-switch v-model="value" active-color="#3BAAFD" inactive-color="#CCCCCC">
-        </el-switch>
-      </div>
-
-      <div class="switch-button">
-        <el-row>
-          <el-button type="primary" size="small" @click="dialogVisible = true"><img src="../../../public/img-3.png">添加
-          </el-button>
-        </el-row>
-
-        <!-- 添加按钮弹窗区域开始 -->
-
-        <el-dialog title="添加" :visible.sync="dialogVisible" width="30%" center>
-          <el-form :model="tableData">
-            <el-form-item label="序列号：" class="switch-button-item">
-              <el-col :span="12">
-                <el-input v-model="tableData.number" autocomplete="off" placeholder="请输入序列号"></el-input>
-              </el-col>
-            </el-form-item>
-            <el-form-item style="white-space:pre" label="名    称：" class="switch-button-item">
-              <el-col :span="12">
-                <el-input v-model="tableData.name" autocomplete="off" placeholder="请输入名称"></el-input>
-              </el-col>
-            </el-form-item>
-            <el-form-item style="white-space:pre" label="分    组：" class="switch-button-item">
-              <el-col :span="12">
-                <el-select v-model="tableData.group" placeholder="请选择活动区域" style="width: 100%">
-                  <el-option label="区域一" value="shanghai"></el-option>
-                  <el-option label="区域二" value="beijing"></el-option>
-                </el-select>
-              </el-col>
-            </el-form-item>
-          </el-form>
-          <span slot="footer">
-            <el-button type="primary" @click="handleCreate">确 定</el-button>
-            <el-button @click="dialogVisible = false">取 消</el-button>
-          </span>
-        </el-dialog>
-
-        <!-- 添加按钮弹窗区域结束 -->
-
-      </div>
-    </div>
-
-    <!-- 开关按钮区域结束 -->
-
-    <!-- 表格区域开始 -->
-    <div class="form">
-      <el-table :data="tableData" header-cell-style="background-color: #E6ECFE">
-        <el-table-column label="序号" prop="id" align="center">
-        </el-table-column>
-        <el-table-column label="序列号" prop="number" width="150px" align="center">
-        </el-table-column>
-        <el-table-column label="名称" prop="name" width="150px" align="center">
-        </el-table-column>
-        <el-table-column label="分组" prop="group" align="center">
-        </el-table-column>
-
-        <el-table-column label="开关" align="center">
-
-          <template slot-scope="scope">
-            <el-switch v-model="scope.row.on" active-color="#3BAAFD" active-value="1" inactive-color="#CCCCCC"
-              inactive-value="0" @change="changeSwitch(scope.row)">
-            </el-switch>
-          </template>
-        </el-table-column>
-
-        <el-table-column label="操作" width="180px" align="center">
-          <template slot-scope="scope">
-            <el-button type="text" size="small">编辑</el-button>
-
-            <el-button @click="dialogTableVisible = true" type="text" size="small">
-              查看详情</el-button>
-
-            <el-button @click="dialogremove = true" type="text" size="small" class="button"><img
-                src="../../../public/img-2.png">删除</el-button>
-          </template>
-        </el-table-column>
-      </el-table>
-
-      <!-- 查看详情弹窗区域开始 -->
-
-      <el-dialog title="通行记录" :visible.sync="dialogTableVisible">
-
-        <el-row :gutter="20">
-          <el-col :span="7">
-            <div>
-              姓名：
-              <el-input v-model="gridData.name" autocomplete="off" placeholder="请输入姓名" style="width: 150px"></el-input>
-            </div>
-          </el-col>
-          <el-col :span="7">
-            <div>
-              学号：
-              <el-input v-model="gridData.number" autocomplete="off" placeholder="请输入学号" style="width: 150px">
-              </el-input>
-            </div>
-          </el-col>
-          <el-col :span="7">
-            <div>
-              时间：
-              <el-date-picker v-model="gridData.date" type="datetime" placeholder="选择日期时间" style="width: 150px">
-              </el-date-picker>
-            </div>
-          </el-col>
-          <el-col :span="3">
-            <div>
-              <el-button type="primary">搜索</el-button>
-            </div>
-          </el-col>
-        </el-row>
-
-        <el-table :data="gridData">
-          <el-table-column type="selection" width="55">
-            <template slot-scope="scope">
-              <el-checkbox v-model="scope.row.checked"></el-checkbox>
-            </template>
-          </el-table-column>
-          <el-table-column property="name" label="姓名"></el-table-column>
-          <el-table-column property="number" label="学号"></el-table-column>
-          <el-table-column property="date" label="通行时间"></el-table-column>
-        </el-table>
-
-        <el-row :gutter="20">
-          <el-col :span="8">
-            <div class="foot-button">
-              <el-button type="primary">导出记录</el-button>
-            </div>
-          </el-col>
-          <el-col :span="16">
-            <div class="foot-page">
-              <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
-                :current-page.sync="currentPage3" :page-size="100" layout="prev, pager, next, jumper" :total="10000">
-              </el-pagination>
-            </div>
-          </el-col>
-        </el-row>
-      </el-dialog>
-
-      <!-- 查看详情弹窗区域结束 -->
-
-      <!-- 删除弹窗开始 -->
-
-      <el-dialog title="提示" :visible.sync="dialogremove" width="30%" center>
-
-        <div class="button-img" align="center">
-          <img src="../../../public/group-2.png">
-        </div>
-
-        <div class="button-info" align="center">
-          删除该设备将删除设备上的所有人员信息
-        </div>
-
-
-        <span slot="footer">
-          <el-button type="primary" @click="handleDelete(index)">确 定</el-button>
-          <el-button @click="dialogremove = false">取 消</el-button>
-        </span>
-      </el-dialog>
-
-      <!-- 删除弹窗结束 -->
-
-    </div>
-
-    <!-- 表格区域结束 -->
-
-    <!-- 底部分页区开始 -->
-
-    <div class="block">
-      <template>
-        <pagination :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />
-      </template>
-    </div>
-
-    <!-- 底部分页区结束 -->
-
-  </div>
-
-</template>
-
-<script>
-  import Pagination from '@/components/Pagination'
-  export default {
-    components: {
-      Pagination
-    },
-    methods: {
-      handleDelete(index) {
-        this.$notify({
-          title: '成功',
-          message: '删除成功',
-          type: 'success',
-          duration: 2000
-        })
-        this.dialogremove = false,
-          this.tableData.splice(index, 1)
-      },
-      handleCreate() {
-        this.$notify({
-          title: '成功',
-          message: '添加成功',
-          type: 'success',
-          duration: 2000
-        })
-        this.dialogVisible = false
-        this.tableData.push(length.index, 1)
-      },
-      changeSwitch(data) {
-        console.log(data)
-      },
-      getList() {
-        // 获取数据
-      }
-    },
-
-    data() {
-      return {
-        tableData: [{
-            id: '1',
-            number: 'NCJTXY2156897',
-            name: '科技楼匝机',
-            group: '科技楼-1楼',
-          },
-          {
-            id: '2',
-            number: 'NCJTXY2156897',
-            name: '科技楼匝机',
-            group: '科技楼-1楼',
-          }
-        ],
-        gridData: [{
-          date: '2016-05-02 11:15:02',
-          name: '王小虎',
-          number: '1403090101'
-        }, {
-          date: '2016-05-04 11:15:56',
-          name: '王虎',
-          number: '1403090102'
-        }, {
-          date: '2016-05-04 11:15:56',
-          name: '王虎',
-          number: '1403090102'
-        }, {
-          date: '2016-05-04 11:15:56',
-          name: '王虎',
-          number: '1403090102'
-        }, {
-          date: '2016-05-04 11:15:56',
-          name: '王虎',
-          number: '1403090102'
-        }, {
-          date: '2016-05-04 11:15:56',
-          name: '王虎',
-          number: '1403090102'
-        }],
-        total: 0,
-        listQuery: {
-          page: 1,
-          limit: 20
-        },
-        value: true,
-        dialogVisible: false,
-        dialogTableVisible: false,
-        dialogremove: false
-      }
-    }
-  }
-</script>
-
-<style lang="scss" scoped>
-  .body {
-    width: 1551px;
-    height: 480.5px;
-    margin: 29px 29px 0 31px;
-
-    .head {
-      display: flex;
-      width: 1380px;
-      height: 55px;
-      margin-left: 40px;
-      border-bottom: 1px solid #CCCCCC;
-
-      .head-img {
-        width: 30px;
-        height: 30px;
-
-        img {
-          width: 30px;
-        }
-      }
-
-
-      .head-info {
-        width: 95px;
-        height: 22px;
-        margin-top: 5px;
-        margin-left: 16px;
-        font-weight: bold;
-      }
-    }
-
-    .switch {
-      display: flex;
-      width: 1380px;
-      line-height: 58px;
-      margin-left: 40px;
-      font-size: 9px;
-
-      .switch-sw {
-        width: 45px;
-        margin-left: 19px;
-      }
-
-      .switch-button {
-        width: 50px;
-        margin-left: 103px;
-
-        img {
-          width: 10.5px;
-          margin-right: 8px;
-        }
-
-        .switch-button-item {
-          margin-left: 120px;
-        }
-      }
-    }
-
-    .form {
-      margin-left: 40px;
-      width: 1380px;
-      height: 398px;
-      overflow: hidden;
-
-      .button-img {
-        img {
-          width: 53.5px;
-        }
-      }
-
-      .button-info {
-        margin-top: 39px;
-      }
-
-      .button {
-        color: red;
-      }
-
-      img {
-        width: 8.5px;
-        margin-right: 8px;
-      }
-    }
-
-    .block {
-      display: flex;
-      position: absolute;
-      right: 129px;
-      bottom: 45px;
-    }
-
-    .foot-button {
-      margin-top: 53px;
-    }
-
-    .foot-page {
-      margin-top: 53px;
-    }
-  }
-</style>

src/views/error-page/401.vue

@@ -6,29 +6,28 @@
     <el-row>
       <el-col :span="12">
         <h1 class="text-jumbo text-ginormous">
-          Oops!
+          哎呀!
         </h1>
-        gif来源<a href="https://zh.airbnb.com/" target="_blank">airbnb</a> 页面
         <h2>你没有权限去该页面</h2>
         <h6>如有不满请联系你领导</h6>
         <ul class="list-unstyled">
           <li>或者你可以去:</li>
           <li class="link-type">
-            <router-link to="/dashboard">
+            <router-link to="/index">
               回首页
             </router-link>
           </li>
           <li class="link-type">
-            <a href="https://www.taobao.com/">随便看看</a>
+            <a href="https://www.taobao.com/">随便看看剁手</a>
           </li>
-          <li><a href="#" @click.prevent="dialogVisible=true">点我看图</a></li>
+          <li><a href="#" @click.prevent="dialogVisible=true">点我看图开心一下</a></li>
         </ul>
       </el-col>
       <el-col :span="12">
         <img :src="errGif" width="313" height="428" alt="Girl has dropped her ice cream.">
       </el-col>
     </el-row>
-    <el-dialog :visible.sync="dialogVisible" title="随便看">
+    <el-dialog :visible.sync="dialogVisible" title="随便看" center>
       <img :src="ewizardClap" class="pan-img">
     </el-dialog>
   </div>

src/views/error-page/404.vue

@@ -8,13 +8,10 @@
         <img class="pic-404__child right" src="@/assets/404_images/404_cloud.png" alt="404">
       </div>
       <div class="bullshit">
-        <div class="bullshit__oops">OOPS!</div>
-        <div class="bullshit__info">All rights reserved
-          <a style="color:#20a0ff" href="https://wallstreetcn.com" target="_blank">wallstreetcn</a>
-        </div>
+        <div class="bullshit__oops">哎呀!</div>
         <div class="bullshit__headline">{{ message }}</div>
-        <div class="bullshit__info">Please check that the URL you entered is correct, or click the button below to return to the homepage.</div>
-        <a href="" class="bullshit__return-home">Back to home</a>
+        <div class="bullshit__info">请检查您输入的URL是否正确，或者点击下面的按钮返回主页</div>
+        <a href="" class="bullshit__return-home">返回主页</a>
       </div>
     </div>
   </div>
@@ -26,7 +23,7 @@ export default {
   name: 'Page404',
   computed: {
     message() {
-      return 'The webmaster said that you can not enter this page...'
+      return '页面报错 '
     }
   }
 }

src/views/groupManagement/index.vue

@@ -0,0 +1,575 @@
+<template>
+  <div class="body">
+
+    <!-- 侧边栏区域开始 -->
+
+    <div class="nav">
+      <div class="nav-head">
+        <div class="head-img">
+          <img src="../../../public/group-1.png">
+        </div>
+        <div class="head-info">
+          分组管理
+        </div>
+      </div>
+
+      <div class="button">
+        <el-button type="text" size="small" @click="handleUpdate">编辑</el-button>
+        <el-button type="text" size="small" @click="handleCreate">新建分组</el-button>
+
+        <!-- 新建分组弹窗开始 -->
+
+        <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" width="40%" center>
+          <el-form :model="form" ref="dataForm" :rules="rules">
+
+            <el-form-item label="分组名称" prop="name">
+              <el-input v-model="form.name" autocomplete="off" placeholder="请输入分组名称"></el-input>
+            </el-form-item>
+
+          </el-form>
+          <div slot="footer" class="dialog-footer">
+            <el-button type="primary" @click="dialogStatus === 'create' ? createData() : updateData()">确 定</el-button>
+            <el-button @click="dialogFormVisible = false,show = false">取 消</el-button>
+          </div>
+        </el-dialog>
+
+        <!-- 新建分组弹窗结束 -->
+
+        <el-button type="text" size="small" class="remove" @click="handleGroupDelete"><img
+            src="../../../public/img-2.png">删除</el-button>
+
+        <!-- 删除弹窗区域开始 -->
+
+        <!-- <el-dialog title="提示" :visible.sync="dialogVisible" width="30%" center>
+
+          <div class="button-img" align="center">
+            <img src="../../../public/group-2.png">
+          </div>
+
+          <div class="button-info" align="center">
+            删除分组将删除设备上的所有人员信息
+          </div>
+
+
+          <span slot="footer">
+            <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
+            <el-button @click="dialogVisible = false">取 消</el-button>
+          </span>
+        </el-dialog> -->
+
+        <!-- 删除弹窗区域结束 -->
+
+      </div>
+
+      <div class="nav-info">
+        全部分组
+      </div>
+
+      <div class="nav-list">
+        <el-menu background-color="#fff" text-color="#333333" active-text-color="#3BAAFD" @select="handleSelect">
+          <el-menu-item v-for="item in list" :index=item.id>
+            <i class="el-icon-menu"></i>
+            <span slot="title">{{item.name}}</span>
+          </el-menu-item>
+        </el-menu>
+      </div>
+
+      <div class="nav-footer" v-if="show">
+        编辑分组：科技楼
+      </div>
+
+      <!-- <div class="footer-button" v-if="show">
+        <el-row>
+          <el-button type="primary" size="mini" @click="show=false">保存</el-button>
+          <el-button type="primary" size="mini" plain @click="show=false">取消</el-button>
+        </el-row>
+      </div> -->
+    </div>
+
+    <!-- 侧边栏区域结束 -->
+
+    <!-- 右侧表格区域开始 -->
+
+    <div class="form">
+
+      <div class="form-head">
+        <el-button size="mini">导入模板</el-button>
+        <el-button type="text">模板下载</el-button>
+        <span class="head-info">学院：</span>
+        <span class="input">
+          <el-input v-model="listQuery.name" size="mini" placeholder="请输入专业名称" @keyup.enter.native="handleFilter">
+          </el-input>
+        </span>
+        性别：
+        <span class="input-select">
+          <el-select v-model="listQuery.sex" size="mini" placeholder="全部/男/女">
+            <el-option v-for="item in sexs" :key="item.value" :label="item.label" :value="item.value">
+            </el-option>
+          </el-select>
+        </span>
+        姓名：
+        <span class="input">
+          <el-input v-model="listQuery.name" size="mini" placeholder="请输入姓名" @keyup.enter.native="handleFilter">
+          </el-input>
+        </span>
+        <el-button type="primary" size="mini" class="button" @click="handleFilter">搜索</el-button>
+      </div>
+
+      <div class="form-body">
+        <el-table :data="dataList">
+          <el-table-column label="序号" width="100px" align="center">
+            <template slot-scope="{ row }">
+              <span>{{ row.id }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column label="姓名" width="130px" align="center">
+            <template slot-scope="{ row }">
+              <span>{{ row.name }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column label="身份证" width="130px" align="center">
+            <template slot-scope="{ row }">
+              <span>{{ row.identity }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column label="性别" width="100px" align="center">
+            <template slot-scope="{ row }">
+              <span>{{ row.sex }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column label="宿舍号" width="130px" align="center">
+            <template slot-scope="{ row }">
+              <span></span>
+            </template>
+          </el-table-column>
+          <el-table-column label="专业/学院" width="130px" align="center">
+            <template slot-scope="{ row }">
+              <span></span>
+            </template>
+          </el-table-column>
+          <el-table-column label="手机号" width="130px" align="center">
+            <template slot-scope="{ row }">
+              <span></span>
+            </template>
+          </el-table-column>
+          <el-table-column label="通行权限" width="190px" align="center">
+            <template slot-scope="{ row }">
+              <span></span>
+            </template>
+          </el-table-column>
+          <el-table-column label="操作" width="130px" align="center">
+            <template slot-scope="{ row, $index }">
+              <el-button type="text" size="small" @click="dialogedit = true">编辑分组</el-button>
+              <el-button @click="handleDelete(row, $index)" type="text" size="small" class="button"><img
+                  src="../../../public/img-2.png">删除</el-button>
+
+              <!-- 编辑分组弹窗开始 -->
+
+              <el-dialog title="编辑分组" :visible.sync="dialogedit" width="30%" center>
+
+                通行权限：
+                <el-select v-model="value" multiple filterable allow-create default-first-option placeholder="请选择分组"
+                  style="width:380px">
+                  <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
+                  </el-option>
+                </el-select>
+
+                <span slot="footer">
+                  <el-button type="primary" @click="dialogedit = false">确 定</el-button>
+                  <el-button @click="dialogedit = false">取 消</el-button>
+                </span>
+              </el-dialog>
+
+              <!-- 编辑分组弹窗结束 -->
+
+
+              <!-- 表格区域删除弹窗开始 -->
+
+              <!-- <el-dialog title="提示" :visible.sync="dialogeremovefrom" width="30%" center>
+
+                <div class="button-img" align="center">
+                  <img src="../../../public/group-2.png">
+                </div>
+
+                <div class="button-info" align="center">
+                  确定删除该信息吗？
+                </div>
+
+
+                <span slot="footer">
+                  <el-button type="primary" @click="handleDelete(index)">确 定</el-button>
+                  <el-button @click="dialogeremovefrom = false">取 消</el-button>
+                </span>
+              </el-dialog> -->
+
+              <!-- 表格区域删除弹窗结束 -->
+
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+
+      <!-- 右侧表格区域结束 -->
+
+      <!-- 底部分页器区域开始 -->
+
+      <div class="form-footer">
+        <template>
+          <pagination :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />
+        </template>
+      </div>
+
+      <!-- 底部分页器区域结束 -->
+
+    </div>
+  </div>
+</template>
+
+<script>
+  import Pagination from '@/components/Pagination';
+  import {
+    fetchList,
+    fetchDataList,
+    createGroup,
+    updateGroup,
+    // fetchGroup,
+    // fetchPv
+  } from "@/api/groupmanagement";
+  export default {
+    components: {
+      Pagination
+    },
+    data() {
+      return {
+        sexs: [{
+          value: '选项1',
+          label: '男'
+        }, {
+          value: '选项2',
+          label: '女'
+        }],
+        options: [{
+          value: '1',
+          label: '科技园-1'
+        }, {
+          value: '2',
+          label: '科技园-2'
+        }, {
+          value: '3',
+          label: '科技园-3'
+        }],
+        form: {
+          name: '',
+          // region: '',
+          // date1: '',
+          // date2: '',
+          // delivery: false,
+          // type: [],
+          // resource: '',
+          // desc: ''
+        },
+        listform: {
+          id: '',
+          name: '',
+          sex: '',
+          identity: ''
+        },
+        textMap: {
+          update: "编辑",
+          create: "新建分组",
+        },
+        rules: {
+          name: [{
+            required: true,
+            message: "请输入分组名称",
+            trigger: "change"
+          }],
+        },
+        dialogStatus: "",
+        list: [],
+        dataList: [],
+        total: 0,
+        listQuery: {
+          page: 1,
+          limit: 8,
+          name: '',
+          sex: ''
+        },
+        dataListQuery: 2,
+        show: false,
+        dialogVisible: false,
+        dialogedit: false,
+        value: [],
+        dialogFormVisible: false
+      }
+    },
+    created() {
+      this.getList();
+      this.getDataList();
+    },
+    methods: {
+      handleGroupDelete() {
+        if (confirm('是否删除？')) {
+          // this.$nextTick(() => {
+          //   this.$refs["dataForm"].clearValidate();
+          // });
+          createGroup(this.list).then(() => {
+            this.$notify({
+              title: "删除成功",
+              type: "success",
+              duration: 2000,
+            });
+            this.list.splice(this.idGroup, 1);
+          });
+        }
+      },
+      handleDelete(row, index) {
+        if (confirm('是否删除？')) {
+          createGroup(this.dataList).then(() => {
+            this.$notify({
+              title: "删除成功",
+              type: "success",
+              duration: 2000,
+            });
+            this.dataList.splice(index, 1);
+          });
+        }
+      },
+      handleFilter() {
+        this.listQuery.page = 1
+        this.getDataList()
+      },
+
+      getList() {
+        fetchList(this.listQuery).then((response) => {
+          this.list = response.data;
+          // this.total = response.total;
+        });
+      },
+      getDataList() {
+        fetchDataList({
+          idGroup: this.dataListQuery
+        }).then((response) => {
+          this.dataList = response.data;
+          this.total = response.total;
+        });
+      },
+      handleSelect(key) {
+        console.log(key);
+        this.dataListQuery = key;
+        this.getDataList();
+      },
+      resetform() {
+        this.form = {
+          id: undefined,
+          name: ""
+        };
+      },
+      handleCreate() {
+        this.resetform();
+        this.dialogFormVisible = true;
+        this.show = true
+        this.dialogStatus = "create";
+        this.$nextTick(() => {
+          this.$refs["dataForm"].clearValidate();
+        });
+      },
+
+      createData() {
+        this.$refs["dataForm"].validate((valid) => {
+          if (valid) {
+            // this.temp.id = parseInt(Math.random() * 100) + 1024 // mock a id
+            // this.temp.author = 'vue-element-admin'
+            createGroup(this.form).then(() => {
+              this.list.unshift(this.form);
+              this.dialogFormVisible = false;
+              this.$notify({
+                title: "添加成功",
+                type: "success",
+                duration: 2000,
+              });
+            });
+            this.show = false
+          }
+        });
+      },
+      handleUpdate() {
+        this.form = Object.assign({}, name); // copy obj
+        // this.dataListQuery = id;
+        this.dialogStatus = "update";
+        this.dialogFormVisible = true;
+        this.show = true
+        this.$nextTick(() => {
+          this.$refs["dataForm"].clearValidate();
+        });
+      },
+      updateData() {
+        this.$refs["dataForm"].validate((valid) => {
+          if (valid) {
+            const tempData = Object.assign({}, this.form);
+
+            updateGroup(tempData).then(() => {
+              const index = this.list.findIndex((v) => v.id === this.form.id);
+              this.list.splice(index, 1, this.form);
+              this.dialogFormVisible = false;
+              this.$notify({
+                title: "编辑成功",
+                type: "success",
+                duration: 2000,
+              });
+            });
+          }
+        });
+        this.show = false
+      },
+    },
+  }
+</script>
+
+<style lang="scss" scoped>
+  .body {
+    width: 1611px;
+    margin-top: 29px;
+
+    .nav {
+      float: left;
+      width: 228px;
+      background-color: #EFF2F7;
+
+      .nav-head {
+        display: flex;
+        width: 141px;
+        margin-top: 43px;
+
+        .head-img {
+          margin-left: 21px;
+
+          img {
+            width: 30px;
+          }
+        }
+
+        .head-info {
+          margin-left: 16px;
+          line-height: 33.64px;
+          font-weight: bold;
+        }
+      }
+
+      .button {
+        display: flex;
+        justify-content: space-around;
+        margin-top: 47px;
+
+        .remove {
+          color: red;
+
+          img {
+            width: 8.5px;
+            margin-right: 8px;
+          }
+        }
+
+        .button-img {
+          img {
+            width: 53.5px;
+          }
+        }
+
+        .button-info {
+          margin-top: 39px;
+        }
+      }
+
+      .nav-info {
+        margin-left: 19px;
+        margin-top: 46px;
+        font-weight: bold;
+      }
+
+      .nav-list {
+        margin-top: 20px;
+      }
+
+      .nav-footer {
+        margin-top: 120px;
+        line-height: 50px;
+        text-indent: 20px;
+        font-size: 8px;
+        background-color: #D3D6DD;
+      }
+
+      .footer-button {
+        display: flex;
+        justify-content: space-around;
+        margin-top: 29px;
+      }
+
+    }
+
+    .form {
+      float: left;
+      width: 1383px;
+
+      .form-head {
+        margin: 0 auto;
+        width: 1304px;
+        line-height: 118px;
+        font-size: 9px;
+
+        .head-info {
+          margin-left: 95px;
+        }
+
+        .input {
+          display: inline-block;
+          margin-left: 12px;
+          margin-right: 30px;
+          width: 210px;
+        }
+
+        .input-select {
+          display: inline-block;
+          margin-left: 11px;
+          margin-right: 29px;
+          width: 148px;
+        }
+
+        .button {
+          margin-left: 41px;
+        }
+      }
+
+      .form-body {
+        margin: 0 auto;
+        width: 1304px;
+
+        .button-img {
+          img {
+            width: 53.5px;
+          }
+        }
+
+        .button-info {
+          margin-top: 39px;
+        }
+
+        .button {
+          color: red;
+        }
+
+        img {
+          width: 8.5px;
+          margin-right: 4px;
+        }
+      }
+
+      .form-footer {
+        display: flex;
+        position: absolute;
+        right: 129px;
+        bottom: 45px;
+      }
+    }
+  }
+</style>

src/views/guide/index.vue

@@ -1,435 +0,0 @@
-<template>
-  <div class="body">
-
-    <!-- 侧边栏区域开始 -->
-
-    <div class="nav">
-      <div class="nav-head">
-        <div class="head-img">
-          <img src="../../../public/group-1.png">
-        </div>
-        <div class="head-info">
-          分组管理
-        </div>
-      </div>
-
-      <div class="button">
-        <el-button type="text" size="small" @click="show=true">编辑</el-button>
-        <el-button type="text" size="small" v-if="show">新建分组</el-button>
-        <el-button type="text" size="small" class="remove" v-if="show" @click="dialogVisible = true"><img
-            src="../../../public/img-2.png">删除</el-button>
-
-        <!-- 删除弹窗区域开始 -->
-
-        <el-dialog title="提示" :visible.sync="dialogVisible" width="30%" center>
-
-          <div class="button-img" align="center">
-            <img src="../../../public/group-2.png">
-          </div>
-
-          <div class="button-info" align="center">
-            删除分组将删除设备上的所有人员信息
-          </div>
-
-
-          <span slot="footer">
-            <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
-            <el-button @click="dialogVisible = false">取 消</el-button>
-          </span>
-        </el-dialog>
-
-        <!-- 删除弹窗区域结束 -->
-
-      </div>
-
-      <div class="nav-info">
-        全部分组
-      </div>
-
-      <div class="nav-list">
-        <el-menu default-active="1" background-color="#fff" text-color="#333333" active-text-color="#3BAAFD">
-          <el-menu-item index="1">
-            <i class="el-icon-menu"></i>
-            <span slot="title">科技楼</span>
-          </el-menu-item>
-          <el-menu-item index="2">
-            <i class="el-icon-menu"></i>
-            <span slot="title">科技楼</span>
-          </el-menu-item>
-          <el-menu-item index="3">
-            <i class="el-icon-menu"></i>
-            <span slot="title">科技楼</span>
-          </el-menu-item>
-          <el-menu-item index="4">
-            <i class="el-icon-menu"></i>
-            <span slot="title">科技楼</span>
-          </el-menu-item>
-        </el-menu>
-      </div>
-
-      <div class="nav-footer" v-if="show">
-        编辑分组：科技楼
-      </div>
-
-      <div class="footer-button" v-if="show">
-        <el-row>
-          <el-button type="primary" size="mini" @click="show=false">保存</el-button>
-          <el-button type="primary" size="mini" plain @click="show=false">取消</el-button>
-        </el-row>
-      </div>
-    </div>
-
-    <!-- 侧边栏区域结束 -->
-
-    <!-- 右侧表格区域开始 -->
-
-    <div class="from">
-
-      <div class="from-head">
-        <el-button size="mini">导入模板</el-button>
-        <el-button type="text">模板下载</el-button>
-        <span class="head-info">学院：</span>
-        <span class="input">
-          <el-input v-model="input" size="mini" placeholder="请输入专业名称"></el-input>
-        </span>
-        性别：
-        <span class="input-select">
-          <el-select v-model="value" size="mini" placeholder="全部/男/女">
-            <el-option v-for="item in sexs" :key="item.value" :label="item.label" :value="item.value">
-            </el-option>
-          </el-select>
-        </span>
-        姓名：
-        <span class="input">
-          <el-input v-model="input" size="mini" placeholder="请输入姓名"></el-input>
-        </span>
-        <el-button type="primary" size="mini" class="button">搜索</el-button>
-      </div>
-
-      <div class="from-body">
-        <el-table :data="tableData" header-cell-style="background-color: #E6ECFE">
-          <el-table-column label="序号" prop="id" width="100px" align="center">
-          </el-table-column>
-          <el-table-column label="姓名" prop="name" width="130px" align="center">
-          </el-table-column>
-          <el-table-column label="学号" prop="studentnumber" width="130px" align="center">
-          </el-table-column>
-          <el-table-column label="性别" prop="sex" width="100px" align="center">
-          </el-table-column>
-          <el-table-column label="宿舍号" prop="livenumber" width="130px" align="center">
-          </el-table-column>
-          <el-table-column label="学院" prop="college" width="130px" align="center">
-          </el-table-column>
-          <el-table-column label="手机号" prop="phone" width="130px" align="center">
-          </el-table-column>
-          <el-table-column label="通行权限" width="190px" prop="power" align="center">
-          </el-table-column>
-          <el-table-column label="操作" width="130px" align="center">
-            <template slot-scope="scope">
-              <el-button type="text" size="small" @click="dialogedit = true">编辑分组</el-button>
-              <el-button @click="dialogeremovefrom = true" type="text" size="small" class="button"><img
-                  src="../../../public/img-2.png">删除</el-button>
-
-              <!-- 编辑分组弹窗开始 -->
-
-              <el-dialog title="编辑分组" :visible.sync="dialogedit" width="30%" center>
-
-                通行权限：
-                <el-select v-model="value" multiple filterable allow-create default-first-option placeholder="请选择分组"
-                  style="width:380px">
-                  <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
-                  </el-option>
-                </el-select>
-
-                <span slot="footer">
-                  <el-button type="primary" @click="dialogedit = false">确 定</el-button>
-                  <el-button @click="dialogedit = false">取 消</el-button>
-                </span>
-              </el-dialog>
-
-              <!-- 编辑分组弹窗结束 -->
-
-              <!-- 表格区域删除弹窗开始 -->
-
-              <el-dialog title="提示" :visible.sync="dialogeremovefrom" width="30%" center>
-
-                <div class="button-img" align="center">
-                  <img src="../../../public/group-2.png">
-                </div>
-
-                <div class="button-info" align="center">
-                  确定删除该信息吗？
-                </div>
-
-
-                <span slot="footer">
-                  <el-button type="primary" @click="handleDelete(index)">确 定</el-button>
-                  <el-button @click="dialogeremovefrom = false">取 消</el-button>
-                </span>
-              </el-dialog>
-
-              <!-- 表格区域删除弹窗结束 -->
-
-            </template>
-          </el-table-column>
-        </el-table>
-      </div>
-
-      <!-- 右侧表格区域结束 -->
-
-      <!-- 底部分页器区域开始 -->
-
-      <div class="from-footer">
-        <template>
-          <pagination :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />
-        </template>
-      </div>
-
-      <!-- 底部分页器区域结束 -->
-
-    </div>
-  </div>
-</template>
-
-<script>
-  import Pagination from '@/components/Pagination'
-  export default {
-    components: {
-      Pagination
-    },
-    methods: {
-      handleDelete(index) {
-        this.$notify({
-          title: '成功',
-          message: '删除成功',
-          type: 'success',
-          duration: 2000
-        })
-        this.dialogeremovefrom = false,
-          this.tableData.splice(index, 1)
-      },
-      getList() {
-        // 获取数据
-      }
-    },
-    data() {
-      return {
-        sexs: [{
-          value: '选项1',
-          label: '男'
-        }, {
-          value: '选项2',
-          label: '女'
-        }],
-        options: [{
-          value: '1',
-          label: '科技园-1'
-        }, {
-          value: '2',
-          label: '科技园-2'
-        }, {
-          value: '3',
-          label: '科技园-3'
-        }],
-        tableData: [{
-          id: '1',
-          name: '吴亦凡',
-          studentnumber: '140309010103',
-          sex: '男',
-          livenumber: '14栋308',
-          college: '人文院',
-          phone: '13677985468',
-          power: '科技楼，人文楼'
-        }, {
-          id: '1',
-          name: '吴亦凡',
-          studentnumber: '140309010103',
-          sex: '男',
-          livenumber: '14栋308',
-          college: '人文院',
-          phone: '13677985468',
-          power: '科技楼，人文楼'
-        }, {
-          id: '1',
-          name: '吴亦凡',
-          studentnumber: '140309010103',
-          sex: '男',
-          livenumber: '14栋308',
-          college: '人文院',
-          phone: '13677985468',
-          power: '科技楼，人文楼'
-        }, {
-          id: '1',
-          name: '吴亦凡',
-          studentnumber: '140309010103',
-          sex: '男',
-          livenumber: '14栋308',
-          college: '人文院',
-          phone: '13677985468',
-          power: '科技楼，人文楼'
-        }],
-        total: 0,
-        listQuery: {
-          page: 1,
-          limit: 20
-        },
-        value: '',
-        show: false,
-        dialogVisible: false,
-        dialogedit: false,
-        dialogeremovefrom: false,
-        value: []
-      }
-    }
-  }
-</script>
-
-<style lang="scss" scoped>
-  .body {
-    width: 1611px;
-    margin-top: 29px;
-
-    .nav {
-      float: left;
-      width: 228px;
-      background-color: #EFF2F7;
-
-      .nav-head {
-        display: flex;
-        width: 141px;
-        margin-top: 43px;
-
-        .head-img {
-          margin-left: 21px;
-
-          img {
-            width: 30px;
-          }
-        }
-
-        .head-info {
-          margin-left: 16px;
-          line-height: 33.64px;
-          font-weight: bold;
-        }
-      }
-
-      .button {
-        display: flex;
-        justify-content: space-around;
-        margin-top: 47px;
-
-        .remove {
-          color: red;
-
-          img {
-            width: 8.5px;
-            margin-right: 8px;
-          }
-        }
-
-        .button-img {
-          img {
-            width: 53.5px;
-          }
-        }
-
-        .button-info {
-          margin-top: 39px;
-        }
-      }
-
-      .nav-info {
-        margin-left: 19px;
-        margin-top: 46px;
-        font-weight: bold;
-      }
-
-      .nav-list {
-        margin-top: 20px;
-      }
-
-      .nav-footer {
-        margin-top: 120px;
-        line-height: 50px;
-        text-indent: 20px;
-        font-size: 8px;
-        background-color: #D3D6DD;
-      }
-
-      .footer-button {
-        display: flex;
-        justify-content: space-around;
-        margin-top: 29px;
-      }
-
-    }
-
-    .from {
-      float: left;
-      width: 1383px;
-
-      .from-head {
-        margin: 0 auto;
-        width: 1304px;
-        line-height: 118px;
-        font-size: 9px;
-
-        .head-info {
-          margin-left: 95px;
-        }
-
-        .input {
-          display: inline-block;
-          margin-left: 12px;
-          margin-right: 30px;
-          width: 210px;
-        }
-
-        .input-select {
-          display: inline-block;
-          margin-left: 11px;
-          margin-right: 29px;
-          width: 148px;
-        }
-
-        .button {
-          margin-left: 41px;
-        }
-      }
-
-      .from-body {
-        margin: 0 auto;
-        width: 1304px;
-        height: 480.5px;
-        overflow: hidden;
-
-        .button-img {
-          img {
-            width: 53.5px;
-          }
-        }
-
-        .button-info {
-          margin-top: 39px;
-        }
-
-        .button {
-          color: red;
-        }
-
-        img {
-          width: 8.5px;
-          margin-right: 4px;
-        }
-      }
-
-      .from-footer {
-        display: flex;
-        position: absolute;
-        right: 129px;
-        bottom: 45px;
-      }
-    }
-  }
-</style>

src/views/dashboard/index.vue

@@ -13,15 +13,15 @@
     <div class="user">
       条件：
       <div class="input">
-        <el-select v-model="value" size="mini" placeholder="全部/一栋/二栋">
-          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
+        <el-select v-model="value" size="mini" placeholder="请选择楼栋">
+          <el-option v-for="item in list" :key="item.value" :label="item.name" :value="item.value">
           </el-option>
         </el-select>
       </div>
 
       <div class="input-button">
         <el-row>
-          <el-button size="small" type="primary">确定</el-button>
+          <el-button size="small" type="primary" @click="getGroupIdList">确定</el-button>
         </el-row>
       </div>
 
@@ -34,7 +34,7 @@
     <div class="add">
       <div class="add-title">累计通行（次）</div>
       <div class="add-img">
-        <img src="../../../public/index-2.png" >
+        <img src="../../../public/index-2.png">
       </div>
       <div class="add-num">1458</div>
     </div>
@@ -44,24 +44,63 @@
     </div>
 
     <div class="title-2">
-      通行人数（万）
+      通行人数
+    </div>
+
+    <div class="chart-container">
+      <chart height="100%" width="100%" />
     </div>
 
   </div>
 </template>
 
 <script>
+  import Chart from "@/components/Charts/MixChart";
+  import {
+    fetchList,
+    fetchGroupIdList,
+    // fetchPv,
+    // createDevice,
+    // updateArticle
+  } from "@/api/index";
   export default {
+    components: {
+      Chart,
+      name: "MixChart"
+    },
     data() {
       return {
-        options: [{
-          value: '选项1',
-          label: '一栋'
-        }, {
-          value: '选项2',
-          label: '二栋'
-        }]
+        // options: [{
+        //   value: '选项1',
+        //   label: '一栋'
+        // }, {
+        //   value: '选项2',
+        //   label: '二栋'
+        // }],
+        list: [],
+        groupidlist: [],
+        listQuery: [],
+        groupidlistQuery: 1,
       }
+    },
+    created() {
+      this.getList();
+      this.getGroupIdList();
+    },
+    methods:{
+      getList() {
+        fetchList(this.listQuery).then((response) => {
+          this.list = response.data;
+        });
+      },
+      getGroupIdList() {
+        // this.groupidlistQuery = key;
+        fetchGroupIdList({
+          idGroup: this.groupidlistQuery
+        }).then((response) => {
+          this.groupidlist = response.data;
+        });
+      },
     }
   }
 </script>
@@ -128,6 +167,7 @@
       border-radius: 10px;
       color: #fff;
       background-color: #2B95F8;
+
       .add-title {
         width: 106px;
         line-height: 49px;
@@ -136,16 +176,19 @@
         margin-left: 27px;
         border-bottom: 1px solid #fff;
       }
+
       .add-img {
         position: absolute;
         top: 41px;
         right: 40px;
         width: 46px;
         height: 39px;
+
         img {
           width: 46px;
         }
       }
+
       .add-num {
         height: 27px;
         margin-left: 27px;
@@ -162,9 +205,16 @@
       margin-top: 37px;
       font-weight: bold;
     }
+
     .title-2 {
       margin-left: 46px;
       font-size: 15px;
     }
+
+    .chart-container {
+      width: 1300px;
+      height: calc(100vh - 500px);
+      margin-left: 46px;
+    }
   }
 </style>

src/views/login/index.vue

@@ -2,35 +2,61 @@
   <div class="login-container">
     <div class="login-nav">
       <div class="login-nav-img">
-        <img src="../../../public/nav-2.png">
+        <img src="../../../public/nav-2.png" />
       </div>
       <div class="login-nav-info">门禁设备管理平台</div>
 
-
       <div class="login-form">
-
         <div class="login-form-head">
           <div class="login-form-titile">用户登录</div>
           <div class="login-form-info">—— 欢迎登录用户系统管理 ——</div>
         </div>
 
-        <el-form ref="loginForm" :model="loginForm" :inline="false" size="normal" :rules="rules" autocomplete="on">
-
+        <el-form
+          ref="loginForm"
+          :model="loginForm"
+          :inline="false"
+          size="normal"
+          :rules="rules"
+          autocomplete="on"
+        >
           <el-form-item class="login-form-item" prop="username">
-            <span><img src="../../../public/denglu.png"></span>
-            <el-input class="login-form-input" v-model="loginForm.username" ref="username" name="username" placeholder="请输入您的账号"></el-input>
+            <span><img src="../../../public/denglu.png" /></span>
+            <el-input
+              class="login-form-input"
+              v-model="loginForm.username"
+              ref="username"
+              name="username"
+              placeholder="请输入您的账号"
+            ></el-input>
           </el-form-item>
 
           <el-form-item class="login-form-item" prop="password">
-            <span><img src="../../../public/mima.png"></span>
-            <el-input class="login-form-input" type="password" v-model="loginForm.password" placeholder="请输入您的密码" :key="passwordType" ref="password" name="password" autocomplete="on" @keyup.native="checkCapslock" @blur="capsTooltip = false" @keyup.enter.native="handleLogin">
+            <span><img src="../../../public/mima.png" /></span>
+            <el-input
+              class="login-form-input"
+              type="password"
+              v-model="loginForm.password"
+              placeholder="请输入您的密码"
+              ref="password"
+              name="password"
+              autocomplete="on"
+              @keyup.native="checkCapslock"
+              @blur="capsTooltip = false"
+              @keyup.enter.native="handleLogin"
+            >
             </el-input>
           </el-form-item>
 
           <el-form-item>
-            <el-button :loading="loading" type="primary" @click.native.prevent="handleLogin" class="login-form-button">登录</el-button>
+            <el-button
+              :loading="loading"
+              type="primary"
+              @click.native.prevent="handleLogin"
+              class="login-form-button"
+              >登录</el-button
+            >
           </el-form-item>
-
         </el-form>
       </div>
     </div>
@@ -38,235 +64,207 @@
 </template>
 
 <script>
-import { validUsername } from '@/utils/validate'
-import SocialSign from './components/SocialSignin'
+import { validUsername } from "@/utils/validate";
+import SocialSign from "./components/SocialSignin";
 
 export default {
-  name: 'Login',
+  name: "Login",
   components: { SocialSign },
   data() {
     const validateUsername = (rule, value, callback) => {
       if (!validUsername(value)) {
-        callback(new Error('请输入您的账号'))
+        callback(new Error("请输入您的账号"));
       } else {
-        callback()
+        callback();
       }
-    }
+    };
     const validatePassword = (rule, value, callback) => {
       if (value.length < 6) {
-        callback(new Error('密码至少六位数'))
+        callback(new Error("密码至少六位数"));
       } else {
-        callback()
+        callback();
       }
-    }
+    };
     return {
       loginForm: {
-        username: 'admin',
-        password: '123321'
+        username: "admin",
+        password: "123abc",
       },
       rules: {
-        username: [{ required: true, trigger: 'blur', validator: validateUsername }],
-        password: [{ required: true, trigger: 'blur', validator: validatePassword }]
+        username: [
+          { required: true, trigger: "blur", validator: validateUsername },
+        ],
+        password: [
+          { required: true, trigger: "blur", validator: validatePassword },
+        ],
       },
       capsTooltip: false,
       loading: false,
       redirect: undefined,
-      otherQuery: {}
-    }
-  },
-  watch: {
-    $route: {
-      handler: function(route) {
-        const query = route.query
-        if (query) {
-          this.redirect = query.redirect
-          this.otherQuery = this.getOtherQuery(query)
-        }
-      },
-      immediate: true
-    }
-  },
-  created() {
-    // window.addEventListener('storage', this.afterQRScan)
+      otherQuery: {},
+    };
   },
+  // watch: {
+  //   $route: {
+  //     handler: function(route) {
+  //       const query = route.query
+  //       if (query) {
+  //         this.redirect = query.redirect
+  //         this.otherQuery = this.getOtherQuery(query)
+  //       }
+  //     },
+  //     immediate: true
+  //   }
+  // },
+  // created() {
+  //   window.addEventListener('storage', this.afterQRScan)
+  // },
   mounted() {
-    if (this.loginForm.username === '') {
-      this.$refs.username.focus()
-    } else if (this.loginForm.password === '') {
-      this.$refs.password.focus()
+    if (this.loginForm.username === "") {
+      this.$refs.username.focus();
+    } else if (this.loginForm.password === "") {
+      this.$refs.password.focus();
     }
   },
-  destroyed() {
-    // window.removeEventListener('storage', this.afterQRScan)
-  },
+  // destroyed() {
+  //   window.removeEventListener('storage', this.afterQRScan)
+  // },
   methods: {
     checkCapslock(e) {
-      const { key } = e
-      this.capsTooltip = key && key.length === 1 && (key >= 'A' && key <= 'Z')
-    },
-    showPwd() {
-      if (this.passwordType === 'password') {
-        this.passwordType = ''
-      } else {
-        this.passwordType = 'password'
-      }
-      this.$nextTick(() => {
-        this.$refs.password.focus()
-      })
+      const { key } = e;
+      this.capsTooltip = key && key.length === 1 && key >= "A" && key <= "Z";
     },
     handleLogin() {
-      this.$refs.loginForm.validate(valid => {
+      this.$refs.loginForm.validate((valid) => {
         if (valid) {
-          this.loading = true
-          this.$store.dispatch('user/login', this.loginForm)
+          this.loading = true;
+          this.$store
+            .dispatch("user/login", this.loginForm)
             .then(() => {
-              this.$router.push({ path: this.redirect || '/', query: this.otherQuery })
-              this.loading = false
+              this.$router.push({
+                path: this.redirect || "/",
+                query: this.otherQuery,
+              });
+              this.loading = false;
             })
             .catch(() => {
-              this.loading = false
-            })
+              this.loading = false;
+            });
         } else {
-          console.log('error submit!!')
-          return false
+          console.log("error submit!!");
+          return false;
         }
-      })
+      });
     },
-    getOtherQuery(query) {
-      return Object.keys(query).reduce((acc, cur) => {
-        if (cur !== 'redirect') {
-          acc[cur] = query[cur]
-        }
-        return acc
-      }, {})
-    }
-    // afterQRScan() {
-    //   if (e.key === 'x-admin-oauth-code') {
-    //     const code = getQueryObject(e.newValue)
-    //     const codeMap = {
-    //       wechat: 'code',
-    //       tencent: 'code'
-    //     }
-    //     const type = codeMap[this.auth_type]
-    //     const codeName = code[type]
-    //     if (codeName) {
-    //       this.$store.dispatch('LoginByThirdparty', codeName).then(() => {
-    //         this.$router.push({ path: this.redirect || '/' })
-    //       })
-    //     } else {
-    //       alert('第三方登录失败')
-    //     }
-    //   }
-    // }
-  }
-}
+  },
+};
 </script>
 
 <style scoped>
-  .login-container {
-    width: 960px;
-    height: 540px;
-    margin: 100px auto;
-    box-shadow: 0 0 25px #cac6c6;
-  }
+.login-container {
+  width: 960px;
+  height: 540px;
+  margin: 100px auto;
+  box-shadow: 0 0 25px #cac6c6;
+}
 
-  .login-nav {
-    position: relative;
-    width: 960px;
-    height: 250px;
-    background: url(../../../public/nav-1.png) center center/100% 100%;
-  }
+.login-nav {
+  position: relative;
+  width: 960px;
+  height: 250px;
+  background: url(../../../public/nav-1.png) center center/100% 100%;
+}
 
-  .login-nav-img {
-    position: absolute;
-    top: 21.5px;
-    left: 31.5px;
-    width: 162px;
-    height: 44px;
-  }
+.login-nav-img {
+  position: absolute;
+  top: 21.5px;
+  left: 31.5px;
+  width: 162px;
+  height: 44px;
+}
 
-  .login-nav-img img {
-    width: 100%;
-  }
+.login-nav-img img {
+  width: 100%;
+}
 
-  .login-nav-info {
-    position: absolute;
-    top: 71px;
-    left: 326px;
-    margin: 0 auto;
-    width: 330px;
-    line-height: 37.5px;
-    font-size: 40.01px;
-    color: #FFFFFF;
-  }
+.login-nav-info {
+  position: absolute;
+  top: 71px;
+  left: 326px;
+  margin: 0 auto;
+  width: 330px;
+  line-height: 37.5px;
+  font-size: 40.01px;
+  color: #ffffff;
+}
 
-  .login-form {
-    position: absolute;
-    top: 127.5px;
-    left: 315px;
-    margin: 0 auto;
-    width: 330px;
-    height: 350.1px;
-    background-color: #fff;
-    box-shadow: 0 0 25px #cac6c6;
-  }
+.login-form {
+  position: absolute;
+  top: 127.5px;
+  left: 315px;
+  margin: 0 auto;
+  width: 330px;
+  height: 350.1px;
+  background-color: #fff;
+  box-shadow: 0 0 25px #cac6c6;
+}
 
-  .login-form-head {
-    position: relative;
-    width: 330px;
-    height: 122.6px;
-  }
+.login-form-head {
+  position: relative;
+  width: 330px;
+  height: 122.6px;
+}
 
-  .login-form-titile {
-    position: absolute;
-    top: 34px;
-    left: 109.5px;
-    height: 28px;
-    font-size: 30.01px;
-    color: #425570;
-  }
+.login-form-titile {
+  position: absolute;
+  top: 34px;
+  left: 109.5px;
+  height: 28px;
+  font-size: 30.01px;
+  color: #425570;
+}
 
-  .login-form-info {
-    position: absolute;
-    top: 82px;
-    left: 48.5px;
-    height: 15px;
-    font-size: 16px;
-    color: #666666;
-  }
+.login-form-info {
+  position: absolute;
+  top: 82px;
+  left: 48.5px;
+  height: 15px;
+  font-size: 16px;
+  color: #666666;
+}
 
-  .login-form-item {
-    margin-top: 10.9px;
-    margin-left: 30px;
-  }
+.login-form-item {
+  margin-top: 10.9px;
+  margin-left: 30px;
+}
 
-  .login-form-item span {
-    display: inline-block;
-    width: 43px;
-    height: 43px;
-    background-color: #1E4365;
-    text-align: center;
-  }
+.login-form-item span {
+  display: inline-block;
+  width: 43px;
+  height: 43px;
+  background-color: #1e4365;
+  text-align: center;
+}
 
-  .login-form-item span img {
-    width: 19px;
-    margin-top: 12.5px;
-    vertical-align: sub;
-  }
+.login-form-item span img {
+  width: 19px;
+  margin-top: 12.5px;
+  vertical-align: sub;
+}
 
-  .login-form-item .login-form-input {
-    width: 227.5px;
-    height: 40px;
-  }
+.login-form-item .login-form-input {
+  width: 227.5px;
+  height: 40px;
+}
 
-  .login-form-button {
-    width: 270px;
-    height: 36px;
-    background-color: #1D4264;
-    color: #FFFFFF;
-    border-radius: 4px;
-    font-size: 13px;
-    margin-left: 30.5px;
-    margin-top: 21.2px;
-  }
+.login-form-button {
+  width: 270px;
+  height: 36px;
+  background-color: #1d4264;
+  color: #ffffff;
+  border-radius: 4px;
+  font-size: 13px;
+  margin-left: 30.5px;
+  margin-top: 21.2px;
+}
 </style>

src/views/table/complex-table.vue

@@ -246,13 +246,13 @@ export default {
       this.listQuery.page = 1
       this.getList()
     },
-    handleModifyStatus(row, status) {
-      this.$message({
-        message: '操作Success',
-        type: 'success'
-      })
-      row.status = status
-    },
+    // handleModifyStatus(row, status) {
+    //   this.$message({
+    //     message: '操作Success',
+    //     type: 'success'
+    //   })
+    //   row.status = status
+    // },
     sortChange(data) {
       const { prop, order } = data
       if (prop === 'id') {

src/views/user/index.vue

@@ -1,15 +1,12 @@
 <template>
   <div class="body">
-
     <!-- 头部区域开始 -->
 
     <div class="head">
       <div class="head-img">
-        <img src="../../../public/user-1.png">
-      </div>
-      <div class="head-info">
-        账号管理
+        <img src="../../../public/user-1.png" />
       </div>
+      <div class="head-info">账号管理</div>
     </div>
 
     <!-- 头部区域结束 -->
@@ -19,56 +16,53 @@
     <div class="user">
       条件：
       <div class="input">
-        <el-input v-model="input" size="small" placeholder="请输入账号或昵称 "></el-input>
+        <el-input v-model="listQuery.name" size="small" placeholder="请输入账号或昵称 " @keyup.enter.native="handleFilter">
+        </el-input>
       </div>
 
       <div class="input-serch">
         <el-row>
-          <el-button size="small" type="primary" @click="handleserch">搜索</el-button>
+          <el-button size="small" type="primary" @click="handleFilter">搜索</el-button>
         </el-row>
       </div>
 
       <div class="input-add">
         <el-row>
-          <el-button type="primary" size="small" @click="dialogVisible = true"><img src="../../../public/img-3.png">添加
+          <el-button type="primary" size="small" @click="handleCreate"><img src="../../../public/img-3.png" />添加
           </el-button>
 
           <!-- 添加弹窗区域开始 -->
 
-          <el-dialog title="添加" :visible.sync="dialogVisible" width="30%" center>
-
-            <el-form :model="tableData">
-
-              <el-form-item label="昵称：" class="switch-button-item">
+          <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" width="40%" center>
+            <el-form ref="dataForm" :model="temp" :rules="rules">
+              <el-form-item style="white-space: pre" label="账号：" class="switch-button-item" prop="name">
                 <el-col :span="12">
-                  <el-input v-model="tableData.name" autocomplete="off" placeholder="请输入昵称" style="width: 110%">
+                  <el-input v-model="temp.name" autocomplete="off" placeholder="请输入账号" style="width: 110%">
                   </el-input>
                 </el-col>
               </el-form-item>
 
-              <el-form-item style="white-space:pre" label="账号：" class="switch-button-item">
+              <el-form-item style="white-space: pre" label="昵称：" class="switch-button-item" prop="nickname">
                 <el-col :span="12">
-                  <el-input v-model="tableData.number" autocomplete="off" placeholder="请输入账号" style="width: 110%">
+                  <el-input v-model="temp.nickname" autocomplete="off" placeholder="请输入昵称" style="width: 110%">
                   </el-input>
                 </el-col>
               </el-form-item>
 
-              <el-form-item style="white-space:pre" label="密码：" class="switch-button-item">
+              <el-form-item style="white-space: pre" label="密码：" class="switch-button-item" prop="password">
                 <el-col :span="12">
-                  <el-input v-model="tableData.possword" autocomplete="off" placeholder="请输入密码" style="width: 110%">
+                  <el-input v-model="temp.password" autocomplete="off" placeholder="请输入密码" style="width: 110%">
                   </el-input>
                 </el-col>
-
               </el-form-item>
             </el-form>
             <span slot="footer">
-              <el-button type="primary" @click="handleCreate">确 定</el-button>
-              <el-button @click="dialogVisible = false">取 消</el-button>
+              <el-button type="primary" @click="dialogStatus === 'create' ? createData() : updateData()">确 定</el-button>
+              <el-button @click="dialogFormVisible = false">取 消</el-button>
             </span>
           </el-dialog>
 
           <!-- 添加弹窗区域结束 -->
-
         </el-row>
       </div>
     </div>
@@ -78,37 +72,53 @@
     <!-- 表格区域开始 -->
 
     <div class="form">
-      <el-table :data="tableData" header-cell-style="background-color: #E6ECFE">
-        <el-table-column label="昵称" prop="name" align="center">
+      <el-table :data="list" @sort-change="sortChange">
+
+        <el-table-column label="账号" align="center">
+          <template slot-scope="{ row }">
+            <span>{{ row.name }}</span>
+          </template>
         </el-table-column>
-        <el-table-column label="账号" prop="number" align="center">
+
+        <el-table-column label="昵称" align="center">
+          <template slot-scope="{ row }">
+            <span>{{ row.nickname }}</span>
+          </template>
         </el-table-column>
-        <el-table-column label="密码" prop="password" align="center">
+
+        <el-table-column label="密码" align="center">
+          <template slot-scope="{ row }">
+            <span>{{ row.password }}</span>
+          </template>
         </el-table-column>
+
         <el-table-column label="操作" align="center">
-          <template slot-scope="scope">
-            <el-button type="text" size="small">编辑</el-button>
-            <el-button @click="dialogeremovefrom = true" type="text" size="small" class="button"><img
-                src="../../../public/img-2.png">删除</el-button>
+          <template slot-scope="{ row, $index }">
+            <el-button type="text" size="small" @click="handleUpdate(row)">编辑</el-button>
+            <el-button @click="handleDelete(row, $index)" type="text" size="small" class="button"><img
+                src="../../../public/img-2.png" />删除</el-button>
 
             <!-- 删除区域开始 -->
 
-            <el-dialog title="提示" :visible.sync="dialogeremovefrom" width="30%" center>
-
+            <!-- <el-dialog
+              title="提示"
+              :visible.sync="dialogeremovefrom"
+              width="30%"
+              center
+            >
               <div class="button-img" align="center">
-                <img src="../../../public/group-2.png">
-              </div>
-
-              <div class="button-info" align="center">
-                确定删除该账号吗？
+                <img src="../../../public/group-2.png" />
               </div>
 
+              <div class="button-info" align="center">确定删除该账号吗？</div>
 
               <span slot="footer">
-                <el-button type="primary" @click="handleDelete(index)">确 定</el-button>
+                <el-button type="primary" @click="handleDelete(row, $index)"
+                  >确 定</el-button
+                >
                 <el-button @click="dialogeremovefrom = false">取 消</el-button>
               </span>
-            </el-dialog>
+            </el-dialog> -->
 
             <!-- 删除区域结束 -->
           </template>
@@ -122,59 +132,75 @@
 
     <div class="block">
       <template>
-        <pagination :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />
+        <pagination v-show="total > 0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit"
+          @pagination="getList" />
       </template>
     </div>
 
     <!-- 底部分页区结束 -->
-
   </div>
-
 </template>
 
 <script>
-  import Pagination from '@/components/Pagination'
+  import Pagination from "@/components/Pagination";
+  import {
+    createAdmin,
+    updateAdmin,
+    fetchList,
+    // fetchPv,
+    // fetchAdmin
+  } from "@/api/getuser";
 
   export default {
     components: {
-      Pagination
+      Pagination,
     },
     data() {
       return {
-        tableData: [{
-            id: '1',
-            name: '随风飘荡',
-            number: 'admin14589',
-            password: '123456',
-          },
-          {
-            id: '2',
-            name: '随风飘荡',
-            number: 'admin14589',
-            password: '4561236',
-          }, {
-            id: '3',
-            name: '随风飘荡',
-            number: 'admin14589',
-            password: '789632',
-          }, {
-            id: '4',
-            name: '随风飘荡',
-            number: 'admin14589',
-            password: '556632',
-          },
-        ],
+        list: [],
         total: 0,
         listQuery: {
           page: 1,
-          limit: 20
+          limit: 8,
+          // importance: undefined,
+          // title: undefined,
+          // type: undefined,
+          // sort: '+id'
+          name: "",
+          nickname: "",
+          password: "",
+        },
+        temp: {
+          id: undefined,
+          name: "",
+          nickname: "",
+          password: "",
         },
-        input: '',
-        list: [],
         timer: null,
-        dialogVisible: false,
-        dialogeremovefrom: false,
-      }
+        dialogFormVisible: false,
+        dialogStatus: "",
+        textMap: {
+          update: "编辑",
+          create: "添加",
+        },
+        rules: {
+          name: [{
+            required: true,
+            message: "请输入昵称",
+            trigger: "change"
+          }],
+          nickname: [{
+            required: true,
+            message: "请输入账号",
+            trigger: "change"
+          }, ],
+          password: [{
+            required: true,
+            message: "请输入密码",
+            trigger: "change"
+          }, ],
+        },
+      };
     },
     // watch: {
     //   input() {
@@ -183,8 +209,8 @@
     //     }
     //     this.timer = setTimeout(() => {
     //       const result = []
-    //       for (let i in this.tableData) {
-    //         this.tableData[i].forEach((value) => {
+    //       for (let i in this.list) {
+    //         this.list[i].forEach((value) => {
     //           if (value.name.indexOf(this.input) > -1 ||
     //             value.number.indexOf(this.input) > -1) {
     //             result.push(value)
@@ -195,37 +221,116 @@
     //     }, 100)
     //   }
     // },
+    created() {
+      this.getList();
+    },
     methods: {
-      handleDelete(index) {
-        this.$notify({
-          title: '成功',
-          message: '删除成功',
-          type: 'success',
-          duration: 2000
-        })
-        this.dialogeremovefrom = false,
-          this.tableData.splice(index, 1)
-
+      handleDelete(row, index) {
+        if (confirm('是否删除？')) {
+          createAdmin(this.list).then(() => {
+            this.$notify({
+              title: "删除成功",
+              type: "success",
+              duration: 2000,
+            });
+            this.list.splice(index, 1);
+            this.total = this.total - 1
+          });
+        }
+      },
+      resetTemp() {
+        this.temp = {
+          id: undefined,
+          name: "",
+          nickname: "",
+          password: "",
+        };
       },
       handleCreate() {
-        this.$notify({
-          title: '成功',
-          message: '添加成功',
-          type: 'success',
-          duration: 2000
-        })
-        this.dialogVisible = false
-        this.tableData.push(length.index, 1)
+        this.resetTemp();
+        this.dialogStatus = "create";
+        this.dialogFormVisible = true;
+        this.$nextTick(() => {
+          this.$refs["dataForm"].clearValidate();
+        });
+      },
+      createData() {
+        this.$refs["dataForm"].validate((valid) => {
+          if (valid) {
+            // this.temp.id = parseInt(Math.random() * 100) + 1024 // mock a id
+            // this.temp.author = 'vue-element-admin'
+            createAdmin(this.temp).then(() => {
+              this.list.unshift(this.temp);
+              this.dialogFormVisible = false;
+              this.$notify({
+                title: "添加成功",
+                type: "success",
+                duration: 2000,
+              });
+            });
+          }
+        });
+      },
+      updateData() {
+        this.$refs["dataForm"].validate((valid) => {
+          if (valid) {
+            const tempData = Object.assign({}, this.temp);
+
+            updateAdmin(tempData).then(() => {
+              const index = this.list.findIndex((v) => v.id === this.temp.id);
+              this.list.splice(index, 1, this.temp);
+              this.dialogFormVisible = false;
+              this.$notify({
+                title: "编辑成功",
+                type: "success",
+                duration: 2000,
+              });
+            });
+          }
+        });
+      },
+      handleUpdate(row) {
+        this.temp = Object.assign({}, row); // copy obj
+        this.dialogStatus = "update";
+        this.dialogFormVisible = true;
+        this.$nextTick(() => {
+          this.$refs["dataForm"].clearValidate();
+        });
+      },
+      handleFilter() {
+        this.listQuery.page = 1;
+        this.getList();
       },
       getList() {
-        // 获取数据
-      }
-    }
-  }
+        fetchList(this.listQuery).then((response) => {
+          this.list = response.data;
+          this.total = response.total;
+        });
+      },
+      sortChange(data) {
+        const {
+          prop,
+          order
+        } = data;
+        if (prop === "id") {
+          this.sortByID(order);
+        }
+      },
+      sortByID(order) {
+        if (order === "ascending") {
+          this.listQuery.sort = "+id";
+        } else {
+          this.listQuery.sort = "-id";
+        }
+        this.handleFilter();
+      },
+    },
+  };
 </script>
 
 <style lang="scss" scoped>
   .body {
+    position: relative;
     width: 1551px;
     margin: 29px 29px 0 31px;
 
@@ -234,19 +339,17 @@
       width: 1380px;
       height: 55px;
       margin-left: 40px;
-      border-bottom: 1px solid #CCCCCC;
+      border-bottom: 1px solid #cccccc;
 
       .head-img {
         width: 30px;
         height: 30px;
 
-
         img {
           width: 30px;
         }
       }
 
-
       .head-info {
         width: 95px;
         height: 22px;
@@ -277,6 +380,7 @@
 
         .switch-button-item {
           margin-left: 100px;
+          margin-bottom: 50px;
         }
 
         img {
@@ -289,8 +393,6 @@
     .form {
       margin-left: 40px;
       width: 1380px;
-      height: 398px;
-      overflow: hidden;
 
       .button-img {
         img {
@@ -314,9 +416,8 @@
 
     .block {
       display: flex;
-      position: absolute;
-      right: 129px;
-      bottom: 45px;
+      margin-bottom: 50px;
+      margin-left: 500px;
     }
   }
 </style>

vue.config.js

@@ -37,6 +37,15 @@ module.exports = {
       errors: true
     },
     before: require('./mock/mock-server.js')
+    // proxy:{
+    //   [process.env.VUE_APP_BASE_API]:{
+    //     target: 'http://192.168.31.162:8280',
+    //     changeOrigin:true,
+    //     pathRewrite:{
+    //       ['^'+ process.env.VUE_APP_BASE_API]: ''
+    //     }
+    //   }
+    // }
   },
   configureWebpack: {
     // provide the app's title in webpack's name field, so that