Joe
1 year ago
21 changed files with 15624 additions and 571 deletions
File diff suppressed because it is too large
|
After Width: | Height: | Size: 1.1 KiB |
|
Before Width: | Height: | Size: 270 B |
|
Before Width: | Height: | Size: 1.1 KiB |
|
Before Width: | Height: | Size: 1.1 KiB |
@ -0,0 +1,39 @@ |
|||
import * as PresetFormItems from "@screen/pages/control/event/event/FormEvent/PresetFormItems.js"; |
|||
|
|||
export const formConfigList = [ |
|||
{ |
|||
label: "事故类型:", |
|||
key: "key13", |
|||
type: "select", |
|||
}, |
|||
PresetFormItems.trafficAccidentType, |
|||
PresetFormItems.callPolicePersonName, |
|||
PresetFormItems.callPolicePersonPhone, |
|||
PresetFormItems.route, |
|||
PresetFormItems.direction, |
|||
PresetFormItems.eventLevel, |
|||
PresetFormItems.station, |
|||
PresetFormItems.locationMode, |
|||
PresetFormItems.pressure, |
|||
PresetFormItems.eventHappenTime, |
|||
PresetFormItems.aEstimatedReleaseTime, |
|||
PresetFormItems.weatherConditions, |
|||
PresetFormItems.effect, |
|||
PresetFormItems.isMaintenanceAccident, |
|||
PresetFormItems.isCongestionAhead, |
|||
PresetFormItems.isCurveRoad, |
|||
PresetFormItems.isInTunnel, |
|||
PresetFormItems.isArrives, |
|||
PresetFormItems.isForkRoad, |
|||
PresetFormItems.emptyLine, |
|||
PresetFormItems.trafficPolicePhone, |
|||
{ |
|||
...PresetFormItems.emptyLine, |
|||
key: "096993", |
|||
}, |
|||
PresetFormItems.wreckerCalls, |
|||
PresetFormItems.spillName, |
|||
PresetFormItems.ownerPhone, |
|||
PresetFormItems.laneOccupancy, |
|||
PresetFormItems.vehicleCondition, |
|||
]; |
|||
@ -0,0 +1,72 @@ |
|||
<template> |
|||
<Dialog v-model="modelVisible" title="修改事件信息"> |
|||
<div class="EditEventInformationDialog"> |
|||
<Form class="form" :formList="formConfigList" column="2" labelWidth="120px" /> |
|||
|
|||
<div class="footer"> |
|||
<Button>保存</Button> |
|||
<Button style="background: #C9C9C9;">关闭</Button> |
|||
</div> |
|||
</div> |
|||
</Dialog> |
|||
</template> |
|||
|
|||
<script> |
|||
import Dialog from "@screen/components/Dialog/index"; |
|||
import Form from '@screen/components/FormConfig'; |
|||
import Button from '@screen/components/Buttons/Button.vue'; |
|||
|
|||
import { formConfigList } from "./data.js" |
|||
|
|||
export default { |
|||
name: 'EditEventInformationDialog', |
|||
components: { |
|||
Dialog, |
|||
Form, |
|||
Button |
|||
}, |
|||
model: { |
|||
prop: 'visible', |
|||
event: 'close' |
|||
}, |
|||
props: { |
|||
visible: Boolean |
|||
}, |
|||
data() { |
|||
return { |
|||
formConfigList |
|||
} |
|||
}, |
|||
computed: { |
|||
modelVisible: { |
|||
get() { |
|||
return this.visible; |
|||
}, |
|||
set(val) { |
|||
this.$emit('close', val) |
|||
} |
|||
}, |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang='scss' scoped> |
|||
.EditEventInformationDialog { |
|||
gap: 9px; |
|||
width: 810px; |
|||
height: 771px; |
|||
display: flex; |
|||
flex-direction: column; |
|||
|
|||
.form { |
|||
flex: 1; |
|||
overflow-y: auto; |
|||
} |
|||
|
|||
.footer { |
|||
display: flex; |
|||
justify-content: end; |
|||
gap: 15px; |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,34 @@ |
|||
import * as PresetFormItems from "@screen/pages/control/event/event/FormEvent/PresetFormItems.js"; |
|||
|
|||
export const formConfigList = [ |
|||
{ |
|||
label: "事故类型:", |
|||
key: "key13", |
|||
type: "select", |
|||
}, |
|||
PresetFormItems.trafficAccidentType, |
|||
PresetFormItems.eventLevel, |
|||
PresetFormItems.callPolicePersonName, |
|||
PresetFormItems.callPolicePersonPhone, |
|||
PresetFormItems.locationMode, |
|||
PresetFormItems.route, |
|||
PresetFormItems.direction, |
|||
PresetFormItems.station, |
|||
PresetFormItems.eventHappenTime, |
|||
PresetFormItems.aEstimatedReleaseTime, |
|||
PresetFormItems.pressure, |
|||
PresetFormItems.weatherConditions, |
|||
PresetFormItems.effect, |
|||
PresetFormItems.isArrives, |
|||
PresetFormItems.isMaintenanceAccident, |
|||
PresetFormItems.isCongestionAhead, |
|||
PresetFormItems.isForkRoad, |
|||
PresetFormItems.isCurveRoad, |
|||
PresetFormItems.isInTunnel, |
|||
PresetFormItems.trafficPolicePhone, |
|||
PresetFormItems.wreckerCalls, |
|||
PresetFormItems.spillName, |
|||
PresetFormItems.ownerPhone, |
|||
PresetFormItems.laneOccupancy, |
|||
PresetFormItems.vehicleCondition, |
|||
]; |
|||
@ -0,0 +1,72 @@ |
|||
<template> |
|||
<Dialog v-model="modelVisible" title="修改事件信息"> |
|||
<div class="EditEventInformationDialog"> |
|||
<Form class="form" :formList="formConfigList" labelWidth="120px" /> |
|||
|
|||
<div class="footer"> |
|||
<Button>保存</Button> |
|||
<Button style="background: #C9C9C9;">关闭</Button> |
|||
</div> |
|||
</div> |
|||
</Dialog> |
|||
</template> |
|||
|
|||
<script> |
|||
import Dialog from "@screen/components/Dialog/index"; |
|||
import Form from '@screen/components/FormConfig'; |
|||
import Button from '@screen/components/Buttons/Button.vue'; |
|||
|
|||
import { formConfigList } from "./data.js" |
|||
|
|||
export default { |
|||
name: 'EditEventInformationDialog', |
|||
components: { |
|||
Dialog, |
|||
Form, |
|||
Button |
|||
}, |
|||
model: { |
|||
prop: 'visible', |
|||
event: 'close' |
|||
}, |
|||
props: { |
|||
visible: Boolean |
|||
}, |
|||
data() { |
|||
return { |
|||
formConfigList |
|||
} |
|||
}, |
|||
computed: { |
|||
modelVisible: { |
|||
get() { |
|||
return this.visible; |
|||
}, |
|||
set(val) { |
|||
this.$emit('close', val) |
|||
} |
|||
}, |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang='scss' scoped> |
|||
.EditEventInformationDialog { |
|||
gap: 9px; |
|||
width: 1050px; |
|||
height: 810px; |
|||
display: flex; |
|||
flex-direction: column; |
|||
|
|||
.form { |
|||
flex: 1; |
|||
overflow-y: auto; |
|||
} |
|||
|
|||
.footer { |
|||
display: flex; |
|||
justify-content: end; |
|||
gap: 15px; |
|||
} |
|||
} |
|||
</style> |
|||
@ -1,119 +1,123 @@ |
|||
<template> |
|||
<Card class='EventInformation' title="事件信息"> |
|||
<template #title-suffix> |
|||
<ButtonGradient class="title-button"> |
|||
搜索 |
|||
</ButtonGradient> |
|||
<ButtonGradient class="title-button"> |
|||
编写 |
|||
</ButtonGradient> |
|||
</template> |
|||
<Card class='EventInformation' title="事件信息"> |
|||
<template #title-suffix> |
|||
<ButtonGradient class="title-button"> |
|||
搜索 |
|||
</ButtonGradient> |
|||
<ButtonGradient class="title-button" @click.native="editEventInformationDialogVisible = true"> |
|||
编写 |
|||
</ButtonGradient> |
|||
</template> |
|||
|
|||
<Descriptions :list="list" style="gap: 15px;" /> |
|||
<Descriptions :list="list" style="gap: 15px;" /> |
|||
|
|||
<div class="road-lane"> |
|||
<div v-for="i in 11"> |
|||
<img v-if="i != 6" src="./images/normal.svg"> |
|||
</div> |
|||
</div> |
|||
<div class="bottom-info"> |
|||
<div class="tag">拥堵五级事件</div> |
|||
</div> |
|||
</Card> |
|||
<div class="road-lane"> |
|||
<div v-for="i in 11"> |
|||
<img v-if="i != 6" src="./images/normal.svg"> |
|||
</div> |
|||
</div> |
|||
<div class="bottom-info"> |
|||
<div class="tag">拥堵五级事件</div> |
|||
</div> |
|||
|
|||
<EditEventInformationDialog v-model="editEventInformationDialogVisible" /> |
|||
</Card> |
|||
</template> |
|||
|
|||
<script> |
|||
import Card from "@screen/components/Card2/Card.vue"; |
|||
import ButtonGradient from '@screen/components/Buttons/ButtonGradient.vue'; |
|||
import Descriptions from '@screen/components/Descriptions.vue'; |
|||
import EditEventInformationDialog from "./components/EditEventInformationDialog/index" |
|||
|
|||
export default { |
|||
name: 'EventInformation', |
|||
components: { |
|||
Card, |
|||
ButtonGradient, |
|||
Descriptions |
|||
}, |
|||
data() { |
|||
return { |
|||
|
|||
list: [ |
|||
{ |
|||
label: '情报时间', |
|||
text: '2024-01-03 14:00:21', |
|||
gridColumn: 2 |
|||
}, |
|||
{ |
|||
label: '情报来源', |
|||
text: '96659', |
|||
gridColumn: 2 |
|||
}, |
|||
{ |
|||
label: '事件类型', |
|||
text: '交通事故', |
|||
}, |
|||
{ |
|||
label: '所属路线', |
|||
text: 'G34济菏高速', |
|||
}, |
|||
{ |
|||
label: '道路方向', |
|||
text: '菏泽方向', |
|||
}, |
|||
{ |
|||
label: '桩号：', |
|||
text: "K266+001", |
|||
} |
|||
] |
|||
} |
|||
} |
|||
name: 'EventInformation', |
|||
components: { |
|||
Card, |
|||
ButtonGradient, |
|||
Descriptions, |
|||
EditEventInformationDialog |
|||
}, |
|||
data() { |
|||
return { |
|||
list: [ |
|||
{ |
|||
label: '情报时间', |
|||
text: '2024-01-03 14:00:21', |
|||
gridColumn: 2 |
|||
}, |
|||
{ |
|||
label: '情报来源', |
|||
text: '96659', |
|||
gridColumn: 2 |
|||
}, |
|||
{ |
|||
label: '事件类型', |
|||
text: '交通事故', |
|||
}, |
|||
{ |
|||
label: '所属路线', |
|||
text: 'G34济菏高速', |
|||
}, |
|||
{ |
|||
label: '道路方向', |
|||
text: '菏泽方向', |
|||
}, |
|||
{ |
|||
label: '桩号：', |
|||
text: "K266+001", |
|||
} |
|||
], |
|||
editEventInformationDialogVisible: false |
|||
} |
|||
}, |
|||
} |
|||
</script> |
|||
|
|||
<style lang='scss' scoped> |
|||
.EventInformation { |
|||
::v-deep { |
|||
>.content { |
|||
display: flex; |
|||
flex-direction: column; |
|||
justify-content: space-between; |
|||
gap: 12px; |
|||
} |
|||
} |
|||
::v-deep { |
|||
>.content { |
|||
display: flex; |
|||
flex-direction: column; |
|||
justify-content: space-between; |
|||
gap: 12px; |
|||
} |
|||
} |
|||
|
|||
.road-lane { |
|||
background-image: url(./images/lane.svg); |
|||
flex: 1; |
|||
background-repeat: no-repeat; |
|||
background-size: 100% 100%; |
|||
display: grid; |
|||
grid-template-columns: 1.2fr 1fr 1fr 1fr 1fr 0.6fr 1fr 1fr 1fr 1fr 1.2fr; |
|||
.road-lane { |
|||
background-image: url(./images/lane.svg); |
|||
flex: 1; |
|||
background-repeat: no-repeat; |
|||
background-size: 100% 100%; |
|||
display: grid; |
|||
grid-template-columns: 1.2fr 1fr 1fr 1fr 1fr 0.6fr 1fr 1fr 1fr 1fr 1.2fr; |
|||
|
|||
>div { |
|||
display: flex; |
|||
align-items: end; |
|||
padding-bottom: 18px; |
|||
justify-content: center; |
|||
} |
|||
} |
|||
>div { |
|||
display: flex; |
|||
align-items: end; |
|||
padding-bottom: 18px; |
|||
justify-content: center; |
|||
} |
|||
} |
|||
|
|||
.bottom-info { |
|||
display: flex; |
|||
gap: 9px; |
|||
.bottom-info { |
|||
display: flex; |
|||
gap: 9px; |
|||
|
|||
.tag { |
|||
padding: 3px 6px; |
|||
height: 24px; |
|||
background: rgba(245, 80, 80, 0.4); |
|||
border-radius: 2px; |
|||
border: 1px solid #F55050; |
|||
.tag { |
|||
padding: 3px 6px; |
|||
height: 24px; |
|||
background: rgba(245, 80, 80, 0.4); |
|||
border-radius: 2px; |
|||
border: 1px solid #F55050; |
|||
|
|||
font-size: 12px; |
|||
font-family: Source Han Sans SC, Source Han Sans SC; |
|||
font-weight: 400; |
|||
color: #F55050; |
|||
line-height: 14px; |
|||
} |
|||
} |
|||
font-size: 12px; |
|||
font-family: Source Han Sans SC, Source Han Sans SC; |
|||
font-weight: 400; |
|||
color: #F55050; |
|||
line-height: 14px; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
|
|||
Loading…
Reference in new issue