From e8c3199c88b030718dd9b2b046db8c1d90ad2b7c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=B8=8D=E7=88=B1=E5=AD=A6=E4=B9=A0=E7=9A=84=E7=9F=B3?= =?UTF-8?q?=E5=90=8C=E5=AD=A6?= <2936013465@qq.com> Date: Tue, 31 Dec 2024 17:14:39 +0800 Subject: [PATCH] =?UTF-8?q?=E9=A6=96=E9=A1=B5=E5=B1=8F=E5=B9=95=E5=8A=A8?= =?UTF-8?q?=E7=94=BB=E6=B8=B2=E6=9F=93?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/datav/chart-bar.vue | 8 +- src/views/datav/Gobal.vue | 197 ++++++++++++------- src/views/datav/SceneInsp.vue | 2 +- src/views/datav/VideoInsp.vue | 1 + src/views/datav/subonedatav/SubOneGlobal.vue | 19 +- 5 files changed, 151 insertions(+), 76 deletions(-) diff --git a/src/components/datav/chart-bar.vue b/src/components/datav/chart-bar.vue index d2168bd..98fce4c 100644 --- a/src/components/datav/chart-bar.vue +++ b/src/components/datav/chart-bar.vue @@ -107,6 +107,7 @@ function getColor(val) { } if (props.color instanceof Array) { const colors = [...props.color]; + // percentage降序 colors.sort((a, b) => b.percentage - a.percentage); for (let i = 0; i < colors.length; i++) { if (val > colors[i].percentage) { @@ -135,11 +136,16 @@ function getColor(val) { .bar-item_content { .bar-item_content-bar { height: 13px; - } } } + &[size="bigNumber"] { + .bar-item_content { + width: calc(100% - var(--label-width) - 16px - 100px); + } + } + &[size="small"] { font-size: 12px; diff --git a/src/views/datav/Gobal.vue b/src/views/datav/Gobal.vue index 2f063ff..cafc943 100644 --- a/src/views/datav/Gobal.vue +++ b/src/views/datav/Gobal.vue @@ -9,13 +9,14 @@ @@ -25,7 +26,7 @@ @@ -35,8 +36,9 @@ @@ -124,6 +126,7 @@ style="height: 370px;" :option="wtlxPieOption" autoresize + ref="wtlxzbOption" /> @@ -131,7 +134,6 @@ - @@ -152,10 +154,11 @@ import { // region 各种变量 const router = useRouter(); -const fxsjlist = ref([{}]); // 分县市区机构问题排名 +const fxsjlist = ref([{ + label: "天心分局", + value: 99999 +}]); // 分县市区机构问题排名 const jsdwlist = ref([]); // 局属单位机构问题排名 -const ywzblist = ref([]); // 业务类型占比 -const wtlxlist = ref([]); // 问题类型占比 const tcwtlist = ref([]); // 突出问题排名 const overview = ref({ totalPro: 0, @@ -201,50 +204,49 @@ const colors = [ const activeOrgTab = ref("1"); const globalMap = ref(null) -const globalTrend=ref(null) +const globalTrend = ref(null) +const ywlxzbOption = ref(null) +const wtlxzbOption = ref(null) +let cardIntervalId; +let wtlxPieCircularIntervalId; // 问题类型占比定时器 let globalMapIntervalId; // 地图定时器 let globalTrendIntervalId; // 问题趋势定时器 +let ywlxPieCircularIntervalId; // 业务类型占比定时器 // endregion // region 图表变量 // 业务类型占比 -const zfbaPieOption = computed(() => { - return { - tooltip: { - trigger: "item", - }, - series: [ - { - type: "pie", - radius: ["40%", "70%"], - label: { - color: "#fff", - }, - data: ywzblist.value, +const ywlxPieOption = ref({ + series: [ + { + type: "pie", + radius: ["40%", "70%"], + label: { + color: "#fff", }, - ], - }; + data: [], + }, + ], + tooltip: { + trigger: "item", + }, }); // 问题类型占比 -const wtlxPieOption = computed(() => { - return { - tooltip: { - trigger: "item", - }, - series: [ - { - type: "pie", - radius: ["40%", "70%"], - label: { - color: "#fff", - }, - data: wtlxlist.value, - +const wtlxPieOption = ref({ + series: [ + { + type: "pie", + radius: ["40%", "70%"], + label: { + color: "#fff", }, - ], - }; + data: [], + }, + ], + tooltip: { + trigger: "item", + }, }); -// 地图 echarts.registerMap("changsha", changshaMap); const option = ref({ geo: { @@ -415,16 +417,14 @@ const getOrganizationRankData = async (timeValue = time.value) => { fxsjlist.value = res.fxsjlist; jsdwlist.value = res.jsdwlist; } - const getBusinessRateData = async (timeValue = time.value) => { const res = await getBusinessRate(timeValue); - ywzblist.value = res.ywzblist; + ywlxPieOption.value.series[0].data = res.ywzblist; } const getAllGlobalCountData = async (timeValue = time.value) => { const res = await getAllGlobalCount(timeValue); overview.value = res.overview; } - const getGlobalMapData = async (timeValue = time.value) => { const res = await getGlobalMap(timeValue); const mappedData = res.globalTempMapVoList.map(item => { @@ -471,18 +471,20 @@ const getGlobalMapData = async (timeValue = time.value) => { value: item.totalPro, }; }); - const total = mappedData.reduce((sum, item) => sum + Number(item.value), 0); - const avg = total / mappedData.length; // 计算平均值 - const range30Percent = avg * 0.3 // 不用取整，小数也可以 + // 总数 + const maxItem = mappedData.reduce((max, item) => (Number(item.value) > Number(max.value) ? item : max), mappedData[0]); + const range40Percent = maxItem.value * 0.4 // 不用取整，小数也可以 + const range60Percent = maxItem.value * 0.6 // 不用取整，小数也可以 + const range80Percent = maxItem.value * 0.8 // 不用取整，小数也可以 globalTempMapVoList.value = mappedData; option.value.series[0].data = globalTempMapVoList; + console.log(range40Percent, range60Percent, range80Percent); 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"}, + {gte: 0, lte: range40Percent, label: "低于最大问题的40%", color: "#4987F6"}, + {gte: range40Percent, lte: range60Percent, label: "平均问题上下浮动30%内", color: "#F6A149"}, + {gte: range80Percent, label: "高于平均问题30%", color: "#D34343"}, ]; } - const getGlobalTrendData = async (year = selectedYear.value) => { const res = await getGlobalTrend(year); const globalRecentlyTrendList = res.globalRecentlyTrendList; @@ -496,13 +498,11 @@ const getStrongProblemRateData = async (timeValue = time.value) => { const res = await getStrongProblemRate(timeValue); tcwtlist.value = res.tcwtlist; } - const getProblemBusinessRateData = async (timeValue = time.value) => { const res = await getProblemBusinessRate(timeValue); - wtlxlist.value = res.wtlxlist; + wtlxPieOption.value.series[0].data = res.wtlxlist; } - function getData() { getOrganizationRankData(); getBusinessRateData(); @@ -513,10 +513,26 @@ function getData() { getProblemBusinessRateData(); } +onMounted(() => { + getData(); + cardAnimation(); + setupEventListeners(); +}); +// endregion + +// region 动画 // 卡片动画 const cardAnimation = () => { activeOrgTab.value = (parseInt(activeOrgTab.value) % 2 + 1).toString(); - setTimeout(cardAnimation, 3000); + cardIntervalId = setTimeout(cardAnimation, 3000); +}; +const handleMouseEnter = () => { + clearInterval(cardIntervalId) +}; +const handleMouseLeave = () => { + cardIntervalId = setTimeout(() => { + cardAnimation(); + }, 3000); }; // 地图动画 @@ -544,7 +560,7 @@ const mapAnimation = () => { globalMapIntervalId = setInterval(mapAnimation, 2000); // 趋势动画 -const GlobalTrendAnimation = () => { +const globalTrendAnimation = () => { const myGlobalTrend = globalTrend?.value?.chart; if (!myGlobalTrend) return; const randomNum = Math.floor(Math.random() * 12); @@ -554,18 +570,31 @@ const GlobalTrendAnimation = () => { dataIndex: randomNum, }); } -globalTrendIntervalId = setInterval(GlobalTrendAnimation, 2000); - - - - -onMounted(() => { - getData(); - cardAnimation(); - setupEventListeners(); -}); - - +globalTrendIntervalId = setInterval(globalTrendAnimation, 2000); + +// 执法办案环形图 +const yelxzbCircularAnimation = () => { + const ywlxzbOptionTemp = ywlxzbOption?.value?.chart; + if (!ywlxzbOptionTemp) return; + const length = ywlxPieOption.value.series[0].data.length; + const randomNum = Math.floor(Math.random() * length); + ywlxzbOptionTemp?.dispatchAction({type: 'downplay', seriesIndex: 0}); + ywlxzbOptionTemp?.dispatchAction({type: 'highlight', seriesIndex: 0, dataIndex: randomNum}); // 显示 + ywlxzbOptionTemp?.dispatchAction({type: 'showTip', seriesIndex: 0, dataIndex: randomNum}); +}; +ywlxPieCircularIntervalId = setInterval(yelxzbCircularAnimation, 2000); + +// 执法办案环形图 +const wtlxzbCircularAnimation = () => { + const wtlxzbOptionTemp = wtlxzbOption?.value?.chart; + if (!wtlxzbOptionTemp) return; + const length = ywlxPieOption.value.series[0].data.length; + const randomNum = Math.floor(Math.random() * length); + wtlxzbOptionTemp?.dispatchAction({type: 'downplay', seriesIndex: 0}); + wtlxzbOptionTemp?.dispatchAction({type: 'highlight', seriesIndex: 0, dataIndex: randomNum}); // 显示 + wtlxzbOptionTemp?.dispatchAction({type: 'showTip', seriesIndex: 0, dataIndex: randomNum}); +}; +wtlxPieCircularIntervalId = setInterval(wtlxzbCircularAnimation, 2000); // endregion // region 事件||监听 @@ -587,22 +616,46 @@ const handleClick = (params) => { }).href; window.open(url, "_blank"); } - -// 鼠标经过地图事件 +// 鼠标经过事件 const setupEventListeners = () => { + const ywlxzbOptionTemp = ywlxzbOption?.value?.chart; + ywlxzbOptionTemp.on('mousemove', (e) => { + clearInterval(ywlxPieCircularIntervalId); + ywlxzbOptionTemp.dispatchAction({type: "downplay", seriesIndex: 0,}); + ywlxzbOptionTemp.dispatchAction({type: "highlight", seriesIndex: 0, dataIndex: e.dataIndex,}); + ywlxzbOptionTemp.dispatchAction({type: "showTip", seriesIndex: 0, dataIndex: e.dataIndex,}); + }) + ywlxzbOptionTemp.on('mouseout', () => { + clearInterval(ywlxPieCircularIntervalId); + ywlxPieCircularIntervalId = setInterval(yelxzbCircularAnimation, 2000); + + }); + + 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); }); + + + const wtlxzbOptionTemp = wtlxzbOption?.value?.chart; + wtlxzbOptionTemp.on('mousemove', (e) => { + clearInterval(wtlxPieCircularIntervalId); + wtlxzbOptionTemp.dispatchAction({type: "downplay", seriesIndex: 0,}); + wtlxzbOptionTemp.dispatchAction({type: "highlight", seriesIndex: 0, dataIndex: e.dataIndex,}); + wtlxzbOptionTemp.dispatchAction({type: "showTip", seriesIndex: 0, dataIndex: e.dataIndex,}); + }) + wtlxzbOptionTemp.on('mouseout', () => { + clearInterval(wtlxPieCircularIntervalId); + wtlxPieCircularIntervalId = setInterval(wtlxzbCircularAnimation, 2000); + }) }; // endregion diff --git a/src/views/datav/SceneInsp.vue b/src/views/datav/SceneInsp.vue index 507e638..b85ddd4 100644 --- a/src/views/datav/SceneInsp.vue +++ b/src/views/datav/SceneInsp.vue @@ -1287,7 +1287,7 @@ const sceneInspMapAnimation = () => { sceneInspMapIntervalId = setInterval(sceneInspMapAnimation, 2000); const SceneInspTrendAnimation = () => { - const mySceneInspProTrend = sceneInspProTrend.value.chart; + const mySceneInspProTrend = sceneInspProTrend?.value?.chart; if (!mySceneInspProTrend) return; const randomNum = Math.floor(Math.random() * 12); mySceneInspProTrend.dispatchAction({ diff --git a/src/views/datav/VideoInsp.vue b/src/views/datav/VideoInsp.vue index 999b137..e99c4c8 100644 --- a/src/views/datav/VideoInsp.vue +++ b/src/views/datav/VideoInsp.vue @@ -233,6 +233,7 @@ const years = ref([currentYear.toString(), (currentYear - 1).toString(), (curren const selectedYear = ref(currentYear); // 当前选中的年份 const videoMap = ref(null); let videoMapIntervalId; +let sceneInspTrendIntervalId; const colors = [ { color: "linear-gradient( 270deg, #FB002D 0%, #822232 100%)", diff --git a/src/views/datav/subonedatav/SubOneGlobal.vue b/src/views/datav/subonedatav/SubOneGlobal.vue index c9912ca..abc91e6 100644 --- a/src/views/datav/subonedatav/SubOneGlobal.vue +++ b/src/views/datav/subonedatav/SubOneGlobal.vue @@ -80,6 +80,7 @@ :option="option" autoresize ref="subOneGlobalMap" + @click="handleClick" />
@@ -129,6 +130,7 @@
+ @@ -149,6 +151,9 @@ import { } from "@/api/screen/subScreen/subOneGlobal.ts"; // region 各种变量 +const show = ref(false); // 负面信息弹窗显示 +const tempDepartId = ref(0); // 临时部门id + const router = useRouter(); const route = useRoute(); const currentMapData = ref({}) @@ -191,7 +196,7 @@ const colors = [ percentage: 40, }, ]; -let subOneGlobalMapIntervalId ; // 问题趋势 +let subOneGlobalMapIntervalId ; // endregion @@ -469,7 +474,7 @@ const cardAnimation = () => { //地图动画 const mapAnimation = () => { - const mySubOneGlobalMap = subOneGlobalMap.value.chart; + const mySubOneGlobalMap = subOneGlobalMap?.value?.chart; if (!mySubOneGlobalMap) return; // 来个随机数，9个图 0~8的整数就ok const tempNum = currentMapData?.value?.geoJson?.features?.length @@ -525,6 +530,16 @@ const setupEventListeners = () => { subOneGlobalMapIntervalId = setInterval(mapAnimation, 2000); }); }; + +const handleClick = (params) => { + const departId = params.data.departId; + show.value = true; + tempDepartId.value=2661 + console.log(subOneGlobalMapIntervalId); + clearInterval(subOneGlobalMapIntervalId); + // alert(departId) +} + // endregion