update

src/router/index.js

@@ -5,6 +5,8 @@ const Strategy = () => import('@/views/strategy/index')
 const Appeal = () => import('@/views/appeal/index')
 const DoBusiness = () => import('@/views/doBusiness/index')
 const Evaluate = () => import('@/views/evaluate/index')
+const EvTwoLevelMenu = () => import('@/views/evaluate/evTwoLevelMenu')
+
 
 
 
@@ -36,6 +38,12 @@ export default new Router({
       path: '/evaluate',
       name: 'evaluate',
       component: Evaluate
+    },
+    {
+      path: '/evaluate/evTwoLevelMenu',
+      name: 'evTwoLevelMenu',
+      component: EvTwoLevelMenu
+
     }
   ]
 })

src/views/evaluate/evEnergySavingRate.vue

@@ -0,0 +1,69 @@
+<template>
+  <div id="box3" style="width:100%;height:100%;"></div>
+</template>
+<script>
+import echarts from "echarts";
+
+export default {
+  data() {
+    return {};
+  },
+  mounted() {
+    this.pie(85.7, "#box3", ["#00D6B9", "#D5F6F2"]);
+  },
+  methods: {
+    pie(pieData, box, colors) {
+      const that = this;
+      const myChart = echarts.init(document.querySelector(box));
+      const data = pieData;
+      const option = {
+        grid: {
+          top: 5,
+          bottom: 5
+        },
+        color: colors,
+        series: [
+          {
+            name: "valueOfMarket",
+            type: "pie",
+            center: ["50%", "50%"],
+            radius: ["60%", "70%"],
+            avoidLabelOverlap: false,
+            hoverAnimation: false,
+            label: {
+              normal: {
+                show: true,
+                position: "center",
+                color: "#000000",
+                fontSize: 20,
+                lineHeight: 0,
+                formatter: "{b}\n{c}%"
+              }
+            },
+            data: [
+              {
+                value: data,
+                label: {
+                  normal: {
+                    show: true
+                  }
+                }
+              },
+              {
+                value: 100 - data,
+                name: "",
+                label: {
+                  normal: {
+                    show: false
+                  }
+                }
+              }
+            ]
+          }
+        ]
+      };
+      myChart.setOption(option);
+    }
+  }
+};
+</script>

src/views/evaluate/evImplementationRate.vue

@@ -0,0 +1,69 @@
+<template>
+  <div id="box2" style="width:100%;height:100%;"></div>
+</template>
+<script>
+import echarts from "echarts";
+
+export default {
+  data() {
+    return {};
+  },
+  mounted() {
+    this.pie(28.5, "#box2", ["#FFBA6B", "#FEE9D2"]);
+  },
+  methods: {
+    pie(pieData, box, colors) {
+      const that = this;
+      const myChart = echarts.init(document.querySelector(box));
+      const data = pieData;
+      const option = {
+        grid: {
+          top: 5,
+          bottom: 5
+        },
+        color: colors,
+        series: [
+          {
+            name: "valueOfMarket",
+            type: "pie",
+            center: ["50%", "50%"],
+            radius: ["60%", "70%"],
+            avoidLabelOverlap: false,
+            hoverAnimation: false,
+            label: {
+              normal: {
+                show: true,
+                position: "center",
+                color: "#000000",
+                fontSize: 20,
+                lineHeight: 0,
+                formatter: "{b}\n{c}%"
+              }
+            },
+            data: [
+              {
+                value: data,
+                label: {
+                  normal: {
+                    show: true
+                  }
+                }
+              },
+              {
+                value: 100 - data,
+                name: "",
+                label: {
+                  normal: {
+                    show: false
+                  }
+                }
+              }
+            ]
+          }
+        ]
+      };
+      myChart.setOption(option);
+    }
+  }
+};
+</script>

src/views/evaluate/evIndoorTemperature.vue

@@ -0,0 +1,274 @@
+<template>
+  <div id="pCharts2"></div>
+</template>
+
+<script>
+var echarts = require("echarts");
+export default {
+  data() {
+    return {};
+  },
+  props: ["date"],
+  mounted() {
+    this.drawIt();
+  },
+  methods: {
+    drawIt() {
+      let myCharts = echarts.init(document.getElementById("pCharts2"));
+      var option = {
+        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"
+                  }
+                }
+              }
+            }
+          }
+        ]
+      };
+      myCharts.setOption(option);
+      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 }
+          });
+        }
+      });
+    }
+  }
+};
+</script>
+<style lang="scss" scoped>
+#pCharts2 {
+  width: 100%;
+  height: 100%;
+}
+</style>

src/views/evaluate/evSatisfactionRate.vue

@@ -0,0 +1,69 @@
+<template>
+  <div id="box1" style="width:100%;height:100%;"></div>
+</template>
+<script>
+import echarts from "echarts";
+
+export default {
+  data() {
+    return {};
+  },
+  mounted() {
+    this.pie(85.3, "#box1", ["#0091FF", "#E1F2FF"]);
+  },
+  methods: {
+    pie(pieData, box, colors) {
+      const that = this;
+      const myChart = echarts.init(document.querySelector(box));
+      const data = pieData;
+      const option = {
+        grid: {
+          top: 5,
+          bottom: 5
+        },
+        color: colors,
+        series: [
+          {
+            name: "valueOfMarket",
+            type: "pie",
+            center: ["50%", "50%"],
+            radius: ["60%", "70%"],
+            avoidLabelOverlap: false,
+            hoverAnimation: false,
+            label: {
+              normal: {
+                show: true,
+                position: "center",
+                color: "#000000",
+                fontSize: 20,
+                lineHeight: 0,
+                formatter: "{b}\n{c}%"
+              }
+            },
+            data: [
+              {
+                value: data,
+                label: {
+                  normal: {
+                    show: true
+                  }
+                }
+              },
+              {
+                value: 100 - data,
+                name: "",
+                label: {
+                  normal: {
+                    show: false
+                  }
+                }
+              }
+            ]
+          }
+        ]
+      };
+      myChart.setOption(option);
+    }
+  }
+};
+</script>

src/views/evaluate/evTwoLevelMenu.vue

@@ -0,0 +1,183 @@
+<template>
+  <div class="evTwoContainer">
+    <div class="evTwoContainer-out">
+      <Head :headText="headText"></Head>
+      <div class="count-top">
+        <ul>
+          <div class="count-top-left">
+            <div class="count-top-left-select"></div>
+            <span>首页</span>
+            <span>></span>
+            <span>单日运行评价</span>
+          </div>
+          <div style="margin:0 auto">
+            <li :class="{current: num == 1}" @click="change(1)">室内温度</li>
+            <li :class="{current: num==2}" @click="change(2)">节能率</li>
+            <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>
+          </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>
+            </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>
+            </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 />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import Head from "../main/index";
+
+export default {
+  data() {
+    return {
+      headText: "运行评价",
+      num: 1,
+      value1: ""
+    };
+  },
+  components: {
+    Head
+  },
+  methods: {
+    change: function(index) {
+      this.num = index;
+    }
+  }
+};
+</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;
+
+      text-align: center;
+      .count-top-left {
+        display: flex;
+        align-items: center;
+        .count-top-left-select {
+          width: 202px;
+          height: 39px;
+          background: rgba(255, 255, 255, 1);
+          border-radius: 20px;
+          border: 1px solid rgba(195, 199, 203, 1);
+          margin-right: 16px;
+        }
+        span {
+          display: inline-block;
+          font-family: MicrosoftYaHei;
+        }
+        span:nth-of-type(1) {
+          height: 31px;
+          font-size: 20px;
+          color: #8d9399;
+          line-height: 31px;
+        }
+        span:nth-of-type(2) {
+          color: #c3c6cb;
+          margin: 0 6px;
+        }
+        span:nth-of-type(3) {
+          height: 31px;
+          font-size: 20px;
+          color: #1f2429;
+          line-height: 31px;
+        }
+      }
+      .count-top-right {
+        width: 208px;
+        height: 45px;
+        background: rgba(255, 255, 255, 1);
+        border-radius: 6px;
+        margin: 10px 0;
+        border: 1px solid rgba(195, 198, 203, 1);
+      }
+    }
+
+    ul li {
+      list-style: none;
+      cursor: pointer;
+      height: 21px;
+      float: left;
+      font-size: 16px;
+      font-family: MicrosoftYaHei;
+      color: rgba(31, 35, 41, 1);
+      line-height: 21px;
+      padding: 18px 22px;
+      margin-right: 22px;
+    }
+    .count-bottom {
+      height: 100%;
+      padding: 0 24px;
+      background: #fff;
+      .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;
+        }
+      }
+    }
+    .current {
+      font-size: 16px;
+      font-family: MicrosoftYaHei;
+      color: #0091ff;
+      line-height: 21px;
+      border-bottom: 3px solid#0091FF;
+    }
+  }
+}
+</style>
+<style lang="scss">
+.count-top-right {
+  .el-input__inner {
+    width: 132px;
+    margin: 7px 10px;
+    height: 30px;
+    line-height: 30px;
+  }
+  .el-input__icon {
+    display: none;
+  }
+}
+</style>

src/views/evaluate/index.vue

@@ -2,11 +2,77 @@
 <template>
   <div>
     <Head :headText="headText"></Head>
-    <div class="evaluateContainer">运行评价</div>
+    <div class="evaluateContainer">
+      <div class="ev-content">
+        <div class="ev-cont-div">
+          <p class="ev-top">室内温度满足率</p>
+          <div class="ev-bottom">
+            <div class="ev-bottom-left">
+              <ev-satisfaction-rate></ev-satisfaction-rate>
+            </div>
+            <div class="ev-bottom-right">
+              <p>
+                <span>超限时长</span>
+                <span>0.3</span>
+                <span>h/日</span>
+              </p>
+              <p>
+                <span>超限程度</span>
+                <span>12</span>
+                <span>°C</span>
+              </p>
+            </div>
+          </div>
+        </div>
+        <div class="ev-cont-div">
+          <p class="ev-top">节能率</p>
+          <div class="ev-bottom">
+            <div class="ev-bottom-left">
+              <ev-energy-saving-rate></ev-energy-saving-rate>
+            </div>
+            <div class="ev-bottom-right">
+              <p>
+                <span>节能量</span>
+                <span>3869</span>
+                <span>kW</span>
+              </p>
+            </div>
+          </div>
+        </div>
+        <div class="ev-cont-div">
+          <p class="ev-top">策略执行率</p>
+          <div class="ev-bottom">
+            <div class="ev-bottom-left">
+              <ev-implementation-rate></ev-implementation-rate>
+            </div>
+            <div class="ev-bottom-right">
+              <p>
+                <span>执行数量</span>
+                <span>90</span>
+                <span>条</span>
+              </p>
+              <p>
+                <span>已发策略</span>
+                <span>108</span>
+                <span>条</span>
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="ev-footer">
+        <ev-indoor-temperature></ev-indoor-temperature>
+      </div>
+    </div>
   </div>
 </template>
 <script>
 import Head from "../main/index";
+import EvEnergySavingRate from "./evEnergySavingRate";
+import EvImplementationRate from "./evImplementationRate";
+import EvSatisfactionRate from "./evSatisfactionRate";
+import EvIndoorTemperature from "./evIndoorTemperature";
+
 export default {
   data() {
     return {
@@ -14,13 +80,84 @@ export default {
     };
   },
   components: {
-    Head
+    Head,
+    EvEnergySavingRate,
+    EvImplementationRate,
+    EvSatisfactionRate,
+    EvIndoorTemperature
   }
 };
 </script>
 <style lang="scss" scoped>
 .evaluateContainer {
-  padding: 16px;
+  padding: 0 24px;
   background: #fff;
+  .ev-content {
+    margin-top: 20px;
+    display: flex;
+    .ev-cont-div {
+      // width: 25%;
+      // height: 164px;
+      padding: 22px 28px;
+      background: rgba(248, 249, 250, 1);
+      border-radius: 6px;
+      border: 1px solid rgba(238, 238, 238, 1);
+      margin-right: 12px;
+
+      .ev-top {
+        margin: 0;
+        height: 34px;
+        font-size: 22px;
+        font-family: MicrosoftYaHeiSemibold;
+        color: rgba(31, 36, 41, 1);
+        line-height: 30px;
+      }
+      .ev-bottom {
+        display: flex;
+        align-items: center;
+
+        p {
+          margin: 0;
+        }
+        .ev-bottom-left {
+          width: 124px;
+          height: 124px;
+          justify-content: flex-start;
+          margin: 0;
+        }
+        .ev-bottom-right {
+          p {
+            font-size: 20px;
+            font-family: MicrosoftYaHei;
+            color: rgba(100, 108, 115, 1);
+            line-height: 27px;
+            span {
+              display: inline-block;
+            }
+            span:nth-of-type(1) {
+              margin-right: 16px;
+            }
+            span:nth-of-type(2) {
+              font-size: 25px;
+              font-family: Persagy;
+              color: rgba(32, 35, 42, 1);
+              line-height: 31px;
+            }
+            span:nth-of-type(3) {
+              font-size: 12px;
+            }
+          }
+          p:nth-of-type(1) {
+            margin-bottom: 14px;
+          }
+        }
+      }
+    }
+  }
+  .ev-footer {
+    width: 100%;
+    height: 450px;
+    margin-top: 30px;
+  }
 }
 </style>

src/views/main/index.vue

@@ -100,7 +100,7 @@ export default {
           path: "/doBusiness"
         },
         {
-          name: "报警统计",
+          name: "运行评价",
           path: "/evaluate"
         }
       ],