xuziqiang/SaaS-lib
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

fix:通风系统抽屉控制面板改进

Browse Source
This commit is contained in:
chenpingsen
2024-08-26 11:53:26 +08:00
parent 169ee2f432
commit 968bade95e
2 changed files with 103 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

77
hx-ai-intelligent/src/view/equipmentControl/ventilationSystem/components/fanControl.vue
View File

@@ -1,18 +1,52 @@
<template>
<!-- 分区部分 -->
<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">{{ props.type }}</span>
<div class="btn2">
<a-badge :offset="[-10, 2]" :count="lockList.length">
<!-- <a-badge :offset="[-10, 2]" :count="lockList.length">
<button
class="openPlan"
:class="{ enabled2: isPlanEnabled2, disabled2: !isPlanEnabled2 }"
@click="togglePlan2">
{{ isPlanEnabled2 ? '启用开关' : '禁用开关' }}
</button>
</a-badge>
</a-badge> -->
<a-switch
v-model:checked="selectAllCheckbox"
:disabled="singleSelection"
@@ -35,9 +69,9 @@
:class="{ btn: true, selected: button.selected }"
class="zmhlbtn"
@click="changeLine(button)">
<div v-if="button.lockStatus" class="btn-back">
<!-- <div v-if="button.lockStatus" class="btn-back">
<stop-outlined />
</div>
</div> -->
{{ button.name }}
</button>
<div style="margin-top: 10px">
@@ -147,9 +181,13 @@
<div class="btn-item">
<div class="left">控制模式</div>
<div class="right">
<span>{{ item.stateBefore.autoStatus.label.replace('模式', '') }}</span>
<span>{{
item.stateBefore.autoStatus.label ? item.stateBefore.autoStatus.label : '--'
}}</span>
<img src="/asset/image/bulbLogo/22406.png" alt="" />
<span>{{ item.stateAfter.autoStatus.label.replace('模式', '') }}</span></div
<span>{{
item.stateAfter.autoStatus.label ? item.stateAfter.autoStatus.label : '--'
}}</span></div
>
</div>
<div class="btn-item">
@@ -297,6 +335,29 @@
*/
const emit = defineEmits(['reset', 'reload', 'resetAll']);
// 设备分区业务 =====================================================================
// 按钮区展开与收起状态
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;
// 当前选中回路 - 置空
resetMode();
};
// 默认最多展示8个按钮
const limitedButtons1 = computed(() => props.treeData.slice(0, 8));
// 照明回路业务 ======================================================================
// 开关启用/禁用状态
@@ -374,7 +435,6 @@
const selectAllCheckbox = ref(false);
// 全选切换事件（switch）
const toggleAllSelection = () => {
let arr = [];
// 全选
if (selectAllCheckbox.value) {
buttons2.value.forEach((item: any, index: number) => {
@@ -383,7 +443,6 @@
thisButton2.value = item;
}
item.selected = true;
arr.push(item.id);
});
// 全不选
} else {
@@ -618,6 +677,8 @@
const refresh = (reload = false) => {
// 关闭执行弹窗
executeVisible.value = false;
// 设置当前选中的序列
selectedButton.value = '1';
// 重置选中样式 和 按钮选中状态
emit('reset');
// 如果是中途刷新，需要将所有修改改回

38
hx-ai-intelligent/src/view/equipmentControl/ventilationSystem/index.vue
View File

@@ -139,6 +139,7 @@
<a-tab-pane key="1" tab="控制面板">
<fanControl
ref="tabs1Ref"
@reset="reset"
@reset-all="resetDrawer"
:treeData="treeData"
:type="`排风扇`" />
@@ -200,6 +201,7 @@
<a-tab-pane key="1" tab="控制面板">
<fanControl
ref="tabs1Ref"
@reset="reset"
@reset-all="resetDrawer"
:treeData="treeData"
:type="`风幕机`" />
@@ -260,6 +262,7 @@
<a-tab-pane key="1" tab="控制面板">
<fanControl
ref="tabs1Ref"
@reset="reset"
@reset-all="resetDrawer"
:treeData="treeData"
:type="`电动窗`" />
@@ -374,8 +377,18 @@
// 刷新当前的树形结构数据
const reload = () => {
http.get(url, { projectId: state.projectId, siteId: state.siteId }).then((res) => {
const data = res.data;
treeData.value = data[0].childList;
const data = res.data[0].childList;
// 默认选中第一个分区
data.forEach((item: any, index: number) => {
if (index === 0) {
item.selected = true;
} else {
item.selected = false;
}
});
treeData.value = data;
// 楼层信息
// selectIndex.value = index;
// 反向刷新
try {
tabs1Ref.value.setButtons2(treeData.value[0].childList);
@@ -398,8 +411,16 @@
url = ventilating.getTree3;
}
http.get(url, { projectId: state.projectId, siteId: state.siteId }).then((res) => {
const data = res.data;
treeData.value = data[0].childList;
const data = res.data[0].childList;
// 默认选中第一个分区
data.forEach((item: any, index: number) => {
if (index === 0) {
item.selected = true;
} else {
item.selected = false;
}
});
treeData.value = data;
selectIndex.value = index;
});
};
@@ -442,6 +463,15 @@
}
});
};
// 重置分区树所有当前选项
const reset = () => {
treeData.value.forEach((item: any) => {
item.selected = false;
item.childList.forEach((i: any) => {
i.selected = false;
});
});
};
// 温度数组
const sensorData = ref<any>([]);
// 湿度数组