qdintc/intc-iot-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix:功能优化完善。

Browse Source
This commit is contained in:
tianyongbao
2025-12-10 21:07:24 +08:00
parent 9ef67e2cf8
commit 31ad43837d
3 changed files with 114 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
src/views/mapTest/allTrajectories.vue
View File

@@ -36,6 +36,11 @@
<div id="allTrajectoriesMap" class="trajectory-map" v-loading="loading" element-loading-text="加载轨迹数据中..."></div>
<!-- 系统名称 -->
<div class="system-title">
<h1>海面油膜微型跟踪定位装置轨迹跟踪查询系统</h1>
</div>
<!-- 移动端折叠按钮 - 独立于面板外部 -->
<div class="mobile-collapse-btn" @click="toggleDevicePanel">
<el-icon class="toggle-icon">
@@ -858,6 +863,30 @@ onBeforeUnmount(() => {
width: 100%;
}
// 系统名称样式
.system-title {
position: absolute;
top: 80px;
left: 350px; // 左侧留出设备面板的位置
z-index: 100;
background: linear-gradient(135deg, rgba(91, 143, 249, 0.95) 0%, rgba(123, 163, 255, 0.95) 100%);
padding: 16px 28px;
border-radius: 12px;
box-shadow: 0 4px 16px rgba(91, 143, 249, 0.4), 0 2px 8px rgba(0, 0, 0, 0.15);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
h1 {
margin: 0;
font-size: 20px;
font-weight: 700;
color: #fff;
letter-spacing: 1px;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
white-space: nowrap;
}
}
.device-panel {
position: absolute;
top: 80px;
@@ -1271,6 +1300,19 @@ onBeforeUnmount(() => {
// 移动端适配
@media (max-width: 768px) {
.all-trajectories-container {
// 系统名称移动端样式
.system-title {
top: 70px;
left: 10px;
right: 10px;
padding: 12px 16px;
h1 {
font-size: 14px;
letter-spacing: 0.5px;
}
}
// 显示移动端折叠按钮
.mobile-collapse-btn {
display: flex !important;

30
src/views/mapTest/index.vue
View File

@@ -1,6 +1,12 @@
<template>
<div class="map-test-container">
<div id="mapContainer" class="map-container" v-loading="loading" element-loading-text="加载设备数据中..."></div>
<!-- 系统名称 -->
<div class="system-title">
<h1>海面油膜微型跟踪定位装置轨迹跟踪查询系统</h1>
</div>
<div class="info-panel">
<h3>地图信息</h3>
<p>总点位数: {{ points.length }}</p>
@@ -494,6 +500,30 @@ onBeforeUnmount(() => {
height: 100%;
}
// 系统名称样式
.system-title {
position: absolute;
top: 20px;
left: 20px;
z-index: 100;
background: linear-gradient(135deg, rgba(91, 143, 249, 0.95) 0%, rgba(123, 163, 255, 0.95) 100%);
padding: 16px 28px;
border-radius: 12px;
box-shadow: 0 4px 16px rgba(91, 143, 249, 0.4), 0 2px 8px rgba(0, 0, 0, 0.15);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
h1 {
margin: 0;
font-size: 20px;
font-weight: 700;
color: #fff;
letter-spacing: 1px;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
white-space: nowrap;
}
}
.info-panel {
position: absolute;
top: 20px;

42
src/views/mapTest/trajectory.vue
View File

@@ -37,6 +37,11 @@
<div id="trajectoryMap" class="trajectory-map" v-loading="loading" element-loading-text="加载轨迹数据中..."></div>
<!-- 系统名称 -->
<div class="system-title">
<h1>海面油膜微型跟踪定位装置轨迹跟踪查询系统</h1>
</div>
<div class="info-panel">
<h3>轨迹信息</h3>
<p>轨迹点数: {{ trajectoryPoints.length }}</p>
@@ -590,6 +595,30 @@ onBeforeUnmount(() => {
width: 100%;
}
// 系统名称样式
.system-title {
position: absolute;
top: 80px;
left: 20px;
z-index: 100;
background: linear-gradient(135deg, rgba(91, 143, 249, 0.95) 0%, rgba(123, 163, 255, 0.95) 100%);
padding: 16px 28px;
border-radius: 12px;
box-shadow: 0 4px 16px rgba(91, 143, 249, 0.4), 0 2px 8px rgba(0, 0, 0, 0.15);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
h1 {
margin: 0;
font-size: 20px;
font-weight: 700;
color: #fff;
letter-spacing: 1px;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
white-space: nowrap;
}
}
.info-panel {
position: absolute;
top: 80px;
@@ -628,6 +657,19 @@ onBeforeUnmount(() => {
// 移动端适配
@media (max-width: 768px) {
.trajectory-container {
// 系统名称移动端样式
.system-title {
top: 70px;
left: 10px;
right: 10px;
padding: 12px 16px;
h1 {
font-size: 14px;
letter-spacing: 0.5px;
}
}
.header-bar {
padding: 12px;
gap: 8px;