|
|
@@ -5,12 +5,9 @@
|
|
|
v-model="isFullscreen"
|
|
|
fullscreenClass="box-container"
|
|
|
:exit-on-click-wrapper="false"
|
|
|
- :style="{height:isFullscreen?'100vh':'calc(100vh - 97px)'}"
|
|
|
+ :style="{ height: isFullscreen ? '100vh' : 'calc(100vh - 97px)' }"
|
|
|
>
|
|
|
- <div class="box-content">
|
|
|
- <div class="scroll-wrapper">
|
|
|
- <!-- 头部区域 - 跟随滚动 -->
|
|
|
- <div class="header-section">
|
|
|
+ <div class="header-section">
|
|
|
<div class="box-header-scroll">
|
|
|
<div class="logo">
|
|
|
<el-select
|
|
|
@@ -29,7 +26,7 @@
|
|
|
</el-select>
|
|
|
</div>
|
|
|
<div class="header-center">
|
|
|
- <div class="title" style="margin-bottom: 20px;">生产管控</div>
|
|
|
+ <div class="title" style="margin-bottom: 20px">生产管控</div>
|
|
|
</div>
|
|
|
<div class="time">
|
|
|
<div class="time-display">
|
|
|
@@ -172,8 +169,6 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
</vue-fullscreen>
|
|
|
</template>
|
|
|
|
|
|
@@ -830,9 +825,20 @@
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
.box-container {
|
|
|
- // width: 100vw;
|
|
|
- height: 100%;
|
|
|
-
|
|
|
+ width: 100%;
|
|
|
+ background: radial-gradient(
|
|
|
+ ellipse at top,
|
|
|
+ rgba(13, 45, 110, 0.3) 0%,
|
|
|
+ transparent 50%
|
|
|
+ ),
|
|
|
+ radial-gradient(
|
|
|
+ ellipse at bottom,
|
|
|
+ rgba(8, 25, 65, 0.5) 0%,
|
|
|
+ transparent 50%
|
|
|
+ ),
|
|
|
+ linear-gradient(180deg, #0a1630 0%, #0d1f4a 50%, #08152e 100%);
|
|
|
+ overflow: auto;
|
|
|
+ font-family: 'Microsoft YaHei', sans-serif;
|
|
|
.box-header-scroll {
|
|
|
height: 80px;
|
|
|
background: url('~@/assets/pcs/header.png') no-repeat center top;
|
|
|
@@ -919,188 +925,339 @@
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+ .header-section {
|
|
|
+ width: auto;
|
|
|
+ flex-shrink: 0;
|
|
|
+ padding-top: 10px;
|
|
|
+ min-width: 100%;
|
|
|
+ }
|
|
|
|
|
|
- .box-content {
|
|
|
- height: calc(100%);
|
|
|
- background: radial-gradient(
|
|
|
- ellipse at top,
|
|
|
- rgba(13, 45, 110, 0.3) 0%,
|
|
|
- transparent 50%
|
|
|
- ),
|
|
|
- radial-gradient(
|
|
|
- ellipse at bottom,
|
|
|
- rgba(8, 25, 65, 0.5) 0%,
|
|
|
- transparent 50%
|
|
|
- ),
|
|
|
- linear-gradient(180deg, #0a1630 0%, #0d1f4a 50%, #08152e 100%);
|
|
|
- overflow: auto;
|
|
|
- font-family: 'Microsoft YaHei', sans-serif;
|
|
|
- flex: 1;
|
|
|
- // overflow-x: auto;
|
|
|
- // overflow-y: hidden;
|
|
|
-
|
|
|
- &::-webkit-scrollbar {
|
|
|
- height: 6px;
|
|
|
- }
|
|
|
+ .two-column-layout {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ // min-height: 850px;
|
|
|
+ height: calc(100% - 130px);
|
|
|
+ min-width: 100%;
|
|
|
+ margin-top: 20px;
|
|
|
+ font-size: 0;
|
|
|
+ background: url('~@/assets/pcs/back.png') no-repeat center top;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ }
|
|
|
|
|
|
- &::-webkit-scrollbar-track {
|
|
|
- background: rgba(12, 32, 70, 0.4);
|
|
|
- }
|
|
|
+ .left-section,
|
|
|
+ .right-section {
|
|
|
+ display: inline-flex;
|
|
|
+ flex-direction: column;
|
|
|
+ gap: 15px;
|
|
|
+ overflow: hidden;
|
|
|
+ height: 100%;
|
|
|
+ font-size: 14px;
|
|
|
+ white-space: normal;
|
|
|
+ min-width: 45%;
|
|
|
+ flex: 1;
|
|
|
+ margin-right: 20px;
|
|
|
|
|
|
- &::-webkit-scrollbar-thumb {
|
|
|
- background: linear-gradient(180deg, #1a4a8a, #0d2a5a);
|
|
|
- border-radius: 3px;
|
|
|
+ &:last-child {
|
|
|
+ margin-right: 0;
|
|
|
}
|
|
|
+ }
|
|
|
|
|
|
- .scroll-wrapper {
|
|
|
- // display: flex;
|
|
|
- display: inline-block;
|
|
|
- height: 100%;
|
|
|
- // flex-direction: column;
|
|
|
- // gap: 20px;
|
|
|
- // padding: 0 20px 20px 20px;
|
|
|
- width: 100%;
|
|
|
- .header-section {
|
|
|
- width: auto;
|
|
|
- flex-shrink: 0;
|
|
|
- padding-top: 10px;
|
|
|
- min-width: 100%;
|
|
|
- }
|
|
|
+ .panel {
|
|
|
+ // background: linear-gradient(
|
|
|
+ // 135deg,
|
|
|
+ // rgba(16, 42, 88, 0.9) 0%,
|
|
|
+ // rgba(10, 28, 65, 0.85) 100%
|
|
|
+ // );
|
|
|
+ // border: 1px solid rgba(42, 90, 170, 0.4);
|
|
|
+ // border-radius: 8px;
|
|
|
+ padding: 15px;
|
|
|
+ min-height: 0;
|
|
|
+ // box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05),
|
|
|
+ // 0 4px 20px rgba(0, 0, 0, 0.3);
|
|
|
+
|
|
|
+ .panel-title {
|
|
|
+ font-size: 24px;
|
|
|
+ // font-weight: bold;
|
|
|
+ // font-style: italic;
|
|
|
+ font-family: 'YouSheBiaoTiHei', 'Microsoft YaHei', sans-serif;
|
|
|
+ color: #fff;
|
|
|
+ margin-bottom: 15px;
|
|
|
+ height: 42px;
|
|
|
+ padding-left: 40px;
|
|
|
+ position: relative;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ background: url('~@/assets/pcs/titleb.png') no-repeat center top;
|
|
|
+ background-size: 100% 100%;
|
|
|
|
|
|
- .two-column-layout {
|
|
|
+ &.energy-title {
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
- flex: 1;
|
|
|
- // min-height: 850px;
|
|
|
- height: calc(100% - 130px);
|
|
|
- min-width: 100%;
|
|
|
- margin-top: 20px;
|
|
|
- font-size: 0;
|
|
|
- background: url('~@/assets/pcs/back.png') no-repeat center top;
|
|
|
+ padding-right: 15px;
|
|
|
+
|
|
|
+ .title-left {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 8px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .panel-icon {
|
|
|
+ position: absolute;
|
|
|
+ left: 15px;
|
|
|
+ width: 20px;
|
|
|
+ height: 25px;
|
|
|
+ background: url('~@/assets/pcs/titleIcon.png') no-repeat center top;
|
|
|
background-size: 100% 100%;
|
|
|
}
|
|
|
}
|
|
|
+ .energy-tabs {
|
|
|
+ position: absolute;
|
|
|
+ top: 65px;
|
|
|
+ right: 40px;
|
|
|
+ z-index: 999;
|
|
|
+ display: flex;
|
|
|
+ gap: 0;
|
|
|
+ background: rgba(13, 41, 96, 0.5);
|
|
|
+ border-radius: 4px;
|
|
|
+ padding: 2px;
|
|
|
+
|
|
|
+ .tab-item {
|
|
|
+ padding: 4px 12px;
|
|
|
+ font-size: 12px;
|
|
|
+ color: #8ba3c7;
|
|
|
+ cursor: pointer;
|
|
|
+ border-radius: 3px;
|
|
|
+ transition: all 0.3s;
|
|
|
|
|
|
- .left-section,
|
|
|
- .right-section {
|
|
|
- display: inline-flex;
|
|
|
- flex-direction: column;
|
|
|
- gap: 15px;
|
|
|
- overflow: hidden;
|
|
|
- height: 100%;
|
|
|
- font-size: 14px;
|
|
|
- white-space: normal;
|
|
|
- min-width: 45%;
|
|
|
- flex: 1;
|
|
|
- margin-right: 20px;
|
|
|
+ &:hover {
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
|
|
|
- &:last-child {
|
|
|
- margin-right: 0;
|
|
|
+ &.active {
|
|
|
+ background: linear-gradient(135deg, #3b82f6, #1a6fd9);
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
+ }
|
|
|
|
|
|
- .panel {
|
|
|
- // background: linear-gradient(
|
|
|
- // 135deg,
|
|
|
- // rgba(16, 42, 88, 0.9) 0%,
|
|
|
- // rgba(10, 28, 65, 0.85) 100%
|
|
|
- // );
|
|
|
- // border: 1px solid rgba(42, 90, 170, 0.4);
|
|
|
- // border-radius: 8px;
|
|
|
- padding: 15px;
|
|
|
- min-height: 0;
|
|
|
- // box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05),
|
|
|
- // 0 4px 20px rgba(0, 0, 0, 0.3);
|
|
|
-
|
|
|
- .panel-title {
|
|
|
- font-size: 24px;
|
|
|
- // font-weight: bold;
|
|
|
- // font-style: italic;
|
|
|
- font-family: 'YouSheBiaoTiHei', 'Microsoft YaHei', sans-serif;
|
|
|
- color: #fff;
|
|
|
- margin-bottom: 15px;
|
|
|
- height: 42px;
|
|
|
- padding-left: 40px;
|
|
|
- position: relative;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- background: url('~@/assets/pcs/titleb.png') no-repeat center top;
|
|
|
- background-size: 100% 100%;
|
|
|
+ .data-panel {
|
|
|
+ min-height: 220px;
|
|
|
+ flex-shrink: 0;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ flex: 0.7;
|
|
|
|
|
|
- &.energy-title {
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- padding-right: 15px;
|
|
|
+ .panel-title {
|
|
|
+ flex-shrink: 0;
|
|
|
+ }
|
|
|
|
|
|
- .title-left {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- gap: 8px;
|
|
|
- }
|
|
|
- }
|
|
|
- .panel-icon {
|
|
|
- position: absolute;
|
|
|
- left: 15px;
|
|
|
- width: 20px;
|
|
|
- height: 25px;
|
|
|
- background: url('~@/assets/pcs/titleIcon.png') no-repeat center top;
|
|
|
+ .data-grid {
|
|
|
+ display: flex;
|
|
|
+
|
|
|
+ gap: 12px;
|
|
|
+ // padding: 10px 0;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ overflow: hidden;
|
|
|
+ height: 100%;
|
|
|
+
|
|
|
+ .data-item {
|
|
|
+ // background: linear-gradient(
|
|
|
+ // 135deg,
|
|
|
+ // rgba(20, 50, 105, 0.9) 0%,
|
|
|
+ // rgba(14, 38, 82, 0.85) 100%
|
|
|
+ // );
|
|
|
+ // border: 1px solid rgba(45, 95, 180, 0.5);
|
|
|
+ .img {
|
|
|
+ width: 35px;
|
|
|
+ height: 35px;
|
|
|
+ background: url('~@/assets/pcs/icon.png') no-repeat center top;
|
|
|
background-size: 100% 100%;
|
|
|
}
|
|
|
- }
|
|
|
- .energy-tabs {
|
|
|
- position: absolute;
|
|
|
- top: 65px;
|
|
|
- right: 40px;
|
|
|
- z-index: 999;
|
|
|
+ border-radius: 6px;
|
|
|
display: flex;
|
|
|
- gap: 0;
|
|
|
- background: rgba(13, 41, 96, 0.5);
|
|
|
- border-radius: 4px;
|
|
|
- padding: 2px;
|
|
|
+ .data-item_value {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ // align-items: center;
|
|
|
+ }
|
|
|
+ // flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ // justify-content: center;
|
|
|
+ padding-left: 15px;
|
|
|
+ gap: 8px;
|
|
|
+ position: relative;
|
|
|
+ overflow: hidden;
|
|
|
+ width: 21%;
|
|
|
+ height: 60px;
|
|
|
+ background: url('~@/assets/pcs/leftItem.png') no-repeat center top;
|
|
|
+ background-size: 100% 100%;
|
|
|
|
|
|
- .tab-item {
|
|
|
- padding: 4px 12px;
|
|
|
+ // &::before {
|
|
|
+ // content: '';
|
|
|
+ // position: absolute;
|
|
|
+ // top: 0;
|
|
|
+ // left: 0;
|
|
|
+ // right: 0;
|
|
|
+ // height: 2px;
|
|
|
+ // background: linear-gradient(
|
|
|
+ // 90deg,
|
|
|
+ // transparent,
|
|
|
+ // #00d4ff,
|
|
|
+ // transparent
|
|
|
+ // );
|
|
|
+ // box-shadow: 0 0 8px rgba(0, 212, 255, 0.6);
|
|
|
+ // }
|
|
|
+
|
|
|
+ .data-label {
|
|
|
font-size: 12px;
|
|
|
color: #8ba3c7;
|
|
|
- cursor: pointer;
|
|
|
- border-radius: 3px;
|
|
|
- transition: all 0.3s;
|
|
|
-
|
|
|
- &:hover {
|
|
|
- color: #fff;
|
|
|
- }
|
|
|
+ text-align: center;
|
|
|
+ line-height: 1.3;
|
|
|
+ }
|
|
|
|
|
|
- &.active {
|
|
|
- background: linear-gradient(135deg, #3b82f6, #1a6fd9);
|
|
|
- color: #fff;
|
|
|
- }
|
|
|
+ .data-value {
|
|
|
+ font-size: 18px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #b6ceff;
|
|
|
+ text-shadow: 0 0 10px rgba(0, 212, 255, 0.5);
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+ }
|
|
|
+
|
|
|
+ .chart-panel {
|
|
|
+ flex: 1;
|
|
|
+ min-height: 250px;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+
|
|
|
+ .chart-container {
|
|
|
+ width: 100%;
|
|
|
+ flex: 1;
|
|
|
+ min-height: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .param-card3 {
|
|
|
+ right: 10px;
|
|
|
+ }
|
|
|
+ .param-card2 {
|
|
|
+ left: 30%;
|
|
|
+ }
|
|
|
+ .param-card {
|
|
|
+ width: 23%;
|
|
|
+ top: 50px;
|
|
|
+
|
|
|
+ position: absolute;
|
|
|
+ background: rgba(39, 88, 233, 0.1);
|
|
|
+ border: 1px solid #3373d4;
|
|
|
+ border-radius: 8px;
|
|
|
+
|
|
|
+ &::before {
|
|
|
+ content: '';
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ height: 2px;
|
|
|
+ background: linear-gradient(90deg, transparent, #00d4ff, transparent);
|
|
|
+ box-shadow: 0 0 8px rgba(0, 212, 255, 0.5);
|
|
|
+ }
|
|
|
+
|
|
|
+ .param-title {
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #fff;
|
|
|
+ padding-bottom: 12px;
|
|
|
+ padding-top: 12px;
|
|
|
+ text-align: center;
|
|
|
+ text-shadow: 0 0 10px rgba(0, 212, 255, 0.3);
|
|
|
+ border-bottom: 1px solid rgba(0, 212, 255, 0.5);
|
|
|
+ background: rgba(39, 88, 233, 0.1);
|
|
|
+ }
|
|
|
+
|
|
|
+ .param-list {
|
|
|
+ padding: 15px;
|
|
|
|
|
|
- .data-panel {
|
|
|
- min-height: 220px;
|
|
|
- flex-shrink: 0;
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
- flex: 0.7;
|
|
|
+ gap: 10px;
|
|
|
+
|
|
|
+ .param-item {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ font-size: 12px;
|
|
|
+ padding: 4px 0;
|
|
|
+ // border-bottom: 1px dashed rgba(138, 163, 199, 0.2);
|
|
|
+
|
|
|
+ &:last-child {
|
|
|
+ border-bottom: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ .param-name {
|
|
|
+ color: #8ba3c7;
|
|
|
+ }
|
|
|
|
|
|
- .panel-title {
|
|
|
- flex-shrink: 0;
|
|
|
+ .param-value {
|
|
|
+ color: #fff;
|
|
|
+ font-weight: 500;
|
|
|
+ }
|
|
|
}
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
- .data-grid {
|
|
|
- display: flex;
|
|
|
+ .pipeline-container {
|
|
|
+ flex: 1;
|
|
|
+ min-height: 0;
|
|
|
+ position: absolute;
|
|
|
+ bottom: 15px;
|
|
|
+ left: 0;
|
|
|
+ height: 60%;
|
|
|
+ width: 100%;
|
|
|
+ // background: linear-gradient(
|
|
|
+ // 135deg,
|
|
|
+ // rgba(14, 40, 85, 0.6) 0%,
|
|
|
+ // rgba(10, 28, 60, 0.5) 100%
|
|
|
+ // );
|
|
|
+ // border: 1px solid rgba(45, 95, 180, 0.3);
|
|
|
+ // border-radius: 8px;
|
|
|
+ background: url('~@/assets/pcs/home.png') no-repeat center top;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ // max-height: 680px;
|
|
|
+ }
|
|
|
|
|
|
- gap: 12px;
|
|
|
- // padding: 10px 0;
|
|
|
- align-items: center;
|
|
|
- justify-content: space-between;
|
|
|
- flex-wrap: wrap;
|
|
|
- overflow: hidden;
|
|
|
+ .alert-panel {
|
|
|
+ min-height: 220px;
|
|
|
+ flex-shrink: 0;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ flex: 0.7;
|
|
|
+
|
|
|
+ .panel-title {
|
|
|
+ flex-shrink: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .alert-stats {
|
|
|
+ flex: 1;
|
|
|
+ min-height: 0;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ height: calc(100% - 35px);
|
|
|
+ // gap: 20px;
|
|
|
+
|
|
|
+ // 左侧数据卡片区域
|
|
|
+ .alert-cards {
|
|
|
+ width: 50%;
|
|
|
height: 100%;
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ justify-content: space-around;
|
|
|
+ align-items: center;
|
|
|
|
|
|
- .data-item {
|
|
|
+ .alert-card-item {
|
|
|
+ width: 42%;
|
|
|
// background: linear-gradient(
|
|
|
// 135deg,
|
|
|
// rgba(20, 50, 105, 0.9) 0%,
|
|
|
@@ -1112,6 +1269,7 @@
|
|
|
height: 35px;
|
|
|
background: url('~@/assets/pcs/icon.png') no-repeat center top;
|
|
|
background-size: 100% 100%;
|
|
|
+ margin-right: 15px;
|
|
|
}
|
|
|
border-radius: 6px;
|
|
|
display: flex;
|
|
|
@@ -1124,11 +1282,10 @@
|
|
|
align-items: center;
|
|
|
// justify-content: center;
|
|
|
padding-left: 15px;
|
|
|
- gap: 8px;
|
|
|
+ // gap: 8px;
|
|
|
position: relative;
|
|
|
overflow: hidden;
|
|
|
- width: 21%;
|
|
|
- height: 60px;
|
|
|
+ height: 30%;
|
|
|
background: url('~@/assets/pcs/leftItem.png') no-repeat center top;
|
|
|
background-size: 100% 100%;
|
|
|
|
|
|
@@ -1163,247 +1320,52 @@
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
- }
|
|
|
-
|
|
|
- .chart-panel {
|
|
|
- flex: 1;
|
|
|
- min-height: 250px;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
-
|
|
|
- .chart-container {
|
|
|
- width: 100%;
|
|
|
- flex: 1;
|
|
|
- min-height: 0;
|
|
|
- }
|
|
|
- }
|
|
|
- .param-card3 {
|
|
|
- right: 10px;
|
|
|
- }
|
|
|
- .param-card2 {
|
|
|
- left: 30%;
|
|
|
- }
|
|
|
- .param-card {
|
|
|
- width: 23%;
|
|
|
- top: 50px;
|
|
|
-
|
|
|
- position: absolute;
|
|
|
- background: rgba(39, 88, 233, 0.1);
|
|
|
- border: 1px solid #3373d4;
|
|
|
- border-radius: 8px;
|
|
|
-
|
|
|
- &::before {
|
|
|
- content: '';
|
|
|
- position: absolute;
|
|
|
- top: 0;
|
|
|
- left: 0;
|
|
|
- right: 0;
|
|
|
- height: 2px;
|
|
|
- background: linear-gradient(90deg, transparent, #00d4ff, transparent);
|
|
|
- box-shadow: 0 0 8px rgba(0, 212, 255, 0.5);
|
|
|
- }
|
|
|
-
|
|
|
- .param-title {
|
|
|
- font-size: 14px;
|
|
|
- font-weight: bold;
|
|
|
- color: #fff;
|
|
|
- padding-bottom: 12px;
|
|
|
- padding-top: 12px;
|
|
|
- text-align: center;
|
|
|
- text-shadow: 0 0 10px rgba(0, 212, 255, 0.3);
|
|
|
- border-bottom: 1px solid rgba(0, 212, 255, 0.5);
|
|
|
- background: rgba(39, 88, 233, 0.1);
|
|
|
- }
|
|
|
-
|
|
|
- .param-list {
|
|
|
- padding: 15px;
|
|
|
-
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- gap: 10px;
|
|
|
-
|
|
|
- .param-item {
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- font-size: 12px;
|
|
|
- padding: 4px 0;
|
|
|
- // border-bottom: 1px dashed rgba(138, 163, 199, 0.2);
|
|
|
-
|
|
|
- &:last-child {
|
|
|
- border-bottom: none;
|
|
|
- }
|
|
|
-
|
|
|
- .param-name {
|
|
|
- color: #8ba3c7;
|
|
|
- }
|
|
|
-
|
|
|
- .param-value {
|
|
|
- color: #fff;
|
|
|
- font-weight: 500;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .pipeline-container {
|
|
|
- flex: 1;
|
|
|
- min-height: 0;
|
|
|
- position: absolute;
|
|
|
- bottom: 15px;
|
|
|
- left: 0;
|
|
|
- height: 60%;
|
|
|
- width: 100%;
|
|
|
- // background: linear-gradient(
|
|
|
- // 135deg,
|
|
|
- // rgba(14, 40, 85, 0.6) 0%,
|
|
|
- // rgba(10, 28, 60, 0.5) 100%
|
|
|
- // );
|
|
|
- // border: 1px solid rgba(45, 95, 180, 0.3);
|
|
|
- // border-radius: 8px;
|
|
|
- background: url('~@/assets/pcs/home.png') no-repeat center top;
|
|
|
- background-size: 100% 100%;
|
|
|
- // max-height: 680px;
|
|
|
- }
|
|
|
-
|
|
|
- .alert-panel {
|
|
|
- min-height: 220px;
|
|
|
- flex-shrink: 0;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- flex: 0.7;
|
|
|
-
|
|
|
- .panel-title {
|
|
|
- flex-shrink: 0;
|
|
|
- }
|
|
|
|
|
|
- .alert-stats {
|
|
|
- flex: 1;
|
|
|
- min-height: 0;
|
|
|
+ // 右侧环形图区域
|
|
|
+ .alert-pie-chart {
|
|
|
+ width: 50%;
|
|
|
+ height: 100%;
|
|
|
+ position: relative;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
- height: calc(100% - 35px);
|
|
|
- // gap: 20px;
|
|
|
-
|
|
|
- // 左侧数据卡片区域
|
|
|
- .alert-cards {
|
|
|
- width: 50%;
|
|
|
- height: 100%;
|
|
|
- display: flex;
|
|
|
- flex-wrap: wrap;
|
|
|
- justify-content: space-around;
|
|
|
- align-items: center;
|
|
|
-
|
|
|
- .alert-card-item {
|
|
|
- width: 42%;
|
|
|
- // background: linear-gradient(
|
|
|
- // 135deg,
|
|
|
- // rgba(20, 50, 105, 0.9) 0%,
|
|
|
- // rgba(14, 38, 82, 0.85) 100%
|
|
|
- // );
|
|
|
- // border: 1px solid rgba(45, 95, 180, 0.5);
|
|
|
- .img {
|
|
|
- width: 35px;
|
|
|
- height: 35px;
|
|
|
- background: url('~@/assets/pcs/icon.png') no-repeat center top;
|
|
|
- background-size: 100% 100%;
|
|
|
- margin-right: 15px;
|
|
|
- }
|
|
|
- border-radius: 6px;
|
|
|
- display: flex;
|
|
|
- .data-item_value {
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- // align-items: center;
|
|
|
- }
|
|
|
- // flex-direction: column;
|
|
|
- align-items: center;
|
|
|
- // justify-content: center;
|
|
|
- padding-left: 15px;
|
|
|
- // gap: 8px;
|
|
|
- position: relative;
|
|
|
- overflow: hidden;
|
|
|
- height: 30%;
|
|
|
- background: url('~@/assets/pcs/leftItem.png') no-repeat center top;
|
|
|
- background-size: 100% 100%;
|
|
|
-
|
|
|
- // &::before {
|
|
|
- // content: '';
|
|
|
- // position: absolute;
|
|
|
- // top: 0;
|
|
|
- // left: 0;
|
|
|
- // right: 0;
|
|
|
- // height: 2px;
|
|
|
- // background: linear-gradient(
|
|
|
- // 90deg,
|
|
|
- // transparent,
|
|
|
- // #00d4ff,
|
|
|
- // transparent
|
|
|
- // );
|
|
|
- // box-shadow: 0 0 8px rgba(0, 212, 255, 0.6);
|
|
|
- // }
|
|
|
-
|
|
|
- .data-label {
|
|
|
- font-size: 12px;
|
|
|
- color: #8ba3c7;
|
|
|
- text-align: center;
|
|
|
- line-height: 1.3;
|
|
|
- }
|
|
|
-
|
|
|
- .data-value {
|
|
|
- font-size: 18px;
|
|
|
- font-weight: bold;
|
|
|
- color: #b6ceff;
|
|
|
- text-shadow: 0 0 10px rgba(0, 212, 255, 0.5);
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
+ justify-content: center;
|
|
|
|
|
|
- // 右侧环形图区域
|
|
|
- .alert-pie-chart {
|
|
|
- width: 50%;
|
|
|
+ .alert-pie {
|
|
|
+ width: 100%;
|
|
|
height: 100%;
|
|
|
- position: relative;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
-
|
|
|
- .alert-pie {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- min-height: 180px;
|
|
|
- }
|
|
|
+ min-height: 180px;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+ }
|
|
|
|
|
|
- .alert-list-panel {
|
|
|
+ .alert-list-panel {
|
|
|
+ flex: 1;
|
|
|
+ min-height: 0;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ min-height: 250px;
|
|
|
+
|
|
|
+ .alert-table {
|
|
|
flex: 1;
|
|
|
min-height: 0;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- min-height: 250px;
|
|
|
-
|
|
|
- .alert-table {
|
|
|
- flex: 1;
|
|
|
- min-height: 0;
|
|
|
- overflow: hidden;
|
|
|
+ overflow: hidden;
|
|
|
|
|
|
- .table-header {
|
|
|
- display: grid;
|
|
|
- grid-template-columns: 50px 90px 100px 70px 1fr 130px 70px;
|
|
|
- gap: 6px;
|
|
|
- padding: 10px 6px;
|
|
|
- background: linear-gradient(
|
|
|
- 90deg,
|
|
|
- rgba(16, 45, 95, 0.9) 0%,
|
|
|
- rgba(12, 35, 75, 0.85) 100%
|
|
|
- );
|
|
|
- font-size: 12px;
|
|
|
- color: #00d4ff;
|
|
|
- text-align: center;
|
|
|
- font-weight: 500;
|
|
|
- border-bottom: 1px solid rgba(45, 95, 180, 0.4);
|
|
|
- }
|
|
|
+ .table-header {
|
|
|
+ display: grid;
|
|
|
+ grid-template-columns: 50px 90px 100px 70px 1fr 130px 70px;
|
|
|
+ gap: 6px;
|
|
|
+ padding: 10px 6px;
|
|
|
+ background: linear-gradient(
|
|
|
+ 90deg,
|
|
|
+ rgba(16, 45, 95, 0.9) 0%,
|
|
|
+ rgba(12, 35, 75, 0.85) 100%
|
|
|
+ );
|
|
|
+ font-size: 12px;
|
|
|
+ color: #00d4ff;
|
|
|
+ text-align: center;
|
|
|
+ font-weight: 500;
|
|
|
+ border-bottom: 1px solid rgba(45, 95, 180, 0.4);
|
|
|
}
|
|
|
}
|
|
|
}
|
