免登录处理

shuishen

2025-03-13 8e9d4f8650a1c78a4620918e6369928b19157147

免登录处理

 src/pages/sign.vue

New file
@@ -0,0 +1,131 @@
<template>
    <!-- <div class="box">
      <div class="login">
        <div class="logintitle">
          新干化工园区“一园一策一图”VR平台
        </div>
        <div class="getingo">
          <p class="title">用户登录</p>
          <el-input type="text" class="input username" v-model="loginForm.username" />
          <el-input type="password" class="input password" v-model="loginForm.password" />
          <el-button class="loginto" type="primary" @click="login">登录</el-button>
        </div>
      </div>
    </div> -->
</template>

<script setup>
import { useRouter, useRoute } from 'vue-router'
let router = useRouter()
import { ElLoading } from 'element-plus'
import { useLogin } from 'store/login'
const store = useLogin()

const loginForm = reactive({
    //租户ID
    tenantId: '000000',
    //部门ID
    deptId: '',
    //角色ID
    roleId: '',
    //用户名
    username: 'super_admin',
    //密码
    password: 'JiShui@2024',
    //账号类型
    type: 'account',
    //验证码的值
    code: '',
    //验证码的索引
    key: '',
    //预加载白色背景
    image:
        'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7',
    flag: 1,
})

store.LoginByUsername(loginForm).then(res => {
    router.push({
        path: '/layout'
    })
}).catch(() => {
})
</script>

<style lang="scss" scoped>
.box {
    width: 100vw;
    height: 100vh;
    box-sizing: border-box;

    .login {
        width: 100%;
        height: 100%;
        background: url('../assets/images/login-bg.png');
        background-size: 100% 100%;
        position: relative;

        .logintitle {
            position: absolute;
            top: 18%;
            right: 25%;
            transform: translateX(50%);
            font-size: 40px;
            color: #00afe9;
        }

        .getingo {
            width: 500px;
            position: absolute;
            text-align: center;
            top: 45%;
            right: 25%;
            transform: translateY(-40%) translateX(50%);
            color: #ffffff;
            padding: 30px;
            background: url('../assets/images/login-content-bg.png'),
                url('../assets/images/left-top.png') no-repeat left top,
                url('../assets/images/left-bottom.png') no-repeat left bottom,
                url('../assets/images/right-top.png') no-repeat right top,
                url('../assets/images/right-bottom.png') no-repeat right bottom;
            background-repeat: no-repeat;
            background-size: 100% 100%, 25px, 25px, 25px, 25px;

            .title {
                font-size: 20px;
            }

            :deep().el-input__inner {
                padding: 0px;
            }

            .input {
                margin: 30px 0;
                width: 300px;
                padding: 10px 10px 10px 40px;
                background-color: rgba(0, 0, 0, 0);
                color: #ffffff;
                border-width: 0px;
                font-size: 18px;
            }

            .username {
                background: url('../assets/images/login-input.png') no-repeat,
                    url('../assets/images/user-icon.png') no-repeat 10px center;
                background-size: 100% 100%, 20px;
            }

            .password {
                background: url('../assets/images/login-input.png') no-repeat,
                    url('../assets/images/password-icon.png') no-repeat 10px center;
                background-size: 100% 100%, 20px;
            }

            .loginto {
                width: 300px;
                margin: 30px 0;
            }
        }
    }
}
</style>

 src/router/index.js

@@ -2,7 +2,7 @@
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2024-10-25 16:35:31
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2024-12-02 17:23:21
 * @LastEditTime: 2025-03-13 17:13:38
 * @FilePath: \bigScreen\src\router\index.js
 * @Description: 
 * 
@@ -16,134 +16,146 @@
const singleLayout = () => import('@/pages/single/index.vue')
const companyInfo = () => import('@/views/companyInfo/index.vue')
const routes = [
  // {
  //   path: '/:catchAll(.*)',
  //   name: 'not-found',
  //   redirect: '/layout',
  // },
  {
    path: '/',
    redirect: '/layout',
  },
  {
    path: '/login',
    name: '登录页',
    component: () => import('@/pages/login.vue'),
    meta: {
      keepAlive: true,
      isTab: false,
      isAuth: false,
    // {
    //   path: '/:catchAll(.*)',
    //   name: 'not-found',
    //   redirect: '/layout',
    // },
    {
        path: '/',
        redirect: '/layout',
    },
  },
  {
    path: '/layout',
    name: 'layout',
    redirect: '/layout/map/main/survey',
    component: layout,
    children: [
      {
        path: 'map',
        name: 'map',
        component: mapLayout,
        children: [
          {
            path: 'main',
            name: 'main',
            component: mainLayout,
            children: [
              {
                path: 'survey',
                meta: {
                  title: '园区概况'
                },
                component: () => import('@/views/survey/index.vue')
              },
              {
                path: 'rs',
                meta: {
                  title: '风险源'
                },
                component: () => import('@/views/rs/index.vue')
              },
              {
                path: 'space',
                meta: {
                  title: '应急空间'
                },
                component: () => import('@/views/space/index.vue')
              },
              {
                path: 'pac',
                meta: {
                  title: '三级防控'
                },
                component: () => import('@/views/pac/index.vue')
              },
              {
                path: 'pd',
                meta: {
                  title: '突发事件模拟'
                },
                component: () => import('@/views/pd/index.vue')
              },
            ]
          },
    {
        path: '/login',
        name: '登录页',
        component: () => import('@/pages/login.vue'),
        meta: {
            keepAlive: true,
            isTab: false,
            isAuth: false,
        },
    },

          {
            path: 'sub',
            name: 'sub',
            component: subLayout,
            redirect: '/layout/map/sub/companyInfo',
            children: [
              {
                path: 'companyInfo',
                meta: {
                  title: '企业详情'
                },
                component: companyInfo
              },
            ]
          }
        ]
      },
      {
        path: 'single',
        name: 'single',
        component: singleLayout,
    {
        path: '/sign',
        name: '免登录',
        component: () => import('@/pages/sign.vue'),
        meta: {
            keepAlive: true,
            isTab: false,
            isAuth: false,
        },
    },

    {
        path: '/layout',
        name: 'layout',
        redirect: '/layout/map/main/survey',
        component: layout,
        children: [
          {
            path: 'supplies',
            meta: {
              title: '应急物资'
            {
                path: 'map',
                name: 'map',
                component: mapLayout,
                children: [
                    {
                        path: 'main',
                        name: 'main',
                        component: mainLayout,
                        children: [
                            {
                                path: 'survey',
                                meta: {
                                    title: '园区概况'
                                },
                                component: () => import('@/views/survey/index.vue')
                            },
                            {
                                path: 'rs',
                                meta: {
                                    title: '风险源'
                                },
                                component: () => import('@/views/rs/index.vue')
                            },
                            {
                                path: 'space',
                                meta: {
                                    title: '应急空间'
                                },
                                component: () => import('@/views/space/index.vue')
                            },
                            {
                                path: 'pac',
                                meta: {
                                    title: '三级防控'
                                },
                                component: () => import('@/views/pac/index.vue')
                            },
                            {
                                path: 'pd',
                                meta: {
                                    title: '突发事件模拟'
                                },
                                component: () => import('@/views/pd/index.vue')
                            },
                        ]
                    },

                    {
                        path: 'sub',
                        name: 'sub',
                        component: subLayout,
                        redirect: '/layout/map/sub/companyInfo',
                        children: [
                            {
                                path: 'companyInfo',
                                meta: {
                                    title: '企业详情'
                                },
                                component: companyInfo
                            },
                        ]
                    }
                ]
            },
            component: () => import('@/views/supplies/index.vue')
          },
          {
            path: 'rt',
            meta: {
              title: '救援队伍'
            {
                path: 'single',
                name: 'single',
                component: singleLayout,
                children: [
                    {
                        path: 'supplies',
                        meta: {
                            title: '应急物资'
                        },
                        component: () => import('@/views/supplies/index.vue')
                    },
                    {
                        path: 'rt',
                        meta: {
                            title: '救援队伍'
                        },
                        component: () => import('@/views/rt/index.vue')
                    },
                    {
                        path: 'ochart',
                        meta: {
                            title: '作战图'
                        },
                        component: () => import('@/views/ochart/index.vue')
                    },
                ]
            },
            component: () => import('@/views/rt/index.vue')
          },
          {
            path: 'ochart',
            meta: {
              title: '作战图'
            },
            component: () => import('@/views/ochart/index.vue')
          },
        ]
      },
    ]
  },
    },
]

const { VITE_APP_BASE } = import.meta.env

const router = createRouter({
  base: VITE_APP_BASE,
  history: createWebHashHistory(VITE_APP_BASE),
  routes
    base: VITE_APP_BASE,
    history: createWebHashHistory(VITE_APP_BASE),
    routes
})

export default router