|
|
@ -14,7 +14,7 @@ |
|
|
<template v-if="!showAllButtonsArea"> |
|
|
<template v-if="!showAllButtonsArea"> |
|
|
<button v-for="(button, index) in limitedButtons1" :key="index" |
|
|
<button v-for="(button, index) in limitedButtons1" :key="index" |
|
|
:class="{ btn: true, selected: button.selected }" @click="selectButton(button)"> |
|
|
:class="{ btn: true, selected: button.selected }" @click="selectButton(button)"> |
|
|
{{ button.regionName }} |
|
|
{{ button.name }} |
|
|
</button> |
|
|
</button> |
|
|
<div style="margin-top: 10px"> |
|
|
<div style="margin-top: 10px"> |
|
|
<span @click="showAllButtonsArea = true" class="openzm"><down-outlined /> 展开</span> |
|
|
<span @click="showAllButtonsArea = true" class="openzm"><down-outlined /> 展开</span> |
|
|
@ -23,7 +23,7 @@ |
|
|
<template v-else> |
|
|
<template v-else> |
|
|
<button v-for="(button, index) in props.treeData" :key="index" :class="{ btn: true, selected: button.selected }" |
|
|
<button v-for="(button, index) in props.treeData" :key="index" :class="{ btn: true, selected: button.selected }" |
|
|
@click="selectButton(button)"> |
|
|
@click="selectButton(button)"> |
|
|
{{ button.regionName }} |
|
|
{{ button.name }} |
|
|
</button> |
|
|
</button> |
|
|
<div style="margin-top: 10px"> |
|
|
<div style="margin-top: 10px"> |
|
|
<span @click="showAllButtonsArea = false" class="openzm"><up-outlined /> 回缩</span> |
|
|
<span @click="showAllButtonsArea = false" class="openzm"><up-outlined /> 回缩</span> |
|
|
@ -33,7 +33,7 @@ |
|
|
</div> |
|
|
</div> |
|
|
<!-- 照明回路部分 --> |
|
|
<!-- 照明回路部分 --> |
|
|
<div> |
|
|
<div> |
|
|
<div class="circuit-area" v-if="selectedButton"> |
|
|
<div class="circuit-area"> |
|
|
<div class="circuit-tab"></div> |
|
|
<div class="circuit-tab"></div> |
|
|
<span class="circuit-text">照明回路</span> |
|
|
<span class="circuit-text">照明回路</span> |
|
|
<div class="btn2"> |
|
|
<div class="btn2"> |
|
|
@ -50,12 +50,12 @@ |
|
|
</button> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="btnArea" v-if="selectedButton"> |
|
|
<div class="btnArea"> |
|
|
<template v-if="!showAllButtons"> |
|
|
<template v-if="!showAllButtons"> |
|
|
<button v-for="(button, index) in limitedButtons2" :key="index" |
|
|
<button v-for="(button, index) in limitedButtons2" :key="index" |
|
|
:class="{ btn: true, selected: button.selected }" class="zmhlbtn" @click="toggleSelection(button)"> |
|
|
:class="{ btn: true, selected: button.selected }" class="zmhlbtn" @click="toggleSelection(button)"> |
|
|
<stop-outlined v-if="button.panel" /> |
|
|
<stop-outlined v-if="button.ctrlStatus" /> |
|
|
{{ button.deviceName }} |
|
|
{{ button.name }} |
|
|
</button> |
|
|
</button> |
|
|
<div style="margin-top: 10px"> |
|
|
<div style="margin-top: 10px"> |
|
|
<span @click="showAllButtons = true" class="openzm"><down-outlined /> 展开</span> |
|
|
<span @click="showAllButtons = true" class="openzm"><down-outlined /> 展开</span> |
|
|
@ -64,8 +64,8 @@ |
|
|
<template v-else> |
|
|
<template v-else> |
|
|
<button v-for="(button, index) in buttons2" :key="index" |
|
|
<button v-for="(button, index) in buttons2" :key="index" |
|
|
:class="{ btn: true, selected: button.selected }" class="zmhlbtn" @click="toggleSelection(button)"> |
|
|
:class="{ btn: true, selected: button.selected }" class="zmhlbtn" @click="toggleSelection(button)"> |
|
|
<stop-outlined v-if="button.panel" /> |
|
|
<stop-outlined v-if="button.ctrlStatus" /> |
|
|
{{ button.deviceName }} |
|
|
{{ button.name }} |
|
|
</button> |
|
|
</button> |
|
|
<div style="margin-top: 10px"> |
|
|
<div style="margin-top: 10px"> |
|
|
<span @click="showAllButtons = false" class="openzm"><up-outlined /> 回缩</span> |
|
|
<span @click="showAllButtons = false" class="openzm"><up-outlined /> 回缩</span> |
|
|
@ -218,6 +218,7 @@ import { |
|
|
UpOutlined, |
|
|
UpOutlined, |
|
|
StopOutlined, |
|
|
StopOutlined, |
|
|
} from '@ant-design/icons-vue'; |
|
|
} from '@ant-design/icons-vue'; |
|
|
|
|
|
import { message } from 'ant-design-vue'; |
|
|
// 请求 |
|
|
// 请求 |
|
|
import { http } from '/nerv-lib/util/http'; |
|
|
import { http } from '/nerv-lib/util/http'; |
|
|
import { lightingManage } from '/@/api/IlluminationInfo'; |
|
|
import { lightingManage } from '/@/api/IlluminationInfo'; |
|
|
@ -237,7 +238,7 @@ const setArea = () => { |
|
|
// 修改当前选中的分区 |
|
|
// 修改当前选中的分区 |
|
|
selectedButton.value = props.nowArea |
|
|
selectedButton.value = props.nowArea |
|
|
// 设置当前显示的回路 |
|
|
// 设置当前显示的回路 |
|
|
buttons2.value = data.children |
|
|
buttons2.value = data.childList |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
// 与父组件的交互 =================================================================== |
|
|
// 与父组件的交互 =================================================================== |
|
|
@ -254,13 +255,19 @@ const props = defineProps({ |
|
|
} |
|
|
} |
|
|
}); |
|
|
}); |
|
|
// 向上传递修改选择样式 |
|
|
// 向上传递修改选择样式 |
|
|
const emit = defineEmits(['changeArea']); |
|
|
/** |
|
|
|
|
|
* @method changeArea 用于控制俯视图的选中状态 |
|
|
|
|
|
* @method reset 用于重置按钮区 |
|
|
|
|
|
*/ |
|
|
|
|
|
const emit = defineEmits(['changeArea','reset']); |
|
|
// 监听父组件选中的分区，并实时修改分区 |
|
|
// 监听父组件选中的分区，并实时修改分区 |
|
|
watch(() => props.nowArea, () => { |
|
|
watch(() => props.nowArea, () => { |
|
|
setArea() |
|
|
setArea() |
|
|
|
|
|
// 分区产生了切换， 线路的选中状态置空 |
|
|
|
|
|
handleButton.value = '' |
|
|
}) |
|
|
}) |
|
|
|
|
|
|
|
|
// 照明区域 ========================================================================== |
|
|
// 照明区域业务 ======================================================================= |
|
|
|
|
|
|
|
|
// 计划启用状态 |
|
|
// 计划启用状态 |
|
|
const isPlanEnabled = ref(false); |
|
|
const isPlanEnabled = ref(false); |
|
|
@ -278,33 +285,36 @@ const selectButton = (button: any) => { |
|
|
console.log(button,'button') |
|
|
console.log(button,'button') |
|
|
// 当前选中按钮 |
|
|
// 当前选中按钮 |
|
|
selectedButton.value = button.id; |
|
|
selectedButton.value = button.id; |
|
|
// 重置 |
|
|
|
|
|
initMenu(1) |
|
|
initMenu(1) |
|
|
button.selected = true |
|
|
button.selected = true |
|
|
buttons2.value = button.children |
|
|
buttons2.value = button.childList |
|
|
// 反选area |
|
|
|
|
|
emit('changeArea', button.id); |
|
|
emit('changeArea', button.id); |
|
|
|
|
|
handleButton.value = '' |
|
|
}; |
|
|
}; |
|
|
// 默认最多展示8个按钮 |
|
|
// 默认最多展示8个按钮 |
|
|
const limitedButtons1 = computed(() => props.treeData.slice(0, 8)); |
|
|
const limitedButtons1 = computed(() => props.treeData.slice(0, 8)); |
|
|
|
|
|
|
|
|
// 照明回路 ========================================================================== |
|
|
// 照明回路业务 ====================================================================== |
|
|
|
|
|
|
|
|
// 最近交互过的按钮，用于禁用和启用 |
|
|
// 最近交互过的按钮id，用于禁用和启用 |
|
|
const handleButton = ref(''); |
|
|
const handleButton = ref(''); |
|
|
|
|
|
|
|
|
// 面板启用/禁用状态 |
|
|
// 面板启用/禁用状态 |
|
|
const isPlanEnabled2 = ref(true); |
|
|
const isPlanEnabled2 = ref(true); |
|
|
// 面板启用/禁用切换事件 |
|
|
// 面板启用/禁用切换事件 |
|
|
const togglePlan2 = () => { |
|
|
const togglePlan2 = () => { |
|
|
// 获取最近交互的按钮 |
|
|
// 如果未交互任何按钮 |
|
|
|
|
|
if (handleButton.value == '') { |
|
|
|
|
|
return message.info('请选择照明回路'); |
|
|
|
|
|
} |
|
|
|
|
|
// 获取最近交互过的按钮 |
|
|
const btn = buttons2.value.find((button) => button.id === handleButton.value) |
|
|
const btn = buttons2.value.find((button) => button.id === handleButton.value) |
|
|
let panel = +(!btn.panel) |
|
|
let panel = +(!btn.ctrlStatus) |
|
|
isLoading.value = true |
|
|
isLoading.value = true |
|
|
http.get(lightingManage.setDisable, { deviceGroup: btn.deviceGroup, panel }).then(res => { |
|
|
http.get(lightingManage.setDisable, { deviceGroup: btn.code, panel }).then(res => { |
|
|
if (res.msg === 'success') { |
|
|
if (res.msg === 'success') { |
|
|
isPlanEnabled2.value = !isPlanEnabled2.value; |
|
|
isPlanEnabled2.value = !isPlanEnabled2.value; |
|
|
btn.panel = panel |
|
|
btn.ctrlStatus = panel |
|
|
isLoading.value = false |
|
|
isLoading.value = false |
|
|
} else { |
|
|
} else { |
|
|
isLoading.value = false |
|
|
isLoading.value = false |
|
|
@ -316,13 +326,14 @@ const togglePlan2 = () => { |
|
|
let singleSelection = ref(true); |
|
|
let singleSelection = ref(true); |
|
|
// 多选与单选切换事件 |
|
|
// 多选与单选切换事件 |
|
|
const selectAll = () => { |
|
|
const selectAll = () => { |
|
|
emit('changeArea', [selectedButton.value]) |
|
|
|
|
|
selectAllCheckbox.value = false |
|
|
selectAllCheckbox.value = false |
|
|
buttons2.value.forEach((button) => { |
|
|
buttons2.value.forEach((button) => { |
|
|
button.selected = false; |
|
|
button.selected = false; |
|
|
}); |
|
|
}); |
|
|
singleSelection.value = !singleSelection.value; |
|
|
singleSelection.value = !singleSelection.value; |
|
|
|
|
|
// 线路按钮被重置， |
|
|
showControlMode.value = false |
|
|
showControlMode.value = false |
|
|
|
|
|
emit('changeArea', [selectedButton.value]) |
|
|
}; |
|
|
}; |
|
|
|
|
|
|
|
|
// 全选状态 |
|
|
// 全选状态 |
|
|
@ -351,11 +362,12 @@ const toggleSelection = (button: any) => { |
|
|
// 存储一次按钮ID，用于禁用/启用交互 |
|
|
// 存储一次按钮ID，用于禁用/启用交互 |
|
|
handleButton.value = button.id |
|
|
handleButton.value = button.id |
|
|
// 根据按钮状态，展示禁用/启用按钮文本 |
|
|
// 根据按钮状态，展示禁用/启用按钮文本 |
|
|
if (button.panel) { |
|
|
if (button.ctrlStatus) { |
|
|
isPlanEnabled2.value = true |
|
|
isPlanEnabled2.value = true |
|
|
} else { |
|
|
} else { |
|
|
isPlanEnabled2.value = false |
|
|
isPlanEnabled2.value = false |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
// 选择时反控俯视图 |
|
|
// 选择时反控俯视图 |
|
|
let level1 = selectedButton.value |
|
|
let level1 = selectedButton.value |
|
|
let level2 = button.id |
|
|
let level2 = button.id |
|
|
@ -401,7 +413,7 @@ const showAllButtons = ref(false); |
|
|
// 默认最多展示8个按钮 |
|
|
// 默认最多展示8个按钮 |
|
|
const limitedButtons2 = computed(() => buttons2.value.slice(0, 8)); |
|
|
const limitedButtons2 = computed(() => buttons2.value.slice(0, 8)); |
|
|
|
|
|
|
|
|
// 控制模式 ======================================================================= |
|
|
// 控制模式业务 ==================================================================== |
|
|
|
|
|
|
|
|
// 决定该区域是否显示 |
|
|
// 决定该区域是否显示 |
|
|
const showControlMode = ref(false); |
|
|
const showControlMode = ref(false); |
|
|
@ -413,7 +425,7 @@ const selectButton3 = (button3) => { |
|
|
selectedButton4.value = null; // 清空选中的控制场景按钮 |
|
|
selectedButton4.value = null; // 清空选中的控制场景按钮 |
|
|
}; |
|
|
}; |
|
|
|
|
|
|
|
|
// 控制场景 ======================================================================= |
|
|
// 控制场景业务 ===================================================================== |
|
|
|
|
|
|
|
|
// 决定该区域是否显示 |
|
|
// 决定该区域是否显示 |
|
|
const showControlScene = ref(false); |
|
|
const showControlScene = ref(false); |
|
|
@ -431,7 +443,7 @@ const selectButton4 = (button4) => { |
|
|
selectedButton4.value = button4.label; |
|
|
selectedButton4.value = button4.label; |
|
|
}; |
|
|
}; |
|
|
|
|
|
|
|
|
// 灯具参数 ======================================================================== |
|
|
// 灯具参数表格 ===================================================================== |
|
|
|
|
|
|
|
|
// 灯具参数 - 表格数据 |
|
|
// 灯具参数 - 表格数据 |
|
|
const lightSource = ref([{ num: '8/10', light: '100', temperature: '4200' }]); |
|
|
const lightSource = ref([{ num: '8/10', light: '100', temperature: '4200' }]); |
|
|
@ -493,6 +505,7 @@ const delBtn = (id: any) => { |
|
|
executeVisible.value = false; |
|
|
executeVisible.value = false; |
|
|
} |
|
|
} |
|
|
}; |
|
|
}; |
|
|
|
|
|
|
|
|
// 其他业务 ======================================================================== |
|
|
// 其他业务 ======================================================================== |
|
|
|
|
|
|
|
|
const isLoading = ref(false) |
|
|
const isLoading = ref(false) |
|
|
@ -502,13 +515,14 @@ const initMenu = (tier: number) => { |
|
|
// 1 = 照明区域 - 切换时，重置以下所有菜单 |
|
|
// 1 = 照明区域 - 切换时，重置以下所有菜单 |
|
|
if (tier == 1) { |
|
|
if (tier == 1) { |
|
|
// 切换前，清除照明回路的选中状态 |
|
|
// 切换前，清除照明回路的选中状态 |
|
|
buttons2.value.forEach(item => { |
|
|
// buttons2.value.forEach(item => { |
|
|
item.selected = false |
|
|
// item.selected = false |
|
|
}) |
|
|
// }) |
|
|
// 切换后，清空所有选中状态 |
|
|
// // 切换后，清空所有选中状态 |
|
|
props.treeData.forEach(item => { |
|
|
// props.treeData.forEach(item => { |
|
|
item.selected = false |
|
|
// item.selected = false |
|
|
}) |
|
|
// }) |
|
|
|
|
|
emit('reset') |
|
|
// 控制模式 隐藏 |
|
|
// 控制模式 隐藏 |
|
|
showControlMode.value = false; |
|
|
showControlMode.value = false; |
|
|
// 控制场景 隐藏 |
|
|
// 控制场景 隐藏 |
|
|
@ -524,9 +538,17 @@ const initMenu = (tier: number) => { |
|
|
} |
|
|
} |
|
|
// 刷新 |
|
|
// 刷新 |
|
|
const refresh = () => { |
|
|
const refresh = () => { |
|
|
|
|
|
// 关闭执行弹窗 |
|
|
executeVisible.value = false |
|
|
executeVisible.value = false |
|
|
|
|
|
// 设置当前选中的序列 |
|
|
selectedButton.value = '1'; |
|
|
selectedButton.value = '1'; |
|
|
emit('changeArea', ['1']); |
|
|
emit('changeArea', ['1']); |
|
|
|
|
|
emit('reset') |
|
|
|
|
|
let data = props.treeData[0] |
|
|
|
|
|
// 默认选中 |
|
|
|
|
|
data.selected = true |
|
|
|
|
|
buttons2.value = data.childList |
|
|
|
|
|
|
|
|
showControlMode.value = false; |
|
|
showControlMode.value = false; |
|
|
showControlScene.value = false; |
|
|
showControlScene.value = false; |
|
|
selectedButton4.value = null; |
|
|
selectedButton4.value = null; |
|
|
|
xuziqiang
4 months ago