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.
1364 lines
51 KiB
1364 lines
51 KiB
<template> |
|
<el-scrollbar height="100vh"> |
|
<div class="wrapper"> |
|
<datav-header/> |
|
<main> |
|
<el-row :gutter="16"> |
|
|
|
<el-col :span="6"> |
|
<datav-card title="日常督察情况"> |
|
|
|
<datav-tabs |
|
v-model="activeOrgTab" |
|
type="bottom-button" |
|
> |
|
<datav-tab-item label="派出所" name="1"> |
|
<el-row class="mb-32"> |
|
<el-col :span="6"> |
|
<div class="descriptions_cell text-center"> |
|
<div class="descriptions_content"> |
|
{{ fxsjRankOverview.proTotal }} |
|
</div> |
|
<div class="descriptions_label"> |
|
问题数 |
|
</div> |
|
</div> |
|
</el-col> |
|
<el-col :span="6"> |
|
<div class="descriptions_cell text-center"> |
|
<div class="descriptions_content"> |
|
{{ fxsjRankOverview.changing }} |
|
</div> |
|
<div class="descriptions_label"> |
|
整改中 |
|
</div> |
|
</div> |
|
</el-col> |
|
<el-col :span="6"> |
|
<div class="descriptions_cell text-center"> |
|
<div class="descriptions_content"> |
|
{{ fxsjRankOverview.changed }} |
|
</div> |
|
<div class="descriptions_label"> |
|
已整改 |
|
</div> |
|
</div> |
|
</el-col> |
|
<el-col :span="6"> |
|
<div class="descriptions_cell text-center"> |
|
<div class="descriptions_content"> |
|
{{ fxsjRankOverview.correctionRate }}% |
|
</div> |
|
<div class="descriptions_label"> |
|
整改率 |
|
</div> |
|
</div> |
|
</el-col> |
|
</el-row> |
|
<el-scrollbar height="350px"> |
|
<datav-chart-bar |
|
:data="fxsjChangedRankList" |
|
:size="small" |
|
title="整改率排名" |
|
sub-title="已整改/问题数" |
|
unit="%" |
|
:label-width="110" |
|
/> |
|
</el-scrollbar> |
|
</datav-tab-item> |
|
<datav-tab-item label="大队" name="2"> |
|
<el-row class="mb-32"> |
|
<el-col :span="6"> |
|
<div class="descriptions_cell text-center"> |
|
<div class="descriptions_content"> |
|
{{ jsdwRankOverview.proTotal }} |
|
</div> |
|
<div class="descriptions_label"> |
|
问题数 |
|
</div> |
|
</div> |
|
</el-col> |
|
<el-col :span="6"> |
|
<div class="descriptions_cell text-center"> |
|
<div class="descriptions_content"> |
|
{{ jsdwRankOverview.changing }} |
|
</div> |
|
<div class="descriptions_label"> |
|
整改中 |
|
</div> |
|
</div> |
|
</el-col> |
|
<el-col :span="6"> |
|
<div class="descriptions_cell text-center"> |
|
<div class="descriptions_content"> |
|
{{ jsdwRankOverview.changed }} |
|
</div> |
|
<div class="descriptions_label"> |
|
已整改 |
|
</div> |
|
</div> |
|
</el-col> |
|
<el-col :span="6"> |
|
<div class="descriptions_cell text-center"> |
|
<div class="descriptions_content"> |
|
{{ jsdwRankOverview.correctionRate }}% |
|
</div> |
|
<div class="descriptions_label"> |
|
整改率 |
|
</div> |
|
</div> |
|
</el-col> |
|
</el-row> |
|
<el-scrollbar height="350px"> |
|
<datav-chart-bar |
|
:data="jsdwChangedRankList" |
|
:size="small" |
|
title="整改率排名" |
|
sub-title="已整改/问题数" |
|
unit="%" |
|
:label-width="110" |
|
/> |
|
</el-scrollbar> |
|
</datav-tab-item> |
|
</datav-tabs> |
|
|
|
|
|
</datav-card> |
|
|
|
|
|
<datav-card title="问题类型占比"> |
|
<v-charts |
|
style="height: 310px" |
|
:option="wtlxPieOption" |
|
autoresize |
|
/> |
|
</datav-card> |
|
</el-col> |
|
|
|
<el-col :span="12"> |
|
<datav-date-picker v-model="time"/> |
|
<div class="flex gap-42"> |
|
<datav-statistic |
|
:value="overview.supervisionNotifyTotal" |
|
title="通报问题数" |
|
style="width: 16.66%" |
|
/> |
|
<datav-statistic |
|
:value="overview.supervisionNotifyChangingTotal" |
|
title="整改中" |
|
style="width: 16.66%" |
|
/> |
|
<datav-statistic |
|
:value="overview.supervisionNotifyChangedTotal" |
|
title="已整改" |
|
style="width: 16.66%" |
|
/> |
|
<datav-statistic |
|
:value="overview.supervisionNotifyOrgTotal" |
|
title="涉及单位数" |
|
style="width: 16.66%" |
|
/> |
|
<datav-statistic |
|
:value="overview.supervisionNotifyPreTotal" |
|
title="涉及人数" |
|
style="width: 16.66%" |
|
/> |
|
<datav-statistic |
|
:value="overview.correctionRate" |
|
value-unit="%" |
|
title="整改率" |
|
style="width: 16.66%" |
|
/> |
|
</div> |
|
<v-charts |
|
style="height: 450px" |
|
:option="option" |
|
autoresize |
|
ref="subOneSceneInspMapChart" |
|
/> |
|
<datav-card title="问题趋势"> |
|
<v-charts |
|
style="height: 280px" |
|
:option="proTrend" |
|
autoresize |
|
/> |
|
<div class="gobal-dropdown-container"> |
|
<el-dropdown class="test" @command="handleCommand"> |
|
<span class="el-dropdown-link my-gobal-yearselect"> |
|
{{ selectedYear + " 年" }} |
|
</span> |
|
<template #dropdown> |
|
<el-dropdown-menu style="width: 90px"> |
|
<el-dropdown-item v-for="year in years" :key="year" :command="year">{{ year + " 年" }} |
|
</el-dropdown-item> |
|
</el-dropdown-menu> |
|
</template> |
|
</el-dropdown> |
|
</div> |
|
</datav-card> |
|
</el-col> |
|
|
|
<el-col :span="6"> |
|
<datav-card> |
|
<datav-tabs v-model="activeTabRight" size="small"> |
|
<datav-tab-item label="黄赌毒" name="1"> |
|
<datav-tabs |
|
type="bottom-button"> |
|
<datav-tab-item label="派出所" name="1"> |
|
<el-row class="mb-32"> |
|
<el-col :span="6"> |
|
<div class="descriptions_cell text-center"> |
|
<div class="descriptions_content"> |
|
{{ fxsjYellowBetOverview.proTotal }} |
|
</div> |
|
<div class="descriptions_label"> |
|
问题数 |
|
</div> |
|
</div> |
|
</el-col> |
|
<el-col :span="6"> |
|
<div class="descriptions_cell text-center"> |
|
<div class="descriptions_content"> |
|
{{ fxsjYellowBetOverview.changing }} |
|
</div> |
|
<div class="descriptions_label"> |
|
整改中 |
|
</div> |
|
</div> |
|
</el-col> |
|
<el-col :span="6"> |
|
<div class="descriptions_cell text-center"> |
|
<div class="descriptions_content"> |
|
{{ fxsjYellowBetOverview.changed }} |
|
</div> |
|
<div class="descriptions_label"> |
|
已整改 |
|
</div> |
|
</div> |
|
</el-col> |
|
<el-col :span="6"> |
|
<div class="descriptions_cell text-center"> |
|
<div class="descriptions_content"> |
|
{{ fxsjYellowBetOverview.correctionRate }}% |
|
</div> |
|
<div class="descriptions_label"> |
|
整改率 |
|
</div> |
|
</div> |
|
</el-col> |
|
</el-row> |
|
<el-scrollbar height="330px"> |
|
<datav-chart-bar |
|
:data="fxsjYellowBetRankList" |
|
size="large" |
|
title="问题数排名" |
|
sub-title="问题数" |
|
:color="colors" |
|
:label-width="110" |
|
/> |
|
</el-scrollbar> |
|
</datav-tab-item> |
|
<datav-tab-item label="大队" name="2"> |
|
<el-row class="mb-32"> |
|
<el-col :span="6"> |
|
<div class="descriptions_cell text-center"> |
|
<div class="descriptions_content"> |
|
{{ jsdwYellowBetOverview.proTotal }} |
|
</div> |
|
<div class="descriptions_label"> |
|
问题数 |
|
</div> |
|
</div> |
|
</el-col> |
|
<el-col :span="6"> |
|
<div class="descriptions_cell text-center"> |
|
<div class="descriptions_content"> |
|
{{ jsdwYellowBetOverview.changing }} |
|
</div> |
|
<div class="descriptions_label"> |
|
整改中 |
|
</div> |
|
</div> |
|
</el-col> |
|
<el-col :span="6"> |
|
<div class="descriptions_cell text-center"> |
|
<div class="descriptions_content"> |
|
{{ jsdwYellowBetOverview.changed }} |
|
</div> |
|
<div class="descriptions_label"> |
|
已整改 |
|
</div> |
|
</div> |
|
</el-col> |
|
<el-col :span="6"> |
|
<div class="descriptions_cell text-center"> |
|
<div class="descriptions_content"> |
|
{{ jsdwYellowBetOverview.correctionRate }}% |
|
</div> |
|
<div class="descriptions_label"> |
|
整改率 |
|
</div> |
|
</div> |
|
</el-col> |
|
</el-row> |
|
<el-scrollbar height="330px"> |
|
<datav-chart-bar |
|
:data="jsdwYellowBetRankList" |
|
size="large" |
|
title="问题数排名" |
|
sub-title="问题数" |
|
:color="colors" |
|
:label-width="110" |
|
/> |
|
</el-scrollbar> |
|
</datav-tab-item> |
|
|
|
</datav-tabs> |
|
</datav-tab-item> |
|
<datav-tab-item label="枪支管理" name="2"> |
|
<datav-tabs |
|
type="bottom-button"> |
|
<datav-tab-item label="派出所" name="1"> |
|
<el-row class="mb-32"> |
|
<el-col :span="6"> |
|
<div class="descriptions_cell text-center"> |
|
<div class="descriptions_content"> |
|
{{ fxsjGunControllerOverview.proTotal }} |
|
</div> |
|
<div class="descriptions_label"> |
|
问题数 |
|
</div> |
|
</div> |
|
</el-col> |
|
<el-col :span="6"> |
|
<div class="descriptions_cell text-center"> |
|
<div class="descriptions_content"> |
|
{{ fxsjGunControllerOverview.changing }} |
|
</div> |
|
<div class="descriptions_label"> |
|
整改中 |
|
</div> |
|
</div> |
|
</el-col> |
|
<el-col :span="6"> |
|
<div class="descriptions_cell text-center"> |
|
<div class="descriptions_content"> |
|
{{ fxsjGunControllerOverview.changed }} |
|
</div> |
|
<div class="descriptions_label"> |
|
已整改 |
|
</div> |
|
</div> |
|
</el-col> |
|
<el-col :span="6"> |
|
<div class="descriptions_cell text-center"> |
|
<div class="descriptions_content"> |
|
{{ fxsjGunControllerOverview.correctionRate }}% |
|
</div> |
|
<div class="descriptions_label"> |
|
整改率 |
|
</div> |
|
</div> |
|
</el-col> |
|
</el-row> |
|
<el-scrollbar height="330px"> |
|
<datav-chart-bar |
|
:data="fxsjGunControllerRankList" |
|
size="large" |
|
title="问题数排名" |
|
sub-title="问题数" |
|
:color="colors" |
|
/> |
|
</el-scrollbar> |
|
</datav-tab-item> |
|
<datav-tab-item label="大队" name="2"> |
|
<el-row class="mb-32"> |
|
<el-col :span="6"> |
|
<div class="descriptions_cell text-center"> |
|
<div class="descriptions_content"> |
|
{{ jsdwGunControllerOverview.proTotal }} |
|
</div> |
|
<div class="descriptions_label"> |
|
问题数 |
|
</div> |
|
</div> |
|
</el-col> |
|
<el-col :span="6"> |
|
<div class="descriptions_cell text-center"> |
|
<div class="descriptions_content"> |
|
{{ jsdwGunControllerOverview.changing }} |
|
</div> |
|
<div class="descriptions_label"> |
|
整改中 |
|
</div> |
|
</div> |
|
</el-col> |
|
<el-col :span="6"> |
|
<div class="descriptions_cell text-center"> |
|
<div class="descriptions_content"> |
|
{{ jsdwGunControllerOverview.changed }} |
|
</div> |
|
<div class="descriptions_label"> |
|
已整改 |
|
</div> |
|
</div> |
|
</el-col> |
|
<el-col :span="6"> |
|
<div class="descriptions_cell text-center"> |
|
<div class="descriptions_content"> |
|
{{ jsdwGunControllerOverview.correctionRate }}% |
|
</div> |
|
<div class="descriptions_label"> |
|
整改率 |
|
</div> |
|
</div> |
|
</el-col> |
|
</el-row> |
|
<el-scrollbar height="330px"> |
|
<datav-chart-bar |
|
:data="jsdwGunControllerRankList" |
|
size="large" |
|
title="问题数排名" |
|
sub-title="问题数" |
|
:color="colors" |
|
/> |
|
</el-scrollbar> |
|
</datav-tab-item> |
|
|
|
</datav-tabs> |
|
</datav-tab-item> |
|
<datav-tab-item label="涉企问题" name="3"> |
|
<datav-tabs |
|
type="bottom-button"> |
|
<datav-tab-item label="派出所" name="1"> |
|
<el-row class="mb-32"> |
|
<el-col :span="6"> |
|
<div class="descriptions_cell text-center"> |
|
<div class="descriptions_content"> |
|
{{ fxsjCompanyProblemOverview.proTotal }} |
|
</div> |
|
<div class="descriptions_label"> |
|
问题数 |
|
</div> |
|
</div> |
|
</el-col> |
|
<el-col :span="6"> |
|
<div class="descriptions_cell text-center"> |
|
<div class="descriptions_content"> |
|
{{ fxsjCompanyProblemOverview.changing }} |
|
</div> |
|
<div class="descriptions_label"> |
|
整改中 |
|
</div> |
|
</div> |
|
</el-col> |
|
<el-col :span="6"> |
|
<div class="descriptions_cell text-center"> |
|
<div class="descriptions_content"> |
|
{{ fxsjCompanyProblemOverview.changed }} |
|
</div> |
|
<div class="descriptions_label"> |
|
已整改 |
|
</div> |
|
</div> |
|
</el-col> |
|
<el-col :span="6"> |
|
<div class="descriptions_cell text-center"> |
|
<div class="descriptions_content"> |
|
{{ fxsjCompanyProblemOverview.correctionRate }}% |
|
</div> |
|
<div class="descriptions_label"> |
|
整改率 |
|
</div> |
|
</div> |
|
</el-col> |
|
</el-row> |
|
<el-scrollbar height="330px"> |
|
<datav-chart-bar |
|
:data="fxsjCompanyProblemRankList" |
|
size="large" |
|
title="问题数排名" |
|
sub-title="问题数" |
|
:color="colors" |
|
/> |
|
</el-scrollbar> |
|
</datav-tab-item> |
|
<datav-tab-item label="大队" name="2"> |
|
<el-row class="mb-32"> |
|
<el-col :span="6"> |
|
<div class="descriptions_cell text-center"> |
|
<div class="descriptions_content"> |
|
{{ jsdwCompanyProblemOverview.proTotal }} |
|
</div> |
|
<div class="descriptions_label"> |
|
问题数 |
|
</div> |
|
</div> |
|
</el-col> |
|
<el-col :span="6"> |
|
<div class="descriptions_cell text-center"> |
|
<div class="descriptions_content"> |
|
{{ jsdwCompanyProblemOverview.changing }} |
|
</div> |
|
<div class="descriptions_label"> |
|
整改中 |
|
</div> |
|
</div> |
|
</el-col> |
|
<el-col :span="6"> |
|
<div class="descriptions_cell text-center"> |
|
<div class="descriptions_content"> |
|
{{ jsdwCompanyProblemOverview.changed }} |
|
</div> |
|
<div class="descriptions_label"> |
|
已整改 |
|
</div> |
|
</div> |
|
</el-col> |
|
<el-col :span="6"> |
|
<div class="descriptions_cell text-center"> |
|
<div class="descriptions_content"> |
|
{{ jsdwCompanyProblemOverview.correctionRate }}% |
|
</div> |
|
<div class="descriptions_label"> |
|
整改率 |
|
</div> |
|
</div> |
|
</el-col> |
|
</el-row> |
|
<el-scrollbar height="330px"> |
|
<datav-chart-bar |
|
:data="jsdwCompanyProblemRankList" |
|
size="large" |
|
title="问题数排名" |
|
sub-title="问题数" |
|
:color="colors" |
|
/> |
|
</el-scrollbar> |
|
</datav-tab-item> |
|
|
|
</datav-tabs> |
|
</datav-tab-item> |
|
<datav-tab-item label="执法办案" name="4"> |
|
<datav-tabs |
|
type="bottom-button"> |
|
<datav-tab-item label="派出所" name="1"> |
|
<el-row class="mb-32"> |
|
<el-col :span="6"> |
|
<div class="descriptions_cell text-center"> |
|
<div class="descriptions_content"> |
|
{{ fxsjHandleCaseOverview.proTotal }} |
|
</div> |
|
<div class="descriptions_label"> |
|
问题数 |
|
</div> |
|
</div> |
|
</el-col> |
|
<el-col :span="6"> |
|
<div class="descriptions_cell text-center"> |
|
<div class="descriptions_content"> |
|
{{ fxsjHandleCaseOverview.changing }} |
|
</div> |
|
<div class="descriptions_label"> |
|
整改中 |
|
</div> |
|
</div> |
|
</el-col> |
|
<el-col :span="6"> |
|
<div class="descriptions_cell text-center"> |
|
<div class="descriptions_content"> |
|
{{ fxsjHandleCaseOverview.changed }} |
|
</div> |
|
<div class="descriptions_label"> |
|
已整改 |
|
</div> |
|
</div> |
|
</el-col> |
|
<el-col :span="6"> |
|
<div class="descriptions_cell text-center"> |
|
<div class="descriptions_content"> |
|
{{ fxsjHandleCaseOverview.correctionRate }}% |
|
</div> |
|
<div class="descriptions_label"> |
|
整改率 |
|
</div> |
|
</div> |
|
</el-col> |
|
</el-row> |
|
<el-scrollbar height="330px"> |
|
<datav-chart-bar |
|
:data="fxsjHandleCaseRankList" |
|
size="large" |
|
title="问题数排名" |
|
sub-title="问题数" |
|
:color="colors" |
|
/> |
|
</el-scrollbar> |
|
</datav-tab-item> |
|
<datav-tab-item label="大队" name="2"> |
|
<el-row class="mb-32"> |
|
<el-col :span="6"> |
|
<div class="descriptions_cell text-center"> |
|
<div class="descriptions_content"> |
|
{{ jsdwHandleCaseOverview.proTotal }} |
|
</div> |
|
<div class="descriptions_label"> |
|
问题数 |
|
</div> |
|
</div> |
|
</el-col> |
|
<el-col :span="6"> |
|
<div class="descriptions_cell text-center"> |
|
<div class="descriptions_content"> |
|
{{ jsdwHandleCaseOverview.changing }} |
|
</div> |
|
<div class="descriptions_label"> |
|
整改中 |
|
</div> |
|
</div> |
|
</el-col> |
|
<el-col :span="6"> |
|
<div class="descriptions_cell text-center"> |
|
<div class="descriptions_content"> |
|
{{ jsdwHandleCaseOverview.changed }} |
|
</div> |
|
<div class="descriptions_label"> |
|
已整改 |
|
</div> |
|
</div> |
|
</el-col> |
|
<el-col :span="6"> |
|
<div class="descriptions_cell text-center"> |
|
<div class="descriptions_content"> |
|
{{ jsdwHandleCaseOverview.correctionRate }}% |
|
</div> |
|
<div class="descriptions_label"> |
|
整改率 |
|
</div> |
|
</div> |
|
</el-col> |
|
</el-row> |
|
<el-scrollbar height="330px"> |
|
<datav-chart-bar |
|
:data="jsdwHandleCaseRankList" |
|
size="large" |
|
title="问题数排名" |
|
sub-title="问题数" |
|
:color="colors" |
|
/> |
|
</el-scrollbar> |
|
</datav-tab-item> |
|
|
|
</datav-tabs> |
|
</datav-tab-item> |
|
<datav-tab-item label="工作日测酒" name="5"> |
|
<datav-tabs |
|
type="bottom-button"> |
|
<datav-tab-item label="派出所" name="1"> |
|
<el-row class="mb-32"> |
|
<el-col :span="6"> |
|
<div class="descriptions_cell text-center"> |
|
<div class="descriptions_content"> |
|
{{ fxsjCheckBeerOverview.proTotal }} |
|
</div> |
|
<div class="descriptions_label"> |
|
问题数 |
|
</div> |
|
</div> |
|
</el-col> |
|
<el-col :span="6"> |
|
<div class="descriptions_cell text-center"> |
|
<div class="descriptions_content"> |
|
{{ fxsjCheckBeerOverview.changing }} |
|
</div> |
|
<div class="descriptions_label"> |
|
整改中 |
|
</div> |
|
</div> |
|
</el-col> |
|
<el-col :span="6"> |
|
<div class="descriptions_cell text-center"> |
|
<div class="descriptions_content"> |
|
{{ fxsjCheckBeerOverview.changed }} |
|
</div> |
|
<div class="descriptions_label"> |
|
已整改 |
|
</div> |
|
</div> |
|
</el-col> |
|
<el-col :span="6"> |
|
<div class="descriptions_cell text-center"> |
|
<div class="descriptions_content"> |
|
{{ fxsjCheckBeerOverview.correctionRate }}% |
|
</div> |
|
<div class="descriptions_label"> |
|
整改率 |
|
</div> |
|
</div> |
|
</el-col> |
|
</el-row> |
|
<el-scrollbar height="330px"> |
|
<datav-chart-bar |
|
:data="fxsjCheckBeerRankList" |
|
size="large" |
|
title="问题数排名" |
|
sub-title="问题数" |
|
:color="colors" |
|
/> |
|
</el-scrollbar> |
|
</datav-tab-item> |
|
<datav-tab-item label="大队" name="2"> |
|
<el-row class="mb-32"> |
|
<el-col :span="6"> |
|
<div class="descriptions_cell text-center"> |
|
<div class="descriptions_content"> |
|
{{ jsdwCheckBeerOverview.proTotal }} |
|
</div> |
|
<div class="descriptions_label"> |
|
问题数 |
|
</div> |
|
</div> |
|
</el-col> |
|
<el-col :span="6"> |
|
<div class="descriptions_cell text-center"> |
|
<div class="descriptions_content"> |
|
{{ jsdwCheckBeerOverview.changing }} |
|
</div> |
|
<div class="descriptions_label"> |
|
整改中 |
|
</div> |
|
</div> |
|
</el-col> |
|
<el-col :span="6"> |
|
<div class="descriptions_cell text-center"> |
|
<div class="descriptions_content"> |
|
{{ jsdwCheckBeerOverview.changed }} |
|
</div> |
|
<div class="descriptions_label"> |
|
已整改 |
|
</div> |
|
</div> |
|
</el-col> |
|
<el-col :span="6"> |
|
<div class="descriptions_cell text-center"> |
|
<div class="descriptions_content"> |
|
{{ jsdwCheckBeerOverview.correctionRate }}% |
|
</div> |
|
<div class="descriptions_label"> |
|
整改率 |
|
</div> |
|
</div> |
|
</el-col> |
|
</el-row> |
|
<el-scrollbar height="330px"> |
|
<datav-chart-bar |
|
:data="jsdwCheckBeerRankList" |
|
size="large" |
|
title="问题数排名" |
|
sub-title="问题数" |
|
:color="colors" |
|
/> |
|
</el-scrollbar> |
|
</datav-tab-item> |
|
|
|
</datav-tabs> |
|
</datav-tab-item> |
|
</datav-tabs> |
|
</datav-card> |
|
|
|
|
|
<datav-card title="督察工作动态"> |
|
<el-scrollbar height="310px"> |
|
<datav-message |
|
v-for="(msg, index) in messages" |
|
:key="index" |
|
:type="msg.type" |
|
:title="msg.title" |
|
:content="msg.content" :date="msg.date" |
|
/> |
|
</el-scrollbar> |
|
</datav-card> |
|
</el-col> |
|
|
|
</el-row> |
|
</main> |
|
</div> |
|
</el-scrollbar> |
|
</template> |
|
|
|
<script setup> |
|
import vCharts from "vue-echarts"; |
|
import changshaMap from "@/assets/data/changsha.json"; |
|
import * as echarts from "echarts/core"; |
|
import moment from "moment"; |
|
|
|
import {getSubOneStreetMap} from "@/api/screen/subScreen/subOneGlobal.ts"; |
|
import { |
|
getAllSubOneSupervisionNotifyCount, |
|
getSubOneChangedRank, getSubOneCheckBeer, getSubOneCompanyProblem, getSubOneGunController, getSubOneHandleCase, |
|
getSubOneProblemTypeRate, |
|
getSubOneSupervisionTrend, getSubOneYellowBetDrug |
|
} from "@/api/screen/subScreen/subOneSupervisionNotify.ts"; |
|
|
|
|
|
// region 所有变量 |
|
const activeTabRight = ref("1") |
|
const overview = ref({ |
|
correctionRate: 0, |
|
supervisionNotifyPreTotal: 0, |
|
supervisionNotifyChangingTotal: 0, |
|
supervisionNotifyChangedTotal: 0, |
|
supervisionNotifyTotal: 0, |
|
supervisionNotifyOrgTotal: 0, |
|
}); // 中央数据总览 |
|
const fxsjRankOverview = ref({}); // 日常督察总览分县市局 |
|
const jsdwRankOverview = ref({}); // 日常督察总览局属单位 |
|
const fxsjChangedRankList = ref([]); // 日常督察问题排行分县市局 |
|
const jsdwChangedRankList = ref([]); // 日常督察问题排行局属单位 |
|
const wtlxList = ref([]); // 问题类型占比 |
|
|
|
const fxsjYellowBetOverview = ref({ |
|
proTotal: 0, |
|
changing: 0, |
|
changed: 0, |
|
correctionRate: 0, |
|
}) // 黄赌毒总览分县市局 |
|
const jsdwYellowBetOverview = ref({ |
|
proTotal: 0, |
|
changing: 0, |
|
changed: 0, |
|
correctionRate: 0, |
|
}) // 黄赌毒总览局属单位 |
|
const fxsjYellowBetRankList = ref([]) // 黄赌毒问题排行分县市局 |
|
const jsdwYellowBetRankList = ref([]) // 黄赌毒问题排行局属单位 |
|
|
|
const fxsjGunControllerOverview = ref({ |
|
proTotal: 0, |
|
changing: 0, |
|
changed: 0, |
|
correctionRate: 0, |
|
}) // 枪支管理总览分县市局 |
|
const jsdwGunControllerOverview = ref({ |
|
proTotal: 0, |
|
changing: 0, |
|
changed: 0, |
|
correctionRate: 0, |
|
}) // 枪支管理总览局属单位 |
|
const fxsjGunControllerRankList = ref([]) // 枪支管理排行分县市局 |
|
const jsdwGunControllerRankList = ref([]) // 枪支管理排行局属单位 |
|
|
|
const fxsjCompanyProblemOverview = ref({ |
|
proTotal: 0, |
|
changing: 0, |
|
changed: 0, |
|
correctionRate: 0, |
|
}) // 涉企问题总览分县市局 |
|
const jsdwCompanyProblemOverview = ref({ |
|
proTotal: 0, |
|
changing: 0, |
|
changed: 0, |
|
correctionRate: 0, |
|
}) // 涉企问题局属单位 |
|
const fxsjCompanyProblemRankList = ref([]) // 涉企问题排行分县市局 |
|
const jsdwCompanyProblemRankList = ref([]) // 涉企问题排行局属单位 |
|
|
|
const fxsjHandleCaseOverview = ref({ |
|
proTotal: 0, |
|
changing: 0, |
|
changed: 0, |
|
correctionRate: 0, |
|
}) // 执法办案总览分县市局 |
|
const jsdwHandleCaseOverview = ref({ |
|
proTotal: 0, |
|
changing: 0, |
|
changed: 0, |
|
correctionRate: 0, |
|
}) // 执法办案总览局属单位 |
|
const fxsjHandleCaseRankList = ref([]) // 执法办案排行分县市局 |
|
const jsdwHandleCaseRankList = ref([]) // 执法办案排行局属单位 |
|
|
|
const fxsjCheckBeerOverview = ref({ |
|
proTotal: 0, |
|
changing: 0, |
|
changed: 0, |
|
correctionRate: 0, |
|
}) // 工作日测酒总览分县市局 |
|
const jsdwCheckBeerOverview = ref({ |
|
proTotal: 0, |
|
changing: 0, |
|
changed: 0, |
|
correctionRate: 0, |
|
}) // 工作日测酒总览局属单位 |
|
const fxsjCheckBeerRankList = ref([]) // 工作日测酒排行分县市局 |
|
const jsdwCheckBeerRankList = ref([]) // 工作日测酒排行局属单位 |
|
|
|
const messages = ref([ |
|
{ |
|
type: '', |
|
title: '工作简报', |
|
content: '为强化队伍纪律作风监督，给严打整治“雷霆行动”及即将到来的国庆节安保维稳工作提供强有力的纪律监督保障，9月25日20时至23时，市局警务督察支队安排6个现场督察组，对干部、民警共计119人开展集中酒精吹气测试。', |
|
date: '2024-09-27 10:32' |
|
}, |
|
{ |
|
type: 'warning', |
|
title: '工作简报', |
|
content: '为持续抓好“六项规定”贯彻执行，扎实做好中秋佳节前队伍纪律作风监督，9月3日20时至22时，市局警务督察支队联合机关党委以及来支队跟班学习的督察专干，组成6个督察组，对干部、民警、辅警共计112人开展集中酒精吹气测试。', |
|
date: '2024-09-06 16:23' |
|
}, |
|
{ |
|
type: 'warning', |
|
title: '工作简报', |
|
content: '为强化队伍纪律作风监督，给“夏季治安打击整治行动”及党的二十届三中全会安保维稳工作提供强有力地纪律监督保障，7月11日晚，市局警务督察支队联合机关党委，派出6个现场督察组，对干部、民警、辅警共计111人开展集中酒精吹气测试。', |
|
date: '2024-07-15 14:39' |
|
}, |
|
{ |
|
type: 'warning', |
|
title: '工作简报', |
|
content: '为督促各参战警力切实履职，拧紧责任链条，保障周杰伦演唱会安全顺利进行，根据市局统一部署，2024年5月30日至6月2日，由警务督察支队牵头，统筹参战单位督察力量，对全市公安机关周杰伦演唱会安全保卫工作开展全方位督导检查。', |
|
date: '2024-06-06 09:04' |
|
} |
|
]); |
|
const currentYear = new Date().getFullYear(); |
|
const years = ref([currentYear.toString(), (currentYear - 1).toString(), (currentYear - 2).toString()]); // 年份列表 |
|
const selectedYear = ref('2024'); // 当前选中的年份 |
|
const avg = 1000 |
|
const subOneSceneInspMapChart = ref(null); // 地图 |
|
const route = useRoute(); |
|
const currentDepartId = route.query.departId; |
|
|
|
// endregion |
|
|
|
|
|
// region 所有图表 |
|
const wtlxPieOption = computed(() => { |
|
return { |
|
tooltip: { |
|
trigger: "item", |
|
}, |
|
series: [ |
|
{ |
|
type: "pie", |
|
radius: ["40%", "70%"], |
|
label: { |
|
color: "#fff", |
|
}, |
|
data: wtlxList.value, |
|
}, |
|
], |
|
}; |
|
}); |
|
echarts.registerMap("changsha", changshaMap); |
|
const superviseTempMapVoList = ref([]); |
|
const option = ref({ |
|
|
|
tooltip: { |
|
trigger: 'item', |
|
formatter: function (params) { |
|
console.log(params) |
|
const dataItem = superviseTempMapVoList.value.find(item => item.name.includes(params.name.substring(0, 2))); |
|
if (dataItem) { |
|
return ` |
|
<div class="tooltip"> |
|
<div class="tooltip-title">${dataItem.originalName}</div> |
|
<div class="tooltip-content"> |
|
<ul class="tooltip-ul" > |
|
<li>通报问题数 <span>${dataItem.totalPro}</span></li> |
|
<li>整改中 <span>${dataItem.changing}</span></li> |
|
<li>已整改 <span>${dataItem.changed}</span></li> |
|
<li>涉及单位数 <span>${dataItem.relationOrg}</span></li> |
|
<li>涉及人数 <span>${dataItem.personNum}</span></li> |
|
<li>整改率 <span>${dataItem.changedRate}%</span></li> |
|
</ul> |
|
</div> |
|
</div>`; |
|
} else { |
|
return `<div class="tooltip"> |
|
<div class="tooltip-title">${params.name}</div> |
|
<div class="tooltip-content"> |
|
<ul class="tooltip-ul""> |
|
<li>通报问题数 <span>-</span></li> |
|
<li>整改中 <span>-</span></li> |
|
<li>已整改 <span>-</span></li> |
|
<li>涉及单位数 <span>-</span></li> |
|
<li>涉及人数 <span>-</span></li> |
|
<li>整改率 <span>-</span></li> |
|
</ul> |
|
</div> |
|
</div>`; |
|
} |
|
}, |
|
}, |
|
visualMap: { |
|
type: "piecewise", |
|
bottom: 10, |
|
pieces: [ |
|
{gte: 0, lte: 200, label: "低于平均问题30%", color: "#4987F6"}, |
|
{gte: 200, lte: 400, label: "平均问题上下浮动30%内", color: "#F6A149"}, |
|
{gte: 400, label: "高于平均问题30%", color: "#D34343"},], |
|
right: 10, |
|
realtime: false, |
|
orient: "horizontal", |
|
textStyle: { |
|
color: "#fff", |
|
}, |
|
calculable: true, |
|
// inRange: { |
|
// color: ['#4987F6', '#F6A149', '#D34343'] |
|
// } |
|
}, |
|
|
|
series: [ |
|
{ |
|
name: "长沙", |
|
type: "map", |
|
map: "changsha", |
|
hoverAnimation: true, |
|
roam:true, |
|
label: { |
|
show: true, |
|
color: "white", |
|
}, |
|
itemStyle: { |
|
normal: { |
|
areaColor: "#02215E", |
|
borderColor: "#24D2EE", |
|
borderWidth: 1 // 高亮时边框宽度 |
|
}, |
|
}, |
|
emphasis: { |
|
areaColor: "#FFD700", // 高亮时区域颜色 |
|
borderColor: "#FF0000", // 高亮时边框颜色 |
|
borderWidth: 4 // 高亮时边框宽度 |
|
}, |
|
data: [] |
|
} |
|
], |
|
}) |
|
const proTrend = ref({ |
|
grid: { |
|
left: '5%', // 图表距离容器左边的距离 |
|
right: '2%', // 图表距离容器右边的距离 |
|
top: '10%', // 图表距离容器上边的距离 |
|
bottom: '20%', // 图表距离容器下边的距离 |
|
containLabel: false // 是否包含坐标轴的标签 |
|
}, |
|
xAxis: { |
|
type: "category", |
|
data: [], |
|
boundaryGap: true, |
|
axisTick: { |
|
// 去掉X轴刻度线 |
|
show: false |
|
}, |
|
}, |
|
yAxis: { |
|
type: "value", |
|
splitLine: { |
|
show: true, |
|
lineStyle: { |
|
color: "#193775", |
|
}, |
|
} |
|
}, |
|
tooltip: { |
|
trigger: 'axis', |
|
axisPointer: { |
|
type: 'line', |
|
label: { |
|
backgroundColor: '#6a7985' |
|
} |
|
} |
|
}, |
|
series: [ |
|
{ |
|
type: "line", |
|
smooth: true, |
|
label: { |
|
show: false |
|
}, |
|
lineStyle: { |
|
color: "#28E6FF", |
|
width: 4, |
|
}, |
|
areaStyle: { |
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ |
|
{ |
|
offset: 0, |
|
color: "rgba(40,230,255,0.47)", // 渐变起始颜色 |
|
}, |
|
{ |
|
offset: 1, |
|
color: "rgba(40,230,255,0)", // 渐变结束颜色 |
|
}, |
|
]), |
|
}, |
|
data: [], |
|
}, |
|
], |
|
}); |
|
// endregion |
|
|
|
|
|
const handleCommand = (year) => { |
|
selectedYear.value = year; // 更新当前选中的年份 |
|
getSupervisionTrend(currentDepartId, year).then(res => { |
|
const supervisionTrend = res.supervisionTrend; |
|
const categories = supervisionTrend.map(item => item.name); |
|
const values = supervisionTrend.map(item => item.value); |
|
// 更新图表数据 |
|
proTrend.value.xAxis.data = categories; |
|
proTrend.value.series[0].data = values; |
|
}); |
|
}; |
|
|
|
|
|
// region 所有函数 |
|
const getMapJSON = async (currentDepartId) => { |
|
const res = await getSubOneStreetMap(currentDepartId) |
|
echarts.registerMap("changsha", res); |
|
subOneSceneInspMapChart.value.chart.setOption(option.value); |
|
} |
|
|
|
const getChangedRank = async(currentDepartId, times)=>{ |
|
const res = await getSubOneChangedRank(currentDepartId, times) |
|
fxsjRankOverview.value = res.fxsjRankOverview; |
|
jsdwRankOverview.value = res.jsdwRankOverview; |
|
fxsjChangedRankList.value = res.fxsjChangedRankList; |
|
jsdwChangedRankList.value = res.jsdwChangedRankList; |
|
console.log(res); |
|
|
|
} |
|
|
|
const getProblemTypeRate = async(currentDepartId, times)=>{ |
|
const res = await getSubOneProblemTypeRate(currentDepartId, times) |
|
wtlxList.value = res.wtlxList |
|
console.log(res); |
|
} |
|
|
|
const getSupervisionOverView = async(currentDepartId, times)=>{ |
|
const res = await getAllSubOneSupervisionNotifyCount(currentDepartId, times) |
|
Object.assign(overview.value, { |
|
correctionRate: Number(res.overview.rectifyRate), |
|
supervisionNotifyPreTotal: Number(res.overview.personNumber), |
|
supervisionNotifyChangingTotal: Number(res.overview.rectifingNumber), |
|
supervisionNotifyChangedTotal: Number(res.overview.rectifedNumber), |
|
supervisionNotifyTotal: Number(res.overview.problemNumber), |
|
supervisionNotifyOrgTotal: Number(res.overview.departNumber), |
|
}); |
|
} |
|
|
|
const getSupervisionTrend = async(currentDepartId, times)=>{ |
|
const res = await getSubOneSupervisionTrend(currentDepartId, times) |
|
const supervisionTrend = res.supervisionTrend; |
|
const categories = supervisionTrend.map(item => item.name); |
|
const values = supervisionTrend.map(item => item.value); |
|
proTrend.value.xAxis.data = categories; |
|
proTrend.value.series[0].data = values; |
|
} |
|
|
|
const getYellowBetDrugData = async(currentDepartId, times)=>{ |
|
const res = await getSubOneYellowBetDrug(currentDepartId, times) |
|
fxsjYellowBetOverview.value = res.fxsjYellowBetOverview |
|
jsdwYellowBetOverview.value = res.jsdwYellowBetOverview |
|
fxsjYellowBetRankList.value = res.fxsjYellowBetRankList |
|
jsdwYellowBetRankList.value = res.jsdwYellowBetRankList |
|
} |
|
|
|
const getGunControllerData = async(currentDepartId, times)=>{ |
|
const res = await getSubOneGunController(currentDepartId, times) |
|
fxsjGunControllerOverview.value = res.fxsjGunControllerOverview |
|
jsdwGunControllerOverview.value = res.jsdwGunControllerOverview |
|
fxsjGunControllerRankList.value = res.fxsjGunControllerRankList |
|
jsdwGunControllerRankList.value = res.jsdwGunControllerRankList |
|
} |
|
|
|
const getCompanyProblemData = async(currentDepartId, times)=>{ |
|
const res = await getSubOneCompanyProblem(currentDepartId, times) |
|
fxsjCompanyProblemOverview.value = res.fxsjCompanyProblemOverview |
|
jsdwCompanyProblemOverview.value = res.jsdwCompanyProblemOverview |
|
fxsjCompanyProblemRankList.value = res.fxsjCompanyProblemRankList |
|
jsdwCompanyProblemRankList.value = res.jsdwCompanyProblemRankList |
|
} |
|
|
|
const getHandleCaseData = async(currentDepartId, times)=>{ |
|
const res = await getSubOneHandleCase(currentDepartId, times) |
|
fxsjHandleCaseOverview.value = res.fxsjHandleCaseOverview |
|
jsdwHandleCaseOverview.value = res.jsdwHandleCaseOverview |
|
fxsjHandleCaseRankList.value = res.fxsjHandleCaseRankList |
|
jsdwHandleCaseRankList.value = res.jsdwHandleCaseRankList |
|
} |
|
|
|
const getCheckBeerData = async(currentDepartId, times)=>{ |
|
const res = await getSubOneCheckBeer(currentDepartId, times) |
|
fxsjCheckBeerOverview.value = res.fxsjCheckBeerOverview |
|
jsdwCheckBeerOverview.value = res.jsdwCheckBeerOverview |
|
fxsjCheckBeerRankList.value = res.fxsjCheckBeerRankList |
|
jsdwCheckBeerRankList.value = res.jsdwCheckBeerRankList |
|
} |
|
// endregion |
|
|
|
|
|
// region 初始化数据 |
|
const time = ref([ |
|
moment().startOf("year").format("YYYY-MM-DD"), |
|
moment().format("YYYY-MM-DD"), |
|
]); |
|
|
|
|
|
const getData = async () => { |
|
getMapJSON(currentDepartId); |
|
getChangedRank(currentDepartId, time.value); |
|
getProblemTypeRate(currentDepartId, time.value); |
|
getSupervisionOverView(currentDepartId, time.value); |
|
getSupervisionTrend(currentDepartId, time.value); |
|
getYellowBetDrugData(currentDepartId, time.value); |
|
getGunControllerData(currentDepartId, time.value); |
|
getCompanyProblemData(currentDepartId, time.value); |
|
getHandleCaseData(currentDepartId, time.value); |
|
getCheckBeerData(currentDepartId, time.value); |
|
} |
|
|
|
watch(time, () => { |
|
getData(); |
|
}); |
|
|
|
|
|
onMounted(() => { |
|
getData(); |
|
}); |
|
|
|
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, |
|
}, |
|
]; |
|
// endregion |
|
|
|
|
|
</script> |
|
|
|
<style lang="scss" scoped> |
|
@import "@/style/datav.scss"; |
|
|
|
.message { |
|
padding: 10px; |
|
margin-bottom: 10px; |
|
background: linear-gradient(270deg, rgba(16, 151, 255, 0.1) 0%, rgba(0, 55, 236, 0.87) 100%); |
|
|
|
&[type=warning] { |
|
background: linear-gradient(270deg, rgba(255, 190, 16, 0.1) 0%, rgba(236, 84, 0, 0.87) 100%); |
|
} |
|
|
|
&[type=success] { |
|
background: linear-gradient(270deg, rgba(91, 216, 9, 0.14) 0%, #28813D 100%); |
|
} |
|
|
|
.message-title { |
|
font-size: 14px; |
|
margin-bottom: 10px; |
|
} |
|
|
|
.message-content { |
|
margin-bottom: 10px; |
|
} |
|
} |
|
|
|
:deep() { |
|
// 弹框整体 |
|
.tooltip { |
|
position: relative; |
|
width: 160px; |
|
height: 194px; |
|
background: linear-gradient(180deg, rgba(1, 4, 87, 0.8) 0%, rgba(3, 21, 119, 0.8) 100%); |
|
border: 1px solid #4E8FFF; |
|
margin: -10px -10px -10px -10px; |
|
|
|
} |
|
|
|
////浏阳市局 |
|
.tooltip-title { |
|
width: 160px; |
|
height: 43px; |
|
background: linear-gradient(180deg, #0A2F86 0%, #04154E 100%); |
|
box-shadow: inset 0px -1px 0px 0px #253755; |
|
display: flex; |
|
justify-content: center; /* 水平居中 */ |
|
align-items: center; /* 垂直居中 */ |
|
font-weight: 400; |
|
font-size: 16px; |
|
color: #FFFFFF; |
|
border-bottom: 1px solid #253755; /* 设置下边框 */ |
|
} |
|
|
|
.tooltip-content { |
|
width: 160px; |
|
height: 150px; |
|
background: linear-gradient(180deg, #010457 0%, #031577 100%) |
|
} |
|
|
|
.tooltip-content ul { |
|
list-style-type: none; /* 移除默认的小圆点 */ |
|
padding-left: 5px; |
|
margin: 0; |
|
} |
|
|
|
.tooltip-content ul li { |
|
height: 24px; |
|
color: #597AE9; |
|
font-weight: 400; |
|
font-size: 14px; |
|
} |
|
|
|
.tooltip-ul span { |
|
float: right; |
|
width: 55px; |
|
color: #fff; |
|
font-size: 14px; |
|
text-align: center; /* 水平居中 */ |
|
} |
|
|
|
//.tooltip::before { |
|
// content: ''; |
|
// position: absolute; |
|
// top: 90px; /* 调整尖角的垂直位置 */ |
|
// left: -10px; /* 调整尖角的水平位置 */ |
|
// width: 0; |
|
// height: 0; |
|
// //border-top: 10px solid red; /* 顶边颜色 */ |
|
// //border-bottom: 10px solid green; /* 底边颜色 */ |
|
// //border-right: 10px solid blue; /* 右边颜色，与背景颜色相同 */ |
|
//} |
|
|
|
} |
|
|
|
.test { |
|
width: 95px; |
|
height: 25px; |
|
background: #1C3472; |
|
} |
|
|
|
.gobal-dropdown-container { |
|
position: absolute; |
|
right: 20px; |
|
top: 15px; |
|
} |
|
|
|
.my-gobal-yearselect { |
|
font-size: 14px; |
|
padding-top: 6px; |
|
padding-left: 20px; |
|
width: 90px; |
|
color: #fff; |
|
} |
|
|
|
|
|
</style> |