fix:修改新风系统弹窗 优化页面展示

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

@@ -91,7 +91,7 @@ const equipmentControl = {
     //     {
     //       path: 'index',
     //       name: 'ventilationSystemIndex',
-    //       component: () => import('/@/view/equipmentControl/airConditioningSystem/index.vue'),
+    //       component: () => import('/@/view/equipmentControl/ventilationSystem/index.vue'),
     //       meta: {
     //         title: '通风系统',
     //         keepAlive: false,

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

@@ -6,13 +6,15 @@
     <div class="box-center">
       <template v-if="!showAllButtons">
         <template v-for="(item, index) in dataSource.slice(0, 3)" :key="index">
-          <div
+          <div style="width: 97.3px; height: 39px; background-color: #aaaaaa; padding: 1px">
-            class="box-center-button"
+            <div
-            :style="{
+              class="box-center-button"
-              backgroundColor: item.title === selectConditioning.title ? '#a7e5ff' : '#b5cdd9',
+              :style="{
-            }"
+                backgroundColor: item.title === selectConditioning.title ? '#a7e5ff' : '#b5cdd9',
-            @click="selectConditioningData(item, index)">
+              }"
-            {{ item.title }}
+              @click="selectConditioningData(item, index)">
+              {{ item.title }}
+            </div>
           </div>
         </template>
         <div style="width: 100%; height: 20px">
@@ -21,13 +23,15 @@
       </template>
       <template v-else>
         <template v-for="(item, index) in dataSource" :key="index">
-          <div
+          <div style="width: 94px; height: 39px; background-color: #aaaaaa; padding: 1px">
-            class="box-center-button"
+            <div
-            :style="{
+              class="box-center-button"
-              backgroundColor: item.title === selectConditioning.title ? '#a7e5ff' : '#b5cdd9',
+              :style="{
-            }"
+                backgroundColor: item.title === selectConditioning.title ? '#a7e5ff' : '#b5cdd9',
-            @click="selectConditioningData(item, index)">
+              }"
-            {{ item.title }}
+              @click="selectConditioningData(item, index)">
+              {{ item.title }}
+            </div>
           </div>
         </template>
         <div style="width: 100%; height: 20px">
@@ -171,10 +175,13 @@
     flex-wrap: wrap;
     gap: 10px;
     .box-center-button {
-      width: 95px;
+      width: 100%;
-      height: 40px;
+      height: 100%;
-      background-color: #b5cdd9;
+      // background-color: #b5cdd9;
-      border: 1px solid #aaaaaa;
+      background-image: url(../../image/airConditioningSystem/buttonBg.svg);
+      background-size: 100%;
+      background-repeat: no-repeat;
+      border-radius: 4px; /* 圆角半径 */
       text-align: center;
       line-height: 40px;
       cursor: pointer;

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

@@ -125,7 +125,7 @@
         </div>
       </transition>
       <!-- 地暖 -->
-      <div v-if="selectIndex === 5">
+      <div v-if="selectIndex === 4">
         <template v-for="(item, index) in floorHeatingData" :key="index">
           <div
             style="position: absolute"
@@ -153,7 +153,7 @@
       </div>
       <!-- 地暖详情 -->
       <a-drawer
-        :visible="selectIndex === 5"
+        :visible="selectIndex === 4"
         :title="' '"
         :mask="false"
         class="newTrendModel"

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

@@ -4,11 +4,23 @@
     <div class="box-title title">
       {{ dataSource.title }}
     </div>
-    <div style="width: 100%; height: 50px; position: relative; display: flex">
+    <div style="width: auto; height: 50px; position: relative; display: flex">
       <img class="box-img" :src="dataSource.url" />
-      <div class="box-type"> {{ dataSource.type }}</div>
+      <div
-      <div class="box-number">{{ dataSource.number }}</div>
+        class="box-type"
-      <div class="box-unit"> {{ dataSource.unit }}</div>
+        :style="{
+          fontSize: dataSource.type === '二氧化碳' ? '8px' : '10px',
+        }">
+        {{ dataSource.type }}</div
+      >
+      <div
+        class="box-number"
+        :style="{
+          left: dataSource.type === '二氧化碳' ? '95px' : '90px',
+        }"
+        >{{ dataSource.number }}</div
+      >
+      <div v-if="dataSource?.unit" class="box-unit"> {{ dataSource.unit }}</div>
       <div style="position: absolute; bottom: -16px">
         <img style="width: 12px" src="../image/airConditioningSystem/triangle.png" />
       </div>
@@ -27,7 +39,7 @@
 </script>
 <style lang="less" scoped>
   .box {
-    min-width: 130px;
+    min-width: 100px;
     width: auto;
     height: 80px;
     background-color: #213479;
@@ -70,27 +82,39 @@
       font-size: 10px;
       left: 50px;
       top: 53%;
-      transform: translateY(-50%);
+      width: auto;
-      position: absolute;
+      height: 100%;
+      line-height: 50px;
+      margin-left: 50px;
+      min-width: 30px;
+      margin-right: 4px;
     }
     .box-number {
       color: #0dffa4;
       font-size: 18px;
-      left: 90px;
+      left: 72%;
       top: 45%;
-      transform: translate(-50%, -50%);
+      width: auto;
-      position: absolute;
+      text-align: center;
       font-weight: bold;
       box-sizing: border-box;
       font-style: italic;
+      width: auto;
+      height: 100%;
+      line-height: 48px;
+      min-width: 20px;
     }
     .box-unit {
       color: white;
       font-size: 8px;
-      position: absolute;
-      right: 10px;
       top: 53%;
-      transform: translateY(-50%);
+      min-width: 20px;
+      width: auto;
+      height: 100%;
+      line-height: 55px;
+      margin-left: 5px;
+      text-align: center;
+      margin-right: 8px;
     }
   }
 </style>

hx-ai-intelligent/src/view/equipmentControl/image/airConditioningSystem/buttonBg.svg

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="92px" height="40px" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <linearGradient gradientUnits="userSpaceOnUse" x1="46.322043987086204" y1="39.5875" x2="46.085720439870855" y2="-0.8416250000000192" id="LinearGradient79">
+      <stop id="Stop80" stop-color="#ffffff" stop-opacity="0" offset="0" />
+      <stop id="Stop81" stop-color="#8ad7ff" stop-opacity="0.996078431372549" offset="1" />
+    </linearGradient>
+  </defs>
+  <g>
+    <path d="M 1 4.000000000000001  A 3 3 0 0 1 3.999999999999999 1 L 88 1  A 3 3 0 0 1 91 4 L 91 36  A 3 3 0 0 1 88 39 L 4 39  A 3 3 0 0 1 1 36 L 1 4  Z " fill-rule="nonzero" fill="url(#LinearGradient79)" stroke="none" />
+  </g>
+</svg>

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

@@ -41,6 +41,30 @@
         </template>
       </div>
     </transition>
+    <!-- PM2.5 -->
+    <transition name="zep">
+      <div v-if="selectIndex === 2">
+        <template v-for="(item, index) in pmData" :key="index">
+          <div
+            style="position: absolute"
+            :style="{ left: item.styleText.left, bottom: item.styleText.bottom }">
+            <singleModel :dataSource="item" />
+          </div>
+        </template>
+      </div>
+    </transition>
+    <!-- CO2e -->
+    <transition name="zep">
+      <div v-if="selectIndex === 3">
+        <template v-for="(item, index) in CO2Data" :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>
@@ -116,6 +140,44 @@
       url: humidity,
     },
   ]);
+  //PM2.5数组
+  const pmData = ref([
+    {
+      title: '多功能传感器A',
+      styleText: { left: '48%', bottom: '64%' },
+      type: 'pm2.5',
+      unit: '',
+      number: 20,
+      url: PM25,
+    },
+    {
+      title: '多功能传感器B',
+      styleText: { left: '48.2%', bottom: '43%' },
+      type: 'pm2.5',
+      unit: '',
+      number: 20,
+      url: PM25,
+    },
+  ]);
+  //二氧化碳 浓度
+  const CO2Data = ref([
+    {
+      title: '多功能传感器A',
+      styleText: { left: '48%', bottom: '64%' },
+      type: '二氧化碳',
+      unit: 'CO2e',
+      number: 20,
+      url: CO2,
+    },
+    {
+      title: '多功能传感器B',
+      styleText: { left: '48.2%', bottom: '43%' },
+      type: '二氧化碳',
+      unit: 'CO2e',
+      number: 99,
+      url: CO2,
+    },
+  ]);
   onMounted(() => {});
   onUnmounted(() => {});
 </script>