看板页面新增+调整；优化全局样式

src/components/TimeMenu/index.vue

@@ -0,0 +1,157 @@
+<template>
+  <div class="right-sec">
+    <div class="right-menu">
+      <el-dropdown class="avatar-container" trigger="click">
+        <div class="avatar-wrapper">
+          <div><strong>admin</strong></div>
+          <i class="el-icon-caret-bottom" />
+        </div>
+        <el-dropdown-menu slot="dropdown" class="user-dropdown">
+          <router-link to="/">
+            <el-dropdown-item> 首页 </el-dropdown-item>
+          </router-link>
+          <el-dropdown-item divided @click.native="logout">
+            <span style="display: block">退出</span>
+          </el-dropdown-item>
+        </el-dropdown-menu>
+      </el-dropdown>
+    </div>
+    <div class="right-time date">{{ dateFormat(date) }}</div>
+  </div>
+</template>
+
+<script>
+// import { flexible } from "@/utils";
+
+export default {
+  name: "TimeMenu",
+  //   components: { sbjk, monitor, alarming, handleNumber, alarmStatic,Navbar },
+  data() {
+    return {
+      date: new Date(), //实时时间
+    };
+  },
+  methods: {
+    setZero(a) {
+      //设置小于10的数字在加0
+      return a < 10 ? "0" + a : a;
+    },
+
+    dateFormat: function (time) {
+      var date = new Date(time);
+      var year = date.getFullYear();
+      /* 在日期格式中，月份是从0开始的，因此要加0
+       * 使用三元表达式在小于10的前面加0，以达到格式统一  如 09:11:05
+       * */
+      var month =
+        date.getMonth() + 1 < 10
+          ? "0" + (date.getMonth() + 1)
+          : date.getMonth() + 1;
+      var day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
+      var hours =
+        date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
+      var minutes =
+        date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
+      var seconds =
+        date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
+      // 拼接
+      return (
+        year +
+        "年" +
+        month +
+        "月" +
+        day +
+        "日 " +
+        hours +
+        ":" +
+        minutes +
+        ":" +
+        seconds
+      );
+    },
+  },
+  mounted() {
+    var _this = this;
+    this.timer = setInterval(() => {
+      _this.date = new Date(); // 修改日期数据
+    }, 1000);
+  },
+
+  destroyed() {
+    if (this.timer) {
+      clearInterval(this.timer); // 在Vue实例销毁前，清除当前日期定时器
+    }
+  },
+};
+</script>
+
+
+<style lang="scss" scoped>
+.right-sec{
+    position:absolute;
+    right:0;
+    top:0;
+
+}
+.right-time {
+    float: right;
+    line-height: 50px;
+    margin-right: 50px;
+    font-size:14px
+  }
+ .right-menu {
+    float: right;
+    height: 100%;
+    line-height: 50px;
+
+    &:focus {
+      outline: none;
+    }
+
+    .right-menu-item {
+      display: inline-block;
+      padding: 0 8px;
+      height: 100%;
+      font-size: 18px;
+      color: #5a5e66;
+      vertical-align: text-bottom;
+
+      &.hover-effect {
+        cursor: pointer;
+        transition: background 0.3s;
+
+        &:hover {
+          background: rgba(0, 0, 0, 0.025);
+        }
+      }
+    }
+
+    .avatar-container {
+      margin-right: 30px;
+      display: block;
+
+      .avatar-wrapper {
+        // margin-top: 5px;
+        position: relative;
+
+        .user-avatar {
+          cursor: pointer;
+          width: 40px;
+          height: 40px;
+          border-radius: 10px;
+        }
+
+        .el-icon-caret-bottom {
+          cursor: pointer;
+          position: absolute;
+          right: -20px;
+          top: 20px;
+          font-size: 12px;
+        }
+      }
+    }
+  }
+</style>
+
+<style lang="scss">
+</style>

src/layout/components/Navbar.vue

@@ -9,39 +9,7 @@
     <!-- <breadcrumb class="breadcrumb-container" /> -->
 
     <div class="title-top">安防综合管理平台</div>
-
-    <div class="right-menu">
-      <el-dropdown class="avatar-container" trigger="click">
-        <div class="avatar-wrapper">
-          <!-- <img :src="avatar + '?imageView2/1/w/80/h/80'" class="user-avatar" /> -->
-          <div><strong>admin</strong></div>
-          <i class="el-icon-caret-bottom" />
-        </div>
-        <el-dropdown-menu slot="dropdown" class="user-dropdown">
-          <router-link to="/">
-            <el-dropdown-item> 首页 </el-dropdown-item>
-          </router-link>
-          <!-- <a
-            target="_blank"
-            href="https://github.com/PanJiaChen/vue-admin-template/"
-          >
-            <el-dropdown-item>Github</el-dropdown-item>
-          </a>
-          <a
-            target="_blank"
-            href="https://panjiachen.github.io/vue-element-admin-site/#/"
-          >
-            <el-dropdown-item>Docs</el-dropdown-item>
-          </a> -->
-          <el-dropdown-item divided @click.native="logout">
-            <span style="display: block">退出</span>
-          </el-dropdown-item>
-        </el-dropdown-menu>
-      </el-dropdown>
-    </div>
-
-    <div class="right-time date">{{ dateFormat(date)  }}</div>
-    <!-- <div class="right-time date">2020年9月22日18:04:17</div> -->
+    <time-menu></time-menu>
   </div>
 </template>
 
@@ -49,11 +17,12 @@
 import { mapGetters } from "vuex";
 import Breadcrumb from "@/components/Breadcrumb";
 import Hamburger from "@/components/Hamburger";
+import TimeMenu from "@/components/TimeMenu";
 
 export default {
   data() {
     return {
-      date: new Date(), //实时时间
+     
     };
   },
 
@@ -62,6 +31,7 @@ export default {
   components: {
     Breadcrumb,
     Hamburger,
+    TimeMenu
   },
   computed: {
     ...mapGetters(["sidebar", "avatar"]),
@@ -74,42 +44,9 @@ export default {
       await this.$store.dispatch("user/logout");
       this.$router.push(`/login?redirect=${this.$route.fullPath}`);
     },
-
-    setZero(a) {
-      //设置小于10的数字在加0
-      return a < 10 ? "0" + a : a;
-    },
-
-  
-    dateFormat:function(time) {
-		var date=new Date(time);
-		var year=date.getFullYear();
-		/* 在日期格式中，月份是从0开始的，因此要加0
-		 * 使用三元表达式在小于10的前面加0，以达到格式统一  如 09:11:05
-		 * */
-		var month= date.getMonth()+1<10 ? "0"+(date.getMonth()+1) : date.getMonth()+1;
-		var day=date.getDate()<10 ? "0"+date.getDate() : date.getDate();
-		var hours=date.getHours()<10 ? "0"+date.getHours() : date.getHours();
-		var minutes=date.getMinutes()<10 ? "0"+date.getMinutes() : date.getMinutes();
-		var seconds=date.getSeconds()<10 ? "0"+date.getSeconds() : date.getSeconds();
-		// 拼接
-		return year+"年"+month+"月"+day+"日 "+hours+":"+minutes+":"+seconds;
-	},
-
+    
   },
 
-  mounted() {
-    var _this = this;
-    this.timer = setInterval(() => {
-      _this.date = new Date(); // 修改日期数据
-    }, 1000);
-  },
-
-  destroyed() {
-    if (this.timer) {
-      clearInterval(this.timer); // 在Vue实例销毁前，清除当前日期定时器
-    }
-  },
 };
 </script>
 
@@ -134,73 +71,15 @@ export default {
     }
   }
 
-  // .breadcrumb-container {
-  //   float: left;
-  // }
+
   .title-top {
     line-height: 50px;
     font-size: 24px;
     width: 50%;
     float: left;
   }
-  .right-time {
-    float: right;
-    line-height: 50px;
-    margin-right: 50px;
-    font-size:14px
-  }
 
-  .right-menu {
-    float: right;
-    height: 100%;
-    line-height: 50px;
-
-    &:focus {
-      outline: none;
-    }
-
-    .right-menu-item {
-      display: inline-block;
-      padding: 0 8px;
-      height: 100%;
-      font-size: 18px;
-      color: #5a5e66;
-      vertical-align: text-bottom;
-
-      &.hover-effect {
-        cursor: pointer;
-        transition: background 0.3s;
-
-        &:hover {
-          background: rgba(0, 0, 0, 0.025);
-        }
-      }
-    }
-
-    .avatar-container {
-      margin-right: 30px;
-      display:block;
-
-      .avatar-wrapper {
-        // margin-top: 5px;
-        position: relative;
-
-        .user-avatar {
-          cursor: pointer;
-          width: 40px;
-          height: 40px;
-          border-radius: 10px;
-        }
+  
 
-        .el-icon-caret-bottom {
-          cursor: pointer;
-          position: absolute;
-          right: -20px;
-          top: 20px;
-          font-size: 12px;
-        }
-      }
-    }
-  }
 }
 </style>

src/router/index.js

@@ -27,7 +27,7 @@ import Layout from '@/layout'
 
 /**
  * constantRoutes
- * a base page that does not have permission requirements
+ * a base page that does not have permission requirements   
  * all roles can be accessed
  */
 export const constantRoutes = [{

src/views/index/components/alarmStatic.vue

@@ -3,9 +3,27 @@
     <div class="panel-tit">报警统计</div>
     <div class="staticList">
         <ul>
-            <li></li>
-            <li></li>
-            <li></li>
+            <li>
+                <img src="@/assets/static1.png" alt="">
+                <div>
+                  <p class="static-num colorTotal">185</p>
+                  <p class="static-tit">总报警数</p>
+                </div>
+            </li>
+            <li>
+                <img src="@/assets/static2.png" alt="">
+                <div>
+                  <p class="static-num colorOverTime">185</p>
+                  <p class="static-tit">已处置数</p>
+                </div>
+            </li>
+            <li>
+                <img src="@/assets/static3.png" alt="">
+                <div>
+                  <p class="static-num colorUnhandle">185</p>
+                  <p class="static-tit">未处置数</p>
+                </div>
+            </li>
         </ul>
     </div>
    
@@ -24,10 +42,7 @@ export default {
 </script>
 <style lang="scss" scoped>
 .panel.alarmStatic {
-  position: absolute;
-  top: 1rem;
-  right: 2rem;
-  z-index: 3;
+ 
   box-sizing:border-box;
   padding:0 1.2rem;
   .staticList{
@@ -38,8 +53,31 @@ export default {
       display:block;
       float:left;
       width:33.3333%;
-      border:1px solid pink;
+      //  border:1px solid pink;
       height:18rem;
+      text-align:center;
+      img{
+          max-width:100%;
+          width:70%;
+     
+          padding:0;
+          margin:1.5rem auto 1.5rem;
+          // position:relative;
+          // top:-2.4rem
+      }
+      div{
+        // position:relative;
+        // top:-4.8rem;
+        .static-num{
+            font-size:2.4rem;
+            font-family:Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
+            margin-bottom:.7rem
+        }
+        .static-tit{
+          font-size:1.4rem;
+        }
+      }
+      
   }
   
 

src/views/index/components/alarming.vue

@@ -55,9 +55,7 @@ export default {
 </script>
 <style lang="scss" scoped>
 .panel.alarming {
-  position: absolute;
-  top: 69rem;
-  right: 2rem;
+ margin-top:2rem;
   z-index: 3;
   box-sizing:border-box;
   table{

src/views/index/components/barChart.vue

@@ -4,7 +4,7 @@
 <script>
 import echarts from "echarts";
 export default {
-  name: "barChart",
+  name: "lineChart",
   mounted() {
     this.showMain();
   },
@@ -30,7 +30,7 @@ export default {
     yAxis: [
       {
         type: "category",
-        inverse: true,
+        // inverse: true,
         data: ["未处理数", "审核未通过", "超时完成", "已完成"],
         // 不显示y轴的线
         axisLine: {
@@ -66,7 +66,7 @@ export default {
       {
         name: "条",
         type: "bar",
-        data: [12, 36, 62, 50],
+        data: [12, 36, 2, 50],
         yAxisIndex: 0,
         // 修改第一组柱子的圆角
         itemStyle: {

src/views/index/components/handleNumber.vue

@@ -9,22 +9,21 @@
       <div class="pie-textList">
         <ul>
           <li>
-            <div class="num-tit ">未处理数</div>
+            <div class="num-tit">未处理数</div>
             <div class="num-no colorUnhandle">60</div>
           </li>
           <li>
-            <div class="num-tit ">审核未通过</div>
+            <div class="num-tit">审核未通过</div>
             <div class="num-no colorUnpass">180</div>
           </li>
           <li>
-            <div class="num-tit ">超时完成</div>
-            <div class="num-no colorOverTimer">30</div>
+            <div class="num-tit">超时完成</div>
+            <div class="num-no colorOverTime">30</div>
           </li>
           <li>
-            <div class="num-tit ">已完成数</div>
+            <div class="num-tit">已完成数</div>
             <div class="num-no colorSuccess">260</div>
           </li>
-         
         </ul>
       </div>
     </div>
@@ -46,10 +45,7 @@ export default {
 </script>
 <style lang="scss" scoped>
 .panel.handleNumber {
-  position: absolute;
-  top: 27rem;
-  right: 2rem;
-  z-index: 3;
+  margin-top:2rem;
   box-sizing: border-box;
   padding: 0 1.2rem;
   .section1 {
@@ -73,35 +69,34 @@ export default {
         line-height: 4.2rem;
         display: inline-block;
         font-size: 1.4rem;
-        background:url(../../../assets/handlelist-bg.png);
-        text-align:center;
-        padding-right:1rem;
+        background: url(../../../assets/handlelist-bg.png);
+        text-align: center;
+        padding-right: 1rem;
+        
+        
+        
         > div {
           display: inline-block;
           vertical-align: center;
-          
         }
         .num-no {
-            font-size: 2rem;
-            color: #04f9ab;
-            font-family: "impact";
-            margin-left:2rem;
-            position:relative;
-            top:0.3rem;
-          }
-          .colorSuccess{
-    color:#01E416
-}
-.colorUnhandle{
-    color:rgb(248, 72, 3)
-}
-.colorOverTime{
-    color:#0BC3FF
-}
-.colorUnpass{
-    color:#FD7700
-}
+          font-size: 2rem;
+          // color: #04f9ab;
+          font-family: "impact";
+          margin-left: 2rem;
+          position: relative;
+          top: 0.3rem;
+        }
+        
       }
+      @media(max-width:1200px){
+          li  .num-tit{
+            font-size:1.2rem;
+          }
+          li .num-no{
+            margin-left:.5rem;
+          }
+        }
     }
   }
   .section2 {

src/views/index/components/monitor.vue

@@ -1,6 +1,8 @@
 <template>
   <div class="panel monitor">
-    <div class="panel-tit">视频监控</div>
+    <div class="panel-tit">
+      视频监控 <img class="setting" src="@/assets/setting.png" alt="" @click="showModal=true" />
+    </div>
     <ul class="monitor-list">
       <li>
         <img src="@/assets/monitor.png" alt="" />
@@ -29,11 +31,12 @@
     </ul>
     <div class="panel-footer"></div>
 
-    <div class="panel monitor-setting">
-      <div class="panel-tit">画面配置</div>
+    <div class="panel monitor-setting"  v-if="showModal">
+      <div class="panel-tit">
+        画面配置<img class="close" src="@/assets/close.png" alt="" @click="showModal=false"/>
+      </div>
       <div class="monitor-option">
         <el-form ref="form" :model="form" label-width="12rem">
-        
           <el-form-item label="画面一：">
             <el-select v-model="form.region" placeholder="">
               <el-option label="画面一" value="shanghai"></el-option>
@@ -47,7 +50,7 @@
             </el-select>
           </el-form-item>
           <el-form-item label="画面三：">
-            <el-select v-model="form.region3"  placeholder="">
+            <el-select v-model="form.region3" placeholder="">
               <el-option label="画面一" value="shanghai3"></el-option>
               <el-option label="画面二" value="beijing4"></el-option>
             </el-select>
@@ -70,11 +73,10 @@
               <el-option label="画面二" value="beijing6"></el-option>
             </el-select>
           </el-form-item>
-          
-          <el-form-item>
-            <el-button>取消</el-button>
-                        <el-button type="primary" @click="onSubmit">保存</el-button>
 
+          <el-form-item>
+            <el-button @click="showModal=false">取消</el-button>
+            <el-button type="primary"  @click="showModal=false">保存</el-button>
           </el-form-item>
         </el-form>
       </div>
@@ -87,6 +89,8 @@ export default {
   name: "monitor",
   data() {
     return {
+
+      showModal: true,
       form: {
         name: "",
         region: "",
@@ -114,12 +118,12 @@ export default {
 <style lang="scss" scoped>
 //视频监控
 .panel.monitor {
-  position: absolute;
-  bottom: 3rem;
-  left: 2rem;
+  margin-top:2rem;
   z-index: 3;
+  .panel-tit {
+    position: relative;
+  }
 }
-
 .monitor-list {
   padding: 1.2rem;
   overflow: hidden;
@@ -132,6 +136,9 @@ export default {
 }
 .monitor-list li img {
   width: 100%;
+ 
+  display: block;
+
 }
 .monitor-tit {
   position: absolute;
@@ -146,70 +153,68 @@ export default {
   background: rgba(0, 0, 0, 0.7);
 }
 
+.setting,
+.close {
+  position: absolute;
+  width: 2rem;
+  right: 1.5rem;
+  top: 1.3rem;
+  cursor:pointer
+}
+.close{
+   width: 1.7rem;
+   cursor:pointer
 
-
+}
 
 .monitor-setting {
-
   position: absolute;
   left: 105%;
-  width:100%;
+  width: 100%;
   top: 0;
-  margin:0 auto;
-  text-align:center;
-  .monitor-option{
-      padding:2rem 4rem 2rem 4rem;
-
+  margin: 0 auto;
+  text-align: center;
+  .monitor-option {
+    padding: 2rem 4rem 2rem 4rem;
   }
 }
-
-
-
-
 </style>
 <style lang="scss">
-.monitor-setting .el-form-item__label{
-    font-size:1.6rem;
-    color:#fff;
-    line-height:3.4rem
-}
-.monitor-setting .el-form-item__content{
-    line-height:3.4rem;
-   
-}
-.monitor-setting .el-form-item{
-    margin-bottom:1.6rem
-}
-.monitor-setting .el-input__inner{
-    height:3.4rem;
-    line-height:3.4rem;
-  
-    border-radius:0;
-    font-size:1.4rem;
-    background-color:rgba(0,0,0,0);
-    border:1px solid #3486DA
-}
-.monitor-setting .el-input__icon{
-    line-height:2.4rem
-}
-.monitor-setting .el-button{
-    border-radius:0;
-    font-size:1.6rem;
-    padding:1rem 2.3rem;
-    margin-top:3rem;
-    
-
+.monitor-setting .el-form-item__label {
+  font-size: 1.6rem;
+  color: #fff;
+  line-height: 3.4rem;
 }
-.monitor-setting .el-select .el-input .el-select__caret{
-    color:#3486DA;
-    font-size:1.6rem;
+.monitor-setting .el-form-item__content {
+  line-height: 3.4rem;
 }
-.monitor-setting .el-select:hover .el-input__inner{
-    border:1px solid #3486DA;
-    opacity:.7
-
+.monitor-setting .el-form-item {
+  margin-bottom: 1.6rem;
+}
+.monitor-setting .el-input__inner {
+  height: 3.4rem;
+  line-height: 3.4rem;
+
+  border-radius: 0;
+  font-size: 1.4rem;
+  background-color: rgba(0, 0, 0, 0);
+  border: 1px solid #3486da;
+}
+.monitor-setting .el-input__icon {
+  line-height: 2.4rem;
+}
+.monitor-setting .el-button {
+  border-radius: 0;
+  font-size: 1.6rem;
+  padding: 1rem 2.3rem;
+  margin-top: 3rem;
+}
+.monitor-setting .el-select .el-input .el-select__caret {
+  color: #3486da;
+  font-size: 1.6rem;
+}
+.monitor-setting .el-select:hover .el-input__inner {
+  border: 1px solid #3486da;
+  opacity: 0.7;
 }
-
-
-
 </style>

src/views/index/components/pieAlarm.vue

@@ -1,12 +1,5 @@
 <template>
-  <div
-    id="main3"
-    style="
-      width: 100%;
-      height: 100%;
-     
-    "
-  ></div>
+  <div id="main3" style="width: 100%; height: 100%"></div>
 </template>
 <script>
 import echarts from "echarts";
@@ -22,7 +15,7 @@ export default {
       var myChart = echarts.init(document.getElementById("main3"));
       var color = ["#C8E4FF", "#0483FF", "#0483FF"];
 
-      
+      var per = "%";
 
       // 指定图表的配置项和数据
       var option = {
@@ -33,13 +26,17 @@ export default {
           "#04f9ab",
         ],
         title: {
-          text: "", // 标题
+         
+           text: "总数", // 标题
+          x: "48%",
+          y: "55%",
+          z: 8,
+          textAlign: "center",
           textStyle: {
-            fontSize: 15,
-            fontWeight: "bold",
-            color: "black",
+            color: "#f1f7fe",
+            fontSize: 14,
+            fontWeight: "normal",
           },
-          y: "4%",
         },
         tooltip: {
           trigger: "item",
@@ -47,15 +44,13 @@ export default {
         },
 
         series: [
-            
           {
-            name: "总数",
+            // name: "总数",
             type: "pie",
             selectedMode: "single",
-            radius: ["60%", "65%"],   //aa 内圈大小
+            radius: ["60%", "65%"], //aa 内圈大小
             center: ["50%", "50%"],
-           
-           
+
             itemStyle: {
               normal: {
                 color: new echarts.graphic.LinearGradient(
@@ -71,19 +66,17 @@ export default {
                 ),
               },
             },
-            hoverAnimation:false,
+            hoverAnimation: false,
             label: {
               normal: {
                 show: true,
-                color: "#0BC3FF", //aa中间文字颜色
+                color: "#FFEC16", //aa中间文字颜色
                 position: "center",
-                fontSize: 18,
-                    fontFamily: "impact",
+                fontSize: 23,
+                fontFamily: "impact",
                 formatter: function (a) {
-                  return a.value + "\n" + a.name;
+                  return a.value;
                 },
-
-               
               },
             },
             labelLine: {
@@ -91,14 +84,14 @@ export default {
                 show: false,
               },
             },
-            data: [{ value: 1232, name: "总数" }],
+            data: [{ value:1232, name: "总数" }],
           },
           {
             name: "故障处置数",
             splitNumber: 30,
             type: "pie",
             center: ["50%", "50%"],
-            radius: ["80%", "98%"],    //aa外圈大小
+            radius: ["80%", "98%"], //aa外圈大小
             avoidLabelOverlap: false,
             itemStyle: {
               normal: {
@@ -106,7 +99,7 @@ export default {
                 // borderWidth: 4
               },
             },
-            hoverAnimation:false,
+            hoverAnimation: false,
             label: {
               show: false, //aa 去掉指示折线
             },
@@ -120,10 +113,11 @@ export default {
           },
 
           {
+            "z": 10,
             name: "小环",
             type: "gauge",
-            splitNumber: 15,
-            radius: "95%",   //aa发散圈的大小
+            splitNumber: 20,
+            radius: "99%", //aa发散圈的大小
             center: ["50%", "50%"],
             startAngle: 0,
             endAngle: 359.9999,
@@ -133,13 +127,13 @@ export default {
             axisTick: {
               show: true,
               lineStyle: {
-                color: color[1],
-                width: 1,    // aa发散圈的粗细
+                color: '#021132',
+                width: 4, // aa发散圈的粗细
                 shadowBlur: 1,
                 shadowColor: color[1],
               },
-              length: 8,  // aa发散圈的长度
-              splitNumber: 5,  //aa发散圈每一条间隔
+              length: 13, // aa发散圈的长度
+              splitNumber: 1, //aa发散圈每一条间隔
             },
             splitLine: {
               show: false,
@@ -152,9 +146,6 @@ export default {
             },
           },
         ],
-
-
-        
       };
 
       // 使用刚指定的配置项和数据显示图表。

src/views/index/components/pieSounder.vue

@@ -77,7 +77,7 @@ export default {
           //aa 手指移入
           formatter: function (params) {
             return (
-              '<span style="color: #fff;">占比：' + params.value + "%</span>"
+              '<span style="color: #fff;">占比：' + params.value + '%</span>'
             );
           },
         },

src/views/index/components/sbjk.vue

@@ -51,9 +51,6 @@ export default {
 <style lang="scss" scoped>
 // 设备工况
 .panel.sbgk {
-  position: absolute;
-  left: 2rem;
-  top: 0;
   z-index: 2;
 }
 

src/views/index/index.vue

@@ -1,18 +1,35 @@
 <template>
   <div class="main-container-box">
-    <div class="nav-header">安防综合管理平台</div>
-    <div class="panel-box">
-      <sbjk></sbjk>
-      <monitor></monitor>
+    <div class="nav-header">
+      安防综合管理平台
+
+      <!-- <sidebar-item v-for="route in routes" :key="route.path" :item="route" :base-path="route.path" /> -->
+
+
+      <div class="time-menu">
+        <time-menu></time-menu>
+      </div>
 
-      <alarm-static></alarm-static>
-      <handle-number></handle-number>
-      <alarming></alarming>
+
+
+    </div>
+    <div class="panel-box">
+      <div class="column1">
+        <sbjk></sbjk>
+        <monitor></monitor>
+      </div>
+      <div class="column2">
+        <alarm-static></alarm-static>
+        <handle-number></handle-number>
+        <alarming></alarming>
+      </div>
     </div>
   </div>
 </template>
 
 <script>
+import TimeMenu from "@/components/TimeMenu";
+
 import sbjk from "./components/sbjk";
 import monitor from "./components/monitor";
 import alarming from "./components/alarming";
@@ -20,13 +37,47 @@ import handleNumber from "./components/handleNumber";
 import alarmStatic from "./components/alarmStatic";
 
 
-// import { flexible } from "@/utils";
+
+// import { mapGetters } from 'vuex'
+// import SidebarItem from '@/layout/components/Sidebar/SidebarItem'
+// import variables from '@/styles/variables.scss'
+
+
+
 
 export default {
-  components: { sbjk, monitor, alarming, handleNumber,alarmStatic },
+  components: { sbjk, monitor, alarming, handleNumber, alarmStatic, TimeMenu},
+    // components: { sbjk, monitor, alarming, handleNumber, alarmStatic, TimeMenu,SidebarItem},
+
   data() {
     return {};
   },
+  //  computed: {
+  //   ...mapGetters([
+  //     'sidebar'
+  //   ]),
+  //   routes() {
+  //     return this.$router.options.routes
+  //   },
+  //   activeMenu() {
+  //     const route = this.$route
+  //     const { meta, path } = route
+  //     // if set path, the sidebar will highlight the path you set
+  //     if (meta.activeMenu) {
+  //       return meta.activeMenu
+  //     }
+  //     return path
+  //   },
+  //   showLogo() {
+  //     return this.$store.state.settings.sidebarLogo
+  //   },
+  //   variables() {
+  //     return variables
+  //   },
+  //   isCollapse() {
+  //     return !this.sidebar.opened
+  //   }
+  // }
 };
 </script>
 
@@ -49,7 +100,7 @@ $cursor: #fff;
 // @import "../../styles/mixin.scss";
 </style>
 
-<style lang="scss">
+<style lang="scss" >
 /* 初始化 */
 
 ul {
@@ -64,19 +115,50 @@ p {
   margin: 0;
   list-style: none;
 }
-img {
-  display: block;
+
+.colorSuccess {
+  color: #01e416;
 }
 
+.colorUnhandle {
+  color: rgb(248, 72, 3);
+}
 
+.colorOverTime {
+  color: #0bc3ff;
+}
 
+.colorUnpass {
+  color: #fd7700;
+}
 
+.colorTotal {
+  color: #ffec16;
+}
+
+// 时间菜单插件
+.nav-header {
+  .time-menu .right-time.date {
+    font-size: 1.6rem;
+    line-height: 4.5rem;
+  }
+  .right-sec .right-menu {
+    line-height: 4.5rem;
+  }
+  .right-sec
+    .right-menu
+    .avatar-container
+    .avatar-wrapper
+    .el-icon-caret-bottom {
+    top: 1.6rem;
+  }
+}
 
 /* 首页公共css */
 .main-container-box {
   min-width: 1024px;
 
-  background:url(../../assets/bg.png);
+  background: url(../../assets/bg.png);
   background-size: 100% 100%;
   background-repeat: no-repeat;
   overflow: hidden;
@@ -94,13 +176,24 @@ img {
 .panel-box {
   min-width: 1024px;
   max-width: 1920px;
-  min-height: 600px;
+  min-height: 650px;
   position: relative;
   height: calc(100vh - 8rem);
   display: flex;
+  > div {
+    position: absolute;
+    top: 0;
+
+    width: 23%;
+  }
+  .column1 {
+    left: 1rem;
+  }
+  .column2 {
+    right: 1rem;
+  }
 }
 .panel {
-  width: 23%;
   position: relative;
   background: #021132;
   border: 1px solid #3486da;