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

动画渲染

main
不爱学习的石同学 11 months ago
parent
b03ef373de
commit
7fcfa377a8
11 changed files with 632 additions and 290 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. 4
      src/api/screen/caseVerif.ts
  2. 4
      src/api/screen/subScreen/subOneSupervisionNotify.ts
  3. 374
      src/views/datav/CaseVerif.vue
  4. 101
      src/views/datav/Gobal.vue
  5. 39
      src/views/datav/MailVisits.vue
  6. 86
      src/views/datav/SceneInsp.vue
  7. 80
      src/views/datav/VideoInsp.vue
  8. 2
      src/views/datav/subonedatav/SubOneCaseVerif.vue
  9. 71
      src/views/datav/subonedatav/SubOneGlobal.vue
  10. 77
      src/views/datav/subonedatav/SubOneSceneInsp.vue
  11. 62
      src/views/datav/subonedatav/SubOneVideoInsp.vue

4
src/api/screen/CaseVerif.ts → src/api/screen/caseVerif.ts
Unescape View File

@ -18,9 +18,9 @@ export function getCaseProblemProperty(times) {
export function getAllCaseVerificationCount(times) { export function getCaseVerificationCount(times) {
return request.get({ return request.get({
url: `/datav/caseVerif/getAllCaseVerificationCount?beginTime=${times[0]}&endTime=${times[1]}` url: `/datav/caseVerif/getCaseVerificationCount?beginTime=${times[0]}&endTime=${times[1]}`
}); });
} }
export function getCaseVerificationMap(times) { export function getCaseVerificationMap(times) {

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

@ -20,9 +20,9 @@ export function getSubOneSupervisionTrend(departId, year) {
}); });
} }
export function getAllSubOneSupervisionNotifyCount(departId, times) { export function getSubOneSupervisionNotifyCount(departId, times) {
return request.get({ return request.get({
url: `/datav/sub1/supervisonNotify/getAllSubOneSupervisionNotifyCount?departId=${departId}&beginTime=${times[0]}&endTime=${times[1]}` url: `/datav/sub1/supervisonNotify/getSubOneSupervisionNotifyCount?departId=${departId}&beginTime=${times[0]}&endTime=${times[1]}`
}); });
} }

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

@ -8,6 +8,7 @@
<datav-card title="分县市局排名" subTitle="案件数"> <datav-card title="分县市局排名" subTitle="案件数">
<datav-tabs <datav-tabs
type="bottom-button" type="bottom-button"
v-model="caseCountRankTab"
> >
<datav-tab-item label="分县市局" name="1"> <datav-tab-item label="分县市局" name="1">
<el-scrollbar height="350px"> <el-scrollbar height="350px">
@ -96,12 +97,14 @@
:option="option" :option="option"
autoresize autoresize
@click="handleClick" @click="handleClick"
ref="caseVerifMap"
/> />
<datav-card title="查处问题趋势"> <datav-card title="查处问题趋势">
<v-charts <v-charts
style="height: 320px" style="height: 320px"
:option="proTrend" :option="proTrend"
autoresize autoresize
ref="caseVerifProTrend"
/> />
<div class="gobal-dropdown-container"> <div class="gobal-dropdown-container">
<el-dropdown class="test" @command="handleCommand"> <el-dropdown class="test" @command="handleCommand">
@ -175,7 +178,15 @@ import vCharts from "vue-echarts";
import changshaMap from "@/assets/data/changsha.json"; 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 {getAllCaseVerificationCount, getCaseVerificationRank, getCaseVerificationTrend, getCaseSourceRateAndDealSituation, getCaseVerificationMap, getCaseProblemProperty, getConfinementAndPause} from "@/api/screen/CaseVerif.ts"; import {
getCaseVerificationRank,
getCaseVerificationTrend,
getCaseSourceRateAndDealSituation,
getCaseVerificationMap,
getCaseProblemProperty,
getConfinementAndPause,
getCaseVerificationCount
} from "@/api/screen/caseVerif.ts";
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()]); // 年份列表
@ -184,9 +195,6 @@ 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 fxsjBarList = ref([]); const fxsjBarList = ref([]);
const jsdwBarList = ref([]); const jsdwBarList = ref([]);
const router = useRouter(); const router = useRouter();
@ -198,143 +206,30 @@ const overview = ref({
punishOrg: 0, // 问责单位数、 punishOrg: 0, // 问责单位数、
Rate: 0, // 查实率 Rate: 0, // 查实率
}); });
let gobalTempMapVoList = ref([]); let globalTempMapVoList = ref([]);
const jjjgPieList = ref([]); const caseCountRankTab = ref('1')
const caseVerifMap = ref(null);
const caseVerifProTrend = ref(null);
// region 事件||监听 let caseVerifMapIntervalId;
const handleCommand = (year) => { let caseVerifTrendIntervalId;
selectedYear.value = year; // 更新当前选中的年份 let caseCountRankIntervalId;
getProTrendList(selectedYear.value); const colors = [
}; {
watch(time, () => { color: "linear-gradient( 270deg, #FB002D 0%, #822232 100%)",
getData(); percentage: 80,
}); },
// endregion {
color: "linear-gradient( 270deg, #FFB90E 0%, #71501D 100%)",
percentage: 60,
},
{
// region 所有函数 color: "linear-gradient( 270deg, #63E700 0%, #19674C 100%)",
const getRankList = async(timeValue) => { percentage: 40,
const res = await getCaseVerificationRank(timeValue); },
fxsjBarList.value = res.fxsjRankList
jsdwBarList.value = res.jsdwRankList
}
const getCaseProblemPropertyList = async(timeValue) => {
const res = await getCaseProblemProperty(timeValue);
zfbaPieOption.value.series[0].data = res.zfbaPieList;
fwglPieOption.value.series[0].data = res.fwglPieList;
}
const getOverview = async(timeValue)=>{
const res = await getAllCaseVerificationCount(timeValue)
overview.value = res.overview
}
const getMapIcon = async(timeValue)=> {
const res = await getCaseVerificationMap(timeValue);
const mappedData = res.caseVerificationMapList.map(item => {
let name;
switch (item.name) {
case '长沙县局':
name = '长沙县';
break;
case '芙蓉分局':
name = '芙蓉区';
break;
case '天心分局':
name = '天心区';
break;
case '岳麓分局':
name = '岳麓区';
break;
case '开福分局':
name = '开福区';
break;
case '雨花分局':
name = '雨花区';
break;
case '望城分局':
name = '望城区';
break;
case '宁乡市局':
name = '宁乡市';
break;
case '浏阳市局':
name = '浏阳市';
break;
case '高新分局':
name = '高新区';
break;
default:
name = item.name;
break;
}
return {
...item,
originalName: item.name, // 添加原始名称
name: name,
value: item.total,
};
});
gobalTempMapVoList.value = mappedData
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(year) => {
const res = await getCaseVerificationTrend(year);
const temp = res.proTrendList;
const categories = temp.map(item => item.name);
const values = temp.map(item => item.value);
proTrend.value.xAxis.data = categories;
proTrend.value.series[0].data = values;
}
const getCaseSourceAndDeal = async (timeValue)=>{
const res = await getCaseSourceRateAndDealSituation(timeValue);
ajlyPieOption.value.series[0].data = res.caseSourceRateList
wzclPieOption.value.series[0].data = res.dealSituationPieList
}
const getConfinementAndPauseList = async (timeValue)=>{
const res = await getConfinementAndPause(timeValue);
jbcloption.value.series[0].data = res.jbclList;
tzcloption.value.series[0].data = res.dzclList;
}
// endregion
function getData() {
getRankList(time.value);
getCaseProblemPropertyList(time.value)
getOverview(time.value);
getMapIcon(time.value);
getProTrendList(selectedYear.value);
getCaseSourceAndDeal(time.value);
getConfinementAndPauseList(time.value);
}
watch(time, () => {
getData();
});
onMounted(() => {
getData();
});
// region 所有图表
echarts.registerMap("changsha", changshaMap); echarts.registerMap("changsha", changshaMap);
const option = ref({ const option = ref({
geo: { geo: {
@ -348,9 +243,10 @@ const option = ref({
}, },
tooltip: { tooltip: {
trigger: 'item', trigger: 'item',
position: 'bottom',
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 = globalTempMapVoList.value.find(item => item.name.includes(params.name.substring(0, 2)));
if (dataItem) { if (dataItem) {
return ` return `
<div class="tooltip"> <div class="tooltip">
@ -615,8 +511,169 @@ const tzcloption = ref({
}, },
], ],
}); });
// endregion
// region 所有函数
const getCaseVerificationRankData = async (timeValue) => {
const res = await getCaseVerificationRank(timeValue);
fxsjBarList.value = res.fxsjRankList
jsdwBarList.value = res.jsdwRankList
}
const getCaseProblemPropertyData = async (timeValue) => {
const res = await getCaseProblemProperty(timeValue);
zfbaPieOption.value.series[0].data = res.zfbaPieList;
fwglPieOption.value.series[0].data = res.fwglPieList;
}
const getCaseVerificationCountData = async (timeValue) => {
const res = await getCaseVerificationCount(timeValue)
overview.value = res.overview
}
const getCaseVerificationMapData = 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,
};
});
globalTempMapVoList.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 getCaseVerificationTrendData = async (year) => {
const res = await getCaseVerificationTrend(year);
const temp = res.proTrendList;
const categories = temp.map(item => item.name);
const values = temp.map(item => item.value);
proTrend.value.xAxis.data = categories;
proTrend.value.series[0].data = values;
}
const getCaseSourceRateAndDealSituationData = async (timeValue) => {
const res = await getCaseSourceRateAndDealSituation(timeValue);
ajlyPieOption.value.series[0].data = res.caseSourceRateList
wzclPieOption.value.series[0].data = res.dealSituationPieList
}
const getConfinementAndPauseData = async (timeValue) => {
const res = await getConfinementAndPause(timeValue);
jbcloption.value.series[0].data = res.jbclList;
tzcloption.value.series[0].data = res.dzclList;
}
function getData() {
getCaseVerificationRankData(time.value);
getCaseProblemPropertyData(time.value)
getCaseVerificationCountData(time.value);
getCaseVerificationMapData(time.value);
getCaseVerificationTrendData(selectedYear.value);
getCaseSourceRateAndDealSituationData(time.value);
getConfinementAndPauseData(time.value);
}
// 分县市局排名动画
const caseCountRankAnimation = () => {
caseCountRankTab.value = (parseInt(caseCountRankTab.value) % 2 + 1).toString();
};
caseCountRankIntervalId = setInterval(caseCountRankAnimation, 2000);
// 地图动画
const caseVerifMapAnimation = () => {
const myCaseVerifMap = caseVerifMap?.value?.chart;
if (!myCaseVerifMap) return;
// 来个随机数，9个图 0~8的整数就ok
const randomNum = Math.floor(Math.random() * 9);
myCaseVerifMap.dispatchAction({
type: "downplay", //downplay 取消高亮
seriesIndex: 0,
});
myCaseVerifMap.dispatchAction({
type: "highlight", //highLight 高亮指定的数据图形
seriesIndex: 0, //系列index
dataIndex: randomNum, //数据index
});
myCaseVerifMap.dispatchAction({
type: "showTip", //showTip 显示提示框
seriesIndex: 0,
dataIndex: randomNum,
});
}
// 启动定时器，每隔 2 秒执行一次
caseVerifMapIntervalId = setInterval(caseVerifMapAnimation, 2000);
// 问题趋势动画
const CaseVerifTrendAnimation = () => {
const myCaseVerifProTrend = caseVerifProTrend.value.chart;
if (!myCaseVerifProTrend) return;
const randomNum = Math.floor(Math.random() * 12);
myCaseVerifProTrend.dispatchAction({
type: 'showTip',
seriesIndex: 0,
dataIndex: randomNum,
});
}
caseVerifTrendIntervalId = setInterval(CaseVerifTrendAnimation, 2000);
onMounted(() => {
getData();
caseCountRankAnimation()
setupEventListeners();
});
// endregion
// region 事件||监听
const handleCommand = (year) => {
selectedYear.value = year; // 更新当前选中的年份
getCaseVerificationTrendData(selectedYear.value);
};
watch(time, () => {
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({
@ -625,26 +682,22 @@ const handleClick = (params) => {
}).href; }).href;
window.open(url, "_blank"); window.open(url, "_blank");
} }
const setupEventListeners = () => {
const myCaseVerifMap = caseVerifMap?.value?.chart;
// 鼠标移入
myCaseVerifMap.on('mousemove', (e) => {
const colors = [ clearInterval(caseVerifMapIntervalId);
{ myCaseVerifMap.dispatchAction({type: "downplay", seriesIndex: 0,});
color: "linear-gradient( 270deg, #FB002D 0%, #822232 100%)", myCaseVerifMap.dispatchAction({type: "highlight", seriesIndex: 0, dataIndex: e.dataIndex,});
percentage: 80, myCaseVerifMap.dispatchAction({type: "showTip", seriesIndex: 0, dataIndex: e.dataIndex,});
}, });
{ // 鼠标移出
color: "linear-gradient( 270deg, #FFB90E 0%, #71501D 100%)", myCaseVerifMap.on('mouseout', () => {
percentage: 60, clearInterval(caseVerifMapIntervalId); // 确保没有多个定时器同时运行
}, caseVerifMapIntervalId = setInterval(caseVerifMapAnimation, 2000);
{ });
color: "linear-gradient( 270deg, #63E700 0%, #19674C 100%)", };
percentage: 40, // endregion
},
];
</script> </script>
@ -728,6 +781,7 @@ const colors = [
right: 20px; right: 20px;
top: 15px; top: 15px;
} }
.test { .test {
width: 95px; width: 95px;
height: 25px; height: 25px;

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

@ -80,6 +80,7 @@
:option="option" :option="option"
autoresize autoresize
@click="handleClick" @click="handleClick"
ref="globalMap"
/> />
<div> <div>
@ -88,6 +89,7 @@
style="height: 280px;" style="height: 280px;"
:option="proTrend" :option="proTrend"
autoresize autoresize
ref="globalTrend"
/> />
<div class="gobal-dropdown-container"> <div class="gobal-dropdown-container">
<el-dropdown class="test" @command="handleCommand"> <el-dropdown class="test" @command="handleCommand">
@ -150,7 +152,6 @@ import {
// region 各种变量 // region 各种变量
const router = useRouter(); const router = useRouter();
const activeOrgTab = ref("1");
const fxsjlist = ref([{}]); // 分县市区机构问题排名 const fxsjlist = ref([{}]); // 分县市区机构问题排名
const jsdwlist = ref([]); // 局属单位机构问题排名 const jsdwlist = ref([]); // 局属单位机构问题排名
const ywzblist = ref([]); // 业务类型占比 const ywzblist = ref([]); // 业务类型占比
@ -180,10 +181,9 @@ const globalTempMapVoList = ref([
"value": 200 "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(currentYear); // 当前选中的年份
const colors = [ const colors = [
{ {
color: "linear-gradient( 270deg, #FB002D 0%, #822232 100%)", color: "linear-gradient( 270deg, #FB002D 0%, #822232 100%)",
@ -198,6 +198,12 @@ const colors = [
percentage: 40, percentage: 40,
}, },
]; ];
const activeOrgTab = ref("1");
const globalMap = ref(null)
const globalTrend=ref(null)
let globalMapIntervalId; // 地图定时器
let globalTrendIntervalId; // 问题趋势定时器
// endregion // endregion
// region 图表变量 // region 图表变量
@ -251,6 +257,7 @@ const option = ref({
}, },
tooltip: { tooltip: {
trigger: 'item', trigger: 'item',
position: "bottom",
formatter: function (params) { formatter: function (params) {
// console.log(params); // console.log(params);
const dataItem = globalTempMapVoList.value.find(item => item.name.includes(params.name.substring(0, 2))); const dataItem = globalTempMapVoList.value.find(item => item.name.includes(params.name.substring(0, 2)));
@ -288,13 +295,7 @@ 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",
@ -501,6 +502,7 @@ const getProblemBusinessRateData = async (timeValue = time.value) => {
wtlxlist.value = res.wtlxlist; wtlxlist.value = res.wtlxlist;
} }
function getData() { function getData() {
getOrganizationRankData(); getOrganizationRankData();
getBusinessRateData(); getBusinessRateData();
@ -511,26 +513,72 @@ function getData() {
getProblemBusinessRateData(); getProblemBusinessRateData();
} }
// 卡片动画
const cardAnimation = () => {
activeOrgTab.value = (parseInt(activeOrgTab.value) % 2 + 1).toString();
setTimeout(cardAnimation, 3000);
};
// 地图动画
const mapAnimation = () => {
const myGlobalMap = globalMap?.value?.chart;
if (!myGlobalMap) return;
// 来个随机数，9个图 0~8的整数就ok
const randomNum = Math.floor(Math.random() * 9);
myGlobalMap.dispatchAction({
type: "downplay", //downplay 取消高亮
seriesIndex: 0,
});
myGlobalMap.dispatchAction({
type: "highlight", //highLight 高亮指定的数据图形
seriesIndex: 0, //系列index
dataIndex: randomNum, //数据index
});
myGlobalMap.dispatchAction({
type: "showTip", //showTip 显示提示框
seriesIndex: 0,
dataIndex: randomNum,
});
};
// 启动定时器，每隔 2 秒执行一次
globalMapIntervalId = setInterval(mapAnimation, 2000);
// 趋势动画
const GlobalTrendAnimation = () => {
const myGlobalTrend = globalTrend?.value?.chart;
if (!myGlobalTrend) return;
const randomNum = Math.floor(Math.random() * 12);
myGlobalTrend.dispatchAction({
type: 'showTip',
seriesIndex: 0,
dataIndex: randomNum,
});
}
globalTrendIntervalId = setInterval(GlobalTrendAnimation, 2000);
onMounted(() => { onMounted(() => {
getData(); getData();
cardAnimation();
setupEventListeners();
}); });
// endregion // endregion
// region 事件||监听 // region 事件||监听
// 更换年份事件
const handleCommand = (year) => { const handleCommand = (year) => {
selectedYear.value = year; // 更新当前选中的年份 selectedYear.value = year; // 更新当前选中的年份
getGlobalRecentlyTrendByMonth(year).then(res => { getGlobalTrendData();
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 handleClick = (params) => {
const departId = params.data.departId; const departId = params.data.departId;
const url = router.resolve({ const url = router.resolve({
@ -539,6 +587,23 @@ const handleClick = (params) => {
}).href; }).href;
window.open(url, "_blank"); window.open(url, "_blank");
} }
// 鼠标经过地图事件
const setupEventListeners = () => {
const myGlobalMap = globalMap.value.chart;
// 鼠标移入
myGlobalMap.on('mousemove', (e) => {
clearInterval(globalMapIntervalId);
myGlobalMap.dispatchAction({type: "downplay", seriesIndex: 0,});
myGlobalMap.dispatchAction({type: "highlight", seriesIndex: 0, dataIndex: e.dataIndex,});
myGlobalMap.dispatchAction({type: "showTip", seriesIndex: 0, dataIndex: e.dataIndex,});
});
// 鼠标移出
myGlobalMap.on('mouseout', () => {
clearInterval(globalMapIntervalId); // 确保没有多个定时器同时运行
globalMapIntervalId = setInterval(mapAnimation, 2000);
});
};
// endregion // endregion

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

@ -408,6 +408,20 @@ const time = 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(currentYear); // 当前选中的年份 const selectedYear = ref(currentYear); // 当前选中的年份
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 所有函数
@ -985,6 +999,7 @@ const option3 = {
// endregion // endregion
// region 监听|事件
const handleCommand = (year) => { const handleCommand = (year) => {
selectedYear.value = year; selectedYear.value = year;
getTrend() getTrend()
@ -995,10 +1010,10 @@ watch(time, () => {
}) })
onMounted(() => { onMounted(() => {
getData(); getData();
// timer = setInterval(() => { timer = setInterval(() => {
// activeMailTab.value = (parseInt(activeMailTab.value) % 3 + 1).toString(); activeMailTab.value = (parseInt(activeMailTab.value) % 3 + 1).toString();
// console.log("Active Tab: ", activeMailTab.value); console.log("Active Tab: ", activeMailTab.value);
// }, 3000); // 每3秒切换一次 }, 3000); // 每3秒切换一次
}); });
const handleClick = (params) => { const handleClick = (params) => {
const departId = params.data.departId; const departId = params.data.departId;
@ -1008,21 +1023,7 @@ const handleClick = (params) => {
}).href; }).href;
window.open(url, "_blank"); window.open(url, "_blank");
} }
const colors = [ // endregion
{
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>

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

@ -9,7 +9,7 @@
<datav-card title="日常督察情况"> <datav-card title="日常督察情况">
<datav-tabs <datav-tabs
v-model="activeOrgTab" v-model="rcdcProRankTab"
type="bottom-button" type="bottom-button"
> >
<datav-tab-item label="分县市局" name="1"> <datav-tab-item label="分县市局" name="1">
@ -173,12 +173,14 @@
:option="option" :option="option"
autoresize autoresize
@click="handleClick" @click="handleClick"
ref="sceneInspMap"
/> />
<datav-card title="问题趋势"> <datav-card title="问题趋势">
<v-charts <v-charts
style="height: 280px" style="height: 280px"
:option="proTrend" :option="proTrend"
autoresize autoresize
ref="sceneInspProTrend"
/> />
<div class="gobal-dropdown-container"> <div class="gobal-dropdown-container">
<el-dropdown class="test" @command="handleCommand"> <el-dropdown class="test" @command="handleCommand">
@ -198,7 +200,7 @@
<el-col :span="6"> <el-col :span="6">
<datav-card> <datav-card>
<datav-tabs v-model="activeTabRight" size="small"> <datav-tabs v-model="zxdcProRankTab" size="small">
<datav-tab-item label="黄赌毒" name="1"> <datav-tab-item label="黄赌毒" name="1">
<datav-tabs <datav-tabs
type="bottom-button"> type="bottom-button">
@ -795,7 +797,7 @@ import {
import router from "@/router/index.ts"; import router from "@/router/index.ts";
// region 所有变量 // region 所有变量
const activeTabRight = ref("1")
const overview = ref({ const overview = ref({
problemNumber: 0, problemNumber: 0,
rectifingNumber: 0, rectifingNumber: 0,
@ -913,11 +915,18 @@ 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(currentYear); // 当前选中的年份
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 sceneInspMap = ref(null);
const sceneInspProTrend = ref(null);
const rcdcProRankTab = ref("1"); // 日常督察问题排行tab
const zxdcProRankTab = ref("1"); // 专项督察问题排行tab
let sceneInspMapIntervalId;
let sceneInspTrendIntervalId;
const colors = [ const colors = [
{ {
color: "linear-gradient( 270deg, #FB002D 0%, #822232 100%)", color: "linear-gradient( 270deg, #FB002D 0%, #822232 100%)",
@ -965,8 +974,9 @@ const option = ref({
}, },
tooltip: { tooltip: {
trigger: 'item', trigger: 'item',
position: 'bottom',
formatter: function (params) { formatter: function (params) {
console.log(params) // console.log(params)
const dataItem = superviseTempMapVoList.value.find(item => item.name.includes(params.name.substring(0, 2))); const dataItem = superviseTempMapVoList.value.find(item => item.name.includes(params.name.substring(0, 2)));
if (dataItem) { if (dataItem) {
return ` return `
@ -1243,8 +1253,56 @@ const getData = async () => {
getCheckBeerData(); getCheckBeerData();
} }
const rcdxRankAnimation = () => {
rcdcProRankTab.value = (parseInt(rcdcProRankTab.value) % 2 + 1).toString();
setTimeout(rcdxRankAnimation, 3000);
};
const zxdxRankAnimation = () => {
zxdcProRankTab.value = (parseInt(zxdcProRankTab.value) % 5 + 1).toString();
setTimeout(zxdxRankAnimation, 3000);
};
const sceneInspMapAnimation = () => {
const mySceneInspMap = sceneInspMap?.value?.chart;
if (!mySceneInspMap) return;
// 来个随机数，9个图 0~8的整数就ok
const randomNum = Math.floor(Math.random() * 9);
mySceneInspMap.dispatchAction({
type: "downplay", //downplay 取消高亮
seriesIndex: 0,
});
mySceneInspMap.dispatchAction({
type: "highlight", //highLight 高亮指定的数据图形
seriesIndex: 0, //系列index
dataIndex: randomNum, //数据index
});
mySceneInspMap.dispatchAction({
type: "showTip", //showTip 显示提示框
seriesIndex: 0,
dataIndex: randomNum,
});
};
// 启动定时器，每隔 2 秒执行一次
sceneInspMapIntervalId = setInterval(sceneInspMapAnimation, 2000);
const SceneInspTrendAnimation = () => {
const mySceneInspProTrend = sceneInspProTrend.value.chart;
if (!mySceneInspProTrend) return;
const randomNum = Math.floor(Math.random() * 12);
mySceneInspProTrend.dispatchAction({
type: 'showTip',
seriesIndex: 0,
dataIndex: randomNum,
});
}
sceneInspTrendIntervalId = setInterval(SceneInspTrendAnimation, 2000);
onMounted(() => { onMounted(() => {
getData(); getData();
rcdxRankAnimation(); // 日常督察问题排行动画
zxdxRankAnimation(); // 专项督察问题排行动画
setupEventListeners();
}); });
// endregion // endregion
@ -1263,7 +1321,6 @@ const handleCommand = (year) => {
proTrend.value.series[0].data = values; proTrend.value.series[0].data = values;
}); });
}; };
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 +1329,23 @@ const handleClick = (params) => {
}).href; }).href;
window.open(url, "_blank"); window.open(url, "_blank");
} }
// 鼠标经过地图事件
const setupEventListeners = () => {
const mySceneInspMap = sceneInspMap?.value?.chart;
// 鼠标移入
mySceneInspMap.on('mousemove', (e) => {
clearInterval(sceneInspMapIntervalId);
mySceneInspMap.dispatchAction({type: "downplay", seriesIndex: 0,});
mySceneInspMap.dispatchAction({type: "highlight", seriesIndex: 0, dataIndex: e.dataIndex,});
mySceneInspMap.dispatchAction({type: "showTip", seriesIndex: 0, dataIndex: e.dataIndex,});
});
// 鼠标移出
mySceneInspMap.on('mouseout', () => {
clearInterval(sceneInspMapIntervalId); // 确保没有多个定时器同时运行
sceneInspMapIntervalId = setInterval(sceneInspMapAnimation, 2000);
});
};
// endregion // endregion
</script> </script>

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

@ -46,6 +46,7 @@
<datav-card title="问题数排名" sub-title="查实问题数" style="height: 370px;"> <datav-card title="问题数排名" sub-title="查实问题数" style="height: 370px;">
<datav-tabs <datav-tabs
type="bottom-button" type="bottom-button"
v-model="proRankTab"
> >
<datav-tab-item label="分县市局" name="1"> <datav-tab-item label="分县市局" name="1">
<el-scrollbar height="280px"> <el-scrollbar height="280px">
@ -106,6 +107,7 @@
:option="option" :option="option"
autoresize autoresize
@click="handleClick" @click="handleClick"
ref="videoMap"
/> />
<datav-card title="问题趋势"> <datav-card title="问题趋势">
<v-charts <v-charts
@ -198,13 +200,14 @@ 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 所有变量 // 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 proRankTab = ref("1");
const fxsjRankList = ref([]); const fxsjRankList = ref([]);
const jsdwRankList = ref([]); const jsdwRankList = ref([]);
@ -227,7 +230,9 @@ 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(currentYear); // 当前选中的年份
const videoMap = ref(null);
let videoMapIntervalId;
const colors = [ const colors = [
{ {
color: "linear-gradient( 270deg, #FB002D 0%, #822232 100%)", color: "linear-gradient( 270deg, #FB002D 0%, #822232 100%)",
@ -316,6 +321,7 @@ const option = ref({
}, },
tooltip: { tooltip: {
trigger: 'item', trigger: 'item',
position: "bottom",
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.includes(params.name.substring(0, 2)));
if (dataItem) { if (dataItem) {
@ -500,17 +506,61 @@ const getData = async () => {
getVideoSuperviseTrendData(selectedYear.value) getVideoSuperviseTrendData(selectedYear.value)
getVideoSuperviseProblemTypeRateData(time.value); getVideoSuperviseProblemTypeRateData(time.value);
} }
// endregion
const proCardAnimation = () => {
proRankTab.value = (parseInt(proRankTab.value) % 2 + 1).toString();
setTimeout(proCardAnimation, 3000);
};
// 地图动画
const videoMapAnimation = () => {
const myVideoMap = videoMap?.value?.chart;
if (!myVideoMap) return;
// 来个随机数，9个图 0~8的整数就ok
const randomNum = Math.floor(Math.random() * 9);
myVideoMap.dispatchAction({
type: "downplay", //downplay 取消高亮
seriesIndex: 0,
});
myVideoMap.dispatchAction({
type: "highlight", //highLight 高亮指定的数据图形
seriesIndex: 0, //系列index
dataIndex: randomNum, //数据index
});
myVideoMap.dispatchAction({
type: "showTip", //showTip 显示提示框
seriesIndex: 0,
dataIndex: randomNum,
});
};
// 启动定时器，每隔 2 秒执行一次
videoMapIntervalId = setInterval(videoMapAnimation, 2000);
const SceneInspTrendAnimation = () => {
const mySceneInspProTrend = sceneInspProTrend.value.chart;
if (!mySceneInspProTrend) return;
const randomNum = Math.floor(Math.random() * 12);
mySceneInspProTrend.dispatchAction({
type: 'showTip',
seriesIndex: 0,
dataIndex: randomNum,
});
}
sceneInspTrendIntervalId = setInterval(SceneInspTrendAnimation, 2000);
onMounted(() => {
getData();
proCardAnimation();
setupEventListeners();
})
// endregion
// region 事件||监听 // region 事件||监听
watch(time, () => { watch(time, () => {
getData() getData()
}) })
onMounted(() => {
getData()
})
const handleCommand = (year) => { const handleCommand = (year) => {
selectedYear.value = year; // 更新当前选中的年份 selectedYear.value = year; // 更新当前选中的年份
getVideoSuperviseTrendData(selectedYear.value) getVideoSuperviseTrendData(selectedYear.value)
@ -523,6 +573,24 @@ const handleClick = (params) => {
}).href; }).href;
window.open(url, "_blank"); window.open(url, "_blank");
} }
// 鼠标经过地图事件
const setupEventListeners = () => {
const myVideoMap = videoMap?.value?.chart;
// 鼠标移入
myVideoMap.on('mousemove', (e) => {
clearInterval(videoMapIntervalId);
myVideoMap.dispatchAction({type: "downplay", seriesIndex: 0,});
myVideoMap.dispatchAction({type: "highlight", seriesIndex: 0, dataIndex: e.dataIndex,});
myVideoMap.dispatchAction({type: "showTip", seriesIndex: 0, dataIndex: e.dataIndex,});
});
// 鼠标移出
myVideoMap.on('mouseout', () => {
clearInterval(videoMapIntervalId); // 确保没有多个定时器同时运行
videoMapIntervalId = setInterval(videoMapAnimation, 2000);
});
};
// endregion // endregion

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

@ -5,7 +5,7 @@
<main> <main>
<el-row :gutter="16"> <el-row :gutter="16">
<el-col :span="6"> <el-col :span="6">
<datav-card title="所队排名" subTitle="查实案件数"> <datav-card title="所队排名" subTitle="案件数">
<datav-tabs <datav-tabs
type="bottom-button" type="bottom-button"
> >

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

@ -79,7 +79,7 @@
style="height: 360px" style="height: 360px"
:option="option" :option="option"
autoresize autoresize
ref="chart" ref="subOneGlobalMap"
/> />
<div> <div>
@ -152,7 +152,7 @@ import {
const router = useRouter(); const router = useRouter();
const route = useRoute(); const route = useRoute();
const currentMapData = ref({}) const currentMapData = ref({})
const chart = ref(null); // 地图 const subOneGlobalMap = ref(null); // 地图
const currentDepartId = route.query.departId; const currentDepartId = route.query.departId;
const activeOrgTab = ref("1"); const activeOrgTab = ref("1");
const fxsjlist = ref([]); // 分县市区机构问题排名 const fxsjlist = ref([]); // 分县市区机构问题排名
@ -191,6 +191,7 @@ const colors = [
percentage: 40, percentage: 40,
}, },
]; ];
let subOneGlobalMapIntervalId ; // 问题趋势
// endregion // endregion
@ -235,16 +236,9 @@ const wtlxPieOption = computed(() => {
// 地图 // 地图
echarts.registerMap("changsha", changshaMap); echarts.registerMap("changsha", changshaMap);
const option = ref({ const option = ref({
geo: {
map: "changsha",
itemStyle: {
normal: {
opacity: 0 // 设置透明度
},
}
},
tooltip: { tooltip: {
trigger: 'item', trigger: 'item',
position: 'bottom',
formatter: function (params) { formatter: function (params) {
const dataItem = globalTempMapVoList.value.find(item => item.name === params.name) || {}; // 找到对应的数据项 const dataItem = globalTempMapVoList.value.find(item => item.name === params.name) || {}; // 找到对应的数据项
console.log("Data item:", dataItem); console.log("Data item:", dataItem);
@ -404,8 +398,9 @@ const proTrend = ref({
const getMapJSON = async (departId = currentDepartId) => { const getMapJSON = async (departId = currentDepartId) => {
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); subOneGlobalMap.value.chart.setOption(option.value);
} }
const getOrganizationProRankData = async (departId = currentDepartId, timeValue = time.value) => { const getOrganizationProRankData = async (departId = currentDepartId, timeValue = time.value) => {
const res = await getSubOneOrganizationRank(departId, timeValue); const res = await getSubOneOrganizationRank(departId, timeValue);
@ -455,8 +450,6 @@ const getSubOneProblemBusinessRateData = async (departId = currentDepartId, time
const res = await getSubOneProblemBusinessRate(departId, timeValue); const res = await getSubOneProblemBusinessRate(departId, timeValue);
wtlxlist.value = res.wtlxlist; wtlxlist.value = res.wtlxlist;
} }
const getData = () => { const getData = () => {
getOrganizationProRankData(currentDepartId, time.value); getOrganizationProRankData(currentDepartId, time.value);
getBusinessRateData(currentDepartId, time.value); getBusinessRateData(currentDepartId, time.value);
@ -468,9 +461,43 @@ const getData = () => {
getMapJSON(currentDepartId); getMapJSON(currentDepartId);
}; };
// 卡片动画
const cardAnimation = () => {
activeOrgTab.value = (parseInt(activeOrgTab.value) % 2 + 1).toString();
setTimeout(cardAnimation, 3000);
};
//地图动画
const mapAnimation = () => {
const mySubOneGlobalMap = subOneGlobalMap.value.chart;
if (!mySubOneGlobalMap) return;
// 来个随机数，9个图 0~8的整数就ok
const tempNum = currentMapData?.value?.geoJson?.features?.length
const randomNum = Math.floor(Math.random() * tempNum);
mySubOneGlobalMap.dispatchAction({
type: "downplay", //downplay 取消高亮
seriesIndex: 0,
});
mySubOneGlobalMap.dispatchAction({
type: "highlight", //highLight 高亮指定的数据图形
seriesIndex: 0, //系列index
dataIndex: randomNum, //数据index
});
mySubOneGlobalMap.dispatchAction({
type: "showTip", //showTip 显示提示框
seriesIndex: 0,
dataIndex: randomNum,
});
};
// 启动定时器，每隔 2 秒执行一次
subOneGlobalMapIntervalId = setInterval(mapAnimation, 2000);
onMounted(() => { onMounted(() => {
getData() getData();
cardAnimation();
mapAnimation();
setupEventListeners();
}); });
// endregion // endregion
@ -482,6 +509,22 @@ const handleCommand = (year) => {
watch(time, () => { watch(time, () => {
getData(); getData();
}); });
const setupEventListeners = () => {
const mySubOneGlobalMap = subOneGlobalMap.value.chart;
// 鼠标移入
mySubOneGlobalMap.on('mousemove', (e) => {
// console.log(e.dataIndex);
clearInterval(subOneGlobalMapIntervalId);
mySubOneGlobalMap.dispatchAction({type: "downplay", seriesIndex: 0,});
mySubOneGlobalMap.dispatchAction({type: "highlight", seriesIndex: 0, dataIndex: e.dataIndex,});
mySubOneGlobalMap.dispatchAction({type: "showTip", seriesIndex: 0, dataIndex: e.dataIndex,});
});
// 鼠标移出
mySubOneGlobalMap.on('mouseout', () => {
clearInterval(subOneGlobalMapIntervalId); // 确保没有多个定时器同时运行
subOneGlobalMapIntervalId = setInterval(mapAnimation, 2000);
});
};
// endregion // endregion

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

@ -794,9 +794,8 @@ import moment from "moment";
import {getSubOneStreetMap} from "@/api/screen/subScreen/subOneGlobal.ts"; import {getSubOneStreetMap} from "@/api/screen/subScreen/subOneGlobal.ts";
import { import {
getAllSubOneSupervisionNotifyCount,
getSubOneChangedRank, getSubOneCheckBeer, getSubOneCompanyProblem, getSubOneGunController, getSubOneHandleCase, getSubOneChangedRank, getSubOneCheckBeer, getSubOneCompanyProblem, getSubOneGunController, getSubOneHandleCase,
getSubOneProblemTypeRate, getSubOneSupervisionMap, getSubOneProblemTypeRate, getSubOneSupervisionMap, getSubOneSupervisionNotifyCount,
getSubOneSupervisionTrend, getSubOneYellowBetDrug getSubOneSupervisionTrend, getSubOneYellowBetDrug
} from "@/api/screen/subScreen/subOneSupervisionNotify.ts"; } from "@/api/screen/subScreen/subOneSupervisionNotify.ts";
@ -1118,8 +1117,7 @@ const getMapJSON = async (departId = currentDepartId) => {
echarts.registerMap("changsha", res); echarts.registerMap("changsha", res);
subOneSceneInspMapChart.value.chart.setOption(option.value); subOneSceneInspMapChart.value.chart.setOption(option.value);
} }
const getSubOneChangedRankData = async (departId, times) => {
const getChangedRank = async (departId, times) => {
const res = await getSubOneChangedRank(departId, times) const res = await getSubOneChangedRank(departId, times)
fxsjRankOverview.value = res.fxsjRankOverview; fxsjRankOverview.value = res.fxsjRankOverview;
jsdwRankOverview.value = res.jsdwRankOverview; jsdwRankOverview.value = res.jsdwRankOverview;
@ -1128,15 +1126,13 @@ const getChangedRank = async (departId, times) => {
console.log(res); console.log(res);
} }
const getSubOneProblemTypeRateData = async (departId, times) => {
const getProblemTypeRate = async (departId, times) => {
const res = await getSubOneProblemTypeRate(departId, times) const res = await getSubOneProblemTypeRate(departId, times)
wtlxList.value = res.wtlxList wtlxList.value = res.wtlxList
console.log(res); console.log(res);
} }
const getSubOneSupervisionNotifyCountData = async (departId, times) => {
const getSupervisionOverView = async (departId, times) => { const res = await getSubOneSupervisionNotifyCount(departId, 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),
@ -1146,8 +1142,7 @@ const getSupervisionOverView = async (departId, times) => {
supervisionNotifyOrgTotal: Number(res.overview.departNumber), supervisionNotifyOrgTotal: Number(res.overview.departNumber),
}); });
} }
const getSubOneSupervisionMapData = async (departId, times) => {
const getMapData = async (departId, times) => {
const res = await getSubOneSupervisionMap(departId, times); const res = await getSubOneSupervisionMap(departId, times);
const mappedData = res.superviseTempMapVoList.map(item => { const mappedData = res.superviseTempMapVoList.map(item => {
return { return {
@ -1166,93 +1161,75 @@ const getMapData = async (departId, times) => {
superviseTempMapVoList.value = mappedData; superviseTempMapVoList.value = mappedData;
option.value.series[0].data = mappedData; option.value.series[0].data = mappedData;
} }
const getSupervisionTrend = async (departId, times) => { const getSubOneSupervisionTrendData = async (departId, year) => {
const res = await getSubOneSupervisionTrend(departId, times) const res = await getSubOneSupervisionTrend(departId, year)
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);
proTrend.value.xAxis.data = categories; proTrend.value.xAxis.data = categories;
proTrend.value.series[0].data = values; proTrend.value.series[0].data = values;
} }
const getSubOneYellowBetDrugData = async (departId, times) => {
const getYellowBetDrugData = async (departId, times) => {
const res = await getSubOneYellowBetDrug(departId, 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 getSubOneGunControllerData = async (departId, times) => {
const getGunControllerData = async (departId, times) => {
const res = await getSubOneGunController(departId, 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 getSubOneCompanyProblemData = async (departId, times) => {
const getCompanyProblemData = async (departId, times) => {
const res = await getSubOneCompanyProblem(departId, 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 getSubOneHandleCaseData = async (departId, times) => {
const getHandleCaseData = async (departId, times) => {
const res = await getSubOneHandleCase(departId, 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 getSubOneCheckBeerData = async (departId, times) => {
const getCheckBeerData = async (departId, times) => {
const res = await getSubOneCheckBeer(departId, 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
} }
const getData = async () => { const getData = async () => {
getMapJSON(currentDepartId); getMapJSON(currentDepartId);
getChangedRank(currentDepartId, time.value); getSubOneChangedRankData(currentDepartId, time.value);
getProblemTypeRate(currentDepartId, time.value); getSubOneProblemTypeRateData(currentDepartId, time.value);
getSupervisionOverView(currentDepartId, time.value); getSubOneSupervisionNotifyCountData(currentDepartId, time.value);
getMapData(currentDepartId, time.value); getSubOneSupervisionMapData(currentDepartId, time.value);
getSupervisionTrend(currentDepartId, time.value); getSubOneSupervisionTrendData(currentDepartId, selectedYear.value);
getYellowBetDrugData(currentDepartId, time.value); getSubOneYellowBetDrugData(currentDepartId, time.value);
getGunControllerData(currentDepartId, time.value); getSubOneGunControllerData(currentDepartId, time.value);
getCompanyProblemData(currentDepartId, time.value); getSubOneCompanyProblemData(currentDepartId, time.value);
getHandleCaseData(currentDepartId, time.value); getSubOneHandleCaseData(currentDepartId, time.value);
getCheckBeerData(currentDepartId, time.value); getSubOneCheckBeerData(currentDepartId, time.value);
} }
onMounted(() => {
getData();
});
// endregion // endregion
// region 监听 // region 监听
watch(time, () => { watch(time, () => {
getData(); getData();
}); });
onMounted(() => {
getData();
});
const handleCommand = (year) => { const handleCommand = (year) => {
selectedYear.value = year; // 更新当前选中的年份 selectedYear.value = year; // 更新当前选中的年份
getSupervisionTrend(currentDepartId, year).then(res => { getSubOneSupervisionTrendData(currentDepartId, 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;
});
}; };
// endregion // endregion

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

@ -45,6 +45,7 @@
<datav-card title="问题数排名" sub-title="问题数" style="height: 370px;"> <datav-card title="问题数排名" sub-title="问题数" style="height: 370px;">
<datav-tabs <datav-tabs
type="bottom-button" type="bottom-button"
v-model="subOneProRankTab"
> >
<datav-tab-item label="派出所" name="1"> <datav-tab-item label="派出所" name="1">
<el-scrollbar height="280px"> <el-scrollbar height="280px">
@ -230,6 +231,8 @@ 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 subOneProRankTab=ref("1")
let subOneVideoMapIntervalId;
const colors = [ const colors = [
{ {
color: "linear-gradient( 270deg, #FB002D 0%, #822232 100%)", color: "linear-gradient( 270deg, #FB002D 0%, #822232 100%)",
@ -311,6 +314,7 @@ echarts.registerMap("changsha", changshaMap);
const option = ref({ const option = ref({
tooltip: { tooltip: {
trigger: 'item', trigger: 'item',
position: 'bottom',
formatter: function (params) { formatter: function (params) {
const dataItem = mapIconList.value.find(item => item.name === params.name) || {}; // 找到对应的数据项 const dataItem = mapIconList.value.find(item => item.name === params.name) || {}; // 找到对应的数据项
console.log("Data item:", dataItem); console.log("Data item:", dataItem);
@ -471,8 +475,45 @@ const getData = async () => {
getSubOneVideoSuperviseTrendData(currentDepartId, selectedYear.value) getSubOneVideoSuperviseTrendData(currentDepartId, selectedYear.value)
getSubOneVideoSuperviseProblemTypeRateData(currentDepartId, time.value) getSubOneVideoSuperviseProblemTypeRateData(currentDepartId, time.value)
} }
// 卡片动画
const subOneProCardAnimation = () => {
subOneProRankTab.value = (parseInt(subOneProRankTab.value) % 2 + 1).toString();
setTimeout(subOneProCardAnimation, 3000);
};
// 地图动画
const subOneVideoMapAnimation = () => {
const mySubOneVideoInspMapChart = subOneVideoInspMapChart?.value?.chart;
if (!mySubOneVideoInspMapChart) return;
// 获取随机数，介于0到当前地图数据长度之间
const tempNum = currentMapData?.value?.geoJson?.features?.length
const randomNum = Math.floor(Math.random() * tempNum);
mySubOneVideoInspMapChart.dispatchAction({
type: "downplay", //downplay 取消高亮
seriesIndex: 0,
});
mySubOneVideoInspMapChart.dispatchAction({
type: "highlight", //highLight 高亮指定的数据图形
seriesIndex: 0, //系列index
dataIndex: randomNum, //数据index
});
mySubOneVideoInspMapChart.dispatchAction({
type: "showTip", //showTip 显示提示框
seriesIndex: 0,
dataIndex: randomNum,
});
};
// 启动定时器，每隔 2 秒执行一次
subOneVideoMapIntervalId = setInterval(subOneVideoMapAnimation, 2000);
onMounted(() => { onMounted(() => {
getData() getData();
subOneProCardAnimation(); // 启动卡片动画
setupEventListeners(); // 设置地图监听
}) })
// endregion // endregion
@ -484,6 +525,25 @@ const handleCommand = (year) => {
selectedYear.value = year; // 更新当前选中的年份 selectedYear.value = year; // 更新当前选中的年份
getSubOneVideoSuperviseTrendData(currentDepartId, selectedYear.value) getSubOneVideoSuperviseTrendData(currentDepartId, selectedYear.value)
}; };
// 鼠标经过地图事件
const setupEventListeners = () => {
const mySubOneVideoInspMapChart = subOneVideoInspMapChart?.value?.chart;
// 鼠标移入
mySubOneVideoInspMapChart.on('mousemove', (e) => {
clearInterval(subOneVideoMapIntervalId);
mySubOneVideoInspMapChart.dispatchAction({type: "downplay", seriesIndex: 0,});
mySubOneVideoInspMapChart.dispatchAction({type: "highlight", seriesIndex: 0, dataIndex: e.dataIndex,});
mySubOneVideoInspMapChart.dispatchAction({type: "showTip", seriesIndex: 0, dataIndex: e.dataIndex,});
});
// 鼠标移出
mySubOneVideoInspMapChart.on('mouseout', () => {
clearInterval(subOneVideoMapIntervalId); // 确保没有多个定时器同时运行
subOneVideoMapIntervalId = setInterval(subOneVideoMapAnimation, 2000);
});
};
// endregion // endregion
</script> </script>

Write Preview
Loading…
Cancel
Save