You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1185 lines
33 KiB
HTML
1185 lines
33 KiB
HTML
<!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="/js/jquery.min.js"></script>
|
|
<!-- 引入 Leaflet.js 和必要的 CSS -->
|
|
<link rel="stylesheet" href="/assets/css/leaflet.css" />
|
|
<script src="/js/leaflet.js"></script>
|
|
|
|
<!-- 引入 Leaflet 聚合插件 -->
|
|
<script src="/js/leaflet.markercluster.js"></script>
|
|
<link rel="stylesheet" href="/assets/css/MarkerCluster.css" />
|
|
<link rel="stylesheet" href="/assets/css/MarkerCluster.Default.css" />
|
|
|
|
<style>
|
|
/* 保留原有的所有样式 */
|
|
/* 控制面板内容区域添加滚动条 */
|
|
.control-panel-content {
|
|
flex: 1;
|
|
overflow-y: auto;
|
|
padding-right: 10px;
|
|
margin-right: -10px;
|
|
}
|
|
|
|
/* 美化控制面板内容区域的滚动条 */
|
|
.control-panel-content::-webkit-scrollbar {
|
|
width: 4px;
|
|
}
|
|
|
|
.control-panel-content::-webkit-scrollbar-track {
|
|
background: rgba(12, 42, 73, 0.3);
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.control-panel-content::-webkit-scrollbar-thumb {
|
|
background: rgba(79, 195, 247, 0.5);
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.control-panel-content::-webkit-scrollbar-thumb:hover {
|
|
background: rgba(79, 195, 247, 0.8);
|
|
}
|
|
|
|
/* 替换原有的过滤器样式为以下代码 */
|
|
|
|
/* 修改过滤器相关样式 */
|
|
.filter-options {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 12px;
|
|
}
|
|
|
|
.filter-option {
|
|
display: flex;
|
|
align-items: center;
|
|
position: relative;
|
|
padding-left: 30px;
|
|
margin-bottom: 5px;
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.filter-option:hover {
|
|
transform: translateX(5px);
|
|
background: rgba(40, 80, 130, 0.3);
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.filter-option input[type="checkbox"] {
|
|
position: absolute;
|
|
opacity: 0;
|
|
cursor: pointer;
|
|
height: 0;
|
|
width: 0;
|
|
}
|
|
|
|
.filter-option .checkmark {
|
|
position: absolute;
|
|
left: 0;
|
|
height: 20px;
|
|
width: 20px;
|
|
background-color: rgba(25, 55, 95, 0.6);
|
|
border: 2px solid #4fc3f7;
|
|
border-radius: 4px;
|
|
transition: all 0.3s ease;
|
|
pointer-events: all;
|
|
/* 确保可以点击 */
|
|
}
|
|
|
|
.filter-option:hover .checkmark {
|
|
background-color: rgba(79, 195, 247, 0.2);
|
|
}
|
|
|
|
.filter-option input:checked~.checkmark {
|
|
background-color: #4fc3f7;
|
|
}
|
|
|
|
.filter-option .checkmark:after {
|
|
content: "";
|
|
position: absolute;
|
|
display: none;
|
|
}
|
|
|
|
.filter-option input:checked~.checkmark:after {
|
|
display: block;
|
|
}
|
|
|
|
.filter-option .checkmark:after {
|
|
left: 6px;
|
|
top: 2px;
|
|
width: 6px;
|
|
height: 10px;
|
|
border: solid white;
|
|
border-width: 0 2px 2px 0;
|
|
transform: rotate(45deg);
|
|
}
|
|
|
|
.filter-option label {
|
|
font-size: 0.95rem;
|
|
color: #e0f0ff;
|
|
padding: 5px 0;
|
|
cursor: pointer;
|
|
width: 100%;
|
|
margin-left: 10px;
|
|
user-select: none;
|
|
/* 防止文本选择 */
|
|
}
|
|
|
|
.control-title {
|
|
font-size: 1.1rem;
|
|
margin: 15px 0 10px 0;
|
|
color: #4fc3f7;
|
|
padding-bottom: 5px;
|
|
border-bottom: 1px solid rgba(79, 195, 247, 0.3);
|
|
}
|
|
|
|
.control-group {
|
|
margin-bottom: 20px;
|
|
padding: 10px;
|
|
background: rgba(16, 36, 62, 0.3);
|
|
border-radius: 8px;
|
|
border: 1px solid rgba(64, 156, 255, 0.2);
|
|
}
|
|
|
|
/* 优化滚动条以确保内容可见 */
|
|
/* .info-panel {
|
|
overflow-y: auto;
|
|
} */
|
|
|
|
/* 美化滚动条 */
|
|
.info-panel::-webkit-scrollbar {
|
|
width: 4px;
|
|
}
|
|
|
|
.info-panel::-webkit-scrollbar-track {
|
|
background: rgba(12, 42, 73, 0.3);
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.info-panel::-webkit-scrollbar-thumb {
|
|
background: rgba(79, 195, 247, 0.5);
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.info-panel::-webkit-scrollbar-thumb:hover {
|
|
background: rgba(79, 195, 247, 0.8);
|
|
}
|
|
|
|
* {
|
|
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;
|
|
overflow: hidden;
|
|
height: 100vh;
|
|
}
|
|
|
|
/* 定义本地字体 */
|
|
@font-face {
|
|
font-family: 'DS-Digital';
|
|
/* 自定义字体族名称 */
|
|
src: url('/assets/fonts/DS-Digita.TTF') format('truetype');
|
|
/* 指定字体文件路径和格式 */
|
|
font-weight: normal;
|
|
font-style: normal;
|
|
}
|
|
|
|
/* 定义本地字体 */
|
|
@font-face {
|
|
font-family: 'pmzd';
|
|
/* 自定义字体族名称 */
|
|
src: url('/assets/fonts/PMZD.TTF') format('truetype');
|
|
/* 指定字体文件路径和格式 */
|
|
font-weight: normal;
|
|
font-style: normal;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'YouSheBiaoTiHei';
|
|
/* 自定义字体族名称 */
|
|
src: url('/assets/fonts/YouSheBiaoTiHei.ttf') format('truetype');
|
|
/* 指定字体文件路径和格式 */
|
|
font-weight: normal;
|
|
font-style: normal;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'qweather';
|
|
/* 自定义字体族名称 */
|
|
src: url('/assets/fonts/qweather-icons.ttf') format('truetype');
|
|
/* 指定字体文件路径和格式 */
|
|
font-weight: normal;
|
|
font-style: normal;
|
|
}
|
|
|
|
/* 新增顶部标题栏样式 */
|
|
.topDiv {
|
|
width: 100%;
|
|
height: 8vh;
|
|
background: url('/assets/img/topBg2.png') top no-repeat;
|
|
background-size: 100% 115%;
|
|
display: flex;
|
|
justify-content: center;
|
|
z-index: 990;
|
|
position: relative;
|
|
/* background-color: rgba(12, 42, 73, 0.8); */
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
|
|
}
|
|
|
|
.topDiv .center {
|
|
font-family: 'pmzd', 'DS-Digital', 'PangMenZhengDao', 'Source Han Sans CN', sans-serif;
|
|
/* 优先使用 DS-Digital 字体 */
|
|
/* font-family: PangMenZhengDao, 'Source Han Sans CN'; */
|
|
font-weight: 400;
|
|
font-size: 4vh;
|
|
color: #ffffff;
|
|
align-self: center;
|
|
margin-top: -10px;
|
|
}
|
|
|
|
.topDiv .left {
|
|
position: absolute;
|
|
top: 4vh;
|
|
left: 3vw;
|
|
color: #ffffff;
|
|
}
|
|
|
|
.topDiv .left span:nth-child(1) {
|
|
font-weight: bold;
|
|
font-size: 0.8vw;
|
|
margin-right: 0.5vh;
|
|
}
|
|
|
|
.topDiv .left span:nth-child(2) {
|
|
font-weight: bold;
|
|
font-size: 1.2vw;
|
|
}
|
|
|
|
.topDiv .right {
|
|
position: absolute;
|
|
top: 3vh;
|
|
right: 0;
|
|
color: #ffffff;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.topDiv .right img:nth-child(1) {}
|
|
|
|
.topDiv .right span {
|
|
font-weight: bold;
|
|
font-size: 1.2vw;
|
|
}
|
|
|
|
.topDiv .icon-home {
|
|
position: absolute;
|
|
top: 1vh;
|
|
right: 8vw;
|
|
width: 4vh;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.container {
|
|
display: flex;
|
|
height: calc(100vh - 8vh - 20px);
|
|
position: relative;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
/* 左侧信息面板 */
|
|
.info-panel {
|
|
width: 300px;
|
|
height: 100%;
|
|
padding: 20px;
|
|
background: rgba(12, 42, 73, 0.1);
|
|
backdrop-filter: blur(10px);
|
|
border: 1px solid rgba(64, 156, 255, 0.3);
|
|
box-shadow: 5px 0 15px rgba(0, 0, 0, 0.3);
|
|
z-index: 10;
|
|
border-radius: 8px;
|
|
position: absolute;
|
|
left: 15px;
|
|
top: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
/* 右侧控制面板 */
|
|
.control-panel {
|
|
width: 280px;
|
|
height: 100%;
|
|
padding: 20px;
|
|
background: rgba(12, 42, 73, 0.9);
|
|
backdrop-filter: blur(10px);
|
|
border: 1px solid rgba(64, 156, 255, 0.3);
|
|
box-shadow: -5px 0 15px rgba(0, 0, 0, 0.3);
|
|
z-index: 10;
|
|
border-radius: 8px;
|
|
position: absolute;
|
|
right: 15px;
|
|
top: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
/* 卡片头部样式 */
|
|
/* .card-header {
|
|
height: 40px;
|
|
background: linear-gradient(to right, #1a3a5f, #2a5a8f);
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
border-radius: 8px 8px 0 0 !important;
|
|
border-bottom: 1px solid #4fc3f7;
|
|
padding: 12px 20px;
|
|
position: relative;
|
|
margin: -20px -20px 20px -20px;
|
|
}
|
|
|
|
.card-header span {
|
|
font-size: 1.2rem;
|
|
letter-spacing: 1px;
|
|
font-family: 'Microsoft YaHei';
|
|
font-weight: 400;
|
|
color: #ffffff;
|
|
} */
|
|
|
|
.stats-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 15px;
|
|
margin-bottom: 25px;
|
|
}
|
|
|
|
.stat-card {
|
|
background: rgba(25, 55, 95, 0.6);
|
|
/* background: url('/assets/img/common/kva2.png') no-repeat; */
|
|
/* background-size: 100% 100%; */
|
|
border-radius: 10px;
|
|
padding: 15px;
|
|
border-left: 4px solid #4fc3f7;
|
|
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
|
|
}
|
|
|
|
.stat-label {
|
|
font-size: 0.9rem;
|
|
color: #a0d2ff;
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
.stat-value {
|
|
font-size: 1.8rem;
|
|
font-weight: bold;
|
|
color: #4fc3f7;
|
|
}
|
|
|
|
.data-list {
|
|
flex: 1;
|
|
overflow-y: auto;
|
|
margin-top: 10px;
|
|
padding-right: 5px;
|
|
}
|
|
|
|
.data-item {
|
|
min-width: 200px;
|
|
background: rgba(25, 55, 95, 0.6);
|
|
border-radius: 8px;
|
|
padding: 10px;
|
|
border-left: 3px solid #4fc3f7;
|
|
transition: all 0.3s ease;
|
|
margin-bottom: 10px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.data-item:hover {
|
|
transform: translateX(5px);
|
|
background: rgba(40, 80, 130, 0.7);
|
|
}
|
|
|
|
.stream-device-info {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.stream-device-icon {
|
|
font-size: 1.5rem;
|
|
margin-right: 10px;
|
|
}
|
|
|
|
.stream-device-details {
|
|
flex: 1;
|
|
}
|
|
|
|
.stream-device-name {
|
|
font-weight: bold;
|
|
color: #4fc3f7;
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.stream-parameter {
|
|
font-size: 0.8rem;
|
|
color: #a0d2ff;
|
|
}
|
|
|
|
.stream-value-section {
|
|
text-align: right;
|
|
}
|
|
|
|
.stream-value {
|
|
font-weight: bold;
|
|
font-size: 1.1rem;
|
|
font-family: 'Courier New', monospace;
|
|
}
|
|
|
|
.stream-timestamp {
|
|
font-size: 0.7rem;
|
|
color: #81d4fa;
|
|
}
|
|
|
|
.control-group {
|
|
margin-bottom: 25px;
|
|
}
|
|
|
|
.control-title {
|
|
font-size: 1.2rem;
|
|
margin-bottom: 15px;
|
|
color: #4fc3f7;
|
|
}
|
|
|
|
.toggle-switch {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.switch-label {
|
|
margin-right: 10px;
|
|
font-size: 1rem;
|
|
}
|
|
|
|
.switch {
|
|
position: relative;
|
|
display: inline-block;
|
|
width: 60px;
|
|
height: 30px;
|
|
}
|
|
|
|
.switch input {
|
|
opacity: 0;
|
|
width: 0;
|
|
height: 0;
|
|
}
|
|
|
|
.slider {
|
|
position: absolute;
|
|
cursor: pointer;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background-color: #2c3e50;
|
|
transition: .4s;
|
|
border-radius: 34px;
|
|
}
|
|
|
|
.slider:before {
|
|
position: absolute;
|
|
content: "";
|
|
height: 22px;
|
|
width: 22px;
|
|
left: 4px;
|
|
bottom: 4px;
|
|
background-color: white;
|
|
transition: .4s;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
input:checked+.slider {
|
|
background-color: #4fc3f7;
|
|
}
|
|
|
|
input:checked+.slider:before {
|
|
transform: translateX(30px);
|
|
}
|
|
|
|
.filter-options {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
}
|
|
|
|
.filter-option {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.filter-option input {
|
|
margin-right: 10px;
|
|
}
|
|
|
|
/* 地球容器样式 */
|
|
.earth-container {
|
|
flex: 1;
|
|
height: 100%;
|
|
position: relative;
|
|
/* margin: 0 300px 0 320px; */
|
|
background: #0c1a2d;
|
|
}
|
|
|
|
#leafletMap {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: block;
|
|
}
|
|
|
|
/* 信息卡片样式 */
|
|
.info-card {
|
|
position: absolute;
|
|
background: rgba(16, 36, 62, 0.95);
|
|
backdrop-filter: blur(10px);
|
|
border-radius: 10px;
|
|
padding: 15px;
|
|
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.4);
|
|
border: 1px solid rgba(64, 156, 255, 0.3);
|
|
z-index: 1000;
|
|
width: 250px;
|
|
transform: translate(-50%, -100%);
|
|
margin-top: -20px;
|
|
}
|
|
|
|
.info-card::before {
|
|
content: "";
|
|
position: absolute;
|
|
top: 100%;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
border-width: 10px;
|
|
border-style: solid;
|
|
border-color: rgba(16, 36, 62, 0.95) transparent transparent transparent;
|
|
}
|
|
|
|
/* 卡片头部样式 */
|
|
.card-header {
|
|
height: 40px;
|
|
background: url('/assets/img/common/homeTitle2.png') no-repeat;
|
|
background-position: center;
|
|
background-size: 108% 120%;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
border-radius: 8px 8px 0 0 !important;
|
|
border-bottom: 1px solid var(--light-blue);
|
|
padding: 32px 20px;
|
|
position: relative;
|
|
margin: -20px -20px 0px -20px;
|
|
}
|
|
|
|
.card-header span {
|
|
font-size: 1.2rem;
|
|
letter-spacing: 1px;
|
|
font-family: 'YouSheBiaoTiHei', 'Microsoft YaHei';
|
|
font-weight: 400;
|
|
color: #ffffff;
|
|
}
|
|
|
|
.info-card-title {
|
|
font-size: 1.1rem;
|
|
color: #4fc3f7;
|
|
margin: 0;
|
|
}
|
|
|
|
.info-card-close {
|
|
background: none;
|
|
border: none;
|
|
color: #a0d2ff;
|
|
font-size: 1.2rem;
|
|
cursor: pointer;
|
|
padding: 0;
|
|
width: 24px;
|
|
height: 24px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.info-card-close:hover {
|
|
color: #ffffff;
|
|
}
|
|
|
|
.info-card-content {
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.info-item {
|
|
margin: 8px 0;
|
|
display: flex;
|
|
}
|
|
|
|
.info-label {
|
|
width: 70px;
|
|
color: #a0d2ff;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.info-value {
|
|
flex: 1;
|
|
color: #e0f0ff;
|
|
word-break: break-all;
|
|
}
|
|
|
|
.status-online {
|
|
color: #4caf50;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.status-offline {
|
|
color: #f44336;
|
|
font-weight: bold;
|
|
}
|
|
|
|
/* 响应式调整 */
|
|
@media (max-width: 1200px) {
|
|
|
|
.info-panel,
|
|
.control-panel {
|
|
width: 260px;
|
|
}
|
|
|
|
.earth-container {
|
|
margin: 0 275px;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 900px) {
|
|
|
|
.info-panel,
|
|
.control-panel {
|
|
width: 220px;
|
|
padding: 15px;
|
|
}
|
|
|
|
.earth-container {
|
|
margin: 0 235px;
|
|
}
|
|
|
|
.stat-value {
|
|
font-size: 1.5rem;
|
|
}
|
|
}
|
|
|
|
/* 滚动条样式 */
|
|
::-webkit-scrollbar {
|
|
width: 4px;
|
|
height: 4px;
|
|
}
|
|
|
|
::-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);
|
|
}
|
|
|
|
/* 警报列表样式 */
|
|
.alert-list {
|
|
/* height: 240px;
|
|
overflow-y: auto; */
|
|
height: calc(40vh - 8vh - 20px);
|
|
overflow: scroll;
|
|
}
|
|
|
|
.alert-item {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 12px 15px;
|
|
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
|
|
transition: background 0.3s;
|
|
}
|
|
|
|
.alert-item:hover {
|
|
background: rgba(255, 255, 255, 0.05);
|
|
}
|
|
|
|
.alert-level {
|
|
width: 10px;
|
|
height: 10px;
|
|
border-radius: 50%;
|
|
margin-right: 10px;
|
|
}
|
|
|
|
.level-high {
|
|
background: #ff4560;
|
|
box-shadow: 0 0 8px #ff4560;
|
|
}
|
|
|
|
.level-medium {
|
|
background: #ffa726;
|
|
box-shadow: 0 0 8px #ffa726;
|
|
}
|
|
|
|
.level-low {
|
|
background: #00e396;
|
|
box-shadow: 0 0 8px #00e396;
|
|
}
|
|
|
|
.alert-content {
|
|
flex: 1;
|
|
}
|
|
|
|
.alert-title {
|
|
font-weight: bold;
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
.alert-desc {
|
|
font-size: 13px;
|
|
color: #a0c8ff;
|
|
}
|
|
|
|
.alert-time {
|
|
font-size: 12px;
|
|
color: #7a9ccc;
|
|
}
|
|
|
|
/* 图表容器样式 */
|
|
.chart-container {
|
|
width: 100%;
|
|
/* height: 200px; */
|
|
margin-top: 10px;
|
|
height: calc(40vh - 8vh - 20px);
|
|
}
|
|
|
|
/* 新增样式：实时数据监控网格布局 */
|
|
.stats-grid {
|
|
height: calc(40vh - 8vh - 20px);
|
|
overflow: scroll;
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 10px;
|
|
margin-bottom: 25px;
|
|
}
|
|
|
|
.stat-grid-item {
|
|
background: rgba(25, 55, 95, 0.6);
|
|
border-radius: 8px;
|
|
padding: 12px;
|
|
/* border-left: 3px solid #4fc3f7; */
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
text-align: center;
|
|
}
|
|
|
|
.stat-grid-value {
|
|
font-size: 1rem;
|
|
font-weight: bold;
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
.stat-grid-label {
|
|
font-size: 0.8rem;
|
|
color: #a0d2ff;
|
|
margin-bottom: 3px;
|
|
}
|
|
|
|
.stat-grid-status {
|
|
font-size: 0.7rem;
|
|
color: #81d4fa;
|
|
}
|
|
|
|
/* 视频会议系统样式 */
|
|
.video-conference {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 10px;
|
|
margin-bottom: 25px;
|
|
}
|
|
|
|
.video-item {
|
|
background: rgba(25, 55, 95, 0.6);
|
|
border-radius: 8px;
|
|
padding: 12px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
text-align: center;
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.video-item:hover {
|
|
transform: translateY(-3px);
|
|
background: rgba(40, 80, 130, 0.7);
|
|
}
|
|
|
|
.video-icon {
|
|
font-size: 2rem;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.video-name {
|
|
font-size: 0.9rem;
|
|
color: #e0f0ff;
|
|
}
|
|
|
|
/* 网络系统状态样式 */
|
|
.network-status {
|
|
margin-top: 20px;
|
|
}
|
|
|
|
.network-item {
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.network-label {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin-bottom: 5px;
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.network-name {
|
|
color: #a0d2ff;
|
|
}
|
|
|
|
.network-value {
|
|
color: #4fc3f7;
|
|
}
|
|
|
|
.network-progress {
|
|
height: 8px;
|
|
background: rgba(25, 55, 95, 0.6);
|
|
border-radius: 4px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.network-progress-bar {
|
|
height: 100%;
|
|
border-radius: 4px;
|
|
transition: width 0.5s ease;
|
|
}
|
|
|
|
/* 项目监控样式 */
|
|
.project-monitor {
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.project-item {
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.project-label {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin-bottom: 5px;
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.project-name {
|
|
color: #a0d2ff;
|
|
}
|
|
|
|
.project-value {
|
|
color: #4fc3f7;
|
|
}
|
|
|
|
.project-progress {
|
|
height: 8px;
|
|
background: rgba(25, 55, 95, 0.6);
|
|
border-radius: 4px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.project-progress-bar {
|
|
height: 100%;
|
|
border-radius: 4px;
|
|
transition: width 0.5s ease;
|
|
}
|
|
|
|
.mars3d-popup-background {
|
|
background: var(--mars-base-bg, rgba(16, 36, 62, 0.85)) !important;
|
|
}
|
|
|
|
/* 区域选择器样式 */
|
|
.region-selector {
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.region-selector select {
|
|
width: 100%;
|
|
padding: 8px 12px;
|
|
background: rgba(25, 55, 95, 0.6);
|
|
border: 1px solid rgba(79, 195, 247, 0.5);
|
|
border-radius: 4px;
|
|
color: #e0f0ff;
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.region-selector select:focus {
|
|
outline: none;
|
|
border-color: #4fc3f7;
|
|
}
|
|
|
|
.region-selector label {
|
|
display: block;
|
|
margin-bottom: 5px;
|
|
font-size: 0.9rem;
|
|
color: #a0d2ff;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<!-- 顶部标题栏 -->
|
|
<div class="topDiv">
|
|
<div class="left">
|
|
<span id="current-date">2025年9月17日</span>
|
|
<span id="current-time">15:18:00</span>
|
|
</div>
|
|
<div class="center">中国敏感海域问题事件热点图</div>
|
|
<div class="right">
|
|
<img src="/common/images/logo_gt.png" alt="" />
|
|
</div>
|
|
</div>
|
|
<div class="container">
|
|
<!-- 地球容器 -->
|
|
<div class="earth-container">
|
|
<div id="leafletMap"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
// 全局变量
|
|
let map;
|
|
let markerCluster;
|
|
let isSimulationRunning = true;
|
|
let waterQualityChart;
|
|
let oxygenChart;
|
|
let chlorophyllChart;
|
|
|
|
document.addEventListener('DOMContentLoaded', function () {
|
|
initDateTime();
|
|
initMap();
|
|
});
|
|
|
|
// 初始化日期时间
|
|
function initDateTime() {
|
|
function updateDateTime() {
|
|
const now = new Date();
|
|
const dateStr = now.getFullYear() + '年' +
|
|
(now.getMonth() + 1) + '月' +
|
|
now.getDate() + '日';
|
|
const timeStr = now.toTimeString().substr(0, 8);
|
|
|
|
document.getElementById('current-date').textContent = dateStr;
|
|
document.getElementById('current-time').textContent = timeStr;
|
|
}
|
|
|
|
updateDateTime();
|
|
setInterval(updateDateTime, 1000);
|
|
}
|
|
|
|
// 初始化地图
|
|
function initMap() {
|
|
try {
|
|
// 创建 Leaflet 地图
|
|
map = L.map('leafletMap', {
|
|
center: [15.0, 110.0], // 南海区域中心
|
|
zoom: 5,
|
|
minZoom: 3,
|
|
maxZoom: 18,
|
|
attributionControl: false
|
|
});
|
|
|
|
const tdtImg = L.tileLayer(
|
|
'http://t{s}.tianditu.gov.cn/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=cd7516c53e2e5bee9bad989b63db6ce4',
|
|
{ attribution: '天地图影像', subdomains: [0, 1, 2, 3, 4, 5, 6, 7] },
|
|
)
|
|
|
|
const tdtCia = L.tileLayer(
|
|
'http://t{s}.tianditu.gov.cn/DataServer?T=cia_w&x={x}&y={y}&l={z}&tk=cd7516c53e2e5bee9bad989b63db6ce4',
|
|
{ attribution: '天地图影像注记', subdomains: [0, 1, 2, 3, 4, 5, 6, 7] },
|
|
)
|
|
|
|
const defaultBaseLayer = L.layerGroup([tdtImg, tdtCia])
|
|
defaultBaseLayer.addTo(map)
|
|
|
|
|
|
// 创建标记聚合组
|
|
markerCluster = L.markerClusterGroup({
|
|
chunkedLoading: true,
|
|
maxClusterRadius: 30,
|
|
spiderfyOnMaxZoom: true,
|
|
showCoverageOnHover: true,
|
|
zoomToBoundsOnClick: true
|
|
});
|
|
|
|
// 将聚合组添加到地图
|
|
map.addLayer(markerCluster);
|
|
setTimeout(() => {
|
|
loadEventData();
|
|
addLegend();
|
|
}, 1000);
|
|
|
|
} catch (error) {
|
|
console.error('初始化 Leaflet 地图时出错:', error);
|
|
}
|
|
}
|
|
|
|
// 加载事件数据
|
|
async function loadEventData() {
|
|
try {
|
|
console.log('开始加载南海事件数据...');
|
|
|
|
// 定义文件和对应的颜色
|
|
const fileColors = {
|
|
'./data/jiison/1_lan.json': '#0000FF', // 蓝色
|
|
'./data/jiison/2_hong.json': '#FF0000', // 红色
|
|
'./data/jiison/3_cheng.json': '#FFA500', // 橙色
|
|
'./data/jiison/4_lv.json': '#008000', // 绿色
|
|
'./data/jiison/5_huang.json': '#FFFF00', // 黄色
|
|
'./data/jiison/6_zi.json': '#800080', // 紫色
|
|
'./data/jiison/7_zong.json': '#00FFFF' // 青色
|
|
};
|
|
|
|
let allPoints = [];
|
|
|
|
// 加载所有JSON文件
|
|
for (const [file, color] of Object.entries(fileColors)) {
|
|
try {
|
|
const response = await fetch(file);
|
|
const eventData = await response.json();
|
|
|
|
eventData.forEach(item => {
|
|
allPoints.push({
|
|
lng: item.经度,
|
|
lat: item.纬度,
|
|
value: 1.0,
|
|
color: color,
|
|
attr: {
|
|
事件: item.事件,
|
|
时间: item.时间,
|
|
经度: item.经度,
|
|
纬度: item.纬度
|
|
}
|
|
});
|
|
});
|
|
|
|
console.log(`加载 ${file} 完成，数据点数量:`, eventData.length);
|
|
} catch (fileError) {
|
|
console.error(`加载文件 ${file} 时出错:`, fileError);
|
|
}
|
|
}
|
|
|
|
console.log('总生成的事件数据点:', allPoints.length);
|
|
|
|
// 清除现有的标记
|
|
markerCluster.clearLayers();
|
|
|
|
// 为每个点创建标记
|
|
allPoints.forEach(point => {
|
|
// 创建自定义图标
|
|
const customIcon = L.divIcon({
|
|
className: 'custom-marker',
|
|
html: `<div style="background-color: ${point.color}; width: 12px; height: 12px; border-radius: 50%; border: 2px solid white; box-shadow: 0 0 5px rgba(0,0,0,0.5);"></div>`,
|
|
iconSize: [16, 16],
|
|
iconAnchor: [8, 8]
|
|
});
|
|
|
|
// 创建标记
|
|
const marker = L.marker([point.lat, point.lng], { icon: customIcon });
|
|
|
|
// 添加弹出窗口
|
|
marker.bindPopup(`
|
|
<div style="padding: 10px">
|
|
<h3 style="margin:0 0 10px 0;color:#4fc3f7">${point.attr.事件}</h3>
|
|
<p style="margin:5px 0"><strong>时间:</strong> ${point.attr.时间}</p>
|
|
<p style="margin:5px 0"><strong>纬度:</strong> ${point.attr.纬度}</p>
|
|
<p style="margin:5px 0"><strong>经度:</strong> ${point.attr.经度}</p>
|
|
</div>
|
|
`);
|
|
|
|
// 将标记添加到聚合组
|
|
markerCluster.addLayer(marker);
|
|
});
|
|
|
|
console.log('事件点图层创建完成，聚合功能已启用');
|
|
|
|
} catch (error) {
|
|
console.error('加载南海事件数据时出错:', error);
|
|
}
|
|
}
|
|
|
|
// 添加图例
|
|
function addLegend() {
|
|
const legend = document.createElement('div');
|
|
legend.style.cssText = `
|
|
position: absolute;
|
|
bottom: 20px;
|
|
left: 20px;
|
|
background: rgba(16, 36, 62, 0.85);
|
|
border: 1px solid rgba(64, 156, 255, 0.3);
|
|
border-radius: 8px;
|
|
padding: 15px;
|
|
color: #e0f0ff;
|
|
z-index: 1000;
|
|
max-width: 250px;
|
|
backdrop-filter: blur(5px);
|
|
`;
|
|
|
|
legend.innerHTML = `
|
|
<h3 style="margin: 0 0 10px 0; color: #4fc3f7; font-size: 14px;">事件类型图例</h3>
|
|
<div style="display: flex; align-items: center; margin-bottom: 8px;">
|
|
<div style="width: 12px; height: 12px; background-color: #0000FF; border-radius: 50%; margin-right: 8px;"></div>
|
|
<span style="font-size: 12px;">领海争议</span>
|
|
</div>
|
|
<div style="display: flex; align-items: center; margin-bottom: 8px;">
|
|
<div style="width: 12px; height: 12px; background-color: #FF0000; border-radius: 50%; margin-right: 8px;"></div>
|
|
<span style="font-size: 12px;">边境冲突</span>
|
|
</div>
|
|
<div style="display: flex; align-items: center; margin-bottom: 8px;">
|
|
<div style="width: 12px; height: 12px; background-color: #FFA500; border-radius: 50%; margin-right: 8px;"></div>
|
|
<span style="font-size: 12px;">低空与敌对冲突</span>
|
|
</div>
|
|
<div style="display: flex; align-items: center; margin-bottom: 8px;">
|
|
<div style="width: 12px; height: 12px; background-color: #008000; border-radius: 50%; margin-right: 8px;"></div>
|
|
<span style="font-size: 12px;">两岸海域纠纷</span>
|
|
</div>
|
|
<div style="display: flex; align-items: center; margin-bottom: 8px;">
|
|
<div style="width: 12px; height: 12px; background-color: #FFFF00; border-radius: 50%; margin-right: 8px;"></div>
|
|
<span style="font-size: 12px;">内部渔船管理与执法</span>
|
|
</div>
|
|
<div style="display: flex; align-items: center; margin-bottom: 8px;">
|
|
<div style="width: 12px; height: 12px; background-color: #800080; border-radius: 50%; margin-right: 8px;"></div>
|
|
<span style="font-size: 12px;">渔船打捞境外设备</span>
|
|
</div>
|
|
<div style="display: flex; align-items: center;">
|
|
<div style="width: 12px; height: 12px; background-color: #00FFFF; border-radius: 50%; margin-right: 8px;"></div>
|
|
<span style="font-size: 12px;">生态安全环境</span>
|
|
</div>
|
|
`;
|
|
|
|
document.querySelector('.earth-container').appendChild(legend);
|
|
}
|
|
</script>
|
|
</body>
|
|
|
|
</html> |