Skip to content

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

工作台样式完成

上级 03ed339f
显示空白字符变更
内嵌 并排
正在显示 包含 1107 行增加 和 31 行删除
src/layout/index.vue
浏览文件 @ 46f1e3df
<template> <template>
<div> <div class="allmain">
<div class="tip">
<div class="tip1">无人灭火机器人数字孪生后台管理系统</div>
<div class="tip2">国际花园小区</div>
</div>
<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"> <router-view v-slot="{ Component, route }" :key="$route.fullPath">
<keep-alive> <keep-alive>
<component v-if="!route.meta.link" :is="Component" :key="route.path" /> <component v-if="!route.meta.link" :is="Component" :key="route.path" />
</keep-alive> </keep-alive>
</router-view> </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> </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%);
}
</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());
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() 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/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
<template> <template>
<div style="width: 100vw;height: 100vh;">创建</div> <div class="content">
<!-- 工作台 -->
<div class="box">
<div class="bos unit1">
<div class="box_title">当前火情</div>
<div class="box-main">
<div class="box_item">
<div class="itemim">
<div class="itemimg">图片</div>
</div>
<div class="itemfons">
<div class="itemtitle">1单元3号楼 8层 405室 朝南</div>
<div class="miaoshu">
<div class="miaoshu1">着火点描述</div>
<el-popover popper-class="poperClass" placement="top" :width="200" trigger="hover"
content="位于405室靠走廊部分，当前火势较大，可,位于405室靠走廊部分，当前火势较大，可,位于405室靠走廊部分，当前火势较大，可,位于405室靠走廊部分，当前火势较大，可"
popper-style="text-align: center;border:1px solid #7F7F7F; box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, 0.6);">
<template #reference>
<div class="miaoshu2">
位于405室靠走廊部分，当前火势较大，可,位于405室靠走廊部分，当前火势较大，可,位于405室靠走廊部分，当前火势较大，可,位于405室靠走廊部分，当前火势较大，可
</div>
</template>
</el-popover>
</div>
<div class="itemdetail">详情</div>
</div>
</div>
<div class="box_item"></div>
<div class="box_item"></div>
<div class="box_item"></div>
</div>
</div>
<div class="bos unit2">
<div class="box_title">历史火情</div>
<div class="box-main">
<div class="box2_term">
<div class="term1">选择时间区间</div>
<el-radio-group v-model="radio">
<el-radio :value="3">近一个月</el-radio>
<el-radio :value="6">近三个月</el-radio>
<el-radio :value="9">近半年</el-radio>
</el-radio-group>
<div class="term3">自定义时间区间</div>
</div>
<div id="echarts"></div>
</div>
</div>
</div>
<div class="box">
<div class="bos unit3">
<div class="box_title">无人机设备状态</div>
<div class="box-main3">
<div class="main-item3">
<div class="box_item3">
<div class="item3title item3wh">
<div>无人机1</div>
<div class="item3_status">状态良好</div>
<img class="item3whimg" src="../../static/image/wurenjitop.png" alt="">
</div>
<div class="item3title item3wh1">
<img src="" alt="" class="imgitem3">
<div class="item3title1">
<div class="item3title item3_detail">
<div>无人灭火弹备弹数</div>
<div>4发</div>
</div>
<div class="item3title item3_detail">
<div>上次维修时间</div>
<div>2025.6.10</div>
</div>
<div class="item3title item3_detail">
<div>当前状态</div>
<div>执行编号001灭火任务中</div>
</div>
</div>
</div>
</div>
</div>
<div class="main-item3">
<div class="box_item3"></div>
</div>
<div class="main-item3">
<div class="box_item3"></div>
</div>
<div class="main-item3">
<div class="box_item3"></div>
</div>
<div class="main-item3">
<div class="box_item3"></div>
</div>
</div>
</div>
<div class="bos unit4">
<div class="box_title">火情信息 (传感器)</div>
<div class="box-main">
<div class="box_item4">
<div class="itemimg4"></div>
<div class="itemfons4">
<div class="itemtitle">1单元3号楼 8层 405室 朝南</div>
<div class="miaoshu">
<div class="miaoshu4">
<div class="mess">详情</div>
<div>朝南传感器侦察到火情，请及时安排人员去现场查看</div>
</div>
<div class="miaoshu4">
<div class="mess">联系人</div>
<el-popover popper-class="poperClass" placement="top" :width="200" trigger="hover"
content="位于405室靠走廊部分，当前火势较大，可,位于405室靠走廊部分，当前火势较大，可,位于405室靠走廊部分，当前火势较大，可,位于405室靠走廊部分，当前火势较大，可"
popper-style="text-align: center;border:1px solid #7F7F7F; box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, 0.6);">
<template #reference>
<div class="lianxi">
位于405室靠走廊部分，当前火势较大，可,位于405室靠走廊部分，当前火势较大，可,位于405室靠走廊部分，当前火势较大，可,位于405室靠走廊部分，当前火势较大，可
</div>
</template>
</el-popover>
</div>
</div>
</div>
</div>
<div class="box_item"></div>
<div class="box_item"></div>
<div class="box_item"></div>
</div>
</div>
</div>
</div>
</template> </template>
<script setup> <script setup>
import { ref, onMounted, reactive } from 'vue';
import { ElMessage, ElLoading } from 'element-plus';
import { useRoute, useRouter } from 'vue-router';
import * as echarts from 'echarts';
const radio = ref(3)
//折线图图表
const echartsFn = () => {
var chartDom = document.getElementById('echarts');
var myChart = echarts.init(chartDom);
var option;
option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
axisLabel: {
// interval:
showMinLabel: true, // 显示第一个标签
showMaxLabel: true, // 显示最后一个标签
// formatter: function (val) {
// if (props.dataType == 1) {
// if (val.split(' ').length > 1) {
// return val.split(' ')[1];
// } else {
// return val;
// }
// } else if (!isNaN(new Date(val).getTime()) && val.toString().split(' ').length > 1) {
// return val.split(' ')[1];
// } else {
// return formatterFn(obj.dimensions[0].formatter, val)
// }
// }
},
// 隐藏y轴网格线
splitLine: {
show: false
},
axisLine: {
// show: false,
lineStyle: {
color: '#5c7a99' // 设置轴线颜色为红色
}
},
axisTick: {
show: false // 这里设置为false即可去掉x轴的间隔线
}
},
yAxis: {
type: 'value',
alignTicks: true,
splitLine: {
show: true,
lineStyle: {
color: '#123152', // 修改为你想要的颜色
type: 'solid'
}
},
},
dataZoom: [
{
type: 'inside',
xAxisIndex: [0],
start: 0,
end: 10000 //默认缩放组件宽度
// height:10,
}
],
grid: {
left: 30,
// left: 50,
right: 30,
bottom: 10,
top: 40,
containLabel: true
},
tooltip: {
trigger: 'axis',
},
series: [
{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line',
showSymbol: false, // 设置为false以去掉圆点
smooth: true,
itemStyle: {
color: '#0facd6', // 随机色
},
lineStyle: {
color: '#0facd6'
},
}
]
};
window.addEventListener("resize", function () {
// console.log('屏幕变化了');
if (myChart) {
var time = setInterval(() => {
// console.log('走进来');
myChart.resize()
}, 200);
setTimeout(() => {
clearInterval(time)
}, 2000)
}
})
option && myChart.setOption(option);
}
onMounted(() => {
echartsFn()
module1Fn()
module2Fn()
module3Fn()
module4Fn()
})
// 获取模块1的列表数据--当前火情
const module1Fn = () => {
}
// 获取模块2的列表数据--历史火情
const module2Fn = () => {
}
// 获取模块3的列表数据--无人机设备状态
const module3Fn = () => {
}
// 获取模块4的列表数据--火情信息(传感器)
const module4Fn = () => {
}
</script> </script>
<style scoped>
.content {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.box {
display: flex;
justify-content: space-between;
height: 49%;
}
.bos {
border: 1px solid #063b6c;
background-color: #072547;
}
.unit1 {
width: 40%;
}
.unit2 {
width: 59%;
}
.unit3 {
width: 59%;
}
.unit4 {
width: 40%;
}
.box_title {
width: 100%;
height: 48px;
line-height: 48px;
padding-left: 20px;
background-image: url(../../static/image/title.png);
background-repeat: no-repeat;
background-size: 100% 100%;
}
.box-main {
height: calc(100% - 48px);
padding: 10px;
overflow-y: auto;
}
.box_item {
width: 100%;
height: 32.5%;
background-color: #063563;
margin-bottom: 5px;
display: flex;
justify-content: flex-start;
overflow: hidden;
padding: 10px;
/* &nbsp */
}
.itemim {
width: 80px;
height: 100%;
display: flex;
flex-direction: row;
align-items: center;
}
.itemimg {
/* height: 100%;
width: auto;
aspect-ratio: 1/1; */
height: 80px;
width: 80px;
border: 1px solid red;
}
.itemfons {
position: relative;
height: 100%;
width: calc(100% - 80px);
display: flex;
flex-direction: column;
justify-content: space-around;
padding-left: 5px;
}
.itemtitle {
font-weight: 600;
}
.miaoshu {
font-size: 14px;
width: 100%;
overflow: hidden;
}
.miaoshu1 {
font-size: 14px;
}
.miaoshu2 {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-size: 13px;
}
.itemdetail {
width: 45px;
height: 30px;
text-align: center;
line-height: 30px;
background-color: #06b0e1;
border-radius: 5px;
position: absolute;
top: 10px;
right: 10px;
}
.itemimg4 {
height: 30px;
width: 30px;
background-image: url(../../static/image/huo.png);
background-repeat: no-repeat;
background-size: 100% 100%;
margin-top: 5px;
}
.itemfons4 {
position: relative;
height: 100%;
width: calc(100% - 30px);
display: flex;
flex-direction: column;
justify-content: space-around;
padding-left: 5px;
}
.box_item4 {
width: 100%;
height: 32.5%;
background-color: #351f39;
margin-bottom: 5px;
display: flex;
justify-content: flex-start;
overflow: hidden;
padding: 10px;
/* &nbsp */
}
.miaoshu4 {
width: 100%;
display: flex;
margin-bottom: 5px;
}
.lianxi {
width: calc(100% - 50px);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-size: 13px;
}
.mess {
width: 50px;
height: 20px;
text-align: center;
background-color: #294261;
border: 1px solid #205e82;
margin-right: 5px;
}
/* ------------------------------------------------------------
*/
.box2_term {
display: flex;
align-items: center;
padding: 10px;
font-size: 14px;
color: #c0c7d0;
}
.term1 {
margin-right: 10px;
}
.term3 {
margin-left: 20px;
text-decoration: underline;
color: #068bb8;
cursor: pointer;
}
:deep().el-radio__label {
color: #c0c7d0 !important;
}
:deep().el-radio.is-checked .el-radio__label {
color: #409eff !important;
}
/* 3-------------------------------------------------------- */
.box-main3 {
width: 100%;
height: calc(100% - 48px);
/* padding: 20px; */
display: flex;
flex-wrap: wrap;
overflow: auto;
}
.box_item3 {
width: 100%;
height: 100%;
background-image: url(../../static/image/wurenji.png);
background-repeat: no-repeat;
background-size: 100% 100%;
overflow: hidden;
}
.main-item3 {
width: 50%;
height: 42%;
/* padding: 0px 0px; */
margin-top: 20px;
}
/* 定制整个滚动条 */
::-webkit-scrollbar {
width: 10px;
/* 滚动条宽度 */
}
/* 定制滚动条轨道 */
::-webkit-scrollbar-track {
background: #023375;
border-radius: 10px;
/* 轨道颜色 */
}
/* 定制滚动条的滑块（thumb） */
::-webkit-scrollbar-thumb {
background: #0d68c1;
border-radius: 10px;
/* 滑块颜色 */
}
/* 当鼠标悬停在滑块上 */
::-webkit-scrollbar-thumb:hover {
background: #DDDEE0;
/* 滑块悬停颜色 */
}
.item3title {
display: flex;
justify-content: space-between;
}
.imgitem3 {
width: 7vw;
height: 8vh;
border: 1px solid red;
}
.item3wh {
width: 90%;
padding-left: 40px;
padding-right: 30px;
line-height: 5vh;
height: 4vh;
margin: 0 auto;
position: relative;
}
.item3whimg {
position: absolute;
top: 40%;
left: 22px;
width: 15px;
height: 15px;
}
.item3wh1 {
width: 90%;
height: calc(100% - 4vh);
padding: 0 20px;
margin: 0 auto;
align-items: center;
font-size: 14px;
}
.item3_detail {}
.item3title1 {
display: flex;
flex-direction: column;
justify-content: space-around;
height: 90%;
}
.item3_status {
font-family: SourceHanSansCN, SourceHanSansCN;
font-weight: bold;
font-size: 20px;
font-style: normal;
}
#echarts {
width: 100%;
height: calc(100% - 55px);
}
</style>
\ No newline at end of file
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 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论