diff --git a/src/api/index.js b/src/api/index.js index 1bd1c5b..6c2fd3b 100644 --- a/src/api/index.js +++ b/src/api/index.js @@ -111,6 +111,24 @@ export function getSoilSummry(data) { method: 'get', headers: {}, }) + } + // 危废车辆分页 + export function vehicleList(obj) { + return requests({ + url: '/zh-applet-admin/appmana/bigScreen/vehicleList', + method: 'post', + headers: {}, + data:obj + }) + } + // 危废车辆坐标 + export function gpsRecordPage(obj) { + return requests({ + url: '/zh-applet-admin/appmana/bigScreen/gpsRecordPage', + method: 'post', + headers: {}, + data:obj + }) } // 查询设备下各检测项的历史数据 export function survItemSummary(obj) { diff --git a/src/assets/css/index.css b/src/assets/css/index.css index bb3cbe5..fe24a06 100644 --- a/src/assets/css/index.css +++ b/src/assets/css/index.css @@ -909,4 +909,205 @@ } .amap-copyright { opacity:0; -} \ No newline at end of file +} + +/* 危废车辆列表 */ +/* 下拉菜单容器 */ +.vehicle-dropdown-dark { + position: absolute; + z-index: 9; + top: 100px; + left: 24%; +} + +/* 按钮样式 - 暗色科技风格 */ +.vehicle-dropdown-btn-dark { + background: rgba(0, 40, 80, 0.8) !important; + border: 1px solid #008cff !important; + border-radius: 4px !important; + padding: 12px 20px !important; + color: #00d4ff !important; + font-weight: 500; + backdrop-filter: blur(10px); + box-shadow: 0 0 20px rgba(0, 212, 255, 0.2); + letter-spacing: 1px; + transition: all 0.3s ease; +} + +.vehicle-dropdown-btn-dark:hover { + background: rgba(0, 212, 255, 0.15) !important; + box-shadow: 0 0 30px rgba(0, 212, 255, 0.4) !important; + border-color: #00d4ff !important; +} + +.vehicle-dropdown-btn-dark i { + margin: 0 5px; +} + +/* 下拉菜单样式 */ +.vehicle-dropdown-menu-dark { + background: rgba(0, 20, 40, 0.95) !important; + backdrop-filter: blur(10px); + border: 1px solid rgba(0, 212, 255, 0.3) !important; + border-radius: 4px !important; + padding: 5px 0 !important; + box-shadow: 0 0 40px rgba(0, 212, 255, 0.1) !important; +} + +/* 下拉菜单项样式 */ +.vehicle-dropdown-item-dark { + color: #8bb4d0 !important; + padding: 0px 24px !important; + border-bottom: 1px solid rgba(0, 212, 255, 0.05) !important; + transition: all 0.3s ease !important; + font-size: 14px !important; + display: flex !important; + align-items: center !important; + justify-content: space-between !important; + cursor: pointer; +} + +.vehicle-dropdown-item-dark:last-child { + border-bottom: none !important; +} + +.vehicle-dropdown-item-dark:hover { + background: rgba(0, 212, 255, 0.1) !important; + color: #00d4ff !important; + padding-left: 30px !important; +} + +/* 圆点指示器 */ +.vehicle-dot-dark { + display: inline-block; + width: 6px; + height: 6px; + background: #00d4ff; + border-radius: 50%; + margin-right: 10px; + flex-shrink: 0; + box-shadow: 0 0 10px rgba(0, 212, 255, 0.5); + transition: all 0.3s ease; +} + +.vehicle-dropdown-item-dark:hover .vehicle-dot-dark { + box-shadow: 0 0 20px rgba(0, 212, 255, 0.8); + transform: scale(1.2); +} + +/* 序号标签 */ +.vehicle-number-dark { + background: rgba(0, 212, 255, 0.1); + padding: 2px 8px; + border-radius: 10px; + font-size: 12px; + color: rgba(0, 212, 255, 0.5); + transition: all 0.3s ease; + flex-shrink: 0; + margin-left: 10px; +} + +.vehicle-dropdown-item-dark:hover .vehicle-number-dark { + background: rgba(0, 212, 255, 0.2); + color: #00d4ff; +} + +/* 响应式调整 */ +@media screen and (max-width: 768px) { + .vehicle-dropdown-dark { + top: 80px; + left: 15%; + } + + .vehicle-dropdown-btn-dark { + padding: 6px 15px !important; + font-size: 14px; + } + + .vehicle-dropdown-item-dark { + padding: 8px 16px !important; + font-size: 13px !important; + } +} + +/* 动画效果 */ +@keyframes glowPulse { + 0% { + box-shadow: 0 0 20px rgba(0, 212, 255, 0.2); + } + 50% { + box-shadow: 0 0 40px rgba(0, 212, 255, 0.4); + } + 100% { + box-shadow: 0 0 20px rgba(0, 212, 255, 0.2); + } +} + +.vehicle-dropdown-btn-dark { + animation: glowPulse 3s infinite; +} + +.vehicle-dropdown-btn-dark:hover { + animation: none; +} +/* 额外炫酷效果 - 鼠标悬停时的光晕动画 */ +.vehicle-dropdown-item-dark::before { + content: ''; + position: absolute; + left: 0; + top: 0; + width: 3px; + height: 100%; + background: #00d4ff; + transform: scaleY(0); + transition: transform 0.3s ease; +} + +.vehicle-dropdown-item-dark:hover::before { + transform: scaleY(1); +} + +.vehicle-dropdown-item-dark { + position: relative; + overflow: hidden; +} + +/* 悬停时文字发光效果 */ +.vehicle-dropdown-item-dark:hover { + text-shadow: 0 0 10px rgba(0, 212, 255, 0.5); +} + +/* 点击波纹效果 */ +.vehicle-dropdown-item-dark:active { + transform: scale(0.98); +} +/* ==================== 信息窗口样式(深色科技风) ==================== */ +:deep(.amap-info-content) { + background: transparent !important; + padding: 0 !important; +} + +:deep(.amap-info-sharp) { + display: none !important; +} + +:deep(.amap-info-close) { + color: #00d4ff !important; + background: rgba(0, 20, 40, 0.8) !important; + border-radius: 50% !important; + width: 28px !important; + height: 28px !important; + line-height: 28px !important; + text-align: center !important; + right: 8px !important; + top: 8px !important; + border: 1px solid rgba(0, 212, 255, 0.3) !important; + font-size: 16px !important; +} + +:deep(.amap-info-close:hover) { + background: rgba(255, 69, 0, 0.2) !important; + color: #FF4500 !important; + border-color: #FF4500 !important; +} +/* 危废车辆列表完成 */ \ No newline at end of file diff --git a/src/pages/Home/index.vue b/src/pages/Home/index.vue index 8b62f59..4fef2df 100644 --- a/src/pages/Home/index.vue +++ b/src/pages/Home/index.vue @@ -51,10 +51,9 @@ v-if="mapTypeFlag==true"> - -
+ @@ -113,15 +112,6 @@ :to="Number(stationCount0)" :key="stationCount0" duration="3000">个 - - - - - - - - -
@@ -165,17 +155,17 @@
- - {{ value.infoName }} - + + {{ value.infoName }} +
  • {{ ite.detailCode }} - - {{ ite.detailValue2 }} - + {{ ite.detailValue2 }} +
@@ -185,7 +175,8 @@
- + +
@@ -208,6 +199,7 @@ 微功率雷达监测
+ - + + +
@@ -416,23 +392,13 @@ 监测指标
- {{ item.name }} -
+
@@ -461,17 +427,28 @@
- - - - 危废车辆 + + + + + 危废车辆 ({{ vehicleList.length }}) + - - 危废车辆1 - 危废车辆2 - 危废车辆3 - 危废车辆4 - 危废车辆5 + + + + + {{ item.veNotes || '未知车辆' }} + @@ -481,7 +458,6 @@ - + +