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

Merge branch 'master' of https://git.lgzn.space/chengdandan/fayuanjiangbei

This commit is contained in:
lixiaobang 2023-04-13 17:48:04 +08:00
parent 83173910ab 4cc6812dc4
commit 03934bdc69
2 changed files with 406 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/App.vue
View File

@ -12,7 +12,7 @@
style="width: 3%; height: 37%" style="width: 3%; height: 37%"
/> />
</div> </div>
<div class="storey"> <!-- <div class="storey">
<div <div
class="floor" class="floor"
v-for="(item, index) in floorList" v-for="(item, index) in floorList"
@ -22,7 +22,7 @@
> >
<div>{{ item.name }}</div> <div>{{ item.name }}</div>
</div> </div>
</div> </div> -->
</div> </div>
</div> </div>
<div class="menu"> <div class="menu">
@ -222,7 +222,7 @@ import {getData} from './api/index.js'
background: rgba(1, 1, 7, 1); background: rgba(1, 1, 7, 1);
// overflow: hidden; // overflow: hidden;
.header { .header {
height: 15%; height: 11%;
width: 100%; width: 100%;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;

445
src/views/alarm.vue
View File

@ -2,20 +2,89 @@
<div class="courtMain"> <div class="courtMain">
<div class="left"> <div class="left">
<div class="leftOne"> <div class="leftOne">
<div class="title">告警管理</div> <div class="title">预计统计列表 一级</div>
<div class="courtHouse"> <div class="courtHouse">
<div
class="warnListContent"
v-for="(item, index) in warnList1"
:key="index"
>
<div class="warnArray">
<span>{{ item.id }}</span>
<img :src="item.icon" style="width: 7%; margin-left: 3%" />
<div class="warnArrayBox">
<div style="margin-top: 2%;float: left;">
报警时间:<span style="margin:0 0.5rem;">{{ item.time }}</span>
</div>
<div
style="margin-top: 2%;">
报警原因:<span class="spancolor">{{'「'+ item.cause+'」' }}</span><span>{{item.content}}</span>
</div>
<div style="margin-top: 2%;float: left;">
风险等级:<span class="spancolor">{{ '「'+ item.risk +'」'}}</span>
</div>
</div>
</div>
</div>
</div> </div>
</div> </div>
<div class="leftTwo"> <div class="leftTwo">
<div class="caseTitle"> <div class="title">预计统计列表 二级</div>
<div class="courtHouse">
<div
class="warnListContent"
v-for="(item, index) in warnList2"
:key="index"
>
<div class="warnArray">
<span>{{ item.id }}</span>
<img :src="item.icon" style="width: 7%; margin-left: 3%" />
<div class="warnArrayBox">
<div style="margin-top: 2%;float: left;">
报警时间:<span style="margin:0 0.5rem;">{{ item.time }}</span>
</div>
<div
style="margin-top: 2%;">
报警原因:<span class="spancolor">{{'「'+ item.cause+'」' }}</span><span>{{item.content}}</span>
</div>
<div style="margin-top: 2%;float: left;">
风险等级:<span class="spancolor">{{ '「'+ item.risk +'」'}}</span>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- <div class="leftThree"></div> -->
</div>
<div class="right">
<div class="title">预计统计列表 三级</div>
<div class="courtHouse">
<div
class="warnListContent"
v-for="(item, index) in warnList3"
:key="index"
>
<div class="warnArray">
<span>{{ item.id }}</span>
<img :src="item.icon" style="width: 7%; margin-left: 3%" />
<div class="warnArrayBox">
<div style="margin-top: 2%;float: left;">
报警时间:<span style="margin:0 0.5rem;">{{ item.time }}</span>
</div>
<div
style="margin-top: 2%;">
报警原因:<span class="spancolor">{{'「'+ item.cause+'」' }}</span><span>{{item.content}}</span>
</div>
<div style="margin-top: 2%;float: left;">
风险等级:<span class="spancolor">{{ '「'+ item.risk +'」'}}</span>
</div>
</div>
</div>
</div> </div>
<div id="caseEcharts"></div>
</div> </div>
<div class="leftThree"></div>
</div> </div>
<div class="right"></div>
</div> </div>
</template> </template>
@ -24,6 +93,175 @@ export default {
name: "court", name: "court",
data() { data() {
return { return {
//报警数组 一级
warnList1: [
{
id: "1",
icon: require("../assets/images/warnRed.png"),
time: "2023年03月18日 15:26:08",
cause: "机房02机箱",
content:'发生事故',
risk: "一级",
},
{
id: "2",
icon: require("../assets/images/warnRed.png"),
time: "2023年03月18日 15:26:08",
cause: "机房02机箱",
content:'发生事故',
risk: "一级",
},
{
id: "3",
icon: require("../assets/images/warnRed.png"),
time: "2023年03月18日 15:26:08",
cause: "机房02机箱",
content:'发生事故',
risk: "一级",
},
{
id: "4",
icon: require("../assets/images/warnRed.png"),
time: "2023年03月18日 15:26:08",
cause: "机房02机箱",
content:'发生事故',
risk: "一级",
},
{
id: "5",
icon: require("../assets/images/warnRed.png"),
time: "2023年03月18日 15:26:08",
cause: "机房02机箱",
content:'发生事故',
risk: "一级",
},
{
id: "6",
icon: require("../assets/images/warnRed.png"),
time: "2023年03月18日 15:26:08",
cause: "机房02机箱",
content:'发生事故',
risk: "一级",
},
],
//报警数组 二级
warnList2: [
{
id: "1",
icon: require("../assets/images/warnOrange.png"),
time: "2023年03月18日 15:26:08",
cause: "机房02机箱",
content:'发生事故',
risk: "二级",
},
{
id: "2",
icon: require("../assets/images/warnOrange.png"),
time: "2023年03月18日 15:26:08",
cause: "机房02机箱",
content:'发生事故',
risk: "二级",
},
{
id: "3",
icon: require("../assets/images/warnOrange.png"),
time: "2023年03月18日 15:26:08",
cause: "机房02机箱",
content:'发生事故',
risk: "二级",
},
{
id: "4",
icon: require("../assets/images/warnOrange.png"),
time: "2023年03月18日 15:26:08",
cause: "机房02机箱",
content:'发生事故',
risk: "二级",
},
{
id: "5",
icon: require("../assets/images/warnOrange.png"),
time: "2023年03月18日 15:26:08",
cause: "机房02机箱",
content:'发生事故',
risk: "二级",
},
{
id: "6",
icon: require("../assets/images/warnOrange.png"),
time: "2023年03月18日 15:26:08",
cause: "机房02机箱",
content:'发生事故',
risk: "二级",
},
],
//报警数组 三级
warnList3: [
{
id: "1",
icon: require("../assets/images/warnBlue.png"),
time: "2023年03月18日 15:26:08",
cause: "机房02机箱",
content:'发生事故',
risk: "三级",
},
{
id: "2",
icon: require("../assets/images/warnBlue.png"),
time: "2023年03月18日 15:26:08",
cause: "机房02机箱",
content:'发生事故',
risk: "三级",
},
{
id: "3",
icon: require("../assets/images/warnBlue.png"),
time: "2023年03月18日 15:26:08",
cause: "机房02机箱",
content:'发生事故',
risk: "三级",
},
{
id: "4",
icon: require("../assets/images/warnBlue.png"),
time: "2023年03月18日 15:26:08",
cause: "机房02机箱",
content:'发生事故',
risk: "三级",
},
{
id: "5",
icon: require("../assets/images/warnBlue.png"),
time: "2023年03月18日 15:26:08",
cause: "机房02机箱",
content:'发生事故',
risk: "三级",
},
{
id: "6",
icon: require("../assets/images/warnBlue.png"),
time: "2023年03月18日 15:26:08",
cause: "机房02机箱",
content:'发生事故',
risk: "三级",
},
{
id: "7",
icon: require("../assets/images/warnBlue.png"),
time: "2023年03月18日 15:26:08",
cause: "机房02机箱",
content:'发生事故',
risk: "三级",
},
{
id: "8",
icon: require("../assets/images/warnBlue.png"),
time: "2023年03月18日 15:26:08",
cause: "机房02机箱",
content:'发生事故',
risk: "三级",
},
],
courtList: [ courtList: [
{ {
name: "空闲中", name: "空闲中",
@ -61,9 +299,11 @@ export default {
justify-content: space-between; justify-content: space-between;
padding: 0 0.3% 0 0.3%; padding: 0 0.3% 0 0.3%;
box-sizing: border-box; box-sizing: border-box;
.left { .left {
width: 25.5%; width: 25.5%;
height: 95%; height: 95%;
padding: 0.5% 0.3% 1% 0.3%; padding: 0.5% 0.3% 1% 0.3%;
box-sizing: border-box; box-sizing: border-box;
display: flex; display: flex;
@ -72,59 +312,125 @@ export default {
background-size: 100% 100%; background-size: 100% 100%;
.leftOne { .leftOne {
width: 100%; width: 100%;
height: 25%; height: 40%;
.courtHouse { .title {
height: calc(100% - 30%);
width: 100%; width: 100%;
height: 14%;
background: url("../assets/images/title.png") no-repeat;
background-size: 100% 100%;
color: #fff;
font-size: 0.7rem;
display: flex; display: flex;
align-items: center;
padding-left: 12%;
box-sizing: border-box;
}
.courtHouse {
height: 95%;
width: 100%;
display: block;
flex-wrap: nowrap; flex-wrap: nowrap;
justify-content: space-around; justify-content: space-around;
align-items: center; align-items: center;
.courtData{ overflow-y: auto;
display: flex; &::-webkit-scrollbar {
flex-direction: column; width: 0;
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 { .warnListContent {
background: url(../assets/images/redHouse.png) no-repeat; height: 32%;
background-size: 100% 100%; width: 95%;
color: #fff;
display: flex; display: flex;
flex-wrap: wrap;
align-items: center; align-items: center;
justify-content: center; padding-left: 3%;
margin-top: 10%; box-sizing: border-box;
border-bottom: 0.08rem solid #eee;
margin-left: 0.5rem;
.warnArray {
width: 100%;
display: flex;
flex-wrap: nowrap;
align-items: center;
justify-content: flex-start;
line-height: 2;
.warnArrayBox{
margin-left: 3%;
span{
margin:0.5rem;
} }
.yellowHouse { .spancolor{
background: url(../assets/images/yellowHouse.png) no-repeat; color: rgb(218, 25, 25);
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 { .leftTwo {
width: 100%; width: 100%;
height: 35%; height: 51%;
position: relative; // position: relative;
.title {
width: 100%;
height: 12%;
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;
}
.courtHouse {
height: 93%;
width: 100%;
display: block;
flex-wrap: nowrap;
justify-content: space-around;
align-items: center;
overflow-y: auto;
&::-webkit-scrollbar {
width: 0;
}
.warnListContent {
height: 28%;
width: 95%;
color: #fff;
display: flex;
flex-wrap: wrap;
align-items: center;
padding-left: 3%;
box-sizing: border-box;
border-bottom: 0.08rem solid #eee;
margin-left: 0.5rem;
.warnArray {
width: 100%;
display: flex;
flex-wrap: nowrap;
align-items: center;
justify-content: flex-start;
line-height: 2;
.warnArrayBox{
// display: flex;
// flex-direction: column;
// align-items: flex-start;
margin-left: 3%;
span{
margin:0.5rem;
}
.spancolor{
color: darkorange;
}
}
}
}
}
#caseEcharts{ #caseEcharts{
width: 100%; width: 100%;
height: calc(100% - 16%); height: calc(100% - 16%);
@ -146,11 +452,9 @@ export default {
flex-wrap: wrap; flex-wrap: wrap;
background: url(../assets/images/leftKuang.png) no-repeat; background: url(../assets/images/leftKuang.png) no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
}
}
.title { .title {
width: 100%; width: 100%;
height: 30%; height: 5%;
background: url("../assets/images/title.png") no-repeat; background: url("../assets/images/title.png") no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
color: #fff; color: #fff;
@ -160,6 +464,53 @@ export default {
padding-left: 12%; padding-left: 12%;
box-sizing: border-box; box-sizing: border-box;
} }
.courtHouse {
height: 95%;
width: 100%;
display: block;
flex-wrap: nowrap;
justify-content: space-around;
align-items: center;
overflow-y: auto;
&::-webkit-scrollbar {
width: 0;
}
.warnListContent {
height: 14%;
width: 95%;
color: #fff;
display: flex;
flex-wrap: wrap;
align-items: center;
padding-left: 3%;
box-sizing: border-box;
border-bottom: 0.08rem solid #eee;
margin-left: 0.5rem;
.warnArray {
width: 100%;
display: flex;
flex-wrap: nowrap;
align-items: center;
justify-content: flex-start;
line-height: 2;
.warnArrayBox{
// display: flex;
// flex-direction: column;
// align-items: flex-start;
margin-left: 3%;
span{
margin:0.5rem;
}
.spancolor{
color: deepskyblue;
}
}
}
}
}
}
.caseTitle{ .caseTitle{
width: 23%; width: 23%;
height: 10%; height: 10%;