From f6c4a168ec1b3de9e31c9df19bc9086a8e70424e 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: Tue, 17 Dec 2024 10:12:48 +0800 Subject: [PATCH] =?UTF-8?q?=E7=BB=B4=E6=9D=83=E6=8A=9A=E6=85=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/datav/RightsComfort.vue | 993 ++++++++---------------------- 1 file changed, 254 insertions(+), 739 deletions(-) diff --git a/src/views/datav/RightsComfort.vue b/src/views/datav/RightsComfort.vue index 816669b..8a5490d 100644 --- a/src/views/datav/RightsComfort.vue +++ b/src/views/datav/RightsComfort.vue @@ -5,87 +5,35 @@
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + +
+
+ +
+ +
- - - - - - - - - + + + + + + + + @@ -93,27 +41,27 @@
@@ -138,7 +86,7 @@ @@ -147,60 +95,35 @@ - - - - - - - - - - + + + + + + + + + - - - - - - - - - - - - - - - + + + + + + + + + @@ -213,172 +136,151 @@ import vCharts from "vue-echarts"; import changshaMap from "@/assets/data/changsha.json"; import * as echarts from "echarts/core"; - +import {getRightsComfortData} from "@/api/datav"; import moment from "moment"; -import { - getALlComfortCount, - getPunishmentSituation, - getComfortSituation, - getRightsAndComfortRank, getPoliceHurtSituationAndHurtType, getCaseAriseSituationRate -} from "@/api/screen/rightsComfort.ts"; - -// const temp = ref({ -// tempTotalCase: 0, -// tempVictimPer: 0, -// tempComfortPer: 0, -// tempHitPro: 0, -// tempComfortMon: 0, -// }) - -// setTimeout(() => { -// temp.value={ -// tempTotalCase: 171, -// tempVictimPer: 121, -// tempComfortPer: 114, -// tempHitPro: 205, -// tempComfortMon: 28.1, -// } -// }, 1000); -// region 所有变量 +echarts.registerMap("changsha", changshaMap); const time = ref([ moment().startOf("year").format("YYYY-MM-DD"), moment().format("YYYY-MM-DD"), ]); +const comfortPersonNumber = ref(114); +const hitPersonNumber = ref(28.1); +const comfortMoney = ref(0.0); +const punishmentSituationList = ref([]); +const comfortSituationList = ref([]); -const fxsjRightsRank = ref([ - { - label: "岳麓分局", - value: 23 - }, - { - label: "芙蓉分局", - value: 20 - }, - { - label: "天心分局", - value: 20 - }, - { - label: "雨花分局", - value: 19 - }, - { - label: "浏阳市局", - value: 17 - }, - { - label: "宁乡市局", - value: 11 - }, - { - label: "开福分局", - value: 11 - }, - { - label: "望城分局", - value: 9 - }, - { - label: "长沙县局", - value: 9 - }, - { - label: "高新分局", - value: 4 - }, +function getData() { + // getRightsComfortData(time.value).then((data) => { + // console.log('Received data:', data); // 添加日志输出 + // comfortPersonNumber.value = data.comfortPersonNumber; + // hitPersonNumber.value = data.hitPersonNumber; + // comfortMoney.value = data.comfortMoney; + // punishmentSituationList.value = data.punishmentSituation; + // comfortSituationList.value = data.comfortSituation; + // }); +} -]); // 分县市局维权案件情况 -const jsdwRightsRank = ref([ - { - label: "岳麓分局", - value: 27 - }, - { - label: "芙蓉分局", - value: 20 - }, - { - label: "天心分局", - value: 20 - }, - { - label: "雨花分局", - value: 19 - }, - { - label: "浏阳市局", - value: 17 - }, - { - label: "宁乡市局", - value: 11 - }, - { - label: "开福分局", - value: 11 - }, - { - label: "望城分局", - value: 9 - }, - { - label: "长沙县局", - value: 9 - }, - { - label: "高新分局", - value: 4 +watch(time, () => { + getData(); +}) +onMounted(() => { + getData(); +}); +const option = { + geo: { + // 是上面注册时的名字哦，registerMap（'名字保持一致'） + map: "changsha", }, -]); // 局属单位维权案件情况 -const fxsjComfortMoneyRank = ref([ - { - label: "岳麓分局", - value: 53 - }, - { - label: "芙蓉分局", - value: 20 - }, - { - label: "天心分局", - value: 20 - }, - { - label: "雨花分局", - value: 19 - }, - { - label: "浏阳市局", - value: 17 - }, - { - label: "宁乡市局", - value: 11 - }, - { - label: "开福分局", - value: 11 - }, - { - label: "望城分局", - value: 9 + visualMap: { + type: "piecewise", + bottom: 10, + pieces: [ + {gte: 85, lte: 100, label: "数据数高于1000"}, + {gte: 65, lte: 85, label: "问题数低于1000"}, + {gte: 0, lte: 65, label: "问题数低于500"}, + ], + right: 10, // 右边距 + realtime: false, + orient: "horizontal", // 水平显示 + textStyle: { + color: "#fff", // 文字颜色 + }, + calculable: true, + inRange: { + color: ["#4987F6", "#F6A149", "#D34343"], + }, }, - { - label: "长沙县局", - value: 9 + series: [ + { + name: "长沙", + type: "map", + map: "changsha", + hoverAnimation: true, + emphasis: { + areaColor: "#FFD700", // 高亮时区域颜色 + borderColor: "#FF0000", // 高亮时边框颜色 + borderWidth: 4 // 高亮时边框宽度 + }, + label: { + show: true, + color: "white", + }, + itemStyle: { + normal: { + areaColor: "#02215E", // 这里将地图区域的颜色修改为红色 + }, + }, + }, + ], +}; + +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", + ], }, - { - label: "高新分局", - value: 4 + yAxis: { + type: "value", + splitLine: { + show: true, + lineStyle: { + color: "#193775", + }, + }, }, + 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: [ + 2000, 1160, 2310, 3000, 3100, 3100, 3100, 2000, 1160, 2310, + 3000, 3100, 3100, 3100, + ], + }, + ], +}); -]); // 分县市局抚慰金额情况 -const jsdwComfortMoneyRank = ref([ +const data1 = [ { label: "岳麓分局", - value: 33 + value: 23 }, { label: "芙蓉分局", @@ -404,6 +306,7 @@ const jsdwComfortMoneyRank = ref([ label: "开福分局", value: 11 }, + { label: "望城分局", value: 9 @@ -417,284 +320,40 @@ const jsdwComfortMoneyRank = ref([ value: 4 }, -]); // 局属单位抚慰金额情况 +]; -const comfortOverview = ref({ - comfortCaseTotal: 0, - hurtTotal: 0, - comfortTotal: 0, - hitTotal: 0, - comfortMoney: 0, -}) // 数据总览 -const punishmentSituationList = ref([]); -let gobalTempMapVoList = [ +const data2 = [ { - "name": "岳麓分局", - "totalCase": 23, - "victimPer": "暂无", - "comfortPer": "19", - "hitPro": "暂无", - "comfortMon": "暂无", + name: "开福分局", + value: 9700, }, { - "name": "芙蓉分局", - "totalCase": 20, - "victimPer": "暂无", - "comfortPer": "12", - "hitPro": "暂无", - "comfortMon": "暂无", + name: "芙蓉分局", + value: 9021, }, { - "name": "天心分局", - "totalCase": 20, - "victimPer": "暂无", - "comfortPer": "23", - "hitPro": "暂无", - "comfortMon": "暂无", + name: "岳麓分局", + value: 8512, }, { - "name": "雨花分局", - "totalCase": 19, - "victimPer": "暂无", - "comfortPer": "16", - "hitPro": "暂无", - "comfortMon": "暂无", + name: "雨花分局", + value: 8021, }, { - "name": "浏阳市局", - "totalCase": 17, - "victimPer": "暂无", - "comfortPer": "30", - "hitPro": "暂无", - "comfortMon": "暂无", + name: "望城分局", + value: 7111, }, { - "name": "宁乡市局", - "totalCase": 11, - "victimPer": "暂无", - "comfortPer": "0", - "hitPro": "暂无", - "comfortMon": "暂无", + name: "浏阳市局", + value: 6622, }, { - "name": "开福分局", - "totalCase": 11, - "victimPer": "暂无", - "comfortPer": "4", - "hitPro": "暂无", - "comfortMon": "暂无", + name: "长沙县局", + value: 6221, }, - { - "name": "望城分局", - "totalCase": 9, - "victimPer": "暂无", - "comfortPer": "0", - "hitPro": "暂无", - "comfortMon": "暂无", - }, - { - "name": "长沙县局", - "totalCase": 9, - "victimPer": "暂无", - "comfortPer": "0", - "hitPro": "暂无", - "comfortMon": "暂无", - }, - { - "name": "高新分局", - "totalCase": 4, - "victimPer": "暂无", - "comfortPer": "7", - "hitPro": "暂无", - "comfortMon": "暂无", - }, - ]; -// endregion - - -// region 所有函数 -// 维权案件情况 -const getRightsRankList = async (timeValue) => { - const res = await getRightsAndComfortRank(timeValue); - fxsjRightsRank.value = res.fxsjRightsRankList; - jsdwRightsRank.value = res.jsdwRightsRankList; -} - -// 中央总览 -const getComfortOverview = async (timeValue) => { - const res = await getALlComfortCount(timeValue); - comfortOverview.value = res.comfortOverview; -} -//打处情况 -const getPunishmentSituationList = async (timeValue) => { - const res = await getPunishmentSituation(timeValue); - punishmentSituationOption.series[0].data = res.punishmentSituationList; -} -//抚慰情况 -const getComfortSituationList = async (timeValue) => { - const res = await getComfortSituation(timeValue); - comfortSituationOption.series[0].data = res.comfortSituationList; -} - -// 民辅警受伤情况-受伤人数 -const getPoliceHurtSituationList = async (timeValue) => { - const res = await getPoliceHurtSituationAndHurtType(timeValue); - hurtNumOption.value.series[0].data = res.policeHurtSituationList -} - -const getCaseAriseSituationRateList = async (timeValue) => { - const res = await getCaseAriseSituationRate(timeValue); - ariseCaseLinkOption.value.series[0].data = res.incidentLinkList - ariseCasePoliceOption.value.series[0].data = res.incidentPoliceTypeList - ariseCaseORgOption.value.series[0].data = res.incidentOrgList -} - - -// endregion - -function getData() { - // getRightsComfortData(time.value).then((data) => { - // console.log('Received data:', data); // 添加日志输出 - // comfortPersonNumber.value = data.comfortPersonNumber; - // hitPersonNumber.value = data.hitPersonNumber; - // comfortMoney.value = data.comfortMoney; - // punishmentSituationList.value = data.punishmentSituation; - // comfortSituationList.value = data.comfortSituation; - // }); - getRightsRankList(time.value); - getComfortOverview(time.value); - getPunishmentSituationList(time.value); - getComfortSituationList(time.value); - getPoliceHurtSituationList(time.value); - getCaseAriseSituationRateList(time.value); -} - -watch(time, () => { - getData(); -}) -onMounted(() => { - getData(); -}); - - -// region 所有图表 -echarts.registerMap("changsha", changshaMap); -const option = ref({ - geo: { - 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.totalCase}
    • -
  • 受侵害人数 ${dataItem.victimPer}
    • -
  • 抚慰人数 ${dataItem.comfortPer}
    • -
  • 打击处理人数 ${dataItem.hitPro}
    • -
  • 抚慰金额 ${dataItem.comfortMon}
    • -
-
-
`; - } else { - return `
-
${dataItem.name}
-
-
    -
  • 维权案件数 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, - pieces: [ - {min: 0, max: 500, label: "问题数低于500"}, {min: 501, max: 1000, label: "问题数介于500-1000"}, { - min: 1001, - label: "问题数高于1000" - }, - ], - right: 10, - realtime: false, - orient: "horizontal", - textStyle: { - color: "#fff", - }, - calculable: true, - inRange: { - color: ["#4987F6", "#F6A149", "#D34343",], - }, - }, - series: [ - { - name: "长沙", - type: "map", - map: "changsha", - hoverAnimation: true, - label: { - show: true, - color: "white", - }, - itemStyle: { - normal: { - areaColor: "#02215E", - borderColor: "#24D2EE", - borderWidth: 1 // 高亮时边框宽度 - }, - }, - emphasis: { - areaColor: "#FFD700", // 高亮时区域颜色 - borderColor: "#FF0000", // 高亮时边框颜色 - borderWidth: 4 // 高亮时边框宽度 - }, - data: gobalTempMapVoList.map(item => ({ - name: item.name, - value: item.totalPro // 将 totalPro 值映射到 value 字段 - })) - } - ], -}) -const xsajCaseTypeOption = ref({ - series: [ - { - type: "pie", - radius: ["40%", "70%"], - label: { - color: "#fff", - }, - data: [ - {value: 32, name: "故意伤害"}, - {value: 42, name: "袭警罪"}, - {value: 12, name: "寻衅滋事"}, - {value: 28, name: "妨碍公务"} - ], - }, - ], - tooltip: { - trigger: "item", - }, -}) -const xzajCaseTypeOption = ref({ +const option2 = { series: [ { type: "pie", @@ -713,72 +372,54 @@ const xzajCaseTypeOption = ref({ tooltip: { trigger: "item", }, -}); - -const punishmentSituationOption = { - series: [ - { - type: "pie", - radius: ["40%", "70%"], - label: { - color: "#fff", - }, - data: [ - // {value: 71, name: "刑事追究"}, - // {value: 97, name: "行政处理"}, - ], - }, - ], - tooltip: { - trigger: "item", - }, }; -const comfortSituationOption = { - series: [ - { - type: "pie", - radius: ["40%", "70%"], - label: { - color: "#fff", + +const option3 = computed(() => { + return { + series: [ + { + type: "pie", + radius: ["40%", "70%"], + label: { + color: "#fff", + }, + data: punishmentSituationList.value, }, - data: [ - // {value: 71, name: "刑事追究"}, - // {value: 97, name: "行政处理"}, - ], + ], + tooltip: { + trigger: "item", }, - ], - tooltip: { - trigger: "item", - }, -}; + }; +}); -const hurtNumOption = ref({ - series: [ - { - type: "pie", - radius: ["30%", "50%"], - label: { - color: "#fff", - }, - tooltip: { - trigger: "item", +const option4 = computed(() => { + return { + series: [ + { + type: "pie", + radius: ["40%", "70%"], + label: { + color: "#fff", + }, + // data: comfortSituationList.value, + data: [ + {value: 61, name: "民警"}, + {value: 51, name: "辅警"}, + {value: 2, name: "协警"}, + ] }, - data: [ - {value: 68, name: "民警"}, - {value: 50, name: "辅警"}, - {value: 3, name: "协警"}, - ], + ], + tooltip: { + trigger: "item", }, - ], - tooltip: { - trigger: "item", - }, + }; }); -const hurtTypeOption = ref({ + +const option6 = { series: [ { type: "pie", - radius: ["30%", "50%"], + radius: ["40%", "70%"], label: { color: "#fff", }, @@ -787,7 +428,7 @@ const hurtTypeOption = ref({ }, data: [ {value: 68, name: "民警"}, - {value: 250, name: "辅警"}, + {value: 50, name: "辅警"}, {value: 3, name: "协警"}, ], @@ -796,9 +437,9 @@ const hurtTypeOption = ref({ tooltip: { trigger: "item", }, -}); +}; -const ariseCaseLinkOption = ref({ +const option5 = { series: [ { type: "pie", @@ -821,8 +462,10 @@ const ariseCaseLinkOption = ref({ tooltip: { trigger: "item", }, -}); -const ariseCasePoliceOption = ref({ +}; + + +const data10 = { series: [ { type: "pie", @@ -831,47 +474,16 @@ const ariseCasePoliceOption = ref({ color: "#fff", }, data: [ - {value: 127, name: "110警情"}, - {value: 132, name: "执勤处室"}, - {value: 222, name: "组织调解"}, - {value: 332, name: "传唤抓捕"}, - {value: 2, name: "安保维稳"}, - {value: 276, name: "网络侵权"}, - {value: 492, name: "医闹纠纷"}, - {value: 199, name: "其它"}, + {value: 71, name: "刑事追究"}, + {value: 97, name: "行政处理"}, ], }, ], tooltip: { trigger: "item", }, -}); -const ariseCaseORgOption = ref({ - series: [ - { - type: "pie", - radius: ["40%", "70%"], - label: { - color: "#fff", - }, - data: [ - {value: 17, name: "110警情"}, - {value: 322, name: "执勤处室"}, - {value: 234, name: "组织调解"}, - {value: 343, name: "传唤抓捕"}, - {value: 22, name: "安保维稳"}, - {value: 2, name: "网络侵权"}, - {value: 2, name: "医闹纠纷"}, - {value: 1, name: "其它"}, - ], - }, - ], - tooltip: { - trigger: "item", - }, -}); +}; -// endregion const colors = [ { @@ -889,103 +501,6 @@ const colors = [ ]; - - \ No newline at end of file