You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
565 lines
17 KiB
565 lines
17 KiB
<template>
|
|
<a-spin :spinning="isLoading">
|
|
<!-- 照明区域 -->
|
|
<div>
|
|
<div class="light-area">
|
|
<div class="light-area-tab"></div>
|
|
<span class="light-area-text"> 照明区域 </span>
|
|
<button class="plan" :class="{ enabled: isPlanEnabled, disabled: !isPlanEnabled }" @click="togglePlan">
|
|
{{ isPlanEnabled ? '计划启用' : '计划禁用' }}
|
|
</button>
|
|
</div>
|
|
<!-- 照明区域按钮部分 -->
|
|
<div class="area">
|
|
<template v-if="!showAllButtonsArea">
|
|
<button v-for="(button, index) in limitedButtons1" :key="index"
|
|
:class="{ btn: true, selected: button.selected }" @click="selectButton(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="selectButton(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="toggleSelection(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="toggleSelection(button)">
|
|
<stop-outlined v-if="button.ctrlStatus" />
|
|
{{ button.name }}
|
|
</button>
|
|
<div style="margin-top: 10px">
|
|
<span @click="showAllButtons = false" class="openzm"><up-outlined /> 回缩</span>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
<!-- 控制模式部分 -->
|
|
<div>
|
|
<div class="control-area" v-show="thisButton2.code">
|
|
<div class="control-tab"></div>
|
|
<span class="control-text"> 控制模式 </span>
|
|
</div>
|
|
<!-- 控制模式按钮部分 -->
|
|
<div class="control-mode-btn-area" v-show="thisButton2.code">
|
|
<button v-for="(button3, index) in controlMode" :key="index"
|
|
class="btn"
|
|
:disabled="button3.value!= 3"
|
|
:class="{ selected: thisButton2.mode.value == button3.value }" @click="selectButton3(button3)">
|
|
{{ button3.label }}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<!-- 控制场景部分 -->
|
|
<div>
|
|
<div class="control-scene-area" v-show="thisButton2.mode.value == '3'">
|
|
<div class="control-scene-tab"></div>
|
|
<span class="control-scene-text"> 控制场景 </span>
|
|
</div>
|
|
<!-- 控制场景按钮部分 -->
|
|
<div class="control-scene-btn-area" v-show="thisButton2.mode.value == '3'">
|
|
<button v-for="(button4, index) in controlScene" :key="index"
|
|
:class="{ btn: true, selected: thisButton2.mode.value == button4.value }" @click="selectButton4(button4)">
|
|
{{ button4.label }}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<!-- 底部按钮区 -->
|
|
<div class="bottom">
|
|
<a-popconfirm
|
|
title="刷新将会取消已作出的修改"
|
|
ok-text="确定"
|
|
cancel-text="取消"
|
|
@confirm="changeConfirm"
|
|
@cancel="changeCancel"
|
|
>
|
|
<button class="flushed">刷新</button>
|
|
</a-popconfirm>
|
|
<button class="execute" @click="showModal">执行</button>
|
|
</div>
|
|
|
|
<!-- 点击执行时的弹出框 -->
|
|
<div class="out-dialog" v-if="executeVisible">
|
|
<div class="content" v-if="executeVisible">
|
|
<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>
|
|
<button class="cxbtn" @click="delBtn(item.id)">撤销</button>
|
|
</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="width: 100%; height: 60px;"></div>
|
|
<div class="button-box">
|
|
<button class="cancel" @click="executeVisible = false">取消</button>
|
|
<button class="execute">执行</button>
|
|
</div>
|
|
</div>
|
|
</a-spin>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref, computed, onMounted, watch } 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 { getAllEnum } from '/@/api/index'
|
|
|
|
// 初始化 =========================================================================
|
|
|
|
onMounted(() => {
|
|
// 设置分区
|
|
setArea(0)
|
|
// 获得枚举
|
|
getEnum(['IlluminationMode', 'IlluminationScene'])
|
|
})
|
|
|
|
// 获得枚举，初始化
|
|
const getEnum = (arr: any) => {
|
|
getAllEnum({ params: arr }).then(res => {
|
|
const data = res.data
|
|
controlMode.value = data.IlluminationMode
|
|
controlScene.value = data.IlluminationScene
|
|
})
|
|
}
|
|
// 父组件点击俯视图切换分区时，子组件切换线路
|
|
const setArea = (isHandle: number) => {
|
|
const data = props.treeData.find((item: any) => {
|
|
return item.id == props.nowArea
|
|
})
|
|
// 默认选中第一个分区
|
|
data.selected = true
|
|
// 修改当前选中的分区
|
|
selectedButton.value = props.nowArea
|
|
// 设置当前显示的回路
|
|
buttons2.value = data.childList
|
|
|
|
// 如果非初始化触发（点击俯视图）
|
|
if (isHandle) {
|
|
// 如果选中了线路则children中的某个selected为true
|
|
const button2 = data.childList.find((item: any) => {
|
|
return item.selected == true
|
|
})
|
|
// 如果选中了线路
|
|
if (button2) {
|
|
thisButton2.value = button2;
|
|
console.log(button2,'2222222222')
|
|
|
|
} else {
|
|
resetMode()
|
|
}
|
|
}
|
|
}
|
|
|
|
// 与父组件的交互 ===================================================================
|
|
|
|
const props = defineProps({
|
|
// 分区结构（照明区域 > 照明回路）
|
|
treeData: {
|
|
type: Array,
|
|
default: []
|
|
},
|
|
// 父组件选中的分区ID
|
|
nowArea: {
|
|
type: String,
|
|
}
|
|
});
|
|
// 向上传递修改选择样式
|
|
/**
|
|
* @method changeArea 用于控制俯视图的选中状态
|
|
* @method reset 用于重置按钮区
|
|
*/
|
|
const emit = defineEmits(['changeArea','reset']);
|
|
// 监听父组件选中的分区，并实时修改分区
|
|
watch(() => props.nowArea, () => {
|
|
setArea(1)
|
|
// 分区产生了切换， 线路的选中状态置空
|
|
handleButton.value = ''
|
|
})
|
|
|
|
// 照明区域业务 =======================================================================
|
|
|
|
// 计划启用状态
|
|
const isPlanEnabled = ref(false);
|
|
// 计划启用切换事件
|
|
const togglePlan = () => {
|
|
isPlanEnabled.value = !isPlanEnabled.value;
|
|
};
|
|
|
|
// 按钮区展开与收起状态
|
|
const showAllButtonsArea = ref(false);
|
|
// 被选中的分区 默认为1
|
|
const selectedButton = ref<string | undefined>('1');
|
|
// 区域切换（按钮点击-单选）事件
|
|
const selectButton = (button: any) => {
|
|
// 当前选中按钮
|
|
selectedButton.value = button.id;
|
|
initMenu(1)
|
|
button.selected = true
|
|
buttons2.value = button.childList
|
|
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) => button.id === handleButton.value)
|
|
let panel = +(!btn.ctrlStatus)
|
|
isLoading.value = true
|
|
http.get(lightingManage.setDisable, { deviceGroup: btn.code, panel }).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) => {
|
|
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) => {
|
|
item.selected = true;
|
|
arr.push(item.id)
|
|
});
|
|
// 全不选
|
|
} else {
|
|
buttons2.value.forEach((item) => {
|
|
item.selected = false;
|
|
});
|
|
}
|
|
emit('changeArea', arr)
|
|
};
|
|
|
|
// 照明回路的按钮切换
|
|
const toggleSelection = (button: any) => {
|
|
// 存储一次按钮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 => {
|
|
item.selected = false;
|
|
});
|
|
emit('changeArea', [level1, level2])
|
|
button.selected = !button.selected;
|
|
} else {
|
|
// 多选模式传值
|
|
button.selected = !button.selected;
|
|
const arr = [level1]
|
|
buttons2.value.forEach(item => {
|
|
if (item.selected) {
|
|
arr.push(item.id)
|
|
}
|
|
});
|
|
emit('changeArea', arr)
|
|
}
|
|
// 用于展示控制模式
|
|
if (button.selected) {
|
|
// 发生了选中事件
|
|
thisButton2.value = button
|
|
} else {
|
|
// 未发生选中 或 多选被取消
|
|
resetMode()
|
|
}
|
|
console.log(thisButton2,'button')
|
|
};
|
|
|
|
// 照明回路所有按钮
|
|
const buttons2 = ref([]);
|
|
// 按钮区展开与收起状态
|
|
const showAllButtons = ref(false);
|
|
// 默认最多展示8个按钮
|
|
const limitedButtons2 = computed(() => buttons2.value.slice(0, 8));
|
|
|
|
// 控制模式业务 ====================================================================
|
|
|
|
const thisButton2 = ref({
|
|
code: '',
|
|
mode: {
|
|
value: '0'
|
|
}
|
|
})
|
|
// 控制模式 - 按钮切换
|
|
const selectButton3 = (button3) => {
|
|
let checked = thisButton2.value.mode
|
|
console.log(button3.value,'---', checked.value)
|
|
// 如果点击了相同的按钮，未作出修改
|
|
if (checked.value === button3.value) {
|
|
return
|
|
}
|
|
checked.value = button3.value
|
|
selectedButton4.value = null; // 清空选中的控制场景按钮
|
|
};
|
|
|
|
const diff = () => {
|
|
console.log(thisButton2)
|
|
}
|
|
|
|
// 控制场景业务 =====================================================================
|
|
|
|
// 控制模式枚举
|
|
const controlMode = ref([])
|
|
// 场景枚举
|
|
const controlScene = ref([])
|
|
// 控制场景 - 当前选择按钮
|
|
const selectedButton4 = ref(null);
|
|
// 控制场景 - 按钮切换
|
|
const selectButton4 = (button4) => {
|
|
selectedButton4.value = button4.label;
|
|
};
|
|
|
|
// 内侧弹窗 ========================================================================
|
|
|
|
// 需要向后端提交的修改内容
|
|
const submitArray = ref([])
|
|
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',
|
|
},
|
|
]);
|
|
//撤销
|
|
const delBtn = (id: any) => {
|
|
cxList.value.pop();
|
|
console.log(cxList.value.length);
|
|
|
|
if (cxList.value.length === 0) {
|
|
executeVisible.value = false;
|
|
}
|
|
};
|
|
|
|
// 其他业务 ========================================================================
|
|
|
|
const isLoading = ref(false)
|
|
|
|
// 用于初始化5级联动的菜单
|
|
const initMenu = (tier: number) => {
|
|
// 1 = 照明区域 - 切换时，重置以下所有菜单
|
|
if (tier == 1) {
|
|
emit('reset')
|
|
// 灯具参数 隐藏
|
|
selectedButton4.value = null;
|
|
} else if (tier == 2) {
|
|
// 灯具参数 隐藏
|
|
selectedButton4.value = null;
|
|
}
|
|
}
|
|
// 刷新
|
|
const refresh = () => {
|
|
// 关闭执行弹窗
|
|
executeVisible.value = false
|
|
// 设置当前选中的序列
|
|
selectedButton.value = '1';
|
|
emit('changeArea', ['1']);
|
|
emit('reset')
|
|
let data = props.treeData[0]
|
|
// 默认选中
|
|
data.selected = true
|
|
buttons2.value = data.childList
|
|
selectedButton4.value = null;
|
|
resetMode()
|
|
};
|
|
// 执行确认
|
|
const executeVisible = ref<boolean>(false);
|
|
const showModal = () => {
|
|
executeVisible.value = true;
|
|
};
|
|
|
|
// 确定
|
|
const changeConfirm = () => {
|
|
refresh()
|
|
}
|
|
|
|
// 取消
|
|
const changeCancel = () => {
|
|
}
|
|
|
|
// 将当前选择的线路置空
|
|
const resetMode = () => {
|
|
thisButton2.value = {
|
|
code: '',
|
|
mode: {
|
|
value: '0'
|
|
}
|
|
}
|
|
}
|
|
|
|
defineExpose({
|
|
changeCancel
|
|
});
|
|
|
|
</script>
|
|
<style lang="less" scoped>
|
|
@import "./dialogStyle.less";
|
|
@import "./tabs1.less";
|
|
</style>
|
|
|