klp-oa/klp-ui/src/views/ems/overview/index.vue

<template>
  <div class="container">
    <div class="setting">
      <el-checkbox-group v-model="setting">
        <el-checkbox-button label="left">实时监控</el-checkbox-button>
        <el-checkbox-button label="right">统计信息</el-checkbox-button>
        <el-checkbox-button label="bottom">告警记录</el-checkbox-button>
      </el-checkbox-group>
    </div>
    <div class="left" v-if="setting.includes('left')">
      <Live />
    </div>
    <div class="right" v-if="setting.includes('right')">
      <Statistic />
    </div>
    <div class="bottom" v-if="setting.includes('bottom')">
      <Record />
    </div>
    <div class="points">
      <!-- 标点渲染 -->
      <div v-for="(point, index) in points" :key="index" class="point-marker"
        :style="{ left: point.x + '%', top: point.y + '%' }"
        :class="{ 'normal-status': point.status === 0, 'abnormal-status': point.status === 1 }"
        @mouseenter="showTooltip(index)" @mouseleave="hideTooltip(index)">
        <div
          style="background-color: #00000060; display: flex; align-items: center; justify-content: center; gap: 4px; padding: 4px; color: #fff;">
          <!-- 标点图标 -->
          <div class="marker-icon">
            <i class="fa" :class="point.status === 0 ? 'fa-check-circle' : 'fa-exclamation-circle'"></i>
          </div>
          <div class="point-name">{{ point.name }}</div>
        </div>


        <!-- 悬停提示框 -->
        <div class="point-tooltip" :class="{ 'visible': activeTooltip === index }">
          <div class="tooltip-header">
            <h4>{{ point.name }}</h4>
            <span class="status-badge" :class="point.status === 0 ? 'normal' : 'abnormal'">
              {{ point.status === 0 ? '正常' : '异常' }}
            </span>
          </div>

          <div class="tooltip-body" v-if="point.children && point.children.length > 0">
            <table class="device-table">
              <thead>
                <tr>
                  <th>设备名称</th>
                  <th>设备IP</th>
                  <th>状态</th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="(device, devIdx) in point.children" :key="devIdx">
                  <td>{{ device.deviceName }}</td>
                  <td>{{ device.ipAddress || '无数据' }}</td>
                  <td>
                    <!-- <span class="device-status" :class="device.status === 0 ? 'normal' : 'abnormal'">
                      {{ device.status === 0 ? '正常' : '异常' }}
                    </span> -->
                    <dict-tag :options="dict.type.alarm_device_status" :value="device.status"/>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>

          <div class="tooltip-body" v-else>
            <div class="no-device">暂无设备</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Live from './components/Live.vue'
import Record from './components/Record.vue'
import Statistic from './components/Statistic.vue'

import { getLeftWithDevices } from '@/api/ems/overview'

export default {
  components: {
    Live,
    Record,
    Statistic
  },
  dicts: ['alarm_device_status'],
  data() {
    return {
      // 标点数据补充
      setting: ['left', 'right'],
      points: [],
      activeTooltip: -1 // 控制提示框显示
    }
  },
  created() {
    this.getLeftWithDevices()
  },
  methods: {
    showTooltip(index) {
      this.activeTooltip = index
    },
    hideTooltip() {
      this.activeTooltip = -1
    },
    getLeftWithDevices() {
      getLeftWithDevices().then(res => {
        console.log(res.data);

        // 1. 树结构转数组，只保留叶子节点（children为空数组的节点）
        const leafNodes = [];

        // 递归收集叶子节点的函数
        const collectLeafs = (nodes) => {
          if (!nodes || !Array.isArray(nodes)) return;

          nodes.forEach(node => {
            // 检查是否为叶子节点：children存在且为空数组
            if (node.children && Array.isArray(node.children) && node.children.length === 0) {
              leafNodes.push(node);
            } else {
              // 递归处理子节点
              collectLeafs(node.children);
            }
          });
        };

        // 开始收集叶子节点
        collectLeafs(res.data);

        // 2. 转换数组结构
        const transformedData = leafNodes.map(node => ({
          name: node.path,       // 将path转换为name
          status: 0,             // 状态设为0
          children: node.devices, // children使用原来的devices字段
          x: node.x,             // 保留x字段
          y: node.y              // 保留y字段
          // 如果有其他需要保留的字段，可以在这里继续添加
        }));

        // 这里可以使用转换后的数据，例如赋值给组件的状态
        this.points = transformedData;
        console.log('转换后的叶子节点数据：', transformedData);
      }).catch(error => {
        console.error('获取数据失败：', error);
      });
    }
  }
}
</script>

<style>
.container {
  width: 100%;
  height: calc(100vh - 84px);
  position: relative;
  background: url('../../../assets/images/bird.png') no-repeat center center;
  background-size: cover;
  overflow: hidden;
}

.setting {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 100;
}

.left {
  position: absolute;
  top: 60px;
  left: 10px;
  width: 220px;
  z-index: 10;
}

.right {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 220px;
  z-index: 10;
}

.bottom {
  position: absolute;
  bottom: 10px;
  left: 10px;
  z-index: 10;
}

.points {
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 5;
}

/* 标点样式 */
.point-marker {
  position: absolute;
  transform: translate(-50%, -50%);
  cursor: pointer;
  transition: all 0.3s ease;
}

.marker-icon {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.normal-status .marker-icon {
  background-color: #43a047;
  /* 正常-绿色 */
}

.abnormal-status .marker-icon {
  background-color: #e53935;
  /* 异常-红色 */
  animation: pulse 1.5s infinite;
}

/* 脉冲动画 */
@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(229, 57, 53, 0.7);
  }

  70% {
    box-shadow: 0 0 0 10px rgba(229, 57, 53, 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(229, 57, 53, 0);
  }
}

.tooltip-body {
  max-height: 200px;
  overflow-y: auto;
}

/* 提示框样式 */
.point-tooltip {
  position: absolute;
  top: 30px;
  left: 50%;
  transform: translateX(-50%);
  width: 320px;
  background-color: rgba(255, 255, 255, 0.95);
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  padding: 12px;
  display: none;
  z-index: 100;
}

.point-tooltip.visible {
  display: block;
}

.tooltip-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid #eee;
}

.tooltip-header h4 {
  margin: 0;
  font-size: 16px;
  color: #333;
}

.status-badge {
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 12px;
  color: white;
}

.status-badge.normal {
  background-color: #43a047;
}

.status-badge.abnormal {
  background-color: #e53935;
}

.device-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.device-table th {
  padding: 6px 4px;
  text-align: left;
  background-color: #f5f5f5;
  font-weight: 500;
  color: #666;
}

.device-table td {
  padding: 8px 4px;
  border-bottom: 1px solid #f0f0f0;
}

.device-table tr:last-child td {
  border-bottom: none;
}

.device-status {
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 12px;
}

.device-status.normal {
  background-color: #e8f5e9;
  color: #2e7d32;
}

.device-status.abnormal {
  background-color: #ffebee;
  color: #c62828;
}
</style>