|
|
<!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://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
|
|
|
<!-- <script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/controls/OrbitControls.min.js"></script> -->
|
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.4.0/echarts.min.js"></script>
|
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts-gl/2.0.0/echarts-gl.min.js"></script>
|
|
|
<!-- 在 text.html 的 <head> 部分添加 CesiumJS 库引用 -->
|
|
|
<!-- <script src="https://cesium.com/downloads/cesiumjs/releases/1.100/Build/Cesium/Cesium.js"></script>
|
|
|
<link href="https://cesium.com/downloads/cesiumjs/releases/1.100/Build/Cesium/Widgets/widgets.css" rel="stylesheet"> -->
|
|
|
<style>
|
|
|
* {
|
|
|
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;
|
|
|
}
|
|
|
|
|
|
/* 新增顶部标题栏样式 */
|
|
|
.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;
|
|
|
/* background-color: rgba(12, 42, 73, 0.8); */
|
|
|
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: 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.3);
|
|
|
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.3);
|
|
|
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;
|
|
|
background: #0c1a2d;
|
|
|
}
|
|
|
|
|
|
#earthCanvas {
|
|
|
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);
|
|
|
}
|
|
|
</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="/assets/images/logo_gt.png" alt="" />
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="container">
|
|
|
<!-- <iframe src="http://127.0.0.1:5504/fengdian_index.html"
|
|
|
style="width: 100%; height: 100%; border: none;"
|
|
|
> -->
|
|
|
<iframe src="http://127.0.0.1:5504/fengdian_index_xg.html"
|
|
|
style="width: 100%; height: 100%; border: none;"
|
|
|
>
|
|
|
<p>您的浏览器不支持 iframe，请点击<a href="https://zhidao.baidu.com">这里</a>访问百度知道。</p>
|
|
|
</iframe>
|
|
|
</div>
|
|
|
|
|
|
<script>
|
|
|
|
|
|
|
|
|
|
|
|
// 初始化函数
|
|
|
function init() {
|
|
|
// 更新当前时间
|
|
|
updateCurrentTime();
|
|
|
setInterval(updateCurrentTime, 1000);
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
// 更新当前时间
|
|
|
function updateCurrentTime() {
|
|
|
const now = new Date();
|
|
|
const dateStr = `${now.getFullYear()}年${now.getMonth() + 1}月${now.getDate()}日`;
|
|
|
const timeStr = now.toLocaleTimeString('zh-CN', { hour12: false });
|
|
|
|
|
|
document.getElementById('current-date').textContent = dateStr;
|
|
|
document.getElementById('current-time').textContent = timeStr;
|
|
|
}
|
|
|
|
|
|
// 页面加载完成后初始化
|
|
|
window.addEventListener('DOMContentLoaded', init);
|
|
|
</script>
|
|
|
</body>
|
|
|
|
|
|
</html> |
