7 changed files with 343 additions and 248 deletions
@ -0,0 +1,307 @@ |
|||||
|
<template> |
||||
|
<div class="DeviceControlDialog" :style="{ |
||||
|
|
||||
|
'margin-top': isMultiControl ? '15px' : undefined, |
||||
|
'width': isMultiControl ? '100%' : undefined, |
||||
|
}"> |
||||
|
<Form v-model="formData" class="form" ref="FormConfigRef" :formList="formList" column="1" labelWidth="120px" /> |
||||
|
|
||||
|
<div class="tips" v-if="formData.controlType === '01'"> |
||||
|
说明: 定时控制模式下,诱导灯在开始时间自动打开,结束时间自动关闭 |
||||
|
</div> |
||||
|
<div class="tips" v-if="formData.controlType === '02'"> |
||||
|
说明: 万年历自动模式下,诱导灯在白天会自动关闭,夜晚会自动打开 |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
|
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import Dialog from "@screen/components/Dialog/index.vue"; |
||||
|
import Button from "@screen/components/Buttons/Button.vue"; |
||||
|
import Form from "@screen/components/FormConfig"; |
||||
|
|
||||
|
import { cloneDeep } from "lodash"; |
||||
|
import { delay } from "@screen/utils/common.js"; |
||||
|
import request from "@/utils/request"; |
||||
|
|
||||
|
import { Message } from "element-ui"; |
||||
|
// import { axiosIns } from "@screen/utils/axios/auth.js"; |
||||
|
import { handle3CResult } from "@screen/utils/deviceControl.js"; |
||||
|
import { batchFunctions } from "@screen/pages/Home/components/RoadAndEvents/utils/httpList.js"; |
||||
|
import { multiResultShow } from "@screen/utils/common"; |
||||
|
|
||||
|
const workStatus = [ |
||||
|
{ |
||||
|
key: "00", |
||||
|
label: "不更新状态", |
||||
|
disabled: false, |
||||
|
}, |
||||
|
{ |
||||
|
key: "01", |
||||
|
label: "常亮", |
||||
|
}, |
||||
|
{ |
||||
|
key: "02", |
||||
|
label: "流水", |
||||
|
}, |
||||
|
{ |
||||
|
key: "03", |
||||
|
label: "闪烁", |
||||
|
}, |
||||
|
{ |
||||
|
key: "04", |
||||
|
label: "关闭", |
||||
|
disabled: false, |
||||
|
}, |
||||
|
]; |
||||
|
|
||||
|
export default { |
||||
|
name: "DeviceControlDialog", |
||||
|
components: { |
||||
|
Dialog, |
||||
|
Button, |
||||
|
Form, |
||||
|
}, |
||||
|
model: { |
||||
|
prop: "visible", |
||||
|
event: "update:value", |
||||
|
}, |
||||
|
props: { |
||||
|
visible: Boolean, |
||||
|
deviceId: String, |
||||
|
id: String, |
||||
|
deviceType: String, |
||||
|
isMultiControl: Boolean, |
||||
|
selectItems: { |
||||
|
type: Array, |
||||
|
default: () => [] |
||||
|
} |
||||
|
}, |
||||
|
inject: ["requestURL"], |
||||
|
data() { |
||||
|
return { |
||||
|
formData: {}, |
||||
|
formList: [ |
||||
|
{ |
||||
|
label: "类型:", |
||||
|
key: "controlType", |
||||
|
type: "RadioGroup", |
||||
|
default: "00", |
||||
|
ons: { |
||||
|
input: (value, { data }) => { |
||||
|
const oldFormData = this.oldFormData; |
||||
|
if (!oldFormData) return; |
||||
|
|
||||
|
this.formList[1].options.options.splice(-1, 1, { |
||||
|
...workStatus.slice(-1)[0], |
||||
|
disabled: value != "00", |
||||
|
}); |
||||
|
|
||||
|
this.formList[1].options.options.splice(0, 1, { |
||||
|
...workStatus[0], |
||||
|
disabled: value != "00", |
||||
|
}); |
||||
|
|
||||
|
switch (value) { |
||||
|
case "01": |
||||
|
if (["04", "00"].includes(data.onWorkStatus)) |
||||
|
data.onWorkStatus = null; |
||||
|
if (["04", "00"].includes(data.inWorkStatus)) |
||||
|
data.inWorkStatus = null; |
||||
|
|
||||
|
Array.isArray(oldFormData.displayTime) && |
||||
|
(data.displayTime = [...oldFormData.displayTime]); |
||||
|
break; |
||||
|
} |
||||
|
}, |
||||
|
}, |
||||
|
options: { |
||||
|
type: "circle", |
||||
|
options: [ |
||||
|
{ |
||||
|
key: "00", |
||||
|
label: "手动控制", |
||||
|
}, |
||||
|
{ |
||||
|
key: "01", |
||||
|
label: "自动控制", |
||||
|
}, |
||||
|
{ |
||||
|
key: "02", |
||||
|
label: "万年历", |
||||
|
}, |
||||
|
], |
||||
|
}, |
||||
|
}, |
||||
|
{ |
||||
|
label: "上行工作状态:", |
||||
|
key: "onWorkStatus", |
||||
|
required: true, |
||||
|
type: "select", |
||||
|
options: { |
||||
|
placeholder: "请选择", |
||||
|
options: workStatus, |
||||
|
}, |
||||
|
}, |
||||
|
{ |
||||
|
label: "下行工作状态:", |
||||
|
key: "inWorkStatus", |
||||
|
required: true, |
||||
|
type: "select", |
||||
|
options: { |
||||
|
placeholder: "请选择", |
||||
|
options: workStatus, |
||||
|
}, |
||||
|
}, |
||||
|
{ |
||||
|
label: "选择时间:", |
||||
|
key: "displayTime", |
||||
|
type: "timePicker", |
||||
|
required: true, |
||||
|
visible: (data) => data.controlType == "01", |
||||
|
options: { |
||||
|
isRange: true, |
||||
|
rangeSeparator: "至", |
||||
|
valueFormat: "HH:mm", |
||||
|
startPlaceholder: "开始时间", |
||||
|
endPlaceholder: "结束时间", |
||||
|
}, |
||||
|
}, |
||||
|
], |
||||
|
}; |
||||
|
}, |
||||
|
mounted() { |
||||
|
this.$emit("update:submitting", false); |
||||
|
if (!this.isMultiControl) |
||||
|
this.reDisplay(); |
||||
|
}, |
||||
|
methods: { |
||||
|
reDisplay() { |
||||
|
console.log(this.requestURL) |
||||
|
this.requestURL().then(async (data) => { |
||||
|
await delay(0); |
||||
|
const formData = this.$refs.FormConfigRef?.formData; |
||||
|
|
||||
|
formData.controlType = data.mode; |
||||
|
|
||||
|
await handle3CResult(data, formData, this.requestURL); |
||||
|
|
||||
|
this.oldFormData = { ...formData }; |
||||
|
}); |
||||
|
}, |
||||
|
handleSubmit() { |
||||
|
const result = {}, |
||||
|
formData = this.$refs.FormConfigRef?.formData; |
||||
|
|
||||
|
result.mode = formData.controlType; |
||||
|
|
||||
|
delete result.controlType; |
||||
|
|
||||
|
if (result.mode === "01") { |
||||
|
if (!formData.displayTime?.length) |
||||
|
return Message.error(`时间不能为空!`); |
||||
|
} |
||||
|
|
||||
|
if (!formData.onWorkStatus || !formData.inWorkStatus) |
||||
|
return Message.error(`工作状态不能为空!`); |
||||
|
|
||||
|
if (["01", "02"].includes(result.mode)) { |
||||
|
if (["04", "00"].includes(formData.onWorkStatus)) |
||||
|
return Message.error(`上行工作状态不能选择当前类型!`); |
||||
|
if (["04", "00"].includes(formData.inWorkStatus)) |
||||
|
return Message.error(`下行工作状态不能选择当前类型!`); |
||||
|
} |
||||
|
if (this.isMultiControl && !this.selectItems.length) { |
||||
|
return Message.error("请至少选择一个设备!"); |
||||
|
} |
||||
|
const selectItems = this.selectItems.map(item => JSON.parse(item)); |
||||
|
|
||||
|
result.onWorkStatus = formData.onWorkStatus; |
||||
|
result.inWorkStatus = formData.inWorkStatus; |
||||
|
|
||||
|
this.$emit("update:submitting", true); |
||||
|
|
||||
|
let devices; |
||||
|
if (this.isMultiControl) devices = selectItems; |
||||
|
else devices = [{ |
||||
|
iotDeviceId: this.deviceId, |
||||
|
id: this.id, |
||||
|
deviceType: this.deviceType |
||||
|
}] |
||||
|
const functions = []; |
||||
|
/** |
||||
|
* 接口 地址 |
||||
|
* |
||||
|
* https://www.showdoc.com.cn/2450725213006196/10877717880262686 |
||||
|
*/ |
||||
|
let promise = []; |
||||
|
|
||||
|
switch (result.mode) { |
||||
|
case "00": |
||||
|
// promise.push(this.requestURL("51", result)); |
||||
|
functions.push({ "functionId": "51", "params": result }) |
||||
|
break; |
||||
|
case "01": |
||||
|
case "02": |
||||
|
const options = { mode: result.mode }; |
||||
|
|
||||
|
if (result.mode === "01") { |
||||
|
options.startDisplayTime = formData.displayTime[0]; |
||||
|
options.endDisplayTime = formData.displayTime[1]; |
||||
|
} |
||||
|
functions.push({ |
||||
|
"functionId": "30", "params": { |
||||
|
onWorkStatus: result.onWorkStatus, |
||||
|
inWorkStatus: result.inWorkStatus, |
||||
|
} |
||||
|
}, |
||||
|
{ "functionId": "51", "params": options }) |
||||
|
// promise.push( |
||||
|
// this.requestURL("30", { |
||||
|
// onWorkStatus: result.onWorkStatus, |
||||
|
// inWorkStatus: result.inWorkStatus, |
||||
|
// }), |
||||
|
// this.requestURL("51", options) |
||||
|
// ); |
||||
|
break; |
||||
|
} |
||||
|
batchFunctions({ |
||||
|
devices: devices, |
||||
|
functions: functions |
||||
|
}) |
||||
|
// Promise.all(promise) |
||||
|
.then(() => { |
||||
|
this.$emit("update:value", false); // this.modelVisible = false; |
||||
|
Message.success(`操作成功`); |
||||
|
}) |
||||
|
.catch((err) => { |
||||
|
console.log( |
||||
|
"%c [ err ]-110-「DeviceControlDialog.vue」", |
||||
|
"font-size:15px; background:#547bf2; color:#98bfff;", |
||||
|
err |
||||
|
); |
||||
|
Message.error(`设备操作失败!`); |
||||
|
}) |
||||
|
.finally(() => { |
||||
|
this.$emit("update:submitting", false); |
||||
|
}); |
||||
|
}, |
||||
|
}, |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
.DeviceControlDialog { |
||||
|
width: 450px; |
||||
|
height: 210px; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
gap: 15px; |
||||
|
|
||||
|
.tips { |
||||
|
font-size: 12px; |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
Loading…
Reference in new issue