как заставить скрипт распознавать область видимости в узле-красном? - PullRequest
Новая
       10

как заставить скрипт распознавать область видимости в узле-красном?

0 голосов
/ 07 мая 2018

У меня есть этот код в node-red. Я хочу добавить к нему шаблон узла. Я думаю, что скрипт не знает, что такое область действия. Когда я записываю значение с помощью jquery, он возвращает значение null. И я получаю эту ошибку: не могу прочитать свойство innerhtml из null. И я записываю область действия, и все идентификаторы равны нулю. Я не знаю, как это исправить. Это необходимо. Пожалуйста, помогите.

данные, которые я отправляю, выглядят примерно так: msg.payload = "{" power ": [12,14,13,14]," switch ": [" ON "]}" 

<div class="bg">
<div id="container" class="row">
    <div class="col-md-6">
        <div class="plan col-md-4">
            <h3 id="voltage1"><span class="status1">OFF</span></h3>
            <div class="Amp">Amp</div>
            <ul>
                <li><b>P1:</b></li>
                <li><b>P2:</b></li>
                <li><b>P3:</b></li>
                <li><b>N:</b></li>
            </ul>
        </div>
    </div>
    <div class="col-md-6">
        <div class="plan col-md-4">
            <h3 id="voltage2"><span class="status2">OFF</span></h3>
            <div class="Amp">Amp</div>
            <ul>
                <li><b>P1:</b></li>
                <li><b>P2:</b></li>
                <li><b>P3:</b></li>
                <li><b>N:</b></li>
            </ul>
        </div>
    </div>
    <div class="col-md-6">
        <div class="plan col-md-4">
            <h3 id="voltage3"><span class="status3">OFF</span></h3>
            <div class="Amp">Amp</div>
            <ul>
                <li><b>P1:</b></li>
                <li><b>P2:</b></li>
                <li><b>P3:</b></li>
                <li><b>N:</b></li>
            </ul>
        </div>
    </div>
    <div class="col-md-6">
        <div class="plan col-md-4">
            <h3 id="voltage4"><span class="status4">OFF</span></h3>
            <div class="Amp">Amp</div>
            <ul>
                <li><b>P1:</b></li>
                <li><b>P2:</b></li>
                <li><b>P3:</b></li>
                <li><b>N:</b></li>
            </ul>
        </div>
    </div>
    <div class="col-md-6">
        <div class="plan col-md-4">
            <h3 id="voltage5"><span class="status5">OFF</span></h3>
            <div class="Amp">Amp</div>
            <ul>
                <li><b>P1:</b></li>
                <li><b>P2:</b></li>
                <li><b>P3:</b></li>
                <li><b>N:</b></li>
            </ul>
        </div>
    </div>
    <div class="col-md-6">
        <div class="plan col-md-4">
            <h3 id="voltage6"><span class="status6">OFF</span></h3>
            <div class="Amp">Amp</div>
            <ul>
                <li><b>P1:</b></li>
                <li><b>P2:</b></li>
                <li><b>P3:</b></li>
                <li><b>N:</b></li>
            </ul>
        </div>
    </div>


</div>


<script>
$(document).ready(function (scope) {
    (function (scope) {
        function blinker() {
            $('span').fadeOut(500);
            $('span').fadeIn(500);
        }

        setInterval(blinker, 1000);
        scope.$watch('msg', function (msg) {
            var data = JSON.parse(msg.payload)
            console.log(scope)
            for (var i = 1; i < 7; i++) {
                document.getElementById('#voltage' + i).innerHTML = "Voltage :" + data.power[i]
                if (data.switch[i] == 'ON') {
                    $('.status' + i).css("color", "green");
                    document.getElementsByClassName('.status' + i).innerHTML = 'ON'
                }
            }
        })
    })(scope)
})

1 Ответ

0 голосов
/ 07 мая 2018

Панель инструментов уже использует угловые виджеты, модели и логику для рендеринга информации msg.payload в DOM браузера. Вместо того, чтобы пытаться также манипулировать элементами HTML с помощью JQuery, гораздо проще передать массив объектов данных переключателя в один контейнер, используя ng-repeat, чтобы создать столько делителей, сколько необходимо для отображения всех переключателей.

Например, если у вас есть эти 3 набора данных в одном массиве msg.payload: 

[
  {
    "Switch": "ON",
    "Voltage": 117.5,
    "P1": 2.34,
    "P2": 3.45,
    "P3": 1.23,
    "N": 0.12
  },
  {
    "Switch": "OFF",
    "Voltage": 0,
    "P1": 0.02,
    "P2": 0.03,
    "P3": 0.12,
    "N": 0
  },
  {
    "Switch": "ON",
    "Voltage": 125,
    "P1": 0.34,
    "P2": 0.45,
    "P3": 0.23,
    "N": 0.25
  }
]

Вы можете просто передать его непосредственно на ui_template узел, с этим угловым кодом: 

<style>
    span.ON { color: green; }
    span.OFF { color: red; }
</style>

<div class="bg">
<div id="container" class="row">
    <div class="col-md-6" ng-repeat="row in msg.payload">
        <div class="plan col-md-4">
            <h3>
                {{$index+1}}.
                <span ng-class="row.Switch">{{row.Switch}}</span>
                <span ng-if="row.Switch == 'ON'">
                    Voltage : {{row.Voltage}}
                </span>
            </h3>
            <div class="Amp">Amp</div>
            <ul>
                <li><b>P1: </b>{{row.P1}}</li>
                <li><b>P2: </b>{{row.P2}}</li>
                <li><b>P3: </b>{{row.P3}}</li>
                <li><b>N: </b>{{row.N}}</li>
            </ul>
        </div>
    </div>
</div>
</div>

сделать это:

angular template output

Нет необходимости связываться с scope.$watch() или создавать 7 практически идентичных разделов HTML-элементов, которыми нужно манипулировать с помощью JQuery ...

Каждый раз, когда обновляется состояние одного из коммутаторов, просто повторно отправьте весь массив данных - Angular выполняет тяжелую работу по обновлению DOM в соответствии с вашими данными и даже повторно использует существующие элементы или вставляет / обновляет / при необходимости удалите их.

...