Thingsboard 专业版-解网

问：

我是 nitin pandey，

我想知道如何在 thingsboard 专业版的警报卡中添加 javaScript 条件。如果温度水平很高，那么它应该是红色的背景色，如果温度正常，那么它应该是绿色的背景色。我已经为一些想法添加了图像，但它是社区版本的图像，请在此处输入图像描述

提前致谢

我想要关于 Thingsboard 的答案

JavaScript 编码样式卡 thingsboard-gateway

欢迎使用 Stack Overflow。请观看导览，了解 Stack Overflow 的工作原理，并阅读如何提问，了解如何提高问题的质量。然后编辑您的问题，将您的源代码作为工作最小的可重现示例，其他人可以对其进行测试以更快地提供答案。请不要上传代码/错误的图片。

答：

0赞 Nitin Pandey 11/9/2023 #1

<!DOCTYPE html>
<html> 
<head> 
    <title>HTML with Condition Nitin Pandey</title>
</head>   
<body>
    <div id='pk' style="background-color: gray; padding: 0px;"> <h5 style="display: inline-block;">Motor_Health </h5>
        <a href="https://drive.google.com/uc?id=1tBN6pzVgymvApAspixX">
            <img src="https://drive.google.com/uc?id=1tBN6pzVgymvApAspixX" alt="Alarm_Icon" style="width: 50px; height: 50px; margin-left: 90px; margin-top: 5px;">
        </a>
        <div></div>
</div>
    <script>
    var token = localStorage.getItem("jwt_token");
    console.log(token);
        // Function to update the temperature display
        function updateTemperature(temperature) {
            var div = document.createElement("div");
            var pkElement = document.getElementById('pk');
            
            if (temperature > 50) {
                div.style.backgroundColor = "red";
                div.style.fontSize = "18px";
                div.style.color = "white";
                div.style.height = "200px";
                div.textContent = "Temperature: " + temperature + "°C (High)";
            } else if (temperature > 40) {
                div.style.backgroundColor = "green";
                div.style.fontSize = "18px";
                div.style.color = "black";
                div.style.height = "200px";
                div.textContent = "Temperature: " + temperature + "°C (Moderate)";
            } else {
                div.style.backgroundColor = "blue";
                div.style.fontSize = "18px";
                div.style.color = "white";
                div.style.height = "200px";
                div.textContent = "Temperature: " + temperature + "°C (Low)";
            }
            //it is deleting and replacing by new temperature data everytime
pkElement.removeChild(pkElement.lastElementChild);
            pkElement.appendChild(div);
        }

        // Fetch data from an API
        var apiUrl = 'http://68.178.167.12:8080/api/plugins/telemetry/DEVICE/b6b0-5dcf-11ee-a906-ebdb/values/timeseries?keys=temperature';
        var Auth = 'Bearer ' + token; 
        var headers = new Headers({
            'Content-Type': 'application/json',
            'X-Authorization': Auth
        });

        // Function to fetch and update temperature data
        function fetchAndUpdateTemperature() {
            // Clear the existing content in the pk element
            const pkElement = document.getElementById('pk');
            //pkElement.innerHTML = '';
        
            fetch(apiUrl, { method: 'GET', headers: headers })
                .then(response => {
                    if (response.status === 200) {
                        return response.json();
                    } else {
                        throw new Error('Request failed with status ' + response.status);
                    }
                })
                .then(data => {
                    console.log('API Response:', data); // Add this line for debugging
        
                    if (data.temperature && data.temperature.length > 0) {
                        const temperatureValue = data.temperature[0].value;
                        updateTemperature(temperatureValue);
                    } else {
                        console.error('No temperature data found.');
                    }
                })
                .catch(error => {
                    console.error(error);
                });
        }
        
        // Fetch and update temperature immediately
        fetchAndUpdateTemperature();
        
        // Refresh temperature data every 10 seconds
        const refreshInterval = 10000; // 10 seconds in milliseconds
        setInterval(fetchAndUpdateTemperature, refreshInterval);

    </script>
</body>
</html>



By doing this we can add the condition inside the HTML of thingsboard. it will taket he user input as a temperature from the different port. and show the what we want

Thingsboard 专业版

Thingsboard professional

评论

评论