zhoule
11 months ago
4 changed files with 751 additions and 128 deletions
@ -0,0 +1,478 @@ |
|||||
|
<template> |
||||
|
<Dialog v-model="modelVisible" :title="title"> |
||||
|
<div class="EventAddPlanDialog"> |
||||
|
<ElForm :model="formData" inline :rules="rules" ref="ruleForm"> |
||||
|
<div class="first"> |
||||
|
<el-radio-group v-model="planName"> |
||||
|
<el-radio-button label="名称1"></el-radio-button> |
||||
|
<el-radio-button label="名称2"></el-radio-button> |
||||
|
</el-radio-group> |
||||
|
</div> |
||||
|
|
||||
|
<div class="second"> |
||||
|
<el-row> |
||||
|
<el-col :span="2"> |
||||
|
<div class="text">联动设备:</div> |
||||
|
</el-col> |
||||
|
<el-col :span="22"> |
||||
|
<FormTable ref="secondFormTable" :tableData="secondFormData"></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 ref="thirdFormTable" :tableData="thirdFormData"></FormTable> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
</div> |
||||
|
</ElForm> |
||||
|
</div> |
||||
|
|
||||
|
<template #footer> |
||||
|
<Button style="padding:0 24px;" @click.native="handleSubmit" :loading="submitting">强制恢复</Button> |
||||
|
<Button style="padding:0 24px;" @click.native="handleSubmit" :loading="submitting">确认</Button> |
||||
|
<Button style="background: #C9C9C9;padding:0 24px;" |
||||
|
@click.native="modelVisible = false, submitting = false">取消</Button> |
||||
|
</template> |
||||
|
</Dialog> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import Dialog from "@screen/components/Dialog/index"; |
||||
|
import FormTable from '../../../plan/formTable/index.vue'; |
||||
|
import Button from '@screen/components/Buttons/Button.vue'; |
||||
|
import request from '@/utils/request'; |
||||
|
import { Message } from "element-ui"; |
||||
|
import { throttle } from "lodash" |
||||
|
|
||||
|
|
||||
|
export default { |
||||
|
name: 'eventPlanDialog', |
||||
|
components: { |
||||
|
Dialog, |
||||
|
Button, |
||||
|
FormTable |
||||
|
}, |
||||
|
model: { |
||||
|
prop: 'visible', |
||||
|
event: 'close' |
||||
|
}, |
||||
|
provide() { |
||||
|
return { |
||||
|
loadData: throttle(this.loadData, 1000) |
||||
|
} |
||||
|
}, |
||||
|
props: { |
||||
|
visible: Boolean, |
||||
|
detail: { |
||||
|
type: Object, |
||||
|
default: () => { } |
||||
|
} |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
title: '事件确认', |
||||
|
dialogType: 1, |
||||
|
planId: 0, |
||||
|
submitting: false, |
||||
|
formData: { |
||||
|
eventCategory: 1, |
||||
|
eventType: 1, |
||||
|
triggerMechanism: 1 |
||||
|
}, |
||||
|
secondFormData: [{ |
||||
|
deviceType: 1, |
||||
|
searchRule: 1, |
||||
|
qbb: '' |
||||
|
}], |
||||
|
thirdFormData: [{ |
||||
|
deviceType: 1, |
||||
|
searchRule: 1, |
||||
|
qbb: '' |
||||
|
}], |
||||
|
planName: '', |
||||
|
deviceData: [], |
||||
|
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' } |
||||
|
], |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
mounted() { |
||||
|
|
||||
|
}, |
||||
|
computed: { |
||||
|
modelVisible: { |
||||
|
get() { |
||||
|
if (this.visible) { |
||||
|
} |
||||
|
return this.visible; |
||||
|
}, |
||||
|
set(val) { |
||||
|
this.$emit('close', val) |
||||
|
} |
||||
|
}, |
||||
|
}, |
||||
|
methods: { |
||||
|
initData(id = 1) { |
||||
|
request({ |
||||
|
url: `/business/plans/list/${id}`, |
||||
|
method: "get", |
||||
|
}).then((result) => { |
||||
|
if (result.code != 200) return Message.error(result?.msg); |
||||
|
let data = result.data; |
||||
|
let dcExecuteAction = result.data.dcExecuteAction; |
||||
|
|
||||
|
this.planId = data.id; |
||||
|
this.formData = { |
||||
|
eventCategory: data.eventCategory, |
||||
|
planName: data.planName, |
||||
|
eventType: data.eventType, |
||||
|
triggerMechanism: data.triggerMechanism, |
||||
|
} |
||||
|
this.secondFormData = []; |
||||
|
this.thirdFormData = []; |
||||
|
dcExecuteAction.forEach(it => { |
||||
|
if (it.deviceList) { |
||||
|
it.deviceList = it.deviceList.split(','); |
||||
|
} |
||||
|
if (it.actionType == 1) { |
||||
|
this.secondFormData.push(it); |
||||
|
} else if (it.actionType == 2) { |
||||
|
this.thirdFormData.push(it); |
||||
|
} |
||||
|
}) |
||||
|
|
||||
|
}).catch((err) => { |
||||
|
console.log(err) |
||||
|
Message.error("查询事件预案列表失败", err); |
||||
|
}) |
||||
|
|
||||
|
}, |
||||
|
async loadData() { |
||||
|
if (this.deviceData.length <= 0) { |
||||
|
let result = await request({ |
||||
|
url: `business/device/query?deviceType=2`, |
||||
|
method: "get", |
||||
|
}) |
||||
|
if (result.code != 200) return Message.error(result?.msg); |
||||
|
console.log('123'); |
||||
|
this.deviceData = result.data; |
||||
|
// return result.data; |
||||
|
} |
||||
|
return this.deviceData; |
||||
|
}, |
||||
|
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() { |
||||
|
|
||||
|
}, |
||||
|
formatData(it, value = 1) { |
||||
|
let data = { ...it, actionType: value } |
||||
|
if (it.deviceList && typeof it.deviceList !== 'string' && it.deviceList.length > 0) { |
||||
|
data.deviceList = it.deviceList.join(','); |
||||
|
} else { |
||||
|
data.deviceList = ''; |
||||
|
} |
||||
|
if (it.content) { |
||||
|
data.otherConfig = JSON.stringify({ content: it.content }) |
||||
|
} |
||||
|
if (it.controlModel) { |
||||
|
let other = { |
||||
|
controlModel: it.controlModel, |
||||
|
state: it.state, |
||||
|
} |
||||
|
if (it.time && it?.time[0]) { |
||||
|
other = { |
||||
|
controlModel: it.controlModel, |
||||
|
state: it.state, |
||||
|
startTime: it.time[0], |
||||
|
endTime: it.time[1] |
||||
|
} |
||||
|
} |
||||
|
data.otherConfig = JSON.stringify(other) |
||||
|
} |
||||
|
if (it.gzms) { |
||||
|
data.otherConfig = JSON.stringify({ |
||||
|
state: it.gzms, |
||||
|
operationDuration: it.operationDuration, |
||||
|
}) |
||||
|
} |
||||
|
return data; |
||||
|
}, |
||||
|
handleSubmit() { |
||||
|
this.$refs['ruleForm'].validate((valid) => { |
||||
|
if (valid) { |
||||
|
// this.submitting = false; |
||||
|
let secondFormTable = this.$refs['secondFormTable'].tableData || []; |
||||
|
let thirdFormTable = this.$refs['thirdFormTable'].tableData || []; |
||||
|
let dcArr = []; |
||||
|
secondFormTable.forEach(it => { |
||||
|
dcArr.push(this.formatData(it, 1)); |
||||
|
}) |
||||
|
thirdFormTable.forEach(it => { |
||||
|
dcArr.push(this.formatData(it, 2)); |
||||
|
}) |
||||
|
|
||||
|
console.log({ |
||||
|
...this.formData, |
||||
|
dcExecuteAction: dcArr |
||||
|
}) |
||||
|
// return; |
||||
|
if (this.dialogType == 1) {//新增 |
||||
|
request({ |
||||
|
url: `/business/plans`, |
||||
|
method: "post", |
||||
|
data: { |
||||
|
...this.formData, |
||||
|
dcExecuteAction: dcArr |
||||
|
} |
||||
|
}).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('reInitData', true); |
||||
|
}) |
||||
|
} else if (this.dialogType == 2) {//修改 |
||||
|
request({ |
||||
|
url: `/business/plans`, |
||||
|
method: "put", |
||||
|
data: { |
||||
|
...this.formData, |
||||
|
id: this.planId, |
||||
|
dcExecuteAction: dcArr |
||||
|
} |
||||
|
}).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('reInitData', 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> |
||||
Loading…
Reference in new issue