Skip to content

Z
zhengyuan-danger-chemistry-manage
Commit b0b020f9 authored by yaqizhang's avatar yaqizhang
Browse files
Options

人工智能分析系统

parent 8a2bc2a5
Hide whitespace changes
Inline Side-by-side
Showing with 382 additions and 2 deletions
danger-manage-web/src/views/entrance/index.vue
View file @ b0b020f9
......@@ -190,7 +190,7 @@
<script>
export default {
name: "App",
name: "",
data() {
return {
tableData: [
......@@ -218,7 +218,7 @@
<style lang="scss" scoped>
.entrance{
width: 85%;
height: calc(100vh - 50px);;
height: calc(100vh - 50px);
padding: 30px;
display: flex;
justify-content: space-between;
......
danger-manage-web/src/views/intellect/index.vue 0 → 100644
View file @ b0b020f9
<template>
<div style="width: 100vw;height: 100%vh;background: rgb(247, 247, 247);">
<div class="intellect">
<div class="intellect-top">
<div class="in-top-l">
<span>视频设备</span>
<div class="top-l">
<div class="topl active">
<span>出入口相机</span>
<img src="../../assets/img/live-fill.png" alt="" >
</div>
<div class="topl active">
<span>储罐区摄像机</span>
<img src="../../assets/img/live-fill.png" alt="" >
</div>
<div class="topl active">
<span>化工罐区摄像机</span>
<img src="../../assets/img/live-fill.png" alt="" >
</div>
<div class="topl active">
<span>危险作业区摄像机</span>
<img src="../../assets/img/live-fill.png" alt="" >
</div>
<div class="topl active">
<span>库区摄像机</span>
<img src="../../assets/img/live-fill.png" alt="" >
</div>
<div class="topl active">
<span>危险作业区摄像机</span>
<img src="../../assets/img/live-fill.png" alt="" >
</div>
<div class="topl active">
<span>中控值班室摄像机</span>
<img src="../../assets/img/live-fill.png" alt="" >
</div>
<div class="topl active">
<span>中控重点工位摄像机</span>
<img src="../../assets/img/live-fill.png" alt="" >
</div>
<div class="topl active">
<span>巡检点摄像机</span>
<img src="../../assets/img/live-fill.png" alt="" >
</div>
</div>
</div>
<div class="in-top-c">
<div style="height: 5%;padding: 6px;">
<el-dropdown trigger="click">
<span class="el-dropdown-link">
<img src="@/assets/img/spilt.png" alt="spilt" style="width: 15px;height: 15px">
分屏设置
</span>
<el-dropdown-menu slot="dropdown" style="width:100px">
<el-dropdown-item command="1">1x1 </el-dropdown-item>
<el-dropdown-item command="4">2x2</el-dropdown-item>
<el-dropdown-item command="9">3x3</el-dropdown-item>
<el-dropdown-item command="16">4x4</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
<div style="height: 95%;width: 100%;" ref="playVideo" class="video">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
<div class="in-top-r">
<div class="top-r-t">
<div class="ent-ru-in">
<div class="ru-in-l">
<img src="../../assets/img/zhan.png" alt="">
</div>
<div class="ru-in-r">
<span>最新预警</span>
<div>2022-10-22 20:20:20</div>
</div>
</div>
<div class="rt-b">
<span> 预警：</span>
<div>
储罐区有火焰从原料罐冒出，目前有溢出风险
</div>
</div>
<div class="intellect-btn">
<el-button class="but">查看实时视频</el-button>
</div>
</div>
<div class="top-r-b">
<div class="r-b-l">
<img src="../../assets/img/up.png" alt="" width="50px">
<div>预警统计</div>
</div>
<div class="ent-ruchang">
<div class="ent-ru-in">
<div class="ru-in-l">
<img src="../../assets/img/down.png" alt="">
</div>
<div class="ru-in-r">
<span>日累积预警</span>
<div>0</div>
</div>
</div>
<div class="ent-ru-in">
<div class="ru-in-l">
<img src="../../assets/img/down1.png" alt="">
</div>
<div class="ru-in-r">
<span>月累积预警</span>
<div>0</div>
</div>
</div>
<div class="ent-ru-in">
<div class="ru-in-l">
<img src="../../assets/img/down2.png" alt="">
</div>
<div class="ru-in-r">
<span>年累积预警</span>
<div>0</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="intellect-bottom">
<p>园区内车辆</p>
<div class="ent-yuanqu">
<el-table
:data="tableData"
style="width: 100%">
<el-table-column
prop="date"
label="预警信息">
</el-table-column>
<el-table-column
prop="name"
label="预警类型">
</el-table-column>
<el-table-column
prop="address1"
label="预警开始时间">
</el-table-column>
<el-table-column
prop="address2"
label="预警结束时间">
</el-table-column>
<el-table-column
prop="end"
label="结果">
</el-table-column>
<el-table-column
prop="video"
label="视频">
<template slot-scope="scope">
<img class="demo" :src="require(`../../assets/img/live-fill.png`)" />
</template>
</el-table-column>
</el-table>
<el-pagination
layout="prev, pager, next"
:total="1000">
</el-pagination>
</div>
</div>
</div>
</div>
</template>
<script>
import livefill from "../../assets/img/live-fill.png";
export default {
data() {
return {
tableData: [
{ date: '储罐区有火焰产生',name: '火焰',address1: '2022-10-15 12:00:00',address2: '2022-10-15 12:00:00',end: '未处理',video:''},
{ date: '进入人员未佩戴安全头盔',name: '未佩戴安全头盔',address1: '2022-10-15 12:00:00',address2: '2022-10-15 12:00:00',end: '未处理',video:''},
{ date: '储罐区有设备预警',name: '设备预警',address1: '2022-10-15 12:00:00',address2: '2022-10-15 12:00:00',end: '未处理',video:''},
{ date: '储罐区有设备预警',name: '设备预警',address1: '2022-10-15 12:00:00',address2: '2022-10-15 12:00:00',end: '未处理',video:''},
]
}
},
computed:{
},
};
</script>
<style lang="scss" scoped>
.intellect{
width: calc(100vw - 280px);
height: calc(100vh - 50px);
padding: 30px;
.intellect-top{
width: 100%;
height: 60%;
display: flex;
justify-content: space-between;
.in-top-l{
width: 15%;
height: 100%;
background-color: #fff;
border-radius: 15px;
padding: 20px;
.top-l{
width: 100%;
height: 95%;
margin-top: 10px;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: space-around;
.topl{
width: 100%;
height: 40px;
line-height: 30px;
display: flex;
justify-content: space-between;
padding: 5px 10px;
border: 1px solid rgb(235, 232, 232);
border-radius: 10px;
background-color: #fff;
font-size: 14px;
img{
width: 20px;
height: 20px;
margin-top: 5px;
}
}
}
}
.in-top-c{
width: 62%;
height: 100%;
.video{
display: flex;
justify-content: space-between;
flex-direction: column;
flex-wrap: wrap;
div{
width: 48%;
height: 48%;
background-color: rgb(69, 70, 70);
}
}
}
.in-top-r{
width: 20%;
height: 100%;
.top-r-t{
width: 100%;
height: 36%;
border-radius: 15px;
background-color: #fff;
padding: 10px 20px 0 20px;
.ent-ru-in{
width: 100%;
/* height: 30%; */
display: flex;
.ru-in-l{
width: 45px;
height: 45px;
text-align: center;
margin-top: 10px;
img{
width: 100%;
}
}
.ru-in-r{
padding: 10px 0 0 10px;
span{
font-size: 15px;
}
div{
font-size: 12px;
margin-top: 7px;
}
}
}
.rt-b{
margin-left: 50px;
display: flex;
font-size: 13px;
margin-top: 10px;
div{
width: 75%;
height: auto;
}
}
.intellect-btn{
width: 100%;
text-align: center;
margin-top: 15px;
.but{
border-radius: 10px;
background-color: #51be5f;
color: #fff;
}
}
}
.top-r-b{
width: 100%;
height: 60%;
margin-top: 6%;
background-color: #fff;
border-radius: 15px;
padding: 20px 20px 0 20px;
.r-b-l{
width: 100%;
height: 50px;
display: flex;
div{
width: 150px;
height: 50px;
line-height: 50px;
margin-left: 10px;
font-size: 16px;
}
img{
width: 45px;
height: 45px;
}
}
.ent-ruchang{
width: 100%;
height: 80%;
padding-top: 10px;
.ent-ru-in{
width: 70%;
height: 30%;
display: flex;
margin-top: 2%;
margin-left: 20%;
.ru-in-l{
width: 50px;
height: 50px;
line-height: 55px;
text-align: center;
margin-top: 10px;
img{
width: 100%;
}
}
.ru-in-r{
padding: 7px 0 0 10px;
span{
font-size: 13px;
}
div{
font-size: 22px;
margin-top: 7px;
}
}
}
}
}
}
}
.intellect-bottom{
width: 100%;
height: 38%;
margin-top: 1.5%;
background-color: #fff;
border-radius: 15px;
padding: 10px 20px 20px 20px;
.ent-yuanqu{
width: 100%;
height: 95%;
text-align: center;
}
}
}
::v-deep .el-table th > .cell {
text-align: center;
}
::v-deep .el-table tr td .cell {
text-align: center;
}
</style>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment