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. 850
      src/views/datav/RightsComfort.vue
  9. 10
      src/views/datav/SceneInsp.vue
  10. 694
      src/views/datav/Sub1.vue
  11. 514
      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
}
const getConfinementAndPauseList = async (timeValue)=>{
const res = await getConfinementAndPause(timeValue);
jbcloption.value.series[0].data = res.jbclList;
dzcloption.value.series[0].data = res.dzclList;
}
// endregion
getCaseVerifTrend(time.value, 12).then((data) => {
ajhcqxList.value = data.ajhcqsList;
// console.log(ajhcqxList.value)
});
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,12 +496,73 @@ const option1 = ref({
},
]),
},
data: [175, 101, 158, 141, 177, 162, 108, 166, 197, 104],
data: [],
},
],
});
const ajlyPieOption = ref({
series: [
{
type: "pie",
radius: ["40%", "70%"],
label: {
color: "#fff",
},
data: [],
},
],
tooltip: {
trigger: "item",
},
});
const wzclPieOption = ref({
series: [
{
type: "pie",
radius: ["40%", "70%"],
label: {
color: "#fff",
},
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 option4 = {
const jbcloption = ref({
tooltip: {
trigger: "item",
},
@ -622,20 +574,44 @@ const option4 = {
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: "为落实请示报告制度"},
// {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; "

850
src/views/datav/RightsComfort.vue
View File

File diff suppressed because it is too large Load Diff

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(() => {

694
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">
</div>
</el-scrollbar>
<el-scrollbar height="100vh">
<div class="wrapper">
<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')
router.push('/datav/sub2')
}
</script>
<style lang="scss" scoped>
@import "@/style/datav.scss";
</style>

514
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-chart-bar
sub-title="问题数"
:data="data1"
:max="11"
:color="colors"
/>
<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
: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 temp =ref({
tempPro: 0,
tempChangePro: 0,
tempRelationOrg: 0,
tempRelationPre: 0,
tempChangeRate: 0
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)
}
// 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
// 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);
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
}
];
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