2006_WEB/templates/device_detail.html

{% extends 'base.html' %}

{% block content %}
<section class="device-detail">
    <h2>设备详情</h2>
    <div class="device-info-card" id="deviceInfoCard">
        <div class="info-row">
            <span class="info-label">设备类型:</span>
            <span class="info-value" id="deviceType">{{ device.dev_type }}</span>
        </div>
        <div class="info-row">
            <span class="info-label">设备SN:</span>
            <span class="info-value" id="deviceSn">{{ device.dev_sn }}</span>
        </div>
        <div class="info-row">
            <span class="info-label">固件版本:</span>
            <span class="info-value" id="app_version">{{ device.app_version }}</span>
        </div>
        <div class="info-row">
            <span class="info-label">重置次数:</span>
            <span class="info-value" id="reset_times">{{ device.reset_times }}</span>
        </div>
        <div class="info-row">
            <span class="info-label">在线状态:</span>
            <span class="info-value" id="deviceOnline"  style="color: {% if device.online == '在线' %}green{% else %}red{% endif %};">{{ device.online }}</span>
        </div>
        <div class="info-row">
            <span class="info-label">WiFi:</span>
            <span class="info-value" id="deviceWifi">{{ device.wifi_ssid }}/{{ device.wifi_password }}</span>
        </div>
        <div class="info-row">
            <span class="info-label">云平台:</span>
            <span class="info-value" id="deviceCloudPlatform">{{ device.cloud_platform }}</span>
        </div>
        <div class="info-row">
            <span class="info-label">网络类型:</span>
            <span class="info-value" id="deviceNetworkType">{{ device.network_type }}</span>
        </div>
        <div class="info-row">
            <span class="info-label">IP地址:</span>
            <span class="info-value" id="deviceIp">{{ device.ip }}</span>
        </div>
        <div class="info-row">
            <span class="info-label">统计信息:</span>
        </div>
        <div class="info-row">
            <span class="info-label">&nbsp;&nbsp;&nbsp;&nbsp;剩余资源:</span>
            <span class="info-value" id="deviceFreeFiFo">{{ device.free_fifo }}</span>
        </div>
        <div class="info-row">
            <span class="info-label">&nbsp;&nbsp;&nbsp;&nbsp;运行时间:</span>
            <span class="info-value" id="deviceRunTime">{{ device.run_time }}秒</span>
        </div>
        <div class="info-row">
            <span class="info-label">&nbsp;&nbsp;&nbsp;&nbsp;总条数:</span>
            <span class="info-value" id="deviceTotalCnt">{{ device.receive_sum }}条</span>
        </div>
        <div class="info-row">
            <span class="info-label">&nbsp;&nbsp;&nbsp;&nbsp;正常条数:</span>
            <span class="info-value" id="deviceNormalCnt">{{ device.send_sum }}条</span>
        </div>
        <div class="info-row">
            <span class="info-label">&nbsp;&nbsp;&nbsp;&nbsp;异常条数:</span>
            <span class="info-value" id="deviceAbnormalCnt">{{ device.abnormal_sum }}条</span>
        </div>
        <div class="info-row">
            <span class="info-label">&nbsp;&nbsp;&nbsp;&nbsp;成功率:</span>
            <span class="info-value" id="deviceSuccessRate">{{ device.success_rate }} &#37 </span>
        </div>
        <div class="info-row">
            <span class="info-label">&nbsp;&nbsp;&nbsp;&nbsp;速度:</span>
            <span class="info-value" id="deviceSpeed">{{ device.speed }} 条/秒</span>
        </div>
            
        <div class="info-row">
            <span class="info-label">最后更新时间:</span>
            <span class="info-value" id="lastUpdateTime">{{ datetime.now().strftime('%Y-%m-%d %H:%M:%S') }}</span>
        </div>
    </div>
</section>

<div class="back-btn-container">
    <a href="{{ url_for('devices') }}" class="back-btn">返回设备列表</a>
</div>

{% endblock %}

{% block scripts %}
<script>
    // 获取设备ID
    const dev_sn = "{{ device.dev_sn }}";

    // 刷新设备详情数据
    function refreshDeviceDetail() {
        fetch(`/api/device_detail/${dev_sn}`)
            .then(response => {
                if (!response.ok) {
                    throw new Error('网络响应错误');
                }
                return response.json();
            })
            .then(data => {
                // 更新页面上的设备信息
                document.getElementById('deviceType').textContent = data.dev_type;
                document.getElementById('deviceSn').textContent = data.dev_sn;
                document.getElementById('app_version').textContent = data.app_version;
                document.getElementById('reset_times').textContent = data.reset_times;
                document.getElementById('deviceOnline').textContent = data.online;
                // 检查data中是否存在wifi_ssid和wifi_password
                const ssid = data.wifi_ssid ? data.wifi_ssid.replace(/[\s\n\t]/g, '*') : 'ssid未知';
                const password = data.wifi_password ? data.wifi_password.replace(/[\s\n\t]/g, '*') : '密码未知';
                document.getElementById('deviceWifi').textContent = `${ssid}/${password}`;
                
                document.getElementById('deviceIp').textContent = data.ip;
                document.getElementById('deviceFreeFiFo').textContent = data.free_fifo;
                document.getElementById('deviceRunTime').textContent = data.run_time_str;
                document.getElementById('deviceTotalCnt').textContent = data.receive_sum.toString().replace( /\B(?=(\d{3})+(?!\d))/g, ",") + '条';
                document.getElementById('deviceNormalCnt').textContent = data.send_sum.toString().replace( /\B(?=(\d{3})+(?!\d))/g, ",") + '条';
                document.getElementById('deviceAbnormalCnt').textContent = data.abnormal_sum.toString().replace( /\B(?=(\d{3})+(?!\d))/g, ",") + '条';
                document.getElementById('deviceSuccessRate').textContent = data.success_rate.toFixed(2) + ' %';
                document.getElementById('deviceSpeed').textContent = data.speed.toFixed(2) + ' 条/秒';
                
                // 动态更新可能存在的字段
                const cloudPlatformElem = document.getElementById('deviceCloudPlatform');
                if (cloudPlatformElem && data.cloud_platform) {
                    cloudPlatformElem.textContent = data.cloud_platform;
                }
                
                const networkTypeElem = document.getElementById('deviceNetworkType');
                if (networkTypeElem && data.network_type) {
                    networkTypeElem.textContent = data.network_type;
                }
                
                
                // 更新最后更新时间
                document.getElementById('lastUpdateTime').textContent =
                    new Date().toLocaleString('zh-CN', {
                        year: 'numeric',
                        month: '2-digit',
                        day: '2-digit',
                        hour: '2-digit',
                        minute: '2-digit',
                        second: '2-digit'
                    });
            })
            .catch(error => {
                console.error('获取设备详情失败:', error);
            });
    }

    // 初始加载
    refreshDeviceDetail();

    // 设置定时器，每秒刷新一次
    setInterval(refreshDeviceDetail, 1000);
</script>
{% endblock %}