Browse Source

感知事件类型

wangqin
zhoule 11 months ago
parent
commit
38c43948a5
  1. 33
      ruoyi-ui/src/views/JiHeExpressway/pages/control/event/event/EventDetailDialog/eventPlanDialog/index.vue
  2. 16
      ruoyi-ui/src/views/JiHeExpressway/pages/control/event/event/EventDetailDialog/formTable/index.vue
  3. 22
      ruoyi-ui/src/views/JiHeExpressway/pages/control/event/event/EventDetailDialog/qbbDialog/index.vue
  4. 434
      ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventQuery/index.vue
  5. 23
      ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/typeAnalysis/index.vue

33
ruoyi-ui/src/views/JiHeExpressway/pages/control/event/event/EventDetailDialog/eventPlanDialog/index.vue

@ -96,6 +96,7 @@ export default {
qbb: ''
}],
planName: '',
automaticInfo: {},
dcExecuteAction: [],
deviceData: [],
eventOptions: [
@ -252,16 +253,32 @@ export default {
return this.deviceData;
},
async getTemplateAutomatic() {
request({
url: `/business/plans/event/automatic`,
let url = '';
let data = {};
let plan = this.info.find(it => it.planName == this.planName);
if (this.activeName == '-1') {//
url = '/business/plans/warning/confirm';
data = {
dcEmergencyPlans: plan,
dcWarning: this.eventFormData
}
} else {//
url = '/business/plans/event/automatic';
data = {
dcEmergencyPlans: plan,
dcEvent: this.eventFormData
}
}
const result = await request({
url: url,
method: "post",
}).then((result) => {
if (result.code != 200) return Message.error(result?.msg);
this.sbOptions = result.data;
}).catch(() => {
Message.error("查询可变信息标识失败");
data: data
})
if (result.code != 200) {
Message.error(result?.msg);
return {};
}
return result.data;
},
changeRadio(value) {
let plan = this.info.find(it => it.planName == value);

16
ruoyi-ui/src/views/JiHeExpressway/pages/control/event/event/EventDetailDialog/formTable/index.vue

@ -87,7 +87,8 @@
</Table>
<!-- 情报板弹窗 -->
<QbbDialog :visible="isShowDialog" :info="qbbData" :type="type" @close="onCloseDialog" @dialogSubmit="dialogSubmit" />
<!-- <QbbDialog :visible="isShowDialog" :info="qbbData" :type="type" @close="onCloseDialog"
@dialogSubmit="dialogSubmit" /> -->
</div>
</template>
@ -95,7 +96,7 @@
import Table from '@screen/components/Table.vue';
import Button from '@screen/components/Buttons/Button.vue';
import request from "@/utils/request";
import QbbDialog from "../qbbDialog/index.vue";
// import QbbDialog from "../qbbDialog/index.vue";
import { Message } from 'element-ui'
import { planDeviceOptions } from "@screen/utils/enum.js";
@ -105,15 +106,14 @@ export default {
components: {
Button,
Table,
QbbDialog
},
model: {
prop: 'visible',
event: 'update:value'
// QbbDialog
},
// model: {
// prop: 'visible',
// event: 'update:value'
// },
inject: ['loadData'],
props: {
visible: Boolean,
eventType: Number,
type: Number,
tableData: {

22
ruoyi-ui/src/views/JiHeExpressway/pages/control/event/event/EventDetailDialog/qbbDialog/index.vue

@ -1,11 +1,11 @@
<template>
<Dialog v-model="modelVisible" title="情报板确认">
<div class="EventAddPlanDialog">
<div v-if="type == 1" class="EventAddPlanDialog">
<h4>预案内容</h4>
<dev class="listBox disPid">
<div class="tplItem">
<!-- 模板内容 -->
<BoardTplPreview class="boardPreview" boardWH="1400*200" :tpl="{}"></BoardTplPreview>
<!-- <BoardTplPreview class="boardPreview" boardWH="1400*200" :tpl="{}"></BoardTplPreview> -->
<!-- 操作按钮 -->
<div class="infoBtnBox infoBtnBoxSm">
<p class="btn">
@ -18,7 +18,7 @@
<dev class="listBox disPid">
<div class="tplItem">
<!-- 模板内容 -->
<BoardTplPreview class="boardPreview" boardWH="1400*200" :tpl="{}"></BoardTplPreview>
<!-- <BoardTplPreview class="boardPreview" boardWH="1400*200" :tpl="{}"></BoardTplPreview> -->
<!-- 操作按钮 -->
<div class="infoBtnBox infoBtnBoxSm">
<p class="btn">
@ -28,14 +28,11 @@
</div>
</dev>
<h4>情报板模版</h4>
<vuescroll :ops="scrollOptions" class="listBox">
<!-- <vuescroll :ops="scrollOptions" class="listBox">
<div v-for="(item) in templateAvailable" :key="item.dictValue">
<!-- 原来是<el-collapse v-model="activeNames"> -->
<h5>{{ item.dictLabel }}</h5>
<div v-for="(itm, indx) in item.list" :key="indx" class="tplItem">
<!-- 模板内容 -->
<BoardTplPreview class="boardPreview" boardWH="1400*200" :tpl="itm"></BoardTplPreview>
<!-- 操作按钮 -->
<div class="infoBtnBox infoBtnBoxSm">
<p class="btn">
<el-radio v-model="radio1" :label="itm.id" @input="changeRadio(itm)" />
@ -43,7 +40,7 @@
</div>
</div>
</div>
</vuescroll>
</vuescroll> -->
</div>
<template #footer>
<Button style="background: #C9C9C9;padding:0 24px;"
@ -75,9 +72,13 @@ export default {
prop: 'visible',
event: 'close'
},
// inject: ['getTemplateAutomatic'],
props: {
visible: Boolean,
type: Number,
type: {
type: Number,
default: 1
},
info: {
type: Object,
default: () => { }
@ -102,11 +103,12 @@ export default {
},
computed: {
modelVisible: {
get() {
async get() {
if (this.visible) {
if (this.info && this.info.id) {
this.radio1 = Number(this.info.id);
}
// console.log('123', this.getTemplateAutomatic());
}
return this.visible;
},

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

@ -1,87 +1,35 @@
<template>
<div class="congestion">
<div class="condition">
<ProgressBar
class="keep-ratio"
@selectItem="selectProgress"
:dataList="dataList"
:selectIndex="selectIndex"
:reset="reset"
/>
<ProgressBar class="keep-ratio" @selectItem="selectProgress" :dataList="dataList" :selectIndex="selectIndex"
:reset="reset" />
<div class="searchPanel">
<RadioGroup
:options="[
{ key: '1', label: '菏泽' },
{ key: '3', label: '济南' },
]"
v-model="direction"
type="button"
/>
<el-select
v-model="type"
size="mini"
class="selectRoad"
placeholder="请选择"
@change="changeType"
>
<el-option
v-for="item in typeOptions"
:key="item.value"
:label="item.label"
:value="item.value"
>
<RadioGroup :options="[
{ key: '1', label: '菏泽' },
{ key: '3', label: '济南' },
]" v-model="direction" type="button" />
<el-select v-model="type" size="mini" class="selectRoad" placeholder="请选择" @change="changeType">
<el-option v-for="item in typeOptions" :key="item.value" :label="item.label" :value="item.value">
</el-option>
</el-select>
<el-select
v-model="quarter"
size="medium"
v-if="type == 'quarter'"
class="selectRoad-medium"
placeholder="请选择"
>
<el-option
v-for="item in quarterOptions"
:key="item.value"
:label="item.label"
:value="item.value"
style="width: 140px"
>
<el-select v-model="quarter" size="medium" v-if="type == 'quarter'" class="selectRoad-medium" placeholder="请选择">
<el-option v-for="item in quarterOptions" :key="item.value" :label="item.label" :value="item.value"
style="width: 140px">
</el-option>
</el-select>
<el-date-picker
size="mini"
v-if="type != 'quarter'"
class="selectRoad"
v-model="dateTime"
style="width: 140px"
:type="
type == 'date'
? 'date'
: type == 'month'
? 'month'
: type == 'year'
? 'year'
: ''
"
placeholder="请选择"
:clearable="false"
/>
<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"
@click="onReset"
>重置</el-button
>
<el-date-picker size="mini" v-if="type != 'quarter'" class="selectRoad" v-model="dateTime" style="width: 140px"
:type="type == 'date'
? 'date'
: type == 'month'
? 'month'
: type == 'year'
? 'year'
: ''
" placeholder="请选择" :clearable="false" />
<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" @click="onReset">重置</el-button>
</div>
</div>
@ -90,7 +38,7 @@
<WgtTitle :title="'感知事件趋势分析'"></WgtTitle>
<div class="unit_con">
<Empty v-if="!chart1List || chart1List.length <= 0" text="暂无数据..." class="empty"></Empty>
<div v-else id="chart1" class="chart_div" ></div>
<div v-else id="chart1" class="chart_div"></div>
</div>
</div>
@ -98,7 +46,7 @@
<WgtTitle :title="'感知事件类型分析'"></WgtTitle>
<div class="unit_con">
<Empty v-show="!chart2List || chart2List.length <= 0" text="暂无数据..." class="empty"></Empty>
<div id="chart2" class="chart_div" ></div>
<div id="chart2" class="chart_div"></div>
</div>
</div>
@ -106,7 +54,7 @@
<WgtTitle :title="'桩号范围内事件分析趋势'"></WgtTitle>
<div class="unit_con">
<Empty v-show="!chart3List || chart3List.length <= 0" text="暂无数据..." class="empty"></Empty>
<div id="chart3" class="chart_div" ></div>
<div id="chart3" class="chart_div"></div>
</div>
</div>
</div>
@ -261,7 +209,7 @@ export default {
],
};
},
created() {},
created() { },
methods: {
selectProgress(item, index) {
this.selectIndex = index;
@ -409,7 +357,7 @@ export default {
chart1.series[0].data = numbers;
}
}
this.$nextTick(()=>{
this.$nextTick(() => {
this.initChart1();
})
});
@ -423,8 +371,8 @@ export default {
quarter: this.quarter,
}).then((res) => {
chart2.series[0].data = [];
let types = [];
if (res.code == 200) {
let types = [];
let numbers = [];
this.chart2List = res.data;
let data = res.data.warningTypeList;
@ -440,16 +388,20 @@ export default {
} else if (it.warningType == 4) {
types.push("停车");
} else if (it.warningType == 5) {
types.push("倒车/逆行");
types.push("违规驾驶");
} else if (it.warningType == 6) {
types.push("烟火");
types.push("路障");
} else if (it.warningType == 7) {
types.push("撒落物");
types.push("道路施工");
} else if (it.warningType == 8) {
types.push("异常天气");
} else if (it.warningType == 9) {
types.push("护栏碰撞");
} else {
} else if (it.warningType == 10) {
types.push("交通事故");
} else if (it.warningType == 11) {
types.push("车辆故障");
} else if (it.warningType == 99) {
types.push("其他");
}
@ -498,8 +450,8 @@ export default {
// this.myChart2.setOption(chart2);
// })
}
this.$nextTick(()=>{
this.initChart2();
this.$nextTick(() => {
this.initChart2(types);
})
});
//
@ -570,8 +522,8 @@ export default {
chart3.series[0].data = values1;
chart3.series[1].data = values2;
}
this.$nextTick(()=>{
this.initChart3();
this.$nextTick(() => {
this.initChart3();
})
});
// if (this.type == "day")
@ -582,109 +534,114 @@ export default {
this.dateTime = moment(new Date()).format("YYYY-MM-DD");
}
},
initChart1(){
this.myChart1 = echarts.init(document.getElementById("chart1"));
this.myChart1.setOption(chart1);
},
initChart3(){
this.myChart3 = echarts.init(document.getElementById("chart3"));
this.myChart3.setOption(chart3);
},
initChart2(){
this.myChart2 = echarts.init(document.getElementById("chart2"));
this.myChart2.setOption(chart2);
const domMap = document.getElementById("chart2");
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");
context.lineWidth = 1; // 线
//
//
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, 357, 98, 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, 357, 130, 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, 357, 162, 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, 357, 194, 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);
},
initChart1() {
this.myChart1 = echarts.init(document.getElementById("chart1"));
this.myChart1.setOption(chart1);
},
initChart3() {
this.myChart3 = echarts.init(document.getElementById("chart3"));
this.myChart3.setOption(chart3);
},
initChart2(types) {
this.myChart2 = echarts.init(document.getElementById("chart2"));
this.myChart2.setOption(chart2);
const domMap = document.getElementById("chart2");
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");
context.lineWidth = 1; // 线
//
//
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)");
console.log('types', types)
types.forEach((it, index) => {
drawRoundRect(context, 357, (98 + index * 32), 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, 357, 130, 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, 357, 162, 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, 357, 194, 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);
},
},
mounted() {
getRoadSectionList().then((res) => {
console.log(res);
if (res.code == 200) {
let rows = res.data;
this.dataList = [];
rows.forEach((it) => {
this.dataList.push({
title: it.sectionName.split("-")[0],
id: it.id,
});
});
//
if (rows.length > 1) {
this.dataList.push({
title: rows[rows.length - 1].sectionName.split("-")[1],
id: rows[rows.length - 1].id,
});
}
console.log("dataList", this.dataList);
}
this.searchQuery();
getRoadSectionList().then((res) => {
console.log(res);
if (res.code == 200) {
let rows = res.data;
this.dataList = [];
rows.forEach((it) => {
this.dataList.push({
title: it.sectionName.split("-")[0],
id: it.id,
});
});
//
if (rows.length > 1) {
this.dataList.push({
title: rows[rows.length - 1].sectionName.split("-")[1],
id: rows[rows.length - 1].id,
});
}
console.log("dataList", this.dataList);
}
this.searchQuery();
});
}
};
</script>
@ -694,37 +651,44 @@ export default {
position: relative;
.comp_body {
width: 100%; height: 100%;
width: 100%;
height: 100%;
display: flex;
align-items: stretch;
font-size: 14px;
> div {
>div {
flex: 1;
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: 1px solid;
border-image: linear-gradient(
360deg,
border-image: linear-gradient(360deg,
rgba(55, 231, 255, 0.3),
rgba(55, 231, 255, 0)
)
1 1;
display: flex; flex-direction: column; align-items: stretch;
rgba(55, 231, 255, 0)) 1 1;
display: flex;
flex-direction: column;
align-items: stretch;
margin-right: 14px;
&:last-child{ margin-right: 0;}
&:last-child {
margin-right: 0;
}
}
.unit_con {
flex: 1;
margin: 95px 20px 30px; position: relative;
margin: 95px 20px 30px;
position: relative;
}
.empty {
position: absolute;
}
.empty{ position: absolute;}
.chart_div{
width: 100%; height: 100%;
.chart_div {
width: 100%;
height: 100%;
}
}
@ -816,54 +780,12 @@ export default {
</style>
<style lang="scss">
div.el-popover:has(> .el-date-picker)
div
.el-picker-panel__body
.el-picker-panel__content
table
tr
td.today
span,
div.el-popover:has(> .el-date-picker)
div
.el-picker-panel__body
.el-picker-panel__content
table
tr
td.today
.cell,
div.el-picker-panel.el-date-picker.el-popper
div
.el-picker-panel__body
.el-picker-panel__content
table
tr
td.today
span,
div.el-picker-panel.el-date-picker.el-popper
div
.el-picker-panel__body
.el-picker-panel__content
table
tr
td.today
.cell,
div.el-picker-panel.el-date-range-picker.el-popper
div
.el-picker-panel__body
.el-picker-panel__content
table
tr
td.today
span,
div.el-picker-panel.el-date-range-picker.el-popper
div
.el-picker-panel__body
.el-picker-panel__content
table
tr
td.today
.cell {
div.el-popover:has(> .el-date-picker) div .el-picker-panel__body .el-picker-panel__content table tr td.today span,
div.el-popover:has(> .el-date-picker) div .el-picker-panel__body .el-picker-panel__content table tr td.today .cell,
div.el-picker-panel.el-date-picker.el-popper div .el-picker-panel__body .el-picker-panel__content table tr td.today span,
div.el-picker-panel.el-date-picker.el-popper div .el-picker-panel__body .el-picker-panel__content table tr td.today .cell,
div.el-picker-panel.el-date-range-picker.el-popper div .el-picker-panel__body .el-picker-panel__content table tr td.today span,
div.el-picker-panel.el-date-range-picker.el-popper div .el-picker-panel__body .el-picker-panel__content table tr td.today .cell {
color: #fff;
}
</style>

23
ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/typeAnalysis/index.vue

@ -49,7 +49,7 @@ export default {
data() {
return {};
},
created() {},
created() { },
methods: {},
mounted() {
setTimeout(() => {
@ -83,17 +83,17 @@ export default {
value: 0,
},
{
name: "倒车/逆行",
name: "违规驾驶",
warningType: 5,
value: 0,
},
{
name: "烟火",
name: "路障",
warningType: 6,
value: 0,
},
{
name: "撒落物",
name: "道路施工",
warningType: 7,
value: 0,
},
@ -191,20 +191,15 @@ export default {
.congestion {
.board {
padding: 0px 20px;
background: linear-gradient(
180deg,
rgba(6, 66, 88, 0.2) 0%,
#06425888 100%
);
background: linear-gradient(180deg,
rgba(6, 66, 88, 0.2) 0%,
#06425888 100%);
border-radius: 5px 5px 5px 5px;
opacity: 1;
border: 1px solid;
border-image: linear-gradient(
360deg,
border-image: linear-gradient(360deg,
rgba(55, 231, 255, 0.1),
rgba(55, 231, 255, 0)
)
1 1;
rgba(55, 231, 255, 0)) 1 1;
display: flex;
justify-content: space-between;
align-items: center;

Loading…
Cancel
Save