Guoxiaohuan 5 years ago
parent
commit
32ab60f52d

BIN
src/assets/left.png


BIN
src/assets/right.png


+ 78 - 48
src/views/doBusiness/index.vue

@@ -2,79 +2,109 @@
 <template>
   <div class="business">
     <Head :headText="headText"></Head>
-    <div  class="date">
-       <el-date-picker
-        v-model="valueDate"
-        type="date"
-        placeholder="选择日期">
-      </el-date-picker>
+    <div class="count-top-right">
+      <date-temp @pickerVal="pickerVal"></date-temp>
     </div>
-    <el-calendar class="doBusinessContainer">
-      <template
-        slot="dateCell"
-        slot-scope="{date, data}">
-        <p >
-          <span class="time-duration">
-             <el-time-picker
-              is-range
-              v-model="value1"
-              size="mini"
-              range-separator="-"
-              start-placeholder="开始时间"
-              end-placeholder="结束时间"
-              placeholder="选择时间范围"
-              format='hh:mm'>
-            </el-time-picker>
-          </span>
-          {{ data.day.split('-').slice(2).join('')}}
-        </p>
+    <el-calendar class="doBusinessContainer" :first-day-of-week="7">
+      <template slot="dateCell" slot-scope="{date, data}">
+        <div class="time-duration">
+          <el-time-picker
+            is-range
+            v-model="value1"
+            size="mini"
+            range-separator="-"
+            start-placeholder="开始时间"
+            end-placeholder="结束时间"
+            placeholder="选择时间范围"
+            format="hh:mm"
+          ></el-time-picker>
+        </div>
+        <div class="dataJoin">{{ data.day.split('-').slice(2).join('')}}</div>
       </template>
     </el-calendar>
   </div>
 </template>
 <script>
 import Head from "../main/index";
+import DateTemp from "../evaluate/dateTemp";
+
 export default {
   data() {
     return {
       headText: "营业时间调整",
-      value1: [new Date(), new Date()],
-      valueDate:new Date()
+      value1: [new Date(), new Date()]
     };
   },
   components: {
-    Head
+    Head,
+    DateTemp
+  },
+  methods: {
+    pickerVal(val) {
+      console.log(val);
+    }
   }
 };
 </script>
 <style lang="scss" scoped>
- .date{
-    margin-left:20px;
-    margin-top: 20px;
-  }
-.doBusinessContainer {
+.count-top-right {
+  width: 148px;
   padding: 16px;
+}
+.doBusinessContainer {
+  margin-top: 20px;
   background: #fff;
-  .time-duration{
-    .el-input__inner{
-      width:134px;
+  .time-duration {
+    .el-input__inner {
+      width: 134px;
       padding: 0;
       border: none;
-      font-size:14px;
-      font-family:PingFangSC-Regular,PingFang SC;
-      font-weight:400;
-      color:rgba(100,108,115,1);
-      line-height:24px;
+      font-size: 14px;
+      font-family: PingFangSC-Regular, PingFang SC;
+      font-weight: 400;
+      color: rgba(100, 108, 115, 1);
+      line-height: 24px;
       padding: 1px 12px;
-      height:24px;
-      background:rgba(245,246,247,1);
-      border-radius:12px;
+      height: 24px;
+      background: rgba(245, 246, 247, 1);
+      border-radius: 12px;
       margin-right: 17px;
     }
-     .el-range-editor .el-range-input{
-        border: none;
-        background:rgba(245,246,247,1);
-      }
+    .el-range-editor .el-range-input {
+      border: none;
+      background: rgba(245, 246, 247, 1);
+    }
+  }
+  .dataJoin {
+    height: 22px;
+    font-size: 16px;
+    font-family: PingFangSC-Regular, PingFang SC;
+    font-weight: 400;
+    color: rgba(31, 36, 41, 1);
+    line-height: 22px;
+  }
+}
+</style>
+<style lang="scss">
+.business {
+  .el-calendar-table thead th {
+    text-align: right;
+    height: 20px;
+    font-size: 14px;
+    font-family: PingFangSC-Regular, PingFang SC;
+    font-weight: 400;
+    color: rgba(100, 106, 115, 1);
+    line-height: 20px;
+    padding-right: 15px;
+  }
+  .el-calendar__header {
+    display: none;
+  }
+  .el-range-editor--mini .el-range-input {
+    background: #f5f6f7;
+  }
+  .el-calendar-table .el-calendar-day {
+    display: flex;
   }
 }
 </style>

+ 114 - 0
src/views/evaluate/dateTemp.vue

@@ -0,0 +1,114 @@
+<template>
+  <div class="date-temp">
+    <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>
+</template>
+<script>
+var moment = require("moment");
+import "moment/locale/zh-cn";
+export default {
+  data() {
+    return {
+      pickerVal: new Date()
+    };
+  },
+  methods: {
+    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);
+      }
+      this.$emit("pickerVal", this.pickerVal);
+    },
+    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.$emit("pickerVal", this.pickerVal);
+    }
+  }
+};
+</script>
+<style lang="scss">
+.date-temp {
+  background: rgba(255, 255, 255, 1);
+  border-radius: 4px;
+  border: 1px solid rgba(195, 198, 203, 1);
+  display: flex;
+  align-items: center;
+  .arrow-left {
+    width: 0;
+    height: 0;
+    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: 5px solid transparent;
+    border-bottom: 5px solid transparent;
+    border-left: 5px solid #9ca2a9;
+    margin-right: 7px;
+    margin-left: 5px;
+    cursor: pointer;
+  }
+  .arrow-line {
+    display: inline-block;
+    width: 2px;
+    height: 16px;
+    background: rgba(228, 229, 231, 1);
+  }
+  .arrow-line1 {
+    margin-right: 3.5px;
+  }
+}
+</style>
+<style lang="scss">
+.date-temp {
+  text-align: center;
+  .el-input__inner {
+    width: 93px !important;
+    margin: 7px 6px;
+    height: 22px;
+    line-height: 22px;
+    border: none;
+  }
+  .el-input__icon {
+    display: none;
+  }
+  .el-input--prefix .el-input__inner {
+    padding-left: 5px;
+  }
+  .el-input--suffix .el-input__inner {
+    padding-right: 5px;
+  }
+}
+</style>

+ 3 - 3
src/views/evaluate/evIndoorTemperature.vue

@@ -253,9 +253,9 @@ export default {
         },
         toolbox: {
           feature: {
-            dataView: { show: true, readOnly: false },
-            restore: { show: true },
-            saveAsImage: { show: true }
+            // dataView: { show: true, readOnly: false },
+            // restore: { show: true },
+            // saveAsImage: { show: true }
           }
         },
 

+ 52 - 137
src/views/evaluate/evTwoLevelMenu.vue

@@ -3,29 +3,19 @@
     <div class="evTwoContainer-out">
       <Head :headText="headText"></Head>
       <div class="count-top">
+        <div class="count-top-left">
+          <span @click="jumpIndex">首页</span>
+          <span>></span>
+          <span>单日运行评价</span>
+        </div>
         <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">
+          <div>
             <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">
-            <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>
+            <date-temp @pickerVal="pickerVal"></date-temp>
           </div>
         </ul>
         <div class="count-bottom">
@@ -74,14 +64,13 @@ 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";
+import DateTemp from "./dateTemp";
+
 export default {
   data() {
     return {
       headText: "运行评价",
       num: 1,
-      pickerVal: "2020.02.19",
       value2: true,
       cardList: [
         {
@@ -140,43 +129,19 @@ export default {
     EvEnergyTable,
     EvCard,
     EvRateTitle,
-    EvHistory
+    EvHistory,
+    DateTemp
   },
   mounted() {},
   methods: {
     change: function(index) {
       this.num = index;
     },
-    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);
-      }
+    pickerVal(val) {
+      console.log(val);
     },
-    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);
-      }
+    jumpIndex() {
+      this.$router.push("/evaluate");
     }
   }
 };
@@ -187,84 +152,52 @@ export default {
   .count-top {
     width: 100%;
     height: 100%;
+    .count-top-left {
+      width: 200px;
+      display: flex;
+      align-items: center;
+      z-index: 1;
+      position: fixed;
+      left: 190px;
+      top: 68px;
+      span {
+        display: inline-block;
+        font-family: MicrosoftYaHei;
+      }
+      span:nth-of-type(1) {
+        height: 22px;
+        font-size: 14px;
+        color: #8d9399;
+        line-height: 22px;
+        cursor: pointer;
+      }
+      span:nth-of-type(2) {
+        color: #c3c6cb;
+        margin: 0 4px;
+        margin-top: -3px;
+      }
+      span:nth-of-type(3) {
+        height: 22px;
+        font-size: 14px;
+        color: #1f2429;
+        line-height: 22px;
+      }
+    }
     ul {
       display: flex;
       padding: 0 16px;
+      width: 60%;
       justify-content: space-between;
       align-items: center;
       margin: 0;
-      background: #f7f9fa;
       text-align: center;
-      .count-top-left {
-        display: flex;
-        align-items: center;
-        .count-top-left-select {
-          width: 144px;
-          height: 28px;
-          background: rgba(255, 255, 255, 1);
-          border-radius: 14px;
-          border: 1px solid rgba(195, 199, 203, 1);
-          margin-right: 12px;
-          font-size: 14px;
-        }
-        span {
-          display: inline-block;
-          font-family: MicrosoftYaHei;
-        }
-        span:nth-of-type(1) {
-          height: 22px;
-          font-size: 14px;
-          color: #8d9399;
-          line-height: 22px;
-        }
-        span:nth-of-type(2) {
-          color: #c3c6cb;
-          margin: 0 4px;
-        }
-        span:nth-of-type(3) {
-          height: 22px;
-          font-size: 14px;
-          color: #1f2429;
-          line-height: 22px;
-        }
-      }
+      position: fixed;
+      right: 0;
+      top: 52px;
+      z-index: 1;
+      min-width: 810px;
       .count-top-right {
         width: 148px;
-        height: 32px;
-        background: rgba(255, 255, 255, 1);
-        border-radius: 4px;
-        border: 1px solid rgba(195, 198, 203, 1);
-        display: flex;
-        align-items: center;
-        .arrow-left {
-          width: 0;
-          height: 0;
-          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: 5px solid transparent;
-          border-bottom: 5px solid transparent;
-          border-left: 5px solid #9ca2a9;
-          margin-right: 7px;
-          margin-left: 5px;
-          cursor: pointer;
-        }
-        .arrow-line {
-          display: inline-block;
-          width: 2px;
-          height: 16px;
-          background: rgba(228, 229, 231, 1);
-        }
-        .arrow-line1 {
-          margin-right: 3.5px;
-        }
       }
     }
 
@@ -349,24 +282,6 @@ export default {
 }
 </style>
 <style lang="scss">
-.count-top-right {
-  text-align: center;
-  .el-input__inner {
-    width: 93px;
-    margin: 7px 6px;
-    height: 22px;
-    line-height: 22px;
-  }
-  .el-input__icon {
-    display: none;
-  }
-  .el-input--prefix .el-input__inner {
-    padding-left: 5px;
-  }
-  .el-input--suffix .el-input__inner {
-    padding-right: 5px;
-  }
-}
 .count-bottom-switch {
   .el-switch__core {
     width: 40px !important;

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

@@ -2,6 +2,25 @@
 <template>
   <div>
     <Head :headText="headText"></Head>
+    <div class="nav-right">
+      <el-radio v-model="radio" label="1">近30天</el-radio>
+      <el-radio v-model="radio" label="2" style="margin-right:10px;">自定义</el-radio>
+      <div class="count-top-right">
+        <span class="arrow-left" @click="daterangeLeft"></span>
+        <span class="arrow-line arrow-line1" @click="daterangeLeft"></span>
+        <el-date-picker
+          v-model="pickerVal2"
+          type="daterange"
+          format="yyyy.MM.dd"
+          value-format="yyyy.MM.dd"
+          range-separator="至"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+        ></el-date-picker>
+        <span class="arrow-line" @click="daterangeRight"></span>
+        <span class="arrow-right" @click="daterangeRight"></span>
+      </div>
+    </div>
     <div class="evaluateContainer">
       <div class="ev-content">
         <div class="ev-cont-div">
@@ -72,12 +91,16 @@ import EvEnergySavingRate from "./evEnergySavingRate";
 import EvImplementationRate from "./evImplementationRate";
 import EvSatisfactionRate from "./evSatisfactionRate";
 import EvIndoorTemperature from "./evIndoorTemperature";
+var moment = require("moment");
+import "moment/locale/zh-cn";
 
 export default {
   data() {
     return {
       headText: "运行评价",
-      date: "2"
+      date: "2",
+      pickerVal2: "",
+      radio: "1"
     };
   },
   components: {
@@ -86,10 +109,88 @@ export default {
     EvImplementationRate,
     EvSatisfactionRate,
     EvIndoorTemperature
+  },
+  methods: {
+    formatter(date) {
+      return moment.unix(date / 1000).format("YYYYMMDD");
+    },
+    daterangeLeft() {
+      if (this.pickerVal2.length > 0) {
+        let dateTime = new Date(this.pickerVal2[0]);
+        let newData = this.formatter(
+          new Date(dateTime.setDate(dateTime.getDate() - 1))
+        );
+        this.pickerVal2[0] =
+          newData.slice(0, 4) +
+          "." +
+          newData.slice(4, 6) +
+          "." +
+          newData.slice(6, 8);
+        this.pickerVal2 = [this.pickerVal2[0], this.pickerVal2[1]];
+      }
+    },
+    daterangeRight() {
+      if (this.pickerVal2.length > 0) {
+        let dateTime = new Date(this.pickerVal2[1]);
+        let newData = this.formatter(
+          new Date(dateTime.setDate(dateTime.getDate() + 1))
+        );
+        this.pickerVal2[1] =
+          newData.slice(0, 4) +
+          "." +
+          newData.slice(4, 6) +
+          "." +
+          newData.slice(6, 8);
+      }
+      this.pickerVal2 = [this.pickerVal2[0], this.pickerVal2[1]];
+    }
   }
 };
 </script>
 <style lang="scss" scoped>
+.nav-right {
+  height: 48px;
+  position: fixed;
+  right: 24px;
+  top: 53px;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  .count-top-right {
+    width: 254px;
+    height: 32px;
+    background: rgba(255, 255, 255, 1);
+    border-radius: 4px;
+    border: 1px solid rgba(195, 198, 203, 1);
+    display: flex;
+    align-items: center;
+    .arrow-left {
+      width: 16px;
+      height: 16px;
+      background: url("../../assets/left.png");
+      margin-right: 5px;
+      margin-left: 7px;
+      cursor: pointer;
+    }
+    .arrow-right {
+      margin-right: 7px;
+      margin-left: 5px;
+      width: 16px;
+      height: 16px;
+      background: url("../../assets/right.png");
+      cursor: pointer;
+    }
+    .arrow-line {
+      display: inline-block;
+      width: 2px;
+      height: 16px;
+      background: rgba(228, 229, 231, 1);
+    }
+    .arrow-line1 {
+      margin-right: 3.5px;
+    }
+  }
+}
 .evaluateContainer {
   padding: 0 24px;
   background: #fff;
@@ -97,8 +198,6 @@ export default {
     margin-top: 20px;
     display: flex;
     .ev-cont-div {
-      // width: 25%;
-      // height: 164px;
       padding: 16px 20px;
       background: rgba(248, 249, 250, 1);
       border-radius: 6px;
@@ -161,4 +260,55 @@ export default {
     margin-top: 36px;
   }
 }
+</style>
+<style lang="scss">
+.count-top-right {
+  .count-top-right .el-input__inner {
+    margin: 7px 0;
+  }
+  .el-input__inner {
+    width: 210px;
+    margin: 7px 6px;
+    height: 22px;
+    line-height: 22px;
+    font-size: 12px;
+    border: none;
+  }
+  .el-input__icon {
+    display: none;
+  }
+  .el-range-editor.el-input__inner {
+    padding: 3px 0;
+  }
+  .el-input--prefix .el-input__inner {
+    padding-left: 5px;
+  }
+  .el-input--suffix .el-input__inner {
+    padding-right: 5px;
+  }
+  .el-date-editor .el-range-input {
+    width: 45%;
+  }
+  .el-date-editor .el-range-separator {
+    line-height: 18px;
+    color: #8d9399;
+  }
+  .el-date-editor .el-range-input {
+    color: #1f2329;
+  }
+  .el-date-editor .el-range-separator {
+    padding: 0 15px;
+  }
+  .el-radio__label {
+    height: 22px;
+    font-size: 14px;
+    font-family: MicrosoftYaHei;
+    color: rgba(31, 36, 41, 1);
+    line-height: 19px;
+    padding-left: 5px;
+  }
+  .el-radio {
+    margin-right: 20px !important;
+  }
+}
 </style>

+ 196 - 230
src/views/main/index.vue

@@ -1,77 +1,74 @@
 <template>
   <div class="mainContainer">
-    <header>
-      <div class="head-left">
-        <ul>
-          <li>
-            <div @click="navBlock" class="head-bth">
-              <span v-for="(item,index) in 3" :key="index"></span>
-            </div>
-          </li>
-          <li class="line">
-            <span></span>
-          </li>
-          <li>
-            <img class="head-icon" src="@/assets/lzzk.png" alt />
-          </li>
-          <li>
-            <span class="head-text">冷站智控</span>
-          </li>
-          <li>
-            <span class="head-circular"></span>
-          </li>
-          <li>
-            <span class="head-text">{{headText}}</span>
-          </li>
-          <li>
-            <div class="triangle_border_down"></div>
-          </li>
-        </ul>
-      </div>
-      <div class="head-right">
-        <ul>
-          <li>
-            <span class="head-text">2020.01.12 12:45</span>
-          </li>
-          <li>
-            <span class="line"></span>
-          </li>
-          <li>
-            <span class="head-text">天气:多云</span>
-          </li>
-          <li>
-            <span class="head-text">25℃</span>
-          </li>
-          <li>
-            <span class="line"></span>
-          </li>
-          <li>
-            <span class="head-bth"></span>
-          </li>
-          <li>
-            <div class="triangle_border_down"></div>
-          </li>
-        </ul>
-      </div>
-    </header>
-    <!-- <nav>
-      <div class="nav-left">
-        <el-select class="nav-select" v-model="value">
-          <el-option
-            v-for="item in options"
-            :key="item.value"
-            :label="item.label"
-            :value="item.value"
-          ></el-option>
-        </el-select>
-      </div>
-      <div class="nav-right">
-        <img class="nav-icon" v-if="navText" src="@/assets/shape.png" alt />
-        <span class="nav-text1" v-if="navText">今日已收到 8 条策略,其中有 1 条未执行</span>
-        <span class="nav-text" v-else>今天已收到 8 条策略</span>
-        <span class="nav-look" @click="showTodayStrategy = true">查看</span>
-      </div>
-    </nav>-->
+    <div class="mainContainerBox">
+      <header>
+        <div class="head-left">
+          <ul>
+            <li>
+              <div @click="navBlock" class="head-bth">
+                <span v-for="(item,index) in 3" :key="index"></span>
+              </div>
+            </li>
+            <li class="line">
+              <span></span>
+            </li>
+            <li>
+              <img class="head-icon" src="@/assets/lzzk.png" alt />
+            </li>
+            <li>
+              <span class="head-text">冷站智控</span>
+            </li>
+            <li>
+              <span class="head-circular"></span>
+            </li>
+            <li>
+              <span class="head-text">{{headText}}</span>
+            </li>
+            <li>
+              <div class="triangle_border_down"></div>
+            </li>
+          </ul>
+        </div>
+        <div class="head-right">
+          <ul>
+            <li>
+              <span class="head-text">2020.01.12 12:45</span>
+            </li>
+            <li>
+              <span class="line"></span>
+            </li>
+            <li>
+              <span class="head-text">天气:多云</span>
+            </li>
+            <li>
+              <span class="head-text">25℃</span>
+            </li>
+            <li>
+              <span class="line"></span>
+            </li>
+            <li>
+              <span class="head-bth"></span>
+            </li>
+            <li>
+              <div class="triangle_border_down"></div>
+            </li>
+          </ul>
+        </div>
+      </header>
+      <nav>
+        <div class="nav-left">
+          <el-select class="nav-select" v-model="value">
+            <el-option
+              v-for="item in options"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            ></el-option>
+          </el-select>
+        </div>
+      </nav>
+    </div>
+    <div class="mainContainerTop"></div>
     <div id="nav" class="nav">
       <div @click="navNone" class="nav-bth">
         <span v-for="(item,index) in 3" :key="index"></span>
@@ -80,21 +77,12 @@
         <router-link :to="item.path">{{item.name}}</router-link>
       </p>
     </div>
-
-    <el-dialog title="提示" :visible.sync="showTodayStrategy" width="1260px">
-      <today-strategy></today-strategy>
-    </el-dialog>
   </div>
 </template>
 <script>
-import TodayStrategy from "@/components/todayStrategy.vue";
 export default {
-  components: {
-    TodayStrategy
-  },
   data() {
     return {
-      showTodayStrategy: false,
       menuList: [
         {
           name: "当日运行策略",
@@ -123,8 +111,7 @@ export default {
           label: "嘉铭东枫产业园"
         }
       ],
-      value: "",
-      navText: true
+      value: ""
     };
   },
   props: ["headText"],
@@ -140,171 +127,150 @@ export default {
 </script>
 <style lang="scss" scoped>
 .mainContainer {
-  width: 100%;
-  height: 100%;
-  header {
-    padding: 12px 16px;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    background: rgba(255, 255, 255, 1);
-    box-shadow: 0px 3px 14px 0px rgba(31, 35, 41, 0.1);
-    .head-left {
+  .mainContainerBox {
+    width: 100%;
+    height: 96px;
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 1;
+    header {
+      max-height: 48px;
+      padding: 12px 16px;
       display: flex;
+      justify-content: space-between;
       align-items: center;
-      ul {
+      background: rgba(255, 255, 255, 1);
+      box-shadow: 0px 3px 14px 0px rgba(31, 35, 41, 0.1);
+      .head-left {
         display: flex;
-        justify-content: space-between;
         align-items: center;
-        list-style: none;
-        margin: 0;
-        padding: 0;
-        li {
-          margin: 0 4px;
-          .head-bth {
-            width: 16px;
-            height: 16px;
-            span {
-              display: block;
-              width: 18px;
-              height: 2px;
-              background: rgba(0, 145, 255, 1);
-              border-radius: 1px;
-              margin: 0 auto;
+        ul {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          list-style: none;
+          margin: 0;
+          padding: 0;
+          li {
+            margin: 0 4px;
+            .head-bth {
+              width: 16px;
+              height: 16px;
+              span {
+                display: block;
+                width: 18px;
+                height: 2px;
+                background: rgba(0, 145, 255, 1);
+                border-radius: 1px;
+                margin: 0 auto;
+              }
+              span:nth-of-type(2) {
+                margin: 5px auto;
+              }
             }
-            span:nth-of-type(2) {
-              margin: 5px auto;
+            .line {
+              display: inline-block;
+              width: 1px;
+              height: 16px;
+              margin: 4px 12px 0 12px;
+              background: rgba(216, 216, 216, 1);
+            }
+            .head-icon {
+              width: 20px;
+              height: 20px;
+              margin-top: 3px;
+            }
+            .head-text {
+              height: 26px;
+              font-size: 14px;
+              font-family: MicrosoftYaHei;
+              color: rgba(31, 36, 41, 1);
+              line-height: 26px;
+            }
+            .head-circular {
+              display: inline-block;
+              width: 4px;
+              height: 4px;
+              background: rgba(195, 198, 203, 1);
+              border-radius: 90px;
+              margin-bottom: 3px;
+            }
+            .triangle_border_down {
+              width: 0;
+              height: 0;
+              border-width: 8px 6px 0;
+              border-style: solid;
+              border-color: #9ca2a9 transparent transparent;
             }
-          }
-          .line {
-            display: inline-block;
-            width: 1px;
-            height: 16px;
-            margin: 4px 12px 0 12px;
-            background: rgba(216, 216, 216, 1);
-          }
-          .head-icon {
-            width: 20px;
-            height: 20px;
-            margin-top: 3px;
-          }
-          .head-text {
-            height: 26px;
-            font-size: 14px;
-            font-family: MicrosoftYaHei;
-            color: rgba(31, 36, 41, 1);
-            line-height: 26px;
-          }
-          .head-circular {
-            display: inline-block;
-            width: 4px;
-            height: 4px;
-            background: rgba(195, 198, 203, 1);
-            border-radius: 90px;
-            margin-bottom: 3px;
-          }
-          .triangle_border_down {
-            width: 0;
-            height: 0;
-            border-width: 8px 6px 0;
-            border-style: solid;
-            border-color: #9ca2a9 transparent transparent;
           }
         }
       }
-    }
-    .head-right {
-      display: flex;
-      align-items: center;
-      ul {
+      .head-right {
         display: flex;
-        justify-content: space-between;
         align-items: center;
-        list-style: none;
-        margin: 0;
-        padding: 0;
-        li {
-          margin: 0 4px;
-          .head-bth {
-            display: inline-block;
-            width: 24px;
-            height: 24px;
-            background: rgba(0, 145, 255, 1);
-          }
-          .line {
-            display: inline-block;
-            width: 1px;
-            height: 16px;
-            margin: 4px 8px 0 8px;
-            background: rgba(216, 216, 216, 1);
-          }
-          .head-text {
-            height: 18px;
-            font-size: 14px;
-            font-family: MicrosoftYaHei;
-            color: #646c73;
-            line-height: 19px;
-          }
-          .head-circular {
-            display: inline-block;
-            width: 4px;
-            height: 4px;
-            background: rgba(195, 198, 203, 1);
-            border-radius: 90px;
-            margin-bottom: 3px;
-          }
-          .triangle_border_down {
-            width: 0;
-            height: 0;
-            border-width: 8px 6px 0;
-            border-style: solid;
-            border-color: #9ca2a9 transparent transparent;
+        ul {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          list-style: none;
+          margin: 0;
+          padding: 0;
+          li {
+            margin: 0 4px;
+            .head-bth {
+              display: inline-block;
+              width: 24px;
+              height: 24px;
+              background: rgba(0, 145, 255, 1);
+            }
+            .line {
+              display: inline-block;
+              width: 1px;
+              height: 16px;
+              margin: 4px 8px 0 8px;
+              background: rgba(216, 216, 216, 1);
+            }
+            .head-text {
+              height: 18px;
+              font-size: 14px;
+              font-family: MicrosoftYaHei;
+              color: #646c73;
+              line-height: 19px;
+            }
+            .head-circular {
+              display: inline-block;
+              width: 4px;
+              height: 4px;
+              background: rgba(195, 198, 203, 1);
+              border-radius: 90px;
+              margin-bottom: 3px;
+            }
+            .triangle_border_down {
+              width: 0;
+              height: 0;
+              border-width: 8px 6px 0;
+              border-style: solid;
+              border-color: #9ca2a9 transparent transparent;
+            }
           }
         }
       }
     }
-  }
-  nav {
-    height: 48px;
-    background: rgba(247, 249, 250, 1);
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    .nav-left {
-    }
-    .nav-right {
-      .nav-text {
-        height: 22px;
-        font-size: 14px;
-        font-family: PingFangSC-Regular, PingFang SC;
-        font-weight: 400;
-        color: rgba(31, 36, 41, 1);
-        line-height: 20px;
-      }
-      .nav-text1 {
-        margin: 0 4px;
-        height: 20px;
-        font-size: 14px;
-        font-family: PingFangSC-Regular, PingFang SC;
-        font-weight: 400;
-        color: rgba(245, 78, 69, 1);
-        line-height: 20px;
-      }
-      .nav-icon {
-        width: 16px;
-        height: 14px;
-      }
-      .nav-look {
-        height: 22px;
-        font-size: 14px;
-        font-family: MicrosoftYaHei;
-        color: rgba(0, 145, 255, 1);
-        line-height: 22px;
-        margin: 0 12px;
-        cursor: pointer;
+    nav {
+      height: 48px;
+      background: rgba(247, 249, 250, 1);
+      display: flex;
+      justify-content: flex-start;
+      align-items: center;
+      .nav-left {
       }
     }
   }
+  .mainContainerTop {
+    width: 100%;
+    height: 96px;
+  }
   .nav {
     position: fixed;
     left: 0;

+ 88 - 43
src/views/strategy/index.vue

@@ -2,26 +2,23 @@
 <template>
   <div>
     <Head :headText="headText"></Head>
+    <div class="nav-right">
+      <img class="nav-icon" v-if="navText" src="@/assets/shape.png" alt />
+      <span class="nav-text1" v-if="navText">今日已收到 8 条策略,其中有 1 条未执行</span>
+      <span class="nav-text" v-else>今天已收到 8 条策略</span>
+      <span class="nav-look" @click="showTodayStrategy = true">查看</span>
+    </div>
     <div class="strategyContainer">
       <div class="strate-left">
-        <div class="strate-left-1">
-          今天营业时间
-        </div>
-        <div class="strate-left-2">
-          10:00 - 22:00
-        </div>
-        <div class="strate-left-1"> 
-          当前运行模式
-        </div>
-        <div class="strate-left-2">
-          间歇供冷
-        </div>
+        <div class="strate-left-1">今天营业时间</div>
+        <div class="strate-left-2">10:00 - 22:00</div>
+        <div class="strate-left-1">当前运行模式</div>
+        <div class="strate-left-2">间歇供冷</div>
         <div class="strate-left-box">
-          <div class='strate-left-info-1'>通风策略</div>
-          <div class='strate-left-info'>开启时间:05:00-07:00</div>
-          <div class='strate-left-info'>新风机组:开启</div>
-          <div class='strate-left-info'>组合式空调机组:全新风</div>
-
+          <div class="strate-left-info-1">通风策略</div>
+          <div class="strate-left-info">开启时间:05:00-07:00</div>
+          <div class="strate-left-info">新风机组:开启</div>
+          <div class="strate-left-info">组合式空调机组:全新风</div>
         </div>
       </div>
       <div class="starte-right">
@@ -30,73 +27,121 @@
         <animation-box></animation-box>
       </div>
     </div>
+    <el-dialog title="提示" :visible.sync="showTodayStrategy" width="1260px">
+      <today-strategy></today-strategy>
+    </el-dialog>
   </div>
 </template>
 
 <script>
 import Head from "../main/index";
-import animationBox from './animationBox'
-import waterUnit from './waterUnit'
+import animationBox from "./animationBox";
+import waterUnit from "./waterUnit";
+import TodayStrategy from "@/components/todayStrategy.vue";
+
 export default {
   data() {
     return {
       headText: "当日运行策略",
-    
+      navText: true,
+      showTodayStrategy: false
     };
   },
   components: {
-    Head,animationBox,waterUnit
+    Head,
+    animationBox,
+    waterUnit,
+    TodayStrategy
   }
 };
 </script>
 <style lang="scss" scoped>
+.nav-right {
+  height: 48px;
+  position: fixed;
+  right: 24px;
+  top: 48px;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  .nav-text {
+    height: 22px;
+    font-size: 14px;
+    font-family: PingFangSC-Regular, PingFang SC;
+    font-weight: 400;
+    color: rgba(31, 36, 41, 1);
+    line-height: 20px;
+  }
+  .nav-text1 {
+    margin: 0 4px;
+    height: 20px;
+    font-size: 14px;
+    font-family: PingFangSC-Regular, PingFang SC;
+    font-weight: 400;
+    color: rgba(245, 78, 69, 1);
+    line-height: 20px;
+  }
+  .nav-icon {
+    width: 16px;
+    height: 14px;
+  }
+  .nav-look {
+    height: 22px;
+    font-size: 14px;
+    font-family: MicrosoftYaHei;
+    color: rgba(0, 145, 255, 1);
+    line-height: 22px;
+    margin: 0 12px;
+    cursor: pointer;
+  }
+}
+
 .strategyContainer {
   background: #fff;
   display: flex;
-  .strate-left{
-    min-width:224px;
-    background:#fff;
-    border-right:1px solid #F7F9FA;
+  .strate-left {
+    min-width: 224px;
+    background: #fff;
+    border-right: 1px solid #f7f9fa;
     margin-left: 16px;
-    .strate-left-1{
+    .strate-left-1 {
       margin-top: 24px;
-      color: #646C73;
-      font-size:14px;
+      color: #646c73;
+      font-size: 14px;
     }
-    .strate-left-2{
-      margin-top:8px;
+    .strate-left-2 {
+      margin-top: 8px;
       font-size: 20px;
     }
-    .strate-left-box{
+    .strate-left-box {
       width: 192px;
       height: 150px;
       border-radius: 6px;
-      background: #E4E5E7;
+      background: #e4e5e7;
       margin-top: 67px;
-      .strate-left-info-1{
+      .strate-left-info-1 {
         padding-top: 20px;
         padding-left: 20px;
-        font-size:16px;
-        color:#1F2429;
+        font-size: 16px;
+        color: #1f2429;
       }
-      .strate-left-info{
+      .strate-left-info {
         padding-left: 20px;
         font-size: 14px;
         margin-top: 8px;
-        color: #646C73;
+        color: #646c73;
       }
     }
   }
-  .starte-right{
-    margin-right:315px;
+  .starte-right {
+    margin-right: 315px;
     padding-left: 34px;
-    .starte-right-title{
+    .starte-right-title {
       height: 74px;
-      line-height:74px;
-      color: #1F2429;
+      line-height: 74px;
+      color: #1f2429;
       font-size: 22px;
     }
-  
   }
 }
 </style>