|
|
|
@ -7,7 +7,17 @@ |
|
|
|
|
|
|
|
<div> |
|
|
|
<Table :data="tableData" :show-header="false"> |
|
|
|
<ElTableColumn prop="remark" width="280" /> |
|
|
|
<ElTableColumn prop="remark" width="280"> |
|
|
|
<template slot-scope="scope"> |
|
|
|
<div class="leftColumn"> |
|
|
|
<div class="device-icon" |
|
|
|
:style="{ backgroundImage: `url(${require(`@screen/images/event/${activeTab == 'first' ? (WarningType[scope.row.warningType] || '交通拥堵') : '交通拥堵'}.svg`)})` }" /> |
|
|
|
<p>{{ activeTab == 'first' ? WarningType[scope.row.warningType] : scope.row.stringEventType }}</p> |
|
|
|
</div> |
|
|
|
<P> {{ scope.row.remark }}</P> |
|
|
|
</template> |
|
|
|
|
|
|
|
</ElTableColumn> |
|
|
|
</Table> |
|
|
|
</div> |
|
|
|
|
|
|
|
@ -24,10 +34,13 @@ |
|
|
|
import request from "@/utils/request"; |
|
|
|
import Table from '@screen/components/Table.vue'; |
|
|
|
import Pagination from '@screen/components/Pagination.vue'; |
|
|
|
import { WarningType } from "@screen/utils/enum.js"; |
|
|
|
|
|
|
|
export default { |
|
|
|
data() { |
|
|
|
return { |
|
|
|
activeTab: "first", |
|
|
|
WarningType, |
|
|
|
tableData: [], |
|
|
|
total: 10, |
|
|
|
searchData: { |
|
|
|
@ -53,9 +66,12 @@ export default { |
|
|
|
getMainData() { |
|
|
|
if (this.activeTab == 'first') { |
|
|
|
request({ |
|
|
|
url: `perceivedEvents/warning/perceivedEventsList?pageNum=${this.searchData.pageNum}&pageSize=${this.searchData.pageSize}`, |
|
|
|
url: `/perceivedEvents/warning/warningListPage?pageNum=${this.searchData.pageNum}&pageSize=${this.searchData.pageSize}`, |
|
|
|
method: "POST", |
|
|
|
data: {} |
|
|
|
data: { |
|
|
|
warningState: 1, |
|
|
|
pageNum: 1, pageSize: 10 |
|
|
|
} |
|
|
|
}) |
|
|
|
.then((result) => { |
|
|
|
if (result.code != 200) return; |
|
|
|
@ -71,7 +87,8 @@ export default { |
|
|
|
.then((result) => { |
|
|
|
if (result.code != 200) return; |
|
|
|
result.rows.forEach(item => { |
|
|
|
item.remark = item.occurrenceTime + " " + item.stakeMark + " " + item.direction + " 发生" + item.stringEventType + "( " + item.eventSubclass + ")事件" |
|
|
|
item.remark = (item.occurrenceTime || '') + " " + (item.stakeMark || '') + " " + (item.direction || '') + " 发生" + (item.stringEventType || '') + "( " + (item.eventSubclass || '') + ")事件" |
|
|
|
// item.remark = item.stakeMark + " " + item.direction + " 发生" + item.stringEventType + "( " + item.eventSubclass + ")事件" |
|
|
|
}) |
|
|
|
this.tableData = result.rows; |
|
|
|
this.total = result.total; |
|
|
|
@ -87,5 +104,28 @@ export default { |
|
|
|
</script> |
|
|
|
|
|
|
|
<style lang="scss" scoped> |
|
|
|
.warning_list {} |
|
|
|
.warning_list { |
|
|
|
.leftColumn { |
|
|
|
display: flex; |
|
|
|
justify-content: center; |
|
|
|
margin-right: 8px; |
|
|
|
border: 1px solid #FF5F5F; |
|
|
|
float: left; |
|
|
|
|
|
|
|
p { |
|
|
|
color: #FF5F5F; |
|
|
|
font-size: 15px; |
|
|
|
margin-right: 3px; |
|
|
|
} |
|
|
|
|
|
|
|
.device-icon { |
|
|
|
height: 22px; |
|
|
|
width: 22px; |
|
|
|
background-repeat: no-repeat; |
|
|
|
background-size: auto; |
|
|
|
background-position: center; |
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
</style> |
|
|
|
|
