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.
687 lines
20 KiB
687 lines
20 KiB
<template> |
|
<el-scrollbar height="100vh"> |
|
<div class="wrapper"> |
|
<datav-header/> |
|
<main> |
|
<el-row :gutter="16"> |
|
|
|
<el-col :span="6"> |
|
<datav-card title="日常督察情况"> |
|
<el-row class="mb-32"> |
|
<el-col :span="6"> |
|
<div class="descriptions_cell text-center"> |
|
<div class="descriptions_content"> |
|
{{rankOverview.proTotal}} |
|
</div> |
|
<div class="descriptions_label"> |
|
问题数 |
|
</div> |
|
</div> |
|
</el-col> |
|
<el-col :span="6"> |
|
<div class="descriptions_cell text-center"> |
|
<div class="descriptions_content"> |
|
{{rankOverview.changing}} |
|
</div> |
|
<div class="descriptions_label"> |
|
整改中 |
|
</div> |
|
</div> |
|
</el-col> |
|
<el-col :span="6"> |
|
<div class="descriptions_cell text-center"> |
|
<div class="descriptions_content"> |
|
{{ rankOverview.changed }} |
|
</div> |
|
<div class="descriptions_label"> |
|
已整改 |
|
</div> |
|
</div> |
|
</el-col> |
|
<el-col :span="6"> |
|
<div class="descriptions_cell text-center"> |
|
<div class="descriptions_content"> |
|
{{ rankOverview.correctionRate }}% |
|
</div> |
|
<div class="descriptions_label"> |
|
整改率 |
|
</div> |
|
</div> |
|
</el-col> |
|
</el-row> |
|
|
|
<datav-tabs |
|
type="bottom-button" |
|
v-model="activeTabLeft" |
|
|
|
> |
|
<datav-tab-item label="分县市局" name="3"> |
|
<el-scrollbar height="350px"> |
|
<datav-chart-bar |
|
:data="data1" |
|
:color="colors" |
|
:size="small" |
|
title="整改率排名" |
|
sub-title="已整改/问题数" |
|
/> |
|
</el-scrollbar> |
|
</datav-tab-item> |
|
<datav-tab-item label="局属单位" name="4"> |
|
<el-scrollbar height="350px"> |
|
<datav-chart-bar |
|
:data="jsdwBarList" |
|
:max="11" |
|
size="large" |
|
:color="colors" |
|
title="整改率排名" |
|
sub-title="完成数/问题数" |
|
/> |
|
</el-scrollbar> |
|
</datav-tab-item> |
|
</datav-tabs> |
|
|
|
</datav-card> |
|
|
|
<datav-card title="问题类型占比"> |
|
<v-charts |
|
style="height: 300px" |
|
:option="option2" |
|
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 |
|
/> |
|
<datav-card title="问题趋势"> |
|
<v-charts |
|
style="height: 280px" |
|
:option="option1" |
|
autoresize |
|
/> |
|
</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 |
|
v-model="activeMailTabRight" |
|
type="bottom-button" |
|
> |
|
<el-row class="mb-32"> |
|
<el-col :span="6"> |
|
<div class="descriptions_cell text-center"> |
|
<div class="descriptions_content"> |
|
42 |
|
</div> |
|
<div class="descriptions_label"> |
|
问题数 |
|
</div> |
|
</div> |
|
</el-col> |
|
<el-col :span="6"> |
|
<div class="descriptions_cell text-center"> |
|
<div class="descriptions_content"> |
|
2 |
|
</div> |
|
<div class="descriptions_label"> |
|
整改中 |
|
</div> |
|
</div> |
|
</el-col> |
|
<el-col :span="6"> |
|
<div class="descriptions_cell text-center"> |
|
<div class="descriptions_content"> |
|
40 |
|
</div> |
|
<div class="descriptions_label"> |
|
已整改 |
|
</div> |
|
</div> |
|
</el-col> |
|
<el-col :span="6"> |
|
<div class="descriptions_cell text-center"> |
|
<div class="descriptions_content"> |
|
95% |
|
</div> |
|
<div class="descriptions_label"> |
|
整改率 |
|
</div> |
|
</div> |
|
</el-col> |
|
</el-row> |
|
<datav-tab-item label="分县市局" name="1"> |
|
<el-scrollbar height="300px"> |
|
<datav-chart-bar-mail |
|
:data="xx" |
|
size="large" |
|
/> |
|
</el-scrollbar> |
|
</datav-tab-item> |
|
<datav-tab-item label="局属单位" name="2"> |
|
<el-scrollbar height="300px"> |
|
<datav-chart-bar-mail |
|
:data="xx" |
|
:max="11" |
|
size="large" |
|
/> |
|
</el-scrollbar> |
|
</datav-tab-item> |
|
</datav-tabs> |
|
</datav-tab-item> |
|
<datav-tab-item label="涉企问题" name="2"> |
|
<datav-tabs |
|
v-model="activeMailTabRight" |
|
type="bottom-button" |
|
> |
|
<datav-tab-item label="分县市局" name="1"> |
|
<el-scrollbar height="300px"> |
|
<datav-chart-bar-mail |
|
:data="xx" |
|
size="large" |
|
/> |
|
</el-scrollbar> |
|
|
|
</datav-tab-item> |
|
<datav-tab-item label="局属单位" name="2"> |
|
<el-scrollbar height="300px"> |
|
<datav-chart-bar-mail |
|
:data="xx" |
|
:max="11" |
|
size="large" |
|
/> |
|
</el-scrollbar> |
|
</datav-tab-item> |
|
</datav-tabs> |
|
</datav-tab-item> |
|
<datav-tab-item label="黄赌毒" name="3"> |
|
<datav-tabs |
|
v-model="activeMailTabRight" |
|
type="bottom-button" |
|
> |
|
<datav-tab-item label="分县市局" name="1"> |
|
<el-scrollbar height="300px"> |
|
<datav-chart-bar-mail |
|
:data="xx" |
|
size="large" |
|
/> |
|
</el-scrollbar> |
|
|
|
</datav-tab-item> |
|
<datav-tab-item label="局属单位" name="2"> |
|
<el-scrollbar height="300px"> |
|
<datav-chart-bar-mail |
|
:data="xx" |
|
:max="11" |
|
size="large" |
|
/> |
|
</el-scrollbar> |
|
</datav-tab-item> |
|
</datav-tabs> |
|
</datav-tab-item> |
|
<datav-tab-item label="执法办案" name="4"> |
|
<datav-tabs |
|
v-model="activeMailTabRight" |
|
type="bottom-button" |
|
> |
|
<datav-tab-item label="分县市局" name="1"> |
|
<el-scrollbar height="300px"> |
|
<datav-chart-bar-mail |
|
:data="xx" |
|
size="large" |
|
/> |
|
</el-scrollbar> |
|
|
|
</datav-tab-item> |
|
<datav-tab-item label="局属单位" name="2"> |
|
<el-scrollbar height="300px"> |
|
<datav-chart-bar-mail |
|
:data="xx" |
|
:max="11" |
|
size="large" |
|
/> |
|
</el-scrollbar> |
|
</datav-tab-item> |
|
</datav-tabs> |
|
</datav-tab-item> |
|
<datav-tab-item label="工作日测酒" name="5"> |
|
<datav-tabs |
|
v-model="activeMailTabRight" |
|
type="bottom-button" |
|
> |
|
<datav-tab-item label="分县市局" name="1"> |
|
<el-scrollbar height="300px"> |
|
<datav-chart-bar-mail |
|
:data="xx" |
|
size="large" |
|
/> |
|
</el-scrollbar> |
|
|
|
</datav-tab-item> |
|
<datav-tab-item label="局属单位" name="2"> |
|
<el-scrollbar height="300px"> |
|
<datav-chart-bar-mail |
|
:data="xx" |
|
:max="11" |
|
size="large" |
|
/> |
|
</el-scrollbar> |
|
</datav-tab-item> |
|
</datav-tabs> |
|
</datav-tab-item> |
|
</datav-tabs>--> |
|
|
|
<!-- <datav-chart-bar |
|
title="问题数排名" |
|
sub-title="问题数" |
|
:data="data2" |
|
:max="9700" |
|
/>--> |
|
|
|
</datav-card> |
|
<datav-card title="督察工作动态"> |
|
<el-scrollbar height="400px"> |
|
<div class="message"> |
|
<div class="message-title">工作部署</div> |
|
<div class="message-content">关于报送2024年第二季度贯彻落实防止干预司法“三个规定”进展情况的通知。</div> |
|
<div class="message-footer flex end"> |
|
<span>2024-09-18 18:00:13</span> |
|
</div> |
|
</div> |
|
<div class="message" type="warning"> |
|
<div class="message-title">督察通报</div> |
|
<div class="message-content"> |
|
自20**年**月**日起，对****同志担任****单位****职务期间的经济责任履行情况进行审计，必要时，将追溯至相关年度或延伸审计有关单位。 |
|
</div> |
|
<div class="message-footer flex end"> |
|
<span>2024-09-18 18:00:13</span> |
|
</div> |
|
</div> |
|
<div class="message" type="success"> |
|
<div class="message-title">工作简报</div> |
|
<div class="message-content">关于报送2024年第二季度贯彻落实防止干预司法“三个规定”进展情况的通知。</div> |
|
<div class="message-footer flex end"> |
|
<span>2024-09-18 18:00:13</span> |
|
</div> |
|
</div> |
|
<div class="message"> |
|
<div class="message-title">工作部署</div> |
|
<div class="message-content">关于报送2024年第二季度贯彻落实防止干预司法“三个规定”进展情况的通知。</div> |
|
<div class="message-footer flex end"> |
|
<span>2024-09-18 18:00:13</span> |
|
</div> |
|
</div> |
|
</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 {getAllSupervisionNotifyCount, getChangedRank} from "@/api/data/supervisionNotify.ts"; |
|
|
|
echarts.registerMap("changsha", changshaMap); |
|
const option = { |
|
geo: { |
|
// 是上面注册时的名字哦，registerMap（'名字保持一致'） |
|
map: "changsha", |
|
}, |
|
|
|
visualMap: { |
|
type: "piecewise", |
|
bottom: 10, |
|
pieces: [ |
|
{gte: 85, lte: 100, label: "问题数低于500"}, |
|
{gte: 65, lte: 85, label: "问题数低于1000"}, |
|
{gte: 0, lte: 65, label: "问题数低于1000"}, |
|
], |
|
right: 10, // 右边距 |
|
realtime: false, |
|
orient: "horizontal", // 水平显示 |
|
textStyle: { |
|
color: "#fff", // 文字颜色 |
|
}, |
|
calculable: true, |
|
inRange: { |
|
color: ["#D34343", "#F6A149", "#4987F6"], |
|
}, |
|
}, |
|
series: [ |
|
{ |
|
name: "长沙", |
|
type: "map", |
|
map: "changsha", |
|
hoverAnimation: true, |
|
|
|
label: { |
|
show: true, |
|
color: "white", |
|
}, |
|
itemStyle: { |
|
normal: { |
|
areaColor: "#02215E", // 这里将地图区域的颜色修改为红色 |
|
}, |
|
}, |
|
}, |
|
], |
|
}; |
|
|
|
const option1 = ref({ |
|
xAxis: { |
|
type: "category", |
|
boundaryGap: false, |
|
data: [ |
|
"9/10", |
|
"9/11", |
|
"9/12", |
|
"9/13", |
|
"9/14", |
|
"9/15", |
|
"9/16", |
|
"9/17", |
|
"9/18", |
|
"9/19", |
|
"9/20", |
|
"9/21", |
|
"9/22", |
|
"9/23", |
|
], |
|
}, |
|
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: [ |
|
2000, 1160, 2310, 3000, 3100, 3100, 3100, 2000, 1160, 2310, |
|
3000, 3100, 3100, 3100, |
|
], |
|
}, |
|
], |
|
}); |
|
|
|
const data1 = ref([ |
|
/*{ |
|
label: "开福分局", |
|
value: 90, |
|
unit: "%", |
|
numerator: 16, |
|
denominator: 17, |
|
}, |
|
{ |
|
label: "芙蓉分局", |
|
value: 90, |
|
unit: "%", |
|
numerator: 11, |
|
denominator: 11, |
|
}, |
|
{ |
|
label: "岳麓分局", |
|
value: 80, |
|
unit: "%", |
|
numerator: 10, |
|
denominator: 10, |
|
}, |
|
{ |
|
label: "雨花分局", |
|
value: 70, |
|
unit: "%", |
|
numerator: 9, |
|
denominator: 9, |
|
}, |
|
{ |
|
label: "望城分局", |
|
value: 60, |
|
unit: "%", |
|
numerator: 4, |
|
denominator: 4, |
|
}, |
|
{ |
|
label: "浏阳市局", |
|
value: 50, |
|
unit: "%", |
|
numerator: 3, |
|
denominator: 3, |
|
}, |
|
{ |
|
label: "长沙县局", |
|
value: 40, |
|
unit: "%", |
|
numerator: 3, |
|
denominator: 3, |
|
},*/ |
|
]); |
|
|
|
const data2 = [ |
|
{ |
|
name: "开福分局", |
|
value: 9700 |
|
}, |
|
{ |
|
name: "芙蓉分局", |
|
value: 9021 |
|
}, |
|
{ |
|
name: "岳麓分局", |
|
value: 8512 |
|
}, |
|
{ |
|
name: "雨花分局", |
|
value: 8021 |
|
}, |
|
{ |
|
name: "望城分局", |
|
value: 7111 |
|
}, |
|
{ |
|
name: "浏阳市局", |
|
value: 6622 |
|
}, |
|
{ |
|
name: "长沙县局", |
|
value: 6221 |
|
}, |
|
]; |
|
|
|
const option2 = { |
|
tooltip: { |
|
trigger: "item", |
|
}, |
|
series: [ |
|
{ |
|
type: "pie", |
|
radius: ["40%", "70%"], |
|
label: { |
|
color: "#fff", |
|
}, |
|
data: [ |
|
{value: 18.6, name: "执法办案"}, |
|
{value: 15.5, name: "训练执勤"}, |
|
{value: 1.9, name: "纪律作风"}, |
|
{value: 2.5, name: "专项工作"}, |
|
{value: 30, name: "整改核查"}, |
|
{value: 31, name: "其他类型"}, |
|
], |
|
}, |
|
], |
|
}; |
|
|
|
|
|
// region 初始化数据 |
|
const activeTabLeft = ref("3"); |
|
const overview = ref({ |
|
supervisionNotifyTotal: 0, |
|
supervisionNotifyOrgTotal: 0, |
|
supervisionNotifyPreTotal: 0, |
|
supervisionNotifyChangingTotal: 0, |
|
supervisionNotifyChangedTotal: 0, |
|
correctionRate: 0, |
|
}); |
|
const rankOverview = ref({ |
|
proTotal: 0, |
|
changing: 0, |
|
changed: 0, |
|
correctionRate: 0, |
|
}); |
|
|
|
|
|
const time = ref([ |
|
moment().startOf("year").format("YYYY-MM-DD"), |
|
moment().format("YYYY-MM-DD"), |
|
]); |
|
|
|
function getData() { |
|
getAllSupervisionNotifyCount(time.value).then((res) => { |
|
overview.value = res.overview; |
|
}); |
|
getChangedRank(time.value, 3).then((res) => { |
|
rankOverview.value = res.rankOverview; |
|
data1.value = res.changedRankList; |
|
}); |
|
} |
|
|
|
watch(time, () => { |
|
getData(); |
|
}); |
|
watch(activeTabLeft, () => { |
|
alert(activeTabLeft.value) |
|
getChangedRank(time.value, activeTabLeft.value).then((res) => { |
|
rankOverview.value = res.rankOverview; |
|
}); |
|
}); |
|
|
|
|
|
|
|
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; |
|
} |
|
} |
|
</style> |