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-08-21 14:46:06 +08:00
parent 6cb09f631b
commit 7153a81c63
17 changed files with 396 additions and 193 deletions
Download Patch File Download Diff File Expand all files Collapse all files

158
hx-ai-intelligent/src/view/equipmentControl/airConditionControlSystem/device.vue Normal file
View File

@@ -0,0 +1,158 @@
<template>
<a-popover color="rgba(0, 0, 0, 0.8)">
<template #content>
<div class="light-tag">
<div class="light-tag-tit">
<div>
<img src="/asset/image//bulbLogo/21962.png" alt="" />
<span class="tag-text">{{
device.regionName + ' > ' + device.deviceGroupName
}}</span></div
>
<button class="right-button">{{
record?.runStatus?.label ? record.runStatus.label : '--'
}}</button>
</div>
<div class="light-tag-box">
<div class="tag-box-item">
<img src="/asset/image//bulbLogo/22496.png" alt="" />
<span class="title">控制模式</span>
<span class="result">{{ record.autoStatus.label }}</span>
</div>
<div class="tag-box-item">
<img src="/asset/image//bulbLogo/22496.png" alt="" />
<span class="title">温度</span>
<span class="result">{{ record.temp + record.tempUnit }}</span>
</div>
<div class="tag-box-item">
<img src="/asset/image//bulbLogo/22496.png" alt="" />
<span class="title">控制场景</span>
<span class="result">{{ device.scene.label }}</span>
</div>
<div class="tag-box-item">
<img src="/asset/image//bulbLogo/22496.png" alt="" />
<span class="title">风速</span>
<span class="result">{{ record.windSpeed + record.windSpeedUnit }}</span>
</div>
</div>
</div>
</template>
<div class="icon-box" :style="props.device.styleText">
<!-- 正常=0 -->
<img
v-if="record?.runStatus?.value == 0"
class="icon-item"
src="/asset/image/bulbLogo/on1.png"
alt="" />
<!-- 故障=1 -->
<img
v-if="record?.runStatus?.value == 1"
class="icon-item"
src="/asset/image/bulbLogo/off1.png"
alt="" />
<!-- 维修=2 -->
<img
v-if="record?.runStatus?.value == 2"
class="icon-item"
src="/asset/image/bulbLogo/repair1.png"
alt="" />
<!-- 警告=3 -->
<img
v-if="record?.runStatus?.value == 3"
class="icon-item"
src="/asset/image/bulbLogo/alarm1.png"
alt="" />
</div>
</a-popover>
</template>
<script setup lang="ts">
import { computed } from 'vue';
const props = defineProps({
device: Object,
});
// 设备对象
const device = computed(() => props.device);
// 设备信息
const record = computed(() => props.device.record);
</script>
<style lang="less" scoped>
.icon-box {
width: 35px;
position: absolute;
.icon-item {
width: 35px;
cursor: pointer;
transition: all ease 0.1s;
}
.icon-item:active {
transform: scale(1.2);
}
}
// 悬浮窗外部
.light-tag {
display: flex;
flex-direction: column;
gap: 10px;
// 悬浮窗标题
.light-tag-tit {
display: flex;
justify-content: space-between;
vertical-align: middle;
height: 30px;
.tag-text {
font-size: 16px;
font-weight: 700;
color: white;
padding-left: 10px;
}
.right-button {
width: 5em;
height: 26px;
background: rgba(57, 215, 187, 0.1);
border: 1px solid rgba(57, 215, 187, 1);
font-size: 12px;
color: rgba(57, 215, 187, 1);
}
}
}
// 悬浮窗底部4格子
.light-tag-box {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
grid-gap: 10px;
.tag-box-item {
position: relative;
display: flex;
justify-content: space-between;
img {
width: 120px;
vertical-align: middle;
}
.title {
position: absolute;
left: 60px;
top: 13px;
color: rgba(64, 255, 252, 1);
}
.result {
line-height: 50px;
font-size: 14px;
font-weight: 700;
color: white;
}
}
}
</style>