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

感知事件监测统计

wangqin
zhoule 9 months ago
parent
a9be553b47
commit
55e63db4fa
1 changed files with 50 additions and 162 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 212
      ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventQuery/index.vue

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

@ -1,126 +1,53 @@
<template>
<div class="congestion">
<div class="board">
<ProgressBar
class="keep-ratio"
@selectItem="selectProgress"
:dataList="dataList"
:selectIndex="selectIndex"
/>
<ProgressBar class="keep-ratio" @selectItem="selectProgress" :dataList="dataList" :selectIndex="selectIndex" />
<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="请选择"
>
<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'
<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
>
? '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>
<div class="body">
<div>
<WgtTitle :title="'感知事件趋势分析'"></WgtTitle>
<Empty
v-show="!chart1List || chart1List.length <= 0"
text="暂无数据..."
></Empty>
<div
v-show="chart1List || chart1List.length > 0"
id="chart1"
class="btnChart"
/>
<Empty v-show="!chart1List || chart1List.length <= 0" text="暂无数据..."></Empty>
<div v-show="chart1List || chart1List.length > 0" id="chart1" class="btnChart" />
</div>
<div>
<WgtTitle :title="'感知事件类型分析'"></WgtTitle>
<Empty
v-show="!chart2List || chart2List.length <= 0"
text="暂无数据..."
></Empty>
<div
v-show="chart2List || chart2List.length > 0"
id="chart2"
class="btnChart"
/>
<Empty v-show="!chart2List || chart2List.length <= 0" text="暂无数据..."></Empty>
<div v-show="chart2List || chart2List.length > 0" id="chart2" class="btnChart" />
</div>
<div>
<WgtTitle :title="'桩号范围内事件分析趋势'"></WgtTitle>
<Empty
v-show="!chart3List || chart3List.length <= 0"
text="暂无数据..."
></Empty>
<div
v-show="chart3List || chart3List.length > 0"
id="chart3"
class="btnChart"
/>
<Empty v-show="!chart3List || chart3List.length <= 0" text="暂无数据..."></Empty>
<div v-show="chart3List || chart3List.length > 0" id="chart3" class="btnChart" />
</div>
</div>
</div>
@ -135,6 +62,7 @@ import chart1 from "./assets/charts";
import chart2 from "./assets/charts2";
import chart3 from "./assets/charts3";
import ElQuarterPicker from "./ElQuarterPicker";
import moment from 'moment';
import {
getWarningTrend,
getWarningSectionType,
@ -220,8 +148,8 @@ export default {
dateTime: "2024",
direction: "1",
dataList: [],
selectIndex: 1,
selectId: 1,
selectIndex: 2,
selectId: 2,
type: "year",
chart1List: [],
chart2List: [],
@ -272,7 +200,7 @@ export default {
],
};
},
created() {},
created() { },
methods: {
selectProgress(item, index) {
this.selectIndex = index;
@ -284,7 +212,9 @@ export default {
this.type = "year";
this.dateTime = "2024";
this.selectId = this.dataList[0].id;
this.selectIndex = 1;
this.selectId = 2;
this.selectIndex = 2;
this.searchQuery()
},
searchQuery() {
let startTime = "";
@ -541,6 +471,11 @@ export default {
// if (this.type == "day")
// this.type = "date";
},
changeType() {
if (this.type == 'date') {
this.dateTime = moment(new Date()).format("YYYY-MM-DD")
}
}
},
mounted() {
setTimeout(() => {
@ -660,21 +595,16 @@ export default {
justify-content: space-evenly;
font-size: 14px;
> div {
>div {
width: 33%;
height: 470px;
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;
rgba(55, 231, 255, 0)) 1 1;
}
:nth-child(1) {
@ -790,54 +720,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>

Write Preview
Loading…
Cancel
Save