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

Compare commits

base: chengdandan:a1eb63388a62bb414d530b4489b4a03bb13613ef
Branches Tags
chengdandan:master
...
compare: chengdandan:310d9aa8b2914555f608120210580c263f9a5bd6
Branches Tags
chengdandan:master

2 Commits
a1eb63388a ... 310d9aa8b2

Author SHA1 Message Date
chengdandan 310d9aa8b2 Merge branch 'master' of https://git.lgzn.space/chengdandan/fayuanjiangbei 2023-04-13 09:55:48 +08:00
chengdandan 2df1235ce8 20230413 2023-04-13 09:55:43 +08:00
7 changed files with 1025 additions and 17074 deletions
Show Stats Expand all files Collapse all files

17353
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

18
src/App.vue
View File

@ -28,7 +28,8 @@
<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%" />
<img :src="item.icon" style="width: 55%;
height: 71%;" />
<div style="font-size: 0.55rem">{{ item.name }}</div>
</div>
</div>
@ -158,12 +159,16 @@ import {getData} from './api/index.js'
this.$router.push('court')
}else if (index == 2) {
this.menuBtn[index].icon = require("./assets/images/jieNengAc.png")
this.$router.push('energySaving')
}else if (index == 3) {
this.menuBtn[index].icon = require("./assets/images/anFangAc.png")
this.$router.push('security')
}else if (index == 4) {
this.menuBtn[index].icon = require("./assets/images/yunWeiAc.png")
this.$router.push('operationMaintenance')
}else if (index == 5) {
this.menuBtn[index].icon = require("./assets/images/gaoJingAc.png")
this.$router.push('alarm')
}
},
//选中楼层
@ -207,6 +212,7 @@ import {getData} from './api/index.js'
height: 1080px;
transition: all 0.2s linear;
transform-origin: left top;
}
</style>
<style lang="less" scoped>
@ -303,8 +309,10 @@ import {getData} from './api/index.js'
align-items: center;
justify-content: center;
.menuBtn {
// width: 15%;
// height: 100%;
width: 15%;
height: 100%;
height: 61%;
display: flex;
flex-direction: column;
align-items: center;
@ -313,8 +321,10 @@ import {getData} from './api/index.js'
}
.menuAc{
color: rgb(0,229,189);
width: 15%;
height: 100%;
// width: 15%;
// height: 100%;
width: 15%;
height: 61%;
display: flex;
flex-direction: column;
align-items: center;

24
src/router.js
View File

@ -29,5 +29,29 @@ export default new Router({
name: 'court',
component: () => import ('./views/court.vue'),
},
//智慧节能
{
path: '/energySaving',
name: 'energySaving',
component: () => import ('./views/energySaving.vue'),
},
//智慧安防
{
path: '/security',
name: 'security',
component: () => import ('./views/security.vue'),
},
//智慧运维
{
path: '/operationMaintenance',
name: 'operationMaintenance',
component: () => import ('./views/operationMaintenance.vue'),
},
//告警管理
{
path: '/alarm',
name: 'alarm',
component: () => import ('./views/alarm.vue'),
},
]
})

176
src/views/alarm.vue Normal file
View File

@ -0,0 +1,176 @@
<template>
<div class="courtMain">
<div class="left">
<div class="leftOne">
<div class="title">告警管理</div>
<div class="courtHouse">
</div>
</div>
<div class="leftTwo">
<div class="caseTitle">
</div>
<div id="caseEcharts"></div>
</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%;
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%;
position: relative;
#caseEcharts{
width: 100%;
height: calc(100% - 16%);
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;
}
.caseTitle{
width: 23%;
height: 10%;
background: url("../assets/images/faTingImg/anjianTitle.png") no-repeat;
background-size: 100% 100%;
color: #fff;
font-size: 0.8rem;
display: flex;
align-items: center;
padding-left: 5%;
box-sizing: border-box;
margin-top: 2%;
}
</style>

176
src/views/energySaving.vue Normal file
View File

@ -0,0 +1,176 @@
<template>
<div class="courtMain">
<div class="left">
<div class="leftOne">
<div class="title">智慧节能</div>
<div class="courtHouse">
</div>
</div>
<div class="leftTwo">
<div class="caseTitle">
</div>
<div id="caseEcharts"></div>
</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%;
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%;
position: relative;
#caseEcharts{
width: 100%;
height: calc(100% - 16%);
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;
}
.caseTitle{
width: 23%;
height: 10%;
background: url("../assets/images/faTingImg/anjianTitle.png") no-repeat;
background-size: 100% 100%;
color: #fff;
font-size: 0.8rem;
display: flex;
align-items: center;
padding-left: 5%;
box-sizing: border-box;
margin-top: 2%;
}
</style>

176
src/views/operationMaintenance.vue Normal file
View File

@ -0,0 +1,176 @@
<template>
<div class="courtMain">
<div class="left">
<div class="leftOne">
<div class="title">智慧运维</div>
<div class="courtHouse">
</div>
</div>
<div class="leftTwo">
<div class="caseTitle">
</div>
<div id="caseEcharts"></div>
</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%;
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%;
position: relative;
#caseEcharts{
width: 100%;
height: calc(100% - 16%);
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;
}
.caseTitle{
width: 23%;
height: 10%;
background: url("../assets/images/faTingImg/anjianTitle.png") no-repeat;
background-size: 100% 100%;
color: #fff;
font-size: 0.8rem;
display: flex;
align-items: center;
padding-left: 5%;
box-sizing: border-box;
margin-top: 2%;
}
</style>

176
src/views/security.vue Normal file
View File

@ -0,0 +1,176 @@
<template>
<div class="courtMain">
<div class="left">
<div class="leftOne">
<div class="title">智慧安防</div>
<div class="courtHouse">
</div>
</div>
<div class="leftTwo">
<div class="caseTitle">
</div>
<div id="caseEcharts"></div>
</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%;
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%;
position: relative;
#caseEcharts{
width: 100%;
height: calc(100% - 16%);
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;
}
.caseTitle{
width: 23%;
height: 10%;
background: url("../assets/images/faTingImg/anjianTitle.png") no-repeat;
background-size: 100% 100%;
color: #fff;
font-size: 0.8rem;
display: flex;
align-items: center;
padding-left: 5%;
box-sizing: border-box;
margin-top: 2%;
}
</style>