zhaohy 3 months ago
parent
commit
1a77df6442
  1. 16
      hx-ai-intelligent/src/view/equipmentControl/liftSystem/liftInfo.vue
  2. 99
      hx-ai-intelligent/src/view/equipmentControl/lightingManage/indexs.vue
  3. 64
      hx-ai-intelligent/src/view/equipmentControl/lightingManage/light.vue
  4. 61
      hx-ai-intelligent/src/view/equipmentControl/lightingManage/lightPosition.ts
  5. 15
      hx-ai-intelligent/src/view/equipmentControl/lightingManage/tabs1.vue

16
hx-ai-intelligent/src/view/equipmentControl/liftSystem/liftInfo.vue

@ -174,20 +174,20 @@
.info-box { .info-box {
// //
--text: rgb(20, 255, 255); --text: rgb(20, 255, 255);
width: 224.54px; width: 180px;
height: 110px; height: 95px;
display: flex; display: flex;
gap: 5px;
flex-direction: column; flex-direction: column;
background: rgb(17, 44, 86, 0.9); background: rgb(17, 44, 86, 0.9);
border-radius: 8px; border-radius: 8px;
box-sizing: border-box; box-sizing: border-box;
padding: 8px; padding: 4px 6px;
border: 2px solid var(--text); border: 2px solid var(--text);
transform: translateY(-50%); transform: translateY(-50%);
cursor: pointer; cursor: pointer;
// //
.box-title { .box-title {
font-size: 14px;
height: auto; height: auto;
color: var(--text); color: var(--text);
// //
@ -222,12 +222,12 @@
justify-content: center; justify-content: center;
// border: 1px solid red; // border: 1px solid red;
.icon { .icon {
width: 45px; width: 40px;
height: 45px; height: 40px;
background-image: url(../image/box.svg); background-image: url(../image/box.svg);
background-size: 130% 130%; background-size: 130% 130%;
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: left -6.5px top -3px; background-position: left -5px top -2px;
// border: 1px solid red; // border: 1px solid red;
position: relative; position: relative;
.icon-item { .icon-item {
@ -247,7 +247,7 @@
} }
} }
.item-text { .item-text {
margin-top: 2px; margin-top: 0px;
height: 20px; height: 20px;
text-align: center; text-align: center;
font-size: 12px; font-size: 12px;

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

@ -3,14 +3,18 @@
<div class="lighting-img-box" :class="{ lightingImgBox1: thisFloor == '2' }"> <div class="lighting-img-box" :class="{ lightingImgBox1: thisFloor == '2' }">
<!-- 左上角区域切换 --> <!-- 左上角区域切换 -->
<div class="btn-box"> <div class="btn-box">
<button <a-popconfirm
v-for="(item, index) in floorData" v-for="(item, index) in floorData"
:key="index" :key="index"
class="btn-item" title="切换楼层将取消当前的所有修改项"
:class="{ btnActive: item.dataCode == thisFloor }" ok-text="确定"
@click="changeFloor(item.childList, item.dataCode)" cancel-text="取消"
>{{ item.name }}</button placement="bottomLeft"
> @confirm="changeFloor(item.childList, item.dataCode)">
<button class="btn-item" :class="{ btnActive: item.dataCode == thisFloor }">{{
item.name
}}</button>
</a-popconfirm>
</div> </div>
<!-- 楼层区域 --> <!-- 楼层区域 -->
<div class="area"> <div class="area">
@ -28,12 +32,7 @@
</div> </div>
<!-- 照明设备 --> <!-- 照明设备 -->
<div class="lights"> <div class="lights">
<light <light v-for="(blub, index) in bulbs" :key="index" :blub="blub" />
v-for="(item, index) in bulbs"
:key="index"
:styleObject="item.styleText"
:type="item.type"
:visible="item.visible" />
</div> </div>
</div> </div>
<!-- 右侧抽屉 --> <!-- 右侧抽屉 -->
@ -73,7 +72,7 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref, onMounted } from 'vue'; import { ref, onMounted } from 'vue';
import { lightPosition } from './lightPosition'; import { lightPosition, lightPosition1 } from './lightPosition';
// //
import light from './light.vue'; import light from './light.vue';
import tabs1 from './tabs1.vue'; import tabs1 from './tabs1.vue';
@ -109,8 +108,15 @@
const thisFloor = ref('1'); const thisFloor = ref('1');
// //
const changeFloor = (area: any, floor: string) => { const changeFloor = (area: any, floor: string) => {
if (floor == thisFloor.value) {
return;
}
//
tabs1Ref.value.refresh(false);
//
bulbs.value = [];
thisFloor.value = floor; thisFloor.value = floor;
console.log(thisFloor.value, 'vvvvvvvvvv'); getBulbs();
// //
reset(); reset();
// //
@ -129,56 +135,7 @@
// - // -
const area = ref(['1']); const area = ref(['1']);
// 线 - // 线 -
const bulbs = ref([ const bulbs = ref([]);
{
styleText: { left: '180px', bottom: '200px' },
area: 1,
type: 1,
visible: true,
},
{
styleText: { left: '230px', bottom: '125px' },
area: 1,
type: 2,
visible: true,
},
{
styleText: { left: '320px', bottom: '140px' },
area: 1,
type: 3,
visible: true,
},
{
styleText: { left: '245px', bottom: '230px' },
area: 1,
type: 3,
visible: true,
},
{
styleText: { left: '405px', bottom: '230px' },
area: 2,
type: 3,
visible: true,
},
{
styleText: { left: '460px', bottom: '180px' },
area: 2,
type: 3,
visible: true,
},
{
styleText: { left: '360px', bottom: '275px' },
area: 2,
type: 3,
visible: true,
},
{
styleText: { left: '715px', bottom: '320px' },
area: 3,
type: 1,
visible: true,
},
]);
// 线 // 线
const changeArea = (result: any) => { const changeArea = (result: any) => {
console.log(result, 'changeArea'); console.log(result, 'changeArea');
@ -280,19 +237,25 @@
// ============================================== // ==============================================
const getBulbs = () => { const getBulbs = () => {
const floor = thisFloor.value;
let arr: Array<Object> = [];
if (floor == '1') {
arr = lightPosition;
} else if (floor == '2') {
arr = lightPosition1;
}
http http
.get(lightingManage.getBulbs, { .get(lightingManage.getBulbs, {
floor: thisFloor.value, floor,
projectId: state.projectId, projectId: state.projectId,
siteId: state.siteId, siteId: state.siteId,
}) })
.then((res) => { .then((res) => {
const data = res.data; const data = res.data;
data.forEach((item: any, index: number) => { data.forEach((item: any, index: number) => {
item.styleText = lightPosition[index]; item.styleText = arr[index];
}); });
console.log(res.data); bulbs.value = data;
// bulbs.value = data;
}); });
}; };

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

@ -5,71 +5,65 @@
<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/21962.png" alt="" />
<span class="tag-text">{{ result.name }}</span> <span class="tag-text">{{ blub.regionName + ' > ' + blub.deviceGroupName }}</span>
</div> </div>
<button class="right-button">{{ type == 1 ? '正常' : '关闭' }}</button> <button class="right-button">{{ blub.scene.label }}</button>
</div> </div>
<div class="light-tag-box"> <div class="light-tag-box">
<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">控制模式</span> <span class="title">控制模式</span>
<span class="result">自动</span> <span class="result">{{ blub.mode.label }}</span>
</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">亮度</span> <span class="title">亮度</span>
<span class="result">{{ result.brightness }}</span> <span class="result">{{ record.brightness + record.brightnessUnit }}</span>
</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">控制场景</span> <span class="title">控制场景</span>
<span class="result">{{ result.automatic2 }}</span> <span class="result">{{ blub.scene.label }}</span>
</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">色温</span> <span class="title">色温</span>
<span class="result">{{ result.brightness3 }}</span> <span class="result">{{ record.LwctemC + record.LwctemCUnit }}</span>
</div> </div>
</div> </div>
</div> </div>
</template> </template>
<div class="icon-box" :style="styleObject" v-show="visible"> <div class="icon-box" :style="props.blub.styleText">
<img v-if="type == 1" class="icon-item" src="/asset/image/bulbLogo/22394.png" alt="" /> <img
<img v-if="type == 2" class="icon-item" src="/asset/image/bulbLogo/22396.png" alt="" /> v-if="blub.mode.value == 1"
<img v-if="type == 3" class="icon-item" src="/asset/image/bulbLogo/22400.png" alt="" /> class="icon-item"
src="/asset/image/bulbLogo/22394.png"
alt="" />
<img
v-if="blub.mode.value == 2"
class="icon-item"
src="/asset/image/bulbLogo/22396.png"
alt="" />
<img
v-if="blub.mode.value == 3"
class="icon-item"
src="/asset/image/bulbLogo/22400.png"
alt="" />
</div> </div>
</a-popover> </a-popover>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { ref } from 'vue'; const props = defineProps({
blub: Object,
defineProps({
styleObject: Object,
type: Number,
visible: {
type: Boolean,
default: false,
},
});
const result = ref({
id: '1',
name: '站厅照明 1区',
manual: '手动',
automatic: '自动',
brightness: '100lux',
brightness2: '30lux',
manual2: '手动',
automatic2: '舒适',
brightness3: '4000k',
brightness4: '3800k',
}); });
const blub = props.blub;
const record = props.blub.record;
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.icon-box { .icon-box {
width: 25px; width: 28px;
height: 25px; height: 40px;
position: absolute; position: absolute;
.icon-item { .icon-item {
@ -140,7 +134,7 @@
.result { .result {
line-height: 50px; line-height: 50px;
font-size: 16px; font-size: 14px;
font-weight: 700; font-weight: 700;
color: white; color: white;
} }

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

@ -1,6 +1,63 @@
// 此文件只定义light(即俯视图小灯泡)的位置信息 // 此文件只定义light(即俯视图小灯泡)的位置信息
// 与显示状态和分组信息无关 // 与显示状态和分组信息无关
export const lightPosition = [ export const lightPosition = [
{ left: '180px', bottom: '200px' }, // 安检区A
{ left: '180px', bottom: '230px' }, { left: '160px', bottom: '270px' },
{ left: '185px', bottom: '230px' },
{ left: '220px', bottom: '180px' },
{ left: '250px', bottom: '130px' },
// 站厅区B 1组
{ left: '240px', bottom: '290px' },
{ left: '260px', bottom: '260px' },
{ left: '280px', bottom: '230px' },
{ left: '310px', bottom: '190px' },
{ left: '330px', bottom: '160px' },
// 站厅区B 2组
{ left: '300px', bottom: '305px' },
{ left: '325px', bottom: '275px' },
{ left: '350px', bottom: '245px' },
{ left: '375px', bottom: '215px' },
{ left: '400px', bottom: '180px' },
// 站台区A 1组
{ left: '370px', bottom: '320px' },
{ left: '470px', bottom: '210px' },
// 站台区A 2组
{ left: '425px', bottom: '335px' },
{ left: '530px', bottom: '230px' },
// 站台区A 3组
{ left: '475px', bottom: '350px' },
{ left: '590px', bottom: '250px' },
// 站台区A 4组
{ left: '530px', bottom: '365px' },
{ left: '640px', bottom: '270px' },
// 一楼办公区
{ left: '570px', bottom: '390px' },
{ left: '605px', bottom: '365px' },
{ left: '640px', bottom: '340px' },
{ left: '675px', bottom: '315px' },
{ left: '710px', bottom: '290px' },
// 安保区 4 分组
{ left: '670px', bottom: '370px' },
{ left: '720px', bottom: '385px' },
{ left: '770px', bottom: '400px' },
{ left: '820px', bottom: '415px' },
// 一楼男厕A
{ left: '810px', bottom: '455px' },
{ left: '970px', bottom: '370px' },
{ left: '850px', bottom: '465px' },
{ left: '1010px', bottom: '385px' },
];
export const lightPosition1 = [
// 二楼办公区
{ left: '200px', bottom: '380px' },
{ left: '220px', bottom: '350px' },
{ left: '240px', bottom: '320px' },
{ left: '260px', bottom: '290px' },
{ left: '280px', bottom: '260px' },
//
{ left: '940px', bottom: '550px' },
{ left: '1110px', bottom: '480px' },
{ left: '990px', bottom: '560px' },
{ left: '1170px', bottom: '490px' },
]; ];

15
hx-ai-intelligent/src/view/equipmentControl/lightingManage/tabs1.vue

@ -171,6 +171,7 @@
title="此操作将会撤销修改" title="此操作将会撤销修改"
ok-text="确定" ok-text="确定"
cancel-text="取消" cancel-text="取消"
placement="bottomRight"
@confirm="delBtn(item)" @confirm="delBtn(item)"
@cancel="changeCancel"> @cancel="changeCancel">
<button class="cxbtn">撤销</button> <button class="cxbtn">撤销</button>
@ -788,7 +789,15 @@
projectId: state.projectId, projectId: state.projectId,
siteId: state.siteId, siteId: state.siteId,
}) })
.then(() => { .then((res) => {
let data = res.data;
//
if (data.allSucceed) {
message.success('修改完成');
// allSucceedtrue
} else {
message.info(`${data.successList.length}条修改成功,${data.failList.length}条修改失败`);
}
emit('reload'); emit('reload');
refresh(true); refresh(true);
}) })
@ -813,6 +822,10 @@
changeArea, changeArea,
// //
changeLine, changeLine,
//
refresh,
resetLockList,
resetChangeList,
}); });
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>

Loading…
Cancel
Save