fix:新风系统 空调箱

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

@@ -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-items">
-        <div class="box-bottom-item">
+        <div class="box-bottom-item-top">
-          <div class="box-bottom-item-top">
+          <img width="42" src="../../image/airConditioningSystem/conditioningModelIcon.png" />
-            <img width="42" src="../../image/airConditioningSystem/newTrendModelIcon.png" />
+          <div class="box-bottom-item-top-title">
-            <div class="box-bottom-item-top-title">
+            {{ selectConditioning.title }}
-              {{ item.title }}
+          </div>
-            </div>
+
-            <div
+          <div style="width: 100%; height: 300px; display: flex; gap: 12px; flex-direction: column">
-              style="width: 100%; height: 400px; display: flex; gap: 12px; flex-direction: column">
+            <div class="box-bottom-top">
-              <div class="box-bottom-item-line">
+              开关
-                开关
+              <div class="box-bottom-item-line-value">
-                <div class="box-bottom-item-line-value">
+                <a-switch
-                  <a-tag
+                  :disabled="true"
-                    style="background-color: rgba(0, 0, 0, 0.5); width: 50px; text-align: center"
+                  :checked="selectConditioning.enableRules === 1 ? true : false"
-                    :style="{
+                  :class="{
-                      border: '1px solid' + ['#39d7bb', '#f3614d', '#ffa403'][0],
+                    'blue-background': selectConditioning.enableRules === 1 ? true : false,
-                      color: ['#39d7bb', '#f3614d', '#ffa403'][0],
+                    'grey-background': selectConditioning.enableRules === 1 ? false : true,
-                    }"
+                  }" />
-                    >开启</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">
+            </div>
-                PM2.5
+            <div class="box-bottom-center">
-                <div class="box-bottom-item-line-value">
+              <div style="width: 100%; height: 40px; line-height: 40px">温度 </div>
-                  <span style="color: #00ffd2">30</span>
+              <div style="width: 100%; height: 60px">
-                </div>
+                <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>
-                二氧化碳
+            <div class="box-bottom-center">
-                <div class="box-bottom-item-line-value">
+              <div style="width: 100%; height: 40px; line-height: 40px"> 风量 </div>
-                  <span style="color: #00ffd2">123CO2e</span>
+              <div style="width: 100%; height: 60px">
-                </div>
+                <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({
+  import { DownOutlined, UpOutlined, StopOutlined } from '@ant-design/icons-vue';
-    dataSource: {
+  import { ref } from 'vue';
-      type: Object,
+
-      default: () => {
+  // defineProps({
-        return { title: '' };
+  //   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;
+      height: 354px;
-      background-image: url(../../image/airConditioningSystem/newTrendModelBg.png);
+      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 {
+      .box-bottom-item-line-value {
-        width: 100%;
-        flex: 1;
-        background-color: #0d1b32;
-        font-size: 14px;
-        padding: 6px 24px;
         display: flex;
-        align-items: center;
+        position: absolute;
-        position: relative;
+        right: 24px;
-        .box-bottom-item-line-value {
+        font-weight: bold;
-          display: flex;
-          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>

hx-ai-intelligent/src/view/equipmentControl/airConditioningSystem/components/floorHeatingModel.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>

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

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

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">
-        <conditioningModel :dataSource="newTrend" />
+        <conditioningModel
+          ref="conditioningModels"
+          @selectConditioningData="selectConditioningData" />
       </a-drawer>
       <!-- 空调箱 顶部详情 -->
-      <div
+      <transition name="zep">
-        v-if="selectIndex === 3"
+        <div
-        style="
+          v-if="selectIndex === 3 && selectConditioning && selectConditioning?.title"
-          width: 974px;
+          class="newTrend-box">
-          height: 146px;
+          <newTreedBox :selectConditioning="selectConditioning" />
-          background-color: #282d33;
+        </div>
-          display: flex;
+      </transition>
-          position: absolute;
+      <!-- 地暖 -->
-          top: 20px;
+      <div v-if="selectIndex === 5">
-          right: 380px;
+        <template v-for="(item, index) in floorHeatingData" :key="index">
-          border-radius: 12px;
+          <div
-          padding: 12px;
+            style="position: absolute"
-          color: white;
+            :style="{
-        ">
+              left:
-        {{ selectConditioning.title }}
+                '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(() => {
+  import newTreedBox from './components/newTreedBox.vue';
-    selectConditioning.value = conditioningData.value[0];
+  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) {
-    if (selectIndex.value === 2) {
+        setTimeout(() => {
-      setTimeout(() => {
+          newTrendModels.value.toggle(newTrend);
-        newTrendModels.value.toggle(newTrend);
+        }, 100);
-      }, 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>