查看快照

src/views/evaluate/evCard.vue

@@ -22,14 +22,33 @@
           <img :src="item.i" alt />
           {{item.k}}
         </span>
-        <span>查看快照</span>
+        <span @click="viewSnapshots = true">查看快照</span>
       </div>
     </div>
+    <div class="view-dialog">
+      <el-dialog
+        title="策略推出时状况"
+        :visible.sync="viewSnapshots"
+        :close-on-click-modal="false"
+        width="1260px"
+      >
+        <ev-snapshots-dialog></ev-snapshots-dialog>
+      </el-dialog>
+    </div>
   </div>
 </template>
 <script>
+import EvSnapshotsDialog from "./evSnapshotsDialog";
 export default {
-  props: ["cardList"]
+  data() {
+    return {
+      viewSnapshots: false
+    };
+  },
+  props: ["cardList"],
+  components: {
+    EvSnapshotsDialog
+  }
 };
 </script>
 <style lang="scss" scoped>
@@ -38,13 +57,13 @@ export default {
   display: flex;
   flex-wrap: wrap;
   .count-card {
-    min-width: 540px;
-    margin-right: 16px;
-    margin-top: 22px;
-    padding: 22px 28px;
+    max-width: 436px;
+    margin-right: 6px;
+    margin-top: 16px;
+    padding: 16px 20px;
     background: rgba(255, 255, 255, 1);
-    box-shadow: 0px 6px 17px -3px rgba(31, 36, 41, 0.1);
-    border-radius: 6px;
+    box-shadow: 0px 4px 12px -2px rgba(31, 36, 41, 0.1);
+    border-radius: 4px;
     border: 1px solid rgba(228, 230, 231, 1);
     .card-div1,
     .card-div2,
@@ -56,102 +75,103 @@ export default {
       align-items: center;
     }
     .card-div1 {
-      height: 31px;
-      font-size: 22px;
+      height: 22px;
+      font-size: 16px;
       font-family: PingFangSC-Regular, PingFang SC;
       font-weight: 400;
       color: rgba(31, 36, 41, 1);
-      line-height: 31px;
-      margin-bottom: 20px;
+      line-height: 22px;
+      margin-bottom: 14px;
     }
     .card-div2,
     .card-div3 {
-      height: 56px;
+      height: 40px;
       background: rgba(245, 246, 247, 1);
       border-radius: 1px;
-      padding-left: 22px;
+      padding-left: 16px;
       padding-right: 34px;
       span:nth-of-type(1) {
-        height: 27px;
-        font-size: 20px;
+        height: 19px;
+        font-size: 14px;
         font-family: MicrosoftYaHei;
         color: rgba(31, 36, 41, 1);
-        line-height: 27px;
-        margin-right: 50px;
+        line-height: 19px;
+        margin-right: 36px;
       }
       span:nth-of-type(2) {
-        height: 25px;
-        font-size: 17px;
+        height: 18px;
+        font-size: 12px;
         font-family: MicrosoftYaHei;
         color: rgba(141, 147, 153, 1);
-        line-height: 31px;
-        margin-right: 12px;
+        line-height: 22px;
+        margin-right: 8px;
       }
       span:nth-of-type(3) {
-        height: 27px;
-        font-size: 20px;
+        height: 19px;
+        font-size: 14px;
         font-family: MicrosoftYaHei;
         color: rgba(31, 36, 41, 1);
-        line-height: 27px;
-        margin-right: 50px;
+        line-height: 19px;
+        margin-right: 36px;
       }
       span:nth-of-type(4) {
-        height: 25px;
-        font-size: 17px;
+        height: 18px;
+        font-size: 12px;
         font-family: MicrosoftYaHei;
         color: rgba(141, 147, 153, 1);
-        line-height: 31px;
-        margin-right: 6px;
+        line-height: 22px;
+        margin-right: 8px;
       }
       span:nth-of-type(5) {
-        height: 30px;
-        font-size: 22px;
+        height: 21px;
+        font-size: 16px;
         font-family: MicrosoftYaHei;
         color: rgba(31, 36, 41, 1);
-        line-height: 30px;
+        line-height: 21px;
       }
     }
     .card-div2 {
-      margin-bottom: 6px;
+      margin-bottom: 4px;
     }
     .card-div3 {
-      margin-bottom: 22px;
+      margin-bottom: 16px;
     }
     .card-div4 {
-      height: 28px;
-      font-size: 20px;
+      height: 20px;
+      font-size: 14px;
       font-family: PingFangSC-Regular, PingFang SC;
       font-weight: 400;
       color: rgba(100, 108, 115, 1);
-      line-height: 28px;
-      margin-bottom: 38px;
+      line-height: 20px;
+      margin-bottom: 26px;
     }
 
     .card-div5 {
       span:nth-of-type(1) {
         img {
-          width: 18px;
-          height: 18px;
-          margin-right: 6px;
+          width: 14px;
+          height: 14px;
+          margin-right: 4px;
         }
-        padding: 0 16px;
+        padding: 0 12px;
         display: flex;
         align-items: center;
-        height: 34px;
-        border-radius: 17px;
-        font-size: 20px;
+        height: 22px;
+        border-radius: 12px;
+        font-size: 14px;
         font-family: MicrosoftYaHeiSemibold;
       }
       span:nth-of-type(2) {
-        height: 31px;
-        font-size: 20px;
+        cursor: pointer;
+        height: 22px;
+        font-size: 14px;
         font-family: MicrosoftYaHei;
         color: rgba(31, 35, 41, 1);
-        line-height: 31px;
+        line-height: 22px;
         background: rgba(255, 255, 255, 1);
-        border-radius: 6px;
+        border-radius: 4px;
         border: 1px solid rgba(195, 199, 203, 1);
-        padding: 0 16px;
+        padding: 0 12px;
       }
     }
     .card-div6 {
@@ -168,4 +188,22 @@ export default {
     }
   }
 }
+</style>
+<style lang="scss">
+.view-dialog {
+  .el-dialog__header {
+    padding: 16px 28px 0 32px;
+    .el-dialog__title {
+      height: 24px;
+      font-size: 16px;
+      font-family: PingFangSC-Medium, PingFang SC;
+      font-weight: 500;
+      color: rgba(31, 36, 41, 1);
+      line-height: 24px;
+    }
+  }
+  .el-dialog__body {
+    padding-top: 0;
+  }
+}
 </style>

src/views/evaluate/evEnergyTable.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="evEnergyTable">
-    <el-table :data="tableData" style="width: 100%;" height="400">
+    <el-table :data="tableData" style="width: 100%;" height="350">
       <el-table-column prop label="序号" align="left" type="index" width="150"></el-table-column>
       <el-table-column prop="a" label="日期" align="left"></el-table-column>
       <el-table-column prop="b" label="室外平均温度(℃)" align="right"></el-table-column>

src/views/evaluate/evHistory.vue

@@ -43,7 +43,7 @@
 <style lang="scss" scoped>
 p {
   margin: 0;
-  margin-top: 28px;
+  margin-top: 20px;
   margin-bottom: 30px;
   display: flex;
   align-items: center;
@@ -51,39 +51,39 @@ p {
     display: inline-block;
   }
   span:nth-of-type(1) {
-    height: 34px;
-    font-size: 22px;
+    height: 24px;
+    font-size: 16px;
     font-family: MicrosoftYaHeiSemibold;
     color: rgba(31, 36, 41, 1);
-    line-height: 30px;
-    margin-right: 32px;
+    line-height: 21px;
+    margin-right: 24px;
   }
   span:nth-of-type(2) {
-    width: 14px;
-    height: 14px;
+    width: 10px;
+    height: 10px;
     background: rgba(0, 145, 255, 1);
-    margin-right: 6px;
+    margin-right: 5px;
   }
   span:nth-of-type(3) {
-    height: 25px;
-    font-size: 17px;
+    height: 18px;
+    font-size: 12px;
     font-family: MicrosoftYaHei;
     color: rgba(0, 0, 0, 1);
-    line-height: 22px;
-    margin-right: 28px;
+    line-height: 16px;
+    margin-right: 20px;
   }
   span:nth-of-type(4) {
-    width: 14px;
-    height: 14px;
+    width: 10px;
+    height: 10px;
     background: rgba(0, 214, 185, 1);
-    margin-right: 6px;
+    margin-right: 5px;
   }
   span:nth-of-type(5) {
-    height: 25px;
-    font-size: 17px;
+    height: 18px;
+    font-size: 12px;
     font-family: MicrosoftYaHei;
     color: rgba(0, 0, 0, 1);
-    line-height: 22px;
+    line-height: 16px;
   }
 }
 .count-data {
@@ -93,7 +93,7 @@ p {
   display: flex;
   justify-content: space-around;
   .outdoor {
-    width: 290px;
+    width: 208px;
     height: 200px;
     display: flex;
     justify-content: space-between;
@@ -103,18 +103,23 @@ p {
       position: absolute;
       top: -25px;
       left: 0;
+      height: 22px;
+      font-size: 14px;
+      font-family: MicrosoftYaHei;
+      color: rgba(31, 36, 41, 1);
+      line-height: 19px;
     }
     .outdoor-left {
-      width: 141px;
-      height: 170px;
+      width: 100px;
+      height: 121px;
       background: rgba(0, 145, 255, 1);
       position: absolute;
       bottom: 0;
       left: 0;
     }
     .outdoor-right {
-      width: 141px;
-      height: 159px;
+      width: 100px;
+      height: 141px;
       background: rgba(0, 214, 185, 1);
       position: absolute;
       bottom: 0;
@@ -122,7 +127,7 @@ p {
     }
   }
   .indoor {
-    width: 290px;
+    width: 208px;
     height: 200px;
     position: relative;
     span {
@@ -130,18 +135,23 @@ p {
       position: absolute;
       top: -25px;
       left: 0;
+      height: 22px;
+      font-size: 14px;
+      font-family: MicrosoftYaHei;
+      color: rgba(31, 36, 41, 1);
+      line-height: 19px;
     }
     .indoor-left {
-      width: 141px;
-      height: 170px;
+      width: 100px;
+      height: 121px;
       background: rgba(0, 145, 255, 1);
       position: absolute;
       bottom: 0;
       left: 0;
     }
     .indoor-right {
-      width: 141px;
-      height: 159px;
+      width: 100px;
+      height: 131px;
       background: rgba(0, 214, 185, 1);
       position: absolute;
       bottom: 0;
@@ -149,7 +159,7 @@ p {
     }
   }
   .coldWar {
-    width: 290px;
+    width: 208px;
     height: 200px;
     position: relative;
     span {
@@ -157,18 +167,23 @@ p {
       position: absolute;
       top: -25px;
       left: 0;
+      height: 22px;
+      font-size: 14px;
+      font-family: MicrosoftYaHei;
+      color: rgba(31, 36, 41, 1);
+      line-height: 19px;
     }
     .coldWar-left {
-      width: 141px;
-      height: 118px;
+      width: 100px;
+      height: 84px;
       background: rgba(0, 145, 255, 1);
       position: absolute;
       bottom: 0;
       left: 0;
     }
     .coldWar-right {
-      width: 141px;
-      height: 193px;
+      width: 100px;
+      height: 137px;
       background: rgba(0, 214, 185, 1);
       position: absolute;
       bottom: 0;
@@ -177,20 +192,20 @@ p {
   }
 }
 .count-text {
-  height: 22px;
-  font-size: 17px;
+  height: 16px;
+  font-size: 12px;
   font-family: MicrosoftYaHei;
   color: rgba(100, 108, 115, 1);
-  line-height: 22px;
+  line-height: 16px;
   display: flex;
   text-align: center;
-  margin-top: 16px;
-  margin-bottom: 46px;
+  margin-top: 12px;
+  margin-bottom: 34px;
   justify-content: space-around;
   .outdoor-text,
   .indoor-text,
   .coldWar-text {
-    width: 290px;
+    width: 208px;
   }
 }
 </style>

src/views/evaluate/evIndoorTemperature.vue

@@ -15,229 +15,371 @@ export default {
   methods: {
     drawIt() {
       let myCharts = echarts.init(document.getElementById("pCharts2"));
+      var colors = ["#5793f3", "#d14a61", "#675bba"];
       var option = {
-        title: {
-          text: "",
-          x: "center",
-          y: "top"
-        },
-        legend: {
-          data: ["室内温度满足率", "节能率", "策略执行"],
-          y: "26"
-        },
+        // title: {
+        //   text: "",
+        //   x: "center",
+        //   y: "top"
+        // },
+        // legend: {
+        //   data: ["室内温度满足率", "节能率", "策略执行"],
+        //   y: "26"
+        // },
+        // tooltip: {
+        //   trigger: "axis",
+        //   textStyle: {
+        //     align: "left"
+        //   }
+        // },
+        // grid: {
+        //   top: "22%",
+        //   left: "1%",
+        //   right: "1%",
+        //   bottom: "10%",
+        //   containLabel: true
+        // },
+        // xAxis: {
+        //   type: "category",
+        //   data: [
+        //     `${this.date}.1`,
+        //     `${this.date}.2`,
+        //     `${this.date}.3`,
+        //     `${this.date}.4`,
+        //     `${this.date}.5`,
+        //     `${this.date}.6`,
+        //     `${this.date}.7`,
+        //     `${this.date}.8`,
+        //     `${this.date}.9`,
+        //     `${this.date}.10`,
+        //     `${this.date}.11`,
+        //     `${this.date}.12`,
+        //     `${this.date}.13`,
+        //     `${this.date}.14`,
+        //     `${this.date}.15`,
+        //     `${this.date}.16`,
+        //     `${this.date}.17`,
+        //     `${this.date}.18`,
+        //     `${this.date}.19`,
+        //     `${this.date}.20`,
+        //     `${this.date}.21`,
+        //     `${this.date}.22`,
+        //     `${this.date}.23`,
+        //     `${this.date}.24`,
+        //     `${this.date}.25`,
+        //     `${this.date}.26`,
+        //     `${this.date}.27`,
+        //     `${this.date}.28`,
+        //     `${this.date}.29`,
+        //     `${this.date}.30`,
+        //     `${this.date}.31`
+        //   ]
+        // },
+        // yAxis: [
+        //   {
+        //     name: "室内温度满足率",
+        //     type: "value",
+        //     max: 100,
+        //     splitLine: {
+        //       show: false
+        //     }
+        //   },
+        //   {
+        //     name: "节能率",
+        //     nameLocation: "start",
+        //     max: 50,
+        //     type: "value",
+        //     splitLine: {
+        //       show: false
+        //     }
+        //   }
+        // ],
+        // series: [
+        //   {
+        //     name: "室内温度满足率",
+        //     type: "line",
+        //     data: [
+        //       80,
+        //       85,
+        //       90,
+        //       85,
+        //       80,
+        //       85,
+        //       90,
+        //       85,
+        //       80,
+        //       85,
+        //       90,
+        //       85,
+        //       80,
+        //       85,
+        //       90,
+        //       85,
+        //       80,
+        //       85,
+        //       90,
+        //       85,
+        //       80,
+        //       85,
+        //       90,
+        //       85,
+        //       80,
+        //       85,
+        //       90,
+        //       85,
+        //       80,
+        //       85,
+        //       90
+        //     ],
+        //     itemStyle: {
+        //       normal: {
+        //         label: {
+        //           show: true,
+        //           position: "top",
+        //           textStyle: {
+        //             color: "#B42E29"
+        //           }
+        //         }
+        //       }
+        //     }
+        //   },
+        //   {
+        //     name: "节能率",
+        //     type: "line",
+        //     data: [
+        //       50,
+        //       77,
+        //       88,
+        //       76,
+        //       50,
+        //       77,
+        //       88,
+        //       76,
+        //       50,
+        //       77,
+        //       88,
+        //       76,
+        //       50,
+        //       77,
+        //       88,
+        //       76,
+        //       50,
+        //       77,
+        //       88,
+        //       76,
+        //       50,
+        //       77,
+        //       88,
+        //       76,
+        //       50,
+        //       77,
+        //       88,
+        //       76,
+        //       50,
+        //       77,
+        //       88
+        //     ],
+        //     itemStyle: {
+        //       normal: {
+        //         label: {
+        //           show: true,
+        //           position: "bottom",
+        //           textStyle: {
+        //             color: "#2D3E4C"
+        //           }
+        //         }
+        //       }
+        //     }
+        //   },
+        //   {
+        //     name: "策略执行",
+        //     type: "line",
+        //     yAxisIndex: 1,
+        //     data: [
+        //       5,
+        //       3,
+        //       3,
+        //       2,
+        //       5,
+        //       3,
+        //       3,
+        //       2,
+        //       5,
+        //       3,
+        //       3,
+        //       2,
+        //       5,
+        //       3,
+        //       3,
+        //       2,
+        //       5,
+        //       3,
+        //       3,
+        //       2,
+        //       5,
+        //       3,
+        //       3,
+        //       2,
+        //       5,
+        //       3,
+        //       3,
+        //       2,
+        //       5,
+        //       3,
+        //       3
+        //     ],
+        //     itemStyle: {
+        //       normal: {
+        //         label: {
+        //           show: true,
+        //           position: "top",
+        //           textStyle: {
+        //           color: "#5F97A0"
+        //         }
+        //       }
+        //     }
+        //   }
+        // }
+        // ]
+        color: colors,
         tooltip: {
           trigger: "axis",
-          textStyle: {
-            align: "left"
+          axisPointer: {
+            type: "cross"
           }
         },
         grid: {
-          top: "22%",
-          left: "1%",
-          right: "1%",
-          bottom: "10%",
-          containLabel: true
+          right: "20%"
         },
-        xAxis: {
-          type: "category",
-          data: [
-            `${this.date}.1`,
-            `${this.date}.2`,
-            `${this.date}.3`,
-            `${this.date}.4`,
-            `${this.date}.5`,
-            `${this.date}.6`,
-            `${this.date}.7`,
-            `${this.date}.8`,
-            `${this.date}.9`,
-            `${this.date}.10`,
-            `${this.date}.11`,
-            `${this.date}.12`,
-            `${this.date}.13`,
-            `${this.date}.14`,
-            `${this.date}.15`,
-            `${this.date}.16`,
-            `${this.date}.17`,
-            `${this.date}.18`,
-            `${this.date}.19`,
-            `${this.date}.20`,
-            `${this.date}.21`,
-            `${this.date}.22`,
-            `${this.date}.23`,
-            `${this.date}.24`,
-            `${this.date}.25`,
-            `${this.date}.26`,
-            `${this.date}.27`,
-            `${this.date}.28`,
-            `${this.date}.29`,
-            `${this.date}.30`,
-            `${this.date}.31`
-          ]
+        toolbox: {
+          feature: {
+            dataView: { show: true, readOnly: false },
+            restore: { show: true },
+            saveAsImage: { show: true }
+          }
         },
+
+        xAxis: [
+          {
+            type: "category",
+            axisTick: {
+              alignWithLabel: true
+            },
+            data: [
+              "1月",
+              "2月",
+              "3月",
+              "4月",
+              "5月",
+              "6月",
+              "7月",
+              "8月",
+              "9月",
+              "10月",
+              "11月",
+              "12月"
+            ]
+          }
+        ],
         yAxis: [
           {
-            name: "室内温度满足率",
             type: "value",
-            max: 100,
-            splitLine: {
-              show: false
+            name: "蒸发量",
+            min: 0,
+            max: 25,
+            position: "right",
+            axisLabel: {
+              formatter: "{value} ml"
             }
           },
           {
-            name: "节能率",
-            nameLocation: "start",
-            max: 50,
             type: "value",
-            splitLine: {
+            name: "",
+            min: 0,
+            max: 25,
+            position: "right",
+            offset: 80,
+            axisLine: {
               show: false
+            },
+            axisTick: {
+              show: false
+            },
+            axisLabel: {
+              formatter: function() {
+                return "";
+              }
+            }
+          },
+          {
+            type: "value",
+            name: "温度",
+            min: 0,
+            max: 25,
+            position: "left",
+            axisLine: {
+              lineStyle: {
+                color: colors[2]
+              }
+            },
+            axisLabel: {
+              formatter: "{value} °C"
             }
           }
         ],
         series: [
           {
-            name: "室内温度满足率",
-            type: "line",
-            data: [
-              80,
-              85,
-              90,
-              85,
-              80,
-              85,
-              90,
-              85,
-              80,
-              85,
-              90,
-              85,
-              80,
-              85,
-              90,
-              85,
-              80,
-              85,
-              90,
-              85,
-              80,
-              85,
-              90,
-              85,
-              80,
-              85,
-              90,
-              85,
-              80,
-              85,
-              90
-            ],
-            itemStyle: {
-              normal: {
-                label: {
-                  show: true,
-                  position: "top",
-                  textStyle: {
-                    color: "#B42E29"
-                  }
-                }
-              }
-            }
+            name: "蒸发量",
+            type: "bar",
+            data: [2.6, 2.6, 2.6, 2.6, 2.6, 2.6, 2.6, 2.6, 2.6, 2.6, 2.6, 2.6]
+          },
+          {
+            name: "降水量",
+            type: "bar",
+            data: [2.6, 2.6, 2.6, 2.6, 2.6, 2.6, 2.6, 2.6, 2.6, 2.6, 2.6, 2.6]
+          },
+          {
+            name: "降雨量",
+            type: "bar",
+            data: [2.6, 2.6, 2.6, 2.6, 2.6, 2.6, 2.6, 2.6, 2.6, 2.6, 2.6, 2.6]
           },
           {
-            name: "节能率",
+            name: "平均温度",
             type: "line",
+            yAxisIndex: 2,
             data: [
-              50,
-              77,
-              88,
-              76,
-              50,
-              77,
-              88,
-              76,
-              50,
-              77,
-              88,
-              76,
-              50,
-              77,
-              88,
-              76,
-              50,
-              77,
-              88,
-              76,
-              50,
-              77,
-              88,
-              76,
-              50,
-              77,
-              88,
-              76,
-              50,
-              77,
-              88
-            ],
-            itemStyle: {
-              normal: {
-                label: {
-                  show: true,
-                  position: "bottom",
-                  textStyle: {
-                    color: "#2D3E4C"
-                  }
-                }
-              }
-            }
+              2.0,
+              2.2,
+              3.3,
+              4.5,
+              6.3,
+              10.2,
+              20.3,
+              23.4,
+              23.0,
+              16.5,
+              12.0,
+              6.2
+            ]
           },
           {
-            name: "策略执行",
+            name: "平均co2",
             type: "line",
-            yAxisIndex: 1,
+            yAxisIndex: 2,
             data: [
-              5,
-              3,
-              3,
-              2,
-              5,
-              3,
-              3,
-              2,
-              5,
-              3,
-              3,
-              2,
-              5,
-              3,
-              3,
-              2,
-              5,
-              3,
-              3,
-              2,
-              5,
-              3,
-              3,
-              2,
-              5,
-              3,
-              3,
-              2,
-              5,
-              3,
-              3
-            ],
-            itemStyle: {
-              normal: {
-                label: {
-                  show: true,
-                  position: "top",
-                  textStyle: {
-                    color: "#5F97A0"
-                  }
-                }
-              }
-            }
+              2.2,
+              3.0,
+              4.5,
+              6.3,
+              10.2,
+              20.3,
+              23.4,
+              23.0,
+              16.5,
+              12.0,
+              6.2,
+              14.0
+            ]
           }
         ]
       };
@@ -245,22 +387,24 @@ export default {
       console.log(myCharts);
 
       myCharts.on("click", param => {
-        if (param.seriesName == "室内温度满足率") {
-          this.$router.push({
-            path: "/evaluate/evTwoLevelMenu",
-            query: { num: 1 }
-          });
-        } else if (param.seriesName == "节能率") {
-          this.$router.push({
-            path: "/evaluate/evTwoLevelMenu",
-            query: { num: 2 }
-          });
-        } else if (param.seriesName == "策略执行") {
-          this.$router.push({
-            path: "/evaluate/evTwoLevelMenu",
-            query: { num: 3 }
-          });
-        }
+        // console.log(param);
+        this.$router.push("/evaluate/evTwoLevelMenu");
+        // if (param.seriesName == "室内温度满足率") {
+        //   this.$router.push({
+        //     path: "/evaluate/evTwoLevelMenu",
+        //     query: { num: 1 }
+        //   });
+        // } else if (param.seriesName == "节能率") {
+        //   this.$router.push({
+        //     path: "/evaluate/evTwoLevelMenu",
+        //     query: { num: 2 }
+        //   });
+        // } else if (param.seriesName == "策略执行") {
+        //   this.$router.push({
+        //     path: "/evaluate/evTwoLevelMenu",
+        //     query: { num: 3 }
+        //   });
+        // }
       });
     }
   }

src/views/evaluate/evRateTitle.vue

@@ -31,54 +31,54 @@ export default {
 .count-bottom-title {
   display: flex;
   .count-bottom-text {
-    height: 90px;
+    height: 64px;
     background: rgba(248, 249, 250, 1);
-    border-radius: 6px;
+    border-radius: 4px;
     border: 1px solid rgba(238, 238, 238, 1);
     display: flex;
     align-items: center;
-    padding-right: 34px;
+    padding-right: 24px;
     .span1 {
-      width: 6px;
-      height: 90px;
+      width: 4px;
+      height: 64px;
       background: rgba(0, 145, 255, 1);
-      border-radius: 6px 0 0 6px;
-      margin-right: 28px;
+      border-radius: 4px 0 0 4px;
+      margin-right: 20px;
     }
     .span2 {
-      font-size: 28px;
+      font-size: 20px;
       font-family: MicrosoftYaHeiSemibold;
       color: rgba(31, 36, 41, 1);
-      margin-right: 16px;
+      margin-right: 12px;
     }
     .span3 {
-      font-size: 34px;
+      font-size: 24px;
       font-family: Persagy-Bold, Persagy;
       font-weight: bold;
       color: rgba(31, 36, 41, 1);
     }
     .span4 {
-      font-size: 34px;
+      font-size: 24px;
       font-family: Persagy-Bold, Persagy;
       font-weight: bold;
       color: rgba(31, 36, 41, 1);
-      margin-right: 44px;
+      margin-right: 32px;
     }
     .span5 {
-      font-size: 22px;
+      font-size: 16px;
       font-family: PingFangSC-Regular, PingFang SC;
       font-weight: 400;
       color: rgba(100, 108, 115, 1);
-      margin-right: 12px;
+      margin-right: 8px;
     }
     .span6 {
-      font-size: 22px;
+      font-size: 16px;
       font-family: Persagy;
       color: rgba(100, 108, 115, 1);
     }
     .span7 {
-      width: 28px;
-      height: 28px;
+      width: 20px;
+      height: 20px;
     }
   }
 }

src/views/evaluate/evSnapshotsDialog.vue

@@ -0,0 +1,477 @@
+<template>
+  <div class="snapshotss-box">
+    <div
+      style="margin:16px 0;height:1px;background:rgba(228,229,231,1);border:1px solid rgba(239,240,241,1);"
+    ></div>
+    <div class="snapshotss-top">
+      <div class="snapshotss-top-left">
+        <span>今日营业时间</span>
+        <span>10:00-22:00</span>
+      </div>
+      <div class="snapshotss-top-center">
+        <span>当前运行模式</span>
+        <span>间歇供冷</span>
+      </div>
+      <div class="snapshotss-top-right">
+        <span>室外环境</span>
+        <span>多云25 °C</span>
+      </div>
+    </div>
+    <div class="snapshotss-center1">
+      <div class="snapshotss-center1-title">系统运行状态</div>
+      <div class="snapshotss-center1-content">
+        <div class="snapshotss-cont">
+          <div class="snapshotss-cont-top">冷水机组</div>
+          <div class="snapshotss-cont-bottom">
+            <div class="snapshotss-cont-bot-1">
+              <span>0</span>
+              <span>0</span>
+              <span>12 °C</span>
+            </div>
+            <div class="snapshotss-cont-bot-2">
+              <span>大</span>
+              <span>小</span>
+              <span>温度</span>
+            </div>
+          </div>
+        </div>
+        <div class="snapshotss-cont">
+          <div class="snapshotss-cont-top">冷冻水泵</div>
+          <div class="snapshotss-cont-bottom">
+            <div class="snapshotss-cont-bot-1">
+              <span>0</span>
+              <span>0</span>
+              <span>12 Hz</span>
+            </div>
+            <div class="snapshotss-cont-bot-2">
+              <span>大</span>
+              <span>小</span>
+              <span>设定频率</span>
+            </div>
+          </div>
+        </div>
+        <div class="snapshotss-cont">
+          <div class="snapshotss-cont-top">冷却水泵</div>
+          <div class="snapshotss-cont-bottom">
+            <div class="snapshotss-cont-bot-1">
+              <span>0</span>
+              <span>0</span>
+              <span>12 Hz</span>
+            </div>
+            <div class="snapshotss-cont-bot-2">
+              <span>大</span>
+              <span>小</span>
+              <span>设定频率</span>
+            </div>
+          </div>
+        </div>
+        <div class="snapshotss-cont">
+          <div class="snapshotss-cont-top">冷却塔</div>
+          <div class="snapshotss-cont-bottom">
+            <div class="snapshotss-cont-bot-1">
+              <span>0</span>
+              <span>0</span>
+              <span>12 Hz</span>
+            </div>
+            <div class="snapshotss-cont-bot-2">
+              <span>大</span>
+              <span>小</span>
+              <span>设定频率</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="snapshotss-center2">
+      <div class="snapshotss-cont2-box1">
+        <span>数据传输情况</span>
+        <span :class="imgFinish?'span1':'span2'" v-for="(item,index) in imgFinishList" :key="index">
+          {{item.name}}
+          <img v-if="imgFinish" :src="item.img1" alt />
+          <img v-else :src="item.img2" alt />
+        </span>
+      </div>
+      <div class="snapshotss-cont2-box2">
+        <span>实际冷量</span>
+        <span>2800 KW</span>
+        <span>未来1小时预测冷量</span>
+        <span>3400 KW</span>
+      </div>
+    </div>
+    <div class="snapshotss-foot">
+      <div id="snapshotssLeft"></div>
+      <div class="snapshotssCenter"></div>
+      <div id="snapshotssRight"></div>
+    </div>
+  </div>
+</template>
+<script>
+import echarts from "echarts";
+
+export default {
+  data() {
+    return {
+      imgFinish: true,
+      imgFinishList: [
+        {
+          name: "能耗",
+          img1: require("../../assets/finish.png"),
+          img2: require("../../assets/wrong.png")
+        },
+        {
+          name: "环境",
+          img1: require("../../assets/finish.png"),
+          img2: require("../../assets/wrong.png")
+        },
+        {
+          name: "BA",
+          img1: require("../../assets/finish.png"),
+          img2: require("../../assets/wrong.png")
+        }
+      ]
+    };
+  },
+  mounted() {
+    this.drawSnapshotssLeft();
+    this.drawSnapshotssRight();
+  },
+  methods: {
+    drawSnapshotssLeft() {
+      var snapshotssLeft = echarts.init(
+        document.getElementById("snapshotssLeft")
+      );
+      let option = {
+        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",
+            "03:00",
+            "06:00",
+            "09:00",
+            "12:00",
+            "15:00",
+            "18:00",
+            "21:00",
+            "24:00"
+          ]
+        },
+        yAxis: {
+          type: "value"
+        },
+        series: [
+          {
+            name: "室外温度",
+            type: "line",
+            stack: "总量",
+            data: [120, 132, 101, 134, 90, 230, 210, 112, 150]
+          },
+          {
+            name: "室内平均温度",
+            type: "line",
+            stack: "总量",
+            data: [220, 182, 191, 234, 290, 330, 310, 220, 280]
+          },
+          {
+            name: "室内最高温度",
+            type: "line",
+            stack: "总量",
+            data: [150, 232, 201, 154, 190, 330, 410, 300, 340]
+          }
+        ]
+      };
+      snapshotssLeft.setOption(option);
+    },
+    drawSnapshotssRight() {
+      var snapshotssRight = echarts.init(
+        document.getElementById("snapshotssRight")
+      );
+      snapshotssRight.setOption({
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "cross",
+            animation: false,
+            label: {
+              backgroundColor: "#ccc",
+              borderColor: "#aaa",
+              borderWidth: 1,
+              shadowBlur: 0,
+              shadowOffsetX: 0,
+              shadowOffsetY: 0,
+              color: "#222"
+            }
+          },
+          formatter: function(params) {
+            return params[2].name + "<br />" + params[2].value;
+          }
+        },
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "3%",
+          containLabel: true
+        },
+        xAxis: {
+          type: "category",
+          data: [
+            "00:00",
+            "03:00",
+            "06:00",
+            "09:00",
+            "12:00",
+            "15:00",
+            "18:00",
+            "21:00",
+            "24:00"
+          ]
+        },
+        yAxis: {
+          splitNumber: 3,
+          splitLine: {
+            show: false
+          }
+        },
+        series: [
+          {
+            name: "L",
+            type: "line",
+            data: [20, 30, 40, 50, 60, 50, 40, 30, 20],
+            lineStyle: {
+              opacity: 0
+            },
+            stack: "confidence-band",
+            symbol: "none"
+          },
+          {
+            name: "U",
+            type: "line",
+            data: [20, 30, 50, 60, 50, 40, 30, 20, 40],
+            lineStyle: {
+              opacity: 0
+            },
+            areaStyle: {
+              color: "#ccc"
+            },
+            stack: "confidence-band",
+            symbol: "none"
+          },
+          {
+            type: "line",
+            data: [20, 30, 40, 50, 60, 40, 30, 20, 50],
+            hoverAnimation: false,
+            symbolSize: 6,
+            itemStyle: {
+              color: "#c23531"
+            },
+            showSymbol: false
+          }
+        ]
+      });
+    }
+  }
+};
+</script>
+<style lang="scss" scoped>
+.snapshotss-box {
+  .snapshotss-top {
+    padding: 0 40px;
+    display: flex;
+    align-items: center;
+    margin-bottom: 40px;
+    .snapshotss-top-center {
+      margin: 0 178px;
+    }
+    span {
+      display: block;
+    }
+    span:nth-of-type(1) {
+      height: 22px;
+      font-size: 14px;
+      font-family: MicrosoftYaHei;
+      color: rgba(100, 108, 115, 1);
+      line-height: 19px;
+      margin-bottom: 4px;
+    }
+    span:nth-of-type(2) {
+      height: 28px;
+      font-size: 20px;
+      font-family: PingFangTC-Medium, PingFangTC;
+      font-weight: 500;
+      color: rgba(31, 36, 41, 1);
+      line-height: 28px;
+    }
+  }
+  .snapshotss-center1 {
+    padding: 0 40px;
+    margin-bottom: 20px;
+    .snapshotss-center1-title {
+      height: 24px;
+      font-size: 16px;
+      font-family: MicrosoftYaHeiSemibold;
+      color: rgba(31, 36, 41, 1);
+      line-height: 21px;
+      margin-bottom: 14px;
+    }
+    .snapshotss-center1-content {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      .snapshotss-cont {
+        border-radius: 4px;
+        border: 1px solid rgba(238, 238, 238, 1);
+        .snapshotss-cont-top {
+          height: 40px;
+          background: rgba(248, 249, 250, 1);
+          border-radius: 4px;
+          font-size: 16px;
+          font-family: MicrosoftYaHeiSemibold;
+          color: rgba(31, 36, 41, 1);
+          line-height: 40px;
+          padding-left: 20px;
+        }
+        .snapshotss-cont-bottom {
+          padding: 14px 36px;
+          .snapshotss-cont-bot-1 {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 4px;
+            span {
+              height: 32px;
+              font-size: 24px;
+              font-family: Persagy;
+              color: rgba(31, 36, 41, 1);
+              line-height: 29px;
+            }
+            span:nth-of-type(2) {
+              margin: 0 50px;
+            }
+          }
+          .snapshotss-cont-bot-2 {
+            span {
+              height: 22px;
+              font-size: 14px;
+              font-family: MicrosoftYaHei;
+              color: rgba(100, 108, 115, 1);
+              line-height: 19px;
+            }
+            span:nth-of-type(2) {
+              margin: 0 50px;
+            }
+          }
+        }
+      }
+    }
+  }
+  .snapshotss-center2 {
+    padding: 0 40px;
+    margin-bottom: 44px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    .snapshotss-cont2-box1,
+    .snapshotss-cont2-box2 {
+      height: 80px;
+      background: url("../../assets/copy.png");
+      background-size: 100% 100%;
+      display: flex;
+      align-items: center;
+      padding-left: 24px;
+    }
+    .snapshotss-cont2-box1 {
+      padding-right: 140px;
+      span:nth-of-type(1) {
+        height: 22px;
+        font-size: 14px;
+        font-family: MicrosoftYaHei;
+        color: rgba(100, 108, 115, 1);
+        line-height: 19px;
+        margin-right: 20px;
+      }
+      span:not(:first-child) {
+        height: 28px;
+        background: rgba(255, 255, 255, 1);
+        border-radius: 16px;
+        font-size: 14px;
+        font-family: MicrosoftYaHei;
+        color: rgba(31, 36, 41, 1);
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 0 6px 0 12px;
+        margin-right: 20px;
+        img {
+          width: 20px;
+          height: 20px;
+          margin-left: 8px;
+        }
+      }
+      .span1 {
+        border: 1px solid rgba(52, 199, 36, 1);
+      }
+      .span2 {
+        border: 1px solid rgba(245, 78, 69, 1);
+      }
+    }
+    .snapshotss-cont2-box2 {
+      span:nth-of-type(1),
+      span:nth-of-type(3) {
+        height: 22px;
+        font-size: 14px;
+        font-family: MicrosoftYaHei;
+        color: rgba(100, 108, 115, 1);
+        line-height: 19px;
+        margin-right: 16px;
+      }
+      span:nth-of-type(2),
+      span:nth-of-type(4) {
+        height: 32px;
+        font-size: 24px;
+        font-family: Persagy;
+        color: rgba(31, 36, 41, 1);
+        line-height: 29px;
+        margin-right: 64px;
+      }
+      span:nth-of-type(3) {
+        margin-right: 16px;
+      }
+    }
+  }
+  .snapshotss-foot {
+    display: flex;
+    justify-content: space-between;
+    height: 300px;
+    #snapshotssLeft {
+      width: 600px;
+      height: 300px;
+      margin-right: 24px;
+    }
+    .snapshotssCenter {
+      width: 1px;
+      height: 300px;
+      background: rgba(239, 240, 241, 1);
+    }
+    #snapshotssRight {
+      width: 600px;
+      height: 300px;
+    }
+  }
+}
+</style>

src/views/evaluate/evTwoLevelMenu.vue

@@ -16,11 +16,16 @@
             <li :class="{current: num==3}" @click="change(3)">执行率</li>
           </div>
           <div class="count-top-right">
-            <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>
+            <span class="arrow-left" @click="pickerChangeLeft"></span>
+            <span class="arrow-line arrow-line1" @click="pickerChangeLeft"></span>
+            <el-date-picker
+              v-model="pickerVal"
+              type="date"
+              format="yyyy.MM.dd"
+              value-format="yyyy.MM.dd"
+            ></el-date-picker>
+            <span class="arrow-line" @click="pickerChangeRight"></span>
+            <span class="arrow-right" @click="pickerChangeRight"></span>
           </div>
         </ul>
         <div class="count-bottom">
@@ -69,12 +74,14 @@ import EvEnergyTable from "./evEnergyTable";
 import EvCard from "./evCard"; //执行率
 import EvRateTitle from "./evRateTitle";
 import EvHistory from "./evHistory";
+var moment = require("moment");
+import "moment/locale/zh-cn";
 export default {
   data() {
     return {
       headText: "运行评价",
       num: 1,
-      value1: "",
+      pickerVal: "2020.02.19",
       value2: true,
       cardList: [
         {
@@ -107,6 +114,17 @@ export default {
           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"),
@@ -124,25 +142,41 @@ export default {
     EvRateTitle,
     EvHistory
   },
-  mounted() {
-    this.dateNow();
-  },
+  mounted() {},
   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;
+    formatter(date) {
+      return moment.unix(date / 1000).format("YYYYMMDD");
+    },
+    pickerChangeLeft() {
+      if (this.pickerVal) {
+        let dateTime = new Date(this.pickerVal);
+        let newData = this.formatter(
+          new Date(dateTime.setDate(dateTime.getDate() - 1))
+        );
+        this.pickerVal =
+          newData.slice(0, 4) +
+          "." +
+          newData.slice(4, 6) +
+          "." +
+          newData.slice(6, 8);
+      }
+    },
+    pickerChangeRight() {
+      if (this.pickerVal) {
+        let dateTime = new Date(this.pickerVal);
+        let newData = this.formatter(
+          new Date(dateTime.setDate(dateTime.getDate() + 1))
+        );
+        this.pickerVal =
+          newData.slice(0, 4) +
+          "." +
+          newData.slice(4, 6) +
+          "." +
+          newData.slice(6, 8);
       }
-      this.dateValue = `${years}${months}${days}`;
     }
   }
 };
@@ -155,7 +189,7 @@ export default {
     height: 100%;
     ul {
       display: flex;
-      padding: 0 24px;
+      padding: 0 16px;
       justify-content: space-between;
       align-items: center;
       margin: 0;
@@ -165,70 +199,71 @@ export default {
         display: flex;
         align-items: center;
         .count-top-left-select {
-          width: 202px;
-          height: 39px;
+          width: 144px;
+          height: 28px;
           background: rgba(255, 255, 255, 1);
-          border-radius: 20px;
+          border-radius: 14px;
           border: 1px solid rgba(195, 199, 203, 1);
-          margin-right: 16px;
+          margin-right: 12px;
+          font-size: 14px;
         }
         span {
           display: inline-block;
           font-family: MicrosoftYaHei;
         }
         span:nth-of-type(1) {
-          height: 31px;
-          font-size: 20px;
+          height: 22px;
+          font-size: 14px;
           color: #8d9399;
-          line-height: 31px;
+          line-height: 22px;
         }
         span:nth-of-type(2) {
           color: #c3c6cb;
-          margin: 0 6px;
+          margin: 0 4px;
         }
         span:nth-of-type(3) {
-          height: 31px;
-          font-size: 20px;
+          height: 22px;
+          font-size: 14px;
           color: #1f2429;
-          line-height: 31px;
+          line-height: 22px;
         }
       }
       .count-top-right {
-        width: 208px;
-        height: 45px;
+        width: 148px;
+        height: 32px;
         background: rgba(255, 255, 255, 1);
-        border-radius: 6px;
-        margin: 10px 0;
+        border-radius: 4px;
         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;
+          border-top: 5px solid transparent;
+          border-bottom: 5px solid transparent;
+          border-right: 5px solid #9ca2a9;
+          margin-right: 5px;
+          margin-left: 7px;
           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;
+          border-top: 5px solid transparent;
+          border-bottom: 5px solid transparent;
+          border-left: 5px solid #9ca2a9;
+          margin-right: 7px;
+          margin-left: 5px;
           cursor: pointer;
         }
         .arrow-line {
-          width: 1px;
-          height: 22px;
+          display: inline-block;
+          width: 2px;
+          height: 16px;
           background: rgba(228, 229, 231, 1);
         }
         .arrow-line1 {
-          margin-right: 6.5px;
+          margin-right: 3.5px;
         }
       }
     }
@@ -242,27 +277,27 @@ export default {
       font-family: MicrosoftYaHei;
       color: rgba(31, 35, 41, 1);
       line-height: 21px;
-      padding: 18px 22px;
+      padding: 14px 16px;
       margin-right: 22px;
     }
     .count-bottom {
-      padding: 0 24px;
+      padding: 0 16px;
       height: auto;
       background: #fff;
-      margin-top: 22px;
+      margin-top: 16px;
       .count-bottom-switch {
         display: flex;
         justify-content: flex-end;
         align-items: center;
-        margin-top: -15px;
+        margin-top: -14px;
         .switchSpan {
-          height: 31px;
-          font-size: 20px;
+          height: 22px;
+          font-size: 14px;
           font-family: PingFangSC-Regular, PingFang SC;
           font-weight: 400;
           color: rgba(31, 36, 41, 1);
-          line-height: 28px;
-          margin-right: 22px;
+          line-height: 20px;
+          margin-right: 16px;
         }
       }
       .count-historical-data {
@@ -270,30 +305,27 @@ export default {
           .count-foot-title {
             display: flex;
             align-items: center;
-            margin-bottom: 22px;
+            margin-bottom: 16px;
             span:nth-of-type(1) {
-              height: 34px;
-              font-size: 22px;
+              height: 24px;
+              font-size: 16px;
               font-family: MicrosoftYaHeiSemibold;
               color: rgba(31, 36, 41, 1);
-              line-height: 30px;
-              margin-right: 22px;
+              line-height: 21px;
+              margin-right: 16px;
             }
             span:nth-of-type(2) {
-              width: 101px;
-              height: 34px;
+              width: 72px;
+              height: 22px;
               background: rgba(225, 242, 255, 1);
-              border-radius: 3px;
-              font-size: 20px;
+              border-radius: 2px;
+              font-size: 14px;
               font-family: MicrosoftYaHei;
               color: rgba(0, 101, 179, 1);
-              line-height: 34px;
+              line-height: 22px;
               text-align: center;
             }
           }
-          .count-foot-content {
-            height: 500px;
-          }
         }
       }
       .count-bottom-content {
@@ -311,7 +343,7 @@ export default {
       font-family: MicrosoftYaHei;
       color: #0091ff;
       line-height: 21px;
-      border-bottom: 3px solid#0091FF;
+      border-bottom: 2px solid#0091FF;
     }
   }
 }
@@ -320,30 +352,30 @@ export default {
 .count-top-right {
   text-align: center;
   .el-input__inner {
-    width: 132px;
-    margin: 7px 10px;
-    height: 30px;
-    line-height: 30px;
+    width: 93px;
+    margin: 7px 6px;
+    height: 22px;
+    line-height: 22px;
   }
   .el-input__icon {
     display: none;
   }
   .el-input--prefix .el-input__inner {
-    padding-left: 20px;
+    padding-left: 5px;
   }
   .el-input--suffix .el-input__inner {
-    padding-right: 20px;
+    padding-right: 5px;
   }
 }
 .count-bottom-switch {
   .el-switch__core {
-    width: 56px !important;
-    height: 30px;
-    border-radius: 17px;
+    width: 40px !important;
+    height: 22px;
+    border-radius: 12px;
   }
   .el-switch.is-checked .el-switch__core::after {
     left: 100%;
-    margin-left: -27px;
+    margin-left: -19px;
   }
   .el-switch__core:after {
     content: "";
@@ -351,10 +383,10 @@ export default {
     border-radius: 100%;
     -webkit-transition: all 0.3s;
     transition: all 0.3s;
-    width: 28px;
-    height: 28px;
+    width: 18px;
+    height: 18px;
     background-color: #fff;
-    top: 0;
+    top: 1px;
   }
 }
 </style>

src/views/evaluate/index.vue

@@ -61,7 +61,7 @@
         </div>
       </div>
       <div class="ev-footer">
-        <ev-indoor-temperature :date='date'></ev-indoor-temperature>
+        <ev-indoor-temperature :date="date"></ev-indoor-temperature>
       </div>
     </div>
   </div>
@@ -77,7 +77,7 @@ export default {
   data() {
     return {
       headText: "运行评价",
-      date:'2'
+      date: "2"
     };
   },
   components: {
@@ -99,7 +99,7 @@ export default {
     .ev-cont-div {
       // width: 25%;
       // height: 164px;
-      padding: 22px 28px;
+      padding: 16px 20px;
       background: rgba(248, 249, 250, 1);
       border-radius: 6px;
       border: 1px solid rgba(238, 238, 238, 1);
@@ -107,11 +107,11 @@ export default {
 
       .ev-top {
         margin: 0;
-        height: 34px;
-        font-size: 22px;
+        height: 24px;
+        font-size: 16px;
         font-family: MicrosoftYaHeiSemibold;
         color: rgba(31, 36, 41, 1);
-        line-height: 30px;
+        line-height: 21px;
       }
       .ev-bottom {
         display: flex;
@@ -128,28 +128,28 @@ export default {
         }
         .ev-bottom-right {
           p {
-            font-size: 20px;
+            font-size: 14px;
             font-family: MicrosoftYaHei;
             color: rgba(100, 108, 115, 1);
-            line-height: 27px;
+            line-height: 19px;
             span {
               display: inline-block;
             }
             span:nth-of-type(1) {
-              margin-right: 16px;
+              margin-right: 12px;
             }
             span:nth-of-type(2) {
-              font-size: 25px;
+              font-size: 18px;
               font-family: Persagy;
               color: rgba(32, 35, 42, 1);
-              line-height: 31px;
+              line-height: 22px;
             }
             span:nth-of-type(3) {
-              font-size: 12px;
+              font-size: 10px;
             }
           }
           p:nth-of-type(1) {
-            margin-bottom: 14px;
+            margin-bottom: 10px;
           }
         }
       }
@@ -157,8 +157,8 @@ export default {
   }
   .ev-footer {
     width: 100%;
-    height: 450px;
-    margin-top: 30px;
+    height: 430px;
+    margin-top: 36px;
   }
 }
 </style>

src/views/main/index.vue

@@ -54,7 +54,7 @@
         </ul>
       </div>
     </header>
-    <nav>
+    <!-- <nav>
       <div class="nav-left">
         <el-select class="nav-select" v-model="value">
           <el-option
@@ -71,7 +71,7 @@
         <span class="nav-text" v-else>今天已收到 8 条策略</span>
         <span class="nav-look" @click="showTodayStrategy = true">查看</span>
       </div>
-    </nav>
+    </nav>-->
     <div id="nav" class="nav">
       <div @click="navNone" class="nav-bth">
         <span v-for="(item,index) in 3" :key="index"></span>
@@ -81,16 +81,13 @@
       </p>
     </div>
 
-      <el-dialog
-        title="提示"
-        :visible.sync="showTodayStrategy"
-        width="1260px">
-        <today-strategy></today-strategy>
-      </el-dialog>
+    <el-dialog title="提示" :visible.sync="showTodayStrategy" width="1260px">
+      <today-strategy></today-strategy>
+    </el-dialog>
   </div>
 </template>
 <script>
-import TodayStrategy from '@/components/todayStrategy.vue'
+import TodayStrategy from "@/components/todayStrategy.vue";
 export default {
   components: {
     TodayStrategy