王钦
12 months 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 |
|
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