zhaohy 1 month ago
parent
commit
0e452ddef2
  1. BIN
      hx-ai-intelligent/src/view/equipmentControl/image/floor-1.png
  2. BIN
      hx-ai-intelligent/src/view/equipmentControl/image/floor-2.png
  3. BIN
      hx-ai-intelligent/src/view/equipmentControl/image/floor1.png
  4. BIN
      hx-ai-intelligent/src/view/equipmentControl/image/floor2.png
  5. 111
      hx-ai-intelligent/src/view/equipmentControl/lightingManage/index.less
  6. 3
      hx-ai-intelligent/src/view/equipmentControl/lightingManage/indexs.vue
  7. 21
      hx-ai-intelligent/src/view/equipmentControl/ventilationSystem/components/dialogStyle.less
  8. 21
      hx-ai-intelligent/src/view/equipmentControl/ventilationSystem/components/tabs1.less

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

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.6 MiB

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

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 MiB

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

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.0 MiB

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

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.6 MiB

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

@ -10,10 +10,13 @@
width: 1280px;
height: 720px;
user-select: none;
background-image: url(../image/bg.jpg);
background-image: url(../image/floor-1.png);
background-size: 100% 100%;
background-repeat: no-repeat;
background-color: linear-gradient(top to bottom,#c0deff, #8eadf0);
// 由于背景是俯视图,会产生有交点的透视效果,故使用透视属性
perspective: 1000px;
perspective-origin: 850px -160px;
perspective: 900px;
perspective-origin: 900px -120px;
// 左上角区域切换功能
.btn-box {
width: 100px;
@ -45,11 +48,11 @@
// 大区分区
.area{
position: absolute;
bottom: 170px;
left: 240px;
width: 780px;
height: 240px;
transform: rotateX(79deg) rotateZ(-22deg) skew(29deg);
bottom: 210px;
left: 250px;
width: 700px;
height: 270px;
transform: rotateX(73deg) rotateZ(338deg) skew(31deg);
display: flex;
gap: 5px;
.area1 {
@ -93,7 +96,95 @@
}
.area-item {
cursor: pointer;
transition: all ease 0.2s;
transition: transform ease 0.2s;
>.light-group {
height: 100%;
flex: 1;
display:flex;
justify-content: center;
align-items: center;
box-sizing: border-box;
padding: 10px;
// border: 2px solid red;
.shadow-box {
width: 30px;
height: 220px;
border-radius: 20px;
background: rgba(0, 0, 0, 0.2);
}
}
}
}
}
.lightingImgBox1 {
position: relative;
width: 1280px;
height: 720px;
user-select: none;
background-image: url(../image/floor-2.png);
background-size: 100% 100%;
background-repeat: no-repeat;
background-color: linear-gradient(top to bottom,#c0deff, #8eadf0);
// 由于背景是俯视图,会产生有交点的透视效果,故使用透视属性
perspective: 900px;
perspective-origin: 900px -120px;
// 左上角区域切换功能
.btn-box {
width: 100px;
position: sticky;
top: 15px;
margin-left: 10px;
display: flex;
flex-direction: column;
gap: 8px;
.btn-item {
cursor: pointer;
width: 100%;
height: 35px;
border-radius: 4px;
// background: rgba(39, 120, 255, 1);
background: rgb(7, 72, 116);
border: 1px solid rgba(51, 199, 255, 1);
box-shadow: 0px 10px 15px rgba(0, 54, 136, 0.3);
font-size: 16px;
color: white;
}
.btnActive {
background: rgba(39, 120, 255, 1);
}
.btn-item:hover {
color: white;
}
}
// 大区分区
.area{
position: absolute;
bottom: 320px;
left: 240px;
width: 950px;
height: 270px;
transform: rotateX(76deg) rotateZ(-22deg) skew(30deg);
display: flex;
justify-content: space-between;
gap: 5px;
.area1 {
width: 170px;
background: rgba(0, 251, 91, 0.3);
border: 2px solid rgb(0, 251, 91);
display: flex;
}
.area2 {
width: 150px;
background: rgba(255, 165, 0, 0.3);
border: 2px solid rgb(255, 165, 0);
display: flex;
}
.area-item:hover {
transform: scale(1.05);
}
.area-item {
cursor: pointer;
transition: transform ease 0.2s;
>.light-group {
height: 100%;
flex: 1;
@ -105,7 +196,7 @@
// border: 2px solid red;
.shadow-box {
width: 30px;
height: 200px;
height: 230px;
border-radius: 20px;
background: rgba(0, 0, 0, 0.2);
}

3
hx-ai-intelligent/src/view/equipmentControl/lightingManage/indexs.vue

@ -1,6 +1,6 @@
<template>
<div class="lighting-box">
<div class="lighting-img-box">
<div class="lighting-img-box" :class="{ lightingImgBox1: thisFloor == '2' }">
<!-- 左上角区域切换 -->
<div class="btn-box">
<button
@ -110,6 +110,7 @@
//
const changeFloor = (area: any, floor: string) => {
thisFloor.value = floor;
console.log(thisFloor.value, 'vvvvvvvvvv');
//
reset();
//

21
hx-ai-intelligent/src/view/equipmentControl/ventilationSystem/components/dialogStyle.less

@ -39,13 +39,17 @@
.journal {
padding: 1% 3%;
width: 100%;
height: 150px;
background-color: rgba(0, 0, 0);
border-radius: 12px;
border: 2px solid transparent;
border-image: linear-gradient(to bottom, #0077ff, #00f6ff, #000000) 1;
.title-img {
padding-top: 6px;
margin-top: 6px;
}
.title-text {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
}
.imgText {
@ -126,18 +130,7 @@
bottom: 0;
left: 0;
right: 0;
.execute {
margin-right: 10px;
width: 74px;
height: 40px;
opacity: 1;
cursor: pointer;
border-radius: 4px;
font-size: 14px;
font-weight: 400;
border: 0;
margin-left: 10px;
}.cancel {
.execute, .cancel {
margin-right: 10px;
width: 74px;
height: 40px;

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

@ -1,5 +1,6 @@
// 抽屉
.drawer-fan {
.drawer-item {
.light-area,
.circuit-area,
.control-area,
@ -412,12 +413,22 @@
.zmhlbtn {
position: relative;
}
overflow: hidden;
.btn-back {
position: absolute;
width: 50px;
height: 50px;
right: -25px;
bottom: -30px;
transform: rotate(45deg);
background: orange;
// 禁用图标
.anticon-stop {
transform: rotate(-45deg) scale(0.9);
position: absolute;
right: 3px;
bottom: 3px;
left: 3px;
top: 15px;
}
}
}
}
Loading…
Cancel
Save