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 11:08:17 +08:00
parent 52d90d490b
commit a3be91c6ac
13 changed files with 68 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/views/controlCenter/controlPanel/index.vue
View File

@ -49,6 +49,7 @@
<el-select v-model="queryParams.onlineStatus" placeholder="设备状态" clearable>
<el-option label="在线" value="1"></el-option>
<el-option label="离线" value="0"></el-option>
<el-option label="故障" value="2"></el-option>
</el-select>
</el-form-item>
<el-form-item label="设备MAC" prop="deviceMac">
@ -109,6 +110,7 @@
<template #default="scope">
<div class="normal green" v-if="scope.row.onlineStatus == 1">在线</div>
<div class="normal red" v-if="scope.row.onlineStatus == 0">离线</div>
<div class="normal red" v-if="scope.row.onlineStatus == 2">故障</div>
</template>
</el-table-column>
<el-table-column label="电量" align="center" prop="battery">
@ -118,7 +120,7 @@
'battery-yellow': Number(scope.row.battery) >= 20 && Number(scope.row.battery) < 80,
'battery-green': Number(scope.row.battery) >= 80 && Number(scope.row.battery) <= 100
}">
{{ scope.row.battery || '0'}}%
{{ scope.row.battery || '0' }}%
</div>
</template>
</el-table-column>
@ -485,15 +487,17 @@ const forceAlarm = async () => {
</script>
<style lang="scss" scoped>
.p-2{
.p-2 {
background: rgba(247, 248, 252, 1);
min-height: 100vh;
box-sizing: border-box;
padding: 15px;
}
:deep .el-collapse{
border-top:none
:deep .el-collapse {
border-top: none
}
:deep .el-collapse-item__header {
display: none;
}

4
src/views/homeIndex/components/AlarmEvent.vue
View File

@ -130,11 +130,11 @@ onMounted(() => {
</script>
<style scoped lang="scss">
.vchartPage {
margin-top: 7.2vh;
margin-top:4.8vh;
}
.chartRef {
width: 100%;
height: 23vh;
height: 24.5vh;
}
</style>

8
src/views/homeIndex/components/DeviceCategory.vue
View File

@ -71,7 +71,7 @@ onMounted(() => {
0, 0, 0, 1,
[
{ offset: 0, color: 'rgba(0,166,255,1)' },
{ offset: 1, color: 'rgba(0,125,221, 0.6)' }
{ offset: 1, color: 'rgba(0,125,221, 0.3)' }
]
),
borderRadius: 4
@ -87,7 +87,7 @@ onMounted(() => {
0, 0, 0, 1,
[
{ offset: 0, color: 'rgba(232,69,37,1)' },
{ offset: 1, color: 'rgba(240,12,12, 0.6)' }
{ offset: 1, color: 'rgba(240,12,12, 0.3)' }
]
),
borderRadius: 4
@ -110,11 +110,11 @@ onMounted(() => {
</script>
<style scoped lang="scss">
.vchartPage {
margin-top: 7.8vh;
margin-top: 5.8vh;
}
.chartRef {
width: 100%;
height: 22vh;
height: 23.5vh;
}
</style>

4
src/views/homeIndex/components/DeviceUsage.vue
View File

@ -121,7 +121,7 @@ onMounted(() => {
<style scoped lang="scss">
.vchartPage {
margin-top: 7.8vh;
margin-top: 4.8vh;
position: relative; // 新增：确保按钮定位正确
}
@ -153,6 +153,6 @@ onMounted(() => {
.chartRef {
width: 100%;
height: 22vh;
height: 25vh;
}
</style>

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

@ -21,21 +21,21 @@
<div class="left">
<div class="left-modules">
<div class="module-card overview-card">
<div class="module-header">设备总览</div>
<!-- <div class="module-header">设备总览</div> -->
<div class="module-content">
<DeviceOverview />
</div>
</div>
<div class="module-card">
<div class="module-header">设备类别</div>
<!-- <div class="module-header">设备类别</div> -->
<div class="module-content">
<DeviceCategory />
</div>
</div>
<div class="module-card">
<div class="module-header">设备使用频次</div>
<!-- <div class="module-header">设备使用频次</div> -->
<div class="module-content">
<DeviceUsage />
</div>
@ -48,21 +48,21 @@
<div class="right-modules">
<div class="module-card alarm-card">
<div class="module-header">报警数据</div>
<!-- <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-header">报警事件</div> -->
<div class="module-content">
<AlarmEvent :alarmOverview="alarmOverview" />
</div>
</div>
<div class="module-card">
<div class="module-header">报警次数</div>
<!-- <div class="module-header">报警次数</div> -->
<div class="module-content">
<AlarmCount />
</div>
@ -74,7 +74,7 @@
<div class="bottom">
<div class="bottom-middle-module">
<div class="module-card realtime-card">
<div class="module-header realtime-header">实时报警信息</div>
<!-- <div class="module-header realtime-header">实时报警信息</div> -->
<div class="module-content">
<RealTimeAlarm />
</div>
@ -132,12 +132,12 @@ onMounted(() => {
width: 100vw;
height: 100vh;
position: relative;
overflow: hidden;
overflow: hidden;
}
.top-fixed {
width: 100%;
height: 13vh;
height:7vh;
background: url(@/assets/homeIndex/top.png) no-repeat;
background-size: 100% 100%;
z-index: 11;
@ -215,7 +215,7 @@ onMounted(() => {
display: flex;
flex-direction: column;
width: 27.2vw;
height: calc(100vh - 9vh);
height: calc(100vh - 8vh);
pointer-events: auto;
}
@ -228,7 +228,7 @@ onMounted(() => {
display: flex;
flex-direction: column;
width: 27.2vw;
height: calc(100vh - 9vh);
height: calc(100vh - 8vh);
pointer-events: auto;
}
@ -247,7 +247,7 @@ onMounted(() => {
/* 模块卡片样式 */
.module-card {
background: url(@/assets/homeIndex/card.png) no-repeat;
/* background: url(@/assets/homeIndex/card.png) no-repeat; */
position: relative;
background-size: 100% 100%;
width: 100%;
@ -257,24 +257,59 @@ onMounted(() => {
display: flex;
flex-direction: column;
border-radius: 10px;
margin-bottom: 1vh;
}
.left-modules .module-card:nth-of-type(1) {
background: url(@/assets/homeIndex/card1.png) no-repeat;
background-size: 100% 100%;
}
.left-modules .module-card:nth-of-type(2) {
background: url(@/assets/homeIndex/card2.png) no-repeat;
background-size: 100% 100%;
}
.left-modules .module-card:nth-of-type(3) {
background: url(@/assets/homeIndex/card3.png) no-repeat;
background-size: 100% 100%;
}
.right-modules .module-card:nth-of-type(1) {
background: url(@/assets/homeIndex/card4.png) no-repeat;
background-size: 100% 100%;
}
.right-modules .module-card:nth-of-type(2) {
background: url(@/assets/homeIndex/card5.png) no-repeat;
background-size: 100% 100%;
}
.right-modules .module-card:nth-of-type(3) {
background: url(@/assets/homeIndex/card6.png) no-repeat;
background-size: 100% 100%;
}
.bottom-middle-module .module-card:nth-of-type(1) {
background: url(@/assets/homeIndex/card7.png) no-repeat;
background-size: 100% 100%;
}
/* 模块标题 */
.module-header {
position: absolute;
font-size: 1.6vh;
color: #fff;
display: flex;
align-items: center;
flex-shrink: 0;
left: 5vh;
top: 3.2vh;
left:4.8vh;
top:1.5vh;
font-family: SourceHanSansCN, SourceHanSansCN;
font-weight: 500;
/* font-size: 18px; */
color: #F2F8FF;
text-shadow: 3px 0px 6px rgba(3,33,42,0.5);
}
.realtime-header {
left: 8vh;
top: 3.4vh;
left: 7.5vh;
top:1.5vh;
}
/* 模块内容 */