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

数据大屏图表接口对接

Browse Source
This commit is contained in:
fengerli
2025-09-28 15:28:15 +08:00
parent c4d00bfdc3
commit b202de76ec
15 changed files with 755 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
src/views/homeIndex/components/AlarmOverview.vue
View File

@ -3,20 +3,20 @@
<div class="alarmOvery">
<div class="alarm">
<div class="alarmIMG">
<div class="alarmNum">1000 <span>个</span></div>
<div class="alarmNum">{{ alarmOverview.activeAlarms || '0' }} <span>个</span></div>
</div>
<div class="alarmText">正在报警</div>
</div>
<div class="alarm">
<div class="alarmIMG">
<div class="alarmNum">1000 <span>个</span></div>
<div class="alarmNum">{{ alarmOverview.totalAlarms || '0' }} <span>个</span></div>
</div>
<div class="alarmText">报警总数</div>
</div>
<div class="alarm">
<div class="alarmIMG">
<div class="alarmNum">1000 <span>个</span></div>
<div class="alarmNum">{{ alarmOverview.processedAlarms || '0' }} <span>个</span></div>
</div>
<div class="alarmText">已处理</div>
</div>
@ -24,6 +24,14 @@
</div>
</template>
<script setup lang="ts">
const props = defineProps({
alarmOverview: {
type: Object,
required: false,
default: () => ({}),
},
});
</script>
<style scoped lang="scss">
@ -34,7 +42,7 @@
align-items: center;
margin-top: 7.5vh;
text-align: center;
font-size:0.8vw;
font-size: 0.7vw;
color: #DEEFFF;
padding: 1.5vw;
}
@ -47,11 +55,27 @@
position: relative;
}
.alarmText{
.alarmText {
padding-top: 1.5vh;
}
.alarmNum{
.alarmNum {
line-height: 12vh;
color: radial-gradient(0deg, #F63838 0%, #FFFFFF 100%);
display: inline-block;
position: relative;
background: radial-gradient(circle at center, #F63838 0%, #FFFFFF 49%);
/* 兼容写法 */
-webkit-background-clip: text;
background-clip: text;
color: transparent;
z-index: 1;
overflow: visible;
font-size: 1.3vw;
font-weight: 600;
}
.alarmNum span {
font-size: 0.6vw;
}
</style>