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> |
||||