From 3411d938b694c13e1704973a1a9505b0da4fadb3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E2=80=9C002001lixiaobang=E2=80=9D?= <2547956374@qq.com> Date: Wed, 12 Apr 2023 09:05:03 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BB=A3=E7=A0=81=E6=8F=90=E4=BA=A4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.vue | 116 +++++++++++++++++++- src/assets/images/orangeHouse.png | Bin 0 -> 3719 bytes src/router.js | 5 + src/views/court.vue | 171 ++++++++++++++++++++++++++++++ src/views/index.vue | 106 ------------------ 5 files changed, 287 insertions(+), 111 deletions(-) create mode 100644 src/assets/images/orangeHouse.png create mode 100644 src/views/court.vue diff --git a/src/App.vue b/src/App.vue index d9d9738..a961037 100644 --- a/src/App.vue +++ b/src/App.vue @@ -25,6 +25,14 @@ +
+
+
+ +
{{ item.name }}
+
+
+
@@ -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%; diff --git a/src/assets/images/orangeHouse.png b/src/assets/images/orangeHouse.png new file mode 100644 index 0000000000000000000000000000000000000000..a6c5febf54a9693bc8e745961e84c9f23537935e GIT binary patch literal 3719 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 literal 0 HcmV?d00001 diff --git a/src/router.js b/src/router.js index 928516b..78a8fea 100644 --- a/src/router.js +++ b/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'), + }, ] }) diff --git a/src/views/court.vue b/src/views/court.vue new file mode 100644 index 0000000..e8e0ea2 --- /dev/null +++ b/src/views/court.vue @@ -0,0 +1,171 @@ + + + + + \ No newline at end of file diff --git a/src/views/index.vue b/src/views/index.vue index 8f45266..62a03c1 100644 --- a/src/views/index.vue +++ b/src/views/index.vue @@ -102,14 +102,6 @@ -
-
-
- -
{{ item.name }}
-
-
-
运维管理
@@ -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%;