Browse Source

fix:空调、照明系统背景图&点阵修改 样式补充 图像素材补充 通风系统增加电动窗效果

temp
chenpingsen 3 weeks ago
parent
commit
378baaefe2
  1. BIN
      hx-ai-intelligent/public/asset/image/bulbLogo/device2.png
  2. 41
      hx-ai-intelligent/src/view/equipmentControl/airConditionControlSystem/device.vue
  3. 8
      hx-ai-intelligent/src/view/equipmentControl/airConditionControlSystem/devicePosition.ts
  4. 43
      hx-ai-intelligent/src/view/equipmentControl/airConditionControlSystem/index.less
  5. BIN
      hx-ai-intelligent/src/view/equipmentControl/image/floor-1-1.png
  6. BIN
      hx-ai-intelligent/src/view/equipmentControl/image/floor-2-1.png
  7. 2
      hx-ai-intelligent/src/view/equipmentControl/image/liftState/wind-hot.svg
  8. BIN
      hx-ai-intelligent/src/view/equipmentControl/image/ventilationSystem/ventilationSystemBg1.png
  9. 2
      hx-ai-intelligent/src/view/equipmentControl/liftSystem/index.vue
  10. 54
      hx-ai-intelligent/src/view/equipmentControl/lightingManage/index.less
  11. 35
      hx-ai-intelligent/src/view/equipmentControl/lightingManage/light.vue
  12. 90
      hx-ai-intelligent/src/view/equipmentControl/lightingManage/lightPosition.ts
  13. 6
      hx-ai-intelligent/src/view/equipmentControl/ventilationSystem/components/fanControl.vue
  14. 5
      hx-ai-intelligent/src/view/equipmentControl/ventilationSystem/components/tabs1.less
  15. 12
      hx-ai-intelligent/src/view/equipmentControl/ventilationSystem/index.vue

BIN
hx-ai-intelligent/public/asset/image/bulbLogo/device2.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 802 B

41
hx-ai-intelligent/src/view/equipmentControl/airConditionControlSystem/device.vue

@ -4,14 +4,12 @@
<div class="light-tag"> <div class="light-tag">
<div class="light-tag-tit"> <div class="light-tag-tit">
<div> <div>
<img src="/asset/image//bulbLogo/21962.png" alt="" /> <img src="/asset/image//bulbLogo/device2.png" alt="" />
<span class="tag-text">{{ <span class="tag-text">{{
device.regionName + ' > ' + device.deviceGroupName device.regionName + ' > ' + device.deviceGroupName
}}</span></div }}</span></div
> >
<button class="right-button" :class="getClass(record)">{{ <button class="right-button" :class="getClass(record)">{{ getLabel(record) }}</button>
record.runStatus.value != 0 ? record.runStatus.label : record.switchStatus.label
}}</button>
</div> </div>
<div class="light-tag-box"> <div class="light-tag-box">
<div class="tag-box-item"> <div class="tag-box-item">
@ -21,7 +19,7 @@
</div> </div>
<div class="tag-box-item"> <div class="tag-box-item">
<img src="/asset/image//bulbLogo/22496.png" alt="" /> <img src="/asset/image//bulbLogo/22496.png" alt="" />
<span class="title-text">温度</span> <span class="title-text">&nbsp;</span>
<span class="result">{{ record.temp + record.tempUnit }}</span> <span class="result">{{ record.temp + record.tempUnit }}</span>
</div> </div>
<div class="tag-box-item"> <div class="tag-box-item">
@ -31,7 +29,7 @@
</div> </div>
<div class="tag-box-item"> <div class="tag-box-item">
<img src="/asset/image//bulbLogo/22496.png" alt="" /> <img src="/asset/image//bulbLogo/22496.png" alt="" />
<span class="title-text">风速</span> <span class="title-text">&nbsp;</span>
<span class="result">{{ record.windSpeed + record.windSpeedUnit }}</span> <span class="result">{{ record.windSpeed + record.windSpeedUnit }}</span>
</div> </div>
</div> </div>
@ -56,7 +54,7 @@
class="icon-item" class="icon-item"
src="/asset/image/bulbLogo/repair1.png" src="/asset/image/bulbLogo/repair1.png"
alt="" /> alt="" />
<!-- =3 --> <!-- =3 -->
<img <img
v-if="record?.runStatus?.value == 3" v-if="record?.runStatus?.value == 3"
class="icon-item" class="icon-item"
@ -92,6 +90,22 @@
return 'button-off'; return 'button-off';
} }
}; };
const getLabel = (record: any) => {
console.log(record);
let runState = record.runStatus.value;
let switchState = record.switchStatus.value;
if (runState == 3) {
return '告警';
} else if (runState == 2) {
return '维修';
} else if (runState == 1) {
return '故障';
} else if (runState == 0 && switchState == 1) {
return '开启';
} else if (runState == 0 && switchState == 0) {
return '关闭';
}
};
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.icon-box { .icon-box {
@ -119,14 +133,16 @@
.light-tag-tit { .light-tag-tit {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
vertical-align: middle;
height: 30px; height: 30px;
img {
width: 22px;
}
.tag-text { .tag-text {
font-size: 16px; font-size: 16px;
font-weight: 700; font-weight: 700;
color: white; color: white;
padding-left: 10px; padding-left: 10px;
vertical-align: middle;
} }
.right-button { .right-button {
@ -170,7 +186,7 @@
.tag-box-item { .tag-box-item {
position: relative; position: relative;
display: flex; display: flex;
justify-content: space-between; // justify-content: space-between;
img { img {
width: 120px; width: 120px;
@ -179,8 +195,8 @@
.title-text { .title-text {
position: absolute; position: absolute;
left: 53px; left: 55px;
top: 13px; top: 15px;
color: rgba(64, 255, 252, 1); color: rgba(64, 255, 252, 1);
} }
@ -189,6 +205,7 @@
font-size: 14px; font-size: 14px;
font-weight: 700; font-weight: 700;
color: white; color: white;
text-align: left;
} }
} }
} }

8
hx-ai-intelligent/src/view/equipmentControl/airConditionControlSystem/devicePosition.ts

@ -1,10 +1,10 @@
// 此文件只定义device(即空调小图标)的位置 // 此文件只定义device(即空调小图标)的位置
// 与显示状态和分组信息无关 // 与显示状态和分组信息无关
export const devicePosition = [ export const devicePosition = [
{ left: '200px', bottom: '290px' }, { left: '245px', top: '460px' },
{ left: '320px', bottom: '320px' }, { left: '395px', top: '420px' },
{ left: '260px', bottom: '190px' }, { left: '310px', top: '580px' },
{ left: '390px', bottom: '230px' }, { left: '480px', top: '530px' },
]; ];
export const devicePosition1 = []; export const devicePosition1 = [];

43
hx-ai-intelligent/src/view/equipmentControl/airConditionControlSystem/index.less

@ -3,14 +3,17 @@
position: relative; position: relative;
width: 100%; width: 100%;
height: 100%; height: 100%;
// background: linear-gradient(#badaff, #8cabeb, #7095de); overflow-y: scroll;
background: #8eabec;
// 照明设备功能总容器 // 照明设备功能总容器
.lighting-img-box { .lighting-img-box {
position: relative; position: relative;
width: 1280px; width: 1536px;
height: 720px; height: 864px;
// width: 1280px;
// height: 720px;
user-select: none; user-select: none;
background-image: url(../image/floor-1.png); background-image: url(../image/floor-1-1.png);
background-size: 100% 100%; background-size: 100% 100%;
background-repeat: no-repeat; background-repeat: no-repeat;
background-color: linear-gradient(top to bottom,#c0deff, #8eadf0); background-color: linear-gradient(top to bottom,#c0deff, #8eadf0);
@ -48,15 +51,15 @@
// 大区分区 // 大区分区
.area{ .area{
position: absolute; position: absolute;
bottom: 210px; top: 300px;
left: 250px; left: 290px;
width: 700px; width: 900px;
height: 270px; height: 280px;
transform: rotateX(73deg) rotateZ(340deg) skew(31deg); transform: rotateX(73deg) rotateZ(341deg) skew(31deg);
display: flex; display: flex;
gap: 5px; gap: 5px;
.area1 { .area1 {
width: 200px; width: 250px;
background: rgba(0, 251, 91, 0.3); background: rgba(0, 251, 91, 0.3);
border: 2px solid rgb(0, 251, 91); border: 2px solid rgb(0, 251, 91);
display: grid; display: grid;
@ -75,24 +78,6 @@
border: 2px solid rgb(255, 0, 0); border: 2px solid rgb(255, 0, 0);
display: flex; display: flex;
} }
.area4 {
width: 70px;
background: rgba(80, 236, 244, 0.3);
border: 2px solid rgb(80, 236, 244);
display: flex;
}
.area5 {
flex: 210px;
background: rgba(0, 251, 91, 0.3);
border: 2px solid rgb(0, 251, 91);
display: flex;
}
.area6 {
flex: 1;
background: rgba(255, 165, 0, 0.3);
border: 2px solid rgb(255, 165, 0);
display: flex;
}
.area-item:hover { .area-item:hover {
transform: scale(1.05); transform: scale(1.05);
} }
@ -123,7 +108,7 @@
width: 1280px; width: 1280px;
height: 720px; height: 720px;
user-select: none; user-select: none;
background-image: url(../image/floor-2.png); background-image: url(../image/floor-2-1.png);
background-size: 100% 100%; background-size: 100% 100%;
background-repeat: no-repeat; background-repeat: no-repeat;
background-color: linear-gradient(top to bottom,#c0deff, #8eadf0); background-color: linear-gradient(top to bottom,#c0deff, #8eadf0);

BIN
hx-ai-intelligent/src/view/equipmentControl/image/floor-1-1.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.5 MiB

BIN
hx-ai-intelligent/src/view/equipmentControl/image/floor-2-1.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.0 MiB

2
hx-ai-intelligent/src/view/equipmentControl/image/liftState/wind-hot.svg

@ -1,5 +1,5 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16.35638427734375" height="14.547119140625" viewBox="0 0 16.35638427734375 14.547119140625" fill="none"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16.35638427734375" height="14.547119140625" viewBox="0 0 16.35638427734375 14.547119140625" fill="none">
<path d="M12.6691 13.2533L12.1257 14.1938C11.9846 14.4383 11.672 14.522 11.4275 14.3809C11.183 14.2397 11.0993 13.9271 11.2404 13.6827L11.6994 12.8878L10.6976 12.8878C10.4153 12.8878 10.1865 12.659 10.1865 12.3767C10.1865 12.0944 10.4153 11.8656 10.6976 11.8656L11.8681 11.8656L11.2404 10.7789C11.0993 10.5344 11.183 10.2218 11.4275 10.0807C11.672 9.93953 11.9846 10.0233 12.1257 10.2678L12.6691 11.2083L13.2119 10.2678C13.353 10.0233 13.6656 9.93953 13.9101 10.0807C14.1546 10.2218 14.2383 10.5344 14.0972 10.7789L13.47 11.8656L14.6405 11.8656C14.9228 11.8656 15.1517 12.0944 15.1517 12.3767C15.1517 12.659 14.9228 12.8878 14.6405 12.8878L13.6387 12.8878L14.0972 13.6827C14.2384 13.9271 14.1546 14.2397 13.9101 14.3809C13.6656 14.522 13.353 14.4383 13.2119 14.1938L12.6691 13.2533ZM0.511139 1.52588e-05L15.8453 1.52588e-05C16.1276 1.52588e-05 16.3564 0.228851 16.3564 0.511139L16.3564 7.15594C16.3564 8.00282 15.6699 8.68936 14.823 8.68936L1.53341 8.68936C0.686531 8.68936 0 8.00282 0 7.15594L0 0.511139C0 0.228851 0.228844 0 0.511131 0L0.511139 1.52588e-05ZM2.04456 6.13367C1.76225 6.13367 1.53341 6.36252 1.53341 6.64481C1.53341 6.92709 1.76225 7.15594 2.04456 7.15594L14.3119 7.15594C14.5942 7.15594 14.823 6.92709 14.823 6.64481C14.823 6.36252 14.5942 6.13367 14.3119 6.13367L2.04456 6.13367ZM4.65442 10.0761C4.73544 9.80563 5.02035 9.65208 5.29079 9.73311C5.56123 9.81412 5.71478 10.099 5.63376 10.3695L5.43952 11.0171C5.35449 11.301 5.39153 11.6075 5.54175 11.863C5.83617 12.3634 5.90977 12.963 5.7457 13.5196L5.55044 14.1805C5.4706 14.4513 5.18634 14.606 4.91559 14.5261C4.64484 14.4462 4.49013 14.1619 4.57002 13.8912L4.76482 13.2303C4.84916 12.9451 4.81133 12.6374 4.66055 12.3818C4.36599 11.8811 4.29338 11.2802 4.46018 10.7237L4.65442 10.0761ZM7.72125 10.0761C7.80227 9.80563 8.08718 9.65208 8.35762 9.73311C8.62806 9.81412 8.7816 10.099 8.7006 10.3695L8.50636 11.0171C8.42132 11.301 8.45836 11.6075 8.60859 11.863C8.903 12.3634 8.9766 12.963 8.81253 13.5196L8.61728 14.1805C8.53743 14.4513 8.25317 14.606 7.98243 14.5261C7.71167 14.4462 7.55696 14.1619 7.63685 13.8912L7.83165 13.2303C7.916 12.9451 7.87817 12.6374 7.72738 12.3818C7.43282 11.8811 7.36021 11.2802 7.52702 10.7237L7.72125 10.0761ZM1.5876 10.0761C1.66862 9.80563 1.95353 9.65208 2.22397 9.73311C2.49441 9.81412 2.64796 10.099 2.56694 10.3695L2.3727 11.0171C2.28767 11.301 2.32471 11.6075 2.47494 11.863C2.76935 12.3634 2.84296 12.963 2.67888 13.5196L2.48363 14.1805C2.40379 14.4513 2.11952 14.606 1.84877 14.5261C1.57803 14.4462 1.42331 14.1619 1.50321 13.8912L1.69801 13.2303C1.78234 12.9451 1.74452 12.6374 1.59373 12.3818C1.29917 11.8811 1.22656 11.2802 1.39336 10.7237L1.5876 10.0761Z" fill="url(#linear_fill_160_5944)" > <path d="M12.6691 13.2533L12.1257 14.1938C11.9846 14.4383 11.672 14.522 11.4275 14.3809C11.183 14.2397 11.0993 13.9271 11.2404 13.6827L11.6994 12.8878L10.6976 12.8878C10.4153 12.8878 10.1865 12.659 10.1865 12.3767C10.1865 12.0944 10.4153 11.8656 10.6976 11.8656L11.8681 11.8656L11.2404 10.7789C11.0993 10.5344 11.183 10.2218 11.4275 10.0807C11.672 9.93953 11.9846 10.0233 12.1257 10.2678L12.6691 11.2083L13.2119 10.2678C13.353 10.0233 13.6656 9.93953 13.9101 10.0807C14.1546 10.2218 14.2383 10.5344 14.0972 10.7789L13.47 11.8656L14.6405 11.8656C14.9228 11.8656 15.1517 12.0944 15.1517 12.3767C15.1517 12.659 14.9228 12.8878 14.6405 12.8878L13.6387 12.8878L14.0972 13.6827C14.2384 13.9271 14.1546 14.2397 13.9101 14.3809C13.6656 14.522 13.353 14.4383 13.2119 14.1938L12.6691 13.2533ZM0.511139 1.52588e-05L15.8453 1.52588e-05C16.1276 1.52588e-05 16.3564 0.228851 16.3564 0.511139L16.3564 7.15594C16.3564 8.00282 15.6699 8.68936 14.823 8.68936L1.53341 8.68936C0.686531 8.68936 0 8.00282 0 7.15594L0 0.511139C0 0.228851 0.228844 0 0.511131 0L0.511139 1.52588e-05ZM2.04456 6.13367C1.76225 6.13367 1.53341 6.36252 1.53341 6.64481C1.53341 6.92709 1.76225 7.15594 2.04456 7.15594L14.3119 7.15594C14.5942 7.15594 14.823 6.92709 14.823 6.64481C14.823 6.36252 14.5942 6.13367 14.3119 6.13367L2.04456 6.13367ZM4.65442 10.0761C4.73544 9.80563 5.02035 9.65208 5.29079 9.73311C5.56123 9.81412 5.71478 10.099 5.63376 10.3695L5.43952 11.0171C5.35449 11.301 5.39153 11.6075 5.54175 11.863C5.83617 12.3634 5.90977 12.963 5.7457 13.5196L5.55044 14.1805C5.4706 14.4513 5.18634 14.606 4.91559 14.5261C4.64484 14.4462 4.49013 14.1619 4.57002 13.8912L4.76482 13.2303C4.84916 12.9451 4.81133 12.6374 4.66055 12.3818C4.36599 11.8811 4.29338 11.2802 4.46018 10.7237L4.65442 10.0761ZM7.72125 10.0761C7.80227 9.80563 8.08718 9.65208 8.35762 9.73311C8.62806 9.81412 8.7816 10.099 8.7006 10.3695L8.50636 11.0171C8.42132 11.301 8.45836 11.6075 8.60859 11.863C8.903 12.3634 8.9766 12.963 8.81253 13.5196L8.61728 14.1805C8.53743 14.4513 8.25317 14.606 7.98243 14.5261C7.71167 14.4462 7.55696 14.1619 7.63685 13.8912L7.83165 13.2303C7.916 12.9451 7.87817 12.6374 7.72738 12.3818C7.43282 11.8811 7.36021 11.2802 7.52702 10.7237L7.72125 10.0761ZM1.5876 10.0761C1.66862 9.80563 1.95353 9.65208 2.22397 9.73311C2.49441 9.81412 2.64796 10.099 2.56694 10.3695L2.3727 11.0171C2.28767 11.301 2.32471 11.6075 2.47494 11.863C2.76935 12.3634 2.84296 12.963 2.67888 13.5196L2.48363 14.1805C2.40379 14.4513 2.11952 14.606 1.84877 14.5261C1.57803 14.4462 1.42331 14.1619 1.50321 13.8912L1.69801 13.2303C1.78234 12.9451 1.74452 12.6374 1.59373 12.3818C1.29917 11.8811 1.22656 11.2802 1.39336 10.7237L1.5876 10.0761Z" fill="#fcf770" >
</path> </path>
<defs> <defs>
<linearGradient id="linear_fill_160_5944" x1="8.178192138671875" y1="0" x2="8.178192138671875" y2="14.547119140625" gradientUnits="userSpaceOnUse"> <linearGradient id="linear_fill_160_5944" x1="8.178192138671875" y1="0" x2="8.178192138671875" y2="14.547119140625" gradientUnits="userSpaceOnUse">

Before

Width:  |  Height:  |  Size: 3.2 KiB

After

Width:  |  Height:  |  Size: 3.1 KiB

BIN
hx-ai-intelligent/src/view/equipmentControl/image/ventilationSystem/ventilationSystemBg1.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.6 MiB

2
hx-ai-intelligent/src/view/equipmentControl/liftSystem/index.vue

@ -132,7 +132,7 @@
height: 100%; height: 100%;
position: relative; position: relative;
border-radius: 4px; border-radius: 4px;
background-image: url(../image/bg.jpg); background-image: url(../image/floor-1-1.png);
background-size: 100% 100%; background-size: 100% 100%;
background-repeat: no-repeat; background-repeat: no-repeat;
overflow: hidden; overflow: hidden;

54
hx-ai-intelligent/src/view/equipmentControl/lightingManage/index.less

@ -3,14 +3,16 @@
position: relative; position: relative;
width: 100%; width: 100%;
height: 100%; height: 100%;
// background: linear-gradient(#badaff, #8cabeb, #7095de); overflow-y: scroll;
background: #8eabec;
// 照明设备功能总容器 // 照明设备功能总容器
.lighting-img-box { .lighting-img-box {
position: relative; position: relative;
width: 1280px; // 1536 * 864
height: 720px; width: 1536px;
height: 864px;
user-select: none; user-select: none;
background-image: url(../image/floor-1.png); background-image: url(../image/floor-1-1.png);
background-size: 100% 100%; background-size: 100% 100%;
background-repeat: no-repeat; background-repeat: no-repeat;
background-color: linear-gradient(top to bottom,#c0deff, #8eadf0); background-color: linear-gradient(top to bottom,#c0deff, #8eadf0);
@ -48,39 +50,39 @@
// 大区分区 // 大区分区
.area{ .area{
position: absolute; position: absolute;
bottom: 210px; top: 290px;
left: 250px; left: 310px;
width: 700px; width: 1000px;
height: 270px; height: 265px;
transform: rotateX(73deg) rotateZ(338deg) skew(31deg); transform: rotateX(73deg) rotateZ(341deg) skew(31deg);
display: flex; display: flex;
gap: 5px; gap: 5px;
.area1 { .area1 {
width: 65px; width: 80px;
background: rgba(0, 251, 91, 0.3); background: rgba(0, 251, 91, 0.3);
border: 2px solid rgb(0, 251, 91); border: 2px solid rgb(0, 251, 91);
display: flex; display: flex;
} }
.area2 { .area2 {
width: 100px; width: 150px;
background: rgba(255, 165, 0, 0.3); background: rgba(255, 165, 0, 0.3);
border: 2px solid rgb(255, 165, 0); border: 2px solid rgb(255, 165, 0);
display: flex; display: flex;
} }
.area3 { .area3 {
width: 220px; width: 260px;
background: rgba(255, 0, 0, 0.3); background: rgba(255, 0, 0, 0.3);
border: 2px solid rgb(255, 0, 0); border: 2px solid rgb(255, 0, 0);
display: flex; display: flex;
} }
.area4 { .area4 {
width: 70px; width: 90px;
background: rgba(80, 236, 244, 0.3); background: rgba(80, 236, 244, 0.3);
border: 2px solid rgb(80, 236, 244); border: 2px solid rgb(80, 236, 244);
display: flex; display: flex;
} }
.area5 { .area5 {
flex: 210px; width: 100px;
background: rgba(0, 251, 91, 0.3); background: rgba(0, 251, 91, 0.3);
border: 2px solid rgb(0, 251, 91); border: 2px solid rgb(0, 251, 91);
display: flex; display: flex;
@ -105,10 +107,9 @@
align-items: center; align-items: center;
box-sizing: border-box; box-sizing: border-box;
padding: 10px; padding: 10px;
// border: 2px solid red;
.shadow-box { .shadow-box {
width: 30px; width: 35px;
height: 220px; height: 240px;
border-radius: 20px; border-radius: 20px;
background: rgba(0, 0, 0, 0.2); background: rgba(0, 0, 0, 0.2);
} }
@ -118,13 +119,14 @@
} }
.lightingImgBox1 { .lightingImgBox1 {
position: relative; position: relative;
width: 1280px; width: 1536px;
height: 720px; height: 864px;
user-select: none; user-select: none;
background-image: url(../image/floor-2.png); background-image: url(../image/floor-2-1.png);
background-size: 100% 100%; background-size: 100% 100%;
background-repeat: no-repeat; background-repeat: no-repeat;
background-color: linear-gradient(top to bottom,#c0deff, #8eadf0); background-color: linear-gradient(top to bottom,#c0deff, #8eadf0);
z-index: 9;
// 由于背景是俯视图,会产生有交点的透视效果,故使用透视属性 // 由于背景是俯视图,会产生有交点的透视效果,故使用透视属性
perspective: 900px; perspective: 900px;
perspective-origin: 900px -120px; perspective-origin: 900px -120px;
@ -159,16 +161,16 @@
// 大区分区 // 大区分区
.area{ .area{
position: absolute; position: absolute;
bottom: 320px; top: 180px;
left: 240px; left: 290px;
width: 950px; width: 1150px;
height: 270px; height: 280px;
transform: rotateX(76deg) rotateZ(-22deg) skew(30deg); transform: rotateX(78deg) rotateZ(340deg) skew(32deg);
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
gap: 5px; gap: 5px;
.area1 { .area1 {
width: 170px; width: 190px;
background: rgba(0, 251, 91, 0.3); background: rgba(0, 251, 91, 0.3);
border: 2px solid rgb(0, 251, 91); border: 2px solid rgb(0, 251, 91);
display: flex; display: flex;

35
hx-ai-intelligent/src/view/equipmentControl/lightingManage/light.vue

@ -7,9 +7,7 @@
<img src="/asset/image//bulbLogo/21962.png" alt="" /> <img src="/asset/image//bulbLogo/21962.png" alt="" />
<span class="tag-text">{{ blub.regionName + ' > ' + blub.deviceGroupName }}</span></div <span class="tag-text">{{ blub.regionName + ' > ' + blub.deviceGroupName }}</span></div
> >
<button class="right-button" :class="getClass(record)">{{ <button class="right-button" :class="getClass(record)">{{ getLabel(record) }}</button>
record.runStatus.value != 0 ? record.runStatus.label : record.switchStatus.label
}}</button>
</div> </div>
<div class="light-tag-box"> <div class="light-tag-box">
<div class="tag-box-item"> <div class="tag-box-item">
@ -19,7 +17,7 @@
</div> </div>
<div class="tag-box-item"> <div class="tag-box-item">
<img src="/asset/image//bulbLogo/22496.png" alt="" /> <img src="/asset/image//bulbLogo/22496.png" alt="" />
<span class="title-text">亮度</span> <span class="title-text">&nbsp;</span>
<span class="result">{{ record.brightness + record.brightnessUnit }}</span> <span class="result">{{ record.brightness + record.brightnessUnit }}</span>
</div> </div>
<div class="tag-box-item"> <div class="tag-box-item">
@ -29,7 +27,7 @@
</div> </div>
<div class="tag-box-item"> <div class="tag-box-item">
<img src="/asset/image//bulbLogo/22496.png" alt="" /> <img src="/asset/image//bulbLogo/22496.png" alt="" />
<span class="title-text">色温</span> <span class="title-text">&nbsp;</span>
<span class="result">{{ record.LwctemC + record.LwctemCUnit }}</span> <span class="result">{{ record.LwctemC + record.LwctemCUnit }}</span>
</div> </div>
</div> </div>
@ -96,6 +94,21 @@
return 'button-off'; return 'button-off';
} }
}; };
const getLabel = (record: any) => {
let runState = record.runStatus.value;
let switchState = record.switchStatus.value;
if (runState == 3) {
return '告警';
} else if (runState == 2) {
return '维修';
} else if (runState == 1) {
return '故障';
} else if (runState == 0 && switchState == 1) {
return '开启';
} else if (runState == 0 && switchState == 0) {
return '关闭';
}
};
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.icon-box { .icon-box {
@ -123,14 +136,16 @@
.light-tag-tit { .light-tag-tit {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
vertical-align: middle;
height: 30px; height: 30px;
img {
width: 22px;
}
.tag-text { .tag-text {
font-size: 16px; font-size: 16px;
font-weight: 700; font-weight: 700;
color: white; color: white;
padding-left: 10px; padding-left: 10px;
vertical-align: middle;
} }
.right-button { .right-button {
@ -174,7 +189,7 @@
.tag-box-item { .tag-box-item {
position: relative; position: relative;
display: flex; display: flex;
justify-content: space-between; // justify-content: space-between;
img { img {
width: 120px; width: 120px;
@ -183,8 +198,8 @@
.title-text { .title-text {
position: absolute; position: absolute;
left: 53px; left: 56px;
top: 13px; top: 15px;
color: rgba(64, 255, 252, 1); color: rgba(64, 255, 252, 1);
} }

90
hx-ai-intelligent/src/view/equipmentControl/lightingManage/lightPosition.ts

@ -2,63 +2,63 @@
// 与显示状态和分组信息无关 // 与显示状态和分组信息无关
export const lightPosition = [ export const lightPosition = [
// 走廊西 // 走廊西
{ left: '160px', bottom: '270px' }, { left: '220px', top: '480px' },
{ left: '185px', bottom: '230px' }, { left: '250px', top: '540px' },
{ left: '220px', bottom: '180px' }, { left: '280px', top: '600px' },
{ left: '250px', bottom: '130px' }, { left: '310px', top: '660px' },
// 办公西区 1组 // 办公西区 1组
{ left: '240px', bottom: '290px' }, { left: '325px', top: '450px' },
{ left: '260px', bottom: '260px' }, { left: '353px', top: '490px' },
{ left: '280px', bottom: '230px' }, { left: '381px', top: '530px' },
{ left: '310px', bottom: '190px' }, { left: '409px', top: '570px' },
{ left: '330px', bottom: '160px' }, { left: '437px', top: '610px' },
// 办公西区 2组 // 办公西区 2组
{ left: '300px', bottom: '305px' }, { left: '415px', top: '430px' },
{ left: '325px', bottom: '275px' }, { left: '445px', top: '470px' },
{ left: '350px', bottom: '245px' }, { left: '475px', top: '510px' },
{ left: '375px', bottom: '215px' }, { left: '505px', top: '550px' },
{ left: '400px', bottom: '180px' }, { left: '535px', top: '590px' },
// 站厅西区 1组 // 站厅西区 1组
{ left: '370px', bottom: '320px' }, { left: '500px', top: '410px' },
{ left: '470px', bottom: '210px' }, { left: '630px', top: '560px' },
// 站厅西区 2组 // 站厅西区 2组
{ left: '425px', bottom: '335px' }, { left: '565px', top: '390px' },
{ left: '530px', bottom: '230px' }, { left: '710px', top: '530px' },
// 站厅西区 3组 // 站厅西区 3组
{ left: '475px', bottom: '350px' }, { left: '630px', top: '370px' },
{ left: '590px', bottom: '250px' }, { left: '790px', top: '510px' },
// 站厅西区 4组 // 站厅西区 4组
{ left: '530px', bottom: '365px' }, { left: '690px', top: '350px' },
{ left: '640px', bottom: '270px' }, { left: '855px', top: '485px' },
// 临检区 // 临检区
{ left: '570px', bottom: '390px' }, { left: '770px', top: '330px' },
{ left: '605px', bottom: '365px' }, { left: '810px', top: '360px' },
{ left: '640px', bottom: '340px' }, { left: '850px', top: '390px' },
{ left: '675px', bottom: '315px' }, { left: '890px', top: '420px' },
{ left: '710px', bottom: '290px' }, { left: '930px', top: '450px' },
// 安检区 // 安检区
{ left: '635px', bottom: '405px' }, { left: '860px', top: '310px' },
{ left: '675px', bottom: '375px' }, { left: '920px', top: '350px' },
{ left: '725px', bottom: '340px' }, { left: '980px', top: '390px' },
{ left: '780px', bottom: '305px' }, { left: '1040px', top: '430px' },
// 站厅东区 共4组 // 站厅东区 共4组
{ left: '690px', bottom: '420px' }, { left: '930px', top: '285px' },
{ left: '835px', bottom: '330px' }, { left: '1120px', top: '400px' },
{ left: '800px', bottom: '390px' }, { left: '1070px', top: '320px' },
{ left: '850px', bottom: '400px' }, { left: '1130px', top: '305px' },
{ left: '900px', bottom: '410px' }, { left: '1190px', top: '290px' },
]; ];
export const lightPosition1 = [ export const lightPosition1 = [
// 二楼办公区 // 二楼办公区
{ left: '200px', bottom: '380px' }, { left: '250px', top: '380px' },
{ left: '220px', bottom: '350px' }, { left: '275px', top: '415px' },
{ left: '240px', bottom: '320px' }, { left: '300px', top: '450px' },
{ left: '260px', bottom: '290px' }, { left: '325px', top: '485px' },
{ left: '280px', bottom: '260px' }, { left: '350px', top: '520px' },
// //
{ left: '940px', bottom: '550px' }, { left: '1130px', top: '170px' },
{ left: '1110px', bottom: '480px' }, { left: '1340px', top: '245px' },
{ left: '990px', bottom: '560px' }, { left: '1180px', top: '160px' },
{ left: '1170px', bottom: '490px' }, { left: '1390px', bottom: '230px' },
]; ];

6
hx-ai-intelligent/src/view/equipmentControl/ventilationSystem/components/fanControl.vue

@ -36,8 +36,10 @@
<!-- 设备部分 --> <!-- 设备部分 -->
<div> <div>
<div class="circuit-area"> <div class="circuit-area">
<div class="circuit-tab"></div> <div>
<span class="circuit-text">{{ props.type }}</span> <div class="circuit-tab"></div>
<span class="circuit-text">{{ props.type }}</span>
</div>
<div class="btn2"> <div class="btn2">
<a-switch <a-switch
v-model:checked="selectAllCheckbox" v-model:checked="selectAllCheckbox"

5
hx-ai-intelligent/src/view/equipmentControl/ventilationSystem/components/tabs1.less

@ -91,7 +91,6 @@
.btn2 { .btn2 {
display: flex; display: flex;
align-items: center; align-items: center;
margin-left: 80px;
} }
.openzm { .openzm {
@ -214,6 +213,7 @@
.circuit-tab, .circuit-tab,
.circuit-text { .circuit-text {
vertical-align: middle;
display: inline-block; display: inline-block;
} }
@ -410,6 +410,9 @@
display: flex; display: flex;
align-items: center; align-items: center;
} }
.circuit-area {
justify-content: space-between;
}
.zmhlbtn { .zmhlbtn {
position: relative; position: relative;

12
hx-ai-intelligent/src/view/equipmentControl/ventilationSystem/index.vue

@ -1,5 +1,5 @@
<template> <template>
<div class="box-ventilationSystem"> <div :class="selectIndex == 6 ? 'box-ventilationSystem1' : 'box-ventilationSystem'">
<div class="legend-box"> <div class="legend-box">
<template v-for="(item, index) in legend" :key="index"> <template v-for="(item, index) in legend" :key="index">
<div class="legend-box-item" @click="selectLegend(item, index)"> <div class="legend-box-item" @click="selectLegend(item, index)">
@ -652,6 +652,16 @@
background-repeat: no-repeat; background-repeat: no-repeat;
position: relative; position: relative;
} }
.box-ventilationSystem1 {
width: 100%;
height: 100%;
display: flex;
overflow: hidden;
background-image: url('../image/ventilationSystem/ventilationSystemBg1.png');
background-size: 100% 99.9%;
background-repeat: no-repeat;
position: relative;
}
.zep-enter-active, .zep-enter-active,
.zep-leave-active { .zep-leave-active {
animation-duration: 0.6s; /* 增加动画持续时间 */ animation-duration: 0.6s; /* 增加动画持续时间 */

Loading…
Cancel
Save