hsq-pro/src/views/vent/monitorManager/hsqHome/deviceManger.vue

<!-- 设备管理器主组件：三栏布局展示设备列表、设备详情和配置信息 -->
<template>
  <div class="device-manger">
    <!-- 左侧区域：设备列表 -->
    <div class="basic-box">
      <!-- DeviceLeft组件：显示设备列表，通过details事件传递选中的设备详情 -->
      <DeviceLeft @details="handlerDetail"></DeviceLeft>
    </div>
    <!-- 中间区域：设备详细信息展示 -->
    <div class="basic-box">
      <!-- DeviceCenter组件：接收并展示选中设备的详细数据 -->
      <DeviceCenter :detailData="detailData"></DeviceCenter>
    </div>
    <!-- 右侧区域：设备配置信息展示 -->
    <div class="basic-box">
      <!-- DeviceRight组件：接收并展示设备的配置数据 -->
      <DeviceRight :detailData="configData"></DeviceRight>
    </div>
  </div>
</template>
<script lang="ts" setup>
// 导入Vue 3组合式API相关函数和响应式工具
import { onMounted, onUnmounted, ref, computed, nextTick, onBeforeMount, watch, reactive } from 'vue';
// 导入子组件：左侧设备列表、中间设备详情、右侧配置信息
import DeviceLeft from './components/DeviceLeft.vue'
import DeviceCenter from './components/DeviceCenter.vue'
import DeviceRight from './components/DeviceRight.vue'

// 设备序列号信息（暂未使用）
const strserno = ref<any>({})

// 响应式数据：存储选中设备的详细信息，传递给DeviceCenter组件展示
const detailData = ref<any>({})

// 响应式数据：存储设备的配置信息，传递给DeviceRight组件展示（包括普通配置和重启配置）
const configData = ref<any>({})


/**
 * 处理设备详情事件回调函数
 * @param item - 包含type和value的事件对象
 *   - type: 事件类型 ('detail' | 'config' | 'restart')
 *   - value: 对应的详细数据
 * 根据不同的类型将数据分配到对应的响应式变量中
 */
function handlerDetail(item: any) {
  console.log(item, '详情--handlerDetail')
  switch (item.type) {
    // 处理设备详情类型：更新中间区域的设备详细数据
    case 'detail':
      detailData.value = item.value
      break
    // 处理配置详情类型：更新右侧区域的配置数据
    case 'config':
      configData.value = item.value
      break
    // 处理重启配置类型：更新右侧区域的配置数据（用于重启操作）
    case 'restart':
      configData.value = item.value
      break
    default:
    // 其他 cases 待添加
  }
}

/**
 * 组件挂载完成后的生命周期钩子
 * 用于初始化页面数据，包括：
 * - 获取设备配置信息
 * - 调用系统接口获取基础数据
 * - 加载监控相关信息
 * （当前为空实现，待后续完善业务逻辑）
 */
onMounted(() => {

});

/**
 * 组件卸载前的生命周期钩子
 * 用于清理资源、移除事件监听器等收尾工作
 * （当前为空实现，待后续根据实际需求添加清理逻辑）
 */
onUnmounted(() => {

});
</script>

<!-- 样式部分：使用Less预处理器，scoped限制样式作用域 -->
<style lang="less" scoped>
// 导入主题配置文件，包含全局样式变量和主题定义
@import '/@/design/theme.less';

/* 深蓝主题模式下的设备管理器样式覆盖 */
@{theme-deepblue} {
  .device-manger {}
}

/* 设备管理器主容器：采用三栏弹性布局 */
.device-manger {
  /* CSS自定义属性：左侧和右侧区域的背景图片 */
  --image-box1-bg: url('@/assets/images/home-container/configurable/hsq/2-4.png');
  /* CSS自定义属性：中间区域（设备详情）的背景图片 */
  --image-box1-bg1: url('@/assets/images/home-container/configurable/hsq/2-10.png');

  /* 弹性布局：子元素水平排列 */
  display: flex;
  /* 子元素两端对齐，均匀分布 */
  justify-content: space-between;
  /* 容器宽度占满父元素 */
  width: 100%;
  /* 高度减去底部间距 */
  height: calc(100% - 10px);
  /* 文字颜色为白色 */
  color: @white;
  /* 相对定位：作为中间绝对定位元素的参考容器 */
  position: relative;
  /* 底部外边距 */
  margin-bottom: 10px;
  /* 深蓝色背景色 */
  background-color: #09172c;

  /* 基础盒子样式：三个栏目的通用容器 */
  .basic-box {
    /* 第一个子元素（左侧设备列表区域） */
    &:nth-child(1) {
      /* 固定宽度430px */
      width: 430px;
      /* 高度撑满父容器 */
      height: 100%;
      /* 使用CSS变量设置背景图，不重复显示 */
      background: var(--image-box1-bg) no-repeat;
      /* 背景图完全填充容器 */
      background-size: 100% 100%;
      /* 右侧外边距，与中间区域保持间距 */
      margin-right: 10px;
    }

    /* 第二个子元素（中间设备详情区域） */
    &:nth-child(2) {
      /* 绝对定位：相对于父容器定位 */
      position: absolute;
      /* 距离顶部63px（为标题栏预留空间） */
      top: 63px;
      /* 水平居中定位 */
      left: 50%;
      /* 通过transform实现真正的水平居中 */
      transform: translate(-50%, 0);
      /* 宽度计算：总宽度减去左右两侧的宽度（430*2=880） */
      width: calc(100% - 880px);
      /* 高度计算：总高度减去顶部偏移量 */
      height: calc(100% - 63px);
      /* 使用中间区域的专用背景图 */
      background: var(--image-box1-bg1) no-repeat;
      background-size: 100% 100%;
    }

    /* 第三个子元素（右侧配置信息区域） */
    &:nth-child(3) {
      /* 固定宽度430px，与左侧对称 */
      width: 430px;
      height: 100%;
      /* 使用与左侧相同的背景图 */
      background: var(--image-box1-bg) no-repeat;
      background-size: 100% 100%;
      /* 左侧外边距，与中间区域保持间距 */
      margin-left: 10px;
    }
  }
}


/* 深度选择器：穿透组件边界修改loading组件的定位样式 */
:deep(.loading-box) {
  /* 重置position为默认值，避免影响布局 */
  position: unset;
}
</style>