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,
|
||||
})
|
||||
|
||||
@@ -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"
|
||||
@@ -55,13 +47,17 @@
|
||||
:closable="false"
|
||||
id="drawer"
|
||||
:maskStyle="{ 'background-color': 'rgba(0, 0, 0, 0)' }">
|
||||
<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-tabs v-model:activeKey="activeKey">
|
||||
<a-tab-pane key="1" tab="控制面板">
|
||||
<tabs1
|
||||
ref="tabs1Ref"
|
||||
@changeArea="changeArea"
|
||||
@reset="reset"
|
||||
@reload="reload"
|
||||
@changeArea="changeArea"
|
||||
:treeData="treeData" />
|
||||
</a-tab-pane>
|
||||
<a-tab-pane key="2" tab="计划列表" force-render>
|
||||
@@ -77,6 +73,7 @@
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted } from 'vue';
|
||||
import { lightPosition } from './lightPosition';
|
||||
// 组件
|
||||
import light from './light.vue';
|
||||
import tabs1 from './tabs1.vue';
|
||||
@@ -289,7 +286,12 @@
|
||||
siteId: state.siteId,
|
||||
})
|
||||
.then((res) => {
|
||||
console.log(res);
|
||||
const data = res.data;
|
||||
data.forEach((item: any, index: number) => {
|
||||
item.styleText = lightPosition[index];
|
||||
});
|
||||
console.log(res.data);
|
||||
// bulbs.value = data;
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
@@ -1,3 +1,6 @@
|
||||
// 此文件只定义light（即俯视图小灯泡）的位置信息
|
||||
// 与显示状态和分组信息无关
|
||||
export const lightPosition = [];
|
||||
export const lightPosition = [
|
||||
{ left: '180px', bottom: '200px' },
|
||||
{ left: '180px', bottom: '230px' },
|
||||
];
|
||||
|
||||
@@ -413,12 +413,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, index) 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: 18px; 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>
|
||||
<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">
|
||||
<!-- 由于数字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">
|
||||
<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?.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?.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 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">
|
||||
@@ -303,48 +326,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;
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
// 是否单选，状态
|
||||
@@ -398,8 +440,6 @@
|
||||
});
|
||||
// 照明回路的按钮切换
|
||||
const changeLine = (button: any) => {
|
||||
// 存储一次按钮ID，用于禁用/启用交互
|
||||
handleButton.value = button.id;
|
||||
// 根据按钮状态，展示禁用/启用按钮文本
|
||||
if (button.ctrlStatus) {
|
||||
isPlanEnabled2.value = true;
|
||||
@@ -611,9 +651,6 @@
|
||||
|
||||
// 底部按钮区 ======================================================================
|
||||
|
||||
const isLoading = ref(false);
|
||||
// 执行按钮loading
|
||||
const buttonLoading = ref(false);
|
||||
// 刷新
|
||||
const refresh = (reload = false) => {
|
||||
// 关闭执行弹窗
|
||||
@@ -630,6 +667,12 @@
|
||||
});
|
||||
}
|
||||
changeList.value = [];
|
||||
if (!reload) {
|
||||
lockList.value.forEach((item: any) => {
|
||||
resetLockList(item);
|
||||
});
|
||||
}
|
||||
lockList.value = [];
|
||||
// 默认选择第一个楼层
|
||||
let data = props.treeData[0];
|
||||
// 默认选中
|
||||
@@ -638,7 +681,19 @@
|
||||
buttons2.value = data.childList;
|
||||
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) => {
|
||||
if (item.region == v.dataCode) {
|
||||
@@ -653,7 +708,7 @@
|
||||
v3.executeStatus.value = 0;
|
||||
}
|
||||
if (!item.before) {
|
||||
console.log(item, '没有这个选项');
|
||||
console.log(item, '没有这个选项---');
|
||||
v3.executeStatus.value = 0;
|
||||
}
|
||||
// 旧值选中
|
||||
@@ -670,14 +725,13 @@
|
||||
};
|
||||
// 右下角的执行事件
|
||||
const showModal = () => {
|
||||
if (!changeList.value.length) {
|
||||
if (!changeList.value.length && !lockList.value.length) {
|
||||
return message.info('未产生任何修改');
|
||||
}
|
||||
buttonLoading.value = true;
|
||||
http
|
||||
.post(lightingManage.getChangeList, {
|
||||
sceneList: changeList.value,
|
||||
lockList: [],
|
||||
lockList: lockList.value,
|
||||
projectId: state.projectId,
|
||||
siteId: state.siteId,
|
||||
})
|
||||
@@ -688,11 +742,8 @@
|
||||
} else {
|
||||
message.warning('获取修改内容失败');
|
||||
}
|
||||
buttonLoading.value = false;
|
||||
})
|
||||
.catch(() => {
|
||||
buttonLoading.value = false;
|
||||
});
|
||||
.catch(() => {});
|
||||
};
|
||||
// 通用取消
|
||||
const changeCancel = () => {};
|
||||
@@ -705,24 +756,26 @@
|
||||
const changeList: any = ref([]);
|
||||
// 展示修改前后差异的内容
|
||||
const diffList = ref([]);
|
||||
//撤销
|
||||
// 撤销
|
||||
const delBtn = (obj: any) => {
|
||||
console.log(obj, '当前选择的修改内容');
|
||||
// 将treeData对应回路的数据改回，数据以后端为准
|
||||
obj.scene = obj.stateAfter.scene.value;
|
||||
obj.before = obj.stateBefore.scene.value;
|
||||
obj.scene = obj?.stateAfter?.scene?.value;
|
||||
obj.before = obj?.stateBefore?.scene?.value;
|
||||
resetChangeList(obj);
|
||||
// 将 changeList 与 diffList 中记录的修改移除 (排除极端情况)
|
||||
resetLockList(obj);
|
||||
// 将 changeList lockList 与 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;
|
||||
}
|
||||
};
|
||||
@@ -731,14 +784,15 @@
|
||||
http
|
||||
.post(lightingManage.submitChangeList, {
|
||||
sceneList: changeList.value,
|
||||
lockList: [],
|
||||
lockList: lockList.value,
|
||||
projectId: state.projectId,
|
||||
siteId: state.siteId,
|
||||
})
|
||||
.then(() => {
|
||||
emit('reload');
|
||||
refresh(true);
|
||||
});
|
||||
})
|
||||
.catch(() => {});
|
||||
};
|
||||
|
||||
// 其他业务 ========================================================================
|
||||
|
||||
Reference in New Issue
Block a user