add:新风系统

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

@@ -0,0 +1,116 @@
+<!-- 双图 -->
+<template>
+  <div class="box">
+    <div class="box-title title">
+      {{ dataSource.title }}
+    </div>
+    <div
+      style="
+        width: 100%;
+        height: 80px;
+        margin-top: 12px;
+        display: flex;
+        color: white;
+        font-size: 12px;
+      ">
+      <div
+        style="
+          width: 50%;
+          height: 100%;
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          justify-content: center;
+        ">
+        <img style="width: 39px" src="../image/airConditioningSystem/electricFan.png" />
+        <div style="margin-top: 4px"> 风量 </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>
+        </div>
+      </div>
+      <div
+        style="
+          width: 50%;
+          height: 100%;
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          justify-content: center;
+        ">
+        <img style="width: 39px" :src="getSunUrl()" />
+        <div style="margin-top: 4px"> 温度 </div>
+        <div style="margin-top: -5px">
+          <span :style="{ fontSize: '18px', color: getColor(), fontStyle: 'italic' }">
+            {{ dataSource.number }}
+          </span>
+          <span style="font-size: 10px; margin-left: 5px">℃</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+  import sunRed from '../image/airConditioningSystem/sunRed.png';
+  import sunYellow from '../image/airConditioningSystem/sunYellow.png';
+  import sunBlue from '../image/airConditioningSystem/sunBlue.png';
+  const props = defineProps({
+    dataSource: {
+      type: Object,
+      default: () => ({ title: '', number: 0 }), // 假设默认值还包括number属性
+    },
+  });
+  const getSunUrl = () => {
+    if (props.dataSource.number > 0 && props.dataSource.number < 20) {
+      return sunBlue;
+    } else if (props.dataSource.number >= 20 && props.dataSource.number < 30) {
+      return sunYellow;
+    } else {
+      return sunRed;
+    }
+  };
+  const getColor = () => {
+    if (props.dataSource.number > 0 && props.dataSource.number < 20) {
+      return '#0dffa4';
+    } else if (props.dataSource.number >= 20 && props.dataSource.number < 30) {
+      return '#f59a23';
+    } else {
+      return '#f36163';
+    }
+  };
+</script>
+<style lang="less" scoped>
+  .box {
+    width: 192px;
+    height: 125px;
+    background: inherit;
+    background-color: rgba(2, 29, 71, 0.9);
+    box-sizing: border-box;
+    border-width: 1px;
+    border-style: solid;
+    border-color: rgba(13, 255, 255, 1);
+    border-radius: 8px;
+    .title {
+      position: relative;
+      padding-left: 9px;
+      &::before {
+        content: '';
+        position: absolute;
+        left: 10px;
+        top: 90%;
+        transform: translateY(-50%);
+        height: 10px;
+        width: 2.5px;
+        border-radius: 1px;
+        background-color: #0dffff;
+      }
+    }
+    .box-title {
+      width: 100%;
+      height: 20px;
+      font-size: 12px;
+      color: #0dffff;
+      padding: 12px 20px;
+    }
+  }
+</style>

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

@@ -20,7 +20,7 @@
     dataSource: {
       type: Object,
       default: () => {
-        return { name: '' };
+        return { title: '' };
       },
     },
   });