fix

src/views/business/bigdata/components/weather-station-dialog.vue

@@ -9,14 +9,32 @@
       <a-descriptions-item label="设备维护人">{{ dataInfo.personName }}</a-descriptions-item>
       <a-descriptions-item label="维护人电话">{{ dataInfo.personPhone }}</a-descriptions-item>
     </a-descriptions>
+    <div class="weather-metrics">
+      <div class="weather-metrics-item" v-for="item in dataInfo.metrics" :key="item.label">
+        <div class="weather-metrics-item-content">
+          <div class="item-content">
+            <img
+              class="item-image"
+              :style="`position: absolute; top: 0; left: -20px; filter: drop-shadow(20px 0 ${iconColor[item.alarmType]})`"
+              :src="item.imageUrl"
+              alt="气象站环境因子"
+            />
+          </div>
+          <span class="item-label">{{ item.label }}</span>
+        </div>
+        <div class="weather-metrics-value">{{ item.value }}</div>
+      </div>
+    </div>
   </b-dialog>
 </template>
 
 <script setup>
   import BDialog from './b-dialog.vue';
   import { ref } from 'vue';
-
+  import { weatherStationApi } from '/@/api/business/weather-station/weather-station-api';
   const dataInfo = ref({});
+  const metricsKeys = ref([]);
+  const iconColor = ['#FFFFFF', '#F0142F', '#EDA200'];
   // ----------------------- 对外暴漏 ---------------------
 
   defineExpose({
@@ -28,11 +46,30 @@
 
   const visible = ref(false);
   async function showModal(item) {
-    console.log(item, 'item');
+    await queryCapacity();
     dataInfo.value = item.data;
+    let metrics = [];
+    metricsKeys.value.forEach((key) => {
+      let metric = {
+        imageUrl: key.fileUrl || new URL('/@/assets/images/bigdata/default-metric.svg', import.meta.url).href,
+        label: key.valueName,
+        value: dataInfo.value.dustNoiseDataVO?.[key.valueCode] || 0,
+        // 0 正常, 1 预警, 2 报警
+        alarmType: dataInfo.value.dustNoiseDataVO?.[key.valueCode + 'Alarm'] || 0,
+      };
+      if (dataInfo.value.capacity.includes(key.valueCode)) {
+        metrics.push(metric);
+      }
+    });
+    dataInfo.value.metrics = metrics.slice(0, 8);
     visible.value = true;
   }
 
+  async function queryCapacity() {
+    const result = await weatherStationApi.queryCapacity({});
+    metricsKeys.value = result.data;
+  }
+
   function closeModal() {
     visible.value = false;
   }
@@ -59,4 +96,64 @@
     color: #ffffff;
     line-height: 18px;
   }
+  .weather-metrics {
+    width: 100%;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 32px;
+    padding-top: 20px;
+    border-top: 1px solid #0298FF;
+    .weather-metrics-item {
+      width: auto;
+      &.warning {
+        .weather-metrics-item-content {
+          .item-label {
+            color: #f0142f;
+          }
+        }
+        .weather-metrics-value {
+          color: #f0142f;
+        }
+      }
+      &.alarm {
+        .weather-metrics-item-content {
+          .item-label {
+            color: #eda200;
+          }
+        }
+        .weather-metrics-value {
+          color: #eda200;
+        }
+      }
+      .weather-metrics-item-content {
+        display: flex;
+        align-items: center;
+        .item-content {
+          width: 16px;
+          height: 16px;
+          overflow: hidden;
+          position: relative;
+          flex-shrink: 0;
+          .item-image {
+            width: 16px;
+            height: 16px;
+          }
+        }
+        .item-label {
+          font-weight: 500;
+          font-size: 12px;
+          color: rgba(255, 255, 255, 0.7);
+          margin-left: 4px;
+          white-space: nowrap;
+        }
+      }
+      .weather-metrics-value {
+        padding-left: 4px;
+        font-weight: 500;
+        font-size: 14px;
+        color: #ffffff;
+        line-height: 18px;
+      }
+    }
+  }
 </style>