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.
509 lines
14 KiB
509 lines
14 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" |
|
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" |
|
: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" |
|
: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" |
|
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" |
|
: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" |
|
: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> |
|
<datav-tabs |
|
type="bottom-button" |
|
ref="ldTabs" |
|
v-model="selectedLdTabs" |
|
> |
|
<datav-tab-item label="问题数" name="1"> |
|
<el-scrollbar height="200px"> |
|
<datav-chart-bar-fixbug |
|
:data="list4" |
|
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="groupId5" placeholder="请选择指标"> |
|
<el-option label="派出所" value="10"></el-option> |
|
<el-option label="交警" value="11"></el-option> |
|
</el-select> |
|
</div> |
|
</div> |
|
<datav-tabs |
|
type="bottom-button" |
|
ref="mjTabs" |
|
v-model="selectedMjTabs" |
|
> |
|
<datav-tab-item label="问题数" name="1"> |
|
<el-scrollbar height="200px"> |
|
<datav-chart-bar-fixbug |
|
:data="list5" |
|
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="groupId6" placeholder="请选择指标"> |
|
<el-option label="派出所" value="10"></el-option> |
|
<el-option label="交警" value="11"></el-option> |
|
</el-select> |
|
</div> |
|
</div> |
|
<datav-tabs |
|
type="bottom-button" |
|
ref="xfjTabs" |
|
v-model="selectedXfjTabs" |
|
> |
|
<datav-tab-item label="问题数" name="1"> |
|
<el-scrollbar height="200px"> |
|
<datav-chart-bar-fixbug |
|
:data="list6" |
|
size="small" |
|
:color="colors" |
|
/> |
|
</el-scrollbar> |
|
</datav-tab-item> |
|
</datav-tabs> |
|
</datav-card> |
|
</el-col> |
|
</el-row> |
|
</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([]) |
|
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 = data |
|
}); |
|
} |
|
|
|
function getData2() { |
|
threeNegative({ |
|
beginTime: time.value[0], |
|
endTime: time.value[1], |
|
groupId: groupId2.value, |
|
type: type2.value |
|
}).then(data => { |
|
list2.value = data |
|
}); |
|
} |
|
|
|
function getData3() { |
|
threeNegative({ |
|
beginTime: time.value[0], |
|
endTime: time.value[1], |
|
groupId: groupId3.value, |
|
type: type3.value |
|
}).then(data => { |
|
list3.value = data |
|
}); |
|
} |
|
|
|
function getData4() { |
|
leadNegative({ |
|
beginTime: time.value[0], |
|
endTime: time.value[1], |
|
groupId: groupId4.value |
|
}).then(data => { |
|
list4.value = data |
|
}); |
|
} |
|
|
|
function getData5() { |
|
policeNegative({ |
|
beginTime: time.value[0], |
|
endTime: time.value[1], |
|
groupId: groupId5.value |
|
}).then(data => { |
|
list5.value = data |
|
}); |
|
} |
|
|
|
function getData6() { |
|
auxNegative({ |
|
beginTime: time.value[0], |
|
endTime: time.value[1], |
|
groupId: groupId6.value |
|
}).then(data => { |
|
list6.value = data |
|
}); |
|
} |
|
|
|
onMounted(() => { |
|
getData() |
|
}); |
|
|
|
watch(time, () => { |
|
getData() |
|
}) |
|
|
|
watch(groupId1, () => { |
|
getData1() |
|
}) |
|
|
|
watch(type1, () => { |
|
getData1() |
|
}) |
|
|
|
watch(groupId2, () => { |
|
getData2() |
|
}) |
|
|
|
watch(type2, () => { |
|
getData1() |
|
}) |
|
|
|
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; |
|
} |
|
|
|
.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>
|
|
|