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
Unified 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. 211
      src/views/datav/SceneInsp.vue
  12. 242
      src/views/datav/VideoInsp.vue
  13. 271
      src/views/datav/subonedatav/SubOneCaseVerif.vue
  14. 149
      src/views/datav/subonedatav/SubOneGlobal.vue
  15. 120
      src/views/datav/subonedatav/SubOneMailVisits.vue
  16. 182
      src/views/datav/subonedatav/SubOneSceneInsp.vue
  17. 248
      src/views/datav/subonedatav/SubOneVideoInsp.vue

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

@ -1,10 +1,14 @@
import request from "@/api/request"; import request from "@/api/request";
export function getChangedRank(times) {
export function getAllSupervisionNotifyCount(times) { return request.get({
url: `/datav/supervisonNotify/getChangedRank?beginTime=${times[0]}&endTime=${times[1]}`
});
}
export function getSupervisionNotifyCount(times) {
return request.get({ 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({ 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 * 信息大屏api
* @author: sh * @author: sh
* @date: 2024-011-7 * @date: 2024-11-7
*/ */
/* /*
@ -11,7 +11,7 @@ import request from "@/api/request";
*/ */
export function getAllGlobalCount(times) { export function getAllGlobalCount(times) {
return request.get({ 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({ 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) { export function getGlobalMap(times) {
return request.get({ 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) { export function getSubOneCaseVerificationTrend(departId, year) {
return request.get({ return request.get({
url: `/datav/sub1/caseVerif/getSubOneCaseVerificationTrend?departId=${departId}&year=${year}` 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) { export function getSubOneGlobalTrend(departId, year) {
return request.get({ return request.get({
url: `/datav/sub1/getSubOneGlobalTrend?departId=${departId}&year=${year}` 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) { export function getSubOneMailTrend(departId, year) {
return request.get({ return request.get({
url: `/datav/sub1/mailVisits/getSubOneMailTrend?departId=${departId}&year=${year}` 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) { export function getSubOneYellowBetDrug(departId, times) {
return request.get({ return request.get({

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

@ -1,16 +1,25 @@
import request from "@/api/request"; 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) { export function getSubOneAllVideoSuperviseCount(departId,times) {
return request.get({ return request.get({
url: `/datav/sub1/videoSupervise/getSubOneAllVideoSuperviseCount?departId=${departId}&beginTime=${times[0]}&endTime=${times[1]}` url: `/datav/sub1/videoSupervise/getSubOneAllVideoSuperviseCount?departId=${departId}&beginTime=${times[0]}&endTime=${times[1]}`
}); });
} }
export function getSubOneVideoSuperviseMap(departId,times) {
export function getSubOneVideoSuperviseProblemRank(departId,times) {
return request.get({ 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:{ showValue:{
type:Boolean, type:Boolean,
default:true default:true
} },
}); });
const max = ref(100); const max = ref(100);
@ -202,5 +203,10 @@ function getColor(val) {
text-align: right; text-align: right;
width: 60px; width: 60px;
} }
.dynamic-width {
width: 70%;
}
</style> </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 moment from "moment/moment";
import { import {
getBusinessRate, getBusinessRate,
getGlobalRecentlyTrendByMonth,
getOrganizationRank, getOrganizationRank,
getProblemBusinessRate, getProblemBusinessRate,
getStrongProblemRate, getStrongProblemRate,
getGlobalMap, getGlobalMap,
getAllGlobalCount getAllGlobalCount,
} from "@/api/data/basicScreen.ts"; getGlobalTrend
} from "@/api/screen/gobal.ts";
// region 各种变量 // region 各种变量
const router = useRouter(); const router = useRouter();
const activeOrgTab = ref("1"); const activeOrgTab = ref("1");
const fxsjlist = ref([]); // 分县市区机构问题排名 const fxsjlist = ref([{}]); // 分县市区机构问题排名
const jsdwlist = ref([]); // 局属单位机构问题排名 const jsdwlist = ref([]); // 局属单位机构问题排名
const ywzblist = ref([]); // 业务类型占比 const ywzblist = ref([]); // 业务类型占比
const wtlxlist = ref([]); // 问题类型占比 const wtlxlist = ref([]); // 问题类型占比
@ -185,13 +184,22 @@ const globalTempMapVoList = ref([
const currentYear = new Date().getFullYear(); const currentYear = new Date().getFullYear();
const years = ref([currentYear.toString(), (currentYear - 1).toString(), (currentYear - 2).toString()]); // 年份列表 const years = ref([currentYear.toString(), (currentYear - 1).toString(), (currentYear - 2).toString()]); // 年份列表
const selectedYear = ref('2024'); // 当前选中的年份 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 // endregion
function go() {
router.push("/datav/sub1")
}
// region 图表变量 // region 图表变量
// 业务类型占比 // 业务类型占比
const zfbaPieOption = computed(() => { const zfbaPieOption = computed(() => {
@ -415,26 +423,9 @@ const getAllGlobalCountData = async (timeValue = time.value) => {
const res = await getAllGlobalCount(timeValue); const res = await getAllGlobalCount(timeValue);
overview.value = res.overview; 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 getGlobalMapData = async (timeValue = time.value) => {
const res =await getProblemBusinessRate(timeValue); const res = await getGlobalMap(timeValue);
wtlxlist.value = res.wtlxlist;
}
const getGlobalMapData= async(timeValue=time.value)=>{
const res =await getGlobalMap(timeValue);
const mappedData = res.globalTempMapVoList.map(item => { const mappedData = res.globalTempMapVoList.map(item => {
let name; let name;
switch (item.name) { switch (item.name) {
@ -490,17 +481,34 @@ const getGlobalMapData= async(timeValue=time.value)=>{
{gte: avg + range30Percent, label: "高于平均问题30%", color: "#D34343"}, {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() { function getData() {
getOrganizationRankData(); getOrganizationRankData();
getBusinessRateData(); getBusinessRateData();
getAllGlobalCountData(); getAllGlobalCountData();
getGlobalRecentlyTrendByMonthData(); getGlobalMapData();
getGlobalTrendData();
getStrongProblemRateData(); getStrongProblemRateData();
getProblemBusinessRateData(); getProblemBusinessRateData();
getGlobalMapData();
} }
onMounted(() => { onMounted(() => {
@ -523,7 +531,6 @@ const handleCommand = (year) => {
watch(time, () => { watch(time, () => {
getData(); getData();
}); });
const handleClick = (params) => { const handleClick = (params) => {
const departId = params.data.departId; const departId = params.data.departId;
const url = router.resolve({ const url = router.resolve({
@ -532,24 +539,9 @@ const handleClick = (params) => {
}).href; }).href;
window.open(url, "_blank"); window.open(url, "_blank");
} }
// endregion // 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> </script>

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

@ -617,7 +617,7 @@ const option = ref({
if (dataItem) { if (dataItem) {
return ` return `
<div class="tooltip"> <div class="tooltip">
<div class="tooltip-title">${dataItem.name}</div> <div class="tooltip-title">${dataItem.originalName}</div>
<div class="tooltip-content"> <div class="tooltip-content">
<ul class="tooltip-ul" > <ul class="tooltip-ul" >
<li>信访总件数 <span>${dataItem.total}</span></li> <li>信访总件数 <span>${dataItem.total}</span></li>

211
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 * as echarts from "echarts/core";
import moment from "moment"; import moment from "moment";
import { import {
getAllSupervisionNotifyCount,
getChangedRank, getCheckBeer, getCompanyProblem, getGunController, getHandleCase, getChangedRank, getCheckBeer, getCompanyProblem, getGunController, getHandleCase,
getMap, getProblemTypeRate, getProblemTypeRate, getSupervisionNotifyCount, getSupervisionNotifyMap,
getSupervisionTrend, getYellowBetDrug getSupervisionTrend, getYellowBetDrug
} from "@/api/data/supervisionNotify.ts"; } from "@/api/data/supervisionNotify.ts";
import router from "@/router/index.ts"; import router from "@/router/index.ts";
@ -915,10 +914,26 @@ const messages = ref([
const currentYear = new Date().getFullYear(); const currentYear = new Date().getFullYear();
const years = ref([currentYear.toString(), (currentYear - 1).toString(), (currentYear - 2).toString()]); // 年份列表 const years = ref([currentYear.toString(), (currentYear - 1).toString(), (currentYear - 2).toString()]); // 年份列表
const selectedYear = ref('2024'); // 当前选中的年份 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 // endregion
// region 所有图表 // region 所有图表
const wtlxPieOption = computed(() => { const wtlxPieOption = computed(() => {
return { return {
@ -1095,51 +1110,25 @@ const proTrend = ref({
}); });
// endregion // endregion
// region 所有函数
const handleCommand = (year) => { const getChangedRankData = async () => {
selectedYear.value = year; // 更新当前选中的年份 const res = await getChangedRank(time.value);
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;
});
};
// region 初始化数据
const time = ref([
moment().startOf("year").format("YYYY-MM-DD"),
moment().format("YYYY-MM-DD"),
]);
// 地图临时测试数据
const getData = async () => {
getAllSupervisionNotifyCount(time.value).then((res) => {
overview.value= res.overview;
});
getChangedRank(time.value, 3).then((res) => {
fxsjRankOverview.value = res.fxsjRankOverview; fxsjRankOverview.value = res.fxsjRankOverview;
jsdwRankOverview.value = res.jsdwRankOverview; jsdwRankOverview.value = res.jsdwRankOverview;
fxsjChangedRankList.value = res.fxsjChangedRankList; fxsjChangedRankList.value = res.fxsjChangedRankList;
jsdwChangedRankList.value = res.jsdwChangedRankList; jsdwChangedRankList.value = res.jsdwChangedRankList;
// console.log(fxsjChangedRankList.value); }
});
getSupervisionTrend(new Date().getFullYear()).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;
});
getMap(time.value).then((res) => { 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 => { const mappedData = res.superviseTempMapVoList.map(item => {
let name; let name;
switch (item.name) { switch (item.name) {
@ -1186,7 +1175,7 @@ const getData = async () => {
}); });
const total = mappedData.reduce((sum, item) => sum + Number(item.value), 0); const total = mappedData.reduce((sum, item) => sum + Number(item.value), 0);
const avg = total / mappedData.length; // 计算平均值 const avg = total / mappedData.length; // 计算平均值
const range30Percent = avg*0.3 // 不用取整，小数也可以 const range30Percent = avg * 0.3 // 不用取整，小数也可以
option.value.visualMap.pieces = [ option.value.visualMap.pieces = [
{gte: 0, lte: avg - range30Percent, label: "低于平均问题30%", color: "#4987F6"}, {gte: 0, lte: avg - range30Percent, label: "低于平均问题30%", color: "#4987F6"},
{gte: avg - range30Percent, lte: avg + range30Percent, label: "平均问题上下浮动30%内", color: "#F6A149"}, {gte: avg - range30Percent, lte: avg + range30Percent, label: "平均问题上下浮动30%内", color: "#F6A149"},
@ -1194,76 +1183,87 @@ const getData = async () => {
]; ];
superviseTempMapVoList.value = mappedData; superviseTempMapVoList.value = mappedData;
option.value.series[0].data = mappedData; option.value.series[0].data = mappedData;
}) }
const getSupervisionTrendData = async () => {
getProblemTypeRate(time.value).then((res) => { const res = await getSupervisionTrend(selectedYear.value)
wtlxList.value = res.wtlxList const supervisionTrend = res.supervisionTrend;
}); const categories = supervisionTrend.map(item => item.name);
const values = supervisionTrend.map(item => item.value);
getYellowBetDrug(time.value).then((res) => { // 更新图表数据
fxsjYellowBetOverview.value = res.fxsjYellowBetOverview proTrend.value.xAxis.data = categories;
jsdwYellowBetOverview.value = res.jsdwYellowBetOverview proTrend.value.series[0].data = values;
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) => { const getYellowBetDrugData = async () => {
fxsjCheckBeerOverview.value = res.fxsjCheckBeerOverview const res = await getYellowBetDrug(time.value);
jsdwCheckBeerOverview.value = res.jsdwCheckBeerOverview fxsjYellowBetOverview.value = res.fxsjYellowBetOverview;
fxsjCheckBeerRankList.value = res.fxsjCheckBeerRankList jsdwYellowBetOverview.value = res.jsdwYellowBetOverview;
jsdwCheckBeerRankList.value = res.jsdwCheckBeerRankList 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 () => {
getChangedRankData();
getProblemTypeRateData();
getSupervisionNotifyCountData();
getSupervisionNotifyMapData();
getSupervisionTrendData();
getYellowBetDrugData();
getGunControllerData();
getCompanyProblemData();
getHandleCaseData();
getCheckBeerData();
}
watch(time, () => { onMounted(() => {
getData(); getData();
}); });
// endregion
// region 事件
onMounted(() => { watch(time, () => {
getData(); 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);
// 更新图表数据
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
const handleClick = (params) => { const handleClick = (params) => {
const departId = params.data.departId; const departId = params.data.departId;
const url = router.resolve({ const url = router.resolve({
@ -1272,6 +1272,7 @@ const handleClick = (params) => {
}).href; }).href;
window.open(url, "_blank"); window.open(url, "_blank");
} }
// endregion
</script> </script>

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

@ -198,14 +198,13 @@ import {
getVideoSuperviseProblemRank, getVideoSuperviseMap, getVideoSuperviseTrend getVideoSuperviseProblemRank, getVideoSuperviseMap, getVideoSuperviseTrend
} from "@/api/screen/videoSupervise.ts"; } from "@/api/screen/videoSupervise.ts";
import moment from "moment/moment.js"; import moment from "moment/moment.js";
// region 所有变量
const router = useRouter(); const router = useRouter();
const time = ref([ const time = ref([
moment().startOf("year").format("YYYY-MM-DD"), moment().startOf("year").format("YYYY-MM-DD"),
moment().format("YYYY-MM-DD"), moment().format("YYYY-MM-DD"),
]); ]);
const fxsjRankList = ref([]); const fxsjRankList = ref([]);
const jsdwRankList = ref([]); const jsdwRankList = ref([]);
@ -229,115 +228,22 @@ const mapIconList = ref([{
const currentYear = new Date().getFullYear(); const currentYear = new Date().getFullYear();
const years = ref([currentYear.toString(), (currentYear - 1).toString(), (currentYear - 2).toString()]); // 年份列表 const years = ref([currentYear.toString(), (currentYear - 1).toString(), (currentYear - 2).toString()]); // 年份列表
const selectedYear = ref('2024'); // 当前选中的年份 const selectedYear = ref('2024'); // 当前选中的年份
const colors = [
// region 所有函数 {
const getOverview = async (timeValue) => { color: "linear-gradient( 270deg, #FB002D 0%, #822232 100%)",
const res = await getAllVideoSuperviseCount(timeValue); percentage: 80,
overview.value = res.overview; },
} {
const getMap = async (timeValue) => { color: "linear-gradient( 270deg, #FFB90E 0%, #71501D 100%)",
const res = await getVideoSuperviseMap(timeValue); percentage: 60,
// console.log(res.videoSuperviseMapIconVoList) },
const mappedData = res.videoSuperviseMapIconVoList.map(item => { {
let name; color: "linear-gradient( 270deg, #63E700 0%, #19674C 100%)",
switch (item.name) { percentage: 40,
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)
};
// endregion // endregion
// region 所有图表 // region 所有图表
const proTrend = ref({ const proTrend = ref({
xAxis: { xAxis: {
@ -506,6 +412,109 @@ const ProblemTypeRateChart = ref({
}); // 问题类型占比 }); // 问题类型占比
// endregion // 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 handleClick = (params) => {
const departId = params.data.departId; const departId = params.data.departId;
const url = router.resolve({ const url = router.resolve({
@ -514,22 +523,9 @@ const handleClick = (params) => {
}).href; }).href;
window.open(url, "_blank"); 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> </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 {getSubOneStreetMap} from "@/api/screen/subScreen/subOneGlobal.ts";
import { import {
getSubOneAllCaseVerificationCount, getSubOneAllCaseVerificationCount,
getSubOneCaseProblemProperty, getSubOneCaseSourceRateAndDealSituation, getSubOneCaseProblemProperty, getSubOneCaseSourceRateAndDealSituation, getSubOneCaseVerificationMap,
getSubOneCaseVerificationRank, getSubOneCaseVerificationTrend getSubOneCaseVerificationRank, getSubOneCaseVerificationTrend
} from "@/api/screen/subScreen/subOneCaseVerif.ts"; } from "@/api/screen/subScreen/subOneCaseVerif.ts";
// region 所有变量
const currentYear = new Date().getFullYear(); const currentYear = new Date().getFullYear();
const years = ref([currentYear.toString(), (currentYear - 1).toString(), (currentYear - 2).toString()]); // 年份列表 const years = ref([currentYear.toString(), (currentYear - 1).toString(), (currentYear - 2).toString()]); // 年份列表
const selectedYear = ref(currentYear); // 当前选中的年份 const selectedYear = ref(currentYear); // 当前选中的年份
@ -202,155 +203,36 @@ const overview = ref({
punishOrg: 0, // 问责单位数、 punishOrg: 0, // 问责单位数、
rate: 0, // 查实率 rate: 0, // 查实率
}); });
let gobalTempMapVoList = ref([]); const gobalTempMapVoList = ref([]);
const colors = [
{
color: "linear-gradient( 270deg, #FB002D 0%, #822232 100%)",
percentage: 80,
},
// region 事件||监听 {
const handleCommand = ( year) => { color: "linear-gradient( 270deg, #FFB90E 0%, #71501D 100%)",
selectedYear.value = year; // 更新当前选中的年份 percentage: 60,
getProTrendList(currentDepartId,year); },
}; {
watch(time, () => { color: "linear-gradient( 270deg, #63E700 0%, #19674C 100%)",
getData(); percentage: 40,
}); },
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)
}
// endregion // endregion
// region 所有图表
echarts.registerMap("changsha", changshaMap); echarts.registerMap("changsha", changshaMap);
const option = ref({ const option = ref({
tooltip: { tooltip: {
trigger: 'item', trigger: 'item',
formatter: function (params) { formatter: function (params) {
console.log(params) console.log(params)
const dataItem = gobalTempMapVoList.value.find(item => item.name.includes(params.name.substring(0, 2))); const dataItem = gobalTempMapVoList.value.find(item => item.name === params.name) || {}; // 找到对应的数据项
if (dataItem ) { console.log("Data item:", dataItem);
if (dataItem.name===params.name ) {
return ` return `
<div class="tooltip"> <div class="tooltip">
<div class="tooltip-title">${dataItem.originalName}</div> <div class="tooltip-title">${params.name}</div>
<div class="tooltip-content"> <div class="tooltip-content">
<ul class="tooltip-ul" > <ul class="tooltip-ul" >
<li>案件总数（起）<span>${dataItem.total}</span></li> <li>案件总数（起）<span>${dataItem.total}</span></li>
@ -378,13 +260,6 @@ const option = ref({
</div>`; </div>`;
} }
}, },
// backgroundColor: "#031577", //
// borderColor: "#0A2F86",
// borderWidth: 0, // 设置边框宽度为1像素
// borderRadius: 3, // 设置边框半径为3像素
// shadowBlur: 0, // 设置阴影模糊程度为8像素
// shadowOffsetX: 0, // 设置水平阴影位移量为0像素
// shadowOffsetY: 0, // 设置垂直阴影位移量为6像素
}, },
visualMap: { visualMap: {
type: "piecewise", type: "piecewise",
@ -611,20 +486,94 @@ const tzcloption = ref({
}, },
], ],
}); });
const colors = [ // endregion
{
color: "linear-gradient( 270deg, #FB002D 0%, #822232 100%)", // region 所有函数
percentage: 80, const getMapJSON = async (departId) => {
}, const res = await getSubOneStreetMap(departId);
{ currentMapData.value = res;
color: "linear-gradient( 270deg, #FFB90E 0%, #71501D 100%)", echarts.registerMap("changsha", res);
percentage: 60, chart.value.chart.setOption(option.value);
}, }
{ const getRankListData = async(departId, timeValue) => {
color: "linear-gradient( 270deg, #63E700 0%, #19674C 100%)", const res = await getSubOneCaseVerificationRank(departId, timeValue);
percentage: 40, 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> </script>

149
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 * as echarts from "echarts/core";
import moment from "moment/moment"; import moment from "moment/moment";
import { import {
getGlobalRecentlyTrendByMonth, getSubOneStreetMap,
} from "@/api/data/basicScreen.ts";
import {getSubOneStreetMap} from "@/api/screen/subScreen/subOneGlobal.ts";
import {
getSubOneAllCount, getSubOneAllCount,
getSubOneBusinessRate, getSubOneBusinessRate,
getSubOneOrganizationRank, getSubOneProblemBusinessRate, getSubOneStrongProblemRate,getSubOneGlobalTrend getSubOneOrganizationRank,
getSubOneProblemBusinessRate,
getSubOneStrongProblemRate,
getSubOneGlobalTrend, getSubOneGlobalMap
} from "@/api/screen/subScreen/subOneGlobal.ts"; } from "@/api/screen/subScreen/subOneGlobal.ts";
// region 各种变量 // region 各种变量
@ -172,22 +172,25 @@ const time = ref([
moment().startOf("year").format("YYYY-MM-DD"), moment().startOf("year").format("YYYY-MM-DD"),
moment().format("YYYY-MM-DD"), moment().format("YYYY-MM-DD"),
]); // 时间范围 ]); // 时间范围
const globalTempMapVoList = ref([ const globalTempMapVoList = ref([]); // 地图临时数据
{
"name": "天心分局",
"totalPro": 11,
"supervisePro": 11,
"caseVerifyPro": 11,
"mailPro": 11,
"policePro": 11,
"reviewPro": 11,
"value": 200
}
]); // 地图临时数据
const currentYear = new Date().getFullYear(); const currentYear = new Date().getFullYear();
const years = ref([currentYear.toString(), (currentYear - 1).toString(), (currentYear - 2).toString()]); // 年份列表 const years = ref([currentYear.toString(), (currentYear - 1).toString(), (currentYear - 2).toString()]); // 年份列表
const selectedYear = ref('2024'); // 当前选中的年份 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 // endregion
@ -243,12 +246,12 @@ const option = ref({
tooltip: { tooltip: {
trigger: 'item', trigger: 'item',
formatter: function (params) { formatter: function (params) {
// console.log(params); const dataItem = globalTempMapVoList.value.find(item => item.name === params.name) || {}; // 找到对应的数据项
const dataItem = globalTempMapVoList.value.find(item => item.name.includes(params.name.substring(0, 2))); console.log("Data item:", dataItem);
if (dataItem) { if (dataItem.name === params.name) {
return ` return `
<div class="tooltip"> <div class="tooltip">
<div class="tooltip-title">${dataItem.originalName}</div> <div class="tooltip-title">${params.name}</div>
<div class="tooltip-content"> <div class="tooltip-content">
<ul class="tooltip-ul" > <ul class="tooltip-ul" >
<li>问题总数 <span>${dataItem.totalPro}</span></li> <li>问题总数 <span>${dataItem.totalPro}</span></li>
@ -259,28 +262,26 @@ const option = ref({
<li>审计督察问题 <span>${dataItem.reviewPro}</span></li> <li>审计督察问题 <span>${dataItem.reviewPro}</span></li>
</ul> </ul>
</div> </div>
</div>
</div>`; </div>`;
} else { } else {
return ` return `
<div class="tooltip"> <div class="tooltip">
<div class="tooltip-title">${dataItem.originalName}</div> <div class="tooltip-title">${params.name}</div>
<div class="tooltip-content"> <div class="tooltip-content">
<ul class="tooltip-ul""> <ul class="tooltip-ul"">
<li>问题总数 <span>0000</span></li> <li>问题总数 <span>-</span></li>
<li>督察问题 <span>0000</span></li> <li>督察问题 <span>-</span></li>
<li>案件核查问题 <span>0000</span></li> <li>案件核查问题 <span>-</span></li>
<li>信访投诉问题 <span>0000</span></li> <li>信访投诉问题 <span>-</span></li>
<li>民意感知问题 <span>0000</span></li> <li>民意感知问题 <span>-</span></li>
<li>审计督察问题 <span>0000</span></li> <li>审计督察问题 <span>-</span></li>
</ul> </ul>
</div>
</div> </div>
</div>`; </div>`;
} }
}, },
// backgroundColor: "#031577", //
// borderColor: "#0A2F86",
borderWidth: 0, // 设置边框宽度为1像素 borderWidth: 0, // 设置边框宽度为1像素
borderRadius: 3, // 设置边框半径为3像素 borderRadius: 3, // 设置边框半径为3像素
shadowBlur: 0, // 设置阴影模糊程度为8像素 shadowBlur: 0, // 设置阴影模糊程度为8像素
@ -400,29 +401,45 @@ const proTrend = ref({
// endregion // endregion
// region 所有函数 // region 所有函数
const getMapJSON = async (departId = currentDepartId) => {
const getMapJSON = async (departId) => {
const res = await getSubOneStreetMap(departId); const res = await getSubOneStreetMap(departId);
currentMapData.value = res; currentMapData.value = res;
echarts.registerMap("changsha", res); echarts.registerMap("changsha", res);
chart.value.chart.setOption(option.value); 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); const res = await getSubOneOrganizationRank(departId, timeValue);
fxsjlist.value = res.fxsjlist; fxsjlist.value = res.fxsjlist;
jsdwlist.value = res.jsdwlist; jsdwlist.value = res.jsdwlist;
} }
const getBusinessRateData = async (departId = currentDepartId, timeValue = time.value) => {
const getBusinessRateData = async (departId, timeValue = time.value) => {
const res = await getSubOneBusinessRate(departId, timeValue); const res = await getSubOneBusinessRate(departId, timeValue);
ywzblist.value = res.ywzblist; 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); const res = await getSubOneAllCount(departId, timeValue);
overview.value = res.overview; overview.value = res.overview;
} }
const getSubOneGlobalMapIcon = async (departId = currentDepartId, timeValue = time.value) => {
const getSubOneGlobalTrendData =async (departId, year)=>{ 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 res = await getSubOneGlobalTrend(departId, year);
const categories = res.globalRecentlyTrendList.map(item => item.name); const categories = res.globalRecentlyTrendList.map(item => item.name);
const values = res.globalRecentlyTrendList.map(item => item.value); const values = res.globalRecentlyTrendList.map(item => item.value);
@ -430,74 +447,44 @@ const getSubOneGlobalTrendData =async (departId, year)=>{
proTrend.value.xAxis.data = categories; proTrend.value.xAxis.data = categories;
proTrend.value.series[0].data = values; 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); const res = await getSubOneStrongProblemRate(departId, timeValue);
tcwtlist.value = res.tcwtlist; tcwtlist.value = res.tcwtlist;
} }
const getSubOneProblemBusinessRateData = async (departId = currentDepartId, timeValue = time.value) => {
const getSubOneProblemBusinessRateData = async (departId, timeValue = time.value) => { const res = await getSubOneProblemBusinessRate(departId, timeValue);
const res = await getSubOneProblemBusinessRate(departId,timeValue);
wtlxlist.value = res.wtlxlist; wtlxlist.value = res.wtlxlist;
} }
// endregion const getData = () => {
// region 初始化数据
onMounted(() => {
getOrganizationProRankData(currentDepartId, time.value); getOrganizationProRankData(currentDepartId, time.value);
getBusinessRateData(currentDepartId, time.value); getBusinessRateData(currentDepartId, time.value);
getAllGlobalCountData(currentDepartId, time.value); getAllGlobalCountData(currentDepartId, time.value);
getSubOneGlobalMapIcon(currentDepartId, time.value);
getSubOneGlobalTrendData(currentDepartId, selectedYear.value); getSubOneGlobalTrendData(currentDepartId, selectedYear.value);
getSubOneStrongProblemRateData(currentDepartId, time.value); getSubOneStrongProblemRateData(currentDepartId, time.value);
getSubOneProblemBusinessRateData(currentDepartId, time.value); getSubOneProblemBusinessRateData(currentDepartId, time.value);
getMapJSON(currentDepartId); getMapJSON(currentDepartId);
};
onMounted(() => {
getData()
}); });
// endregion // endregion
// region 事件||监听 // region 事件||监听
const handleCommand = (year) => { const handleCommand = (year) => {
selectedYear.value = year; // 更新当前选中的年份 selectedYear.value = year; // 更新当前选中的年份
getGlobalRecentlyTrendByMonth(year).then(res => { getSubOneGlobalTrendData(currentDepartId, selectedYear.value);
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;
});
}; };
watch(time, () => { watch(time, () => {
getData(); 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 // 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> </script>

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

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

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

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

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

@ -115,7 +115,7 @@
<div class="gobal-dropdown-container"> <div class="gobal-dropdown-container">
<el-dropdown class="test" @command="handleCommand"> <el-dropdown class="test" @command="handleCommand">
<span class="el-dropdown-link my-gobal-yearselect"> <span class="el-dropdown-link my-gobal-yearselect">
{{ selectedYear + ' 年'}} {{ selectedYear + ' 年' }}
</span> </span>
<template #dropdown> <template #dropdown>
<el-dropdown-menu style="width: 90px"> <el-dropdown-menu style="width: 90px">
@ -197,19 +197,16 @@ import {
import moment from "moment/moment.js"; import moment from "moment/moment.js";
import {getSubOneStreetMap} from "@/api/screen/subScreen/subOneGlobal.ts"; import {getSubOneStreetMap} from "@/api/screen/subScreen/subOneGlobal.ts";
import { import {
getSubOneAllVideoSuperviseCount, getSubOneAllVideoSuperviseCount, getSubOneVideoSuperviseMap,
getSubOneVideoSuperviseProblemRank, getSubOneVideoSuperviseProblemTypeRate, getSubOneVideoSuperviseTrend getSubOneVideoSuperviseProblemRank, getSubOneVideoSuperviseProblemTypeRate, getSubOneVideoSuperviseTrend
} from "@/api/screen/subScreen/subOneVideoSupervise.ts"; } from "@/api/screen/subScreen/subOneVideoSupervise.ts";
// region 所有变量
const time = ref([ const time = ref([
moment().startOf("year").format("YYYY-MM-DD"), moment().startOf("year").format("YYYY-MM-DD"),
moment().format("YYYY-MM-DD"), moment().format("YYYY-MM-DD"),
]); ]);
const fxsjRankList = ref([]); const fxsjRankList = ref([]);
const jsdwRankList = ref([]); const jsdwRankList = ref([]);
const overview = ref({ const overview = ref({
discoverProblem: 0, discoverProblem: 0,
changedProblem: 0, changedProblem: 0,
@ -218,7 +215,7 @@ const overview = ref({
changedRate: 0, changedRate: 0,
}); });
const mapIconList = ref([{ const mapIconList = ref([{
originalName:"浏阳市局", originalName: "浏阳市局",
name: "浏阳市", name: "浏阳市",
discoverProblem: 135, discoverProblem: 135,
changedProblem: 135, changedProblem: 135,
@ -226,7 +223,6 @@ const mapIconList = ref([{
relativePer: 152, relativePer: 152,
changedRate: 100 changedRate: 100
}]) }])
const currentYear = new Date().getFullYear(); const currentYear = new Date().getFullYear();
const years = ref([currentYear.toString(), (currentYear - 1).toString(), (currentYear - 2).toString()]); // 年份列表 const years = ref([currentYear.toString(), (currentYear - 1).toString(), (currentYear - 2).toString()]); // 年份列表
const selectedYear = ref('2024'); // 当前选中的年份 const selectedYear = ref('2024'); // 当前选中的年份
@ -234,125 +230,22 @@ const currentMapData = ref({})
const subOneVideoInspMapChart = ref(null); // 地图 const subOneVideoInspMapChart = ref(null); // 地图
const route = useRoute(); const route = useRoute();
const currentDepartId = route.query.departId; const currentDepartId = route.query.departId;
const colors = [
// region 所有函数 {
color: "linear-gradient( 270deg, #FB002D 0%, #822232 100%)",
const getMapJSON = async (departId) => { percentage: 80,
const res = await getSubOneStreetMap(departId); },
currentMapData.value = res; {
echarts.registerMap("changsha", res); color: "linear-gradient( 270deg, #FFB90E 0%, #71501D 100%)",
subOneVideoInspMapChart.value.chart.setOption(option.value); percentage: 60,
} },
{
const getOverview = async (departId, timeValue) => { color: "linear-gradient( 270deg, #63E700 0%, #19674C 100%)",
const res = await getSubOneAllVideoSuperviseCount(departId, timeValue); percentage: 40,
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)
};
// endregion // endregion
// region 所有图表 // region 所有图表
const proTrend = ref({ const proTrend = ref({
xAxis: { xAxis: {
@ -416,15 +309,15 @@ const proTrend = ref({
}); });
echarts.registerMap("changsha", changshaMap); echarts.registerMap("changsha", changshaMap);
const option = ref({ const option = ref({
tooltip: { tooltip: {
trigger: 'item', trigger: 'item',
formatter: function (params) { formatter: function (params) {
const dataItem = mapIconList.value.find(item => item.name.includes(params.name.substring(0, 2))); const dataItem = mapIconList.value.find(item => item.name === params.name) || {}; // 找到对应的数据项
if (dataItem) { console.log("Data item:", dataItem);
if (dataItem.name === params.name) {
return ` return `
<div class="tooltip"> <div class="tooltip">
<div class="tooltip-title">${dataItem.originalName}</div> <div class="tooltip-title">${params.name}</div>
<div class="tooltip-content"> <div class="tooltip-content">
<ul class="tooltip-ul" > <ul class="tooltip-ul" >
<li>发现问题数 <span>${dataItem.discoverProblem}</span></li> <li>发现问题数 <span>${dataItem.discoverProblem}</span></li>
@ -464,10 +357,9 @@ const option = ref({
textStyle: { textStyle: {
color: "#fff", color: "#fff",
}, },
calculable: true, calculable: true,
inRange: { inRange: {
color: ["#4987F6","#F6A149", "#D34343" ], color: ["#4987F6", "#F6A149", "#D34343"],
}, },
}, },
series: [ series: [
@ -475,7 +367,7 @@ const option = ref({
name: "长沙", name: "长沙",
type: "map", type: "map",
map: "changsha", map: "changsha",
roam:true, roam: true,
hoverAnimation: true, hoverAnimation: true,
label: { label: {
show: true, show: true,
@ -493,7 +385,7 @@ const option = ref({
borderColor: "#FF0000", // 高亮时边框颜色 borderColor: "#FF0000", // 高亮时边框颜色
borderWidth: 4 // 高亮时边框宽度 borderWidth: 4 // 高亮时边框宽度
}, },
data: mapIconList, data: [],
} }
], ],
@ -516,22 +408,84 @@ const ProblemTypeRateChart = ref({
// endregion // 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 = [ const getSubOneVideoSuperviseMapData = async (departId, timeValue) => {
{ const res = await getSubOneVideoSuperviseMap(departId, timeValue);
color: "linear-gradient( 270deg, #FB002D 0%, #822232 100%)", console.log(res.videoSuperviseMapIconVoList)
percentage: 80, console.log("地图数据来了");
}, const mappedData = res.videoSuperviseMapIconVoList.map(item => {
{ return {
color: "linear-gradient( 270deg, #FFB90E 0%, #71501D 100%)", ...item,
percentage: 60, value: item.discoverProblem,
}, };
{ });
color: "linear-gradient( 270deg, #63E700 0%, #19674C 100%)", const total = mappedData.reduce((sum, item) => sum + Number(item.value), 0);
percentage: 40, 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> </script>

Write Preview
Loading…
Cancel
Save