|
|
@ -1,243 +1,266 @@ |
|
|
<template> |
|
|
<template> |
|
|
<a-spin :spinning="isLoading"> |
|
|
<!-- 照明区域 --> |
|
|
<!-- 照明区域 --> |
|
|
<div> |
|
|
<div> |
|
|
<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> |
|
|
|
|
|
</div> |
|
|
|
|
|
<!-- 照明区域按钮部分 --> |
|
|
|
|
|
<div class="area"> |
|
|
|
|
|
<template v-if="!showAllButtonsArea"> |
|
|
|
|
|
<button |
|
|
|
|
|
v-for="(button, index) in limitedButtons1" |
|
|
|
|
|
:key="index" |
|
|
|
|
|
:class="{ btn: true, selected: button.selected }" |
|
|
|
|
|
@click="changeArea(button)"> |
|
|
|
|
|
{{ button.name }} |
|
|
|
|
|
</button> |
|
|
|
|
|
<div style="margin-top: 10px"> |
|
|
|
|
|
<span @click="showAllButtonsArea = true" class="openzm"><down-outlined /> 展开</span> |
|
|
|
|
|
</div> |
|
|
|
|
|
</template> |
|
|
|
|
|
<template v-else> |
|
|
|
|
|
<button |
|
|
|
|
|
v-for="(button, index) in props.treeData" |
|
|
|
|
|
:key="index" |
|
|
|
|
|
:class="{ btn: true, selected: button.selected }" |
|
|
|
|
|
@click="changeArea(button)"> |
|
|
|
|
|
{{ button.name }} |
|
|
|
|
|
</button> |
|
|
|
|
|
<div style="margin-top: 10px"> |
|
|
|
|
|
<span @click="showAllButtonsArea = false" class="openzm"><up-outlined /> 回缩</span> |
|
|
|
|
|
</div> |
|
|
|
|
|
</template> |
|
|
|
|
|
</div> |
|
|
|
|
|
</div> |
|
|
</div> |
|
|
<!-- 照明回路部分 --> |
|
|
<!-- 照明区域按钮部分 --> |
|
|
<div> |
|
|
<div class="area"> |
|
|
<div class="circuit-area"> |
|
|
<template v-if="!showAllButtonsArea"> |
|
|
<div class="circuit-tab"></div> |
|
|
<button |
|
|
<span class="circuit-text">照明回路</span> |
|
|
v-for="(button, index) in limitedButtons1" |
|
|
<div class="btn2"> |
|
|
:key="index" |
|
|
|
|
|
:class="{ btn: true, selected: button.selected }" |
|
|
|
|
|
@click="changeArea(button)"> |
|
|
|
|
|
{{ button.name }} |
|
|
|
|
|
</button> |
|
|
|
|
|
<div style="margin-top: 10px"> |
|
|
|
|
|
<span @click="showAllButtonsArea = true" class="openzm"><down-outlined /> 展开</span> |
|
|
|
|
|
</div> |
|
|
|
|
|
</template> |
|
|
|
|
|
<template v-else> |
|
|
|
|
|
<button |
|
|
|
|
|
v-for="(button, index) in props.treeData" |
|
|
|
|
|
:key="index" |
|
|
|
|
|
:class="{ btn: true, selected: button.selected }" |
|
|
|
|
|
@click="changeArea(button)"> |
|
|
|
|
|
{{ button.name }} |
|
|
|
|
|
</button> |
|
|
|
|
|
<div style="margin-top: 10px"> |
|
|
|
|
|
<span @click="showAllButtonsArea = false" class="openzm"><up-outlined /> 回缩</span> |
|
|
|
|
|
</div> |
|
|
|
|
|
</template> |
|
|
|
|
|
</div> |
|
|
|
|
|
</div> |
|
|
|
|
|
<!-- 照明回路部分 --> |
|
|
|
|
|
<div> |
|
|
|
|
|
<div class="circuit-area"> |
|
|
|
|
|
<div class="circuit-tab"></div> |
|
|
|
|
|
<span class="circuit-text">照明回路</span> |
|
|
|
|
|
<div class="btn2"> |
|
|
|
|
|
<a-badge :offset="[-10, 2]" :count="lockList.length"> |
|
|
<button |
|
|
<button |
|
|
class="openPlan" |
|
|
class="openPlan" |
|
|
:class="{ enabled2: isPlanEnabled2, disabled2: !isPlanEnabled2 }" |
|
|
:class="{ enabled2: isPlanEnabled2, disabled2: !isPlanEnabled2 }" |
|
|
@click="togglePlan2"> |
|
|
@click="togglePlan2"> |
|
|
{{ isPlanEnabled2 ? '启用开关' : '禁用开关' }} |
|
|
{{ isPlanEnabled2 ? '启用开关' : '禁用开关' }} |
|
|
</button> |
|
|
</button> |
|
|
<a-switch |
|
|
</a-badge> |
|
|
v-model:checked="selectAllCheckbox" |
|
|
<a-switch |
|
|
:disabled="singleSelection" |
|
|
v-model:checked="selectAllCheckbox" |
|
|
:class="{ |
|
|
:disabled="singleSelection" |
|
|
'blue-background': selectAllCheckbox, |
|
|
:class="{ |
|
|
'grey-background': !selectAllCheckbox, |
|
|
'blue-background': selectAllCheckbox, |
|
|
}" |
|
|
'grey-background': !selectAllCheckbox, |
|
|
@change="toggleAllSelection" /> |
|
|
}" |
|
|
<button class="allBtn">全选</button> |
|
|
@change="toggleAllSelection" /> |
|
|
<button class="both" @click="selectAll"> |
|
|
<button class="allBtn">全选</button> |
|
|
{{ singleSelection ? '多选' : '单选' }} |
|
|
<button class="both" @click="selectAll"> |
|
|
</button> |
|
|
{{ singleSelection ? '多选' : '单选' }} |
|
|
</div> |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<div class="btnArea"> |
|
|
|
|
|
<template v-if="!showAllButtons"> |
|
|
|
|
|
<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" /> |
|
|
|
|
|
{{ button.name }} |
|
|
|
|
|
</button> |
|
|
|
|
|
<div style="margin-top: 10px"> |
|
|
|
|
|
<span @click="showAllButtons = true" class="openzm"><down-outlined /> 展开</span> |
|
|
|
|
|
</div> |
|
|
|
|
|
</template> |
|
|
|
|
|
<template v-else> |
|
|
|
|
|
<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" /> |
|
|
|
|
|
{{ button.name }} |
|
|
|
|
|
</button> |
|
|
|
|
|
<div style="margin-top: 10px"> |
|
|
|
|
|
<span @click="showAllButtons = false" class="openzm"><up-outlined /> 回缩</span> |
|
|
|
|
|
</div> |
|
|
|
|
|
</template> |
|
|
|
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<!-- 控制模式部分 --> |
|
|
<div class="btnArea"> |
|
|
<div v-show="thisButton2.dataCode"> |
|
|
<template v-if="!showAllButtons"> |
|
|
<div class="control-area"> |
|
|
|
|
|
<div class="control-tab"></div> |
|
|
|
|
|
<span class="control-text"> 控制模式 </span> |
|
|
|
|
|
</div> |
|
|
|
|
|
<!-- 控制模式按钮部分 --> |
|
|
|
|
|
<div class="control-mode-btn-area"> |
|
|
|
|
|
<button |
|
|
<button |
|
|
v-for="(button3, index) in thisButton2.childList" |
|
|
v-for="(button, index) in limitedButtons2" |
|
|
:key="index" |
|
|
:key="index" |
|
|
class="btn" |
|
|
:class="{ btn: true, selected: button.selected }" |
|
|
:class="{ selected: button3.selectAble }" |
|
|
class="zmhlbtn" |
|
|
@click="selectButton3(button3)"> |
|
|
@click="changeLine(button)"> |
|
|
{{ button3.name }} |
|
|
<div v-if="button.lockStatus" class="btn-back"> |
|
|
|
|
|
<stop-outlined /> |
|
|
|
|
|
</div> |
|
|
|
|
|
{{ button.name }} |
|
|
</button> |
|
|
</button> |
|
|
</div> |
|
|
<div style="margin-top: 10px"> |
|
|
</div> |
|
|
<span @click="showAllButtons = true" class="openzm"><down-outlined /> 展开</span> |
|
|
<!-- 控制场景部分 --> |
|
|
</div> |
|
|
<div v-show="thisButton2.dataCode"> |
|
|
</template> |
|
|
<div class="control-scene-area"> |
|
|
<template v-else> |
|
|
<div class="control-scene-tab"></div> |
|
|
|
|
|
<span class="control-scene-text"> 控制场景 </span> |
|
|
|
|
|
<div v-if="!singleSelection" style="flex: 1; color: red; text-align: right" |
|
|
|
|
|
>多选模式下会修改当前选中的所有回路</div |
|
|
|
|
|
> |
|
|
|
|
|
</div> |
|
|
|
|
|
<!-- 控制场景按钮部分 --> |
|
|
|
|
|
<div class="control-scene-btn-area"> |
|
|
|
|
|
<button |
|
|
<button |
|
|
v-for="(button4, index) in thisButton3.childList" |
|
|
v-for="(button, index) in buttons2" |
|
|
:key="index" |
|
|
:key="index" |
|
|
:class="{ btn: true, selected: button4.executeStatus.value != 0 }" |
|
|
:class="{ btn: true, selected: button.selected }" |
|
|
@click="selectButton4(button4)"> |
|
|
class="zmhlbtn" |
|
|
{{ button4.name }} |
|
|
@click="changeLine(button)"> |
|
|
|
|
|
<div v-if="button.lockStatus" class="btn-back"> |
|
|
|
|
|
<stop-outlined /> |
|
|
|
|
|
</div> |
|
|
|
|
|
{{ button.name }} |
|
|
</button> |
|
|
</button> |
|
|
</div> |
|
|
<div style="margin-top: 10px"> |
|
|
|
|
|
<span @click="showAllButtons = false" class="openzm"><up-outlined /> 回缩</span> |
|
|
|
|
|
</div> |
|
|
|
|
|
</template> |
|
|
</div> |
|
|
</div> |
|
|
<!-- 底部按钮区 --> |
|
|
</div> |
|
|
<div class="bottom"> |
|
|
<!-- 控制模式部分 --> |
|
|
<a-badge :offset="[-10, 2]" :count="changeList.length"> |
|
|
<div v-show="thisButton2.dataCode"> |
|
|
<a-popconfirm |
|
|
<div class="control-area"> |
|
|
title="刷新将会取消已作出的修改" |
|
|
<div class="control-tab"></div> |
|
|
ok-text="确定" |
|
|
<span class="control-text"> 控制模式 </span> |
|
|
cancel-text="取消" |
|
|
|
|
|
@confirm="refresh(false)" |
|
|
|
|
|
@cancel="changeCancel"> |
|
|
|
|
|
<button class="flushed">刷新</button> |
|
|
|
|
|
</a-popconfirm> |
|
|
|
|
|
</a-badge> |
|
|
|
|
|
|
|
|
|
|
|
<a-spin :spinning="buttonLoading"> |
|
|
|
|
|
<button class="execute" @click="showModal">执行</button> |
|
|
|
|
|
</a-spin> |
|
|
|
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<!-- 控制模式按钮部分 --> |
|
|
|
|
|
<div class="control-mode-btn-area"> |
|
|
|
|
|
<button |
|
|
|
|
|
v-for="(button3, index) in thisButton2.childList" |
|
|
|
|
|
:key="index" |
|
|
|
|
|
class="btn" |
|
|
|
|
|
:class="{ selected: button3.selectAble }" |
|
|
|
|
|
@click="selectButton3(button3)"> |
|
|
|
|
|
{{ button3.name }} |
|
|
|
|
|
</button> |
|
|
|
|
|
</div> |
|
|
|
|
|
</div> |
|
|
|
|
|
<!-- 控制场景部分 --> |
|
|
|
|
|
<div v-show="thisButton2.dataCode"> |
|
|
|
|
|
<div class="control-scene-area"> |
|
|
|
|
|
<div class="control-scene-tab"></div> |
|
|
|
|
|
<span class="control-scene-text"> 控制场景 </span> |
|
|
|
|
|
<div v-if="!singleSelection" style="flex: 1; color: red; text-align: right" |
|
|
|
|
|
>多选模式下会修改当前选中的所有回路</div |
|
|
|
|
|
> |
|
|
|
|
|
</div> |
|
|
|
|
|
<!-- 控制场景按钮部分 --> |
|
|
|
|
|
<div class="control-scene-btn-area"> |
|
|
|
|
|
<button |
|
|
|
|
|
v-for="(button4, index) in thisButton3.childList" |
|
|
|
|
|
:key="index" |
|
|
|
|
|
:class="{ btn: true, selected: button4.executeStatus.value != 0 }" |
|
|
|
|
|
@click="selectButton4(button4)"> |
|
|
|
|
|
{{ button4.name }} |
|
|
|
|
|
</button> |
|
|
|
|
|
</div> |
|
|
|
|
|
</div> |
|
|
|
|
|
<!-- 底部按钮区 --> |
|
|
|
|
|
<div class="bottom"> |
|
|
|
|
|
<a-badge :offset="[-10, 2]" :count="changeList.length"> |
|
|
|
|
|
<a-popconfirm |
|
|
|
|
|
title="刷新将会取消已作出的修改" |
|
|
|
|
|
ok-text="确定" |
|
|
|
|
|
cancel-text="取消" |
|
|
|
|
|
@confirm="refresh(false)" |
|
|
|
|
|
@cancel="changeCancel"> |
|
|
|
|
|
<button class="flushed">刷新</button> |
|
|
|
|
|
</a-popconfirm> |
|
|
|
|
|
</a-badge> |
|
|
|
|
|
<button class="execute" @click="showModal">执行</button> |
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
<!-- 点击执行时的弹出框 --> |
|
|
<!-- 点击执行时的弹出框 --> |
|
|
<div class="out-dialog" v-if="executeVisible"> |
|
|
<div class="out-dialog" v-if="executeVisible"> |
|
|
<div class="content"> |
|
|
<div class="content"> |
|
|
<div> |
|
|
<div> |
|
|
<div class="div-operation"></div> |
|
|
<div class="div-operation"></div> |
|
|
<span class="text-operation">变更内容 </span> |
|
|
<span class="text-operation">变更内容 </span> |
|
|
</div> |
|
|
</div> |
|
|
<div class="j-box" v-for="(item, index) in diffList" :key="item.id"> |
|
|
<div class="j-box" v-for="item in diffList" :key="item.id"> |
|
|
<div class="journal" style="margin-top: 20px"> |
|
|
<div class="journal" style="margin-top: 20px"> |
|
|
<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 |
|
|
<span |
|
|
class="title-text" |
|
|
class="title-text" |
|
|
style="font-size: 20px; font-weight: 500; color: rgba(255, 255, 255, 1)" |
|
|
style="font-size: 18px; font-weight: 500; color: rgba(255, 255, 255, 1)" |
|
|
>{{ item.regionName + ' > ' + item.deviceGroupName }}</span |
|
|
>{{ item.regionName + ' > ' + item.deviceGroupName }}</span |
|
|
> |
|
|
> |
|
|
</div> |
|
|
</div> |
|
|
<a-popconfirm |
|
|
<a-popconfirm |
|
|
title="此操作将会撤销修改" |
|
|
title="此操作将会撤销修改" |
|
|
ok-text="确定" |
|
|
ok-text="确定" |
|
|
cancel-text="取消" |
|
|
cancel-text="取消" |
|
|
@confirm="delBtn(item)" |
|
|
@confirm="delBtn(item)" |
|
|
@cancel="changeCancel"> |
|
|
@cancel="changeCancel"> |
|
|
<button class="cxbtn">撤销</button> |
|
|
<button class="cxbtn">撤销</button> |
|
|
</a-popconfirm> |
|
|
</a-popconfirm> |
|
|
|
|
|
</div> |
|
|
|
|
|
<div class="btn-box"> |
|
|
|
|
|
<div class="btn-item"> |
|
|
|
|
|
<div class="left">控制模式</div> |
|
|
|
|
|
<div class="right"> |
|
|
|
|
|
<span>手动</span> |
|
|
|
|
|
<img src="/asset/image/bulbLogo/22406.png" alt="" /> |
|
|
|
|
|
<span>自动</span></div |
|
|
|
|
|
> |
|
|
</div> |
|
|
</div> |
|
|
<div class="btn-box"> |
|
|
<div class="btn-item"> |
|
|
<div class="btn-item"> |
|
|
<div class="left"> 亮度 </div> |
|
|
<div class="left">控制模式</div> |
|
|
<div class="right"> |
|
|
<div class="right"> |
|
|
<!-- 由于数字0也会被判为false，故只判断undefined 和 null --> |
|
|
<span>手动</span> |
|
|
<span>{{ |
|
|
<img src="/asset/image/bulbLogo/22406.png" alt="" /> |
|
|
item?.stateBefore?.brightness != undefined ? item.stateBefore.brightness : '--' |
|
|
<span>自动</span> |
|
|
}}</span> |
|
|
</div> |
|
|
<img src="/asset/image/bulbLogo/22406.png" alt="" /> |
|
|
|
|
|
<span>{{ |
|
|
|
|
|
item?.stateAfter?.brightness != undefined ? item.stateAfter.brightness : '--' |
|
|
|
|
|
}}</span> |
|
|
</div> |
|
|
</div> |
|
|
<div class="btn-item"> |
|
|
</div> |
|
|
<div class="left"> 亮度 </div> |
|
|
<div class="btn-item"> |
|
|
<div class="right"> |
|
|
<div class="left"> 控制场景 </div> |
|
|
<!-- 由于数字0也会被判为false，故只判断undefined 和 null --> |
|
|
<div class="right"> |
|
|
<span>{{ |
|
|
<span>{{ |
|
|
item?.stateBefore?.brightness != undefined ? item.stateBefore.brightness : '--' |
|
|
item?.stateBefore?.scene?.label ? item.stateBefore.scene.label : '--' |
|
|
}}</span> |
|
|
}}</span> |
|
|
<img src="/asset/image/bulbLogo/22406.png" alt="" /> |
|
|
<img src="/asset/image/bulbLogo/22406.png" alt="" /> |
|
|
<span>{{ |
|
|
<span>{{ |
|
|
item?.stateAfter?.brightness != undefined ? item.stateAfter.brightness : '--' |
|
|
item?.stateAfter?.scene?.label ? item.stateAfter.scene.label : '--' |
|
|
}}</span> |
|
|
}}</span> |
|
|
</div> |
|
|
|
|
|
</div> |
|
|
</div> |
|
|
<div class="btn-item"> |
|
|
</div> |
|
|
<div class="left"> 控制场景 </div> |
|
|
<div class="btn-item"> |
|
|
<div class="right"> |
|
|
<div class="left"> 色温 </div> |
|
|
<span>{{ |
|
|
<div class="right"> |
|
|
item?.stateBefore?.scene?.label ? item.stateBefore.scene.label : '--' |
|
|
<span>{{ |
|
|
}}</span> |
|
|
item?.stateBefore?.color != undefined ? item.stateBefore.color : '--' |
|
|
<img src="/asset/image/bulbLogo/22406.png" alt="" /> |
|
|
}}</span> |
|
|
<span>{{ |
|
|
<img src="/asset/image/bulbLogo/22406.png" alt="" /> |
|
|
item?.stateAfter?.scene?.label ? item.stateAfter.scene.label : '--' |
|
|
<span> |
|
|
}}</span> |
|
|
{{ item?.stateAfter?.color != undefined ? item.stateAfter.color : '--' }} |
|
|
</div> |
|
|
</span> |
|
|
</div> |
|
|
</div> |
|
|
<div class="btn-item"> |
|
|
</div> |
|
|
<div class="left"> 色温 </div> |
|
|
<div class="btn-item"> |
|
|
<div class="right"> |
|
|
<div class="left"> 启用状态 </div> |
|
|
<span>{{ |
|
|
<div class="right"> |
|
|
item?.stateBefore?.color != undefined ? item.stateBefore.color : '--' |
|
|
<span>{{ |
|
|
}}</span> |
|
|
item?.stateBefore?.lockStatus != undefined |
|
|
<img src="/asset/image/bulbLogo/22406.png" alt="" /> |
|
|
? item.stateBefore.lockStatus |
|
|
<span> |
|
|
? '禁用' |
|
|
{{ item?.stateAfter?.color != undefined ? item.stateAfter.color : '--' }} |
|
|
: '启用' |
|
|
</span> |
|
|
: '--' |
|
|
</div> |
|
|
}}</span> |
|
|
|
|
|
<img src="/asset/image/bulbLogo/22406.png" alt="" /> |
|
|
|
|
|
<span> |
|
|
|
|
|
{{ |
|
|
|
|
|
item?.stateAfter?.lockStatus != undefined |
|
|
|
|
|
? item.stateAfter.lockStatus |
|
|
|
|
|
? '禁用' |
|
|
|
|
|
: '启用' |
|
|
|
|
|
: '--' |
|
|
|
|
|
}} |
|
|
|
|
|
</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div style="width: 100%; height: 60px"></div> |
|
|
|
|
|
<div class="button-box"> |
|
|
|
|
|
<button class="cancel" @click="executeVisible = false">取消</button> |
|
|
|
|
|
<a-popconfirm |
|
|
|
|
|
title="此操作将提交以上修改内容" |
|
|
|
|
|
ok-text="确定" |
|
|
|
|
|
cancel-text="取消" |
|
|
|
|
|
@confirm="submitChangeList" |
|
|
|
|
|
@cancel="changeCancel"> |
|
|
|
|
|
<button class="execute">执行</button> |
|
|
|
|
|
</a-popconfirm> |
|
|
|
|
|
</div> |
|
|
|
|
|
</div> |
|
|
</div> |
|
|
</a-spin> |
|
|
<div style="width: 100%; height: 60px"></div> |
|
|
|
|
|
<div class="button-box"> |
|
|
|
|
|
<button class="cancel" @click="executeVisible = false">取消</button> |
|
|
|
|
|
<a-popconfirm |
|
|
|
|
|
title="此操作将提交以上修改内容" |
|
|
|
|
|
ok-text="确定" |
|
|
|
|
|
cancel-text="取消" |
|
|
|
|
|
@confirm="submitChangeList" |
|
|
|
|
|
@cancel="changeCancel"> |
|
|
|
|
|
<button class="execute">执行</button> |
|
|
|
|
|
</a-popconfirm> |
|
|
|
|
|
</div> |
|
|
|
|
|
</div> |
|
|
</template> |
|
|
</template> |
|
|
|
|
|
|
|
|
<script setup lang="ts"> |
|
|
<script setup lang="ts"> |
|
|
@ -303,48 +326,67 @@ |
|
|
emit('changeArea', button.id); |
|
|
emit('changeArea', button.id); |
|
|
// 当前选中回路 - 置空 |
|
|
// 当前选中回路 - 置空 |
|
|
resetMode(); |
|
|
resetMode(); |
|
|
// 最近交互过的按钮 - 置空 |
|
|
|
|
|
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 isPlanEnabled2 = ref(true); |
|
|
const isPlanEnabled2 = ref(false); |
|
|
|
|
|
// 开关修改保存数组 |
|
|
|
|
|
const lockList = ref<any>([]); |
|
|
// 开关启用/禁用切换事件 |
|
|
// 开关启用/禁用切换事件 |
|
|
const togglePlan2 = () => { |
|
|
const togglePlan2 = () => { |
|
|
// 如果未交互任何按钮 |
|
|
// 获取选中线路 |
|
|
if (handleButton.value == '') { |
|
|
let valid = buttons2.value.filter((item: any) => { |
|
|
return message.info('请选择照明回路'); |
|
|
return item.selected; |
|
|
} |
|
|
}); |
|
|
// 获取最近交互过的按钮 |
|
|
// 未选中线路 |
|
|
const btn: any = buttons2.value.find((button: any) => button.id === handleButton.value); |
|
|
if (valid.length == 0) { |
|
|
let panel = +!btn.ctrlStatus; |
|
|
return message.info('请先选择线路'); |
|
|
isLoading.value = true; |
|
|
// 选中线路 |
|
|
http |
|
|
} else { |
|
|
.get(lightingManage.setDisable, { |
|
|
// 按钮切换 |
|
|
deviceGroup: btn.dataCode, |
|
|
isPlanEnabled2.value = !isPlanEnabled2.value; |
|
|
panel, |
|
|
// 禁用状态原值 |
|
|
projectId: state.projectId, |
|
|
let after = +isPlanEnabled2.value; |
|
|
siteId: state.siteId, |
|
|
// 当前修改线路 |
|
|
}) |
|
|
valid.forEach((item: any) => { |
|
|
.then((res) => { |
|
|
// 按钮与需修改的值一致，无效 |
|
|
if (res.msg === 'success') { |
|
|
if (item.lockStatus == after) { |
|
|
// 确认成功后 - 按钮文本取反 - 按钮布尔值修改 - 关闭loading |
|
|
return; |
|
|
isPlanEnabled2.value = !isPlanEnabled2.value; |
|
|
} |
|
|
btn.ctrlStatus = panel; |
|
|
// 查看是否已经产生过修改 |
|
|
isLoading.value = false; |
|
|
const same = lockList.value.find((v: any) => { |
|
|
|
|
|
return v.deviceGroup == item.dataCode; |
|
|
|
|
|
}); |
|
|
|
|
|
// 如果发生过修改 |
|
|
|
|
|
if (same) { |
|
|
|
|
|
// 改回原值，则移除 |
|
|
|
|
|
if (same.before == after) { |
|
|
|
|
|
lockList.value.forEach((v1: any, index: number) => { |
|
|
|
|
|
if (same.deviceGroup == v1.deviceGroup) { |
|
|
|
|
|
lockList.value.splice(index, 1); |
|
|
|
|
|
} |
|
|
|
|
|
}); |
|
|
|
|
|
// 只有true 和 false 的切换，无需继续判断 |
|
|
|
|
|
} |
|
|
|
|
|
// 初次修改 |
|
|
} else { |
|
|
} else { |
|
|
isLoading.value = false; |
|
|
lockList.value.push({ |
|
|
|
|
|
deviceGroup: item.dataCode, |
|
|
|
|
|
deviceGroupName: item.name, |
|
|
|
|
|
region: item.treePid, |
|
|
|
|
|
regionName: '', |
|
|
|
|
|
before: item.lockStatus, |
|
|
|
|
|
lockStatus: after, |
|
|
|
|
|
}); |
|
|
} |
|
|
} |
|
|
}) |
|
|
// 修改 |
|
|
.catch(() => { |
|
|
item.lockStatus = after; |
|
|
isLoading.value = false; |
|
|
|
|
|
}); |
|
|
}); |
|
|
|
|
|
} |
|
|
}; |
|
|
}; |
|
|
|
|
|
|
|
|
// 是否单选，状态 |
|
|
// 是否单选，状态 |
|
|
@ -398,8 +440,6 @@ |
|
|
}); |
|
|
}); |
|
|
// 照明回路的按钮切换 |
|
|
// 照明回路的按钮切换 |
|
|
const changeLine = (button: any) => { |
|
|
const changeLine = (button: any) => { |
|
|
// 存储一次按钮ID，用于禁用/启用交互 |
|
|
|
|
|
handleButton.value = button.id; |
|
|
|
|
|
// 根据按钮状态，展示禁用/启用按钮文本 |
|
|
// 根据按钮状态，展示禁用/启用按钮文本 |
|
|
if (button.ctrlStatus) { |
|
|
if (button.ctrlStatus) { |
|
|
isPlanEnabled2.value = true; |
|
|
isPlanEnabled2.value = true; |
|
|
@ -611,9 +651,6 @@ |
|
|
|
|
|
|
|
|
// 底部按钮区 ====================================================================== |
|
|
// 底部按钮区 ====================================================================== |
|
|
|
|
|
|
|
|
const isLoading = ref(false); |
|
|
|
|
|
// 执行按钮loading |
|
|
|
|
|
const buttonLoading = ref(false); |
|
|
|
|
|
// 刷新 |
|
|
// 刷新 |
|
|
const refresh = (reload = false) => { |
|
|
const refresh = (reload = false) => { |
|
|
// 关闭执行弹窗 |
|
|
// 关闭执行弹窗 |
|
|
@ -630,6 +667,12 @@ |
|
|
}); |
|
|
}); |
|
|
} |
|
|
} |
|
|
changeList.value = []; |
|
|
changeList.value = []; |
|
|
|
|
|
if (!reload) { |
|
|
|
|
|
lockList.value.forEach((item: any) => { |
|
|
|
|
|
resetLockList(item); |
|
|
|
|
|
}); |
|
|
|
|
|
} |
|
|
|
|
|
lockList.value = []; |
|
|
// 默认选择第一个楼层 |
|
|
// 默认选择第一个楼层 |
|
|
let data = props.treeData[0]; |
|
|
let data = props.treeData[0]; |
|
|
// 默认选中 |
|
|
// 默认选中 |
|
|
@ -638,7 +681,19 @@ |
|
|
buttons2.value = data.childList; |
|
|
buttons2.value = data.childList; |
|
|
resetMode(); |
|
|
resetMode(); |
|
|
}; |
|
|
}; |
|
|
// 刷新时，将已修改的值改回 |
|
|
// 将已修改的禁用/启用状态改回 |
|
|
|
|
|
const resetLockList = (item: any) => { |
|
|
|
|
|
props.treeData.find((v: any) => { |
|
|
|
|
|
if (item.region == v.dataCode) { |
|
|
|
|
|
v.childList.find((v1: any) => { |
|
|
|
|
|
if (item.deviceGroup == v1.dataCode) { |
|
|
|
|
|
v1.lockStatus = item.before; |
|
|
|
|
|
} |
|
|
|
|
|
}); |
|
|
|
|
|
} |
|
|
|
|
|
}); |
|
|
|
|
|
}; |
|
|
|
|
|
// 将已修改的线路场景改回 |
|
|
const resetChangeList = (item: any) => { |
|
|
const resetChangeList = (item: any) => { |
|
|
props.treeData.find((v: any) => { |
|
|
props.treeData.find((v: any) => { |
|
|
if (item.region == v.dataCode) { |
|
|
if (item.region == v.dataCode) { |
|
|
@ -653,7 +708,7 @@ |
|
|
v3.executeStatus.value = 0; |
|
|
v3.executeStatus.value = 0; |
|
|
} |
|
|
} |
|
|
if (!item.before) { |
|
|
if (!item.before) { |
|
|
console.log(item, '没有这个选项'); |
|
|
console.log(item, '没有这个选项---'); |
|
|
v3.executeStatus.value = 0; |
|
|
v3.executeStatus.value = 0; |
|
|
} |
|
|
} |
|
|
// 旧值选中 |
|
|
// 旧值选中 |
|
|
@ -670,14 +725,13 @@ |
|
|
}; |
|
|
}; |
|
|
// 右下角的执行事件 |
|
|
// 右下角的执行事件 |
|
|
const showModal = () => { |
|
|
const showModal = () => { |
|
|
if (!changeList.value.length) { |
|
|
if (!changeList.value.length && !lockList.value.length) { |
|
|
return message.info('未产生任何修改'); |
|
|
return message.info('未产生任何修改'); |
|
|
} |
|
|
} |
|
|
buttonLoading.value = true; |
|
|
|
|
|
http |
|
|
http |
|
|
.post(lightingManage.getChangeList, { |
|
|
.post(lightingManage.getChangeList, { |
|
|
sceneList: changeList.value, |
|
|
sceneList: changeList.value, |
|
|
lockList: [], |
|
|
lockList: lockList.value, |
|
|
projectId: state.projectId, |
|
|
projectId: state.projectId, |
|
|
siteId: state.siteId, |
|
|
siteId: state.siteId, |
|
|
}) |
|
|
}) |
|
|
@ -688,11 +742,8 @@ |
|
|
} else { |
|
|
} else { |
|
|
message.warning('获取修改内容失败'); |
|
|
message.warning('获取修改内容失败'); |
|
|
} |
|
|
} |
|
|
buttonLoading.value = false; |
|
|
|
|
|
}) |
|
|
}) |
|
|
.catch(() => { |
|
|
.catch(() => {}); |
|
|
buttonLoading.value = false; |
|
|
|
|
|
}); |
|
|
|
|
|
}; |
|
|
}; |
|
|
// 通用取消 |
|
|
// 通用取消 |
|
|
const changeCancel = () => {}; |
|
|
const changeCancel = () => {}; |
|
|
@ -705,24 +756,26 @@ |
|
|
const changeList: any = ref([]); |
|
|
const changeList: any = ref([]); |
|
|
// 展示修改前后差异的内容 |
|
|
// 展示修改前后差异的内容 |
|
|
const diffList = ref([]); |
|
|
const diffList = ref([]); |
|
|
//撤销 |
|
|
// 撤销 |
|
|
const delBtn = (obj: any) => { |
|
|
const delBtn = (obj: any) => { |
|
|
console.log(obj, '当前选择的修改内容'); |
|
|
console.log(obj, '当前选择的修改内容'); |
|
|
// 将treeData对应回路的数据改回，数据以后端为准 |
|
|
// 将treeData对应回路的数据改回，数据以后端为准 |
|
|
obj.scene = obj.stateAfter.scene.value; |
|
|
obj.scene = obj?.stateAfter?.scene?.value; |
|
|
obj.before = obj.stateBefore.scene.value; |
|
|
obj.before = obj?.stateBefore?.scene?.value; |
|
|
resetChangeList(obj); |
|
|
resetChangeList(obj); |
|
|
// 将 changeList 与 diffList 中记录的修改移除 (排除极端情况) |
|
|
resetLockList(obj); |
|
|
|
|
|
// 将 changeList lockList 与 diffList 中记录的修改移除 (排除极端情况) |
|
|
changeList.value = changeList.value.filter((item: any) => { |
|
|
changeList.value = changeList.value.filter((item: any) => { |
|
|
return item.deviceGroup !== obj.deviceGroup; |
|
|
return item.deviceGroup !== obj.deviceGroup; |
|
|
}); |
|
|
}); |
|
|
|
|
|
lockList.value = lockList.value.filter((item: any) => { |
|
|
|
|
|
return item.deviceGroup !== obj.deviceGroup; |
|
|
|
|
|
}); |
|
|
diffList.value = diffList.value.filter((item: any) => { |
|
|
diffList.value = diffList.value.filter((item: any) => { |
|
|
return item.deviceGroup !== obj.deviceGroup; |
|
|
return item.deviceGroup !== obj.deviceGroup; |
|
|
}); |
|
|
}); |
|
|
console.log(changeList, 'changeList'); |
|
|
|
|
|
console.log(diffList, 'diffList'); |
|
|
|
|
|
// 如果移除后不再有修改内容，则隐藏弹出框 |
|
|
// 如果移除后不再有修改内容，则隐藏弹出框 |
|
|
if (changeList.value.length == 0) { |
|
|
if (changeList.value.length == 0 && lockList.value.length == 0) { |
|
|
executeVisible.value = false; |
|
|
executeVisible.value = false; |
|
|
} |
|
|
} |
|
|
}; |
|
|
}; |
|
|
@ -731,14 +784,15 @@ |
|
|
http |
|
|
http |
|
|
.post(lightingManage.submitChangeList, { |
|
|
.post(lightingManage.submitChangeList, { |
|
|
sceneList: changeList.value, |
|
|
sceneList: changeList.value, |
|
|
lockList: [], |
|
|
lockList: lockList.value, |
|
|
projectId: state.projectId, |
|
|
projectId: state.projectId, |
|
|
siteId: state.siteId, |
|
|
siteId: state.siteId, |
|
|
}) |
|
|
}) |
|
|
.then(() => { |
|
|
.then(() => { |
|
|
emit('reload'); |
|
|
emit('reload'); |
|
|
refresh(true); |
|
|
refresh(true); |
|
|
}); |
|
|
}) |
|
|
|
|
|
.catch(() => {}); |
|
|
}; |
|
|
}; |
|
|
|
|
|
|
|
|
// 其他业务 ======================================================================== |
|
|
// 其他业务 ======================================================================== |
|
|
|
chenpingsen
4 months ago