|
@ -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> |
|
|
</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> |
|
|
</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(() => { |
|
|
|
|
|
return props.liftInfo; |
|
|
|
|
|
}); |
|
|
|
|
|
|
|
|
// 运行状态 |
|
|
// tab页部分 ======================================================== |
|
|
const runState = ref('1'); |
|
|
|
|
|
// 电梯状态 |
|
|
|
|
|
const liftState = ref('2'); |
|
|
|
|
|
</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> |
|
|