代码提交

src/App.vue

@@ -25,6 +25,14 @@
         </div>
       </div>
     </div>
+    <div class="menu">
+      <div class="menuList">
+        <div class="menuBtn" v-for="(item, index) in menuBtn" :key="index" @click="menuChange(index)" :class="{menuAc : menuAc == index}">
+          <img :src="item.icon" style="width: 35%; height: 54%" />
+          <div style="font-size: 0.55rem">{{ item.name }}</div>
+        </div>
+      </div>
+    </div>
     <div class="content">
       <router-view />
     </div>
@@ -68,7 +76,34 @@ import {getData} from './api/index.js'
         {
           name:'B1',
         },
-      ]
+      ],
+       menuBtn: [
+        {
+          name: "首页",
+          icon: require("./assets/images/shouYe.png"),
+        },
+        {
+          name: "智慧法庭",
+          icon: require("./assets/images/faTing.png"),
+        },
+        {
+          name: "智慧节能",
+          icon: require("./assets/images/jieNeng.png"),
+        },
+        {
+          name: "智慧安防",
+          icon: require("./assets/images/anFang.png"),
+        },
+        {
+          name: "智慧运维",
+          icon: require("./assets/images/yunWei.png"),
+        },
+        {
+          name: "告警管理",
+          icon: require("./assets/images/gaoJing.png"),
+        },
+      ],
+      menuAc:0, //菜单点击
       }
     },
      created() {
@@ -76,14 +111,12 @@ import {getData} from './api/index.js'
     this.fun();
   },
     mounted() {
-  
+      this.menuChange(0)
       let week = new Date(this.$moment().format("YYYY-MM-DD")).getDay()
       this.week = this.weekList[week]
       window.setInterval(()=>{
         this.time = this.$moment().format("YYYY-MM-DD   HH:mm:ss")
-      },1000)
+      },100)
-
-
       const that = this;
         window.onresize = () => {
           return (() => {
@@ -98,6 +131,41 @@ import {getData} from './api/index.js'
 
     },
     methods:{
+      //菜单选中
+      //菜单选中
+    menuChange(index){
+      this.menuAc = index
+      this.menuBtn.forEach((item,index) => {
+        if (index == 0) {
+          item.icon = require("./assets/images/shouYe.png")
+        }else if (index == 1) {
+          item.icon = require("./assets/images/faTing.png")
+        }else if (index == 2) {
+          item.icon = require("./assets/images/jieNeng.png")
+        }else if (index == 3) {
+          item.icon = require("./assets/images/anFang.png")
+        }else if (index == 4) {
+          item.icon = require("./assets/images/yunWei.png")
+        }else if (index == 5) {
+          item.icon = require("./assets/images/gaoJing.png")
+        }
+      });
+      if (index == 0) {
+        this.menuBtn[index].icon = require("./assets/images/shouYeAc.png")
+        this.$router.push('/')
+      }else if (index == 1) {
+        this.menuBtn[index].icon = require("./assets/images/faTingAc.png")
+          this.$router.push('court')
+      }else if (index == 2) {
+        this.menuBtn[index].icon = require("./assets/images/jieNengAc.png")
+      }else if (index == 3) {
+        this.menuBtn[index].icon = require("./assets/images/anFangAc.png")
+      }else if (index == 4) {
+        this.menuBtn[index].icon = require("./assets/images/yunWeiAc.png")
+      }else if (index == 5) {
+        this.menuBtn[index].icon = require("./assets/images/gaoJingAc.png")
+      }
+    },
       //选中楼层
       floorChange(index){
         this.floorAct = index
@@ -216,6 +284,44 @@ import {getData} from './api/index.js'
       }
     }
   }
+  .menu {
+    width: 100%;
+    height: 12%;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    background: url("./assets/images/bottomKuang.png") no-repeat;
+    background-size: 100% 100%;
+    display: flex;
+    justify-content: center;
+    .menuList {
+      width: 40%;
+      height: 100%;
+      display: flex;
+      flex-wrap: nowrap;
+      align-items: center;
+      justify-content: center;
+      .menuBtn {
+        width: 15%;
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: space-evenly;
+        color: white;
+      }
+      .menuAc{
+        color: rgb(0,229,189);
+        width: 15%;
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: space-evenly;
+      }
+    }
+  }
   .content {
     height: calc(100% - 15%);
     width: 100%;

src/router.js

@@ -24,5 +24,10 @@ export default new Router({
       name: 'index',
       component: () => import ('./views/index.vue'),
     },
+    {
+      path: '/court',
+      name: 'court',
+      component: () => import ('./views/court.vue'),
+    },
   ]
 })

src/views/court.vue

@@ -0,0 +1,171 @@
+<template>
+  <div class="courtMain">
+    <div class="left">
+      <div class="leftOne">
+        <div class="title">智慧法庭</div>
+        <div class="courtHouse">
+            <div
+              class="courtData"
+              v-for="(item, index) in courtList"
+              :key="index"
+            >
+              <div style="color: #fff; font-size: 0.55rem">{{ item.name }}</div>
+              <div
+                :class="houseList[index]"
+                style="
+                  width: 100%;
+                  height: 100%;
+                  color: #fff;
+                  font-size: 0.6rem;
+                "
+              >
+                {{ item.count }}
+              </div>
+          </div>
+        </div>
+      </div>
+      <div class="leftTwo"></div>
+      <div class="leftThree"></div>
+    </div>
+    <div class="right"></div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "court",
+  data() {
+    return {
+        courtList: [
+        {
+          name: "空闲中",
+          count: "7",
+        },
+        {
+          name: "已开庭",
+          count: "15",
+        },
+        {
+          name: "已预约",
+          count: "17",
+        },
+        {
+          name: "法官办公室",
+          count: "86",
+        },
+      ], // 智慧法庭小房子
+       houseList: ["blueHouse", "redHouse", "yellowHouse","orangeHouse"],
+    };
+  },
+  mounted() {},
+  methods: {},
+  watch: {},
+  components: {},
+};
+</script>
+
+<style lang="less" scoped>
+@fontsize: 0.6rem;
+.courtMain {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: space-between;
+  padding: 0 0.3% 0 0.3%;
+  box-sizing: border-box;
+  .left {
+    width: 25.5%;
+    height: 95%;
+    padding: 0.5% 0.3% 1% 0.3%;
+    box-sizing: border-box;
+    display: flex;
+    flex-wrap: wrap;
+    background: url(../assets/images/leftKuang.png) no-repeat;
+    background-size: 100% 100%;
+    .leftOne {
+      width: 100%;
+      height: 25%;
+      .courtHouse {
+        height: calc(100% - 30%);
+        width: 100%;
+        border: 1px solid red;
+        display: flex;
+          flex-wrap: nowrap;
+          justify-content: space-around;
+          align-items: center;
+        .courtData{
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            height: 85%;
+            width: 12%;
+             .blueHouse {
+              background: url(../assets/images/blueHouse.png) no-repeat;
+              background-size: 100% 100%;
+              display: flex;
+              align-items: center;
+              justify-content: center;
+              margin-top: 10%;
+            }
+            .redHouse {
+              background: url(../assets/images/redHouse.png) no-repeat;
+              background-size: 100% 100%;
+              display: flex;
+              align-items: center;
+              justify-content: center;
+              margin-top: 10%;
+            }
+            .yellowHouse {
+              background: url(../assets/images/yellowHouse.png) no-repeat;
+              background-size: 100% 100%;
+              display: flex;
+              align-items: center;
+              justify-content: center;
+              margin-top: 10%;
+            }
+            .orangeHouse {
+              background: url(../assets/images/orangeHouse.png) no-repeat;
+              background-size: 100% 100%;
+              display: flex;
+              align-items: center;
+              justify-content: center;
+              margin-top: 10%;
+            }
+        }
+      }
+    }
+    .leftTwo {
+      width: 100%;
+      height: 35%;
+      border: 1px solid blue;
+    }
+    .leftThree {
+      width: 100%;
+      height: 40%;
+      border: 1px solid white;
+    }
+  }
+  .right {
+    width: 25.5%;
+    height: 95%;
+    padding: 0.5% 0.3% 1% 0.3%;
+    box-sizing: border-box;
+    display: flex;
+    flex-wrap: wrap;
+    background: url(../assets/images/leftKuang.png) no-repeat;
+    background-size: 100% 100%;
+  }
+}
+.title {
+  width: 100%;
+  height: 30%;
+  background: url("../assets/images/title.png") no-repeat;
+  background-size: 100% 100%;
+  color: #fff;
+  font-size: 0.7rem;
+  display: flex;
+  align-items: center;
+  padding-left: 12%;
+  box-sizing: border-box;
+}
+</style>

src/views/index.vue

@@ -102,14 +102,6 @@
         </div>
       </div>
     </div>
-    <div class="middle">
-      <div class="menuList">
-        <div class="menuBtn" v-for="(item, index) in menuBtn" :key="index" @click="menuChange(index)" :class="{menuAc : menuAc == index}">
-          <img :src="item.icon" style="width: 35%; height: 54%" />
-          <div style="font-size: 0.55rem">{{ item.name }}</div>
-        </div>
-      </div>
-    </div>
     <div class="right">
       <div class="rightOne">
         <div class="title" style="height: 20%">运维管理</div>
@@ -301,37 +293,9 @@ export default {
           icon: require("../assets/images/camera.png"),
         },
       ], //摄像
-      menuBtn: [
-        {
-          name: "首页",
-          icon: require("../assets/images/shouYe.png"),
-        },
-        {
-          name: "智慧法庭",
-          icon: require("../assets/images/faTing.png"),
-        },
-        {
-          name: "智慧节能",
-          icon: require("../assets/images/jieNeng.png"),
-        },
-        {
-          name: "智慧安防",
-          icon: require("../assets/images/anFang.png"),
-        },
-        {
-          name: "智慧运维",
-          icon: require("../assets/images/yunWei.png"),
-        },
-        {
-          name: "告警管理",
-          icon: require("../assets/images/gaoJing.png"),
-        },
-      ],
-      menuAc:0, //菜单点击
     };
   },
   mounted() {
-    this.menuChange(0)
     this.warningOne();
     this.warningTwo();
     this.maintenanceLeft();
@@ -339,38 +303,6 @@ export default {
     this.energyEcharts();
   },
   methods: {
-    //菜单选中
-    menuChange(index){
-      this.menuAc = index
-      this.menuBtn.forEach((item,index) => {
-        if (index == 0) {
-          item.icon = require("../assets/images/shouYe.png")
-        }else if (index == 1) {
-          item.icon = require("../assets/images/faTing.png")
-        }else if (index == 2) {
-          item.icon = require("../assets/images/jieNeng.png")
-        }else if (index == 3) {
-          item.icon = require("../assets/images/anFang.png")
-        }else if (index == 4) {
-          item.icon = require("../assets/images/yunWei.png")
-        }else if (index == 5) {
-          item.icon = require("../assets/images/gaoJing.png")
-        }
-      });
-      if (index == 0) {
-        this.menuBtn[index].icon = require("../assets/images/shouYeAc.png")
-      }else if (index == 1) {
-        this.menuBtn[index].icon = require("../assets/images/faTingAc.png")
-      }else if (index == 2) {
-        this.menuBtn[index].icon = require("../assets/images/jieNengAc.png")
-      }else if (index == 3) {
-        this.menuBtn[index].icon = require("../assets/images/anFangAc.png")
-      }else if (index == 4) {
-        this.menuBtn[index].icon = require("../assets/images/yunWeiAc.png")
-      }else if (index == 5) {
-        this.menuBtn[index].icon = require("../assets/images/gaoJingAc.png")
-      }
-    },
     //报警选中
     warnSelect(index) {
       this.warnBtnAc = index;
@@ -1193,44 +1125,6 @@ export default {
       }
     }
   }
-  .middle {
-    width: 100%;
-    height: 12%;
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    background: url("../assets/images/bottomKuang.png") no-repeat;
-    background-size: 100% 100%;
-    display: flex;
-    justify-content: center;
-    .menuList {
-      width: 40%;
-      height: 100%;
-      display: flex;
-      flex-wrap: nowrap;
-      align-items: center;
-      justify-content: center;
-      .menuBtn {
-        width: 15%;
-        height: 100%;
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        justify-content: space-evenly;
-        color: white;
-      }
-      .menuAc{
-        color: rgb(0,229,189);
-        width: 15%;
-        height: 100%;
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        justify-content: space-evenly;
-      }
-    }
-  }
   .right {
     width: 25.5%;
     height: 95%;