chenpingsen
4 months ago
14 changed files with 2597 additions and 52 deletions
@ -0,0 +1,28 @@ |
|||||
|
const prefix = '/carbon-smart'; |
||||
|
// 空调系统及相关接口
|
||||
|
export enum airConditionControl { |
||||
|
// 主页 ======================================================
|
||||
|
|
||||
|
// 主页分区结构
|
||||
|
getTree = prefix + '/airConditioningCtrl/getCtrlPanelTree', |
||||
|
// 主页小灯泡
|
||||
|
getDeviceList = prefix + '/airConditioningCtrl/getDeviceState', |
||||
|
|
||||
|
// 主页 > 抽屉 > 控制面板 =======================================
|
||||
|
|
||||
|
// 获得修改的比对列表
|
||||
|
getChangeList = prefix + '/airConditioningCtrl/getSceneChangeInfo', |
||||
|
// 提交修改结果
|
||||
|
submitChangeList = prefix + '/airConditioningCtrl/changeToSceneMode', |
||||
|
|
||||
|
// 主页 > 抽屉 > 计划列表 =======================================
|
||||
|
|
||||
|
// 穿梭框来源数据
|
||||
|
getTransData = prefix + '/airConditioningInfo/getDeActivatedPlanList', |
||||
|
// 右侧表格数据
|
||||
|
getTableData = prefix + '/airConditioningInfo/getActivatedPlanList', |
||||
|
// 穿梭框结果数据提交
|
||||
|
submitTransData = prefix + '/airConditioningInfo/activePlanByIdList', |
||||
|
// 右侧表格修改数据提交
|
||||
|
submitTableData = prefix + '/airConditioningCtrl/refreshPlanStatus', |
||||
|
} |
||||
@ -0,0 +1,157 @@ |
|||||
|
.out-dialog { |
||||
|
position: fixed; |
||||
|
right: 496px; |
||||
|
width: 500px; |
||||
|
height: 100%; |
||||
|
z-index: 0; |
||||
|
top: 0; |
||||
|
bottom: 0; |
||||
|
margin: auto; |
||||
|
box-sizing: border-box; |
||||
|
color: rgb(255, 83, 0); |
||||
|
background: black; |
||||
|
display: flex; |
||||
|
padding: 25px; |
||||
|
flex-direction: column; |
||||
|
transition: all ease 0.5s; |
||||
|
.content { |
||||
|
overflow-y: scroll; |
||||
|
.div-operation { |
||||
|
display: inline-block; |
||||
|
width: 3px; |
||||
|
height: 13px; |
||||
|
opacity: 1; |
||||
|
border-radius: 1px; |
||||
|
background: rgba(67, 136, 251, 1); |
||||
|
} |
||||
|
.text-operation { |
||||
|
display: inline-block; |
||||
|
color: rgba(255, 255, 255, 1); |
||||
|
font-size: 16px; |
||||
|
font-weight: 700; |
||||
|
margin-left: 5px; |
||||
|
} |
||||
|
.j-box { |
||||
|
background-color: #000; |
||||
|
opacity: 1; |
||||
|
z-index: 99999; |
||||
|
overflow-y: scroll; |
||||
|
.journal { |
||||
|
padding: 1% 3%; |
||||
|
width: 100%; |
||||
|
height: 150px; |
||||
|
background-color: rgba(0, 0, 0); |
||||
|
border-radius: 12px; |
||||
|
border: 2px solid transparent; |
||||
|
border-image: linear-gradient(to bottom, #0077ff, #00f6ff, #000000) 1; |
||||
|
.title-img { |
||||
|
padding-top: 6px; |
||||
|
} |
||||
|
} |
||||
|
.imgText { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: space-between; |
||||
|
|
||||
|
.ztzm { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
} |
||||
|
|
||||
|
.cxbtn { |
||||
|
color: rgba(255, 255, 255, 1); |
||||
|
border: none; |
||||
|
border-radius: 6px; |
||||
|
width: 59.79px; |
||||
|
height: 32px; |
||||
|
opacity: 1; |
||||
|
background: linear-gradient( |
||||
|
180deg, |
||||
|
rgba(255, 187, 0, 1) 0%, |
||||
|
rgba(255, 112, 3, 1) 91.21%, |
||||
|
rgba(255, 129, 3, 1) 100% |
||||
|
); |
||||
|
cursor: pointer; |
||||
|
} |
||||
|
} |
||||
|
.btn-box { |
||||
|
display: grid; |
||||
|
grid-template-columns: 1fr 1fr; |
||||
|
grid-template-rows: 1fr 1fr; |
||||
|
grid-row-gap: 15px; |
||||
|
.btn-item { |
||||
|
text-align: center; |
||||
|
display: flex; |
||||
|
align-content: space-between; |
||||
|
.left { |
||||
|
width: 70px; |
||||
|
height: 35px; |
||||
|
line-height: 35px; |
||||
|
border-radius: 4px; |
||||
|
background: linear-gradient( |
||||
|
180deg, |
||||
|
rgba(1, 206, 255, 1) 0%, |
||||
|
rgba(0, 150, 229, 1) 100% |
||||
|
); |
||||
|
color: rgba(255, 255, 255, 1); |
||||
|
font-size: 14px; |
||||
|
font-weight: 400; |
||||
|
} |
||||
|
.right { |
||||
|
width: 140px; |
||||
|
height: 35px; |
||||
|
line-height: 35px; |
||||
|
:first-child { |
||||
|
color: white; |
||||
|
} |
||||
|
span { |
||||
|
vertical-align: middle; |
||||
|
} |
||||
|
img { |
||||
|
padding: 0 5px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.button-box { |
||||
|
width: 100%; |
||||
|
box-sizing: border-box; |
||||
|
padding: 10px; |
||||
|
height: 60px; |
||||
|
position: absolute; |
||||
|
background-color: transparent; |
||||
|
bottom: 0; |
||||
|
left: 0; |
||||
|
right: 0; |
||||
|
.execute, .cancel { |
||||
|
margin-right: 10px; |
||||
|
width: 74px; |
||||
|
height: 40px; |
||||
|
opacity: 1; |
||||
|
cursor: pointer; |
||||
|
border-radius: 4px; |
||||
|
font-size: 14px; |
||||
|
font-weight: 400; |
||||
|
border: 0; |
||||
|
margin-left: 10px; |
||||
|
} |
||||
|
.execute { |
||||
|
background: rgb(67, 136, 251); |
||||
|
color: white; |
||||
|
} |
||||
|
.cancel { |
||||
|
background: white; |
||||
|
color: black; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.fade-enter-active, .fade-leave-active { |
||||
|
transform: translateX(0px); |
||||
|
} |
||||
|
.fade-enter-from, .fade-leave-to { |
||||
|
transform: translateX(496px); |
||||
|
} |
||||
@ -0,0 +1,149 @@ |
|||||
|
// 页面容器 |
||||
|
.lighting-box { |
||||
|
position: relative; |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
// background: linear-gradient(#badaff, #8cabeb, #7095de); |
||||
|
// 照明设备功能总容器 |
||||
|
.lighting-img-box { |
||||
|
position: relative; |
||||
|
width: 1280px; |
||||
|
height: 720px; |
||||
|
user-select: none; |
||||
|
background-image: url(../image/bg.jpg); |
||||
|
// 由于背景是俯视图，会产生有交点的透视效果，故使用透视属性 |
||||
|
perspective: 1000px; |
||||
|
perspective-origin: 850px -160px; |
||||
|
// 左上角区域切换功能 |
||||
|
.btn-box { |
||||
|
width: 120px; |
||||
|
position: sticky; |
||||
|
top: 10px; |
||||
|
left: 10px; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
gap: 8px; |
||||
|
.btn-item { |
||||
|
cursor: pointer; |
||||
|
width: 100%; |
||||
|
height: 40px; |
||||
|
border-radius: 4px; |
||||
|
background: rgba(39, 120, 255, 1); |
||||
|
border: 1px solid rgba(51, 199, 255, 1); |
||||
|
box-shadow: 0px 10px 15px rgba(0, 54, 136, 0.3); |
||||
|
font-size: 18px; |
||||
|
color: white; |
||||
|
} |
||||
|
.btn-item:hover { |
||||
|
color: black; |
||||
|
} |
||||
|
} |
||||
|
// 大区分区 |
||||
|
.area{ |
||||
|
position: absolute; |
||||
|
bottom: 170px; |
||||
|
left: 240px; |
||||
|
width: 780px; |
||||
|
height: 240px; |
||||
|
transform: rotateX(79deg) rotateZ(-22deg) skew(29deg); |
||||
|
display: flex; |
||||
|
gap: 5px; |
||||
|
.area1 { |
||||
|
width: 65px; |
||||
|
background: rgba(0, 251, 91, 0.3); |
||||
|
border: 2px solid rgb(0, 251, 91); |
||||
|
display: flex; |
||||
|
} |
||||
|
.area2 { |
||||
|
width: 100px; |
||||
|
background: rgba(255, 165, 0, 0.3); |
||||
|
border: 2px solid rgb(255, 165, 0); |
||||
|
display: flex; |
||||
|
} |
||||
|
.area3 { |
||||
|
width: 220px; |
||||
|
background: rgba(255, 0, 0, 0.3); |
||||
|
border: 2px solid rgb(255, 0, 0); |
||||
|
display: flex; |
||||
|
} |
||||
|
.area4 { |
||||
|
width: 70px; |
||||
|
background: rgba(80, 236, 244, 0.3); |
||||
|
border: 2px solid rgb(80, 236, 244); |
||||
|
display: flex; |
||||
|
} |
||||
|
.area5 { |
||||
|
flex: 210px; |
||||
|
background: rgba(0, 251, 91, 0.3); |
||||
|
border: 2px solid rgb(0, 251, 91); |
||||
|
display: flex; |
||||
|
} |
||||
|
.area6 { |
||||
|
flex: 1; |
||||
|
background: rgba(255, 165, 0, 0.3); |
||||
|
border: 2px solid rgb(255, 165, 0); |
||||
|
display: flex; |
||||
|
} |
||||
|
.area-item:hover { |
||||
|
transform: scale(1.05); |
||||
|
} |
||||
|
.area-item { |
||||
|
cursor: pointer; |
||||
|
transition: all ease 0.2s; |
||||
|
>.light-group { |
||||
|
height: 100%; |
||||
|
flex: 1; |
||||
|
display:flex; |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
box-sizing: border-box; |
||||
|
padding: 10px; |
||||
|
// border: 2px solid red; |
||||
|
.shadow-box { |
||||
|
width: 30px; |
||||
|
height: 200px; |
||||
|
border-radius: 20px; |
||||
|
background: rgba(0, 0, 0, 0.2); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
// 总容器与抽屉按钮 |
||||
|
.ns-content-main { |
||||
|
position: relative; |
||||
|
// 抽屉打开按钮 |
||||
|
.drawer-box-in { |
||||
|
width: 30px; |
||||
|
height: 40px; |
||||
|
border-radius: 2px; |
||||
|
position: fixed; |
||||
|
right: 0; |
||||
|
top: 0; |
||||
|
bottom: 0; |
||||
|
margin: auto; |
||||
|
background: rgba(0, 0 ,0 ,0.5); |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
cursor: pointer; |
||||
|
} |
||||
|
// 抽屉关闭按钮 |
||||
|
.drawer-box-out { |
||||
|
width: 30px; |
||||
|
height: 40px; |
||||
|
border-radius: 2px; |
||||
|
position: fixed; |
||||
|
right: 496px; |
||||
|
top: 0; |
||||
|
bottom: 0; |
||||
|
margin: auto; |
||||
|
background: rgba(0, 0 ,0 ,0.5); |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
cursor: pointer; |
||||
|
} |
||||
|
|
||||
|
} |
||||
@ -0,0 +1,323 @@ |
|||||
|
<template> |
||||
|
<div class="lighting-box"> |
||||
|
<div class="lighting-img-box"> |
||||
|
<!-- 左上角，区域切换 --> |
||||
|
<div class="btn-box"> |
||||
|
<button |
||||
|
v-for="(item, index) in floorData" |
||||
|
:key="index" |
||||
|
class="btn-item" |
||||
|
:style="{ color: item.dataCode == thisFloor ? 'black' : 'white' }" |
||||
|
@click="changeFloor(item.childList, item.dataCode)" |
||||
|
>{{ item.name }}</button |
||||
|
> |
||||
|
</div> |
||||
|
<!-- 楼层区域 --> |
||||
|
<div class="area"> |
||||
|
<div |
||||
|
v-for="(item, index) in treeData" |
||||
|
:class="computedClass(item.id)" |
||||
|
@click="changeThisArea([item])" |
||||
|
:key="index"> |
||||
|
<div v-for="(v, i) in item.childList" :key="i" class="light-group"> |
||||
|
<div class="group-shadow" @click.stop="changeThisArea([item, v])"> |
||||
|
<div :class="computedClass(v.id)" class="shadow-box"></div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<!-- 照明设备 --> |
||||
|
<div class="lights"> |
||||
|
<light |
||||
|
v-for="(item, index) in bulbs" |
||||
|
:key="index" |
||||
|
:styleObject="item.styleText" |
||||
|
:type="item.type" |
||||
|
: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" |
||||
|
class="drawer-item" |
||||
|
width="496" |
||||
|
:forceRender="preload" |
||||
|
placement="right" |
||||
|
:body-style="{ background: 'rgba(0, 0, 0)', opacity: 0.8 }" |
||||
|
:closable="false" |
||||
|
id="drawer" |
||||
|
:maskStyle="{ 'background-color': 'rgba(0, 0, 0, 0)' }"> |
||||
|
<a-tabs v-model:activeKey="activeKey"> |
||||
|
<a-tab-pane key="1" tab="控制面板"> |
||||
|
<tabs1 |
||||
|
ref="tabs1Ref" |
||||
|
@changeArea="changeArea" |
||||
|
@reset="reset" |
||||
|
@reload="reload" |
||||
|
:treeData="treeData" /> |
||||
|
</a-tab-pane> |
||||
|
<a-tab-pane key="2" tab="计划列表" force-render> |
||||
|
<tabs2 /> |
||||
|
</a-tab-pane> |
||||
|
<a-tab-pane key="3" tab="日志"> |
||||
|
<tabs3 /> |
||||
|
</a-tab-pane> |
||||
|
</a-tabs> |
||||
|
</a-drawer> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script setup lang="ts"> |
||||
|
import { ref, onMounted } from 'vue'; |
||||
|
// 组件 |
||||
|
import light from './light.vue'; |
||||
|
import tabs1 from './tabs1.vue'; |
||||
|
import tabs2 from './tabs2.vue'; |
||||
|
import tabs3 from './tabs3.vue'; |
||||
|
// 请求 |
||||
|
import { http } from '/nerv-lib/util/http'; |
||||
|
import { airConditionControl } from '/@/api/airConditionControlSystem'; |
||||
|
// ICON |
||||
|
import { DoubleLeftOutlined, DoubleRightOutlined } from '@ant-design/icons-vue'; |
||||
|
// 全局变量 |
||||
|
import { items } from '/@/store/item'; |
||||
|
|
||||
|
// 初始化 ======================================================= |
||||
|
|
||||
|
onMounted(() => { |
||||
|
// 获得分区与线路的结构 |
||||
|
getAllArea(); |
||||
|
// 获得俯视图中的小灯泡 |
||||
|
getBulbs(); |
||||
|
}); |
||||
|
|
||||
|
// 获得全局变量 |
||||
|
const state = items(); |
||||
|
// 预加载flag，获得分区数据后，预加载抽屉，防止获取ref报错 |
||||
|
const preload = ref(false); |
||||
|
|
||||
|
// 分层业务 ===================================================== |
||||
|
|
||||
|
// 所有楼层的数据 |
||||
|
const floorData = ref([]); |
||||
|
// 当前选择的楼层 |
||||
|
const thisFloor = ref('1'); |
||||
|
// 左上角分层切换 |
||||
|
const changeFloor = (area: any, floor: string) => { |
||||
|
thisFloor.value = floor; |
||||
|
// 重置数据 |
||||
|
reset(); |
||||
|
// 重置视图 |
||||
|
changeArea(['1']); |
||||
|
// 切换楼层数据 |
||||
|
treeData.value = area; |
||||
|
// 默认选择第一项 |
||||
|
treeData.value[0].selected = true; |
||||
|
}; |
||||
|
|
||||
|
// 分区业务 ===================================================== |
||||
|
|
||||
|
// 分区结构树 |
||||
|
const treeData = ref([]); |
||||
|
// 当前选中的分区序列 - 用于样式渲染 |
||||
|
const area = ref(['1']); |
||||
|
// 线路内小灯泡 - 此处位置需前端写死 |
||||
|
const bulbs = ref([ |
||||
|
{ |
||||
|
styleText: { left: '180px', bottom: '200px' }, |
||||
|
area: 1, |
||||
|
type: 1, |
||||
|
visible: true, |
||||
|
}, |
||||
|
{ |
||||
|
styleText: { left: '230px', bottom: '125px' }, |
||||
|
area: 1, |
||||
|
type: 2, |
||||
|
visible: true, |
||||
|
}, |
||||
|
{ |
||||
|
styleText: { left: '320px', bottom: '140px' }, |
||||
|
area: 1, |
||||
|
type: 3, |
||||
|
visible: true, |
||||
|
}, |
||||
|
{ |
||||
|
styleText: { left: '245px', bottom: '230px' }, |
||||
|
area: 1, |
||||
|
type: 3, |
||||
|
visible: true, |
||||
|
}, |
||||
|
{ |
||||
|
styleText: { left: '405px', bottom: '230px' }, |
||||
|
area: 2, |
||||
|
type: 3, |
||||
|
visible: true, |
||||
|
}, |
||||
|
{ |
||||
|
styleText: { left: '460px', bottom: '180px' }, |
||||
|
area: 2, |
||||
|
type: 3, |
||||
|
visible: true, |
||||
|
}, |
||||
|
{ |
||||
|
styleText: { left: '360px', bottom: '275px' }, |
||||
|
area: 2, |
||||
|
type: 3, |
||||
|
visible: true, |
||||
|
}, |
||||
|
{ |
||||
|
styleText: { left: '715px', bottom: '320px' }, |
||||
|
area: 3, |
||||
|
type: 1, |
||||
|
visible: true, |
||||
|
}, |
||||
|
]); |
||||
|
// 由子组件控制的分区与线路切换 |
||||
|
const changeArea = (result: any) => { |
||||
|
console.log(result, 'changeArea'); |
||||
|
// 数组 |
||||
|
if (Array.isArray(result)) { |
||||
|
area.value = result; |
||||
|
// 不是数组 |
||||
|
} else { |
||||
|
area.value.length = 0; |
||||
|
area.value[0] = String(result); |
||||
|
} |
||||
|
}; |
||||
|
// 由当前组件控制的分区切换 |
||||
|
const changeThisArea = (result: any) => { |
||||
|
console.log(result, 'changeThisArea'); |
||||
|
// 修改前，将所有选项置空 |
||||
|
reset(); |
||||
|
let level1 = result[0]; |
||||
|
area.value.length = 0; |
||||
|
// 只选择了分区 |
||||
|
if (result.length === 1) { |
||||
|
result[0].selected = true; |
||||
|
area.value.push(result[0].id); |
||||
|
// 控制子组件按钮区 |
||||
|
tabs1Ref.value.changeArea(result[0]); |
||||
|
// 选择了分区 + 线路 |
||||
|
} else if (result.length === 2) { |
||||
|
// 如果没有分区，默认选择第一个 |
||||
|
if (!level1) { |
||||
|
level1 = treeData.value[0]; |
||||
|
} |
||||
|
// 选中状态都设为true |
||||
|
level1.selected = result[1].selected = true; |
||||
|
area.value.splice(0, 0, level1.id, result[1].id); |
||||
|
// 控制子组件按钮区 |
||||
|
tabs1Ref.value.changeArea(result[0]); |
||||
|
tabs1Ref.value.changeLine(result[1]); |
||||
|
} |
||||
|
}; |
||||
|
// 重置分区树所有当前选项 |
||||
|
const reset = () => { |
||||
|
treeData.value.forEach((item: any) => { |
||||
|
item.selected = false; |
||||
|
item.childList.forEach((v: any) => { |
||||
|
v.selected = false; |
||||
|
}); |
||||
|
}); |
||||
|
}; |
||||
|
// 俯视图分区选中计算函数 |
||||
|
const computedClass = (string: string) => { |
||||
|
if (area.value.indexOf(string) != -1) { |
||||
|
return `isActive area-item area${string}`; |
||||
|
} else { |
||||
|
return `area-item area${string}`; |
||||
|
} |
||||
|
}; |
||||
|
|
||||
|
// 获得所有分区 |
||||
|
const getAllArea = (realod = false) => { |
||||
|
http.get(airConditionControl.getTree, { projectId: state.projectId }).then((res) => { |
||||
|
const data = res.data; |
||||
|
floorData.value = data; |
||||
|
/** 只在前端使用的变量 |
||||
|
* @param id 用于判断样式和层级的前端属性 |
||||
|
* @param selected 用于表示是否选中的前端属性 |
||||
|
*/ |
||||
|
// 楼层 1 |
||||
|
data.forEach((floor: any) => { |
||||
|
// 分区 2 |
||||
|
floor.childList.forEach((item: any, index: number) => { |
||||
|
if (index == 0) { |
||||
|
item.selected = true; |
||||
|
} else { |
||||
|
item.selected = false; |
||||
|
} |
||||
|
item.id = String(index + 1); |
||||
|
// 分组 3 |
||||
|
item.childList.forEach((v: any, i: number) => { |
||||
|
v.selected = false; |
||||
|
v.id = index + 1 + '-' + (i + 1); |
||||
|
}); |
||||
|
}); |
||||
|
}); |
||||
|
// 默认展示 线路 1-1,重载则使用thisFloor当前选中的楼层数 |
||||
|
let index = 0; |
||||
|
if (realod) { |
||||
|
data.find((item: any, i: number) => { |
||||
|
if (item.dataCode == thisFloor.value) { |
||||
|
return (index = i); |
||||
|
} |
||||
|
}); |
||||
|
} |
||||
|
treeData.value = data[index].childList; |
||||
|
// 开始预加载 |
||||
|
preload.value = true; |
||||
|
}); |
||||
|
}; |
||||
|
const reload = () => { |
||||
|
getAllArea(true); |
||||
|
}; |
||||
|
|
||||
|
// 设备业务 小灯泡 ============================================== |
||||
|
|
||||
|
const getBulbs = () => { |
||||
|
http |
||||
|
.get(airConditionControl.getDeviceList, { |
||||
|
floor: thisFloor.value, |
||||
|
projectId: state.projectId, |
||||
|
siteId: state.siteId, |
||||
|
}) |
||||
|
.then((res) => { |
||||
|
console.log(res); |
||||
|
}); |
||||
|
}; |
||||
|
|
||||
|
// 抽屉业务 ===================================================== |
||||
|
|
||||
|
// 抽屉 - 当前选择的tab |
||||
|
let activeKey = ref('1'); |
||||
|
// 抽屉 - 打开状态 |
||||
|
let visible = ref(false); |
||||
|
// 抽屉 - 开关事件 |
||||
|
const toggleDrawer = () => { |
||||
|
visible.value = !visible.value; |
||||
|
}; |
||||
|
// 抽屉tab1组件的引用 |
||||
|
const tabs1Ref = ref(); |
||||
|
</script> |
||||
|
<style lang="less" scoped> |
||||
|
@import './index.less'; |
||||
|
|
||||
|
// 当前选中分区的样式 |
||||
|
.isActive { |
||||
|
border: 3px solid white !important; |
||||
|
} |
||||
|
|
||||
|
// 抽屉顶部tab按钮样式 |
||||
|
:deep(.ant-tabs-tab-btn) { |
||||
|
color: white; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,149 @@ |
|||||
|
<template> |
||||
|
<a-popover color="rgba(0, 0, 0, 0.8)"> |
||||
|
<template #content> |
||||
|
<div class="light-tag"> |
||||
|
<div class="light-tag-tit"> |
||||
|
<div> |
||||
|
<img src="/asset/image//bulbLogo/21962.png" alt="" /> |
||||
|
<span class="tag-text">{{ result.name }}</span> |
||||
|
</div> |
||||
|
<button class="right-button">{{ type == 1 ? '正常' : '关闭' }}</button> |
||||
|
</div> |
||||
|
<div class="light-tag-box"> |
||||
|
<div class="tag-box-item"> |
||||
|
<img src="/asset/image//bulbLogo/22496.png" alt="" /> |
||||
|
<span class="title">控制模式</span> |
||||
|
<span class="result">自动</span> |
||||
|
</div> |
||||
|
<div class="tag-box-item"> |
||||
|
<img src="/asset/image//bulbLogo/22496.png" alt="" /> |
||||
|
<span class="title">亮度</span> |
||||
|
<span class="result">{{ result.brightness }}</span> |
||||
|
</div> |
||||
|
<div class="tag-box-item"> |
||||
|
<img src="/asset/image//bulbLogo/22496.png" alt="" /> |
||||
|
<span class="title">控制场景</span> |
||||
|
<span class="result">{{ result.automatic2 }}</span> |
||||
|
</div> |
||||
|
<div class="tag-box-item"> |
||||
|
<img src="/asset/image//bulbLogo/22496.png" alt="" /> |
||||
|
<span class="title">色温</span> |
||||
|
<span class="result">{{ result.brightness3 }}</span> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
<div class="icon-box" :style="styleObject" v-show="visible"> |
||||
|
<img v-if="type == 1" class="icon-item" src="/asset/image/bulbLogo/22394.png" alt="" /> |
||||
|
<img v-if="type == 2" class="icon-item" src="/asset/image/bulbLogo/22396.png" alt="" /> |
||||
|
<img v-if="type == 3" class="icon-item" src="/asset/image/bulbLogo/22400.png" alt="" /> |
||||
|
</div> |
||||
|
</a-popover> |
||||
|
</template> |
||||
|
|
||||
|
<script setup lang="ts"> |
||||
|
import { ref } from 'vue'; |
||||
|
|
||||
|
defineProps({ |
||||
|
styleObject: Object, |
||||
|
type: Number, |
||||
|
visible: { |
||||
|
type: Boolean, |
||||
|
default: false, |
||||
|
}, |
||||
|
}); |
||||
|
|
||||
|
const result = ref({ |
||||
|
id: '1', |
||||
|
name: '站厅照明 1区', |
||||
|
manual: '手动', |
||||
|
automatic: '自动', |
||||
|
brightness: '100lux', |
||||
|
brightness2: '30lux', |
||||
|
manual2: '手动', |
||||
|
automatic2: '舒适', |
||||
|
brightness3: '4000k', |
||||
|
brightness4: '3800k', |
||||
|
}); |
||||
|
</script> |
||||
|
<style lang="less" scoped> |
||||
|
.icon-box { |
||||
|
width: 25px; |
||||
|
height: 25px; |
||||
|
position: absolute; |
||||
|
|
||||
|
.icon-item { |
||||
|
width: 25px; |
||||
|
cursor: pointer; |
||||
|
transition: all ease 0.1s; |
||||
|
} |
||||
|
|
||||
|
.icon-item:active { |
||||
|
transform: scale(1.2); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// 悬浮窗外部 |
||||
|
.light-tag { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
gap: 10px; |
||||
|
|
||||
|
// 悬浮窗标题 |
||||
|
.light-tag-tit { |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
vertical-align: middle; |
||||
|
height: 30px; |
||||
|
|
||||
|
.tag-text { |
||||
|
font-size: 16px; |
||||
|
font-weight: 700; |
||||
|
color: white; |
||||
|
padding-left: 10px; |
||||
|
} |
||||
|
|
||||
|
.right-button { |
||||
|
width: 50px; |
||||
|
height: 26px; |
||||
|
background: rgba(57, 215, 187, 0.1); |
||||
|
border: 1px solid rgba(57, 215, 187, 1); |
||||
|
font-size: 12px; |
||||
|
color: rgba(57, 215, 187, 1); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// 悬浮窗底部4格子 |
||||
|
.light-tag-box { |
||||
|
display: grid; |
||||
|
grid-template-columns: 1fr 1fr; |
||||
|
grid-template-rows: 1fr 1fr; |
||||
|
grid-gap: 10px; |
||||
|
|
||||
|
.tag-box-item { |
||||
|
position: relative; |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
|
||||
|
img { |
||||
|
width: 120px; |
||||
|
vertical-align: middle; |
||||
|
} |
||||
|
|
||||
|
.title { |
||||
|
position: absolute; |
||||
|
left: 60px; |
||||
|
top: 13px; |
||||
|
color: rgba(64, 255, 252, 1); |
||||
|
} |
||||
|
|
||||
|
.result { |
||||
|
line-height: 50px; |
||||
|
font-size: 16px; |
||||
|
font-weight: 700; |
||||
|
color: white; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,3 @@ |
|||||
|
// 此文件只定义light（即俯视图小灯泡）的位置信息
|
||||
|
// 与显示状态和分组信息无关
|
||||
|
export const lightPosition = []; |
||||
@ -0,0 +1,403 @@ |
|||||
|
// 抽屉 |
||||
|
.drawer-item { |
||||
|
|
||||
|
.light-area, |
||||
|
.circuit-area, |
||||
|
.control-area, |
||||
|
.control-scene-area, |
||||
|
.light-parameters-area { |
||||
|
width: 100%; |
||||
|
margin-top: 20px; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
} |
||||
|
|
||||
|
.light-area-tab, |
||||
|
.circuit-tab, |
||||
|
.control-tab, |
||||
|
.control-scene-tab, |
||||
|
.light-parameters-tab { |
||||
|
width: 5px; |
||||
|
height: 23px; |
||||
|
opacity: 1; |
||||
|
background: rgba(26, 174, 251, 1); |
||||
|
margin-right: 4px; |
||||
|
} |
||||
|
|
||||
|
.light-area-text, |
||||
|
.circuit-text, |
||||
|
.control-text, |
||||
|
.control-scene-text, |
||||
|
.light-parameters-text { |
||||
|
font-size: 14px; |
||||
|
color: white; |
||||
|
padding-left: 5px; |
||||
|
line-height: 23px; |
||||
|
width: 110px; |
||||
|
height: 23px; |
||||
|
background: linear-gradient(270deg, rgba(86, 221, 253, 0) 0%, rgba(25, 176, 255, 1) 100%); |
||||
|
user-select: none; |
||||
|
} |
||||
|
|
||||
|
.light-area-tab, |
||||
|
.light-area-text { |
||||
|
display: inline-block; |
||||
|
justify-content: center; |
||||
|
} |
||||
|
.openPlan { |
||||
|
cursor: pointer; |
||||
|
border: none; |
||||
|
font-size: 14px; |
||||
|
font-weight: 400; |
||||
|
border-radius: 5px; |
||||
|
color: white; |
||||
|
vertical-align: top; |
||||
|
width: 88px; |
||||
|
height: 32px; |
||||
|
} |
||||
|
.openPlan.enabled2 { |
||||
|
background: linear-gradient(180deg, rgba(103, 222, 0, 1) 0%, rgba(0, 181, 6, 1) 100%); |
||||
|
} |
||||
|
|
||||
|
.openPlan.disabled2 { |
||||
|
background-color: red; |
||||
|
} |
||||
|
|
||||
|
.openPlan:disabled { |
||||
|
cursor: not-allowed; |
||||
|
} |
||||
|
|
||||
|
.btn2 { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
margin-left: 80px; |
||||
|
} |
||||
|
|
||||
|
.openzm { |
||||
|
cursor: pointer; |
||||
|
color: rgba(34, 183, 255, 1); |
||||
|
margin-left: 20px; |
||||
|
font-size: 14px; |
||||
|
} |
||||
|
|
||||
|
.custom-checkbox { |
||||
|
width: 13px; |
||||
|
height: 13px; |
||||
|
} |
||||
|
|
||||
|
.both { |
||||
|
width: 59.79px; |
||||
|
height: 32px; |
||||
|
opacity: 1; |
||||
|
background: linear-gradient(180deg, |
||||
|
rgba(255, 187, 0, 1) 0%, |
||||
|
rgba(255, 112, 3, 1) 91.21%, |
||||
|
rgba(255, 129, 3, 1) 100%); |
||||
|
margin-left: 8px; |
||||
|
font-size: 12px; |
||||
|
color: white; |
||||
|
border: none; |
||||
|
border-radius: 5px; |
||||
|
cursor: pointer; |
||||
|
} |
||||
|
|
||||
|
.btn2 { |
||||
|
button { |
||||
|
margin: 0 5px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.allBtn { |
||||
|
border: 0; |
||||
|
width: 40px; |
||||
|
color: white; |
||||
|
background-color: transparent; |
||||
|
} |
||||
|
|
||||
|
.blue-background.ant-switch-checked { |
||||
|
background-color: linear-gradient(180deg, |
||||
|
rgba(1, 206, 255, 1) 0%, |
||||
|
rgba(0, 150, 229, 1) 100%) !important; |
||||
|
} |
||||
|
|
||||
|
.grey-background.ant-switch { |
||||
|
background-color: grey !important; |
||||
|
} |
||||
|
|
||||
|
.blue-background.ant-switch-checked .ant-switch-handle { |
||||
|
background-color: linear-gradient(180deg, |
||||
|
rgba(1, 206, 255, 1) 0%, |
||||
|
rgba(0, 150, 229, 1) 100%) !important; |
||||
|
} |
||||
|
|
||||
|
.grey-background.ant-switch .ant-switch-handle { |
||||
|
background-color: grey !important; |
||||
|
} |
||||
|
|
||||
|
p { |
||||
|
color: white; |
||||
|
} |
||||
|
|
||||
|
.area, |
||||
|
.btnArea, |
||||
|
.control-mode-btn-area, |
||||
|
.control-scene-btn-area { |
||||
|
margin-left: -17px; |
||||
|
|
||||
|
button { |
||||
|
width: 21%; |
||||
|
padding: 0 2%; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.btn { |
||||
|
width: 92px; |
||||
|
height: 40px; |
||||
|
border-radius: 4px; |
||||
|
opacity: 1; |
||||
|
margin-top: 10px; |
||||
|
margin-left: 17px; |
||||
|
font-size: 14px; |
||||
|
font-weight: 400; |
||||
|
opacity: 1; |
||||
|
border: 1px solid rgba(207, 212, 219, 1); |
||||
|
line-height: 20.27px; |
||||
|
color: white; |
||||
|
text-align: center; |
||||
|
vertical-align: top; |
||||
|
background-color: rgba(255, 255, 255, 0.1); |
||||
|
} |
||||
|
|
||||
|
.selected { |
||||
|
background: linear-gradient(180deg, rgba(201, 245, 255, 1) 0%, rgba(138, 215, 255, 1) 100%); |
||||
|
color: rgba(0, 61, 90, 1); |
||||
|
border: 1px solid white; |
||||
|
} |
||||
|
|
||||
|
.btn:hover { |
||||
|
background-color: rgba(207, 212, 219, 1); |
||||
|
} |
||||
|
|
||||
|
.btn:active { |
||||
|
background-color: rgba(102, 102, 102, 1); |
||||
|
color: white; |
||||
|
} |
||||
|
|
||||
|
.circuit-area, |
||||
|
.control-scene-area, |
||||
|
.light-parameters-area { |
||||
|
left: 51px; |
||||
|
width: 100%; |
||||
|
margin-top: 20px; |
||||
|
} |
||||
|
|
||||
|
.circuit-tab, |
||||
|
.circuit-text { |
||||
|
display: inline-block; |
||||
|
} |
||||
|
|
||||
|
.batch { |
||||
|
width: 60px; |
||||
|
height: 32px; |
||||
|
opacity: 1; |
||||
|
border: 1px solid rgba(67, 136, 251, 1); |
||||
|
color: rgba(67, 136, 251, 1); |
||||
|
border-radius: 5px; |
||||
|
background-color: white; |
||||
|
margin-left: 11px; |
||||
|
} |
||||
|
|
||||
|
.control-area { |
||||
|
left: 51px; |
||||
|
width: 100%; |
||||
|
margin-top: 20px; |
||||
|
} |
||||
|
|
||||
|
.control-tab, |
||||
|
.control-text { |
||||
|
display: inline-block; |
||||
|
} |
||||
|
|
||||
|
:deep(.cell) { |
||||
|
text-align: center; |
||||
|
} |
||||
|
|
||||
|
:deep(#pane-first) { |
||||
|
height: 100%; |
||||
|
} |
||||
|
|
||||
|
.control-scene-tab, |
||||
|
.control-scene-text { |
||||
|
display: inline-block; |
||||
|
} |
||||
|
|
||||
|
.light-parameters-tab, |
||||
|
.light-parameters-text { |
||||
|
display: inline-block; |
||||
|
} |
||||
|
|
||||
|
.light-parameters-textarea>p { |
||||
|
height: 100%; |
||||
|
display: flex; |
||||
|
border: 1px solid rgba(236, 239, 245, 1); |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
} |
||||
|
|
||||
|
.bottom { |
||||
|
width: 100%; |
||||
|
height: 64px; |
||||
|
display: flex; |
||||
|
justify-content: flex-end; |
||||
|
align-items: center; |
||||
|
position: fixed; |
||||
|
bottom: 0; |
||||
|
right: 0; |
||||
|
} |
||||
|
|
||||
|
.execute { |
||||
|
margin-right: 20px; |
||||
|
width: 74px; |
||||
|
height: 40px; |
||||
|
opacity: 1; |
||||
|
cursor: pointer; |
||||
|
border-radius: 4px; |
||||
|
background: rgba(67, 136, 251, 1); |
||||
|
font-size: 14px; |
||||
|
font-weight: 400; |
||||
|
color: white; |
||||
|
border: 0; |
||||
|
margin: 0 10px; |
||||
|
} |
||||
|
|
||||
|
.flushed { |
||||
|
width: 74px; |
||||
|
height: 40px; |
||||
|
cursor: pointer; |
||||
|
opacity: 1; |
||||
|
border-radius: 4px; |
||||
|
font-size: 14px; |
||||
|
font-weight: 400; |
||||
|
color: rgba(102, 102, 102, 1); |
||||
|
background: white; |
||||
|
border: 1px solid rgba(193, 197, 204, 1); |
||||
|
margin: 0 10px; |
||||
|
} |
||||
|
|
||||
|
:deep(.ant-table-pagination) { |
||||
|
visibility: hidden; |
||||
|
} |
||||
|
|
||||
|
.drawer-content { |
||||
|
margin-left: 20px; |
||||
|
} |
||||
|
|
||||
|
.arrow-indicator { |
||||
|
position: absolute; |
||||
|
top: 50%; |
||||
|
left: 0; |
||||
|
transform: translateY(-50%); |
||||
|
z-index: 1; |
||||
|
} |
||||
|
|
||||
|
.drawer-title1 { |
||||
|
position: fixed; |
||||
|
width: 33px; |
||||
|
height: 33px; |
||||
|
top: 0; |
||||
|
bottom: 0; |
||||
|
right: 20px; |
||||
|
margin: auto; |
||||
|
z-index: 99999; |
||||
|
} |
||||
|
|
||||
|
.drawer-title2 { |
||||
|
position: fixed; |
||||
|
width: 33px; |
||||
|
height: 33px; |
||||
|
top: 0; |
||||
|
bottom: 0; |
||||
|
right: 495px; |
||||
|
margin: auto; |
||||
|
z-index: 99999; |
||||
|
} |
||||
|
|
||||
|
.arrowbtn { |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
width: 28px; |
||||
|
height: 28px; |
||||
|
background: rgba(0, 0, 0, 1); |
||||
|
opacity: 0.5; |
||||
|
border: none; |
||||
|
} |
||||
|
|
||||
|
:deep(.ant-tabs-tab-btn) { |
||||
|
color: white; |
||||
|
} |
||||
|
|
||||
|
:deep(.ant-table) { |
||||
|
background-color: transparent; |
||||
|
} |
||||
|
|
||||
|
:deep(.ant-table-bordered) { |
||||
|
background-color: transparent; |
||||
|
} |
||||
|
|
||||
|
:deep(.ant-table-thead) { |
||||
|
background-color: transparent; |
||||
|
} |
||||
|
|
||||
|
:deep(.ant-table-cell) { |
||||
|
background-color: transparent; |
||||
|
color: #fff; |
||||
|
} |
||||
|
|
||||
|
.custom-table { |
||||
|
border-collapse: collapse; |
||||
|
width: 416px; |
||||
|
height: 60px; |
||||
|
color: rgba(255, 255, 255, 1); |
||||
|
} |
||||
|
|
||||
|
.custom-table th, |
||||
|
.custom-table td { |
||||
|
border: 1px solid rgba(163, 192, 243, 1); |
||||
|
text-align: left; |
||||
|
padding: 8px; |
||||
|
text-align: center; |
||||
|
} |
||||
|
|
||||
|
.table1 { |
||||
|
margin-top: 20px; |
||||
|
width: 100%; |
||||
|
cellspacing: 0; |
||||
|
cellpadding: 0; |
||||
|
border: 1px solid rgba(255, 255, 255); |
||||
|
border-radius: 5px; |
||||
|
background: rgba(255, 255, 255, 0.1); |
||||
|
} |
||||
|
|
||||
|
.light-area, |
||||
|
.circuit-area, |
||||
|
.control-area, |
||||
|
.control-scene-area, |
||||
|
.light-parameters-area { |
||||
|
width: 100%; |
||||
|
margin-top: 20px; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
} |
||||
|
|
||||
|
.zmhlbtn { |
||||
|
position: relative; |
||||
|
} |
||||
|
|
||||
|
// 禁用图标 |
||||
|
.anticon-stop { |
||||
|
position: absolute; |
||||
|
right: 3px; |
||||
|
bottom: 3px; |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,754 @@ |
|||||
|
<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> |
||||
|
<div class="circuit-area"> |
||||
|
<div class="circuit-tab"></div> |
||||
|
<span class="circuit-text">空调分组</span> |
||||
|
<div class="btn2"> |
||||
|
<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 }} |
||||
|
</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" |
||||
|
@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> |
||||
|
<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> |
||||
|
</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> |
||||
|
<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> |
||||
|
</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="取消" |
||||
|
@click="submitChangeList" |
||||
|
@cancel="changeCancel"> |
||||
|
<button class="execute">执行</button> |
||||
|
</a-popconfirm> |
||||
|
</div> |
||||
|
</div> |
||||
|
</a-spin> |
||||
|
</template> |
||||
|
|
||||
|
<script setup lang="ts"> |
||||
|
import { ref, computed, onMounted } from 'vue'; |
||||
|
import { DownOutlined, UpOutlined, StopOutlined } from '@ant-design/icons-vue'; |
||||
|
import { message } from 'ant-design-vue'; |
||||
|
// 请求 |
||||
|
import { http } from '/nerv-lib/util/http'; |
||||
|
import { lightingManage } from '/@/api/IlluminationInfo'; |
||||
|
import { airConditionControl } from '/@/api/airConditionControlSystem'; |
||||
|
// 全局变量 |
||||
|
import { items } from '/@/store/item'; |
||||
|
|
||||
|
// 初始化 ========================================================================= |
||||
|
|
||||
|
onMounted(() => { |
||||
|
// 分区初始化 |
||||
|
setArea(); |
||||
|
}); |
||||
|
// 分区初始化，以 1-1 作为默认回路 |
||||
|
const setArea = () => { |
||||
|
const data = props.treeData[0]; |
||||
|
buttons2.value = data.childList; |
||||
|
}; |
||||
|
// 全局变量 |
||||
|
const state = items(); |
||||
|
|
||||
|
// 与父组件的交互 =================================================================== |
||||
|
|
||||
|
const props = defineProps({ |
||||
|
// 分区结构（照明区域 > 照明回路） |
||||
|
treeData: { |
||||
|
type: Array, |
||||
|
default: () => { |
||||
|
[]; |
||||
|
}, |
||||
|
}, |
||||
|
}); |
||||
|
/** 向上传递方法 |
||||
|
* @method changeArea 用于控制俯视图的选中状态 |
||||
|
* @method reset 用于重置按钮区 |
||||
|
* @method reload 用于刷新一次页面 |
||||
|
*/ |
||||
|
const emit = defineEmits(['changeArea', 'reset', 'reload']); |
||||
|
|
||||
|
// 照明区域业务 ======================================================================= |
||||
|
|
||||
|
// 按钮区展开与收起状态 |
||||
|
const showAllButtonsArea = ref(false); |
||||
|
// 被选中的分区 默认为1 用于选中样式渲染 |
||||
|
const selectedButton = ref<string | undefined>('1'); |
||||
|
|
||||
|
// 分区切换 |
||||
|
const changeArea = (button: any) => { |
||||
|
// 当前选中按钮 |
||||
|
selectedButton.value = button.id; |
||||
|
// 设置当前选中的回路 |
||||
|
buttons2.value = button.childList; |
||||
|
// 重置按钮状态 |
||||
|
emit('reset'); |
||||
|
// 设置选中按钮状态 |
||||
|
button.selected = true; |
||||
|
// 改变俯视图样式 |
||||
|
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 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; |
||||
|
} |
||||
|
}) |
||||
|
.catch(() => { |
||||
|
isLoading.value = false; |
||||
|
}); |
||||
|
}; |
||||
|
|
||||
|
// 是否单选，状态 |
||||
|
let singleSelection = ref(true); |
||||
|
// 多选与单选切换事件 |
||||
|
const selectAll = () => { |
||||
|
selectAllCheckbox.value = false; |
||||
|
// 切换时清空当前所有选项 |
||||
|
buttons2.value.forEach((button: any) => { |
||||
|
button.selected = false; |
||||
|
}); |
||||
|
singleSelection.value = !singleSelection.value; |
||||
|
// 当前选中回路 - 置空 |
||||
|
resetMode(); |
||||
|
// 改变俯视图样式 |
||||
|
emit('changeArea', [selectedButton.value]); |
||||
|
}; |
||||
|
|
||||
|
// 全选状态 |
||||
|
const selectAllCheckbox = ref(false); |
||||
|
// 全选切换事件（switch） |
||||
|
const toggleAllSelection = () => { |
||||
|
let arr = [selectedButton.value]; |
||||
|
// 全选 |
||||
|
if (selectAllCheckbox.value) { |
||||
|
buttons2.value.forEach((item: any, index: number) => { |
||||
|
// 全选时，默认展示第一条回路的模式-场景按钮 |
||||
|
if (index == 0) { |
||||
|
thisButton2.value = item; |
||||
|
} |
||||
|
item.selected = true; |
||||
|
arr.push(item.id); |
||||
|
}); |
||||
|
// 全不选 |
||||
|
} else { |
||||
|
buttons2.value.forEach((item: any) => { |
||||
|
item.selected = false; |
||||
|
}); |
||||
|
// 全不选时，隐藏 模式 与 场景 按钮 |
||||
|
resetMode(); |
||||
|
} |
||||
|
emit('changeArea', arr); |
||||
|
}; |
||||
|
|
||||
|
// 储存当前选中的回路 |
||||
|
const thisButton2 = ref({ |
||||
|
dataCode: '', |
||||
|
name: '', |
||||
|
treePid: '', |
||||
|
childList: [], |
||||
|
}); |
||||
|
// 照明回路的按钮切换 |
||||
|
const changeLine = (button: any) => { |
||||
|
console.log(button, 'button2mmmm'); |
||||
|
// 存储一次按钮ID，用于禁用/启用交互 |
||||
|
handleButton.value = button.id; |
||||
|
// 根据按钮状态，展示禁用/启用按钮文本 |
||||
|
if (button.ctrlStatus) { |
||||
|
isPlanEnabled2.value = true; |
||||
|
} else { |
||||
|
isPlanEnabled2.value = false; |
||||
|
} |
||||
|
// 选择时反控俯视图 |
||||
|
let level1 = selectedButton.value; |
||||
|
let level2 = button.id; |
||||
|
// 单选模式，需将所有其他回路设为false |
||||
|
if (singleSelection.value) { |
||||
|
buttons2.value.forEach((item: any) => { |
||||
|
item.selected = false; |
||||
|
}); |
||||
|
button.selected = !button.selected; |
||||
|
emit('changeArea', [level1, level2]); |
||||
|
} else { |
||||
|
// 多选模式传值 |
||||
|
button.selected = !button.selected; |
||||
|
const arr = [level1]; |
||||
|
buttons2.value.forEach((item: any) => { |
||||
|
if (item.selected) { |
||||
|
arr.push(item.id); |
||||
|
} |
||||
|
}); |
||||
|
emit('changeArea', arr); |
||||
|
} |
||||
|
// 用于展示控制模式 |
||||
|
if (button.selected) { |
||||
|
// 发生了选中事件 |
||||
|
thisButton2.value = button; |
||||
|
// 获得启动模式 |
||||
|
if (button.childList) { |
||||
|
thisButton3.value = button.childList.find((item: any) => { |
||||
|
if (item.selectAble) { |
||||
|
return item.childList ? item.childList : []; |
||||
|
} |
||||
|
}); |
||||
|
} else { |
||||
|
thisButton3.value = { childList: [] }; |
||||
|
} |
||||
|
} else { |
||||
|
// 未发生选中 或 多选的其中一个按钮被取消 |
||||
|
resetMode(); |
||||
|
} |
||||
|
console.log(thisButton2, 'button'); |
||||
|
}; |
||||
|
|
||||
|
// 照明回路所有按钮 |
||||
|
const buttons2 = ref([]); |
||||
|
// 按钮区展开与收起状态 |
||||
|
const showAllButtons = ref(false); |
||||
|
// 默认最多展示8个按钮 |
||||
|
const limitedButtons2 = computed(() => buttons2.value.slice(0, 8)); |
||||
|
|
||||
|
// 控制模式业务 ==================================================================== |
||||
|
|
||||
|
const thisButton3 = ref({ |
||||
|
childList: [], |
||||
|
}); |
||||
|
// 控制模式 - 按钮切换 |
||||
|
const selectButton3 = (button3: any) => { |
||||
|
console.log(button3); |
||||
|
if (!button3.selectAble) { |
||||
|
return message.warning(`${button3.name} 暂不支持`); |
||||
|
} |
||||
|
thisButton3.value = button3; |
||||
|
}; |
||||
|
|
||||
|
// 控制场景业务 ===================================================================== |
||||
|
|
||||
|
// 控制场景 - 按钮切换 |
||||
|
const selectButton4 = (button4: any) => { |
||||
|
const after = button4.dataCode; |
||||
|
let before = ''; |
||||
|
// 如果是多选模式 |
||||
|
if (!singleSelection.value) { |
||||
|
// 操作线路总数 |
||||
|
let sum = 0; |
||||
|
// 没有这个选项的线路 |
||||
|
let nofind = 0; |
||||
|
// 修改无效的数量 |
||||
|
let checked = 0; |
||||
|
// 可修改的数量 |
||||
|
let changed = 0; |
||||
|
buttons2.value.forEach((item: any) => { |
||||
|
// 取出当前选中的值 before |
||||
|
if (item.childList) { |
||||
|
let mode = item.childList.find((lv3: any) => { |
||||
|
return lv3.selectAble; |
||||
|
}); |
||||
|
if (mode.childList) { |
||||
|
mode.childList.forEach((mode: any) => { |
||||
|
// 取出当前选中的模式 |
||||
|
if (mode.executeStatus.value == 1) { |
||||
|
before = mode.dataCode; |
||||
|
} |
||||
|
}); |
||||
|
} |
||||
|
} |
||||
|
// 查看当前回路，哪些被选中 |
||||
|
if (item.selected) { |
||||
|
item.childList.forEach((v: any) => { |
||||
|
if (v.childList) { |
||||
|
v.childList.forEach((v1: any) => { |
||||
|
// 查看是否包含当前要修改的值 |
||||
|
if (v1.dataCode == after) { |
||||
|
sum += 1; |
||||
|
// 已经被选中，无需修改的内容 |
||||
|
if (before == after) { |
||||
|
return (checked += 1); |
||||
|
// 修改 |
||||
|
} else { |
||||
|
alert(v.treePid + '---' + before + '---' + after); |
||||
|
changed += 1; |
||||
|
resetScene(item.childList); |
||||
|
changeScene(v1, before, after); |
||||
|
v1.executeStatus.value = 1; |
||||
|
} |
||||
|
} |
||||
|
}); |
||||
|
} |
||||
|
}); |
||||
|
} |
||||
|
}); |
||||
|
alert(`共修改${sum}条，${checked}条无需修改，${nofind}条不具有该选项，${changed}条生效`); |
||||
|
// 如果是单选模式 |
||||
|
} else { |
||||
|
// 如果按钮已经被选择 |
||||
|
if (button4.executeStatus.value == 1) { |
||||
|
return message.info('未产生实际修改'); |
||||
|
} else { |
||||
|
// 获得线路当前的场景 |
||||
|
let before; |
||||
|
thisButton2.value.childList.find((item: any) => { |
||||
|
if (item.childList) { |
||||
|
item.childList.forEach((i: any) => { |
||||
|
if (i.executeStatus.value == 1) { |
||||
|
return (before = i.dataCode); |
||||
|
} |
||||
|
}); |
||||
|
} |
||||
|
}); |
||||
|
// 移除选中场景 |
||||
|
resetScene(thisButton2.value.childList); |
||||
|
changeScene(button4, before, after); |
||||
|
} |
||||
|
} |
||||
|
}; |
||||
|
// 切换场景前，需要把其他场景移除 |
||||
|
const resetScene = (list: any) => { |
||||
|
list.forEach((item: any) => { |
||||
|
if (item.childList) { |
||||
|
item.childList.forEach((i: any) => { |
||||
|
i.executeStatus.value = 0; |
||||
|
}); |
||||
|
} |
||||
|
}); |
||||
|
}; |
||||
|
|
||||
|
/** 控制场景 - 按钮切换通用方法（单选 & 多选） |
||||
|
* @param button 当前被选中的场景（单选 & 多选） |
||||
|
* @param before 当前回路场景的初始值（撤回时需使用） |
||||
|
*/ |
||||
|
const changeScene = (button: any, before: string | undefined, after: string) => { |
||||
|
console.log(changeList.value, 'vvvvvvvvvvvvvv-----', button, 'bbbbbbbb---------'); |
||||
|
// 通过分组ID，查询之前是否修改过 |
||||
|
const result = changeList.value.find((item: any, index: number) => { |
||||
|
item.index = index; |
||||
|
return item.deviceGroup == button.treePid.split('_')[0]; |
||||
|
}); |
||||
|
console.log(result, 'rrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrr'); |
||||
|
// 如果已产生过修改 |
||||
|
if (result) { |
||||
|
// 改回了原有的值，则从数组中移除 |
||||
|
if (after == result.before) { |
||||
|
changeList.value.splice(result.index, 1); |
||||
|
// 修改为新值，则只修改场景 |
||||
|
} else { |
||||
|
result.scene = after; |
||||
|
// 临时flag，用后移除 |
||||
|
delete result.index; |
||||
|
} |
||||
|
// 如果未产生过修改 |
||||
|
} else { |
||||
|
changeList.value.push({ |
||||
|
// 回路 |
||||
|
deviceGroup: thisButton2.value.dataCode, |
||||
|
deviceGroupName: thisButton2.value.name, |
||||
|
// 分区 |
||||
|
region: thisButton2.value.treePid, |
||||
|
regionName: '', |
||||
|
// 修改前 |
||||
|
before, |
||||
|
scene: after, |
||||
|
}); |
||||
|
} |
||||
|
button.executeStatus.value = 1; |
||||
|
}; |
||||
|
|
||||
|
// 底部按钮区 ====================================================================== |
||||
|
|
||||
|
const isLoading = ref(false); |
||||
|
// 执行按钮loading |
||||
|
const buttonLoading = ref(false); |
||||
|
// 刷新 |
||||
|
const refresh = () => { |
||||
|
// 关闭执行弹窗 |
||||
|
executeVisible.value = false; |
||||
|
// 设置当前选中的序列 |
||||
|
selectedButton.value = '1'; |
||||
|
// 重置选中样式 和 按钮选中状态 |
||||
|
emit('changeArea', ['1']); |
||||
|
emit('reset'); |
||||
|
// 将所有修改改回 |
||||
|
changeList.value.forEach((item: any) => { |
||||
|
resetChangeList(item); |
||||
|
}); |
||||
|
changeList.value = []; |
||||
|
// 默认选择第一个楼层 |
||||
|
let data = props.treeData[0]; |
||||
|
// 默认选中 |
||||
|
data.selected = true; |
||||
|
// 默认选中 1-1 分区 回路 |
||||
|
buttons2.value = data.childList; |
||||
|
// 将选中线路重置 |
||||
|
resetMode(); |
||||
|
}; |
||||
|
// 刷新时，将已修改的值改回 |
||||
|
const resetChangeList = (item: any) => { |
||||
|
props.treeData.find((v: any) => { |
||||
|
if (item.region == v.dataCode) { |
||||
|
v.childList.find((v1: any) => { |
||||
|
// 找到被修改过的线路 |
||||
|
if (item.deviceGroup == v1.dataCode) { |
||||
|
v1.childList.forEach((v2: any) => { |
||||
|
if (v2.childList) { |
||||
|
v2.childList.forEach((v3: any) => { |
||||
|
// 将新值移除 |
||||
|
if (item.scene == v3.dataCode) { |
||||
|
v3.executeStatus.value = 0; |
||||
|
} |
||||
|
// 旧值选中 |
||||
|
if (item.before == v3.dataCode) { |
||||
|
v3.executeStatus.value = 1; |
||||
|
} |
||||
|
}); |
||||
|
} |
||||
|
}); |
||||
|
} |
||||
|
}); |
||||
|
} |
||||
|
}); |
||||
|
}; |
||||
|
// 右下角的执行事件 |
||||
|
const showModal = () => { |
||||
|
if (!changeList.value.length) { |
||||
|
return message.info('未产生任何修改'); |
||||
|
} |
||||
|
buttonLoading.value = true; |
||||
|
http |
||||
|
.post(airConditionControl.getChangeList, { |
||||
|
sceneList: changeList.value, |
||||
|
lockList: [], |
||||
|
projectId: state.projectId, |
||||
|
siteId: state.siteId, |
||||
|
}) |
||||
|
.then((res) => { |
||||
|
if (res.msg === 'success') { |
||||
|
diffList.value = res.data; |
||||
|
executeVisible.value = true; |
||||
|
} else { |
||||
|
message.warning('获取修改内容失败'); |
||||
|
} |
||||
|
buttonLoading.value = false; |
||||
|
}) |
||||
|
.catch(() => { |
||||
|
buttonLoading.value = false; |
||||
|
}); |
||||
|
}; |
||||
|
// 通用取消 |
||||
|
const changeCancel = () => {}; |
||||
|
|
||||
|
// 内侧弹窗 ======================================================================== |
||||
|
|
||||
|
// 内侧弹窗显隐 |
||||
|
const executeVisible = ref<boolean>(false); |
||||
|
// 修改模式 需要向后端提交的内容 |
||||
|
const changeList: any = ref([]); |
||||
|
// 展示修改前后差异的内容 |
||||
|
const diffList = ref([]); |
||||
|
//撤销 |
||||
|
const delBtn = (obj: any) => { |
||||
|
// 将treeData对应回路的数据改回，数据以后端为准 |
||||
|
obj.scene = obj.stateAfter.scene.value; |
||||
|
obj.before = obj.stateBefore.scene.value; |
||||
|
resetChangeList(obj); |
||||
|
// 将 changeList 与 diffList 中记录的修改移除 (排除极端情况) |
||||
|
changeList.value = changeList.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) { |
||||
|
executeVisible.value = false; |
||||
|
} |
||||
|
}; |
||||
|
// 提交本次修改 |
||||
|
const submitChangeList = () => { |
||||
|
http |
||||
|
.post(airConditionControl.submitChangeList, { |
||||
|
sceneList: changeList.value, |
||||
|
lockList: [], |
||||
|
projectId: state.projectId, |
||||
|
siteId: state.siteId, |
||||
|
}) |
||||
|
.then((res) => { |
||||
|
emit('reload'); |
||||
|
refresh(); |
||||
|
}); |
||||
|
}; |
||||
|
|
||||
|
// 其他业务 ======================================================================== |
||||
|
|
||||
|
// 将当前选择的回路置空 |
||||
|
const resetMode = () => { |
||||
|
thisButton2.value = { |
||||
|
dataCode: '', |
||||
|
name: '', |
||||
|
treePid: '', |
||||
|
childList: [], |
||||
|
}; |
||||
|
}; |
||||
|
|
||||
|
// 向外暴露方法 |
||||
|
defineExpose({ |
||||
|
// 分区切换 |
||||
|
changeArea, |
||||
|
// 回路切换 |
||||
|
changeLine, |
||||
|
}); |
||||
|
</script> |
||||
|
<style lang="less" scoped> |
||||
|
@import './dialogStyle.less'; |
||||
|
@import './tabs1.less'; |
||||
|
</style> |
||||
@ -0,0 +1,318 @@ |
|||||
|
<template> |
||||
|
<div class="div-add"> |
||||
|
<button class="add" @click="addModal">添加</button> |
||||
|
<button class="add" style="margin-left: 20px" @click="sendTable">执行</button> |
||||
|
</div> |
||||
|
<div class="buttons"> |
||||
|
<span style="color: red; padding-top: 20px">*以下修改需执行后生效</span> |
||||
|
<div class="plans"> |
||||
|
<button class="plan enabled" style="margin-right: 10px" @click="togglePlan(1)"> |
||||
|
计划启用 |
||||
|
</button> |
||||
|
<button class="plan disabled" @click="togglePlan(3)"> 计划禁用 </button> |
||||
|
</div> |
||||
|
</div> |
||||
|
<table class="custom-table table1"> |
||||
|
<thead> |
||||
|
<tr :style="{ background: 'rgba(35,45,69)' }"> |
||||
|
<th>序号</th> |
||||
|
<th>执行时间</th> |
||||
|
<th>计划名称</th> |
||||
|
<th>状态</th> |
||||
|
<th>操作</th> |
||||
|
</tr> |
||||
|
</thead> |
||||
|
<tbody> |
||||
|
<tr v-for="(row, index) in dataSource" :key="index"> |
||||
|
<td>{{ index + 1 }}</td> |
||||
|
<td>{{ row.startTime }}</td> |
||||
|
<td>{{ row.planName }}</td> |
||||
|
<td> |
||||
|
<button |
||||
|
:style="{ |
||||
|
'font-size': '12px', |
||||
|
width: '5em', |
||||
|
background: 'rgb(47, 47, 47)', |
||||
|
color: setStateColor(row.executeStatus.value), |
||||
|
border: '1px solid', |
||||
|
}"> |
||||
|
{{ setStateText(row.executeStatus.value) }} |
||||
|
</button> |
||||
|
</td> |
||||
|
<td> |
||||
|
<div class="tabReboot" @click="startPlan(row)">启用</div> |
||||
|
<a-popconfirm |
||||
|
title="此操作将移除该数据" |
||||
|
ok-text="确定" |
||||
|
cancel-text="取消" |
||||
|
@confirm="deletePlan(row)"> |
||||
|
<div class="tabDelete">删除</div> |
||||
|
</a-popconfirm> |
||||
|
</td> |
||||
|
</tr> |
||||
|
</tbody> |
||||
|
</table> |
||||
|
<div class="out-dialog" v-if="addVisible"> |
||||
|
<div class="content" v-if="addVisible"> |
||||
|
<div class="div-operation"></div> |
||||
|
<span class="text-operation">计划库</span> |
||||
|
</div> |
||||
|
<div style="margin-top: 20px"> |
||||
|
<a-transfer |
||||
|
v-model:target-keys="targetKeys" |
||||
|
:data-source="transferData" |
||||
|
show-search |
||||
|
:filter-option="filterOption" |
||||
|
:render="(item: any) => item.title" |
||||
|
@change="handleChange" |
||||
|
:style="{ color: 'rgba(255,255,255,1)' }" |
||||
|
@search="handleSearch" |
||||
|
:listStyle="{ border: '2px solid rgba(25,74,125,1)', height: 'calc(100vh - 200px)' }" /> |
||||
|
</div> |
||||
|
<div style="width: 100%; height: 60px"></div> |
||||
|
<div class="button-box"> |
||||
|
<button class="cancel" @click="addVisible = false">取消</button> |
||||
|
<button class="execute" @click="sendPlan">确定</button> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script setup lang="ts"> |
||||
|
import { ref, onMounted } from 'vue'; |
||||
|
// 请求 |
||||
|
import { http } from '/nerv-lib/util/http'; |
||||
|
import { airConditionControl } from '/@/api/airConditionControlSystem'; |
||||
|
import { message } from 'ant-design-vue'; |
||||
|
import { getEnum } from '/@/api'; |
||||
|
// 全局变量 |
||||
|
import { items } from '/@/store/item'; |
||||
|
|
||||
|
// 初始化 =========================================================== |
||||
|
|
||||
|
onMounted(() => { |
||||
|
getStateEnum(); |
||||
|
// 计划表格 |
||||
|
getTable(); |
||||
|
// 穿梭框原始数据 |
||||
|
getLeftPlan(); |
||||
|
}); |
||||
|
// 全局变量 |
||||
|
const state = items(); |
||||
|
const getStateEnum = async () => { |
||||
|
let enumData = await getEnum({ params: { enumType: 'PlanExecuteStatus' } }); |
||||
|
stateList.value = enumData.data; |
||||
|
}; |
||||
|
|
||||
|
// tab页部分 ======================================================== |
||||
|
|
||||
|
// 状态枚举 |
||||
|
const stateList = ref([]); |
||||
|
// 设置枚举的颜色 与 文本 |
||||
|
const setStateColor = (state: number) => { |
||||
|
if (state == 0) { |
||||
|
return '#ccc'; |
||||
|
} else if (state == 1) { |
||||
|
return 'orange'; |
||||
|
} else if (state == 2) { |
||||
|
return 'rgb(57, 215, 187)'; |
||||
|
} else if (state == 3) { |
||||
|
return 'rgb(255, 0, 0)'; |
||||
|
} |
||||
|
}; |
||||
|
// 设置枚举的文本 |
||||
|
const setStateText = (state: number) => { |
||||
|
const res = stateList.value.find((item) => { |
||||
|
return item.value == state; |
||||
|
}); |
||||
|
return res.label; |
||||
|
}; |
||||
|
// 计划启用/禁用事件 |
||||
|
const togglePlan = (state: number) => { |
||||
|
dataSource.value.forEach((item: any) => { |
||||
|
item.executeStatus.value = state; |
||||
|
}); |
||||
|
}; |
||||
|
|
||||
|
// 表格数据 |
||||
|
const dataSource = ref([]); |
||||
|
// 获得表格数据 |
||||
|
const getTable = () => { |
||||
|
http |
||||
|
.get(airConditionControl.getTableData, { projectId: state.projectId, siteId: state.siteId }) |
||||
|
.then((res) => { |
||||
|
dataSource.value = res.data; |
||||
|
}); |
||||
|
}; |
||||
|
// 删除表格中的计划（将当前任意状态，修改为未启用 =0） |
||||
|
const deletePlan = (row: any) => { |
||||
|
row.executeStatus.value = 0; |
||||
|
}; |
||||
|
// 重启表格中的计划（将当前任意状态，修改为待执行 = 1） |
||||
|
const startPlan = (row: any) => { |
||||
|
if (row.executeStatus.value == 1) { |
||||
|
return message.info('该数据已是待执行状态，无需再次修改'); |
||||
|
} |
||||
|
row.executeStatus.value = 1; |
||||
|
}; |
||||
|
// 将对表格的修改统一发送 |
||||
|
const sendTable = () => { |
||||
|
http.post(airConditionControl.submitTableData, dataSource.value).then((res) => { |
||||
|
message.success('操作成功'); |
||||
|
getTable(); |
||||
|
getLeftPlan(); |
||||
|
}); |
||||
|
}; |
||||
|
|
||||
|
// tab页弹窗部分 ==================================================== |
||||
|
|
||||
|
// 添加弹窗控制变量 |
||||
|
const addVisible = ref(false); |
||||
|
// 打开弹窗 |
||||
|
const addModal = () => { |
||||
|
addVisible.value = true; |
||||
|
}; |
||||
|
|
||||
|
// 穿梭框部分 ======================================================= |
||||
|
|
||||
|
// 穿梭框数据 |
||||
|
const transferData = ref([]) as any; |
||||
|
// 获得穿梭框原始数据 |
||||
|
const getLeftPlan = () => { |
||||
|
http |
||||
|
.get(airConditionControl.getTransData, { projectId: state.projectId, siteId: state.siteId }) |
||||
|
.then((res) => { |
||||
|
let arr = []; |
||||
|
res.data.forEach((item: any) => { |
||||
|
arr.push({ |
||||
|
key: item.id, |
||||
|
title: item.planName, |
||||
|
}); |
||||
|
}); |
||||
|
transferData.value = arr; |
||||
|
}); |
||||
|
}; |
||||
|
|
||||
|
const handleChange = (keys: string[], direction: string, moveKeys: string[]) => { |
||||
|
console.log(keys, direction, moveKeys); |
||||
|
}; |
||||
|
const handleSearch = (dir: string, value: string) => { |
||||
|
console.log('search:', dir, value); |
||||
|
}; |
||||
|
// 穿梭框选中数据 |
||||
|
const targetKeys = ref<string[]>([]); |
||||
|
// 将穿梭框选中的计划提交 |
||||
|
const sendPlan = () => { |
||||
|
if (targetKeys.value.length < 1) { |
||||
|
return message.info('没有选择任何计划'); |
||||
|
} |
||||
|
http.post(airConditionControl.submitTransData, targetKeys.value).then(() => { |
||||
|
message.success('添加成功'); |
||||
|
// 如果发送成功，则刷新表格 |
||||
|
getTable(); |
||||
|
getLeftPlan(); |
||||
|
}); |
||||
|
}; |
||||
|
|
||||
|
const filterOption = (inputValue: string, option: any) => { |
||||
|
return option.description.indexOf(inputValue) > -1; |
||||
|
}; |
||||
|
</script> |
||||
|
<style lang="less" scoped> |
||||
|
@import './dialogStyle.less'; |
||||
|
.buttons { |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
.plan { |
||||
|
border: none; |
||||
|
font-size: 14px; |
||||
|
font-weight: 400; |
||||
|
border-radius: 5px; |
||||
|
width: 88px; |
||||
|
height: 32px; |
||||
|
color: white; |
||||
|
cursor: pointer; |
||||
|
margin: 15px 0; |
||||
|
vertical-align: middle; |
||||
|
} |
||||
|
.plan.enabled { |
||||
|
background: linear-gradient(180deg, rgba(103, 222, 0, 1) 0%, rgba(0, 181, 6, 1) 100%); |
||||
|
} |
||||
|
.plan.disabled { |
||||
|
background-color: red; |
||||
|
} |
||||
|
.plan:disabled { |
||||
|
cursor: not-allowed; |
||||
|
} |
||||
|
} |
||||
|
// 右下角添加按钮 |
||||
|
.div-add { |
||||
|
height: 64px; |
||||
|
display: flex; |
||||
|
justify-content: flex-end; |
||||
|
align-items: center; |
||||
|
position: fixed; |
||||
|
bottom: 0; |
||||
|
right: 0; |
||||
|
margin-right: 10px; |
||||
|
.add { |
||||
|
width: 74px; |
||||
|
height: 40px; |
||||
|
opacity: 1; |
||||
|
border-radius: 4px; |
||||
|
background: rgba(67, 136, 251, 1); |
||||
|
border: rgba(67, 136, 251, 1); |
||||
|
font-size: 14px; |
||||
|
font-weight: 400; |
||||
|
color: rgba(255, 255, 255, 1); |
||||
|
cursor: pointer; |
||||
|
} |
||||
|
} |
||||
|
// 表格 |
||||
|
.custom-table { |
||||
|
border-collapse: collapse; |
||||
|
width: 416px; |
||||
|
height: 40px; |
||||
|
color: rgba(255, 255, 255, 1); |
||||
|
} |
||||
|
.custom-table th, |
||||
|
.custom-table td { |
||||
|
border: 1px solid rgba(163, 192, 243, 1); |
||||
|
text-align: left; |
||||
|
padding: 8px; |
||||
|
text-align: center; |
||||
|
} |
||||
|
.table1 { |
||||
|
width: 100%; |
||||
|
border: 1px solid rgba(255, 255, 255); |
||||
|
border-radius: 5px; |
||||
|
background: rgba(255, 255, 255, 0.1); |
||||
|
// 表格中的操作按钮 |
||||
|
.tabReboot, |
||||
|
.tabDelete { |
||||
|
border: none; |
||||
|
display: inline-block; |
||||
|
background-color: rgba(0, 0, 0, 0); |
||||
|
font-size: 14px; |
||||
|
font-weight: 400; |
||||
|
letter-spacing: 0; |
||||
|
line-height: 20px; |
||||
|
color: rgba(67, 136, 251, 1); |
||||
|
cursor: pointer; |
||||
|
} |
||||
|
.tabReboot { |
||||
|
margin-right: 8px; |
||||
|
} |
||||
|
.tabReboot::active { |
||||
|
color: white !important; |
||||
|
} |
||||
|
.tabDelete::active { |
||||
|
color: white; |
||||
|
} |
||||
|
} |
||||
|
::v-deep(.ant-transfer) { |
||||
|
// 屏蔽自带的hover效果 |
||||
|
.ant-transfer-list-content-item:hover { |
||||
|
background: black; |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,251 @@ |
|||||
|
<template> |
||||
|
<table class="custom-table table1"> |
||||
|
<thead> |
||||
|
<tr :style="{ background: 'rgba(35,45,69)' }"> |
||||
|
<th>序号</th> |
||||
|
<th>执行时间</th> |
||||
|
<th>操作内容</th> |
||||
|
<th>操作人</th> |
||||
|
</tr> |
||||
|
</thead> |
||||
|
<tbody> |
||||
|
<tr |
||||
|
v-for="(row, index) in dataSource1" |
||||
|
:key="index" |
||||
|
@click="handleRowClick(row.key)" |
||||
|
:class="row.key === trIndex ? 'isTrIndex' : ''"> |
||||
|
<td>{{ row.key }}</td> |
||||
|
<td>{{ row.data }}</td> |
||||
|
<td>{{ row.planName }}</td> |
||||
|
<td>{{ row.status }}</td> |
||||
|
</tr> |
||||
|
</tbody> |
||||
|
</table> |
||||
|
|
||||
|
<div class="out-dialog" :class="{ showDialog: logModalVisible }" v-if="logModalVisible"> |
||||
|
<div class="content" v-if="logModalVisible"> |
||||
|
<div> |
||||
|
<div class="div-operation"></div> |
||||
|
<span class="text-operation">操作日志 </span> |
||||
|
</div> |
||||
|
<div class="j-box" v-for="item in cxList" :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.name }}</span |
||||
|
> |
||||
|
</div> |
||||
|
</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"> |
||||
|
<span>100lux</span> |
||||
|
<img src="/asset/image/bulbLogo/22406.png" alt="" /> |
||||
|
<span>30lux</span> |
||||
|
</div> |
||||
|
</div> |
||||
|
<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"> |
||||
|
<span>4000k</span> |
||||
|
<img src="/asset/image/bulbLogo/22406.png" alt="" /> |
||||
|
<span>3800k</span> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div style="height: 60px"></div> |
||||
|
<div class="button-box"> |
||||
|
<button class="cancel" @click="logModalVisible = false">取消</button> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="div-add"> |
||||
|
<button class="add">刷新</button> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script setup lang="ts"> |
||||
|
import { ref, onMounted } from 'vue'; |
||||
|
|
||||
|
// 初始化 |
||||
|
onMounted(() => {}); |
||||
|
|
||||
|
// 与父组件的交互 =================================================================== |
||||
|
const props = defineProps({ |
||||
|
// 分区结构（照明区域 > 照明回路） |
||||
|
treeData: { |
||||
|
type: Array, |
||||
|
}, |
||||
|
}); |
||||
|
const emit = defineEmits(['changeArea']); |
||||
|
|
||||
|
// 表格数据 |
||||
|
const dataSource1 = ref([ |
||||
|
{ |
||||
|
key: '1', |
||||
|
data: '2024-05-01', |
||||
|
planName: '计划再开', |
||||
|
status: '张三111', |
||||
|
}, |
||||
|
{ |
||||
|
key: '2', |
||||
|
data: '2024-05-01', |
||||
|
planName: '检修模式', |
||||
|
status: '李四12', |
||||
|
}, |
||||
|
{ |
||||
|
key: '3', |
||||
|
data: '2024-05-01', |
||||
|
planName: '设备变更', |
||||
|
status: '王五33', |
||||
|
}, |
||||
|
]); |
||||
|
const cxList = ref([ |
||||
|
{ |
||||
|
id: '1', |
||||
|
name: '站厅照明 1区', |
||||
|
manual: '手动', |
||||
|
automatic: '自动', |
||||
|
brightness: '100lux', |
||||
|
brightness2: '30lux', |
||||
|
manual2: '手动', |
||||
|
automatic2: '自动', |
||||
|
brightness3: '4000k', |
||||
|
brightness4: '3800k', |
||||
|
}, |
||||
|
{ |
||||
|
id: '2', |
||||
|
name: '站厅照明 2区', |
||||
|
manual: '手动', |
||||
|
automatic: '自动', |
||||
|
brightness: '100lux', |
||||
|
brightness2: '30lux', |
||||
|
manual2: '手动', |
||||
|
automatic2: '自动', |
||||
|
brightness3: '4000k', |
||||
|
brightness4: '3800k', |
||||
|
}, |
||||
|
{ |
||||
|
id: '3', |
||||
|
name: '站厅照明 3区', |
||||
|
manual: '手动', |
||||
|
automatic: '自动', |
||||
|
brightness: '100lux', |
||||
|
brightness2: '30lux', |
||||
|
manual2: '手动', |
||||
|
automatic2: '自动', |
||||
|
brightness3: '4000k', |
||||
|
brightness4: '3800k', |
||||
|
}, |
||||
|
]); |
||||
|
let trIndex = ref('-1'); |
||||
|
const logModalVisible = ref(false); |
||||
|
const handleRowClick = (index: any) => { |
||||
|
trIndex.value = index; |
||||
|
if (index === trIndex.value) { |
||||
|
console.log('tri'); |
||||
|
} |
||||
|
// 显示模态框 |
||||
|
logModalVisible.value = true; |
||||
|
}; |
||||
|
</script> |
||||
|
<style lang="less" scoped> |
||||
|
@import './dialogStyle.less'; |
||||
|
|
||||
|
// 右下角添加按钮 |
||||
|
.div-add { |
||||
|
height: 64px; |
||||
|
display: flex; |
||||
|
justify-content: flex-end; |
||||
|
align-items: center; |
||||
|
position: fixed; |
||||
|
bottom: 0; |
||||
|
right: 0; |
||||
|
margin-right: 20px; |
||||
|
.add { |
||||
|
width: 74px; |
||||
|
height: 40px; |
||||
|
opacity: 1; |
||||
|
border-radius: 4px; |
||||
|
background: rgba(67, 136, 251, 1); |
||||
|
border: rgba(67, 136, 251, 1); |
||||
|
font-size: 14px; |
||||
|
font-weight: 400; |
||||
|
color: rgba(255, 255, 255, 1); |
||||
|
cursor: pointer; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// 表格 |
||||
|
.custom-table { |
||||
|
border-collapse: collapse; |
||||
|
width: 416px; |
||||
|
height: 60px; |
||||
|
color: rgba(255, 255, 255, 1); |
||||
|
} |
||||
|
|
||||
|
.custom-table th, |
||||
|
.custom-table td { |
||||
|
border: 1px solid rgba(163, 192, 243, 1); |
||||
|
text-align: left; |
||||
|
padding: 8px; |
||||
|
text-align: center; |
||||
|
} |
||||
|
|
||||
|
.table1 { |
||||
|
margin-top: 20px; |
||||
|
width: 100%; |
||||
|
border: 1px solid rgba(255, 255, 255); |
||||
|
border-radius: 5px; |
||||
|
background: rgba(255, 255, 255, 0.1); |
||||
|
|
||||
|
.tabReboot, |
||||
|
.tabDelete { |
||||
|
border: none; |
||||
|
background-color: rgba(0, 0, 0, 0); |
||||
|
font-size: 14px; |
||||
|
font-weight: 400; |
||||
|
letter-spacing: 0; |
||||
|
line-height: 20px; |
||||
|
color: rgba(67, 136, 251, 1); |
||||
|
} |
||||
|
|
||||
|
.tabReboot { |
||||
|
margin-right: 8px; |
||||
|
} |
||||
|
|
||||
|
.isTrIndex { |
||||
|
background: rgba(67, 136, 251, 1); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
::v-deep(.ant-transfer) { |
||||
|
// 屏蔽自带的hover效果 |
||||
|
.ant-transfer-list-content-item:hover { |
||||
|
background: black; |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
Loading…
Reference in new issue