|
|
@ -5,15 +5,21 @@ |
|
|
<div class="light-area"> |
|
|
<div class="light-area"> |
|
|
<div class="light-area-tab"></div> |
|
|
<div class="light-area-tab"></div> |
|
|
<span class="light-area-text"> 照明区域 </span> |
|
|
<span class="light-area-text"> 照明区域 </span> |
|
|
<button class="plan" :class="{ enabled: isPlanEnabled, disabled: !isPlanEnabled }" @click="togglePlan"> |
|
|
<button |
|
|
|
|
|
class="plan" |
|
|
|
|
|
:class="{ enabled: isPlanEnabled, disabled: !isPlanEnabled }" |
|
|
|
|
|
@click="togglePlan"> |
|
|
{{ isPlanEnabled ? '计划启用' : '计划禁用' }} |
|
|
{{ isPlanEnabled ? '计划启用' : '计划禁用' }} |
|
|
</button> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
<!-- 照明区域按钮部分 --> |
|
|
<!-- 照明区域按钮部分 --> |
|
|
<div class="area"> |
|
|
<div class="area"> |
|
|
<template v-if="!showAllButtonsArea"> |
|
|
<template v-if="!showAllButtonsArea"> |
|
|
<button v-for="(button, index) in limitedButtons1" :key="index" |
|
|
<button |
|
|
:class="{ btn: true, selected: button.selected }" @click="changeArea(button)"> |
|
|
v-for="(button, index) in limitedButtons1" |
|
|
|
|
|
:key="index" |
|
|
|
|
|
:class="{ btn: true, selected: button.selected }" |
|
|
|
|
|
@click="changeArea(button)"> |
|
|
{{ button.name }} |
|
|
{{ button.name }} |
|
|
</button> |
|
|
</button> |
|
|
<div style="margin-top: 10px"> |
|
|
<div style="margin-top: 10px"> |
|
|
@ -21,7 +27,10 @@ |
|
|
</div> |
|
|
</div> |
|
|
</template> |
|
|
</template> |
|
|
<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="changeArea(button)"> |
|
|
@click="changeArea(button)"> |
|
|
{{ button.name }} |
|
|
{{ button.name }} |
|
|
</button> |
|
|
</button> |
|
|
@ -37,13 +46,20 @@ |
|
|
<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"> |
|
|
<button class="openPlan" :class="{ enabled2: isPlanEnabled2, disabled2: !isPlanEnabled2 }" @click="togglePlan2"> |
|
|
<button |
|
|
|
|
|
class="openPlan" |
|
|
|
|
|
:class="{ enabled2: isPlanEnabled2, disabled2: !isPlanEnabled2 }" |
|
|
|
|
|
@click="togglePlan2"> |
|
|
{{ isPlanEnabled2 ? '启用面板' : '禁用面板' }} |
|
|
{{ isPlanEnabled2 ? '启用面板' : '禁用面板' }} |
|
|
</button> |
|
|
</button> |
|
|
<a-switch v-model:checked="selectAllCheckbox" :disabled="singleSelection" :class="{ |
|
|
<a-switch |
|
|
|
|
|
v-model:checked="selectAllCheckbox" |
|
|
|
|
|
:disabled="singleSelection" |
|
|
|
|
|
:class="{ |
|
|
'blue-background': selectAllCheckbox, |
|
|
'blue-background': selectAllCheckbox, |
|
|
'grey-background': !selectAllCheckbox, |
|
|
'grey-background': !selectAllCheckbox, |
|
|
}" @change="toggleAllSelection" /> |
|
|
}" |
|
|
|
|
|
@change="toggleAllSelection" /> |
|
|
<button class="allBtn">全选</button> |
|
|
<button class="allBtn">全选</button> |
|
|
<button class="both" @click="selectAll"> |
|
|
<button class="both" @click="selectAll"> |
|
|
{{ singleSelection ? '多选' : '单选' }} |
|
|
{{ singleSelection ? '多选' : '单选' }} |
|
|
@ -52,8 +68,12 @@ |
|
|
</div> |
|
|
</div> |
|
|
<div class="btnArea"> |
|
|
<div class="btnArea"> |
|
|
<template v-if="!showAllButtons"> |
|
|
<template v-if="!showAllButtons"> |
|
|
<button v-for="(button, index) in limitedButtons2" :key="index" |
|
|
<button |
|
|
:class="{ btn: true, selected: button.selected }" class="zmhlbtn" @click="changeLine(button)"> |
|
|
v-for="(button, index) in limitedButtons2" |
|
|
|
|
|
:key="index" |
|
|
|
|
|
:class="{ btn: true, selected: button.selected }" |
|
|
|
|
|
class="zmhlbtn" |
|
|
|
|
|
@click="changeLine(button)"> |
|
|
<stop-outlined v-if="button.ctrlStatus" /> |
|
|
<stop-outlined v-if="button.ctrlStatus" /> |
|
|
{{ button.name }} |
|
|
{{ button.name }} |
|
|
</button> |
|
|
</button> |
|
|
@ -62,8 +82,12 @@ |
|
|
</div> |
|
|
</div> |
|
|
</template> |
|
|
</template> |
|
|
<template v-else> |
|
|
<template v-else> |
|
|
<button v-for="(button, index) in buttons2" :key="index" |
|
|
<button |
|
|
:class="{ btn: true, selected: button.selected }" class="zmhlbtn" @click="changeLine(button)"> |
|
|
v-for="(button, index) in buttons2" |
|
|
|
|
|
:key="index" |
|
|
|
|
|
:class="{ btn: true, selected: button.selected }" |
|
|
|
|
|
class="zmhlbtn" |
|
|
|
|
|
@click="changeLine(button)"> |
|
|
<stop-outlined v-if="button.ctrlStatus" /> |
|
|
<stop-outlined v-if="button.ctrlStatus" /> |
|
|
{{ button.name }} |
|
|
{{ button.name }} |
|
|
</button> |
|
|
</button> |
|
|
@ -81,10 +105,13 @@ |
|
|
</div> |
|
|
</div> |
|
|
<!-- 控制模式按钮部分 --> |
|
|
<!-- 控制模式按钮部分 --> |
|
|
<div class="control-mode-btn-area" v-show="thisButton2.code"> |
|
|
<div class="control-mode-btn-area" v-show="thisButton2.code"> |
|
|
<button v-for="(button3, index) in controlMode" :key="index" |
|
|
<button |
|
|
|
|
|
v-for="(button3, index) in controlMode" |
|
|
|
|
|
:key="index" |
|
|
class="btn" |
|
|
class="btn" |
|
|
:disabled="button3.value!= 3" |
|
|
:disabled="button3.value != 3" |
|
|
:class="{ selected: thisButton2.mode.value == button3.value }" @click="selectButton3(button3)"> |
|
|
:class="{ selected: thisButton2.mode.value == button3.value }" |
|
|
|
|
|
@click="selectButton3(button3)"> |
|
|
{{ button3.label }} |
|
|
{{ button3.label }} |
|
|
</button> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
@ -97,8 +124,11 @@ |
|
|
</div> |
|
|
</div> |
|
|
<!-- 控制场景按钮部分 --> |
|
|
<!-- 控制场景按钮部分 --> |
|
|
<div class="control-scene-btn-area" v-show="thisButton2.mode.value == 3"> |
|
|
<div class="control-scene-btn-area" v-show="thisButton2.mode.value == 3"> |
|
|
<button v-for="(button4, index) in controlScene" :key="index" |
|
|
<button |
|
|
:class="{ btn: true, selected: thisButton2.scene.value == button4.value }" @click="selectButton4(button4)"> |
|
|
v-for="(button4, index) in controlScene" |
|
|
|
|
|
:key="index" |
|
|
|
|
|
:class="{ btn: true, selected: thisButton2.scene.value == button4.value }" |
|
|
|
|
|
@click="selectButton4(button4)"> |
|
|
{{ button4.label }} |
|
|
{{ button4.label }} |
|
|
</button> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
@ -110,8 +140,7 @@ |
|
|
ok-text="确定" |
|
|
ok-text="确定" |
|
|
cancel-text="取消" |
|
|
cancel-text="取消" |
|
|
@confirm="changeConfirm" |
|
|
@confirm="changeConfirm" |
|
|
@cancel="changeCancel" |
|
|
@cancel="changeCancel"> |
|
|
> |
|
|
|
|
|
<button class="flushed">刷新</button> |
|
|
<button class="flushed">刷新</button> |
|
|
</a-popconfirm> |
|
|
</a-popconfirm> |
|
|
<button class="execute" @click="showModal">执行</button> |
|
|
<button class="execute" @click="showModal">执行</button> |
|
|
@ -129,7 +158,11 @@ |
|
|
<div class="imgText"> |
|
|
<div class="imgText"> |
|
|
<div class="zjzm"> |
|
|
<div class="zjzm"> |
|
|
<img class="title-img" src="/asset/image//bulbLogo/21961.png" alt="" /> |
|
|
<img class="title-img" src="/asset/image//bulbLogo/21961.png" alt="" /> |
|
|
<span class="title-text" style="font-size: 20px; font-weight: 500; color: rgba(255, 255, 255, 1)">{{ item.name }}</span> |
|
|
<span |
|
|
|
|
|
class="title-text" |
|
|
|
|
|
style="font-size: 20px; font-weight: 500; color: rgba(255, 255, 255, 1)" |
|
|
|
|
|
>{{ item.name }}</span |
|
|
|
|
|
> |
|
|
</div> |
|
|
</div> |
|
|
<button class="cxbtn" @click="delBtn(item.id)">撤销</button> |
|
|
<button class="cxbtn" @click="delBtn(item.id)">撤销</button> |
|
|
</div> |
|
|
</div> |
|
|
@ -143,9 +176,7 @@ |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="btn-item"> |
|
|
<div class="btn-item"> |
|
|
<div class="left"> |
|
|
<div class="left"> 亮度 </div> |
|
|
亮度 |
|
|
|
|
|
</div> |
|
|
|
|
|
<div class="right"> |
|
|
<div class="right"> |
|
|
<span>100lux</span> |
|
|
<span>100lux</span> |
|
|
<img src="/asset/image/bulbLogo/22406.png" alt="" /> |
|
|
<img src="/asset/image/bulbLogo/22406.png" alt="" /> |
|
|
@ -153,9 +184,7 @@ |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="btn-item"> |
|
|
<div class="btn-item"> |
|
|
<div class="left"> |
|
|
<div class="left"> 控制场景 </div> |
|
|
控制场景 |
|
|
|
|
|
</div> |
|
|
|
|
|
<div class="right"> |
|
|
<div class="right"> |
|
|
<span>手动</span> |
|
|
<span>手动</span> |
|
|
<img src="/asset/image/bulbLogo/22406.png" alt="" /> |
|
|
<img src="/asset/image/bulbLogo/22406.png" alt="" /> |
|
|
@ -163,9 +192,7 @@ |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="btn-item"> |
|
|
<div class="btn-item"> |
|
|
<div class="left"> |
|
|
<div class="left"> 色温 </div> |
|
|
色温 |
|
|
|
|
|
</div> |
|
|
|
|
|
<div class="right"> |
|
|
<div class="right"> |
|
|
<span>4000k</span> |
|
|
<span>4000k</span> |
|
|
<img src="/asset/image/bulbLogo/22406.png" alt="" /> |
|
|
<img src="/asset/image/bulbLogo/22406.png" alt="" /> |
|
|
@ -176,7 +203,7 @@ |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div style="width: 100%; height: 60px;"></div> |
|
|
<div style="width: 100%; height: 60px"></div> |
|
|
<div class="button-box"> |
|
|
<div class="button-box"> |
|
|
<button class="cancel" @click="executeVisible = false">取消</button> |
|
|
<button class="cancel" @click="executeVisible = false">取消</button> |
|
|
<button class="execute">执行</button> |
|
|
<button class="execute">执行</button> |
|
|
@ -186,150 +213,151 @@ |
|
|
</template> |
|
|
</template> |
|
|
|
|
|
|
|
|
<script setup lang="ts"> |
|
|
<script setup lang="ts"> |
|
|
import { ref, computed, onMounted } from 'vue'; |
|
|
import { ref, computed, onMounted } from 'vue'; |
|
|
import { |
|
|
import { DownOutlined, UpOutlined, StopOutlined } from '@ant-design/icons-vue'; |
|
|
DownOutlined, |
|
|
import { message } from 'ant-design-vue'; |
|
|
UpOutlined, |
|
|
// 请求 |
|
|
StopOutlined, |
|
|
import { http } from '/nerv-lib/util/http'; |
|
|
} from '@ant-design/icons-vue'; |
|
|
import { lightingManage } from '/@/api/IlluminationInfo'; |
|
|
import { message } from 'ant-design-vue'; |
|
|
import { getAllEnum } from '/@/api/index'; |
|
|
// 请求 |
|
|
|
|
|
import { http } from '/nerv-lib/util/http'; |
|
|
// 初始化 ========================================================================= |
|
|
import { lightingManage } from '/@/api/IlluminationInfo'; |
|
|
|
|
|
import { getAllEnum } from '/@/api/index' |
|
|
onMounted(() => { |
|
|
|
|
|
|
|
|
// 初始化 ========================================================================= |
|
|
|
|
|
|
|
|
|
|
|
onMounted(() => { |
|
|
|
|
|
// 默认选项 |
|
|
// 默认选项 |
|
|
setArea() |
|
|
setArea(); |
|
|
|
|
|
// 获得枚举 |
|
|
|
|
|
getEnum(['IlluminationMode', 'IlluminationScene']); |
|
|
|
|
|
}); |
|
|
// 获得枚举 |
|
|
// 获得枚举 |
|
|
getEnum(['IlluminationMode', 'IlluminationScene']) |
|
|
const getEnum = (arr: any) => { |
|
|
}) |
|
|
getAllEnum({ params: arr }).then((res) => { |
|
|
// 获得枚举 |
|
|
const data = res.data; |
|
|
const getEnum = (arr: any) => { |
|
|
|
|
|
getAllEnum({ params: arr }).then(res => { |
|
|
|
|
|
const data = res.data |
|
|
|
|
|
// 控制模式 |
|
|
// 控制模式 |
|
|
controlMode.value = data.IlluminationMode |
|
|
controlMode.value = data.IlluminationMode; |
|
|
// 控制场景 |
|
|
// 控制场景 |
|
|
controlScene.value = data.IlluminationScene |
|
|
controlScene.value = data.IlluminationScene; |
|
|
}) |
|
|
}); |
|
|
} |
|
|
}; |
|
|
// 以 1-1 作为默认线路 |
|
|
// 以 1-1 作为默认线路 |
|
|
const setArea = () => { |
|
|
const setArea = () => { |
|
|
const data = props.treeData[0] |
|
|
const data = props.treeData[0]; |
|
|
buttons2.value = data.childList |
|
|
buttons2.value = data.childList; |
|
|
} |
|
|
}; |
|
|
|
|
|
|
|
|
// 与父组件的交互 =================================================================== |
|
|
// 与父组件的交互 =================================================================== |
|
|
|
|
|
|
|
|
const props = defineProps({ |
|
|
const props = defineProps({ |
|
|
// 分区结构（照明区域 > 照明回路） |
|
|
// 分区结构（照明区域 > 照明回路） |
|
|
treeData: { |
|
|
treeData: { |
|
|
type: Array, |
|
|
type: Array, |
|
|
default: [] |
|
|
default: [], |
|
|
} |
|
|
}, |
|
|
}); |
|
|
}); |
|
|
// 向上传递修改选择样式 |
|
|
// 向上传递修改选择样式 |
|
|
/** |
|
|
/** |
|
|
* @method changeArea 用于控制俯视图的选中状态 |
|
|
* @method changeArea 用于控制俯视图的选中状态 |
|
|
* @method reset 用于重置按钮区 |
|
|
* @method reset 用于重置按钮区 |
|
|
*/ |
|
|
*/ |
|
|
const emit = defineEmits(['changeArea','reset']); |
|
|
const emit = defineEmits(['changeArea', 'reset']); |
|
|
|
|
|
|
|
|
// 照明区域业务 ======================================================================= |
|
|
// 照明区域业务 ======================================================================= |
|
|
|
|
|
|
|
|
// 计划启用状态 |
|
|
// 计划启用状态 |
|
|
const isPlanEnabled = ref(false); |
|
|
const isPlanEnabled = ref(false); |
|
|
// 计划启用切换事件 |
|
|
// 计划启用切换事件 |
|
|
const togglePlan = () => { |
|
|
const togglePlan = () => { |
|
|
isPlanEnabled.value = !isPlanEnabled.value; |
|
|
isPlanEnabled.value = !isPlanEnabled.value; |
|
|
}; |
|
|
}; |
|
|
|
|
|
|
|
|
// 按钮区展开与收起状态 |
|
|
// 按钮区展开与收起状态 |
|
|
const showAllButtonsArea = ref(false); |
|
|
const showAllButtonsArea = ref(false); |
|
|
// 被选中的分区 默认为1 |
|
|
// 被选中的分区 默认为1 |
|
|
const selectedButton = ref<string | undefined>('1'); |
|
|
const selectedButton = ref<string | undefined>('1'); |
|
|
|
|
|
|
|
|
// 分区切换 |
|
|
// 分区切换 |
|
|
const changeArea = (button: any) => { |
|
|
const changeArea = (button: any) => { |
|
|
// 当前选中按钮 |
|
|
// 当前选中按钮 |
|
|
selectedButton.value = button.id; |
|
|
selectedButton.value = button.id; |
|
|
// 设置当前选中的线路 |
|
|
// 设置当前选中的线路 |
|
|
buttons2.value = button.childList |
|
|
buttons2.value = button.childList; |
|
|
// 重置按钮状态 |
|
|
// 重置按钮状态 |
|
|
emit('reset') |
|
|
emit('reset'); |
|
|
// 设置选中按钮状态 |
|
|
// 设置选中按钮状态 |
|
|
button.selected = true |
|
|
button.selected = true; |
|
|
// 改变俯视图样式 |
|
|
// 改变俯视图样式 |
|
|
emit('changeArea', button.id); |
|
|
emit('changeArea', button.id); |
|
|
// 当前选中线路 - 置空 |
|
|
// 当前选中线路 - 置空 |
|
|
resetMode() |
|
|
resetMode(); |
|
|
// 最近交互过的按钮 - 置空 |
|
|
// 最近交互过的按钮 - 置空 |
|
|
handleButton.value = '' |
|
|
handleButton.value = ''; |
|
|
}; |
|
|
}; |
|
|
// 默认最多展示8个按钮 |
|
|
// 默认最多展示8个按钮 |
|
|
const limitedButtons1 = computed(() => props.treeData.slice(0, 8)); |
|
|
const limitedButtons1 = computed(() => props.treeData.slice(0, 8)); |
|
|
|
|
|
|
|
|
// 照明回路业务 ====================================================================== |
|
|
// 照明回路业务 ====================================================================== |
|
|
|
|
|
|
|
|
// 最近交互过的按钮id，用于禁用和启用 |
|
|
// 最近交互过的按钮id，用于禁用和启用 |
|
|
const handleButton = ref(''); |
|
|
const handleButton = ref(''); |
|
|
|
|
|
|
|
|
// 面板启用/禁用状态 |
|
|
// 面板启用/禁用状态 |
|
|
const isPlanEnabled2 = ref(true); |
|
|
const isPlanEnabled2 = ref(true); |
|
|
// 面板启用/禁用切换事件 |
|
|
// 面板启用/禁用切换事件 |
|
|
const togglePlan2 = () => { |
|
|
const togglePlan2 = () => { |
|
|
// 如果未交互任何按钮 |
|
|
// 如果未交互任何按钮 |
|
|
if (handleButton.value == '') { |
|
|
if (handleButton.value == '') { |
|
|
return message.info('请选择照明回路'); |
|
|
return message.info('请选择照明回路'); |
|
|
} |
|
|
} |
|
|
// 获取最近交互过的按钮 |
|
|
// 获取最近交互过的按钮 |
|
|
const btn: any = buttons2.value.find((button) => button.id === handleButton.value) |
|
|
const btn: any = buttons2.value.find((button) => button.id === handleButton.value); |
|
|
let panel = +(!btn.ctrlStatus) |
|
|
let panel = +!btn.ctrlStatus; |
|
|
isLoading.value = true |
|
|
isLoading.value = true; |
|
|
http.get(lightingManage.setDisable, { deviceGroup: btn.code, panel }).then(res => { |
|
|
http |
|
|
|
|
|
.get(lightingManage.setDisable, { deviceGroup: btn.code, panel }) |
|
|
|
|
|
.then((res) => { |
|
|
if (res.msg === 'success') { |
|
|
if (res.msg === 'success') { |
|
|
// 确认成功后 - 按钮文本取反 - 按钮布尔值修改 - 关闭loading |
|
|
// 确认成功后 - 按钮文本取反 - 按钮布尔值修改 - 关闭loading |
|
|
isPlanEnabled2.value = !isPlanEnabled2.value; |
|
|
isPlanEnabled2.value = !isPlanEnabled2.value; |
|
|
btn.ctrlStatus = panel |
|
|
btn.ctrlStatus = panel; |
|
|
isLoading.value = false |
|
|
isLoading.value = false; |
|
|
} else { |
|
|
} else { |
|
|
isLoading.value = false |
|
|
isLoading.value = false; |
|
|
} |
|
|
} |
|
|
}).catch(() => { isLoading.value = false }) |
|
|
}) |
|
|
}; |
|
|
.catch(() => { |
|
|
|
|
|
isLoading.value = false; |
|
|
// 是否单选，状态 |
|
|
}); |
|
|
let singleSelection = ref(true); |
|
|
}; |
|
|
// 多选与单选切换事件 |
|
|
|
|
|
const selectAll = () => { |
|
|
// 是否单选，状态 |
|
|
selectAllCheckbox.value = false |
|
|
let singleSelection = ref(true); |
|
|
|
|
|
// 多选与单选切换事件 |
|
|
|
|
|
const selectAll = () => { |
|
|
|
|
|
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; |
|
|
// 当前选中线路 - 置空 |
|
|
// 当前选中线路 - 置空 |
|
|
resetMode() |
|
|
resetMode(); |
|
|
// 改变俯视图样式 |
|
|
// 改变俯视图样式 |
|
|
emit('changeArea', [selectedButton.value]) |
|
|
emit('changeArea', [selectedButton.value]); |
|
|
}; |
|
|
}; |
|
|
|
|
|
|
|
|
// 全选状态 |
|
|
// 全选状态 |
|
|
const selectAllCheckbox = ref(false); |
|
|
const selectAllCheckbox = ref(false); |
|
|
// 全选切换事件（switch） |
|
|
// 全选切换事件（switch） |
|
|
const toggleAllSelection = () => { |
|
|
const toggleAllSelection = () => { |
|
|
let arr = [selectedButton.value] |
|
|
let arr = [selectedButton.value]; |
|
|
// 全选 |
|
|
// 全选 |
|
|
if (selectAllCheckbox.value) { |
|
|
if (selectAllCheckbox.value) { |
|
|
buttons2.value.forEach((item, index) => { |
|
|
buttons2.value.forEach((item, index) => { |
|
|
// 全选时，默认展示第一条线路的模式-场景按钮 |
|
|
// 全选时，默认展示第一条线路的模式-场景按钮 |
|
|
if (index == 0) { |
|
|
if (index == 0) { |
|
|
thisButton2.value = item |
|
|
thisButton2.value = item; |
|
|
} |
|
|
} |
|
|
item.selected = true; |
|
|
item.selected = true; |
|
|
arr.push(item.id) |
|
|
arr.push(item.id); |
|
|
}); |
|
|
}); |
|
|
// 全不选 |
|
|
// 全不选 |
|
|
} else { |
|
|
} else { |
|
|
@ -337,121 +365,121 @@ const toggleAllSelection = () => { |
|
|
item.selected = false; |
|
|
item.selected = false; |
|
|
}); |
|
|
}); |
|
|
// 全不选时，隐藏模式-场景按钮 |
|
|
// 全不选时，隐藏模式-场景按钮 |
|
|
resetMode() |
|
|
resetMode(); |
|
|
} |
|
|
} |
|
|
emit('changeArea', arr) |
|
|
emit('changeArea', arr); |
|
|
}; |
|
|
}; |
|
|
|
|
|
|
|
|
// 储存当前选中的线路 |
|
|
// 储存当前选中的线路 |
|
|
const thisButton2 = ref({ |
|
|
const thisButton2 = ref({ |
|
|
code: '', |
|
|
code: '', |
|
|
mode: { |
|
|
mode: { |
|
|
value: -1 |
|
|
value: -1, |
|
|
}, |
|
|
}, |
|
|
scene: { |
|
|
scene: { |
|
|
value: -1 |
|
|
value: -1, |
|
|
} |
|
|
}, |
|
|
}) |
|
|
}); |
|
|
// 照明回路的按钮切换 |
|
|
// 照明回路的按钮切换 |
|
|
const changeLine = (button: any) => { |
|
|
const changeLine = (button: any) => { |
|
|
// 存储一次按钮ID，用于禁用/启用交互 |
|
|
// 存储一次按钮ID，用于禁用/启用交互 |
|
|
handleButton.value = button.id |
|
|
handleButton.value = button.id; |
|
|
// 根据按钮状态，展示禁用/启用按钮文本 |
|
|
// 根据按钮状态，展示禁用/启用按钮文本 |
|
|
if (button.ctrlStatus) { |
|
|
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; |
|
|
// 单选模式，需将所有其他按钮设为false |
|
|
// 单选模式，需将所有其他按钮设为false |
|
|
if (singleSelection.value) { |
|
|
if (singleSelection.value) { |
|
|
buttons2.value.forEach(item => { |
|
|
buttons2.value.forEach((item) => { |
|
|
item.selected = false; |
|
|
item.selected = false; |
|
|
}); |
|
|
}); |
|
|
button.selected = !button.selected; |
|
|
button.selected = !button.selected; |
|
|
emit('changeArea', [level1, level2]) |
|
|
emit('changeArea', [level1, level2]); |
|
|
} else { |
|
|
} else { |
|
|
// 多选模式传值 |
|
|
// 多选模式传值 |
|
|
button.selected = !button.selected; |
|
|
button.selected = !button.selected; |
|
|
const arr = [level1] |
|
|
const arr = [level1]; |
|
|
buttons2.value.forEach(item => { |
|
|
buttons2.value.forEach((item) => { |
|
|
if (item.selected) { |
|
|
if (item.selected) { |
|
|
arr.push(item.id) |
|
|
arr.push(item.id); |
|
|
} |
|
|
} |
|
|
}); |
|
|
}); |
|
|
emit('changeArea', arr) |
|
|
emit('changeArea', arr); |
|
|
} |
|
|
} |
|
|
// 用于展示控制模式 |
|
|
// 用于展示控制模式 |
|
|
if (button.selected) { |
|
|
if (button.selected) { |
|
|
// 发生了选中事件 |
|
|
// 发生了选中事件 |
|
|
thisButton2.value = button |
|
|
thisButton2.value = button; |
|
|
} else { |
|
|
} else { |
|
|
// 未发生选中 或 多选的其中一个按钮被取消 |
|
|
// 未发生选中 或 多选的其中一个按钮被取消 |
|
|
resetMode() |
|
|
resetMode(); |
|
|
} |
|
|
} |
|
|
console.log(thisButton2,'button') |
|
|
console.log(thisButton2, 'button'); |
|
|
}; |
|
|
}; |
|
|
|
|
|
|
|
|
// 照明回路所有按钮 |
|
|
// 照明回路所有按钮 |
|
|
const buttons2 = ref([]); |
|
|
const buttons2 = ref([]); |
|
|
// 按钮区展开与收起状态 |
|
|
// 按钮区展开与收起状态 |
|
|
const showAllButtons = ref(false); |
|
|
const showAllButtons = ref(false); |
|
|
// 默认最多展示8个按钮 |
|
|
// 默认最多展示8个按钮 |
|
|
const limitedButtons2 = computed(() => buttons2.value.slice(0, 8)); |
|
|
const limitedButtons2 = computed(() => buttons2.value.slice(0, 8)); |
|
|
|
|
|
|
|
|
// 控制模式业务 ==================================================================== |
|
|
// 控制模式业务 ==================================================================== |
|
|
|
|
|
|
|
|
// 控制模式 - 按钮切换 |
|
|
// 控制模式 - 按钮切换 |
|
|
const selectButton3 = (button3) => { |
|
|
const selectButton3 = (button3) => { |
|
|
let checked = thisButton2.value.mode |
|
|
let checked = thisButton2.value.mode; |
|
|
console.log(button3.value,'---', checked.value) |
|
|
console.log(button3.value, '---', checked.value); |
|
|
// 如果点击了相同的按钮，则未作出修改 |
|
|
// 如果点击了相同的按钮，则未作出修改 |
|
|
if (checked.value === button3.value) { |
|
|
if (checked.value === button3.value) { |
|
|
return |
|
|
return; |
|
|
} |
|
|
} |
|
|
checked.value = button3.value |
|
|
checked.value = button3.value; |
|
|
}; |
|
|
}; |
|
|
|
|
|
|
|
|
// 控制场景业务 ===================================================================== |
|
|
// 控制场景业务 ===================================================================== |
|
|
|
|
|
|
|
|
// 控制模式枚举 |
|
|
// 控制模式枚举 |
|
|
const controlMode = ref([]) |
|
|
const controlMode = ref([]); |
|
|
// 场景枚举 |
|
|
// 场景枚举 |
|
|
const controlScene = ref([]) |
|
|
const controlScene = ref([]); |
|
|
// 控制场景 - 当前选择按钮 |
|
|
// 控制场景 - 当前选择按钮 |
|
|
const selectedButton4 = ref(null); |
|
|
const selectedButton4 = ref(null); |
|
|
// 控制场景 - 按钮切换 |
|
|
// 控制场景 - 按钮切换 |
|
|
const selectButton4 = (button4) => { |
|
|
const selectButton4 = (button4) => { |
|
|
// 当前选中的线路数据 |
|
|
// 当前选中的线路数据 |
|
|
const data = thisButton2.value |
|
|
const data = thisButton2.value; |
|
|
// 修改前的数据 |
|
|
// 修改前的数据 |
|
|
let before = data.scene.value |
|
|
let before = data.scene.value; |
|
|
// 修改后的数据 |
|
|
// 修改后的数据 |
|
|
let after = button4.value |
|
|
let after = button4.value; |
|
|
// 如果没有产生实质性的修改（修改前后相同，则跳出） |
|
|
// 如果没有产生实质性的修改（修改前后相同，则跳出） |
|
|
if (before === after) { |
|
|
if (before === after) { |
|
|
return |
|
|
return; |
|
|
// 产生了修改 |
|
|
// 产生了修改 |
|
|
} else { |
|
|
} else { |
|
|
thisButton2.value.scene.value = after |
|
|
thisButton2.value.scene.value = after; |
|
|
// 查询之前是否修改过 |
|
|
// 查询之前是否修改过 |
|
|
const result = changeList.value.find((item, index) => { |
|
|
const result = changeList.value.find((item, index) => { |
|
|
item.index = index |
|
|
item.index = index; |
|
|
return item.deviceGroup == data.code |
|
|
return item.deviceGroup == data.code; |
|
|
}) |
|
|
}); |
|
|
// 如果已产生过修改 |
|
|
// 如果已产生过修改 |
|
|
if (result) { |
|
|
if (result) { |
|
|
// 改回了原有的值，则从数组中移除 |
|
|
// 改回了原有的值，则从数组中移除 |
|
|
if (after == result.before) { |
|
|
if (after == result.before) { |
|
|
changeList.value.splice(result.index, 1) |
|
|
changeList.value.splice(result.index, 1); |
|
|
// 修改为新值，则只修改after |
|
|
// 修改为新值，则只修改after |
|
|
} else { |
|
|
} else { |
|
|
result.scene = after |
|
|
result.scene = after; |
|
|
// 临时flag，用后移除 |
|
|
// 临时flag，用后移除 |
|
|
delete result.index |
|
|
delete result.index; |
|
|
} |
|
|
} |
|
|
// 如果未产生过修改 |
|
|
// 如果未产生过修改 |
|
|
} else { |
|
|
} else { |
|
|
@ -465,24 +493,24 @@ const selectButton4 = (button4) => { |
|
|
// 修改前 |
|
|
// 修改前 |
|
|
before: before, |
|
|
before: before, |
|
|
// 修改后 |
|
|
// 修改后 |
|
|
scene: after |
|
|
scene: after, |
|
|
}) |
|
|
}); |
|
|
} |
|
|
} |
|
|
console.log(changeList.value, 'changeList') |
|
|
console.log(changeList.value, 'changeList'); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
thisButton2.value.scene.value = after |
|
|
thisButton2.value.scene.value = after; |
|
|
console.log(thisButton2,'222222') |
|
|
console.log(thisButton2, '222222'); |
|
|
console.log(button4,'44444') |
|
|
console.log(button4, '44444'); |
|
|
}; |
|
|
}; |
|
|
|
|
|
|
|
|
// 内侧弹窗 ======================================================================== |
|
|
// 内侧弹窗 ======================================================================== |
|
|
|
|
|
|
|
|
// 需要修改的内容 |
|
|
// 需要修改的内容 |
|
|
const changeList: any = ref([]) |
|
|
const changeList: any = ref([]); |
|
|
// 需要向后端提交的修改内容 |
|
|
// 需要向后端提交的修改内容 |
|
|
const submitList = ref([]) |
|
|
const submitList = ref([]); |
|
|
const cxList = ref([ |
|
|
const cxList = ref([ |
|
|
{ |
|
|
{ |
|
|
id: '1', |
|
|
id: '1', |
|
|
name: '站厅照明 1区', |
|
|
name: '站厅照明 1区', |
|
|
@ -519,82 +547,81 @@ const cxList = ref([ |
|
|
brightness3: '4000k', |
|
|
brightness3: '4000k', |
|
|
brightness4: '3800k', |
|
|
brightness4: '3800k', |
|
|
}, |
|
|
}, |
|
|
]); |
|
|
]); |
|
|
//撤销 |
|
|
//撤销 |
|
|
const delBtn = () => { |
|
|
const delBtn = () => { |
|
|
cxList.value.pop(); |
|
|
cxList.value.pop(); |
|
|
console.log(cxList.value.length); |
|
|
console.log(cxList.value.length); |
|
|
|
|
|
|
|
|
if (cxList.value.length === 0) { |
|
|
if (cxList.value.length === 0) { |
|
|
executeVisible.value = false; |
|
|
executeVisible.value = false; |
|
|
} |
|
|
} |
|
|
}; |
|
|
}; |
|
|
|
|
|
|
|
|
// 其他业务 ======================================================================== |
|
|
// 其他业务 ======================================================================== |
|
|
|
|
|
|
|
|
const isLoading = ref(false) |
|
|
const isLoading = ref(false); |
|
|
// 刷新 |
|
|
// 刷新 |
|
|
const refresh = () => { |
|
|
const refresh = () => { |
|
|
// 关闭执行弹窗 |
|
|
// 关闭执行弹窗 |
|
|
executeVisible.value = false |
|
|
executeVisible.value = false; |
|
|
// 设置当前选中的序列 |
|
|
// 设置当前选中的序列 |
|
|
selectedButton.value = '1'; |
|
|
selectedButton.value = '1'; |
|
|
emit('changeArea', ['1']); |
|
|
emit('changeArea', ['1']); |
|
|
emit('reset') |
|
|
emit('reset'); |
|
|
let data = props.treeData[0] |
|
|
let data = props.treeData[0]; |
|
|
// 默认选中 |
|
|
// 默认选中 |
|
|
data.selected = true |
|
|
data.selected = true; |
|
|
buttons2.value = data.childList |
|
|
buttons2.value = data.childList; |
|
|
selectedButton4.value = null; |
|
|
selectedButton4.value = null; |
|
|
resetMode() |
|
|
resetMode(); |
|
|
}; |
|
|
}; |
|
|
// 执行确认 |
|
|
// 执行确认 |
|
|
const executeVisible = ref<boolean>(false); |
|
|
const executeVisible = ref<boolean>(false); |
|
|
const showModal = () => { |
|
|
const showModal = () => { |
|
|
http.post(lightingManage.getChangeList, { infoList: changeList.value, projectId: 'HLlmTZp8' }).then(res => { |
|
|
http |
|
|
|
|
|
.post(lightingManage.getChangeList, { infoList: changeList.value, projectId: 'HLlmTZp8' }) |
|
|
|
|
|
.then((res) => { |
|
|
if (res.msg === 'success') { |
|
|
if (res.msg === 'success') { |
|
|
isLoading.value = true |
|
|
isLoading.value = true; |
|
|
console.log(res) |
|
|
console.log(res); |
|
|
} else { |
|
|
} else { |
|
|
isLoading.value = false |
|
|
isLoading.value = false; |
|
|
} |
|
|
} |
|
|
}) |
|
|
}); |
|
|
executeVisible.value = true; |
|
|
executeVisible.value = true; |
|
|
|
|
|
}; |
|
|
|
|
|
|
|
|
}; |
|
|
// 确定 |
|
|
|
|
|
const changeConfirm = () => { |
|
|
|
|
|
refresh(); |
|
|
|
|
|
}; |
|
|
|
|
|
|
|
|
// 确定 |
|
|
// 取消 |
|
|
const changeConfirm = () => { |
|
|
const changeCancel = () => {}; |
|
|
refresh() |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
// 取消 |
|
|
// 将当前选择的线路置空 |
|
|
const changeCancel = () => { |
|
|
const resetMode = () => { |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
// 将当前选择的线路置空 |
|
|
|
|
|
const resetMode = () => { |
|
|
|
|
|
thisButton2.value = { |
|
|
thisButton2.value = { |
|
|
code: '', |
|
|
code: '', |
|
|
mode: { |
|
|
mode: { |
|
|
value: -1 |
|
|
value: -1, |
|
|
}, |
|
|
}, |
|
|
scene: { |
|
|
scene: { |
|
|
value: -1 |
|
|
value: -1, |
|
|
} |
|
|
}, |
|
|
} |
|
|
}; |
|
|
} |
|
|
}; |
|
|
|
|
|
|
|
|
// 暴露 |
|
|
// 暴露 |
|
|
defineExpose({ |
|
|
defineExpose({ |
|
|
// 分区切换 |
|
|
// 分区切换 |
|
|
changeArea, |
|
|
changeArea, |
|
|
// 线路切换 |
|
|
// 线路切换 |
|
|
changeLine |
|
|
changeLine, |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
</script> |
|
|
</script> |
|
|
<style lang="less" scoped> |
|
|
<style lang="less" scoped> |
|
|
@import "./dialogStyle.less"; |
|
|
@import './dialogStyle.less'; |
|
|
@import "./tabs1.less"; |
|
|
@import './tabs1.less'; |
|
|
</style> |
|
|
</style> |
|
|
|
chenpingsen
4 months ago