baoshi-was/resources/views/equipment/_buildGroup.blade.php

<div class="modal fade" id="buildGroup" tabindex="-1" role="dialog" data-keyboard="false" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header row m-0">
                <h5 class="font-weight-bold">设备组构建</h5>
                <h5 class="offset-1">起始依据设备：<b>@{{ currentEl.code }}</b></h5>
            </div>
            <div class="modal-body container">
                <div class="row form-inline">
                    <label for="buildCount" class="offset-3">附加构建数量：</label>
                    <input class="form-control ml-1" placeholder="构建数" type="number" step="1" min="1" id="buildCount"
                           @keydown.enter="buildGroup()" v-model="buildEqInfo.count"></input>

                    <input class="switch" type="checkbox" v-model="increment"/>
                </div>
                <div class="row mt-3">
                    <div class="col-6">
                        <div class="mb-0 p-0" style="border: 1px #1b4b72 solid;margin-top: 1px"
                             v-for="(el,index) in buildEqInfo.list" :class="buildEqInfo.current==index ? 'box-shadow-dark' : ''"
                             @click="pitchEq(el,index)"
                             :style="[{backgroundColor:el.color},{width:(el.w*ratio)+'px'},{height:(el.h*ratio)+'px'}]">
                            <div class="h-100 txt-sty w-100 el-center re" v-if="el.id>0">@{{ el.code }}</div>
                        </div>
                    </div>
                    <div class="col-6 h-100">
                        <div class="row pb-2" v-for="equipment in equipments">
                            <div class="col-5" @click="switchEq(equipment)">
                                <div style="border: 1px #0070C0 solid" :class="buildEqInfo.currentEqId==equipment.id ? 'box-shadow-dark' : ''" :style="[{backgroundColor:equipment.color},{width:(equipment.h*ratio)+'px'},{height:(equipment.w*ratio)+'px'}]"></div>
                            </div>
                            <div class="col-7 p1">
                                @{{ equipment.describe }}
                            </div>
                        </div>
                        <div class="row pb-2" v-for="equipment in elSeList">
                            <div class="col-5" @click="switchEq(equipment)">
                                <div style="border: 1px #0070C0 solid" :class="buildEqInfo.currentEqId==equipment.id ? 'box-shadow-dark' : ''" :style="[{backgroundColor:equipment.color},{width:(equipment.h*ratio)+'px'},{height:(equipment.w*ratio)+'px'}]"></div>
                            </div>
                            <div class="col-7 p1">
                                @{{ equipment.describe }}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button class="pull-right btn btn-success" @click="buildEquipmentGroup()">开始构建</button>
            </div>
        </div>
    </div>
</div>