SaaS-lib/hx-ai-intelligent/src/view/equipmentControl/liftSystem/index.vue

<template>
  <div class="map-box">
    <div class="map">
      <liftInfo v-for="(item, index) in liftBox" :key="index" :liftInfo="item" />
    </div>
  </div>
</template>

<script setup lang="ts">
  import { ref, onMounted } from 'vue';
  import liftInfo from './liftInfo.vue';
  // 请求

  // 初始化 ===========================================================

  onMounted(() => {});

  // tab页部分 ========================================================
  const liftBox = ref([
    {
      name: '办公区域扶梯A',
      workState: 1,
      faultState: 2,
      direction: 1,
      type: 2,
      isLeft: true,
      styleText: { left: '245px', bottom: '230px' },
    },
    {
      name: '办公区域扶梯B',
      workState: 0,
      faultState: 3,
      direction: 0,
      type: 1,
      isLeft: false,
      styleText: { left: '700px', bottom: '360px' },
    },
  ]);
</script>
<style lang="less" scoped>
  .map-box {
    // 颜色变量，用于区别颜色
    // 正常 - 开启 - 上行 -下行
    --on: #0dffa4;
    // 关闭
    --off: #bfcde2;
    // 暂停 - 维修
    --pause: #ffbc46;
    // 告警 - 急停
    --stop: #f36163;
    // 故障
    --fault: #ff7636;
    // 未知
    --unknown: #a742ff;
    // 触发图标大小
    --size: 40px;
    width: 100%;
    height: 100%;
    .map {
      width: 1280px;
      height: 720px;
      background-image: url(../image/bg.jpg);
    }
  }
</style>