16 changed files with 2019 additions and 1937 deletions
@ -1,34 +0,0 @@
|
||||
import request from "../request"; |
||||
|
||||
export function getSubOneStreetMap(departPId) { |
||||
return request.get({ |
||||
url: `/datav/sub1/getSubOneStreetMap?departPId=${departPId}` |
||||
}); |
||||
} |
||||
|
||||
|
||||
export function getSubOneSupervisionRank(departPId, times) { |
||||
return request.get({ |
||||
url: `/datav/sub1/getSubOneSupervisionRank?departPId=${departPId}&beginTime=${times[0]}&endTime=${times[1]}` |
||||
}); |
||||
} |
||||
|
||||
export function getSubOneOverView(departPId, times) { |
||||
return request.get({ |
||||
url: `/datav/sub1/getSubOneOverView?departPId=${departPId}&beginTime=${times[0]}&endTime=${times[1]}` |
||||
}); |
||||
} |
||||
|
||||
|
||||
export function getSubOneTrend(departPId, year) { |
||||
return request.get({ |
||||
url: `/datav/sub1/getSubOneTrend?departPId=${departPId}&year=${year}` |
||||
}); |
||||
} |
||||
|
||||
|
||||
export function getSubOneCaseVerifyRank(departPId, times) { |
||||
return request.get({ |
||||
url: `/datav/sub1/getSubOneCaseVerifyRank?departPId=${departPId}&beginTime=${times[0]}&endTime=${times[1]}` |
||||
}); |
||||
} |
||||
@ -0,0 +1,47 @@
|
||||
import request from "@/api/request"; |
||||
|
||||
|
||||
export function getSubOneStreetMap(departId) { |
||||
return request.get({ |
||||
url: `/datav/sub1/getSubOneStreetMap?departId=${departId}` |
||||
}); |
||||
} |
||||
|
||||
export function getSubOneOrganizationRank(departId, times) { |
||||
return request.get({ |
||||
url: `/datav/sub1/getSubOneOrganizationRank?departId=${departId}&beginTime=${times[0]}&endTime=${times[1]}` |
||||
}); |
||||
} |
||||
|
||||
export function getSubOneBusinessRate(departId, times) { |
||||
return request.get({ |
||||
url: `/datav/sub1/getSubOneBusinessRate?departId=${departId}&beginTime=${times[0]}&endTime=${times[1]}` |
||||
}); |
||||
} |
||||
|
||||
|
||||
export function getSubOneAllCount(departId, times) { |
||||
return request.get({ |
||||
url: `/datav/sub1/getSubOneAllCount?departId=${departId}&beginTime=${times[0]}&endTime=${times[1]}` |
||||
}); |
||||
} |
||||
|
||||
export function getSubOneGlobalTrend(departId, year) { |
||||
return request.get({ |
||||
url: `/datav/sub1/getSubOneGlobalTrend?departId=${departId}&year=${year}` |
||||
}); |
||||
} |
||||
|
||||
|
||||
export function getSubOneStrongProblemRate(departId, times) { |
||||
return request.get({ |
||||
url: `/datav/sub1/getSubOneStrongProblemRate?departId=${departId}&beginTime=${times[0]}&endTime=${times[1]}` |
||||
}); |
||||
} |
||||
|
||||
|
||||
export function getSubOneProblemBusinessRate(departId, times) { |
||||
return request.get({ |
||||
url: `/datav/sub1/getSubOneProblemBusinessRate?departId=${departId}&beginTime=${times[0]}&endTime=${times[1]}` |
||||
}); |
||||
} |
||||
@ -0,0 +1,27 @@
|
||||
import request from "@/api/request"; |
||||
|
||||
|
||||
|
||||
|
||||
export function getSubOneALlComfortCount(departId, times) { |
||||
return request.get({ |
||||
url: `/datav/sub1/rightsComfort/getSubOneALlComfortCount?departId=${departId}&beginTime=${times[0]}&endTime=${times[1]}` |
||||
}); |
||||
} |
||||
|
||||
|
||||
export function getSubOnePoliceHurtSituationAndHurtType(departId, times) { |
||||
return request.get({ |
||||
url: `/datav/sub1/rightsComfort/getSubOnePoliceHurtSituationAndHurtType?departId=${departId}&beginTime=${times[0]}&endTime=${times[1]}` |
||||
}); |
||||
} |
||||
|
||||
|
||||
|
||||
export function getSubOneCaseAriseSituationRate(departId, times) { |
||||
return request.get({ |
||||
url: `/datav/sub1/rightsComfort/getSubOneCaseAriseSituationRate?departId=${departId}&beginTime=${times[0]}&endTime=${times[1]}` |
||||
}); |
||||
} |
||||
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -1,984 +0,0 @@
|
||||
<template> |
||||
<el-scrollbar height="100vh"> |
||||
<div class="wrapper"> |
||||
<datav-header/> |
||||
<!-- <img src="/imgs/datav/sub1.png" alt="" class="relative pointer" @click="go">--> |
||||
<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"> |
||||
{{ supervisionPrecinctOverView.one }} |
||||
</div> |
||||
<div class="descriptions_label"> |
||||
问题数 |
||||
</div> |
||||
</div> |
||||
</el-col> |
||||
<el-col :span="6"> |
||||
<div class="descriptions_cell text-center"> |
||||
<div class="descriptions_content"> |
||||
{{ supervisionPrecinctOverView.two }} |
||||
</div> |
||||
<div class="descriptions_label"> |
||||
整改中 |
||||
</div> |
||||
</div> |
||||
</el-col> |
||||
<el-col :span="6"> |
||||
<div class="descriptions_cell text-center"> |
||||
<div class="descriptions_content"> |
||||
{{ supervisionPrecinctOverView.three }} |
||||
</div> |
||||
<div class="descriptions_label"> |
||||
已整改 |
||||
</div> |
||||
</div> |
||||
</el-col> |
||||
<el-col :span="6"> |
||||
<div class="descriptions_cell text-center"> |
||||
<div class="descriptions_content"> |
||||
{{ supervisionPrecinctOverView.four }} |
||||
</div> |
||||
<div class="descriptions_label"> |
||||
整改率 |
||||
</div> |
||||
</div> |
||||
</el-col> |
||||
</el-row> |
||||
<el-scrollbar height="275px"> |
||||
<datav-chart-bar |
||||
:size="small" |
||||
title="整改率排名" |
||||
sub-title="完成数/问题数" |
||||
:data="supervisionPrecinctRank" |
||||
unit="%" |
||||
labelWidth="110" |
||||
remarkFontSize="14px" |
||||
/> |
||||
</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"> |
||||
{{ supervisionTeamOverView.one }} |
||||
</div> |
||||
<div class="descriptions_label"> |
||||
问题数 |
||||
</div> |
||||
</div> |
||||
</el-col> |
||||
<el-col :span="6"> |
||||
<div class="descriptions_cell text-center"> |
||||
<div class="descriptions_content"> |
||||
{{ supervisionTeamOverView.two }} |
||||
</div> |
||||
<div class="descriptions_label"> |
||||
整改中 |
||||
</div> |
||||
</div> |
||||
</el-col> |
||||
<el-col :span="6"> |
||||
<div class="descriptions_cell text-center"> |
||||
<div class="descriptions_content"> |
||||
{{ supervisionTeamOverView.three }} |
||||
</div> |
||||
<div class="descriptions_label"> |
||||
已整改 |
||||
</div> |
||||
</div> |
||||
</el-col> |
||||
<el-col :span="6"> |
||||
<div class="descriptions_cell text-center"> |
||||
<div class="descriptions_content"> |
||||
{{ supervisionTeamOverView.four }} |
||||
</div> |
||||
<div class="descriptions_label"> |
||||
整改率 |
||||
</div> |
||||
</div> |
||||
</el-col> |
||||
</el-row> |
||||
<el-scrollbar height="275px"> |
||||
<datav-chart-bar |
||||
|
||||
:size="small" |
||||
title="整改率排名" |
||||
sub-title="完成数/问题数" |
||||
unit="%" |
||||
/> |
||||
</el-scrollbar> |
||||
</datav-tab-item> |
||||
</datav-tabs> |
||||
</datav-card> |
||||
<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"> |
||||
22 |
||||
</div> |
||||
<div class="descriptions_label"> |
||||
问题数 |
||||
</div> |
||||
</div> |
||||
</el-col> |
||||
<el-col :span="6"> |
||||
<div class="descriptions_cell text-center"> |
||||
<div class="descriptions_content"> |
||||
22 |
||||
</div> |
||||
<div class="descriptions_label"> |
||||
整改中 |
||||
</div> |
||||
</div> |
||||
</el-col> |
||||
<el-col :span="6"> |
||||
<div class="descriptions_cell text-center"> |
||||
<div class="descriptions_content"> |
||||
22 |
||||
</div> |
||||
<div class="descriptions_label"> |
||||
已整改 |
||||
</div> |
||||
</div> |
||||
</el-col> |
||||
<el-col :span="6"> |
||||
<div class="descriptions_cell text-center"> |
||||
<div class="descriptions_content"> |
||||
22% |
||||
</div> |
||||
<div class="descriptions_label"> |
||||
整改率 |
||||
</div> |
||||
</div> |
||||
</el-col> |
||||
</el-row> |
||||
<el-scrollbar height="275px"> |
||||
<datav-chart-bar |
||||
|
||||
:size="small" |
||||
title="整改率排名" |
||||
sub-title="已整改/问题数" |
||||
unit="%" |
||||
/> |
||||
</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"> |
||||
22 |
||||
</div> |
||||
<div class="descriptions_label"> |
||||
问题数 |
||||
</div> |
||||
</div> |
||||
</el-col> |
||||
<el-col :span="6"> |
||||
<div class="descriptions_cell text-center"> |
||||
<div class="descriptions_content"> |
||||
22 |
||||
</div> |
||||
<div class="descriptions_label"> |
||||
整改中 |
||||
</div> |
||||
</div> |
||||
</el-col> |
||||
<el-col :span="6"> |
||||
<div class="descriptions_cell text-center"> |
||||
<div class="descriptions_content"> |
||||
22 |
||||
</div> |
||||
<div class="descriptions_label"> |
||||
已整改 |
||||
</div> |
||||
</div> |
||||
</el-col> |
||||
<el-col :span="6"> |
||||
<div class="descriptions_cell text-center"> |
||||
<div class="descriptions_content"> |
||||
22% |
||||
</div> |
||||
<div class="descriptions_label"> |
||||
整改率 |
||||
</div> |
||||
</div> |
||||
</el-col> |
||||
</el-row> |
||||
<el-scrollbar height="275px"> |
||||
<datav-chart-bar |
||||
|
||||
:size="small" |
||||
title="整改率排名" |
||||
sub-title="已整改/问题数" |
||||
unit="%" |
||||
/> |
||||
</el-scrollbar> |
||||
</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.one" |
||||
title="问题总数" |
||||
style="width: 20%" |
||||
/> |
||||
<datav-statistic |
||||
:value="overview.two" |
||||
title="处理中" |
||||
style="width: 20%" |
||||
/> |
||||
<datav-statistic |
||||
:value="overview.three" |
||||
title="涉及单位" |
||||
style="width: 20%" |
||||
/> |
||||
<datav-statistic |
||||
:value="overview.four" |
||||
title="涉及人员" |
||||
style="width: 20%" |
||||
/> |
||||
<datav-statistic |
||||
:value="overview.five" |
||||
title="办结率" |
||||
style="width: 20%" |
||||
/> |
||||
</div> |
||||
<v-charts |
||||
style="height: 360px" |
||||
:option="option" |
||||
autoresize |
||||
ref="chart" |
||||
/> |
||||
<datav-card title="问题趋势"> |
||||
<datav-tabs v-model="activeMailTrend" @change="handleTabChange"> |
||||
<datav-tab-item label="督察问题趋势" name="1"> |
||||
<v-charts |
||||
style="width: 105%; height: 300px;" |
||||
:option="superviseProTrend" |
||||
autoresize |
||||
/> |
||||
</datav-tab-item> |
||||
<datav-tab-item label="案件核查趋势" name="2"> |
||||
<v-charts |
||||
style="width: 105%; height: 300px;" |
||||
:option="caseVerifyTrend" |
||||
autoresize |
||||
/> |
||||
</datav-tab-item> |
||||
<datav-tab-item label="警务评议趋势" name="3"> |
||||
<v-charts |
||||
style="width: 105%; height: 300px;" |
||||
:option="policeCommentTrend" |
||||
autoresize |
||||
/> |
||||
</datav-tab-item> |
||||
<datav-tab-item label="信访投诉趋势" name="4"> |
||||
<v-charts |
||||
style="width: 105%; height: 300px;" |
||||
:option="mailTrend" |
||||
autoresize |
||||
/> |
||||
</datav-tab-item> |
||||
</datav-tabs> |
||||
</datav-card> |
||||
</el-col> |
||||
|
||||
<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"> |
||||
22 |
||||
</div> |
||||
<div class="descriptions_label"> |
||||
问题数 |
||||
</div> |
||||
</div> |
||||
</el-col> |
||||
<el-col :span="6"> |
||||
<div class="descriptions_cell text-center"> |
||||
<div class="descriptions_content"> |
||||
22 |
||||
</div> |
||||
<div class="descriptions_label"> |
||||
整改中 |
||||
</div> |
||||
</div> |
||||
</el-col> |
||||
<el-col :span="6"> |
||||
<div class="descriptions_cell text-center"> |
||||
<div class="descriptions_content"> |
||||
22 |
||||
</div> |
||||
<div class="descriptions_label"> |
||||
已整改 |
||||
</div> |
||||
</div> |
||||
</el-col> |
||||
<el-col :span="6"> |
||||
<div class="descriptions_cell text-center"> |
||||
<div class="descriptions_content"> |
||||
22% |
||||
</div> |
||||
<div class="descriptions_label"> |
||||
整改率 |
||||
</div> |
||||
</div> |
||||
</el-col> |
||||
</el-row> |
||||
<el-scrollbar height="275px"> |
||||
<datav-chart-bar |
||||
|
||||
:size="small" |
||||
title="整改率排名" |
||||
sub-title="已整改/问题数" |
||||
unit="%" |
||||
/> |
||||
</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"> |
||||
22 |
||||
</div> |
||||
<div class="descriptions_label"> |
||||
问题数 |
||||
</div> |
||||
</div> |
||||
</el-col> |
||||
<el-col :span="6"> |
||||
<div class="descriptions_cell text-center"> |
||||
<div class="descriptions_content"> |
||||
22 |
||||
</div> |
||||
<div class="descriptions_label"> |
||||
整改中 |
||||
</div> |
||||
</div> |
||||
</el-col> |
||||
<el-col :span="6"> |
||||
<div class="descriptions_cell text-center"> |
||||
<div class="descriptions_content"> |
||||
22 |
||||
</div> |
||||
<div class="descriptions_label"> |
||||
已整改 |
||||
</div> |
||||
</div> |
||||
</el-col> |
||||
<el-col :span="6"> |
||||
<div class="descriptions_cell text-center"> |
||||
<div class="descriptions_content"> |
||||
22% |
||||
</div> |
||||
<div class="descriptions_label"> |
||||
整改率 |
||||
</div> |
||||
</div> |
||||
</el-col> |
||||
</el-row> |
||||
<el-scrollbar height="275px"> |
||||
<datav-chart-bar |
||||
|
||||
:size="small" |
||||
title="整改率排名" |
||||
sub-title="已整改/问题数" |
||||
unit="%" |
||||
/> |
||||
</el-scrollbar> |
||||
</datav-tab-item> |
||||
</datav-tabs> |
||||
</datav-card> |
||||
<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="8"> |
||||
<div class="descriptions_cell text-center"> |
||||
<div class="descriptions_content"> |
||||
{{ caseVerifyPrecinctOverView.one }} |
||||
</div> |
||||
<div class="descriptions_label"> |
||||
案件数 |
||||
</div> |
||||
</div> |
||||
</el-col> |
||||
<el-col :span="8"> |
||||
<div class="descriptions_cell text-center"> |
||||
<div class="descriptions_content"> |
||||
{{ caseVerifyPrecinctOverView.two }} |
||||
</div> |
||||
<div class="descriptions_label"> |
||||
查实数 |
||||
</div> |
||||
</div> |
||||
</el-col> |
||||
<el-col :span="8"> |
||||
<div class="descriptions_cell text-center"> |
||||
<div class="descriptions_content"> |
||||
{{ caseVerifyPrecinctOverView.three }} |
||||
</div> |
||||
<div class="descriptions_label"> |
||||
查实率 |
||||
</div> |
||||
</div> |
||||
</el-col> |
||||
</el-row> |
||||
<el-scrollbar height="275px"> |
||||
<datav-chart-bar |
||||
:size="small" |
||||
:data="caseVerifyPrecinctRank" |
||||
:labelWidth="110" |
||||
title="整改率排名" |
||||
sub-title="问题数/查实数" |
||||
:show-value="false" |
||||
/> |
||||
</el-scrollbar> |
||||
</datav-tab-item> |
||||
<datav-tab-item label="大队" name="2"> |
||||
<el-row class="mb-32"> |
||||
<el-col :span="8"> |
||||
<div class="descriptions_cell text-center"> |
||||
<div class="descriptions_content"> |
||||
{{ caseVerifyTeamOverView.one }} |
||||
</div> |
||||
<div class="descriptions_label"> |
||||
案件数 |
||||
</div> |
||||
</div> |
||||
</el-col> |
||||
<el-col :span="8"> |
||||
<div class="descriptions_cell text-center"> |
||||
<div class="descriptions_content"> |
||||
{{ caseVerifyTeamOverView.two }} |
||||
</div> |
||||
<div class="descriptions_label"> |
||||
查实数 |
||||
</div> |
||||
</div> |
||||
</el-col> |
||||
<el-col :span="8"> |
||||
<div class="descriptions_cell text-center"> |
||||
<div class="descriptions_content"> |
||||
{{ caseVerifyTeamOverView.three }} |
||||
</div> |
||||
<div class="descriptions_label"> |
||||
查实率 |
||||
</div> |
||||
</div> |
||||
</el-col> |
||||
</el-row> |
||||
<el-scrollbar height="275px"> |
||||
<datav-chart-bar |
||||
:size="small" |
||||
:data="caseVerifyTeamRank" |
||||
title="整改率排名" |
||||
sub-title="问题数/查实数" |
||||
/> |
||||
</el-scrollbar> |
||||
</datav-tab-item> |
||||
</datav-tabs> |
||||
</datav-card> |
||||
</el-col> |
||||
</el-row> |
||||
</main> |
||||
</div> |
||||
</el-scrollbar> |
||||
</template> |
||||
|
||||
<script setup> |
||||
import vCharts from "vue-echarts"; |
||||
import moment from "moment"; |
||||
import * as echarts from "echarts/core"; |
||||
import { |
||||
getSubOneCaseVerifyRank, getSubOneOverView, |
||||
getSubOneStreetMap, |
||||
getSubOneSupervisionRank, |
||||
getSubOneTrend |
||||
} from "@/api/screen/sub1.ts"; |
||||
import changshaMap from "@/assets/data/changsha.json"; |
||||
|
||||
|
||||
const router = useRouter() |
||||
const route = useRoute(); |
||||
const currentDepartId = route.query.departId; |
||||
const time = ref([ |
||||
moment().startOf("year").format("YYYY-MM-DD"), |
||||
moment().format("YYYY-MM-DD"), |
||||
]); // 时间范围 |
||||
const currentMapData = ref({}) |
||||
const chart = ref(null); // 地图 |
||||
const currentYear = new Date().getFullYear(); // 当前年份 |
||||
const superviseProTrend = 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: [], |
||||
}, |
||||
], |
||||
}); // 督察问题 |
||||
const caseVerifyTrend = 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: [], |
||||
}, |
||||
], |
||||
}); // 案件核查 |
||||
const policeCommentTrend = 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: [], |
||||
}, |
||||
], |
||||
}); // 警务评议 |
||||
const mailTrend = 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: [], |
||||
}, |
||||
], |
||||
}); // 信访投诉趋势 |
||||
|
||||
echarts.registerMap("changsha", changshaMap); |
||||
const option = ref({ |
||||
tooltip: { |
||||
trigger: 'item', |
||||
}, |
||||
visualMap: { |
||||
type: "piecewise", |
||||
bottom: 10, |
||||
pieces: [ |
||||
{min: 0, max: 500, label: "问题数低于500", color: "#4987F6"}, |
||||
{min: 501, max: 1000, label: "问题数介于500-1000", color: "#F6A149"}, |
||||
{min: 1001, label: "问题数高于1000", color: "#D34343"}, |
||||
], |
||||
right: 10, |
||||
realtime: false, |
||||
orient: "horizontal", |
||||
textStyle: { |
||||
color: "#fff", |
||||
}, |
||||
calculable: true, |
||||
}, |
||||
series: [ |
||||
{ |
||||
type: "map", |
||||
map: "changsha", |
||||
hoverAnimation: true, |
||||
roam:true, |
||||
label: { |
||||
show: true, |
||||
color: "white", |
||||
}, |
||||
itemStyle: { |
||||
normal: { |
||||
areaColor: "#02215E", |
||||
borderColor: "#1773c3", |
||||
}, |
||||
}, |
||||
emphasis: { |
||||
areaColor: "#FFD700", // 高亮时区域颜色 |
||||
borderColor: "#FF0000", // 高亮时边框颜色 |
||||
borderWidth: 4 // 高亮时边框宽度 |
||||
}, |
||||
data: [] |
||||
} |
||||
], |
||||
}) |
||||
const option1 = ref({ |
||||
xAxis: { |
||||
type: "category", |
||||
boundaryGap: false, |
||||
data: [], |
||||
}, |
||||
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 caseVerifyPrecinctOverView = ref({}) |
||||
const caseVerifyTeamOverView = ref({}) |
||||
const caseVerifyPrecinctRank = ref([]) |
||||
const caseVerifyTeamRank = ref([]) |
||||
|
||||
|
||||
const supervisionPrecinctOverView = ref({}) |
||||
const supervisionTeamOverView = ref({}) |
||||
const supervisionPrecinctRank = ref([]) |
||||
const supervisionTeamRank = ref([]) |
||||
const overview = ref({ |
||||
one: 0, |
||||
two: 0, |
||||
three: 0, |
||||
four: 0, |
||||
five: 0, |
||||
}) |
||||
|
||||
|
||||
const getMapJSON = async (departId) => { |
||||
const res = await getSubOneStreetMap(departId); |
||||
currentMapData.value = res; |
||||
echarts.registerMap("changsha", res); |
||||
chart.value.chart.setOption(option.value); |
||||
} |
||||
const getTrendData = async (currentDepartId, currentYear) => { |
||||
const res = await getSubOneTrend(currentDepartId, currentYear); |
||||
const superviseProTrendList = res.superviseProTrend; |
||||
const caseVerifyTrendList = res.caseVerifyTrend; |
||||
const policeCommentTrendList = res.policeCommentTrend; |
||||
const mailTrendList = res.mailTrend; |
||||
const superviseCategories = superviseProTrendList.map(item => item.name); |
||||
const superviseValues = superviseProTrendList.map(item => item.value); |
||||
const caseVerifyCategories = caseVerifyTrendList.map(item => item.name); |
||||
const caseVerifyValues = caseVerifyTrendList.map(item => item.value); |
||||
const policeCommentCategories = policeCommentTrendList.map(item => item.name); |
||||
const policeCommentValues = policeCommentTrendList.map(item => item.value); |
||||
const mailCategories = mailTrendList.map(item => item.name); |
||||
const mailValues = mailTrendList.map(item => item.value); |
||||
|
||||
|
||||
// 更新图表数据 |
||||
superviseProTrend.value.xAxis.data = superviseCategories; |
||||
superviseProTrend.value.series[0].data = superviseValues; |
||||
caseVerifyTrend.value.xAxis.data = caseVerifyCategories; |
||||
caseVerifyTrend.value.series[0].data = caseVerifyValues; |
||||
policeCommentTrend.value.xAxis.data = policeCommentCategories; |
||||
policeCommentTrend.value.series[0].data = policeCommentValues; |
||||
mailTrend.value.xAxis.data = mailCategories; |
||||
mailTrend.value.series[0].data = mailValues; |
||||
} |
||||
|
||||
const getSubOneCaseVerifyRankList = async (currentDepartId, times) => { |
||||
const res = await getSubOneCaseVerifyRank(currentDepartId, times); |
||||
// console.log(res) |
||||
caseVerifyPrecinctRank.value = res.caseVerifyPrecinctList; |
||||
caseVerifyTeamRank.value = res.caseVerifyTeamList; |
||||
caseVerifyPrecinctOverView.value = res.caseVerifyPrecinctOverView; |
||||
caseVerifyTeamOverView.value = res.caseVerifyTeamOverView; |
||||
} |
||||
|
||||
const getSubOneSupervisionRankList = async (currentDepartId, times) => { |
||||
const res = await getSubOneSupervisionRank(currentDepartId, times); |
||||
// console.log(res) |
||||
supervisionPrecinctRank.value = res.supervisionPrecinctList; |
||||
supervisionTeamRank.value = res.supervisionTeamList; |
||||
supervisionPrecinctOverView.value = res.supervisionPrecinctOverView; |
||||
supervisionTeamOverView.value = res.supervisionTeamOverView; |
||||
// console.log(supervisionPrecinctOverView.value) |
||||
} |
||||
const getSubOneOverViewData = async (currentDepartId, times) => { |
||||
const res = await getSubOneOverView(currentDepartId, times); |
||||
overview.value = res.subOneOverViewVo; |
||||
// console.log(overview.value) |
||||
} |
||||
|
||||
onMounted(() => { |
||||
getMapJSON(currentDepartId); |
||||
getSubOneSupervisionRankList(currentDepartId, time.value); |
||||
getSubOneOverViewData(currentDepartId, time.value); |
||||
getTrendData(currentDepartId, currentYear); |
||||
getSubOneCaseVerifyRankList(currentDepartId, time.value); |
||||
}) |
||||
|
||||
function go() { |
||||
router.push('/datav/sub2') |
||||
} |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
@import "@/style/datav.scss"; |
||||
</style> |
||||
@ -0,0 +1,602 @@
|
||||
<template> |
||||
<el-scrollbar height="100vh"> |
||||
<div class="wrapper"> |
||||
<datav-header/> |
||||
<main> |
||||
<el-row :gutter="16"> |
||||
<el-col :span="6"> |
||||
<datav-card title="机构问题排名" sub-title="问题数"> |
||||
<datav-tabs |
||||
v-model="activeOrgTab" |
||||
type="bottom-button" |
||||
> |
||||
<datav-tab-item label="分县市局" name="1"> |
||||
<el-scrollbar height="340px"> |
||||
<datav-chart-bar |
||||
:data="fxsjlist" |
||||
size="large" |
||||
:max="11" |
||||
:color="colors" |
||||
/> |
||||
</el-scrollbar> |
||||
</datav-tab-item> |
||||
<datav-tab-item label="局属单位" name="2"> |
||||
<el-scrollbar height="340px"> |
||||
<datav-chart-bar |
||||
:data="jsdwlist" |
||||
:max="11" |
||||
size="large" |
||||
:color="colors" |
||||
/> |
||||
</el-scrollbar> |
||||
</datav-tab-item> |
||||
</datav-tabs> |
||||
</datav-card> |
||||
<datav-card title="业务类型占比"> |
||||
<v-charts |
||||
style="height: 360px;" |
||||
:option="zfbaPieOption" |
||||
autoresize |
||||
/> |
||||
</datav-card> |
||||
</el-col> |
||||
|
||||
<el-col :span="12"> |
||||
<datav-date-picker v-model="time"/> |
||||
<div class="flex gap-42"> |
||||
<datav-statistic |
||||
:value="overview.totalPro" |
||||
title="问题总数" |
||||
style="width: 13.66%; margin-left: 20px" |
||||
/> |
||||
<datav-statistic |
||||
:value="overview.supervisionPro" |
||||
title="督察问题" |
||||
style="width: 13.66%; margin-left: 30px" |
||||
/> |
||||
<datav-statistic |
||||
:value="overview.caseVerificationPro" |
||||
title="案件核查问题" |
||||
style="width: 13.66%; margin-left: 30px" |
||||
/> |
||||
<datav-statistic |
||||
:value="overview.complaintPro" |
||||
title="信访投诉问题" |
||||
style="width: 13.66%; margin-left: 30px" |
||||
/> |
||||
<datav-statistic |
||||
:value="overview.talkPro" |
||||
title="民意感知问题" |
||||
style="width: 13.66%; margin-left: 30px" |
||||
/> |
||||
<datav-statistic |
||||
:value="overview.auditPro" |
||||
title="审计监督问题" |
||||
style="width: 13.66%; margin-left: 10px" |
||||
/> |
||||
</div> |
||||
<v-charts |
||||
style="height: 360px" |
||||
:option="option" |
||||
autoresize |
||||
ref="chart" |
||||
/> |
||||
|
||||
<div> |
||||
<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> |
||||
</div> |
||||
</el-col> |
||||
|
||||
<el-col :span="6"> |
||||
<datav-card title="突出问题排名" sub-title="问题数"> |
||||
<el-scrollbar height="390px"> |
||||
<datav-chart-bar-pro |
||||
:data="tcwtlist" |
||||
size="small" |
||||
:color="colors" |
||||
/> |
||||
</el-scrollbar> |
||||
</datav-card> |
||||
|
||||
<datav-card title="问题类型占比"> |
||||
<v-charts |
||||
style="height: 370px;" |
||||
:option="wtlxPieOption" |
||||
autoresize |
||||
/> |
||||
</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/moment"; |
||||
import { |
||||
getGlobalRecentlyTrendByMonth, |
||||
} from "@/api/data/basicScreen.ts"; |
||||
import {getSubOneStreetMap} from "@/api/screen/subScreen/subOneGlobal.ts"; |
||||
import { |
||||
getSubOneAllCount, |
||||
getSubOneBusinessRate, |
||||
getSubOneOrganizationRank, getSubOneProblemBusinessRate, getSubOneStrongProblemRate,getSubOneGlobalTrend |
||||
} from "@/api/screen/subScreen/subOneGlobal.ts"; |
||||
|
||||
// region 各种变量 |
||||
const router = useRouter(); |
||||
const route = useRoute(); |
||||
const currentMapData = ref({}) |
||||
const chart = ref(null); // 地图 |
||||
const currentDepartId = route.query.departId; |
||||
const activeOrgTab = ref("1"); |
||||
const fxsjlist = ref([]); // 分县市区机构问题排名 |
||||
const jsdwlist = ref([]); // 局属单位机构问题排名 |
||||
const ywzblist = ref([]); // 业务类型占比 |
||||
const wtlxlist = ref([]); // 问题类型占比 |
||||
const tcwtlist = ref([]); // 突出问题排名 |
||||
const overview = ref({ |
||||
totalPro: 0, |
||||
supervisionPro: 0, |
||||
caseVerificationPro: 0, |
||||
complaintPro: 0, |
||||
talkPro: 0, |
||||
auditPro: 0, |
||||
}); // 中央的概况数据 |
||||
const time = ref([ |
||||
moment().startOf("year").format("YYYY-MM-DD"), |
||||
moment().format("YYYY-MM-DD"), |
||||
]); // 时间范围 |
||||
const globalTempMapVoList = ref([ |
||||
{ |
||||
"name": "天心分局", |
||||
"totalPro": 11, |
||||
"supervisePro": 11, |
||||
"caseVerifyPro": 11, |
||||
"mailPro": 11, |
||||
"policePro": 11, |
||||
"reviewPro": 11, |
||||
"value": 200 |
||||
} |
||||
]); // 地图临时数据 |
||||
|
||||
const currentYear = new Date().getFullYear(); |
||||
const years = ref([currentYear.toString(), (currentYear - 1).toString(), (currentYear - 2).toString()]); // 年份列表 |
||||
const selectedYear = ref('2024'); // 当前选中的年份 |
||||
// endregion |
||||
|
||||
|
||||
// region 图表变量 |
||||
// 业务类型占比 |
||||
const zfbaPieOption = computed(() => { |
||||
return { |
||||
tooltip: { |
||||
trigger: "item", |
||||
}, |
||||
series: [ |
||||
{ |
||||
type: "pie", |
||||
radius: ["40%", "70%"], |
||||
label: { |
||||
color: "#fff", |
||||
}, |
||||
data: ywzblist.value, |
||||
}, |
||||
], |
||||
}; |
||||
}); |
||||
// 问题类型占比 |
||||
const wtlxPieOption = computed(() => { |
||||
return { |
||||
tooltip: { |
||||
trigger: "item", |
||||
}, |
||||
series: [ |
||||
{ |
||||
type: "pie", |
||||
radius: ["40%", "70%"], |
||||
label: { |
||||
color: "#fff", |
||||
}, |
||||
data: wtlxlist.value, |
||||
|
||||
}, |
||||
], |
||||
}; |
||||
}); |
||||
// 地图 |
||||
echarts.registerMap("changsha", changshaMap); |
||||
const option = ref({ |
||||
geo: { |
||||
map: "changsha", |
||||
itemStyle: { |
||||
normal: { |
||||
opacity: 0 // 设置透明度 |
||||
}, |
||||
} |
||||
}, |
||||
tooltip: { |
||||
trigger: 'item', |
||||
formatter: function (params) { |
||||
// console.log(params); |
||||
const dataItem = globalTempMapVoList.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.supervisePro}</span></li> |
||||
<li>案件核查问题 <span>${dataItem.caseVerifyPro}</span></li> |
||||
<li>信访投诉问题 <span>${dataItem.mailPro}</span></li> |
||||
<li>民意感知问题 <span>${dataItem.policePro}</span></li> |
||||
<li>审计督察问题 <span>${dataItem.reviewPro}</span></li> |
||||
</ul> |
||||
</div> |
||||
</div>`; |
||||
} else { |
||||
return ` |
||||
<div class="tooltip"> |
||||
<div class="tooltip-title">${dataItem.originalName}</div> |
||||
<div class="tooltip-content"> |
||||
<ul class="tooltip-ul""> |
||||
<li>问题总数 <span>0000</span></li> |
||||
<li>督察问题 <span>0000</span></li> |
||||
<li>案件核查问题 <span>0000</span></li> |
||||
<li>信访投诉问题 <span>0000</span></li> |
||||
<li>民意感知问题 <span>0000</span></li> |
||||
<li>审计督察问题 <span>0000</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, |
||||
roam: true, |
||||
label: { |
||||
show: true, |
||||
color: "white", |
||||
}, |
||||
itemStyle: { |
||||
normal: { |
||||
areaColor: "#02215E", |
||||
borderColor: "#24D2EE", |
||||
borderWidth: 1, // 高亮时边框宽度 |
||||
opacity: 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 |
||||
|
||||
// region 所有函数 |
||||
|
||||
const getMapJSON = async (departId) => { |
||||
const res = await getSubOneStreetMap(departId); |
||||
currentMapData.value = res; |
||||
echarts.registerMap("changsha", res); |
||||
chart.value.chart.setOption(option.value); |
||||
} |
||||
const getOrganizationProRankData = async (departId, timeValue = time.value) => { |
||||
const res = await getSubOneOrganizationRank(departId, timeValue); |
||||
fxsjlist.value = res.fxsjlist; |
||||
jsdwlist.value = res.jsdwlist; |
||||
} |
||||
|
||||
const getBusinessRateData = async (departId, timeValue = time.value) => { |
||||
const res = await getSubOneBusinessRate(departId, timeValue); |
||||
ywzblist.value = res.ywzblist; |
||||
} |
||||
const getAllGlobalCountData = async (departId, timeValue = time.value) => { |
||||
const res = await getSubOneAllCount(departId, timeValue); |
||||
overview.value = res.overview; |
||||
} |
||||
|
||||
const getSubOneGlobalTrendData =async (departId, year)=>{ |
||||
const res = await getSubOneGlobalTrend(departId, year); |
||||
const categories = res.globalRecentlyTrendList.map(item => item.name); |
||||
const values = res.globalRecentlyTrendList.map(item => item.value); |
||||
// 更新图表数据 |
||||
proTrend.value.xAxis.data = categories; |
||||
proTrend.value.series[0].data = values; |
||||
} |
||||
const getSubOneStrongProblemRateData = async (departId, timeValue = time.value) => { |
||||
const res = await getSubOneStrongProblemRate(departId, timeValue); |
||||
tcwtlist.value = res.tcwtlist; |
||||
} |
||||
|
||||
const getSubOneProblemBusinessRateData = async (departId, timeValue = time.value) => { |
||||
const res = await getSubOneProblemBusinessRate(departId,timeValue); |
||||
wtlxlist.value = res.wtlxlist; |
||||
} |
||||
|
||||
|
||||
// endregion |
||||
|
||||
// region 初始化数据 |
||||
|
||||
onMounted(() => { |
||||
getOrganizationProRankData(currentDepartId, time.value); |
||||
getBusinessRateData(currentDepartId, time.value); |
||||
getAllGlobalCountData(currentDepartId, time.value); |
||||
getSubOneGlobalTrendData(currentDepartId, selectedYear.value); |
||||
getSubOneStrongProblemRateData(currentDepartId, time.value); |
||||
getSubOneProblemBusinessRateData(currentDepartId, time.value); |
||||
getMapJSON(currentDepartId); |
||||
}); |
||||
// endregion |
||||
|
||||
// region 事件||监听 |
||||
const handleCommand = (year) => { |
||||
selectedYear.value = year; // 更新当前选中的年份 |
||||
getGlobalRecentlyTrendByMonth(year).then(res => { |
||||
const globalRecentlyTrendList = res.globalRecentlyTrendList; |
||||
const categories = globalRecentlyTrendList.map(item => item.name); |
||||
const values = globalRecentlyTrendList.map(item => item.value); |
||||
// 更新图表数据 |
||||
proTrend.value.xAxis.data = categories; |
||||
proTrend.value.series[0].data = values; |
||||
}); |
||||
}; |
||||
watch(time, () => { |
||||
getData(); |
||||
}); |
||||
|
||||
const handleClick = (params) => { |
||||
const departId = params.data.departId; |
||||
const url = router.resolve({ |
||||
path: "/datav/sub1", |
||||
query: {departId: departId}, |
||||
}).href; |
||||
window.open(url, "_blank"); |
||||
} |
||||
|
||||
// endregion |
||||
|
||||
|
||||
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; /* 右边颜色，与背景颜色相同 */ |
||||
//} |
||||
|
||||
} |
||||
|
||||
.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> |
||||
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
Loading…
Reference in new issue