huangyan
/
city_chips


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128
							<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8" />
  <title>设备组态图 - {{ .deviceName }}</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      background-color: #f4f6f8;
      padding: 20px;
    }
    h1 {
      text-align: center;
      color: #333;
    }
    .dashboard {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
      gap: 20px;
    }
    .card {
      background: white;
      border-radius: 8px;
      box-shadow: 0 2px 6px rgba(0,0,0,0.1);
      padding: 20px;
    }
    .card h3 {
      margin-top: 0;
      font-size: 1.2em;
      color: #555;
    }
    .value {
      font-size: 1.5em;
      font-weight: bold;
      color: #007bff;
      margin-top: 10px;
    }
    .status-on {
      color: green;
    }
    .status-off {
      color: red;
    }
  </style>
</head>
<body>

<h1>{{ .deviceName }} 组态图</h1>

<div class="dashboard" id="dashboard">
  <!-- 动态生成卡片 -->
</div>

<script>
const deviceName = "{{ .deviceName }}";
const eventSource = new EventSource(`./pointSSE?deviceName=${deviceName}`);

const dashboard = document.getElementById("dashboard");

// 初始化卡片 DOM 结构
const fields = {
  "冬夏季模式": { type: "text", label: "冬夏模式" },
  "回风二氧化碳": { type: "number", unit: "ppm", label: "回风 CO₂" },
  "回风温度": { type: "number", unit: "℃", label: "回风温度" },
  "回风阀反馈": { type: "number", unit: "%", label: "回风阀开度" },
  "故障报警": { type: "boolean", label: "故障报警" },
  "新风温度": { type: "number", unit: "℃", label: "新风温度" },
  "新风阀反馈": { type: "number", unit: "%", label: "新风阀开度" },
  "水阀反馈": { type: "number", unit: "%", label: "水阀开度" },
  "自动状态": { type: "boolean", label: "自动状态" },
  "过滤网压差": { type: "boolean", label: "过滤网压差" },
  "运行状态": { type: "boolean", label: "运行状态" },
  "送风温度": { type: "number", unit: "℃", label: "送风温度" },
  "送风湿度": { type: "number", unit: "%", label: "送风湿度" },
  "防冻开关": { type: "boolean", label: "防冻开关" },
  "风机压差": { type: "boolean", label: "风机压差" }
};

// 创建初始卡片
function createCards() {
  Object.keys(fields).forEach(key => {
    const card = document.createElement("div");
    card.className = "card";
    card.id = `card-${key}`;
    card.innerHTML = `
      <h3>${fields[key].label}</h3>
      <div class="value" id="value-${key}">--</div>
    `;
    dashboard.appendChild(card);
  });
}

createCards();

// 处理 SSE 数据更新
eventSource.onmessage = function(event) {
  try {
    const data = JSON.parse(event.data)?.data || {};
    for (const key in data) {
      const value = data[key];
      const el = document.getElementById(`value-${key}`);
      if (!el) continue;

      // 类型判断并格式化显示
      const field = fields[key];
      if (field?.type === 'boolean') {
        el.textContent = value === "是" ? "是" : "否";
        el.className = `value ${value === "是" ? "status-on" : "status-off"}`;
      } else if (field?.type === 'number') {
        el.textContent = `${parseFloat(value).toFixed(2)}${field.unit || ''}`;
        el.className = "value"; // 修复此处
      } else {
        el.textContent = value;
        el.className = "value"; // 保持一致性
      }
    }
  } catch (e) {
    console.error("解析数据失败", e);
  }
};


eventSource.onerror = function(err) {
  console.error("SSE 错误:", err);
};
</script>
</body>
</html>