You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
577 lines
16 KiB
577 lines
16 KiB
<template> |
|
<el-scrollbar height="100vh"> |
|
<div class="wrapper"> |
|
<datav-header/> |
|
<el-row> |
|
<el-col :span="6"></el-col> |
|
<el-col :span="12"> |
|
<div class="datav-col"> |
|
<span style="font-size: 22px">执法监督灵敏感知体系</span> |
|
</div> |
|
<div class="datav-col"> |
|
<datav-date-picker v-model="time"/> |
|
</div> |
|
<div class="flex gap-42"> |
|
<datav-statistic |
|
:value="statisticsTotal.aTotal" |
|
title="接处警" |
|
isDecimal |
|
style="width: 20%" |
|
/> |
|
<datav-statistic |
|
:value="statisticsTotal.caseTotal" |
|
title="执法办案" |
|
isDecimal |
|
style="width: 20%" |
|
/> |
|
<datav-statistic |
|
:value="statisticsTotal.negativeTotal" |
|
isDecimal |
|
title="总问题数" |
|
style="width: 20%" |
|
/> |
|
<datav-statistic |
|
:value="statisticsTotal.peopleCount" |
|
isDecimal |
|
title="涉及人数" |
|
style="width: 20%" |
|
/> |
|
<datav-statistic |
|
:value="statisticsTotal.avgPeople" |
|
title="人均问题数" |
|
isDecimal="true" |
|
style="width: 20%" |
|
/> |
|
</div> |
|
</el-col> |
|
<el-col :span="6"></el-col> |
|
</el-row> |
|
<el-row style="margin-top: 20px" :gutter="16"> |
|
<el-col :span="8"> |
|
<datav-card> |
|
<div class="card-header"> |
|
<span class="card-title">分县市局</span> |
|
<div class="select-container"> |
|
<el-select v-model="type1" placeholder="请选择指标"> |
|
<el-option label="涉及问题数" value="涉及问题数"></el-option> |
|
<el-option label="涉及人数" value="涉及人数"></el-option> |
|
<el-option label="人均问题数（查实）" value="人均问题数（查实）"></el-option> |
|
</el-select> |
|
</div> |
|
</div> |
|
<datav-tabs |
|
type="bottom-button" |
|
ref="rxsjTabs" |
|
v-model="groupId1" |
|
> |
|
<datav-tab-item label="高业务量" name="23"> |
|
<el-scrollbar height="200px"> |
|
<datav-chart-bar-fixbug |
|
:data="list1" |
|
size="small" |
|
:color="colors" |
|
/> |
|
</el-scrollbar> |
|
</datav-tab-item> |
|
<datav-tab-item label="中业务量" name="24"> |
|
<el-scrollbar height="200px"> |
|
<datav-chart-bar-fixbug |
|
:data="list1" |
|
:max="11" |
|
size="small" |
|
:color="colors" |
|
/> |
|
</el-scrollbar> |
|
</datav-tab-item> |
|
<datav-tab-item label="低业务量" name="25"> |
|
<el-scrollbar height="200px"> |
|
<datav-chart-bar-fixbug |
|
:data="list1" |
|
:max="11" |
|
size="small" |
|
:color="colors" |
|
/> |
|
</el-scrollbar> |
|
</datav-tab-item> |
|
</datav-tabs> |
|
</datav-card> |
|
</el-col> |
|
<el-col :span="8"> |
|
<datav-card> |
|
<div class="card-header"> |
|
<span class="card-title">派出所</span> |
|
<div class="select-container"> |
|
<el-select v-model="type2" placeholder="请选择指标"> |
|
<el-option label="涉及问题数" value="涉及问题数"></el-option> |
|
<el-option label="涉及人数" value="涉及人数"></el-option> |
|
<el-option label="人均问题数（查实）" value="人均问题数（查实）"></el-option> |
|
</el-select> |
|
</div> |
|
</div> |
|
<datav-tabs |
|
type="bottom-button" |
|
ref="pcsTabs" |
|
v-model="groupId2" |
|
> |
|
<datav-tab-item label="高业务量" name="17"> |
|
<el-scrollbar height="200px"> |
|
<datav-chart-bar-fixbug |
|
:data="list2" |
|
clickable |
|
@item-click="openDetail($event, 'depart')" |
|
size="small" |
|
:color="colors" |
|
/> |
|
</el-scrollbar> |
|
</datav-tab-item> |
|
<datav-tab-item label="中业务量" name="18"> |
|
<el-scrollbar height="200px"> |
|
<datav-chart-bar-fixbug |
|
:data="list2" |
|
clickable |
|
@item-click="openDetail($event, 'depart')" |
|
:max="11" |
|
size="small" |
|
:color="colors" |
|
/> |
|
</el-scrollbar> |
|
</datav-tab-item> |
|
<datav-tab-item label="低业务量" name="19"> |
|
<el-scrollbar height="200px"> |
|
<datav-chart-bar-fixbug |
|
:data="list2" |
|
clickable |
|
@item-click="openDetail($event, 'depart')" |
|
:max="11" |
|
size="small" |
|
:color="colors" |
|
/> |
|
</el-scrollbar> |
|
</datav-tab-item> |
|
</datav-tabs> |
|
</datav-card> |
|
</el-col> |
|
<el-col :span="8"> |
|
<datav-card> |
|
<div class="card-header"> |
|
<span class="card-title">交警大队</span> |
|
<div class="select-container"> |
|
<el-select v-model="type3" placeholder="请选择指标"> |
|
<el-option label="涉及问题数" value="涉及问题数"></el-option> |
|
<el-option label="涉及人数" value="涉及人数"></el-option> |
|
<el-option label="人均问题数（查实）" value="人均问题数（查实）"></el-option> |
|
</el-select> |
|
</div> |
|
</div> |
|
<datav-tabs |
|
type="bottom-button" |
|
ref="jjddTabs" |
|
v-model="groupId3" |
|
> |
|
<datav-tab-item label="高业务量" name="20"> |
|
<el-scrollbar height="200px"> |
|
<datav-chart-bar-fixbug |
|
:data="list3" |
|
clickable |
|
@item-click="openDetail($event, 'depart')" |
|
size="small" |
|
:color="colors" |
|
/> |
|
</el-scrollbar> |
|
</datav-tab-item> |
|
<datav-tab-item label="中业务量" name="21"> |
|
<el-scrollbar height="200px"> |
|
<datav-chart-bar-fixbug |
|
:data="list3" |
|
clickable |
|
@item-click="openDetail($event, 'depart')" |
|
:max="11" |
|
size="small" |
|
:color="colors" |
|
/> |
|
</el-scrollbar> |
|
</datav-tab-item> |
|
<datav-tab-item label="低业务量" name="22"> |
|
<el-scrollbar height="200px"> |
|
<datav-chart-bar-fixbug |
|
:data="list3" |
|
clickable |
|
@item-click="openDetail($event, 'depart')" |
|
:max="11" |
|
size="small" |
|
:color="colors" |
|
/> |
|
</el-scrollbar> |
|
</datav-tab-item> |
|
</datav-tabs> |
|
</datav-card> |
|
</el-col> |
|
</el-row> |
|
|
|
<el-row style="margin-top: 20px" :gutter="16"> |
|
<el-col :span="8"> |
|
<datav-card> |
|
<div class="card-header"> |
|
<span class="card-title">领导</span> |
|
<div class="select-container"> |
|
<el-select v-model="groupId4" placeholder="请选择指标"> |
|
<el-option label="派出所" value="10"></el-option> |
|
<el-option label="交警" value="11"></el-option> |
|
</el-select> |
|
</div> |
|
</div> |
|
<el-scrollbar height="200px"> |
|
<datav-chart-bar-fixbug |
|
:data="list4" |
|
clickable |
|
@item-click="openDetail($event, 'police')" |
|
size="small" |
|
:color="colors" |
|
/> |
|
</el-scrollbar> |
|
<div class="statistic-label">统计指标：问题数</div> |
|
</datav-card> |
|
</el-col> |
|
<el-col :span="8"> |
|
<datav-card> |
|
<div class="card-header"> |
|
<span class="card-title">民警</span> |
|
<div class="select-container"> |
|
<el-select v-model="groupId5" placeholder="请选择指标"> |
|
<el-option label="派出所" value="10"></el-option> |
|
<el-option label="交警" value="11"></el-option> |
|
</el-select> |
|
</div> |
|
</div> |
|
<el-scrollbar height="200px"> |
|
<datav-chart-bar-fixbug |
|
:data="list5" |
|
clickable |
|
@item-click="openDetail($event, 'police')" |
|
size="small" |
|
:color="colors" |
|
/> |
|
</el-scrollbar> |
|
<div class="statistic-label">统计指标：问题数</div> |
|
</datav-card> |
|
</el-col> |
|
<el-col :span="8"> |
|
<datav-card> |
|
<div class="card-header"> |
|
<span class="card-title">协辅警</span> |
|
<div class="select-container"> |
|
<el-select v-model="groupId6" placeholder="请选择指标"> |
|
<el-option label="派出所" value="10"></el-option> |
|
<el-option label="交警" value="11"></el-option> |
|
</el-select> |
|
</div> |
|
</div> |
|
<el-scrollbar height="200px"> |
|
<datav-chart-bar-fixbug |
|
:data="list6" |
|
clickable |
|
@item-click="openDetail($event, 'police')" |
|
size="small" |
|
:color="colors" |
|
/> |
|
</el-scrollbar> |
|
<div class="statistic-label">统计指标：问题数</div> |
|
</datav-card> |
|
</el-col> |
|
</el-row> |
|
<negativeInfo-depart-dialog |
|
v-model="departDetailOpen" |
|
:depart-id="detailId" |
|
:initial-time="detailTime" |
|
/> |
|
<negativeInfo-police-dialog |
|
v-model="policeDetailOpen" |
|
:id-code="detailId" |
|
:profile-scope="profileScope" |
|
:initial-time="detailTime" |
|
/> |
|
</div> |
|
</el-scrollbar> |
|
</template> |
|
<script setup> |
|
|
|
import { |
|
totalStatistics, |
|
cityNegative, |
|
threeNegative, |
|
leadNegative, |
|
policeNegative, |
|
auxNegative |
|
} from '@/api/data/risk'; |
|
import moment from "moment"; |
|
|
|
let type1 = ref('涉及问题数'); |
|
let type2 = ref('涉及问题数'); |
|
let type3 = ref('涉及问题数'); |
|
|
|
const groupId1 = ref('23') |
|
const groupId2 = ref('17') |
|
const groupId3 = ref('20') |
|
const groupId4 = ref('10'); |
|
const groupId5 = ref('10'); |
|
const groupId6 = ref('10'); |
|
|
|
let statisticsTotal = ref({ |
|
caseTotal: 0, |
|
aTotal: 0, |
|
negativeTotal: 0, |
|
peopleCount: 0, |
|
avgPeople: 0.0 |
|
}) |
|
|
|
const time = ref([ |
|
moment().startOf("year").format("YYYY-MM-DD"), |
|
moment().format("YYYY-MM-DD"), |
|
]); |
|
|
|
const list1 = ref([]) |
|
const list2 = ref([]) |
|
const list3 = ref([]) |
|
const list4 = ref([]) |
|
const list5 = ref([]) |
|
const list6 = ref([]) |
|
const departDetailOpen = ref(false); |
|
const policeDetailOpen = ref(false); |
|
const detailId = ref(""); |
|
const detailTime = ref([]); |
|
const profileScope = ref({}); |
|
|
|
function openDetail(item, type) { |
|
if (!item.detailId) return; |
|
detailId.value = item.detailId; |
|
profileScope.value = item.profileScope || {}; |
|
detailTime.value = item.initialTime || [ |
|
moment(time.value[0]).startOf("day").format("YYYY-MM-DD HH:mm:ss"), |
|
moment(time.value[1]).endOf("day").format("YYYY-MM-DD HH:mm:ss"), |
|
]; |
|
if (type === "depart") { |
|
departDetailOpen.value = true; |
|
} else { |
|
policeDetailOpen.value = true; |
|
} |
|
} |
|
|
|
function getData() { |
|
totalStatistics(time.value).then(res => { |
|
statisticsTotal.value.aTotal = res.atotal; |
|
statisticsTotal.value.caseTotal = res.caseTotal; |
|
statisticsTotal.value.negativeTotal = res.negativeTotal; |
|
statisticsTotal.value.peopleCount = res.peopleCount; |
|
statisticsTotal.value.avgPeople = res.avgPeople; |
|
}) |
|
getData1() |
|
getData2() |
|
getData3() |
|
getData4() |
|
getData5() |
|
getData6() |
|
} |
|
|
|
function getData1() { |
|
cityNegative({ |
|
beginTime: time.value[0], |
|
endTime: time.value[1], |
|
groupId: groupId1.value, |
|
type: type1.value |
|
}).then(data => { |
|
list1.value = withRankColors(data) |
|
}); |
|
} |
|
|
|
function getData2() { |
|
threeNegative({ |
|
beginTime: time.value[0], |
|
endTime: time.value[1], |
|
groupId: groupId2.value, |
|
type: type2.value |
|
}).then(data => { |
|
list2.value = withRankColors(data) |
|
}); |
|
} |
|
|
|
function getData3() { |
|
threeNegative({ |
|
beginTime: time.value[0], |
|
endTime: time.value[1], |
|
groupId: groupId3.value, |
|
type: type3.value |
|
}).then(data => { |
|
list3.value = withRankColors(data) |
|
}); |
|
} |
|
|
|
function withRankColors(data) { |
|
const rankedItems = data.map((item, index) => ({ item, index })) |
|
.sort((a, b) => Number(b.item.value) - Number(a.item.value) || a.index - b.index); |
|
const redCount = Math.ceil(data.length / 3); |
|
const yellowCount = Math.ceil((data.length - redCount) / 2); |
|
const barColors = []; |
|
rankedItems.forEach(({ index }, rank) => { |
|
const colorIndex = rank < redCount ? 0 : rank < redCount + yellowCount ? 1 : 2; |
|
barColors[index] = colors[colorIndex].color; |
|
}); |
|
return data.map((item, index) => ({ ...item, barColor: barColors[index] })); |
|
} |
|
|
|
function withProfileScope(data, query, category) { |
|
return data.map(item => ({ |
|
...item, |
|
profileScope: { groupId: query.groupId, category, rankName: item.label, rankEmpNo: item.empNo }, |
|
initialTime: [ |
|
moment(query.beginTime).startOf('day').format('YYYY-MM-DD HH:mm:ss'), |
|
moment(query.endTime).endOf('day').format('YYYY-MM-DD HH:mm:ss'), |
|
], |
|
})); |
|
} |
|
|
|
function getData4() { |
|
const query = { |
|
beginTime: time.value[0], |
|
endTime: time.value[1], |
|
groupId: groupId4.value |
|
}; |
|
leadNegative(query).then(data => { |
|
list4.value = withRankColors(withProfileScope(data, query, 'lead')); |
|
}); |
|
} |
|
|
|
function getData5() { |
|
const query = { |
|
beginTime: time.value[0], |
|
endTime: time.value[1], |
|
groupId: groupId5.value |
|
}; |
|
policeNegative(query).then(data => { |
|
list5.value = withRankColors(withProfileScope(data, query, 'police')); |
|
}); |
|
} |
|
|
|
function getData6() { |
|
const query = { |
|
beginTime: time.value[0], |
|
endTime: time.value[1], |
|
groupId: groupId6.value |
|
}; |
|
auxNegative(query).then(data => { |
|
list6.value = withRankColors(withProfileScope(data, query, 'aux')); |
|
}); |
|
} |
|
|
|
onMounted(() => { |
|
getData() |
|
}); |
|
|
|
watch(time, () => { |
|
getData() |
|
}) |
|
|
|
watch(groupId1, () => { |
|
getData1() |
|
}) |
|
|
|
watch(type1, () => { |
|
getData1() |
|
}) |
|
|
|
watch(groupId2, () => { |
|
getData2() |
|
}) |
|
|
|
watch(type2, () => { |
|
getData2() |
|
}) |
|
|
|
watch(groupId3, () => { |
|
getData3() |
|
}) |
|
|
|
watch(type3, () => { |
|
getData3() |
|
}) |
|
|
|
watch(groupId4, () => { |
|
getData4() |
|
}) |
|
|
|
watch(groupId5, () => { |
|
getData5() |
|
}) |
|
|
|
watch(groupId6, () => { |
|
getData6() |
|
}) |
|
|
|
const colors = [ |
|
{ |
|
color: "linear-gradient( 270deg, #FB002D 0%, #822232 100%)", |
|
percentage: 80, |
|
}, |
|
{ |
|
color: "linear-gradient( 270deg, #FFB90E 0%, #71501D 100%)", |
|
percentage: 60, |
|
}, |
|
{ |
|
color: "linear-gradient( 270deg, #63E7AA 0%, #19674C 100%)", |
|
percentage: 40, |
|
}, |
|
]; |
|
|
|
</script> |
|
|
|
<style lang="scss" scoped> |
|
.lmgz { |
|
width: 100%; |
|
height: 100%; |
|
background: url("../../assets/images/datav/lmgz.png") no-repeat; |
|
background-size: 100% 100%; |
|
display: flex; |
|
flex-direction: column; |
|
align-items: center; |
|
justify-content: center; |
|
} |
|
|
|
@import "@/style/datav.scss"; |
|
|
|
.card-header { |
|
display: flex; |
|
justify-content: space-between; |
|
align-items: center; |
|
padding: 10px; |
|
} |
|
|
|
.card-title { |
|
font-size: 23px; |
|
font-weight: bold; |
|
} |
|
|
|
.statistic-label { |
|
width: fit-content; |
|
margin: 20px auto 4px; |
|
padding: 0 20px; |
|
line-height: 34px; |
|
text-align: center; |
|
color: #b8dcff; |
|
font-size: 14px; |
|
background: rgba(40, 115, 210, 0.16); |
|
border-radius: 4px; |
|
} |
|
|
|
.select-container { |
|
width: 150px; |
|
margin-left: auto; |
|
} |
|
|
|
:deep(.el-select__wrapper) { |
|
background-color: #041a75; |
|
box-shadow: #0a113b 0px 0px 0px 1px; |
|
} |
|
|
|
:deep(.el-select__placeholder ) { |
|
color: #fff; |
|
} |
|
</style>
|
|
|