|
|
@@ -7,168 +7,165 @@
|
|
|
:exit-on-click-wrapper="false"
|
|
|
:style="{ height: isFullscreen ? '100vh' : 'calc(100vh - 97px)' }"
|
|
|
>
|
|
|
- <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"
|
|
|
- @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" style="margin-bottom: 20px">生产管控</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 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"
|
|
|
+ @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" style="margin-bottom: 20px">生产管控</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 class="two-column-layout">
|
|
|
- <!-- 左侧区域 -->
|
|
|
- <div class="left-section">
|
|
|
- <!-- 综合数据 -->
|
|
|
- <div class="panel data-panel">
|
|
|
- <div class="panel-title">
|
|
|
- <div class="panel-icon"></div>
|
|
|
- 综合数据
|
|
|
- </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 双栏布局区域 -->
|
|
|
+ <div class="two-column-layout">
|
|
|
+ <!-- 左侧区域 -->
|
|
|
+ <div class="left-section">
|
|
|
+ <!-- 综合数据 -->
|
|
|
+ <div class="panel data-panel">
|
|
|
+ <div class="panel-title">
|
|
|
+ <div class="panel-icon"></div>
|
|
|
+ 综合数据
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ style="
|
|
|
+ display: flex;
|
|
|
+ flex: 1;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ "
|
|
|
+ >
|
|
|
+ <div class="data-grid">
|
|
|
<div
|
|
|
- style="
|
|
|
- display: flex;
|
|
|
- flex: 1;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- "
|
|
|
+ class="data-item"
|
|
|
+ v-for="(item, index) in comprehensiveList"
|
|
|
+ :key="index"
|
|
|
>
|
|
|
- <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>
|
|
|
- </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)"
|
|
|
+ <div class="img"></div>
|
|
|
+ <div class="data-item_value">
|
|
|
+ <span class="data-label">{{ item.label }}</span>
|
|
|
+ <span class="data-value">{{ item.value }}</span></div
|
|
|
>
|
|
|
- {{ tab.label }}
|
|
|
- </span>
|
|
|
</div>
|
|
|
- <div class="chart-container" ref="waterChart"></div>
|
|
|
</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
|
|
|
- <!-- 区域能耗对比 -->
|
|
|
- <div class="panel chart-panel">
|
|
|
- <div class="panel-title energy-title">
|
|
|
- <div class="title-left">
|
|
|
- <div class="panel-icon"></div>
|
|
|
- 固废量趋势图
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="chart-container" ref="returnChart"></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>
|
|
|
+ <div class="chart-container" ref="waterChart"></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="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="panel chart-panel">
|
|
|
+ <div class="panel-title energy-title">
|
|
|
+ <div class="title-left">
|
|
|
+ <div class="panel-icon"></div>
|
|
|
+ 固废量趋势图
|
|
|
</div>
|
|
|
-
|
|
|
- <!-- 告警列表 -->
|
|
|
- <div class="panel alert-list-panel">
|
|
|
- <div class="panel-title">
|
|
|
- <div class="panel-icon"></div>
|
|
|
- 告警列表
|
|
|
- </div>
|
|
|
- <div class="alert-table">
|
|
|
- <dv-scroll-board
|
|
|
- :config="alertConfig"
|
|
|
- style="width: 100%; height: calc(100% - 40px)"
|
|
|
- />
|
|
|
+ </div>
|
|
|
+ <div class="chart-container" ref="returnChart"></div>
|
|
|
+ </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="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="panel chart-panel">
|
|
|
- <div class="panel-title">
|
|
|
- <div class="panel-icon"></div>
|
|
|
- 设备告警趋势图
|
|
|
- </div>
|
|
|
- <div class="chart-container" ref="alertTrendChart"></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-title">
|
|
|
+ <div class="panel-icon"></div>
|
|
|
+ 告警列表
|
|
|
+ </div>
|
|
|
+ <div class="alert-table">
|
|
|
+ <dv-scroll-board
|
|
|
+ :config="alertConfig"
|
|
|
+ style="width: 100%; height: calc(100% - 40px)"
|
|
|
+ />
|
|
|
+ </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>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</vue-fullscreen>
|
|
|
</template>
|
|
|
|
|
|
@@ -946,10 +943,10 @@
|
|
|
|
|
|
.left-section,
|
|
|
.right-section {
|
|
|
- display: inline-flex;
|
|
|
+ display: flex;
|
|
|
flex-direction: column;
|
|
|
gap: 15px;
|
|
|
- overflow: hidden;
|
|
|
+ // overflow: hidden;
|
|
|
height: 100%;
|
|
|
font-size: 14px;
|
|
|
white-space: normal;
|
|
|
@@ -1042,7 +1039,7 @@
|
|
|
}
|
|
|
|
|
|
.data-panel {
|
|
|
- min-height: 220px;
|
|
|
+ min-height: 240px;
|
|
|
flex-shrink: 0;
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
@@ -1229,7 +1226,7 @@
|
|
|
}
|
|
|
|
|
|
.alert-panel {
|
|
|
- min-height: 220px;
|
|
|
+ min-height: 240px;
|
|
|
flex-shrink: 0;
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
