${params.name}
@@ -1146,8 +1145,8 @@ const getSubOneChangedRankData = async (departId, times) => {
}
const getSubOneProblemTypeRateData = async (departId, times) => {
const res = await getSubOneProblemTypeRate(departId, times)
+ // wtlxList.value = circularChart;
wtlxList.value = res.wtlxList
- console.log(res);
}
const getSubOneSupervisionNotifyCountData = async (departId, times) => {
const res = await getSubOneSupervisionNotifyCount(departId, times)
@@ -1235,19 +1234,174 @@ const getData = async () => {
getSubOneHandleCaseData(currentDepartId, time.value);
getSubOneCheckBeerData(currentDepartId, time.value);
}
-onMounted(() => {
- getData();
-});
+
// endregion
+// region 动画
+// 日常督察问题排行动画
+const subOneSceneInspRcdxRankAnimation = () => {
+ subOneRcdcProRankTab.value = (parseInt(subOneRcdcProRankTab.value) % 2 + 1).toString();
+};
+subOneSceneInspRcdxIntervalId = setInterval(subOneSceneInspRcdxRankAnimation, 3000);
+// 问题类型占比
+const subOneSceneProblemTypeRateAnimation = () => {
+ const temp = subOneSceneProblemTypeRate?.value?.chart;
+ if (!temp) return;
+ const length = wtlxPieOption.value.series[0].data.length;
+ const randomNum = Math.floor(Math.random() * length);
+ temp?.dispatchAction({type: 'downplay', seriesIndex: 0});
+ temp?.dispatchAction({type: 'highlight', seriesIndex: 0, dataIndex: randomNum}); // 显示
+ temp?.dispatchAction({type: 'showTip', seriesIndex: 0, dataIndex: randomNum});
+}
+subOneSceneProblemTypeRateIntervalId = setInterval(subOneSceneProblemTypeRateAnimation, 2000);
+
+// 地图动画
+const subOneSceneInspMapAnimation = () => {
+ const mapTemp = subOneSceneInspMapChart?.value?.chart;
+ if (!mapTemp) return;
+ // 来个随机数，9个图 0~8的整数就ok
+ const randomNum = Math.floor(Math.random() * 9);
+ mapTemp.dispatchAction({
+ type: "downplay", //downplay 取消高亮
+ seriesIndex: 0,
+ });
+ mapTemp.dispatchAction({
+ type: "highlight", //highLight 高亮指定的数据图形
+ seriesIndex: 0, //系列index
+ dataIndex: randomNum, //数据index
+ });
+ mapTemp.dispatchAction({
+ type: "showTip", //showTip 显示提示框
+ seriesIndex: 0,
+ dataIndex: randomNum,
+ });
+};
+// 启动定时器，每隔 2 秒执行一次
+subOneSceneInspMapIntervalId = setInterval(subOneSceneInspMapAnimation, 2000);
+// 问题趋势动画
+const subOneSceneInspTrendAnimation = () => {
+ const trendTemp = subOneSceneInspProTrend?.value?.chart;
+ if (!trendTemp) return;
+ const randomNum = Math.floor(Math.random() * 12);
+ trendTemp.dispatchAction({
+ type: 'showTip',
+ seriesIndex: 0,
+ dataIndex: randomNum,
+ });
+}
+subOneSceneInspTrendIntervalId = setInterval(subOneSceneInspTrendAnimation, 2000);
+// // 专项督察问题排行动画 直接切换大tab，里面不管了
+const subOneSceneInspZxdxRankAnimation = () => {
+ subOneZxdcProRankTab.value = (parseInt(subOneZxdcProRankTab.value) % 5 + 1).toString();
+};
+subOneSceneInspZxdxIntervalId = setInterval(subOneSceneInspZxdxRankAnimation, 3000);
+// 工作动态动画
+// const subOneSceneWorkDynamicsAnimation = () => {
+// const sceneScrollTemp = subOneSceneScrollbar?.value;
+// const maxScroll = sceneScrollTemp?.wrapRef?.scrollHeight - sceneScrollTemp?.wrapRef?.clientHeight;
+// currentIndex.value > maxScroll ? currentIndex.value = 0 : currentIndex.value += 1;
+// if (currentIndex.value === 0) {
+// sceneScrollTemp?.scrollTo({top: currentIndex.value});
+// } else {
+// sceneScrollTemp?.scrollTo({top: currentIndex.value});
+// }
+// }
+// subOneSceneWorkDynamicsIntervalId = setInterval(subOneSceneWorkDynamicsAnimation, 50);
+// endregion
+
+
// region 监听
watch(time, () => {
getData();
});
+onMounted(() => {
+ getData();
+ setupEventListeners();
+});
const handleCommand = (year) => {
selectedYear.value = year; // 更新当前选中的年份
getSubOneSupervisionTrendData(currentDepartId, selectedYear.value);
};
+
+// 鼠标经过地图事件
+const setupEventListeners = () => {
+ subOneSceneInspRcdxRankAnimationStop();
+ subOneSceneProblemTypeRateAnimationStop();
+ subOneSceneInspMapAnimationStop();
+ subOneSceneInspTrendAnimationStop();
+ subOneSceneInspZxdxRankAnimationStop();
+ // subOneSceneWorkDynamicsAnimationStop();
+};
+const subOneSceneInspRcdxRankAnimationStop = () => {
+ const temp = subOneSceneInspRcdcProRankTabs.value?.$el;
+ temp.addEventListener('mouseenter', () => {
+ clearInterval(subOneSceneInspRcdxIntervalId)
+ });
+ temp.addEventListener('mouseleave', () => {
+ clearInterval(subOneSceneInspRcdxIntervalId);
+ subOneSceneInspRcdxIntervalId = setInterval(subOneSceneInspRcdxRankAnimation, 3000);
+ });
+}
+const subOneSceneProblemTypeRateAnimationStop = () => {
+ const temp = subOneSceneProblemTypeRate?.value?.chart;
+ temp.on('mousemove', (e) => {
+ clearInterval(subOneSceneProblemTypeRateIntervalId);
+ temp.dispatchAction({type: "downplay", seriesIndex: 0,});
+ temp.dispatchAction({type: "highlight", seriesIndex: 0, dataIndex: e.dataIndex,});
+ temp.dispatchAction({type: "showTip", seriesIndex: 0, dataIndex: e.dataIndex,});
+ })
+ temp.on('mouseout', () => {
+ clearInterval(subOneSceneProblemTypeRateIntervalId);
+ subOneSceneProblemTypeRateIntervalId = setInterval(subOneSceneProblemTypeRateAnimation, 2000);
+ })
+}
+const subOneSceneInspMapAnimationStop = () => {
+ const mapTemp = subOneSceneInspMapChart?.value?.chart;
+ // 鼠标移入
+ mapTemp.on('mousemove', (e) => {
+ clearInterval(subOneSceneInspMapIntervalId);
+ mapTemp.dispatchAction({type: "downplay", seriesIndex: 0,});
+ mapTemp.dispatchAction({type: "highlight", seriesIndex: 0, dataIndex: e.dataIndex,});
+ mapTemp.dispatchAction({type: "showTip", seriesIndex: 0, dataIndex: e.dataIndex,});
+ });
+ // 鼠标移出
+ mapTemp.on('mouseout', () => {
+ clearInterval(subOneSceneInspMapIntervalId); // 确保没有多个定时器同时运行
+ subOneSceneInspMapIntervalId = setInterval(subOneSceneInspMapAnimation, 2000);
+ });
+}
+const subOneSceneInspTrendAnimationStop = () => {
+ const temp = subOneSceneInspProTrend?.value.getDom();
+ temp.addEventListener('mouseenter', () => {
+ clearInterval(subOneSceneInspTrendIntervalId);
+ });
+ temp.addEventListener('mouseleave', () => {
+ clearInterval(subOneSceneInspTrendIntervalId);
+ subOneSceneInspTrendIntervalId = setInterval(subOneSceneInspTrendAnimation, 2000);
+ });
+}
+const subOneSceneInspZxdxRankAnimationStop = () => {
+ const temp = subOneSceneInspZxdcProRankTabs.value?.$el;
+ temp.addEventListener('mouseenter', () => {
+ clearInterval(subOneSceneInspZxdxIntervalId)
+ });
+ temp.addEventListener('mouseleave', () => {
+ clearInterval(subOneSceneInspZxdxIntervalId);
+ subOneSceneInspZxdxIntervalId = setInterval(subOneSceneInspZxdxRankAnimation, 3000);
+ });
+}
+// const sceneWorkDynamicsAnimationStop = () => {
+// const temp = sceneScrollbar.value?.$el;
+// temp.addEventListener('mouseenter', () => {
+// // alert(1);
+// clearInterval(sceneWorkDynamicsIntervalId)
+// });
+// temp.addEventListener('mouseleave', () => {
+// clearInterval(sceneWorkDynamicsIntervalId);
+// sceneWorkDynamicsIntervalId = setInterval(sceneWorkDynamicsAnimation, 50);
+// });
+// }
+
// endregion
diff --git a/src/views/datav/subonedatav/SubOneVideoInsp.vue b/src/views/datav/subonedatav/SubOneVideoInsp.vue
index 388f569..5a8e199 100644
--- a/src/views/datav/subonedatav/SubOneVideoInsp.vue
+++ b/src/views/datav/subonedatav/SubOneVideoInsp.vue
@@ -46,6 +46,7 @@
@@ -105,13 +106,15 @@
style="height: 420px"
:option="option"
autoresize
- ref="subOneVideoInspMapChart"
+ ref="subOneVideoMapChart"
+ @click="handleClick"
/>
@@ -179,12 +182,14 @@
style="height: 300px"
:option="ProblemTypeRateChart"
autoresize
+ ref="subOneVideoProblemTypeRate"
/>
+
@@ -192,16 +197,18 @@
import changshaMap from "@/assets/data/changsha.json";
import vCharts from "vue-echarts";
import * as echarts from "echarts/core";
-import {
- getVideoSuperviseMap
-} from "@/api/screen/videoSupervise.ts";
import moment from "moment/moment.js";
import {getSubOneStreetMap} from "@/api/screen/subScreen/subOneGlobal.ts";
import {
- getSubOneAllVideoSuperviseCount, getSubOneVideoSuperviseMap,
- getSubOneVideoSuperviseProblemRank, getSubOneVideoSuperviseProblemTypeRate, getSubOneVideoSuperviseTrend
+ getSubOneAllVideoSuperviseCount,
+ getSubOneVideoSuperviseMap,
+ getSubOneVideoSuperviseProblemRank,
+ getSubOneVideoSuperviseProblemTypeRate,
+ getSubOneVideoSuperviseTrend
} from "@/api/screen/subScreen/subOneVideoSupervise.ts";
// region 所有变量
+const route = useRoute();
+const currentDepartId = route.query.departId;
const time = ref([
moment().subtract(1, "year").format("YYYY-MM-DD"),
moment().format("YYYY-MM-DD"),
@@ -224,15 +231,13 @@ const mapIconList = ref([{
relativePer: 152,
changedRate: 100
}])
+
const currentYear = new Date().getFullYear();
-const years = ref([currentYear.toString(), (currentYear - 1).toString(), (currentYear - 2).toString()]); // 年份列表
-const selectedYear = ref('2024'); // 当前选中的年份
+const years = ref([currentYear.toString(), (currentYear - 1).toString(), (currentYear - 2).toString()]);
+const selectedYear = ref(currentYear); // 当前选中的年份
+
const currentMapData = ref({})
-const subOneVideoInspMapChart = ref(null); // 地图
-const route = useRoute();
-const currentDepartId = route.query.departId;
-const subOneProRankTab=ref("1")
-let subOneVideoMapIntervalId;
+const subOneVideoMapChart = ref(null); // 地图
const colors = [
{
color: "linear-gradient( 270deg, #FB002D 0%, #822232 100%)",
@@ -243,6 +248,19 @@ const colors = [
percentage: 60,
},
];
+const showDialog = ref(false); // 负面信息弹窗显示
+const tempDepartId = ref(0); // 临时部门id
+
+// 动画涉及到的变量
+const subOneProRankTab = ref("1")
+const subOneVideoProRank = ref(null)
+const subOneVideoProTrend = ref(null);
+const subOneVideoProblemTypeRate = ref(null);
+let subOneVideoProRankIntervalId;
+let subOneVideoMapIntervalId;
+let subOneVideoTrendIntervalId;
+let subOneVideoProblemTypeRateIntervalId;
+
// endregion
// region 所有图表
@@ -413,7 +431,7 @@ const getMapJSON = async (departId) => {
const res = await getSubOneStreetMap(departId);
currentMapData.value = res;
echarts.registerMap("changsha", res);
- subOneVideoInspMapChart.value.chart.setOption(option.value);
+ subOneVideoMapChart.value.chart.setOption(option.value);
}
const getSubOneVideoSuperviseProblemRankData = async (departId, timeValue) => {
@@ -425,8 +443,6 @@ const getSubOneAllVideoSuperviseCountData = async (departId, timeValue) => {
const res = await getSubOneAllVideoSuperviseCount(departId, timeValue);
overview.value = res.overview;
}
-
-
const getSubOneVideoSuperviseMapData = async (departId, timeValue) => {
const res = await getSubOneVideoSuperviseMap(departId, timeValue);
const mappedData = res.videoSuperviseMapIconVoList.map(item => {
@@ -446,13 +462,6 @@ const getSubOneVideoSuperviseMapData = async (departId, timeValue) => {
{gte: range80Percent, label: "高于最大问题80%", 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;
@@ -461,6 +470,12 @@ const getSubOneVideoSuperviseTrendData = async (departId, year) => {
proTrend.value.xAxis.data = categories;
proTrend.value.series[0].data = values;
}
+const getSubOneVideoSuperviseProblemTypeRateData = async (departId, timeValue) => {
+ const res = await getSubOneVideoSuperviseProblemTypeRate(departId, timeValue);
+ ProblemTypeRateChart.value.series[0].data = res.subOneVideoSuperviseProblemTypeRate
+}
+
+
const getData = async () => {
getMapJSON(currentDepartId)
getSubOneVideoSuperviseProblemRankData(currentDepartId, time.value);
@@ -472,42 +487,62 @@ const getData = async () => {
// 卡片动画
-const subOneProCardAnimation = () => {
+const subOneVideoProRankAnimation = () => {
subOneProRankTab.value = (parseInt(subOneProRankTab.value) % 2 + 1).toString();
- setTimeout(subOneProCardAnimation, 3000);
};
+subOneVideoProRankIntervalId = setInterval(subOneVideoProRankAnimation, 3000);
// 地图动画
const subOneVideoMapAnimation = () => {
- const mySubOneVideoInspMapChart = subOneVideoInspMapChart?.value?.chart;
- if (!mySubOneVideoInspMapChart) return;
+ const mapTemp = subOneVideoMapChart?.value?.chart;
+ if (!mapTemp) return;
// 获取随机数，介于0到当前地图数据长度之间
- const tempNum = currentMapData?.value?.geoJson?.features?.length
+ const tempNum = currentMapData?.value?.geoJson?.features?.length
const randomNum = Math.floor(Math.random() * tempNum);
- mySubOneVideoInspMapChart.dispatchAction({
+ mapTemp.dispatchAction({
type: "downplay", //downplay 取消高亮
seriesIndex: 0,
});
- mySubOneVideoInspMapChart.dispatchAction({
+ mapTemp.dispatchAction({
type: "highlight", //highLight 高亮指定的数据图形
seriesIndex: 0, //系列index
dataIndex: randomNum, //数据index
});
- mySubOneVideoInspMapChart.dispatchAction({
+ mapTemp.dispatchAction({
type: "showTip", //showTip 显示提示框
seriesIndex: 0,
dataIndex: randomNum,
});
};
-// 启动定时器，每隔 2 秒执行一次
subOneVideoMapIntervalId = setInterval(subOneVideoMapAnimation, 2000);
-
+// 问题趋势动画
+const subOneVideoTrendAnimation = () => {
+ const trendTemp = subOneVideoProTrend?.value?.chart;
+ if (!trendTemp) return;
+ const randomNum = Math.floor(Math.random() * 12);
+ trendTemp.dispatchAction({
+ type: 'showTip',
+ seriesIndex: 0,
+ dataIndex: randomNum,
+ });
+}
+subOneVideoTrendIntervalId = setInterval(subOneVideoTrendAnimation, 2000);
+// 问题类型占比动画
+const subOneVideoProblemTypeRateAnimation = () => {
+ const temp = subOneVideoProblemTypeRate?.value?.chart;
+ if (!temp) return;
+ const length = ProblemTypeRateChart.value.series[0].data.length;
+ const randomNum = Math.floor(Math.random() * length);
+ temp?.dispatchAction({type: 'downplay', seriesIndex: 0});
+ temp?.dispatchAction({type: 'highlight', seriesIndex: 0, dataIndex: randomNum}); // 显示
+ temp?.dispatchAction({type: 'showTip', seriesIndex: 0, dataIndex: randomNum});
+}
+subOneVideoProblemTypeRateIntervalId = setInterval(subOneVideoProblemTypeRateAnimation, 2000);
onMounted(() => {
getData();
- subOneProCardAnimation(); // 启动卡片动画
- setupEventListeners(); // 设置地图监听
+ setupEventListeners(); // 设置鼠标监听
})
// endregion
@@ -519,25 +554,76 @@ const handleCommand = (year) => {
selectedYear.value = year; // 更新当前选中的年份
getSubOneVideoSuperviseTrendData(currentDepartId, selectedYear.value)
};
+const subOneVideoProRankAnimationStop = () => {
+ const temp = subOneVideoProRank.value?.$el;
+ temp.addEventListener('mouseenter', () => {
+ clearInterval(subOneVideoProRankIntervalId)
+ });
+ temp.addEventListener('mouseleave', () => {
+ subOneVideoProRankIntervalId = setTimeout(() => {
+ subOneVideoProRankAnimation();
+ }, 3000);
+ });
-
-// 鼠标经过地图事件
-const setupEventListeners = () => {
- const mySubOneVideoInspMapChart = subOneVideoInspMapChart?.value?.chart;
+}
+const subOneVideoMapAnimationStop = () => {
+ const temp = subOneVideoMapChart?.value?.chart;
// 鼠标移入
- mySubOneVideoInspMapChart.on('mousemove', (e) => {
+ temp.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,});
+ temp.dispatchAction({type: "downplay", seriesIndex: 0,});
+ temp.dispatchAction({type: "highlight", seriesIndex: 0, dataIndex: e.dataIndex,});
+ temp.dispatchAction({type: "showTip", seriesIndex: 0, dataIndex: e.dataIndex,});
});
// 鼠标移出
- mySubOneVideoInspMapChart.on('mouseout', () => {
- clearInterval(subOneVideoMapIntervalId); // 确保没有多个定时器同时运行
- subOneVideoMapIntervalId = setInterval(subOneVideoMapAnimation, 2000);
+ temp.on('mouseout', () => {
+ if (showDialog.value) {
+ clearInterval(subOneVideoMapIntervalId); // 确保没有多个定时器同时运行
+ } else {
+ clearInterval(subOneVideoMapIntervalId); // 确保没有多个定时器同时运行
+ subOneVideoMapIntervalId = setInterval(subOneVideoMapAnimation, 2000);
+ }
});
-};
+
+}
+const subOneVideoTrendAnimationStop = () => {
+ const temp = subOneVideoProTrend?.value.getDom();
+ temp.addEventListener('mouseenter', () => {
+ clearInterval(subOneVideoTrendIntervalId);
+ });
+ temp.addEventListener('mouseleave', () => {
+ clearInterval(subOneVideoTrendIntervalId);
+ subOneVideoTrendIntervalId = setInterval(subOneVideoTrendAnimation, 2000);
+ });
+}
+const subOneVideoProblemTypeRateAnimationStop = () => {
+ const temp = subOneVideoProblemTypeRate?.value?.chart;
+ temp.on('mousemove', (e) => {
+ clearInterval(subOneVideoProblemTypeRateIntervalId);
+ temp.dispatchAction({type: "downplay", seriesIndex: 0,});
+ temp.dispatchAction({type: "highlight", seriesIndex: 0, dataIndex: e.dataIndex,});
+ temp.dispatchAction({type: "showTip", seriesIndex: 0, dataIndex: e.dataIndex,});
+ })
+ temp.on('mouseout', () => {
+ clearInterval(subOneVideoProblemTypeRateIntervalId);
+ subOneVideoProblemTypeRateIntervalId = setInterval(subOneVideoProblemTypeRateAnimation, 2000);
+ })
+}
+// 鼠标事件监听，停止动画执行
+const setupEventListeners = () => {
+ subOneVideoProRankAnimationStop();
+ subOneVideoMapAnimationStop();
+ subOneVideoTrendAnimationStop();
+ subOneVideoProblemTypeRateAnimationStop();
+};
+// 地图点击事件
+const handleClick = (params) => {
+ const departId = params.data.departId;
+ showDialog.value = true;
+ tempDepartId.value = departId
+ clearInterval(subOneVideoMapIntervalId);
+}
// endregion