diff --git a/ruoyi-ui/src/api/event/perceiveEvent.js b/ruoyi-ui/src/api/event/perceiveEvent.js index 159329f1..ed8a01aa 100644 --- a/ruoyi-ui/src/api/event/perceiveEvent.js +++ b/ruoyi-ui/src/api/event/perceiveEvent.js @@ -77,13 +77,14 @@ export function geTwarningTotal(query) { //感知事件源分析 export function getWarningSourceGroup(query) { - //system/status/tablist return request({ - url: '/perceivedEvents/warning/warningSourceGroup', - method: 'post', - params: { - ...query, - } + // url: '/perceivedEvents/warning/warningSourceGroup', + // method: 'post', + url: '/business/warning/list', + method: 'get', + // 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 9b141dbe..cf553c78 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 @@ -22,7 +22,7 @@ var options = { orient: 'vertical', top: "center", icon: "circle", - right: 30, + right: 15, itemGap: 16, itemWidth: 8, itemHeight: 8, 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 3a4a511a..e7552bb8 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 @@ -140,9 +140,9 @@ export default { context.lineWidth = 1; // 设置线段宽度 // 绘制圆角矩形 - drawRoundRect(context, 260, 50, 120, 24, 12, gr) - drawRoundRect(context, 260, 78, 120, 24, 12, gr) - drawRoundRect(context, 260, 106, 120, 24, 12, gr) + drawRoundRect(context, 272, 50, 120, 24, 12, gr) + drawRoundRect(context, 272, 78, 120, 24, 12, gr) + drawRoundRect(context, 272, 106, 120, 24, 12, gr) }); }); 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 b3c8a8b2..065a5262 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 @@ -13,6 +13,7 @@ import WgtTitle from '../../../widgets/title' import * as echarts from "echarts"; import chartsStatistics from "./assets/charts"; import { getDailyCumulative } from '../../../../../../../api/event/perceiveEvent'; +import moment from "moment"; export default { name: 'RailWayDay', @@ -88,7 +89,7 @@ export default { } data.forEach((it) => { - timer.push(it.time); + timer.push(moment(it.time).format('HH:mm')); number.push(it.number); }); 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 875a0c74..9637be33 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 @@ -107,7 +107,7 @@ var options = { //圆环中间内容 text: "{zb|12}", subtext: "类型分析", - left: "19%", + left: "17.5%", top: "40%", textStyle: { rich: { 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 a3b07119..3d1cfac4 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 @@ -1,41 +1,55 @@ -let data = [{ - average: 30, - name: '视频识别', - percent: 0.2 -}, { - average: 25, - name: '雷达识别', - percent: 0.25 -}, { - average: 15, - name: '锥桶', - percent: 0.08 -}, { - average: 30, - name: '护栏碰撞', - percent: 0.14 -}] +let data = [ + { + average: 30, + name: "视频识别", + percent: 0.2, + }, + { + average: 25, + name: "雷达识别", + percent: 0.25, + }, + { + average: 15, + name: "锥桶", + percent: 0.3, + }, + { + average: 30, + name: "护栏碰撞", + percent: 0.25, + }, +]; 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++) { chartData.push({ value: data[i].average, name: data[i].name, - percent: data[i].percent, - color: colorList[i] - }) + // percent: data[i].percent, + color: colorList[i], + }); lengData.push({ name: data[i].name, - color: colorList[i] - }) + color: colorList[i], + }); } -let a = chartData.map(t => { - t.value = parseInt(t.value) - return t -}) +let a = chartData.map((t) => { + t.value = parseInt(t.value); + return t; +}); const sum = a.reduce((per, cur) => per + cur.value, 0); const gap = (1 * sum) / 100; const pieData1 = []; @@ -64,14 +78,15 @@ var options = { confine: true, textStyle: { fontSize: 10, // 字体大小 - color: '#333', + color: "#333", }, - color: '#333', + color: "#333", backgroundColor: "#ffffff", }, - title: { //圆环中间内容 - text: '{tb|100}', - subtext: '{zb|总数}', + title: { + //圆环中间内容 + text: "{tb|100}", + subtext: "{zb|总数}", left: "22%", top: "40%", textStyle: { @@ -80,24 +95,24 @@ var options = { width: 45, color: "#fff", fontSize: 21, - align: 'center' - } - } + align: "center", + }, + }, }, subtextStyle: { rich: { zb: { width: 45, - color: '#fff', + color: "#fff", fontSize: 13, - align: 'center' - } - } + align: "center", + }, + }, }, }, - color: ['#5973FF', '#14d8b4', '#FFC30D', '#61D8FF', '#1DA7FF', '#2967EA'], + color: ["#5973FF", "#14d8b4", "#FFC30D", "#61D8FF", "#1DA7FF", "#2967EA"], legend: { - top: '20%', + top: "8%", right: 0, orient: "vertical", //改变排列方式 icon: "circle", //改变legend小图标形状 @@ -116,7 +131,7 @@ var options = { padding: 5, marginLeft: 5, color: "#37E7FF", - } + }, }, }, itemStyle: { @@ -124,32 +139,27 @@ var options = { }, data: lengData, formatter: function (name) { - let total = 0 - let target = 0 + let target = 0; if (!mainData) return ""; - for (let i = 0; i < data.length; i++) { - if (window.mainData[i]) { - total += window.mainData[i].percent - if (window.mainData[i].name === name) { - target = window.mainData[i].percent - } + for (let i = 0; i < window.mainData.length; i++) { + if (window.mainData[i].name === name) { + target = window.mainData[i].percent; } } var arr = [ - '{a|' + name + (name.length == 4 ? '}' : '} '), - '{b|' + ((target / total) * 100).toFixed(2) + '%}', - ] - return arr.join(' ') + "{a|" + name + (name.trim().length == 4 ? "}" : "} "), + "{b|" + (target * 100).toFixed(0) + "%}", + ]; + return arr.join(" "); }, - }, series: [ { - name: '', - avoidLabelOverlap: true,//防止标签重叠 - type: 'pie', - radius: ['63%', '73%'], //大小 - center: ['30%', '50%'], //位置 + name: "", + avoidLabelOverlap: true, //防止标签重叠 + type: "pie", + radius: ["63%", "73%"], //大小 + center: ["30%", "50%"], //位置 hoverAnimation: true, itemStyle: { normal: { @@ -165,37 +175,37 @@ var options = { }, normal: { length: 30, // 指示线长度 - length2: 80 + length2: 80, }, }, data: pieData1, label: { show: false, - formatter: function (params) { }, + formatter: function (params) {}, textStyle: { - fontSize: '18', - fontWeight: 'bold', - color: '#fff' + fontSize: "18", + fontWeight: "bold", + color: "#fff", }, rich: { color0: { - color: '#D56383', + color: "#D56383", }, color1: { - color: '#00FF95', + color: "#00FF95", }, color3: { - color: '#FFE900', + color: "#FFE900", }, color2: { - color: '#F5B157', + color: "#F5B157", }, color4: { - color: '#1DA7FF', + color: "#1DA7FF", }, color5: { - color: '#2967EA' - } + color: "#2967EA", + }, }, }, emphasis: { @@ -203,11 +213,11 @@ var options = { }, }, { - type: 'gauge', + type: "gauge", zlevel: 0, splitNumber: 360, - radius: '50%', - center: ['30%', '50%'], + radius: "50%", + center: ["30%", "50%"], startAngle: 90, endAngle: -269.9999, axisLine: { @@ -224,7 +234,7 @@ var options = { length: 68, lineStyle: { width: 2, - color: '#277DCA', + color: "#277DCA", }, }, pointer: { @@ -235,11 +245,11 @@ var options = { }, }, { - type: 'gauge', + type: "gauge", zlevel: 2, splitNumber: 185, - radius: '80%', - center: ['30%', '50%'], + radius: "80%", + center: ["30%", "50%"], startAngle: 90, endAngle: -269.9999, axisLine: { @@ -256,7 +266,7 @@ var options = { length: 2, lineStyle: { width: 1, - color: '#017383', + color: "#017383", }, }, pointer: { @@ -266,7 +276,7 @@ var options = { show: 0, }, }, - ] + ], }; -export default options \ No newline at end of file +export default options; 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 529ffc82..4a178653 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 @@ -56,66 +56,81 @@ export default { getWarningSourceGroup().then((res) => { if (res.code == 200) { - let data = res.data.warningSourceList; - let total = res.data.total; + let data = res.rows; + let total = 0; + if (data.length > 0) { - let warningTypes = []; - let number = []; - data.forEach((it, index )=> { + let chartData = [ + { + 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) { - warningTypes.push('交通拥堵'); + chartData[0].average++; } if (it.warningSource == 2) { - warningTypes.push('行人'); + chartData[1].average++; } if (it.warningSource == 3) { - warningTypes.push('非机动车'); + chartData[2].average++; } if (it.warningSource == 4) { - warningTypes.push('停车'); + chartData[3].average++; } if (it.warningSource == 5) { - warningTypes.push('倒车/逆行'); + chartData[4].average++; } if (it.warningSource == 6) { - warningTypes.push('烟火'); - } - if (it.warningSource == 7) { - warningTypes.push('撒落物'); - } - if (it.warningSource == 8) { - warningTypes.push('异常天气'); + chartData[5].average ++; } - if (it.warningSource == 9) { - warningTypes.push('护栏碰撞'); - } - - number.push(it.number); - drawRoundRect(context, 231, 37 + (index * 27), 138, 20, 12, gr); + total ++; + // drawRoundRect(context, 231, 37 + (index * 27), 138, 20, 12, gr); }) + // console.log('data',chartData) 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]; + + for (let i = 0; i < chartData.length; i++) { + let it = chartData[i]; lengData.push({ - name: it, + name: it.name, color: colorList[i], - value: number[i], + value: it.average, }); mainData.push({ - name: it, + name: it.name, color: colorList[i], - value: number[i], - percent: number[i] / mainCount + value: it.average, + percent: it.average / total }) } window.mainData = mainData; - console.log('mainData',mainData) + // console.log('mainData', mainData) chartsStatistics.title.text = `{tb|${total}}`; chartsStatistics.title.subtext = "{zb|总数}"; @@ -123,11 +138,12 @@ export default { chartsStatistics.series[0].data = mainData; myChart.on('mouseover', (params) => { + // console.log('params',params) if (params.componentType == 'graphic') { return } chartsStatistics.title.text = `{tb|${params.percent}%}`; - chartsStatistics.title.subtext = `{zb|${params.data.name}}`; + chartsStatistics.title.subtext = `{zb|${params.data.name}}`; // chartsStatistics.title.left = "22%"; myChart.setOption(chartsStatistics); }) @@ -140,7 +156,9 @@ export default { myChart.setOption(chartsStatistics); }) } + } + myChart.setOption(chartsStatistics); }) @@ -157,10 +175,12 @@ export default { let gr = context.createLinearGradient(230, 0, 360, 0); gr.addColorStop(1, 'rgba(92,197,255,0)'); gr.addColorStop(0, 'rgba(92,197,255,0.3)'); - // drawRoundRect(context, 241, 37, 134, 20, 12, gr); - // drawRoundRect(context, 241, 64, 134, 20, 12, gr); - // drawRoundRect(context, 241, 91, 134, 20, 12, gr); - // drawRoundRect(context, 241, 118, 134, 20, 12, gr); + drawRoundRect(context, 248, 15, 134, 21, 12, gr); + drawRoundRect(context, 248, 42, 134, 21, 12, gr); + drawRoundRect(context, 248, 69, 134, 21, 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; // 设置线段宽度 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 f12e058c..2f7545d0 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 @@ -102,7 +102,7 @@ var options = { data: sdata, color: '#fff', formatter: (c) => { - return `{a|}{b|${c.value}辆}` + return `{a|}{b|${c.value}件}` }, rich: { a: { 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 c6cf05f0..5b74735f 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 @@ -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);