From 31a101558f593f22abd295006b76ee0b1e569b6e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=B8=8D=E7=88=B1=E5=AD=A6=E4=B9=A0=E7=9A=84=E7=9F=B3?= =?UTF-8?q?=E5=90=8C=E5=AD=A6?= <2936013465@qq.com> Date: Fri, 13 Dec 2024 18:01:39 +0800 Subject: [PATCH] =?UTF-8?q?=E5=9C=B0=E5=9B=BE=E5=8A=A0=E7=BC=93=E5=AD=98?= =?UTF-8?q?=E3=80=81=E4=BA=8C=E7=BA=A7=E5=AD=90=E5=B1=8F=E6=A1=88=E4=BB=B6?= =?UTF-8?q?=E6=A0=B8=E6=9F=A5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/api/data/basicScreen.ts | 20 +- src/api/screen/sub1.ts | 21 +- src/views/datav/Gobal.vue | 71 ++--- src/views/datav/SceneInsp.vue | 2 - src/views/datav/Sub1.vue | 478 +++++++++++++++++++++++++--------- 5 files changed, 422 insertions(+), 170 deletions(-) diff --git a/src/api/data/basicScreen.ts b/src/api/data/basicScreen.ts index 4a30e4a..c1452f0 100644 --- a/src/api/data/basicScreen.ts +++ b/src/api/data/basicScreen.ts @@ -9,9 +9,9 @@ import request from "@/api/request"; /* * 获取信息大屏统计数据 */ -export function getAllGobalCount(times) { +export function getAllGlobalCount(times) { return request.get({ - url: `/datav/dataGobalScreen?beginTime=${times[0]}&endTime=${times[1]}` + url: `/datav/dataGlobalScreen?beginTime=${times[0]}&endTime=${times[1]}` }); } @@ -19,9 +19,9 @@ export function getAllGobalCount(times) { /** * 获取问题趋势数据 */ -export function getGobalRecentlyTrendByMonth(year) { +export function getGlobalRecentlyTrendByMonth(year) { return request.get({ - url: `/datav/dataGobalScreen/getGobalRecentlyTrendByMonth?year=${year}` + url: `/datav/dataGlobalScreen/getGlobalRecentlyTrendByMonth?year=${year}` }); } @@ -32,7 +32,7 @@ export function getGobalRecentlyTrendByMonth(year) { */ export function getOrganizationRank(times) { return request.get({ - url: `/datav/dataGobalScreen/getOrganizationRank?beginTime=${times[0]}&endTime=${times[1]}` + url: `/datav/dataGlobalScreen/getOrganizationRank?beginTime=${times[0]}&endTime=${times[1]}` }); } @@ -43,7 +43,7 @@ export function getOrganizationRank(times) { */ export function getBusinessRate(times) { return request.get({ - url: `/datav/dataGobalScreen/getBusinessRate?beginTime=${times[0]}&endTime=${times[1]}` + url: `/datav/dataGlobalScreen/getBusinessRate?beginTime=${times[0]}&endTime=${times[1]}` }); } @@ -54,7 +54,7 @@ export function getBusinessRate(times) { */ export function getStrongProblemRate(times) { return request.get({ - url: `/datav/dataGobalScreen/getStrongProblemRate?beginTime=${times[0]}&endTime=${times[1]}` + url: `/datav/dataGlobalScreen/getStrongProblemRate?beginTime=${times[0]}&endTime=${times[1]}` }); } @@ -65,7 +65,7 @@ export function getStrongProblemRate(times) { */ export function getProblemBusinessRate(times) { return request.get({ - url: `/datav/dataGobalScreen/getProblemBusinessRate?beginTime=${times[0]}&endTime=${times[1]}` + url: `/datav/dataGlobalScreen/getProblemBusinessRate?beginTime=${times[0]}&endTime=${times[1]}` }); } @@ -74,9 +74,9 @@ export function getProblemBusinessRate(times) { * 地图数据 */ -export function getGobalMap(times) { +export function getGlobalMap(times) { return request.get({ - url: `/datav/dataGobalScreen/getMap?beginTime=${times[0]}&endTime=${times[1]}` + url: `/datav/dataGlobalScreen/getMap?beginTime=${times[0]}&endTime=${times[1]}` }); } diff --git a/src/api/screen/sub1.ts b/src/api/screen/sub1.ts index 0a32ee1..73ea95f 100644 --- a/src/api/screen/sub1.ts +++ b/src/api/screen/sub1.ts @@ -1,7 +1,22 @@ import request from "../request"; -export function test(departId) { +export function getSubOneStreetMap(departPId) { return request.get({ - url: `/datav/sub1/test?departId=${departId}` + url: `/datav/sub1/getSubOneStreetMap?departPId=${departPId}` }); -} \ No newline at end of file +} + + + +export function getSubOneTrend(departPId, year) { + return request.get({ + url: `/datav/sub1/getSubOneTrend?departPId=${departPId}&year=${year}` + }); +} + + +export function getCaseVerifyRank(departPId, times) { + return request.get({ + url: `/datav/sub1/getCaseVerifyRank?departPId=${departPId}&beginTime=${times[0]}&endTime=${times[1]}` + }); +} diff --git a/src/views/datav/Gobal.vue b/src/views/datav/Gobal.vue index bfa3f17..bbddb3b 100644 --- a/src/views/datav/Gobal.vue +++ b/src/views/datav/Gobal.vue @@ -139,10 +139,13 @@ import changshaMap from "@/assets/data/changsha.json"; import * as echarts from "echarts/core"; import moment from "moment/moment"; import { - getAllGobalCount, getBusinessRate, - getGobalRecentlyTrendByMonth, - getOrganizationRank, getProblemBusinessRate, getStrongProblemRate, getGobalMap + getGlobalRecentlyTrendByMonth, + getOrganizationRank, + getProblemBusinessRate, + getStrongProblemRate, + getGlobalMap, + getAllGlobalCount } from "@/api/data/basicScreen.ts"; // region 各种变量 @@ -166,7 +169,7 @@ const time = ref([ moment().startOf("year").format("YYYY-MM-DD"), moment().format("YYYY-MM-DD"), ]); // 时间范围 -const gobalTempMapVoList = ref([ +const globalTempMapVoList = ref([ { "name": "天心分局", "totalPro": 11, @@ -237,7 +240,7 @@ const option = ref({ trigger: 'item', formatter: function (params) { // console.log(params); - const dataItem = gobalTempMapVoList.value.find(item => item.name.includes(params.name.substring(0, 2))); + const dataItem = globalTempMapVoList.value.find(item => item.name.includes(params.name.substring(0, 2))); if (dataItem) { return `
@@ -391,23 +394,25 @@ const proTrend = ref({ // endregion // region 所有函数 -const getOrganizationRankData = async (timeValue=time.value)=>{ +const getOrganizationRankData = async (timeValue = time.value) => { const res = await getOrganizationRank(timeValue); fxsjlist.value = res.fxsjlist; jsdwlist.value = res.jsdwlist; } -const getBusinessRateData=async (timeValue=time.value)=>{ - const res=await getBusinessRate(timeValue); +const getBusinessRateData = async (timeValue = time.value) => { + const res = await getBusinessRate(timeValue); ywzblist.value = res.ywzblist; } -const getAllGobalCountData = async(timeValue=time.value)=>{ +const getAllGlobalCountData = async (timeValue = time.value) => { + const res = await getAllGlobalCount(timeValue); overview.value = res.overview; } -const getGobalRecentlyTrendByMonthData=async(timeValue=time.value)=>{ - const gobalRecentlyTrendList = res.gobalRecentlyTrendList; - const categories = gobalRecentlyTrendList.map(item => item.name); - const values = gobalRecentlyTrendList.map(item => item.value); +const getGlobalRecentlyTrendByMonthData = async (timeValue = time.value) => { + const res = await getGlobalRecentlyTrendByMonth(timeValue); + 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; @@ -425,13 +430,13 @@ function getData() { getBusinessRate(time.value).then((res) => { ywzblist.value = res.ywzblist; }); - getAllGobalCount(time.value).then((res) => { + getAllGlobalCount(time.value).then((res) => { overview.value = res.overview; }); - getGobalRecentlyTrendByMonth(new Date().getFullYear()).then((res) => { - const gobalRecentlyTrendList = res.gobalRecentlyTrendList; - const categories = gobalRecentlyTrendList.map(item => item.name); - const values = gobalRecentlyTrendList.map(item => item.value); + getGlobalRecentlyTrendByMonth(new Date().getFullYear()).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; @@ -442,9 +447,9 @@ function getData() { getProblemBusinessRate(time.value).then((res) => { wtlxlist.value = res.wtlxlist; }); - getGobalMap(time.value).then(res => { + getGlobalMap(time.value).then(res => { // 对返回的数据映射处理 - const mappedData = res.gobalTempMapVoList.map(item => { + const mappedData = res.globalTempMapVoList.map(item => { let name; switch (item.name) { case '长沙县局': @@ -491,8 +496,8 @@ function getData() { const total = mappedData.reduce((sum, item) => sum + Number(item.value), 0); const avg = total / mappedData.length; // 计算平均值 const range30Percent = avg * 0.3 // 不用取整，小数也可以 - gobalTempMapVoList.value = mappedData; - option.value.series[0].data = gobalTempMapVoList; + globalTempMapVoList.value = mappedData; + option.value.series[0].data = globalTempMapVoList; 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"}, @@ -509,10 +514,10 @@ onMounted(() => { // region 事件||监听 const handleCommand = (year) => { selectedYear.value = year; // 更新当前选中的年份 - getGobalRecentlyTrendByMonth(year).then(res => { - const gobalRecentlyTrendList = res.gobalRecentlyTrendList; - const categories = gobalRecentlyTrendList.map(item => item.name); - const values = gobalRecentlyTrendList.map(item => item.value); + 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; @@ -523,15 +528,15 @@ watch(time, () => { }); const handleClick = (params) => { - // const departId = params.data.departId; - // const { name } = params.data; + const departId = params.data.departId; + const {name} = params.data; // alert("部门id："+departId); // alert("部门名字："+name); - // const url = router.resolve({ - // path: "/datav/sub1", - // query: { departId: departId }, - // }).href; - // window.open(url, "_blank"); + const url = router.resolve({ + path: "/datav/sub1", + query: {departId: departId}, + }).href; + window.open(url, "_blank"); } // endregion diff --git a/src/views/datav/SceneInsp.vue b/src/views/datav/SceneInsp.vue index 91ce826..36b55da 100644 --- a/src/views/datav/SceneInsp.vue +++ b/src/views/datav/SceneInsp.vue @@ -792,8 +792,6 @@ import { getMap, getProblemTypeRate, getSupervisionTrend, getYellowBetDrug } from "@/api/data/supervisionNotify.ts"; -import {getGobalRecentlyTrendByMonth} from "@/api/data/basicScreen.ts"; -import Message from "@/components/datav/message.vue"; // region 所有变量 const activeTabRight = ref("1") diff --git a/src/views/datav/Sub1.vue b/src/views/datav/Sub1.vue index 3df51ca..59eb507 100644 --- a/src/views/datav/Sub1.vue +++ b/src/views/datav/Sub1.vue @@ -267,34 +267,35 @@ style="height: 360px" :option="option" autoresize + ref="chart" /> @@ -423,107 +424,85 @@ > - -
-
- 22 -
-
- 问题数 -
-
- - +
- 22 + {{ caseVerifyPrecinctOverView.one }}
- 整改中 + 案件数
- +
- 22 + {{ caseVerifyPrecinctOverView.two }}
- 已整改 + 查实数
- +
- 22% + {{ caseVerifyPrecinctOverView.three }}
- 整改率 + 查实率
- - -
-
- 22 -
-
- 问题数 -
-
- - -
-
- 22 -
-
- 整改中 -
-
- - -
-
- 22 -
-
- 已整改 -
-
- - -
-
- 22% -
-
- 整改率 -
-
- - + + +
+
+ {{ caseVerifyTeamOverView.one }} +
+
+ 案件数 +
+
+ + +
+
+ {{ caseVerifyTeamOverView.two }} +
+
+ 查实数 +
+
+ + +
+
+ {{ caseVerifyTeamOverView.three }} +
+
+ 查实率 +
+
+ + @@ -540,61 +519,276 @@ import vCharts from "vue-echarts"; import moment from "moment"; import * as echarts from "echarts/core"; +import {getCaseVerifyRank, getSubOneStreetMap, getSubOneTrend} from "@/api/screen/sub1.ts"; +import changshaMap from "@/assets/data/changsha.json"; + +const router = useRouter() +const route = useRoute(); const time = ref([ moment().startOf("year").format("YYYY-MM-DD"), moment().format("YYYY-MM-DD"), ]); // 时间范围 -const router = useRouter() -const route = useRoute(); -import geoJson from "@/assets/data/浏阳市.json"; -import {test} from "@/api/screen/sub1.ts"; +const currentDepartId = route.query.departId; +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("浏阳市", geoJson); +echarts.registerMap("changsha", changshaMap); const option = ref({ geo: { - map: "浏阳市", + 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 ` - //
- //
${dataItem.originalName}
- //
- //
    - //
  • 问题总数 ${dataItem.totalPro}
    • - //
  • 督察问题 ${dataItem.supervisePro}
    • - //
  • 案件核查问题 ${dataItem.caseVerifyPro}
    • - //
  • 信访投诉问题 ${dataItem.mailPro}
    • - //
  • 民意感知问题 ${dataItem.policePro}
    • - //
  • 审计督察问题 ${dataItem.reviewPro}
    • - //
- //
- //
`; - // } else { - // return ` - //
- //
${dataItem.originalName}
- //
- //
    - //
  • 问题总数 0000
    • - //
  • 督察问题 0000
    • - //
  • 案件核查问题 0000
    • - //
  • 信访投诉问题 0000
    • - //
  • 民意感知问题 0000
    • - //
  • 审计督察问题 0000
    • - // - //
- // - //
- //
`; - // } - }, - }, visualMap: { type: "piecewise", @@ -615,7 +809,7 @@ const option = ref({ series: [ { type: "map", - map: "浏阳市", + map: "changsha", hoverAnimation: true, label: { show: true, @@ -687,18 +881,58 @@ const option1 = ref({ }, ], }); -const currentDepartId = route.query.departId; -const beginTest = async (departId) => { - const res = await test(departId); +const caseVerifyPrecinctOverView = ref({}) +const caseVerifyTeamOverView =ref({}) +const caseVerifyPrecinctRank = ref([]) +const caseVerifyTeamRank = ref([]) +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 getCaseVerifyRankList = async (currentDepartId, times) => { + const res = await getCaseVerifyRank(currentDepartId, times); console.log(res) + caseVerifyPrecinctRank.value = res.caseVerifyPrecinctList; + caseVerifyTeamRank.value = res.caseVerifyTeamList; + caseVerifyPrecinctOverView.value = res.caseVerifyPrecinctOverView; + caseVerifyTeamOverView.value= res.caseVerifyTeamOverView; } onMounted(() => { - // currentDepartId.value = route.query.departId; - beginTest(currentDepartId); + getMapJSON(currentDepartId); + getTrendData(currentDepartId, currentYear); + getCaseVerifyRankList(currentDepartId, time.value); }) -console.log(currentDepartId) function go() { router.push('/datav/sub2')