Calculation/app/view/sub_proj/data_index.ejs

<% include ./sp_info_menu.ejs %>
<div class="panel-content">
    <div class="panel-title">
        <div class="title-main">
            <% include ./sp_info_mini_menu.ejs %>
            <div class="d-inline-block">
                项目信息
            </div>
        </div>
        <div class="ml-auto"></div>
    </div>
    <div class="content-wrap">
        <div class="c-body">
            <div class="sjs-height-0" style="height: 570px;">
                <div class="col-8 px-3">
                    <form>
                        <div class="py-2 font-weight-bold">主要建设规模</div>
                        <div class="row">
                            <div class="col-3">
                                <div class="form-group">
                                    <label for="">主线公路里程（km）：</label>
                                    <input type="text" class="form-control form-control-sm" name="mainline_length" value="<%- info.mainline_length %>" org="<%- info.mainline_length %>" placeholder="请输入" maxlength="20" oninput="limitMaxLength(this)" onblur="changeInfo(this);">
                                </div>
                            </div>
                            <div class="col-3">
                                <div class="form-group">
                                    <label for="">支线里程（km）：</label>
                                    <input type="text" class="form-control form-control-sm" name="branch_length" value="<%- info.branch_length %>" org="<%- info.branch_length %>" placeholder="请输入" maxlength="20" oninput="limitMaxLength(this)" onblur="changeInfo(this)">
                                </div>
                            </div>
                            <div class="col-3"></div>
                        </div>
                        <div class="py-2 font-weight-bold">主要技术指标</div>
                        <div class="row">
                            <div class="col-3">
                                <div class="form-group">
                                    <label for="">公路等级：</label>
                                    <select class="form-control form-control-sm" name="road_level" value="<%- info.road_level %>" onchange="changeInfo(this);">
                                        <option value="">请选择</option>
                                        <option value="高速公路" <%if (info.road_level === '高速公路') { %>selected<% } %>>高速公路</option>
                                        <option value="一级公路" <%if (info.road_level === '一级公路') { %>selected<% } %>>一级公路</option>
                                        <option value="二级公路" <%if (info.road_level === '二级公路') { %>selected<% } %>>二级公路</option>
                                        <option value="三级公路" <%if (info.road_level === '三级公路') { %>selected<% } %>>三级公路</option>
                                        <option value="四级公路" <%if (info.road_level === '四级公路') { %>selected<% } %>>四级公路</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-3">
                                <div class="form-group">
                                    <label for="">公路设计速度（km/h）：</label>
                                    <input type="text" class="form-control form-control-sm" name="design_speed" value="<%- info.design_speed %>" org="<%- info.design_speed %>" placeholder="请输入" maxlength="20" oninput="limitMaxLength(this)" onblur="changeInfo(this)">
                                </div>
                            </div>
                            <div class="col-3">
                                <div class="form-group">
                                    <label for="">设计荷载：</label>
                                    <input type="text" class="form-control form-control-sm" name="design_load" value="<%- info.design_load %>" org="<%- info.design_load %>" placeholder="请输入" maxlength="20" oninput="limitMaxLength(this)" onblur="changeInfo(this)">
                                </div>
                            </div>
                            <div class="col-3">
                                <div class="form-group">
                                    <label for="">路基宽度（m）：</label>
                                    <input type="text" class="form-control form-control-sm" name="bed_width" value="<%- info.bed_width %>" org="<%- info.bed_width %>" placeholder="请输入" maxlength="20" oninput="limitMaxLength(this)" onblur="changeInfo(this)">
                                </div>
                            </div>
                            <div class="col-3">
                                <div class="form-group">
                                    <label for="">隧道净宽（m）：</label>
                                    <input type="text" class="form-control form-control-sm" name="tunnel_width" value="<%- info.tunnel_width %>" org="<%- info.tunnel_width %>" placeholder="请输入" maxlength="20" oninput="limitMaxLength(this)" onblur="changeInfo(this)">
                                </div>
                            </div>
                            <div class="col-3">
                                <div class="form-group">
                                    <label for="">地震动峰值系数（m2）：</label>
                                    <input type="text" class="form-control form-control-sm" name="quake_peak_value" value="<%- info.quake_peak_value %>" org="<%- info.quake_peak_value %>" placeholder="请输入" maxlength="20" oninput="limitMaxLength(this)" onblur="changeInfo(this)">
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="col-12 px-3">
                    <div class="row">
                        <div class="col-6">
                            <div class="py-2 font-weight-bold">主要工程数量</div>
                            <div id="main_qty_spread" style="height: 400px"></div>
                        </div>
                        <div class="col-6">
                            <div class="py-2 font-weight-bold">工料机消耗</div>
                            <div id="gcl_qty_spread" style="height: 400px"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    const mainQty = JSON.parse('<%- JSON.stringify(info.main_quantity )%>');
    const gclQty = JSON.parse('<%- JSON.stringify(info.gcl_quantity )%>');
    $.subMenu({
        menu: '#sub-menu', miniMenu: '#sub-mini-menu', miniMenuList: '#mini-menu-list',
        toMenu: '#to-menu', toMiniMenu: '#to-mini-menu',
        key: 'menu.1.0.0',
        miniHint: '#sub-mini-hint', hintKey: 'menu.hint.1.0.1',
        callback: function (info) {
            if (info.mini) {
                $('.panel-title').addClass('fluid');
                $('#sub-menu').removeClass('panel-sidebar');
            } else {
                $('.panel-title').removeClass('fluid');
                $('#sub-menu').addClass('panel-sidebar');
            }
            autoFlashHeight();
        }
    });
    // 根据Maxlength限制input输入
    function limitMaxLength (obj) {
        if (obj.value.length > obj.maxLength) {
            obj.value = obj.value.substr(0, obj.maxLength);
        }
    }

    function changeInfo(obj) {
        const field = obj.getAttribute('name');
        if (!field) return;
        if (obj.getAttribute('org') === obj.value) return;

        const updateData = {};
        updateData[field] = obj.value;
        postData('info/save', { updateData }, function (result) {
            obj.setAttribute('org', obj.value);
        }, function () {
            obj.value = obj.getAttribute('org');
        });
    };
</script>