taoge_xiaodi/maintenance_system
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(报警统计): 添加报警统计展示组件及样式

Browse Source 
添加报警统计模块，包含全部报警、未处理、已处理、事故、严重和普通报警的统计展示
移除旧图片文件并添加新图片资源
优化字体大小响应式调整逻辑
This commit is contained in:
re-JZzzz
2025-12-23 10:14:26 +08:00
parent a15b795529
commit c726ebbb36
2 changed files with 110 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

0
src/assets/projectLarge/orang.png → src/assets/projectLarge/orange.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 17 KiB

After

Width:  |  Height:  |  Size: 17 KiB

150
src/views/omScreen/components/rightPage.vue
View File

@ -7,16 +7,47 @@
</div>
</div>
<!-- -->
<div class="data_box">
<div class="bj_box">
<Title title="报警统计" />
<div class="warnbox">
<div class="warn_total">
<div class="warn_num">17<span class="unit"> 条</span></div>
<img src="@/assets/projectLarge/warn.png" alt="">
<div class="warn_text">全部报警</div>
</div>
<div class="warn_item color1">
<div class="warn_num">5<span class="unit"> 条</span></div>
<img src="@/assets/projectLarge/yellow.png" alt="">
<div class="warn_status">未处理</div>
</div>
<div class="warn_item color2">
<div class="warn_num">12<span class="unit"> 条</span></div>
<img src="@/assets/projectLarge/green.png" alt="">
<div class="warn_status">已处理</div>
</div>
<div class="warn_item color3">
<div class="warn_num">17<span class="unit"> 条</span></div>
<img src="@/assets/projectLarge/red.png" alt="">
<div class="warn_status">事故</div>
</div>
<div class="warn_item color4">
<div class="warn_num">0<span class="unit"> 条</span></div>
<img src="@/assets/projectLarge/orange.png" alt="">
<div class="warn_status">严重</div>
</div>
<div class="warn_item color5">
<div class="warn_num">0<span class="unit"> 条</span></div>
<img src="@/assets/projectLarge/primary.png" alt="">
<div class="warn_status">普通</div>
</div>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import EchartBoxTwo from '@/components/EchartBox/index.vue';
import { option1} from './options';
import { option1 } from './options';
import Title from './title.vue';
const option_fdssgl = ref(option1);
@ -32,10 +63,8 @@ const handleWheel = (event: WheelEvent) => {
const reszieFont = () => {
const fontSize = Math.sqrt(window.innerWidth) / 3;
option_fdssgl.value.xAxis.axisLabel.fontSize = fontSize;
option_fdssgl.value.yAxis.axisLabel.fontSize = fontSize;
option_fdssgl.value.legend.textStyle.fontSize = fontSize;
}
@ -57,6 +86,31 @@ $background-color: rgba(17, 25, 24, 0.3);
$vm_base: 1920;
$vh_base: 1080;
.color1 {
color: rgba(255, 195, 0, 1);
text-shadow: 0px 1.24px 6.21px rgba(255, 195, 0, 1);
}
.color2 {
color: rgba(67, 207, 124, 1);
text-shadow: 0px 1.24px 6.21px rgba(67, 207, 124, 1);
}
.color3 {
color: rgba(212, 48, 48, 1);
text-shadow: 0px 1.24px 6.21px rgba(212, 48, 48, 1);
}
.color4 {
color: rgba(255, 141, 26, 1);
text-shadow: 0px 1.24px 6.21px rgba(255, 141, 26, 1);
}
.color5 {
color: rgba(197, 252, 244, 1);
text-shadow: 0px 1.24px 6.21px rgba(0, 190, 247, 1);
}
// 计算vw
@function vw($px) {
@return calc(($px / $vm_base) * 100vw);
@ -85,6 +139,8 @@ $vh_base: 1080;
background: $background-color;
}
.data_box {
display: flex;
flex-direction: column;
@ -99,59 +155,61 @@ $vh_base: 1080;
}
}
.error_tip_box {
.bj_box {
width: 100%;
height: calc(50vh - vh(25));
background-color: $background-color;
.warnbox {
width: 100%;
height: vh(120);
display: flex;
align-items: center;
justify-content: center;
gap: vw(5);
margin-right: vw(8);
text-align: center;
margin-top: vh(20);
.warn_total {
color: rgba(0, 255, 238, 1);
font-size: vh(20);
font-family: ue_title;
.unit {
font-size: vh(14);
}
img {
width: vw(20);
height: vh(20);
width: vw(100);
height: vh(80);
}
}
.error_tip {
height: vh(26);
width: vw(81);
border-radius: vw(13);
background: rgba(0, 255, 238, 0.12);
color: rgba(0, 255, 238, 1);
font-size: vw(10);
.warn_item {
text-align: center;
line-height: vh(26);
}
}
width: vw(74);
height: vh(104);
font-family: SourceHanSansCN-Normal;
.error_list {
flex: 1;
display: flex;
gap: vw(10);
margin: vh(10) vw(15);
overflow: hidden;
flex-wrap: nowrap;
cursor: grabbing;
.error_item {
flex: 0 0 auto;
width: vw(300);
padding: vh(10) vw(10);
color: #fff;
background: rgba(255, 255, 255, 0.09);
border: 1px solid rgba(0, 255, 238, 0.5);
border-radius: vw(8);
.item_info {
display: flex;
align-items: center;
justify-content: space-between;
font-size: vw(14);
.warn_num {
font-size: vh(20);
font-weight: bold;
margin-bottom: vh(10);
color: rgba(255, 255, 255, 1);
margin-bottom: vh(-20);
.unit {
font-size: vh(14);
}
}
.item_headline {
font-size: vw(16);
.warn_status {
font-size: vh(12);
margin-top: vh(-10);
}
img {
width: vw(64);
height: vh(64);
}
}
}
}