Thingsboard 专业

问题描述 投票：0回答：1

我是尼丁·潘迪，

我想知道如何在Thingsboard的报警卡专业版中添加javaScript条件。如果温度水平较高，则背景颜色应为红色，如果温度正常，则背景颜色应为绿色。我添加了一些想法的图像，但它是社区版本的图像， enter image description here

提前致谢

我想要有关事物板的答案

javascript coding-style thingsboard card thingsboard-gateway
1个回答
0
投票

<!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

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.