mengff
/
jihe-hs
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

感知事件检测

wangqin
zhoule 1 year ago
parent
d91eb3da6c
commit
c373af3ed1
9 changed files with 168 additions and 136 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 13
      ruoyi-ui/src/api/event/perceiveEvent.js
  2. 2
      ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/dailyDisposal/assets/charts.js
  3. 6
      ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/dailyDisposal/index.vue
  4. 3
      ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/dayTotal/index.vue
  5. 2
      ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventQuery/assets/charts2.js
  6. 174
      ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventSource/assets/charts.js
  7. 100
      ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventSource/index.vue
  8. 2
      ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/railway/assets/charts.js
  9. 2
      ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/typeAnalysis/index.vue

13
ruoyi-ui/src/api/event/perceiveEvent.js
View File

@ -77,13 +77,14 @@ export function geTwarningTotal(query) {
//感知事件源分析 //感知事件源分析
export function getWarningSourceGroup(query) { export function getWarningSourceGroup(query) {
//system/status/tablist
return request({ return request({
url: '/perceivedEvents/warning/warningSourceGroup', // url: '/perceivedEvents/warning/warningSourceGroup',
method: 'post', // method: 'post',
params: { url: '/business/warning/list',
...query, method: 'get',
} // params: {
// ...query,
// }
}) })
} }

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

@ -22,7 +22,7 @@ var options = {
orient: 'vertical', orient: 'vertical',
top: "center", top: "center",
icon: "circle", icon: "circle",
right: 30, right: 15,
itemGap: 16, itemGap: 16,
itemWidth: 8, itemWidth: 8,
itemHeight: 8, itemHeight: 8,

6
ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/dailyDisposal/index.vue
View File

@ -140,9 +140,9 @@ export default {
context.lineWidth = 1; // 设置线段宽度 context.lineWidth = 1; // 设置线段宽度
// 绘制圆角矩形 // 绘制圆角矩形
drawRoundRect(context, 260, 50, 120, 24, 12, gr) drawRoundRect(context, 272, 50, 120, 24, 12, gr)
drawRoundRect(context, 260, 78, 120, 24, 12, gr) drawRoundRect(context, 272, 78, 120, 24, 12, gr)
drawRoundRect(context, 260, 106, 120, 24, 12, gr) drawRoundRect(context, 272, 106, 120, 24, 12, gr)
}); });
}); });

3
ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/dayTotal/index.vue
View File

@ -13,6 +13,7 @@ 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'; import { getDailyCumulative } from '../../../../../../../api/event/perceiveEvent';
import moment from "moment";
export default { export default {
name: 'RailWayDay', name: 'RailWayDay',
@ -88,7 +89,7 @@ export default {
} }
data.forEach((it) => { data.forEach((it) => {
timer.push(it.time); timer.push(moment(it.time).format('HH:mm'));
number.push(it.number); number.push(it.number);
}); });

2
ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventQuery/assets/charts2.js
View File

@ -107,7 +107,7 @@ var options = {
//圆环中间内容 //圆环中间内容
text: "{zb|12}", text: "{zb|12}",
subtext: "类型分析", subtext: "类型分析",
left: "19%", left: "17.5%",
top: "40%", top: "40%",
textStyle: { textStyle: {
rich: { rich: {

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

@ -1,41 +1,55 @@
let data = [{ let data = [
average: 30, {
name: '视频识别', average: 30,
percent: 0.2 name: "视频识别",
}, { percent: 0.2,
average: 25, },
name: '雷达识别', {
percent: 0.25 average: 25,
}, { name: "雷达识别",
average: 15, percent: 0.25,
name: '锥桶', },
percent: 0.08 {
}, { average: 15,
average: 30, name: "锥桶",
name: '护栏碰撞', percent: 0.3,
percent: 0.14 },
}] {
average: 30,
name: "护栏碰撞",
percent: 0.25,
},
];
window.mainData = data; 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({
value: data[i].average, value: data[i].average,
name: data[i].name, name: data[i].name,
percent: data[i].percent, // percent: data[i].percent,
color: colorList[i] color: colorList[i],
}) });
lengData.push({ lengData.push({
name: data[i].name, name: data[i].name,
color: colorList[i] color: colorList[i],
}) });
} }
let a = chartData.map(t => { let a = chartData.map((t) => {
t.value = parseInt(t.value) t.value = parseInt(t.value);
return t return t;
}) });
const sum = a.reduce((per, cur) => per + cur.value, 0); const sum = a.reduce((per, cur) => per + cur.value, 0);
const gap = (1 * sum) / 100; const gap = (1 * sum) / 100;
const pieData1 = []; const pieData1 = [];
@ -64,14 +78,15 @@ var options = {
confine: true, confine: true,
textStyle: { textStyle: {
fontSize: 10, // 字体大小 fontSize: 10, // 字体大小
color: '#333', color: "#333",
}, },
color: '#333', color: "#333",
backgroundColor: "#ffffff", backgroundColor: "#ffffff",
}, },
title: { //圆环中间内容 title: {
text: '{tb|100}', //圆环中间内容
subtext: '{zb|总数}', text: "{tb|100}",
subtext: "{zb|总数}",
left: "22%", left: "22%",
top: "40%", top: "40%",
textStyle: { textStyle: {
@ -80,24 +95,24 @@ var options = {
width: 45, width: 45,
color: "#fff", color: "#fff",
fontSize: 21, fontSize: 21,
align: 'center' align: "center",
} },
} },
}, },
subtextStyle: { subtextStyle: {
rich: { rich: {
zb: { zb: {
width: 45, width: 45,
color: '#fff', color: "#fff",
fontSize: 13, fontSize: 13,
align: 'center' align: "center",
} },
} },
}, },
}, },
color: ['#5973FF', '#14d8b4', '#FFC30D', '#61D8FF', '#1DA7FF', '#2967EA'], color: ["#5973FF", "#14d8b4", "#FFC30D", "#61D8FF", "#1DA7FF", "#2967EA"],
legend: { legend: {
top: '20%', top: "8%",
right: 0, right: 0,
orient: "vertical", //改变排列方式 orient: "vertical", //改变排列方式
icon: "circle", //改变legend小图标形状 icon: "circle", //改变legend小图标形状
@ -116,7 +131,7 @@ var options = {
padding: 5, padding: 5,
marginLeft: 5, marginLeft: 5,
color: "#37E7FF", color: "#37E7FF",
} },
}, },
}, },
itemStyle: { itemStyle: {
@ -124,32 +139,27 @@ var options = {
}, },
data: lengData, data: lengData,
formatter: function (name) { formatter: function (name) {
let total = 0 let target = 0;
let target = 0
if (!mainData) return ""; if (!mainData) return "";
for (let i = 0; i < data.length; i++) { for (let i = 0; i < window.mainData.length; i++) {
if (window.mainData[i]) { if (window.mainData[i].name === name) {
total += window.mainData[i].percent target = window.mainData[i].percent;
if (window.mainData[i].name === name) {
target = window.mainData[i].percent
}
} }
} }
var arr = [ var arr = [
'{a|' + name + (name.length == 4 ? '}' : '} '), "{a|" + name + (name.trim().length == 4 ? "}" : "} "),
'{b|' + ((target / total) * 100).toFixed(2) + '%}', "{b|" + (target * 100).toFixed(0) + "%}",
] ];
return arr.join(' ') return arr.join(" ");
}, },
}, },
series: [ series: [
{ {
name: '', name: "",
avoidLabelOverlap: true,//防止标签重叠 avoidLabelOverlap: true, //防止标签重叠
type: 'pie', type: "pie",
radius: ['63%', '73%'], //大小 radius: ["63%", "73%"], //大小
center: ['30%', '50%'], //位置 center: ["30%", "50%"], //位置
hoverAnimation: true, hoverAnimation: true,
itemStyle: { itemStyle: {
normal: { normal: {
@ -165,37 +175,37 @@ var options = {
}, },
normal: { normal: {
length: 30, // 指示线长度 length: 30, // 指示线长度
length2: 80 length2: 80,
}, },
}, },
data: pieData1, data: pieData1,
label: { label: {
show: false, show: false,
formatter: function (params) { }, formatter: function (params) {},
textStyle: { textStyle: {
fontSize: '18', fontSize: "18",
fontWeight: 'bold', fontWeight: "bold",
color: '#fff' color: "#fff",
}, },
rich: { rich: {
color0: { color0: {
color: '#D56383', color: "#D56383",
}, },
color1: { color1: {
color: '#00FF95', color: "#00FF95",
}, },
color3: { color3: {
color: '#FFE900', color: "#FFE900",
}, },
color2: { color2: {
color: '#F5B157', color: "#F5B157",
}, },
color4: { color4: {
color: '#1DA7FF', color: "#1DA7FF",
}, },
color5: { color5: {
color: '#2967EA' color: "#2967EA",
} },
}, },
}, },
emphasis: { emphasis: {
@ -203,11 +213,11 @@ var options = {
}, },
}, },
{ {
type: 'gauge', type: "gauge",
zlevel: 0, zlevel: 0,
splitNumber: 360, splitNumber: 360,
radius: '50%', radius: "50%",
center: ['30%', '50%'], center: ["30%", "50%"],
startAngle: 90, startAngle: 90,
endAngle: -269.9999, endAngle: -269.9999,
axisLine: { axisLine: {
@ -224,7 +234,7 @@ var options = {
length: 68, length: 68,
lineStyle: { lineStyle: {
width: 2, width: 2,
color: '#277DCA', color: "#277DCA",
}, },
}, },
pointer: { pointer: {
@ -235,11 +245,11 @@ var options = {
}, },
}, },
{ {
type: 'gauge', type: "gauge",
zlevel: 2, zlevel: 2,
splitNumber: 185, splitNumber: 185,
radius: '80%', radius: "80%",
center: ['30%', '50%'], center: ["30%", "50%"],
startAngle: 90, startAngle: 90,
endAngle: -269.9999, endAngle: -269.9999,
axisLine: { axisLine: {
@ -256,7 +266,7 @@ var options = {
length: 2, length: 2,
lineStyle: { lineStyle: {
width: 1, width: 1,
color: '#017383', color: "#017383",
}, },
}, },
pointer: { pointer: {
@ -266,7 +276,7 @@ var options = {
show: 0, show: 0,
}, },
}, },
] ],
}; };
export default options export default options;

100
ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventSource/index.vue
View File

@ -56,66 +56,81 @@ export default {
getWarningSourceGroup().then((res) => { getWarningSourceGroup().then((res) => {
if (res.code == 200) { if (res.code == 200) {
let data = res.data.warningSourceList; let data = res.rows;
let total = res.data.total; let total = 0;
if (data.length > 0) { if (data.length > 0) {
let warningTypes = []; let chartData = [
let number = []; {
data.forEach((it, index )=> { average: 0,
name: '视频AI ',
percent: 0.3
},
{
average: 0,
name: '雷达识别',
percent: 0.2
}, {
average: 0,
name: '锥桶',
percent: 0.1
}, {
average: 0,
name: '护栏碰撞',
percent: 0.2
}, {
average: 0,
name: '扫码报警',
percent: 0.1
}, {
average: 0,
name: '非机预警',
percent: 0.1
},
]
data.forEach(it => {
if (it.warningSource == 1) { if (it.warningSource == 1) {
warningTypes.push('交通拥堵'); chartData[0].average++;
} }
if (it.warningSource == 2) { if (it.warningSource == 2) {
warningTypes.push('行人'); chartData[1].average++;
} }
if (it.warningSource == 3) { if (it.warningSource == 3) {
warningTypes.push('非机动车'); chartData[2].average++;
} }
if (it.warningSource == 4) { if (it.warningSource == 4) {
warningTypes.push('停车'); chartData[3].average++;
} }
if (it.warningSource == 5) { if (it.warningSource == 5) {
warningTypes.push('倒车/逆行'); chartData[4].average++;
} }
if (it.warningSource == 6) { if (it.warningSource == 6) {
warningTypes.push('烟火'); chartData[5].average ++;
}
if (it.warningSource == 7) {
warningTypes.push('撒落物');
}
if (it.warningSource == 8) {
warningTypes.push('异常天气');
} }
if (it.warningSource == 9) { total ++;
warningTypes.push('护栏碰撞'); // drawRoundRect(context, 231, 37 + (index * 27), 138, 20, 12, gr);
}
number.push(it.number);
drawRoundRect(context, 231, 37 + (index * 27), 138, 20, 12, gr);
}) })
// console.log('data',chartData)
let colorList = ['#006EDF', '#00FF00', '#FFC30D', '#FF8400', '#1DA7FF', '#2967EA']; let colorList = ['#006EDF', '#00FF00', '#FFC30D', '#FF8400', '#1DA7FF', '#2967EA'];
let lengData = []; let lengData = [];
let mainData = []; let mainData = [];
let mainCount = 0;
for (let j = 0; j < number.length; j++) { for (let i = 0; i < chartData.length; i++) {
mainCount += number[j]; let it = chartData[i];
}
for (let i = 0; i < warningTypes.length; i++) {
let it = warningTypes[i];
lengData.push({ lengData.push({
name: it, name: it.name,
color: colorList[i], color: colorList[i],
value: number[i], value: it.average,
}); });
mainData.push({ mainData.push({
name: it, name: it.name,
color: colorList[i], color: colorList[i],
value: number[i], value: it.average,
percent: number[i] / mainCount percent: it.average / total
}) })
} }
window.mainData = mainData; window.mainData = mainData;
console.log('mainData',mainData) // console.log('mainData', mainData)
chartsStatistics.title.text = `{tb|${total}}`; chartsStatistics.title.text = `{tb|${total}}`;
chartsStatistics.title.subtext = "{zb|总数}"; chartsStatistics.title.subtext = "{zb|总数}";
@ -123,11 +138,12 @@ export default {
chartsStatistics.series[0].data = mainData; chartsStatistics.series[0].data = mainData;
myChart.on('mouseover', (params) => { myChart.on('mouseover', (params) => {
// console.log('params',params)
if (params.componentType == 'graphic') { if (params.componentType == 'graphic') {
return return
} }
chartsStatistics.title.text = `{tb|${params.percent}%}`; chartsStatistics.title.text = `{tb|${params.percent}%}`;
chartsStatistics.title.subtext = `{zb|${params.data.name}}`; chartsStatistics.title.subtext = `{zb|${params.data.name}}`;
// chartsStatistics.title.left = "22%"; // chartsStatistics.title.left = "22%";
myChart.setOption(chartsStatistics); myChart.setOption(chartsStatistics);
}) })
@ -140,7 +156,9 @@ export default {
myChart.setOption(chartsStatistics); myChart.setOption(chartsStatistics);
}) })
} }
} }
myChart.setOption(chartsStatistics); myChart.setOption(chartsStatistics);
}) })
@ -157,10 +175,12 @@ export default {
let gr = context.createLinearGradient(230, 0, 360, 0); let gr = context.createLinearGradient(230, 0, 360, 0);
gr.addColorStop(1, 'rgba(92,197,255,0)'); gr.addColorStop(1, 'rgba(92,197,255,0)');
gr.addColorStop(0, 'rgba(92,197,255,0.3)'); gr.addColorStop(0, 'rgba(92,197,255,0.3)');
// drawRoundRect(context, 241, 37, 134, 20, 12, gr); drawRoundRect(context, 248, 15, 134, 21, 12, gr);
// drawRoundRect(context, 241, 64, 134, 20, 12, gr); drawRoundRect(context, 248, 42, 134, 21, 12, gr);
// drawRoundRect(context, 241, 91, 134, 20, 12, gr); drawRoundRect(context, 248, 69, 134, 21, 12, gr);
// drawRoundRect(context, 241, 118, 134, 20, 12, gr); drawRoundRect(context, 248, 96, 134, 21, 12, gr);
drawRoundRect(context, 248, 123, 134, 21, 12, gr);
drawRoundRect(context, 248, 150, 134, 21, 12, gr);
context.lineWidth = 1; // 设置线段宽度 context.lineWidth = 1; // 设置线段宽度

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

@ -102,7 +102,7 @@ var options = {
data: sdata, data: sdata,
color: '#fff', color: '#fff',
formatter: (c) => { formatter: (c) => {
return `{a|}{b|${c.value}辆}` return `{a|}{b|${c.value}件}`
}, },
rich: { rich: {
a: { a: {

2
ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/typeAnalysis/index.vue
View File

@ -117,7 +117,7 @@ export default {
}); });
} }
drawRoundRect(context, 254, 8 + i * 28, 120, 24, 12, gr) drawRoundRect(context, 250, 8 + i * 28, 120, 24, 12, gr)
} }
chartsStatistics.legend.data = typeAnalysisData?.map(x => x.name); chartsStatistics.legend.data = typeAnalysisData?.map(x => x.name);

Write Preview
Loading…
Cancel
Save