chengdandan
/
fayuanjiangbei
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

代码提交

This commit is contained in:
lixiaobang 2023-04-12 09:05:03 +08:00
parent a16e9137bc
commit 3411d938b6
5 changed files with 287 additions and 111 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

116
src/App.vue
View File

@ -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%;

BIN
src/assets/images/orangeHouse.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.6 KiB

5
src/router.js
View File

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

171
src/views/court.vue Normal file
View File

@ -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>

106
src/views/index.vue
View File

@ -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%;