150 lines
3.9 KiB
HTML
150 lines
3.9 KiB
HTML
|
<!DOCTYPE html>
|
|||
|
|
<html>
|
|||
|
|
|
|||
|
|
<head>
|
|||
|
|
|
|||
|
|
<title>企业数</title>
|
|||
|
|
<!-- 引入 echarts.js -->
|
|||
|
|
<link rel="stylesheet" href="js/layui-v2.5.6/layui/css/layui.css" media="all">
|
|||
|
|
<script src="echarts/echarts.min.js" charset="utf-8"></script>
|
|||
|
|
<script src="js/layui-v2.5.6/layui/layui.all.js"></script>
|
|||
|
|
<style type="text/css">
|
|||
|
|
.layui-btn-primary {
|
|||
|
|
border: 1px solid #C9C9C9;
|
|||
|
|
background-color: #01b9dd !important;
|
|||
|
|
color: white !important;
|
|||
|
|
}
|
|||
|
|
</style>
|
|||
|
|
</head>
|
|||
|
|
|
|||
|
|
<body>
|
|||
|
|
<table id="demo" class="layui-hide" lay-filter="xk"></table>
|
|||
|
|
|
|||
|
|
<script type="text/html" id="barDemo">
|
|||
|
|
<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看详情</a>
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<script type="text/javascript">
|
|||
|
|
layui.use('table', function() {
|
|||
|
|
var table = layui.table;
|
|||
|
|
table.render({
|
|||
|
|
elem: '#demo',
|
|||
|
|
// url: 'files/jclb.json' //数据接口[123, 265, 372, 274][84, 182, 213, 56]
|
|||
|
|
// ,
|
|||
|
|
"data": [{
|
|||
|
|
"a": "永锋集团有限公司",
|
|||
|
|
"b": "二屯镇",
|
|||
|
|
"d": "23",
|
|||
|
|
"e": "467",
|
|||
|
|
"f": "451",
|
|||
|
|
"g": "良好"
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
"a": "山东华鲁恒升集团有限公司",
|
|||
|
|
"b": "黄河涯镇",
|
|||
|
|
"d": "11",
|
|||
|
|
"e": "421",
|
|||
|
|
"f": "415",
|
|||
|
|
"g": "良好"
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
"a": "山东恒源石油化工股份有限公司",
|
|||
|
|
"b": "赵虎镇",
|
|||
|
|
"d": "32",
|
|||
|
|
"e": "642",
|
|||
|
|
"f": "631",
|
|||
|
|
"g": "良好"
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
"a": "山东德州烟草有限公司",
|
|||
|
|
"b": "抬头寺镇",
|
|||
|
|
"d": "18",
|
|||
|
|
"e": "241",
|
|||
|
|
"f": "241",
|
|||
|
|
"g": "良好"
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
"a": "东海建设集团有限公司",
|
|||
|
|
"b": "袁桥镇",
|
|||
|
|
"d": "25",
|
|||
|
|
"e": "445",
|
|||
|
|
"f": "442",
|
|||
|
|
"g": "良好"
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
"a": "华能德州电厂",
|
|||
|
|
"b": "天衢街道",
|
|||
|
|
"d": "36",
|
|||
|
|
"e": "575",
|
|||
|
|
"f": "541",
|
|||
|
|
"g": "良好"
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
"a": "金能科技股份有限公司",
|
|||
|
|
"b": "运河街道",
|
|||
|
|
"d": "19",
|
|||
|
|
"e": "242",
|
|||
|
|
"f": "231",
|
|||
|
|
"g": "良好"
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
"a": "景津投资有限公司",
|
|||
|
|
"b": "二屯镇",
|
|||
|
|
"d": ",13",
|
|||
|
|
"e": "343",
|
|||
|
|
"f": "314",
|
|||
|
|
"g": "良好"
|
|||
|
|
}
|
|||
|
|
],
|
|||
|
|
cellMinWidth: 80 //全局定义常规单元格的最小宽度
|
|||
|
|
,
|
|||
|
|
page: true //开启分页
|
|||
|
|
,
|
|||
|
|
cols: [
|
|||
|
|
[ //表头
|
|||
|
|
{
|
|||
|
|
field: 'a',
|
|||
|
|
title: '企业名称'
|
|||
|
|
}, {
|
|||
|
|
field: 'b',
|
|||
|
|
title: '企业地址'
|
|||
|
|
}, {
|
|||
|
|
field: 'd',
|
|||
|
|
title: '尘肺情况'
|
|||
|
|
}, {
|
|||
|
|
field: 'e',
|
|||
|
|
title: '培训人数'
|
|||
|
|
}, {
|
|||
|
|
field: 'e',
|
|||
|
|
title: '体检人数'
|
|||
|
|
}, {
|
|||
|
|
field: 'f',
|
|||
|
|
title: '评价情况'
|
|||
|
|
}, {
|
|||
|
|
field: 'g',
|
|||
|
|
title: '检测情况'
|
|||
|
|
}, {
|
|||
|
|
fixed: 'right',
|
|||
|
|
title: '查看',
|
|||
|
|
width: 165,
|
|||
|
|
align: 'center',
|
|||
|
|
toolbar: '#barDemo'
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
]
|
|||
|
|
});
|
|||
|
|
//监听行工具事件
|
|||
|
|
table.on('tool(xk)', function(obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
|
|||
|
|
var data = obj.data //获得当前行数据
|
|||
|
|
,
|
|||
|
|
layEvent = obj.event; //获得 lay-event 对应的值
|
|||
|
|
if (layEvent === 'detail') {
|
|||
|
|
layer.msg('查看详情');
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
</script>
|
|||
|
|
</body>
|
|||
|
|
|
|||
|
|
</html>
|