独树的风
10 months ago
parent
b4334fb792
commit
ff5d23bd08
Binary file not shown.
|
Before Width: | Height: | Size: 3.8 KiB |
|
Before Width: | Height: | Size: 3.5 KiB |
|
Before Width: | Height: | Size: 3.4 KiB |
@ -1,58 +0,0 @@
|
|||||||
.box {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(3, 1fr);
|
|
||||||
gap: 5px;
|
|
||||||
width: 220px;
|
|
||||||
height: 100px;
|
|
||||||
background-color: #fff;
|
|
||||||
border-radius: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.button_plus,
|
|
||||||
.state {
|
|
||||||
margin-top: 5px;
|
|
||||||
margin-left: 5px;
|
|
||||||
width: 60px;
|
|
||||||
height: 30px;
|
|
||||||
background-color: #2e92f7;
|
|
||||||
border-radius: 5px;
|
|
||||||
border: none;
|
|
||||||
outline: none;
|
|
||||||
cursor: pointer;
|
|
||||||
font-size: 0.5rem;
|
|
||||||
line-height: 30px;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.button_plus:active {
|
|
||||||
transform: translateY(2px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.state {
|
|
||||||
width: 60px;
|
|
||||||
height: 30px;
|
|
||||||
border-radius: 5px;
|
|
||||||
color: #fff;
|
|
||||||
font-size: 0.1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.state_a {
|
|
||||||
background-color: #ff6600;
|
|
||||||
}
|
|
||||||
|
|
||||||
.state_b {
|
|
||||||
background-color: #188801;
|
|
||||||
}
|
|
||||||
|
|
||||||
.state_c {
|
|
||||||
background-color: #2278f8;
|
|
||||||
}
|
|
||||||
|
|
||||||
.state_d {
|
|
||||||
background-color: #f74242;
|
|
||||||
}
|
|
||||||
|
|
||||||
.plus {
|
|
||||||
font-size: 2rem;
|
|
||||||
color: #fff;
|
|
||||||
}
|
|
||||||
|
Before Width: | Height: | Size: 2.7 KiB After Width: | Height: | Size: 2.7 KiB |
@ -0,0 +1,13 @@
|
|||||||
|
<template>
|
||||||
|
<div class="login"></div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss"></style>
|
||||||
@ -0,0 +1,339 @@
|
|||||||
|
<!-- 通用抓拍 -->
|
||||||
|
<template>
|
||||||
|
<div class="capture">
|
||||||
|
<div class="capture_title">
|
||||||
|
<div class="capture_title_text">车辆抓拍</div>
|
||||||
|
</div>
|
||||||
|
<div class="capture_main">
|
||||||
|
<div class="person_roll">
|
||||||
|
<!-- 滚动区域 -->
|
||||||
|
<div class="roll_body">
|
||||||
|
<ul class="marquee-list" :class="{ 'animate-up': animateUp }">
|
||||||
|
<li v-for="(item, index) in roll_list" :key="index">
|
||||||
|
<div class="roll_item_left">
|
||||||
|
<div class="roll_item_pic"></div>
|
||||||
|
<div class="roll_item_btn">车辆追踪</div>
|
||||||
|
</div>
|
||||||
|
<div class="roll_item_right">
|
||||||
|
<!-- <div v-if="item.per_type == '1'" class="person_type one_type">
|
||||||
|
{{ item.type_text }}
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
v-else-if="item.per_type == '2'"
|
||||||
|
class="person_type two_type"
|
||||||
|
>
|
||||||
|
{{ item.type_text }}
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
v-else-if="item.per_type == '3'"
|
||||||
|
class="person_type three_type"
|
||||||
|
>
|
||||||
|
{{ item.type_text }}
|
||||||
|
</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 class="right_text_item">滞留时间</div>
|
||||||
|
<div class="right_text_item">抓拍地点</div>
|
||||||
|
</div>
|
||||||
|
<div class="right_value">
|
||||||
|
<div class="right_value_item">{{ item.person_name }}</div>
|
||||||
|
<div class="right_value_item">{{ item.id_card }}</div>
|
||||||
|
<div class="right_value_item" :title="item.car_code">
|
||||||
|
{{ item.car_code }}
|
||||||
|
</div>
|
||||||
|
<div class="right_value_item" :title="item.catch_time">
|
||||||
|
{{ item.catch_time }}
|
||||||
|
</div>
|
||||||
|
<div class="right_value_item" :title="item.state_time">
|
||||||
|
{{ item.state_time }}
|
||||||
|
</div>
|
||||||
|
<div class="right_value_item" :title="item.catch_place">
|
||||||
|
{{ item.catch_place }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'CarCatch',
|
||||||
|
props: {
|
||||||
|
item: {
|
||||||
|
type: Object
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
roll_list: [
|
||||||
|
{
|
||||||
|
text: '123',
|
||||||
|
per_type: '1',
|
||||||
|
// type_text: '在逃人员',
|
||||||
|
person_name: '周大山',
|
||||||
|
id_card: '321287197606038965',
|
||||||
|
car_code: '苏J40089',
|
||||||
|
catch_time: '2023-11-30 14:20:08',
|
||||||
|
state_time: '4个小时',
|
||||||
|
catch_place: '江苏省射阳县海河镇革新村二组113号'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: '1243',
|
||||||
|
per_type: '3',
|
||||||
|
// type_text: '涉恐人员',
|
||||||
|
person_name: '王富强',
|
||||||
|
id_card: '321287197606038965',
|
||||||
|
car_code: '苏J40089',
|
||||||
|
catch_time: '2023-11-30 14:20:08',
|
||||||
|
state_time: '4个小时',
|
||||||
|
catch_place: '江苏省射阳县海河镇革新村二组113号'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: '12323',
|
||||||
|
per_type: '2',
|
||||||
|
// type_text: '精神病人',
|
||||||
|
person_name: '赵磊',
|
||||||
|
id_card: '321287197606038965',
|
||||||
|
car_code: '苏J40089',
|
||||||
|
catch_time: '2023-11-30 14:20:08',
|
||||||
|
state_time: '4个小时',
|
||||||
|
catch_place: '江苏省射阳县海河镇革新村二组113号'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: '1243',
|
||||||
|
per_type: '2',
|
||||||
|
// type_text: '精神病人',
|
||||||
|
person_name: '徐永',
|
||||||
|
id_card: '321287197606038965',
|
||||||
|
car_code: '苏J40089',
|
||||||
|
catch_time: '2023-11-30 14:20:08',
|
||||||
|
state_time: '4个小时',
|
||||||
|
catch_place: '江苏省射阳县海河镇革新村二组113号'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: '1223',
|
||||||
|
per_type: '2',
|
||||||
|
// type_text: '精神病人',
|
||||||
|
person_name: '李文一',
|
||||||
|
id_card: '321287197606038965',
|
||||||
|
car_code: '苏J40089',
|
||||||
|
catch_time: '2023-11-30 14:20:08',
|
||||||
|
state_time: '4个小时',
|
||||||
|
catch_place: '江苏省射阳县海河镇革新村二组113号'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: '1223',
|
||||||
|
per_type: '1',
|
||||||
|
// type_text: '在逃人员',
|
||||||
|
person_name: '谭静',
|
||||||
|
id_card: '321287197606038965',
|
||||||
|
car_code: '苏J40089',
|
||||||
|
catch_time: '2023-11-30 14:20:08',
|
||||||
|
state_time: '4个小时',
|
||||||
|
catch_place: '江苏省射阳县海河镇革新村二组113号'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: '1243',
|
||||||
|
per_type: '3',
|
||||||
|
// type_text: '涉恐人员',
|
||||||
|
person_name: '孙洋洋',
|
||||||
|
id_card: '321287197606038965',
|
||||||
|
car_code: '苏J40089',
|
||||||
|
catch_time: '2023-11-30 14:20:08',
|
||||||
|
state_time: '4个小时',
|
||||||
|
catch_place: '江苏省射阳县海河镇革新村二组113号'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: '1223',
|
||||||
|
per_type: '1',
|
||||||
|
// type_text: '在逃人员',
|
||||||
|
person_name: '董磊',
|
||||||
|
id_card: '321287197606038965',
|
||||||
|
car_code: '苏J40089',
|
||||||
|
catch_time: '2023-11-30 14:20:08',
|
||||||
|
state_time: '4个小时',
|
||||||
|
catch_place: '江苏省射阳县海河镇革新村二组113号'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: '1223',
|
||||||
|
per_type: '2',
|
||||||
|
// type_text: '精神病人',
|
||||||
|
person_name: '郑廖',
|
||||||
|
id_card: '321287197606038965',
|
||||||
|
car_code: '苏J40089',
|
||||||
|
catch_time: '2023-11-30 14:20:08',
|
||||||
|
state_time: '4个小时',
|
||||||
|
catch_place: '江苏省射阳县海河镇革新村二组113号'
|
||||||
|
}
|
||||||
|
],
|
||||||
|
animateUp: false,
|
||||||
|
timer: null
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.timer = setInterval(this.scrollAnimate, 1500)
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// 滚动播放
|
||||||
|
scrollAnimate() {
|
||||||
|
this.animateUp = true
|
||||||
|
setTimeout(() => {
|
||||||
|
this.roll_list.push(this.roll_list[0])
|
||||||
|
this.roll_list.shift()
|
||||||
|
this.animateUp = false
|
||||||
|
}, 500)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
.capture {
|
||||||
|
width: 20vw;
|
||||||
|
height: 43vh;
|
||||||
|
|
||||||
|
.capture_title {
|
||||||
|
width: 20vw;
|
||||||
|
height: 4vh;
|
||||||
|
background-image: url('@/assets/picture/bg_small_title.png');
|
||||||
|
background-size: 100% auto;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
|
||||||
|
.capture_title_text {
|
||||||
|
margin-left: 3vw;
|
||||||
|
font-size: 16px;
|
||||||
|
font-family: PingFangSC, PingFang SC;
|
||||||
|
line-height: 4vh;
|
||||||
|
color: #edf1f7;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.capture_main {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
width: 20vw;
|
||||||
|
height: 40vh;
|
||||||
|
background-image: url('@/assets/picture/bg_5.png');
|
||||||
|
background-size: 100% 100%;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
|
||||||
|
.roll_body {
|
||||||
|
width: 20vw;
|
||||||
|
height: 39vh;
|
||||||
|
// background: #00f5ff;
|
||||||
|
overflow: hidden;
|
||||||
|
.marquee-list {
|
||||||
|
width: 20vw;
|
||||||
|
height: 39vh;
|
||||||
|
padding: 0px;
|
||||||
|
li {
|
||||||
|
margin-left: 2%;
|
||||||
|
margin-right: 2%;
|
||||||
|
width: 96%;
|
||||||
|
height: 18vh;
|
||||||
|
background: url('~@/assets/coastalMap/keyPerson/key_li_back.png')
|
||||||
|
no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
margin-top: 1vh;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
overflow: hidden;
|
||||||
|
white-space: nowrap;
|
||||||
|
list-style: none;
|
||||||
|
text-align: center;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
.roll_item_left {
|
||||||
|
width: 5vw;
|
||||||
|
height: 17vh;
|
||||||
|
.roll_item_pic {
|
||||||
|
width: 5vw;
|
||||||
|
height: 14vh;
|
||||||
|
background: #0b4672;
|
||||||
|
}
|
||||||
|
.roll_item_btn {
|
||||||
|
width: 5vw;
|
||||||
|
height: 3vh;
|
||||||
|
color: #fff;
|
||||||
|
background: #00f5ff;
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 400;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 3vh;
|
||||||
|
cursor: pointer;
|
||||||
|
background: url('~@/assets/coastalMap/keyPerson/key_li_btn.png')
|
||||||
|
no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.roll_item_right {
|
||||||
|
width: 13vw;
|
||||||
|
height: 17vh;
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
.person_type {
|
||||||
|
position: absolute;
|
||||||
|
width: 3vw;
|
||||||
|
height: 2vh;
|
||||||
|
top: 0px;
|
||||||
|
right: 0px;
|
||||||
|
color: #061122;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 2vh;
|
||||||
|
}
|
||||||
|
.one_type {
|
||||||
|
background: #ffc426;
|
||||||
|
}
|
||||||
|
.two_type {
|
||||||
|
background: #00f5ff;
|
||||||
|
}
|
||||||
|
.three_type {
|
||||||
|
background: #a357ff;
|
||||||
|
}
|
||||||
|
.right_text {
|
||||||
|
width: 5vw;
|
||||||
|
height: 15vh;
|
||||||
|
.right_text_item {
|
||||||
|
width: 5vw;
|
||||||
|
height: 3vh;
|
||||||
|
color: #ecf4f9;
|
||||||
|
font-size: 14px;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 3vh;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.right_value {
|
||||||
|
width: 8vw;
|
||||||
|
height: 15vh;
|
||||||
|
.right_value_item {
|
||||||
|
width: 8vw;
|
||||||
|
height: 3vh;
|
||||||
|
color: #edf1f7;
|
||||||
|
font-size: 14px;
|
||||||
|
text-align: left;
|
||||||
|
line-height: 3vh;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.animate-up {
|
||||||
|
transition: all 0.8s ease-in-out;
|
||||||
|
transform: translateY(-20vh);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -1,54 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div id="carMain"></div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import * as echarts from 'echarts'
|
|
||||||
import EleResize from '@/utils/esresize'
|
|
||||||
export default {
|
|
||||||
name: 'CarEcharts',
|
|
||||||
data() {
|
|
||||||
return {}
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
this.init_charts()
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
init_charts() {
|
|
||||||
var chartDom = document.getElementById('carMain')
|
|
||||||
var myChart = echarts.init(chartDom)
|
|
||||||
let resize_div = document.getElementById('people_chart')
|
|
||||||
// *echarts表自适应
|
|
||||||
EleResize.on(resize_div, () => {
|
|
||||||
myChart.resize()
|
|
||||||
})
|
|
||||||
var option
|
|
||||||
|
|
||||||
option = {
|
|
||||||
xAxis: {
|
|
||||||
type: 'category',
|
|
||||||
data: ['11-28', '11-29', '11-30', '12-01', '12-02', '12-03', '12-04']
|
|
||||||
},
|
|
||||||
yAxis: {
|
|
||||||
type: 'value'
|
|
||||||
},
|
|
||||||
series: [
|
|
||||||
{
|
|
||||||
data: [120, 200, 150, 80, 70, 110, 130],
|
|
||||||
type: 'bar'
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
|
|
||||||
option && myChart.setOption(option)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss">
|
|
||||||
#carMain {
|
|
||||||
width: 17vw;
|
|
||||||
height: 30vh;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,214 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div id="people_chart"></div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
// * 导入 echarts
|
|
||||||
import * as echarts from 'echarts'
|
|
||||||
import EleResize from '@/utils/esresize'
|
|
||||||
export default {
|
|
||||||
name: 'PeopleEcharts',
|
|
||||||
data() {
|
|
||||||
return {}
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
// * echarts 实例
|
|
||||||
const myChart = echarts.init(document.getElementById('people_chart'))
|
|
||||||
let resize_div = document.getElementById('people_chart')
|
|
||||||
// *echarts表自适应
|
|
||||||
EleResize.on(resize_div, () => {
|
|
||||||
myChart.resize()
|
|
||||||
})
|
|
||||||
// * echarts 选项
|
|
||||||
myChart.setOption({
|
|
||||||
color: ['#80ffa5', '#00ddff', '#37a2ff', '#ffbf00'],
|
|
||||||
title: {
|
|
||||||
// text: '标题'
|
|
||||||
},
|
|
||||||
tooitip: {
|
|
||||||
trigger: 'axis',
|
|
||||||
axisPointer: {
|
|
||||||
type: 'cross',
|
|
||||||
label: {
|
|
||||||
backgroundColor: '#6a7985'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
legend: {
|
|
||||||
// data: ['Line 1', 'Line 2', 'Line 3', 'Line 4', 'Line 5']
|
|
||||||
},
|
|
||||||
toolbox: {
|
|
||||||
feature: {
|
|
||||||
saveAsImage: {}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
grid: {
|
|
||||||
left: '3%',
|
|
||||||
right: '4%',
|
|
||||||
bottom: '3%',
|
|
||||||
containLabel: true
|
|
||||||
},
|
|
||||||
xAxis: [
|
|
||||||
{
|
|
||||||
type: 'category',
|
|
||||||
boundaryGap: false,
|
|
||||||
data: ['11-26', '11-27', '11-28', '11-29', '11-30', '12-01', '12-02']
|
|
||||||
}
|
|
||||||
],
|
|
||||||
yAxis: [
|
|
||||||
{
|
|
||||||
type: 'value'
|
|
||||||
}
|
|
||||||
],
|
|
||||||
series: [
|
|
||||||
{
|
|
||||||
// name: 'Line 1',
|
|
||||||
type: 'line',
|
|
||||||
stack: 'Total',
|
|
||||||
smooth: true,
|
|
||||||
lineStyle: {
|
|
||||||
width: 0
|
|
||||||
},
|
|
||||||
showSymbol: false,
|
|
||||||
areaStyle: {
|
|
||||||
opacity: 0.8,
|
|
||||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
||||||
{
|
|
||||||
offset: 0,
|
|
||||||
color: 'rgb(128, 255, 165)'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
offset: 1,
|
|
||||||
color: 'rgb(1, 191, 236)'
|
|
||||||
}
|
|
||||||
])
|
|
||||||
},
|
|
||||||
emphasis: {
|
|
||||||
focus: 'series'
|
|
||||||
},
|
|
||||||
data: [140, 232, 101, 264, 90, 340, 250]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
// name: 'Line 2',
|
|
||||||
type: 'line',
|
|
||||||
stack: 'Total',
|
|
||||||
smooth: true,
|
|
||||||
lineStyle: {
|
|
||||||
width: 0
|
|
||||||
},
|
|
||||||
showSymbol: false,
|
|
||||||
areaStyle: {
|
|
||||||
opacity: 0.8,
|
|
||||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
||||||
{
|
|
||||||
offset: 0,
|
|
||||||
color: 'rgb(0, 221, 255)'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
offset: 1,
|
|
||||||
color: 'rgb(77, 119, 255)'
|
|
||||||
}
|
|
||||||
])
|
|
||||||
},
|
|
||||||
emphasis: {
|
|
||||||
focus: 'series'
|
|
||||||
},
|
|
||||||
data: [120, 282, 111, 234, 220, 340, 310]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
// name: 'Line 3',
|
|
||||||
type: 'line',
|
|
||||||
stack: 'Total',
|
|
||||||
smooth: true,
|
|
||||||
lineStyle: {
|
|
||||||
width: 0
|
|
||||||
},
|
|
||||||
showSymbol: false,
|
|
||||||
areaStyle: {
|
|
||||||
opacity: 0.8,
|
|
||||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
||||||
{
|
|
||||||
offset: 0,
|
|
||||||
color: 'rgb(55, 162, 255)'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
offset: 1,
|
|
||||||
color: 'rgb(116, 21, 219)'
|
|
||||||
}
|
|
||||||
])
|
|
||||||
},
|
|
||||||
emphasis: {
|
|
||||||
focus: 'series'
|
|
||||||
},
|
|
||||||
data: [320, 132, 201, 334, 190, 130, 220]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
// name: 'Line 4',
|
|
||||||
type: 'line',
|
|
||||||
stack: 'Total',
|
|
||||||
smooth: true,
|
|
||||||
lineStyle: {
|
|
||||||
width: 0
|
|
||||||
},
|
|
||||||
showSymbol: false,
|
|
||||||
areaStyle: {
|
|
||||||
opacity: 0.8,
|
|
||||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
||||||
{
|
|
||||||
offset: 0,
|
|
||||||
color: 'rgb(255, 0, 135)'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
offset: 1,
|
|
||||||
color: 'rgb(135, 0, 157)'
|
|
||||||
}
|
|
||||||
])
|
|
||||||
},
|
|
||||||
emphasis: {
|
|
||||||
focus: 'series'
|
|
||||||
},
|
|
||||||
data: [220, 402, 231, 134, 190, 230, 120]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
// name: 'Line 5',
|
|
||||||
type: 'line',
|
|
||||||
stack: 'Total',
|
|
||||||
smooth: true,
|
|
||||||
lineStyle: {
|
|
||||||
width: 0
|
|
||||||
},
|
|
||||||
showSymbol: false,
|
|
||||||
label: {
|
|
||||||
show: true,
|
|
||||||
position: 'top'
|
|
||||||
},
|
|
||||||
areaStyle: {
|
|
||||||
opacity: 0.8,
|
|
||||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
||||||
{
|
|
||||||
offset: 0,
|
|
||||||
color: 'rgb(255, 191, 0)'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
offset: 1,
|
|
||||||
color: 'rgb(224, 62, 76)'
|
|
||||||
}
|
|
||||||
])
|
|
||||||
},
|
|
||||||
emphasis: {
|
|
||||||
focus: 'series'
|
|
||||||
},
|
|
||||||
data: [220, 302, 181, 234, 210, 290, 150]
|
|
||||||
}
|
|
||||||
]
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss">
|
|
||||||
#people_chart {
|
|
||||||
width: 17vw;
|
|
||||||
height: 23vh;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -0,0 +1,326 @@
|
|||||||
|
<!-- 通用抓拍 -->
|
||||||
|
<template>
|
||||||
|
<div class="capture">
|
||||||
|
<div class="capture_title">
|
||||||
|
<div class="capture_title_text">人脸抓拍</div>
|
||||||
|
</div>
|
||||||
|
<div class="capture_main">
|
||||||
|
<div class="person_roll">
|
||||||
|
<!-- 滚动区域 -->
|
||||||
|
<div class="roll_body">
|
||||||
|
<ul class="marquee-list" :class="{ 'animate-up': animateUp }">
|
||||||
|
<li v-for="(item, index) in roll_list" :key="index">
|
||||||
|
<div class="roll_item_left">
|
||||||
|
<div class="roll_item_pic"></div>
|
||||||
|
<div class="roll_item_btn">人员追踪</div>
|
||||||
|
</div>
|
||||||
|
<div class="roll_item_right">
|
||||||
|
<div v-if="item.per_type == '1'" class="person_type one_type">
|
||||||
|
{{ item.type_text }}
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
v-else-if="item.per_type == '2'"
|
||||||
|
class="person_type two_type"
|
||||||
|
>
|
||||||
|
{{ item.type_text }}
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
v-else-if="item.per_type == '3'"
|
||||||
|
class="person_type three_type"
|
||||||
|
>
|
||||||
|
{{ item.type_text }}
|
||||||
|
</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 class="right_text_item">抓拍地址</div>
|
||||||
|
</div>
|
||||||
|
<div class="right_value">
|
||||||
|
<div class="right_value_item">{{ item.person_name }}</div>
|
||||||
|
<div class="right_value_item" :title="item.id_card">
|
||||||
|
{{ item.id_card }}
|
||||||
|
</div>
|
||||||
|
<div class="right_value_item">{{ item.catch_time }}</div>
|
||||||
|
<div class="right_value_item" :title="item.state_time">
|
||||||
|
{{ item.state_time }}
|
||||||
|
</div>
|
||||||
|
<div class="right_value_item" :title="item.catch_address">
|
||||||
|
{{ item.catch_address }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'PersonCatch',
|
||||||
|
props: {
|
||||||
|
item: {
|
||||||
|
type: Object
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
roll_list: [
|
||||||
|
{
|
||||||
|
text: '123',
|
||||||
|
per_type: '1',
|
||||||
|
type_text: '在逃人员',
|
||||||
|
person_name: '周大山',
|
||||||
|
catch_time: '2023-12-01 13:20:09',
|
||||||
|
id_card: '321287197606038965',
|
||||||
|
state_time: '4个小时',
|
||||||
|
catch_address: '江苏省射阳县海河镇革新村二组113号'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: '1243',
|
||||||
|
per_type: '3',
|
||||||
|
type_text: '涉恐人员',
|
||||||
|
person_name: '王富强',
|
||||||
|
catch_time: '2023-12-01 13:20:09',
|
||||||
|
id_card: '321287197606038965',
|
||||||
|
state_time: '4个小时',
|
||||||
|
catch_address: '江苏省射阳县海河镇革新村二组113号'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: '12323',
|
||||||
|
per_type: '2',
|
||||||
|
type_text: '精神病人',
|
||||||
|
person_name: '赵磊',
|
||||||
|
catch_time: '2023-12-01 13:20:09',
|
||||||
|
id_card: '321287197606038965',
|
||||||
|
state_time: '4个小时',
|
||||||
|
catch_address: '江苏省射阳县海河镇革新村二组113号'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: '1243',
|
||||||
|
per_type: '2',
|
||||||
|
type_text: '精神病人',
|
||||||
|
person_name: '徐永',
|
||||||
|
catch_time: '2023-12-01 13:20:09',
|
||||||
|
id_card: '321287197606038965',
|
||||||
|
state_time: '4个小时',
|
||||||
|
catch_address: '江苏省射阳县海河镇革新村二组113号'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: '1223',
|
||||||
|
per_type: '2',
|
||||||
|
type_text: '精神病人',
|
||||||
|
person_name: '李文一',
|
||||||
|
catch_time: '2023-12-01 13:20:09',
|
||||||
|
id_card: '321287197606038965',
|
||||||
|
state_time: '4个小时',
|
||||||
|
catch_address: '江苏省射阳县海河镇革新村二组113号'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: '1223',
|
||||||
|
per_type: '1',
|
||||||
|
type_text: '在逃人员',
|
||||||
|
person_name: '谭静',
|
||||||
|
catch_time: '2023-12-01 13:20:09',
|
||||||
|
id_card: '321287197606038965',
|
||||||
|
state_time: '4个小时',
|
||||||
|
catch_address: '江苏省射阳县海河镇革新村二组113号'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: '1243',
|
||||||
|
per_type: '3',
|
||||||
|
type_text: '涉恐人员',
|
||||||
|
person_name: '孙洋洋',
|
||||||
|
catch_time: '2023-12-01 13:20:09',
|
||||||
|
id_card: '321287197606038965',
|
||||||
|
state_time: '4个小时',
|
||||||
|
catch_address: '江苏省射阳县海河镇革新村二组113号'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: '1223',
|
||||||
|
per_type: '1',
|
||||||
|
type_text: '在逃人员',
|
||||||
|
person_name: '董磊',
|
||||||
|
catch_time: '2023-12-01 13:20:09',
|
||||||
|
id_card: '321287197606038965',
|
||||||
|
state_time: '4个小时',
|
||||||
|
catch_address: '江苏省射阳县海河镇革新村二组113号'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: '1223',
|
||||||
|
per_type: '2',
|
||||||
|
type_text: '精神病人',
|
||||||
|
person_name: '郑廖',
|
||||||
|
catch_time: '2023-12-01 13:20:09',
|
||||||
|
id_card: '321287197606038965',
|
||||||
|
state_time: '4个小时',
|
||||||
|
catch_address: '江苏省射阳县海河镇革新村二组113号'
|
||||||
|
}
|
||||||
|
],
|
||||||
|
animateUp: false,
|
||||||
|
timer: null
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.timer = setInterval(this.scrollAnimate, 1500)
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// 滚动播放
|
||||||
|
scrollAnimate() {
|
||||||
|
this.animateUp = true
|
||||||
|
setTimeout(() => {
|
||||||
|
this.roll_list.push(this.roll_list[0])
|
||||||
|
this.roll_list.shift()
|
||||||
|
this.animateUp = false
|
||||||
|
}, 500)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
.capture {
|
||||||
|
width: 20vw;
|
||||||
|
height: 43vh;
|
||||||
|
|
||||||
|
.capture_title {
|
||||||
|
width: 20vw;
|
||||||
|
height: 4vh;
|
||||||
|
background-image: url('@/assets/picture/bg_small_title.png');
|
||||||
|
background-size: 100% auto;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
|
||||||
|
.capture_title_text {
|
||||||
|
margin-left: 3vw;
|
||||||
|
font-size: 16px;
|
||||||
|
font-family: PingFangSC, PingFang SC;
|
||||||
|
line-height: 4vh;
|
||||||
|
color: #edf1f7;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.capture_main {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
width: 20vw;
|
||||||
|
height: 40vh;
|
||||||
|
background-image: url('@/assets/picture/bg_5.png');
|
||||||
|
background-size: 100% 100%;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
|
||||||
|
.roll_body {
|
||||||
|
width: 20vw;
|
||||||
|
height: 39vh;
|
||||||
|
// background: #00f5ff;
|
||||||
|
overflow: hidden;
|
||||||
|
.marquee-list {
|
||||||
|
width: 20vw;
|
||||||
|
height: 39vh;
|
||||||
|
padding: 0px;
|
||||||
|
li {
|
||||||
|
margin-left: 2%;
|
||||||
|
margin-right: 2%;
|
||||||
|
width: 96%;
|
||||||
|
height: 15vh;
|
||||||
|
background: url('~@/assets/coastalMap/keyPerson/key_li_back.png')
|
||||||
|
no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
margin-top: 1vh;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
overflow: hidden;
|
||||||
|
white-space: nowrap;
|
||||||
|
list-style: none;
|
||||||
|
text-align: center;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
.roll_item_left {
|
||||||
|
width: 5vw;
|
||||||
|
height: 13vh;
|
||||||
|
.roll_item_pic {
|
||||||
|
width: 5vw;
|
||||||
|
height: 10vh;
|
||||||
|
background: #0b4672;
|
||||||
|
}
|
||||||
|
.roll_item_btn {
|
||||||
|
width: 5vw;
|
||||||
|
height: 3vh;
|
||||||
|
color: #fff;
|
||||||
|
background: #00f5ff;
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 400;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 3vh;
|
||||||
|
cursor: pointer;
|
||||||
|
background: url('~@/assets/coastalMap/keyPerson/key_li_btn.png')
|
||||||
|
no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.roll_item_right {
|
||||||
|
width: 13vw;
|
||||||
|
height: 13vh;
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
.person_type {
|
||||||
|
position: absolute;
|
||||||
|
width: 3vw;
|
||||||
|
height: 2vh;
|
||||||
|
top: 0px;
|
||||||
|
right: 0px;
|
||||||
|
color: #061122;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 2vh;
|
||||||
|
}
|
||||||
|
.one_type {
|
||||||
|
background: #ffc426;
|
||||||
|
}
|
||||||
|
.two_type {
|
||||||
|
background: #00f5ff;
|
||||||
|
}
|
||||||
|
.three_type {
|
||||||
|
background: #a357ff;
|
||||||
|
}
|
||||||
|
.right_text {
|
||||||
|
width: 5vw;
|
||||||
|
height: 13vh;
|
||||||
|
.right_text_item {
|
||||||
|
width: 5vw;
|
||||||
|
height: 2.6vh;
|
||||||
|
color: #ecf4f9;
|
||||||
|
font-size: 14px;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 2.6vh;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.right_value {
|
||||||
|
width: 8vw;
|
||||||
|
height: 13vh;
|
||||||
|
.right_value_item {
|
||||||
|
width: 8vw;
|
||||||
|
height: 2.6vh;
|
||||||
|
color: #edf1f7;
|
||||||
|
font-size: 14px;
|
||||||
|
text-align: left;
|
||||||
|
line-height: 2.6vh;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.animate-up {
|
||||||
|
transition: all 0.8s ease-in-out;
|
||||||
|
transform: translateY(-20vh);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,195 @@
|
|||||||
|
// * echarts 初始化方法
|
||||||
|
import * as echarts from 'echarts'
|
||||||
|
import EleResize from '@/utils/esresize'
|
||||||
|
export const init_echarts = () => {
|
||||||
|
// * echarts 实例
|
||||||
|
const myChart = echarts.init(document.getElementById('people_chart'))
|
||||||
|
let resize_div = document.getElementById('people_chart')
|
||||||
|
// *echarts表自适应
|
||||||
|
EleResize.on(resize_div, () => {
|
||||||
|
myChart.resize()
|
||||||
|
})
|
||||||
|
// * echarts 选项
|
||||||
|
myChart.setOption({
|
||||||
|
color: ['#80ffa5', '#00ddff', '#37a2ff', '#ffbf00'],
|
||||||
|
title: {
|
||||||
|
// text: '标题'
|
||||||
|
},
|
||||||
|
tooitip: {
|
||||||
|
trigger: 'axis',
|
||||||
|
axisPointer: {
|
||||||
|
type: 'cross',
|
||||||
|
label: {
|
||||||
|
backgroundColor: '#6a7985'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
// data: ['Line 1', 'Line 2', 'Line 3', 'Line 4', 'Line 5']
|
||||||
|
},
|
||||||
|
toolbox: {
|
||||||
|
feature: {
|
||||||
|
saveAsImage: {}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
left: '3%',
|
||||||
|
right: '4%',
|
||||||
|
bottom: '3%',
|
||||||
|
containLabel: true
|
||||||
|
},
|
||||||
|
xAxis: [
|
||||||
|
{
|
||||||
|
type: 'category',
|
||||||
|
boundaryGap: false,
|
||||||
|
data: ['11-26', '11-27', '11-28', '11-29', '11-30', '12-01', '12-02']
|
||||||
|
}
|
||||||
|
],
|
||||||
|
yAxis: [
|
||||||
|
{
|
||||||
|
type: 'value'
|
||||||
|
}
|
||||||
|
],
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
// name: 'Line 1',
|
||||||
|
type: 'line',
|
||||||
|
stack: 'Total',
|
||||||
|
smooth: true,
|
||||||
|
lineStyle: {
|
||||||
|
width: 0
|
||||||
|
},
|
||||||
|
showSymbol: false,
|
||||||
|
areaStyle: {
|
||||||
|
opacity: 0.8,
|
||||||
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||||
|
{
|
||||||
|
offset: 0,
|
||||||
|
color: 'rgb(128, 255, 165)'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 1,
|
||||||
|
color: 'rgb(1, 191, 236)'
|
||||||
|
}
|
||||||
|
])
|
||||||
|
},
|
||||||
|
emphasis: {
|
||||||
|
focus: 'series'
|
||||||
|
},
|
||||||
|
data: [140, 232, 101, 264, 90, 340, 250]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
// name: 'Line 2',
|
||||||
|
type: 'line',
|
||||||
|
stack: 'Total',
|
||||||
|
smooth: true,
|
||||||
|
lineStyle: {
|
||||||
|
width: 0
|
||||||
|
},
|
||||||
|
showSymbol: false,
|
||||||
|
areaStyle: {
|
||||||
|
opacity: 0.8,
|
||||||
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||||
|
{
|
||||||
|
offset: 0,
|
||||||
|
color: 'rgb(0, 221, 255)'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 1,
|
||||||
|
color: 'rgb(77, 119, 255)'
|
||||||
|
}
|
||||||
|
])
|
||||||
|
},
|
||||||
|
emphasis: {
|
||||||
|
focus: 'series'
|
||||||
|
},
|
||||||
|
data: [120, 282, 111, 234, 220, 340, 310]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
// name: 'Line 3',
|
||||||
|
type: 'line',
|
||||||
|
stack: 'Total',
|
||||||
|
smooth: true,
|
||||||
|
lineStyle: {
|
||||||
|
width: 0
|
||||||
|
},
|
||||||
|
showSymbol: false,
|
||||||
|
areaStyle: {
|
||||||
|
opacity: 0.8,
|
||||||
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||||
|
{
|
||||||
|
offset: 0,
|
||||||
|
color: 'rgb(55, 162, 255)'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 1,
|
||||||
|
color: 'rgb(116, 21, 219)'
|
||||||
|
}
|
||||||
|
])
|
||||||
|
},
|
||||||
|
emphasis: {
|
||||||
|
focus: 'series'
|
||||||
|
},
|
||||||
|
data: [320, 132, 201, 334, 190, 130, 220]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
// name: 'Line 4',
|
||||||
|
type: 'line',
|
||||||
|
stack: 'Total',
|
||||||
|
smooth: true,
|
||||||
|
lineStyle: {
|
||||||
|
width: 0
|
||||||
|
},
|
||||||
|
showSymbol: false,
|
||||||
|
areaStyle: {
|
||||||
|
opacity: 0.8,
|
||||||
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||||
|
{
|
||||||
|
offset: 0,
|
||||||
|
color: 'rgb(255, 0, 135)'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 1,
|
||||||
|
color: 'rgb(135, 0, 157)'
|
||||||
|
}
|
||||||
|
])
|
||||||
|
},
|
||||||
|
emphasis: {
|
||||||
|
focus: 'series'
|
||||||
|
},
|
||||||
|
data: [220, 402, 231, 134, 190, 230, 120]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
// name: 'Line 5',
|
||||||
|
type: 'line',
|
||||||
|
stack: 'Total',
|
||||||
|
smooth: true,
|
||||||
|
lineStyle: {
|
||||||
|
width: 0
|
||||||
|
},
|
||||||
|
showSymbol: false,
|
||||||
|
label: {
|
||||||
|
show: true,
|
||||||
|
position: 'top'
|
||||||
|
},
|
||||||
|
areaStyle: {
|
||||||
|
opacity: 0.8,
|
||||||
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||||
|
{
|
||||||
|
offset: 0,
|
||||||
|
color: 'rgb(255, 191, 0)'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 1,
|
||||||
|
color: 'rgb(224, 62, 76)'
|
||||||
|
}
|
||||||
|
])
|
||||||
|
},
|
||||||
|
emphasis: {
|
||||||
|
focus: 'series'
|
||||||
|
},
|
||||||
|
data: [220, 302, 181, 234, 210, 290, 150]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
})
|
||||||
|
}
|
||||||
@ -0,0 +1,69 @@
|
|||||||
|
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
|
||||||
|
}
|
||||||
|
|
||||||
|
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 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