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

感知事件检测

wangqin
zhoule 1 year 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. 7
      ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/dailyDisposal/assets/charts.js
  2. 16
      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. 50
      ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/dayTotal/index.vue
  5. 12
      ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventQuery/assets/charts.js
  6. 225
      ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventQuery/assets/charts2.js
  7. 15
      ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventQuery/assets/charts3.js
  8. 342
      ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventQuery/index.vue
  9. 12
      ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventQuery/progressBar.vue
  10. 11
      ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventSource/assets/charts.js
  11. 49
      ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventSource/index.vue
  12. 3
      ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/monthStatistics/index.vue
  13. 11
      ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/railway/assets/charts.js
  14. 105
      ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/railway/index.vue
  15. 13
      ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/railwayDay/assets/charts.js
  16. 7
      ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/railwayDay/index.vue
  17. 28
      ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/typeAnalysis/assets/charts.js
  18. 4
      ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/typeAnalysis/index.vue
  19. 2
      ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/index.vue

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

@ -1,7 +1,7 @@
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",
@ -45,8 +45,7 @@ window.count = 0;
}, },
formatter: (params) => { formatter: (params) => {
let obj = echartsData.filter(it => { return it.name == params }) let obj = echartsData.filter(it => { return it.name == params })
console.log(obj); return `{ast|${obj[0].name}} {bst|${Math.round(obj[0].value)}%}`
return `{ast|${obj[0].name}} {bst|${Math.round(obj[0].value/count* 100) }%}`
}, },
data: echartsData?.map(x => x), data: echartsData?.map(x => x),
}, },

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

@ -55,7 +55,7 @@
getWarningStateDay().then(res => { getWarningStateDay().then(res => {
if (res.code == 200) { if (res.code == 200) {
let data = res.data; let data = res.data;
console.log(data); if (data.lemgth > 0) {
window.echartsData = []; window.echartsData = [];
for (let i = 0; i < data.length; i++) { for (let i = 0; i < data.length; i++) {
let it = data[i]; let it = data[i];
@ -89,14 +89,12 @@
} }
count = 0; let count = 0;
echartsData.forEach((it) => { echartsData.forEach((it) => {
count += it.value; count += it.value;
}) })
console.log(echartsData);
chartsStatistics.legend.data = window.echartsData?.map(x => x); chartsStatistics.legend.data = window.echartsData?.map(x => x);
chartsStatistics.series[0].data = echartsData.map((item, index) => { chartsStatistics.series[0].data = echartsData.map((item, index) => {
return { return {
@ -115,6 +113,7 @@
} }
}) })
} }
}
myChart.setOption(chartsStatistics); myChart.setOption(chartsStatistics);
}); });
@ -141,9 +140,9 @@
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)
}); });
}); });
@ -154,6 +153,7 @@
<style lang='scss' scoped> <style lang='scss' scoped>
.congestion { .congestion {
width: 100%; width: 100%;
.board { .board {
height: 200px; height: 200px;
width: 100%; width: 100%;
@ -169,10 +169,10 @@
} }
} }
.charts { .charts {
height: 180px; height: 180px;
width: 100%; width: 100%;
} }
</style> </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',

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

@ -1,6 +1,6 @@
<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>
@ -41,6 +41,51 @@
let data = res.data; let data = res.data;
let timer = []; let timer = [];
let number = []; let number = [];
//默认数值
if(data.length < 1){
data = [
{
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
},
]
}
data.forEach((it) => { data.forEach((it) => {
timer.push(it.time); timer.push(it.time);
@ -64,6 +109,7 @@
<style lang='scss' scoped> <style lang='scss' scoped>
.congestion { .congestion {
width: 100%; width: 100%;
.board { .board {
height: 200px; height: 200px;
width: 100%; width: 100%;
@ -79,10 +125,10 @@
} }
} }
.charts { .charts {
height: 180px; height: 180px;
width: 100%; width: 100%;
} }
</style> </style>

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

@ -2,7 +2,7 @@
/* 数据 */ /* 数据 */
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) => {
@ -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',
@ -117,7 +120,8 @@ var options = {
borderRadius: [4, 4, 0, 0] borderRadius: [4, 4, 0, 0]
}, },
barWidth: 10, barWidth: 10,
label: {show:false, label: {
show: false,
} }
}, },
] ]

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

@ -1,47 +1,77 @@
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']; {
average: 15,
typeName: "烟火",
percent: 0.15,
},
{
average: 10,
typeName: "撒落物",
percent: 0.1,
},
{
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++) { 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 = [];
@ -70,43 +100,41 @@ let data = [{
tooltip: { tooltip: {
confine: true, confine: true,
textStyle: { textStyle: {
fontSize: 14 // 字体大小 fontSize: 14, // 字体大小
}, },
}, },
title:{ //圆环中间内容 title: {
text: '100%', //圆环中间内容
subtext: '类型分析', text: "100%",
subtext: "类型分析",
left: "19%", left: "19%",
top: "40%", top: "40%",
textStyle: { textStyle: {
color: "#fff", color: "#fff",
fontSize: 26, fontSize: 26,
align:"center" align: "center",
}, },
subtextStyle: { subtextStyle: {
fontSize: 18, fontSize: 18,
fontWeight: '400', fontWeight: "400",
top: -8, top: -8,
align: "center", align: "center",
color:'#fff' color: "#fff",
}, },
}, },
color:['#50EED3', '#5F8EFE','#29B3FF', '#5DEF9E', '#FB5C38', '#FCBB14','#50EED3'], color: colorList,
legend: { legend: {
top:'20%', top: "15%",
right: -10, right: -5,
orient: "vertical", //改变排列方式 orient: "vertical", //改变排列方式
icon: "circle", //改变legend小图标形状 icon: "circle", //改变legend小图标形状
itemGap: 20, // 设置legend的间距 itemGap: 20, // 设置legend的间距
itemWidth: 12, // 设置宽度 itemWidth: 10, // 设置宽度
itemHeight: 12, // 设置高度 itemHeight: 10, // 设置高度
itemStyle:{
},
textStyle: { textStyle: {
right: -19, right: -19,
fontSize: 50, fontSize: 30,
color: "#fff", color: "#fff",
rich: { rich: {
a: { a: {
@ -117,7 +145,7 @@ let data = [{
fontSize: 14, fontSize: 14,
color: "#37E7FF", color: "#37E7FF",
marginLeft: -0, marginLeft: -0,
} },
}, },
}, },
itemStyle: { itemStyle: {
@ -125,31 +153,30 @@ let data = [{
}, },
data: lengData, data: lengData,
formatter: function (name) { formatter: function (name) {
let total = 0 let total = 0;
let target let target;
for (let i = 0; i < data.length; i++) { for (let i = 0; i < data.length; i++) {
total += data[i].average total += data[i].average;
if (data[i].typeName === name) { if (data[i].typeName == name) {
target = data[i].average target = data[i].average;
} }
} }
var arr = [ var arr = [
'{a|' + name + '}', "{a|" + name + "}",
'{b|' + ((target / total) * 100).toFixed(2) + '%}', "{b|" + ((target / total) * 100).toFixed(2) + "%}",
] ];
return arr.join(' ') return arr.join(" ");
}, },
}, },
series: [ series: [
{ {
name: '', name: "",
roseType: 'radius', roseType: "radius",
startAngle: -220, startAngle: -220,
avoidLabelOverlap: true, //防止标签重叠 avoidLabelOverlap: true, //防止标签重叠
type: 'pie', type: "pie",
radius: ['63%', '90%'], //大小 radius: ["50%", "80%"], //大小
center : ['25%','50%'], //位置 center: ["25%", "50%"], //位置
hoverAnimation: true, hoverAnimation: true,
itemStyle: { itemStyle: {
normal: { normal: {
@ -165,7 +192,7 @@ let data = [{
}, },
normal: { normal: {
length: 30, // 指示线长度 length: 30, // 指示线长度
length2:80 length2: 80,
}, },
}, },
data: pieData1, data: pieData1,
@ -173,73 +200,41 @@ let data = [{
show: false, show: false,
formatter: function (params) {}, formatter: function (params) {},
textStyle: { textStyle: {
fontSize: '18', fontSize: "18",
fontWeight: 'bold', fontWeight: "bold",
color:'#fff' color: "#fff",
}, },
rich: { rich: {
color0: { color0: {
color: '#D56383', color: "#D56383",
}, },
color1: { color1: {
color: '#00FF95', color: "#00FF95",
}, },
color3: { color3: {
color: '#FFE900', color: "#FFE900",
}, },
color2: { color2: {
color: '#F5B157', color: "#F5B157",
}, },
color4: { color4: {
color: '#1DA7FF', color: "#1DA7FF",
}, },
color5: { color5: {
color:'#2967EA' color: "#2967EA",
} },
}, },
}, },
emphasis: { emphasis: {
show: false, 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', type: "gauge",
zlevel: 2, zlevel: 2,
splitNumber: 185, splitNumber: 185,
radius: '70%', radius: "70%",
center: ['25%', '50%'], center: ["25%", "50%"],
startAngle: 90, startAngle: 90,
endAngle: -269.9999, endAngle: -269.9999,
axisLine: { axisLine: {
@ -256,7 +251,7 @@ let data = [{
length: 2, length: 2,
lineStyle: { lineStyle: {
width: 1, width: 1,
color: '#017383', color: "#017383",
}, },
}, },
pointer: { pointer: {
@ -266,7 +261,7 @@ let data = [{
show: 0, show: 0,
}, },
}, },
] ],
}; };
export default options export default options;

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

@ -17,19 +17,6 @@ let xData = [
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",
axisPointer: {
// 坐标轴指示器，坐标轴触发有效
type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
},
textStyle: {
color: "#fff",
fontSize: 14,
},
backgroundColor: "rgba(3, 31, 71, .0)", //设置背景颜色
borderColor: "rgba(3, 31, 71, .1)",
formatter: "健康监测<br>{b1}：{c1}人",
}, },
grid: { grid: {
left: "2%", left: "2%",
@ -102,7 +89,7 @@ let xData = [
series: [ series: [
// 下半截柱状图linear-gradient(180deg, #61D8FF 0%, #003B4E 100%); linear-gradient(180deg, #06D7B1 0%, #003B4E 100%) // 下半截柱状图linear-gradient(180deg, #61D8FF 0%, #003B4E 100%); linear-gradient(180deg, #06D7B1 0%, #003B4E 100%)
{ {
name: "种植面积", // name: "种植面积",
type: "bar", type: "bar",
barWidth: "10px", barWidth: "10px",
barGap: "-100%", barGap: "-100%",

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

@ -1,58 +1,50 @@
<template> <template>
<div class='congestion'> <div class='congestion'>
<WgtTitle :title="'感知事件查询'" ></WgtTitle>
<div class="board"> <div class="board">
<ProgressBar class="keep-ratio" @selectItem="selectProgress" :dataList="dataList" :selectIndex="7" /> <ProgressBar class="keep-ratio" @selectItem="selectProgress" :dataList="dataList" :selectIndex="selectId" />
<div class="searchPanel"> <div class="searchPanel">
<el-select v-model="area" size="mini" class="selectRoad" placeholder="请选择"> <el-select v-model="area" size="mini" class="selectRoad" placeholder="请选择" default-first-option>
<el-option <el-option v-for="item in areaOptions" :key="item.value" :label="item.label" :value="item.value">
v-for="item in areaOptions"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option> </el-option>
</el-select> </el-select>
<el-select v-model="year" size="mini" class="selectRoad" placeholder="请选择"> <el-select v-model="year" size="mini" class="selectRoad" placeholder="请选择">
<el-option <el-option v-for="item in yearOptions" :key="item.value" :label="item.label" :value="item.value">
v-for="item in yearOptions"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option> </el-option>
</el-select> </el-select>
<el-date-picker <el-date-picker size="mini" v-if="year != 'quarter'" class="selectRoad" v-model="dateTime" style="width:140px;"
size="mini" :type="year" placeholder="请选择" />
v-if="year != 'quarter'" <el-quarter-picker size="mini" class="selectRoad" style="width:180px;" v-if="year == 'quarter'" v-model="dateTime"
class="selectRoad" aria-placeholder="请选季度" />
v-model="dateTime"
style="width:140px;"
:type="year"
placeholder="请选择"
/>
<el-quarter-picker size="mini" class="selectRoad" style="width:180px;" v-if="year == 'quarter'" v-model="dateTime" aria-placeholder="请选季度" />
<el-button type="primary" size="mini" class="btnSearch" @click="searchQuery" icon="el-icon-search">查询</el-button> <el-button type="primary" size="mini" class="btnSearch" @click="searchQuery" icon="el-icon-search">查询</el-button>
<el-button class="btnReset" size="mini" icon="el-icon-refresh-left" >重置</el-button> <el-button class="btnReset" size="mini" icon="el-icon-refresh-left" @click="onReset">重置</el-button>
</div> </div>
</div> </div>
<div class="body" >
<div id="chart1" class="keep-ratio" >
<div class="body">
<div>
<WgtTitle :title="'感知事件趋势分析'"></WgtTitle>
<div id="chart1" class="btnChart" />
</div> </div>
<div id="chart2" class="keep-ratio" >
<div>
<WgtTitle :title="'感知事件类型分析'"></WgtTitle>
<div id="chart2" class="btnChart" />
</div> </div>
<div id="chart3" class="keep-ratio" >
<div>
<WgtTitle :title="'桩号范围内事件分析趋势'"></WgtTitle>
<div id="chart3" class="btnChart" />
</div> </div>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import WgtTitle from '../../../widgets/title' import WgtTitle from '../../../widgets/title'
import ProgressBar from './progressBar.vue'; import ProgressBar from './progressBar';
import * as echarts from "echarts"; import * as echarts from "echarts";
import chart1 from "./assets/charts"; import chart1 from "./assets/charts";
import chart2 from "./assets/charts2"; import chart2 from "./assets/charts2";
@ -88,7 +80,7 @@
yearOptions: [ yearOptions: [
{ {
value: 'year', value: 'year',
label: '年' label: '年度'
}, { }, {
value: 'month', value: 'month',
label: '月' label: '月'
@ -102,14 +94,14 @@
label: '季' label: '季'
},], },],
areaOptions: [{ areaOptions: [{
value: '0531', value: '1',
label: '济南' label: '济南方向'
}, { }, {
value: '菏泽', value: '2',
label: '菏泽' label: '菏泽方向'
}], }],
dateTime:"", dateTime: "2024",
area: '0531', area: '1',
dataList: [ dataList: [
{ {
title: "殷家林枢纽" title: "殷家林枢纽"
@ -161,7 +153,7 @@
} }
], ],
quarter: "", quarter: "",
selectId:1, selectId: 3,
year: "year", year: "year",
list: [ list: [
{ name: '大学城-长清', direction: '济南方向', state: "正常", speed: '108.14km/h', follow: '161' }, { name: '大学城-长清', direction: '济南方向', state: "正常", speed: '108.14km/h', follow: '161' },
@ -173,7 +165,6 @@
] ]
} }
}, },
created() { created() {
}, },
@ -181,6 +172,12 @@
selectProgress(item) { selectProgress(item) {
this.selectId = item.id; this.selectId = item.id;
}, },
onReset() {
this.area = '1';
this.year = "year";
this.dateTime = '2024';
this.selectId = 1;
},
searchQuery() { searchQuery() {
let dateTime = this.dateTime; let dateTime = this.dateTime;
if (dateTime == "") { if (dateTime == "") {
@ -230,57 +227,65 @@
"type": this.year, "type": this.year,
"sectionId": this.selectId, "sectionId": this.selectId,
"createTime": dateTime, "createTime": dateTime,
"direction":1, "direction": this.area,
}).then(res => { }).then(res => {
console.log(res);
chart1.series[0].data = [];
if (res.code == 200) { if (res.code == 200) {
let data = res.data; let data = res.data;
if ( this.year == "year" ) { chart1.series[0].data = [];
let years = []; if (data.length > 0) {
const maxObject = data.reduce((prev, current) => (current.number > prev.number ? current : prev));
let xData = [];
let numbers = []; let numbers = [];
data.forEach(it => { data.forEach(it => {
years.push(it.month+"月"); if (this.year == "year") {
numbers.push(it.number); xData.push(it.month + "月");
})
chart1.xAxis.data = years;
chart1.series[0].data = numbers;
} }
if (this.year == "month") { if (this.year == "month") {
let months = []; xData.push(it.day.split("-")[2] + "日");
let numbers = [];
data.forEach(it=>{
months.push(it.day.split("-")[2]+"日");
numbers.push(it.number);
})
chart1.xAxis.data = months;
chart1.series[0].data = numbers;
} }
if (this.year == "day") { if (this.year == "day") {
let times = []; xData.push(it.time.split(" ")[1] + "小时");
let numbers = [];
data.forEach(it=>{
times.push(it.time.split(" ")[1]+"小时");
numbers.push(it.number);
})
chart1.xAxis.data = times;
chart1.series[0].data = numbers;
} }
if (this.year == "quarter") { if (this.year == "quarter") {
let months = []; xData.push(it.QUARTER);
let numbers = []; }
data.forEach(it=>{ if (it.number == maxObject.number) {
months.push(it.MONTH+"月"); numbers.push({
numbers.push(it.number); value: it.number,
itemStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0, color: '#FFB904' // 0% 处的颜色
}, {
offset: 1, color: '#FF6969' // 100% 处的颜色
}],
global: false // 缺省为 false
},
borderRadius: 6
}
});
} else {
numbers.push({
value: it.number,
itemStyle: {
borderRadius: 6
}
});
}
}) })
chart1.xAxis.data = months;
chart1.xAxis.data = xData;
chart1.series[0].data = numbers; chart1.series[0].data = numbers;
} }
} }
this.myChart1.setOption(chart1); this.myChart1.setOption(chart1);
}); });
@ -289,29 +294,19 @@
"type": this.year, "type": this.year,
"sectionId": this.selectId, "sectionId": this.selectId,
"createTime": dateTime, "createTime": dateTime,
"direction":1, "direction": this.area,
}).then(res => { }).then(res => {
console.log(res);
chart2.series[0].data = []; chart2.series[0].data = [];
if (res.code == 200) { if (res.code == 200) {
let types = []; let types = [];
let numbers = []; let numbers = [];
const gapData = {
name: "",
value: 0.5,
itemStyle: {
color: "transparent",
},
};
let data = res.data.warningTypeList; let data = res.data.warningTypeList;
let total = res.data.total; let total = res.data.total;
data.forEach((it) => { data.forEach((it) => {
// 1-交通拥堵 2-行人 3-非机动车 4-停车5-倒车/逆行 6-烟火7-撒落物8-异常天气 9-护栏碰撞
if (it.warningType == 1) { if (it.warningType == 1) {
types.push("交通拥堵"); types.push("交通拥堵");
} }
if (it.warningType == 2) { if (it.warningType == 2) {
types.push("行人"); types.push("行人");
@ -342,16 +337,14 @@
name: types[types.length - 1], name: types[types.length - 1],
value: it.number value: it.number
}); });
numbers.push(gapData);
}) })
console.log(types);
chart2.legend.data = types; chart2.legend.data = types;
chart2.legend.formatter = function (name) { chart2.legend.formatter = function (name) {
let total = 0 let total = 0
let target let target
for (let i = 0; i < numbers.length; i++) { for (let i = 0; i < numbers.length; i++) {
total += numbers[i].value; total += numbers[i].value;
if (types[i] === name) { if (types[i] == name) {
target = numbers[i].value; target = numbers[i].value;
} }
} }
@ -389,9 +382,8 @@
"type": this.year, "type": this.year,
"sectionId": this.selectId, "sectionId": this.selectId,
"createTime": dateTime, "createTime": dateTime,
"direction":1, "direction": this.area,
}).then(res => { }).then(res => {
console.log(res);
chart3.series[0].data = []; chart3.series[0].data = [];
chart3.series[1].data = []; chart3.series[1].data = [];
if (res.code == 200) { if (res.code == 200) {
@ -400,9 +392,10 @@
let zhs = []; let zhs = [];
let values = []; let values = [];
data.forEach((it) => { data.forEach((it) => {
console.log(it); if (it.sectionNumber > 0) {
values.push(it.sectionNumber); values.push(it.sectionNumber);
zhs.push(it.stakeMarkId); zhs.push(it.stakeMarkId);
}
}) })
chart3.xAxis.data = zhs; chart3.xAxis.data = zhs;
chart3.series[0].data = values; chart3.series[0].data = values;
@ -412,7 +405,7 @@
let values = []; let values = [];
data.forEach((dt, i) => { data.forEach((dt, i) => {
dt.forEach((it) => { dt.forEach((it) => {
console.log(it); if (it.number > 0) {
if (quarter == 1 && it.QUARTER == "第一季度") { if (quarter == 1 && it.QUARTER == "第一季度") {
values[i] = it.number; values[i] = it.number;
zhs[i] = it.stakeMark; zhs[i] = it.stakeMark;
@ -429,6 +422,8 @@
values[i] = it.number; values[i] = it.number;
zhs[i] = it.stakeMark; zhs[i] = it.stakeMark;
} }
}
}) })
}) })
chart3.xAxis.data = zhs; chart3.xAxis.data = zhs;
@ -459,8 +454,17 @@
}); });
}) })
if (rows.length > 0) {
let lastRoad = rows[rows.length - 1].sectionName.split("-")[1];
this.dataList.push({
title: lastRoad,
id: rows[rows.length - 1].id,
});
} }
}
this.searchQuery();
}) })
@ -484,49 +488,65 @@
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(247, 63, 450, 0);
// 颜色断点
gr.addColorStop(1, 'rgba(92,197,255,0)');
gr.addColorStop(0, 'rgba(92,197,255,0.5)');
context.lineWidth = 1; // 设置线段宽度 context.lineWidth = 1; // 设置线段宽度
// 绘制圆角矩形 // 填充渐变颜色
drawRoundRect(context, 300, 78, 160, 24, 12,gr)
var gr = context.createLinearGradient(240, 63, 450, 0);
// 颜色断点
gr.addColorStop(1, 'rgba(92,197,255,0)');
gr.addColorStop(0, 'rgba(92,197,255,0.5)');
drawRoundRect(context, 300, 148, 160, 24, 12,gr)
var gr = context.createLinearGradient(240, 63, 450, 0);
// 颜色断点
gr.addColorStop(1, 'rgba(92,197,255,0)');
gr.addColorStop(0, 'rgba(92,197,255,0.5)');
drawRoundRect(context, 300, 218, 160, 24, 12,gr)
var gr = context.createLinearGradient(400, 63, 450, 0);
// 颜色断点 // 颜色断点
gr.addColorStop(1, 'rgba(92,197,255,0)'); // var gr = context.createLinearGradient(247, 63, 450, 0);
gr.addColorStop(0, 'rgba(92,197,255,0.5)'); // gr.addColorStop(1, 'rgba(92,197,255,0)');
// gr.addColorStop(0, 'rgba(92,197,255,0.5)');
// drawRoundRect(context, 267, 57, 140, 24, 12, gr)
// // 颜色断点
// var gr = context.createLinearGradient(247, 63, 450, 0);
// gr.addColorStop(1, 'rgba(92,197,255,0)');
// gr.addColorStop(0, 'rgba(92,197,255,0.5)');
// drawRoundRect(context, 267, 108, 140, 24, 12, gr)
// // 颜色断点
// var gr = context.createLinearGradient(240, 63, 450, 0);
// gr.addColorStop(1, 'rgba(92,197,255,0)');
// gr.addColorStop(0, 'rgba(92,197,255,0.5)');
// drawRoundRect(context, 267, 157, 140, 24, 12, gr)
// // 颜色断点
// var gr = context.createLinearGradient(240, 63, 450, 0);
// gr.addColorStop(1, 'rgba(92,197,255,0)');
// gr.addColorStop(0, 'rgba(92,197,255,0.5)');
// drawRoundRect(context, 267, 208, 140, 24, 12, gr)
// // 颜色断点
// var gr = context.createLinearGradient(240, 63, 450, 0);
// gr.addColorStop(1, 'rgba(92,197,255,0)');
// gr.addColorStop(0, 'rgba(92,197,255,0.5)');
// drawRoundRect(context, 267, 258, 140, 24, 12, gr)
// // 颜色断点
// var gr = context.createLinearGradient(400, 63, 450, 0);
// gr.addColorStop(1, 'rgba(92,197,255,0)');
// gr.addColorStop(0, 'rgba(92,197,255,0.5)');
// drawRoundRect(context, 416, 57, 140, 24, 12, gr)
// // 颜色断点
// var gr = context.createLinearGradient(350, 63, 450, 0);
// gr.addColorStop(1, 'rgba(92,197,255,0)');
// gr.addColorStop(0, 'rgba(92,197,255,0.5)');
// drawRoundRect(context, 416, 108, 140, 24, 12, gr)
// // 颜色断点
// var gr = context.createLinearGradient(300, 63, 450, 0);
// gr.addColorStop(1, 'rgba(92,197,255,0)');
// gr.addColorStop(0, 'rgba(92,197,255,0.5)');
// drawRoundRect(context, 416, 157, 140, 24, 12, gr)
// // 颜色断点
// var gr = context.createLinearGradient(300, 63, 450, 0);
// gr.addColorStop(1, 'rgba(92,197,255,0)');
// gr.addColorStop(0, 'rgba(92,197,255,0.5)');
// drawRoundRect(context, 416, 208, 140, 24, 12, gr);
drawRoundRect(context, 460, 78, 160, 24, 12,gr)
var gr = context.createLinearGradient(350, 63, 450, 0);
// 颜色断点
gr.addColorStop(1, 'rgba(92,197,255,0)');
gr.addColorStop(0, 'rgba(92,197,255,0.5)');
drawRoundRect(context, 460, 148, 160, 24, 12,gr)
var gr = context.createLinearGradient(300, 63, 450, 0);
// 颜色断点
gr.addColorStop(1, 'rgba(92,197,255,0)');
gr.addColorStop(0, 'rgba(92,197,255,0.5)');
drawRoundRect(context, 460, 218, 160, 24, 12,gr)
}); });
}); });
}, },
} }
@ -535,33 +555,54 @@
<style lang='scss' scoped> <style lang='scss' scoped>
.congestion { .congestion {
width: 100%; width: 100%;
position: relative;
.body { .body {
display: flex; display: flex;
flex-direction: row;
align-items: center; align-items: center;
height: 320px; justify-content: space-evenly;
width:100%;
font-size: 14px; font-size: 14px;
>div { >div {
display: inline-flex;
height:100%;
width: 33%; width: 33%;
margin-right:px; height: 470px;
background: linear-gradient(180deg, rgba(6,66,88,0) 0%, rgba(19, 39, 47, 0.9725490196) 93%); background: linear-gradient(180deg, rgba(6, 66, 88, 0.2) 0%, #064258 100%);
padding: 10px; border: 1px solid;
border-image: linear-gradient(360deg, rgba(55, 231, 255, 0.3), rgba(55, 231, 255, 0)) 1 1;
}
:nth-child(1) {
margin-right: 6px;
} }
:nth-child(2) {
margin-left: 6px;
margin-right: 6px;
}
:nth-child(3) {
margin-left: 6px;
}
.btnChart {
height: 330px;
width: 90%;
margin: 95px auto 0;
}
} }
.board { .board {
height: 100px; height: 100px;
width: 100%; width: 100%;
padding:10px 20px; position: absolute;
background: linear-gradient(180deg, rgba(6,66,88,0.2) 0%, #064258 100%); top: 30px;
padding: 18px 20px;
// 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;
@ -576,12 +617,15 @@
width: 100%; width: 100%;
font-size: 14px; font-size: 14px;
margin-top: 10px; margin-top: 10px;
div { div {
white-space: nowrap; white-space: nowrap;
margin-right: 4px; margin-right: 4px;
} }
.inputZh { .inputZh {
width: 47px; width: 47px;
::v-deep { ::v-deep {
.el-input__inner { .el-input__inner {
background-color: #064258 !important; background-color: #064258 !important;
@ -589,13 +633,16 @@
} }
} }
} }
.inputJl { .inputJl {
margin-left: 5px; margin-left: 5px;
margin-right: 10px; margin-right: 10px;
} }
.selectRoad { .selectRoad {
width:89px; width: 100px;
border: 1px solid #00B3CC; border: 1px solid #00B3CC;
::v-deep { ::v-deep {
.el-input__inner { .el-input__inner {
background-color: #064258 !important; background-color: #064258 !important;
@ -603,13 +650,16 @@
} }
} }
} }
.btnSearch { .btnSearch {
background: linear-gradient(180deg, #005C79 0%, #009BCC 100%); background: linear-gradient(180deg, #005C79 0%, #009BCC 100%);
margin-left: 10px; margin-left: 10px;
border-color: transparent; border-color: transparent;
} }
.btnReset { .btnReset {
background: linear-gradient(180deg, #005C79 0%, #009BCC 100%);; background: linear-gradient(180deg, #005C79 0%, #009BCC 100%);
;
border-color: transparent; border-color: transparent;
color: white; color: white;
} }
@ -617,10 +667,10 @@
} }
} }
.charts { .charts {
height: 100px; height: 100px;
width: 100%; width: 100%;
} }
</style> </style>

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

@ -1,7 +1,8 @@
<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'"
v-for="(item, index) in dataList" :key="index">
<i class="after" @click="selectItem(index, -1, dataList[index - 1])"></i> <i class="after" @click="selectItem(index, -1, dataList[index - 1])"></i>
<i class="before" @click="selectItem(index, +1, item)"></i> <i class="before" @click="selectItem(index, +1, item)"></i>
<span></span> <span></span>
@ -12,8 +13,6 @@
</template> </template>
<script> <script>
import { number } from 'echarts';
export default { export default {
name: 'ProgressBar', name: 'ProgressBar',
@ -26,14 +25,17 @@ import { number } from 'echarts';
return [] return []
} }
}, },
selectIndex: {
type: Number,
default: 1
}
}, },
data() { data() {
return { return {
selectIndex:0, // selectIndex: 0,
selectLine: -1, selectLine: -1,
} }
}, },
created() { created() {
}, },

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

@ -58,7 +58,6 @@ for (let i = 0; i < chartData.length; i++) {
}); });
pieData1.push(gapData); pieData1.push(gapData);
} }
console.log(pieData1);
var options = { var options = {
tooltip: { tooltip: {
@ -119,18 +118,18 @@ var options = {
data: lengData, data: lengData,
formatter: function (name) { formatter: function (name) {
let total = 0 let total = 0
let target let target = 0
if (!mainData) return ""; if (!mainData) return "";
for (let i = 0; i < data.length; i++) { for (let i = 0; i < data.length; i++) {
if (window.mainData[i]) { if (window.mainData[i]) {
total += window.mainData[i].value total += window.mainData[i].percent
if ( window.mainData[i].name === name) { if (window.mainData[i].typeName === name) {
target = window.mainData[i].value target = window.mainData[i].percent
} }
} }
} }
var arr = [ var arr = [
'{a|' + name + '}', '{a|' + name + (name.length == 4 ? '}' : '} '),
'{b|' + ((target / total) * 100).toFixed(2) + '%}', '{b|' + ((target / total) * 100).toFixed(2) + '%}',
] ]
return arr.join(' ') return arr.join(' ')

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

@ -14,6 +14,22 @@
import chartsStatistics from "./assets/charts"; import chartsStatistics from "./assets/charts";
import { getWarningSourceGroup } from '../../../../../../../api/event/perceiveEvent'; 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 { export default {
name: 'EventSource', name: 'EventSource',
components: { components: {
@ -35,18 +51,17 @@
}, },
mounted() { mounted() {
setTimeout(() => { setTimeout(() => {
let currentIndex = -1;
this.$nextTick(() => { this.$nextTick(() => {
var myChart = echarts.init(document.getElementById('eventSource')); var myChart = echarts.init(document.getElementById('eventSource'));
getWarningSourceGroup().then((res) => { getWarningSourceGroup().then((res) => {
if (res.code == 200) { if (res.code == 200) {
console.log("=================",res);
let data = res.data.warningSourceList; let data = res.data.warningSourceList;
let total = res.data.total; let total = res.data.total;
if (data.length > 0) {
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('交通拥堵');
} }
@ -76,6 +91,7 @@
} }
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 = [];
@ -107,7 +123,6 @@
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%";
@ -122,9 +137,32 @@
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;
}); });
@ -136,6 +174,7 @@
<style lang='scss' scoped> <style lang='scss' scoped>
.congestion { .congestion {
width: 100%; width: 100%;
.board { .board {
height: 200px; height: 200px;
width: 100%; width: 100%;
@ -151,10 +190,10 @@
} }
} }
.charts { .charts {
height: 180px; height: 180px;
width: 100%; width: 100%;
} }
</style> </style>

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

@ -72,6 +72,7 @@
<style lang='scss' scoped> <style lang='scss' scoped>
.congestion { .congestion {
width: 100%; width: 100%;
.board { .board {
height: 200px; height: 200px;
width: 100%; width: 100%;
@ -87,10 +88,10 @@
} }
} }
.charts { .charts {
height: 180px; height: 180px;
width: 100%; width: 100%;
} }
</style> </style>

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

@ -11,14 +11,13 @@ 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: '20%', top: '2%',
right: '10%', right: '15%',
}, },
xAxis: { xAxis: {
type: 'value', type: 'value',
@ -47,9 +46,9 @@ var options = {
color: '#fff', color: '#fff',
padding: 10, padding: 10,
margin: -5, margin: -5,
formatter: function (value) { formatter: function (value, index) {
let index = xdata.value.indexOf(value); // let index = xdata.value.indexOf(value);
return `{a|Top${index + 2}} {b|${value}}` return `{a|Top${index + 1}} {b|${value}}`
}, },
rich: { rich: {
a: { a: {

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

@ -1,5 +1,5 @@
<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">
@ -12,36 +12,80 @@
</template> </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 { getSectionPerceivedList } from '../../../../../../../api/event/perceiveEvent'; import { getSectionPerceivedList } from "../../../../../../../api/event/perceiveEvent";
export default { export default {
name: 'Situation', name: "Situation",
components: { components: {
WgtTitle WgtTitle,
}, },
data() { data() {
return { return {};
}
}, },
mounted() { mounted() {
setTimeout(() => { setTimeout(() => {
this.$nextTick(() => { this.$nextTick(() => {
var myChart = echarts.init(document.getElementById('situationEchartBox')); var myChart = echarts.init(
document.getElementById("situationEchartBox")
);
getSectionPerceivedList({}).then((res) => { getSectionPerceivedList({}).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 texts = []; let texts = [];
let datas = []; let datas = [];
//默认显示数值
data.forEach(it => { if (data.length <= 0) {
data = [
{
sectionName: "华山北枢纽-济南虚",
number: 32774,
},
{
sectionName: "东客站虚-华山北枢纽",
number: 30067,
},
{
sectionName: "小许家枢纽-东客站虚",
number: 30057,
},
{
sectionName: "临沂枣园枢纽-临沂虚",
number: 28774,
},
{
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); texts.push(it.sectionName);
datas.push(it.number); datas.push(it.number);
}); });
@ -52,60 +96,63 @@
myChart.setOption(chartsStatistics); myChart.setOption(chartsStatistics);
} }
}); });
}); });
}); });
}, },
created() { created() {},
methods: {},
}, };
methods: {
}
}
</script> </script>
<style lang='scss' scoped> <style lang="scss" scoped>
.situation { .situation {
width: 100%; width: 100%;
.board { .board {
height: 455px; height: 455px;
width: 100%; width: 100%;
padding: 0px 30px; padding: 10px 10px;
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: flex-start; justify-content: flex-start;
align-items: center; align-items: center;
flex-direction: column; flex-direction: column;
} }
.charts { .charts {
margin-top: -40px; // margin-top: -40px;
height: 400px; height: 450px;
width: 100%; width: 100%;
} }
.tag { .tag {
margin-top: 20px; margin-top: 20px;
display: flex; display: flex;
width: 100%; width: 100%;
justify-content: flex-start; justify-content: flex-start;
div { div {
width: 150px; width: 150px;
height: 25px; height: 25px;
line-height: 25px; line-height: 25px;
border-radius: 20px; border-radius: 20px;
text-align: center; text-align: center;
background-color: #C87800; background-color: #c87800;
margin-right: 10px; margin-right: 10px;
} }
.checked { .checked {
background-color: #00B3CC;; background-color: #00b3cc;
} }
} }
} }
</style> </style>

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

@ -2,11 +2,12 @@
/* 数据 */ /* 数据 */
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],
@ -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,
@ -117,7 +123,8 @@ var options = {
borderRadius: [4, 4, 0, 0] borderRadius: [4, 4, 0, 0]
}, },
barWidth: 10, barWidth: 10,
label: {show:false, label: {
show: false,
} }
}, },
] ]

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

@ -38,6 +38,7 @@ export default {
getSectionPerceivedNumber().then((res) => { getSectionPerceivedNumber().then((res) => {
if (res.code == 200) { if (res.code == 200) {
let data = res.data; let data = res.data;
if (data.length > 0) {
let texts = []; let texts = [];
let datas = []; let datas = [];
@ -48,8 +49,9 @@ export default {
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,6 +63,7 @@ export default {
<style lang='scss' scoped> <style lang='scss' scoped>
.congestion { .congestion {
width: 100%; width: 100%;
.board { .board {
height: 200px; height: 200px;
width: 100%; width: 100%;
@ -76,9 +79,9 @@ export default {
} }
} }
.charts { .charts {
height: 180px; height: 180px;
width: 100%; width: 100%;
} }
</style> </style>

28
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: {
@ -54,11 +48,15 @@ var options = {
} }
}, },
formatter: (params) => { formatter: (params) => {
let count = 0;
typeAnalysisData.forEach((it) => {
count += it.value;
})
let obj = typeAnalysisData.filter(it => { return it.name == params }) let obj = typeAnalysisData.filter(it => { return it.name == params })
console.log(obj); // console.log(obj);
return `{ast|${obj[0].name}} {bst|${Math.round(obj[0].value/count* 100) }%}` return `{ast|${obj[0].name}} {bst|${Math.round((obj[0].value / count) * 100)}%}`
}, },
data: typeAnalysisData?.map(x => x.name), // data: typeAnalysisData?.map(x => x.name),
}, },
tooltip: { tooltip: {
trigger: 'item', trigger: 'item',

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

@ -42,7 +42,6 @@
} }
}, },
created() { created() {
}, },
@ -177,6 +176,7 @@
<style lang='scss' scoped> <style lang='scss' scoped>
.congestion { .congestion {
width: 100%; width: 100%;
.board { .board {
height: 200px; height: 200px;
width: 100%; width: 100%;
@ -192,10 +192,10 @@
} }
} }
.charts { .charts {
height: 180px; height: 180px;
width: 100%; width: 100%;
} }
</style> </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