2019 lines
82 KiB
Plaintext
2019 lines
82 KiB
Plaintext
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="main.aspx.cs" Inherits="FineUIPro.Web.common.main" %>
|
||
|
||
<!DOCTYPE html>
|
||
<html>
|
||
<head id="Head1" runat="server">
|
||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||
<title>首页</title>
|
||
<link href="../res/index/css/reset.css" rel="stylesheet" />
|
||
<link href="../res/index/css/home.css" rel="stylesheet" />
|
||
<link href="../res/index/css/swiper-3.4.2.min.css" rel="stylesheet" />
|
||
<style type="text/css">
|
||
.row2 .item {
|
||
height: 100%;
|
||
}
|
||
|
||
.bw-item-content {
|
||
padding: 0;
|
||
}
|
||
|
||
.bw-item {
|
||
height: auto;
|
||
margin: 0 0 10px 0;
|
||
}
|
||
|
||
.bw-item:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.wrap {
|
||
padding: 10px 0;
|
||
height: 100%;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.bottom-wrap {
|
||
height: 100%;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.bw-b-bottom-up {
|
||
height: 100%;
|
||
}
|
||
|
||
.bw-b-bottom {
|
||
height: 120px;
|
||
}
|
||
|
||
.bw-b, .bw-b-bottom {
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.mb {
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.mr {
|
||
margin-right: 10px;
|
||
}
|
||
|
||
.mbnone {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.swiperHeightWrap {
|
||
height: 170px;
|
||
}
|
||
|
||
.swiperHeight {
|
||
height: 90px;
|
||
}
|
||
|
||
.content-wrap {
|
||
padding: 0 20px 20px;
|
||
}
|
||
|
||
@media screen and (max-height: 625px) {
|
||
.swiperHeightWrap {
|
||
height: 170px;
|
||
}
|
||
|
||
.swiperHeight {
|
||
height: 90px;
|
||
}
|
||
|
||
.content-wrap {
|
||
padding: 0 10px 10px;
|
||
}
|
||
}
|
||
|
||
@media screen and (min-height: 625px) {
|
||
.swiperHeightWrap {
|
||
height: 300px;
|
||
}
|
||
|
||
.swiperHeight {
|
||
height: 200px;
|
||
}
|
||
}
|
||
|
||
.link {
|
||
color: #fff;
|
||
}
|
||
|
||
.map-desc {
|
||
position: absolute;
|
||
right: 10px;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
}
|
||
|
||
.map-desc .desc {
|
||
color: #00a2e9;
|
||
/*text-shadow: 0 0 10px #7a7cd0,0 0 20px #7a7cd0,0 0 30px #7a7cd0,0 0 40px #7a7cd0;*/ /*设置发光效果*/
|
||
text-shadow: 0 0 10px #00a2e9;
|
||
}
|
||
|
||
.map-desc .desc .d-item {
|
||
/*border-top: 1px solid #00a2e9;
|
||
border-bottom: 1px solid #00a2e9;*/
|
||
padding: 3px 10px;
|
||
/*background-color: rgba(1, 30, 50 ,0.3);*/
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
margin-bottom: 5px;
|
||
position: relative;
|
||
}
|
||
|
||
.map-desc .desc .d-item:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.map-desc .desc .d-item:before, .map-desc .desc .d-item:after {
|
||
content: '';
|
||
display: inline-block;
|
||
width: 12px;
|
||
height: 12px;
|
||
position: absolute;
|
||
}
|
||
|
||
.map-desc .desc .d-item:before {
|
||
width: 100%;
|
||
top: 0;
|
||
left: 0;
|
||
border-top: 1px solid #00a2e9;
|
||
border-left: 1px solid #00a2e9;
|
||
}
|
||
|
||
.map-desc .desc .d-item:after {
|
||
width: 100%;
|
||
bottom: 0;
|
||
right: 0;
|
||
border-bottom: 1px solid #00a2e9;
|
||
border-right: 1px solid #00a2e9;
|
||
}
|
||
|
||
.map-desc .desc .d-item-1 {
|
||
/*background-color: rgba(0,53,97 ,0.3) !important;*/
|
||
}
|
||
|
||
.map-desc .desc .d-item .tit {
|
||
font-size: 10px;
|
||
}
|
||
|
||
.map-desc .desc .d-item .num {
|
||
font-size: 18px;
|
||
}
|
||
|
||
.project-wrap {
|
||
position: absolute;
|
||
left: 50%;
|
||
top: 0px;
|
||
transform: translateX(-50%);
|
||
color: #fff;
|
||
}
|
||
|
||
.project-wrap .project {
|
||
border: none;
|
||
position: relative;
|
||
/*min-width: 100px;*/
|
||
}
|
||
|
||
.project-wrap .project-tit {
|
||
padding: 5px 10px;
|
||
color: #00a2e9;
|
||
font-size: 12px;
|
||
border: none;
|
||
background-color: transparent;
|
||
position: relative;
|
||
/*min-width: 100px;*/
|
||
}
|
||
|
||
.project-tit-wrap {
|
||
position: relative;
|
||
}
|
||
|
||
.project-list {
|
||
display: none;
|
||
background-color: rgba(1,82,138, 0.8);
|
||
color: #fff;
|
||
font-size: 12px;
|
||
color: #00a2e9;
|
||
}
|
||
|
||
.project-list > div {
|
||
padding: 5px 10px;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.project-list > div:hover {
|
||
background-color: #242b57;
|
||
color: #00a2e9;
|
||
}
|
||
|
||
.tab-content .line-item {
|
||
/*background-color: #0B5EA5;*/
|
||
border-radius: 10px;
|
||
height: 10px !important;
|
||
}
|
||
|
||
.tab-content .line-item > div {
|
||
background-color: #01e282;
|
||
}
|
||
|
||
.Accumulation-next .tab-h .txt, .Accumulation-next .tab-i .txt {
|
||
width: 45px;
|
||
}
|
||
|
||
.tab-content .txt {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
@media screen and (min-height:780px) {
|
||
.tab-content .line-item {
|
||
border-radius: 25px;
|
||
height: 28px;
|
||
}
|
||
|
||
.tab-content .line-item > div {
|
||
border-radius: 25px;
|
||
}
|
||
}
|
||
|
||
.itemflex {
|
||
padding-bottom: 10px;
|
||
}
|
||
|
||
.itemflex2 {
|
||
padding-top: 10px;
|
||
}
|
||
|
||
.bw-b-bottom {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
.content-ul .c-item .tit {
|
||
display: block;
|
||
position: relative;
|
||
padding-left: 2em;
|
||
}
|
||
|
||
|
||
.content-ul .c-item .tit::before {
|
||
content: '';
|
||
position: absolute;
|
||
border-color: #57B8BD;
|
||
border-style: solid;
|
||
border-width: 0.25em;
|
||
height: 0;
|
||
top: 0;
|
||
left: 0.6em;
|
||
margin-top: 0.5em;
|
||
width: 0;
|
||
border-radius: 50%;
|
||
}
|
||
|
||
.content-ul .c-item .tit-read::before {
|
||
content: '';
|
||
position: absolute;
|
||
border-color: #ffffff;
|
||
border-style: solid;
|
||
border-width: 0.25em;
|
||
height: 0;
|
||
top: 0;
|
||
left: 0.6em;
|
||
margin-top: 0.25em;
|
||
width: 0;
|
||
border-radius: 50%
|
||
}
|
||
|
||
.content-ul .c-item .tit .tit-t {
|
||
flex: 1;
|
||
min-width: 0;
|
||
overflow: hidden;
|
||
white-space: nowrap;
|
||
text-overflow: ellipsis;
|
||
word-break: keep-all;
|
||
}
|
||
|
||
.content-ul .c-item.disabled .tit::before {
|
||
display: none !important;
|
||
}
|
||
|
||
.content-ul .c-item .tit .tit-v {
|
||
margin-left: 12px;
|
||
width: 80px;
|
||
}
|
||
|
||
.tab-content .tab-i {
|
||
margin-top: 0px;
|
||
}
|
||
|
||
.project-list-wrap {
|
||
position: absolute;
|
||
left: 50%;
|
||
top: 50%;
|
||
transform: translate(-50%, -50%);
|
||
background-color: #21269a;
|
||
padding: 15px;
|
||
color: #fff;
|
||
border-radius: 8px;
|
||
width: 1024px;
|
||
min-height: 500px;
|
||
z-index: 9999;
|
||
}
|
||
|
||
.d-item-js {
|
||
cursor: pointer;
|
||
}
|
||
|
||
.project-list-wrap .pl {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
margin-bottom: 15px;
|
||
}
|
||
|
||
.project-list-wrap .pl > div {
|
||
margin-right: 5px;
|
||
margin-bottom: 5px;
|
||
padding: 5px 10px;
|
||
border: 1px solid #fff;
|
||
border-radius: 4px;
|
||
}
|
||
|
||
.projectList_btn {
|
||
position: fixed;
|
||
bottom: 0;
|
||
left: 0;
|
||
text-align: right;
|
||
width: 100%;
|
||
padding: 10px;
|
||
}
|
||
|
||
.projectList_btn .pl_btn {
|
||
color: #ccc;
|
||
cursor: pointer;
|
||
width: 32px;
|
||
float: right;
|
||
}
|
||
|
||
#map {
|
||
border-radius: 15px;
|
||
transform: translate3d(0,0,0);
|
||
}
|
||
|
||
.BMap_bubble_pop {
|
||
color: white;
|
||
background-color: #000099 !important;
|
||
color: white !important;
|
||
}
|
||
|
||
.BMap_bubble_pop td {
|
||
color: white !important;
|
||
}
|
||
|
||
.BMap_bubble_title {
|
||
color: white !important;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
width: 180px !important;
|
||
}
|
||
.more {
|
||
cursor: pointer;
|
||
text-align: right;
|
||
padding: 10px;
|
||
font-size: 10px;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="wrap">
|
||
<div class="bottom-wrap flex">
|
||
<!--左侧-->
|
||
<div class="bw-s flex1 flex flexV">
|
||
<div class="bg-item flex1" style="z-index: 9999;">
|
||
<div class="bw-item-content flex flexV">
|
||
<div class="tit-new">人员分布</div>
|
||
<div id='left_one' style="width: 100%; height: 100%;"></div>
|
||
<div class="more js-more-1">更多</div>
|
||
</div>
|
||
|
||
</div>
|
||
<div class="bg-item flex1">
|
||
<div class="bw-item-content flex flexV">
|
||
<div class="tit-new">事故统计</div>
|
||
<div id='left_two' style="width: 100%; height: 100%;"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!--中间 -->
|
||
<div class="bw-b flex2 flexV flex">
|
||
<div class="flex1 ">
|
||
<div class="bw-b-bottom-up" style="margin-bottom: 0;">
|
||
<div id='map' style="width: 100%; height: 100%;"></div>
|
||
<div class="map-desc">
|
||
<div class="desc">
|
||
<div class="d-item d-item-js">
|
||
<div class="tit">工地总数</div>
|
||
<div class="num" runat="server" id="numProjetcA">31</div>
|
||
</div>
|
||
<div class="d-item d-item-1 d-item-js">
|
||
<div class="tit">在建</div>
|
||
<div class="num" runat="server" id="numProjetc1">18</div>
|
||
</div>
|
||
<div class="d-item d-item-1 d-item-js">
|
||
<div class="tit">停工</div>
|
||
<div class="num" runat="server" id="numProjetc2">12</div>
|
||
</div>
|
||
<div class="d-item d-item-js">
|
||
<div class="tit">竣工</div>
|
||
<div class="num" runat="server" id="numProjetc3">1</div>
|
||
</div>
|
||
<div class="d-item">
|
||
<div class="tit">单位：(个)</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
<!--右侧-->
|
||
<div class="bw-s flex1 flexV flex" style="" id="swiper-pre">
|
||
<div class="bg-item flex2">
|
||
<div class="bw-item-content flex flexV">
|
||
<div class="tit-new">进度统计</div>
|
||
<div class="" style="padding: 0 10px 0; overflow: hidden;">
|
||
<div id="divJD" runat="server" class="tab-content">
|
||
<div class="flex tab-h">
|
||
<div class="txt"> 项目</div>
|
||
<div class="flex1" style="text-align: center">进度条</div>
|
||
<div class="txt">进度百分比</div>
|
||
</div>
|
||
<div id="divJD_wrap" class="swiper-container">
|
||
<div class="flex tab-i">
|
||
<div class="txt" style="color: #00a2e9">五环天地</div>
|
||
<div class="flex1 flex line-wrap">
|
||
<div class="line-item">
|
||
<div class="normal" style="width: 80%"></div>
|
||
</div>
|
||
</div>
|
||
<div class="txt" style="color: #00a2e9">80%</div>
|
||
</div>
|
||
<div class="flex tab-i">
|
||
<div class="txt" style="color: #00a2e9">研究院</div>
|
||
<div class="flex1 flex line-wrap">
|
||
<div class="line-item">
|
||
<div class="normal" style="width: 30%"></div>
|
||
</div>
|
||
</div>
|
||
<div class="txt" style="color: #00a2e9">30%</div>
|
||
</div>
|
||
<div class="flex tab-i">
|
||
<div class="txt" style="color: #00a2e9">滨州临港</div>
|
||
<div class="flex1 flex line-wrap">
|
||
<div class="line-item">
|
||
<div class="normal" style="width: 0%"></div>
|
||
</div>
|
||
</div>
|
||
<div class="txt" style="color: #00a2e9">0%</div>
|
||
</div>
|
||
<div class="flex tab-i">
|
||
<div class="txt" style="color: #00a2e9">嘉盛</div>
|
||
<div class="flex1 flex line-wrap">
|
||
<div class="line-item">
|
||
<div class="normal" style="width: 10%"></div>
|
||
</div>
|
||
</div>
|
||
<div class="txt" style="color: #00a2e9">10%</div>
|
||
</div>
|
||
<div class="flex tab-i">
|
||
<div class="txt" style="color: #00a2e9">东华能源</div>
|
||
<div class="flex1 flex line-wrap">
|
||
<div class="line-item">
|
||
<div class="normal" style="width: 60%"></div>
|
||
</div>
|
||
</div>
|
||
<div class="txt" style="color: #00a2e9">60%</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="bg-item flex1">
|
||
<div class="bw-item-content flex flexV">
|
||
<div class="tit-new">关键事项<form runat="server"><asp:HiddenField runat="server" ID="hdNoticeId" /><asp:Button ID="imgBtn" runat="server" OnClick="imgBtn_Click" style="display:none;"/></form></div>
|
||
<div class="" style="padding: 0 10px 0; overflow: hidden;">
|
||
<div class="swiper-container " id='swiper2' runat="server">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="project-list-wrap" style="display: none;">
|
||
<div class="pl" id="projectList">
|
||
</div>
|
||
<div class="projectList_btn">
|
||
<div class="pl_btn" id="projectList_btn">关闭</div>
|
||
</div>
|
||
</div>
|
||
</body>
|
||
<script type="text/javascript" src="../res/index/js/jquery-3.4.1.min.js"></script>
|
||
<script type="text/javascript" src="../res/index/js/swiper-3.4.2.jquery.min.js"></script>
|
||
<script type="text/javascript" src="../res/index/js/echarts.min.js"></script>
|
||
<script type="text/javascript" src="../res/index/js/china.js"></script>
|
||
<script type="text/javascript" src="../res/index/js/world.js"></script>
|
||
<script type="text/javascript">
|
||
function category(id, xArr, series) {
|
||
// 基于准备好的dom，初始化echarts实例
|
||
var myChart = echarts.init(document.getElementById(id))
|
||
// 指定图表的配置项和数据
|
||
var option = {
|
||
title: {
|
||
// left:'center',
|
||
text: '',
|
||
textStyle: {
|
||
color: '#fff',
|
||
fontWeight: 'normal',
|
||
fontSize: 16
|
||
},
|
||
show: false
|
||
},
|
||
tooltip: {},
|
||
legend: {
|
||
left: '3%',
|
||
show: false,
|
||
selectedMode: false,
|
||
textStyle: {//图例文字的样式
|
||
color: '#ffffff'
|
||
}
|
||
},
|
||
xAxis: {
|
||
axisTick: {
|
||
show: false
|
||
},
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: 'rgba(255, 255, 255, 0.3)'
|
||
}
|
||
},
|
||
axisLabel: {
|
||
show: true,
|
||
interval: 0,
|
||
rotate: 50,
|
||
textStyle: {
|
||
fontSize: 8,
|
||
color: 'rgba(255, 255, 255, 0.8)'
|
||
},
|
||
},
|
||
type: 'category',
|
||
data: xArr
|
||
},
|
||
yAxis: {
|
||
axisTick: {
|
||
show: false
|
||
},
|
||
axisLine: {
|
||
show: false,
|
||
lineStyle: {
|
||
color: 'rgba(255, 255, 255, 0.3)'
|
||
}
|
||
},
|
||
axisLabel: {
|
||
show: true,
|
||
textStyle: {
|
||
color: 'rgba(255, 255, 255, 0.8)'
|
||
}
|
||
},
|
||
//设置网格线颜色
|
||
splitLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
color: ['#182067'],
|
||
width: 1,
|
||
type: 'solid'
|
||
}
|
||
}
|
||
},
|
||
series: series,
|
||
grid: {
|
||
top: '12%',
|
||
left: '10',
|
||
right: '10',
|
||
bottom: '10',
|
||
containLabel: true,
|
||
backgroundColor: 'rgba(0,162,233, 0.01)',
|
||
// borderColor: 'rgba(0,162,233, 1)'
|
||
},
|
||
backgroundColor: 'rgba(0,162,233, 0.01)',
|
||
textStyle: {
|
||
color: 'rgba(255, 255, 255, 0.3)'
|
||
}
|
||
}
|
||
|
||
// 使用刚指定的配置项和数据显示图表。
|
||
myChart.setOption(option)
|
||
}
|
||
var two = { "title": "质量一次验收合格率", "xFontNum": 0, "legend": null, "categories": ["五环天地", "研究院", "滨州临港", "嘉盛", "东华能源", "AP骏化", "广汇启东", "广州番禺", "金新锅炉", "兴力电子", "济民可信", "哈密广汇", "俄罗斯", "印度", "宜都兴发", "图克二期", "云华安", "马苏化肥"], "series": [{ "name": null, "type": null, "data": [0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0], "dataString": null, "dataObject": null }], "series2": null };
|
||
var three = { "title": "焊接一次合格率统计", "xFontNum": 0, "legend": null, "categories": ["五环天地", "研究院", "滨州临港", "嘉盛", "东华能源", "AP骏化", "广汇启东", "广州番禺", "金新锅炉", "兴力电子", "济民可信", "哈密广汇", "俄罗斯", "印度", "宜都兴发", "图克二期", "云华安", "马苏化肥"], "series": [{ "name": null, "type": null, "data": [0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0], "dataString": null, "dataObject": null }], "series2": null };
|
||
var xArr2 = two.categories
|
||
var xArr2 = two.categories
|
||
var xArr = three.categories
|
||
var data = [12, 5, 28, 43, 22]
|
||
var data1 = [21, 9, 12, 15, 8]
|
||
var series = [{
|
||
name: '质量一次验收合格率',
|
||
type: 'bar',
|
||
barWidth: 20,
|
||
//barGap:10,
|
||
data: two.series[0].data,
|
||
itemStyle: { normal: { color: '#abd373' } }
|
||
}];
|
||
var series1 = [
|
||
{
|
||
name: '焊接一次合格率',
|
||
type: 'bar',
|
||
barWidth: 20,
|
||
data: three.series[0].data,
|
||
itemStyle: { normal: { color: '#eb945e' } }
|
||
}];
|
||
//category('two', xArr2, series)
|
||
//category('three', xArr, series1)
|
||
</script>
|
||
<script type="text/javascript">
|
||
var myChart = null
|
||
function category_Five(id, xArr, data) {
|
||
// 基于准备好的dom，初始化echarts实例
|
||
myChart = echarts.init(document.getElementById(id))
|
||
// 指定图表的配置项和数据
|
||
var option = {
|
||
title: {
|
||
left: 'center',
|
||
text: '',
|
||
textStyle: {
|
||
color: '#fff',
|
||
fontSize: 14,
|
||
fontWeight: '300'
|
||
},
|
||
show: false
|
||
},
|
||
tooltip: {},
|
||
legend: {
|
||
show: false
|
||
},
|
||
xAxis: {
|
||
axisTick: {
|
||
show: false
|
||
},
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: 'rgba(255, 255, 255, 0.3)'
|
||
}
|
||
},
|
||
axisLabel: {
|
||
show: true,
|
||
interval: 0,
|
||
rotate: 50,
|
||
textStyle: {
|
||
fontSize: 8,
|
||
color: 'rgba(255, 255, 255, 0.3)'
|
||
}
|
||
},
|
||
type: 'category',
|
||
data: xArr,
|
||
|
||
},
|
||
yAxis: {
|
||
axisTick: {
|
||
show: false
|
||
},
|
||
axisLine: {
|
||
show: false,
|
||
lineStyle: {
|
||
color: 'rgba(255, 255, 255, 0.1)'
|
||
}
|
||
},
|
||
axisLabel: {
|
||
show: true,
|
||
textStyle: {
|
||
color: 'rgba(255, 255, 255, 0.3)'
|
||
}
|
||
},
|
||
//设置网格线颜色
|
||
splitLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
color: ['#182067'],
|
||
width: 1,
|
||
type: 'solid'
|
||
}
|
||
}
|
||
},
|
||
series: data,
|
||
grid: {
|
||
top: '15%',
|
||
left: '10',
|
||
right: '10',
|
||
bottom: '10',
|
||
containLabel: true,
|
||
backgroundColor: 'rgba(0,162,233, 0.01)',
|
||
// borderColor: 'rgba(0,162,233, 1)'
|
||
},
|
||
itemStyle: {
|
||
color: 'rgba(200,201,10, 1)'
|
||
},
|
||
backgroundColor: 'rgba(0,162,233, 0.01)',
|
||
textStyle: {
|
||
color: 'rgba(255, 255, 255, 0.3)'
|
||
}
|
||
}
|
||
|
||
// 使用刚指定的配置项和数据显示图表。
|
||
myChart.setOption(option)
|
||
}
|
||
var accident =<%=Accident %>
|
||
var five = {
|
||
"title": "事故统计", "xFontNum": 0, "legend": null,
|
||
"categories": accident.categories,
|
||
"series": [{
|
||
"name": null, "type": null,
|
||
//"data": [2.0, 4.0, 6.0, 8.0, 9.0, 11.0, 13.0, 15.0, 17.0, 19.0],
|
||
"data": accident.series[0].data,
|
||
"dataString": null, "dataObject": null
|
||
}, {
|
||
"name": null, "type": null,
|
||
//"data": [18.0, 19.0, 19.0, 19.0, 19.0, 19.0, 19.0, 20.0, 20.0, 20.0],
|
||
"data": accident.series[0].data2,
|
||
"dataString": null, "dataObject": null
|
||
}, {
|
||
"name": null, "type": null,
|
||
//"data": [18.0, 19.0, 19.0, 19.0, 19.0, 19.0, 19.0, 20.0, 20.0, 20.0],
|
||
"data": accident.series[0].data3,
|
||
"dataString": null, "dataObject": null
|
||
}], "series2": null
|
||
};
|
||
var xArr = five.categories
|
||
var data = [{
|
||
name: '质量事故',
|
||
type: 'bar',
|
||
barWidth: 10,
|
||
stack: '总量',
|
||
data: five.series[0].data,
|
||
itemStyle: { normal: { color: '#0c81fe' } }
|
||
},
|
||
{
|
||
name: '未遂事故',
|
||
type: 'bar',
|
||
stack: '总量',
|
||
data: five.series[1].data,
|
||
itemStyle: { normal: { color: '#9905f4' } }
|
||
},
|
||
{
|
||
name: '伤亡事故',
|
||
type: 'bar',
|
||
stack: '总量',
|
||
data: five.series[2].data,
|
||
itemStyle: { normal: { color: '#8E63DD' } }
|
||
}]
|
||
category_Five('left_two', xArr, data)
|
||
var person =<%=Person %>
|
||
myChart.on('click', function (param) { //添加点击事件
|
||
console.log(param);
|
||
for (var i = 0; i < person.dataStr.length; i++) {
|
||
if (param.name == person.dataStr[0].name) {
|
||
$("#projectList").html(person.dataStr[0].str)
|
||
$(".project-list-wrap").show();
|
||
}
|
||
}
|
||
//$("#projectList").html(project.name)
|
||
//$(".project-list-wrap").show();
|
||
});
|
||
</script>
|
||
<script>
|
||
//['#32A8FF', ' #02C800', '#3268FF', ' #022800']
|
||
var person =<%=Person %>
|
||
var pieData = person.p
|
||
var myChartPie = null;
|
||
function pie(id) {
|
||
myChartPie = echarts.init(document.getElementById(id));
|
||
optionPie = {
|
||
title: {
|
||
text: '人员分布',
|
||
textStyle: {
|
||
// fontSize:14,
|
||
// fontWeight:'normal',
|
||
color: '#fff'
|
||
}
|
||
, left: 0
|
||
, top: 0
|
||
, show: false
|
||
},
|
||
tooltip: {
|
||
trigger: 'item',
|
||
position: ['50%', '50%'],
|
||
formatter: function (e) {
|
||
//console.log(e)
|
||
var item = pieData[e.dataIndex]
|
||
var a = item.showList
|
||
var str = '<i style="display: inline-block;width: 10px;height: 10px;background: #32A8FF' +
|
||
//a[i].color +
|
||
';margin-right: 5px;border-radius: 50%;}"></i><span style="width:70px; display:inline-block;">' +
|
||
item.name +
|
||
'</span>'
|
||
for (var i = 0; i < a.length; i++) {
|
||
str += '<br>' + a[i].name + '：' + a[i].value
|
||
}
|
||
return '<div class="showBox">' + str + '</div>'
|
||
}
|
||
},
|
||
legend: {
|
||
show: false,
|
||
data: person.data,
|
||
//data: ['五环', '项目1', '项目2', '项目3'],
|
||
color: ['#32A8FF', ' #02C800', '#3268FF', ' #022800'],
|
||
orient: 'vertical',
|
||
x: 'right',
|
||
y: 'top',
|
||
textStyle: {
|
||
color: ['#32A8FF', ' #02C800', '#3268FF', ' #022800']
|
||
}
|
||
},
|
||
series: [
|
||
{
|
||
name: '人员分布情况',
|
||
label: {
|
||
show: true,
|
||
position: 'inside',
|
||
formatter: '{b}({c})'
|
||
},
|
||
type: 'pie',
|
||
radius: ['0', '90%'],
|
||
minAngle: 50,
|
||
zlevel: 2,
|
||
z: 4,
|
||
// avoidLabelOverlap:false,
|
||
//color: ['#32A8FF', ' #02C800'],
|
||
data: person.pData
|
||
}
|
||
]
|
||
};
|
||
//为echarts对象加载数据
|
||
myChartPie.setOption(optionPie);
|
||
}
|
||
pie('left_one')
|
||
var person =<%=Person %>
|
||
myChartPie.on('click', function (param) { //添加点击事件
|
||
console.log(param);
|
||
for (var i = 0; i < person.dataStr.length; i++) {
|
||
if (param.name == person.dataStr[i].name) {
|
||
$("#projectList").html(person.dataStr[i].str)
|
||
$(".project-list-wrap").show();
|
||
}
|
||
}
|
||
});
|
||
|
||
var personAll =<%=PersonAll %>
|
||
$(".js-more-1").click(function () {
|
||
for (var i = 0; i < personAll.dataStr.length; i++) {
|
||
$("#projectList").html(personAll.dataStr[i].str)
|
||
$(".project-list-wrap").show();
|
||
}
|
||
})
|
||
</script>
|
||
<script type="text/javascript" src="//api.map.baidu.com/api?type=webgl&v=3.0&ak=Lma56vCk88x46KEXSyc2cIXk6kT2W7KB"></script>
|
||
<script type="text/javascript">
|
||
function randomData() {
|
||
return Math.round(Math.random() * 1000);
|
||
}
|
||
var project =<%=Project %>
|
||
//var projectNum = { "name": null, "type": null, "data": [31.0, 0.0, 0.0, 0.0, 2.0, 0.0, 0.0, 0.0, 2.0, 0.0, 0.0, 0.0, 1.0, 1.0, 1.0, 5.0, 0.0, 2.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 1.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0], "dataString": null, "dataObject": null }
|
||
var projectMaxNum = 5
|
||
var myChart = null
|
||
var geoCoordMap = {
|
||
'上海': [121.48, 31.22],
|
||
'天津': [117.2, 39.13],
|
||
'北京': [116.46, 39.92],
|
||
'河北': [114.48, 38.03],
|
||
'黑龙江': [126.63, 45.75],
|
||
'河南': [113.65, 34.76],
|
||
'重庆': [106.54, 29.59],
|
||
'山西': [112.53, 37.87],
|
||
'辽宁': [123.38, 41.8],
|
||
'吉林': [125.35, 43.88],
|
||
'浙江': [120.19, 30.26],
|
||
'福建': [119.3, 26.08],
|
||
'山东': [118.54, 36.59],
|
||
'湖北': [114.31, 30.52],
|
||
'湖南': [113, 28.21],
|
||
'广东': [113.23, 23.16],
|
||
'海南': [110.35, 20.02],
|
||
'四川': [104.06, 30.67],
|
||
'贵州': [106.71, 26.57],
|
||
'云南': [102.73, 25.04],
|
||
'江西': [115.89, 28.68],
|
||
'陕西': [108.95, 34.27],
|
||
'青海': [101.74, 36.56],
|
||
'甘肃': [103.73, 36.03],
|
||
'广西': [106.54, 29.59],
|
||
'新疆': [87.68, 43.77],
|
||
'内蒙古': [111.65, 40.82],
|
||
'西藏': [91.11, 29.97],
|
||
'宁夏': [106.27, 38.47],
|
||
'台湾': [121.5, 25.14],
|
||
'香港': [114.1, 22.2],
|
||
'澳门': [113.33, 22.13],
|
||
'安徽': [117.27, 31.86],
|
||
'江苏': [118.78, 32.04],
|
||
};
|
||
|
||
var projectDesc = [{
|
||
name: "上海",
|
||
value: project.data[1],
|
||
JD: project.jd[1],
|
||
SG: project.sg[1],
|
||
Time: project.time[1],
|
||
HT: project.ht[1]
|
||
},
|
||
{
|
||
name: "河北",
|
||
value: project.data[2],
|
||
JD: project.jd[2],
|
||
SG: project.sg[2],
|
||
Time: project.time[2],
|
||
HT: project.ht[2]
|
||
},
|
||
{
|
||
name: "山西",
|
||
value: project.data[3],
|
||
JD: project.jd[3],
|
||
SG: project.sg[3],
|
||
Time: project.time[3],
|
||
HT: project.ht[3]
|
||
},
|
||
{
|
||
name: "内蒙古",
|
||
value: project.data[4],
|
||
JD: project.jd[4],
|
||
SG: project.sg[4],
|
||
Time: project.time[4],
|
||
HT: project.ht[4]
|
||
},
|
||
{
|
||
name: "辽宁",
|
||
value: project.data[5],
|
||
JD: project.jd[5],
|
||
SG: project.sg[5],
|
||
Time: project.time[5],
|
||
HT: project.ht[5]
|
||
},
|
||
{
|
||
name: "吉林",
|
||
value: project.data[6],
|
||
JD: project.jd[6],
|
||
SG: project.sg[6],
|
||
Time: project.time[6],
|
||
HT: project.ht[6]
|
||
},
|
||
{
|
||
name: "黑龙江",
|
||
value: project.data[7],
|
||
JD: project.jd[7],
|
||
SG: project.sg[7],
|
||
Time: project.time[7],
|
||
HT: project.ht[7]
|
||
},
|
||
{
|
||
name: "江苏",
|
||
value: project.data[8],
|
||
JD: project.jd[8],
|
||
SG: project.sg[8],
|
||
Time: project.time[8],
|
||
HT: project.ht[8]
|
||
},
|
||
{
|
||
name: "浙江",
|
||
value: project.data[9],
|
||
JD: project.jd[9],
|
||
SG: project.sg[9],
|
||
Time: project.time[9],
|
||
HT: project.ht[9]
|
||
},
|
||
{
|
||
name: "安徽",
|
||
value: project.data[10],
|
||
JD: project.jd[10],
|
||
SG: project.sg[10],
|
||
Time: project.time[10],
|
||
HT: project.ht[10]
|
||
},
|
||
{
|
||
name: "福建",
|
||
value: project.data[11],
|
||
JD: project.jd[11],
|
||
SG: project.sg[11],
|
||
Time: project.time[11],
|
||
HT: project.ht[11]
|
||
},
|
||
{
|
||
name: "江西",
|
||
value: project.data[12],
|
||
JD: project.jd[12],
|
||
SG: project.sg[12],
|
||
Time: project.time[12],
|
||
HT: project.ht[12]
|
||
},
|
||
{
|
||
name: "山东",
|
||
value: project.data[13],
|
||
JD: project.jd[13],
|
||
SG: project.sg[13],
|
||
Time: project.time[13],
|
||
HT: project.ht[13]
|
||
},
|
||
{
|
||
name: "河南",
|
||
value: project.data[14],
|
||
JD: project.jd[14],
|
||
SG: project.sg[14],
|
||
Time: project.time[14],
|
||
HT: project.ht[14]
|
||
},
|
||
{
|
||
name: "湖北",
|
||
value: project.data[15],
|
||
JD: project.jd[15],
|
||
SG: project.sg[15],
|
||
Time: project.time[15],
|
||
HT: project.ht[15]
|
||
},
|
||
{
|
||
name: "湖南",
|
||
value: project.data[16],
|
||
JD: project.jd[16],
|
||
SG: project.sg[16],
|
||
Time: project.time[16],
|
||
HT: project.ht[16]
|
||
},
|
||
{
|
||
name: "广东",
|
||
value: project.data[17],
|
||
JD: project.jd[17],
|
||
SG: project.sg[17],
|
||
Time: project.time[17],
|
||
HT: project.ht[17]
|
||
},
|
||
{
|
||
name: "广西",
|
||
value: project.data[18],
|
||
JD: project.jd[18],
|
||
SG: project.sg[18],
|
||
Time: project.time[18],
|
||
HT: project.ht[18]
|
||
},
|
||
{
|
||
name: "海南",
|
||
value: project.data[19],
|
||
JD: project.jd[19],
|
||
SG: project.sg[19],
|
||
Time: project.time[19],
|
||
HT: project.ht[19]
|
||
},
|
||
{
|
||
name: "四川",
|
||
value: project.data[20],
|
||
JD: project.jd[20],
|
||
SG: project.sg[20],
|
||
Time: project.time[20],
|
||
HT: project.ht[20]
|
||
},
|
||
{
|
||
name: "贵州",
|
||
value: project.data[21],
|
||
JD: project.jd[21],
|
||
SG: project.sg[21],
|
||
Time: project.time[21],
|
||
HT: project.ht[21]
|
||
},
|
||
{
|
||
name: "云南",
|
||
value: project.data[22],
|
||
JD: project.jd[22],
|
||
SG: project.sg[22],
|
||
Time: project.time[22],
|
||
HT: project.ht[22]
|
||
},
|
||
{
|
||
name: "西藏",
|
||
value: project.data[23],
|
||
JD: project.jd[23],
|
||
SG: project.sg[23],
|
||
Time: project.time[23],
|
||
HT: project.ht[23]
|
||
},
|
||
{
|
||
name: "陕西",
|
||
value: project.data[24],
|
||
JD: project.jd[24],
|
||
SG: project.sg[24],
|
||
Time: project.time[24],
|
||
HT: project.ht[24]
|
||
},
|
||
{
|
||
name: "甘肃",
|
||
value: project.data[25],
|
||
JD: project.jd[25],
|
||
SG: project.sg[25],
|
||
Time: project.time[25],
|
||
HT: project.ht[25]
|
||
},
|
||
{
|
||
name: "青海",
|
||
value: project.data[26],
|
||
JD: project.jd[26],
|
||
SG: project.sg[26],
|
||
Time: project.time[26],
|
||
HT: project.ht[26]
|
||
},
|
||
{
|
||
name: "宁夏",
|
||
value: project.data[27],
|
||
JD: project.jd[27],
|
||
SG: project.sg[27],
|
||
Time: project.time[27],
|
||
HT: project.ht[27]
|
||
},
|
||
{
|
||
name: "新疆",
|
||
value: project.data[28],
|
||
JD: project.jd[28],
|
||
SG: project.sg[28],
|
||
Time: project.time[28],
|
||
HT: project.ht[28]
|
||
},
|
||
{
|
||
name: "北京",
|
||
value: project.data[29],
|
||
JD: project.jd[29],
|
||
SG: project.sg[29],
|
||
Time: project.time[29],
|
||
HT: project.ht[29]
|
||
},
|
||
{
|
||
name: "天津",
|
||
value: project.data[30],
|
||
JD: project.jd[30],
|
||
SG: project.sg[30],
|
||
Time: project.time[30],
|
||
HT: project.ht[30]
|
||
},
|
||
{
|
||
name: "重庆",
|
||
value: project.data[31],
|
||
JD: project.jd[31],
|
||
SG: project.sg[31],
|
||
Time: project.time[31],
|
||
HT: project.ht[31]
|
||
},
|
||
{
|
||
name: "香港",
|
||
value: project.data[32],
|
||
JD: project.jd[32],
|
||
SG: project.sg[32],
|
||
Time: project.time[32],
|
||
HT: project.ht[32]
|
||
},
|
||
{
|
||
name: "澳门",
|
||
value: project.data[33],
|
||
JD: project.jd[33],
|
||
SG: project.sg[33],
|
||
Time: project.time[33],
|
||
HT: project.ht[33]
|
||
},
|
||
{
|
||
name: "台湾",
|
||
value: project.data[34],
|
||
JD: project.jd[34],
|
||
SG: project.sg[34],
|
||
Time: project.time[34],
|
||
HT: project.ht[34]
|
||
}]
|
||
|
||
var getItem = function (name) {
|
||
for (var i = 0; i < projectDesc.length; i++) {
|
||
var item = projectDesc[i]
|
||
if (item.name == name) {
|
||
return item
|
||
}
|
||
}
|
||
}
|
||
|
||
var convertData = function (data) {
|
||
var res = [];
|
||
for (var i = 0; i < data.length; i++) {
|
||
var geoCoord = geoCoordMap[data[i]];
|
||
if (geoCoord) {
|
||
res.push({
|
||
name: data[i],
|
||
value: geoCoord.concat(""),
|
||
});
|
||
}
|
||
}
|
||
return res;
|
||
};
|
||
function mapEchart(id, mapType) {
|
||
myChart = echarts.init(document.getElementById(id));
|
||
var mapType = mapType || 'china'
|
||
var mapZoom = mapType == 'china' ? 1.2 : 0.8
|
||
optionMap = {
|
||
title: {
|
||
// x:"center",
|
||
text: '',
|
||
textStyle: {
|
||
fontSize: 15,
|
||
fontWeight: 'normal',
|
||
color: '#fff'
|
||
// color:'rgba(0,162,233)'
|
||
}
|
||
, left: "center"
|
||
, top: 35
|
||
},
|
||
tooltip: {
|
||
trigger: 'item'
|
||
, formatter: function (params) {
|
||
var res = params.name + '<br/>';
|
||
var myseries = optionMap.series;
|
||
if (convertData) {
|
||
for (var i = 0; i < myseries.length - 1; i++) {
|
||
for (var j = 0; j < myseries[i].data.length; j++) {
|
||
if (myseries[i].data[j].name == params.name) {
|
||
res += myseries[i].name + ' : ' + myseries[i].data[j].value + '</br>';
|
||
var itemT = getItem(params.name)
|
||
if (itemT) {
|
||
if (itemT.JD != "") {
|
||
res += itemT.JD + '</br>';
|
||
res += itemT.SG + '</br>';
|
||
res += itemT.Time + '</br>';
|
||
res += itemT.HT + '</br>';
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
else {
|
||
for (var i = 0; i < myseries.length; i++) {
|
||
for (var j = 0; j < myseries[i].data.length; j++) {
|
||
if (myseries[i].data[j].name == params.name) {
|
||
res += myseries[i].name + ' : ' + myseries[i].data[j].value + '</br>';
|
||
}
|
||
}
|
||
}
|
||
}
|
||
console.log(res)
|
||
return res;
|
||
}
|
||
},
|
||
roamController: {
|
||
show: true,
|
||
x: 'right',
|
||
mapTypeControl: {
|
||
'china': true
|
||
}
|
||
},
|
||
geo: {
|
||
map: mapType,
|
||
label: {
|
||
emphasis: {
|
||
show: true
|
||
}
|
||
},
|
||
itemStyle: {
|
||
normal: {
|
||
// areaColor: '#FFE4CA',
|
||
//areaColor: '#09295b',
|
||
areaColor: '#ffffff',
|
||
borderColor: '#84C1FF',
|
||
borderWidth: 0.8
|
||
},
|
||
emphasis: {
|
||
areaColor: '#3066ba'
|
||
}
|
||
}
|
||
},
|
||
series: [
|
||
{
|
||
name: '数量',
|
||
type: 'map',
|
||
// mapType: 'world',
|
||
mapType: mapType,
|
||
//zoom: mapZoom,
|
||
roam: false,
|
||
data: [
|
||
{ name: 'China', value: project.data[0] },
|
||
{ name: 'United States', value: randomData() },
|
||
{ name: '上海', value: project.data[1] },
|
||
{ name: '河北', value: project.data[2] },
|
||
{ name: '山西', value: project.data[3] },
|
||
{ name: '内蒙古', value: project.data[4] },
|
||
{ name: '辽宁', value: project.data[5] },
|
||
{ name: '吉林', value: project.data[6] },
|
||
{ name: '黑龙江', value: project.data[7] },
|
||
{ name: '江苏', value: project.data[8] },
|
||
{ name: '浙江', value: project.data[9] },
|
||
{ name: '安徽', value: project.data[10] },
|
||
{ name: '福建', value: project.data[11] },
|
||
{ name: '江西', value: project.data[12] },
|
||
{ name: '山东', value: project.data[13] },
|
||
{ name: '河南', value: project.data[14] },
|
||
{ name: '湖北', value: project.data[15] },
|
||
{ name: '湖南', value: project.data[16] },
|
||
{ name: '广东', value: project.data[17] },
|
||
{ name: '广西', value: project.data[18] },
|
||
{ name: '海南', value: project.data[19] },
|
||
{ name: '四川', value: project.data[20] },
|
||
{ name: '贵州', value: project.data[21] },
|
||
{ name: '云南', value: project.data[22] },
|
||
{ name: '西藏', value: project.data[23] },
|
||
{ name: '陕西', value: project.data[24] },
|
||
{ name: '甘肃', value: project.data[25] },
|
||
{ name: '青海', value: project.data[26] },
|
||
{ name: '宁夏', value: project.data[27] },
|
||
{ name: '新疆', value: project.data[28] },
|
||
{ name: '北京', value: project.data[29] },
|
||
{ name: '天津', value: project.data[30] },
|
||
{ name: '重庆', value: project.data[31] },
|
||
{ name: '香港', value: project.data[32] },
|
||
{ name: '澳门', value: project.data[33] },
|
||
{ name: '台湾', value: project.data[34] }
|
||
],
|
||
//地图区域的多边形 图形样式，有 normal 和 emphasis 两个状态
|
||
itemStyle: {
|
||
//normal 是图形在默认状态下的样式；
|
||
normal: {
|
||
show: false,
|
||
areaColor: "#66b2ff",
|
||
borderColor: "#FCFCFC",
|
||
borderWidth: "1"
|
||
},
|
||
//emphasis 是图形在高亮状态下的样式，比如在鼠标悬浮或者图例联动高亮时。
|
||
emphasis: {
|
||
show: false,
|
||
areaColor: "#0073e6",
|
||
}
|
||
},
|
||
//图形上的文本标签，可用于说明图形的一些数据信息
|
||
label: {
|
||
normal: {
|
||
show: false
|
||
},
|
||
emphasis: {
|
||
show: false
|
||
}
|
||
}
|
||
},
|
||
{
|
||
name: 'tips',
|
||
type: 'effectScatter',//影响散点
|
||
coordinateSystem: 'geo',
|
||
symbolSize: [12.5, 19.5],
|
||
symbolOffset: [0, '-50%'],
|
||
showEffectOn: 'render',
|
||
symbol: 'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAnCAYAAAD6meO+AAACeElEQVRIia2WsUscQRTGn6BgsLhUybzZPW7vEgiKnIVd4MAUErBJLSn0D7DxP9gikHNm79bGQpBcmpg0VglESBFIG7wysdGUVmKIEOOhfClW7uJld3ZnbxceC7v73m+/me/NDFHKBV2fQst5Ai3XsCH8fmi5Fj2vT6XVMBSvVBHILSg+gxJIDj6DllsIPc8SIH0ovjAXHwrNv6Gln168WStByfdWxf+DyQ8IvbvxgI43Cc1fRwIMVHXRdu/EDBG/KQTQD7l7GxA4KxkSr6H4EIq/RHdxnZoTOCuDYVLixPBxD1oq6Er19o9VK9CyCcWXhtwTdLzJNBW/0C43jGZpycdQ4qdRDTTvG5zyLNWSRATlLhlMsE/Q4jyhyT5lAQxA/DEeIs4pWab73AoSyOWkWsmQljNnBWk5c/aQQMzYKREzOZS4S1YQw+QTtOglOGvHDsLbCRPfI2juJr3EpnyUCdB2H0LznwQLdwmaw+Rm5ENsVu8bAfrBPSj+ZuiTkKC4Yeh4QIkfCPhpLCCQi1Di2JzPDQIwBiWOUkCA5u9QsgPNL6DlK+PfD+IIwNiNZOlnSLCPf3dKKE+krKY5gi+hPDE0gfJ1oZBAdmJcUp4tdqjKswl25L1iALxn8LxbLwbi1k29Nboak4o+JORpaHGVDyCuEPJ0KiRSI3fyQSwWVbRdx/qYqvgCbdfJDInUiKZdX/BLKwAREbZrJWg+zajiFM1ayRpCRATF6xkh67kAkZr5CWhOW8qPsT0/kRtCZD7qRHMhl0cCENHNfsMHCSoO+vvFyKBoB4xTsVgIoA/S8u0Q4F2hACIi+AvjUM4qNoQP5azi88J41ty/StsHfhsMLgIAAAAASUVORK5CYII=',
|
||
rippleEffect: {
|
||
brushType: 'stroke'
|
||
},
|
||
hoverAnimation: true,
|
||
label: {
|
||
normal: {
|
||
color: '#c60fff',
|
||
formatter: '{b}',
|
||
position: 'right',
|
||
show: false
|
||
},
|
||
emphasis: {
|
||
show: false
|
||
}
|
||
},
|
||
itemStyle: {
|
||
normal: {
|
||
color: 'red', // 标记点颜色
|
||
shadowBlur: 10,
|
||
shadowColor: '#333'
|
||
},
|
||
},
|
||
data: convertData(project.convert
|
||
),
|
||
}
|
||
]
|
||
};
|
||
myChart.clear()
|
||
//为echarts对象加载数据
|
||
myChart.setOption(optionMap);
|
||
}
|
||
function initMap() {
|
||
|
||
var map = new BMapGL.Map("map"); // 创建Map实例
|
||
map.centerAndZoom(new BMapGL.Point(100.5, 33.5), 4); // 初始化地图,设置中心点坐标和地图级别
|
||
map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
|
||
map.setMapType(BMAP_EARTH_MAP);
|
||
var myIcon = new BMapGL.Icon("/Images/loc.png", new BMapGL.Size(36, 36));
|
||
// 创建Marker标注，使用小车图标
|
||
project.loc.forEach(function (item, index) {
|
||
|
||
var pt = new BMapGL.Point(item.split(',')[0], item.split(',')[1]);
|
||
var marker = new BMapGL.Marker(pt, {
|
||
icon: myIcon
|
||
});
|
||
|
||
var content = '<table>'
|
||
content = content + '<tr><td> 时间:' + item.split(',')[2]+'</td></tr>'
|
||
content = content + '<tr><td> 工期:' + item.split(',')[3]+'</td></tr>'
|
||
content = content + '<tr><td> 进度:' + item.split(',')[4] + '</td></tr>'
|
||
content = content + '<tr><td> 合同额:(' + item.split(',')[5] + ');收款额:(' + item.split(',')[6] + ')</td></tr>'
|
||
content = content + '<tr><td style="width:180px;"><a style="text-decoration:underline;color:#00a2e9;text-overflow: ellipsis; white - space: nowrap;" target="_top" href="../indexProject.aspx?projectId=' + item.split(',')[8] + '&projectName=' + item.split(',')[7] + '">项目详情</a></td> </tr>'
|
||
content += '</table>'
|
||
var infowindow = new BMapGL.InfoWindow(content, { title: item.split(',')[7]})
|
||
// 点标记添加点击事件
|
||
marker.addEventListener('click', function () {
|
||
this.openInfoWindow(infowindow)
|
||
})
|
||
// 将标注添加到地图
|
||
map.addOverlay(marker);
|
||
});
|
||
|
||
|
||
}
|
||
initMap()
|
||
//mapEchart('map', 'china')
|
||
|
||
//定义全国省份的数组
|
||
var provinces = ['shanghai', 'hebei', 'shanxi', 'neimenggu', 'liaoning', 'jilin', 'heilongjiang', 'jiangsu', 'zhejiang', 'anhui', 'fujian', 'jiangxi', 'shandong', 'henan', 'hubei', 'hunan', 'guangdong', 'guangxi', 'hainan', 'sichuan', 'guizhou', 'yunnan', 'xizang', 'shanxi1', 'gansu', 'qinghai', 'ningxia', 'xinjiang', 'beijing', 'tianjin', 'chongqing', 'xianggang', 'aomen'];
|
||
var provincesText = ['上海', '河北', '山西', '内蒙古', '辽宁', '吉林', '黑龙江', '江苏', '浙江', '安徽', '福建', '江西', '山东', '河南', '湖北', '湖南', '广东', '广西', '海南', '四川', '贵州', '云南', '西藏', '陕西', '甘肃', '青海', '宁夏', '新疆', '北京', '天津', '重庆', '香港', '澳门'];
|
||
|
||
|
||
//展示对应的省
|
||
function showProvince(pName, pRealName) {
|
||
//这写省份的js都是通过在线构建工具生成的，保存在本地，需要时加载使用即可，最好不要一开始全部直接引入。
|
||
loadBdScript('$' + pName + 'JS', '../res/index/js/province/' + pName + '.js', function () {
|
||
//初始化echarts:具体代码参考上面初始化中国地图即可，这里不再重复。
|
||
initEcharts(pName, pRealName)
|
||
});
|
||
}
|
||
//加载对应的JS
|
||
function loadBdScript(scriptId, url, callback) {
|
||
var script = document.createElement("script")
|
||
script.type = "text/javascript";
|
||
if (script.readyState) { //IE
|
||
script.onreadystatechange = function () {
|
||
if (script.readyState == "loaded" || script.readyState == "complete") {
|
||
script.onreadystatechange = null;
|
||
callback();
|
||
}
|
||
};
|
||
} else { //Others
|
||
script.onload = function () {
|
||
callback();
|
||
};
|
||
}
|
||
script.src = url;
|
||
script.id = scriptId;
|
||
document.getElementsByTagName("head")[0].appendChild(script);
|
||
}
|
||
|
||
function initEcharts(pName, pRealName) {
|
||
|
||
optionMap = {
|
||
title: {
|
||
// x:"left",
|
||
text: pRealName,
|
||
textStyle: {
|
||
fontSize: 20,
|
||
fontWeight: 'normal',
|
||
color: '#fff'
|
||
// color:'rgba(0,162,233)'
|
||
}
|
||
, left: "center"
|
||
, top: 35
|
||
},
|
||
tooltip: {
|
||
trigger: 'item'
|
||
, formatter: '{b}<br>数量：{c}'
|
||
},
|
||
geo: {
|
||
map: pRealName,
|
||
label: {
|
||
emphasis: {
|
||
show: true
|
||
}
|
||
},
|
||
itemStyle: {
|
||
normal: {
|
||
areaColor: '#FFE4CA',
|
||
borderColor: '#84C1FF',
|
||
borderWidth: 0.8
|
||
},
|
||
emphasis: {
|
||
areaColor: '#FFC78E'
|
||
}
|
||
}
|
||
},
|
||
//visualMap: {
|
||
// min: 0,
|
||
// max: 100,
|
||
// left: 20,
|
||
// bottom: 10,
|
||
// text: ['高', '低'],// 文本，默认为数值文本
|
||
// color: ['rgba(0, 64, 128, 0.1)', 'rgba(0, 64, 128,1)'],
|
||
// calculable: false,
|
||
// textStyle: {
|
||
// color: '#fff'
|
||
// }
|
||
//},
|
||
series: [
|
||
{
|
||
type: 'map',
|
||
mapType: pRealName,
|
||
roam: false,
|
||
data: [
|
||
{ name: '合肥市', value: randomData() },
|
||
{ name: '芜湖市', value: randomData() },
|
||
{ name: '蚌埠市', value: randomData() },
|
||
{ name: '淮南市', value: randomData() },
|
||
{ name: '马鞍山市', value: randomData() },
|
||
{ name: '淮北市', value: randomData() },
|
||
{ name: '铜陵市', value: randomData() },
|
||
{ name: '黄山市', value: randomData() },
|
||
{ name: '滁州市', value: randomData() },
|
||
{ name: '阜阳市', value: randomData() },
|
||
{ name: '宿州市', value: randomData() },
|
||
{ name: '亳州市', value: randomData() },
|
||
{ name: '池州市', value: randomData() },
|
||
{ name: '宣城市', value: randomData() }
|
||
],
|
||
//地图区域的多边形 图形样式，有 normal 和 emphasis 两个状态
|
||
itemStyle: {
|
||
//normal 是图形在默认状态下的样式；
|
||
normal: {
|
||
show: true,
|
||
areaColor: "#1a75ff",
|
||
borderColor: "#FCFCFC",
|
||
borderWidth: "1"
|
||
},
|
||
//emphasis 是图形在高亮状态下的样式，比如在鼠标悬浮或者图例联动高亮时。
|
||
emphasis: {
|
||
show: true,
|
||
areaColor: "#0052cc",
|
||
}
|
||
},
|
||
//图形上的文本标签，可用于说明图形的一些数据信息
|
||
label: {
|
||
normal: {
|
||
show: false
|
||
},
|
||
emphasis: {
|
||
show: false
|
||
}
|
||
}
|
||
}
|
||
]
|
||
};
|
||
myChart.clear();
|
||
//为echarts对象加载数据
|
||
myChart.setOption(optionMap);
|
||
}
|
||
|
||
</script>
|
||
<script>
|
||
//var swiper_One = '<ul class="content-ul swiper-wrapper"><li data-id="../Notice/NoticeView2.aspx?NoticeId=2acbfdd5-dc97-432e-9e66-8281906fe507" notice-id="2acbfdd5-dc97-432e-9e66-8281906fe507" class="c-item swiper-slide"><div class="tit" title="请于2017年6月10日组织开展高处作业安全检查"><div class="flex" ><div class="tit-t flex1">请于2017年6月10日组织开展高处作业安全检查</div><div class="tit-v">2017-05-30</div></div></div></li><li data-id="../Notice/NoticeView2.aspx?NoticeId=2ad4da01-085b-44fc-9fb2-b17ff4188157" class="c-item disabled swiper-slide"><div class="tit tit-read" title="关于现场焊工持证上岗的通知"><div class="flex" ><div class="tit-t flex1">关于现场焊工持证上岗的通知</div><div class="tit-v">2019-12-18</div></div></div></li><li data-id="../Notice/NoticeView2.aspx?NoticeId=2fc6d514-adb9-4071-86da-48dc527f2b05" notice-id="2fc6d514-adb9-4071-86da-48dc527f2b05" class="c-item swiper-slide"><div class="tit" title="通知"><div class="flex" ><div class="tit-t flex1">通知</div><div class="tit-v">2017-03-21</div></div></div></li></ul>'
|
||
//var swiper_One = '<ul class="content-ul swiper-wrapper"><li data-id="../Notice/NoticeView2.aspx?NoticeId=0597eed1-07b2-4d4e-af0c-3946c96a08df" notice-id="0597eed1-07b2-4d4e-af0c-3946c96a08df" class="c-item swiper-slide"><div class="tit" title="Strengthening prevention measures of Sunstroke"><div class="flex" ><div class="tit-t flex1">Strengthening prevention measures of Sunstroke</div><div class="tit-v">2017-07-09</div></div></div></li><li data-id="../Notice/NoticeView2.aspx?NoticeId=062bc818-5994-45da-9d49-19815bef02d4" notice-id="062bc818-5994-45da-9d49-19815bef02d4" class="c-item swiper-slide"><div class="tit" title="关于规范现场人员出入管理的通知"><div class="flex" ><div class="tit-t flex1">关于规范现场人员出入管理的通知</div><div class="tit-v">2017-02-06</div></div></div></li><li data-id="../Notice/NoticeView2.aspx?NoticeId=07ab4cbd-e09d-404a-9c4e-01846a164ad6" notice-id="07ab4cbd-e09d-404a-9c4e-01846a164ad6" class="c-item swiper-slide"><div class="tit" title="关于开展国庆节前安全大检查的通知"><div class="flex" ><div class="tit-t flex1">关于开展国庆节前安全大检查的通知</div><div class="tit-v">2019-09-30</div></div></div></li><li data-id="../Notice/NoticeView2.aspx?NoticeId=07bbe33f-4c65-4bab-b97d-3c0983f7c83e" notice-id="07bbe33f-4c65-4bab-b97d-3c0983f7c83e" class="c-item swiper-slide"><div class="tit" title="关于报送HSE相关资料的通知"><div class="flex" ><div class="tit-t flex1">关于报送HSE相关资料的通知</div><div class="tit-v">2018-04-08</div></div></div></li><li data-id="../Notice/NoticeView2.aspx?NoticeId=0af9fdd1-847f-45cc-8831-03d2a0ccbed1" class="c-item disabled swiper-slide"><div class="tit tit-read" title="About Dining Room"><div class="flex" ><div class="tit-t flex1">About Dining Room</div><div class="tit-v">2017-08-13</div></div></div></li><li data-id="../Notice/NoticeView2.aspx?NoticeId=0c7ca6d4-d1f1-484f-b561-9e6f1e7e1f48" class="c-item disabled swiper-slide"><div class="tit tit-read" title="请于2017年6月8日组织开展施工机具专项检查"><div class="flex" ><div class="tit-t flex1">请于2017年6月8日组织开展施工机具专项检查</div><div class="tit-v">2017-05-30</div></div></div></li><li data-id="../Notice/NoticeView2.aspx?NoticeId=0e0d4655-be58-4ba7-8aa0-4b8ea2052e52" notice-id="0e0d4655-be58-4ba7-8aa0-4b8ea2052e52" class="c-item swiper-slide"><div class="tit" title="请于5月25日前开展HSE内业资料检查、消防安全检查"><div class="flex" ><div class="tit-t flex1">请于5月25日前开展HSE内业资料检查、消防安全检查</div><div class="tit-v">2017-05-23</div></div></div></li><li data-id="../Notice/NoticeView2.aspx?NoticeId=14fe97ba-d619-44c6-9327-4db5eb4aa186" notice-id="14fe97ba-d619-44c6-9327-4db5eb4aa186" class="c-item swiper-slide"><div class="tit" title="关于加强项目现场射线探伤作业安全管理的通知"><div class="flex" ><div class="tit-t flex1">关于加强项目现场射线探伤作业安全管理的通知</div><div class="tit-v">2017-03-22</div></div></div></li><li data-id="../Notice/NoticeView2.aspx?NoticeId=16e3f479-e5fa-4a14-aeb5-88af9ba1a66c" notice-id="16e3f479-e5fa-4a14-aeb5-88af9ba1a66c" class="c-item swiper-slide"><div class="tit" title="关于做好履带吊大臂受损后续工作安排的通知"><div class="flex" ><div class="tit-t flex1">关于做好履带吊大臂受损后续工作安排的通知</div><div class="tit-v">2019-11-10</div></div></div></li><li data-id="../Notice/NoticeView2.aspx?NoticeId=19443b9e-5e92-4c00-9510-02d8c30b03ff" notice-id="19443b9e-5e92-4c00-9510-02d8c30b03ff" class="c-item swiper-slide"><div class="tit" title="关于加强新建LNG罐区大门管理的通知"><div class="flex" ><div class="tit-t flex1">关于加强新建LNG罐区大门管理的通知</div><div class="tit-v">2019-10-10</div></div></div></li><li data-id="../Notice/NoticeView2.aspx?NoticeId=1b21886b-e7df-4cbc-ae3c-1cd1daee93a9" notice-id="1b21886b-e7df-4cbc-ae3c-1cd1daee93a9" class="c-item swiper-slide"><div class="tit" title="关于严格执行作业票证制度和作业前安全技术交底工作的通知"><div class="flex" ><div class="tit-t flex1">关于严格执行作业票证制度和作业前安全技术交底工作的通知</div><div class="tit-v">2018-03-12</div></div></div></li><li data-id="../Notice/NoticeView2.aspx?NoticeId=1c3ff63e-df82-4b0c-ba54-d623f0473e14" notice-id="1c3ff63e-df82-4b0c-ba54-d623f0473e14" class="c-item swiper-slide"><div class="tit" title="Important HSE instructions"><div class="flex" ><div class="tit-t flex1">Important HSE instructions</div><div class="tit-v">2017-08-01</div></div></div></li><li data-id="../Notice/NoticeView2.aspx?NoticeId=227d6922-f455-4382-8f86-7fc83c45d22b" notice-id="227d6922-f455-4382-8f86-7fc83c45d22b" class="c-item swiper-slide"><div class="tit" title="关于报送HSE相关资料的通知"><div class="flex" ><div class="tit-t flex1">关于报送HSE相关资料的通知</div><div class="tit-v">2019-07-23</div></div></div></li><li data-id="../Notice/NoticeView2.aspx?NoticeId=23c364db-62af-4f05-b5e9-3ef60cf1aa9d" notice-id="23c364db-62af-4f05-b5e9-3ef60cf1aa9d" class="c-item swiper-slide"><div class="tit" title="Crane Rejection"><div class="flex" ><div class="tit-t flex1">Crane Rejection</div><div class="tit-v">2017-12-11</div></div></div></li><li data-id="../Notice/NoticeView2.aspx?NoticeId=247fe11c-4f16-4c74-9098-ae287f860b71" notice-id="247fe11c-4f16-4c74-9098-ae287f860b71" class="c-item swiper-slide"><div class="tit" title="关于做好土建撤场工作安排的通知"><div class="flex" ><div class="tit-t flex1">关于做好土建撤场工作安排的通知</div><div class="tit-v">2019-11-06</div></div></div></li><li data-id="../Notice/NoticeView2.aspx?NoticeId=279da471-c47e-47b4-a89d-a3f97692961e" notice-id="279da471-c47e-47b4-a89d-a3f97692961e" class="c-item swiper-slide"><div class="tit" title="请于2017年6月5日前开展动火作业安全专项检查"><div class="flex" ><div class="tit-t flex1">请于2017年6月5日前开展动火作业安全专项检查</div><div class="tit-v">2017-05-30</div></div></div></li><li data-id="../Notice/NoticeView2.aspx?NoticeId=2a35f657-1206-479b-8510-8639cc024e0c" notice-id="2a35f657-1206-479b-8510-8639cc024e0c" class="c-item swiper-slide"><div class="tit" title="关于设定马苏项目重点消防区域及组建义务消防队的通知"><div class="flex" ><div class="tit-t flex1">关于设定马苏项目重点消防区域及组建义务消防队的通知</div><div class="tit-v">2017-05-30</div></div></div></li><li data-id="../Notice/NoticeView2.aspx?NoticeId=2acbfdd5-dc97-432e-9e66-8281906fe507" notice-id="2acbfdd5-dc97-432e-9e66-8281906fe507" class="c-item swiper-slide"><div class="tit" title="请于2017年6月10日组织开展高处作业安全检查"><div class="flex" ><div class="tit-t flex1">请于2017年6月10日组织开展高处作业安全检查</div><div class="tit-v">2017-05-30</div></div></div></li><li data-id="../Notice/NoticeView2.aspx?NoticeId=2ad4da01-085b-44fc-9fb2-b17ff4188157" class="c-item disabled swiper-slide"><div class="tit tit-read" title="关于现场焊工持证上岗的通知"><div class="flex" ><div class="tit-t flex1">关于现场焊工持证上岗的通知</div><div class="tit-v">2019-12-18</div></div></div></li><li data-id="../Notice/NoticeView2.aspx?NoticeId=2fc6d514-adb9-4071-86da-48dc527f2b05" notice-id="2fc6d514-adb9-4071-86da-48dc527f2b05" class="c-item swiper-slide"><div class="tit" title="通知"><div class="flex" ><div class="tit-t flex1">通知</div><div class="tit-v">2017-03-21</div></div></div></li></ul>'
|
||
var swiper_One ='<%=swiper_One %>'
|
||
var swiper_Two = '<ul class="content-ul swiper-wrapper"></ul>'
|
||
var todoNum = '0'
|
||
$(".tab .t-item").click(function () {
|
||
var $this = $(this)
|
||
var index = $this.index()
|
||
if ($this.hasClass('active') && index == 0) {
|
||
return
|
||
}
|
||
var $tab = $this.closest(".tab")
|
||
var value = $tab.attr("data-value")
|
||
$tab.find(".t-item").removeClass('active');
|
||
$this.addClass('active')
|
||
if (value == 0) {
|
||
var maptype = index == 0 ? 'world' : 'china'
|
||
mapEchart('map', maptype)
|
||
} else if (value == 1) {
|
||
if (index == 0) {
|
||
$("#swiper2").html(swiper_One)
|
||
mySwiper = new Swiper('#swiper2', {
|
||
autoplay: 4000,//可选选项，自动滑动
|
||
direction: 'vertical',
|
||
loop: true,
|
||
slidesPerView: slidesNum
|
||
})
|
||
} else if (index == 2) {
|
||
$("#swiper2").html(swiper_Two)
|
||
if (todoNum >= slidesNum) {
|
||
mySwiper = new Swiper('#swiper2', {
|
||
autoplay: 4000,//可选选项，自动滑动
|
||
direction: 'vertical',
|
||
loop: true,
|
||
slidesPerView: slidesNum
|
||
})
|
||
}
|
||
else {
|
||
mySwiper = new Swiper('#swiper2', {
|
||
//autoplay: 4000,//可选选项，自动滑动
|
||
direction: 'vertical',
|
||
loop: true,
|
||
slidesPerView: slidesNum
|
||
})
|
||
}
|
||
}
|
||
}
|
||
})
|
||
|
||
$("#swiper2").on('click', 'li', function () {
|
||
var $this = $(this)
|
||
var data = $this.attr("data-id")
|
||
var noticeId = $this.attr("notice-id")
|
||
|
||
//$(".project-list-wrap").show();
|
||
//return
|
||
if (data != "") {
|
||
//Window1.GetShowReference(data) + "return false;";
|
||
document.getElementById("hdNoticeId").value = noticeId;
|
||
document.getElementById("imgBtn").click();
|
||
window.open(data);
|
||
top.window.location.reload();
|
||
}
|
||
})
|
||
</script>
|
||
<script>
|
||
//echartsBarInit('echartsBar', jdglData)
|
||
var jdglData = { "title": "施工进度", "xFontNum": 0, "legend": [], "categories": [null, "五环天地", "研究院", "", "滨州临港"], "series": [{ "name": "施工进度", "type": "bar", "data": [0.5, 0.6, 0.7, 0.79999999999999993, 0.89999999999999991], "dataString": null, "dataObject": null }], "series2": null }
|
||
function echartsBarInit(id, data) {
|
||
var myChart = echarts.init(document.getElementById(id)) // 初始化echarts实例
|
||
myChart.setOption(// 通过setOption来生成柱状图
|
||
{
|
||
title: {
|
||
// left:'center',
|
||
text: '进度统计',
|
||
textStyle: {
|
||
color: '#fff'
|
||
},
|
||
show: false
|
||
},
|
||
grid: { // 直角坐标系内绘图网格
|
||
left: '0', //grid 组件离容器左侧的距离,
|
||
//left的值可以是80这样具体像素值，
|
||
//也可以是'80%'这样相对于容器高度的百分比
|
||
top: '25',
|
||
right: '0',
|
||
bottom: '0',
|
||
containLabel: true //gid区域是否包含坐标轴的刻度标签。为true的时候，
|
||
// left/right/top/bottom/width/height决定的是包括了坐标轴标签在内的
|
||
//所有内容所形成的矩形的位置.常用于【防止标签溢出】的场景
|
||
},
|
||
xAxis: { //直角坐标系grid中的x轴,
|
||
//一般情况下单个grid组件最多只能放上下两个x轴,
|
||
//多于两个x轴需要通过配置offset属性防止同个位置多个x轴的重叠。
|
||
type: 'value',//坐标轴类型,分别有：
|
||
//'value'-数值轴；'category'-类目轴;
|
||
//'time'-时间轴;'log'-对数轴
|
||
splitLine: { show: false },//坐标轴在 grid 区域中的分隔线
|
||
axisLabel: { show: false },//坐标轴刻度标签
|
||
axisTick: { show: false },//坐标轴刻度
|
||
axisLine: { show: false },//坐标轴轴线
|
||
},
|
||
yAxis: {
|
||
type: 'category',
|
||
axisTick: { show: false },
|
||
axisLine: { show: false },
|
||
axisLabel: {
|
||
color: '#fff',
|
||
// fontSize: 12
|
||
},
|
||
data: ['施工', '工程', '项目']//类目数据，在类目轴（type: 'category'）中有效。
|
||
//如果没有设置 type，但是设置了axis.data,则认为type 是 'category'。
|
||
},
|
||
series: [//系列列表。每个系列通过 type 决定自己的图表类型
|
||
{
|
||
name: '%',//系列名称
|
||
type: 'bar',//柱状、条形图
|
||
barWidth: 19,//柱条的宽度,默认自适应
|
||
data: [20, 40, 60],//系列中数据内容数组
|
||
label: { //图形上的文本标签
|
||
show: true,
|
||
position: 'right',//标签的位置
|
||
offset: [0, -20], //标签文字的偏移，此处表示向上偏移40
|
||
formatter: '{c}{a}',//标签内容格式器 {a}-系列名,{b}-数据名,{c}-数据值
|
||
color: '#fff',//标签字体颜色
|
||
fontSize: 12 //标签字号
|
||
},
|
||
itemStyle: {//图形样式
|
||
normal: { //normal 图形在默认状态下的样式;
|
||
//emphasis图形在高亮状态下的样式
|
||
barBorderRadius: 10,//柱条圆角半径,单位px.
|
||
//此处统一设置4个角的圆角大小;
|
||
//也可以分开设置[10,10,10,10]顺时针左上、右上、右下、左下
|
||
color: new echarts.graphic.LinearGradient(
|
||
0, 0, 1, 0,
|
||
[{
|
||
offset: 0,
|
||
color: '#22B6ED'
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: '#3FE279'
|
||
}
|
||
]
|
||
)
|
||
}
|
||
},
|
||
zlevel: 1//柱状图所有图形的 zlevel 值,
|
||
//zlevel 大的 Canvas 会放在 zlevel 小的 Canvas 的上面
|
||
},
|
||
{
|
||
name: '进度条背景',
|
||
type: 'bar',
|
||
barGap: '-100%',//不同系列的柱间距离，为百分比。
|
||
// 在同一坐标系上，此属性会被多个 'bar' 系列共享。
|
||
// 此属性应设置于此坐标系中最后一个 'bar' 系列上才会生效，
|
||
//并且是对此坐标系中所有 'bar' 系列生效。
|
||
barWidth: 19,
|
||
data: [100, 100, 100],
|
||
color: '#151B87',//柱条颜色
|
||
itemStyle: {
|
||
normal: {
|
||
barBorderRadius: 10
|
||
}
|
||
}
|
||
}
|
||
]
|
||
}
|
||
)
|
||
}
|
||
</script>
|
||
<script>
|
||
var widthNow = ((document.body.offsetWidth - 30) / 2) * 0.48
|
||
//alert(widthNow)
|
||
var leftAccValue = '0'
|
||
var leftoffsetValue = 80
|
||
var leftoffsetValue1 = 20
|
||
var fontlabelsize = 12
|
||
if (widthNow < 450) {
|
||
leftAccValue = '0'
|
||
leftoffsetValue = 80
|
||
leftoffsetValue1 = 20
|
||
fontlabelsize = 10
|
||
}
|
||
//alert(leftAccValue + "," + leftoffsetValue + "," +leftoffsetValue1)
|
||
function Accumulation(id, datap, data0, data1, data2, data3) {
|
||
var myChartLine = echarts.init(document.getElementById(id));
|
||
option = {
|
||
title: {
|
||
show: false
|
||
},
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
axisPointer: { // 坐标轴指示器，坐标轴触发有效
|
||
type: 'line' // 默认为直线，可选为：'line' | 'shadow'
|
||
}
|
||
},
|
||
legend: {
|
||
show: false
|
||
},
|
||
grid: {
|
||
top: '2%',
|
||
left: leftAccValue,
|
||
right: '0',
|
||
bottom: '0',
|
||
containLabel: true
|
||
},
|
||
xAxis: {
|
||
show: false,
|
||
type: 'value',
|
||
},
|
||
yAxis: [{
|
||
offset: leftoffsetValue,
|
||
position: 'left',
|
||
type: 'category',
|
||
data: datap,
|
||
axisLabel: {
|
||
interval: 0,
|
||
show: true,
|
||
fontSize: 12,
|
||
textStyle: {
|
||
color: function (value, index) {
|
||
return index == datap.length - 1 ? '#FFFFFF' : '#00a2e9';
|
||
}
|
||
},
|
||
//color: "#57B8BD",
|
||
align: 'middle',
|
||
//verticalAlign: 'middle',
|
||
formatter: function (value) {
|
||
var ret = "";//拼接加\n返回的类目项
|
||
var maxLength = 5;//每项显示文字个数
|
||
var valLength = value.length;//X轴类目项的文字个数
|
||
var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数
|
||
if (rowN > 1)//如果类目项的文字大于maxLength,
|
||
{
|
||
for (var i = 0; i < rowN; i++) {
|
||
var temp = "";//每次截取的字符串
|
||
var start = i * maxLength;//开始截取的位置
|
||
var end = start + maxLength;//结束截取的位置
|
||
//这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧
|
||
temp = value.substring(start, end) + (i == rowN - 1 ? "" : "\n");
|
||
ret += temp; //凭借最终的字符串
|
||
}
|
||
return ret;
|
||
}
|
||
else {
|
||
return value;
|
||
}
|
||
}
|
||
},
|
||
axisTick: { show: false },
|
||
splitLine: { show: false },
|
||
axisLine: { show: false }
|
||
}, {
|
||
offset: leftoffsetValue1,
|
||
position: 'left',
|
||
type: 'category',
|
||
data: data0,
|
||
nameTextStyle: {
|
||
width: 100,
|
||
},
|
||
axisLabel: {
|
||
show: true,
|
||
fontSize: 12,
|
||
textStyle: {
|
||
color: function (value, index) {
|
||
return index == data0.length - 1 ? '#FFFFFF' : '#00a2e9';
|
||
}
|
||
},
|
||
//color: "#57B8BD",
|
||
align: 'middle',
|
||
//verticalAlign: 'middle',
|
||
formatter: function (value) {
|
||
var ret = "";//拼接加\n返回的类目项
|
||
var maxLength = 5;//每项显示文字个数
|
||
var valLength = value.length;//X轴类目项的文字个数
|
||
var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数
|
||
if (rowN > 1)//如果类目项的文字大于maxLength,
|
||
{
|
||
for (var i = 0; i < rowN; i++) {
|
||
var temp = "";//每次截取的字符串
|
||
var start = i * maxLength;//开始截取的位置
|
||
var end = start + maxLength;//结束截取的位置
|
||
//这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧
|
||
temp = value.substring(start, end) + (i == rowN - 1 ? "" : "\n");
|
||
ret += temp; //凭借最终的字符串
|
||
}
|
||
return ret;
|
||
}
|
||
else {
|
||
return value;
|
||
}
|
||
}
|
||
},
|
||
axisTick: { show: false },
|
||
splitLine: { show: false },
|
||
axisLine: { show: false },
|
||
|
||
}],
|
||
series: [
|
||
{
|
||
name: '当前现场人数',
|
||
type: 'bar',
|
||
stack: '总量',
|
||
color: "#1c6ead",
|
||
label: {
|
||
fontSize: fontlabelsize,
|
||
show: true,
|
||
position: 'inside'
|
||
},
|
||
barMinHeight: 20,
|
||
data: data1
|
||
},
|
||
{
|
||
name: '作业人员总数',
|
||
type: 'bar',
|
||
stack: '总量',
|
||
color: "#0047b3",
|
||
label: {
|
||
fontSize: fontlabelsize,
|
||
show: true,
|
||
position: 'inside'
|
||
},
|
||
barMinHeight: 20,
|
||
data: data2
|
||
},
|
||
{
|
||
name: '管理人员总数',
|
||
type: 'bar',
|
||
stack: '总量',
|
||
color: "#26734d",
|
||
label: {
|
||
fontSize: fontlabelsize,
|
||
show: true,
|
||
position: 'inside'
|
||
},
|
||
barMinHeight: 20,
|
||
barWidth: 20,
|
||
//barGap: 0,
|
||
data: data3
|
||
}
|
||
]
|
||
};
|
||
myChartLine.setOption(option);
|
||
}
|
||
|
||
var accumulation = { "title": "劳务统计", "xFontNum": 0, "legend": null, "categories": [], "series": [{ "name": null, "type": null, "data": null, "dataString": ["五环天地", "研究院", "滨州临港", "嘉盛", "东华能源", "项目"], "dataObject": null }, { "name": null, "type": null, "data": null, "dataString": ["0", "0", "0", "0", "0", "进场人数"], "dataObject": null }, { "name": null, "type": null, "data": [0.0, 0.0, 0.0, 0.0, 0.0], "dataString": null, "dataObject": null }, { "name": null, "type": null, "data": [0.0, 0.0, 0.0, 0.0, 0.0], "dataString": null, "dataObject": null }, { "name": null, "type": null, "data": [0.0, 0.0, 0.0, 0.0, 0.0], "dataString": null, "dataObject": null }], "series2": null };
|
||
var datap = [{
|
||
data: accumulation.series[0].dataString
|
||
}]
|
||
var data0 = [{
|
||
data: accumulation.series[1].dataString
|
||
}]
|
||
var data1 = [{
|
||
data: accumulation.series[2].data
|
||
}]
|
||
var data2 = [{
|
||
data: accumulation.series[3].data
|
||
}]
|
||
var data3 = [{
|
||
data: accumulation.series[4].data
|
||
}]
|
||
// Accumulation('Accumulation', datap[0].data, data0[0].data, data1[0].data, data2[0].data, data3[0].data)
|
||
</script>
|
||
<script type="text/javascript">
|
||
var slidesNum = 5
|
||
var mySwiper = null
|
||
var mySwiper_JD = null
|
||
var slidesNum_JD = 15
|
||
var accident =<%=Accident %>
|
||
$(document).ready(function () {
|
||
var height = $("#swiper-pre").height() / 3 - 30
|
||
$("#swiper2").css("height", (height) + 'px')
|
||
slidesNum = Math.floor((height) / 24)
|
||
$("#swiper2").html('<%=swiper_One %>')
|
||
mySwiper = new Swiper('#swiper2', {
|
||
autoplay: 4000,//可选选项，自动滑动
|
||
direction: 'vertical',
|
||
loop: true,
|
||
slidesPerView: slidesNum
|
||
})
|
||
|
||
var height_JD = $("#swiper-pre").height() / 3 * 2 - 36 - 30
|
||
$("#divJD_wrap").css("height", (height_JD) + 'px')
|
||
slidesNum_JD = Math.floor((height_JD) / 20)
|
||
|
||
var str = '<div class="content-ul swiper-wrapper">'
|
||
for (var i = 0; i < accident.categories.length; i++) {
|
||
str += '<div class="flex tab-i swiper-slide"><div class="txt" style = "color:#00a2e9" >' + accident.categories[i] + '</div ><div class="flex1 flex line-wrap"><div class="line-item"><div class="normal" style="width: ' + accident.series[0].data4[i] + '%"></div></div></div><div class="txt" style="color:#00a2e9">' + accident.series[0].data4[i] + '%</div></div>'
|
||
}
|
||
str += '</div>'
|
||
$("#divJD_wrap").html(str)
|
||
mySwiper_JD = new Swiper('#divJD_wrap', {
|
||
autoplay: 3000,//可选选项，自动滑动
|
||
direction: 'vertical',
|
||
loop: true,
|
||
slidesPerView: slidesNum_JD
|
||
})
|
||
|
||
$(".project").hover(function () {
|
||
$(".project-list").show();
|
||
}, function () {
|
||
$(".project-list").hide();
|
||
});
|
||
|
||
$(".project-list>div").click(function () {
|
||
var $this = $(this)
|
||
top.window.location.href = "../indexProject.aspx?projectName=" + $this.html();
|
||
});
|
||
})
|
||
$(".d-item-js").click(function (e) {
|
||
var index = $(this).index();
|
||
var project =<%=Project %>
|
||
$("#projectList").html(project.name)
|
||
$(".project-list-wrap").show();
|
||
})
|
||
|
||
$("#projectList_btn").click(function () {
|
||
$(".project-list-wrap").hide();
|
||
})
|
||
</script>
|
||
</html>
|
||
|