如何在Hyperion工具容器中实现点击传感器信息类型弹出网格布局图表

1. 新增状态变量 #

在HyperionToolContainer.jsx组件头部新增两个状态，分别控制图表弹窗显隐、存储当前选中的信息类型关联数据：

import { useState } from 'react';
// 原有导入保持不变
const HyperionToolContainer = (props) => {
  // 原有状态保持不变
  const [chartModalOpen, setChartModalOpen] = useState(false);
  const [selectedProperty, setSelectedProperty] = useState(null);
  // 原有逻辑保持不变
}

2. 修改树节点点击回调 #

修改BasicTree绑定的onLabelClick方法，点击信息类型时筛选对应传感器、拉取图表数据后打开弹窗：

const onLabelClick = (node) => {
  // 仅处理属性类型节点
  if (!node.id) return;
  // 遍历所有设备，筛选支持当前属性的传感器
  const matchedSensors = [];
  props.data.forEach(floor => {
    floor.children.forEach(device => {
      if (device.propIds.includes(node.id)) {
        matchedSensors.push({
          deviceId: device.id,
          deviceName: device.name,
          floor: floor.name,
          // 对接仪表板接口拉取该设备对应属性的图表数据
          chartData: fetchDashboardChartData(device.id, node.id)
        })
      }
    })
  })
  // 存储选中的属性和对应传感器数据，打开弹窗
  setSelectedProperty({
    propertyName: node.name,
    sensors: matchedSensors
  })
  setChartModalOpen(true);
}

3. 新增图表弹窗组件 #

在组件的return语句末尾新增弹窗，默认采用响应式网格布局排列图表：

// 原有Popper等组件保持不变
<Dialog
  open={chartModalOpen}
  onClose={() => setChartModalOpen(false)}
  maxWidth="xl"
  fullWidth
>
  <DialogTitle>{selectedProperty?.propertyName} 对应传感器数据</DialogTitle>
  <DialogContent>
    {/* 响应式网格布局，小屏1列、平板2列、桌面3-4列 */}
    <Grid container spacing={2} sx={{ mt: 1 }}>
      {selectedProperty?.sensors.map(sensor => (
        <Grid item xs={12} sm={6} md={4} lg={3} key={sensor.deviceId}>
          <Card>
            <CardContent>
              <Typography variant="subtitle2" gutterBottom>
                {sensor.deviceName}（{sensor.floor}）
              </Typography>
              {/* 替换为项目实际使用的图表组件即可 */}
              <LineChart data={sensor.chartData} />
            </CardContent>
          </Card>
        </Grid>
      ))}
    </Grid>
  </DialogContent>
  <DialogActions>
    <Button onClick={() => setChartModalOpen(false)}>关闭</Button>
  </DialogActions>
</Dialog>

4. 现有代码优化 #

你现有逻辑中属性去重的部分可以用Set简化，性能更好代码更简洁：

// 替换原有props.data.forEach遍历去重的逻辑
const propertySet = new Set();
props.data.forEach(floor => {
  floor.children.forEach(child => {
    child.propIds.forEach(prop => propertySet.add(prop))
  })
})
const propertyHolder = Array.from(propertySet).map(prop => ({
  id: prop,
  name: prop,
  children: []
}))

5. 仪表板数据对接说明 #

你提到需要从仪表板导入图表数据，只需要实现上述的fetchDashboardChartData方法即可：如果是对接内部仪表板接口，直接请求对应设备、对应属性的时序/统计数据；如果是用Forge Data Visualization自带的传感器数据，调用对应SDK方法拉取时序数据即可。

内容的提问来源于stack exchange，提问作者JonathanA