|
|
@ -28,7 +28,7 @@ |
|
|
|
<!-- 根据事件源统计条件 --> |
|
|
|
<div v-if="filterType === 'source'"> |
|
|
|
<el-form-item label="方向"> |
|
|
|
<el-select style="margin-left: 27px;" v-model="queryParams.direction" placeholder="请选择"> |
|
|
|
<el-select v-model="queryParams.direction" placeholder="请选择" style="margin-left: 27px;"> |
|
|
|
<el-option v-for="item in directions" :key="item.value" :label="item.label" :value="item.value"/> |
|
|
|
</el-select> |
|
|
|
</el-form-item> |
|
|
@ -64,7 +64,7 @@ |
|
|
|
</el-select> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item label="方 向"> |
|
|
|
<el-select style="margin-left: 23px;" v-model="queryParams.direction" placeholder="请选择"> |
|
|
|
<el-select v-model="queryParams.direction" placeholder="请选择" style="margin-left: 23px;"> |
|
|
|
<el-option v-for="item in directions" :key="item.value" :label="item.label" :value="item.value"/> |
|
|
|
</el-select> |
|
|
|
</el-form-item> |
|
|
@ -109,7 +109,7 @@ |
|
|
|
/> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item label="方 向"> |
|
|
|
<el-select style="margin-left: 25px;" v-model="queryParams.direction" placeholder="请选择"> |
|
|
|
<el-select v-model="queryParams.direction" placeholder="请选择" style="margin-left: 25px;"> |
|
|
|
<el-option v-for="item in directions" :key="item.value" :label="item.label" :value="item.value"/> |
|
|
|
</el-select> |
|
|
|
</el-form-item> |
|
|
@ -130,7 +130,7 @@ |
|
|
|
</el-select> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item label="事件类型"> |
|
|
|
<el-select v-model="queryParams.warningType" placeholder="请选择"> |
|
|
|
<el-select v-model="queryParams.warningType" placeholder="请选择"> |
|
|
|
<el-option v-for="item in warningTypes" :key="item.value" :label="item.label" :value="item.value"/> |
|
|
|
</el-select> |
|
|
|
</el-form-item> |
|
|
@ -140,23 +140,23 @@ |
|
|
|
|
|
|
|
<el-form-item label="日期"> |
|
|
|
</el-form-item> |
|
|
|
<el-select style="margin-left: 14px;" v-model="queryParams.type" class="selectRoad" placeholder="请选择"> |
|
|
|
<el-select v-model="queryParams.type" class="selectRoad" placeholder="请选择" style="margin-left: 14px;"> |
|
|
|
|
|
|
|
<el-option v-for="item in typeOptions" :key="item.value" :label="item.label" :value="item.value" /> |
|
|
|
<el-option v-for="item in typeOptions" :key="item.value" :label="item.label" :value="item.value"/> |
|
|
|
</el-select> |
|
|
|
<!-- 日期选择 --> |
|
|
|
<el-date-picker |
|
|
|
size="mini" |
|
|
|
class="selectRoad" |
|
|
|
v-model="queryParams.dateTime" |
|
|
|
style="width: 140px " |
|
|
|
:picker-options="pickerOptions" |
|
|
|
:type="datePickerType" |
|
|
|
class="selectRoad" |
|
|
|
placeholder="请选择" |
|
|
|
size="mini" |
|
|
|
style="width: 140px " |
|
|
|
@change="handleDateChange" |
|
|
|
/> |
|
|
|
<el-form-item label="方 向"> |
|
|
|
<el-select style="margin-left: 22px;" v-model="queryParams.direction" placeholder="请选择"> |
|
|
|
<el-select v-model="queryParams.direction" placeholder="请选择" style="margin-left: 22px;"> |
|
|
|
<el-option v-for="item in directions" :key="item.value" :label="item.label" :value="item.value"/> |
|
|
|
</el-select> |
|
|
|
</el-form-item> |
|
|
@ -199,7 +199,18 @@ |
|
|
|
<div ref="horizontalBarChart" style="width: 100%; height: 300px;"></div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="table"> |
|
|
|
<el-col style="margin-left: 1%"> |
|
|
|
<el-button |
|
|
|
icon="el-icon-download" |
|
|
|
|
|
|
|
size="mini" |
|
|
|
type="warning" |
|
|
|
@click="handleExport" |
|
|
|
>导出 |
|
|
|
</el-button> |
|
|
|
</el-col> |
|
|
|
<div class="table-container"> |
|
|
|
|
|
|
|
<el-table :data="eventData"> |
|
|
|
<el-table-column align="center" label="事件桩号" prop="stakeMark"/> |
|
|
|
<el-table-column align="center" label="事件源"> |
|
|
@ -261,11 +272,11 @@ |
|
|
|
</div> |
|
|
|
<div class="detail-item"> |
|
|
|
<span class="label">行驶方向:</span> |
|
|
|
<span class="value">{{getEventDirection (currentEvent.direction )}}</span> |
|
|
|
<span class="value">{{ getEventDirection(currentEvent.direction) }}</span> |
|
|
|
</div> |
|
|
|
<div class="detail-item"> |
|
|
|
<span class="label">事件类型:</span> |
|
|
|
<span class="value">{{getEventTypeDescription(currentEvent.warningSubclass)}}</span> |
|
|
|
<span class="value">{{ getEventTypeDescription(currentEvent.warningSubclass) }}</span> |
|
|
|
</div> |
|
|
|
<div class="detail-item"> |
|
|
|
<span class="label">高速名称:</span> |
|
|
@ -452,6 +463,27 @@ export default { |
|
|
|
} |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
/** 导出按钮操作 */ |
|
|
|
handleExport() { |
|
|
|
if (this.filterType === 'time') { |
|
|
|
this.download('/business/warning/videoReviewListExport', { |
|
|
|
...this.queryParams, |
|
|
|
startDate: this.queryParams.dateTime ? this.queryParams.dateTime : moment().startOf('month').format("YYYY-MM"), |
|
|
|
type: this.queryParams.type ? this.queryParams.type : '1', |
|
|
|
}, `视频审核事件.xlsx`) |
|
|
|
|
|
|
|
} else { |
|
|
|
this.download('/business/warning/videoReviewEventSourceListExport', { |
|
|
|
...this.queryParams, |
|
|
|
startDate: this.queryParams.typeDateRange ? this.queryParams.typeDateRange[0] : null, |
|
|
|
endDate: this.queryParams.typeDateRange ? this.queryParams.typeDateRange[1] : null, |
|
|
|
startStakeMark: this.formatStakeMark(this.queryParams.stakeMarkArry), |
|
|
|
endStakeMark: this.formatStakeMark(this.queryParams.endMark) |
|
|
|
}, `视频审核事件.xlsx`) |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
}, |
|
|
|
handleDateChange(value) { |
|
|
|
if (!value) return; |
|
|
|
|
|
|
@ -471,7 +503,7 @@ export default { |
|
|
|
|
|
|
|
this.$set(this.queryParams, 'dateTime', formattedDate); |
|
|
|
}, |
|
|
|
getEventDirection(state){ |
|
|
|
getEventDirection(state) { |
|
|
|
const stateMap = { |
|
|
|
1: '菏泽方向', |
|
|
|
3: '济南方向', |
|
|
@ -989,14 +1021,24 @@ export default { |
|
|
|
.value { |
|
|
|
flex: 1; |
|
|
|
} |
|
|
|
|
|
|
|
.el-dialog__header { |
|
|
|
cursor: move; |
|
|
|
} |
|
|
|
|
|
|
|
.selectRoad { |
|
|
|
width: 90px; |
|
|
|
} |
|
|
|
|
|
|
|
::v-deep .el-input--mini .el-input__inner { |
|
|
|
height: 35px; |
|
|
|
line-height: 28px; |
|
|
|
} |
|
|
|
|
|
|
|
.table-container { |
|
|
|
position: relative; |
|
|
|
overflow-y: auto; |
|
|
|
height: 480px; /* 调整高度以适应其他UI元素如按钮等 */ |
|
|
|
margin-bottom: 1em; /* 根据需要调整底部间距 */ |
|
|
|
} |
|
|
|
</style> |
|
|
|