From da7b3edf07e7ace5f14372a5cd96219920038e5d 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: Sun, 17 Nov 2024 22:20:20 +0800 Subject: [PATCH] =?UTF-8?q?=E5=AE=A1=E8=AE=A1=E7=9D=A3=E5=AF=9F=20=20?= =?UTF-8?q?=E6=A1=88=E4=BB=B6=E6=A0=B8=E6=9F=A5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/api/datav.ts | 6 + src/views/datav/AuditSuper.vue | 974 +++++++++++++++++++++------------ src/views/datav/CaseVerif.vue | 323 +++++++++-- src/views/datav/Gobal.vue | 6 +- src/views/datav/SceneInsp.vue | 57 +- 5 files changed, 973 insertions(+), 393 deletions(-) diff --git a/src/api/datav.ts b/src/api/datav.ts index c9de5ec..a6de431 100644 --- a/src/api/datav.ts +++ b/src/api/datav.ts @@ -6,6 +6,12 @@ export function getCaseVerifData(times) { }); } +export function getCaseVerifTrend(times, month) { + return request.get({ + url: `/datav/caseVerif/trend?beginTime=${times[0]}&endTime=${times[1]}&month=${month}` + }); +} + export function getMailVisitsData(times) { return request.get({ url: `/datav/mailVisits?beginTime=${times[0]}&endTime=${times[1]}` diff --git a/src/views/datav/AuditSuper.vue b/src/views/datav/AuditSuper.vue index 4f22044..d2dbc02 100644 --- a/src/views/datav/AuditSuper.vue +++ b/src/views/datav/AuditSuper.vue @@ -1,388 +1,668 @@ + + + + \ No newline at end of file + + + + diff --git a/src/views/datav/CaseVerif.vue b/src/views/datav/CaseVerif.vue index ccf4fc9..7d085f2 100644 --- a/src/views/datav/CaseVerif.vue +++ b/src/views/datav/CaseVerif.vue @@ -14,7 +14,6 @@ @@ -24,7 +23,6 @@ :data="jsdwBarList" :max="11" size="large" - :color="colors" /> @@ -46,13 +44,7 @@ autoresize /> - - - + @@ -65,27 +57,27 @@ style="width: 16.66%" /> +
+ +
@@ -131,8 +130,7 @@ /> - - + @@ -147,7 +145,7 @@ import vCharts from "vue-echarts"; import changshaMap from "@/assets/data/changsha.json"; import * as echarts from "echarts/core"; import moment from "moment"; -import {getCaseVerifData} from "@/api/datav"; +import {getCaseVerifData, getCaseVerifTrend} from "@/api/datav"; const time = ref([ moment().startOf("year").format("YYYY-MM-DD"), @@ -162,14 +160,97 @@ const overview = ref({ accountableDepartNumber: 0, confirmedRate: 0, }); +let gobalTempMapVoList = [ + { + "name": "浏阳市局", + "totalPro": 93, + "checkedPro": 11, + "dealPro": 8, + "dealPersonCount": 7, + "orgCount": 9, + "rate": "12%" + }, + { + "name": "长沙县局", + "totalPro": 192, + "checkedPro": 33, + "dealPro": 33, + "dealPersonCount": 22, + "orgCount": 11, + "rate": "17%" + }, + { + "name": "开福分局", + "totalPro": 174, + "checkedPro": 63, + "dealPro": 60, + "dealPersonCount": 32, + "orgCount": 13, + "rate": "36%" + }, + { + "name": "芙蓉分局", + "totalPro": 175, + "checkedPro": 30, + "dealPro": 30, + "dealPersonCount": 24, + "orgCount": 17, + "rate": "17%" + }, + { + "name": "雨花分局", + "totalPro": 214, + "checkedPro": 32, + "dealPro": 32, + "dealPersonCount": 27, + "orgCount": 12, + "rate": "15%" + }, + { + "name": "天心分局", + "totalPro": 179, + "checkedPro": 34, + "dealPro": 21, + "dealPersonCount": 16, + "orgCount": 14, + "rate": "19%" + }, + { + "name": "岳麓分局", + "totalPro": 234, + "checkedPro": 25, + "dealPro": 10, + "dealPersonCount": 9, + "orgCount": 10, + "rate": "11%" + }, + { + "name": "宁乡分局", + "totalPro": 68, + "checkedPro": 9, + "dealPro": 9, + "dealPersonCount": 11, + "orgCount": 8, + "rate": "13%" + }, + { + "name": "望城分局", + "totalPro": 78, + "checkedPro": 21, + "dealPro": 8, + "dealPersonCount": 9, + "orgCount": 5, + "rate": "27%" + }, +]; const fxsjBarList = ref([]); const jsdwBarList = ref([]); const zfbaPieList = ref([]); const fwglPieList = ref([]); const jjjgPieList = ref([]); - const ajlyPieList = ref([]); +const ajhcqxList = ref([]); function getData() { getCaseVerifData(time.value).then((data) => { @@ -181,6 +262,14 @@ function getData() { jjjgPieList.value = data.jjjgPieList; ajlyPieList.value = data.ajlyPieList; }); + + + getCaseVerifTrend(time.value, 12).then((data) => { + ajhcqxList.value = data.ajhcqsList; + console.log(ajhcqxList.value) + }); + + } watch(time, () => { @@ -220,7 +309,12 @@ const fwglPieOption = computed(() => { label: { color: "#fff", }, - data: fwglPieList.value, + data: [ + {value: 4, name: "交警执法"}, + {value: 3, name: "态度生硬"}, + {value: 3, name: "户政业务"}, + {value: 2, name: "监所管理"}, + ], }, ], }; @@ -256,18 +350,97 @@ const ajlyPieOption = computed(() => { label: { color: "#fff", }, - data: ajlyPieList.value, + data: [ + {name: "12389", value: 843}, + {name: "网络投诉", value: 711}, + {name: "信件投诉", value: 29}, + {name: "其他投诉", value: 3}, + {name: "值班来电", value: 3}, + ], + }, + ], + }; +}); + +const wzclPieOption = computed(() => { + return { + tooltip: { + trigger: "item", + }, + series: [ + { + type: "pie", + radius: ["40%", "70%"], + label: { + color: "#fff", + }, + data: [ + {name: "通报批评", value: 167}, + {name: "未处置人", value: 54}, + {name: "工作提醒", value: 17}, + {name: "批评教育", value: 9}, + {name: "提醒谈话", value: 21}, + {name: "禁闭", value: 2}, + {name: "责令检查", value: 2}, + {name: "党纪处分", value: 1}, + ], }, ], }; }); + + echarts.registerMap("changsha", changshaMap); const option = { geo: { // 是上面注册时的名字哦，registerMap（'名字保持一致'） map: "changsha", }, + tooltip: { + trigger: 'item', + formatter: function (params) { + console.log(params) + const dataItem = gobalTempMapVoList.find(item => item.name.includes(params.name.substring(0, 2))); + if (dataItem) { + return ` +
+
${dataItem.name}
+
+
    +
  • 案件总数（起）${dataItem.totalPro}
    • +
  • 查实案件数 ${dataItem.checkedPro}
    • +
  • 查处问题（个） ${dataItem.dealPro}
    • +
  • 问责人次 ${dataItem.dealPersonCount}
    • +
  • 问责单位数 ${dataItem.orgCount}
    • +
  • 查实率 ${dataItem.rate}
    • +
+
+
`; + } else { + return `
+
${dataItem.name}
+
+
    +
  • 案件总数（起） 0
    • +
  • 查实案件数 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: { type: "piecewise", bottom: 10, @@ -309,22 +482,7 @@ const option1 = ref({ xAxis: { type: "category", boundaryGap: false, - data: [ - "9/10", - "9/11", - "9/12", - "9/13", - "9/14", - "9/15", - "9/16", - "9/17", - "9/18", - "9/19", - "9/20", - "9/21", - "9/22", - "9/23", - ], + data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月'], }, yAxis: { type: "value", @@ -367,10 +525,7 @@ const option1 = ref({ }, ]), }, - data: [ - 2000, 1160, 2310, 3000, 3100, 3100, 3100, 2000, 1160, 2310, - 3000, 3100, 3100, 3100, - ], + data: [175, 101, 158, 141, 177, 162, 108, 166, 197, 104], }, ], }); @@ -418,4 +573,90 @@ const colors = [ \ No newline at end of file + +:deep() { + // 弹框整体 + .tooltip { + position: relative; + width: 180px; + height: 222px; + 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; + height: 43px; + background: linear-gradient(180deg, rgba(1, 4, 87, 0.8) 0%, rgba(3, 21, 119, 0.8) 100%); + display: flex; + justify-content: center; /* 水平居中 */ + align-items: center; /* 垂直居中 */ + text-align: center; /* 水平居中 */ + font-weight: 400; + font-size: 16px; + color: #FFFFFF; + line-height: 22px; + border-bottom: 1px solid #253755; /* 设置下边框 */ + } + + + .tooltip-content { + width: 180px; + height: 172px; + //font-size: 11px; + margin-top: -12px; + background: linear-gradient(180deg, #010457 0%, #031577 100%); + } + + .tooltip-content ul { + list-style-type: none; /* 移除默认的小圆点 */ + padding: 0; + + } + + .tooltip-content ul li { + margin-left: 5px; + height: 25px; + color: #597AE9; + font-size: 13px; + } + + + // 数字的span + .tooltip-ul span { + float: right; + width: 50px; + text-align: right; + margin-right: 10px; + 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; /* 右边颜色，与背景颜色相同 */ + } + + +} + + + + + + + + + + \ No newline at end of file diff --git a/src/views/datav/Gobal.vue b/src/views/datav/Gobal.vue index 5432fb9..ca321c5 100644 --- a/src/views/datav/Gobal.vue +++ b/src/views/datav/Gobal.vue @@ -66,7 +66,7 @@ /> 督察问题 ${dataItem.supervisePro}
  • 案件核查问题 ${dataItem.caseVerifyPro}
  • 信访投诉问题 ${dataItem.mailPro}
    • -
  • 警务评议问题 ${dataItem.policePro}
    • +
  • 民意感知问题 ${dataItem.policePro}
  • 审计监督问题 ${dataItem.reviewPro}
    • @@ -200,7 +200,7 @@ const option = ref({
  • 督察问题 0
  • 案件核查问题 0
  • 信访投诉问题 0
    • -
  • 警务评议问题 0
    • +
  • 民意感知问题 0
  • 审计监督问题 0
    • diff --git a/src/views/datav/SceneInsp.vue b/src/views/datav/SceneInsp.vue index 85cffe2..12fea87 100644 --- a/src/views/datav/SceneInsp.vue +++ b/src/views/datav/SceneInsp.vue @@ -65,6 +65,7 @@ + - + + + +
    +
    + {{ hddOverview.proTotal }} +
    +
    + 问题数 +
    +
    +     + +
    +
    + {{ hddOverview.changing }} +
    +
    + 整改中 +
    +
    +     + +
    +
    + {{ hddOverview.changed }} +
    +
    + 已整改 +
    +
    +     + +
    +
    + {{ hddOverview.correctionRate }}% +
    +
    + 整改率 +
    +
    +     +     + +