From 2e9fd72f187818bfc608594a5e3264613e710242 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: Thu, 28 Nov 2024 18:17:11 +0800 Subject: [PATCH] =?UTF-8?q?11/28/18:16=20=20=20=E7=8E=B0=E5=9C=BA=E7=9D=A3?= =?UTF-8?q?=E5=AF=9F=E9=87=8D=E6=9E=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/api/data/supervisionNotify.ts | 33 + src/api/screen/CaseVerif.ts | 9 + src/components/datav/card.vue | 4 + src/components/datav/message.vue | 58 ++ src/views/datav/CaseVerif.vue | 207 +++-- src/views/datav/Gobal.vue | 137 +-- src/views/datav/MailVisits.vue | 57 +- src/views/datav/SceneInsp.vue | 1432 ++++++++++++++++++++--------- 8 files changed, 1353 insertions(+), 584 deletions(-) create mode 100644 src/api/screen/CaseVerif.ts create mode 100644 src/components/datav/message.vue diff --git a/src/api/data/supervisionNotify.ts b/src/api/data/supervisionNotify.ts index 5eed844..c90ad9b 100644 --- a/src/api/data/supervisionNotify.ts +++ b/src/api/data/supervisionNotify.ts @@ -55,3 +55,36 @@ export function getYellowBetDrug(times) { 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]}` + }); +} + diff --git a/src/api/screen/CaseVerif.ts b/src/api/screen/CaseVerif.ts new file mode 100644 index 0000000..a80d60c --- /dev/null +++ b/src/api/screen/CaseVerif.ts @@ -0,0 +1,9 @@ +import request from "../request"; + + + +export function getAllCaseVerifCount(times) { + return request.get({ + url: `/datav/caseVerif/getAllCaseVerifCount?beginTime=${times[0]}&endTime=${times[1]}` + }); +} \ No newline at end of file diff --git a/src/components/datav/card.vue b/src/components/datav/card.vue index 5d3f7a9..e3a07aa 100644 --- a/src/components/datav/card.vue +++ b/src/components/datav/card.vue @@ -9,6 +9,8 @@ + + + + diff --git a/src/views/datav/CaseVerif.vue b/src/views/datav/CaseVerif.vue index 229912c..220d713 100644 --- a/src/views/datav/CaseVerif.vue +++ b/src/views/datav/CaseVerif.vue @@ -45,7 +45,13 @@ autoresize /> - + + + @@ -58,27 +64,27 @@ style="width: 16.66%" /> +
+ + + {{ selectedYear + " 年" }} + + + +
@@ -131,7 +150,15 @@ /> - + +
+ +
+
@@ -147,7 +174,12 @@ import changshaMap from "@/assets/data/changsha.json"; import * as echarts from "echarts/core"; import moment from "moment"; import {getCaseVerifData, getCaseVerifTrend} from "@/api/datav"; +import {getGobalRecentlyTrendByMonth} from "@/api/data/basicScreen.ts"; +import {getAllCaseVerifCount} from "@/api/screen/CaseVerif.ts"; +const currentYear = new Date().getFullYear(); +const years = ref([currentYear.toString(), (currentYear - 1).toString(), (currentYear - 2).toString()]); // 年份列表 +const selectedYear = ref('2024'); // 当前选中的年份 const time = ref([ moment().startOf("year").format("YYYY-MM-DD"), moment().format("YYYY-MM-DD"), @@ -155,11 +187,11 @@ const time = ref([ const overview = ref({ total: 0, - confirmed: 0, - investigateAndPunish: 0, - accountablePeopleNumber: 0, - accountableDepartNumber: 0, - confirmedRate: 0, + confirmed: 0, // 查实案件数 + investigateAndPunish: 0, // 查处问题(个) + accountablePeopleNumber: 0, // 问责人次 + accountableDepartNumber: 0, // 问责单位数、 + confirmedRate: 0, // 查实率 }); let gobalTempMapVoList = [ { @@ -252,8 +284,6 @@ const fwglPieList = ref([]); const jjjgPieList = ref([]); const ajlyPieList = ref([]); const ajhcqxList = ref([]); - - const temp = ref({ tempCheckedCaseTotal: 0, tempDealPro: 0, @@ -262,16 +292,25 @@ const temp = ref({ tempRate: 0, }) -setTimeout(() => { - temp.value={ - tempCheckedCaseTotal: 292, - tempDealPro: 285, - tempDealPre: 223, - tempDealOrg: 93, - tempRate: 18, - } -}, 1000); - +// setTimeout(() => { +// temp.value={ +// tempCheckedCaseTotal: 292, +// tempDealPro: 285, +// tempDealPre: 223, +// tempDealOrg: 93, +// tempRate: 18, +// } +// }, 1000); +// + +// region 事件||监听 +const handleCommand = (year) => { + selectedYear.value = year; // 更新当前选中的年份 +}; +watch(time, () => { + getData(); +}); +// endregion @@ -280,7 +319,7 @@ setTimeout(() => { function getData() { getCaseVerifData(time.value).then((data) => { - overview.value = data.overview; + // overview.value = data.overview; fxsjBarList.value = data.fxsjBarList; jsdwBarList.value = data.jsdwBarList; zfbaPieList.value = data.zfbaPieList; @@ -292,9 +331,13 @@ function getData() { getCaseVerifTrend(time.value, 12).then((data) => { ajhcqxList.value = data.ajhcqsList; - console.log(ajhcqxList.value) + // console.log(ajhcqxList.value) }); + getAllCaseVerifCount(time.value).then((data) => { + overview.value = data.overview; + console.log(overview.value) + }) } @@ -505,9 +548,20 @@ const option = { }; const option1 = ref({ + grid: { + left: '5%', // 图表距离容器左边的距离 + right: '2%', // 图表距离容器右边的距离 + top: '10%', // 图表距离容器上边的距离 + bottom: '20%', // 图表距离容器下边的距离 + containLabel: false // 是否包含坐标轴的标签 + }, xAxis: { type: "category", - boundaryGap: false, + boundaryGap: true, + axisTick: { + // 去掉X轴刻度线 + show: false + }, data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月'], }, yAxis: { @@ -606,85 +660,100 @@ const colors = [ // 弹框整体 .tooltip { position: relative; - width: 180px; - height: 222px; + 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: 180px; + width: 160px; height: 43px; - background: linear-gradient(180deg, rgba(1, 4, 87, 0.8) 0%, rgba(3, 21, 119, 0.8) 100%); + background: linear-gradient(180deg, #0A2F86 0%, #04154E 100%); + box-shadow: inset 0px -1px 0px 0px #253755; display: flex; justify-content: center; /* 水平居中 */ align-items: center; /* 垂直居中 */ - text-align: center; /* 水平居中 */ font-weight: 400; font-size: 16px; color: #FFFFFF; - line-height: 22px; border-bottom: 1px solid #253755; /* 设置下边框 */ } - .tooltip-content { - width: 180px; - height: 172px; - //font-size: 11px; - margin-top: -12px; - background: linear-gradient(180deg, #010457 0%, #031577 100%); + width: 160px; + height: 150px; + background: linear-gradient(180deg, #010457 0%, #031577 100%) } .tooltip-content ul { list-style-type: none; /* 移除默认的小圆点 */ - padding: 0; - + padding-left: 5px; + margin: 0; } .tooltip-content ul li { - margin-left: 5px; - height: 25px; + height: 24px; color: #597AE9; - font-size: 13px; + font-weight: 400; + font-size: 14px; } - // 数字的span + //// 数字的span .tooltip-ul span { float: right; - width: 50px; - text-align: right; - margin-right: 10px; + width: 55px; color: #fff; - font-size: 13px; + 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; /* 右边颜色,与背景颜色相同 */ - } + ///* 小尖角 */ + //.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; +} + + - - - - - - - diff --git a/src/views/datav/Gobal.vue b/src/views/datav/Gobal.vue index b2e0596..5495e98 100644 --- a/src/views/datav/Gobal.vue +++ b/src/views/datav/Gobal.vue @@ -84,7 +84,7 @@
@@ -103,8 +103,6 @@
- - @@ -120,7 +118,7 @@ @@ -177,7 +175,8 @@ const gobalTempMapVoList = ref([ } ]); // 地图临时数据 const router = useRouter(); -const years = ref(['2024', '2023', '2022']); // 年份列表 +const currentYear = new Date().getFullYear(); +const years = ref([currentYear.toString(), (currentYear - 1).toString(), (currentYear - 2).toString()]); // 年份列表 const selectedYear = ref('2024'); // 当前选中的年份 // endregion @@ -246,24 +245,36 @@ const option = ref({
  • 案件核查问题 ${dataItem.caseVerifyPro}
  • 信访投诉问题 ${dataItem.mailPro}
  • 民意感知问题 ${dataItem.policePro}
  • +
  • 审计督察问题 ${dataItem.reviewPro}
  • `; } else { - return `
    -
    ${dataItem.originalName}
    -
    -
      -
    • 问题总数 0
    • -
    • 督察问题 0
    • -
    • 案件核查问题 0
    • -
    • 信访投诉问题 0
    • -
    • 民意感知问题 0
    • -
    -
    + return ` +
    +
    ${dataItem.originalName}
    +
    +
      +
    • 问题总数 0000
    • +
    • 督察问题 0000
    • +
    • 案件核查问题 0000
    • +
    • 信访投诉问题 0000
    • +
    • 民意感知问题 0000
    • +
    • 审计督察问题 0000
    • + +
    + +
    `; } }, + // backgroundColor: "#031577", // + // borderColor: "#0A2F86", + borderWidth: 0, // 设置边框宽度为1像素 + borderRadius: 3, // 设置边框半径为3像素 + shadowBlur: 0, // 设置阴影模糊程度为8像素 + shadowOffsetX: 0, // 设置水平阴影位移量为0像素 + shadowOffsetY: 0, // 设置垂直阴影位移量为6像素 }, visualMap: { type: "piecewise", @@ -309,16 +320,20 @@ const option = ref({ // 问题趋势线状图 const proTrend = ref({ grid: { - left: '10%', // 图表距离容器左边的距离 - right: '10%', // 图表距离容器右边的距离 + left: '5%', // 图表距离容器左边的距离 + right: '2%', // 图表距离容器右边的距离 top: '10%', // 图表距离容器上边的距离 bottom: '20%', // 图表距离容器下边的距离 containLabel: false // 是否包含坐标轴的标签 }, xAxis: { type: "category", - boundaryGap: false, data: [], + boundaryGap: true, + axisTick: { + // 去掉X轴刻度线 + show: false + }, }, yAxis: { type: "value", @@ -380,8 +395,12 @@ function getData() { overview.value = res.overview; }); getGobalRecentlyTrendByMonth(new Date().getFullYear()).then((res) => { - proTrend.value.xAxis.data = res.monthList; - proTrend.value.series[0].data = res.totalList; + const gobalRecentlyTrendList = res.gobalRecentlyTrendList; + const categories = gobalRecentlyTrendList.map(item => item.name); + const values = gobalRecentlyTrendList.map(item => item.value); + // 更新图表数据 + proTrend.value.xAxis.data = categories; + proTrend.value.series[0].data = values; }); getStrongProblemRate(time.value).then((res) => { tcwtlist.value = res.tcwtlist; @@ -448,8 +467,12 @@ onMounted(() => { const handleCommand = (year) => { selectedYear.value = year; // 更新当前选中的年份 getGobalRecentlyTrendByMonth(year).then(res => { - proTrend.value.xAxis.data = res.monthList; - proTrend.value.series[0].data = res.totalList; + const gobalRecentlyTrendList = res.gobalRecentlyTrendList; + const categories = gobalRecentlyTrendList.map(item => item.name); + const values = gobalRecentlyTrendList.map(item => item.value); + // 更新图表数据 + proTrend.value.xAxis.data = categories; + proTrend.value.series[0].data = values; }); }; watch(time, () => { @@ -458,7 +481,6 @@ watch(time, () => { // endregion - const colors = [ { color: "linear-gradient( 270deg, #FB002D 0%, #822232 100%)", @@ -483,77 +505,72 @@ const colors = [ // 弹框整体 .tooltip { position: relative; - width: 169.88px; - height: 168px; + 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: 169.88px; + width: 160px; height: 43px; - background: linear-gradient(180deg, rgba(1, 4, 87, 0.8) 0%, rgba(3, 21, 119, 0.8) 100%); + background: linear-gradient(180deg, #0A2F86 0%, #04154E 100%); + box-shadow: inset 0px -1px 0px 0px #253755; display: flex; justify-content: center; /* 水平居中 */ align-items: center; /* 垂直居中 */ - text-align: center; /* 水平居中 */ font-weight: 400; font-size: 16px; color: #FFFFFF; - line-height: 22px; border-bottom: 1px solid #253755; /* 设置下边框 */ } - .tooltip-content { - width: 170px; - height: 130px; - //font-size: 11px; - margin-top: -12px; - background: linear-gradient(180deg, #010457 0%, #031577 100%); + width: 160px; + height: 150px; + background: linear-gradient(180deg, #010457 0%, #031577 100%) } .tooltip-content ul { list-style-type: none; /* 移除默认的小圆点 */ - padding: 0; - + padding-left: 5px; + margin: 0; } .tooltip-content ul li { - margin-left: 5px; - height: 25px; + height: 24px; color: #597AE9; - font-size: 13px; + font-weight: 400; + font-size: 14px; } - // 数字的span + //// 数字的span .tooltip-ul span { float: right; - width: 50px; - text-align: right; - margin-right: 35px; + width: 55px; color: #fff; - font-size: 13px; - } - + 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; /* 右边颜色,与背景颜色相同 */ } + ///* 小尖角 */ + //.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 { diff --git a/src/views/datav/MailVisits.vue b/src/views/datav/MailVisits.vue index d3c9f4a..1cc3022 100644 --- a/src/views/datav/MailVisits.vue +++ b/src/views/datav/MailVisits.vue @@ -317,7 +317,7 @@ const option = ref({
  • 信访总件数 ${dataItem.total}
  • 国家信访 ${dataItem.countryTotal}
  • 公安部信访 ${dataItem.policeTotal}
  • - +
  • 局长信箱 ${dataItem.policeTotal}
  • 12337信访 ${dataItem.numTotal}
  • @@ -681,77 +681,56 @@ const colors = [ // 弹框整体 .tooltip { position: relative; - width: 169.88px; + width: 160px; height: 178px; background: linear-gradient(180deg, rgba(1, 4, 87, 0.8) 0%, rgba(3, 21, 119, 0.8) 100%); border: 1px solid #4E8FFF; margin: -10px -10px -10px -10px; + } - //浏阳市局 + ////浏阳市局 .tooltip-title { - width: 169.88px; + width: 160px; height: 43px; - background: linear-gradient(180deg, rgba(1, 4, 87, 0.8) 0%, rgba(3, 21, 119, 0.8) 100%); + background: linear-gradient(180deg, #0A2F86 0%, #04154E 100%); + box-shadow: inset 0px -1px 0px 0px #253755; display: flex; justify-content: center; /* 水平居中 */ align-items: center; /* 垂直居中 */ - text-align: center; /* 水平居中 */ font-weight: 400; font-size: 16px; color: #FFFFFF; - line-height: 22px; border-bottom: 1px solid #253755; /* 设置下边框 */ } - .tooltip-content { - width: 170px; - height: 132px; - //font-size: 11px; - margin-top: -12px; - background: linear-gradient(180deg, #010457 0%, #031577 100%); + width: 160px; + height: 133px; + background: linear-gradient(180deg, #010457 0%, #031577 100%) } .tooltip-content ul { list-style-type: none; /* 移除默认的小圆点 */ - padding: 0; - + padding-left: 5px; + margin: 0; } .tooltip-content ul li { - margin-left: 5px; - height: 25px; + height: 26px; color: #597AE9; - font-size: 13px; + font-weight: 400; + font-size: 14px; } - - // 数字的span .tooltip-ul span { float: right; - width: 30px; - text-align: right; - margin-right: 15px; + width: 55px; color: #fff; - font-size: 13px; - } - - - /* 小尖角 */ - .tooltip::before { - content: ''; - position: absolute; - top: 90px; /* 调整尖角的垂直位置 */ - left: -10px; /* 调整尖角的水平位置 */ - width: 0; - height: 0; - //border-top: 10px solid red; /* 顶边颜色 */ - //border-bottom: 10px solid green; /* 底边颜色 */ - //border-right: 10px solid blue; /* 右边颜色,与背景颜色相同 */ + font-size: 14px; + text-align: center; /* 水平居中 */ } - } diff --git a/src/views/datav/SceneInsp.vue b/src/views/datav/SceneInsp.vue index a76225a..485e47c 100644 --- a/src/views/datav/SceneInsp.vue +++ b/src/views/datav/SceneInsp.vue @@ -7,59 +7,118 @@ - - -
    -
    - {{ rankOverview.proTotal }} -
    -
    - 问题数 -
    -
    -
    - -
    -
    - {{ rankOverview.changing }} -
    -
    - 整改中 -
    -
    -
    - -
    -
    - {{ rankOverview.changed }} -
    -
    - 已整改 -
    -
    -
    - -
    -
    - {{ rankOverview.correctionRate }}% -
    -
    - 整改率 -
    -
    -
    -
    - - - - - + + + + + +
    +
    + {{ fxsjRankOverview.proTotal }} +
    +
    + 问题数 +
    +
    +
    + +
    +
    + {{ fxsjRankOverview.changing }} +
    +
    + 整改中 +
    +
    +
    + +
    +
    + {{ fxsjRankOverview.changed }} +
    +
    + 已整改 +
    +
    +
    + +
    +
    + {{ fxsjRankOverview.correctionRate }}% +
    +
    + 整改率 +
    +
    +
    +
    + + + +
    + + + +
    +
    + {{ jsdwRankOverview.proTotal }} +
    +
    + 问题数 +
    +
    +
    + +
    +
    + {{ jsdwRankOverview.changing }} +
    +
    + 整改中 +
    +
    +
    + +
    +
    + {{ jsdwRankOverview.changed }} +
    +
    + 已整改 +
    +
    +
    + +
    +
    + {{ jsdwRankOverview.correctionRate }}% +
    +
    + 整改率 +
    +
    +
    +
    + + + +
    +
    @@ -67,7 +126,7 @@ @@ -78,7 +137,7 @@
    @@ -139,109 +198,579 @@ - - - - -
    -
    - {{ hddOverview.proTotal }} -
    -
    - 问题数 -
    -
    -
    - -
    -
    - {{ hddOverview.changing }} -
    -
    - 整改中 -
    -
    -
    - -
    -
    - {{ hddOverview.changed }} -
    -
    - 已整改 -
    -
    -
    - -
    -
    - {{ hddOverview.correctionRate }}% -
    -
    - 整改率 -
    -
    -
    -
    - - - - + + + + + +
    +
    + {{ fxsjYellowBetOverview.proTotal }} +
    +
    + 问题数 +
    +
    +
    + +
    +
    + {{ fxsjYellowBetOverview.changing }} +
    +
    + 整改中 +
    +
    +
    + +
    +
    + {{ fxsjYellowBetOverview.changed }} +
    +
    + 已整改 +
    +
    +
    + +
    +
    + {{ fxsjYellowBetOverview.correctionRate }}% +
    +
    + 整改率 +
    +
    +
    +
    + + + +
    + + + +
    +
    + {{ jsdwYellowBetOverview.proTotal }} +
    +
    + 问题数 +
    +
    +
    + +
    +
    + {{ jsdwYellowBetOverview.changing }} +
    +
    + 整改中 +
    +
    +
    + +
    +
    + {{ jsdwYellowBetOverview.changed }} +
    +
    + 已整改 +
    +
    +
    + +
    +
    + {{ jsdwYellowBetOverview.correctionRate }}% +
    +
    + 整改率 +
    +
    +
    +
    + + + +
    + +
    +
    + + + + + +
    +
    + {{ fxsjGunControllerOverview.proTotal }} +
    +
    + 问题数 +
    +
    +
    + +
    +
    + {{ fxsjGunControllerOverview.changing }} +
    +
    + 整改中 +
    +
    +
    + +
    +
    + {{ fxsjGunControllerOverview.changed }} +
    +
    + 已整改 +
    +
    +
    + +
    +
    + {{ fxsjGunControllerOverview.correctionRate }}% +
    +
    + 整改率 +
    +
    +
    +
    + + + +
    + + + +
    +
    + {{ jsdwGunControllerOverview.proTotal }} +
    +
    + 问题数 +
    +
    +
    + +
    +
    + {{ jsdwGunControllerOverview.changing }} +
    +
    + 整改中 +
    +
    +
    + +
    +
    + {{ jsdwGunControllerOverview.changed }} +
    +
    + 已整改 +
    +
    +
    + +
    +
    + {{ jsdwGunControllerOverview.correctionRate }}% +
    +
    + 整改率 +
    +
    +
    +
    + + + +
    + +
    +
    + + + + + +
    +
    + {{ fxsjCompanyProblemOverview.proTotal }} +
    +
    + 问题数 +
    +
    +
    + +
    +
    + {{ fxsjCompanyProblemOverview.changing }} +
    +
    + 整改中 +
    +
    +
    + +
    +
    + {{ fxsjCompanyProblemOverview.changed }} +
    +
    + 已整改 +
    +
    +
    + +
    +
    + {{ fxsjCompanyProblemOverview.correctionRate }}% +
    +
    + 整改率 +
    +
    +
    +
    + + + +
    + + + +
    +
    + {{ jsdwCompanyProblemOverview.proTotal }} +
    +
    + 问题数 +
    +
    +
    + +
    +
    + {{ jsdwCompanyProblemOverview.changing }} +
    +
    + 整改中 +
    +
    +
    + +
    +
    + {{ jsdwCompanyProblemOverview.changed }} +
    +
    + 已整改 +
    +
    +
    + +
    +
    + {{ jsdwCompanyProblemOverview.correctionRate }}% +
    +
    + 整改率 +
    +
    +
    +
    + + + +
    + +
    +
    + + + + + +
    +
    + {{ fxsjHandleCaseOverview.proTotal }} +
    +
    + 问题数 +
    +
    +
    + +
    +
    + {{ fxsjHandleCaseOverview.changing }} +
    +
    + 整改中 +
    +
    +
    + +
    +
    + {{ fxsjHandleCaseOverview.changed }} +
    +
    + 已整改 +
    +
    +
    + +
    +
    + {{ fxsjHandleCaseOverview.correctionRate }}% +
    +
    + 整改率 +
    +
    +
    +
    + + + +
    + + + +
    +
    + {{ jsdwHandleCaseOverview.proTotal }} +
    +
    + 问题数 +
    +
    +
    + +
    +
    + {{ jsdwHandleCaseOverview.changing }} +
    +
    + 整改中 +
    +
    +
    + +
    +
    + {{ jsdwHandleCaseOverview.changed }} +
    +
    + 已整改 +
    +
    +
    + +
    +
    + {{ jsdwHandleCaseOverview.correctionRate }}% +
    +
    + 整改率 +
    +
    +
    +
    + + + +
    + +
    +
    + + + + + +
    +
    + {{ fxsjCheckBeerOverview.proTotal }} +
    +
    + 问题数 +
    +
    +
    + +
    +
    + {{ fxsjCheckBeerOverview.changing }} +
    +
    + 整改中 +
    +
    +
    + +
    +
    + {{ fxsjCheckBeerOverview.changed }} +
    +
    + 已整改 +
    +
    +
    + +
    +
    + {{ fxsjCheckBeerOverview.correctionRate }}% +
    +
    + 整改率 +
    +
    +
    +
    + + + +
    + + + +
    +
    + {{ jsdwCheckBeerOverview.proTotal }} +
    +
    + 问题数 +
    +
    +
    + +
    +
    + {{ jsdwCheckBeerOverview.changing }} +
    +
    + 整改中 +
    +
    +
    + +
    +
    + {{ jsdwCheckBeerOverview.changed }} +
    +
    + 已整改 +
    +
    +
    + +
    +
    + {{ jsdwCheckBeerOverview.correctionRate }}% +
    +
    + 整改率 +
    +
    +
    +
    + + + +
    + +
    +
    - - - -
    -
    工作简报
    -
    - 为强化队伍纪律作风监督,给严打整治“雷霆行动”及即将到来的国庆节安保维稳工作提供强有力的纪律监督保障,9月25日20时至23时,市局警务督察支队安排6个现场督察组,对干部、民警共计119人开展集中酒精吹气测试。 -
    - -
    -
    -
    工作简报
    -
    - 为持续抓好“六项规定”贯彻执行,扎实做好中秋佳节前队伍纪律作风监督,9月3日20时至22时,市局警务督察支队联合机关党委以及来支队跟班学习的督察专干,组成6个督察组,对干部、民警、辅警共计112人开展集中酒精吹气测试 -
    - -
    -
    -
    工作简报
    -
    - 为强化队伍纪律作风监督,给“夏季治安打击整治行动”及党的二十届三中全会安保维稳工作提供强有力地纪律监督保障,7月11日晚,市局警务督察支队联合机关党委,派出6个现场督察组,对干部、民警、辅警共计111人开展集中酒精吹气测试。 -
    - -
    -
    -
    工作简报
    -
    - 为督促各参战警力切实履职,拧紧责任链条,保障周杰伦演唱会安全顺利进行,根据市局统一部署,2024年5月30日至6月2日,由警务督察支队牵头,统筹参战单位督察力量,对全市公安机关周杰伦演唱会安全保卫工作开展全方位督导检查。 -
    - -
    + +
    @@ -259,172 +788,136 @@ import * as echarts from "echarts/core"; import moment from "moment"; import { getAllSupervisionNotifyCount, - getChangedRank, + getChangedRank, getCheckBeer, getCompanyProblem, getGunController, getHandleCase, getMap, getProblemTypeRate, getSupervisionTrend, getYellowBetDrug } from "@/api/data/supervisionNotify.ts"; import {getGobalRecentlyTrendByMonth} from "@/api/data/basicScreen.ts"; +import Message from "@/components/datav/message.vue"; -const data1 = ref([]); - - -// const data1 = ref([ -// -// ]); -// setTimeout(() => { -// data1.value=[ -// { -// label: "芙蓉分局", -// value: "100", -// rate:"100", -// numerator: "1", -// denominator: "1", -// }, -// { -// label: "雨花分局", -// value: "91", -// rate:"91", -// numerator: "220", -// denominator: "240", -// }, -// { -// label: "高新分局", -// value: 90, -// rate:90, -// numerator: 140, -// denominator: 155, -// }, -// { -// label: "宁乡市局", -// value: 83, -// rate:83, -// numerator: 194, -// denominator: 232, -// }, -// { -// label: "开福分局", -// value: 73, -// rate:73, -// numerator: 137, -// denominator: 186, -// }, -// { -// label: "岳麓分局", -// value: 0, -// numerator: 0, -// rate:0, -// denominator: 11, -// }, -// ] -// },2000) - - -const activeTabLeft = ref("3"); -// 日常督察总览 -const rankOverview = ref({ +// region 所有变量 +const activeTabRight = ref("1") +const overview = ref({ + correctionRate: 0, + supervisionNotifyPreTotal: 0, + supervisionNotifyChangingTotal: 0, + supervisionNotifyChangedTotal: 0, + supervisionNotifyTotal: 0, + supervisionNotifyOrgTotal: 0, +}); // 中央数据总览 +const fxsjRankOverview = ref({}); // 日常督察总览分县市局 +const jsdwRankOverview = ref({}); // 日常督察总览局属单位 +const fxsjChangedRankList = ref([]); // 日常督察问题排行分县市局 +const jsdwChangedRankList = ref([]); // 日常督察问题排行局属单位 +const wtlxList = ref([]); // 问题类型占比 + +const fxsjYellowBetOverview = ref({ proTotal: 0, changing: 0, changed: 0, correctionRate: 0, -}); -// 黄赌毒总览 -const hddOverview = ref({ +}) // 黄赌毒总览分县市局 +const jsdwYellowBetOverview = ref({ proTotal: 0, changing: 0, changed: 0, correctionRate: 0, -}); -const wtlxList = ref([]) -const hddList = ref([]) -const overview = ref({ +}) // 黄赌毒总览局属单位 +const fxsjYellowBetRankList = ref([]) // 黄赌毒问题排行分县市局 +const jsdwYellowBetRankList = ref([]) // 黄赌毒问题排行局属单位 + +const fxsjGunControllerOverview = ref({ + proTotal: 0, + changing: 0, + changed: 0, correctionRate: 0, - supervisionNotifyPreTotal: 0, - supervisionNotifyChangingTotal: 0, - supervisionNotifyChangedTotal: 0, - supervisionNotifyTotal: 0, - supervisionNotifyOrgTotal: 0, -}); -echarts.registerMap("changsha", changshaMap); +}) // 枪支管理总览分县市局 +const jsdwGunControllerOverview = ref({ + proTotal: 0, + changing: 0, + changed: 0, + correctionRate: 0, +}) // 枪支管理总览局属单位 +const fxsjGunControllerRankList = ref([]) // 枪支管理排行分县市局 +const jsdwGunControllerRankList = ref([]) // 枪支管理排行局属单位 +const fxsjCompanyProblemOverview = ref({ + proTotal: 0, + changing: 0, + changed: 0, + correctionRate: 0, +}) // 涉企问题总览分县市局 +const jsdwCompanyProblemOverview = ref({ + proTotal: 0, + changing: 0, + changed: 0, + correctionRate: 0, +}) // 涉企问题局属单位 +const fxsjCompanyProblemRankList = ref([]) // 涉企问题排行分县市局 +const jsdwCompanyProblemRankList = ref([]) // 涉企问题排行局属单位 -// region 问题趋势线状图 +const fxsjHandleCaseOverview = ref({ + proTotal: 0, + changing: 0, + changed: 0, + correctionRate: 0, +}) // 执法办案总览分县市局 +const jsdwHandleCaseOverview = ref({ + proTotal: 0, + changing: 0, + changed: 0, + correctionRate: 0, +}) // 执法办案总览局属单位 +const fxsjHandleCaseRankList = ref([]) // 执法办案排行分县市局 +const jsdwHandleCaseRankList = ref([]) // 执法办案排行局属单位 -const proTrend = ref({ - grid: { - left: '10%', // 图表距离容器左边的距离 - right: '10%', // 图表距离容器右边的距离 - top: '10%', // 图表距离容器上边的距离 - bottom: '20%', // 图表距离容器下边的距离 - containLabel: false // 是否包含坐标轴的标签 - }, - 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: [ +const fxsjCheckBeerOverview = ref({ + proTotal: 0, + changing: 0, + changed: 0, + correctionRate: 0, +}) // 工作日测酒总览分县市局 +const jsdwCheckBeerOverview = ref({ + proTotal: 0, + changing: 0, + changed: 0, + correctionRate: 0, +}) // 工作日测酒总览局属单位 +const fxsjCheckBeerRankList = ref([]) // 工作日测酒排行分县市局 +const jsdwCheckBeerRankList = ref([]) // 工作日测酒排行局属单位 + + +const messages = ref([ { - 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: [], - }, - ], -}); + type: '', + title: '工作简报', + content: '为强化队伍纪律作风监督,给严打整治“雷霆行动”及即将到来的国庆节安保维稳工作提供强有力的纪律监督保障,9月25日20时至23时,市局警务督察支队安排6个现场督察组,对干部、民警共计119人开展集中酒精吹气测试。', + date: '2024-09-27 10:32' +}, + { + type: 'warning', + title: '工作简报', + content: '为持续抓好“六项规定”贯彻执行,扎实做好中秋佳节前队伍纪律作风监督,9月3日20时至22时,市局警务督察支队联合机关党委以及来支队跟班学习的督察专干,组成6个督察组,对干部、民警、辅警共计112人开展集中酒精吹气测试。', + date: '2024-09-06 16:23' +}, + { + type: 'warning', + title: '工作简报', + content: '为强化队伍纪律作风监督,给“夏季治安打击整治行动”及党的二十届三中全会安保维稳工作提供强有力地纪律监督保障,7月11日晚,市局警务督察支队联合机关党委,派出6个现场督察组,对干部、民警、辅警共计111人开展集中酒精吹气测试。', + date: '2024-07-15 14:39' +}, + { + type: 'warning', + title: '工作简报', + content: '为督促各参战警力切实履职,拧紧责任链条,保障周杰伦演唱会安全顺利进行,根据市局统一部署,2024年5月30日至6月2日,由警务督察支队牵头,统筹参战单位督察力量,对全市公安机关周杰伦演唱会安全保卫工作开展全方位督导检查。', + date: '2024-06-06 09:04' +} +]); -const years = ref(['2024', '2023', '2022']); // 年份列表 -const selectedYear = ref('2024'); // 当前选中的年份 -const handleCommand = (year) => { - selectedYear.value = year; // 更新当前选中的年份 - getSupervisionTrend(year).then(res => { - const supervisionTrend = res.supervisionTrend; - const categories = supervisionTrend.map(item => item.name); - const values = supervisionTrend.map(item => item.value); - // 更新图表数据 - proTrend.value.xAxis.data = categories; - proTrend.value.series[0].data = values; - }); -}; // endregion -// region 问题类型占比 +// region 问题类型占比环形图 const wtlxPieOption = computed(() => { return { tooltip: { @@ -446,17 +939,8 @@ const wtlxPieOption = computed(() => { // endregion // region 地图相关 - -let superviseTempMapVoList = [ - { - "name": "天心分局", - "totalPro": 11, - "changing": 11, - "changed": 11, - "relationOrg": 11, - "changedRate": 11 - } -]; +echarts.registerMap("changsha", changshaMap); +let superviseTempMapVoList = ref([]); echarts.registerMap("changsha", changshaMap); const option = ref({ geo: { @@ -466,7 +950,7 @@ const option = ref({ trigger: 'item', formatter: function (params) { console.log(params) - const dataItem = superviseTempMapVoList.find(item => item.name.includes(params.name.substring(0, 2))); + const dataItem = superviseTempMapVoList.value.find(item => item.name.includes(params.name.substring(0, 2))); if (dataItem) { return `
    @@ -477,32 +961,28 @@ const option = ref({
  • 整改中 ${dataItem.changing}
  • 已整改 ${dataItem.changed}
  • 涉及单位数 ${dataItem.relationOrg}
  • +
  • 涉及人数 ${dataItem.personNum}
  • 整改率 ${dataItem.changedRate}%
  • `; } else { return `
    -
    ${dataItem.name}
    +
    未知
      -
    • 通报问题数 0
    • -
    • 整改中 0
    • -
    • 已整改 0
    • -
    • 涉及单位数 0
    • -
    • 整改率 0
    • +
    • 通报问题数 未知
    • +
    • 整改中 未知
    • +
    • 已整改 未知
    • +
    • 涉及单位数 未知
    • +
    • 涉及人数 未知
    • +
    • 整改率 未知
    `; } }, - // backgroundColor: "#031577", // - // borderColor: "#0A2F86", - // borderWidth: 0, // 设置边框宽度为1像素 - // borderRadius: 3, // 设置边框半径为3像素 - // shadowBlur: 0, // 设置阴影模糊程度为8像素 - // shadowOffsetX: 0, // 设置水平阴影位移量为0像素 - // shadowOffsetY: 0, // 设置垂直阴影位移量为6像素 + }, visualMap: { @@ -549,7 +1029,87 @@ const option = ref({ } ], }) +// endregion + +// region 问题趋势线状图 +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: [], + }, + ], +}); +const currentYear = new Date().getFullYear(); +const years = ref([currentYear.toString(), (currentYear - 1).toString(), (currentYear - 2).toString()]); // 年份列表 +const selectedYear = ref('2024'); // 当前选中的年份 +const handleCommand = (year) => { + selectedYear.value = year; // 更新当前选中的年份 + getSupervisionTrend(year).then(res => { + const supervisionTrend = res.supervisionTrend; + const categories = supervisionTrend.map(item => item.name); + const values = supervisionTrend.map(item => item.value); + // 更新图表数据 + proTrend.value.xAxis.data = categories; + proTrend.value.series[0].data = values; + }); +}; // endregion @@ -569,15 +1129,18 @@ function getData() { supervisionNotifyChangedTotal: Number(res.overview.supervisionNotifyChangedTotal), supervisionNotifyTotal: Number(res.overview.supervisionNotifyTotal), supervisionNotifyOrgTotal: Number(res.overview.supervisionNotifyOrgTotal), + }); - hddOverview.value = res.hddOverview; - wtlxList.value = res.wtlxList - hddList.value = res.hddList; - superviseTempMapVoList = res.superviseTempMapVoList; }); + getChangedRank(time.value, 3).then((res) => { - rankOverview.value = res.rankOverview; - data1.value = res.changedRankList; + fxsjRankOverview.value = res.fxsjRankOverview; + jsdwRankOverview.value = res.jsdwRankOverview; + fxsjChangedRankList.value = res.fxsjChangedRankList; + jsdwChangedRankList.value = res.jsdwChangedRankList; + + // rankOverview.value = res.rankOverview; + // data1.value = res.changedRankList; }); getSupervisionTrend(new Date().getFullYear()).then((res) => { @@ -589,33 +1152,109 @@ function getData() { proTrend.value.series[0].data = values; }); + getMap(time.value).then((res) => { + // 对返回的数据映射处理 + const mappedData = res.superviseTempMapVoList.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.totalPro, + }; + }); + superviseTempMapVoList.value = mappedData; + option.value.series[0].data = mappedData; + }) + + getProblemTypeRate(time.value).then((res) => { + wtlxList.value = res.wtlxList + }); + + getYellowBetDrug(time.value).then((res) => { + fxsjYellowBetOverview.value = res.fxsjYellowBetOverview + jsdwYellowBetOverview.value = res.jsdwYellowBetOverview + fxsjYellowBetRankList.value = res.fxsjYellowBetRankList + jsdwYellowBetRankList.value = res.jsdwYellowBetRankList - // getMap(time.value).then((res)=> { - // superviseTempMapVoList = res.superviseTempMapVoList; - // }) - // - // - // getProblemTypeRate(time.value).then((res) => { - // wtlxList.value = res.wtlxList - // }); - // - // - // getYellowBetDrug().then((res) => { - // hddOverview.value = res.hddOverview; - // hddList.value = res.hddList - // }); + // hddOverview.value = res.hddOverview; + // hddList.value = res.hddList + }); + + getGunController(time.value).then((res) => { + fxsjGunControllerOverview.value = res.fxsjGunControllerOverview + jsdwGunControllerOverview.value = res.jsdwGunControllerOverview + fxsjGunControllerRankList.value = res.fxsjGunControllerRankList + jsdwGunControllerRankList.value = res.jsdwGunControllerRankList + }) + + getCompanyProblem(time.value).then((res) => { + fxsjCompanyProblemOverview.value = res.fxsjCompanyProblemOverview + jsdwCompanyProblemOverview.value = res.jsdwCompanyProblemOverview + fxsjCompanyProblemRankList.value = res.fxsjCompanyProblemRankList + jsdwCompanyProblemRankList.value = res.jsdwCompanyProblemRankList + }) + + getHandleCase(time.value).then((res) => { + fxsjHandleCaseOverview.value = res.fxsjHandleCaseOverview + jsdwHandleCaseOverview.value = res.jsdwHandleCaseOverview + fxsjHandleCaseRankList.value = res.fxsjHandleCaseRankList + jsdwHandleCaseRankList.value = res.jsdwHandleCaseRankList + }) + + getCheckBeer(time.value).then((res) => { + fxsjCheckBeerOverview.value = res.fxsjCheckBeerOverview + jsdwCheckBeerOverview.value = res.jsdwCheckBeerOverview + fxsjCheckBeerRankList.value = res.fxsjCheckBeerRankList + jsdwCheckBeerRankList.value = res.jsdwCheckBeerRankList + }) } watch(time, () => { getData(); }); -watch(activeTabLeft, () => { - getChangedRank(time.value, activeTabLeft.value).then((res) => { - rankOverview.value = res.rankOverview; - data1.value = res.changedRankList; - }); -}); +// watch(activeTabLeft, () => { +// getChangedRank(time.value, activeTabLeft.value).then((res) => { +// rankOverview.value = res.rankOverview; +// data1.value = res.changedRankList; +// }); +// }); onMounted(() => { @@ -639,36 +1278,6 @@ const colors = [ // endregion -const data2 = [ - { - name: "开福分局", - value: 9700 - }, - { - name: "芙蓉分局", - value: 9021 - }, - { - name: "岳麓分局", - value: 8512 - }, - { - name: "雨花分局", - value: 8021 - }, - { - name: "望城分局", - value: 7111 - }, - { - name: "浏阳市局", - value: 6622 - }, - { - name: "长沙县局", - value: 6221 - }, -];