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

感知事件检测

wangqin
zhoule 1 year ago
parent
a5e7ae18eb
commit
42cb14d428
7 changed files with 194 additions and 125 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. 6
      ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/dailyDisposal/index.vue
  2. 1
      ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventQuery/assets/charts3.js
  3. 42
      ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventQuery/index.vue
  4. 4
      ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventSource/index.vue
  5. 32
      ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/railwayDay/index.vue
  6. 2
      ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/typeAnalysis/index.vue
  7. 232
      ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/index.vue

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

@ -140,9 +140,9 @@ export default {
context.lineWidth = 1; // 设置线段宽度 context.lineWidth = 1; // 设置线段宽度
// 绘制圆角矩形 // 绘制圆角矩形
// drawRoundRect(context, 260, 50, 120, 24, 12, gr) drawRoundRect(context, 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)
}); });
}); });

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

@ -125,7 +125,6 @@ let options = {
opacity: 0.6, opacity: 0.6,
color: function (params) { color: function (params) {
var a = params.name; var a = params.name;
console.log("==========a=============", a);
if (a == "6月") { if (a == "6月") {
return new echarts.graphic.LinearGradient( return new echarts.graphic.LinearGradient(
0, 0,

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

@ -392,17 +392,51 @@ export default {
if (res.code == 200) { if (res.code == 200) {
let data = res.data; let data = res.data;
if (this.year != "quarter") { if (this.year != "quarter") {
const maxObject = data.filter(it => it.sectionNumber > 0).reduce((prev, current) => (current.sectionNumber > prev.sectionNumber ? current : prev));
let zhs = []; let zhs = [];
let values = []; let values1 = [];
let values2 = [];
data.forEach((it) => { data.forEach((it) => {
if (it.sectionNumber > 0) { if (it.sectionNumber > 0) {
values.push(it.sectionNumber); values2.push(it.sectionNumber);
zhs.push(it.stakeMarkId); zhs.push(it.stakeMarkId);
if (maxObject && maxObject.sectionNumber == it.sectionNumber) {
values1.push({
value: it.sectionNumber,
itemStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0, color: '#01D5BC' // 0% 处的颜色
}, {
offset: 1, color: '#003B4E' // 100% 处的颜色
}],
global: false // 缺省为 false
},
borderRadius: 6
},
})
} else {
values1.push({
value: it.sectionNumber,
itemStyle: {
borderRadius: 6
},
})
}
} }
}) })
chart3.xAxis.data = zhs; chart3.xAxis.data = zhs;
chart3.series[0].data = values; chart3.series[0].data = values1;
chart3.series[1].data = values; chart3.series[1].data = values2;
} else { } else {
let zhs = []; let zhs = [];
let values = []; let values = [];

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

@ -91,7 +91,7 @@ export default {
} }
number.push(it.number); number.push(it.number);
// drawRoundRect(context, 241, 37 + (index * 27), 134, 20, 12, gr); drawRoundRect(context, 231, 37 + (index * 27), 138, 20, 12, gr);
}) })
let colorList = ['#006EDF', '#00FF00', '#FFC30D', '#FF8400', '#1DA7FF', '#2967EA']; let colorList = ['#006EDF', '#00FF00', '#FFC30D', '#FF8400', '#1DA7FF', '#2967EA'];
let lengData = []; let lengData = [];
@ -154,7 +154,7 @@ export default {
const context = canvas.getContext('2d'); const context = canvas.getContext('2d');
// 填充渐变颜色 // 填充渐变颜色
let gr = context.createLinearGradient(247, 63, 450, 0); let gr = context.createLinearGradient(230, 0, 360, 0);
gr.addColorStop(1, 'rgba(92,197,255,0)'); gr.addColorStop(1, 'rgba(92,197,255,0)');
gr.addColorStop(0, 'rgba(92,197,255,0.3)'); gr.addColorStop(0, 'rgba(92,197,255,0.3)');
// drawRoundRect(context, 241, 37, 134, 20, 12, gr); // drawRoundRect(context, 241, 37, 134, 20, 12, gr);

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

@ -41,10 +41,40 @@ export default {
if (data.length > 0) { if (data.length > 0) {
let texts = []; let texts = [];
let datas = []; let datas = [];
const maxObject = data.reduce((prev, current) => (current.number > prev.number ? current : prev));
data.forEach(it => { data.forEach(it => {
texts.push(it.sectionName); texts.push(it.sectionName);
datas.push(it.number);
if (it.number == maxObject.number) {
datas.push({
value: it.number,
itemStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0, color: '#0469FF' // 0% 处的颜色
}, {
offset: 1, color: '#699CFF' // 100% 处的颜色
}],
global: false // 缺省为 false
},
borderRadius: 6
},
});
} else {
datas.push({
value: it.number,
itemStyle: {
borderRadius: 6
},
});
}
}); });
chartsStatistics.xAxis.data = texts; chartsStatistics.xAxis.data = texts;

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

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

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

@ -1,126 +1,132 @@
<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" />
</div> </div>
<div class="content-m" > <div class="content-m">
<EventSource class="content-m-t" /> <EventSource class="content-m-t" />
<DailyDisposal class="content-m-t" /> <DailyDisposal class="content-m-t" />
</div> </div>
<div class="content-m" > <div class="content-m">
<MonthStatistice class="content-m-t" /> <MonthStatistice class="content-m-t" />
<TypeAnalysis class="content-m-t" /> <TypeAnalysis class="content-m-t" />
</div> </div>
</section> </section>
<section class="foot"> <section class="foot">
<EventQuery class="foot-w" /> <EventQuery class="foot-w" />
</section> </section>
</div> </div>
</template> </template>
<script> <script>
import Railway from './components/railway/index.vue'; import Railway from './components/railway/index.vue';
import RailWayDay from './components/railwayDay/index.vue'; import RailWayDay from './components/railwayDay/index.vue';
import DayTotal from './components/dayTotal/index.vue'; import DayTotal from './components/dayTotal/index.vue';
import EventSource from './components/eventSource/index.vue'; import EventSource from './components/eventSource/index.vue';
import DailyDisposal from './components/dailyDisposal/index.vue'; import DailyDisposal from './components/dailyDisposal/index.vue';
import TypeAnalysis from './components/typeAnalysis'; import TypeAnalysis from './components/typeAnalysis';
import MonthStatistice from './components/monthStatistics/index.vue'; import MonthStatistice from './components/monthStatistics/index.vue';
import EventQuery from './components/eventQuery'; import EventQuery from './components/eventQuery';
export default { export default {
name: 'EventDetection', name: 'EventDetection',
components: { components: {
Railway, Railway,
RailWayDay, RailWayDay,
DayTotal, DayTotal,
EventSource, EventSource,
DailyDisposal, DailyDisposal,
TypeAnalysis, TypeAnalysis,
MonthStatistice, MonthStatistice,
EventQuery, EventQuery,
}
} }
</script> }
</script>
<style lang='scss' scoped>
.TrafficFlow {
width: 100%;
height: 100%;
position: relative;
z-index: 6;
color: white;
.head{ <style lang='scss' scoped>
width: 98%; .TrafficFlow {
margin: auto; width: 100%;
margin-top: 15px; height: 100%;
position: relative;
z-index: 6;
color: white;
.head {
width: 98%;
margin: auto;
margin-top: 15px;
}
.content {
width: 98%;
margin: auto;
display: flex;
flex: 1;
pointer-events: none;
margin-top: 19px;
>div {
pointer-events: auto;
} }
.content {
width: 98%;
margin: auto;
display: flex;
flex: 1;
pointer-events: none;
margin-top: 19px;
>div {
pointer-events: auto;
}
.content-l {
width: calc(100% / 4 - 25px * 3);
min-width:460px;
margin-right:15px;
} .content-l {
width: calc(100% / 4 - 25px * 3);
min-width: 475px;
.content-m { margin-right: 15px;
display: inline-flex;
flex-direction: column;
width: calc(100% / 4 );
margin-right:15px;
.content-m-t {
width:100%;
height:240px;
margin-bottom: 15px;
}
}
.content-r {
width: 49.4%;
}
} }
.foot{
width: 98%;
margin: auto;
display: flex;
justify-content: space-between;
flex: 1;
pointer-events: none;
margin-top: 0px;
>div {
pointer-events: auto;
}
.foot-w {
width:100%;
.content-m {
display: inline-flex;
flex-direction: column;
width: calc(100% / 4);
margin-right: 15px;
.content-m-t {
width: 100%;
height: 240px;
margin-bottom: 15px;
} }
}
.foot-l {
width: 726px; .content-r {
} width: 49.4%;
.foot-m { }
width: 613px; }
}
.foot-r { .foot {
width: 493px; width: 98%;
} margin: auto;
display: flex;
justify-content: space-between;
flex: 1;
pointer-events: none;
margin-top: 0px;
>div {
pointer-events: auto;
}
.foot-w {
width: 100%;
}
.foot-l {
width: 726px;
}
.foot-m {
width: 613px;
}
.foot-r {
width: 493px;
} }
} }
</style> }</style>
Write Preview
Loading…
Cancel
Save