Skip to content

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

add：组件样式

parent 8dab8b67
Hide 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 {
};
</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>
\ No newline at end of file
src/components/DashboardModules/DeviceStatus.vue
View file @ d9dd0967
......@@ -67,6 +67,476 @@ export default {
}
</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>
\ No newline at end of file
src/components/DashboardModules/EnvironmentalMonitoring.vue
View file @ d9dd0967
......@@ -53,6 +53,476 @@ export default {
}
</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>
\ No newline at end of file
src/components/DashboardModules/RealTimeAlarm.vue
View file @ d9dd0967
......@@ -68,6 +68,476 @@ export default {
}
</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>
\ No newline at end of file
src/components/DashboardModules/SystemLoad.vue
View file @ d9dd0967
......@@ -58,6 +58,476 @@ export default {
};
</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>
\ No newline at end of file
src/components/DashboardModules/TrendAnalysis.vue
View file @ d9dd0967
......@@ -12,23 +12,23 @@
<script>
export default {
name: 'TrendAnalysis',
name: "TrendAnalysis",
props: {
chartType: {
type: String,
default: '24小时'
}
default: "24小时",
},
},
data() {
return {
chartInstance: null
chartInstance: null,
};
},
mounted() {
// 这里可以初始化图表，例如使用ECharts
// 如果需要在父组件中初始化，可以通过$refs访问chartContainer
this.$nextTick(() => {
this.$emit('chart-ready', this.$refs.chartContainer);
this.$emit("chart-ready", this.$refs.chartContainer);
});
},
beforeDestroy() {
......@@ -37,10 +37,479 @@ export default {
this.chartInstance.dispose();
this.chartInstance = null;
}
}
}
},
};
</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>
\ No newline at end of file
src/views/index.vue
View file @ d9dd0967
......@@ -55,31 +55,31 @@
</nav> -->
<!-- 主内容区 -->
<main class="main-content" style="display: none1">
<!-- 左侧数据模块 -->
<div class="left-modules">
<!-- 模块1：数据总览 -->
<DataOverview @refresh-data="handleRefreshData" />
<!-- <main class="main-content" style="display: none1"> -->
<!-- 左侧数据模块 -->
<div class="left-modules">
<!-- 模块1：数据总览 -->
<DataOverview @refresh-data="handleRefreshData" />
<!-- 模块2：实时报警 -->
<RealTimeAlarm />
<!-- 模块2：实时报警 -->
<RealTimeAlarm />
<!-- 模块3：环境监测 -->
<EnvironmentalMonitoring />
</div>
<!-- 模块3：环境监测 -->
<EnvironmentalMonitoring />
</div>
<!-- 右侧数据模块 -->
<div class="right-modules">
<!-- 模块4：趋势分析 -->
<TrendAnalysis @chart-ready="handleChartReady" />
<!-- 右侧数据模块 -->
<div class="right-modules">
<!-- 模块4：趋势分析 -->
<TrendAnalysis @chart-ready="handleChartReady" />
<!-- 模块5：设备状态 -->
<DeviceStatus @view-more="handleViewMoreDevices" />
<!-- 模块5：设备状态 -->
<DeviceStatus @view-more="handleViewMoreDevices" />
<!-- 模块6：系统负载 -->
<SystemLoad :current-time="currentTimeShort" />
</div>
</main>
<!-- 模块6：系统负载 -->
<SystemLoad :current-time="currentTimeShort" />
</div>
<!-- </main> -->
</div>
</template>
......@@ -845,476 +845,6 @@ html {
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 {
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