fix:群控系统>控制面板的样式和逻辑修改
This commit is contained in:
chenpingsen
@@ -39,7 +39,6 @@
|
||||
.journal {
|
||||
padding: 1% 3%;
|
||||
width: 100%;
|
||||
height: 150px;
|
||||
background-color: rgba(0, 0, 0);
|
||||
border-radius: 12px;
|
||||
border: 2px solid transparent;
|
||||
|
||||
@@ -16,26 +16,30 @@
|
||||
perspective-origin: 850px -160px;
|
||||
// 左上角区域切换功能
|
||||
.btn-box {
|
||||
width: 120px;
|
||||
width: 100px;
|
||||
position: sticky;
|
||||
top: 10px;
|
||||
left: 10px;
|
||||
top: 15px;
|
||||
margin-left: 10px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
.btn-item {
|
||||
cursor: pointer;
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
height: 35px;
|
||||
border-radius: 4px;
|
||||
background: rgba(39, 120, 255, 1);
|
||||
// background: rgba(39, 120, 255, 1);
|
||||
background: rgb(7, 72, 116);
|
||||
border: 1px solid rgba(51, 199, 255, 1);
|
||||
box-shadow: 0px 10px 15px rgba(0, 54, 136, 0.3);
|
||||
font-size: 18px;
|
||||
font-size: 16px;
|
||||
color: white;
|
||||
}
|
||||
.btnActive {
|
||||
background: rgba(39, 120, 255, 1);
|
||||
}
|
||||
.btn-item:hover {
|
||||
color: black;
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
// 大区分区
|
||||
@@ -128,7 +132,10 @@
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
.drawer-item {
|
||||
position: relative;
|
||||
// 抽屉关闭按钮
|
||||
.drawer-box-out {
|
||||
width: 30px;
|
||||
@@ -145,5 +152,4 @@
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@@ -7,7 +7,7 @@
|
||||
v-for="(item, index) in floorData"
|
||||
:key="index"
|
||||
class="btn-item"
|
||||
:style="{ color: item.dataCode == thisFloor ? 'black' : 'white' }"
|
||||
:class="{ btnActive: item.dataCode == thisFloor }"
|
||||
@click="changeFloor(item.childList, item.dataCode)"
|
||||
>{{ item.name }}</button
|
||||
>
|
||||
@@ -36,14 +36,6 @@
|
||||
:visible="item.visible" />
|
||||
</div>
|
||||
</div>
|
||||
<!-- 右侧抽屉的触发按钮 -->
|
||||
<div class="drawer-box-in" v-if="!visible" @click="toggleDrawer">
|
||||
<double-left-outlined class="drawer-icon" style="color: white" />
|
||||
</div>
|
||||
<!-- 左侧抽屉的关闭按钮 -->
|
||||
<div class="drawer-box-out" v-if="visible" @click="toggleDrawer">
|
||||
<double-right-outlined class="drawer-icon" style="color: white" />
|
||||
</div>
|
||||
<!-- 右侧抽屉 -->
|
||||
<a-drawer
|
||||
v-model:visible="visible"
|
||||
@@ -56,6 +48,10 @@
|
||||
id="drawer"
|
||||
:maskStyle="{ 'background-color': 'rgba(0, 0, 0, 0)' }">
|
||||
<a-tabs v-model:activeKey="activeKey">
|
||||
<div class="drawer-box-out" @click="toggleDrawer">
|
||||
<double-left-outlined v-if="!visible" class="drawer-icon" style="color: white" />
|
||||
<double-right-outlined v-else class="drawer-icon" style="color: white" />
|
||||
</div>
|
||||
<a-tab-pane key="1" tab="控制面板">
|
||||
<tabs1
|
||||
ref="tabs1Ref"
|
||||
|
||||
@@ -392,12 +392,22 @@
|
||||
|
||||
.zmhlbtn {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
// 禁用图标
|
||||
.anticon-stop {
|
||||
position: absolute;
|
||||
right: 3px;
|
||||
bottom: 3px;
|
||||
overflow: hidden;
|
||||
.btn-back {
|
||||
position: absolute;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
right: -25px;
|
||||
bottom: -30px;
|
||||
transform: rotate(45deg);
|
||||
background: orange;
|
||||
// 禁用图标
|
||||
.anticon-stop {
|
||||
transform: rotate(-45deg) scale(0.9);
|
||||
position: absolute;
|
||||
left: 3px;
|
||||
top: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,243 +1,266 @@
|
||||
<template>
|
||||
<a-spin :spinning="isLoading">
|
||||
<!-- 照明区域 -->
|
||||
<div>
|
||||
<div class="light-area">
|
||||
<div class="light-area-tab"></div>
|
||||
<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 class="light-area">
|
||||
<div class="light-area-tab"></div>
|
||||
<span class="light-area-text">空调区域</span>
|
||||
</div>
|
||||
<!-- 空调分组部分 -->
|
||||
<div>
|
||||
<div class="circuit-area">
|
||||
<div class="circuit-tab"></div>
|
||||
<span class="circuit-text">空调分组</span>
|
||||
<div class="btn2">
|
||||
<!-- 空调区域按钮部分 -->
|
||||
<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 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
|
||||
class="openPlan"
|
||||
:class="{ enabled2: isPlanEnabled2, disabled2: !isPlanEnabled2 }"
|
||||
@click="togglePlan2">
|
||||
{{ isPlanEnabled2 ? '启用开关' : '禁用开关' }}
|
||||
</button>
|
||||
<a-switch
|
||||
v-model:checked="selectAllCheckbox"
|
||||
:disabled="singleSelection"
|
||||
:class="{
|
||||
'blue-background': selectAllCheckbox,
|
||||
'grey-background': !selectAllCheckbox,
|
||||
}"
|
||||
@change="toggleAllSelection" />
|
||||
<button class="allBtn">全选</button>
|
||||
<button class="both" @click="selectAll">
|
||||
{{ singleSelection ? '多选' : '单选' }}
|
||||
</button>
|
||||
</div>
|
||||
</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 v-show="thisButton2.dataCode">
|
||||
<div class="control-area">
|
||||
<div class="control-tab"></div>
|
||||
<span class="control-text">控制模式</span>
|
||||
</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 }}
|
||||
</a-badge>
|
||||
<a-switch
|
||||
v-model:checked="selectAllCheckbox"
|
||||
:disabled="singleSelection"
|
||||
:class="{
|
||||
'blue-background': selectAllCheckbox,
|
||||
'grey-background': !selectAllCheckbox,
|
||||
}"
|
||||
@change="toggleAllSelection" />
|
||||
<button class="allBtn">全选</button>
|
||||
<button class="both" @click="selectAll">
|
||||
{{ singleSelection ? '多选' : '单选' }}
|
||||
</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">
|
||||
<div class="btnArea">
|
||||
<template v-if="!showAllButtons">
|
||||
<button
|
||||
v-for="(button4, index) in thisButton3.childList"
|
||||
v-for="(button, index) in limitedButtons2"
|
||||
:key="index"
|
||||
:class="{ btn: true, selected: button4.executeStatus.value != 0 }"
|
||||
@click="selectButton4(button4)">
|
||||
{{ button4.name }}
|
||||
:class="{ btn: true, selected: button.selected }"
|
||||
class="zmhlbtn"
|
||||
@click="changeLine(button)">
|
||||
<div v-if="button.lockStatus" class="btn-back">
|
||||
<stop-outlined />
|
||||
</div>
|
||||
{{ button.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>
|
||||
|
||||
<a-spin :spinning="buttonLoading">
|
||||
<button class="execute" @click="showModal">执行</button>
|
||||
</a-spin>
|
||||
</div>
|
||||
|
||||
<!-- 点击执行时的弹出框 -->
|
||||
<div class="out-dialog" v-if="executeVisible">
|
||||
<div class="content">
|
||||
<div>
|
||||
<div class="div-operation"></div>
|
||||
<span class="text-operation">变更内容 </span>
|
||||
<div style="margin-top: 10px">
|
||||
<span @click="showAllButtons = true" class="openzm"><down-outlined /> 展开</span>
|
||||
</div>
|
||||
<div class="j-box" v-for="item in diffList" :key="item.id">
|
||||
<div class="journal" style="margin-top: 20px">
|
||||
<div class="imgText">
|
||||
<div class="zjzm">
|
||||
<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.regionName + ' > ' + item.deviceGroupName }}</span
|
||||
>
|
||||
</div>
|
||||
<a-popconfirm
|
||||
title="此操作将会撤销修改"
|
||||
ok-text="确定"
|
||||
cancel-text="取消"
|
||||
@confirm="delBtn(item)"
|
||||
@cancel="changeCancel">
|
||||
<button class="cxbtn">撤销</button>
|
||||
</a-popconfirm>
|
||||
</template>
|
||||
<template v-else>
|
||||
<button
|
||||
v-for="(button, index) in buttons2"
|
||||
:key="index"
|
||||
:class="{ btn: true, selected: button.selected }"
|
||||
class="zmhlbtn"
|
||||
@click="changeLine(button)">
|
||||
<div v-if="button.lockStatus" class="btn-back">
|
||||
<stop-outlined />
|
||||
</div>
|
||||
{{ button.name }}
|
||||
</button>
|
||||
<div style="margin-top: 10px">
|
||||
<span @click="showAllButtons = false" class="openzm"><up-outlined /> 回缩</span>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 控制模式部分 -->
|
||||
<div v-show="thisButton2.dataCode">
|
||||
<div class="control-area">
|
||||
<div class="control-tab"></div>
|
||||
<span class="control-text">控制模式</span>
|
||||
</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="content">
|
||||
<div>
|
||||
<div class="div-operation"></div>
|
||||
<span class="text-operation">变更内容 </span>
|
||||
</div>
|
||||
<div class="j-box" v-for="item in diffList" :key="item.id">
|
||||
<div class="journal" style="margin-top: 20px">
|
||||
<div class="imgText">
|
||||
<div class="zjzm">
|
||||
<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.regionName + ' > ' + item.deviceGroupName }}</span
|
||||
>
|
||||
</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>
|
||||
<a-popconfirm
|
||||
title="此操作将会撤销修改"
|
||||
ok-text="确定"
|
||||
cancel-text="取消"
|
||||
@confirm="delBtn(item)"
|
||||
@cancel="changeCancel">
|
||||
<button class="cxbtn">撤销</button>
|
||||
</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 class="btn-item">
|
||||
<div class="left"> 亮度 </div>
|
||||
<div class="right">
|
||||
<!-- 数字0也会被判为false，故只判断undefined 和 null -->
|
||||
<span>{{
|
||||
item?.stateBefore?.brightness != undefined ? item.stateBefore.brightness : '--'
|
||||
}}</span>
|
||||
<img src="/asset/image/bulbLogo/22406.png" alt="" />
|
||||
<span>{{
|
||||
item?.stateAfter?.brightness != undefined ? item.stateAfter.brightness : '--'
|
||||
}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn-item">
|
||||
<div class="left"> 亮度 </div>
|
||||
<div class="right">
|
||||
<!-- 数字0也会被判为false，故只判断undefined 和 null -->
|
||||
<span>{{
|
||||
item?.stateBefore?.brightness != undefined ? item.stateBefore.brightness : '--'
|
||||
}}</span>
|
||||
<img src="/asset/image/bulbLogo/22406.png" alt="" />
|
||||
<span>{{
|
||||
item?.stateAfter?.brightness != undefined ? item.stateAfter.brightness : '--'
|
||||
}}</span>
|
||||
</div>
|
||||
<div class="btn-item">
|
||||
<div class="left"> 控制场景 </div>
|
||||
<div class="right">
|
||||
<span>{{
|
||||
item?.stateBefore?.scene?.label ? item.stateBefore.scene.label : '--'
|
||||
}}</span>
|
||||
<img src="/asset/image/bulbLogo/22406.png" alt="" />
|
||||
<span>{{
|
||||
item?.stateAfter?.scene?.label ? item.stateAfter.scene.label : '--'
|
||||
}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn-item">
|
||||
<div class="left"> 控制场景 </div>
|
||||
<div class="right">
|
||||
<span>{{
|
||||
item?.stateBefore?.scene?.label ? item.stateBefore.scene.label : '--'
|
||||
}}</span>
|
||||
<img src="/asset/image/bulbLogo/22406.png" alt="" />
|
||||
<span>{{
|
||||
item?.stateAfter?.scene?.label ? item.stateAfter.scene.label : '--'
|
||||
}}</span>
|
||||
</div>
|
||||
<div class="btn-item">
|
||||
<div class="left"> 色温 </div>
|
||||
<div class="right">
|
||||
<span>{{
|
||||
item?.stateBefore?.color != undefined ? item.stateBefore.color : '--'
|
||||
}}</span>
|
||||
<img src="/asset/image/bulbLogo/22406.png" alt="" />
|
||||
<span>
|
||||
{{ item?.stateAfter?.color != undefined ? item.stateAfter.color : '--' }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn-item">
|
||||
<div class="left"> 色温 </div>
|
||||
<div class="right">
|
||||
<span>{{
|
||||
item?.stateBefore?.color != undefined ? item.stateBefore.color : '--'
|
||||
}}</span>
|
||||
<img src="/asset/image/bulbLogo/22406.png" alt="" />
|
||||
<span>
|
||||
{{ item?.stateAfter?.color != undefined ? item.stateAfter.color : '--' }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn-item">
|
||||
<div class="left"> 启用状态 </div>
|
||||
<div class="right">
|
||||
<span>{{
|
||||
item?.stateBefore?.lockStatus != undefined
|
||||
? item.stateBefore.lockStatus
|
||||
? '禁用'
|
||||
: '启用'
|
||||
: '--'
|
||||
}}</span>
|
||||
<img src="/asset/image/bulbLogo/22406.png" alt="" />
|
||||
<span>
|
||||
{{
|
||||
item?.stateAfter?.lockStatus != undefined
|
||||
? item.stateAfter.lockStatus
|
||||
? '禁用'
|
||||
: '启用'
|
||||
: '--'
|
||||
}}
|
||||
</span>
|
||||
</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>
|
||||
</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>
|
||||
|
||||
<script setup lang="ts">
|
||||
@@ -304,48 +327,67 @@
|
||||
emit('changeArea', button.id);
|
||||
// 当前选中回路 - 置空
|
||||
resetMode();
|
||||
// 最近交互过的按钮 - 置空
|
||||
handleButton.value = '';
|
||||
};
|
||||
// 默认最多展示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 = () => {
|
||||
// 如果未交互任何按钮
|
||||
if (handleButton.value == '') {
|
||||
return message.info('请选择空调分组');
|
||||
}
|
||||
// 获取最近交互过的按钮
|
||||
const btn: any = buttons2.value.find((button: any) => button.id === handleButton.value);
|
||||
let panel = +!btn.ctrlStatus;
|
||||
isLoading.value = true;
|
||||
http
|
||||
.get(lightingManage.setDisable, {
|
||||
deviceGroup: btn.dataCode,
|
||||
panel,
|
||||
projectId: state.projectId,
|
||||
siteId: state.siteId,
|
||||
})
|
||||
.then((res) => {
|
||||
if (res.msg === 'success') {
|
||||
// 确认成功后 - 按钮文本取反 - 按钮布尔值修改 - 关闭loading
|
||||
isPlanEnabled2.value = !isPlanEnabled2.value;
|
||||
btn.ctrlStatus = panel;
|
||||
isLoading.value = false;
|
||||
} else {
|
||||
isLoading.value = false;
|
||||
// 获取选中线路
|
||||
let valid = buttons2.value.filter((item: any) => {
|
||||
return item.selected;
|
||||
});
|
||||
// 未选中线路
|
||||
if (valid.length == 0) {
|
||||
return message.info('请先选择线路');
|
||||
// 选中线路
|
||||
} else {
|
||||
// 按钮切换
|
||||
isPlanEnabled2.value = !isPlanEnabled2.value;
|
||||
// 禁用状态原值
|
||||
let after = +isPlanEnabled2.value;
|
||||
// 当前修改线路
|
||||
valid.forEach((item: any) => {
|
||||
// 按钮与需修改的值一致，无效
|
||||
if (item.lockStatus == after) {
|
||||
return;
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
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 {
|
||||
lockList.value.push({
|
||||
deviceGroup: item.dataCode,
|
||||
deviceGroupName: item.name,
|
||||
region: item.treePid,
|
||||
regionName: '',
|
||||
before: item.lockStatus,
|
||||
lockStatus: after,
|
||||
});
|
||||
}
|
||||
// 修改
|
||||
item.lockStatus = after;
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
// 是否单选，状态
|
||||
@@ -399,8 +441,6 @@
|
||||
});
|
||||
// 照明回路的按钮切换
|
||||
const changeLine = (button: any) => {
|
||||
// 存储一次按钮ID，用于禁用/启用交互
|
||||
handleButton.value = button.id;
|
||||
// 根据按钮状态，展示禁用/启用按钮文本
|
||||
if (button.ctrlStatus) {
|
||||
isPlanEnabled2.value = true;
|
||||
@@ -449,7 +489,7 @@
|
||||
console.log(thisButton2, 'button');
|
||||
};
|
||||
|
||||
// 照明回路所有按钮
|
||||
// 空调分组所有按钮
|
||||
const buttons2 = ref([]);
|
||||
// 按钮区展开与收起状态
|
||||
const showAllButtons = ref(false);
|
||||
@@ -612,9 +652,6 @@
|
||||
|
||||
// 底部按钮区 ======================================================================
|
||||
|
||||
const isLoading = ref(false);
|
||||
// 执行按钮loading
|
||||
const buttonLoading = ref(false);
|
||||
// 刷新
|
||||
const refresh = (reload = false) => {
|
||||
// 关闭执行弹窗
|
||||
@@ -631,6 +668,12 @@
|
||||
});
|
||||
}
|
||||
changeList.value = [];
|
||||
if (!reload) {
|
||||
lockList.value.forEach((item: any) => {
|
||||
resetLockList(item);
|
||||
});
|
||||
}
|
||||
lockList.value = [];
|
||||
// 默认选择第一个楼层
|
||||
let data = props.treeData[0];
|
||||
// 默认选中
|
||||
@@ -640,6 +683,18 @@
|
||||
// 将选中线路重置
|
||||
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) => {
|
||||
props.treeData.find((v: any) => {
|
||||
@@ -675,11 +730,10 @@
|
||||
if (!changeList.value.length) {
|
||||
return message.info('未产生任何修改');
|
||||
}
|
||||
buttonLoading.value = true;
|
||||
http
|
||||
.post(airConditionControl.getChangeList, {
|
||||
sceneList: changeList.value,
|
||||
lockList: [],
|
||||
lockList: lockList.value,
|
||||
projectId: state.projectId,
|
||||
siteId: state.siteId,
|
||||
})
|
||||
@@ -690,11 +744,8 @@
|
||||
} else {
|
||||
message.warning('获取修改内容失败');
|
||||
}
|
||||
buttonLoading.value = false;
|
||||
})
|
||||
.catch(() => {
|
||||
buttonLoading.value = false;
|
||||
});
|
||||
.catch(() => {});
|
||||
};
|
||||
// 通用取消
|
||||
const changeCancel = () => {};
|
||||
@@ -714,17 +765,19 @@
|
||||
obj.scene = obj.stateAfter.scene.value;
|
||||
obj.before = obj.stateBefore.scene.value;
|
||||
resetChangeList(obj);
|
||||
resetLockList(obj);
|
||||
// 将 changeList 与 diffList 中记录的修改移除 (排除极端情况)
|
||||
changeList.value = changeList.value.filter((item: any) => {
|
||||
return item.deviceGroup !== obj.deviceGroup;
|
||||
});
|
||||
lockList.value = lockList.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) {
|
||||
if (changeList.value.length == 0 && lockList.value.length == 0) {
|
||||
executeVisible.value = false;
|
||||
}
|
||||
};
|
||||
@@ -733,7 +786,7 @@
|
||||
http
|
||||
.post(airConditionControl.submitChangeList, {
|
||||
sceneList: changeList.value,
|
||||
lockList: [],
|
||||
lockList: lockList.value,
|
||||
projectId: state.projectId,
|
||||
siteId: state.siteId,
|
||||
})
|
||||
|
||||
Reference in New Issue
Block a user