From 8f20c678ae36b9c6f4011631254ca93042008e73 Mon Sep 17 00:00:00 2001 From: yyl <279235553@qq.com> Date: Tue, 23 Jan 2024 18:01:31 +0800 Subject: [PATCH] =?UTF-8?q?=E6=8F=90=E4=BA=A4=E6=9C=80=E6=96=B0=E4=BB=A3?= =?UTF-8?q?=E7=A0=81=EF=BC=8C=E8=B7=AF=E6=AE=B5=E6=84=9F=E7=9F=A5=E5=88=86?= =?UTF-8?q?=E6=9E=90=E9=A1=B5=E7=9A=84=E8=81=94=E8=B0=83?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ruoyi-ui/src/api/event/perceiveEvent.js | 24 ++--- .../components/dailyDisposal/assets/charts.js | 7 +- .../components/dailyDisposal/index.vue | 71 +++++++++++- .../components/dayTotal/assets/charts.js | 2 - .../components/dayTotal/index.vue | 23 +++- .../components/eventSource/assets/charts.js | 14 ++- .../components/eventSource/index.vue | 88 +++++++++++---- .../components/railway/assets/charts.js | 4 +- .../components/railway/index.vue | 24 ++++- .../components/railwayDay/assets/charts.js | 4 +- .../components/railwayDay/index.vue | 20 +++- .../components/typeAnalysis/assets/charts.js | 22 ++-- .../components/typeAnalysis/index.vue | 101 ++++++++++++++++-- 13 files changed, 336 insertions(+), 68 deletions(-) diff --git a/ruoyi-ui/src/api/event/perceiveEvent.js b/ruoyi-ui/src/api/event/perceiveEvent.js index fb81f30e..760a05fc 100644 --- a/ruoyi-ui/src/api/event/perceiveEvent.js +++ b/ruoyi-ui/src/api/event/perceiveEvent.js @@ -19,7 +19,7 @@ export function geTwarningTotal(query) { //system/status/tablist return request({ url: '/system/status/tablist', - method: 'get', + method: 'post', params: { ...query, } @@ -31,7 +31,7 @@ export function geTwarningTotal(query) { //system/status/tablist return request({ url: '/perceivedEvents/warning/perceivedEventsList', - method: 'get', + method: 'post', params: { ...query, } @@ -43,7 +43,7 @@ export function geTwarningTotal(query) { //system/status/tablist return request({ url: '/perceivedEvents/warning/sectionPerceivedList', - method: 'get', + method: 'post', params: { ...query, } @@ -56,7 +56,7 @@ export function geTwarningTotal(query) { //system/status/tablist return request({ url: '/perceivedEvents/warning/sectionPerceivedNumber', - method: 'get', + method: 'post', params: { ...query, } @@ -68,7 +68,7 @@ export function geTwarningTotal(query) { //system/status/tablist return request({ url: '/perceivedEvents/warning/dailyCumulative', - method: 'get', + method: 'post', params: { ...query, } @@ -80,7 +80,7 @@ export function geTwarningTotal(query) { //system/status/tablist return request({ url: '/perceivedEvents/warning/warningSourceGroup', - method: 'get', + method: 'post', params: { ...query, } @@ -92,7 +92,7 @@ export function geTwarningTotal(query) { //system/status/tablist return request({ url: '/perceivedEvents/warning/warningStateDay', - method: 'get', + method: 'post', params: { ...query, } @@ -104,7 +104,7 @@ export function geTwarningTotal(query) { //system/status/tablist return request({ url: '/perceivedEvents/warning/dailyCumulativeMonth', - method: 'get', + method: 'post', params: { ...query, } @@ -116,7 +116,7 @@ export function geTwarningTotal(query) { //system/status/tablist return request({ url: '/perceivedEvents/warning/warningTypeDay', - method: 'get', + method: 'post', params: { ...query, } @@ -128,7 +128,7 @@ export function geTwarningTotal(query) { //system/status/tablist return request({ url: '/perceivedEvents/warning/warningTrend', - method: 'get', + method: 'post', params: { ...query, } @@ -140,7 +140,7 @@ export function geTwarningTotal(query) { //system/status/tablist return request({ url: '/perceivedEvents/warning/warningSectionType', - method: 'get', + method: 'post', params: { ...query, } @@ -152,7 +152,7 @@ export function geTwarningTotal(query) { //system/status/tablist return request({ url: '/perceivedEvents/warning/sectionMarkNumber', - method: 'get', + method: 'post', params: { ...query, } diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/dailyDisposal/assets/charts.js b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/dailyDisposal/assets/charts.js index c7ca32c1..43114d0f 100644 --- a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/dailyDisposal/assets/charts.js +++ b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/dailyDisposal/assets/charts.js @@ -1,15 +1,15 @@ -const echartsData = [ +window.echartsData = [ { value: 25, name: '处理中' }, { value: 32, name: '待处理' }, { value: 30, name: '已处理' },] - const colorList = [ +window.colorList = [ "#FFee0B", "#61D8FF", "#6AE0BC", ] -let count = 0; +window.count = 0; echartsData.forEach((it)=>{ count += it.value; @@ -33,6 +33,7 @@ let count = 0; ast: { align: "left", fontSize: 12, + width:35, }, bst: { align: "left", diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/dailyDisposal/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/dailyDisposal/index.vue index fc57e438..e0dcaaa4 100644 --- a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/dailyDisposal/index.vue +++ b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/dailyDisposal/index.vue @@ -12,6 +12,7 @@ import WgtTitle from '../../../widgets/title' import * as echarts from "echarts"; import chartsStatistics from "./assets/charts"; + import { getWarningStateDay } from '../../../../../../../api/event/perceiveEvent'; const drawRoundRect = ( ctx, x, y, width, height, radius ,gr) => { // ctx, 矩形距离x坐标位置, 矩形距离y坐标的位置, 矩形的宽, 矩形的长,圆角角度 @@ -50,7 +51,75 @@ setTimeout(() => { this.$nextTick(() => { var myChart = echarts.init(document.getElementById('dailyDisposal')); - myChart.setOption(chartsStatistics); + + getWarningStateDay().then(res=>{ + if ( res.code == 200 ) { + let data = res.data; + console.log(data); + window.echartsData = []; + for (let i = 0;i < data.length;i++){ + let it = data[i]; + if ( it.warningState == 1 ) { + echartsData.push({ + name:"上报", + value: it.number + }); + } + if (it.warningState == 2 ) { + echartsData.push({ + name:"已完成", + value: it.number + }); + + } + if (it.warningState == 3 ) { + echartsData.push({ + name:"已终止", + value: it.number + }); + + } + if (it.warningState == 4 ) { + echartsData.push({ + name:"自动结束", + value: it.number + }); + + } + + + } + count = 0; + + echartsData.forEach((it)=>{ + count += it.value; + }) + + console.log(echartsData); + + chartsStatistics.legend.data = window.echartsData?.map(x => x); + chartsStatistics.series[0].data = echartsData.map((item, index) => { + return { + ...item, + label: { + color: colorList[index] + } + } + }) + chartsStatistics.series[1].data = echartsData.map((item, index) => { + return { + ...item, + label: { + color: colorList[index] + } + } + }) + } + + myChart.setOption(chartsStatistics); + }); + + const domMap = document.getElementById("dailyDisposal"); diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/dayTotal/assets/charts.js b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/dayTotal/assets/charts.js index bee2c385..bc60c727 100644 --- a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/dayTotal/assets/charts.js +++ b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/dayTotal/assets/charts.js @@ -70,8 +70,6 @@ const sxnja = [ // return value.min*0.9; // }, type: 'value', - min: 0, - max:1000, // max: yAxisMax, axisLine: { show: false, diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/dayTotal/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/dayTotal/index.vue index 598de63b..9b3c13c2 100644 --- a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/dayTotal/index.vue +++ b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/dayTotal/index.vue @@ -12,6 +12,8 @@ import WgtTitle from '../../../widgets/title' import * as echarts from "echarts"; import chartsStatistics from "./assets/charts"; + import { getDailyCumulative } from '../../../../../../../api/event/perceiveEvent'; + export default { name: 'RailWayDay', components: { @@ -33,7 +35,26 @@ setTimeout(() => { this.$nextTick(() => { var myChart = echarts.init(document.getElementById('daytotal')); - myChart.setOption(chartsStatistics); + + getDailyCumulative().then(res=>{ + if ( res.code == 200) { + let data = res.data; + let timer = []; + let number = []; + + data.forEach((it)=>{ + timer.push(it.time); + number.push(it.number); + }); + + chartsStatistics.xAxis.data = timer; + chartsStatistics.series[0].data = number; + + myChart.setOption(chartsStatistics); + } + + }); + }); }); }, diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventSource/assets/charts.js b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventSource/assets/charts.js index 7c16f575..2fdc8690 100644 --- a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventSource/assets/charts.js +++ b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventSource/assets/charts.js @@ -15,6 +15,9 @@ let data = [{ typeName:'护栏碰撞', percent:0.14 }] + +window.mainData = data; + let chartData = [],lengData=[], colorList = ['#006EDF', '#00FF00', '#FFC30D', '#FF8400', '#1DA7FF','#2967EA']; for (let i = 0; i < data.length; i++) { chartData.push({ @@ -55,6 +58,8 @@ for (let i = 0; i < chartData.length; i++) { }); pieData1.push(gapData); } +console.log(pieData1); + var options = { tooltip: { confine: true, @@ -115,10 +120,13 @@ var options = { formatter: function(name){ let total = 0 let target + if ( !mainData ) return ""; for (let i = 0; i < data.length; i++) { - total += data[i].average - if (data[i].typeName === name) { - target = data[i].average + if ( window.mainData[i] ) { + total += window.mainData[i].value + if ( window.mainData[i].name === name) { + target = window.mainData[i].value + } } } var arr = [ diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventSource/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventSource/index.vue index 5f59fb55..b47d769d 100644 --- a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventSource/index.vue +++ b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventSource/index.vue @@ -12,6 +12,8 @@ import WgtTitle from '../../../widgets/title' import * as echarts from "echarts"; import chartsStatistics from "./assets/charts"; + import { getWarningSourceGroup } from '../../../../../../../api/event/perceiveEvent'; + export default { name: 'EventSource', components: { @@ -36,30 +38,74 @@ let currentIndex = -1; this.$nextTick(() => { var myChart = echarts.init(document.getElementById('eventSource')); - myChart.setOption(chartsStatistics); - this.myChart = myChart; - myChart.on('mouseover', (params) => { - // oldIndex = currentIndex; - currentIndex = params.dataIndex; - highlightPie(currentIndex,oldIndex); - }) + getWarningSourceGroup().then((res)=>{ + if ( res.code == 200 ) { + let data = res.data; + let warningTypes = []; + let number = []; + data.forEach(it=>{ + if ( it.warningSource == 1) { + warningTypes.push('交通拥堵'); + } + if ( it.warningSource == 2) { + warningTypes.push('行人'); + } + if ( it.warningSource == 3) { + warningTypes.push('非机动车'); + } + if ( it.warningSource == 4) { + warningTypes.push('停车'); + } + if ( it.warningSource == 5) { + warningTypes.push('倒车/逆行'); + } + if ( it.warningSource == 6) { + warningTypes.push('烟火'); + } + if ( it.warningSource == 7) { + warningTypes.push('撒落物'); + } + if ( it.warningSource == 8) { + warningTypes.push('异常天气'); + } + if ( it.warningSource == 9) { + warningTypes.push('护栏碰撞'); + } - function highlightPie(currentIndex,oldIndex) { - myChart.dispatchAction({ - type: 'downplay', - seriesIndex: 1, - dataIndex: oldIndex - }) - myChart.dispatchAction({ - type: 'highlight', - seriesIndex: 1, - dataIndex: currentIndex - }) + number.push(it.number); + }) + let colorList = ['#006EDF', '#00FF00', '#FFC30D', '#FF8400', '#1DA7FF','#2967EA']; + let lengData = []; + let mainData = []; + let mainCount = 0; + for (let j =0;j < number.length;j++){ + mainCount+= number[j]; + } + for (let i = 0;i < warningTypes.length;i++){ + let it = warningTypes[i]; + lengData.push({ + name:it, + color:colorList[i], + value:number[i], + }); + mainData.push({ + name:it, + color:colorList[i], + value:number[i], + percent: number[i]/mainCount + }) + } + window.mainData = mainData; + console.log("--------------",mainData); + chartsStatistics.legend.data = lengData; + chartsStatistics.series[0].data = mainData; } - setTimeout(()=>{ - - },50) + myChart.setOption(chartsStatistics); + }) + + this.myChart = myChart; + }); }); }, diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/railway/assets/charts.js b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/railway/assets/charts.js index 2ef9faf8..3620b89b 100644 --- a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/railway/assets/charts.js +++ b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/railway/assets/charts.js @@ -1,9 +1,9 @@ let chartIcon = `data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAACXBIWXMAAC4jAAAuIwF4pT92AAAFw2lUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgOS4wLWMwMDAgNzkuMTcxYzI3ZmFiLCAyMDIyLzA4LzE2LTIyOjM1OjQxICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgeG1sbnM6cGhvdG9zaG9wPSJodHRwOi8vbnMuYWRvYmUuY29tL3Bob3Rvc2hvcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RFdnQ9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZUV2ZW50IyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgMjQuMCAoTWFjaW50b3NoKSIgeG1wOkNyZWF0ZURhdGU9IjIwMjMtMTItMjlUMTA6MTM6MTQrMDg6MDAiIHhtcDpNb2RpZnlEYXRlPSIyMDIzLTEyLTI5VDEwOjQ2OjE3KzA4OjAwIiB4bXA6TWV0YWRhdGFEYXRlPSIyMDIzLTEyLTI5VDEwOjQ2OjE3KzA4OjAwIiBkYzpmb3JtYXQ9ImltYWdlL3BuZyIgcGhvdG9zaG9wOkNvbG9yTW9kZT0iMyIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDplYzhkN2NkNS01ZjdjLTQ5Y2ItOTgyMy1lOTM4ODViNjRjMmIiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6ZjE1ZWVkNDgtNDA3ZS00MDU0LTliNTMtYTllZmQ1ODE5YjVmIiB4bXBNTTpPcmlnaW5hbERvY3VtZW50SUQ9InhtcC5kaWQ6ZjE1ZWVkNDgtNDA3ZS00MDU0LTliNTMtYTllZmQ1ODE5YjVmIj4gPHhtcE1NOkhpc3Rvcnk+IDxyZGY6U2VxPiA8cmRmOmxpIHN0RXZ0OmFjdGlvbj0iY3JlYXRlZCIgc3RFdnQ6aW5zdGFuY2VJRD0ieG1wLmlpZDpmMTVlZWQ0OC00MDdlLTQwNTQtOWI1My1hOWVmZDU4MTliNWYiIHN0RXZ0OndoZW49IjIwMjMtMTItMjlUMTA6MTM6MTQrMDg6MDAiIHN0RXZ0OnNvZnR3YXJlQWdlbnQ9IkFkb2JlIFBob3Rvc2hvcCAyNC4wIChNYWNpbnRvc2gpIi8+IDxyZGY6bGkgc3RFdnQ6YWN0aW9uPSJzYXZlZCIgc3RFdnQ6aW5zdGFuY2VJRD0ieG1wLmlpZDplYzhkN2NkNS01ZjdjLTQ5Y2ItOTgyMy1lOTM4ODViNjRjMmIiIHN0RXZ0OndoZW49IjIwMjMtMTItMjlUMTA6NDY6MTcrMDg6MDAiIHN0RXZ0OnNvZnR3YXJlQWdlbnQ9IkFkb2JlIFBob3Rvc2hvcCAyNC4wIChNYWNpbnRvc2gpIiBzdEV2dDpjaGFuZ2VkPSIvIi8+IDwvcmRmOlNlcT4gPC94bXBNTTpIaXN0b3J5PiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PibZhN0AAAHBSURBVDiNfdTtThNREAbgZ5sCrRTaRaBqQDTR6AXaq9grJEaiKCJWaAv9ENDUH2fWLkU8yeTkZGbe885nNp/PVU9vIMMGNtHGo1BNMQoZF7k7jlkVqDewji72sI5VrIT6F64xwRecFbnJPaDeQBsv8RSdCpsS6BYzDENOcVTkLv8CBZPX2McOdrEVITYC6BpjnKOP7zjG+yI3yd5dzLNg8jbY7MW9g+2lHJUgpzgJOcRRPX7dj3C6eIaDAO+iGUCzYPERWSXU5+jXIxct5MFgN0AOsLaoi9Ul0HHkaoBOLZg0IoQNPMaTJZAqWDfytylVtol2LdishNFaKBv/AClPI3waISto1UKZoRZ39h8QFZus8laTqvEbNyEzqdQPnZ/hcyMl/BbTmpSsacg43v0wXD43+BE2V+FzjWFdmp1ZKAZheByUt91tyD4+S/00wGWAjerxOJYS2JSSngX4lrsNeREfnUg9dRG+o3JEWniDF1Lpd6U2KEdkHoyuwvkM36TmPCxy4+rQdvDKoss7FhugzM8kIjiPED8UuSH310jLYkRaUl9V18gswD7ha5Ebl77ZA4utLY1MOT4sRmKI0fJi+wM9v6Q1QC+Y6wAAAABJRU5ErkJggg==`; let xdata = { - value: ['平阴停车区', '孔村枢纽', '平阴南收费站', '东平湖枢纽', '沙河停车区', '梁山东收费站', '王官屯枢纽'] + value: ['平阴停车区'] }; let sdata = { - value: [32774, 30067, 28774, 30067, 30021, 30067, 32774] + value: [32774] } let dataZoomMove = { diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/railway/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/railway/index.vue index 1e39f500..ec5339e9 100644 --- a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/railway/index.vue +++ b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/railway/index.vue @@ -16,6 +16,8 @@ import WgtTitle from '../../../widgets/title' import * as echarts from "echarts"; import chartsStatistics from "./assets/charts"; + import { getSectionPerceivedList } from '../../../../../../../api/event/perceiveEvent'; + export default { name: 'Situation', components: { @@ -31,7 +33,27 @@ setTimeout(() => { this.$nextTick(() => { var myChart = echarts.init(document.getElementById('situationEchartBox')); - myChart.setOption(chartsStatistics); + + getSectionPerceivedList({}).then((res)=>{ + console.log(res); + if ( res.code == 200 ) { + let data = res.data; + let texts = []; + let datas = []; + + data.forEach(it => { + texts.push(it.sectionName); + datas.push(it.number); + }); + + chartsStatistics.yAxis[0].data = texts; + chartsStatistics.series[0].data = datas; + + myChart.setOption(chartsStatistics); + } + }); + + }); }); }, diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/railwayDay/assets/charts.js b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/railwayDay/assets/charts.js index d5ab305c..59186783 100644 --- a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/railwayDay/assets/charts.js +++ b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/railwayDay/assets/charts.js @@ -68,9 +68,7 @@ var options = { yAxis: [{ type: 'value', name: "", - max: 1000, - min:0, - splitNumber:5, + nameTextStyle: { color: '#B6E6FF', fontSize: 13, diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/railwayDay/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/railwayDay/index.vue index b6e39c92..85b0f9a3 100644 --- a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/railwayDay/index.vue +++ b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/railwayDay/index.vue @@ -12,6 +12,8 @@ import WgtTitle from '../../../widgets/title' import * as echarts from "echarts"; import chartsStatistics from "./assets/charts"; +import { getSectionPerceivedNumber } from '../../../../../../../api/event/perceiveEvent'; + export default { name: 'RailWayDay', components: { @@ -33,7 +35,23 @@ export default { setTimeout(() => { this.$nextTick(() => { var myChart = echarts.init(document.getElementById('railwayDay')); - myChart.setOption(chartsStatistics); + getSectionPerceivedNumber().then((res)=>{ + if ( res.code == 200 ) { + let data = res.data; + let texts = []; + let datas = []; + + data.forEach(it => { + texts.push(it.sectionName); + datas.push(it.number); + }); + + chartsStatistics.xAxis.data = texts; + chartsStatistics.series[0].data = datas; + + myChart.setOption(chartsStatistics); + } + }) }); }); }, diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/typeAnalysis/assets/charts.js b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/typeAnalysis/assets/charts.js index 4936251f..b6dfeb33 100644 --- a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/typeAnalysis/assets/charts.js +++ b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/typeAnalysis/assets/charts.js @@ -1,4 +1,4 @@ -const echartsData = [ +window.typeAnalysisData = [ { value: 100, name: '行人' }, { value: 90, name: '非机动车' }, { value: 80, name: '拥堵' }, @@ -6,7 +6,7 @@ const echartsData = [ { value: 50, name: '抛洒物' }, { value: 45, name: '烟火' }] -const colorList = [ +window.colorList = [ "#019AFF", "#3CC3F0", "#51D5AD", @@ -14,14 +14,14 @@ const colorList = [ "#F6A73C", "#7390FD",] -const colorList1 = [ +window.colorList1 = [ "#61D8FF", "#FFB905", "#6AE0BC",] - let count = 0; +window.count = 0; - echartsData.forEach((it)=>{ +typeAnalysisData.forEach((it)=>{ count += it.value; }) @@ -30,9 +30,9 @@ var options = { color: colorList, legend: { orient: 'vertical', - top: "center", + top: "10", icon: "circle", - right: 30, + right: 40, itemGap: 16, itemWidth: 8, itemHeight: 8, @@ -54,11 +54,11 @@ var options = { } }, formatter: (params) => { - let obj = echartsData.filter(it=>{ return it.name == params}) + let obj = typeAnalysisData.filter(it=>{ return it.name == params}) console.log(obj); return `{ast|${obj[0].name}} {bst|${Math.round(obj[0].value/count* 100) }%}` }, - data: echartsData?.map(x => x.name), + data: typeAnalysisData?.map(x => x.name), }, tooltip: { trigger: 'item', @@ -96,7 +96,7 @@ var options = { length: 10, length2: 30, }, - data: echartsData.map((item, index) => { + data: typeAnalysisData.map((item, index) => { return { ...item, label: { @@ -139,7 +139,7 @@ var options = { length: 10, length2: 30, }, - data: echartsData.map((item, index) => { + data: typeAnalysisData.map((item, index) => { return { ...item, label: { diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/typeAnalysis/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/typeAnalysis/index.vue index b0af834d..6fc6e6f3 100644 --- a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/typeAnalysis/index.vue +++ b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/typeAnalysis/index.vue @@ -12,6 +12,7 @@ import WgtTitle from '../../../widgets/title' import * as echarts from "echarts"; import chartsStatistics from "./assets/charts"; + import { getWarningTypeDay } from '../../../../../../../api/event/perceiveEvent'; const drawRoundRect = ( ctx, x, y, width, height, radius ,gr) => { @@ -52,9 +53,95 @@ setTimeout(() => { this.$nextTick(() => { var myChart = echarts.init(document.getElementById('typeAnalysis')); - myChart.setOption(chartsStatistics); + + + getWarningTypeDay().then(res=>{ + console.log(res); + if ( res.code == 200 ) { + let data = res.data; + console.log("===================",data); + typeAnalysisData = []; + for (var i = 0;i < data.length;i++){ + var it = data[i]; + if ( it.warningType == 1) { + typeAnalysisData.push({ + name:'交通拥堵', + value:it.number + }); + } + if ( it.warningType == 2) { + typeAnalysisData.push({ + name:'行人', + value:it.number + }); + } + if ( it.warningType == 3) { + typeAnalysisData.push({ + name:'非机动车', + value:it.number + }); + } + if ( it.warningType == 4) { + typeAnalysisData.push({ + name:'停车', + value:it.number + }); + } + if ( it.warningType == 5) { + typeAnalysisData.push({ + name:'倒车/逆行', + value:it.number + }); + } + if ( it.warningType == 6) { + typeAnalysisData.push({ + name:'烟火', + value:it.number + }); + } + if ( it.warningType == 7) { + typeAnalysisData.push({ + name:'撒落物', + value:it.number + }); + } + if ( it.warningType == 8) { + typeAnalysisData.push({ + name:'异常天气', + value:it.number + }); + } + if ( it.warningType == 9) { + typeAnalysisData.push({ + name:'护栏碰撞', + value:it.number + }); + } + drawRoundRect(context, 260, 8 + i * 28, 120, 24, 12,gr) + } + chartsStatistics.legend.data = typeAnalysisData?.map(x => x.name); + chartsStatistics.series[0].data = typeAnalysisData.map((item, index) => { + return { + ...item, + label: { + color: colorList[index] + } + } + }) + chartsStatistics.series[1].data = typeAnalysisData.map((item, index) => { + return { + ...item, + label: { + color: colorList[index] + } + } + }) + } + + myChart.setOption(chartsStatistics); + }) const domMap = document.getElementById("typeAnalysis"); let parentDiv = domMap.firstChild; @@ -75,12 +162,12 @@ context.lineWidth = 1; // 设置线段宽度 // 绘制圆角矩形 - drawRoundRect(context, 260, 8, 120, 24, 12,gr) - drawRoundRect(context, 260, 36, 120, 24, 12,gr) - drawRoundRect(context, 260, 64, 120, 24, 12,gr) - drawRoundRect(context, 260, 92, 120, 24, 12,gr) - drawRoundRect(context, 260, 120, 120, 24, 12,gr) - drawRoundRect(context, 260, 148, 120, 24, 12,gr) + + // drawRoundRect(context, 260, 36, 120, 24, 12,gr) + // drawRoundRect(context, 260, 64, 120, 24, 12,gr) + // drawRoundRect(context, 260, 92, 120, 24, 12,gr) + // drawRoundRect(context, 260, 120, 120, 24, 12,gr) + // drawRoundRect(context, 260, 148, 120, 24, 12,gr) }); }); },