liubiao/dyf-vue-ui
1
0
Fork 0
forked from dyf/dyf-vue-ui
Code Pull Requests Activity

merge upstream

Browse Source
This commit is contained in:
liubiao
2025-09-29 15:28:02 +08:00
parent 25aa857758 6454933d59
commit 28aa794e3f
16 changed files with 100 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/homeIndex/card.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 45 KiB

After

Width:  |  Height:  |  Size: 21 KiB

BIN
src/assets/homeIndex/card1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 29 KiB

BIN
src/assets/homeIndex/card2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 29 KiB

BIN
src/assets/homeIndex/card3.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 33 KiB

BIN
src/assets/homeIndex/card4.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 30 KiB

BIN
src/assets/homeIndex/card5.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 30 KiB

BIN
src/assets/homeIndex/card6.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 30 KiB

BIN
src/assets/homeIndex/card7.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 36 KiB

BIN
src/assets/homeIndex/select.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

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>

18
src/views/homeIndex/components/MapComponent.vue
View File

@ -520,6 +520,10 @@ onMounted(() => {
width: 100vw;
height: 100vh;
}
.el-icon{
color: #007EFF;
font-size: 1vw;
}
.map {
width: 100%;
@ -545,19 +549,20 @@ onMounted(() => {
.topTool .form-item {
width: calc(calc(100% - 160px) / 3);
height: 45px;
height: 5vh;
border: none;
}
:deep .el-select__wrapper,
:deep .el-input__wrapper {
border: none;
height: 45px;
height: 7vh;
}
:deep .el-select__wrapper,
:deep .el-input__wrapper,
.topTool .form-item {
background: linear-gradient(to bottom, #007eff59 0%, /* 顶部红色 */ #00efed59 50%, /* 中间蓝色 */ #1d5df459 100% /* 底部红色 */);
background: url(@/assets/homeIndex/select.png) no-repeat;
}
.topTool .form {
width: 43%;
@ -605,7 +610,7 @@ onMounted(() => {
border: none;
box-sizing: border-box;
padding: 0px 10px;
line-height: 45px;
line-height: 4vh;
outline: none;
font-family: MicrosoftYaHei;
font-size: 15px;
@ -616,13 +621,14 @@ onMounted(() => {
flex-direction: row;
flex-wrap: nowrap;
align-content: center;
align-items: center;
justify-content: space-between;
}
.topTool .form-item input::placeholder {
font-family: MicrosoftYaHei;
font-size: 15px;
color: #deefff;
line-height: 4vh;
}
.topTool .form-item input:focus {
outline: none;
@ -632,7 +638,7 @@ onMounted(() => {
.topTool .form-item .vertiLine {
width: 6px;
height: 100%;
background: radial-gradient(0% 0% at 0% 0%, #00d6ef 0%, #007eff 100%);
// background: radial-gradient(0% 0% at 0% 0%, #00d6ef 0%, #007eff 100%);
}
.topTool .form-item .ul {

24
src/views/homeIndex/components/RealTimeAlarm.vue
View File

@ -29,7 +29,7 @@
</template>
<script setup>
import { getRealtimeAlarm } from '@/api/homeIndex/index';
let alarmTimer = null;
// 模拟报警数据
const alarmData = ref([
]);
@ -38,17 +38,32 @@ const getRealtimeAlarmData = () => {
alarmData.value = res.data;
});
}
const startAlarmTimer = () => {
if (alarmTimer) {
clearInterval(alarmTimer);
}
getRealtimeAlarmData();
alarmTimer = setInterval(getRealtimeAlarmData, 40 * 1000);
};
const clearAlarmTimer = () => {
if (alarmTimer) {
clearInterval(alarmTimer);
alarmTimer = null;
}
};
const tableBody = ref(null);
onMounted(() => {
getRealtimeAlarmData()
startAlarmTimer();
// 启动滚动动画
if (tableBody.value) {
tableBody.value.style.animationName = 'scroll';
tableBody.value.style.animationIterationCount = 'infinite';
}
});
onUnmounted(() => {
clearAlarmTimer(); // 组件销毁时清除定时器
})
</script>
<style scoped lang="scss">
.alarm-table-container {
@ -56,7 +71,7 @@ onMounted(() => {
border-radius: 4px;
overflow: hidden;
margin-top: 4vh;
padding: 1.5vw;
padding: 1vw 0vw;
}
.alarm-table-header {
@ -64,6 +79,7 @@ onMounted(() => {
color: #00C0FF;
border-bottom: 1px dashed rgba(100, 150, 200, 0.3);
font-size: 0.8vw;
background-color: #0C2644;
}
.header-item {

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;
}
/* 模块内容 */