Browse Source

提交最新代码,路段感知分析页的联调

wangqin
yyl 10 months ago
parent
commit
8f20c678ae
  1. 24
      ruoyi-ui/src/api/event/perceiveEvent.js
  2. 7
      ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/dailyDisposal/assets/charts.js
  3. 71
      ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/dailyDisposal/index.vue
  4. 2
      ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/dayTotal/assets/charts.js
  5. 23
      ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/dayTotal/index.vue
  6. 14
      ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventSource/assets/charts.js
  7. 88
      ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventSource/index.vue
  8. 4
      ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/railway/assets/charts.js
  9. 24
      ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/railway/index.vue
  10. 4
      ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/railwayDay/assets/charts.js
  11. 20
      ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/railwayDay/index.vue
  12. 22
      ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/typeAnalysis/assets/charts.js
  13. 101
      ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/typeAnalysis/index.vue

24
ruoyi-ui/src/api/event/perceiveEvent.js

@ -19,7 +19,7 @@ export function geTwarningTotal(query) {
//system/status/tablist //system/status/tablist
return request({ return request({
url: '/system/status/tablist', url: '/system/status/tablist',
method: 'get', method: 'post',
params: { params: {
...query, ...query,
} }
@ -31,7 +31,7 @@ export function geTwarningTotal(query) {
//system/status/tablist //system/status/tablist
return request({ return request({
url: '/perceivedEvents/warning/perceivedEventsList', url: '/perceivedEvents/warning/perceivedEventsList',
method: 'get', method: 'post',
params: { params: {
...query, ...query,
} }
@ -43,7 +43,7 @@ export function geTwarningTotal(query) {
//system/status/tablist //system/status/tablist
return request({ return request({
url: '/perceivedEvents/warning/sectionPerceivedList', url: '/perceivedEvents/warning/sectionPerceivedList',
method: 'get', method: 'post',
params: { params: {
...query, ...query,
} }
@ -56,7 +56,7 @@ export function geTwarningTotal(query) {
//system/status/tablist //system/status/tablist
return request({ return request({
url: '/perceivedEvents/warning/sectionPerceivedNumber', url: '/perceivedEvents/warning/sectionPerceivedNumber',
method: 'get', method: 'post',
params: { params: {
...query, ...query,
} }
@ -68,7 +68,7 @@ export function geTwarningTotal(query) {
//system/status/tablist //system/status/tablist
return request({ return request({
url: '/perceivedEvents/warning/dailyCumulative', url: '/perceivedEvents/warning/dailyCumulative',
method: 'get', method: 'post',
params: { params: {
...query, ...query,
} }
@ -80,7 +80,7 @@ export function geTwarningTotal(query) {
//system/status/tablist //system/status/tablist
return request({ return request({
url: '/perceivedEvents/warning/warningSourceGroup', url: '/perceivedEvents/warning/warningSourceGroup',
method: 'get', method: 'post',
params: { params: {
...query, ...query,
} }
@ -92,7 +92,7 @@ export function geTwarningTotal(query) {
//system/status/tablist //system/status/tablist
return request({ return request({
url: '/perceivedEvents/warning/warningStateDay', url: '/perceivedEvents/warning/warningStateDay',
method: 'get', method: 'post',
params: { params: {
...query, ...query,
} }
@ -104,7 +104,7 @@ export function geTwarningTotal(query) {
//system/status/tablist //system/status/tablist
return request({ return request({
url: '/perceivedEvents/warning/dailyCumulativeMonth', url: '/perceivedEvents/warning/dailyCumulativeMonth',
method: 'get', method: 'post',
params: { params: {
...query, ...query,
} }
@ -116,7 +116,7 @@ export function geTwarningTotal(query) {
//system/status/tablist //system/status/tablist
return request({ return request({
url: '/perceivedEvents/warning/warningTypeDay', url: '/perceivedEvents/warning/warningTypeDay',
method: 'get', method: 'post',
params: { params: {
...query, ...query,
} }
@ -128,7 +128,7 @@ export function geTwarningTotal(query) {
//system/status/tablist //system/status/tablist
return request({ return request({
url: '/perceivedEvents/warning/warningTrend', url: '/perceivedEvents/warning/warningTrend',
method: 'get', method: 'post',
params: { params: {
...query, ...query,
} }
@ -140,7 +140,7 @@ export function geTwarningTotal(query) {
//system/status/tablist //system/status/tablist
return request({ return request({
url: '/perceivedEvents/warning/warningSectionType', url: '/perceivedEvents/warning/warningSectionType',
method: 'get', method: 'post',
params: { params: {
...query, ...query,
} }
@ -152,7 +152,7 @@ export function geTwarningTotal(query) {
//system/status/tablist //system/status/tablist
return request({ return request({
url: '/perceivedEvents/warning/sectionMarkNumber', url: '/perceivedEvents/warning/sectionMarkNumber',
method: 'get', method: 'post',
params: { params: {
...query, ...query,
} }

7
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: 25, name: '处理中' },
{ value: 32, name: '待处理' }, { value: 32, name: '待处理' },
{ value: 30, name: '已处理' },] { value: 30, name: '已处理' },]
const colorList = [ window.colorList = [
"#FFee0B", "#FFee0B",
"#61D8FF", "#61D8FF",
"#6AE0BC", "#6AE0BC",
] ]
let count = 0; window.count = 0;
echartsData.forEach((it)=>{ echartsData.forEach((it)=>{
count += it.value; count += it.value;
@ -33,6 +33,7 @@ let count = 0;
ast: { ast: {
align: "left", align: "left",
fontSize: 12, fontSize: 12,
width:35,
}, },
bst: { bst: {
align: "left", align: "left",

71
ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/dailyDisposal/index.vue

@ -12,6 +12,7 @@
import WgtTitle from '../../../widgets/title' import WgtTitle from '../../../widgets/title'
import * as echarts from "echarts"; import * as echarts from "echarts";
import chartsStatistics from "./assets/charts"; import chartsStatistics from "./assets/charts";
import { getWarningStateDay } from '../../../../../../../api/event/perceiveEvent';
const drawRoundRect = ( ctx, x, y, width, height, radius ,gr) => { const drawRoundRect = ( ctx, x, y, width, height, radius ,gr) => {
// ctx, x, y, , , // ctx, x, y, , ,
@ -50,7 +51,75 @@
setTimeout(() => { setTimeout(() => {
this.$nextTick(() => { this.$nextTick(() => {
var myChart = echarts.init(document.getElementById('dailyDisposal')); 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"); const domMap = document.getElementById("dailyDisposal");

2
ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/dayTotal/assets/charts.js

@ -70,8 +70,6 @@ const sxnja = [
// return value.min*0.9; // return value.min*0.9;
// }, // },
type: 'value', type: 'value',
min: 0,
max:1000,
// max: yAxisMax, // max: yAxisMax,
axisLine: { axisLine: {
show: false, show: false,

23
ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/dayTotal/index.vue

@ -12,6 +12,8 @@
import WgtTitle from '../../../widgets/title' import WgtTitle from '../../../widgets/title'
import * as echarts from "echarts"; import * as echarts from "echarts";
import chartsStatistics from "./assets/charts"; import chartsStatistics from "./assets/charts";
import { getDailyCumulative } from '../../../../../../../api/event/perceiveEvent';
export default { export default {
name: 'RailWayDay', name: 'RailWayDay',
components: { components: {
@ -33,7 +35,26 @@
setTimeout(() => { setTimeout(() => {
this.$nextTick(() => { this.$nextTick(() => {
var myChart = echarts.init(document.getElementById('daytotal')); 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);
}
});
}); });
}); });
}, },

14
ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventSource/assets/charts.js

@ -15,6 +15,9 @@ let data = [{
typeName:'护栏碰撞', typeName:'护栏碰撞',
percent:0.14 percent:0.14
}] }]
window.mainData = data;
let chartData = [],lengData=[], colorList = ['#006EDF', '#00FF00', '#FFC30D', '#FF8400', '#1DA7FF','#2967EA']; let chartData = [],lengData=[], colorList = ['#006EDF', '#00FF00', '#FFC30D', '#FF8400', '#1DA7FF','#2967EA'];
for (let i = 0; i < data.length; i++) { for (let i = 0; i < data.length; i++) {
chartData.push({ chartData.push({
@ -55,6 +58,8 @@ for (let i = 0; i < chartData.length; i++) {
}); });
pieData1.push(gapData); pieData1.push(gapData);
} }
console.log(pieData1);
var options = { var options = {
tooltip: { tooltip: {
confine: true, confine: true,
@ -115,10 +120,13 @@ var options = {
formatter: function(name){ formatter: function(name){
let total = 0 let total = 0
let target let target
if ( !mainData ) return "";
for (let i = 0; i < data.length; i++) { for (let i = 0; i < data.length; i++) {
total += data[i].average if ( window.mainData[i] ) {
if (data[i].typeName === name) { total += window.mainData[i].value
target = data[i].average if ( window.mainData[i].name === name) {
target = window.mainData[i].value
}
} }
} }
var arr = [ var arr = [

88
ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventSource/index.vue

@ -12,6 +12,8 @@
import WgtTitle from '../../../widgets/title' import WgtTitle from '../../../widgets/title'
import * as echarts from "echarts"; import * as echarts from "echarts";
import chartsStatistics from "./assets/charts"; import chartsStatistics from "./assets/charts";
import { getWarningSourceGroup } from '../../../../../../../api/event/perceiveEvent';
export default { export default {
name: 'EventSource', name: 'EventSource',
components: { components: {
@ -36,30 +38,74 @@
let currentIndex = -1; let currentIndex = -1;
this.$nextTick(() => { this.$nextTick(() => {
var myChart = echarts.init(document.getElementById('eventSource')); var myChart = echarts.init(document.getElementById('eventSource'));
myChart.setOption(chartsStatistics);
this.myChart = myChart;
myChart.on('mouseover', (params) => { getWarningSourceGroup().then((res)=>{
// oldIndex = currentIndex; if ( res.code == 200 ) {
currentIndex = params.dataIndex; let data = res.data;
highlightPie(currentIndex,oldIndex); 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) { number.push(it.number);
myChart.dispatchAction({ })
type: 'downplay', let colorList = ['#006EDF', '#00FF00', '#FFC30D', '#FF8400', '#1DA7FF','#2967EA'];
seriesIndex: 1, let lengData = [];
dataIndex: oldIndex let mainData = [];
}) let mainCount = 0;
myChart.dispatchAction({ for (let j =0;j < number.length;j++){
type: 'highlight', mainCount+= number[j];
seriesIndex: 1, }
dataIndex: currentIndex 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(()=>{ myChart.setOption(chartsStatistics);
})
},50)
this.myChart = myChart;
}); });
}); });
}, },

4
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 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 = { let xdata = {
value: ['平阴停车区', '孔村枢纽', '平阴南收费站', '东平湖枢纽', '沙河停车区', '梁山东收费站', '王官屯枢纽'] value: ['平阴停车区']
}; };
let sdata = { let sdata = {
value: [32774, 30067, 28774, 30067, 30021, 30067, 32774] value: [32774]
} }
let dataZoomMove = { let dataZoomMove = {

24
ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/railway/index.vue

@ -16,6 +16,8 @@
import WgtTitle from '../../../widgets/title' import WgtTitle from '../../../widgets/title'
import * as echarts from "echarts"; import * as echarts from "echarts";
import chartsStatistics from "./assets/charts"; import chartsStatistics from "./assets/charts";
import { getSectionPerceivedList } from '../../../../../../../api/event/perceiveEvent';
export default { export default {
name: 'Situation', name: 'Situation',
components: { components: {
@ -31,7 +33,27 @@
setTimeout(() => { setTimeout(() => {
this.$nextTick(() => { this.$nextTick(() => {
var myChart = echarts.init(document.getElementById('situationEchartBox')); 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);
}
});
}); });
}); });
}, },

4
ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/railwayDay/assets/charts.js

@ -68,9 +68,7 @@ var options = {
yAxis: [{ yAxis: [{
type: 'value', type: 'value',
name: "", name: "",
max: 1000,
min:0,
splitNumber:5,
nameTextStyle: { nameTextStyle: {
color: '#B6E6FF', color: '#B6E6FF',
fontSize: 13, fontSize: 13,

20
ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/railwayDay/index.vue

@ -12,6 +12,8 @@
import WgtTitle from '../../../widgets/title' import WgtTitle from '../../../widgets/title'
import * as echarts from "echarts"; import * as echarts from "echarts";
import chartsStatistics from "./assets/charts"; import chartsStatistics from "./assets/charts";
import { getSectionPerceivedNumber } from '../../../../../../../api/event/perceiveEvent';
export default { export default {
name: 'RailWayDay', name: 'RailWayDay',
components: { components: {
@ -33,7 +35,23 @@ export default {
setTimeout(() => { setTimeout(() => {
this.$nextTick(() => { this.$nextTick(() => {
var myChart = echarts.init(document.getElementById('railwayDay')); 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);
}
})
}); });
}); });
}, },

22
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: 100, name: '行人' },
{ value: 90, name: '非机动车' }, { value: 90, name: '非机动车' },
{ value: 80, name: '拥堵' }, { value: 80, name: '拥堵' },
@ -6,7 +6,7 @@ const echartsData = [
{ value: 50, name: '抛洒物' }, { value: 50, name: '抛洒物' },
{ value: 45, name: '烟火' }] { value: 45, name: '烟火' }]
const colorList = [ window.colorList = [
"#019AFF", "#019AFF",
"#3CC3F0", "#3CC3F0",
"#51D5AD", "#51D5AD",
@ -14,14 +14,14 @@ const colorList = [
"#F6A73C", "#F6A73C",
"#7390FD",] "#7390FD",]
const colorList1 = [ window.colorList1 = [
"#61D8FF", "#61D8FF",
"#FFB905", "#FFB905",
"#6AE0BC",] "#6AE0BC",]
let count = 0; window.count = 0;
echartsData.forEach((it)=>{ typeAnalysisData.forEach((it)=>{
count += it.value; count += it.value;
}) })
@ -30,9 +30,9 @@ var options = {
color: colorList, color: colorList,
legend: { legend: {
orient: 'vertical', orient: 'vertical',
top: "center", top: "10",
icon: "circle", icon: "circle",
right: 30, right: 40,
itemGap: 16, itemGap: 16,
itemWidth: 8, itemWidth: 8,
itemHeight: 8, itemHeight: 8,
@ -54,11 +54,11 @@ var options = {
} }
}, },
formatter: (params) => { formatter: (params) => {
let obj = echartsData.filter(it=>{ return it.name == params}) let obj = typeAnalysisData.filter(it=>{ return it.name == params})
console.log(obj); console.log(obj);
return `{ast|${obj[0].name}} {bst|${Math.round(obj[0].value/count* 100) }%}` 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: { tooltip: {
trigger: 'item', trigger: 'item',
@ -96,7 +96,7 @@ var options = {
length: 10, length: 10,
length2: 30, length2: 30,
}, },
data: echartsData.map((item, index) => { data: typeAnalysisData.map((item, index) => {
return { return {
...item, ...item,
label: { label: {
@ -139,7 +139,7 @@ var options = {
length: 10, length: 10,
length2: 30, length2: 30,
}, },
data: echartsData.map((item, index) => { data: typeAnalysisData.map((item, index) => {
return { return {
...item, ...item,
label: { label: {

101
ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/typeAnalysis/index.vue

@ -12,6 +12,7 @@
import WgtTitle from '../../../widgets/title' import WgtTitle from '../../../widgets/title'
import * as echarts from "echarts"; import * as echarts from "echarts";
import chartsStatistics from "./assets/charts"; import chartsStatistics from "./assets/charts";
import { getWarningTypeDay } from '../../../../../../../api/event/perceiveEvent';
const drawRoundRect = ( ctx, x, y, width, height, radius ,gr) => { const drawRoundRect = ( ctx, x, y, width, height, radius ,gr) => {
@ -52,9 +53,95 @@
setTimeout(() => { setTimeout(() => {
this.$nextTick(() => { this.$nextTick(() => {
var myChart = echarts.init(document.getElementById('typeAnalysis')); 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"); const domMap = document.getElementById("typeAnalysis");
let parentDiv = domMap.firstChild; let parentDiv = domMap.firstChild;
@ -75,12 +162,12 @@
context.lineWidth = 1; // 线 context.lineWidth = 1; // 线
// //
drawRoundRect(context, 260, 8, 120, 24, 12,gr)
drawRoundRect(context, 260, 36, 120, 24, 12,gr) // drawRoundRect(context, 260, 36, 120, 24, 12,gr)
drawRoundRect(context, 260, 64, 120, 24, 12,gr) // drawRoundRect(context, 260, 64, 120, 24, 12,gr)
drawRoundRect(context, 260, 92, 120, 24, 12,gr) // drawRoundRect(context, 260, 92, 120, 24, 12,gr)
drawRoundRect(context, 260, 120, 120, 24, 12,gr) // drawRoundRect(context, 260, 120, 120, 24, 12,gr)
drawRoundRect(context, 260, 148, 120, 24, 12,gr) // drawRoundRect(context, 260, 148, 120, 24, 12,gr)
}); });
}); });
}, },

Loading…
Cancel
Save