|
@@ -1,85 +1,88 @@
|
|
|
<template>
|
|
|
- <div class="count-bottom-title">
|
|
|
- <span v-if="tab==1" class="count-bottom-text">
|
|
|
- <span class="span1"></span>
|
|
|
- <span class="span2 Micbold">室内温度满足率</span>
|
|
|
- <span class="span3">{{rate||'--'}}%</span>
|
|
|
- </span>
|
|
|
- <span v-if="tab==2" class="count-bottom-text">
|
|
|
- <span class="span1"></span>
|
|
|
- <span class="span2 Micbold">节能率</span>
|
|
|
- <span class="span4">{{rate}}%</span>
|
|
|
- <span class="span5">准确率</span>
|
|
|
- <span class="span6">{{accuracy}}%</span>
|
|
|
- </span>
|
|
|
- <span v-if="tab==3" class="count-bottom-text">
|
|
|
- <span class="span1"></span>
|
|
|
- <span class="span2 Micbold">是否按策略执行</span>
|
|
|
- <img class="span7" src="../../assets/finish.png" alt />
|
|
|
- </span>
|
|
|
- </div>
|
|
|
+ <div class='count-bottom-title'>
|
|
|
+ <span v-if='tab==1' class='count-bottom-text'>
|
|
|
+ <span class='span1'></span>
|
|
|
+ <span class='span2 Micbold'>室内温度满足率</span>
|
|
|
+ <span class='span3'>{{rate||'--'}}%</span>
|
|
|
+ </span>
|
|
|
+ <span v-if='tab==2' class='count-bottom-text'>
|
|
|
+ <span class='span1'></span>
|
|
|
+ <span class='span2 Micbold'>节能率</span>
|
|
|
+ <span class='span4'>{{rate}}%</span>
|
|
|
+ <span class='span5'>准确率</span>
|
|
|
+ <span class='span6'>{{accuracy}}%</span>
|
|
|
+ </span>
|
|
|
+ <span v-if='tab==3' class='count-bottom-text'>
|
|
|
+ <span class='span1'></span>
|
|
|
+ <span class='span2 Micbold'>是否按策略执行</span>
|
|
|
+ <img v-if='chillerExecuteRateReal>=75' class='span7' src='../../assets/finish.png' alt />
|
|
|
+ <img v-else-if='chillerExecuteRate>=75' class='span7' src='../../assets/processing.png' alt />
|
|
|
+ <img v-else class='span7' src='../../assets/wrong.png' alt />
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
<script>
|
|
|
export default {
|
|
|
- data() {
|
|
|
- return {};
|
|
|
- },
|
|
|
- mounted() {},
|
|
|
- props: ["tab", "rate", "accuracy"]
|
|
|
-};
|
|
|
+ data() {
|
|
|
+ return {}
|
|
|
+ },
|
|
|
+ props: ['chillerExecuteRate', 'chillerExecuteRateReal'],
|
|
|
+ mounted() {},
|
|
|
+ props: ['tab', 'rate', 'accuracy']
|
|
|
+}
|
|
|
</script>
|
|
|
<style lang="scss" scoped>
|
|
|
.count-bottom-title {
|
|
|
- display: flex;
|
|
|
- .count-bottom-text {
|
|
|
- height: 64px;
|
|
|
- background: rgba(248, 249, 250, 1);
|
|
|
- border-radius: 4px;
|
|
|
- border: 1px solid rgba(238, 238, 238, 1);
|
|
|
display: flex;
|
|
|
- align-items: center;
|
|
|
- padding-right: 24px;
|
|
|
- .span1 {
|
|
|
- width: 4px;
|
|
|
- height: 64px;
|
|
|
- background: rgba(0, 145, 255, 1);
|
|
|
- border-radius: 4px 0 0 4px;
|
|
|
- margin-right: 20px;
|
|
|
- }
|
|
|
- .span2 {
|
|
|
- font-size: 20px;
|
|
|
- color: rgba(31, 36, 41, 1);
|
|
|
- margin-right: 12px;
|
|
|
- }
|
|
|
- .span3 {
|
|
|
- font-size: 24px;
|
|
|
- font-family: Persagy-Bold, Persagy;
|
|
|
- font-weight: bold;
|
|
|
- color: rgba(31, 36, 41, 1);
|
|
|
- }
|
|
|
- .span4 {
|
|
|
- font-size: 24px;
|
|
|
- font-family: Persagy-Bold, Persagy;
|
|
|
- font-weight: bold;
|
|
|
- color: rgba(31, 36, 41, 1);
|
|
|
- margin-right: 32px;
|
|
|
- }
|
|
|
- .span5 {
|
|
|
- font-size: 16px;
|
|
|
- font-family: PingFangSC-Regular, PingFang SC;
|
|
|
- font-weight: 400;
|
|
|
- color: rgba(100, 108, 115, 1);
|
|
|
- margin-right: 8px;
|
|
|
- }
|
|
|
- .span6 {
|
|
|
- font-size: 16px;
|
|
|
- font-family: Persagy;
|
|
|
- color: rgba(100, 108, 115, 1);
|
|
|
- }
|
|
|
- .span7 {
|
|
|
- width: 20px;
|
|
|
- height: 20px;
|
|
|
+ .count-bottom-text {
|
|
|
+ height: 64px;
|
|
|
+ background: rgba(248, 249, 250, 1);
|
|
|
+ border-radius: 4px;
|
|
|
+ border: 1px solid rgba(238, 238, 238, 1);
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ padding-right: 24px;
|
|
|
+ .span1 {
|
|
|
+ width: 4px;
|
|
|
+ height: 64px;
|
|
|
+ background: rgba(0, 145, 255, 1);
|
|
|
+ border-radius: 4px 0 0 4px;
|
|
|
+ margin-right: 20px;
|
|
|
+ }
|
|
|
+ .span2 {
|
|
|
+ font-size: 20px;
|
|
|
+ color: rgba(31, 36, 41, 1);
|
|
|
+ margin-right: 12px;
|
|
|
+ }
|
|
|
+ .span3 {
|
|
|
+ font-size: 24px;
|
|
|
+ font-family: Persagy-Bold, Persagy;
|
|
|
+ font-weight: bold;
|
|
|
+ color: rgba(31, 36, 41, 1);
|
|
|
+ }
|
|
|
+ .span4 {
|
|
|
+ font-size: 24px;
|
|
|
+ font-family: Persagy-Bold, Persagy;
|
|
|
+ font-weight: bold;
|
|
|
+ color: rgba(31, 36, 41, 1);
|
|
|
+ margin-right: 32px;
|
|
|
+ }
|
|
|
+ .span5 {
|
|
|
+ font-size: 16px;
|
|
|
+ font-family: PingFangSC-Regular, PingFang SC;
|
|
|
+ font-weight: 400;
|
|
|
+ color: rgba(100, 108, 115, 1);
|
|
|
+ margin-right: 8px;
|
|
|
+ }
|
|
|
+ .span6 {
|
|
|
+ font-size: 16px;
|
|
|
+ font-family: Persagy;
|
|
|
+ color: rgba(100, 108, 115, 1);
|
|
|
+ }
|
|
|
+ .span7 {
|
|
|
+ width: 20px;
|
|
|
+ height: 20px;
|
|
|
+ }
|
|
|
}
|
|
|
- }
|
|
|
}
|
|
|
</style>
|