11 changed files with 933 additions and 262 deletions
@ -0,0 +1,33 @@ |
|||||||
|
import request from "@/api/request"; |
||||||
|
|
||||||
|
|
||||||
|
export function getSubOneCaseVerificationRank(departId, times) { |
||||||
|
return request.get({ |
||||||
|
url: `/datav/sub1/caseVerif/getSubOneCaseVerificationRank?departId=${departId}&beginTime=${times[0]}&endTime=${times[1]}` |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
export function getSubOneCaseProblemProperty(departId, times) { |
||||||
|
return request.get({ |
||||||
|
url: `/datav/sub1/caseVerif/getSubOneCaseProblemProperty?departId=${departId}&beginTime=${times[0]}&endTime=${times[1]}` |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
export function getSubOneAllCaseVerificationCount(departId, times) { |
||||||
|
return request.get({ |
||||||
|
url: `/datav/sub1/caseVerif/getSubOneAllCaseVerificationCount?departId=${departId}&beginTime=${times[0]}&endTime=${times[1]}` |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
export function getSubOneCaseVerificationTrend(departId, year) { |
||||||
|
return request.get({ |
||||||
|
url: `/datav/sub1/caseVerif/getSubOneCaseVerificationTrend?departId=${departId}&year=${year}` |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
export function getSubOneCaseSourceRateAndDealSituation(departId, times) { |
||||||
|
return request.get({ |
||||||
|
url: `/datav/sub1/caseVerif/getSubOneCaseSourceRateAndDealSituation?departId=${departId}&beginTime=${times[0]}&endTime=${times[1]}` |
||||||
|
}); |
||||||
|
} |
||||||
@ -0,0 +1,62 @@ |
|||||||
|
import request from "@/api/request"; |
||||||
|
|
||||||
|
|
||||||
|
export function getSubOneChangedRank(departId, times) { |
||||||
|
return request.get({ |
||||||
|
url: `/datav/sub1/supervisonNotify/getSubOneChangedRank?departId=${departId}&beginTime=${times[0]}&endTime=${times[1]}` |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
export function getSubOneProblemTypeRate(departId, times) { |
||||||
|
return request.get({ |
||||||
|
url: `/datav/sub1/supervisonNotify/getSubOneProblemTypeRate?departId=${departId}&beginTime=${times[0]}&endTime=${times[1]}` |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
export function getSubOneSupervisionTrend(departId, year) { |
||||||
|
return request.get({ |
||||||
|
url: `/datav/sub1/supervisonNotify/getSubOneSupervisionTrend?departId=${departId}&year=${year}` |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
export function getAllSubOneSupervisionNotifyCount(departId, times) { |
||||||
|
return request.get({ |
||||||
|
url: `/datav/sub1/supervisonNotify/getAllSubOneSupervisionNotifyCount?departId=${departId}&beginTime=${times[0]}&endTime=${times[1]}` |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
export function getSubOneYellowBetDrug(departId, times) { |
||||||
|
return request.get({ |
||||||
|
url: `/datav/sub1/supervisonNotify/getSubOneYellowBetDrug?departId=${departId}&beginTime=${times[0]}&endTime=${times[1]}` |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
export function getSubOneGunController(departId, times) { |
||||||
|
return request.get({ |
||||||
|
url: `/datav/sub1/supervisonNotify/getSubOneGunController?departId=${departId}&beginTime=${times[0]}&endTime=${times[1]}` |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
export function getSubOneCompanyProblem(departId, times) { |
||||||
|
return request.get({ |
||||||
|
url: `/datav/sub1/supervisonNotify/getSubOneCompanyProblem?departId=${departId}&beginTime=${times[0]}&endTime=${times[1]}` |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
export function getSubOneHandleCase(departId, times) { |
||||||
|
return request.get({ |
||||||
|
url: `/datav/sub1/supervisonNotify/getSubOneHandleCase?departId=${departId}&beginTime=${times[0]}&endTime=${times[1]}` |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
export function getSubOneCheckBeer(departId, times) { |
||||||
|
return request.get({ |
||||||
|
url: `/datav/sub1/supervisonNotify/getSubOneCheckBeer?departId=${departId}&beginTime=${times[0]}&endTime=${times[1]}` |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
// export
|
||||||
|
|
||||||
@ -1,108 +0,0 @@ |
|||||||
import request from "@/api/request"; |
|
||||||
|
|
||||||
|
|
||||||
export function getSubOneChangedRank(departId, times) { |
|
||||||
return request.get({ |
|
||||||
url: `/datav/sub1/supervisonNotify/getSubOneChangedRank?departId=${departId}&beginTime=${times[0]}&endTime=${times[1]}` |
|
||||||
}); |
|
||||||
} |
|
||||||
|
|
||||||
|
|
||||||
export function getSubOneProblemTypeRate(departId, times) { |
|
||||||
return request.get({ |
|
||||||
url: `/datav/sub1/supervisonNotify/getSubOneProblemTypeRate?departId=${departId}&beginTime=${times[0]}&endTime=${times[1]}` |
|
||||||
}); |
|
||||||
} |
|
||||||
|
|
||||||
export function getSubOneSupervisionTrend(departId, year) { |
|
||||||
return request.get({ |
|
||||||
url: `/datav/sub1/supervisonNotify/getSubOneSupervisionTrend?departId=${departId}&year=${year}` |
|
||||||
}); |
|
||||||
} |
|
||||||
|
|
||||||
// export function getAllSupervisionNotifyCount(times) {
|
|
||||||
// return request.get({
|
|
||||||
// url: `/datav/supervisonNotify?beginTime=${times[0]}&endTime=${times[1]}`
|
|
||||||
// });
|
|
||||||
// }
|
|
||||||
//
|
|
||||||
// /**
|
|
||||||
// * 问题类型占比
|
|
||||||
// */
|
|
||||||
// export function getProblemTypeRate(times) {
|
|
||||||
// return request.get({
|
|
||||||
// url: `/datav/supervisonNotify/getProblemTypeRate?beginTime=${times[0]}&endTime=${times[1]}`
|
|
||||||
// });
|
|
||||||
// }
|
|
||||||
//
|
|
||||||
//
|
|
||||||
//
|
|
||||||
//
|
|
||||||
// export function getChangedRank(times, groupType) {
|
|
||||||
// return request.get({
|
|
||||||
// url: `/datav/supervisonNotify/rank?beginTime=${times[0]}&endTime=${times[1]}&groupType=${groupType}`
|
|
||||||
// });
|
|
||||||
// }
|
|
||||||
// /**
|
|
||||||
// * 获取问题趋势数据
|
|
||||||
// */
|
|
||||||
// export function getSupervisionTrend(year) {
|
|
||||||
// return request.get({
|
|
||||||
// url: `/datav/supervisonNotify/getSupervisionTrend?year=${year}`
|
|
||||||
// });
|
|
||||||
// }
|
|
||||||
//
|
|
||||||
//
|
|
||||||
//
|
|
||||||
// /**
|
|
||||||
// * 获取地图数据
|
|
||||||
// */
|
|
||||||
// export function getMap(times) {
|
|
||||||
// return request.get({
|
|
||||||
// url: `/datav/supervisonNotify/getMap?beginTime=${times[0]}&endTime=${times[1]}`
|
|
||||||
// });
|
|
||||||
// }
|
|
||||||
//
|
|
||||||
//
|
|
||||||
//
|
|
||||||
// /**
|
|
||||||
// * 黄赌毒数据
|
|
||||||
// */
|
|
||||||
// export function getYellowBetDrug(times) {
|
|
||||||
// return request.get({
|
|
||||||
// url: `/datav/supervisonNotify/getYellowBetDrug?beginTime=${times[0]}&endTime=${times[1]}`
|
|
||||||
// });
|
|
||||||
// }
|
|
||||||
//
|
|
||||||
//
|
|
||||||
// // 枪支管理数据
|
|
||||||
// export function getGunController(times) {
|
|
||||||
// return request.get({
|
|
||||||
// url: `/datav/supervisonNotify/getGunController?beginTime=${times[0]}&endTime=${times[1]}`
|
|
||||||
// });
|
|
||||||
// }
|
|
||||||
//
|
|
||||||
//
|
|
||||||
// // 枪支管理数据
|
|
||||||
// export function getCompanyProblem(times) {
|
|
||||||
// return request.get({
|
|
||||||
// url: `/datav/supervisonNotify/getCompanyProblem?beginTime=${times[0]}&endTime=${times[1]}`
|
|
||||||
// });
|
|
||||||
// }
|
|
||||||
//
|
|
||||||
//
|
|
||||||
// // 执法办案数据
|
|
||||||
// export function getHandleCase(times) {
|
|
||||||
// return request.get({
|
|
||||||
// url: `/datav/supervisonNotify/getHandleCase?beginTime=${times[0]}&endTime=${times[1]}`
|
|
||||||
// });
|
|
||||||
// }
|
|
||||||
//
|
|
||||||
//
|
|
||||||
// // 枪支管理数据
|
|
||||||
// export function getCheckBeer(times) {
|
|
||||||
// return request.get({
|
|
||||||
// url: `/datav/supervisonNotify/getCheckBeer?beginTime=${times[0]}&endTime=${times[1]}`
|
|
||||||
// });
|
|
||||||
// }
|
|
||||||
|
|
||||||
@ -0,0 +1,735 @@ |
|||||||
|
<template> |
||||||
|
<el-scrollbar height="100vh"> |
||||||
|
<div class="wrapper"> |
||||||
|
<datav-header/> |
||||||
|
<main> |
||||||
|
<el-row :gutter="16"> |
||||||
|
<el-col :span="6"> |
||||||
|
<datav-card title="所队排名" subTitle="查实案件数"> |
||||||
|
<datav-tabs |
||||||
|
type="bottom-button" |
||||||
|
> |
||||||
|
<datav-tab-item label="派出所" name="1"> |
||||||
|
<el-scrollbar height="350px"> |
||||||
|
<datav-chart-bar |
||||||
|
:data="fxsjBarList" |
||||||
|
size="large" |
||||||
|
:color="colors" |
||||||
|
/> |
||||||
|
</el-scrollbar> |
||||||
|
</datav-tab-item> |
||||||
|
<datav-tab-item label="大队" name="2"> |
||||||
|
<el-scrollbar height="350px"> |
||||||
|
<datav-chart-bar |
||||||
|
:data="jsdwBarList" |
||||||
|
:max="11" |
||||||
|
size="large" |
||||||
|
/> |
||||||
|
</el-scrollbar> |
||||||
|
</datav-tab-item> |
||||||
|
</datav-tabs> |
||||||
|
</datav-card> |
||||||
|
<datav-card title="案件问题性质"> |
||||||
|
<datav-tabs> |
||||||
|
<datav-tab-item label="执法办案" name="1"> |
||||||
|
<v-charts |
||||||
|
style="height: 320px" |
||||||
|
:option="zfbaPieOption" |
||||||
|
autoresize |
||||||
|
/> |
||||||
|
</datav-tab-item> |
||||||
|
<datav-tab-item label="服务管理" name="2"> |
||||||
|
<v-charts |
||||||
|
style="height: 320px" |
||||||
|
:option="fwglPieOption" |
||||||
|
autoresize |
||||||
|
/> |
||||||
|
</datav-tab-item> |
||||||
|
<datav-tab-item label="警纪警规" name="3"> |
||||||
|
<v-charts |
||||||
|
style="height: 320px" |
||||||
|
:option="jgjjPieOption" |
||||||
|
autoresize |
||||||
|
/> |
||||||
|
</datav-tab-item> |
||||||
|
</datav-tabs> |
||||||
|
</datav-card> |
||||||
|
</el-col> |
||||||
|
<el-col :span="12"> |
||||||
|
<datav-date-picker v-model="time"/> |
||||||
|
<div class="flex gap-42"> |
||||||
|
<datav-statistic |
||||||
|
:value="overview.total" |
||||||
|
title="案件总数（起）" |
||||||
|
style="width: 16.66%" |
||||||
|
/> |
||||||
|
<datav-statistic |
||||||
|
:value="overview.confirmed" |
||||||
|
title="查实案件数" |
||||||
|
style="width: 16.66%" |
||||||
|
/> |
||||||
|
<datav-statistic |
||||||
|
:value="overview.dealCasePro" |
||||||
|
title="查处问题（个）" |
||||||
|
style="width: 16.66%" |
||||||
|
/> |
||||||
|
<datav-statistic |
||||||
|
:value="overview.punishPre" |
||||||
|
title="问责人次" |
||||||
|
style="width: 16.66%" |
||||||
|
/> |
||||||
|
<datav-statistic |
||||||
|
:value="overview.punishOrg" |
||||||
|
title="问责单位数" |
||||||
|
style="width: 16.66%" |
||||||
|
/> |
||||||
|
<datav-statistic |
||||||
|
:value="overview.rate" |
||||||
|
value-unit="%" |
||||||
|
title="查实率" |
||||||
|
style="width: 16.66%" |
||||||
|
/> |
||||||
|
</div> |
||||||
|
<v-charts |
||||||
|
style="height: 420px" |
||||||
|
:option="option" |
||||||
|
autoresize |
||||||
|
ref="chart" |
||||||
|
/> |
||||||
|
<datav-card title="查实问题趋势"> |
||||||
|
<v-charts |
||||||
|
style="height: 320px" |
||||||
|
: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> |
||||||
|
<datav-tab-item label="案件来源占比" name="1"> |
||||||
|
<div class="mb-40"> |
||||||
|
<v-charts |
||||||
|
style="height: 340px" |
||||||
|
:option="ajlyPieOption" |
||||||
|
autoresize |
||||||
|
/> |
||||||
|
</div> |
||||||
|
</datav-tab-item> |
||||||
|
<datav-tab-item label="问责处理情况" name="2"> |
||||||
|
<div class="mb-40"> |
||||||
|
<v-charts |
||||||
|
style="height: 340px" |
||||||
|
:option="wzclPieOption" |
||||||
|
autoresize |
||||||
|
/> |
||||||
|
</div> |
||||||
|
</datav-tab-item> |
||||||
|
</datav-tabs> |
||||||
|
</datav-card> |
||||||
|
<datav-card> |
||||||
|
<datav-tabs> |
||||||
|
<datav-tab-item label="禁闭处理情况" name="1"> |
||||||
|
<div class="mb-40"> |
||||||
|
<v-charts |
||||||
|
style="height: 340px" |
||||||
|
:option="jbcloption" |
||||||
|
autoresize |
||||||
|
/> |
||||||
|
</div> |
||||||
|
</datav-tab-item> |
||||||
|
<datav-tab-item label="停职处理情况" name="2"> |
||||||
|
<div class="mb-40"> |
||||||
|
<v-charts |
||||||
|
style="height: 340px" |
||||||
|
:option="tzcloption" |
||||||
|
autoresize |
||||||
|
/> |
||||||
|
</div> |
||||||
|
</datav-tab-item> |
||||||
|
</datav-tabs> |
||||||
|
</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 {getCaseVerificationMap } from "@/api/screen/CaseVerif.ts"; |
||||||
|
import {getSubOneStreetMap} from "@/api/screen/sub1.ts"; |
||||||
|
import { |
||||||
|
getSubOneAllCaseVerificationCount, |
||||||
|
getSubOneCaseProblemProperty, getSubOneCaseSourceRateAndDealSituation, |
||||||
|
getSubOneCaseVerificationRank, getSubOneCaseVerificationTrend |
||||||
|
} from "@/api/screen/subScreen/subOneCaseVerif.ts"; |
||||||
|
|
||||||
|
const currentYear = new Date().getFullYear(); |
||||||
|
const years = ref([currentYear.toString(), (currentYear - 1).toString(), (currentYear - 2).toString()]); // 年份列表 |
||||||
|
const selectedYear = ref(currentYear); // 当前选中的年份 |
||||||
|
const time = ref([ |
||||||
|
moment().startOf("year").format("YYYY-MM-DD"), |
||||||
|
moment().format("YYYY-MM-DD"), |
||||||
|
]); |
||||||
|
const route = useRoute(); |
||||||
|
const currentDepartId = route.query.departId; |
||||||
|
const chart = ref(null); // 地图 |
||||||
|
const currentMapData = ref({}) // 地图数据 |
||||||
|
const fxsjBarList = ref([]); |
||||||
|
const jsdwBarList = ref([]); |
||||||
|
const overview = ref({ |
||||||
|
total: 0, |
||||||
|
confirmed: 0, // 查实案件数 |
||||||
|
dealCasePro: 0, // 查处问题（个） |
||||||
|
punishPre: 0, // 问责人次 |
||||||
|
punishOrg: 0, // 问责单位数、 |
||||||
|
rate: 0, // 查实率 |
||||||
|
}); |
||||||
|
let gobalTempMapVoList = ref([]); |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
// region 事件||监听 |
||||||
|
const handleCommand = ( year) => { |
||||||
|
selectedYear.value = year; // 更新当前选中的年份 |
||||||
|
getProTrendList(currentDepartId,year); |
||||||
|
}; |
||||||
|
watch(time, () => { |
||||||
|
getData(); |
||||||
|
}); |
||||||
|
onMounted(() => { |
||||||
|
getData(); |
||||||
|
}); |
||||||
|
// endregion |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
// region 所有函数 |
||||||
|
const getMapJSON = async (departId) => { |
||||||
|
const res = await getSubOneStreetMap(departId); |
||||||
|
currentMapData.value = res; |
||||||
|
echarts.registerMap("changsha", res); |
||||||
|
chart.value.chart.setOption(option.value); |
||||||
|
} |
||||||
|
const getRankListData = async(departId, timeValue) => { |
||||||
|
const res = await getSubOneCaseVerificationRank(departId, timeValue); |
||||||
|
fxsjBarList.value = res.fxsjRankList |
||||||
|
jsdwBarList.value = res.jsdwRankList |
||||||
|
} |
||||||
|
|
||||||
|
const getCaseProblemPropertyList = async(departId, timeValue) => { |
||||||
|
const res = await getSubOneCaseProblemProperty(departId,timeValue); |
||||||
|
zfbaPieOption.value.series[0].data = res.zfbaPieList; |
||||||
|
fwglPieOption.value.series[0].data = res.fwglPieList; |
||||||
|
} |
||||||
|
const getOverview = async(departId, timeValue)=>{ |
||||||
|
const res = await getSubOneAllCaseVerificationCount(departId, timeValue) |
||||||
|
overview.value = res.overview |
||||||
|
} |
||||||
|
const getMapIcon = async(timeValue)=> { |
||||||
|
// const res = await getCaseVerificationMap(timeValue); |
||||||
|
// const mappedData = res.caseVerificationMapList.map(item => { |
||||||
|
// let name; |
||||||
|
// switch (item.name) { |
||||||
|
// case '长沙县局': |
||||||
|
// name = '长沙县'; |
||||||
|
// break; |
||||||
|
// case '芙蓉分局': |
||||||
|
// name = '芙蓉区'; |
||||||
|
// break; |
||||||
|
// case '天心分局': |
||||||
|
// name = '天心区'; |
||||||
|
// break; |
||||||
|
// case '岳麓分局': |
||||||
|
// name = '岳麓区'; |
||||||
|
// break; |
||||||
|
// case '开福分局': |
||||||
|
// name = '开福区'; |
||||||
|
// break; |
||||||
|
// case '雨花分局': |
||||||
|
// name = '雨花区'; |
||||||
|
// break; |
||||||
|
// case '望城分局': |
||||||
|
// name = '望城区'; |
||||||
|
// break; |
||||||
|
// case '宁乡市局': |
||||||
|
// name = '宁乡市'; |
||||||
|
// break; |
||||||
|
// case '浏阳市局': |
||||||
|
// name = '浏阳市'; |
||||||
|
// break; |
||||||
|
// case '高新分局': |
||||||
|
// name = '高新区'; |
||||||
|
// break; |
||||||
|
// default: |
||||||
|
// name = item.name; |
||||||
|
// break; |
||||||
|
// } |
||||||
|
// return { |
||||||
|
// ...item, |
||||||
|
// originalName: item.name, // 添加原始名称 |
||||||
|
// name: name, |
||||||
|
// value: item.total, |
||||||
|
// }; |
||||||
|
// }); |
||||||
|
// gobalTempMapVoList.value = mappedData |
||||||
|
// const total = mappedData.reduce((sum, item) => sum + Number(item.value), 0); |
||||||
|
// const avg = total / mappedData.length; // 计算平均值 |
||||||
|
// const range30Percent = avg*0.3 // 不用取整，小数也可以 |
||||||
|
// option.value.series[0].data = mappedData; |
||||||
|
// option.value.visualMap.pieces = [ |
||||||
|
// {gte: 0, lte: avg - range30Percent, label: "低于平均问题30%", color: "#4987F6"}, |
||||||
|
// {gte: avg - range30Percent, lte: avg + range30Percent+0.1, label: "平均问题上下浮动30%内", color: "#F6A149"}, |
||||||
|
// {gte: avg + range30Percent, label: "高于平均问题30%", color: "#D34343"}, |
||||||
|
// ]; |
||||||
|
} |
||||||
|
|
||||||
|
const getProTrendList= async(departId, year) => { |
||||||
|
const res = await getSubOneCaseVerificationTrend(departId, year); |
||||||
|
const temp = res.proTrendList; |
||||||
|
const categories = temp.map(item => item.name); |
||||||
|
const values = temp.map(item => item.value); |
||||||
|
proTrend.value.xAxis.data = categories; |
||||||
|
proTrend.value.series[0].data = values; |
||||||
|
} |
||||||
|
const getCaseSourceAndDeal = async (departId, timeValue)=>{ |
||||||
|
const res = await getSubOneCaseSourceRateAndDealSituation(departId, timeValue); |
||||||
|
ajlyPieOption.value.series[0].data = res.caseSourceRateList |
||||||
|
wzclPieOption.value.series[0].data = res.dealSituationPieList |
||||||
|
} |
||||||
|
|
||||||
|
// const getConfinementAndPauseList = async (timeValue)=>{ |
||||||
|
// const res = await getConfinementAndPause(timeValue); |
||||||
|
// jbcloption.value.series[0].data = res.jbclList; |
||||||
|
// tzcloption.value.series[0].data = res.dzclList; |
||||||
|
// } |
||||||
|
|
||||||
|
function getData() { |
||||||
|
getMapJSON(currentDepartId) |
||||||
|
getRankListData(currentDepartId,time.value) |
||||||
|
getCaseProblemPropertyList(currentDepartId,time.value) |
||||||
|
getOverview(currentDepartId,time.value) |
||||||
|
getProTrendList(currentDepartId,currentYear) |
||||||
|
getCaseSourceAndDeal(currentDepartId,time.value) |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
// endregion |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
echarts.registerMap("changsha", changshaMap); |
||||||
|
const option = ref({ |
||||||
|
geo: { |
||||||
|
// 是上面注册时的名字哦，registerMap（'名字保持一致'） |
||||||
|
map: "changsha", |
||||||
|
}, |
||||||
|
tooltip: { |
||||||
|
trigger: 'item', |
||||||
|
formatter: function (params) { |
||||||
|
console.log(params) |
||||||
|
const dataItem = gobalTempMapVoList.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.total}</span></li> |
||||||
|
<li>查实案件数 <span>${dataItem.confirmed}</span></li> |
||||||
|
<li>查处问题（个） <span>${dataItem.dealCasePro}</span></li> |
||||||
|
<li>问责人次 <span>${dataItem.punishPre}</span></li> |
||||||
|
<li>问责单位数 <span>${dataItem.punishOrg}</span></li> |
||||||
|
<li>查实率 <span>${dataItem.rate}</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>`; |
||||||
|
} |
||||||
|
}, |
||||||
|
// backgroundColor: "#031577", // |
||||||
|
// borderColor: "#0A2F86", |
||||||
|
// borderWidth: 0, // 设置边框宽度为1像素 |
||||||
|
// borderRadius: 3, // 设置边框半径为3像素 |
||||||
|
// shadowBlur: 0, // 设置阴影模糊程度为8像素 |
||||||
|
// shadowOffsetX: 0, // 设置水平阴影位移量为0像素 |
||||||
|
// shadowOffsetY: 0, // 设置垂直阴影位移量为6像素 |
||||||
|
}, |
||||||
|
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, |
||||||
|
label: { |
||||||
|
show: true, |
||||||
|
color: "white", |
||||||
|
}, |
||||||
|
itemStyle: { |
||||||
|
areaColor: "#02215E", // 这里将地图区域的颜色修改为红色 |
||||||
|
borderColor: "#24D2EE", |
||||||
|
borderWidth: 1 // 高亮时边框宽度 |
||||||
|
}, |
||||||
|
data: [], |
||||||
|
}, |
||||||
|
], |
||||||
|
}); |
||||||
|
const proTrend = ref({ |
||||||
|
grid: { |
||||||
|
left: '5%', // 图表距离容器左边的距离 |
||||||
|
right: '2%', // 图表距离容器右边的距离 |
||||||
|
top: '10%', // 图表距离容器上边的距离 |
||||||
|
bottom: '20%', // 图表距离容器下边的距离 |
||||||
|
containLabel: false // 是否包含坐标轴的标签 |
||||||
|
}, |
||||||
|
xAxis: { |
||||||
|
type: "category", |
||||||
|
boundaryGap: true, |
||||||
|
axisTick: { |
||||||
|
// 去掉X轴刻度线 |
||||||
|
show: false |
||||||
|
}, |
||||||
|
data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月'], |
||||||
|
}, |
||||||
|
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: [], |
||||||
|
}, |
||||||
|
], |
||||||
|
}); |
||||||
|
const ajlyPieOption = ref({ |
||||||
|
series: [ |
||||||
|
{ |
||||||
|
type: "pie", |
||||||
|
radius: ["40%", "70%"], |
||||||
|
label: { |
||||||
|
color: "#fff", |
||||||
|
}, |
||||||
|
data: [], |
||||||
|
}, |
||||||
|
], |
||||||
|
tooltip: { |
||||||
|
trigger: "item", |
||||||
|
}, |
||||||
|
}); |
||||||
|
const wzclPieOption = ref({ |
||||||
|
series: [ |
||||||
|
{ |
||||||
|
type: "pie", |
||||||
|
radius: ["40%", "70%"], |
||||||
|
label: { |
||||||
|
color: "#fff", |
||||||
|
}, |
||||||
|
data: [], |
||||||
|
}, |
||||||
|
], |
||||||
|
tooltip: { |
||||||
|
trigger: "item", |
||||||
|
}, |
||||||
|
}); |
||||||
|
const zfbaPieOption = ref({ |
||||||
|
series: [ |
||||||
|
{ |
||||||
|
type: "pie", |
||||||
|
radius: ["40%", "70%"], |
||||||
|
label: { |
||||||
|
color: "#fff", |
||||||
|
}, |
||||||
|
data: [], |
||||||
|
}, |
||||||
|
], |
||||||
|
tooltip: { |
||||||
|
trigger: "item", |
||||||
|
}, |
||||||
|
}); |
||||||
|
const fwglPieOption = ref({ |
||||||
|
series: [ |
||||||
|
{ |
||||||
|
type: "pie", |
||||||
|
radius: ["40%", "70%"], |
||||||
|
label: { |
||||||
|
color: "#fff", |
||||||
|
}, |
||||||
|
data: [], |
||||||
|
}, |
||||||
|
], |
||||||
|
tooltip: { |
||||||
|
trigger: "item", |
||||||
|
}, |
||||||
|
}); |
||||||
|
const jgjjPieOption = ref({ |
||||||
|
series: [ |
||||||
|
{ |
||||||
|
type: "pie", |
||||||
|
radius: ["40%", "70%"], |
||||||
|
label: { |
||||||
|
color: "#fff", |
||||||
|
}, |
||||||
|
data: [], |
||||||
|
}, |
||||||
|
], |
||||||
|
tooltip: { |
||||||
|
trigger: "item", |
||||||
|
}, |
||||||
|
}); |
||||||
|
const jbcloption = ref({ |
||||||
|
tooltip: { |
||||||
|
trigger: "item", |
||||||
|
}, |
||||||
|
series: [ |
||||||
|
{ |
||||||
|
type: "pie", |
||||||
|
radius: ["40%", "70%"], |
||||||
|
label: { |
||||||
|
color: "#fff", |
||||||
|
}, |
||||||
|
data: [ |
||||||
|
// {value: 14, name: "工作饮酒"}, |
||||||
|
// {value: 11, name: "违规办案"}, |
||||||
|
// {value: 3, name: "涉嫌违纪"}, |
||||||
|
// {value: 2, name: "违反“三个规定”"}, |
||||||
|
// {value: 12, name: "违反生活纪律、工作纪律"}, |
||||||
|
// {value: 8, name: "违规接受管理服务对象宴请"}, |
||||||
|
// {value: 2, name: "酒后驾车、涉嫌违法"}, |
||||||
|
// {value: 2, name: "执法乱作为"}, |
||||||
|
// {value: 3, name: "为落实请示报告制度"}, |
||||||
|
], |
||||||
|
}, |
||||||
|
], |
||||||
|
}); |
||||||
|
const tzcloption = ref({ |
||||||
|
tooltip: { |
||||||
|
trigger: "item", |
||||||
|
}, |
||||||
|
series: [ |
||||||
|
{ |
||||||
|
type: "pie", |
||||||
|
radius: ["40%", "70%"], |
||||||
|
label: { |
||||||
|
color: "#fff", |
||||||
|
}, |
||||||
|
data: [ |
||||||
|
// {value: 14, name: "工作饮酒"}, |
||||||
|
// {value: 11, name: "违规办案"}, |
||||||
|
// {value: 3, name: "涉嫌违纪"}, |
||||||
|
// {value: 2, name: "违反“三个规定”"}, |
||||||
|
// {value: 12, name: "违反生活纪律、工作纪律"}, |
||||||
|
// {value: 8, name: "违规接受管理服务对象宴请"}, |
||||||
|
// {value: 2, name: "酒后驾车、涉嫌违法"}, |
||||||
|
// {value: 2, name: "执法乱作为"}, |
||||||
|
// {value: 3, name: "为落实请示报告制度"}, |
||||||
|
], |
||||||
|
}, |
||||||
|
], |
||||||
|
}); |
||||||
|
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> |
||||||
|
|
||||||
|
<style lang="scss" scoped> |
||||||
|
@import "@/style/datav.scss"; |
||||||
|
|
||||||
|
: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; |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
//// 数字的span |
||||||
|
.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; /* 右边颜色，与背景颜色相同 */ |
||||||
|
//} |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
.gobal-dropdown-container { |
||||||
|
position: absolute; |
||||||
|
right: 20px; |
||||||
|
top: 15px; |
||||||
|
} |
||||||
|
.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> |
||||||
|
|
||||||
|
|
||||||
Loading…
Reference in new issue