xuziqiang
/
SaaS-lib
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

fix:新风系统 空调箱

temp
zhaohy 4 months ago
parent
75df2dfb11
commit
01fd569185
7 changed files with 609 additions and 106 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 262
      hx-ai-intelligent/src/view/equipmentControl/airConditioningSystem/components/conditioningModel.vue
  2. 149
      hx-ai-intelligent/src/view/equipmentControl/airConditioningSystem/components/floorHeatingModel.vue
  3. 113
      hx-ai-intelligent/src/view/equipmentControl/airConditioningSystem/components/newTreedBox.vue
  4. 191
      hx-ai-intelligent/src/view/equipmentControl/airConditioningSystem/index.vue
  5. BIN
      hx-ai-intelligent/src/view/equipmentControl/image/airConditioningSystem/conditioningModelBg.png
  6. BIN
      hx-ai-intelligent/src/view/equipmentControl/image/airConditioningSystem/conditioningModelIcon.png
  7. BIN
      hx-ai-intelligent/src/view/equipmentControl/image/airConditioningSystem/floorHeatingIcon.png

262
hx-ai-intelligent/src/view/equipmentControl/airConditioningSystem/components/conditioningModel.vue
View File

@ -1,85 +1,133 @@
<template>
<div style="width: 100%; height: 100%">
<div class="box-title title">
<span style="margin-left: 12px">空调相组</span>
<span style="margin-left: 12px">空调箱组</span>
</div>
<div class="box-center">
<template v-if="!showAllButtons">
<template v-for="(item, index) in dataSource.slice(0, 3)" :key="index">
<div
class="box-center-button"
:style="{
backgroundColor: item.title === selectConditioning.title ? '#a7e5ff' : '#b5cdd9',
}"
@click="selectConditioningData(item, index)">
{{ item.title }}
</div>
</template>
<div style="width: 100%; height: 20px">
<span @click="showAllButtons = true" class="openzm"><down-outlined /> 展开</span>
</div>
</template>
<template v-else>
<template v-for="(item, index) in dataSource" :key="index">
<div
class="box-center-button"
:style="{
backgroundColor: item.title === selectConditioning.title ? '#a7e5ff' : '#b5cdd9',
}"
@click="selectConditioningData(item, index)">
{{ item.title }}
</div>
</template>
<div style="width: 100%; height: 20px">
<span @click="showAllButtons = false" class="openzm"><up-outlined /> 回缩</span>
</div>
</template>
</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 class="box-bottom-items">
<div class="box-bottom-item-top">
<img width="42" src="../../image/airConditioningSystem/conditioningModelIcon.png" />
<div class="box-bottom-item-top-title">
{{ selectConditioning.title }}
</div>
<div style="width: 100%; height: 300px; display: flex; gap: 12px; flex-direction: column">
<div class="box-bottom-top">
开关
<div class="box-bottom-item-line-value">
<a-switch
:disabled="true"
:checked="selectConditioning.enableRules === 1 ? true : false"
:class="{
'blue-background': selectConditioning.enableRules === 1 ? true : false,
'grey-background': selectConditioning.enableRules === 1 ? false : true,
}" />
</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-center">
<div style="width: 100%; height: 40px; line-height: 40px">温度 </div>
<div style="width: 100%; height: 60px">
<a-slider
v-model:value="selectConditioning.number"
:marks="marks"
:min="0"
:max="100"
:disabled="true"
:trackStyle="{ backgroundColor: '#91caff', height: '5px' }"
:handleStyle="{ backgroundColor: '#ffffff', borderColor: '#91caff' }"
:railStyle="{ backgroundColor: 'gray' }">
<template #mark="{ label, point }">
<span style="color: #0dfff2"> {{ label }}</span>
</template>
</a-slider>
</div>
<div class="box-bottom-item-line">
二氧化碳
<div class="box-bottom-item-line-value">
<span style="color: #00ffd2">123CO2e</span>
</div>
</div>
<div class="box-bottom-center">
<div style="width: 100%; height: 40px; line-height: 40px"> 风量 </div>
<div style="width: 100%; height: 60px">
<a-slider id="test" v-model:value="selectConditioning.number" :disabled="true" />
</div>
</div>
</div>
</div>
</template>
</div>
</div>
</div>
</template>
<script lang="ts" setup>
defineProps({
dataSource: {
type: Object,
default: () => {
return { title: '' };
},
},
import { DownOutlined, UpOutlined, StopOutlined } from '@ant-design/icons-vue';
import { ref } from 'vue';
// defineProps({
// dataSource: {
// type: Object,
// default: () => {
// return [];
// },
// },
// selectConditioning: {
// type: Object,
// default: () => {
// return {};
// },
// },
// });
const selectConditioning = ref({});
const dataSource = ref([]);
// 向上传递方法
const emit = defineEmits(['selectConditioningData']);
const showAllButtons = ref(false);
const marks = ref<Record<number, any>>({
0: 0,
100: 100,
});
const toggle = (data: any, selectData: any) => {
console.log(data, '数据');
dataSource.value = data;
selectConditioning.value = selectData;
};
const selectConditioningData = (data: any, index: any) => {
selectConditioning.value = data;
//向上传递 选择的空调箱
emit('selectConditioningData', data);
};
defineExpose({
toggle,
});
</script>
<style lang="less">
<style lang="less" scoped>
.title {
position: relative;
padding-left: 9px;
@ -102,16 +150,35 @@
width: 100%;
height: 30px;
}
.box-center {
width: 100%;
height: auto;
padding: 9px;
color: white;
font-size: 14px;
display: flex;
flex-wrap: wrap;
gap: 10px;
.box-center-button {
width: 95px;
height: 40px;
background-color: #b5cdd9;
border: 1px solid #aaaaaa;
text-align: center;
line-height: 40px;
cursor: pointer;
}
}
.box-bottom {
width: 100%;
height: calc(100% - 40px);
overflow-y: auto;
margin-top: 10px;
overflow-x: hidden;
.box-bottom-item {
.box-bottom-items {
width: 100%;
height: 478px;
background-image: url(../../image/airConditioningSystem/newTrendModelBg.png);
height: 354px;
background-image: url(../../image/airConditioningSystem/conditioningModelBg.png);
background-size: 100% 99%;
background-repeat: no-repeat;
color: white;
@ -128,22 +195,53 @@
left: 62px;
top: 7px;
}
.box-bottom-item-line {
width: 100%;
flex: 1;
background-color: #0d1b32;
font-size: 14px;
padding: 6px 24px;
.box-bottom-item-line-value {
display: flex;
align-items: center;
position: relative;
.box-bottom-item-line-value {
display: flex;
position: absolute;
right: 24px;
font-weight: bold;
}
position: absolute;
right: 24px;
font-weight: bold;
}
}
.box-bottom-top {
width: 100%;
height: 50px;
display: flex;
position: relative;
padding: 6px 24px;
font-size: 14px;
background-color: #0d1b32;
align-items: center;
}
.box-bottom-center {
width: 100%;
height: 100px;
display: flex;
position: relative;
padding: 6px 24px;
font-size: 14px;
background-color: #0d1b32;
flex-direction: column;
}
}
/* 禁用状态下的轨道样式 */
:deep(.ant-slider-disabled .ant-slider-track) {
background-color: #91caff !important; /* 自定义颜色 */
}
/* 禁用状态下的滑块样式 */
:deep(.ant-slider-disabled .ant-slider-handle) {
background-color: #ffffff !important; /* 自定义颜色 */
border-color: #91caff !important; /* 自定义颜色 */
}
/* 禁用状态下的底部轨道样式 */
:deep(.ant-slider-disabled .ant-slider-rail) {
background-color: #384c5d !important; /* 自定义颜色 */
}
.openzm {
cursor: pointer;
margin-left: 12px;
font-size: 14px;
}
</style>

149
hx-ai-intelligent/src/view/equipmentControl/airConditioningSystem/components/floorHeatingModel.vue
View File

@ -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>

113
hx-ai-intelligent/src/view/equipmentControl/airConditioningSystem/components/newTreedBox.vue
View File

@ -0,0 +1,113 @@
<template>
<div class="newTrend-box-item">
<div class="newTrend-box-item-box">
<div class="newTrend-box-item-box-line">
开关
<div class="newTrend-box-item-box-line-value">
<a-tag
style="background-color: #2d3f5b; width: 50px; text-align: center"
:style="{
border: '1px solid' + ['#39d7bb', '#f3614d', '#ffa403'][0],
color: ['#39d7bb', '#f3614d', '#ffa403'][0],
}"
>开启</a-tag
>
</div>
</div>
</div>
<div class="newTrend-box-item-box">
<div class="newTrend-box-item-box-line">
出风温/湿度
<div class="newTrend-box-item-box-line-value">
<span style="color: #00ffd2">8℃/22%</span>
</div>
</div>
</div>
<div class="newTrend-box-item-box">
<div class="newTrend-box-item-box-line">
滤网压差
<div class="newTrend-box-item-box-line-value">
<span style="color: #00ffd2">0.14kpa</span>
</div>
</div>
</div>
<div class="newTrend-box-item-box">
<div class="newTrend-box-item-box-line">
PM2.5
<div class="newTrend-box-item-box-line-value">
<span style="color: #00ffd2">30</span>
</div>
</div>
</div>
<div class="newTrend-box-item-box">
<div class="newTrend-box-item-box-line">
风扇转速
<div class="newTrend-box-item-box-line-value">
<span style="color: #f59a23">1210转/分钟</span>
</div>
</div>
</div>
<div class="newTrend-box-item-box">
<div class="newTrend-box-item-box-line">
回风温/湿度
<div class="newTrend-box-item-box-line-value">
<span style="color: #f59a23">{{ selectConditioning.number }}℃/42%</span>
</div>
</div>
</div>
<div class="newTrend-box-item-box">
<div class="newTrend-box-item-box-line">
滤网时间
<div class="newTrend-box-item-box-line-value">
<span style="color: #00ffd2">248/h</span>
</div>
</div>
</div>
<div class="newTrend-box-item-box">
<div class="newTrend-box-item-box-line">
二氧化碳
<div class="newTrend-box-item-box-line-value">
<span style="color: #00ffd2">123CO2e</span>
</div>
</div>
</div>
</div>
</template>
<script lang="ts" setup>
defineProps({
selectConditioning: {
type: Object,
default: () => {
return {};
},
},
});
</script>
<style lang="less" scoped>
.newTrend-box-item {
width: 100%;
height: 100%;
display: flex;
flex-wrap: wrap;
.newTrend-box-item-box {
width: 240px;
height: 60px;
padding: 6px;
.newTrend-box-item-box-line {
width: 100%;
height: 100%;
background-color: #2d3f5b;
padding: 12px 24px;
display: flex;
align-items: center;
position: relative;
}
.newTrend-box-item-box-line-value {
display: flex;
position: absolute;
right: 12px;
font-weight: bold;
}
}
}
</style>

191
hx-ai-intelligent/src/view/equipmentControl/airConditioningSystem/index.vue
View File

@ -112,25 +112,57 @@
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" />
<conditioningModel
ref="conditioningModels"
@selectConditioningData="selectConditioningData" />
</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 }}
<transition name="zep">
<div
v-if="selectIndex === 3 && selectConditioning && selectConditioning?.title"
class="newTrend-box">
<newTreedBox :selectConditioning="selectConditioning" />
</div>
</transition>
<!-- 地暖 -->
<div v-if="selectIndex === 5">
<template v-for="(item, index) in floorHeatingData" :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/floorHeatingIcon.png" />
</template>
</div>
<!-- 地暖详情 -->
<a-drawer
:visible="selectIndex === 5"
: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">
<floorHeatingModel :dataSource="floorHeatingData" />
</a-drawer>
</div>
</div>
</template>
@ -152,9 +184,10 @@
import doubleSingleModel from '../components/doubleSingleModel.vue';
import newTrendModel from './components/newTrendModel.vue';
import conditioningModel from './components/conditioningModel.vue';
onMounted(() => {
selectConditioning.value = conditioningData.value[0];
});
import newTreedBox from './components/newTreedBox.vue';
import floorHeatingModel from './components/floorHeatingModel.vue';
onMounted(() => {});
onUnmounted(() => {});
//图例
const legend = ref([
@ -399,18 +432,84 @@
url: freshAir,
},
]);
const conditioningModels = ref(null);
//选择的空调箱
const selectConditioning = ref({});
//子组件 选择空调箱
const selectConditioningData = (data: any) => {
selectConditioning.value = {};
setTimeout(() => {
selectConditioning.value = { ...data };
}, 100);
};
// 地暖
const floorHeatingData = ref([
{
title: '走廊西地暖',
styleText: { left: '13.5%', bottom: '34%' },
type: '地暖',
unit: '℃',
number: 10,
url: freshAir,
},
{
title: '站厅西地暖',
styleText: { left: '19.5%', bottom: '38.5%' },
lineType: 1,
unit: '℃',
number: 10,
url: freshAir,
},
{
title: '站厅西地暖',
styleText: { left: '33%', bottom: '43%' },
lineType: 1,
unit: '℃',
number: 10,
url: freshAir,
},
{
title: '安检区地暖',
styleText: { left: '46%', bottom: '49.5%' },
lineType: 1,
unit: '℃',
number: 40,
url: freshAir,
},
{
title: '站厅东地暖',
styleText: { left: '57.5%', bottom: '56%' },
lineType: 1,
unit: '℃',
number: 10,
url: freshAir,
},
{
title: '办公东地暖',
styleText: { left: '69.5%', bottom: '62%' },
lineType: 1,
unit: '℃',
number: 10,
url: freshAir,
},
]);
// 选择的图例
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);
if (selectIndex.value === 2) {
setTimeout(() => {
newTrendModels.value.toggle(newTrend);
}, 100);
} else if (selectIndex.value === 3) {
if (!selectConditioning.value?.title) {
selectConditioning.value = { ...conditioningData.value[0] };
}
setTimeout(() => {
conditioningModels.value.toggle(conditioningData.value, selectConditioning.value);
}, 100);
}
}
};
const handleClose = () => {
@ -467,4 +566,48 @@
margin-left: -10px;
}
}
.newTrend-box {
width: 990px;
height: 146px;
background-color: #282d33;
position: absolute;
top: 20px;
right: 380px;
border-radius: 12px;
padding: 12px;
color: white;
}
.zep-enter-active,
.zep-leave-active {
animation-duration: 0.6s; /* 增加动画持续时间 */
animation-timing-function: ease-in-out; /* 使用更平滑的动画曲线 */
}
.zep-enter-active {
animation-name: bounce-enter;
}
.zep-leave-active {
animation-name: bounce-leave;
}
/* 进入动画 */
@keyframes bounce-enter {
0% {
opacity: 0; /* 初始时完全透明 */
}
100% {
opacity: 1; /* 结束时完全不透明 */
}
}
/* 离开动画 */
@keyframes bounce-leave {
0% {
opacity: 1; /* 初始时完全不透明 */
}
100% {
opacity: 0; /* 结束时完全透明 */
}
}
</style>

BIN
hx-ai-intelligent/src/view/equipmentControl/image/airConditioningSystem/conditioningModelBg.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.0 KiB

BIN
hx-ai-intelligent/src/view/equipmentControl/image/airConditioningSystem/conditioningModelIcon.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.3 KiB

BIN
hx-ai-intelligent/src/view/equipmentControl/image/airConditioningSystem/floorHeatingIcon.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.9 KiB

Write Preview
Loading…
Cancel
Save