From e14bd35fac4614d96ed8079fed9c872c019d8406 Mon Sep 17 00:00:00 2001 From: chenpingsen Date: Fri, 26 Jul 2024 15:15:32 +0800 Subject: [PATCH] =?UTF-8?q?add:=E7=85=A7=E6=98=8E=E7=B3=BB=E7=BB=9F?= =?UTF-8?q?=E6=8E=A5=E5=8F=A3=E4=B8=8E=E9=80=BB=E8=BE=91=E8=A1=A5=E5=85=85?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- hx-ai-intelligent/src/api/index.ts | 2 +- .../lightingManage/dialogStyle.less | 9 +- .../view/equipmentControl/lightingManage/tabs1.vue | 243 +++++++++++---------- 3 files changed, 138 insertions(+), 116 deletions(-) diff --git a/hx-ai-intelligent/src/api/index.ts b/hx-ai-intelligent/src/api/index.ts index cab3c80..0349a92 100644 --- a/hx-ai-intelligent/src/api/index.ts +++ b/hx-ai-intelligent/src/api/index.ts @@ -40,7 +40,7 @@ export const dict = async ({ }; /** - * 获取所有枚举(无需传参) + * 获取所有枚举(参数为数组，可以不传参) */ export const getAllEnum = async ({ api = `${BASE_URL}/operation/enum/getAllEnum`, diff --git a/hx-ai-intelligent/src/view/equipmentControl/lightingManage/dialogStyle.less b/hx-ai-intelligent/src/view/equipmentControl/lightingManage/dialogStyle.less index b3bf2f3..382533c 100644 --- a/hx-ai-intelligent/src/view/equipmentControl/lightingManage/dialogStyle.less +++ b/hx-ai-intelligent/src/view/equipmentControl/lightingManage/dialogStyle.less @@ -3,7 +3,7 @@ right: 496px; width: 500px; height: 100%; - z-index: 99; + z-index: 0; top: 0; bottom: 0; margin: auto; @@ -44,6 +44,9 @@ border-radius: 12px; border: 2px solid transparent; border-image: linear-gradient(to bottom, #0077ff, #00f6ff, #000000) 1; + .title-img { + padding-top: 6px; + } } .imgText { display: flex; @@ -68,6 +71,7 @@ rgba(255, 112, 3, 1) 91.21%, rgba(255, 129, 3, 1) 100% ); + cursor: pointer; } } .btn-box { @@ -97,6 +101,9 @@ width: 140px; height: 35px; line-height: 35px; + :first-child { + color: white; + } span { vertical-align: middle; } diff --git a/hx-ai-intelligent/src/view/equipmentControl/lightingManage/tabs1.vue b/hx-ai-intelligent/src/view/equipmentControl/lightingManage/tabs1.vue index a370239..55d6756 100644 --- a/hx-ai-intelligent/src/view/equipmentControl/lightingManage/tabs1.vue +++ b/hx-ai-intelligent/src/view/equipmentControl/lightingManage/tabs1.vue @@ -121,6 +121,9 @@
控制场景 +
多选模式下会修改当前选中的所有回路
@@ -135,15 +138,20 @@
- - - - + + + + + + + + +
@@ -153,7 +161,7 @@
变更内容 -
+
@@ -161,10 +169,17 @@ {{ item.name }}{{ item.regionName + ' > ' + item.deviceGroupName }}
- + + +
@@ -178,25 +193,38 @@
亮度
- 100lux + + {{ + item?.stateBefore?.brightness != undefined ? item.stateBefore.brightness : '--' + }} - 30lux + {{ + item?.stateAfter?.brightness != undefined ? item.stateAfter.brightness : '--' + }}
控制场景
- 手动 + {{ + item?.stateBefore?.scene?.label ? item.stateBefore.scene.label : '--' + }} - 自动 + {{ + item?.stateAfter?.scene?.label ? item.stateAfter.scene.label : '--' + }}
色温
- 4000k + {{ + item?.stateBefore?.color != undefined ? item.stateBefore.color : '--' + }} - 3800k + + {{ item?.stateAfter?.color != undefined ? item.stateAfter.color : '--' }} +
@@ -206,7 +234,7 @@
- +
@@ -239,7 +267,7 @@ controlScene.value = data.IlluminationScene; }); }; - // 以 1-1 作为默认线路 + // 以 1-1 作为默认回路 const setArea = () => { const data = props.treeData[0]; buttons2.value = data.childList; @@ -272,14 +300,14 @@ // 按钮区展开与收起状态 const showAllButtonsArea = ref(false); - // 被选中的分区 默认为1 + // 被选中的分区 默认为1 用于选中样式渲染 const selectedButton = ref('1'); // 分区切换 const changeArea = (button: any) => { // 当前选中按钮 selectedButton.value = button.id; - // 设置当前选中的线路 + // 设置当前选中的回路 buttons2.value = button.childList; // 重置按钮状态 emit('reset'); @@ -287,7 +315,7 @@ button.selected = true; // 改变俯视图样式 emit('changeArea', button.id); - // 当前选中线路 - 置空 + // 当前选中回路 - 置空 resetMode(); // 最近交互过的按钮 - 置空 handleButton.value = ''; @@ -299,7 +327,6 @@ // 最近交互过的按钮id，用于禁用和启用 const handleButton = ref(''); - // 面板启用/禁用状态 const isPlanEnabled2 = ref(true); // 面板启用/禁用切换事件 @@ -309,7 +336,7 @@ return message.info('请选择照明回路'); } // 获取最近交互过的按钮 - const btn: any = buttons2.value.find((button) => button.id === handleButton.value); + const btn: any = buttons2.value.find((button: any) => button.id === handleButton.value); let panel = +!btn.ctrlStatus; isLoading.value = true; http @@ -334,11 +361,12 @@ // 多选与单选切换事件 const selectAll = () => { selectAllCheckbox.value = false; - buttons2.value.forEach((button) => { + // 切换时清空当前所有选项 + buttons2.value.forEach((button: any) => { button.selected = false; }); singleSelection.value = !singleSelection.value; - // 当前选中线路 - 置空 + // 当前选中回路 - 置空 resetMode(); // 改变俯视图样式 emit('changeArea', [selectedButton.value]); @@ -351,8 +379,8 @@ let arr = [selectedButton.value]; // 全选 if (selectAllCheckbox.value) { - buttons2.value.forEach((item, index) => { - // 全选时，默认展示第一条线路的模式-场景按钮 + buttons2.value.forEach((item: any, index: number) => { + // 全选时，默认展示第一条回路的模式-场景按钮 if (index == 0) { thisButton2.value = item; } @@ -361,7 +389,7 @@ }); // 全不选 } else { - buttons2.value.forEach((item) => { + buttons2.value.forEach((item: any) => { item.selected = false; }); // 全不选时，隐藏模式-场景按钮 @@ -370,9 +398,11 @@ emit('changeArea', arr); }; - // 储存当前选中的线路 + // 储存当前选中的回路 const thisButton2 = ref({ code: '', + name: '', + pcode: '', mode: { value: -1, }, @@ -390,13 +420,12 @@ } else { isPlanEnabled2.value = false; } - // 选择时反控俯视图 let level1 = selectedButton.value; let level2 = button.id; // 单选模式，需将所有其他按钮设为false if (singleSelection.value) { - buttons2.value.forEach((item) => { + buttons2.value.forEach((item: any) => { item.selected = false; }); button.selected = !button.selected; @@ -405,7 +434,7 @@ // 多选模式传值 button.selected = !button.selected; const arr = [level1]; - buttons2.value.forEach((item) => { + buttons2.value.forEach((item: any) => { if (item.selected) { arr.push(item.id); } @@ -433,7 +462,7 @@ // 控制模式业务 ==================================================================== // 控制模式 - 按钮切换 - const selectButton3 = (button3) => { + const selectButton3 = (button3: any) => { let checked = thisButton2.value.mode; console.log(button3.value, '---', checked.value); // 如果点击了相同的按钮，则未作出修改 @@ -449,11 +478,9 @@ const controlMode = ref([]); // 场景枚举 const controlScene = ref([]); - // 控制场景 - 当前选择按钮 - const selectedButton4 = ref(null); // 控制场景 - 按钮切换 const selectButton4 = (button4) => { - // 当前选中的线路数据 + // 当前选中的回路数据 const data = thisButton2.value; // 修改前的数据 let before = data.scene.value; @@ -461,12 +488,12 @@ let after = button4.value; // 如果没有产生实质性的修改（修改前后相同，则跳出） if (before === after) { - return; + return message.info('未产生实际修改'); // 产生了修改 } else { thisButton2.value.scene.value = after; // 查询之前是否修改过 - const result = changeList.value.find((item, index) => { + const result = changeList.value.find((item: any, index: number) => { item.index = index; return item.deviceGroup == data.code; }); @@ -484,7 +511,7 @@ // 如果未产生过修改 } else { changeList.value.push({ - // 线路 + // 回路 deviceGroup: data.code, deviceGroupName: data.name, // 分区 @@ -498,112 +525,100 @@ } console.log(changeList.value, 'changeList'); } - thisButton2.value.scene.value = after; - console.log(thisButton2, '222222'); - console.log(button4, '44444'); }; - // 内侧弹窗 ======================================================================== - - // 需要修改的内容 - const changeList: any = ref([]); - // 需要向后端提交的修改内容 - const submitList = ref([]); - const cxList = ref([ - { - id: '1', - name: '站厅照明 1区', - manual: '手动', - automatic: '自动', - brightness: '100lux', - brightness2: '30lux', - manual2: '手动', - automatic2: '自动', - brightness3: '4000k', - brightness4: '3800k', - }, - { - id: '2', - name: '站厅照明 2区', - manual: '手动', - automatic: '自动', - brightness: '100lux', - brightness2: '30lux', - manual2: '手动', - automatic2: '自动', - brightness3: '4000k', - brightness4: '3800k', - }, - { - id: '3', - name: '站厅照明 3区', - manual: '手动', - automatic: '自动', - brightness: '100lux', - brightness2: '30lux', - manual2: '手动', - automatic2: '自动', - brightness3: '4000k', - brightness4: '3800k', - }, - ]); - //撤销 - const delBtn = () => { - cxList.value.pop(); - console.log(cxList.value.length); - - if (cxList.value.length === 0) { - executeVisible.value = false; - } - }; - - // 其他业务 ======================================================================== + // 底部按钮区 ====================================================================== const isLoading = ref(false); + // 执行按钮loading + const buttonLoading = ref(false); // 刷新 const refresh = () => { // 关闭执行弹窗 executeVisible.value = false; // 设置当前选中的序列 selectedButton.value = '1'; + // 重置选中样式 和 按钮选中状态 emit('changeArea', ['1']); emit('reset'); + // 默认选择第一个楼层 let data = props.treeData[0]; + // 清空保存的修改 + changeList.value = []; // 默认选中 data.selected = true; + // 默认选中 1-1 分区 回路 buttons2.value = data.childList; - selectedButton4.value = null; resetMode(); }; - // 执行确认 - const executeVisible = ref(false); + // 右下角的执行事件 const showModal = () => { + if (!changeList.value.length) { + return message.info('未产生任何修改'); + } + buttonLoading.value = true; http .post(lightingManage.getChangeList, { infoList: changeList.value, projectId: 'HLlmTZp8' }) .then((res) => { if (res.msg === 'success') { - isLoading.value = true; - console.log(res); + diffList.value = res.data; + executeVisible.value = true; } else { - isLoading.value = false; + message.warning('获取修改内容失败'); } + buttonLoading.value = false; + }) + .catch(() => { + buttonLoading.value = false; }); - executeVisible.value = true; }; + // 通用取消 + const changeCancel = () => {}; + + // 内侧弹窗 ======================================================================== - // 确定 - const changeConfirm = () => { - refresh(); + // 内侧弹窗显隐 + const executeVisible = ref(false); + // 修改模式 需要向后端提交的内容 + const changeList: any = ref([]); + // 展示修改前后差异的内容 + const diffList = ref([]); + //撤销 + const delBtn = (obj: any) => { + console.log(obj, '当前选择的修改内容'); + // 将treeData对应回路的数据改回，数据以后端为准 + const area = props.treeData.find((item: any) => { + return item.code == obj.region; + }); + const line = area.childList.find((item: any) => { + return item.code == obj.deviceGroup; + }); + line.scene.value = obj.stateBefore.scene.value; + // 将 changeList 与 diffList 中记录的修改移除 (排除极端情况) + changeList.value = changeList.value.filter((item: any) => { + return item.deviceGroup !== obj.deviceGroup; + }); + diffList.value = diffList.value.filter((item: any) => { + return item.deviceGroup !== obj.deviceGroup; + }); + console.log(changeList, 'changeList'); + console.log(diffList, 'diffList'); + // 如果移除后不再有修改内容，则隐藏弹出框 + if (changeList.value.length == 0) { + executeVisible.value = false; + } }; + const submitChangeList = () => {}; - // 取消 - const changeCancel = () => {}; + // 其他业务 ======================================================================== - // 将当前选择的线路置空 + // 将当前选择的回路置空 const resetMode = () => { thisButton2.value = { code: '', + name: '', + pcode: '', mode: { value: -1, }, @@ -613,11 +628,11 @@ }; }; - // 暴露 + // 向外暴露方法 defineExpose({ // 分区切换 changeArea, - // 线路切换 + // 回路切换 changeLine, });