Skip to content

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

路由设置和文件对应方便后期修改

上级 92be75d4
隐藏空白字符变更
内嵌 并排
正在显示 包含 486 行增加 和 457 行删除
src/layout/index.vue
浏览文件 @ e79e30ac
...@@ -4,8 +4,9 @@ ...@@ -4,8 +4,9 @@
<div class="tip1">无人灭火机器人数字孪生后台管理系统</div> <div class="tip1">无人灭火机器人数字孪生后台管理系统</div>
<div class="tip2">国际花园小区</div> <div class="tip2">国际花园小区</div>
<div class="avatar-container" v-if="useAppStore.isCurUserLogin"> <div class="avatar-container" v-if="useAppStore.isCurUserLogin">
<el-dropdown> <el-dropdown>
<el-avatar shape="square" size="large" :src="useAppStoreInstance.userInfo.avatar?useAppStoreInstance.userInfo.avatar: useAppStoreInstance.showavatarUrl"/> <el-avatar shape="square" size="large"
:src="useAppStoreInstance.userInfo.avatar ? useAppStoreInstance.userInfo.avatar : useAppStoreInstance.showavatarUrl" />
<template #dropdown> <template #dropdown>
<el-dropdown-menu> <el-dropdown-menu>
<el-dropdown-item @click="toSatffManage">人员管理</el-dropdown-item> <el-dropdown-item @click="toSatffManage">人员管理</el-dropdown-item>
...@@ -19,30 +20,23 @@ ...@@ -19,30 +20,23 @@
<div class="left"> <div class="left">
<div class="left1"> <div class="left1">
<div v-for="(item, index) in menuList" :key="index" class="menu-item-container"> <div v-for="(item, index) in menuList" :key="index" class="menu-item-container">
<div class="menu-wrapper"> <div class="menu-wrapper">
<div <div class="submenu-title" :class="isActive(item) ? 'active' : ''" @click="toggleSubMenu(index)">
class="submenu-title" <el-icon class="menu_left-icon">
:class="isActive(item) ? 'active' : ''"
@click="toggleSubMenu(index)">
<el-icon class="menu_left-icon" >
<img :src="item.icon" alt=""> <img :src="item.icon" alt="">
</el-icon> </el-icon>
<span class="menu-text">{{ item.name }}</span> <span class="menu-text">{{ item.name }}</span>
<el-icon class="arrow-icon" :class="openMenus[index] ? 'rotate' : ''"> <el-icon class="arrow-icon" :class="openMenus[index] ? 'rotate' : ''">
<ArrowRight /> <ArrowRight />
</el-icon> </el-icon>
</div> </div>
<transition name="submenu-slide"> <transition name="submenu-slide">
<div v-if="openMenus[index]" class="submenu-list"> <div v-if="openMenus[index]" class="submenu-list">
<div <div class="submenu-item" @click="handleSubMenuClick(child)"
class="submenu-item" :class="isSubMenuActive(child) ? 'active' : ''" v-for="(child, childIndex) in item.children"
@click="handleSubMenuClick(child)" :key="childIndex">
:class="isSubMenuActive(child) ? 'active' : ''"
v-for="(child, childIndex) in item.children"
:key="childIndex"
>
{{ child.name }} {{ child.name }}
</div> </div>
</div> </div>
...@@ -55,39 +49,25 @@ ...@@ -55,39 +49,25 @@
<!-- 面包屑导航 --> <!-- 面包屑导航 -->
<div class="breadcrumb-container"> <div class="breadcrumb-container">
<el-breadcrumb separator=">"> <el-breadcrumb separator=">">
<el-breadcrumb-item v-for="(crumb, index) in breadcrumbs" :key="index" <el-breadcrumb-item v-for="(crumb, index) in breadcrumbs" :key="index">
>
{{ crumb.name }} {{ crumb.name }}
</el-breadcrumb-item> </el-breadcrumb-item>
</el-breadcrumb> </el-breadcrumb>
</div> </div>
<!-- 标签页 --> <!-- 标签页 -->
<div class="tabs-container"> <div class="tabs-container">
<el-tabs <el-tabs v-model="activeTabKey" type="card" closable @tab-remove="removeTab" @tab-click="handleTabClick"
v-model="activeTabKey" class="custom-tabs">
type="card" <el-tab-pane v-for="tab in tabs" :key="tab.key" :label="tab.label" :name="tab.key">
closable
@tab-remove="removeTab"
@tab-click="handleTabClick"
class="custom-tabs"
>
<el-tab-pane
v-for="tab in tabs"
:key="tab.key"
:label="tab.label"
:name="tab.key"
>
</el-tab-pane> </el-tab-pane>
</el-tabs> </el-tabs>
</div> </div>
<div class="right-content"> <div class="right-content">
<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>
...@@ -109,54 +89,54 @@ const useAppStoreInstance = useAppStore(); ...@@ -109,54 +89,54 @@ const useAppStoreInstance = useAppStore();
// 菜单结构 // 菜单结构
const menuList = ref([ const menuList = ref([
{ {
name: '仪表盘', name: '仪表盘',
id: 'dashboard', id: 'dashboard',
path: '/analySisPage', path: '/analySisPage',
icon: new URL('../static/image/huo.png', import.meta.url).href, icon: new URL('../static/image/huo.png', import.meta.url).href,
children: [ children: [
{ name: '分析页', id: 'analysis', path: '/analysisPage' }, { name: '分析页', id: 'analysis', path: '/dashboard/analysis' },
{ name: '工作台', id: 'workbench', path: '/workBenchPage' }, { name: '工作台', id: 'workbench', path: '/dashboard/workbench' },
] ]
}, },
{ {
name: '系统管理', name: '系统管理',
id: 'system', id: 'system',
path: '/userManage', path: '/userManage',
icon: new URL('../static/image/huo.png', import.meta.url).href, icon: new URL('../static/image/huo.png', import.meta.url).href,
children: [ children: [
{ name: '用户管理', id: 'user', path: '/usermanage' }, { name: '用户管理', id: 'user', path: '/systemmanage/staffManage' },
] ]
}, },
{ {
name: '建筑管理', name: '建筑管理',
id: 'building', id: 'building',
path: '/areaBuildmanage', path: '/areaBuildmanage',
icon: new URL('../static/image/huo.png', import.meta.url).href, icon: new URL('../static/image/huo.png', import.meta.url).href,
children: [ children: [
{ name: '区域建筑管理', id: 'areaBuilding', path: '/areabuildmanage' }, { name: '区域建筑管理', id: 'areaBuilding', path: '/areabuildmanage' },
] ]
}, },
{ {
name: '无人机管理', name: '无人机管理',
id: 'drone', id: 'drone',
path: '/uavDispatch', path: '/uavDispatch',
icon: new URL('../static/image/huo.png', import.meta.url).href, icon: new URL('../static/image/huo.png', import.meta.url).href,
children: [ children: [
{ name: '无人机调度', id: 'droneDispatch', path: '/uavdispatch' }, { name: '无人机调度', id: 'droneDispatch', path: '/uavshowdate' },
{ name: '无人机监控', id: 'droneMonitor', path: '/uavdetaildate' } { name: '无人机监控', id: 'droneMonitor', path: '/uavshowdate/uavmanage' }
] ]
}, },
{ {
name: '火情管理', name: '火情管理',
id: 'fire', id: 'fire',
path: '/fireSurveillance', path: '/fireSurveillance',
icon: new URL('../static/image/huo.png', import.meta.url).href, icon: new URL('../static/image/huo.png', import.meta.url).href,
children: [ children: [
{ name: '当前火情', id: 'fireHistory', path: '/historyfire' }, { name: '当前火情', id: 'fireHistory', path: '/areafiremanage/historyfire' },
{ name: '上报记录', id: 'fireRecord', path: '/recordfireinfo' }, { name: '上报记录', id: 'fireRecord', path: '/areafiremanage/firerecord' },
{ name: '历史火情', id: 'fireMonitor', path: '/firesurveillance' }, { name: '历史火情', id: 'fireMonitor', path: '/areafiremanage/firesurveillance' },
] ]
}, },
]); ]);
...@@ -165,7 +145,7 @@ const openMenus = ref([]); ...@@ -165,7 +145,7 @@ const openMenus = ref([]);
const breadcrumbs = ref([]); const breadcrumbs = ref([]);
const tabs = ref([]); const tabs = ref([]);
const activeTabKey = ref(''); const activeTabKey = ref('');
const lastValidMenuPath = ref('/historyfire'); // 记录最后一个有效的菜单路径 const lastValidMenuPath = ref('/areafiremanage/historyfire'); // 记录最后一个有效的菜单路径
// 获取菜单项名称 // 获取菜单项名称
const getMenuNameByPath = (path) => { const getMenuNameByPath = (path) => {
...@@ -211,7 +191,7 @@ const getCurrentValidPath = () => { ...@@ -211,7 +191,7 @@ const getCurrentValidPath = () => {
const updateMenuActiveState = () => { const updateMenuActiveState = () => {
const currentPath = getCurrentValidPath(); const currentPath = getCurrentValidPath();
useAppStoreInstance.num = currentPath; useAppStoreInstance.num = currentPath;
menuList.value.forEach((item, index) => { menuList.value.forEach((item, index) => {
if (item.children && item.children.length) { if (item.children && item.children.length) {
const hasActiveChild = item.children.some(child => child.path === currentPath); const hasActiveChild = item.children.some(child => child.path === currentPath);
...@@ -220,7 +200,7 @@ const updateMenuActiveState = () => { ...@@ -220,7 +200,7 @@ const updateMenuActiveState = () => {
} }
} }
}); });
if (isPathInMenu(route.path)) { if (isPathInMenu(route.path)) {
lastValidMenuPath.value = route.path; lastValidMenuPath.value = route.path;
} }
...@@ -246,7 +226,7 @@ const isSubMenuActive = (child) => { ...@@ -246,7 +226,7 @@ const isSubMenuActive = (child) => {
const updateBreadcrumbs = () => { const updateBreadcrumbs = () => {
const path = getCurrentValidPath(); const path = getCurrentValidPath();
const crumbs = [{ name: '首页', path: '/' }]; const crumbs = [{ name: '首页', path: '/' }];
for (const item of menuList.value) { for (const item of menuList.value) {
if (item.path === path) { if (item.path === path) {
crumbs.push({ name: item.name, path: item.path }); crumbs.push({ name: item.name, path: item.path });
...@@ -261,7 +241,7 @@ const updateBreadcrumbs = () => { ...@@ -261,7 +241,7 @@ const updateBreadcrumbs = () => {
} }
} }
} }
breadcrumbs.value = crumbs; breadcrumbs.value = crumbs;
}; };
...@@ -269,9 +249,9 @@ const updateBreadcrumbs = () => { ...@@ -269,9 +249,9 @@ const updateBreadcrumbs = () => {
const addTab = () => { const addTab = () => {
const path = route.path; const path = route.path;
const existingTabIndex = tabs.value.findIndex(tab => tab.key === path); const existingTabIndex = tabs.value.findIndex(tab => tab.key === path);
const preTabs = ref(tabs.value); const preTabs = ref(tabs.value);
console.log("existingTabIndexpath----------------12121----------",preTabs,"----------",path,'----------',tabs.value) console.log("existingTabIndexpath----------------12121----------", preTabs, "----------", path, '----------', tabs.value)
if (existingTabIndex === -1) { if (existingTabIndex === -1) {
// console.log("existingTabIndexpath--------------------------",tabs.value) // console.log("existingTabIndexpath--------------------------",tabs.value)
tabs.value.push({ tabs.value.push({
...@@ -279,12 +259,12 @@ const addTab = () => { ...@@ -279,12 +259,12 @@ const addTab = () => {
label: getMenuNameByPath(path), label: getMenuNameByPath(path),
path: path path: path
}); });
}else { } else {
tabs.value=preTabs.value; tabs.value = preTabs.value;
} }
activeTabKey.value = path; activeTabKey.value = path;
console.log("existingTabIndexpath---------56555555555555555555-----------------",activeTabKey.value) console.log("existingTabIndexpath---------56555555555555555555-----------------", activeTabKey.value)
}; };
// 初始化标签页 // 初始化标签页
...@@ -300,27 +280,28 @@ const initTabs = () => { ...@@ -300,27 +280,28 @@ const initTabs = () => {
// 保存菜单状态 // 保存菜单状态
const saveMenuState = () => { const saveMenuState = () => {
console.log('保存菜单状态',router.options.history.state.back) console.log('保存菜单状态', router.options.history.state.back)
if (router.options.history.state.back !== null) { if (router.options.history.state.back !== null) {
const menuState = { const menuState = {
openMenus: openMenus.value, openMenus: openMenus.value,
lastValidMenuPath: isPathInMenu(router.options.history.state.back)? router.options.history.state.back:(localStorage.getItem('lastValidMenuPath')), lastValidMenuPath: isPathInMenu(router.options.history.state.back) ? router.options.history.state.back : (localStorage.getItem('lastValidMenuPath')),
}; };
localStorage.setItem('menuState', JSON.stringify(menuState));} localStorage.setItem('menuState', JSON.stringify(menuState));
}
}; };
// 移除标签页 // 移除标签页
const removeTab = (key) => { const removeTab = (key) => {
const index = tabs.value.findIndex(tab => tab.key === key); const index = tabs.value.findIndex(tab => tab.key === key);
if (index === -1) return; if (index === -1) return;
if (key === activeTabKey.value) { if (key === activeTabKey.value) {
const newIndex = index > 0 ? index - 1 : index + 1; const newIndex = index > 0 ? index - 1 : index + 1;
if (tabs.value[newIndex]) { if (tabs.value[newIndex]) {
router.push(tabs.value[newIndex].path); router.push(tabs.value[newIndex].path);
} }
} }
tabs.value.splice(index, 1); tabs.value.splice(index, 1);
}; };
...@@ -359,9 +340,9 @@ const toSatffManage = () => { ...@@ -359,9 +340,9 @@ const toSatffManage = () => {
useAppStoreInstance.num = '/staff'; useAppStoreInstance.num = '/staff';
}; };
const noremoveItemFn = (data) => { const noremoveItemFn = (data) => {
const valueToKeep = localStorage.getItem(data); const valueToKeep = localStorage.getItem(data);
console.log("sdsadadddddd",valueToKeep) console.log("sdsadadddddd", valueToKeep)
localStorage.clear(); localStorage.clear();
if (valueToKeep !== null) { if (valueToKeep !== null) {
localStorage.setItem(data, valueToKeep); localStorage.setItem(data, valueToKeep);
...@@ -377,34 +358,34 @@ const curUserLogout = () => { ...@@ -377,34 +358,34 @@ const curUserLogout = () => {
const showavatarUrl = ref('https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png'); const showavatarUrl = ref('https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png');
// 初始化 // 初始化
onMounted(() => { onMounted(() => {
nextTick (()=>{ nextTick(() => {
useAppStoreInstance.initavatarUrlFn() useAppStoreInstance.initavatarUrlFn()
}) })
// 初始化菜单展开状态 // 初始化菜单展开状态
menuList.value.forEach((_, index) => { menuList.value.forEach((_, index) => {
openMenus.value[index] = false; openMenus.value[index] = false;
}); });
// 从本地存储恢复状态 // 从本地存储恢复状态
const savedState = localStorage.getItem('menuState'); const savedState = localStorage.getItem('menuState');
if (savedState) { if (savedState) {
try { try {
const parsedState = JSON.parse(savedState); const parsedState = JSON.parse(savedState);
openMenus.value = parsedState.openMenus || openMenus.value; openMenus.value = parsedState.openMenus || openMenus.value;
lastValidMenuPath.value = parsedState.lastValidMenuPath || '/historyfire'; lastValidMenuPath.value = parsedState.lastValidMenuPath || '/areafiremanage/historyfire';
} catch (e) { } catch (e) {
console.error('Failed to parse menu state', e); console.error('Failed to parse menu state', e);
} }
} }
// console.log("currentDisplayPath.value--------------------------",isPathInMenu(route.path)) // console.log("currentDisplayPath.value--------------------------",isPathInMenu(route.path))
if (!isPathInMenu(route.path)) { if (!isPathInMenu(route.path)) {
console.log("currentDisplayPath.value--------------------------",isPathInMenu(route.path),getCurrentValidPath(),JSON.parse(localStorage.getItem('menuState')).lastValidMenuPath) console.log("currentDisplayPath.value--------------------------", isPathInMenu(route.path), getCurrentValidPath(), JSON.parse(localStorage.getItem('menuState')).lastValidMenuPath)
router.replace(JSON.parse(localStorage.getItem('menuState')).lastValidMenuPath); router.replace(JSON.parse(localStorage.getItem('menuState')).lastValidMenuPath);
} }
// console.log("currentDisplayPath.value--------------------------",isPathInMenu(route.path),getCurrentValidPath()) // console.log("currentDisplayPath.value--------------------------",isPathInMenu(route.path),getCurrentValidPath())
...@@ -436,9 +417,9 @@ watch(route, () => { ...@@ -436,9 +417,9 @@ watch(route, () => {
padding: 0; padding: 0;
overflow: hidden; overflow: hidden;
background: #051d39; background: #051d39;
background-image: background-image:
radial-gradient(circle at 10% 20%, rgba(6, 176, 225, 0.05) 0%, transparent 30%), radial-gradient(circle at 10% 20%, rgba(6, 176, 225, 0.05) 0%, transparent 30%),
radial-gradient(circle at 90% 80%, rgba(5, 113, 196, 0.05) 0%, transparent 30%); radial-gradient(circle at 90% 80%, rgba(5, 113, 196, 0.05) 0%, transparent 30%);
color: #ffffff; color: #ffffff;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
...@@ -534,7 +515,7 @@ watch(route, () => { ...@@ -534,7 +515,7 @@ watch(route, () => {
} }
.left1 { .left1 {
flex: 1; flex: 1;
overflow-y: auto; overflow-y: auto;
padding: 15px 0; padding: 15px 0;
...@@ -560,7 +541,8 @@ watch(route, () => { ...@@ -560,7 +541,8 @@ watch(route, () => {
padding: 0 5px; padding: 0 5px;
} }
.menu, .submenu-title { .menu,
.submenu-title {
height: 56px; height: 56px;
display: flex; display: flex;
align-items: center; align-items: center;
...@@ -576,24 +558,27 @@ watch(route, () => { ...@@ -576,24 +558,27 @@ watch(route, () => {
margin: 0 5px; margin: 0 5px;
} }
.menu_left-icon img{ .menu_left-icon img {
width: 100%; width: 100%;
height: 100%; height: 100%;
object-fit: cover; object-fit: cover;
} }
.menu:hover, .submenu-title:hover { .menu:hover,
.submenu-title:hover {
background: rgba(5, 113, 196, 0.2); background: rgba(5, 113, 196, 0.2);
transform: translateX(3px); transform: translateX(3px);
} }
.menu.active, .submenu-title.active { .menu.active,
.submenu-title.active {
background: linear-gradient(90deg, rgba(6, 176, 225, 0.25) 0%, rgba(5, 113, 196, 0.4) 100%); background: linear-gradient(90deg, rgba(6, 176, 225, 0.25) 0%, rgba(5, 113, 196, 0.4) 100%);
box-shadow: 0 0 15px rgba(6, 176, 225, 0.25), inset 0 0 10px rgba(6, 176, 225, 0.1); box-shadow: 0 0 15px rgba(6, 176, 225, 0.25), inset 0 0 10px rgba(6, 176, 225, 0.1);
} }
.menu.active::before, .submenu-title.active::before { .menu.active::before,
.submenu-title.active::before {
content: ''; content: '';
position: absolute; position: absolute;
left: 0; left: 0;
...@@ -605,14 +590,16 @@ watch(route, () => { ...@@ -605,14 +590,16 @@ watch(route, () => {
box-shadow: 0 0 10px rgba(6, 176, 225, 0.5); box-shadow: 0 0 10px rgba(6, 176, 225, 0.5);
} }
.menu el-icon, .submenu-title el-icon { .menu el-icon,
.submenu-title el-icon {
font-size: 20px; font-size: 20px;
margin-right: 12px; margin-right: 12px;
color: #9ec8e6; color: #9ec8e6;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
} }
.menu .menu-text, .submenu-title .menu-text { .menu .menu-text,
.submenu-title .menu-text {
color: black; color: black;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
flex: 1; flex: 1;
...@@ -621,7 +608,8 @@ watch(route, () => { ...@@ -621,7 +608,8 @@ watch(route, () => {
padding-left: 10%; padding-left: 10%;
} }
.menu.active .menu-text, .submenu-title.active .menu-text { .menu.active .menu-text,
.submenu-title.active .menu-text {
color: #ffffff; color: #ffffff;
font-weight: 500; font-weight: 500;
text-shadow: 0 0 5px rgba(6, 176, 225, 0.5); text-shadow: 0 0 5px rgba(6, 176, 225, 0.5);
...@@ -814,8 +802,8 @@ watch(route, () => { ...@@ -814,8 +802,8 @@ watch(route, () => {
} }
.right-content { .right-content {
overflow: hidden; overflow: hidden;
height: 100%; height: 100%;
} }
...@@ -827,8 +815,9 @@ watch(route, () => { ...@@ -827,8 +815,9 @@ watch(route, () => {
.left { .left {
width: 220px; width: 220px;
} }
.menu, .submenu-title { .menu,
.submenu-title {
height: 52px; height: 52px;
} }
} }
...@@ -837,25 +826,28 @@ watch(route, () => { ...@@ -837,25 +826,28 @@ watch(route, () => {
.left { .left {
width: 80px; width: 80px;
} }
.menu-text, .arrow-icon { .menu-text,
.arrow-icon {
display: none; display: none;
} }
.menu, .submenu-title { .menu,
.submenu-title {
justify-content: center; justify-content: center;
padding: 0; padding: 0;
} }
.menu el-icon, .submenu-title el-icon { .menu el-icon,
.submenu-title el-icon {
margin-right: 0; margin-right: 0;
font-size: 24px; font-size: 24px;
} }
.submenu-list { .submenu-list {
display: none; display: none;
} }
.tip1 { .tip1 {
font-size: clamp(20px, 1vw, 28px); font-size: clamp(20px, 1vw, 28px);
} }
...@@ -865,18 +857,18 @@ watch(route, () => { ...@@ -865,18 +857,18 @@ watch(route, () => {
.allmain { .allmain {
min-width: auto; min-width: auto;
} }
.main { .main {
flex-direction: column; flex-direction: column;
} }
.left { .left {
width: 100%; width: 100%;
height: auto; height: auto;
flex-direction: row; flex-direction: row;
flex-wrap: wrap; flex-wrap: wrap;
} }
.left1 { .left1 {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
...@@ -884,37 +876,39 @@ watch(route, () => { ...@@ -884,37 +876,39 @@ watch(route, () => {
width: 100%; width: 100%;
padding: 10px; padding: 10px;
} }
.menu-item-container { .menu-item-container {
width: 33.33%; width: 33.33%;
} }
.menu, .submenu-title { .menu,
.submenu-title {
width: 100%; width: 100%;
height: 50px; height: 50px;
justify-content: center; justify-content: center;
padding: 0; padding: 0;
margin: 5px; margin: 5px;
} }
.menu-text { .menu-text {
display: block; display: block;
font-size: 12px; font-size: 12px;
} }
.menu el-icon, .submenu-title el-icon { .menu el-icon,
.submenu-title el-icon {
margin-right: 5px; margin-right: 5px;
font-size: 14px; font-size: 14px;
} }
.arrow-icon { .arrow-icon {
display: none; display: none;
} }
.submenu-list { .submenu-list {
display: none; display: none;
} }
.tabs-container { .tabs-container {
overflow-x: auto; overflow-x: auto;
/* padding-bottom: 10px; */ /* padding-bottom: 10px; */
......
src/router/index.js
浏览文件 @ e79e30ac
...@@ -103,19 +103,19 @@ export const constantRoutes = [ ...@@ -103,19 +103,19 @@ export const constantRoutes = [
meta: { title: '人员管理', icon: 'dashboard', affix: true } meta: { title: '人员管理', icon: 'dashboard', affix: true }
}, },
{ {
path: '/analysisPage', path: '/dashboard/analysis',
component: () => import('../views/dashboard/analysis/index.vue'), component: () => import('../views/dashboard/analysis/index.vue'),
name: 'analySisPage', name: 'analySisPage',
meta: { title: '分析页面', icon: 'dashboard', affix: true } meta: { title: '分析页面', icon: 'dashboard', affix: true }
}, },
{ {
path: '/workBenchPage', path: '/dashboard/workbench',
component: () => import('../views/dashboard/workbench/index.vue'), component: () => import('../views/dashboard/workbench/index.vue'),
name: 'WorkbenchPage', name: 'WorkbenchPage',
meta: { title: '工作台', icon: 'dashboard', affix: true } meta: { title: '工作台', icon: 'dashboard', affix: true }
}, },
{ {
path: '/usermanage', path: '/systemmanage/staffManage',
component: () => import('../views/systemmanage/staffManage/index.vue'), component: () => import('../views/systemmanage/staffManage/index.vue'),
name: 'systemManage', name: 'systemManage',
meta: { title: '人员管理', icon: 'dashboard', affix: true } meta: { title: '人员管理', icon: 'dashboard', affix: true }
...@@ -127,51 +127,51 @@ export const constantRoutes = [ ...@@ -127,51 +127,51 @@ export const constantRoutes = [
meta: { title: '建筑管理', icon: 'dashboard', affix: true } meta: { title: '建筑管理', icon: 'dashboard', affix: true }
}, },
{ {
path: '/uavdispatch', path: '/uavshowdate',
component: () => import('../views/uavshowdate/index.vue'), component: () => import('../views/uavshowdate/index.vue'),
name: 'uavDispatch', name: 'uavShowdate',
meta: { title: '无人机调度', icon: 'dashboard', affix: true } meta: { title: '无人机调度', icon: 'dashboard', affix: true }
}, },
{ {
path: '/firesurveillance', path: '/areafiremanage/firesurveillance',
component: () => import('../views/areafiremanage/firesurveillance/index.vue'), component: () => import('../views/areafiremanage/firesurveillance/index.vue'),
name: 'fireSurveillance', name: 'fireSurveillance',
meta: { title: '历史火情', icon: 'dashboard', affix: true } meta: { title: '历史火情', icon: 'dashboard', affix: true }
}, },
{ {
path: '/historyfire', path: '/areafiremanage/historyfire',
component: () => import('../views/areafiremanage/historyfire/index.vue'), component: () => import('../views/areafiremanage/historyfire/index.vue'),
name: 'historyFire', name: 'historyFire',
meta: { title: '当前火情', icon: 'dashboard', affix: true }, meta: { title: '当前火情', icon: 'dashboard', affix: true },
}, },
{ {
path: '/floordetaildate', path: '/floordetail',
component: () => import('../views/areafiremanage/historyfire/components/floordetail.vue'), component: () => import('../views/areafiremanage/historyfire/components/floordetail.vue'),
name: 'floorDetailDate', name: 'floorDetail',
meta: { title: '详细楼层火情', icon: 'dashboard', affix: true } meta: { title: '详细楼层火情', icon: 'dashboard', affix: true }
}, },
{ {
path: '/buildingdetaildate', path: '/showdetaildate',
component: () => import('../views/areabuildmanage/components/showdetaildate.vue'), component: () => import('../views/areabuildmanage/components/showdetaildate.vue'),
name: 'buildingDetailDate', name: 'showDetaildate',
meta: { title: '楼详细建筑数据', icon: 'dashboard', affix: true } meta: { title: '楼详细建筑数据', icon: 'dashboard', affix: true }
}, },
{ {
path: '/onefloorbuildingdetaildate', path: '/areabuildmanage/onefloor',
component: () => import('../views/areabuildmanage/onefloor/index.vue'), component: () => import('../views/areabuildmanage/onefloor/index.vue'),
name: 'oneFloorBuildingDetailDate', name: 'oneFloorBuildingDetailDate',
meta: { title: '层详细建筑数据', icon: 'dashboard', affix: true } meta: { title: '层详细建筑数据', icon: 'dashboard', affix: true }
}, },
{ {
path: '/uavdetaildate', path: '/uavshowdate/uavmanage',
component: () => import('../views/uavshowdate/uavmanage/index.vue'), component: () => import('../views/uavshowdate/uavmanage/index.vue'),
name: 'uavDetailDate', name: 'uavDetailDate',
meta: { title: '无人机管理', icon: 'dashboard', affix: true } meta: { title: '无人机管理', icon: 'dashboard', affix: true }
}, },
{ {
path: '/recordfireinfo', path: '/areafiremanage/firerecord',
component: () => import('../views/areafiremanage/firerecord/index.vue'), component: () => import('../views/areafiremanage/firerecord/index.vue'),
name: 'recordFireInfo', name: 'recordFireInfo',
meta: { title: '火情记录管理', icon: 'dashboard', affix: true } meta: { title: '火情记录管理', icon: 'dashboard', affix: true }
......
src/views/areabuildmanage/components/showdetaildate.vue
浏览文件 @ e79e30ac
...@@ -7,7 +7,7 @@ ...@@ -7,7 +7,7 @@
<div class="left-top"> <div class="left-top">
<!-- 区域信息概览 --> <!-- 区域信息概览 -->
<div class="info-card region-overview"> <div class="info-card region-overview">
<searchtop :searchShowData="searchShowData" @commentGetList="getFloorGetFloorNoListFn"></searchtop> <searchtop :searchShowData="searchShowData" @commentGetList="getFloorGetFloorNoListFn"></searchtop>
</div> </div>
</div> </div>
...@@ -16,11 +16,15 @@ ...@@ -16,11 +16,15 @@
<div class="card-tabs"> <div class="card-tabs">
<span class="title">楼建筑列表</span> <span class="title">楼建筑列表</span>
<div class="card-actions"> <div class="card-actions">
<el-button class="operation-button" type="primary" size="small">导入</el-button> <el-button class="operation-button" type="primary" size="small">导入</el-button>
<el-button class="operation-button" type="primary" size="small">导出</el-button> <el-button class="operation-button" type="primary" size="small">导出</el-button>
<el-button class="operation-button" type="primary" size="small" @click="handleAddInfoFn">新增建筑</el-button> <el-button class="operation-button" type="primary" size="small" @click="handleAddInfoFn">新增建筑</el-button>
<el-button class="operation-button" type="primary" size="small" @click="handleRefreshInfoFn"><el-icon ><RefreshRight /></el-icon></el-button> <el-button class="operation-button" type="primary" size="small" @click="handleRefreshInfoFn"><el-icon>
<el-button class="operation-button" type="primary" size="small"><el-icon><FullScreen /></el-icon></el-button> <RefreshRight />
</el-icon></el-button>
<el-button class="operation-button" type="primary" size="small"><el-icon>
<FullScreen />
</el-icon></el-button>
</div> </div>
</div> </div>
<div class="card-table"> <div class="card-table">
...@@ -32,21 +36,20 @@ ...@@ -32,21 +36,20 @@
<!-- 新增建筑抽屉 --> <!-- 新增建筑抽屉 -->
<el-drawer v-model="isAddDrawer" title="添加建筑信息" :with-header="false" :before-close="beforeCloseAddBuildDrawer"> <el-drawer v-model="isAddDrawer" title="添加建筑信息" :with-header="false" :before-close="beforeCloseAddBuildDrawer">
<Flooraddbuilding @closeAddDrawer="closeAddDrawer" @tableDataRefresh="handleRefreshInfoFn"></Flooraddbuilding> <Flooraddbuilding @closeAddDrawer="closeAddDrawer" @tableDataRefresh="handleRefreshInfoFn"></Flooraddbuilding>
</el-drawer> </el-drawer>
<!-- 修改建筑抽屉 --> <!-- 修改建筑抽屉 -->
<el-drawer v-model="isBuildingEditDrawer" title="修改建筑信息" :with-header="false" :before-close="beforeCloseAddBuildDrawer"> <el-drawer v-model="isBuildingEditDrawer" title="修改建筑信息" :with-header="false"
:before-close="beforeCloseAddBuildDrawer">
<Flooraddbuilding :rowData="rowData" :isBuildingEditDrawer="isBuildingEditDrawer" @closeAddDrawer="closeBuildingEditDrawer" @tableDataRefresh="handleRefreshInfoFn"></Flooraddbuilding>
<Flooraddbuilding :rowData="rowData" :isBuildingEditDrawer="isBuildingEditDrawer"
@closeAddDrawer="closeBuildingEditDrawer" @tableDataRefresh="handleRefreshInfoFn"></Flooraddbuilding>
</el-drawer> </el-drawer>
<!-- 图片预览组件 --> <!-- 图片预览组件 -->
<el-image-viewer <el-image-viewer v-if="previewVisible && previewVisibledialogDate.length > 0" :url-list="previewVisibledialogDate"
v-if="previewVisible && previewVisibledialogDate.length > 0" @close="previewVisible = false" />
:url-list="previewVisibledialogDate"
@close="previewVisible = false"
/>
</div> </div>
...@@ -60,21 +63,21 @@ import tabledata from '../../commentcomponents/tabledata/index.vue'; ...@@ -60,21 +63,21 @@ import tabledata from '../../commentcomponents/tabledata/index.vue';
import useAppStore from '../../../store/module/app'; import useAppStore from '../../../store/module/app';
import router from '../../../router'; import router from '../../../router';
import Flooraddbuilding from './flooraddbuilding.vue'; import Flooraddbuilding from './flooraddbuilding.vue';
import { useRoute,useRouter } from 'vue-router'; import { useRoute, useRouter } from 'vue-router';
import { floorPageAPI,floorRemoveAPI,floorGetFloorNoListAPI} from '../../../api/floor'; import { floorPageAPI, floorRemoveAPI, floorGetFloorNoListAPI } from '../../../api/floor';
const route = useRoute(); const route = useRoute();
const useAppStoreInstance = useAppStore(); const useAppStoreInstance = useAppStore();
// 搜索栏配置 // 搜索栏配置
const searchShowData = ref([ const searchShowData = ref([
{ label: '楼层描述', placeholder: "请输入", type: 'input', content: '',isShow: true }, { label: '楼层描述', placeholder: "请输入", type: 'input', content: '', isShow: true },
{ label: '楼层号', placeholder: "请选择", type: 'autocomplete',click:"floorGetFloorNoListFn", content: '', options: [] ,isShow: true} { label: '楼层号', placeholder: "请选择", type: 'autocomplete', click: "floorGetFloorNoListFn", content: '', options: [], isShow: true }
]); ]);
const getFloorGetFloorNoListFn = () => { const getFloorGetFloorNoListFn = () => {
floorGetFloorNoListAPI().then(res => { floorGetFloorNoListAPI().then(res => {
}); });
}; };
...@@ -96,15 +99,15 @@ const rowData = ref([]); ...@@ -96,15 +99,15 @@ const rowData = ref([]);
const handleAddInfoFn = () => { const handleAddInfoFn = () => {
console.log("打开新增信息"); console.log("打开新增信息");
isAddDrawer.value = true; isAddDrawer.value = true;
} }
const handleRefreshInfoFn = () => { const handleRefreshInfoFn = () => {
console.log("刷新数据"); console.log("刷新数据");
initTableDateFn({currentPageNum:useAppStoreInstance.pageCountInfo.currentPageNum,currentPageSize:useAppStoreInstance.pageCountInfo.currentPageSize}) initTableDateFn({ currentPageNum: useAppStoreInstance.pageCountInfo.currentPageNum, currentPageSize: useAppStoreInstance.pageCountInfo.currentPageSize })
} }
const closeAddDrawer = () => { const closeAddDrawer = () => {
console.log("000000-------1-----0000000000",isAddDrawer.value) console.log("000000-------1-----0000000000", isAddDrawer.value)
isAddDrawer.value = false; isAddDrawer.value = false;
} }
...@@ -117,8 +120,8 @@ const beforeCloseAddBuildDrawer = () => { ...@@ -117,8 +120,8 @@ const beforeCloseAddBuildDrawer = () => {
const oneBuildingSeeDetails = (data) => { const oneBuildingSeeDetails = (data) => {
console.log("查看详情", data); console.log("查看详情", data);
router.push({ router.push({
path: '/onefloorbuildingdetaildate', path: '/areabuildmanage/onefloor',
// params: { data: JSON.stringify(data) } // params: { data: JSON.stringify(data) }
}); });
} }
...@@ -129,26 +132,26 @@ const oneBuildingDdeleteData = (data) => { ...@@ -129,26 +132,26 @@ const oneBuildingDdeleteData = (data) => {
cancelButtonText: '取消', cancelButtonText: '取消',
type: 'warning', type: 'warning',
}).then(() => { }).then(() => {
console.log("删除", data.floorId,useAppStoreInstance.pageCountInfo.currentPageNum); console.log("删除", data.floorId, useAppStoreInstance.pageCountInfo.currentPageNum);
floorRemoveAPI({floorId:data.floorId}).then(res => { floorRemoveAPI({ floorId: data.floorId }).then(res => {
console.log("删除成功", res); console.log("删除成功", res);
}) })
initTableDateFn({currentPageNum:useAppStoreInstance.pageCountInfo.currentPageNum,currentPageSize:useAppStoreInstance.pageCountInfo.currentPageSize}) initTableDateFn({ currentPageNum: useAppStoreInstance.pageCountInfo.currentPageNum, currentPageSize: useAppStoreInstance.pageCountInfo.currentPageSize })
ElMessage.success('已删除'); ElMessage.success('已删除');
}).catch((err) => { }).catch((err) => {
ElMessage.info('取消删除',err); ElMessage.info('取消删除', err);
}); });
} }
const oneResetBuildingShowInfo = (data) => { const oneResetBuildingShowInfo = (data) => {
console.log("000000----我执行了oneResetBuildingShowInfo",data) console.log("000000----我执行了oneResetBuildingShowInfo", data)
isBuildingEditDrawer.value = true; isBuildingEditDrawer.value = true;
rowData.value = data; rowData.value = data;
rowData.value.isEdit = true; rowData.value.isEdit = true;
} }
const closeBuildingEditDrawer = () => { const closeBuildingEditDrawer = () => {
isBuildingEditDrawer.value = false; isBuildingEditDrawer.value = false;
console.log("000000----我执行了closeBuildingEditDrawer--------0000000000") console.log("000000----我执行了closeBuildingEditDrawer--------0000000000")
} }
...@@ -159,29 +162,29 @@ const previewVisibledialogDate = ref([]); ...@@ -159,29 +162,29 @@ const previewVisibledialogDate = ref([]);
const seeBuildingFloorPlan = (data) => { const seeBuildingFloorPlan = (data) => {
console.log("查看楼层平面图", data); console.log("查看楼层平面图", data);
previewVisible.value = true; previewVisible.value = true;
if(data.floorPlan) { if (data.floorPlan) {
previewVisibledialogDate.value = [data.floorPlan] previewVisibledialogDate.value = [data.floorPlan]
return; return;
}else { } else {
previewVisibledialogDate.value = [] previewVisibledialogDate.value = []
ElMessage.warning({ ElMessage.warning({
message: '该层暂无楼层平面图', message: '该层暂无楼层平面图',
duration: 2000 duration: 2000
}) })
} }
} }
// 表格数据 // 表格数据
const tableShowData = ref([{ const tableShowData = ref([{
tableHeader: [ tableHeader: [
{label: '建筑编号', prop: 'buildCode'}, { label: '建筑编号', prop: 'buildCode' },
{label: '建筑名称', prop: 'buildName'}, { label: '建筑名称', prop: 'buildName' },
{label: '建筑层数', prop: 'floorNo'}, { label: '建筑层数', prop: 'floorNo' },
{label: '楼层平面图', prop: 'floorPlanSee'}, { label: '楼层平面图', prop: 'floorPlanSee' },
{label: '更新时间', prop: 'updateTime'}, { label: '更新时间', prop: 'updateTime' },
{label: '楼层描述', prop: 'description'}, { label: '楼层描述', prop: 'description' },
{label: '操作', prop: 'Operation'} { label: '操作', prop: 'Operation' }
], ],
tableBody: [] tableBody: []
}]); }]);
...@@ -191,37 +194,37 @@ const containerStyle = computed(() => ({ ...@@ -191,37 +194,37 @@ const containerStyle = computed(() => ({
'--card-spacing': layoutConfig.cardSpacing, '--card-spacing': layoutConfig.cardSpacing,
})); }));
const Operation = ref([ const Operation = ref([
{label:'查看详情', type:'primary', icon:'Add', click: oneBuildingSeeDetails}, { label: '查看详情', type: 'primary', icon: 'Add', click: oneBuildingSeeDetails },
{label:'删除', type:'danger', icon:'Delete', click: oneBuildingDdeleteData}, { label: '删除', type: 'danger', icon: 'Delete', click: oneBuildingDdeleteData },
{label:'修改', type:'primary', icon:'EditPen', click: oneResetBuildingShowInfo} { label: '修改', type: 'primary', icon: 'EditPen', click: oneResetBuildingShowInfo }
]); ]);
const floorPlanSee = ref([ {label:'查看', type:'primary', icon:'EditPen', click: seeBuildingFloorPlan}, ]); const floorPlanSee = ref([{ label: '查看', type: 'primary', icon: 'EditPen', click: seeBuildingFloorPlan },]);
const initTableDateFn = (parameter) => { const initTableDateFn = (parameter) => {
let submitData = {currentPageNum: parameter.currentPageNum, currentPageSize: parameter.currentPageSize,...useAppStoreInstance.PUSHPARAMETER}; let submitData = { currentPageNum: parameter.currentPageNum, currentPageSize: parameter.currentPageSize, ...useAppStoreInstance.PUSHPARAMETER };
floorPageAPI(submitData).then(res => { floorPageAPI(submitData).then(res => {
console.log('获取建筑列表数据返回结果:', res); console.log('获取建筑列表数据返回结果:', res);
if (res.code === 200) { if (res.code === 200) {
tableShowData.value[0].tableBody = [] tableShowData.value[0].tableBody = []
let { list, total } = res.data; let { list, total } = res.data;
list = list.filter(element => { list = list.filter(element => {
return element.isDeleted === 0; return element.isDeleted === 0;
}); });
list.forEach(element => { list.forEach(element => {
element.Operation = [...Operation.value] element.Operation = [...Operation.value]
element.floorPlanSee =[...floorPlanSee.value] element.floorPlanSee = [...floorPlanSee.value]
}); });
tableShowData.value[0].tableBody = list tableShowData.value[0].tableBody = list
tableShowData.value[0].total = total tableShowData.value[0].total = total
console.log(tableShowData.value, '展示数据'); console.log(tableShowData.value, '展示数据');
} }
}) })
} }
// 监听路由变化 // 监听路由变化
watch(route, () => { watch(route, () => {
initTableDateFn({currentPageNum: 1, currentPageSize: 10}) initTableDateFn({ currentPageNum: 1, currentPageSize: 10 })
console.log('新增组件已挂载',useAppStoreInstance.setParameter) console.log('新增组件已挂载', useAppStoreInstance.setParameter)
}, { immediate: true }); }, { immediate: true });
</script> </script>
...@@ -295,7 +298,7 @@ watch(route, () => { ...@@ -295,7 +298,7 @@ watch(route, () => {
flex: 1; flex: 1;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
height: 8%; height: 8%;
} }
.operation-button { .operation-button {
...@@ -304,7 +307,7 @@ watch(route, () => { ...@@ -304,7 +307,7 @@ watch(route, () => {
.card-table { .card-table {
width: 100%; width: 100%;
flex:1; flex: 1;
overflow: hidden; overflow: hidden;
border-radius: 8px; border-radius: 8px;
} }
...@@ -313,7 +316,7 @@ watch(route, () => { ...@@ -313,7 +316,7 @@ watch(route, () => {
.left-top { .left-top {
flex-direction: column; flex-direction: column;
} }
.region-overview { .region-overview {
width: 100%; width: 100%;
flex: none; flex: none;
......
src/views/areabuildmanage/index.vue
浏览文件 @ e79e30ac
...@@ -7,7 +7,7 @@ ...@@ -7,7 +7,7 @@
<div class="left-top"> <div class="left-top">
<!-- 区域信息概览 --> <!-- 区域信息概览 -->
<div class="info-card region-overview"> <div class="info-card region-overview">
<searchtop :searchShowData="searchShowData"></searchtop> <searchtop :searchShowData="searchShowData"></searchtop>
</div> </div>
</div> </div>
...@@ -18,12 +18,16 @@ ...@@ -18,12 +18,16 @@
<div class="card-actions"> <div class="card-actions">
<el-button class="operation-button" type="primary" size="small">导出</el-button> <el-button class="operation-button" type="primary" size="small">导出</el-button>
<el-button class="operation-button" type="primary" size="small" @click="handleAddInfoFn">新增建筑</el-button> <el-button class="operation-button" type="primary" size="small" @click="handleAddInfoFn">新增建筑</el-button>
<el-button class="operation-button" type="primary" size="small" @click="handleRefreshInfoFn"><el-icon ><RefreshRight /></el-icon></el-button> <el-button class="operation-button" type="primary" size="small" @click="handleRefreshInfoFn"><el-icon>
<el-button class="operation-button" type="primary" size="small"><el-icon><FullScreen /></el-icon></el-button> <RefreshRight />
</el-icon></el-button>
<el-button class="operation-button" type="primary" size="small"><el-icon>
<FullScreen />
</el-icon></el-button>
</div> </div>
</div> </div>
<div class="card-table"> <div class="card-table">
<tabledata :tableShowData="tableShowData" @tableDataRefresh="handleRefreshInfoFn"></tabledata> <tabledata :tableShowData="tableShowData" @tableDataRefresh="handleRefreshInfoFn"></tabledata>
</div> </div>
</div> </div>
</div> </div>
...@@ -31,14 +35,16 @@ ...@@ -31,14 +35,16 @@
<!-- 新增建筑抽屉 --> <!-- 新增建筑抽屉 -->
<el-drawer v-model="isAddDrawer" title="添加建筑信息" :with-header="false" :before-close="beforeCloseAddBuildDrawer"> <el-drawer v-model="isAddDrawer" title="添加建筑信息" :with-header="false" :before-close="beforeCloseAddBuildDrawer">
<Addbuild @closeAddDrawer="closeAddDrawer" @tableDataRefresh="handleRefreshInfoFn"></Addbuild> <Addbuild @closeAddDrawer="closeAddDrawer" @tableDataRefresh="handleRefreshInfoFn"></Addbuild>
</el-drawer> </el-drawer>
<!-- 修改建筑抽屉 --> <!-- 修改建筑抽屉 -->
<el-drawer v-model="isBuildingEditDrawer" title="修改用户信息" :with-header="false" :before-close="beforeCloseAddBuildDrawer"> <el-drawer v-model="isBuildingEditDrawer" title="修改用户信息" :with-header="false"
:before-close="beforeCloseAddBuildDrawer">
<showResetBuildingInfo :rowData="rowData" :isBuildingEditDrawer="isBuildingEditDrawer" @closeEditDrawer="closeBuildingEditDrawer" @tableDataRefresh="handleRefreshInfoFn"></showResetBuildingInfo>
<showResetBuildingInfo :rowData="rowData" :isBuildingEditDrawer="isBuildingEditDrawer"
@closeEditDrawer="closeBuildingEditDrawer" @tableDataRefresh="handleRefreshInfoFn"></showResetBuildingInfo>
</el-drawer> </el-drawer>
</div> </div>
</template> </template>
...@@ -51,17 +57,17 @@ import tabledata from '../commentcomponents/tabledata/index.vue'; ...@@ -51,17 +57,17 @@ import tabledata from '../commentcomponents/tabledata/index.vue';
import showResetBuildingInfo from './components/showResetBuildingInfo.vue'; import showResetBuildingInfo from './components/showResetBuildingInfo.vue';
import Addbuild from './components/addbuild.vue'; import Addbuild from './components/addbuild.vue';
import router from '../../router'; import router from '../../router';
import { buildingPageApi,buildingRemoveApi,buildingGetBuildCodeListApi } from '../../api/build'; import { buildingPageApi, buildingRemoveApi, buildingGetBuildCodeListApi } from '../../api/build';
import { useRoute,useRouter } from 'vue-router'; import { useRoute, useRouter } from 'vue-router';
import useAppStore from '../../store/module/app'; import useAppStore from '../../store/module/app';
const useAppStoreInstance = useAppStore(); const useAppStoreInstance = useAppStore();
const route = useRoute(); const route = useRoute();
// 搜索栏配置 // 搜索栏配置
const searchShowData = ref([ const searchShowData = ref([
{ label: '功能描述', placeholder: "请输入", type: 'input', content: '',isShow: true }, { label: '功能描述', placeholder: "请输入", type: 'input', content: '', isShow: true },
{ label: '建筑编号', placeholder: "请选择", type: 'autocomplete', content: '',isShow: true, click:'buildingGetBuildCodeListApiFn', options: [] }, { label: '建筑编号', placeholder: "请选择", type: 'autocomplete', content: '', isShow: true, click: 'buildingGetBuildCodeListApiFn', options: [] },
{ label: '建筑层数', placeholder: "请选择", type: 'autocomplete', content: '',isShow: true, click:'buildingGetTotalFloorNumListFn', options: [] }, { label: '建筑层数', placeholder: "请选择", type: 'autocomplete', content: '', isShow: true, click: 'buildingGetTotalFloorNumListFn', options: [] },
{ label: '建筑名称', placeholder: "请选择", type: 'autocomplete', content: '',isShow: true, click:'buildingGetBuildNameListFn', options: [] }, { label: '建筑名称', placeholder: "请选择", type: 'autocomplete', content: '', isShow: true, click: 'buildingGetBuildNameListFn', options: [] },
]); ]);
...@@ -101,10 +107,10 @@ const beforeCloseAddBuildDrawer = () => { ...@@ -101,10 +107,10 @@ const beforeCloseAddBuildDrawer = () => {
const buildingSeeDetails = (data) => { const buildingSeeDetails = (data) => {
console.log("查看详情", data); console.log("查看详情", data);
router.push({ router.push({
path: '/buildingdetaildate', path: '/showdetaildate',
}); });
useAppStoreInstance.setPushParameter({buildId:data.buildId}) useAppStoreInstance.setPushParameter({ buildId: data.buildId })
} }
const buildingDdeleteData = (data) => { const buildingDdeleteData = (data) => {
...@@ -116,24 +122,24 @@ const buildingDdeleteData = (data) => { ...@@ -116,24 +122,24 @@ const buildingDdeleteData = (data) => {
.then(() => { .then(() => {
try { try {
// 用户点击「确认」 // 用户点击「确认」
const {buildId,buildName} = data; const { buildId, buildName } = data;
buildingRemoveApi({ buildId: buildId }) buildingRemoveApi({ buildId: buildId })
.then(res => { .then(res => {
if (res.code === 200) { if (res.code === 200) {
ElMessage.success("`${buildName}已删除`"); ElMessage.success("`${buildName}已删除`");
handleRefreshInfoFn(); handleRefreshInfoFn();
} else { } else {
ElMessage.error(res.message || '删除失败'); // 更明确的错误提示 ElMessage.error(res.message || '删除失败'); // 更明确的错误提示
} }
}) })
.catch(err => { .catch(err => {
// API 请求失败 // API 请求失败
ElMessage.error(err?.message || '删除请求失败'); ElMessage.error(err?.message || '删除请求失败');
}); });
} catch (error) { } catch (error) {
console.error(error,'API 请求失败'); console.error(error, 'API 请求失败');
} }
}) })
.catch(() => { .catch(() => {
// 用户点击「取消」 // 用户点击「取消」
...@@ -142,25 +148,25 @@ const buildingDdeleteData = (data) => { ...@@ -142,25 +148,25 @@ const buildingDdeleteData = (data) => {
}; };
const resetBuildingShowInfo = (data) => { const resetBuildingShowInfo = (data) => {
isBuildingEditDrawer.value = true; isBuildingEditDrawer.value = true;
rowData.value = data; rowData.value = data;
console.log("000000------------0000000000",rowData.value) console.log("000000------------0000000000", rowData.value)
} }
const closeBuildingEditDrawer = () => { const closeBuildingEditDrawer = () => {
isBuildingEditDrawer.value = false; isBuildingEditDrawer.value = false;
// console.log("000000------------0000000000",isBuildingEditDrawer.value) // console.log("000000------------0000000000",isBuildingEditDrawer.value)
} }
// 表格数据 // 表格数据
const tableShowData = ref([{ const tableShowData = ref([{
tableHeader: [ tableHeader: [
{label: '建筑编号', prop: 'buildCode'}, { label: '建筑编号', prop: 'buildCode' },
{label: '建筑名称', prop: 'buildName'}, { label: '建筑名称', prop: 'buildName' },
{label: '建筑层数', prop: 'totalFloorNum'}, { label: '建筑层数', prop: 'totalFloorNum' },
{label: '火情次数', prop: 'fireNum'}, { label: '火情次数', prop: 'fireNum' },
{label: '更新时间', prop: 'updateTime'}, { label: '更新时间', prop: 'updateTime' },
{label: '操作', prop: 'Operation'} { label: '操作', prop: 'Operation' }
], ],
tableBody: [] tableBody: []
}]); }]);
...@@ -172,34 +178,34 @@ const Operation = ref([ ...@@ -172,34 +178,34 @@ const Operation = ref([
// onMounted(() => { // onMounted(() => {
// initTableDateFn() // initTableDateFn()
// }); // });
const initTableDateFn = () => { const initTableDateFn = () => {
console.log('初始化数据'); console.log('初始化数据');
buildingPageApi({currentPageNum: 1, currentPageSize: 10}).then(res => { buildingPageApi({ currentPageNum: 1, currentPageSize: 10 }).then(res => {
if(res.code === 200){ if (res.code === 200) {
let {list ,total,pageSize} = res.data; let { list, total, pageSize } = res.data;
if(!list){ if (!list) {
ElMessage.warning('建筑列表暂无数据，请先添加建筑数据'); ElMessage.warning('建筑列表暂无数据，请先添加建筑数据');
}else{ } else {
tableShowData.value[0].tableBody = [] tableShowData.value[0].tableBody = []
list = list.filter(element => { list = list.filter(element => {
return element.isDeleted === 0; return element.isDeleted === 0;
}); });
list.forEach(element => { list.forEach(element => {
element.Operation = [...Operation.value] element.Operation = [...Operation.value]
}); });
tableShowData.value[0].tableBody = list tableShowData.value[0].tableBody = list
tableShowData.value[0].total = total tableShowData.value[0].total = total
tableShowData.value[0].pageSize = pageSize tableShowData.value[0].pageSize = pageSize
console.log(tableShowData.value, '展示数据'); console.log(tableShowData.value, '展示数据');
}
} }
}
}).catch(err => {
ElMessage.error(err?.message || "建筑列表请求失败")
}) }).catch(err => {
}; ElMessage.error(err?.message || "建筑列表请求失败")
})
};
// 监听路由变化 // 监听路由变化
watch(route, () => { watch(route, () => {
...@@ -282,7 +288,7 @@ const containerStyle = computed(() => ({ ...@@ -282,7 +288,7 @@ const containerStyle = computed(() => ({
flex: 1; flex: 1;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
height: 8%; height: 8%;
} }
.operation-button { .operation-button {
...@@ -291,7 +297,7 @@ const containerStyle = computed(() => ({ ...@@ -291,7 +297,7 @@ const containerStyle = computed(() => ({
.card-table { .card-table {
width: 100%; width: 100%;
flex:1; flex: 1;
overflow: hidden; overflow: hidden;
border-radius: 8px; border-radius: 8px;
} }
...@@ -300,7 +306,7 @@ const containerStyle = computed(() => ({ ...@@ -300,7 +306,7 @@ const containerStyle = computed(() => ({
.left-top { .left-top {
flex-direction: column; flex-direction: column;
} }
.region-overview { .region-overview {
width: 100%; width: 100%;
flex: none; flex: none;
......
src/views/areabuildmanage/onefloor/index.vue
浏览文件 @ e79e30ac
...@@ -10,7 +10,8 @@ ...@@ -10,7 +10,8 @@
<div class="card-table"> <div class="card-table">
<onefloorbuildingdetaildate></onefloorbuildingdetaildate> <onefloorbuildingdetaildate>
</areabuildmanage /onefloor>
</div> </div>
</div> </div>
...@@ -24,7 +25,7 @@ ...@@ -24,7 +25,7 @@
<script setup> <script setup>
import { reactive, computed, ref, onMounted } from 'vue'; import { reactive, computed, ref, onMounted } from 'vue';
// import searchtop from '../../commentcomponents/searchtop/index.vue'; // import searchtop from '../../commentcomponents/searchtop/index.vue';
import onefloorbuildingdetaildate from '../components/onefloorbuildingdetaildate.vue' import onefloorbuildingdetaildate from '../components/areabuildmanage/onefloor.vue'
import { ElMessage, ElMessageBox } from 'element-plus' import { ElMessage, ElMessageBox } from 'element-plus'
import { staffGetPageInfoApi } from "../../../api/staff.js" import { staffGetPageInfoApi } from "../../../api/staff.js"
......
src/views/areafiremanage/historyfire/index.vue
浏览文件 @ e79e30ac
...@@ -5,17 +5,17 @@ ...@@ -5,17 +5,17 @@
<!-- 左侧区域 --> <!-- 左侧区域 -->
<div class="left-section"> <div class="left-section">
<!-- 左侧上部分 --> <!-- 左侧上部分 -->
<!-- 左侧下部分：统计区域 --> <!-- 左侧下部分：统计区域 -->
<div class="info-card stats-alerts"> <div class="info-card stats-alerts">
<div class="card-tong card-show" > <div class="card-tong card-show">
<currentFire :currentFireData="currentFireData" ></currentFire> <currentFire :currentFireData="currentFireData"></currentFire>
</div> </div>
<div class="card-tong" > <div class="card-tong">
</div> </div>
</div> </div>
</div> </div>
</main> </main>
...@@ -29,7 +29,7 @@ import currentFire from './components/currentFirecard.vue'; ...@@ -29,7 +29,7 @@ import currentFire from './components/currentFirecard.vue';
// import uav from '../components/uav.vue'; // import uav from '../components/uav.vue';
// import meanList from '../components/menuList.vue'; // import meanList from '../components/menuList.vue';
import useAppStore from '../../../store/module/app'; import useAppStore from '../../../store/module/app';
import { useRouter,useRoute } from 'vue-router'; import { useRouter, useRoute } from 'vue-router';
const useAppStoreInstance = useAppStore(); const useAppStoreInstance = useAppStore();
const curruserInfo = computed(() => (useAppStoreInstance.userInfo)); const curruserInfo = computed(() => (useAppStoreInstance.userInfo));
...@@ -40,81 +40,81 @@ const route = useRoute(); ...@@ -40,81 +40,81 @@ const route = useRoute();
const currentFireData = ref([ const currentFireData = ref([
// 火灾数据1 // 火灾数据1
{ {
location: "红色 四单元 七号搂 3楼", location: "红色 四单元 七号搂 3楼",
severity: "四级 (大规模)", severity: "四级 (大规模)",
status: "消防人员已到达现场", status: "消防人员已到达现场",
time: "2025年8月7日 11:14 发现", time: "2025年8月7日 11:14 发现",
fireLevel: 0, fireLevel: 0,
isXFOk: false isXFOk: false
}, },
// 火灾数据2 // 火灾数据2
{ {
location: "金色家园小区 三单元 七号搂 3楼", location: "金色家园小区 三单元 七号搂 3楼",
severity: "三级 (大规模)", severity: "三级 (大规模)",
status: "消防人员未到达现场", status: "消防人员未到达现场",
time: "2025年8月5日 11:14 发现", time: "2025年8月5日 11:14 发现",
fireLevel: 1, fireLevel: 1,
isXFOk: true isXFOk: true
}, },
// 火灾数据3 // 火灾数据3
{ {
location: "金色家园小区 四单元 七号搂 3楼", location: "金色家园小区 四单元 七号搂 3楼",
severity: "四级 (大规模)", severity: "四级 (大规模)",
status: "消防人员已到达现场", status: "消防人员已到达现场",
time: "2025年8月7日 11:14 发现", time: "2025年8月7日 11:14 发现",
fireLevel: 0, fireLevel: 0,
isXFOk: false isXFOk: false
}, },
{ {
location: "金色家园小区 三单元 七号搂 3楼", location: "金色家园小区 三单元 七号搂 3楼",
severity: "三级 (大规模)", severity: "三级 (大规模)",
status: "消防人员未到达现场", status: "消防人员未到达现场",
time: "2025年8月5日 11:14 发现", time: "2025年8月5日 11:14 发现",
fireLevel: 2, fireLevel: 2,
isXFOk: true isXFOk: true
}, },
{ {
location: "金色家园小区 四单元 七号搂 3楼", location: "金色家园小区 四单元 七号搂 3楼",
severity: "四级 (大规模)", severity: "四级 (大规模)",
status: "消防人员已到达现场", status: "消防人员已到达现场",
time: "2025年8月7日 11:14 发现", time: "2025年8月7日 11:14 发现",
fireLevel: 0, fireLevel: 0,
isXFOk: false isXFOk: false
}, },
{ {
location: "金色家园小区 三单元 七号搂 3楼", location: "金色家园小区 三单元 七号搂 3楼",
severity: "三级 (大规模)", severity: "三级 (大规模)",
status: "消防人员未到达现场", status: "消防人员未到达现场",
time: "2025年8月5日 11:14 发现", time: "2025年8月5日 11:14 发现",
fireLevel: 2, fireLevel: 2,
isXFOk: true isXFOk: true
} }
]); ]);
// 定义一个uavRepairData的ref，里面包含了多个无人机维修数据 // 定义一个uavRepairData的ref，里面包含了多个无人机维修数据
const uavRepairData = ref([ const uavRepairData = ref([
// 第一个无人机维修数据，已经维修 // 第一个无人机维修数据，已经维修
{isRepaid: true, uavRepairSetailData:[{label:"无人机编号",value: '无人机1号'}, {label:"上报时间",value: '2025年8月7日 11:14'},{label:"型号",value: '小型无人机'},{label:"维护类型",value: '更换电池'}]}, { isRepaid: true, uavRepairSetailData: [{ label: "无人机编号", value: '无人机1号' }, { label: "上报时间", value: '2025年8月7日 11:14' }, { label: "型号", value: '小型无人机' }, { label: "维护类型", value: '更换电池' }] },
// 第二个无人机维修数据，已经维修 // 第二个无人机维修数据，已经维修
{isRepaid: true, uavRepairSetailData:[{label:"无人机编号",value: '无人机1号'}, {label:"上报时间",value: '2025年8月7日 11:14'},{label:"型号",value: '小型无人机'},{label:"维护类型",value: '更换电池'}]}, { isRepaid: true, uavRepairSetailData: [{ label: "无人机编号", value: '无人机1号' }, { label: "上报时间", value: '2025年8月7日 11:14' }, { label: "型号", value: '小型无人机' }, { label: "维护类型", value: '更换电池' }] },
// 第三个无人机维修数据，未维修 // 第三个无人机维修数据，未维修
{isRepaid: false, uavRepairSetailData:[{label:"无人机编号",value: '无人机1号'}, {label:"上报时间",value: '2025年8月7日 11:14'},{label:"型号",value: '小型无人机'},{label:"维护类型",value: '更换电池'}]}, { isRepaid: false, uavRepairSetailData: [{ label: "无人机编号", value: '无人机1号' }, { label: "上报时间", value: '2025年8月7日 11:14' }, { label: "型号", value: '小型无人机' }, { label: "维护类型", value: '更换电池' }] },
// 第四个无人机维修数据，已经维修 // 第四个无人机维修数据，已经维修
{isRepaid: true, uavRepairSetailData:[{label:"无人机编号",value: '无人机1号'}, {label:"上报时间",value: '2025年8月7日 11:14'},{label:"型号",value: '小型无人机'},{label:"维护类型",value: '更换电池'}]}, { isRepaid: true, uavRepairSetailData: [{ label: "无人机编号", value: '无人机1号' }, { label: "上报时间", value: '2025年8月7日 11:14' }, { label: "型号", value: '小型无人机' }, { label: "维护类型", value: '更换电池' }] },
// 第五个无人机维修数据，未维修 // 第五个无人机维修数据，未维修
{isRepaid: false, uavRepairSetailData:[{label:"无人机编号",value: '无人机1号'}, {label:"上报时间",value: '2025年8月7日 11:14'},{label:"型号",value: '小型无人机'},{label:"维护类型",value: '更换电池'}]}, { isRepaid: false, uavRepairSetailData: [{ label: "无人机编号", value: '无人机1号' }, { label: "上报时间", value: '2025年8月7日 11:14' }, { label: "型号", value: '小型无人机' }, { label: "维护类型", value: '更换电池' }] },
// 第六个无人机维修数据，已经维修 // 第六个无人机维修数据，已经维修
{isRepaid: true, uavRepairSetailData:[{label:"无人机编号",value: '无人机1号'}, {label:"上报时间",value: '2025年8月7日 11:14'},{label:"型号",value: '小型无人机'},{label:"维护类型",value: '更换电池'}]}, { isRepaid: true, uavRepairSetailData: [{ label: "无人机编号", value: '无人机1号' }, { label: "上报时间", value: '2025年8月7日 11:14' }, { label: "型号", value: '小型无人机' }, { label: "维护类型", value: '更换电池' }] },
]) ])
const menuItems = ref([ const menuItems = ref([
{ name: '首页', icon: new URL('../../../static/image/huo.png', import.meta.url), path: '/analysisPage' }, { name: '首页', icon: new URL('../../../static/image/huo.png', import.meta.url), path: '/dashboard/analysis' },
{ name: '系统管理', icon: new URL('../../../static/image/huo.png', import.meta.url), path: '/usermanage' }, { name: '系统管理', icon: new URL('../../../static/image/huo.png', import.meta.url), path: '/systemmanage/staffManage' },
{ name: '建筑管理', icon: new URL('../../../static/image/huo.png', import.meta.url), path: '/areabuildmanage' }, { name: '建筑管理', icon: new URL('../../../static/image/huo.png', import.meta.url), path: '/areabuildmanage' },
{ name: '无人机管理', icon: new URL('../../../static/image/huo.png', import.meta.url), path: '/uavdispatch' }, { name: '无人机管理', icon: new URL('../../../static/image/huo.png', import.meta.url), path: '/uavshowdate' },
{ name: '火情管理', icon: new URL('../../../static/image/huo.png', import.meta.url), path: '/firesurveillance' }, { name: '火情管理', icon: new URL('../../../static/image/huo.png', import.meta.url), path: '/areafiremanage/firesurveillance' },
{ name: '数字孪生管理', icon: new URL('../../../static/image/huo.png', import.meta.url), path: '/digital-twin' }, { name: '数字孪生管理', icon: new URL('../../../static/image/huo.png', import.meta.url), path: '/digital-twin' },
{ name: '个人信息', icon: new URL('../../../static/image/huo.png', import.meta.url), path: '/usermanage' } { name: '个人信息', icon: new URL('../../../static/image/huo.png', import.meta.url), path: '/systemmanage/staffManage' }
]); ]);
// 响应式配置 // 响应式配置
const layoutConfig = reactive({ const layoutConfig = reactive({
...@@ -130,10 +130,10 @@ const containerStyle = computed(() => ({ ...@@ -130,10 +130,10 @@ const containerStyle = computed(() => ({
'--card-spacing': layoutConfig.cardSpacing, '--card-spacing': layoutConfig.cardSpacing,
})); }));
onMounted(() => { onMounted(() => {
nextTick (()=>{ nextTick(() => {
useAppStoreInstance.initavatarUrlFn() useAppStoreInstance.initavatarUrlFn()
}) })
}); });
// 监听路由变化 // 监听路由变化
watch(route, () => { watch(route, () => {
...@@ -171,7 +171,8 @@ watch(route, () => { ...@@ -171,7 +171,8 @@ watch(route, () => {
.left-top { .left-top {
display: flex; display: flex;
height: auto; /* 取消固定高度，改为内容自适应 */ height: auto;
/* 取消固定高度，改为内容自适应 */
} }
/* 通用卡片样式 */ /* 通用卡片样式 */
...@@ -186,7 +187,8 @@ watch(route, () => { ...@@ -186,7 +187,8 @@ watch(route, () => {
/* 用户信息卡片 */ /* 用户信息卡片 */
.region-overview { .region-overview {
flex: 1; flex: 1;
min-width: 200px; /* 确保最小宽度 */ min-width: 200px;
/* 确保最小宽度 */
} }
/* 用户信息布局 */ /* 用户信息布局 */
...@@ -208,9 +210,10 @@ watch(route, () => { ...@@ -208,9 +210,10 @@ watch(route, () => {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
min-width: 150px; /* 确保最小宽度 */ min-width: 150px;
background-color: rgba(100,149,237,0.30); /* 确保最小宽度 */
background-color: rgba(100, 149, 237, 0.30);
} }
.region-map:hover .menu_left-icon { .region-map:hover .menu_left-icon {
...@@ -218,12 +221,27 @@ watch(route, () => { ...@@ -218,12 +221,27 @@ watch(route, () => {
} }
@keyframes infiniteRotate { @keyframes infiniteRotate {
0% { transform: rotate(0deg); } 0% {
25% { transform: rotate(45deg); } transform: rotate(0deg);
50% { transform: rotate(0deg); } }
75% { transform: rotate(-45deg); }
100% { transform: rotate(0deg); } 25% {
transform: rotate(45deg);
}
50% {
transform: rotate(0deg);
}
75% {
transform: rotate(-45deg);
}
100% {
transform: rotate(0deg);
}
} }
.region-map span { .region-map span {
margin-left: 0.5rem; margin-left: 0.5rem;
font-weight: 500; font-weight: 500;
...@@ -233,7 +251,7 @@ watch(route, () => { ...@@ -233,7 +251,7 @@ watch(route, () => {
.stats-alerts { .stats-alerts {
display: flex; display: flex;
gap: 1rem; gap: 1rem;
border-radius: 8px; border-radius: 8px;
height: 79.5%; height: 79.5%;
} }
...@@ -243,15 +261,17 @@ watch(route, () => { ...@@ -243,15 +261,17 @@ watch(route, () => {
flex: 1; flex: 1;
border-radius: 10px; border-radius: 10px;
height: 100%; height: 100%;
box-shadow: 2px 0 rgba(0, 0, 0, 0.1); box-shadow: 2px 0 rgba(0, 0, 0, 0.1);
overflow: auto; overflow: auto;
} }
.card-show{
.card-show {
flex: 0.5; flex: 0.5;
} }
.card-tong-large { .card-tong-large {
flex: 2; /* 第三个方块宽度是其他两个的两倍 */ flex: 2;
/* 第三个方块宽度是其他两个的两倍 */
} }
/* 响应式适配 */ /* 响应式适配 */
...@@ -259,8 +279,9 @@ watch(route, () => { ...@@ -259,8 +279,9 @@ watch(route, () => {
.left-top { .left-top {
flex-direction: column; flex-direction: column;
} }
.region-overview, .region-map { .region-overview,
.region-map {
width: 100%; width: 100%;
flex: none; flex: none;
} }
...@@ -270,10 +291,11 @@ watch(route, () => { ...@@ -270,10 +291,11 @@ watch(route, () => {
.stats-alerts { .stats-alerts {
flex-direction: column; flex-direction: column;
} }
.card-tong-large { .card-tong-large {
flex: none; flex: none;
height: 150px; /* 在移动端保持高度 */ height: 150px;
/* 在移动端保持高度 */
} }
} }
</style> </style>
\ No newline at end of file
src/views/dashboard/workbench/index.vue
浏览文件 @ e79e30ac
...@@ -9,31 +9,34 @@ ...@@ -9,31 +9,34 @@
<!-- 区域信息概览 --> <!-- 区域信息概览 -->
<div class="info-card region-overview"> <div class="info-card region-overview">
<div class="info-grid"> <div class="info-grid">
<el-avatar shape="square" size="large" :src="useAppStoreInstance.userInfo.avatar?useAppStoreInstance.userInfo.avatar: useAppStoreInstance.showavatarUrl"/> <el-avatar shape="square" size="large"
:src="useAppStoreInstance.userInfo.avatar ? useAppStoreInstance.userInfo.avatar : useAppStoreInstance.showavatarUrl" />
<div class="info-item"> <div class="info-item">
<span>{{useAppStoreInstance.userInfo.name}}</span> <span>{{ useAppStoreInstance.userInfo.name }}</span>
<span>{{useAppStoreInstance.position[useAppStoreInstance.userInfo.role]}}</span> <span>{{ useAppStoreInstance.position[useAppStoreInstance.userInfo.role] }}</span>
</div> </div>
</div> </div>
</div> </div>
<!-- 待办事项卡片 --> <!-- 待办事项卡片 -->
<div class="info-card region-map"> <div class="info-card region-map">
<el-icon class="menu_left-icon" style="color: #6495ed;" size="20"><BellFilled /></el-icon> <el-icon class="menu_left-icon" style="color: #6495ed;" size="20">
<BellFilled />
</el-icon>
<span>12 待办事项</span> <span>12 待办事项</span>
</div> </div>
</div> </div>
<!-- 左侧下部分：统计区域 --> <!-- 左侧下部分：统计区域 -->
<div class="info-card stats-alerts"> <div class="info-card stats-alerts">
<div class="card-tong" > <div class="card-tong">
<currentFire :currentFireData="currentFireData"></currentFire> <currentFire :currentFireData="currentFireData"></currentFire>
</div> </div>
<div class="card-tong" > <div class="card-tong">
<uav :uavRepairData="uavRepairData"></uav> <uav :uavRepairData="uavRepairData"></uav>
</div> </div>
<div class="card-tong card-tong-large" > <div class="card-tong card-tong-large">
<meanList :menuItems="menuItems" ></meanList> <meanList :menuItems="menuItems"></meanList>
</div> </div>
</div> </div>
</div> </div>
...@@ -48,7 +51,7 @@ import currentFire from '../components/currentFire.vue'; ...@@ -48,7 +51,7 @@ import currentFire from '../components/currentFire.vue';
import uav from '../components/uav.vue'; import uav from '../components/uav.vue';
import meanList from '../components/menuList.vue'; import meanList from '../components/menuList.vue';
import useAppStore from '../../../store/module/app'; import useAppStore from '../../../store/module/app';
import { useRouter,useRoute } from 'vue-router'; import { useRouter, useRoute } from 'vue-router';
const useAppStoreInstance = useAppStore(); const useAppStoreInstance = useAppStore();
const curruserInfo = computed(() => (useAppStoreInstance.userInfo)); const curruserInfo = computed(() => (useAppStoreInstance.userInfo));
...@@ -65,81 +68,81 @@ const route = useRoute(); ...@@ -65,81 +68,81 @@ const route = useRoute();
const currentFireData = ref([ const currentFireData = ref([
// 火灾数据1 // 火灾数据1
{ {
location: "红色 四单元 七号搂 3楼", location: "红色 四单元 七号搂 3楼",
severity: "四级 (大规模)", severity: "四级 (大规模)",
status: "消防人员已到达现场", status: "消防人员已到达现场",
time: "2025年8月7日 11:14 发现", time: "2025年8月7日 11:14 发现",
fireLevel: 0, fireLevel: 0,
isXFOk: false isXFOk: false
}, },
// 火灾数据2 // 火灾数据2
{ {
location: "金色家园小区 三单元 七号搂 3楼", location: "金色家园小区 三单元 七号搂 3楼",
severity: "三级 (大规模)", severity: "三级 (大规模)",
status: "消防人员未到达现场", status: "消防人员未到达现场",
time: "2025年8月5日 11:14 发现", time: "2025年8月5日 11:14 发现",
fireLevel: 1, fireLevel: 1,
isXFOk: true isXFOk: true
}, },
// 火灾数据3 // 火灾数据3
{ {
location: "金色家园小区 四单元 七号搂 3楼", location: "金色家园小区 四单元 七号搂 3楼",
severity: "四级 (大规模)", severity: "四级 (大规模)",
status: "消防人员已到达现场", status: "消防人员已到达现场",
time: "2025年8月7日 11:14 发现", time: "2025年8月7日 11:14 发现",
fireLevel: 0, fireLevel: 0,
isXFOk: false isXFOk: false
}, },
{ {
location: "金色家园小区 三单元 七号搂 3楼", location: "金色家园小区 三单元 七号搂 3楼",
severity: "三级 (大规模)", severity: "三级 (大规模)",
status: "消防人员未到达现场", status: "消防人员未到达现场",
time: "2025年8月5日 11:14 发现", time: "2025年8月5日 11:14 发现",
fireLevel: 2, fireLevel: 2,
isXFOk: true isXFOk: true
}, },
{ {
location: "金色家园小区 四单元 七号搂 3楼", location: "金色家园小区 四单元 七号搂 3楼",
severity: "四级 (大规模)", severity: "四级 (大规模)",
status: "消防人员已到达现场", status: "消防人员已到达现场",
time: "2025年8月7日 11:14 发现", time: "2025年8月7日 11:14 发现",
fireLevel: 0, fireLevel: 0,
isXFOk: false isXFOk: false
}, },
{ {
location: "金色家园小区 三单元 七号搂 3楼", location: "金色家园小区 三单元 七号搂 3楼",
severity: "三级 (大规模)", severity: "三级 (大规模)",
status: "消防人员未到达现场", status: "消防人员未到达现场",
time: "2025年8月5日 11:14 发现", time: "2025年8月5日 11:14 发现",
fireLevel: 2, fireLevel: 2,
isXFOk: true isXFOk: true
} }
]); ]);
// 定义一个uavRepairData的ref，里面包含了多个无人机维修数据 // 定义一个uavRepairData的ref，里面包含了多个无人机维修数据
const uavRepairData = ref([ const uavRepairData = ref([
// 第一个无人机维修数据，已经维修 // 第一个无人机维修数据，已经维修
{isRepaid: true, uavRepairSetailData:[{label:"无人机编号",value: '无人机1号'}, {label:"上报时间",value: '2025年8月7日 11:14'},{label:"型号",value: '小型无人机'},{label:"维护类型",value: '更换电池'}]}, { isRepaid: true, uavRepairSetailData: [{ label: "无人机编号", value: '无人机1号' }, { label: "上报时间", value: '2025年8月7日 11:14' }, { label: "型号", value: '小型无人机' }, { label: "维护类型", value: '更换电池' }] },
// 第二个无人机维修数据，已经维修 // 第二个无人机维修数据，已经维修
{isRepaid: true, uavRepairSetailData:[{label:"无人机编号",value: '无人机1号'}, {label:"上报时间",value: '2025年8月7日 11:14'},{label:"型号",value: '小型无人机'},{label:"维护类型",value: '更换电池'}]}, { isRepaid: true, uavRepairSetailData: [{ label: "无人机编号", value: '无人机1号' }, { label: "上报时间", value: '2025年8月7日 11:14' }, { label: "型号", value: '小型无人机' }, { label: "维护类型", value: '更换电池' }] },
// 第三个无人机维修数据，未维修 // 第三个无人机维修数据，未维修
{isRepaid: false, uavRepairSetailData:[{label:"无人机编号",value: '无人机1号'}, {label:"上报时间",value: '2025年8月7日 11:14'},{label:"型号",value: '小型无人机'},{label:"维护类型",value: '更换电池'}]}, { isRepaid: false, uavRepairSetailData: [{ label: "无人机编号", value: '无人机1号' }, { label: "上报时间", value: '2025年8月7日 11:14' }, { label: "型号", value: '小型无人机' }, { label: "维护类型", value: '更换电池' }] },
// 第四个无人机维修数据，已经维修 // 第四个无人机维修数据，已经维修
{isRepaid: true, uavRepairSetailData:[{label:"无人机编号",value: '无人机1号'}, {label:"上报时间",value: '2025年8月7日 11:14'},{label:"型号",value: '小型无人机'},{label:"维护类型",value: '更换电池'}]}, { isRepaid: true, uavRepairSetailData: [{ label: "无人机编号", value: '无人机1号' }, { label: "上报时间", value: '2025年8月7日 11:14' }, { label: "型号", value: '小型无人机' }, { label: "维护类型", value: '更换电池' }] },
// 第五个无人机维修数据，未维修 // 第五个无人机维修数据，未维修
{isRepaid: false, uavRepairSetailData:[{label:"无人机编号",value: '无人机1号'}, {label:"上报时间",value: '2025年8月7日 11:14'},{label:"型号",value: '小型无人机'},{label:"维护类型",value: '更换电池'}]}, { isRepaid: false, uavRepairSetailData: [{ label: "无人机编号", value: '无人机1号' }, { label: "上报时间", value: '2025年8月7日 11:14' }, { label: "型号", value: '小型无人机' }, { label: "维护类型", value: '更换电池' }] },
// 第六个无人机维修数据，已经维修 // 第六个无人机维修数据，已经维修
{isRepaid: true, uavRepairSetailData:[{label:"无人机编号",value: '无人机1号'}, {label:"上报时间",value: '2025年8月7日 11:14'},{label:"型号",value: '小型无人机'},{label:"维护类型",value: '更换电池'}]}, { isRepaid: true, uavRepairSetailData: [{ label: "无人机编号", value: '无人机1号' }, { label: "上报时间", value: '2025年8月7日 11:14' }, { label: "型号", value: '小型无人机' }, { label: "维护类型", value: '更换电池' }] },
]) ])
const menuItems = ref([ const menuItems = ref([
{ name: '首页', icon: new URL('../../../static/image/huo.png', import.meta.url), path: '/analysisPage' }, { name: '首页', icon: new URL('../../../static/image/huo.png', import.meta.url), path: '/dashboard/analysis' },
{ name: '系统管理', icon: new URL('../../../static/image/huo.png', import.meta.url), path: '/usermanage' }, { name: '系统管理', icon: new URL('../../../static/image/huo.png', import.meta.url), path: '/systemmanage/staffManage' },
{ name: '建筑管理', icon: new URL('../../../static/image/huo.png', import.meta.url), path: '/areabuildmanage' }, { name: '建筑管理', icon: new URL('../../../static/image/huo.png', import.meta.url), path: '/areabuildmanage' },
{ name: '无人机管理', icon: new URL('../../../static/image/huo.png', import.meta.url), path: '/uavdispatch' }, { name: '无人机管理', icon: new URL('../../../static/image/huo.png', import.meta.url), path: '/uavshowdate' },
{ name: '火情管理', icon: new URL('../../../static/image/huo.png', import.meta.url), path: '/firesurveillance' }, { name: '火情管理', icon: new URL('../../../static/image/huo.png', import.meta.url), path: '/areafiremanage/firesurveillance' },
{ name: '数字孪生管理', icon: new URL('../../../static/image/huo.png', import.meta.url), path: '/digital-twin' }, { name: '数字孪生管理', icon: new URL('../../../static/image/huo.png', import.meta.url), path: '/digital-twin' },
{ name: '个人信息', icon: new URL('../../../static/image/huo.png', import.meta.url), path: '/usermanage' } { name: '个人信息', icon: new URL('../../../static/image/huo.png', import.meta.url), path: '/systemmanage/staffManage' }
]); ]);
// 响应式配置 // 响应式配置
const layoutConfig = reactive({ const layoutConfig = reactive({
...@@ -155,10 +158,10 @@ const containerStyle = computed(() => ({ ...@@ -155,10 +158,10 @@ const containerStyle = computed(() => ({
'--card-spacing': layoutConfig.cardSpacing, '--card-spacing': layoutConfig.cardSpacing,
})); }));
onMounted(() => { onMounted(() => {
nextTick (()=>{ nextTick(() => {
useAppStoreInstance.initavatarUrlFn() useAppStoreInstance.initavatarUrlFn()
}) })
}); });
// 监听路由变化 // 监听路由变化
watch(route, () => { watch(route, () => {
...@@ -196,7 +199,8 @@ watch(route, () => { ...@@ -196,7 +199,8 @@ watch(route, () => {
.left-top { .left-top {
display: flex; display: flex;
height: auto; /* 取消固定高度，改为内容自适应 */ height: auto;
/* 取消固定高度，改为内容自适应 */
} }
/* 通用卡片样式 */ /* 通用卡片样式 */
...@@ -211,7 +215,8 @@ watch(route, () => { ...@@ -211,7 +215,8 @@ watch(route, () => {
/* 用户信息卡片 */ /* 用户信息卡片 */
.region-overview { .region-overview {
flex: 1; flex: 1;
min-width: 200px; /* 确保最小宽度 */ min-width: 200px;
/* 确保最小宽度 */
} }
/* 用户信息布局 */ /* 用户信息布局 */
...@@ -233,9 +238,10 @@ watch(route, () => { ...@@ -233,9 +238,10 @@ watch(route, () => {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
min-width: 150px; /* 确保最小宽度 */ min-width: 150px;
background-color: rgba(100,149,237,0.30); /* 确保最小宽度 */
background-color: rgba(100, 149, 237, 0.30);
} }
.region-map:hover .menu_left-icon { .region-map:hover .menu_left-icon {
...@@ -243,12 +249,27 @@ watch(route, () => { ...@@ -243,12 +249,27 @@ watch(route, () => {
} }
@keyframes infiniteRotate { @keyframes infiniteRotate {
0% { transform: rotate(0deg); } 0% {
25% { transform: rotate(45deg); } transform: rotate(0deg);
50% { transform: rotate(0deg); } }
75% { transform: rotate(-45deg); }
100% { transform: rotate(0deg); } 25% {
transform: rotate(45deg);
}
50% {
transform: rotate(0deg);
}
75% {
transform: rotate(-45deg);
}
100% {
transform: rotate(0deg);
}
} }
.region-map span { .region-map span {
margin-left: 0.5rem; margin-left: 0.5rem;
font-weight: 500; font-weight: 500;
...@@ -258,7 +279,7 @@ watch(route, () => { ...@@ -258,7 +279,7 @@ watch(route, () => {
.stats-alerts { .stats-alerts {
display: flex; display: flex;
gap: 1rem; gap: 1rem;
border-radius: 8px; border-radius: 8px;
height: 68.5%; height: 68.5%;
} }
...@@ -268,12 +289,13 @@ watch(route, () => { ...@@ -268,12 +289,13 @@ watch(route, () => {
flex: 1; flex: 1;
border-radius: 10px; border-radius: 10px;
height: 100%; height: 100%;
box-shadow: 2px 0 rgba(0, 0, 0, 0.1); box-shadow: 2px 0 rgba(0, 0, 0, 0.1);
overflow: auto; overflow: auto;
} }
.card-tong-large { .card-tong-large {
flex: 2; /* 第三个方块宽度是其他两个的两倍 */ flex: 2;
/* 第三个方块宽度是其他两个的两倍 */
} }
/* 响应式适配 */ /* 响应式适配 */
...@@ -281,8 +303,9 @@ watch(route, () => { ...@@ -281,8 +303,9 @@ watch(route, () => {
.left-top { .left-top {
flex-direction: column; flex-direction: column;
} }
.region-overview, .region-map { .region-overview,
.region-map {
width: 100%; width: 100%;
flex: none; flex: none;
} }
...@@ -292,10 +315,11 @@ watch(route, () => { ...@@ -292,10 +315,11 @@ watch(route, () => {
.stats-alerts { .stats-alerts {
flex-direction: column; flex-direction: column;
} }
.card-tong-large { .card-tong-large {
flex: none; flex: none;
height: 150px; /* 在移动端保持高度 */ height: 150px;
/* 在移动端保持高度 */
} }
} }
</style> </style>
\ No newline at end of file
src/views/login/index.vue
浏览文件 @ e79e30ac
<template> <template>
<div class="login"> <div class="login">
<div class="login-container"> <div class="login-container">
<!-- 左侧标题区域 --> <!-- 左侧标题区域 -->
<div class="left-panel"> <div class="left-panel">
...@@ -11,53 +11,30 @@ ...@@ -11,53 +11,30 @@
<p class="sub-title">高效·智能·安全</p> <p class="sub-title">高效·智能·安全</p>
</div> --> </div> -->
</div> </div>
<!-- 右侧登录表单区域 --> <!-- 右侧登录表单区域 -->
<div class="right-panel"> <div class="right-panel">
<div class="login-card"> <div class="login-card">
<h2 class="welcome-text">欢迎回来</h2> <h2 class="welcome-text">欢迎回来</h2>
<p class="login-desc">请输入您的账号和密码登录</p> <p class="login-desc">请输入您的账号和密码登录</p>
<el-form <el-form ref="formref" :model="form" :rules="rules" class="login-form">
ref="formref"
:model="form"
:rules="rules"
class="login-form"
>
<el-form-item prop="phone"> <el-form-item prop="phone">
<el-input <el-input v-model="form.phone" placeholder="输入手机号码" prefix-icon="Phone" clearable class="custom-input"
v-model="form.phone" @keyup.enter="commit" />
placeholder="输入手机号码"
prefix-icon="Phone"
clearable
class="custom-input"
@keyup.enter="commit"
/>
</el-form-item> </el-form-item>
<el-form-item prop="password"> <el-form-item prop="password">
<el-input <el-input v-model="form.password" placeholder="输入密码" type="password" prefix-icon="Lock" clearable
v-model="form.password" class="custom-input" @keyup.enter="commit" />
placeholder="输入密码"
type="password"
prefix-icon="Lock"
clearable
class="custom-input"
@keyup.enter="commit"
/>
</el-form-item> </el-form-item>
<div class="form-options"> <div class="form-options">
<el-checkbox v-model="rememberMe" class="remember-checkbox">记住账号</el-checkbox> <el-checkbox v-model="rememberMe" class="remember-checkbox">记住账号</el-checkbox>
<el-button type="text" class="forgot-password">忘记密码?</el-button> <el-button type="text" class="forgot-password">忘记密码?</el-button>
</div> </div>
<el-button <el-button type="primary" class="login-button" @click="commit" :loading="loginLoading">
type="primary"
class="login-button"
@click="commit"
:loading="loginLoading"
>
登录 登录
</el-button> </el-button>
</el-form> </el-form>
...@@ -105,21 +82,21 @@ const commit = () => { ...@@ -105,21 +82,21 @@ const commit = () => {
formref.value.validate(valid => { formref.value.validate(valid => {
if (valid) { if (valid) {
loginLoading.value = true; loginLoading.value = true;
// 登录请求 // 登录请求
loginApi(form).then(res => { loginApi(form).then(res => {
loginLoading.value = false; loginLoading.value = false;
console.log(res, '测试'); console.log(res, '测试');
if (res.code === 200) { if (res.code === 200) {
setToken(res.data.token); setToken(res.data.token);
let { phone, id,name,avatarUrl ,role,status} = res.data.user; let { phone, id, name, avatarUrl, role, status } = res.data.user;
// console.log('phone, id,name,avatarUrl ,role',useAppStoreInstance.userInfo); // console.log('phone, id,name,avatarUrl ,role',useAppStoreInstance.userInfo);
localStorage.setItem('user', JSON.stringify({ phone, id,name,avatarUrl ,role,status})); localStorage.setItem('user', JSON.stringify({ phone, id, name, avatarUrl, role, status }));
useAppStoreInstance.userInfo = ( {phone, id,name,avatarUrl ,role,status}) useAppStoreInstance.userInfo = ({ phone, id, name, avatarUrl, role, status })
console.log('phone, id,name,avatarUrl ,role',useAppStoreInstance.userInfo); console.log('phone, id,name,avatarUrl ,role', useAppStoreInstance.userInfo);
localStorage.setItem('lastValidMenuPath','/home') localStorage.setItem('lastValidMenuPath', '/home')
// localStorage.setItem('saveMenuState',JSON.stringify({lastValidMenuPath:'/home',openMenus:[true,null,null,null,null]})) // localStorage.setItem('saveMenuState',JSON.stringify({lastValidMenuPath:'/home',openMenus:[true,null,null,null,null]}))
if (rememberMe.value) { if (rememberMe.value) {
localStorage.setItem('rememberedAccount', form.phone); localStorage.setItem('rememberedAccount', form.phone);
...@@ -127,7 +104,7 @@ const commit = () => { ...@@ -127,7 +104,7 @@ const commit = () => {
localStorage.removeItem('rememberedAccount'); localStorage.removeItem('rememberedAccount');
} }
localStorage.setItem('menu', 1); // 默认选中工作台 localStorage.setItem('menu', 1); // 默认选中工作台
router.replace({ path: '/analysisPage' }); router.replace({ path: '/dashboard/analysis' });
ElMessage.success('登录成功！'); ElMessage.success('登录成功！');
} else { } else {
ElMessage.error(res.message || '登录失败，请检查账号密码'); ElMessage.error(res.message || '登录失败，请检查账号密码');
...@@ -283,7 +260,7 @@ initFormData(); ...@@ -283,7 +260,7 @@ initFormData();
border-color: #e5e6eb; border-color: #e5e6eb;
box-shadow: none; box-shadow: none;
transition: all 0.2s ease; transition: all 0.2s ease;
&:focus-within { &:focus-within {
border-color: #165dff; border-color: #165dff;
box-shadow: 0 0 0 2px rgba(22, 93, 255, 0.1); box-shadow: 0 0 0 2px rgba(22, 93, 255, 0.1);
...@@ -295,18 +272,18 @@ initFormData(); ...@@ -295,18 +272,18 @@ initFormData();
.login-container { .login-container {
flex-direction: column; flex-direction: column;
} }
.left-panel { .left-panel {
height: 200px; height: 200px;
width: 100%; width: 100%;
background: linear-gradient(180deg, rgba(0, 47, 108, 0.9), rgba(0, 47, 108, 0.7)); background: linear-gradient(180deg, rgba(0, 47, 108, 0.9), rgba(0, 47, 108, 0.7));
padding: 0 2rem; padding: 0 2rem;
} }
.main-title { .main-title {
font-size: 1.8rem; font-size: 1.8rem;
} }
.right-panel { .right-panel {
width: 100%; width: 100%;
height: calc(100vh - 200px); height: calc(100vh - 200px);
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论