add:空调系统

2024-07-30 14:37:39 +08:00
parent 16d7f81f0e
commit 05409722ae
11 changed files with 364 additions and 0 deletions
--- a/hx-ai-intelligent/src/view/equipmentControl/components/singleModel.vue
+++ b/hx-ai-intelligent/src/view/equipmentControl/components/singleModel.vue
@@ -0,0 +1,96 @@
+<!-- 单个图片 图例 -->
+<template>
+  <div class="box">
+    <div class="box-title title">
+      {{ dataSource.title }}
+    </div>
+    <div style="width: 100%; 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 style="position: absolute; bottom: -16px">
+        <img style="width: 12px" src="../image/airConditioningSystem/triangle.png" />
+      </div>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+  defineProps({
+    dataSource: {
+      type: Object,
+      default: () => {
+        return { name: '' };
+      },
+    },
+  });
+</script>
+<style lang="less" scoped>
+  .box {
+    min-width: 130px;
+    width: auto;
+    height: 80px;
+    background-color: #213479;
+    border-radius: 0px 4px 4px 0px;
+    border-left: 4px solid #0dffff;
+    padding: 8px 0px;
+    .title {
+      position: relative;
+      padding-left: 9px;
+      &::before {
+        content: '';
+        position: absolute;
+        left: 10px;
+        top: 50%;
+        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: 0px 20px;
+    }
+    .box-img {
+      position: absolute;
+      transform: translateY(-50%);
+      top: 50%;
+      width: 35px;
+      height: 35px;
+      left: 10px;
+    }
+    .box-type {
+      height: 20px;
+      color: white;
+      font-size: 10px;
+      left: 50px;
+      top: 53%;
+      transform: translateY(-50%);
+      position: absolute;
+    }
+    .box-number {
+      color: #0dffa4;
+      font-size: 18px;
+      left: 90px;
+      top: 45%;
+      transform: translate(-50%, -50%);
+      position: absolute;
+      font-weight: bold;
+      box-sizing: border-box;
+      font-style: italic;
+    }
+    .box-unit {
+      color: white;
+      font-size: 8px;
+      position: absolute;
+      right: 10px;
+      top: 53%;
+      transform: translateY(-50%);
+    }
+  }
+</style>