zhangzhang
1 year ago
18 changed files with 3882 additions and 927 deletions
@ -0,0 +1,309 @@ |
|||
<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", "updateFormData"], |
|||
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; |
|||
} |
|||
console.log(result, "resultxxxxx") |
|||
batchFunctions({ |
|||
devices: devices, |
|||
functions: functions |
|||
}) |
|||
// Promise.all(promise) |
|||
.then(() => { |
|||
this.$emit("update:value", false); // this.modelVisible = false; |
|||
Message.success(`操作成功`); |
|||
this.updateFormData({ ...result, workMode: result.mode }); |
|||
}) |
|||
.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> |
|||
@ -0,0 +1,425 @@ |
|||
<template> |
|||
<div :style="{ |
|||
'max-height': isMultiControl ? '250px' : undefined, 'overflow-y': isMultiControl ? 'auto' : undefined, |
|||
'margin-left': isMultiControl ? '14px' : undefined |
|||
}"> |
|||
<ElTabs v-model="activeName" class="tabs" @tab-click="tabClick"> |
|||
<ElTabPane label="一般模式" name="first"> |
|||
<Form v-model="formData" class="form" ref="FormConfigRef" :formList="formList1" column="1" labelWidth="120px" /> |
|||
</ElTabPane> |
|||
<ElTabPane label="自定义模式" name="second"> |
|||
<!-- <div style="display: flex; margin: 20px 0"> |
|||
<p style="width: 115px">工作时长(分):</p> |
|||
<el-input-number v-model="onWorkStatus2" :min="0" :max="999" label="工作时长(s分):"></el-input-number> |
|||
</div> --> |
|||
<Table :data="tableData"> |
|||
<ElTableColumn prop="ds" label="段数"></ElTableColumn> |
|||
|
|||
<ElTableColumn prop="time" width="120" label="时间(毫秒)"> |
|||
<template slot-scope="scope"> |
|||
<div style="display: flex"> |
|||
<el-input-number style="width: 120px" v-model="scope.row.time" :min="0"></el-input-number> |
|||
</div> |
|||
</template> |
|||
</ElTableColumn> |
|||
|
|||
<ElTableColumn prop="A" label="线路A"> |
|||
<template slot-scope="scope"> |
|||
<el-switch active-value="1" inactive-value="0" v-model="scope.row.A" active-color="#13ce66" |
|||
inactive-color="#C9C9C9"> |
|||
</el-switch> |
|||
</template> |
|||
</ElTableColumn> |
|||
<ElTableColumn prop="B" label="线路B"> |
|||
<template slot-scope="scope"> |
|||
<el-switch active-value="1" inactive-value="0" v-model="scope.row.B" active-color="#13ce66" |
|||
inactive-color="#C9C9C9"> |
|||
</el-switch> |
|||
</template> |
|||
</ElTableColumn> |
|||
<ElTableColumn prop="C" label="线路C"> |
|||
<template slot-scope="scope"> |
|||
<el-switch active-value="1" inactive-value="0" v-model="scope.row.C" active-color="#13ce66" |
|||
inactive-color="#C9C9C9"> |
|||
</el-switch> |
|||
</template> |
|||
</ElTableColumn> |
|||
<ElTableColumn prop="D" label="线路D"> |
|||
<template slot-scope="scope"> |
|||
<el-switch active-value="1" inactive-value="0" v-model="scope.row.D" active-color="#13ce66" |
|||
inactive-color="#C9C9C9"> |
|||
</el-switch> |
|||
</template> |
|||
</ElTableColumn> |
|||
<ElTableColumn prop="E" label="线路E"> |
|||
<template slot-scope="scope"> |
|||
<el-switch active-value="1" inactive-value="0" v-model="scope.row.E" active-color="#13ce66" |
|||
inactive-color="#C9C9C9"> |
|||
</el-switch> |
|||
</template> |
|||
</ElTableColumn> |
|||
<ElTableColumn prop="F" label="线路F"> |
|||
<template slot-scope="scope"> |
|||
<el-switch active-value="1" inactive-value="0" v-model="scope.row.F" active-color="#13ce66" |
|||
inactive-color="#C9C9C9"> |
|||
</el-switch> |
|||
</template> |
|||
</ElTableColumn> |
|||
<ElTableColumn prop="G" label="线路G"> |
|||
<template slot-scope="scope"> |
|||
<el-switch active-value="1" inactive-value="0" v-model="scope.row.G" active-color="#13ce66" |
|||
inactive-color="#C9C9C9"> |
|||
</el-switch> |
|||
</template> |
|||
</ElTableColumn> |
|||
<ElTableColumn prop="H" label="线路H"> |
|||
<template slot-scope="scope"> |
|||
<el-switch active-value="1" inactive-value="0" v-model="scope.row.H" active-color="#13ce66" |
|||
inactive-color="#C9C9C9"> |
|||
</el-switch> |
|||
</template> |
|||
</ElTableColumn> |
|||
</Table> |
|||
</ElTabPane> |
|||
</ElTabs> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import Table from "@screen/components/Table.vue"; |
|||
import Dialog from "@screen/components/Dialog/index.vue"; |
|||
import Button from "@screen/components/Buttons/Button.vue"; |
|||
import Form from "@screen/components/FormConfig"; |
|||
import request from "@/utils/request"; |
|||
import { Message } from "element-ui"; |
|||
import { batchFunctions } from "@screen/pages/Home/components/RoadAndEvents/utils/httpList.js"; |
|||
import { multiResultShow } from "@screen/utils/common"; |
|||
export default { |
|||
name: "DeviceControlDialog", |
|||
components: { |
|||
Dialog, |
|||
Button, |
|||
Form, |
|||
Table, |
|||
}, |
|||
model: { |
|||
prop: "visible", |
|||
event: "update:value", |
|||
}, |
|||
props: { |
|||
visible: Boolean, |
|||
deviceId: String, |
|||
productId: String, |
|||
deviceType: String, |
|||
isMultiControl: Boolean, |
|||
selectItems: { |
|||
type: Array, |
|||
default: () => [] |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
submitting: false, |
|||
activeName: "first", |
|||
onWorkStatus2: 0, |
|||
formData: {}, |
|||
duan: [ |
|||
"A", |
|||
"B", |
|||
"C", |
|||
"D", |
|||
"E", |
|||
"F", |
|||
"G", |
|||
"H", |
|||
"I", |
|||
"J", |
|||
"K", |
|||
"L", |
|||
"M", |
|||
"N", |
|||
"O", |
|||
"P", |
|||
"Q", |
|||
"R", |
|||
"S", |
|||
"T", |
|||
], |
|||
tableData: [ |
|||
// { |
|||
// ds: 'A', |
|||
// time: 0, |
|||
// A: false, |
|||
// B: false, |
|||
// C: false, |
|||
// D: false, |
|||
// E: false, |
|||
// F: false, |
|||
// G: false, |
|||
// H: false, |
|||
// } |
|||
], |
|||
formList1: [ |
|||
{ |
|||
label: "工作模式:", |
|||
key: "controlType", |
|||
type: "select", |
|||
default: "1", |
|||
options: { |
|||
options: [ |
|||
{ |
|||
value: "0", |
|||
label: "激光关闭", |
|||
}, |
|||
{ |
|||
value: "1", |
|||
label: "常亮模式", |
|||
}, |
|||
{ |
|||
value: "2", |
|||
label: "间隔100ms闪烁模式", |
|||
}, |
|||
{ |
|||
value: "3", |
|||
label: "间隔200ms闪烁模式", |
|||
}, |
|||
{ |
|||
value: "4", |
|||
label: "间隔500ms闪烁模式", |
|||
}, |
|||
{ |
|||
value: "5", |
|||
label: "2次闪烁模式", |
|||
}, |
|||
{ |
|||
value: "6", |
|||
label: "SOS模式", |
|||
}, |
|||
{ |
|||
value: "7", |
|||
label: "自定义模式", |
|||
}, |
|||
], |
|||
}, |
|||
}, |
|||
{ |
|||
label: "工作时长(分):", |
|||
key: "onWorkStatus", |
|||
required: true, |
|||
default: 0, |
|||
type: "inputNumber", |
|||
options: { |
|||
min: 0, |
|||
max: 999, |
|||
}, |
|||
}, |
|||
], |
|||
formList2: [ |
|||
{ |
|||
label: "工作模式:", |
|||
key: "controlType", |
|||
type: "RadioGroup", |
|||
default: "00", |
|||
options: { |
|||
type: "circle", |
|||
options: [ |
|||
{ |
|||
key: "00", |
|||
label: "常量", |
|||
}, |
|||
{ |
|||
key: "01", |
|||
label: "闪烁", |
|||
}, |
|||
], |
|||
}, |
|||
}, |
|||
{ |
|||
label: "线路选择:", |
|||
key: "onWorkStatus2", |
|||
required: true, |
|||
type: "select", |
|||
options: { |
|||
placeholder: "请选择", |
|||
}, |
|||
}, |
|||
{ |
|||
label: "工作时长:", |
|||
key: "onWorkStatus", |
|||
required: true, |
|||
type: "select", |
|||
options: { |
|||
placeholder: "请选择", |
|||
}, |
|||
}, |
|||
], |
|||
rules: { |
|||
onWorkStatus: [ |
|||
{ required: true, message: "工作时长不能为空", trigger: "blur" }, |
|||
], |
|||
}, |
|||
}; |
|||
}, |
|||
mounted() { |
|||
this.$emit("update:submitting", false); |
|||
if (!this.isMultiControl) |
|||
this.initData(); |
|||
}, |
|||
methods: { |
|||
async initData() { |
|||
//查询模式 |
|||
let result = await this.requestURL("ASKMD"); |
|||
// if (result.data == 7) { |
|||
// this.activeName = "second"; |
|||
// this.tabClick(); |
|||
// } else { |
|||
this.formData.controlType = result.data + "" || "1"; |
|||
//查询时间 |
|||
let resultTime = await this.requestURL("ASKTM"); |
|||
this.formData.onWorkStatus = resultTime.data || 0; |
|||
this.activeName = "first"; |
|||
// } |
|||
}, |
|||
async requestURL(functionId, options = {}) { |
|||
let result = await request({ |
|||
url: `/business/device/functions/${this.deviceId}/${functionId}`, |
|||
method: "post", |
|||
data: options, |
|||
}); |
|||
if (result.code != 200) return Message.error(result?.msg); |
|||
//模式设定：SETMD；模式查询：ASKMD；时间设定：SETTM；时间查询：ASKTM；自定义设置：SETDF；自定义查询：ASKDF |
|||
return result; |
|||
}, |
|||
async tabClick() { |
|||
if (this.activeName == "second") { |
|||
if (this.isMultiControl) |
|||
this.tableData = this.duan.map(item => { |
|||
return { |
|||
ds: item, |
|||
time: 0, |
|||
A: false, |
|||
B: false, |
|||
C: false, |
|||
D: false, |
|||
E: false, |
|||
F: false, |
|||
G: false, |
|||
H: false, |
|||
} |
|||
}); |
|||
else { |
|||
// 查询自定义模式 |
|||
let result = await request({ |
|||
url: `/business/device/properties/latest/${this.deviceId}`, |
|||
method: "get", |
|||
}); |
|||
if (result.code != 200) return Message.error(result?.msg); |
|||
|
|||
this.tableData = []; |
|||
let tData = []; |
|||
result.data.forEach((item) => { |
|||
if (item.property == "TM") { |
|||
this.onWorkStatus2 = item.value; |
|||
} else if (item.property == "MD") { |
|||
} else { |
|||
let data = JSON.parse(item.formatValue || {}); |
|||
|
|||
tData.push({ ...data, ds: item.property }); |
|||
} |
|||
}); |
|||
tData.sort((a, b) => a.ds.toUpperCase().localeCompare(b.ds.toUpperCase())); |
|||
this.tableData = tData; |
|||
} |
|||
} else { |
|||
if (!this.isMultiControl) { |
|||
//查询时间 |
|||
let resultTime = await this.requestURL("ASKTM"); |
|||
this.formData.onWorkStatus = resultTime.data || 0; |
|||
this.activeName = "first"; |
|||
} |
|||
} |
|||
}, |
|||
async handleSubmit() { |
|||
if (this.isMultiControl && !this.selectItems.length) { |
|||
return Message.error("请至少选择一个设备!"); |
|||
} |
|||
const selectItems = this.selectItems.map(item => JSON.parse(item)); |
|||
let devices; |
|||
if (this.isMultiControl) devices = selectItems; |
|||
else devices = [{ |
|||
iotDeviceId: this.deviceId, |
|||
id: this.productId, |
|||
deviceType: this.deviceType |
|||
}] |
|||
this.$emit("update:submitting", true); |
|||
if (this.activeName == "first") { |
|||
//一般模式 |
|||
this.$refs.FormConfigRef.validate().then(async (formData) => { |
|||
//设定模式 |
|||
// await this.requestURL("SETMD", { SET: formData.controlType }); |
|||
//设定时长 |
|||
// let res = await this.requestURL("SETTM", { |
|||
// SET: formData.onWorkStatus, |
|||
// }); |
|||
let res = await batchFunctions({ |
|||
devices: devices, |
|||
functions: [ |
|||
{ "functionId": "SETMD", "params": { SET: formData.controlType } },//设定模式 |
|||
{ |
|||
"functionId": "SETTM", "params": { //设定时长 |
|||
SET: formData.onWorkStatus, |
|||
} |
|||
} |
|||
] |
|||
}); |
|||
if (res.code == 200) { |
|||
Message.success("设置成功！"); |
|||
this.$emit("update:value", false); |
|||
} |
|||
}); |
|||
} else if (this.activeName == "second") { |
|||
//自定义模式 |
|||
let rData = []; |
|||
|
|||
this.tableData.forEach((it, index) => { |
|||
rData.push({ |
|||
functionId: "SETDF", |
|||
params: { |
|||
order: 7, |
|||
time: it.time, |
|||
numberOfSegments: it.ds || this.duan[index], |
|||
A: Number(it.A), |
|||
B: Number(it.B), |
|||
C: Number(it.C), |
|||
D: Number(it.D), |
|||
E: Number(it.E), |
|||
F: Number(it.F), |
|||
G: Number(it.G), |
|||
H: Number(it.H), |
|||
} |
|||
}); |
|||
}); |
|||
|
|||
//设定自定义模式 |
|||
let res = await batchFunctions({ |
|||
devices: devices, |
|||
functions: rData |
|||
}); |
|||
if (res.code == 200) { |
|||
Message.success("设置成功！"); |
|||
this.$emit("update:value", false); |
|||
} |
|||
//设定时长 |
|||
// let res = await this.requestURL("SETTM", { SET: this.onWorkStatus2 }); |
|||
// if (res.code == 200) { |
|||
// Message.success("设置成功！"); |
|||
// this.$emit("update:value", false); |
|||
// } |
|||
} |
|||
this.$emit("update:submitting", false); |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" scoped></style> |
|||
File diff suppressed because it is too large
Loading…
Reference in new issue