|
|
@@ -7,178 +7,186 @@
|
|
|
:exit-on-click-wrapper="false"
|
|
|
>
|
|
|
<div class="box-container" v-cloak>
|
|
|
- <!-- 中间内容区域 - 可左右滚动，头部跟随 -->
|
|
|
+ <!-- 中间内容区域 -->
|
|
|
<div class="box-content">
|
|
|
- <div class="scroll-wrapper">
|
|
|
- <!-- 头部区域 - 跟随滚动 -->
|
|
|
- <div class="header-section">
|
|
|
- <div class="box-header-scroll">
|
|
|
- <div class="logo">
|
|
|
- <el-select
|
|
|
- v-model="stationId"
|
|
|
- placeholder="请选择"
|
|
|
- class="custom-select"
|
|
|
- popper-class="custom-select-dropdown"
|
|
|
- :popper-append-to-body="false"
|
|
|
- @change="init"
|
|
|
- >
|
|
|
- <el-option
|
|
|
- v-for="item in selectOptions"
|
|
|
- :key="item.value"
|
|
|
- :label="item.label"
|
|
|
- :value="item.value"
|
|
|
- />
|
|
|
- </el-select>
|
|
|
- </div>
|
|
|
- <div class="header-center">
|
|
|
- <div class="title">克拉玛依宇信工业科技股份有限公司</div>
|
|
|
- </div>
|
|
|
- <div class="time">
|
|
|
- <div class="time-display">
|
|
|
- <span class="date-text">{{ date }}</span>
|
|
|
- <span class="time-text">{{ time }}</span>
|
|
|
- </div>
|
|
|
- <span class="fullscreen-toggle" @click.passive="onFullscreen">
|
|
|
- <i
|
|
|
- v-if="isFullscreen"
|
|
|
- title="取消全屏"
|
|
|
- class="el-icon-_screen-restore"
|
|
|
- />
|
|
|
- <i v-else title="全屏" class="el-icon-_screen-full" />
|
|
|
- </span>
|
|
|
+ <!-- 头部区域 -->
|
|
|
+ <div class="header-section">
|
|
|
+ <div class="box-header-scroll">
|
|
|
+ <div class="logo">
|
|
|
+ <el-select
|
|
|
+ v-model="stationId"
|
|
|
+ placeholder="请选择"
|
|
|
+ class="custom-select"
|
|
|
+ popper-class="custom-select-dropdown"
|
|
|
+ :popper-append-to-body="false"
|
|
|
+ @change="init"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="item in selectOptions"
|
|
|
+ :key="item.value"
|
|
|
+ :label="item.label"
|
|
|
+ :value="item.value"
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
+ </div>
|
|
|
+ <div class="header-center">
|
|
|
+ <div class="title">克拉玛依宇信工业科技股份有限公司</div>
|
|
|
+ </div>
|
|
|
+ <div class="time">
|
|
|
+ <div class="time-display">
|
|
|
+ <span class="date-text">{{ date }}</span>
|
|
|
+ <span class="time-text">{{ time }}</span>
|
|
|
</div>
|
|
|
+ <span class="fullscreen-toggle" @click.passive="onFullscreen">
|
|
|
+ <i
|
|
|
+ v-if="isFullscreen"
|
|
|
+ title="取消全屏"
|
|
|
+ class="el-icon-_screen-restore"
|
|
|
+ />
|
|
|
+ <i v-else title="全屏" class="el-icon-_screen-full" />
|
|
|
+ </span>
|
|
|
</div>
|
|
|
</div>
|
|
|
+ </div>
|
|
|
|
|
|
- <!-- 三栏布局区域 -->
|
|
|
- <div class="three-column-layout">
|
|
|
- <!-- 左侧区域 -->
|
|
|
- <div class="left-section">
|
|
|
- <!-- 综合数据 -->
|
|
|
- <div class="panel data-panel">
|
|
|
- <div class="panel-title" style="cursor: pointer" @click="handelRouterTo('/page-pcs/productionRecords')">
|
|
|
- <div class="panel-icon"></div>
|
|
|
- 综合数据
|
|
|
- </div>
|
|
|
- <div
|
|
|
- style="
|
|
|
- display: flex;
|
|
|
- flex: 1;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- "
|
|
|
- >
|
|
|
- <div class="data-grid">
|
|
|
- <div
|
|
|
- class="data-item"
|
|
|
- v-for="(item, index) in comprehensiveList"
|
|
|
- :key="index"
|
|
|
+ <!-- 三栏布局区域 -->
|
|
|
+ <div class="three-column-layout">
|
|
|
+ <!-- 左侧区域 -->
|
|
|
+ <div class="left-section">
|
|
|
+ <!-- 综合数据 -->
|
|
|
+ <div class="panel data-panel">
|
|
|
+ <div
|
|
|
+ class="panel-title"
|
|
|
+ style="cursor: pointer"
|
|
|
+ @click="handelRouterTo('/page-pcs/productionRecords')"
|
|
|
+ >
|
|
|
+ <div class="panel-icon"></div>
|
|
|
+ 综合数据
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ style="
|
|
|
+ display: flex;
|
|
|
+ flex: 1;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ "
|
|
|
+ >
|
|
|
+ <div class="data-grid">
|
|
|
+ <div
|
|
|
+ class="data-item"
|
|
|
+ v-for="(item, index) in comprehensiveList"
|
|
|
+ :key="index"
|
|
|
+ >
|
|
|
+ <div class="img"></div>
|
|
|
+ <div class="data-item_value">
|
|
|
+ <span class="data-label">{{ item.label }}</span>
|
|
|
+ <span class="data-value">{{ item.value }}</span></div
|
|
|
>
|
|
|
- <div class="img"></div>
|
|
|
- <div class="data-item_value">
|
|
|
- <span class="data-label">{{ item.label }}</span>
|
|
|
- <span class="data-value">{{ item.value }}</span></div
|
|
|
- >
|
|
|
- </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
+ </div>
|
|
|
|
|
|
- <!-- 区域用能对比 -->
|
|
|
- <div class="panel chart-panel" style="position: relative">
|
|
|
- <div class="panel-title energy-title">
|
|
|
- <div class="title-left">
|
|
|
- <div class="panel-icon"></div>
|
|
|
- 用水用煤趋势图
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="energy-tabs">
|
|
|
- <span
|
|
|
- v-for="tab in energyTabs"
|
|
|
- :key="tab.value"
|
|
|
- :class="[
|
|
|
- 'tab-item',
|
|
|
- { active: activeEnergyTab === tab.value }
|
|
|
- ]"
|
|
|
- @click="energyTabsCahnge(tab.value)"
|
|
|
- >
|
|
|
- {{ tab.label }}
|
|
|
- </span>
|
|
|
+ <!-- 区域用能对比 -->
|
|
|
+ <div class="panel chart-panel" style="position: relative">
|
|
|
+ <div class="panel-title energy-title">
|
|
|
+ <div class="title-left">
|
|
|
+ <div class="panel-icon"></div>
|
|
|
+ 用水用煤趋势图
|
|
|
</div>
|
|
|
- <div class="chart-container" ref="waterChart"></div>
|
|
|
</div>
|
|
|
+ <div class="energy-tabs">
|
|
|
+ <span
|
|
|
+ v-for="tab in energyTabs"
|
|
|
+ :key="tab.value"
|
|
|
+ :class="[
|
|
|
+ 'tab-item',
|
|
|
+ { active: activeEnergyTab === tab.value }
|
|
|
+ ]"
|
|
|
+ @click="energyTabsCahnge(tab.value)"
|
|
|
+ >
|
|
|
+ {{ tab.label }}
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ <div class="chart-container" ref="waterChart"></div>
|
|
|
+ </div>
|
|
|
|
|
|
- <!-- 区域能耗对比 -->
|
|
|
- <div class="panel chart-panel">
|
|
|
- <div class="panel-title energy-title">
|
|
|
- <div class="title-left">
|
|
|
- <div class="panel-icon"></div>
|
|
|
- 注汽量趋势图
|
|
|
- </div>
|
|
|
+ <!-- 区域能耗对比 -->
|
|
|
+ <div class="panel chart-panel">
|
|
|
+ <div class="panel-title energy-title">
|
|
|
+ <div class="title-left">
|
|
|
+ <div class="panel-icon"></div>
|
|
|
+ 注汽量趋势图
|
|
|
</div>
|
|
|
- <div class="chart-container" ref="returnChart"></div>
|
|
|
</div>
|
|
|
+ <div class="chart-container" ref="returnChart"></div>
|
|
|
</div>
|
|
|
+ </div>
|
|
|
|
|
|
- <!-- 中间区域 -->
|
|
|
- <div class="center-section">
|
|
|
- <!-- 锅炉运行参数 -->
|
|
|
+ <!-- 中间区域 -->
|
|
|
+ <div class="center-section">
|
|
|
+ <!-- 锅炉运行参数 -->
|
|
|
+ <div
|
|
|
+ :class="'param-card param-card' + (index + 1)"
|
|
|
+ v-for="(boiler, index) in boilerData"
|
|
|
+ :key="index"
|
|
|
+ >
|
|
|
<div
|
|
|
- :class="'param-card param-card' + (index + 1)"
|
|
|
- v-for="(boiler, index) in boilerData"
|
|
|
- :key="index"
|
|
|
+ class="param-title"
|
|
|
+ style="cursor: pointer"
|
|
|
+ @click="handelRouterTo('', boiler.title)"
|
|
|
+ >{{ boiler.title }}</div
|
|
|
>
|
|
|
- <div class="param-title" style="cursor: pointer" @click="handelRouterTo('', boiler.title)">{{ boiler.title }}</div>
|
|
|
- <div class="param-list">
|
|
|
- <div
|
|
|
- class="param-item"
|
|
|
- v-for="(param, pIndex) in boiler.params"
|
|
|
- :key="pIndex"
|
|
|
- >
|
|
|
- <span class="param-name">{{ param.name }}</span>
|
|
|
- <span class="param-value">{{ param.value }}</span>
|
|
|
- </div>
|
|
|
+ <div class="param-list">
|
|
|
+ <div
|
|
|
+ class="param-item"
|
|
|
+ v-for="(param, pIndex) in boiler.params"
|
|
|
+ :key="pIndex"
|
|
|
+ >
|
|
|
+ <span class="param-name">{{ param.name }}</span>
|
|
|
+ <span class="param-value">{{ param.value }}</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
+ </div>
|
|
|
|
|
|
- <!-- 管道流程图 -->
|
|
|
- <div class="pipeline-container">
|
|
|
- <!-- 管道流程图内容 -->
|
|
|
- </div>
|
|
|
+ <!-- 管道流程图 -->
|
|
|
+ <div class="pipeline-container">
|
|
|
+ <!-- 管道流程图内容 -->
|
|
|
</div>
|
|
|
+ </div>
|
|
|
|
|
|
- <!-- 右侧区域 -->
|
|
|
- <div class="right-section">
|
|
|
- <!-- 告警数据统计 -->
|
|
|
- <div class="panel alert-panel">
|
|
|
- <div class="panel-title">
|
|
|
- <div class="panel-icon"></div>
|
|
|
- 告警数据概览
|
|
|
- </div>
|
|
|
- <div class="alert-stats">
|
|
|
- <!-- 左侧数据卡片 -->
|
|
|
- <div class="alert-cards">
|
|
|
- <div
|
|
|
- class="alert-card-item"
|
|
|
- v-for="(item, index) in alertStatsData"
|
|
|
- :key="index"
|
|
|
+ <!-- 右侧区域 -->
|
|
|
+ <div class="right-section">
|
|
|
+ <!-- 告警数据统计 -->
|
|
|
+ <div class="panel alert-panel">
|
|
|
+ <div class="panel-title">
|
|
|
+ <div class="panel-icon"></div>
|
|
|
+ 告警数据概览
|
|
|
+ </div>
|
|
|
+ <div class="alert-stats">
|
|
|
+ <!-- 左侧数据卡片 -->
|
|
|
+ <div class="alert-cards">
|
|
|
+ <div
|
|
|
+ class="alert-card-item"
|
|
|
+ v-for="(item, index) in alertStatsData"
|
|
|
+ :key="index"
|
|
|
+ >
|
|
|
+ <div class="img"></div>
|
|
|
+ <div class="data-item_value">
|
|
|
+ <span class="data-label">{{ item.label }}</span>
|
|
|
+ <span class="data-value">{{ item.value }}</span></div
|
|
|
>
|
|
|
- <div class="img"></div>
|
|
|
- <div class="data-item_value">
|
|
|
- <span class="data-label">{{ item.label }}</span>
|
|
|
- <span class="data-value">{{ item.value }}</span></div
|
|
|
- >
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <!-- 右侧环形图 -->
|
|
|
- <div class="alert-pie-chart">
|
|
|
- <div class="alert-pie" ref="alertPieChart"></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
+ <!-- 右侧环形图 -->
|
|
|
+ <div class="alert-pie-chart">
|
|
|
+ <div class="alert-pie" ref="alertPieChart"></div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
+ </div>
|
|
|
|
|
|
- <!-- 告警列表 -->
|
|
|
- <!-- <div class="panel alert-list-panel">
|
|
|
+ <!-- 告警列表 -->
|
|
|
+ <!-- <div class="panel alert-list-panel">
|
|
|
<div class="panel-title">
|
|
|
<div class="panel-icon"></div>
|
|
|
告警列表
|
|
|
@@ -191,21 +199,20 @@
|
|
|
</div>
|
|
|
</div> -->
|
|
|
|
|
|
- <!-- 设备告警趋势图 -->
|
|
|
- <div class="panel chart-panel">
|
|
|
- <div class="panel-title">
|
|
|
- <div class="panel-icon"></div>
|
|
|
- 设备告警趋势图
|
|
|
- </div>
|
|
|
- <div class="chart-container" ref="alertTrendChart"></div>
|
|
|
+ <!-- 设备告警趋势图 -->
|
|
|
+ <div class="panel chart-panel">
|
|
|
+ <div class="panel-title">
|
|
|
+ <div class="panel-icon"></div>
|
|
|
+ 设备告警趋势图
|
|
|
</div>
|
|
|
- <div class="panel chart-panel">
|
|
|
- <div class="panel-title">
|
|
|
- <div class="panel-icon"></div>
|
|
|
- 用电趋势图
|
|
|
- </div>
|
|
|
- <div class="chart-container" ref="electricityTrendChart"></div>
|
|
|
+ <div class="chart-container" ref="alertTrendChart"></div>
|
|
|
+ </div>
|
|
|
+ <div class="panel chart-panel">
|
|
|
+ <div class="panel-title">
|
|
|
+ <div class="panel-icon"></div>
|
|
|
+ 用电趋势图
|
|
|
</div>
|
|
|
+ <div class="chart-container" ref="electricityTrendChart"></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -307,12 +314,8 @@
|
|
|
},
|
|
|
mounted() {
|
|
|
this.updateTimer = setInterval(this.updateTime, 1000);
|
|
|
-
|
|
|
+ this.handleResize();
|
|
|
window.addEventListener('resize', this.handleResize);
|
|
|
- // 初始化时同步头部宽度
|
|
|
- this.$nextTick(() => {
|
|
|
- this.syncHeaderWidth();
|
|
|
- });
|
|
|
},
|
|
|
beforeDestroy() {
|
|
|
clearInterval(this.updateTimer);
|
|
|
@@ -322,17 +325,16 @@
|
|
|
methods: {
|
|
|
handelRouterTo(path, item) {
|
|
|
let url = path;
|
|
|
- if(!url) {
|
|
|
- if(item == '锅炉运行参数') {
|
|
|
- url = '/page-pcs/boilerOperationRecord'
|
|
|
- } else if(item == '生产记录') {
|
|
|
- url = '/page-pcs/productionRecords'
|
|
|
- } else if(item == '蒸汽质量检查记录') {
|
|
|
- url = '/page-pcs/qualityTestRecords'
|
|
|
+ if (!url) {
|
|
|
+ if (item == '锅炉运行参数') {
|
|
|
+ url = '/page-pcs/boilerOperationRecord';
|
|
|
+ } else if (item == '生产记录') {
|
|
|
+ url = '/page-pcs/productionRecords';
|
|
|
+ } else if (item == '蒸汽质量检查记录') {
|
|
|
+ url = '/page-pcs/qualityTestRecords';
|
|
|
}
|
|
|
}
|
|
|
window.history.pushState(null, '', url);
|
|
|
-
|
|
|
},
|
|
|
energyTabsCahnge(val) {
|
|
|
this.activeEnergyTab = val;
|
|
|
@@ -543,23 +545,8 @@
|
|
|
const day = now.getDate().toString().padStart(2, '0');
|
|
|
this.date = `${year}-${month}-${day}`;
|
|
|
},
|
|
|
- syncHeaderWidth() {
|
|
|
- this.$nextTick(() => {
|
|
|
- const threeColumnLayout = document.querySelector(
|
|
|
- '.three-column-layout'
|
|
|
- );
|
|
|
- const headerSection = document.querySelector('.header-section');
|
|
|
- if (threeColumnLayout && headerSection) {
|
|
|
- const layoutWidth = threeColumnLayout.scrollWidth;
|
|
|
- headerSection.style.width = layoutWidth + 'px';
|
|
|
- }
|
|
|
- });
|
|
|
- },
|
|
|
handleResize() {
|
|
|
this.$nextTick(() => {
|
|
|
- // 同步头部宽度
|
|
|
- this.syncHeaderWidth();
|
|
|
-
|
|
|
const { clientWidth, clientHeight } = document.documentElement;
|
|
|
const containers = document.getElementsByClassName('box-container');
|
|
|
Array.from(containers).forEach((item) => {
|
|
|
@@ -567,7 +554,7 @@
|
|
|
item.style.height = clientHeight + 'px';
|
|
|
item.style.width = clientWidth + 'px';
|
|
|
} else {
|
|
|
- item.style.height = clientHeight - 100 + 'px';
|
|
|
+ item.style.height = clientHeight - 96 + 'px';
|
|
|
item.style.width = clientWidth - 240 + 'px';
|
|
|
}
|
|
|
});
|
|
|
@@ -961,8 +948,11 @@
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
.box-container {
|
|
|
- width: 100vw;
|
|
|
- height: 100vh;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ overflow: hidden;
|
|
|
|
|
|
.box-header-scroll {
|
|
|
height: 5rem;
|
|
|
@@ -974,7 +964,6 @@
|
|
|
padding: 0 1.25rem;
|
|
|
position: relative;
|
|
|
z-index: 10;
|
|
|
- min-width: 137.5rem;
|
|
|
|
|
|
.logo {
|
|
|
// width: 12.5rem;
|
|
|
@@ -1053,7 +1042,8 @@
|
|
|
}
|
|
|
|
|
|
.box-content {
|
|
|
- height: calc(100%);
|
|
|
+ flex: 1;
|
|
|
+ min-height: 0;
|
|
|
background: radial-gradient(
|
|
|
ellipse at top,
|
|
|
rgba(13, 45, 110, 0.3) 0%,
|
|
|
@@ -1065,120 +1055,66 @@
|
|
|
transparent 50%
|
|
|
),
|
|
|
linear-gradient(180deg, #0a1630 0%, #0d1f4a 50%, #08152e 100%);
|
|
|
- overflow: auto;
|
|
|
+ overflow: hidden;
|
|
|
font-family: 'Microsoft YaHei', sans-serif;
|
|
|
- flex: 1;
|
|
|
- // overflow-x: auto;
|
|
|
- // overflow-y: hidden;
|
|
|
-
|
|
|
- &::-webkit-scrollbar {
|
|
|
- height: 0.375rem;
|
|
|
- }
|
|
|
-
|
|
|
- &::-webkit-scrollbar-track {
|
|
|
- background: rgba(12, 32, 70, 0.4);
|
|
|
- }
|
|
|
-
|
|
|
- &::-webkit-scrollbar-thumb {
|
|
|
- background: linear-gradient(180deg, #1a4a8a, #0d2a5a);
|
|
|
- border-radius: 0.1875rem;
|
|
|
- }
|
|
|
-
|
|
|
- .scroll-wrapper {
|
|
|
- // display: flex;
|
|
|
- display: inline-block;
|
|
|
- height: 100%;
|
|
|
- // flex-direction: column;
|
|
|
- // gap: 1.25rem;
|
|
|
- // padding: 0 1.25rem 1.25rem 1.25rem;
|
|
|
- width: 100%;
|
|
|
- .header-section {
|
|
|
- width: auto;
|
|
|
- flex-shrink: 0;
|
|
|
- padding-top: 0.625rem;
|
|
|
- min-width: 100%;
|
|
|
- }
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ padding: 0 0.75rem 0.75rem 0.75rem;
|
|
|
|
|
|
- .three-column-layout {
|
|
|
- display: inline-block;
|
|
|
- white-space: nowrap;
|
|
|
- flex: 1;
|
|
|
- min-height: 53.125rem;
|
|
|
- // min-width: 137.5rem;
|
|
|
- height: calc(100% - 8.125rem);
|
|
|
- min-width: 100%;
|
|
|
- margin-top: 1.25rem;
|
|
|
- font-size: 0;
|
|
|
- background: url('~@/assets/pcs/back.png') no-repeat center top;
|
|
|
- background-size: 100% 100%;
|
|
|
- }
|
|
|
+ .header-section {
|
|
|
+ flex-shrink: 0;
|
|
|
}
|
|
|
|
|
|
- .left-section,
|
|
|
- .right-section,
|
|
|
- .center-section {
|
|
|
- display: inline-block;
|
|
|
- vertical-align: top;
|
|
|
- height: 100%;
|
|
|
- font-size: 0.875rem;
|
|
|
- white-space: normal;
|
|
|
+ .three-column-layout {
|
|
|
+ flex: 1;
|
|
|
+ min-height: 0;
|
|
|
+ display: flex;
|
|
|
+ gap: 0.75rem;
|
|
|
+ background: url('~@/assets/pcs/back.png') no-repeat center top;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ padding: 0.625rem;
|
|
|
}
|
|
|
|
|
|
.left-section,
|
|
|
.right-section {
|
|
|
- min-width: 50rem;
|
|
|
- margin-right: 1.25rem;
|
|
|
- width: 29%;
|
|
|
+ flex: 0 0 30%;
|
|
|
+ min-width: 0;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ gap: 0.375rem;
|
|
|
+ overflow: hidden;
|
|
|
}
|
|
|
|
|
|
.center-section {
|
|
|
- width: 40%;
|
|
|
- // width: calc(100% - 77.5rem);
|
|
|
- min-width: 78.125rem;
|
|
|
- margin-right: 1.25rem;
|
|
|
+ flex: 0 0 38%;
|
|
|
+ min-width: 0;
|
|
|
position: relative;
|
|
|
- }
|
|
|
-
|
|
|
- .left-section,
|
|
|
- .right-section {
|
|
|
- display: inline-flex;
|
|
|
- flex-direction: column;
|
|
|
- gap: 0.9375rem;
|
|
|
overflow: hidden;
|
|
|
}
|
|
|
|
|
|
.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: 0.5rem;
|
|
|
- padding: 0.9375rem;
|
|
|
+ padding: 0.5rem;
|
|
|
min-height: 0;
|
|
|
- // box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05),
|
|
|
- // 0 4px 20px rgba(0, 0, 0, 0.3);
|
|
|
+ overflow: hidden;
|
|
|
|
|
|
.panel-title {
|
|
|
- font-size: 1.75rem;
|
|
|
- // font-weight: bold;
|
|
|
- // font-style: italic;
|
|
|
+ font-size: 0.9375rem;
|
|
|
font-family: 'YouSheBiaoTiHei', 'Microsoft YaHei', sans-serif;
|
|
|
color: #fff;
|
|
|
- margin-bottom: 0.9375rem;
|
|
|
- height: 2.625rem;
|
|
|
- padding-left: 2.5rem;
|
|
|
+ margin-bottom: 0.375rem;
|
|
|
+ height: 1.75rem;
|
|
|
+ padding-left: 1.75rem;
|
|
|
position: relative;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
background: url('~@/assets/pcs/titleb.png') no-repeat center top;
|
|
|
background-size: 100% 100%;
|
|
|
+ flex-shrink: 0;
|
|
|
|
|
|
&.energy-title {
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
- padding-right: 0.9375rem;
|
|
|
+ padding-right: 0.75rem;
|
|
|
|
|
|
.title-left {
|
|
|
display: flex;
|
|
|
@@ -1188,17 +1124,17 @@
|
|
|
}
|
|
|
.panel-icon {
|
|
|
position: absolute;
|
|
|
- left: 0.9375rem;
|
|
|
- width: 1.25rem;
|
|
|
- height: 1.5625rem;
|
|
|
+ left: 0.375rem;
|
|
|
+ width: 0.875rem;
|
|
|
+ height: 1.125rem;
|
|
|
background: url('~@/assets/pcs/titleIcon.png') no-repeat center top;
|
|
|
background-size: 100% 100%;
|
|
|
}
|
|
|
}
|
|
|
.energy-tabs {
|
|
|
position: absolute;
|
|
|
- top: 4.0625rem;
|
|
|
- right: 2.5rem;
|
|
|
+ top: 2.75rem;
|
|
|
+ right: 1.5rem;
|
|
|
z-index: 999;
|
|
|
display: flex;
|
|
|
gap: 0;
|
|
|
@@ -1207,8 +1143,8 @@
|
|
|
padding: 0.125rem;
|
|
|
|
|
|
.tab-item {
|
|
|
- padding: 0.25rem 0.75rem;
|
|
|
- font-size: 0.75rem;
|
|
|
+ padding: 0.125rem 0.5rem;
|
|
|
+ font-size: 0.625rem;
|
|
|
color: #8ba3c7;
|
|
|
cursor: pointer;
|
|
|
border-radius: 0.1875rem;
|
|
|
@@ -1227,11 +1163,9 @@
|
|
|
}
|
|
|
|
|
|
.data-panel {
|
|
|
- min-height: 13.75rem;
|
|
|
- flex-shrink: 0;
|
|
|
+ flex: 0 0 auto;
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
- flex: 0.7;
|
|
|
|
|
|
.panel-title {
|
|
|
flex-shrink: 0;
|
|
|
@@ -1239,25 +1173,17 @@
|
|
|
|
|
|
.data-grid {
|
|
|
display: flex;
|
|
|
-
|
|
|
- gap: 0.75rem;
|
|
|
- // padding: 0.625rem 0;
|
|
|
+ gap: 0.375rem;
|
|
|
align-items: center;
|
|
|
justify-content: space-around;
|
|
|
flex-wrap: wrap;
|
|
|
overflow: hidden;
|
|
|
- height: 100%;
|
|
|
+ padding: 0.25rem 0;
|
|
|
|
|
|
.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: 2.1875rem;
|
|
|
- height: 2.1875rem;
|
|
|
+ width: 1.5rem;
|
|
|
+ height: 1.5rem;
|
|
|
background: url('~@/assets/pcs/icon.png') no-repeat center top;
|
|
|
background-size: 100% 100%;
|
|
|
}
|
|
|
@@ -1266,45 +1192,26 @@
|
|
|
.data-item_value {
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
- // align-items: center;
|
|
|
}
|
|
|
- // flex-direction: column;
|
|
|
align-items: center;
|
|
|
- // justify-content: center;
|
|
|
- padding-left: 0.9375rem;
|
|
|
- gap: 0.5rem;
|
|
|
+ padding-left: 0.5rem;
|
|
|
+ gap: 0.25rem;
|
|
|
position: relative;
|
|
|
overflow: hidden;
|
|
|
- width: 18%;
|
|
|
- height: 3.75rem;
|
|
|
+ width: 22%;
|
|
|
+ height: 2.875rem;
|
|
|
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: 0.125rem;
|
|
|
- // background: linear-gradient(
|
|
|
- // 90deg,
|
|
|
- // transparent,
|
|
|
- // #00d4ff,
|
|
|
- // transparent
|
|
|
- // );
|
|
|
- // box-shadow: 0 0 0.5rem rgba(0, 212, 255, 0.6);
|
|
|
- // }
|
|
|
-
|
|
|
.data-label {
|
|
|
- font-size: 0.75rem;
|
|
|
+ font-size: 0.5625rem;
|
|
|
color: #8ba3c7;
|
|
|
text-align: center;
|
|
|
- line-height: 1.3;
|
|
|
+ line-height: 1.2;
|
|
|
}
|
|
|
|
|
|
.data-value {
|
|
|
- font-size: 1.125rem;
|
|
|
+ font-size: 0.8125rem;
|
|
|
font-weight: bold;
|
|
|
color: #b6ceff;
|
|
|
text-shadow: 0 0 0.625rem rgba(0, 212, 255, 0.5);
|
|
|
@@ -1315,9 +1222,10 @@
|
|
|
|
|
|
.chart-panel {
|
|
|
flex: 1;
|
|
|
- min-height: 15.625rem;
|
|
|
+ min-height: 0;
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
+ overflow: hidden;
|
|
|
|
|
|
.chart-container {
|
|
|
width: 100%;
|
|
|
@@ -1326,19 +1234,23 @@
|
|
|
}
|
|
|
}
|
|
|
.param-card3 {
|
|
|
- right: 0.625rem;
|
|
|
+ right: 0.5rem;
|
|
|
}
|
|
|
.param-card2 {
|
|
|
- left: 30%;
|
|
|
+ left: 34%;
|
|
|
}
|
|
|
.param-card {
|
|
|
- width: 23%;
|
|
|
- top: 3.125rem;
|
|
|
+ width: 26%;
|
|
|
+ top: 5%;
|
|
|
|
|
|
position: absolute;
|
|
|
background: rgba(39, 88, 233, 0.1);
|
|
|
border: 1px solid #3373d4;
|
|
|
border-radius: 0.5rem;
|
|
|
+ max-height: 40%;
|
|
|
+ overflow: hidden;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
|
|
|
&::before {
|
|
|
content: '';
|
|
|
@@ -1352,30 +1264,37 @@
|
|
|
}
|
|
|
|
|
|
.param-title {
|
|
|
- font-size: 0.875rem;
|
|
|
+ font-size: 0.75rem;
|
|
|
font-weight: bold;
|
|
|
color: #fff;
|
|
|
- padding-bottom: 0.75rem;
|
|
|
- padding-top: 0.75rem;
|
|
|
+ padding: 0.5rem;
|
|
|
text-align: center;
|
|
|
text-shadow: 0 0 0.625rem rgba(0, 212, 255, 0.3);
|
|
|
border-bottom: 1px solid rgba(0, 212, 255, 0.5);
|
|
|
background: rgba(39, 88, 233, 0.1);
|
|
|
+ flex-shrink: 0;
|
|
|
}
|
|
|
|
|
|
.param-list {
|
|
|
- padding: 0.9375rem;
|
|
|
-
|
|
|
+ padding: 0.5rem;
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
- gap: 0.625rem;
|
|
|
+ gap: 0.375rem;
|
|
|
+ overflow-y: auto;
|
|
|
+ flex: 1;
|
|
|
+
|
|
|
+ &::-webkit-scrollbar {
|
|
|
+ width: 0.1875rem;
|
|
|
+ }
|
|
|
+ &::-webkit-scrollbar-thumb {
|
|
|
+ background: rgba(26, 74, 138, 0.5);
|
|
|
+ border-radius: 0.125rem;
|
|
|
+ }
|
|
|
|
|
|
.param-item {
|
|
|
display: flex;
|
|
|
- // justify-content: space-between;
|
|
|
- font-size: 0.75rem;
|
|
|
- padding: 0.25rem 0;
|
|
|
- // border-bottom: 1px dashed rgba(138, 163, 199, 0.2);
|
|
|
+ font-size: 0.625rem;
|
|
|
+ padding: 0.125rem 0;
|
|
|
|
|
|
&:last-child {
|
|
|
border-bottom: none;
|
|
|
@@ -1383,7 +1302,8 @@
|
|
|
|
|
|
.param-name {
|
|
|
color: #8ba3c7;
|
|
|
- min-width: 4rem;
|
|
|
+ min-width: 3.5rem;
|
|
|
+ flex-shrink: 0;
|
|
|
}
|
|
|
|
|
|
.param-value {
|
|
|
@@ -1398,28 +1318,19 @@
|
|
|
flex: 1;
|
|
|
min-height: 0;
|
|
|
position: absolute;
|
|
|
- bottom: 0.9375rem;
|
|
|
+ bottom: 0;
|
|
|
left: 0;
|
|
|
- height: 60%;
|
|
|
+ height: 52%;
|
|
|
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: 0.5rem;
|
|
|
background: url('~@/assets/pcs/home.png') no-repeat center top;
|
|
|
background-size: 100% 100%;
|
|
|
- // max-height: 42.5rem;
|
|
|
}
|
|
|
|
|
|
.alert-panel {
|
|
|
- min-height: 13.75rem;
|
|
|
- flex-shrink: 0;
|
|
|
+ flex: 0 0 auto;
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
- flex: 0.7;
|
|
|
+ max-height: 30%;
|
|
|
|
|
|
.panel-title {
|
|
|
flex-shrink: 0;
|
|
|
@@ -1430,29 +1341,23 @@
|
|
|
min-height: 0;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
- height: calc(100% - 2.1875rem);
|
|
|
- gap: 1.25rem;
|
|
|
+ gap: 0.5rem;
|
|
|
+ overflow: hidden;
|
|
|
|
|
|
- // 左侧数据卡片区域
|
|
|
.alert-cards {
|
|
|
width: 50%;
|
|
|
height: 100%;
|
|
|
display: flex;
|
|
|
flex-wrap: wrap;
|
|
|
justify-content: space-around;
|
|
|
- gap: 0.75rem;
|
|
|
+ align-content: center;
|
|
|
+ gap: 0.375rem;
|
|
|
|
|
|
.alert-card-item {
|
|
|
- width: 40%;
|
|
|
- // 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);
|
|
|
+ width: 43%;
|
|
|
.img {
|
|
|
- width: 2.1875rem;
|
|
|
- height: 2.1875rem;
|
|
|
+ width: 1.5rem;
|
|
|
+ height: 1.5rem;
|
|
|
background: url('~@/assets/pcs/icon.png') no-repeat center top;
|
|
|
background-size: 100% 100%;
|
|
|
}
|
|
|
@@ -1461,44 +1366,25 @@
|
|
|
.data-item_value {
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
- // align-items: center;
|
|
|
}
|
|
|
- // flex-direction: column;
|
|
|
align-items: center;
|
|
|
- // justify-content: center;
|
|
|
- padding-left: 0.9375rem;
|
|
|
- gap: 0.5rem;
|
|
|
+ padding-left: 0.5rem;
|
|
|
+ gap: 0.25rem;
|
|
|
position: relative;
|
|
|
overflow: hidden;
|
|
|
- height: 3.75rem;
|
|
|
+ height: 2.875rem;
|
|
|
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: 0.125rem;
|
|
|
- // background: linear-gradient(
|
|
|
- // 90deg,
|
|
|
- // transparent,
|
|
|
- // #00d4ff,
|
|
|
- // transparent
|
|
|
- // );
|
|
|
- // box-shadow: 0 0 0.5rem rgba(0, 212, 255, 0.6);
|
|
|
- // }
|
|
|
-
|
|
|
.data-label {
|
|
|
- font-size: 0.75rem;
|
|
|
+ font-size: 0.5625rem;
|
|
|
color: #8ba3c7;
|
|
|
text-align: center;
|
|
|
- line-height: 1.3;
|
|
|
+ line-height: 1.2;
|
|
|
}
|
|
|
|
|
|
.data-value {
|
|
|
- font-size: 1.125rem;
|
|
|
+ font-size: 0.8125rem;
|
|
|
font-weight: bold;
|
|
|
color: #b6ceff;
|
|
|
text-shadow: 0 0 0.625rem rgba(0, 212, 255, 0.5);
|
|
|
@@ -1506,7 +1392,6 @@
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- // 右侧环形图区域
|
|
|
.alert-pie-chart {
|
|
|
width: 50%;
|
|
|
height: 100%;
|
|
|
@@ -1518,7 +1403,7 @@
|
|
|
.alert-pie {
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
- min-height: 11.25rem;
|
|
|
+ min-height: 0;
|
|
|
}
|
|
|
}
|
|
|
}
|
