Guoxiaohuan 5 years ago
parent
commit
cd77c6ee5d

BIN
src/assets/warning.png


+ 188 - 0
src/views/evaluate/evStackedLine.vue

@@ -0,0 +1,188 @@
+<template>
+  <div id="lineCharts"></div>
+</template>
+
+<script>
+var echarts = require("echarts");
+export default {
+  data() {
+    return {};
+  },
+  mounted() {
+    this.drawItLine();
+  },
+  methods: {
+    drawItLine() {
+      let myCharts = echarts.init(document.getElementById("lineCharts"));
+      var option = {
+        title: {
+          //   text: "折线图堆叠"
+        },
+        tooltip: {
+          trigger: "axis"
+        },
+        legend: {
+          data: ["优衣库", "海底捞", "大玩家"],
+          icon: "stack",
+          right: 28
+        },
+        color: ["#0091FF", "#00D6B9", "#FFBA6B"],
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "3%",
+          containLabel: true
+        },
+        xAxis: {
+          type: "category",
+          boundaryGap: false,
+          data: [
+            "00:00",
+            "01:00",
+            "02:00",
+            "03:00",
+            "04:00",
+            "05:00",
+            "06:00",
+            "07:00",
+            "08:00",
+            "09:00",
+            "10:00",
+            "11:00",
+            "12:00",
+            "13:00",
+            "14:00",
+            "15:00",
+            "16:00",
+            "17:00",
+            "18:00",
+            "19:00",
+            "20:00",
+            "21:00",
+            "22:00",
+            "23:00",
+            "24:00"
+          ]
+        },
+        yAxis: {
+          type: "value",
+          axisLabel: {
+            formatter: "{value}℃",
+            min: 13,
+            max: 25
+          },
+          splitLine: {
+            lineStyle: {
+              type: "dotted"
+            }
+          }
+        },
+        series: [
+          {
+            name: "优衣库",
+            type: "line",
+            stack: "总量",
+            data: [
+              13,
+              12,
+              12,
+              14,
+              11,
+              13,
+              12,
+              11,
+              12,
+              12,
+              14,
+              11,
+              13,
+              14,
+              15,
+              12,
+              12,
+              14,
+              11,
+              13,
+              11,
+              14,
+              13,
+              12,
+              15
+            ]
+          },
+          {
+            name: "海底捞",
+            type: "line",
+            stack: "总量",
+            data: [
+              13,
+              15,
+              12,
+              14,
+              13,
+              16,
+              15,
+              13,
+              12,
+              11,
+              13,
+              14,
+              15,
+              14,
+              13,
+              12,
+              13,
+              14,
+              13,
+              12,
+              10,
+              12,
+              12,
+              11,
+              14
+            ]
+          },
+          {
+            name: "大玩家",
+            type: "line",
+            stack: "总量",
+            data: [
+              18,
+              19,
+              19,
+              19,
+              11,
+              11,
+              12,
+              18,
+              12,
+              19,
+              13,
+              11,
+              12,
+              13,
+              18,
+              13,
+              13,
+              14,
+              19,
+              11,
+              13,
+              18,
+              12,
+              19
+            ]
+          }
+        ]
+      };
+      myCharts.setOption(option);
+    }
+  }
+};
+</script>
+<style lang="scss" scoped>
+#lineCharts {
+  width: 100%;
+  height: 100%;
+}
+</style>

+ 193 - 29
src/views/evaluate/evTwoLevelMenu.vue

@@ -16,32 +16,52 @@
             <li :class="{current: num==3}" @click="change(3)">执行率</li>
           </div>
           <div class="count-top-right">
-            <el-date-picker v-model="value1" type="date"></el-date-picker>
+            <span class="arrow-left"></span>
+            <span class="arrow-line arrow-line1"></span>
+            <el-date-picker v-model="value1" placeholder="2020-02-19" type="date"></el-date-picker>
+            <span class="arrow-line"></span>
+            <span class="arrow-right"></span>
           </div>
         </ul>
 
         <div class="count-bottom">
           <div v-show="num == 1">
             <div class="count-bottom-title">
-              <span class="span1"></span>
-              <span class="span2">室内温度满足率</span>
-              <span class="span3">90.2%</span>
+              <span class="count-bottom-text">
+                <span class="span1"></span>
+                <span class="span2">室内温度满足率</span>
+                <span class="span3">90.2%</span>
+              </span>
+            </div>
+            <div class="count-bottom-switch">
+              <span class="switchSpan">只显示不满足的点位</span>
+              <el-switch v-model="value2"></el-switch>
+            </div>
+            <div class="count-bottom-content">
+              <ev-two-table :switch="value2"></ev-two-table>
+            </div>
+            <div class="count-bottom-foot">
+              <ev-stacked-line></ev-stacked-line>
             </div>
           </div>
           <div v-show="num == 2">
             <div class="count-bottom-title">
-              <span class="span1"></span>
-              <span class="span2">节能率</span>
-              <span class="span4">22.6%</span>
-              <span class="span5">准确率</span>
-              <span class="span6">90%</span>
+              <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>
             </div>
           </div>
           <div v-show="num == 3">
             <div class="count-bottom-title">
-              <span class="span1"></span>
-              <span class="span2">执行率</span>
-              <img class="span7" src="../../assets/finish.png" alt />
+              <span class="count-bottom-text">
+                <span class="span1"></span>
+                <span class="span2">执行率</span>
+                <img class="span7" src="../../assets/finish.png" alt />
+              </span>
             </div>
           </div>
         </div>
@@ -51,42 +71,59 @@
 </template>
 <script>
 import Head from "../main/index";
+import EvTwoTable from "./evTwoTable";
+import EvStackedLine from "./evStackedLine";
 
 export default {
   data() {
     return {
       headText: "运行评价",
       num: 1,
-      value1: ""
+      value1: "",
+      value2: true
     };
   },
   components: {
-    Head
+    Head,
+    EvTwoTable,
+    EvStackedLine
+  },
+  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}`
+        }
   }
 };
 </script>
 <style lang="scss" scoped>
 .evTwoContainer {
   background: #fff;
-  // padding: 0 24px;
   .count-top {
     width: 100%;
     height: 100%;
-    background: rgba(247, 249, 250, 1);
-
     ul {
       display: flex;
       padding: 0 24px;
       justify-content: space-between;
       align-items: center;
-      // padding: 0;
       margin: 0;
-
+      background: #f7f9fa;
       text-align: center;
       .count-top-left {
         display: flex;
@@ -127,6 +164,36 @@ export default {
         border-radius: 6px;
         margin: 10px 0;
         border: 1px solid rgba(195, 198, 203, 1);
+        display: flex;
+        align-items: center;
+        .arrow-left {
+          width: 0;
+          height: 0;
+          border-top: 7px solid transparent;
+          border-bottom: 7px solid transparent;
+          border-right: 7px solid #9ca2a9;
+          margin-right: 6px;
+          margin-left: 8px;
+          cursor: pointer;
+        }
+        .arrow-right {
+          width: 0;
+          height: 0;
+          border-top: 7px solid transparent;
+          border-bottom: 7px solid transparent;
+          border-left: 7px solid #9ca2a9;
+          margin-right: 8px;
+          margin-left: 6px;
+          cursor: pointer;
+        }
+        .arrow-line {
+          width: 1px;
+          height: 22px;
+          background: rgba(228, 229, 231, 1);
+        }
+        .arrow-line1 {
+          margin-right: 6.5px;
+        }
       }
     }
 
@@ -143,20 +210,88 @@ export default {
       margin-right: 22px;
     }
     .count-bottom {
-      height: 100%;
       padding: 0 24px;
+      height: auto;
       background: #fff;
+      margin-top: 22px;
       .count-bottom-title {
-        display: inline-block;
-        // display: flex;
-        height: 90px;
-        background: rgba(248, 249, 250, 1);
-        border-radius: 6px;
-        border: 1px solid rgba(238, 238, 238, 1);
-        span{
-          display: inline-block;
+        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;
+        align-items: center;
+        margin-top: -15px;
+        .switchSpan {
+          height: 31px;
+          font-size: 20px;
+          font-family: PingFangSC-Regular, PingFang SC;
+          font-weight: 400;
+          color: rgba(31, 36, 41, 1);
+          line-height: 28px;
+          margin-right: 22px;
+        }
+      }
+      .count-bottom-content {
+        margin-top: 12px;
+      }
+      .count-bottom-foot {
+        margin-top: 46px;
+        height: 480px;
+        background: rgba(255, 255, 255, 1);
+        border: 1px solid rgba(228, 230, 231, 1);
+      }
     }
     .current {
       font-size: 16px;
@@ -170,6 +305,7 @@ export default {
 </style>
 <style lang="scss">
 .count-top-right {
+  text-align: center;
   .el-input__inner {
     width: 132px;
     margin: 7px 10px;
@@ -179,5 +315,33 @@ export default {
   .el-input__icon {
     display: none;
   }
+  .el-input--prefix .el-input__inner {
+    padding-left: 20px;
+  }
+  .el-input--suffix .el-input__inner {
+    padding-right: 20px;
+  }
+}
+.count-bottom-switch {
+  .el-switch__core {
+    width: 56px !important;
+    height: 30px;
+    border-radius: 17px;
+  }
+  .el-switch.is-checked .el-switch__core::after {
+    left: 100%;
+    margin-left: -27px;
+  }
+  .el-switch__core:after {
+    content: "";
+    position: absolute;
+    border-radius: 100%;
+    -webkit-transition: all 0.3s;
+    transition: all 0.3s;
+    width: 28px;
+    height: 28px;
+    background-color: #fff;
+    top: 0;
+  }
 }
 </style>

+ 108 - 0
src/views/evaluate/evTwoTable.vue

@@ -0,0 +1,108 @@
+<template>
+  <el-table
+    class="expandTable"
+    :data="tableData"
+    style="width: 100%;z-index:1"
+    :row-key="getRowKeys"
+    :expand-row-keys="expands"
+  >
+    <el-table-column type="expand">
+      <template slot-scope="props">
+        <el-table :data="tableData" style="width: 100%;">
+          <el-table-column type="selection" width="50" align="right"></el-table-column>
+          <el-table-column prop="name" label align="right" width="150">
+            <template slot-scope="{row}">
+              <img class="ex-img" src="../../assets/warning.png" alt />
+              {{row.name}}
+            </template>
+          </el-table-column>
+          <el-table-column prop="a" label align="right"></el-table-column>
+          <el-table-column prop="b" label align="right"></el-table-column>
+          <el-table-column prop="c" label align="right"></el-table-column>
+          <el-table-column prop="d" label align="right"></el-table-column>
+          <el-table-column prop="e" label align="right"></el-table-column>
+          <el-table-column prop="f" label align="center"></el-table-column>
+        </el-table>
+      </template>
+    </el-table-column>
+    <el-table-column prop="g" label align="right" width="50"></el-table-column>
+    <el-table-column prop label="位置详情" align="right" width="100"></el-table-column>
+    <el-table-column prop label="温度要求范围(℃)" align="right"></el-table-column>
+    <el-table-column prop label="平均温度(℃)" align="right"></el-table-column>
+    <el-table-column prop label="累计超限时长(分钟)" align="right"></el-table-column>
+    <el-table-column prop label="平均超限程度(℃)" align="right"></el-table-column>
+    <el-table-column prop label="连续超限最大时长(分钟)" align="right"></el-table-column>
+    <el-table-column prop label="最大温差(℃)" align="center"></el-table-column>
+  </el-table>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      getRowKeys(row) {
+        return row.id;
+      },
+      expands: [],
+      tableData: [
+        {
+          id: "1",
+          name: "优衣库",
+          a: "22-26",
+          b: "26.5",
+          c: "37",
+          d: "-1",
+          e: "12",
+          f: "-3",
+          g: "F3"
+        },
+
+        {
+          id: "3",
+          name: "优衣库",
+          a: "22-26",
+          b: "26.5",
+          c: "37",
+          d: "1",
+          e: "12",
+          f: "-3",
+          g: "F2"
+        }
+      ]
+    };
+  },
+  props: ["switch"],
+  methods: {
+    init() {
+      if (this.tableData) {
+        this.tableData.forEach(item => {
+          if (item.d > 0) {
+            this.expands.push(item.id);
+          }
+        });
+      }
+    }
+  },
+  mounted() {
+    this.init();
+  }
+};
+</script>
+<style lang="scss" scoped>
+.expandTable {
+  .ex-img {
+    width: 22px;
+    height: 22px;
+    vertical-align: middle;
+  }
+}
+</style>
+<style lang="scss">
+.expandTable {
+  .el-table thead {
+    display: none;
+  }
+  .el-table__expanded-cell {
+    padding: 0;
+  }
+}
+</style>

+ 3 - 2
src/views/evaluate/index.vue

@@ -61,7 +61,7 @@
         </div>
       </div>
       <div class="ev-footer">
-        <ev-indoor-temperature></ev-indoor-temperature>
+        <ev-indoor-temperature :date='date'></ev-indoor-temperature>
       </div>
     </div>
   </div>
@@ -76,7 +76,8 @@ import EvIndoorTemperature from "./evIndoorTemperature";
 export default {
   data() {
     return {
-      headText: "运行评价"
+      headText: "运行评价",
+      date:'2'
     };
   },
   components: {

+ 1 - 0
src/views/main/index.vue

@@ -323,6 +323,7 @@ export default {
     -o-transition: all 0.3s;
     -webkit-box-sizing: border-box;
     box-sizing: border-box;
+    z-index: 99;
     .nav-bth {
       width: 16px;
       height: 16px;