Joe
1 year ago
16 changed files with 952 additions and 484 deletions
@ -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> |
|||
@ -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: "黄金糕", |
|||
}, |
|||
{ |
|||
label: "桩号:", |
|||
key: "桩号:", |
|||
type: "input", |
|||
value: "选项2", |
|||
label: "双皮奶", |
|||
}, |
|||
{ |
|||
value: "选项3", |
|||
label: "蚵仔煎", |
|||
}, |
|||
{ |
|||
value: "选项4", |
|||
label: "龙须面", |
|||
}, |
|||
{ |
|||
value: "选项5", |
|||
label: "北京烤鸭", |
|||
}, |
|||
], |
|||
}, |
|||
}, |
|||
{ |
|||
label: "行驶方向:", |
|||
key: "行驶方向", |
|||
type: "input", |
|||
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: "辆", |
|||
}, |
|||
}, |
|||
{ |
|||
label: "事件类型:", |
|||
key: "事件类型", |
|||
type: "input", |
|||
prefix: { |
|||
text: "客车", |
|||
}, |
|||
suffix: { |
|||
text: "辆", |
|||
}, |
|||
}, |
|||
{ |
|||
label: "事件原因:", |
|||
key: "事件原因", |
|||
type: "input", |
|||
prefix: { |
|||
text: "罐车", |
|||
}, |
|||
suffix: { |
|||
text: "辆", |
|||
}, |
|||
}, |
|||
], |
|||
}, |
|||
}, |
|||
{ |
|||
label: "事件状态:", |
|||
key: "事件状态", |
|||
type: "input", |
|||
label: "伤亡情况:", |
|||
key: "key26", |
|||
isAlone: true, |
|||
|
|||
type: "MultipleLabelItem", |
|||
options: { |
|||
options: [ |
|||
{ |
|||
prefix: { |
|||
text: "轻伤", |
|||
}, |
|||
suffix: { |
|||
text: "人", |
|||
}, |
|||
}, |
|||
{ |
|||
label: "操作员:", |
|||
key: "操作员", |
|||
type: "input", |
|||
prefix: { |
|||
text: "重伤", |
|||
}, |
|||
suffix: { |
|||
text: "人", |
|||
}, |
|||
}, |
|||
{ |
|||
label: "发生时间:", |
|||
key: "发生时间", |
|||
type: "input", |
|||
prefix: { |
|||
text: "死亡", |
|||
}, |
|||
suffix: { |
|||
text: "人", |
|||
}, |
|||
}, |
|||
], |
|||
}, |
|||
}, |
|||
{ |
|||
label: "完结时间:", |
|||
key: "完结时间", |
|||
type: "input", |
|||
label: "事件标题:", |
|||
key: "key27", |
|||
isAlone: true, |
|||
required: true, |
|||
}, |
|||
{ |
|||
label: "事件描述:", |
|||
key: "事件描述", |
|||
type: "input", |
|||
gridArea: "1/1/1/1", |
|||
key: "key28", |
|||
isAlone: true, |
|||
options: { |
|||
type: "textarea", |
|||
autosize: true, |
|||
maxlength: 150, |
|||
autosize: { minRows: 6, maxRows: 6 }, |
|||
showWordLimit: true, |
|||
}, |
|||
required: true, |
|||
}, |
|||
source, |
|||
], |
|||
}, |
|||
}, |
|||
{ |
|||
key: "VehicleFault", |
|||
label: "车辆故障", |
|||
formConfig: { |
|||
formOptions: {}, |
|||
list: [], |
|||
}, |
|||
}, |
|||
{ |
|||
key: "TrafficCongestion", |
|||
label: "交通拥堵", |
|||
formConfig: { |
|||
formOptions: {}, |
|||
list: [], |
|||
}, |
|||
}, |
|||
{ |
|||
key: "TrafficControl", |
|||
label: "交通管制", |
|||
formConfig: { |
|||
formOptions: {}, |
|||
list: [], |
|||
}, |
|||
}, |
|||
{ |
|||
key: "ServiceAreaAbnormal", |
|||
label: "服务区异常", |
|||
formConfig: { |
|||
formOptions: {}, |
|||
list: [], |
|||
}, |
|||
}, |
|||
{ |
|||
key: "OtherEvents", |
|||
label: "其他事件", |
|||
formConfig: { |
|||
formOptions: {}, |
|||
list: [], |
|||
}, |
|||
}, |
|||
{ |
|||
key: "HiddenDangersEquipment", |
|||
label: "设施设备隐患", |
|||
formConfig: { |
|||
formOptions: {}, |
|||
list: [], |
|||
}, |
|||
}, |
|||
{ |
|||
key: "AbnormalWeather", |
|||
label: "异常天气", |
|||
formConfig: { |
|||
formOptions: {}, |
|||
list: [], |
|||
}, |
|||
}, |
|||
{ |
|||
key: "Construction", |
|||
label: "施工建设", |
|||
formConfig: { |
|||
formOptions: {}, |
|||
list: [], |
|||
}, |
|||
}, |
|||
{ |
|||
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