itsm-pc-handle/assets/views/fixed/list.html

<style>
    /* 操作文字颜色 */

    .handlefont {
        color: #5496e3 !important
    }

    /* 头部 */

    .searchlistback {
        /* height: 150px; */
        /* background-color: #f9fbff!important; */
        position: relative;
        /* padding: 25px 0 */
        margin-bottom: 8px !important;
    }

    .searchBtnBox>.btn {
        margin: 0 8px 10px 0;
    }

    .searchlistback .tit {
        font-size: 14px;
        font-weight: bold;
        display: inline-block;
        margin-bottom: 7px
    }

    /* 左边搜索条件盒子 */

    .searchlistback .left {
        float: left;
        width: 600px;
        margin-left: 15px;
        margin-top: 10px
    }

    /* 右边按钮盒子 */

    .searchlistback .right {
        position: absolute;
        top: 82px;
        right: 7px;
    }

    .searchlistback .right input {
        float: left;
    }

    .searchlistback .right button {
        float: left;
    }

    .searchlistback .right .anniu {
        width: 88px;
        height: 34px;
        border: 0;
        margin-right: 10px;
        border-radius: 2px !important;
        padding: 0
    }

    /* 搜索 */

    .searchlistback .right .anniu:nth-child(1) {
        background-color: #005395;
        color: white;
        border: 1px #005395 solid
    }

    .searchlistback .right .anniu:nth-child(1):hover {
        background-color: #004279;
    }

    /* 重置 */

    .searchlistback .right .anniu:nth-child(2) {
        background-color: white;
        color: #999999;
        border: 1px #dddddd solid;
        font-size: 14px
    }

    .searchlistback .right .anniu:nth-child(2):hover {
        border: 1px #999999 solid
    }

    /* 刷新 */

    .searchlistback .right .anniu:nth-child(3) {
        border: 1px #79a3c4 solid;
        background-color: #e6eef4;
        color: #79a3c4;
    }

    /* 高级搜索 */

    .searchlistback .right .anniu:nth-child(4) {
        background-color: #e6eef4;
        color: #005359;
        border: 1px #005359 solid
    }

    .searchlistback .right .anniu:nth-child(4):hover {
        background-color: #e6eef4;
        color: #79a3c4;
        border: 1px #79a3c4 solid
    }

    /* 打印二维码 */

    .searchlistback .right .anniu:nth-child(5) {
        background-color: white;
        color: #4a90e2;
        border: 1px #4a90e2 solid
    }

    /* 导出 */

    .searchlistback .right .anniu:nth-child(6) {
        background-color: #e6eef4;
        color: #005359;
        border: 1px #005359 solid;
        font-size: 14px
    }

    .searchlistback .right .anniu:nth-child(6):hover {
        background-color: #e6eef4;
        color: #79a3c4;
        border: 1px #79a3c4 solid
    }

    .searchlistback .left>div {
        float: left;
        width: 300px;
    }

    /* 下拉框的长宽 */

    .tree-control .tree-view {
        width: 60%
    }

    /* 树形下拉框的长宽 */

    .left .tree-control {
        width: 60%;
        height: 32px;
        margin: 0;
    }

    .tree-control {
        width: 100%;
        height: 32px;
        margin: 0 auto
    }

    div.cs-select {
        width: 100% !important;
        height: 30px;
    }

    /* 条件搜索下拉框 */

    .left .tiaojian .selectzise {
        width: 96px !important;
    }

    .left .tiaojian .btn {
        border-radius: 4px 0 0 4px;
    }

    /* 输入框长度 */

    .left .tiaojianipt {
        width: 157px;
        height: 28px !important;
        font-size: 12px;
        color: black;
        padding-bottom: 6px;
    }

    .row {
        margin: 0
    }

    /* 导出弹框 */

    .modal-body>div:nth-child(2) {
        text-align: center;
        margin-bottom: 31px;
        margin-top: 20px
    }

    .modal-content {
        background-color: rgb(232, 232, 232) !important;
    }

    div.form-group label {
        font-weight: bold;
        margin-left: 46px;
        margin-top: 15px
    }

    /* 资产状态下拉框 */

    .left .state {
        width: 60% !important;
        /* border: 1px rgb(210,210,210) solid; */
        border-radius: 5px;
    }

    .left .tiaojian .ui-select-bootstrap>.ui-select-match>.btn {
        font-size: 12px;
        color: black;
        padding-left: 4px;
        border-radius: 4px 0 0 4px;
    }

    .left .zhuangtai .ui-select-bootstrap>.ui-select-match>.btn {
        font-size: 12px;
        color: black;
        padding-left: 4px;
        border-radius: 4px;
    }

    /* 资产分类下拉框 */

    .left .tree-control .tree-input {
        padding-left: 4px;
        font-size: 12px;
        padding-top: 5px;
        color: rgb(198, 198, 200) !important;
    }

    /* 高级搜索 */

    .senior_fixed {
        width: 100%;
        height: 100%;
        position: fixed;
        left: 0;
        top: 0;
        background-color: rgba(0, 0, 0, 0.5);
        z-index: 9999;
    }

    .senior {
        width: 340px;
        height: 405px;
        /* margin-left: -170px;
            margin-top: -202px;
            position: absolute;
            left: 50%;
            top: 50%; */
        background-color: white;
        border-radius: 2px;
        transition-duration: 0.8s
    }

    .new_top {
        margin-left: -170px;
        /* margin-top: -202px; */
        position: fixed;
        left: 50%;
        top: -405px;
    }

    .new_after {
        margin-left: -170px;
        margin-top: -202px;
        position: fixed;
        left: 50%;
        top: 50%;
    }

    .senior .head {
        width: 100%;
        height: 40px;
        line-height: 40px;
        text-align: center;
        border-bottom: 1px #eeeeee solid;
        position: relative;
    }

    /* 交叉 */

    .senior .head .jiaocha {
        width: 14px;
        height: 14px;
        line-height: 12px;
        text-align: center;
        border: 1px #6e6e6e solid;
        border-radius: 50%;
        cursor: pointer;
        position: absolute;
        right: 20px;
        top: 15px
    }

    .senior .body {
        width: 298px;
        height: 302px;
        margin: 0 auto;
        margin-top: 10px;
        border: 1px #d1d1d1 solid;
        border-radius: 2px
    }

    .senior .body .new {
        width: 100%;
        height: 39px;
        background-color: #fbfbfb;
        border-bottom: 2px #e3e3e3 solid;
        text-align: center;
        line-height: 39px;
        cursor: pointer;
    }

    .senior .body .new span:nth-child(1) {
        border-radius: 50%;
        border: 1px #78ace8 solid;
        display: inline-block;
        width: 14px;
        text-align: center;
        height: 14px;
        line-height: 12px;
        padding-right: 13px;
    }

    .senior .body .new span {
        color: #78ace8
    }

    .senior .body .sele_ipt {
        width: 100%;
        height: 261px;
        overflow: hidden;
        overflow-y: scroll;
        background-color: #f5f5f5;
    }

    .senior .body .sele_ipt>div {
        height: 77px;
        background-color: #f5f5f5;
        margin-left: 19px;
        padding-top: 16px
    }

    .senior .body .sele_ipt>div>span {
        font-weight: bold;
    }

    .senior .body .sele_ipt>div>input {
        float: left;
        width: 149px;
        margin-top: 6px;
        height: 34px;
        font-size: 12px;
        padding-bottom: 6px
    }

    .senior .body .sele_ipt .daxiao {
        width: 97px !important;
        margin-top: 6px
    }

    .senior .body .sele_ipt .ui-select-bootstrap>.ui-select-match>.btn {
        font-size: 12px;
        padding-left: 2px;
    }

    .senior .fot_btn {
        width: 100%;
        text-align: center;
        padding-top: 9px
    }

    .senior .fot_btn .search {
        width: 80px;
        height: 34px;
        background-color: #123f8f;
        border: 1px #123f8f solid;
        color: white
    }

    .senior .fot_btn .guanbi {
        width: 80px;
        height: 34px;
        background-color: #f2f2f2;
        border: 1px #d1d1d1 solid;
        color: black;
        margin-left: 19px
    }

    .modal-content {
        background-color: white !important;
        width: 340px;
        height: 194px;
        margin-left: -170px;
        margin-top: -97px;
        position: fixed;
        left: 50%;
        top: 50%;
    }

    .modal-content .bg-primary {
        background: white;
        color: black;
        border-bottom: 1px rgb(209, 209, 209) solid;
    }

    .modal-content .fa-inbox:before {
        display: none
    }

    .modal-content .modal-body>div:nth-child(2) {
        margin-top: 7px;
    }

    .modal-content .form-group {
        position: relative;
        background-color: rgb(245, 245, 245);
        height: 92px;
        margin-top: 10px !important;
        width: 299px;
        left: 20px;
        border: 1px rgb(216, 216, 216) solid;
        border-radius: 4px;
    }

    .modal-content .label {
        color: black;
        font-size: 14px !important;
    }

    .modal.in .modal-dialog {
        height: 100%;
    }

    .new_data {
        height: 34px;
        width: 80px;
        border-radius: 4px;
        border: 1px blue solid;
        background-color: rgb(166, 236, 136);
        color: blue;
    }

    .new_data:hover {
        color: blue;
    }

    .new_data:focus {
        color: blue;
    }

    .inspectlistsearch {
        width: 45% !important;
        margin-right: 16px
    }

    .iptSize {
        width: 60% !important;
        height: 28px !important;
    }

    .tree-control .tree-input {
        min-height: 28px !important
    }
</style>
<div ng-controller="fixedCtrl">
    <!-- <div class="row  onlines print-content" print-table="selected.items">
            <div class="qrcanvasfloat col-md-12">
                <label class="getfloat" ng-repeat="item in selected.items">
                    <p print-only class="fontsizes">{{item.uuid||'空'}}</p>
                    <p print-only class="fontsizes">{{item.name||'空'}}</p>
                    <p print-only class="fontsizes">{{item.createtime|date:"yyyy-MM-dd"}}</p>
                </label>
            </div>
        </div> -->
    <div class="row  onlines print-content" print-table="selected.items">
        <!--<label  class="qrcanvas"></label>-->
        <div class="qrcanvasfloat col-md-12">
            <label class="getfloat" ng-repeat="item in selected.items">
                <!-- <p print-only class="fontsizes">{{item.uuid||'空'}}</p>
                  <p print-only class="fontsizes">{{item.name||'空'}}</p>
                  <p print-only class="fontsizes">{{item.createtime|date:"yyyy-MM-dd"}}</p> -->
                <table print-only class="tag" style="table-layout: fixed; width: 190px">
                    <colgroup>
                        <col style="width: 70px">
                        <col style="width: 120px">
                    </colgroup>
                    <tr>
                        <th class="tag-s6z2" colspan="2">江西省政府</th>
                    </tr>
                    <tr>
                        <td class="tag-s6z2">编码</td>
                        <td class="tag-031e">{{item.uuid||'空'}}</td>
                    </tr>
                    <tr>
                        <td class="tag-s6z2">型号</td>
                        <td class="tag-031e">{{item.props.hw_modelnumber||'空'}}</td>
                    </tr>
                    <tr>
                        <td class="tag-s6z2">序列号</td>
                        <td class="tag-031e">{{item.props.hw_assetsxlh||'空'}}</td>
                    </tr>
                    <tr>
                        <td class="tag-s6z2">用途</td>
                        <td class="tag-031e">{{item.props.hw_assetsyongtu||'空'}}</td>
                    </tr>
                    <tr>
                        <td class="tag-s6z2">IP</td>
                        <td class="tag-031e">{{item.props.hw_assetsip||'空'}}</td>
                    </tr>
                    <tr>
                        <td class="tag-s6z2">位置</td>
                        <td class="tag-031e">{{item.props.hw_assetsweizhi||'空'}}</td>
                    </tr>
                    <!-- <tr>
                        <td class="tag-baqh">资产名称</td>
                        <td class="tag-yw4l">{{item.props.hw_mingcheng||'空'}}</td>
                    </tr>
                    <tr>
                        <td class="tag-baqh">创建时间</td>
                        <td class="tag-yw4l">{{item.createtime|date:"yyyy-MM-dd"}}</td>
                    </tr> -->
                </table>
            </label>
        </div>
    </div>
    <section id="page-title">
        <div class="row">
            <div class="col-sm-8">
                <h1 class="mainTitle">CMDB
                    <i tooltip='CMDB,点击操作处理任务' tooltip-placement="right"
                        class="fa  ti-help-alt margin-left-10 fontcolor-five pointfont"></i>
                </h1>
            </div>
        </div>
    </section>
    <div class="row searchlistback">
        <div class="col-xs-10">
            <!-- <div id="jiantou">
                    <span class="tit">资产分类：</span><br>
                    <multi-select-tree ng-model="cifilter_classic" data-input-model="select_treedata" data-output-model="cifilter_classics" theme="bootstrap" multi-select="false" data-default-label="资产分类" data-callback="onFilterCallback(item)" data-select-only-leafs="true"
                        reset-search-input="false" data-trans-label="label" data-switch-view="false"></multi-select-tree>
                </div> -->
            <div class=" inspectlistsearch pull-left">
                <div class="pull-left" style="padding-top:4px;font-size:14px">资产分类：</div>
                <multi-select-tree class="pull-right iptSize" ng-model="cifilter_classic"
                    data-input-model="select_treedata" data-output-model="cifilter_classics" theme="bootstrap"
                    multi-select="false" data-callback="onFilterCallback(item)" data-select-only-leafs="true"
                    reset-search-input="false" data-trans-label="label" data-switch-view="false"></multi-select-tree>
            </div>
            <!-- <div>
                    <span class="tit">资产状态：</span><br>
                    <div class="zhuangtai">
                        <ui-select class="pull-left selectzise state" ng-model="lb_state_data.state_data" theme="bootstrap" ng-change="onChangestatus(lb_state_data.state_data)">
                            <ui-select-match placeholder="选择搜索类型">
                                {{lb_state_data.state_data.name}}
                            </ui-select-match>
                            <ui-select-choices repeat="n in state_data | filter: $select.search">
                                <div ng-bind-html="n.name | highlight: $select.search"></div>
                            </ui-select-choices>
                        </ui-select>
                    </div>
                </div> -->
            <div class=" inspectlistsearch pull-left">
                <div class="pull-left" style="padding-top:4px;font-size:14px">资产状态：</div>
                <ui-select class="pull-right iptSize" ng-model="lb_state_data.state_data" theme="bootstrap"
                    ng-change="onChangestatus(lb_state_data.state_data)">
                    <ui-select-match>
                        {{lb_state_data.state_data.name}}
                    </ui-select-match>
                    <ui-select-choices repeat="n in state_data | filter: $select.search">
                        <div ng-bind-html="n.name | highlight: $select.search"></div>
                    </ui-select-choices>
                </ui-select>
            </div>
            <!-- <div>
                    <span class="tit">条件搜索：</span><br>
                    <div class="tiaojian">
                        <ui-select class="pull-left selectzise leixing" ng-model="lb_tiaojian.tiaojian" theme="bootstrap">
                            <ui-select-match placeholder="选择搜索类型">
                                {{lb_tiaojian.tiaojian.name}}
                            </ui-select-match>
                            <ui-select-choices repeat="n in tiaojian">
                                <div ng-bind-html="n.name"></div>
                            </ui-select-choices>
                        </ui-select>
                    </div>
                    <input type="text" style="border-radius: 0px 4px 4px 0px !important" class="form-control tiaojianipt" ng-model="searchSolutionInput" placeholder="请输入关键字">
                </div> -->
            <div class=" inspectlistsearch pull-left">
                <div class="pull-left" style="padding-top:4px;font-size:14px">条件搜索：</div>
                <div class="pull-right iptSize">
                    <ui-select class="pull-left" style="width:40%!important;height: 28px!important"
                        ng-model="lb_tiaojian.tiaojian" theme="bootstrap">
                        <ui-select-match>
                            {{lb_tiaojian.tiaojian.name}}
                        </ui-select-match>
                        <ui-select-choices repeat="n in tiaojian">
                            <div ng-bind-html="n.name"></div>
                        </ui-select-choices>
                    </ui-select>
                    <input type="text" style="width:60%!important;height: 28px!important" class="pull-left"
                        ng-model="searchSolutionInput">
                </div>
            </div>
        </div>
        <div class="col-xs-2 searchBtnBox">
            <div class="btn btn_search" ng-click="searchSolution(lb_tiaojian.tiaojian.value,searchSolutionInput)">搜索</div>
            <div class="btn btn_clean" ng-click="reset()">重置</div>
            <!-- <div class="btn btn_other" ng-click="new_data()">刷新</div> -->
            <div class="btn btn_other" ng-click="senior_cli()">高级搜索</div>
            <div print-hide class="btn btn_other" print-btn ng-click="printIt()">打印二维码</div>
            <div class="btn btn_other" ng-click="exportopen()">导出</div>
        </div>
    </div>
    <div class="tableList" ui-i18n="{{lang}} ">
        <!-- <div id="grid" ui-grid="gridOptions" ui-grid-pagination external-scopes="$scope" ui-grid-cellNav ui-grid-resize-columns ui-grid-pinning
                ui-grid-selection ui-grid-move-columns ui-grid-exporter class="grid"></div> -->
        <div id="grid" ui-grid="gridOptions" ui-grid-pagination external-scopes="$scope" ui-grid-resize-columns
            ui-grid-pinning ui-grid-selection ui-grid-move-columns class="grid"></div>
    </div>
    <!-- 高级搜索 -->
    <div class="senior_fixed" ng-show="senior_show">
        <div class="senior" ng-class="gdzc_edit">
            <div class="head">
                <span>高级搜索</span>
                <span class="jiaocha" ng-click="close()">×</span>
            </div>
            <div class="body">
                <div class="new" ng-click="new_select()">
                    <span>＋</span>
                    <span>新增字段</span>
                </div>
                <div class="sele_ipt">
                    <div ng-repeat="r in new_one">
                        <span ng-click="dwdws()">自定义字段：</span><br>
                        <ui-select class="pull-left selectzise daxiao" style="height:28px!important" ng-model="$parent.new_one[$index].keys"
                            theme="bootstrap" ng-change="delet($parent.new_one[$index].keys)">
                            <ui-select-match placeholder="选择搜索类型">
                                {{r.keys.templateOptions.label}}
                            </ui-select-match>
                            <ui-select-choices repeat="n in propTypeOptions">
                                <div ng-bind-html="n.templateOptions.label"></div>
                            </ui-select-choices>
                        </ui-select>
                        <input type="text" placeholder="请输入关键字" style="height:28px!important" ng-model="$parent.new_one[$index].vals">
                    </div>
                </div>
            </div>
            <div class="fot_btn">
                <input type="button" class="btn search" value="搜索" ng-click="gaoji_search()">
                <input type="button" class="btn guanbi" value="取消" ng-click="close()">
            </div>
        </div>
    </div>
</div>