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

add:照明系统接口与逻辑补充

temp
chenpingsen 4 months ago
parent
744aae1bba
commit
e14bd35fac
3 changed files with 138 additions and 116 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      hx-ai-intelligent/src/api/index.ts
  2. 9
      hx-ai-intelligent/src/view/equipmentControl/lightingManage/dialogStyle.less
  3. 243
      hx-ai-intelligent/src/view/equipmentControl/lightingManage/tabs1.vue

2
hx-ai-intelligent/src/api/index.ts
View File

@ -40,7 +40,7 @@ export const dict = async ({
};
/**
* 获取所有枚举(无需传参)
* 获取所有枚举(参数为数组，可以不传参)
*/
export const getAllEnum = async ({
api = `${BASE_URL}/operation/enum/getAllEnum`,

9
hx-ai-intelligent/src/view/equipmentControl/lightingManage/dialogStyle.less
View File

@ -3,7 +3,7 @@
right: 496px;
width: 500px;
height: 100%;
z-index: 99;
z-index: 0;
top: 0;
bottom: 0;
margin: auto;
@ -44,6 +44,9 @@
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;
@ -68,6 +71,7 @@
rgba(255, 112, 3, 1) 91.21%,
rgba(255, 129, 3, 1) 100%
);
cursor: pointer;
}
}
.btn-box {
@ -97,6 +101,9 @@
width: 140px;
height: 35px;
line-height: 35px;
:first-child {
color: white;
}
span {
vertical-align: middle;
}

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

@ -121,6 +121,9 @@
<div class="control-scene-area" v-show="thisButton2.mode.value == 3">
<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" v-show="thisButton2.mode.value == 3">
@ -135,15 +138,20 @@
</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>
<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>
<!-- 点击执行时的弹出框 -->
@ -153,7 +161,7 @@
<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="j-box" v-for="(item, index) in diffList" :key="item.id">
<div class="journal" style="margin-top: 20px">
<div class="imgText">
<div class="zjzm">
@ -161,10 +169,17 @@
<span
class="title-text"
style="font-size: 20px; font-weight: 500; color: rgba(255, 255, 255, 1)"
>{{ item.name }}</span
>{{ item.regionName + ' > ' + item.deviceGroupName }}</span
>
</div>
<button class="cxbtn" @click="delBtn(item.id)">撤销</button>
<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">
@ -178,25 +193,38 @@
<div class="btn-item">
<div class="left"> 亮度 </div>
<div class="right">
<span>100lux</span>
<!-- 由于数字0也会被判为false，故只判断undefined 和 null -->
<span>{{
item?.stateBefore?.brightness != undefined ? item.stateBefore.brightness : '--'
}}</span>
<img src="/asset/image/bulbLogo/22406.png" alt="" />
<span>30lux</span>
<span>{{
item?.stateAfter?.brightness != undefined ? item.stateAfter.brightness : '--'
}}</span>
</div>
</div>
<div class="btn-item">
<div class="left"> 控制场景 </div>
<div class="right">
<span>手动</span>
<span>{{
item?.stateBefore?.scene?.label ? item.stateBefore.scene.label : '--'
}}</span>
<img src="/asset/image/bulbLogo/22406.png" alt="" />
<span>自动</span>
<span>{{
item?.stateAfter?.scene?.label ? item.stateAfter.scene.label : '--'
}}</span>
</div>
</div>
<div class="btn-item">
<div class="left"> 色温 </div>
<div class="right">
<span>4000k</span>
<span>{{
item?.stateBefore?.color != undefined ? item.stateBefore.color : '--'
}}</span>
<img src="/asset/image/bulbLogo/22406.png" alt="" />
<span>3800k</span>
<span>
{{ item?.stateAfter?.color != undefined ? item.stateAfter.color : '--' }}
</span>
</div>
</div>
</div>
@ -206,7 +234,7 @@
<div style="width: 100%; height: 60px"></div>
<div class="button-box">
<button class="cancel" @click="executeVisible = false">取消</button>
<button class="execute">执行</button>
<button class="execute" @click="submitChangeList">执行</button>
</div>
</div>
</a-spin>
@ -239,7 +267,7 @@
controlScene.value = data.IlluminationScene;
});
};
// 以 1-1 作为默认线路
// 以 1-1 作为默认回路
const setArea = () => {
const data = props.treeData[0];
buttons2.value = data.childList;
@ -272,14 +300,14 @@
// 按钮区展开与收起状态
const showAllButtonsArea = ref(false);
// 被选中的分区 默认为1
// 被选中的分区 默认为1 用于选中样式渲染
const selectedButton = ref<string | undefined>('1');
// 分区切换
const changeArea = (button: any) => {
// 当前选中按钮
selectedButton.value = button.id;
// 设置当前选中的线路
// 设置当前选中的回路
buttons2.value = button.childList;
// 重置按钮状态
emit('reset');
@ -287,7 +315,7 @@
button.selected = true;
// 改变俯视图样式
emit('changeArea', button.id);
// 当前选中线路 - 置空
// 当前选中回路 - 置空
resetMode();
// 最近交互过的按钮 - 置空
handleButton.value = '';
@ -299,7 +327,6 @@
// 最近交互过的按钮id，用于禁用和启用
const handleButton = ref('');
// 面板启用/禁用状态
const isPlanEnabled2 = ref(true);
// 面板启用/禁用切换事件
@ -309,7 +336,7 @@
return message.info('请选择照明回路');
}
// 获取最近交互过的按钮
const btn: any = buttons2.value.find((button) => button.id === handleButton.value);
const btn: any = buttons2.value.find((button: any) => button.id === handleButton.value);
let panel = +!btn.ctrlStatus;
isLoading.value = true;
http
@ -334,11 +361,12 @@
// 多选与单选切换事件
const selectAll = () => {
selectAllCheckbox.value = false;
buttons2.value.forEach((button) => {
// 切换时清空当前所有选项
buttons2.value.forEach((button: any) => {
button.selected = false;
});
singleSelection.value = !singleSelection.value;
// 当前选中线路 - 置空
// 当前选中回路 - 置空
resetMode();
// 改变俯视图样式
emit('changeArea', [selectedButton.value]);
@ -351,8 +379,8 @@
let arr = [selectedButton.value];
// 全选
if (selectAllCheckbox.value) {
buttons2.value.forEach((item, index) => {
// 全选时，默认展示第一条线路的模式-场景按钮
buttons2.value.forEach((item: any, index: number) => {
// 全选时，默认展示第一条回路的模式-场景按钮
if (index == 0) {
thisButton2.value = item;
}
@ -361,7 +389,7 @@
});
// 全不选
} else {
buttons2.value.forEach((item) => {
buttons2.value.forEach((item: any) => {
item.selected = false;
});
// 全不选时，隐藏模式-场景按钮
@ -370,9 +398,11 @@
emit('changeArea', arr);
};
// 储存当前选中的线路
// 储存当前选中的回路
const thisButton2 = ref({
code: '',
name: '',
pcode: '',
mode: {
value: -1,
},
@ -390,13 +420,12 @@
} else {
isPlanEnabled2.value = false;
}
// 选择时反控俯视图
let level1 = selectedButton.value;
let level2 = button.id;
// 单选模式，需将所有其他按钮设为false
if (singleSelection.value) {
buttons2.value.forEach((item) => {
buttons2.value.forEach((item: any) => {
item.selected = false;
});
button.selected = !button.selected;
@ -405,7 +434,7 @@
// 多选模式传值
button.selected = !button.selected;
const arr = [level1];
buttons2.value.forEach((item) => {
buttons2.value.forEach((item: any) => {
if (item.selected) {
arr.push(item.id);
}
@ -433,7 +462,7 @@
// 控制模式业务 ====================================================================
// 控制模式 - 按钮切换
const selectButton3 = (button3) => {
const selectButton3 = (button3: any) => {
let checked = thisButton2.value.mode;
console.log(button3.value, '---', checked.value);
// 如果点击了相同的按钮，则未作出修改
@ -449,11 +478,9 @@
const controlMode = ref([]);
// 场景枚举
const controlScene = ref([]);
// 控制场景 - 当前选择按钮
const selectedButton4 = ref(null);
// 控制场景 - 按钮切换
const selectButton4 = (button4) => {
// 当前选中的线路数据
// 当前选中的回路数据
const data = thisButton2.value;
// 修改前的数据
let before = data.scene.value;
@ -461,12 +488,12 @@
let after = button4.value;
// 如果没有产生实质性的修改（修改前后相同，则跳出）
if (before === after) {
return;
return message.info('未产生实际修改');
// 产生了修改
} else {
thisButton2.value.scene.value = after;
// 查询之前是否修改过
const result = changeList.value.find((item, index) => {
const result = changeList.value.find((item: any, index: number) => {
item.index = index;
return item.deviceGroup == data.code;
});
@ -484,7 +511,7 @@
// 如果未产生过修改
} else {
changeList.value.push({
// 线路
// 回路
deviceGroup: data.code,
deviceGroupName: data.name,
// 分区
@ -498,112 +525,100 @@
}
console.log(changeList.value, 'changeList');
}
thisButton2.value.scene.value = after;
console.log(thisButton2, '222222');
console.log(button4, '44444');
};
// 内侧弹窗 ========================================================================
// 需要修改的内容
const changeList: any = ref([]);
// 需要向后端提交的修改内容
const submitList = 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 = () => {
cxList.value.pop();
console.log(cxList.value.length);
if (cxList.value.length === 0) {
executeVisible.value = false;
}
};
// 其他业务 ========================================================================
// 底部按钮区 ======================================================================
const isLoading = ref(false);
// 执行按钮loading
const buttonLoading = ref(false);
// 刷新
const refresh = () => {
// 关闭执行弹窗
executeVisible.value = false;
// 设置当前选中的序列
selectedButton.value = '1';
// 重置选中样式 和 按钮选中状态
emit('changeArea', ['1']);
emit('reset');
// 默认选择第一个楼层
let data = props.treeData[0];
// 清空保存的修改
changeList.value = [];
// 默认选中
data.selected = true;
// 默认选中 1-1 分区 回路
buttons2.value = data.childList;
selectedButton4.value = null;
resetMode();
};
// 执行确认
const executeVisible = ref<boolean>(false);
// 右下角的执行事件
const showModal = () => {
if (!changeList.value.length) {
return message.info('未产生任何修改');
}
buttonLoading.value = true;
http
.post(lightingManage.getChangeList, { infoList: changeList.value, projectId: 'HLlmTZp8' })
.then((res) => {
if (res.msg === 'success') {
isLoading.value = true;
console.log(res);
diffList.value = res.data;
executeVisible.value = true;
} else {
isLoading.value = false;
message.warning('获取修改内容失败');
}
buttonLoading.value = false;
})
.catch(() => {
buttonLoading.value = false;
});
executeVisible.value = true;
};
// 通用取消
const changeCancel = () => {};
// 内侧弹窗 ========================================================================
// 确定
const changeConfirm = () => {
refresh();
// 内侧弹窗显隐
const executeVisible = ref<boolean>(false);
// 修改模式 需要向后端提交的内容
const changeList: any = ref([]);
// 展示修改前后差异的内容
const diffList = ref([]);
//撤销
const delBtn = (obj: any) => {
console.log(obj, '当前选择的修改内容');
// 将treeData对应回路的数据改回，数据以后端为准
const area = props.treeData.find((item: any) => {
return item.code == obj.region;
});
const line = area.childList.find((item: any) => {
return item.code == obj.deviceGroup;
});
line.scene.value = obj.stateBefore.scene.value;
// 将 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 = () => {};
// 取消
const changeCancel = () => {};
// 其他业务 ========================================================================
// 将当前选择的线路置空
// 将当前选择的回路置空
const resetMode = () => {
thisButton2.value = {
code: '',
name: '',
pcode: '',
mode: {
value: -1,
},
@ -613,11 +628,11 @@
};
};
// 暴露
// 向外暴露方法
defineExpose({
// 分区切换
changeArea,
// 线路切换
// 回路切换
changeLine,
});
</script>

Write Preview
Loading…
Cancel
Save