Browse Source

add:照明系统 抽屉功能tab2分页功能完善

temp
chenpingsen 4 months ago
parent
commit
2d1d3a41a8
  1. 4
      hx-ai-intelligent/src/api/IlluminationInfo.ts
  2. 10
      hx-ai-intelligent/src/view/equipmentControl/lightingManage/index.less
  3. 67
      hx-ai-intelligent/src/view/equipmentControl/lightingManage/indexs.vue
  4. 35
      hx-ai-intelligent/src/view/equipmentControl/lightingManage/tabs1.less
  5. 86
      hx-ai-intelligent/src/view/equipmentControl/lightingManage/tabs1.vue
  6. 87
      hx-ai-intelligent/src/view/equipmentControl/lightingManage/tabs2.vue

4
hx-ai-intelligent/src/api/IlluminationInfo.ts

@ -17,4 +17,8 @@ export enum lightingManage {
getLeftPlan = '/carbon-smart/IlluminationPlan/getPlan',
// 提交穿梭框被选择的数据
submitLeftPlan = '/carbon-smart/IlluminationPlan/joinPlan',
// 删除表格中的计划
deletePlan = '/carbon-smart/IlluminationPlan/deletePlan',
// 重启表格计划
restartPlan = '/carbon-smart/IlluminationPlan/enable',
}

10
hx-ai-intelligent/src/view/equipmentControl/lightingManage/index.less

@ -1,6 +1,8 @@
// 页面容器
.lighting-box {
position: relative;
width: 100%;
height: 100%;
// background: linear-gradient(#badaff, #8cabeb, #7095de);
// 照明设备功能总容器
.lighting-img-box {
@ -47,19 +49,19 @@
display: flex;
gap: 5px;
.area1 {
width: 70px;
width: 65px;
background: rgba(0, 251, 91, 0.3);
border: 2px solid rgb(0, 251, 91);
display: flex;
}
.area2 {
width: 200px;
width: 100px;
background: rgba(255, 165, 0, 0.3);
border: 2px solid rgb(255, 165, 0);
display: flex;
}
.area3 {
width: 120px;
width: 220px;
background: rgba(255, 0, 0, 0.3);
border: 2px solid rgb(255, 0, 0);
display: flex;
@ -71,7 +73,7 @@
display: flex;
}
.area5 {
flex: 1;
flex: 210px;
background: rgba(0, 251, 91, 0.3);
border: 2px solid rgb(0, 251, 91);
display: flex;

67
hx-ai-intelligent/src/view/equipmentControl/lightingManage/indexs.vue

@ -3,8 +3,7 @@
<div class="lighting-img-box">
<!-- 左上角区域切换 -->
<div class="btn-box">
<button class="btn-item" @click=changeFloor(1)>1F</button>
<button class="btn-item" @click=changeFloor(2)>2F</button>
<button v-for="item in floorData" class="btn-item" @click=changeFloor(item.childList)>{{ item.name }}</button>
</div>
<!-- 楼层区域 -->
<div class="area">
@ -13,7 +12,7 @@
:class="computedClass(item.id)"
@click="changeThisArea([item])"
:key="index">
<div v-for="(v, i) in item.children" :key="i" class="light-group">
<div v-for="(v, i) in item.childList" :key="i" class="light-group">
<div class="group-shadow" @click.stop="changeThisArea([item, v])">
<div :class="computedClass(v.id)" class="shadow-box"></div>
</div>
@ -50,7 +49,7 @@
:maskStyle="{ 'background-color': 'rgba(0, 0, 0, 0)' }">
<a-tabs v-model:activeKey="activeKey">
<a-tab-pane key="1" tab="控制面板">
<tabs1 @changeArea="changeArea" :treeData="treeData" :nowArea="nowArea"></tabs1>
<tabs1 @changeArea="changeArea" @reset="reset" :treeData="treeData" :nowArea="nowArea"></tabs1>
</a-tab-pane>
<a-tab-pane key="2" tab="计划列表" force-render>
<tabs2></tabs2>
@ -80,55 +79,53 @@ import {
DoubleRightOutlined
} from '@ant-design/icons-vue';
// =======================================================
interface items {
id: string,
}
// =======================================================
onMounted(() => {
http.post(lightingManage.getArea, { floor: '1', siteId: '10000001' }).then(res => {
http.get(lightingManage.getArea, { projectId: 'HLlmTZp8' }).then(res => {
const data = res.data
/** 使
floorData.value = data
/** 使
* @param id 用于判断样式和层级的前端属性
* @param selected 用于表示是否选中的前端属性
*/
data.forEach((item, index) => {
if (index == 0) {
item.selected = true
} else {
item.selected = false
}
item.id = String(index + 1)
item.children = []
// deviceGroup
let i = 1;
for (let obj in item.deviceGroup) {
item.deviceGroup[obj].selected = false
item.deviceGroup[obj].id = String((index + 1) + '-' + i++)
item.children.push(item.deviceGroup[obj])
}
data.forEach(floor => {
floor.childList.forEach((item, index) => {
if (index == 0) {
item.selected = true
} else {
item.selected = false
}
item.id = String(index + 1)
item.childList.forEach((v, i) => {
v.selected = false
v.id = (index + 1) + '-' + (i + 1)
})
})
})
treeData.value = data
treeData.value = data[0].childList
})
})
// =====================================================
//
const changeFloor = (area: number) => {
if (area == 1) {
console.log('1F')
} else if (area == 2) {
console.log('2F')
}
const changeFloor = (area: any) => {
//
reset()
//
changeArea(['1'])
//
treeData.value = area
//
treeData.value[0].selected = true
}
// =====================================================
//
const floorData = ref([])
//
const treeData = ref([])
// id
@ -223,7 +220,7 @@ const changeThisArea = (result: any) => {
const reset = () => {
treeData.value.forEach(item => {
item.selected = false
item.children.forEach(i => {
item.childList.forEach(i => {
i.selected = false
})
})

35
hx-ai-intelligent/src/view/equipmentControl/lightingManage/tabs1.less

@ -44,8 +44,7 @@
display: inline-block;
justify-content: center;
}
.plan.enabled {
.plan {
border: none;
font-size: 14px;
font-weight: 400;
@ -54,28 +53,20 @@
margin-left: 235px;
width: 88px;
height: 32px;
background: linear-gradient(180deg, rgba(103, 222, 0, 1) 0%, rgba(0, 181, 6, 1) 100%);
color: white;
cursor: pointer;
}
.plan.enabled {
background: linear-gradient(180deg, rgba(103, 222, 0, 1) 0%, rgba(0, 181, 6, 1) 100%);
}
.plan.disabled {
border: none;
font-size: 14px;
font-weight: 400;
border-radius: 5px;
color: white;
vertical-align: top;
margin-left: 235px;
width: 88px;
height: 32px;
background-color: red;
}
.plan:disabled {
cursor: not-allowed;
}
.openPlan.enabled2 {
.openPlan {
cursor: pointer;
border: none;
font-size: 14px;
font-weight: 400;
@ -84,19 +75,12 @@
vertical-align: top;
width: 88px;
height: 32px;
}
.openPlan.enabled2 {
background: linear-gradient(180deg, rgba(103, 222, 0, 1) 0%, rgba(0, 181, 6, 1) 100%);
color: white;
}
.openPlan.disabled2 {
border: none;
font-size: 14px;
font-weight: 400;
border-radius: 5px;
color: white;
vertical-align: top;
width: 88px;
height: 32px;
background-color: red;
}
@ -135,6 +119,7 @@
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
.btn2 {

86
hx-ai-intelligent/src/view/equipmentControl/lightingManage/tabs1.vue

@ -14,7 +14,7 @@
<template v-if="!showAllButtonsArea">
<button v-for="(button, index) in limitedButtons1" :key="index"
:class="{ btn: true, selected: button.selected }" @click="selectButton(button)">
{{ button.regionName }}
{{ button.name }}
</button>
<div style="margin-top: 10px">
<span @click="showAllButtonsArea = true" class="openzm"><down-outlined /> 展开</span>
@ -23,7 +23,7 @@
<template v-else>
<button v-for="(button, index) in props.treeData" :key="index" :class="{ btn: true, selected: button.selected }"
@click="selectButton(button)">
{{ button.regionName }}
{{ button.name }}
</button>
<div style="margin-top: 10px">
<span @click="showAllButtonsArea = false" class="openzm"><up-outlined /> 回缩</span>
@ -33,7 +33,7 @@
</div>
<!-- 照明回路部分 -->
<div>
<div class="circuit-area" v-if="selectedButton">
<div class="circuit-area">
<div class="circuit-tab"></div>
<span class="circuit-text">照明回路</span>
<div class="btn2">
@ -50,12 +50,12 @@
</button>
</div>
</div>
<div class="btnArea" v-if="selectedButton">
<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.panel" />
{{ button.deviceName }}
<stop-outlined v-if="button.ctrlStatus" />
{{ button.name }}
</button>
<div style="margin-top: 10px">
<span @click="showAllButtons = true" class="openzm"><down-outlined /> 展开</span>
@ -64,8 +64,8 @@
<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.panel" />
{{ button.deviceName }}
<stop-outlined v-if="button.ctrlStatus" />
{{ button.name }}
</button>
<div style="margin-top: 10px">
<span @click="showAllButtons = false" class="openzm"><up-outlined /> 回缩</span>
@ -218,6 +218,7 @@ import {
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';
@ -237,7 +238,7 @@ const setArea = () => {
//
selectedButton.value = props.nowArea
//
buttons2.value = data.children
buttons2.value = data.childList
}
// ===================================================================
@ -254,13 +255,19 @@ const props = defineProps({
}
});
//
const emit = defineEmits(['changeArea']);
/**
* @method changeArea 用于控制俯视图的选中状态
* @method reset 用于重置按钮区
*/
const emit = defineEmits(['changeArea','reset']);
//
watch(() => props.nowArea, () => {
setArea()
// 线
handleButton.value = ''
})
// ==========================================================================
// =======================================================================
//
const isPlanEnabled = ref(false);
@ -278,33 +285,36 @@ const selectButton = (button: any) => {
console.log(button,'button')
//
selectedButton.value = button.id;
//
initMenu(1)
button.selected = true
buttons2.value = button.children
// area
buttons2.value = button.childList
emit('changeArea', button.id);
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 = buttons2.value.find((button) => button.id === handleButton.value)
let panel = +(!btn.panel)
let panel = +(!btn.ctrlStatus)
isLoading.value = true
http.get(lightingManage.setDisable, { deviceGroup: btn.deviceGroup, panel }).then(res => {
http.get(lightingManage.setDisable, { deviceGroup: btn.code, panel }).then(res => {
if (res.msg === 'success') {
isPlanEnabled2.value = !isPlanEnabled2.value;
btn.panel = panel
btn.ctrlStatus = panel
isLoading.value = false
} else {
isLoading.value = false
@ -316,13 +326,14 @@ const togglePlan2 = () => {
let singleSelection = ref(true);
//
const selectAll = () => {
emit('changeArea', [selectedButton.value])
selectAllCheckbox.value = false
buttons2.value.forEach((button) => {
button.selected = false;
});
singleSelection.value = !singleSelection.value;
// 线
showControlMode.value = false
emit('changeArea', [selectedButton.value])
};
//
@ -351,11 +362,12 @@ const toggleSelection = (button: any) => {
// ID/
handleButton.value = button.id
// /
if (button.panel) {
if (button.ctrlStatus) {
isPlanEnabled2.value = true
} else {
isPlanEnabled2.value = false
}
//
let level1 = selectedButton.value
let level2 = button.id
@ -401,7 +413,7 @@ const showAllButtons = ref(false);
// 8
const limitedButtons2 = computed(() => buttons2.value.slice(0, 8));
// =======================================================================
// ====================================================================
//
const showControlMode = ref(false);
@ -413,7 +425,7 @@ const selectButton3 = (button3) => {
selectedButton4.value = null; //
};
// =======================================================================
// =====================================================================
//
const showControlScene = ref(false);
@ -431,7 +443,7 @@ const selectButton4 = (button4) => {
selectedButton4.value = button4.label;
};
// ========================================================================
// =====================================================================
// -
const lightSource = ref([{ num: '8/10', light: '100', temperature: '4200' }]);
@ -493,6 +505,7 @@ const delBtn = (id: any) => {
executeVisible.value = false;
}
};
// ========================================================================
const isLoading = ref(false)
@ -502,13 +515,14 @@ const initMenu = (tier: number) => {
// 1 = -
if (tier == 1) {
//
buttons2.value.forEach(item => {
item.selected = false
})
//
props.treeData.forEach(item => {
item.selected = false
})
// buttons2.value.forEach(item => {
// item.selected = false
// })
// //
// props.treeData.forEach(item => {
// item.selected = false
// })
emit('reset')
//
showControlMode.value = false;
//
@ -524,9 +538,17 @@ const initMenu = (tier: number) => {
}
//
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
showControlMode.value = false;
showControlScene.value = false;
selectedButton4.value = null;

87
hx-ai-intelligent/src/view/equipmentControl/lightingManage/tabs2.vue

@ -40,8 +40,8 @@
</button>
</td>
<td>
<button class="tabReboot" @click="handleRefClick1">重启</button>
<button class="tabDelete">删除</button>
<div class="tabReboot" @click="restartPlan(row.id)">重启</div>
<div class="tabDelete" @click="deletePlan(row.id)">删除</div>
</td>
</tr>
</tbody>
@ -54,7 +54,7 @@
<div style="margin-top: 20px">
<a-transfer
v-model:target-keys="targetKeys"
:data-source="mockData"
:data-source="transferData"
show-search
:filter-option="filterOption"
:render="(item) => item.title"
@ -66,7 +66,7 @@
<div style="width: 100%; height: 60px;"></div>
<div class="button-box">
<button class="cancel" @click="addVisible = false">取消</button>
<button class="execute">确定</button>
<button class="execute" @click="sendPlan">确定</button>
</div>
</div>
</template>
@ -76,11 +76,14 @@ import { ref, onMounted } from 'vue';
//
import { http } from '/nerv-lib/util/http';
import { lightingManage } from '/@/api/IlluminationInfo';
import { message } from 'ant-design-vue';
// ===========================================================
onMounted(() => {
//
getTable()
// 穿
getLeftPlan()
})
@ -94,6 +97,20 @@ const getTable = () => {
dataSource.value = res.data
})
}
//
const deletePlan = (id: String) => {
http.delete(lightingManage.deletePlan, [id]).then(res => {
message.success('操作成功')
getTable()
})
}
//
const restartPlan = (id: String) => {
http.post(lightingManage.restartPlan, { planId: id }).then(res => {
message.success('操作成功')
getTable()
})
}
// tab ====================================================
@ -107,49 +124,43 @@ const addModal = () => {
// 穿 =======================================================
// 穿
const transferData = ref([])
const transferData = ref([]) as any;
// 穿
const getLeftPlan = () => {
http.get(lightingManage.getLeftPlan, {}).then(res => {
console.log(res)
let arr = []
res.data.forEach(item => {
arr.push({
key: item.id,
title: item.planName
})
})
transferData.value = arr
})
}
//
const handleRefClick1 = () => {
alert(111)
};
const handleChange = (keys: string[], direction: string, moveKeys: string[]) => {
console.log(keys, direction, moveKeys);
};
const handleSearch = (dir: string, value: string) => {
console.log('search:', dir, value);
};
// 穿
interface MockData {
key: string;
title: string;
description: string;
chosen: boolean;
}
const mockData = ref([
{
key: '1',
title: '计划再开',
},
{
key: '2',
title: '检修模式',
},
{
key: '3',
title: '设备变更',
},
]);
// 穿
const targetKeys = ref<string[]>([]);
const filterOption = (inputValue: string, option: MockData) => {
// 穿
const sendPlan = () => {
if (targetKeys.value.length < 1) {
return message.info('没有选择任何计划');
}
http.post(lightingManage.submitLeftPlan, targetKeys.value).then(res => {
message.success('添加成功')
//
getTable()
getLeftPlan()
})
}
const filterOption = (inputValue: string, option: any) => {
return option.description.indexOf(inputValue) > -1;
};
@ -178,6 +189,7 @@ const filterOption = (inputValue: string, option: MockData) => {
font-size: 14px;
font-weight: 400;
color: rgba(255, 255, 255, 1);
cursor: pointer;
}
}
//
@ -204,6 +216,7 @@ const filterOption = (inputValue: string, option: MockData) => {
.tabReboot,
.tabDelete {
border: none;
display: inline-block;
background-color: rgba(0, 0, 0, 0);
font-size: 14px;
font-weight: 400;
@ -215,6 +228,12 @@ const filterOption = (inputValue: string, option: MockData) => {
.tabReboot {
margin-right: 8px;
}
.tabReboot::active {
color: white !important;
}
.tabDelete::active {
color: white;
}
}
::v-deep(.ant-transfer) {
// hover

Loading…
Cancel
Save