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

455
src/views/alarm.vue
View File

@ -2,20 +2,89 @@
<div class="courtMain">
<div class="left">
<div class="leftOne">
<div class="title">告警管理</div>
<div class="title">预计统计列表 一级</div>
<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 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 id="caseEcharts"></div>
</div>
</div>
<div class="leftThree"></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>
<div class="right"></div>
</div>
</template>
@ -24,6 +93,175 @@ export default {
name: "court",
data() {
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: [
{
name: "空闲中",
@ -61,9 +299,11 @@ export default {
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;
@ -72,59 +312,125 @@ export default {
background-size: 100% 100%;
.leftOne {
width: 100%;
height: 25%;
height: 40%;
.title {
width: 100%;
height: 14%;
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: calc(100% - 30%);
width: 100%;
display: flex;
height: 95%;
width: 100%;
display: block;
flex-wrap: nowrap;
justify-content: space-around;
align-items: center;
.courtData{
overflow-y: auto;
&::-webkit-scrollbar {
width: 0;
}
.warnListContent {
height: 32%;
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-direction: column;
flex-wrap: nowrap;
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%;
justify-content: flex-start;
line-height: 2;
.warnArrayBox{
margin-left: 3%;
span{
margin:0.5rem;
}
.spancolor{
color: rgb(218, 25, 25);
}
}
}
}
}
}
}
.leftTwo {
width: 100%;
height: 35%;
position: relative;
height: 51%;
// 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{
width: 100%;
height: calc(100% - 16%);
@ -146,11 +452,9 @@ export default {
flex-wrap: wrap;
background: url(../assets/images/leftKuang.png) no-repeat;
background-size: 100% 100%;
}
}
.title {
.title {
width: 100%;
height: 30%;
height: 5%;
background: url("../assets/images/title.png") no-repeat;
background-size: 100% 100%;
color: #fff;
@ -160,6 +464,53 @@ export default {
padding-left: 12%;
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{
width: 23%;
height: 10%;