Skip to content

S
SatelliteDigital
提交 46f1e3df authored 作者: 刘佳星-公司's avatar 刘佳星-公司
浏览文件
操作

工作台样式完成

上级 03ed339f
全部展开 隐藏空白字符变更
内嵌 并排
正在显示 包含 525 行增加 和 37 行删除
src/layout/index.vue
浏览文件 @ 46f1e3df
<template> <template>
<div> <div class="allmain">
<router-view v-slot="{ Component, route }" :key="$route.fullPath"> <div class="tip">
<keep-alive> <div class="tip1">无人灭火机器人数字孪生后台管理系统</div>
<component v-if="!route.meta.link" :is="Component" :key="route.path" /> <div class="tip2">国际花园小区</div>
</keep-alive> </div>
</router-view> <div class="main">
<div class="left">
<div class="left1">
<div class="menu" @click="menuclick(item)" :class="num == item.id ? 'active' : ''" v-for="item in menuList"
:key="item.id">{{ item.name
}}
</div>
</div>
<div class="menuTo">数字孪生管理</div>
</div>
<div class="right">
<router-view v-slot="{ Component, route }" :key="$route.fullPath">
<keep-alive>
<component v-if="!route.meta.link" :is="Component" :key="route.path" />
</keep-alive>
</router-view>
</div>
</div>
</div> </div>
</template> </template>
<script setup> <script setup>
import { onMounted } from 'vue'; import { onMounted, ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';
const router = useRouter();
const route = useRoute();
onMounted(() => { onMounted(() => {
console.log('加载'); console.log('加载');
console.log(route);
if (localStorage.getItem('menu')) {
num.value = localStorage.getItem('menu')
} else {
numFn()
}
}) })
const numFn = () => {
switch (route.fullPath) {
case '/home':
num.value = 1
break
case '/buildManage':
num.value = 2
break
case '/uavManage':
num.value = 3
break
case '/fireManage':
num.value = 4
break
case '/fileHistory':
num.value = 5
break
case '/staffManage':
num.value = 6
break
}
}
const num = ref(1)//当前菜单选中项
const menuclick = (row) => {
localStorage.setItem('menu', row.id)
num.value = row.id
router.push(row.path)
}
const menuList = ref([
{
name: '工作台',
id: 1,
path: '/home'
},
{
name: '建筑管理',
id: 2,
path: '/buildManage'
},
{
name: '无人机管理',
id: 3,
path: '/uavManage'
},
{
name: '火情管理',
id: 4,
path: '/fireManage'
},
{
name: '历史火情',
id: 5,
path: '/fileHistory'
},
{
name: '人员管理',
id: 6,
path: '/staffManage'
},
])
</script>
<style scoped>
.allmain {
width: 100vw;
height: 100vh;
margin: 0;
padding: 0;
overflow: auto;
background-color: #051d39;
color: #ffffff;
}
.tip {
width: 100%;
height: 9vh;
background-image: url(../static/image/tip.png);
background-repeat: no-repeat;
background-size: 100% 100%;
display: flex;
align-items: center;
overflow: auto;
}
.main {
display: flex;
height: 90.5vh;
width: 100%;
}
.left {
width: 280px;
display: flex;
flex-direction: column;
justify-content: space-between;
height: 100%;
}
.left1 {
height: calc(100% - 80px);
}
.menuTo {
width: 85%;
height: 80px;
line-height: 80px;
text-align: center;
background-image: url(../static/image/shuziluansheng.png);
background-repeat: no-repeat;
background-size: 100% 100%;
margin: 0 auto;
}
.right {
width: calc(100% - 280px);
padding-right: 20px;
padding-bottom: 15px;
}
.tip1 {
width: 25vw;
font-family: SourceHanSansCN, SourceHanSansCN;
font-weight: bold;
line-height: 8vh;
font-style: normal;
background: linear-gradient(to bottom, #FFFFFF 40%, #96CBFF 100%);
text-align: center;
font-size: 24px;
color: #D5F6FF;
/* opacity: 0.79; */
background-clip: text;
-webkit-background-clip: text;
color: transparent;
/* border: 1px solid red; */
}
.tip2 {
width: 12vw;
height: 4vh;
text-align: center;
/* margin-top: 2vh; */
background-image: url(../static/image/tip_name.png);
background-repeat: no-repeat;
background-size: 100% 100%;
line-height: 4vh;
}
.menu {
height: 70px;
width: 100%;
line-height: 70px;
text-align: center;
cursor: pointer;
}
.active {
background: linear-gradient(270deg, rgba(6, 176, 225, 0) 0%, #0571C4 100%);
</script> }
\ No newline at end of file </style>
\ No newline at end of file
src/permission.js
浏览文件 @ 46f1e3df
import router from './router' import router from './router'
import { ElMessage } from 'element-plus' import { ElMessage } from 'element-plus'
import NProgress from 'nprogress' import NProgress from 'nprogress'
import 'nprogress/nprogress.css' import 'nprogress/nprogress.css'
import { getToken } from '@/utils/auth' import { getToken } from '@/utils/auth'
...@@ -11,11 +12,31 @@ import { getToken } from '@/utils/auth' ...@@ -11,11 +12,31 @@ import { getToken } from '@/utils/auth'
// NProgress.configure({ showSpinner: false }); // NProgress.configure({ showSpinner: false });
// const whiteList = ['/login', '/register'];//白名单 const whiteList = ['/login', '/register'];//白名单
router.beforeEach((to, from, next) => { router.beforeEach((to, from, next) => {
console.log(to, from); console.log(to.path, getToken());
next() if (getToken()) {
if (to.path === '/') {
next('/home')
} else if (whiteList.indexOf(to.path) !== -1) {
next()
} else {
console.log(999);
next()
}
} else {
next()
return
// 没有token--是否在白名单
if (whiteList.indexOf(to.path) !== -1) {
// 在免登录白名单，直接进入
next()
} else {
// 重定向到首页
next(`/login`) // 否则全部重定向到登录页
}
}
// NProgress.start() // NProgress.start()
// if (getToken()) { // if (getToken()) {
// to.meta.title && useSettingsStore().setTitle(to.meta.title) // to.meta.title && useSettingsStore().setTitle(to.meta.title)
......
src/router/index.js
浏览文件 @ 46f1e3df
import { createWebHistory, createRouter, createWebHashHistory } from 'vue-router' import { createWebHistory, createRouter, createWebHashHistory } from 'vue-router'
/* Layout */ /* Layout */
import Layout from '@/layout/index.vue' import Layout from '@/layout/index.vue'
console.log(Layout);
/** /**
* Note: 路由配置项 * Note: 路由配置项
* *
...@@ -29,16 +26,21 @@ console.log(Layout); ...@@ -29,16 +26,21 @@ console.log(Layout);
// 公共路由 // 公共路由
export const constantRoutes = [ export const constantRoutes = [
{ {
path: '/redirect', path: '/',
component: Layout, redirect: '/login',
hidden: true, component: () => import("@/views/login/index.vue"), //登录页
children: [
{
path: '/redirect/:path(.*)',
component: () => import('@/views/redirect/index.vue')
}
]
}, },
// {
// path: '/redirect',
// component: Layout,
// hidden: true,
// children: [
// {
// path: '/redirect/:path(.*)',
// component: () => import('@/views/redirect/index.vue')
// }
// ]
// },
{ {
path: '/login', path: '/login',
component: () => import('@/views/login/index.vue'), component: () => import('@/views/login/index.vue'),
...@@ -54,8 +56,6 @@ export const constantRoutes = [ ...@@ -54,8 +56,6 @@ export const constantRoutes = [
component: () => import('@/views/error/401.vue'), component: () => import('@/views/error/401.vue'),
hidden: true hidden: true
}, },
{ {
path: '', path: '',
component: Layout, component: Layout,
...@@ -65,17 +65,39 @@ export const constantRoutes = [ ...@@ -65,17 +65,39 @@ export const constantRoutes = [
{ {
path: '/home', path: '/home',
component: () => import('../views/home/index.vue'), component: () => import('../views/home/index.vue'),
// component: () => import('../views/index'),
name: 'Home', name: 'Home',
meta: { title: '首页', icon: 'dashboard', affix: true } meta: { title: '工作台', icon: 'dashboard', affix: true }
}, },
{ {
// 配置页面 path: '/buildManage',
path: '/disposition/peizhi', component: () => import('../views/buildManage/index.vue'),
component: () => import('../views/peizhi/index.vue'), name: 'BuildManage',
hidden: true meta: { title: '建筑管理', icon: 'dashboard', affix: true }
} },
{
path: '/uavManage',
component: () => import('../views/uavManage/index.vue'),
name: 'UavManage',
meta: { title: '无人机管理', icon: 'dashboard', affix: true }
},
{
path: '/fireManage',
component: () => import('../views/fireManage/index.vue'),
name: 'FireManage',
meta: { title: '火情管理', icon: 'dashboard', affix: true }
},
{
path: '/fileHistory',
component: () => import('../views/fileHistory/index.vue'),
name: 'FileHistory',
meta: { title: '历史火情', icon: 'dashboard', affix: true }
},
{
path: '/staffManage',
component: () => import('../views/staffManage/index.vue'),
name: 'StaffManage',
meta: { title: '人员管理', icon: 'dashboard', affix: true }
},
] ]
}, },
] ]
......
src/static/css/index.css
浏览文件 @ 46f1e3df
.box_title {
width: calc(100% + 4px);
height: 48px;
margin-left: -2px;
line-height: 48px;
padding-left: 20px;
background-image: url(../image/title.png);
background-repeat: no-repeat;
background-size: 100% 100%;
}
.contenter{
width: 100%;
height: 100%;
}
.contenterTitle{
width: 100%;
height: calc(100% - 48px);
/* height:100%; */
border: 1px solid #13436e;
border-top: none;
}
\ No newline at end of file
src/static/image/loginback.png 0 → 100644
浏览文件 @ 46f1e3df
差异被折叠。
src/style.css
浏览文件 @ 46f1e3df
...@@ -59,8 +59,9 @@ button:focus-visible { ...@@ -59,8 +59,9 @@ button:focus-visible {
} }
#app { #app {
max-width: 1280px; /* width: 100%; */
margin: 0 auto; /* max-width: 1280px; */
margin: 0 ;
padding: 0; padding: 0;
/* text-align: center; */ /* text-align: center; */
} }
......
src/views/buildManage/index.vue 0 → 100644
浏览文件 @ 46f1e3df
<template>
<div class="contenter">
<!-- 建筑管理 -->
<div class="box_title">建筑详情</div>
<div class="contenterTitle">
<div class="title">
<div class="title1">国际花园小于鸟瞰图</div>
<div class="title2">更换</div>
</div>
</div>
</div>
</template>
<script setup>
import { ref, onMounted, reactive } from 'vue';
import { ElMessage, ElLoading } from 'element-plus';
import { useRoute, useRouter } from 'vue-router';
</script>
<style scoped>
.title {
display: flex;
justify-content: flex-start;
}
.title1 {
font-family: SourceHanSansCN, SourceHanSansCN;
font-weight: bold;
font-size: 16px;
color: #FFFFFF 国际花园小区鸟瞰图
}
.title2 {
width: 45px;
height: 25px;
background-color: linear-gradient(194deg, #06B0E1 0%, #06B0E1 100%);
color: #ffffff;
text-align: center;
line-height: 25px;
}
</style>
\ No newline at end of file
src/views/fileHistory/index.vue 0 → 100644
浏览文件 @ 46f1e3df
<template>
<div class="contenter">
<!-- 历史火情 -->
<div class="box_title">历史火情</div>
<div class="contenterTitle">
<div class="title"></div>
</div>
</div>
</template>
<script setup>
import { ref, onMounted, reactive } from 'vue';
import { ElMessage, ElLoading } from 'element-plus';
import { useRoute, useRouter } from 'vue-router';
</script>
<style scoped></style>
\ No newline at end of file
src/views/fireManage/index.vue 0 → 100644
浏览文件 @ 46f1e3df
<template>
<div class="contenter">
<!-- 火情管理 -->
<div class="box_title">火情管理</div>
<div class="contenterTitle">
<div class="title"></div>
</div>
</div>
</template>
<script setup>
import { ref, onMounted, reactive } from 'vue';
import { ElMessage, ElLoading } from 'element-plus';
import { useRoute, useRouter } from 'vue-router';
</script>
<style scoped></style>
\ No newline at end of file
src/views/home/index.vue
浏览文件 @ 46f1e3df
差异被折叠。
src/views/login/index.vue
浏览文件 @ 46f1e3df
<template>
<div class="login">
<div class="login_main">
<div class="title1">无人灭火机器人数字孪生后台管理系统</div>
<div class="title2">国际花园小区</div>
<el-form class="fromclass" :model="form" :rules="rules" ref="formref"
style="width: 16.2vw;margin: 0 auto;margin-top: 4vh;">
<el-form-item prop="name">
<el-input v-model="form.name" placeholder="请输入您的账号" clearable class="widthClass" />
</el-form-item>
<el-form-item prop="password">
<el-input v-model="form.password" placeholder="请输入您的密码" clearable class="widthClass" @keyup.enter="commit" />
</el-form-item>
</el-form>
<div class="logingo" @click="commit">登录</div>
</div>
</div>
</template>
<script setup>
import { ref, onMounted, reactive } from 'vue';
import { ElMessage, ElLoading } from 'element-plus';
import { useRoute, useRouter } from 'vue-router';
const router = useRouter();
const form = ref({
name: '',
password: ''
})
const formref = ref(null)
const rules = {
name: [{ required: true, trigger: "blur", message: "请输入您的账号" }],
password: [{ required: true, trigger: "blur", message: "请输入您的密码" }],
};
// 登录
const commit = () => {
formref.value.validate(valid => {
if (valid) {
localStorage.setItem('menu', 1)//默认选中工作台
router.replace({ path: '/home' })
}
})
}
</script>
<style scoped>
.login {
width: 100vw;
height: 100vh;
background-image: url(../../static/image/loginback.png);
background-repeat: no-repeat;
background-size: 100% 100%;
position: relative;
overflow: auto;
}
.login_main {
width: 30vw;
height: 25vw;
margin: 0 auto;
margin-top: calc((100vh - 25vw)/2);
background-image: url(../../static/image/loginmain.png);
background-repeat: no-repeat;
background-size: 100% 100%;
padding: 50px;
}
.title1 {
font-family: SourceHanSansCN, SourceHanSansCN;
font-weight: bold;
line-height: 48px;
text-align: right;
font-style: normal;
background: linear-gradient(to bottom, #FFFFFF 50%, #96CBFF 100%);
width: 100%;
text-align: center;
font-size: 26px;
color: #D5F6FF;
opacity: 0.79;
background-clip: text;
-webkit-background-clip: text;
color: transparent;
}
.title2 {
width: 100%;
text-align: center;
font-size: 20px;
color: #D5F6FF;
opacity: 0.79;
line-height: 48px;
}
.widthClass {
width: 100%;
height: 2.2vw;
margin: 0 auto;
margin-top: 1vh;
}
.logingo {
width: 16.5vw;
height: 2.2vw;
text-align: center;
line-height: 2.2vw;
margin: 0 auto;
margin-top: 3vh;
color: #ffffff;
background-image: url(../../static/image/loginbutton.png);
background-repeat: no-repeat;
background-size: 100% 100%;
cursor: pointer;
}
:deep().widthClass .el-input__wrapper {
background-color: #06325c;
/* opacity: 0.25; */
box-shadow: none;
border: 1px solid #064a74;
/* color: #06325c; */
}
:deep().widthClass .el-input__inner {
color: #ffffff !important;
}
:deep().widthClass .el-input__inner::placeholder {
color: #ffffff !important;
opacity: 1;
}
</style>
\ No newline at end of file
src/views/staffManage/index.vue 0 → 100644
浏览文件 @ 46f1e3df
<template>
<div class="contenter">
<!-- 人员管理 -->
<div class="box_title">人员管理</div>
<div class="contenterTitle">
<div class="title"></div>
</div>
</div>
</template>
<script setup>
import { ref, onMounted, reactive } from 'vue';
import { ElMessage, ElLoading } from 'element-plus';
import { useRoute, useRouter } from 'vue-router';
</script>
<style scoped></style>
\ No newline at end of file
src/views/uavManage/index.vue 0 → 100644
浏览文件 @ 46f1e3df
<template>
<div class="contenter">
<!-- 无人机管理 -->
<div class="box_title">无人机管理</div>
<div class="contenterTitle">
<div class="title"></div>
</div>
</div>
</template>
<script setup>
import { ref, onMounted, reactive } from 'vue';
import { ElMessage, ElLoading } from 'element-plus';
import { useRoute, useRouter } from 'vue-router';
</script>
<style scoped></style>
\ No newline at end of file
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论