2323/12/07/15.21

dev
何峥傲 1 year ago
parent a4f4a5e01c
commit 4d8a0b2922

@ -27,6 +27,15 @@ export const keyPersonnelAPI = (data) => {
})
}
//*重点人员信息(轮播)
export const MetaImpUserInfo = (data) => {
return request({
url: '/base/metaImpUserInfo',
method: 'get',
data
})
}
// * 警力分布
export const PoliceForceDistributionAPI = (data) => {
return request({
@ -36,6 +45,22 @@ export const PoliceForceDistributionAPI = (data) => {
})
}
// * 警情统计
export const PoliceStatisticsAPI = (data) => {
return request({
url: '/base/bigscreen/policeSituationStatistics',
method: 'post',
data
})
}
// * 警情信息表
export const MetaAlarmInfo = (data) => {
return request({
url: '/base/metaAlarmInfo',
method: 'get',
data
})
}
// * 涉海要素
export const seaRelatedElementsAPI = (data) => {
return request({

@ -1,32 +1,36 @@
import axios from 'axios'
import vm from "../main";
import vm from '../main'
import { getToken } from '@/utils/auth'
axios.defaults.headers['Content-Type'] = 'application/json;charset=utf-8'
const request = axios.create({
baseURL: 'http://50.146.63.43:1129/hjapi',
//baseURL: 'http://121.41.91.94:12002/hjapi',
//baseURL: `http://${window.location.host}/hjapi`,
// baseURL: 'http://121.41.91.94:12524/hjapi/', //外网
timeout: 50000,
headers: { 'content-type': 'application/json' },
headers: { 'content-type': 'application/json' }
})
// request拦截器
request.interceptors.request.use(config => {
// 是否需要设置 token
const isToken = (config.headers || {}).isToken === false
// 是否需要防止数据重复提交
if (getToken() && !isToken) {
config.headers['Authorization'] = 'Bearer ' + getToken() // 让每个请求携带自定义token 请根据实际情况自行修改
request.interceptors.request.use(
(config) => {
// 是否需要设置 token
const isToken = (config.headers || {}).isToken === false
// 是否需要防止数据重复提交
if (getToken() && !isToken) {
config.headers['Authorization'] = 'Bearer ' + getToken() // 让每个请求携带自定义token 请根据实际情况自行修改
}
//防止重复提交
return config
},
(error) => {
console.log(error)
Promise.reject(error)
}
//防止重复提交
return config
}, error => {
console.log(error)
Promise.reject(error)
})
)
// response 拦截器
// 可以在接口响应后统一处理结果
request.interceptors.response.use(
response => {
(response) => {
if (response.data) {
switch (response.data.code) {
case 200:
@ -36,7 +40,9 @@ request.interceptors.response.use(
}
// 兼容服务端返回的字符串数据
if (typeof response.data === 'string') {
response.data = response.data ? JSON.parse(response.data) : response.data
response.data = response.data
? JSON.parse(response.data)
: response.data
}
return response.data
@ -66,17 +72,14 @@ request.interceptors.response.use(
duration: 3
})
return response.data
}
}
},
error => {
(error) => {
console.log('err' + error) // for debug
return Promise.reject(error)
}
)
export default request

@ -14,7 +14,7 @@
<!-- 占位 -->
<div class="num_blank"></div>
<div class="num_text">重点人员</div>
<div class="num_value">654332</div>
<div class="num_value">{{ importpeople.keyPersonnelCount }}</div>
</div>
<div class="echart_box" id="charts"></div>
</div>
@ -26,8 +26,8 @@
<div class="color_box one"></div>
</div>
<!-- 图例文字 -->
<div class="num_text">人员</div>
<div class="num_proportion">34%</div>
<div class="num_text">人员</div>
<div class="num_proportion">{{ importpeople.swrybl }}</div>
</div>
<div class="num_item">
<!-- 图例颜色 -->
@ -35,8 +35,8 @@
<div class="color_box two"></div>
</div>
<!-- 图例文字 -->
<div class="num_text">人员</div>
<div class="num_proportion">20%</div>
<div class="num_text">军访人员</div>
<div class="num_proportion">{{ importpeople.sjfrybl }}</div>
</div>
<div class="num_item">
<!-- 图例颜色 -->
@ -44,8 +44,8 @@
<div class="color_box three"></div>
</div>
<!-- 图例文字 -->
<div class="num_text">精神病人</div>
<div class="num_proportion">4%</div>
<div class="num_text">治安管控人员</div>
<div class="num_proportion">{{ importpeople.zagkrybl }}</div>
</div>
<div class="num_item">
<!-- 图例颜色 -->
@ -53,8 +53,8 @@
<div class="color_box four"></div>
</div>
<!-- 图例文字 -->
<div class="num_text">在逃人员</div>
<div class="num_proportion">17%</div>
<div class="num_text">内保重点人员</div>
<div class="num_proportion">{{ importpeople.nbzdrybl }}</div>
</div>
<div class="num_item">
<!-- 图例颜色 -->
@ -62,37 +62,30 @@
<div class="color_box five"></div>
</div>
<!-- 图例文字 -->
<div class="num_text">涉稳人员</div>
<div class="num_proportion">4%</div>
<div class="num_text">其他利益群体</div>
<div class="num_proportion">{{ importpeople.qtlyqt }}</div>
</div>
</div>
</div>
<!-- 滚动区域 -->
<div class="roll_body">
<ul class="marquee-list" :class="{ 'animate-up': animateUp }">
<li v-for="(item, index) in roll_list" :key="index">
<li v-for="item in roll_list" :key="item.id">
<div class="roll_item_left">
<div
class="roll_item_pic"
:style="{ backgroundImage: `url(${item.pic})` }"
></div>
<div class="roll_item_pic">
<img src="item.userPic" alt="" />
</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 class="person_type one_type">
{{ item.impUserType }}
</div>
<div
v-else-if="item.per_type == '2'"
class="person_type two_type"
>
{{ item.type_text }}
<div class="person_type two_type">
{{ item.impUserType }}
</div>
<div
v-else-if="item.per_type == '3'"
class="person_type three_type"
>
{{ item.type_text }}
<div class="person_type three_type">
{{ item.impUserType }}
</div>
<!-- 信息展示 -->
<div class="right_text">
@ -103,16 +96,16 @@
<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.phone_num }}</div>
<div class="right_value_item">{{ item.userName }}</div>
<div class="right_value_item">{{ item.phone }}</div>
<div class="right_value_item" :title="item.id_card">
{{ item.id_card }}
{{ item.idCard }}
</div>
<div class="right_value_item" :title="item.old_address">
{{ item.old_address }}
{{ item.houseHoldAddress }}
</div>
<div class="right_value_item" :title="item.new_address">
{{ item.new_address }}
{{ item.habitationAddress }}
</div>
</div>
</div>
@ -125,112 +118,16 @@
<script>
import * as echarts from 'echarts'
import EleResize from '@/utils/esresize'
import { keyPersonnelAPI, MetaImpUserInfo } from '@/api/coastalMap/resource'
// import PersonScroll from './keypersonScroll.vue'
export default {
name: 'KeyPerson',
// components: { PersonScroll },
data() {
return {
title_text: '重点人员',
roll_list: [
{
text: '123',
per_type: '1',
type_text: '在逃人员',
person_name: '周大山',
phone_num: '13455674532',
id_card: '321287197606038965',
old_address: '射阳县解放路74号',
new_address: '江苏省射阳县海河镇革新村二组112号',
pic: require('@/assets/people-picture/people-cacth/people-1.jpg')
},
{
text: '1243',
per_type: '3',
type_text: '涉恐人员',
person_name: '王富强',
phone_num: '13455674532',
id_card: '321287197606038965',
old_address: '射阳县解放路74号',
new_address: '江苏省射阳县合德镇解放路192号',
pic: require('@/assets/people-picture/people-cacth/people-2.jpg')
},
{
text: '12323',
per_type: '2',
type_text: '精神病人',
person_name: '赵磊',
phone_num: '13455674532',
id_card: '321287197606038965',
old_address: '射阳县解放路74号',
new_address: '江苏省射阳县大兴镇合顺三组',
pic: require('@/assets/people-picture/people-cacth/people-3.jpg')
},
{
text: '1243',
per_type: '2',
type_text: '精神病人',
person_name: '徐永',
phone_num: '13455674532',
id_card: '321287197606038965',
old_address: '射阳县解放路74号',
new_address: '江苏省射阳县海通镇射阳渔业大队',
pic: require('@/assets/people-picture/people-cacth/people-1.jpg')
},
{
text: '1223',
per_type: '2',
type_text: '精神病人',
person_name: '李文一',
phone_num: '13455674532',
id_card: '321287197606038965',
old_address: '射阳县解放路74号',
new_address: '江苏省射阳县合德镇解放路192号',
pic: require('@/assets/people-picture/people-cacth/people-2.jpg')
},
{
text: '1223',
per_type: '1',
type_text: '在逃人员',
person_name: '谭静',
phone_num: '13455674532',
id_card: '321287197606038965',
old_address: '射阳县解放路74号',
new_address: '江苏省射阳县海河镇革新村二组110号',
pic: require('@/assets/people-picture/people-cacth/people-3.jpg')
},
{
text: '1243',
per_type: '3',
type_text: '涉恐人员',
person_name: '孙洋洋',
phone_num: '13455674532',
id_card: '321287197606038965',
old_address: '射阳县解放路74号',
new_address: '江苏省射阳县大兴镇合顺三组',
pic: require('@/assets/people-picture/people-cacth/people-1.jpg')
},
{
text: '1223',
per_type: '1',
type_text: '在逃人员',
person_name: '董磊',
phone_num: '13455674532',
id_card: '321287197606038965',
old_address: '射阳县解放路74号',
new_address: '江苏省射阳县海河镇革新村二组120号',
pic: require('@/assets/people-picture/people-cacth/people-2.jpg')
},
{
text: '1223',
per_type: '2',
type_text: '精神病人',
person_name: '郑廖',
phone_num: '13455674532',
id_card: '321287197606038965',
old_address: '射阳县解放路74号',
new_address: '江苏省射阳县海河镇革新村二组113号',
pic: require('@/assets/people-picture/people-cacth/people-3.jpg')
}
],
importpeople: {},
roll_list: [],
animateUp: false,
timer: null
}
@ -239,6 +136,10 @@ export default {
this.init_charts()
this.timer = setInterval(this.scrollAnimate, 1500)
},
created() {
this.onkeyPersonnelAPI()
this.onMetaImpUserInfo()
},
methods: {
init_charts() {
let charts = document.getElementById('charts')
@ -264,11 +165,11 @@ export default {
type: 'pie',
radius: ['50%', '90%'],
data: [
{ value: 80048, name: '涉恐人员' },
{ value: 70135, name: '涉人员' },
{ value: 20180, name: '精神病人' },
{ value: 31484, name: '在逃人员' },
{ value: 11484, name: '涉稳人员' }
{ value: 11915, name: '涉稳人员' },
{ value: 70135, name: '涉军访人员' },
{ value: 20180, name: '治安防控人员' },
{ value: 31484, name: '内保重点人员' },
{ value: 11484, name: '其他利益群体' }
],
label: {
normal: {
@ -299,7 +200,19 @@ export default {
this.roll_list.push(this.roll_list[0])
this.roll_list.shift()
this.animateUp = false
}, 2000)
}, 500)
},
//
async onkeyPersonnelAPI() {
const res = await keyPersonnelAPI()
this.importpeople = res.data
},
//()
async onMetaImpUserInfo() {
const res = await MetaImpUserInfo()
// console.log(res.rows, 'oooo')
this.roll_list = res.rows
console.log(this.roll_list, 'aaaa')
}
}
}
@ -391,7 +304,7 @@ export default {
height: 4vh;
display: flex;
.num_color {
width: 2vw;
width: 1vw;
height: 4vh;
display: flex;
justify-content: center;
@ -417,7 +330,7 @@ export default {
}
}
.num_text {
width: 4vw;
width: 6vw;
color: aliceblue;
text-align: center;
line-height: 4vh;
@ -463,9 +376,7 @@ export default {
.roll_item_pic {
width: 5vw;
height: 10vh;
// background: #0b4672;
background-repeat: no-repeat;
background-size: 100% auto;
background: #0b4672;
}
.roll_item_btn {
width: 5vw;

@ -27,9 +27,9 @@ export default {
return {
// *
policeData: [
{ num: '20', text: '派出所' },
{ num: '4', text: '警务室' },
{ num: '6244', text: '执法警员' }
{ num: '', text: '派出所' },
{ num: '', text: '警务室' },
{ num: '', text: '执法警员' }
],
// *
policeSpreadData: {}
@ -45,6 +45,7 @@ export default {
this.policeData[0].num = res.data.pcsCount
this.policeData[1].num = res.data.jwsCount
this.policeData[2].num = res.data.zfjyCount
// console.log(res, '')
}
}

@ -10,15 +10,9 @@
<div class="police_status_box">
<!-- 左边占比 -->
<div class="rank_left">
<div class="rank_left_item">
<div class="one">1</div>
</div>
<div class="rank_left_item">
<div class="two">2</div>
</div>
<div class="rank_left_item">
<div class="three">3</div>
</div>
<div class="rank_left_item one">1</div>
<div class="rank_left_item two">2</div>
<div class="rank_left_item three">3</div>
</div>
<div class="charts_right" id="charts_right"></div>
</div>
@ -29,7 +23,7 @@
<ul class="marquee-list" :class="{ 'animate-up': animateUp }">
<li v-for="item in roll_list" :key="item.id">
<div class="roll_item">
<div class="time_box">{{ item.police_time }}</div>
<div class="time_box">{{ item.createTime }}</div>
<div class="roll_item_left">
<div class="roll_item_text">警情类型</div>
<div class="roll_item_text">接警单位</div>
@ -37,11 +31,14 @@
<div class="roll_item_text">报警内容</div>
</div>
<div class="roll_item_right">
<div class="roll_item_value">{{ item.type }}</div>
<div class="roll_item_value">{{ item.unit }}</div>
<div class="roll_item_value">{{ item.address }}</div>
<div class="roll_item_value">
:
{{ item.alarmResponseTypeName }}
</div>
<div class="roll_item_value">:{{ item.alarmResponseUnit }}</div>
<div class="roll_item_value">:{{ item.alarmAddress }}</div>
<div class="roll_item_value" :title="item.now_address">
{{ item.now_address }}
{{ item.alarmResponseContent }}
</div>
</div>
</div>
@ -56,79 +53,82 @@
// import PoliceScroll from "./policeScroll.vue";
import * as echarts from 'echarts'
import EleResize from '@/utils/esresize'
import { PoliceStatisticsAPI, MetaAlarmInfo } from '@/api/coastalMap/resource'
export default {
name: 'PoliceStatus',
components: {
//PoliceScroll
},
data() {
return {
y_data: ['调解案件', '行政处罚案件', '当场处罚案件'], // y
value: '1',
y_data: ['其他纠纷', '家庭纠纷', '其他警情'], // y
chart_data: ['145', '29', '101'], // chart
roll_list: [
{
id: '1',
type: '机动车',
unit: '射阳公安局',
address: '建湖县明星路与冠华路交界处北边',
police_time: '2023-11-24 13:21:17',
now_address:
'报警人萧婷在建湖县明星路与冠华路交界处北边轿车苏J8MZ63、苏J3KC06相撞。(建湖64号,内线(86158110)) '
},
{
id: '2',
type: '机动车',
unit: '射阳公安局',
address: '建湖县明星路与冠华路交界处北边',
police_time: '2023-11-22 14:20:17',
now_address:
'报警人萧婷在建湖县明星路与冠华路交界处北边轿车苏J8MZ63、苏J3KC06相撞。(建湖64号,内线(86158110)) '
},
{
id: '3',
type: '机动车',
unit: '射阳公安局',
address: '建湖县明星路与冠华路交界处北边',
police_time: '2023-11-21 09:20:17',
now_address:
'报警人萧婷在建湖县明星路与冠华路交界处北边轿车苏J8MZ63、苏J3KC06相撞。(建湖64号,内线(86158110)) '
},
{
id: '4',
type: '机动车',
unit: '射阳公安局',
address: '建湖县明星路与冠华路交界处北边',
police_time: '2023-12-03 14:35:17',
now_address:
'报警人萧婷在建湖县明星路与冠华路交界处北边轿车苏J8MZ63、苏J3KC06相撞。(建湖64号,内线(86158110)) '
},
{
id: '5',
type: '机动车',
unit: '射阳公安局',
address: '建湖县明星路与冠华路交界处北边',
police_time: '2023-12-02 13:21:16',
now_address:
'报警人萧婷在建湖县明星路与冠华路交界处北边轿车苏J8MZ63、苏J3KC06相撞。(建湖64号,内线(86158110)) '
},
{
id: '6',
type: '机动车',
unit: '射阳公安局',
address: '建湖县明星路与冠华路交界处北边',
police_time: '2023-12-04 13:20:17',
now_address:
'报警人萧婷在建湖县明星路与冠华路交界处北边轿车苏J8MZ63、苏J3KC06相撞。(建湖64号,内线(86158110)) '
},
{
id: '7',
type: '机动车',
unit: '射阳公安局',
address: '建湖县明星路与冠华路交界处北边',
police_time: '2023-11-15 13:23:17',
now_address:
'报警人萧婷在建湖县明星路与冠华路交界处北边轿车苏J8MZ63、苏J3KC06相撞。(建湖64号,内线(86158110)) '
}
// {
// id: '1',
// type: '',
// unit: '',
// address: '',
// police_time: '2023-11-24 13:21:17',
// now_address:
// '轿J8MZ63J3KC06(64,线(86158110)) '
// },
// {
// id: '2',
// type: '',
// unit: '',
// address: '',
// police_time: '2023-11-22 14:20:17',
// now_address:
// '轿J8MZ63J3KC06(64,线(86158110)) '
// },
// {
// id: '3',
// type: '',
// unit: '',
// address: '',
// police_time: '2023-11-21 09:20:17',
// now_address:
// '轿J8MZ63J3KC06(64,线(86158110)) '
// },
// {
// id: '4',
// type: '',
// unit: '',
// address: '',
// police_time: '2023-12-03 14:35:17',
// now_address:
// '轿J8MZ63J3KC06(64,线(86158110)) '
// },
// {
// id: '5',
// type: '',
// unit: '',
// address: '',
// police_time: '2023-12-02 13:21:16',
// now_address:
// '轿J8MZ63J3KC06(64,线(86158110)) '
// },
// {
// id: '6',
// type: '',
// unit: '',
// address: '',
// police_time: '2023-12-04 13:20:17',
// now_address:
// '轿J8MZ63J3KC06(64,线(86158110)) '
// },
// {
// id: '7',
// type: '',
// unit: '',
// address: '',
// police_time: '2023-11-15 13:23:17',
// now_address:
// '轿J8MZ63J3KC06(64,线(86158110)) '
// }
],
animateUp: false,
timer: null
@ -138,6 +138,11 @@ export default {
this.init_charts()
this.timer = setInterval(this.scrollAnimate, 1500)
},
created() {
this.onPoliceStatistics()
this.onMetaAlarmInfo()
},
methods: {
init_charts() {
let charts = document.getElementById('charts_right')
@ -184,7 +189,6 @@ export default {
series: [
{
data: this.chart_data,
barWidth: '20%',
type: 'bar',
showBackground: true,
itemStyle: {
@ -192,7 +196,6 @@ export default {
colorStops: [
{
offset: 0,
barWidth: '30%',
color: '#1A416B' // 0%
},
{
@ -224,6 +227,20 @@ export default {
this.roll_list.shift()
this.animateUp = false
}, 500)
},
// eacharts
async onPoliceStatistics() {
const res = await PoliceStatisticsAPI()
console.log(res)
// res.data.forEach((element) => {
// this.y_data.push(element.alarmResponseTypeName)
// })
},
//
async onMetaAlarmInfo() {
const res = await MetaAlarmInfo()
this.roll_list = res.rows
console.log(this.roll_listc, 'oooppp')
}
}
}
@ -276,47 +293,17 @@ export default {
.rank_left_item {
width: 3vw;
height: 6vh;
display: flex;
justify-content: center;
align-items: center;
.one {
color: #ecf4f9;
font-size: 18px;
font-weight: 600;
text-align: center;
line-height: 4vh;
width: 2vw;
height: 4vh;
background: url('~@/assets/coastalMap/policeStatus/rank_one.png')
no-repeat;
background-size: 100% 100%;
}
.two {
color: #ecf4f9;
font-size: 18px;
font-weight: 600;
text-align: center;
line-height: 4vh;
width: 2vw;
height: 4vh;
background: url('~@/assets/coastalMap/policeStatus/rank_two.png')
no-repeat;
background-size: 100% 100%;
}
.three {
color: #ecf4f9;
font-size: 18px;
font-weight: 600;
text-align: center;
line-height: 4vh;
width: 2vw;
height: 4vh;
background: url('~@/assets/coastalMap/policeStatus/rank_three.png')
no-repeat;
background-size: 100% 100%;
}
color: #ecf4f9;
font-size: 18px;
font-weight: 600;
text-align: center;
line-height: 6vh;
}
.one {
background: url('~@/assets/coastalMap/policeStatus/rank_one.png')
no-repeat;
background-size: 100% 100%;
}
.two {
background: url('~@/assets/coastalMap/policeStatus/rank_two.png')
no-repeat;

@ -11,29 +11,25 @@
<!-- 占位 -->
<div class="box_item_blank"></div>
<div class="box_item_text">实有人口</div>
<div class="box_item_value">
{{ resourceData.actualUserSyrkCount || 32677 }}
</div>
<div class="box_item_value">{{ resourceData.actualUserSyrkCount }}</div>
</div>
<div class="resource_box_item two">
<!-- 占位 -->
<div class="box_item_blank"></div>
<div class="box_item_text">流动人口</div>
<div class="box_item_value">
{{ resourceData.actualUserLdrkCount || 4611 }}
</div>
<div class="box_item_value">{{ resourceData.actualUserLdrkCount }}</div>
</div>
<div class="resource_box_item three">
<!-- 占位 -->
<div class="box_item_blank"></div>
<div class="box_item_text">实有房屋</div>
<div class="box_item_value">{{ resourceData.countSyfw || 20000 }}</div>
<div class="box_item_value">{{ resourceData.countSyfw }}</div>
</div>
<div class="resource_box_item four">
<!-- 占位 -->
<div class="box_item_blank"></div>
<div class="box_item_text">实有单位</div>
<div class="box_item_value">{{ resourceData.countSydw || 10009 }}</div>
<div class="box_item_value">{{ resourceData.countSydw }}</div>
</div>
</div>
</div>
@ -48,7 +44,7 @@ export default {
type: Object
}
},
name: 'Resource',
name: 'ResouRce',
data() {
return {
title_text: '资源概况'

Loading…
Cancel
Save