diff --git a/hx-ai-intelligent/src/view/equipmentControl/airConditioningSystem/components/conditioningModel.vue b/hx-ai-intelligent/src/view/equipmentControl/airConditioningSystem/components/conditioningModel.vue index 3fb8bdb..c4fb2c3 100644 --- a/hx-ai-intelligent/src/view/equipmentControl/airConditioningSystem/components/conditioningModel.vue +++ b/hx-ai-intelligent/src/view/equipmentControl/airConditioningSystem/components/conditioningModel.vue @@ -1,85 +1,133 @@ - diff --git a/hx-ai-intelligent/src/view/equipmentControl/airConditioningSystem/components/floorHeatingModel.vue b/hx-ai-intelligent/src/view/equipmentControl/airConditioningSystem/components/floorHeatingModel.vue new file mode 100644 index 0000000..2078284 --- /dev/null +++ b/hx-ai-intelligent/src/view/equipmentControl/airConditioningSystem/components/floorHeatingModel.vue @@ -0,0 +1,149 @@ + + + diff --git a/hx-ai-intelligent/src/view/equipmentControl/airConditioningSystem/components/newTreedBox.vue b/hx-ai-intelligent/src/view/equipmentControl/airConditioningSystem/components/newTreedBox.vue new file mode 100644 index 0000000..7f0fdec --- /dev/null +++ b/hx-ai-intelligent/src/view/equipmentControl/airConditioningSystem/components/newTreedBox.vue @@ -0,0 +1,113 @@ + + + diff --git a/hx-ai-intelligent/src/view/equipmentControl/airConditioningSystem/index.vue b/hx-ai-intelligent/src/view/equipmentControl/airConditioningSystem/index.vue index a02352c..c98f1e9 100644 --- a/hx-ai-intelligent/src/view/equipmentControl/airConditioningSystem/index.vue +++ b/hx-ai-intelligent/src/view/equipmentControl/airConditioningSystem/index.vue @@ -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"> - + -
- {{ selectConditioning.title }} + +
+ +
+ + +
+
+ + + +
@@ -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; /* 结束时完全透明 */ + } + } diff --git a/hx-ai-intelligent/src/view/equipmentControl/image/airConditioningSystem/conditioningModelBg.png b/hx-ai-intelligent/src/view/equipmentControl/image/airConditioningSystem/conditioningModelBg.png new file mode 100644 index 0000000..c628306 Binary files /dev/null and b/hx-ai-intelligent/src/view/equipmentControl/image/airConditioningSystem/conditioningModelBg.png differ diff --git a/hx-ai-intelligent/src/view/equipmentControl/image/airConditioningSystem/conditioningModelIcon.png b/hx-ai-intelligent/src/view/equipmentControl/image/airConditioningSystem/conditioningModelIcon.png new file mode 100644 index 0000000..e06d132 Binary files /dev/null and b/hx-ai-intelligent/src/view/equipmentControl/image/airConditioningSystem/conditioningModelIcon.png differ diff --git a/hx-ai-intelligent/src/view/equipmentControl/image/airConditioningSystem/floorHeatingIcon.png b/hx-ai-intelligent/src/view/equipmentControl/image/airConditioningSystem/floorHeatingIcon.png new file mode 100644 index 0000000..9fc85c5 Binary files /dev/null and b/hx-ai-intelligent/src/view/equipmentControl/image/airConditioningSystem/floorHeatingIcon.png differ