chenpingsen
4 months ago
|
After Width: | Height: | Size: 3.6 KiB |
|
After Width: | Height: | Size: 1.4 KiB |
|
After Width: | Height: | Size: 1.4 KiB |
|
After Width: | Height: | Size: 1.4 KiB |
|
After Width: | Height: | Size: 4.6 KiB |
|
After Width: | Height: | Size: 4.6 KiB |
|
After Width: | Height: | Size: 1.4 KiB |
|
After Width: | Height: | Size: 4.6 KiB |
@ -0,0 +1,53 @@ |
|||
<template> |
|||
<div class="map-box"> |
|||
<div class="map"> |
|||
<liftInfo></liftInfo> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script setup lang="ts"> |
|||
import { ref, onMounted } from 'vue'; |
|||
import liftInfo from './liftInfo.vue' |
|||
// 请求 |
|||
import { message } from 'ant-design-vue'; |
|||
|
|||
// 初始化 =========================================================== |
|||
|
|||
onMounted(() => { |
|||
|
|||
}) |
|||
|
|||
// tab页部分 ======================================================== |
|||
|
|||
// 表格数据 |
|||
const dataSource = ref([]); |
|||
|
|||
|
|||
</script> |
|||
<style lang="less" scoped> |
|||
.map-box { |
|||
// 颜色变量，用于区别颜色 |
|||
|
|||
// 正常 - 开启 - 上行 -下行 |
|||
--on: #0DFFA4; |
|||
// 关闭 |
|||
--off: #BFCDE2; |
|||
// 暂停 - 维修 |
|||
--pause: #FFBC46; |
|||
// 告警 - 急停 |
|||
--stop: #F36163; |
|||
// 故障 |
|||
--fault: #FF7636; |
|||
// 未知 |
|||
--unknown: #A742FF; |
|||
width: 100%; |
|||
height: 100%; |
|||
.map { |
|||
width: 1280px; |
|||
height: 720px; |
|||
background-image: url(../image/bg.jpg); |
|||
} |
|||
} |
|||
|
|||
</style> |
|||
@ -0,0 +1,151 @@ |
|||
<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> |
|||
</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 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> |
|||
</template> |
|||
|
|||
<script setup lang="ts"> |
|||
import { ref, onMounted } from 'vue'; |
|||
|
|||
// 请求 |
|||
|
|||
// 初始化 =========================================================== |
|||
|
|||
onMounted(() => { |
|||
|
|||
}) |
|||
|
|||
// tab页部分 ======================================================== |
|||
|
|||
// 运行状态 |
|||
const runState = ref('1'); |
|||
// 电梯状态 |
|||
const liftState = ref('2'); |
|||
|
|||
|
|||
</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; |
|||
} |
|||
} |
|||
// 下半部分 |
|||
.box-inner { |
|||
flex: 1; |
|||
display: flex; |
|||
padding: 0 10px; |
|||
// 单个盒子（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; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
</style> |
|||