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

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

@ -7,16 +7,47 @@
</div> </div>
</div> </div>
<!-- --> <!-- -->
<div class="data_box"> <div class="bj_box">
<Title title="报警统计" /> <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>
</div> </div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import EchartBoxTwo from '@/components/EchartBox/index.vue'; import EchartBoxTwo from '@/components/EchartBox/index.vue';
import { option1} from './options'; import { option1 } from './options';
import Title from './title.vue'; import Title from './title.vue';
const option_fdssgl = ref(option1); const option_fdssgl = ref(option1);
@ -32,11 +63,9 @@ const handleWheel = (event: WheelEvent) => {
const reszieFont = () => { const reszieFont = () => {
const fontSize = Math.sqrt(window.innerWidth) / 3; const fontSize = Math.sqrt(window.innerWidth) / 3;
option_fdssgl.value.xAxis.axisLabel.fontSize = fontSize; option_fdssgl.value.xAxis.axisLabel.fontSize = fontSize;
option_fdssgl.value.yAxis.axisLabel.fontSize = fontSize; option_fdssgl.value.yAxis.axisLabel.fontSize = fontSize;
option_fdssgl.value.legend.textStyle.fontSize = fontSize;
} }
onMounted(() => { onMounted(() => {
@ -57,6 +86,31 @@ $background-color: rgba(17, 25, 24, 0.3);
$vm_base: 1920; $vm_base: 1920;
$vh_base: 1080; $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 // 计算vw
@function vw($px) { @function vw($px) {
@return calc(($px / $vm_base) * 100vw); @return calc(($px / $vm_base) * 100vw);
@ -85,6 +139,8 @@ $vh_base: 1080;
background: $background-color; background: $background-color;
} }
.data_box { .data_box {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -99,59 +155,61 @@ $vh_base: 1080;
} }
} }
.error_tip_box { .bj_box {
display: flex; width: 100%;
align-items: center; height: calc(50vh - vh(25));
justify-content: center; background-color: $background-color;
gap: vw(5);
margin-right: vw(8);
img { .warnbox {
width: vw(20); width: 100%;
height: vh(20); height: vh(120);
} display: flex;
align-items: center;
.error_tip { justify-content: center;
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);
text-align: center; text-align: center;
line-height: vh(26); margin-top: vh(20);
}
}
.error_list { .warn_total {
flex: 1; color: rgba(0, 255, 238, 1);
display: flex; font-size: vh(20);
gap: vw(10); font-family: ue_title;
margin: vh(10) vw(15);
overflow: hidden;
flex-wrap: nowrap;
cursor: grabbing;
.error_item { .unit {
flex: 0 0 auto; font-size: vh(14);
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 { img {
display: flex; width: vw(100);
align-items: center; height: vh(80);
justify-content: space-between; }
font-size: vw(14);
font-weight: bold;
margin-bottom: vh(10);
} }
.item_headline { .warn_item {
font-size: vw(16); text-align: center;
width: vw(74);
height: vh(104);
font-family: SourceHanSansCN-Normal;
.warn_num {
font-size: vh(20);
font-weight: bold;
color: rgba(255, 255, 255, 1);
margin-bottom: vh(-20);
.unit {
font-size: vh(14);
}
}
.warn_status {
font-size: vh(12);
margin-top: vh(-10);
}
img {
width: vw(64);
height: vh(64);
}
} }
} }
} }