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

感知事件检测

wangqin
zhoule 2 years ago
parent
891419172a
commit
3b6557268f
20 changed files with 2413 additions and 2249 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. 237
      ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/dailyDisposal/assets/charts.js
  2. 292
      ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/dailyDisposal/index.vue
  3. 20
      ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/dayTotal/assets/charts.js
  4. 186
      ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/dayTotal/index.vue
  5. 24
      ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventQuery/assets/charts.js
  6. 521
      ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventQuery/assets/charts2.js
  7. 313
      ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventQuery/assets/charts3.js
  8. 1062
      ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventQuery/index.vue
  9. 150
      ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventQuery/progressBar.vue
  10. 261
      ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventSource/assets/charts.js
  11. 295
      ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventSource/index.vue
  12. 42
      ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/monthStatistics/assets/charts.js
  13. 153
      ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/monthStatistics/index.vue
  14. 187
      ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/railway/assets/charts.js
  15. 225
      ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/railway/index.vue
  16. 23
      ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/railwayDay/assets/charts.js
  17. 47
      ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/railwayDay/index.vue
  18. 96
      ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/typeAnalysis/assets/charts.js
  19. 360
      ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/typeAnalysis/index.vue
  20. 2
      ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/index.vue

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

@ -1,144 +1,143 @@
window.echartsData = [ window.echartsData = [
{ value: 25, name: '处理中' }, { value: 25, name: '处理中' },
{ value: 32, name: '待处理' }, { value: 40, name: '待处理' },
{ value: 30, name: '已处理' },] { value: 35, name: '已处理' },]
window.colorList = [ window.colorList = [
"#FFee0B", "#FFee0B",
"#61D8FF", "#61D8FF",
"#6AE0BC", "#6AE0BC",
] ]
window.count = 0; window.count = 0;
echartsData.forEach((it)=>{ echartsData.forEach((it) => {
count += it.value; count += it.value;
}) })
var options = { var options = {
color: colorList, color: colorList,
legend: { legend: {
orient: 'vertical', orient: 'vertical',
top: "center", top: "center",
icon: "circle", icon: "circle",
right: 30, right: 30,
itemGap: 16, itemGap: 16,
itemWidth: 8, itemWidth: 8,
itemHeight: 8, itemHeight: 8,
textStyle: { textStyle: {
color: "#fff", color: "#fff",
fontSize: 12, fontSize: 12,
rich:{ rich: {
ast: { ast: {
align: "left", align: "left",
fontSize: 12, fontSize: 12,
width:35, width: 35,
}, },
bst: { bst: {
align: "left", align: "left",
fontSize: 12, fontSize: 12,
marginLeft:20, marginLeft: 20,
color:"#37E7FF" color: "#37E7FF"
} }
} }
},
formatter: (params) => {
let obj = echartsData.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), formatter: (params) => {
}, let obj = echartsData.filter(it => { return it.name == params })
tooltip: { return `{ast|${obj[0].name}} {bst|${Math.round(obj[0].value)}%}`
trigger: 'item', },
}, data: echartsData?.map(x => x),
series: [{ },
name: '', tooltip: {
type: 'pie', trigger: 'item',
radius: '78%', },
center: ['40%', '50%'], series: [{
roseType: 'radius', name: '',
label: { type: 'pie',
show: false, radius: '78%',
position: 'outside', center: ['40%', '50%'],
fontSize: 16, roseType: 'radius',
formatter: (params) => { label: {
return `{a|${params.name}} {b|${params.value/count}%}` show: false,
}, position: 'outside',
rich: { fontSize: 16,
a: { formatter: (params) => {
align: "left", return `{a|${params.name}} {b|${params.value / count}%}`
fontSize: 12, },
}, rich: {
b: { a: {
align: "left",
fontSize: 12,
},
b: {
align: "left", align: "left",
fontSize: 12, fontSize: 12,
} }
}, },
}, },
itemStyle: { itemStyle: {
normal: { normal: {
shadowColor: "rgba(0, 0, 0, 0.5)", shadowColor: "rgba(0, 0, 0, 0.5)",
shadowBlur: 50, shadowBlur: 50,
},
},
labelLine: {
show: false,
length: 10,
length2: 30,
},
data: echartsData.map((item, index) => {
return {
...item,
label: {
color: colorList[index]
}
}
})
}, {
name: '',
type: 'pie',
radius: '90%',
hoverAnimation: false,
emphasis: { scale: false },
center: ['40%', '50%'],
roseType: 'radius',
label: {
show: false,
position: 'outside',
fontSize: 16,
formatter: (params) => {
return `{a|${params.name}} `
}, },
}, rich: {
labelLine: { a: {
show:false, align: "left",
length: 10, fontSize: 12,
length2: 30, }
}, },
data: echartsData.map((item, index) => { },
return { itemStyle: {
...item,
label: {
color: colorList[index]
}
}
})
},{
name: '',
type: 'pie',
radius: '90%',
hoverAnimation: false,
emphasis: { scale: false },
center: ['40%', '50%'],
roseType: 'radius',
label: {
show: false,
position: 'outside',
fontSize: 16,
formatter: (params) => {
return `{a|${params.name}} `
},
rich: {
a: {
align: "left",
fontSize: 12,
}
},
},
itemStyle: {
normal: { normal: {
opacity:0.3, opacity: 0.3,
shadowColor: "rgba(0, 0, 0, 0.8)", shadowColor: "rgba(0, 0, 0, 0.8)",
shadowBlur: 50, shadowBlur: 50,
}, },
}, },
labelLine: { labelLine: {
show:false, show: false,
length: 10, length: 10,
length2: 30, length2: 30,
}, },
data: echartsData.map((item, index) => { data: echartsData.map((item, index) => {
return { return {
...item, ...item,
label: { label: {
color: colorList[index] color: colorList[index]
} }
} }
}) })
}] }]
}; };
export default options; export default options;

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

@ -1,178 +1,178 @@
<template> <template>
<div class='congestion'> <div class='congestion'>
<WgtTitle :title="'日事件处置情况占比'"></WgtTitle> <WgtTitle :title="'日事件处置情况占比'"></WgtTitle>
<div class="board"> <div class="board">
<div class="charts keep-ratio " id="dailyDisposal"></div> <div class="charts keep-ratio " id="dailyDisposal"></div>
</div>
</div> </div>
</template> </div>
</template>
<script> <script>
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'; 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坐标的位置, 矩形的宽, 矩形的长,圆角角度
ctx.beginPath(); ctx.beginPath();
ctx.fillStyle = gr; ctx.fillStyle = gr;
ctx.arc(x + radius, y + radius, radius, Math.PI, Math.PI * 3 / 2); ctx.arc(x + radius, y + radius, radius, Math.PI, Math.PI * 3 / 2);
ctx.lineTo(width - radius + x, y); ctx.lineTo(width - radius + x, y);
ctx.arc(width - radius + x, radius + y, radius, Math.PI * 3 / 2, Math.PI * 2); ctx.arc(width - radius + x, radius + y, radius, Math.PI * 3 / 2, Math.PI * 2);
ctx.lineTo(width + x, height + y - radius); ctx.lineTo(width + x, height + y - radius);
ctx.arc(width - radius + x, height - radius + y, radius, 0, Math.PI * 1 / 2); ctx.arc(width - radius + x, height - radius + y, radius, 0, Math.PI * 1 / 2);
ctx.lineTo(radius + x, height +y); ctx.lineTo(radius + x, height + y);
ctx.arc(radius + x, height - radius + y, radius, Math.PI * 1 / 2, Math.PI); ctx.arc(radius + x, height - radius + y, radius, Math.PI * 1 / 2, Math.PI);
ctx.closePath(); ctx.closePath();
//ctx.stroke(); //ctx.stroke();
ctx.fill() ctx.fill()
} }
export default { export default {
name: 'dailyDisposal', name: 'dailyDisposal',
components: { components: {
WgtTitle WgtTitle
}, },
data() { data() {
return { return {
}
},
created() {
},
methods: {
},
mounted() {
setTimeout(() => {
this.$nextTick(() => {
var myChart = echarts.init(document.getElementById('dailyDisposal'));
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
});
}
}
},
created() {
},
methods: {
},
mounted() {
setTimeout(() => {
this.$nextTick(() => {
var myChart = echarts.init(document.getElementById('dailyDisposal'));
getWarningStateDay().then(res => {
if (res.code == 200) {
let data = res.data;
if (data.lemgth > 0) {
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
});
} }
count = 0; if (it.warningState == 4) {
echartsData.push({
echartsData.forEach((it)=>{ name: "自动结束",
count += it.value; value: it.number
}) });
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]
}
}
})
} }
let count = 0;
echartsData.forEach((it) => {
count += it.value;
})
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); myChart.setOption(chartsStatistics);
}); });
const domMap = document.getElementById("dailyDisposal"); const domMap = document.getElementById("dailyDisposal");
let parentDiv = domMap.firstChild; let parentDiv = domMap.firstChild;
// 创建canvas // 创建canvas
let canvas = document.createElement('canvas'); let canvas = document.createElement('canvas');
canvas.width = parentDiv.offsetWidth; canvas.width = parentDiv.offsetWidth;
canvas.height =parentDiv.offsetHeight; canvas.height = parentDiv.offsetHeight;
parentDiv.appendChild(canvas); parentDiv.appendChild(canvas);
const context = canvas.getContext('2d'); const context = canvas.getContext('2d');
// 填充渐变颜色 // 填充渐变颜色
var gr = context.createLinearGradient(230, 0, 360, 0); var 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.5)'); gr.addColorStop(0, 'rgba(92,197,255,0.5)');
context.lineWidth = 1; // 设置线段宽度 context.lineWidth = 1; // 设置线段宽度
// 绘制圆角矩形 // 绘制圆角矩形
drawRoundRect(context, 260, 50, 120, 24, 12,gr) // drawRoundRect(context, 260, 50, 120, 24, 12, gr)
drawRoundRect(context, 260, 78, 120, 24, 12,gr) // drawRoundRect(context, 260, 78, 120, 24, 12, gr)
drawRoundRect(context, 260, 106, 120, 24, 12,gr) // drawRoundRect(context, 260, 106, 120, 24, 12, gr)
});
}); });
}, });
} },
</script> }
</script>
<style lang='scss' scoped> <style lang='scss' scoped>
.congestion { .congestion {
width: 100%;
.board {
height: 200px;
width: 100%; width: 100%;
.board{ padding: 0px 20px;
height:200px; background: linear-gradient(180deg, rgba(6, 66, 88, 0.2) 0%, #064258 100%);
width: 100%; border-radius: 5px 5px 5px 5px;
padding: 0px 20px; opacity: 1;
background: linear-gradient(180deg, rgba(6,66,88,0.2) 0%, #064258 100%); border: 1px solid;
border-radius: 5px 5px 5px 5px; border-image: linear-gradient(360deg, rgba(55, 231, 255, 0.3), rgba(55, 231, 255, 0)) 1 1;
opacity: 1; display: flex;
border: 1px solid; justify-content: space-between;
border-image: linear-gradient(360deg, rgba(55, 231, 255,0.3), rgba(55, 231, 255, 0)) 1 1; align-items: center;
display: flex;
justify-content: space-between;
align-items: center;
}
} }
.charts { }
height:180px;
width: 100%;
}
</style> .charts {
height: 180px;
width: 100%;
}
</style>

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

@ -8,23 +8,13 @@ const sxnja = [
}) })
console.log(minArray) console.log(minArray)
let xaxisData = [ let xaxisData = [
'1月',
'2月',
'3月',
'4月',
'5月',
'6月',
'7月',
'8月',
'9月',
'10月',
]; ];
var options = { var options = {
title: { title: {
text: '单位/%', // text: '单位/%',
top: '4%', top: '0%',
left: '3%', left: '0%',
textStyle: { textStyle: {
fontSize: '10px', fontSize: '10px',
fontWeight: 300, fontWeight: 300,
@ -34,7 +24,7 @@ const sxnja = [
}, },
tooltip: { tooltip: {
valueFormatter: function (value) { valueFormatter: function (value) {
return (value + minNumber).toFixed(2) + ' %'; return (value + minNumber).toFixed(2);
} }
}, },
grid: { grid: {
@ -100,7 +90,7 @@ const sxnja = [
], ],
series: [ series: [
{ {
name: '审限内结案率', // name: '审限内结案率',
data: minArray, data: minArray,
type: 'pictorialBar', type: 'pictorialBar',
symbol: 'roundRect', symbol: 'roundRect',

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

@ -1,88 +1,134 @@
<template> <template>
<div class='congestion'> <div class='congestion'>
<WgtTitle :title="'日累计感知事件'"></WgtTitle> <WgtTitle :title="'日累计感知事件趋势'"></WgtTitle>
<div class="board"> <div class="board">
<div class="charts keep-ratio " id="daytotal"></div> <div class="charts keep-ratio " id="daytotal"></div>
</div>
</div> </div>
</template> </div>
</template>
<script> <script>
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'; import { getDailyCumulative } from '../../../../../../../api/event/perceiveEvent';
export default { export default {
name: 'RailWayDay', name: 'RailWayDay',
components: { components: {
WgtTitle WgtTitle
}, },
data() { data() {
return { return {
} }
}, },
created() { created() {
}, },
methods: { methods: {
}, },
mounted() { mounted() {
setTimeout(() => { setTimeout(() => {
this.$nextTick(() => { this.$nextTick(() => {
var myChart = echarts.init(document.getElementById('daytotal')); var myChart = echarts.init(document.getElementById('daytotal'));
getDailyCumulative().then(res=>{ getDailyCumulative().then(res => {
if ( res.code == 200) { if (res.code == 200) {
let data = res.data; let data = res.data;
let timer = []; let timer = [];
let number = []; let number = [];
//默认数值
data.forEach((it)=>{ if(data.length < 1){
timer.push(it.time); data = [
number.push(it.number); {
}); time: '00:00',
number: 800
},
{
time: '02:00',
number: 1000
},
{
time: '04:00',
number: 800
},
{
time: '06:00',
number: 700
},
{
time: '08:00',
number: 400
},
{
time: '10:00',
number: 1000
},
{
time: '12:00',
number: 800
},
{
time: '14:00',
number: 500
},
{
time: '16:00',
number: 800
},
{
time: '18:00',
number: 500
},
]
}
chartsStatistics.xAxis.data = timer; data.forEach((it) => {
chartsStatistics.series[0].data = number; timer.push(it.time);
number.push(it.number);
});
myChart.setOption(chartsStatistics); chartsStatistics.xAxis.data = timer;
} chartsStatistics.series[0].data = number;
}); myChart.setOption(chartsStatistics);
}
}); });
}); });
}, });
} },
</script> }
</script>
<style lang='scss' scoped>
.congestion {
width: 100%;
<style lang='scss' scoped> .board {
.congestion { height: 200px;
width: 100%; width: 100%;
.board{ padding: 0px 20px;
height:200px; background: linear-gradient(180deg, rgba(6, 66, 88, 0.2) 0%, #064258 100%);
width: 100%; border-radius: 5px 5px 5px 5px;
padding: 0px 20px; opacity: 1;
background: linear-gradient(180deg, rgba(6,66,88,0.2) 0%, #064258 100%); border: 1px solid;
border-radius: 5px 5px 5px 5px; border-image: linear-gradient(360deg, rgba(55, 231, 255, 0.3), rgba(55, 231, 255, 0)) 1 1;
opacity: 1; display: flex;
border: 1px solid; justify-content: space-between;
border-image: linear-gradient(360deg, rgba(55, 231, 255,0.3), rgba(55, 231, 255, 0)) 1 1; align-items: center;
display: flex;
justify-content: space-between;
align-items: center;
}
} }
.charts { }
height:180px;
width: 100%;
}
</style> .charts {
height: 180px;
width: 100%;
}
</style>

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

@ -1,8 +1,8 @@
/* 数据 */ /* 数据 */
let nameList = ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"]; // 类别 let nameList = ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"]; // 类别
let valueList = [800, 520, 650, 950, 420, 600, 450, 720, 303, 503 , 203 ,703 , 903 ]; // 人数 let valueList = [800, 520, 650, 950, 420, 600, 450, 720, 303, 503, 203, 703, 903]; // 人数
var yList = [ "1000","800","轻度拥堵","基本畅通","畅通"] // var yList = ["1000", "800", "轻度拥堵", "基本畅通", "畅通"]
/* 数据整合 */ /* 数据整合 */
let dataList = []; let dataList = [];
nameList.map((item, index) => { nameList.map((item, index) => {
@ -32,7 +32,7 @@ nameList.map((item, index) => {
dataList.push({ dataList.push({
name: item, name: item,
value: valueList[index], value: valueList[index],
itemStyle:{ itemStyle: {
borderRadius: 6 borderRadius: 6
} }
}) })
@ -41,11 +41,14 @@ nameList.map((item, index) => {
var options = { var options = {
grid: { grid: {
top: '5%',//上边距 top: '7%',//上边距
right: '0',//右边距 right: '0',//右边距
left: '0',//左边距 left: '0',//左边距
bottom: "0%",//下边距 bottom: "2%",//下边距
containLabel: true, containLabel: true,
},
tooltip: {
}, },
xAxis: { xAxis: {
type: 'category', type: 'category',
@ -61,14 +64,14 @@ var options = {
axisLabel: { axisLabel: {
show: true, show: true,
color: '#B6E6FF', color: '#B6E6FF',
fontSize:8, fontSize: 8,
fontFamily: 'Source Han Sans CN-Regular', fontFamily: 'Source Han Sans CN-Regular',
}, },
}, },
yAxis: [{ yAxis: [{
type: 'value', type: 'value',
name: "", name: "",
splitNumber:5, splitNumber: 5,
nameTextStyle: { nameTextStyle: {
color: '#B6E6FF', color: '#B6E6FF',
fontSize: 13, fontSize: 13,
@ -99,7 +102,7 @@ var options = {
series: [{ series: [{
type: 'bar', type: 'bar',
data: dataList, data: dataList,
z:4, z: 4,
itemStyle: { itemStyle: {
color: { color: {
type: 'linear', type: 'linear',
@ -116,8 +119,9 @@ var options = {
}, },
borderRadius: [4, 4, 0, 0] borderRadius: [4, 4, 0, 0]
}, },
barWidth:10, barWidth: 10,
label: {show:false, label: {
show: false,
} }
}, },
] ]

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

@ -1,272 +1,267 @@
import * as echarts from "echarts"; let data = [
let data = [{ {
average:20, average: 10,
typeName:'行人', typeName: "交通拥堵",
percent:0.2 percent: 0.1,
},{ },
average:35, {
typeName:'非机动车', average: 11,
percent:0.25 typeName: "行人",
},{ percent: 0.11,
average:23, },
typeName:'抛洒物', {
percent:0.08 average: 12,
},{ typeName: "非机动车",
average:20, percent: 0.12,
typeName:'烟火', },
percent:0.14 {
},{ average: 13,
average:8, typeName: "停车",
typeName:'拥堵', percent: 0.13,
percent:0.14 },
},{ {
average:5, average: 5,
typeName:'逆行', typeName: "倒车/逆行",
percent:0.14 percent: 0.05,
}] },
let chartData = [],lengData=[], colorList = ['#50EED3', '#5DEF9E', '#29B3FF', '#FB5C38', '#FB5C38','#FCBB14']; {
for (let i = 0; i < data.length; i++) { average: 15,
chartData.push({ typeName: "烟火",
value: data[i].average, percent: 0.15,
name: data[i].typeName, },
percent: data[i].percent, {
color: colorList[i] average: 10,
}) typeName: "撒落物",
lengData.push({ percent: 0.1,
name: data[i].typeName, },
color: colorList[i] {
}) average: 10,
} typeName: "异常天气",
percent: 0.1,
},
{
average: 14,
typeName: "护栏碰撞",
percent: 0.14,
},
];
let chartData = [],
lengData = [],
colorList = [
"#50EED3",
"#5DEF9E",
"#29B3FF",
"#FB5C38",
"#FB5C38",
"#FCBB14",
];
for (let i = 0; i < data.length; i++) {
chartData.push({
value: data[i].average,
name: data[i].typeName,
percent: data[i].percent,
color: colorList[i],
});
lengData.push({
name: data[i].typeName,
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 = [];
const gapData = { const gapData = {
name: "", name: "",
value: gap, value: gap,
itemStyle: { itemStyle: {
color: "transparent", color: "transparent",
}, },
}; };
let total = 0; let total = 0;
chartData.forEach((item) => { chartData.forEach((item) => {
total += parseInt(item.value); total += parseInt(item.value);
}); });
for (let i = 0; i < chartData.length; i++) { for (let i = 0; i < chartData.length; i++) {
// 第一圈数据 // 第一圈数据
pieData1.push({ pieData1.push({
...chartData[i], ...chartData[i],
}); });
pieData1.push(gapData); pieData1.push(gapData);
} }
console.log(pieData1); console.log(pieData1);
var options = { var options = {
tooltip: { tooltip: {
confine: true, confine: true,
textStyle: { textStyle: {
fontSize: 14 // 字体大小 fontSize: 14, // 字体大小
},
}, },
title:{ //圆环中间内容 },
text: '100%', title: {
subtext: '类型分析', //圆环中间内容
left:"19%", text: "100%",
top:"40%", subtext: "类型分析",
textStyle:{ left: "19%",
color:"#fff", top: "40%",
fontSize:26, textStyle: {
align:"center" color: "#fff",
}, fontSize: 26,
subtextStyle: { align: "center",
fontSize: 18,
fontWeight: '400',
top: -8,
align:"center",
color:'#fff'
},
}, },
color:['#50EED3', '#5F8EFE','#29B3FF', '#5DEF9E', '#FB5C38', '#FCBB14','#50EED3'], subtextStyle: {
legend: { fontSize: 18,
top:'20%', fontWeight: "400",
right: -10, top: -8,
orient: "vertical", //改变排列方式
icon: "circle", //改变legend小图标形状
itemGap: 20, // 设置legend的间距
itemWidth: 12, // 设置宽度
itemHeight: 12, // 设置高度
itemStyle:{
}, align: "center",
textStyle: { color: "#fff",
right: -19, },
fontSize: 50, },
color: colorList,
legend: {
top: "15%",
right: -5,
orient: "vertical", //改变排列方式
icon: "circle", //改变legend小图标形状
itemGap: 20, // 设置legend的间距
itemWidth: 10, // 设置宽度
itemHeight: 10, // 设置高度
textStyle: {
right: -19,
fontSize: 30,
color: "#fff",
rich: {
a: {
width: 45,
fontSize: 12,
},
b: {
fontSize: 14,
color: "#37E7FF",
marginLeft: -0,
},
},
},
itemStyle: {
borderColor: "transparent",
},
data: lengData,
formatter: function (name) {
let total = 0;
let target;
for (let i = 0; i < data.length; i++) {
total += data[i].average;
if (data[i].typeName == name) {
target = data[i].average;
}
}
var arr = [
"{a|" + name + "}",
"{b|" + ((target / total) * 100).toFixed(2) + "%}",
];
return arr.join(" ");
},
},
series: [
{
name: "",
roseType: "radius",
startAngle: -220,
avoidLabelOverlap: true, //防止标签重叠
type: "pie",
radius: ["50%", "80%"], //大小
center: ["25%", "50%"], //位置
hoverAnimation: true,
itemStyle: {
normal: {
borderWidth: 6,
shadowBlur: 10,
borderRadius: 0, // 圆角
},
},
labelLine: {
show: false,
lineStyle: {
width: 3,
},
normal: {
length: 30, // 指示线长度
length2: 80,
},
},
data: pieData1,
label: {
show: false,
formatter: function (params) {},
textStyle: {
fontSize: "18",
fontWeight: "bold",
color: "#fff", color: "#fff",
rich:{ },
a:{ rich: {
width:45, color0: {
fontSize: 12, color: "#D56383",
}, },
b:{ color1: {
fontSize:14, color: "#00FF95",
color:"#37E7FF", },
marginLeft:-0, color3: {
} color: "#FFE900",
}, },
}, color2: {
itemStyle: { color: "#F5B157",
borderColor: "transparent", },
}, color4: {
data: lengData, color: "#1DA7FF",
formatter: function(name){ },
let total = 0 color5: {
let target color: "#2967EA",
for (let i = 0; i < data.length; i++) { },
total += data[i].average },
if (data[i].typeName === name) { },
target = data[i].average emphasis: {
} show: false,
} },
var arr = [ },
'{a|' + name + '}', {
'{b|' + ((target / total) * 100).toFixed(2) + '%}', type: "gauge",
] zlevel: 2,
return arr.join(' ') splitNumber: 185,
}, radius: "70%",
center: ["25%", "50%"],
startAngle: 90,
endAngle: -269.9999,
axisLine: {
show: false,
},
axisTick: {
show: false,
},
axisLabel: {
show: false,
},
splitLine: {
show: true,
length: 2,
lineStyle: {
width: 1,
color: "#017383",
},
},
pointer: {
show: 0,
},
detail: {
show: 0,
},
}, },
series: [ ],
{ };
name: '',
roseType: 'radius',
startAngle:-220,
avoidLabelOverlap: true,//防止标签重叠
type: 'pie',
radius: ['63%', '90%'], //大小
center : ['25%','50%'], //位置
hoverAnimation: true,
itemStyle: {
normal: {
borderWidth: 6,
shadowBlur: 10,
borderRadius: 0, // 圆角
},
},
labelLine: {
show:false,
lineStyle: {
width: 3,
},
normal: {
length: 30, // 指示线长度
length2:80
},
},
data: pieData1,
label: {
show: false,
formatter: function(params){ },
textStyle: {
fontSize: '18',
fontWeight: 'bold',
color:'#fff'
},
rich: {
color0: {
color: '#D56383',
},
color1: {
color: '#00FF95',
},
color3: {
color: '#FFE900',
},
color2: {
color: '#F5B157',
},
color4: {
color: '#1DA7FF',
},
color5:{
color:'#2967EA'
}
},
},
emphasis: {
show: false,
},
},
// {
// type: 'gauge',
// zlevel: 0,
// splitNumber: 360,
// radius: '50%',
// center: ['25%', '50%'],
// startAngle: 90,
// endAngle: -269.9999,
// axisLine: {
// show: false,
// },
// axisTick: {
// show: false,
// },
// axisLabel: {
// show: false,
// },
// splitLine: {
// show: true,
// length:68,
// lineStyle: {
// width: 2,
// color: '#277DCA',
// },
// },
// pointer: {
// show: 0,
// },
// detail: {
// show: 0,
// },
// },
{
type: 'gauge',
zlevel: 2,
splitNumber: 185,
radius: '70%',
center: ['25%', '50%'],
startAngle: 90,
endAngle: -269.9999,
axisLine: {
show: false,
},
axisTick: {
show: false,
},
axisLabel: {
show: false,
},
splitLine: {
show: true,
length:2,
lineStyle: {
width: 1,
color: '#017383',
},
},
pointer: {
show: 0,
},
detail: {
show: 0,
},
},
]
};
export default options export default options;

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

@ -1,163 +1,150 @@
import * as echarts from "echarts"; import * as echarts from "echarts";
let xData = [ let xData = [
"1月", "1月",
"2月", "2月",
"3月", "3月",
"4月", "4月",
"5月", "5月",
"6月", "6月",
"7月", "7月",
"8月", "8月",
"9月", "9月",
"10月", "10月",
"11月", "11月",
"12月" "12月"
]; ];
let data1 = [200, 530, 920, 400, 600, 700, 300, 800, 900, 120, 570, 800]; let data1 = [200, 530, 920, 400, 600, 700, 300, 800, 900, 120, 570, 800];
let options = { let options = {
tooltip: { tooltip: {
show:false, },
trigger: "axis", grid: {
axisPointer: { left: "2%",
// 坐标轴指示器，坐标轴触发有效 right: "4%",
type: "shadow", // 默认为直线，可选为：'line' | 'shadow' top: "5%",
}, bottom: "5%",
textStyle: { containLabel: true,
},
xAxis: {
data: xData,
show: true,
axisTick: {
show: false,
lineStyle: {
color: "#fff", color: "#fff",
fontSize: 14,
}, },
backgroundColor: "rgba(3, 31, 71, .0)", //设置背景颜色
borderColor: "rgba(3, 31, 71, .1)",
formatter: "健康监测<br>{b1}：{c1}人",
}, },
grid: { axisLine: {
left: "2%", lineStyle: {
right: "4%", color: "#1C82C5",
top: "5%", },
bottom: "5%",
containLabel: true,
}, },
xAxis: { axisLabel: {
data: xData, interval: 0,
show: true, align: "center",
axisTick: { rotate: "1",
show: false, margin: "20",
lineStyle: { textStyle: {
color: "#fff", fontSize: 12,
}, color: "#50A2C1",
}, },
},
},
yAxis: [
{
min: 0,
axisLine: { axisLine: {
lineStyle: { lineStyle: {
color: "#1C82C5", color: "#1C82C5",
}, },
}, },
splitLine: {
show: true,
lineStyle: {
color: "rgba(28, 130, 197, .3)",
type: "solid",
},
},
axisLabel: { axisLabel: {
interval: 0, color: "#DEEBFF",
align: "center",
rotate: "1",
margin: "20",
textStyle: { textStyle: {
fontSize: 12, fontSize: 12,
color: "#50A2C1",
},
},
},
yAxis: [
{
min: 0,
axisLine: {
lineStyle: {
color: "#1C82C5",
},
},
splitLine: {
show: true,
lineStyle: {
color: "rgba(28, 130, 197, .3)",
type: "solid",
},
},
axisLabel: {
color: "#DEEBFF",
textStyle: {
fontSize: 12,
},
},
axisTick: {
show: false,
}, },
}, },
], axisTick: {
legend: { show: false,
show: false,
top: "5%",
left: "50%",
textStyle: {
color: "#fff",
fontSize: 14,
}, },
itemGap: 12, // 设置间距
}, },
series: [ ],
// 下半截柱状图linear-gradient(180deg, #61D8FF 0%, #003B4E 100%); linear-gradient(180deg, #06D7B1 0%, #003B4E 100%) legend: {
{ show: false,
name: "种植面积", top: "5%",
type: "bar", left: "50%",
barWidth: "10px", textStyle: {
barGap: "-100%", color: "#fff",
selectedMode:true, fontSize: 14,
select:{ },
itemStyle:{ itemGap: 12, // 设置间距
opacity: 1, },
color: function (params) { series: [
var a = params; // 下半截柱状图linear-gradient(180deg, #61D8FF 0%, #003B4E 100%); linear-gradient(180deg, #06D7B1 0%, #003B4E 100%)
{
// name: "种植面积",
type: "bar",
barWidth: "10px",
barGap: "-100%",
selectedMode: true,
select: {
itemStyle: {
opacity: 1,
color: function (params) {
var a = params;
return new echarts.graphic.LinearGradient( return new echarts.graphic.LinearGradient(
0, 0,
0, 0,
0, 0,
1, 1,
[ [
{ {
offset: 0, offset: 0,
color: "#01D5BC", // 0% 处的颜色 color: "#01D5BC", // 0% 处的颜色
}, },
{ {
offset: 1, offset: 1,
color: "#003B4E", // 100% 处的颜色 color: "#003B4E", // 100% 处的颜色
}, },
], ],
false false
); );
},
}, },
}, },
itemStyle: { },
// lenged文本 itemStyle: {
opacity: 0.6, // lenged文本
color: function (params) { opacity: 0.6,
var a = params.name; color: function (params) {
console.log("==========a=============",a); var a = params.name;
if ( a == "6月" ) { console.log("==========a=============", a);
return new echarts.graphic.LinearGradient( if (a == "6月") {
0, return new echarts.graphic.LinearGradient(
0, 0,
0, 0,
1, 0,
[ 1,
{ [
offset: 0, {
color: "#01D5BC", // 0% 处的颜色 offset: 0,
}, color: "#01D5BC", // 0% 处的颜色
{ },
offset: 1, {
color: "#003B4E", // 100% 处的颜色 offset: 1,
}, color: "#003B4E", // 100% 处的颜色
], },
false ],
); false
} else );
} else
return new echarts.graphic.LinearGradient( return new echarts.graphic.LinearGradient(
0, 0,
0, 0,
@ -175,34 +162,34 @@ let xData = [
], ],
false false
); );
},
}, },
data: data1,
}, },
data: data1,
},
// 进度条的小圆圈 // 进度条的小圆圈
{ {
name: "小圈圈", name: "小圈圈",
type: "scatter", type: "scatter",
emphasis: { emphasis: {
scale: false scale: false
}, },
symbol: symbol:
"image://data:image/png;base64,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", "image://data:image/png;base64,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",
symbolSize: [26, 26], symbolSize: [26, 26],
itemStyle: { itemStyle: {
color: "#FFF", color: "#FFF",
shadowColor: "rgba(0, 255, 254, 0.53)", shadowColor: "rgba(0, 255, 254, 0.53)",
shadowBlur: 5, shadowBlur: 5,
borderWidth: 1, borderWidth: 1,
opacity: 1 opacity: 1
}, },
z: 2, z: 2,
zlevel: 10, zlevel: 10,
data: data1, data: data1,
animationDelay: 500 animationDelay: 500
} }
], ],
}; };
export default options; export default options;

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

File diff suppressed because it is too large

150
ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventQuery/progressBar.vue
View File

@ -1,77 +1,79 @@
<template> <template>
<div class='congestion'> <div class='congestion'>
<div :style="{width: dataList.length * 300}" > <div :style="{ width: dataList.length * 300 }">
<div :class="selectIndex == index?selectLine < 1?'item action Abefore':'item action Aafter':selectIndex + selectLine == index?selectLine < 1?'item action Aafter':'item action Abefore':'item'" v-for="(item,index) in dataList" :key="index" > <div :class="selectIndex == index ? selectLine < 1 ? 'item action Abefore' : 'item action Aafter' : selectIndex + selectLine == index ? selectLine < 1 ? 'item action Aafter' : 'item action Abefore' : 'item'"
<i class="after" @click="selectItem(index,-1, dataList[index - 1])"></i> v-for="(item, index) in dataList" :key="index">
<i class="before" @click="selectItem(index,+1,item)" ></i> <i class="after" @click="selectItem(index, -1, dataList[index - 1])"></i>
<span></span> <i class="before" @click="selectItem(index, +1, item)"></i>
<div>{{ item.title }}</div> <span></span>
</div> <div>{{ item.title }}</div>
</div>
</div> </div>
</div> </div>
</template> </template>
<script>
import { number } from 'echarts';
<script>
export default { export default {
name: 'ProgressBar', name: 'ProgressBar',
components: { components: {
}, },
props:{ props: {
dataList:{ dataList: {
type:Array, type: Array,
default: () => { default: () => {
return [] return []
} }
}, },
selectIndex: {
type: Number,
default: 1
}
}, },
data() { data() {
return { return {
selectIndex:0, // selectIndex: 0,
selectLine:-1, selectLine: -1,
} }
}, },
created() { created() {
}, },
methods: { methods: {
selectItem(index,num,item){ selectItem(index, num, item) {
this.selectIndex = index; this.selectIndex = index;
this.selectLine = num; this.selectLine = num;
if ( item ) if (item)
this.$emit("selectItem",item); this.$emit("selectItem", item);
} }
}, },
mounted() { mounted() {
}, },
} }
</script> </script>
<style lang='scss' scoped> <style lang='scss' scoped>
.congestion { .congestion {
width: 100%; width: 100%;
height:35px; height: 35px;
display: inline-flex; display: inline-flex;
flex-direction: row; flex-direction: row;
> div { >div {
position: relative; position: relative;
width: 100%; width: 100%;
height:35px; height: 35px;
display: inline-flex; display: inline-flex;
flex-direction: row; flex-direction: row;
>.item .after { >.item .after {
position: absolute; position: absolute;
display: inline-flex; display: inline-flex;
left:0px; left: 0px;
top:-5px; top: -5px;
width:45px !important; width: 45px !important;
height:35px !important; height: 35px !important;
background-color: transparent; background-color: transparent;
cursor: pointer; cursor: pointer;
} }
@ -80,20 +82,20 @@ import { number } from 'echarts';
content: ""; content: "";
position: absolute; position: absolute;
display: inline-flex; display: inline-flex;
left:0px; left: 0px;
top:8px; top: 8px;
width:45px !important; width: 45px !important;
height:3px !important; height: 3px !important;
background-color: #C7C7C7; background-color: #C7C7C7;
} }
>.item .before { >.item .before {
position: absolute; position: absolute;
display: inline-flex; display: inline-flex;
right:0px; right: 0px;
top:-5px; top: -5px;
width:45px; width: 45px;
height:35px; height: 35px;
background-color: transparent; background-color: transparent;
cursor: pointer; cursor: pointer;
} }
@ -102,55 +104,55 @@ import { number } from 'echarts';
content: ""; content: "";
position: absolute; position: absolute;
display: inline-flex; display: inline-flex;
left:0px; left: 0px;
top:8px; top: 8px;
width:45px !important; width: 45px !important;
height:3px !important; height: 3px !important;
background-color: #C7C7C7; background-color: #C7C7C7;
} }
.item.action .after::after { .item.action .after::after {
background-color: #72FDC9 ; background-color: #72FDC9;
} }
.item.action.Aafter .after::after{ .item.action.Aafter .after::after {
background-color: #C7C7C7 !important; background-color: #C7C7C7 !important;
} }
> .item.action.Aafter .before::after { >.item.action.Aafter .before::after {
background-color: #72FDC9 ; background-color: #72FDC9;
} }
> .item.action.Abefore .after::after { >.item.action.Abefore .after::after {
background-color: #72FDC9 ; background-color: #72FDC9;
} }
> .bef::before { >.bef::before {
background-color: #72FDC9 !important; background-color: #72FDC9 !important;
} }
> .aft::after { >.aft::after {
background-color: #72FDC9 !important; background-color: #72FDC9 !important;
} }
> .item.action span { >.item.action span {
background-color: #72FDC9 ; background-color: #72FDC9;
cursor: pointer; cursor: pointer;
} }
> .item.action span::after { >.item.action span::after {
border-color: #72FDC9 ; border-color: #72FDC9;
} }
> .action div { >.action div {
color:#72FDC9 !important; color: #72FDC9 !important;
} }
>.item { >.item {
position: relative; position: relative;
width: 113px; width: 113px;
height:35px; height: 35px;
display: inline-flex; display: inline-flex;
flex-direction: column; flex-direction: column;
justify-items: center; justify-items: center;
@ -158,40 +160,40 @@ import { number } from 'echarts';
>span { >span {
position: absolute; position: absolute;
display:inline-flex; display: inline-flex;
width: 9px; width: 9px;
height: 9px; height: 9px;
background: #C7C7C7; background: #C7C7C7;
border-radius: 50%; border-radius: 50%;
opacity: 1; opacity: 1;
left:53px; left: 53px;
} }
>div { >div {
position: relative; position: relative;
display:inline-flex; display: inline-flex;
width:100%; width: 100%;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
top: 5px; top: 5px;
margin-top:10px; margin-top: 10px;
color:#C7C7C7; color: #C7C7C7;
} }
>span::after { >span::after {
content: ""; content: "";
position: absolute; position: absolute;
display:inline-flex; display: inline-flex;
width: 15px; width: 15px;
height: 15px; height: 15px;
border:1px solid #C7C7C7; border: 1px solid #C7C7C7;
border-radius: 50%; border-radius: 50%;
opacity: 1; opacity: 1;
top:-3.5px; top: -3.5px;
left:-3px; left: -3px;
} }
} }
} }
} }
</style> </style>

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

@ -1,175 +1,174 @@
let data = [{ let data = [{
average:30, average: 30,
typeName:'视频识别', typeName: '视频识别',
percent:0.2 percent: 0.2
},{ }, {
average:25, average: 25,
typeName:'雷达识别', typeName: '雷达识别',
percent:0.25 percent: 0.25
},{ }, {
average:15, average: 15,
typeName:'锥桶', typeName: '锥桶',
percent:0.08 percent: 0.08
},{ }, {
average:30, average: 30,
typeName:'护栏碰撞', typeName: '护栏碰撞',
percent:0.14 percent: 0.14
}] }]
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].typeName, name: data[i].typeName,
percent: data[i].percent, percent: data[i].percent,
color: colorList[i] color: colorList[i]
}) })
lengData.push({ lengData.push({
name: data[i].typeName, name: data[i].typeName,
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 = [];
const gapData = { const gapData = {
name: "", name: "",
value: gap, value: gap,
itemStyle: { itemStyle: {
color: "transparent", color: "transparent",
}, },
}; };
let total = 0; let total = 0;
chartData.forEach((item) => { chartData.forEach((item) => {
total += parseInt(item.value); total += parseInt(item.value);
}); });
for (let i = 0; i < chartData.length; i++) { for (let i = 0; i < chartData.length; i++) {
// 第一圈数据 // 第一圈数据
pieData1.push({ pieData1.push({
...chartData[i], ...chartData[i],
}); });
pieData1.push(gapData); pieData1.push(gapData);
} }
console.log(pieData1);
var options = { var options = {
tooltip: { tooltip: {
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: '99% ', text: '99% ',
subtext: ' 占比', subtext: ' 占比',
left:"22%", left: "22%",
top:"40%", top: "40%",
textStyle:{ textStyle: {
color:"#fff", color: "#fff",
fontSize:21, fontSize: 21,
align:"center" align: "center"
}, },
subtextStyle: { subtextStyle: {
fontSize: 13, fontSize: 13,
fontWeight: '400', fontWeight: '400',
top: 0, top: 0,
marginLeft:20, marginLeft: 20,
align:"center", align: "center",
color:'#fff' color: '#fff'
}, },
}, },
color:['#5973FF', '#14d8b4', '#FFC30D', '#61D8FF', '#1DA7FF','#2967EA'], color: ['#5973FF', '#14d8b4', '#FFC30D', '#61D8FF', '#1DA7FF', '#2967EA'],
legend: { legend: {
top:'20%', top: '20%',
right: 0, right: 0,
orient: "vertical", //改变排列方式 orient: "vertical", //改变排列方式
icon: "circle", //改变legend小图标形状 icon: "circle", //改变legend小图标形状
itemGap: 15, // 设置legend的间距 itemGap: 15, // 设置legend的间距
itemWidth: 10, // 设置宽度 itemWidth: 10, // 设置宽度
itemHeight: 15, // 设置高度 itemHeight: 15, // 设置高度
textStyle: { textStyle: {
fontSize: 12, fontSize: 12,
color: "#fff", color: "#fff",
rich:{ rich: {
a:{ a: {
fontSize: 12, fontSize: 12,
}, },
b:{ b: {
fontSize: 12, fontSize: 12,
padding: 5, padding: 5,
marginLeft:5, marginLeft: 5,
color:"#37E7FF", color: "#37E7FF",
} }
},
},
itemStyle: {
borderColor: "transparent",
},
data: lengData,
formatter: function(name){
let total = 0
let target
if ( !mainData ) return "";
for (let i = 0; i < data.length; i++) {
if ( window.mainData[i] ) {
total += window.mainData[i].value
if ( window.mainData[i].name === name) {
target = window.mainData[i].value
}
}
}
var arr = [
'{a|' + name + '}',
'{b|' + ((target / total) * 100).toFixed(2) + '%}',
]
return arr.join(' ')
}, },
},
itemStyle: {
borderColor: "transparent",
},
data: lengData,
formatter: function (name) {
let total = 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].typeName === name) {
target = window.mainData[i].percent
}
}
}
var arr = [
'{a|' + name + (name.length == 4 ? '}' : '} '),
'{b|' + ((target / total) * 100).toFixed(2) + '%}',
]
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: {
borderWidth: 6, borderWidth: 6,
shadowBlur: 10, shadowBlur: 10,
borderRadius: 10, // 圆角 borderRadius: 10, // 圆角
}, },
}, },
labelLine: { labelLine: {
show:false, show: false,
lineStyle: { lineStyle: {
width: 3, width: 3,
}, },
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: {
@ -187,8 +186,8 @@ var options = {
color4: { color4: {
color: '#1DA7FF', color: '#1DA7FF',
}, },
color5:{ color5: {
color:'#2967EA' color: '#2967EA'
} }
}, },
}, },
@ -196,7 +195,7 @@ var options = {
show: false, show: false,
}, },
}, },
{ {
type: 'gauge', type: 'gauge',
zlevel: 0, zlevel: 0,
splitNumber: 360, splitNumber: 360,
@ -215,7 +214,7 @@ var options = {
}, },
splitLine: { splitLine: {
show: true, show: true,
length:68, length: 68,
lineStyle: { lineStyle: {
width: 2, width: 2,
color: '#277DCA', color: '#277DCA',
@ -247,7 +246,7 @@ var options = {
}, },
splitLine: { splitLine: {
show: true, show: true,
length:2, length: 2,
lineStyle: { lineStyle: {
width: 1, width: 1,
color: '#017383', color: '#017383',

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

@ -1,102 +1,118 @@
<template> <template>
<div @resize="changeReisze" class='congestion'> <div @resize="changeReisze" class='congestion'>
<WgtTitle :title="'感知事件源分析'"></WgtTitle> <WgtTitle :title="'感知事件源分析'"></WgtTitle>
<div class="board"> <div class="board">
<div class="charts keep-ratio " id="eventSource"></div> <div class="charts keep-ratio " id="eventSource"></div>
</div>
</div> </div>
</template> </div>
</template>
<script>
import WgtTitle from '../../../widgets/title'
import * as echarts from "echarts";
import chartsStatistics from "./assets/charts";
import { getWarningSourceGroup } from '../../../../../../../api/event/perceiveEvent';
const drawRoundRect = (ctx, x, y, width, height, radius, gr) => {
// ctx, 矩形距离x坐标位置, 矩形距离y坐标的位置, 矩形的宽, 矩形的长,圆角角度
ctx.beginPath();
ctx.fillStyle = gr;
ctx.arc(x + radius, y + radius, radius, Math.PI, Math.PI * 3 / 2);
ctx.lineTo(width - radius + x, y);
ctx.arc(width - radius + x, radius + y, radius, Math.PI * 3 / 2, Math.PI * 2);
ctx.lineTo(width + x, height + y - radius);
ctx.arc(width - radius + x, height - radius + y, radius, 0, Math.PI * 1 / 2);
ctx.lineTo(radius + x, height + y);
ctx.arc(radius + x, height - radius + y, radius, Math.PI * 1 / 2, Math.PI);
ctx.closePath();
//ctx.stroke();
ctx.fill()
}
export default {
name: 'EventSource',
components: {
WgtTitle
},
data() {
return {
<script> }
},
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: {
WgtTitle
},
data() {
return {
}
},
created() { created() {
},
methods: {
changeReisze() {
this.myChart.resize();
}, },
methods: { },
changeReisze(){ mounted() {
this.myChart.resize(); setTimeout(() => {
}, this.$nextTick(() => {
}, var myChart = echarts.init(document.getElementById('eventSource'));
mounted() {
setTimeout(() => { getWarningSourceGroup().then((res) => {
let currentIndex = -1; if (res.code == 200) {
this.$nextTick(() => { let data = res.data.warningSourceList;
var myChart = echarts.init(document.getElementById('eventSource')); let total = res.data.total;
if (data.length > 0) {
getWarningSourceGroup().then((res)=>{
if ( res.code == 200 ) {
console.log("=================",res);
let data = res.data.warningSourceList;
let total = res.data.total;
let warningTypes = []; let warningTypes = [];
let number = []; let number = [];
data.forEach(it=>{ data.forEach((it, index )=> {
if ( it.warningSource == 1) { if (it.warningSource == 1) {
warningTypes.push('交通拥堵'); warningTypes.push('交通拥堵');
} }
if ( it.warningSource == 2) { if (it.warningSource == 2) {
warningTypes.push('行人'); warningTypes.push('行人');
} }
if ( it.warningSource == 3) { if (it.warningSource == 3) {
warningTypes.push('非机动车'); warningTypes.push('非机动车');
} }
if ( it.warningSource == 4) { if (it.warningSource == 4) {
warningTypes.push('停车'); warningTypes.push('停车');
} }
if ( it.warningSource == 5) { if (it.warningSource == 5) {
warningTypes.push('倒车/逆行'); warningTypes.push('倒车/逆行');
} }
if ( it.warningSource == 6) { if (it.warningSource == 6) {
warningTypes.push('烟火'); warningTypes.push('烟火');
} }
if ( it.warningSource == 7) { if (it.warningSource == 7) {
warningTypes.push('撒落物'); warningTypes.push('撒落物');
} }
if ( it.warningSource == 8) { if (it.warningSource == 8) {
warningTypes.push('异常天气'); warningTypes.push('异常天气');
} }
if ( it.warningSource == 9) { if (it.warningSource == 9) {
warningTypes.push('护栏碰撞'); warningTypes.push('护栏碰撞');
} }
number.push(it.number); number.push(it.number);
// drawRoundRect(context, 241, 37 + (index * 27), 134, 20, 12, gr);
}) })
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; let mainCount = 0;
for (let j =0;j < number.length;j++){ for (let j = 0; j < number.length; j++) {
mainCount+= number[j]; mainCount += number[j];
} }
for (let i = 0;i < warningTypes.length;i++){ for (let i = 0; i < warningTypes.length; i++) {
let it = warningTypes[i]; let it = warningTypes[i];
lengData.push({ lengData.push({
name:it, name: it,
color:colorList[i], color: colorList[i],
value:number[i], value: number[i],
}); });
mainData.push({ mainData.push({
name:it, name: it,
color:colorList[i], color: colorList[i],
value:number[i], value: number[i],
percent: number[i]/mainCount percent: number[i] / mainCount
}) })
} }
window.mainData = mainData; window.mainData = mainData;
//console.log("--------------",mainData); //console.log("--------------",mainData);
@ -104,57 +120,80 @@
chartsStatistics.series[0].data = mainData; chartsStatistics.series[0].data = mainData;
myChart.on('mouseover', (params) => { myChart.on('mouseover', (params) => {
if (params.componentType == 'graphic') { if (params.componentType == 'graphic') {
return return
} }
console.log(params); chartsStatistics.title.text = params.percent + "%";
chartsStatistics.title.text = params.percent + "%"; chartsStatistics.title.subtext = params.data.name;
chartsStatistics.title.subtext = params.data.name; chartsStatistics.title.left = "22%";
chartsStatistics.title.left = "22%"; myChart.setOption(chartsStatistics);
myChart.setOption(chartsStatistics); })
})
// 用户鼠标移出时，重新开始自动切换 // 用户鼠标移出时，重新开始自动切换
myChart.on('mouseout', (params) => { myChart.on('mouseout', (params) => {
chartsStatistics.title.text = total; chartsStatistics.title.text = total;
chartsStatistics.title.subtext = "总数"; chartsStatistics.title.subtext = "总数";
chartsStatistics.title.left = "25%"; chartsStatistics.title.left = "25%";
myChart.setOption(chartsStatistics); myChart.setOption(chartsStatistics);
}) })
} }
myChart.setOption(chartsStatistics); }
}) myChart.setOption(chartsStatistics);
})
const domMap = document.getElementById("eventSource");
let parentDiv = domMap.firstChild;
// 创建canvas
let canvas = document.createElement('canvas');
canvas.width = parentDiv.offsetWidth;
canvas.height = parentDiv.offsetHeight;
parentDiv.appendChild(canvas);
const context = canvas.getContext('2d');
// 填充渐变颜色
let gr = context.createLinearGradient(247, 63, 450, 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);
context.lineWidth = 1; // 设置线段宽度
this.myChart = myChart;
}); this.myChart = myChart;
}); });
}, });
} },
</script> }
</script>
<style lang='scss' scoped> <style lang='scss' scoped>
.congestion { .congestion {
width: 100%;
.board {
height: 200px;
width: 100%; width: 100%;
.board{ padding: 40px 40px;
height:200px; background: linear-gradient(180deg, rgba(6, 66, 88, 0.2) 0%, #064258 100%);
width: 100%; border-radius: 5px 5px 5px 5px;
padding: 40px 40px; opacity: 1;
background: linear-gradient(180deg, rgba(6,66,88,0.2) 0%, #064258 100%); border: 1px solid;
border-radius: 5px 5px 5px 5px; border-image: linear-gradient(360deg, rgba(55, 231, 255, 0.3), rgba(55, 231, 255, 0)) 1 1;
opacity: 1; display: flex;
border: 1px solid; justify-content: space-between;
border-image: linear-gradient(360deg, rgba(55, 231, 255,0.3), rgba(55, 231, 255, 0)) 1 1; align-items: center;
display: flex;
justify-content: space-between;
align-items: center;
}
} }
.charts { }
height:180px;
width: 100%;
}
</style> .charts {
height: 180px;
width: 100%;
}
</style>

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

@ -30,35 +30,35 @@ var options = {
// 'image://data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNTg2NDg1MzkzMjI2IiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjQ3MzUiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PGRlZnM+PHN0eWxlIHR5cGU9InRleHQvY3NzIj48L3N0eWxlPjwvZGVmcz48cGF0aCBkPSJNNTEyIDBDMjI2Ljc0Mjg1NyAwIDAgMjI2Ljc0Mjg1NyAwIDUxMnMyMjYuNzQyODU3IDUxMiA1MTIgNTEyIDUxMi0yMjYuNzQyODU3IDUxMi01MTItMjI2Ljc0Mjg1Ny01MTItNTEyLTUxMnogbTAgODc3LjcxNDI4NmMtMjA0LjggMC0zNjUuNzE0Mjg2LTE2MC45MTQyODYtMzY1LjcxNDI4Ni0zNjUuNzE0Mjg2czE2MC45MTQyODYtMzY1LjcxNDI4NiAzNjUuNzE0Mjg2LTM2NS43MTQyODYgMzY1LjcxNDI4NiAxNjAuOTE0Mjg2IDM2NS43MTQyODYgMzY1LjcxNDI4Ni0xNjAuOTE0Mjg2IDM2NS43MTQyODYtMzY1LjcxNDI4NiAzNjUuNzE0Mjg2eiIgZmlsbD0iIzRBQkRDRiIgcC1pZD0iNDczNiI+PC9wYXRoPjxwYXRoIGQ9Ik01MTIgNTEybS0zNjUuNzE0Mjg2IDBhMzY1LjcxNDI4NiAzNjUuNzE0Mjg2IDAgMSAwIDczMS40Mjg1NzIgMCAzNjUuNzE0Mjg2IDM2NS43MTQyODYgMCAxIDAtNzMxLjQyODU3MiAwWiIgZmlsbD0iI0ZGRkZGRiIgcC1pZD0iNDczNyI+PC9wYXRoPjwvc3ZnPg==', // 'image://data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNTg2NDg1MzkzMjI2IiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjQ3MzUiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PGRlZnM+PHN0eWxlIHR5cGU9InRleHQvY3NzIj48L3N0eWxlPjwvZGVmcz48cGF0aCBkPSJNNTEyIDBDMjI2Ljc0Mjg1NyAwIDAgMjI2Ljc0Mjg1NyAwIDUxMnMyMjYuNzQyODU3IDUxMiA1MTIgNTEyIDUxMi0yMjYuNzQyODU3IDUxMi01MTItMjI2Ljc0Mjg1Ny01MTItNTEyLTUxMnogbTAgODc3LjcxNDI4NmMtMjA0LjggMC0zNjUuNzE0Mjg2LTE2MC45MTQyODYtMzY1LjcxNDI4Ni0zNjUuNzE0Mjg2czE2MC45MTQyODYtMzY1LjcxNDI4NiAzNjUuNzE0Mjg2LTM2NS43MTQyODYgMzY1LjcxNDI4NiAxNjAuOTE0Mjg2IDM2NS43MTQyODYgMzY1LjcxNDI4Ni0xNjAuOTE0Mjg2IDM2NS43MTQyODYtMzY1LjcxNDI4NiAzNjUuNzE0Mjg2eiIgZmlsbD0iIzRBQkRDRiIgcC1pZD0iNDczNiI+PC9wYXRoPjxwYXRoIGQ9Ik01MTIgNTEybS0zNjUuNzE0Mjg2IDBhMzY1LjcxNDI4NiAzNjUuNzE0Mjg2IDAgMSAwIDczMS40Mjg1NzIgMCAzNjUuNzE0Mjg2IDM2NS43MTQyODYgMCAxIDAtNzMxLjQyODU3MiAwWiIgZmlsbD0iI0ZGRkZGRiIgcC1pZD0iNDczNyI+PC9wYXRoPjwvc3ZnPg==',
handleStyle: { handleStyle: {
color: '#0BDADA', color: '#0BDADA',
borderWidth :0, borderWidth: 0,
}, },
moveHandleStyle:{ moveHandleStyle: {
color: 'transparent', color: 'transparent',
borderWidth:0, borderWidth: 0,
opacity:0, opacity: 0,
}, },
selectedDataBackground:{ selectedDataBackground: {
color: 'transparent', color: 'transparent',
areaStyle: { areaStyle: {
opacity: 0 opacity: 0
}, },
lineStyle: { lineStyle: {
opacity: 0 opacity: 0
} }
}, },
backgroundColor:new echarts.graphic.LinearGradient( backgroundColor: new echarts.graphic.LinearGradient(
0, 0, 1, 0, 0, 0, 1, 0,
[{ [{
offset: 0, offset: 0,
color: 'rgba(71, 180, 124, 0.70)' color: 'rgba(71, 180, 124, 0.70)'
}, },
{ {
offset: 1, offset: 1,
color: 'rgba(71, 180, 124, 0)' color: 'rgba(71, 180, 124, 0)'
} }
], ],
false false
), ),
// shadowColor: 'rgba(255, 214, 62, 0.10)', // shadowColor: 'rgba(255, 214, 62, 0.10)',
// shadowBlur: 10 // shadowBlur: 10
@ -175,9 +175,9 @@ var options = {
showSymbol: false, showSymbol: false,
smooth: true, // 是否曲线 smooth: true, // 是否曲线
name: "", // 图例对应类别 name: "", // 图例对应类别
data: [400, 600, 700, 200, 500, 700, 900,400, 600, 700, 200, 500, 700, 900,400, 600, 700, 200, 500, 700, 900,400, 600, 700, 200, 500, 700, 900], // 纵坐标数据 data: [400, 600, 700, 200, 500, 700, 900, 400, 600, 700, 200, 500, 700, 900, 400, 600, 700, 200, 500, 700, 900, 400, 600, 700, 200, 500, 700, 900], // 纵坐标数据
lineStyle :{ lineStyle: {
color:"#39B1FF" color: "#39B1FF"
}, },
areaStyle: { areaStyle: {
// 区域颜色 // 区域颜色
@ -204,7 +204,7 @@ var options = {
}, },
{ {
offset: 1, offset: 1,
opacity:0.01, opacity: 0.01,
color: '#39b1ff01' // 100% 处的颜色 color: '#39b1ff01' // 100% 处的颜色
} }
] ]

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

@ -1,96 +1,97 @@
<template> <template>
<div class='congestion'> <div class='congestion'>
<WgtTitle :title="'近一月感知事件时段分布统计'"></WgtTitle> <WgtTitle :title="'近一月感知事件时段分布统计'"></WgtTitle>
<div class="board"> <div class="board">
<div class="charts keep-ratio " id="monthStatistics"></div> <div class="charts keep-ratio " id="monthStatistics"></div>
</div>
</div> </div>
</template> </div>
</template>
<script> <script>
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 { getDailyCumulativeMonth } from '../../../../../../../api/event/perceiveEvent'; import { getDailyCumulativeMonth } from '../../../../../../../api/event/perceiveEvent';
export default { export default {
name: 'MonthStatistics', name: 'MonthStatistics',
components: { components: {
WgtTitle WgtTitle
}, },
data() { data() {
return { return {
} }
}, },
created() { created() {
}, },
methods: { methods: {
}, },
mounted() { mounted() {
setTimeout(() => { setTimeout(() => {
this.$nextTick(() => { this.$nextTick(() => {
var myChart = echarts.init(document.getElementById('monthStatistics')); var myChart = echarts.init(document.getElementById('monthStatistics'));
getDailyCumulativeMonth().then((res)=>{ getDailyCumulativeMonth().then((res) => {
console.log(res); console.log(res);
if ( res.code == 200 ) { if (res.code == 200) {
let data = res.data; let data = res.data;
let timeData = []; let timeData = [];
let datasN = []; let datasN = [];
for (var i = 0; i < 24;i++){ for (var i = 0; i < 24; i++) {
let k = 0; let k = 0;
for (var j = 0;j < data.length;j++){ for (var j = 0; j < data.length; j++) {
let it = data[j]; let it = data[j];
if ( it.time == i ) { if (it.time == i) {
timeData.push( i +"点至"+ (i +1)+"点"); timeData.push(i + "点至" + (i + 1) + "点");
datasN.push(it.number); datasN.push(it.number);
k++; k++;
} }
} }
if ( k == 0 ) { if (k == 0) {
timeData.push( i +"点至"+ (i +1)+"点"); timeData.push(i + "点至" + (i + 1) + "点");
datasN.push(0); datasN.push(0);
}
} }
chartsStatistics.xAxis.data = timeData;
chartsStatistics.series[0].data = datasN;
myChart.setOption(chartsStatistics);
} }
chartsStatistics.xAxis.data = timeData;
chartsStatistics.series[0].data = datasN;
myChart.setOption(chartsStatistics);
}
});
}); });
}); });
}, });
} },
</script> }
</script>
<style lang='scss' scoped>
.congestion {
width: 100%;
<style lang='scss' scoped> .board {
.congestion { height: 200px;
width: 100%; width: 100%;
.board{ padding: 0px 20px;
height:200px; background: linear-gradient(180deg, rgba(6, 66, 88, 0.2) 0%, #064258 100%);
width: 100%; border-radius: 5px 5px 5px 5px;
padding: 0px 20px; opacity: 1;
background: linear-gradient(180deg, rgba(6,66,88,0.2) 0%, #064258 100%); border: 1px solid;
border-radius: 5px 5px 5px 5px; border-image: linear-gradient(360deg, rgba(55, 231, 255, 0.3), rgba(55, 231, 255, 0)) 1 1;
opacity: 1; display: flex;
border: 1px solid; justify-content: space-between;
border-image: linear-gradient(360deg, rgba(55, 231, 255,0.3), rgba(55, 231, 255, 0)) 1 1; align-items: center;
display: flex;
justify-content: space-between;
align-items: center;
}
} }
.charts { }
height:180px;
width: 100%;
}
</style> .charts {
height: 180px;
width: 100%;
}
</style>

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

@ -11,115 +11,114 @@ let dataZoomMove = {
end: 4 end: 4
} }
var options = { var options = {
grid: {
grid: { containLabel: true,
containLabel: true, // 边距自行修改
// 边距自行修改 bottom: '0%',
bottom: '0%', left: '0%',
left: '0%', top: '2%',
top: '20%', right: '15%',
right: '10%', },
xAxis: {
type: 'value',
axisLabel: {
show: false
},
axisLine: {
show: false,
},
axisTick: {
show: false,
},
splitLine: {
show: false,
}, },
xAxis: { },
type: 'value', yAxis: [
{
type: 'category',
data: xdata.value,
inverse: true,
axisLabel: { axisLabel: {
show: false fontSize: '14px',
inside: true,
verticalAlign: 'bottom',
color: '#fff',
padding: 10,
margin: -5,
formatter: function (value, index) {
// let index = xdata.value.indexOf(value);
return `{a|Top${index + 1}} {b|${value}}`
},
rich: {
a: {
fontSize: '14px',
},
b: {
fontSize: '14px',
padding: [0, 0, 0, 70],
}
},
}, },
axisLine: { axisLine: {
show: false, show: false,
}, },
axisTick: { axisTick: {
show: false, show: false,
}, }
splitLine: { }
show: false, ],
}, series: [
}, {
yAxis: [ data: sdata.value,
{ type: 'bar',
type: 'category', barWidth: 8,
data: xdata.value, itemStyle: {
inverse: true, borderRadius: 40,
axisLabel: { color: {
fontSize: '14px', type: 'linear',
inside: true, x: 0,
verticalAlign: 'bottom', y: 0,
color:'#fff', x2: 1,
padding:10, y2: 0,
margin:-5, colorStops: [
formatter: function (value) { {
let index = xdata.value.indexOf(value); offset: 0,
return `{a|Top${index + 2}} {b|${value}}` color: '#1cd0f000', // 0% 处的颜色
},
rich: {
a: {
fontSize: '14px',
}, },
{
b: { offset: 1,
fontSize: '14px', color: '#1cd0f0', // 100% 处的颜色
padding: [0, 0, 0, 70], },
} ],
}, global: false, // 缺省为 false
},
axisLine: {
show: false,
},
axisTick: {
show: false,
} }
} },
], label: {
series: [ show: true,
{ position: 'right',
data: sdata.value, distance: -10,
type: 'bar', data: sdata,
barWidth: 8, color: '#fff',
itemStyle: { formatter: (c) => {
borderRadius: 40, return `{a|}{b|${c.value}辆}`
color: {
type: 'linear',
x: 0,
y: 0,
x2: 1,
y2: 0,
colorStops: [
{
offset: 0,
color: '#1cd0f000', // 0% 处的颜色
},
{
offset: 1,
color: '#1cd0f0', // 100% 处的颜色
},
],
global: false, // 缺省为 false
}
}, },
label: { rich: {
show: true, a: {
position: 'right', widht: 20,
distance: -10, height: 20,
data: sdata, backgroundColor: {
color:'#fff', image: chartIcon
formatter: (c) => {
return `{a|}{b|${c.value}辆}`
},
rich: {
a: {
widht: 20,
height: 20,
backgroundColor: {
image: chartIcon
},
}, },
b:{ },
padding:[0,0,0,10] b: {
} padding: [0, 0, 0, 10]
} }
} }
} }
] }
]
} }
export default options; export default options;

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

@ -1,111 +1,158 @@
<template> <template>
<div class='situation'> <div class="situation">
<WgtTitle :title="'路段感知事件排名'"></WgtTitle> <WgtTitle :title="'路段感知事件排名'"></WgtTitle>
<div class="board"> <div class="board">
<!-- <div class="tag"> <!-- <div class="tag">
<div class="checked">路段车流量Top10</div> <div class="checked">路段车流量Top10</div>
<div>断面交通量Top10</div> <div>断面交通量Top10</div>
</div> --> </div> -->
<div class="charts keep-ratio " id="situationEchartBox"></div> <div class="charts keep-ratio" id="situationEchartBox"></div>
</div>
</div> </div>
</template> </div>
</template>
<script> <script>
import WgtTitle from "../../../widgets/title";
import * as echarts from "echarts";
import chartsStatistics from "./assets/charts";
import { getSectionPerceivedList } from "../../../../../../../api/event/perceiveEvent";
import WgtTitle from '../../../widgets/title' export default {
import * as echarts from "echarts"; name: "Situation",
import chartsStatistics from "./assets/charts"; components: {
import { getSectionPerceivedList } from '../../../../../../../api/event/perceiveEvent'; WgtTitle,
},
data() {
return {};
},
export default { mounted() {
name: 'Situation', setTimeout(() => {
components: { this.$nextTick(() => {
WgtTitle var myChart = echarts.init(
}, document.getElementById("situationEchartBox")
data() { );
return {
} getSectionPerceivedList({}).then((res) => {
}, console.log(res);
if (res.code == 200) {
let data = res.data;
mounted() { let texts = [];
setTimeout(() => { let datas = [];
this.$nextTick(() => { //默认显示数值
var myChart = echarts.init(document.getElementById('situationEchartBox')); if (data.length <= 0) {
data = [
getSectionPerceivedList({}).then((res)=>{ {
console.log(res); sectionName: "华山北枢纽-济南虚",
if ( res.code == 200 ) { number: 32774,
let data = res.data; },
let texts = []; {
let datas = []; sectionName: "东客站虚-华山北枢纽",
number: 30067,
data.forEach(it => { },
texts.push(it.sectionName); {
datas.push(it.number); sectionName: "小许家枢纽-东客站虚",
}); number: 30057,
},
chartsStatistics.yAxis[0].data = texts; {
chartsStatistics.series[0].data = datas; sectionName: "临沂枣园枢纽-临沂虚",
number: 28774,
myChart.setOption(chartsStatistics); },
} {
}); sectionName: "华山北枢纽-济南虚",
number: 26021,
},
{
sectionName: "华山北枢纽-济南虚",
number: 24061,
},
{
sectionName: "华山北枢纽-济南虚",
number: 20150,
},
{
sectionName: "华山北枢纽-济南虚",
number: 20140,
},
{
sectionName: "华山北枢纽-济南虚",
number: 20050,
},
{
sectionName: "华山北枢纽-济南虚",
number: 20010,
},
];
}
data.forEach((it) => {
texts.push(it.sectionName);
datas.push(it.number);
});
chartsStatistics.yAxis[0].data = texts;
chartsStatistics.series[0].data = datas;
myChart.setOption(chartsStatistics);
}
}); });
}); });
}, });
created() { },
created() {},
methods: {},
};
</script>
}, <style lang="scss" scoped>
methods: { .situation {
width: 100%;
} .board {
height: 455px;
width: 100%;
padding: 10px 10px;
background: linear-gradient(180deg, rgba(6, 66, 88, 0.2) 0%, #064258 100%);
border-radius: 5px 5px 5px 5px;
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;
justify-content: flex-start;
align-items: center;
flex-direction: column;
} }
</script>
<style lang='scss' scoped> .charts {
.situation { // margin-top: -40px;
height: 450px;
width: 100%; width: 100%;
.board{ }
height: 455px;
width: 100%; .tag {
padding: 0px 30px; margin-top: 20px;
background: linear-gradient(180deg, rgba(6,66,88,0.2) 0%, #064258 100%); display: flex;
border-radius: 5px 5px 5px 5px; width: 100%;
opacity: 1; justify-content: flex-start;
border: 1px solid;
border-image: linear-gradient(360deg, rgba(55, 231, 255,0.3), rgba(55, 231, 255, 0)) 1 1; div {
display: flex; width: 150px;
justify-content: flex-start; height: 25px;
align-items: center; line-height: 25px;
flex-direction: column; border-radius: 20px;
} text-align: center;
.charts { background-color: #c87800;
margin-top: -40px; margin-right: 10px;
height: 400px;
width: 100%;
} }
.tag{
margin-top: 20px; .checked {
display: flex; background-color: #00b3cc;
width: 100%;
justify-content: flex-start;
div{
width: 150px;
height: 25px;
line-height: 25px;
border-radius: 20px;
text-align: center;
background-color: #C87800;
margin-right: 10px;
}
.checked{
background-color: #00B3CC;;
}
} }
} }
</style> }
</style>

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

@ -1,12 +1,13 @@
/* 数据 */ /* 数据 */
let nameList = ["大学城", "长清", "孝里", "安城", "平阴北", "平阴南", "东平", "梁山东", "嘉祥西"]; // 类别 let nameList = ["大学城", "长清", "孝里", "安城", "平阴北", "平阴南", "东平", "梁山东", "嘉祥西"]; // 类别
let valueList = [800, 520, 650, 950, 420, 600, 450, 720, 303 ]; // 人数 let valueList = [800, 520, 650, 950, 420, 600, 450, 720, 303]; // 人数
var yList = [ "1000","800","轻度拥堵","基本畅通","畅通"] // var yList = [ "1000","800","轻度拥堵","基本畅通","畅通"]
/* 数据整合 */ /* 数据整合 */
const minNumber = 0;
let dataList = []; let dataList = [];
nameList.map((item, index) => { nameList.map((item, index) => {
if (index === 4) { if (index === 3) {
dataList.push({ dataList.push({
name: item, name: item,
value: valueList[index], value: valueList[index],
@ -32,7 +33,7 @@ nameList.map((item, index) => {
dataList.push({ dataList.push({
name: item, name: item,
value: valueList[index], value: valueList[index],
itemStyle:{ itemStyle: {
borderRadius: 6 borderRadius: 6
} }
}) })
@ -47,6 +48,11 @@ var options = {
bottom: "0%",//下边距 bottom: "0%",//下边距
containLabel: true, containLabel: true,
}, },
tooltip: {
valueFormatter: function (value) {
return (value + minNumber).toFixed(2);
}
},
xAxis: { xAxis: {
type: 'category', type: 'category',
data: nameList, data: nameList,
@ -61,7 +67,7 @@ var options = {
axisLabel: { axisLabel: {
show: true, show: true,
color: '#B6E6FF', color: '#B6E6FF',
fontSize:8, fontSize: 8,
fontFamily: 'Source Han Sans CN-Regular', fontFamily: 'Source Han Sans CN-Regular',
}, },
}, },
@ -99,7 +105,7 @@ var options = {
series: [{ series: [{
type: 'bar', type: 'bar',
data: dataList, data: dataList,
z:4, z: 4,
itemStyle: { itemStyle: {
color: { color: {
type: 'linear', type: 'linear',
@ -116,8 +122,9 @@ var options = {
}, },
borderRadius: [4, 4, 0, 0] borderRadius: [4, 4, 0, 0]
}, },
barWidth:10, barWidth: 10,
label: {show:false, label: {
show: false,
} }
}, },
] ]

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

@ -3,7 +3,7 @@
<WgtTitle :title="'路段日感知事件'"></WgtTitle> <WgtTitle :title="'路段日感知事件'"></WgtTitle>
<div class="board"> <div class="board">
<div class="charts keep-ratio " id="railwayDay"></div> <div class="charts keep-ratio " id="railwayDay"></div>
</div> </div>
</div> </div>
</template> </template>
@ -35,21 +35,23 @@ export default {
setTimeout(() => { setTimeout(() => {
this.$nextTick(() => { this.$nextTick(() => {
var myChart = echarts.init(document.getElementById('railwayDay')); var myChart = echarts.init(document.getElementById('railwayDay'));
getSectionPerceivedNumber().then((res)=>{ getSectionPerceivedNumber().then((res) => {
if ( res.code == 200 ) { if (res.code == 200) {
let data = res.data; let data = res.data;
let texts = []; if (data.length > 0) {
let datas = []; let texts = [];
let datas = [];
data.forEach(it => { data.forEach(it => {
texts.push(it.sectionName); texts.push(it.sectionName);
datas.push(it.number); datas.push(it.number);
}); });
chartsStatistics.xAxis.data = texts; chartsStatistics.xAxis.data = texts;
chartsStatistics.series[0].data = datas; chartsStatistics.series[0].data = datas;
}
myChart.setOption(chartsStatistics);
myChart.setOption(chartsStatistics);
} }
}) })
}); });
@ -61,24 +63,25 @@ export default {
<style lang='scss' scoped> <style lang='scss' scoped>
.congestion { .congestion {
width: 100%; width: 100%;
.board{
height:200px; .board {
height: 200px;
width: 100%; width: 100%;
padding: 0px 20px; padding: 0px 20px;
background: linear-gradient(180deg, rgba(6,66,88,0.2) 0%, #064258 100%); background: linear-gradient(180deg, rgba(6, 66, 88, 0.2) 0%, #064258 100%);
border-radius: 5px 5px 5px 5px; border-radius: 5px 5px 5px 5px;
opacity: 1; opacity: 1;
border: 1px solid; border: 1px solid;
border-image: linear-gradient(360deg, rgba(55, 231, 255,0.3), rgba(55, 231, 255, 0)) 1 1; border-image: linear-gradient(360deg, rgba(55, 231, 255, 0.3), rgba(55, 231, 255, 0)) 1 1;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
} }
} }
.charts {
height:180px;
width: 100%;
}
.charts {
height: 180px;
width: 100%;
}
</style> </style>

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

@ -1,10 +1,11 @@
window.typeAnalysisData = [ window.typeAnalysisData = [
{ value: 100, name: '行人' }, { value: 100, name: '行人' },
{ value: 90, name: '非机动车' }, // { value: 90, name: '非机动车' },
{ value: 80, name: '拥堵' }, // { value: 80, name: '拥堵' },
{ value: 60, name: '逆行' }, // { value: 60, name: '逆行' },
{ value: 50, name: '抛洒物' }, // { value: 50, name: '抛洒物' },
{ value: 45, name: '烟火' }] // { value: 45, name: '烟火' }
]
window.colorList = [ window.colorList = [
"#019AFF", "#019AFF",
@ -19,13 +20,6 @@ window.colorList1 = [
"#FFB905", "#FFB905",
"#6AE0BC",] "#6AE0BC",]
window.count = 0;
typeAnalysisData.forEach((it)=>{
count += it.value;
})
var options = { var options = {
color: colorList, color: colorList,
legend: { legend: {
@ -39,26 +33,30 @@ var options = {
textStyle: { textStyle: {
color: "#fff", color: "#fff",
fontSize: 12, fontSize: 12,
rich:{ rich: {
ast: { ast: {
align: "left", align: "left",
fontSize: 12, fontSize: 12,
width:30, width: 30,
}, },
bst: { bst: {
align: "left", align: "left",
fontSize: 12, fontSize: 12,
marginLeft:20, marginLeft: 20,
color:"#37E7FF" color: "#37E7FF"
} }
} }
}, },
formatter: (params) => { formatter: (params) => {
let obj = typeAnalysisData.filter(it=>{ return it.name == params}) let count = 0;
console.log(obj); typeAnalysisData.forEach((it) => {
return `{ast|${obj[0].name}} {bst|${Math.round(obj[0].value/count* 100) }%}` count += it.value;
}, })
data: typeAnalysisData?.map(x => x.name), 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: typeAnalysisData?.map(x => x.name),
}, },
tooltip: { tooltip: {
trigger: 'item', trigger: 'item',
@ -66,11 +64,11 @@ var options = {
series: [{ series: [{
name: '', name: '',
type: 'pie', type: 'pie',
radius: '80%', radius: '80%',
center: ['40%', '50%'], center: ['40%', '50%'],
clockwise:false, clockwise: false,
roseType: 'radius', roseType: 'radius',
startAngle1:180, startAngle1: 180,
label: { label: {
show: false, show: false,
position: 'outside', position: 'outside',
@ -85,14 +83,14 @@ var options = {
} }
}, },
}, },
itemStyle: { itemStyle: {
normal: { normal: {
shadowColor: "rgba(0, 0, 0, 0.8)", shadowColor: "rgba(0, 0, 0, 0.8)",
shadowBlur: 50, shadowBlur: 50,
}, },
}, },
labelLine: { labelLine: {
show:false, show: false,
length: 10, length: 10,
length2: 30, length2: 30,
}, },
@ -104,13 +102,13 @@ var options = {
} }
} }
}) })
},{ }, {
name: '', name: '',
type: 'pie', type: 'pie',
radius: '90%', radius: '90%',
hoverAnimation: false, hoverAnimation: false,
emphasis: { scale: false }, emphasis: { scale: false },
clockwise:false, clockwise: false,
center: ['40%', '50%'], center: ['40%', '50%'],
roseType: 'radius', roseType: 'radius',
label: { label: {
@ -127,15 +125,15 @@ var options = {
} }
}, },
}, },
itemStyle: { itemStyle: {
normal: { normal: {
opacity:0.3, opacity: 0.3,
shadowColor: "rgba(0, 0, 0, 0.8)", shadowColor: "rgba(0, 0, 0, 0.8)",
shadowBlur: 50, shadowBlur: 50,
}, },
}, },
labelLine: { labelLine: {
show:false, show: false,
length: 10, length: 10,
length2: 30, length2: 30,
}, },

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

@ -1,201 +1,201 @@
<template> <template>
<div class='congestion'> <div class='congestion'>
<WgtTitle :title="'感知事件类型分析'"></WgtTitle> <WgtTitle :title="'感知事件类型分析'"></WgtTitle>
<div class="board"> <div class="board">
<div class="charts keep-ratio " id="typeAnalysis"></div> <div class="charts keep-ratio " id="typeAnalysis"></div>
</div>
</div> </div>
</template> </div>
</template>
<script> <script>
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'; import { getWarningTypeDay } 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坐标的位置, 矩形的宽, 矩形的长,圆角角度
ctx.beginPath(); ctx.beginPath();
ctx.fillStyle = gr; ctx.fillStyle = gr;
ctx.arc(x + radius, y + radius, radius, Math.PI, Math.PI * 3 / 2); ctx.arc(x + radius, y + radius, radius, Math.PI, Math.PI * 3 / 2);
ctx.lineTo(width - radius + x, y); ctx.lineTo(width - radius + x, y);
ctx.arc(width - radius + x, radius + y, radius, Math.PI * 3 / 2, Math.PI * 2); ctx.arc(width - radius + x, radius + y, radius, Math.PI * 3 / 2, Math.PI * 2);
ctx.lineTo(width + x, height + y - radius); ctx.lineTo(width + x, height + y - radius);
ctx.arc(width - radius + x, height - radius + y, radius, 0, Math.PI * 1 / 2); ctx.arc(width - radius + x, height - radius + y, radius, 0, Math.PI * 1 / 2);
ctx.lineTo(radius + x, height +y); ctx.lineTo(radius + x, height + y);
ctx.arc(radius + x, height - radius + y, radius, Math.PI * 1 / 2, Math.PI); ctx.arc(radius + x, height - radius + y, radius, Math.PI * 1 / 2, Math.PI);
ctx.closePath(); ctx.closePath();
//ctx.stroke(); //ctx.stroke();
ctx.fill() ctx.fill()
} }
export default { export default {
name: 'TypeAnalysis', name: 'TypeAnalysis',
components: { components: {
WgtTitle WgtTitle
}, },
data() { data() {
return { return {
}
},
created() {
},
methods: {
},
mounted() {
setTimeout(() => {
this.$nextTick(() => {
var myChart = echarts.init(document.getElementById('typeAnalysis'));
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 { created() {
...item,
label: { },
color: colorList[index] methods: {
}
} },
}) mounted() {
chartsStatistics.series[1].data = typeAnalysisData.map((item, index) => { setTimeout(() => {
return { this.$nextTick(() => {
...item, var myChart = echarts.init(document.getElementById('typeAnalysis'));
label: {
color: colorList[index]
} getWarningTypeDay().then(res => {
} console.log(res);
}) if (res.code == 200) {
} let data = res.data;
console.log("===================", data);
myChart.setOption(chartsStatistics); typeAnalysisData = [];
}) for (var i = 0; i < data.length; i++) {
var it = data[i];
const domMap = document.getElementById("typeAnalysis"); if (it.warningType == 1) {
let parentDiv = domMap.firstChild; typeAnalysisData.push({
// 创建canvas name: '交通拥堵',
let canvas = document.createElement('canvas'); value: it.number
canvas.width = parentDiv.offsetWidth; });
canvas.height =parentDiv.offsetHeight; }
parentDiv.appendChild(canvas); if (it.warningType == 2) {
const context = canvas.getContext('2d'); typeAnalysisData.push({
name: '行人',
// 填充渐变颜色 value: it.number
var gr = context.createLinearGradient(230, 0, 360, 0); });
// 颜色断点 }
gr.addColorStop(1, 'rgba(92,197,255,0)'); if (it.warningType == 3) {
gr.addColorStop(0, 'rgba(92,197,255,0.5)'); typeAnalysisData.push({
name: '非机动车',
value: it.number
context.lineWidth = 1; // 设置线段宽度 });
}
// 绘制圆角矩形 if (it.warningType == 4) {
typeAnalysisData.push({
// drawRoundRect(context, 260, 36, 120, 24, 12,gr) name: '停车',
// drawRoundRect(context, 260, 64, 120, 24, 12,gr) value: it.number
// drawRoundRect(context, 260, 92, 120, 24, 12,gr) });
// drawRoundRect(context, 260, 120, 120, 24, 12,gr) }
// drawRoundRect(context, 260, 148, 120, 24, 12,gr) 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;
// 创建canvas
let canvas = document.createElement('canvas');
canvas.width = parentDiv.offsetWidth;
canvas.height = parentDiv.offsetHeight;
parentDiv.appendChild(canvas);
const context = canvas.getContext('2d');
// 填充渐变颜色
var gr = context.createLinearGradient(230, 0, 360, 0);
// 颜色断点
gr.addColorStop(1, 'rgba(92,197,255,0)');
gr.addColorStop(0, 'rgba(92,197,255,0.5)');
context.lineWidth = 1; // 设置线段宽度
// 绘制圆角矩形
// 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)
}); });
}, });
} },
</script> }
</script>
<style lang='scss' scoped>
.congestion {
width: 100%;
<style lang='scss' scoped> .board {
.congestion { height: 200px;
width: 100%; width: 100%;
.board{ padding: 0px 20px;
height:200px; background: linear-gradient(180deg, rgba(6, 66, 88, 0.2) 0%, #06425888 100%);
width: 100%; border-radius: 5px 5px 5px 5px;
padding: 0px 20px; opacity: 1;
background: linear-gradient(180deg, rgba(6,66,88,0.2) 0%, #06425888 100%); border: 1px solid;
border-radius: 5px 5px 5px 5px; border-image: linear-gradient(360deg, rgba(55, 231, 255, 0.1), rgba(55, 231, 255, 0)) 1 1;
opacity: 1; display: flex;
border: 1px solid; justify-content: space-between;
border-image: linear-gradient(360deg, rgba(55, 231, 255,0.1), rgba(55, 231, 255, 0)) 1 1; align-items: center;
display: flex;
justify-content: space-between;
align-items: center;
}
} }
.charts { }
height:180px;
width: 100%;
}
</style> .charts {
height: 180px;
width: 100%;
}
</style>

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

@ -1,9 +1,7 @@
<template> <template>
<div class='TrafficFlow'> <div class='TrafficFlow'>
<section class="content"> <section class="content">
<!-- 在途车流量车型分类 -->
<Railway class="content-l" /> <Railway class="content-l" />
<!-- -->
<div class="content-m" > <div class="content-m" >
<RailWayDay class="content-m-t" /> <RailWayDay class="content-m-t" />
<DayTotal class="content-m-t" /> <DayTotal class="content-m-t" />

Write Preview
Loading…
Cancel
Save