zhaohy 2 months ago
parent
commit
180ad4a005
  1. 6
      hx-ai-intelligent/src/api/IlluminationInfo.ts
  2. 9
      hx-ai-intelligent/src/store/item.ts
  3. BIN
      hx-ai-intelligent/src/view/equipmentControl/image/liftState/lift/lift1.png
  4. BIN
      hx-ai-intelligent/src/view/equipmentControl/image/liftState/lift/lift2.png
  5. BIN
      hx-ai-intelligent/src/view/equipmentControl/image/liftState/lift/line.png
  6. 28
      hx-ai-intelligent/src/view/equipmentControl/liftSystem/index.vue
  7. 283
      hx-ai-intelligent/src/view/equipmentControl/liftSystem/liftInfo.vue
  8. 3
      hx-ai-intelligent/src/view/equipmentControl/liftSystem/liftPosition.ts
  9. 37
      hx-ai-intelligent/src/view/equipmentControl/lightingManage/indexs.vue
  10. 3
      hx-ai-intelligent/src/view/equipmentControl/lightingManage/lightPosition.ts
  11. 128
      hx-ai-intelligent/src/view/equipmentControl/lightingManage/tabs1.vue

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

@ -1,13 +1,13 @@
// 照明系统及相关接口
export enum lightingManage {
// 主页 ========================================================
// 获得分区与线路
getArea = '/carbon-smart/IlluminationInfo/region',
// 修改线路的可用/禁用状态
setDisable = '/carbon-smart/IlluminationInfo/revisePanel',
setDisable = '/carbon-smart/IlluminationInfo/changePanelStatus',
// 获得设备 - 小灯泡
getBulbs = '/carbon-smart/IlluminationInfo/getLightState',
// 控制面板tab页 ================================================

9
hx-ai-intelligent/src/store/item.ts

@ -3,7 +3,14 @@ import { defineStore } from 'pinia';
export const items = defineStore({
id: 'items',
state() {
return { list: [], count: 10 };
return {
list: [],
count: 10,
// 当前项目ID
projectId: 'HLlmTZp8',
// 站点ID
siteId: undefined,
};
},
getters: {
double: (state: any) => state.count * 2,

BIN
hx-ai-intelligent/src/view/equipmentControl/image/liftState/lift/lift1.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.8 KiB

BIN
hx-ai-intelligent/src/view/equipmentControl/image/liftState/lift/lift2.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.5 KiB

BIN
hx-ai-intelligent/src/view/equipmentControl/image/liftState/lift/line.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.1 KiB

28
hx-ai-intelligent/src/view/equipmentControl/liftSystem/index.vue

@ -1,7 +1,7 @@
<template>
<div class="map-box">
<div class="map">
<liftInfo />
<liftInfo v-for="(item, index) in liftBox" :key="index" :liftInfo="item" />
</div>
</div>
</template>
@ -16,14 +16,30 @@
onMounted(() => {});
// tab ========================================================
//
const dataSource = ref([]);
const liftBox = ref([
{
name: '办公区域扶梯A',
workState: 1,
faultState: 2,
direction: 1,
type: 2,
isLeft: true,
styleText: { left: '245px', bottom: '230px' },
},
{
name: '办公区域扶梯B',
workState: 0,
faultState: 3,
direction: 0,
type: 1,
isLeft: false,
styleText: { left: '700px', bottom: '360px' },
},
]);
</script>
<style lang="less" scoped>
.map-box {
//
// - - -
--on: #0dffa4;
//
@ -36,6 +52,8 @@
--fault: #ff7636;
//
--unknown: #a742ff;
//
--size: 40px;
width: 100%;
height: 100%;
.map {

283
hx-ai-intelligent/src/view/equipmentControl/liftSystem/liftInfo.vue

@ -1,49 +1,61 @@
<template>
<div class="info-box">
<div class="box-title">
<div class="dot"></div>
<span>办公区域扶梯A</span>
</div>
<div class="box-inner">
<!-- 是否开启 -->
<div class="item">
<div class="item-box">
<div class="icon">
<div class="icon-item">
<img src="../image/liftState/lift-normal.svg" alt="" />
<div class="icon-box" :style="info.styleText">
<img v-if="info.type == 1" src="../image/liftState/lift/lift1.png" alt="" />
<img v-else-if="info.type == 2" src="../image/liftState/lift/lift2.png" alt="" />
<div class="tab" :class="[info.isLeft ? 'left' : 'right']">
<div v-if="info.isLeft" class="line"></div>
<div class="info-box">
<div class="box-title">
<div class="dot"></div>
<span>{{ info.name }}</span>
</div>
<div class="box-inner">
<!-- 是否开启 -->
<div class="item">
<div class="item-box">
<div class="icon">
<div class="icon-item">
<img v-if="info.workState" src="../image/liftState/switch-on.svg" alt="" />
<img v-else src="../image/liftState/switch-off.svg" alt="" />
</div>
</div>
</div>
<div class="item-text">
<span v-if="info.workState" style="color: var(--on)">开启</span>
<span v-else style="color: var(--off)">关闭</span>
</div>
</div>
</div>
<div class="item-text">开启</div>
</div>
<!-- 是否故障 -->
<div class="item">
<div class="item-box">
<div class="icon">
<div class="icon-item">
<img src="../image/liftState/lift-normal.svg" alt="" />
<!-- 是否故障 -->
<div class="item">
<div class="item-box">
<div class="icon">
<div class="icon-item">
<img src="../image/liftState/lift-normal.svg" alt="" />
</div>
</div>
</div>
<div class="item-text">开启</div>
</div>
</div>
<div class="item-text">开启</div>
</div>
<!-- 如何运行 -->
<div class="item">
<div class="item-box">
<div class="icon">
<div class="icon-item">
<img src="../image/liftState/lift-normal.svg" alt="" />
<!-- 如何运行 -->
<div class="item">
<div class="item-box">
<div class="icon">
<div class="icon-item">
<img src="../image/liftState/lift-normal.svg" alt="" />
</div>
</div>
</div>
<div class="item-text">开启</div>
</div>
</div>
<div class="item-text">开启</div>
</div>
<div v-if="!info.isLeft" class="line1"></div>
</div>
</div>
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { ref, computed, onMounted } from 'vue';
//
@ -51,96 +63,151 @@
onMounted(() => {});
// tab ========================================================
const props = defineProps({
// >
liftInfo: {
type: Object,
default: () => {},
},
});
const info = computed(() => {
return props.liftInfo;
});
//
const runState = ref('1');
//
const liftState = ref('2');
// tab ========================================================
</script>
<style lang="less" scoped>
//
.info-box {
//
--text: rgb(20, 255, 255);
width: 240px;
height: 130px;
display: flex;
gap: 5px;
flex-direction: column;
background: rgb(17, 44, 86, 0.9);
border-radius: 8px;
box-sizing: border-box;
padding: 8px;
border: 3px solid var(--text);
//
.box-title {
height: auto;
color: var(--text);
//
.dot {
display: inline-block;
width: 2px;
height: 16px;
vertical-align: middle;
background: var(--text);
}
//
span {
padding-left: 8px;
}
.icon-box:hover {
}
.icon-box {
width: var(--size);
height: var(--size);
position: absolute;
transition: all ease 0.2s;
> img {
width: 100%;
height: 100%;
cursor: pointer;
user-select: none;
position: relative;
z-index: 9;
}
//
.box-inner {
flex: 1;
.tab {
position: absolute;
bottom: -20px;
display: flex;
padding: 0 10px;
// 3
.item {
flex: 1;
.line {
position: relative;
z-index: 1;
width: 40px;
height: 75px;
background-image: url(../image/liftState/lift/line.png);
background-size: 100% 100%;
}
.line1 {
position: relative;
z-index: 1;
width: 40px;
height: 75px;
transform: rotateY(180deg);
background-image: url(../image/liftState/lift/line.png);
background-size: 100% 100%;
}
//
.info-box {
//
--text: rgb(20, 255, 255);
width: 250px;
height: 130px;
display: flex;
gap: 5px;
flex-direction: column;
//
.item-box {
background: rgb(17, 44, 86, 0.9);
border-radius: 8px;
box-sizing: border-box;
padding: 8px;
border: 2px solid var(--text);
transform: translateY(-50%);
cursor: pointer;
//
.box-title {
height: auto;
color: var(--text);
//
.dot {
display: inline-block;
width: 2px;
height: 16px;
vertical-align: middle;
background: var(--text);
}
//
span {
padding-left: 8px;
}
}
//
.box-inner {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
// border: 1px solid red;
.icon {
width: 55px;
height: 55px;
background-image: url(../image/box.svg);
background-size: 130% 130%;
background-repeat: no-repeat;
background-position: left -8px top -8px;
// border: 1px solid red;
position: relative;
.icon-item {
position: absolute;
width: 20px;
height: 20px;
left: 0;
right: 0;
bottom: 0;
top: 0;
margin: auto;
img {
width: 100%;
height: 100%;
padding: 0 5px;
// 3
.item {
flex: 1;
display: flex;
flex-direction: column;
//
.item-box {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
// border: 1px solid red;
.icon {
width: 55px;
height: 55px;
background-image: url(../image/box.svg);
background-size: 130% 130%;
background-repeat: no-repeat;
background-position: left -8px top -8px;
// border: 1px solid red;
position: relative;
.icon-item {
position: absolute;
width: 20px;
height: 20px;
left: 0;
right: 0;
bottom: 0;
top: 0;
margin: auto;
img {
width: 100%;
height: 100%;
}
}
}
}
.item-text {
height: 20px;
text-align: center;
font-size: 12px;
color: white;
user-select: none;
}
}
}
.item-text {
height: 20px;
text-align: center;
font-size: 12px;
color: white;
user-select: none;
}
}
.info-box:hover {
border: 2px solid white;
}
}
.right {
right: calc(var(--size) / 2);
}
.left {
left: calc(var(--size) / 2);
}
}
</style>

3
hx-ai-intelligent/src/view/equipmentControl/liftSystem/liftPosition.ts

@ -0,0 +1,3 @@
// 此文件只定义lift(即电梯)的位置信息
// 与显示状态和分组信息无关
export const liftPosition = [];

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

@ -3,9 +3,13 @@
<div class="lighting-img-box">
<!-- 左上角区域切换 -->
<div class="btn-box">
<button v-for="item in floorData" class="btn-item" @click="changeFloor(item.childList)">{{
item.name
}}</button>
<button
v-for="(item, index) in floorData"
:key="index"
class="btn-item"
@click="changeFloor(item.childList, item.code)"
>{{ item.name }}</button
>
</div>
<!-- 楼层区域 -->
<div class="area">
@ -77,14 +81,20 @@
import { lightingManage } from '/@/api/IlluminationInfo';
// ICON
import { DoubleLeftOutlined, DoubleRightOutlined } from '@ant-design/icons-vue';
//
import { items } from '/@/store/item';
// =======================================================
onMounted(() => {
// 线
getAllArea();
//
getBulbs();
});
//
const state = items();
// flagref
const preload = ref(false);
@ -92,8 +102,11 @@
//
const floorData = ref([]);
//
const thisFloor = ref(1);
//
const changeFloor = (area: any) => {
const changeFloor = (area: any, floor: number) => {
thisFloor.value = floor;
//
reset();
//
@ -220,7 +233,7 @@
//
const getAllArea = () => {
http.get(lightingManage.getArea, { projectId: 'HLlmTZp8' }).then((res) => {
http.get(lightingManage.getArea, { projectId: state.projectId }).then((res) => {
const data = res.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

3
hx-ai-intelligent/src/view/equipmentControl/lightingManage/lightPosition.ts

@ -0,0 +1,3 @@
// 此文件只定义light(即俯视图小灯泡)的位置信息
// 与显示状态和分组信息无关
export const lightPosition = [];

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

@ -50,7 +50,7 @@
class="openPlan"
:class="{ enabled2: isPlanEnabled2, disabled2: !isPlanEnabled2 }"
@click="togglePlan2">
{{ isPlanEnabled2 ? '启用面板' : '禁用面板' }}
{{ isPlanEnabled2 ? '启用开关' : '禁用开关' }}
</button>
<a-switch
v-model:checked="selectAllCheckbox"
@ -248,11 +248,13 @@
import { http } from '/nerv-lib/util/http';
import { lightingManage } from '/@/api/IlluminationInfo';
import { getAllEnum } from '/@/api/index';
//
import { items } from '/@/store/item';
// =========================================================================
onMounted(() => {
//
//
setArea();
//
getEnum(['IlluminationMode', 'IlluminationScene']);
@ -267,11 +269,13 @@
controlScene.value = data.IlluminationScene;
});
};
// 1-1
// 1-1
const setArea = () => {
const data = props.treeData[0];
buttons2.value = data.childList;
};
//
const state = items();
// ===================================================================
@ -279,11 +283,12 @@
// >
treeData: {
type: Array,
default: [],
default: () => {
[];
},
},
});
//
/**
/**
* @method changeArea 用于控制俯视图的选中状态
* @method reset 用于重置按钮区
*/
@ -327,9 +332,9 @@
// id
const handleButton = ref('');
// /
// /
const isPlanEnabled2 = ref(true);
// /
// /
const togglePlan2 = () => {
//
if (handleButton.value == '') {
@ -340,7 +345,12 @@
let panel = +!btn.ctrlStatus;
isLoading.value = true;
http
.get(lightingManage.setDisable, { deviceGroup: btn.code, panel })
.get(lightingManage.setDisable, {
deviceGroup: btn.code,
panel,
projectId: state.projectId,
siteId: state.siteId,
})
.then((res) => {
if (res.msg === 'success') {
// - - - loading
@ -392,7 +402,7 @@
buttons2.value.forEach((item: any) => {
item.selected = false;
});
// -
//
resetMode();
}
emit('changeArea', arr);
@ -423,7 +433,7 @@
//
let level1 = selectedButton.value;
let level2 = button.id;
// false
// false
if (singleSelection.value) {
buttons2.value.forEach((item: any) => {
item.selected = false;
@ -486,44 +496,64 @@
let before = data.scene.value;
//
let after = button4.value;
//
if (before === after) {
return message.info('未产生实际修改');
//
} else {
thisButton2.value.scene.value = after;
//
const result = changeList.value.find((item: any, index: number) => {
item.index = index;
return item.deviceGroup == data.code;
});
//
if (result) {
//
if (after == result.before) {
changeList.value.splice(result.index, 1);
// after
} else {
result.scene = after;
// flag
delete result.index;
//
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) {
return message.info('未产生实际修改');
//
} else {
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) => {
item.index = index;
return item.deviceGroup == button.code;
});
//
if (result) {
//
if (after == result.before) {
changeList.value.splice(result.index, 1);
// after
} else {
changeList.value.push({
//
deviceGroup: data.code,
deviceGroupName: data.name,
//
region: data.pcode,
regionName: '',
//
before: before,
//
scene: after,
});
result.scene = after;
// flag
delete result.index;
}
console.log(changeList.value, 'changeList');
//
} else {
changeList.value.push({
//
deviceGroup: button.code,
deviceGroupName: button.name,
//
region: button.pcode,
regionName: '',
//
before: before,
//
scene: after,
});
}
thisButton2.value.scene.value = after;
};
@ -559,7 +589,11 @@
}
buttonLoading.value = true;
http
.post(lightingManage.getChangeList, { infoList: changeList.value, projectId: 'HLlmTZp8' })
.post(lightingManage.getChangeList, {
infoList: changeList.value,
projectId: state.projectId,
siteId: state.siteId,
})
.then((res) => {
if (res.msg === 'success') {
diffList.value = res.data;

Loading…
Cancel
Save