Skip to content

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

左侧和头部样式

上级 e79e30ac
显示空白字符变更
内嵌 并排
正在显示 包含 776 行增加 和 652 行删除
src/layout/index.vue
浏览文件 @ 8b7268d4
<template> <template>
<div class="allmain"> <div class="allmain">
<div class="tip"> <div class="tip">
<div class="tip0">
<img src="../static/image/topImg.png" style="width: 100%;height: 100%;" alt="">
</div>
<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" style="display: flex;">
<el-dropdown> <el-avatar shape="square" size="large" style="border-radius: 50%;width: 40px;height: 40px;"
<el-avatar shape="square" size="large"
:src="useAppStoreInstance.userInfo.avatar ? useAppStoreInstance.userInfo.avatar : useAppStoreInstance.showavatarUrl" /> :src="useAppStoreInstance.userInfo.avatar ? useAppStoreInstance.userInfo.avatar : useAppStoreInstance.showavatarUrl" />
<el-dropdown trigger="click">
<div style="display: flex;align-items: end;margin-left: 15px;margin-bottom: 10px;">
<div style="margin-right: 10px;color: #ffffff;">{{ userName }}</div>
<el-icon class="arrow-icon rotate">
<ArrowRight />
</el-icon>
</div>
<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>
...@@ -26,7 +35,6 @@ ...@@ -26,7 +35,6 @@
<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>
...@@ -54,16 +62,15 @@ ...@@ -54,16 +62,15 @@
</el-breadcrumb-item> </el-breadcrumb-item>
</el-breadcrumb> </el-breadcrumb>
</div> </div>
<!-- 标签页 --> <!-- 标签页 -->
<div class="tabs-container"> <div class="tabs-container">
<el-tabs v-model="activeTabKey" type="card" closable @tab-remove="removeTab" @tab-click="handleTabClick" <el-tabs v-model="activeTabKey" closable @tab-remove="removeTab" @tab-click="handleTabClick"
class="custom-tabs"> class="custom-tabs">
<el-tab-pane v-for="tab in tabs" :key="tab.key" :label="tab.label" :name="tab.key"> <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="rightMain">
<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>
...@@ -74,6 +81,7 @@ ...@@ -74,6 +81,7 @@
</div> </div>
</div> </div>
</div> </div>
</div>
</template> </template>
<script setup> <script setup>
...@@ -86,14 +94,13 @@ import { getToken, removeToken } from '../utils/auth'; ...@@ -86,14 +94,13 @@ import { getToken, removeToken } from '../utils/auth';
const router = useRouter(); const router = useRouter();
const route = useRoute(); const route = useRoute();
const useAppStoreInstance = useAppStore(); 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/yibiao.png', import.meta.url).href,
children: [ children: [
{ name: '分析页', id: 'analysis', path: '/dashboard/analysis' }, { name: '分析页', id: 'analysis', path: '/dashboard/analysis' },
{ name: '工作台', id: 'workbench', path: '/dashboard/workbench' }, { name: '工作台', id: 'workbench', path: '/dashboard/workbench' },
...@@ -103,7 +110,7 @@ const menuList = ref([ ...@@ -103,7 +110,7 @@ const menuList = ref([
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/xitong.png', import.meta.url).href,
children: [ children: [
{ name: '用户管理', id: 'user', path: '/systemmanage/staffManage' }, { name: '用户管理', id: 'user', path: '/systemmanage/staffManage' },
] ]
...@@ -112,7 +119,7 @@ const menuList = ref([ ...@@ -112,7 +119,7 @@ const menuList = ref([
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/jianzhu.png', import.meta.url).href,
children: [ children: [
{ name: '区域建筑管理', id: 'areaBuilding', path: '/areabuildmanage' }, { name: '区域建筑管理', id: 'areaBuilding', path: '/areabuildmanage' },
] ]
...@@ -121,7 +128,7 @@ const menuList = ref([ ...@@ -121,7 +128,7 @@ const menuList = ref([
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/wurenjitubiao.png', import.meta.url).href,
children: [ children: [
{ name: '无人机调度', id: 'droneDispatch', path: '/uavshowdate' }, { name: '无人机调度', id: 'droneDispatch', path: '/uavshowdate' },
{ name: '无人机监控', id: 'droneMonitor', path: '/uavshowdate/uavmanage' } { name: '无人机监控', id: 'droneMonitor', path: '/uavshowdate/uavmanage' }
...@@ -131,7 +138,7 @@ const menuList = ref([ ...@@ -131,7 +138,7 @@ const menuList = ref([
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/huoqing.png', import.meta.url).href,
children: [ children: [
{ name: '当前火情', id: 'fireHistory', path: '/areafiremanage/historyfire' }, { name: '当前火情', id: 'fireHistory', path: '/areafiremanage/historyfire' },
...@@ -140,7 +147,8 @@ const menuList = ref([ ...@@ -140,7 +147,8 @@ const menuList = ref([
] ]
}, },
]); ]);
//账号名称
const userName = ref()
const openMenus = ref([]); const openMenus = ref([]);
const breadcrumbs = ref([]); const breadcrumbs = ref([]);
const tabs = ref([]); const tabs = ref([]);
...@@ -365,8 +373,10 @@ onMounted(() => { ...@@ -365,8 +373,10 @@ onMounted(() => {
nextTick(() => { nextTick(() => {
useAppStoreInstance.initavatarUrlFn() useAppStoreInstance.initavatarUrlFn()
}) })
//回显登录人名称
if (localStorage.getItem('user') && JSON.parse(localStorage.getItem('user'))) {
userName.value = JSON.parse(localStorage.getItem('user'))?.name
}
// 初始化菜单展开状态 // 初始化菜单展开状态
menuList.value.forEach((_, index) => { menuList.value.forEach((_, index) => {
openMenus.value[index] = false; openMenus.value[index] = false;
...@@ -416,10 +426,10 @@ watch(route, () => { ...@@ -416,10 +426,10 @@ watch(route, () => {
margin: 0; margin: 0;
padding: 0; padding: 0;
overflow: hidden; overflow: hidden;
background: #051d39; background: #222222 !important;
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;
...@@ -428,9 +438,11 @@ watch(route, () => { ...@@ -428,9 +438,11 @@ watch(route, () => {
.tip { .tip {
width: 100%; width: 100%;
height: 9vh; height: 7vh;
min-height: 60px; min-height: 60px;
background: linear-gradient(90deg, #0a2a4a 0%, #0f3a64 100%); background: #2d2d34;
/* background: linear-gradient(0deg, #2D2D34, #2D2D34) radial-gradient(10.27% 35.42% at 13.07% 100%, rgba(132, 123, 255, 0.25) 0%, rgba(132, 123, 255, 0) 100%); */
display: flex; display: flex;
align-items: center; align-items: center;
position: relative; position: relative;
...@@ -439,6 +451,7 @@ watch(route, () => { ...@@ -439,6 +451,7 @@ watch(route, () => {
z-index: 10; z-index: 10;
box-shadow: 0 2px 15px rgba(0, 0, 0, 0.3); box-shadow: 0 2px 15px rgba(0, 0, 0, 0.3);
border-bottom: 1px solid rgba(6, 176, 225, 0.15); border-bottom: 1px solid rgba(6, 176, 225, 0.15);
margin-bottom: 3px;
} }
.tip::before { .tip::before {
...@@ -448,34 +461,53 @@ watch(route, () => { ...@@ -448,34 +461,53 @@ watch(route, () => {
left: 0; left: 0;
right: 0; right: 0;
height: 3px; height: 3px;
background: linear-gradient(90deg, rgba(6, 176, 225, 0) 0%, rgba(6, 176, 225, 0.8) 50%, rgba(6, 176, 225, 0) 100%); /* background: linear-gradient(90deg, rgba(6, 176, 225, 0) 0%, rgba(6, 176, 225, 0.8) 50%, rgba(6, 176, 225, 0) 100%); */
}
.tip0 {
width: 55px;
height: 55px;
margin-right: 10px;
} }
.tip1 { .tip1 {
font-weight: bold; font-weight: bold;
background: linear-gradient(to bottom, #FFFFFF 40%, #96CBFF 100%); /* background: linear-gradient(to bottom, #FFFFFF 40%, #96CBFF 100%); */
background-clip: text; /* background-clip: text; */
-webkit-background-clip: text; /* -webkit-background-clip: text; */
color: transparent; /* color: transparent; */
font-size: clamp(24px, 1.2vw, 32px); font-size: clamp(24px, 1.2vw, 32px);
white-space: nowrap; white-space: nowrap;
margin-right: 20px; margin-right: 20px;
text-shadow: 0 0 15px rgba(150, 203, 255, 0.3); height: 50px;
line-height: 50px;
padding: 0 20px;
/* text-shadow: 0 0 15px rgba(150, 203, 255, 0.3); */
letter-spacing: 0.5px; letter-spacing: 0.5px;
background-image: url('../static/image/topTitle.png');
background-size: contain;
background-repeat: no-repeat;
background-size: 100% 100%;
} }
.tip2 { .tip2 {
background: rgba(255, 255, 255, 0.1); /* background: rgba(255, 255, 255, 0.1); */
backdrop-filter: blur(5px); backdrop-filter: blur(5px);
padding: 5px 20px; padding: 20px 20px;
height: 36px; height: 40px;
line-height: 25px; line-height: 0px;
text-align: center;
font-size: clamp(16px, 1.5vw, 20px); font-size: clamp(16px, 1.5vw, 20px);
white-space: nowrap; white-space: nowrap;
color: #ffffff; color: #ffffff;
text-shadow: 0 0 8px rgba(6, 176, 225, 0.5); text-shadow: 0 0 8px rgba(6, 176, 225, 0.5);
border-radius: 18px; /* border-radius: 18px; */
box-shadow: 0 0 10px rgba(6, 176, 225, 0.1); /* box-shadow: 0 0 10px rgba(6, 176, 225, 0.1); */
background-image: url('../static/image/cityTitle.png');
background-size: contain;
background-repeat: no-repeat;
background-size: 100% 100%;
cursor: pointer;
} }
.avatar-container { .avatar-container {
...@@ -489,7 +521,7 @@ watch(route, () => { ...@@ -489,7 +521,7 @@ watch(route, () => {
.avatar-container:hover { .avatar-container:hover {
transform: scale(1.05); transform: scale(1.05);
box-shadow: 0 0 15px rgba(6, 176, 225, 0.3); /* box-shadow: 0 0 15px rgba(6, 176, 225, 0.3); */
} }
.main { .main {
...@@ -506,12 +538,12 @@ watch(route, () => { ...@@ -506,12 +538,12 @@ watch(route, () => {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
flex-shrink: 0; flex-shrink: 0;
/* background: linear-gradient(180deg, #0a2a4a 0%, #0d3053 100%); */ background: #2d2d34;
box-shadow: 2px 0 15px rgba(0, 0, 0, 0.3); box-shadow: 2px 0 15px rgba(0, 0, 0, 0.3);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
/* z-index: 5; */ /* z-index: 5; */
border-right: 1px solid rgba(6, 176, 225, 0.1); border-right: 1px solid rgba(6, 176, 225, 0.1);
color: black; color: #ffffff;
} }
.left1 { .left1 {
...@@ -537,8 +569,9 @@ watch(route, () => { ...@@ -537,8 +569,9 @@ watch(route, () => {
} }
.menu-item-container { .menu-item-container {
margin-bottom: 8px; margin-bottom: 2px;
padding: 0 5px; /* padding: 0 5px; */
color: #ffffff;
} }
.menu, .menu,
...@@ -546,7 +579,8 @@ watch(route, () => { ...@@ -546,7 +579,8 @@ watch(route, () => {
height: 56px; height: 56px;
display: flex; display: flex;
align-items: center; align-items: center;
padding: 0 20px; /* padding: 0 20px; */
color: #ffffff;
cursor: pointer; cursor: pointer;
font-size: clamp(14px, 1.2vw, 16px); font-size: clamp(14px, 1.2vw, 16px);
white-space: nowrap; white-space: nowrap;
...@@ -554,27 +588,40 @@ watch(route, () => { ...@@ -554,27 +588,40 @@ watch(route, () => {
text-overflow: ellipsis; text-overflow: ellipsis;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
position: relative; position: relative;
border-radius: 12px; /* border-radius: 12px; */
margin: 0 5px; /* margin: 0 5px; */
border-bottom: 1px solid #424248;
} }
.menu_left-icon img { .menu_left-icon img {
width: 100%; width: 100%;
height: 100%; height: 100%;
object-fit: cover; object-fit: cover;
padding-left: 10%;
} }
.menu:hover, .menu:hover,
.submenu-title:hover { .submenu-title:hover {
background: rgba(5, 113, 196, 0.2); background: #3a3852;
transform: translateX(3px); transform: translateX(3px);
} }
.menu.active, .menu.active,
.submenu-title.active { .submenu-title.active {
background: linear-gradient(90deg, rgba(6, 176, 225, 0.25) 0%, rgba(5, 113, 196, 0.4) 100%); background: #3a3852;
box-shadow: 0 0 15px rgba(6, 176, 225, 0.25), inset 0 0 10px rgba(6, 176, 225, 0.1); /* 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); */
}
.submenu-title.active {
background-image: url('../static/image/MaskGroup.png');
background-size: 50% 100%;
/* 或者使用 contain */
background-position: left;
/* 图片居中 */
background-repeat: no-repeat;
/* 防止图片重复 */
} }
.menu.active::before, .menu.active::before,
...@@ -585,9 +632,9 @@ watch(route, () => { ...@@ -585,9 +632,9 @@ watch(route, () => {
top: 15%; top: 15%;
height: 70%; height: 70%;
width: 4px; width: 4px;
background: linear-gradient(180deg, #06b0e1 0%, #0571c4 100%); /* background: linear-gradient(180deg, #06b0e1 0%, #0571c4 100%); */
border-radius: 0 6px 6px 0; /* border-radius: 0 6px 6px 0; */
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, .menu el-icon,
...@@ -600,12 +647,17 @@ watch(route, () => { ...@@ -600,12 +647,17 @@ watch(route, () => {
.menu .menu-text, .menu .menu-text,
.submenu-title .menu-text { .submenu-title .menu-text {
color: black; color: #ffffff;
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;
position: relative; position: relative;
z-index: 2; z-index: 2;
padding-left: 10%; padding-left: 5%;
}
.submenu-title {
padding-left: 7%;
} }
.menu.active .menu-text, .menu.active .menu-text,
...@@ -623,16 +675,17 @@ watch(route, () => { ...@@ -623,16 +675,17 @@ watch(route, () => {
.arrow-icon { .arrow-icon {
font-size: 18px; font-size: 18px;
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
color: black; color: #ffffff;
} }
.rotate { .rotate {
transform: rotate(90deg); transform: rotate(90deg);
color: #06b0e1; /* color: #06b0e1; */
color: #ffffff;
} }
.submenu-list { .submenu-list {
background: #f1f0f0; background: #6c62f5;
backdrop-filter: blur(5px); backdrop-filter: blur(5px);
/* padding: 5px 0; */ /* padding: 5px 0; */
...@@ -646,26 +699,28 @@ watch(route, () => { ...@@ -646,26 +699,28 @@ watch(route, () => {
height: 42px; height: 42px;
line-height: 42px; line-height: 42px;
padding-left: 40px; padding-left: 40px;
color: #000000; color: #ffffff;
background-color: #2d2d34;
cursor: pointer; cursor: pointer;
font-size: 14px; font-size: 14px;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
position: relative; position: relative;
border-radius: 8px; /* border-radius: 8px; */
margin: 0 5px; /* margin: 0 5px; */
/* border-bottom: 1px solid #424248; */
} }
.submenu-item:hover { .submenu-item:hover {
background: rgba(5, 113, 196, 0.2); background: #6c62f5;
color: #e6f7ff; color: #e6f7ff;
padding-left: 45px; /* padding-left: 45px; */
transform: translateX(3px); transform: translateX(3px);
} }
.submenu-item.active { .submenu-item.active {
color: #06b0e1; color: #ffffff;
font-weight: 500; font-weight: 500;
background: linear-gradient(90deg, rgba(6, 176, 225, 0.1) 0%, rgba(6, 176, 225, 0.05) 100%); background: #6c62f5;
} }
.submenu-item.active::before { .submenu-item.active::before {
...@@ -707,20 +762,25 @@ watch(route, () => { ...@@ -707,20 +762,25 @@ watch(route, () => {
min-width: 0; min-width: 0;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
background: #ffffff; background: #222222;
overflow: hidden; overflow: hidden;
} }
.rightMain {
padding: 20px;
}
.breadcrumb-container { .breadcrumb-container {
color: #000000; color: #ffffff;
/* padding-left: 15px; */ /* padding-left: 15px; */
padding: 10px; padding: 10px;
background: #fff; background: linear-gradient(360deg, rgba(72, 71, 82, 0.25) 0%, rgba(72, 71, 82, 0) 65%);
border-bottom: 1px solid rgb(180, 178, 178); /* border-bottom: 1px solid rgb(180, 178, 178); */
} }
.el-breadcrumb { .el-breadcrumb {
color: #000000; color: #ffffff;
} }
.el-breadcrumb__item { .el-breadcrumb__item {
...@@ -730,8 +790,12 @@ watch(route, () => { ...@@ -730,8 +790,12 @@ watch(route, () => {
border-radius: 4px; border-radius: 4px;
} }
:deep() .el-breadcrumb__item .el-breadcrumb__inner {
color: #ffffff;
}
.el-breadcrumb__item:hover:not(.el-breadcrumb__item:last-child) { .el-breadcrumb__item:hover:not(.el-breadcrumb__item:last-child) {
color: #06b0e1; color: #06b0e1 !important;
background: rgba(6, 176, 225, 0.1); background: rgba(6, 176, 225, 0.1);
text-shadow: 0 0 5px rgba(6, 176, 225, 0.5); text-shadow: 0 0 5px rgba(6, 176, 225, 0.5);
} }
...@@ -742,6 +806,12 @@ watch(route, () => { ...@@ -742,6 +806,12 @@ watch(route, () => {
text-shadow: 0 0 5px rgba(6, 176, 225, 0.3); text-shadow: 0 0 5px rgba(6, 176, 225, 0.3);
} }
:deep() .el-breadcrumb__item:last-child .el-breadcrumb__inner:hover {
color: #06b0e1 !important;
font-weight: 500;
text-shadow: 0 0 5px rgba(6, 176, 225, 0.3);
}
.el-breadcrumb__separator { .el-breadcrumb__separator {
color: rgba(158, 200, 230, 0.5); color: rgba(158, 200, 230, 0.5);
margin: 0 10px; margin: 0 10px;
...@@ -749,24 +819,34 @@ watch(route, () => { ...@@ -749,24 +819,34 @@ watch(route, () => {
/* 标签页样式 */ /* 标签页样式 */
.tabs-container { .tabs-container {
background-color: #ffffff; /* background-color: #ffffff; */
/* background: linear-gradient(360deg, rgba(72, 71, 82, 0.25) 0%, rgba(72, 71, 82, 0) 65%); */
background-color: #1e1e1e;
padding: 2px 5px;
}
padding: 8px 25px; :deep() .el-tabs .el-tabs__header {
margin: 0 0 5px !important;
} }
.custom-tabs .el-tabs__nav-scroll { :deep() .tabs-container .el-tabs__nav-wrap::after {
/* padding-bottom: 5px; */ /* padding-bottom: 5px; */
background-color: #313136;
} }
.el-tabs__item { :deep() .el-tabs__item {
height: 40px; height: 40px;
line-height: 40px; line-height: 40px;
color: #b3cfe5; color: #ffffff;
border-radius: 12px 12px 0 0; border-radius: 12px 12px 0 0;
margin-right: 8px; /* margin-right: 10px; */
/* border-bottom: none !important; */ /* border-bottom: none !important; */
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
padding: 0 18px; padding: 0 10px;
}
:deep() .el-tabs__item.is-active {
color: #3f99f8 !important;
} }
.el-tabs__item:hover { .el-tabs__item:hover {
...@@ -804,8 +884,6 @@ watch(route, () => { ...@@ -804,8 +884,6 @@ watch(route, () => {
.right-content { .right-content {
overflow: hidden; overflow: hidden;
height: 100%; height: 100%;
} }
...@@ -829,6 +907,7 @@ watch(route, () => { ...@@ -829,6 +907,7 @@ watch(route, () => {
.menu-text, .menu-text,
.arrow-icon { .arrow-icon {
display: none; display: none;
} }
......
src/views/areabuildmanage/components/showdetaildate.vue
浏览文件 @ 8b7268d4
...@@ -240,7 +240,7 @@ watch(route, () => { ...@@ -240,7 +240,7 @@ watch(route, () => {
.main-content { .main-content {
display: flex; display: flex;
gap: var(--card-spacing); gap: var(--card-spacing);
padding: 0.4rem; padding: 0.4rem 0;
height: 100vh; height: 100vh;
box-sizing: border-box; box-sizing: border-box;
} }
......
src/views/areabuildmanage/index.vue
浏览文件 @ 8b7268d4
...@@ -230,7 +230,7 @@ const containerStyle = computed(() => ({ ...@@ -230,7 +230,7 @@ const containerStyle = computed(() => ({
.main-content { .main-content {
display: flex; display: flex;
gap: var(--card-spacing); gap: var(--card-spacing);
padding: 0.4rem; padding: 0.4rem 0;
height: 100vh; height: 100vh;
box-sizing: border-box; box-sizing: border-box;
} }
......
src/views/areabuildmanage/onefloor/index.vue
浏览文件 @ 8b7268d4
...@@ -232,7 +232,7 @@ const containerStyle = computed(() => ({ ...@@ -232,7 +232,7 @@ const containerStyle = computed(() => ({
.main-content { .main-content {
display: flex; display: flex;
gap: var(--card-spacing); gap: var(--card-spacing);
padding: 0.4rem; padding: 0.4rem 0;
height: 100vh; height: 100vh;
box-sizing: border-box; box-sizing: border-box;
} }
......
src/views/areafiremanage/firerecord/index.vue
浏览文件 @ 8b7268d4
...@@ -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>
...@@ -19,7 +19,8 @@ ...@@ -19,7 +19,8 @@
<el-button type="primary" @click="archiveHandleAddInfoFn">归档</el-button> <el-button type="primary" @click="archiveHandleAddInfoFn">归档</el-button>
</div> </div>
<div class="card-table"> <div class="card-table">
<tableshow :tableShowData="tableShowData" @archiveInfoDateBackcallFn="archiveInfoDateBackcallFn"></tableshow> <tableshow :tableShowData="tableShowData" @archiveInfoDateBackcallFn="archiveInfoDateBackcallFn">
</tableshow>
</div> </div>
</div> </div>
</div> </div>
...@@ -40,12 +41,12 @@ import tableshow from './components/tableshow.vue'; ...@@ -40,12 +41,12 @@ import tableshow from './components/tableshow.vue';
const searchShowData = ref([ const searchShowData = ref([
{ label: '火情描述', placeholder: "请输入", type: 'input', content: '',isShow: true }, { label: '火情描述', placeholder: "请输入", type: 'input', content: '', isShow: true },
{ label: '上报人', placeholder: "请输入", type: 'input', content: '' ,isShow: true}, { label: '上报人', placeholder: "请输入", type: 'input', content: '', isShow: true },
{ label: '上报时间', placeholder: "请输入", type: 'datepicker', content: '',isShow: true }, { label: '上报时间', placeholder: "请输入", type: 'datepicker', content: '', isShow: true },
{ label: '建筑名称', placeholder: "请选择", type: 'select', content: '',isShow: true, options: [{label: '启用', value: '启用'}, {label: '禁用', value: '禁用'}] }, { label: '建筑名称', placeholder: "请选择", type: 'select', content: '', isShow: true, options: [{ label: '启用', value: '启用' }, { label: '禁用', value: '禁用' }] },
{ label: '建筑楼层', placeholder: "请选择", type: 'select', content: '',isShow: true, options: [{label: '管理员', value: '管理员'}, {label: '巡查员', value: '巡查员'}]}, { label: '建筑楼层', placeholder: "请选择", type: 'select', content: '', isShow: true, options: [{ label: '管理员', value: '管理员' }, { label: '巡查员', value: '巡查员' }] },
{ label: '火情等级', placeholder: "请选择", type: 'select', content: '',isShow: true, options: [{label: '一级火情', value: '1'}, {label: '二级火情', value: '2'}, {label: '三级火情', value: '3'}]}, { label: '火情等级', placeholder: "请选择", type: 'select', content: '', isShow: true, options: [{ label: '一级火情', value: '1' }, { label: '二级火情', value: '2' }, { label: '三级火情', value: '3' }] },
]); ]);
const layoutConfig = reactive({ const layoutConfig = reactive({
...@@ -63,13 +64,13 @@ const resetPasswordData = ref({}); ...@@ -63,13 +64,13 @@ const resetPasswordData = ref({});
const showuserinfodata = ref({}); const showuserinfodata = ref({});
const tableShowData = ref([ const tableShowData = ref([
{id: 1, name: '背景', floorcount: 18, reporter: '张三', updateTime: '12345678901', discription: '打个人脸',fireLevel: '1'}, { id: 1, name: '背景', floorcount: 18, reporter: '张三', updateTime: '12345678901', discription: '打个人脸', fireLevel: '1' },
{id: 2, name: '背景', floorcount: 18, reporter: '张三', updateTime: '12345678901', discription: '说实在的',fireLevel: '1'}, { id: 2, name: '背景', floorcount: 18, reporter: '张三', updateTime: '12345678901', discription: '说实在的', fireLevel: '1' },
{id: 3, name: '背景', floorcount: 18, reporter: '张三', updateTime: '12345678901', discription: '打个人脸',fireLevel: '1'}, { id: 3, name: '背景', floorcount: 18, reporter: '张三', updateTime: '12345678901', discription: '打个人脸', fireLevel: '1' },
{id: 4, name: '背景', floorcount: 18, reporter: '张三', updateTime: '12345678901', discription: '说实在的',fireLevel: '1'}, { id: 4, name: '背景', floorcount: 18, reporter: '张三', updateTime: '12345678901', discription: '说实在的', fireLevel: '1' },
]); ]);
const archiveInfoDateBackcallFn = (row) => { const archiveInfoDateBackcallFn = (row) => {
console.log("archiveInfoFn需要归档的数据",row) console.log("archiveInfoFn需要归档的数据", row)
}; };
const archiveHandleAddInfoFn = (row) => { const archiveHandleAddInfoFn = (row) => {
// archiveInfoDate.value = null // archiveInfoDate.value = null
...@@ -112,7 +113,7 @@ const deleteData = (data) => { ...@@ -112,7 +113,7 @@ const deleteData = (data) => {
} }
).then(() => { ).then(() => {
try { try {
const res = staffRemoveInfoApi({id: data.id}); const res = staffRemoveInfoApi({ id: data.id });
if (res.code === 200) { if (res.code === 200) {
ElMessage({ type: 'success', message: '已删除' }); ElMessage({ type: 'success', message: '已删除' });
tableDataRefresh(); tableDataRefresh();
...@@ -181,7 +182,7 @@ const containerStyle = computed(() => ({ ...@@ -181,7 +182,7 @@ const containerStyle = computed(() => ({
.main-content { .main-content {
display: flex; display: flex;
gap: var(--card-spacing); gap: var(--card-spacing);
padding: 0.4rem; padding: 0.4rem 0;
height: 100vh; height: 100vh;
box-sizing: border-box; box-sizing: border-box;
} }
......
src/views/areafiremanage/firesurveillance/index.vue
浏览文件 @ 8b7268d4
...@@ -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>
...@@ -16,22 +16,19 @@ ...@@ -16,22 +16,19 @@
<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" @cliick="archiveInfoFn" >归档</el-button> <el-button class="operation-button" type="primary" @cliick="archiveInfoFn">归档</el-button>
<el-button class="operation-button" type="primary" @cliick="archiveInfoFn1" >归档1</el-button> <el-button class="operation-button" type="primary" @cliick="archiveInfoFn1">归档1</el-button>
</div> </div>
</div> </div>
<div class="card-table"> <div class="card-table">
<tableshow :tableShowData="tableShowData" @archiveInfoDateBackcallFn="archiveInfoDateBackcallFn"></tableshow> <tableshow :tableShowData="tableShowData" @archiveInfoDateBackcallFn="archiveInfoDateBackcallFn">
</tableshow>
</div> </div>
</div> </div>
</div> </div>
</main> </main>
<!-- 归档窗口 --> <!-- 归档窗口 -->
<el-drawer <el-drawer v-model="archiveInfoDrawer" direction="rtl" :before-close="handleClose">
v-model="archiveInfoDrawer"
direction="rtl"
:before-close="handleClose"
>
asdada asdada
</el-drawer> </el-drawer>
...@@ -48,11 +45,11 @@ import tableshow from './components/tableshow.vue'; ...@@ -48,11 +45,11 @@ import tableshow from './components/tableshow.vue';
const searchShowData = ref([ const searchShowData = ref([
{ label: '火情描述', placeholder: "请输入", type: 'input', content: '' ,isShow: true}, { label: '火情描述', placeholder: "请输入", type: 'input', content: '', isShow: true },
{ label: '建筑编号', placeholder: "请选择", type: 'autocomplete',cliick:'', content: '',isShow: true, options: [{label: '启用', value: '启用'}, {label: '禁用', value: '禁用'}] }, { label: '建筑编号', placeholder: "请选择", type: 'autocomplete', cliick: '', content: '', isShow: true, options: [{ label: '启用', value: '启用' }, { label: '禁用', value: '禁用' }] },
{ label: '归档编号', placeholder: "请选择", type: 'autocomplete', content: '',isShow: true, options: [{label: '管理员', value: '管理员'}, {label: '巡查员', value: '巡查员'}]}, { label: '归档编号', placeholder: "请选择", type: 'autocomplete', content: '', isShow: true, options: [{ label: '管理员', value: '管理员' }, { label: '巡查员', value: '巡查员' }] },
{ label: '归档时间', placeholder: "请选择", type: 'datepicker', content: '',isShow: true, options: [{label: '管理员', value: '管理员'}, {label: '巡查员', value: '巡查员'}]}, { label: '归档时间', placeholder: "请选择", type: 'datepicker', content: '', isShow: true, options: [{ label: '管理员', value: '管理员' }, { label: '巡查员', value: '巡查员' }] },
]); ]);
const layoutConfig = reactive({ const layoutConfig = reactive({
...@@ -70,10 +67,10 @@ const resetPasswordData = ref({}); ...@@ -70,10 +67,10 @@ const resetPasswordData = ref({});
const showuserinfodata = ref({}); const showuserinfodata = ref({});
const tableShowData = ref([ const tableShowData = ref([
{id: 1, name: '背景', floorcount: 18, reporter: '张三', updateTime: '12345678901', discription: '打个人脸',fireLevel: '1'}, { id: 1, name: '背景', floorcount: 18, reporter: '张三', updateTime: '12345678901', discription: '打个人脸', fireLevel: '1' },
{id: 2, name: '背景', floorcount: 18, reporter: '张三', updateTime: '12345678901', discription: '说实在的',fireLevel: '1'}, { id: 2, name: '背景', floorcount: 18, reporter: '张三', updateTime: '12345678901', discription: '说实在的', fireLevel: '1' },
{id: 3, name: '背景', floorcount: 18, reporter: '张三', updateTime: '12345678901', discription: '打个人脸',fireLevel: '1'}, { id: 3, name: '背景', floorcount: 18, reporter: '张三', updateTime: '12345678901', discription: '打个人脸', fireLevel: '1' },
{id: 4, name: '背景', floorcount: 18, reporter: '张三', updateTime: '12345678901', discription: '说实在的',fireLevel: '1'}, { id: 4, name: '背景', floorcount: 18, reporter: '张三', updateTime: '12345678901', discription: '说实在的', fireLevel: '1' },
]); ]);
...@@ -81,14 +78,14 @@ const archiveInfoDate = ref(null) ...@@ -81,14 +78,14 @@ const archiveInfoDate = ref(null)
const archiveInfoDateBackcallFn = (row) => { const archiveInfoDateBackcallFn = (row) => {
archiveInfoDate.value = null archiveInfoDate.value = null
archiveInfoDate.value = row archiveInfoDate.value = row
console.log('archiveInfoFn需要归档的数据',archiveInfoDate.value) console.log('archiveInfoFn需要归档的数据', archiveInfoDate.value)
}; };
const archiveInfoDrawer = ref(false) const archiveInfoDrawer = ref(false)
const archiveInfoFn = () => { const archiveInfoFn = () => {
if ( archiveInfoDate ===undefined ||archiveInfoDate.value===null || archiveInfoDate.value.length<=0 ) { if (archiveInfoDate === undefined || archiveInfoDate.value === null || archiveInfoDate.value.length <= 0) {
ElMessage.warning("没有勾选数据") ElMessage.warning("没有勾选数据")
}else { } else {
console.log('archiveInfoFn归档的数据',archiveInfoDate.value) console.log('archiveInfoFn归档的数据', archiveInfoDate.value)
// archiveInfoDrawer.value = true // archiveInfoDrawer.value = true
fireInfoDataImport.value = null fireInfoDataImport.value = null
} }
...@@ -126,7 +123,7 @@ const deleteData = (data) => { ...@@ -126,7 +123,7 @@ const deleteData = (data) => {
} }
).then(() => { ).then(() => {
try { try {
const res = staffRemoveInfoApi({id: data.id}); const res = staffRemoveInfoApi({ id: data.id });
if (res.code === 200) { if (res.code === 200) {
ElMessage({ type: 'success', message: '已删除' }); ElMessage({ type: 'success', message: '已删除' });
tableDataRefresh(); tableDataRefresh();
...@@ -195,7 +192,7 @@ const containerStyle = computed(() => ({ ...@@ -195,7 +192,7 @@ const containerStyle = computed(() => ({
.main-content { .main-content {
display: flex; display: flex;
gap: var(--card-spacing); gap: var(--card-spacing);
padding: 0.4rem; padding: 0.4rem 0;
height: 100vh; height: 100vh;
box-sizing: border-box; box-sizing: border-box;
} }
......
src/views/areafiremanage/historyfire/components/floordetail.vue
浏览文件 @ 8b7268d4
...@@ -296,7 +296,7 @@ const containerStyle = computed(() => ({ ...@@ -296,7 +296,7 @@ const containerStyle = computed(() => ({
.main-content { .main-content {
display: flex; display: flex;
gap: var(--card-spacing); gap: var(--card-spacing);
padding: 0.4rem; padding: 0.4rem 0;
height: 100vh; height: 100vh;
box-sizing: border-box; box-sizing: border-box;
} }
......
src/views/areafiremanage/historyfire/index.vue
浏览文件 @ 8b7268d4
...@@ -154,7 +154,7 @@ watch(route, () => { ...@@ -154,7 +154,7 @@ watch(route, () => {
.main-content { .main-content {
display: flex; display: flex;
gap: var(--card-spacing); gap: var(--card-spacing);
padding: 0.4rem; padding: 0.4rem 0;
height: 100vh; height: 100vh;
box-sizing: border-box; box-sizing: border-box;
} }
......
src/views/dashboard/analysis/index.vue
浏览文件 @ 8b7268d4
...@@ -14,7 +14,8 @@ ...@@ -14,7 +14,8 @@
<div class="info-grid"> <div class="info-grid">
<div class="info-item" v-for="(item, index) in OverviewRegionalInformation" :key="index"> <div class="info-item" v-for="(item, index) in OverviewRegionalInformation" :key="index">
<span class="label">{{ item.label }}:</span> <span class="label">{{ item.label }}:</span>
<span class="value" :style="{color: item.label === '当前可用无人机数量' ? 'green' : 'black'}">{{ item.value }}</span> <span class="value" :style="{ color: item.label === '当前可用无人机数量' ? 'green' : 'black' }">{{ item.value
}}</span>
</div> </div>
</div> </div>
</div> </div>
...@@ -33,8 +34,10 @@ ...@@ -33,8 +34,10 @@
<div class="tab-content history-stats"> <div class="tab-content history-stats">
<div class="time-filter"> <div class="time-filter">
<el-select v-model="historyFireSelectTime" placeholder="选择数据查看范围" style="width: 240px" class="filter-select" @change="historyFireSelectTimeFn"> <el-select v-model="historyFireSelectTime" placeholder="选择数据查看范围" style="width: 240px"
<el-option v-for="item in historyFireTimeData" :key="item.value" :label="item.label" :value="item.value" /> class="filter-select" @change="historyFireSelectTimeFn">
<el-option v-for="item in historyFireTimeData" :key="item.value" :label="item.label"
:value="item.value" />
</el-select> </el-select>
</div> </div>
<div class="chart-container"> <div class="chart-container">
...@@ -49,18 +52,23 @@ ...@@ -49,18 +52,23 @@
<div class="info-card current-situation"> <div class="info-card current-situation">
<div class="card-header "> <div class="card-header ">
<h2> <img class="icon-fire-red" src="../../static/image/huo.png" alt="">当前火情</h2> <h2> <img class="icon-fire-red" src="../../static/image/huo.png" alt="">当前火情</h2>
<span ><el-button type="warning" circle style="color: red;">紧急</el-button></span> <span><el-button type="warning" circle style="color: red;">紧急</el-button></span>
</div> </div>
<div class="situation-list" > <div class="situation-list">
<!-- 火情项目 --> <!-- 火情项目 -->
<div class="situation-item " :class="index === 0 ? 'emergency' : ''" v-for="(item, index) in currentFireData" :key="index"> <div class="situation-item " :class="index === 0 ? 'emergency' : ''"
v-for="(item, index) in currentFireData" :key="index">
<div class="situation-content" >
<p ><img class="icon-fire-red1" src="../../static/image/huo.png" alt=""> <span class="location">{{item.location}}</span></p> <div class="situation-content">
<p> <img class="icon-fire-red1" src="../../static/image/huo.png" alt=""> <span class="severity" >{{ item.severity}}</span></p> <p><img class="icon-fire-red1" src="../../static/image/huo.png" alt=""> <span
<p> <img class="icon-fire-red1" src="../../static/image/huo.png" alt=""> <span :class="item.isXFOk ? 'isXFOk' : 'isXFNotOk'">{{item.status}}</span></p> class="location">{{ item.location }}</span></p>
<p> <img class="icon-fire-red1" src="../../static/image/huo.png" alt=""> <span class="time">{{ item.time}}</span></p> <p> <img class="icon-fire-red1" src="../../static/image/huo.png" alt=""> <span class="severity">{{
item.severity}}</span></p>
<p> <img class="icon-fire-red1" src="../../static/image/huo.png" alt=""> <span
:class="item.isXFOk ? 'isXFOk' : 'isXFNotOk'">{{ item.status }}</span></p>
<p> <img class="icon-fire-red1" src="../../static/image/huo.png" alt=""> <span class="time">{{
item.time}}</span></p>
</div> </div>
</div> </div>
</div> </div>
...@@ -69,17 +77,22 @@ ...@@ -69,17 +77,22 @@
<div class="info-card current-situation1"> <div class="info-card current-situation1">
<div class="card-header"> <div class="card-header">
<h2>传感器报警</h2> <h2>传感器报警</h2>
<span ><el-button type="warning" circle >紧急</el-button></span> <span><el-button type="warning" circle>紧急</el-button></span>
</div> </div>
<div class="situation-list"> <div class="situation-list">
<!-- 火情项目 --> <!-- 火情项目 -->
<div class="situation-item " :class="sensorFireBorderColor[item.fireLevel]" v-for="(item, index) in currentFireData" :key="index"> <div class="situation-item " :class="sensorFireBorderColor[item.fireLevel]"
v-for="(item, index) in currentFireData" :key="index">
<div class="situation-content" >
<p ><img class="icon-fire-red1" src="../../static/image/huo.png" alt=""> <span class="location">{{item.location}}</span></p> <div class="situation-content">
<p> <img class="icon-fire-red1" src="../../static/image/huo.png" alt=""> <span class="severity">{{ item.severity}}</span></p> <p><img class="icon-fire-red1" src="../../static/image/huo.png" alt=""> <span
<p> <img class="icon-fire-red1" src="../../static/image/huo.png" alt=""> <span class="status">{{item.status}}</span></p> class="location">{{ item.location }}</span></p>
<p> <img class="icon-fire-red1" src="../../static/image/huo.png" alt=""> <span class="time">{{ item.time}}</span></p> <p> <img class="icon-fire-red1" src="../../static/image/huo.png" alt=""> <span class="severity">{{
item.severity}}</span></p>
<p> <img class="icon-fire-red1" src="../../static/image/huo.png" alt=""> <span
class="status">{{ item.status }}</span></p>
<p> <img class="icon-fire-red1" src="../../static/image/huo.png" alt=""> <span class="time">{{
item.time}}</span></p>
</div> </div>
</div> </div>
</div> </div>
...@@ -91,7 +104,7 @@ ...@@ -91,7 +104,7 @@
<script setup> <script setup>
import * as echarts from 'echarts'; import * as echarts from 'echarts';
import { ref, onMounted, nextTick, reactive, onUnmounted,watchEffect } from 'vue'; import { ref, onMounted, nextTick, reactive, onUnmounted, watchEffect } from 'vue';
import { useRoute, useRouter } from 'vue-router'; import { useRoute, useRouter } from 'vue-router';
...@@ -116,31 +129,31 @@ const containerStyle = computed(() => ({ ...@@ -116,31 +129,31 @@ const containerStyle = computed(() => ({
// 区域信息数据 // 区域信息数据
const OverviewRegionalInformation = ref([ const OverviewRegionalInformation = ref([
{label: "小区名称",value: "阳光花园"}, { label: "小区名称", value: "阳光花园" },
{label: "小区建筑数量",value: "12栋"}, { label: "小区建筑数量", value: "12栋" },
{label: "配备无人机数量",value: "5台"}, { label: "配备无人机数量", value: "5台" },
{label: "当前可用无人机数量",value: "3台"}, { label: "当前可用无人机数量", value: "3台" },
{label: "最近火情发生时间",value: "2023-05-15 14:30"}, { label: "最近火情发生时间", value: "2023-05-15 14:30" },
{label: "配备无人机数量",value: "5台"}, { label: "配备无人机数量", value: "5台" },
{label: "当前可用无人机数量",value: "3台"}, { label: "当前可用无人机数量", value: "3台" },
{label: "最近火情发生时间",value: "2023-05-15 14:30"} { label: "最近火情发生时间", value: "2023-05-15 14:30" }
]); ]);
// 历史数据时间选择 // 历史数据时间选择
const historyFireSelectTime = ref(''); const historyFireSelectTime = ref('');
const historyFireTimeData = ref([ const historyFireTimeData = ref([
{label:"近一个月",value: 30}, { label: "近一个月", value: 30 },
{label:"近三个月",value: 90}, { label: "近三个月", value: 90 },
{label:"近半年",value: 180}, { label: "近半年", value: 180 },
{label:"近一年",value: 365} { label: "近一年", value: 365 }
]); ]);
// 定义一个响应式变量currentFireData，存储火灾数据 // 定义一个响应式变量currentFireData，存储火灾数据
const currentFireData = ref([ const currentFireData = ref([
{location: "红色 四单元 七号搂 3楼", severity: "四级 (大规模)", status: "消防人员已到达现场", time: "2025年8月7日 11:14 发现" ,fireLevel: 0,isXFOk: false}, { location: "红色 四单元 七号搂 3楼", severity: "四级 (大规模)", status: "消防人员已到达现场", time: "2025年8月7日 11:14 发现", fireLevel: 0, isXFOk: false },
{location: "金色家园小区 三单元 七号搂 3楼", severity: "三级 (大规模)", status: "消防人员未到达现场", time: "2025年8月5日 11:14 发现" ,fireLevel: 1, isXFOk: true}, { location: "金色家园小区 三单元 七号搂 3楼", severity: "三级 (大规模)", status: "消防人员未到达现场", time: "2025年8月5日 11:14 发现", fireLevel: 1, isXFOk: true },
{location: "金色家园小区 四单元 七号搂 3楼", severity: "四级 (大规模)", status: "消防人员已到达现场", time: "2025年8月7日 11:14 发现" , fireLevel: 0, isXFOk: false}, { location: "金色家园小区 四单元 七号搂 3楼", severity: "四级 (大规模)", status: "消防人员已到达现场", time: "2025年8月7日 11:14 发现", fireLevel: 0, isXFOk: false },
{location: "金色家园小区 三单元 七号搂 3楼", severity: "三级 (大规模)", status: "消防人员未到达现场", time: "2025年8月5日 11:14 发现", fireLevel: 2, isXFOk: true}, { location: "金色家园小区 三单元 七号搂 3楼", severity: "三级 (大规模)", status: "消防人员未到达现场", time: "2025年8月5日 11:14 发现", fireLevel: 2, isXFOk: true },
]); ]);
// 定义一个响应式变量，用来存储火警的边框颜色 // 定义一个响应式变量，用来存储火警的边框颜色
...@@ -202,7 +215,7 @@ const initFireHistoryChart = () => { ...@@ -202,7 +215,7 @@ const initFireHistoryChart = () => {
path: '/fireManage', path: '/fireManage',
query: { taskId: params.name } query: { taskId: params.name }
}) })
useAppStoreInstance.num=4 useAppStoreInstance.num = 4
}); });
chartInstance.setOption(option); chartInstance.setOption(option);
...@@ -245,7 +258,7 @@ onMounted(() => { ...@@ -245,7 +258,7 @@ onMounted(() => {
.main-content { .main-content {
display: flex; display: flex;
gap: var(--card-spacing); gap: var(--card-spacing);
padding: 0.4rem; padding: 0.4rem 0;
height: 100vh; height: 100vh;
box-sizing: border-box; box-sizing: border-box;
overflow: hidden; overflow: hidden;
...@@ -282,6 +295,7 @@ onMounted(() => { ...@@ -282,6 +295,7 @@ onMounted(() => {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
overflow: hidden; overflow: hidden;
} }
.info-card:hover { .info-card:hover {
transform: translateY(2px); transform: translateY(2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
...@@ -298,16 +312,19 @@ onMounted(() => { ...@@ -298,16 +312,19 @@ onMounted(() => {
height: var(--header-height); height: var(--header-height);
/* flex-shrink: 0; */ /* flex-shrink: 0; */
} }
.card-header1 { .card-header1 {
background-color: #e29393; background-color: #e29393;
} }
.card-header h2 { .card-header h2 {
font-size: 1.2rem; font-size: 1.2rem;
color: #1e40af; color: #1e40af;
margin: 0; margin: 0;
} }
.more-btn{
.more-btn {
width: 50px; width: 50px;
background-color: #facc15; background-color: #facc15;
display: flex; display: flex;
...@@ -315,7 +332,8 @@ onMounted(() => { ...@@ -315,7 +332,8 @@ onMounted(() => {
border-radius: 90%; border-radius: 90%;
align-items: center; align-items: center;
} }
.icon-fire-red{
.icon-fire-red {
margin-top: -0.31rem; margin-top: -0.31rem;
width: 15%; width: 15%;
margin-right: 10px; margin-right: 10px;
...@@ -344,7 +362,8 @@ onMounted(() => { ...@@ -344,7 +362,8 @@ onMounted(() => {
border-bottom: 1px solid #eee; border-bottom: 1px solid #eee;
} }
.info-item:hover{
.info-item:hover {
transform: translateX(4px); transform: translateX(4px);
} }
...@@ -373,12 +392,14 @@ onMounted(() => { ...@@ -373,12 +392,14 @@ onMounted(() => {
height: 100%; height: 100%;
object-fit: cover; object-fit: cover;
} }
.map-image:hover { .map-image:hover {
transform: translateY(4px); transform: translateY(4px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
} }
/* 历史火情统计 */ /* 历史火情统计 */
.stats-alerts { .stats-alerts {
height: 38.5%; height: 38.5%;
...@@ -444,7 +465,8 @@ transform: translateY(4px); ...@@ -444,7 +465,8 @@ transform: translateY(4px);
} }
/* 右侧卡片 - 使用flex布局自动分配高度 */ /* 右侧卡片 - 使用flex布局自动分配高度 */
.current-situation, .current-situation1 { .current-situation,
.current-situation1 {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
...@@ -477,29 +499,33 @@ transform: translateY(4px); ...@@ -477,29 +499,33 @@ transform: translateY(4px);
transform: translateX(4px); transform: translateX(4px);
} }
.fireover{ .fireover {
border-left: #10b981 4px solid; border-left: #10b981 4px solid;
} }
.fireemergency{
.fireemergency {
border-left: #fc0000 4px solid; border-left: #fc0000 4px solid;
} }
.firewarning{
.firewarning {
border-left: #facc15 4px solid; border-left: #facc15 4px solid;
} }
.isXFOk{
.isXFOk {
color: #10b981; color: #10b981;
} }
.isXFNotOk{
.isXFNotOk {
color: #144937; color: #144937;
} }
.emergency{ .emergency {
position: sticky; position: sticky;
top: 0; top: 0;
z-index: 100; z-index: 100;
box-shadow: 0 2px 5px rgba(0,0,0,0.5); box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
/* background-color: #fff; 设置背景色避免透明 */ /* background-color: #fff; 设置背景色避免透明 */
/* 可选：添加阴影增强视觉效果 */ /* 可选：添加阴影增强视觉效果 */
...@@ -515,7 +541,10 @@ transform: translateY(4px); ...@@ -515,7 +541,10 @@ transform: translateY(4px);
align-items: center; align-items: center;
} }
.icon-fire-red1{height: 70%;margin-right: 0.5rem; } .icon-fire-red1 {
height: 70%;
margin-right: 0.5rem;
}
.situation-content .location { .situation-content .location {
font-weight: 500; font-weight: 500;
...@@ -563,7 +592,8 @@ transform: translateY(4px); ...@@ -563,7 +592,8 @@ transform: translateY(4px);
flex-direction: column; flex-direction: column;
} }
.region-overview, .region-map { .region-overview,
.region-map {
height: 300px; height: 300px;
margin-bottom: var(--card-spacing); margin-bottom: var(--card-spacing);
} }
......
src/views/dashboard/analysis/index_cop.vue
浏览文件 @ 8b7268d4
...@@ -13,10 +13,10 @@ ...@@ -13,10 +13,10 @@
<div class="card-header"> <div class="card-header">
<h2>区域信息概览</h2> <h2>区域信息概览</h2>
</div> </div>
<div class="info-grid" > <div class="info-grid">
<div class="info-item" v-for="(item,index) in OverviewRegionalInformation" :key="index"> <div class="info-item" v-for="(item, index) in OverviewRegionalInformation" :key="index">
<span class="label">{{item.label}}:</span> <span class="label">{{ item.label }}:</span>
<span class="value">{{item.value}}</span> <span class="value">{{ item.value }}</span>
</div> </div>
</div> </div>
...@@ -31,24 +31,21 @@ ...@@ -31,24 +31,21 @@
<!-- 左侧下部分：历史火情统计和传感器警报 --> <!-- 左侧下部分：历史火情统计和传感器警报 -->
<div class="info-card stats-alerts"> <div class="info-card stats-alerts">
<div class="card-tabs"> <div class="card-tabs">
<span class="tab-btn" >历史火情统计</span> <span class="tab-btn">历史火情统计</span>
</div> </div>
<!-- 历史火情统计面板 --> <!-- 历史火情统计面板 -->
<div class="tab-content history-stats"> <div class="tab-content history-stats">
<div class="time-filter"> <div class="time-filter">
<el-select v-model="historyFireSelectTime" placeholder="选择数据查看范围" style="width: 240px" class="filter-select" @change="historyFireSelectTimeFn"> <el-select v-model="historyFireSelectTime" placeholder="选择数据查看范围" style="width: 240px"
<el-option class="filter-select" @change="historyFireSelectTimeFn">
v-for="item in historyFireTimeData" <el-option v-for="item in historyFireTimeData" :key="item.value" :label="item.label"
:key="item.value" :value="item.value" />
:label="item.label"
:value="item.value"
/>
</el-select> </el-select>
</div> </div>
<div class="chart-container" > <div class="chart-container">
<div id="historyChart" class="chart" style="width: 100%; height: 100%"></div> <div id="historyChart" class="chart" style="width: 100%; height: 100%"></div>
</div> </div>
</div> </div>
...@@ -119,35 +116,35 @@ ...@@ -119,35 +116,35 @@
</template> </template>
<script setup> <script setup>
import * as echarts from 'echarts'; import * as echarts from 'echarts';
import { ref, onMounted, computed } from 'vue'; import { ref, onMounted, computed } from 'vue';
// 定义一个OverviewRegionalInformation变量，用于存储小区信息 // 定义一个OverviewRegionalInformation变量，用于存储小区信息
const OverviewRegionalInformation = ref([ const OverviewRegionalInformation = ref([
{label: "小区名称",value: "阳光花园"}, // 小区名称为阳光花园 { label: "小区名称", value: "阳光花园" }, // 小区名称为阳光花园
{label: "小区建筑数量",value: "12栋"}, // 小区建筑数量为12栋 { label: "小区建筑数量", value: "12栋" }, // 小区建筑数量为12栋
{label: "配备无人机数量",value: "5台"}, // 配备无人机数量为5台 { label: "配备无人机数量", value: "5台" }, // 配备无人机数量为5台
{label: "当前可用无人机数量",value: "3台"}, // 当前可用无人机数量为3台 { label: "当前可用无人机数量", value: "3台" }, // 当前可用无人机数量为3台
{label: "最近火情发生时间",value: "2023-05-15 14:30"}, // 最近火情发生时间为2023-05-15 14:30 { label: "最近火情发生时间", value: "2023-05-15 14:30" }, // 最近火情发生时间为2023-05-15 14:30
{label: "配备无人机数量",value: "5台"}, // 配备无人机数量为5台 { label: "配备无人机数量", value: "5台" }, // 配备无人机数量为5台
{label: "当前可用无人机数量",value: "3台"}, // 当前可用无人机数量为3台 { label: "当前可用无人机数量", value: "3台" }, // 当前可用无人机数量为3台
{label: "最近火情发生时间",value: "2023-05-15 14:30"}] { label: "最近火情发生时间", value: "2023-05-15 14:30" }]
); );
// 定义一个响应式的变量，用于存储历史数据的时间选择 // 定义一个响应式的变量，用于存储历史数据的时间选择
const historyFireSelectTime = ref('') const historyFireSelectTime = ref('')
const historyFireTimeData = ref([ const historyFireTimeData = ref([
{label:"近一个月",value: 30}, { label: "近一个月", value: 30 },
{label:"近三个月",value: 90}, { label: "近三个月", value: 90 },
{label:"近半年",value: 180}, { label: "近半年", value: 180 },
{label:"近一年",value: 365} { label: "近一年", value: 365 }
]) ])
const historyFireSelectTimeFn = () => { const historyFireSelectTimeFn = () => {
console.log(historyFireSelectTime.value,"0000000000000000000") console.log(historyFireSelectTime.value, "0000000000000000000")
} }
const initFireHistoryChart = () => { const initFireHistoryChart = () => {
var chartDom = document.getElementById('historyChart'); var chartDom = document.getElementById('historyChart');
var myChart = echarts.init(chartDom); var myChart = echarts.init(chartDom);
var option; var option;
...@@ -175,15 +172,15 @@ ...@@ -175,15 +172,15 @@
myChart.resize(); myChart.resize();
}); });
option && myChart.setOption(option); option && myChart.setOption(option);
} }
// 挂载时初始化 // 挂载时初始化
onMounted(() => { onMounted(() => {
initFireHistoryChart() initFireHistoryChart()
}); });
</script> </script>
...@@ -196,26 +193,34 @@ ...@@ -196,26 +193,34 @@
min-height: 100vh; min-height: 100vh;
color: #333; color: #333;
/* background-color: #10b981; */ /* background-color: #10b981; */
max-height: 100%; /* 设置最大高度 */ max-height: 100%;
overflow-y: auto; /* 内容超出时显示垂直滚动条 */ /* 设置最大高度 */
overflow-y: auto;
/* 内容超出时显示垂直滚动条 */
/* 美化滚动条样式 */ /* 美化滚动条样式 */
scrollbar-width: thin; /* Firefox */ scrollbar-width: thin;
scrollbar-color: #c1c1c1 #f1f1f1; /* Firefox */ /* Firefox */
scrollbar-color: #c1c1c1 #f1f1f1;
/* Firefox */
} }
/* 主内容区样式 */ /* 主内容区样式 */
.main-content { .main-content {
display: flex; display: flex;
gap: 1rem; gap: 1rem;
padding: 0.4rem; padding: 0.4rem 0;
max-width: 1920px; max-width: 1920px;
max-height: 100%; /* 设置最大高度 */ max-height: 100%;
overflow-y: auto; /* 内容超出时显示垂直滚动条 */ /* 设置最大高度 */
overflow-y: auto;
/* 内容超出时显示垂直滚动条 */
/* 美化滚动条样式 */ /* 美化滚动条样式 */
scrollbar-width: thin; /* Firefox */ scrollbar-width: thin;
scrollbar-color: #c1c1c1 #f1f1f1; /* Firefox */ /* Firefox */
scrollbar-color: #c1c1c1 #f1f1f1;
/* Firefox */
/* margin: 0 auto; */ /* margin: 0 auto; */
} }
...@@ -240,7 +245,8 @@ ...@@ -240,7 +245,8 @@
border-radius: 8px; border-radius: 8px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
padding: 1rem; padding: 1rem;
position: relative; /* 确保卡片有定位上下文 */ position: relative;
/* 确保卡片有定位上下文 */
width: 100%; width: 100%;
height: 100%; height: 100%;
...@@ -283,13 +289,16 @@ ...@@ -283,13 +289,16 @@
.info-grid { .info-grid {
display: flex; display: flex;
flex-direction: column; /* 竖排排列 */ flex-direction: column;
justify-content: center; /* 垂直居中 */ /* 竖排排列 */
justify-content: center;
/* 垂直居中 */
gap: 1rem; gap: 1rem;
padding-right: 10px; padding-right: 10px;
overflow-y: auto; /* 内容超出时显示垂直滚动条 */ overflow-y: auto;
/* 内容超出时显示垂直滚动条 */
/* 美化滚动条样式 */ /* 美化滚动条样式 */
scrollbar-width: thin; scrollbar-width: thin;
scrollbar-color: #c1c1c1 #f1f1f1; scrollbar-color: #c1c1c1 #f1f1f1;
...@@ -297,11 +306,15 @@ ...@@ -297,11 +306,15 @@
} }
.info-item { .info-item {
display: flex; /* 水平排列 */ display: flex;
justify-content: space-between; /* 两端对齐，使label左对齐，value右对齐 */ /* 水平排列 */
align-items: center; /* 垂直居中 */ justify-content: space-between;
/* 两端对齐，使label左对齐，value右对齐 */
align-items: center;
/* 垂直居中 */
/* padding: 5px 0; */ /* padding: 5px 0; */
border-bottom: 1px solid #eee; /* 底部边框 */ border-bottom: 1px solid #eee;
/* 底部边框 */
} }
...@@ -379,7 +392,7 @@ ...@@ -379,7 +392,7 @@
margin-bottom: 1rem; margin-bottom: 1rem;
} }
.chart-container{ .chart-container {
background-color: #10b981; background-color: #10b981;
height: 76%; height: 76%;
width: 100%; width: 100%;
...@@ -389,14 +402,21 @@ ...@@ -389,14 +402,21 @@
box-sizing: border-box; box-sizing: border-box;
/* overflow: auto; */ /* overflow: auto; */
} }
.chart{
width: 100%; /* 宽度占满容器 */ .chart {
height: 100%; /* 高度占满容器 */ width: 100%;
position: absolute; /* 绝对定位 */ /* 宽度占满容器 */
top: 0; /* 顶部对齐 */ height: 100%;
left: 0; /* 左侧对齐 */ /* 高度占满容器 */
position: absolute;
/* 绝对定位 */
top: 0;
/* 顶部对齐 */
left: 0;
/* 左侧对齐 */
background-color: #10b981; background-color: #10b981;
} }
.filter-select { .filter-select {
/* padding: 0.4rem 0.6rem; */ /* padding: 0.4rem 0.6rem; */
border-radius: 4px; border-radius: 4px;
...@@ -426,6 +446,7 @@ ...@@ -426,6 +446,7 @@
margin-bottom: 1rem; margin-bottom: 1rem;
/* background-color: #10b981; */ /* background-color: #10b981; */
} }
.current-situation1 { .current-situation1 {
height: 51%; height: 51%;
display: flex; display: flex;
...@@ -445,7 +466,8 @@ ...@@ -445,7 +466,8 @@
} }
/* 火情项目样式 */ /* 火情项目样式 */
.alert-item, .situation-item { .alert-item,
.situation-item {
display: flex; display: flex;
gap: 1rem; gap: 1rem;
padding: 1rem; padding: 1rem;
...@@ -455,16 +477,19 @@ ...@@ -455,16 +477,19 @@
transition: transform 0.2s ease, box-shadow 0.2s ease; transition: transform 0.2s ease, box-shadow 0.2s ease;
} }
.alert-item:hover, .situation-item:hover { .alert-item:hover,
.situation-item:hover {
transform: translateX(4px); transform: translateX(4px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
} }
.alert-item.resolved, .situation-item.controlled { .alert-item.resolved,
.situation-item.controlled {
border-left-color: #10b981; border-left-color: #10b981;
} }
.alert-item.warning, .situation-item.important { .alert-item.warning,
.situation-item.important {
border-left-color: #f59e0b; border-left-color: #f59e0b;
} }
...@@ -474,7 +499,8 @@ ...@@ -474,7 +499,8 @@
background-color: rgba(239, 68, 68, 0.03); background-color: rgba(239, 68, 68, 0.03);
} }
.alert-icon, .situation-icon { .alert-icon,
.situation-icon {
flex-shrink: 0; flex-shrink: 0;
width: 40px; width: 40px;
height: 40px; height: 40px;
...@@ -496,11 +522,13 @@ ...@@ -496,11 +522,13 @@
background-color: rgba(16, 185, 129, 0.1); background-color: rgba(16, 185, 129, 0.1);
} }
.alert-content, .situation-content { .alert-content,
.situation-content {
flex-grow: 1; flex-grow: 1;
} }
.alert-content h4, .situation-content h4 { .alert-content h4,
.situation-content h4 {
margin: 0 0 0.5rem 0; margin: 0 0 0.5rem 0;
font-size: 1rem; font-size: 1rem;
color: #333; color: #333;
...@@ -579,14 +607,27 @@ ...@@ -579,14 +607,27 @@
/* 动画效果 */ /* 动画效果 */
@keyframes spin { @keyframes spin {
0% { transform: rotate(0deg); } 0% {
100% { transform: rotate(360deg); } transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
} }
@keyframes pulse { @keyframes pulse {
0% { opacity: 1; } 0% {
50% { opacity: 0.7; } opacity: 1;
100% { opacity: 1; } }
50% {
opacity: 0.7;
}
100% {
opacity: 1;
}
} }
/* 响应式调整 */ /* 响应式调整 */
......
src/views/dashboard/workbench/index.vue
浏览文件 @ 8b7268d4
...@@ -182,7 +182,7 @@ watch(route, () => { ...@@ -182,7 +182,7 @@ watch(route, () => {
.main-content { .main-content {
display: flex; display: flex;
gap: var(--card-spacing); gap: var(--card-spacing);
padding: 0.4rem; padding: 0.4rem 0;
height: 100vh; height: 100vh;
box-sizing: border-box; box-sizing: border-box;
} }
......
src/views/dialog_infoShow_img_vid/uavWorkTable.vue
浏览文件 @ 8b7268d4
...@@ -2,48 +2,20 @@ ...@@ -2,48 +2,20 @@
<div class="task-schedule-container"> <div class="task-schedule-container">
<!-- 表格主体 --> <!-- 表格主体 -->
<el-table <el-table :data="taskScheduleData" size="small" class="task-table" :header-cell-style="headerCellStyle"
:data="taskScheduleData" :cell-style="cellStyle" :row-class-name="tableRowClassName" highlight-current-row @row-click="handleRowClick"
style="height: 420px;">
size="small"
class="task-table"
:header-cell-style="headerCellStyle"
:cell-style="cellStyle"
:row-class-name="tableRowClassName"
highlight-current-row
@row-click="handleRowClick"
style="height: 420px;"
>
<!-- 序号列 --> <!-- 序号列 -->
<el-table-column <el-table-column type="index" label="序号" width="60" align="center" />
type="index"
label="序号"
width="60"
align="center"
/>
<!-- 任务调度时间 --> <!-- 任务调度时间 -->
<el-table-column <el-table-column prop="scheduleTime" label="任务调度时间" width="120" align="center" />
prop="scheduleTime"
label="任务调度时间"
width="120"
align="center"
/>
<!-- 任务调度目标 --> <!-- 任务调度目标 -->
<el-table-column <el-table-column prop="target" label="任务调度目标" width="120" align="center" />
prop="target"
label="任务调度目标"
width="120"
align="center"
/>
<!-- 目标内容 --> <!-- 目标内容 -->
<el-table-column <el-table-column prop="content" label="目标内容" min-width="220">
prop="content"
label="目标内容"
min-width="220"
>
<template #default="scope"> <template #default="scope">
<div class="content-cell"> <div class="content-cell">
<el-tooltip effect="dark" :content="scope.row.content"> <el-tooltip effect="dark" :content="scope.row.content">
...@@ -54,12 +26,7 @@ ...@@ -54,12 +26,7 @@
</el-table-column> </el-table-column>
<!-- 任务持续时间 --> <!-- 任务持续时间 -->
<el-table-column <el-table-column prop="duration" label="任务持续时间" width="140" align="center">
prop="duration"
label="任务持续时间"
width="140"
align="center"
>
<template #default="scope"> <template #default="scope">
<div class="content-cell"> <div class="content-cell">
<el-tooltip effect="dark" :content="scope.row.duration"> <el-tooltip effect="dark" :content="scope.row.duration">
...@@ -70,12 +37,7 @@ ...@@ -70,12 +37,7 @@
</el-table-column> </el-table-column>
<!-- 损伤记录 --> <!-- 损伤记录 -->
<el-table-column <el-table-column prop="damageRecord" label="损伤记录" width="100" align="center">
prop="damageRecord"
label="损伤记录"
width="100"
align="center"
>
<template #default="scope"> <template #default="scope">
<span class="record-text"> <span class="record-text">
{{ scope.row.damageRecord || '-' }} {{ scope.row.damageRecord || '-' }}
...@@ -87,12 +49,7 @@ ...@@ -87,12 +49,7 @@
</el-table-column> </el-table-column>
<!-- 维修记录 --> <!-- 维修记录 -->
<el-table-column <el-table-column prop="repairRecord" label="维修记录" width="100" align="center">
prop="repairRecord"
label="维修记录"
width="100"
align="center"
>
<template #default="scope"> <template #default="scope">
<span class="record-text"> <span class="record-text">
{{ scope.row.repairRecord || '-' }} {{ scope.row.repairRecord || '-' }}
...@@ -104,36 +61,18 @@ ...@@ -104,36 +61,18 @@
</el-table-column> </el-table-column>
<!-- 记录视频 --> <!-- 记录视频 -->
<el-table-column <el-table-column label="记录视频" width="90" align="center">
label="记录视频"
width="90"
align="center"
>
<template #default="scope"> <template #default="scope">
<el-button <el-button type="text" class="view-btn" @click="handleViewVideo(scope.row)" :icon="VideoPlay">
type="text"
class="view-btn"
@click="handleViewVideo(scope.row)"
:icon="VideoPlay"
>
查看 查看
</el-button> </el-button>
</template> </template>
</el-table-column> </el-table-column>
<!-- 操作列 --> <!-- 操作列 -->
<el-table-column <el-table-column label="操作" width="140" align="center">
label="操作"
width="140"
align="center"
>
<template #default="scope"> <template #default="scope">
<el-button <el-button type="text" class="export-btn" @click="handleExportFile(scope.row)" :icon="Download">
type="text"
class="export-btn"
@click="handleExportFile(scope.row)"
:icon="Download"
>
导出文件 导出文件
</el-button> </el-button>
</template> </template>
...@@ -141,10 +80,10 @@ ...@@ -141,10 +80,10 @@
</el-table> </el-table>
<div> <div>
<el-dialog class="dialogbig" v-model="img_video_dialogVisible" style="background-color: rgba(0, 0, 0, 0) ;" > <el-dialog class="dialogbig" v-model="img_video_dialogVisible" style="background-color: rgba(0, 0, 0, 0) ;">
<div class="media-container"> <div class="media-container">
<!-- 图片展示行 --> <!-- 图片展示行 -->
<div class="image-row" > <div class="image-row">
<h3>图片</h3> <h3>图片</h3>
<div class="image-list" v-if="images.length"> <div class="image-list" v-if="images.length">
<div v-for="item in images" class="image-item"> <div v-for="item in images" class="image-item">
...@@ -306,7 +245,7 @@ const handleRowClick = (row) => { ...@@ -306,7 +245,7 @@ const handleRowClick = (row) => {
// 查看视频按钮事件 // 查看视频按钮事件
const handleViewVideo = (rowFnfo) => { const handleViewVideo = (rowFnfo) => {
// 查看视频逻辑 // 查看视频逻辑
console.log('补充查看视频逻辑',rowFnfo) console.log('补充查看视频逻辑', rowFnfo)
img_video_dialogVisible.value = true img_video_dialogVisible.value = true
} }
...@@ -314,7 +253,7 @@ const handleViewVideo = (rowFnfo) => { ...@@ -314,7 +253,7 @@ const handleViewVideo = (rowFnfo) => {
// 导出文件按钮事件 // 导出文件按钮事件
const handleExportFile = (rowFnfo) => { const handleExportFile = (rowFnfo) => {
// 导出文件逻辑 // 导出文件逻辑
console.log('补充导出文件逻辑',rowFnfo) console.log('补充导出文件逻辑', rowFnfo)
ElMessage({ ElMessage({
type: 'info', type: 'info',
message: `正在请求${rowFnfo.target}文件: `, message: `正在请求${rowFnfo.target}文件: `,
...@@ -323,24 +262,27 @@ const handleExportFile = (rowFnfo) => { ...@@ -323,24 +262,27 @@ const handleExportFile = (rowFnfo) => {
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.task-schedule-container { .task-schedule-container {
background: rgba(16, 42, 77, 0.7); /* 修改容器背景色 */ background: rgba(16, 42, 77, 0.7);
/* 修改容器背景色 */
border-radius: 8px; border-radius: 8px;
// box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3); /* 加深阴影增强对比 */ // box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3); /* 加深阴影增强对比 */
display: flex; display: flex;
flex-direction: column; flex-direction: column;
height: 100%; height: 100%;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
padding: 2px; /* 添加内边距 */ padding: 2px;
/* 添加内边距 */
} }
/* 修改表头样式 */ /* 修改表头样式 */
:deep(.el-table__header) { :deep(.el-table__header) {
th { th {
background-color: rgb(11, 31, 58) !important; /* 加深表头背景 */ background-color: rgb(11, 31, 58) !important;
color: #ffffff !important; /* 浅色文字 */ /* 加深表头背景 */
color: #ffffff !important;
/* 浅色文字 */
// border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important; // border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
} }
...@@ -353,13 +295,15 @@ const handleExportFile = (rowFnfo) => { ...@@ -353,13 +295,15 @@ const handleExportFile = (rowFnfo) => {
max-height: 600px; max-height: 600px;
overflow: auto; overflow: auto;
// background-color: transparent !important; /* 透明背景 */ // background-color: transparent !important; /* 透明背景 */
color: #ffffff; /* 浅色文字 */ color: #ffffff;
/* 浅色文字 */
/* 修改单元格样式 */ /* 修改单元格样式 */
:deep(.el-table__body) { :deep(.el-table__body) {
tr { tr {
td { td {
background-color: rgba(16, 42, 77);; background-color: rgba(16, 42, 77);
;
// border-bottom: 1px solid rgba(255, 255, 255, 0.1); // border-bottom: 1px solid rgba(255, 255, 255, 0.1);
color: #ffffff; color: #ffffff;
// padding: 10px 0; // padding: 10px 0;
...@@ -384,6 +328,7 @@ const handleExportFile = (rowFnfo) => { ...@@ -384,6 +328,7 @@ const handleExportFile = (rowFnfo) => {
/* 修改按钮样式 */ /* 修改按钮样式 */
.view-btn { .view-btn {
color: #69c0ff !important; color: #69c0ff !important;
&:hover { &:hover {
color: #40a9ff !important; color: #40a9ff !important;
} }
...@@ -391,6 +336,7 @@ const handleExportFile = (rowFnfo) => { ...@@ -391,6 +336,7 @@ const handleExportFile = (rowFnfo) => {
.export-btn { .export-btn {
color: #ffc069 !important; color: #ffc069 !important;
&:hover { &:hover {
color: #ffa940 !important; color: #ffa940 !important;
} }
...@@ -402,10 +348,14 @@ const handleExportFile = (rowFnfo) => { ...@@ -402,10 +348,14 @@ const handleExportFile = (rowFnfo) => {
color: #ffffff !important; color: #ffffff !important;
max-height: 30px; max-height: 30px;
white-space: nowrap; /* 禁止文本换行 */ white-space: nowrap;
overflow: hidden; /* 隐藏溢出的内容 */ /* 禁止文本换行 */
text-overflow: ellipsis; /* 使用省略号表示被截断的文本 */ overflow: hidden;
max-width: 100%; /* 设置最大宽度，可以根据需要调整 */ /* 隐藏溢出的内容 */
text-overflow: ellipsis;
/* 使用省略号表示被截断的文本 */
max-width: 100%;
/* 设置最大宽度，可以根据需要调整 */
} }
} }
...@@ -418,7 +368,9 @@ const handleExportFile = (rowFnfo) => { ...@@ -418,7 +368,9 @@ const handleExportFile = (rowFnfo) => {
:deep(.el-pagination) { :deep(.el-pagination) {
color: #ffffff; color: #ffffff;
.btn-prev, .btn-next, .el-pager li { .btn-prev,
.btn-next,
.el-pager li {
// background-color: transparent; // background-color: transparent;
color: #ffffff; color: #ffffff;
} }
...@@ -440,8 +392,10 @@ const handleExportFile = (rowFnfo) => { ...@@ -440,8 +392,10 @@ const handleExportFile = (rowFnfo) => {
.horizontal-container { .horizontal-container {
margin: 20px 0 10px 0; margin: 20px 0 10px 0;
display: flex; display: flex;
align-items: center; /* 垂直居中对齐 */ align-items: center;
/* 垂直居中对齐 */
} }
.media-container { .media-container {
padding: 20px; padding: 20px;
max-width: 1200px; max-width: 1200px;
...@@ -449,6 +403,7 @@ const handleExportFile = (rowFnfo) => { ...@@ -449,6 +403,7 @@ const handleExportFile = (rowFnfo) => {
background: rgb(4, 33, 54); background: rgb(4, 33, 54);
border-radius: 10px; border-radius: 10px;
} }
/* 图片行样式 */ /* 图片行样式 */
.image-row { .image-row {
margin-bottom: 40px; margin-bottom: 40px;
......
src/views/systemmanage/staffManage/index.vue
浏览文件 @ 8b7268d4
...@@ -345,7 +345,7 @@ watch(route, () => { ...@@ -345,7 +345,7 @@ watch(route, () => {
.main-content { .main-content {
display: flex; display: flex;
gap: var(--card-spacing); gap: var(--card-spacing);
padding: 0.4rem; padding: 0.4rem 0;
height: 100vh; height: 100vh;
box-sizing: border-box; box-sizing: border-box;
} }
......
src/views/uavManage/index.vue
浏览文件 @ 8b7268d4
...@@ -4,29 +4,26 @@ ...@@ -4,29 +4,26 @@
<div class="box_title box_title1">无人机列表</div> <div class="box_title box_title1">无人机列表</div>
<div class="contenterTitle"> <div class="contenterTitle">
<div class="title"> <div class="title">
<el-button type="primary" size="large" style="width: 150px; color: #fff;" color="#06B0E1" @click="addUvaHandFn" >添加无人机</el-button> <el-button type="primary" size="large" style="width: 150px; color: #fff;" color="#06B0E1"
@click="addUvaHandFn">添加无人机</el-button>
<!-- 这里的显示不对 --> <!-- 这里的显示不对 -->
<div class="uavshow"> <div class="uavshow">
<div class="uavlist" > <div class="uavlist">
<el-scrollbar> <el-scrollbar>
<div class="scrollbar-flex-content" > <div class="scrollbar-flex-content">
<p v-for="item in CurWorkUavInfo" :key="item" class="scrollbar-demo-item step-icon1"> <p v-for="item in CurWorkUavInfo" :key="item" class="scrollbar-demo-item step-icon1">
<el-tooltip effect="dark" > <el-tooltip effect="dark">
<div class="image-container" > <div class="image-container">
<img src="../../static/image/uav/wurenjiditu.png" alt="" class="background-image"> <img src="../../static/image/uav/wurenjiditu.png" alt="" class="background-image">
<div class="uavInfoShow" @click.stop="showUavdetailedInformation(item)"> <div class="uavInfoShow" @click.stop="showUavdetailedInformation(item)">
<div class="first-item"> <div class="first-item">
<img <img src="../../static/image/uav/wurenjitop.png" class="uav-icon" alt="无人机图标">
src="../../static/image/uav/wurenjitop.png"
class="uav-icon"
alt="无人机图标"
>
<span class="uav-number">无人机：{{ item.UavNum }}</span> <span class="uav-number">无人机：{{ item.UavNum }}</span>
</div> </div>
<div class="second-item" > <div class="second-item">
</div> </div>
<div class="third-item" :style="{color: StateColor[item.UavCurState]}"> <div class="third-item" :style="{ color: StateColor[item.UavCurState] }">
<span class="state-label">状态显示</span> <span class="state-label">状态显示</span>
<span class="state-value">{{ item.UavNum }}</span> <span class="state-value">{{ item.UavNum }}</span>
</div> </div>
...@@ -36,7 +33,7 @@ ...@@ -36,7 +33,7 @@
<div> <div>
<strong>无人机编号:</strong> {{ item.UavNum }}<br> <strong>无人机编号:</strong> {{ item.UavNum }}<br>
状态: 状态:
<span :style="{color: StateColor[item.UavCurState]}"> <span :style="{ color: StateColor[item.UavCurState] }">
{{ item.UavCurState }} {{ item.UavCurState }}
</span> </span>
</div> </div>
...@@ -57,9 +54,10 @@ ...@@ -57,9 +54,10 @@
</div> </div>
<div class="box_footer"> <div class="box_footer">
<div class="box_footer_left"> <div class="box_footer_left">
<div class="box_title">无人机：{{UavInfoSelect[0].UavNum}}</div> <div class="box_title">无人机：{{ UavInfoSelect[0].UavNum }}</div>
<div class="box_footer_content"> <div class="box_footer_content">
<div v-for="UavInfoSelect in UavInfoSelect" :key="item" style="margin-top: 30px; height: 100%; overflow: hidden;"> <div v-for="UavInfoSelect in UavInfoSelect" :key="item"
style="margin-top: 30px; height: 100%; overflow: hidden;">
<div class="box_footer_content_up"> <div class="box_footer_content_up">
<div class="text item"> <div class="text item">
<img src="../../static/image/uav/shuxian.png" class="shuxian" style="width: 25px; height: 15px;"> <img src="../../static/image/uav/shuxian.png" class="shuxian" style="width: 25px; height: 15px;">
...@@ -79,7 +77,8 @@ ...@@ -79,7 +77,8 @@
<div class="text item"> <div class="text item">
<img src="../../static/image/uav/shuxian.png" class="shuxian" style="width: 25px; height: 15px;"> <img src="../../static/image/uav/shuxian.png" class="shuxian" style="width: 25px; height: 15px;">
<div style=" width: 40%;">无人机当前载弹量：</div> <div style=" width: 40%;">无人机当前载弹量：</div>
<div>{{ UavInfoSelect.uavBullet }} 发<span :v-if="UavInfoSelect.UavPreMaintain<4" style="color: red;margin-left: 10px;">(注意当前载弹量)</span></div> <div>{{ UavInfoSelect.uavBullet }} 发<span :v-if="UavInfoSelect.UavPreMaintain < 4"
style="color: red;margin-left: 10px;">(注意当前载弹量)</span></div>
</div> </div>
<div class="text item"> <div class="text item">
<img src="../../static/image/uav/shuxian.png" class="shuxian" style="width: 25px; height: 15px;"> <img src="../../static/image/uav/shuxian.png" class="shuxian" style="width: 25px; height: 15px;">
...@@ -99,8 +98,10 @@ ...@@ -99,8 +98,10 @@
</div> </div>
</div> </div>
<div class="box_footer_content_down"> <div class="box_footer_content_down">
<el-button type="primary" size="large" style="width: 150px; color: #fff;" color="#06B0E1" @click="showUavMeiHuoInfo(UavInfoSelect)">实时灭火视频</el-button> <el-button type="primary" size="large" style="width: 150px; color: #fff;" color="#06B0E1"
<el-button type="primary" size="large" style="width: 150px; color: #fff;" color="#06B0E1" @click="showUavWorkTableInfo(UavInfoSelect)">查看详细记录</el-button> @click="showUavMeiHuoInfo(UavInfoSelect)">实时灭火视频</el-button>
<el-button type="primary" size="large" style="width: 150px; color: #fff;" color="#06B0E1"
@click="showUavWorkTableInfo(UavInfoSelect)">查看详细记录</el-button>
</div> </div>
</div> </div>
</div> </div>
...@@ -109,7 +110,7 @@ ...@@ -109,7 +110,7 @@
<div class="box_footer_right" style="height: 100%;width: 70%;"> <div class="box_footer_right" style="height: 100%;width: 70%;">
<div class="box_title">可视无人机调度栏</div> <div class="box_title">可视无人机调度栏</div>
<div class="box_footer_right_content"> <div class="box_footer_right_content">
<div class="box_footer_content_right" > <div class="box_footer_content_right">
<uavTaskShow :key="Date.now()" :showWorkUavInfo="CurWorkUavInfo" style="width: 100%;"></uavTaskShow> <uavTaskShow :key="Date.now()" :showWorkUavInfo="CurWorkUavInfo" style="width: 100%;"></uavTaskShow>
</div> </div>
...@@ -119,87 +120,53 @@ ...@@ -119,87 +120,53 @@
</div> </div>
<!-- 展示无人机的增加页面 --> <!-- 展示无人机的增加页面 -->
<el-drawer <el-drawer v-model="isAddUav" :with-header="false" direction="ttb" custom-class="top-center-drawer" size="auto"
v-model="isAddUav"
:with-header="false"
direction="ttb"
custom-class="top-center-drawer"
size="auto"
@close="closeAddNewUavInfo"> @close="closeAddNewUavInfo">
<div class="drawer-content"> <div class="drawer-content">
<el-form <el-form ref="addNewUavInfoRef" :model="addUavInfoList" :rules="uavAddRules" label-width="200px"
ref="addNewUavInfoRef" label-position="left">
:model="addUavInfoList"
:rules="uavAddRules"
label-width="200px"
label-position="left"
>
<!-- 编号 --> <!-- 编号 -->
<el-form-item label="无人机编号" prop="UavNum"> <el-form-item label="无人机编号" prop="UavNum">
<el-input <el-input v-model="addUavInfoList.UavNum" placeholder="请输入无人机编号" clearable>
v-model="addUavInfoList.UavNum"
placeholder="请输入无人机编号"
clearable>
</el-input> </el-input>
</el-form-item> </el-form-item>
<el-form-item label="无人机记录时间" > <el-form-item label="无人机记录时间">
<el-input <el-input :value="addUavInfoList.UavRecodeTime = dayjs().format('YYYY-MM-DD HH:mm:ss')" disabled>
:value="addUavInfoList.UavRecodeTime = dayjs().format('YYYY-MM-DD HH:mm:ss') "
disabled>
</el-input> </el-input>
</el-form-item> </el-form-item>
<el-form-item label="无人机状态" > <el-form-item label="无人机状态">
<el-input <el-input value="正常" placeholder="请输入无人机状态" disabled>
value="正常"
placeholder="请输入无人机状态"
disabled>
</el-input> </el-input>
</el-form-item> </el-form-item>
<el-form-item label="无人机载弹量" prop="uavBullet"> <el-form-item label="无人机载弹量" prop="uavBullet">
<el-input <el-input v-model="addUavInfoList.uavBullet" placeholder="请输入无人机载弹量" clearable>
v-model="addUavInfoList.uavBullet"
placeholder="请输入无人机载弹量"
clearable
>
</el-input> </el-input>
</el-form-item> </el-form-item>
<el-form-item label="无人机上次保养时间" > <el-form-item label="无人机上次保养时间">
<el-input <el-input :value="addUavInfoList.UavPreMaintain = dayjs().format('YYYY-MM-DD HH:mm:ss')" disabled>
:value="addUavInfoList.UavPreMaintain=dayjs().format('YYYY-MM-DD HH:mm:ss') "
disabled>
</el-input> </el-input>
</el-form-item> </el-form-item>
<el-form-item label="无人机上次加水时间" > <el-form-item label="无人机上次加水时间">
<el-input <el-input :value="addUavInfoList.UavWaterNumber = dayjs().format('YYYY-MM-DD HH:mm:ss')" disabled>
:value="addUavInfoList.UavWaterNumber = dayjs().format('YYYY-MM-DD HH:mm:ss') "
disabled>
</el-input> </el-input>
</el-form-item> </el-form-item>
<el-form-item label="无人机当前电量" prop="UavCurBattery"> <el-form-item label="无人机当前电量" prop="UavCurBattery">
<el-input <el-input v-model="addUavInfoList.UavCurBattery" placeholder="请输入无人机当前电量" clearable>
v-model="addUavInfoList.UavCurBattery"
placeholder="请输入无人机当前电量"
clearable>
</el-input> </el-input>
</el-form-item> </el-form-item>
<!-- 操作按钮（关键修改部分） --> <!-- 操作按钮（关键修改部分） -->
<el-form-item class="action-buttons"> <el-form-item class="action-buttons">
<el-button <el-button type="primary" @click="submitForm" style="flex: 1;">
type="primary"
@click="submitForm"
style="flex: 1;">
确认添加 确认添加
</el-button> </el-button>
<el-button <el-button @click="isAddUav = false" style="flex: 1; margin-left: 10px;">
@click="isAddUav = false"
style="flex: 1; margin-left: 10px;">
取消 取消
</el-button> </el-button>
</el-form-item> </el-form-item>
...@@ -209,35 +176,24 @@ ...@@ -209,35 +176,24 @@
<!-- 展示实时灭火信息 --> <!-- 展示实时灭火信息 -->
<el-dialog <el-dialog v-model="isShowUavdetailedInfo" width="1300px" align-center class="uav-detail-dialog"
v-model="isShowUavdetailedInfo" @close="closeUavdetailedInfo" style="background-color: rgba(0, 0, 0, 0);">
width="1300px"
align-center
class="uav-detail-dialog"
@close="closeUavdetailedInfo"
style="background-color: rgba(0, 0, 0, 0);"
>
<!-- 主内容区 --> <!-- 主内容区 -->
<div class="uav-detail-container"> <div class="uav-detail-container">
<!-- 无人机信息区块 --> <!-- 无人机信息区块 -->
<div class="uav-info-card"> <div class="uav-info-card">
<div class="section-header"> <div class="section-header">
<el-icon class="header-icon"><Monitor /></el-icon> <el-icon class="header-icon">
<Monitor />
</el-icon>
<span class="header-title">无人机信息</span> <span class="header-title">无人机信息</span>
</div> </div>
<div class="uav-content-grid"> <div class="uav-content-grid">
<div class="uav-table-section"> <div class="uav-table-section">
<UavTable <UavTable :UavInfoSelect="UavInfoSelect[0]" />
:UavInfoSelect="UavInfoSelect[0]"
/>
</div> </div>
<div class="uav-visual-section" > <div class="uav-visual-section">
<uavTaskShow <uavTaskShow :showWorkUavInfo="UavInfoSelect" />
:showWorkUavInfo="UavInfoSelect"
/>
</div> </div>
</div> </div>
</div> </div>
...@@ -245,33 +201,30 @@ ...@@ -245,33 +201,30 @@
<!-- 实时视频区块 --> <!-- 实时视频区块 -->
<div class="video-card"> <div class="video-card">
<div class="section-header"> <div class="section-header">
<el-icon class="header-icon"><VideoCamera /></el-icon> <el-icon class="header-icon">
<VideoCamera />
</el-icon>
<span class="header-title">实时灭火视频</span> <span class="header-title">实时灭火视频</span>
</div> </div>
<div class="video-content"> <div class="video-content">
<div class="video-wrapper elevated-card"> <div class="video-wrapper elevated-card">
<video <video controls class="video-player">
controls
class="video-player"
>
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4"> <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
</video> </video>
<div class="video-badge"> <div class="video-badge">
<el-tag type="danger" effect="dark" class="live-tag"> <el-tag type="danger" effect="dark" class="live-tag">
<el-icon><VideoPlay /></el-icon> <el-icon>
<VideoPlay />
</el-icon>
实时视频 实时视频
</el-tag> </el-tag>
</div> </div>
</div> </div>
<div class="video-controls"> <div class="video-controls">
<el-button <el-button type="primary" size="large" class="control-btn" @click="handleControl">
type="primary" <el-icon>
size="large" <Connection />
class="control-btn" </el-icon>
@click="handleControl"
>
<el-icon><Connection /></el-icon>
接管控制 接管控制
</el-button> </el-button>
</div> </div>
...@@ -282,34 +235,24 @@ ...@@ -282,34 +235,24 @@
</el-dialog> </el-dialog>
<!-- 展示无人机的具体的历史作业信息 --> <!-- 展示无人机的具体的历史作业信息 -->
<el-dialog <el-dialog v-model="isUavWorkDialogVisible" width="1300px" align-center class="uav-detail-dialog"
v-model="isUavWorkDialogVisible" @close="closeUavdetailedInfo" style="background-color: rgba(0, 0, 0, 0);">
width="1300px"
align-center
class="uav-detail-dialog"
@close="closeUavdetailedInfo"
style="background-color: rgba(0, 0, 0, 0);"
>
<!-- 主内容区 --> <!-- 主内容区 -->
<div class="uav-detail-container"> <div class="uav-detail-container">
<!-- 无人机信息区块 --> <!-- 无人机信息区块 -->
<div class="uav-info-card"> <div class="uav-info-card">
<div class="section-header"> <div class="section-header">
<el-icon class="header-icon"><Monitor /></el-icon> <el-icon class="header-icon">
<Monitor />
</el-icon>
<span class="header-title">无人机信息</span> <span class="header-title">无人机信息</span>
</div> </div>
<div class="uav-content-grid"> <div class="uav-content-grid">
<div class="uav-table-section"> <div class="uav-table-section">
<UavTable <UavTable :UavInfoSelect="UavInfoSelect[0]" />
:UavInfoSelect="UavInfoSelect[0]"
/>
</div> </div>
<div class="uav-visual-section" > <div class="uav-visual-section">
<uavTaskShow <uavTaskShow :showWorkUavInfo="UavInfoSelect" />
:showWorkUavInfo="UavInfoSelect"
/>
</div> </div>
</div> </div>
</div> </div>
...@@ -317,12 +260,14 @@ ...@@ -317,12 +260,14 @@
<!-- 实时视频区块 --> <!-- 实时视频区块 -->
<div class="video-card"> <div class="video-card">
<div class="section-header"> <div class="section-header">
<el-icon class="header-icon"><VideoCamera /></el-icon> <el-icon class="header-icon">
<VideoCamera />
</el-icon>
<span class="header-title">详细记录信息</span> <span class="header-title">详细记录信息</span>
</div> </div>
<div class="video-content1"> <div class="video-content1">
<uavWorkTable ></uavWorkTable> <uavWorkTable></uavWorkTable>
</div> </div>
</div> </div>
</div> </div>
...@@ -385,17 +330,17 @@ const showUavWorkTableInfo = () => { ...@@ -385,17 +330,17 @@ const showUavWorkTableInfo = () => {
} }
const addUavInfoList = ref({ const addUavInfoList = ref({
id:"", id: "",
UavNum: 'dfasdfasdfadfadsfd', UavNum: 'dfasdfasdfadfadsfd',
UavRecodeTime: "", UavRecodeTime: "",
UavCurState: 0, UavCurState: 0,
UavCruWorkState: 0, UavCruWorkState: 0,
UavPreMaintain:"", UavPreMaintain: "",
UavWaterNumber:"", UavWaterNumber: "",
UavCurBattery:0, UavCurBattery: 0,
isFiex:0, isFiex: 0,
active:0, active: 0,
uavBullet:0 uavBullet: 0
}) })
const addNewUavInfoRef = ref(null) const addNewUavInfoRef = ref(null)
...@@ -405,7 +350,7 @@ const closeAddNewUavInfo = () => { ...@@ -405,7 +350,7 @@ const closeAddNewUavInfo = () => {
} }
const submitForm = () => { const submitForm = () => {
// if (!formEl) returnaddNewUavInfoRef // if (!formEl) returnaddNewUavInfoRef
console.log("addUavInfoList---------------------****************----------------",addUavInfoList.value) console.log("addUavInfoList---------------------****************----------------", addUavInfoList.value)
addNewUavInfoRef.value.validate((valid) => { addNewUavInfoRef.value.validate((valid) => {
if (valid) { if (valid) {
addUavInfoList.value.id = Date.now() addUavInfoList.value.id = Date.now()
...@@ -418,7 +363,7 @@ const submitForm = () => { ...@@ -418,7 +363,7 @@ const submitForm = () => {
addNewUavInfoRef.value?.resetFields() addNewUavInfoRef.value?.resetFields()
isAddUav.value = false isAddUav.value = false
CurWorkUavInfo.value.unshift(addUavInfoList.value) CurWorkUavInfo.value.unshift(addUavInfoList.value)
}else { } else {
ElMessage({ ElMessage({
message: '请输入正确的无人机信息', message: '请输入正确的无人机信息',
type: 'error', type: 'error',
...@@ -427,7 +372,7 @@ const submitForm = () => { ...@@ -427,7 +372,7 @@ const submitForm = () => {
} }
}) })
} }
const route = useRoute(); const route = useRoute();
const router = useRouter(); const router = useRouter();
...@@ -439,7 +384,7 @@ onMounted(() => { ...@@ -439,7 +384,7 @@ onMounted(() => {
CurWorkUavInfo.value = CurWorkUavInfo.value.filter(item => item.id != route.query.uavId) CurWorkUavInfo.value = CurWorkUavInfo.value.filter(item => item.id != route.query.uavId)
CurWorkUavInfo.value.unshift(curSelsetOneUavInfo.value[0]) CurWorkUavInfo.value.unshift(curSelsetOneUavInfo.value[0])
UavInfoSelect.value = curSelsetOneUavInfo.value[0] UavInfoSelect.value = curSelsetOneUavInfo.value[0]
console.log("curSelsetOneUavInfo", curSelsetOneUavInfo.value,CurWorkUavInfo) console.log("curSelsetOneUavInfo", curSelsetOneUavInfo.value, CurWorkUavInfo)
} }
}) })
const isShowUavdetailedInfo = ref(false) const isShowUavdetailedInfo = ref(false)
...@@ -451,25 +396,25 @@ const addUvaHandFn = () => { ...@@ -451,25 +396,25 @@ const addUvaHandFn = () => {
isAddUav.value = true isAddUav.value = true
} }
function showUavMeiHuoInfo(UavInfoSelect){ function showUavMeiHuoInfo(UavInfoSelect) {
showOneUavTaskShowInfo.value = UavInfoSelect showOneUavTaskShowInfo.value = UavInfoSelect
isShowUavdetailedInfo.value = true isShowUavdetailedInfo.value = true
console.log("-----------------------------------------uavInfo",showOneUavTaskShowInfo.value ) console.log("-----------------------------------------uavInfo", showOneUavTaskShowInfo.value)
} }
// 当前页面展示的无人机信息 // 当前页面展示的无人机信息
const CurWorkUavInfo = ref([{ const CurWorkUavInfo = ref([{
id:1, id: 1,
UavNum: "001", UavNum: "001",
UavRecodeTime: 10, UavRecodeTime: 10,
UavCurState: 0, UavCurState: 0,
UavCruWorkState: 1, UavCruWorkState: 1,
UavPreMaintain:"20235153-03-01", UavPreMaintain: "20235153-03-01",
UavWaterNumber:"2023-03-01", UavWaterNumber: "2023-03-01",
UavCurBattery:100, UavCurBattery: 100,
isFiex:0, isFiex: 0,
active:1, active: 1,
uavBullet :3 uavBullet: 3
}, },
{ {
id: 2, id: 2,
...@@ -477,12 +422,12 @@ const CurWorkUavInfo = ref([{ ...@@ -477,12 +422,12 @@ const CurWorkUavInfo = ref([{
UavRecodeTime: 10, UavRecodeTime: 10,
UavCurState: 1, UavCurState: 1,
UavCruWorkState: 1, UavCruWorkState: 1,
UavPreMaintain:"2023-03-01", UavPreMaintain: "2023-03-01",
UavWaterNumber:"2023-03-01", UavWaterNumber: "2023-03-01",
UavCurBattery:100, UavCurBattery: 100,
isFiex:1, isFiex: 1,
active:2, active: 2,
uavBullet :3 uavBullet: 3
}, },
{ {
id: 3, id: 3,
...@@ -490,12 +435,12 @@ const CurWorkUavInfo = ref([{ ...@@ -490,12 +435,12 @@ const CurWorkUavInfo = ref([{
UavRecodeTime: 10, UavRecodeTime: 10,
UavCurState: 2, UavCurState: 2,
UavCruWorkState: 1, UavCruWorkState: 1,
UavPreMaintain:"2023-03-01", UavPreMaintain: "2023-03-01",
UavWaterNumber:"2023-03-01", UavWaterNumber: "2023-03-01",
UavCurBattery:100, UavCurBattery: 100,
isFiex:0, isFiex: 0,
active:3, active: 3,
uavBullet :3 uavBullet: 3
}, },
{ {
id: 4, id: 4,
...@@ -504,25 +449,25 @@ const CurWorkUavInfo = ref([{ ...@@ -504,25 +449,25 @@ const CurWorkUavInfo = ref([{
UavRecodeTime: 10, UavRecodeTime: 10,
UavCurState: 2, UavCurState: 2,
UavCruWorkState: 1, UavCruWorkState: 1,
UavPreMaintain:"2023-03-01", UavPreMaintain: "2023-03-01",
UavWaterNumber:"2023-03-01", UavWaterNumber: "2023-03-01",
UavCurBattery:100, UavCurBattery: 100,
isFiex:0, isFiex: 0,
active:4, active: 4,
uavBullet :3 uavBullet: 3
}, },
{ {
id:1, id: 1,
UavNum: "001", UavNum: "001",
UavRecodeTime: 10, UavRecodeTime: 10,
UavCurState: 0, UavCurState: 0,
UavCruWorkState: 1, UavCruWorkState: 1,
UavPreMaintain:"20235153-03-01", UavPreMaintain: "20235153-03-01",
UavWaterNumber:"2023-03-01", UavWaterNumber: "2023-03-01",
UavCurBattery:100, UavCurBattery: 100,
isFiex:0, isFiex: 0,
active:1, active: 1,
uavBullet :3 uavBullet: 3
}, },
{ {
id: 2, id: 2,
...@@ -530,12 +475,12 @@ const CurWorkUavInfo = ref([{ ...@@ -530,12 +475,12 @@ const CurWorkUavInfo = ref([{
UavRecodeTime: 10, UavRecodeTime: 10,
UavCurState: 1, UavCurState: 1,
UavCruWorkState: 1, UavCruWorkState: 1,
UavPreMaintain:"2023-03-01", UavPreMaintain: "2023-03-01",
UavWaterNumber:"2023-03-01", UavWaterNumber: "2023-03-01",
UavCurBattery:100, UavCurBattery: 100,
isFiex:1, isFiex: 1,
active:2, active: 2,
uavBullet :3 uavBullet: 3
}, },
{ {
id: 3, id: 3,
...@@ -543,12 +488,12 @@ const CurWorkUavInfo = ref([{ ...@@ -543,12 +488,12 @@ const CurWorkUavInfo = ref([{
UavRecodeTime: 10, UavRecodeTime: 10,
UavCurState: 2, UavCurState: 2,
UavCruWorkState: 1, UavCruWorkState: 1,
UavPreMaintain:"2023-03-01", UavPreMaintain: "2023-03-01",
UavWaterNumber:"2023-03-01", UavWaterNumber: "2023-03-01",
UavCurBattery:100, UavCurBattery: 100,
isFiex:0, isFiex: 0,
active:3, active: 3,
uavBullet :3 uavBullet: 3
}, },
{ {
id: 4, id: 4,
...@@ -557,25 +502,25 @@ const CurWorkUavInfo = ref([{ ...@@ -557,25 +502,25 @@ const CurWorkUavInfo = ref([{
UavRecodeTime: 10, UavRecodeTime: 10,
UavCurState: 2, UavCurState: 2,
UavCruWorkState: 1, UavCruWorkState: 1,
UavPreMaintain:"2023-03-01", UavPreMaintain: "2023-03-01",
UavWaterNumber:"2023-03-01", UavWaterNumber: "2023-03-01",
UavCurBattery:100, UavCurBattery: 100,
isFiex:0, isFiex: 0,
active:4, active: 4,
uavBullet :3 uavBullet: 3
}, },
{ {
id:1, id: 1,
UavNum: "001", UavNum: "001",
UavRecodeTime: 10, UavRecodeTime: 10,
UavCurState: 0, UavCurState: 0,
UavCruWorkState: 1, UavCruWorkState: 1,
UavPreMaintain:"20235153-03-01", UavPreMaintain: "20235153-03-01",
UavWaterNumber:"2023-03-01", UavWaterNumber: "2023-03-01",
UavCurBattery:100, UavCurBattery: 100,
isFiex:0, isFiex: 0,
active:1, active: 1,
uavBullet :3 uavBullet: 3
}, },
{ {
id: 2, id: 2,
...@@ -583,12 +528,12 @@ const CurWorkUavInfo = ref([{ ...@@ -583,12 +528,12 @@ const CurWorkUavInfo = ref([{
UavRecodeTime: 10, UavRecodeTime: 10,
UavCurState: 1, UavCurState: 1,
UavCruWorkState: 1, UavCruWorkState: 1,
UavPreMaintain:"2023-03-01", UavPreMaintain: "2023-03-01",
UavWaterNumber:"2023-03-01", UavWaterNumber: "2023-03-01",
UavCurBattery:100, UavCurBattery: 100,
isFiex:1, isFiex: 1,
active:2, active: 2,
uavBullet :3 uavBullet: 3
}, },
{ {
id: 3, id: 3,
...@@ -596,12 +541,12 @@ const CurWorkUavInfo = ref([{ ...@@ -596,12 +541,12 @@ const CurWorkUavInfo = ref([{
UavRecodeTime: 10, UavRecodeTime: 10,
UavCurState: 2, UavCurState: 2,
UavCruWorkState: 1, UavCruWorkState: 1,
UavPreMaintain:"2023-03-01", UavPreMaintain: "2023-03-01",
UavWaterNumber:"2023-03-01", UavWaterNumber: "2023-03-01",
UavCurBattery:100, UavCurBattery: 100,
isFiex:0, isFiex: 0,
active:3, active: 3,
uavBullet :3 uavBullet: 3
}, },
{ {
id: 4, id: 4,
...@@ -610,12 +555,12 @@ const CurWorkUavInfo = ref([{ ...@@ -610,12 +555,12 @@ const CurWorkUavInfo = ref([{
UavRecodeTime: 10, UavRecodeTime: 10,
UavCurState: 2, UavCurState: 2,
UavCruWorkState: 1, UavCruWorkState: 1,
UavPreMaintain:"2023-03-01", UavPreMaintain: "2023-03-01",
UavWaterNumber:"2023-03-01", UavWaterNumber: "2023-03-01",
UavCurBattery:100, UavCurBattery: 100,
isFiex:0, isFiex: 0,
active:4, active: 4,
uavBullet :3 uavBullet: 3
}, },
]) ])
...@@ -629,18 +574,18 @@ const UavInfoSelect = ref([{ ...@@ -629,18 +574,18 @@ const UavInfoSelect = ref([{
UavRecodeTime: 10, UavRecodeTime: 10,
UavCurState: 2, UavCurState: 2,
UavCruWorkState: 1, UavCruWorkState: 1,
UavPreMaintain:"2023-03-01", UavPreMaintain: "2023-03-01",
UavWaterNumber:"2023-03-01", UavWaterNumber: "2023-03-01",
UavCurBattery:100, UavCurBattery: 100,
isFiex:0, isFiex: 0,
active:4, active: 4,
uavBullet :3 uavBullet: 3
}]) }])
const StateColor = ref(["#FBFA22","#06B0E1","#C50D10"]) const StateColor = ref(["#FBFA22", "#06B0E1", "#C50D10"])
const UvaCurState = ref(2) const UvaCurState = ref(2)
const showUavdetailedInformation = (item) => { const showUavdetailedInformation = (item) => {
console.log("test",item) console.log("test", item)
UavInfoSelect.value.unshift(item) UavInfoSelect.value.unshift(item)
UavInfoSelect.value.splice(1, 1) UavInfoSelect.value.splice(1, 1)
// UavInfoSelect.value.shift(item) // UavInfoSelect.value.shift(item)
...@@ -649,8 +594,6 @@ const showUavdetailedInformation = (item) => { ...@@ -649,8 +594,6 @@ const showUavdetailedInformation = (item) => {
</script> </script>
<style scoped> <style scoped>
/* 外层容器 */ /* 外层容器 */
.uavshow { .uavshow {
width: 100%; width: 100%;
...@@ -665,7 +608,8 @@ const showUavdetailedInformation = (item) => { ...@@ -665,7 +608,8 @@ const showUavdetailedInformation = (item) => {
.uavlist { .uavlist {
width: 100%; width: 100%;
height: 100%; height: 100%;
position: relative; /* 关键2: 为滚动条提供定位上下文 */ position: relative;
/* 关键2: 为滚动条提供定位上下文 */
} }
/* Element Plus 滚动条容器 */ /* Element Plus 滚动条容器 */
...@@ -712,9 +656,10 @@ const showUavdetailedInformation = (item) => { ...@@ -712,9 +656,10 @@ const showUavdetailedInformation = (item) => {
} }
.contenter{ .contenter {
height: 351px; height: 351px;
} }
.contenterTitle { .contenterTitle {
display: flex; display: flex;
justify-content: flex-start; justify-content: flex-start;
...@@ -722,6 +667,7 @@ const showUavdetailedInformation = (item) => { ...@@ -722,6 +667,7 @@ const showUavdetailedInformation = (item) => {
height: 303px; height: 303px;
} }
.title1 { .title1 {
width: 100px; width: 100px;
height: 25px; height: 25px;
...@@ -762,8 +708,10 @@ const showUavdetailedInformation = (item) => { ...@@ -762,8 +708,10 @@ const showUavdetailedInformation = (item) => {
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
color: white; /* 根据需要调整 */ color: white;
/* 根据需要调整 */
} }
.text { .text {
font-size: 14px; font-size: 14px;
} }
...@@ -788,7 +736,8 @@ const showUavdetailedInformation = (item) => { ...@@ -788,7 +736,8 @@ const showUavdetailedInformation = (item) => {
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
color: white; /* 根据需要调整 */ color: white;
/* 根据需要调整 */
overflow: hidden; overflow: hidden;
} }
...@@ -802,77 +751,110 @@ const showUavdetailedInformation = (item) => { ...@@ -802,77 +751,110 @@ const showUavdetailedInformation = (item) => {
padding-left: 10%; padding-left: 10%;
display: flex; display: flex;
align-items: center; /* 垂直居中 */ align-items: center;
/* 垂直居中 */
justify-content: center; justify-content: center;
overflow: hidden; overflow: hidden;
} }
.uav-icon { .uav-icon {
width: 5%; /* 图片固定占5%宽度 */ width: 5%;
height: auto; /* 高度自动保持比例 */ /* 图片固定占5%宽度 */
min-width: 15px; /* 最小宽度，防止图片过小 */ height: auto;
max-width: 24px; /* 最大宽度，防止图片过大 */ /* 高度自动保持比例 */
margin-right: 10px; /* 图片与文字间距 */ min-width: 15px;
/* 最小宽度，防止图片过小 */
max-width: 24px;
/* 最大宽度，防止图片过大 */
margin-right: 10px;
/* 图片与文字间距 */
} }
.uav-number { .uav-number {
flex: 1; /* 文字区域占剩余所有空间 */ flex: 1;
white-space: nowrap; /* 防止文字换行 */ /* 文字区域占剩余所有空间 */
overflow: hidden; /* 超出部分隐藏 */ white-space: nowrap;
text-overflow: ellipsis; /* 超出显示省略号 */ /* 防止文字换行 */
font-size: clamp(12px, 1vw, 16px); /* 响应式字体大小 */ overflow: hidden;
/* 超出部分隐藏 */
text-overflow: ellipsis;
/* 超出显示省略号 */
font-size: clamp(12px, 1vw, 16px);
/* 响应式字体大小 */
} }
.second-item{ .second-item {
flex: 0 0 45%;; /* 其他div平分剩余空间 */ flex: 0 0 45%;
;
/* 其他div平分剩余空间 */
display: flex; display: flex;
align-items: center; /* 垂直居中 */ align-items: center;
/* 垂直居中 */
width: 105.89px; width: 105.89px;
height: 90px; height: 90px;
background-image: url('../../static/image/uav/uav.png'); background-image: url('../../static/image/uav/uav.png');
background-size: cover; /* 或者使用 contain */ background-size: cover;
background-position: center; /* 图片居中 */ /* 或者使用 contain */
background-repeat: no-repeat; /* 防止图片重复 */ background-position: center;
/* 图片居中 */
background-repeat: no-repeat;
/* 防止图片重复 */
/* background-color: #1976d2; */ /* background-color: #1976d2; */
} }
.third-item { .third-item {
margin-top: 15px; margin-top: 15px;
display: flex; /* 容器使用 Flex 布局 */ display: flex;
/* 容器使用 Flex 布局 */
width: 50%; width: 50%;
min-height: 36px; /* 设置最小高度（根据需求调整），确保垂直居中有效 */ min-height: 36px;
/* 设置最小高度（根据需求调整），确保垂直居中有效 */
padding: 0 8px; padding: 0 8px;
box-sizing: border-box; box-sizing: border-box;
display: flex; /* 子元素用 Flex 实现自身内容居中 */ display: flex;
justify-content: center; /* 水平居中 */ /* 子元素用 Flex 实现自身内容居中 */
align-items: center; /* 垂直居中 */ justify-content: center;
/* 水平居中 */
align-items: center;
/* 垂直居中 */
} }
/* "状态显示" 区域：占5%宽度，文字垂直水平居中 */ /* "状态显示" 区域：占5%宽度，文字垂直水平居中 */
.state-label { .state-label {
width: 15%; /* 固定占比 */ width: 15%;
min-width: 50px; /* 最小宽度，防止挤压 */ /* 固定占比 */
display: flex; /* 子元素用 Flex 实现自身内容居中 */ min-width: 50px;
justify-content: center; /* 水平居中 */ /* 最小宽度，防止挤压 */
align-items: center; /* 垂直居中 */ display: flex;
/* 子元素用 Flex 实现自身内容居中 */
justify-content: center;
/* 水平居中 */
align-items: center;
/* 垂直居中 */
font-size: 15px; font-size: 15px;
white-space: nowrap; /* 禁止文字换行 */ white-space: nowrap;
/* 禁止文字换行 */
} }
/* 无人机编号区域：占剩余宽度，文字垂直水平居中 */ /* 无人机编号区域：占剩余宽度，文字垂直水平居中 */
.state-value { .state-value {
flex: 1; /* 占剩余空间 */ flex: 1;
display: flex; /* 子元素用 Flex 实现自身内容居中 */ /* 占剩余空间 */
justify-content: center; /* 水平居左（或改为 center 完全居中） */ display: flex;
align-items: center; /* 垂直居中 */ /* 子元素用 Flex 实现自身内容居中 */
justify-content: center;
/* 水平居左（或改为 center 完全居中） */
align-items: center;
/* 垂直居中 */
font-size: 15px; font-size: 15px;
padding-left: 4px; padding-left: 4px;
margin-left: 15px; /* 与左侧标签间距 */ margin-left: 15px;
/* 与左侧标签间距 */
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
...@@ -885,12 +867,14 @@ const showUavdetailedInformation = (item) => { ...@@ -885,12 +867,14 @@ const showUavdetailedInformation = (item) => {
.third-item { .third-item {
min-height: 30px; min-height: 30px;
} }
.state-label, .state-value {
.state-label,
.state-value {
font-size: 12px; font-size: 12px;
} }
} }
.box_footer{ .box_footer {
width: 100%; width: 100%;
height: 470px; height: 470px;
display: flex; display: flex;
...@@ -902,55 +886,63 @@ const showUavdetailedInformation = (item) => { ...@@ -902,55 +886,63 @@ const showUavdetailedInformation = (item) => {
width: 41.7%; width: 41.7%;
height: 100%; height: 100%;
color: #ffffff; color: #ffffff;
margin-right:24px ; margin-right: 24px;
line-height: 25px; line-height: 25px;
border-radius: 5px; border-radius: 5px;
border: 1px #06B0E1 solid ; border: 1px #06B0E1 solid;
} }
.box_footer_content{ .box_footer_content {
margin-left: 24px; margin-left: 24px;
width: 100%; width: 100%;
height: 60%; height: 60%;
} }
.box_footer_content_right{
.box_footer_content_right {
/* margin-left: 24px; */ /* margin-left: 24px; */
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
.box_footer_content_up{
.box_footer_content_up {
margin-left: 30px; margin-left: 30px;
width: 80%; width: 80%;
height: 100%; height: 100%;
color: #ffffff; color: #ffffff;
display: flex; display: flex;
flex-direction: column; /* 使容器为垂直方向的 Flex 容器 */ flex-direction: column;
justify-content: center; /* 垂直居中 */ /* 使容器为垂直方向的 Flex 容器 */
justify-content: center;
/* 垂直居中 */
overflow: hidden; overflow: hidden;
/* align-items: center; 水平居中 */ /* align-items: center; 水平居中 */
/* text-align: center; 文字水平居中 */ /* text-align: center; 文字水平居中 */
} }
td{
td {
/* width: 33.3%; */ /* width: 33.3%; */
/* height: %; */ /* height: %; */
text-align: center; text-align: center;
} }
.td_shuxian{
.td_shuxian {
width: 1px; width: 1px;
background-color: aquamarine; background-color: aquamarine;
} }
.shuxian{
.shuxian {
width: 5px; width: 5px;
height: 20px; height: 20px;
display: flex; display: flex;
flex-direction: column; /* 使容器为垂直方向的 Flex 容器 */ flex-direction: column;
/* 使容器为垂直方向的 Flex 容器 */
justify-content: center; justify-content: center;
} }
...@@ -959,21 +951,23 @@ td{ ...@@ -959,21 +951,23 @@ td{
height: 100%; height: 100%;
width: 100%; width: 100%;
overflow: auto; overflow: auto;
position: relative; /* 为内部绝对定位元素提供参考 */ position: relative;
/* 为内部绝对定位元素提供参考 */
} }
/* 可选：美化滚动条（仅支持WebKit浏览器） */ /* 可选：美化滚动条（仅支持WebKit浏览器） */
.box_footer_content_right::-webkit-scrollbar { .box_footer_content_right::-webkit-scrollbar {
width: 6px; width: 6px;
} }
.box_footer_content_right::-webkit-scrollbar-thumb { .box_footer_content_right::-webkit-scrollbar-thumb {
background: rgba(0,0,0,0.2); background: rgba(0, 0, 0, 0.2);
border-radius: 3px; border-radius: 3px;
} }
.box_title{ .box_title {
width: 100%; width: 100%;
height: 10%; height: 10%;
...@@ -987,13 +981,16 @@ td{ ...@@ -987,13 +981,16 @@ td{
border-radius: 4px; border-radius: 4px;
display: flex; display: flex;
/* justify-content: center; 水平居中 */ /* justify-content: center; 水平居中 */
align-items: center; /* 垂直居中 */ align-items: center;
/* 垂直居中 */
} }
.box_title1{
.box_title1 {
width: 100%; width: 100%;
height: 13%; height: 13%;
} }
.box_footer_content_down{
.box_footer_content_down {
width: 80%; width: 80%;
overflow: hidden; overflow: hidden;
/* margin-top: -15%; */ /* margin-top: -15%; */
...@@ -1006,27 +1003,34 @@ td{ ...@@ -1006,27 +1003,34 @@ td{
/* background-color: #000000; */ /* background-color: #000000; */
} }
.box_footer_right_content{ .box_footer_right_content {
width: 100%; width: 100%;
height: 90%; height: 90%;
/* margin-top: 14px; */ /* margin-top: 14px; */
color: #ffffff; color: #ffffff;
display: flex; display: flex;
flex-direction: column; /* 使容器为垂直方向的 Flex 容器 */ flex-direction: column;
justify-content: center; /* 垂直居中 */ /* 使容器为垂直方向的 Flex 容器 */
align-items: center; /* 水平居中 */ justify-content: center;
text-align: center; /* 文字水平居中 */ /* 垂直居中 */
align-items: center;
/* 水平居中 */
text-align: center;
/* 文字水平居中 */
/* background-color: #082B4F; */ /* background-color: #082B4F; */
border: 1px #06B0E1 solid ; border: 1px #06B0E1 solid;
border-radius: 4px; border-radius: 4px;
} }
.item{
border-bottom: 1px #979797 solid ; .item {
border-bottom: 1px #979797 solid;
width: 80%; width: 80%;
display: flex; display: flex;
align-items: center; /* 垂直居中 */ align-items: center;
/* 垂直居中 */
} }
.infinite-list { .infinite-list {
height: 100%; height: 100%;
width: 100%; width: 100%;
...@@ -1034,6 +1038,7 @@ td{ ...@@ -1034,6 +1038,7 @@ td{
margin: 0; margin: 0;
list-style: none; list-style: none;
} }
.infinite-list .infinite-list-item { .infinite-list .infinite-list-item {
display: flex; display: flex;
align-items: center; align-items: center;
...@@ -1049,7 +1054,7 @@ td{ ...@@ -1049,7 +1054,7 @@ td{
align-items: center; align-items: center;
justify-content: center; justify-content: center;
height: 175px; height: 175px;
background-color:rgb(1, 42, 73); background-color: rgb(1, 42, 73);
/* opacity: 0.45; */ /* opacity: 0.45; */
margin: 10px; margin: 10px;
...@@ -1060,28 +1065,34 @@ td{ ...@@ -1060,28 +1065,34 @@ td{
height: 100%; height: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; /* 水平居中 */ align-items: center;
justify-content: center; /* 垂直居中 */ /* 水平居中 */
justify-content: center;
/* 垂直居中 */
} }
.flex-item2 { .flex-item2 {
flex: 1; /* 每个div平分剩余空间 */ flex: 1;
/* 每个div平分剩余空间 */
/* 添加其他样式，如边框等 */ /* 添加其他样式，如边框等 */
} }
.first-item2 { .first-item2 {
flex: 0 0 20%; /* 第一个div占20%的空间 */ flex: 0 0 20%;
/* 第一个div占20%的空间 */
/* background-color: red; 设置背景颜色 */ /* background-color: red; 设置背景颜色 */
} }
.second-item2 { .second-item2 {
flex: 0 0 60%; /* 第二个div占60%的空间 */ flex: 0 0 60%;
/* 第二个div占60%的空间 */
margin-top: 50px; margin-top: 50px;
} }
.infinite-list .infinite-list-item + .list-item { .infinite-list .infinite-list-item+.list-item {
margin-top: 10px; margin-top: 10px;
} }
...@@ -1089,9 +1100,12 @@ td{ ...@@ -1089,9 +1100,12 @@ td{
margin-top: 20px; margin-top: 20px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; /* 水平居中 */ align-items: center;
justify-content: center; /* 垂直居中 */ /* 水平居中 */
height: 100%; /* 根据需要调整 */ justify-content: center;
/* 垂直居中 */
height: 100%;
/* 根据需要调整 */
color: #ffffff; color: #ffffff;
} }
...@@ -1109,6 +1123,7 @@ td{ ...@@ -1109,6 +1123,7 @@ td{
.step-icon:hover { .step-icon:hover {
transform: scale(1.1); transform: scale(1.1);
} }
.step-icon1 { .step-icon1 {
/* width: 200% !important; /* width: 200% !important;
height: auto !important; */ height: auto !important; */
...@@ -1119,8 +1134,10 @@ td{ ...@@ -1119,8 +1134,10 @@ td{
.step-icon1:hover { .step-icon1:hover {
transform: scale(0.95); transform: scale(0.95);
cursor: pointer; /* 鼠标悬停时显示手型 */ cursor: pointer;
transition: all 0.3s ease; /* 平滑过渡效果 */ /* 鼠标悬停时显示手型 */
transition: all 0.3s ease;
/* 平滑过渡效果 */
} }
...@@ -1143,6 +1160,7 @@ td{ ...@@ -1143,6 +1160,7 @@ td{
padding: 10px; padding: 10px;
flex: 1; flex: 1;
} }
:deep(.el-step__title) { :deep(.el-step__title) {
color: #fff !important; color: #fff !important;
font-size: 13px; font-size: 13px;
...@@ -1175,6 +1193,7 @@ td{ ...@@ -1175,6 +1193,7 @@ td{
-webkit-text-fill-color: transparent; -webkit-text-fill-color: transparent;
} }
} }
.uav-detail-dialog { .uav-detail-dialog {
/* :deep(.el-dialog__header) { /* :deep(.el-dialog__header) {
...@@ -1211,7 +1230,8 @@ td{ ...@@ -1211,7 +1230,8 @@ td{
-webkit-text-fill-color: transparent; -webkit-text-fill-color: transparent;
} }
} }
.uav-visual-section{
.uav-visual-section {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
...@@ -1232,7 +1252,7 @@ td{ ...@@ -1232,7 +1252,7 @@ td{
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 1fr;
gap: 16px; gap: 16px;
> div { >div {
padding: 16px; padding: 16px;
} }
} }
...@@ -1282,6 +1302,7 @@ td{ ...@@ -1282,6 +1302,7 @@ td{
height: 48px; height: 48px;
font-size: 16px; font-size: 16px;
margin-right: 20px; margin-right: 20px;
i { i {
margin-right: 8px; margin-right: 8px;
} }
...@@ -1295,7 +1316,8 @@ td{ ...@@ -1295,7 +1316,8 @@ td{
text-align: right; text-align: right;
border-top: 1px solid rgba(255, 255, 255, 0.1); border-top: 1px solid rgba(255, 255, 255, 0.1);
} }
.uav-table-section{
.uav-table-section {
border-radius: 8px; border-radius: 8px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
border: 1px solid rgba(64, 158, 255, 0.2); border: 1px solid rgba(64, 158, 255, 0.2);
...@@ -1305,10 +1327,12 @@ td{ ...@@ -1305,10 +1327,12 @@ td{
.uav-info-card { .uav-info-card {
margin-bottom: 10px; margin-bottom: 10px;
.uav-content-grid { .uav-content-grid {
display: grid; display: grid;
grid-template-columns: 0.5fr 1fr; grid-template-columns: 0.5fr 1fr;
> div {
>div {
padding: 5px; padding: 5px;
} }
} }
...@@ -1359,6 +1383,4 @@ td{ ...@@ -1359,6 +1383,4 @@ td{
} }
} }
} }
</style> </style>
\ No newline at end of file
src/views/uavshowdate/index.vue
浏览文件 @ 8b7268d4
...@@ -259,7 +259,7 @@ const containerStyle = computed(() => ({ ...@@ -259,7 +259,7 @@ const containerStyle = computed(() => ({
.main-content { .main-content {
display: flex; display: flex;
gap: var(--card-spacing); gap: var(--card-spacing);
padding: 0.4rem; padding: 0.4rem 0;
height: 100vh; height: 100vh;
box-sizing: border-box; box-sizing: border-box;
} }
......
src/views/uavshowdate/uavmanage/index.vue
浏览文件 @ 8b7268d4
...@@ -282,7 +282,7 @@ const containerStyle = computed(() => ({ ...@@ -282,7 +282,7 @@ const containerStyle = computed(() => ({
.main-content { .main-content {
display: flex; display: flex;
gap: var(--card-spacing); gap: var(--card-spacing);
padding: 0.4rem; padding: 0.4rem 0;
height: 100vh; height: 100vh;
box-sizing: border-box; box-sizing: border-box;
} }
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论