3 changed files with 520 additions and 7 deletions
@ -0,0 +1,81 @@ |
|||||||
|
import request from "@/api/request"; |
||||||
|
|
||||||
|
export function totalStatistics() { |
||||||
|
return request.get({ |
||||||
|
url: `/datav/risk/total/statistics` |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
export function areaRiskStatistics() { |
||||||
|
return request.get({ |
||||||
|
url: `/datav/risk/area/risk/statistics` |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
export function orgRiskStatistics() { |
||||||
|
return request.get({ |
||||||
|
url: `/datav/risk/risk/org/statistics` |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
export function orgCarRiskStatistics() { |
||||||
|
return request.get({ |
||||||
|
url: `/datav/risk/risk/org/car/statistics` |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
export function policeARiskStatistics() { |
||||||
|
return request.get({ |
||||||
|
url: `/datav/risk/risk/police/a/statistics` |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
export function policeBRiskStatistics() { |
||||||
|
return request.get({ |
||||||
|
url: `/datav/risk/risk/police/b/statistics` |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
export function leaderRiskStatistics() { |
||||||
|
return request.get({ |
||||||
|
url: `/datav/risk/risk/leader/statistics` |
||||||
|
}); |
||||||
|
} |
||||||
|
// *******************************************
|
||||||
|
export function areaNegativeStatistics() { |
||||||
|
return request.get({ |
||||||
|
url: `/datav/risk/area/negative/statistics` |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
export function orgNegativeStatistics() { |
||||||
|
return request.get({ |
||||||
|
url: `/datav/risk/org/negative/statistics` |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
export function orgCarNegativeStatistics() { |
||||||
|
return request.get({ |
||||||
|
url: `/datav/risk/org/car/negative/statistics` |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
export function policeANegativeStatistics() { |
||||||
|
return request.get({ |
||||||
|
url: `/datav/risk/police/a/negative/statistics` |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
export function policeBNegativeStatistics() { |
||||||
|
return request.get({ |
||||||
|
url: `/datav/risk/police/b/negative/statistics` |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
export function policeLeaderNegativeStatistics() { |
||||||
|
return request.get({ |
||||||
|
url: `/datav/risk/police/leader/negative/statistics` |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
@ -1,14 +1,445 @@ |
|||||||
<template> |
<template> |
||||||
<el-scrollbar height="100vh"> |
<el-scrollbar height="100vh"> |
||||||
<div class="wrapper"> |
<div class="wrapper"> |
||||||
<datav-header /> |
<datav-header/> |
||||||
<img src="/imgs/datav/lmgz.png" alt="" class="relative"> |
<el-row> |
||||||
</div> |
<el-col :span="6"></el-col> |
||||||
</el-scrollbar> |
<el-col :span="12"> |
||||||
|
<div class="datav-col"> |
||||||
|
<span style="font-size: 22px">执法监督灵敏感知体系</span> |
||||||
|
</div> |
||||||
|
<div class="datav-col"> |
||||||
|
<label for="">统计周期:</label> |
||||||
|
<span>2024年01月01日 - 2024年08月30日</span> |
||||||
|
</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 title="分县市局"> |
||||||
|
<datav-tabs |
||||||
|
type="bottom-button" |
||||||
|
> |
||||||
|
<datav-tab-item label="风险值" name="1"> |
||||||
|
<el-scrollbar height="200px"> |
||||||
|
<datav-chart-bar |
||||||
|
:data="areaRiskList" |
||||||
|
size="large" |
||||||
|
:color="colors" |
||||||
|
/> |
||||||
|
</el-scrollbar> |
||||||
|
</datav-tab-item> |
||||||
|
<datav-tab-item label="问题数" name="2"> |
||||||
|
<el-scrollbar height="200px"> |
||||||
|
<datav-chart-bar |
||||||
|
:data="areaNegativeList" |
||||||
|
:max="11" |
||||||
|
size="large" |
||||||
|
:color="colors" |
||||||
|
/> |
||||||
|
</el-scrollbar> |
||||||
|
</datav-tab-item> |
||||||
|
<datav-tab-item label="问题发生率" name="2"> |
||||||
|
<el-scrollbar height="200px"> |
||||||
|
<datav-chart-bar |
||||||
|
:data="jsdwBarList" |
||||||
|
:max="11" |
||||||
|
size="large" |
||||||
|
:color="colors" |
||||||
|
/> |
||||||
|
</el-scrollbar> |
||||||
|
</datav-tab-item> |
||||||
|
</datav-tabs> |
||||||
|
</datav-card> |
||||||
|
</el-col> |
||||||
|
<el-col :span="8"> |
||||||
|
<datav-card title="派出所"> |
||||||
|
<datav-tabs |
||||||
|
type="bottom-button" |
||||||
|
> |
||||||
|
<datav-tab-item label="风险值" name="1"> |
||||||
|
<el-scrollbar height="200px"> |
||||||
|
<datav-chart-bar |
||||||
|
:data="pcsRiskList" |
||||||
|
size="large" |
||||||
|
:color="colors" |
||||||
|
/> |
||||||
|
</el-scrollbar> |
||||||
|
</datav-tab-item> |
||||||
|
<datav-tab-item label="问题数" name="2"> |
||||||
|
<el-scrollbar height="200px"> |
||||||
|
<datav-chart-bar |
||||||
|
:data="orgNegativeList" |
||||||
|
:max="11" |
||||||
|
size="large" |
||||||
|
:color="colors" |
||||||
|
/> |
||||||
|
</el-scrollbar> |
||||||
|
</datav-tab-item> |
||||||
|
<datav-tab-item label="问题发生率" name="2"> |
||||||
|
<el-scrollbar height="200px"> |
||||||
|
<datav-chart-bar |
||||||
|
:data="jsdwBarList" |
||||||
|
:max="11" |
||||||
|
size="large" |
||||||
|
:color="colors" |
||||||
|
/> |
||||||
|
</el-scrollbar> |
||||||
|
</datav-tab-item> |
||||||
|
</datav-tabs> |
||||||
|
</datav-card> |
||||||
|
</el-col> |
||||||
|
<el-col :span="8"> |
||||||
|
<datav-card title="交警大队"> |
||||||
|
<datav-tabs |
||||||
|
type="bottom-button" |
||||||
|
> |
||||||
|
<datav-tab-item label="风险值" name="1"> |
||||||
|
<el-scrollbar height="200px"> |
||||||
|
<datav-chart-bar |
||||||
|
:data="carRiskList" |
||||||
|
size="large" |
||||||
|
:color="colors" |
||||||
|
/> |
||||||
|
</el-scrollbar> |
||||||
|
</datav-tab-item> |
||||||
|
<datav-tab-item label="问题数" name="2"> |
||||||
|
<el-scrollbar height="200px"> |
||||||
|
<datav-chart-bar |
||||||
|
:data="orgCarNegativeList" |
||||||
|
:max="11" |
||||||
|
size="large" |
||||||
|
:color="colors" |
||||||
|
/> |
||||||
|
</el-scrollbar> |
||||||
|
</datav-tab-item> |
||||||
|
<datav-tab-item label="问题发生率" name="2"> |
||||||
|
<el-scrollbar height="200px"> |
||||||
|
<datav-chart-bar |
||||||
|
:data="jsdwBarList" |
||||||
|
:max="11" |
||||||
|
size="large" |
||||||
|
: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 title="民警"> |
||||||
|
<datav-tabs |
||||||
|
type="bottom-button" |
||||||
|
> |
||||||
|
<datav-tab-item label="风险值" name="1"> |
||||||
|
<el-scrollbar height="200px"> |
||||||
|
<datav-chart-bar |
||||||
|
:data="policeARiskList" |
||||||
|
size="large" |
||||||
|
:color="colors" |
||||||
|
/> |
||||||
|
</el-scrollbar> |
||||||
|
</datav-tab-item> |
||||||
|
<datav-tab-item label="问题数" name="2"> |
||||||
|
<el-scrollbar height="200px"> |
||||||
|
<datav-chart-bar |
||||||
|
:data="policeANegativeList" |
||||||
|
:max="11" |
||||||
|
size="large" |
||||||
|
:color="colors" |
||||||
|
/> |
||||||
|
</el-scrollbar> |
||||||
|
</datav-tab-item> |
||||||
|
<datav-tab-item label="问题发生率" name="2"> |
||||||
|
<el-scrollbar height="200px"> |
||||||
|
<datav-chart-bar |
||||||
|
:data="jsdwBarList" |
||||||
|
:max="11" |
||||||
|
size="large" |
||||||
|
:color="colors" |
||||||
|
/> |
||||||
|
</el-scrollbar> |
||||||
|
</datav-tab-item> |
||||||
|
</datav-tabs> |
||||||
|
</datav-card> |
||||||
|
</el-col> |
||||||
|
<el-col :span="8"> |
||||||
|
<datav-card title="协辅警"> |
||||||
|
<datav-tabs |
||||||
|
type="bottom-button" |
||||||
|
> |
||||||
|
<datav-tab-item label="风险值" name="1"> |
||||||
|
<el-scrollbar height="200px"> |
||||||
|
<datav-chart-bar |
||||||
|
:data="policeBRiskList" |
||||||
|
size="large" |
||||||
|
:color="colors" |
||||||
|
/> |
||||||
|
</el-scrollbar> |
||||||
|
</datav-tab-item> |
||||||
|
<datav-tab-item label="问题数" name="2"> |
||||||
|
<el-scrollbar height="200px"> |
||||||
|
<datav-chart-bar |
||||||
|
:data="policeBNegativeList" |
||||||
|
:max="11" |
||||||
|
size="large" |
||||||
|
:color="colors" |
||||||
|
/> |
||||||
|
</el-scrollbar> |
||||||
|
</datav-tab-item> |
||||||
|
<datav-tab-item label="问题发生率" name="2"> |
||||||
|
<el-scrollbar height="200px"> |
||||||
|
<datav-chart-bar |
||||||
|
:data="jsdwBarList" |
||||||
|
:max="11" |
||||||
|
size="large" |
||||||
|
:color="colors" |
||||||
|
/> |
||||||
|
</el-scrollbar> |
||||||
|
</datav-tab-item> |
||||||
|
</datav-tabs> |
||||||
|
</datav-card> |
||||||
|
</el-col> |
||||||
|
<el-col :span="8"> |
||||||
|
<datav-card title="领导"> |
||||||
|
<datav-tabs |
||||||
|
type="bottom-button" |
||||||
|
> |
||||||
|
<datav-tab-item label="风险值" name="1"> |
||||||
|
<el-scrollbar height="200px"> |
||||||
|
<datav-chart-bar |
||||||
|
:data="leaderNegativeList" |
||||||
|
size="large" |
||||||
|
:color="colors" |
||||||
|
/> |
||||||
|
</el-scrollbar> |
||||||
|
</datav-tab-item> |
||||||
|
<datav-tab-item label="问题数" name="2"> |
||||||
|
<el-scrollbar height="200px"> |
||||||
|
<datav-chart-bar |
||||||
|
:data="jsdwBarList" |
||||||
|
:max="11" |
||||||
|
size="large" |
||||||
|
:color="colors" |
||||||
|
/> |
||||||
|
</el-scrollbar> |
||||||
|
</datav-tab-item> |
||||||
|
<datav-tab-item label="问题发生率" name="2"> |
||||||
|
<el-scrollbar height="200px"> |
||||||
|
<datav-chart-bar |
||||||
|
:data="jsdwBarList" |
||||||
|
:max="11" |
||||||
|
size="large" |
||||||
|
:color="colors" |
||||||
|
/> |
||||||
|
</el-scrollbar> |
||||||
|
</datav-tab-item> |
||||||
|
</datav-tabs> |
||||||
|
</datav-card> |
||||||
|
</el-col> |
||||||
|
</el-row> |
||||||
|
</div> |
||||||
|
</el-scrollbar> |
||||||
</template> |
</template> |
||||||
<script setup> |
<script setup> |
||||||
|
|
||||||
|
import { |
||||||
|
totalStatistics, |
||||||
|
areaRiskStatistics, |
||||||
|
leaderRiskStatistics, |
||||||
|
policeARiskStatistics, |
||||||
|
policeBRiskStatistics, |
||||||
|
orgCarRiskStatistics, |
||||||
|
orgRiskStatistics, |
||||||
|
areaNegativeStatistics, |
||||||
|
orgNegativeStatistics, |
||||||
|
orgCarNegativeStatistics, |
||||||
|
policeANegativeStatistics, |
||||||
|
policeBNegativeStatistics, |
||||||
|
policeLeaderNegativeStatistics |
||||||
|
} from '@/api/data/risk'; |
||||||
|
|
||||||
|
|
||||||
|
let statisticsTotal = ref({ |
||||||
|
caseTotal: 0, |
||||||
|
aTotal: 0, |
||||||
|
negativeTotal: 0, |
||||||
|
peopleCount: 0, |
||||||
|
avgPeople: 0.0 |
||||||
|
}) |
||||||
|
let areaRiskList = ref([]) |
||||||
|
let pcsRiskList = ref([]) |
||||||
|
let carRiskList = ref([]) |
||||||
|
let policeARiskList = ref([]) |
||||||
|
let policeBRiskList = ref([]) |
||||||
|
let leaderRiskList = ref([]) |
||||||
|
|
||||||
|
let areaNegativeList = ref([]) |
||||||
|
let orgNegativeList = ref([]) |
||||||
|
let orgCarNegativeList = ref([]) |
||||||
|
let policeANegativeList = ref([]) |
||||||
|
let policeBNegativeList = ref([]) |
||||||
|
let leaderNegativeList = ref([]) |
||||||
|
|
||||||
|
onMounted(() => { |
||||||
|
getTotalData(); |
||||||
|
getAreaRiskData(); |
||||||
|
getPCSRiskData(); |
||||||
|
getCarRiskData() |
||||||
|
getPoliceARiskData(); |
||||||
|
getPoliceBRiskData(); |
||||||
|
getLeaderRiskData(); |
||||||
|
getLeaderNegativeData(); |
||||||
|
getPoliceBNegativeData(); |
||||||
|
getPoliceANegativeData(); |
||||||
|
getAreaNegativeData(); |
||||||
|
getCarOrgNegativeData(); |
||||||
|
getOrgNegativeData(); |
||||||
|
}); |
||||||
|
|
||||||
|
const getTotalData = () => { |
||||||
|
totalStatistics().then(res => { |
||||||
|
statisticsTotal.value.aTotal = res.atotal == undefined ? 0 : res.atotal; |
||||||
|
statisticsTotal.value.caseTotal = res.caseTotal == undefined ? 0 : res.caseTotal; |
||||||
|
statisticsTotal.value.negativeTotal = res.negativeTotal == undefined ? 0 : res.negativeTotal; |
||||||
|
statisticsTotal.value.peopleCount = res.peopleCount == undefined ? 0 : res.peopleCount; |
||||||
|
statisticsTotal.value.avgPeople = res.avgPeople == undefined ? 0.0 : res.avgPeople; |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
const getAreaRiskData = () => { |
||||||
|
areaRiskStatistics().then(res => { |
||||||
|
areaRiskList.value = eachData(res) |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
const getPCSRiskData = () => { |
||||||
|
orgRiskStatistics().then(res => { |
||||||
|
pcsRiskList.value = eachData(res) |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
const getCarRiskData = () => { |
||||||
|
orgCarRiskStatistics().then(res => { |
||||||
|
carRiskList.value = eachData(res) |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
const getPoliceARiskData = () => { |
||||||
|
policeARiskStatistics().then(res => { |
||||||
|
policeARiskList.value = eachData(res) |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
const getPoliceBRiskData = () => { |
||||||
|
policeBRiskStatistics().then(res => { |
||||||
|
policeBRiskList.value = eachData(res) |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
const getLeaderRiskData = () => { |
||||||
|
leaderRiskStatistics().then(res => { |
||||||
|
leaderRiskList.value = eachData(res) |
||||||
|
}) |
||||||
|
} |
||||||
|
const getAreaNegativeData = () => { |
||||||
|
areaNegativeStatistics().then(res => { |
||||||
|
areaNegativeList.value = res |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
const getOrgNegativeData = () => { |
||||||
|
orgNegativeStatistics().then(res => { |
||||||
|
orgNegativeList.value = res |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
const getCarOrgNegativeData = () => { |
||||||
|
orgCarNegativeStatistics().then(res => { |
||||||
|
orgCarNegativeList.value = res |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
const getPoliceANegativeData = () => { |
||||||
|
policeANegativeStatistics().then(res => { |
||||||
|
policeANegativeList.value = res |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
const getPoliceBNegativeData = () => { |
||||||
|
policeBNegativeStatistics().then(res => { |
||||||
|
policeBNegativeList.value = res |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
const getLeaderNegativeData = () => { |
||||||
|
policeLeaderNegativeStatistics().then(res => { |
||||||
|
leaderNegativeList.value = res |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
const eachData = (data) => { |
||||||
|
let arr = [] |
||||||
|
data.forEach(item => { |
||||||
|
arr.push({ |
||||||
|
label: item.name, |
||||||
|
value: item.score |
||||||
|
}) |
||||||
|
}) |
||||||
|
return arr; |
||||||
|
} |
||||||
|
|
||||||
|
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, #63E700 0%, #19674C 100%)", |
||||||
|
percentage: 40, |
||||||
|
}, |
||||||
|
]; |
||||||
</script> |
</script> |
||||||
<style lang="scss" scoped> |
<style lang="scss" scoped> |
||||||
@import "@/style/datav.scss"; |
@import "@/style/datav.scss"; |
||||||
</style> |
</style> |
||||||
|
|||||||
Loading…
Reference in new issue