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

add:照明系统修改

Browse Source
This commit is contained in:
chenpingsen
2024-07-24 13:46:24 +08:00
parent 7dadb22181
commit 84191fe301
4 changed files with 109 additions and 229 deletions
Download Patch File Download Diff File Expand all files Collapse all files

178
hx-ai-intelligent/src/view/equipmentControl/lightingManage/tabs1.vue
View File

@@ -75,60 +75,34 @@
</div>
<!-- 控制模式部分 -->
<div>
<div class="control-area" v-show="showControlMode">
<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="showControlMode">
<div class="control-mode-btn-area" v-show="thisButton2.code">
<button v-for="(button3, index) in controlMode" :key="index"
class="btn"
:class="{ selected: thisButton.mode.value == button3.value }" @click="selectButton3(button3)">
: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="showControlScene">
<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="showControlScene">
<button v-for="(button4, index) in controlSceneButtons" :key="index"
:class="{ btn: true, selected: button4.label === selectedButton4 }" @click="selectButton4(button4)">
<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>
<div class="light-parameters-area" v-if="selectedButton4">
<div class="light-parameters-tab"></div>
<span class="light-parameters-text"> 灯具参数 </span>
</div>
<div class="light-parameters-textarea" v-if="selectedButton4">
<table class="custom-table table1">
<thead>
<tr :style="{ background: 'rgba(35,45,69)' }">
<th>开启数量</th>
<th>亮度(lux)</th>
<th>色温</th>
</tr>
</thead>
<tbody>
<tr v-for="(row, index) in lightSource" :key="index" @click="handleRowClick(row.num)"
:style="{ height: '50px' }">
<td>{{ row.num }}</td>
<td>{{ row.light }}</td>
<td>{{ row.temperature }}</td>
</tr>
</tbody>
</table>
<div style="margin-bottom: 60px;"></div>
</div>
</div>
<!-- 底部按钮区 -->
<div class="bottom">
<a-popconfirm
@@ -228,13 +202,22 @@ import { getAllEnum } from '/@/api/index'
onMounted(() => {
// 设置分区
setArea()
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 = () => {
const data = props.treeData.find(item => {
const setArea = (isHandle: number) => {
const data = props.treeData.find((item: any) => {
return item.id == props.nowArea
})
// 默认选中第一个分区
@@ -243,6 +226,22 @@ const setArea = () => {
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()
}
}
}
// 与父组件的交互 ===================================================================
@@ -266,7 +265,7 @@ const props = defineProps({
const emit = defineEmits(['changeArea','reset']);
// 监听父组件选中的分区，并实时修改分区
watch(() => props.nowArea, () => {
setArea()
setArea(1)
// 分区产生了切换， 线路的选中状态置空
handleButton.value = ''
})
@@ -283,16 +282,16 @@ const togglePlan = () => {
// 按钮区展开与收起状态
const showAllButtonsArea = ref(false);
// 被选中的分区 默认为1
const selectedButton = ref('1');
const selectedButton = ref<string | undefined>('1');
// 区域切换（按钮点击-单选）事件
const selectButton = (button: any) => {
console.log(button,'button')
// 当前选中按钮
selectedButton.value = button.id;
initMenu(1)
button.selected = true
buttons2.value = button.childList
emit('changeArea', button.id);
resetMode()
handleButton.value = ''
};
// 默认最多展示8个按钮
@@ -312,11 +311,12 @@ const togglePlan2 = () => {
return message.info('请选择照明回路');
}
// 获取最近交互过的按钮
const btn = buttons2.value.find((button) => button.id === handleButton.value)
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
@@ -335,8 +335,7 @@ const selectAll = () => {
button.selected = false;
});
singleSelection.value = !singleSelection.value;
// 线路按钮被重置，
showControlMode.value = false
resetMode()
emit('changeArea', [selectedButton.value])
};
@@ -351,12 +350,11 @@ const toggleAllSelection = () => {
item.selected = true;
arr.push(item.id)
});
// 全不选
// 全不选
} else {
buttons2.value.forEach((item) => {
item.selected = false;
});
showControlMode.value = false
}
emit('changeArea', arr)
};
@@ -396,23 +394,12 @@ const toggleSelection = (button: any) => {
// 用于展示控制模式
if (button.selected) {
// 发生了选中事件
showControlMode.value = true
thisButton.value = button
if (button.type == 3) {
showControlScene.value = true
} else {
showControlScene.value = false
}
thisButton2.value = button
} else {
// 未发生选中 或 多选被取消
showControlMode.value = false
thisButton.value = {
mode: {
value: '0'
}
}
resetMode()
}
console.log(thisButton,'button')
console.log(thisButton2,'button')
};
// 照明回路所有按钮
@@ -424,42 +411,34 @@ const limitedButtons2 = computed(() => buttons2.value.slice(0, 8));
// 控制模式业务 ====================================================================
// 决定该区域是否显示
const showControlMode = ref(false);
const thisButton = ref({
const thisButton2 = ref({
code: '',
mode: {
value: '0'
}
})
// 控制模式 - 按钮切换
const selectButton3 = (button3) => {
let checked = thisButton.value.mode.value
console.log(button3.value,'---', checked)
let checked = thisButton2.value.mode
console.log(button3.value,'---', checked.value)
// 如果点击了相同的按钮，未作出修改
if (checked === button3.value) {
if (checked.value === button3.value) {
return
}
checked = button3.value
// 如果当前选项是手动模式
showControlScene.value = button3.label === '手动模式';
checked.value = button3.value
selectedButton4.value = null; // 清空选中的控制场景按钮
};
const diff = () => {
console.log(thisButton2)
}
// 控制场景业务 =====================================================================
// 控制模式枚举
const controlMode = ref([])
// 场景枚举
const controlScene = ref([])
// 决定该区域是否显示
const showControlScene = ref(false);
// 控制场景 - 所有按钮
const controlSceneButtons = ref([
{ label: '检修', selected: false },
{ label: '午休', selected: false },
{ label: '疏散', selected: false },
{ label: '客流高峰', selected: false },
]);
// 控制场景 - 当前选择按钮
const selectedButton4 = ref(null);
// 控制场景 - 按钮切换
@@ -467,19 +446,6 @@ const selectButton4 = (button4) => {
selectedButton4.value = button4.label;
};
// 灯具参数表格 =====================================================================
// 灯具参数 - 表格数据
const lightSource = ref([{ num: '8/10', light: '100', temperature: '4200' }]);
let trIndex = ref('-1');
const handleRowClick = (index: any) => {
trIndex.value = index;
if (index === trIndex.value) {
console.log('tri');
}
};
// 内侧弹窗 ========================================================================
// 需要向后端提交的修改内容
@@ -541,15 +507,9 @@ const initMenu = (tier: number) => {
// 1 = 照明区域 - 切换时，重置以下所有菜单
if (tier == 1) {
emit('reset')
// 控制模式 隐藏
showControlMode.value = false;
// 控制场景 隐藏
showControlScene.value = false;
// 灯具参数 隐藏
selectedButton4.value = null;
} else if (tier == 2) {
// 控制场景 隐藏
showControlScene.value = false;
// 灯具参数 隐藏
selectedButton4.value = null;
}
@@ -566,10 +526,8 @@ const refresh = () => {
// 默认选中
data.selected = true
buttons2.value = data.childList
showControlMode.value = false;
showControlScene.value = false;
selectedButton4.value = null;
resetMode()
};
// 执行确认
const executeVisible = ref<boolean>(false);
@@ -584,18 +542,22 @@ const changeConfirm = () => {
// 取消
const changeCancel = () => {
}
// 获得枚举，初始化
const getEnum = (arr: any) => {
getAllEnum({ params: arr }).then(res => {
const data = res.data
controlMode.value = data.IlluminationMode
controlScene.value = data.IlluminationScene
})
console.log(controlMode, controlScene, '001')
// 将当前选择的线路置空
const resetMode = () => {
thisButton2.value = {
code: '',
mode: {
value: '0'
}
}
}
defineExpose({
changeCancel
});
</script>
<style lang="less" scoped>
@import "./dialogStyle.less";