|
|
<!DOCTYPE html>
|
|
|
<html lang="zh-CN">
|
|
|
|
|
|
<head>
|
|
|
<meta charset="UTF-8">
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
<title>无人机应用服务平台</title>
|
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
|
<link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
|
|
|
<!-- <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.8/dist/chart.umd.min.js"></script> -->
|
|
|
<!-- <link href="./model/font-awesome.min.css" rel="stylesheet"> -->
|
|
|
<script src="./model/chart.umd.min.js"></script>
|
|
|
<style>
|
|
|
#mapimg{
|
|
|
background: url('/img/海岛测绘.png') top no-repeat;
|
|
|
background-size: 100% 100%;
|
|
|
}
|
|
|
/* 新增顶部标题栏样式 */
|
|
|
.topDiv {
|
|
|
width: 100%;
|
|
|
height: 8vh;
|
|
|
background: url('/assets/img/topBg.png') top no-repeat;
|
|
|
background-size: 100% 115%;
|
|
|
display: flex;
|
|
|
justify-content: center;
|
|
|
z-index: 990;
|
|
|
position: relative;
|
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
|
|
|
}
|
|
|
|
|
|
.topDiv .center {
|
|
|
font-family: PangMenZhengDao, 'Source Han Sans CN';
|
|
|
font-weight: 400;
|
|
|
font-size: 4.1vh;
|
|
|
color: #ffffff;
|
|
|
align-self: center;
|
|
|
margin-top: -40px;
|
|
|
}
|
|
|
|
|
|
.topDiv .left {
|
|
|
position: absolute;
|
|
|
top: 1vh;
|
|
|
left: 1vw;
|
|
|
color: #ffffff;
|
|
|
}
|
|
|
|
|
|
.topDiv .left span:nth-child(1) {
|
|
|
font-weight: bold;
|
|
|
font-size: 0.8vw;
|
|
|
margin-right: 0.5vh;
|
|
|
}
|
|
|
|
|
|
.topDiv .right {
|
|
|
position: absolute;
|
|
|
top: 50%;
|
|
|
right: 3vw;
|
|
|
transform: translateY(-50%);
|
|
|
height: 60%;
|
|
|
}
|
|
|
|
|
|
.topDiv .right img {
|
|
|
height: 100%;
|
|
|
object-fit: contain;
|
|
|
}
|
|
|
|
|
|
/* 调整主内容区域的顶部边距 */
|
|
|
#main-content {
|
|
|
margin-top: 0px 10px;
|
|
|
position: absolute;
|
|
|
left: 260px;
|
|
|
}
|
|
|
|
|
|
/* 重置默认样式 */
|
|
|
* {
|
|
|
margin: 0;
|
|
|
padding: 0;
|
|
|
box-sizing: border-box;
|
|
|
font-family: 'Segoe UI', Arial, sans-serif;
|
|
|
}
|
|
|
|
|
|
/* 页面背景 */
|
|
|
body {
|
|
|
background: url('/assets/img/bg.png') no-repeat;
|
|
|
background-size: 100% 100%;
|
|
|
color: #e0f0ff;
|
|
|
height: 100vh;
|
|
|
background-color: #0a1a2a;
|
|
|
overflow-x: hidden;
|
|
|
overflow-y: auto;
|
|
|
}
|
|
|
|
|
|
/* 顶部导航栏 */
|
|
|
header {
|
|
|
background: rgba(12, 42, 73, 0.1);
|
|
|
backdrop-filter: blur(10px);
|
|
|
border-bottom: 1px solid rgba(64, 156, 255, 0.3);
|
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
|
|
|
}
|
|
|
|
|
|
/* 侧边栏 */
|
|
|
aside {
|
|
|
background: rgba(12, 42, 73, 0.1);
|
|
|
backdrop-filter: blur(10px);
|
|
|
border-right: 1px solid rgba(64, 156, 255, 0.3);
|
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
|
|
|
}
|
|
|
|
|
|
/* 卡片样式 */
|
|
|
.bg-white {
|
|
|
background: rgba(12, 42, 73, 0.1) !important;
|
|
|
backdrop-filter: blur(10px);
|
|
|
border: 1px solid rgba(64, 156, 255, 0.3);
|
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
|
|
|
color: #e0f0ff;
|
|
|
border-radius: 8px;
|
|
|
}
|
|
|
|
|
|
/* 卡片样式 */
|
|
|
.bg-white1 {
|
|
|
background: rgba(12, 42, 73, 0.1) !important;
|
|
|
backdrop-filter: blur(1px);
|
|
|
border: 1px solid rgba(64, 156, 255, 0.3);
|
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
|
|
|
color: #e0f0ff;
|
|
|
border-radius: 8px;
|
|
|
}
|
|
|
|
|
|
.card-shadow {
|
|
|
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
|
|
|
}
|
|
|
|
|
|
.card-shadow-hover:hover {
|
|
|
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
|
|
|
transform: translateY(-2px);
|
|
|
border: 1px solid #4fc3f7;
|
|
|
}
|
|
|
|
|
|
/* 按钮样式 */
|
|
|
.bg-blue-600 {
|
|
|
background: linear-gradient(to bottom, #4fc3f7, #0277bd) !important;
|
|
|
border: none;
|
|
|
}
|
|
|
|
|
|
.bg-blue-600:hover {
|
|
|
background: linear-gradient(to bottom, #66d0ff, #0386d8) !important;
|
|
|
box-shadow: 0 0 8px rgba(79, 195, 247, 0.7);
|
|
|
}
|
|
|
|
|
|
.text-blue-600 {
|
|
|
color: #4fc3f7 !important;
|
|
|
}
|
|
|
|
|
|
.border-blue-500 {
|
|
|
border-color: #4fc3f7 !important;
|
|
|
}
|
|
|
|
|
|
button:hover {
|
|
|
transform: translateY(-2px);
|
|
|
transition: all 0.3s;
|
|
|
}
|
|
|
|
|
|
/* 状态标签样式 */
|
|
|
.drone-status-active {
|
|
|
background: linear-gradient(to top, #4fc3f7, #0277bd) !important;
|
|
|
text-shadow: 0 0 8px rgba(79, 195, 247, 0.7);
|
|
|
}
|
|
|
|
|
|
.drone-status-idle {
|
|
|
background: linear-gradient(to top, #66bb6a, #388e3c) !important;
|
|
|
text-shadow: 0 0 8px rgba(102, 187, 106, 0.7);
|
|
|
}
|
|
|
|
|
|
.drone-status-maintenance {
|
|
|
background: linear-gradient(to top, #ff9800, #f57c00) !important;
|
|
|
text-shadow: 0 0 8px rgba(255, 152, 0, 0.7);
|
|
|
}
|
|
|
|
|
|
/* 文字颜色 */
|
|
|
.text-gray-500 {
|
|
|
color: #a0d2ff !important;
|
|
|
}
|
|
|
|
|
|
.text-gray-600 {
|
|
|
color: #c2e0ff !important;
|
|
|
}
|
|
|
|
|
|
.text-green-600 {
|
|
|
color: #66bb6a !important;
|
|
|
text-shadow: 0 0 8px rgba(102, 187, 106, 0.7);
|
|
|
}
|
|
|
|
|
|
.text-red-500,
|
|
|
.text-red-600 {
|
|
|
color: #f44336 !important;
|
|
|
text-shadow: 0 0 8px rgba(244, 67, 54, 0.7);
|
|
|
}
|
|
|
|
|
|
.text-yellow-600 {
|
|
|
color: #ff9800 !important;
|
|
|
text-shadow: 0 0 8px rgba(255, 152, 0, 0.7);
|
|
|
}
|
|
|
|
|
|
.text-teal-500 {
|
|
|
color: #26c6da !important;
|
|
|
text-shadow: 0 0 8px rgba(38, 198, 218, 0.7);
|
|
|
}
|
|
|
|
|
|
/* 表格样式 */
|
|
|
.bg-gray-50 {
|
|
|
background: rgba(25, 55, 95, 0.6) !important;
|
|
|
}
|
|
|
|
|
|
.data-grid-row:hover {
|
|
|
background: rgba(40, 80, 130, 0.7) !important;
|
|
|
transform: translateY(-1px);
|
|
|
}
|
|
|
|
|
|
.data-grid-cell {
|
|
|
color: #e0f0ff;
|
|
|
}
|
|
|
|
|
|
table th {
|
|
|
color: #4fc3f7;
|
|
|
font-weight: normal;
|
|
|
text-shadow: 0 0 8px rgba(79, 195, 247, 0.7);
|
|
|
}
|
|
|
|
|
|
table td {
|
|
|
border-bottom: 1px solid rgba(64, 156, 255, 0.3);
|
|
|
}
|
|
|
|
|
|
/* 侧边栏激活状态 */
|
|
|
.sidebar-item-active {
|
|
|
background: linear-gradient(to right, rgba(79, 195, 247, 0.3), rgba(2, 119, 189, 0.3)) !important;
|
|
|
border-left: 3px solid #4fc3f7;
|
|
|
}
|
|
|
|
|
|
/* 进度条样式 */
|
|
|
.bg-gray-200 {
|
|
|
background: rgba(25, 55, 95, 0.6) !important;
|
|
|
}
|
|
|
|
|
|
.bg-blue-600 {
|
|
|
background: linear-gradient(to right, #4fc3f7, #0277bd) !important;
|
|
|
}
|
|
|
|
|
|
.bg-green-600 {
|
|
|
background: linear-gradient(to right, #66bb6a, #388e3c) !important;
|
|
|
}
|
|
|
|
|
|
.bg-red-600 {
|
|
|
background: linear-gradient(to right, #f44336, #d32f2f) !important;
|
|
|
}
|
|
|
|
|
|
.bg-yellow-100 {
|
|
|
background: rgba(255, 238, 88, 0.2) !important;
|
|
|
color: #ffee58 !important;
|
|
|
}
|
|
|
|
|
|
.bg-blue-100 {
|
|
|
background: rgba(79, 195, 247, 0.2) !important;
|
|
|
color: #4fc3f7 !important;
|
|
|
}
|
|
|
|
|
|
.bg-green-100 {
|
|
|
background: rgba(102, 187, 106, 0.2) !important;
|
|
|
color: #66bb6a !important;
|
|
|
}
|
|
|
|
|
|
.bg-red-100 {
|
|
|
background: rgba(244, 67, 54, 0.2) !important;
|
|
|
color: #f44336 !important;
|
|
|
}
|
|
|
|
|
|
.bg-teal-100 {
|
|
|
background: rgba(38, 198, 218, 0.2) !important;
|
|
|
color: #26c6da !important;
|
|
|
}
|
|
|
|
|
|
/* 输入框和选择框 */
|
|
|
input,
|
|
|
select {
|
|
|
background: rgba(25, 55, 95, 0.6) !important;
|
|
|
border: 1px solid rgba(64, 156, 255, 0.3) !important;
|
|
|
color: #e0f0ff !important;
|
|
|
border-radius: 4px;
|
|
|
}
|
|
|
|
|
|
input:focus,
|
|
|
select:focus {
|
|
|
border-color: #4fc3f7 !important;
|
|
|
box-shadow: 0 0 8px rgba(79, 195, 247, 0.7) !important;
|
|
|
}
|
|
|
|
|
|
/* 滚动条 */
|
|
|
::-webkit-scrollbar {
|
|
|
width: 6px;
|
|
|
height: 6px;
|
|
|
}
|
|
|
|
|
|
::-webkit-scrollbar-track {
|
|
|
background: rgba(12, 42, 73, 0.3);
|
|
|
border-radius: 4px;
|
|
|
}
|
|
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
|
background: rgba(106, 149, 201, 0.5);
|
|
|
border-radius: 4px;
|
|
|
}
|
|
|
|
|
|
::-webkit-scrollbar-thumb:hover {
|
|
|
background: rgba(106, 149, 201, 0.7);
|
|
|
}
|
|
|
|
|
|
/* 警告样式 */
|
|
|
.weather-alert {
|
|
|
background: rgba(255, 152, 0, 0.1) !important;
|
|
|
border: 1px solid rgba(255, 152, 0, 0.3) !important;
|
|
|
}
|
|
|
|
|
|
/* 标题样式 */
|
|
|
h1,
|
|
|
h2,
|
|
|
h3,
|
|
|
h4,
|
|
|
h5,
|
|
|
h6 {
|
|
|
color: #e0f0ff;
|
|
|
text-shadow: 0 0 8px rgba(79, 195, 247, 0.3);
|
|
|
}
|
|
|
|
|
|
/* 链接样式 */
|
|
|
a {
|
|
|
color: #4fc3f7;
|
|
|
text-decoration: none;
|
|
|
}
|
|
|
|
|
|
a:hover {
|
|
|
color: #66d0ff;
|
|
|
text-shadow: 0 0 8px rgba(79, 195, 247, 0.7);
|
|
|
}
|
|
|
|
|
|
/* 分隔线 */
|
|
|
.border-t,
|
|
|
.border-b,
|
|
|
.border-gray-200 {
|
|
|
border-color: rgba(64, 156, 255, 0.3) !important;
|
|
|
}
|
|
|
|
|
|
/* 地图样式 */
|
|
|
.map-overlay {
|
|
|
background: rgba(12, 42, 73, 0.7) !important;
|
|
|
backdrop-filter: blur(10px);
|
|
|
border: 1px solid rgba(64, 156, 255, 0.3);
|
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
|
|
|
}
|
|
|
|
|
|
/* 图表容器 */
|
|
|
.chart-container {
|
|
|
background: rgba(25, 55, 95, 0.3);
|
|
|
border-radius: 8px;
|
|
|
padding: 10px;
|
|
|
border: 1px solid rgba(64, 156, 255, 0.3);
|
|
|
}
|
|
|
|
|
|
/* 通知按钮 */
|
|
|
.notification-button {
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
.notification-button::after {
|
|
|
content: '';
|
|
|
position: absolute;
|
|
|
top: 5px;
|
|
|
right: 5px;
|
|
|
width: 8px;
|
|
|
height: 8px;
|
|
|
background: #f44336;
|
|
|
border-radius: 50%;
|
|
|
box-shadow: 0 0 8px rgba(244, 67, 54, 0.7);
|
|
|
}
|
|
|
|
|
|
/* 过渡动画 */
|
|
|
.transition-all {
|
|
|
transition: all 0.3s ease;
|
|
|
}
|
|
|
|
|
|
.transition-colors {
|
|
|
transition: colors 0.3s ease;
|
|
|
}
|
|
|
|
|
|
/* 悬停效果 */
|
|
|
.hover\:bg-gray-50:hover {
|
|
|
background: rgba(40, 80, 130, 0.7) !important;
|
|
|
}
|
|
|
|
|
|
.hover\:bg-gray-100:hover {
|
|
|
background: rgba(40, 80, 130, 0.7) !important;
|
|
|
}
|
|
|
|
|
|
/* 圆角 */
|
|
|
.rounded-lg {
|
|
|
border-radius: 8px !important;
|
|
|
}
|
|
|
|
|
|
.rounded-full {
|
|
|
border-radius: 50% !important;
|
|
|
}
|
|
|
|
|
|
/* 阴影 */
|
|
|
.shadow-sm {
|
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
|
|
}
|
|
|
|
|
|
.shadow {
|
|
|
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
|
|
|
}
|
|
|
|
|
|
/* Flex 布局 */
|
|
|
.flex {
|
|
|
display: flex;
|
|
|
}
|
|
|
|
|
|
.items-center {
|
|
|
align-items: center;
|
|
|
}
|
|
|
|
|
|
.justify-between {
|
|
|
justify-content: space-between;
|
|
|
}
|
|
|
|
|
|
.justify-center {
|
|
|
justify-content: center;
|
|
|
}
|
|
|
|
|
|
/* Padding 和 Margin */
|
|
|
.p-2 {
|
|
|
padding: 0.5rem;
|
|
|
}
|
|
|
|
|
|
.p-3 {
|
|
|
padding: 0.75rem;
|
|
|
}
|
|
|
|
|
|
.p-4 {
|
|
|
padding: 1rem;
|
|
|
}
|
|
|
|
|
|
.p-5 {
|
|
|
padding: 1.25rem;
|
|
|
}
|
|
|
|
|
|
.m-2 {
|
|
|
margin: 0.5rem;
|
|
|
}
|
|
|
|
|
|
.m-4 {
|
|
|
margin: 1rem;
|
|
|
}
|
|
|
|
|
|
.mt-1 {
|
|
|
margin-top: 0.25rem;
|
|
|
}
|
|
|
|
|
|
.mt-2 {
|
|
|
margin-top: 0.5rem;
|
|
|
}
|
|
|
|
|
|
.mt-4 {
|
|
|
margin-top: 1rem;
|
|
|
}
|
|
|
|
|
|
.mb-2 {
|
|
|
margin-bottom: 0.5rem;
|
|
|
}
|
|
|
|
|
|
.mb-4 {
|
|
|
margin-bottom: 1rem;
|
|
|
}
|
|
|
|
|
|
/* 宽度和高度 */
|
|
|
.w-full {
|
|
|
width: 100%;
|
|
|
}
|
|
|
|
|
|
.h-2 {
|
|
|
height: 0.5rem;
|
|
|
}
|
|
|
|
|
|
.h-10 {
|
|
|
height: 2.5rem;
|
|
|
}
|
|
|
|
|
|
.w-10 {
|
|
|
width: 2.5rem;
|
|
|
}
|
|
|
|
|
|
/* 文字大小 */
|
|
|
.text-xs {
|
|
|
font-size: 0.75rem;
|
|
|
}
|
|
|
|
|
|
.text-sm {
|
|
|
font-size: 0.875rem;
|
|
|
}
|
|
|
|
|
|
.text-base {
|
|
|
font-size: 1rem;
|
|
|
}
|
|
|
|
|
|
.text-lg {
|
|
|
font-size: 1.125rem;
|
|
|
}
|
|
|
|
|
|
.text-xl {
|
|
|
font-size: 1.25rem;
|
|
|
}
|
|
|
|
|
|
.text-2xl {
|
|
|
font-size: 1.5rem;
|
|
|
}
|
|
|
|
|
|
/* 文字粗细 */
|
|
|
.font-medium {
|
|
|
font-weight: 500;
|
|
|
}
|
|
|
|
|
|
.font-semibold {
|
|
|
font-weight: 600;
|
|
|
}
|
|
|
|
|
|
.font-bold {
|
|
|
font-weight: 700;
|
|
|
}
|
|
|
|
|
|
/* 文字对齐 */
|
|
|
.text-left {
|
|
|
text-align: left;
|
|
|
}
|
|
|
|
|
|
.text-center {
|
|
|
text-align: center;
|
|
|
}
|
|
|
|
|
|
.text-right {
|
|
|
text-align: right;
|
|
|
}
|
|
|
|
|
|
/* 网格布局 */
|
|
|
.grid {
|
|
|
display: grid;
|
|
|
}
|
|
|
|
|
|
.grid-cols-1 {
|
|
|
grid-template-columns: repeat(1, minmax(0, 1fr));
|
|
|
}
|
|
|
|
|
|
.grid-cols-2 {
|
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
|
}
|
|
|
|
|
|
.grid-cols-4 {
|
|
|
grid-template-columns: repeat(4, minmax(0, 1fr));
|
|
|
}
|
|
|
|
|
|
.gap-2 {
|
|
|
gap: 0.5rem;
|
|
|
}
|
|
|
|
|
|
.gap-3 {
|
|
|
gap: 0.75rem;
|
|
|
}
|
|
|
|
|
|
.gap-4 {
|
|
|
gap: 1rem;
|
|
|
}
|
|
|
|
|
|
.gap-6 {
|
|
|
gap: 1.5rem;
|
|
|
}
|
|
|
|
|
|
/* 响应式设计 */
|
|
|
@media (min-width: 640px) {
|
|
|
.sm\:grid-cols-2 {
|
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
|
}
|
|
|
}
|
|
|
|
|
|
@media (min-width: 1024px) {
|
|
|
.lg\:grid-cols-2 {
|
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
|
}
|
|
|
|
|
|
.lg\:grid-cols-4 {
|
|
|
grid-template-columns: repeat(4, minmax(0, 1fr));
|
|
|
}
|
|
|
|
|
|
.lg\:ml-64 {
|
|
|
margin-left: 16rem;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
/* 动画 */
|
|
|
.animate-fadeIn {
|
|
|
animation: fadeIn 0.5s ease-in-out;
|
|
|
}
|
|
|
|
|
|
@keyframes fadeIn {
|
|
|
from {
|
|
|
opacity: 0;
|
|
|
transform: translateY(10px);
|
|
|
}
|
|
|
|
|
|
to {
|
|
|
opacity: 1;
|
|
|
transform: translateY(0);
|
|
|
}
|
|
|
}
|
|
|
|
|
|
/* 图标样式 */
|
|
|
.fa {
|
|
|
text-shadow: 0 0 4px rgba(79, 195, 247, 0.5);
|
|
|
}
|
|
|
|
|
|
/* 特殊元素样式 */
|
|
|
.stat-filter-active {
|
|
|
background: linear-gradient(to bottom, #4fc3f7, #0277bd) !important;
|
|
|
color: white !important;
|
|
|
box-shadow: 0 0 8px rgba(79, 195, 247, 0.7);
|
|
|
}
|
|
|
|
|
|
/* 模态框样式 */
|
|
|
.modal {
|
|
|
background: rgba(12, 42, 73, 0.8);
|
|
|
backdrop-filter: blur(10px);
|
|
|
position: fixed;
|
|
|
top: 0;
|
|
|
left: 0;
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
z-index: 10000;
|
|
|
display: none;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
overflow: auto;
|
|
|
padding: 20px;
|
|
|
}
|
|
|
|
|
|
.modal-content {
|
|
|
background: rgba(25, 55, 95, 0.9);
|
|
|
border: 1px solid rgba(64, 156, 255, 0.5);
|
|
|
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
|
|
|
border-radius: 8px;
|
|
|
max-width: 90%;
|
|
|
max-height: 90vh;
|
|
|
overflow-y: auto;
|
|
|
position: relative;
|
|
|
margin: auto;
|
|
|
}
|
|
|
|
|
|
.modal-header {
|
|
|
border-bottom: 1px solid rgba(64, 156, 255, 0.3);
|
|
|
padding: 15px 20px;
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
align-items: center;
|
|
|
}
|
|
|
|
|
|
.modal-title {
|
|
|
color: #4fc3f7;
|
|
|
text-shadow: 0 0 8px rgba(79, 195, 247, 0.7);
|
|
|
font-size: 1.25rem;
|
|
|
font-weight: 600;
|
|
|
}
|
|
|
|
|
|
.close-btn {
|
|
|
color: #a0d2ff;
|
|
|
background: rgba(25, 55, 95, 0.6);
|
|
|
border: 1px solid rgba(64, 156, 255, 0.3);
|
|
|
width: 30px;
|
|
|
height: 30px;
|
|
|
border-radius: 50%;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
cursor: pointer;
|
|
|
font-size: 1.25rem;
|
|
|
}
|
|
|
|
|
|
.close-btn:hover {
|
|
|
background: rgba(40, 80, 130, 0.7);
|
|
|
color: #e0f0ff;
|
|
|
}
|
|
|
|
|
|
/* 修复图表容器高度问题 */
|
|
|
.h-64 {
|
|
|
min-height: 300px;
|
|
|
height: 300px;
|
|
|
}
|
|
|
|
|
|
.h-72 {
|
|
|
min-height: 350px;
|
|
|
height: 350px;
|
|
|
}
|
|
|
|
|
|
/* 修复任务完成情况和任务类型分布图表区域 */
|
|
|
.grid.grid-cols-1.lg\:grid-cols-2.gap-4.md\:gap-6 {
|
|
|
margin-bottom: 20px;
|
|
|
gap: 20px;
|
|
|
}
|
|
|
|
|
|
/* 确保图表容器有足够空间 */
|
|
|
.chart-modal-container {
|
|
|
display: grid;
|
|
|
grid-template-columns: 1fr 1fr;
|
|
|
gap: 20px;
|
|
|
margin-bottom: 20px;
|
|
|
}
|
|
|
|
|
|
.chart-modal-item {
|
|
|
background: rgba(12, 42, 73, 0.1);
|
|
|
backdrop-filter: blur(10px);
|
|
|
border-radius: 8px;
|
|
|
padding: 15px;
|
|
|
border: 1px solid rgba(64, 156, 255, 0.3);
|
|
|
}
|
|
|
|
|
|
.chart-modal-title {
|
|
|
color: #4fc3f7;
|
|
|
margin-bottom: 15px;
|
|
|
font-size: 18px;
|
|
|
border-bottom: 1px solid rgba(79, 195, 247, 0.3);
|
|
|
padding-bottom: 8px;
|
|
|
text-align: center;
|
|
|
}
|
|
|
|
|
|
.chart-modal-canvas {
|
|
|
height: 300px;
|
|
|
width: 100%;
|
|
|
}
|
|
|
|
|
|
/* 修复表格可能被遮挡的问题 */
|
|
|
.overflow-x-auto {
|
|
|
overflow-x: auto !important;
|
|
|
overflow-y: visible !important;
|
|
|
max-height: none !important;
|
|
|
}
|
|
|
|
|
|
/* 修复地图部分可能被遮挡的问题 */
|
|
|
.map-container {
|
|
|
min-height: 500px !important;
|
|
|
margin-bottom: 20px;
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
/* 修复通知面板可能遮挡内容的问题 */
|
|
|
#notification-panel {
|
|
|
max-height: 80vh !important;
|
|
|
overflow-y: auto !important;
|
|
|
}
|
|
|
|
|
|
/* 修复侧边栏在移动端可能遮挡内容的问题 */
|
|
|
@media (max-width: 1023px) {
|
|
|
#sidebar.mobile-hidden {
|
|
|
transform: translateX(-100%);
|
|
|
transition: transform 0.3s ease;
|
|
|
}
|
|
|
|
|
|
#sidebar {
|
|
|
transform: translateX(0);
|
|
|
transition: transform 0.3s ease;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
/* 修复卡片可能被遮挡的问题 */
|
|
|
.card-shadow {
|
|
|
margin-bottom: 20px;
|
|
|
overflow: visible;
|
|
|
}
|
|
|
|
|
|
/* 确保所有内容区域都有足够的间距 */
|
|
|
section {
|
|
|
padding: 20px 0;
|
|
|
overflow: visible;
|
|
|
}
|
|
|
|
|
|
/* 修复底部可能被遮挡的问题 */
|
|
|
.mt-6 {
|
|
|
margin-top: 1.5rem;
|
|
|
}
|
|
|
|
|
|
/* 确保按钮不会被遮挡 */
|
|
|
.btn {
|
|
|
z-index: 10;
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
/* 修复可能被遮挡的绝对定位元素 */
|
|
|
.absolute {
|
|
|
z-index: 100;
|
|
|
}
|
|
|
|
|
|
/* 修复可能被遮挡的固定定位元素 */
|
|
|
.fixed {
|
|
|
z-index: 9999;
|
|
|
}
|
|
|
|
|
|
/* 确保表格行不会被遮挡 */
|
|
|
.data-grid-row {
|
|
|
display: table-row !important;
|
|
|
}
|
|
|
|
|
|
/* 修复可能被遮挡的浮动元素 */
|
|
|
.float-right {
|
|
|
float: right !important;
|
|
|
position: relative;
|
|
|
z-index: 10;
|
|
|
}
|
|
|
|
|
|
/* 确保所有图表容器都有足够的空间 */
|
|
|
canvas {
|
|
|
max-height: 400px;
|
|
|
width: 100% !important;
|
|
|
height: auto !important;
|
|
|
}
|
|
|
|
|
|
/* 修复可能被遮挡的地图控件 */
|
|
|
.map-controls {
|
|
|
z-index: 1000;
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
/* 确保所有的面板都有足够的间距 */
|
|
|
.panel {
|
|
|
margin-bottom: 20px;
|
|
|
overflow: visible !important;
|
|
|
}
|
|
|
|
|
|
/* 修复可能被遮挡的下拉菜单 */
|
|
|
.dropdown-menu {
|
|
|
z-index: 1000;
|
|
|
position: absolute;
|
|
|
}
|
|
|
|
|
|
/* 确保所有的表单元素不会被遮挡 */
|
|
|
input,
|
|
|
select,
|
|
|
textarea {
|
|
|
position: relative;
|
|
|
z-index: 2;
|
|
|
}
|
|
|
|
|
|
/* 修复可能被遮挡的工具提示 */
|
|
|
.tooltip {
|
|
|
z-index: 9999;
|
|
|
}
|
|
|
|
|
|
/* 确保所有的导航元素不会被遮挡 */
|
|
|
.nav-item {
|
|
|
background: none;
|
|
|
border: none;
|
|
|
cursor: pointer;
|
|
|
font-family: 'Segoe UI', Arial, sans-serif;
|
|
|
color: inherit;
|
|
|
text-align: left;
|
|
|
}
|
|
|
|
|
|
/* 修复可能被遮挡的通知按钮 */
|
|
|
.notification-button {
|
|
|
position: relative;
|
|
|
z-index: 100;
|
|
|
}
|
|
|
|
|
|
/* 确保所有的模态框按钮不会被遮挡 */
|
|
|
.modal .close-btn {
|
|
|
z-index: 1001;
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
/* 修复可能被遮挡的图表标签 */
|
|
|
.chartjs-render-monitor {
|
|
|
overflow: visible !important;
|
|
|
}
|
|
|
|
|
|
/* 确保所有的进度条不会被遮挡 */
|
|
|
.progress-bar {
|
|
|
position: relative;
|
|
|
z-index: 3;
|
|
|
}
|
|
|
|
|
|
/* 修复可能被遮挡的状态标签 */
|
|
|
.status-label {
|
|
|
z-index: 5;
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
/* 确保所有的卡片内容不会被遮挡 */
|
|
|
.card-content {
|
|
|
position: relative;
|
|
|
z-index: 1;
|
|
|
}
|
|
|
|
|
|
/* 修复可能被遮挡的分页控件 */
|
|
|
.pagination {
|
|
|
z-index: 10;
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
/* 确保所有的搜索框不会被遮挡 */
|
|
|
.search-box {
|
|
|
position: relative;
|
|
|
z-index: 5;
|
|
|
}
|
|
|
|
|
|
/* 修复可能被遮挡的筛选器 */
|
|
|
.filter-container {
|
|
|
z-index: 6;
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
/* 确保所有的切换按钮不会被遮挡 */
|
|
|
.toggle-button {
|
|
|
z-index: 7;
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
/* 修复可能被遮挡的详情按钮 */
|
|
|
.view-details-btn {
|
|
|
z-index: 8;
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
/* 确保所有的图表标题不会被遮挡 */
|
|
|
.chart-title {
|
|
|
z-index: 4;
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
/* 修复可能被遮挡的图例 */
|
|
|
.chart-legend {
|
|
|
z-index: 9;
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
/* 确保所有的警告信息不会被遮挡 */
|
|
|
.alert {
|
|
|
z-index: 11;
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
/* 修复可能被遮挡的帮助文本 */
|
|
|
.help-text {
|
|
|
z-index: 12;
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
/* 确保所有的图标不会被遮挡 */
|
|
|
.fa {
|
|
|
z-index: 13;
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
/* 修复可能被遮挡的数据网格 */
|
|
|
.data-grid {
|
|
|
overflow: visible !important;
|
|
|
}
|
|
|
|
|
|
/* 确保所有的数据项不会被遮挡 */
|
|
|
.data-item {
|
|
|
z-index: 14;
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
/* 修复可能被遮挡的系统按钮 */
|
|
|
.system-btn {
|
|
|
z-index: 15;
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
/* 确保所有的控制按钮不会被遮挡 */
|
|
|
.control-btn {
|
|
|
z-index: 16;
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
/* 修复可能被遮挡的地图标记 */
|
|
|
.map-marker {
|
|
|
z-index: 1000;
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
/* 确保所有的弹出窗口不会被遮挡 */
|
|
|
.popup {
|
|
|
z-index: 9999;
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
/* 修复可能被遮挡的工具栏 */
|
|
|
.toolbar {
|
|
|
z-index: 100;
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
/* 确保所有的侧边栏内容不会被遮挡 */
|
|
|
#sidebar .nav-item {
|
|
|
z-index: 20;
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
/* 修复可能被遮挡的页脚 */
|
|
|
footer {
|
|
|
z-index: 10;
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
/* 确保所有的悬浮元素不会被遮挡 */
|
|
|
.floating-element {
|
|
|
z-index: 1000;
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
/* 修复可能被遮挡的动画元素 */
|
|
|
.animated-element {
|
|
|
z-index: 50;
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
/* 确保所有的加载指示器不会被遮挡 */
|
|
|
.loading-indicator {
|
|
|
z-index: 9999;
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
/* 修复可能被遮挡的错误消息 */
|
|
|
.error-message {
|
|
|
z-index: 100;
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
/* 确保所有的成功消息不会被遮挡 */
|
|
|
.success-message {
|
|
|
z-index: 100;
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
/* 修复可能被遮挡的警告消息 */
|
|
|
.warning-message {
|
|
|
z-index: 100;
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
/* 确保所有的信息消息不会被遮挡 */
|
|
|
.info-message {
|
|
|
z-index: 100;
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
/* 修复可能被遮挡的确认对话框 */
|
|
|
.confirm-dialog {
|
|
|
z-index: 10000;
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
/* 确保所有的提示框不会被遮挡 */
|
|
|
.tooltip-box {
|
|
|
z-index: 1000;
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
/* 修复可能被遮挡的上下文菜单 */
|
|
|
.context-menu {
|
|
|
z-index: 9999;
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
/* 确保所有的下拉列表不会被遮挡 */
|
|
|
.dropdown-list {
|
|
|
z-index: 1000;
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
/* 修复可能被遮挡的搜索结果 */
|
|
|
.search-results {
|
|
|
z-index: 1000;
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
/* 确保所有的自动完成建议不会被遮挡 */
|
|
|
.autocomplete-suggestions {
|
|
|
z-index: 1000;
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
/* 修复可能被遮挡的日历控件 */
|
|
|
.calendar {
|
|
|
z-index: 1000;
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
/* 确保所有的时间选择器不会被遮挡 */
|
|
|
.time-picker {
|
|
|
z-index: 1000;
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
/* 修复可能被遮挡的颜色选择器 */
|
|
|
.color-picker {
|
|
|
z-index: 1000;
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
/* 确保所有的文件上传控件不会被遮挡 */
|
|
|
.file-upload {
|
|
|
z-index: 100;
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
/* 修复可能被遮挡的图像预览 */
|
|
|
.image-preview {
|
|
|
z-index: 100;
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
/* 确保所有的视频播放器不会被遮挡 */
|
|
|
.video-player {
|
|
|
z-index: 100;
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
/* 修复可能被遮挡的音频播放器 */
|
|
|
.audio-player {
|
|
|
z-index: 100;
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
/* 确保所有的地图图层控件不会被遮挡 */
|
|
|
.map-layer-control {
|
|
|
z-index: 1000;
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
/* 修复可能被遮挡的地图缩放控件 */
|
|
|
.map-zoom-control {
|
|
|
z-index: 1000;
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
/* 确保所有的地图导航控件不会被遮挡 */
|
|
|
.map-navigation-control {
|
|
|
z-index: 1000;
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
/* 修复可能被遮挡的地图全屏控件 */
|
|
|
.map-fullscreen-control {
|
|
|
z-index: 1000;
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
/* 确保所有的地图测量工具不会被遮挡 */
|
|
|
.map-measurement-tool {
|
|
|
z-index: 1000;
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
/* 修复可能被遮挡的地图绘图工具 */
|
|
|
.map-drawing-tool {
|
|
|
z-index: 1000;
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
/* 确保所有的地图信息窗口不会被遮挡 */
|
|
|
.map-info-window {
|
|
|
z-index: 2000;
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
/* 修复可能被遮挡的地图弹出窗口 */
|
|
|
.map-popup {
|
|
|
z-index: 2000;
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
/* 确保所有的地图标记信息不会被遮挡 */
|
|
|
.map-marker-info {
|
|
|
z-index: 2000;
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
/* 修复可能被遮挡的地图图例 */
|
|
|
.map-legend {
|
|
|
z-index: 1000;
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
/* 确保所有的地图比例尺不会被遮挡 */
|
|
|
.map-scale {
|
|
|
z-index: 1000;
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
/* 修复可能被遮挡的地图指南针 */
|
|
|
.map-compass {
|
|
|
z-index: 1000;
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
/* 确保所有的地图搜索框不会被遮挡 */
|
|
|
.map-search-box {
|
|
|
z-index: 1000;
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
/* 修复可能被遮挡的地图工具栏 */
|
|
|
.map-toolbar {
|
|
|
z-index: 1000;
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
/* 确保所有的地图状态栏不会被遮挡 */
|
|
|
.map-status-bar {
|
|
|
z-index: 1000;
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
/* 修复可能被遮挡的图表工具栏 */
|
|
|
.chart-toolbar {
|
|
|
z-index: 100;
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
/* 确保所有的图表图例不会被遮挡 */
|
|
|
.chart-legend {
|
|
|
z-index: 100;
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
/* 修复可能被遮挡的图表工具提示 */
|
|
|
.chart-tooltip {
|
|
|
z-index: 1000;
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
/* 确保所有的图表数据标签不会被遮挡 */
|
|
|
.chart-data-label {
|
|
|
z-index: 100;
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
/* 修复可能被遮挡的图表轴标签 */
|
|
|
.chart-axis-label {
|
|
|
z-index: 100;
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
/* 确保所有的图表网格线不会被遮挡 */
|
|
|
.chart-grid-line {
|
|
|
z-index: 10;
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
/* 修复可能被遮挡的图表标题 */
|
|
|
.chart-title {
|
|
|
z-index: 100;
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
/* 确保所有的图表副标题不会被遮挡 */
|
|
|
.chart-subtitle {
|
|
|
z-index: 100;
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
/* 修复可能被遮挡的图表脚注 */
|
|
|
.chart-footer {
|
|
|
z-index: 100;
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
/* 确保所有的图表导出按钮不会被遮挡 */
|
|
|
.chart-export-btn {
|
|
|
z-index: 100;
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
/* 修复可能被遮挡的图表打印按钮 */
|
|
|
.chart-print-btn {
|
|
|
z-index: 100;
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
/* 确保所有的图表刷新按钮不会被遮挡 */
|
|
|
.chart-refresh-btn {
|
|
|
z-index: 100;
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
/* 修复可能被遮挡的图表设置按钮 */
|
|
|
.chart-settings-btn {
|
|
|
z-index: 100;
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
/* 确保所有的图表全屏按钮不会被遮挡 */
|
|
|
.chart-fullscreen-btn {
|
|
|
z-index: 100;
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
/* 修复可能被遮挡的图表缩放按钮 */
|
|
|
.chart-zoom-btn {
|
|
|
z-index: 100;
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
/* 确保所有的图表平移按钮不会被遮挡 */
|
|
|
.chart-pan-btn {
|
|
|
z-index: 100;
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
/* 修复可能被遮挡的图表重置按钮 */
|
|
|
.chart-reset-btn {
|
|
|
z-index: 100;
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
/* 确保所有的图表数据导出按钮不会被遮挡 */
|
|
|
.chart-data-export-btn {
|
|
|
z-index: 100;
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
/* 修复可能被遮挡的图表图像导出按钮 */
|
|
|
.chart-image-export-btn {
|
|
|
z-index: 100;
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
/* 确保所有的图表PDF导出按钮不会被遮挡 */
|
|
|
.chart-pdf-export-btn {
|
|
|
z-index: 100;
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
/* 修复可能被遮挡的图表Excel导出按钮 */
|
|
|
.chart-excel-export-btn {
|
|
|
z-index: 100;
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
/* 确保所有的图表CSV导出按钮不会被遮挡 */
|
|
|
.chart-csv-export-btn {
|
|
|
z-index: 100;
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
/* 修复可能被遮挡的图表数据表按钮 */
|
|
|
.chart-data-table-btn {
|
|
|
z-index: 100;
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
/* 确保所有的图表数据筛选器不会被遮挡 */
|
|
|
.chart-data-filter {
|
|
|
z-index: 100;
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
/* 修复可能被遮挡的图表数据排序器 */
|
|
|
.chart-data-sorter {
|
|
|
z-index: 100;
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
/* 确保所有的图表数据分组器不会被遮挡 */
|
|
|
.chart-data-grouper {
|
|
|
z-index: 100;
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
/* 修复可能被遮挡的图表数据聚合器 */
|
|
|
.chart-data-aggregator {
|
|
|
z-index: 100;
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
/* 确保所有的图表数据转换器不会被遮挡 */
|
|
|
.chart-data-transformer {
|
|
|
z-index: 100;
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
/* 修复可能被遮挡的图表数据验证器 */
|
|
|
.chart-data-validator {
|
|
|
z-index: 100;
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
/* 确保所有的图表数据清理器不会被遮挡 */
|
|
|
.chart-data-cleaner {
|
|
|
z-index: 100;
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
/* 修复可能被遮挡的图表数据更新器 */
|
|
|
.chart-data-updater {
|
|
|
z-index: 100;
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
/* 确保所有的图表数据刷新器不会被遮挡 */
|
|
|
.chart-data-refresher {
|
|
|
z-index: 100;
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
/* 确保所有的图表数据加载器不会被遮挡 */
|
|
|
.chart-data-loader {
|
|
|
z-index: 100;
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
/* 修复可能被遮挡的图表数据保存器 */
|
|
|
.chart-data-saver {
|
|
|
z-index: 100;
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
/* 确保所有的图表数据删除器不会被遮挡 */
|
|
|
.chart-data-deleter {
|
|
|
z-index: 100;
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
/* 修复可能被遮挡的图表数据编辑器 */
|
|
|
.chart-data-editor {
|
|
|
z-index: 100;
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
/* 确保所有的图表数据查看器不会被遮挡 */
|
|
|
.chart-data-viewer {
|
|
|
z-index: 100;
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
/* 修复可能被遮挡的图表数据导出器 */
|
|
|
.chart-data-exporter {
|
|
|
z-index: 100;
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
/* 确保所有的图表数据导入器不会被遮挡 */
|
|
|
.chart-data-importer {
|
|
|
z-index: 100;
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
/* 修复可能被遮挡的图表数据转换器 */
|
|
|
.chart-data-converter {
|
|
|
z-index: 100;
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
/* 确保所有的图表数据格式化器不会被遮挡 */
|
|
|
.chart-data-formatter {
|
|
|
z-index: 100;
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
/* 修复可能被遮挡的图表数据验证器 */
|
|
|
.chart-data-validator {
|
|
|
z-index: 100;
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
/* 确保所有的图表数据清理器不会被遮挡 */
|
|
|
.chart-data-cleaner {
|
|
|
z-index: 100;
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
/* 修复可能被遮挡的图表数据更新器 */
|
|
|
.chart-data-updater {
|
|
|
z-index: 100;
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
/* 确保所有的图表数据刷新器不会被遮挡 */
|
|
|
.chart-data-refresher {
|
|
|
z-index: 100;
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
/* 确保所有的图表数据加载器不会被遮挡 */
|
|
|
.chart-data-loader {
|
|
|
z-index: 100;
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
/* 修复可能被遮挡的图表数据保存器 */
|
|
|
.chart-data-saver {
|
|
|
z-index: 100;
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
/* 确保所有的图表数据删除器不会被遮挡 */
|
|
|
.chart-data-deleter {
|
|
|
z-index: 100;
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
/* 修复可能被遮挡的图表数据编辑器 */
|
|
|
.chart-data-editor {
|
|
|
z-index: 100;
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
/* 确保所有的图表数据查看器不会被遮挡 */
|
|
|
.chart-data-viewer {
|
|
|
z-index: 100;
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
/* 修复可能被遮挡的图表数据导出器 */
|
|
|
.chart-data-exporter {
|
|
|
z-index: 100;
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
/* 确保所有的图表数据导入器不会被遮挡 */
|
|
|
.chart-data-importer {
|
|
|
z-index: 100;
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
/* 修复可能被遮挡的图表数据转换器 */
|
|
|
.chart-data-converter {
|
|
|
z-index: 100;
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
/* 确保所有的图表数据格式化器不会被遮挡 */
|
|
|
.chart-data-formatter {
|
|
|
z-index: 100;
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
/* 修复主内容区域可能被遮挡的问题 */
|
|
|
#main-content {
|
|
|
padding: 0px 10px;
|
|
|
overflow-x: hidden;
|
|
|
overflow-y: auto;
|
|
|
max-height: calc(100vh - 60px);
|
|
|
margin-top: 60px;
|
|
|
}
|
|
|
|
|
|
/* 修复图表容器可能被遮挡的问题 */
|
|
|
.chart-container {
|
|
|
min-height: 300px;
|
|
|
position: relative;
|
|
|
padding: 15px;
|
|
|
}
|
|
|
|
|
|
/* 修复表格可能被遮挡的问题 */
|
|
|
.overflow-x-auto {
|
|
|
overflow-x: auto !important;
|
|
|
overflow-y: visible !important;
|
|
|
max-height: none !important;
|
|
|
}
|
|
|
|
|
|
/* 修复地图部分可能被遮挡的问题 */
|
|
|
.map-container {
|
|
|
min-height: 500px !important;
|
|
|
margin-bottom: 20px;
|
|
|
}
|
|
|
|
|
|
/* 修复通知面板可能遮挡内容的问题 */
|
|
|
#notification-panel {
|
|
|
max-height: 80vh !important;
|
|
|
overflow-y: auto !important;
|
|
|
}
|
|
|
|
|
|
/* 修复侧边栏在移动端可能遮挡内容的问题 */
|
|
|
@media (max-width: 1023px) {
|
|
|
#sidebar.mobile-hidden {
|
|
|
transform: translateX(-100%);
|
|
|
transition: transform 0.3s ease;
|
|
|
}
|
|
|
|
|
|
#sidebar {
|
|
|
transform: translateX(0);
|
|
|
transition: transform 0.3s ease;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
/* 修复模态框可能遮挡的问题 */
|
|
|
.modal {
|
|
|
z-index: 10000 !important;
|
|
|
padding: 20px;
|
|
|
overflow: auto;
|
|
|
}
|
|
|
|
|
|
.modal-content {
|
|
|
margin: auto;
|
|
|
max-height: 90vh;
|
|
|
overflow-y: auto;
|
|
|
}
|
|
|
|
|
|
/* 修复卡片可能被遮挡的问题 */
|
|
|
.card-shadow {
|
|
|
margin-bottom: 20px;
|
|
|
}
|
|
|
|
|
|
/* 确保所有内容区域都有足够的间距 */
|
|
|
section {
|
|
|
padding: 10px 0;
|
|
|
}
|
|
|
|
|
|
/* 修复底部可能被遮挡的问题 */
|
|
|
.mt-6 {
|
|
|
margin-top: 1.5rem;
|
|
|
}
|
|
|
|
|
|
/* 确保按钮不会被遮挡 */
|
|
|
.btn {
|
|
|
z-index: 10;
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
/* 修复可能被遮挡的绝对定位元素 */
|
|
|
.absolute {
|
|
|
z-index: 100;
|
|
|
}
|
|
|
|
|
|
/* 修复可能被遮挡的固定定位元素 */
|
|
|
.fixed {
|
|
|
z-index: 9999;
|
|
|
}
|
|
|
|
|
|
/* 确保表格行不会被遮挡 */
|
|
|
.data-grid-row {
|
|
|
display: table-row !important;
|
|
|
}
|
|
|
|
|
|
/* 修复可能被遮挡的浮动元素 */
|
|
|
.float-right {
|
|
|
float: right !important;
|
|
|
position: relative;
|
|
|
z-index: 10;
|
|
|
}
|
|
|
|
|
|
/* 确保所有图表容器都有足够的空间 */
|
|
|
canvas {
|
|
|
max-height: 400px;
|
|
|
width: 100% !important;
|
|
|
height: auto !important;
|
|
|
}
|
|
|
|
|
|
/* 修复可能被遮挡的地图控件 */
|
|
|
.map-controls {
|
|
|
z-index: 1000;
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
/* 确保所有的面板都有足够的间距 */
|
|
|
.panel {
|
|
|
margin-bottom: 20px;
|
|
|
overflow: visible !important;
|
|
|
}
|
|
|
|
|
|
/* 修复可能被遮挡的下拉菜单 */
|
|
|
.dropdown-menu {
|
|
|
z-index: 1000;
|
|
|
position: absolute;
|
|
|
}
|
|
|
|
|
|
/* 确保所有的表单元素不会被遮挡 */
|
|
|
input,
|
|
|
select,
|
|
|
textarea {
|
|
|
position: relative;
|
|
|
z-index: 2;
|
|
|
}
|
|
|
|
|
|
/* 修复可能被遮挡的工具提示 */
|
|
|
.tooltip {
|
|
|
z-index: 9999;
|
|
|
}
|
|
|
|
|
|
/* 确保所有的导航元素不会被遮挡 */
|
|
|
.nav-item {
|
|
|
position: relative;
|
|
|
z-index: 5;
|
|
|
}
|
|
|
|
|
|
/* 修复可能被遮挡的通知按钮 */
|
|
|
.notification-button {
|
|
|
position: relative;
|
|
|
z-index: 100;
|
|
|
}
|
|
|
|
|
|
/* 确保所有的模态框按钮不会被遮挡 */
|
|
|
.modal .close-btn {
|
|
|
z-index: 1001;
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
/* 修复可能被遮挡的图表标签 */
|
|
|
.chartjs-render-monitor {
|
|
|
overflow: visible !important;
|
|
|
}
|
|
|
|
|
|
/* 确保所有的进度条不会被遮挡 */
|
|
|
.progress-bar {
|
|
|
position: relative;
|
|
|
z-index: 3;
|
|
|
}
|
|
|
|
|
|
/* 修复可能被遮挡的状态标签 */
|
|
|
.status-label {
|
|
|
z-index: 5;
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
/* 确保所有的卡片内容不会被遮挡 */
|
|
|
.card-content {
|
|
|
position: relative;
|
|
|
z-index: 1;
|
|
|
}
|
|
|
|
|
|
/* 修复可能被遮挡的分页控件 */
|
|
|
.pagination {
|
|
|
z-index: 10;
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
/* 确保所有的搜索框不会被遮挡 */
|
|
|
.search-box {
|
|
|
position: relative;
|
|
|
z-index: 5;
|
|
|
}
|
|
|
|
|
|
/* 修复可能被遮挡的筛选器 */
|
|
|
.filter-container {
|
|
|
z-index: 6;
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
/* 确保所有的切换按钮不会被遮挡 */
|
|
|
.toggle-button {
|
|
|
z-index: 7;
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
/* 修复可能被遮挡的详情按钮 */
|
|
|
.view-details-btn {
|
|
|
z-index: 8;
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
/* 确保所有的图表标题不会被遮挡 */
|
|
|
.chart-title {
|
|
|
z-index: 4;
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
/* 修复可能被遮挡的图例 */
|
|
|
.chart-legend {
|
|
|
z-index: 9;
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
/* 确保所有的警告信息不会被遮挡 */
|
|
|
.alert {
|
|
|
z-index: 11;
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
/* 修复可能被遮挡的帮助文本 */
|
|
|
.help-text {
|
|
|
z-index: 12;
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
/* 确保所有的图标不会被遮挡 */
|
|
|
.fa {
|
|
|
z-index: 13;
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
/* 修复可能被遮挡的数据网格 */
|
|
|
.data-grid {
|
|
|
overflow: visible !important;
|
|
|
}
|
|
|
|
|
|
/* 确保所有的数据项不会被遮挡 */
|
|
|
.data-item {
|
|
|
z-index: 14;
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
/* 修复可能被遮挡的系统按钮 */
|
|
|
.system-btn {
|
|
|
z-index: 15;
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
/* 确保所有的控制按钮不会被遮挡 */
|
|
|
.control-btn {
|
|
|
z-index: 16;
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
/* 修复可能被遮挡的地图标记 */
|
|
|
.map-marker {
|
|
|
z-index: 1000;
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
/* 确保所有的弹出窗口不会被遮挡 */
|
|
|
.popup {
|
|
|
z-index: 9999;
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
/* 修复可能被遮挡的工具栏 */
|
|
|
.toolbar {
|
|
|
z-index: 100;
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
/* 确保所有的侧边栏内容不会被遮挡 */
|
|
|
#sidebar .nav-item {
|
|
|
z-index: 20;
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
/* 修复可能被遮挡的页脚 */
|
|
|
footer {
|
|
|
z-index: 10;
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
/* 确保所有的悬浮元素不会被遮挡 */
|
|
|
.floating-element {
|
|
|
z-index: 1000;
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
/* 修复可能被遮挡的动画元素 */
|
|
|
.animated-element {
|
|
|
z-index: 50;
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
/* 确保所有的加载指示器不会被遮挡 */
|
|
|
.loading-indicator {
|
|
|
z-index: 9999;
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
/* 修复可能被遮挡的错误消息 */
|
|
|
.error-message {
|
|
|
z-index: 100;
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
/* 确保所有的成功消息不会被遮挡 */
|
|
|
.success-message {
|
|
|
z-index: 100;
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
/* 修复可能被遮挡的警告消息 */
|
|
|
.warning-message {
|
|
|
z-index: 100;
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
/* 确保所有的信息消息不会被遮挡 */
|
|
|
.info-message {
|
|
|
z-index: 100;
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
/* 修复可能被遮挡的确认对话框 */
|
|
|
.confirm-dialog {
|
|
|
z-index: 10000;
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
/* 确保所有的提示框不会被遮挡 */
|
|
|
.tooltip-box {
|
|
|
z-index: 1000;
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
/* 修复可能被遮挡的上下文菜单 */
|
|
|
.context-menu {
|
|
|
z-index: 9999;
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
/* 确保所有的下拉列表不会被遮挡 */
|
|
|
.dropdown-list {
|
|
|
z-index: 1000;
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
/* 修复可能被遮挡的搜索结果 */
|
|
|
.search-results {
|
|
|
z-index: 1000;
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
/* 确保所有的自动完成建议不会被遮挡 */
|
|
|
.autocomplete-suggestions {
|
|
|
z-index: 1000;
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
/* 修复可能被遮挡的日历控件 */
|
|
|
.calendar {
|
|
|
z-index: 1000;
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
/* 确保所有的时间选择器不会被遮挡 */
|
|
|
.time-picker {
|
|
|
z-index: 1000;
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
/* 修复可能被遮挡的颜色选择器 */
|
|
|
.color-picker {
|
|
|
z-index: 1000;
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
/* 确保所有的文件上传控件不会被遮挡 */
|
|
|
.file-upload {
|
|
|
z-index: 100;
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
/* 修复可能被遮挡的图像预览 */
|
|
|
.image-preview {
|
|
|
z-index: 100;
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
/* 确保所有的视频播放器不会被遮挡 */
|
|
|
.video-player {
|
|
|
z-index: 100;
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
/* 修复可能被遮挡的音频播放器 */
|
|
|
.audio-player {
|
|
|
z-index: 100;
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
/* 确保所有的地图图层控件不会被遮挡 */
|
|
|
.map-layer-control {
|
|
|
z-index: 1000;
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
/* 修复可能被遮挡的地图缩放控件 */
|
|
|
.map-zoom-control {
|
|
|
z-index: 1000;
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
/* 确保所有的地图导航控件不会被遮挡 */
|
|
|
.map-navigation-control {
|
|
|
z-index: 1000;
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
/* 修复可能被遮挡的地图全屏控件 */
|
|
|
.map-fullscreen-control {
|
|
|
z-index: 1000;
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
/* 确保所有的地图测量工具不会被遮挡 */
|
|
|
.map-measurement-tool {
|
|
|
z-index: 1000;
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
/* 修复可能被遮挡的地图绘图工具 */
|
|
|
.map-drawing-tool {
|
|
|
z-index: 1000;
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
/* 确保所有的地图信息窗口不会被遮挡 */
|
|
|
.map-info-window {
|
|
|
z-index: 2000;
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
/* 修复可能被遮挡的地图弹出窗口 */
|
|
|
.map-popup {
|
|
|
z-index: 2000;
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
/* 确保所有的地图标记信息不会被遮挡 */
|
|
|
.map-marker-info {
|
|
|
z-index: 2000;
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
/* 修复可能被遮挡的地图图例 */
|
|
|
.map-legend {
|
|
|
z-index: 1000;
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
/* 确保所有的地图比例尺不会被遮挡 */
|
|
|
.map-scale {
|
|
|
z-index: 1000;
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
/* 修复可能被遮挡的地图指南针 */
|
|
|
.map-compass {
|
|
|
z-index: 1000;
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
/* 确保所有的地图搜索框不会被遮挡 */
|
|
|
.map-search-box {
|
|
|
z-index: 1000;
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
/* 修复可能被遮挡的地图工具栏 */
|
|
|
.map-toolbar {
|
|
|
z-index: 1000;
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
/* 确保所有的地图状态栏不会被遮挡 */
|
|
|
.map-status-bar {
|
|
|
z-index: 1000;
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
/* 修复可能被遮挡的图表工具栏 */
|
|
|
.chart-toolbar {
|
|
|
z-index: 100;
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
/* 确保所有的图表图例不会被遮挡 */
|
|
|
.chart-legend {
|
|
|
z-index: 100;
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
/* 修复可能被遮挡的图表工具提示 */
|
|
|
.chart-tooltip {
|
|
|
z-index: 1000;
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
/* 确保所有的图表数据标签不会被遮挡 */
|
|
|
.chart-data-label {
|
|
|
z-index: 100;
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
/* 修复可能被遮挡的图表轴标签 */
|
|
|
.chart-axis-label {
|
|
|
z-index: 100;
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
/* 确保所有的图表网格线不会被遮挡 */
|
|
|
.chart-grid-line {
|
|
|
z-index: 10;
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
/* 修复可能被遮挡的图表标题 */
|
|
|
.chart-title {
|
|
|
z-index: 100;
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
/* 确保所有的图表副标题不会被遮挡 */
|
|
|
.chart-subtitle {
|
|
|
z-index: 100;
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
/* 修复可能被遮挡的图表脚注 */
|
|
|
.chart-footer {
|
|
|
z-index: 100;
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
/* 确保所有的图表导出按钮不会被遮挡 */
|
|
|
.chart-export-btn {
|
|
|
z-index: 100;
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
/* 修复可能被遮挡的图表打印按钮 */
|
|
|
.chart-print-btn {
|
|
|
z-index: 100;
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
/* 确保所有的图表刷新按钮不会被遮挡 */
|
|
|
.chart-refresh-btn {
|
|
|
z-index: 100;
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
/* 修复可能被遮挡的图表设置按钮 */
|
|
|
.chart-settings-btn {
|
|
|
z-index: 100;
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
/* 确保所有的图表全屏按钮不会被遮挡 */
|
|
|
.chart-fullscreen-btn {
|
|
|
z-index: 100;
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
/* 修复可能被遮挡的图表缩放按钮 */
|
|
|
.chart-zoom-btn {
|
|
|
z-index: 100;
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
/* 确保所有的图表平移按钮不会被遮挡 */
|
|
|
.chart-pan-btn {
|
|
|
z-index: 100;
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
/* 修复可能被遮挡的图表重置按钮 */
|
|
|
.chart-reset-btn {
|
|
|
z-index: 100;
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
/* 确保所有的图表数据导出按钮不会被遮挡 */
|
|
|
.chart-data-export-btn {
|
|
|
z-index: 100;
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
/* 修复可能被遮挡的图表图像导出按钮 */
|
|
|
.chart-image-export-btn {
|
|
|
z-index: 100;
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
/* 确保所有的图表PDF导出按钮不会被遮挡 */
|
|
|
.chart-pdf-export-btn {
|
|
|
z-index: 100;
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
/* 修复可能被遮挡的图表Excel导出按钮 */
|
|
|
.chart-excel-export-btn {
|
|
|
z-index: 100;
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
/* 确保所有的图表CSV导出按钮不会被遮挡 */
|
|
|
.chart-csv-export-btn {
|
|
|
z-index: 100;
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
/* 修复可能被遮挡的图表数据表按钮 */
|
|
|
.chart-data-table-btn {
|
|
|
z-index: 100;
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
/* 确保所有的图表数据筛选器不会被遮挡 */
|
|
|
.chart-data-filter {
|
|
|
z-index: 100;
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
/* 修复可能被遮挡的图表数据排序器 */
|
|
|
.chart-data-sorter {
|
|
|
z-index: 100;
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
/* 确保所有的图表数据分组器不会被遮挡 */
|
|
|
.chart-data-grouper {
|
|
|
z-index: 100;
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
/* 修复可能被遮挡的图表数据聚合器 */
|
|
|
.chart-data-aggregator {
|
|
|
z-index: 100;
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
/* 确保所有的图表数据转换器不会被遮挡 */
|
|
|
.chart-data-transformer {
|
|
|
z-index: 100;
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
/* 修复可能被遮挡的图表数据验证器 */
|
|
|
.chart-data-validator {
|
|
|
z-index: 100;
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
/* 确保所有的图表数据清理器不会被遮挡 */
|
|
|
.chart-data-cleaner {
|
|
|
z-index: 100;
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
/* 修复可能被遮挡的图表数据更新器 */
|
|
|
.chart-data-updater {
|
|
|
z-index: 100;
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
/* 确保所有的图表数据刷新器不会被遮挡 */
|
|
|
.chart-data-refresher {
|
|
|
z-index: 100;
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
/* 确保所有的图表数据加载器不会被遮挡 */
|
|
|
.chart-data-loader {
|
|
|
z-index: 100;
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
/* 修复可能被遮挡的图表数据保存器 */
|
|
|
.chart-data-saver {
|
|
|
z-index: 100;
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
/* 确保所有的图表数据删除器不会被遮挡 */
|
|
|
.chart-data-deleter {
|
|
|
z-index: 100;
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
/* 修复可能被遮挡的图表数据编辑器 */
|
|
|
.chart-data-editor {
|
|
|
z-index: 100;
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
/* 确保所有的图表数据查看器不会被遮挡 */
|
|
|
.chart-data-viewer {
|
|
|
z-index: 100;
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
/* 修复可能被遮挡的图表数据导出器 */
|
|
|
.chart-data-exporter {
|
|
|
z-index: 100;
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
/* 确保所有的图表数据导入器不会被遮挡 */
|
|
|
.chart-data-importer {
|
|
|
z-index: 100;
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
/* 修复可能被遮挡的图表数据转换器 */
|
|
|
.chart-data-converter {
|
|
|
z-index: 100;
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
/* 确保所有的图表数据格式化器不会被遮挡 */
|
|
|
.chart-data-formatter {
|
|
|
z-index: 100;
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
/* 修复可能被遮挡的图表数据验证器 */
|
|
|
.chart-data-validator {
|
|
|
z-index: 100;
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
/* 确保所有的图表数据清理器不会被遮挡 */
|
|
|
.chart-data-cleaner {
|
|
|
z-index: 100;
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
/* 修复可能被遮挡的图表数据更新器 */
|
|
|
.chart-data-updater {
|
|
|
z-index: 100;
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
/* 确保所有的图表数据刷新器不会被遮挡 */
|
|
|
.chart-data-refresher {
|
|
|
z-index: 100;
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
/* 确保所有的图表数据加载器不会被遮挡 */
|
|
|
.chart-data-loader {
|
|
|
z-index: 100;
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
/* 修复可能被遮挡的图表数据保存器 */
|
|
|
.chart-data-saver {
|
|
|
z-index: 100;
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
/* 确保所有的图表数据删除器不会被遮挡 */
|
|
|
.chart-data-deleter {
|
|
|
z-index: 100;
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
/* 修复可能被遮挡的图表数据编辑器 */
|
|
|
.chart-data-editor {
|
|
|
z-index: 100;
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
/* 确保所有的图表数据查看器不会被遮挡 */
|
|
|
.chart-data-viewer {
|
|
|
z-index: 100;
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
/* 修复可能被遮挡的图表数据导出器 */
|
|
|
.chart-data-exporter {
|
|
|
z-index: 100;
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
/* 确保所有的图表数据导入器不会被遮挡 */
|
|
|
.chart-data-importer {
|
|
|
z-index: 100;
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
/* 修复可能被遮挡的图表数据转换器 */
|
|
|
.chart-data-converter {
|
|
|
z-index: 100;
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
/* 确保所有的图表数据格式化器不会被遮挡 */
|
|
|
.chart-data-formatter {
|
|
|
z-index: 100;
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
/* 修复移动端显示问题 */
|
|
|
@media (max-width: 768px) {
|
|
|
.grid.grid-cols-1.lg\:grid-cols-2.gap-4.md\:gap-6 {
|
|
|
grid-template-columns: 1fr;
|
|
|
}
|
|
|
|
|
|
.chart-modal-container {
|
|
|
grid-template-columns: 1fr;
|
|
|
}
|
|
|
|
|
|
#main-content {
|
|
|
padding: 10px;
|
|
|
}
|
|
|
|
|
|
.p-5 {
|
|
|
padding: 1rem;
|
|
|
}
|
|
|
|
|
|
.gap-4 {
|
|
|
gap: 1rem;
|
|
|
}
|
|
|
|
|
|
.gap-6 {
|
|
|
gap: 1rem;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
/* 修复移动端侧边栏问题 */
|
|
|
@media (max-width: 1023px) {
|
|
|
#sidebar {
|
|
|
transform: translateX(-100%);
|
|
|
transition: transform 0.3s ease;
|
|
|
}
|
|
|
|
|
|
#sidebar:not(.mobile-hidden) {
|
|
|
transform: translateX(0);
|
|
|
}
|
|
|
|
|
|
.lg\:ml-64 {
|
|
|
margin-left: 0;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
/* 确保所有图表容器有足够的空间 */
|
|
|
.h-64.relative {
|
|
|
min-height: 300px;
|
|
|
height: auto;
|
|
|
}
|
|
|
|
|
|
/* 修复图表标题可能被遮挡的问题 */
|
|
|
.chart-title {
|
|
|
margin-bottom: 15px;
|
|
|
padding: 0 10px;
|
|
|
}
|
|
|
|
|
|
/* 修复图表容器可能被遮挡的问题 */
|
|
|
.chart-container {
|
|
|
padding: 15px;
|
|
|
margin-bottom: 20px;
|
|
|
}
|
|
|
|
|
|
/* 确保所有模态框内容都能正确显示 */
|
|
|
.modal-content {
|
|
|
max-width: 95%;
|
|
|
max-height: 95vh;
|
|
|
}
|
|
|
|
|
|
/* 修复图表模态框容器问题 */
|
|
|
.chart-modal-container {
|
|
|
display: grid;
|
|
|
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
|
|
gap: 20px;
|
|
|
padding: 20px;
|
|
|
}
|
|
|
|
|
|
/* 确保图表模态框项目有足够的空间 */
|
|
|
.chart-modal-item {
|
|
|
min-height: 350px;
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
}
|
|
|
|
|
|
/* 修复图表模态框画布问题 */
|
|
|
.chart-modal-canvas {
|
|
|
flex: 1;
|
|
|
min-height: 250px;
|
|
|
}
|
|
|
|
|
|
/* 确保所有按钮都有足够的点击区域 */
|
|
|
button {
|
|
|
min-height: 36px;
|
|
|
min-width: 36px;
|
|
|
}
|
|
|
|
|
|
/* 修复表单元素可能被遮挡的问题 */
|
|
|
input,
|
|
|
select,
|
|
|
textarea {
|
|
|
min-height: 36px;
|
|
|
}
|
|
|
|
|
|
/* 确保所有下拉菜单都能正确显示 */
|
|
|
.dropdown-menu {
|
|
|
min-width: 160px;
|
|
|
}
|
|
|
|
|
|
/* 修复可能被遮挡的工具提示 */
|
|
|
.tooltip {
|
|
|
min-width: 120px;
|
|
|
padding: 8px;
|
|
|
}
|
|
|
|
|
|
/* 确保所有模态框标题都能正确显示 */
|
|
|
.modal-title {
|
|
|
white-space: nowrap;
|
|
|
overflow: hidden;
|
|
|
text-overflow: ellipsis;
|
|
|
}
|
|
|
|
|
|
/* 修复可能被遮挡的卡片标题 */
|
|
|
.card-title {
|
|
|
white-space: nowrap;
|
|
|
overflow: hidden;
|
|
|
text-overflow: ellipsis;
|
|
|
}
|
|
|
|
|
|
/* 确保所有表格都能正确显示 */
|
|
|
table {
|
|
|
width: 100%;
|
|
|
table-layout: fixed;
|
|
|
}
|
|
|
|
|
|
/* 修复可能被遮挡的表格单元格 */
|
|
|
td,
|
|
|
th {
|
|
|
word-wrap: break-word;
|
|
|
}
|
|
|
|
|
|
/* 确保所有图表都能正确显示 */
|
|
|
.chart-wrapper {
|
|
|
position: relative;
|
|
|
height: 100%;
|
|
|
}
|
|
|
|
|
|
/* 修复可能被遮挡的图表图例 */
|
|
|
.chart-legend {
|
|
|
max-height: 100px;
|
|
|
overflow-y: auto;
|
|
|
}
|
|
|
|
|
|
/* 确保所有进度条都能正确显示 */
|
|
|
.progress-container {
|
|
|
height: 20px;
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
/* 修复可能被遮挡的进度条 */
|
|
|
.progress-bar {
|
|
|
height: 100%;
|
|
|
transition: width 0.3s ease;
|
|
|
}
|
|
|
|
|
|
/* 确保所有状态指示器都能正确显示 */
|
|
|
.status-indicator {
|
|
|
width: 12px;
|
|
|
height: 12px;
|
|
|
border-radius: 50%;
|
|
|
}
|
|
|
|
|
|
/* 修复可能被遮挡的图标 */
|
|
|
.icon-wrapper {
|
|
|
display: inline-flex;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
}
|
|
|
|
|
|
/* 确保所有标签都能正确显示 */
|
|
|
.tag {
|
|
|
padding: 4px 8px;
|
|
|
border-radius: 4px;
|
|
|
display: inline-block;
|
|
|
}
|
|
|
|
|
|
/* 修复可能被遮挡的卡片内容 */
|
|
|
.card-body {
|
|
|
padding: 15px;
|
|
|
}
|
|
|
|
|
|
/* 确保所有面板都能正确显示 */
|
|
|
.panel {
|
|
|
margin-bottom: 20px;
|
|
|
overflow: hidden;
|
|
|
}
|
|
|
|
|
|
/* 修复可能被遮挡的面板标题 */
|
|
|
.panel-title {
|
|
|
padding: 10px 15px;
|
|
|
border-bottom: 1px solid rgba(64, 156, 255, 0.3);
|
|
|
}
|
|
|
|
|
|
/* 确保所有折叠面板都能正确显示 */
|
|
|
.collapse-panel {
|
|
|
border: 1px solid rgba(64, 156, 255, 0.3);
|
|
|
border-radius: 4px;
|
|
|
margin-bottom: 10px;
|
|
|
}
|
|
|
|
|
|
/* 修复可能被遮挡的折叠面板标题 */
|
|
|
.collapse-header {
|
|
|
padding: 10px 15px;
|
|
|
cursor: pointer;
|
|
|
}
|
|
|
|
|
|
/* 确保所有折叠面板内容都能正确显示 */
|
|
|
.collapse-content {
|
|
|
padding: 15px;
|
|
|
}
|
|
|
|
|
|
/* 修复可能被遮挡的分页控件 */
|
|
|
.pagination {
|
|
|
display: flex;
|
|
|
justify-content: center;
|
|
|
align-items: center;
|
|
|
margin: 20px 0;
|
|
|
}
|
|
|
|
|
|
/* 确保所有分页项都能正确显示 */
|
|
|
.page-item {
|
|
|
margin: 0 2px;
|
|
|
}
|
|
|
|
|
|
/* 修复可能被遮挡的分页链接 */
|
|
|
.page-link {
|
|
|
padding: 8px 12px;
|
|
|
border: 1px solid rgba(64, 156, 255, 0.3);
|
|
|
border-radius: 4px;
|
|
|
}
|
|
|
|
|
|
/* 确保所有警告框都能正确显示 */
|
|
|
.alert {
|
|
|
padding: 12px 15px;
|
|
|
border-radius: 4px;
|
|
|
margin-bottom: 15px;
|
|
|
}
|
|
|
|
|
|
/* 修复可能被遮挡的警告标题 */
|
|
|
.alert-title {
|
|
|
font-weight: bold;
|
|
|
margin-bottom: 5px;
|
|
|
}
|
|
|
|
|
|
/* 确保所有警告内容都能正确显示 */
|
|
|
.alert-content {
|
|
|
line-height: 1.5;
|
|
|
}
|
|
|
|
|
|
/* 修复可能被遮挡的卡片页脚 */
|
|
|
.card-footer {
|
|
|
padding: 10px 15px;
|
|
|
border-top: 1px solid rgba(64, 156, 255, 0.3);
|
|
|
}
|
|
|
|
|
|
/* 确保所有卡片头部都能正确显示 */
|
|
|
.card-header {
|
|
|
padding: 10px 15px;
|
|
|
border-bottom: 1px solid rgba(64, 156, 255, 0.3);
|
|
|
}
|
|
|
|
|
|
/* 修复可能被遮挡的卡片操作 */
|
|
|
.card-actions {
|
|
|
display: flex;
|
|
|
justify-content: flex-end;
|
|
|
gap: 10px;
|
|
|
padding: 10px 15px;
|
|
|
}
|
|
|
|
|
|
/* 确保所有表单组都能正确显示 */
|
|
|
.form-group {
|
|
|
margin-bottom: 15px;
|
|
|
}
|
|
|
|
|
|
/* 修复可能被遮挡的表单标签 */
|
|
|
.form-label {
|
|
|
display: block;
|
|
|
margin-bottom: 5px;
|
|
|
}
|
|
|
|
|
|
/* 确保所有表单控件都能正确显示 */
|
|
|
.form-control {
|
|
|
width: 100%;
|
|
|
padding: 8px 12px;
|
|
|
border-radius: 4px;
|
|
|
}
|
|
|
|
|
|
/* 修复可能被遮挡的表单帮助文本 */
|
|
|
.form-help {
|
|
|
font-size: 12px;
|
|
|
margin-top: 5px;
|
|
|
}
|
|
|
|
|
|
/* 确保所有按钮组都能正确显示 */
|
|
|
.btn-group {
|
|
|
display: flex;
|
|
|
gap: 10px;
|
|
|
}
|
|
|
|
|
|
/* 修复可能被遮挡的按钮组项 */
|
|
|
.btn-group-item {
|
|
|
flex: 1;
|
|
|
}
|
|
|
|
|
|
/* 确保所有工具栏都能正确显示 */
|
|
|
.toolbar {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
gap: 10px;
|
|
|
padding: 10px 15px;
|
|
|
border-bottom: 1px solid rgba(64, 156, 255, 0.3);
|
|
|
}
|
|
|
|
|
|
/* 修复可能被遮挡的工具栏项 */
|
|
|
.toolbar-item {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
gap: 5px;
|
|
|
}
|
|
|
|
|
|
/* 确保所有导航栏都能正确显示 */
|
|
|
.navbar {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
padding: 10px 15px;
|
|
|
border-bottom: 1px solid rgba(64, 156, 255, 0.3);
|
|
|
}
|
|
|
|
|
|
/* 修复可能被遮挡的导航项 */
|
|
|
.nav-item {
|
|
|
padding: 8px 12px;
|
|
|
border-radius: 4px;
|
|
|
}
|
|
|
|
|
|
/* 确保所有侧边栏都能正确显示 */
|
|
|
.sidebar {
|
|
|
width: 250px;
|
|
|
height: 100vh;
|
|
|
position: fixed;
|
|
|
top: 0;
|
|
|
left: 0;
|
|
|
overflow-y: auto;
|
|
|
}
|
|
|
|
|
|
/* 修复可能被遮挡的侧边栏项 */
|
|
|
.sidebar-item {
|
|
|
padding: 10px 15px;
|
|
|
border-left: 3px solid transparent;
|
|
|
}
|
|
|
|
|
|
/* 确保所有内容区域能正确显示 */
|
|
|
.content {
|
|
|
margin-left: 250px;
|
|
|
padding: 20px;
|
|
|
}
|
|
|
|
|
|
/* 修复可能被遮挡的内容卡片 */
|
|
|
.content-card {
|
|
|
margin-bottom: 20px;
|
|
|
overflow: hidden;
|
|
|
}
|
|
|
|
|
|
/* 确保所有内容标题都能正确显示 */
|
|
|
.content-title {
|
|
|
padding: 15px;
|
|
|
border-bottom: 1px solid rgba(64, 156, 255, 0.3);
|
|
|
}
|
|
|
|
|
|
/* 修复可能被遮挡的内容主体 */
|
|
|
.content-body {
|
|
|
padding: 15px;
|
|
|
}
|
|
|
|
|
|
/* 确保所有内容页脚都能正确显示 */
|
|
|
.content-footer {
|
|
|
padding: 15px;
|
|
|
border-top: 1px solid rgba(64, 156, 255, 0.3);
|
|
|
}
|
|
|
|
|
|
/* 修复可能被遮挡的页脚 */
|
|
|
footer {
|
|
|
padding: 20px;
|
|
|
border-top: 1px solid rgba(64, 156, 255, 0.3);
|
|
|
}
|
|
|
|
|
|
/* 确保所有页脚内容都能正确显示 */
|
|
|
.footer-content {
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
align-items: center;
|
|
|
}
|
|
|
|
|
|
/* 修复可能被遮挡的页脚链接 */
|
|
|
.footer-link {
|
|
|
margin: 0 10px;
|
|
|
}
|
|
|
|
|
|
/* 确保所有版权信息都能正确显示 */
|
|
|
.copyright {
|
|
|
text-align: center;
|
|
|
padding: 10px;
|
|
|
}
|
|
|
|
|
|
.bg-gray-100 {
|
|
|
background-color: rgba(40, 80, 130, 0.6) !important;
|
|
|
}
|
|
|
|
|
|
/* 隐藏导航链接的焦点样式 */
|
|
|
.nav-item:focus {
|
|
|
outline: none;
|
|
|
box-shadow: none;
|
|
|
|
|
|
}
|
|
|
|
|
|
/* 确保导航链接不会显示下划线 */
|
|
|
.nav-item {
|
|
|
text-decoration: none;
|
|
|
}
|
|
|
|
|
|
/* 隐藏所有锚点链接的焦点样式 */
|
|
|
/* a[href^="#"]:focus {
|
|
|
outline: none;
|
|
|
} */
|
|
|
/* 彻底隐藏链接的焦点和悬停效果 */
|
|
|
.nav-item,
|
|
|
a[href^="#"] {
|
|
|
text-decoration: none !important;
|
|
|
outline: none !important;
|
|
|
border: none !important;
|
|
|
pointer-events: auto;
|
|
|
}
|
|
|
|
|
|
.nav-item:focus,
|
|
|
.nav-item:hover,
|
|
|
.nav-item:active,
|
|
|
a[href^="#"]:focus,
|
|
|
a[href^="#"]:hover,
|
|
|
a[href^="#"]:active {
|
|
|
outline: none !important;
|
|
|
text-decoration: none !important;
|
|
|
border: none !important;
|
|
|
}
|
|
|
</style>
|
|
|
</head>
|
|
|
|
|
|
<body class="font-sans text-gray-800">
|
|
|
<div class="flex h-screen">
|
|
|
<!-- 顶部标题栏 -->
|
|
|
<div class="topDiv">
|
|
|
<div class="left">
|
|
|
<img src="/common/images/logo_gt.png" alt="Logo" />
|
|
|
<!-- <span id="current-date">2025年10月10日</span>
|
|
|
<span id="current-time">14:30:25</span> -->
|
|
|
</div>
|
|
|
<div class="center">无人机应用服务平台</div>
|
|
|
<div class="right">
|
|
|
<!-- <img src="/common/images/logo_gt.png" alt="Logo" /> -->
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<!-- 侧边导航栏 -->
|
|
|
<aside class="w-64 bg-white shadow-lg h-full fixed left-0 top-0 z-20 transition-all duration-300 mobile-hidden"
|
|
|
id="sidebar">
|
|
|
<!-- <div class="p-5 border-b border-gray-200 flex justify-between items-center">
|
|
|
<div class="flex items-center space-x-3">
|
|
|
<div class="w-10 h-10 bg-blue-600 rounded-lg flex items-center justify-center">
|
|
|
<i class="fa fa-plane text-white text-xl"></i>
|
|
|
</div>
|
|
|
<h1 class="text-xl font-bold">航空应用系统V2</h1>
|
|
|
</div>
|
|
|
</div> -->
|
|
|
|
|
|
<nav class="mt-6 px-3" style="margin-top: 80px;">
|
|
|
<p class="text-xs uppercase text-gray-500 font-semibold px-3 mb-2">主要功能</p>
|
|
|
<ul>
|
|
|
<li>
|
|
|
<button type="button" data-target="flight-task"
|
|
|
class="nav-item sidebar-item-active flex items-center px-3 py-3 rounded-lg transition-all mb-1 w-full text-left">
|
|
|
<i class="fa fa-tasks w-5 text-center mr-3"></i>
|
|
|
<span>飞行任务管理</span>
|
|
|
</button>
|
|
|
</li>
|
|
|
|
|
|
<li>
|
|
|
<button type="button" data-target="weather-data"
|
|
|
class="nav-item flex items-center px-3 py-3 rounded-lg transition-all mb-1 hover:bg-gray-100 w-full text-left">
|
|
|
<i class="fa fa-cloud w-5 text-center mr-3"></i>
|
|
|
<span>气象数据中心</span>
|
|
|
</button>
|
|
|
</li>
|
|
|
|
|
|
<li>
|
|
|
<button type="button" data-target="mapping"
|
|
|
class="nav-item flex items-center px-3 py-3 rounded-lg transition-all mb-1 hover:bg-gray-100 w-full text-left">
|
|
|
<i class="fa fa-map w-5 text-center mr-3"></i>
|
|
|
<span>测绘地图系统</span>
|
|
|
</button>
|
|
|
</li>
|
|
|
|
|
|
<li>
|
|
|
<button type="button" data-target="drone-inspection"
|
|
|
class="nav-item flex items-center px-3 py-3 rounded-lg transition-all mb-1 hover:bg-gray-100 w-full text-left">
|
|
|
<i class="fa fa-search w-5 text-center mr-3"></i>
|
|
|
<span>无人机巡检中心</span>
|
|
|
</button>
|
|
|
</li>
|
|
|
|
|
|
<li>
|
|
|
<button type="button" data-target="drone-data"
|
|
|
class="nav-item flex items-center px-3 py-3 rounded-lg transition-all mb-1 hover:bg-gray-100 w-full text-left">
|
|
|
<i class="fa fa-database w-5 text-center mr-3"></i>
|
|
|
<span>无人机数据中心</span>
|
|
|
</button>
|
|
|
</li>
|
|
|
</ul>
|
|
|
</nav>
|
|
|
|
|
|
<div class="absolute bottom-0 w-full p-4 border-t border-gray-200">
|
|
|
<div class="flex items-center">
|
|
|
<div class="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center text-blue-600">
|
|
|
<i class="fa fa-user"></i>
|
|
|
</div>
|
|
|
<div class="ml-3">
|
|
|
<p class="font-medium">张飞行员</p>
|
|
|
<p class="text-xs text-gray-500">高级飞行员</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</aside>
|
|
|
|
|
|
<!-- 主内容区域 -->
|
|
|
<main class="flex-1 ml-0 transition-all duration-300" id="main-content">
|
|
|
<!-- 顶部导航 -->
|
|
|
<header class="bg-white shadow-sm sticky top-0 z-10">
|
|
|
<div class="flex justify-between items-center p-4">
|
|
|
<div class="flex items-center">
|
|
|
<button id="mobile-menu-button" class="lg:hidden mr-3 text-gray-600 hover:text-gray-800">
|
|
|
<i class="fa fa-bars"></i>
|
|
|
</button>
|
|
|
<h2 class="text-xl font-semibold" id="page-title">飞行任务管理</h2>
|
|
|
</div>
|
|
|
<div class="flex items-center space-x-4">
|
|
|
<button
|
|
|
class="relative p-2 text-gray-600 hover:bg-gray-100 rounded-full transition-colors notification-button">
|
|
|
<i class="fa fa-bell-o"></i>
|
|
|
<span class="absolute top-1 right-1 w-2 h-2 bg-red-500 rounded-full animate-ping"></span>
|
|
|
<span class="absolute top-1 right-1 w-2 h-2 bg-red-500 rounded-full"></span>
|
|
|
</button>
|
|
|
<div class="h-6 w-px bg-gray-300"></div>
|
|
|
<div class="flex items-center space-x-2">
|
|
|
<span class="text-sm font-medium" id="current-date">2025年10月10日</span>
|
|
|
<i class="fa fa-calendar-o text-gray-600"></i>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</header>
|
|
|
|
|
|
<!-- 通知面板 -->
|
|
|
<div class="fixed top-16 right-0 w-80 bg-white rounded-xl shadow-lg z-50 transform translate-x-full transition-transform duration-300"
|
|
|
id="notification-panel">
|
|
|
<div class="p-4 border-b border-gray-200 flex justify-between items-center">
|
|
|
<h3 class="font-semibold">通知消息</h3>
|
|
|
<button class="text-gray-600 hover:text-gray-800" id="close-notification">
|
|
|
<i class="fa fa-times"></i>
|
|
|
</button>
|
|
|
</div>
|
|
|
<div class="max-h-96 overflow-y-auto scrollbar-hide">
|
|
|
<div class="p-4 border-b border-gray-200 hover:bg-gray-50 transition-colors">
|
|
|
<div class="flex">
|
|
|
<div
|
|
|
class="w-8 h-8 bg-yellow-100 rounded-full flex items-center justify-center text-yellow-600 flex-shrink-0">
|
|
|
<i class="fa fa-exclamation-triangle"></i>
|
|
|
</div>
|
|
|
<div class="ml-3">
|
|
|
<p class="text-sm font-medium">飞行任务FL-202510-003将延迟</p>
|
|
|
<p class="text-xs text-gray-500 mt-1">由于气象原因，原定于16:00的任务将推迟至17:30</p>
|
|
|
<p class="text-xs text-gray-500 mt-2">10分钟前</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="p-4 border-b border-gray-200 hover:bg-gray-50 transition-colors">
|
|
|
<div class="flex">
|
|
|
<div
|
|
|
class="w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center text-blue-600 flex-shrink-0">
|
|
|
<i class="fa fa-info"></i>
|
|
|
</div>
|
|
|
<div class="ml-3">
|
|
|
<p class="text-sm font-medium">新的气象数据已更新</p>
|
|
|
<p class="text-xs text-gray-500 mt-1">南部区域出现新的气象变化，请查看详情</p>
|
|
|
<p class="text-xs text-gray-500 mt-2">30分钟前</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="p-4 hover:bg-gray-50 transition-colors">
|
|
|
<div class="flex">
|
|
|
<div
|
|
|
class="w-8 h-8 bg-green-100 rounded-full flex items-center justify-center text-green-600 flex-shrink-0">
|
|
|
<i class="fa fa-check"></i>
|
|
|
</div>
|
|
|
<div class="ml-3">
|
|
|
<p class="text-sm font-medium">任务FL-202510-001已完成</p>
|
|
|
<p class="text-xs text-gray-500 mt-1">李明已成功完成巡检任务</p>
|
|
|
<p class="text-xs text-gray-500 mt-2">2小时前</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="p-3 border-t border-gray-200 text-center">
|
|
|
<button class="text-blue-600 text-sm hover:underline">查看所有通知</button>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<!-- 页面内容 -->
|
|
|
<div class="p-4 md:p-6">
|
|
|
<!-- 飞行任务管理界面 -->
|
|
|
<section id="flight-task" class="animate-fadeIn">
|
|
|
<div class="flex flex-wrap justify-between items-center mb-6 gap-4">
|
|
|
<h3 class="text-lg font-semibold">当前飞行任务</h3>
|
|
|
<button
|
|
|
class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg transition-all flex items-center transform hover:scale-105 active:scale-95">
|
|
|
<i class="fa fa-plus mr-2"></i>
|
|
|
<span>新建任务</span>
|
|
|
</button>
|
|
|
</div>
|
|
|
|
|
|
<!-- 飞行数据统计卡片 -->
|
|
|
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 md:gap-6 mb-6">
|
|
|
<div class="bg-white rounded-xl p-5 card-shadow card-shadow-hover transition-all">
|
|
|
<div class="flex justify-between items-start mb-4">
|
|
|
<div>
|
|
|
<p class="text-gray-500 text-sm">累计飞行次数</p>
|
|
|
<h4 class="text-2xl font-bold mt-1">124 次</h4>
|
|
|
</div>
|
|
|
<div
|
|
|
class="w-10 h-10 bg-blue-100 rounded-lg flex items-center justify-center text-blue-600">
|
|
|
<i class="fa fa-refresh"></i>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="flex items-center text-sm">
|
|
|
<span class="text-green-600 flex items-center">
|
|
|
<i class="fa fa-arrow-up mr-1"></i>12.5%
|
|
|
</span>
|
|
|
<span class="text-gray-500 ml-2">较上月</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div class="bg-white rounded-xl p-5 card-shadow card-shadow-hover transition-all">
|
|
|
<div class="flex justify-between items-start mb-4">
|
|
|
<div>
|
|
|
<p class="text-gray-500 text-sm">累计飞行里程</p>
|
|
|
<h4 class="text-2xl font-bold mt-1">8,532 km</h4>
|
|
|
</div>
|
|
|
<div
|
|
|
class="w-10 h-10 bg-teal-100 rounded-lg flex items-center justify-center text-teal-500">
|
|
|
<i class="fa fa-road"></i>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="flex items-center text-sm">
|
|
|
<span class="text-green-600 flex items-center">
|
|
|
<i class="fa fa-arrow-up mr-1"></i>8.3%
|
|
|
</span>
|
|
|
<span class="text-gray-500 ml-2">较上月</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div class="bg-white rounded-xl p-5 card-shadow card-shadow-hover transition-all">
|
|
|
<div class="flex justify-between items-start mb-4">
|
|
|
<div>
|
|
|
<p class="text-gray-500 text-sm">累计飞行时长</p>
|
|
|
<h4 class="text-2xl font-bold mt-1">364 小时</h4>
|
|
|
</div>
|
|
|
<div
|
|
|
class="w-10 h-10 bg-yellow-100 rounded-lg flex items-center justify-center text-yellow-600">
|
|
|
<i class="fa fa-clock-o"></i>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="flex items-center text-sm">
|
|
|
<span class="text-green-600 flex items-center">
|
|
|
<i class="fa fa-arrow-up mr-1"></i>15.2%
|
|
|
</span>
|
|
|
<span class="text-gray-500 ml-2">较上月</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div class="bg-white rounded-xl p-5 card-shadow card-shadow-hover transition-all">
|
|
|
<div class="flex justify-between items-start mb-4">
|
|
|
<div>
|
|
|
<p class="text-gray-500 text-sm">累计飞行任务数</p>
|
|
|
<h4 class="text-2xl font-bold mt-1">78 项</h4>
|
|
|
</div>
|
|
|
<div
|
|
|
class="w-10 h-10 bg-green-100 rounded-lg flex items-center justify-center text-green-600">
|
|
|
<i class="fa fa-tasks"></i>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="flex items-center text-sm">
|
|
|
<span class="text-green-600 flex items-center">
|
|
|
<i class="fa fa-arrow-up mr-1"></i>10.7%
|
|
|
</span>
|
|
|
<span class="text-gray-500 ml-2">较上月</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<!-- 任务审批统计 -->
|
|
|
<div class="bg-white1 rounded-xl p-5 card-shadow card-shadow-hover mb-6">
|
|
|
<div class="flex flex-wrap justify-between items-center mb-4 gap-3">
|
|
|
<h3 class="font-semibold">任务审批统计</h3>
|
|
|
<div class="flex space-x-2 approval-period-filter">
|
|
|
<button
|
|
|
class="px-3 py-1 text-sm rounded-lg border border-gray-300 hover:border-blue-500 transition-colors stat-filter-active"
|
|
|
data-period="week">本周</button>
|
|
|
<button
|
|
|
class="px-3 py-1 text-sm rounded-lg border border-gray-300 hover:border-blue-500 transition-colors"
|
|
|
data-period="month">本月</button>
|
|
|
<button
|
|
|
class="px-3 py-1 text-sm rounded-lg border border-gray-300 hover:border-blue-500 transition-colors"
|
|
|
data-period="quarter">本季度</button>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="h-64 relative">
|
|
|
<canvas id="approvalChart"></canvas>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<!-- 任务概览卡片 -->
|
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 md:gap-6 mb-6">
|
|
|
<div class="bg-white rounded-xl p-5 card-shadow card-shadow-hover transition-all">
|
|
|
<div class="flex justify-between items-start mb-4">
|
|
|
<div>
|
|
|
<p class="text-gray-500 text-sm">今日任务</p>
|
|
|
<h4 class="text-2xl font-bold mt-1">8 项</h4>
|
|
|
</div>
|
|
|
<div
|
|
|
class="w-10 h-10 bg-blue-100 rounded-lg flex items-center justify-center text-blue-600">
|
|
|
<i class="fa fa-calendar"></i>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="flex items-center text-sm">
|
|
|
<span class="text-green-600 flex items-center">
|
|
|
<i class="fa fa-arrow-up mr-1"></i>12%
|
|
|
</span>
|
|
|
<span class="text-gray-500 ml-2">较昨日</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div class="bg-white rounded-xl p-5 card-shadow card-shadow-hover transition-all">
|
|
|
<div class="flex justify-between items-start mb-4">
|
|
|
<div>
|
|
|
<p class="text-gray-500 text-sm">进行中</p>
|
|
|
<h4 class="text-2xl font-bold mt-1">3 项</h4>
|
|
|
</div>
|
|
|
<div
|
|
|
class="w-10 h-10 bg-yellow-100 rounded-lg flex items-center justify-center text-yellow-600">
|
|
|
<i class="fa fa-spinner"></i>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="flex items-center text-sm">
|
|
|
<span class="text-red-500 flex items-center">
|
|
|
<i class="fa fa-arrow-down mr-1"></i>5%
|
|
|
</span>
|
|
|
<span class="text-gray-500 ml-2">较昨日</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div class="bg-white rounded-xl p-5 card-shadow card-shadow-hover transition-all">
|
|
|
<div class="flex justify-between items-start mb-4">
|
|
|
<div>
|
|
|
<p class="text-gray-500 text-sm">已完成</p>
|
|
|
<h4 class="text-2xl font-bold mt-1">15 项</h4>
|
|
|
</div>
|
|
|
<div
|
|
|
class="w-10 h-10 bg-green-100 rounded-lg flex items-center justify-center text-green-600">
|
|
|
<i class="fa fa-check"></i>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="flex items-center text-sm">
|
|
|
<span class="text-green-600 flex items-center">
|
|
|
<i class="fa fa-arrow-up mr-1"></i>23%
|
|
|
</span>
|
|
|
<span class="text-gray-500 ml-2">较上周</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<!-- 任务列表 -->
|
|
|
<div
|
|
|
class="bg-white1 rounded-xl card-shadow overflow-hidden mb-6 transition-all duration-300 hover:shadow-lg">
|
|
|
<div class="p-5 border-b border-gray-200">
|
|
|
<h3 class="font-semibold">任务详情列表</h3>
|
|
|
</div>
|
|
|
<div class="overflow-x-auto">
|
|
|
<table class="w-full">
|
|
|
<thead>
|
|
|
<tr class="bg-gray-50">
|
|
|
<th
|
|
|
class="px-4 md:px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
|
|
任务编号</th>
|
|
|
<th
|
|
|
class="px-4 md:px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
|
|
任务名称</th>
|
|
|
<th
|
|
|
class="px-4 md:px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
|
|
起止时间</th>
|
|
|
<th
|
|
|
class="px-4 md:px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
|
|
负责人</th>
|
|
|
<th
|
|
|
class="px-4 md:px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
|
|
状态</th>
|
|
|
<th
|
|
|
class="px-4 md:px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
|
|
操作</th>
|
|
|
</tr>
|
|
|
</thead>
|
|
|
<tbody class="divide-y divide-gray-200">
|
|
|
<tr class="data-grid-row hover:bg-gray-50 transition-colors">
|
|
|
<td class="px-4 md:px-6 py-4 whitespace-nowrap text-sm data-grid-cell">
|
|
|
FL-202510-001</td>
|
|
|
<td class="px-4 md:px-6 py-4 whitespace-nowrap text-sm data-grid-cell">巡检任务</td>
|
|
|
<td class="px-4 md:px-6 py-4 whitespace-nowrap text-sm data-grid-cell">10:00 -
|
|
|
12:30</td>
|
|
|
<td class="px-4 md:px-6 py-4 whitespace-nowrap text-sm data-grid-cell">
|
|
|
<div class="flex items-center">
|
|
|
<div
|
|
|
class="w-6 h-6 bg-blue-100 rounded-full flex items-center justify-center text-blue-600 mr-2">
|
|
|
<i class="fa fa-user text-xs"></i>
|
|
|
</div>
|
|
|
李明
|
|
|
</div>
|
|
|
</td>
|
|
|
<td class="px-4 md:px-6 py-4 whitespace-nowrap text-sm data-grid-cell">
|
|
|
<span
|
|
|
class="px-2 py-1 text-xs rounded-full bg-green-100 text-green-800">已完成</span>
|
|
|
</td>
|
|
|
<td class="px-4 md:px-6 py-4 whitespace-nowrap text-sm data-grid-cell">
|
|
|
<button
|
|
|
class="text-blue-600 hover:text-blue-800 mr-3 transition-colors task-action-btn"
|
|
|
data-task="FL-202510-001" data-action="view">查看</button>
|
|
|
<button
|
|
|
class="text-gray-600 hover:text-gray-800 mr-3 transition-colors">编辑</button>
|
|
|
<button
|
|
|
class="text-red-600 hover:text-red-800 transition-colors">删除</button>
|
|
|
</td>
|
|
|
</tr>
|
|
|
<tr class="data-grid-row hover:bg-gray-50 transition-colors">
|
|
|
<td class="px-4 md:px-6 py-4 whitespace-nowrap text-sm data-grid-cell">
|
|
|
FL-202510-002</td>
|
|
|
<td class="px-4 md:px-6 py-4 whitespace-nowrap text-sm data-grid-cell">气象探测任务
|
|
|
</td>
|
|
|
<td class="px-4 md:px-6 py-4 whitespace-nowrap text-sm data-grid-cell">13:00 -
|
|
|
15:45</td>
|
|
|
<td class="px-4 md:px-6 py-4 whitespace-nowrap text-sm data-grid-cell">
|
|
|
<div class="flex items-center">
|
|
|
<div
|
|
|
class="w-6 h-6 bg-blue-100 rounded-full flex items-center justify-center text-blue-600 mr-2">
|
|
|
<i class="fa fa-user text-xs"></i>
|
|
|
</div>
|
|
|
王华
|
|
|
</div>
|
|
|
</td>
|
|
|
<td class="px-4 md:px-6 py-4 whitespace-nowrap text-sm data-grid-cell">
|
|
|
<span
|
|
|
class="px-2 py-1 text-xs rounded-full bg-yellow-100 text-yellow-800">进行中</span>
|
|
|
</td>
|
|
|
<td class="px-4 md:px-6 py-4 whitespace-nowrap text-sm data-grid-cell">
|
|
|
<button
|
|
|
class="text-blue-600 hover:text-blue-800 mr-3 transition-colors task-action-btn"
|
|
|
data-task="FL-202510-002" data-action="view">查看</button>
|
|
|
<button
|
|
|
class="text-gray-600 hover:text-gray-800 mr-3 transition-colors">编辑</button>
|
|
|
<button
|
|
|
class="text-red-600 hover:text-red-800 transition-colors">删除</button>
|
|
|
</td>
|
|
|
</tr>
|
|
|
<tr class="data-grid-row hover:bg-gray-50 transition-colors">
|
|
|
<td class="px-4 md:px-6 py-4 whitespace-nowrap text-sm data-grid-cell">
|
|
|
FL-202510-003</td>
|
|
|
<td class="px-4 md:px-6 py-4 whitespace-nowrap text-sm data-grid-cell">航拍测绘任务
|
|
|
</td>
|
|
|
<td class="px-4 md:px-6 py-4 whitespace-nowrap text-sm data-grid-cell">16:00 -
|
|
|
18:30</td>
|
|
|
<td class="px-4 md:px-6 py-4 whitespace-nowrap text-sm data-grid-cell">
|
|
|
<div class="flex items-center">
|
|
|
<div
|
|
|
class="w-6 h-6 bg-blue-100 rounded-full flex items-center justify-center text-blue-600 mr-2">
|
|
|
<i class="fa fa-user text-xs"></i>
|
|
|
</div>
|
|
|
张伟
|
|
|
</div>
|
|
|
</td>
|
|
|
<td class="px-4 md:px-6 py-4 whitespace-nowrap text-sm data-grid-cell">
|
|
|
<span
|
|
|
class="px-2 py-1 text-xs rounded-full bg-gray-100 text-gray-800">待执行</span>
|
|
|
</td>
|
|
|
<td class="px-4 md:px-6 py-4 whitespace-nowrap text-sm data-grid-cell">
|
|
|
<button
|
|
|
class="text-blue-600 hover:text-blue-800 mr-3 transition-colors task-action-btn"
|
|
|
data-task="FL-202510-003" data-action="view">查看</button>
|
|
|
<button
|
|
|
class="text-gray-600 hover:text-gray-800 mr-3 transition-colors">编辑</button>
|
|
|
<button
|
|
|
class="text-red-600 hover:text-red-800 transition-colors">删除</button>
|
|
|
</td>
|
|
|
</tr>
|
|
|
</tbody>
|
|
|
</table>
|
|
|
</div>
|
|
|
<div class="p-4 border-t border-gray-200 flex flex-wrap justify-between items-center gap-4">
|
|
|
<p class="text-sm text-gray-500">显示 1 至 3 条，共 8 条</p>
|
|
|
<div class="flex space-x-1">
|
|
|
<button
|
|
|
class="w-8 h-8 flex items-center justify-center rounded border border-gray-300 text-gray-500 hover:bg-gray-100 disabled:opacity-50 transition-colors"
|
|
|
disabled>
|
|
|
<i class="fa fa-chevron-left text-xs"></i>
|
|
|
</button>
|
|
|
<button
|
|
|
class="w-8 h-8 flex items-center justify-center rounded bg-blue-600 text-white hover:bg-blue-700 transition-colors">1</button>
|
|
|
<button
|
|
|
class="w-8 h-8 flex items-center justify-center rounded border border-gray-300 hover:bg-gray-100 transition-colors">2</button>
|
|
|
<button
|
|
|
class="w-8 h-8 flex items-center justify-center rounded border border-gray-300 hover:bg-gray-100 transition-colors">3</button>
|
|
|
<button
|
|
|
class="w-8 h-8 flex items-center justify-center rounded border border-gray-300 text-gray-500 hover:bg-gray-100 transition-colors">
|
|
|
<i class="fa fa-chevron-right text-xs"></i>
|
|
|
</button>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<!-- 任务完成情况和任务类型分布 -->
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-4 md:gap-6">
|
|
|
<div class="bg-white1 rounded-xl p-5 card-shadow card-shadow-hover transition-all">
|
|
|
<div class="flex flex-wrap justify-between items-center mb-4 gap-3">
|
|
|
<h3 class="font-semibold">任务完成情况</h3>
|
|
|
<div class="flex space-x-2 task-period-filter">
|
|
|
<button
|
|
|
class="px-3 py-1 text-sm rounded-lg border border-gray-300 hover:border-blue-500 transition-colors stat-filter-active"
|
|
|
data-period="month">本月</button>
|
|
|
<button
|
|
|
class="px-3 py-1 text-sm rounded-lg border border-gray-300 hover:border-blue-500 transition-colors"
|
|
|
data-period="quarter">本季度</button>
|
|
|
<button
|
|
|
class="px-3 py-1 text-sm rounded-lg border border-gray-300 hover:border-blue-500 transition-colors"
|
|
|
data-period="year">本年</button>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="h-64 relative">
|
|
|
<canvas id="taskCompletionChart"></canvas>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="bg-white1 rounded-xl p-5 card-shadow card-shadow-hover transition-all">
|
|
|
<div class="flex flex-wrap justify-between items-center mb-4 gap-3">
|
|
|
<h3 class="font-semibold">任务类型分布</h3>
|
|
|
<div class="flex items-center">
|
|
|
<span class="text-sm text-gray-500 mr-2">时间范围:</span>
|
|
|
<select
|
|
|
class="appearance-none bg-white border border-gray-300 rounded-lg pl-3 pr-8 py-1 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500/50 transition-all hover:border-blue-300 task-type-filter">
|
|
|
<option value="month">近一个月</option>
|
|
|
<option value="quarter">近三个月</option>
|
|
|
<option value="year">近一年</option>
|
|
|
</select>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="h-64 relative">
|
|
|
<canvas id="taskTypeChart"></canvas>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</section>
|
|
|
|
|
|
<!-- 气象数据中心 -->
|
|
|
<section id="weather-data" class="animate-fadeIn hidden">
|
|
|
<div class="flex flex-wrap justify-between items-center mb-6 gap-4">
|
|
|
<h3 class="text-lg font-semibold">气象数据中心</h3>
|
|
|
<div class="flex items-center space-x-3">
|
|
|
<div class="relative">
|
|
|
<select
|
|
|
class="appearance-none bg-white border border-gray-300 rounded-lg pl-3 pr-8 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500/50 transition-all hover:border-blue-300 weather-region-filter">
|
|
|
<option value="all">全部区域</option>
|
|
|
<option value="north">北部区域</option>
|
|
|
<option value="south">南部区域</option>
|
|
|
<option value="east">东部区域</option>
|
|
|
<option value="west">西部区域</option>
|
|
|
</select>
|
|
|
</div>
|
|
|
<button
|
|
|
class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg transition-all flex items-center transform hover:scale-105 active:scale-95">
|
|
|
<i class="fa fa-refresh mr-2"></i>
|
|
|
<span>刷新数据</span>
|
|
|
</button>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<!-- 气象预警 -->
|
|
|
<div class="bg-white1 rounded-xl p-5 card-shadow mb-6">
|
|
|
<div class="flex items-start justify-between mb-4">
|
|
|
<div>
|
|
|
<h4 class="font-semibold text-lg flex items-center">
|
|
|
<i class="fa fa-exclamation-circle text-yellow-600 mr-2"></i>
|
|
|
气象预警信息
|
|
|
</h4>
|
|
|
<p class="text-gray-500 text-sm mt-1">最近24小时内的气象预警通知</p>
|
|
|
</div>
|
|
|
<button class="text-blue-600 hover:text-blue-800 text-sm transition-colors">查看全部</button>
|
|
|
</div>
|
|
|
|
|
|
<div class="space-y-4">
|
|
|
<div class="p-4 rounded-lg weather-alert bg-yellow-50 border border-yellow-200">
|
|
|
<div class="flex items-start justify-between">
|
|
|
<div>
|
|
|
<div class="flex items-center">
|
|
|
<span
|
|
|
class="px-2 py-1 text-xs rounded-full bg-yellow-100 text-yellow-800 mr-2">大风预警</span>
|
|
|
<p class="text-sm font-medium">南部海域将出现强风天气</p>
|
|
|
</div>
|
|
|
<p class="text-sm text-gray-500 mt-2">
|
|
|
预计10月11日08:00至18:00，南部海域将出现8-10级强风，阵风可达11级，不适合执行飞行任务，建议所有相关任务推迟。</p>
|
|
|
</div>
|
|
|
<span class="text-xs text-gray-500">2小时前</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div class="p-4 rounded-lg border border-gray-200 hover:border-blue-200 transition-colors">
|
|
|
<div class="flex items-start justify-between">
|
|
|
<div>
|
|
|
<div class="flex items-center">
|
|
|
<span
|
|
|
class="px-2 py-1 text-xs rounded-full bg-blue-100 text-blue-800 mr-2">天气变化</span>
|
|
|
<p class="text-sm font-medium">东部区域能见度下降</p>
|
|
|
</div>
|
|
|
<p class="text-sm text-gray-500 mt-2">
|
|
|
预计10月10日16:00起，东部区域将出现轻雾，能见度将从10公里下降至5-6公里，执行任务时请谨慎驾驶。</p>
|
|
|
</div>
|
|
|
<span class="text-xs text-gray-500">5小时前</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<!-- 无人机气象五要素曲线图 -->
|
|
|
<div class="bg-white1 rounded-xl p-5 card-shadow card-shadow-hover mb-6">
|
|
|
<div class="flex flex-wrap justify-between items-center mb-4 gap-3">
|
|
|
<h3 class="font-semibold">无人机气象五要素监测</h3>
|
|
|
<div class="flex space-x-2 weather-trend-filter">
|
|
|
<button
|
|
|
class="px-3 py-1 text-sm rounded-lg border border-gray-300 hover:border-blue-500 transition-colors"
|
|
|
data-period="day">24小时</button>
|
|
|
<button
|
|
|
class="px-3 py-1 text-sm rounded-lg border border-gray-300 hover:border-blue-500 transition-colors stat-filter-active"
|
|
|
data-period="week">7天</button>
|
|
|
<button
|
|
|
class="px-3 py-1 text-sm rounded-lg border border-gray-300 hover:border-blue-500 transition-colors"
|
|
|
data-period="month">30天</button>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="h-72 relative">
|
|
|
<canvas id="weatherFiveElementsChart"></canvas>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<!-- 大气成分数据条形图 -->
|
|
|
<div class="bg-white1 rounded-xl p-5 card-shadow card-shadow-hover mb-6">
|
|
|
<div class="flex flex-wrap justify-between items-center mb-4 gap-3">
|
|
|
<h3 class="font-semibold">大气成分数据分析</h3>
|
|
|
<div class="flex items-center">
|
|
|
<span class="text-sm text-gray-500 mr-2">监测点:</span>
|
|
|
<select
|
|
|
class="appearance-none bg-white border border-gray-300 rounded-lg pl-3 pr-8 py-1 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500/50 transition-all hover:border-blue-300 atmosphere-location-filter">
|
|
|
<option value="sea">海上监测点</option>
|
|
|
<option value="island">岛屿监测点</option>
|
|
|
<option value="coastal">沿海监测点</option>
|
|
|
</select>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="h-72 relative">
|
|
|
<canvas id="atmosphereCompositionChart"></canvas>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<!-- 气象数据概览 -->
|
|
|
<div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 gap-4 md:gap-6 mb-6">
|
|
|
<div class="bg-white rounded-xl p-5 card-shadow card-shadow-hover transition-all">
|
|
|
<div class="flex justify-between items-start mb-4">
|
|
|
<div>
|
|
|
<p class="text-gray-500 text-sm">温度</p>
|
|
|
<h4 class="text-2xl font-bold mt-1 weather-value" id="temperature-value">23.5°C</h4>
|
|
|
</div>
|
|
|
<div
|
|
|
class="w-10 h-10 bg-yellow-100 rounded-lg flex items-center justify-center text-yellow-600">
|
|
|
<i class="fa fa-thermometer-half"></i>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="flex items-center text-sm">
|
|
|
<span class="text-red-500 flex items-center">
|
|
|
<i class="fa fa-arrow-up mr-1"></i>1.2°C
|
|
|
</span>
|
|
|
<span class="text-gray-500 ml-2">较昨日</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div class="bg-white rounded-xl p-5 card-shadow card-shadow-hover transition-all">
|
|
|
<div class="flex justify-between items-start mb-4">
|
|
|
<div>
|
|
|
<p class="text-gray-500 text-sm">湿度</p>
|
|
|
<h4 class="text-2xl font-bold mt-1 weather-value" id="humidity-value">68%</h4>
|
|
|
</div>
|
|
|
<div
|
|
|
class="w-10 h-10 bg-blue-100 rounded-lg flex items-center justify-center text-blue-600">
|
|
|
<i class="fa fa-tint"></i>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="flex items-center text-sm">
|
|
|
<span class="text-green-600 flex items-center">
|
|
|
<i class="fa fa-arrow-down mr-1"></i>3%
|
|
|
</span>
|
|
|
<span class="text-gray-500 ml-2">较昨日</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div class="bg-white rounded-xl p-5 card-shadow card-shadow-hover transition-all">
|
|
|
<div class="flex justify-between items-start mb-4">
|
|
|
<div>
|
|
|
<p class="text-gray-500 text-sm">气压</p>
|
|
|
<h4 class="text-2xl font-bold mt-1 weather-value" id="pressure-value">1013 hPa</h4>
|
|
|
</div>
|
|
|
<div
|
|
|
class="w-10 h-10 bg-teal-100 rounded-lg flex items-center justify-center text-teal-500">
|
|
|
<i class="fa fa-dashboard"></i>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="flex items-center text-sm">
|
|
|
<span class="text-green-600 flex items-center">
|
|
|
<i class="fa fa-arrow-up mr-1"></i>2 hPa
|
|
|
</span>
|
|
|
<span class="text-gray-500 ml-2">较昨日</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div class="bg-white rounded-xl p-5 card-shadow card-shadow-hover transition-all">
|
|
|
<div class="flex justify-between items-start mb-4">
|
|
|
<div>
|
|
|
<p class="text-gray-500 text-sm">风速</p>
|
|
|
<h4 class="text-2xl font-bold mt-1 weather-value" id="wind-speed-value">4.2 m/s</h4>
|
|
|
</div>
|
|
|
<div
|
|
|
class="w-10 h-10 bg-teal-100 rounded-lg flex items-center justify-center text-teal-500">
|
|
|
<i class="fa fa-wind"></i>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="flex items-center text-sm">
|
|
|
<span class="text-red-500 flex items-center">
|
|
|
<i class="fa fa-arrow-up mr-1"></i>1.5 m/s
|
|
|
</span>
|
|
|
<span class="text-gray-500 ml-2">较昨日</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div class="bg-white rounded-xl p-5 card-shadow card-shadow-hover transition-all">
|
|
|
<div class="flex justify-between items-start mb-4">
|
|
|
<div>
|
|
|
<p class="text-gray-500 text-sm">风向</p>
|
|
|
<h4 class="text-2xl font-bold mt-1 weather-value" id="wind-direction-value">东北</h4>
|
|
|
</div>
|
|
|
<div
|
|
|
class="w-10 h-10 bg-blue-100 rounded-lg flex items-center justify-center text-blue-600">
|
|
|
<i class="fa fa-compass"></i>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="flex items-center text-sm">
|
|
|
<span class="text-gray-500 flex items-center">
|
|
|
<i class="fa fa-exchange mr-1"></i>无明显变化
|
|
|
</span>
|
|
|
<span class="text-gray-500 ml-2">较昨日</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<!-- 区域气象详情 -->
|
|
|
<div class="bg-white1 rounded-xl card-shadow overflow-hidden">
|
|
|
<div class="p-5 border-b border-gray-200">
|
|
|
<h3 class="font-semibold">区域气象详情</h3>
|
|
|
</div>
|
|
|
<div class="overflow-x-auto">
|
|
|
<table class="w-full">
|
|
|
<thead>
|
|
|
<tr class="bg-gray-50">
|
|
|
<th
|
|
|
class="px-4 md:px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
|
|
区域</th>
|
|
|
<th
|
|
|
class="px-4 md:px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
|
|
温度</th>
|
|
|
<th
|
|
|
class="px-4 md:px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
|
|
湿度</th>
|
|
|
<th
|
|
|
class="px-4 md:px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
|
|
风速</th>
|
|
|
<th
|
|
|
class="px-4 md:px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
|
|
风向</th>
|
|
|
<th
|
|
|
class="px-4 md:px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
|
|
适合飞行</th>
|
|
|
<th
|
|
|
class="px-4 md:px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
|
|
更新时间</th>
|
|
|
</tr>
|
|
|
</thead>
|
|
|
<tbody class="divide-y divide-gray-200">
|
|
|
<tr class="data-grid-row hover:bg-gray-50 transition-colors">
|
|
|
<td class="px-4 md:px-6 py-4 whitespace-nowrap text-sm data-grid-cell">三亚湾</td>
|
|
|
<td class="px-4 md:px-6 py-4 whitespace-nowrap text-sm data-grid-cell">28.8°C
|
|
|
</td>
|
|
|
<td class="px-4 md:px-6 py-4 whitespace-nowrap text-sm data-grid-cell">65%</td>
|
|
|
<td class="px-4 md:px-6 py-4 whitespace-nowrap text-sm data-grid-cell">3.5 m/s
|
|
|
</td>
|
|
|
<td class="px-4 md:px-6 py-4 whitespace-nowrap text-sm data-grid-cell">东北</td>
|
|
|
<td class="px-4 md:px-6 py-4 whitespace-nowrap text-sm data-grid-cell">
|
|
|
<span
|
|
|
class="px-2 py-1 text-xs rounded-full bg-green-100 text-green-800">适合</span>
|
|
|
</td>
|
|
|
<td class="px-4 md:px-6 py-4 whitespace-nowrap text-sm data-grid-cell">10-10
|
|
|
10:30</td>
|
|
|
</tr>
|
|
|
<tr class="data-grid-row hover:bg-gray-50 transition-colors">
|
|
|
<td class="px-4 md:px-6 py-4 whitespace-nowrap text-sm data-grid-cell">西岛</td>
|
|
|
<td class="px-4 md:px-6 py-4 whitespace-nowrap text-sm data-grid-cell">29.6°C
|
|
|
</td>
|
|
|
<td class="px-4 md:px-6 py-4 whitespace-nowrap text-sm data-grid-cell">72%</td>
|
|
|
<td class="px-4 md:px-6 py-4 whitespace-nowrap text-sm data-grid-cell">5.8 m/s
|
|
|
</td>
|
|
|
<td class="px-4 md:px-6 py-4 whitespace-nowrap text-sm data-grid-cell">东南</td>
|
|
|
<td class="px-4 md:px-6 py-4 whitespace-nowrap text-sm data-grid-cell">
|
|
|
<span
|
|
|
class="px-2 py-1 text-xs rounded-full bg-green-100 text-green-800">适合</span>
|
|
|
</td>
|
|
|
<td class="px-4 md:px-6 py-4 whitespace-nowrap text-sm data-grid-cell">10-10
|
|
|
10:30</td>
|
|
|
</tr>
|
|
|
<tr class="data-grid-row hover:bg-gray-50 transition-colors">
|
|
|
<td class="px-4 md:px-6 py-4 whitespace-nowrap text-sm data-grid-cell">蜈支洲岛</td>
|
|
|
<td class="px-4 md:px-6 py-4 whitespace-nowrap text-sm data-grid-cell">30.1°C
|
|
|
</td>
|
|
|
<td class="px-4 md:px-6 py-4 whitespace-nowrap text-sm data-grid-cell">70%</td>
|
|
|
<td class="px-4 md:px-6 py-4 whitespace-nowrap text-sm data-grid-cell">4.2 m/s
|
|
|
</td>
|
|
|
<td class="px-4 md:px-6 py-4 whitespace-nowrap text-sm data-grid-cell">西北</td>
|
|
|
<td class="px-4 md:px-6 py-4 whitespace-nowrap text-sm data-grid-cell">
|
|
|
<span
|
|
|
class="px-2 py-1 text-xs rounded-full bg-green-100 text-green-800">适合</span>
|
|
|
</td>
|
|
|
<td class="px-4 md:px-6 py-4 whitespace-nowrap text-sm data-grid-cell">10-10
|
|
|
10:30</td>
|
|
|
</tr>
|
|
|
<tr class="data-grid-row hover:bg-gray-50 transition-colors">
|
|
|
<td class="px-4 md:px-6 py-4 whitespace-nowrap text-sm data-grid-cell">分界洲岛</td>
|
|
|
<td class="px-4 md:px-6 py-4 whitespace-nowrap text-sm data-grid-cell">29.3°C
|
|
|
</td>
|
|
|
<td class="px-4 md:px-6 py-4 whitespace-nowrap text-sm data-grid-cell">62%</td>
|
|
|
<td class="px-4 md:px-6 py-4 whitespace-nowrap text-sm data-grid-cell">3.8 m/s
|
|
|
</td>
|
|
|
<td class="px-4 md:px-6 py-4 whitespace-nowrap text-sm data-grid-cell">西南</td>
|
|
|
<td class="px-4 md:px-6 py-4 whitespace-nowrap text-sm data-grid-cell">
|
|
|
<span
|
|
|
class="px-2 py-1 text-xs rounded-full bg-green-100 text-green-800">适合</span>
|
|
|
</td>
|
|
|
<td class="px-4 md:px-6 py-4 whitespace-nowrap text-sm data-grid-cell">10-10
|
|
|
10:30</td>
|
|
|
</tr>
|
|
|
</tbody>
|
|
|
</table>
|
|
|
</div>
|
|
|
<div class="p-4 border-t border-gray-200 flex flex-wrap justify-between items-center gap-4">
|
|
|
<p class="text-sm text-gray-500">显示 1 至 4 条，共 12 条</p>
|
|
|
<div class="flex space-x-1">
|
|
|
<button
|
|
|
class="w-8 h-8 flex items-center justify-center rounded border border-gray-300 text-gray-500 hover:bg-gray-100 disabled:opacity-50 transition-colors"
|
|
|
disabled>
|
|
|
<i class="fa fa-chevron-left text-xs"></i>
|
|
|
</button>
|
|
|
<button
|
|
|
class="w-8 h-8 flex items-center justify-center rounded bg-blue-600 text-white hover:bg-blue-700 transition-colors">1</button>
|
|
|
<button
|
|
|
class="w-8 h-8 flex items-center justify-center rounded border border-gray-300 hover:bg-gray-100 transition-colors">2</button>
|
|
|
<button
|
|
|
class="w-8 h-8 flex items-center justify-center rounded border border-gray-300 hover:bg-gray-100 transition-colors">3</button>
|
|
|
<button
|
|
|
class="w-8 h-8 flex items-center justify-center rounded border border-gray-300 text-gray-500 hover:bg-gray-100 transition-colors">
|
|
|
<i class="fa fa-chevron-right text-xs"></i>
|
|
|
</button>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</section>
|
|
|
|
|
|
<!-- 测绘地图系统 - 海岛测绘类型 -->
|
|
|
<section id="mapping" class="animate-fadeIn hidden">
|
|
|
<div class="flex flex-wrap justify-between items-center mb-6 gap-4">
|
|
|
<h3 class="text-lg font-semibold">测绘地图系统</h3>
|
|
|
<div class="flex items-center space-x-3">
|
|
|
<div class="relative">
|
|
|
<select
|
|
|
class="appearance-none bg-white border border-gray-300 rounded-lg pl-3 pr-8 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500/50 transition-all hover:border-blue-300 map-type-filter">
|
|
|
<option value="satellite">卫星地图</option>
|
|
|
<option value="terrain">地形地图</option>
|
|
|
<option value="vector">矢量地图</option>
|
|
|
<option value="3d">3D地形图</option>
|
|
|
</select>
|
|
|
</div>
|
|
|
<button
|
|
|
class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg transition-all flex items-center transform hover:scale-105 active:scale-95">
|
|
|
<i class="fa fa-download mr-2"></i>
|
|
|
<span>导出地图</span>
|
|
|
</button>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<!-- 地图和测绘数据 - 改为海岛测绘 -->
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-3 gap-4 md:gap-6 mb-6">
|
|
|
<div
|
|
|
class="lg:col-span-2 bg-white rounded-xl overflow-hidden card-shadow card-shadow-hover transition-all">
|
|
|
<div class="p-5 border-b border-gray-200 flex justify-between items-center">
|
|
|
<h4 class="font-semibold">海岛测绘地图</h4>
|
|
|
<!-- <div class="flex items-center space-x-2">
|
|
|
<button
|
|
|
class="p-2 text-gray-600 hover:bg-gray-100 rounded transition-colors map-control-btn"
|
|
|
data-action="zoom-in">
|
|
|
<i class="fa fa-search-plus"></i>
|
|
|
</button>
|
|
|
<button
|
|
|
class="p-2 text-gray-600 hover:bg-gray-100 rounded transition-colors map-control-btn"
|
|
|
data-action="zoom-out">
|
|
|
<i class="fa fa-search-minus"></i>
|
|
|
</button>
|
|
|
<button
|
|
|
class="p-2 text-gray-600 hover:bg-gray-100 rounded transition-colors map-control-btn"
|
|
|
data-action="reset">
|
|
|
<i class="fa fa-home"></i>
|
|
|
</button>
|
|
|
<button
|
|
|
class="p-2 text-gray-600 hover:bg-gray-100 rounded transition-colors map-control-btn"
|
|
|
data-action="fullscreen">
|
|
|
<i class="fa fa-expand"></i>
|
|
|
</button>
|
|
|
</div> -->
|
|
|
</div>
|
|
|
<div class="relative h-80 md:h-[520px] bg-gray-100">
|
|
|
<!-- 海岛测绘地图 - 3D地形图样式 -->
|
|
|
<div id="mapimg"
|
|
|
class="w-full h-full bg-gradient-to-br from-blue-100 to-green-100 flex items-center justify-center relative overflow-hidden">
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- 地图覆盖层 -->
|
|
|
<!-- <div
|
|
|
class="absolute bottom-4 left-4 right-4 md:left-auto md:w-64 bg-white/90 backdrop-blur-sm rounded-lg shadow-lg p-3 map-overlay">
|
|
|
<div class="flex items-center justify-between mb-2">
|
|
|
<h5 class="font-medium text-sm">海岛测绘视图</h5>
|
|
|
<span class="text-xs text-gray-500">比例尺: 1:50000</span>
|
|
|
</div>
|
|
|
<div class="text-xs text-gray-500 mb-3">点击地图上的标记点查看详细测绘数据</div>
|
|
|
<div class="grid grid-cols-2 gap-2 text-xs">
|
|
|
<div class="bg-gray-100 p-2 rounded">
|
|
|
<p class="text-gray-500">测绘区域</p>
|
|
|
<p class="font-medium" id="current-map-area">三亚湾</p>
|
|
|
</div>
|
|
|
<div class="bg-gray-100 p-2 rounded">
|
|
|
<p class="text-gray-500">精度</p>
|
|
|
<p class="font-medium">0.5米</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div> -->
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div class="bg-white rounded-xl p-5 card-shadow card-shadow-hover transition-all">
|
|
|
<h4 class="font-semibold mb-4">海岛测绘任务进度</h4>
|
|
|
|
|
|
<div class="space-y-5">
|
|
|
<div>
|
|
|
<div class="flex justify-between items-center mb-1">
|
|
|
<div class="flex items-center">
|
|
|
<span class="w-3 h-3 bg-blue-600 rounded-full mr-2"></span>
|
|
|
<span class="text-sm">三亚湾地形测绘</span>
|
|
|
</div>
|
|
|
<span class="text-sm font-medium">100%</span>
|
|
|
</div>
|
|
|
<div class="w-full bg-gray-200 rounded-full h-2">
|
|
|
<div class="bg-blue-600 h-2 rounded-full" style="width: 100%"></div>
|
|
|
</div>
|
|
|
<div class="flex justify-between text-xs text-gray-500 mt-1">
|
|
|
<span>已完成</span>
|
|
|
<span>更新于 10-08</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div>
|
|
|
<div class="flex justify-between items-center mb-1">
|
|
|
<div class="flex items-center">
|
|
|
<span class="w-3 h-3 bg-green-600 rounded-full mr-2"></span>
|
|
|
<span class="text-sm">西岛三维建模</span>
|
|
|
</div>
|
|
|
<span class="text-sm font-medium">75%</span>
|
|
|
</div>
|
|
|
<div class="w-full bg-gray-200 rounded-full h-2">
|
|
|
<div class="bg-green-600 h-2 rounded-full" style="width: 75%"></div>
|
|
|
</div>
|
|
|
<div class="flex justify-between text-xs text-gray-500 mt-1">
|
|
|
<span>进行中</span>
|
|
|
<span>更新于 10-10</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div>
|
|
|
<div class="flex justify-between items-center mb-1">
|
|
|
<div class="flex items-center">
|
|
|
<span class="w-3 h-3 bg-yellow-600 rounded-full mr-2"></span>
|
|
|
<span class="text-sm">蜈支洲岛精细测绘</span>
|
|
|
</div>
|
|
|
<span class="text-sm font-medium">30%</span>
|
|
|
</div>
|
|
|
<div class="w-full bg-gray-200 rounded-full h-2">
|
|
|
<div class="bg-yellow-600 h-2 rounded-full" style="width: 30%"></div>
|
|
|
</div>
|
|
|
<div class="flex justify-between text-xs text-gray-500 mt-1">
|
|
|
<span>进行中</span>
|
|
|
<span>更新于 10-10</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div>
|
|
|
<div class="flex justify-between items-center mb-1">
|
|
|
<div class="flex items-center">
|
|
|
<span class="w-3 h-3 bg-red-600 rounded-full mr-2"></span>
|
|
|
<span class="text-sm">分界洲岛海岸线测绘</span>
|
|
|
</div>
|
|
|
<span class="text-sm font-medium">0%</span>
|
|
|
</div>
|
|
|
<div class="w-full bg-gray-200 rounded-full h-2">
|
|
|
<div class="bg-red-600 h-2 rounded-full" style="width: 0%"></div>
|
|
|
</div>
|
|
|
<div class="flex justify-between text-xs text-gray-500 mt-1">
|
|
|
<span>未开始</span>
|
|
|
<span>计划于 10-12</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div class="mt-6 pt-4 border-t border-gray-200">
|
|
|
<h4 class="font-semibold mb-3">测绘数据统计</h4>
|
|
|
<div class="grid grid-cols-2 gap-4">
|
|
|
<div class="bg-gray-100 p-3 rounded-lg">
|
|
|
<p class="text-xs text-gray-500 mb-1">已完成测绘面积</p>
|
|
|
<p class="text-xl font-bold">125.8 km²</p>
|
|
|
</div>
|
|
|
<div class="bg-gray-100 p-3 rounded-lg">
|
|
|
<p class="text-xs text-gray-500 mb-1">待测绘面积</p>
|
|
|
<p class="text-xl font-bold">86.2 km²</p>
|
|
|
</div>
|
|
|
<div class="bg-gray-100 p-3 rounded-lg">
|
|
|
<p class="text-xs text-gray-500 mb-1">平均测绘精度</p>
|
|
|
<p class="text-xl font-bold">0.7 m</p>
|
|
|
</div>
|
|
|
<div class="bg-gray-100 p-3 rounded-lg">
|
|
|
<p class="text-xs text-gray-500 mb-1">已采集数据</p>
|
|
|
<p class="text-xl font-bold">1.2 TB</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<!-- 测绘历史数据 -->
|
|
|
<div class="bg-white1 rounded-xl card-shadow overflow-hidden">
|
|
|
<div class="p-5 border-b border-gray-200 flex flex-wrap justify-between items-center gap-3">
|
|
|
<h3 class="font-semibold">海岛测绘任务历史记录</h3>
|
|
|
<div class="flex items-center space-x-3">
|
|
|
<div class="relative">
|
|
|
<input type="text" placeholder="搜索任务名称..."
|
|
|
class="pl-9 pr-3 py-1.5 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500/50 text-sm w-full sm:w-48 transition-all hover:border-blue-300">
|
|
|
<i
|
|
|
class="fa fa-search absolute left-3 top-1/2 -translate-y-1/2 text-gray-500 text-sm"></i>
|
|
|
</div>
|
|
|
<div class="relative">
|
|
|
<select
|
|
|
class="appearance-none bg-white border border-gray-300 rounded-lg pl-3 pr-8 py-1.5 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500/50 transition-all hover:border-blue-300 mapping-status-filter">
|
|
|
<option value="all">全部状态</option>
|
|
|
<option value="completed">已完成</option>
|
|
|
<option value="in-progress">进行中</option>
|
|
|
<option value="pending">未开始</option>
|
|
|
</select>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="overflow-x-auto">
|
|
|
<table class="w-full">
|
|
|
<thead>
|
|
|
<tr class="bg-gray-50">
|
|
|
<th
|
|
|
class="px-4 md:px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
|
|
任务编号</th>
|
|
|
<th
|
|
|
class="px-4 md:px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
|
|
任务名称</th>
|
|
|
<th
|
|
|
class="px-4 md:px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
|
|
测绘区域</th>
|
|
|
<th
|
|
|
class="px-4 md:px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
|
|
开始时间</th>
|
|
|
<th
|
|
|
class="px-4 md:px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
|
|
完成时间</th>
|
|
|
<th
|
|
|
class="px-4 md:px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
|
|
负责人</th>
|
|
|
<th
|
|
|
class="px-4 md:px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
|
|
状态</th>
|
|
|
<th
|
|
|
class="px-4 md:px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
|
|
操作</th>
|
|
|
</tr>
|
|
|
</thead>
|
|
|
<tbody class="divide-y divide-gray-200">
|
|
|
<tr class="data-grid-row hover:bg-gray-50 transition-colors">
|
|
|
<td class="px-4 md:px-6 py-4 whitespace-nowrap text-sm data-grid-cell">
|
|
|
MP-202510-001</td>
|
|
|
<td class="px-4 md:px-6 py-4 whitespace-nowrap text-sm data-grid-cell">三亚湾地形测绘
|
|
|
</td>
|
|
|
<td class="px-4 md:px-6 py-4 whitespace-nowrap text-sm data-grid-cell">三亚湾</td>
|
|
|
<td class="px-4 md:px-6 py-4 whitespace-nowrap text-sm data-grid-cell">10-05
|
|
|
</td>
|
|
|
<td class="px-4 md:px-6 py-4 whitespace-nowrap text-sm data-grid-cell">10-08
|
|
|
</td>
|
|
|
<td class="px-4 md:px-6 py-4 whitespace-nowrap text-sm data-grid-cell">
|
|
|
<div class="flex items-center">
|
|
|
<div
|
|
|
class="w-6 h-6 bg-blue-100 rounded-full flex items-center justify-center text-blue-600 mr-2">
|
|
|
<i class="fa fa-user text-xs"></i>
|
|
|
</div>
|
|
|
张伟
|
|
|
</div>
|
|
|
</td>
|
|
|
<td class="px-4 md:px-6 py-4 whitespace-nowrap text-sm data-grid-cell">
|
|
|
<span
|
|
|
class="px-2 py-1 text-xs rounded-full bg-green-100 text-green-800">已完成</span>
|
|
|
</td>
|
|
|
<td class="px-4 md:px-6 py-4 whitespace-nowrap text-sm data-grid-cell">
|
|
|
<button
|
|
|
class="text-blue-600 hover:text-blue-800 mr-3 transition-colors view-mapping-details">查看详情</button>
|
|
|
<button
|
|
|
class="text-blue-600 hover:text-blue-800 transition-colors view-mapping-data">查看数据</button>
|
|
|
</td>
|
|
|
</tr>
|
|
|
<tr class="data-grid-row hover:bg-gray-50 transition-colors">
|
|
|
<td class="px-4 md:px-6 py-4 whitespace-nowrap text-sm data-grid-cell">
|
|
|
MP-202510-002</td>
|
|
|
<td class="px-4 md:px-6 py-4 whitespace-nowrap text-sm data-grid-cell">西岛三维建模
|
|
|
</td>
|
|
|
<td class="px-4 md:px-6 py-4 whitespace-nowrap text-sm data-grid-cell">西岛</td>
|
|
|
<td class="px-4 md:px-6 py-4 whitespace-nowrap text-sm data-grid-cell">10-09
|
|
|
</td>
|
|
|
<td class="px-4 md:px-6 py-4 whitespace-nowrap text-sm data-grid-cell">预计 10-12
|
|
|
</td>
|
|
|
<td class="px-4 md:px-6 py-4 whitespace-nowrap text-sm data-grid-cell">
|
|
|
<div class="flex items-center">
|
|
|
<div
|
|
|
class="w-6 h-6 bg-blue-100 rounded-full flex items-center justify-center text-blue-600 mr-2">
|
|
|
<i class="fa fa-user text-xs"></i>
|
|
|
</div>
|
|
|
刘洋
|
|
|
</div>
|
|
|
</td>
|
|
|
<td class="px-4 md:px-6 py-4 whitespace-nowrap text-sm data-grid-cell">
|
|
|
<span
|
|
|
class="px-2 py-1 text-xs rounded-full bg-yellow-100 text-yellow-800">进行中</span>
|
|
|
</td>
|
|
|
<td class="px-4 md:px-6 py-4 whitespace-nowrap text-sm data-grid-cell">
|
|
|
<button
|
|
|
class="text-blue-600 hover:text-blue-800 mr-3 transition-colors view-mapping-details">查看详情</button>
|
|
|
<button
|
|
|
class="text-blue-600 hover:text-blue-800 transition-colors view-mapping-data">查看数据</button>
|
|
|
</td>
|
|
|
</tr>
|
|
|
<tr class="data-grid-row hover:bg-gray-50 transition-colors">
|
|
|
<td class="px-4 md:px-6 py-4 whitespace-nowrap text-sm data-grid-cell">
|
|
|
MP-202510-003</td>
|
|
|
<td class="px-4 md:px-6 py-4 whitespace-nowrap text-sm data-grid-cell">蜈支洲岛精细测绘
|
|
|
</td>
|
|
|
<td class="px-4 md:px-6 py-4 whitespace-nowrap text-sm data-grid-cell">蜈支洲岛</td>
|
|
|
<td class="px-4 md:px-6 py-4 whitespace-nowrap text-sm data-grid-cell">10-10
|
|
|
</td>
|
|
|
<td class="px-4 md:px-6 py-4 whitespace-nowrap text-sm data-grid-cell">预计 10-15
|
|
|
</td>
|
|
|
<td class="px-4 md:px-6 py-4 whitespace-nowrap text-sm data-grid-cell">
|
|
|
<div class="flex items-center">
|
|
|
<div
|
|
|
class="w-6 h-6 bg-blue-100 rounded-full flex items-center justify-center text-blue-600 mr-2">
|
|
|
<i class="fa fa-user text-xs"></i>
|
|
|
</div>
|
|
|
王华
|
|
|
</div>
|
|
|
</td>
|
|
|
<td class="px-4 md:px-6 py-4 whitespace-nowrap text-sm data-grid-cell">
|
|
|
<span
|
|
|
class="px-2 py-1 text-xs rounded-full bg-yellow-100 text-yellow-800">进行中</span>
|
|
|
</td>
|
|
|
<td class="px-4 md:px-6 py-4 whitespace-nowrap text-sm data-grid-cell">
|
|
|
<button
|
|
|
class="text-blue-600 hover:text-blue-800 mr-3 transition-colors view-mapping-details">查看详情</button>
|
|
|
<button
|
|
|
class="text-blue-600 hover:text-blue-800 transition-colors view-mapping-data">查看数据</button>
|
|
|
</td>
|
|
|
</tr>
|
|
|
</tbody>
|
|
|
</table>
|
|
|
</div>
|
|
|
<div class="p-4 border-t border-gray-200 flex flex-wrap justify-between items-center gap-4">
|
|
|
<p class="text-sm text-gray-500">显示 1 至 3 条，共 16 条</p>
|
|
|
<div class="flex space-x-1">
|
|
|
<button
|
|
|
class="w-8 h-8 flex items-center justify-center rounded border border-gray-300 text-gray-500 hover:bg-gray-100 disabled:opacity-50 transition-colors"
|
|
|
disabled>
|
|
|
<i class="fa fa-chevron-left text-xs"></i>
|
|
|
</button>
|
|
|
<button
|
|
|
class="w-8 h-8 flex items-center justify-center rounded bg-blue-600 text-white hover:bg-blue-700 transition-colors">1</button>
|
|
|
<button
|
|
|
class="w-8 h-8 flex items-center justify-center rounded border border-gray-300 hover:bg-gray-100 transition-colors">2</button>
|
|
|
<button
|
|
|
class="w-8 h-8 flex items-center justify-center rounded border border-gray-300 hover:bg-gray-100 transition-colors">3</button>
|
|
|
<button
|
|
|
class="w-8 h-8 flex items-center justify-center rounded border border-gray-300 text-gray-500 hover:bg-gray-100 transition-colors">
|
|
|
<i class="fa fa-chevron-right text-xs"></i>
|
|
|
</button>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</section>
|
|
|
|
|
|
<!-- 无人机巡检中心 -->
|
|
|
<section id="drone-inspection" class="animate-fadeIn hidden">
|
|
|
<div class="flex flex-wrap justify-between items-center mb-6 gap-4">
|
|
|
<h3 class="text-lg font-semibold">无人机巡检中心</h3>
|
|
|
<div class="flex items-center space-x-3">
|
|
|
<div class="relative">
|
|
|
<select
|
|
|
class="appearance-none bg-white border border-gray-300 rounded-lg pl-3 pr-8 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500/50 transition-all hover:border-blue-300 drone-filter">
|
|
|
<option value="all">所有无人机</option>
|
|
|
<option value="active">运行中</option>
|
|
|
<option value="idle">闲置中</option>
|
|
|
<option value="maintenance">维护中</option>
|
|
|
</select>
|
|
|
</div>
|
|
|
<button
|
|
|
class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg transition-all flex items-center transform hover:scale-105 active:scale-95">
|
|
|
<i class="fa fa-plus mr-2"></i>
|
|
|
<span>新建巡检任务</span>
|
|
|
</button>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<!-- 巡检任务类型卡片 -->
|
|
|
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 md:gap-6 mb-6">
|
|
|
<div
|
|
|
class="bg-white rounded-xl p-5 card-shadow card-shadow-hover cursor-pointer hover:border-blue-500 border border-transparent transition-all">
|
|
|
<div
|
|
|
class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center text-blue-600 mb-4">
|
|
|
<i class="fa fa-map-marker text-xl"></i>
|
|
|
</div>
|
|
|
<h4 class="font-semibold mb-2">海岛巡逻</h4>
|
|
|
<p class="text-sm text-gray-500 mb-4">对海岛及周边区域进行定期巡逻和监控</p>
|
|
|
<div class="flex justify-between items-center">
|
|
|
<span class="text-xs bg-green-100 text-green-800 px-2 py-1 rounded-full">进行中: 3项</span>
|
|
|
<span class="text-xs text-gray-500">已完成: 42项</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div
|
|
|
class="bg-white rounded-xl p-5 card-shadow card-shadow-hover cursor-pointer hover:border-blue-500 border border-transparent transition-all">
|
|
|
<div
|
|
|
class="w-12 h-12 bg-teal-100 rounded-lg flex items-center justify-center text-teal-500 mb-4">
|
|
|
<i class="fa fa-ship text-xl"></i>
|
|
|
</div>
|
|
|
<h4 class="font-semibold mb-2">航道管控</h4>
|
|
|
<p class="text-sm text-gray-500 mb-4">监控海上航道安全，保障船只航行畅通</p>
|
|
|
<div class="flex justify-between items-center">
|
|
|
<span class="text-xs bg-green-100 text-green-800 px-2 py-1 rounded-full">进行中: 2项</span>
|
|
|
<span class="text-xs text-gray-500">已完成: 36项</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div
|
|
|
class="bg-white rounded-xl p-5 card-shadow card-shadow-hover cursor-pointer hover:border-blue-500 border border-transparent transition-all">
|
|
|
<div
|
|
|
class="w-12 h-12 bg-yellow-100 rounded-lg flex items-center justify-center text-yellow-600 mb-4">
|
|
|
<i class="fa fa-bolt text-xl"></i>
|
|
|
</div>
|
|
|
<h4 class="font-semibold mb-2">海上风电巡检</h4>
|
|
|
<p class="text-sm text-gray-500 mb-4">对海上风电场设备进行自动化巡检和故障检测</p>
|
|
|
<div class="flex justify-between items-center">
|
|
|
<span class="text-xs bg-green-100 text-green-800 px-2 py-1 rounded-full">进行中: 1项</span>
|
|
|
<span class="text-xs text-gray-500">已完成: 28项</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div
|
|
|
class="bg-white rounded-xl p-5 card-shadow card-shadow-hover cursor-pointer hover:border-blue-500 border border-transparent transition-all">
|
|
|
<div
|
|
|
class="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center text-green-600 mb-4">
|
|
|
<i class="fa fa-sun-o text-xl"></i>
|
|
|
</div>
|
|
|
<h4 class="font-semibold mb-2">海上光伏巡检</h4>
|
|
|
<p class="text-sm text-gray-500 mb-4">对海上光伏电站进行定期巡检和维护检查</p>
|
|
|
<div class="flex justify-between items-center">
|
|
|
<span class="text-xs bg-yellow-100 text-yellow-800 px-2 py-1 rounded-full">进行中:
|
|
|
0项</span>
|
|
|
<span class="text-xs text-gray-500">已完成: 15项</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<!-- 无人机状态卡片 -->
|
|
|
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 md:gap-6 mb-6">
|
|
|
<div
|
|
|
class="bg-white1 rounded-xl overflow-hidden card-shadow card-shadow-hover border-l-4 border-blue-600">
|
|
|
<div class="p-5">
|
|
|
<div class="flex justify-between items-start mb-4">
|
|
|
<div>
|
|
|
<p class="text-gray-500 text-sm">无人机编号</p>
|
|
|
<h4 class="text-xl font-bold mt-1">GT-001</h4>
|
|
|
</div>
|
|
|
<div
|
|
|
class="w-10 h-10 bg-blue-100 rounded-lg flex items-center justify-center text-blue-600">
|
|
|
<i class="fa fa-quadcopter"></i>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="flex items-center text-sm mb-4">
|
|
|
<span class="px-2 py-1 text-xs rounded-full drone-status-active mr-2">运行中</span>
|
|
|
<span>三亚湾巡检任务</span>
|
|
|
</div>
|
|
|
<div class="grid grid-cols-2 gap-3 text-xs">
|
|
|
<div class="bg-gray-100 p-2 rounded">
|
|
|
<p class="text-gray-500">飞行时间</p>
|
|
|
<p class="font-medium">3.5小时</p>
|
|
|
</div>
|
|
|
<div class="bg-gray-100 p-2 rounded">
|
|
|
<p class="text-gray-500">电池电量</p>
|
|
|
<p class="font-medium">68%</p>
|
|
|
</div>
|
|
|
<div class="bg-gray-100 p-2 rounded">
|
|
|
<p class="text-gray-500">飞行高度</p>
|
|
|
<p class="font-medium">120米</p>
|
|
|
</div>
|
|
|
<div class="bg-gray-100 p-2 rounded">
|
|
|
<p class="text-gray-500">信号强度</p>
|
|
|
<p class="font-medium">95%</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
<button
|
|
|
class="mt-4 w-full py-2 text-sm bg-blue-100 text-blue-600 rounded-lg hover:bg-blue-200 transition-colors view-drone-details"
|
|
|
data-drone="GT-001">
|
|
|
查看详情
|
|
|
</button>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div
|
|
|
class="bg-white1 rounded-xl overflow-hidden card-shadow card-shadow-hover border-l-4 border-green-600">
|
|
|
<div class="p-5">
|
|
|
<div class="flex justify-between items-start mb-4">
|
|
|
<div>
|
|
|
<p class="text-gray-500 text-sm">无人机编号</p>
|
|
|
<h4 class="text-xl font-bold mt-1">GT-002</h4>
|
|
|
</div>
|
|
|
<div
|
|
|
class="w-10 h-10 bg-green-100 rounded-lg flex items-center justify-center text-green-600">
|
|
|
<i class="fa fa-quadcopter"></i>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="flex items-center text-sm mb-4">
|
|
|
<span class="px-2 py-1 text-xs rounded-full drone-status-idle mr-2">闲置中</span>
|
|
|
<span>已完成西岛巡检</span>
|
|
|
</div>
|
|
|
<div class="grid grid-cols-2 gap-3 text-xs">
|
|
|
<div class="bg-gray-100 p-2 rounded">
|
|
|
<p class="text-gray-500">今日飞行</p>
|
|
|
<p class="font-medium">2.1小时</p>
|
|
|
</div>
|
|
|
<div class="bg-gray-100 p-2 rounded">
|
|
|
<p class="text-gray-500">电池电量</p>
|
|
|
<p class="font-medium">92%</p>
|
|
|
</div>
|
|
|
<div class="bg-gray-100 p-2 rounded">
|
|
|
<p class="text-gray-500">上次维护</p>
|
|
|
<p class="font-medium">10-05</p>
|
|
|
</div>
|
|
|
<div class="bg-gray-100 p-2 rounded">
|
|
|
<p class="text-gray-500">状态评分</p>
|
|
|
<p class="font-medium">98分</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
<button
|
|
|
class="mt-4 w-full py-2 text-sm bg-green-100 text-green-600 rounded-lg hover:bg-green-200 transition-colors view-drone-details"
|
|
|
data-drone="GT-002">
|
|
|
查看详情
|
|
|
</button>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div
|
|
|
class="bg-white1 rounded-xl overflow-hidden card-shadow card-shadow-hover border-l-4 border-yellow-600">
|
|
|
<div class="p-5">
|
|
|
<div class="flex justify-between items-start mb-4">
|
|
|
<div>
|
|
|
<p class="text-gray-500 text-sm">无人机编号</p>
|
|
|
<h4 class="text-xl font-bold mt-1">GT-003</h4>
|
|
|
</div>
|
|
|
<div
|
|
|
class="w-10 h-10 bg-yellow-100 rounded-lg flex items-center justify-center text-yellow-600">
|
|
|
<i class="fa fa-quadcopter"></i>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="flex items-center text-sm mb-4">
|
|
|
<span
|
|
|
class="px-2 py-1 text-xs rounded-full drone-status-maintenance mr-2">维护中</span>
|
|
|
<span>传感器校准</span>
|
|
|
</div>
|
|
|
<div class="grid grid-cols-2 gap-3 text-xs">
|
|
|
<div class="bg-gray-100 p-2 rounded">
|
|
|
<p class="text-gray-500">维护项目</p>
|
|
|
<p class="font-medium">3项</p>
|
|
|
</div>
|
|
|
<div class="bg-gray-100 p-2 rounded">
|
|
|
<p class="text-gray-500">预计完成</p>
|
|
|
<p class="font-medium">10-10 16:00</p>
|
|
|
</div>
|
|
|
<div class="bg-gray-100 p-2 rounded">
|
|
|
<p class="text-gray-500">维护人员</p>
|
|
|
<p class="font-medium">赵工</p>
|
|
|
</div>
|
|
|
<div class="bg-gray-100 p-2 rounded">
|
|
|
<p class="text-gray-500">下次维护</p>
|
|
|
<p class="font-medium">10-25</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
<button
|
|
|
class="mt-4 w-full py-2 text-sm bg-yellow-100 text-yellow-600 rounded-lg hover:bg-yellow-200 transition-colors view-drone-details"
|
|
|
data-drone="GT-003">
|
|
|
查看详情
|
|
|
</button>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div
|
|
|
class="bg-white1 rounded-xl overflow-hidden card-shadow card-shadow-hover border-l-4 border-green-600">
|
|
|
<div class="p-5">
|
|
|
<div class="flex justify-between items-start mb-4">
|
|
|
<div>
|
|
|
<p class="text-gray-500 text-sm">无人机编号</p>
|
|
|
<h4 class="text-xl font-bold mt-1">GT-004</h4>
|
|
|
</div>
|
|
|
<div
|
|
|
class="w-10 h-10 bg-green-100 rounded-lg flex items-center justify-center text-green-600">
|
|
|
<i class="fa fa-quadcopter"></i>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="flex items-center text-sm mb-4">
|
|
|
<span class="px-2 py-1 text-xs rounded-full drone-status-idle mr-2">闲置中</span>
|
|
|
<span>待命状态</span>
|
|
|
</div>
|
|
|
<div class="grid grid-cols-2 gap-3 text-xs">
|
|
|
<div class="bg-gray-100 p-2 rounded">
|
|
|
<p class="text-gray-500">今日飞行</p>
|
|
|
<p class="font-medium">0小时</p>
|
|
|
</div>
|
|
|
<div class="bg-gray-100 p-2 rounded">
|
|
|
<p class="text-gray-500">电池电量</p>
|
|
|
<p class="font-medium">100%</p>
|
|
|
</div>
|
|
|
<div class="bg-gray-100 p-2 rounded">
|
|
|
<p class="text-gray-500">上次维护</p>
|
|
|
<p class="font-medium">10-08</p>
|
|
|
</div>
|
|
|
<div class="bg-gray-100 p-2 rounded">
|
|
|
<p class="text-gray-500">状态评分</p>
|
|
|
<p class="font-medium">99分</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
<button
|
|
|
class="mt-4 w-full py-2 text-sm bg-green-100 text-green-600 rounded-lg hover:bg-green-200 transition-colors view-drone-details"
|
|
|
data-drone="GT-004">
|
|
|
查看详情
|
|
|
</button>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<!-- 巡检任务列表 -->
|
|
|
<div class="bg-white1 rounded-xl card-shadow overflow-hidden">
|
|
|
<div class="p-5 border-b border-gray-200 flex flex-wrap justify-between items-center gap-3">
|
|
|
<h3 class="font-semibold">巡检任务列表</h3>
|
|
|
<div class="flex items-center space-x-3">
|
|
|
<div class="relative">
|
|
|
<input type="text" placeholder="搜索任务名称..."
|
|
|
class="pl-9 pr-3 py-1.5 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500/50 text-sm w-full sm:w-48 transition-all hover:border-blue-300">
|
|
|
<i
|
|
|
class="fa fa-search absolute left-3 top-1/2 -translate-y-1/2 text-gray-500 text-sm"></i>
|
|
|
</div>
|
|
|
<div class="relative">
|
|
|
<select
|
|
|
class="appearance-none bg-white border border-gray-300 rounded-lg pl-3 pr-8 py-1.5 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500/50 transition-all hover:border-blue-300 inspection-status-filter">
|
|
|
<option value="all">全部状态</option>
|
|
|
<option value="in-progress">进行中</option>
|
|
|
<option value="completed">已完成</option>
|
|
|
<option value="pending">待执行</option>
|
|
|
</select>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="overflow-x-auto">
|
|
|
<table class="w-full">
|
|
|
<thead>
|
|
|
<tr class="bg-gray-50">
|
|
|
<th
|
|
|
class="px-4 md:px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
|
|
任务编号</th>
|
|
|
<th
|
|
|
class="px-4 md:px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
|
|
任务名称</th>
|
|
|
<th
|
|
|
class="px-4 md:px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
|
|
巡检区域</th>
|
|
|
<th
|
|
|
class="px-4 md:px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
|
|
开始时间</th>
|
|
|
<th
|
|
|
class="px-4 md:px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
|
|
结束时间</th>
|
|
|
<th
|
|
|
class="px-4 md:px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
|
|
负责人</th>
|
|
|
<th
|
|
|
class="px-4 md:px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
|
|
状态</th>
|
|
|
<th
|
|
|
class="px-4 md:px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
|
|
操作</th>
|
|
|
</tr>
|
|
|
</thead>
|
|
|
<tbody class="divide-y divide-gray-200">
|
|
|
<tr class="data-grid-row hover:bg-gray-50 transition-colors">
|
|
|
<td class="px-4 md:px-6 py-4 whitespace-nowrap text-sm data-grid-cell">
|
|
|
IN-202510-001</td>
|
|
|
<td class="px-4 md:px-6 py-4 whitespace-nowrap text-sm data-grid-cell">三亚湾巡逻任务
|
|
|
</td>
|
|
|
<td class="px-4 md:px-6 py-4 whitespace-nowrap text-sm data-grid-cell">三亚湾及周边海域
|
|
|
</td>
|
|
|
<td class="px-4 md:px-6 py-4 whitespace-nowrap text-sm data-grid-cell">10-10
|
|
|
09:00</td>
|
|
|
<td class="px-4 md:px-6 py-4 whitespace-nowrap text-sm data-grid-cell">10-10
|
|
|
12:30</td>
|
|
|
<td class="px-4 md:px-6 py-4 whitespace-nowrap text-sm data-grid-cell">
|
|
|
<div class="flex items-center">
|
|
|
<div
|
|
|
class="w-6 h-6 bg-blue-100 rounded-full flex items-center justify-center text-blue-600 mr-2">
|
|
|
<i class="fa fa-user text-xs"></i>
|
|
|
</div>
|
|
|
李明
|
|
|
</div>
|
|
|
</td>
|
|
|
<td class="px-4 md:px-6 py-4 whitespace-nowrap text-sm data-grid-cell">
|
|
|
<span
|
|
|
class="px-2 py-1 text-xs rounded-full bg-yellow-100 text-yellow-800">进行中</span>
|
|
|
</td>
|
|
|
<td class="px-4 md:px-6 py-4 whitespace-nowrap text-sm data-grid-cell">
|
|
|
<button
|
|
|
class="text-blue-600 hover:text-blue-800 mr-3 transition-colors view-inspection-details">查看详情</button>
|
|
|
<button
|
|
|
class="text-blue-600 hover:text-blue-800 transition-colors view-inspection-data">查看数据</button>
|
|
|
</td>
|
|
|
</tr>
|
|
|
<tr class="data-grid-row hover:bg-gray-50 transition-colors">
|
|
|
<td class="px-4 md:px-6 py-4 whitespace-nowrap text-sm data-grid-cell">
|
|
|
IN-202510-002</td>
|
|
|
<td class="px-4 md:px-6 py-4 whitespace-nowrap text-sm data-grid-cell">西岛航道监控
|
|
|
</td>
|
|
|
<td class="px-4 md:px-6 py-4 whitespace-nowrap text-sm data-grid-cell">西岛航道</td>
|
|
|
<td class="px-4 md:px-6 py-4 whitespace-nowrap text-sm data-grid-cell">10-10
|
|
|
10:00</td>
|
|
|
<td class="px-4 md:px-6 py-4 whitespace-nowrap text-sm data-grid-cell">10-10
|
|
|
15:00</td>
|
|
|
<td class="px-4 md:px-6 py-4 whitespace-nowrap text-sm data-grid-cell">
|
|
|
<div class="flex items-center">
|
|
|
<div
|
|
|
class="w-6 h-6 bg-blue-100 rounded-full flex items-center justify-center text-blue-600 mr-2">
|
|
|
<i class="fa fa-user text-xs"></i>
|
|
|
</div>
|
|
|
王华
|
|
|
</div>
|
|
|
</td>
|
|
|
<td class="px-4 md:px-6 py-4 whitespace-nowrap text-sm data-grid-cell">
|
|
|
<span
|
|
|
class="px-2 py-1 text-xs rounded-full bg-yellow-100 text-yellow-800">进行中</span>
|
|
|
</td>
|
|
|
<td class="px-4 md:px-6 py-4 whitespace-nowrap text-sm data-grid-cell">
|
|
|
<button
|
|
|
class="text-blue-600 hover:text-blue-800 mr-3 transition-colors view-inspection-details">查看详情</button>
|
|
|
<button
|
|
|
class="text-blue-600 hover:text-blue-800 transition-colors view-inspection-data">查看数据</button>
|
|
|
</td>
|
|
|
</tr>
|
|
|
<tr class="data-grid-row hover:bg-gray-50 transition-colors">
|
|
|
<td class="px-4 md:px-6 py-4 whitespace-nowrap text-sm data-grid-cell">
|
|
|
IN-202510-003</td>
|
|
|
<td class="px-4 md:px-6 py-4 whitespace-nowrap text-sm data-grid-cell">海上风电巡检
|
|
|
</td>
|
|
|
<td class="px-4 md:px-6 py-4 whitespace-nowrap text-sm data-grid-cell">南海风电场
|
|
|
</td>
|
|
|
<td class="px-4 md:px-6 py-4 whitespace-nowrap text-sm data-grid-cell">10-10
|
|
|
08:30</td>
|
|
|
<td class="px-4 md:px-6 py-4 whitespace-nowrap text-sm data-grid-cell">10-10
|
|
|
11:00</td>
|
|
|
<td class="px-4 md:px-6 py-4 whitespace-nowrap text-sm data-grid-cell">
|
|
|
<div class="flex items-center">
|
|
|
<div
|
|
|
class="w-6 h-6 bg-blue-100 rounded-full flex items-center justify-center text-blue-600 mr-2">
|
|
|
<i class="fa fa-user text-xs"></i>
|
|
|
</div>
|
|
|
张伟
|
|
|
</div>
|
|
|
</td>
|
|
|
<td class="px-4 md:px-6 py-4 whitespace-nowrap text-sm data-grid-cell">
|
|
|
<span
|
|
|
class="px-2 py-1 text-xs rounded-full bg-green-100 text-green-800">已完成</span>
|
|
|
</td>
|
|
|
<td class="px-4 md:px-6 py-4 whitespace-nowrap text-sm data-grid-cell">
|
|
|
<button
|
|
|
class="text-blue-600 hover:text-blue-800 mr-3 transition-colors view-inspection-details">查看详情</button>
|
|
|
<button
|
|
|
class="text-blue-600 hover:text-blue-800 transition-colors view-inspection-data">查看数据</button>
|
|
|
</td>
|
|
|
</tr>
|
|
|
</tbody>
|
|
|
</table>
|
|
|
</div>
|
|
|
<div class="p-4 border-t border-gray-200 flex flex-wrap justify-between items-center gap-4">
|
|
|
<p class="text-sm text-gray-500">显示 1 至 3 条，共 12 条</p>
|
|
|
<div class="flex space-x-1">
|
|
|
<button
|
|
|
class="w-8 h-8 flex items-center justify-center rounded border border-gray-300 text-gray-500 hover:bg-gray-100 disabled:opacity-50 transition-colors"
|
|
|
disabled>
|
|
|
<i class="fa fa-chevron-left text-xs"></i>
|
|
|
</button>
|
|
|
<button
|
|
|
class="w-8 h-8 flex items-center justify-center rounded bg-blue-600 text-white hover:bg-blue-700 transition-colors">1</button>
|
|
|
<button
|
|
|
class="w-8 h-8 flex items-center justify-center rounded border border-gray-300 hover:bg-gray-100 transition-colors">2</button>
|
|
|
<button
|
|
|
class="w-8 h-8 flex items-center justify-center rounded border border-gray-300 hover:bg-gray-100 transition-colors">3</button>
|
|
|
<button
|
|
|
class="w-8 h-8 flex items-center justify-center rounded border border-gray-300 text-gray-500 hover:bg-gray-100 transition-colors">
|
|
|
<i class="fa fa-chevron-right text-xs"></i>
|
|
|
</button>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</section>
|
|
|
|
|
|
<!-- 无人机数据中心 -->
|
|
|
<section id="drone-data" class="animate-fadeIn hidden">
|
|
|
<div class="flex flex-wrap justify-between items-center mb-6 gap-4">
|
|
|
<h3 class="text-lg font-semibold">无人机数据中心</h3>
|
|
|
<div class="flex items-center space-x-3">
|
|
|
<div class="relative">
|
|
|
<select
|
|
|
class="appearance-none bg-white border border-gray-300 rounded-lg pl-3 pr-8 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500/50 transition-all hover:border-blue-300 drone-data-filter">
|
|
|
<option value="all">所有数据</option>
|
|
|
<option value="flight">飞行数据</option>
|
|
|
<option value="maintenance">维护数据</option>
|
|
|
<option value="performance">性能数据</option>
|
|
|
</select>
|
|
|
</div>
|
|
|
<button
|
|
|
class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg transition-all flex items-center transform hover:scale-105 active:scale-95">
|
|
|
<i class="fa fa-download mr-2"></i>
|
|
|
<span>导出数据</span>
|
|
|
</button>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<!-- 无人机数据统计卡片 -->
|
|
|
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 md:gap-6 mb-6">
|
|
|
<div class="bg-white rounded-xl p-5 card-shadow card-shadow-hover transition-all">
|
|
|
<div class="flex justify-between items-start mb-4">
|
|
|
<div>
|
|
|
<p class="text-gray-500 text-sm">无人机总数</p>
|
|
|
<h4 class="text-2xl font-bold mt-1">24 架</h4>
|
|
|
</div>
|
|
|
<div
|
|
|
class="w-10 h-10 bg-blue-100 rounded-lg flex items-center justify-center text-blue-600">
|
|
|
<i class="fa fa-quadcopter"></i>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="flex items-center text-sm">
|
|
|
<span class="text-green-600 flex items-center">
|
|
|
<i class="fa fa-arrow-up mr-1"></i>4架
|
|
|
</span>
|
|
|
<span class="text-gray-500 ml-2">较上月</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div class="bg-white rounded-xl p-5 card-shadow card-shadow-hover transition-all">
|
|
|
<div class="flex justify-between items-start mb-4">
|
|
|
<div>
|
|
|
<p class="text-gray-500 text-sm">在线数量</p>
|
|
|
<h4 class="text-2xl font-bold mt-1">18 架</h4>
|
|
|
</div>
|
|
|
<div
|
|
|
class="w-10 h-10 bg-green-100 rounded-lg flex items-center justify-center text-green-600">
|
|
|
<i class="fa fa-check-circle"></i>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="flex items-center text-sm">
|
|
|
<span class="text-green-600 flex items-center">
|
|
|
<i class="fa fa-arrow-up mr-1"></i>3架
|
|
|
</span>
|
|
|
<span class="text-gray-500 ml-2">较上周</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div class="bg-white rounded-xl p-5 card-shadow card-shadow-hover transition-all">
|
|
|
<div class="flex justify-between items-start mb-4">
|
|
|
<div>
|
|
|
<p class="text-gray-500 text-sm">任务中</p>
|
|
|
<h4 class="text-2xl font-bold mt-1">6 架</h4>
|
|
|
</div>
|
|
|
<div
|
|
|
class="w-10 h-10 bg-yellow-100 rounded-lg flex items-center justify-center text-yellow-600">
|
|
|
<i class="fa fa-tasks"></i>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="flex items-center text-sm">
|
|
|
<span class="text-red-500 flex items-center">
|
|
|
<i class="fa fa-arrow-down mr-1"></i>2架
|
|
|
</span>
|
|
|
<span class="text-gray-500 ml-2">较昨日</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div class="bg-white rounded-xl p-5 card-shadow card-shadow-hover transition-all">
|
|
|
<div class="flex justify-between items-start mb-4">
|
|
|
<div>
|
|
|
<p class="text-gray-500 text-sm">维护中</p>
|
|
|
<h4 class="text-2xl font-bold mt-1">2 架</h4>
|
|
|
</div>
|
|
|
<div
|
|
|
class="w-10 h-10 bg-red-100 rounded-lg flex items-center justify-center text-red-600">
|
|
|
<i class="fa fa-wrench"></i>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="flex items-center text-sm">
|
|
|
<span class="text-red-500 flex items-center">
|
|
|
<i class="fa fa-arrow-up mr-1"></i>1架
|
|
|
</span>
|
|
|
<span class="text-gray-500 ml-2">较上周</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<!-- 无人机数据图表 -->
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-4 md:gap-6 mb-6">
|
|
|
<div class="bg-white1 rounded-xl p-5 card-shadow card-shadow-hover transition-all">
|
|
|
<div class="flex flex-wrap justify-between items-center mb-4 gap-3">
|
|
|
<h3 class="font-semibold">无人机使用率</h3>
|
|
|
<div class="flex space-x-2 drone-usage-filter">
|
|
|
<button
|
|
|
class="px-3 py-1 text-sm rounded-lg border border-gray-300 hover:border-blue-500 transition-colors stat-filter-active"
|
|
|
data-period="week">本周</button>
|
|
|
<button
|
|
|
class="px-3 py-1 text-sm rounded-lg border border-gray-300 hover:border-blue-500 transition-colors"
|
|
|
data-period="month">本月</button>
|
|
|
<button
|
|
|
class="px-3 py-1 text-sm rounded-lg border border-gray-300 hover:border-blue-500 transition-colors"
|
|
|
data-period="quarter">本季度</button>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="h-64 relative">
|
|
|
<canvas id="droneUsageChart"></canvas>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="bg-white1 rounded-xl p-5 card-shadow card-shadow-hover transition-all">
|
|
|
<div class="flex flex-wrap justify-between items-center mb-4 gap-3">
|
|
|
<h3 class="font-semibold">无人机状态分布</h3>
|
|
|
<div class="flex items-center">
|
|
|
<span class="text-sm text-gray-500 mr-2">时间范围:</span>
|
|
|
<select
|
|
|
class="appearance-none bg-white1 border border-gray-300 rounded-lg pl-3 pr-8 py-1 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500/50 transition-all hover:border-blue-300 drone-status-filter">
|
|
|
<option value="week">近一周</option>
|
|
|
<option value="month">近一月</option>
|
|
|
<option value="quarter">近一季度</option>
|
|
|
</select>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="h-64 relative">
|
|
|
<canvas id="droneStatusChart"></canvas>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<!-- 无人机详细数据列表 -->
|
|
|
<div class="bg-white1 rounded-xl card-shadow overflow-hidden">
|
|
|
<div class="p-5 border-b border-gray-200 flex flex-wrap justify-between items-center gap-3">
|
|
|
<h3 class="font-semibold">无人机详细数据</h3>
|
|
|
<div class="flex items-center space-x-3">
|
|
|
<div class="relative">
|
|
|
<input type="text" placeholder="搜索无人机编号..."
|
|
|
class="pl-9 pr-3 py-1.5 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500/50 text-sm w-full sm:w-48 transition-all hover:border-blue-300">
|
|
|
<i
|
|
|
class="fa fa-search absolute left-3 top-1/2 -translate-y-1/2 text-gray-500 text-sm"></i>
|
|
|
</div>
|
|
|
<div class="relative">
|
|
|
<select
|
|
|
class="appearance-none bg-white1 border border-gray-300 rounded-lg pl-3 pr-8 py-1.5 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500/50 transition-all hover:border-blue-300 drone-type-filter">
|
|
|
<option value="all">所有类型</option>
|
|
|
<option value="fixed-wing">固定翼</option>
|
|
|
<option value="multi-rotor">多旋翼</option>
|
|
|
<option value="hybrid">混合型</option>
|
|
|
</select>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="overflow-x-auto">
|
|
|
<table class="w-full">
|
|
|
<thead>
|
|
|
<tr class="bg-gray-50">
|
|
|
<th
|
|
|
class="px-4 md:px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
|
|
无人机编号</th>
|
|
|
<th
|
|
|
class="px-4 md:px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
|
|
类型</th>
|
|
|
<th
|
|
|
class="px-4 md:px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
|
|
飞行时长</th>
|
|
|
<th
|
|
|
class="px-4 md:px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
|
|
飞行里程</th>
|
|
|
<th
|
|
|
class="px-4 md:px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
|
|
任务次数</th>
|
|
|
<th
|
|
|
class="px-4 md:px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
|
|
平均电池寿命</th>
|
|
|
<th
|
|
|
class="px-4 md:px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
|
|
状态</th>
|
|
|
<th
|
|
|
class="px-4 md:px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
|
|
操作</th>
|
|
|
</tr>
|
|
|
</thead>
|
|
|
<tbody class="divide-y divide-gray-200">
|
|
|
<tr class="data-grid-row hover:bg-gray-50 transition-colors">
|
|
|
<td class="px-4 md:px-6 py-4 whitespace-nowrap text-sm data-grid-cell">GT-001
|
|
|
</td>
|
|
|
<td class="px-4 md:px-6 py-4 whitespace-nowrap text-sm data-grid-cell">多旋翼</td>
|
|
|
<td class="px-4 md:px-6 py-4 whitespace-nowrap text-sm data-grid-cell">342.5小时
|
|
|
</td>
|
|
|
<td class="px-4 md:px-6 py-4 whitespace-nowrap text-sm data-grid-cell">1,245 km
|
|
|
</td>
|
|
|
<td class="px-4 md:px-6 py-4 whitespace-nowrap text-sm data-grid-cell">156次</td>
|
|
|
<td class="px-4 md:px-6 py-4 whitespace-nowrap text-sm data-grid-cell">92%</td>
|
|
|
<td class="px-4 md:px-6 py-4 whitespace-nowrap text-sm data-grid-cell">
|
|
|
<span
|
|
|
class="px-2 py-1 text-xs rounded-full bg-green-100 text-green-800">运行中</span>
|
|
|
</td>
|
|
|
<td class="px-4 md:px-6 py-4 whitespace-nowrap text-sm data-grid-cell">
|
|
|
<button
|
|
|
class="text-blue-600 hover:text-blue-800 mr-3 transition-colors view-drone-data">查看数据</button>
|
|
|
<button
|
|
|
class="text-blue-600 hover:text-blue-800 transition-colors">维护记录</button>
|
|
|
</td>
|
|
|
</tr>
|
|
|
<tr class="data-grid-row hover:bg-gray-50 transition-colors">
|
|
|
<td class="px-4 md:px-6 py-4 whitespace-nowrap text-sm data-grid-cell">GT-002
|
|
|
</td>
|
|
|
<td class="px-4 md:px-6 py-4 whitespace-nowrap text-sm data-grid-cell">固定翼</td>
|
|
|
<td class="px-4 md:px-6 py-4 whitespace-nowrap text-sm data-grid-cell">512.3小时
|
|
|
</td>
|
|
|
<td class="px-4 md:px-6 py-4 whitespace-nowrap text-sm data-grid-cell">2,345 km
|
|
|
</td>
|
|
|
<td class="px-4 md:px-6 py-4 whitespace-nowrap text-sm data-grid-cell">203次</td>
|
|
|
<td class="px-4 md:px-6 py-4 whitespace-nowrap text-sm data-grid-cell">88%</td>
|
|
|
<td class="px-4 md:px-6 py-4 whitespace-nowrap text-sm data-grid-cell">
|
|
|
<span
|
|
|
class="px-2 py-1 text-xs rounded-full bg-green-100 text-green-800">运行中</span>
|
|
|
</td>
|
|
|
<td class="px-4 md:px-6 py-4 whitespace-nowrap text-sm data-grid-cell">
|
|
|
<button
|
|
|
class="text-blue-600 hover:text-blue-800 mr-3 transition-colors view-drone-data">查看数据</button>
|
|
|
<button
|
|
|
class="text-blue-600 hover:text-blue-800 transition-colors">维护记录</button>
|
|
|
</td>
|
|
|
</tr>
|
|
|
<tr class="data-grid-row hover:bg-gray-50 transition-colors">
|
|
|
<td class="px-4 md:px-6 py-4 whitespace-nowrap text-sm data-grid-cell">GT-003
|
|
|
</td>
|
|
|
<td class="px-4 md:px-6 py-4 whitespace-nowrap text-sm data-grid-cell">混合型</td>
|
|
|
<td class="px-4 md:px-6 py-4 whitespace-nowrap text-sm data-grid-cell">287.6小时
|
|
|
</td>
|
|
|
<td class="px-4 md:px-6 py-4 whitespace-nowrap text-sm data-grid-cell">1,023 km
|
|
|
</td>
|
|
|
<td class="px-4 md:px-6 py-4 whitespace-nowrap text-sm data-grid-cell">98次</td>
|
|
|
<td class="px-4 md:px-6 py-4 whitespace-nowrap text-sm data-grid-cell">85%</td>
|
|
|
<td class="px-4 md:px-6 py-4 whitespace-nowrap text-sm data-grid-cell">
|
|
|
<span
|
|
|
class="px-2 py-1 text-xs rounded-full bg-yellow-100 text-yellow-800">维护中</span>
|
|
|
</td>
|
|
|
<td class="px-4 md:px-6 py-4 whitespace-nowrap text-sm data-grid-cell">
|
|
|
<button
|
|
|
class="text-blue-600 hover:text-blue-800 mr-3 transition-colors view-drone-data">查看数据</button>
|
|
|
<button
|
|
|
class="text-blue-600 hover:text-blue-800 transition-colors">维护记录</button>
|
|
|
</td>
|
|
|
</tr>
|
|
|
</tbody>
|
|
|
</table>
|
|
|
</div>
|
|
|
<div class="p-4 border-t border-gray-200 flex flex-wrap justify-between items-center gap-4">
|
|
|
<p class="text-sm text-gray-500">显示 1 至 3 条，共 24 条</p>
|
|
|
<div class="flex space-x-1">
|
|
|
<button
|
|
|
class="w-8 h-8 flex items-center justify-center rounded border border-gray-300 text-gray-500 hover:bg-gray-100 disabled:opacity-50 transition-colors"
|
|
|
disabled>
|
|
|
<i class="fa fa-chevron-left text-xs"></i>
|
|
|
</button>
|
|
|
<button
|
|
|
class="w-8 h-8 flex items-center justify-center rounded bg-blue-600 text-white hover:bg-blue-700 transition-colors">1</button>
|
|
|
<button
|
|
|
class="w-8 h-8 flex items-center justify-center rounded border border-gray-300 hover:bg-gray-100 transition-colors">2</button>
|
|
|
<button
|
|
|
class="w-8 h-8 flex items-center justify-center rounded border border-gray-300 hover:bg-gray-100 transition-colors">3</button>
|
|
|
<button
|
|
|
class="w-8 h-8 flex items-center justify-center rounded border border-gray-300 text-gray-500 hover:bg-gray-100 transition-colors">
|
|
|
<i class="fa fa-chevron-right text-xs"></i>
|
|
|
</button>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</section>
|
|
|
</div>
|
|
|
</main>
|
|
|
</div>
|
|
|
|
|
|
<script>
|
|
|
// 更新日期和时间显示
|
|
|
function updateDateTime() {
|
|
|
const now = new Date();
|
|
|
const dateStr = now.toLocaleDateString('zh-CN', {
|
|
|
year: 'numeric',
|
|
|
month: 'long',
|
|
|
day: 'numeric',
|
|
|
weekday: 'long'
|
|
|
});
|
|
|
const timeStr = now.toLocaleTimeString('zh-CN', {
|
|
|
hour12: false
|
|
|
});
|
|
|
|
|
|
const dateElement = document.getElementById('current-date');
|
|
|
const timeElement = document.getElementById('current-time');
|
|
|
|
|
|
if (dateElement) dateElement.textContent = dateStr;
|
|
|
if (timeElement) timeElement.textContent = timeStr;
|
|
|
}
|
|
|
|
|
|
// 初始化日期
|
|
|
document.getElementById('current-date').textContent = new Date().toLocaleDateString('zh-CN', {
|
|
|
year: 'numeric',
|
|
|
month: 'long',
|
|
|
day: 'numeric',
|
|
|
weekday: 'long'
|
|
|
});
|
|
|
|
|
|
// 侧边栏切换功能
|
|
|
document.getElementById('mobile-menu-button').addEventListener('click', function () {
|
|
|
const sidebar = document.getElementById('sidebar');
|
|
|
sidebar.classList.toggle('mobile-hidden');
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
// 通知面板功能
|
|
|
document.querySelector('.notification-button').addEventListener('click', function () {
|
|
|
const panel = document.getElementById('notification-panel');
|
|
|
panel.classList.toggle('translate-x-full');
|
|
|
});
|
|
|
|
|
|
document.getElementById('close-notification').addEventListener('click', function () {
|
|
|
document.getElementById('notification-panel').classList.add('translate-x-full');
|
|
|
});
|
|
|
|
|
|
// 气象数据实时更新
|
|
|
let weatherFiveElementsChart;
|
|
|
let weatherUpdateInterval;
|
|
|
|
|
|
// 初始化气象数据
|
|
|
let currentWeatherData = {
|
|
|
temperature: 23.5,
|
|
|
humidity: 68,
|
|
|
pressure: 1013,
|
|
|
windSpeed: 4.2,
|
|
|
windDirection: '东北'
|
|
|
};
|
|
|
|
|
|
// 风向数组
|
|
|
const windDirections = ['东北', '东南', '西南', '西北'];
|
|
|
|
|
|
// 更新气象数据
|
|
|
function updateWeatherData() {
|
|
|
// 模拟真实的气象变化
|
|
|
currentWeatherData.temperature = Math.max(15, Math.min(35,
|
|
|
currentWeatherData.temperature + (Math.random() - 0.5) * 0.5));
|
|
|
currentWeatherData.humidity = Math.max(40, Math.min(90,
|
|
|
currentWeatherData.humidity + (Math.random() - 0.5) * 3));
|
|
|
currentWeatherData.pressure = Math.max(1000, Math.min(1020,
|
|
|
currentWeatherData.pressure + (Math.random() - 0.5) * 0.5));
|
|
|
currentWeatherData.windSpeed = Math.max(1, Math.min(15,
|
|
|
currentWeatherData.windSpeed + (Math.random() - 0.5) * 0.3));
|
|
|
|
|
|
// 风向变化概率较低，更稳定
|
|
|
if (Math.random() < 0.1) {
|
|
|
const currentIndex = windDirections.indexOf(currentWeatherData.windDirection);
|
|
|
const newIndex = (currentIndex + Math.floor(Math.random() * 3) - 1 + 4) % 4;
|
|
|
currentWeatherData.windDirection = windDirections[newIndex];
|
|
|
}
|
|
|
|
|
|
// 更新显示
|
|
|
document.getElementById('temperature-value').textContent = currentWeatherData.temperature.toFixed(1) + '°C';
|
|
|
document.getElementById('humidity-value').textContent = Math.round(currentWeatherData.humidity) + '%';
|
|
|
document.getElementById('pressure-value').textContent = Math.round(currentWeatherData.pressure) + ' hPa';
|
|
|
document.getElementById('wind-speed-value').textContent = currentWeatherData.windSpeed.toFixed(1) + ' m/s';
|
|
|
document.getElementById('wind-direction-value').textContent = currentWeatherData.windDirection;
|
|
|
|
|
|
// 添加变化动画
|
|
|
document.querySelectorAll('.weather-value').forEach(el => {
|
|
|
el.classList.add('weather-value-changing');
|
|
|
setTimeout(() => {
|
|
|
el.classList.remove('weather-value-changing');
|
|
|
}, 1000);
|
|
|
});
|
|
|
|
|
|
// 更新图表数据
|
|
|
if (weatherFiveElementsChart) {
|
|
|
const newData = generateWeatherChartData();
|
|
|
weatherFiveElementsChart.data.datasets[0].data = newData.temperature;
|
|
|
weatherFiveElementsChart.data.datasets[1].data = newData.humidity;
|
|
|
weatherFiveElementsChart.data.datasets[2].data = newData.pressure;
|
|
|
weatherFiveElementsChart.data.datasets[3].data = newData.windSpeed;
|
|
|
weatherFiveElementsChart.update('none');
|
|
|
}
|
|
|
}
|
|
|
|
|
|
// 生成气象图表数据
|
|
|
function generateWeatherChartData() {
|
|
|
const labels = ['00:00', '04:00', '08:00', '12:00', '16:00', '20:00'];
|
|
|
const temperature = [];
|
|
|
const humidity = [];
|
|
|
const pressure = [];
|
|
|
const windSpeed = [];
|
|
|
|
|
|
// 生成基于当前时间的合理数据
|
|
|
const baseTemp = currentWeatherData.temperature;
|
|
|
const baseHumidity = currentWeatherData.humidity;
|
|
|
const basePressure = currentWeatherData.pressure;
|
|
|
const baseWindSpeed = currentWeatherData.windSpeed;
|
|
|
|
|
|
for (let i = 0; i < labels.length; i++) {
|
|
|
// 温度变化：白天升高，夜晚降低
|
|
|
const tempVariation = Math.sin(i / labels.length * Math.PI) * 3;
|
|
|
temperature.push(+(baseTemp + tempVariation).toFixed(1));
|
|
|
|
|
|
// 湿度变化：与温度相反
|
|
|
const humidityVariation = -Math.sin(i / labels.length * Math.PI) * 8;
|
|
|
humidity.push(Math.round(baseHumidity + humidityVariation));
|
|
|
|
|
|
// 气压变化：较小波动
|
|
|
const pressureVariation = (Math.random() - 0.5) * 2;
|
|
|
pressure.push(Math.round(basePressure + pressureVariation));
|
|
|
|
|
|
// 风速变化：白天较大，夜晚较小
|
|
|
const windVariation = Math.sin(i / labels.length * Math.PI) * 2;
|
|
|
windSpeed.push(+(baseWindSpeed + windVariation).toFixed(1));
|
|
|
}
|
|
|
|
|
|
return { temperature, humidity, pressure, windSpeed };
|
|
|
}
|
|
|
|
|
|
// 图表初始化
|
|
|
function initCharts() {
|
|
|
// 任务完成情况图表
|
|
|
const taskCompletionCtx = document.getElementById('taskCompletionChart').getContext('2d');
|
|
|
new Chart(taskCompletionCtx, {
|
|
|
type: 'line',
|
|
|
data: {
|
|
|
labels: ['10-04', '10-05', '10-06', '10-07', '10-08', '10-09', '10-10'],
|
|
|
datasets: [{
|
|
|
label: '已完成任务',
|
|
|
data: [12, 19, 15, 17, 22, 18, 15],
|
|
|
borderColor: '#10B981',
|
|
|
backgroundColor: 'rgba(16, 185, 129, 0.1)',
|
|
|
tension: 0.4,
|
|
|
fill: true
|
|
|
}, {
|
|
|
label: '进行中任务',
|
|
|
data: [5, 7, 6, 8, 6, 5, 3],
|
|
|
borderColor: '#F59E0B',
|
|
|
backgroundColor: 'rgba(245, 158, 11, 0.1)',
|
|
|
tension: 0.4,
|
|
|
fill: true
|
|
|
}]
|
|
|
},
|
|
|
options: {
|
|
|
responsive: true,
|
|
|
maintainAspectRatio: false,
|
|
|
plugins: {
|
|
|
legend: {
|
|
|
position: 'top',
|
|
|
labels: {
|
|
|
color: '#ffffff' // 图例文字颜色设置为白色
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
scales: {
|
|
|
y: {
|
|
|
beginAtZero: true,
|
|
|
ticks: {
|
|
|
color: '#ffffff' // Y轴刻度文字颜色设置为白色
|
|
|
},
|
|
|
title: {
|
|
|
color: '#ffffff' // Y轴标题颜色设置为白色（如果有标题的话）
|
|
|
}
|
|
|
},
|
|
|
x: {
|
|
|
ticks: {
|
|
|
color: '#ffffff' // X轴刻度文字颜色设置为白色
|
|
|
},
|
|
|
title: {
|
|
|
color: '#ffffff' // X轴标题颜色设置为白色（如果有标题的话）
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
});
|
|
|
|
|
|
// 任务类型分布图表
|
|
|
const taskTypeCtx = document.getElementById('taskTypeChart').getContext('2d');
|
|
|
new Chart(taskTypeCtx, {
|
|
|
type: 'doughnut',
|
|
|
data: {
|
|
|
labels: ['巡检任务', '气象探测任务', '航拍测绘任务', '其他任务'],
|
|
|
datasets: [{
|
|
|
data: [35, 25, 20, 10],
|
|
|
backgroundColor: [
|
|
|
'#3B82F6',
|
|
|
'#10B981',
|
|
|
'#F59E0B',
|
|
|
'#6B7280'
|
|
|
]
|
|
|
}]
|
|
|
},
|
|
|
options: {
|
|
|
responsive: true,
|
|
|
maintainAspectRatio: false,
|
|
|
plugins: {
|
|
|
legend: {
|
|
|
position: 'right',
|
|
|
labels: {
|
|
|
color: '#ffffff' // 图例文字颜色设置为白色
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
});
|
|
|
|
|
|
// 无人机使用率图表
|
|
|
const droneUsageCtx = document.getElementById('droneUsageChart').getContext('2d');
|
|
|
new Chart(droneUsageCtx, {
|
|
|
type: 'bar',
|
|
|
data: {
|
|
|
labels: ['GT-001', 'GT-002', 'GT-003', 'GT-004', 'GT-005', 'GT-006'],
|
|
|
datasets: [{
|
|
|
label: '使用率 (%)',
|
|
|
data: [85, 92, 78, 65, 88, 95],
|
|
|
backgroundColor: '#3B82F6'
|
|
|
}]
|
|
|
},
|
|
|
options: {
|
|
|
responsive: true,
|
|
|
maintainAspectRatio: false,
|
|
|
plugins: {
|
|
|
legend: {
|
|
|
position: 'top',
|
|
|
labels: {
|
|
|
color: '#ffffff' // 图例文字颜色设置为白色
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
scales: {
|
|
|
y: {
|
|
|
beginAtZero: true,
|
|
|
max: 100,
|
|
|
ticks: {
|
|
|
color: '#ffffff' // Y轴刻度文字颜色设置为白色
|
|
|
},
|
|
|
title: {
|
|
|
color: '#ffffff' // Y轴标题颜色设置为白色（如果有标题的话）
|
|
|
}
|
|
|
},
|
|
|
x: {
|
|
|
ticks: {
|
|
|
color: '#ffffff' // X轴刻度文字颜色设置为白色
|
|
|
},
|
|
|
title: {
|
|
|
color: '#ffffff' // X轴标题颜色设置为白色（如果有标题的话）
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
});
|
|
|
|
|
|
// 无人机状态分布图表
|
|
|
const droneStatusCtx = document.getElementById('droneStatusChart').getContext('2d');
|
|
|
new Chart(droneStatusCtx, {
|
|
|
type: 'pie',
|
|
|
data: {
|
|
|
labels: ['运行中', '闲置中', '维护中', '故障'],
|
|
|
datasets: [{
|
|
|
data: [18, 4, 2, 0],
|
|
|
backgroundColor: [
|
|
|
'#10B981',
|
|
|
'#6B7280',
|
|
|
'#F59E0B',
|
|
|
'#EF4444'
|
|
|
]
|
|
|
}]
|
|
|
},
|
|
|
options: {
|
|
|
responsive: true,
|
|
|
maintainAspectRatio: false,
|
|
|
plugins: {
|
|
|
legend: {
|
|
|
position: 'right',
|
|
|
labels: {
|
|
|
color: '#ffffff' // 图例文字颜色设置为白色
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
});
|
|
|
|
|
|
// 任务审批统计图表
|
|
|
const approvalCtx = document.getElementById('approvalChart').getContext('2d');
|
|
|
new Chart(approvalCtx, {
|
|
|
type: 'bar',
|
|
|
data: {
|
|
|
labels: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
|
|
|
datasets: [{
|
|
|
label: '已批准',
|
|
|
data: [12, 19, 15, 17, 22, 18, 15],
|
|
|
backgroundColor: '#10B981'
|
|
|
}, {
|
|
|
label: '待审批',
|
|
|
data: [5, 7, 6, 8, 6, 5, 3],
|
|
|
backgroundColor: '#F59E0B'
|
|
|
}, {
|
|
|
label: '已拒绝',
|
|
|
data: [2, 3, 1, 2, 1, 0, 1],
|
|
|
backgroundColor: '#EF4444'
|
|
|
}]
|
|
|
},
|
|
|
options: {
|
|
|
responsive: true,
|
|
|
maintainAspectRatio: false,
|
|
|
plugins: {
|
|
|
legend: {
|
|
|
position: 'top',
|
|
|
labels: {
|
|
|
color: '#ffffff' // 图例文字颜色设置为白色
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
scales: {
|
|
|
y: {
|
|
|
beginAtZero: true,
|
|
|
ticks: {
|
|
|
color: '#ffffff' // X轴刻度文字颜色设置为白色
|
|
|
},
|
|
|
title: {
|
|
|
color: '#ffffff' // X轴标题颜色设置为白色（如果有标题的话）
|
|
|
}
|
|
|
},
|
|
|
x: {
|
|
|
ticks: {
|
|
|
color: '#ffffff' // X轴刻度文字颜色设置为白色
|
|
|
},
|
|
|
title: {
|
|
|
color: '#ffffff' // X轴标题颜色设置为白色（如果有标题的话）
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
});
|
|
|
|
|
|
// 无人机气象五要素图表
|
|
|
const weatherFiveElementsCtx = document.getElementById('weatherFiveElementsChart').getContext('2d');
|
|
|
const weatherData = generateWeatherChartData();
|
|
|
weatherFiveElementsChart = new Chart(weatherFiveElementsCtx, {
|
|
|
type: 'line',
|
|
|
data: {
|
|
|
labels: ['00:00', '04:00', '08:00', '12:00', '16:00', '20:00'],
|
|
|
datasets: [{
|
|
|
label: '温度 (°C)',
|
|
|
data: weatherData.temperature,
|
|
|
borderColor: '#EF4444',
|
|
|
backgroundColor: 'rgba(239, 68, 68, 0.1)',
|
|
|
tension: 0.4,
|
|
|
yAxisID: 'y'
|
|
|
}, {
|
|
|
label: '湿度 (%)',
|
|
|
data: weatherData.humidity,
|
|
|
borderColor: '#3B82F6',
|
|
|
backgroundColor: 'rgba(59, 130, 246, 0.1)',
|
|
|
tension: 0.4,
|
|
|
yAxisID: 'y1'
|
|
|
}, {
|
|
|
label: '气压 (hPa)',
|
|
|
data: weatherData.pressure,
|
|
|
borderColor: '#10B981',
|
|
|
backgroundColor: 'rgba(16, 185, 129, 0.1)',
|
|
|
tension: 0.4,
|
|
|
yAxisID: 'y2'
|
|
|
}, {
|
|
|
label: '风速 (m/s)',
|
|
|
data: weatherData.windSpeed,
|
|
|
borderColor: '#8B5CF6',
|
|
|
backgroundColor: 'rgba(139, 92, 246, 0.1)',
|
|
|
tension: 0.4,
|
|
|
yAxisID: 'y3'
|
|
|
}]
|
|
|
},
|
|
|
options: {
|
|
|
responsive: true,
|
|
|
maintainAspectRatio: false,
|
|
|
interaction: {
|
|
|
mode: 'index',
|
|
|
intersect: false,
|
|
|
},
|
|
|
plugins: {
|
|
|
legend: {
|
|
|
position: 'top',
|
|
|
labels: {
|
|
|
color: '#ffffff' // 图例文字颜色设置为白色
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
scales: {
|
|
|
y: {
|
|
|
type: 'linear',
|
|
|
display: true,
|
|
|
position: 'left',
|
|
|
title: {
|
|
|
display: true,
|
|
|
text: '温度 (°C)',
|
|
|
color: '#ffffff' // X轴标题颜色设置为白色（如果有标题的话）
|
|
|
},
|
|
|
ticks: {
|
|
|
color: '#ffffff' // X轴刻度文字颜色设置为白色
|
|
|
},
|
|
|
},
|
|
|
y1: {
|
|
|
type: 'linear',
|
|
|
display: true,
|
|
|
position: 'right',
|
|
|
title: {
|
|
|
display: true,
|
|
|
text: '湿度 (%)',
|
|
|
color: '#ffffff' // X轴标题颜色设置为白色（如果有标题的话）
|
|
|
},
|
|
|
ticks: {
|
|
|
color: '#ffffff' // X轴刻度文字颜色设置为白色
|
|
|
},
|
|
|
grid: {
|
|
|
drawOnChartArea: false,
|
|
|
},
|
|
|
},
|
|
|
y2: {
|
|
|
type: 'linear',
|
|
|
display: false,
|
|
|
ticks: {
|
|
|
color: '#ffffff' // X轴刻度文字颜色设置为白色
|
|
|
},
|
|
|
title: {
|
|
|
color: '#ffffff' // X轴标题颜色设置为白色（如果有标题的话）
|
|
|
}
|
|
|
},
|
|
|
y3: {
|
|
|
type: 'linear',
|
|
|
display: false,
|
|
|
ticks: {
|
|
|
color: '#ffffff' // X轴刻度文字颜色设置为白色
|
|
|
},
|
|
|
title: {
|
|
|
color: '#ffffff' // X轴标题颜色设置为白色（如果有标题的话）
|
|
|
}
|
|
|
},
|
|
|
x: {
|
|
|
ticks: {
|
|
|
color: '#ffffff' // X轴刻度文字颜色设置为白色
|
|
|
},
|
|
|
title: {
|
|
|
color: '#ffffff' // X轴标题颜色设置为白色（如果有标题的话）
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
});
|
|
|
|
|
|
// 大气成分数据图表
|
|
|
const atmosphereCompositionCtx = document.getElementById('atmosphereCompositionChart').getContext('2d');
|
|
|
new Chart(atmosphereCompositionCtx, {
|
|
|
type: 'bar',
|
|
|
data: {
|
|
|
labels: ['氧气', '氮气', '二氧化碳', '甲烷', '其他气体'],
|
|
|
datasets: [{
|
|
|
label: '气体含量 (%)',
|
|
|
data: [20.95, 78.08, 0.04, 0.00017, 0.93],
|
|
|
backgroundColor: [
|
|
|
'#3B82F6',
|
|
|
'#10B981',
|
|
|
'#F59E0B',
|
|
|
'#EF4444',
|
|
|
'#8B5CF6'
|
|
|
]
|
|
|
}]
|
|
|
},
|
|
|
options: {
|
|
|
responsive: true,
|
|
|
maintainAspectRatio: false,
|
|
|
plugins: {
|
|
|
legend: {
|
|
|
position: 'top',
|
|
|
labels: {
|
|
|
color: '#ffffff' // 图例文字颜色设置为白色
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
scales: {
|
|
|
y: {
|
|
|
beginAtZero: true,
|
|
|
max: 100,
|
|
|
ticks: {
|
|
|
color: '#ffffff' // X轴刻度文字颜色设置为白色
|
|
|
},
|
|
|
title: {
|
|
|
color: '#ffffff' // X轴标题颜色设置为白色（如果有标题的话）
|
|
|
}
|
|
|
},
|
|
|
x: {
|
|
|
ticks: {
|
|
|
color: '#ffffff' // X轴刻度文字颜色设置为白色
|
|
|
},
|
|
|
title: {
|
|
|
color: '#ffffff' // X轴标题颜色设置为白色（如果有标题的话）
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
});
|
|
|
}
|
|
|
|
|
|
// 页面加载完成后初始化
|
|
|
document.addEventListener('DOMContentLoaded', function () {
|
|
|
updateDateTime();
|
|
|
// 每秒更新时间
|
|
|
setInterval(updateDateTime, 1000);
|
|
|
initCharts();
|
|
|
|
|
|
// 地图标记交互
|
|
|
document.querySelectorAll('.map-marker').forEach(marker => {
|
|
|
marker.addEventListener('click', function () {
|
|
|
const area = this.getAttribute('data-area');
|
|
|
let areaName = '';
|
|
|
|
|
|
switch (area) {
|
|
|
case 'sanya-bay':
|
|
|
areaName = '三亚湾';
|
|
|
break;
|
|
|
case 'west-island':
|
|
|
areaName = '西岛';
|
|
|
break;
|
|
|
case 'wuzhizhou-island':
|
|
|
areaName = '蜈支洲岛';
|
|
|
break;
|
|
|
case 'boundary-island':
|
|
|
areaName = '分界洲岛';
|
|
|
break;
|
|
|
}
|
|
|
|
|
|
document.getElementById('current-map-area').textContent = areaName;
|
|
|
|
|
|
// 显示区域详情提示
|
|
|
alert(`您点击了${areaName}，正在加载该区域的详细测绘数据...`);
|
|
|
});
|
|
|
});
|
|
|
|
|
|
// 统计筛选按钮交互
|
|
|
document.querySelectorAll('.stat-filter-active').forEach(button => {
|
|
|
button.addEventListener('click', function () {
|
|
|
const parent = this.parentElement;
|
|
|
parent.querySelectorAll('button').forEach(btn => {
|
|
|
btn.classList.remove('stat-filter-active');
|
|
|
});
|
|
|
this.classList.add('stat-filter-active');
|
|
|
});
|
|
|
});
|
|
|
|
|
|
// 任务查看按钮交互
|
|
|
document.querySelectorAll('.task-action-btn').forEach(button => {
|
|
|
button.addEventListener('click', function () {
|
|
|
const taskId = this.getAttribute('data-task');
|
|
|
const action = this.getAttribute('data-action');
|
|
|
alert(`正在${action === 'view' ? '查看' : '执行'}任务 ${taskId}...`);
|
|
|
});
|
|
|
});
|
|
|
|
|
|
// 地图类型切换
|
|
|
document.querySelector('.map-type-filter').addEventListener('change', function () {
|
|
|
const mapType = this.value;
|
|
|
alert(`已切换到${mapType === '3d' ? '3D地形图' : mapType === 'satellite' ? '卫星地图' : mapType === 'terrain' ? '地形地图' : '矢量地图'}模式`);
|
|
|
});
|
|
|
|
|
|
// 无人机详情查看
|
|
|
document.querySelectorAll('.view-drone-details').forEach(button => {
|
|
|
button.addEventListener('click', function () {
|
|
|
const droneId = this.getAttribute('data-drone');
|
|
|
alert(`正在查看无人机 ${droneId} 的详细信息...`);
|
|
|
});
|
|
|
});
|
|
|
|
|
|
// 巡检详情查看
|
|
|
document.querySelectorAll('.view-inspection-details').forEach(button => {
|
|
|
button.addEventListener('click', function () {
|
|
|
alert('正在查看巡检任务详情...');
|
|
|
});
|
|
|
});
|
|
|
|
|
|
// 测绘详情查看
|
|
|
document.querySelectorAll('.view-mapping-details').forEach(button => {
|
|
|
button.addEventListener('click', function () {
|
|
|
alert('正在查看测绘任务详情...');
|
|
|
});
|
|
|
});
|
|
|
|
|
|
// 无人机数据查看
|
|
|
document.querySelectorAll('.view-drone-data').forEach(button => {
|
|
|
button.addEventListener('click', function () {
|
|
|
alert('正在查看无人机详细数据...');
|
|
|
});
|
|
|
});
|
|
|
|
|
|
// 地图控制按钮
|
|
|
document.querySelectorAll('.map-control-btn').forEach(button => {
|
|
|
button.addEventListener('click', function () {
|
|
|
const action = this.getAttribute('data-action');
|
|
|
const actions = {
|
|
|
'zoom-in': '放大',
|
|
|
'zoom-out': '缩小',
|
|
|
'reset': '重置视图',
|
|
|
'fullscreen': '全屏'
|
|
|
};
|
|
|
alert(`正在${actions[action]}地图...`);
|
|
|
});
|
|
|
});
|
|
|
|
|
|
// 气象数据刷新按钮
|
|
|
document.querySelector('.bg-blue-600').addEventListener('click', function () {
|
|
|
updateWeatherData();
|
|
|
alert('气象数据已刷新！');
|
|
|
});
|
|
|
|
|
|
// 启动气象数据实时更新
|
|
|
weatherUpdateInterval = setInterval(updateWeatherData, 5000); // 每5秒更新一次
|
|
|
|
|
|
|
|
|
document.querySelectorAll('.nav-item').forEach(item => {
|
|
|
item.addEventListener('click', function (e) {
|
|
|
// 不需要 preventDefault，因为这是按钮而不是链接
|
|
|
|
|
|
// 获取目标ID
|
|
|
const targetId = this.getAttribute('data-target');
|
|
|
|
|
|
if (targetId) {
|
|
|
// 更新活动菜单项
|
|
|
document.querySelectorAll('.nav-item').forEach(nav => {
|
|
|
nav.classList.remove('sidebar-item-active');
|
|
|
});
|
|
|
this.classList.add('sidebar-item-active');
|
|
|
|
|
|
// 更新页面标题
|
|
|
const pageTitle = this.querySelector('span').textContent;
|
|
|
document.getElementById('page-title').textContent = pageTitle;
|
|
|
|
|
|
// 显示对应页面
|
|
|
document.querySelectorAll('section').forEach(section => {
|
|
|
section.classList.add('hidden');
|
|
|
});
|
|
|
document.getElementById(targetId).classList.remove('hidden');
|
|
|
|
|
|
// 移动端关闭侧边栏
|
|
|
if (window.innerWidth < 1024) {
|
|
|
document.getElementById('sidebar').classList.add('mobile-hidden');
|
|
|
}
|
|
|
}
|
|
|
});
|
|
|
});
|
|
|
});
|
|
|
|
|
|
// 响应式调整
|
|
|
window.addEventListener('resize', function () {
|
|
|
if (window.innerWidth >= 1024) {
|
|
|
document.getElementById('sidebar').classList.remove('mobile-hidden');
|
|
|
}
|
|
|
});
|
|
|
</script>
|
|
|
</body>
|
|
|
|
|
|
</html> |
