|
|
@ -1,5 +1,5 @@ |
|
|
<template> |
|
|
<template> |
|
|
<div class='RoadNetworkMonitoring'> |
|
|
<div class="RoadNetworkMonitoring"> |
|
|
<!-- 搜索栏 --> |
|
|
<!-- 搜索栏 --> |
|
|
<div class="filter"> |
|
|
<div class="filter"> |
|
|
<ButtonGradient @click="onRefresh" class="refresh-btn"> |
|
|
<ButtonGradient @click="onRefresh" class="refresh-btn"> |
|
|
@ -9,47 +9,71 @@ |
|
|
刷新 |
|
|
刷新 |
|
|
</ButtonGradient> |
|
|
</ButtonGradient> |
|
|
|
|
|
|
|
|
<InputSearch style="width: 402px;" :formList="searchFormList" :formConfigOptions="{ dFormData: { eventState: 0 } }" |
|
|
<InputSearch |
|
|
@handleSearch="handleSearch" /> |
|
|
style="width: 402px" |
|
|
|
|
|
:formList="searchFormList" |
|
|
|
|
|
:formConfigOptions="{ dFormData: { eventState: '0' } }" |
|
|
|
|
|
@handleSearch="handleSearch" |
|
|
|
|
|
/> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<!-- 内容 --> |
|
|
<!-- 内容 --> |
|
|
<div class="body"> |
|
|
<div class="body"> |
|
|
<RoadStateCard v-for="(item, index) in data" :key="index" :cardData="item" @firstBtnClick="firstBtnClick" |
|
|
<RoadStateCard |
|
|
@lastBtnClick="lastBtnClick" /> |
|
|
v-for="(item, index) in data" |
|
|
|
|
|
:key="index" |
|
|
|
|
|
:cardData="item" |
|
|
|
|
|
@firstBtnClick="firstBtnClick" |
|
|
|
|
|
@lastBtnClick="lastBtnClick" |
|
|
|
|
|
/> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<!-- 分页 --> |
|
|
<!-- 分页 --> |
|
|
<div class="footer"> |
|
|
<div class="footer"> |
|
|
<Pagination @current-change="initData" @size-change="onSizeChange" width="'100%'" :page-sizes="[12, 16, 20, 30, 50]" |
|
|
<Pagination |
|
|
:page-size="searchData.pageSize" :current-page.sync="searchData.pageNum" layout="total, sizes, prev, pager, next" |
|
|
@current-change="initData" |
|
|
:total="total"> |
|
|
@size-change="onSizeChange" |
|
|
|
|
|
width="'100%'" |
|
|
|
|
|
:page-sizes="[12, 16, 20, 30, 50]" |
|
|
|
|
|
:page-size="searchData.pageSize" |
|
|
|
|
|
:current-page.sync="searchData.pageNum" |
|
|
|
|
|
layout="total, sizes, prev, pager, next" |
|
|
|
|
|
:total="total" |
|
|
|
|
|
> |
|
|
</Pagination> |
|
|
</Pagination> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<EventDetailDialog :visible="eventDetailDialogVisible" :formData="detailDialogFormData" @update:value="handleClose" /> |
|
|
<EventDetailDialog |
|
|
<EventDispatchDialog :visible="eventDispatchDialogVisible" @update:value="handleClose" :eventId="eventId" /> |
|
|
:visible="eventDetailDialogVisible" |
|
|
|
|
|
:formData="detailDialogFormData" |
|
|
|
|
|
@update:value="handleClose" |
|
|
|
|
|
/> |
|
|
|
|
|
<EventDispatchDialog |
|
|
|
|
|
:visible="eventDispatchDialogVisible" |
|
|
|
|
|
@update:value="handleClose" |
|
|
|
|
|
:eventId="eventId" |
|
|
|
|
|
/> |
|
|
</div> |
|
|
</div> |
|
|
</template> |
|
|
</template> |
|
|
|
|
|
|
|
|
<script> |
|
|
<script> |
|
|
import ButtonGradient from "@screen/components/Buttons/ButtonGradient.vue"; |
|
|
import ButtonGradient from "@screen/components/Buttons/ButtonGradient.vue"; |
|
|
import Pagination from '@screen/components/Pagination.vue'; |
|
|
import Pagination from "@screen/components/Pagination.vue"; |
|
|
import InputSearch from '@screen/components/InputSearch/index.vue'; |
|
|
import InputSearch from "@screen/components/InputSearch/index.vue"; |
|
|
import RoadStateCard from '@screen/components/RoadStateCard/index.vue'; |
|
|
import RoadStateCard from "@screen/components/RoadStateCard/index.vue"; |
|
|
import EventDetailDialog from "./EventDetailDialog/index"; |
|
|
import EventDetailDialog from "./EventDetailDialog/index"; |
|
|
import EventDispatchDialog from "./EventDispatchDialog/index"; |
|
|
import EventDispatchDialog from "./EventDispatchDialog/index"; |
|
|
import { searchFormList } from './data'; |
|
|
import { searchFormList } from "./data"; |
|
|
import request from "@/utils/request"; |
|
|
import request from "@/utils/request"; |
|
|
|
|
|
|
|
|
const directionMapping = { |
|
|
const directionMapping = { |
|
|
'1': '菏泽方向', |
|
|
1: "菏泽方向", |
|
|
'2': '双向', |
|
|
2: "双向", |
|
|
'3': '济南方向' |
|
|
3: "济南方向", |
|
|
} |
|
|
}; |
|
|
|
|
|
|
|
|
export default { |
|
|
export default { |
|
|
name: 'RoadNetworkMonitoring', |
|
|
name: "RoadNetworkMonitoring", |
|
|
components: { |
|
|
components: { |
|
|
Pagination, |
|
|
Pagination, |
|
|
RoadStateCard, |
|
|
RoadStateCard, |
|
|
@ -57,7 +81,7 @@ export default { |
|
|
EventDispatchDialog, |
|
|
EventDispatchDialog, |
|
|
EventDetailDialog, |
|
|
EventDetailDialog, |
|
|
Pagination, |
|
|
Pagination, |
|
|
ButtonGradient |
|
|
ButtonGradient, |
|
|
}, |
|
|
}, |
|
|
data() { |
|
|
data() { |
|
|
return { |
|
|
return { |
|
|
@ -67,13 +91,13 @@ export default { |
|
|
detailDialogFormData: {}, |
|
|
detailDialogFormData: {}, |
|
|
total: 0, |
|
|
total: 0, |
|
|
data: [], |
|
|
data: [], |
|
|
eventId: '0', |
|
|
eventId: "0", |
|
|
searchData: { |
|
|
searchData: { |
|
|
pageSize: 16, |
|
|
pageSize: 16, |
|
|
pageNum: 1, |
|
|
pageNum: 1, |
|
|
eventState: 0, |
|
|
eventState: "0", |
|
|
}, |
|
|
}, |
|
|
} |
|
|
}; |
|
|
}, |
|
|
}, |
|
|
created() { |
|
|
created() { |
|
|
this.initData(); |
|
|
this.initData(); |
|
|
@ -82,15 +106,15 @@ export default { |
|
|
initData() { |
|
|
initData() { |
|
|
request({ |
|
|
request({ |
|
|
// url: `/dc/system/event/dispatchEventList`, |
|
|
// url: `/dc/system/event/dispatchEventList`, |
|
|
url: '/dc/system/event/list', |
|
|
url: "/dc/system/event/list", |
|
|
method: "get", |
|
|
method: "get", |
|
|
params: this.searchData, |
|
|
params: this.searchData, |
|
|
}).then((result) => { |
|
|
}).then((result) => { |
|
|
if (result.code != 200) return Message.error(result?.msg); |
|
|
if (result.code != 200) return Message.error(result?.msg); |
|
|
this.total = result.total; |
|
|
this.total = result.total; |
|
|
result.rows.forEach(it => { |
|
|
result.rows.forEach((it) => { |
|
|
it.stringDirection = directionMapping[it.direction] || it.direction; |
|
|
it.stringDirection = directionMapping[it.direction] || it.direction; |
|
|
}) |
|
|
}); |
|
|
this.data = result.rows; |
|
|
this.data = result.rows; |
|
|
}); |
|
|
}); |
|
|
}, |
|
|
}, |
|
|
@ -126,7 +150,7 @@ export default { |
|
|
}); |
|
|
}); |
|
|
}, |
|
|
}, |
|
|
lastBtnClick(id) { |
|
|
lastBtnClick(id) { |
|
|
console.log(id) |
|
|
console.log(id); |
|
|
this.eventDispatchDialogVisible = true; |
|
|
this.eventDispatchDialogVisible = true; |
|
|
this.eventId = id; |
|
|
this.eventId = id; |
|
|
}, |
|
|
}, |
|
|
@ -137,8 +161,10 @@ export default { |
|
|
let dStakeMark = data.stakeMark; |
|
|
let dStakeMark = data.stakeMark; |
|
|
let dendStakeMark = data.endStakeMark; |
|
|
let dendStakeMark = data.endStakeMark; |
|
|
|
|
|
|
|
|
let stakeMark = dStakeMark[0] ? `K${dStakeMark[0]}+${dStakeMark[1]}` : ''; |
|
|
let stakeMark = dStakeMark[0] ? `K${dStakeMark[0]}+${dStakeMark[1]}` : ""; |
|
|
let endStakeMark = dendStakeMark[0] ? `K${dendStakeMark[0]}+${dendStakeMark[1]}` : ''; |
|
|
let endStakeMark = dendStakeMark[0] |
|
|
|
|
|
? `K${dendStakeMark[0]}+${dendStakeMark[1]}` |
|
|
|
|
|
: ""; |
|
|
|
|
|
|
|
|
this.searchData = { |
|
|
this.searchData = { |
|
|
...this.searchData, |
|
|
...this.searchData, |
|
|
@ -155,12 +181,12 @@ export default { |
|
|
handleClose() { |
|
|
handleClose() { |
|
|
this.eventDetailDialogVisible = false; |
|
|
this.eventDetailDialogVisible = false; |
|
|
this.eventDispatchDialogVisible = false; |
|
|
this.eventDispatchDialogVisible = false; |
|
|
} |
|
|
}, |
|
|
} |
|
|
}, |
|
|
} |
|
|
}; |
|
|
</script> |
|
|
</script> |
|
|
|
|
|
|
|
|
<style lang='scss' scoped> |
|
|
<style lang="scss" scoped> |
|
|
.RoadNetworkMonitoring { |
|
|
.RoadNetworkMonitoring { |
|
|
padding: 21px; |
|
|
padding: 21px; |
|
|
|
|
|
|
|
|
@ -175,7 +201,6 @@ export default { |
|
|
// justify-content: flex-end; |
|
|
// justify-content: flex-end; |
|
|
justify-content: space-between; |
|
|
justify-content: space-between; |
|
|
.refresh-btn { |
|
|
.refresh-btn { |
|
|
|
|
|
|
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
|
zhangzhang
12 months ago