add:空调系统

hx-ai-intelligent/src/router/equipmentControl.ts

@@ -62,6 +62,25 @@ const equipmentControl = {
         },
       ],
     },
+    {
+      path: 'airConditioningSystem',
+      name: 'airConditioningSystem',
+      meta: { title: '空调系统', hideChildren: true, icon: 'shebeiqunkong' },
+      component: Base,
+      redirect: { name: 'airConditioningSystemIndex' },
+      children: [
+        {
+          path: 'index',
+          name: 'airConditioningSystemIndex',
+          component: () => import('/@/view/equipmentControl/airConditioningSystem/index.vue'),
+          meta: {
+            title: '空调系统',
+            keepAlive: false,
+            // backApi: [],
+          },
+        },
+      ],
+    },
   ],
 };
 export default equipmentControl;

hx-ai-intelligent/src/view/equipmentControl/airConditioningSystem/index.vue

@@ -0,0 +1,249 @@
+<template>
+  <div style="width: 100%; height: 100%; display: flex">
+    <div class="legend-box">
+      <template v-for="(item, index) in legend" :key="index">
+        <div
+          class="legend-box-item"
+          :style="{
+            'background-image': selectIndex === index ? 'url(' + selectImg + ')' : '',
+          }"
+          @click="selectLegend(item, index)">
+          <div class="legend-box-item-img">
+            <img style="width: 42px" :src="item.url" />
+          </div>
+          <div class="legend-box-item-name">
+            {{ item.name }}
+          </div>
+        </div>
+      </template>
+    </div>
+    <div class="map-box">
+      <!-- 温度 -->
+      <div v-if="selectIndex === 0">
+        <template v-for="(item, index) in sensor" :key="index">
+          <div
+            style="position: absolute"
+            :style="{ left: item.styleText.left, bottom: item.styleText.bottom }">
+            <singleModel :dataSource="item" />
+          </div>
+        </template>
+      </div>
+      <!-- 人头 -->
+      <div v-if="selectIndex === 1">
+        <template v-for="(item, index) in peopleData" :key="index">
+          <div
+            style="position: absolute"
+            :style="{ left: item.styleText.left, bottom: item.styleText.bottom }">
+            <singleModel :dataSource="item" />
+          </div>
+        </template>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+  import { ref, onMounted, onUnmounted } from 'vue';
+  /* 图片 */
+  import temperature from '../image/airConditioningSystem/temperature.png';
+  import people from '../image/airConditioningSystem/people.png';
+  import freshAir from '../image/airConditioningSystem/freshAir.png';
+  import airConditioner from '../image/airConditioningSystem/airConditioner.png';
+  import floorHeating from '../image/airConditioningSystem/floorHeating.png';
+  import selectImg from '../image/airConditioningSystem/selectImg.png';
+  import temperatureBox from '../image/airConditioningSystem/temperature-box.png';
+
+  import singleModel from '../components/singleModel.vue';
+  //图例
+  const legend = ref([
+    { url: temperature, name: '温度' },
+    { url: people, name: '人流' },
+    { url: freshAir, name: '新风主机' },
+    { url: airConditioner, name: '空调箱' },
+    { url: floorHeating, name: '地暖' },
+  ]);
+  //温度传感器
+  const sensor = ref([
+    {
+      title: 'H区多功能传感器',
+      styleText: { left: '28%', bottom: '44%' },
+      type: '温度',
+      unit: '℃',
+      number: 20,
+      url: temperatureBox,
+    },
+    {
+      title: 'G区多功能传感器',
+      styleText: { left: '35%', bottom: '23%' },
+      type: '温度',
+      unit: '℃',
+      number: 20,
+      url: temperatureBox,
+    },
+    {
+      title: 'F区多功能传感器',
+      styleText: { left: '47%', bottom: '31%' },
+      type: '温度',
+      unit: '℃',
+      number: 20,
+      url: temperatureBox,
+    },
+    {
+      title: 'E区多功能传感器',
+      styleText: { left: '38.5%', bottom: '49%' },
+      type: '温度',
+      unit: '℃',
+      number: 20,
+      url: temperatureBox,
+    },
+    {
+      title: 'D区多功能传感器',
+      styleText: { left: '65%', bottom: '43%' },
+      type: '温度',
+      unit: '℃',
+      number: 20,
+      url: temperatureBox,
+    },
+    {
+      title: 'C区多功能传感器',
+      styleText: { left: '52%', bottom: '55.5%' },
+      type: '温度',
+      unit: '℃',
+      number: 20,
+      url: temperatureBox,
+    },
+    {
+      title: 'B区多功能传感器',
+      styleText: { left: '76%', bottom: '48%' },
+      type: '温度',
+      unit: '℃',
+      number: 20,
+      url: temperatureBox,
+    },
+    {
+      title: 'A区多功能传感器',
+      styleText: { left: '63%', bottom: '60%' },
+      type: '温度',
+      unit: '℃',
+      number: 20,
+      url: temperatureBox,
+    },
+  ]);
+  //人流
+  const peopleData = ref([
+    {
+      title: 'H区人流传感器',
+      styleText: { left: '36%', bottom: '21%' },
+      type: '人流',
+      unit: '人',
+      number: 120,
+      url: people,
+    },
+    {
+      title: 'G区人流传感器',
+      styleText: { left: '28.5%', bottom: '43.5%' },
+      type: '人流',
+      unit: '人',
+      number: 120,
+      url: people,
+    },
+    {
+      title: 'E区人流传感器',
+      styleText: { left: '39%', bottom: '48%' },
+      type: '人流',
+      unit: '人',
+      number: 120,
+      url: people,
+    },
+    {
+      title: 'F区人流传感器',
+      styleText: { left: '47.5%', bottom: '29.5%' },
+      type: '人流',
+      unit: '人',
+      number: 120,
+      url: people,
+    },
+    {
+      title: 'D区人流传感器',
+      styleText: { left: '66%', bottom: '42%' },
+      type: '人流',
+      unit: '人',
+      number: 120,
+      url: people,
+    },
+    {
+      title: 'C区人流传感器',
+      styleText: { left: '53%', bottom: '54.5%' },
+      type: '人流',
+      unit: '人',
+      number: 120,
+      url: people,
+    },
+    {
+      title: 'B区人流传感器',
+      styleText: { left: '77%', bottom: '47%' },
+      type: '人流',
+      unit: '人',
+      number: 120,
+      url: people,
+    },
+    {
+      title: 'A区人流传感器',
+      styleText: { left: '64%', bottom: '59%' },
+      type: '人流',
+      unit: '人',
+      number: 120,
+      url: people,
+    },
+  ]);
+  // 选择的图例
+  const selectIndex = ref(0);
+  const selectLegend = (item: any, index: any) => {
+    if (selectIndex.value !== index) {
+      selectIndex.value = index;
+    }
+  };
+</script>
+<style lang="less" scoped>
+  .legend-box {
+    width: 5%;
+    height: 100%;
+    background-color: rgba(40, 45, 51, 1);
+    border-radius: 4px 0px 0px 4px;
+    padding: 4px;
+    .legend-box-item {
+      width: 100%;
+      height: 90px;
+      padding: 10px 0;
+      cursor: pointer;
+      background-size: 75%;
+      background-repeat: no-repeat;
+      background-position: center; /* 把图片背景居中 */
+      .legend-box-item-img {
+        width: 100%;
+        height: 50px;
+        display: flex;
+        justify-content: center; /* 水平居中 */
+        align-items: center; /* 垂直居中 */
+      }
+      .legend-box-item-name {
+        width: 100%;
+        display: flex;
+        justify-content: center; /* 水平居中 */
+        align-items: center; /* 垂直居中 */
+        color: white;
+        font-size: 12px;
+        margin-top: 6px;
+      }
+    }
+  }
+  .map-box {
+    width: 95%;
+    height: 100%;
+    position: relative;
+    background-image: url(../image/bg.jpg);
+    background-size: 100% 100%;
+    background-repeat: no-repeat;
+    overflow: hidden;
+    border-radius: 0px 4px 4px 0px;
+  }
+</style>

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>