|
|
@@ -23,16 +23,9 @@
|
|
|
<span class="arrow-right"></span>
|
|
|
</div>
|
|
|
</ul>
|
|
|
-
|
|
|
<div class="count-bottom">
|
|
|
<div v-show="num == 1">
|
|
|
- <div class="count-bottom-title">
|
|
|
- <span class="count-bottom-text">
|
|
|
- <span class="span1"></span>
|
|
|
- <span class="span2">室内温度满足率</span>
|
|
|
- <span class="span3">90.2%</span>
|
|
|
- </span>
|
|
|
- </div>
|
|
|
+ <ev-rate-title :tab="1"></ev-rate-title>
|
|
|
<div class="count-bottom-switch">
|
|
|
<span class="switchSpan">只显示不满足的点位</span>
|
|
|
<el-switch v-model="value2"></el-switch>
|
|
|
@@ -45,24 +38,23 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
<div v-show="num == 2">
|
|
|
- <div class="count-bottom-title">
|
|
|
- <span class="count-bottom-text">
|
|
|
- <span class="span1"></span>
|
|
|
- <span class="span2">节能率</span>
|
|
|
- <span class="span4">22.6%</span>
|
|
|
- <span class="span5">准确率</span>
|
|
|
- <span class="span6">90%</span>
|
|
|
- </span>
|
|
|
+ <ev-rate-title :tab="2"></ev-rate-title>
|
|
|
+ <div class="count-historical-data">
|
|
|
+ <ev-history></ev-history>
|
|
|
+ <div class="count-foot">
|
|
|
+ <div class="count-foot-title">
|
|
|
+ <span>相似日概况</span>
|
|
|
+ <span>相似度高</span>
|
|
|
+ </div>
|
|
|
+ <div class="count-foot-table">
|
|
|
+ <ev-energy-table></ev-energy-table>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div v-show="num == 3">
|
|
|
- <div class="count-bottom-title">
|
|
|
- <span class="count-bottom-text">
|
|
|
- <span class="span1"></span>
|
|
|
- <span class="span2">执行率</span>
|
|
|
- <img class="span7" src="../../assets/finish.png" alt />
|
|
|
- </span>
|
|
|
- </div>
|
|
|
+ <ev-rate-title :tab="3"></ev-rate-title>
|
|
|
+ <ev-card v-if="cardList.length>0" :cardList="cardList"></ev-card>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -73,41 +65,85 @@
|
|
|
import Head from "../main/index";
|
|
|
import EvTwoTable from "./evTwoTable";
|
|
|
import EvStackedLine from "./evStackedLine";
|
|
|
-
|
|
|
+import EvEnergyTable from "./evEnergyTable";
|
|
|
+import EvCard from "./evCard"; //执行率
|
|
|
+import EvRateTitle from "./evRateTitle";
|
|
|
+import EvHistory from "./evHistory";
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
headText: "运行评价",
|
|
|
num: 1,
|
|
|
value1: "",
|
|
|
- value2: true
|
|
|
+ value2: true,
|
|
|
+ cardList: [
|
|
|
+ {
|
|
|
+ a: "08:30",
|
|
|
+ b: "1",
|
|
|
+ c: "2",
|
|
|
+ d: "8.0",
|
|
|
+ e: "1",
|
|
|
+ f: "2",
|
|
|
+ g: "7.0",
|
|
|
+ h: "这是备注",
|
|
|
+ i: require("../../assets/error.png"),
|
|
|
+ k: "未按策略执行"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ a: "08:30",
|
|
|
+ b: "1",
|
|
|
+ c: "2",
|
|
|
+ d: "8.0",
|
|
|
+ e: "1",
|
|
|
+ f: "2",
|
|
|
+ g: "5.0",
|
|
|
+ i: require("../../assets/processing.png"),
|
|
|
+ k: "申诉中"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ a: "08:30",
|
|
|
+ b: "1",
|
|
|
+ c: "2",
|
|
|
+ d: "8.0",
|
|
|
+ e: "1",
|
|
|
+ f: "2",
|
|
|
+ g: "2.0",
|
|
|
+ h: "这是备注",
|
|
|
+ i: require("../../assets/completed.png"),
|
|
|
+ k: "已按策略执行"
|
|
|
+ }
|
|
|
+ ]
|
|
|
};
|
|
|
},
|
|
|
components: {
|
|
|
Head,
|
|
|
EvTwoTable,
|
|
|
- EvStackedLine
|
|
|
+ EvStackedLine,
|
|
|
+ EvEnergyTable,
|
|
|
+ EvCard,
|
|
|
+ EvRateTitle,
|
|
|
+ EvHistory
|
|
|
},
|
|
|
- mounted(){
|
|
|
-this.dateNow()
|
|
|
+ mounted() {
|
|
|
+ this.dateNow();
|
|
|
},
|
|
|
methods: {
|
|
|
change: function(index) {
|
|
|
this.num = index;
|
|
|
},
|
|
|
- dateNow() {
|
|
|
- var day = new Date()
|
|
|
- day.setTime(day.getTime() - 24 * 60 * 60 * 1000)
|
|
|
- let years = day.getFullYear()
|
|
|
- let months = day.getMonth() + 1
|
|
|
- let days = day.getDate()
|
|
|
- if (months < 10) {
|
|
|
- months = '0' + months
|
|
|
- } else if (days < 10) {
|
|
|
- days = '0' + days
|
|
|
- }
|
|
|
- this.dateValue = `${years}${months}${days}`
|
|
|
- }
|
|
|
+ dateNow() {
|
|
|
+ var day = new Date();
|
|
|
+ day.setTime(day.getTime() - 24 * 60 * 60 * 1000);
|
|
|
+ let years = day.getFullYear();
|
|
|
+ let months = day.getMonth() + 1;
|
|
|
+ let days = day.getDate();
|
|
|
+ if (months < 10) {
|
|
|
+ months = "0" + months;
|
|
|
+ } else if (days < 10) {
|
|
|
+ days = "0" + days;
|
|
|
+ }
|
|
|
+ this.dateValue = `${years}${months}${days}`;
|
|
|
+ }
|
|
|
}
|
|
|
};
|
|
|
</script>
|
|
|
@@ -214,60 +250,6 @@ this.dateNow()
|
|
|
height: auto;
|
|
|
background: #fff;
|
|
|
margin-top: 22px;
|
|
|
- .count-bottom-title {
|
|
|
- display: flex;
|
|
|
- .count-bottom-text {
|
|
|
- height: 90px;
|
|
|
- background: rgba(248, 249, 250, 1);
|
|
|
- border-radius: 6px;
|
|
|
- border: 1px solid rgba(238, 238, 238, 1);
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- padding-right: 34px;
|
|
|
- .span1 {
|
|
|
- width: 6px;
|
|
|
- height: 90px;
|
|
|
- background: rgba(0, 145, 255, 1);
|
|
|
- border-radius: 6px 0 0 6px;
|
|
|
- margin-right: 28px;
|
|
|
- }
|
|
|
- .span2 {
|
|
|
- font-size: 28px;
|
|
|
- font-family: MicrosoftYaHeiSemibold;
|
|
|
- color: rgba(31, 36, 41, 1);
|
|
|
- margin-right: 16px;
|
|
|
- }
|
|
|
- .span3 {
|
|
|
- font-size: 34px;
|
|
|
- font-family: Persagy-Bold, Persagy;
|
|
|
- font-weight: bold;
|
|
|
- color: rgba(31, 36, 41, 1);
|
|
|
- }
|
|
|
- .span4 {
|
|
|
- font-size: 34px;
|
|
|
- font-family: Persagy-Bold, Persagy;
|
|
|
- font-weight: bold;
|
|
|
- color: rgba(31, 36, 41, 1);
|
|
|
- margin-right: 44px;
|
|
|
- }
|
|
|
- .span5 {
|
|
|
- font-size: 22px;
|
|
|
- font-family: PingFangSC-Regular, PingFang SC;
|
|
|
- font-weight: 400;
|
|
|
- color: rgba(100, 108, 115, 1);
|
|
|
- margin-right: 12px;
|
|
|
- }
|
|
|
- .span6 {
|
|
|
- font-size: 22px;
|
|
|
- font-family: Persagy;
|
|
|
- color: rgba(100, 108, 115, 1);
|
|
|
- }
|
|
|
- .span7 {
|
|
|
- width: 28px;
|
|
|
- height: 28px;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
.count-bottom-switch {
|
|
|
display: flex;
|
|
|
justify-content: flex-end;
|
|
|
@@ -283,6 +265,37 @@ this.dateNow()
|
|
|
margin-right: 22px;
|
|
|
}
|
|
|
}
|
|
|
+ .count-historical-data {
|
|
|
+ .count-foot {
|
|
|
+ .count-foot-title {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ margin-bottom: 22px;
|
|
|
+ span:nth-of-type(1) {
|
|
|
+ height: 34px;
|
|
|
+ font-size: 22px;
|
|
|
+ font-family: MicrosoftYaHeiSemibold;
|
|
|
+ color: rgba(31, 36, 41, 1);
|
|
|
+ line-height: 30px;
|
|
|
+ margin-right: 22px;
|
|
|
+ }
|
|
|
+ span:nth-of-type(2) {
|
|
|
+ width: 101px;
|
|
|
+ height: 34px;
|
|
|
+ background: rgba(225, 242, 255, 1);
|
|
|
+ border-radius: 3px;
|
|
|
+ font-size: 20px;
|
|
|
+ font-family: MicrosoftYaHei;
|
|
|
+ color: rgba(0, 101, 179, 1);
|
|
|
+ line-height: 34px;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .count-foot-content {
|
|
|
+ height: 500px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
.count-bottom-content {
|
|
|
margin-top: 12px;
|
|
|
}
|
Guoxiaohuan
