commit
e22d5df2d2
|
Before Width: | Height: | Size: 8.9 KiB After Width: | Height: | Size: 8.9 KiB |
|
Before Width: | Height: | Size: 4.8 KiB After Width: | Height: | Size: 4.8 KiB |
|
Before Width: | Height: | Size: 12 KiB After Width: | Height: | Size: 12 KiB |
|
Before Width: | Height: | Size: 12 KiB After Width: | Height: | Size: 12 KiB |
|
Before Width: | Height: | Size: 12 KiB After Width: | Height: | Size: 12 KiB |
|
Before Width: | Height: | Size: 12 KiB After Width: | Height: | Size: 12 KiB |
|
Before Width: | Height: | Size: 3.9 KiB After Width: | Height: | Size: 3.9 KiB |
|
Before Width: | Height: | Size: 3.3 KiB After Width: | Height: | Size: 3.3 KiB |
|
Before Width: | Height: | Size: 2.1 KiB After Width: | Height: | Size: 2.1 KiB |
|
Before Width: | Height: | Size: 2.3 KiB After Width: | Height: | Size: 2.3 KiB |
@ -0,0 +1,57 @@
|
||||
<template>
|
||||
<div id="police"></div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from 'echarts'
|
||||
export default {
|
||||
name: 'EchartsPolicesStatus',
|
||||
mounted() {
|
||||
this.police_echarts()
|
||||
},
|
||||
methods: {
|
||||
police_echarts() {
|
||||
var chartDom = document.getElementById('police')
|
||||
var myChart = echarts.init(chartDom)
|
||||
var option
|
||||
option = {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'shadow'
|
||||
}
|
||||
},
|
||||
legend: {},
|
||||
grid: {
|
||||
left: '30%',
|
||||
right: '3%',
|
||||
bottom: '10%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: {
|
||||
type: 'value',
|
||||
boundaryGap: [0, 0.01]
|
||||
},
|
||||
yAxis: {
|
||||
type: 'category'
|
||||
// data: ['Brazil', 'Indonesia', 'USA']
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: 'bar',
|
||||
data: [18203, 23489, 29034]
|
||||
}
|
||||
]
|
||||
}
|
||||
option && myChart.setOption(option)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
#police {
|
||||
width: 15vw;
|
||||
height: 10vh;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,837 @@
|
||||
<template>
|
||||
<div class="live_all">
|
||||
<!-- 弹窗整体 -->
|
||||
<div class="live_card">
|
||||
<div class="live_card_header">重点人员信息</div>
|
||||
<div class="card_close" @click="cardClose"></div>
|
||||
<div class="live_card_body">
|
||||
<div class="box">
|
||||
<!-- 图片 -->
|
||||
<div class="card_picture">
|
||||
<!-- 照片 -->
|
||||
<div class="image"></div>
|
||||
<!-- 查看轨迹 -->
|
||||
<div class="card_picture_look">
|
||||
<span>查看轨迹</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 图片右边的个人介绍 -->
|
||||
<div class="card_picture_right">
|
||||
<div class="info">
|
||||
<div class="info_icon"></div>
|
||||
<p>张三</p>
|
||||
</div>
|
||||
<div class="info">
|
||||
<div class="info_icon"></div>
|
||||
<p>张三</p>
|
||||
</div>
|
||||
<div class="info">
|
||||
<div class="info_icon"></div>
|
||||
<p>张三</p>
|
||||
</div>
|
||||
<div class="info">
|
||||
<div class="info_icon"></div>
|
||||
<p class="text">张三asdasdaasdadasdasdsda</p>
|
||||
</div>
|
||||
|
||||
<div class="info">
|
||||
<div class="info_icon"></div>
|
||||
<p>张三</p>
|
||||
</div>
|
||||
<!-- 涉毒人员 -->
|
||||
<div class="card_picture_right_cate">
|
||||
<span>涉毒人员</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 户籍 -->
|
||||
<div class="card_huji"><span>户籍</span></div>
|
||||
<!-- 现住 -->
|
||||
<div class="card_xianzhu"><span>现住</span></div>
|
||||
</div>
|
||||
<!-- -->
|
||||
<div class="box">
|
||||
<!-- 图片 -->
|
||||
<div class="card_picture">
|
||||
<!-- 照片 -->
|
||||
<div class="image"></div>
|
||||
<!-- 查看轨迹 -->
|
||||
<div class="card_picture_look">
|
||||
<span>查看轨迹</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 图片右边的个人介绍 -->
|
||||
<div class="card_picture_right">
|
||||
<div class="info">
|
||||
<div class="info_icon"></div>
|
||||
<p>张三</p>
|
||||
</div>
|
||||
<div class="info">
|
||||
<div class="info_icon"></div>
|
||||
<p>张三</p>
|
||||
</div>
|
||||
<div class="info">
|
||||
<div class="info_icon"></div>
|
||||
<p>张三</p>
|
||||
</div>
|
||||
<div class="info">
|
||||
<div class="info_icon"></div>
|
||||
<p class="text">张三asdasdaasdadasdasdsda</p>
|
||||
</div>
|
||||
|
||||
<div class="info">
|
||||
<div class="info_icon"></div>
|
||||
<p>张三</p>
|
||||
</div>
|
||||
<!-- 涉毒人员 -->
|
||||
<div class="card_picture_right_cate">
|
||||
<span>涉毒人员</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 户籍 -->
|
||||
<div class="card_huji"><span>户籍</span></div>
|
||||
<!-- 现住 -->
|
||||
<div class="card_xianzhu"><span>现住</span></div>
|
||||
</div>
|
||||
<!-- -->
|
||||
<div class="box">
|
||||
<!-- 图片 -->
|
||||
<div class="card_picture">
|
||||
<!-- 照片 -->
|
||||
<div class="image"></div>
|
||||
<!-- 查看轨迹 -->
|
||||
<div class="card_picture_look">
|
||||
<span>查看轨迹</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 图片右边的个人介绍 -->
|
||||
<div class="card_picture_right">
|
||||
<div class="info">
|
||||
<div class="info_icon"></div>
|
||||
<p>张三</p>
|
||||
</div>
|
||||
<div class="info">
|
||||
<div class="info_icon"></div>
|
||||
<p>张三</p>
|
||||
</div>
|
||||
<div class="info">
|
||||
<div class="info_icon"></div>
|
||||
<p>张三</p>
|
||||
</div>
|
||||
<div class="info">
|
||||
<div class="info_icon"></div>
|
||||
<p class="text">张三asdasdaasdadasdasdsda</p>
|
||||
</div>
|
||||
|
||||
<div class="info">
|
||||
<div class="info_icon"></div>
|
||||
<p>张三</p>
|
||||
</div>
|
||||
<!-- 涉毒人员 -->
|
||||
<div class="card_picture_right_cate">
|
||||
<span>涉毒人员</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 户籍 -->
|
||||
<div class="card_huji"><span>户籍</span></div>
|
||||
<!-- 现住 -->
|
||||
<div class="card_xianzhu"><span>现住</span></div>
|
||||
</div>
|
||||
<!-- -->
|
||||
<div class="box">
|
||||
<!-- 图片 -->
|
||||
<div class="card_picture">
|
||||
<!-- 照片 -->
|
||||
<div class="image"></div>
|
||||
<!-- 查看轨迹 -->
|
||||
<div class="card_picture_look">
|
||||
<span>查看轨迹</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 图片右边的个人介绍 -->
|
||||
<div class="card_picture_right">
|
||||
<div class="info">
|
||||
<div class="info_icon"></div>
|
||||
<p>张三</p>
|
||||
</div>
|
||||
<div class="info">
|
||||
<div class="info_icon"></div>
|
||||
<p>张三</p>
|
||||
</div>
|
||||
<div class="info">
|
||||
<div class="info_icon"></div>
|
||||
<p>张三</p>
|
||||
</div>
|
||||
<div class="info">
|
||||
<div class="info_icon"></div>
|
||||
<p class="text">张三asdasdaasdadasdasdsda</p>
|
||||
</div>
|
||||
|
||||
<div class="info">
|
||||
<div class="info_icon"></div>
|
||||
<p>张三</p>
|
||||
</div>
|
||||
<!-- 涉毒人员 -->
|
||||
<div class="card_picture_right_cate">
|
||||
<span>涉毒人员</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 户籍 -->
|
||||
<div class="card_huji"><span>户籍</span></div>
|
||||
<!-- 现住 -->
|
||||
<div class="card_xianzhu"><span>现住</span></div>
|
||||
</div>
|
||||
<!-- -->
|
||||
<div class="box">
|
||||
<!-- 图片 -->
|
||||
<div class="card_picture">
|
||||
<!-- 照片 -->
|
||||
<div class="image"></div>
|
||||
<!-- 查看轨迹 -->
|
||||
<div class="card_picture_look">
|
||||
<span>查看轨迹</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 图片右边的个人介绍 -->
|
||||
<div class="card_picture_right">
|
||||
<div class="info">
|
||||
<div class="info_icon"></div>
|
||||
<p>张三</p>
|
||||
</div>
|
||||
<div class="info">
|
||||
<div class="info_icon"></div>
|
||||
<p>张三</p>
|
||||
</div>
|
||||
<div class="info">
|
||||
<div class="info_icon"></div>
|
||||
<p>张三</p>
|
||||
</div>
|
||||
<div class="info">
|
||||
<div class="info_icon"></div>
|
||||
<p class="text">张三asdasdaasdadasdasdsda</p>
|
||||
</div>
|
||||
|
||||
<div class="info">
|
||||
<div class="info_icon"></div>
|
||||
<p>张三</p>
|
||||
</div>
|
||||
<!-- 涉毒人员 -->
|
||||
<div class="card_picture_right_cate">
|
||||
<span>涉毒人员</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 户籍 -->
|
||||
<div class="card_huji"><span>户籍</span></div>
|
||||
<!-- 现住 -->
|
||||
<div class="card_xianzhu"><span>现住</span></div>
|
||||
</div>
|
||||
<!-- -->
|
||||
<div class="box">
|
||||
<!-- 图片 -->
|
||||
<div class="card_picture">
|
||||
<!-- 照片 -->
|
||||
<div class="image"></div>
|
||||
<!-- 查看轨迹 -->
|
||||
<div class="card_picture_look">
|
||||
<span>查看轨迹</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 图片右边的个人介绍 -->
|
||||
<div class="card_picture_right">
|
||||
<div class="info">
|
||||
<div class="info_icon"></div>
|
||||
<p>张三</p>
|
||||
</div>
|
||||
<div class="info">
|
||||
<div class="info_icon"></div>
|
||||
<p>张三</p>
|
||||
</div>
|
||||
<div class="info">
|
||||
<div class="info_icon"></div>
|
||||
<p>张三</p>
|
||||
</div>
|
||||
<div class="info">
|
||||
<div class="info_icon"></div>
|
||||
<p class="text">张三asdasdaasdadasdasdsda</p>
|
||||
</div>
|
||||
|
||||
<div class="info">
|
||||
<div class="info_icon"></div>
|
||||
<p>张三</p>
|
||||
</div>
|
||||
<!-- 涉毒人员 -->
|
||||
<div class="card_picture_right_cate">
|
||||
<span>涉毒人员</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 户籍 -->
|
||||
<div class="card_huji"><span>户籍</span></div>
|
||||
<!-- 现住 -->
|
||||
<div class="card_xianzhu"><span>现住</span></div>
|
||||
</div>
|
||||
<!-- -->
|
||||
<div class="box">
|
||||
<!-- 图片 -->
|
||||
<div class="card_picture">
|
||||
<!-- 照片 -->
|
||||
<div class="image"></div>
|
||||
<!-- 查看轨迹 -->
|
||||
<div class="card_picture_look">
|
||||
<span>查看轨迹</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 图片右边的个人介绍 -->
|
||||
<div class="card_picture_right">
|
||||
<div class="info">
|
||||
<div class="info_icon"></div>
|
||||
<p>张三</p>
|
||||
</div>
|
||||
<div class="info">
|
||||
<div class="info_icon"></div>
|
||||
<p>张三</p>
|
||||
</div>
|
||||
<div class="info">
|
||||
<div class="info_icon"></div>
|
||||
<p>张三</p>
|
||||
</div>
|
||||
<div class="info">
|
||||
<div class="info_icon"></div>
|
||||
<p class="text">张三asdasdaasdadasdasdsda</p>
|
||||
</div>
|
||||
|
||||
<div class="info">
|
||||
<div class="info_icon"></div>
|
||||
<p>张三</p>
|
||||
</div>
|
||||
<!-- 涉毒人员 -->
|
||||
<div class="card_picture_right_cate">
|
||||
<span>涉毒人员</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 户籍 -->
|
||||
<div class="card_huji"><span>户籍</span></div>
|
||||
<!-- 现住 -->
|
||||
<div class="card_xianzhu"><span>现住</span></div>
|
||||
</div>
|
||||
<!-- -->
|
||||
<div class="box">
|
||||
<!-- 图片 -->
|
||||
<div class="card_picture">
|
||||
<!-- 照片 -->
|
||||
<div class="image"></div>
|
||||
<!-- 查看轨迹 -->
|
||||
<div class="card_picture_look">
|
||||
<span>查看轨迹</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 图片右边的个人介绍 -->
|
||||
<div class="card_picture_right">
|
||||
<div class="info">
|
||||
<div class="info_icon"></div>
|
||||
<p>张三</p>
|
||||
</div>
|
||||
<div class="info">
|
||||
<div class="info_icon"></div>
|
||||
<p>张三</p>
|
||||
</div>
|
||||
<div class="info">
|
||||
<div class="info_icon"></div>
|
||||
<p>张三</p>
|
||||
</div>
|
||||
<div class="info">
|
||||
<div class="info_icon"></div>
|
||||
<p class="text">张三asdasdaasdadasdasdsda</p>
|
||||
</div>
|
||||
|
||||
<div class="info">
|
||||
<div class="info_icon"></div>
|
||||
<p>张三</p>
|
||||
</div>
|
||||
<!-- 涉毒人员 -->
|
||||
<div class="card_picture_right_cate">
|
||||
<span>涉毒人员</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 户籍 -->
|
||||
<div class="card_huji"><span>户籍</span></div>
|
||||
<!-- 现住 -->
|
||||
<div class="card_xianzhu"><span>现住</span></div>
|
||||
</div>
|
||||
<!-- -->
|
||||
<div class="box">
|
||||
<!-- 图片 -->
|
||||
<div class="card_picture">
|
||||
<!-- 照片 -->
|
||||
<div class="image"></div>
|
||||
<!-- 查看轨迹 -->
|
||||
<div class="card_picture_look">
|
||||
<span>查看轨迹</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 图片右边的个人介绍 -->
|
||||
<div class="card_picture_right">
|
||||
<div class="info">
|
||||
<div class="info_icon"></div>
|
||||
<p>张三</p>
|
||||
</div>
|
||||
<div class="info">
|
||||
<div class="info_icon"></div>
|
||||
<p>张三</p>
|
||||
</div>
|
||||
<div class="info">
|
||||
<div class="info_icon"></div>
|
||||
<p>张三</p>
|
||||
</div>
|
||||
<div class="info">
|
||||
<div class="info_icon"></div>
|
||||
<p class="text">张三asdasdaasdadasdasdsda</p>
|
||||
</div>
|
||||
|
||||
<div class="info">
|
||||
<div class="info_icon"></div>
|
||||
<p>张三</p>
|
||||
</div>
|
||||
<!-- 涉毒人员 -->
|
||||
<div class="card_picture_right_cate">
|
||||
<span>涉毒人员</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 户籍 -->
|
||||
<div class="card_huji"><span>户籍</span></div>
|
||||
<!-- 现住 -->
|
||||
<div class="card_xianzhu"><span>现住</span></div>
|
||||
</div>
|
||||
<!-- -->
|
||||
<div class="box">
|
||||
<!-- 图片 -->
|
||||
<div class="card_picture">
|
||||
<!-- 照片 -->
|
||||
<div class="image"></div>
|
||||
<!-- 查看轨迹 -->
|
||||
<div class="card_picture_look">
|
||||
<span>查看轨迹</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 图片右边的个人介绍 -->
|
||||
<div class="card_picture_right">
|
||||
<div class="info">
|
||||
<div class="info_icon"></div>
|
||||
<p>张三</p>
|
||||
</div>
|
||||
<div class="info">
|
||||
<div class="info_icon"></div>
|
||||
<p>张三</p>
|
||||
</div>
|
||||
<div class="info">
|
||||
<div class="info_icon"></div>
|
||||
<p>张三</p>
|
||||
</div>
|
||||
<div class="info">
|
||||
<div class="info_icon"></div>
|
||||
<p class="text">张三asdasdaasdadasdasdsda</p>
|
||||
</div>
|
||||
|
||||
<div class="info">
|
||||
<div class="info_icon"></div>
|
||||
<p>张三</p>
|
||||
</div>
|
||||
<!-- 涉毒人员 -->
|
||||
<div class="card_picture_right_cate">
|
||||
<span>涉毒人员</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 户籍 -->
|
||||
<div class="card_huji"><span>户籍</span></div>
|
||||
<!-- 现住 -->
|
||||
<div class="card_xianzhu"><span>现住</span></div>
|
||||
</div>
|
||||
<!-- -->
|
||||
<div class="box">
|
||||
<!-- 图片 -->
|
||||
<div class="card_picture">
|
||||
<!-- 照片 -->
|
||||
<div class="image"></div>
|
||||
<!-- 查看轨迹 -->
|
||||
<div class="card_picture_look">
|
||||
<span>查看轨迹</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 图片右边的个人介绍 -->
|
||||
<div class="card_picture_right">
|
||||
<div class="info">
|
||||
<div class="info_icon"></div>
|
||||
<p>张三</p>
|
||||
</div>
|
||||
<div class="info">
|
||||
<div class="info_icon"></div>
|
||||
<p>张三</p>
|
||||
</div>
|
||||
<div class="info">
|
||||
<div class="info_icon"></div>
|
||||
<p>张三</p>
|
||||
</div>
|
||||
<div class="info">
|
||||
<div class="info_icon"></div>
|
||||
<p class="text">张三asdasdaasdadasdasdsda</p>
|
||||
</div>
|
||||
|
||||
<div class="info">
|
||||
<div class="info_icon"></div>
|
||||
<p>张三</p>
|
||||
</div>
|
||||
<!-- 涉毒人员 -->
|
||||
<div class="card_picture_right_cate">
|
||||
<span>涉毒人员</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 户籍 -->
|
||||
<div class="card_huji"><span>户籍</span></div>
|
||||
<!-- 现住 -->
|
||||
<div class="card_xianzhu"><span>现住</span></div>
|
||||
</div>
|
||||
<!-- -->
|
||||
<div class="box">
|
||||
<!-- 图片 -->
|
||||
<div class="card_picture">
|
||||
<!-- 照片 -->
|
||||
<div class="image"></div>
|
||||
<!-- 查看轨迹 -->
|
||||
<div class="card_picture_look">
|
||||
<span>查看轨迹</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 图片右边的个人介绍 -->
|
||||
<div class="card_picture_right">
|
||||
<div class="info">
|
||||
<div class="info_icon"></div>
|
||||
<p>张三</p>
|
||||
</div>
|
||||
<div class="info">
|
||||
<div class="info_icon"></div>
|
||||
<p>张三</p>
|
||||
</div>
|
||||
<div class="info">
|
||||
<div class="info_icon"></div>
|
||||
<p>张三</p>
|
||||
</div>
|
||||
<div class="info">
|
||||
<div class="info_icon"></div>
|
||||
<p class="text">张三asdasdaasdadasdasdsda</p>
|
||||
</div>
|
||||
|
||||
<div class="info">
|
||||
<div class="info_icon"></div>
|
||||
<p>张三</p>
|
||||
</div>
|
||||
<!-- 涉毒人员 -->
|
||||
<div class="card_picture_right_cate">
|
||||
<span>涉毒人员</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 户籍 -->
|
||||
<div class="card_huji"><span>户籍</span></div>
|
||||
<!-- 现住 -->
|
||||
<div class="card_xianzhu"><span>现住</span></div>
|
||||
</div>
|
||||
<!-- -->
|
||||
<div class="box">
|
||||
<!-- 图片 -->
|
||||
<div class="card_picture">
|
||||
<!-- 照片 -->
|
||||
<div class="image"></div>
|
||||
<!-- 查看轨迹 -->
|
||||
<div class="card_picture_look">
|
||||
<span>查看轨迹</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 图片右边的个人介绍 -->
|
||||
<div class="card_picture_right">
|
||||
<div class="info">
|
||||
<div class="info_icon"></div>
|
||||
<p>张三</p>
|
||||
</div>
|
||||
<div class="info">
|
||||
<div class="info_icon"></div>
|
||||
<p>张三</p>
|
||||
</div>
|
||||
<div class="info">
|
||||
<div class="info_icon"></div>
|
||||
<p>张三</p>
|
||||
</div>
|
||||
<div class="info">
|
||||
<div class="info_icon"></div>
|
||||
<p class="text">张三asdasdaasdadasdasdsda</p>
|
||||
</div>
|
||||
|
||||
<div class="info">
|
||||
<div class="info_icon"></div>
|
||||
<p>张三</p>
|
||||
</div>
|
||||
<!-- 涉毒人员 -->
|
||||
<div class="card_picture_right_cate">
|
||||
<span>涉毒人员</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 户籍 -->
|
||||
<div class="card_huji"><span>户籍</span></div>
|
||||
<!-- 现住 -->
|
||||
<div class="card_xianzhu"><span>现住</span></div>
|
||||
</div>
|
||||
<!-- -->
|
||||
<div class="box">
|
||||
<!-- 图片 -->
|
||||
<div class="card_picture">
|
||||
<!-- 照片 -->
|
||||
<div class="image"></div>
|
||||
<!-- 查看轨迹 -->
|
||||
<div class="card_picture_look">
|
||||
<span>查看轨迹</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 图片右边的个人介绍 -->
|
||||
<div class="card_picture_right">
|
||||
<div class="info">
|
||||
<div class="info_icon"></div>
|
||||
<p>张三</p>
|
||||
</div>
|
||||
<div class="info">
|
||||
<div class="info_icon"></div>
|
||||
<p>张三</p>
|
||||
</div>
|
||||
<div class="info">
|
||||
<div class="info_icon"></div>
|
||||
<p>张三</p>
|
||||
</div>
|
||||
<div class="info">
|
||||
<div class="info_icon"></div>
|
||||
<p class="text">张三asdasdaasdadasdasdsda</p>
|
||||
</div>
|
||||
|
||||
<div class="info">
|
||||
<div class="info_icon"></div>
|
||||
<p>张三</p>
|
||||
</div>
|
||||
<!-- 涉毒人员 -->
|
||||
<div class="card_picture_right_cate">
|
||||
<span>涉毒人员</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 户籍 -->
|
||||
<div class="card_huji"><span>户籍</span></div>
|
||||
<!-- 现住 -->
|
||||
<div class="card_xianzhu"><span>现住</span></div>
|
||||
</div>
|
||||
<!-- -->
|
||||
<div class="box">
|
||||
<!-- 图片 -->
|
||||
<div class="card_picture">
|
||||
<!-- 照片 -->
|
||||
<div class="image"></div>
|
||||
<!-- 查看轨迹 -->
|
||||
<div class="card_picture_look">
|
||||
<span>查看轨迹</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 图片右边的个人介绍 -->
|
||||
<div class="card_picture_right">
|
||||
<div class="info">
|
||||
<div class="info_icon"></div>
|
||||
<p>张三</p>
|
||||
</div>
|
||||
<div class="info">
|
||||
<div class="info_icon"></div>
|
||||
<p>张三</p>
|
||||
</div>
|
||||
<div class="info">
|
||||
<div class="info_icon"></div>
|
||||
<p>张三</p>
|
||||
</div>
|
||||
<div class="info">
|
||||
<div class="info_icon"></div>
|
||||
<p class="text">张三asdasdaasdadasdasdsda</p>
|
||||
</div>
|
||||
|
||||
<div class="info">
|
||||
<div class="info_icon"></div>
|
||||
<p>张三</p>
|
||||
</div>
|
||||
<!-- 涉毒人员 -->
|
||||
<div class="card_picture_right_cate">
|
||||
<span>涉毒人员</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 户籍 -->
|
||||
<div class="card_huji"><span>户籍</span></div>
|
||||
<!-- 现住 -->
|
||||
<div class="card_xianzhu"><span>现住</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'keyInformantion',
|
||||
components: {},
|
||||
props: {},
|
||||
data() {
|
||||
return {
|
||||
play: true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
cardClose() {
|
||||
this.$emit('cardClose')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.live_all {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
z-index: 3;
|
||||
background: url(../../../assets/icon-hza/bg_6.png);
|
||||
background-size: 100% auto;
|
||||
background-repeat: no-repeat;
|
||||
.card_close {
|
||||
width: 1vw;
|
||||
height: 1.3vh;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 1.1vw;
|
||||
}
|
||||
.card_close:hover {
|
||||
background-color: #67fcff;
|
||||
opacity: 0.5;
|
||||
}
|
||||
.live_card {
|
||||
width: 90vw;
|
||||
height: 75vh;
|
||||
position: relative;
|
||||
|
||||
.live_card_header {
|
||||
margin-left: 1vw;
|
||||
margin-top: 2vh;
|
||||
font-size: 1vw;
|
||||
color: #fff;
|
||||
}
|
||||
.live_card_body {
|
||||
margin-top: 3vh;
|
||||
width: 87vw;
|
||||
height: 50vh;
|
||||
|
||||
margin-left: 3vh;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(5, 1fr);
|
||||
grid-template-rows: repeat(3, 1fr);
|
||||
gap: 1vw;
|
||||
.box {
|
||||
width: 16vw;
|
||||
height: 15vh;
|
||||
background-image: url(../../../assets/icon-hza/bg_right.png);
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
display: flex;
|
||||
position: relative;
|
||||
padding-left: 1vh;
|
||||
border: 1px solid #176ba1;
|
||||
|
||||
.card_huji {
|
||||
height: 2vh;
|
||||
position: absolute;
|
||||
right: 0.6vw;
|
||||
top: 7.3vh;
|
||||
color: #ffc426;
|
||||
}
|
||||
.card_xianzhu {
|
||||
height: 2vh;
|
||||
|
||||
position: absolute;
|
||||
right: 0.6vw;
|
||||
top: 9.8vh;
|
||||
color: #009cfe;
|
||||
}
|
||||
.card_picture {
|
||||
width: 4vw;
|
||||
height: 14vh;
|
||||
background-color: #fff;
|
||||
position: relative;
|
||||
margin-top: 0.5vh;
|
||||
.card_picture_look {
|
||||
width: 4vw;
|
||||
height: 2.5vh;
|
||||
background-image: url(../../../assets/icon-hza/bg_44.png);
|
||||
background-size: 100% auto;
|
||||
position: absolute;
|
||||
bottom: 0vh;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
display: flex;
|
||||
color: #fff;
|
||||
}
|
||||
.image {
|
||||
width: 4vw;
|
||||
height: 12.5vh;
|
||||
background-color: pink;
|
||||
}
|
||||
}
|
||||
.card_picture_right {
|
||||
width: 9.5vw;
|
||||
height: 14vh;
|
||||
margin-left: 1vh;
|
||||
margin-top: 0.5vh;
|
||||
.info {
|
||||
margin-bottom: 0.3vh;
|
||||
display: flex;
|
||||
color: #fff;
|
||||
.info_icon {
|
||||
width: 1vw;
|
||||
height: 2vh;
|
||||
background-color: #fff;
|
||||
margin-right: 0.5vw;
|
||||
}
|
||||
.text {
|
||||
width: 7vw;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
.card_picture_right_cate {
|
||||
height: 2.5vh;
|
||||
width: 4vw;
|
||||
background-color: #009cfe;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
display: flex;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,180 @@
|
||||
<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;
|
||||
}
|
||||
|
||||
.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,137 @@
|
||||
<template>
|
||||
<div class="carousel" ref="carousel">
|
||||
<el-carousel
|
||||
direction="vertical"
|
||||
:autoplay="true"
|
||||
:interval="4000"
|
||||
indicator-position="none"
|
||||
class="carousel_group"
|
||||
>
|
||||
<el-carousel-item
|
||||
class="carousel_item"
|
||||
v-for="(item, index) in groupItems"
|
||||
:key="index"
|
||||
>
|
||||
<div class="carousel_box" v-for="(group, index) in item" :key="index">
|
||||
<div class="carousel_box_left">
|
||||
<div class="label_item">警情类型 :</div>
|
||||
<div class="label_item">接警单位 :</div>
|
||||
<div class="label_item">事发地址 :</div>
|
||||
<div class="label_item">现住地址 :</div>
|
||||
</div>
|
||||
<div class="carousel_box_right">
|
||||
<div class="name_item" style="color: #00f5ff">机动车与机动车</div>
|
||||
<div class="name_item">射阳公安局</div>
|
||||
<div class="name_item">建湖县明星路与冠华路交界北边</div>
|
||||
<div class="name_item">江苏省射阳县海河镇革新村二组113号</div>
|
||||
<!-- 统计时间 -->
|
||||
<div class="count_time">2023-11-30 14:00:00</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-carousel-item>
|
||||
</el-carousel>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'PoliceScroll',
|
||||
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 += 2) {
|
||||
groups.push(this.items.slice(i, i + 2))
|
||||
}
|
||||
console.log(groups)
|
||||
return groups
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.carousel {
|
||||
width: 18vw;
|
||||
height: 28vh;
|
||||
|
||||
.carousel_group {
|
||||
margin: 0;
|
||||
height: 26vh;
|
||||
|
||||
.carousel_item {
|
||||
.carousel_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');
|
||||
}
|
||||
|
||||
.carousel_box_left {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
width: 4vw;
|
||||
color: #ecf4f9;
|
||||
text-align: center;
|
||||
font-size: 0.8rem;
|
||||
font-weight: normal;
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
}
|
||||
|
||||
.carousel_box_right {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: start;
|
||||
justify-content: space-around;
|
||||
width: 14vw;
|
||||
color: #edf1f7;
|
||||
font-size: 0.8rem;
|
||||
font-weight: normal;
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
position: relative;
|
||||
|
||||
.count_time {
|
||||
display: flex;
|
||||
justify-content: end;
|
||||
width: 10vw;
|
||||
height: 2vh;
|
||||
color: #ecf4f9;
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
line-height: 2vh;
|
||||
font-size: 0.8rem;
|
||||
position: absolute;
|
||||
top: 0.125rem;
|
||||
right: 0.125rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,22 +0,0 @@
|
||||
<!-- 警情统计 -->
|
||||
<template>
|
||||
<div class="police_status"></div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'PoliceStatus',
|
||||
data() {
|
||||
return {}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.police_status {
|
||||
margin-top: 2vh;
|
||||
width: 18vw;
|
||||
height: 41vh;
|
||||
background-color: #fa71ff;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,68 @@
|
||||
<!-- 警情统计 -->
|
||||
<template>
|
||||
<div class="police_status">
|
||||
<div class="police_status_header">
|
||||
<div class="police_status_text">警情统计</div>
|
||||
</div>
|
||||
<div class="police_status_body">
|
||||
<div class="police_status_body_charts"></div>
|
||||
<div class="police_status_body_scroll">
|
||||
<PoliceScroll></PoliceScroll>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import PoliceScroll from './policeScroll.vue'
|
||||
export default {
|
||||
name: 'PoliceStatus',
|
||||
components: { PoliceScroll },
|
||||
data() {
|
||||
return
|
||||
},
|
||||
mounted() {},
|
||||
methods: {},
|
||||
computed: {}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.police_status {
|
||||
margin-top: 2vh;
|
||||
width: 18vw;
|
||||
height: 47vh;
|
||||
// background-color: #fff;
|
||||
|
||||
.police_status_header {
|
||||
height: 4vh;
|
||||
background-image: url('@/assets/picture/bg_small_title.png');
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
|
||||
.police_status_text {
|
||||
margin-left: 2vw;
|
||||
font-size: 1vw;
|
||||
color: #edf1f7;
|
||||
line-height: 4vh;
|
||||
text-shadow: 0 0 10px #0b4672;
|
||||
}
|
||||
}
|
||||
|
||||
.police_status_body {
|
||||
height: 43vh;
|
||||
background-image: url('@/assets/picture/bg_5.png');
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
|
||||
.police_status_body_charts {
|
||||
height: 15vh;
|
||||
// background-color: #fb3f3f;
|
||||
}
|
||||
|
||||
.police_status_body_scroll {
|
||||
height: 28vh;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,77 +0,0 @@
|
||||
<template>
|
||||
<div class="carousel" ref="carousel">
|
||||
<h4>重点警情</h4>
|
||||
<el-carousel
|
||||
height="250px"
|
||||
direction="vertical"
|
||||
:autoplay="true"
|
||||
:interval="4000"
|
||||
indicator-position="none"
|
||||
>
|
||||
<el-carousel-item
|
||||
class="carousel-item"
|
||||
v-for="(item, index) in groupItems"
|
||||
:key="index"
|
||||
>
|
||||
<div
|
||||
class="box"
|
||||
v-for="group in item"
|
||||
:key="group.color"
|
||||
:style="{ backgroundColor: group.color }"
|
||||
>
|
||||
{{ group.name }}
|
||||
</div>
|
||||
</el-carousel-item>
|
||||
</el-carousel>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
neme: 'MapScrool',
|
||||
data() {
|
||||
return {
|
||||
items: [
|
||||
{ name: 'Box 1', color: 'red' },
|
||||
{ name: 'Box 1', color: 'blue' },
|
||||
{ name: 'Box 1', color: 'green' },
|
||||
{ name: 'Box 1', color: 'orange' },
|
||||
{ name: 'Box 1', color: 'yellow' },
|
||||
{ name: 'Box 1', color: 'pink' }
|
||||
]
|
||||
}
|
||||
},
|
||||
mounted() {},
|
||||
methods: {},
|
||||
computed: {
|
||||
groupItems() {
|
||||
let groups = []
|
||||
for (let i = 0; i < this.items.length; i += 2) {
|
||||
groups.push(this.items.slice(i, i + 2))
|
||||
}
|
||||
console.log(groups)
|
||||
return groups
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.carousel {
|
||||
margin-bottom: 10px;
|
||||
width: 20vw;
|
||||
height: 25vh;
|
||||
|
||||
h4 {
|
||||
margin: 10px 0 0 0;
|
||||
padding: 0;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.box {
|
||||
margin-top: 10px;
|
||||
height: 100px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,167 @@
|
||||
<template>
|
||||
<div id="carmain"></div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from 'echarts'
|
||||
export default {
|
||||
name: 'CarEcharts',
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
mounted() {
|
||||
// * echarts 实例
|
||||
const chartDom = document.getElementById('carmain')
|
||||
const myChart = echarts.init(chartDom)
|
||||
// * echarts 选项
|
||||
let option
|
||||
let app = {}
|
||||
const categories = (function () {
|
||||
let now = new Date()
|
||||
let res = []
|
||||
let len = 10
|
||||
while (len--) {
|
||||
res.unshift(now.toLocaleTimeString().replace(/^\D*/, ''))
|
||||
now = new Date(+now - 2000)
|
||||
}
|
||||
return res
|
||||
})()
|
||||
const categories2 = (function () {
|
||||
let res = []
|
||||
let len = 10
|
||||
while (len--) {
|
||||
res.push(10 - len - 1)
|
||||
}
|
||||
return res
|
||||
})()
|
||||
const data = (function () {
|
||||
let res = []
|
||||
let len = 10
|
||||
while (len--) {
|
||||
res.push(Math.round(Math.random() * 1000))
|
||||
}
|
||||
return res
|
||||
})()
|
||||
const data2 = (function () {
|
||||
let res = []
|
||||
let len = 0
|
||||
while (len < 10) {
|
||||
res.push(+(Math.random() * 10 + 5).toFixed(1))
|
||||
len++
|
||||
}
|
||||
return res
|
||||
})()
|
||||
option = {
|
||||
title: {
|
||||
// text: 'Dynamic Data'
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'cross',
|
||||
label: {
|
||||
backgroundColor: '#283b56'
|
||||
}
|
||||
}
|
||||
},
|
||||
legend: {},
|
||||
toolbox: {
|
||||
show: true,
|
||||
feature: {
|
||||
dataView: { readOnly: false },
|
||||
restore: {},
|
||||
saveAsImage: {}
|
||||
}
|
||||
},
|
||||
dataZoom: {
|
||||
show: false,
|
||||
start: 0,
|
||||
end: 100
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
boundaryGap: true,
|
||||
data: categories
|
||||
},
|
||||
{
|
||||
type: 'category',
|
||||
boundaryGap: true,
|
||||
data: categories2
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
scale: true,
|
||||
// name: 'Price',
|
||||
// max: 30,
|
||||
min: 0
|
||||
// boundaryGap: [0.2, 0.2]
|
||||
},
|
||||
{
|
||||
type: 'value',
|
||||
scale: true,
|
||||
// name: 'Order',
|
||||
// max: 1200,
|
||||
min: 0
|
||||
// boundaryGap: [0.2, 0.2]
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
// name: 'Dynamic Bar',
|
||||
type: 'bar',
|
||||
xAxisIndex: 1,
|
||||
yAxisIndex: 1,
|
||||
data: data
|
||||
},
|
||||
{
|
||||
// name: 'Dynamic Line',
|
||||
type: 'line',
|
||||
data: data2
|
||||
}
|
||||
]
|
||||
}
|
||||
app.count = 11
|
||||
setInterval(function () {
|
||||
let axisData = new Date().toLocaleTimeString().replace(/^\D*/, '')
|
||||
data.shift()
|
||||
data.push(Math.round(Math.random() * 1000))
|
||||
data2.shift()
|
||||
data2.push(+(Math.random() * 10 + 5).toFixed(1))
|
||||
categories.shift()
|
||||
categories.push(axisData)
|
||||
categories2.shift()
|
||||
categories2.push(app.count++)
|
||||
myChart.setOption({
|
||||
xAxis: [
|
||||
{
|
||||
data: categories
|
||||
},
|
||||
{
|
||||
data: categories2
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
data: data
|
||||
},
|
||||
{
|
||||
data: data2
|
||||
}
|
||||
]
|
||||
})
|
||||
}, 2100)
|
||||
|
||||
option && myChart.setOption(option)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
#carmain {
|
||||
width: 17vw;
|
||||
height: 30vh;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,101 @@
|
||||
<template>
|
||||
<div class="device_live">
|
||||
<div class="device_main">
|
||||
<div class="device_main_header">
|
||||
<div class="device_main_header_title">
|
||||
{{ title }}
|
||||
</div>
|
||||
<!-- 弹窗关闭按钮 -->
|
||||
<div class="device_main_header_box" @click="handleClose"></div>
|
||||
</div>
|
||||
<div class="device_main_body">
|
||||
<div class="live">
|
||||
<LivePlayer aspect="fullscreen"></LivePlayer>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import LivePlayer from '@liveqing/liveplayer'
|
||||
export default {
|
||||
name: 'DeviceLive',
|
||||
components: { LivePlayer },
|
||||
data() {
|
||||
return {
|
||||
title: '射阳幸福大道明湖大桥西侧东向西2(标卡)'
|
||||
}
|
||||
},
|
||||
created() {},
|
||||
mounted() {},
|
||||
methods: {
|
||||
handleClose() {
|
||||
this.$emit('updateClose')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.device_live {
|
||||
width: 70vw;
|
||||
height: 70vh;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
z-index: 3;
|
||||
|
||||
.device_main {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: start;
|
||||
background: url('@/assets/picture/bg_popup__middle.png') no-repeat;
|
||||
background-size: 100% 100%;
|
||||
|
||||
.device_main_header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
height: 4.6vh;
|
||||
|
||||
.device_main_header_title {
|
||||
margin-left: 1vw;
|
||||
color: #bfe7f9;
|
||||
font-size: 0.8rem;
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
font-weight: 500;
|
||||
line-height: 4.6vh;
|
||||
text-shadow: 0 0 3px rgba($color: #a7dbf3, $alpha: 0.66);
|
||||
}
|
||||
|
||||
.device_main_header_box {
|
||||
margin-right: 0.55vw;
|
||||
width: 2.6vh;
|
||||
height: 2.6vh;
|
||||
|
||||
&:hover {
|
||||
border-radius: 3px;
|
||||
border: 1px solid #09d7e9;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.device_main_body {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 65.4vh;
|
||||
|
||||
.live {
|
||||
.player-wrapper {
|
||||
width: 66vw;
|
||||
height: 60vh;
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in new issue