zuel-itsm-3.0.2/assets/views/means/tpl/mapmodal.html

<style>
    .bootstrap-touchspin .input-group-btn-vertical>.btn {
        padding: 6px 10px;
        /* padding-top: 5px !important; */
    }
    
    .bootstrap-touchspin .input-group-btn-vertical i {
        top: 0px;
    }
    
    .bootstrap-touchspin .input-group-btn-vertical .bootstrap-touchspin-down {
        margin-top: 0px;
    }
    /*     
        .form-control {
            height: 28px;
        } */
    
    .input-group-addon:not(:first-child):not(:last-child),
    .input-group-btn:not(:first-child):not(:last-child),
    .input-group .form-control:not(:first-child):not(:last-child) {
        border-radius: 2px;
    }
    
    .btn.btnopen {
        padding: 6px 8px;
    }
</style>
<div class="modal-header">
    <div class="modal-title fontcolor-two fontsizes-14">新增关联<button type="button" class="close pull-right" ng-click="cancel()">×</button></div>
</div>
<div class="row" ng-show="vm.tabs.length==xianshi">
    <div class="col-xs-12">
        <div class="pull-left" style="padding:10px;" ng-style='width'>
            <div style="border:1px solid #eee;;border-radius: 2px;width:775px">
                <!-- <div class="padding-10"><span>资产关系图</span>
                </div> -->
                <div class="rightrowbottom">
                    <div id="meansmap" style="height:100%;width:100%;"></div>
                </div>
            </div>
        </div>
        <div class="attribute_message pull-right" style="margin-right:0px;padding-right:10px;padding-top:10px;padding-bottom:10px;width:200px">
            <div style="border:1px solid #eee;padding:5px;color:#666;height:220px;border-radius: 2px">
                <div class="headmap padding-5">
                    资产现状
                </div>
                <div class="body" style="color:#999">
                    <div class=" padding-5 ">
                        <span class="tit ">内部编码：</span>
                        <span class="neirong ">{{cmdbtype.data.uuid||'暂无'}}</span>
                    </div>
                    <div class="padding-5 ">
                        <span class="tit ">配置标题：</span>
                        <span class="neirong ">{{cmdbtype.name||'暂无'}}</span>
                    </div>
                    <div class="padding-5 ">
                        <span class="tit ">状态：</span>
                        <span class="neirong ">{{cmdbtype.data.hw_state||'暂无'}}</span>
                    </div>
                    <div class="padding-5 ">
                        <span class="tit ">资产管理员：</span>
                        <span class="neirong ">{{cmdbtype.data.hw_guanliyuan||'暂无'}}</span>
                    </div>
                    </ul>
                </div>
            </div>
            <div style="border:1px solid #eee;padding:5px;color:#666;height:371px;border-radius: 2px;margin-top:10px" ng-if="cmdbtype.name">
                <div class="headmap padding-5">
                    新增关联
                </div>
                <div class="modal-body">
                    <form role="form" class="row  margin-bottom-5">
                        <div class="margin-top-10">
                            <div class="control-label fontcolor-two fontsizes-14 col-xs-12"><span>*</span>关联资产:</div>
                            <div class="col-xs-12">
                                <div class="input-group">
                                    <input class="form-control" type="text" ng-model="cmdbtype.name" disabled/>
                                </div>
                            </div>
                        </div>
                        <div class="margin-top-10">
                            <div class="control-label fontcolor-two fontsizes-14 col-xs-12"><span>*</span>被关联资产:</div>
                            <div class="col-xs-12">
                                <div class="input-group" ng-model="guanxi.cmdbname.uuid">
                                    <input class="form-control" type="text" ng-model="guanxi.cmdbname.uuid" />
                                    <span class="input-group-btn">
                                            <button class="btn btnopen btn-default"
                                                    ng-click="openModal('lg',options,to.modal);"
                                                    type="button"><i class="glyphicon glyphicon-search"></i></button>
                                        </span>
                                </div>
                            </div>
                        </div>
                        <div class="margin-top-10">
                            <div class="control-label fontcolor-two fontsizes-14 col-xs-12"><span>*</span>关系名称:</div>
                            <div class="col-xs-12">
                                <div class="input-group">
                                    <ui-select ng-model="guanxi.name" theme="bootstrap" ng-change="onChange(guanxi.name)">
                                        <ui-select-match placeholder="请选择关系名称">
                                            {{$select.selected.name}}
                                        </ui-select-match>
                                        <ui-select-choices repeat="item in guanxidata | filter: $select.search">
                                            <div ng-bind-html="item.name | highlight: $select.search"></div>
                                        </ui-select-choices>
                                    </ui-select>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer ">
                    <button class="btn btnopen btn-primary " ng-click="ok(guanxi,cmdbtype) " data-dismiss="modal" translate="modal.button.OK " ng-disabled="!(guanxi.name&&guanxi.cmdbname&&guanxi.cmdbname.uuid)">OK</button>
                    <button class="btn btnopen btn-primary btn-o " ng-click="cancel() " translate="modal.button.CANCEL ">Cancel</button>
                </div>
            </div>
        </div>
    </div>
</div>