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

add:电梯系统新增

Browse Source
This commit is contained in:
chenpingsen
2024-07-30 14:35:40 +08:00
parent b55304ef7f
commit 1cf99afbc3
6 changed files with 203 additions and 115 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
hx-ai-intelligent/src/view/equipmentControl/image/liftState/lift/lift1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.8 KiB

BIN
hx-ai-intelligent/src/view/equipmentControl/image/liftState/lift/lift2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.5 KiB

BIN
hx-ai-intelligent/src/view/equipmentControl/image/liftState/lift/line.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.1 KiB

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

@@ -1,7 +1,7 @@
<template> <template>
<div class="map-box"> <div class="map-box">
<div class="map"> <div class="map">
<liftInfo /> <liftInfo v-for="(item, index) in liftBox" :key="index" :liftInfo="item" />
</div> </div>
</div> </div>
</template> </template>
@@ -16,14 +16,30 @@
onMounted(() => {}); onMounted(() => {});
// tab页部分 ======================================================== // tab页部分 ========================================================
const liftBox = ref([
// 表格数据 {
const dataSource = 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> </script>
<style lang="less" scoped> <style lang="less" scoped>
.map-box { .map-box {
// 颜色变量，用于区别颜色 // 颜色变量，用于区别颜色
// 正常 - 开启 - 上行 -下行 // 正常 - 开启 - 上行 -下行
--on: #0dffa4; --on: #0dffa4;
// 关闭 // 关闭
@@ -36,6 +52,8 @@
--fault: #ff7636; --fault: #ff7636;
// 未知 // 未知
--unknown: #a742ff; --unknown: #a742ff;
// 触发图标大小
--size: 40px;
width: 100%; width: 100%;
height: 100%; height: 100%;
.map { .map {

287
hx-ai-intelligent/src/view/equipmentControl/liftSystem/liftInfo.vue
View File

@@ -1,49 +1,61 @@
<template> <template>
<div class="info-box"> <div class="icon-box" :style="info.styleText">
<div class="box-title"> <img v-if="info.type == 1" src="../image/liftState/lift/lift1.png" alt="" />
<div class="dot"></div> <img v-else-if="info.type == 2" src="../image/liftState/lift/lift2.png" alt="" />
<span>办公区域扶梯A</span> <div class="tab" :class="[info.isLeft ? 'left' : 'right']">
</div> <div v-if="info.isLeft" class="line"></div>
<div class="box-inner"> <div class="info-box">
<!-- 是否开启 --> <div class="box-title">
<div class="item"> <div class="dot"></div>
<div class="item-box"> <span>{{ info.name }}</span>
<div class="icon"> </div>
<div class="icon-item"> <div class="box-inner">
<img src="../image/liftState/lift-normal.svg" alt="" /> <!-- 是否开启 -->
<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>
</div> <!-- 是否故障 -->
<div class="item-text">开启</div> <div class="item">
</div> <div class="item-box">
<!-- 是否故障 --> <div class="icon">
<div class="item"> <div class="icon-item">
<div class="item-box"> <img src="../image/liftState/lift-normal.svg" alt="" />
<div class="icon"> </div>
<div class="icon-item"> </div>
<img src="../image/liftState/lift-normal.svg" alt="" />
</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>
</div>
</div>
<div class="item-text">开启</div>
</div> </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>
</div>
</div>
<div class="item-text">开启</div>
</div> </div>
<div v-if="!info.isLeft" class="line1"></div>
</div> </div>
</div> </div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { ref, onMounted } from 'vue'; import { ref, computed, onMounted } from 'vue';
// 请求 // 请求
@@ -51,96 +63,151 @@
onMounted(() => {}); onMounted(() => {});
// tab页部分 ======================================================== const props = defineProps({
// 分区结构（照明区域 > 照明回路）
liftInfo: {
type: Object,
default: () => {},
},
});
// 运行状态 const info = computed(() => {
const runState = ref('1'); return props.liftInfo;
// 电梯状态 });
const liftState = ref('2');
// tab页部分 ========================================================
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
// 面板 .icon-box:hover {
.info-box { }
// 字体颜色变量 .icon-box {
--text: rgb(20, 255, 255); width: var(--size);
height: var(--size);
width: 240px; position: absolute;
height: 130px; transition: all ease 0.2s;
display: flex; > img {
gap: 5px; width: 100%;
flex-direction: column; height: 100%;
background: rgb(17, 44, 86, 0.9); cursor: pointer;
border-radius: 8px; user-select: none;
box-sizing: border-box; position: relative;
padding: 8px; z-index: 9;
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;
}
} }
// 下半部分 .tab {
.box-inner { position: absolute;
flex: 1; bottom: -20px;
display: flex; display: flex;
padding: 0 10px; .line {
// 单个盒子（3盒子） position: relative;
.item { z-index: 1;
flex: 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; display: flex;
gap: 5px;
flex-direction: column; flex-direction: column;
// 盒子中放置图片的容器 background: rgb(17, 44, 86, 0.9);
.item-box { 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; flex: 1;
display: flex; display: flex;
align-items: center; padding: 0 5px;
justify-content: center; // 单个盒子（3盒子）
// border: 1px solid red; .item {
.icon { flex: 1;
width: 55px; display: flex;
height: 55px; flex-direction: column;
background-image: url(../image/box.svg); // 盒子中放置图片的容器
background-size: 130% 130%; .item-box {
background-repeat: no-repeat; flex: 1;
background-position: left -8px top -8px; display: flex;
// border: 1px solid red; align-items: center;
position: relative; justify-content: center;
.icon-item { // border: 1px solid red;
position: absolute; .icon {
width: 20px; width: 55px;
height: 20px; height: 55px;
left: 0; background-image: url(../image/box.svg);
right: 0; background-size: 130% 130%;
bottom: 0; background-repeat: no-repeat;
top: 0; background-position: left -8px top -8px;
margin: auto; // border: 1px solid red;
img { position: relative;
width: 100%; .icon-item {
height: 100%; 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> </style>

3
hx-ai-intelligent/src/view/equipmentControl/liftSystem/liftPosition.ts Normal file
View File

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