vent-template/src/views/vent/home/billboard/components/VentilationStatus.vue

<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <Row justify="space-between">
    <Col v-for="(item, i) in VENTILATION_STATUS_HEADER_CONFIG" :key="`svvhbcvs${i}`" :span="12">
      <MiniBoard :label="item.label" :value="data[item.prop]" :type="item.type" />
    </Col>
    <div class="ventilate-status-card">
      <CommonTitle label="通风系统数量" :value="ventilatorCount" />
      <BasicTree class="ventilate-status-card__tree" :tree-data="treeData" :virtual="false" />
    </div>
  </Row>
</template>
<script lang="ts" setup>
  import { Row, Col } from 'ant-design-vue';
  import { BasicTree } from '/@/components/Tree';
  import type { TreeProps } from 'ant-design-vue';
  import { VENTILATION_STATUS_HEADER_CONFIG } from '../billboard.data';
  import MiniBoard from './MiniBoard.vue';
  import { ref } from 'vue';
  import CommonTitle from './CommonTitle.vue';
  // import mapComponent from './components/3Dmap/index.vue';

  const data = ref({
    a: '13000',
    b: '13000',
    c: '13000',
    d: '98765',
  });
  const ventilatorCount = ref('0');
  const treeData: TreeProps['treeData'] = [
    {
      title: '1号回风斜井回风系统',
      key: '0-0',
      children: [
        {
          title: '名称：松定霍洛主通风机',
          key: '0-0-0',
        },
        {
          title: '风量：6000(m³/min)',
          key: '0-0-1',
        },
        {
          title: '频率：30Hz',
          key: '0-0-2',
        },
        {
          title: '三区阻力分布：30%-40%-30%',
          key: '0-0-3',
        },
      ],
    },
    {
      title: '2号回风立井回风系统',
      key: '1-0',
      children: [
        {
          title: '名称：松定霍洛主通风机',
          key: '1-0-0',
        },
        {
          title: '风量：6000(m³/min)',
          key: '1-0-1',
        },
        {
          title: '频率：30Hz',
          key: '1-0-2',
        },
        {
          title: '三区阻力分布：30%-40%-30%',
          key: '1-0-3',
        },
      ],
    },
  ];
</script>
<style lang="less" scoped>
  .ventilate-status-card {
    width: 406px;
    margin-top: 10px;
    box-sizing: border-box;
    background-size: 100% 100%;
    background: url('@/assets/images/company/area1.png') no-repeat center;

    // ::v-deep(.zxm-tree) {
    //   color: @white;
    //   background-color: transparent;
    // }

    .ventilate-status-card__tree {
      height: 130px;
      overflow: auto;
    }
  }
</style>