CNCEC_SUBQHSE_WUHUAN/SGGL/FineUIPro.Web/common/main_new.aspx

1513 lines
58 KiB
Plaintext
Raw Normal View History

2023-08-24 10:00:59 +08:00
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="main_new.aspx.cs" Inherits="FineUIPro.Web.common.main_new" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>项目概况</title>
<script src="lib/flex.js"></script>
<link rel="stylesheet" href="css/base.css"/>
<link rel="stylesheet" href="css/overview.css"/>
<script type="text/javascript"
src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=Lma56vCk88x46KEXSyc2cIXk6kT2W7KB"></script>
<style>
.BMap_mask {
background-color: red;
}
.BMap_bubble_pop {
color: white;
background-color: #000099 !important;
color: white !important;
}
.BMap_bubble_pop td {
color: white !important;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div class="wrap y_image_default">
<div class="y_body y_row">
<div class="site y_column">
<div class="y_box">
<div class="y_box_label y_image_default">安全统计</div>
<div class="y_box_main">
<div class="y_row y_rgss">
<div class="y_rgs y_column y_image_default">
<p class="y_rgs_val" id="divSafeWorkTime" runat="server">0000000000</p>
<div class="y_rgs_label">累计安全人工时</label>
</div>
</div>
<div class="y_rgs y_column y_image_default">
<p class="y_rgs_val" id="divSafeWorkTimeMonth" runat="server">0000000000</p>
<div class="y_rgs_label" >本月安全人工时</label>
</div>
</div>
<div class="y_rgs y_column y_image_default">
<p class="y_rgs_val" id="divSafePersonNum" runat="server">0</p>
<div class="y_rgs_label">安全培训累计人员</label>
</div>
</div>
</div>
<div class="y_aq y_row">
<div class="y_aq_box y_image_default y_row">
<div class="y_aq_label">安全管理人员</div>
<div class="y_aq_value" id="divSafeManagePersonNum" runat="server">0</div>
</div>
<div class="y_aq_box y_image_default y_row">
<div class="y_aq_label">未遂事件</div>
<div class="y_aq_value" runat="server" id="divWS">0</div>
</div>
</div>
<div class="y_zg">
<div class="y_zg_title">整改数据</div>
<div class="y_zg_main y_row">
<div class="y_zg_box">
<div class="y_zg_value" style="background-color: #00b8de54;color: #00b8de;" runat="server" id="div_zgsj">154564
</div>
<div class="y_zg_label">总数</div>
</div>
<div class="y_zg_box">
<div class="y_zg_value" style="background-color: #12cda26e;color: #12CDA2;" runat="server" id="div_zgywc">154564
</div>
<div class="y_zg_label">已完成</div>
</div>
<div class="y_zg_box">
<div class="y_zg_value" style="background-color:#ff747452;color: #FF7474;" runat="server" id="div_zgwwc">154564
</div>
<div class="y_zg_label">未完成</div>
</div>
<div class="y_zg_box">
<div class="y_zg_value" style="background-color: #d2b10054;color: #D2B100;" runat="server" id="div_zgwcl">83.8%
</div>
<div class="y_zg_label">完成率</div>
</div>
</div>
</div>
</div>
</div>
<div class="y_box">
<div class="y_box_label y_image_default">质量概况</div>
<div class="y_box_main">
<div class="y_zlry y_row y_image_default">
<div class="y_zlry_label">质量管理人员</div>
<div class="y_zlry_value" id="divCqmsManageNum" runat="server">0</div>
</div>
<div class="y_zlry y_row y_image_default" style="margin-top: .125rem;">
<div class="y_zlry_label">质量培训累计人员</div>
<div class="y_zlry_value" id="divCqmsPxNum" runat="server">0</div>
</div>
<div class="y_zlmap y_row">
<div class="zgmap" id="zlmap"></div>
<div class="zgmap" id="ycmap"></div>
<div class="zgmap" id="hjmap"></div>
</div>
</div>
</div>
<div class="y_box">
<div class="y_box_label y_image_default">关键事项 <span class="y_more">更多></span></div>
<div class="y_box_main">
<!-- <div class="y_aq y_row" style="margin-top: .25rem;">
<div class="y_aq_box y_image_default y_row">
<div class="y_aq_label">未完关键事项</div>
<div class="y_aq_value" style="color: #D2B100;">14</div>
</div>
<div class="y_aq_box y_image_default y_row">
<div class="y_aq_label">事项完成率</div>
<div class="y_aq_value">80%</div>
</div>
</div> -->
<div class="y_zlry y_row y_image_default">
<div class="y_zlry_label">关键事项总计</div>
<div class="y_zlry_value" id="divGjsxzj" runat="server">0</div>
</div>
<div class="y_gjzg y_row">
<div class="y_gjzg_box" id="zglmap"></div>
<div class="y_gjzg_box y_column">
<div class="y_gjzg_zg y_image_default y_row">
<label>到期应完成</label>
<p style="color: #12CDA2;" id="divGjsxdq" runat="server">0</p>
</div>
<div class="y_gjzg_zg y_image_default y_row">
<label>未准点完成</label>
<p style="color: #FF7474;" id="divGjsxwzd" runat="server">0</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="site">
<div class="y_top_boxs y_row">
<div class="y_top_box y_image_default y_column">
<div class="y_top_box_label" style="color: #12CDA2;">在建项目</div>
<div class="y_top_box_value" style="color: #12CDA2;" id="div_zjxmCount" runat="server"></div>
</div>
<div class="y_top_box y_image_default y_column">
<div class="y_top_box_label" style="color: #00FFFF;">参建人数</div>
<div class="y_top_box_value" style="color: #00FFFF;" id="div_cjrsCount" runat="server"></div>
</div>
<div class="y_top_box y_image_default y_column">
<div class="y_top_box_label" style="color: #FF7474;">在施危大工程</div>
<div class="y_top_box_value" style="color: #FF7474;" id="div_wdgcCount" runat="server"></div>
</div>
</div>
<div class="y_map_container">
<div id='map' style="width: 100%; height: 100%;"></div>
</div>
</div>
<div class="site y_column">
<!-- 人员信息 -->
<div class="y_box">
<div class="y_box_label y_image_default">人员信息 </div>
<div class="y_rys y_row">
<div class="y_ry y_row y_image_default">
<div class="y_ry_label">当前现场人数</div>
<div class="y_ry_value" id="div_xcrs" runat="server">0</div>
</div>
<div class="y_ry y_row y_image_default">
<div class="y_ry_label">作业人员总数</div>
<div class="y_ry_value" style="color: #00FFFF;" id="div_zyxcrs" runat="server">0</div>
</div>
<div class="y_ry y_row y_image_default">
<div class="y_ry_label">管理人员总数</div>
<div class="y_ry_value" style="color: #63CAFF;" id="div_glxcrs" runat="server">0</div>
</div>
</div>
<div class="y_rymap" id="rymap"></div>
</div>
<div class="y_box">
<div class="y_box_label y_image_default">进度情况 <span class="y_more">更多></span></div>
<div class="y_box_main" id="jdmap"></div>
</div>
<div class="y_box">
<div class="y_box_label y_image_default">
<div class="y_tabs y_row">
<span class="y_image_default y_tab-action" id="span_gdcl" onclick="clOnclick(0)" style="cursor:pointer">管道材料</span>
<span class="y_image_default" id="span_sbcl" onclick="clOnclick(1)" style="cursor:pointer">设备材料</span></div>
材料到货 <span class="y_more">更多></span>
</div>
<div class="y_box_main">
<div class="table">
<div class="thead">
<div class="tr" style="background: rgba(33, 55, 113, .4);" id="div_cldhHead">
<%=gdclHead %>
</div>
</div>
<div class="tbody" id="div_cldhList">
<%=gdclHtml %>
<%-- <div class="tr">
<span>111</span><span>70%</span><span>60%</span><span>50%</span><span>90%</span><span>43%</span>
</div>
<div class="tr">
<span>111</span><span>70%</span><span>60%</span><span>50%</span><span>90%</span><span>43%</span>
</div>
<div class="tr">
<span>111</span><span>70%</span><span>60%</span><span>50%</span><span>90%</span><span>43%</span>
</div>
<div class="tr">
<span>111</span><span>70%</span><span>60%</span><span>50%</span><span>90%</span><span>43%</span>
</div>
<div class="tr">
<span>111</span><span>70%</span><span>60%</span><span>50%</span><span>90%</span><span>43%</span>
</div>
<div class="tr">
<span>111</span><span>70%</span><span>60%</span><span>50%</span><span>90%</span><span>43%</span>
</div>
<div class="tr">
<span>111</span><span>70%</span><span>60%</span><span>50%</span><span>90%</span><span>43%</span>
</div>
<div class="tr">
<span>111</span><span>70%</span><span>60%</span><span>50%</span><span>90%</span><span>43%</span>
</div>
<div class="tr">
<span>111</span><span>70%</span><span>60%</span><span>50%</span><span>90%</span><span>43%</span>
</div>
<div class="tr">
<span>111</span><span>70%</span><span>60%</span><span>50%</span><span>90%</span><span>43%</span>
</div>--%>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</form>
</body>
</html>
<script src="./lib/echarts.min.js"></script>
<script src="./lib/jquery.js"></script>
<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/china.js"></script>
<script type="text/javascript" src="../res/index/js/world.js"></script>
<script>
function clOnclick(objval) {
if (objval == 0) {
$("#span_gdcl").addClass("y_tab-action")
$("#span_sbcl").removeClass("y_tab-action")
$("#div_cldhHead").html('<%=gdclHead%>')
$("#div_cldhList").html('<%=gdclHtml%>')
} else {
$("#span_sbcl").addClass("y_tab-action")
$("#span_gdcl").removeClass("y_tab-action")
$("#div_cldhHead").html('<%=sbclHead%>')
$("#div_cldhList").html('<%=sbclHtml%>')
}
}
</script>
<script>
var map = null
// 质量问问题整改率
zlmap()
function zlmap() {
let AOption1 = {
title: [
{
text: '质量问题整改率',
bottom: fontSize(30),
left: 'center',
textStyle: {
color: '#63CAFF',
fontSize: fontSize(12)
}
},
{
text: '总计 ' + '{a|' + <%=zlallNumber%> + '}',
bottom: fontSize(4),
left: 'left',
textStyle: {
color: '#63CAFF',
fontSize: fontSize(12),
rich: {
a: {
color: '#00FFFF',
fontSize: fontSize(16)
}
}
}
},
{
text: '合格 ' + '{a|' + <%=zlfinishNumber%> + '}',
bottom: fontSize(4),
left: '50%',
textStyle: {
color: '#63CAFF',
fontSize: fontSize(12),
rich: {
a: {
color: '#12CDA2',
fontSize: fontSize(16)
}
}
}
},
{
text: <%=zlzgl%> + '{a|%}',
top: fontSize(40),
left: 'center',
textStyle: {
color: '#FFA602',
fontSize: fontSize(16),
rich: {
a: {
color: '#FFFFFF',
fontWight: 1,
fontSize: fontSize(10),
lineHeight: fontSize(20)
}
}
}
}
],
series: [
{
center: ['50%', fontSize(50)],
name: '',
type: 'pie',
radius: ['40%', '50%'],
avoidLabelOverlap: false,
labelLine: {
show: false
},
data: [
{ value: <%=zlzgl%>, itemStyle: { color: '#FFA602' } },
{ value: <%=zgzglDataValue%>, itemStyle: { color: '#2A396A' } },
],
}
]
};
var aPassChart = echarts.init(document.getElementById('zlmap'));
aPassChart.setOption(AOption1);
}
// 一次共检合格率
ycmap()
function ycmap() {
let allNumber = 70 // 总计
let finishNumber = 360 // 完成的数量
let zg = 72
let AOption1 = {
title: [
{
text: '一次共检合格率',
bottom: fontSize(30),
left: 'center',
textStyle: {
color: '#63CAFF',
fontSize: fontSize(12)
}
},
{
text: '总计 ' + '{a|' + <%=zlgjallNumber%> + '}',
bottom: fontSize(4),
left: 'left',
textStyle: {
color: '#63CAFF',
fontSize: fontSize(12),
rich: {
a: {
color: '#00FFFF',
fontSize: fontSize(16)
}
}
}
},
{
text: '合格 ' + '{a|' + <%=zlgjfinishNumber%> + '}',
bottom: fontSize(4),
left: '50%',
textStyle: {
color: '#63CAFF',
fontSize: fontSize(12),
rich: {
a: {
color: '#12CDA2',
fontSize: fontSize(16)
}
}
}
},
{
text: <%=zlgjzgl%> + '{a|%}',
top: fontSize(40),
left: 'center',
textStyle: {
color: '#FFA602',
fontSize: fontSize(16),
rich: {
a: {
color: '#FFFFFF',
fontWight: 1,
fontSize: fontSize(10),
lineHeight: fontSize(20)
}
}
}
}
],
series: [
{
center: ['50%', fontSize(50)],
name: '',
type: 'pie',
radius: ['40%', '50%'],
avoidLabelOverlap: false,
labelLine: {
show: false
},
data: [
{ value: <%=zlgjzgl%>, itemStyle: { color: '#FFA602' } },
{ value: <%=zggjzglDataValue%>, itemStyle: { color: '#2A396A' } },
],
}
]
};
var aPassChart = echarts.init(document.getElementById('ycmap'));
aPassChart.setOption(AOption1);
}
// 焊接一次合格率
hjmap()
function hjmap() {
let allNumber = 70 // 总计
let finishNumber = 360 // 完成的数量
let zg = 72
let AOption1 = {
title: [
{
text: '焊接一次合格率',
bottom: fontSize(30),
left: 'center',
textStyle: {
color: '#63CAFF',
fontSize: fontSize(12)
}
},
{
text: '总计 ' + '{a|' + <%=hjallNumber%> + '}',
bottom: fontSize(4),
left: 'left',
textStyle: {
color: '#63CAFF',
fontSize: fontSize(12),
rich: {
a: {
color: '#00FFFF',
fontSize: fontSize(16)
}
}
}
},
{
text: '合格 ' + '{a|' + <%=hjfinishNumber%> + '}',
bottom: fontSize(4),
left: '50%',
textStyle: {
color: '#63CAFF',
fontSize: fontSize(12),
rich: {
a: {
color: '#12CDA2',
fontSize: fontSize(16)
}
}
}
},
{
text: <%=hjzgl%> + '{a|%}',
top: fontSize(40),
left: 'center',
textStyle: {
color: '#FFA602',
fontSize: fontSize(16),
rich: {
a: {
color: '#FFFFFF',
fontWight: 1,
fontSize: fontSize(10),
lineHeight: fontSize(20)
}
}
}
}
],
series: [
{
center: ['50%', fontSize(50)],
name: '',
type: 'pie',
radius: ['40%', '50%'],
avoidLabelOverlap: false,
labelLine: {
show: false
},
data: [
{ value: <%=hjzgl%> , itemStyle: { color: '#FFA602' } },
{ value: <%=hjDataValue%> , itemStyle: { color: '#2A396A' } },
],
}
]
};
var aPassChart = echarts.init(document.getElementById('hjmap'));
aPassChart.setOption(AOption1);
}
// 准点率
zhglmap()
function zhglmap() {
let value = 72
let AOption1 = {
series: [
{
center: ['50%', '50%'],
id: '准点率',
radius: '75%',
type: 'gauge',
startAngle: 225,
endAngle: -45,
roundCap: true,
pointer: {
show: false,
},
progress: {
show: true,
overlap: false,
roundCap: true, // 顶端圆角
clip: false,
},
axisLine: {
roundCap: true,
lineStyle: {
width: fontSize(16),
color: [[1, '#2A396A']],
// shadowColor: '#1C466C',
// shadowBlur: 10,
}
},
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: '#0066FF'
},
{
offset: 1,
color: '#00F0FF'
}
]),
},
splitLine: {
show: false,
distance: 0,
length: fontSize(20)
},
axisTick: {
show: false
},
axisLabel: {
show: false,
},
data: [
{
value: <%=gjsxZdl%>,
name: '准点率',
title: {
color: '#63CAFF',
offsetCenter: ['0%', '60%'],
fontSize: fontSize(12)
},
detail: {
valueAnimation: true,
offsetCenter: ['0%', '0%'],
}
}
],
detail: {
offsetCenter: ['0%', '120%'],
fontSize: fontSize(28),
color: '#00FFFF',
formatter: '{value}{a|%}',
rich: {
a: {
fontSize: fontSize(14),
color: '#00FFFF'
}
}
}
}
]
};
var aPassChart = echarts.init(document.getElementById('zglmap'));
aPassChart.setOption(AOption1);
}
// 人员信息
rymap()
function rymap() {
let value = [<%=ProjectPersonCount%>]
let label = [<%=ProjectPersonMc%>]
let opt = {
grid: {
top: fontSize(30),
bottom: fontSize(40)
},
xAxis: {
type: 'category',
data: label,
axisLabel: {
color: '#3FB0FF'
},
axisLine: {
show: false,
lineStyle: {
color: '#84D7FE'
}
},
axisTick: {
show: false
}
},
yAxis: {
type: 'value',
axisLabel: {
color: '#3FB0FF'
},
splitLine: {
show: true,
lineStyle: {
color: '#1B538B',
type: 'dashed'
}
}
},
series: [
{
name: '',
data: value,
type: 'bar',
barWidth: fontSize(20),
itemStyle: {
color: '#38ECC3'
},
label: {
// 柱图头部显示值
show: true,
position: "top",
color: "#ffffff",
fontSize: fontSize(10),
formatter: (params) => {
//return params.value[params.encode.x[0]];
return params.value;
},
},
}
]
};
var aPassChart = echarts.init(document.getElementById('rymap'));
aPassChart.setOption(opt);
}
// 进度情况
jdmap()
function jdmap() {
let value = [<%=ProjectJd%>]
let label = [<%=ProjectMc %>]
let opt = {
legend: {
top: fontSize(10),
left: 'center',
data: [{ name: '进度统计', textStyle: { color: '#63CAFF' } }, { name: '进度百分比', textStyle: { color: '#12CDA2' } }]
},
grid: {
top: fontSize(60),
bottom: fontSize(40)
},
xAxis: {
type: 'category',
data: label,
axisLabel: {
color: '#3FB0FF'
},
axisLine: {
show: false,
lineStyle: {
color: '#84D7FE'
}
},
axisTick: {
show: false
}
},
yAxis: {
type: 'value',
axisLabel: {
color: '#3FB0FF'
},
splitLine: {
show: true,
lineStyle: {
color: '#1B538B',
type: 'dashed'
}
}
},
series: [
{
name: '进度统计',
data: value,
type: 'bar',
barWidth: fontSize(20),
itemStyle: {
color: '#63CAFF'
},
label: {
// 柱图头部显示值
show: true,
position: "top",
color: "#ffffff",
fontSize: fontSize(10),
formatter: (params) => {
console.log(params.value);
return params.value;
},
},
},
{
name: '进度百分比',
data: value,
type: 'line',
barWidth: fontSize(20),
itemStyle: {
color: '#6BD98D'
},
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: '#6BD98D'
}, // %0的颜色值
{
offset: 1,
color: 'rgba(107, 217, 141, 0)'
} // 100%的颜色值
])
},
}
]
};
var aPassChart = echarts.init(document.getElementById('jdmap'));
aPassChart.setOption(opt);
}
// 创建地图
//myWorldMap()
function myWorldMap() {
map = new BMapGL.Map("y_map")
map.centerAndZoom(new BMapGL.Point(118.5, 27.5), 4)
map.enableScrollWheelZoom(true)
map.setMapType(BMAP_EARTH_MAP)
map.setDisplayOptions({
skyColors: ['rgba(186, 0, 255, 0)', 'rgba(186, 0, 255, 0.2)']
})
createPont()
}
// 创建图表标记
function createPont(obj = { projectName: '项目名称', startTime: '2023-11-22', endTime: '2023-11-22', residue: 360, progress: 80, url: 'https://www.baidu.com/', lng: 116.404, lat: 39.915 }) {
let str = ` <div class="y_mark_info">
<div class="title">${obj.projectName}</div>
<div class="row y_row"><div class="label">开工日期</div><div class="value">${obj.startTime}</div></div>
<div class="row y_row"><div class="label">完工日期</div><div class="value">${obj.endTime}</div></div>
<div class="row y_row"><div class="label">剩余天数</div><div class="value">${obj.residue}天</div></div>
<div class="row y_row"><div class="label">进度</div><div class="value">${obj.progress}%</div></div>
<a class="row_more" href='${obj.url}' data-id='${obj.id}'>项目详情</a>
</div>`
var point = new BMapGL.Point(obj.lng, obj.lat);
var marker = new BMapGL.Marker(point); // 创建标注
map.addOverlay(marker);
var infoWindow = new BMapGL.InfoWindow(str, { enableMessage: false });
marker.addEventListener("click", function () {
map.openInfoWindow(infoWindow, point); //开启信息窗口
});
}
</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>