You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
991 lines
23 KiB
991 lines
23 KiB
<template> |
|
<el-scrollbar height="100vh"> |
|
<div class="wrapper"> |
|
<datav-header/> |
|
<main> |
|
<el-row :gutter="16"> |
|
<el-col :span="6"> |
|
<datav-card> |
|
<datav-tabs v-model="activeTab"> |
|
<datav-tab-item label="维权案件情况" name="1"> |
|
<datav-tabs |
|
v-model="activeMailTab" |
|
type="bottom-button" |
|
title="案件数" |
|
> |
|
<datav-tab-item label="分县市局" name="1"> |
|
<el-scrollbar height="300px"> |
|
<datav-chart-bar |
|
:data="fxsjRightsRank" |
|
size="large" |
|
:max="11" |
|
:color="colors" |
|
/> |
|
</el-scrollbar> |
|
</datav-tab-item> |
|
<datav-tab-item label="局属单位" name="2"> |
|
<el-scrollbar height="300px"> |
|
<datav-chart-bar |
|
:data="jsdwRightsRank" |
|
:max="11" |
|
size="large" |
|
:color="colors" |
|
/> |
|
</el-scrollbar> |
|
</datav-tab-item> |
|
</datav-tabs> |
|
</datav-tab-item> |
|
<datav-tab-item label="抚慰金额情况" name="2"> |
|
<datav-tabs |
|
v-model="activeMailTab" |
|
type="bottom-button" |
|
> |
|
<datav-tab-item label="分县市局" name="1"> |
|
<el-scrollbar height="300px"> |
|
<datav-chart-bar |
|
:data="fxsjComfortMoneyRank" |
|
size="large" |
|
:max="11" |
|
:color="colors" |
|
/> |
|
</el-scrollbar> |
|
</datav-tab-item> |
|
<datav-tab-item label="局属单位" name="2"> |
|
<el-scrollbar height="300px"> |
|
<datav-chart-bar |
|
:data="jsdwComfortMoneyRank" |
|
:max="11" |
|
size="large" |
|
:color="colors" |
|
/> |
|
</el-scrollbar> |
|
</datav-tab-item> |
|
</datav-tabs> |
|
</datav-tab-item> |
|
</datav-tabs> |
|
</datav-card> |
|
|
|
<datav-card title="案件类别占比"> |
|
|
|
<datav-tabs |
|
v-model="activeMailTab" |
|
type="bottom-button" |
|
> |
|
<datav-tab-item label="刑事案件" name="1"> |
|
<v-charts |
|
style="height: 350px" |
|
:option="xsajCaseTypeOption" |
|
autoresize |
|
/> |
|
</datav-tab-item> |
|
<datav-tab-item label="行政案件" name="2"> |
|
<v-charts |
|
style="height: 350px" |
|
:option="xzajCaseTypeOption" |
|
autoresize |
|
/> |
|
</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="comfortOverview.comfortCaseTotal" |
|
title="维权案件总数" |
|
style="width: 20%" |
|
/> |
|
<datav-statistic |
|
:value="comfortOverview.hurtTotal" |
|
title="受侵害人数" |
|
style="width: 20%" |
|
/> |
|
<datav-statistic |
|
:value="comfortOverview.comfortTotal" |
|
title="抚慰人数" |
|
style="width: 20%" |
|
/> |
|
<datav-statistic |
|
:value="comfortOverview.hitTotal" |
|
title="打击处理人数" |
|
style="width: 20%" |
|
/> |
|
<datav-statistic |
|
:value="comfortOverview.comfortMoney" |
|
:title="`抚慰金额\n（万元）`" |
|
:isDecimal="true" |
|
style="width: 20%" |
|
/> |
|
</div> |
|
<v-charts |
|
style="height: 360px" |
|
:option="option" |
|
autoresize |
|
/> |
|
<el-row :gutter="20"> |
|
<el-col :span="12"> |
|
<datav-card title="打处情况"> |
|
<v-charts |
|
style="height: 300px" |
|
:option="punishmentSituationOption" |
|
autoresize |
|
/> |
|
</datav-card> |
|
</el-col> |
|
<el-col :span="12"> |
|
<datav-card title="抚慰情况"> |
|
<v-charts |
|
style="height: 300px" |
|
:option="comfortSituationOption" |
|
autoresize |
|
/> |
|
</datav-card> |
|
</el-col> |
|
</el-row> |
|
</el-col> |
|
|
|
<el-col :span="6"> |
|
|
|
<datav-card title="民辅警受伤情况" sub-title="人数"> |
|
<datav-tabs |
|
v-model="activeMailTab" |
|
type="bottom-button" |
|
> |
|
<datav-tab-item label="受伤人数" name="1"> |
|
<v-charts |
|
style="height: 310px;" |
|
:option="hurtNumOption" |
|
autoresize |
|
/> |
|
</datav-tab-item> |
|
<datav-tab-item label="受伤类別" name="2"> |
|
<v-charts |
|
style="height: 310px;" |
|
:option="hurtTypeOption" |
|
autoresize |
|
/> |
|
</datav-tab-item> |
|
</datav-tabs> |
|
</datav-card> |
|
|
|
<datav-card title="发案情况占比"> |
|
|
|
<datav-tabs |
|
v-model="activeMailTab" |
|
type="bottom-button" |
|
> |
|
<datav-tab-item label="发案环节" name="1"> |
|
<v-charts |
|
style="height: 350px" |
|
:option="ariseCaseLinkOption" |
|
autoresize |
|
/> |
|
</datav-tab-item> |
|
<datav-tab-item label="发案警种" name="2"> |
|
<v-charts |
|
style="height: 350px" |
|
:option="ariseCasePoliceOption" |
|
autoresize |
|
/> |
|
</datav-tab-item> |
|
<datav-tab-item label="发案单位" name="3"> |
|
<v-charts |
|
style="height: 350px" |
|
:option="ariseCaseORgOption" |
|
autoresize |
|
/> |
|
</datav-tab-item> |
|
|
|
</datav-tabs> |
|
|
|
|
|
</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"; |
|
import { |
|
getALlComfortCount, |
|
getPunishmentSituation, |
|
getComfortSituation, |
|
getRightsAndComfortRank, getPoliceHurtSituationAndHurtType, getCaseAriseSituationRate,test |
|
} 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 所有变量 |
|
const time = ref([ |
|
moment().startOf("year").format("YYYY-MM-DD"), |
|
moment().format("YYYY-MM-DD"), |
|
]); |
|
|
|
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 |
|
}, |
|
|
|
]); // 分县市局维权案件情况 |
|
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 |
|
}, |
|
|
|
]); // 局属单位维权案件情况 |
|
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 |
|
}, |
|
{ |
|
label: "长沙县局", |
|
value: 9 |
|
}, |
|
{ |
|
label: "高新分局", |
|
value: 4 |
|
}, |
|
|
|
]); // 分县市局抚慰金额情况 |
|
const jsdwComfortMoneyRank = ref([ |
|
{ |
|
label: "岳麓分局", |
|
value: 33 |
|
}, |
|
{ |
|
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 |
|
}, |
|
|
|
]); // 局属单位抚慰金额情况 |
|
|
|
const comfortOverview = ref({ |
|
comfortCaseTotal: 0, |
|
hurtTotal: 0, |
|
comfortTotal: 0, |
|
hitTotal: 0, |
|
comfortMoney: 0, |
|
}) // 数据总览 |
|
const punishmentSituationList = ref([]); |
|
let gobalTempMapVoList = [ |
|
{ |
|
"name": "岳麓分局", |
|
"totalCase": 23, |
|
"victimPer": "暂无", |
|
"comfortPer": "19", |
|
"hitPro": "暂无", |
|
"comfortMon": "暂无", |
|
}, |
|
{ |
|
"name": "芙蓉分局", |
|
"totalCase": 20, |
|
"victimPer": "暂无", |
|
"comfortPer": "12", |
|
"hitPro": "暂无", |
|
"comfortMon": "暂无", |
|
}, |
|
{ |
|
"name": "天心分局", |
|
"totalCase": 20, |
|
"victimPer": "暂无", |
|
"comfortPer": "23", |
|
"hitPro": "暂无", |
|
"comfortMon": "暂无", |
|
}, |
|
{ |
|
"name": "雨花分局", |
|
"totalCase": 19, |
|
"victimPer": "暂无", |
|
"comfortPer": "16", |
|
"hitPro": "暂无", |
|
"comfortMon": "暂无", |
|
}, |
|
{ |
|
"name": "浏阳市局", |
|
"totalCase": 17, |
|
"victimPer": "暂无", |
|
"comfortPer": "30", |
|
"hitPro": "暂无", |
|
"comfortMon": "暂无", |
|
}, |
|
{ |
|
"name": "宁乡市局", |
|
"totalCase": 11, |
|
"victimPer": "暂无", |
|
"comfortPer": "0", |
|
"hitPro": "暂无", |
|
"comfortMon": "暂无", |
|
}, |
|
{ |
|
"name": "开福分局", |
|
"totalCase": 11, |
|
"victimPer": "暂无", |
|
"comfortPer": "4", |
|
"hitPro": "暂无", |
|
"comfortMon": "暂无", |
|
}, |
|
{ |
|
"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(); |
|
test() |
|
}); |
|
|
|
|
|
// 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 ` |
|
<div class="tooltip"> |
|
<div class="tooltip-title">${dataItem.name}</div> |
|
<div class="tooltip-content"> |
|
<ul class="tooltip-ul" > |
|
<li>维权案件总数 <span>${dataItem.totalCase}</span></li> |
|
<li>受侵害人数 <span>${dataItem.victimPer}</span></li> |
|
<li>抚慰人数 <span>${dataItem.comfortPer}</span></li> |
|
<li>打击处理人数 <span>${dataItem.hitPro}</span></li> |
|
<li>抚慰金额 <span>${dataItem.comfortMon}</span></li> |
|
</ul> |
|
</div> |
|
</div>`; |
|
} else { |
|
return `<div class="tooltip"> |
|
<div class="tooltip-title">${dataItem.name}</div> |
|
<div class="tooltip-content"> |
|
<ul class="tooltip-ul""> |
|
<li>维权案件数 <span>0</span></li> |
|
<li>抚慰人数 <span>0</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: [ |
|
{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: "#1773c3", |
|
}, |
|
}, |
|
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({ |
|
series: [ |
|
{ |
|
type: "pie", |
|
radius: ["40%", "70%"], |
|
label: { |
|
color: "#fff", |
|
}, |
|
data: [ |
|
{value: 2, name: "故意伤害"}, |
|
{value: 42, name: "袭警罪"}, |
|
{value: 2, name: "寻衅滋事"}, |
|
{value: 28, name: "妨碍公务"} |
|
], |
|
}, |
|
], |
|
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", |
|
}, |
|
data: [ |
|
// {value: 71, name: "刑事追究"}, |
|
// {value: 97, name: "行政处理"}, |
|
], |
|
}, |
|
], |
|
tooltip: { |
|
trigger: "item", |
|
}, |
|
}; |
|
|
|
const hurtNumOption = ref({ |
|
series: [ |
|
{ |
|
type: "pie", |
|
radius: ["30%", "50%"], |
|
label: { |
|
color: "#fff", |
|
}, |
|
tooltip: { |
|
trigger: "item", |
|
}, |
|
data: [ |
|
{value: 68, name: "民警"}, |
|
{value: 50, name: "辅警"}, |
|
{value: 3, name: "协警"}, |
|
], |
|
}, |
|
], |
|
tooltip: { |
|
trigger: "item", |
|
}, |
|
}); |
|
const hurtTypeOption = ref({ |
|
series: [ |
|
{ |
|
type: "pie", |
|
radius: ["30%", "50%"], |
|
label: { |
|
color: "#fff", |
|
}, |
|
tooltip: { |
|
trigger: "item", |
|
}, |
|
data: [ |
|
{value: 68, name: "民警"}, |
|
{value: 250, name: "辅警"}, |
|
{value: 3, name: "协警"}, |
|
], |
|
|
|
}, |
|
], |
|
tooltip: { |
|
trigger: "item", |
|
}, |
|
}); |
|
|
|
const ariseCaseLinkOption = ref({ |
|
series: [ |
|
{ |
|
type: "pie", |
|
radius: ["40%", "70%"], |
|
label: { |
|
color: "#fff", |
|
}, |
|
data: [ |
|
{value: 127, name: "110警情"}, |
|
{value: 32, name: "执勤处室"}, |
|
{value: 2, name: "组织调解"}, |
|
{value: 3, name: "传唤抓捕"}, |
|
{value: 2, name: "安保维稳"}, |
|
{value: 2, name: "网络侵权"}, |
|
{value: 2, name: "医闹纠纷"}, |
|
{value: 1, name: "其它"}, |
|
], |
|
}, |
|
], |
|
tooltip: { |
|
trigger: "item", |
|
}, |
|
}); |
|
const ariseCasePoliceOption = ref({ |
|
series: [ |
|
{ |
|
type: "pie", |
|
radius: ["40%", "70%"], |
|
label: { |
|
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: "其它"}, |
|
], |
|
}, |
|
], |
|
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 = [ |
|
{ |
|
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> |