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

二级地图数据

main
不爱学习的石同学 1 year ago
parent
50b841e11f
commit
b03ef373de
17 changed files with 803 additions and 904 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. 20
      src/api/data/supervisionNotify.ts
  2. 10
      src/api/screen/gobal.ts
  3. 6
      src/api/screen/subScreen/subOneCaseVerif.ts
  4. 6
      src/api/screen/subScreen/subOneGlobal.ts
  5. 6
      src/api/screen/subScreen/subOneMailVisits.ts
  6. 5
      src/api/screen/subScreen/subOneSupervisionNotify.ts
  7. 15
      src/api/screen/subScreen/subOneVideoSupervise.ts
  8. 8
      src/components/datav/chart-bar.vue
  9. 90
      src/views/datav/Gobal.vue
  10. 2
      src/views/datav/MailVisits.vue
  11. 317
      src/views/datav/SceneInsp.vue
  12. 244
      src/views/datav/VideoInsp.vue
  13. 271
      src/views/datav/subonedatav/SubOneCaseVerif.vue
  14. 155
      src/views/datav/subonedatav/SubOneGlobal.vue
  15. 120
      src/views/datav/subonedatav/SubOneMailVisits.vue
  16. 182
      src/views/datav/subonedatav/SubOneSceneInsp.vue
  17. 250
      src/views/datav/subonedatav/SubOneVideoInsp.vue

20
src/api/data/supervisionNotify.ts
Unescape View File

@ -1,10 +1,14 @@
import request from "@/api/request";
export function getAllSupervisionNotifyCount(times) {
export function getChangedRank(times) {
return request.get({
url: `/datav/supervisonNotify/getChangedRank?beginTime=${times[0]}&endTime=${times[1]}`
});
}
export function getSupervisionNotifyCount(times) {
return request.get({
url: `/datav/supervisonNotify?beginTime=${times[0]}&endTime=${times[1]}`
url: `/datav/supervisonNotify/getSupervisionNotifyCount?beginTime=${times[0]}&endTime=${times[1]}`
});
}
@ -20,11 +24,7 @@ export function getProblemTypeRate(times) {
export function getChangedRank(times, groupType) {
return request.get({
url: `/datav/supervisonNotify/rank?beginTime=${times[0]}&endTime=${times[1]}&groupType=${groupType}`
});
}
/**
* 获取问题趋势数据
*/
@ -39,9 +39,9 @@ export function getSupervisionTrend(year) {
/**
* 获取地图数据
*/
export function getMap(times) {
export function getSupervisionNotifyMap(times) {
return request.get({
url: `/datav/supervisonNotify/getMap?beginTime=${times[0]}&endTime=${times[1]}`
url: `/datav/supervisonNotify/getSupervisionNotifyMap?beginTime=${times[0]}&endTime=${times[1]}`
});
}

10
src/api/data/basicScreen.ts → src/api/screen/gobal.ts
Unescape View File

@ -3,7 +3,7 @@ import request from "@/api/request";
/**
* 信息大屏api
* @author: sh
* @date: 2024-011-7
* @date: 2024-11-7
*/
/*
@ -11,7 +11,7 @@ import request from "@/api/request";
*/
export function getAllGlobalCount(times) {
return request.get({
url: `/datav/dataGlobalScreen?beginTime=${times[0]}&endTime=${times[1]}`
url: `/datav/dataGlobalScreen/getAllGlobalCount?beginTime=${times[0]}&endTime=${times[1]}`
});
}
@ -19,9 +19,9 @@ export function getAllGlobalCount(times) {
/**
* 获取问题趋势数据
*/
export function getGlobalRecentlyTrendByMonth(year) {
export function getGlobalTrend(year) {
return request.get({
url: `/datav/dataGlobalScreen/getGlobalRecentlyTrendByMonth?year=${year}`
url: `/datav/dataGlobalScreen/getGlobalTrend?year=${year}`
});
}
@ -76,7 +76,7 @@ export function getProblemBusinessRate(times) {
export function getGlobalMap(times) {
return request.get({
url: `/datav/dataGlobalScreen/getMap?beginTime=${times[0]}&endTime=${times[1]}`
url: `/datav/dataGlobalScreen/getGlobalMap?beginTime=${times[0]}&endTime=${times[1]}`
});
}

6
src/api/screen/subScreen/subOneCaseVerif.ts
Unescape View File

@ -19,6 +19,12 @@ export function getSubOneAllCaseVerificationCount(departId, times) {
});
}
export function getSubOneCaseVerificationMap(departId, times) {
return request.get({
url: `/datav/sub1/caseVerif/getSubOneCaseVerificationMap?departId=${departId}&beginTime=${times[0]}&endTime=${times[1]}`
});
}
export function getSubOneCaseVerificationTrend(departId, year) {
return request.get({
url: `/datav/sub1/caseVerif/getSubOneCaseVerificationTrend?departId=${departId}&year=${year}`

6
src/api/screen/subScreen/subOneGlobal.ts
Unescape View File

@ -26,6 +26,12 @@ export function getSubOneAllCount(departId, times) {
});
}
export function getSubOneGlobalMap(departId, times) {
return request.get({
url: `/datav/sub1/getSubOneGlobalMap?departId=${departId}&beginTime=${times[0]}&endTime=${times[1]}`
});
}
export function getSubOneGlobalTrend(departId, year) {
return request.get({
url: `/datav/sub1/getSubOneGlobalTrend?departId=${departId}&year=${year}`

6
src/api/screen/subScreen/subOneMailVisits.ts
Unescape View File

@ -10,6 +10,12 @@ export function getSubOneFirstAndRepeatMail(departId, times) {
}
export function getSubOneMailMapIcon(departId, times) {
return request.get({
url: `/datav/sub1/mailVisits/getSubOneMailMapIcon?departId=${departId}&beginTime=${times[0]}&endTime=${times[1]}`
});
}
export function getSubOneMailTrend(departId, year) {
return request.get({
url: `/datav/sub1/mailVisits/getSubOneMailTrend?departId=${departId}&year=${year}`

5
src/api/screen/subScreen/subOneSupervisionNotify.ts
Unescape View File

@ -26,6 +26,11 @@ export function getAllSubOneSupervisionNotifyCount(departId, times) {
});
}
export function getSubOneSupervisionMap(departId, times) {
return request.get({
url: `/datav/sub1/supervisonNotify/getSubOneSupervisionMap?departId=${departId}&beginTime=${times[0]}&endTime=${times[1]}`
});
}
export function getSubOneYellowBetDrug(departId, times) {
return request.get({

15
src/api/screen/subScreen/subOneVideoSupervise.ts
Unescape View File

@ -1,16 +1,25 @@
import request from "@/api/request";
export function getSubOneVideoSuperviseProblemRank(departId,times) {
return request.get({
url: `/datav/sub1/videoSupervise/getSubOneVideoSuperviseProblemRank?departId=${departId}&beginTime=${times[0]}&endTime=${times[1]}`
});
}
export function getSubOneAllVideoSuperviseCount(departId,times) {
return request.get({
url: `/datav/sub1/videoSupervise/getSubOneAllVideoSuperviseCount?departId=${departId}&beginTime=${times[0]}&endTime=${times[1]}`
});
}
export function getSubOneVideoSuperviseProblemRank(departId,times) {
export function getSubOneVideoSuperviseMap(departId,times) {
return request.get({
url: `/datav/sub1/videoSupervise/getSubOneVideoSuperviseProblemRank?departId=${departId}&beginTime=${times[0]}&endTime=${times[1]}`
url: `/datav/sub1/videoSupervise/getSubOneVideoSuperviseMap?departId=${departId}&beginTime=${times[0]}&endTime=${times[1]}`
});
}

8
src/components/datav/chart-bar.vue
Unescape View File

@ -78,7 +78,8 @@ const props = defineProps({
showValue:{
type:Boolean,
default:true
}
},
});
const max = ref(100);
@ -202,5 +203,10 @@ function getColor(val) {
text-align: right;
width: 60px;
}
.dynamic-width {
width: 70%;
}
</style>

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

@ -140,19 +140,18 @@ import * as echarts from "echarts/core";
import moment from "moment/moment";
import {
getBusinessRate,
getGlobalRecentlyTrendByMonth,
getOrganizationRank,
getProblemBusinessRate,
getStrongProblemRate,
getGlobalMap,
getAllGlobalCount
} from "@/api/data/basicScreen.ts";
getAllGlobalCount,
getGlobalTrend
} from "@/api/screen/gobal.ts";
// region 各种变量
const router = useRouter();
const activeOrgTab = ref("1");
const fxsjlist = ref([]); // 分县市区机构问题排名
const fxsjlist = ref([{}]); // 分县市区机构问题排名
const jsdwlist = ref([]); // 局属单位机构问题排名
const ywzblist = ref([]); // 业务类型占比
const wtlxlist = ref([]); // 问题类型占比
@ -185,13 +184,22 @@ const globalTempMapVoList = ref([
const currentYear = new Date().getFullYear();
const years = ref([currentYear.toString(), (currentYear - 1).toString(), (currentYear - 2).toString()]); // 年份列表
const selectedYear = ref('2024'); // 当前选中的年份
const colors = [
{
color: "linear-gradient( 270deg, #FB002D 0%, #822232 100%)",
percentage: 80,
},
{
color: "linear-gradient( 270deg, #FFB90E 0%, #71501D 100%)",
percentage: 60,
},
{
color: "linear-gradient( 270deg, #63E700 0%, #19674C 100%)",
percentage: 40,
},
];
// endregion
function go() {
router.push("/datav/sub1")
}
// region 图表变量
// 业务类型占比
const zfbaPieOption = computed(() => {
@ -415,26 +423,9 @@ const getAllGlobalCountData = async (timeValue = time.value) => {
const res = await getAllGlobalCount(timeValue);
overview.value = res.overview;
}
const getGlobalRecentlyTrendByMonthData = async (year = selectedYear.value) => {
const res = await getGlobalRecentlyTrendByMonth(year);
const globalRecentlyTrendList = res.globalRecentlyTrendList;
const categories = globalRecentlyTrendList.map(item => item.name);
const values = globalRecentlyTrendList.map(item => item.value);
// 更新图表数据
proTrend.value.xAxis.data = categories;
proTrend.value.series[0].data = values;
}
const getStrongProblemRateData = async (timeValue = time.value) => {
const res = await getStrongProblemRate(timeValue);
tcwtlist.value = res.tcwtlist;
}
const getProblemBusinessRateData=async (timeValue=time.value)=>{
const res =await getProblemBusinessRate(timeValue);
wtlxlist.value = res.wtlxlist;
}
const getGlobalMapData= async(timeValue=time.value)=>{
const res =await getGlobalMap(timeValue);
const getGlobalMapData = async (timeValue = time.value) => {
const res = await getGlobalMap(timeValue);
const mappedData = res.globalTempMapVoList.map(item => {
let name;
switch (item.name) {
@ -490,17 +481,34 @@ const getGlobalMapData= async(timeValue=time.value)=>{
{gte: avg + range30Percent, label: "高于平均问题30%", color: "#D34343"},
];
}
// endregion
// region 初始化数据
const getGlobalTrendData = async (year = selectedYear.value) => {
const res = await getGlobalTrend(year);
const globalRecentlyTrendList = res.globalRecentlyTrendList;
const categories = globalRecentlyTrendList.map(item => item.name);
const values = globalRecentlyTrendList.map(item => item.value);
// 更新图表数据
proTrend.value.xAxis.data = categories;
proTrend.value.series[0].data = values;
}
const getStrongProblemRateData = async (timeValue = time.value) => {
const res = await getStrongProblemRate(timeValue);
tcwtlist.value = res.tcwtlist;
}
const getProblemBusinessRateData = async (timeValue = time.value) => {
const res = await getProblemBusinessRate(timeValue);
wtlxlist.value = res.wtlxlist;
}
function getData() {
getOrganizationRankData();
getBusinessRateData();
getAllGlobalCountData();
getGlobalRecentlyTrendByMonthData();
getGlobalMapData();
getGlobalTrendData();
getStrongProblemRateData();
getProblemBusinessRateData();
getGlobalMapData();
}
onMounted(() => {
@ -523,7 +531,6 @@ const handleCommand = (year) => {
watch(time, () => {
getData();
});
const handleClick = (params) => {
const departId = params.data.departId;
const url = router.resolve({
@ -532,24 +539,9 @@ const handleClick = (params) => {
}).href;
window.open(url, "_blank");
}
// endregion
const colors = [
{
color: "linear-gradient( 270deg, #FB002D 0%, #822232 100%)",
percentage: 80,
},
{
color: "linear-gradient( 270deg, #FFB90E 0%, #71501D 100%)",
percentage: 60,
},
{
color: "linear-gradient( 270deg, #63E700 0%, #19674C 100%)",
percentage: 40,
},
];
</script>

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

@ -617,7 +617,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.total}</span></li>

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

@ -788,9 +788,8 @@ import changshaMap from "@/assets/data/changsha.json";
import * as echarts from "echarts/core";
import moment from "moment";
import {
getAllSupervisionNotifyCount,
getChangedRank, getCheckBeer, getCompanyProblem, getGunController, getHandleCase,
getMap, getProblemTypeRate,
getProblemTypeRate, getSupervisionNotifyCount, getSupervisionNotifyMap,
getSupervisionTrend, getYellowBetDrug
} from "@/api/data/supervisionNotify.ts";
import router from "@/router/index.ts";
@ -915,10 +914,26 @@ const messages = ref([
const currentYear = new Date().getFullYear();
const years = ref([currentYear.toString(), (currentYear - 1).toString(), (currentYear - 2).toString()]); // 年份列表
const selectedYear = ref('2024'); // 当前选中的年份
const avg = 1000
const time = ref([
moment().startOf("year").format("YYYY-MM-DD"),
moment().format("YYYY-MM-DD"),
]);
const colors = [
{
color: "linear-gradient( 270deg, #FB002D 0%, #822232 100%)",
percentage: 80,
},
{
color: "linear-gradient( 270deg, #FFB90E 0%, #71501D 100%)",
percentage: 60,
},
{
color: "linear-gradient( 270deg, #63E700 0%, #19674C 100%)",
percentage: 40,
},
];
// endregion
// region 所有图表
const wtlxPieOption = computed(() => {
return {
@ -1095,41 +1110,151 @@ const proTrend = ref({
});
// endregion
// region 所有函数
const getChangedRankData = async () => {
const res = await getChangedRank(time.value);
fxsjRankOverview.value = res.fxsjRankOverview;
jsdwRankOverview.value = res.jsdwRankOverview;
fxsjChangedRankList.value = res.fxsjChangedRankList;
jsdwChangedRankList.value = res.jsdwChangedRankList;
}
const handleCommand = (year) => {
selectedYear.value = year; // 更新当前选中的年份
getSupervisionTrend(year).then(res => {
const supervisionTrend = res.supervisionTrend;
const categories = supervisionTrend.map(item => item.name);
const values = supervisionTrend.map(item => item.value);
// 更新图表数据
proTrend.value.xAxis.data = categories;
proTrend.value.series[0].data = values;
const getProblemTypeRateData = async () => {
const res = await getProblemTypeRate(time.value);
wtlxList.value = res.wtlxList;
}
const getSupervisionNotifyCountData = async () => {
const res = await getSupervisionNotifyCount(time.value);
overview.value = res.overview;
}
const getSupervisionNotifyMapData = async () => {
const res = await getSupervisionNotifyMap(time.value);
const mappedData = res.superviseTempMapVoList.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.totalPro,
};
});
};
const total = mappedData.reduce((sum, item) => sum + Number(item.value), 0);
const avg = total / mappedData.length; // 计算平均值
const range30Percent = avg * 0.3 // 不用取整，小数也可以
option.value.visualMap.pieces = [
{gte: 0, lte: avg - range30Percent, label: "低于平均问题30%", color: "#4987F6"},
{gte: avg - range30Percent, lte: avg + range30Percent, label: "平均问题上下浮动30%内", color: "#F6A149"},
{gte: avg + range30Percent, label: "高于平均问题30%", color: "#D34343"},
];
superviseTempMapVoList.value = mappedData;
option.value.series[0].data = mappedData;
}
const getSupervisionTrendData = async () => {
const res = await getSupervisionTrend(selectedYear.value)
const supervisionTrend = res.supervisionTrend;
const categories = supervisionTrend.map(item => item.name);
const values = supervisionTrend.map(item => item.value);
// 更新图表数据
proTrend.value.xAxis.data = categories;
proTrend.value.series[0].data = values;
}
// region 初始化数据
const time = ref([
moment().startOf("year").format("YYYY-MM-DD"),
moment().format("YYYY-MM-DD"),
]);
const getYellowBetDrugData = async () => {
const res = await getYellowBetDrug(time.value);
fxsjYellowBetOverview.value = res.fxsjYellowBetOverview;
jsdwYellowBetOverview.value = res.jsdwYellowBetOverview;
fxsjYellowBetRankList.value = res.fxsjYellowBetRankList;
jsdwYellowBetRankList.value = res.jsdwYellowBetRankList;
}
const getGunControllerData = async () => {
const res = await getGunController(time.value)
fxsjGunControllerOverview.value = res.fxsjGunControllerOverview;
jsdwGunControllerOverview.value = res.jsdwGunControllerOverview;
fxsjGunControllerRankList.value = res.fxsjGunControllerRankList;
jsdwGunControllerRankList.value = res.jsdwGunControllerRankList;
}
const getCompanyProblemData = async () => {
const res = await getCompanyProblem(time.value)
fxsjCompanyProblemOverview.value = res.fxsjCompanyProblemOverview;
jsdwCompanyProblemOverview.value = res.jsdwCompanyProblemOverview;
fxsjCompanyProblemRankList.value = res.fxsjCompanyProblemRankList;
jsdwCompanyProblemRankList.value = res.jsdwCompanyProblemRankList;
// 地图临时测试数据
}
const getHandleCaseData = async () => {
const res = await getHandleCase(time.value)
fxsjHandleCaseOverview.value = res.fxsjHandleCaseOverview;
jsdwHandleCaseOverview.value = res.jsdwHandleCaseOverview;
fxsjHandleCaseRankList.value = res.fxsjHandleCaseRankList;
jsdwHandleCaseRankList.value = res.jsdwHandleCaseRankList;
}
const getCheckBeerData = async () => {
const res = await getCheckBeer(time.value);
fxsjCheckBeerOverview.value = res.fxsjCheckBeerOverview;
jsdwCheckBeerOverview.value = res.jsdwCheckBeerOverview;
fxsjCheckBeerRankList.value = res.fxsjCheckBeerRankList;
jsdwCheckBeerRankList.value = res.jsdwCheckBeerRankList;
}
const getData = async () => {
getAllSupervisionNotifyCount(time.value).then((res) => {
overview.value= res.overview;
});
getChangedRankData();
getProblemTypeRateData();
getSupervisionNotifyCountData();
getSupervisionNotifyMapData();
getSupervisionTrendData();
getYellowBetDrugData();
getGunControllerData();
getCompanyProblemData();
getHandleCaseData();
getCheckBeerData();
}
getChangedRank(time.value, 3).then((res) => {
fxsjRankOverview.value = res.fxsjRankOverview;
jsdwRankOverview.value = res.jsdwRankOverview;
fxsjChangedRankList.value = res.fxsjChangedRankList;
jsdwChangedRankList.value = res.jsdwChangedRankList;
// console.log(fxsjChangedRankList.value);
});
onMounted(() => {
getData();
});
// endregion
getSupervisionTrend(new Date().getFullYear()).then((res) => {
// region 事件
watch(time, () => {
getData();
});
const handleCommand = (year) => {
selectedYear.value = year; // 更新当前选中的年份
getSupervisionTrend(year).then(res => {
const supervisionTrend = res.supervisionTrend;
const categories = supervisionTrend.map(item => item.name);
const values = supervisionTrend.map(item => item.value);
@ -1137,133 +1262,8 @@ const getData = async () => {
proTrend.value.xAxis.data = categories;
proTrend.value.series[0].data = values;
});
};
getMap(time.value).then((res) => {
// 对返回的数据映射处理
const mappedData = res.superviseTempMapVoList.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.totalPro,
};
});
const total = mappedData.reduce((sum, item) => sum + Number(item.value), 0);
const avg = total / mappedData.length; // 计算平均值
const range30Percent = avg*0.3 // 不用取整，小数也可以
option.value.visualMap.pieces = [
{gte: 0, lte: avg - range30Percent, label: "低于平均问题30%", color: "#4987F6"},
{gte: avg - range30Percent, lte: avg + range30Percent, label: "平均问题上下浮动30%内", color: "#F6A149"},
{gte: avg + range30Percent, label: "高于平均问题30%", color: "#D34343"},
];
superviseTempMapVoList.value = mappedData;
option.value.series[0].data = mappedData;
})
getProblemTypeRate(time.value).then((res) => {
wtlxList.value = res.wtlxList
});
getYellowBetDrug(time.value).then((res) => {
fxsjYellowBetOverview.value = res.fxsjYellowBetOverview
jsdwYellowBetOverview.value = res.jsdwYellowBetOverview
fxsjYellowBetRankList.value = res.fxsjYellowBetRankList
jsdwYellowBetRankList.value = res.jsdwYellowBetRankList
// hddOverview.value = res.hddOverview;
// hddList.value = res.hddList
});
getGunController(time.value).then((res) => {
fxsjGunControllerOverview.value = res.fxsjGunControllerOverview
jsdwGunControllerOverview.value = res.jsdwGunControllerOverview
fxsjGunControllerRankList.value = res.fxsjGunControllerRankList
jsdwGunControllerRankList.value = res.jsdwGunControllerRankList
})
getCompanyProblem(time.value).then((res) => {
fxsjCompanyProblemOverview.value = res.fxsjCompanyProblemOverview
jsdwCompanyProblemOverview.value = res.jsdwCompanyProblemOverview
fxsjCompanyProblemRankList.value = res.fxsjCompanyProblemRankList
jsdwCompanyProblemRankList.value = res.jsdwCompanyProblemRankList
})
getHandleCase(time.value).then((res) => {
fxsjHandleCaseOverview.value = res.fxsjHandleCaseOverview
jsdwHandleCaseOverview.value = res.jsdwHandleCaseOverview
fxsjHandleCaseRankList.value = res.fxsjHandleCaseRankList
jsdwHandleCaseRankList.value = res.jsdwHandleCaseRankList
})
getCheckBeer(time.value).then((res) => {
fxsjCheckBeerOverview.value = res.fxsjCheckBeerOverview
jsdwCheckBeerOverview.value = res.jsdwCheckBeerOverview
fxsjCheckBeerRankList.value = res.fxsjCheckBeerRankList
jsdwCheckBeerRankList.value = res.jsdwCheckBeerRankList
})
}
watch(time, () => {
getData();
});
onMounted(() => {
getData();
});
const colors = [
{
color: "linear-gradient( 270deg, #FB002D 0%, #822232 100%)",
percentage: 80,
},
{
color: "linear-gradient( 270deg, #FFB90E 0%, #71501D 100%)",
percentage: 60,
},
{
color: "linear-gradient( 270deg, #63E700 0%, #19674C 100%)",
percentage: 40,
},
];
// endregion
const handleClick = (params) => {
const departId = params.data.departId;
const url = router.resolve({
@ -1272,6 +1272,7 @@ const handleClick = (params) => {
}).href;
window.open(url, "_blank");
}
// endregion
</script>

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

@ -198,14 +198,13 @@ import {
getVideoSuperviseProblemRank, getVideoSuperviseMap, getVideoSuperviseTrend
} from "@/api/screen/videoSupervise.ts";
import moment from "moment/moment.js";
// region 所有变量
const router = useRouter();
const time = ref([
moment().startOf("year").format("YYYY-MM-DD"),
moment().format("YYYY-MM-DD"),
]);
const fxsjRankList = ref([]);
const jsdwRankList = ref([]);
@ -229,115 +228,22 @@ const mapIconList = 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,
};
});
const total = mappedData.reduce((sum, item) => sum + Number(item.value), 0);
const avg = total / mappedData.length; // 计算平均值
const range30Percent = avg*0.3 // 不用取整，小数也可以
mapIconList.value = mappedData
option.value.series[0].data = mapIconList
option.value.visualMap.pieces = [
{gte: 0, lte: avg - range30Percent, label: "低于平均问题30%", color: "#4987F6"},
{gte: avg - range30Percent, lte: avg + range30Percent+0.1, label: "平均问题上下浮动30%内", color: "#F6A149"},
{gte: avg + range30Percent, label: "高于平均问题30%", color: "#D34343"},
];
}
const getProblemTypeRate = async (timeValue) => {
const res = await getVideoSuperviseProblemTypeRate(timeValue);
ProblemTypeRateChart.value.series[0].data = 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);
getRankList(time.value)
getMap(time.value)
getTrend(selectedYear.value)
getProblemTypeRate(time.value);
}
// endregion
// region 初始化数据和事件监听
watch(time, () => {
getData()
})
onMounted(() => {
getData()
})
const handleCommand = (year) => {
selectedYear.value = year; // 更新当前选中的年份
getTrend(selectedYear.value)
};
const colors = [
{
color: "linear-gradient( 270deg, #FB002D 0%, #822232 100%)",
percentage: 80,
},
{
color: "linear-gradient( 270deg, #FFB90E 0%, #71501D 100%)",
percentage: 60,
},
{
color: "linear-gradient( 270deg, #63E700 0%, #19674C 100%)",
percentage: 40,
},
];
// endregion
// region 所有图表
const proTrend = ref({
xAxis: {
@ -506,30 +412,120 @@ const ProblemTypeRateChart = ref({
}); // 问题类型占比
// endregion
// region 所有函数
const getVideoSuperviseProblemRankData = async (timeValue) => {
const res = await getVideoSuperviseProblemRank(timeValue);
fxsjRankList.value = res.fxsjVideoSuperviseProblemRankList
jsdwRankList.value = res.jsdwVideoSuperviseProblemRankList
}
const getAllVideoSuperviseCountData = async (timeValue) => {
const res = await getAllVideoSuperviseCount(timeValue);
overview.value = res.overview;
}
const getVideoSuperviseMapData = 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,
};
});
const total = mappedData.reduce((sum, item) => sum + Number(item.value), 0);
const avg = total / mappedData.length; // 计算平均值
const range30Percent = avg*0.3 // 不用取整，小数也可以
mapIconList.value = mappedData
option.value.series[0].data = mapIconList
option.value.visualMap.pieces = [
{gte: 0, lte: avg - range30Percent, label: "低于平均问题30%", color: "#4987F6"},
{gte: avg - range30Percent, lte: avg + range30Percent+0.1, label: "平均问题上下浮动30%内", color: "#F6A149"},
{gte: avg + range30Percent, label: "高于平均问题30%", color: "#D34343"},
];
}
const getVideoSuperviseTrendData = 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 getVideoSuperviseProblemTypeRateData = async (timeValue) => {
const res = await getVideoSuperviseProblemTypeRate(timeValue);
ProblemTypeRateChart.value.series[0].data = res.videoSuperviseProblemTypeRate
}
const getData = async () => {
getVideoSuperviseProblemRankData(time.value)
getAllVideoSuperviseCountData(time.value);
getVideoSuperviseMapData(time.value)
getVideoSuperviseTrendData(selectedYear.value)
getVideoSuperviseProblemTypeRateData(time.value);
}
// endregion
// region 事件||监听
watch(time, () => {
getData()
})
onMounted(() => {
getData()
})
const handleCommand = (year) => {
selectedYear.value = year; // 更新当前选中的年份
getVideoSuperviseTrendData(selectedYear.value)
};
const handleClick = (params) => {
const departId = params.data.departId;
const url = router.resolve({
const url = router.resolve({
path: "/datav/subOneVideoInsp",
query: {departId: departId},
}).href;
window.open(url, "_blank");
}
// endregion
const colors = [
{
color: "linear-gradient( 270deg, #FB002D 0%, #822232 100%)",
percentage: 80,
},
{
color: "linear-gradient( 270deg, #FFB90E 0%, #71501D 100%)",
percentage: 60,
},
{
color: "linear-gradient( 270deg, #63E700 0%, #19674C 100%)",
percentage: 40,
},
];
</script>

271
src/views/datav/subonedatav/SubOneCaseVerif.vue
Unescape View File

@ -177,10 +177,11 @@ import moment from "moment";
import {getSubOneStreetMap} from "@/api/screen/subScreen/subOneGlobal.ts";
import {
getSubOneAllCaseVerificationCount,
getSubOneCaseProblemProperty, getSubOneCaseSourceRateAndDealSituation,
getSubOneCaseProblemProperty, getSubOneCaseSourceRateAndDealSituation, getSubOneCaseVerificationMap,
getSubOneCaseVerificationRank, getSubOneCaseVerificationTrend
} from "@/api/screen/subScreen/subOneCaseVerif.ts";
// region 所有变量
const currentYear = new Date().getFullYear();
const years = ref([currentYear.toString(), (currentYear - 1).toString(), (currentYear - 2).toString()]); // 年份列表
const selectedYear = ref(currentYear); // 当前选中的年份
@ -202,155 +203,36 @@ const overview = ref({
punishOrg: 0, // 问责单位数、
rate: 0, // 查实率
});
let gobalTempMapVoList = ref([]);
// region 事件||监听
const handleCommand = ( year) => {
selectedYear.value = year; // 更新当前选中的年份
getProTrendList(currentDepartId,year);
};
watch(time, () => {
getData();
});
onMounted(() => {
getData();
});
// endregion
// region 所有函数
const getMapJSON = async (departId) => {
const res = await getSubOneStreetMap(departId);
currentMapData.value = res;
echarts.registerMap("changsha", res);
chart.value.chart.setOption(option.value);
}
const getRankListData = async(departId, timeValue) => {
const res = await getSubOneCaseVerificationRank(departId, timeValue);
fxsjBarList.value = res.fxsjRankList
jsdwBarList.value = res.jsdwRankList
}
const getCaseProblemPropertyList = async(departId, timeValue) => {
const res = await getSubOneCaseProblemProperty(departId,timeValue);
zfbaPieOption.value.series[0].data = res.zfbaPieList;
fwglPieOption.value.series[0].data = res.fwglPieList;
}
const getOverview = async(departId, timeValue)=>{
const res = await getSubOneAllCaseVerificationCount(departId, 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
// const total = mappedData.reduce((sum, item) => sum + Number(item.value), 0);
// const avg = total / mappedData.length; // 计算平均值
// const range30Percent = avg*0.3 // 不用取整，小数也可以
// option.value.series[0].data = mappedData;
// option.value.visualMap.pieces = [
// {gte: 0, lte: avg - range30Percent, label: "低于平均问题30%", color: "#4987F6"},
// {gte: avg - range30Percent, lte: avg + range30Percent+0.1, label: "平均问题上下浮动30%内", color: "#F6A149"},
// {gte: avg + range30Percent, label: "高于平均问题30%", color: "#D34343"},
// ];
}
const getProTrendList= async(departId, year) => {
const res = await getSubOneCaseVerificationTrend(departId, 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 (departId, timeValue)=>{
const res = await getSubOneCaseSourceRateAndDealSituation(departId, 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;
// tzcloption.value.series[0].data = res.dzclList;
// }
function getData() {
getMapJSON(currentDepartId)
getRankListData(currentDepartId,time.value)
getCaseProblemPropertyList(currentDepartId,time.value)
getOverview(currentDepartId,time.value)
getProTrendList(currentDepartId,currentYear)
getCaseSourceAndDeal(currentDepartId,time.value)
}
const gobalTempMapVoList = ref([]);
const colors = [
{
color: "linear-gradient( 270deg, #FB002D 0%, #822232 100%)",
percentage: 80,
},
{
color: "linear-gradient( 270deg, #FFB90E 0%, #71501D 100%)",
percentage: 60,
},
{
color: "linear-gradient( 270deg, #63E700 0%, #19674C 100%)",
percentage: 40,
},
];
// endregion
// region 所有图表
echarts.registerMap("changsha", changshaMap);
const option = ref({
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 ) {
const dataItem = gobalTempMapVoList.value.find(item => item.name === params.name) || {}; // 找到对应的数据项
console.log("Data item:", dataItem);
if (dataItem.name===params.name ) {
return `
<div class="tooltip">
<div class="tooltip-title">${dataItem.originalName}</div>
<div class="tooltip-title">${params.name}</div>
<div class="tooltip-content">
<ul class="tooltip-ul" >
<li>案件总数（起）<span>${dataItem.total}</span></li>
@ -378,13 +260,6 @@ const option = ref({
</div>`;
}
},
// backgroundColor: "#031577", //
// borderColor: "#0A2F86",
// borderWidth: 0, // 设置边框宽度为1像素
// borderRadius: 3, // 设置边框半径为3像素
// shadowBlur: 0, // 设置阴影模糊程度为8像素
// shadowOffsetX: 0, // 设置水平阴影位移量为0像素
// shadowOffsetY: 0, // 设置垂直阴影位移量为6像素
},
visualMap: {
type: "piecewise",
@ -611,20 +486,94 @@ const tzcloption = ref({
},
],
});
const colors = [
{
color: "linear-gradient( 270deg, #FB002D 0%, #822232 100%)",
percentage: 80,
},
{
color: "linear-gradient( 270deg, #FFB90E 0%, #71501D 100%)",
percentage: 60,
},
{
color: "linear-gradient( 270deg, #63E700 0%, #19674C 100%)",
percentage: 40,
},
];
// endregion
// region 所有函数
const getMapJSON = async (departId) => {
const res = await getSubOneStreetMap(departId);
currentMapData.value = res;
echarts.registerMap("changsha", res);
chart.value.chart.setOption(option.value);
}
const getRankListData = async(departId, timeValue) => {
const res = await getSubOneCaseVerificationRank(departId, timeValue);
fxsjBarList.value = res.fxsjRankList
jsdwBarList.value = res.jsdwRankList
}
const getCaseProblemPropertyList = async(departId, timeValue) => {
const res = await getSubOneCaseProblemProperty(departId,timeValue);
zfbaPieOption.value.series[0].data = res.zfbaPieList;
fwglPieOption.value.series[0].data = res.fwglPieList;
}
const getOverview = async(departId, timeValue)=>{
const res = await getSubOneAllCaseVerificationCount(departId, timeValue)
overview.value = res.overview
}
const getMapIcon = async(departId, timeValue)=> {
const res = await getSubOneCaseVerificationMap(departId,timeValue);
const mappedData = res.caseVerificationMapList.map(item => {
return {
...item,
value: item.total,
};
});
gobalTempMapVoList.value = mappedData
const total = mappedData.reduce((sum, item) => sum + Number(item.value), 0);
const avg = total / mappedData.length; // 计算平均值
const range30Percent = avg*0.3 // 不用取整，小数也可以
option.value.series[0].data = mappedData;
option.value.visualMap.pieces = [
{gte: 0, lte: avg - range30Percent, label: "低于平均问题30%", color: "#4987F6"},
{gte: avg - range30Percent, lte: avg + range30Percent+0.1, label: "平均问题上下浮动30%内", color: "#F6A149"},
{gte: avg + range30Percent, label: "高于平均问题30%", color: "#D34343"},
];
}
const getProTrendList= async(departId, year) => {
const res = await getSubOneCaseVerificationTrend(departId, 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 (departId, timeValue)=>{
const res = await getSubOneCaseSourceRateAndDealSituation(departId, 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;
// tzcloption.value.series[0].data = res.dzclList;
// }
function getData() {
getMapJSON(currentDepartId)
getRankListData(currentDepartId,time.value)
getCaseProblemPropertyList(currentDepartId,time.value)
getOverview(currentDepartId,time.value)
getMapIcon(currentDepartId,time.value)
getProTrendList(currentDepartId,currentYear)
getCaseSourceAndDeal(currentDepartId,time.value)
}
onMounted(() => {
getData();
});
// endregion
// region 事件||监听
const handleCommand = ( year) => {
selectedYear.value = year; // 更新当前选中的年份
getProTrendList(currentDepartId,year);
};
watch(time, () => {
getData();
});
// endregion
</script>

155
src/views/datav/subonedatav/SubOneGlobal.vue
Unescape View File

@ -139,13 +139,13 @@ import changshaMap from "@/assets/data/changsha.json";
import * as echarts from "echarts/core";
import moment from "moment/moment";
import {
getGlobalRecentlyTrendByMonth,
} from "@/api/data/basicScreen.ts";
import {getSubOneStreetMap} from "@/api/screen/subScreen/subOneGlobal.ts";
import {
getSubOneStreetMap,
getSubOneAllCount,
getSubOneBusinessRate,
getSubOneOrganizationRank, getSubOneProblemBusinessRate, getSubOneStrongProblemRate,getSubOneGlobalTrend
getSubOneOrganizationRank,
getSubOneProblemBusinessRate,
getSubOneStrongProblemRate,
getSubOneGlobalTrend, getSubOneGlobalMap
} from "@/api/screen/subScreen/subOneGlobal.ts";
// region 各种变量
@ -172,22 +172,25 @@ const time = ref([
moment().startOf("year").format("YYYY-MM-DD"),
moment().format("YYYY-MM-DD"),
]); // 时间范围
const globalTempMapVoList = ref([
{
"name": "天心分局",
"totalPro": 11,
"supervisePro": 11,
"caseVerifyPro": 11,
"mailPro": 11,
"policePro": 11,
"reviewPro": 11,
"value": 200
}
]); // 地图临时数据
const globalTempMapVoList = ref([]); // 地图临时数据
const currentYear = new Date().getFullYear();
const years = ref([currentYear.toString(), (currentYear - 1).toString(), (currentYear - 2).toString()]); // 年份列表
const selectedYear = ref('2024'); // 当前选中的年份
const colors = [
{
color: "linear-gradient( 270deg, #FB002D 0%, #822232 100%)",
percentage: 80,
},
{
color: "linear-gradient( 270deg, #FFB90E 0%, #71501D 100%)",
percentage: 60,
},
{
color: "linear-gradient( 270deg, #63E700 0%, #19674C 100%)",
percentage: 40,
},
];
// endregion
@ -243,12 +246,12 @@ const option = ref({
tooltip: {
trigger: 'item',
formatter: function (params) {
// console.log(params);
const dataItem = globalTempMapVoList.value.find(item => item.name.includes(params.name.substring(0, 2)));
if (dataItem) {
const dataItem = globalTempMapVoList.value.find(item => item.name === params.name) || {}; // 找到对应的数据项
console.log("Data item:", dataItem);
if (dataItem.name === params.name) {
return `
<div class="tooltip">
<div class="tooltip-title">${dataItem.originalName}</div>
<div class="tooltip-title">${params.name}</div>
<div class="tooltip-content">
<ul class="tooltip-ul" >
<li>问题总数 <span>${dataItem.totalPro}</span></li>
@ -259,28 +262,26 @@ const option = ref({
<li>审计督察问题 <span>${dataItem.reviewPro}</span></li>
</ul>
</div>
</div>
</div>`;
} else {
return `
<div class="tooltip">
<div class="tooltip-title">${dataItem.originalName}</div>
<div class="tooltip-title">${params.name}</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>
<ul class="tooltip-ul"">
<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>
</div>`;
}
},
// backgroundColor: "#031577", //
// borderColor: "#0A2F86",
borderWidth: 0, // 设置边框宽度为1像素
borderRadius: 3, // 设置边框半径为3像素
shadowBlur: 0, // 设置阴影模糊程度为8像素
@ -400,29 +401,45 @@ const proTrend = ref({
// endregion
// region 所有函数
const getMapJSON = async (departId) => {
const getMapJSON = async (departId = currentDepartId) => {
const res = await getSubOneStreetMap(departId);
currentMapData.value = res;
echarts.registerMap("changsha", res);
chart.value.chart.setOption(option.value);
}
const getOrganizationProRankData = async (departId, timeValue = time.value) => {
const getOrganizationProRankData = async (departId = currentDepartId, timeValue = time.value) => {
const res = await getSubOneOrganizationRank(departId, timeValue);
fxsjlist.value = res.fxsjlist;
jsdwlist.value = res.jsdwlist;
}
const getBusinessRateData = async (departId, timeValue = time.value) => {
const getBusinessRateData = async (departId = currentDepartId, timeValue = time.value) => {
const res = await getSubOneBusinessRate(departId, timeValue);
ywzblist.value = res.ywzblist;
}
const getAllGlobalCountData = async (departId, timeValue = time.value) => {
const getAllGlobalCountData = async (departId = currentDepartId, timeValue = time.value) => {
const res = await getSubOneAllCount(departId, timeValue);
overview.value = res.overview;
}
const getSubOneGlobalTrendData =async (departId, year)=>{
const getSubOneGlobalMapIcon = async (departId = currentDepartId, timeValue = time.value) => {
const res = await getSubOneGlobalMap(departId, timeValue)
const mappedData = res.globalTempMapVoList.map(item => {
return {
...item,
value: item.totalPro,
};
});
const total = mappedData.reduce((sum, item) => sum + Number(item.value), 0);
const avg = total / mappedData.length; // 计算平均值
const range30Percent = avg * 0.3 // 不用取整，小数也可以
globalTempMapVoList.value = mappedData;
option.value.series[0].data = globalTempMapVoList;
option.value.visualMap.pieces = [
{gte: 0, lte: avg - range30Percent, label: "低于平均问题30%", color: "#4987F6"},
{gte: avg - range30Percent, lte: avg + range30Percent + 0.1, label: "平均问题上下浮动30%内", color: "#F6A149"},
{gte: avg + range30Percent, label: "高于平均问题30%", color: "#D34343"},
];
}
const getSubOneGlobalTrendData = async (departId = currentDepartId, year) => {
const res = await getSubOneGlobalTrend(departId, year);
const categories = res.globalRecentlyTrendList.map(item => item.name);
const values = res.globalRecentlyTrendList.map(item => item.value);
@ -430,74 +447,44 @@ const getSubOneGlobalTrendData =async (departId, year)=>{
proTrend.value.xAxis.data = categories;
proTrend.value.series[0].data = values;
}
const getSubOneStrongProblemRateData = async (departId, timeValue = time.value) => {
const getSubOneStrongProblemRateData = async (departId = currentDepartId, timeValue = time.value) => {
const res = await getSubOneStrongProblemRate(departId, timeValue);
tcwtlist.value = res.tcwtlist;
}
const getSubOneProblemBusinessRateData = async (departId, timeValue = time.value) => {
const res = await getSubOneProblemBusinessRate(departId,timeValue);
const getSubOneProblemBusinessRateData = async (departId = currentDepartId, timeValue = time.value) => {
const res = await getSubOneProblemBusinessRate(departId, timeValue);
wtlxlist.value = res.wtlxlist;
}
// endregion
// region 初始化数据
onMounted(() => {
const getData = () => {
getOrganizationProRankData(currentDepartId, time.value);
getBusinessRateData(currentDepartId, time.value);
getAllGlobalCountData(currentDepartId, time.value);
getSubOneGlobalMapIcon(currentDepartId, time.value);
getSubOneGlobalTrendData(currentDepartId, selectedYear.value);
getSubOneStrongProblemRateData(currentDepartId, time.value);
getSubOneProblemBusinessRateData(currentDepartId, time.value);
getMapJSON(currentDepartId);
};
onMounted(() => {
getData()
});
// endregion
// region 事件||监听
// region 事件||监听
const handleCommand = (year) => {
selectedYear.value = year; // 更新当前选中的年份
getGlobalRecentlyTrendByMonth(year).then(res => {
const globalRecentlyTrendList = res.globalRecentlyTrendList;
const categories = globalRecentlyTrendList.map(item => item.name);
const values = globalRecentlyTrendList.map(item => item.value);
// 更新图表数据
proTrend.value.xAxis.data = categories;
proTrend.value.series[0].data = values;
});
getSubOneGlobalTrendData(currentDepartId, selectedYear.value);
};
watch(time, () => {
getData();
});
const handleClick = (params) => {
const departId = params.data.departId;
const url = router.resolve({
path: "/datav/sub1",
query: {departId: departId},
}).href;
window.open(url, "_blank");
}
// endregion
const colors = [
{
color: "linear-gradient( 270deg, #FB002D 0%, #822232 100%)",
percentage: 80,
},
{
color: "linear-gradient( 270deg, #FFB90E 0%, #71501D 100%)",
percentage: 60,
},
{
color: "linear-gradient( 270deg, #63E700 0%, #19674C 100%)",
percentage: 40,
},
];
</script>

120
src/views/datav/subonedatav/SubOneMailVisits.vue
Unescape View File

@ -52,6 +52,7 @@
size="large"
:max="11"
:color="colors"
label-width="110"
/>
</el-scrollbar>
</datav-tab-item>
@ -62,6 +63,7 @@
:max="11"
size="large"
:color="colors"
label-width="110"
/>
</el-scrollbar>
</datav-tab-item>
@ -71,6 +73,7 @@
:data="fxsjLeaderViewMailList"
:max="11"
size="large"
label-width="110"
/>
</el-scrollbar>
</datav-tab-item>
@ -86,6 +89,7 @@
<datav-chart-bar
:data="bwzdFirstMailList"
size="large"
label-width="110"
/>
</el-scrollbar>
</datav-tab-item>
@ -95,6 +99,7 @@
:data="bwzdRepeatMailList"
:max="11"
size="large"
label-width="110"
/>
</el-scrollbar>
</datav-tab-item>
@ -104,6 +109,7 @@
:data="bwzdLeaderViewMailList"
:max="11"
size="large"
label-width="110"
/>
</el-scrollbar>
</datav-tab-item>
@ -257,6 +263,7 @@
size="large"
:max="11"
:color="colors"
label-width="110"
/>
</el-scrollbar>
</datav-tab-item>
@ -267,6 +274,7 @@
:max="11"
size="large"
:color="colors"
label-width="110"
/>
</el-scrollbar>
</datav-tab-item>
@ -277,6 +285,7 @@
:max="11"
size="large"
:color="colors"
label-width="110"
/>
</el-scrollbar>
</datav-tab-item>
@ -291,6 +300,7 @@
<datav-chart-bar
:data="bwzdLeaderReviewMailList"
size="large"
label-width="110"
/>
</el-scrollbar>
</datav-tab-item>
@ -300,6 +310,7 @@
:data="bwzdEntanglementMailList"
:max="11"
size="large"
label-width="110"
/>
</el-scrollbar>
</datav-tab-item>
@ -310,6 +321,7 @@
:max="11"
size="large"
:color="colors"
label-width="110"
/>
</el-scrollbar>
</datav-tab-item>
@ -354,7 +366,7 @@ import {getSubOneStreetMap} from "@/api/screen/subScreen/subOneGlobal.ts";
import {
getSubOneEntanglementAndMassMail,
getSubOneFirstAndRepeatMail,
getSubOneAllMailCount, getSubOneMailTrend
getSubOneAllMailCount, getSubOneMailTrend, getSubOneMailMapIcon
} from "@/api/screen/subScreen/subOneMailVisits.ts";
@ -415,6 +427,21 @@ const route = useRoute();
const currentMapData = ref({})
const chart = ref(null); // 地图
const currentDepartId = route.query.departId;
const colors = [
{
color: "linear-gradient( 270deg, #FB002D 0%, #822232 100%)",
percentage: 80,
},
{
color: "linear-gradient( 270deg, #FFB90E 0%, #71501D 100%)",
percentage: 60,
},
{
color: "linear-gradient( 270deg, #63E700 0%, #19674C 100%)",
percentage: 40,
},
];
//endregion
// region 所有函数
@ -480,49 +507,11 @@ const getSubOneEntangleMassRankData = async (depart = currentDepartId, timeValue
}
const mailMapIconList = ref([]);
const getMailMapIconList = async (timeValue = time.value) => {
const res = await getMailMapIcon(timeValue);
const getMailMapIconListData = async (departId = currentDepartId, timeValue = time.value) => {
const res = await getSubOneMailMapIcon(departId, timeValue);
const mappedData = res.mailMapIconList.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,
};
});
@ -542,21 +531,12 @@ const getData = () => {
getMapJSON();
getSubOneFirstAndRepeatMailRankData();
getOverviewData();
getMailMapIconListData();
getTrendData();
getSubOneEntangleMassRankData();
// getOverview();
// getMailMapIconList()
// getTrend();
// getEntangleMassRank();
}
const currentOverview = computed(() => {
return activeTab.value === '1' ? fxjsFirstAndRepeatOverview.value : bwzdFirstAndRepeatOverview.value;
});
const currentRightOverview = computed(() => {
return activeTabRight.value === '1' ? fxsjMailEntanglementMassOverview.value : bwzdMailEntanglementMassOverview.value;
});
// endregion
@ -619,22 +599,18 @@ const gobalTempMapVoList = [
"numTotal": 44,
}
];
// const gobalTempMapVoList=[]
const option = ref({
geo: {
map: "changsha",
},
tooltip: {
trigger: 'item',
formatter: function (params) {
console.log(params)
const dataItem = mailMapIconList.value.find(item => item.name.includes(params.name.substring(0, 2)));
if (dataItem) {
const dataItem = mailMapIconList.value.find(item => item.name === params.name) || {}; // 找到对应的数据项
// console.log("Data item:", dataItem);
console.log("Data item:", mailMapIconList.value);
if (dataItem.name===params.name ) {
return `
<div class="tooltip">
<div class="tooltip-title">${dataItem.name}</div>
<div class="tooltip-title">${params.name}</div>
<div class="tooltip-content">
<ul class="tooltip-ul" >
<li>信访总件数 <span>${dataItem.total}</span></li>
@ -687,6 +663,7 @@ const option = ref({
type: "map",
map: "changsha",
hoverAnimation: true,
roam: true,
label: {
show: true,
color: "white",
@ -1006,6 +983,7 @@ const option3 = {
// endregion
// region 事件||计算属性||监听
const handleCommand = (year) => {
selectedYear.value = year;
getTrendData()
@ -1021,21 +999,13 @@ onMounted(() => {
// console.log("Active Tab: ", activeMailTab.value);
// }, 3000); // 每3秒切换一次
});
const colors = [
{
color: "linear-gradient( 270deg, #FB002D 0%, #822232 100%)",
percentage: 80,
},
{
color: "linear-gradient( 270deg, #FFB90E 0%, #71501D 100%)",
percentage: 60,
},
{
color: "linear-gradient( 270deg, #63E700 0%, #19674C 100%)",
percentage: 40,
},
];
const currentOverview = computed(() => {
return activeTab.value === '1' ? fxjsFirstAndRepeatOverview.value : bwzdFirstAndRepeatOverview.value;
});
const currentRightOverview = computed(() => {
return activeTabRight.value === '1' ? fxsjMailEntanglementMassOverview.value : bwzdMailEntanglementMassOverview.value;
});
// endregion
</script>

182
src/views/datav/subonedatav/SubOneSceneInsp.vue
Unescape View File

@ -796,7 +796,7 @@ import {getSubOneStreetMap} from "@/api/screen/subScreen/subOneGlobal.ts";
import {
getAllSubOneSupervisionNotifyCount,
getSubOneChangedRank, getSubOneCheckBeer, getSubOneCompanyProblem, getSubOneGunController, getSubOneHandleCase,
getSubOneProblemTypeRate,
getSubOneProblemTypeRate, getSubOneSupervisionMap,
getSubOneSupervisionTrend, getSubOneYellowBetDrug
} from "@/api/screen/subScreen/subOneSupervisionNotify.ts";
@ -921,45 +921,43 @@ const messages = ref([
const currentYear = new Date().getFullYear();
const years = ref([currentYear.toString(), (currentYear - 1).toString(), (currentYear - 2).toString()]); // 年份列表
const selectedYear = ref('2024'); // 当前选中的年份
const avg = 1000
const subOneSceneInspMapChart = ref(null); // 地图
const route = useRoute();
const currentDepartId = route.query.departId;
const time = ref([
moment().startOf("year").format("YYYY-MM-DD"),
moment().format("YYYY-MM-DD"),
]);
const colors = [
{
color: "linear-gradient( 270deg, #FB002D 0%, #822232 100%)",
percentage: 80,
},
{
color: "linear-gradient( 270deg, #FFB90E 0%, #71501D 100%)",
percentage: 60,
},
{
color: "linear-gradient( 270deg, #63E700 0%, #19674C 100%)",
percentage: 40,
},
];
// endregion
// region 所有图表
const wtlxPieOption = computed(() => {
return {
tooltip: {
trigger: "item",
},
series: [
{
type: "pie",
radius: ["40%", "70%"],
label: {
color: "#fff",
},
data: wtlxList.value,
},
],
};
});
echarts.registerMap("changsha", changshaMap);
const superviseTempMapVoList = ref([]);
const option = ref({
tooltip: {
trigger: 'item',
formatter: function (params) {
console.log(params)
const dataItem = superviseTempMapVoList.value.find(item => item.name.includes(params.name.substring(0, 2)));
if (dataItem) {
const dataItem = superviseTempMapVoList.value.find(item => item.name === params.name) || {}; // 找到对应的数据项
console.log("Data item:", dataItem);
if (dataItem.name===params.name ) {
return `
<div class="tooltip">
<div class="tooltip-title">${dataItem.originalName}</div>
<div class="tooltip-title">${params.name}</div>
<div class="tooltip-content">
<ul class="tooltip-ul" >
<li>通报问题数 <span>${dataItem.totalPro}</span></li>
@ -1002,18 +1000,15 @@ const option = ref({
color: "#fff",
},
calculable: true,
// inRange: {
// color: ['#4987F6', '#F6A149', '#D34343']
// }
},
},
series: [
{
name: "长沙",
type: "map",
map: "changsha",
hoverAnimation: true,
roam:true,
roam: true,
label: {
show: true,
color: "white",
@ -1034,6 +1029,24 @@ const option = ref({
}
],
})
const wtlxPieOption = computed(() => {
return {
tooltip: {
trigger: "item",
},
series: [
{
type: "pie",
radius: ["40%", "70%"],
label: {
color: "#fff",
},
data: wtlxList.value,
},
],
};
});
const superviseTempMapVoList = ref([]);
const proTrend = ref({
grid: {
left: '5%', // 图表距离容器左边的距离
@ -1099,28 +1112,15 @@ const proTrend = ref({
// endregion
const handleCommand = (year) => {
selectedYear.value = year; // 更新当前选中的年份
getSupervisionTrend(currentDepartId, year).then(res => {
const supervisionTrend = res.supervisionTrend;
const categories = supervisionTrend.map(item => item.name);
const values = supervisionTrend.map(item => item.value);
// 更新图表数据
proTrend.value.xAxis.data = categories;
proTrend.value.series[0].data = values;
});
};
// region 所有函数
const getMapJSON = async (currentDepartId) => {
const res = await getSubOneStreetMap(currentDepartId)
const getMapJSON = async (departId = currentDepartId) => {
const res = await getSubOneStreetMap(departId)
echarts.registerMap("changsha", res);
subOneSceneInspMapChart.value.chart.setOption(option.value);
}
const getChangedRank = async(currentDepartId, times)=>{
const res = await getSubOneChangedRank(currentDepartId, times)
const getChangedRank = async (departId, times) => {
const res = await getSubOneChangedRank(departId, times)
fxsjRankOverview.value = res.fxsjRankOverview;
jsdwRankOverview.value = res.jsdwRankOverview;
fxsjChangedRankList.value = res.fxsjChangedRankList;
@ -1129,14 +1129,14 @@ const getChangedRank = async(currentDepartId, times)=>{
}
const getProblemTypeRate = async(currentDepartId, times)=>{
const res = await getSubOneProblemTypeRate(currentDepartId, times)
const getProblemTypeRate = async (departId, times) => {
const res = await getSubOneProblemTypeRate(departId, times)
wtlxList.value = res.wtlxList
console.log(res);
}
const getSupervisionOverView = async(currentDepartId, times)=>{
const res = await getAllSubOneSupervisionNotifyCount(currentDepartId, times)
const getSupervisionOverView = async (departId, times) => {
const res = await getAllSubOneSupervisionNotifyCount(departId, times)
Object.assign(overview.value, {
correctionRate: Number(res.overview.rectifyRate),
supervisionNotifyPreTotal: Number(res.overview.personNumber),
@ -1147,8 +1147,27 @@ const getSupervisionOverView = async(currentDepartId, times)=>{
});
}
const getSupervisionTrend = async(currentDepartId, times)=>{
const res = await getSubOneSupervisionTrend(currentDepartId, times)
const getMapData = async (departId, times) => {
const res = await getSubOneSupervisionMap(departId, times);
const mappedData = res.superviseTempMapVoList.map(item => {
return {
...item,
value: item.totalPro,
};
});
const total = mappedData.reduce((sum, item) => sum + Number(item.value), 0);
const avg = total / mappedData.length; // 计算平均值
const range30Percent = avg * 0.3 // 不用取整，小数也可以
option.value.visualMap.pieces = [
{gte: 0, lte: avg - range30Percent, label: "低于平均问题30%", color: "#4987F6"},
{gte: avg - range30Percent, lte: avg + range30Percent, label: "平均问题上下浮动30%内", color: "#F6A149"},
{gte: avg + range30Percent, label: "高于平均问题30%", color: "#D34343"},
];
superviseTempMapVoList.value = mappedData;
option.value.series[0].data = mappedData;
}
const getSupervisionTrend = async (departId, times) => {
const res = await getSubOneSupervisionTrend(departId, times)
const supervisionTrend = res.supervisionTrend;
const categories = supervisionTrend.map(item => item.name);
const values = supervisionTrend.map(item => item.value);
@ -1156,53 +1175,45 @@ const getSupervisionTrend = async(currentDepartId, times)=>{
proTrend.value.series[0].data = values;
}
const getYellowBetDrugData = async(currentDepartId, times)=>{
const res = await getSubOneYellowBetDrug(currentDepartId, times)
const getYellowBetDrugData = async (departId, times) => {
const res = await getSubOneYellowBetDrug(departId, times)
fxsjYellowBetOverview.value = res.fxsjYellowBetOverview
jsdwYellowBetOverview.value = res.jsdwYellowBetOverview
fxsjYellowBetRankList.value = res.fxsjYellowBetRankList
jsdwYellowBetRankList.value = res.jsdwYellowBetRankList
}
const getGunControllerData = async(currentDepartId, times)=>{
const res = await getSubOneGunController(currentDepartId, times)
const getGunControllerData = async (departId, times) => {
const res = await getSubOneGunController(departId, times)
fxsjGunControllerOverview.value = res.fxsjGunControllerOverview
jsdwGunControllerOverview.value = res.jsdwGunControllerOverview
fxsjGunControllerRankList.value = res.fxsjGunControllerRankList
jsdwGunControllerRankList.value = res.jsdwGunControllerRankList
}
const getCompanyProblemData = async(currentDepartId, times)=>{
const res = await getSubOneCompanyProblem(currentDepartId, times)
const getCompanyProblemData = async (departId, times) => {
const res = await getSubOneCompanyProblem(departId, times)
fxsjCompanyProblemOverview.value = res.fxsjCompanyProblemOverview
jsdwCompanyProblemOverview.value = res.jsdwCompanyProblemOverview
fxsjCompanyProblemRankList.value = res.fxsjCompanyProblemRankList
jsdwCompanyProblemRankList.value = res.jsdwCompanyProblemRankList
}
const getHandleCaseData = async(currentDepartId, times)=>{
const res = await getSubOneHandleCase(currentDepartId, times)
const getHandleCaseData = async (departId, times) => {
const res = await getSubOneHandleCase(departId, times)
fxsjHandleCaseOverview.value = res.fxsjHandleCaseOverview
jsdwHandleCaseOverview.value = res.jsdwHandleCaseOverview
fxsjHandleCaseRankList.value = res.fxsjHandleCaseRankList
jsdwHandleCaseRankList.value = res.jsdwHandleCaseRankList
}
const getCheckBeerData = async(currentDepartId, times)=>{
const res = await getSubOneCheckBeer(currentDepartId, times)
const getCheckBeerData = async (departId, times) => {
const res = await getSubOneCheckBeer(departId, times)
fxsjCheckBeerOverview.value = res.fxsjCheckBeerOverview
jsdwCheckBeerOverview.value = res.jsdwCheckBeerOverview
fxsjCheckBeerRankList.value = res.fxsjCheckBeerRankList
jsdwCheckBeerRankList.value = res.jsdwCheckBeerRankList
}
// endregion
// region 初始化数据
const time = ref([
moment().startOf("year").format("YYYY-MM-DD"),
moment().format("YYYY-MM-DD"),
]);
const getData = async () => {
@ -1210,6 +1221,7 @@ const getData = async () => {
getChangedRank(currentDepartId, time.value);
getProblemTypeRate(currentDepartId, time.value);
getSupervisionOverView(currentDepartId, time.value);
getMapData(currentDepartId, time.value);
getSupervisionTrend(currentDepartId, time.value);
getYellowBetDrugData(currentDepartId, time.value);
getGunControllerData(currentDepartId, time.value);
@ -1217,6 +1229,9 @@ const getData = async () => {
getHandleCaseData(currentDepartId, time.value);
getCheckBeerData(currentDepartId, time.value);
}
// endregion
// region 监听
watch(time, () => {
getData();
@ -1226,21 +1241,18 @@ watch(time, () => {
onMounted(() => {
getData();
});
const handleCommand = (year) => {
selectedYear.value = year; // 更新当前选中的年份
getSupervisionTrend(currentDepartId, year).then(res => {
const supervisionTrend = res.supervisionTrend;
const categories = supervisionTrend.map(item => item.name);
const values = supervisionTrend.map(item => item.value);
// 更新图表数据
proTrend.value.xAxis.data = categories;
proTrend.value.series[0].data = values;
});
};
const colors = [
{
color: "linear-gradient( 270deg, #FB002D 0%, #822232 100%)",
percentage: 80,
},
{
color: "linear-gradient( 270deg, #FFB90E 0%, #71501D 100%)",
percentage: 60,
},
{
color: "linear-gradient( 270deg, #63E700 0%, #19674C 100%)",
percentage: 40,
},
];
// endregion

250
src/views/datav/subonedatav/SubOneVideoInsp.vue
Unescape View File

@ -115,7 +115,7 @@
<div class="gobal-dropdown-container">
<el-dropdown class="test" @command="handleCommand">
<span class="el-dropdown-link my-gobal-yearselect">
{{ selectedYear + ' 年'}}
{{ selectedYear + ' 年' }}
</span>
<template #dropdown>
<el-dropdown-menu style="width: 90px">
@ -192,24 +192,21 @@ import changshaMap from "@/assets/data/changsha.json";
import vCharts from "vue-echarts";
import * as echarts from "echarts/core";
import {
getVideoSuperviseMap
getVideoSuperviseMap
} from "@/api/screen/videoSupervise.ts";
import moment from "moment/moment.js";
import {getSubOneStreetMap} from "@/api/screen/subScreen/subOneGlobal.ts";
import {
getSubOneAllVideoSuperviseCount,
getSubOneAllVideoSuperviseCount, getSubOneVideoSuperviseMap,
getSubOneVideoSuperviseProblemRank, getSubOneVideoSuperviseProblemTypeRate, getSubOneVideoSuperviseTrend
} from "@/api/screen/subScreen/subOneVideoSupervise.ts";
// region 所有变量
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,
@ -218,7 +215,7 @@ const overview = ref({
changedRate: 0,
});
const mapIconList = ref([{
originalName:"浏阳市局",
originalName: "浏阳市局",
name: "浏阳市",
discoverProblem: 135,
changedProblem: 135,
@ -226,7 +223,6 @@ const mapIconList = ref([{
relativePer: 152,
changedRate: 100
}])
const currentYear = new Date().getFullYear();
const years = ref([currentYear.toString(), (currentYear - 1).toString(), (currentYear - 2).toString()]); // 年份列表
const selectedYear = ref('2024'); // 当前选中的年份
@ -234,125 +230,22 @@ const currentMapData = ref({})
const subOneVideoInspMapChart = ref(null); // 地图
const route = useRoute();
const currentDepartId = route.query.departId;
// region 所有函数
const getMapJSON = async (departId) => {
const res = await getSubOneStreetMap(departId);
currentMapData.value = res;
echarts.registerMap("changsha", res);
subOneVideoInspMapChart.value.chart.setOption(option.value);
}
const getOverview = async (departId, timeValue) => {
const res = await getSubOneAllVideoSuperviseCount(departId, 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,
};
});
const total = mappedData.reduce((sum, item) => sum + Number(item.value), 0);
const avg = total / mappedData.length; // 计算平均值
const range30Percent = avg*0.3 // 不用取整，小数也可以
mapIconList.value = mappedData
option.value.series[0].data = mapIconList
option.value.visualMap.pieces = [
{gte: 0, lte: avg - range30Percent, label: "低于平均问题30%", color: "#4987F6"},
{gte: avg - range30Percent, lte: avg + range30Percent+0.1, label: "平均问题上下浮动30%内", color: "#F6A149"},
{gte: avg + range30Percent, label: "高于平均问题30%", color: "#D34343"},
];
}
const getProblemTypeRate = async (departId, timeValue) => {
const res = await getSubOneVideoSuperviseProblemTypeRate(departId, timeValue);
ProblemTypeRateChart.value.series[0].data = res.subOneVideoSuperviseProblemTypeRate
}
const getRankList = async (departId, timeValue) => {
const res = await getSubOneVideoSuperviseProblemRank(departId, timeValue);
fxsjRankList.value = res.policeVideoSuperviseProblemRankList
jsdwRankList.value = res.teamVideoSuperviseProblemRankList
}
const getTrend = async(departId, year)=> {
const res = await getSubOneVideoSuperviseTrend(departId, 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(currentDepartId,time.value);
getRankList(currentDepartId, time.value);
// getMap(time.value)
getTrend(currentDepartId, selectedYear.value)
getProblemTypeRate(currentDepartId, time.value)
// getProblemTypeRate(time.value);
getMapJSON(currentDepartId)
}
// endregion
// region 初始化数据和事件监听
watch(time, () => {
getData()
})
onMounted(() => {
getData()
})
const handleCommand = (year) => {
selectedYear.value = year; // 更新当前选中的年份
getTrend(currentDepartId, year)
};
const colors = [
{
color: "linear-gradient( 270deg, #FB002D 0%, #822232 100%)",
percentage: 80,
},
{
color: "linear-gradient( 270deg, #FFB90E 0%, #71501D 100%)",
percentage: 60,
},
{
color: "linear-gradient( 270deg, #63E700 0%, #19674C 100%)",
percentage: 40,
},
];
// endregion
// region 所有图表
const proTrend = ref({
xAxis: {
@ -416,15 +309,15 @@ const proTrend = ref({
});
echarts.registerMap("changsha", changshaMap);
const option = ref({
tooltip: {
trigger: 'item',
formatter: function (params) {
const dataItem = mapIconList.value.find(item => item.name.includes(params.name.substring(0, 2)));
if (dataItem) {
const dataItem = mapIconList.value.find(item => item.name === params.name) || {}; // 找到对应的数据项
console.log("Data item:", dataItem);
if (dataItem.name === params.name) {
return `
<div class="tooltip">
<div class="tooltip-title">${dataItem.originalName}</div>
<div class="tooltip-title">${params.name}</div>
<div class="tooltip-content">
<ul class="tooltip-ul" >
<li>发现问题数 <span>${dataItem.discoverProblem}</span></li>
@ -464,10 +357,9 @@ const option = ref({
textStyle: {
color: "#fff",
},
calculable: true,
inRange: {
color: ["#4987F6","#F6A149", "#D34343" ],
color: ["#4987F6", "#F6A149", "#D34343"],
},
},
series: [
@ -475,7 +367,7 @@ const option = ref({
name: "长沙",
type: "map",
map: "changsha",
roam:true,
roam: true,
hoverAnimation: true,
label: {
show: true,
@ -493,7 +385,7 @@ const option = ref({
borderColor: "#FF0000", // 高亮时边框颜色
borderWidth: 4 // 高亮时边框宽度
},
data: mapIconList,
data: [],
}
],
@ -516,22 +408,84 @@ const ProblemTypeRateChart = ref({
// endregion
// region 所有函数
const getMapJSON = async (departId) => {
const res = await getSubOneStreetMap(departId);
currentMapData.value = res;
echarts.registerMap("changsha", res);
subOneVideoInspMapChart.value.chart.setOption(option.value);
}
const getSubOneVideoSuperviseProblemRankData = async (departId, timeValue) => {
const res = await getSubOneVideoSuperviseProblemRank(departId, timeValue);
fxsjRankList.value = res.policeVideoSuperviseProblemRankList
jsdwRankList.value = res.teamVideoSuperviseProblemRankList
}
const getSubOneAllVideoSuperviseCountData = async (departId, timeValue) => {
const res = await getSubOneAllVideoSuperviseCount(departId, timeValue);
overview.value = res.overview;
}
const colors = [
{
color: "linear-gradient( 270deg, #FB002D 0%, #822232 100%)",
percentage: 80,
},
{
color: "linear-gradient( 270deg, #FFB90E 0%, #71501D 100%)",
percentage: 60,
},
{
color: "linear-gradient( 270deg, #63E700 0%, #19674C 100%)",
percentage: 40,
},
];
const getSubOneVideoSuperviseMapData = async (departId, timeValue) => {
const res = await getSubOneVideoSuperviseMap(departId, timeValue);
console.log(res.videoSuperviseMapIconVoList)
console.log("地图数据来了");
const mappedData = res.videoSuperviseMapIconVoList.map(item => {
return {
...item,
value: item.discoverProblem,
};
});
const total = mappedData.reduce((sum, item) => sum + Number(item.value), 0);
const avg = total / mappedData.length; // 计算平均值
const range30Percent = avg * 0.3 // 不用取整，小数也可以
mapIconList.value = mappedData
option.value.series[0].data = mapIconList
option.value.visualMap.pieces = [
{gte: 0, lte: avg - range30Percent, label: "低于平均问题30%", color: "#4987F6"},
{gte: avg - range30Percent, lte: avg + range30Percent + 0.1, label: "平均问题上下浮动30%内", color: "#F6A149"},
{gte: avg + range30Percent, label: "高于平均问题30%", color: "#D34343"},
];
}
const getSubOneVideoSuperviseProblemTypeRateData = async (departId, timeValue) => {
const res = await getSubOneVideoSuperviseProblemTypeRate(departId, timeValue);
ProblemTypeRateChart.value.series[0].data = res.subOneVideoSuperviseProblemTypeRate
}
const getSubOneVideoSuperviseTrendData = async (departId, year) => {
const res = await getSubOneVideoSuperviseTrend(departId, 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 () => {
getMapJSON(currentDepartId)
getSubOneVideoSuperviseProblemRankData(currentDepartId, time.value);
getSubOneAllVideoSuperviseCountData(currentDepartId, time.value);
getSubOneVideoSuperviseMapData(currentDepartId, time.value)
getSubOneVideoSuperviseTrendData(currentDepartId, selectedYear.value)
getSubOneVideoSuperviseProblemTypeRateData(currentDepartId, time.value)
}
onMounted(() => {
getData()
})
// endregion
// region 事件||监听
watch(time, () => {
getData()
})
const handleCommand = (year) => {
selectedYear.value = year; // 更新当前选中的年份
getSubOneVideoSuperviseTrendData(currentDepartId, selectedYear.value)
};
// endregion
</script>

Write Preview
Loading…
Cancel
Save