Skip to content

J
JINRUN-DP
Commit d9dd0967 authored by xinzhedeai's avatar xinzhedeai
Browse files
Options

add：组件样式

parent 8dab8b67
Show whitespace changes
Inline Side-by-side
Showing with 2852 additions and 503 deletions
src/components/DashboardModules/DataOverview.vue
View file @ d9dd0967
...@@ -65,6 +65,476 @@ export default { ...@@ -65,6 +65,476 @@ export default {
}; };
</script> </script>
<style scoped> <style lang="scss" scoped>
/* 组件样式将从主页面继承 */ /* 组件样式将从主页面继承 */
// 数据模块通用样式
.data-module {
background: rgba(0, 20, 40, 0.85);
border: 1px solid #005080;
border-radius: 0.04rem;
overflow: hidden;
display: flex;
flex-direction: column;
backdrop-filter: blur(0.05rem);
box-shadow: 0 0 0.15rem rgba(0, 100, 200, 0.3);
&:nth-child(1) {
height: 2.2rem;
}
&:nth-child(2) {
height: 2.5rem;
}
&:nth-child(3) {
height: 2rem;
}
}
// 模块头部
.module-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.12rem 0.16rem;
background: linear-gradient(to right, #003060, #005090);
border-bottom: 1px solid #0070b0;
h3 {
margin: 0;
font-size: 0.16rem;
font-weight: 500;
color: #00ffcc;
}
.refresh-icon,
.view-more {
font-size: 0.12rem;
color: #99ccff;
cursor: pointer;
}
.alarm-count {
background-color: #ff3333;
color: #fff;
padding: 0.02rem 0.08rem;
border-radius: 0.1rem;
font-size: 0.12rem;
font-weight: bold;
}
.time-range,
.chart-type,
.system-time {
font-size: 0.12rem;
color: #66ccff;
}
}
// 模块内容区
.module-body {
flex: 1;
padding: 0.16rem;
overflow: hidden;
}
// 数据总览样式
.data-stats {
display: flex;
justify-content: space-between;
margin-bottom: 0.16rem;
}
.stat-item {
display: flex;
flex-direction: column;
align-items: center;
min-width: 0.8rem;
}
.stat-label {
font-size: 0.12rem;
color: #99ccff;
margin-bottom: 0.05rem;
}
.stat-value {
font-size: 0.2rem;
font-weight: bold;
color: #ffffff;
&.online {
color: #00ff00;
}
}
.progress-bars {
margin-top: 0.1rem;
}
.progress-item {
display: flex;
align-items: center;
gap: 0.1rem;
margin-bottom: 0.08rem;
}
.progress-label {
font-size: 0.12rem;
color: #ffffff;
width: 0.8rem;
}
.progress-container {
flex: 1;
height: 0.06rem;
background: rgba(0, 40, 80, 0.6);
border: 1px solid #005080;
border-radius: 0.03rem;
overflow: hidden;
}
.progress-bar {
height: 100%;
background: linear-gradient(to right, #00aaff, #00ffcc);
box-shadow: 0 0 0.05rem rgba(0, 255, 204, 0.7);
}
.progress-value {
font-size: 0.12rem;
color: #00ffcc;
font-weight: bold;
width: 0.4rem;
text-align: right;
}
// 报警列表样式
.alarm-list {
height: 100%;
overflow-y: auto;
&::-webkit-scrollbar {
width: 0.04rem;
}
&::-webkit-scrollbar-track {
background: rgba(0, 40, 80, 0.5);
}
&::-webkit-scrollbar-thumb {
background: #0070b0;
border-radius: 0.02rem;
}
}
.alarm-item {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.1rem;
margin-bottom: 0.08rem;
border-radius: 0.04rem;
border-left: 3px solid;
background: rgba(0, 30, 60, 0.7);
font-size: 0.12rem;
&.level-1 {
border-color: #ff3333;
background: rgba(255, 51, 51, 0.1);
}
&.level-2 {
border-color: #ff9900;
background: rgba(255, 153, 0, 0.1);
}
&.level-3 {
border-color: #ffff00;
background: rgba(255, 255, 0, 0.1);
}
}
.alarm-level {
font-weight: bold;
width: 0.35rem;
.alarm-item.level-1 & {
color: #ff3333;
}
.alarm-item.level-2 & {
color: #ff9900;
}
.alarm-item.level-3 & {
color: #ffff00;
}
}
.alarm-content {
flex: 1;
color: #ffffff;
}
.alarm-point {
color: #99ccff;
width: 0.5rem;
}
.alarm-time {
color: #66ccff;
font-size: 0.11rem;
}
// 环境数据样式
.env-data-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.15rem;
height: 100%;
}
.env-item {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: rgba(0, 30, 60, 0.7);
border-radius: 0.04rem;
border: 1px solid #005080;
padding: 0.1rem;
}
.env-icon {
width: 0.3rem;
height: 0.3rem;
margin-bottom: 0.08rem;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
.env-icon.temp {
background-image: url("/static/images/temp-icon.png");
}
.env-icon.humidity {
background-image: url("/static/images/humidity-icon.png");
}
.env-icon.pressure {
background-image: url("/static/images/pressure-icon.png");
}
.env-icon.wind {
background-image: url("/static/images/wind-icon.png");
}
.env-label {
font-size: 0.12rem;
color: #99ccff;
margin-bottom: 0.05rem;
}
.env-value {
font-size: 0.16rem;
font-weight: bold;
color: #00ffcc;
}
// 图表容器
.chart-container {
width: 100%;
height: 100%;
min-height: 1.5rem;
}
// 设备状态列表
.device-status-list {
height: 100%;
overflow-y: auto;
&::-webkit-scrollbar {
width: 0.04rem;
}
&::-webkit-scrollbar-track {
background: rgba(0, 40, 80, 0.5);
}
&::-webkit-scrollbar-thumb {
background: #0070b0;
border-radius: 0.02rem;
}
}
.device-item {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.1rem 0;
border-bottom: 1px solid rgba(0, 100, 200, 0.2);
font-size: 0.12rem;
&:last-child {
border-bottom: none;
}
}
.device-name {
color: #ffffff;
width: 0.8rem;
}
.device-status {
padding: 0.02rem 0.08rem;
border-radius: 0.03rem;
font-size: 0.11rem;
font-weight: bold;
&.normal {
background: rgba(0, 255, 0, 0.2);
color: #00ff00;
}
&.warning {
background: rgba(255, 153, 0, 0.2);
color: #ff9900;
}
&.offline {
background: rgba(255, 51, 51, 0.2);
color: #ff3333;
}
}
.device-value {
color: #00ffcc;
font-weight: bold;
width: 0.6rem;
text-align: right;
}
.device-time {
color: #66ccff;
font-size: 0.11rem;
}
// 系统资源监控
.system-resources {
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-around;
}
.resource-item {
display: flex;
align-items: center;
gap: 0.1rem;
}
.resource-label {
font-size: 0.12rem;
color: #ffffff;
width: 0.9rem;
}
.resource-bar-container {
flex: 1;
height: 0.08rem;
background: rgba(0, 40, 80, 0.6);
border: 1px solid #005080;
border-radius: 0.04rem;
overflow: hidden;
}
.resource-bar {
height: 100%;
box-shadow: 0 0 0.05rem;
&.cpu-bar {
background: linear-gradient(to right, #00aaff, #00ffcc);
box-shadow: 0 0 0.05rem rgba(0, 255, 204, 0.7);
}
&.mem-bar {
background: linear-gradient(to right, #ff9900, #ffcc00);
box-shadow: 0 0 0.05rem rgba(255, 204, 0, 0.7);
}
&.disk-bar {
background: linear-gradient(to right, #00cc66, #00ff99);
box-shadow: 0 0 0.05rem rgba(0, 255, 153, 0.7);
}
}
.resource-value {
font-size: 0.12rem;
font-weight: bold;
width: 0.4rem;
text-align: right;
&.low {
color: #00ff00;
}
&.medium {
color: #ffcc00;
}
&.high {
color: #ff3333;
}
}
// 响应式设计 - 基于1920*1080分辨率的适配
@media (max-width: 1600px) {
html {
font-size: 83.3px; // 1600/1920 * 100
}
}
@media (max-width: 1440px) {
html {
font-size: 75px; // 1440/1920 * 100
}
.left-modules,
.right-modules {
width: 3rem;
}
}
@media (max-width: 1280px) {
html {
font-size: 66.7px; // 1280/1920 * 100
}
.left-modules,
.right-modules {
width: 2.6rem;
}
}
// 修复滚动条样式
*::-webkit-scrollbar {
width: 0.04rem;
height: 0.04rem;
}
*::-webkit-scrollbar-track {
background: rgba(0, 40, 80, 0.3);
border-radius: 0.02rem;
}
*::-webkit-scrollbar-thumb {
background: #0070b0;
border-radius: 0.02rem;
}
*::-webkit-scrollbar-thumb:hover {
background: #0090d0;
}
</style> </style>
\ No newline at end of file
src/components/DashboardModules/DeviceStatus.vue
View file @ d9dd0967
...@@ -67,6 +67,476 @@ export default { ...@@ -67,6 +67,476 @@ export default {
} }
</script> </script>
<style scoped> <style lang="scss" scoped>
/* 组件样式将从主页面继承 */ /* 组件样式将从主页面继承 */
// 数据模块通用样式
.data-module {
background: rgba(0, 20, 40, 0.85);
border: 1px solid #005080;
border-radius: 0.04rem;
overflow: hidden;
display: flex;
flex-direction: column;
backdrop-filter: blur(0.05rem);
box-shadow: 0 0 0.15rem rgba(0, 100, 200, 0.3);
&:nth-child(1) {
height: 2.2rem;
}
&:nth-child(2) {
height: 2.5rem;
}
&:nth-child(3) {
height: 2rem;
}
}
// 模块头部
.module-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.12rem 0.16rem;
background: linear-gradient(to right, #003060, #005090);
border-bottom: 1px solid #0070b0;
h3 {
margin: 0;
font-size: 0.16rem;
font-weight: 500;
color: #00ffcc;
}
.refresh-icon,
.view-more {
font-size: 0.12rem;
color: #99ccff;
cursor: pointer;
}
.alarm-count {
background-color: #ff3333;
color: #fff;
padding: 0.02rem 0.08rem;
border-radius: 0.1rem;
font-size: 0.12rem;
font-weight: bold;
}
.time-range,
.chart-type,
.system-time {
font-size: 0.12rem;
color: #66ccff;
}
}
// 模块内容区
.module-body {
flex: 1;
padding: 0.16rem;
overflow: hidden;
}
// 数据总览样式
.data-stats {
display: flex;
justify-content: space-between;
margin-bottom: 0.16rem;
}
.stat-item {
display: flex;
flex-direction: column;
align-items: center;
min-width: 0.8rem;
}
.stat-label {
font-size: 0.12rem;
color: #99ccff;
margin-bottom: 0.05rem;
}
.stat-value {
font-size: 0.2rem;
font-weight: bold;
color: #ffffff;
&.online {
color: #00ff00;
}
}
.progress-bars {
margin-top: 0.1rem;
}
.progress-item {
display: flex;
align-items: center;
gap: 0.1rem;
margin-bottom: 0.08rem;
}
.progress-label {
font-size: 0.12rem;
color: #ffffff;
width: 0.8rem;
}
.progress-container {
flex: 1;
height: 0.06rem;
background: rgba(0, 40, 80, 0.6);
border: 1px solid #005080;
border-radius: 0.03rem;
overflow: hidden;
}
.progress-bar {
height: 100%;
background: linear-gradient(to right, #00aaff, #00ffcc);
box-shadow: 0 0 0.05rem rgba(0, 255, 204, 0.7);
}
.progress-value {
font-size: 0.12rem;
color: #00ffcc;
font-weight: bold;
width: 0.4rem;
text-align: right;
}
// 报警列表样式
.alarm-list {
height: 100%;
overflow-y: auto;
&::-webkit-scrollbar {
width: 0.04rem;
}
&::-webkit-scrollbar-track {
background: rgba(0, 40, 80, 0.5);
}
&::-webkit-scrollbar-thumb {
background: #0070b0;
border-radius: 0.02rem;
}
}
.alarm-item {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.1rem;
margin-bottom: 0.08rem;
border-radius: 0.04rem;
border-left: 3px solid;
background: rgba(0, 30, 60, 0.7);
font-size: 0.12rem;
&.level-1 {
border-color: #ff3333;
background: rgba(255, 51, 51, 0.1);
}
&.level-2 {
border-color: #ff9900;
background: rgba(255, 153, 0, 0.1);
}
&.level-3 {
border-color: #ffff00;
background: rgba(255, 255, 0, 0.1);
}
}
.alarm-level {
font-weight: bold;
width: 0.35rem;
.alarm-item.level-1 & {
color: #ff3333;
}
.alarm-item.level-2 & {
color: #ff9900;
}
.alarm-item.level-3 & {
color: #ffff00;
}
}
.alarm-content {
flex: 1;
color: #ffffff;
}
.alarm-point {
color: #99ccff;
width: 0.5rem;
}
.alarm-time {
color: #66ccff;
font-size: 0.11rem;
}
// 环境数据样式
.env-data-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.15rem;
height: 100%;
}
.env-item {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: rgba(0, 30, 60, 0.7);
border-radius: 0.04rem;
border: 1px solid #005080;
padding: 0.1rem;
}
.env-icon {
width: 0.3rem;
height: 0.3rem;
margin-bottom: 0.08rem;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
.env-icon.temp {
background-image: url("/static/images/temp-icon.png");
}
.env-icon.humidity {
background-image: url("/static/images/humidity-icon.png");
}
.env-icon.pressure {
background-image: url("/static/images/pressure-icon.png");
}
.env-icon.wind {
background-image: url("/static/images/wind-icon.png");
}
.env-label {
font-size: 0.12rem;
color: #99ccff;
margin-bottom: 0.05rem;
}
.env-value {
font-size: 0.16rem;
font-weight: bold;
color: #00ffcc;
}
// 图表容器
.chart-container {
width: 100%;
height: 100%;
min-height: 1.5rem;
}
// 设备状态列表
.device-status-list {
height: 100%;
overflow-y: auto;
&::-webkit-scrollbar {
width: 0.04rem;
}
&::-webkit-scrollbar-track {
background: rgba(0, 40, 80, 0.5);
}
&::-webkit-scrollbar-thumb {
background: #0070b0;
border-radius: 0.02rem;
}
}
.device-item {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.1rem 0;
border-bottom: 1px solid rgba(0, 100, 200, 0.2);
font-size: 0.12rem;
&:last-child {
border-bottom: none;
}
}
.device-name {
color: #ffffff;
width: 0.8rem;
}
.device-status {
padding: 0.02rem 0.08rem;
border-radius: 0.03rem;
font-size: 0.11rem;
font-weight: bold;
&.normal {
background: rgba(0, 255, 0, 0.2);
color: #00ff00;
}
&.warning {
background: rgba(255, 153, 0, 0.2);
color: #ff9900;
}
&.offline {
background: rgba(255, 51, 51, 0.2);
color: #ff3333;
}
}
.device-value {
color: #00ffcc;
font-weight: bold;
width: 0.6rem;
text-align: right;
}
.device-time {
color: #66ccff;
font-size: 0.11rem;
}
// 系统资源监控
.system-resources {
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-around;
}
.resource-item {
display: flex;
align-items: center;
gap: 0.1rem;
}
.resource-label {
font-size: 0.12rem;
color: #ffffff;
width: 0.9rem;
}
.resource-bar-container {
flex: 1;
height: 0.08rem;
background: rgba(0, 40, 80, 0.6);
border: 1px solid #005080;
border-radius: 0.04rem;
overflow: hidden;
}
.resource-bar {
height: 100%;
box-shadow: 0 0 0.05rem;
&.cpu-bar {
background: linear-gradient(to right, #00aaff, #00ffcc);
box-shadow: 0 0 0.05rem rgba(0, 255, 204, 0.7);
}
&.mem-bar {
background: linear-gradient(to right, #ff9900, #ffcc00);
box-shadow: 0 0 0.05rem rgba(255, 204, 0, 0.7);
}
&.disk-bar {
background: linear-gradient(to right, #00cc66, #00ff99);
box-shadow: 0 0 0.05rem rgba(0, 255, 153, 0.7);
}
}
.resource-value {
font-size: 0.12rem;
font-weight: bold;
width: 0.4rem;
text-align: right;
&.low {
color: #00ff00;
}
&.medium {
color: #ffcc00;
}
&.high {
color: #ff3333;
}
}
// 响应式设计 - 基于1920*1080分辨率的适配
@media (max-width: 1600px) {
html {
font-size: 83.3px; // 1600/1920 * 100
}
}
@media (max-width: 1440px) {
html {
font-size: 75px; // 1440/1920 * 100
}
.left-modules,
.right-modules {
width: 3rem;
}
}
@media (max-width: 1280px) {
html {
font-size: 66.7px; // 1280/1920 * 100
}
.left-modules,
.right-modules {
width: 2.6rem;
}
}
// 修复滚动条样式
*::-webkit-scrollbar {
width: 0.04rem;
height: 0.04rem;
}
*::-webkit-scrollbar-track {
background: rgba(0, 40, 80, 0.3);
border-radius: 0.02rem;
}
*::-webkit-scrollbar-thumb {
background: #0070b0;
border-radius: 0.02rem;
}
*::-webkit-scrollbar-thumb:hover {
background: #0090d0;
}
</style> </style>
\ No newline at end of file
src/components/DashboardModules/EnvironmentalMonitoring.vue
View file @ d9dd0967
...@@ -53,6 +53,476 @@ export default { ...@@ -53,6 +53,476 @@ export default {
} }
</script> </script>
<style scoped> <style lang="scss" scoped>
/* 组件样式将从主页面继承 */ /* 组件样式将从主页面继承 */
// 数据模块通用样式
.data-module {
background: rgba(0, 20, 40, 0.85);
border: 1px solid #005080;
border-radius: 0.04rem;
overflow: hidden;
display: flex;
flex-direction: column;
backdrop-filter: blur(0.05rem);
box-shadow: 0 0 0.15rem rgba(0, 100, 200, 0.3);
&:nth-child(1) {
height: 2.2rem;
}
&:nth-child(2) {
height: 2.5rem;
}
&:nth-child(3) {
height: 2rem;
}
}
// 模块头部
.module-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.12rem 0.16rem;
background: linear-gradient(to right, #003060, #005090);
border-bottom: 1px solid #0070b0;
h3 {
margin: 0;
font-size: 0.16rem;
font-weight: 500;
color: #00ffcc;
}
.refresh-icon,
.view-more {
font-size: 0.12rem;
color: #99ccff;
cursor: pointer;
}
.alarm-count {
background-color: #ff3333;
color: #fff;
padding: 0.02rem 0.08rem;
border-radius: 0.1rem;
font-size: 0.12rem;
font-weight: bold;
}
.time-range,
.chart-type,
.system-time {
font-size: 0.12rem;
color: #66ccff;
}
}
// 模块内容区
.module-body {
flex: 1;
padding: 0.16rem;
overflow: hidden;
}
// 数据总览样式
.data-stats {
display: flex;
justify-content: space-between;
margin-bottom: 0.16rem;
}
.stat-item {
display: flex;
flex-direction: column;
align-items: center;
min-width: 0.8rem;
}
.stat-label {
font-size: 0.12rem;
color: #99ccff;
margin-bottom: 0.05rem;
}
.stat-value {
font-size: 0.2rem;
font-weight: bold;
color: #ffffff;
&.online {
color: #00ff00;
}
}
.progress-bars {
margin-top: 0.1rem;
}
.progress-item {
display: flex;
align-items: center;
gap: 0.1rem;
margin-bottom: 0.08rem;
}
.progress-label {
font-size: 0.12rem;
color: #ffffff;
width: 0.8rem;
}
.progress-container {
flex: 1;
height: 0.06rem;
background: rgba(0, 40, 80, 0.6);
border: 1px solid #005080;
border-radius: 0.03rem;
overflow: hidden;
}
.progress-bar {
height: 100%;
background: linear-gradient(to right, #00aaff, #00ffcc);
box-shadow: 0 0 0.05rem rgba(0, 255, 204, 0.7);
}
.progress-value {
font-size: 0.12rem;
color: #00ffcc;
font-weight: bold;
width: 0.4rem;
text-align: right;
}
// 报警列表样式
.alarm-list {
height: 100%;
overflow-y: auto;
&::-webkit-scrollbar {
width: 0.04rem;
}
&::-webkit-scrollbar-track {
background: rgba(0, 40, 80, 0.5);
}
&::-webkit-scrollbar-thumb {
background: #0070b0;
border-radius: 0.02rem;
}
}
.alarm-item {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.1rem;
margin-bottom: 0.08rem;
border-radius: 0.04rem;
border-left: 3px solid;
background: rgba(0, 30, 60, 0.7);
font-size: 0.12rem;
&.level-1 {
border-color: #ff3333;
background: rgba(255, 51, 51, 0.1);
}
&.level-2 {
border-color: #ff9900;
background: rgba(255, 153, 0, 0.1);
}
&.level-3 {
border-color: #ffff00;
background: rgba(255, 255, 0, 0.1);
}
}
.alarm-level {
font-weight: bold;
width: 0.35rem;
.alarm-item.level-1 & {
color: #ff3333;
}
.alarm-item.level-2 & {
color: #ff9900;
}
.alarm-item.level-3 & {
color: #ffff00;
}
}
.alarm-content {
flex: 1;
color: #ffffff;
}
.alarm-point {
color: #99ccff;
width: 0.5rem;
}
.alarm-time {
color: #66ccff;
font-size: 0.11rem;
}
// 环境数据样式
.env-data-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.15rem;
height: 100%;
}
.env-item {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: rgba(0, 30, 60, 0.7);
border-radius: 0.04rem;
border: 1px solid #005080;
padding: 0.1rem;
}
.env-icon {
width: 0.3rem;
height: 0.3rem;
margin-bottom: 0.08rem;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
.env-icon.temp {
background-image: url("/static/images/temp-icon.png");
}
.env-icon.humidity {
background-image: url("/static/images/humidity-icon.png");
}
.env-icon.pressure {
background-image: url("/static/images/pressure-icon.png");
}
.env-icon.wind {
background-image: url("/static/images/wind-icon.png");
}
.env-label {
font-size: 0.12rem;
color: #99ccff;
margin-bottom: 0.05rem;
}
.env-value {
font-size: 0.16rem;
font-weight: bold;
color: #00ffcc;
}
// 图表容器
.chart-container {
width: 100%;
height: 100%;
min-height: 1.5rem;
}
// 设备状态列表
.device-status-list {
height: 100%;
overflow-y: auto;
&::-webkit-scrollbar {
width: 0.04rem;
}
&::-webkit-scrollbar-track {
background: rgba(0, 40, 80, 0.5);
}
&::-webkit-scrollbar-thumb {
background: #0070b0;
border-radius: 0.02rem;
}
}
.device-item {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.1rem 0;
border-bottom: 1px solid rgba(0, 100, 200, 0.2);
font-size: 0.12rem;
&:last-child {
border-bottom: none;
}
}
.device-name {
color: #ffffff;
width: 0.8rem;
}
.device-status {
padding: 0.02rem 0.08rem;
border-radius: 0.03rem;
font-size: 0.11rem;
font-weight: bold;
&.normal {
background: rgba(0, 255, 0, 0.2);
color: #00ff00;
}
&.warning {
background: rgba(255, 153, 0, 0.2);
color: #ff9900;
}
&.offline {
background: rgba(255, 51, 51, 0.2);
color: #ff3333;
}
}
.device-value {
color: #00ffcc;
font-weight: bold;
width: 0.6rem;
text-align: right;
}
.device-time {
color: #66ccff;
font-size: 0.11rem;
}
// 系统资源监控
.system-resources {
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-around;
}
.resource-item {
display: flex;
align-items: center;
gap: 0.1rem;
}
.resource-label {
font-size: 0.12rem;
color: #ffffff;
width: 0.9rem;
}
.resource-bar-container {
flex: 1;
height: 0.08rem;
background: rgba(0, 40, 80, 0.6);
border: 1px solid #005080;
border-radius: 0.04rem;
overflow: hidden;
}
.resource-bar {
height: 100%;
box-shadow: 0 0 0.05rem;
&.cpu-bar {
background: linear-gradient(to right, #00aaff, #00ffcc);
box-shadow: 0 0 0.05rem rgba(0, 255, 204, 0.7);
}
&.mem-bar {
background: linear-gradient(to right, #ff9900, #ffcc00);
box-shadow: 0 0 0.05rem rgba(255, 204, 0, 0.7);
}
&.disk-bar {
background: linear-gradient(to right, #00cc66, #00ff99);
box-shadow: 0 0 0.05rem rgba(0, 255, 153, 0.7);
}
}
.resource-value {
font-size: 0.12rem;
font-weight: bold;
width: 0.4rem;
text-align: right;
&.low {
color: #00ff00;
}
&.medium {
color: #ffcc00;
}
&.high {
color: #ff3333;
}
}
// 响应式设计 - 基于1920*1080分辨率的适配
@media (max-width: 1600px) {
html {
font-size: 83.3px; // 1600/1920 * 100
}
}
@media (max-width: 1440px) {
html {
font-size: 75px; // 1440/1920 * 100
}
.left-modules,
.right-modules {
width: 3rem;
}
}
@media (max-width: 1280px) {
html {
font-size: 66.7px; // 1280/1920 * 100
}
.left-modules,
.right-modules {
width: 2.6rem;
}
}
// 修复滚动条样式
*::-webkit-scrollbar {
width: 0.04rem;
height: 0.04rem;
}
*::-webkit-scrollbar-track {
background: rgba(0, 40, 80, 0.3);
border-radius: 0.02rem;
}
*::-webkit-scrollbar-thumb {
background: #0070b0;
border-radius: 0.02rem;
}
*::-webkit-scrollbar-thumb:hover {
background: #0090d0;
}
</style> </style>
\ No newline at end of file
src/components/DashboardModules/RealTimeAlarm.vue
View file @ d9dd0967
...@@ -68,6 +68,476 @@ export default { ...@@ -68,6 +68,476 @@ export default {
} }
</script> </script>
<style scoped> <style lang="scss" scoped>
/* 组件样式将从主页面继承 */ /* 组件样式将从主页面继承 */
// 数据模块通用样式
.data-module {
background: rgba(0, 20, 40, 0.85);
border: 1px solid #005080;
border-radius: 0.04rem;
overflow: hidden;
display: flex;
flex-direction: column;
backdrop-filter: blur(0.05rem);
box-shadow: 0 0 0.15rem rgba(0, 100, 200, 0.3);
&:nth-child(1) {
height: 2.2rem;
}
&:nth-child(2) {
height: 2.5rem;
}
&:nth-child(3) {
height: 2rem;
}
}
// 模块头部
.module-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.12rem 0.16rem;
background: linear-gradient(to right, #003060, #005090);
border-bottom: 1px solid #0070b0;
h3 {
margin: 0;
font-size: 0.16rem;
font-weight: 500;
color: #00ffcc;
}
.refresh-icon,
.view-more {
font-size: 0.12rem;
color: #99ccff;
cursor: pointer;
}
.alarm-count {
background-color: #ff3333;
color: #fff;
padding: 0.02rem 0.08rem;
border-radius: 0.1rem;
font-size: 0.12rem;
font-weight: bold;
}
.time-range,
.chart-type,
.system-time {
font-size: 0.12rem;
color: #66ccff;
}
}
// 模块内容区
.module-body {
flex: 1;
padding: 0.16rem;
overflow: hidden;
}
// 数据总览样式
.data-stats {
display: flex;
justify-content: space-between;
margin-bottom: 0.16rem;
}
.stat-item {
display: flex;
flex-direction: column;
align-items: center;
min-width: 0.8rem;
}
.stat-label {
font-size: 0.12rem;
color: #99ccff;
margin-bottom: 0.05rem;
}
.stat-value {
font-size: 0.2rem;
font-weight: bold;
color: #ffffff;
&.online {
color: #00ff00;
}
}
.progress-bars {
margin-top: 0.1rem;
}
.progress-item {
display: flex;
align-items: center;
gap: 0.1rem;
margin-bottom: 0.08rem;
}
.progress-label {
font-size: 0.12rem;
color: #ffffff;
width: 0.8rem;
}
.progress-container {
flex: 1;
height: 0.06rem;
background: rgba(0, 40, 80, 0.6);
border: 1px solid #005080;
border-radius: 0.03rem;
overflow: hidden;
}
.progress-bar {
height: 100%;
background: linear-gradient(to right, #00aaff, #00ffcc);
box-shadow: 0 0 0.05rem rgba(0, 255, 204, 0.7);
}
.progress-value {
font-size: 0.12rem;
color: #00ffcc;
font-weight: bold;
width: 0.4rem;
text-align: right;
}
// 报警列表样式
.alarm-list {
height: 100%;
overflow-y: auto;
&::-webkit-scrollbar {
width: 0.04rem;
}
&::-webkit-scrollbar-track {
background: rgba(0, 40, 80, 0.5);
}
&::-webkit-scrollbar-thumb {
background: #0070b0;
border-radius: 0.02rem;
}
}
.alarm-item {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.1rem;
margin-bottom: 0.08rem;
border-radius: 0.04rem;
border-left: 3px solid;
background: rgba(0, 30, 60, 0.7);
font-size: 0.12rem;
&.level-1 {
border-color: #ff3333;
background: rgba(255, 51, 51, 0.1);
}
&.level-2 {
border-color: #ff9900;
background: rgba(255, 153, 0, 0.1);
}
&.level-3 {
border-color: #ffff00;
background: rgba(255, 255, 0, 0.1);
}
}
.alarm-level {
font-weight: bold;
width: 0.35rem;
.alarm-item.level-1 & {
color: #ff3333;
}
.alarm-item.level-2 & {
color: #ff9900;
}
.alarm-item.level-3 & {
color: #ffff00;
}
}
.alarm-content {
flex: 1;
color: #ffffff;
}
.alarm-point {
color: #99ccff;
width: 0.5rem;
}
.alarm-time {
color: #66ccff;
font-size: 0.11rem;
}
// 环境数据样式
.env-data-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.15rem;
height: 100%;
}
.env-item {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: rgba(0, 30, 60, 0.7);
border-radius: 0.04rem;
border: 1px solid #005080;
padding: 0.1rem;
}
.env-icon {
width: 0.3rem;
height: 0.3rem;
margin-bottom: 0.08rem;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
.env-icon.temp {
background-image: url("/static/images/temp-icon.png");
}
.env-icon.humidity {
background-image: url("/static/images/humidity-icon.png");
}
.env-icon.pressure {
background-image: url("/static/images/pressure-icon.png");
}
.env-icon.wind {
background-image: url("/static/images/wind-icon.png");
}
.env-label {
font-size: 0.12rem;
color: #99ccff;
margin-bottom: 0.05rem;
}
.env-value {
font-size: 0.16rem;
font-weight: bold;
color: #00ffcc;
}
// 图表容器
.chart-container {
width: 100%;
height: 100%;
min-height: 1.5rem;
}
// 设备状态列表
.device-status-list {
height: 100%;
overflow-y: auto;
&::-webkit-scrollbar {
width: 0.04rem;
}
&::-webkit-scrollbar-track {
background: rgba(0, 40, 80, 0.5);
}
&::-webkit-scrollbar-thumb {
background: #0070b0;
border-radius: 0.02rem;
}
}
.device-item {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.1rem 0;
border-bottom: 1px solid rgba(0, 100, 200, 0.2);
font-size: 0.12rem;
&:last-child {
border-bottom: none;
}
}
.device-name {
color: #ffffff;
width: 0.8rem;
}
.device-status {
padding: 0.02rem 0.08rem;
border-radius: 0.03rem;
font-size: 0.11rem;
font-weight: bold;
&.normal {
background: rgba(0, 255, 0, 0.2);
color: #00ff00;
}
&.warning {
background: rgba(255, 153, 0, 0.2);
color: #ff9900;
}
&.offline {
background: rgba(255, 51, 51, 0.2);
color: #ff3333;
}
}
.device-value {
color: #00ffcc;
font-weight: bold;
width: 0.6rem;
text-align: right;
}
.device-time {
color: #66ccff;
font-size: 0.11rem;
}
// 系统资源监控
.system-resources {
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-around;
}
.resource-item {
display: flex;
align-items: center;
gap: 0.1rem;
}
.resource-label {
font-size: 0.12rem;
color: #ffffff;
width: 0.9rem;
}
.resource-bar-container {
flex: 1;
height: 0.08rem;
background: rgba(0, 40, 80, 0.6);
border: 1px solid #005080;
border-radius: 0.04rem;
overflow: hidden;
}
.resource-bar {
height: 100%;
box-shadow: 0 0 0.05rem;
&.cpu-bar {
background: linear-gradient(to right, #00aaff, #00ffcc);
box-shadow: 0 0 0.05rem rgba(0, 255, 204, 0.7);
}
&.mem-bar {
background: linear-gradient(to right, #ff9900, #ffcc00);
box-shadow: 0 0 0.05rem rgba(255, 204, 0, 0.7);
}
&.disk-bar {
background: linear-gradient(to right, #00cc66, #00ff99);
box-shadow: 0 0 0.05rem rgba(0, 255, 153, 0.7);
}
}
.resource-value {
font-size: 0.12rem;
font-weight: bold;
width: 0.4rem;
text-align: right;
&.low {
color: #00ff00;
}
&.medium {
color: #ffcc00;
}
&.high {
color: #ff3333;
}
}
// 响应式设计 - 基于1920*1080分辨率的适配
@media (max-width: 1600px) {
html {
font-size: 83.3px; // 1600/1920 * 100
}
}
@media (max-width: 1440px) {
html {
font-size: 75px; // 1440/1920 * 100
}
.left-modules,
.right-modules {
width: 3rem;
}
}
@media (max-width: 1280px) {
html {
font-size: 66.7px; // 1280/1920 * 100
}
.left-modules,
.right-modules {
width: 2.6rem;
}
}
// 修复滚动条样式
*::-webkit-scrollbar {
width: 0.04rem;
height: 0.04rem;
}
*::-webkit-scrollbar-track {
background: rgba(0, 40, 80, 0.3);
border-radius: 0.02rem;
}
*::-webkit-scrollbar-thumb {
background: #0070b0;
border-radius: 0.02rem;
}
*::-webkit-scrollbar-thumb:hover {
background: #0090d0;
}
</style> </style>
\ No newline at end of file
src/components/DashboardModules/SystemLoad.vue
View file @ d9dd0967
...@@ -58,6 +58,476 @@ export default { ...@@ -58,6 +58,476 @@ export default {
}; };
</script> </script>
<style scoped> <style lang="scss" scoped>
/* 组件样式将从主页面继承 */ /* 组件样式将从主页面继承 */
// 数据模块通用样式
.data-module {
background: rgba(0, 20, 40, 0.85);
border: 1px solid #005080;
border-radius: 0.04rem;
overflow: hidden;
display: flex;
flex-direction: column;
backdrop-filter: blur(0.05rem);
box-shadow: 0 0 0.15rem rgba(0, 100, 200, 0.3);
&:nth-child(1) {
height: 2.2rem;
}
&:nth-child(2) {
height: 2.5rem;
}
&:nth-child(3) {
height: 2rem;
}
}
// 模块头部
.module-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.12rem 0.16rem;
background: linear-gradient(to right, #003060, #005090);
border-bottom: 1px solid #0070b0;
h3 {
margin: 0;
font-size: 0.16rem;
font-weight: 500;
color: #00ffcc;
}
.refresh-icon,
.view-more {
font-size: 0.12rem;
color: #99ccff;
cursor: pointer;
}
.alarm-count {
background-color: #ff3333;
color: #fff;
padding: 0.02rem 0.08rem;
border-radius: 0.1rem;
font-size: 0.12rem;
font-weight: bold;
}
.time-range,
.chart-type,
.system-time {
font-size: 0.12rem;
color: #66ccff;
}
}
// 模块内容区
.module-body {
flex: 1;
padding: 0.16rem;
overflow: hidden;
}
// 数据总览样式
.data-stats {
display: flex;
justify-content: space-between;
margin-bottom: 0.16rem;
}
.stat-item {
display: flex;
flex-direction: column;
align-items: center;
min-width: 0.8rem;
}
.stat-label {
font-size: 0.12rem;
color: #99ccff;
margin-bottom: 0.05rem;
}
.stat-value {
font-size: 0.2rem;
font-weight: bold;
color: #ffffff;
&.online {
color: #00ff00;
}
}
.progress-bars {
margin-top: 0.1rem;
}
.progress-item {
display: flex;
align-items: center;
gap: 0.1rem;
margin-bottom: 0.08rem;
}
.progress-label {
font-size: 0.12rem;
color: #ffffff;
width: 0.8rem;
}
.progress-container {
flex: 1;
height: 0.06rem;
background: rgba(0, 40, 80, 0.6);
border: 1px solid #005080;
border-radius: 0.03rem;
overflow: hidden;
}
.progress-bar {
height: 100%;
background: linear-gradient(to right, #00aaff, #00ffcc);
box-shadow: 0 0 0.05rem rgba(0, 255, 204, 0.7);
}
.progress-value {
font-size: 0.12rem;
color: #00ffcc;
font-weight: bold;
width: 0.4rem;
text-align: right;
}
// 报警列表样式
.alarm-list {
height: 100%;
overflow-y: auto;
&::-webkit-scrollbar {
width: 0.04rem;
}
&::-webkit-scrollbar-track {
background: rgba(0, 40, 80, 0.5);
}
&::-webkit-scrollbar-thumb {
background: #0070b0;
border-radius: 0.02rem;
}
}
.alarm-item {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.1rem;
margin-bottom: 0.08rem;
border-radius: 0.04rem;
border-left: 3px solid;
background: rgba(0, 30, 60, 0.7);
font-size: 0.12rem;
&.level-1 {
border-color: #ff3333;
background: rgba(255, 51, 51, 0.1);
}
&.level-2 {
border-color: #ff9900;
background: rgba(255, 153, 0, 0.1);
}
&.level-3 {
border-color: #ffff00;
background: rgba(255, 255, 0, 0.1);
}
}
.alarm-level {
font-weight: bold;
width: 0.35rem;
.alarm-item.level-1 & {
color: #ff3333;
}
.alarm-item.level-2 & {
color: #ff9900;
}
.alarm-item.level-3 & {
color: #ffff00;
}
}
.alarm-content {
flex: 1;
color: #ffffff;
}
.alarm-point {
color: #99ccff;
width: 0.5rem;
}
.alarm-time {
color: #66ccff;
font-size: 0.11rem;
}
// 环境数据样式
.env-data-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.15rem;
height: 100%;
}
.env-item {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: rgba(0, 30, 60, 0.7);
border-radius: 0.04rem;
border: 1px solid #005080;
padding: 0.1rem;
}
.env-icon {
width: 0.3rem;
height: 0.3rem;
margin-bottom: 0.08rem;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
.env-icon.temp {
background-image: url("/static/images/temp-icon.png");
}
.env-icon.humidity {
background-image: url("/static/images/humidity-icon.png");
}
.env-icon.pressure {
background-image: url("/static/images/pressure-icon.png");
}
.env-icon.wind {
background-image: url("/static/images/wind-icon.png");
}
.env-label {
font-size: 0.12rem;
color: #99ccff;
margin-bottom: 0.05rem;
}
.env-value {
font-size: 0.16rem;
font-weight: bold;
color: #00ffcc;
}
// 图表容器
.chart-container {
width: 100%;
height: 100%;
min-height: 1.5rem;
}
// 设备状态列表
.device-status-list {
height: 100%;
overflow-y: auto;
&::-webkit-scrollbar {
width: 0.04rem;
}
&::-webkit-scrollbar-track {
background: rgba(0, 40, 80, 0.5);
}
&::-webkit-scrollbar-thumb {
background: #0070b0;
border-radius: 0.02rem;
}
}
.device-item {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.1rem 0;
border-bottom: 1px solid rgba(0, 100, 200, 0.2);
font-size: 0.12rem;
&:last-child {
border-bottom: none;
}
}
.device-name {
color: #ffffff;
width: 0.8rem;
}
.device-status {
padding: 0.02rem 0.08rem;
border-radius: 0.03rem;
font-size: 0.11rem;
font-weight: bold;
&.normal {
background: rgba(0, 255, 0, 0.2);
color: #00ff00;
}
&.warning {
background: rgba(255, 153, 0, 0.2);
color: #ff9900;
}
&.offline {
background: rgba(255, 51, 51, 0.2);
color: #ff3333;
}
}
.device-value {
color: #00ffcc;
font-weight: bold;
width: 0.6rem;
text-align: right;
}
.device-time {
color: #66ccff;
font-size: 0.11rem;
}
// 系统资源监控
.system-resources {
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-around;
}
.resource-item {
display: flex;
align-items: center;
gap: 0.1rem;
}
.resource-label {
font-size: 0.12rem;
color: #ffffff;
width: 0.9rem;
}
.resource-bar-container {
flex: 1;
height: 0.08rem;
background: rgba(0, 40, 80, 0.6);
border: 1px solid #005080;
border-radius: 0.04rem;
overflow: hidden;
}
.resource-bar {
height: 100%;
box-shadow: 0 0 0.05rem;
&.cpu-bar {
background: linear-gradient(to right, #00aaff, #00ffcc);
box-shadow: 0 0 0.05rem rgba(0, 255, 204, 0.7);
}
&.mem-bar {
background: linear-gradient(to right, #ff9900, #ffcc00);
box-shadow: 0 0 0.05rem rgba(255, 204, 0, 0.7);
}
&.disk-bar {
background: linear-gradient(to right, #00cc66, #00ff99);
box-shadow: 0 0 0.05rem rgba(0, 255, 153, 0.7);
}
}
.resource-value {
font-size: 0.12rem;
font-weight: bold;
width: 0.4rem;
text-align: right;
&.low {
color: #00ff00;
}
&.medium {
color: #ffcc00;
}
&.high {
color: #ff3333;
}
}
// 响应式设计 - 基于1920*1080分辨率的适配
@media (max-width: 1600px) {
html {
font-size: 83.3px; // 1600/1920 * 100
}
}
@media (max-width: 1440px) {
html {
font-size: 75px; // 1440/1920 * 100
}
.left-modules,
.right-modules {
width: 3rem;
}
}
@media (max-width: 1280px) {
html {
font-size: 66.7px; // 1280/1920 * 100
}
.left-modules,
.right-modules {
width: 2.6rem;
}
}
// 修复滚动条样式
*::-webkit-scrollbar {
width: 0.04rem;
height: 0.04rem;
}
*::-webkit-scrollbar-track {
background: rgba(0, 40, 80, 0.3);
border-radius: 0.02rem;
}
*::-webkit-scrollbar-thumb {
background: #0070b0;
border-radius: 0.02rem;
}
*::-webkit-scrollbar-thumb:hover {
background: #0090d0;
}
</style> </style>
\ No newline at end of file
src/components/DashboardModules/TrendAnalysis.vue
View file @ d9dd0967
...@@ -12,23 +12,23 @@ ...@@ -12,23 +12,23 @@
<script> <script>
export default { export default {
name: 'TrendAnalysis', name: "TrendAnalysis",
props: { props: {
chartType: { chartType: {
type: String, type: String,
default: '24小时' default: "24小时",
} },
}, },
data() { data() {
return { return {
chartInstance: null chartInstance: null,
}; };
}, },
mounted() { mounted() {
// 这里可以初始化图表，例如使用ECharts // 这里可以初始化图表，例如使用ECharts
// 如果需要在父组件中初始化，可以通过$refs访问chartContainer // 如果需要在父组件中初始化，可以通过$refs访问chartContainer
this.$nextTick(() => { this.$nextTick(() => {
this.$emit('chart-ready', this.$refs.chartContainer); this.$emit("chart-ready", this.$refs.chartContainer);
}); });
}, },
beforeDestroy() { beforeDestroy() {
...@@ -37,10 +37,479 @@ export default { ...@@ -37,10 +37,479 @@ export default {
this.chartInstance.dispose(); this.chartInstance.dispose();
this.chartInstance = null; this.chartInstance = null;
} }
} },
} };
</script> </script>
<style scoped> <style lang="scss" scoped>
/* 组件样式将从主页面继承 */ /* 组件样式将从主页面继承 */
// 数据模块通用样式
.data-module {
background: rgba(0, 20, 40, 0.85);
border: 1px solid #005080;
border-radius: 0.04rem;
overflow: hidden;
display: flex;
flex-direction: column;
backdrop-filter: blur(0.05rem);
box-shadow: 0 0 0.15rem rgba(0, 100, 200, 0.3);
&:nth-child(1) {
height: 2.2rem;
}
&:nth-child(2) {
height: 2.5rem;
}
&:nth-child(3) {
height: 2rem;
}
}
// 模块头部
.module-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.12rem 0.16rem;
background: linear-gradient(to right, #003060, #005090);
border-bottom: 1px solid #0070b0;
h3 {
margin: 0;
font-size: 0.16rem;
font-weight: 500;
color: #00ffcc;
}
.refresh-icon,
.view-more {
font-size: 0.12rem;
color: #99ccff;
cursor: pointer;
}
.alarm-count {
background-color: #ff3333;
color: #fff;
padding: 0.02rem 0.08rem;
border-radius: 0.1rem;
font-size: 0.12rem;
font-weight: bold;
}
.time-range,
.chart-type,
.system-time {
font-size: 0.12rem;
color: #66ccff;
}
}
// 模块内容区
.module-body {
flex: 1;
padding: 0.16rem;
overflow: hidden;
}
// 数据总览样式
.data-stats {
display: flex;
justify-content: space-between;
margin-bottom: 0.16rem;
}
.stat-item {
display: flex;
flex-direction: column;
align-items: center;
min-width: 0.8rem;
}
.stat-label {
font-size: 0.12rem;
color: #99ccff;
margin-bottom: 0.05rem;
}
.stat-value {
font-size: 0.2rem;
font-weight: bold;
color: #ffffff;
&.online {
color: #00ff00;
}
}
.progress-bars {
margin-top: 0.1rem;
}
.progress-item {
display: flex;
align-items: center;
gap: 0.1rem;
margin-bottom: 0.08rem;
}
.progress-label {
font-size: 0.12rem;
color: #ffffff;
width: 0.8rem;
}
.progress-container {
flex: 1;
height: 0.06rem;
background: rgba(0, 40, 80, 0.6);
border: 1px solid #005080;
border-radius: 0.03rem;
overflow: hidden;
}
.progress-bar {
height: 100%;
background: linear-gradient(to right, #00aaff, #00ffcc);
box-shadow: 0 0 0.05rem rgba(0, 255, 204, 0.7);
}
.progress-value {
font-size: 0.12rem;
color: #00ffcc;
font-weight: bold;
width: 0.4rem;
text-align: right;
}
// 报警列表样式
.alarm-list {
height: 100%;
overflow-y: auto;
&::-webkit-scrollbar {
width: 0.04rem;
}
&::-webkit-scrollbar-track {
background: rgba(0, 40, 80, 0.5);
}
&::-webkit-scrollbar-thumb {
background: #0070b0;
border-radius: 0.02rem;
}
}
.alarm-item {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.1rem;
margin-bottom: 0.08rem;
border-radius: 0.04rem;
border-left: 3px solid;
background: rgba(0, 30, 60, 0.7);
font-size: 0.12rem;
&.level-1 {
border-color: #ff3333;
background: rgba(255, 51, 51, 0.1);
}
&.level-2 {
border-color: #ff9900;
background: rgba(255, 153, 0, 0.1);
}
&.level-3 {
border-color: #ffff00;
background: rgba(255, 255, 0, 0.1);
}
}
.alarm-level {
font-weight: bold;
width: 0.35rem;
.alarm-item.level-1 & {
color: #ff3333;
}
.alarm-item.level-2 & {
color: #ff9900;
}
.alarm-item.level-3 & {
color: #ffff00;
}
}
.alarm-content {
flex: 1;
color: #ffffff;
}
.alarm-point {
color: #99ccff;
width: 0.5rem;
}
.alarm-time {
color: #66ccff;
font-size: 0.11rem;
}
// 环境数据样式
.env-data-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.15rem;
height: 100%;
}
.env-item {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: rgba(0, 30, 60, 0.7);
border-radius: 0.04rem;
border: 1px solid #005080;
padding: 0.1rem;
}
.env-icon {
width: 0.3rem;
height: 0.3rem;
margin-bottom: 0.08rem;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
.env-icon.temp {
background-image: url("/static/images/temp-icon.png");
}
.env-icon.humidity {
background-image: url("/static/images/humidity-icon.png");
}
.env-icon.pressure {
background-image: url("/static/images/pressure-icon.png");
}
.env-icon.wind {
background-image: url("/static/images/wind-icon.png");
}
.env-label {
font-size: 0.12rem;
color: #99ccff;
margin-bottom: 0.05rem;
}
.env-value {
font-size: 0.16rem;
font-weight: bold;
color: #00ffcc;
}
// 图表容器
.chart-container {
width: 100%;
height: 100%;
min-height: 1.5rem;
}
// 设备状态列表
.device-status-list {
height: 100%;
overflow-y: auto;
&::-webkit-scrollbar {
width: 0.04rem;
}
&::-webkit-scrollbar-track {
background: rgba(0, 40, 80, 0.5);
}
&::-webkit-scrollbar-thumb {
background: #0070b0;
border-radius: 0.02rem;
}
}
.device-item {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.1rem 0;
border-bottom: 1px solid rgba(0, 100, 200, 0.2);
font-size: 0.12rem;
&:last-child {
border-bottom: none;
}
}
.device-name {
color: #ffffff;
width: 0.8rem;
}
.device-status {
padding: 0.02rem 0.08rem;
border-radius: 0.03rem;
font-size: 0.11rem;
font-weight: bold;
&.normal {
background: rgba(0, 255, 0, 0.2);
color: #00ff00;
}
&.warning {
background: rgba(255, 153, 0, 0.2);
color: #ff9900;
}
&.offline {
background: rgba(255, 51, 51, 0.2);
color: #ff3333;
}
}
.device-value {
color: #00ffcc;
font-weight: bold;
width: 0.6rem;
text-align: right;
}
.device-time {
color: #66ccff;
font-size: 0.11rem;
}
// 系统资源监控
.system-resources {
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-around;
}
.resource-item {
display: flex;
align-items: center;
gap: 0.1rem;
}
.resource-label {
font-size: 0.12rem;
color: #ffffff;
width: 0.9rem;
}
.resource-bar-container {
flex: 1;
height: 0.08rem;
background: rgba(0, 40, 80, 0.6);
border: 1px solid #005080;
border-radius: 0.04rem;
overflow: hidden;
}
.resource-bar {
height: 100%;
box-shadow: 0 0 0.05rem;
&.cpu-bar {
background: linear-gradient(to right, #00aaff, #00ffcc);
box-shadow: 0 0 0.05rem rgba(0, 255, 204, 0.7);
}
&.mem-bar {
background: linear-gradient(to right, #ff9900, #ffcc00);
box-shadow: 0 0 0.05rem rgba(255, 204, 0, 0.7);
}
&.disk-bar {
background: linear-gradient(to right, #00cc66, #00ff99);
box-shadow: 0 0 0.05rem rgba(0, 255, 153, 0.7);
}
}
.resource-value {
font-size: 0.12rem;
font-weight: bold;
width: 0.4rem;
text-align: right;
&.low {
color: #00ff00;
}
&.medium {
color: #ffcc00;
}
&.high {
color: #ff3333;
}
}
// 响应式设计 - 基于1920*1080分辨率的适配
@media (max-width: 1600px) {
html {
font-size: 83.3px; // 1600/1920 * 100
}
}
@media (max-width: 1440px) {
html {
font-size: 75px; // 1440/1920 * 100
}
.left-modules,
.right-modules {
width: 3rem;
}
}
@media (max-width: 1280px) {
html {
font-size: 66.7px; // 1280/1920 * 100
}
.left-modules,
.right-modules {
width: 2.6rem;
}
}
// 修复滚动条样式
*::-webkit-scrollbar {
width: 0.04rem;
height: 0.04rem;
}
*::-webkit-scrollbar-track {
background: rgba(0, 40, 80, 0.3);
border-radius: 0.02rem;
}
*::-webkit-scrollbar-thumb {
background: #0070b0;
border-radius: 0.02rem;
}
*::-webkit-scrollbar-thumb:hover {
background: #0090d0;
}
</style> </style>
\ No newline at end of file
src/views/index.vue
View file @ d9dd0967
...@@ -55,7 +55,7 @@ ...@@ -55,7 +55,7 @@
</nav> --> </nav> -->
<!-- 主内容区 --> <!-- 主内容区 -->
<main class="main-content" style="display: none1"> <!-- <main class="main-content" style="display: none1"> -->
<!-- 左侧数据模块 --> <!-- 左侧数据模块 -->
<div class="left-modules"> <div class="left-modules">
<!-- 模块1：数据总览 --> <!-- 模块1：数据总览 -->
...@@ -79,7 +79,7 @@ ...@@ -79,7 +79,7 @@
<!-- 模块6：系统负载 --> <!-- 模块6：系统负载 -->
<SystemLoad :current-time="currentTimeShort" /> <SystemLoad :current-time="currentTimeShort" />
</div> </div>
</main> <!-- </main> -->
</div> </div>
</template> </template>
...@@ -845,476 +845,6 @@ html { ...@@ -845,476 +845,6 @@ html {
right: 0; right: 0;
} }
// 数据模块通用样式
.data-module {
background: rgba(0, 20, 40, 0.85);
border: 1px solid #005080;
border-radius: 0.04rem;
overflow: hidden;
display: flex;
flex-direction: column;
backdrop-filter: blur(0.05rem);
box-shadow: 0 0 0.15rem rgba(0, 100, 200, 0.3);
&:nth-child(1) {
height: 2.2rem;
}
&:nth-child(2) {
height: 2.5rem;
}
&:nth-child(3) {
height: 2rem;
}
}
// 模块头部
.module-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.12rem 0.16rem;
background: linear-gradient(to right, #003060, #005090);
border-bottom: 1px solid #0070b0;
h3 {
margin: 0;
font-size: 0.16rem;
font-weight: 500;
color: #00ffcc;
}
.refresh-icon,
.view-more {
font-size: 0.12rem;
color: #99ccff;
cursor: pointer;
}
.alarm-count {
background-color: #ff3333;
color: #fff;
padding: 0.02rem 0.08rem;
border-radius: 0.1rem;
font-size: 0.12rem;
font-weight: bold;
}
.time-range,
.chart-type,
.system-time {
font-size: 0.12rem;
color: #66ccff;
}
}
// 模块内容区
.module-body {
flex: 1;
padding: 0.16rem;
overflow: hidden;
}
// 数据总览样式
.data-stats {
display: flex;
justify-content: space-between;
margin-bottom: 0.16rem;
}
.stat-item {
display: flex;
flex-direction: column;
align-items: center;
min-width: 0.8rem;
}
.stat-label {
font-size: 0.12rem;
color: #99ccff;
margin-bottom: 0.05rem;
}
.stat-value {
font-size: 0.2rem;
font-weight: bold;
color: #ffffff;
&.online {
color: #00ff00;
}
}
.progress-bars {
margin-top: 0.1rem;
}
.progress-item {
display: flex;
align-items: center;
gap: 0.1rem;
margin-bottom: 0.08rem;
}
.progress-label {
font-size: 0.12rem;
color: #ffffff;
width: 0.8rem;
}
.progress-container {
flex: 1;
height: 0.06rem;
background: rgba(0, 40, 80, 0.6);
border: 1px solid #005080;
border-radius: 0.03rem;
overflow: hidden;
}
.progress-bar {
height: 100%;
background: linear-gradient(to right, #00aaff, #00ffcc);
box-shadow: 0 0 0.05rem rgba(0, 255, 204, 0.7);
}
.progress-value {
font-size: 0.12rem;
color: #00ffcc;
font-weight: bold;
width: 0.4rem;
text-align: right;
}
// 报警列表样式
.alarm-list {
height: 100%;
overflow-y: auto;
&::-webkit-scrollbar {
width: 0.04rem;
}
&::-webkit-scrollbar-track {
background: rgba(0, 40, 80, 0.5);
}
&::-webkit-scrollbar-thumb {
background: #0070b0;
border-radius: 0.02rem;
}
}
.alarm-item {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.1rem;
margin-bottom: 0.08rem;
border-radius: 0.04rem;
border-left: 3px solid;
background: rgba(0, 30, 60, 0.7);
font-size: 0.12rem;
&.level-1 {
border-color: #ff3333;
background: rgba(255, 51, 51, 0.1);
}
&.level-2 {
border-color: #ff9900;
background: rgba(255, 153, 0, 0.1);
}
&.level-3 {
border-color: #ffff00;
background: rgba(255, 255, 0, 0.1);
}
}
.alarm-level {
font-weight: bold;
width: 0.35rem;
.alarm-item.level-1 & {
color: #ff3333;
}
.alarm-item.level-2 & {
color: #ff9900;
}
.alarm-item.level-3 & {
color: #ffff00;
}
}
.alarm-content {
flex: 1;
color: #ffffff;
}
.alarm-point {
color: #99ccff;
width: 0.5rem;
}
.alarm-time {
color: #66ccff;
font-size: 0.11rem;
}
// 环境数据样式
.env-data-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.15rem;
height: 100%;
}
.env-item {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: rgba(0, 30, 60, 0.7);
border-radius: 0.04rem;
border: 1px solid #005080;
padding: 0.1rem;
}
.env-icon {
width: 0.3rem;
height: 0.3rem;
margin-bottom: 0.08rem;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
.env-icon.temp {
background-image: url("/static/images/temp-icon.png");
}
.env-icon.humidity {
background-image: url("/static/images/humidity-icon.png");
}
.env-icon.pressure {
background-image: url("/static/images/pressure-icon.png");
}
.env-icon.wind {
background-image: url("/static/images/wind-icon.png");
}
.env-label {
font-size: 0.12rem;
color: #99ccff;
margin-bottom: 0.05rem;
}
.env-value {
font-size: 0.16rem;
font-weight: bold;
color: #00ffcc;
}
// 图表容器
.chart-container {
width: 100%;
height: 100%;
min-height: 1.5rem;
}
// 设备状态列表
.device-status-list {
height: 100%;
overflow-y: auto;
&::-webkit-scrollbar {
width: 0.04rem;
}
&::-webkit-scrollbar-track {
background: rgba(0, 40, 80, 0.5);
}
&::-webkit-scrollbar-thumb {
background: #0070b0;
border-radius: 0.02rem;
}
}
.device-item {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.1rem 0;
border-bottom: 1px solid rgba(0, 100, 200, 0.2);
font-size: 0.12rem;
&:last-child {
border-bottom: none;
}
}
.device-name {
color: #ffffff;
width: 0.8rem;
}
.device-status {
padding: 0.02rem 0.08rem;
border-radius: 0.03rem;
font-size: 0.11rem;
font-weight: bold;
&.normal {
background: rgba(0, 255, 0, 0.2);
color: #00ff00;
}
&.warning {
background: rgba(255, 153, 0, 0.2);
color: #ff9900;
}
&.offline {
background: rgba(255, 51, 51, 0.2);
color: #ff3333;
}
}
.device-value {
color: #00ffcc;
font-weight: bold;
width: 0.6rem;
text-align: right;
}
.device-time {
color: #66ccff;
font-size: 0.11rem;
}
// 系统资源监控
.system-resources {
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-around;
}
.resource-item {
display: flex;
align-items: center;
gap: 0.1rem;
}
.resource-label {
font-size: 0.12rem;
color: #ffffff;
width: 0.9rem;
}
.resource-bar-container {
flex: 1;
height: 0.08rem;
background: rgba(0, 40, 80, 0.6);
border: 1px solid #005080;
border-radius: 0.04rem;
overflow: hidden;
}
.resource-bar {
height: 100%;
box-shadow: 0 0 0.05rem;
&.cpu-bar {
background: linear-gradient(to right, #00aaff, #00ffcc);
box-shadow: 0 0 0.05rem rgba(0, 255, 204, 0.7);
}
&.mem-bar {
background: linear-gradient(to right, #ff9900, #ffcc00);
box-shadow: 0 0 0.05rem rgba(255, 204, 0, 0.7);
}
&.disk-bar {
background: linear-gradient(to right, #00cc66, #00ff99);
box-shadow: 0 0 0.05rem rgba(0, 255, 153, 0.7);
}
}
.resource-value {
font-size: 0.12rem;
font-weight: bold;
width: 0.4rem;
text-align: right;
&.low {
color: #00ff00;
}
&.medium {
color: #ffcc00;
}
&.high {
color: #ff3333;
}
}
// 响应式设计 - 基于1920*1080分辨率的适配
@media (max-width: 1600px) {
html {
font-size: 83.3px; // 1600/1920 * 100
}
}
@media (max-width: 1440px) {
html {
font-size: 75px; // 1440/1920 * 100
}
.left-modules,
.right-modules {
width: 3rem;
}
}
@media (max-width: 1280px) {
html {
font-size: 66.7px; // 1280/1920 * 100
}
.left-modules,
.right-modules {
width: 2.6rem;
}
}
// 修复滚动条样式
*::-webkit-scrollbar {
width: 0.04rem;
height: 0.04rem;
}
*::-webkit-scrollbar-track {
background: rgba(0, 40, 80, 0.3);
border-radius: 0.02rem;
}
*::-webkit-scrollbar-thumb {
background: #0070b0;
border-radius: 0.02rem;
}
*::-webkit-scrollbar-thumb:hover {
background: #0090d0;
}
// 新增：类型选择器样式 // 新增：类型选择器样式
.type-selector { .type-selector {
position: absolute; position: absolute;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment