diff --git a/src/api/screen/CaseVerif.ts b/src/api/screen/caseVerif.ts similarity index 88% rename from src/api/screen/CaseVerif.ts rename to src/api/screen/caseVerif.ts index 34b91cb..7dc118c 100644 --- a/src/api/screen/CaseVerif.ts +++ b/src/api/screen/caseVerif.ts @@ -18,9 +18,9 @@ export function getCaseProblemProperty(times) { -export function getAllCaseVerificationCount(times) { +export function getCaseVerificationCount(times) { 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) { diff --git a/src/api/screen/subScreen/subOneSupervisionNotify.ts b/src/api/screen/subScreen/subOneSupervisionNotify.ts index f72b894..9fe5005 100644 --- a/src/api/screen/subScreen/subOneSupervisionNotify.ts +++ b/src/api/screen/subScreen/subOneSupervisionNotify.ts @@ -20,9 +20,9 @@ export function getSubOneSupervisionTrend(departId, year) { }); } -export function getAllSubOneSupervisionNotifyCount(departId, times) { +export function getSubOneSupervisionNotifyCount(departId, times) { 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]}` }); } diff --git a/src/views/datav/CaseVerif.vue b/src/views/datav/CaseVerif.vue index e6a300c..010c387 100644 --- a/src/views/datav/CaseVerif.vue +++ b/src/views/datav/CaseVerif.vue @@ -8,6 +8,7 @@ @@ -96,12 +97,14 @@ :option="option" autoresize @click="handleClick" + ref="caseVerifMap" />
@@ -175,7 +178,15 @@ import vCharts from "vue-echarts"; import changshaMap from "@/assets/data/changsha.json"; import * as echarts from "echarts/core"; 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 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().format("YYYY-MM-DD"), ]); - - - const fxsjBarList = ref([]); const jsdwBarList = ref([]); const router = useRouter(); @@ -198,143 +206,30 @@ const overview = ref({ punishOrg: 0, // 问责单位数、 Rate: 0, // 查实率 }); -let gobalTempMapVoList = ref([]); - -const jjjgPieList = ref([]); - - -// region 事件||监听 -const handleCommand = (year) => { - selectedYear.value = year; // 更新当前选中的年份 - getProTrendList(selectedYear.value); -}; -watch(time, () => { - getData(); -}); -// endregion - - - - -// region 所有函数 -const getRankList = async(timeValue) => { - 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(); -}); - - - - - - +let globalTempMapVoList = ref([]); + +const caseCountRankTab = ref('1') +const caseVerifMap = ref(null); +const caseVerifProTrend = ref(null); +let caseVerifMapIntervalId; +let caseVerifTrendIntervalId; +let caseCountRankIntervalId; +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, + }, +]; +// region 所有图表 echarts.registerMap("changsha", changshaMap); const option = ref({ geo: { @@ -348,10 +243,11 @@ const option = ref({ }, tooltip: { trigger: 'item', + position: 'bottom', formatter: function (params) { console.log(params) - const dataItem = gobalTempMapVoList.value.find(item => item.name.includes(params.name.substring(0, 2))); - if (dataItem ) { + const dataItem = globalTempMapVoList.value.find(item => item.name.includes(params.name.substring(0, 2))); + if (dataItem) { return `
${dataItem.originalName}
@@ -405,7 +301,7 @@ const option = ref({ }, calculable: true, inRange: { - color: ["#4987F6","#F6A149", "#D34343" ], + color: ["#4987F6", "#F6A149", "#D34343"], }, }, series: [ @@ -443,7 +339,7 @@ const proTrend = ref({ // 去掉X轴刻度线 show: false }, - data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月'], + data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月'], }, yAxis: { type: "value", @@ -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 departId = params.data.departId; const url = router.resolve({ @@ -625,26 +682,22 @@ const handleClick = (params) => { }).href; window.open(url, "_blank"); } - - - - -const colors = [ - { - color: "linear-gradient( 270deg, #FB002D 0%, #822232 100%)", - percentage: 80, - }, - { - color: "linear-gradient( 270deg, #FFB90E 0%, #71501D 100%)", - percentage: 60, - }, - { - color: "linear-gradient( 270deg, #63E700 0%, #19674C 100%)", - percentage: 40, - }, -]; - - +const setupEventListeners = () => { + const myCaseVerifMap = caseVerifMap?.value?.chart; + // 鼠标移入 + myCaseVerifMap.on('mousemove', (e) => { + clearInterval(caseVerifMapIntervalId); + myCaseVerifMap.dispatchAction({type: "downplay", seriesIndex: 0,}); + myCaseVerifMap.dispatchAction({type: "highlight", seriesIndex: 0, dataIndex: e.dataIndex,}); + myCaseVerifMap.dispatchAction({type: "showTip", seriesIndex: 0, dataIndex: e.dataIndex,}); + }); + // 鼠标移出 + myCaseVerifMap.on('mouseout', () => { + clearInterval(caseVerifMapIntervalId); // 确保没有多个定时器同时运行 + caseVerifMapIntervalId = setInterval(caseVerifMapAnimation, 2000); + }); +}; +// endregion @@ -728,6 +781,7 @@ const colors = [ right: 20px; top: 15px; } + .test { width: 95px; height: 25px; diff --git a/src/views/datav/Gobal.vue b/src/views/datav/Gobal.vue index dbbf216..2f063ff 100644 --- a/src/views/datav/Gobal.vue +++ b/src/views/datav/Gobal.vue @@ -80,6 +80,7 @@ :option="option" autoresize @click="handleClick" + ref="globalMap" />
@@ -88,6 +89,7 @@ style="height: 280px;" :option="proTrend" autoresize + ref="globalTrend" />
@@ -150,7 +152,6 @@ import { // region 各种变量 const router = useRouter(); -const activeOrgTab = ref("1"); const fxsjlist = ref([{}]); // 分县市区机构问题排名 const jsdwlist = ref([]); // 局属单位机构问题排名 const ywzblist = ref([]); // 业务类型占比 @@ -180,10 +181,9 @@ const globalTempMapVoList = ref([ "value": 200 } ]); // 地图临时数据 - const currentYear = new Date().getFullYear(); const years = ref([currentYear.toString(), (currentYear - 1).toString(), (currentYear - 2).toString()]); // 年份列表 -const selectedYear = ref('2024'); // 当前选中的年份 +const selectedYear = ref(currentYear); // 当前选中的年份 const colors = [ { color: "linear-gradient( 270deg, #FB002D 0%, #822232 100%)", @@ -198,6 +198,12 @@ const colors = [ percentage: 40, }, ]; + +const activeOrgTab = ref("1"); +const globalMap = ref(null) +const globalTrend=ref(null) +let globalMapIntervalId; // 地图定时器 +let globalTrendIntervalId; // 问题趋势定时器 // endregion // region 图表变量 @@ -251,6 +257,7 @@ const option = ref({ }, tooltip: { trigger: 'item', + position: "bottom", formatter: function (params) { // console.log(params); const dataItem = globalTempMapVoList.value.find(item => item.name.includes(params.name.substring(0, 2))); @@ -288,13 +295,7 @@ const option = ref({
`; } }, - // backgroundColor: "#031577", // - // borderColor: "#0A2F86", - borderWidth: 0, // 设置边框宽度为1像素 - borderRadius: 3, // 设置边框半径为3像素 - shadowBlur: 0, // 设置阴影模糊程度为8像素 - shadowOffsetX: 0, // 设置水平阴影位移量为0像素 - shadowOffsetY: 0, // 设置垂直阴影位移量为6像素 + }, visualMap: { type: "piecewise", @@ -501,6 +502,7 @@ const getProblemBusinessRateData = async (timeValue = time.value) => { wtlxlist.value = res.wtlxlist; } + function getData() { getOrganizationRankData(); getBusinessRateData(); @@ -511,26 +513,72 @@ function getData() { 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(() => { getData(); + cardAnimation(); + setupEventListeners(); }); + + // endregion // region 事件||监听 +// 更换年份事件 const handleCommand = (year) => { selectedYear.value = year; // 更新当前选中的年份 - getGlobalRecentlyTrendByMonth(year).then(res => { - const globalRecentlyTrendList = res.globalRecentlyTrendList; - const categories = globalRecentlyTrendList.map(item => item.name); - const values = globalRecentlyTrendList.map(item => item.value); - // 更新图表数据 - proTrend.value.xAxis.data = categories; - proTrend.value.series[0].data = values; - }); + getGlobalTrendData(); }; +// 更换时间事件 watch(time, () => { getData(); }); +// 点击地图事件 const handleClick = (params) => { const departId = params.data.departId; const url = router.resolve({ @@ -539,6 +587,23 @@ const handleClick = (params) => { }).href; 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 diff --git a/src/views/datav/MailVisits.vue b/src/views/datav/MailVisits.vue index b4128e6..75f26af 100644 --- a/src/views/datav/MailVisits.vue +++ b/src/views/datav/MailVisits.vue @@ -408,6 +408,20 @@ const time = ref([ const currentYear = new Date().getFullYear(); const years = ref([currentYear.toString(), (currentYear - 1).toString(), (currentYear - 2).toString()]); // 年份列表 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 // region 所有函数 @@ -985,6 +999,7 @@ const option3 = { // endregion +// region 监听|事件 const handleCommand = (year) => { selectedYear.value = year; getTrend() @@ -995,10 +1010,10 @@ watch(time, () => { }) onMounted(() => { getData(); - // timer = setInterval(() => { - // activeMailTab.value = (parseInt(activeMailTab.value) % 3 + 1).toString(); - // console.log("Active Tab: ", activeMailTab.value); - // }, 3000); // 每3秒切换一次 + timer = setInterval(() => { + activeMailTab.value = (parseInt(activeMailTab.value) % 3 + 1).toString(); + console.log("Active Tab: ", activeMailTab.value); + }, 3000); // 每3秒切换一次 }); const handleClick = (params) => { const departId = params.data.departId; @@ -1008,21 +1023,7 @@ const handleClick = (params) => { }).href; window.open(url, "_blank"); } -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 diff --git a/src/views/datav/SceneInsp.vue b/src/views/datav/SceneInsp.vue index 9698dbb..507e638 100644 --- a/src/views/datav/SceneInsp.vue +++ b/src/views/datav/SceneInsp.vue @@ -9,7 +9,7 @@ @@ -173,12 +173,14 @@ :option="option" autoresize @click="handleClick" + ref="sceneInspMap" />
@@ -198,7 +200,7 @@ - + @@ -795,7 +797,7 @@ import { import router from "@/router/index.ts"; // region 所有变量 -const activeTabRight = ref("1") + const overview = ref({ problemNumber: 0, rectifingNumber: 0, @@ -913,11 +915,18 @@ const messages = ref([ ]); const currentYear = new Date().getFullYear(); const years = ref([currentYear.toString(), (currentYear - 1).toString(), (currentYear - 2).toString()]); // 年份列表 -const selectedYear = ref('2024'); // 当前选中的年份 +const selectedYear = ref(currentYear); // 当前选中的年份 const time = ref([ moment().startOf("year").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 = [ { color: "linear-gradient( 270deg, #FB002D 0%, #822232 100%)", @@ -965,8 +974,9 @@ const option = ref({ }, tooltip: { trigger: 'item', + position: 'bottom', formatter: function (params) { - console.log(params) + // console.log(params) const dataItem = superviseTempMapVoList.value.find(item => item.name.includes(params.name.substring(0, 2))); if (dataItem) { return ` @@ -1243,8 +1253,56 @@ const getData = async () => { 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(() => { getData(); + rcdxRankAnimation(); // 日常督察问题排行动画 + zxdxRankAnimation(); // 专项督察问题排行动画 + setupEventListeners(); }); // endregion @@ -1263,7 +1321,6 @@ const handleCommand = (year) => { proTrend.value.series[0].data = values; }); }; - const handleClick = (params) => { const departId = params.data.departId; const url = router.resolve({ @@ -1272,6 +1329,23 @@ const handleClick = (params) => { }).href; 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 diff --git a/src/views/datav/VideoInsp.vue b/src/views/datav/VideoInsp.vue index 39e677f..999b137 100644 --- a/src/views/datav/VideoInsp.vue +++ b/src/views/datav/VideoInsp.vue @@ -5,7 +5,7 @@
- +
@@ -46,6 +46,7 @@ @@ -106,6 +107,7 @@ :option="option" autoresize @click="handleClick" + ref="videoMap" /> - {{ selectedYear + ' 年'}} + {{ selectedYear + ' 年' }}