zhangzhang
1 year ago
36 changed files with 2269 additions and 1881 deletions
@ -1,18 +1,17 @@ |
|||
<template> |
|||
<Dialog class="WeatherForecast"> |
|||
s |
|||
</Dialog> |
|||
<Dialog class="WeatherForecast" width="23vw"> s </Dialog> |
|||
</template> |
|||
|
|||
<script> |
|||
import Dialog from "@screen/components/Dialog/index.vue" |
|||
import Dialog from "@screen/components/Dialog/index.vue"; |
|||
|
|||
// 天气预报 |
|||
export default { |
|||
name: 'WeatherForecast', |
|||
} |
|||
name: "WeatherForecast", |
|||
}; |
|||
</script> |
|||
|
|||
<style lang='scss' scoped> |
|||
.WeatherForecast {} |
|||
<style lang="scss" scoped> |
|||
.WeatherForecast { |
|||
} |
|||
</style> |
|||
|
|||
@ -1,264 +1,297 @@ |
|||
<template> |
|||
<Dialog v-model="modelVisible" title="配置常用语"> |
|||
<!-- <Button style="margin: 10px 0 20px 20px; width: 100px;" @click.native="onAdd">添加</Button> --> |
|||
<div class="header"> |
|||
<el-form ref="form" label-width="120px"> |
|||
<el-form-item label="事件类型"> |
|||
<el-select v-model="eventType" placeholder="请选择" style="width: 220px" disabled> |
|||
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> |
|||
</el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
</el-form> |
|||
</div> |
|||
<div> |
|||
<TimeLine1 :data="process" @update:tableData="updateTableData" /> |
|||
</div> |
|||
<div class="EventDetail"> |
|||
<Table :data="getTableData()" :show-header="false"> |
|||
<ElTableColumn label="步骤" width="110" align="center"> |
|||
<template slot-scope="scope"> |
|||
{{ `${scope.$index + 1}` }} |
|||
</template> |
|||
</ElTableColumn> |
|||
<ElTableColumn prop="phrases" label="常用语" width="550" align="center"> |
|||
<template slot-scope="scope"> |
|||
<ElInput type="textarea" style="margin-top: 5px;" v-model="scope.row.phrases" |
|||
:autosize="{ minRows: 2, maxRows: 2 }" :maxlength="150" showWordLimit placeholder="请输入常用语内容" /> |
|||
</template> |
|||
</ElTableColumn> |
|||
<ElTableColumn label="操作" width="160" align="center"> |
|||
<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 #footer> |
|||
<Button :style="{ backgroundColor: '#C9C9C9', padding: '0 24px' }" @click.native="modelVisible = false"> |
|||
取消</Button> |
|||
<Button style="padding: 0 24px;" @click.native="submitTable">确认</Button> |
|||
</template> |
|||
</Dialog> |
|||
<Dialog v-model="modelVisible" title="配置常用语" width="35vw"> |
|||
<!-- <Button style="margin: 10px 0 20px 20px; width: 100px;" @click.native="onAdd">添加</Button> --> |
|||
<div class="header"> |
|||
<el-form ref="form" label-width="120px"> |
|||
<el-form-item label="事件类型"> |
|||
<el-select |
|||
v-model="eventType" |
|||
placeholder="请选择" |
|||
style="width: 220px" |
|||
disabled |
|||
> |
|||
<el-option |
|||
v-for="item in options" |
|||
:key="item.value" |
|||
:label="item.label" |
|||
:value="item.value" |
|||
> |
|||
</el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
</el-form> |
|||
</div> |
|||
<div> |
|||
<TimeLine1 :data="process" @update:tableData="updateTableData" /> |
|||
</div> |
|||
<div class="EventDetail"> |
|||
<Table :data="getTableData()" :show-header="false"> |
|||
<ElTableColumn label="步骤" width="110" align="center"> |
|||
<template slot-scope="scope"> |
|||
{{ `${scope.$index + 1}` }} |
|||
</template> |
|||
</ElTableColumn> |
|||
<ElTableColumn prop="phrases" label="常用语" width="550" align="center"> |
|||
<template slot-scope="scope"> |
|||
<ElInput |
|||
type="textarea" |
|||
style="margin-top: 5px" |
|||
v-model="scope.row.phrases" |
|||
:autosize="{ minRows: 2, maxRows: 2 }" |
|||
:maxlength="150" |
|||
showWordLimit |
|||
placeholder="请输入常用语内容" |
|||
/> |
|||
</template> |
|||
</ElTableColumn> |
|||
<ElTableColumn label="操作" width="160" align="center"> |
|||
<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 #footer> |
|||
<Button |
|||
:style="{ backgroundColor: '#C9C9C9', padding: '0 24px' }" |
|||
@click.native="modelVisible = false" |
|||
> |
|||
取消</Button |
|||
> |
|||
<Button style="padding: 0 24px" @click.native="submitTable">确认</Button> |
|||
</template> |
|||
</Dialog> |
|||
</template> |
|||
|
|||
|
|||
<script> |
|||
import Dialog from "@screen/components/Dialog/index"; |
|||
import Table from '@screen/components/Table.vue'; |
|||
import Button from '@screen/components/Buttons/Button.vue'; |
|||
import Table from "@screen/components/Table.vue"; |
|||
import Button from "@screen/components/Buttons/Button.vue"; |
|||
import request from "@/utils/request"; |
|||
import TimeLine1 from "@screen/components/TimeLine/LineClick/index"; |
|||
import { Message } from 'element-ui' |
|||
|
|||
import { Message } from "element-ui"; |
|||
|
|||
export default { |
|||
name: 'EventDetail', |
|||
components: { |
|||
Dialog, |
|||
Button, |
|||
Table, |
|||
TimeLine1 |
|||
}, |
|||
model: { |
|||
prop: 'visible', |
|||
event: 'update:value' |
|||
}, |
|||
props: { |
|||
visible: Boolean, |
|||
eventType: Number, |
|||
// process: { |
|||
// type: Array, |
|||
// default: () => [] |
|||
// } |
|||
}, |
|||
data() { |
|||
return { |
|||
tableData: [{ |
|||
phrases: '' |
|||
}], |
|||
// eventType: 1, |
|||
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: '其他事件' |
|||
} |
|||
], |
|||
process: [], |
|||
id: 0 |
|||
} |
|||
}, |
|||
computed: { |
|||
modelVisible: { |
|||
get() { |
|||
if (this.visible) { |
|||
this.getProcess(); |
|||
} |
|||
return this.visible; |
|||
}, |
|||
set(val) { |
|||
this.$emit('update:value', val) |
|||
} |
|||
} |
|||
}, |
|||
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; |
|||
} |
|||
}) |
|||
|
|||
}) |
|||
name: "EventDetail", |
|||
components: { |
|||
Dialog, |
|||
Button, |
|||
Table, |
|||
TimeLine1, |
|||
}, |
|||
model: { |
|||
prop: "visible", |
|||
event: "update:value", |
|||
}, |
|||
props: { |
|||
visible: Boolean, |
|||
eventType: Number, |
|||
// process: { |
|||
// type: Array, |
|||
// default: () => [] |
|||
// } |
|||
}, |
|||
data() { |
|||
return { |
|||
tableData: [ |
|||
{ |
|||
phrases: "", |
|||
}, |
|||
], |
|||
// eventType: 1, |
|||
options: [ |
|||
{ |
|||
value: 1, |
|||
label: "交通事故", |
|||
}, |
|||
{ |
|||
value: 2, |
|||
label: "车辆故障", |
|||
}, |
|||
{ |
|||
value: 3, |
|||
label: "交通管制", |
|||
}, |
|||
{ |
|||
value: 4, |
|||
label: "交通拥堵", |
|||
}, |
|||
getTableData() { |
|||
let rows = this.process.find(item => item.id == this.id); |
|||
return rows?.phrs || []; |
|||
{ |
|||
value: 5, |
|||
label: "非法上路", |
|||
}, |
|||
updateTableData(id = 1) { |
|||
this.id = id; |
|||
this.tableData = []; |
|||
let pros = this.process.find(item => item.id == id); |
|||
this.tableData = pros.phrs; |
|||
{ |
|||
value: 6, |
|||
label: "路障清除", |
|||
}, |
|||
onAdd(id) { |
|||
this.tableData.push({ |
|||
id: id, |
|||
phrases: '' |
|||
}) |
|||
{ |
|||
value: 7, |
|||
label: "施工建设", |
|||
}, |
|||
onDel(index) { |
|||
if (this.tableData.length <= 1) { |
|||
return Message.warning('最后一项不可删除！'); |
|||
} |
|||
this.tableData.splice(index, 1) |
|||
{ |
|||
value: 8, |
|||
label: "服务区异常", |
|||
}, |
|||
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) |
|||
}) |
|||
{ |
|||
value: 9, |
|||
label: "设施设备隐患", |
|||
}, |
|||
{ |
|||
value: 10, |
|||
label: "异常天气", |
|||
}, |
|||
{ |
|||
value: 11, |
|||
label: "其他事件", |
|||
}, |
|||
], |
|||
process: [], |
|||
id: 0, |
|||
}; |
|||
}, |
|||
computed: { |
|||
modelVisible: { |
|||
get() { |
|||
if (this.visible) { |
|||
this.getProcess(); |
|||
} |
|||
} |
|||
} |
|||
return this.visible; |
|||
}, |
|||
set(val) { |
|||
this.$emit("update:value", val); |
|||
}, |
|||
}, |
|||
}, |
|||
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; |
|||
} |
|||
}); |
|||
}); |
|||
}, |
|||
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: 836px; |
|||
// height: 768px; |
|||
min-height: 500px; |
|||
margin-top: 20px; |
|||
flex-direction: column; |
|||
display: flex; |
|||
gap: 9px; |
|||
width: 836px; |
|||
// height: 768px; |
|||
min-height: 500px; |
|||
margin-top: 20px; |
|||
flex-direction: column; |
|||
|
|||
.video-pic { |
|||
display: flex; |
|||
height: 150px; |
|||
gap: 15px |
|||
} |
|||
.video-pic { |
|||
display: flex; |
|||
height: 150px; |
|||
gap: 15px; |
|||
} |
|||
} |
|||
|
|||
.elButton { |
|||
background: #2ba8c3; |
|||
border-radius: 2px 2px 2px 2px; |
|||
color: #FFFFFF; |
|||
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; |
|||
background: #2ba8c3; |
|||
border-radius: 2px 2px 2px 2px; |
|||
border-color: #ffffff; |
|||
color: #ffffff; |
|||
} |
|||
</style> |
|||
|
|||
@ -1,475 +1,521 @@ |
|||
<template> |
|||
<Dialog v-model="modelVisible" :title="title"> |
|||
<div class="EventAddPlanDialog"> |
|||
<div class="first"> |
|||
<el-radio-group v-model="planName" @input="changeRadio"> |
|||
<el-radio-button v-for="item in info" :key="item.id" :label="item.planName"></el-radio-button> |
|||
</el-radio-group> |
|||
</div> |
|||
<Dialog v-model="modelVisible" :title="title" width="35vw"> |
|||
<div class="EventAddPlanDialog"> |
|||
<div class="first"> |
|||
<el-radio-group v-model="planName" @input="changeRadio"> |
|||
<el-radio-button |
|||
v-for="item in info" |
|||
:key="item.id" |
|||
:label="item.planName" |
|||
></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" :type="1"></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" :type="2"></FormTable> |
|||
</el-col> |
|||
</el-row> |
|||
</div> |
|||
</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" |
|||
:type="1" |
|||
></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" |
|||
:type="2" |
|||
></FormTable> |
|||
</el-col> |
|||
</el-row> |
|||
</div> |
|||
</div> |
|||
|
|||
<template #footer> |
|||
<!-- <Button v-if="isDisBtn" style="padding:0 24px; pointer-events: none; background-color: #C9C9C9;" |
|||
<template #footer> |
|||
<!-- <Button v-if="isDisBtn" style="padding:0 24px; pointer-events: none; background-color: #C9C9C9;" |
|||
@click.native="handleRestore" :loading="submitting">强制恢复</Button> --> |
|||
<Button style="padding:0 24px;" @click.native="handleSubmit(2)" :loading="submitting">强制恢复</Button> |
|||
<Button style="padding:0 24px;" @click.native="handleSubmit(1)" :loading="submitting">确认</Button> |
|||
<Button style="background: #C9C9C9;padding:0 24px;" |
|||
@click.native="modelVisible = false, submitting = false">取消</Button> |
|||
</template> |
|||
</Dialog> |
|||
<Button |
|||
style="padding: 0 24px" |
|||
@click.native="handleSubmit(2)" |
|||
:loading="submitting" |
|||
>强制恢复</Button |
|||
> |
|||
<Button |
|||
style="padding: 0 24px" |
|||
@click.native="handleSubmit(1)" |
|||
: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 '../formTable/index.vue'; |
|||
import Button from '@screen/components/Buttons/Button.vue'; |
|||
import request from '@/utils/request'; |
|||
import FormTable from "../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" |
|||
|
|||
import { throttle } from "lodash"; |
|||
|
|||
export default { |
|||
name: 'eventPlanDialog', |
|||
components: { |
|||
Dialog, |
|||
Button, |
|||
FormTable |
|||
name: "eventPlanDialog", |
|||
components: { |
|||
Dialog, |
|||
Button, |
|||
FormTable, |
|||
}, |
|||
model: { |
|||
prop: "visible", |
|||
event: "close", |
|||
}, |
|||
provide() { |
|||
return { |
|||
loadData: throttle(this.loadData, 1000), |
|||
getAutomatic: this.getTemplateAutomatic, |
|||
getOriginal: this.getBoardOriginal, |
|||
}; |
|||
}, |
|||
props: { |
|||
visible: Boolean, |
|||
activeName: String, |
|||
info: { |
|||
type: Array, |
|||
default: () => [], |
|||
}, |
|||
model: { |
|||
prop: 'visible', |
|||
event: 'close' |
|||
eventFormData: { |
|||
type: Object, |
|||
default: () => {}, |
|||
}, |
|||
provide() { |
|||
return { |
|||
loadData: throttle(this.loadData, 1000), |
|||
getAutomatic: this.getTemplateAutomatic, |
|||
getOriginal: this.getBoardOriginal |
|||
}, |
|||
data() { |
|||
return { |
|||
title: "事件确认", |
|||
isDisBtn: true, |
|||
dialogType: 1, |
|||
planId: 0, |
|||
planInfo: {}, |
|||
submitting: false, |
|||
secondFormData: [ |
|||
{ |
|||
deviceType: 1, |
|||
searchRule: 1, |
|||
qbb: "", |
|||
}, |
|||
], |
|||
thirdFormData: [ |
|||
{ |
|||
deviceType: 1, |
|||
searchRule: 1, |
|||
qbb: "", |
|||
}, |
|||
], |
|||
planName: "", |
|||
automaticInfo: {}, |
|||
dcExecuteAction: [], |
|||
deviceData: [], |
|||
automaticData: {}, |
|||
boardOriginalData: {}, |
|||
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: "小于(<)", |
|||
}, |
|||
], |
|||
}; |
|||
}, |
|||
mounted() {}, |
|||
computed: { |
|||
modelVisible: { |
|||
get() { |
|||
if (this.visible) { |
|||
if (this.info.length > 0) { |
|||
this.planName = this.info[0]?.planName || ""; |
|||
this.planInfo = this.info[0]; |
|||
this.initData(this.info[0]); |
|||
} |
|||
} |
|||
return this.visible; |
|||
}, |
|||
set(val) { |
|||
this.$emit("close", val); |
|||
}, |
|||
}, |
|||
props: { |
|||
visible: Boolean, |
|||
activeName: String, |
|||
info: { |
|||
type: Array, |
|||
default: () => [] |
|||
}, |
|||
eventFormData: { |
|||
type: Object, |
|||
default: () => { } |
|||
}, |
|||
methods: { |
|||
initData(data) { |
|||
console.log("data", data); |
|||
if (!data) return; |
|||
// this.planId = data.id; |
|||
let dcExecuteAction = data.dcExecuteAction; |
|||
let secondFormData = []; |
|||
let thirdFormData = []; |
|||
dcExecuteAction.forEach((it) => { |
|||
let action = { ...it }; |
|||
if (it.otherConfig) { |
|||
let config = JSON.parse(it.otherConfig); |
|||
let qbb = ""; |
|||
if (config.id) { |
|||
qbb = config.content; |
|||
config = { dcInfoBoardTemplate: config }; |
|||
} |
|||
// if (config.state) { |
|||
// config.gzms = config.state |
|||
// } |
|||
action = { ...it, ...config, qbb: qbb }; |
|||
} |
|||
if (it.deviceList) { |
|||
action.deviceList = it.deviceList |
|||
.split(",") |
|||
.map((str) => Number(str)); |
|||
} |
|||
if (it.actionType == 1) { |
|||
secondFormData.push(action); |
|||
} else if (it.actionType == 2) { |
|||
thirdFormData.push({ |
|||
...action, |
|||
qbb: "默认恢复该情报板上次常态化信息", |
|||
}); |
|||
} |
|||
}); |
|||
this.secondFormData = secondFormData; |
|||
this.thirdFormData = thirdFormData; |
|||
}, |
|||
data() { |
|||
return { |
|||
title: '事件确认', |
|||
isDisBtn: true, |
|||
dialogType: 1, |
|||
planId: 0, |
|||
planInfo: {}, |
|||
submitting: false, |
|||
secondFormData: [{ |
|||
deviceType: 1, |
|||
searchRule: 1, |
|||
qbb: '' |
|||
}], |
|||
thirdFormData: [{ |
|||
deviceType: 1, |
|||
searchRule: 1, |
|||
qbb: '' |
|||
}], |
|||
planName: '', |
|||
automaticInfo: {}, |
|||
dcExecuteAction: [], |
|||
deviceData: [], |
|||
automaticData: {}, |
|||
boardOriginalData: {}, |
|||
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: '路面结冰' |
|||
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; |
|||
}, |
|||
async getTemplateAutomatic() { |
|||
let url = ""; |
|||
let data = {}; |
|||
let otherConfig = {}; |
|||
let plan = this.info.find((it) => it.planName == this.planName); |
|||
console.log("plan", plan); |
|||
let action = plan.dcExecuteAction.find( |
|||
(it) => it.actionType == 1 && it.deviceType == 2 |
|||
); |
|||
if (action) { |
|||
otherConfig = JSON.parse(action.otherConfig); |
|||
if (this.activeName == "-1") { |
|||
//感知 |
|||
url = "/business/plans/warning/confirm"; |
|||
data = { |
|||
dcInfoBoardTemplate: otherConfig, |
|||
dcWarning: this.eventFormData, |
|||
}; |
|||
} else { |
|||
//交通 |
|||
url = "/business/plans/event/automatic"; |
|||
data = { |
|||
dcInfoBoardTemplate: otherConfig, |
|||
dcEvent: this.eventFormData, |
|||
}; |
|||
} |
|||
const result = await request({ |
|||
url: url, |
|||
method: "post", |
|||
data: data, |
|||
}); |
|||
if (result.code != 200) return Message.error(result?.msg); |
|||
this.automaticData = result.data; |
|||
} else { |
|||
console.log("没有情报板，不调用接口"); |
|||
this.automaticData = {}; |
|||
} |
|||
return this.automaticData; |
|||
}, |
|||
async getBoardOriginal() { |
|||
let url = ""; |
|||
let data = {}; |
|||
let plan = this.info.find((it) => it.planName == this.planName); |
|||
console.log("plan1", plan); |
|||
let action = plan.dcExecuteAction.find( |
|||
(it) => it.actionType == 1 && it.deviceType == 2 |
|||
); |
|||
if (action) { |
|||
if (this.activeName == "-1") { |
|||
//感知 |
|||
url = "/business/plans/warning/board/confirm"; |
|||
data = { |
|||
dcEmergencyPlans: { |
|||
...plan, |
|||
executeAction: action, |
|||
}, |
|||
{ |
|||
value: 8, |
|||
label: '路面积水' |
|||
dcWarning: this.eventFormData, |
|||
}; |
|||
} else { |
|||
//交通 |
|||
url = "/business/plans/event/board/confirm"; |
|||
data = { |
|||
dcEmergencyPlans: { |
|||
...plan, |
|||
executeAction: action, |
|||
}, |
|||
{ |
|||
value: 9, |
|||
label: '其他' |
|||
}], |
|||
conditionOptions: [ |
|||
// { |
|||
// value: 1, |
|||
// label: '大于(>)' |
|||
// }, |
|||
{ |
|||
value: 1, |
|||
label: '小于(<)' |
|||
}, |
|||
], |
|||
dcEvent: this.eventFormData, |
|||
}; |
|||
} |
|||
const result = await request({ |
|||
url: url, |
|||
method: "post", |
|||
data: data, |
|||
}); |
|||
if (result.code != 200) return Message.error(result?.msg); |
|||
this.boardOriginalData = result.data; |
|||
} else { |
|||
console.log("没有情报板，不调用接口"); |
|||
this.boardOriginalData = {}; |
|||
} |
|||
return this.boardOriginalData; |
|||
}, |
|||
mounted() { |
|||
|
|||
changeRadio(value) { |
|||
let plan = this.info.find((it) => it.planName == value); |
|||
this.planInfo = plan; |
|||
this.initData(plan); |
|||
}, |
|||
computed: { |
|||
modelVisible: { |
|||
get() { |
|||
if (this.visible) { |
|||
if (this.info.length > 0) { |
|||
this.planName = this.info[0]?.planName || ''; |
|||
this.planInfo = this.info[0]; |
|||
this.initData(this.info[0]); |
|||
} |
|||
} |
|||
return this.visible; |
|||
}, |
|||
set(val) { |
|||
this.$emit('close', val) |
|||
} |
|||
}, |
|||
formatData(it, value = 1) { |
|||
let data = { ...it, actionType: value, emergencyPlansId: id }; |
|||
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, |
|||
controlModelName: controlModelMap[it.controlModel], |
|||
state: it.state, |
|||
name: gzztMap[it.state], |
|||
}; |
|||
if (it.time && it?.time[0]) { |
|||
other = { |
|||
controlModel: it.controlModel, |
|||
controlModelName: controlModelMap[it.controlModel], |
|||
state: it.state, |
|||
name: gzztMap[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, |
|||
name: gzmsMap[it.gzms], |
|||
operationDuration: it.operationDuration, |
|||
}); |
|||
} |
|||
return data; |
|||
}, |
|||
methods: { |
|||
initData(data) { |
|||
console.log('data', data) |
|||
if (!data) return; |
|||
// this.planId = data.id; |
|||
let dcExecuteAction = data.dcExecuteAction; |
|||
let secondFormData = []; |
|||
let thirdFormData = []; |
|||
dcExecuteAction.forEach(it => { |
|||
let action = { ...it }; |
|||
if (it.otherConfig) { |
|||
let config = JSON.parse(it.otherConfig); |
|||
let qbb = '' |
|||
if (config.id) { |
|||
qbb = config.content; |
|||
config = { dcInfoBoardTemplate: config }; |
|||
} |
|||
// if (config.state) { |
|||
// config.gzms = config.state |
|||
// } |
|||
action = { ...it, ...config, qbb: qbb }; |
|||
} |
|||
if (it.deviceList) { |
|||
action.deviceList = it.deviceList.split(',').map(str => Number(str)); |
|||
} |
|||
if (it.actionType == 1) { |
|||
secondFormData.push(action); |
|||
} else if (it.actionType == 2) { |
|||
thirdFormData.push({ ...action, qbb: '默认恢复该情报板上次常态化信息' }); |
|||
} |
|||
}) |
|||
this.secondFormData = secondFormData; |
|||
this.thirdFormData = thirdFormData; |
|||
}, |
|||
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; |
|||
}, |
|||
async getTemplateAutomatic() { |
|||
let url = ''; |
|||
let data = {}; |
|||
let otherConfig = {}; |
|||
let plan = this.info.find(it => it.planName == this.planName); |
|||
console.log('plan', plan) |
|||
let action = plan.dcExecuteAction.find(it => it.actionType == 1 && it.deviceType == 2); |
|||
if (action) { |
|||
otherConfig = JSON.parse(action.otherConfig); |
|||
if (this.activeName == '-1') {//感知 |
|||
url = '/business/plans/warning/confirm'; |
|||
data = { |
|||
dcInfoBoardTemplate: otherConfig, |
|||
dcWarning: this.eventFormData |
|||
} |
|||
} else {//交通 |
|||
url = '/business/plans/event/automatic'; |
|||
data = { |
|||
dcInfoBoardTemplate: otherConfig, |
|||
dcEvent: this.eventFormData |
|||
} |
|||
} |
|||
const result = await request({ |
|||
url: url, |
|||
method: "post", |
|||
data: data |
|||
}) |
|||
if (result.code != 200) return Message.error(result?.msg); |
|||
this.automaticData = result.data; |
|||
} else { |
|||
console.log('没有情报板，不调用接口'); |
|||
this.automaticData = {}; |
|||
} |
|||
return this.automaticData; |
|||
}, |
|||
async getBoardOriginal() { |
|||
let url = ''; |
|||
let data = {}; |
|||
let plan = this.info.find(it => it.planName == this.planName); |
|||
console.log('plan1', plan) |
|||
let action = plan.dcExecuteAction.find(it => it.actionType == 1 && it.deviceType == 2); |
|||
if (action) { |
|||
if (this.activeName == '-1') {//感知 |
|||
url = '/business/plans/warning/board/confirm'; |
|||
data = { |
|||
dcEmergencyPlans: { |
|||
...plan, |
|||
executeAction: action |
|||
}, |
|||
dcWarning: this.eventFormData |
|||
} |
|||
} else {//交通 |
|||
url = '/business/plans/event/board/confirm'; |
|||
data = { |
|||
dcEmergencyPlans: { |
|||
...plan, |
|||
executeAction: action |
|||
}, |
|||
dcEvent: this.eventFormData |
|||
} |
|||
} |
|||
const result = await request({ |
|||
url: url, |
|||
method: "post", |
|||
data: data |
|||
}) |
|||
if (result.code != 200) return Message.error(result?.msg); |
|||
this.boardOriginalData = result.data; |
|||
} else { |
|||
console.log('没有情报板，不调用接口'); |
|||
this.boardOriginalData = {}; |
|||
} |
|||
return this.boardOriginalData; |
|||
}, |
|||
changeRadio(value) { |
|||
let plan = this.info.find(it => it.planName == value); |
|||
this.planInfo = plan; |
|||
this.initData(plan); |
|||
}, |
|||
formatData(it, value = 1) { |
|||
let data = { ...it, actionType: value, emergencyPlansId: id } |
|||
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, |
|||
controlModelName: controlModelMap[it.controlModel], |
|||
state: it.state, |
|||
name: gzztMap[it.state] |
|||
} |
|||
if (it.time && it?.time[0]) { |
|||
other = { |
|||
controlModel: it.controlModel, |
|||
controlModelName: controlModelMap[it.controlModel], |
|||
state: it.state, |
|||
name: gzztMap[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, |
|||
name: gzmsMap[it.gzms], |
|||
operationDuration: it.operationDuration, |
|||
}) |
|||
} |
|||
return data; |
|||
}, |
|||
handleSubmit(value = 1) { |
|||
// this.submitting = false; |
|||
let plan = { ...this.planInfo }; |
|||
let actions = plan.dcExecuteAction.filter(it => it.actionType == value); |
|||
plan.dcExecuteAction = actions; |
|||
|
|||
let reqData = { |
|||
operationType: value,//1-执行操作 2-恢复操作 |
|||
dcEmergencyPlans: plan, |
|||
dcEvent: this.eventFormData |
|||
}; |
|||
handleSubmit(value = 1) { |
|||
// this.submitting = false; |
|||
let plan = { ...this.planInfo }; |
|||
let actions = plan.dcExecuteAction.filter((it) => it.actionType == value); |
|||
plan.dcExecuteAction = actions; |
|||
|
|||
let url = ''; |
|||
if (this.activeName == '-1') {//感知 |
|||
url = '/business/plans/warning/confirm'; |
|||
reqData = { ...reqData, dcWarning: { ...reqData.dcEvent } } |
|||
} else {//交通 |
|||
url = '/business/plans/event/confirm'; |
|||
} |
|||
console.log('reqData', reqData) |
|||
// return; |
|||
request({ |
|||
url: url, |
|||
method: "post", |
|||
data: reqData |
|||
}).then((result) => { |
|||
if (result.code != 200) return Message.error(result?.msg); |
|||
Message.success("提交成功"); |
|||
this.$emit('close', false); |
|||
setTimeout(() => { |
|||
this.$emit('reInitData', true); |
|||
}, 100) |
|||
}).catch(() => { |
|||
Message.error("提交失败"); |
|||
}).finally(() => { |
|||
this.submitting = false; |
|||
}) |
|||
let reqData = { |
|||
operationType: value, //1-执行操作 2-恢复操作 |
|||
dcEmergencyPlans: plan, |
|||
dcEvent: this.eventFormData, |
|||
}; |
|||
|
|||
|
|||
}, |
|||
handleRestore() { |
|||
|
|||
} |
|||
} |
|||
} |
|||
let url = ""; |
|||
if (this.activeName == "-1") { |
|||
//感知 |
|||
url = "/business/plans/warning/confirm"; |
|||
reqData = { ...reqData, dcWarning: { ...reqData.dcEvent } }; |
|||
} else { |
|||
//交通 |
|||
url = "/business/plans/event/confirm"; |
|||
} |
|||
console.log("reqData", reqData); |
|||
// return; |
|||
request({ |
|||
url: url, |
|||
method: "post", |
|||
data: reqData, |
|||
}) |
|||
.then((result) => { |
|||
if (result.code != 200) return Message.error(result?.msg); |
|||
Message.success("提交成功"); |
|||
this.$emit("close", false); |
|||
setTimeout(() => { |
|||
this.$emit("reInitData", true); |
|||
}, 100); |
|||
}) |
|||
.catch(() => { |
|||
Message.error("提交失败"); |
|||
}) |
|||
.finally(() => { |
|||
this.submitting = false; |
|||
}); |
|||
}, |
|||
handleRestore() {}, |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.fade-enter-active, |
|||
.fade-leave-active { |
|||
transition: opacity .24s; |
|||
transition: opacity 0.24s; |
|||
} |
|||
|
|||
.fade-enter, |
|||
.fade-leave-to { |
|||
opacity: 0; |
|||
opacity: 0; |
|||
} |
|||
|
|||
.EventAddPlanDialog { |
|||
gap: 9px; |
|||
width: 1280px; |
|||
height: 310px; |
|||
display: flex; |
|||
flex-direction: column; |
|||
gap: 9px; |
|||
width: 1280px; |
|||
height: 310px; |
|||
display: flex; |
|||
flex-direction: column; |
|||
|
|||
.first, |
|||
.second, |
|||
.third { |
|||
padding: 5px 10px 8px; |
|||
background-color: #296887; |
|||
margin-bottom: 15px; |
|||
.first, |
|||
.second, |
|||
.third { |
|||
padding: 5px 10px 8px; |
|||
background-color: #296887; |
|||
margin-bottom: 15px; |
|||
|
|||
.text { |
|||
margin-top: 12px; |
|||
} |
|||
.text { |
|||
margin-top: 12px; |
|||
} |
|||
} |
|||
|
|||
.form { |
|||
flex: 1; |
|||
overflow-y: auto; |
|||
} |
|||
.form { |
|||
flex: 1; |
|||
overflow-y: auto; |
|||
} |
|||
|
|||
.footer { |
|||
display: flex; |
|||
justify-content: end; |
|||
gap: 15px; |
|||
} |
|||
.footer { |
|||
display: flex; |
|||
justify-content: end; |
|||
gap: 15px; |
|||
} |
|||
|
|||
// .disabledBtn { |
|||
// height: 24px; |
|||
// border-radius: 48px; |
|||
// background: #C9C9C9; |
|||
// padding: 0 24px; |
|||
// color: white !important; |
|||
// display: flex; |
|||
// align-items: center; |
|||
// justify-content: center; |
|||
// } |
|||
// .disabledBtn { |
|||
// height: 24px; |
|||
// border-radius: 48px; |
|||
// background: #C9C9C9; |
|||
// padding: 0 24px; |
|||
// color: white !important; |
|||
// display: flex; |
|||
// align-items: center; |
|||
// justify-content: center; |
|||
// } |
|||
} |
|||
</style> |
|||
</style> |
|||
|
|||
Loading…
Reference in new issue