From bab2e8def53b592c0356f1bca2abc2dccf26e4aa Mon Sep 17 00:00:00 2001
From: zhaohy <1695786511@qq.com>
Date: Fri, 2 Aug 2024 10:45:49 +0800
Subject: [PATCH] =?UTF-8?q?fix:=E4=BF=AE=E6=94=B9=E6=96=B0=E9=A3=8E?=
 =?UTF-8?q?=E7=B3=BB=E7=BB=9F=E5=BC=B9=E7=AA=97=20=E4=BC=98=E5=8C=96?=
 =?UTF-8?q?=E9=A1=B5=E9=9D=A2=E5=B1=95=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 hx-ai-intelligent/src/router/equipmentControl.ts   |  2 +-
 .../components/conditioningModel.vue               | 43 ++++++++-------
 .../airConditioningSystem/index.vue                |  4 +-
 .../equipmentControl/components/singleModel.vue    | 50 ++++++++++++-----
 .../image/airConditioningSystem/buttonBg.svg       | 12 +++++
 .../equipmentControl/ventilationSystem/index.vue   | 62 ++++++++++++++++++++++
 6 files changed, 139 insertions(+), 34 deletions(-)
 create mode 100644 hx-ai-intelligent/src/view/equipmentControl/image/airConditioningSystem/buttonBg.svg

diff --git a/hx-ai-intelligent/src/router/equipmentControl.ts b/hx-ai-intelligent/src/router/equipmentControl.ts
index bbe647b..32b7c71 100644
--- a/hx-ai-intelligent/src/router/equipmentControl.ts
+++ b/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,
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 3f226bd..d253b5a 100644
--- a/hx-ai-intelligent/src/view/equipmentControl/airConditioningSystem/components/conditioningModel.vue
+++ b/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
-            class="box-center-button"
-            :style="{
-              backgroundColor: item.title === selectConditioning.title ? '#a7e5ff' : '#b5cdd9',
-            }"
-            @click="selectConditioningData(item, index)">
-            {{ item.title }}
+          <div style="width: 97.3px; height: 39px; background-color: #aaaaaa; padding: 1px">
+            <div
+              class="box-center-button"
+              :style="{
+                backgroundColor: item.title === selectConditioning.title ? '#a7e5ff' : '#b5cdd9',
+              }"
+              @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
-            class="box-center-button"
-            :style="{
-              backgroundColor: item.title === selectConditioning.title ? '#a7e5ff' : '#b5cdd9',
-            }"
-            @click="selectConditioningData(item, index)">
-            {{ item.title }}
+          <div style="width: 94px; height: 39px; background-color: #aaaaaa; padding: 1px">
+            <div
+              class="box-center-button"
+              :style="{
+                backgroundColor: item.title === selectConditioning.title ? '#a7e5ff' : '#b5cdd9',
+              }"
+              @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;
-      height: 40px;
-      background-color: #b5cdd9;
-      border: 1px solid #aaaaaa;
+      width: 100%;
+      height: 100%;
+      // background-color: #b5cdd9;
+      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;
diff --git a/hx-ai-intelligent/src/view/equipmentControl/airConditioningSystem/index.vue b/hx-ai-intelligent/src/view/equipmentControl/airConditioningSystem/index.vue
index a3d2111..299f4cb 100644
--- a/hx-ai-intelligent/src/view/equipmentControl/airConditioningSystem/index.vue
+++ b/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"
diff --git a/hx-ai-intelligent/src/view/equipmentControl/components/singleModel.vue b/hx-ai-intelligent/src/view/equipmentControl/components/singleModel.vue
index a7d7d35..081f2fb 100644
--- a/hx-ai-intelligent/src/view/equipmentControl/components/singleModel.vue
+++ b/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 class="box-number">{{ dataSource.number }}</div>
-      <div class="box-unit"> {{ dataSource.unit }}</div>
+      <div
+        class="box-type"
+        :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%);
-      position: absolute;
+      width: auto;
+      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%);
-      position: absolute;
+      width: auto;
+      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>
diff --git a/hx-ai-intelligent/src/view/equipmentControl/image/airConditioningSystem/buttonBg.svg b/hx-ai-intelligent/src/view/equipmentControl/image/airConditioningSystem/buttonBg.svg
new file mode 100644
index 0000000..1f6adbb
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/hx-ai-intelligent/src/view/equipmentControl/ventilationSystem/index.vue b/hx-ai-intelligent/src/view/equipmentControl/ventilationSystem/index.vue
index d281f34..a21cac4 100644
--- a/hx-ai-intelligent/src/view/equipmentControl/ventilationSystem/index.vue
+++ b/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>