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

fix:电梯系统/照明系统 代码规范

Browse Source
This commit is contained in:
chenpingsen
2024-07-25 14:14:55 +08:00
parent 261ad9017d
commit a9e6998430
7 changed files with 1229 additions and 1223 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,53 +1,47 @@
<template>
<div class="map-box">
<div class="map">
<liftInfo></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';
import { ref, onMounted } from 'vue';
import liftInfo from './liftInfo.vue';
// 请求
// 初始化 ===========================================================
// 初始化 ===========================================================
onMounted(() => {
})
// tab页部分 ========================================================
// 表格数据
const dataSource = ref([]);
onMounted(() => {});
// tab页部分 ========================================================
// 表格数据
const dataSource = ref([]);
</script>
<style lang="less" scoped>
.map-box {
// 颜色变量，用于区别颜色
.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);
// 正常 - 开启 - 上行 -下行
--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>

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

@@ -10,7 +10,7 @@
<div class="item-box">
<div class="icon">
<div class="icon-item">
<img src="../image/liftState/lift-normal.svg" alt="">
<img src="../image/liftState/lift-normal.svg" alt="" />
</div>
</div>
</div>
@@ -21,7 +21,7 @@
<div class="item-box">
<div class="icon">
<div class="icon-item">
<img src="../image/liftState/lift-normal.svg" alt="">
<img src="../image/liftState/lift-normal.svg" alt="" />
</div>
</div>
</div>
@@ -32,7 +32,7 @@
<div class="item-box">
<div class="icon">
<div class="icon-item">
<img src="../image/liftState/lift-normal.svg" alt="">
<img src="../image/liftState/lift-normal.svg" alt="" />
</div>
</div>
</div>
@@ -43,109 +43,104 @@
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { ref, onMounted } from 'vue';
// 请求
// 请求
// 初始化 ===========================================================
// 初始化 ===========================================================
onMounted(() => {
})
// tab页部分 ========================================================
// 运行状态
const runState = ref('1');
// 电梯状态
const liftState = ref('2');
onMounted(() => {});
// tab页部分 ========================================================
// 运行状态
const runState = ref('1');
// 电梯状态
const liftState = ref('2');
</script>
<style lang="less" scoped>
// 面板
.info-box {
// 字体颜色变量
--text: rgb(20, 255, 255);
// 面板
.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;
width: 240px;
height: 130px;
display: flex;
padding: 0 10px;
// 单个盒子（3盒子）
.item {
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;
flex-direction: column;
// 盒子中放置图片的容器
.item-box {
padding: 0 10px;
// 单个盒子（3盒子）
.item {
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;
flex-direction: column;
// 盒子中放置图片的容器
.item-box {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
// 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%;
.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;
}
}
}
}
}
</style>