899 lines
29 KiB
Vue
899 lines
29 KiB
Vue
<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">空调分组</span>
|
||
<div class="btn2">
|
||
<a-badge :offset="[-10, 2]" :count="lockList.length">
|
||
<button
|
||
class="openPlan"
|
||
:class="{ enabled2: isPlanEnabled2, disabled2: !isPlanEnabled2 }"
|
||
@click="togglePlan2">
|
||
{{ isPlanEnabled2 ? '启用开关' : '禁用开关' }}
|
||
</button>
|
||
</a-badge>
|
||
<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="changeLine(button)">
|
||
<div v-if="button.lockStatus" class="btn-back">
|
||
<stop-outlined />
|
||
</div>
|
||
{{ 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="changeLine(button)">
|
||
<div v-if="button.lockStatus" class="btn-back">
|
||
<stop-outlined />
|
||
</div>
|
||
{{ button.name }}
|
||
</button>
|
||
<div style="margin-top: 10px">
|
||
<span @click="showAllButtons = false" class="openzm"><up-outlined /> 回缩</span>
|
||
</div>
|
||
</template>
|
||
</div>
|
||
</div>
|
||
<!-- 控制模式部分 -->
|
||
<div v-show="thisButton2.dataCode">
|
||
<div class="control-area">
|
||
<div class="control-tab"></div>
|
||
<span class="control-text">控制模式</span>
|
||
</div>
|
||
<!-- 控制模式按钮部分 -->
|
||
<div class="control-mode-btn-area">
|
||
<button
|
||
v-for="(button3, index) in thisButton2.childList"
|
||
:key="index"
|
||
class="btn"
|
||
:class="{ selected: button3.selectAble }"
|
||
@click="selectButton3(button3)">
|
||
{{ button3.name }}
|
||
</button>
|
||
</div>
|
||
</div>
|
||
<!-- 控制场景部分 -->
|
||
<div v-show="thisButton2.dataCode">
|
||
<div class="control-scene-area">
|
||
<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">
|
||
<button
|
||
v-for="(button4, index) in thisButton3.childList"
|
||
:key="index"
|
||
:class="{ btn: true, selected: button4.executeStatus.value != 0 }"
|
||
@click="selectButton4(button4)">
|
||
{{ button4.name }}
|
||
</button>
|
||
</div>
|
||
</div>
|
||
<!-- 底部按钮区 -->
|
||
<div class="bottom">
|
||
<a-badge :offset="[-10, 2]" :count="changeList.length">
|
||
<a-popconfirm
|
||
title="刷新将会取消已作出的修改"
|
||
ok-text="确定"
|
||
cancel-text="取消"
|
||
@confirm="refresh(false)"
|
||
@cancel="changeCancel">
|
||
<button class="flushed">刷新</button>
|
||
</a-popconfirm>
|
||
</a-badge>
|
||
<button class="execute" @click="showModal">执行</button>
|
||
</div>
|
||
|
||
<!-- 点击执行时的弹出框 -->
|
||
<div class="out-dialog" v-if="executeVisible">
|
||
<div class="content">
|
||
<div>
|
||
<div class="div-operation"></div>
|
||
<span class="text-operation">变更内容 </span>
|
||
</div>
|
||
<div class="j-box" v-for="item in diffList" :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.regionName + ' > ' + item.deviceGroupName }}</span
|
||
>
|
||
</div>
|
||
<a-popconfirm
|
||
title="此操作将会撤销修改"
|
||
ok-text="确定"
|
||
cancel-text="取消"
|
||
placement="bottomRight"
|
||
@confirm="delBtn(item)"
|
||
@cancel="changeCancel">
|
||
<button class="cxbtn">撤销</button>
|
||
</a-popconfirm>
|
||
</div>
|
||
<div class="btn-box">
|
||
<div class="btn-item">
|
||
<div class="left">控制模式</div>
|
||
<div class="right">
|
||
<span>{{ item.stateBefore.autoStatus.label.replace('模式', '') }}</span>
|
||
<img src="/asset/image/bulbLogo/22406.png" alt="" />
|
||
<span>{{ item.stateAfter.autoStatus.label.replace('模式', '') }}</span>
|
||
</div>
|
||
</div>
|
||
<div class="btn-item">
|
||
<div class="left"> 温度 </div>
|
||
<div class="right">
|
||
<!-- 数字0也会被判为false，故只判断undefined 和 null -->
|
||
<span>{{
|
||
item.stateBefore.temperature != null ? item.stateBefore.temperature + '℃' : '--'
|
||
}}</span>
|
||
<img src="/asset/image/bulbLogo/22406.png" alt="" />
|
||
<span>
|
||
{{
|
||
item.stateAfter.temperature != null ? item.stateAfter.temperature + '℃' : '--'
|
||
}}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
<div class="btn-item">
|
||
<div class="left"> 控制场景 </div>
|
||
<div class="right">
|
||
<span>{{
|
||
item?.stateBefore?.scene?.label ? item.stateBefore.scene.label : '--'
|
||
}}</span>
|
||
<img src="/asset/image/bulbLogo/22406.png" alt="" />
|
||
<span>{{
|
||
item?.stateAfter?.scene?.label ? item.stateAfter.scene.label : '--'
|
||
}}</span>
|
||
</div>
|
||
</div>
|
||
<div class="btn-item">
|
||
<div class="left"> 风速 </div>
|
||
<div class="right">
|
||
<span>{{
|
||
item.stateBefore.windSpeed != null ? item.stateBefore.windSpeed + 'm/s' : '--'
|
||
}}</span>
|
||
<img src="/asset/image/bulbLogo/22406.png" alt="" />
|
||
<span>
|
||
{{ item.stateAfter.windSpeed != null ? item.stateAfter.windSpeed + 'm/s' : '--' }}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
<div class="btn-item">
|
||
<div class="left"> 启用状态 </div>
|
||
<div class="right">
|
||
<span>{{
|
||
item?.stateBefore?.lockStatus != undefined
|
||
? item.stateBefore.lockStatus
|
||
? '禁用'
|
||
: '启用'
|
||
: '--'
|
||
}}</span>
|
||
<img src="/asset/image/bulbLogo/22406.png" alt="" />
|
||
<span>
|
||
{{
|
||
item?.stateAfter?.lockStatus != undefined
|
||
? item.stateAfter.lockStatus
|
||
? '禁用'
|
||
: '启用'
|
||
: '--'
|
||
}}
|
||
</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>
|
||
<a-popconfirm
|
||
title="此操作将提交以上修改内容"
|
||
ok-text="确定"
|
||
cancel-text="取消"
|
||
@confirm="submitChangeList"
|
||
@cancel="changeCancel">
|
||
<button class="execute">执行</button>
|
||
</a-popconfirm>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { ref, computed, onMounted } from 'vue';
|
||
import { DownOutlined, UpOutlined, StopOutlined } from '@ant-design/icons-vue';
|
||
import { message, Modal } from 'ant-design-vue';
|
||
// 请求
|
||
import { http } from '/nerv-lib/util/http';
|
||
import { airConditionControl } from '/@/api/airConditionControlSystem';
|
||
import { planManage } from '/@/api/planManage';
|
||
// 全局变量
|
||
import { items } from '/@/store/item';
|
||
|
||
// 初始化 =========================================================================
|
||
|
||
onMounted(() => {
|
||
// 分区初始化
|
||
setArea();
|
||
});
|
||
// 分区初始化，以 1-1 作为默认回路
|
||
const setArea = () => {
|
||
const data = props.treeData[0];
|
||
buttons2.value = data.childList;
|
||
};
|
||
// 全局变量
|
||
const state = items();
|
||
|
||
// 与父组件的交互 ===================================================================
|
||
|
||
const props = defineProps({
|
||
// 分区结构（照明区域 > 照明回路）
|
||
treeData: {
|
||
type: Array,
|
||
default: () => {
|
||
[];
|
||
},
|
||
},
|
||
});
|
||
/** 向上传递方法
|
||
* @method changeArea 用于控制俯视图的选中状态
|
||
* @method reset 用于重置按钮区
|
||
* @method reload 用于刷新一次页面
|
||
* @method resetAll 刷新所有tab，对计划进行修改时，需刷新tab2与tab3
|
||
*/
|
||
const emit = defineEmits(['changeArea', '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;
|
||
// 改变俯视图样式
|
||
emit('changeArea', button.id);
|
||
// 当前选中回路 - 置空
|
||
resetMode();
|
||
};
|
||
// 默认最多展示8个按钮
|
||
const limitedButtons1 = computed(() => props.treeData.slice(0, 8));
|
||
|
||
// 照明回路业务 ======================================================================
|
||
|
||
// 开关启用/禁用状态
|
||
const isPlanEnabled2 = ref(false);
|
||
// 开关修改保存数组
|
||
const lockList = ref<any>([]);
|
||
// 开关启用/禁用切换事件
|
||
const togglePlan2 = () => {
|
||
// 获取选中线路
|
||
let valid = buttons2.value.filter((item: any) => {
|
||
return item.selected;
|
||
});
|
||
// 未选中线路
|
||
if (valid.length == 0) {
|
||
return message.info('请先选择线路');
|
||
// 选中线路
|
||
} else {
|
||
// 按钮切换
|
||
isPlanEnabled2.value = !isPlanEnabled2.value;
|
||
// 禁用状态原值
|
||
let after = +isPlanEnabled2.value;
|
||
// 当前修改线路
|
||
valid.forEach((item: any) => {
|
||
// 按钮与需修改的值一致，无效
|
||
if (item.lockStatus == after) {
|
||
return;
|
||
}
|
||
// 查看是否已经产生过修改
|
||
const same = lockList.value.find((v: any) => {
|
||
return v.deviceGroup == item.dataCode;
|
||
});
|
||
// 如果发生过修改
|
||
if (same) {
|
||
// 改回原值，则移除
|
||
if (same.before == after) {
|
||
lockList.value.forEach((v1: any, index: number) => {
|
||
if (same.deviceGroup == v1.deviceGroup) {
|
||
lockList.value.splice(index, 1);
|
||
}
|
||
});
|
||
// 只有true 和 false 的切换，无需继续判断
|
||
}
|
||
// 初次修改
|
||
} else {
|
||
lockList.value.push({
|
||
deviceGroup: item.dataCode,
|
||
deviceGroupName: item.name,
|
||
region: item.treePid,
|
||
regionName: '',
|
||
before: item.lockStatus,
|
||
lockStatus: after,
|
||
});
|
||
}
|
||
// 修改
|
||
item.lockStatus = after;
|
||
});
|
||
}
|
||
};
|
||
|
||
// 是否单选，状态
|
||
let singleSelection = ref(true);
|
||
// 多选与单选切换事件
|
||
const selectAll = () => {
|
||
selectAllCheckbox.value = false;
|
||
// 切换时清空当前所有选项
|
||
buttons2.value.forEach((button: any) => {
|
||
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: any, index: number) => {
|
||
// 全选时，默认展示第一条回路的模式-场景按钮
|
||
if (index == 0) {
|
||
thisButton2.value = item;
|
||
}
|
||
item.selected = true;
|
||
arr.push(item.id);
|
||
});
|
||
// 全不选
|
||
} else {
|
||
buttons2.value.forEach((item: any) => {
|
||
item.selected = false;
|
||
});
|
||
// 全不选时，隐藏 模式 与 场景 按钮
|
||
resetMode();
|
||
}
|
||
emit('changeArea', arr);
|
||
};
|
||
|
||
// 储存当前选中的回路
|
||
const thisButton2 = ref({
|
||
dataCode: '',
|
||
name: '',
|
||
treePid: '',
|
||
childList: [],
|
||
});
|
||
// 依托父组件传值，重置回路
|
||
const setButtons2 = (data: any) => {
|
||
buttons2.value = data;
|
||
};
|
||
// 照明回路的按钮切换
|
||
const changeLine = (button: any) => {
|
||
// 根据按钮状态，展示禁用/启用按钮文本
|
||
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: any) => {
|
||
item.selected = false;
|
||
});
|
||
button.selected = !button.selected;
|
||
emit('changeArea', [level1, level2]);
|
||
} else {
|
||
// 多选模式传值
|
||
button.selected = !button.selected;
|
||
const arr = [level1];
|
||
buttons2.value.forEach((item: any) => {
|
||
if (item.selected) {
|
||
arr.push(item.id);
|
||
}
|
||
});
|
||
emit('changeArea', arr);
|
||
}
|
||
// 用于展示控制模式
|
||
if (button.selected) {
|
||
// 发生了选中事件
|
||
thisButton2.value = button;
|
||
// 获得启动模式
|
||
if (button.childList) {
|
||
thisButton3.value = button.childList.find((item: any) => {
|
||
if (item.selectAble) {
|
||
return item.childList ? item.childList : [];
|
||
}
|
||
});
|
||
} else {
|
||
thisButton3.value = { childList: [] };
|
||
}
|
||
} else {
|
||
// 未发生选中 或 多选的其中一个按钮被取消
|
||
resetMode();
|
||
}
|
||
console.log(thisButton2, 'button');
|
||
};
|
||
|
||
// 空调分组所有按钮
|
||
const buttons2 = ref([]);
|
||
// 按钮区展开与收起状态
|
||
const showAllButtons = ref(false);
|
||
// 默认最多展示8个按钮
|
||
const limitedButtons2 = computed(() => buttons2.value.slice(0, 8));
|
||
|
||
// 控制模式业务 ====================================================================
|
||
|
||
const thisButton3 = ref({
|
||
childList: [],
|
||
});
|
||
// 控制模式 - 按钮切换
|
||
const selectButton3 = (button3: any) => {
|
||
console.log(button3);
|
||
if (!button3.selectAble) {
|
||
return message.warning(`${button3.name} 暂不支持`);
|
||
}
|
||
thisButton3.value = button3;
|
||
};
|
||
|
||
// 控制场景业务 =====================================================================
|
||
|
||
// 控制场景 - 按钮切换
|
||
const selectButton4 = (button4: any) => {
|
||
const after = button4.dataCode;
|
||
let before = '';
|
||
// 如果是多选模式
|
||
if (!singleSelection.value) {
|
||
// 操作线路总数
|
||
let sum = 0;
|
||
// 没有这个选项的线路
|
||
// let nofind = 0;
|
||
// 修改无效的数量
|
||
let checked = 0;
|
||
// 可修改的数量
|
||
let changed = 0;
|
||
buttons2.value.forEach((item: any) => {
|
||
// 取出当前选中的值 before
|
||
if (item.childList) {
|
||
let mode = item.childList.find((lv3: any) => {
|
||
return lv3.selectAble;
|
||
});
|
||
if (mode.childList) {
|
||
mode.childList.forEach((mode: any) => {
|
||
// 取出当前选中的模式
|
||
if (mode.executeStatus.value == 1) {
|
||
before = mode.dataCode;
|
||
}
|
||
});
|
||
}
|
||
}
|
||
// 查看当前回路，哪些被选中
|
||
if (item.selected) {
|
||
item.childList.forEach((v: any) => {
|
||
if (v.childList) {
|
||
v.childList.forEach((v1: any) => {
|
||
// 查看是否包含当前要修改的值
|
||
if (v1.dataCode == after) {
|
||
sum += 1;
|
||
// 已经被选中，无需修改的内容
|
||
if (before == after) {
|
||
return (checked += 1);
|
||
// 修改
|
||
} else {
|
||
changed += 1;
|
||
changeScene(v1, before, after, item);
|
||
v1.executeStatus.value = 1;
|
||
}
|
||
// 不符合条件的全部重置
|
||
} else {
|
||
v1.executeStatus.value = 0;
|
||
}
|
||
});
|
||
}
|
||
});
|
||
}
|
||
});
|
||
message.info(`共修改${sum}条数据，其中${checked}条无需修改，${changed}条修改有效`);
|
||
// 如果是单选模式
|
||
} else {
|
||
// 如果按钮已经被选择
|
||
if (button4.executeStatus.value == 1) {
|
||
return message.info('未产生实际修改');
|
||
} else {
|
||
// 获得线路当前的场景
|
||
let before;
|
||
thisButton2.value.childList.find((item: any) => {
|
||
if (item.childList) {
|
||
item.childList.forEach((i: any) => {
|
||
if (i.executeStatus.value == 1) {
|
||
return (before = i.dataCode);
|
||
}
|
||
});
|
||
}
|
||
});
|
||
// 移除选中场景
|
||
resetScene(thisButton2.value.childList);
|
||
changeScene(button4, before, after);
|
||
}
|
||
}
|
||
};
|
||
// 切换场景前，需要把其他场景移除
|
||
const resetScene = (list: any) => {
|
||
list.forEach((item: any) => {
|
||
if (item.childList) {
|
||
item.childList.forEach((i: any) => {
|
||
i.executeStatus.value = 0;
|
||
});
|
||
}
|
||
});
|
||
};
|
||
|
||
/** 控制场景 - 按钮切换通用方法（单选 & 多选）
|
||
* @param button 当前被选中的场景（单选 & 多选）
|
||
* @param before 当前回路场景的初始值（撤回时需使用）
|
||
* @param after 修改后的值（修改时使用）
|
||
* @param anyButton 多选时使用
|
||
*/
|
||
const changeScene = (button: any, before: string | undefined, after: string, line = null) => {
|
||
// 通过分组ID，查询之前是否修改过
|
||
const result = changeList.value.find((item: any, index: number) => {
|
||
item.index = index;
|
||
return item.deviceGroup == button.treePid.split('_')[0];
|
||
});
|
||
// 如果已产生过修改
|
||
if (result) {
|
||
// 改回了原有的值，则从数组中移除
|
||
if (after == result.before) {
|
||
changeList.value.splice(result.index, 1);
|
||
// 修改为新值，则只修改场景
|
||
} else {
|
||
result.scene = after;
|
||
// 临时flag，用后移除
|
||
delete result.index;
|
||
}
|
||
// 如果未产生过修改
|
||
} else {
|
||
let nowButton;
|
||
// 多选，则使用第四个参数
|
||
if (line) {
|
||
nowButton = line;
|
||
// 如果是单选，则使用thisbotton2
|
||
} else {
|
||
nowButton = thisButton2.value;
|
||
}
|
||
changeList.value.push({
|
||
// 回路
|
||
deviceGroup: nowButton.dataCode,
|
||
deviceGroupName: nowButton.name,
|
||
// 分区
|
||
region: nowButton.treePid,
|
||
regionName: '',
|
||
// 修改前
|
||
before,
|
||
scene: after,
|
||
});
|
||
}
|
||
button.executeStatus.value = 1;
|
||
};
|
||
|
||
// 底部按钮区 ======================================================================
|
||
|
||
// 刷新
|
||
const refresh = (reload = false) => {
|
||
// 关闭执行弹窗
|
||
executeVisible.value = false;
|
||
// 设置当前选中的序列
|
||
selectedButton.value = '1';
|
||
// 重置选中样式 和 按钮选中状态
|
||
emit('changeArea', ['1']);
|
||
emit('reset');
|
||
// 如果是中途刷新(对应提交后刷新)，需要将所有修改改回
|
||
if (!reload) {
|
||
changeList.value.forEach((item: any) => {
|
||
resetChangeList(item);
|
||
});
|
||
lockList.value.forEach((item: any) => {
|
||
resetLockList(item);
|
||
});
|
||
// 默认选择第一个楼层
|
||
let data = props.treeData[0];
|
||
// 默认选中
|
||
data.selected = true;
|
||
// 默认选中 1-1 分区 回路
|
||
buttons2.value = data.childList;
|
||
// 将选中线路重置
|
||
resetMode();
|
||
}
|
||
changeList.value = [];
|
||
lockList.value = [];
|
||
};
|
||
// 将已修改的禁用/启用状态改回
|
||
const resetLockList = (item: any) => {
|
||
props.treeData.find((v: any) => {
|
||
if (item.region == v.dataCode) {
|
||
v.childList.find((v1: any) => {
|
||
if (item.deviceGroup == v1.dataCode) {
|
||
v1.lockStatus = item.before;
|
||
}
|
||
});
|
||
}
|
||
});
|
||
};
|
||
// 刷新时，将已修改的值改回
|
||
const resetChangeList = (item: any) => {
|
||
props.treeData.find((v: any) => {
|
||
if (item.region == v.dataCode) {
|
||
v.childList.find((v1: any) => {
|
||
// 找到被修改过的线路
|
||
if (item.deviceGroup == v1.dataCode) {
|
||
v1.childList.forEach((v2: any) => {
|
||
if (v2.childList) {
|
||
v2.childList.forEach((v3: any) => {
|
||
// 将新值移除
|
||
if (item.scene == v3.dataCode) {
|
||
v3.executeStatus.value = 0;
|
||
}
|
||
if (!item.before) {
|
||
console.log(item, '没有这个选项');
|
||
v3.executeStatus.value = 0;
|
||
}
|
||
// 旧值选中
|
||
if (item.before == v3.dataCode) {
|
||
v3.executeStatus.value = 1;
|
||
}
|
||
});
|
||
}
|
||
});
|
||
}
|
||
});
|
||
}
|
||
});
|
||
};
|
||
// 右下角的执行事件
|
||
const showModal = () => {
|
||
if (!changeList.value.length && !lockList.value.length) {
|
||
return message.info('未产生任何修改');
|
||
}
|
||
state.setLoading(true);
|
||
http
|
||
.get(planManage.getRunningPlan, {
|
||
ctrlType: 2,
|
||
projectId: state.projectId,
|
||
siteId: state.siteId,
|
||
})
|
||
.then((res) => {
|
||
// 如果有计划正在执行
|
||
if (res.data && res.data.length) {
|
||
state.setLoading(false);
|
||
// 此处框架本身存在问题，弹出层在本地环境无法关闭，暂时使用浏览器自带的confirm方法
|
||
Modal.confirm({
|
||
title: '提示信息',
|
||
content: '有计划正在执行，点击"确定"将暂停当前计划',
|
||
onOk() {
|
||
state.setLoading(true);
|
||
// 如果点击了确定，将先终止所有进行中的计划
|
||
http
|
||
.post(airConditionControl.submitChangeList, {
|
||
projectId: state.projectId,
|
||
siteId: state.siteId,
|
||
lockList: [],
|
||
sceneList: [],
|
||
})
|
||
.then((res) => {
|
||
// 如果重置成功，则获取修改前后对比数据
|
||
if (res.retcode == 0) {
|
||
sendChangeList();
|
||
// 未成功提示
|
||
} else {
|
||
state.setLoading(false);
|
||
message.error('关闭进行中的任务操作失败，请重新尝试');
|
||
}
|
||
})
|
||
.catch(() => {
|
||
state.setLoading(false);
|
||
});
|
||
},
|
||
onCancel() {},
|
||
});
|
||
// 没有计划正在执行，则直接请求
|
||
} else {
|
||
sendChangeList();
|
||
}
|
||
});
|
||
};
|
||
// 提交控制场景 与 禁用/启用 修改
|
||
const sendChangeList = () => {
|
||
http
|
||
.post(airConditionControl.getChangeList, {
|
||
sceneList: changeList.value,
|
||
lockList: lockList.value,
|
||
projectId: state.projectId,
|
||
siteId: state.siteId,
|
||
})
|
||
.then((res) => {
|
||
state.setLoading(false);
|
||
if (res.retcode == 0) {
|
||
diffList.value = res.data;
|
||
executeVisible.value = true;
|
||
} else {
|
||
message.warning('获取修改内容失败');
|
||
}
|
||
})
|
||
.catch(() => {
|
||
state.setLoading(false);
|
||
});
|
||
};
|
||
// 通用取消
|
||
const changeCancel = () => {};
|
||
|
||
// 内侧弹窗 ========================================================================
|
||
|
||
// 内侧弹窗显隐
|
||
const executeVisible = ref<boolean>(false);
|
||
// 修改模式 需要向后端提交的内容
|
||
const changeList: any = ref([]);
|
||
// 展示修改前后差异的内容
|
||
const diffList = ref([]);
|
||
//撤销
|
||
const delBtn = (obj: any) => {
|
||
console.log(obj, '当前选择的修改内容');
|
||
// 将treeData对应回路的数据改回，数据以后端为准
|
||
obj.scene = obj.stateAfter.scene.value;
|
||
obj.before = obj.stateBefore.scene.value;
|
||
resetChangeList(obj);
|
||
resetLockList(obj);
|
||
// 将 changeList 与 diffList 中记录的修改移除 (排除极端情况)
|
||
changeList.value = changeList.value.filter((item: any) => {
|
||
return item.deviceGroup !== obj.deviceGroup;
|
||
});
|
||
lockList.value = lockList.value.filter((item: any) => {
|
||
return item.deviceGroup !== obj.deviceGroup;
|
||
});
|
||
diffList.value = diffList.value.filter((item: any) => {
|
||
return item.deviceGroup !== obj.deviceGroup;
|
||
});
|
||
// 如果移除后不再有修改内容，则隐藏弹出框
|
||
if (changeList.value.length == 0 && lockList.value.length == 0) {
|
||
executeVisible.value = false;
|
||
}
|
||
};
|
||
// 提交本次修改
|
||
const submitChangeList = () => {
|
||
http
|
||
.post(airConditionControl.submitChangeList, {
|
||
sceneList: changeList.value,
|
||
lockList: lockList.value,
|
||
projectId: state.projectId,
|
||
siteId: state.siteId,
|
||
})
|
||
.then((res) => {
|
||
let data = res.data;
|
||
// 修改请求发送了，但操作时产生了失败结果
|
||
if (res.retcode != 0) {
|
||
// 直接提示并跳出
|
||
return message.warning(data.msg);
|
||
}
|
||
// 所有修改均生效
|
||
if (data.allSucceed) {
|
||
message.success('修改完成');
|
||
// allSucceed不为true，则至少有一条数据修改失败
|
||
} else {
|
||
message.info(`${data.successList.length}条修改成功，${data.failList.length}条修改失败`);
|
||
}
|
||
refresh(true);
|
||
emit('resetAll');
|
||
})
|
||
.catch(() => {});
|
||
};
|
||
|
||
// 其他业务 ========================================================================
|
||
|
||
// 将当前选择的回路置空
|
||
const resetMode = () => {
|
||
thisButton2.value = {
|
||
dataCode: '',
|
||
name: '',
|
||
treePid: '',
|
||
childList: [],
|
||
};
|
||
};
|
||
|
||
// 向外暴露方法
|
||
defineExpose({
|
||
// 分区切换
|
||
changeArea,
|
||
// 回路切换
|
||
changeLine,
|
||
// 重置当前选择
|
||
refresh,
|
||
// 由父组件反向刷新当前选中的回路
|
||
setButtons2,
|
||
});
|
||
</script>
|
||
<style lang="less" scoped>
|
||
@import '../style/dialogStyle.less';
|
||
@import './tabs1.less';
|
||
</style>
|