supervision
/
supervision-vue
4
1
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

二级大屏开始

main
不爱学习的石同学 1 year ago
parent
2029458b01
commit
3060b3c2a6
11 changed files with 1984 additions and 813 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 50
      src/api/screen/CaseVerif.ts
  2. 65
      src/api/screen/rightsComfort.ts
  3. 38
      src/api/screen/videoSupervise.ts
  4. 20
      src/assets/data/浏阳市.json
  5. 500
      src/views/datav/CaseVerif.vue
  6. 20
      src/views/datav/Gobal.vue
  7. 36
      src/views/datav/MailVisits.vue
  8. 778
      src/views/datav/RightsComfort.vue
  9. 10
      src/views/datav/SceneInsp.vue
  10. 684
      src/views/datav/Sub1.vue
  11. 508
      src/views/datav/VideoInsp.vue

50
src/api/screen/CaseVerif.ts
Unescape View File

@ -2,8 +2,54 @@ import request from "../request";
export function getAllCaseVerifCount(times) {
export function getCaseVerificationRank(times) {
return request.get({
url: `/datav/caseVerif/getCaseVerificationRank?beginTime=${times[0]}&endTime=${times[1]}`
});
}
export function getCaseProblemProperty(times) {
return request.get({
url: `/datav/caseVerif/getCaseProblemProperty?beginTime=${times[0]}&endTime=${times[1]}`
});
}
export function getAllCaseVerificationCount(times) {
return request.get({
url: `/datav/caseVerif/getAllCaseVerificationCount?beginTime=${times[0]}&endTime=${times[1]}`
});
}
export function getCaseVerificationMap(times) {
return request.get({
url: `/datav/caseVerif/getCaseVerificationMap?beginTime=${times[0]}&endTime=${times[1]}`
});
}
export function getCaseVerificationTrend(year) {
return request.get({
url: `/datav/caseVerif/getCaseVerificationTrend?year=${year}`
});
}
export function getCaseSourceRateAndDealSituation(times) {
return request.get({
url: `/datav/caseVerif/getCaseSourceRateAndDealSituation?beginTime=${times[0]}&endTime=${times[1]}`
});
}
export function getConfinementAndPause(times) {
return request.get({
url: `/datav/caseVerif/getAllCaseVerifCount?beginTime=${times[0]}&endTime=${times[1]}`
url: `/datav/caseVerif/getConfinementAndPause?beginTime=${times[0]}&endTime=${times[1]}`
});
}

65
src/api/screen/rightsComfort.ts
Unescape View File

@ -0,0 +1,65 @@
import request from "../request";
export function getRightsAndComfortRank(times) {
return request.get({
url: `/datav/rightsComfort/getRightsAndComfortRank?beginTime=${times[0]}&endTime=${times[1]}`
});
}
export function getCaseTypeRate(times) {
return request.get({
url: `/datav/rightsComfort/getCaseTypeRate?beginTime=${times[0]}&endTime=${times[1]}`
});
}
export function getALlComfortCount(times) {
return request.get({
url: `/datav/rightsComfort/getALlComfortCount?beginTime=${times[0]}&endTime=${times[1]}`
});
}
export function getPunishmentSituation(times) {
return request.get({
url: `/datav/rightsComfort/getPunishmentSituation?beginTime=${times[0]}&endTime=${times[1]}`
});
}
export function getComfortSituation(times) {
return request.get({
url: `/datav/rightsComfort/getComfortSituation?beginTime=${times[0]}&endTime=${times[1]}`
});
}
export function getPoliceHurtSituationAndHurtType(times) {
return request.get({
url: `/datav/rightsComfort/getPoliceHurtSituationAndHurtType?beginTime=${times[0]}&endTime=${times[1]}`
});
}
export function getCaseAriseSituationRate(times) {
return request.get({
url: `/datav/rightsComfort/getCaseAriseSituationRate?beginTime=${times[0]}&endTime=${times[1]}`
});
}
export function test() {
return request.get({
url: `/datav/rightsComfort/test`
});
}

38
src/api/screen/videoSupervise.ts
Unescape View File

@ -0,0 +1,38 @@
import request from "@/api/request";
// 视频督察大屏问题数排名
export function getVideoSuperviseProblemRank(times) {
return request.get({
url: `/datav/videoSupervise/getVideoSuperviseProblemRank?beginTime=${times[0]}&endTime=${times[1]}`
});
}
// 视频督察大屏总览数据
export function getAllVideoSuperviseCount(times) {
return request.get({
url: `/datav/videoSupervise/getAllVideoSuperviseCount?beginTime=${times[0]}&endTime=${times[1]}`
});
}
// 视频督察地图数据
export function getVideoSuperviseMap(times) {
return request.get({
url: `/datav/videoSupervise/getVideoSuperviseMap?beginTime=${times[0]}&endTime=${times[1]}`
});
}
// 视频督察问题趋势
export function getVideoSuperviseTrend(year) {
return request.get({
url: `/datav/videoSupervise/getVideoSuperviseTrend?year=${year}`
});
}
// 视频督察大屏问题类型占比
export function getVideoSuperviseProblemTypeRate(times) {
return request.get({
url: `/datav/videoSupervise/getVideoSuperviseProblemTypeRate?beginTime=${times[0]}&endTime=${times[1]}`
});
}

20
src/assets/data/浏阳市.json
View File

File diff suppressed because one or more lines are too long

500
src/views/datav/CaseVerif.vue
Unescape View File

@ -69,22 +69,22 @@
style="width: 16.66%"
/>
<datav-statistic
:value="overview.investigateAndPunish"
:value="overview.dealCasePro"
title="查处问题（个）"
style="width: 16.66%"
/>
<datav-statistic
:value="overview.accountablePeopleNumber"
:value="overview.punishPre"
title="问责人次"
style="width: 16.66%"
/>
<datav-statistic
:value="overview.accountableDepartNumber"
:value="overview.punishOrg"
title="问责单位数"
style="width: 16.66%"
/>
<datav-statistic
:value="overview.confirmedRate"
:value="overview.Rate"
value-unit="%"
title="查实率"
style="width: 16.66%"
@ -98,7 +98,7 @@
<datav-card title="查处问题趋势">
<v-charts
style="height: 320px"
:option="option1"
:option="proTrend"
autoresize
/>
<div class="gobal-dropdown-container">
@ -145,7 +145,7 @@
<div class="mb-40">
<v-charts
style="height: 340px"
:option="option4"
:option="jbcloption"
autoresize
/>
</div>
@ -154,7 +154,7 @@
<div class="mb-40">
<v-charts
style="height: 340px"
:option="option4"
:option="tzcloption"
autoresize
/>
</div>
@ -173,9 +173,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, getCaseVerifTrend} from "@/api/datav";
import {getGobalRecentlyTrendByMonth} from "@/api/data/basicScreen.ts";
import {getAllCaseVerifCount} from "@/api/screen/CaseVerif.ts";
import {getAllCaseVerificationCount, getCaseVerificationRank, getCaseVerificationTrend, getCaseSourceRateAndDealSituation, getCaseVerificationMap, getCaseProblemProperty, getConfinementAndPause} from "@/api/screen/CaseVerif.ts";
const currentYear = new Date().getFullYear();
const years = ref([currentYear.toString(), (currentYear - 1).toString(), (currentYear - 2).toString()]); // 年份列表
@ -185,127 +183,38 @@ const time = ref([
moment().format("YYYY-MM-DD"),
]);
const fxsjBarList = ref([]);
const jsdwBarList = ref([]);
const overview = ref({
total: 0,
confirmed: 0, // 查实案件数
investigateAndPunish: 0, // 查处问题（个）
accountablePeopleNumber: 0, // 问责人次
accountableDepartNumber: 0, // 问责单位数、
confirmedRate: 0, // 查实率
dealCasePro: 0, // 查处问题（个）
punishPre: 0, // 问责人次
punishOrg: 0, // 问责单位数、
Rate: 0, // 查实率
});
let gobalTempMapVoList = [
let gobalTempMapVoList = ref([
{
"name": "浏阳市局",
"totalPro": 93,
"checkedPro": 11,
"dealPro": 8,
"dealPersonCount": 7,
"orgCount": 9,
"total": 93,
"confirmed": 11,
"dealCasePro": 8,
"punishPre": 7,
"punishOrg": 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([]);
const temp = ref({
tempCheckedCaseTotal: 0,
tempDealPro: 0,
tempDealPre: 0,
tempDealOrg: 0,
tempRate: 0,
})
// setTimeout(() => {
// temp.value={
// tempCheckedCaseTotal: 292,
// tempDealPro: 285,
// tempDealPre: 223,
// tempDealOrg: 93,
// tempRate: 18,
// }
// }, 1000);
//
// region 事件||监听
const handleCommand = (year) => {
selectedYear.value = year; // 更新当前选中的年份
getProTrendList(selectedYear.value);
};
watch(time, () => {
getData();
@ -315,30 +224,102 @@ watch(time, () => {
// region 所有函数
const getRankList = async(timeValue) => {
const res = await getCaseVerificationRank(timeValue);
fxsjBarList.value = res.fxsjRankList
jsdwBarList.value = res.jsdwRankList
}
function getData() {
getCaseVerifData(time.value).then((data) => {
// overview.value = data.overview;
fxsjBarList.value = data.fxsjBarList;
jsdwBarList.value = data.jsdwBarList;
zfbaPieList.value = data.zfbaPieList;
fwglPieList.value = data.fwglPieList;
jjjgPieList.value = data.jjjgPieList;
ajlyPieList.value = data.ajlyPieList;
const getCaseProblemPropertyList = async(timeValue) => {
const res = await getCaseProblemProperty(timeValue);
zfbaPieOption.value.series[0].data = res.zfbaPieList;
fwglPieOption.value.series[0].data = res.fwglPieList;
}
const getOverview = async(timeValue)=>{
const res = await getAllCaseVerificationCount(timeValue)
overview.value = res.overview
}
const getMapIcon = async(timeValue)=> {
const res = await getCaseVerificationMap(timeValue);
const mappedData = res.caseVerificationMapList.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.total,
};
});
gobalTempMapVoList.value = mappedData
option.value.series[0].data = mappedData;
}
const getProTrendList= async(year) => {
const res = await getCaseVerificationTrend(year);
const temp = res.proTrendList;
const categories = temp.map(item => item.name);
const values = temp.map(item => item.value);
proTrend.value.xAxis.data = categories;
proTrend.value.series[0].data = values;
}
const getCaseSourceAndDeal = async (timeValue)=>{
const res = await getCaseSourceRateAndDealSituation(timeValue);
ajlyPieOption.value.series[0].data = res.caseSourceRateList
wzclPieOption.value.series[0].data = res.dealSituationPieList
}
getCaseVerifTrend(time.value, 12).then((data) => {
ajhcqxList.value = data.ajhcqsList;
// console.log(ajhcqxList.value)
});
const getConfinementAndPauseList = async (timeValue)=>{
const res = await getConfinementAndPause(timeValue);
jbcloption.value.series[0].data = res.jbclList;
dzcloption.value.series[0].data = res.dzclList;
}
// endregion
getAllCaseVerifCount(time.value).then((data) => {
overview.value = data.overview;
console.log(overview.value)
})
function getData() {
getRankList(time.value);
getCaseProblemPropertyList(time.value)
getOverview(time.value);
getMapIcon(time.value);
getProTrendList(selectedYear.value);
getCaseSourceAndDeal(time.value);
}
watch(time, () => {
@ -348,46 +329,7 @@ onMounted(() => {
getData();
});
const zfbaPieOption = computed(() => {
return {
tooltip: {
trigger: "item",
},
series: [
{
type: "pie",
radius: ["40%", "70%"],
label: {
color: "#fff",
},
data: zfbaPieList.value,
},
],
};
});
const fwglPieOption = computed(() => {
return {
tooltip: {
trigger: "item",
},
series: [
{
type: "pie",
radius: ["40%", "70%"],
label: {
color: "#fff",
},
data: [
{value: 4, name: "交警执法"},
{value: 3, name: "态度生硬"},
{value: 3, name: "户政业务"},
{value: 2, name: "监所管理"},
],
},
],
};
});
const jjjgPieOption = computed(() => {
return {
@ -407,61 +349,11 @@ const jjjgPieOption = computed(() => {
};
});
const ajlyPieOption = computed(() => {
return {
tooltip: {
trigger: "item",
},
series: [
{
type: "pie",
radius: ["40%", "70%"],
label: {
color: "#fff",
},
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 = {
const option = ref({
geo: {
// 是上面注册时的名字哦，registerMap（'名字保持一致'）
map: "changsha",
@ -470,18 +362,18 @@ const option = {
trigger: 'item',
formatter: function (params) {
console.log(params)
const dataItem = gobalTempMapVoList.find(item => item.name.includes(params.name.substring(0, 2)));
if (dataItem) {
const dataItem = gobalTempMapVoList.value.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-title">${dataItem.originalName}</div>
<div class="tooltip-content">
<ul class="tooltip-ul" >
<li>案件总数（起）<span>${dataItem.totalPro}</span></li>
<li>查实案件数 <span>${dataItem.checkedPro}</span></li>
<li>查处问题（个） <span>${dataItem.dealPro}</span></li>
<li>问责人次 <span>${dataItem.dealPersonCount}</span></li>
<li>问责单位数 <span>${dataItem.orgCount}</span></li>
<li>案件总数（起）<span>${dataItem.total}</span></li>
<li>查实案件数 <span>${dataItem.confirmed}</span></li>
<li>查处问题（个） <span>${dataItem.dealCasePro}</span></li>
<li>问责人次 <span>${dataItem.punishPre}</span></li>
<li>问责单位数 <span>${dataItem.punishOrg}</span></li>
<li>查实率 <span>${dataItem.rate}</span></li>
</ul>
</div>
@ -491,12 +383,12 @@ const option = {
<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>
<li>查处问题（个） <span>0</span></li>
<li>问责人次 <span>0</span></li>
<li>问责单位数 <span>0</span></li>
<li>查实率 <span>0</span></li>
<li>案件总数（起） <span>-</span></li>
<li>查实案件数 <span>-</span></li>
<li>查处问题（个） <span>-</span></li>
<li>问责人次 <span>-</span></li>
<li>问责单位数 <span>-</span></li>
<li>查实率 <span>-</span></li>
</ul>
</div>
</div>`;
@ -514,9 +406,9 @@ const option = {
type: "piecewise",
bottom: 10,
pieces: [
{gte: 85, lte: 100, label: "问题数低于500"},
{gte: 65, lte: 85, label: "问题数低于1000"},
{gte: 0, lte: 65, label: "问题数低于1000"},
{gte: 0, lte: 65, label: "问题数低于500"},
{gte: 65, lte: 85, label: "问题数介于500-1000"},
{gte: 85, lte: 100, label: "问题数高于1000"},
],
right: 10, // 右边距
realtime: false,
@ -526,7 +418,7 @@ const option = {
},
calculable: true,
inRange: {
color: ["#D34343", "#F6A149", "#4987F6"],
color: ["#4987F6","#F6A149", "#D34343" ],
},
},
series: [
@ -535,7 +427,6 @@ const option = {
type: "map",
map: "changsha",
hoverAnimation: true,
label: {
show: true,
color: "white",
@ -543,11 +434,11 @@ const option = {
itemStyle: {
areaColor: "#02215E", // 这里将地图区域的颜色修改为红色
},
data: gobalTempMapVoList.value,
},
],
};
const option1 = ref({
});
const proTrend = ref({
grid: {
left: '5%', // 图表距离容器左边的距离
right: '2%', // 图表距离容器右边的距离
@ -605,15 +496,27 @@ const option1 = ref({
},
]),
},
data: [175, 101, 158, 141, 177, 162, 108, 166, 197, 104],
data: [],
},
],
});
const option4 = {
const ajlyPieOption = ref({
series: [
{
type: "pie",
radius: ["40%", "70%"],
label: {
color: "#fff",
},
data: [],
},
],
tooltip: {
trigger: "item",
},
});
const wzclPieOption = ref({
series: [
{
type: "pie",
@ -621,21 +524,94 @@ const option4 = {
label: {
color: "#fff",
},
data: [
{value: 14, name: "工作饮酒"},
{value: 11, name: "违规办案"},
{value: 3, name: "涉嫌违纪"},
{value: 2, name: "违反“三个规定”"},
{value: 12, name: "违反生活纪律、工作纪律"},
{value: 8, name: "违规接受管理服务对象宴请"},
{value: 2, name: "酒后驾车、涉嫌违法"},
{value: 2, name: "执法乱作为"},
{value: 3, name: "为落实请示报告制度"},
data: [],
},
],
tooltip: {
trigger: "item",
},
});
const zfbaPieOption = ref({
series: [
{
type: "pie",
radius: ["40%", "70%"],
label: {
color: "#fff",
},
data: [],
},
],
};
tooltip: {
trigger: "item",
},
});
const fwglPieOption = ref({
series: [
{
type: "pie",
radius: ["40%", "70%"],
label: {
color: "#fff",
},
data: [],
},
],
tooltip: {
trigger: "item",
},
});
const jbcloption = ref({
tooltip: {
trigger: "item",
},
series: [
{
type: "pie",
radius: ["40%", "70%"],
label: {
color: "#fff",
},
data: [
// {value: 14, name: "工作饮酒"},
// {value: 11, name: "违规办案"},
// {value: 3, name: "涉嫌违纪"},
// {value: 2, name: "违反“三个规定”"},
// {value: 12, name: "违反生活纪律、工作纪律"},
// {value: 8, name: "违规接受管理服务对象宴请"},
// {value: 2, name: "酒后驾车、涉嫌违法"},
// {value: 2, name: "执法乱作为"},
// {value: 3, name: "为落实请示报告制度"},
],
},
],
});
const tzcloption = ref({
tooltip: {
trigger: "item",
},
series: [
{
type: "pie",
radius: ["40%", "70%"],
label: {
color: "#fff",
},
data: [
// {value: 14, name: "工作饮酒"},
// {value: 11, name: "违规办案"},
// {value: 3, name: "涉嫌违纪"},
// {value: 2, name: "违反“三个规定”"},
// {value: 12, name: "违反生活纪律、工作纪律"},
// {value: 8, name: "违规接受管理服务对象宴请"},
// {value: 2, name: "酒后驾车、涉嫌违法"},
// {value: 2, name: "执法乱作为"},
// {value: 3, name: "为落实请示报告制度"},
],
},
],
});
const colors = [
{
@ -651,6 +627,7 @@ const colors = [
percentage: 40,
},
];
</script>
<style lang="scss" scoped>
@ -753,7 +730,6 @@ const colors = [
color: #fff;
}
</style>

20
src/views/datav/Gobal.vue
Unescape View File

@ -79,6 +79,7 @@
style="height: 360px"
:option="option"
autoresize
@click="handleClick"
/>
<div>
@ -145,6 +146,8 @@ import {
} from "@/api/data/basicScreen.ts";
// region 各种变量
const router = useRouter();
const activeOrgTab = ref("1");
const fxsjlist = ref([]); // 分县市区机构问题排名
const jsdwlist = ref([]); // 局属单位机构问题排名
@ -174,7 +177,7 @@ const gobalTempMapVoList = ref([
"reviewPro": 11
}
]); // 地图临时数据
const router = useRouter();
const currentYear = new Date().getFullYear();
const years = ref([currentYear.toString(), (currentYear - 1).toString(), (currentYear - 2).toString()]); // 年份列表
const selectedYear = ref('2024'); // 当前选中的年份
@ -232,7 +235,7 @@ const option = ref({
tooltip: {
trigger: 'item',
formatter: function (params) {
console.log(params);
// console.log(params);
const dataItem = gobalTempMapVoList.value.find(item => item.name.includes(params.name.substring(0, 2)));
if (dataItem) {
return `
@ -478,6 +481,19 @@ const handleCommand = (year) => {
watch(time, () => {
getData();
});
const handleClick = (params) => {
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");
}
// endregion

36
src/views/datav/MailVisits.vue
Unescape View File

@ -7,7 +7,7 @@
<el-col :span="6">
<datav-card title="初访重访情况">
<el-row class="mb-32">
<el-col :span="12">
<el-col :span="8">
<div class="descriptions_cell text-center">
<div class="descriptions_content">
{{ overview.firstMail }}
@ -17,7 +17,7 @@
</div>
</div>
</el-col>
<el-col :span="12">
<el-col :span="8">
<div class="descriptions_cell text-center">
<div class="descriptions_content">
{{ overview.secondMail }}
@ -27,6 +27,16 @@
</div>
</div>
</el-col>
<el-col :span="8">
<div class="descriptions_cell text-center">
<div class="descriptions_content">
{{ overview.secondMail }}
</div>
<div class="descriptions_label">
领导接访数
</div>
</div>
</el-col>
</el-row>
<datav-card>
<datav-tabs v-model="activeTab">
@ -55,6 +65,16 @@
/>
</el-scrollbar>
</datav-tab-item>
<datav-tab-item label="领导接访" name="3">
<el-scrollbar height="300px">
<datav-chart-bar
:data="fxsjRepeatMailList"
:max="11"
size="large"
:color="colors"
/>
</el-scrollbar>
</datav-tab-item>
</datav-tabs>
</datav-tab-item>
<datav-tab-item label="部委支队" name="2">
@ -79,6 +99,16 @@
/>
</el-scrollbar>
</datav-tab-item>
<datav-tab-item label="领导接访" name="3">
<el-scrollbar height="300px">
<datav-chart-bar
:data="fxsjRepeatMailList"
:max="11"
size="large"
:color="colors"
/>
</el-scrollbar>
</datav-tab-item>
</datav-tabs>
</datav-tab-item>
</datav-tabs>
@ -96,6 +126,7 @@
</div>
</div>
</datav-card>
</el-col>
<el-col :span="12">
@ -154,7 +185,6 @@
autoresize
/>
</datav-tab-item>
<datav-tab-item label="12337信访" name="4">
<v-charts
style="width: 105%; height: 300px; "

778
src/views/datav/RightsComfort.vue
Unescape View File

@ -5,35 +5,87 @@
<main>
<el-row :gutter="16">
<el-col :span="6">
<datav-card title="维权案件情况">
<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
sub-title="案件数"
:data="data1"
:max="31"
:data="fxsjRightsRank"
size="large"
:max="11"
:color="colors"
/>
<div class="flex tab-title flex center mt-20" style="margin-bottom: 20px">
<div class="tab-title-item active">
<!-- 分县市局-->
</div>
<!-- <div class="tab-title-item">局属单位</div>-->
</div>
</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="option2"
:option="xzajCaseTypeOption"
autoresize
/>
<!-- <div class="flex tab-title flex center mt-20" style="margin-bottom: 20px">-->
<!-- <div class="tab-title-item active">-->
<!-- &lt;!&ndash; 刑事案件&ndash;&gt;-->
<!-- 暂无数据-->
<!-- </div>-->
<!-- &lt;!&ndash; <div class="tab-title-item">行政案件</div>&ndash;&gt;-->
<!-- </div>-->
</datav-tab-item>
</datav-tabs>
</datav-card>
</el-col>
@ -41,27 +93,27 @@
<datav-date-picker v-model="time"/>
<div class="flex gap-42">
<datav-statistic
:value="temp.tempTotalCase"
:value="comfortOverview.comfortCaseTotal"
title="维权案件总数"
style="width: 20%"
/>
<datav-statistic
:value="temp.tempVictimPer"
:value="comfortOverview.hurtTotal"
title="受侵害人数"
style="width: 20%"
/>
<datav-statistic
:value="temp.tempComfortPer"
:value="comfortOverview.comfortTotal"
title="抚慰人数"
style="width: 20%"
/>
<datav-statistic
:value="temp.tempHitPro"
:value="comfortOverview.hitTotal"
title="打击处理人数"
style="width: 20%"
/>
<datav-statistic
:value="temp.tempComfortMon"
:value="comfortOverview.comfortMoney"
:title="`抚慰金额\n（万元）`"
:isDecimal="true"
style="width: 20%"
@ -77,7 +129,7 @@
<datav-card title="打处情况">
<v-charts
style="height: 300px"
:option="data10"
:option="punishmentSituationOption"
autoresize
/>
</datav-card>
@ -86,7 +138,7 @@
<datav-card title="抚慰情况">
<v-charts
style="height: 300px"
:option="option4"
:option="comfortSituationOption"
autoresize
/>
</datav-card>
@ -95,35 +147,60 @@
</el-col>
<el-col :span="6">
<datav-card title="民辅警受伤情况">
<datav-card title="民辅警受伤情况" sub-title="人数">
<datav-tabs
v-model="activeMailTab"
type="bottom-button"
>
<datav-tab-item label="受伤人数" name="1">
<v-charts
style="height: 400px;"
:option="option6"
style="height: 310px;"
:option="hurtNumOption"
autoresize
/>
<!-- <div class="flex tab-title flex center mt-20" style="margin-bottom: 20px">-->
<!-- <div class="tab-title-item active">-->
<!-- &lt;!&ndash; 受伤人数&ndash;&gt;-->
<!-- 暂无数据-->
<!-- </div>-->
<!-- &lt;!&ndash; <div class="tab-title-item">受伤类别</div>&ndash;&gt;-->
<!-- </div>-->
</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="option5"
:option="ariseCaseORgOption"
autoresize
/>
<!-- <div class="flex tab-title flex center mt-20" style="margin-bottom: 20px">-->
<!-- <div class="tab-title-item active">-->
<!-- 暂无数据-->
<!-- &lt;!&ndash; 发案环节&ndash;&gt;-->
<!-- </div>-->
<!-- &lt;!&ndash; <div class="tab-title-item">发案警种</div>&ndash;&gt;-->
<!-- &lt;!&ndash; <div class="tab-title-item">发案单位</div>&ndash;&gt;-->
<!-- </div>-->
</datav-tab-item>
</datav-tabs>
</datav-card>
</el-col>
</el-row>
@ -138,37 +215,218 @@ 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,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 temp = ref({
tempTotalCase: 0,
tempVictimPer: 0,
tempComfortPer: 0,
tempHitPro: 0,
tempComfortMon: 0,
})
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
},
setTimeout(() => {
temp.value={
tempTotalCase: 171,
tempVictimPer: 121,
tempComfortPer: 114,
tempHitPro: 205,
tempComfortMon: 28.1,
}
}, 1000);
]); // 分县市局维权案件情况
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
},
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 comfortOverview = ref({
comfortCaseTotal: 0,
hurtTotal: 0,
comfortTotal: 0,
hitTotal: 0,
comfortMoney: 0,
}) // 数据总览
const punishmentSituationList = ref([]);
const comfortSituationList = ref([]);
let gobalTempMapVoList = [
{
"name": "岳麓分局",
@ -252,15 +510,64 @@ let gobalTempMapVoList = [
},
];
// 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 = getPoliceHurtSituationAndHurtType(timeValue);
hurtNumOption.value.series[0].data = res.policeHurtSituationList
}
const getCaseAriseSituationRateList = async (timeValue) => {
const res = 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;
});
// 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, () => {
@ -268,7 +575,12 @@ watch(time, () => {
})
onMounted(() => {
getData();
test()
});
// region 所有图表
echarts.registerMap("changsha", changshaMap);
const option = ref({
geo: {
map: "changsha",
@ -317,7 +629,10 @@ const option = ref({
type: "piecewise",
bottom: 10,
pieces: [
{ min: 0, max: 500, label: "问题数低于500" }, { min: 501, max: 1000, label: "问题数介于500-1000" }, { min: 1001, label: "问题数高于1000" },
{min: 0, max: 500, label: "问题数低于500"}, {min: 501, max: 1000, label: "问题数介于500-1000"}, {
min: 1001,
label: "问题数高于1000"
},
],
right: 10,
realtime: false,
@ -359,144 +674,27 @@ const option = ref({
],
})
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",
],
},
yAxis: {
type: "value",
splitLine: {
show: true,
lineStyle: {
color: "#193775",
},
},
},
const xsajCaseTypeOption = ref({
series: [
{
type: "line",
smooth: true,
type: "pie",
radius: ["40%", "70%"],
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)", // 渐变结束颜色
},
]),
color: "#fff",
},
data: [
2000, 1160, 2310, 3000, 3100, 3100, 3100, 2000, 1160, 2310,
3000, 3100, 3100, 3100,
{value: 32, name: "故意伤害"},
{value: 42, name: "袭警罪"},
{value: 12, name: "寻衅滋事"},
{value: 28, name: "妨碍公务"}
],
},
],
});
const data1 = [
{
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 data2 = [
{
name: "开福分局",
value: 9700,
},
{
name: "芙蓉分局",
value: 9021,
},
{
name: "岳麓分局",
value: 8512,
},
{
name: "雨花分局",
value: 8021,
},
{
name: "望城分局",
value: 7111,
},
{
name: "浏阳市局",
value: 6622,
},
{
name: "长沙县局",
value: 6221,
tooltip: {
trigger: "item",
},
];
const option2 = {
})
const xzajCaseTypeOption = ref({
series: [
{
type: "pie",
@ -515,10 +713,9 @@ const option2 = {
tooltip: {
trigger: "item",
},
};
});
const option3 = computed(() => {
return {
const punishmentSituationOption = {
series: [
{
type: "pie",
@ -526,17 +723,17 @@ const option3 = computed(() => {
label: {
color: "#fff",
},
data: punishmentSituationList.value,
data: [
// {value: 71, name: "刑事追究"},
// {value: 97, name: "行政处理"},
],
},
],
tooltip: {
trigger: "item",
},
};
});
const option4 = computed(() => {
return {
};
const comfortSituationOption = {
series: [
{
type: "pie",
@ -544,21 +741,18 @@ const option4 = computed(() => {
label: {
color: "#fff",
},
// data: comfortSituationList.value,
data: [
{value: 61, name: "民警"},
{value: 51, name: "辅警"},
{value: 2, name: "协警"},
]
// {value: 71, name: "刑事追究"},
// {value: 97, name: "行政处理"},
],
},
],
tooltip: {
trigger: "item",
},
};
});
};
const option6 = {
const hurtNumOption = ref({
series: [
{
type: "pie",
@ -574,15 +768,37 @@ const option6 = {
{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 option5 = {
const ariseCaseLinkOption = ref({
series: [
{
type: "pie",
@ -605,10 +821,8 @@ const option5 = {
tooltip: {
trigger: "item",
},
};
const data10 = {
});
const ariseCasePoliceOption = ref({
series: [
{
type: "pie",
@ -617,16 +831,47 @@ const data10 = {
color: "#fff",
},
data: [
{value: 71, name: "刑事追究"},
{value: 97, name: "行政处理"},
{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 = [
{
@ -654,77 +899,72 @@ const colors = [
// 弹框整体
.tooltip {
position: relative;
width: 169.88px;
height: 170px;
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: 132px;
//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 {

10
src/views/datav/SceneInsp.vue
Unescape View File

@ -931,7 +931,6 @@ const wtlxPieOption = computed(() => {
color: "#fff",
},
data: wtlxList.value,
},
],
};
@ -954,7 +953,7 @@ const option = ref({
if (dataItem) {
return `
<div class="tooltip">
<div class="tooltip-title">${dataItem.name}</div>
<div class="tooltip-title">${dataItem.originalName}</div>
<div class="tooltip-content">
<ul class="tooltip-ul" >
<li>通报问题数 <span>${dataItem.totalPro}</span></li>
@ -1034,7 +1033,6 @@ const option = ref({
// region 问题趋势线状图
const proTrend = ref({
grid: {
left: '5%', // 图表距离容器左边的距离
right: '2%', // 图表距离容器右边的距离
@ -1249,12 +1247,6 @@ function getData() {
watch(time, () => {
getData();
});
// watch(activeTabLeft, () => {
// getChangedRank(time.value, activeTabLeft.value).then((res) => {
// rankOverview.value = res.rankOverview;
// data1.value = res.changedRankList;
// });
// });
onMounted(() => {

684
src/views/datav/Sub1.vue
Unescape View File

@ -1,17 +1,697 @@
<template>
<el-scrollbar height="100vh">
<div class="wrapper">
<datav-header />
<img src="/imgs/datav/sub1.png" alt="" class="relative pointer" @click="go">
<datav-header/>
<!-- <img src="/imgs/datav/sub1.png" alt="" class="relative pointer" @click="go">-->
<main>
<el-row :gutter="16">
<el-col :span="6">
<datav-card title="督察问题">
<datav-tabs
v-model="activeOrgTab"
type="bottom-button"
>
<datav-tab-item label="派出所" name="1">
<el-row class="mb-32">
<el-col :span="6">
<div class="descriptions_cell text-center">
<div class="descriptions_content">
22
</div>
<div class="descriptions_label">
问题数
</div>
</div>
</el-col>
<el-col :span="6">
<div class="descriptions_cell text-center">
<div class="descriptions_content">
22
</div>
<div class="descriptions_label">
整改中
</div>
</div>
</el-col>
<el-col :span="6">
<div class="descriptions_cell text-center">
<div class="descriptions_content">
22
</div>
<div class="descriptions_label">
已整改
</div>
</div>
</el-col>
<el-col :span="6">
<div class="descriptions_cell text-center">
<div class="descriptions_content">
22%
</div>
<div class="descriptions_label">
整改率
</div>
</div>
</el-col>
</el-row>
<el-scrollbar height="350px">
<datav-chart-bar
:size="small"
title="整改率排名"
sub-title="已整改/问题数"
unit="%"
/>
</el-scrollbar>
</datav-tab-item>
<datav-tab-item label="大队" name="2">
<el-row class="mb-32">
<el-col :span="6">
<div class="descriptions_cell text-center">
<div class="descriptions_content">
22
</div>
<div class="descriptions_label">
问题数
</div>
</div>
</el-col>
<el-col :span="6">
<div class="descriptions_cell text-center">
<div class="descriptions_content">
22
</div>
<div class="descriptions_label">
整改中
</div>
</div>
</el-col>
<el-col :span="6">
<div class="descriptions_cell text-center">
<div class="descriptions_content">
22
</div>
<div class="descriptions_label">
已整改
</div>
</div>
</el-col>
<el-col :span="6">
<div class="descriptions_cell text-center">
<div class="descriptions_content">
22%
</div>
<div class="descriptions_label">
整改率
</div>
</div>
</el-col>
</el-row>
<el-scrollbar height="350px">
<datav-chart-bar
:size="small"
title="整改率排名"
sub-title="已整改/问题数"
unit="%"
/>
</el-scrollbar>
</datav-tab-item>
</datav-tabs>
</datav-card>
<datav-card title="警务评议">
<datav-tabs
v-model="activeOrgTab"
type="bottom-button"
>
<datav-tab-item label="派出所" name="1">
<el-row class="mb-32">
<el-col :span="6">
<div class="descriptions_cell text-center">
<div class="descriptions_content">
22
</div>
<div class="descriptions_label">
问题数
</div>
</div>
</el-col>
<el-col :span="6">
<div class="descriptions_cell text-center">
<div class="descriptions_content">
22
</div>
<div class="descriptions_label">
整改中
</div>
</div>
</el-col>
<el-col :span="6">
<div class="descriptions_cell text-center">
<div class="descriptions_content">
22
</div>
<div class="descriptions_label">
已整改
</div>
</div>
</el-col>
<el-col :span="6">
<div class="descriptions_cell text-center">
<div class="descriptions_content">
22%
</div>
<div class="descriptions_label">
整改率
</div>
</div>
</el-col>
</el-row>
<el-scrollbar height="350px">
<datav-chart-bar
:size="small"
title="整改率排名"
sub-title="已整改/问题数"
unit="%"
/>
</el-scrollbar>
</datav-tab-item>
<datav-tab-item label="大队" name="2">
<el-row class="mb-32">
<el-col :span="6">
<div class="descriptions_cell text-center">
<div class="descriptions_content">
22
</div>
<div class="descriptions_label">
问题数
</div>
</div>
</el-col>
<el-col :span="6">
<div class="descriptions_cell text-center">
<div class="descriptions_content">
22
</div>
<div class="descriptions_label">
整改中
</div>
</div>
</el-col>
<el-col :span="6">
<div class="descriptions_cell text-center">
<div class="descriptions_content">
22
</div>
<div class="descriptions_label">
已整改
</div>
</div>
</el-col>
<el-col :span="6">
<div class="descriptions_cell text-center">
<div class="descriptions_content">
22%
</div>
<div class="descriptions_label">
整改率
</div>
</div>
</el-col>
</el-row>
<el-scrollbar height="350px">
<datav-chart-bar
:size="small"
title="整改率排名"
sub-title="已整改/问题数"
unit="%"
/>
</el-scrollbar>
</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="22"
title="问题总数"
style="width: 20%"
/>
<datav-statistic
:value="22"
title="处理中"
style="width: 20%"
/>
<datav-statistic
:value="33"
title="涉及单位"
style="width: 20%"
/>
<datav-statistic
:value="44"
title="涉及人员"
style="width: 20%"
/>
<datav-statistic
:value="22"
title="办结率"
style="width: 20%"
/>
</div>
<v-charts
style="height: 360px"
:option="option"
autoresize
/>
<datav-card title="问题趋势">
<datav-tabs v-model="activeMailTrend" @change="handleTabChange">
<datav-tab-item label="督察问题趋势" name="1">
<v-charts
style="width: 105%; height: 300px;"
:option="option1"
autoresize
/>
</datav-tab-item>
<datav-tab-item label="案件核查趋势" name="2">
<v-charts
style="width: 105%; height: 300px;"
:option="option1"
autoresize
/>
</datav-tab-item>
<datav-tab-item label="警务评议趋势" name="3">
<v-charts
style="width: 105%; height: 300px;"
:option="option1"
autoresize
/>
</datav-tab-item>
<datav-tab-item label="信访投诉趋势" name="4">
<v-charts
style="width: 105%; height: 300px;"
:option="option1"
autoresize
/>
</datav-tab-item>
</datav-tabs>
</datav-card>
</el-col>
<el-col :span="6">
<datav-card title="局长信箱">
<datav-tabs
v-model="activeOrgTab"
type="bottom-button"
>
<datav-tab-item label="派出所" name="1">
<el-row class="mb-32">
<el-col :span="6">
<div class="descriptions_cell text-center">
<div class="descriptions_content">
22
</div>
<div class="descriptions_label">
问题数
</div>
</div>
</el-col>
<el-col :span="6">
<div class="descriptions_cell text-center">
<div class="descriptions_content">
22
</div>
<div class="descriptions_label">
整改中
</div>
</div>
</el-col>
<el-col :span="6">
<div class="descriptions_cell text-center">
<div class="descriptions_content">
22
</div>
<div class="descriptions_label">
已整改
</div>
</div>
</el-col>
<el-col :span="6">
<div class="descriptions_cell text-center">
<div class="descriptions_content">
22%
</div>
<div class="descriptions_label">
整改率
</div>
</div>
</el-col>
</el-row>
<el-scrollbar height="350px">
<datav-chart-bar
:size="small"
title="整改率排名"
sub-title="已整改/问题数"
unit="%"
/>
</el-scrollbar>
</datav-tab-item>
<datav-tab-item label="大队" name="2">
<el-row class="mb-32">
<el-col :span="6">
<div class="descriptions_cell text-center">
<div class="descriptions_content">
22
</div>
<div class="descriptions_label">
问题数
</div>
</div>
</el-col>
<el-col :span="6">
<div class="descriptions_cell text-center">
<div class="descriptions_content">
22
</div>
<div class="descriptions_label">
整改中
</div>
</div>
</el-col>
<el-col :span="6">
<div class="descriptions_cell text-center">
<div class="descriptions_content">
22
</div>
<div class="descriptions_label">
已整改
</div>
</div>
</el-col>
<el-col :span="6">
<div class="descriptions_cell text-center">
<div class="descriptions_content">
22%
</div>
<div class="descriptions_label">
整改率
</div>
</div>
</el-col>
</el-row>
<el-scrollbar height="350px">
<datav-chart-bar
:size="small"
title="整改率排名"
sub-title="已整改/问题数"
unit="%"
/>
</el-scrollbar>
</datav-tab-item>
</datav-tabs>
</datav-card>
<datav-card title="案件核查">
<datav-tabs
v-model="activeOrgTab"
type="bottom-button"
>
<datav-tab-item label="派出所" name="1">
<el-row class="mb-32">
<el-col :span="6">
<div class="descriptions_cell text-center">
<div class="descriptions_content">
22
</div>
<div class="descriptions_label">
问题数
</div>
</div>
</el-col>
<el-col :span="6">
<div class="descriptions_cell text-center">
<div class="descriptions_content">
22
</div>
<div class="descriptions_label">
整改中
</div>
</div>
</el-col>
<el-col :span="6">
<div class="descriptions_cell text-center">
<div class="descriptions_content">
22
</div>
<div class="descriptions_label">
已整改
</div>
</div>
</el-col>
<el-col :span="6">
<div class="descriptions_cell text-center">
<div class="descriptions_content">
22%
</div>
<div class="descriptions_label">
整改率
</div>
</div>
</el-col>
</el-row>
<el-scrollbar height="350px">
<datav-chart-bar
:size="small"
title="整改率排名"
sub-title="已整改/问题数"
unit="%"
/>
</el-scrollbar>
</datav-tab-item>
<datav-tab-item label="大队" name="2">
<el-row class="mb-32">
<el-col :span="6">
<div class="descriptions_cell text-center">
<div class="descriptions_content">
22
</div>
<div class="descriptions_label">
问题数
</div>
</div>
</el-col>
<el-col :span="6">
<div class="descriptions_cell text-center">
<div class="descriptions_content">
22
</div>
<div class="descriptions_label">
整改中
</div>
</div>
</el-col>
<el-col :span="6">
<div class="descriptions_cell text-center">
<div class="descriptions_content">
22
</div>
<div class="descriptions_label">
已整改
</div>
</div>
</el-col>
<el-col :span="6">
<div class="descriptions_cell text-center">
<div class="descriptions_content">
22%
</div>
<div class="descriptions_label">
整改率
</div>
</div>
</el-col>
</el-row>
<el-scrollbar height="350px">
<datav-chart-bar
:size="small"
title="整改率排名"
sub-title="已整改/问题数"
unit="%"
/>
</el-scrollbar>
</datav-tab-item>
</datav-tabs>
</datav-card>
</el-col>
</el-row>
</main>
</div>
</el-scrollbar>
</template>
<script setup>
import vCharts from "vue-echarts";
import moment from "moment";
import * as echarts from "echarts/core";
const time = ref([
moment().startOf("year").format("YYYY-MM-DD"),
moment().format("YYYY-MM-DD"),
]); // 时间范围
const router = useRouter()
import geoJson from "@/assets/data/浏阳市.json";
echarts.registerMap("浏阳市", geoJson);
const option = ref({
geo: {
map: "浏阳市",
},
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 `
// <div class="tooltip">
// <div class="tooltip-title">${dataItem.originalName}</div>
// <div class="tooltip-content">
// <ul class="tooltip-ul" >
// <li>问题总数 <span>${dataItem.totalPro}</span></li>
// <li>督察问题 <span>${dataItem.supervisePro}</span></li>
// <li>案件核查问题 <span>${dataItem.caseVerifyPro}</span></li>
// <li>信访投诉问题 <span>${dataItem.mailPro}</span></li>
// <li>民意感知问题 <span>${dataItem.policePro}</span></li>
// <li>审计督察问题 <span>${dataItem.reviewPro}</span></li>
// </ul>
// </div>
// </div>`;
// } else {
// return `
// <div class="tooltip">
// <div class="tooltip-title">${dataItem.originalName}</div>
// <div class="tooltip-content">
// <ul class="tooltip-ul"">
// <li>问题总数 <span>0000</span></li>
// <li>督察问题 <span>0000</span></li>
// <li>案件核查问题 <span>0000</span></li>
// <li>信访投诉问题 <span>0000</span></li>
// <li>民意感知问题 <span>0000</span></li>
// <li>审计督察问题 <span>0000</span></li>
//
// </ul>
//
// </div>
// </div>`;
// }
},
},
visualMap: {
type: "piecewise",
bottom: 10,
pieces: [
{min: 0, max: 500, label: "问题数低于500", color: "#4987F6"},
{min: 501, max: 1000, label: "问题数介于500-1000", color: "#F6A149"},
{min: 1001, label: "问题数高于1000", color: "#D34343"},
],
right: 10,
realtime: false,
orient: "horizontal",
textStyle: {
color: "#fff",
},
calculable: true,
},
series: [
{
type: "map",
map: "浏阳市",
hoverAnimation: true,
label: {
show: true,
color: "white",
},
itemStyle: {
normal: {
areaColor: "#02215E",
borderColor: "#1773c3",
},
},
emphasis: {
areaColor: "#FFD700", // 高亮时区域颜色
borderColor: "#FF0000", // 高亮时边框颜色
borderWidth: 4 // 高亮时边框宽度
},
data: []
}
],
})
const option1 = ref({
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: [
{
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: [],
},
],
});
function go() {
router.push('/datav/sub2')
}
</script>
<style lang="scss" scoped>
@import "@/style/datav.scss";
</style>

508
src/views/datav/VideoInsp.vue
Unescape View File

@ -42,44 +42,58 @@
</el-col>
</el-row>
</datav-card>
<datav-card title="问题数排名" style="height: 370px;">
<datav-card title="问题数排名" sub-title="问题数" style="height: 370px;">
<datav-tabs
type="bottom-button"
>
<datav-tab-item label="分县市局" name="1">
<el-scrollbar height="280px">
<datav-chart-bar
sub-title="问题数"
:data="data1"
:max="11"
:data="fxsjRankList"
size="large"
:color="colors"
/>
</el-scrollbar>
</datav-tab-item>
<datav-tab-item label="局属单位" name="2">
<el-scrollbar height="280px">
<datav-chart-bar
:data="jsdwRankList"
:max="11"
size="large"
/>
</el-scrollbar>
</datav-tab-item>
</datav-tabs>
</datav-card>
</el-col>
<el-col :span="12">
<div class="datav-col">
<label for="">统计周期：</label>
<span>2024年01月01日 - 2024年08月30日</span>
</div>
<datav-date-picker v-model="time"/>
<div class="flex gap-42">
<datav-statistic
:value="temp.tempPro"
:value="overview.discoverProblem"
title="发现问题数"
style="width: 20%"
/>
<datav-statistic
:value="temp.tempChangePro"
:value="overview.changedProblem"
title="整改问题数"
style="width: 20%"
/>
<datav-statistic
:value="temp.tempRelationOrg"
:value="overview.relativeOrg"
title="涉及单位数"
style="width: 20%"
/>
<datav-statistic
:value="temp.tempRelationPre"
:value="overview.relativePer"
title="涉及人数"
style="width: 20%"
/>
<datav-statistic
:value="temp.tempChangeRate"
:value="overview.changedRate"
value-unit="%"
title="整改率"
style="width: 20%"
@ -93,11 +107,25 @@
<datav-card title="问题趋势">
<v-charts
style="height: 250px"
:option="option1"
:option="proTrend"
autoresize
/>
<div class="gobal-dropdown-container">
<el-dropdown class="test" @command="handleCommand">
<span class="el-dropdown-link my-gobal-yearselect">
{{ selectedYear + ' 年'}}
</span>
<template #dropdown>
<el-dropdown-menu style="width: 90px">
<el-dropdown-item v-for="year in years" :key="year" :command="year">{{ year + " 年" }}
</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
</div>
</datav-card>
</el-col>
<el-col :span="6">
<datav-card title="实时预警">
<el-scrollbar height="450px">
@ -146,7 +174,7 @@
<datav-card title="问题类型占比">
<v-charts
style="height: 300px"
:option="option2"
:option="ProblemTypeRateChart"
autoresize
/>
</datav-card>
@ -156,96 +184,208 @@
</div>
</el-scrollbar>
</template>
<script setup>
import changshaMap from "@/assets/data/changsha.json";
import vCharts from "vue-echarts";
import * as echarts from "echarts/core";
import {
getAllVideoSuperviseCount,
getVideoSuperviseProblemTypeRate,
getVideoSuperviseProblemRank, getVideoSuperviseMap, getVideoSuperviseTrend
} from "@/api/screen/videoSupervise.ts";
import moment from "moment/moment.js";
const time = ref([
moment().startOf("year").format("YYYY-MM-DD"),
moment().format("YYYY-MM-DD"),
]);
const fxsjRankList = ref([]);
const jsdwRankList = ref([]);
const overview = ref({
discoverProblem: 0,
changedProblem: 0,
relativeOrg: 0,
relativePer: 0,
changedRate: 0,
});
const mapIconList = ref([{
originalName:"浏阳市局",
name: "浏阳市",
discoverProblem: 135,
changedProblem: 135,
relativeOrg: 89,
relativePer: 152,
changedRate: 100
}])
const ProblemTypeRate = ref([])
const currentYear = new Date().getFullYear();
const years = ref([currentYear.toString(), (currentYear - 1).toString(), (currentYear - 2).toString()]); // 年份列表
const selectedYear = ref('2024'); // 当前选中的年份
// region 所有函数
const getOverview = async (timeValue) => {
const res = await getAllVideoSuperviseCount(timeValue);
overview.value = res.overview;
}
const getMap = async (timeValue) => {
const res = await getVideoSuperviseMap(timeValue);
console.log(res.videoSuperviseMapIconVoList)
const mappedData = res.videoSuperviseMapIconVoList.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.discoverProblem,
};
});
mapIconList.value = mappedData
console.log(mapIconList.value)
}
const getProblemTypeRate = async (timeValue) => {
const res = await getVideoSuperviseProblemTypeRate(timeValue);
ProblemTypeRate.value = res.videoSuperviseProblemTypeRate
}
const getRankList = async (timeValue) => {
const res = await getVideoSuperviseProblemRank(timeValue);
fxsjRankList.value = res.fxsjVideoSuperviseProblemRankList
jsdwRankList.value = res.jsdwVideoSuperviseProblemRankList
}
const getTrend = async(year)=> {
const res = await getVideoSuperviseTrend(year);
const temp = res.videoSuperviseTrendList;
const categories = temp.map(item => item.name);
const values = temp.map(item => item.value);
proTrend.value.xAxis.data = categories;
proTrend.value.series[0].data = values;
}
const getData = async () => {
getOverview(time.value);
getProblemTypeRate(time.value);
getRankList(time.value)
getMap(time.value)
getTrend(selectedYear.value)
}
const temp =ref({
tempPro: 0,
tempChangePro: 0,
tempRelationOrg: 0,
tempRelationPre: 0,
tempChangeRate: 0
// endregion
// region 初始化数据和事件监听
watch(time, () => {
getData()
})
setTimeout(() => {
temp.value = {
tempPro: 135,
tempChangePro: 135,
tempRelationOrg: 89,
tempRelationPre: 152,
tempChangeRate: 100
}
}, 1000);
onMounted(() => {
getData()
})
const handleCommand = (year) => {
selectedYear.value = year; // 更新当前选中的年份
getTrend(selectedYear.value)
};
// endregion
echarts.registerMap("changsha", changshaMap);
let gobalTempMapVoList = [
{
"name": "芙蓉分局",
"total": 25,
"changedPro": 25,
"relationOrg": 15,
"relationPre": 27,
"changeRate": 100
}, {
"name": "天心分局",
"total": 5,
"changedPro": 5,
"relationOrg": 5,
"relationPre": 7,
"changeRate": 100
}, {
"name": "岳麓分局",
"total": 22,
"changedPro": 22,
"relationOrg": 12,
"relationPre": 25,
"changeRate": 100
}, {
"name": "开福分局",
"total": 30,
"changedPro": 30,
"relationOrg": 16,
"relationPre": 32,
"changeRate": 100
}, {
"name": "雨花分局",
"total": 18,
"changedPro": 18,
"relationOrg": 12,
"relationPre": 16,
"changeRate": 100
}, {
"name": "望城分局",
"total": 15,
"changedPro": 15,
"relationOrg": 10,
"relationPre": 15,
"changeRate": 100
}, {
"name": "浏阳市局",
"total": 13,
"changedPro": 13,
"relationOrg": 11,
"relationPre": 15,
"changeRate": 100
}, {
"name": "宁乡市局",
"total": 11,
"changedPro": 11,
"relationOrg": 9,
"relationPre": 13,
"changeRate": 100
}, {
"name": "长沙县局",
"total": 6,
"changedPro": 6,
"relationOrg": 8,
"relationPre": 9,
"changeRate": 100
// region 所有图表
const proTrend = ref({
xAxis: {
type: "category",
boundaryGap: true,
data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月",],
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,
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: [12, 16, 14, 11, 6, 13, 8, 17, 16, 10, 12],
},
],
grid: {
left: '5%', // 图表距离容器左边的距离
right: '2%', // 图表距离容器右边的距离
top: '10%', // 图表距离容器上边的距离
bottom: '20%', // 图表距离容器下边的距离
containLabel: false // 是否包含坐标轴的标签
},
});
echarts.registerMap("changsha", changshaMap);
const option = ref({
geo: {
map: "changsha",
@ -254,19 +394,18 @@ const option = ref({
tooltip: {
trigger: 'item',
formatter: function (params) {
console.log(params)
const dataItem = gobalTempMapVoList.find(item => item.name.includes(params.name.substring(0, 2)));
const dataItem = mapIconList.value.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-title">${dataItem.originalName}</div>
<div class="tooltip-content">
<ul class="tooltip-ul" >
<li>发现问题数 <span>${dataItem.total}</span></li>
<li>整改问题数 <span>${dataItem.changedPro}</span></li>
<li>涉及单位数 <span>${dataItem.relationOrg}</span></li>
<li>涉及人数 <span>${dataItem.relationPre}</span></li>
<li>整改率 <span>${dataItem.changeRate}%</span></li>
<li>发现问题数 <span>${dataItem.discoverProblem}</span></li>
<li>整改问题数 <span>${dataItem.changedProblem}</span></li>
<li>涉及单位数 <span>${dataItem.relativeOrg}</span></li>
<li>涉及人数 <span>${dataItem.relativePer}</span></li>
<li>整改率 <span>${dataItem.changedRate}%</span></li>
</ul>
</div>
</div>`;
@ -275,11 +414,11 @@ const option = ref({
<div class="tooltip-title">${params.name}</div>
<div class="tooltip-content">
<ul class="tooltip-ul"">
<li>信访总件数 <span>0</span></li>
<li>国家信访 <span>0</span></li>
<li>公安部信访 <span>0</span></li>
<li>12337信访 <span>0</span></li>
<li>发现问题数 <span>0</span></li>
<li>整改问题数 <span>0</span></li>
<li>涉及单位数 <span>0</span></li>
<li>涉及人数 <span>0</span></li>
<li>整改率 <span>0%</span></li>
</ul>
</div>
</div>`;
@ -288,13 +427,12 @@ const option = ref({
},
visualMap: {
type: "piecewise",
bottom: 10,
pieces: [
{gte: 0, lte: 10, label: "问题数低于500"},
{gte: 10, lte: 20, label: "问题数介于500-1000"},
{gte: 30, label: "问题数高于1000"},
{gte: 0, lte: 500, label: "问题数低于500"},
{gte: 501, lte: 1000, label: "问题数介于500-1000"},
{gte: 1001, label: "问题数高于1000"},
],
right: 10,
realtime: false,
@ -328,65 +466,11 @@ const option = ref({
borderColor: "#FF0000", // 高亮时边框颜色
borderWidth: 4 // 高亮时边框宽度
},
data: gobalTempMapVoList.map(item => ({
name: item.name,
value: item.totalPro // 将 totalPro 值映射到 value 字段
}))
data: mapIconList
}
],
})
const option1 = ref({
xAxis: {
type: "category",
boundaryGap: false,
data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月",],
},
yAxis: {
type: "value",
splitLine: {
show: true,
lineStyle: {
color: "#193775",
},
},
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'line',
label: {
backgroundColor: '#6a7985'
}
}
},
series: [
{
type: "line",
smooth: true,
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: [12, 16, 14, 11, 6, 13, 8, 17, 16, 10, 12],
},
],
});
const option2 = {
const ProblemTypeRateChart = ref({
series: [
{
type: "pie",
@ -394,61 +478,14 @@ const option2 = {
label: {
color: "#fff",
},
data: [
{value: 40, name: "着装不规范"},
{value: 25, name: "看守人员睡岗"},
{value: 30, name: "工作人员玩手机"},
{value: 30, name: "单人问询"},
{value: 10, name: "民警不在岗"},
],
data: ProblemTypeRate.value,
},
],
tooltip: {
trigger: "item",
},
};
const data1 = [
{
label: "开福分局",
value: 30
},
{
label: "芙蓉分局",
value: 25
},
{
label: "岳麓分局",
value: 22
},
{
label: "雨花分局",
value: 18
},
{
label: "望城分局",
value: 15
},
{
label: "浏阳分局",
value: 13
},
{
label: "宁乡分局",
value: 11
},
{
label: "长沙县局",
value: 6
},
{
label: "天心分局",
value: 5
},
];
}); // 问题类型占比
// endregion
const colors = [
@ -466,6 +503,8 @@ const colors = [
},
];
</script>
<style lang="scss" scoped>
@import "@/style/datav.scss";
@ -621,4 +660,33 @@ img {
}
.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;
}
</style>
Write Preview
Loading…
Cancel
Save