2025-06-27 10:04:22 +08:00

196 lines
7.2 KiB
HTML
Raw Permalink Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<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: 13.5%;
}
.layui-table-cell {
font-size:14px;
padding:0 5px;
height:auto;
overflow:visible;
text-overflow:inherit;
white-space:normal;
word-break: break-all;
}
</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="date1" 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_CDJK()" />
</div>
<div style=" margin-left: 23%;">
<div style="float: left;">
<span style="float: left;">不合格率排名第三</span>
<div style=" margin-left: 115px; width: 30px; height: 18px;background: #fff900;"></div>
</div>
<div style="float: left;">
<span style="float: left;margin-left: 15px;">不合格率排名第二</span>
<div style=" margin-left: 130px; width: 30px; height: 18px;background: #ff8300;"></div>
</div>
<div style="float: left;">
<span style="margin-left: 10px;float: left;">不合格率排名第一</span>
<div style=" margin-left: 125px; 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: 7%;">原产地</th>
<th style="width: 7%;">流水单号</th>
<th style="width: 7%;text-align: center;">不合格件数</th>
<th style="width: 7%;text-align: center;">总件数</th>
<th style="width: 7%;text-align: center;">不合格率(%)</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.CD}}</td>
<td style="font-size: 16px;"> {{item.lsh}}</td>
<td style="font-size: 16px;"> {{item.no}}</td>
<td style="font-size: 16px;"> {{item.total}}</td>
<td style="font-size: 16px;"> {{item.LV}}</td>
<td style="font-size: 16px;text-align: center;" ng-click="YJ_All('{{item.CD}}')" data-toggle="modal" data-target="#myModal"> 查看</td>
<td>
<div id="div_ji" class="font_div" style="margin-left:29%;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年内被抽检样品的进口原产地出现不合格率偏高情形并按照进口原产地对样品进行不合格率统计和排序。<br />&nbsp;&nbsp;&nbsp;&nbsp;预警分为3个等级<br />&nbsp;&nbsp;&nbsp;&nbsp;1. 进口原产地不合格率排序第三的预警为黄色<br />&nbsp;&nbsp;&nbsp;&nbsp;2. 进口原产地不合格率排序第二的预警为橙色<br />&nbsp;&nbsp;&nbsp;&nbsp;3. 进口原产地不合格率排序第一的预警为红色
</h3>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
</div>
</div>
</div>
</div>