996 lines
46 KiB
Plaintext
996 lines
46 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" />
|
||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||
<meta name="viewport" content="initial-scale=scale,maximum-scale=scale,minimum-scale=scale,user-scalable=no" />
|
||
<title>首页</title>
|
||
<link href="../res/indexv1/iconfont/iconfont.css" rel="stylesheet" />
|
||
<link href="../res/indexv1/css/video-7.15.0.min.css" rel="stylesheet" />
|
||
<link href="../res/indexv1/css/index1.css" rel="stylesheet" />
|
||
<style type="text/css">
|
||
html {
|
||
min-height: 700px;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="sd-index1-body">
|
||
<div class="sd-body">
|
||
<div class="sd-body-left">
|
||
<div class="sd-section">
|
||
<div class="sd-section-title ellipsis">人员统计</div>
|
||
<div class="sd-section-content">
|
||
<div class="sd-section1-inner">
|
||
<div class="sd-user-calc">
|
||
<div class="sd-user-calc-left">
|
||
<div class="sd-user-calc-item">
|
||
<div class="sd-user-calc-label">
|
||
<span>管理人员</span>
|
||
</div>
|
||
<div class="sd-user-calc-value"><span class="sd-security-ratio-value--blue" runat="server" id="divGLPerson">0</span><span>个</span></div>
|
||
</div>
|
||
<div class="sd-user-calc-item">
|
||
<div class="sd-user-calc-label">
|
||
<span>作业人员</span>
|
||
</div>
|
||
<div class="sd-user-calc-value"><span class="sd-security-ratio-value--blue" runat="server" id="divZYPerson">0</span><span>个</span></div>
|
||
</div>
|
||
</div>
|
||
<div class="sd-user-calc-right">
|
||
<canvas id="circleId" data-value="0" class="sd-user-calc-circle" width="110" height="110"></canvas>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="sd-section">
|
||
<div class="sd-section-title ellipsis">产值统计</div>
|
||
<div class="sd-section-content">
|
||
<div class="sd-section2-inner">
|
||
<div class="sd-output-box" id="outputId"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="sd-section">
|
||
<div class="sd-section-title ellipsis">进度统计</div>
|
||
<div class="sd-section-content sd-section-content-scroll">
|
||
<div class="sd-section3-inner" id='section3-inner-div'>
|
||
<div class="el-scrollbar">
|
||
<div class="sd-rate-list el-scrollbar__wrap">
|
||
</div>
|
||
<div class="el-scrollbar__bar is-vertical">
|
||
<div class="el-scrollbar__thumb" style="transform: translateY(0%); height: 20.5682%;"></div>
|
||
</div>
|
||
<div class="el-scrollbar__bar is-horizontal">
|
||
<div class="el-scrollbar__thumb" style="transform: translateX(0%);"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="sd-body-center">
|
||
<div class="sd-body-menus">
|
||
<div class="sd-body-menu">
|
||
<div class="sd-body-menu-label">在建项目(个)</div>
|
||
<div class="sd-body-menu-value sd-body-menu-value--yellow" runat="server" id="divProjectNum">0</div>
|
||
</div>
|
||
<div class="sd-body-menu">
|
||
<div class="sd-body-menu-label">
|
||
<div class="sd-body-menu-label-first">年度累计</div>
|
||
<div class="sd-body-menu-label-sec">施工计划产值(亿元)</div>
|
||
</div>
|
||
<div class="sd-body-menu-value" runat="server" id="divYearPlanOutPutValue">--</div>
|
||
</div>
|
||
<div class="sd-body-menu">
|
||
<div class="sd-body-menu-label">
|
||
<div class="sd-body-menu-label-first">年度累计</div>
|
||
<div class="sd-body-menu-label-sec">施工实际产值(亿元)</div>
|
||
</div>
|
||
<div class="sd-body-menu-value" runat="server" id="divYearActualOutPutValue">--</div>
|
||
</div>
|
||
<div class="sd-body-menu">
|
||
<div class="sd-body-menu-label">
|
||
<div class="sd-body-menu-label-first">年度累计</div>
|
||
<div class="sd-body-menu-label-sec">签订合同额(亿元)</div>
|
||
</div>
|
||
<div class="sd-body-menu-value" runat="server" id="divHTAmount">0</div>
|
||
</div>
|
||
<div class="sd-body-menu">
|
||
<div class="sd-body-menu-label">
|
||
<div class="sd-body-menu-label-first">年度累计</div>
|
||
<div class="sd-body-menu-label-sec">施工分包合同(个)</div>
|
||
</div>
|
||
<div class="sd-body-menu-value sd-body-menu-value--yellow" runat="server" id="divHTNum">0</div>
|
||
</div>
|
||
</div>
|
||
<div class="sd-body-map">
|
||
<div class="sd-body-map-switch-btn"><span>中国地图</span><i class="iconfont icon-switch"></i></div>
|
||
<div class="js-echarts-map">
|
||
<div class="map">
|
||
<div class="sd-map" style="width: 100%; height: 650px;"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="sd-body-right">
|
||
<div class="sd-section">
|
||
<div class="sd-section-title ellipsis">安全统计</div>
|
||
<div class="sd-section-content">
|
||
<div class="sd-section4-inner">
|
||
<div class="sd-security">
|
||
<div class="sd-security-label">安全人工时</div>
|
||
<div class="sd-security-value" runat="server" id="divSafeWorkTime">0</div>
|
||
</div>
|
||
<div class="sd-security-ratios">
|
||
<div class="sd-security-ratio">
|
||
<div class="sd-security-ratio-value">
|
||
<span
|
||
class="sd-security-ratio-value--yellow" runat="server" id="divAllRectify">0</span><span>个</span>
|
||
</div>
|
||
<div class="sd-security-ratio-label">问题总数</div>
|
||
</div>
|
||
<div class="sd-security-ratio">
|
||
<div class="sd-security-ratio-value">
|
||
<span
|
||
class="sd-security-ratio-value--blue" runat="server" id="divRectifyRate">0</span><span>%</span>
|
||
</div>
|
||
<div class="sd-security-ratio-label">整改率</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="sd-section">
|
||
<div class="sd-section-title ellipsis">质量统计</div>
|
||
<div class="sd-section-content">
|
||
<div class="sd-section5-inner">
|
||
<div class="sd-quality">
|
||
<div class="sd-quality-num">
|
||
问题总数<span runat="server" id="divCQMSAllNum">0</span><em>个</em>
|
||
</div>
|
||
</div>
|
||
<div class="sd-quality-circles">
|
||
<div class="sd-quality-circle">
|
||
<!-- <canvas id="circleId1" data-value="35.7" width="116" height="116"></canvas> -->
|
||
<canvas id="circleId1" data-value="0" width="100" height="100"></canvas>
|
||
<div class="sd-quality-circle-name">整改率</div>
|
||
</div>
|
||
<div class="sd-quality-circle">
|
||
<!-- <canvas id="circleId2" data-value="98.2" width="116" height="116"></canvas> -->
|
||
<canvas id="circleId2" data-value="0" width="100" height="100"></canvas>
|
||
<div class="sd-quality-circle-name">合格率</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="sd-section">
|
||
<div class="sd-section-title ellipsis">视频监控</div>
|
||
<div class="sd-section-content">
|
||
<div class="sd-section6-inner">
|
||
<div class="sd-video-play">
|
||
<video preload="none" class="sd-video video-js vjs-big-play-centered" controls poster="">
|
||
<source src="https://c.sedin.com/sggl/FileUpload/HazardRegister/2021-08/9c174c0e-8beb-4b41-858b-4b29f66bde97.mp4">
|
||
</source>
|
||
</video>
|
||
<div class="sd-video-desc">
|
||
<span>实时线路：线路1</span>
|
||
<span>2020-10-10 12:40:26</span>
|
||
</div>
|
||
</div>
|
||
<div class="sd-video-items">
|
||
<div class="sd-video-item">
|
||
<div class="sd-video-item-num sd-video-item-num--blue">6</div>
|
||
<div class="sd-video-item-desc">总数</div>
|
||
</div>
|
||
<div class="sd-video-item">
|
||
<div class="sd-video-item-num sd-video-item-num--green">4</div>
|
||
<div class="sd-video-item-desc">在线</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</body>
|
||
<script type="text/javascript" src="../res/indexv1/js/jquery-2.1.1.min.js"></script>
|
||
<script type="text/javascript" src="../res/indexv1/js/jquery.mousewheel.min.js"></script>
|
||
<script type="text/javascript" src="../res/indexv1/js/hScrollPane.js"></script>
|
||
<script type="text/javascript" src="../res/indexv1/js/echarts-5.2.0.min.js"></script>
|
||
<script type="text/javascript" src="../res/indexv1/js/video-7.15.0.min.js"></script>
|
||
<script type="text/javascript" src="../res/indexv1/js/draw-circle.js"></script>
|
||
<script type="text/javascript" src="../res/indexv1/js/china.js"></script>
|
||
<script type="text/javascript" src="../res/indexv1/js/world.js"></script>
|
||
<script type="text/javascript">
|
||
var onDutyRate = '<%=OnDutyRate %>'
|
||
var cRectificationRate = '<%=CRectificationRate %>'
|
||
var cQualifiedRate = '<%=CQualifiedRate %>'
|
||
function getValues() {
|
||
$('#circleId').attr('data-value', onDutyRate);
|
||
$('#circleId1').attr('data-value', cRectificationRate);
|
||
$('#circleId2').attr('data-value', cQualifiedRate);
|
||
}
|
||
getValues();
|
||
</script>
|
||
<script type="text/javascript">
|
||
var xAxisDataBarEchart = ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'];
|
||
var monthPlanOutPutValue = JSON.parse('<%=MonthPlanOutPutValue %>')
|
||
var monthActualOutPutValue = JSON.parse('<%=MonthActualOutPutValue %>')
|
||
var seriesBarEchart =[
|
||
{
|
||
name: '计划值',
|
||
type: 'bar',
|
||
barWidth: 12,
|
||
data: monthPlanOutPutValue,
|
||
},
|
||
{
|
||
name: '实际值',
|
||
type: 'bar',
|
||
barWidth: 12,
|
||
data: monthActualOutPutValue,
|
||
},
|
||
]
|
||
function initBarEchart() {
|
||
var chartDom = document.getElementById('outputId');
|
||
var myChart = echarts.init(chartDom);
|
||
var option;
|
||
option = {
|
||
dataZoom: [{
|
||
type: 'slider',
|
||
show: true,
|
||
startValue: 0,
|
||
endValue: 5,
|
||
height: '3',
|
||
backgroundColor: 'rgba(47,69,84,0)',
|
||
fillerColor: 'rgba(47,69,84,0)',
|
||
bottom: '0%',
|
||
zoomLock: true,
|
||
moveOnMouseWheel: true,
|
||
brushSelect: true,
|
||
showDetail: false,
|
||
}],
|
||
color: ['#12CDA2', '#FFC277', '#00AAFF'],
|
||
grid: {
|
||
top: '5%',
|
||
left: '3%',
|
||
right: '1%',
|
||
bottom: '3%',
|
||
containLabel: true
|
||
},
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
showDelay: 0,
|
||
axisPointer: {
|
||
type: 'shadow'
|
||
}
|
||
},
|
||
xAxis: {
|
||
data: xAxisDataBarEchart,
|
||
axisLabel: {
|
||
color: '#00beff',
|
||
},
|
||
axisTick: {
|
||
show: false,
|
||
},
|
||
axisLine: {
|
||
onZero: true,
|
||
lineStyle: {
|
||
color: '#00beff',
|
||
width: 1,
|
||
}
|
||
},
|
||
boundaryGap: true
|
||
},
|
||
yAxis: {
|
||
type: 'value',
|
||
axisLabel: {
|
||
show: true,
|
||
color: '#00beff',
|
||
},
|
||
axisTick: {
|
||
show: false,
|
||
},
|
||
splitLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
type: 'dashed',
|
||
color: '#0D3C65',
|
||
},
|
||
},
|
||
splitNumber: 5,
|
||
},
|
||
series: seriesBarEchart
|
||
};
|
||
option && myChart.setOption(option);
|
||
|
||
window.addEventListener("resize", function () {
|
||
myChart.resize();
|
||
});
|
||
}
|
||
|
||
function initCircle() {
|
||
// 一个环形
|
||
var circleOneOption = {
|
||
drawing_elem: 'circleId',
|
||
bordercolor: '#12cda2',
|
||
borderwidth: 1,
|
||
percentfontsize: 22,
|
||
unitfontsize: 18,
|
||
lineWidth: 16,
|
||
addLeft: 4,
|
||
percentfontcolor: "#12cda2",
|
||
unitfontcolor: '#12cda2',
|
||
forecolor: '#12cda2',
|
||
unitadd: 1,
|
||
title: '在岗率',
|
||
titlefontcolor: '#12cda2',
|
||
titlefontsize: 9,
|
||
}
|
||
var $itemPW = $('.sd-section .sd-user-calc');
|
||
var itemPW = $itemPW.width()
|
||
var $itemPPW = $('.sd-section .sd-user-calc .sd-user-calc-left');
|
||
var itemPPW = $itemPPW.width()
|
||
var itemPPWPadding = ($itemPPW.innerWidth() - itemPPW) / 2
|
||
var itemPPWW = $('.sd-section .sd-user-calc .sd-user-calc-left .sd-user-calc-item').eq(0).innerWidth()
|
||
// 通过改变差值来决定圈的宽度,itemWMin为最新值
|
||
var itemW = (itemPW - itemPPWPadding - itemPPWW) / 3 * 2;
|
||
var itemWMin = 120
|
||
if (itemW > itemWMin) {
|
||
$('#circleId').attr('width', itemW).attr('height', itemW);
|
||
circleOneOption.percentfontsize = (itemW * 22 / itemWMin).toFixed() - 0
|
||
circleOneOption.unitfontsize = (itemW * 18 / itemWMin).toFixed() - 0
|
||
circleOneOption.titlefontsize = 16
|
||
}
|
||
console.log(itemPW, itemW, circleOneOption)
|
||
drawCircle(circleOneOption);
|
||
// 两个环形
|
||
var circleTwoOption = {
|
||
drawing_elem: 'circleId1',
|
||
percentfontsize: 22,
|
||
unitfontsize: 18,
|
||
lineWidth: 10,
|
||
addLeft: 4,
|
||
percentfontcolor: "#ffb260",
|
||
bgcolor: '#0F2164',
|
||
forecolor: '#ffb260',
|
||
unitfontcolor: '#1ab1ff',
|
||
lineGap: 'round',
|
||
unitadd: -1,
|
||
}
|
||
|
||
var $itemInner = $('.sd-section5-inner')
|
||
var $itemInnerTop = $('.sd-section5-inner .sd-quality')
|
||
var heightTemp = $itemInner.height() - $itemInnerTop.height()
|
||
var $itemTW = $('.sd-quality-circles');
|
||
var itemTW = ($itemTW.width() / 2 / 3 * 2).toFixed() - 20
|
||
var itemTH = $itemTW.height()
|
||
console.log(itemTW, heightTemp)
|
||
if (itemTW > heightTemp) {
|
||
itemTW = heightTemp
|
||
}
|
||
// 通过改变差值来决定圈的宽度
|
||
var itemW = itemTW
|
||
var itemWMin = 100
|
||
if (itemW > itemWMin) {
|
||
$('#circleId1').attr('width', itemW).attr('height', itemW);
|
||
circleTwoOption.percentfontsize = (itemW * 22 / itemWMin).toFixed() - 0
|
||
circleTwoOption.unitfontsize = (itemW * 18 / itemWMin).toFixed() - 0
|
||
}
|
||
var circleThreeOption = {
|
||
drawing_elem: 'circleId2',
|
||
percentfontsize: 22,
|
||
unitfontsize: 18,
|
||
lineWidth: 10,
|
||
addLeft: 4,
|
||
percentfontcolor: "#12cda2",
|
||
bgcolor: '#0F2164',
|
||
forecolor: '#12cda2',
|
||
unitfontcolor: '#1ab1ff',
|
||
lineGap: 'round',
|
||
unitadd: -1,
|
||
}
|
||
if (itemW > itemWMin) {
|
||
$('#circleId2').attr('width', itemW).attr('height', itemW);
|
||
circleThreeOption.percentfontsize = (itemW * 22 / itemWMin).toFixed() - 0
|
||
circleThreeOption.unitfontsize = (itemW * 18 / itemWMin).toFixed() - 0
|
||
}
|
||
console.log(itemTW, itemTH, itemW, circleThreeOption)
|
||
|
||
drawCircle(circleTwoOption);
|
||
drawCircle(circleThreeOption);
|
||
}
|
||
|
||
// 地图点
|
||
var mapProjectPoint = JSON.parse('<%=ProjectInfo %>')
|
||
function initMapEchart() {
|
||
// 1. 实例化对象
|
||
myMapChart = echarts.init(document.querySelector(".sd-map"));
|
||
// 2. 指定配置和数据
|
||
var chinaMapCoordCity = ["上海", "东莞", "东营", "中山", "临汾", "临沂", "丹东", "丽水", "乌鲁木齐", "佛山", "保定", "兰州", "包头", "北京", "北海", "南京", "南宁", "南昌", "南通"
|
||
, "厦门", "台州", "合肥", "呼和浩特", "咸阳", "哈尔滨", "唐山", "嘉兴", "大同", "大连", "天津", "太原", "威海", "宁波", "宝鸡"
|
||
, "宿迁", "常州", "广州", "廊坊", "延安", "张家口", "徐州", "德州", "惠州", "成都", "扬州", "承德", "拉萨", "无锡", "日照"
|
||
, "昆明", "杭州", "枣庄", "柳州", "株洲", "武汉", "汕头", "江门", "沈阳", "沧州", "河源", "泉州", "泰安", "泰州", "济南", "济宁"
|
||
, "海口", "淄博", "淮安", "深圳", "清远", "温州", "渭南", "湖州", "湘潭", "滨州", "潍坊", "烟台", "玉溪", "珠海", "盐城", "盘锦"
|
||
, "石家庄", "福州", "秦皇岛", "绍兴", "聊城", "肇庆", "舟山", "苏州", "莱芜", "菏泽", "营口", "葫芦岛", "衡水", "衢州", "西宁"
|
||
, "西安", "贵阳", "连云港", "邢台", '郑州', '鄂尔多斯', '重庆', '金华', '铜川', '银川', '镇江', '长春', '长沙', '长治', '阳泉', '青岛', '韶关']
|
||
|
||
var chinaMapCity = ["新疆", "内蒙古", "黑龙江", "吉林", '辽宁', '北京', '天津', '河北', '山西', '山东', '宁夏', '青海', '甘肃', '河南', '陕西', '江苏', '安徽'
|
||
, "湖北", "四川", "上海", "浙江", '西藏', '湖南', '重庆', '江西', '贵州', '云南', '福建', '台湾', '广东', '广西', '香港', '澳门', '海南', '南海诸岛']
|
||
|
||
var chinaMapCityColor = {
|
||
"新疆": '#D5EAFF',
|
||
"内蒙古": '#D5EAFF',
|
||
"黑龙江": '#D7EDE1',
|
||
"吉林": '#FEFFD8',
|
||
'辽宁': '#FEDDE8',
|
||
'北京': '#D7EDE1',
|
||
'天津': '#D7EDE1',
|
||
'河北': '#FEFFD8',
|
||
'山西': '#D7EDE1',
|
||
'山东': '#D7EDE1',
|
||
'宁夏': '#FEDDE8',
|
||
'青海': '#FEDDE8',
|
||
'甘肃': '#FEFFD8',
|
||
'河南': '#FEDDE8',
|
||
'陕西': '#FEDDE8',
|
||
'江苏': '#D5EAFF',
|
||
'安徽': '#FEDDE8',
|
||
"湖北": '#FEFFD8',
|
||
"四川": '#D7EDE1',
|
||
"上海": '#FEFFD8',
|
||
"浙江": '#FEDDE8',
|
||
'西藏': '#FEFFD8',
|
||
'湖南': '#D5EAFF',
|
||
'重庆': '#FEDDE8',
|
||
'江西': '#D7EDE1',
|
||
'贵州': '#FEFFD8',
|
||
'云南': '#FEDDE8',
|
||
'福建': '#D5EAFF',
|
||
'台湾': '#FEDDE8',
|
||
'广东': '#FEDDE8',
|
||
'广西': '#D7EDE1',
|
||
'香港': '#FEDDE8',
|
||
'澳门': '#FEDDE8',
|
||
'海南': '#FEDDE8',
|
||
'南海诸岛': '#EEEEEE'
|
||
}
|
||
|
||
// 2. 指定配置和数据
|
||
var geoCoordMap = {
|
||
上海: [121.4648, 31.2891],
|
||
东莞: [113.8953, 22.901],
|
||
东营: [118.7073, 37.5513],
|
||
中山: [113.4229, 22.478],
|
||
临汾: [111.4783, 36.1615],
|
||
临沂: [118.3118, 35.2936],
|
||
丹东: [124.541, 40.4242],
|
||
丽水: [119.5642, 28.1854],
|
||
乌鲁木齐: [87.9236, 43.5883],
|
||
佛山: [112.8955, 23.1097],
|
||
保定: [115.0488, 39.0948],
|
||
兰州: [103.5901, 36.3043],
|
||
包头: [110.3467, 41.4899],
|
||
北京: [116.4551, 40.2539],
|
||
北海: [109.314, 21.6211],
|
||
南京: [118.8062, 31.9208],
|
||
南宁: [108.479, 23.1152],
|
||
南昌: [116.0046, 28.6633],
|
||
南通: [121.1023, 32.1625],
|
||
厦门: [118.1689, 24.6478],
|
||
台州: [121.1353, 28.6688],
|
||
合肥: [117.29, 32.0581],
|
||
呼和浩特: [111.4124, 40.4901],
|
||
咸阳: [108.4131, 34.8706],
|
||
哈尔滨: [127.9688, 45.368],
|
||
唐山: [118.4766, 39.6826],
|
||
嘉兴: [120.9155, 30.6354],
|
||
大同: [113.7854, 39.8035],
|
||
大连: [122.2229, 39.4409],
|
||
天津: [117.4219, 39.4189],
|
||
太原: [112.3352, 37.9413],
|
||
威海: [121.9482, 37.1393],
|
||
宁波: [121.5967, 29.6466],
|
||
宝鸡: [107.1826, 34.3433],
|
||
宿迁: [118.5535, 33.7775],
|
||
常州: [119.4543, 31.5582],
|
||
广州: [113.5107, 23.2196],
|
||
廊坊: [116.521, 39.0509],
|
||
延安: [109.1052, 36.4252],
|
||
张家口: [115.1477, 40.8527],
|
||
徐州: [117.5208, 34.3268],
|
||
德州: [116.6858, 37.2107],
|
||
惠州: [114.6204, 23.1647],
|
||
成都: [103.9526, 30.7617],
|
||
扬州: [119.4653, 32.8162],
|
||
承德: [117.5757, 41.4075],
|
||
拉萨: [91.1865, 30.1465],
|
||
无锡: [120.3442, 31.5527],
|
||
日照: [119.2786, 35.5023],
|
||
昆明: [102.9199, 25.4663],
|
||
杭州: [119.5313, 29.8773],
|
||
枣庄: [117.323, 34.8926],
|
||
柳州: [109.3799, 24.9774],
|
||
株洲: [113.5327, 27.0319],
|
||
武汉: [114.3896, 30.6628],
|
||
汕头: [117.1692, 23.3405],
|
||
江门: [112.6318, 22.1484],
|
||
沈阳: [123.1238, 42.1216],
|
||
沧州: [116.8286, 38.2104],
|
||
河源: [114.917, 23.9722],
|
||
泉州: [118.3228, 25.1147],
|
||
泰安: [117.0264, 36.0516],
|
||
泰州: [120.0586, 32.5525],
|
||
济南: [117.1582, 36.8701],
|
||
济宁: [116.8286, 35.3375],
|
||
海口: [110.3893, 19.8516],
|
||
淄博: [118.0371, 36.6064],
|
||
淮安: [118.927, 33.4039],
|
||
深圳: [114.5435, 22.5439],
|
||
清远: [112.9175, 24.3292],
|
||
温州: [120.498, 27.8119],
|
||
渭南: [109.7864, 35.0299],
|
||
湖州: [119.8608, 30.7782],
|
||
湘潭: [112.5439, 27.7075],
|
||
滨州: [117.8174, 37.4963],
|
||
潍坊: [119.0918, 36.524],
|
||
烟台: [120.7397, 37.5128],
|
||
玉溪: [101.9312, 23.8898],
|
||
珠海: [113.7305, 22.1155],
|
||
盐城: [120.2234, 33.5577],
|
||
盘锦: [121.9482, 41.0449],
|
||
石家庄: [114.4995, 38.1006],
|
||
福州: [119.4543, 25.9222],
|
||
秦皇岛: [119.2126, 40.0232],
|
||
绍兴: [120.564, 29.7565],
|
||
聊城: [115.9167, 36.4032],
|
||
肇庆: [112.1265, 23.5822],
|
||
舟山: [122.2559, 30.2234],
|
||
苏州: [120.6519, 31.3989],
|
||
莱芜: [117.6526, 36.2714],
|
||
菏泽: [115.6201, 35.2057],
|
||
营口: [122.4316, 40.4297],
|
||
葫芦岛: [120.1575, 40.578],
|
||
衡水: [115.8838, 37.7161],
|
||
衢州: [118.6853, 28.8666],
|
||
西宁: [101.4038, 36.8207],
|
||
西安: [109.1162, 34.2004],
|
||
贵阳: [106.6992, 26.7682],
|
||
连云港: [119.1248, 34.552],
|
||
邢台: [114.8071, 37.2821],
|
||
邯郸: [114.4775, 36.535],
|
||
郑州: [113.4668, 34.6234],
|
||
鄂尔多斯: [108.9734, 39.2487],
|
||
重庆: [107.7539, 30.1904],
|
||
金华: [120.0037, 29.1028],
|
||
铜川: [109.0393, 35.1947],
|
||
银川: [106.3586, 38.1775],
|
||
镇江: [119.4763, 31.9702],
|
||
长春: [125.8154, 44.2584],
|
||
长沙: [113.0823, 28.2568],
|
||
长治: [112.8625, 36.4746],
|
||
阳泉: [113.4778, 38.0951],
|
||
青岛: [120.4651, 36.3373],
|
||
韶关: [113.7964, 24.7028],
|
||
};
|
||
|
||
var series = [
|
||
{
|
||
name: "china map",
|
||
type: "effectScatter",
|
||
coordinateSystem: "geo",
|
||
rippleEffect: {
|
||
brushType: "stroke",
|
||
},
|
||
itemStyle: {
|
||
normal: {
|
||
color: "#FFFC00",
|
||
},
|
||
},
|
||
data: mapProjectPoint
|
||
},
|
||
];
|
||
|
||
var regions = []
|
||
regions.push({
|
||
name: "南海诸岛",
|
||
itemStyle: {
|
||
normal: {
|
||
// opacity: 0,
|
||
},
|
||
},
|
||
label: {
|
||
color: "#ffffff"
|
||
}
|
||
})
|
||
|
||
//#region
|
||
|
||
for (var key in chinaMapCityColor) {
|
||
if (key == '南海诸岛') {
|
||
continue
|
||
}
|
||
regions.push({
|
||
name: key,
|
||
itemStyle: {
|
||
// areaColor: chinaMapCityColor[key],
|
||
// color: '#333333'
|
||
areaColor: '#2648A6',
|
||
//borderColor: chinaMapCityColor[key],
|
||
borderColor: 'rgba(8, 157, 212, 0.5)',
|
||
borderWidth: 1,
|
||
shadowBlur: 10,
|
||
}
|
||
})
|
||
}
|
||
// #endregion
|
||
|
||
console.log(regions)
|
||
|
||
var option = {
|
||
tooltip: {
|
||
trigger: "item",
|
||
formatter: function (params, ticket, callback) {
|
||
if (params.seriesType == "effectScatter") {
|
||
// return '标注区域：' + params.data.name;
|
||
return params.data.name;
|
||
}
|
||
},
|
||
textStyle: {
|
||
color: '#ffffff',
|
||
},
|
||
borderColor: 'rgba(71,71,226,1)',
|
||
backgroundColor: 'rgba(71,71,226,1)'
|
||
},
|
||
geo: {
|
||
top: '12%',
|
||
// layoutCenter: ['30%', '80%'],
|
||
show: true,
|
||
map: "china",
|
||
label: {
|
||
show: true, // 显示地图上城市名称
|
||
color: "#fff",
|
||
emphasis: {
|
||
show: true,
|
||
color: "#fff",
|
||
},
|
||
},
|
||
roam: false,
|
||
// aspectScale: 1,
|
||
zoom: 1.1,
|
||
itemStyle: {
|
||
normal: {
|
||
areaColor: "#2648A6", // 地图颜色
|
||
borderColor: "#089DD4",
|
||
borderWidth: 1,
|
||
// shadowBlur: 1,
|
||
shadowColor: "#1B3783",
|
||
shadowOffsetX: -11,
|
||
shadowOffsetY: 5,
|
||
opacity: 0.6,
|
||
},
|
||
emphasis: {
|
||
areaColor: "rgb(38 72 166 / 50%)",
|
||
//areaColor: '#FFDF33'
|
||
},
|
||
},
|
||
regions: regions,
|
||
},
|
||
series: series,
|
||
};
|
||
myMapChart.getZr().on('click', function (params) {
|
||
console.log('params', params)
|
||
});
|
||
|
||
myMapChart.on('click', function (param) {
|
||
//这个params可以获取你要的图中的当前点击的项的参数
|
||
console.log('myMapChart', param)
|
||
if (param.seriesType == "effectScatter" && param.data != null) {
|
||
var gotoUrl = param.data.url || 'indexProject.aspx'
|
||
top.window.location.href = '../' + gotoUrl
|
||
}
|
||
});
|
||
|
||
myMapChart.clear();
|
||
myMapChart.setOption(option);
|
||
window.addEventListener("resize", function () {
|
||
myMapChart.resize();
|
||
});
|
||
}
|
||
|
||
// 地图点
|
||
var mapProjectPoint_1 = JSON.parse('<%=ProjectInfo %>')
|
||
function initWorldMapEchart() {
|
||
// 1. 实例化对象
|
||
var myMapChart = echarts.init(document.querySelector(".sd-map"));
|
||
//
|
||
var geoCoordMap = { '阿富汗': [67.709953, 33.93911], '安哥拉': [17.873887, -11.202692], '阿尔巴尼亚': [20.168331, 41.153332], '阿联酋': [53.847818, 23.424076], '阿根廷': [-63.61667199999999, -38.416097], '亚美尼亚': [45.038189, 40.069099], '法属南半球和南极领地': [69.348557, -49.280366], '澳大利亚': [133.775136, -25.274398], '奥地利': [14.550072, 47.516231], '阿塞拜疆': [47.576927, 40.143105], '布隆迪': [29.918886, -3.373056], '比利时': [4.469936, 50.503887], '贝宁': [2.315834, 9.30769], '布基纳法索': [-1.561593, 12.238333], '孟加拉国': [90.356331, 23.684994], '保加利亚': [25.48583, 42.733883], '巴哈马': [-77.39627999999999, 25.03428], '波斯尼亚和黑塞哥维那': [17.679076, 43.915886], '白俄罗斯': [27.953389, 53.709807], '伯利兹': [-88.49765, 17.189877], '百慕大': [-64.7505, 32.3078], '玻利维亚': [-63.58865299999999, -16.290154], '巴西': [-51.92528, -14.235004], '文莱': [114.727669, 4.535277], '不丹': [90.433601, 27.514162], '博茨瓦纳': [24.684866, -22.328474], '中非共和国': [20.939444, 6.611110999999999], '加拿大': [-106.346771, 56.130366], '瑞士': [8.227511999999999, 46.818188], '智利': [-71.542969, -35.675147], '中国': [104.195397, 35.86166], '象牙海岸': [-5.547079999999999, 7.539988999999999], '喀麦隆': [12.354722, 7.369721999999999], '刚果民主共和国': [21.758664, -4.038333], '刚果共和国': [15.827659, -0.228021], '哥伦比亚': [-74.297333, 4.570868], '哥斯达黎加': [-83.753428, 9.748916999999999], '古巴': [-77.781167, 21.521757], '北塞浦路斯': [33.429859, 35.126413], '塞浦路斯': [33.429859, 35.126413], '捷克共和国': [15.472962, 49.81749199999999], '德国': [10.451526, 51.165691], '吉布提': [42.590275, 11.825138], '丹麦': [9.501785, 56.26392], '多明尼加共和国': [-70.162651, 18.735693], '阿尔及利亚': [1.659626, 28.033886], '厄瓜多尔': [-78.18340599999999, -1.831239], '埃及': [30.802498, 26.820553], '厄立特里亚': [39.782334, 15.179384], '西班牙': [-3.74922, 40.46366700000001], '爱沙尼亚': [25.013607, 58.595272], '埃塞俄比亚': [40.489673, 9.145000000000001], '芬兰': [25.748151, 61.92410999999999], '斐': [178.065032, -17.713371], '福克兰群岛': [-59.523613, -51.796253], '法国': [2.213749, 46.227638], '加蓬': [11.609444, -0.803689], '英国': [-3.435973, 55.378051], '格鲁吉亚': [-82.9000751, 32.1656221], '加纳': [-1.023194, 7.946527], '几内亚': [-9.696645, 9.945587], '冈比亚': [-15.310139, 13.443182], '几内亚比绍': [-15.180413, 11.803749], '赤道几内亚': [10.267895, 1.650801], '希腊': [21.824312, 39.074208], '格陵兰': [-42.604303, 71.706936], '危地马拉': [-90.23075899999999, 15.783471], '法属圭亚那': [-53.125782, 3.933889], '圭亚那': [-58.93018, 4.860416], '洪都拉斯': [-86.241905, 15.199999], '克罗地亚': [15.2, 45.1], '海地': [-72.285215, 18.971187], '匈牙利': [19.503304, 47.162494], '印尼': [113.921327, -0.789275], '印度': [78.96288, 20.593684], '爱尔兰': [-8.24389, 53.41291], '伊朗': [53.688046, 32.427908], '伊拉克': [43.679291, 33.223191], '冰岛': [-19.020835, 64.963051], '以色列': [34.851612, 31.046051], '意大利': [12.56738, 41.87194], '牙买加': [-77.297508, 18.109581], '约旦': [36.238414, 30.585164], '日本': [138.252924, 36.204824], '哈萨克斯坦': [66.923684, 48.019573], '肯尼亚': [37.906193, -0.023559], '吉尔吉斯斯坦': [74.766098, 41.20438], '柬埔寨': [104.990963, 12.565679], '韩国': [127.766922, 35.907757], '科索沃': [20.902977, 42.6026359], '科威特': [47.481766, 29.31166], '老挝': [102.495496, 19.85627], '黎巴嫩': [35.862285, 33.854721], '利比里亚': [-9.429499000000002, 6.428055], '利比亚': [17.228331, 26.3351], '斯里兰卡': [80.77179699999999, 7.873053999999999], '莱索托': [28.233608, -29.609988], '立陶宛': [23.881275, 55.169438], '卢森堡': [6.129582999999999, 49.815273], '拉脱维亚': [24.603189, 56.879635], '摩洛哥': [-7.092619999999999, 31.791702], '摩尔多瓦': [28.369885, 47.411631], '马达加斯加': [46.869107, -18.766947], '墨西哥': [-102.552784, 23.634501], '马其顿': [21.745275, 41.608635], '马里': [-3.996166, 17.570692], '缅甸': [95.956223, 21.913965], '黑山': [19.37439, 42.708678], '蒙古': [103.846656, 46.862496], '莫桑比克': [35.529562, -18.665695], '毛里塔尼亚': [-10.940835, 21.00789], '马拉维': [34.301525, -13.254308], '马来西亚': [101.975766, 4.210484], '纳米比亚': [18.49041, -22.95764], '新喀里多尼亚': [165.618042, -20.904305], '尼日尔': [8.081666, 17.607789], '尼日利亚': [8.675277, 9.081999], '尼加拉瓜': [-85.207229, 12.865416], '荷兰': [5.291265999999999, 52.132633], '挪威': [8.468945999999999, 60.47202399999999], '尼泊尔': [84.12400799999999, 28.394857], '新西兰': [174.885971, -40.900557], '阿曼': [55.923255, 21.512583], '巴基斯坦': [69.34511599999999, 30.375321], '巴拿马': [-80.782127, 8.537981], '秘鲁': [-75.015152, -9.189967], '菲律宾': [121.774017, 12.879721], '巴布亚新几内亚': [143.95555, -6.314992999999999], '波兰': [19.145136, 51.919438], '波多黎各': [-66.590149, 18.220833], '北朝鲜': [127.510093, 40.339852], '葡萄牙': [-8.224454, 39.39987199999999], '巴拉圭': [-58.443832, -23.442503], '卡塔尔': [51.183884, 25.354826], '罗马尼亚': [24.96676, 45.943161], '俄罗斯': [105.318756, 61.52401], '卢旺达': [29.873888, -1.940278], '西撒哈拉': [-12.885834, 24.215527], '沙特阿拉伯': [45.079162, 23.885942], '苏丹': [30.217636, 12.862807], '南苏丹': [31.3069788, 6.876991899999999], '塞内加尔': [-14.452362, 14.497401], '所罗门群岛': [160.156194, -9.64571], '塞拉利昂': [-11.779889, 8.460555], '萨尔瓦多': [-88.89653, 13.794185], '索马里兰': [46.8252838, 9.411743399999999], '索马里': [46.199616, 5.152149], '塞尔维亚共和国': [21.005859, 44.016521], '苏里南': [-56.027783, 3.919305], '斯洛伐克': [19.699024, 48.669026], '斯洛文尼亚': [14.995463, 46.151241], '瑞典': [18.643501, 60.12816100000001], '斯威士兰': [31.465866, -26.522503], '叙利亚': [38.996815, 34.80207499999999], '乍得': [18.732207, 15.454166], '多哥': [0.824782, 8.619543], '泰国': [100.992541, 15.870032], '塔吉克斯坦': [71.276093, 38.861034], '土库曼斯坦': [59.556278, 38.969719], '东帝汶': [125.727539, -8.874217], '特里尼达和多巴哥': [-61.222503, 10.691803], '突尼斯': [9.537499, 33.886917], '土耳其': [35.243322, 38.963745], '坦桑尼亚联合共和国': [34.888822, -6.369028], '乌干达': [32.290275, 1.373333], '乌克兰': [31.16558, 48.379433], '乌拉圭': [-55.765835, -32.522779], '美国': [-95.712891, 37.09024], '乌兹别克斯坦': [64.585262, 41.377491], '委内瑞拉': [-66.58973, 6.42375], '越南': [108.277199, 14.058324], '瓦努阿图': [166.959158, -15.376706], '西岸': [35.3027226, 31.9465703], '也门': [48.516388, 15.552727], '南非': [22.937506, -30.559482], '赞比亚': [27.849332, -13.133897], '津巴布韦': [29.154857, -19.015438] };
|
||
var max = 480, min = 9; // todo
|
||
var maxSize4Pin = 100, minSize4Pin = 20;
|
||
var convertData = function (data) {
|
||
var res = [];
|
||
for (var i = 0; i < data.length; i++) {
|
||
var geoCoord = geoCoordMap[data[i].name];
|
||
if (geoCoord) {
|
||
res.push({
|
||
name: data[i].name,
|
||
value: geoCoord.concat(data[i].value),
|
||
});
|
||
}
|
||
}
|
||
return res;
|
||
};
|
||
|
||
var option = {
|
||
title: {
|
||
show: false,
|
||
top: 10,
|
||
text: '地图标题',
|
||
subtext: '',
|
||
x: 'center',
|
||
textStyle: {
|
||
color: '#ccc',
|
||
},
|
||
},
|
||
|
||
tooltip: {
|
||
trigger: 'item',
|
||
formatter: function (params) {
|
||
return params.name
|
||
},
|
||
textStyle: {
|
||
color: '#ffffff',
|
||
},
|
||
borderColor: 'rgba(71,71,226,1)',
|
||
backgroundColor: 'rgba(71,71,226,1)'
|
||
},
|
||
legend: {
|
||
show: false,
|
||
orient: 'vertical',
|
||
y: 'bottom',
|
||
x: 'right',
|
||
data: ['量'],
|
||
textStyle: {
|
||
color: '#fff',
|
||
},
|
||
},
|
||
visualMap: {
|
||
show: false,
|
||
min: 0,
|
||
max: 500,
|
||
left: 'left',
|
||
top: 'bottom',
|
||
text: ['高', '低'], // 文本，默认为数值文本
|
||
calculable: true,
|
||
seriesIndex: [1],
|
||
inRange: {},
|
||
},
|
||
geo: {
|
||
//top: '20%',
|
||
map: 'world',
|
||
zoom: 1.2,
|
||
show: true,
|
||
roam: false,
|
||
label: {
|
||
normal: {
|
||
show: true,
|
||
color: '#ffffff',
|
||
formatter: function (val) {
|
||
var area_content = ''
|
||
if (val && val.name) {
|
||
var tempN = mapProjectPoint_1.filter(x => x.cityname == val.name)
|
||
if (tempN.length > 0) {
|
||
area_content = val.name
|
||
}
|
||
}
|
||
return area_content
|
||
}
|
||
},
|
||
emphasis: {
|
||
show: false,
|
||
},
|
||
},
|
||
itemStyle: {
|
||
normal: {
|
||
areaColor: '#3a7fd5',
|
||
borderColor: '#0a53e9', //线
|
||
shadowColor: '#092f8f', //外发光
|
||
shadowBlur: 20,
|
||
},
|
||
emphasis: {
|
||
areaColor: '#0a2dae', //悬浮区背景
|
||
},
|
||
},
|
||
},
|
||
series: [
|
||
{
|
||
symbolSize: 5,
|
||
label: {
|
||
normal: {
|
||
formatter: '{b}',
|
||
position: 'right',
|
||
show: false,//是否显示地名
|
||
},
|
||
emphasis: {
|
||
show: true,
|
||
},
|
||
},
|
||
itemStyle: {
|
||
normal: {
|
||
color: '#fff',
|
||
},
|
||
},
|
||
name: 'light',
|
||
type: 'scatter',
|
||
coordinateSystem: 'geo',
|
||
//data: convertData(data_tmp),
|
||
data: mapProjectPoint_1
|
||
},
|
||
{
|
||
type: 'map',
|
||
map: 'china',
|
||
geoIndex: 0,
|
||
aspectScale: 0.75, //长宽比
|
||
showLegendSymbol: false, // 存在legend时显示
|
||
label: {
|
||
normal: {
|
||
show: false,
|
||
},
|
||
emphasis: {
|
||
show: false,
|
||
textStyle: {
|
||
color: '#fff',
|
||
},
|
||
},
|
||
},
|
||
roam: false,
|
||
itemStyle: {
|
||
normal: {
|
||
areaColor: '#031525',
|
||
borderColor: '#FFFFFF',
|
||
},
|
||
emphasis: {
|
||
areaColor: '#2B91B7',
|
||
},
|
||
},
|
||
animation: false,
|
||
data: mapProjectPoint_1,
|
||
//data: data_tmp,
|
||
},
|
||
{
|
||
name: 'Top 5',
|
||
type: 'effectScatter',
|
||
coordinateSystem: 'geo',
|
||
rippleEffect: {
|
||
brushType: "stroke",
|
||
},
|
||
label: {
|
||
normal: {
|
||
show: false,
|
||
textStyle: {
|
||
color: '#fff',
|
||
fontSize: 9,
|
||
},
|
||
formatter: function (value) {
|
||
return value.data.value[2];
|
||
},
|
||
},
|
||
},
|
||
itemStyle: {
|
||
normal: {
|
||
color: '#dfae10', //标志颜色
|
||
},
|
||
},
|
||
data: mapProjectPoint_1,
|
||
showEffectOn: 'render',
|
||
rippleEffect: {
|
||
brushType: 'stroke',
|
||
},
|
||
hoverAnimation: true,
|
||
zlevel: 1,
|
||
},
|
||
],
|
||
};
|
||
|
||
myMapChart.clear();
|
||
myMapChart.setOption(option);
|
||
}
|
||
|
||
$(".el-scrollbar__wrap").html("<%=projectJDHtml %>");
|
||
var Box_Height = $(".el-scrollbar").outerHeight();
|
||
var content_Height = $(".el-scrollbar__wrap").outerHeight();
|
||
var bar_Height = $(".is-vertical").outerHeight();
|
||
var isMouseDown = false;
|
||
var distance = 0;
|
||
if (content_Height > Box_Height) {
|
||
//滚动条初始高度；
|
||
var n = Box_Height / content_Height * bar_Height
|
||
$(".is-vertical .el-scrollbar__thumb").css("height", n)
|
||
$(".is-vertical").mousedown(down);
|
||
$(window).mousemove(move);
|
||
$(window).mouseup(up);
|
||
function down(event) {
|
||
isMouseDown = true;
|
||
}
|
||
|
||
function move(event) {
|
||
event.preventDefault();
|
||
distance = event.pageY - $(".is-vertical").offset().top;
|
||
if (isMouseDown == true) {
|
||
scroll(distance)
|
||
}
|
||
}
|
||
|
||
function up() {
|
||
isMouseDown = false;
|
||
$(".el-scrollbar").find(".is-vertical").css('opacity', 0);
|
||
}
|
||
}
|
||
|
||
function scroll(distance) {
|
||
if (distance < 0) {
|
||
distance = 0
|
||
} else if (distance > bar_Height - $(".is-vertical .el-scrollbar__thumb").outerHeight()) {
|
||
distance = bar_Height - $(".is-vertical .el-scrollbar__thumb").outerHeight();
|
||
}
|
||
$(".is-vertical .el-scrollbar__thumb").css("top", distance)
|
||
// 滚动距离 = 滑块移动距离 ÷ 窗口高度 x 页面长度
|
||
var scroll_distance = parseInt(distance / Box_Height * content_Height)
|
||
$(".el-scrollbar__wrap").css("margin-top", -scroll_distance)
|
||
}
|
||
|
||
function initScroll() {
|
||
|
||
$(".el-scrollbar").hover(function () {
|
||
var $this = $(this)
|
||
$this.find(".is-vertical").css('opacity', 1);
|
||
}, function () {
|
||
if (isMouseDown) {
|
||
return
|
||
}
|
||
var $this = $(this)
|
||
$this.find(".is-vertical").css('opacity', 0);
|
||
})
|
||
|
||
// 滚轮事件；
|
||
$(".el-scrollbar").bind('mousewheel', function (event, delta) {
|
||
event.preventDefault()
|
||
var dir = delta > 0 ? 'Up' : 'Down',
|
||
vel = delta
|
||
distance = $(".is-vertical .el-scrollbar__thumb").offset().top - $(".el-scrollbar").offset().top;
|
||
vel > 0 ? distance -= 10 : distance += 10
|
||
scroll(distance);
|
||
});
|
||
}
|
||
|
||
function initEvent() {
|
||
$(document).on('click', '.sd-body-map .sd-body-map-switch-btn', function () {
|
||
var $this = $(this), $item = $this.find('span')
|
||
var txt = $item.text()
|
||
if (txt == '中国地图') {
|
||
$item.text('世界地图')
|
||
initWorldMapEchart()
|
||
} else {
|
||
$item.text('中国地图')
|
||
initMapEchart()
|
||
}
|
||
})
|
||
}
|
||
|
||
$(function () {
|
||
initCircle()
|
||
initBarEchart()
|
||
initMapEchart()
|
||
if (content_Height > Box_Height) {
|
||
initScroll()
|
||
}
|
||
initEvent()
|
||
});
|
||
</script>
|
||
</html>
|