|
|
|
|
@ -11,7 +11,7 @@
|
|
|
|
|
<el-col :span="6"> |
|
|
|
|
<div class="descriptions_cell text-center"> |
|
|
|
|
<div class="descriptions_content"> |
|
|
|
|
{{rankOverview.proTotal}} |
|
|
|
|
{{ rankOverview.proTotal }} |
|
|
|
|
</div> |
|
|
|
|
<div class="descriptions_label"> |
|
|
|
|
问题数 |
|
|
|
|
@ -21,7 +21,7 @@
|
|
|
|
|
<el-col :span="6"> |
|
|
|
|
<div class="descriptions_cell text-center"> |
|
|
|
|
<div class="descriptions_content"> |
|
|
|
|
{{rankOverview.changing}} |
|
|
|
|
{{ rankOverview.changing }} |
|
|
|
|
</div> |
|
|
|
|
<div class="descriptions_label"> |
|
|
|
|
整改中 |
|
|
|
|
@ -63,13 +63,14 @@
|
|
|
|
|
:size="small" |
|
|
|
|
title="整改率排名" |
|
|
|
|
sub-title="已整改/问题数" |
|
|
|
|
unit="%" |
|
|
|
|
/> |
|
|
|
|
</el-scrollbar> |
|
|
|
|
</datav-tab-item> |
|
|
|
|
<datav-tab-item label="局属单位" name="4"> |
|
|
|
|
<el-scrollbar height="350px"> |
|
|
|
|
<datav-chart-bar |
|
|
|
|
:data="jsdwBarList" |
|
|
|
|
:data="data1" |
|
|
|
|
:max="11" |
|
|
|
|
size="large" |
|
|
|
|
:color="colors" |
|
|
|
|
@ -85,7 +86,7 @@
|
|
|
|
|
<datav-card title="问题类型占比"> |
|
|
|
|
<v-charts |
|
|
|
|
style="height: 300px" |
|
|
|
|
:option="option2" |
|
|
|
|
:option="wtlxPieOption" |
|
|
|
|
autoresize |
|
|
|
|
/> |
|
|
|
|
</datav-card> |
|
|
|
|
@ -134,106 +135,28 @@
|
|
|
|
|
<datav-card title="问题趋势"> |
|
|
|
|
<v-charts |
|
|
|
|
style="height: 280px" |
|
|
|
|
:option="option1" |
|
|
|
|
: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 |
|
|
|
|
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-tabs v-model="activeTabRight" size="small"> |
|
|
|
|
<datav-tab-item label="黄赌毒" name="3"> |
|
|
|
|
<datav-tabs |
|
|
|
|
v-model="activeMailTabRight" |
|
|
|
|
@ -241,75 +164,16 @@
|
|
|
|
|
> |
|
|
|
|
<datav-tab-item label="分县市局" name="1"> |
|
|
|
|
<el-scrollbar height="300px"> |
|
|
|
|
<datav-chart-bar-mail |
|
|
|
|
:data="xx" |
|
|
|
|
<datav-chart-bar |
|
|
|
|
:data="hddList" |
|
|
|
|
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-tabs> |
|
|
|
|
|
|
|
|
|
<!-- <datav-chart-bar |
|
|
|
|
title="问题数排名" |
|
|
|
|
@ -366,74 +230,45 @@ 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"; |
|
|
|
|
import {getAllSupervisionNotifyCount, getChangedRank, getSupervisionTrend} from "@/api/data/supervisionNotify.ts"; |
|
|
|
|
import {getGobalRecentlyTrendByMonth} from "@/api/data/basicScreen.ts"; |
|
|
|
|
|
|
|
|
|
const data1= ref([]); |
|
|
|
|
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 wtlxList = ref([]) |
|
|
|
|
const hddList = ref([]) |
|
|
|
|
|
|
|
|
|
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", // 这里将地图区域的颜色修改为红色 |
|
|
|
|
}, |
|
|
|
|
}, |
|
|
|
|
}, |
|
|
|
|
], |
|
|
|
|
}; |
|
|
|
|
// region 问题趋势线状图 |
|
|
|
|
|
|
|
|
|
const option1 = ref({ |
|
|
|
|
const proTrend = ref({ |
|
|
|
|
grid: { |
|
|
|
|
left: '10%', // 图表距离容器左边的距离 |
|
|
|
|
right: '10%', // 图表距离容器右边的距离 |
|
|
|
|
top: '10%', // 图表距离容器上边的距离 |
|
|
|
|
bottom: '20%', // 图表距离容器下边的距离 |
|
|
|
|
containLabel: false // 是否包含坐标轴的标签 |
|
|
|
|
}, |
|
|
|
|
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", |
|
|
|
|
], |
|
|
|
|
data: [], |
|
|
|
|
}, |
|
|
|
|
yAxis: { |
|
|
|
|
type: "value", |
|
|
|
|
@ -476,166 +311,202 @@ const option1 = ref({
|
|
|
|
|
}, |
|
|
|
|
]), |
|
|
|
|
}, |
|
|
|
|
data: [ |
|
|
|
|
2000, 1160, 2310, 3000, 3100, 3100, 3100, 2000, 1160, 2310, |
|
|
|
|
3000, 3100, 3100, 3100, |
|
|
|
|
], |
|
|
|
|
data: [], |
|
|
|
|
}, |
|
|
|
|
], |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
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 years = ref(['2024', '2023', '2022']); // 年份列表 |
|
|
|
|
const selectedYear = ref('2024'); // 当前选中的年份 |
|
|
|
|
const handleCommand = (year) => { |
|
|
|
|
selectedYear.value = year; // 更新当前选中的年份 |
|
|
|
|
getSupervisionTrend(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; |
|
|
|
|
}); |
|
|
|
|
}; |
|
|
|
|
// endregion |
|
|
|
|
|
|
|
|
|
const data2 = [ |
|
|
|
|
{ |
|
|
|
|
name: "开福分局", |
|
|
|
|
value: 9700 |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
name: "芙蓉分局", |
|
|
|
|
value: 9021 |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
name: "岳麓分局", |
|
|
|
|
value: 8512 |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
name: "雨花分局", |
|
|
|
|
value: 8021 |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
name: "望城分局", |
|
|
|
|
value: 7111 |
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
// region 问题类型占比 |
|
|
|
|
const wtlxPieOption = computed(() => { |
|
|
|
|
return { |
|
|
|
|
tooltip: { |
|
|
|
|
trigger: "item", |
|
|
|
|
}, |
|
|
|
|
series: [ |
|
|
|
|
{ |
|
|
|
|
type: "pie", |
|
|
|
|
radius: ["40%", "70%"], |
|
|
|
|
label: { |
|
|
|
|
color: "#fff", |
|
|
|
|
}, |
|
|
|
|
data: wtlxList.value, |
|
|
|
|
|
|
|
|
|
}, |
|
|
|
|
], |
|
|
|
|
}; |
|
|
|
|
}); |
|
|
|
|
// endregion |
|
|
|
|
|
|
|
|
|
// region 地图相关 |
|
|
|
|
|
|
|
|
|
let superviseTempMapVoList = [ |
|
|
|
|
{ |
|
|
|
|
name: "浏阳市局", |
|
|
|
|
value: 6622 |
|
|
|
|
"name": "天心分局", |
|
|
|
|
"totalPro": 11, |
|
|
|
|
"changing": 11, |
|
|
|
|
"changed": 11, |
|
|
|
|
"relationOrg": 11, |
|
|
|
|
"changedRate": 11 |
|
|
|
|
} |
|
|
|
|
]; |
|
|
|
|
echarts.registerMap("changsha", changshaMap); |
|
|
|
|
const option = ref({ |
|
|
|
|
geo: { |
|
|
|
|
map: "changsha", |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
name: "长沙县局", |
|
|
|
|
value: 6221 |
|
|
|
|
tooltip: { |
|
|
|
|
trigger: 'item', |
|
|
|
|
formatter: function (params) { |
|
|
|
|
console.log(params) |
|
|
|
|
const dataItem = superviseTempMapVoList.find(item => item.name.includes(params.name.substring(0, 2))); |
|
|
|
|
if (dataItem) { |
|
|
|
|
return ` |
|
|
|
|
<div class="tooltip"> |
|
|
|
|
<div class="tooltip-title">${dataItem.name}</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.changedRate}</span></li> |
|
|
|
|
</ul> |
|
|
|
|
</div> |
|
|
|
|
</div>`; |
|
|
|
|
} else { |
|
|
|
|
return `<div class="tooltip"> |
|
|
|
|
<div class="tooltip-title">${dataItem.name}</div> |
|
|
|
|
<div class="tooltip-content"> |
|
|
|
|
<ul class="tooltip-ul""> |
|
|
|
|
<li>通报问题数 <span>0</span></li> |
|
|
|
|
<li>整改中 <span>0</span></li> |
|
|
|
|
<li>已整改 <span>0</span></li> |
|
|
|
|
<li>涉及单位数 <span>0</span></li> |
|
|
|
|
<li>整改率 <span>0</span></li> |
|
|
|
|
</ul> |
|
|
|
|
</div> |
|
|
|
|
</div>`; |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
// backgroundColor: "#031577", // |
|
|
|
|
// borderColor: "#0A2F86", |
|
|
|
|
// borderWidth: 0, // 设置边框宽度为1像素 |
|
|
|
|
// borderRadius: 3, // 设置边框半径为3像素 |
|
|
|
|
// shadowBlur: 0, // 设置阴影模糊程度为8像素 |
|
|
|
|
// shadowOffsetX: 0, // 设置水平阴影位移量为0像素 |
|
|
|
|
// shadowOffsetY: 0, // 设置垂直阴影位移量为6像素 |
|
|
|
|
}, |
|
|
|
|
]; |
|
|
|
|
visualMap: { |
|
|
|
|
|
|
|
|
|
const option2 = { |
|
|
|
|
tooltip: { |
|
|
|
|
trigger: "item", |
|
|
|
|
type: "piecewise", |
|
|
|
|
bottom: 10, |
|
|
|
|
pieces: [ |
|
|
|
|
{gte: 0, lte: 10, label: "问题数低于500"}, |
|
|
|
|
{gte: 10, lte: 20, label: "问题数介于500-1000"}, |
|
|
|
|
{gte: 30, label: "问题数高于1000"}, |
|
|
|
|
], |
|
|
|
|
right: 10, |
|
|
|
|
realtime: false, |
|
|
|
|
orient: "horizontal", |
|
|
|
|
textStyle: { |
|
|
|
|
color: "#fff", |
|
|
|
|
}, |
|
|
|
|
calculable: true, |
|
|
|
|
inRange: { |
|
|
|
|
color: ["#4987F6", "#F6A149", "#D34343",], |
|
|
|
|
}, |
|
|
|
|
}, |
|
|
|
|
series: [ |
|
|
|
|
{ |
|
|
|
|
type: "pie", |
|
|
|
|
radius: ["40%", "70%"], |
|
|
|
|
name: "长沙", |
|
|
|
|
type: "map", |
|
|
|
|
map: "changsha", |
|
|
|
|
hoverAnimation: true, |
|
|
|
|
label: { |
|
|
|
|
color: "#fff", |
|
|
|
|
show: true, |
|
|
|
|
color: "white", |
|
|
|
|
}, |
|
|
|
|
data: [ |
|
|
|
|
{value: 18.6, name: "执法办案"}, |
|
|
|
|
{value: 15.5, name: "训练执勤"}, |
|
|
|
|
{value: 1.9, name: "纪律作风"}, |
|
|
|
|
{value: 2.5, name: "专项工作"}, |
|
|
|
|
{value: 30, name: "整改核查"}, |
|
|
|
|
{value: 31, name: "其他类型"}, |
|
|
|
|
], |
|
|
|
|
}, |
|
|
|
|
itemStyle: { |
|
|
|
|
normal: { |
|
|
|
|
areaColor: "#02215E", |
|
|
|
|
borderColor: "#1773c3", |
|
|
|
|
}, |
|
|
|
|
}, |
|
|
|
|
emphasis: { |
|
|
|
|
areaColor: "#FFD700", // 高亮时区域颜色 |
|
|
|
|
borderColor: "#FF0000", // 高亮时边框颜色 |
|
|
|
|
borderWidth: 4 // 高亮时边框宽度 |
|
|
|
|
}, |
|
|
|
|
data: [] |
|
|
|
|
} |
|
|
|
|
], |
|
|
|
|
}; |
|
|
|
|
}) |
|
|
|
|
|
|
|
|
|
// endregion |
|
|
|
|
|
|
|
|
|
// 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, |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// region 初始化数据 |
|
|
|
|
|
|
|
|
|
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; |
|
|
|
|
wtlxList.value = res.wtlxList |
|
|
|
|
hddList.value = res.hddList; |
|
|
|
|
superviseTempMapVoList = res.superviseTempMapVoList; |
|
|
|
|
}); |
|
|
|
|
getChangedRank(time.value, 3).then((res) => { |
|
|
|
|
rankOverview.value = res.rankOverview; |
|
|
|
|
data1.value = res.changedRankList; |
|
|
|
|
option2.series[0].data = res.wtlxList; |
|
|
|
|
}); |
|
|
|
|
getSupervisionTrend(new Date().getFullYear()).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; |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
watch(time, () => { |
|
|
|
|
getData(); |
|
|
|
|
}); |
|
|
|
|
watch(activeTabLeft, () => { |
|
|
|
|
alert(activeTabLeft.value) |
|
|
|
|
// alert(activeTabLeft.value) |
|
|
|
|
getChangedRank(time.value, activeTabLeft.value).then((res) => { |
|
|
|
|
rankOverview.value = res.rankOverview; |
|
|
|
|
data1.value = res.changedRankList; |
|
|
|
|
}); |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
onMounted(() => { |
|
|
|
|
getData(); |
|
|
|
|
}); |
|
|
|
|
@ -657,6 +528,37 @@ const colors = [
|
|
|
|
|
// endregion |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const data2 = [ |
|
|
|
|
{ |
|
|
|
|
name: "开福分局", |
|
|
|
|
value: 9700 |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
name: "芙蓉分局", |
|
|
|
|
value: 9021 |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
name: "岳麓分局", |
|
|
|
|
value: 8512 |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
name: "雨花分局", |
|
|
|
|
value: 8021 |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
name: "望城分局", |
|
|
|
|
value: 7111 |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
name: "浏阳市局", |
|
|
|
|
value: 6622 |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
name: "长沙县局", |
|
|
|
|
value: 6221 |
|
|
|
|
}, |
|
|
|
|
]; |
|
|
|
|
</script> |
|
|
|
|
|
|
|
|
|
<style lang="scss" scoped> |
|
|
|
|
@ -684,4 +586,103 @@ const colors = [
|
|
|
|
|
margin-bottom: 10px; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
:deep() { |
|
|
|
|
// 弹框整体 |
|
|
|
|
.tooltip { |
|
|
|
|
position: relative; |
|
|
|
|
width: 169.88px; |
|
|
|
|
height: 198px; |
|
|
|
|
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: 169.88px; |
|
|
|
|
height: 43px; |
|
|
|
|
background: linear-gradient(180deg, rgba(1, 4, 87, 0.8) 0%, rgba(3, 21, 119, 0.8) 100%); |
|
|
|
|
display: flex; |
|
|
|
|
justify-content: center; /* 水平居中 */ |
|
|
|
|
align-items: center; /* 垂直居中 */ |
|
|
|
|
text-align: center; /* 水平居中 */ |
|
|
|
|
font-weight: 400; |
|
|
|
|
font-size: 16px; |
|
|
|
|
color: #FFFFFF; |
|
|
|
|
line-height: 22px; |
|
|
|
|
border-bottom: 1px solid #253755; /* 设置下边框 */ |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.tooltip-content { |
|
|
|
|
width: 170px; |
|
|
|
|
height: 155.8px; |
|
|
|
|
//font-size: 11px; |
|
|
|
|
margin-top: -12px; |
|
|
|
|
background: linear-gradient(180deg, #010457 0%, #031577 100%); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.tooltip-content ul { |
|
|
|
|
list-style-type: none; /* 移除默认的小圆点 */ |
|
|
|
|
padding: 0; |
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.tooltip-content ul li { |
|
|
|
|
margin-left: 5px; |
|
|
|
|
height: 25px; |
|
|
|
|
color: #597AE9; |
|
|
|
|
font-size: 13px; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 数字的span |
|
|
|
|
.tooltip-ul span { |
|
|
|
|
float: right; |
|
|
|
|
width: 50px; |
|
|
|
|
text-align: right; |
|
|
|
|
margin-right: 35px; |
|
|
|
|
color: #fff; |
|
|
|
|
font-size: 13px; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* 小尖角 */ |
|
|
|
|
.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> |
