Browse Source

add:新风系统

temp
zhaohy 4 months ago
parent
commit
67a76481cc
  1. 1
      hx-ai-intelligent/src/view/alarmManagement/alarmSettings/energyAlarm/editConfigureEnergyAlarm.vue
  2. 1
      hx-ai-intelligent/src/view/alarmManagement/alarmSettings/equipmentAlarm/editConfigureDeviceAlarm.vue
  3. 1
      hx-ai-intelligent/src/view/alarmManagement/alarmSettings/equipmentAlarm/editeEquipmentAlarm.vue
  4. 149
      hx-ai-intelligent/src/view/equipmentControl/airConditioningSystem/components/conditioningModel.vue
  5. 149
      hx-ai-intelligent/src/view/equipmentControl/airConditioningSystem/components/newTrendModel.vue
  6. 210
      hx-ai-intelligent/src/view/equipmentControl/airConditioningSystem/index.vue
  7. 116
      hx-ai-intelligent/src/view/equipmentControl/components/doubleSingleModel.vue
  8. 2
      hx-ai-intelligent/src/view/equipmentControl/components/singleModel.vue
  9. BIN
      hx-ai-intelligent/src/view/equipmentControl/image/airConditioningSystem/conditioningIcon.png
  10. BIN
      hx-ai-intelligent/src/view/equipmentControl/image/airConditioningSystem/electricFan.png
  11. BIN
      hx-ai-intelligent/src/view/equipmentControl/image/airConditioningSystem/newTrendModelBg.png
  12. BIN
      hx-ai-intelligent/src/view/equipmentControl/image/airConditioningSystem/newTrendModelIcon.png
  13. BIN
      hx-ai-intelligent/src/view/equipmentControl/image/airConditioningSystem/sunBlue.png
  14. 0
      hx-ai-intelligent/src/view/equipmentControl/image/airConditioningSystem/sunRed.png
  15. BIN
      hx-ai-intelligent/src/view/equipmentControl/image/airConditioningSystem/sunYellow.png

1
hx-ai-intelligent/src/view/alarmManagement/alarmSettings/energyAlarm/editConfigureEnergyAlarm.vue

@ -25,7 +25,6 @@
label: 'orgName',
value: 'orgId',
}"
:disabled="true"
tree-node-filter-prop="orgName" />
</a-form-item>
<a-form-item label="数据来源" name="dataSources">

1
hx-ai-intelligent/src/view/alarmManagement/alarmSettings/equipmentAlarm/editConfigureDeviceAlarm.vue

@ -25,7 +25,6 @@
value: 'orgId',
}"
:tree-data="siteDataTree"
:disabled="true"
tree-node-filter-prop="orgName" />
</a-form-item>
<a-form-item label="设备类型" name="deviceType">

1
hx-ai-intelligent/src/view/alarmManagement/alarmSettings/equipmentAlarm/editeEquipmentAlarm.vue

@ -345,4 +345,3 @@
width: 23%;
}
</style>
../../../../api/alarmManagement/alarmSettings/deviceAlarms

149
hx-ai-intelligent/src/view/equipmentControl/airConditioningSystem/components/conditioningModel.vue

@ -0,0 +1,149 @@
<template>
<div style="width: 100%; height: 100%">
<div class="box-title title">
<span style="margin-left: 12px">空调相组</span>
</div>
<div class="box-bottom">
<template v-for="(item, index) in dataSource" :key="index">
<div class="box-bottom-item">
<div class="box-bottom-item-top">
<img width="42" src="../../image/airConditioningSystem/newTrendModelIcon.png" />
<div class="box-bottom-item-top-title">
{{ item.title }}
</div>
<div
style="width: 100%; height: 400px; display: flex; gap: 12px; flex-direction: column">
<div class="box-bottom-item-line">
开关
<div class="box-bottom-item-line-value">
<a-tag
style="background-color: rgba(0, 0, 0, 0.5); width: 50px; text-align: center"
:style="{
border: '1px solid' + ['#39d7bb', '#f3614d', '#ffa403'][0],
color: ['#39d7bb', '#f3614d', '#ffa403'][0],
}"
>开启</a-tag
>
</div>
</div>
<div class="box-bottom-item-line">
电机转速
<div class="box-bottom-item-line-value">
<span style="color: #f59a23">1210/分钟</span>
</div>
</div>
<div class="box-bottom-item-line">
换热器热度
<div class="box-bottom-item-line-value">
<span style="color: #00ffd2">8</span>
</div>
</div>
<div class="box-bottom-item-line">
风量
<div class="box-bottom-item-line-value">
<span style="color: #00ffd2">12345m3/h</span>
</div>
</div>
<div class="box-bottom-item-line">
风速
<div class="box-bottom-item-line-value">
<span style="color: #00ffd2">22m/s</span>
</div>
</div>
<div class="box-bottom-item-line">
PM2.5
<div class="box-bottom-item-line-value">
<span style="color: #00ffd2">30</span>
</div>
</div>
<div class="box-bottom-item-line">
二氧化碳
<div class="box-bottom-item-line-value">
<span style="color: #00ffd2">123CO2e</span>
</div>
</div>
</div>
</div>
</div>
</template>
</div>
</div>
</template>
<script lang="ts" setup>
defineProps({
dataSource: {
type: Object,
default: () => {
return { title: '' };
},
},
});
</script>
<style lang="less">
.title {
position: relative;
padding-left: 9px;
&::before {
content: '';
position: absolute;
left: 10px;
top: 40%;
transform: translateY(-50%);
height: 12px;
width: 3px;
border-radius: 1px;
background-color: #4388fb;
}
}
.box-title {
color: white;
padding: 0px 10px;
font-size: 14px;
width: 100%;
height: 30px;
}
.box-bottom {
width: 100%;
height: calc(100% - 40px);
overflow-y: auto;
margin-top: 10px;
overflow-x: hidden;
.box-bottom-item {
width: 100%;
height: 478px;
background-image: url(../../image/airConditioningSystem/newTrendModelBg.png);
background-size: 100% 99%;
background-repeat: no-repeat;
color: white;
padding: 8px;
.box-bottom-item-top {
width: 100%;
font-size: 18px;
padding: 6px 12px;
position: relative;
}
.box-bottom-item-top-title {
display: flex;
position: absolute;
left: 62px;
top: 7px;
}
.box-bottom-item-line {
width: 100%;
flex: 1;
background-color: #0d1b32;
font-size: 14px;
padding: 6px 24px;
display: flex;
align-items: center;
position: relative;
.box-bottom-item-line-value {
display: flex;
position: absolute;
right: 24px;
font-weight: bold;
}
}
}
}
</style>

149
hx-ai-intelligent/src/view/equipmentControl/airConditioningSystem/components/newTrendModel.vue

@ -0,0 +1,149 @@
<template>
<div style="width: 100%; height: 100%">
<div class="box-title title">
<span style="margin-left: 12px">新风主机</span>
</div>
<div class="box-bottom">
<template v-for="(item, index) in dataSource" :key="index">
<div class="box-bottom-item">
<div class="box-bottom-item-top">
<img width="42" src="../../image/airConditioningSystem/newTrendModelIcon.png" />
<div class="box-bottom-item-top-title">
{{ item.title }}
</div>
<div
style="width: 100%; height: 400px; display: flex; gap: 12px; flex-direction: column">
<div class="box-bottom-item-line">
开关
<div class="box-bottom-item-line-value">
<a-tag
style="background-color: rgba(0, 0, 0, 0.5); width: 50px; text-align: center"
:style="{
border: '1px solid' + ['#39d7bb', '#f3614d', '#ffa403'][0],
color: ['#39d7bb', '#f3614d', '#ffa403'][0],
}"
>开启</a-tag
>
</div>
</div>
<div class="box-bottom-item-line">
电机转速
<div class="box-bottom-item-line-value">
<span style="color: #f59a23">1210/分钟</span>
</div>
</div>
<div class="box-bottom-item-line">
换热器热度
<div class="box-bottom-item-line-value">
<span style="color: #00ffd2">8</span>
</div>
</div>
<div class="box-bottom-item-line">
风量
<div class="box-bottom-item-line-value">
<span style="color: #00ffd2">12345m3/h</span>
</div>
</div>
<div class="box-bottom-item-line">
风速
<div class="box-bottom-item-line-value">
<span style="color: #00ffd2">22m/s</span>
</div>
</div>
<div class="box-bottom-item-line">
PM2.5
<div class="box-bottom-item-line-value">
<span style="color: #00ffd2">30</span>
</div>
</div>
<div class="box-bottom-item-line">
二氧化碳
<div class="box-bottom-item-line-value">
<span style="color: #00ffd2">123CO2e</span>
</div>
</div>
</div>
</div>
</div>
</template>
</div>
</div>
</template>
<script lang="ts" setup>
defineProps({
dataSource: {
type: Object,
default: () => {
return { title: '' };
},
},
});
</script>
<style lang="less">
.title {
position: relative;
padding-left: 9px;
&::before {
content: '';
position: absolute;
left: 10px;
top: 40%;
transform: translateY(-50%);
height: 12px;
width: 3px;
border-radius: 1px;
background-color: #4388fb;
}
}
.box-title {
color: white;
padding: 0px 10px;
font-size: 14px;
width: 100%;
height: 30px;
}
.box-bottom {
width: 100%;
height: calc(100% - 40px);
overflow-y: auto;
margin-top: 10px;
overflow-x: hidden;
.box-bottom-item {
width: 100%;
height: 478px;
background-image: url(../../image/airConditioningSystem/newTrendModelBg.png);
background-size: 100% 99%;
background-repeat: no-repeat;
color: white;
padding: 8px;
.box-bottom-item-top {
width: 100%;
font-size: 18px;
padding: 6px 12px;
position: relative;
}
.box-bottom-item-top-title {
display: flex;
position: absolute;
left: 62px;
top: 7px;
}
.box-bottom-item-line {
width: 100%;
flex: 1;
background-color: #0d1b32;
font-size: 14px;
padding: 6px 24px;
display: flex;
align-items: center;
position: relative;
.box-bottom-item-line-value {
display: flex;
position: absolute;
right: 24px;
font-weight: bold;
}
}
}
}
</style>

210
hx-ai-intelligent/src/view/equipmentControl/airConditioningSystem/index.vue

@ -1,5 +1,5 @@
<template>
<div style="width: 100%; height: 100%; display: flex">
<div style="width: 100%; height: 100%; display: flex; overflow: hidden">
<div class="legend-box">
<template v-for="(item, index) in legend" :key="index">
<div
@ -41,17 +41,20 @@
<!-- 新风主机 -->
<div v-if="selectIndex === 2">
<template v-for="(item, index) in newTrend" :key="index">
<div
style="position: absolute"
:style="{
left: 'calc(' + item.styleText.left + ' - 12.9%)',
bottom: 'calc(' + item.styleText.bottom + ' + 8%)',
}">
<doubleSingleModel :dataSource="item" />
</div>
<img
style="
width: 50px;
height: 75px;
position: absolute;
transform: rotateY(180deg);
z-index: 1;
"
style="width: 50px; height: 75px; position: absolute; z-index: 1"
:style="{
left: 'calc(' + item.styleText.left + ' - 1.5%)',
bottom: 'calc(' + item.styleText.bottom + ' + 4%)',
transform: 'rotateY(180deg)',
}"
src="../image/liftState/lift/line.png" />
<img
@ -60,6 +63,74 @@
src="../image/airConditioningSystem/fan.png" />
</template>
</div>
<!-- 新风主机详情 -->
<a-drawer
:visible="selectIndex === 2"
:title="' '"
:mask="false"
class="newTrendModel"
placement="right"
headerStyle="background-color:rgba(33, 40, 54, 0.95); border-bottom: 2px solid #454545;"
bodyStyle="background-color: rgba(33, 40, 54, 0.95);"
@close="handleClose">
<newTrendModel :dataSource="newTrend" />
</a-drawer>
<!-- 空调箱 -->
<div v-if="selectIndex === 3">
<template v-for="(item, index) in conditioningData" :key="index">
<div
style="position: absolute"
:style="{
left:
'calc(' + item.styleText.left + (item.lineType === 1 ? ' - 12.9%)' : ' - 13.3%)'),
bottom:
'calc(' + item.styleText.bottom + (item.lineType === 1 ? ' + 8%)' : ' - 14%)'),
}">
<doubleSingleModel :dataSource="item" />
</div>
<img
style="width: 50px; height: 75px; position: absolute; z-index: 1"
:style="{
left: 'calc(' + item.styleText.left + (item.lineType === 1 ? ' - 1.5%)' : ' - 2%)'),
bottom: 'calc(' + item.styleText.bottom + (item.lineType === 1 ? ' + 4%)' : ' - 9%)'),
transform: item.lineType === 1 ? 'rotateY(180deg)' : 'rotate(180deg)',
}"
src="../image/liftState/lift/line.png" />
<img
style="width: 42px; height: 42px; position: absolute"
:style="{ left: item.styleText.left, bottom: item.styleText.bottom }"
src="../image/airConditioningSystem/conditioningIcon.png" />
</template>
</div>
<!-- 空调箱详情 -->
<a-drawer
:visible="selectIndex === 3"
:title="' '"
:mask="false"
class="newTrendModel"
placement="right"
headerStyle="background-color:rgba(33, 40, 54, 0.95); border-bottom: 2px solid #454545;"
bodyStyle="background-color: rgba(33, 40, 54, 0.95);"
@close="handleClose">
<conditioningModel :dataSource="newTrend" />
</a-drawer>
<!-- 空调箱 顶部详情 -->
<div
v-if="selectIndex === 3"
style="
width: 974px;
height: 146px;
background-color: #282d33;
display: flex;
position: absolute;
top: 20px;
right: 380px;
border-radius: 12px;
padding: 12px;
color: white;
">
{{ selectConditioning.title }}
</div>
</div>
</div>
</template>
@ -72,9 +143,19 @@
import airConditioner from '../image/airConditioningSystem/airConditioner.png';
import floorHeating from '../image/airConditioningSystem/floorHeating.png';
import selectImg from '../image/airConditioningSystem/selectImg.png';
import temperatureBox from '../image/airConditioningSystem/temperature-box.png';
//
import sunRed from '../image/airConditioningSystem/sunRed.png';
import sunYellow from '../image/airConditioningSystem/sunYellow.png';
import sunBlue from '../image/airConditioningSystem/sunBlue.png';
import singleModel from '../components/singleModel.vue';
import doubleSingleModel from '../components/doubleSingleModel.vue';
import newTrendModel from './components/newTrendModel.vue';
import conditioningModel from './components/conditioningModel.vue';
onMounted(() => {
selectConditioning.value = conditioningData.value[0];
});
onUnmounted(() => {});
//
const legend = ref([
{ url: temperature, name: '温度' },
@ -83,6 +164,8 @@
{ url: airConditioner, name: '空调箱' },
{ url: floorHeating, name: '地暖' },
]);
const newTrendModels = ref(null);
//
const sensor = ref([
{
@ -91,7 +174,7 @@
type: '温度',
unit: '℃',
number: 20,
url: temperatureBox,
url: sunRed,
},
{
title: 'G区多功能传感器',
@ -99,7 +182,7 @@
type: '温度',
unit: '℃',
number: 20,
url: temperatureBox,
url: sunYellow,
},
{
title: 'F区多功能传感器',
@ -107,7 +190,7 @@
type: '温度',
unit: '℃',
number: 20,
url: temperatureBox,
url: sunRed,
},
{
title: 'E区多功能传感器',
@ -115,7 +198,7 @@
type: '温度',
unit: '℃',
number: 20,
url: temperatureBox,
url: sunBlue,
},
{
title: 'D区多功能传感器',
@ -123,7 +206,7 @@
type: '温度',
unit: '℃',
number: 20,
url: temperatureBox,
url: sunRed,
},
{
title: 'C区多功能传感器',
@ -131,7 +214,7 @@
type: '温度',
unit: '℃',
number: 20,
url: temperatureBox,
url: sunRed,
},
{
title: 'B区多功能传感器',
@ -139,7 +222,7 @@
type: '温度',
unit: '℃',
number: 20,
url: temperatureBox,
url: sunRed,
},
{
title: 'A区多功能传感器',
@ -147,7 +230,7 @@
type: '温度',
unit: '℃',
number: 20,
url: temperatureBox,
url: sunRed,
},
]);
//
@ -224,17 +307,18 @@
styleText: { left: '43%', bottom: '44%' },
type: '新风主机',
unit: '℃',
number: 20,
number: 10,
url: freshAir,
},
{
title: 'C区新风主机',
styleText: { left: '45%', bottom: '23%' },
type: '新风主机',
number: 20,
unit: '℃',
},
{
title: 'background-size区新风主机',
title: 'B区新风主机',
styleText: { left: '61.5%', bottom: '54%' },
type: '新风主机',
unit: '℃',
@ -245,22 +329,99 @@
title: 'A区新风主机',
styleText: { left: '63%', bottom: '36%' },
type: '新风主机',
number: 30,
unit: '℃',
},
]);
//
const conditioningData = ref([
{
title: '走廊区',
styleText: { left: '13%', bottom: '23%' },
type: '空调箱',
lineType: 1,
unit: '℃',
number: 20,
url: freshAir,
},
{
title: '西区',
styleText: { left: '28%', bottom: '30%' },
type: '空调箱',
lineType: 1,
unit: '℃',
number: 34,
url: freshAir,
},
{
title: '西北区',
styleText: { left: '38%', bottom: '45.5%' },
type: '空调箱',
lineType: 1,
unit: '℃',
number: 34,
url: freshAir,
},
{
title: '东北区',
styleText: { left: '57%', bottom: '53%' },
lineType: 1,
type: '空调箱',
unit: '℃',
number: 34,
url: freshAir,
},
{
title: '东区',
styleText: { left: '73%', bottom: '53%' },
lineType: 1,
type: '空调箱',
unit: '℃',
number: 34,
url: freshAir,
},
{
title: '东南区',
styleText: { left: '68%', bottom: '38%' },
lineType: 2,
type: '空调箱',
unit: '℃',
number: 15,
url: freshAir,
},
{
title: '西南区',
styleText: { left: '43.5%', bottom: '22%' },
lineType: 2,
type: '空调箱',
unit: '℃',
number: 15,
url: freshAir,
},
]);
//
const selectConditioning = ref({});
//
const selectIndex = ref(0);
const selectLegend = (item: any, index: any) => {
if (selectIndex.value !== index) {
selectIndex.value = index;
}
if (selectIndex.value === 2) {
setTimeout(() => {
newTrendModels.value.toggle(newTrend);
}, 100);
}
};
const handleClose = () => {
selectIndex.value = 0;
};
</script>
<style lang="less" scoped>
<style lang="less">
.legend-box {
width: 5%;
height: 100%;
background-color: rgba(40, 45, 51, 1);
background-color: rgba(33, 40, 54, 0.95);
border-radius: 4px 0px 0px 4px;
padding: 4px;
.legend-box-item {
@ -299,4 +460,11 @@
overflow: hidden;
border-radius: 0px 4px 4px 0px;
}
.newTrendModel {
overflow-y: auto;
.anticon {
color: white !important;
margin-left: -10px;
}
}
</style>

116
hx-ai-intelligent/src/view/equipmentControl/components/doubleSingleModel.vue

@ -0,0 +1,116 @@
<!-- 双图 -->
<template>
<div class="box">
<div class="box-title title">
{{ dataSource.title }}
</div>
<div
style="
width: 100%;
height: 80px;
margin-top: 12px;
display: flex;
color: white;
font-size: 12px;
">
<div
style="
width: 50%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
">
<img style="width: 39px" src="../image/airConditioningSystem/electricFan.png" />
<div style="margin-top: 4px"> 风量 </div>
<div style="margin-top: -5px">
<span style="font-size: 18px; color: #0dffff; font-style: italic"> 18 </span>
<span style="font-size: 10px; margin-left: 5px">m3/h</span>
</div>
</div>
<div
style="
width: 50%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
">
<img style="width: 39px" :src="getSunUrl()" />
<div style="margin-top: 4px"> 温度 </div>
<div style="margin-top: -5px">
<span :style="{ fontSize: '18px', color: getColor(), fontStyle: 'italic' }">
{{ dataSource.number }}
</span>
<span style="font-size: 10px; margin-left: 5px"></span>
</div>
</div>
</div>
</div>
</template>
<script lang="ts" setup>
import sunRed from '../image/airConditioningSystem/sunRed.png';
import sunYellow from '../image/airConditioningSystem/sunYellow.png';
import sunBlue from '../image/airConditioningSystem/sunBlue.png';
const props = defineProps({
dataSource: {
type: Object,
default: () => ({ title: '', number: 0 }), // number
},
});
const getSunUrl = () => {
if (props.dataSource.number > 0 && props.dataSource.number < 20) {
return sunBlue;
} else if (props.dataSource.number >= 20 && props.dataSource.number < 30) {
return sunYellow;
} else {
return sunRed;
}
};
const getColor = () => {
if (props.dataSource.number > 0 && props.dataSource.number < 20) {
return '#0dffa4';
} else if (props.dataSource.number >= 20 && props.dataSource.number < 30) {
return '#f59a23';
} else {
return '#f36163';
}
};
</script>
<style lang="less" scoped>
.box {
width: 192px;
height: 125px;
background: inherit;
background-color: rgba(2, 29, 71, 0.9);
box-sizing: border-box;
border-width: 1px;
border-style: solid;
border-color: rgba(13, 255, 255, 1);
border-radius: 8px;
.title {
position: relative;
padding-left: 9px;
&::before {
content: '';
position: absolute;
left: 10px;
top: 90%;
transform: translateY(-50%);
height: 10px;
width: 2.5px;
border-radius: 1px;
background-color: #0dffff;
}
}
.box-title {
width: 100%;
height: 20px;
font-size: 12px;
color: #0dffff;
padding: 12px 20px;
}
}
</style>

2
hx-ai-intelligent/src/view/equipmentControl/components/singleModel.vue

@ -20,7 +20,7 @@
dataSource: {
type: Object,
default: () => {
return { name: '' };
return { title: '' };
},
},
});

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

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.3 KiB

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

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.0 KiB

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

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.1 KiB

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

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.6 KiB

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

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.7 KiB

0
hx-ai-intelligent/src/view/equipmentControl/image/airConditioningSystem/temperature-box.png → hx-ai-intelligent/src/view/equipmentControl/image/airConditioningSystem/sunRed.png

Before

Width:  |  Height:  |  Size: 8.5 KiB

After

Width:  |  Height:  |  Size: 8.5 KiB

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

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.4 KiB

Loading…
Cancel
Save