感知检测大屏画面
parent
ac1b579916
commit
15162c2752
Binary file not shown.
|
After Width: | Height: | Size: 352 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 272 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 265 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 601 B |
Binary file not shown.
|
After Width: | Height: | Size: 2.4 KiB |
|
|
@ -2,6 +2,23 @@
|
|||
<div class="header">
|
||||
<span class="title">应急融合感知监测平台</span>
|
||||
<span class="title-shadow">应急融合感知监测平台</span>
|
||||
<div class="left-content">
|
||||
<div class="address">
|
||||
<div class="address-icon"></div>
|
||||
<div class="address-value">临沂</div>
|
||||
</div>
|
||||
<div class="notify">
|
||||
<div class="notify-icon"></div>
|
||||
<div class="notify-value">12</div>
|
||||
<div class="notify-span">系统内容通知</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right-content">
|
||||
<div class="date-span">{{ date }}</div>
|
||||
<div class="week-span">{{ weekDays[new Date().getDay()] }}</div>
|
||||
<div class="weather-div"></div>
|
||||
<div class="temperature-div">14℃</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
|
|
@ -9,10 +26,19 @@ export default {
|
|||
name:'',
|
||||
data() {
|
||||
return {
|
||||
weekDays: ['星期天', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'],
|
||||
date: '',
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
},
|
||||
mounted() {
|
||||
const now = new Date();
|
||||
const year = now.getFullYear();
|
||||
const month = now.getMonth() + 1;
|
||||
const day = now.getDate();
|
||||
this.date = `${year}-${month}-${day}`
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
|
|
@ -49,5 +75,105 @@ export default {
|
|||
line-height: 45px;
|
||||
z-index: 1;
|
||||
}
|
||||
.left-content{
|
||||
position: absolute;
|
||||
top: 14px;
|
||||
left: 114px;
|
||||
width: 221px;
|
||||
height: 14px;
|
||||
display: flex;
|
||||
.address{
|
||||
display: flex;
|
||||
margin-right: 37px;
|
||||
.address-icon{
|
||||
width: 12px;
|
||||
height: 14px;
|
||||
background-image: url('/bigScreen/address_icon.png');
|
||||
background-size: 100% 100%;
|
||||
margin-right: 12px;
|
||||
}
|
||||
.address-value{
|
||||
font-family: Adobe Heiti Std;
|
||||
font-weight: normal;
|
||||
font-size: 14px;
|
||||
color: #FFFFFF;
|
||||
line-height: 13px;
|
||||
font-style: italic;
|
||||
line-height: 14px;
|
||||
}
|
||||
}
|
||||
.notify{
|
||||
display: flex;
|
||||
.notify-icon{
|
||||
width: 12px;
|
||||
height: 14px;
|
||||
background-image: url('/bigScreen/notify_icon.png');
|
||||
background-size: 100% 100%;
|
||||
margin-right: 6px;
|
||||
}
|
||||
.notify-value{
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
background: linear-gradient(45deg, #FF6767, #FF3434);
|
||||
border-radius: 50%;
|
||||
font-family: DINPro;
|
||||
font-weight: 400;
|
||||
font-size: 11px;
|
||||
color: #FFFFFF;
|
||||
line-height: 16px;
|
||||
margin-right: 4px;
|
||||
}
|
||||
.notify-span{
|
||||
font-family: MF;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
color: #FFFFFF;
|
||||
line-height: 13px;
|
||||
font-style: italic;
|
||||
}
|
||||
}
|
||||
}
|
||||
.right-content{
|
||||
position: absolute;
|
||||
top: 7px;
|
||||
right: 113px;
|
||||
width: 283px;
|
||||
height: 31px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.date-span{
|
||||
font-family: DINPro;
|
||||
font-weight: bold;
|
||||
font-size: 18px;
|
||||
color: #FFFFFF;
|
||||
line-height: 14px;
|
||||
font-style: italic;
|
||||
margin-right: 18px;
|
||||
}
|
||||
.week-span{
|
||||
font-family: AlimamaShuHeiTi;
|
||||
font-weight: bold;
|
||||
font-size: 14px;
|
||||
color: #FFFFFF;
|
||||
line-height: 14px;
|
||||
font-style: italic;
|
||||
margin-right: 46px;
|
||||
}
|
||||
.weather-div{
|
||||
width: 34px;
|
||||
height: 31px;
|
||||
background-image: url('/bigScreen/weather.png');
|
||||
background-size: 100% 100%;
|
||||
margin-right: 5px;
|
||||
}
|
||||
.temperature-div{
|
||||
font-family: DINPro;
|
||||
font-weight: bold;
|
||||
font-size: 14px;
|
||||
color: #FFFFFF;
|
||||
line-height: 13px;
|
||||
font-style: italic;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,212 @@
|
|||
<template>
|
||||
<div class="info-modal">
|
||||
<div class="button-div">
|
||||
<div :class="`button-item ${infoButtonSelect == '遥感卫星'? 'button-item-select': ''}`" @click="infoButtonSelect = '遥感卫星'">遥感卫星</div>
|
||||
<div :class="`button-item ${infoButtonSelect == '视频监控'? 'button-item-select': ''}`" @click="infoButtonSelect = '视频监控'">视频监控</div>
|
||||
<div :class="`button-item ${infoButtonSelect == '无人机'? 'button-item-select': ''}`" @click="infoButtonSelect = '无人机'">无人机</div>
|
||||
<div :class="`button-item ${infoButtonSelect == '物联设备'? 'button-item-select': ''}`" @click="infoButtonSelect = '物联设备'">物联设备</div>
|
||||
<div :class="`button-item ${infoButtonSelect == '移动终端'? 'button-item-select' : ''}`" @click="infoButtonSelect = '移动终端'">移动终端</div>
|
||||
<div :class="`button-item ${infoButtonSelect == '拍照上传'? 'button-item-select': ''}`" @click="infoButtonSelect = '拍照上传'">拍照上传</div>
|
||||
</div>
|
||||
<div class="close-button"></div>
|
||||
<div class="info-title">火情预警信息</div>
|
||||
<div class="show-image">
|
||||
<div class="prev-button" @click="prevImage"></div>
|
||||
<div class="image-div">
|
||||
<el-carousel ref="carousel" indicator-position="outside" height="170px" arrow="never" :autoplay="false">
|
||||
<el-carousel-item v-for="item in 4" :key="item">
|
||||
<h3>{{ item }}</h3>
|
||||
</el-carousel-item>
|
||||
</el-carousel>
|
||||
</div>
|
||||
<div class="next-button" @click="nextImage"></div>
|
||||
</div>
|
||||
<div class="time-div">
|
||||
<div class="info-title-mark"></div>
|
||||
<div class="time-span">预警时间：</div>
|
||||
<div class="time-value">2024-12-30 11:05:26</div>
|
||||
</div>
|
||||
<div class="address-div">
|
||||
<div class="info-title-mark"></div>
|
||||
<div class="address-span">预警位置：</div>
|
||||
<div class="address-value">费县马庄镇牛田村村委内可见光</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name:'',
|
||||
data() {
|
||||
return {
|
||||
infoButtonSelect: '无人机'
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
prevImage(){
|
||||
this.$refs.carousel.prev()
|
||||
},
|
||||
nextImage(){
|
||||
this.$refs.carousel.next()
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.info-modal{
|
||||
position: absolute;
|
||||
top: 157px;
|
||||
right: 494px;
|
||||
width: 369px;
|
||||
min-height: 514px;
|
||||
background-image: url('/bigScreen/info_background.png');
|
||||
background-size: 100% 100%;
|
||||
padding-top: 39px;
|
||||
.button-div{
|
||||
position: absolute;
|
||||
top: 30px;
|
||||
left: -32px;
|
||||
width: 35px;
|
||||
.button-item{
|
||||
width: 35px;
|
||||
height: 76px;
|
||||
background-image: url('/bigScreen/info_button_backgorund.png');
|
||||
background-size: 100% 100%;
|
||||
margin-bottom: 3px;
|
||||
writing-mode: tb-rl;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-family: Microsoft YaHei;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
color: #FFFFFF;
|
||||
line-height: 16px;
|
||||
text-shadow: 0px 1px 3px rgba(0,0,0,0.41);
|
||||
opacity: 0.8;
|
||||
letter-spacing: 1px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.button-item-select{
|
||||
background-image: url('/bigScreen/info_button_select_backgorund.png');
|
||||
}
|
||||
}
|
||||
.close-button{
|
||||
position: absolute;
|
||||
top: 41px;
|
||||
right: 23px;
|
||||
width: 21px;
|
||||
height: 21px;
|
||||
background-image: url('/bigScreen/info_close_button.png');
|
||||
background-size: 100% 100%;
|
||||
cursor: pointer;
|
||||
}
|
||||
.info-title{
|
||||
width: 310px;
|
||||
padding-left: 30px;
|
||||
font-family: Microsoft YaHei;
|
||||
font-weight: 400;
|
||||
font-size: 24px;
|
||||
color: #FFFFFF;
|
||||
text-shadow: 0px 1px 3px rgba(0,0,0,0.41);
|
||||
line-height: 25px;
|
||||
overflow: hidden;
|
||||
text-overflow:ellipsis;
|
||||
white-space: nowrap;
|
||||
margin-bottom: 22px;
|
||||
}
|
||||
.show-image{
|
||||
height: 185px;
|
||||
padding: 0px 11px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 40px;
|
||||
.prev-button{
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
background-image: url('/bigScreen/prev_button_background.png');
|
||||
background-size: 100% 100%;
|
||||
cursor: pointer;
|
||||
}
|
||||
.image-div{
|
||||
width: 292px;
|
||||
height: 185px;
|
||||
:deep(.el-carousel__indicators--outside button){
|
||||
background-color: #038E90;
|
||||
}
|
||||
:deep(.el-carousel__button){
|
||||
width: 17px;
|
||||
height: 4px;
|
||||
}
|
||||
:deep(.el-carousel__indicator--horizontal){
|
||||
padding: 8px 4px;
|
||||
}
|
||||
}
|
||||
.next-button{
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
background-image: url('/bigScreen/next_button_background.png');
|
||||
background-size: 100% 100%;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
.time-div{
|
||||
padding-left: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 22px;
|
||||
.info-title-mark{
|
||||
width: 2px;
|
||||
height: 16px;
|
||||
background: #038E90;
|
||||
margin-right: 9px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.time-span{
|
||||
font-family: Microsoft YaHei;
|
||||
font-weight: 400;
|
||||
font-size: 17px;
|
||||
color: #FFFFFF;
|
||||
text-shadow: 0px 1px 3px rgba(0,0,0,0.41);
|
||||
line-height: 17px;
|
||||
}
|
||||
.time-value {
|
||||
font-family: Microsoft YaHei;
|
||||
font-weight: 400;
|
||||
font-size: 17px;
|
||||
color: #FFFFFF;
|
||||
text-shadow: 0px 1px 3px rgba(0,0,0,0.41);
|
||||
line-height: 17px;
|
||||
}
|
||||
}
|
||||
.address-div{
|
||||
padding-left: 20px;
|
||||
display: flex;
|
||||
margin-bottom: 22px;
|
||||
.info-title-mark{
|
||||
width: 2px;
|
||||
height: 16px;
|
||||
background: #038E90;
|
||||
margin-right: 9px;
|
||||
flex-shrink: 0;
|
||||
margin-top: 2px;
|
||||
}
|
||||
.address-span{
|
||||
font-family: Microsoft YaHei;
|
||||
font-weight: 400;
|
||||
font-size: 17px;
|
||||
color: #FFFFFF;
|
||||
text-shadow: 0px 1px 3px rgba(0,0,0,0.41);
|
||||
line-height: 17px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.address-value {
|
||||
font-family: Microsoft YaHei;
|
||||
font-weight: 400;
|
||||
font-size: 17px;
|
||||
color: #FFFFFF;
|
||||
text-shadow: 0px 1px 3px rgba(0,0,0,0.41);
|
||||
line-height: 17px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -3,6 +3,16 @@
|
|||
<div class="subtitle">
|
||||
<span class="subtitle-span">监测资源</span>
|
||||
</div>
|
||||
<div class="drop-down-div">
|
||||
<div class="drop-item" style="padding-left: 17px; padding-right: 13px;">
|
||||
<span class="drop-span">请选择</span>
|
||||
<div class="drop-down-icon"></div>
|
||||
</div>
|
||||
<div class="drop-item" style="padding-left: 20px; padding-right: 19px;">
|
||||
<span class="drop-span">全部</span>
|
||||
<div class="drop-down-icon"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="button-div">
|
||||
<div :class="`button-item ${monitorSelect == '遥感卫星'? 'button-item-select': ''}`" @click="monitorSelect = '遥感卫星'">遥感卫星</div>
|
||||
<div :class="`button-item ${monitorSelect == '视频监控'? 'button-item-select': ''}`" @click="monitorSelect = '视频监控'">视频监控</div>
|
||||
|
|
@ -53,6 +63,38 @@ export default {
|
|||
padding-top: 62px;
|
||||
padding-left: 13px;
|
||||
padding-right: 14px;
|
||||
.drop-down-div{
|
||||
position: absolute;
|
||||
top: 6px;
|
||||
right: 10px;
|
||||
width: 168px;
|
||||
height: 23px;
|
||||
display: flex;
|
||||
.drop-item{
|
||||
width: 84px;
|
||||
height: 23px;
|
||||
background-image: url('/bigScreen/drop_down_item_background.png');
|
||||
background-size: 100% 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
cursor: pointer;
|
||||
.drop-span{
|
||||
font-family: Microsoft YaHei;
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
color: #FFFFFF;
|
||||
text-shadow: 0px 1px 3px rgba(0,0,0,0.41);
|
||||
line-height: 12px;
|
||||
}
|
||||
// .drop-down-icon{
|
||||
// width: 7px;
|
||||
// height: 5px;
|
||||
// background-image: url('/bigScreen/drop_down_icon.png');
|
||||
// background-size: 100% 100%;
|
||||
// }
|
||||
}
|
||||
}
|
||||
.button-div{
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,68 @@
|
|||
<template>
|
||||
<div class="search-div">
|
||||
<div class="search-input-div">
|
||||
<el-input v-model="searchValue" placeholder="请输入地名或经纬度（经纬度以逗号隔开)"></el-input>
|
||||
</div>
|
||||
<div class="search-button">
|
||||
<div class="search-icon"></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name:'',
|
||||
data() {
|
||||
return {
|
||||
searchValue: ''
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.search-div{
|
||||
position: absolute;
|
||||
top: 131px;
|
||||
left: 561px;
|
||||
width: 340px;
|
||||
height: 36px;
|
||||
display: flex;
|
||||
.search-input-div{
|
||||
width: 309px;
|
||||
height: 36px;
|
||||
background-image: url('/bigScreen/search_background.png');
|
||||
background-size: 100% 100%;
|
||||
:deep(.el-input__inner::placeholder){
|
||||
color: #038E90;
|
||||
}
|
||||
:deep( input ){
|
||||
background: none;
|
||||
border: 0px;
|
||||
height: 36px;
|
||||
line-height: 36px;
|
||||
font-family: Microsoft YaHei;
|
||||
font-weight: 400;
|
||||
font-size: 13px;
|
||||
color: #038E90;
|
||||
}
|
||||
|
||||
}
|
||||
.search-button{
|
||||
width: 62px;
|
||||
height: 36px;
|
||||
background: #038E90;
|
||||
border-radius: 0px 18px 18px 0px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
.search-icon{
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
background-image: url('/bigScreen/search_icon.png');
|
||||
transform: translate(-3px);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -13,6 +13,8 @@
|
|||
<Monitor />
|
||||
<ResponseResource />
|
||||
</div>
|
||||
<InfoModal />
|
||||
<SearchComponent />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -22,9 +24,11 @@ import Person from './Person/index.vue'
|
|||
import Monitor from './Monitor/index.vue'
|
||||
import ResponseResource from './ResponseResource/index.vue'
|
||||
import Header from './Header/index.vue'
|
||||
import InfoModal from './InfoModal/index.vue'
|
||||
import SearchComponent from './SearchComponent/index.vue'
|
||||
export default {
|
||||
name: "bigScreen",
|
||||
components: { Forewarning, Person, Monitor, ResponseResource, Header },
|
||||
components: { Forewarning, Person, Monitor, ResponseResource, Header, InfoModal, SearchComponent },
|
||||
data() {
|
||||
return {
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in New Issue