From d86ff49e077b3b23d4a9e0993ea95249ef6de3d6 Mon Sep 17 00:00:00 2001 From: yyl <279235553@qq.com> Date: Fri, 26 Jan 2024 08:30: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=8Ccharts=E4=BF=AE=E6=94=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/eventQuery/assets/charts.js | 2 - .../components/eventQuery/assets/charts2.js | 4 +- .../components/eventQuery/index.vue | 218 +++++++++++++++++- .../components/eventSource/index.vue | 25 +- .../monthStatistics/assets/charts.js | 4 +- .../components/monthStatistics/index.vue | 2 +- 6 files changed, 243 insertions(+), 12 deletions(-) diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventQuery/assets/charts.js b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventQuery/assets/charts.js index e1c9dafe..0b0076cc 100644 --- a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventQuery/assets/charts.js +++ b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventQuery/assets/charts.js @@ -68,8 +68,6 @@ var options = { yAxis: [{ type: 'value', name: "", - max: 1000, - min:0, splitNumber:5, nameTextStyle: { color: '#B6E6FF', diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventQuery/assets/charts2.js b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventQuery/assets/charts2.js index 93e94c8d..b65fef45 100644 --- a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventQuery/assets/charts2.js +++ b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventQuery/assets/charts2.js @@ -64,6 +64,8 @@ let data = [{ }); pieData1.push(gapData); } + + console.log(pieData1); var options = { tooltip: { confine: true, @@ -74,7 +76,7 @@ let data = [{ title:{ //圆环中间内容 text: '100%', subtext: '类型分析', - left:"18%", + left:"19%", top:"40%", textStyle:{ color:"#fff", diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventQuery/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventQuery/index.vue index 9388eab4..33725e05 100644 --- a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventQuery/index.vue +++ b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventQuery/index.vue @@ -94,7 +94,7 @@ label: '月' }, { - value: 'day', + value: 'date', label: '日' }, { @@ -183,49 +183,260 @@ }, searchQuery(){ let dateTime = this.dateTime; + var quarter = 0; if ( this.year == "year") { dateTime = new Date(dateTime); - dateTime = dateTime.getFullYear(); + dateTime = dateTime.getFullYear() + "-01-01 00:00:00"; console.log(dateTime); } if ( this.year == "month") { dateTime = new Date(dateTime); let m = dateTime.getMonth()+1; m = m < 10?"0"+m:m; - dateTime = dateTime.getFullYear() + "-" + m +"-00 00:00:00"; + dateTime = dateTime.getFullYear() + "-" + m +"-01 00:00:00"; console.log(dateTime); } + if ( this.year == "quarter" ) { + console.log(dateTime); + dateTime = new Date(dateTime); + let m = dateTime.getMonth()+1; + if ( m == 1) m = 1; + if ( m == 2) m = 4; + if ( m == 3) m = 7; + if ( m == 4) m = 10; + + quarter = m; + m = m < 10?"0"+m:m; + dateTime = dateTime.getFullYear() + "-" + m +"-01 00:00:00"; + console.log(dateTime); + } + + if ( this.year == "date" ) { + this.year = "day"; + dateTime = new Date(dateTime); + let m = dateTime.getMonth()+1; + m = m < 10?"0"+m:m; + let d = dateTime.getDate(); + d = d < 10?"0"+d:d; + dateTime = dateTime.getFullYear() + "-" + m +"-"+d+" 00:00:00"; + } + //感知事件趋势 getWarningTrend({ "type": this.year, "sectionId": this.selectId, "createTime": dateTime, + "direction":1, }).then(res=>{ console.log(res); chart1.series[0].data = []; + if ( res.code == 200 ) { + let data = res.data; + if ( this.year == "year" ) { + let years = []; + let numbers = []; + data.forEach(it=>{ + years.push(it.month+"月"); + numbers.push(it.number); + }) + chart1.xAxis.data = years; + chart1.series[0].data = numbers; + } + + if ( this.year == "month" ) { + let months = []; + let numbers = []; + data.forEach(it=>{ + months.push(it.day.split("-")[2]+"日"); + numbers.push(it.number); + }) + chart1.xAxis.data = months; + chart1.series[0].data = numbers; + } + + if ( this.year == "day" ) { + let times = []; + let numbers = []; + data.forEach(it=>{ + times.push(it.time.split(" ")[1]+"小时"); + numbers.push(it.number); + }) + chart1.xAxis.data = times; + chart1.series[0].data = numbers; + } + + if ( this.year == "quarter" ) { + let months = []; + let numbers = []; + data.forEach(it=>{ + months.push(it.MONTH+"月"); + numbers.push(it.number); + }) + chart1.xAxis.data = months; + chart1.series[0].data = numbers; + } + } + this.myChart1.setOption(chart1); }); + //类型占比 getWarningSectionType({ "type": this.year, "sectionId": this.selectId, "createTime": dateTime, + "direction":1, }).then(res=>{ console.log(res); + chart2.series[0].data = []; + if ( res.code == 200 ) { + let types = []; + let numbers = []; + const gapData = { + name: "", + value: 0.5, + itemStyle: { + color: "transparent", + }, + }; + let data = res.data.warningTypeList; + let total= res.data.total; + + data.forEach((it)=>{ + // 1-交通拥堵 2-行人 3-非机动车 4-停车5-倒车/逆行 6-烟火7-撒落物8-异常天气 9-护栏碰撞 + if ( it.warningType == 1) { + types.push("交通拥堵"); + + } + if ( it.warningType == 2) { + types.push("行人"); + } + if ( it.warningType == 3) { + types.push("非机动车"); + } + if ( it.warningType == 4) { + types.push("停车"); + } + if ( it.warningType == 5) { + types.push("倒车/逆行"); + } + if ( it.warningType == 6) { + types.push("烟火"); + } + if ( it.warningType == 7) { + types.push("撒落物"); + } + if ( it.warningType == 8) { + types.push("异常天气"); + } + if ( it.warningType == 9) { + types.push("护栏碰撞"); + } + + numbers.push({ + name:types[types.length - 1], + value:it.number + }); + numbers.push(gapData); + }) + console.log(types); + chart2.legend.data = types; + chart2.legend.formatter = function(name){ + let total = 0 + let target + for (let i = 0; i < numbers.length; i++) { + total += numbers[i].value; + if (types[i] === name) { + target = numbers[i].value; + } + } + var arr = [ + '{a|' + name + '}', + '{b|' + ((target / total) * 100).toFixed(2) + '%}', + ] + return arr.join(' ') + }; + + chart2.series[0].data = numbers; + // 用户鼠标悬浮到某一图形时，停止自动切换并高亮鼠标悬浮的图形 + this.myChart2.on('mouseover', (params) => { + if (params.componentType == 'graphic') { + return + } + console.log(params); + chart2.title.text = Math.round(params.data.value/total * 100) + "%"; + chart2.title.subtext = params.data.name; + this.myChart2.setOption(chart2); + }) + + // 用户鼠标移出时，重新开始自动切换 + this.myChart2.on('mouseout', (params) => { + chart2.title.text = total; + chart2.title.subtext = "类型分析"; + this.myChart2.setOption(chart2); + }) + } this.myChart2.setOption(chart2); + }) //路段范围内桩号分布 getSectionMarkNumber({ "type": this.year, "sectionId": this.selectId, "createTime": dateTime, + "direction":1, }).then(res=>{ console.log(res); chart3.series[0].data = []; chart3.series[1].data = []; + if ( res.code == 200 ) { + let data = res.data; + if ( this.year != "quarter" ) { + let zhs = []; + let values = []; + data.forEach((it)=>{ + console.log(it); + values.push(it.sectionNumber); + zhs.push(it.stakeMarkId); + }) + chart3.xAxis.data = zhs; + chart3.series[0].data = values; + chart3.series[1].data = values; + } else { + let zhs = []; + let values = []; + data.forEach((dt,i)=>{ + dt.forEach((it)=>{ + console.log(it); + if ( quarter == 1 && it.QUARTER == "第一季度") { + values[i] = it.number; + zhs[i] = it.stakeMark; + } + if ( quarter == 4 && it.QUARTER == "第二季度") { + values[i] = it.number; + zhs[i] = it.stakeMark; + } + if ( quarter == 7 && it.QUARTER == "第三季度") { + values[i] = it.number; + zhs[i] = it.stakeMark; + } + if ( quarter == 10 && it.QUARTER == "第四季度") { + values[i] = it.number; + zhs[i] = it.stakeMark; + } + }) + }) + chart3.xAxis.data = zhs; + chart3.series[0].data = values; + chart3.series[1].data = values; + } + } + this.myChart3.setOption(chart3); }) + if ( this.year == "day" ) + this.year = "date"; }, }, mounted() { @@ -256,6 +467,7 @@ var myChart3 = echarts.init(document.getElementById('chart3')); myChart3.setOption(chart3); + this.myChart1 = myChart1; this.myChart2 = myChart2; this.myChart3 = myChart3; 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 b47d769d..f8ed933e 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 @@ -41,7 +41,9 @@ getWarningSourceGroup().then((res)=>{ if ( res.code == 200 ) { - let data = res.data; + console.log("=================",res); + let data = res.data.warningSourceList; + let total = res.data.total; let warningTypes = []; let number = []; data.forEach(it=>{ @@ -97,9 +99,28 @@ }) } window.mainData = mainData; - console.log("--------------",mainData); + //console.log("--------------",mainData); chartsStatistics.legend.data = lengData; chartsStatistics.series[0].data = mainData; + + myChart.on('mouseover', (params) => { + if (params.componentType == 'graphic') { + return + } + console.log(params); + chartsStatistics.title.text = params.percent + "%"; + chartsStatistics.title.subtext = params.data.name; + chartsStatistics.title.left = "22%"; + myChart.setOption(chartsStatistics); + }) + + // 用户鼠标移出时，重新开始自动切换 + myChart.on('mouseout', (params) => { + chartsStatistics.title.text = total; + chartsStatistics.title.subtext = "总数"; + chartsStatistics.title.left = "25%"; + myChart.setOption(chartsStatistics); + }) } myChart.setOption(chartsStatistics); }) diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/monthStatistics/assets/charts.js b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/monthStatistics/assets/charts.js index e681ebd5..e6b2f002 100644 --- a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/monthStatistics/assets/charts.js +++ b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/monthStatistics/assets/charts.js @@ -4,10 +4,8 @@ var options = { color: ["#5090FF", "#01B3E4"], tooltip: { trigger: "axis", - backgroundColor: "rgba(0,0,0,.6)", - borderColor: "rgba(147, 235, 248, .8)", textStyle: { - color: "#FFF", + color: "#333", }, }, grid: { diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/monthStatistics/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/monthStatistics/index.vue index 11f5fb6b..62497e7d 100644 --- a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/monthStatistics/index.vue +++ b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/monthStatistics/index.vue @@ -78,7 +78,7 @@ padding: 0px 20px; background: linear-gradient(180deg, rgba(6,66,88,0.2) 0%, #064258 100%); border-radius: 5px 5px 5px 5px; - opacity: 0.8; + opacity: 1; border: 1px solid; border-image: linear-gradient(360deg, rgba(55, 231, 255,0.3), rgba(55, 231, 255, 0)) 1 1; display: flex;