hui
1 year ago
28 changed files with 1400 additions and 539 deletions
@ -1,5 +1,6 @@ |
|||
{ |
|||
"dependencies": { |
|||
"flv.js": "^1.6.2" |
|||
"flv.js": "^1.6.2", |
|||
"vue-slick-carousel": "^1.0.6" |
|||
} |
|||
} |
|||
|
|||
@ -0,0 +1,27 @@ |
|||
<template> |
|||
<ElSelect v-bind="$attrs" v-on="$listeners"> |
|||
<ElOption v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> |
|||
<component :is="optionComponent" /> |
|||
</ElOption> |
|||
</ElSelect> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: 'ElSelect_', |
|||
props: { |
|||
options: { |
|||
type: Array, |
|||
default: () => [] |
|||
}, |
|||
optionComponent: { |
|||
type: Object, |
|||
default: null |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang='scss' scoped> |
|||
.ElSelect {} |
|||
</style> |
|||
@ -0,0 +1,43 @@ |
|||
<template> |
|||
<div class='MultipleLabelItem'> |
|||
<div v-for="item in options" class="item"> |
|||
<span v-if="item.prefix" :style="item.prefix.style">{{ item.prefix.text }}</span> |
|||
<component class="unknown" :is="getComponent(item.type)" v-bind="getBindData(item)" v-model="formData[item.key]" /> |
|||
<span v-if="item.suffix" :style="item.suffix.style">{{ item.suffix.text }}</span> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: 'MultipleLabelItem', |
|||
inject: ['getComponent', 'getBindData'], |
|||
props: { |
|||
options: { |
|||
type: Array, |
|||
default: () => [] |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
formData: {} |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang='scss' scoped> |
|||
.MultipleLabelItem { |
|||
display: flex; |
|||
gap: 9px; |
|||
|
|||
.item { |
|||
display: flex; |
|||
gap: 6px; |
|||
|
|||
>.unknown { |
|||
flex: 1; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
|
Before Width: | Height: | Size: 281 B |
|
After Width: | Height: | Size: 324 B |
|
After Width: | Height: | Size: 441 B |
|
After Width: | Height: | Size: 292 B |
@ -0,0 +1,119 @@ |
|||
<template> |
|||
<Dialog v-model="visibleModel" title="修改值班信息表"> |
|||
<div class="ModifyDutyInformationTable"> |
|||
<div class="search"> |
|||
<Form :formList="formList" :rules="{ '桩号:': [{ required: true, message: '年龄不能为空' }] }" column="2" |
|||
style="flex: 1;" /> |
|||
|
|||
<ButtonGradient> |
|||
<template #prefix> |
|||
<img src="@screen/images/form/search.svg" /> |
|||
</template> |
|||
刷新 |
|||
</ButtonGradient> |
|||
</div> |
|||
<div class="body"> |
|||
<SelectList v-for="item in list" :data="item" /> |
|||
</div> |
|||
<div class="bottom"> |
|||
<Button>确认</Button> |
|||
<Button :style="{ backgroundColor: '#C9C9C9' }"> 取消</Button> |
|||
</div> |
|||
</div> |
|||
</Dialog> |
|||
</template> |
|||
|
|||
<script> |
|||
import Dialog from "@screen/components/Dialog/index.vue"; |
|||
import Button from "@screen/components/Buttons/Button.vue" |
|||
import ButtonGradient from '@screen/components/Buttons/ButtonGradient.vue'; |
|||
import Form from '@screen/components/FormConfig'; |
|||
|
|||
import SelectList from "./../../../components/SelectList.vue" |
|||
|
|||
export default { |
|||
name: 'ModifyDutyInformationTable', |
|||
components: { |
|||
Dialog, |
|||
Button, |
|||
ButtonGradient, |
|||
SelectList, |
|||
Form |
|||
}, |
|||
props: { |
|||
visible: { |
|||
type: Boolean, |
|||
default: false |
|||
} |
|||
}, |
|||
emit: ['close'], |
|||
data() { |
|||
return { |
|||
formList: [{ |
|||
label: "值班时间:", |
|||
key: "事件源", |
|||
type: "timePicker", |
|||
}, |
|||
{ |
|||
label: "操作人员:", |
|||
key: "桩号:", |
|||
type: "input", |
|||
}], |
|||
list: Array.from({ length: 15 }).map(item => ({ |
|||
title: "123456", |
|||
list: Array.from({ length: 15 }).map((_, index) => ({ |
|||
name: index, |
|||
phone: "12345678901" |
|||
})) |
|||
})) |
|||
} |
|||
}, |
|||
computed: { |
|||
visibleModel: { |
|||
get() { |
|||
return this.visible |
|||
}, |
|||
set(bool) { |
|||
this.$emit('close', bool); |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang='scss' scoped> |
|||
.ModifyDutyInformationTable { |
|||
width: 947px; |
|||
height: 658px; |
|||
color: #fff; |
|||
display: flex; |
|||
flex-direction: column; |
|||
gap: 15px; |
|||
|
|||
.search { |
|||
display: flex; |
|||
gap: 24px; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
|
|||
} |
|||
|
|||
.body { |
|||
display: flex; |
|||
gap: 9px; |
|||
height: 100%; |
|||
overflow-x: auto; |
|||
overflow-y: hidden; |
|||
} |
|||
|
|||
.bottom { |
|||
display: flex; |
|||
gap: 15px; |
|||
justify-content: end; |
|||
|
|||
>div { |
|||
width: 96px; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
|
After Width: | Height: | Size: 655 B |
@ -1,150 +1,150 @@ |
|||
<template> |
|||
<Card class='ReleaseInformation' title="信息发布"> |
|||
<Form :formList="formList" column="1"> |
|||
<template #platform="{ formData, data }"> |
|||
<CheckboxGroup :list="checkboxList" v-model="formData[data.key]"> |
|||
<template v-for="item in checkboxList" #[item.key]="{ data }"> |
|||
<div class="checkbox-content"> |
|||
<img :src="require(`./images/${item.key}.svg`)" /> |
|||
{{ data.label }} |
|||
</div> |
|||
</template> |
|||
</CheckboxGroup> |
|||
</template> |
|||
</Form> |
|||
<Card class='ReleaseInformation' title="信息发布"> |
|||
<Form :formList="formList" column="1"> |
|||
<template #platform="{ formData, data }"> |
|||
<CheckboxGroup :options="checkboxList" v-model="formData[data.key]"> |
|||
<template v-for="item in checkboxList" #[item.key]="{ data }"> |
|||
<div class="checkbox-content"> |
|||
<img :src="require(`./images/${item.key}.svg`)" /> |
|||
{{ data.label }} |
|||
</div> |
|||
</template> |
|||
</CheckboxGroup> |
|||
</template> |
|||
</Form> |
|||
|
|||
<div class="line"></div> |
|||
<div class="line"></div> |
|||
|
|||
<Descriptions :list="list" style="flex: 1;" column="1" titleStyle="align-self: flex-start;"> |
|||
<template #content-informationBoard> |
|||
<div class="informationBoard-content"> |
|||
<div>暂无情报板推荐发布信息</div> |
|||
<img src="./images/add.svg" /> |
|||
</div> |
|||
</template> |
|||
</Descriptions> |
|||
<Descriptions :list="list" style="flex: 1;" column="1" titleStyle="align-self: flex-start;"> |
|||
<template #content-informationBoard> |
|||
<div class="informationBoard-content"> |
|||
<div>暂无情报板推荐发布信息</div> |
|||
<img src="./images/add.svg" /> |
|||
</div> |
|||
</template> |
|||
</Descriptions> |
|||
|
|||
<div class="bottom"> |
|||
<ButtonGradient class="title-button special-button"> |
|||
一键发布 |
|||
</ButtonGradient> |
|||
<ButtonGradient class="title-button special-button"> |
|||
发布预案 |
|||
</ButtonGradient> |
|||
</div> |
|||
</Card> |
|||
<div class="bottom"> |
|||
<ButtonGradient class="title-button special-button"> |
|||
一键发布 |
|||
</ButtonGradient> |
|||
<ButtonGradient class="title-button special-button"> |
|||
发布预案 |
|||
</ButtonGradient> |
|||
</div> |
|||
</Card> |
|||
</template> |
|||
|
|||
<script> |
|||
import Card from "@screen/components/Card2/Card.vue"; |
|||
import ButtonGradient from '@screen/components/Buttons/ButtonGradient.vue'; |
|||
import Form from '@screen/components/FormConfig'; |
|||
import CheckboxGroup from '@screen/components/CheckboxGroup/index.vue'; |
|||
import CheckboxGroup from '@screen/components/FormConfig/components/ElCheckboxGroup.vue'; |
|||
import Descriptions from '@screen/components/Descriptions.vue'; |
|||
|
|||
export default { |
|||
name: 'ReleaseInformation', |
|||
components: { |
|||
Card, |
|||
ButtonGradient, |
|||
CheckboxGroup, |
|||
Form, |
|||
Descriptions |
|||
}, |
|||
data() { |
|||
return { |
|||
list: [ |
|||
{ |
|||
label: '情报板', |
|||
key: "informationBoard", |
|||
gridColumn: 1 |
|||
} |
|||
], |
|||
checkboxValues: [], |
|||
checkboxList: [ |
|||
{ key: 'weChat', label: '微信' }, |
|||
{ key: 'message', label: '短信' }, |
|||
{ key: 'website', label: '网站' }, |
|||
{ key: 'weibo', label: '新浪' }, |
|||
], |
|||
formList: [{ |
|||
label: "发布内容:", |
|||
key: "content", |
|||
type: "input", |
|||
options: { |
|||
type: "textarea", |
|||
autosize: true, |
|||
maxlength: 200, |
|||
autosize: { minRows: 9, maxRows: 9 }, |
|||
showWordLimit: true |
|||
} |
|||
}, |
|||
{ |
|||
label: "发布平台:", |
|||
key: "platform", |
|||
type: "input", |
|||
default: [] |
|||
}], |
|||
} |
|||
} |
|||
name: 'ReleaseInformation', |
|||
components: { |
|||
Card, |
|||
ButtonGradient, |
|||
CheckboxGroup, |
|||
Form, |
|||
Descriptions |
|||
}, |
|||
data() { |
|||
return { |
|||
list: [ |
|||
{ |
|||
label: '情报板', |
|||
key: "informationBoard", |
|||
gridColumn: 1 |
|||
} |
|||
], |
|||
checkboxValues: [], |
|||
checkboxList: [ |
|||
{ key: 'weChat', label: '微信' }, |
|||
{ key: 'message', label: '短信' }, |
|||
{ key: 'website', label: '网站' }, |
|||
{ key: 'weibo', label: '新浪' }, |
|||
], |
|||
formList: [{ |
|||
label: "发布内容:", |
|||
key: "content", |
|||
type: "input", |
|||
options: { |
|||
type: "textarea", |
|||
autosize: true, |
|||
maxlength: 200, |
|||
autosize: { minRows: 9, maxRows: 9 }, |
|||
showWordLimit: true |
|||
} |
|||
}, |
|||
{ |
|||
label: "发布平台:", |
|||
key: "platform", |
|||
type: "input", |
|||
default: [] |
|||
}], |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang='scss' scoped> |
|||
.ReleaseInformation { |
|||
|
|||
::v-deep { |
|||
.content { |
|||
display: flex; |
|||
flex-direction: column; |
|||
justify-content: space-between; |
|||
gap: 18px; |
|||
} |
|||
} |
|||
::v-deep { |
|||
.content { |
|||
display: flex; |
|||
flex-direction: column; |
|||
justify-content: space-between; |
|||
gap: 18px; |
|||
} |
|||
} |
|||
|
|||
.informationBoard-content { |
|||
width: 100%; |
|||
height: 100%; |
|||
display: flex; |
|||
align-items: start; |
|||
gap: 6px; |
|||
.informationBoard-content { |
|||
width: 100%; |
|||
height: 100%; |
|||
display: flex; |
|||
align-items: start; |
|||
gap: 6px; |
|||
|
|||
>div { |
|||
flex: 1; |
|||
font-size: 16px; |
|||
font-family: PingFang SC, PingFang SC; |
|||
font-weight: 400; |
|||
color: rgba(255, 255, 255, .6); |
|||
line-height: 19px; |
|||
letter-spacing: 1px; |
|||
} |
|||
>div { |
|||
flex: 1; |
|||
font-size: 16px; |
|||
font-family: PingFang SC, PingFang SC; |
|||
font-weight: 400; |
|||
color: rgba(255, 255, 255, .6); |
|||
line-height: 19px; |
|||
letter-spacing: 1px; |
|||
} |
|||
|
|||
img { |
|||
cursor: pointer; |
|||
} |
|||
} |
|||
img { |
|||
cursor: pointer; |
|||
} |
|||
} |
|||
|
|||
.checkbox-content { |
|||
display: flex; |
|||
align-items: center; |
|||
gap: 3px; |
|||
} |
|||
.checkbox-content { |
|||
display: flex; |
|||
align-items: center; |
|||
gap: 3px; |
|||
} |
|||
|
|||
.line { |
|||
background: linear-gradient(to left, transparent 0%, transparent 24%, #3DE8FF 24%, #3DE8FF 100%); |
|||
background-size: 10px 1px; |
|||
background-repeat: repeat-x; |
|||
height: 1px; |
|||
} |
|||
.line { |
|||
background: linear-gradient(to left, transparent 0%, transparent 24%, #3DE8FF 24%, #3DE8FF 100%); |
|||
background-size: 10px 1px; |
|||
background-repeat: repeat-x; |
|||
height: 1px; |
|||
} |
|||
|
|||
.bottom { |
|||
display: flex; |
|||
gap: 9px; |
|||
justify-content: end; |
|||
.bottom { |
|||
display: flex; |
|||
gap: 9px; |
|||
justify-content: end; |
|||
|
|||
.special-button { |
|||
padding: 0 9px; |
|||
} |
|||
} |
|||
.special-button { |
|||
padding: 0 9px; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
|
|||
@ -1,65 +1,65 @@ |
|||
<template> |
|||
<Card class='TrafficControl' title="交通管制"> |
|||
<RadioGroup :list="radioList" value="mainlineControl" /> |
|||
<Card class='TrafficControl' title="交通管制"> |
|||
<RadioGroup :options="radioList" value="mainlineControl" /> |
|||
|
|||
<div class="bottom"> |
|||
<ButtonGradient class="title-button special-button" |
|||
style="background: linear-gradient(180deg, #E94D4E 0%, #FF195E 100%);"> |
|||
封闭 |
|||
</ButtonGradient> |
|||
<ButtonGradient class="title-button special-button" style=" |
|||
<div class="bottom"> |
|||
<ButtonGradient class="title-button special-button" |
|||
style="background: linear-gradient(180deg, #E94D4E 0%, #FF195E 100%);"> |
|||
封闭 |
|||
</ButtonGradient> |
|||
<ButtonGradient class="title-button special-button" style=" |
|||
background: linear-gradient(82deg, #FFCD48 0%, #FE861E 100%);"> |
|||
限行 |
|||
</ButtonGradient> |
|||
</div> |
|||
</Card> |
|||
限行 |
|||
</ButtonGradient> |
|||
</div> |
|||
</Card> |
|||
</template> |
|||
|
|||
<script> |
|||
import Card from "@screen/components/Card2/Card.vue"; |
|||
import RadioGroup from '@screen/components/RadioGroup/index.vue'; |
|||
import RadioGroup from '@screen/components/FormConfig/components/RadioGroup/index.vue'; |
|||
import ButtonGradient from '@screen/components/Buttons/ButtonGradient.vue'; |
|||
|
|||
export default { |
|||
name: 'TrafficControl', |
|||
components: { |
|||
Card, |
|||
RadioGroup, |
|||
ButtonGradient |
|||
}, |
|||
data() { |
|||
return { |
|||
radioList: [ |
|||
{ key: 'mainlineControl', label: '主线管制' }, |
|||
{ key: 'tollboothControl', label: '收费站管制' }, |
|||
{ key: 'serviceAreaControl', label: '服务区管制' }, |
|||
{ key: 'hubInterchangeControl', label: '枢纽立交管制' }, |
|||
{ key: 'otherControls', label: '其他管制' }, |
|||
] |
|||
} |
|||
} |
|||
name: 'TrafficControl', |
|||
components: { |
|||
Card, |
|||
RadioGroup, |
|||
ButtonGradient |
|||
}, |
|||
data() { |
|||
return { |
|||
radioList: [ |
|||
{ key: 'mainlineControl', label: '主线管制' }, |
|||
{ key: 'tollboothControl', label: '收费站管制' }, |
|||
{ key: 'serviceAreaControl', label: '服务区管制' }, |
|||
{ key: 'hubInterchangeControl', label: '枢纽立交管制' }, |
|||
{ key: 'otherControls', label: '其他管制' }, |
|||
] |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang='scss' scoped> |
|||
.TrafficControl { |
|||
::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; |
|||
} |
|||
} |
|||
|
|||
.bottom { |
|||
display: flex; |
|||
gap: 9px; |
|||
justify-content: end; |
|||
.bottom { |
|||
display: flex; |
|||
gap: 9px; |
|||
justify-content: end; |
|||
|
|||
.special-button { |
|||
padding: 0 24px; |
|||
} |
|||
} |
|||
.special-button { |
|||
padding: 0 24px; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
|
|||
|
After Width: | Height: | Size: 1.7 KiB |
@ -0,0 +1,112 @@ |
|||
<template> |
|||
<div class="Carousel"> |
|||
<img src="./images/arrow.svg" @click="prevSlide" class="arrow" /> |
|||
|
|||
<VueSlickCarousel v-bind="settings" ref="CarouselRef" class="vueSlickCarousel"> |
|||
<div v-for="(item, index) in carouselItems" :key="index" class="item"> |
|||
<img :src="require(`@screen/images/${item.imageURL}`)" style="height: 100%"> |
|||
</div> |
|||
</VueSlickCarousel> |
|||
|
|||
<img src="./images/arrow.svg" @click="nextSlide" class="arrow" /> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
|
|||
import VueSlickCarousel from 'vue-slick-carousel' |
|||
import 'vue-slick-carousel/dist/vue-slick-carousel.css' |
|||
// optional style for arrows & dots |
|||
import 'vue-slick-carousel/dist/vue-slick-carousel-theme.css' |
|||
|
|||
export default { |
|||
name: "Carousel", |
|||
components: { VueSlickCarousel }, |
|||
data() { |
|||
return { |
|||
carouselItems: [ |
|||
{ |
|||
"imageURL": "shareWith/message-active.svg" |
|||
}, |
|||
{ |
|||
"imageURL": "shareWith/message.svg" |
|||
}, |
|||
{ |
|||
"imageURL": "shareWith/phone-active.svg" |
|||
}, |
|||
{ |
|||
"imageURL": "shareWith/phone.svg" |
|||
}, |
|||
{ |
|||
"imageURL": "shareWith/website-active.svg" |
|||
}, |
|||
{ |
|||
"imageURL": "shareWith/website.svg" |
|||
}, |
|||
{ |
|||
"imageURL": "shareWith/weChat-active.svg" |
|||
}, |
|||
{ |
|||
"imageURL": "shareWith/weChat-active.svg" |
|||
} |
|||
], |
|||
settings: { |
|||
infinite: true, |
|||
arrows: false, |
|||
speed: 600, |
|||
slidesToShow: 3, |
|||
slidesToScroll: 1, |
|||
autoplay: true, |
|||
autoplaySpeed: 1800, |
|||
}, |
|||
} |
|||
}, |
|||
methods: { |
|||
prevSlide() { |
|||
this.$refs.CarouselRef.prev() |
|||
}, |
|||
nextSlide() { |
|||
this.$refs.CarouselRef.next() |
|||
}, |
|||
}, |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.Carousel { |
|||
width: 100%; |
|||
overflow: hidden; |
|||
display: flex; |
|||
gap: 9px; |
|||
|
|||
.vueSlickCarousel { |
|||
flex: 1; |
|||
overflow: hidden; |
|||
|
|||
::v-deep { |
|||
.slick-list { |
|||
height: 100%; |
|||
|
|||
div { |
|||
height: 100%; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.item { |
|||
img { |
|||
height: 100%; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.arrow { |
|||
cursor: pointer; |
|||
width: 15px; |
|||
|
|||
&:first-child { |
|||
transform: rotate(-180deg) |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -1,26 +0,0 @@ |
|||
<template> |
|||
<ElInput class='FormInput' /> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: 'FormInput', |
|||
} |
|||
</script> |
|||
|
|||
<style lang='scss' scoped> |
|||
.FormInput { |
|||
::v-deep { |
|||
.el-input__inner { |
|||
background-color: #0D5F79; |
|||
color: #fff; |
|||
border-radius: 2px; |
|||
border: 0; |
|||
|
|||
&::placeholder { |
|||
color: #fff; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,109 @@ |
|||
export const source = { |
|||
label: "来源:", |
|||
key: "key29", |
|||
type: "RadioGroup", |
|||
isAlone: true, |
|||
required: true, |
|||
options: { |
|||
activeColor: "linear-gradient(180deg, #37E7FF 0%, #009BCC 100%)", |
|||
options: [ |
|||
{ |
|||
key: "96659", |
|||
label: "96659", |
|||
}, |
|||
{ |
|||
key: "交通转接", |
|||
label: "交通转接", |
|||
}, |
|||
{ |
|||
key: "道路巡查", |
|||
label: "道路巡查", |
|||
}, |
|||
{ |
|||
key: "视频巡查", |
|||
label: "视频巡查", |
|||
}, |
|||
{ |
|||
key: "视频AI", |
|||
label: "视频AI", |
|||
}, |
|||
{ |
|||
key: "一键救援", |
|||
label: "一键救援", |
|||
}, |
|||
{ |
|||
key: "其他", |
|||
label: "其他", |
|||
}, |
|||
], |
|||
}, |
|||
}; |
|||
|
|||
export const illegalTriggeringType = { |
|||
label: "类型:", |
|||
key: "key291", |
|||
type: "RadioGroup", |
|||
isAlone: true, |
|||
required: true, |
|||
options: { |
|||
activeColor: "linear-gradient(180deg, #37E7FF 0%, #009BCC 100%)", |
|||
options: [ |
|||
{ |
|||
key: "行人", |
|||
label: "行人", |
|||
}, |
|||
{ |
|||
key: "非机动车", |
|||
label: "非机动车", |
|||
}, |
|||
{ |
|||
key: "摩托车", |
|||
label: "摩托车", |
|||
}, |
|||
{ |
|||
key: "其他", |
|||
label: "其他", |
|||
}, |
|||
], |
|||
}, |
|||
}; |
|||
|
|||
export const station = { |
|||
label: "桩号:", |
|||
key: "key8", |
|||
required: true, |
|||
type: "MultipleLabelItem", |
|||
options: { |
|||
options: [ |
|||
{ |
|||
prefix: { |
|||
text: "K", |
|||
style: { |
|||
color: "#3DE8FF", |
|||
}, |
|||
}, |
|||
}, |
|||
{ |
|||
prefix: { |
|||
text: "+", |
|||
style: { |
|||
color: "#3DE8FF", |
|||
}, |
|||
}, |
|||
}, |
|||
], |
|||
}, |
|||
}; |
|||
|
|||
export const direction = { |
|||
label: "方向:", |
|||
key: "key7", |
|||
required: true, |
|||
type: "select", |
|||
}; |
|||
|
|||
export const isInTunnel = { |
|||
label: "是否处在隧道:", |
|||
key: "key21", |
|||
type: "select", |
|||
}; |
|||
@ -1,212 +0,0 @@ |
|||
<template> |
|||
<div class="formRecord"> |
|||
<el-form ref="form" :model="formData" label-width="140px" :rules="rules"> |
|||
<el-row> |
|||
<el-col :span="8"> |
|||
<el-form-item label="报警人姓名" prop="name"> |
|||
<el-input v-model="formData.name" /> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="8"> |
|||
<el-form-item label="报警人电话" prop="telephone"> |
|||
<el-input v-model="formData.telephone" /> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="8"> |
|||
<el-form-item label="交通事故类型"> |
|||
<el-select v-model="formData.type"></el-select> |
|||
</el-form-item> |
|||
</el-col> |
|||
</el-row> |
|||
<el-row> |
|||
<el-col :span="8"> |
|||
<el-form-item label="事件发生时间"> |
|||
<el-date-picker v-model="formData.timeOccur" type="datetime" placeholder="选择日期时间"> |
|||
</el-date-picker> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="8"> |
|||
<el-form-item label="桩号"> |
|||
<el-row> |
|||
<el-col :span="2" class="text-center"> |
|||
K |
|||
</el-col> |
|||
<el-col :span="10"> |
|||
<el-input v-model="formData.pile.number1" /> |
|||
</el-col> |
|||
<el-col :span="2" class="text-center"> |
|||
+ |
|||
</el-col> |
|||
<el-col :span="10"> |
|||
<el-input v-model="formData.pile.number2" /> |
|||
</el-col> |
|||
</el-row> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="8"> |
|||
<el-form-item label="洒落物名称"> |
|||
<el-select v-model="formData.fallOut"></el-select> |
|||
</el-form-item> |
|||
</el-col> |
|||
</el-row> |
|||
<el-row> |
|||
<el-col :span="24"> |
|||
<el-form-item label="是否处在隧道"> |
|||
<el-select v-model="formData.isInTunnel"> |
|||
<el-option label="是" :value="1">是</el-option> |
|||
<el-option label="否" :value="0">否</el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
</el-col> |
|||
</el-row> |
|||
<el-row> |
|||
<el-col :span="24"> |
|||
<el-form-item label="车道占用"> |
|||
<el-checkbox-group v-model="formData.laneOccupancy"> |
|||
<el-checkbox label="行1"></el-checkbox> |
|||
<el-checkbox label="行2"></el-checkbox> |
|||
<el-checkbox label="行3"></el-checkbox> |
|||
<el-checkbox label="行4"></el-checkbox> |
|||
<el-checkbox label="应急车道"></el-checkbox> |
|||
</el-checkbox-group> |
|||
</el-form-item> |
|||
</el-col> |
|||
</el-row> |
|||
<el-row> |
|||
<el-col :span="24"> |
|||
<el-form-item label="车辆情况"> |
|||
<el-row> |
|||
<el-col :span="2" class="text-right" style="padding-right: 6px;">小型车</el-col> |
|||
<el-col :span="2"> |
|||
<!-- <el-input type="number" v-model="formData.vehicle.small" /> --> |
|||
<el-input-number v-model="formData.vehicle.small" :min="0" :max="10"></el-input-number> |
|||
</el-col> |
|||
<el-col :span="1">辆</el-col> |
|||
<el-col :span="2" class="text-right">货车</el-col> |
|||
<el-col :span="2"> |
|||
<!-- <el-input type="number" v-model="formData.vehicle.truck" /> --> |
|||
<el-input-number v-model="formData.vehicle.truck" :min="0" :max="10"></el-input-number> |
|||
</el-col> |
|||
<el-col :span="1">辆</el-col> |
|||
<el-col :span="2" class="text-right">客车</el-col> |
|||
<el-col :span="2"> |
|||
<!-- <el-input type="number" v-model="formData.vehicle.bus" /> --> |
|||
<el-input-number v-model="formData.vehicle.bus" :min="0" :max="10"></el-input-number> |
|||
</el-col> |
|||
<el-col :span="1">辆</el-col> |
|||
<el-col :span="2" class="text-right">罐车</el-col> |
|||
<el-col :span="2"> |
|||
<!-- <el-input type="number" v-model="formData.vehicle.tankTruck" /> --> |
|||
<el-input-number v-model="formData.vehicle.tankTruck" :min="0" :max="10"></el-input-number> |
|||
</el-col> |
|||
<el-col :span="1">辆</el-col> |
|||
</el-row> |
|||
</el-form-item> |
|||
</el-col> |
|||
</el-row> |
|||
<el-row> |
|||
<el-col :span="24"> |
|||
<el-form-item label="来源"> |
|||
<el-radio-group v-model="formData.source" size="small"> |
|||
<el-radio-button label="96659"></el-radio-button> |
|||
<el-radio-button label="police">交警转接</el-radio-button> |
|||
<el-radio-button label="道路巡查"></el-radio-button> |
|||
<el-radio-button label="视频巡查"></el-radio-button> |
|||
<el-radio-button label="视频AI"></el-radio-button> |
|||
<el-radio-button label="一键救援"></el-radio-button> |
|||
<el-radio-button label="其它"></el-radio-button> |
|||
</el-radio-group> |
|||
</el-form-item> |
|||
</el-col> |
|||
</el-row> |
|||
</el-form> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import FormInput from './FormInput.vue'; |
|||
export default { |
|||
name: 'FormTrafficAccident', |
|||
components: { |
|||
FormInput |
|||
}, |
|||
data() { |
|||
return { |
|||
formData: { |
|||
name: '张晓明', |
|||
telephone: '18596584584', |
|||
type: '交通事故', |
|||
timeOccur: 1701592468898, |
|||
pile: { |
|||
number1: 1000, |
|||
number2: 50 |
|||
}, |
|||
fallOut: '洒落物', |
|||
isInTunnel: 1, |
|||
laneOccupancy: ["行3", "行4"], |
|||
vehicle: { |
|||
small: 1, |
|||
truck: 0, |
|||
bus: 1, |
|||
tankTruck: 0 |
|||
}, |
|||
source: 'police' |
|||
}, |
|||
rules: { |
|||
name: [ |
|||
{ required: true, message: '请输入姓名', trigger: 'blur' }, |
|||
{ min: 2, max: 6, message: '长度在 2 到 6 个字符', trigger: 'blur' } |
|||
], |
|||
telephone: [ |
|||
{ required: true, message: '请输入报警人电话', trigger: 'blur' }, |
|||
{ min: 11, max: 11, message: '长度错误', trigger: 'blur' } |
|||
] |
|||
} |
|||
} |
|||
}, |
|||
props: { |
|||
/** |
|||
* { |
|||
* label: String; |
|||
* key: String; |
|||
* type: 'input' | '', |
|||
* gridArea: "1/1/1/1", |
|||
* options: {} |
|||
* }[] |
|||
*/ |
|||
}, |
|||
methods: { |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang='scss' scoped> |
|||
.formRecord { |
|||
|
|||
::v-deep { |
|||
.el-form-item { |
|||
.el-form-item__label { |
|||
// height: 22px; |
|||
// font-size: 16px; |
|||
// font-family: PingFang SC, PingFang SC; |
|||
// font-weight: 400; |
|||
// color: #3DE8FF; |
|||
// line-height: 19px; |
|||
// -webkit-background-clip: text; |
|||
// -webkit-text-fill-color: transparent; |
|||
} |
|||
|
|||
// .el-input__inner { |
|||
// background-color: #0D5F79; |
|||
// color: #fff; |
|||
// border-radius: 2px; |
|||
// border: 0; |
|||
|
|||
// &::placeholder { |
|||
// color: #fff; |
|||
// } |
|||
// } |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -1,53 +1,402 @@ |
|||
export const formList = [ |
|||
import { |
|||
source, |
|||
station, |
|||
direction, |
|||
illegalTriggeringType, |
|||
isInTunnel, |
|||
} from "./FormItem"; |
|||
|
|||
export const tabConfigList = [ |
|||
{ |
|||
label: "事件源:", |
|||
key: "事件源", |
|||
type: "input", |
|||
key: "TrafficAccident", |
|||
label: "交通事故", |
|||
formConfig: { |
|||
list: [ |
|||
{ |
|||
label: "报警人姓名:", |
|||
key: "key1", |
|||
options: { |
|||
placeholder: "请输入报警人姓名", |
|||
}, |
|||
required: true, |
|||
}, |
|||
{ |
|||
label: "报警人电话:", |
|||
key: "key2", |
|||
options: { |
|||
placeholder: "请输入报警人电话(区号+号码)", |
|||
}, |
|||
required: true, |
|||
}, |
|||
{ |
|||
label: "交通事故类型:", |
|||
key: "key3", |
|||
type: "select", |
|||
required: true, |
|||
options: { |
|||
options: [ |
|||
{ |
|||
value: "选项1", |
|||
label: "黄金糕", |
|||
}, |
|||
{ |
|||
value: "选项2", |
|||
label: "双皮奶", |
|||
}, |
|||
{ |
|||
value: "选项3", |
|||
label: "蚵仔煎", |
|||
}, |
|||
{ |
|||
value: "选项4", |
|||
label: "龙须面", |
|||
}, |
|||
{ |
|||
value: "选项5", |
|||
label: "北京烤鸭", |
|||
}, |
|||
], |
|||
}, |
|||
}, |
|||
{ |
|||
label: "事件等级:", |
|||
key: "key4", |
|||
required: true, |
|||
type: "select", |
|||
}, |
|||
{ |
|||
label: "地点方式:", |
|||
key: "key5", |
|||
required: true, |
|||
type: "select", |
|||
}, |
|||
{ |
|||
label: "路线:", |
|||
key: "key6", |
|||
required: true, |
|||
type: "select", |
|||
}, |
|||
direction, |
|||
station, |
|||
{ |
|||
label: "事件发生时间:", |
|||
key: "key9", |
|||
required: true, |
|||
type: "datePicker", |
|||
}, |
|||
{ |
|||
label: "预计解除时间:", |
|||
key: "key10", |
|||
type: "datePicker", |
|||
}, |
|||
{ |
|||
label: "压车(公里):", |
|||
key: "key11", |
|||
}, |
|||
{ |
|||
label: "天气情况:", |
|||
required: true, |
|||
key: "key12", |
|||
type: "select", |
|||
}, |
|||
{ |
|||
label: "影响:", |
|||
key: "key13", |
|||
type: "select", |
|||
}, |
|||
{ |
|||
label: "是否到货:", |
|||
key: "key14", |
|||
type: "select", |
|||
}, |
|||
{ |
|||
label: "是否养护事故:", |
|||
key: "key15", |
|||
type: "select", |
|||
}, |
|||
{ |
|||
label: "交警电话:", |
|||
key: "key16", |
|||
}, |
|||
{ |
|||
label: "清障电话:", |
|||
options: { |
|||
placeholder: "请输入清障电话(区号+号码)", |
|||
}, |
|||
key: "key17", |
|||
}, |
|||
{ |
|||
label: "前方是否拥堵:", |
|||
key: "key18", |
|||
type: "select", |
|||
}, |
|||
{ |
|||
label: "是否分岔口:", |
|||
key: "key19", |
|||
type: "select", |
|||
}, |
|||
{ |
|||
label: "是否处在弯道:", |
|||
key: "key20", |
|||
type: "select", |
|||
}, |
|||
isInTunnel, |
|||
{ |
|||
label: "洒落物名称:", |
|||
key: "key22", |
|||
isAlone: true, |
|||
}, |
|||
{ |
|||
label: "车主电话:", |
|||
key: "key23", |
|||
isAlone: true, |
|||
}, |
|||
{ |
|||
label: "车道占用:", |
|||
key: "key24", |
|||
type: "CheckboxGroup", |
|||
isAlone: true, |
|||
default: [], |
|||
options: { |
|||
options: [ |
|||
{ key: "weChat", label: "行1" }, |
|||
{ key: "message", label: "行2" }, |
|||
{ key: "website", label: "行3" }, |
|||
{ key: "weibo", label: "行4" }, |
|||
{ key: "weibo2", label: "应急车道" }, |
|||
], |
|||
}, |
|||
}, |
|||
{ |
|||
label: "车辆情况:", |
|||
key: "key25", |
|||
isAlone: true, |
|||
type: "MultipleLabelItem", |
|||
options: { |
|||
options: [ |
|||
{ |
|||
prefix: { |
|||
text: "小型车", |
|||
}, |
|||
suffix: { |
|||
text: "辆", |
|||
}, |
|||
}, |
|||
{ |
|||
prefix: { |
|||
text: "货车", |
|||
}, |
|||
suffix: { |
|||
text: "辆", |
|||
}, |
|||
}, |
|||
{ |
|||
prefix: { |
|||
text: "客车", |
|||
}, |
|||
suffix: { |
|||
text: "辆", |
|||
}, |
|||
}, |
|||
{ |
|||
prefix: { |
|||
text: "罐车", |
|||
}, |
|||
suffix: { |
|||
text: "辆", |
|||
}, |
|||
}, |
|||
], |
|||
}, |
|||
}, |
|||
{ |
|||
label: "伤亡情况:", |
|||
key: "key26", |
|||
isAlone: true, |
|||
|
|||
type: "MultipleLabelItem", |
|||
options: { |
|||
options: [ |
|||
{ |
|||
prefix: { |
|||
text: "轻伤", |
|||
}, |
|||
suffix: { |
|||
text: "人", |
|||
}, |
|||
}, |
|||
{ |
|||
prefix: { |
|||
text: "重伤", |
|||
}, |
|||
suffix: { |
|||
text: "人", |
|||
}, |
|||
}, |
|||
{ |
|||
prefix: { |
|||
text: "死亡", |
|||
}, |
|||
suffix: { |
|||
text: "人", |
|||
}, |
|||
}, |
|||
], |
|||
}, |
|||
}, |
|||
{ |
|||
label: "事件标题:", |
|||
key: "key27", |
|||
isAlone: true, |
|||
required: true, |
|||
}, |
|||
{ |
|||
label: "事件描述:", |
|||
key: "key28", |
|||
isAlone: true, |
|||
options: { |
|||
type: "textarea", |
|||
autosize: true, |
|||
maxlength: 150, |
|||
autosize: { minRows: 6, maxRows: 6 }, |
|||
showWordLimit: true, |
|||
}, |
|||
required: true, |
|||
}, |
|||
source, |
|||
], |
|||
}, |
|||
}, |
|||
{ |
|||
label: "桩号:", |
|||
key: "桩号:", |
|||
type: "input", |
|||
key: "VehicleFault", |
|||
label: "车辆故障", |
|||
formConfig: { |
|||
formOptions: {}, |
|||
list: [], |
|||
}, |
|||
}, |
|||
{ |
|||
label: "行驶方向:", |
|||
key: "行驶方向", |
|||
type: "input", |
|||
key: "TrafficCongestion", |
|||
label: "交通拥堵", |
|||
formConfig: { |
|||
formOptions: {}, |
|||
list: [], |
|||
}, |
|||
}, |
|||
{ |
|||
label: "事件类型:", |
|||
key: "事件类型", |
|||
type: "input", |
|||
key: "TrafficControl", |
|||
label: "交通管制", |
|||
formConfig: { |
|||
formOptions: {}, |
|||
list: [], |
|||
}, |
|||
}, |
|||
{ |
|||
label: "事件原因:", |
|||
key: "事件原因", |
|||
type: "input", |
|||
key: "ServiceAreaAbnormal", |
|||
label: "服务区异常", |
|||
formConfig: { |
|||
formOptions: {}, |
|||
list: [], |
|||
}, |
|||
}, |
|||
{ |
|||
label: "事件状态:", |
|||
key: "事件状态", |
|||
type: "input", |
|||
key: "OtherEvents", |
|||
label: "其他事件", |
|||
formConfig: { |
|||
formOptions: {}, |
|||
list: [], |
|||
}, |
|||
}, |
|||
{ |
|||
label: "操作员:", |
|||
key: "操作员", |
|||
type: "input", |
|||
key: "HiddenDangersEquipment", |
|||
label: "设施设备隐患", |
|||
formConfig: { |
|||
formOptions: {}, |
|||
list: [], |
|||
}, |
|||
}, |
|||
{ |
|||
label: "发生时间:", |
|||
key: "发生时间", |
|||
type: "input", |
|||
key: "AbnormalWeather", |
|||
label: "异常天气", |
|||
formConfig: { |
|||
formOptions: {}, |
|||
list: [], |
|||
}, |
|||
}, |
|||
{ |
|||
label: "完结时间:", |
|||
key: "完结时间", |
|||
type: "input", |
|||
key: "Construction", |
|||
label: "施工建设", |
|||
formConfig: { |
|||
formOptions: {}, |
|||
list: [], |
|||
}, |
|||
}, |
|||
{ |
|||
label: "事件描述:", |
|||
key: "事件描述", |
|||
type: "input", |
|||
gridArea: "1/1/1/1", |
|||
key: "BarricadesCleared", |
|||
label: "路障清除", |
|||
formConfig: { |
|||
formOptions: {}, |
|||
list: [], |
|||
}, |
|||
}, |
|||
{ |
|||
key: "IllegalOnRoad", |
|||
label: "非法上路", |
|||
formConfig: { |
|||
formOptions: { |
|||
column: 2, |
|||
}, |
|||
list: [ |
|||
illegalTriggeringType, |
|||
{ |
|||
label: "补充说明:", |
|||
key: "key28", |
|||
isAlone: true, |
|||
options: { |
|||
type: "textarea", |
|||
autosize: true, |
|||
maxlength: 150, |
|||
autosize: { minRows: 6, maxRows: 6 }, |
|||
showWordLimit: true, |
|||
}, |
|||
required: true, |
|||
}, |
|||
{ |
|||
label: "高速公路:", |
|||
key: "key21", |
|||
type: "select", |
|||
}, |
|||
direction, |
|||
station, |
|||
isInTunnel, |
|||
{ |
|||
label: "开始时间:", |
|||
key: "key9", |
|||
required: true, |
|||
type: "datePicker", |
|||
}, |
|||
|
|||
{ |
|||
label: "预计结束时间:", |
|||
key: "key09", |
|||
type: "datePicker", |
|||
}, |
|||
|
|||
{ |
|||
label: "问题描述:", |
|||
key: "key29", |
|||
isAlone: true, |
|||
options: { |
|||
type: "textarea", |
|||
autosize: true, |
|||
maxlength: 150, |
|||
autosize: { minRows: 6, maxRows: 6 }, |
|||
showWordLimit: true, |
|||
}, |
|||
required: true, |
|||
}, |
|||
source, |
|||
], |
|||
}, |
|||
}, |
|||
]; |
|||
|
|||
Loading…
Reference in new issue