zhoule
1 year ago
6 changed files with 1289 additions and 0 deletions
@ -0,0 +1,617 @@ |
|||||
|
<template> |
||||
|
<Dialog v-model="modelVisible" title="新增预案"> |
||||
|
<div class="EventAddPlanDialog"> |
||||
|
<ElForm :model="formData" inline :rules="rules" ref="ruleForm"> |
||||
|
<div class="first"> |
||||
|
<el-form-item prop="eventCategory"> |
||||
|
<el-radio-group v-model="formData.eventCategory" @input="changeRadio"> |
||||
|
<el-radio-button :label="1">交通事件</el-radio-button> |
||||
|
<el-radio-button :label="2">感知事件</el-radio-button> |
||||
|
</el-radio-group> |
||||
|
</el-form-item> |
||||
|
<el-form-item required label="预案名称:" prop="planName"> |
||||
|
<el-input v-model="formData.planName" placeholder="请输入预案名称"></el-input> |
||||
|
</el-form-item> |
||||
|
<el-form-item required label="事件类型:" prop="eventType"> |
||||
|
<el-select v-model="formData.eventType" placeholder="请选择事件类型" @change="changeEventType"> |
||||
|
<el-option v-for="item in eventOptions" :key="item.value" :label="item.label" |
||||
|
:value="item.value"> |
||||
|
</el-option> |
||||
|
</el-select> |
||||
|
</el-form-item> |
||||
|
<el-form-item |
||||
|
v-if="(formData.eventCategory == 1 && formData.eventType !== 8) || formData.eventCategory == 2" |
||||
|
label="触发类型:" prop="triggerMechanism"> |
||||
|
|
||||
|
<el-select |
||||
|
v-if="(formData.eventCategory == 1 && formData.eventType !== 6) || formData.eventCategory == 2" |
||||
|
v-model="formData.triggerMechanism" placeholder="请选择触发类型"> |
||||
|
<el-option v-for="item in mechanismOptions" :key="item.value" :label="item.label" |
||||
|
:value="item.value"> |
||||
|
</el-option> |
||||
|
</el-select> |
||||
|
<el-select v-if="formData.eventCategory == 1 && formData.eventType == 6" |
||||
|
v-model="formData.triggerMechanism" placeholder="请选择触发类型"> |
||||
|
<el-option-group label="主线"> |
||||
|
<el-option label="主线封闭" value="1"></el-option> |
||||
|
<el-option label="主线限行" value="2"></el-option> |
||||
|
</el-option-group> |
||||
|
<el-option-group label="收费站"> |
||||
|
<el-option label="收费站封闭" value="3"></el-option> |
||||
|
<el-option label="收费站限行" value="4"></el-option> |
||||
|
</el-option-group> |
||||
|
<el-option-group label="匝道立交"> |
||||
|
<el-option label="匝道立交封闭" value="5"></el-option> |
||||
|
<el-option label="匝道立交限行" value="6"></el-option> |
||||
|
</el-option-group> |
||||
|
<el-option-group label="服务区"> |
||||
|
<el-option label="服务区封闭" value="7"></el-option> |
||||
|
<el-option label="服务区限行" value="8"></el-option> |
||||
|
</el-option-group> |
||||
|
</el-select> |
||||
|
|
||||
|
</el-form-item> |
||||
|
</div> |
||||
|
<div class="second"> |
||||
|
<el-row> |
||||
|
<el-col :span="2"> |
||||
|
<div class="text">执行操作:</div> |
||||
|
</el-col> |
||||
|
<el-col :span="22"> |
||||
|
<FormTable ref="secondFormTable"></FormTable> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
</div> |
||||
|
<!-- <div class="third"> |
||||
|
<el-row> |
||||
|
<el-col :span="2"> |
||||
|
<div class="text">恢复操作:</div> |
||||
|
</el-col> |
||||
|
<el-col :span="22"> |
||||
|
<FormTable></FormTable> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
</div> --> |
||||
|
</ElForm> |
||||
|
</div> |
||||
|
|
||||
|
<template #footer> |
||||
|
<Button style="background: #C9C9C9;padding:0 24px;" |
||||
|
@click.native="modelVisible = false, submitting = false">取消</Button> |
||||
|
<Button style="padding:0 24px;" @click.native="handleSubmit" :loading="submitting">保存</Button> |
||||
|
</template> |
||||
|
</Dialog> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import Dialog from "@screen/components/Dialog/index"; |
||||
|
import Form from '@screen/components/FormConfig'; |
||||
|
import FormTable from '../formTable/index'; |
||||
|
import Button from '@screen/components/Buttons/Button.vue'; |
||||
|
import request from '@/utils/request'; |
||||
|
import { Message } from "element-ui"; |
||||
|
|
||||
|
const optionsMap = { |
||||
|
1: { |
||||
|
1: [ |
||||
|
{ |
||||
|
value: 1, |
||||
|
label: '雨' |
||||
|
}, |
||||
|
{ |
||||
|
value: 2, |
||||
|
label: '雪' |
||||
|
}, |
||||
|
{ |
||||
|
value: 3, |
||||
|
label: '雾' |
||||
|
}, |
||||
|
{ |
||||
|
value: 4, |
||||
|
label: '大风' |
||||
|
}, |
||||
|
{ |
||||
|
value: 5, |
||||
|
label: '低温寒潮' |
||||
|
}, |
||||
|
{ |
||||
|
value: 6, |
||||
|
label: '路面积雪' |
||||
|
}, |
||||
|
{ |
||||
|
value: 7, |
||||
|
label: '路面结冰' |
||||
|
}, |
||||
|
{ |
||||
|
value: 8, |
||||
|
label: '路面积水' |
||||
|
}, |
||||
|
{ |
||||
|
value: 9, |
||||
|
label: '其他' |
||||
|
} |
||||
|
], |
||||
|
2: [ |
||||
|
{ |
||||
|
value: 1, |
||||
|
label: '侧翻' |
||||
|
}, |
||||
|
{ |
||||
|
value: 2, |
||||
|
label: '撞障碍物' |
||||
|
}, |
||||
|
{ |
||||
|
value: 3, |
||||
|
label: '货物洒落' |
||||
|
}, |
||||
|
{ |
||||
|
value: 4, |
||||
|
label: '撞护栏' |
||||
|
}, |
||||
|
{ |
||||
|
value: 5, |
||||
|
label: '自燃' |
||||
|
}, |
||||
|
{ |
||||
|
value: 6, |
||||
|
label: '追尾' |
||||
|
} |
||||
|
], |
||||
|
3: [ |
||||
|
{ |
||||
|
value: 1, |
||||
|
label: '行人' |
||||
|
}, |
||||
|
{ |
||||
|
value: 2, |
||||
|
label: '非机动车' |
||||
|
}, |
||||
|
{ |
||||
|
value: 3, |
||||
|
label: '摩托车' |
||||
|
}, |
||||
|
{ |
||||
|
value: 4, |
||||
|
label: '其他' |
||||
|
} |
||||
|
], |
||||
|
4: [ |
||||
|
{ |
||||
|
value: 1, |
||||
|
label: '高速主线' |
||||
|
}, |
||||
|
{ |
||||
|
value: 2, |
||||
|
label: '服务区' |
||||
|
}, |
||||
|
{ |
||||
|
value: 3, |
||||
|
label: '立交桥' |
||||
|
}, |
||||
|
{ |
||||
|
value: 4, |
||||
|
label: '收费站' |
||||
|
} |
||||
|
], |
||||
|
5: [ |
||||
|
{ |
||||
|
value: 1, |
||||
|
label: '道路拥堵' |
||||
|
}, |
||||
|
{ |
||||
|
value: 2, |
||||
|
label: '立交拥堵' |
||||
|
}, |
||||
|
{ |
||||
|
value: 3, |
||||
|
label: '收费站拥堵' |
||||
|
}, |
||||
|
{ |
||||
|
value: 4, |
||||
|
label: '收费站服务区拥堵' |
||||
|
} |
||||
|
], |
||||
|
6: [ |
||||
|
|
||||
|
], |
||||
|
7: [ |
||||
|
{ |
||||
|
value: 1, |
||||
|
label: '封闭、暂停营业' |
||||
|
}, |
||||
|
{ |
||||
|
value: 2, |
||||
|
label: '重要设施停用' |
||||
|
}, |
||||
|
{ |
||||
|
value: 3, |
||||
|
label: '其他异常' |
||||
|
} |
||||
|
], |
||||
|
8: [], |
||||
|
9: [ |
||||
|
{ |
||||
|
value: 1, |
||||
|
label: '烟雾' |
||||
|
}, |
||||
|
{ |
||||
|
value: 2, |
||||
|
label: '倒伏树木' |
||||
|
}, |
||||
|
{ |
||||
|
value: 3, |
||||
|
label: '洒落物' |
||||
|
}, |
||||
|
{ |
||||
|
value: 4, |
||||
|
label: '动物' |
||||
|
}, |
||||
|
{ |
||||
|
value: 5, |
||||
|
label: '其他' |
||||
|
} |
||||
|
] |
||||
|
}, |
||||
|
2: { |
||||
|
1: [{ |
||||
|
value: 1, |
||||
|
label: '雾' |
||||
|
}], |
||||
|
2: [], |
||||
|
3: [], |
||||
|
4: [], |
||||
|
5: [], |
||||
|
6: [], |
||||
|
7: [], |
||||
|
} |
||||
|
}; |
||||
|
|
||||
|
export default { |
||||
|
name: 'addAndEditDialog', |
||||
|
components: { |
||||
|
Dialog, |
||||
|
Form, |
||||
|
Button, |
||||
|
FormTable |
||||
|
}, |
||||
|
model: { |
||||
|
prop: 'visible', |
||||
|
event: 'close' |
||||
|
}, |
||||
|
props: { |
||||
|
visible: Boolean, |
||||
|
detail: { |
||||
|
type: Object, |
||||
|
default: () => { } |
||||
|
} |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
activeName: "TrafficAccident", |
||||
|
submitting: false, |
||||
|
formConfig: {}, |
||||
|
formData: { |
||||
|
eventCategory: 1, |
||||
|
eventType: 1, |
||||
|
triggeringCondition: 0 |
||||
|
}, |
||||
|
index: 1, |
||||
|
roads: [], |
||||
|
direction: [], |
||||
|
lwss: [], |
||||
|
eventOptions: [ |
||||
|
{ |
||||
|
value: 1, |
||||
|
label: '异常天气' |
||||
|
}, |
||||
|
{ |
||||
|
value: 2, |
||||
|
label: '交通事故' |
||||
|
}, |
||||
|
{ |
||||
|
value: 3, |
||||
|
label: '非法上路' |
||||
|
}, |
||||
|
{ |
||||
|
value: 4, |
||||
|
label: '车辆故障' |
||||
|
}, |
||||
|
{ |
||||
|
value: 5, |
||||
|
label: '交通拥堵' |
||||
|
}, |
||||
|
{ |
||||
|
value: 6, |
||||
|
label: '交通管制' |
||||
|
}, |
||||
|
{ |
||||
|
value: 7, |
||||
|
label: '服务区异常' |
||||
|
}, |
||||
|
{ |
||||
|
value: 8, |
||||
|
label: '施工建设' |
||||
|
}, |
||||
|
{ |
||||
|
value: 9, |
||||
|
label: '路障清除' |
||||
|
} |
||||
|
], |
||||
|
mechanismOptions: [{ |
||||
|
value: 1, |
||||
|
label: '雨' |
||||
|
}, |
||||
|
{ |
||||
|
value: 2, |
||||
|
label: '雪' |
||||
|
}, |
||||
|
{ |
||||
|
value: 3, |
||||
|
label: '雾' |
||||
|
}, |
||||
|
{ |
||||
|
value: 4, |
||||
|
label: '大风' |
||||
|
}, |
||||
|
{ |
||||
|
value: 5, |
||||
|
label: '低温寒潮' |
||||
|
}, |
||||
|
{ |
||||
|
value: 6, |
||||
|
label: '路面积雪' |
||||
|
}, |
||||
|
{ |
||||
|
value: 7, |
||||
|
label: '路面结冰' |
||||
|
}, |
||||
|
{ |
||||
|
value: 8, |
||||
|
label: '路面积水' |
||||
|
}, |
||||
|
{ |
||||
|
value: 9, |
||||
|
label: '其他' |
||||
|
}], |
||||
|
conditionOptions: [ |
||||
|
// { |
||||
|
// value: 1, |
||||
|
// label: '大于(>)' |
||||
|
// }, |
||||
|
{ |
||||
|
value: 1, |
||||
|
label: '小于(<)' |
||||
|
}, |
||||
|
], |
||||
|
rules: { |
||||
|
planName: [ |
||||
|
{ required: true, message: '请输入预案名称', trigger: 'blur' }, |
||||
|
|
||||
|
], |
||||
|
eventType: [ |
||||
|
{ required: true, message: '请选择事件类型', trigger: 'change' } |
||||
|
], |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
created() { |
||||
|
// this.formConfig = tabConfigList[0].formConfig; |
||||
|
this.initData().then(() => { |
||||
|
this.handleChange({ index: 0 }) |
||||
|
}) |
||||
|
}, |
||||
|
computed: { |
||||
|
modelVisible: { |
||||
|
get() { |
||||
|
return this.visible; |
||||
|
}, |
||||
|
set(val) { |
||||
|
this.$emit('close', val) |
||||
|
} |
||||
|
}, |
||||
|
getFormOptions() { |
||||
|
return { |
||||
|
column: 3, |
||||
|
...this.formConfig.formOptions |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
methods: { |
||||
|
initData() { |
||||
|
return Promise.all([ |
||||
|
//道路 |
||||
|
request({ |
||||
|
url: `/business/road/query`, |
||||
|
method: "get", |
||||
|
}).then((result) => { |
||||
|
if (result.code != 200) return Message.error(result?.msg); |
||||
|
result.data.forEach(it => { |
||||
|
this.roads.push({ key: it.id, label: it.roadName }) |
||||
|
}) |
||||
|
}).catch((err) => { |
||||
|
Message.error("查询失败4", err); |
||||
|
}), |
||||
|
//方向字典 |
||||
|
request({ |
||||
|
url: `/system/dict/data/type/iot_event_direction`, |
||||
|
method: "get", |
||||
|
}).then((result) => { |
||||
|
if (result.code != 200) return Message.error(result?.msg); |
||||
|
result.data.forEach(it => { |
||||
|
this.direction.push({ key: it.dictValue, label: it.dictLabel }) |
||||
|
}) |
||||
|
}).catch((err) => { |
||||
|
Message.error("查询失败5", err); |
||||
|
}), |
||||
|
//路网设施 1 收费站 2 桥梁 3 互通立交 4 枢纽立交 5 隧道 6 服务区 |
||||
|
request({ |
||||
|
url: `/business/facility/query`, |
||||
|
method: "get" |
||||
|
}).then((result) => { |
||||
|
if (result.code != 200) return Message.error(result?.msg); |
||||
|
result.data.forEach(it => this.lwss.push({ key: it.id, label: it.facilityName, type: it.facilityType })) |
||||
|
}).catch((err) => { |
||||
|
console.log('err', err) |
||||
|
Message.error("查询失败6", err); |
||||
|
}) |
||||
|
|
||||
|
]) |
||||
|
}, |
||||
|
changeEventType(value = 1) { |
||||
|
this.mechanismOptions = optionsMap[this.formData.eventCategory || 1][value]; |
||||
|
}, |
||||
|
changeRadio(value = 1) { |
||||
|
const optionsMap = { |
||||
|
1: [{ |
||||
|
value: 1, |
||||
|
label: '异常天气' |
||||
|
}, |
||||
|
{ |
||||
|
value: 2, |
||||
|
label: '交通事故' |
||||
|
}, |
||||
|
{ |
||||
|
value: 3, |
||||
|
label: '非法上路' |
||||
|
}, |
||||
|
{ |
||||
|
value: 4, |
||||
|
label: '车辆故障' |
||||
|
}, |
||||
|
{ |
||||
|
value: 5, |
||||
|
label: '交通拥堵' |
||||
|
}, |
||||
|
{ |
||||
|
value: 6, |
||||
|
label: '交通管制' |
||||
|
}, |
||||
|
{ |
||||
|
value: 7, |
||||
|
label: '服务区异常' |
||||
|
}, |
||||
|
{ |
||||
|
value: 8, |
||||
|
label: '施工建设' |
||||
|
}, |
||||
|
{ |
||||
|
value: 9, |
||||
|
label: '路障清除' |
||||
|
}], |
||||
|
2: [{ |
||||
|
value: 1, |
||||
|
label: '异常天气' |
||||
|
}, |
||||
|
{ |
||||
|
value: 2, |
||||
|
label: '拥堵' |
||||
|
}, |
||||
|
{ |
||||
|
value: 3, |
||||
|
label: '非机动车' |
||||
|
}, |
||||
|
{ |
||||
|
value: 4, |
||||
|
label: '行人' |
||||
|
}, |
||||
|
{ |
||||
|
value: 5, |
||||
|
label: '烟火' |
||||
|
}, |
||||
|
{ |
||||
|
value: 6, |
||||
|
label: '抛洒物' |
||||
|
}, |
||||
|
{ |
||||
|
value: 7, |
||||
|
label: '逆行' |
||||
|
}, |
||||
|
] |
||||
|
} |
||||
|
this.eventOptions = optionsMap[value]; |
||||
|
this.changeEventType(); |
||||
|
}, |
||||
|
handleChange() { |
||||
|
|
||||
|
}, |
||||
|
handleSubmit() { |
||||
|
this.$refs['ruleForm'].validate((valid) => { |
||||
|
if (valid) { |
||||
|
this.submitting = true; |
||||
|
console.log('formData', this.formData) |
||||
|
this.modelVisible = false; |
||||
|
this.submitting = false; |
||||
|
// this.$emit('queryData',true) |
||||
|
console.log(this.$refs['secondFormTable'].tableData) |
||||
|
return; |
||||
|
|
||||
|
request({ |
||||
|
url: `/dc/system/event`, |
||||
|
method: "post", |
||||
|
data: { |
||||
|
...formData, |
||||
|
eventType: Number(this.index) + 1, |
||||
|
eventState: 0, |
||||
|
stakeMark: (stakeMark && stakeMark[0] != null) ? ((stakeMark && stakeMark.length > 0) ? ('K' + stakeMark[0] + '+' + stakeMark[1]) : '') : '', |
||||
|
} |
||||
|
}).then((result) => { |
||||
|
if (result.code != 200) return Message.error(result?.msg); |
||||
|
Message.success("提交成功"); |
||||
|
this.modelVisible = false; |
||||
|
}).catch(() => { |
||||
|
Message.error("提交失败"); |
||||
|
}).finally(() => { |
||||
|
this.submitting = false; |
||||
|
this.$emit('queryData', true); |
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
}) |
||||
|
|
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
.fade-enter-active, |
||||
|
.fade-leave-active { |
||||
|
transition: opacity .24s; |
||||
|
} |
||||
|
|
||||
|
.fade-enter, |
||||
|
.fade-leave-to { |
||||
|
opacity: 0; |
||||
|
} |
||||
|
|
||||
|
.EventAddPlanDialog { |
||||
|
gap: 9px; |
||||
|
width: 1080px; |
||||
|
height: 310px; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
|
||||
|
.first, |
||||
|
.second, |
||||
|
.third { |
||||
|
padding: 5px 10px 8px; |
||||
|
background-color: #296887; |
||||
|
margin-bottom: 15px; |
||||
|
|
||||
|
.text { |
||||
|
margin-top: 12px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.form { |
||||
|
flex: 1; |
||||
|
overflow-y: auto; |
||||
|
} |
||||
|
|
||||
|
.footer { |
||||
|
display: flex; |
||||
|
justify-content: end; |
||||
|
gap: 15px; |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,79 @@ |
|||||
|
import * as PresetFormItems from "@screen/pages/control/event/event/FormEvent/PresetFormItems.js"; |
||||
|
import { merge, cloneDeep } from "lodash"; |
||||
|
|
||||
|
export const searchFormList = [ |
||||
|
{ |
||||
|
label: "事件状态:", |
||||
|
key: "eventState", |
||||
|
type: "RadioGroup", |
||||
|
options: { |
||||
|
options: [ |
||||
|
{ |
||||
|
key: "0", |
||||
|
label: "未解决", |
||||
|
}, |
||||
|
{ |
||||
|
key: "1", |
||||
|
label: "已解决", |
||||
|
}, |
||||
|
{ |
||||
|
key: "2", |
||||
|
label: "已关闭", |
||||
|
}, |
||||
|
], |
||||
|
}, |
||||
|
}, |
||||
|
PresetFormItems.eventSources, |
||||
|
PresetFormItems.eventType, |
||||
|
{ |
||||
|
label: "方向:", |
||||
|
key: "direction", |
||||
|
type: "RadioGroup", |
||||
|
options: { |
||||
|
options: [ |
||||
|
{ |
||||
|
key: "济南方向", |
||||
|
label: "济南方向", |
||||
|
}, |
||||
|
{ |
||||
|
key: "菏泽方向", |
||||
|
label: "菏泽方向", |
||||
|
}, |
||||
|
{ |
||||
|
key: "双向", |
||||
|
label: "双向", |
||||
|
}, |
||||
|
], |
||||
|
}, |
||||
|
}, |
||||
|
{ |
||||
|
label: "时间范围:", |
||||
|
key: "daterange", |
||||
|
required: false, |
||||
|
type: "datePicker", |
||||
|
options: { |
||||
|
type: "daterange", |
||||
|
format: "yyyy-MM-dd HH:mm:ss", |
||||
|
valueFormat: "yyyy-MM-dd HH:mm:ss", |
||||
|
}, |
||||
|
}, |
||||
|
{ |
||||
|
...PresetFormItems.station, |
||||
|
label: "开始桩号:", |
||||
|
required: false, |
||||
|
}, |
||||
|
merge(cloneDeep(PresetFormItems.station), { |
||||
|
options: { |
||||
|
options: [ |
||||
|
{ |
||||
|
key: "endStakeMark[0]", |
||||
|
}, |
||||
|
{ |
||||
|
key: "endStakeMark[1]", |
||||
|
}, |
||||
|
], |
||||
|
}, |
||||
|
label: "结束桩号:", |
||||
|
required: false, |
||||
|
}), |
||||
|
]; |
||||
@ -0,0 +1,343 @@ |
|||||
|
<template> |
||||
|
<div class="EventDetail"> |
||||
|
<Table :data="tableData" :show-header="false"> |
||||
|
<ElTableColumn prop="deviceType" width="160"> |
||||
|
<template slot-scope="scope"> |
||||
|
<el-select v-model="scope.row.deviceType" placeholder="请选择设备类型" @change="changeDeviceType"> |
||||
|
<el-option v-for="item in deviceOptions" :key="item.value" :label="item.label" |
||||
|
:value="item.value"> |
||||
|
</el-option> |
||||
|
</el-select> |
||||
|
</template> |
||||
|
</ElTableColumn> |
||||
|
|
||||
|
<ElTableColumn prop="phrases2" width="260"> |
||||
|
<template slot-scope="scope"> |
||||
|
<el-select v-if="scope.row.deviceType == 1" v-model="scope.row.phrases2" placeholder="检索规则条件"> |
||||
|
<el-option v-for="item in zyOptions" :key="item.value" :label="item.label" :value="item.value"> |
||||
|
</el-option> |
||||
|
</el-select> |
||||
|
|
||||
|
<div v-if="scope.row.deviceType == 2" class="plhx"> |
||||
|
<el-select v-model="scope.row.phrases1" placeholder=""> |
||||
|
<el-option label="事发上游最近" :value="1"></el-option> |
||||
|
</el-select> |
||||
|
<el-input-number v-model="scope.row.phrases2" :min="0" :max="9999" |
||||
|
style="width: 130px;"></el-input-number>个 |
||||
|
</div> |
||||
|
|
||||
|
<div v-if="scope.row.deviceType == 3 || scope.row.deviceType == 4" class="plhx"> |
||||
|
<el-select v-model="scope.row.phrases1" placeholder=""> |
||||
|
<el-option label="最近公里数" :value="1"></el-option> |
||||
|
</el-select> |
||||
|
<el-input-number v-model="scope.row.phrases2" :min="0" :max="9999" |
||||
|
style="width: 130px;"></el-input-number> |
||||
|
<p style="width: 56px;">公里</p> |
||||
|
</div> |
||||
|
|
||||
|
</template> |
||||
|
</ElTableColumn> |
||||
|
|
||||
|
<ElTableColumn prop="phrases3" width="370"> |
||||
|
<template slot-scope="scope"> |
||||
|
<div v-if="scope.row.deviceType == 1" class="mjs"> |
||||
|
<el-select v-model="scope.row.phrases3" placeholder="" multiple collapse-tags> |
||||
|
<el-option v-for="item in options" :key="item.value" :label="item.label" |
||||
|
:value="item.value"> |
||||
|
</el-option> |
||||
|
</el-select> |
||||
|
<el-input placeholder="请选择" v-model="scope.row.phrases4" readonly> |
||||
|
<i slot="suffix" class="el-input__icon el-icon-search"></i> |
||||
|
</el-input> |
||||
|
</div> |
||||
|
|
||||
|
<div v-if="scope.row.deviceType == 2" class="mjs"> |
||||
|
<el-select v-model="scope.row.phrases4" placeholder=""> |
||||
|
<el-option label="工作模式" :value="1"></el-option> |
||||
|
</el-select> |
||||
|
<el-select v-model="scope.row.phrases6" placeholder=""> |
||||
|
<el-option label="操作时长" :value="1"></el-option> |
||||
|
</el-select> |
||||
|
</div> |
||||
|
|
||||
|
<div v-if="scope.row.deviceType == 3" class="mjs"> |
||||
|
<el-select v-model="scope.row.phrases4" placeholder=""> |
||||
|
<el-option label="控制模式" :value="1"></el-option> |
||||
|
</el-select> |
||||
|
<el-select v-model="scope.row.phrases5" placeholder=""> |
||||
|
<el-option label="选择时间" :value="1"></el-option> |
||||
|
</el-select> |
||||
|
<el-select v-model="scope.row.phrases6" placeholder=""> |
||||
|
<el-option label="工作状态" :value="1"></el-option> |
||||
|
</el-select> |
||||
|
</div> |
||||
|
|
||||
|
<div v-if="scope.row.deviceType == 4" class="mjs"> |
||||
|
<el-input v-model="scope.row.phrases4" placeholder="请输入发布内容"></el-input> |
||||
|
</div> |
||||
|
|
||||
|
</template> |
||||
|
</ElTableColumn> |
||||
|
|
||||
|
|
||||
|
<ElTableColumn label="操作" width="100"> |
||||
|
<template slot-scope="scope"> |
||||
|
<ElButton class="elButton" icon="el-icon-plus" plain size="mini" |
||||
|
@click.native="onAdd(scope.row.id)" /> |
||||
|
<ElButton class="elButton" icon="el-icon-delete" plain size="mini" |
||||
|
@click.native="onDel(scope.$index)" /> |
||||
|
</template> |
||||
|
</ElTableColumn> |
||||
|
</Table> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import Table from '@screen/components/Table.vue'; |
||||
|
import Button from '@screen/components/Buttons/Button.vue'; |
||||
|
import request from "@/utils/request"; |
||||
|
import { Message } from 'element-ui' |
||||
|
|
||||
|
|
||||
|
export default { |
||||
|
name: 'formTable', |
||||
|
components: { |
||||
|
Button, |
||||
|
Table, |
||||
|
}, |
||||
|
model: { |
||||
|
prop: 'visible', |
||||
|
event: 'update:value' |
||||
|
}, |
||||
|
props: { |
||||
|
visible: Boolean, |
||||
|
eventType: Number, |
||||
|
// process: { |
||||
|
// type: Array, |
||||
|
// default: () => [] |
||||
|
// } |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
tableData: [ |
||||
|
{ |
||||
|
deviceType: 1, |
||||
|
phrases2: 1, |
||||
|
phrases4: '安全行驶' |
||||
|
} |
||||
|
], |
||||
|
deviceOptions: [ |
||||
|
{ |
||||
|
value: 1, |
||||
|
label: '门架式可变信息标志' |
||||
|
}, |
||||
|
{ |
||||
|
value: 2, |
||||
|
label: '疲劳唤醒' |
||||
|
}, |
||||
|
{ |
||||
|
value: 3, |
||||
|
label: '行车诱导' |
||||
|
}, |
||||
|
{ |
||||
|
value: 4, |
||||
|
label: '路段广播' |
||||
|
} |
||||
|
], |
||||
|
zyOptions: [ |
||||
|
{ |
||||
|
value: 1, |
||||
|
label: '指定设备资源' |
||||
|
}, |
||||
|
{ |
||||
|
value: 2, |
||||
|
label: '事发上游最近' |
||||
|
}, |
||||
|
{ |
||||
|
value: 3, |
||||
|
label: '最近公里数' |
||||
|
}, |
||||
|
], |
||||
|
options: [ |
||||
|
{ |
||||
|
value: 1, |
||||
|
label: '交通事故' |
||||
|
}, |
||||
|
{ |
||||
|
value: 2, |
||||
|
label: '车辆故障' |
||||
|
}, |
||||
|
{ |
||||
|
value: 3, |
||||
|
label: '交通管制' |
||||
|
}, |
||||
|
{ |
||||
|
value: 4, |
||||
|
label: '交通拥堵' |
||||
|
}, |
||||
|
{ |
||||
|
value: 5, |
||||
|
label: '非法上路' |
||||
|
}, |
||||
|
{ |
||||
|
value: 6, |
||||
|
label: '路障清除' |
||||
|
}, |
||||
|
{ |
||||
|
value: 7, |
||||
|
label: '施工建设' |
||||
|
}, |
||||
|
{ |
||||
|
value: 8, |
||||
|
label: '服务区异常' |
||||
|
}, |
||||
|
{ |
||||
|
value: 9, |
||||
|
label: '设施设备隐患' |
||||
|
}, |
||||
|
{ |
||||
|
value: 10, |
||||
|
label: '异常天气' |
||||
|
}, |
||||
|
{ |
||||
|
value: 11, |
||||
|
label: '其他事件' |
||||
|
} |
||||
|
], |
||||
|
deviceType: 1, |
||||
|
} |
||||
|
}, |
||||
|
methods: { |
||||
|
getProcess() { |
||||
|
this.tableData = []; |
||||
|
request({ |
||||
|
url: `/business/dcEventType/${this.eventType}`, |
||||
|
method: "get", |
||||
|
}).then(result => { |
||||
|
if (result.code != 200) return Message.error(result.msg); |
||||
|
//流程列表 |
||||
|
this.process = []; |
||||
|
this.tableData = []; |
||||
|
result.data.processConfigList?.forEach((it, index) => { |
||||
|
let commonPhrasesArr = it.commonPhrases ? it.commonPhrases.split(',') : ['']; |
||||
|
let phrs = []; |
||||
|
commonPhrasesArr?.forEach(phr => { |
||||
|
phrs.push({ id: it.id, phrases: phr }) |
||||
|
}) |
||||
|
this.process.push({ |
||||
|
...it, |
||||
|
phrs: phrs, |
||||
|
label: it.processNode, |
||||
|
isActive: index == 0 ? true : false, |
||||
|
}) |
||||
|
if (index == 0) { |
||||
|
this.id = it.id; |
||||
|
this.tableData = phrs; |
||||
|
} |
||||
|
}) |
||||
|
|
||||
|
}) |
||||
|
}, |
||||
|
changeDeviceType(value) { |
||||
|
this.deviceType = value; |
||||
|
}, |
||||
|
getTableData() { |
||||
|
let rows = this.process.find(item => item.id == this.id); |
||||
|
return rows?.phrs || []; |
||||
|
}, |
||||
|
updateTableData(id = 1) { |
||||
|
this.id = id; |
||||
|
this.tableData = []; |
||||
|
let pros = this.process.find(item => item.id == id); |
||||
|
this.tableData = pros.phrs; |
||||
|
}, |
||||
|
onAdd(id) { |
||||
|
this.tableData.push({ |
||||
|
id: id, |
||||
|
phrases: '' |
||||
|
}) |
||||
|
}, |
||||
|
onDel(index) { |
||||
|
if (this.tableData.length <= 1) { |
||||
|
return Message.warning('最后一项不可删除！'); |
||||
|
} |
||||
|
this.tableData.splice(index, 1) |
||||
|
}, |
||||
|
submitTable() { |
||||
|
let data = [] |
||||
|
this.process.forEach((lc) => { |
||||
|
let commonPhrases = []; |
||||
|
lc.phrs.forEach(phr => { if (phr.phrases) commonPhrases.push(phr.phrases) }) |
||||
|
data.push({ |
||||
|
commonPhrases: commonPhrases.join(','), |
||||
|
id: lc.id, |
||||
|
eventType: lc.eventType, |
||||
|
nodeNode: lc.nodeNode, |
||||
|
processNode: lc.processNode |
||||
|
}) |
||||
|
}) |
||||
|
console.log('data', data) |
||||
|
// return; |
||||
|
request({ |
||||
|
url: `/business/dcEventType/updateDcProcessConfig`, |
||||
|
method: "post", |
||||
|
data: { |
||||
|
eventType: this.eventType, |
||||
|
processConfigList: data |
||||
|
} |
||||
|
}).then(result => { |
||||
|
if (result.code != 200) return Message.error(result.msg); |
||||
|
Message.success(result.msg); |
||||
|
this.modelVisible = false; |
||||
|
this.$emit('reInitData', true) |
||||
|
}) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
.EventDetail { |
||||
|
display: flex; |
||||
|
gap: 9px; |
||||
|
width: 100%; |
||||
|
// height: 768px; |
||||
|
min-height: 50px; |
||||
|
margin-top: 5px; |
||||
|
flex-direction: column; |
||||
|
|
||||
|
::v-deep { |
||||
|
.el-table .el-table__cell { |
||||
|
padding: 0 5px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.mjs { |
||||
|
display: flex; |
||||
|
|
||||
|
>div { |
||||
|
margin-right: 10px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.plhx { |
||||
|
display: flex; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
} |
||||
|
|
||||
|
.elButton { |
||||
|
background: #2ba8c3; |
||||
|
border-radius: 2px 2px 2px 2px; |
||||
|
color: #FFFFFF; |
||||
|
} |
||||
|
|
||||
|
.elButton:hover, |
||||
|
.elButton:focus { |
||||
|
background: #2ba8c3; |
||||
|
border-radius: 2px 2px 2px 2px; |
||||
|
border-color: #FFFFFF; |
||||
|
color: #FFFFFF; |
||||
|
} |
||||
|
</style> |
||||
|
After Width: | Height: | Size: 3.1 KiB |
@ -0,0 +1,222 @@ |
|||||
|
<template> |
||||
|
<div class='emergencyProcessManagement'> |
||||
|
|
||||
|
<!-- 搜索栏 --> |
||||
|
<div class="filter"> |
||||
|
<div> |
||||
|
<ButtonGradient @click="onAdd"> |
||||
|
<template #prefix> |
||||
|
<img src="@screen/images/insert.svg" /> |
||||
|
</template> |
||||
|
新增 |
||||
|
</ButtonGradient> |
||||
|
<ButtonGradient @click="onRefresh" class="refresh-btn"> |
||||
|
<template #prefix> |
||||
|
<img src="./images/refresh.svg" /> |
||||
|
</template> |
||||
|
刷新 |
||||
|
</ButtonGradient> |
||||
|
</div> |
||||
|
<InputSearch style="width: 402px;" :formList="searchFormList" |
||||
|
:formConfigOptions="{ dFormData: { eventState: 0 } }" @handleSearch="handleSearch" /> |
||||
|
</div> |
||||
|
|
||||
|
<!-- 内容 --> |
||||
|
<div class="body"> |
||||
|
<Table :data="tableData"> |
||||
|
<ElTableColumn prop="strEventCategory" label="事件分类" width="100" align="center" /> |
||||
|
<ElTableColumn prop="strEventType" label="事件类型" width="100" align="center" /> |
||||
|
<ElTableColumn prop="planName" label="预案名称" width="140" align="center" /> |
||||
|
<ElTableColumn prop="triggeringCondition" label="检索条件" width="140" /> |
||||
|
<ElTableColumn prop="deviceType" label="设备类型" width="140" /> |
||||
|
<ElTableColumn prop="controllableDevice" label="可控设备" width="200" /> |
||||
|
<ElTableColumn prop="controlCommand" label="控制指令" /> |
||||
|
<ElTableColumn label="操作" width="210" align="center"> |
||||
|
<template slot-scope="scope"> |
||||
|
<ElButton type="text" style="color: #00D1FF;" @click="showDisposal(scope.row)">修改</ElButton> |
||||
|
<ElButton type="text" style="color: #00EBC1;" @click="handleDelete(scope.row)">删除</ElButton> |
||||
|
</template> |
||||
|
</ElTableColumn> |
||||
|
</Table> |
||||
|
</div> |
||||
|
|
||||
|
<!-- 新增修改弹窗 --> |
||||
|
<AddAndEditDialog :visible="isShowDialog" :detail="detail" @close="onCloseAddNew" |
||||
|
@update:phrasesData="onUpdatePhrasesData" @reInitData="initData" /> |
||||
|
|
||||
|
<!-- 分页 --> |
||||
|
<div class="footer"> |
||||
|
<Pagination @current-change="initData" @size-change="onSizeChange" width="'100%'" |
||||
|
:page-sizes="[10, 20, 30, 40, 50]" :page-size="searchData.pageSize" |
||||
|
:current-page.sync="searchData.pageNum" layout="total, sizes, prev, pager, next" :total="total"> |
||||
|
</Pagination> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import ButtonGradient from '@screen/components/Buttons/ButtonGradient.vue'; |
||||
|
import Pagination from '@screen/components/Pagination.vue'; |
||||
|
import Table from '@screen/components/Table.vue'; |
||||
|
import InputSearch from '@screen/components/InputSearch/index.vue'; |
||||
|
import AddAndEditDialog from './addAndEditDialog'; |
||||
|
import request from "@/utils/request"; |
||||
|
import { confirm } from "@screen/utils/common"; |
||||
|
import { Message } from 'element-ui' |
||||
|
import { searchFormList } from './data'; |
||||
|
|
||||
|
const eventTypeMap = { |
||||
|
0: { |
||||
|
1: '交通事故', |
||||
|
2: '车辆故障', |
||||
|
3: '交通管制', |
||||
|
4: '交通拥堵', |
||||
|
5: '非法上路', |
||||
|
6: '路障清除', |
||||
|
7: '施工建设', |
||||
|
8: '服务区异常', |
||||
|
9: '设施设备隐患', |
||||
|
10: '异常天气', |
||||
|
11: '其他事件', |
||||
|
}, |
||||
|
1: { |
||||
|
1: '异常天气', |
||||
|
2: '拥堵', |
||||
|
3: '非机动车', |
||||
|
4: '行人', |
||||
|
5: '烟火', |
||||
|
6: '抛洒物', |
||||
|
7: '逆行', |
||||
|
}, |
||||
|
2: {} |
||||
|
|
||||
|
} |
||||
|
|
||||
|
|
||||
|
export default { |
||||
|
name: 'controlEventPlan', |
||||
|
components: { |
||||
|
ButtonGradient, |
||||
|
Pagination, |
||||
|
Table, |
||||
|
InputSearch, |
||||
|
AddAndEditDialog |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
tableData: [], |
||||
|
searchFormList, |
||||
|
isShowDialog: false, |
||||
|
total: 20, |
||||
|
eventType: 1, |
||||
|
searchData: { |
||||
|
pageSize: 20, |
||||
|
pageNum: 1, |
||||
|
}, |
||||
|
phrasesData: [], |
||||
|
detail: {} |
||||
|
} |
||||
|
}, |
||||
|
created() { |
||||
|
this.initData(); |
||||
|
}, |
||||
|
methods: { |
||||
|
initData() { |
||||
|
request({ |
||||
|
url: `/business/plans/list`, |
||||
|
method: "get", |
||||
|
params: this.searchData, |
||||
|
}).then((result) => { |
||||
|
if (result.code != 200) return Message.error(result?.msg); |
||||
|
result.rows.forEach(it => { |
||||
|
it.strEventCategory = it.eventCategory == 0 ? '交通事件' : '感知事件'; |
||||
|
it.strEventType = eventTypeMap[it.eventCategory || 0][it.eventType]; |
||||
|
}) |
||||
|
this.tableData = result.rows; |
||||
|
this.total = result.total; |
||||
|
}); |
||||
|
}, |
||||
|
onSizeChange(pageSize) { |
||||
|
// this.searchData.pageSize = pageSize; |
||||
|
// this.getData(); |
||||
|
}, |
||||
|
onRefresh() { |
||||
|
this.initData(); |
||||
|
}, |
||||
|
onAdd() { |
||||
|
this.isShowDialog = true |
||||
|
}, |
||||
|
onCloseAddNew() { |
||||
|
this.isShowDialog = false |
||||
|
}, |
||||
|
onUpdatePhrasesData() { |
||||
|
|
||||
|
}, |
||||
|
handleSearch() { |
||||
|
|
||||
|
}, |
||||
|
async handleDelete(data) { |
||||
|
await confirm({ message: "是否要删除该预案?" }); |
||||
|
// return console.log('删除成功',data.id) |
||||
|
request({ |
||||
|
url: `/business/plans/${data.id}`, |
||||
|
method: "DELETE", |
||||
|
|
||||
|
}).then(result => { |
||||
|
if (result.code != 200) return Message.error("删除失败"); |
||||
|
this.initData() |
||||
|
|
||||
|
Message.success("删除成功") |
||||
|
}).catch(() => { |
||||
|
Message.error("删除失败") |
||||
|
}) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang='scss' scoped> |
||||
|
.emergencyProcessManagement { |
||||
|
padding: 21px; |
||||
|
|
||||
|
height: 100%; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
z-index: 6; |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
|
||||
|
.filter { |
||||
|
height: 60px; |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
align-items: center; |
||||
|
|
||||
|
>div { |
||||
|
display: flex; |
||||
|
gap: 6px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.body { |
||||
|
flex: 1; |
||||
|
position: relative; |
||||
|
overflow: hidden; |
||||
|
|
||||
|
.content { |
||||
|
position: absolute; |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
overflow: auto; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.footer { |
||||
|
margin-top: 15px; |
||||
|
height: 36px; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
Loading…
Reference in new issue