response/target/classes/public/app/yujing/view/Buhegelv4.html

<style type="text/css">
    .top {
        width: 80%;
        margin: auto;
        display: flex;
        align-items: center;
    }

        .top select {
            width: 150px;
            height: 30px;
            margin-left: 10px;
        }

    .guanLi {
        width: 93%;
        margin: auto;
        text-align: center;
    }

        .guanLi tr {
            height: 30px;
        }

    .yanse {
        background: #e4f4f8;
        border: #c9ebf2 1px solid;
    }

    .btn {
        width: 60px;
        text-align: center;
        height: 30px;
        margin-left: 50px;
        background: #e4e8e5f5;
        border: none;
        color: #fff;
        border-radius: 5px;
    }

    .class_tabel {
        /*position: absolute;*/
        height: 40px;
        text-align: center;
        font-size: 15px;
        line-height: 40px;
        background: #e4f4f8;
        border: #c9ebf2 1px solid;
    }
    #myModal .layui-table-cell{
       height:auto;
       overflow:visible;
      text-overflow:inherit;
     white-space:normal;
    }
    .Top i {
            width: 11%;
        }

    .font_div {
        width: 30px;
        height: 100%;
        color: #000000;
        font-weight: 600;
    }
</style>


<div class="container">
    <div style="    margin-top: 4%; text-align: center;">
        <h2>被抽样单位多件不合格预警</h2><h3 style="margin-top: 10px;"><span id="time_show"></span></h3>
    </div>
    <div style="margin-top: 40px;">
        <div style="    text-align: center; width: 100%;  margin-bottom: 20px;">
            <!--请选择开始时间：<input type="date" ng-model="date" placeholder="" style="width: 200px;" class="form-control input-sm w-sm inline m-r" />-->
            开始时间：<input type="date" ng-model="date" placeholder="" style="width: 200px;" class="form-control input-sm w-sm inline m-r" />
            结束时间：<input type="date" ng-model="date2" placeholder="" style="width: 200px;" class="form-control input-sm w-sm inline m-r" />

            <input type="button" style="background: #0eb3e694;width: 80px;" class="btn btn-success" value="查询" ng-click="YJ_BCDW()" />
        </div>
        <div style="    margin-left: 25%;">
            <div style="float: left;">
                <span style="float: left;">不合格件数为2件</span>
                <div style="  margin-left: 110px; width: 30px; height: 18px;background: #fff900;"></div>
            </div>
            <div style="float: left;">
                <span style="float: left;margin-left: 15px;">不合格件数为3件</span>
                <div style="    margin-left: 125px; width: 30px; height: 18px;background: #ff8300;"></div>
            </div>
            <div style="float: left;">
                <span style="margin-left: 10px;float: left;">不合格件数为4件及以上</span>
                <div style="    margin-left: 160px; width: 30px; height: 18px;background: red;"></div>
            </div>
            <div style="float: left;">
                <i class="fa fa-exclamation-circle" aria-hidden="true" style="color: #ff0000;margin-left: 30px;"></i>
                <a style="color: #0029ff;" data-toggle="modal" data-target="#myModal2">定义</a>
            </div>
        </div>

        <div style="margin-top: 65px;">
            <table st-table="dispData1" st-safe-src="mydata" class="table table-striped" id="myTable" style="width:80%;width: -0.34%;">
                <thead>
                    <tr>
                        <th style="width: 25%;">被抽样单位名称</th>
                        <th style="width: 7%;text-align: center;">不合格件数</th>
                        <th style="width: 7%;">不合格项次数</th>
                        <th style="width: 7%;text-align: center;">详情</th>
                        <th style="text-align: center;">等级</th>
                    </tr>
                </thead>
                <st-loading is-show="isShow" tip-show="正在加载请稍后!!"></st-loading>
                <tbody>
                    <tr ng-repeat="item in dispData1" class="">
                        <td style="font-size: 16px;"> {{item.DW}}</td>
                        <td style="font-size: 16px;"> {{item.JS}}</td>
                        <td style="font-size: 16px;"> {{item.XCS}}</td>
                        <td style="font-size: 16px;text-align: center;" ng-click="YJ_All('{{item.DW}}')" data-toggle="modal" data-target="#myModal"> 查看</td>
                        <td>
                            <div id="div_ji" class="font_div" style="margin-left:23%;width: 50px;float: left;text-align: center;background:{{item.ji}};">
                                -
                            </div>
                        </td>
                    </tr>

                </tbody>

            </table>

        </div>

    </div>

</div>

<script>

    $(function () {
        $('.dept_select').chosen();
    });




</script>


<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog" style="    width: 80%;">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">不合格预警</h4>
            </div>
            <div class="modal-body">
                <div style="margin-left: 6%;">
                    <table class="layui-hide" id="test2"></table>

                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>


<div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog" style="    width: 50%;margin-top:20%;">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">定义</h4>

            </div>
            <div class="modal-body">
                <h3 id="show_text_h" style="color: #ff000085;line-height: 33px;font-size: 20px;">
                    &nbsp;&nbsp;&nbsp;&nbsp;被抽样单位多件不合格预警指的是在1年内某个被抽样单位出现2件及以上的不合格食品。<br />&nbsp;&nbsp;&nbsp;&nbsp;预警分为3个等级：<br />&nbsp;&nbsp;&nbsp;&nbsp;1. 1年内某个被抽样单位出现2件不合格的预警为黄色<br />&nbsp;&nbsp;&nbsp;&nbsp;2. 1年内某个被抽样单位出现3件不合格的预警为橙色<br />&nbsp;&nbsp;&nbsp;&nbsp;3. 1年内某个被抽样单位出现4件及以上不合格的预警为红色
                </h3>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>