hsq-pro/src/views/vent/monitorManager/hsqHome/components/DeviceTree.vue

<template>
  <!-- 设备树组件：左侧面板，包含设备分组树、Tab切换、角度保存等功能 -->
  <div class="device-tree">
    <!-- 顶部 Tab -->
    <div class="tree-tabs">
      <div v-for="tab in tabs" :key="tab.key" :class="['tab-item', { active: activeTab === tab.key }]"
        @click="activeTab = tab.key">
        {{ tab.label }}
      </div>
    </div>

    <!-- 角度栏 + 保存 -->
    <div class="tree-toolbar">
      <span class="toolbar-label">角度</span>
      <div class="save-btn" @click="handleSave">
        <div class="btn-item">保存</div>
      </div>
    </div>

    <!-- 设备树列表 -->
    <div class="tree-body">
      <div v-for="group in treeData" :key="group.id" class="tree-group">
        <div class="group-row" @click="toggleGroup(group.id)">
          <span :class="['expand-icon', { collapsed: !expandedMap[group.id] }]">
            <svg viewBox="0 0 10 10" width="10" height="10">
              <path d="M1 3.2 L5 7.2 L9 3.2" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"
                stroke-linejoin="round" />
            </svg>
          </span>
          <span class="group-icon">
            <SvgIcon class="icon-style2" size="18" name="jg-icon" />
          </span>
          <span class="group-title">{{ group.title }}</span>
        </div>

        <div v-show="expandedMap[group.id]" class="group-children">
          <div v-for="(device, index) in group.children" :key="device.id"
            :class="['device-row', { active: selectedId === device.id, 'is-last': index === group.children.length - 1 }]"
            @click="selectDevice(device)">
            <span class="tree-line"></span>
            <span class="device-icon">
              <SvgIcon class="icon-style2" size="18" name="video-icon" />
            </span>
            <span class="device-name" :title="device.name">{{ device.name }}</span>
            <div class="device-checks" @click.stop>
              <label
                v-for="(checked, cIndex) in device.checks"
                :key="cIndex"
                class="check-item"
                :data-tip="checkTips[cIndex]"
              >
                <input type="checkbox" :checked="checked"
                  @change="toggleCheck(device, cIndex, ($event.target as HTMLInputElement).checked)" />
                <span class="check-box">
                  <svg v-if="checked" viewBox="0 0 12 12" width="10" height="10">
                    <path d="M2 6.2 L4.8 9 L10 3.2" fill="none" stroke="#fff" stroke-width="1.8" stroke-linecap="round"
                      stroke-linejoin="round" />
                  </svg>
                </span>
              </label>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref, watch } from 'vue'
import { SvgIcon } from '/@/components/Icon';
import { tabs } from '../hsqHome.data'

/** 设备节点数据结构 */
interface DeviceNode {
  id: string
  name: string
  /** 三个勾选状态：如显示/联动/告警等 */
  checks: [boolean, boolean, ]
}


let props=defineProps({
  treeData: {
    type: Array as any,
    default: () => [],
  },
})

/** 组件自定义事件 */
const emit = defineEmits<{
  // (e: 'save', data: GroupNode[]): void
  (e: 'select', device: DeviceNode): void
  (e: 'checkChange', payload: any): void
  (e: 'tabChange', key: string): void
}>()

/** 多选框提示：第一个可见光取流，第二个红外取流 */
const checkTips = ['可见光取流', '红外取流'] as const

/** 当前激活的 Tab */
const activeTab = ref('device')
/** 当前选中的设备 ID */
const selectedId = ref('d2')

/** 设备分组展开/折叠状态映射 */
const expandedMap = reactive<Record<string, boolean>>({
  g1: true,
  g2: true,
})



/** 切换设备分组的展开/折叠状态 */
function toggleGroup(id: string) {
  expandedMap[id] = !expandedMap[id]
}

/** 选中设备，触发 select 事件 */
function selectDevice(device: DeviceNode) {
  selectedId.value = device.id
  emit('select', device)
}

/** 切换设备勾选状态，触发 checkChange 事件 */
function toggleCheck(device: DeviceNode, index: number, checked: boolean) {
  device.checks[index] = checked
  emit('checkChange', { device, index, checked })
}

/** 保存设备树数据，触发 save 事件 */
function handleSave() {
  // emit('save', treeData.value)
}

/** 监听 Tab 切换，触发 tabChange 事件 */
watch(activeTab, (key) => {
  emit('tabChange', key)
})
</script>

<style lang="less" scoped>
@import '/@/design/theme.less';

// 设备树主容器
.device-tree {
  --image-bg: url('@/assets/images/home-container/configurable/hsq/7-2.png');
  --dt-bg: #071528;
  --dt-bg-row: transparent;
  --dt-bg-active: rgba(22, 90, 150, 0.55);
  --dt-accent: #00b7ff;
  --dt-text: #e8f4ff;
  --dt-text-muted: #8aa0b8;
  --dt-border: rgba(40, 120, 180, 0.35);
  --dt-line: rgba(120, 150, 180, 0.55);

  height: 100%;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  color: var(--dt-text);
  font-size: 13px;
  overflow: hidden;
  padding: 15px;
  box-sizing: border-box;
}

// 顶部 Tab 切换栏
.tree-tabs {
  display: flex;
  align-items: stretch;
  height: 30px;
  flex-shrink: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  background: #15517b;
  margin-bottom: 10px;

  .tab-item {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--dt-text-muted);
    position: relative;
    transition: color 0.2s;

    &:hover {
      color: #cfe9ff;
    }

    &.active {
      color: #fff;
      font-weight: 600;
      background-color: #1d73a8;

      &::after {
        content: '';
        position: absolute;
        left: 0%;
        right: 0%;
        bottom: 0;
        height: 2px;
        background: #36c7ff;
        border-radius: 1px;
        box-shadow: 0 0 6px rgba(0, 183, 255, 0.6);
      }
    }
  }
}

// 工具栏：角度标签 + 保存按钮
.tree-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 28px;
  padding: 0 10px;
  flex-shrink: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  background: var(--image-bg) no-repeat;
  background-size: 100% 100%;

  .toolbar-label {
    color: var(--dt-text);
    font-size: 13px;
  }

  // 保存按钮
  .save-btn {
    min-width: 52px;
    height: 24px;
    padding: 2px;
    border: 1px solid #29e7db;
    border-radius: 3px;
    background: transparent;
    color: #fff;
    font-size: 12px;
    cursor: pointer;
    line-height: 24px;
    transition: background 0.2s, box-shadow 0.2s;

    .btn-item {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 100%;
      background: linear-gradient(to bottom, rgba(41, 231, 219, 1) 0%, rgba(41, 231, 219, 0.5) 100%);
    }

  }
}

// 设备树列表主体（可滚动区域）
.tree-body {
  flex: 1;
  overflow: auto;
  padding: 6px 0px;
  box-sizing: border-box;

  &::-webkit-scrollbar {
    width: 4px;
  }

  &::-webkit-scrollbar-thumb {
    background: rgba(0, 183, 255, 0.35);
    border-radius: 2px;
  }
}

// 设备分组行（煤场/采场等）
.group-row {
  display: flex;
  align-items: center;
  height: 30px;
  padding: 0 10px 0 8px;
  cursor: pointer;
  user-select: none;

  &:hover {
    background: rgba(255, 255, 255, 0.03);
  }

  // 展开/折叠箭头图标
  .expand-icon {
    width: 14px;
    height: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #d8e6f5;
    margin-right: 4px;
    transition: transform 0.2s;

    &.collapsed {
      transform: rotate(-90deg);
    }
  }

  .group-icon {
    display: inline-flex;
    margin-right: 6px;
  }

  .group-title {
    font-size: 13px;
    color: var(--dt-text);
  }
}

// 分组子节点容器
.group-children {
  position: relative;
}

// 单个设备行
.device-row {
  position: relative;
  display: flex;
  align-items: center;
  height: 30px;
  padding: 0 10px 0 28px;
  cursor: pointer;
  background: var(--dt-bg-row);

  &:hover {
    background: rgba(255, 255, 255, 0.04);
  }

  &.active {
    background: var(--dt-bg-active);
  }

  /* 竖向虚线树连接线 */
  .tree-line {
    position: absolute;
    left: 14px;
    top: 0;
    bottom: 0;
    width: 0;
    border-left: 1px dashed var(--dt-line);

    &::after {
      content: '';
      position: absolute;
      left: 0;
      top: 15px;
      width: 10px;
      border-top: 1px dashed var(--dt-line);
    }
  }

  // 最后一个子节点只显示一半高度的连接线
  &.is-last .tree-line {
    bottom: 50%;
  }

  .device-icon {
    display: inline-flex;
    margin-right: 6px;
    flex-shrink: 0;
  }

  // 设备名称（溢出省略）
  .device-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #d7e9fa;
    font-size: 12px;
  }

  // 设备勾选框容器
  .device-checks {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: 8px;
    flex-shrink: 0;
  }
}

// 自定义勾选框样式
.check-item {
  position: relative;
  display: inline-flex;
  cursor: pointer;
  margin: 0;

  input {
    display: none;
  }

  .check-box {
    width: 14px;
    height: 14px;
    box-sizing: border-box;
    border: 1px solid rgba(0, 183, 255, 0.75);
    border-radius: 2px;
    background: rgba(0, 30, 55, 0.85);
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  input:checked+.check-box {
    background: var(--dt-accent);
    border-color: var(--dt-accent);
  }

  /* 悬停文字提示，风格对齐设备树（左侧弹出，避免被滚动容器裁切） */
  &::after {
    content: attr(data-tip);
    position: absolute;
    right: calc(100% + 8px);
    top: 50%;
    transform: translateY(-50%);
    padding: 3px 8px;
    white-space: nowrap;
    font-size: 12px;
    line-height: 1.4;
    color: #e8f4ff;
    background: rgba(7, 35, 58, 0.95);
    border: 1px solid rgba(0, 183, 255, 0.65);
    border-radius: 2px;
    box-shadow: 0 0 8px rgba(0, 183, 255, 0.35);
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s ease;
    z-index: 20;
  }

  &::before {
    content: '';
    position: absolute;
    right: calc(100% - 2px);
    top: 50%;
    transform: translateY(-50%);
    border: 5px solid transparent;
    border-left-color: rgba(0, 183, 255, 0.65);
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s ease;
    z-index: 20;
  }

  &:hover::after,
  &:hover::before {
    opacity: 1;
    visibility: visible;
  }
}

// 隐藏滚动条
::-webkit-scrollbar {
  display: none;
}
</style>