修改登录页面,首页侧边栏以及新增创建用户界面

ColorWhiteDeveloper

2022-09-16 16efe8bf50837297c8d43a12757fbcd9ab0d2409

修改登录页面,首页侧边栏以及新增创建用户界面

 src/assets/imgs/login/bk.png

 src/router/index.js

@@ -3,30 +3,35 @@
Vue.use(VueRouter)
const routes = [
  {
    path:'/home',
    name:'home',
    component:()=>import('@/views/layout'),
    children:[
    path: '/home',
    name: 'home',
    component: () => import('@/views/layout'),
    children: [
      {
        path:"video",
        name:'video',
        component:()=>import('@/views/video')
    }
  ]
        path: "video",
        name: 'video',
        component: () => import('@/views/video')
      },
      {
        path:"createUser",
        name:"createUser",
        component:()=> import('@/views/systemSetting/baseSetting/user/createUser')
      }
    ]
  },
  {
    path:'/login',
    name:'login',
    component:()=>import('@/views/login')
    path: '/login',
    name: 'login',
    component: () => import('@/views/login')
  },
  {
    path: '/screen',
    name: 'screen',
    component: ()=>import('@/views/screen')
  },  
    component: () => import('@/views/screen')
  },
  {
    path: '/404',
    name:"404",
    name: "404",
    component: () => import('@/views/NotFound'),
  },
  { path: '*', redirect: '/404' }

 src/views/layout/components/Header/index.vue

@@ -14,13 +14,13 @@
        <div class="loginout" @click="loginout">退出登录</div>
      </div>
    </el-header>
    <NavBar />
    <!-- <NavBar /> -->
  </div>
</template>

<script>
import hamburger from "@/components/hamburger";
import NavBar from "../NavBar";
// import NavBar from "../NavBar";
export default {
  data() {
    return {
@@ -29,7 +29,7 @@
  },
  components: {
    hamburger,
    NavBar,
    // NavBar,
  },
  methods:{
    loginout(){

 src/views/layout/components/Main/index.vue

@@ -5,11 +5,11 @@
</template>

<script>
import NavBar from "../NavBar"
// import NavBar from "../NavBar"
export default {
  name: "Main",
  components:{
    NavBar
    // NavBar
  }
};
</script>

 src/views/layout/components/SiderBar/index.vue

@@ -6,37 +6,68 @@
      <el-scrollbar>
        <!-- è·¯ç”± -->
        <el-menu router class="el-menu-vertical" :default-active="$route.path" >
          <!-- è§†é¢‘巡查 -->
          <el-submenu index="/home/video">
            <template slot="title">
              <span slot="prefix" class="icon-padding">
                <svg-icon icon-class="video"></svg-icon>
          <!-- ç³»ç»Ÿè®¾ç½®æ¨¡å— -->
          <el-submenu index="/home/system" class="firstMenu">
            <template slot="title" class="firstSpan">
              <!-- <i class="el-icon-reading"></i> -->
              <span  slot="prefix" class="icon-padding fisrtSpan">
                <svg-icon icon-class="system"></svg-icon>
              </span>
              <span slot="title">视频巡查</span>
              <span class="fisrtSpan">系统设置</span>
            </template>
            <el-menu-item index="/home/video">视频巡查</el-menu-item>
            <!-- åŸºæœ¬è®¾ç½® -->
            <el-submenu index="/admin/system/base" class="secondMenu">
              <template slot="title">
                <span class="secondSpan">基本设置</span>
              </template>
              <!-- ç”¨æˆ·ç®¡ç† -->
              <el-submenu index="/admin/system/base/user" class="thirdMenu">
                <template slot="title">
                  <span class="thirdSpan">用户管理</span>
                </template>
                <el-menu-item index="/home/createUser">新建用户(账户)</el-menu-item>
                <el-menu-item index="/admin/system/base/userList">用户列表</el-menu-item>
              </el-submenu>
              <!-- è§’色管理 -->
              <el-submenu index="/admin/system/base/role" class="thirdMenu">
                <template slot="title">
                  <span class="thirdSpan">角色管理</span>
                </template>
                <el-menu-item index="/admin/system/base/role/createRole">新建角色</el-menu-item>
                <el-menu-item index="/admin/system/base/roleList">角色管理列表</el-menu-item>
              </el-submenu>
              <!-- æƒé™ç®¡ç† -->
              <el-submenu index="/admin/system/base/authority" class="thirdMenu">
                <template slot="title">
                  <span class="thirdSpan">权限管理</span>
                </template>
                <el-menu-item index="/admin/system/base/authority">设置权限</el-menu-item>
              </el-submenu>
              <!-- éƒ¨é—¨ç®¡ç† -->
              <el-submenu index="/admin/system/base/department" class="thirdMenu">
                <template slot="title">
                  <span class="thirdSpan">部门管理</span>
                </template>
                <el-menu-item index="/admin/system/base/department/createDepartment">创建部门</el-menu-item>
                <el-menu-item index="/admin/system/base/department/controle">部门管理</el-menu-item>
              </el-submenu>
            </el-submenu>
            <!-- å¹³å°è®¾ç½® -->
            <el-submenu index="/admin/article/add" class="secondMenu">
              <template slot="title">
                <span class="secondSpan">平台设置</span>
              </template>
              <el-menu-item index="/admin/article">门户设置</el-menu-item>
              <el-menu-item index="/admin/article">第三方接口管理</el-menu-item>
            </el-submenu>
          </el-submenu>
          <!-- æ™ºèƒ½å·¡æŸ¥ -->
          <el-submenu index="/admin/article1">
          <!-- è¿è¥ç®¡ç†æ¨¡å— -->
          <el-submenu index="/home/operate" class="firstMenu">
            <template slot="title">
              <span slot="prefix" class="icon-padding">
                <svg-icon icon-class="intelligence"></svg-icon>
              </span>
              <span>智能巡查</span>
            </template>
            <el-menu-item index="/admin/article/add">预警研判</el-menu-item>
            <el-menu-item index="/admin/article">违规检索</el-menu-item>
            <el-menu-item index="/admin/article">趋势分析</el-menu-item>
            <el-menu-item index="/admin/article">数据统计</el-menu-item>
            <el-menu-item index="/admin/article">运行报告</el-menu-item>
          </el-submenu>
          <!-- è¿è¥ç®¡ç† -->
          <el-submenu index="/admin/article2">
            <template slot="title">
              <span slot="prefix" class="icon-padding">
              <span slot="prefix" class="icon-padding fisrtSpan">
                <svg-icon icon-class="operate"></svg-icon>
              </span>
              <span>运营管理</span>
              <span class="fisrtSpan">运营管理</span>
            </template>
            <el-menu-item index="/admin/article/add">执法管理</el-menu-item>
            <el-menu-item index="/admin/article/add">调度管理</el-menu-item>
@@ -50,33 +81,71 @@
            <el-menu-item index="/admin/article">算法模型管理</el-menu-item>
            <el-menu-item index="/admin/article">日志管理</el-menu-item>
          </el-submenu>
          <!-- ç³»ç»Ÿè®¾ç½® -->
          <el-submenu index="/admin/article3">
          <!-- è§†é¢‘巡查模块 -->
          <el-submenu index="/home/video" class="firstMenu">
            <template slot="title">
              <!-- <i class="el-icon-reading"></i> -->
              <span slot="prefix" class="icon-padding">
                <svg-icon icon-class="system"></svg-icon>
              <span slot="prefix" class="icon-padding fisrtSpan">
                <svg-icon icon-class="video"></svg-icon>
              </span>
              <span>系统设置</span>
              <span slot="title" class="fisrtSpan">视频巡查</span>
            </template>
            <!-- åŸºæœ¬è®¾ç½® -->
            <el-submenu index="/admin/article/add">
              <template slot="title">
                <span>基本设置</span>
              </template>
              <el-menu-item index="/admin/article">用户管理</el-menu-item>
              <el-menu-item index="/admin/article">角色管理</el-menu-item>
              <el-menu-item index="/admin/article">权限管理</el-menu-item>
              <el-menu-item index="/admin/article">部门管理</el-menu-item>
            </el-submenu>
            <!-- å¹³å°è®¾ç½® -->
            <el-submenu index="/admin/article/add">
              <template slot="title">
                <span>平台设置</span>
              </template>
              <el-menu-item index="/admin/article">门户设置</el-menu-item>
              <el-menu-item index="/admin/article">第三方接口管理</el-menu-item>
            </el-submenu>
            <el-menu-item index="/home/video">视频巡查</el-menu-item>
          </el-submenu>
          <!-- æ²¹çƒŸä¿¡æ¯æŸ¥è¯¢æ¨¡å— -->
          <el-submenu index="/home/lampblack" class="firstMenu">
            <template slot="title">
              <span slot="prefix" class="icon-padding fisrtSpan">
                <svg-icon icon-class="intelligence"></svg-icon>
              </span>
              <span class="fisrtSpan">油烟信息查询</span>
            </template>
            <el-menu-item index="/admin/article/add">预警研判</el-menu-item>
            <el-menu-item index="/admin/article">违规检索</el-menu-item>
            <el-menu-item index="/admin/article">趋势分析</el-menu-item>
            <el-menu-item index="/admin/article">数据统计</el-menu-item>
            <el-menu-item index="/admin/article">运行报告</el-menu-item>
          </el-submenu>
          <!-- æ‰§æ³•ç®¡ç†æ¨¡å— -->
          <el-submenu index="/home/law" class="firstMenu">
            <template slot="title">
              <span slot="prefix" class="icon-padding fisrtSpan">
                <svg-icon icon-class="intelligence"></svg-icon>
              </span>
              <span class="fisrtSpan">执法管理</span>
            </template>
            <el-menu-item index="/admin/article/add">预警研判</el-menu-item>
            <el-menu-item index="/admin/article">违规检索</el-menu-item>
            <el-menu-item index="/admin/article">趋势分析</el-menu-item>
            <el-menu-item index="/admin/article">数据统计</el-menu-item>
            <el-menu-item index="/admin/article">运行报告</el-menu-item>
          </el-submenu>
          <!-- æ™ºèƒ½å·¡æŸ¥æ¨¡å— -->
          <el-submenu index="/admin/intellect" class="firstMenu">
            <template slot="title">
              <span slot="prefix" class="icon-padding fisrtSpan">
                <svg-icon icon-class="intelligence"></svg-icon>
              </span>
              <span class="fisrtSpan">智能巡查</span>
            </template>
            <el-menu-item index="/admin/article/add">预警研判</el-menu-item>
            <el-menu-item index="/admin/article">违规检索</el-menu-item>
            <el-menu-item index="/admin/article">趋势分析</el-menu-item>
            <el-menu-item index="/admin/article">数据统计</el-menu-item>
            <el-menu-item index="/admin/article">运行报告</el-menu-item>
          </el-submenu>
          <!-- å¹³å°åŸºæœ¬ä¿¡æ¯ -->
          <el-submenu index="/admin/info" class="firstMenu">
            <template slot="title">
              <span slot="prefix" class="icon-padding fisrtSpan">
                <svg-icon icon-class="intelligence"></svg-icon>
              </span>
              <span class="fisrtSpan">平台基本信息</span>
            </template>
            <el-menu-item index="/admin/article/add">预警研判</el-menu-item>
            <el-menu-item index="/admin/article">违规检索</el-menu-item>
            <el-menu-item index="/admin/article">趋势分析</el-menu-item>
            <el-menu-item index="/admin/article">数据统计</el-menu-item>
            <el-menu-item index="/admin/article">运行报告</el-menu-item>
          </el-submenu>
        </el-menu>
      </el-scrollbar>
@@ -120,13 +189,13 @@
    .el-menu {
      background: linear-gradient(#07162e, #0f2b56);
      border: 0;
      .el-submenu {
      .firstMenu {
        background: #07162e;
        text-align: left;
        &:hover span {
        &:hover .fisrtSpan{
          color: #22d3eb;
        }
        span {
        span,span {
          color: #e9eef3;
        }
        .el-menu-item {
@@ -141,6 +210,16 @@
          color: #22d3eb;
        }
      }
      .secondMenu{
        &:hover .secondSpan{
          color: #22d3eb;
        }
      }
      .thirdMenu{
        &:hover .thirdSpan{
          color: #22d3eb;
        }
      }
      .is-active {
        background-color: #092c4a;
      }

 src/views/layout/index.vue

@@ -38,7 +38,7 @@
  }
}
.el-main {
  background-color: #061125;
  background-color: #f0f2f5;
  color: #333;
  text-align: center;
  line-height: 160px;

 src/views/login/index.vue

@@ -2,7 +2,11 @@
  <div id="background">
    <!-- äº§å“åç§° -->
    <div class="text">
      <div class="logo"></div>
      <div class="logo">
        <img
          src="https://axure-file.lanhuapp.com/90466432-c999-4bf0-80b8-ee3f96a2099e__155eeb2ceaac89ec717869a050964a36.svg"
          alt="">
      </div>
      <div class="text-r">
        <h2 class="title font-extra-large">遂昌县智慧执法平台</h2>
        <div class="title font-title-medium">
@@ -12,24 +16,12 @@
    </div>
    <el-card class="login-form-layout">
      <!-- è¡¨å• -->
      <el-form
        autoComplete="on"
        :model="loginForm"
        :rules="loginRules"
        ref="loginForm"
        label-position="left"
      >
      <el-form autoComplete="on" :model="loginForm" :rules="loginRules" ref="loginForm" label-position="left">
        <!-- title -->
        <h2 class="login-title">用户登录 / USER LOGIN</h2>
        <el-form-item prop="username">
          <!-- ç”¨æˆ·åè¾“入框 -->
          <el-input
            name="username"
            type="text"
            v-model="loginForm.username"
            autoComplete="on"
            placeholder="请输入用户名称"
          >
          <el-input name="username" type="text" v-model="loginForm.username" autoComplete="on" placeholder="请输入用户名称">
            <span slot="prefix">
              <svg-icon icon-class="user" class="color-main"></svg-icon>
            </span>
@@ -37,35 +29,21 @@
        </el-form-item>
        <el-form-item prop="password">
          <!-- å¯†ç è¾“入框 -->
          <el-input
            name="password"
            :type="pwdType ? 'text' : 'password'"
            @keyup.enter.native="handleLogin"
            v-model="loginForm.password"
            autoComplete="on"
            placeholder="请输入登录密码"
          >
          <el-input name="password" :type="pwdType ? 'text' : 'password'" @keyup.enter.native="handleLogin"
            v-model="loginForm.password" autoComplete="on" placeholder="请输入登录密码">
            <!-- è¾“入框前icon -->
            <span slot="prefix">
              <svg-icon icon-class="password" class="color"></svg-icon>
            </span>
            <!-- è¾“入框后icon -->
            <span slot="suffix" @click="showPwd">
              <svg-icon
                :icon-class="pwdType ? 'yanjing-zhengyan' : 'yanjing-biyan'"
                class="pointer"
              ></svg-icon>
              <svg-icon :icon-class="pwdType ? 'yanjing-zhengyan' : 'yanjing-biyan'" class="pointer"></svg-icon>
            </span>
          </el-input>
        </el-form-item>
        <!-- è¡¨å•æäº¤æŒ‰é’® -->
        <el-form-item style="margin-bottom: 60px; text-align: center">
          <el-button
            style="width: 100%"
            type="primary"
            :loading="loading"
            @click.native.prevent="handleLogin"
          >
          <el-button style="width: 100%" type="primary" :loading="loading" @click.native.prevent="handleLogin">
            ç™»å½•
          </el-button>
        </el-form-item>
@@ -97,8 +75,10 @@
    };
    return {
      loginForm: {
        username: "admin",
        password: "macro123",
        username:"",
        password:"",
        // username: "admin",
        // password: "macro123",
      },
      loginRules: {
        username: [
@@ -112,7 +92,7 @@
      pwdType: false,
    };
  },
  created() {},
  created() { },
  methods: {
    showPwd() {
      if (!this.pwdType) {
@@ -125,12 +105,23 @@
    handleLogin() {
      console.log("in login");
      const { username, password } = this.loginForm;
      const that = this;
      this.$axios
        .post("http://42.193.1.25:8082/sccg/admin/login", {
        password,
        username,
          password,
          username,
        })
        .then(function (response) {
          if (response.data.code === 200) {
            // è·³è½¬åˆ°é¦–页
            that.$router.push("/home");
          }else{
            that.$refs.loginForm.validate((valid)=>{
              if(valid){
                that.$message.error(response.data.message);
              }
            })
          }
          console.log(response);
        })
        .catch(function (error) {
@@ -145,41 +136,51 @@
.color {
  color: red;
}

#background {
  width: 100vw;
  height: 100vh;
  background: url("@/assets/imgs/login/login_bg.jpg");
  background: url("@/assets/imgs/login/bk.png");
  background-size: cover;
  position: relative;
  display: flex;
  min-width: 800px;
}

.login-form-layout {
  position: absolute;
  top: 20%;
  right: 5%;
  width: 360px;
}

.text {
  align-self: flex-start;
  position: absolute;
  top: 20%;
  left: 5%;
  display: flex;
  width: 400px;
  width: 420px;
  justify-content: space-between;
  .logo {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: pink;

  .logo>img {
    width: 75px;
    height: 75px;
  }

  .text-r {
    margin-left: 15px;

    .title {
      color: white;
    }

    .font-title-medium {
      margin-top: -10px;
    }
  }
}

.login-title {
  text-align: left;
  font-size: 1.2rem;

 src/views/systemSetting/baseSetting/user/createUser/index.vue

New file
@@ -0,0 +1,176 @@
<template>
    <div class="createUser">
        <header>
            <div class="headerTitle">新增账户</div>
            <div class="headerTip">
                <span>*</span>
                <label>为必填项</label>
            </div>
        </header>
        <main>
            <div class="mainTitle">基础信息</div>
            <div class="mainContent">
                <el-form ref="form" :model="user">
                    <!-- ç”¨æˆ·åç§° -->
                    <el-form-item class="optionItem">
                        <div><span style="color: #ff3b6c;">*</span><label>用户名称:</label></div>
                        <div><el-input v-model="user.nick_name"></el-input></div>
                    </el-form-item>
                    <!-- ç”¨æˆ·å¯†ç  -->
                    <el-form-item class="optionItem">
                        <div><span style="color: #ff3b6c;">*</span><label>用户密码:</label></div>
                        <div><el-input v-model="user.nick_name"></el-input></div>
                    </el-form-item>
                    <!-- æ‰€å±žç”¨æˆ·å§“名 -->
                    <el-form-item class="optionItem">
                        <div><span style="color: #ff3b6c;">*</span><label>所属用户姓名:</label></div>
                        <div><el-input v-model="user.nick_name"></el-input></div>
                    </el-form-item>
                    <!-- æ€§åˆ« -->
                    <el-form-item class="optionItem">
                        <div><span style="color: #ff3b6c;">*</span><label>性别:</label></div>
                        <el-radio-group v-model="user.gender">
                            <el-radio :label="1">男</el-radio>
                            <el-radio :label="2">女</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <!-- æ˜¯å¦å…šå‘˜ -->
                    <el-form-item class="optionItem">
                        <div><span style="color: #ff3b6c;">*</span><label>是否党员:</label></div>
                        <el-radio-group v-model="user.member">
                            <el-radio :label="1">是</el-radio>
                            <el-radio :label="0">否</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <!-- æ‰€å±žæ‰‹æœºå·ç  -->
                    <el-form-item class="optionItem">
                        <div><span style="color: #ff3b6c;">*</span><label>所属手机号码:</label></div>
                        <el-input v-model="user.phone"></el-input>
                    </el-form-item>
                    <!-- é‚®ç®±åœ°å€ -->
                    <el-form-item class="optionItem">
                        <div><label>邮箱地址:</label></div>
                        <el-input v-model="user.mail"></el-input>
                    </el-form-item>
                    <!-- é€‰æ‹©è§’色 -->
                    <el-form-item class="optionItem">
                        <div><span style="color: #ff3b6c;">*</span><label>选择角色:</label></div>
                        <el-select v-model="user.role">
                            <el-option v-for="item in roleList" :key="item.name" :label="item.name" :value="item.value"
                                :disabled="item.disabled">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <!-- ç”¨æˆ·ç±»åž‹ -->
                    <el-form-item class="optionItem">
                        <div><span style="color: #ff3b6c;">*</span><label>用户类型:</label></div>
                        <el-select v-model="user.type">
                            <el-option v-for="item in typeList" :key="item.name" :label="item.name" :value="item.value"
                                :disabled="item.disabled">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <!-- åº§æœº/分机 -->
                    <el-form-item class="optionItem">
                        <div><label>座机/分机:</label></div>
                        <el-input v-model="user.nick_name"></el-input>
                    </el-form-item>
                    <!-- æ‰€å±žéƒ¨é—¨ -->
                    <el-form-item class="optionItem">
                        <div><span style="color: #ff3b6c;">*</span><label>所属部门:</label></div>
                        <el-input v-model="user.nick_name"></el-input>
                    </el-form-item>
                    <!-- å½“前职务 -->
                    <el-form-item class="optionItem">
                        <div><span style="color: #ff3b6c;">*</span><label>当前职务:</label></div>
                        <!-- <el-select v-model="value" placeholder="请选择">
                            <el-option v-for="item in options" :key="item.value" :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select> -->
                    </el-form-item>
                    <!-- å¡«å†™æ‰€å±žmac地址 -->
                    <el-form-item class="optionItem">
                        <div><label>填写所属mac地址:</label></div>
                        <el-input v-model="user.nick_name"></el-input>
                    </el-form-item>
                    <!-- å¡«å†™æ‰€å±žip地址 -->
                    <el-form-item class="optionItem">
                        <div><label>填写所属ip地址:</label></div>
                        <el-input v-model="user.nick_name"></el-input>
                    </el-form-item>
                </el-form>
            </div>
        </main>
    </div>
</template>
<script>
export default {
    data() {
        return {
            user: {
                nick_name: '',
                password: '',
                true_name: '',
                gender: 1,
                member: 0,
                phone: '',
                mail: '',
                role: 0,
                type: 0,
            },
            roleList: [
                { name: '请选择所属角色', value: 0, disabled: true }, { name: '角色1', value: 1 }, { name: '角色2', value: 2 }
            ],
            typeList: [
                { name: '请选择用户类型', value: 0, disabled: true }, { name: '类型1', value: 1 }, { name: '类型2', value: 2 }
            ]
        }
    },
}
</script>
<style lang="scss" scpoed>
.createUser {
    border-radius: 1px;
    header {
        background-color: #fff;
        display: flex;
        justify-content: space-between;
        height: 60px;
        line-height: 60px;
        padding: 0 20px;
        .headerTitle {
            font-weight: 600;
            color: #666;
        }
        .headerTip span {
            color: #ff3b6c;
        }
        .headerTip label {
            color: #999999;
        }
    }
    main {
        background-color: #fff;
        margin-top: 1px;
        text-align: left;
        .mainTitle {
            margin-left: 60px;
            color: #666;
            font-weight: 600;
            font-size: 14px;
        }
        .mainContent {
            padding: 0px 100px;
            .el-form-item__content {
                display: flex;
                justify-content: center;
                div{
                    width: 160px;
                    text-align: right;
                }
            }
        }
    }
}
</style>

 src/views/systemSetting/½ÓÈë¹ÜÀí

 src/views/systemSetting/É豸¹ÜÀí

 src/views/systemSetting/ÔËά¹ÜÀí

 src/views/systemSetting/ÃÅ»§¹ÜÀí

 src/views/ϵͳÉèÖÃ/»ù±¾ÉèÖÃ