Compare commits
3 Commits
guomingxin
...
master
| Author | SHA1 | Date |
|---|---|---|
独树的风
|
1b2a8b4530 | 10 months ago |
|
独树的风
|
0c6c9b0c01 | 10 months ago |
|
独树的风
|
bf1be358e4 | 1 year ago |
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 33 KiB |
|
After Width: | Height: | Size: 11 MiB |
|
After Width: | Height: | Size: 23 KiB |
|
After Width: | Height: | Size: 3.1 KiB |
|
After Width: | Height: | Size: 212 KiB |
|
After Width: | Height: | Size: 3.6 KiB |
|
After Width: | Height: | Size: 261 KiB |
|
After Width: | Height: | Size: 3.6 KiB |
|
After Width: | Height: | Size: 213 KiB |
|
After Width: | Height: | Size: 1.7 KiB |
|
After Width: | Height: | Size: 402 KiB |
|
After Width: | Height: | Size: 1.2 MiB |
|
After Width: | Height: | Size: 1.1 MiB |
|
After Width: | Height: | Size: 1001 KiB |
|
After Width: | Height: | Size: 1008 KiB |
|
After Width: | Height: | Size: 33 KiB |
|
After Width: | Height: | Size: 29 KiB |
|
After Width: | Height: | Size: 26 KiB |
|
After Width: | Height: | Size: 31 KiB |
|
After Width: | Height: | Size: 29 KiB |
|
After Width: | Height: | Size: 29 KiB |
|
After Width: | Height: | Size: 29 KiB |
|
After Width: | Height: | Size: 29 KiB |
|
After Width: | Height: | Size: 413 KiB |
|
After Width: | Height: | Size: 28 KiB |
|
After Width: | Height: | Size: 188 KiB |
|
After Width: | Height: | Size: 8.9 KiB |
|
After Width: | Height: | Size: 225 KiB |
|
After Width: | Height: | Size: 20 KiB |
|
After Width: | Height: | Size: 154 KiB |
|
After Width: | Height: | Size: 9.7 KiB |
@ -0,0 +1,51 @@
|
||||
<template>
|
||||
<div class="build_body">
|
||||
<!-- 头部 -->
|
||||
<div class="build_title">
|
||||
<div class="header_icon"></div>
|
||||
<div class="title_text">楼栋信息</div>
|
||||
</div>
|
||||
<!-- 模块内容 -->
|
||||
<div class="build_box">
|
||||
<div class="build_box_left"></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.build_body {
|
||||
width: 20vw;
|
||||
height: 15vh;
|
||||
background-color: #fff;
|
||||
.build_title {
|
||||
width: 20vw;
|
||||
height: 3.5vh;
|
||||
display: flex;
|
||||
.header_icon {
|
||||
width: 1vw;
|
||||
height: 2vh;
|
||||
background-color: pink;
|
||||
}
|
||||
.title_text {
|
||||
width: 20vw;
|
||||
height: 3.5vh;
|
||||
color: antiquewhite;
|
||||
margin-left: 2vw;
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
line-height: 3.5vh;
|
||||
text-shadow: 0px 0px 10px #0b4672;
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
}
|
||||
.build_box {
|
||||
width: 20vw;
|
||||
height: 11.5vh;
|
||||
background-color: orange;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,553 @@
|
||||
<template>
|
||||
<div class="add" v-if="show">
|
||||
<!-- 户室信息 -->
|
||||
<div class="X2" @click="deleteinfo"></div>
|
||||
<div class="build_title">
|
||||
<div class="header_icon"></div>
|
||||
<div class="title_text">户室信息</div>
|
||||
</div>
|
||||
<!-- 室内图片 -->
|
||||
<div class="build_picture">
|
||||
<div class="picture_left"></div>
|
||||
<div class="picture_right">
|
||||
<div class="build_box_for">
|
||||
<div class="left">
|
||||
<div class="build_box_left">地址</div>
|
||||
<div class="build_box_left">所在网格</div>
|
||||
<div class="build_box_left">房屋类型</div>
|
||||
<div class="build_box_left">是否出租</div>
|
||||
<div class="build_box_left">所在警务区</div>
|
||||
</div>
|
||||
<div class="right">
|
||||
<div
|
||||
class="build_box_right"
|
||||
:style="{ color: back_change() }"
|
||||
:title="roll_list.homeInfo.address"
|
||||
>
|
||||
{{ roll_list.homeInfo.address }}
|
||||
</div>
|
||||
<div class="build_box_right" :style="{ color: back_change() }">
|
||||
{{ houseValue.policeStationCode || '320924760101' }}
|
||||
</div>
|
||||
<div class="build_box_right" :style="{ color: back_change('1') }">
|
||||
{{ roll_list.homeInfo.type }}
|
||||
</div>
|
||||
<div class="build_box_right" :style="{ color: back_change('2') }">
|
||||
{{ roll_list.homeInfo.isRent }}
|
||||
</div>
|
||||
<div class="build_box_right" :style="{ color: back_change() }">
|
||||
{{ houseValue.policeDistrictCode || '320924760101' }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 房主信息 -->
|
||||
<div class="build_title">
|
||||
<div class="header_icon"></div>
|
||||
<div class="title_text">房主信息</div>
|
||||
</div>
|
||||
<!-- 照片信息 -->
|
||||
<div class="housepeople_info">
|
||||
<img
|
||||
v-if="roll_list.actualUserInfo?.userPic"
|
||||
class="housepeople_info_left"
|
||||
:src="baseUrl + roll_list.actualUserInfo.userPic"
|
||||
/>
|
||||
<img v-else class="housepeople_info_left" :src="img" />
|
||||
<div class="housepeople_info_right">
|
||||
<div class="info_right_for">
|
||||
<div class="for_left">姓名</div>
|
||||
<div class="for_right">
|
||||
{{ roll_list.actualUserInfo?.userName || '' }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="info_right_for">
|
||||
<div class="for_left">联系电话</div>
|
||||
<div class="for_right">
|
||||
{{ roll_list.actualUserInfo?.phone || '' }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="info_right_for">
|
||||
<div class="for_left">证件号码</div>
|
||||
<div
|
||||
class="for_right"
|
||||
@click="jumpRecord(roll_list.actualUserInfo?.idCard)"
|
||||
>
|
||||
{{ roll_list.actualUserInfo?.idCard || '' }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="info_right_for">
|
||||
<div class="for_left">户籍地址</div>
|
||||
<div class="for_right">
|
||||
{{ roll_list.actualUserInfo?.houseHoldAddress || '' }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 实有人口 重点人员 户在人不在 -->
|
||||
<div class="people_bottom">
|
||||
<div class="people1">
|
||||
<div class="dit"></div>
|
||||
<div class="people1_text">实有人口</div>
|
||||
<div class="people1_number">
|
||||
{{ roll_list.userInfos === null ? 0 : roll_list.userInfos.length }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="people1">
|
||||
<div class="dit"></div>
|
||||
<div class="people1_text">重点人员</div>
|
||||
<div class="people1_number">
|
||||
{{
|
||||
roll_list.impUserInfos === null ? 0 : roll_list.impUserInfos.length
|
||||
}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="people1">
|
||||
<div class="dit"></div>
|
||||
<div class="people1_text">户在人不在</div>
|
||||
<div class="people1_number">
|
||||
{{
|
||||
roll_list.householdInUserInfos === null
|
||||
? 0
|
||||
: roll_list.householdInUserInfos.length
|
||||
}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 滚动 -->
|
||||
<div class="roll_body" v-if="roll_list.userInfos !== null">
|
||||
<ul class="marquee-list" :class="{ 'animate-up': animateUp }">
|
||||
<li
|
||||
v-for="item in roll_list.userInfos"
|
||||
:key="item.id"
|
||||
@mouseenter="stop()"
|
||||
@mouseleave="start()"
|
||||
>
|
||||
<div class="roll_item_left">
|
||||
<div class="roll_item_pic">
|
||||
<img
|
||||
class="peopleImg"
|
||||
:src="item.userPic ? `${baseUrl + item.userPic}` : img"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="roll_item_right">
|
||||
<div class="person_type one_type" v-if="item.actualUserTypeCn">
|
||||
{{ item.actualUserTypeCn }}
|
||||
</div>
|
||||
<!-- 信息展示 -->
|
||||
<div class="right_text">
|
||||
<div class="right_text_item">人员姓名:</div>
|
||||
<div class="right_text_item">联系电话:</div>
|
||||
<div class="right_text_item">证件号码:</div>
|
||||
<div class="right_text_item">户籍地址:</div>
|
||||
</div>
|
||||
<div class="right_value">
|
||||
<div class="right_value_item">{{ item.userName }}</div>
|
||||
<div class="right_value_item">{{ item.phone }}</div>
|
||||
<div class="right_value_item" @click="jumpRecord(item.idCard)">
|
||||
{{ item.idCard }}
|
||||
</div>
|
||||
<div class="right_value_item">
|
||||
{{ item.houseHoldAddress }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="roll_body" v-else>
|
||||
<ul class="marquee-list">
|
||||
<li>
|
||||
<div class="roll_item_left">
|
||||
<div class="roll_item_pic">
|
||||
<img class="peopleImg" :src="img" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="roll_item_right">
|
||||
<div class="right_text">
|
||||
<div class="right_text_item">人员姓名:</div>
|
||||
<div class="right_text_item">联系电话:</div>
|
||||
<div class="right_text_item">证件号码:</div>
|
||||
<div class="right_text_item">户籍地址:</div>
|
||||
</div>
|
||||
<div class="right_value">
|
||||
<div class="right_value_item"></div>
|
||||
<div class="right_value_item"></div>
|
||||
<div class="right_value_item"></div>
|
||||
<div class="right_value_item"></div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { jumpSyetem } from '@/utils/jumpSystem'
|
||||
|
||||
export default {
|
||||
name: 'FloorInform',
|
||||
props: {
|
||||
houseValue: {
|
||||
type: Object
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
show: false,
|
||||
animateUp: false,
|
||||
baseUrl: 'http://50.146.63.224:8118',
|
||||
roll_list: {},
|
||||
img: require('@/assets/picture/icon_householder.png'),
|
||||
timer: null,
|
||||
unit: null
|
||||
}
|
||||
},
|
||||
created() {},
|
||||
mounted() {},
|
||||
methods: {
|
||||
open(val, roomInfo) {
|
||||
console.log(val, roomInfo, '户室组件接收的数据')
|
||||
this.unit = val
|
||||
this.roll_list = roomInfo
|
||||
this.show = true
|
||||
if (roomInfo.userInfos && roomInfo.userInfos.length > 2) {
|
||||
this.clearTimer()
|
||||
this.scrollAnimate()
|
||||
}
|
||||
},
|
||||
back_change(type) {
|
||||
switch (type) {
|
||||
case '1':
|
||||
return `#37FDC7`
|
||||
case '2':
|
||||
return `#00F5FF`
|
||||
}
|
||||
},
|
||||
scrollAnimate() {
|
||||
console.log(
|
||||
this.roll_list.userInfos !== null && this.roll_list.userInfos.length > 2
|
||||
)
|
||||
if (
|
||||
this.roll_list.userInfos !== null &&
|
||||
this.roll_list.userInfos.length > 2
|
||||
) {
|
||||
this.timer = setInterval(() => {
|
||||
this.animateUp = true
|
||||
setTimeout(() => {
|
||||
this.roll_list.userInfos.push(this.roll_list.userInfos[0])
|
||||
this.roll_list.userInfos.shift()
|
||||
this.animateUp = false
|
||||
}, 500)
|
||||
}, 4000)
|
||||
} else {
|
||||
this.timer = null
|
||||
}
|
||||
},
|
||||
clearTimer() {
|
||||
if (this.timer) {
|
||||
clearInterval(this.timer)
|
||||
this.timer = null
|
||||
}
|
||||
},
|
||||
deleteinfo() {
|
||||
this.show = false
|
||||
clearInterval(this.timer)
|
||||
},
|
||||
stop() {
|
||||
clearInterval(this.timer)
|
||||
},
|
||||
start() {
|
||||
if (this.roll_list.userInfos && this.roll_list.userInfos.length > 2) {
|
||||
this.scrollAnimate()
|
||||
}
|
||||
},
|
||||
jumpRecord(card) {
|
||||
jumpSyetem(card)
|
||||
}
|
||||
},
|
||||
beforeDestroy() {
|
||||
this.clearTimer()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.add {
|
||||
position: absolute;
|
||||
top: 0vh;
|
||||
left: 20vw;
|
||||
width: 20vw;
|
||||
height: 72vh;
|
||||
background: $popupBack url('@/assets/house-hza/bg7.png') no-repeat;
|
||||
background-size: 100% 100%;
|
||||
padding-left: 1vw;
|
||||
|
||||
.X2 {
|
||||
width: 0.8vw;
|
||||
height: 1.8vh;
|
||||
position: absolute;
|
||||
top: 0.5vh;
|
||||
right: 0.5vw;
|
||||
background-image: url('@/assets/house-hza/bg9.png');
|
||||
background-size: 100% 100%;
|
||||
&:hover {
|
||||
background-color: #07e2d0;
|
||||
}
|
||||
}
|
||||
.build_title {
|
||||
width: 18vw;
|
||||
height: 3.5vh;
|
||||
display: flex;
|
||||
.header_icon {
|
||||
width: 1vw;
|
||||
height: 2vh;
|
||||
margin-top: 1.7vh;
|
||||
background-image: url('@/assets/house-hza/bg17.png');
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.title_text {
|
||||
width: 20vw;
|
||||
height: 3.5vh;
|
||||
color: antiquewhite;
|
||||
margin-left: 1vw;
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
line-height: 3.5vh;
|
||||
text-shadow: 0px 0px 10px #0b4672;
|
||||
letter-spacing: 2px;
|
||||
margin-top: 1vh;
|
||||
}
|
||||
}
|
||||
.build_picture {
|
||||
width: 18vw;
|
||||
height: 18vh;
|
||||
margin-top: 1vh;
|
||||
display: flex;
|
||||
margin-bottom: 1vh;
|
||||
.picture_left {
|
||||
width: 6vw;
|
||||
height: 18vh;
|
||||
background: url('@/assets/icon_house_slices/icon_house@2x.png') no-repeat;
|
||||
background-size: 100% 100%;
|
||||
text-align: center;
|
||||
}
|
||||
.picture_right {
|
||||
width: 11.5vw;
|
||||
height: 18vh;
|
||||
margin-left: 0.5vw;
|
||||
|
||||
.build_box_for {
|
||||
display: flex;
|
||||
width: 11vw;
|
||||
.left {
|
||||
width: 4vw;
|
||||
height: 18vh;
|
||||
}
|
||||
.build_box_left {
|
||||
width: 4vw;
|
||||
height: 3.2vh;
|
||||
background-color: #04548a;
|
||||
padding-left: 0.5vw;
|
||||
color: antiquewhite;
|
||||
padding-top: 0.5vh;
|
||||
font-size: 12px;
|
||||
}
|
||||
.build_box_right {
|
||||
width: 7.5vw;
|
||||
height: 3.2vh;
|
||||
font-size: 0.8rem;
|
||||
background-image: url('@/assets/house-hza/bg10.png');
|
||||
background-size: 100% 100%;
|
||||
padding-top: 0.5vh;
|
||||
padding-left: 0.5vw;
|
||||
color: antiquewhite;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.housepeople_info {
|
||||
width: 18vw;
|
||||
height: 13vh;
|
||||
background-color: #05385d;
|
||||
margin-top: 1vh;
|
||||
padding-top: 1vh;
|
||||
padding-left: 1vh;
|
||||
display: flex;
|
||||
.housepeople_info_left {
|
||||
width: 4vw;
|
||||
height: 11vh;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
.housepeople_info_right {
|
||||
width: 13vw;
|
||||
height: 11vh;
|
||||
padding-left: 0.5vw;
|
||||
}
|
||||
.info_right_for {
|
||||
height: 2vh;
|
||||
width: 12.5vw;
|
||||
display: flex;
|
||||
margin-bottom: 1vh;
|
||||
.for_left {
|
||||
width: 3.5vw;
|
||||
height: 2vh;
|
||||
color: #ecf4f9;
|
||||
}
|
||||
.for_right {
|
||||
height: 2vh;
|
||||
width: 8vw;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
.people_bottom {
|
||||
width: 18vw;
|
||||
height: 4vh;
|
||||
margin-left: 0;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-top: 1vh;
|
||||
.people1 {
|
||||
width: 5.5vw;
|
||||
height: 4vh;
|
||||
background-image: url('@/assets/house-hza/bg-6.png');
|
||||
background-size: 100% 100%;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
.people1_text {
|
||||
font-size: 0.6vw;
|
||||
margin-top: 1vh;
|
||||
margin-left: 0.2vw;
|
||||
color: #fff;
|
||||
}
|
||||
.people1_number {
|
||||
margin-left: 0.8vw;
|
||||
margin-top: 0.5vh;
|
||||
font-size: 1.3rem;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.dit {
|
||||
width: 0.3vw;
|
||||
height: 0.6vh;
|
||||
border-radius: 50%;
|
||||
background-color: #00f5ff;
|
||||
margin-top: 0.8vw;
|
||||
margin-left: 0.5vw;
|
||||
}
|
||||
}
|
||||
}
|
||||
.roll_body {
|
||||
width: 18vw;
|
||||
height: 24vh;
|
||||
overflow: hidden;
|
||||
margin-top: 1vh;
|
||||
.marquee-list {
|
||||
padding: 0;
|
||||
width: 18vw;
|
||||
height: 24vh;
|
||||
|
||||
li {
|
||||
width: 100%;
|
||||
background: url('@/assets/house-hza/bg-6.png') no-repeat;
|
||||
background-size: 100% 100%;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
list-style: none;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-bottom: 0.5vh;
|
||||
.roll_item_left {
|
||||
width: 5vw;
|
||||
height: 11vh;
|
||||
margin-left: 0.5vw;
|
||||
.roll_item_pic {
|
||||
width: 4vw;
|
||||
height: 9vh;
|
||||
margin-top: 1vh;
|
||||
.peopleImg {
|
||||
width: 4vw;
|
||||
height: 9vh;
|
||||
}
|
||||
}
|
||||
}
|
||||
.roll_item_right {
|
||||
width: 14vw;
|
||||
height: 9vh;
|
||||
position: relative;
|
||||
display: flex;
|
||||
.person_type {
|
||||
position: absolute;
|
||||
width: 3.5vw;
|
||||
height: 2vh;
|
||||
top: 0px;
|
||||
right: 0px;
|
||||
color: #061122;
|
||||
text-align: center;
|
||||
line-height: 2vh;
|
||||
font-size: 0.6vw;
|
||||
}
|
||||
.one_type {
|
||||
background: #ffc426;
|
||||
}
|
||||
.two_type {
|
||||
background: #00f5ff;
|
||||
}
|
||||
.three_type {
|
||||
background: #a357ff;
|
||||
}
|
||||
.right_text {
|
||||
width: 5vw;
|
||||
height: 9vh;
|
||||
.right_text_item {
|
||||
width: 5vw;
|
||||
height: 2.6vh;
|
||||
color: #ecf4f9;
|
||||
font-size: 10px;
|
||||
}
|
||||
}
|
||||
.right_value {
|
||||
width: 8vw;
|
||||
height: 10vh;
|
||||
.right_value_item {
|
||||
width: 8vw;
|
||||
height: 2.6vh;
|
||||
color: #edf1f7;
|
||||
font-size: 12px;
|
||||
text-align: left;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
&:nth-child(3) {
|
||||
color: #00f5ff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.animate-up {
|
||||
transition: all 0.8s ease-in-out;
|
||||
transform: translateY(-20vh);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,183 +0,0 @@
|
||||
<template>
|
||||
<div class="key_person">
|
||||
<el-carousel
|
||||
direction="vertical"
|
||||
:autoplay="true"
|
||||
:interval="4000"
|
||||
indicator-position="none"
|
||||
class="key_person_group"
|
||||
>
|
||||
<el-carousel-item
|
||||
class="key_person_item"
|
||||
v-for="(item, index) in groupItems"
|
||||
:key="index"
|
||||
>
|
||||
<div class="key_person_box" v-for="(group, index) in item" :key="index">
|
||||
<div class="key_person_box_left">
|
||||
<div class="key_person_box_left_picture"></div>
|
||||
<div class="key_person_box_left_text">人员追踪</div>
|
||||
</div>
|
||||
<div class="key_person_box_right">
|
||||
<div class="key_person_box_right_label">
|
||||
<div class="label_item">人员姓名 :</div>
|
||||
<div class="label_item">证件号码 :</div>
|
||||
<div class="label_item">抓拍时间 :</div>
|
||||
<div class="label_item">滞留时间 :</div>
|
||||
<div class="label_item">抓拍地点 :</div>
|
||||
</div>
|
||||
<div class="key_person_box_right_name">
|
||||
<div class="name_item">张三</div>
|
||||
<div class="name_item">321287197606038965</div>
|
||||
<div class="name_item">2023-11-15 14:20:16</div>
|
||||
<div class="name_item">4个小时</div>
|
||||
<div class="name_item">江苏省射阳县海河镇革新村二组113号</div>
|
||||
</div>
|
||||
<!-- 人员状态 -->
|
||||
<div
|
||||
class="people_status"
|
||||
:style="{ backgroundColor: group.color }"
|
||||
>
|
||||
{{ group.status }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-carousel-item>
|
||||
</el-carousel>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'PersonScroll',
|
||||
props: {
|
||||
// * index 传递过来的数据
|
||||
item: {
|
||||
type: Object
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
items: [
|
||||
{ name: 'Box 1', status: '涉稳人员', color: '#ffc426' },
|
||||
{ name: 'Box 1', status: '列管人员', color: '#00f5ff' },
|
||||
{ name: 'Box 1', status: '涉恐人员', color: '#a357ff' },
|
||||
{ name: 'Box 1', status: '涉稳人员', color: '#ffc426' },
|
||||
{ name: 'Box 1', status: '列管人员', color: '#00f5ff' },
|
||||
{ name: 'Box 1', status: '涉恐人员', color: '#a357ff' }
|
||||
]
|
||||
}
|
||||
},
|
||||
mounted() {},
|
||||
methods: {},
|
||||
computed: {
|
||||
groupItems() {
|
||||
// * 声明空数组
|
||||
let groups = []
|
||||
// * 循环时 items 的每一项 +3
|
||||
for (let i = 0; i < this.items.length; i += 3) {
|
||||
groups.push(this.items.slice(i, i + 3))
|
||||
}
|
||||
console.log(groups)
|
||||
return groups
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.key_person {
|
||||
width: 20vw;
|
||||
height: 38vh;
|
||||
|
||||
.key_person_group {
|
||||
margin: 0;
|
||||
height: 36vh;
|
||||
|
||||
.key_person_item {
|
||||
.key_person_box {
|
||||
margin-top: 1vh;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
height: 11vh;
|
||||
background-image: url('@/assets/picture/bg_people_nor.png');
|
||||
|
||||
&:hover {
|
||||
background-image: url('@/assets/picture/bg_people_hover.png');
|
||||
}
|
||||
|
||||
.key_person_box_left {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
width: 4vw;
|
||||
|
||||
.key_person_box_left_picture {
|
||||
flex: 1;
|
||||
height: 8vh;
|
||||
// background-color: #fcbebe;
|
||||
background-image: url('@/assets/picture/icon_householder.png');
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% auto;
|
||||
}
|
||||
|
||||
.key_person_box_left_text {
|
||||
color: #ecf4f9;
|
||||
text-align: center;
|
||||
font-size: 0.8rem;
|
||||
font-weight: normal;
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
background-color: #005ea1;
|
||||
box-shadow: inset 0 0 9 0 #00a2ff;
|
||||
border: 1px solid;
|
||||
border-image: linear-gradient(
|
||||
360deg,
|
||||
rgba(62, 215, 255, 1),
|
||||
rgba(0, 204, 255, 1)
|
||||
)
|
||||
1 1;
|
||||
}
|
||||
}
|
||||
|
||||
.key_person_box_right {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: 16vw;
|
||||
font-size: 0.8rem;
|
||||
position: relative;
|
||||
|
||||
.key_person_box_right_label {
|
||||
width: 4vw;
|
||||
color: rgba($color: #ecf4f9, $alpha: 0.6);
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.key_person_box_right_name {
|
||||
width: 12vw;
|
||||
color: #edf1f7;
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.people_status {
|
||||
width: 3.5vw;
|
||||
height: 2vh;
|
||||
background-color: #ffc426;
|
||||
border-radius: 2px 0 2px 2px;
|
||||
color: #061122;
|
||||
text-align: center;
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
font-size: 0.8rem;
|
||||
font-weight: 400;
|
||||
line-height: 2vh;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,113 @@
|
||||
<template>
|
||||
<div class="detail">
|
||||
<div class="contents">
|
||||
<div class="fy-center row">
|
||||
<div class="label fy-center">人员姓名</div>
|
||||
<div class="content line-1">{{ data.impUserName }}</div>
|
||||
</div>
|
||||
|
||||
<div class="fy-center row">
|
||||
<div class="label fy-center">证件号码</div>
|
||||
<div class="content line-1">{{ data.impUserIdCard }}</div>
|
||||
</div>
|
||||
<div class="fy-center row">
|
||||
<div class="label fy-center">人员类型</div>
|
||||
<div class="content line-1">{{ data.impUserSubTypeCn }}</div>
|
||||
</div>
|
||||
<div class="fy-center row">
|
||||
<div class="label fy-center">定位时间</div>
|
||||
<div class="content line-1">
|
||||
{{ data.kv.定位时间 || data.warningTime }}
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="fy-center row">
|
||||
<div class="label fy-center">经过位置</div>
|
||||
<div class="content line-1">{{ data}}</div>
|
||||
</div> -->
|
||||
<div class="fy-center row">
|
||||
<div class="label fy-center">活动信息</div>
|
||||
<div class="content line-1">{{ data.activityMessage }}</div>
|
||||
</div>
|
||||
<div class="fy-center row">
|
||||
<div class="label fy-center warning">异常信息</div>
|
||||
<div class="content line-1 warning">{{ data.kv.异常信息 }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
data: Object
|
||||
},
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
created() {},
|
||||
methods: {}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.detail {
|
||||
position: relative;
|
||||
color: white;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
.contents {
|
||||
width: 100%;
|
||||
.row {
|
||||
margin-top: 0.4vh;
|
||||
display: flex;
|
||||
.grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-gap: 5px;
|
||||
}
|
||||
|
||||
.label {
|
||||
width: 6vw;
|
||||
height: 44px;
|
||||
background-color: #093979;
|
||||
margin-right: 1px;
|
||||
padding-left: 12px;
|
||||
}
|
||||
.content {
|
||||
padding-left: 12px;
|
||||
height: 44px;
|
||||
line-height: 44px;
|
||||
background-color: rgba(9, 57, 121, 0.3);
|
||||
&.even {
|
||||
background-color: rgba(9, 57, 121, 0.5);
|
||||
}
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
&:last-child .warning {
|
||||
height: auto;
|
||||
}
|
||||
&:last-child .line-1 {
|
||||
overflow: auto;
|
||||
text-overflow: clip;
|
||||
white-space: normal;
|
||||
flex: 1;
|
||||
width: 1px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// .h-144 {
|
||||
// height: 14.4vh;
|
||||
// }
|
||||
// .w-530 {
|
||||
// width: 530px;
|
||||
// }
|
||||
// .ml-12 {
|
||||
// margin-left: 0.6vw;
|
||||
// }
|
||||
// .overflow-auto {
|
||||
// // overflow: auto;
|
||||
// }
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,151 @@
|
||||
<!-- 感知设备搜索及复选图层 -->
|
||||
<template>
|
||||
<div class="search_check">
|
||||
<!-- 右侧区域搜索框 -->
|
||||
<div class="search">
|
||||
<input placeholder="请输入摄像头名称" class="search_input" />
|
||||
<button class="search_button">
|
||||
<i class="el-icon-search"></i>
|
||||
</button>
|
||||
</div>
|
||||
<!-- 沿海视频切换框 -->
|
||||
<div class="check">
|
||||
<div class="check_coverage">
|
||||
<div class="check_title">图层</div>
|
||||
</div>
|
||||
<div class="check_coveragebottom">
|
||||
<el-checkbox class="checkbox" size="mini">全选</el-checkbox>
|
||||
<el-checkbox size="mini" class="checkbox">
|
||||
<div class="check_label">
|
||||
<div class="check_label_text">沿海视频</div>
|
||||
<div class="check_label_count">(446)</div>
|
||||
</div>
|
||||
</el-checkbox>
|
||||
<el-checkbox size="mini" class="checkbox">
|
||||
<div class="check_label">
|
||||
<div class="check_label_text">非沿海视频</div>
|
||||
<div class="check_label_count">(779)</div>
|
||||
</div>
|
||||
</el-checkbox>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'MapSearch',
|
||||
data() {
|
||||
return {}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.search_check {
|
||||
width: 16vw;
|
||||
height: 27vh;
|
||||
// position: absolute;
|
||||
// right: 23vw;
|
||||
position: relative;
|
||||
// background: #02274e;
|
||||
z-index: 2;
|
||||
|
||||
.search {
|
||||
display: flex;
|
||||
justify-content: start;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
background: #fff;
|
||||
|
||||
.search_input {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 14vw;
|
||||
border: 1px solid #00f5ff;
|
||||
background-color: #02274e;
|
||||
color: #ecf4f9;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.search_input::placeholder {
|
||||
position: relative;
|
||||
left: 1vw;
|
||||
font-size: 0.8rem;
|
||||
font-family: '苹方-简';
|
||||
color: #ecf4f9;
|
||||
}
|
||||
|
||||
.search_button {
|
||||
width: 2.5vw;
|
||||
height: 4vh;
|
||||
border: 0;
|
||||
background-color: #03d6df;
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
background-color: #02c7ce;
|
||||
}
|
||||
|
||||
.el-icon-search {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.check {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-direction: column;
|
||||
width: 13vw;
|
||||
height: 18vh;
|
||||
position: absolute;
|
||||
top: 7vh;
|
||||
right: 0;
|
||||
background-image: url('@/assets/picture/bg_info.png');
|
||||
background-size: 100% auto;
|
||||
background-repeat: no-repeat;
|
||||
|
||||
.check_coverage {
|
||||
height: 3vh;
|
||||
}
|
||||
|
||||
.check_title {
|
||||
margin-left: 1vw;
|
||||
color: #ecf4f9;
|
||||
font-size: 0.8rem;
|
||||
line-height: 3vh;
|
||||
font-family: '苹方-简 中黑体';
|
||||
}
|
||||
|
||||
.check_coveragebottom {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
height: 15vh;
|
||||
|
||||
.el-checkbox {
|
||||
margin-left: 1vw;
|
||||
color: #ecf4f9;
|
||||
|
||||
.el-checkbox__label {
|
||||
font-size: 0.8rem;
|
||||
font-family: '苹方-简 中黑体';
|
||||
}
|
||||
|
||||
.check_label {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 10vw;
|
||||
|
||||
.check_label_count {
|
||||
width: 3vw;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,63 +1,63 @@
|
||||
// TODO 封装监控点聚合图层
|
||||
import { getDeviceLatlng } from '@/utils/latlng'
|
||||
const device = getDeviceLatlng()
|
||||
const devices = device.map((item) => ({
|
||||
type: 'Feature',
|
||||
geometry: {
|
||||
type: 'Point',
|
||||
coordinates: [item.Longitude, item.Latitude]
|
||||
},
|
||||
properties: {
|
||||
channel: item.Channel,
|
||||
title: item.Name,
|
||||
deviceName: item.Name
|
||||
}
|
||||
}))
|
||||
// * 监控点聚合图层数据源
|
||||
const devicePointData = {
|
||||
type: 'FeatureCollection',
|
||||
features: devices
|
||||
}
|
||||
export const addDeviceLayers = (minemap) => {
|
||||
// TODO 监控设备非聚合图层
|
||||
minemap.addLayer({
|
||||
id: 'device-points',
|
||||
type: 'symbol',
|
||||
// * 图层数据源 - 可以更改数据
|
||||
source: 'devicePoint',
|
||||
// * 图层过滤器
|
||||
filter: ['!has', 'point_count'],
|
||||
// * 图层布局样式
|
||||
layout: {
|
||||
'icon-image': 'device_image',
|
||||
'icon-size': 0.5,
|
||||
'text-field': ['get', 'title'],
|
||||
'text-offset': [0, 0.6],
|
||||
'text-anchor': 'top',
|
||||
'text-size': 10,
|
||||
'text-allow-overlap': true //图标覆盖文字允许压盖
|
||||
}
|
||||
})
|
||||
}
|
||||
// // TODO 封装监控点聚合图层
|
||||
// import { getDeviceLatlng } from '@/utils/latlng'
|
||||
// const device = getDeviceLatlng()
|
||||
// const devices = device.map((item) => ({
|
||||
// type: 'Feature',
|
||||
// geometry: {
|
||||
// type: 'Point',
|
||||
// coordinates: [item.Longitude, item.Latitude]
|
||||
// },
|
||||
// properties: {
|
||||
// channel: item.Channel,
|
||||
// title: item.Name,
|
||||
// deviceName: item.Name
|
||||
// }
|
||||
// }))
|
||||
// // * 监控点聚合图层数据源
|
||||
// const devicePointData = {
|
||||
// type: 'FeatureCollection',
|
||||
// features: devices
|
||||
// }
|
||||
// export const addDeviceLayers = (minemap) => {
|
||||
// // TODO 监控设备非聚合图层
|
||||
// minemap.addLayer({
|
||||
// id: 'device-points',
|
||||
// type: 'symbol',
|
||||
// // * 图层数据源 - 可以更改数据
|
||||
// source: 'devicePoint',
|
||||
// // * 图层过滤器
|
||||
// filter: ['!has', 'point_count'],
|
||||
// // * 图层布局样式
|
||||
// layout: {
|
||||
// 'icon-image': 'device_image',
|
||||
// 'icon-size': 0.5,
|
||||
// 'text-field': ['get', 'title'],
|
||||
// 'text-offset': [0, 0.6],
|
||||
// 'text-anchor': 'top',
|
||||
// 'text-size': 10,
|
||||
// 'text-allow-overlap': true //图标覆盖文字允许压盖
|
||||
// }
|
||||
// })
|
||||
// }
|
||||
|
||||
export const addDeviceImages = (minemap) => {
|
||||
// TODO 自定义监控设备图片
|
||||
minemap.loadImage(
|
||||
require('@/assets/background-img/icon_company_blue.png'),
|
||||
(error, image) => {
|
||||
if (error) throw error
|
||||
minemap.addImage('device_image', image)
|
||||
}
|
||||
)
|
||||
}
|
||||
// export const addDeviceImages = (minemap) => {
|
||||
// // TODO 自定义监控设备图片
|
||||
// minemap.loadImage(
|
||||
// require('@/assets/background-img/icon_company_blue.png'),
|
||||
// (error, image) => {
|
||||
// if (error) throw error
|
||||
// minemap.addImage('device_image', image)
|
||||
// }
|
||||
// )
|
||||
// }
|
||||
|
||||
export const addSources = (minemap) => {
|
||||
// * 监控数据源
|
||||
minemap.addSource('devicePoint', {
|
||||
type: 'geojson',
|
||||
data: devicePointData,
|
||||
cluster: true,
|
||||
clusterMaxZoom: 15 /* 最大聚合层级 */,
|
||||
clusterRadius: 50 /* 聚合半径 */
|
||||
})
|
||||
}
|
||||
// export const addSources = (minemap) => {
|
||||
// // * 监控数据源
|
||||
// minemap.addSource('devicePoint', {
|
||||
// type: 'geojson',
|
||||
// data: devicePointData,
|
||||
// cluster: true,
|
||||
// clusterMaxZoom: 15 /* 最大聚合层级 */,
|
||||
// clusterRadius: 50 /* 聚合半径 */
|
||||
// })
|
||||
// }
|
||||
|
||||
@ -1,69 +1,69 @@
|
||||
import { getDeviceLatlng } from '@/utils/latlng'
|
||||
// import { getDeviceLatlng } from '@/utils/latlng'
|
||||
|
||||
// * 获取本地存储中的监控经纬度信息
|
||||
const deviceData = getDeviceLatlng()
|
||||
// TODO 筛选监控经纬度
|
||||
const device = deviceData.map((item) => ({
|
||||
type: 'Feature',
|
||||
geometry: {
|
||||
type: 'Point',
|
||||
coordinates: [item.Longitude, item.Latitude]
|
||||
},
|
||||
properties: {
|
||||
channel: item.Channel,
|
||||
// title: item.Name.toString()
|
||||
// title: item.Name,
|
||||
deviceName: item.Name
|
||||
}
|
||||
}))
|
||||
// TODO 监控点聚合图层数据源
|
||||
const devicePointData = {
|
||||
type: 'FeatureCollection',
|
||||
features: device
|
||||
}
|
||||
// // * 获取本地存储中的监控经纬度信息
|
||||
// const deviceData = getDeviceLatlng()
|
||||
// // TODO 筛选监控经纬度
|
||||
// const device = deviceData.map((item) => ({
|
||||
// type: 'Feature',
|
||||
// geometry: {
|
||||
// type: 'Point',
|
||||
// coordinates: [item.Longitude, item.Latitude]
|
||||
// },
|
||||
// properties: {
|
||||
// channel: item.Channel,
|
||||
// // title: item.Name.toString()
|
||||
// // title: item.Name,
|
||||
// deviceName: item.Name
|
||||
// }
|
||||
// }))
|
||||
// // TODO 监控点聚合图层数据源
|
||||
// const devicePointData = {
|
||||
// type: 'FeatureCollection',
|
||||
// features: device
|
||||
// }
|
||||
|
||||
export const addImages = (minemap) => {
|
||||
// TODO 自定义监控设备图片
|
||||
minemap.loadImage(
|
||||
require('@/assets/picture/point_sea_video.png'),
|
||||
(error, image) => {
|
||||
if (error) throw error
|
||||
console.log(image, '图片')
|
||||
minemap.addImage('device_image', image)
|
||||
}
|
||||
)
|
||||
}
|
||||
// export const addImages = (minemap) => {
|
||||
// // TODO 自定义监控设备图片
|
||||
// minemap.loadImage(
|
||||
// require('@/assets/picture/point_sea_video.png'),
|
||||
// (error, image) => {
|
||||
// if (error) throw error
|
||||
// console.log(image, '图片')
|
||||
// minemap.addImage('device_image', image)
|
||||
// }
|
||||
// )
|
||||
// }
|
||||
|
||||
export const addSources = (minemap) => {
|
||||
// * 监控数据源
|
||||
minemap.addSource('device-point', {
|
||||
type: 'geojson',
|
||||
data: devicePointData,
|
||||
cluster: true,
|
||||
clusterMaxZoom: 15 /* 最大聚合层级 */,
|
||||
clusterRadius: 50 /* 聚合半径 */
|
||||
})
|
||||
}
|
||||
// export const addSources = (minemap) => {
|
||||
// // * 监控数据源
|
||||
// minemap.addSource('device-point', {
|
||||
// type: 'geojson',
|
||||
// data: devicePointData,
|
||||
// cluster: true,
|
||||
// clusterMaxZoom: 15 /* 最大聚合层级 */,
|
||||
// clusterRadius: 50 /* 聚合半径 */
|
||||
// })
|
||||
// }
|
||||
|
||||
export const addLayers = (minemap) => {
|
||||
// TODO 监控设备非聚合图层
|
||||
minemap.addLayer({
|
||||
id: 'device-points',
|
||||
type: 'symbol',
|
||||
// * 图层数据源 - 可以更改数据
|
||||
source: 'device-point',
|
||||
// * 图层过滤器
|
||||
filter: ['!has', 'point_count'],
|
||||
// * 图层布局样式
|
||||
layout: {
|
||||
'icon-image': 'device_image',
|
||||
'icon-size': 0.5,
|
||||
'text-field': ['get', 'title'],
|
||||
'text-offset': [0, 0.6],
|
||||
'text-anchor': 'top',
|
||||
'text-size': 10,
|
||||
// 'icon-allow-overlap': true, //图标允许压盖
|
||||
'text-allow-overlap': true //图标覆盖文字允许压盖
|
||||
}
|
||||
})
|
||||
}
|
||||
// export const addLayers = (minemap) => {
|
||||
// // TODO 监控设备非聚合图层
|
||||
// minemap.addLayer({
|
||||
// id: 'device-points',
|
||||
// type: 'symbol',
|
||||
// // * 图层数据源 - 可以更改数据
|
||||
// source: 'device-point',
|
||||
// // * 图层过滤器
|
||||
// filter: ['!has', 'point_count'],
|
||||
// // * 图层布局样式
|
||||
// layout: {
|
||||
// 'icon-image': 'device_image',
|
||||
// 'icon-size': 0.5,
|
||||
// 'text-field': ['get', 'title'],
|
||||
// 'text-offset': [0, 0.6],
|
||||
// 'text-anchor': 'top',
|
||||
// 'text-size': 10,
|
||||
// // 'icon-allow-overlap': true, //图标允许压盖
|
||||
// 'text-allow-overlap': true //图标覆盖文字允许压盖
|
||||
// }
|
||||
// })
|
||||
// }
|
||||
|
||||
Loading…
Reference in new issue