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

4 months ago · bab2e8def5
6 changed files with 139 additions and 34 deletions
--- 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,
--- 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;
--- 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"
--- 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>
--- a/hx-ai-intelligent/src/view/equipmentControl/image/airConditioningSystem/buttonBg.svg
+++ 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>
--- 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>