add:群控

hx-ai-intelligent/src/router/equipmentControl.ts

@@ -81,6 +81,25 @@ const equipmentControl = {
         },
       ],
     },
+    // {
+    //   path: 'ventilationSystem',
+    //   name: 'ventilationSystem',
+    //   meta: { title: '通风系统', hideChildren: true, icon: 'shebeiqunkong' },
+    //   component: Base,
+    //   redirect: { name: 'ventilationSystemIndex' },
+    //   children: [
+    //     {
+    //       path: 'index',
+    //       name: 'ventilationSystemIndex',
+    //       component: () => import('/@/view/equipmentControl/airConditioningSystem/index.vue'),
+    //       meta: {
+    //         title: '通风系统',
+    //         keepAlive: false,
+    //         // backApi: [],
+    //       },
+    //     },
+    //   ],
+    // },
   ],
 };
 export default equipmentControl;

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

@@ -1,5 +1,5 @@
 <template>
-  <div style="width: 100%; height: 100%">
+  <div style="width: 100%; height: 100%; overflow: hidden">
     <div class="box-title title">
       <span style="margin-left: 12px">空调箱组</span>
     </div>
@@ -77,7 +77,19 @@
             <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" />
+                <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>
           </div>
@@ -114,7 +126,6 @@
     100: 100,
   });
   const toggle = (data: any, selectData: any) => {
-    console.log(data, '数据');
     dataSource.value = data;
     selectConditioning.value = selectData;
   };
@@ -244,4 +255,31 @@
     margin-left: 12px;
     font-size: 14px;
   }
+
+  .blue-background.ant-switch-checked {
+    background-color: linear-gradient(
+      180deg,
+      rgba(1, 206, 255, 1) 0%,
+      rgba(0, 150, 229, 1) 100%
+    ) !important;
+  }
+
+  .grey-background.ant-switch {
+    background-color: grey !important;
+  }
+
+  .blue-background.ant-switch-checked .ant-switch-handle {
+    background-color: linear-gradient(
+      180deg,
+      rgba(1, 206, 255, 1) 0%,
+      rgba(0, 150, 229, 1) 100%
+    ) !important;
+  }
+
+  .grey-background.ant-switch .ant-switch-handle {
+    background-color: grey !important;
+  }
+  :deep(.ant-switch-disabled) {
+    opacity: 1 !important;
+  }
 </style>

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

@@ -5,61 +5,30 @@
     </div>
     <div class="box-bottom">
       <template v-for="(item, index) in dataSource" :key="index">
-        <div class="box-bottom-item">
+        <div class="box-bottom-itemFH">
           <div class="box-bottom-item-top">
-            <img width="42" src="../../image/airConditioningSystem/newTrendModelIcon.png" />
+            <img width="42" src="../../image/airConditioningSystem/floorHeatingModelIcon.png" />
             <div class="box-bottom-item-top-title">
               {{ item.title }}
             </div>
             <div
-              style="width: 100%; height: 400px; display: flex; gap: 12px; flex-direction: column">
+              style="width: 100%; height: 180px; 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
-                  >
+                  <span style="color: #00ffd2">{{ item.number }}℃</span>
                 </div>
               </div>
               <div class="box-bottom-item-line">
-                电机转速
+                设置
                 <div class="box-bottom-item-line-value">
-                  <span style="color: #f59a23">1210转/分钟</span>
+                  <span style="color: #00ffd2">{{ item.setUpNumber }}℃</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>
+                  <span style="color: #00ffd2">0.08~0.4Mpa</span>
                 </div>
               </div>
             </div>
@@ -108,10 +77,10 @@
     overflow-y: auto;
     margin-top: 10px;
     overflow-x: hidden;
-    .box-bottom-item {
+    .box-bottom-itemFH {
       width: 100%;
-      height: 478px;
-      background-image: url(../../image/airConditioningSystem/newTrendModelBg.png);
+      height: 258px;
+      background-image: url(../../image/airConditioningSystem/floorHeatingModelBg.png);
       background-size: 100% 99%;
       background-repeat: no-repeat;
       color: white;
@@ -141,7 +110,7 @@
           display: flex;
           position: absolute;
           right: 24px;
-          font-weight: bold;
+          font-weight: 600;
         }
       }
     }

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

@@ -373,6 +373,7 @@
       styleText: { left: '13%', bottom: '23%' },
       type: '空调箱',
       lineType: 1,
+      enableRules: 1,
       unit: '℃',
       number: 20,
       url: freshAir,
@@ -450,47 +451,52 @@
       type: '地暖',
       unit: '℃',
       number: 10,
-      url: freshAir,
+      setUpNumber: 12,
     },
     {
       title: '站厅西地暖',
       styleText: { left: '19.5%', bottom: '38.5%' },
+      type: '地暖',
       lineType: 1,
       unit: '℃',
       number: 10,
-      url: freshAir,
+      setUpNumber: 14,
     },
     {
       title: '站厅西地暖',
       styleText: { left: '33%', bottom: '43%' },
+      type: '地暖',
       lineType: 1,
       unit: '℃',
-      number: 10,
-      url: freshAir,
+      number: 24,
+      setUpNumber: 16,
     },
     {
       title: '安检区地暖',
       styleText: { left: '46%', bottom: '49.5%' },
+      type: '地暖',
       lineType: 1,
       unit: '℃',
       number: 40,
-      url: freshAir,
+      setUpNumber: 18,
     },
     {
       title: '站厅东地暖',
       styleText: { left: '57.5%', bottom: '56%' },
+      type: '地暖',
       lineType: 1,
       unit: '℃',
       number: 10,
-      url: freshAir,
+      setUpNumber: 20,
     },
     {
       title: '办公东地暖',
       styleText: { left: '69.5%', bottom: '62%' },
+      type: '地暖',
       lineType: 1,
       unit: '℃',
       number: 10,
-      url: freshAir,
+      setUpNumber: 22,
     },
   ]);
   // 选择的图例

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

@@ -22,11 +22,15 @@
           align-items: center;
           justify-content: center;
         ">
-        <img style="width: 39px" src="../image/airConditioningSystem/electricFan.png" />
-        <div style="margin-top: 4px"> 风量 </div>
+        <img style="width: 39px" :src="dataSource.type === '地暖' ? setUp : electricFan" />
+        <div style="margin-top: 4px"> {{ dataSource.type === '地暖' ? '设置' : '风量' }} </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>
+          <span style="font-size: 18px; color: #0dffff; font-style: italic">
+            {{ dataSource.type === '地暖' ? dataSource.setUpNumber : '18' }}
+          </span>
+          <span style="font-size: 10px; margin-left: 5px">{{
+            dataSource.type === '地暖' ? '℃' : 'm3/h'
+          }}</span>
         </div>
       </div>
       <div
@@ -54,6 +58,10 @@
   import sunRed from '../image/airConditioningSystem/sunRed.png';
   import sunYellow from '../image/airConditioningSystem/sunYellow.png';
   import sunBlue from '../image/airConditioningSystem/sunBlue.png';
+
+  import electricFan from '../image/airConditioningSystem/electricFan.png';
+  import setUp from '../image/airConditioningSystem/setUp.png';
+
   const props = defineProps({
     dataSource: {
       type: Object,

hx-ai-intelligent/src/view/equipmentControl/ventilationSystem/index.vue

@@ -0,0 +1,198 @@
+<template>
+  <div class="box-ventilationSystem">
+    <div class="legend-box">
+      <template v-for="(item, index) in legend" :key="index">
+        <div
+          class="legend-box-item"
+          :style="{
+            'background-image': selectIndex === index ? 'url(' + selectImg + ')' : '',
+          }"
+          @click="selectLegend(item, index)">
+          <div class="legend-box-item-img">
+            <img style="width: 42px" :src="item.url" />
+          </div>
+          <div class="legend-box-item-name">
+            {{ item.name }}
+          </div>
+        </div>
+      </template>
+    </div>
+    <!-- 温度 -->
+    <transition name="zep">
+      <div v-if="selectIndex === 0">
+        <template v-for="(item, index) in sensorData" :key="index">
+          <div
+            style="position: absolute"
+            :style="{ left: item.styleText.left, bottom: item.styleText.bottom }">
+            <singleModel :dataSource="item" />
+          </div>
+        </template>
+      </div>
+    </transition>
+    <!-- 湿度 -->
+    <transition name="zep">
+      <div v-if="selectIndex === 1">
+        <template v-for="(item, index) in humidityData" :key="index">
+          <div
+            style="position: absolute"
+            :style="{ left: item.styleText.left, bottom: item.styleText.bottom }">
+            <singleModel :dataSource="item" />
+          </div>
+        </template>
+      </div>
+    </transition>
+  </div>
+</template>
+<script lang="ts" setup>
+  import { ref, onMounted, onUnmounted } from 'vue';
+  //图片
+  import temperature from '../image/airConditioningSystem/temperature.png';
+  import humidity from '../image/ventilationSystem/humidity.png';
+  import PM25 from '../image/ventilationSystem/PM25.png';
+  import CO2 from '../image/ventilationSystem/CO2.png';
+  import ventilatingFan from '../image/ventilationSystem/ventilatingFan.png';
+  import window from '../image/ventilationSystem/window.png';
+  import fanMachine from '../image/ventilationSystem/fanMachine.png';
+  import selectImg from '../image/airConditioningSystem/selectImg.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';
+
+  //图例
+  const legend = ref([
+    { url: temperature, name: '温度' },
+    { url: humidity, name: '湿度' },
+    { url: PM25, name: 'PM2.5' },
+    { url: CO2, name: 'CO2浓度' },
+    { url: ventilatingFan, name: '排风扇' },
+    { url: fanMachine, name: '风幕机' },
+    { url: window, name: '电动窗' },
+  ]);
+  // 选择的图例
+  const selectIndex = ref(0);
+  //选择方法
+  const selectLegend = (item: any, index: any) => {
+    if (selectIndex.value !== index) {
+      selectIndex.value = index;
+    }
+  };
+  //温度数组
+  const sensorData = ref([
+    {
+      title: '多功能传感器A',
+      styleText: { left: '48%', bottom: '64%' },
+      type: '温度',
+      unit: '℃',
+      number: 20,
+      url: sunRed,
+    },
+    {
+      title: '多功能传感器B',
+      styleText: { left: '48.2%', bottom: '43%' },
+      type: '温度',
+      unit: '℃',
+      number: 20,
+      url: sunYellow,
+    },
+  ]);
+  //湿度数组
+  const humidityData = ref([
+    {
+      title: '多功能传感器A',
+      styleText: { left: '48%', bottom: '64%' },
+      type: '湿度',
+      unit: '%',
+      number: 20,
+      url: humidity,
+    },
+    {
+      title: '多功能传感器B',
+      styleText: { left: '48.2%', bottom: '43%' },
+      type: '湿度',
+      unit: '%',
+      number: 20,
+      url: humidity,
+    },
+  ]);
+  onMounted(() => {});
+  onUnmounted(() => {});
+</script>
+<style lang="less">
+  .legend-box {
+    width: 5%;
+    height: 100%;
+    background-color: rgba(33, 40, 54, 0.9);
+    border-radius: 4px 0px 0px 4px;
+    padding: 4px;
+    .legend-box-item {
+      width: 100%;
+      height: 90px;
+      padding: 10px 0;
+      cursor: pointer;
+      background-size: 75%;
+      background-repeat: no-repeat;
+      background-position: center; /* 把图片背景居中 */
+      .legend-box-item-img {
+        width: 100%;
+        height: 50px;
+        display: flex;
+        justify-content: center; /* 水平居中 */
+        align-items: center; /* 垂直居中 */
+      }
+      .legend-box-item-name {
+        width: 100%;
+        display: flex;
+        justify-content: center; /* 水平居中 */
+        align-items: center; /* 垂直居中 */
+        color: white;
+        font-size: 12px;
+        margin-top: 6px;
+      }
+    }
+  }
+  .box-ventilationSystem {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    overflow: hidden;
+    background-image: url('../image/ventilationSystem/ventilationSystemBg.png');
+    background-size: 100% 99.9%;
+    background-repeat: no-repeat;
+    position: relative;
+  }
+  .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>