dyf/dyf-vue-ui
1
0
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

修改大屏。地图主题色，模块加黑色蒙版图片

Browse Source
This commit is contained in:
fengerli
2025-09-29 08:47:59 +08:00
parent 277bf123ea
commit 4288867acf
6 changed files with 85 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

129
src/views/homeIndex/index.vue
View File

@ -1,12 +1,15 @@
<template>
<div class="dashboard-container">
<!-- 顶部固定区域 -->
<div class="top-bar">
<div class="header-info">
<div>{{ currentTime }}</div>
<div class="top-fixed">
<div class="top-bar">
<div class="header-info">
<div>{{ currentTime }}</div>
</div>
</div>
</div>
<!-- 全屏地图区域（背景） -->
<div class="fullscreen-map">
<MapComponent></MapComponent>
@ -15,59 +18,66 @@
<!-- 悬浮模块容器 -->
<div class="floating-modules">
<!-- 左侧模块组 -->
<div class="left-modules">
<div class="module-card overview-card">
<div class="module-header">设备总览</div>
<div class="module-content">
<DeviceOverview />
<div class="left">
<div class="left-modules">
<div class="module-card overview-card">
<div class="module-header">设备总览</div>
<div class="module-content">
<DeviceOverview />
</div>
</div>
</div>
<div class="module-card">
<div class="module-header">设备类别</div>
<div class="module-content">
<DeviceCategory />
<div class="module-card">
<div class="module-header">设备类别</div>
<div class="module-content">
<DeviceCategory />
</div>
</div>
</div>
<div class="module-card">
<div class="module-header">设备使用频次</div>
<div class="module-content">
<DeviceUsage />
<div class="module-card">
<div class="module-header">设备使用频次</div>
<div class="module-content">
<DeviceUsage />
</div>
</div>
</div>
</div>
<!-- 右侧模块组 -->
<div class="right-modules">
<div class="module-card alarm-card">
<div class="module-header">报警数据</div>
<div class="module-content">
<AlarmOverview :alarmOverview="alarmOverview" />
</div>
</div>
<div class="right">
<div class="module-card">
<div class="module-header">报警事件</div>
<div class="module-content">
<AlarmEvent :alarmOverview="alarmOverview" />
</div>
</div>
<div class="module-card">
<div class="module-header">报警次数</div>
<div class="module-content">
<AlarmCount />
<div class="right-modules">
<div class="module-card alarm-card">
<div class="module-header">报警数据</div>
<div class="module-content">
<AlarmOverview :alarmOverview="alarmOverview" />
</div>
</div>
<div class="module-card">
<div class="module-header">报警事件</div>
<div class="module-content">
<AlarmEvent :alarmOverview="alarmOverview" />
</div>
</div>
<div class="module-card">
<div class="module-header">报警次数</div>
<div class="module-content">
<AlarmCount />
</div>
</div>
</div>
</div>
<!-- 底部中间模块 -->
<div class="bottom-middle-module">
<div class="module-card realtime-card">
<div class="module-header realtime-header">实时报警信息</div>
<div class="module-content">
<RealTimeAlarm />
<div class="bottom">
<div class="bottom-middle-module">
<div class="module-card realtime-card">
<div class="module-header realtime-header">实时报警信息</div>
<div class="module-content">
<RealTimeAlarm />
</div>
</div>
</div>
</div>
@ -111,7 +121,7 @@ const getData = async () => {
}
getData()
onMounted(() => {
})
@ -125,6 +135,15 @@ onMounted(() => {
overflow: hidden;
}
.top-fixed {
width: 100%;
height: 13vh;
background: url(@/assets/homeIndex/top.png) no-repeat;
background-size: 100% 100%;
z-index: 11;
position: absolute;
}
/* 顶部栏 */
.top-bar {
position: relative;
@ -153,7 +172,6 @@ onMounted(() => {
left: 0;
width: 100%;
height: 100%;
background: radial-gradient(0% 0% at 0% 0%, #091B2D 0%, #0C2644 100%);
display: flex;
align-items: center;
justify-content: center;
@ -172,6 +190,23 @@ onMounted(() => {
pointer-events: none;
}
.left {
position: absolute;
top: 0;
left: 0;
width: 30vw;
height: 100vh;
background: url(@/assets/homeIndex/left.png) no-repeat;
}
.right {
position: absolute;
top: 0;
right: 0;
width: 30vw;
height: 100vh;
background: url(@/assets/homeIndex/right.png) no-repeat;
}
/* 左侧模块组 */
.left-modules {
position: absolute;
@ -179,9 +214,10 @@ onMounted(() => {
left: 0.5vw;
display: flex;
flex-direction: column;
width: 27vw;
width: 27.2vw;
height: calc(100vh - 9vh);
pointer-events: auto;
}
/* 右侧模块组 */
@ -191,7 +227,7 @@ onMounted(() => {
right: 0.5vw;
display: flex;
flex-direction: column;
width: 27vw;
width: 27.2vw;
height: calc(100vh - 9vh);
pointer-events: auto;
}
@ -205,6 +241,8 @@ onMounted(() => {
width: 44vw;
height: calc(39vh - 9vh);
pointer-events: auto;
background: url(@/assets/homeIndex/bottom.png) no-repeat;
background-size: 100% 100%;
}
/* 模块卡片样式 */
@ -218,6 +256,7 @@ onMounted(() => {
overflow: hidden;
display: flex;
flex-direction: column;
border-radius: 10px;
}
/* 模块标题 */