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> |
<template> |
||||
<Card class='EventInformation' title="事件信息"> |
<Card class='EventInformation' title="事件信息"> |
||||
<template #title-suffix> |
<template #title-suffix> |
||||
<ButtonGradient class="title-button"> |
<ButtonGradient class="title-button"> |
||||
搜索 |
搜索 |
||||
</ButtonGradient> |
</ButtonGradient> |
||||
<ButtonGradient class="title-button"> |
<ButtonGradient class="title-button" @click.native="editEventInformationDialogVisible = true"> |
||||
编写 |
编写 |
||||
</ButtonGradient> |
</ButtonGradient> |
||||
</template> |
</template> |
||||
|
|
||||
<Descriptions :list="list" style="gap: 15px;" /> |
<Descriptions :list="list" style="gap: 15px;" /> |
||||
|
|
||||
<div class="road-lane"> |
<div class="road-lane"> |
||||
<div v-for="i in 11"> |
<div v-for="i in 11"> |
||||
<img v-if="i != 6" src="./images/normal.svg"> |
<img v-if="i != 6" src="./images/normal.svg"> |
||||
</div> |
</div> |
||||
</div> |
</div> |
||||
<div class="bottom-info"> |
<div class="bottom-info"> |
||||
<div class="tag">拥堵五级事件</div> |
<div class="tag">拥堵五级事件</div> |
||||
</div> |
</div> |
||||
</Card> |
|
||||
|
<EditEventInformationDialog v-model="editEventInformationDialogVisible" /> |
||||
|
</Card> |
||||
</template> |
</template> |
||||
|
|
||||
<script> |
<script> |
||||
import Card from "@screen/components/Card2/Card.vue"; |
import Card from "@screen/components/Card2/Card.vue"; |
||||
import ButtonGradient from '@screen/components/Buttons/ButtonGradient.vue'; |
import ButtonGradient from '@screen/components/Buttons/ButtonGradient.vue'; |
||||
import Descriptions from '@screen/components/Descriptions.vue'; |
import Descriptions from '@screen/components/Descriptions.vue'; |
||||
|
import EditEventInformationDialog from "./components/EditEventInformationDialog/index" |
||||
|
|
||||
export default { |
export default { |
||||
name: 'EventInformation', |
name: 'EventInformation', |
||||
components: { |
components: { |
||||
Card, |
Card, |
||||
ButtonGradient, |
ButtonGradient, |
||||
Descriptions |
Descriptions, |
||||
}, |
EditEventInformationDialog |
||||
data() { |
}, |
||||
return { |
data() { |
||||
|
return { |
||||
list: [ |
list: [ |
||||
{ |
{ |
||||
label: '情报时间', |
label: '情报时间', |
||||
text: '2024-01-03 14:00:21', |
text: '2024-01-03 14:00:21', |
||||
gridColumn: 2 |
gridColumn: 2 |
||||
}, |
}, |
||||
{ |
{ |
||||
label: '情报来源', |
label: '情报来源', |
||||
text: '96659', |
text: '96659', |
||||
gridColumn: 2 |
gridColumn: 2 |
||||
}, |
}, |
||||
{ |
{ |
||||
label: '事件类型', |
label: '事件类型', |
||||
text: '交通事故', |
text: '交通事故', |
||||
}, |
}, |
||||
{ |
{ |
||||
label: '所属路线', |
label: '所属路线', |
||||
text: 'G34济菏高速', |
text: 'G34济菏高速', |
||||
}, |
}, |
||||
{ |
{ |
||||
label: '道路方向', |
label: '道路方向', |
||||
text: '菏泽方向', |
text: '菏泽方向', |
||||
}, |
}, |
||||
{ |
{ |
||||
label: '桩号：', |
label: '桩号：', |
||||
text: "K266+001", |
text: "K266+001", |
||||
} |
} |
||||
] |
], |
||||
} |
editEventInformationDialogVisible: false |
||||
} |
} |
||||
|
}, |
||||
} |
} |
||||
</script> |
</script> |
||||
|
|
||||
<style lang='scss' scoped> |
<style lang='scss' scoped> |
||||
.EventInformation { |
.EventInformation { |
||||
::v-deep { |
::v-deep { |
||||
>.content { |
>.content { |
||||
display: flex; |
display: flex; |
||||
flex-direction: column; |
flex-direction: column; |
||||
justify-content: space-between; |
justify-content: space-between; |
||||
gap: 12px; |
gap: 12px; |
||||
} |
} |
||||
} |
} |
||||
|
|
||||
.road-lane { |
.road-lane { |
||||
background-image: url(./images/lane.svg); |
background-image: url(./images/lane.svg); |
||||
flex: 1; |
flex: 1; |
||||
background-repeat: no-repeat; |
background-repeat: no-repeat; |
||||
background-size: 100% 100%; |
background-size: 100% 100%; |
||||
display: grid; |
display: grid; |
||||
grid-template-columns: 1.2fr 1fr 1fr 1fr 1fr 0.6fr 1fr 1fr 1fr 1fr 1.2fr; |
grid-template-columns: 1.2fr 1fr 1fr 1fr 1fr 0.6fr 1fr 1fr 1fr 1fr 1.2fr; |
||||
|
|
||||
>div { |
>div { |
||||
display: flex; |
display: flex; |
||||
align-items: end; |
align-items: end; |
||||
padding-bottom: 18px; |
padding-bottom: 18px; |
||||
justify-content: center; |
justify-content: center; |
||||
} |
} |
||||
} |
} |
||||
|
|
||||
.bottom-info { |
.bottom-info { |
||||
display: flex; |
display: flex; |
||||
gap: 9px; |
gap: 9px; |
||||
|
|
||||
.tag { |
.tag { |
||||
padding: 3px 6px; |
padding: 3px 6px; |
||||
height: 24px; |
height: 24px; |
||||
background: rgba(245, 80, 80, 0.4); |
background: rgba(245, 80, 80, 0.4); |
||||
border-radius: 2px; |
border-radius: 2px; |
||||
border: 1px solid #F55050; |
border: 1px solid #F55050; |
||||
|
|
||||
font-size: 12px; |
font-size: 12px; |
||||
font-family: Source Han Sans SC, Source Han Sans SC; |
font-family: Source Han Sans SC, Source Han Sans SC; |
||||
font-weight: 400; |
font-weight: 400; |
||||
color: #F55050; |
color: #F55050; |
||||
line-height: 14px; |
line-height: 14px; |
||||
} |
} |
||||
} |
} |
||||
} |
} |
||||
</style> |
</style> |
||||
|
|||||
Loading…
Reference in new issue