Skip to content

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

左侧和头部样式

上级 e79e30ac
隐藏空白字符变更
内嵌 并排
正在显示 包含 1127 行增加 和 1003 行删除
src/layout/index.vue
浏览文件 @ 8b7268d4
<template>
<div class="allmain">
<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="tip2">国际花园小区</div>
<div class="avatar-container" v-if="useAppStore.isCurUserLogin">
<el-dropdown>
<el-avatar shape="square" size="large"
:src="useAppStoreInstance.userInfo.avatar ? useAppStoreInstance.userInfo.avatar : useAppStoreInstance.showavatarUrl" />
<div class="avatar-container" v-if="useAppStore.isCurUserLogin" style="display: flex;">
<el-avatar shape="square" size="large" style="border-radius: 50%;width: 40px;height: 40px;"
: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>
<el-dropdown-menu>
<el-dropdown-item @click="toSatffManage">人员管理</el-dropdown-item>
......@@ -26,7 +35,6 @@
<img :src="item.icon" alt="">
</el-icon>
<span class="menu-text">{{ item.name }}</span>
<el-icon class="arrow-icon" :class="openMenus[index] ? 'rotate' : ''">
<ArrowRight />
</el-icon>
......@@ -54,22 +62,22 @@
</el-breadcrumb-item>
</el-breadcrumb>
</div>
<!-- 标签页 -->
<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">
<el-tab-pane v-for="tab in tabs" :key="tab.key" :label="tab.label" :name="tab.key">
</el-tab-pane>
</el-tabs>
</div>
<div class="right-content">
<router-view v-slot="{ Component, route }" :key="$route.fullPath">
<keep-alive>
<component v-if="!route.meta.link" :is="Component" :key="route.path" />
</keep-alive>
</router-view>
<div class="rightMain">
<div class="right-content">
<router-view v-slot="{ Component, route }" :key="$route.fullPath">
<keep-alive>
<component v-if="!route.meta.link" :is="Component" :key="route.path" />
</keep-alive>
</router-view>
</div>
</div>
</div>
</div>
......@@ -86,14 +94,13 @@ import { getToken, removeToken } from '../utils/auth';
const router = useRouter();
const route = useRoute();
const useAppStoreInstance = useAppStore();
// 菜单结构
const menuList = ref([
{
name: '仪表盘',
id: 'dashboard',
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: [
{ name: '分析页', id: 'analysis', path: '/dashboard/analysis' },
{ name: '工作台', id: 'workbench', path: '/dashboard/workbench' },
......@@ -103,7 +110,7 @@ const menuList = ref([
name: '系统管理',
id: 'system',
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: [
{ name: '用户管理', id: 'user', path: '/systemmanage/staffManage' },
]
......@@ -112,7 +119,7 @@ const menuList = ref([
name: '建筑管理',
id: 'building',
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: [
{ name: '区域建筑管理', id: 'areaBuilding', path: '/areabuildmanage' },
]
......@@ -121,7 +128,7 @@ const menuList = ref([
name: '无人机管理',
id: 'drone',
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: [
{ name: '无人机调度', id: 'droneDispatch', path: '/uavshowdate' },
{ name: '无人机监控', id: 'droneMonitor', path: '/uavshowdate/uavmanage' }
......@@ -131,7 +138,7 @@ const menuList = ref([
name: '火情管理',
id: 'fire',
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: [
{ name: '当前火情', id: 'fireHistory', path: '/areafiremanage/historyfire' },
......@@ -140,7 +147,8 @@ const menuList = ref([
]
},
]);
//账号名称
const userName = ref()
const openMenus = ref([]);
const breadcrumbs = ref([]);
const tabs = ref([]);
......@@ -365,8 +373,10 @@ onMounted(() => {
nextTick(() => {
useAppStoreInstance.initavatarUrlFn()
})
//回显登录人名称
if (localStorage.getItem('user') && JSON.parse(localStorage.getItem('user'))) {
userName.value = JSON.parse(localStorage.getItem('user'))?.name
}
// 初始化菜单展开状态
menuList.value.forEach((_, index) => {
openMenus.value[index] = false;
......@@ -416,10 +426,10 @@ watch(route, () => {
margin: 0;
padding: 0;
overflow: hidden;
background: #051d39;
background-image:
background: #222222 !important;
/* background-image:
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;
display: flex;
flex-direction: column;
......@@ -428,9 +438,11 @@ watch(route, () => {
.tip {
width: 100%;
height: 9vh;
height: 7vh;
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;
align-items: center;
position: relative;
......@@ -439,6 +451,7 @@ watch(route, () => {
z-index: 10;
box-shadow: 0 2px 15px rgba(0, 0, 0, 0.3);
border-bottom: 1px solid rgba(6, 176, 225, 0.15);
margin-bottom: 3px;
}
.tip::before {
......@@ -448,34 +461,53 @@ watch(route, () => {
left: 0;
right: 0;
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 {
font-weight: bold;
background: linear-gradient(to bottom, #FFFFFF 40%, #96CBFF 100%);
background-clip: text;
-webkit-background-clip: text;
color: transparent;
/* background: linear-gradient(to bottom, #FFFFFF 40%, #96CBFF 100%); */
/* background-clip: text; */
/* -webkit-background-clip: text; */
/* color: transparent; */
font-size: clamp(24px, 1.2vw, 32px);
white-space: nowrap;
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;
background-image: url('../static/image/topTitle.png');
background-size: contain;
background-repeat: no-repeat;
background-size: 100% 100%;
}
.tip2 {
background: rgba(255, 255, 255, 0.1);
/* background: rgba(255, 255, 255, 0.1); */
backdrop-filter: blur(5px);
padding: 5px 20px;
height: 36px;
line-height: 25px;
padding: 20px 20px;
height: 40px;
line-height: 0px;
text-align: center;
font-size: clamp(16px, 1.5vw, 20px);
white-space: nowrap;
color: #ffffff;
text-shadow: 0 0 8px rgba(6, 176, 225, 0.5);
border-radius: 18px;
box-shadow: 0 0 10px rgba(6, 176, 225, 0.1);
/* border-radius: 18px; */
/* 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 {
......@@ -489,7 +521,7 @@ watch(route, () => {
.avatar-container:hover {
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 {
......@@ -506,12 +538,12 @@ watch(route, () => {
display: flex;
flex-direction: column;
flex-shrink: 0;
/* background: linear-gradient(180deg, #0a2a4a 0%, #0d3053 100%); */
background: #2d2d34;
box-shadow: 2px 0 15px rgba(0, 0, 0, 0.3);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
/* z-index: 5; */
border-right: 1px solid rgba(6, 176, 225, 0.1);
color: black;
color: #ffffff;
}
.left1 {
......@@ -537,8 +569,9 @@ watch(route, () => {
}
.menu-item-container {
margin-bottom: 8px;
padding: 0 5px;
margin-bottom: 2px;
/* padding: 0 5px; */
color: #ffffff;
}
.menu,
......@@ -546,7 +579,8 @@ watch(route, () => {
height: 56px;
display: flex;
align-items: center;
padding: 0 20px;
/* padding: 0 20px; */
color: #ffffff;
cursor: pointer;
font-size: clamp(14px, 1.2vw, 16px);
white-space: nowrap;
......@@ -554,27 +588,40 @@ watch(route, () => {
text-overflow: ellipsis;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
border-radius: 12px;
margin: 0 5px;
/* border-radius: 12px; */
/* margin: 0 5px; */
border-bottom: 1px solid #424248;
}
.menu_left-icon img {
width: 100%;
height: 100%;
object-fit: cover;
padding-left: 10%;
}
.menu:hover,
.submenu-title:hover {
background: rgba(5, 113, 196, 0.2);
background: #3a3852;
transform: translateX(3px);
}
.menu.active,
.submenu-title.active {
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);
background: #3a3852;
/* 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,
......@@ -585,9 +632,9 @@ watch(route, () => {
top: 15%;
height: 70%;
width: 4px;
background: linear-gradient(180deg, #06b0e1 0%, #0571c4 100%);
border-radius: 0 6px 6px 0;
box-shadow: 0 0 10px rgba(6, 176, 225, 0.5);
/* background: linear-gradient(180deg, #06b0e1 0%, #0571c4 100%); */
/* border-radius: 0 6px 6px 0; */
/* box-shadow: 0 0 10px rgba(6, 176, 225, 0.5); */
}
.menu el-icon,
......@@ -600,12 +647,17 @@ watch(route, () => {
.menu .menu-text,
.submenu-title .menu-text {
color: black;
color: #ffffff;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
flex: 1;
position: relative;
z-index: 2;
padding-left: 10%;
padding-left: 5%;
}
.submenu-title {
padding-left: 7%;
}
.menu.active .menu-text,
......@@ -623,16 +675,17 @@ watch(route, () => {
.arrow-icon {
font-size: 18px;
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
color: black;
color: #ffffff;
}
.rotate {
transform: rotate(90deg);
color: #06b0e1;
/* color: #06b0e1; */
color: #ffffff;
}
.submenu-list {
background: #f1f0f0;
background: #6c62f5;
backdrop-filter: blur(5px);
/* padding: 5px 0; */
......@@ -646,26 +699,28 @@ watch(route, () => {
height: 42px;
line-height: 42px;
padding-left: 40px;
color: #000000;
color: #ffffff;
background-color: #2d2d34;
cursor: pointer;
font-size: 14px;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
border-radius: 8px;
margin: 0 5px;
/* border-radius: 8px; */
/* margin: 0 5px; */
/* border-bottom: 1px solid #424248; */
}
.submenu-item:hover {
background: rgba(5, 113, 196, 0.2);
background: #6c62f5;
color: #e6f7ff;
padding-left: 45px;
/* padding-left: 45px; */
transform: translateX(3px);
}
.submenu-item.active {
color: #06b0e1;
color: #ffffff;
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 {
......@@ -707,20 +762,25 @@ watch(route, () => {
min-width: 0;
display: flex;
flex-direction: column;
background: #ffffff;
background: #222222;
overflow: hidden;
}
.rightMain {
padding: 20px;
}
.breadcrumb-container {
color: #000000;
color: #ffffff;
/* padding-left: 15px; */
padding: 10px;
background: #fff;
border-bottom: 1px solid rgb(180, 178, 178);
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); */
}
.el-breadcrumb {
color: #000000;
color: #ffffff;
}
.el-breadcrumb__item {
......@@ -730,8 +790,12 @@ watch(route, () => {
border-radius: 4px;
}
:deep() .el-breadcrumb__item .el-breadcrumb__inner {
color: #ffffff;
}
.el-breadcrumb__item:hover:not(.el-breadcrumb__item:last-child) {
color: #06b0e1;
color: #06b0e1 !important;
background: rgba(6, 176, 225, 0.1);
text-shadow: 0 0 5px rgba(6, 176, 225, 0.5);
}
......@@ -742,6 +806,12 @@ watch(route, () => {
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 {
color: rgba(158, 200, 230, 0.5);
margin: 0 10px;
......@@ -749,24 +819,34 @@ watch(route, () => {
/* 标签页样式 */
.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; */
background-color: #313136;
}
.el-tabs__item {
:deep() .el-tabs__item {
height: 40px;
line-height: 40px;
color: #b3cfe5;
color: #ffffff;
border-radius: 12px 12px 0 0;
margin-right: 8px;
/* margin-right: 10px; */
/* border-bottom: none !important; */
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 {
......@@ -804,8 +884,6 @@ watch(route, () => {
.right-content {
overflow: hidden;
height: 100%;
}
......@@ -829,6 +907,7 @@ watch(route, () => {
.menu-text,
.arrow-icon {
display: none;
}
......
src/views/areabuildmanage/components/showdetaildate.vue
浏览文件 @ 8b7268d4
......@@ -240,7 +240,7 @@ watch(route, () => {
.main-content {
display: flex;
gap: var(--card-spacing);
padding: 0.4rem;
padding: 0.4rem 0;
height: 100vh;
box-sizing: border-box;
}
......
src/views/areabuildmanage/index.vue
浏览文件 @ 8b7268d4
......@@ -230,7 +230,7 @@ const containerStyle = computed(() => ({
.main-content {
display: flex;
gap: var(--card-spacing);
padding: 0.4rem;
padding: 0.4rem 0;
height: 100vh;
box-sizing: border-box;
}
......
src/views/areabuildmanage/onefloor/index.vue
浏览文件 @ 8b7268d4
......@@ -232,7 +232,7 @@ const containerStyle = computed(() => ({
.main-content {
display: flex;
gap: var(--card-spacing);
padding: 0.4rem;
padding: 0.4rem 0;
height: 100vh;
box-sizing: border-box;
}
......
src/views/areafiremanage/firerecord/index.vue
浏览文件 @ 8b7268d4
......@@ -7,26 +7,27 @@
<div class="left-top">
<!-- 区域信息概览 -->
<div class="info-card region-overview">
<searchtop :searchShowData="searchShowData" ></searchtop>
<searchtop :searchShowData="searchShowData"></searchtop>
</div>
</div>
<!-- 左侧下部分：统计区域 -->
<div class="info-card stats-alerts">
<div class="card-tabs">
<span class="title">火情上报记录</span>
<el-button type="primary" @click="archiveHandleAddInfoFn">归档</el-button>
</div>
<div class="card-table">
<tableshow :tableShowData="tableShowData" @archiveInfoDateBackcallFn="archiveInfoDateBackcallFn"></tableshow>
<tableshow :tableShowData="tableShowData" @archiveInfoDateBackcallFn="archiveInfoDateBackcallFn">
</tableshow>
</div>
</div>
</div>
</main>
<!-- 归档区域 -->
</div>
</template>
......@@ -40,12 +41,12 @@ import tableshow from './components/tableshow.vue';
const searchShowData = ref([
{ label: '火情描述', placeholder: "请输入", type: 'input', content: '',isShow: true },
{ label: '上报人', placeholder: "请输入", type: 'input', 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: '1'}, {label: '二级火情', value: '2'}, {label: '三级火情', value: '3'}]},
{ label: '火情描述', placeholder: "请输入", type: 'input', content: '', isShow: true },
{ label: '上报人', placeholder: "请输入", type: 'input', 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: '1' }, { label: '二级火情', value: '2' }, { label: '三级火情', value: '3' }] },
]);
const layoutConfig = reactive({
......@@ -63,19 +64,19 @@ const resetPasswordData = ref({});
const showuserinfodata = ref({});
const tableShowData = ref([
{id: 1, 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: 4, 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: 3, name: '背景', floorcount: 18, reporter: '张三', updateTime: '12345678901', discription: '打个人脸', fireLevel: '1' },
{ id: 4, name: '背景', floorcount: 18, reporter: '张三', updateTime: '12345678901', discription: '说实在的', fireLevel: '1' },
]);
const archiveInfoDateBackcallFn = (row) => {
console.log("archiveInfoFn需要归档的数据",row)
const archiveInfoDateBackcallFn = (row) => {
console.log("archiveInfoFn需要归档的数据", row)
};
const archiveHandleAddInfoFn = (row) => {
// archiveInfoDate.value = null
// archiveInfoDate.value = row
console.log('archiveInfoFn需要归档的数据')
};
const archiveHandleAddInfoFn = (row) => {
// archiveInfoDate.value = null
// archiveInfoDate.value = row
console.log('archiveInfoFn需要归档的数据')
};
// const archiveInfoDate = ref(null)
// const archiveInfoDateBackcallFn = (row) => {
// archiveInfoDate.value = null
......@@ -112,7 +113,7 @@ const deleteData = (data) => {
}
).then(() => {
try {
const res = staffRemoveInfoApi({id: data.id});
const res = staffRemoveInfoApi({ id: data.id });
if (res.code === 200) {
ElMessage({ type: 'success', message: '已删除' });
tableDataRefresh();
......@@ -137,7 +138,7 @@ const userData = (data) => {
showuserinfodata.value = data;
}
const initTableData = () => {
const initTableData = () => {
// staffGetPageInfoApi({
// "currentPageNum": 1,
// "currentPageSize": 10,
......@@ -146,11 +147,11 @@ const initTableData = () => {
// let tempData = res.data.list
// tableShowData.value[0].tableBody = []
// tempData = tempData.filter(element => element.isDeleted === 0);
// // tempData.forEach(element => {
// // element.Operation = [...Operation.value];
// // });
// tableShowData.value[0].tableBody = tempData;
// tableShowData.value[0].total = res.data.total;
// tableShowData.value[0].pageSize = res.data.pageSize;
......@@ -160,7 +161,7 @@ const initTableData = () => {
// });
}
onMounted(() => {
onMounted(() => {
initTableData();
});
......@@ -181,7 +182,7 @@ const containerStyle = computed(() => ({
.main-content {
display: flex;
gap: var(--card-spacing);
padding: 0.4rem;
padding: 0.4rem 0;
height: 100vh;
box-sizing: border-box;
}
......@@ -244,9 +245,9 @@ const containerStyle = computed(() => ({
}
.operation-button {
flex: 1;
display: flex;
justify-self: end;
flex: 1;
display: flex;
justify-self: end;
}
.card-table {
......@@ -260,7 +261,7 @@ const containerStyle = computed(() => ({
.left-top {
flex-direction: column;
}
.region-overview {
width: 100%;
flex: none;
......
src/views/areafiremanage/firesurveillance/index.vue
浏览文件 @ 8b7268d4
......@@ -7,7 +7,7 @@
<div class="left-top">
<!-- 区域信息概览 -->
<div class="info-card region-overview">
<searchtop :searchShowData="searchShowData" ></searchtop>
<searchtop :searchShowData="searchShowData"></searchtop>
</div>
</div>
......@@ -16,23 +16,20 @@
<div class="card-tabs">
<span class="title">历史火情</span>
<div class="card-actions">
<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="archiveInfoFn">归档</el-button>
<el-button class="operation-button" type="primary" @cliick="archiveInfoFn1">归档1</el-button>
</div>
</div>
<div class="card-table">
<tableshow :tableShowData="tableShowData" @archiveInfoDateBackcallFn="archiveInfoDateBackcallFn"></tableshow>
<tableshow :tableShowData="tableShowData" @archiveInfoDateBackcallFn="archiveInfoDateBackcallFn">
</tableshow>
</div>
</div>
</div>
</main>
<!-- 归档窗口 -->
<el-drawer
v-model="archiveInfoDrawer"
direction="rtl"
:before-close="handleClose"
>
asdada
<el-drawer v-model="archiveInfoDrawer" direction="rtl" :before-close="handleClose">
asdada
</el-drawer>
</div>
......@@ -48,11 +45,11 @@ import tableshow from './components/tableshow.vue';
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', content: '',isShow: true, options: [{label: '管理员', value: '管理员'}, {label: '巡查员', value: '巡查员'}]},
{ label: '归档时间', placeholder: "请选择", type: 'datepicker', 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: 'datepicker', content: '', isShow: true, options: [{ label: '管理员', value: '管理员' }, { label: '巡查员', value: '巡查员' }] },
]);
const layoutConfig = reactive({
......@@ -70,35 +67,35 @@ const resetPasswordData = ref({});
const showuserinfodata = ref({});
const tableShowData = ref([
{id: 1, 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: 4, 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: 3, name: '背景', floorcount: 18, reporter: '张三', updateTime: '12345678901', discription: '打个人脸', fireLevel: '1' },
{ id: 4, name: '背景', floorcount: 18, reporter: '张三', updateTime: '12345678901', discription: '说实在的', fireLevel: '1' },
]);
const archiveInfoDate = ref(null)
const archiveInfoDateBackcallFn = (row) => {
archiveInfoDate.value = null
archiveInfoDate.value = row
console.log('archiveInfoFn需要归档的数据',archiveInfoDate.value)
const archiveInfoDateBackcallFn = (row) => {
archiveInfoDate.value = null
archiveInfoDate.value = row
console.log('archiveInfoFn需要归档的数据', archiveInfoDate.value)
};
const archiveInfoDrawer = ref(false)
const archiveInfoFn = () => {
if ( archiveInfoDate ===undefined ||archiveInfoDate.value===null || archiveInfoDate.value.length<=0 ) {
const archiveInfoFn = () => {
if (archiveInfoDate === undefined || archiveInfoDate.value === null || archiveInfoDate.value.length <= 0) {
ElMessage.warning("没有勾选数据")
}else {
console.log('archiveInfoFn归档的数据',archiveInfoDate.value)
} else {
console.log('archiveInfoFn归档的数据', archiveInfoDate.value)
// archiveInfoDrawer.value = true
fireInfoDataImport.value = null
}
}
const archiveInfoFn1 = () => {
ElMessage.warning("没有勾选数据")
const archiveInfoFn1 = () => {
ElMessage.warning("没有勾选数据")
}
const handleAddInfoFn = () => {
......@@ -126,7 +123,7 @@ const deleteData = (data) => {
}
).then(() => {
try {
const res = staffRemoveInfoApi({id: data.id});
const res = staffRemoveInfoApi({ id: data.id });
if (res.code === 200) {
ElMessage({ type: 'success', message: '已删除' });
tableDataRefresh();
......@@ -151,7 +148,7 @@ const userData = (data) => {
showuserinfodata.value = data;
}
const initTableData = () => {
const initTableData = () => {
// staffGetPageInfoApi({
// "currentPageNum": 1,
// "currentPageSize": 10,
......@@ -160,11 +157,11 @@ const initTableData = () => {
// let tempData = res.data.list
// tableShowData.value[0].tableBody = []
// tempData = tempData.filter(element => element.isDeleted === 0);
// // tempData.forEach(element => {
// // element.Operation = [...Operation.value];
// // });
// tableShowData.value[0].tableBody = tempData;
// tableShowData.value[0].total = res.data.total;
// tableShowData.value[0].pageSize = res.data.pageSize;
......@@ -174,7 +171,7 @@ const initTableData = () => {
// });
}
onMounted(() => {
onMounted(() => {
initTableData();
});
......@@ -195,7 +192,7 @@ const containerStyle = computed(() => ({
.main-content {
display: flex;
gap: var(--card-spacing);
padding: 0.4rem;
padding: 0.4rem 0;
height: 100vh;
box-sizing: border-box;
}
......@@ -260,9 +257,9 @@ const containerStyle = computed(() => ({
}
.operation-button {
flex: 1;
display: flex;
justify-self: end;
flex: 1;
display: flex;
justify-self: end;
}
.card-table {
......@@ -276,7 +273,7 @@ const containerStyle = computed(() => ({
.left-top {
flex-direction: column;
}
.region-overview {
width: 100%;
flex: none;
......
src/views/areafiremanage/historyfire/components/floordetail.vue
浏览文件 @ 8b7268d4
......@@ -296,7 +296,7 @@ const containerStyle = computed(() => ({
.main-content {
display: flex;
gap: var(--card-spacing);
padding: 0.4rem;
padding: 0.4rem 0;
height: 100vh;
box-sizing: border-box;
}
......
src/views/areafiremanage/historyfire/index.vue
浏览文件 @ 8b7268d4
......@@ -154,7 +154,7 @@ watch(route, () => {
.main-content {
display: flex;
gap: var(--card-spacing);
padding: 0.4rem;
padding: 0.4rem 0;
height: 100vh;
box-sizing: border-box;
}
......
src/views/dashboard/analysis/index.vue
浏览文件 @ 8b7268d4
......@@ -14,7 +14,8 @@
<div class="info-grid">
<div class="info-item" v-for="(item, index) in OverviewRegionalInformation" :key="index">
<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>
......@@ -30,11 +31,13 @@
<div class="card-tabs">
<span class="tab-btn">历史火情统计</span>
</div>
<div class="tab-content history-stats">
<div class="time-filter">
<el-select v-model="historyFireSelectTime" placeholder="选择数据查看范围" style="width: 240px" class="filter-select" @change="historyFireSelectTimeFn">
<el-option v-for="item in historyFireTimeData" :key="item.value" :label="item.label" :value="item.value" />
<el-select v-model="historyFireSelectTime" placeholder="选择数据查看范围" style="width: 240px"
class="filter-select" @change="historyFireSelectTimeFn">
<el-option v-for="item in historyFireTimeData" :key="item.value" :label="item.label"
:value="item.value" />
</el-select>
</div>
<div class="chart-container">
......@@ -49,37 +52,47 @@
<div class="info-card current-situation">
<div class="card-header ">
<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 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-content" >
<p ><img class="icon-fire-red1" src="../../static/image/huo.png" alt=""> <span class="location">{{item.location}}</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 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>
<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 class="info-card current-situation1">
<div class="info-card current-situation1">
<div class="card-header">
<h2>传感器报警</h2>
<span ><el-button type="warning" circle >紧急</el-button></span>
<span><el-button type="warning" circle>紧急</el-button></span>
</div>
<div class="situation-list">
<!-- 火情项目 -->
<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>
<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 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>
<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>
......@@ -91,7 +104,7 @@
<script setup>
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';
......@@ -116,32 +129,32 @@ const containerStyle = computed(() => ({
// 区域信息数据
const OverviewRegionalInformation = ref([
{label: "小区名称",value: "阳光花园"},
{label: "小区建筑数量",value: "12栋"},
{label: "配备无人机数量",value: "5台"},
{label: "当前可用无人机数量",value: "3台"},
{label: "最近火情发生时间",value: "2023-05-15 14:30"},
{label: "配备无人机数量",value: "5台"},
{label: "当前可用无人机数量",value: "3台"},
{label: "最近火情发生时间",value: "2023-05-15 14:30"}
{ label: "小区名称", value: "阳光花园" },
{ label: "小区建筑数量", value: "12栋" },
{ label: "配备无人机数量", value: "5台" },
{ label: "当前可用无人机数量", value: "3台" },
{ label: "最近火情发生时间", value: "2023-05-15 14:30" },
{ label: "配备无人机数量", value: "5台" },
{ label: "当前可用无人机数量", value: "3台" },
{ label: "最近火情发生时间", value: "2023-05-15 14:30" }
]);
// 历史数据时间选择
const historyFireSelectTime = ref('');
const historyFireTimeData = ref([
{label:"近一个月",value: 30},
{label:"近三个月",value: 90},
{label:"近半年",value: 180},
{label:"近一年",value: 365}
{ label: "近一个月", value: 30 },
{ label: "近三个月", value: 90 },
{ label: "近半年", value: 180 },
{ label: "近一年", value: 365 }
]);
// 定义一个响应式变量currentFireData，存储火灾数据
const currentFireData = ref([
{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月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月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月7日 11:14 发现", fireLevel: 0, isXFOk: false },
{ location: "金色家园小区 三单元 七号搂 3楼", severity: "三级 (大规模)", status: "消防人员未到达现场", time: "2025年8月5日 11:14 发现", fireLevel: 2, isXFOk: true },
]);
// 定义一个响应式变量，用来存储火警的边框颜色
const sensorFireBorderColor = ref(["fireover", "firewarning", "fireemergency"]);
......@@ -159,9 +172,9 @@ const initFireHistoryChart = () => {
// 销毁已有实例避免内存泄漏
if (chartInstance) chartInstance.dispose();
chartInstance = echarts.init(chartDom);
const option = {
grid: {
left: '3%',
......@@ -171,19 +184,19 @@ const initFireHistoryChart = () => {
containLabel: true // 确保标签不被裁剪
},
tooltip: {
trigger: 'axis',
formatter: (params) => {
// console.log('params', params)
trigger: 'axis',
formatter: (params) => {
// console.log('params', params)
let html = `${(params[0].axisValue)}日共发生<span style="color:red">${(params[0].value)}</span>起火灾<br />`
return html
}
},
}
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
axisLabel: {
rotate: 45 // 旋转45度
rotate: 45 // 旋转45度
}
},
yAxis: {
......@@ -196,13 +209,13 @@ const initFireHistoryChart = () => {
}]
};
chartInstance.on('click', function (params) {
// 获取到点击的点的相关信息，再跳转到详情页的时候传递过去
// console.log("--------------333333333333-------------",params.name,params.value);
router.push({
path: '/fireManage',
query: { taskId: params.name }
})
useAppStoreInstance.num=4
// 获取到点击的点的相关信息，再跳转到详情页的时候传递过去
// console.log("--------------333333333333-------------",params.name,params.value);
router.push({
path: '/fireManage',
query: { taskId: params.name }
})
useAppStoreInstance.num = 4
});
chartInstance.setOption(option);
......@@ -210,9 +223,9 @@ const initFireHistoryChart = () => {
const resizeHandler = () => {
chartInstance.resize();
};
window.addEventListener('resize', resizeHandler);
// 组件卸载时清理
onUnmounted(() => {
window.removeEventListener('resize', resizeHandler);
......@@ -245,7 +258,7 @@ onMounted(() => {
.main-content {
display: flex;
gap: var(--card-spacing);
padding: 0.4rem;
padding: 0.4rem 0;
height: 100vh;
box-sizing: border-box;
overflow: hidden;
......@@ -273,15 +286,16 @@ onMounted(() => {
.info-card {
background-color: rgb(255, 255, 255);
border-radius: 8px;
padding: 1rem;
display: flex;
flex-direction: column;
box-sizing: border-box;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
overflow: hidden;
}
.info-card:hover {
transform: translateY(2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
......@@ -298,16 +312,19 @@ onMounted(() => {
height: var(--header-height);
/* flex-shrink: 0; */
}
.card-header1 {
background-color: #e29393;
}
.card-header h2 {
font-size: 1.2rem;
color: #1e40af;
margin: 0;
}
.more-btn{
.more-btn {
width: 50px;
background-color: #facc15;
display: flex;
......@@ -315,11 +332,12 @@ onMounted(() => {
border-radius: 90%;
align-items: center;
}
.icon-fire-red{
.icon-fire-red {
margin-top: -0.31rem;
width: 15%;
margin-right: 10px;
}
/* 区域信息概览 */
......@@ -342,9 +360,10 @@ onMounted(() => {
align-items: center;
padding: 0.5rem 0;
border-bottom: 1px solid #eee;
}
.info-item:hover{
.info-item:hover {
transform: translateX(4px);
}
......@@ -373,15 +392,17 @@ onMounted(() => {
height: 100%;
object-fit: cover;
}
.map-image:hover {
transform: translateY(4px);
transform: translateY(4px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}
/* 历史火情统计 */
.stats-alerts {
height: 38.5%;
height: 38.5%;
display: flex;
flex-direction: column;
......@@ -397,7 +418,7 @@ transform: translateY(4px);
}
.tab-content {
display: flex;
flex-direction: column;
/* height: 100%; */
......@@ -419,7 +440,7 @@ transform: translateY(4px);
/* 图表容器 - 自适应高度 */
.chart-container {
width: 100%;
position: relative;
min-height: var(--chart-min-height);
......@@ -444,11 +465,12 @@ transform: translateY(4px);
}
/* 右侧卡片 - 使用flex布局自动分配高度 */
.current-situation, .current-situation1 {
.current-situation,
.current-situation1 {
display: flex;
flex-direction: column;
}
/* 火情列表 */
......@@ -477,29 +499,33 @@ transform: translateY(4px);
transform: translateX(4px);
}
.fireover{
.fireover {
border-left: #10b981 4px solid;
}
.fireemergency{
.fireemergency {
border-left: #fc0000 4px solid;
}
.firewarning{
.firewarning {
border-left: #facc15 4px solid;
}
.isXFOk{
.isXFOk {
color: #10b981;
}
.isXFNotOk{
.isXFNotOk {
color: #144937;
}
.emergency{
.emergency {
position: sticky;
top: 0;
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; 设置背景色避免透明 */
/* 可选：添加阴影增强视觉效果 */
......@@ -515,7 +541,10 @@ transform: translateY(4px);
align-items: center;
}
.icon-fire-red1{height: 70%;margin-right: 0.5rem; }
.icon-fire-red1 {
height: 70%;
margin-right: 0.5rem;
}
.situation-content .location {
font-weight: 500;
......@@ -557,13 +586,14 @@ transform: translateY(4px);
height: auto;
min-height: 100vh;
}
.left-top {
height: auto;
flex-direction: column;
}
.region-overview, .region-map {
.region-overview,
.region-map {
height: 300px;
margin-bottom: var(--card-spacing);
}
......@@ -573,12 +603,12 @@ transform: translateY(4px);
.card-header h2 {
font-size: 1rem;
}
.situation-item {
padding: 0.7rem;
gap: 0.7rem;
}
.situation-content p {
font-size: 0.85rem;
}
......
src/views/dashboard/analysis/index_cop.vue
浏览文件 @ 8b7268d4
<template>
<div class="dashboard-container">
<!-- 主内容区 -->
<main class="main-content">
......@@ -13,12 +13,12 @@
<div class="card-header">
<h2>区域信息概览</h2>
</div>
<div class="info-grid" >
<div class="info-item" v-for="(item,index) in OverviewRegionalInformation" :key="index">
<span class="label">{{item.label}}:</span>
<span class="value">{{item.value}}</span>
<div class="info-grid">
<div class="info-item" v-for="(item, index) in OverviewRegionalInformation" :key="index">
<span class="label">{{ item.label }}:</span>
<span class="value">{{ item.value }}</span>
</div>
</div>
</div>
......@@ -31,29 +31,26 @@
<!-- 左侧下部分：历史火情统计和传感器警报 -->
<div class="info-card stats-alerts">
<div class="card-tabs">
<span class="tab-btn" >历史火情统计</span>
<span class="tab-btn">历史火情统计</span>
</div>
<!-- 历史火情统计面板 -->
<div class="tab-content history-stats">
<div class="tab-content history-stats">
<div class="time-filter">
<el-select v-model="historyFireSelectTime" placeholder="选择数据查看范围" style="width: 240px" class="filter-select" @change="historyFireSelectTimeFn">
<el-option
v-for="item in historyFireTimeData"
:key="item.value"
:label="item.label"
:value="item.value"
/>
<el-select v-model="historyFireSelectTime" placeholder="选择数据查看范围" style="width: 240px"
class="filter-select" @change="historyFireSelectTimeFn">
<el-option v-for="item in historyFireTimeData" :key="item.value" :label="item.label"
:value="item.value" />
</el-select>
</div>
<div class="chart-container" >
<div id="historyChart" class="chart" style="width: 100%; height: 100%"></div>
<div class="chart-container">
<div id="historyChart" class="chart" style="width: 100%; height: 100%"></div>
</div>
</div>
</div>
</div>
......@@ -64,7 +61,7 @@
<h2>当前火情</h2>
<button class="more-btn">更多 <i class="icon-more"></i></button>
</div>
<div class="situation-list ">
<!-- 火情项目 1 - 紧急 -->
<div class="situation-item emergency">
......@@ -78,7 +75,7 @@
<p><span class="time">2025年8月7日 11:14 发现</span></p>
</div>
</div>
<!-- 火情项目 2 - 重要 -->
<div class="situation-item important">
<div class="situation-icon">
......@@ -91,7 +88,7 @@
<p><span class="time">2025年8月7日 11:11 发现</span></p>
</div>
</div>
<!-- 火情项目 3 - 已控制 -->
<div class="situation-item controlled">
<div class="situation-icon">
......@@ -104,11 +101,11 @@
<p><span class="time">2025年8月7日 10:45 发现</span></p>
</div>
</div>
</div>
</div>
<div class="info-card current-situation1">
<div class="card-header">
<div class="info-card current-situation1">
<div class="card-header">
<h2>传感器报警</h2>
<button class="more-btn">更多 <i class="icon-more"></i></button>
</div>
......@@ -118,74 +115,74 @@
</div>
</template>
<script setup>
import * as echarts from 'echarts';
import { ref, onMounted, computed } from 'vue';
// 定义一个OverviewRegionalInformation变量，用于存储小区信息
const OverviewRegionalInformation = ref([
{label: "小区名称",value: "阳光花园"}, // 小区名称为阳光花园
{label: "小区建筑数量",value: "12栋"}, // 小区建筑数量为12栋
{label: "配备无人机数量",value: "5台"}, // 配备无人机数量为5台
{label: "当前可用无人机数量",value: "3台"}, // 当前可用无人机数量为3台
{label: "最近火情发生时间",value: "2023-05-15 14:30"}, // 最近火情发生时间为2023-05-15 14:30
{label: "配备无人机数量",value: "5台"}, // 配备无人机数量为5台
{label: "当前可用无人机数量",value: "3台"}, // 当前可用无人机数量为3台
{label: "最近火情发生时间",value: "2023-05-15 14:30"}]
);
// 定义一个响应式的变量，用于存储历史数据的时间选择
const historyFireSelectTime = ref('')
const historyFireTimeData = ref([
{label:"近一个月",value: 30},
{label:"近三个月",value: 90},
{label:"近半年",value: 180},
{label:"近一年",value: 365}
])
const historyFireSelectTimeFn = () => {
console.log(historyFireSelectTime.value,"0000000000000000000")
}
const initFireHistoryChart = () => {
var chartDom = document.getElementById('historyChart');
var myChart = echarts.init(chartDom);
var option;
option = {
xAxis: {
type: 'category',
boundaryGap: false,
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [
{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line',
areaStyle: {}
}
]
};
// 监听窗口大小变化，调整图表尺寸
window.addEventListener('resize', () => {
myChart.resize();
});
option && myChart.setOption(option);
}
// 挂载时初始化
onMounted(() => {
initFireHistoryChart()
});
<script setup>
import * as echarts from 'echarts';
import { ref, onMounted, computed } from 'vue';
// 定义一个OverviewRegionalInformation变量，用于存储小区信息
const OverviewRegionalInformation = ref([
{ label: "小区名称", value: "阳光花园" }, // 小区名称为阳光花园
{ label: "小区建筑数量", value: "12栋" }, // 小区建筑数量为12栋
{ label: "配备无人机数量", value: "5台" }, // 配备无人机数量为5台
{ label: "当前可用无人机数量", value: "3台" }, // 当前可用无人机数量为3台
{ label: "最近火情发生时间", value: "2023-05-15 14:30" }, // 最近火情发生时间为2023-05-15 14:30
{ label: "配备无人机数量", value: "5台" }, // 配备无人机数量为5台
{ label: "当前可用无人机数量", value: "3台" }, // 当前可用无人机数量为3台
{ label: "最近火情发生时间", value: "2023-05-15 14:30" }]
);
// 定义一个响应式的变量，用于存储历史数据的时间选择
const historyFireSelectTime = ref('')
const historyFireTimeData = ref([
{ label: "近一个月", value: 30 },
{ label: "近三个月", value: 90 },
{ label: "近半年", value: 180 },
{ label: "近一年", value: 365 }
])
const historyFireSelectTimeFn = () => {
console.log(historyFireSelectTime.value, "0000000000000000000")
}
const initFireHistoryChart = () => {
var chartDom = document.getElementById('historyChart');
var myChart = echarts.init(chartDom);
var option;
option = {
xAxis: {
type: 'category',
boundaryGap: false,
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [
{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line',
areaStyle: {}
}
]
};
// 监听窗口大小变化，调整图表尺寸
window.addEventListener('resize', () => {
myChart.resize();
});
option && myChart.setOption(option);
}
// 挂载时初始化
onMounted(() => {
initFireHistoryChart()
});
</script>
<style scoped>
......@@ -196,26 +193,34 @@
min-height: 100vh;
color: #333;
/* background-color: #10b981; */
max-height: 100%; /* 设置最大高度 */
overflow-y: auto; /* 内容超出时显示垂直滚动条 */
max-height: 100%;
/* 设置最大高度 */
overflow-y: auto;
/* 内容超出时显示垂直滚动条 */
/* 美化滚动条样式 */
scrollbar-width: thin; /* Firefox */
scrollbar-color: #c1c1c1 #f1f1f1; /* Firefox */
scrollbar-width: thin;
/* Firefox */
scrollbar-color: #c1c1c1 #f1f1f1;
/* Firefox */
}
/* 主内容区样式 */
.main-content {
display: flex;
gap: 1rem;
padding: 0.4rem;
padding: 0.4rem 0;
max-width: 1920px;
max-height: 100%; /* 设置最大高度 */
overflow-y: auto; /* 内容超出时显示垂直滚动条 */
max-height: 100%;
/* 设置最大高度 */
overflow-y: auto;
/* 内容超出时显示垂直滚动条 */
/* 美化滚动条样式 */
scrollbar-width: thin; /* Firefox */
scrollbar-color: #c1c1c1 #f1f1f1; /* Firefox */
scrollbar-width: thin;
/* Firefox */
scrollbar-color: #c1c1c1 #f1f1f1;
/* Firefox */
/* margin: 0 auto; */
}
......@@ -240,12 +245,13 @@
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
padding: 1rem;
position: relative; /* 确保卡片有定位上下文 */
width: 100%;
position: relative;
/* 确保卡片有定位上下文 */
width: 100%;
height: 100%;
height: 100%;
}
.info-card.hover {
......@@ -283,25 +289,32 @@
.info-grid {
display: flex;
flex-direction: column; /* 竖排排列 */
justify-content: center; /* 垂直居中 */
gap: 1rem;
flex-direction: column;
/* 竖排排列 */
justify-content: center;
/* 垂直居中 */
gap: 1rem;
padding-right: 10px;
overflow-y: auto; /* 内容超出时显示垂直滚动条 */
overflow-y: auto;
/* 内容超出时显示垂直滚动条 */
/* 美化滚动条样式 */
scrollbar-width: thin;
scrollbar-width: thin;
scrollbar-color: #c1c1c1 #f1f1f1;
}
.info-item {
display: flex; /* 水平排列 */
justify-content: space-between; /* 两端对齐，使label左对齐，value右对齐 */
align-items: center; /* 垂直居中 */
display: flex;
/* 水平排列 */
justify-content: space-between;
/* 两端对齐，使label左对齐，value右对齐 */
align-items: center;
/* 垂直居中 */
/* padding: 5px 0; */
border-bottom: 1px solid #eee; /* 底部边框 */
border-bottom: 1px solid #eee;
/* 底部边框 */
}
......@@ -379,24 +392,31 @@
margin-bottom: 1rem;
}
.chart-container{
background-color: #10b981;
height: 76%;
width: 100%;
position: relative;
margin: 0 auto;
padding: 0;
box-sizing: border-box;
/* overflow: auto; */
}
.chart{
width: 100%; /* 宽度占满容器 */
height: 100%; /* 高度占满容器 */
position: absolute; /* 绝对定位 */
top: 0; /* 顶部对齐 */
left: 0; /* 左侧对齐 */
background-color: #10b981;
.chart-container {
background-color: #10b981;
height: 76%;
width: 100%;
position: relative;
margin: 0 auto;
padding: 0;
box-sizing: border-box;
/* overflow: auto; */
}
.chart {
width: 100%;
/* 宽度占满容器 */
height: 100%;
/* 高度占满容器 */
position: absolute;
/* 绝对定位 */
top: 0;
/* 顶部对齐 */
left: 0;
/* 左侧对齐 */
background-color: #10b981;
}
.filter-select {
/* padding: 0.4rem 0.6rem; */
border-radius: 4px;
......@@ -426,6 +446,7 @@
margin-bottom: 1rem;
/* background-color: #10b981; */
}
.current-situation1 {
height: 51%;
display: flex;
......@@ -445,7 +466,8 @@
}
/* 火情项目样式 */
.alert-item, .situation-item {
.alert-item,
.situation-item {
display: flex;
gap: 1rem;
padding: 1rem;
......@@ -455,26 +477,30 @@
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);
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;
}
.alert-item.warning, .situation-item.important {
.alert-item.warning,
.situation-item.important {
border-left-color: #f59e0b;
}
.situation-item.emergency {
/* position: fixed; */
/* position: fixed; */
border-left-color: #ef4444;
background-color: rgba(239, 68, 68, 0.03);
}
.alert-icon, .situation-icon {
.alert-icon,
.situation-icon {
flex-shrink: 0;
width: 40px;
height: 40px;
......@@ -496,11 +522,13 @@
background-color: rgba(16, 185, 129, 0.1);
}
.alert-content, .situation-content {
.alert-content,
.situation-content {
flex-grow: 1;
}
.alert-content h4, .situation-content h4 {
.alert-content h4,
.situation-content h4 {
margin: 0 0 0.5rem 0;
font-size: 1rem;
color: #333;
......@@ -579,14 +607,27 @@
/* 动画效果 */
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes pulse {
0% { opacity: 1; }
50% { opacity: 0.7; }
100% { opacity: 1; }
0% {
opacity: 1;
}
50% {
opacity: 0.7;
}
100% {
opacity: 1;
}
}
/* 响应式调整 */
......@@ -594,7 +635,7 @@
.main-content {
flex-direction: column;
}
.left-top {
height: auto;
}
......@@ -605,7 +646,7 @@
flex-direction: column;
height: auto;
}
.info-grid {
grid-template-columns: 1fr;
}
......
src/views/dashboard/workbench/index.vue
浏览文件 @ 8b7268d4
......@@ -182,7 +182,7 @@ watch(route, () => {
.main-content {
display: flex;
gap: var(--card-spacing);
padding: 0.4rem;
padding: 0.4rem 0;
height: 100vh;
box-sizing: border-box;
}
......
src/views/dialog_infoShow_img_vid/uavWorkTable.vue
浏览文件 @ 8b7268d4
<template>
<div class="task-schedule-container">
<!-- 表格主体 -->
<el-table
:data="taskScheduleData"
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 :data="taskScheduleData" 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
type="index"
label="序号"
width="60"
align="center"
/>
<el-table-column type="index" label="序号" width="60" align="center" />
<!-- 任务调度时间 -->
<el-table-column
prop="scheduleTime"
label="任务调度时间"
width="120"
align="center"
/>
<el-table-column prop="scheduleTime" label="任务调度时间" width="120" align="center" />
<!-- 任务调度目标 -->
<el-table-column
prop="target"
label="任务调度目标"
width="120"
align="center"
/>
<el-table-column prop="target" label="任务调度目标" width="120" align="center" />
<!-- 目标内容 -->
<el-table-column
prop="content"
label="目标内容"
min-width="220"
>
<el-table-column prop="content" label="目标内容" min-width="220">
<template #default="scope">
<div class="content-cell">
<el-tooltip effect="dark" :content="scope.row.content">
......@@ -52,14 +24,9 @@
</div>
</template>
</el-table-column>
<!-- 任务持续时间 -->
<el-table-column
prop="duration"
label="任务持续时间"
width="140"
align="center"
>
<el-table-column prop="duration" label="任务持续时间" width="140" align="center">
<template #default="scope">
<div class="content-cell">
<el-tooltip effect="dark" :content="scope.row.duration">
......@@ -68,14 +35,9 @@
</div>
</template>
</el-table-column>
<!-- 损伤记录 -->
<el-table-column
prop="damageRecord"
label="损伤记录"
width="100"
align="center"
>
<el-table-column prop="damageRecord" label="损伤记录" width="100" align="center">
<template #default="scope">
<span class="record-text">
{{ scope.row.damageRecord || '-' }}
......@@ -85,14 +47,9 @@
</span>
</template>
</el-table-column>
<!-- 维修记录 -->
<el-table-column
prop="repairRecord"
label="维修记录"
width="100"
align="center"
>
<el-table-column prop="repairRecord" label="维修记录" width="100" align="center">
<template #default="scope">
<span class="record-text">
{{ scope.row.repairRecord || '-' }}
......@@ -102,78 +59,60 @@
</span>
</template>
</el-table-column>
<!-- 记录视频 -->
<el-table-column
label="记录视频"
width="90"
align="center"
>
<el-table-column label="记录视频" width="90" align="center">
<template #default="scope">
<el-button
type="text"
class="view-btn"
@click="handleViewVideo(scope.row)"
:icon="VideoPlay"
>
<el-button type="text" class="view-btn" @click="handleViewVideo(scope.row)" :icon="VideoPlay">
查看
</el-button>
</template>
</el-table-column>
<!-- 操作列 -->
<el-table-column
label="操作"
width="140"
align="center"
>
<el-table-column label="操作" width="140" align="center">
<template #default="scope">
<el-button
type="text"
class="export-btn"
@click="handleExportFile(scope.row)"
:icon="Download"
>
<el-button type="text" class="export-btn" @click="handleExportFile(scope.row)" :icon="Download">
导出文件
</el-button>
</template>
</el-table-column>
</el-table>
<div>
<el-dialog class="dialogbig" v-model="img_video_dialogVisible" style="background-color: rgba(0, 0, 0, 0) ;" >
<div class="media-container">
<!-- 图片展示行 -->
<div class="image-row" >
<h3>图片</h3>
<div class="image-list" v-if="images.length">
<div v-for="item in images" class="image-item">
<img src="../../static/image/loginback.png" :alt="item.name" />
{{ typeof item.url }}--{{ item }}
</div>
</div>
<div v-else> 暂无图片数据</div>
</div>
<!-- 视频展示行 -->
<div class="video-row" v-if="videos">
<h3>视频</h3>
<div class="video-list" v-if="videos.length">
<div v-for="(video, index) in videos" :key="index" class="video-item">
<video :src="video.url" controls :poster="video.poster">
您的浏览器不支持视频播放
</video>
</div>
</div>
<div v-else> 暂无视频数据</div>
</div>
</div>
</el-dialog>
<div>
<el-dialog class="dialogbig" v-model="img_video_dialogVisible" style="background-color: rgba(0, 0, 0, 0) ;">
<div class="media-container">
<!-- 图片展示行 -->
<div class="image-row">
<h3>图片</h3>
<div class="image-list" v-if="images.length">
<div v-for="item in images" class="image-item">
<img src="../../static/image/loginback.png" :alt="item.name" />
{{ typeof item.url }}--{{ item }}
</div>
</div>
<div v-else> 暂无图片数据</div>
</div>
<!-- 视频展示行 -->
<div class="video-row" v-if="videos">
<h3>视频</h3>
<div class="video-list" v-if="videos.length">
<div v-for="(video, index) in videos" :key="index" class="video-item">
<video :src="video.url" controls :poster="video.poster">
您的浏览器不支持视频播放
</video>
</div>
</div>
<div v-else> 暂无视频数据</div>
</div>
</div>
</el-dialog>
</div>
</div>
</template>
......@@ -282,13 +221,13 @@ const headerCellStyle = {
'font-weight': '600',
'text-align': 'center',
'color': '#1d2129',
'padding': '10px 0'
}
// 单元格样式
const cellStyle = {
'padding': '12px 0',
'transition': 'all 0.2s ease'
}
......@@ -306,7 +245,7 @@ const handleRowClick = (row) => {
// 查看视频按钮事件
const handleViewVideo = (rowFnfo) => {
// 查看视频逻辑
console.log('补充查看视频逻辑',rowFnfo)
console.log('补充查看视频逻辑', rowFnfo)
img_video_dialogVisible.value = true
}
......@@ -314,34 +253,37 @@ const handleViewVideo = (rowFnfo) => {
// 导出文件按钮事件
const handleExportFile = (rowFnfo) => {
// 导出文件逻辑
console.log('补充导出文件逻辑',rowFnfo)
ElMessage({
type: 'info',
message: `正在请求${rowFnfo.target}文件: `,
})
console.log('补充导出文件逻辑', rowFnfo)
ElMessage({
type: 'info',
message: `正在请求${rowFnfo.target}文件: `,
})
}
</script>
<style scoped lang="scss">
.task-schedule-container {
background: rgba(16, 42, 77, 0.7); /* 修改容器背景色 */
background: rgba(16, 42, 77, 0.7);
/* 修改容器背景色 */
border-radius: 8px;
// box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3); /* 加深阴影增强对比 */
display: flex;
flex-direction: column;
height: 100%;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
padding: 2px; /* 添加内边距 */
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
padding: 2px;
/* 添加内边距 */
}
/* 修改表头样式 */
:deep(.el-table__header) {
th {
background-color: rgb(11, 31, 58) !important; /* 加深表头背景 */
color: #ffffff !important; /* 浅色文字 */
background-color: rgb(11, 31, 58) !important;
/* 加深表头背景 */
color: #ffffff !important;
/* 浅色文字 */
// border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}
}
......@@ -353,13 +295,15 @@ const handleExportFile = (rowFnfo) => {
max-height: 600px;
overflow: auto;
// background-color: transparent !important; /* 透明背景 */
color: #ffffff; /* 浅色文字 */
color: #ffffff;
/* 浅色文字 */
/* 修改单元格样式 */
:deep(.el-table__body) {
tr {
td {
background-color: rgba(16, 42, 77);;
background-color: rgba(16, 42, 77);
;
// border-bottom: 1px solid rgba(255, 255, 255, 0.1);
color: #ffffff;
// padding: 10px 0;
......@@ -371,7 +315,7 @@ const handleExportFile = (rowFnfo) => {
.row-even {
background-color: rgba(146, 231, 9, 1.5) !important;
}
.row-odd {
background-color: rgba(185, 143, 28, 0.3) !important;
}
......@@ -384,29 +328,35 @@ const handleExportFile = (rowFnfo) => {
/* 修改按钮样式 */
.view-btn {
color: #69c0ff !important;
&:hover {
color: #40a9ff !important;
}
}
.export-btn {
color: #ffc069 !important;
&:hover {
color: #ffa940 !important;
}
}
/* 修改文字颜色 */
.content-cell,
.content-cell,
.record-text {
color: #ffffff !important;
max-height: 30px;
white-space: nowrap; /* 禁止文本换行 */
overflow: hidden; /* 隐藏溢出的内容 */
text-overflow: ellipsis; /* 使用省略号表示被截断的文本 */
max-width: 100%; /* 设置最大宽度，可以根据需要调整 */
white-space: nowrap;
/* 禁止文本换行 */
overflow: hidden;
/* 隐藏溢出的内容 */
text-overflow: ellipsis;
/* 使用省略号表示被截断的文本 */
max-width: 100%;
/* 设置最大宽度，可以根据需要调整 */
}
}
......@@ -417,22 +367,24 @@ const handleExportFile = (rowFnfo) => {
:deep(.el-pagination) {
color: #ffffff;
.btn-prev, .btn-next, .el-pager li {
.btn-prev,
.btn-next,
.el-pager li {
// background-color: transparent;
color: #ffffff;
}
.el-pager li.active {
color: #69c0ff;
}
.el-pagination__total,
.el-pagination__total,
.el-pagination__jump {
color: #e6f7ff;
}
}
}
......@@ -440,8 +392,10 @@ const handleExportFile = (rowFnfo) => {
.horizontal-container {
margin: 20px 0 10px 0;
display: flex;
align-items: center; /* 垂直居中对齐 */
align-items: center;
/* 垂直居中对齐 */
}
.media-container {
padding: 20px;
max-width: 1200px;
......@@ -449,6 +403,7 @@ const handleExportFile = (rowFnfo) => {
background: rgb(4, 33, 54);
border-radius: 10px;
}
/* 图片行样式 */
.image-row {
margin-bottom: 40px;
......@@ -618,16 +573,16 @@ h3 {
.media-container {
padding: 15px;
}
.image-item {
width: 150px;
height: 120px;
}
.video-item {
width: 250px;
}
.video-item video {
height: 150px;
}
......
src/views/systemmanage/staffManage/index.vue
浏览文件 @ 8b7268d4
......@@ -345,7 +345,7 @@ watch(route, () => {
.main-content {
display: flex;
gap: var(--card-spacing);
padding: 0.4rem;
padding: 0.4rem 0;
height: 100vh;
box-sizing: border-box;
}
......
src/views/uavManage/index.vue
浏览文件 @ 8b7268d4
......@@ -4,44 +4,41 @@
<div class="box_title box_title1">无人机列表</div>
<div class="contenterTitle">
<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="uavlist" >
<div class="uavshow">
<div class="uavlist">
<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">
<el-tooltip effect="dark" >
<div class="image-container" >
<img src="../../static/image/uav/wurenjiditu.png" alt="" class="background-image">
<div class="uavInfoShow" @click.stop="showUavdetailedInformation(item)">
<div class="first-item">
<img
src="../../static/image/uav/wurenjitop.png"
class="uav-icon"
alt="无人机图标"
>
<span class="uav-number">无人机：{{ item.UavNum }}</span>
</div>
<div class="second-item" >
</div>
<div class="third-item" :style="{color: StateColor[item.UavCurState]}">
<span class="state-label">状态显示</span>
<span class="state-value">{{ item.UavNum }}</span>
<el-tooltip effect="dark">
<div class="image-container">
<img src="../../static/image/uav/wurenjiditu.png" alt="" class="background-image">
<div class="uavInfoShow" @click.stop="showUavdetailedInformation(item)">
<div class="first-item">
<img src="../../static/image/uav/wurenjitop.png" class="uav-icon" alt="无人机图标">
<span class="uav-number">无人机：{{ item.UavNum }}</span>
</div>
<div class="second-item">
</div>
<div class="third-item" :style="{ color: StateColor[item.UavCurState] }">
<span class="state-label">状态显示</span>
<span class="state-value">{{ item.UavNum }}</span>
</div>
</div>
</div>
</div>
<template #content>
<div>
<strong>无人机编号:</strong> {{ item.UavNum }}<br>
状态:
<span :style="{color: StateColor[item.UavCurState]}">
{{ item.UavCurState }}
</span>
</div>
<template #content>
<div>
<strong>无人机编号:</strong> {{ item.UavNum }}<br>
状态:
<span :style="{ color: StateColor[item.UavCurState] }">
{{ item.UavCurState }}
</span>
</div>
</template>
</el-tooltip>
</el-tooltip>
</p>
</div>
</el-scrollbar>
......@@ -52,192 +49,151 @@
</div>
</div>
<div class="box_footer">
<div class="box_footer_left">
<div class="box_title">无人机：{{UavInfoSelect[0].UavNum}}</div>
<div class="box_footer_content">
<div v-for="UavInfoSelect in UavInfoSelect" :key="item" style="margin-top: 30px; height: 100%; overflow: hidden;">
<div class="box_title">无人机：{{ UavInfoSelect[0].UavNum }}</div>
<div class="box_footer_content">
<div v-for="UavInfoSelect in UavInfoSelect" :key="item"
style="margin-top: 30px; height: 100%; overflow: hidden;">
<div class="box_footer_content_up">
<div class="text item">
<img src="../../static/image/uav/shuxian.png" class="shuxian" style="width: 25px; height: 15px;">
<div style=" width: 40%;">无人机编号：</div>
<div>{{ UavInfoSelect.UavNum }}</div>
<img src="../../static/image/uav/shuxian.png" class="shuxian" style="width: 25px; height: 15px;">
<div style=" width: 40%;">无人机编号：</div>
<div>{{ UavInfoSelect.UavNum }}</div>
</div>
<div class="text item">
<img src="../../static/image/uav/shuxian.png" class="shuxian" style="width: 25px; height: 15px;">
<div style=" width: 40%;">无人机记录时间：</div>
<div>{{ UavInfoSelect.UavRecodeTime }}</div>
<img src="../../static/image/uav/shuxian.png" class="shuxian" style="width: 25px; height: 15px;">
<div style=" width: 40%;">无人机记录时间：</div>
<div>{{ UavInfoSelect.UavRecodeTime }}</div>
</div>
<div class="text item">
<img src="../../static/image/uav/shuxian.png" class="shuxian" style="width: 25px; height: 15px;">
<div style=" width: 40%;">无人机当前状态：</div>
<div>{{ UavInfoSelect.UavCurState }}</div>
<img src="../../static/image/uav/shuxian.png" class="shuxian" style="width: 25px; height: 15px;">
<div style=" width: 40%;">无人机当前状态：</div>
<div>{{ UavInfoSelect.UavCurState }}</div>
</div>
<div class="text item">
<img src="../../static/image/uav/shuxian.png" class="shuxian" style="width: 25px; height: 15px;">
<div style=" width: 40%;">无人机当前载弹量：</div>
<div>{{ UavInfoSelect.uavBullet }} 发<span :v-if="UavInfoSelect.UavPreMaintain<4" style="color: red;margin-left: 10px;">(注意当前载弹量)</span></div>
<img src="../../static/image/uav/shuxian.png" class="shuxian" style="width: 25px; height: 15px;">
<div style=" width: 40%;">无人机当前载弹量：</div>
<div>{{ UavInfoSelect.uavBullet }} 发<span :v-if="UavInfoSelect.UavPreMaintain < 4"
style="color: red;margin-left: 10px;">(注意当前载弹量)</span></div>
</div>
<div class="text item">
<img src="../../static/image/uav/shuxian.png" class="shuxian" style="width: 25px; height: 15px;">
<div style="width: 40%;">无人机上次保养时间：</div>
<div>{{ UavInfoSelect.UavPreMaintain }}</div>
<img src="../../static/image/uav/shuxian.png" class="shuxian" style="width: 25px; height: 15px;">
<div style="width: 40%;">无人机上次保养时间：</div>
<div>{{ UavInfoSelect.UavPreMaintain }}</div>
</div>
<div class="text item">
<img src="../../static/image/uav/shuxian.png" class="shuxian" style="width: 25px; height: 15px;">
<div style="width: 40%;">无人机上次加水时间：</div>
<div>{{ UavInfoSelect.UavWaterNumber }}</div>
<img src="../../static/image/uav/shuxian.png" class="shuxian" style="width: 25px; height: 15px;">
<div style="width: 40%;">无人机上次加水时间：</div>
<div>{{ UavInfoSelect.UavWaterNumber }}</div>
</div>
<div class="text item">
<img src="../../static/image/uav/shuxian.png" class="shuxian" style="width: 25px; height: 15px;">
<div style=" width: 40%;">无人机当前电量：</div>
<div>{{ UavInfoSelect.UavCurBattery }}</div>
<img src="../../static/image/uav/shuxian.png" class="shuxian" style="width: 25px; height: 15px;">
<div style=" width: 40%;">无人机当前电量：</div>
<div>{{ UavInfoSelect.UavCurBattery }}</div>
</div>
</div>
</div>
<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" @click="showUavWorkTableInfo(UavInfoSelect)">查看详细记录</el-button>
<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"
@click="showUavWorkTableInfo(UavInfoSelect)">查看详细记录</el-button>
</div>
</div>
</div>
</div>
<!-- 可视无人机调度栏 -->
<div class="box_footer_right" style="height: 100%;width: 70%;">
<div class="box_title">可视无人机调度栏</div>
<div class="box_footer_right_content">
<div class="box_footer_content_right" >
<uavTaskShow :key="Date.now()" :showWorkUavInfo="CurWorkUavInfo" style="width: 100%;"></uavTaskShow>
</div>
</div>
<div class="box_footer_right" style="height: 100%;width: 70%;">
<div class="box_title">可视无人机调度栏</div>
<div class="box_footer_right_content">
<div class="box_footer_content_right">
<uavTaskShow :key="Date.now()" :showWorkUavInfo="CurWorkUavInfo" style="width: 100%;"></uavTaskShow>
</div>
</div>
</div>
</div>
<!-- 展示无人机的增加页面 -->
<el-drawer
v-model="isAddUav"
:with-header="false"
direction="ttb"
custom-class="top-center-drawer"
size="auto"
@close="closeAddNewUavInfo">
<div class="drawer-content">
<el-form
ref="addNewUavInfoRef"
:model="addUavInfoList"
:rules="uavAddRules"
label-width="200px"
label-position="left"
>
<!-- 编号 -->
<el-form-item label="无人机编号" prop="UavNum">
<el-input
v-model="addUavInfoList.UavNum"
placeholder="请输入无人机编号"
clearable>
</el-input>
</el-form-item>
<el-form-item label="无人机记录时间" >
<el-input
:value="addUavInfoList.UavRecodeTime = dayjs().format('YYYY-MM-DD HH:mm:ss') "
disabled>
</el-input>
</el-form-item>
<el-form-item label="无人机状态" >
<el-input
value="正常"
placeholder="请输入无人机状态"
disabled>
</el-input>
</el-form-item>
<el-form-item label="无人机载弹量" prop="uavBullet">
<el-input
v-model="addUavInfoList.uavBullet"
placeholder="请输入无人机载弹量"
clearable
>
</el-input>
</el-form-item>
<el-form-item label="无人机上次保养时间" >
<el-input
:value="addUavInfoList.UavPreMaintain=dayjs().format('YYYY-MM-DD HH:mm:ss') "
disabled>
</el-input>
</el-form-item>
<el-form-item label="无人机上次加水时间" >
<el-input
:value="addUavInfoList.UavWaterNumber = dayjs().format('YYYY-MM-DD HH:mm:ss') "
disabled>
</el-input>
</el-form-item>
<el-form-item label="无人机当前电量" prop="UavCurBattery">
<el-input
v-model="addUavInfoList.UavCurBattery"
placeholder="请输入无人机当前电量"
clearable>
</el-input>
</el-form-item>
<!-- 操作按钮（关键修改部分） -->
<el-form-item class="action-buttons">
<el-button
type="primary"
@click="submitForm"
style="flex: 1;">
确认添加
</el-button>
<el-button
@click="isAddUav = false"
style="flex: 1; margin-left: 10px;">
取消
</el-button>
</el-form-item>
</el-form>
</div>
</el-drawer>
<el-drawer v-model="isAddUav" :with-header="false" direction="ttb" custom-class="top-center-drawer" size="auto"
@close="closeAddNewUavInfo">
<div class="drawer-content">
<el-form ref="addNewUavInfoRef" :model="addUavInfoList" :rules="uavAddRules" label-width="200px"
label-position="left">
<!-- 编号 -->
<el-form-item label="无人机编号" prop="UavNum">
<el-input v-model="addUavInfoList.UavNum" placeholder="请输入无人机编号" clearable>
</el-input>
</el-form-item>
<el-form-item label="无人机记录时间">
<el-input :value="addUavInfoList.UavRecodeTime = dayjs().format('YYYY-MM-DD HH:mm:ss')" disabled>
</el-input>
</el-form-item>
<el-form-item label="无人机状态">
<el-input value="正常" placeholder="请输入无人机状态" disabled>
</el-input>
</el-form-item>
<el-form-item label="无人机载弹量" prop="uavBullet">
<el-input v-model="addUavInfoList.uavBullet" placeholder="请输入无人机载弹量" clearable>
</el-input>
</el-form-item>
<el-form-item label="无人机上次保养时间">
<el-input :value="addUavInfoList.UavPreMaintain = dayjs().format('YYYY-MM-DD HH:mm:ss')" disabled>
</el-input>
</el-form-item>
<el-form-item label="无人机上次加水时间">
<el-input :value="addUavInfoList.UavWaterNumber = dayjs().format('YYYY-MM-DD HH:mm:ss')" disabled>
</el-input>
</el-form-item>
<el-form-item label="无人机当前电量" prop="UavCurBattery">
<el-input v-model="addUavInfoList.UavCurBattery" placeholder="请输入无人机当前电量" clearable>
</el-input>
</el-form-item>
<!-- 操作按钮（关键修改部分） -->
<el-form-item class="action-buttons">
<el-button type="primary" @click="submitForm" style="flex: 1;">
确认添加
</el-button>
<el-button @click="isAddUav = false" style="flex: 1; margin-left: 10px;">
取消
</el-button>
</el-form-item>
</el-form>
</div>
</el-drawer>
<!-- 展示实时灭火信息 -->
<el-dialog
v-model="isShowUavdetailedInfo"
width="1300px"
align-center
class="uav-detail-dialog"
@close="closeUavdetailedInfo"
style="background-color: rgba(0, 0, 0, 0);"
>
<el-dialog v-model="isShowUavdetailedInfo" 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-info-card">
<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>
</div>
<div class="uav-content-grid">
<div class="uav-table-section">
<UavTable
:UavInfoSelect="UavInfoSelect[0]"
/>
<UavTable :UavInfoSelect="UavInfoSelect[0]" />
</div>
<div class="uav-visual-section" >
<uavTaskShow
:showWorkUavInfo="UavInfoSelect"
/>
<div class="uav-visual-section">
<uavTaskShow :showWorkUavInfo="UavInfoSelect" />
</div>
</div>
</div>
......@@ -245,33 +201,30 @@
<!-- 实时视频区块 -->
<div class="video-card">
<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>
</div>
<div class="video-content">
<div class="video-wrapper elevated-card">
<video
controls
class="video-player"
>
<video controls class="video-player">
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
</video>
<div class="video-badge">
<el-tag type="danger" effect="dark" class="live-tag">
<el-icon><VideoPlay /></el-icon>
<el-icon>
<VideoPlay />
</el-icon>
实时视频
</el-tag>
</div>
</div>
<div class="video-controls">
<el-button
type="primary"
size="large"
class="control-btn"
@click="handleControl"
>
<el-icon><Connection /></el-icon>
<el-button type="primary" size="large" class="control-btn" @click="handleControl">
<el-icon>
<Connection />
</el-icon>
接管控制
</el-button>
</div>
......@@ -279,37 +232,27 @@
</div>
</div>
</el-dialog>
<!-- 展示无人机的具体的历史作业信息 -->
<el-dialog
v-model="isUavWorkDialogVisible"
width="1300px"
align-center
class="uav-detail-dialog"
@close="closeUavdetailedInfo"
style="background-color: rgba(0, 0, 0, 0);"
>
<!-- 展示无人机的具体的历史作业信息 -->
<el-dialog v-model="isUavWorkDialogVisible" 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-info-card">
<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>
</div>
<div class="uav-content-grid">
<div class="uav-table-section">
<UavTable
:UavInfoSelect="UavInfoSelect[0]"
/>
<UavTable :UavInfoSelect="UavInfoSelect[0]" />
</div>
<div class="uav-visual-section" >
<uavTaskShow
:showWorkUavInfo="UavInfoSelect"
/>
<div class="uav-visual-section">
<uavTaskShow :showWorkUavInfo="UavInfoSelect" />
</div>
</div>
</div>
......@@ -317,17 +260,19 @@
<!-- 实时视频区块 -->
<div class="video-card">
<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>
</div>
<div class="video-content1">
<uavWorkTable ></uavWorkTable>
<uavWorkTable></uavWorkTable>
</div>
</div>
</div>
</el-dialog>
</div>
......@@ -349,7 +294,7 @@ const uavAddRules = {
],
uavBullet: [
{ required: true, message: '请输入无人机载弹量', trigger: 'blur' },
{
{
validator: (rule, value, callback) => {
if (!/^\d+$/.test(value)) {
callback(new Error('载弹量必须为数字'));
......@@ -382,20 +327,20 @@ const uavAddRules = {
const isUavWorkDialogVisible = ref(false)
const showUavWorkTableInfo = () => {
isUavWorkDialogVisible.value = true
}
const addUavInfoList = ref({
id:"",
id: "",
UavNum: 'dfasdfasdfadfadsfd',
UavRecodeTime: "",
UavCurState: 0,
UavCruWorkState: 0,
UavPreMaintain:"",
UavWaterNumber:"",
UavCurBattery:0,
isFiex:0,
active:0,
uavBullet:0
UavPreMaintain: "",
UavWaterNumber: "",
UavCurBattery: 0,
isFiex: 0,
active: 0,
uavBullet: 0
})
const addNewUavInfoRef = ref(null)
......@@ -405,29 +350,29 @@ const closeAddNewUavInfo = () => {
}
const submitForm = () => {
// if (!formEl) returnaddNewUavInfoRef
console.log("addUavInfoList---------------------****************----------------",addUavInfoList.value)
console.log("addUavInfoList---------------------****************----------------", addUavInfoList.value)
addNewUavInfoRef.value.validate((valid) => {
if (valid) {
addUavInfoList.value.id = Date.now()
// 这里要发往服务器，获取返回的状态码，根据状态码判断是否成功
ElMessage({
message: '添加无人机成功',
type: 'success',
})
addNewUavInfoRef.value?.resetFields()
addNewUavInfoRef.value?.resetFields()
isAddUav.value = false
CurWorkUavInfo.value.unshift(addUavInfoList.value)
}else {
} else {
ElMessage({
message: '请输入正确的无人机信息',
type: 'error',
})
}
})
})
}
const route = useRoute();
const router = useRouter();
......@@ -439,7 +384,7 @@ onMounted(() => {
CurWorkUavInfo.value = CurWorkUavInfo.value.filter(item => item.id != route.query.uavId)
CurWorkUavInfo.value.unshift(curSelsetOneUavInfo.value[0])
UavInfoSelect.value = curSelsetOneUavInfo.value[0]
console.log("curSelsetOneUavInfo", curSelsetOneUavInfo.value,CurWorkUavInfo)
console.log("curSelsetOneUavInfo", curSelsetOneUavInfo.value, CurWorkUavInfo)
}
})
const isShowUavdetailedInfo = ref(false)
......@@ -451,25 +396,25 @@ const addUvaHandFn = () => {
isAddUav.value = true
}
function showUavMeiHuoInfo(UavInfoSelect){
function showUavMeiHuoInfo(UavInfoSelect) {
showOneUavTaskShowInfo.value = UavInfoSelect
isShowUavdetailedInfo.value = true
console.log("-----------------------------------------uavInfo",showOneUavTaskShowInfo.value )
console.log("-----------------------------------------uavInfo", showOneUavTaskShowInfo.value)
}
// 当前页面展示的无人机信息
const CurWorkUavInfo = ref([{
id:1,
id: 1,
UavNum: "001",
UavRecodeTime: 10,
UavCurState: 0,
UavCruWorkState: 1,
UavPreMaintain:"20235153-03-01",
UavWaterNumber:"2023-03-01",
UavCurBattery:100,
isFiex:0,
active:1,
uavBullet :3
UavPreMaintain: "20235153-03-01",
UavWaterNumber: "2023-03-01",
UavCurBattery: 100,
isFiex: 0,
active: 1,
uavBullet: 3
},
{
id: 2,
......@@ -477,12 +422,12 @@ const CurWorkUavInfo = ref([{
UavRecodeTime: 10,
UavCurState: 1,
UavCruWorkState: 1,
UavPreMaintain:"2023-03-01",
UavWaterNumber:"2023-03-01",
UavCurBattery:100,
isFiex:1,
active:2,
uavBullet :3
UavPreMaintain: "2023-03-01",
UavWaterNumber: "2023-03-01",
UavCurBattery: 100,
isFiex: 1,
active: 2,
uavBullet: 3
},
{
id: 3,
......@@ -490,39 +435,39 @@ const CurWorkUavInfo = ref([{
UavRecodeTime: 10,
UavCurState: 2,
UavCruWorkState: 1,
UavPreMaintain:"2023-03-01",
UavWaterNumber:"2023-03-01",
UavCurBattery:100,
isFiex:0,
active:3,
uavBullet :3
UavPreMaintain: "2023-03-01",
UavWaterNumber: "2023-03-01",
UavCurBattery: 100,
isFiex: 0,
active: 3,
uavBullet: 3
},
{
id: 4,
UavNum: "004",
UavRecodeTime: 10,
UavCurState: 2,
UavCruWorkState: 1,
UavPreMaintain:"2023-03-01",
UavWaterNumber:"2023-03-01",
UavCurBattery:100,
isFiex:0,
active:4,
uavBullet :3
UavPreMaintain: "2023-03-01",
UavWaterNumber: "2023-03-01",
UavCurBattery: 100,
isFiex: 0,
active: 4,
uavBullet: 3
},
{
id:1,
id: 1,
UavNum: "001",
UavRecodeTime: 10,
UavCurState: 0,
UavCruWorkState: 1,
UavPreMaintain:"20235153-03-01",
UavWaterNumber:"2023-03-01",
UavCurBattery:100,
isFiex:0,
active:1,
uavBullet :3
UavPreMaintain: "20235153-03-01",
UavWaterNumber: "2023-03-01",
UavCurBattery: 100,
isFiex: 0,
active: 1,
uavBullet: 3
},
{
id: 2,
......@@ -530,12 +475,12 @@ const CurWorkUavInfo = ref([{
UavRecodeTime: 10,
UavCurState: 1,
UavCruWorkState: 1,
UavPreMaintain:"2023-03-01",
UavWaterNumber:"2023-03-01",
UavCurBattery:100,
isFiex:1,
active:2,
uavBullet :3
UavPreMaintain: "2023-03-01",
UavWaterNumber: "2023-03-01",
UavCurBattery: 100,
isFiex: 1,
active: 2,
uavBullet: 3
},
{
id: 3,
......@@ -543,39 +488,39 @@ const CurWorkUavInfo = ref([{
UavRecodeTime: 10,
UavCurState: 2,
UavCruWorkState: 1,
UavPreMaintain:"2023-03-01",
UavWaterNumber:"2023-03-01",
UavCurBattery:100,
isFiex:0,
active:3,
uavBullet :3
UavPreMaintain: "2023-03-01",
UavWaterNumber: "2023-03-01",
UavCurBattery: 100,
isFiex: 0,
active: 3,
uavBullet: 3
},
{
id: 4,
UavNum: "004",
UavRecodeTime: 10,
UavCurState: 2,
UavCruWorkState: 1,
UavPreMaintain:"2023-03-01",
UavWaterNumber:"2023-03-01",
UavCurBattery:100,
isFiex:0,
active:4,
uavBullet :3
UavPreMaintain: "2023-03-01",
UavWaterNumber: "2023-03-01",
UavCurBattery: 100,
isFiex: 0,
active: 4,
uavBullet: 3
},
{
id:1,
id: 1,
UavNum: "001",
UavRecodeTime: 10,
UavCurState: 0,
UavCruWorkState: 1,
UavPreMaintain:"20235153-03-01",
UavWaterNumber:"2023-03-01",
UavCurBattery:100,
isFiex:0,
active:1,
uavBullet :3
UavPreMaintain: "20235153-03-01",
UavWaterNumber: "2023-03-01",
UavCurBattery: 100,
isFiex: 0,
active: 1,
uavBullet: 3
},
{
id: 2,
......@@ -583,12 +528,12 @@ const CurWorkUavInfo = ref([{
UavRecodeTime: 10,
UavCurState: 1,
UavCruWorkState: 1,
UavPreMaintain:"2023-03-01",
UavWaterNumber:"2023-03-01",
UavCurBattery:100,
isFiex:1,
active:2,
uavBullet :3
UavPreMaintain: "2023-03-01",
UavWaterNumber: "2023-03-01",
UavCurBattery: 100,
isFiex: 1,
active: 2,
uavBullet: 3
},
{
id: 3,
......@@ -596,31 +541,31 @@ const CurWorkUavInfo = ref([{
UavRecodeTime: 10,
UavCurState: 2,
UavCruWorkState: 1,
UavPreMaintain:"2023-03-01",
UavWaterNumber:"2023-03-01",
UavCurBattery:100,
isFiex:0,
active:3,
uavBullet :3
UavPreMaintain: "2023-03-01",
UavWaterNumber: "2023-03-01",
UavCurBattery: 100,
isFiex: 0,
active: 3,
uavBullet: 3
},
{
id: 4,
UavNum: "004",
UavRecodeTime: 10,
UavCurState: 2,
UavCruWorkState: 1,
UavPreMaintain:"2023-03-01",
UavWaterNumber:"2023-03-01",
UavCurBattery:100,
isFiex:0,
active:4,
uavBullet :3
UavPreMaintain: "2023-03-01",
UavWaterNumber: "2023-03-01",
UavCurBattery: 100,
isFiex: 0,
active: 4,
uavBullet: 3
},
])
const closeUavdetailedInfo = () => {
console.log("要在这里断开实时画面的连接")
}
const UavInfoSelect = ref([{
......@@ -629,18 +574,18 @@ const UavInfoSelect = ref([{
UavRecodeTime: 10,
UavCurState: 2,
UavCruWorkState: 1,
UavPreMaintain:"2023-03-01",
UavWaterNumber:"2023-03-01",
UavCurBattery:100,
isFiex:0,
active:4,
uavBullet :3
UavPreMaintain: "2023-03-01",
UavWaterNumber: "2023-03-01",
UavCurBattery: 100,
isFiex: 0,
active: 4,
uavBullet: 3
}])
const StateColor = ref(["#FBFA22","#06B0E1","#C50D10"])
const StateColor = ref(["#FBFA22", "#06B0E1", "#C50D10"])
const UvaCurState = ref(2)
const showUavdetailedInformation = (item) => {
console.log("test",item)
console.log("test", item)
UavInfoSelect.value.unshift(item)
UavInfoSelect.value.splice(1, 1)
// UavInfoSelect.value.shift(item)
......@@ -649,8 +594,6 @@ const showUavdetailedInformation = (item) => {
</script>
<style scoped>
/* 外层容器 */
.uavshow {
width: 100%;
......@@ -665,7 +608,8 @@ const showUavdetailedInformation = (item) => {
.uavlist {
width: 100%;
height: 100%;
position: relative; /* 关键2: 为滚动条提供定位上下文 */
position: relative;
/* 关键2: 为滚动条提供定位上下文 */
}
/* Element Plus 滚动条容器 */
......@@ -679,7 +623,7 @@ const showUavdetailedInformation = (item) => {
/* background-color: #fff; */
display: flex;
flex-direction: row;
/* flex-wrap: nowrap; 关键3: 禁止换行 */
height: 100%;
/* width: 50%; 关键4: 让宽度由内容决定 */
......@@ -698,7 +642,7 @@ const showUavdetailedInformation = (item) => {
/* margin-right: 15px; */
/* background-color: rgba(255, 255, 255, 0.2); */
border-radius: 4px;
flex-shrink: 0;
flex-shrink: 0;
}
/* 自定义滚动条样式 */
......@@ -712,16 +656,18 @@ const showUavdetailedInformation = (item) => {
}
.contenter{
.contenter {
height: 351px;
}
.contenterTitle {
display: flex;
justify-content: flex-start;
width: 100%;
height: 303px;
}
.title1 {
width: 100px;
height: 25px;
......@@ -762,8 +708,10 @@ const showUavdetailedInformation = (item) => {
flex-direction: column;
justify-content: center;
align-items: center;
color: white; /* 根据需要调整 */
color: white;
/* 根据需要调整 */
}
.text {
font-size: 14px;
}
......@@ -788,7 +736,8 @@ const showUavdetailedInformation = (item) => {
flex-direction: column;
justify-content: center;
align-items: center;
color: white; /* 根据需要调整 */
color: white;
/* 根据需要调整 */
overflow: hidden;
}
......@@ -802,78 +751,111 @@ const showUavdetailedInformation = (item) => {
padding-left: 10%;
display: flex;
align-items: center; /* 垂直居中 */
align-items: center;
/* 垂直居中 */
justify-content: center;
overflow: hidden;
}
.uav-icon {
width: 5%; /* 图片固定占5%宽度 */
height: auto; /* 高度自动保持比例 */
min-width: 15px; /* 最小宽度，防止图片过小 */
max-width: 24px; /* 最大宽度，防止图片过大 */
margin-right: 10px; /* 图片与文字间距 */
width: 5%;
/* 图片固定占5%宽度 */
height: auto;
/* 高度自动保持比例 */
min-width: 15px;
/* 最小宽度，防止图片过小 */
max-width: 24px;
/* 最大宽度，防止图片过大 */
margin-right: 10px;
/* 图片与文字间距 */
}
.uav-number {
flex: 1; /* 文字区域占剩余所有空间 */
white-space: nowrap; /* 防止文字换行 */
overflow: hidden; /* 超出部分隐藏 */
text-overflow: ellipsis; /* 超出显示省略号 */
font-size: clamp(12px, 1vw, 16px); /* 响应式字体大小 */
flex: 1;
/* 文字区域占剩余所有空间 */
white-space: nowrap;
/* 防止文字换行 */
overflow: hidden;
/* 超出部分隐藏 */
text-overflow: ellipsis;
/* 超出显示省略号 */
font-size: clamp(12px, 1vw, 16px);
/* 响应式字体大小 */
}
.second-item{
flex: 0 0 45%;; /* 其他div平分剩余空间 */
.second-item {
flex: 0 0 45%;
;
/* 其他div平分剩余空间 */
display: flex;
align-items: center; /* 垂直居中 */
align-items: center;
/* 垂直居中 */
width: 105.89px;
height: 90px;
background-image: url('../../static/image/uav/uav.png');
background-size: cover; /* 或者使用 contain */
background-position: center; /* 图片居中 */
background-repeat: no-repeat; /* 防止图片重复 */
background-size: cover;
/* 或者使用 contain */
background-position: center;
/* 图片居中 */
background-repeat: no-repeat;
/* 防止图片重复 */
/* background-color: #1976d2; */
}
.third-item {
margin-top: 15px;
display: flex; /* 容器使用 Flex 布局 */
display: flex;
/* 容器使用 Flex 布局 */
width: 50%;
min-height: 36px; /* 设置最小高度（根据需求调整），确保垂直居中有效 */
min-height: 36px;
/* 设置最小高度（根据需求调整），确保垂直居中有效 */
padding: 0 8px;
box-sizing: border-box;
display: flex; /* 子元素用 Flex 实现自身内容居中 */
justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中 */
display: flex;
/* 子元素用 Flex 实现自身内容居中 */
justify-content: center;
/* 水平居中 */
align-items: center;
/* 垂直居中 */
}
/* "状态显示" 区域：占5%宽度，文字垂直水平居中 */
.state-label {
width: 15%; /* 固定占比 */
min-width: 50px; /* 最小宽度，防止挤压 */
display: flex; /* 子元素用 Flex 实现自身内容居中 */
justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中 */
width: 15%;
/* 固定占比 */
min-width: 50px;
/* 最小宽度，防止挤压 */
display: flex;
/* 子元素用 Flex 实现自身内容居中 */
justify-content: center;
/* 水平居中 */
align-items: center;
/* 垂直居中 */
font-size: 15px;
white-space: nowrap; /* 禁止文字换行 */
white-space: nowrap;
/* 禁止文字换行 */
}
/* 无人机编号区域：占剩余宽度，文字垂直水平居中 */
.state-value {
flex: 1; /* 占剩余空间 */
display: flex; /* 子元素用 Flex 实现自身内容居中 */
justify-content: center; /* 水平居左（或改为 center 完全居中） */
align-items: center; /* 垂直居中 */
flex: 1;
/* 占剩余空间 */
display: flex;
/* 子元素用 Flex 实现自身内容居中 */
justify-content: center;
/* 水平居左（或改为 center 完全居中） */
align-items: center;
/* 垂直居中 */
font-size: 15px;
padding-left: 4px;
margin-left: 15px; /* 与左侧标签间距 */
margin-left: 15px;
/* 与左侧标签间距 */
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
......@@ -885,12 +867,14 @@ const showUavdetailedInformation = (item) => {
.third-item {
min-height: 30px;
}
.state-label, .state-value {
.state-label,
.state-value {
font-size: 12px;
}
}
.box_footer{
.box_footer {
width: 100%;
height: 470px;
display: flex;
......@@ -902,78 +886,88 @@ const showUavdetailedInformation = (item) => {
width: 41.7%;
height: 100%;
color: #ffffff;
margin-right:24px ;
margin-right: 24px;
line-height: 25px;
border-radius: 5px;
border: 1px #06B0E1 solid ;
border: 1px #06B0E1 solid;
}
.box_footer_content{
.box_footer_content {
margin-left: 24px;
width: 100%;
height: 60%;
}
.box_footer_content_right{
.box_footer_content_right {
/* margin-left: 24px; */
width: 100%;
height: 100%;
}
.box_footer_content_up{
.box_footer_content_up {
margin-left: 30px;
width: 80%;
height: 100%;
color: #ffffff;
display: flex;
flex-direction: column; /* 使容器为垂直方向的 Flex 容器 */
justify-content: center; /* 垂直居中 */
flex-direction: column;
/* 使容器为垂直方向的 Flex 容器 */
justify-content: center;
/* 垂直居中 */
overflow: hidden;
/* align-items: center; 水平居中 */
/* text-align: center; 文字水平居中 */
}
td{
td {
/* width: 33.3%; */
/* height: %; */
text-align: center;
}
.td_shuxian{
.td_shuxian {
width: 1px;
background-color: aquamarine;
}
.shuxian{
.shuxian {
width: 5px;
height: 20px;
display: flex;
flex-direction: column; /* 使容器为垂直方向的 Flex 容器 */
justify-content: center;
flex-direction: column;
/* 使容器为垂直方向的 Flex 容器 */
justify-content: center;
}
.box_footer_content_right {
height: 100%;
width: 100%;
overflow: auto;
position: relative; /* 为内部绝对定位元素提供参考 */
position: relative;
/* 为内部绝对定位元素提供参考 */
}
/* 可选：美化滚动条（仅支持WebKit浏览器） */
.box_footer_content_right::-webkit-scrollbar {
width: 6px;
}
.box_footer_content_right::-webkit-scrollbar-thumb {
background: rgba(0,0,0,0.2);
background: rgba(0, 0, 0, 0.2);
border-radius: 3px;
}
.box_title{
.box_title {
width: 100%;
height: 10%;
......@@ -985,15 +979,18 @@ td{
line-height: 25px;
/* margin-top: 14px; */
border-radius: 4px;
display: flex;
display: flex;
/* justify-content: center; 水平居中 */
align-items: center; /* 垂直居中 */
align-items: center;
/* 垂直居中 */
}
.box_title1{
.box_title1 {
width: 100%;
height: 13%;
}
.box_footer_content_down{
.box_footer_content_down {
width: 80%;
overflow: hidden;
/* margin-top: -15%; */
......@@ -1006,27 +1003,34 @@ td{
/* background-color: #000000; */
}
.box_footer_right_content{
.box_footer_right_content {
width: 100%;
height: 90%;
/* margin-top: 14px; */
color: #ffffff;
display: flex;
flex-direction: column; /* 使容器为垂直方向的 Flex 容器 */
justify-content: center; /* 垂直居中 */
align-items: center; /* 水平居中 */
text-align: center; /* 文字水平居中 */
flex-direction: column;
/* 使容器为垂直方向的 Flex 容器 */
justify-content: center;
/* 垂直居中 */
align-items: center;
/* 水平居中 */
text-align: center;
/* 文字水平居中 */
/* background-color: #082B4F; */
border: 1px #06B0E1 solid ;
border: 1px #06B0E1 solid;
border-radius: 4px;
}
.item{
border-bottom: 1px #979797 solid ;
.item {
border-bottom: 1px #979797 solid;
width: 80%;
display: flex;
align-items: center; /* 垂直居中 */
align-items: center;
/* 垂直居中 */
}
.infinite-list {
height: 100%;
width: 100%;
......@@ -1034,6 +1038,7 @@ td{
margin: 0;
list-style: none;
}
.infinite-list .infinite-list-item {
display: flex;
align-items: center;
......@@ -1045,43 +1050,49 @@ td{
}
.infinite-list-item2 {
display: flex;
align-items: center;
justify-content: center;
height: 175px;
background-color:rgb(1, 42, 73);
/* opacity: 0.45; */
margin: 10px;
display: flex;
align-items: center;
justify-content: center;
height: 175px;
background-color: rgb(1, 42, 73);
/* opacity: 0.45; */
margin: 10px;
color: var(--el-color-primary);
color: var(--el-color-primary);
}
.flex-item {
height: 100%;
display: flex;
flex-direction: column;
align-items: center; /* 水平居中 */
justify-content: center; /* 垂直居中 */
align-items: center;
/* 水平居中 */
justify-content: center;
/* 垂直居中 */
}
.flex-item2 {
flex: 1; /* 每个div平分剩余空间 */
flex: 1;
/* 每个div平分剩余空间 */
/* 添加其他样式，如边框等 */
}
.first-item2 {
flex: 0 0 20%; /* 第一个div占20%的空间 */
flex: 0 0 20%;
/* 第一个div占20%的空间 */
/* background-color: red; 设置背景颜色 */
}
.second-item2 {
flex: 0 0 60%; /* 第二个div占60%的空间 */
flex: 0 0 60%;
/* 第二个div占60%的空间 */
margin-top: 50px;
}
.infinite-list .infinite-list-item + .list-item {
.infinite-list .infinite-list-item+.list-item {
margin-top: 10px;
}
......@@ -1089,9 +1100,12 @@ td{
margin-top: 20px;
display: flex;
flex-direction: column;
align-items: center; /* 水平居中 */
justify-content: center; /* 垂直居中 */
height: 100%; /* 根据需要调整 */
align-items: center;
/* 水平居中 */
justify-content: center;
/* 垂直居中 */
height: 100%;
/* 根据需要调整 */
color: #ffffff;
}
......@@ -1109,6 +1123,7 @@ td{
.step-icon:hover {
transform: scale(1.1);
}
.step-icon1 {
/* width: 200% !important;
height: auto !important; */
......@@ -1119,8 +1134,10 @@ td{
.step-icon1:hover {
transform: scale(0.95);
cursor: pointer; /* 鼠标悬停时显示手型 */
transition: all 0.3s ease; /* 平滑过渡效果 */
cursor: pointer;
/* 鼠标悬停时显示手型 */
transition: all 0.3s ease;
/* 平滑过渡效果 */
}
......@@ -1143,6 +1160,7 @@ td{
padding: 10px;
flex: 1;
}
:deep(.el-step__title) {
color: #fff !important;
font-size: 13px;
......@@ -1160,13 +1178,13 @@ td{
display: flex;
align-items: center;
margin-top: 16px;
.header-icon {
font-size: 20px;
color: #409eff;
margin-right: 8px;
}
.header-title {
font-size: 18px;
font-weight: 600;
......@@ -1175,12 +1193,13 @@ td{
-webkit-text-fill-color: transparent;
}
}
.uav-detail-dialog {
/* :deep(.el-dialog__header) {
display: none;
} */
/* :deep(.el-dialog__body) {
padding: 0;
background: linear-gradient(135deg, #051d39 0%, #0a2b50 100%);
......@@ -1196,13 +1215,13 @@ td{
display: flex;
align-items: center;
margin-bottom: 16px;
.header-icon {
font-size: 20px;
color: #409eff;
margin-right: 8px;
}
.header-title {
font-size: 18px;
font-weight: 600;
......@@ -1211,11 +1230,12 @@ td{
-webkit-text-fill-color: transparent;
}
}
.uav-visual-section{
.uav-visual-section {
display: flex;
flex-direction: column;
justify-content: center;
border-radius: 8px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
border: 1px solid rgba(64, 158, 255, 0.2);
......@@ -1226,20 +1246,20 @@ td{
.uav-info-card {
margin-bottom: 24px;
.uav-content-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
> div {
>div {
padding: 16px;
}
}
}
.video-card {
.video-content {
/* display: grid;
grid-template-columns: 4fr; */
......@@ -1249,39 +1269,40 @@ td{
border: 1px solid rgba(64, 158, 255, 0.2);
border-radius: 6px;
}
.video-wrapper {
position: relative;
overflow: hidden;
.video-player {
width: 100%;
display: block;
border-radius: 6px;
}
.video-badge {
position: absolute;
top: 12px;
right: 12px;
.live-tag {
font-weight: bold;
letter-spacing: 1px;
}
}
}
.video-controls {
display: flex;
flex-direction: column;
justify-content: center;
.control-btn {
width: 40%;
height: 48px;
font-size: 16px;
margin-right: 20px;
i {
margin-right: 8px;
}
......@@ -1295,7 +1316,8 @@ td{
text-align: right;
border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.uav-table-section{
.uav-table-section {
border-radius: 8px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
border: 1px solid rgba(64, 158, 255, 0.2);
......@@ -1305,10 +1327,12 @@ td{
.uav-info-card {
margin-bottom: 10px;
.uav-content-grid {
display: grid;
grid-template-columns: 0.5fr 1fr;
> div {
>div {
padding: 5px;
}
}
......@@ -1320,45 +1344,43 @@ td{
grid-template-columns: 3fr 1fr;
gap: 16px;
}
.video-wrapper {
position: relative;
overflow: hidden;
.video-player {
width: 100%;
display: block;
border-radius: 6px;
}
.video-badge {
position: absolute;
top: 12px;
right: 12px;
.live-tag {
font-weight: bold;
letter-spacing: 1px;
}
}
}
.video-controls {
display: flex;
flex-direction: column;
justify-content: center;
.control-btn {
width: 100%;
height: 48px;
font-size: 16px;
i {
margin-right: 8px;
}
}
}
}
</style>
\ No newline at end of file
src/views/uavshowdate/index.vue
浏览文件 @ 8b7268d4
......@@ -259,7 +259,7 @@ const containerStyle = computed(() => ({
.main-content {
display: flex;
gap: var(--card-spacing);
padding: 0.4rem;
padding: 0.4rem 0;
height: 100vh;
box-sizing: border-box;
}
......
src/views/uavshowdate/uavmanage/index.vue
浏览文件 @ 8b7268d4
......@@ -282,7 +282,7 @@ const containerStyle = computed(() => ({
.main-content {
display: flex;
gap: var(--card-spacing);
padding: 0.4rem;
padding: 0.4rem 0;
height: 100vh;
box-sizing: border-box;
}
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论