fix:照明系统多选功能完善,引入全局变量projectId,部分交互逻辑修改
This commit is contained in:
@@ -1,13 +1,13 @@
|
|||||||
|
|
||||||
// 照明系统及相关接口
|
// 照明系统及相关接口
|
||||||
export enum lightingManage {
|
export enum lightingManage {
|
||||||
|
|
||||||
// 主页 ========================================================
|
// 主页 ========================================================
|
||||||
|
|
||||||
// 获得分区与线路
|
// 获得分区与线路
|
||||||
getArea = '/carbon-smart/IlluminationInfo/region',
|
getArea = '/carbon-smart/IlluminationInfo/region',
|
||||||
// 修改线路的可用/禁用状态
|
// 修改线路的可用/禁用状态
|
||||||
setDisable = '/carbon-smart/IlluminationInfo/revisePanel',
|
setDisable = '/carbon-smart/IlluminationInfo/changePanelStatus',
|
||||||
|
// 获得设备 - 小灯泡
|
||||||
|
getBulbs = '/carbon-smart/IlluminationInfo/getLightState',
|
||||||
|
|
||||||
// 控制面板tab页 ================================================
|
// 控制面板tab页 ================================================
|
||||||
|
|
||||||
|
@@ -3,7 +3,14 @@ import { defineStore } from 'pinia';
|
|||||||
export const items = defineStore({
|
export const items = defineStore({
|
||||||
id: 'items',
|
id: 'items',
|
||||||
state() {
|
state() {
|
||||||
return { list: [], count: 10 };
|
return {
|
||||||
|
list: [],
|
||||||
|
count: 10,
|
||||||
|
// 当前项目ID
|
||||||
|
projectId: 'HLlmTZp8',
|
||||||
|
// 站点ID
|
||||||
|
siteId: undefined,
|
||||||
|
};
|
||||||
},
|
},
|
||||||
getters: {
|
getters: {
|
||||||
double: (state: any) => state.count * 2,
|
double: (state: any) => state.count * 2,
|
||||||
|
@@ -3,9 +3,13 @@
|
|||||||
<div class="lighting-img-box">
|
<div class="lighting-img-box">
|
||||||
<!-- 左上角,区域切换 -->
|
<!-- 左上角,区域切换 -->
|
||||||
<div class="btn-box">
|
<div class="btn-box">
|
||||||
<button v-for="item in floorData" class="btn-item" @click="changeFloor(item.childList)">{{
|
<button
|
||||||
item.name
|
v-for="(item, index) in floorData"
|
||||||
}}</button>
|
:key="index"
|
||||||
|
class="btn-item"
|
||||||
|
@click="changeFloor(item.childList, item.code)"
|
||||||
|
>{{ item.name }}</button
|
||||||
|
>
|
||||||
</div>
|
</div>
|
||||||
<!-- 楼层区域 -->
|
<!-- 楼层区域 -->
|
||||||
<div class="area">
|
<div class="area">
|
||||||
@@ -77,14 +81,20 @@
|
|||||||
import { lightingManage } from '/@/api/IlluminationInfo';
|
import { lightingManage } from '/@/api/IlluminationInfo';
|
||||||
// ICON
|
// ICON
|
||||||
import { DoubleLeftOutlined, DoubleRightOutlined } from '@ant-design/icons-vue';
|
import { DoubleLeftOutlined, DoubleRightOutlined } from '@ant-design/icons-vue';
|
||||||
|
// 全局变量
|
||||||
|
import { items } from '/@/store/item';
|
||||||
|
|
||||||
// 初始化 =======================================================
|
// 初始化 =======================================================
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
// 获得分区与线路的结构
|
// 获得分区与线路的结构
|
||||||
getAllArea();
|
getAllArea();
|
||||||
|
// 获得俯视图中的小灯泡
|
||||||
|
getBulbs();
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// 获得全局变量
|
||||||
|
const state = items();
|
||||||
// 预加载flag,获得分区数据后,预加载抽屉,防止获取ref报错
|
// 预加载flag,获得分区数据后,预加载抽屉,防止获取ref报错
|
||||||
const preload = ref(false);
|
const preload = ref(false);
|
||||||
|
|
||||||
@@ -92,8 +102,11 @@
|
|||||||
|
|
||||||
// 所有楼层的数据
|
// 所有楼层的数据
|
||||||
const floorData = ref([]);
|
const floorData = ref([]);
|
||||||
|
// 当前选择的楼层
|
||||||
|
const thisFloor = ref(1);
|
||||||
// 左上角分层切换
|
// 左上角分层切换
|
||||||
const changeFloor = (area: any) => {
|
const changeFloor = (area: any, floor: number) => {
|
||||||
|
thisFloor.value = floor;
|
||||||
// 重置数据
|
// 重置数据
|
||||||
reset();
|
reset();
|
||||||
// 重置视图
|
// 重置视图
|
||||||
@@ -220,7 +233,7 @@
|
|||||||
|
|
||||||
// 获得所有分区
|
// 获得所有分区
|
||||||
const getAllArea = () => {
|
const getAllArea = () => {
|
||||||
http.get(lightingManage.getArea, { projectId: 'HLlmTZp8' }).then((res) => {
|
http.get(lightingManage.getArea, { projectId: state.projectId }).then((res) => {
|
||||||
const data = res.data;
|
const data = res.data;
|
||||||
floorData.value = data;
|
floorData.value = data;
|
||||||
/** 只在前端使用的变量
|
/** 只在前端使用的变量
|
||||||
@@ -248,6 +261,20 @@
|
|||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
|
// 设备业务 小灯泡 ==============================================
|
||||||
|
|
||||||
|
const getBulbs = () => {
|
||||||
|
http
|
||||||
|
.get(lightingManage.getBulbs, {
|
||||||
|
floor: thisFloor.value,
|
||||||
|
projectId: state.projectId,
|
||||||
|
siteId: state.siteId,
|
||||||
|
})
|
||||||
|
.then((res) => {
|
||||||
|
console.log(res);
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
// 抽屉业务 =====================================================
|
// 抽屉业务 =====================================================
|
||||||
|
|
||||||
// 抽屉 - 当前选择的tab
|
// 抽屉 - 当前选择的tab
|
||||||
|
@@ -0,0 +1,3 @@
|
|||||||
|
// 此文件只定义light(即俯视图小灯泡)的位置信息
|
||||||
|
// 与显示状态和分组信息无关
|
||||||
|
export const lightPosition = [];
|
@@ -50,7 +50,7 @@
|
|||||||
class="openPlan"
|
class="openPlan"
|
||||||
:class="{ enabled2: isPlanEnabled2, disabled2: !isPlanEnabled2 }"
|
:class="{ enabled2: isPlanEnabled2, disabled2: !isPlanEnabled2 }"
|
||||||
@click="togglePlan2">
|
@click="togglePlan2">
|
||||||
{{ isPlanEnabled2 ? '启用面板' : '禁用面板' }}
|
{{ isPlanEnabled2 ? '启用开关' : '禁用开关' }}
|
||||||
</button>
|
</button>
|
||||||
<a-switch
|
<a-switch
|
||||||
v-model:checked="selectAllCheckbox"
|
v-model:checked="selectAllCheckbox"
|
||||||
@@ -248,11 +248,13 @@
|
|||||||
import { http } from '/nerv-lib/util/http';
|
import { http } from '/nerv-lib/util/http';
|
||||||
import { lightingManage } from '/@/api/IlluminationInfo';
|
import { lightingManage } from '/@/api/IlluminationInfo';
|
||||||
import { getAllEnum } from '/@/api/index';
|
import { getAllEnum } from '/@/api/index';
|
||||||
|
// 全局变量
|
||||||
|
import { items } from '/@/store/item';
|
||||||
|
|
||||||
// 初始化 =========================================================================
|
// 初始化 =========================================================================
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
// 默认选项
|
// 分区初始化
|
||||||
setArea();
|
setArea();
|
||||||
// 获得枚举
|
// 获得枚举
|
||||||
getEnum(['IlluminationMode', 'IlluminationScene']);
|
getEnum(['IlluminationMode', 'IlluminationScene']);
|
||||||
@@ -267,11 +269,13 @@
|
|||||||
controlScene.value = data.IlluminationScene;
|
controlScene.value = data.IlluminationScene;
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
// 以 1-1 作为默认回路
|
// 分区初始化,以 1-1 作为默认回路
|
||||||
const setArea = () => {
|
const setArea = () => {
|
||||||
const data = props.treeData[0];
|
const data = props.treeData[0];
|
||||||
buttons2.value = data.childList;
|
buttons2.value = data.childList;
|
||||||
};
|
};
|
||||||
|
// 全局变量
|
||||||
|
const state = items();
|
||||||
|
|
||||||
// 与父组件的交互 ===================================================================
|
// 与父组件的交互 ===================================================================
|
||||||
|
|
||||||
@@ -279,11 +283,12 @@
|
|||||||
// 分区结构(照明区域 > 照明回路)
|
// 分区结构(照明区域 > 照明回路)
|
||||||
treeData: {
|
treeData: {
|
||||||
type: Array,
|
type: Array,
|
||||||
default: [],
|
default: () => {
|
||||||
|
[];
|
||||||
|
},
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
// 向上传递修改选择样式
|
/** 向上传递方法
|
||||||
/**
|
|
||||||
* @method changeArea 用于控制俯视图的选中状态
|
* @method changeArea 用于控制俯视图的选中状态
|
||||||
* @method reset 用于重置按钮区
|
* @method reset 用于重置按钮区
|
||||||
*/
|
*/
|
||||||
@@ -327,9 +332,9 @@
|
|||||||
|
|
||||||
// 最近交互过的按钮id,用于禁用和启用
|
// 最近交互过的按钮id,用于禁用和启用
|
||||||
const handleButton = ref('');
|
const handleButton = ref('');
|
||||||
// 面板启用/禁用状态
|
// 开关启用/禁用状态
|
||||||
const isPlanEnabled2 = ref(true);
|
const isPlanEnabled2 = ref(true);
|
||||||
// 面板启用/禁用切换事件
|
// 开关启用/禁用切换事件
|
||||||
const togglePlan2 = () => {
|
const togglePlan2 = () => {
|
||||||
// 如果未交互任何按钮
|
// 如果未交互任何按钮
|
||||||
if (handleButton.value == '') {
|
if (handleButton.value == '') {
|
||||||
@@ -340,7 +345,12 @@
|
|||||||
let panel = +!btn.ctrlStatus;
|
let panel = +!btn.ctrlStatus;
|
||||||
isLoading.value = true;
|
isLoading.value = true;
|
||||||
http
|
http
|
||||||
.get(lightingManage.setDisable, { deviceGroup: btn.code, panel })
|
.get(lightingManage.setDisable, {
|
||||||
|
deviceGroup: btn.code,
|
||||||
|
panel,
|
||||||
|
projectId: state.projectId,
|
||||||
|
siteId: state.siteId,
|
||||||
|
})
|
||||||
.then((res) => {
|
.then((res) => {
|
||||||
if (res.msg === 'success') {
|
if (res.msg === 'success') {
|
||||||
// 确认成功后 - 按钮文本取反 - 按钮布尔值修改 - 关闭loading
|
// 确认成功后 - 按钮文本取反 - 按钮布尔值修改 - 关闭loading
|
||||||
@@ -392,7 +402,7 @@
|
|||||||
buttons2.value.forEach((item: any) => {
|
buttons2.value.forEach((item: any) => {
|
||||||
item.selected = false;
|
item.selected = false;
|
||||||
});
|
});
|
||||||
// 全不选时,隐藏模式-场景按钮
|
// 全不选时,隐藏 模式 与 场景 按钮
|
||||||
resetMode();
|
resetMode();
|
||||||
}
|
}
|
||||||
emit('changeArea', arr);
|
emit('changeArea', arr);
|
||||||
@@ -423,7 +433,7 @@
|
|||||||
// 选择时反控俯视图
|
// 选择时反控俯视图
|
||||||
let level1 = selectedButton.value;
|
let level1 = selectedButton.value;
|
||||||
let level2 = button.id;
|
let level2 = button.id;
|
||||||
// 单选模式,需将所有其他按钮设为false
|
// 单选模式,需将所有其他回路设为false
|
||||||
if (singleSelection.value) {
|
if (singleSelection.value) {
|
||||||
buttons2.value.forEach((item: any) => {
|
buttons2.value.forEach((item: any) => {
|
||||||
item.selected = false;
|
item.selected = false;
|
||||||
@@ -486,16 +496,38 @@
|
|||||||
let before = data.scene.value;
|
let before = data.scene.value;
|
||||||
// 修改后的数据
|
// 修改后的数据
|
||||||
let after = button4.value;
|
let after = button4.value;
|
||||||
|
// 如果是多选模式
|
||||||
|
if (!singleSelection.value) {
|
||||||
|
buttons2.value.forEach((item: any) => {
|
||||||
|
// 查看当前回路,哪些被选中
|
||||||
|
if (item.selected) {
|
||||||
|
changeScene(item, item.scene.value, after);
|
||||||
|
item.scene.value = after;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
thisButton2.value.scene.value = after;
|
||||||
|
return message.info('已修改X项');
|
||||||
|
// 如果是单选模式
|
||||||
|
} else {
|
||||||
// 如果没有产生实质性的修改(修改前后相同,则跳出)
|
// 如果没有产生实质性的修改(修改前后相同,则跳出)
|
||||||
if (before === after) {
|
if (before === after) {
|
||||||
return message.info('未产生实际修改');
|
return message.info('未产生实际修改');
|
||||||
// 产生了修改
|
// 产生了修改
|
||||||
} else {
|
} else {
|
||||||
thisButton2.value.scene.value = after;
|
changeScene(data, before, after);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
/** 控制场景 - 按钮切换通用方法(单选 & 多选)
|
||||||
|
* @param button 当前被选中的回路(单选 & 多选)
|
||||||
|
* @param before 回路场景的初始值(撤回时需使用)
|
||||||
|
* @param after 回路场景被修改后的值
|
||||||
|
*/
|
||||||
|
const changeScene = (button: any, before: number, after: number) => {
|
||||||
// 查询之前是否修改过
|
// 查询之前是否修改过
|
||||||
const result = changeList.value.find((item: any, index: number) => {
|
const result = changeList.value.find((item: any, index: number) => {
|
||||||
item.index = index;
|
item.index = index;
|
||||||
return item.deviceGroup == data.code;
|
return item.deviceGroup == button.code;
|
||||||
});
|
});
|
||||||
// 如果已产生过修改
|
// 如果已产生过修改
|
||||||
if (result) {
|
if (result) {
|
||||||
@@ -512,10 +544,10 @@
|
|||||||
} else {
|
} else {
|
||||||
changeList.value.push({
|
changeList.value.push({
|
||||||
// 回路
|
// 回路
|
||||||
deviceGroup: data.code,
|
deviceGroup: button.code,
|
||||||
deviceGroupName: data.name,
|
deviceGroupName: button.name,
|
||||||
// 分区
|
// 分区
|
||||||
region: data.pcode,
|
region: button.pcode,
|
||||||
regionName: '',
|
regionName: '',
|
||||||
// 修改前
|
// 修改前
|
||||||
before: before,
|
before: before,
|
||||||
@@ -523,8 +555,6 @@
|
|||||||
scene: after,
|
scene: after,
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
console.log(changeList.value, 'changeList');
|
|
||||||
}
|
|
||||||
thisButton2.value.scene.value = after;
|
thisButton2.value.scene.value = after;
|
||||||
};
|
};
|
||||||
|
|
||||||
@@ -559,7 +589,11 @@
|
|||||||
}
|
}
|
||||||
buttonLoading.value = true;
|
buttonLoading.value = true;
|
||||||
http
|
http
|
||||||
.post(lightingManage.getChangeList, { infoList: changeList.value, projectId: 'HLlmTZp8' })
|
.post(lightingManage.getChangeList, {
|
||||||
|
infoList: changeList.value,
|
||||||
|
projectId: state.projectId,
|
||||||
|
siteId: state.siteId,
|
||||||
|
})
|
||||||
.then((res) => {
|
.then((res) => {
|
||||||
if (res.msg === 'success') {
|
if (res.msg === 'success') {
|
||||||
diffList.value = res.data;
|
diffList.value = res.data;
|
||||||
|
Reference in New Issue
Block a user