Browse Source

提交最新代码

wangqin
yyl 10 months ago
parent
commit
f177716fcd
  1. 21
      ruoyi-ui/src/api/event/perceiveEvent.js
  2. 87
      ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventQuery/index.vue
  3. 12
      ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventQuery/progressBar.vue
  4. 31
      ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/monthStatistics/index.vue
  5. 2
      ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/railway/assets/charts.js

21
ruoyi-ui/src/api/event/perceiveEvent.js

@ -129,7 +129,7 @@ export function geTwarningTotal(query) {
return request({ return request({
url: '/perceivedEvents/warning/warningTrend', url: '/perceivedEvents/warning/warningTrend',
method: 'post', method: 'post',
params: { data: {
...query, ...query,
} }
}) })
@ -141,7 +141,7 @@ export function geTwarningTotal(query) {
return request({ return request({
url: '/perceivedEvents/warning/warningSectionType', url: '/perceivedEvents/warning/warningSectionType',
method: 'post', method: 'post',
params: { data: {
...query, ...query,
} }
}) })
@ -153,8 +153,21 @@ export function geTwarningTotal(query) {
return request({ return request({
url: '/perceivedEvents/warning/sectionMarkNumber', url: '/perceivedEvents/warning/sectionMarkNumber',
method: 'post', method: 'post',
params: { data: {
...query, ...query,
} }
}) })
} }
///
//查询辖区路段列表
export function getRoadSectionList(query) {
//system/status/tablist
return request({
url: '/business/roadSection/list',
method: 'get',
params: {
...query,
}
})
}

87
ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventQuery/index.vue

@ -2,6 +2,7 @@
<div class='congestion'> <div class='congestion'>
<WgtTitle :title="'感知事件查询'" ></WgtTitle> <WgtTitle :title="'感知事件查询'" ></WgtTitle>
<div class="board"> <div class="board">
<ProgressBar class="keep-ratio" @selectItem="selectProgress" :dataList="dataList" :selectIndex="7" />
<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="请选择">
<el-option <el-option
@ -28,12 +29,11 @@
:type="year" :type="year"
placeholder="请选择" placeholder="请选择"
/> />
<el-quarter-picker size="mini" class="selectRoad" style="width:180px;" v-if="year == 'quarter'" v-model="quarter" aria-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" 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" >重置</el-button>
</div> </div>
<ProgressBar class="keep-ratio" :dataList="dataList" :selectIndex="7" />
</div> </div>
<div class="body" > <div class="body" >
<div id="chart1" class="keep-ratio" > <div id="chart1" class="keep-ratio" >
@ -58,6 +58,7 @@
import chart2 from "./assets/charts2"; import chart2 from "./assets/charts2";
import chart3 from "./assets/charts3"; import chart3 from "./assets/charts3";
import ElQuarterPicker from './ElQuarterPicker' import ElQuarterPicker from './ElQuarterPicker'
import { getWarningTrend,getWarningSectionType,getSectionMarkNumber,getRoadSectionList } 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, , ,
@ -93,7 +94,7 @@
label: '月' label: '月'
}, },
{ {
value: 'date', value: 'day',
label: '日' label: '日'
}, },
{ {
@ -101,14 +102,14 @@
label: '季' label: '季'
},], },],
areaOptions: [{ areaOptions: [{
value: '济南', value: '0531',
label: '济南' label: '济南'
}, { }, {
value: '菏泽', value: '菏泽',
label: '菏泽' label: '菏泽'
}], }],
dateTime:"", dateTime:"",
area: '济南', area: '0531',
dataList:[ dataList:[
{ {
title:"殷家林枢纽" title:"殷家林枢纽"
@ -160,6 +161,7 @@
} }
], ],
quarter:"", quarter:"",
selectId:1,
year:"year", year:"year",
list:[ list:[
{name:'大学城-长清', direction:'济南方向', state:"正常",speed:'108.14km/h', follow:'161'}, {name:'大学城-长清', direction:'济南方向', state:"正常",speed:'108.14km/h', follow:'161'},
@ -176,11 +178,77 @@
}, },
methods: { methods: {
selectProgress(item){
this.selectId = item.id;
},
searchQuery(){
let dateTime = this.dateTime;
if ( this.year == "year") {
dateTime = new Date(dateTime);
dateTime = dateTime.getFullYear();
console.log(dateTime);
}
if ( this.year == "month") {
dateTime = new Date(dateTime);
let m = dateTime.getMonth()+1;
m = m < 10?"0"+m:m;
dateTime = dateTime.getFullYear() + "-" + m +"-00 00:00:00";
console.log(dateTime);
}
//
getWarningTrend({
"type": this.year,
"sectionId": this.selectId,
"createTime": dateTime,
}).then(res=>{
console.log(res);
chart1.series[0].data = [];
this.myChart1.setOption(chart1);
});
//
getWarningSectionType({
"type": this.year,
"sectionId": this.selectId,
"createTime": dateTime,
}).then(res=>{
console.log(res);
chart2.series[0].data = [];
this.myChart2.setOption(chart2);
})
//
getSectionMarkNumber({
"type": this.year,
"sectionId": this.selectId,
"createTime": dateTime,
}).then(res=>{
console.log(res);
chart3.series[0].data = [];
chart3.series[1].data = [];
this.myChart3.setOption(chart3);
})
},
}, },
mounted() { mounted() {
setTimeout(() => { setTimeout(() => {
this.$nextTick(() => { this.$nextTick(() => {
getRoadSectionList().then(res=>{
console.log(res);
if ( res.code == 200 ) {
let rows = res.rows;
this.dataList = [];
rows.forEach(it=>{
this.dataList.push({
title:it.sectionName.split("-")[0],
id:it.id,
});
})
}
})
var myChart1 = echarts.init(document.getElementById('chart1')); var myChart1 = echarts.init(document.getElementById('chart1'));
myChart1.setOption(chart1); myChart1.setOption(chart1);
var myChart2 = echarts.init(document.getElementById('chart2')); var myChart2 = echarts.init(document.getElementById('chart2'));
@ -188,6 +256,9 @@
var myChart3 = echarts.init(document.getElementById('chart3')); var myChart3 = echarts.init(document.getElementById('chart3'));
myChart3.setOption(chart3); myChart3.setOption(chart3);
this.myChart1 = myChart1;
this.myChart2 = myChart2;
this.myChart3 = myChart3;
const domMap = document.getElementById("chart2"); const domMap = document.getElementById("chart2");
let parentDiv = domMap.firstChild; let parentDiv = domMap.firstChild;
@ -288,7 +359,7 @@
height: 40px; height: 40px;
width:100%; width:100%;
font-size: 14px; font-size: 14px;
margin-bottom: 10px; margin-top: 10px;
div{ div{
white-space: nowrap; white-space: nowrap;
margin-right: 4px; margin-right: 4px;

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

@ -2,8 +2,8 @@
<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)"></i> <i class="after" @click="selectItem(index,-1, dataList[index - 1])"></i>
<i class="before" @click="selectItem(index,+1)" ></i> <i class="before" @click="selectItem(index,+1,item)" ></i>
<span></span> <span></span>
<div>{{ item.title }}</div> <div>{{ item.title }}</div>
</div> </div>
@ -38,9 +38,11 @@ import { number } from 'echarts';
}, },
methods: { methods: {
selectItem(index,num){ selectItem(index,num,item){
this.selectIndex = index; this.selectIndex = index;
this.selectLine = num this.selectLine = num;
if ( item )
this.$emit("selectItem",item);
} }
}, },
mounted() { mounted() {
@ -147,7 +149,7 @@ import { number } from 'echarts';
>.item { >.item {
position: relative; position: relative;
width: 180px; width: 113px;
height:35px; height:35px;
display: inline-flex; display: inline-flex;
flex-direction: column; flex-direction: column;

31
ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/monthStatistics/index.vue

@ -12,6 +12,8 @@
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';
export default { export default {
name: 'MonthStatistics', name: 'MonthStatistics',
components: { components: {
@ -33,7 +35,34 @@
setTimeout(() => { setTimeout(() => {
this.$nextTick(() => { this.$nextTick(() => {
var myChart = echarts.init(document.getElementById('monthStatistics')); var myChart = echarts.init(document.getElementById('monthStatistics'));
myChart.setOption(chartsStatistics); getDailyCumulativeMonth().then((res)=>{
console.log(res);
if ( res.code == 200 ) {
let data = res.data;
let timeData = [];
let datasN = [];
for (var i = 0; i < 24;i++){
let k = 0;
for (var j = 0;j < data.length;j++){
let it = data[j];
if ( it.time == i ) {
timeData.push( i +"点至"+ (i +1)+"点");
datasN.push(it.number);
k++;
}
}
if ( k == 0 ) {
timeData.push( i +"点至"+ (i +1)+"点");
datasN.push(0);
}
}
chartsStatistics.xAxis.data = timeData;
chartsStatistics.series[0].data = datasN;
myChart.setOption(chartsStatistics);
}
});
}); });
}); });
}, },

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

@ -49,7 +49,7 @@ var options = {
margin:-5, margin:-5,
formatter: function (value) { formatter: function (value) {
let index = xdata.value.indexOf(value); let index = xdata.value.indexOf(value);
return `{a|Top${index+1}} {b|${value}}` return `{a|Top${index + 2}} {b|${value}}`
}, },
rich: { rich: {
a: { a: {

Loading…
Cancel
Save