|
@@ -0,0 +1,281 @@
|
|
|
|
+<template>
|
|
|
|
+ <el-row :gutter="10">
|
|
|
|
+ <el-col :xl="3" :lg="3" :md="3" :sm="12" :xs="12">
|
|
|
|
+ <el-card class="box-card text-center" :body-style="{ padding: '10px !important' }">
|
|
|
|
+ <div class="text-xs text-bold">能源输入</div>
|
|
|
|
+ <div class="flex flex-direction justify-center align-center" style="height: calc(66.66vh - 170px);">
|
|
|
|
+ <svg-icon icon-class="PowerSupply" style="font-size: 3.6rem;"/>
|
|
|
|
+ <div class="text-purple text-xl text-bold margin-top">10000</div>
|
|
|
|
+ <div class="text-xs text-bold">总能源输入</div>
|
|
|
|
+ </div>
|
|
|
|
+ </el-card>
|
|
|
|
+ </el-col>
|
|
|
|
+ <el-col :xl="3" :lg="3" :md="3" :sm="12" :xs="12">
|
|
|
|
+ <el-card class="box-card text-center" :body-style="{ padding: '10px !important' }">
|
|
|
|
+ <div class="text-xs text-bold">初级能量消耗端</div>
|
|
|
|
+ <div style="height: calc(66.66vh - 170px);">
|
|
|
|
+ <div :style="{ height: stem.num + '%' }" class="flex flex-direction justify-center align-center"
|
|
|
|
+ v-for="(stem, sndex) in energyStart" :key="sndex">
|
|
|
|
+ <svg-icon :icon-class="stem.icon" style="font-size: 1.8rem;"/>
|
|
|
|
+ <div class="text-purple text-sm text-bold">{{stem.value}}</div>
|
|
|
|
+ <div class="text-xs text-bold">{{stem.name}}</div>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ </el-card>
|
|
|
|
+ </el-col>
|
|
|
|
+ <el-col :xl="11" :lg="11" :md="11" :sm="12" :xs="24">
|
|
|
|
+ <el-card class="text-xs box-card" :body-style="{ padding: '10px !important' }">
|
|
|
|
+ <div class="text-bold text-center">能源流传递及损耗</div>
|
|
|
|
+ <div class="grid col-3">
|
|
|
|
+ <div style="height: calc(66.66vh - 170px);padding-right: 8px;">
|
|
|
|
+ <div v-for="(ftem, fndex) in energyFlow1" :key="fndex"
|
|
|
|
+ :style="{ height: ftem.heig + '%' }" class="flex flex-direction"
|
|
|
|
+ :class="fndex == 2?'justify-center':'justify-around'">
|
|
|
|
+ <el-card class="box-card" :body-style="{ padding: '5px !important' }"
|
|
|
|
+ :class="fndex == 2?'margin-top':''"
|
|
|
|
+ v-for="(fstem, fsndex) in ftem.rows" :key="fsndex">
|
|
|
|
+ <div class="flex justify-between align-center">
|
|
|
|
+ <span>{{ fstem.name }}</span>
|
|
|
|
+ <span class="text-purple" style="font-weight: bolder;">{{ fstem.value }}</span>
|
|
|
|
+ </div>
|
|
|
|
+ </el-card>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ <div style="height: calc(66.66vh - 170px);padding: 0 4px;">
|
|
|
|
+ <div v-for="(ftem, fndex) in energyFlow2" :key="fndex"
|
|
|
|
+ :style="{ height: ftem.heig + '%' }" class="flex flex-direction"
|
|
|
|
+ :class="fndex == 4?'justify-center':'justify-around'">
|
|
|
|
+ <el-card class="box-card" :body-style="{ padding: '5px !important' }"
|
|
|
|
+ :class="fndex == 4?'margin-top':''"
|
|
|
|
+ v-for="(fstem, fsndex) in ftem.rows" :key="fsndex">
|
|
|
|
+ <div class="flex justify-between align-center">
|
|
|
|
+ <span>{{ fstem.name }}</span>
|
|
|
|
+ <span class="text-purple" style="font-weight: bolder;">{{ fstem.value }}</span>
|
|
|
|
+ </div>
|
|
|
|
+ </el-card>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ <div style="height: calc(66.66vh - 170px);padding-left: 8px;">
|
|
|
|
+ <div v-for="(ftem, fndex) in energyFlow3" :key="fndex"
|
|
|
|
+ :style="{ height: ftem.heig + '%' }" class="flex flex-direction"
|
|
|
|
+ :class="fndex == 4?'justify-center':'justify-around'">
|
|
|
|
+ <el-card class="box-card" :body-style="{ padding: '5px !important' }"
|
|
|
|
+ :class="fndex == 4?'margin-top':''"
|
|
|
|
+ v-for="(fstem, fsndex) in ftem.rows" :key="fsndex">
|
|
|
|
+ <div class="flex justify-between align-center">
|
|
|
|
+ <span>{{ fstem.name }}</span>
|
|
|
|
+ <span class="text-purple" style="font-weight: bolder;">{{ fstem.value }}</span>
|
|
|
|
+ </div>
|
|
|
|
+ </el-card>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ </el-card>
|
|
|
|
+ </el-col>
|
|
|
|
+ <el-col :xl="4" :lg="4" :md="4" :sm="12" :xs="12">
|
|
|
|
+ <el-card class="text-xs box-card" :body-style="{ padding: '10px !important' }">
|
|
|
|
+ <div class="text-bold text-center">耗能末端</div>
|
|
|
|
+ <div style="height: calc(66.66vh - 170px);" class="flex flex-direction justify-around">
|
|
|
|
+ <el-card class="box-card" :body-style="{ padding: '4px 5px !important' }"
|
|
|
|
+ v-for="(etem, endex) in energyEnd" :key="endex">
|
|
|
|
+ <div class="flex justify-between align-center">
|
|
|
|
+ <span>{{ etem.name }}</span>
|
|
|
|
+ <span class="text-purple" style="font-weight: bolder;">{{ etem.value }}</span>
|
|
|
|
+ </div>
|
|
|
|
+ </el-card>
|
|
|
|
+ </div>
|
|
|
|
+ </el-card>
|
|
|
|
+ </el-col>
|
|
|
|
+ <el-col :xl="3" :lg="3" :md="3" :sm="12" :xs="12">
|
|
|
|
+ <el-card class="box-card text-center" :body-style="{ padding: '10px !important' }">
|
|
|
|
+ <div class="text-xs text-bold">能源有效做功</div>
|
|
|
|
+ <div class="flex flex-direction justify-center align-center" style="height: calc(66.66vh - 170px);">
|
|
|
|
+ <svg-icon icon-class="energy" style="font-size: 3.6rem;"/>
|
|
|
|
+ <div class="text-purple text-xl text-bold margin-top">10000</div>
|
|
|
|
+ <div class="text-xs text-bold">能源有效做功</div>
|
|
|
|
+ </div>
|
|
|
|
+ </el-card>
|
|
|
|
+ </el-col>
|
|
|
|
+ </el-row>
|
|
|
|
+ <!-- height: -->
|
|
|
|
+</template>
|
|
|
|
+
|
|
|
|
+<script setup>
|
|
|
|
+ const data = reactive({
|
|
|
|
+ energyStart: [{
|
|
|
|
+ name: "主机",
|
|
|
|
+ value: 466.1,
|
|
|
|
+ icon: "engine",
|
|
|
|
+ num: 30.8
|
|
|
|
+ },{
|
|
|
|
+ name: "辅机",
|
|
|
|
+ value: 466.1,
|
|
|
|
+ icon: "engine",
|
|
|
|
+ num: 30.8
|
|
|
|
+ },{
|
|
|
|
+ name: "废气锅炉",
|
|
|
|
+ value: 466.1,
|
|
|
|
+ icon: "boiler1",
|
|
|
|
+ num: 11.55
|
|
|
|
+ },{
|
|
|
|
+ name: "燃油锅炉",
|
|
|
|
+ value: 466.1,
|
|
|
|
+ icon: "boiler2",
|
|
|
|
+ num: 11.55
|
|
|
|
+ },{
|
|
|
|
+ name: "其他装置",
|
|
|
|
+ value: 466.1,
|
|
|
|
+ icon: "equipment",
|
|
|
|
+ num: 15.4
|
|
|
|
+ }],
|
|
|
|
+ energyFlow1: [{
|
|
|
|
+ heig: 30.8,
|
|
|
|
+ rows: [{
|
|
|
|
+ name: "其他损失",
|
|
|
|
+ value: 466.1
|
|
|
|
+ },{
|
|
|
|
+ name: "排烟",
|
|
|
|
+ value: 894.0
|
|
|
|
+ },{
|
|
|
|
+ name: "传动系统",
|
|
|
|
+ value: 12.3
|
|
|
|
+ },{
|
|
|
|
+ name: "冷却损失",
|
|
|
|
+ value: 45.01
|
|
|
|
+ }]
|
|
|
|
+ },{
|
|
|
|
+ heig: 30.8,
|
|
|
|
+ rows: [{
|
|
|
|
+ name: "电站其他损失",
|
|
|
|
+ value: 676.02
|
|
|
|
+ },{
|
|
|
|
+ name: "排烟",
|
|
|
|
+ value: 451.7
|
|
|
|
+ },{
|
|
|
|
+ name: "船舶电网",
|
|
|
|
+ value: 10000
|
|
|
|
+ },{
|
|
|
|
+ name: "冷却电网",
|
|
|
|
+ value: 105.05
|
|
|
|
+ }]
|
|
|
|
+ },{
|
|
|
|
+ heig: 25,
|
|
|
|
+ rows: [{
|
|
|
|
+ name: "蒸汽管路",
|
|
|
|
+ value: 861.2
|
|
|
|
+ },{
|
|
|
|
+ name: "锅炉热量损失",
|
|
|
|
+ value: 164.2
|
|
|
|
+ }],
|
|
|
|
+ },{
|
|
|
|
+ heig: 13.5,
|
|
|
|
+ rows: [{
|
|
|
|
+ name: "能量损失",
|
|
|
|
+ value: 81.3
|
|
|
|
+ }]
|
|
|
|
+ }],
|
|
|
|
+ energyFlow2: [{
|
|
|
|
+ heig: 15.4,
|
|
|
|
+ rows: [{
|
|
|
|
+ name: "排烟损失",
|
|
|
|
+ value: 466.1
|
|
|
|
+ }]
|
|
|
|
+ },{
|
|
|
|
+ heig: 15.4,
|
|
|
|
+ rows: [{
|
|
|
|
+ name: "螺旋桨",
|
|
|
|
+ value: 676.02
|
|
|
|
+ },{
|
|
|
|
+ name: "传动损失",
|
|
|
|
+ value: 451.7
|
|
|
|
+ }]
|
|
|
|
+ },{
|
|
|
|
+ heig: 15.4,
|
|
|
|
+ rows: [{
|
|
|
|
+ name: "排烟损失",
|
|
|
|
+ value: 676.02
|
|
|
|
+ }]
|
|
|
|
+ },{
|
|
|
|
+ heig: 15.4,
|
|
|
|
+ rows: [{
|
|
|
|
+ name: "电力负载",
|
|
|
|
+ value: 676.02
|
|
|
|
+ },{
|
|
|
|
+ name: "电网损失",
|
|
|
|
+ value: 676.02
|
|
|
|
+ }]
|
|
|
|
+ },{
|
|
|
|
+ heig: 25,
|
|
|
|
+ rows: [{
|
|
|
|
+ name: "蒸汽负载",
|
|
|
|
+ value: 861.2
|
|
|
|
+ },{
|
|
|
|
+ name: "管路热量损失",
|
|
|
|
+ value: 164.2
|
|
|
|
+ }],
|
|
|
|
+ }],
|
|
|
|
+ energyFlow3: [{
|
|
|
|
+ heig: 46.2,
|
|
|
|
+ rows: [{
|
|
|
|
+ name: "推进损失",
|
|
|
|
+ value: 466.1
|
|
|
|
+ }]
|
|
|
|
+ },{
|
|
|
|
+ heig: 15.4,
|
|
|
|
+ rows: [{
|
|
|
|
+ name: "负载损失",
|
|
|
|
+ value: 451.7
|
|
|
|
+ }]
|
|
|
|
+ },{
|
|
|
|
+ heig: 25,
|
|
|
|
+ rows: [{
|
|
|
|
+ name: "负载损失",
|
|
|
|
+ value: 164.2
|
|
|
|
+ }],
|
|
|
|
+ }],
|
|
|
|
+ energyEnd: [{
|
|
|
|
+ name: "辅机T/C回收",
|
|
|
|
+ value: 466.1
|
|
|
|
+ },{
|
|
|
|
+ name: "主机T/C回收",
|
|
|
|
+ value: 894.0
|
|
|
|
+ },{
|
|
|
|
+ name: "推进做功",
|
|
|
|
+ value: 12.3
|
|
|
|
+ },{
|
|
|
|
+ name: "机舱辅机",
|
|
|
|
+ value: 45.01
|
|
|
|
+ },{
|
|
|
|
+ name: "甲板机械",
|
|
|
|
+ value: 676.02
|
|
|
|
+ },{
|
|
|
|
+ name: "空调冷藏",
|
|
|
|
+ value: 451.7
|
|
|
|
+ },{
|
|
|
|
+ name: "厨房洗衣",
|
|
|
|
+ value: 10000
|
|
|
|
+ },{
|
|
|
|
+ name: "电器设备",
|
|
|
|
+ value: 105.05
|
|
|
|
+ },{
|
|
|
|
+ name: "货油舱加热",
|
|
|
|
+ value: 861.2
|
|
|
|
+ },{
|
|
|
|
+ name: "机舱加热",
|
|
|
|
+ value: 164.2
|
|
|
|
+ },{
|
|
|
|
+ name: "机械用蒸汽",
|
|
|
|
+ value: 81.3
|
|
|
|
+ },{
|
|
|
|
+ name: "其他用途",
|
|
|
|
+ value: 162.1
|
|
|
|
+ },{
|
|
|
|
+ name: "耗能做功",
|
|
|
|
+ value: 46.21
|
|
|
|
+ }]
|
|
|
|
+ });
|
|
|
|
+ const { energyStart, energyEnd, energyFlow1, energyFlow2, energyFlow3 } = toRefs(data);
|
|
|
|
+</script>
|
|
|
|
+
|
|
|
|
+<style>
|
|
|
|
+</style>
|