王钦
1 year ago
26 changed files with 2419 additions and 4062 deletions
|
Before Width: | Height: | Size: 2.0 KiB After Width: | Height: | Size: 2.0 KiB |
|
Before Width: | Height: | Size: 2.0 KiB After Width: | Height: | Size: 2.0 KiB |
|
Before Width: | Height: | Size: 2.1 KiB After Width: | Height: | Size: 2.0 KiB |
|
Before Width: | Height: | Size: 2.0 KiB After Width: | Height: | Size: 2.0 KiB |
File diff suppressed because it is too large
|
Before Width: | Height: | Size: 574 B After Width: | Height: | Size: 797 B |
@ -1,521 +0,0 @@ |
|||||
<template> |
|
||||
<Dialog v-model="modelVisible" :title="title" width="880px"> |
|
||||
<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> |
|
||||
|
|
||||
<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> |
|
||||
</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 { 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), |
|
||||
getAutomatic: this.getTemplateAutomatic, |
|
||||
getOriginal: this.getBoardOriginal, |
|
||||
}; |
|
||||
}, |
|
||||
props: { |
|
||||
visible: Boolean, |
|
||||
activeName: String, |
|
||||
info: { |
|
||||
type: Array, |
|
||||
default: () => [], |
|
||||
}, |
|
||||
eventFormData: { |
|
||||
type: Object, |
|
||||
default: () => {}, |
|
||||
}, |
|
||||
}, |
|
||||
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); |
|
||||
}, |
|
||||
}, |
|
||||
}, |
|
||||
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: inducerModeDic[it.controlModel], |
|
||||
state: it.state, |
|
||||
name: inducerWorkTypeDic[it.state], |
|
||||
}; |
|
||||
if (it.time && it?.time[0]) { |
|
||||
other = { |
|
||||
controlModel: it.controlModel, |
|
||||
controlModelName: inducerModeDic[it.controlModel], |
|
||||
state: it.state, |
|
||||
name: inducerWorkTypeDic[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, |
|
||||
}; |
|
||||
|
|
||||
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 0.24s; |
|
||||
} |
|
||||
|
|
||||
.fade-enter, |
|
||||
.fade-leave-to { |
|
||||
opacity: 0; |
|
||||
} |
|
||||
|
|
||||
.EventAddPlanDialog { |
|
||||
gap: 9px; |
|
||||
width: 1280px; |
|
||||
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; |
|
||||
} |
|
||||
|
|
||||
// .disabledBtn { |
|
||||
// height: 24px; |
|
||||
// border-radius: 48px; |
|
||||
// background: #C9C9C9; |
|
||||
// padding: 0 24px; |
|
||||
// color: white !important; |
|
||||
// display: flex; |
|
||||
// align-items: center; |
|
||||
// justify-content: center; |
|
||||
// } |
|
||||
} |
|
||||
</style> |
|
||||
@ -1,336 +0,0 @@ |
|||||
<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="searchRule" width="230"> |
|
||||
<template slot-scope="scope"> |
|
||||
<div class="plhx"> |
|
||||
<el-select v-model="scope.row.searchRule" placeholder="检索规则条件"> |
|
||||
<el-option v-for="item in zyOptions" :key="item.value" :label="item.label" |
|
||||
:value="item.value"> |
|
||||
</el-option> |
|
||||
</el-select> |
|
||||
|
|
||||
<el-input-number v-if="scope.row.searchRule == 2 || scope.row.searchRule == 3" |
|
||||
v-model="scope.row.number" :min="0" :max="9999" style="width: 130px;"></el-input-number> |
|
||||
<p v-if="scope.row.searchRule == 2 || scope.row.searchRule == 3">个</p> |
|
||||
|
|
||||
<el-input-number v-if="scope.row.searchRule == 4" v-model="scope.row.number" :min="0" |
|
||||
:max="9999" style="width: 130px;"></el-input-number> |
|
||||
<p v-if="scope.row.searchRule == 4" style="width: 56px;">公里</p> |
|
||||
</div> |
|
||||
|
|
||||
</template> |
|
||||
</ElTableColumn> |
|
||||
|
|
||||
<ElTableColumn prop="deviceList" width="400"> |
|
||||
<template slot-scope="scope"> |
|
||||
<div class="mjs"> |
|
||||
<el-select v-if="scope.row.searchRule == 1" v-model="scope.row.deviceList" placeholder="请选择设备" |
|
||||
multiple collapse-tags> |
|
||||
<el-option v-for="item in sbOptions" :key="item.id" :label="item.deviceName" |
|
||||
:value="item.id"> |
|
||||
</el-option> |
|
||||
</el-select> |
|
||||
<!-- 情报板 --> |
|
||||
<el-input @click.native="clickQbb(scope.$index)" v-if="scope.row.deviceType == 2" |
|
||||
placeholder="请选择" v-model="scope.row.qbb" readonly> |
|
||||
<i slot="suffix" class="el-input__icon el-icon-search"></i> |
|
||||
</el-input> |
|
||||
|
|
||||
<el-select v-if="scope.row.deviceType == 10" v-model="scope.row.gzms" placeholder="工作模式"> |
|
||||
<el-option v-for="item in gzmsOptions" :key="item.value" :label="item.label" |
|
||||
:value="item.value"></el-option> |
|
||||
</el-select> |
|
||||
<el-input-number v-if="scope.row.deviceType == 10" placeholder="时长(分钟)" |
|
||||
v-model="scope.row.operationDuration" :min="0" :max="999"></el-input-number> |
|
||||
|
|
||||
<el-select v-if="scope.row.deviceType == 12" v-model="scope.row.controlModel" |
|
||||
placeholder="请选择模式"> |
|
||||
<el-option label="手动模式" value="00"></el-option> |
|
||||
<el-option label="自动模式" value="01"></el-option> |
|
||||
<el-option label="万年历" value="02"></el-option> |
|
||||
</el-select> |
|
||||
<el-time-picker v-if="scope.row.controlModel == '01' && scope.row.deviceType == 12" |
|
||||
v-model="scope.row.time" is-range style="" range-separator="-" placeholder="选择时间" |
|
||||
value-format="HH:mm" format="HH:mm"> |
|
||||
</el-time-picker> |
|
||||
<el-select v-if="scope.row.deviceType == 12" v-model="scope.row.state" placeholder="工作状态"> |
|
||||
<el-option v-for="item in gzztOptions" :key="item.value" :label="item.label" |
|
||||
:value="item.value"></el-option> |
|
||||
</el-select> |
|
||||
|
|
||||
<el-input v-if="scope.row.deviceType == 5" v-model="scope.row.content" |
|
||||
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> |
|
||||
|
|
||||
<!-- 情报板弹窗 --> |
|
||||
<QbbDialog :visible="isShowDialog" :info="qbbData" :type="type" @close="onCloseDialog" |
|
||||
@dialogSubmit="dialogSubmit" /> |
|
||||
</div> |
|
||||
</template> |
|
||||
|
|
||||
<script> |
|
||||
import Table from '@screen/components/Table.vue'; |
|
||||
import Button from '@screen/components/Buttons/Button.vue'; |
|
||||
import request from "@/utils/request"; |
|
||||
import QbbDialog from "../qbbDialog/index.vue"; |
|
||||
import { Message } from 'element-ui' |
|
||||
import { planDeviceOptions } from "@screen/utils/enum.js"; |
|
||||
|
|
||||
|
|
||||
export default { |
|
||||
name: 'formTable', |
|
||||
components: { |
|
||||
Button, |
|
||||
Table, |
|
||||
QbbDialog |
|
||||
}, |
|
||||
// model: { |
|
||||
// prop: 'visible', |
|
||||
// event: 'update:value' |
|
||||
// }, |
|
||||
inject: ['loadData'], |
|
||||
props: { |
|
||||
eventType: Number, |
|
||||
type: Number, |
|
||||
tableData: { |
|
||||
type: Array, |
|
||||
default: () => [{ |
|
||||
deviceType: 1, |
|
||||
searchRule: 1, |
|
||||
qbb: '' |
|
||||
}] |
|
||||
} |
|
||||
}, |
|
||||
data() { |
|
||||
return { |
|
||||
// tableData: [ |
|
||||
// { |
|
||||
// deviceType: 1, |
|
||||
// searchRule: 1, |
|
||||
// qbb: '安全行驶' |
|
||||
// } |
|
||||
// ], |
|
||||
isShowDialog: false, |
|
||||
deviceOptions: planDeviceOptions, |
|
||||
zyOptions: [ |
|
||||
{ |
|
||||
value: 1, |
|
||||
label: '指定设备资源' |
|
||||
}, |
|
||||
{ |
|
||||
value: 2, |
|
||||
label: '事发上游最近' |
|
||||
}, |
|
||||
{ |
|
||||
value: 3, |
|
||||
label: '事发下游最近' |
|
||||
}, |
|
||||
{ |
|
||||
value: 4, |
|
||||
label: '最近公里数' |
|
||||
}, |
|
||||
], |
|
||||
gzztOptions: [ |
|
||||
{ |
|
||||
value: "01", |
|
||||
label: "常亮" |
|
||||
}, |
|
||||
{ |
|
||||
value: "02", |
|
||||
label: "流水" |
|
||||
}, |
|
||||
{ |
|
||||
value: "03", |
|
||||
label: "闪烁" |
|
||||
}, |
|
||||
{ |
|
||||
value: "04", |
|
||||
label: "关闭", |
|
||||
} |
|
||||
], |
|
||||
gzmsOptions: [ |
|
||||
{ |
|
||||
value: "SETMD0", |
|
||||
label: "激光关闭" |
|
||||
}, |
|
||||
{ |
|
||||
value: "SETMD1", |
|
||||
label: "常亮模式" |
|
||||
}, |
|
||||
{ |
|
||||
value: "SETMD2", |
|
||||
label: "间隔100ms闪烁模式" |
|
||||
}, |
|
||||
{ |
|
||||
value: "SETMD3", |
|
||||
label: "间隔200ms闪烁模式", |
|
||||
}, |
|
||||
{ |
|
||||
value: "SETMD4", |
|
||||
label: "间隔500ms闪烁模式", |
|
||||
}, |
|
||||
{ |
|
||||
value: "SETMD5", |
|
||||
label: "2次闪烁模式" |
|
||||
}, |
|
||||
{ |
|
||||
value: "SETMD6", |
|
||||
label: "SOS模式" |
|
||||
}, |
|
||||
{ |
|
||||
value: "SETMD7", |
|
||||
label: "自定义模式1", |
|
||||
}, |
|
||||
{ |
|
||||
value: "SETMD8", |
|
||||
label: "自定义模式2", |
|
||||
}, |
|
||||
{ |
|
||||
value: "SETMD9", |
|
||||
label: "自定义模式3", |
|
||||
} |
|
||||
], |
|
||||
qbbData: {}, |
|
||||
sbOptions: [], |
|
||||
deviceType: 1, |
|
||||
index: 1 |
|
||||
} |
|
||||
}, |
|
||||
async created() { |
|
||||
let loadData = await this.loadData(1); |
|
||||
// console.log('aa',loadData) |
|
||||
this.sbOptions = loadData; |
|
||||
}, |
|
||||
methods: { |
|
||||
initData() { |
|
||||
// request({ |
|
||||
// url: `business/device/query?deviceType=2`, |
|
||||
// method: "get", |
|
||||
// }).then((result) => { |
|
||||
// if (result.code != 200) return Message.error(result?.msg); |
|
||||
// this.sbOptions = result.data; |
|
||||
|
|
||||
// }).catch(() => { |
|
||||
// Message.error("查询可变信息标识失败"); |
|
||||
// }) |
|
||||
|
|
||||
}, |
|
||||
async changeDeviceType(value) { |
|
||||
this.deviceType = value; |
|
||||
console.log('value', value) |
|
||||
this.sbOptions = await this.loadData(value); |
|
||||
}, |
|
||||
onAdd(id) { |
|
||||
this.tableData.push({ |
|
||||
deviceType: 1, |
|
||||
searchRule: 1, |
|
||||
qbb: '' |
|
||||
}) |
|
||||
}, |
|
||||
onDel(index) { |
|
||||
if (this.tableData.length <= 1) { |
|
||||
return Message.warning('最后一项不可删除！'); |
|
||||
} |
|
||||
this.tableData.splice(index, 1) |
|
||||
}, |
|
||||
clickQbb(index) { |
|
||||
this.index = index; |
|
||||
// this.qbbData = this.tableData[index].dcInfoBoardTemplate; |
|
||||
console.log('this.type', this.type) |
|
||||
this.isShowDialog = true; |
|
||||
}, |
|
||||
onCloseDialog() { |
|
||||
this.isShowDialog = false; |
|
||||
}, |
|
||||
dialogSubmit(data) { |
|
||||
this.tableData[this.index].qbb = data.content; |
|
||||
this.tableData[this.index].otherConfig = JSON.stringify(data); |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
</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; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.ms { |
|
||||
width: 160px; |
|
||||
} |
|
||||
|
|
||||
.plhx { |
|
||||
display: flex; |
|
||||
} |
|
||||
|
|
||||
::v-deep { |
|
||||
.el-tag.el-tag--info { |
|
||||
max-width: 100px; |
|
||||
} |
|
||||
|
|
||||
.el-range-editor--medium .el-range__icon, |
|
||||
.el-range-editor--medium .el-range__close-icon { |
|
||||
display: none; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
} |
|
||||
|
|
||||
.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> |
|
||||
@ -1,381 +0,0 @@ |
|||||
<template> |
|
||||
<div> |
|
||||
|
|
||||
|
|
||||
<Dialog v-model="modelVisible" title="情报板确认"> |
|
||||
<div v-if="type == 1" class="EventAddPlanDialog"> |
|
||||
<h4>预案内容</h4> |
|
||||
<dev class="listBox disPid"> |
|
||||
<div class="tplItem"> |
|
||||
<BoardTplPreview class="boardPreview" boardWH="1400*200" :tpl="automaticData"></BoardTplPreview> |
|
||||
<div class="infoBtnBox infoBtnBoxSm"> |
|
||||
<p class="btn"> |
|
||||
<el-radio v-model="radio1" :label="1" @input="changeRadio(automaticData)" /> |
|
||||
</p> |
|
||||
<!-- <p @click="____onEditTemplate(automaticData)" class="btn btnEdit" /> --> |
|
||||
</div> |
|
||||
</div> |
|
||||
</dev> |
|
||||
<h4>自动生成</h4> |
|
||||
<dev class="listBox disPid"> |
|
||||
<div class="tplItem"> |
|
||||
<BoardTplPreview class="boardPreview" boardWH="1400*200" :tpl="automaticData"></BoardTplPreview> |
|
||||
<div class="infoBtnBox infoBtnBoxSm"> |
|
||||
<p class="btn"> |
|
||||
<el-radio v-model="radio1" :label="2" @input="changeRadio(automaticData)" /> |
|
||||
</p> |
|
||||
<!-- <p @click="____onEditTemplate(automaticData)" class="btn btnEdit" /> --> |
|
||||
</div> |
|
||||
</div> |
|
||||
</dev> |
|
||||
<h4>情报板模版</h4> |
|
||||
<vuescroll :ops="scrollOptions" class="listBox"> |
|
||||
<div v-for="(item) in templateAvailable" :key="item.dictValue"> |
|
||||
<h5>{{ item.dictLabel }}</h5> |
|
||||
<div v-for="(itm, indx) in item.list" :key="indx" class="tplItem"> |
|
||||
<BoardTplPreview class="boardPreview" boardWH="1400*200" :tpl="itm"></BoardTplPreview> |
|
||||
<div class="infoBtnBox infoBtnBoxSm"> |
|
||||
<!-- <p class="btn"> |
|
||||
<el-radio v-model="radio1" :label="itm.id" @input="changeRadio(itm)" /> |
|
||||
</p> --> |
|
||||
<p @click="____onEditTemplate(itm)" class="btn btnEdit" /> |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
</vuescroll> |
|
||||
</div> |
|
||||
<div v-if="type == 2" class="EventAddPlanDialog"> |
|
||||
<div v-for="(item, index) in Object.keys(originalData)" :key="index"> |
|
||||
<h4>{{ item }}</h4> |
|
||||
<dev class="listBox disPid"> |
|
||||
<div v-for="(it, idx) in originalData[item]" :key="idx" class="tplItem"> |
|
||||
<BoardTplPreview class="boardPreview" boardWH="1400*200" :tpl="it"></BoardTplPreview> |
|
||||
</div> |
|
||||
</dev> |
|
||||
</div> |
|
||||
|
|
||||
</div> |
|
||||
<template #footer v-if="type == 1"> |
|
||||
<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> |
|
||||
|
|
||||
<BoardInfoEditor @afterSubmit="____onEditSubmit" :mode="editDialog.mode" :type="editDialog.type" |
|
||||
:visible.sync="editDialog.visible" :screenSize="selectedSize" :tpl="editDialog.tpl"></BoardInfoEditor> |
|
||||
</div> |
|
||||
</template> |
|
||||
|
|
||||
<script> |
|
||||
import vuescroll from "vuescroll"; |
|
||||
import scrollOptions from "@/common/scrollbar.js"; |
|
||||
import BoardTplPreview from "@screen/components/infoBoard/BoardTplPreview.vue"; |
|
||||
import BoardInfoEditor from "@screen/components/infoBoard/BoardInfoEditor"; |
|
||||
import Dialog from "@screen/components/Dialog/index"; |
|
||||
import Button from '@screen/components/Buttons/Button.vue'; |
|
||||
import { getTemplateList } from "@/api/board/template"; |
|
||||
|
|
||||
export default { |
|
||||
name: 'qbbDialog', |
|
||||
components: { |
|
||||
Dialog, |
|
||||
Button, |
|
||||
vuescroll, |
|
||||
BoardTplPreview, |
|
||||
BoardInfoEditor |
|
||||
}, |
|
||||
model: { |
|
||||
prop: 'visible', |
|
||||
event: 'close' |
|
||||
}, |
|
||||
inject: ['getAutomatic', 'getOriginal'], |
|
||||
props: { |
|
||||
visible: Boolean, |
|
||||
type: { |
|
||||
type: Number, |
|
||||
default: 1 |
|
||||
}, |
|
||||
info: { |
|
||||
type: Object, |
|
||||
default: () => { } |
|
||||
} |
|
||||
}, |
|
||||
data() { |
|
||||
return { |
|
||||
submitting: false, |
|
||||
selectedSize: "", |
|
||||
scrollOptions, |
|
||||
templateAvailable: null, |
|
||||
tplCategory: [], |
|
||||
templateAll: [], |
|
||||
radio1: '', |
|
||||
itmData: {}, |
|
||||
automaticData: {}, |
|
||||
originalData: {}, |
|
||||
editDialog: { |
|
||||
mode: "", |
|
||||
type: "", |
|
||||
visible: false, |
|
||||
tpl: {}, |
|
||||
}, |
|
||||
} |
|
||||
}, |
|
||||
mounted() { |
|
||||
if (this.type == 1) { |
|
||||
this.initData(); |
|
||||
} else if (this.type == 2) { |
|
||||
this.getBoardOriginal(); |
|
||||
} |
|
||||
}, |
|
||||
computed: { |
|
||||
modelVisible: { |
|
||||
get() { |
|
||||
// if (this.visible2) { |
|
||||
// if (this.info && this.info.id) { |
|
||||
// this.radio1 = Number(this.info.id); |
|
||||
// } |
|
||||
// console.log('123', this.getTemplateAutomatic()); |
|
||||
// } |
|
||||
return this.visible; |
|
||||
}, |
|
||||
set(val) { |
|
||||
this.$emit('close', val) |
|
||||
} |
|
||||
}, |
|
||||
}, |
|
||||
methods: { |
|
||||
initData() { |
|
||||
if (this.tplCategory.length && this.templateAll.length) { |
|
||||
this.____setAvailableTemplate(); |
|
||||
} else { |
|
||||
Promise.all([ |
|
||||
this.____getTemplateCategory(), |
|
||||
this.____getAllTemplate(), |
|
||||
]).then((res) => { |
|
||||
this.____setAvailableTemplate(); |
|
||||
}); |
|
||||
this.getTemplateAutomatic(); |
|
||||
} |
|
||||
|
|
||||
}, |
|
||||
// 获取信息模板分类 |
|
||||
____getTemplateCategory() { |
|
||||
return this.getDicts("iot_template_category").then((res) => { |
|
||||
this.tplCategory = res.data; |
|
||||
}); |
|
||||
}, |
|
||||
//获取全部模版 |
|
||||
____getAllTemplate() { |
|
||||
return getTemplateList().then((res) => { |
|
||||
this.templateAll = res.data; |
|
||||
}); |
|
||||
}, |
|
||||
// 设置当前设备可用的模板 |
|
||||
____setAvailableTemplate() { |
|
||||
this.templateAvailable = []; |
|
||||
this.tplCategory.forEach((item, index) => { |
|
||||
let arr = this.templateAll["" + index]; |
|
||||
if (arr.length > 0) { |
|
||||
let temp = []; |
|
||||
arr.forEach((tpl) => { |
|
||||
if (tpl.screenSize) { |
|
||||
temp.push(tpl); |
|
||||
} |
|
||||
}); |
|
||||
if (temp.length > 0) { |
|
||||
this.templateAvailable.push({ |
|
||||
...item, |
|
||||
list: temp, |
|
||||
}); |
|
||||
} |
|
||||
} |
|
||||
}); |
|
||||
}, |
|
||||
____onEditTemplate(tpl) { |
|
||||
this.editDialog = { |
|
||||
visible: true, |
|
||||
mode: "edit", |
|
||||
type: "template", |
|
||||
tpl, |
|
||||
}; |
|
||||
}, |
|
||||
//提交之后的回调 |
|
||||
____onEditSubmit(para) { |
|
||||
this.editDialog.tpl = {}; |
|
||||
this.editDialog.visible = false; |
|
||||
|
|
||||
if (para.type == "device") { |
|
||||
if (para.mode == "edit") { |
|
||||
this.selectedBdMsg[this.boardItemEdtingIndex] = para.data; |
|
||||
} else { |
|
||||
this.selectedBdMsg.push(_.cloneDeep(para.data)); |
|
||||
} |
|
||||
} else if (para.mode == "toDevice") { |
|
||||
this.selectedBdMsg.push(_.cloneDeep(para.data)); |
|
||||
} else { |
|
||||
this.____refreshPageData(para); |
|
||||
} |
|
||||
}, |
|
||||
____refreshPageData(para) { |
|
||||
if (para.type == "template") { |
|
||||
this.____getAllTemplate().then((res) => { |
|
||||
this.____setAvailableTemplate(); |
|
||||
}); |
|
||||
} else { |
|
||||
} |
|
||||
}, |
|
||||
async getTemplateAutomatic() { |
|
||||
let data = await this.getAutomatic(); |
|
||||
console.log('dataaaa', data); |
|
||||
this.automaticData = data; |
|
||||
}, |
|
||||
async getBoardOriginal() { |
|
||||
let data = await this.getOriginal(); |
|
||||
console.log('datbbbbb', data); |
|
||||
this.originalData = data; |
|
||||
}, |
|
||||
changeRadio(data) { |
|
||||
this.itmData = data; |
|
||||
}, |
|
||||
handleSubmit() { |
|
||||
this.modelVisible = false; |
|
||||
this.$emit('dialogSubmit', this.itmData); |
|
||||
} |
|
||||
|
|
||||
|
|
||||
} |
|
||||
} |
|
||||
</script> |
|
||||
|
|
||||
<style lang="scss" scoped> |
|
||||
.listBox { |
|
||||
padding: 20px; |
|
||||
|
|
||||
.tplItem { |
|
||||
margin-right: 14px; |
|
||||
display: flex; |
|
||||
align-items: stretch; |
|
||||
padding-bottom: 10px; |
|
||||
|
|
||||
.boardPreview { |
|
||||
border: 1px solid rgba(61, 232, 255, 0.5); |
|
||||
// width: 560px; |
|
||||
// height:80px; |
|
||||
flex: 1; |
|
||||
} |
|
||||
|
|
||||
.infoBtnBox { |
|
||||
&.infoBtnBoxSm { |
|
||||
width: 60px; |
|
||||
} |
|
||||
|
|
||||
width: 110px; |
|
||||
height: 80px; |
|
||||
display: flex; |
|
||||
margin-left: 10px; |
|
||||
/* // border: solid 1px #05afe3; */ |
|
||||
border: 1px solid rgba(61, 232, 255, 0.5); |
|
||||
display: flex; |
|
||||
justify-content: space-around; |
|
||||
align-items: center; |
|
||||
|
|
||||
.btn { |
|
||||
background-repeat: no-repeat; |
|
||||
background-size: 100% 100%; |
|
||||
width: 15px; |
|
||||
height: 30px; |
|
||||
|
|
||||
&.btnApply { |
|
||||
background-image: url(~@/assets/jihe/images/button/toLeft.svg); |
|
||||
} |
|
||||
|
|
||||
&.btnEdit { |
|
||||
background-image: url(~@/assets/jihe/images/button/edit.svg); |
|
||||
} |
|
||||
|
|
||||
&.btnDelete { |
|
||||
background-image: url(~@/assets/jihe/images/button/delete.svg); |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
i { |
|
||||
font-size: 24px; |
|
||||
color: #666; |
|
||||
padding-left: 4px; |
|
||||
cursor: pointer; |
|
||||
caret-color: rgba(0, 0, 0, 0); |
|
||||
user-select: none; |
|
||||
} |
|
||||
|
|
||||
i:hover { |
|
||||
color: #05afe3; |
|
||||
} |
|
||||
|
|
||||
.disabledClass { |
|
||||
pointer-events: none; |
|
||||
cursor: auto !important; |
|
||||
color: #ccc; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.controlBox { |
|
||||
margin-top: 10px; |
|
||||
margin-bottom: 10px; |
|
||||
display: flex; |
|
||||
justify-content: center; |
|
||||
} |
|
||||
|
|
||||
.el-collapse { |
|
||||
max-height: 100% !important; |
|
||||
overflow: auto; |
|
||||
border-bottom: none; |
|
||||
border-top: none; |
|
||||
padding: 0 0.5vw; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.disPid { |
|
||||
padding: 0 20px !important; |
|
||||
} |
|
||||
|
|
||||
.fade-enter-active, |
|
||||
.fade-leave-active { |
|
||||
transition: opacity .24s; |
|
||||
} |
|
||||
|
|
||||
.fade-enter, |
|
||||
.fade-leave-to { |
|
||||
opacity: 0; |
|
||||
} |
|
||||
|
|
||||
.EventAddPlanDialog { |
|
||||
gap: 9px; |
|
||||
width: 650px; |
|
||||
height: 700px; |
|
||||
display: flex; |
|
||||
flex-direction: column; |
|
||||
|
|
||||
h4 { |
|
||||
margin: 0 0 5px 0; |
|
||||
} |
|
||||
|
|
||||
::v-deep { |
|
||||
.el-radio__label { |
|
||||
display: none; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.form { |
|
||||
flex: 1; |
|
||||
overflow-y: auto; |
|
||||
} |
|
||||
|
|
||||
.footer { |
|
||||
display: flex; |
|
||||
justify-content: end; |
|
||||
gap: 15px; |
|
||||
} |
|
||||
} |
|
||||
</style> |
|
||||
Loading…
Reference in new issue