486 lines
12 KiB
HTML
486 lines
12 KiB
HTML
<!DOCTYPE html>
|
||
<html>
|
||
|
||
<head>
|
||
<meta charset="utf-8" />
|
||
<title></title>
|
||
<link rel="stylesheet" type="text/css" href="css/layui.css" />
|
||
<script src="https://libs.baidu.com/jquery/2.0.0/jquery.min.js" type="text/javascript" charset="utf-8"></script>
|
||
<script src="layui.js" type="text/javascript" charset="utf-8"></script>
|
||
<script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=vG7axEyawFjtiQVjFQedhuaQcgtTs9FV"></script>
|
||
<style type="text/css">
|
||
.nav_tit{
|
||
width: 100%;
|
||
height: 30px;
|
||
background: #def2ff;
|
||
box-shadow: 0px 1px 5px #6666;
|
||
color: #666666;
|
||
line-height: 30px;
|
||
font-size: 14px;
|
||
padding-left: 10px;
|
||
box-sizing: border-box;
|
||
}
|
||
</style>
|
||
</head>
|
||
|
||
<body>
|
||
<div class="all">
|
||
<div class="left">
|
||
<div class="li active_li" data-src="main.html">
|
||
<div class="liimg"><img src="img/tb2.png" /></div>
|
||
<div class="lititle">首页</div>
|
||
</div>
|
||
<div class="li" data-src="baidu.html">
|
||
<div class="liimg"><img src="图标/yrdw.png" /></div>
|
||
<div class="lititle">用人单位分布</div>
|
||
</div>
|
||
<div class="li" data-src="pxsjtj.html">
|
||
<div class="liimg"><img src="img/tb3.png" /></div>
|
||
<div class="lititle">培训数据统计</div>
|
||
</div>
|
||
<div class="li" data-src="zwdaxxrj.html">
|
||
<div class="liimg"><img src="img/tb4.png" /></div>
|
||
<div class="lititle">职卫档案信息</div>
|
||
</div>
|
||
<div class="li" data-src="zywswhcdjglzkpc.html">
|
||
<div class="liimg"><img src="img/tb5.png" /></div>
|
||
<div class="lititle">卫生危害程度</div>
|
||
</div>
|
||
<div class="li" data-src="jgtbxxzh.html">
|
||
<div class="liimg"><img src="img/tb6.png" /></div>
|
||
<div class="lititle">第三方机构数据</div>
|
||
</div>
|
||
<!-- <div class="li" data-src="dpp.html">
|
||
<div class="liimg"><img src="img/tb7.png" /></div>
|
||
<div class="lititle">决策图表</div>
|
||
</div> -->
|
||
|
||
<div class="li" data-src="daping.html">
|
||
<a class="li" style="color: #FFF!important;" target="_blank" href="daping.html">
|
||
<div class="liimg"><img src="img/tb8.png" /></div>
|
||
<div class="lititle">综合分析</div>
|
||
</a>
|
||
</div>
|
||
|
||
</div>
|
||
<div class="right">
|
||
<div class="rtop">
|
||
<div class="rtopleft">
|
||
<img src="img/logo.png" />
|
||
</div>
|
||
<div id="nav_top_id" class="nav_tit">德州市职业健康管理中心 / 首页</div>
|
||
</div>
|
||
<div class="iframe">
|
||
<iframe src="main.html" width="100%" height="100%"></iframe>
|
||
</div>
|
||
<!-- <div class="content">
|
||
<div class="cli" style="background: #578ebe;">
|
||
<div class="clip">2020年山东神重点项目<span class="big">15</span>个</div>
|
||
<div class="clip">已开工：<span class="big" style="margin-right: 10px;">14</span>未开工：<span class="big">14</span></div>
|
||
<div class="clip">总投资：<span class="big">394亿元</span></div>
|
||
<div class="clip">计划投资：<span class="big">39亿元</span></div>
|
||
<div class="clip">投资完成：<span class="big">4亿元</span></div>
|
||
</div>
|
||
<div class="cli" style="background: #e35b5b;">
|
||
<div class="clip">2020年山东神重点项目<span class="big">15</span>个</div>
|
||
<div class="clip">已开工：<span class="big" style="margin-right: 10px;">14</span>未开工：<span class="big">14</span></div>
|
||
<div class="clip">总投资：<span class="big">394亿元</span></div>
|
||
<div class="clip">计划投资<span class="big">394亿元</span></div>
|
||
<div class="clip">投资完成<span class="big">394亿元</span></div>
|
||
</div>
|
||
<div class="cli" style="background: #44b6ae;">
|
||
<div class="clip">2020年山东神重点项目<span class="big">15</span>个</div>
|
||
<div class="clip">已开工：<span class="big" style="margin-right: 10px;">14</span>未开工：<span class="big">14</span></div>
|
||
<div class="clip">总投资：<span class="big">394亿元</span></div>
|
||
<div class="clip">计划投资<span class="big">394亿元</span></div>
|
||
<div class="clip">投资完成<span class="big">394亿元</span></div>
|
||
</div>
|
||
<div class="cli" style="background: #8775a7;">
|
||
<div class="clip">2020年山东神重点项目<span class="big">15</span>个</div>
|
||
<div class="clip">已开工：<span class="big" style="margin-right: 10px;">14</span>未开工：<span class="big">14</span></div>
|
||
<div class="clip">总投资：<span class="big">394亿元</span></div>
|
||
<div class="clip">计划投资：<span class="big">394亿元</span></div>
|
||
<div class="clip">投资完成：<span class="big">394亿元</span></div>
|
||
</div>
|
||
</div> -->
|
||
<!-- <div class="content2">
|
||
<div class="cleft">
|
||
<div class="layui-tab">
|
||
<ul class="layui-tab-title">
|
||
<li class="layui-this">重点项目</li>
|
||
<li>产业分类</li>
|
||
<li>困难问题</li>
|
||
</ul>
|
||
<div class="layui-tab-content" >
|
||
<div class="layui-tab-item layui-show">
|
||
<div class="layui-form">
|
||
<table class="layui-table">
|
||
<thead>
|
||
<tr>
|
||
<th>县市区</th>
|
||
<th>项目个数</th>
|
||
<th>总投资（万元）</th>
|
||
<th>2020年计划投资（万元）</th>
|
||
<th>2020年完成投资（万元）</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td>虞城县</td>
|
||
<td>10</td>
|
||
<td>19890</td>
|
||
<td>20000</td>
|
||
<td>10000</td>
|
||
</tr>
|
||
<tr>
|
||
<td>虞城县</td>
|
||
<td>10</td>
|
||
<td>19890</td>
|
||
<td>20000</td>
|
||
<td>10000</td>
|
||
</tr>
|
||
<tr>
|
||
<td>虞城县</td>
|
||
<td>10</td>
|
||
<td>19890</td>
|
||
<td>20000</td>
|
||
<td>10000</td>
|
||
</tr>
|
||
<tr>
|
||
<td>虞城县</td>
|
||
<td>10</td>
|
||
<td>19890</td>
|
||
<td>20000</td>
|
||
<td>10000</td>
|
||
</tr>
|
||
<tr>
|
||
<td>虞城县</td>
|
||
<td>10</td>
|
||
<td>19890</td>
|
||
<td>20000</td>
|
||
<td>10000</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
<div class="layui-tab-item">内容2</div>
|
||
<div class="layui-tab-item">内容3</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="jk">
|
||
<div class="jktitle">项目监控</div>
|
||
<div class="jkcon">
|
||
<div class="jkleft">
|
||
<table class="layui-table table">
|
||
<tbody>
|
||
<tr><td>虞城县</td></tr>
|
||
<tr style="background: #e9f3ff;"><td>虞城县</td></tr>
|
||
<tr><td>虞城县</td></tr>
|
||
<tr style="background: #e9f3ff;"><td>虞城县</td></tr>
|
||
<tr><td>虞城县</td></tr>
|
||
<tr style="background: #e9f3ff;"><td>虞城县</td></tr>
|
||
<tr><td>虞城县</td></tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
<div class="jkright">
|
||
<div class="layui-carousel" id="test1" lay-filter="test1">
|
||
<div carousel-item="">
|
||
<div><img src="img/d1.jpg" ></div>
|
||
<div><img src="img/d2.jpg" ></div>
|
||
<div><img src="img/d3.jpg" ></div>
|
||
<div><img src="img/d4.jpg" ></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
<div class="cright">
|
||
<div class="jktitle">项目监控</div>
|
||
<div id="allmap"></div>
|
||
</div>
|
||
</div> -->
|
||
</div>
|
||
</div>
|
||
<style type="text/css">
|
||
* {
|
||
margin: 0;
|
||
padding: 0;
|
||
font-size: 12px;
|
||
}
|
||
|
||
html,
|
||
body {
|
||
width: 100%;
|
||
height: 100%;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.all {
|
||
width: 100%;
|
||
height: 100%;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.left {
|
||
flex-basis: 100px;
|
||
background: #282e3c;
|
||
height: 100%;
|
||
padding-top: 10px;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.li {
|
||
text-align: center;
|
||
color: #ffffff;
|
||
padding: 10px 0;
|
||
box-sizing: border-box;
|
||
position: relative;
|
||
}
|
||
.li::before{
|
||
content: '';
|
||
position: absolute;
|
||
border-right: #e1e1e1 solid 6px;
|
||
border-image:linear-gradient(to right, #45ded6, #1099d1) 1 10;
|
||
top: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
right: -5px;
|
||
opacity: 0;
|
||
-webkit-transition-duration: .3s;
|
||
transition-duration: .3s;
|
||
-webkit-transition-property: top,right,bottom,left,opacity;
|
||
transition-property: top,right,bottom,left,opacity;
|
||
}
|
||
.li:hover::before{
|
||
right: 0px;
|
||
opacity: 1;
|
||
}
|
||
.active_li::before{
|
||
right: 0px!important;
|
||
opacity: 1!important;
|
||
}
|
||
.liimg {}
|
||
|
||
.liimg img {
|
||
width: 45px;
|
||
}
|
||
|
||
.lititle {
|
||
margin-top: 10px;
|
||
}
|
||
|
||
.right {
|
||
background: #f2f2f2;
|
||
}
|
||
|
||
.rtop {
|
||
background: #2080d1;
|
||
width: 100%;
|
||
height: 80px;
|
||
}
|
||
|
||
.rtop img {
|
||
height: 80px;
|
||
}
|
||
|
||
.content {
|
||
display: flex;
|
||
padding: 20px;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.cli {
|
||
padding: 20px;
|
||
width: 24%;
|
||
box-sizing: border-box;
|
||
color: #ffffff;
|
||
font-size: 14px;
|
||
border-radius: 5px;
|
||
}
|
||
|
||
.clip {
|
||
line-height: 30px;
|
||
}
|
||
|
||
.big {
|
||
font-size: 18px;
|
||
}
|
||
|
||
.content2 {
|
||
display: flex;
|
||
margin: 0 20px;
|
||
box-sizing: border-box;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.cleft {
|
||
flex: 2;
|
||
}
|
||
|
||
.cright {
|
||
flex: 1;
|
||
margin: 10px;
|
||
padding: 10px;
|
||
background: #ffffff;
|
||
}
|
||
|
||
#allmap {
|
||
height: 520px;
|
||
}
|
||
|
||
.layui-tab {
|
||
background: #ffffff;
|
||
padding: 0 20px;
|
||
box-sizing: border-box;
|
||
padding-bottom: 10px;
|
||
}
|
||
|
||
.layui-tab-title {
|
||
border: 0;
|
||
}
|
||
|
||
.layui-tab-title li {
|
||
border-bottom: 2px #ffffff solid;
|
||
}
|
||
|
||
.layui-tab-title .layui-this:after {
|
||
border: 0;
|
||
}
|
||
|
||
.layui-this {
|
||
border-bottom: 2px #346ac1 solid !important;
|
||
}
|
||
|
||
.layui-tab-content {
|
||
padding: 10px 0;
|
||
height: 150px;
|
||
overflow: auto;
|
||
}
|
||
|
||
.jk {
|
||
background: #ffffff;
|
||
margin-top: 20px;
|
||
}
|
||
|
||
.jktitle {
|
||
line-height: 42px;
|
||
border-bottom: 1px #eaeaea solid;
|
||
padding-left: 20px;
|
||
}
|
||
|
||
.table {
|
||
text-align: center;
|
||
margin-left: 10px;
|
||
box-sizing: border-box;
|
||
width: 90%;
|
||
}
|
||
|
||
.table td {
|
||
border: 1px #5685bc solid;
|
||
}
|
||
|
||
.jkcon {
|
||
display: flex;
|
||
}
|
||
|
||
.jkleft {
|
||
flex: 1;
|
||
}
|
||
|
||
.jkright {
|
||
flex: 2;
|
||
}
|
||
|
||
.layui-carousel {
|
||
padding: 10px;
|
||
width: 100% !important;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.layui-carousel img {
|
||
width: 100%;
|
||
}
|
||
|
||
.iframe {
|
||
overflow: hidden;
|
||
box-sizing: border-box;
|
||
padding: 40px 20px 20px 20px;
|
||
border: 0;
|
||
}
|
||
|
||
iframe {
|
||
border: 0;
|
||
}
|
||
</style>
|
||
<script type="text/javascript">
|
||
$(window).resize(function() {
|
||
var w = $(window).width()
|
||
var w2 = w - 100
|
||
$('.right').width(w2)
|
||
|
||
var h = $(window).height()
|
||
$('.iframe').height(h - 90)
|
||
})
|
||
var w = $(window).width()
|
||
var w2 = w - 100
|
||
$('.right').width(w2)
|
||
|
||
var h = $(window).height()
|
||
$('.iframe').height(h - 90)
|
||
var NavList = "";
|
||
$('.li').on('click', function() {
|
||
//console.log($(this).find(".lititle")[0].innerText)
|
||
;NavList = "德州市职业健康管理中心 / " + $(this).find(".lititle")[0].innerText
|
||
;$("#nav_top_id")[0].innerText = NavList
|
||
//;console.log(NavList,$("#nav_top_id"))
|
||
var src = $(this).data('src')
|
||
//$(this).addClass("active_li");
|
||
$(this).addClass("active_li").siblings().removeClass("active_li");
|
||
$('iframe').attr('src', src)
|
||
})
|
||
layui.use('element', function() {
|
||
var $ = layui.jquery,
|
||
element = layui.element
|
||
})
|
||
|
||
layui.use(['carousel', 'form'], function() {
|
||
var carousel = layui.carousel,
|
||
form = layui.form
|
||
|
||
//常规轮播
|
||
carousel.render({
|
||
elem: '#test1',
|
||
arrow: 'always'
|
||
})
|
||
})
|
||
|
||
// 百度地图API功能
|
||
var map = new BMap.Map('allmap') // 创建Map实例
|
||
map.centerAndZoom(new BMap.Point(116.404, 39.915), 11) // 初始化地图,设置中心点坐标和地图级别
|
||
//添加地图类型控件
|
||
map.addControl(
|
||
new BMap.MapTypeControl({
|
||
mapTypes: [BMAP_NORMAL_MAP, BMAP_HYBRID_MAP]
|
||
})
|
||
)
|
||
map.setCurrentCity('北京') // 设置地图显示的城市 此项是必须设置的
|
||
map.enableScrollWheelZoom(true) //开启鼠标滚轮缩放
|
||
|
||
|
||
/**
|
||
*
|
||
* 自己写的样式
|
||
*
|
||
*
|
||
* */
|
||
</script>
|
||
</body>
|
||
|
||
</html>
|