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

feat(omScreen): 优化页面布局样式并添加报警列表功能

Browse Source 
- 在header组件中添加底部边距
- 调整leftPage组件样式并添加背景渐变
- 更新options.ts中的图表配置和月份数据
- 重构rightPage组件，添加报警列表展示和交互功能
- 统一使用渐变背景样式
This commit is contained in:
re-JZzzz
2025-12-23 11:38:13 +08:00
parent 2e557b3d01
commit 8542d3ff2c
4 changed files with 140 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/views/omScreen/components/header.vue
View File

@ -138,6 +138,7 @@ $vh_base: 1080;
display: flex;
align-items: center;
gap: vw(20);
margin-bottom: vh(20);
.header_left_img {
width: vw(48);

11
src/views/omScreen/components/leftPage.vue
View File

@ -34,12 +34,14 @@ import { ref } from 'vue';
@import '@/views/omScreen/gis.scss';
.leftpageContainer {
margin-left: vw(20);
margin-left: vw(20);
.middleInfo {
background: linear-gradient(135.47deg, rgba(21, 49, 58, 0.82) 0%, rgba(39, 85, 94, 0.5) 100%);
.middleInfoContainer {
width: 100%;
height: vh(313);
height: vh(313);
box-sizing: border-box;
position: relative;
background-size: 100% 100%;
@ -57,6 +59,7 @@ margin-left: vw(20);
background: url('@/assets/projectLarge/xm-bg.png') center center no-repeat;
background-size: cover;
overflow-y: auto;
div {
margin-left: vw(20);
margin-bottom: vh(12);
@ -93,7 +96,9 @@ margin-left: vw(20);
// 底部信息
.bottomInfo {
margin-top: vh(20);
margin-top: vh(20);
height: vh(580);
background: linear-gradient(135.47deg, rgba(21, 49, 58, 0.82) 0%, rgba(39, 85, 94, 0.5) 100%);
}
}
</style>

22
src/views/omScreen/components/options.ts
View File

@ -1,3 +1,5 @@
import axios from "axios";
export let option1 = {
tooltip: {
trigger: 'axis',
@ -39,18 +41,24 @@ export let option1 = {
color: '#fff',
fontSize: 12
},
data: ['1月', '3月', '5月', '7月', '9月', '11月']
axisLine: {
lineStyle: {
color: 'rgba(0, 255, 238,1)'
}
},
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
// interval: 2
},
// Y轴
yAxis: {
type: 'value',
name: 'kWh',
// axisLine: {
// lineStyle: {
// color: '#fff'
// }
// },
axisLine: {
lineStyle: {
color: 'rgba(0, 255, 238,1)'
}
},
axisTick: {
show: false
},
@ -71,7 +79,7 @@ export let option1 = {
{
name: '发电量',
type: 'line',
data: [150000, 700000, 400000, 550000, 650000, 850000, 300000, 800000, 600000],
data: [150000, 700000, 400000, 550000, 650000, 850000, 300000, 800000, 600000,1000000,1200000,1500000],
lineStyle: {
color: 'rgba(0, 255, 238, 1)',
width: 3

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

@ -1,6 +1,6 @@
<template>
<div class="right_box">
<div class="top_box">
<div class="data_box">
<Title title="年发电量" />
<div class="echarts">
<EchartBoxTwo :option="option_fdssgl" ref="barChart" />
@ -41,6 +41,31 @@
<div class="warn_status">普通</div>
</div>
</div>
<div class="bj-list">
<div class="bj-grid">
<div>报警ID</div>
<div>报警类型</div>
<div>报警详情</div>
<div>报警时间</div>
<div>操作</div>
</div>
<AutoScroller :items="bjList" class="bj-content" :minItems="10">
<template #default="{ item }">
<!-- <div class="bj-grid item" :class="{ 'active': activebj === item.id }"> -->
<div class="bj-grid item">
<div class="cell-text">{{ item.id }}</div>
<div class="cell-text">
{{ item.grantType }}
</div>
<div class="cell-text">
报警详情报警详情报警详情报警详情报警详情
</div>
<div class="cell-text">{{ dayjs(item.createTime).format('YYYY-MM-DD') }}</div>
<div class="cell-text cursor-pointer" @click="handleClick(item.id)">查看</div>
</div>
</template>
</AutoScroller>
</div>
</div>
</div>
</template>
@ -53,15 +78,35 @@ import Title from './title.vue';
import { dayjs } from 'element-plus';
const option_fdssgl = ref(option1);
const bjList = ref([
{createTime: '2025-11-11 11:11:11'},
{createTime: '2025-11-11 11:11:11'},
{createTime: '2025-11-11 11:11:11'},
{createTime: '2025-11-11 11:11:11'},
{createTime: '2025-11-11 11:11:11'},
{ id: '1', grantType: '未处理', createTime: '2025-11-11 11:11:11' },
{ id: '2', grantType: '报警', createTime: '2025-11-11 11:11:11' },
{ id: '3', grantType: '事故', createTime: '2025-11-11 11:11:11' },
{ id: '4', grantType: '已处理', createTime: '2025-11-11 11:11:11' },
{ id: '5', grantType: '未处理', createTime: '2025-11-11 11:11:11' },
{ id: '7', grantType: '未处理', createTime: '2025-11-11 11:11:11' },
{ id: '8', grantType: '已处理', createTime: '2025-11-11 11:11:11' },
{ id: '9', grantType: '未处理', createTime: '2025-11-11 11:11:11' },
{ id: '10', grantType: '已处理', createTime: '2025-11-11 11:11:11' },
{ id: '11', grantType: '已处理', createTime: '2025-11-11 11:11:11' },
{ id: '12', grantType: '已处理', createTime: '2025-11-11 11:11:11' },
])
const activebj = ref('')
const handleClick = (id: string) => {
activebj.value = id;
}
const handleWheel = (event: WheelEvent) => {
const errorList = (event.target as HTMLElement).closest('.error_list');
if (errorList) {
event.preventDefault(); // 阻止页面或父元素的垂直滚动
errorList.scrollLeft += event.deltaY; // 横向滚动
}
};
const reszieFont = () => {
const fontSize = Math.sqrt(window.innerWidth) / 3;
option_fdssgl.value.xAxis.axisLabel.fontSize = fontSize;
@ -71,15 +116,20 @@ const reszieFont = () => {
onMounted(() => {
window.addEventListener('resize', reszieFont);
window.addEventListener('wheel', handleWheel, { passive: false });
// passive: false 是关键，允许我们在事件处理函数中调用 event.preventDefault()
});
onUnmounted(() => {
window.removeEventListener('resize', reszieFont);
window.removeEventListener('wheel', handleWheel);
});
</script>
<style scoped lang="scss">
$background-color: rgba(17, 25, 24, 0.3);
$background-color: linear-gradient(135.47deg, rgba(21, 49, 58, 0.82) 0%, rgba(39, 85, 94, 0.5) 100%);
;
$vm_base: 1920;
$vh_base: 1080;
@ -128,22 +178,12 @@ $vh_base: 1080;
margin-right: vw(20);
}
.statistic {
flex: 1;
display: flex;
flex-direction: column;
gap: vh(10);
background: $background-color;
}
.data_box {
display: flex;
flex-direction: column;
width: 100%;
height: calc(40vh - vh(25));
background-color: $background-color;
background: $background-color;
.echarts {
width: 100%;
@ -154,8 +194,8 @@ $vh_base: 1080;
.bj_box {
width: 100%;
height: calc(50vh - vh(25));
background-color: $background-color;
height: vh(576);
background: $background-color;
.warnbox {
width: 100%;
@ -210,4 +250,60 @@ $vh_base: 1080;
}
}
}
.bj-list {
margin: vh(10) vw(10);
margin-top: vh(16);
font-family: 'Roboto Condensed';
font-size: vw(12);
&>div:first-child {
padding: vh(6) 0 vh(6) vw(8);
margin-bottom: vh(10);
background: rgba(67, 226, 203, 0.1);
}
.bj-grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1.6fr 0.7fr;
gap: vw(8);
place-items: center;
width: 100%;
box-sizing: border-box;
}
.bj-grid.item:hover {
color: rgba(255, 87, 51, 1);
background: rgba(255, 87, 51, 0.15);
}
.bj-content {
height: vh(260);
overflow: hidden;
box-sizing: border-box;
}
.item {
padding: vh(6) 0;
padding-left: vw(8);
}
.cell-text {
width: 100%;
text-align: center;
box-sizing: border-box;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
// .active {
// color: rgba(255, 87, 51, 1);
// background: rgba(255, 87, 51, 0.15);
// }
.ellipsis {
text-overflow: ellipsis;
}
}
</style>