前端实现获取数据的图标信息更换

前提：

通过后端的接口将数据库中有数据的显示在输入框中并且把图标换成绿色，鼠标移动到图标上显示已引用；将数据库中没有值的给对应的输入框自动填充默认值20.00，图标换，信息也换；

上图：

如图所示，只有第二个参数在数据库中有值图标换成绿色，其它自动填充默认值。图标换成蓝色。

上代码：（HTML部分）

                            <table style="width: 85%">
                                <colgroup>
                                    <col width="40%">
                                    <col width="50%">
                                    <col width="10%">
                                </colgroup>
                                <tr>
                                    <td style="text-align: center">
                                        <label>燃烧室直径(Dc)</label>
                                    </td>
                                    <td style="text-align: center">
                                        <input type="text" id="Dc" required  lay-verify="required" placeholder="请输入" value="" autocomplete="off" class="layui-input">
                                    </td>
                                    <td style="text-align: center">
                                        <div class="layui-form-mid layui-word-aux">mm</div>
                                    </td>
                                    <td id="icon1" style="text-align: center; display: none">
                                        <img src="" style="width: 20px; height: 20px" alt="图标" title="">
                                    </td>
                                </tr>
                                <tr>
                                    <td style="text-align: center">
                                        <label>燃烧室长(Lc)</label>
                                    </td>
                                    <td style="text-align: center">
                                        <input type="text" id="Lc" required  lay-verify="required" placeholder="请输入" value="" autocomplete="off" class="layui-input">
                                    </td>
                                    <td style="text-align: center">
                                        <div class="layui-form-mid layui-word-aux">mm</div>
                                    </td>
                                    <td id="icon2" style="text-align: center; display: none">
                                        <img src="" style="width: 20px; height: 20px" alt="图标" title="">
                                    </td>
                                </tr>
                                <tr>
                                    <td style="text-align: center">
                                        <label>燃烧室筒段长(Lnc)</label>
                                    </td>
                                    <td style="text-align: center">
                                        <input type="text" id="Lnc" required  lay-verify="required" placeholder="请输入" value="" autocomplete="off" class="layui-input">
                                    </td>
                                    <td style="text-align: center">
                                        <div class="layui-form-mid layui-word-aux">mm</div>
                                    </td>
                                    <td id="icon3" style="text-align: center; display: none">
                                        <img src="" style="width: 20px; height: 20px" alt="图标" title="">
                                    </td>
                                </tr>
                                <tr>
                                    <td style="text-align: center">
                                        <label>效率eta</label>
                                    </td>
                                    <td style="text-align: center">
                                        <input type="text" id="eta" required  lay-verify="required" placeholder="请输入" value="" autocomplete="off" class="layui-input">
                                    </td>
                                    <td style="text-align: center">
                                        <div class="layui-form-mid layui-word-aux">mm</div>
                                    </td>
                                    <td id="icon4" style="text-align: center; display: none">
                                        <img src="" style="width: 20px; height: 20px" alt="图标" title="">
                                    </td>
                                </tr>
                            </table>

JS部分（这才是关键核心）

// 点击页面时请求获取projectId
        $.ajax({
            url: PLATFORM_URL +'/api/Redis/getApplyProjectId',
            type:'GET',
            success:function (data){
                projectId = data.data;
                console.log(projectId);
                if (projectId >= 1)
                {
                    let parameter = ["Dc", "Lc", "Lnc", "eta"];
                    for (let i = 0; i < parameter.length; i++) {
                        $.ajax({
                            url: PLATFORM_URL +'/api/moduleReferences/look',
                            type: 'GET',
                            data: {
                                consumerName: "AcousticFrequency",
                                consumerParameter: parameter[i],
                                projectId: projectId,
                            },
                            success: function (data){
                                // console.log(data.data);
                                if(data.data.state === 1) {
                                    $('#icon' + (i + 1)).show();
                                    $('#' + parameter[i]).val(20.00.toFixed(2));
                                    $('#icon' + (i + 1) + '> img').attr("src", "/images/state_icon03.jpg").attr("title", "未引用参数，自动填充默认值");
                                } else if(data.data.state === 2) {
                                    $("#"+parameter[i]).val(data.data.value);
                                    $("#icon" + (i + 1)).show();
                                    $("#icon" + (i + 1) + "> img").attr("src", "images/state_icon01.jpg").attr("title", "已引用参数");
                                } else if(data.data.state === 3) {
                                    $("#icon" + (i + 1)).show();
                                    $("#"+parameter[i]).val(20.00.toFixed(2));
                                    $("#icon" + (i + 1) + "> img").attr("src", "/images/state_icon02.jpg").attr("title", "已引用参数，参数值为空，自动填充默认值");
                                }
                            }
                        })
                    }
                }else {
                    layer.msg("未应用项目，无法自动填充引用数据");
                }
            }
        });

这段JS用了两次Ajax去调用接口，第一次是点击到当前的页面时，调用接口，查看是否有缓存的projectId，如果有projectId，先把几个输入框的id定义成数组，再去循环调用，后端返回的状态是1，2，3三种状态，在JS 部分的成功里，分别给不同状态换成对应的图标和显示信息。