dkyChenJiang.git

			@@ -2,61 +2,265 @@
			<html lang="zh" xmlns:th="http://www.thymeleaf.org">
			<head>
			<th:block th:include="include :: header('弹层组件')" />
			<link href="../static/css/bootstrap.min.css"
			th:href="@{/css/bootstrap.min.css}" rel="stylesheet" />
			<link href="../static/css/font-awesome.min.css"
			th:href="@{/css/font-awesome.min.css}" rel="stylesheet" />
			<link href="../static/css/main/animate.min.css"
			th:href="@{/css/main/animate.min.css}" rel="stylesheet" />
			<link href="../static/css/main/style.min862f.css"
			th:href="@{/css/main/style.min862f.css}" rel="stylesheet" />
			<link href="../static/css/bootstrap.min.css" th:href="@{/css/bootstrap.min.css}" rel="stylesheet" />
			<link href="../static/css/font-awesome.min.css" th:href="@{/css/font-awesome.min.css}" rel="stylesheet" />
			<link href="../static/css/main/animate.min.css" th:href="@{/css/main/animate.min.css}" rel="stylesheet" />
			<link href="../static/css/main/style.min862f.css" th:href="@{/css/main/style.min862f.css}" rel="stylesheet" />
			<link rel="stylesheet" th:href="@{/css/custom/main.css}" />
			<th:block th:include="include :: datetimepicker-css" />
			<style type="text/css">
			.content {
			width: 100%;
			background-color: rgba(0,0,0,0.01) !important;
			}
			</style>
			<link href="../static/js/elementUI/index.css" th:href="@{/js/elementUI/index.css}" rel="stylesheet" />

			<style type="text/css">
			.content {
			width: 100%;
			background-color: rgba(0,0,0,0.01) !important;
			}
			.el-badge__content.is-fixed {
			position: absolute;
			top: 0;
			right: 0px;
			-webkit-transform: translateY(-50%) translateX(100%);
			transform: translateY(0%) translateX(100%);
			}
			.el-card__header{
			height: 40px;
			padding: 8px 20px;
			}
			.active-red{
			width: 20px;
			height: 20px;
			border-radius: 50%;
			font-size: 16px;
			color: white;
			background: #314659;
			text-align: center;
			line-height: 20px;
			float: left;
			}

			.active-blue{
			width: 2%;
			height: 10px;
			border-radius: 50%;
			font-size: 16px;
			color:blue;
			}
			.cdcode{
			width: 15%;
			float: left;
			margin-left: 10px;
			font-size: 16px;
			line-height: 20px;
			}
			.cdstatus{
			width: 15%;
			float: left;
			margin-left: 0px;
			font-size: 16px;
			line-height: 20px;
			}
			.cdprocess{
			width: 60%;
			float: left;
			margin-left: 10px;
			}
			.rankrow{
			margin-top: 15px;
			}

			</style>
			</head>

			<body class="gray-bg">
			<div class="content">
			<div class="col-sm-12">
			<div class="ibox float-e-margins">
			<div class="ibox-title">
			<h3>沉降监测网建设工程项目分布</h3>
			</div>
			<div class="ibox-content">

			<div class="row">
			<div class="col-sm-8">
			<div id="map_div" style="width: 100%;height: 750px;"></div>
			</div>

			<div class="col-sm-4">
			<div >
			<div style="width: 100%;height: 20px;">
			<h3>项目总体进度(%)</h3>
			</div>
			<div id="Chart1" style="width: 80%;height: 250px;margin-left: 10%;"></div>
			</div>

			<div >
			<div style="width: 100%;height: 20px;">
			<h3>场地详细进度(%)</h3>
			</div>
			<div style="width: 100%;height: 500px;overflow: auto">
			<div id="Chart2" style="width: 100%;height: 1500px;"></div>
			</div>

			</div>

			</div>
			<div class="content" id="app">
			<el-row style="height: 130px;">
			<el-col :span="6">
			<el-card class="box-card">
			<div>
			<span style="color:rgba(0,0,0,.65);font-size: 15px;">场地数量</span>
			<li class="el-icon-s-promotion" style="font-size: 18px;float: right;color: grey">
			</div>
			</div>
			</div>
			</div>
			<div>
			<span style="color:#000;font-size: 26px;word-break: break-all;line-height: 38px">34个
			</span>
			</div>
			<div>
			<span style="color:rgba(0,0,0,.65);font-size: 15px;">
			协调中 0
			<li class="el-icon-caret-bottom" style="color: #f56c6c">
			</span>
			<span style="color:rgba(0,0,0,.65);font-size: 15px;">
			待开工 34
			<li class="el-icon-caret-bottom" style="color: #e6a23c">
			</span>
			<span style="color:rgba(0,0,0,.65);font-size: 15px;">
			进行中 0
			<li class="el-icon-caret-top" style="color: #409eff">
			</span>

			</div>
			</el-card>
			</el-col>

			<el-col :span="6">
			<el-card class="box-card">
			<div>
			<span style="color:rgba(0,0,0,.65);font-size: 15px;">钻孔进尺</span>
			<li class="el-icon-coin" style="font-size: 18px;float: right;color: grey">
			</div>
			<div>
			<span style="color:#000;font-size: 26px;word-break: break-all;line-height: 38px">864个
			</span>
			</div>
			<div>
			<span style="color:rgba(0,0,0,.65);font-size: 15px;">
			总进尺 134,1000.00m
			<li class="el-icon-caret-bottom" style="color: #f56c6c">
			</span>
			<span style="color:rgba(0,0,0,.65);font-size: 15px;">
			已完成 12,322.23m
			<li class="el-icon-caret-bottom" style="color: #409eff">
			</span>
			</div>
			</el-card>
			</el-col>

			<el-col :span="6">
			<el-card class="box-card">
			<div>
			<span style="color:rgba(0,0,0,.65);font-size: 15px;">实时监控</span>
			<li class="el-icon-video-camera" style="font-size: 18px;float: right;color: grey">
			</div>
			<div>
			<span style="color:#000;font-size: 26px;word-break: break-all;line-height: 38px">114个
			</span>
			</div>
			<div>
			<span style="color:rgba(0,0,0,.65);font-size: 15px;">
			总进尺 134,1000.00m
			<li class="el-icon-caret-bottom" style="color: #f56c6c">
			</span>
			<span style="color:rgba(0,0,0,.65);font-size: 15px;">
			已完成 12,322.23m
			<li class="el-icon-caret-bottom" style="color: #409eff">
			</span>
			</div>
			</el-card>
			</el-col>
			<el-col :span="6">
			<el-card class="box-card">
			<div>
			<span style="color:rgba(0,0,0,.65);font-size: 15px;">资料文件</span>
			<li class="el-icon-s-order" style="font-size: 18px;float: right;color: grey">
			</div>
			<div>
			<span style="color:#000;font-size: 26px;word-break: break-all;line-height: 38px">3813
			</span>
			</div>
			<div>
			<span style="color:rgba(0,0,0,.65);font-size: 15px;">
			总进尺 134,1000.00m
			<li class="el-icon-caret-bottom" style="color: #f56c6c">
			</span>
			<span style="color:rgba(0,0,0,.65);font-size: 15px;">
			已完成 12,322.23m
			<li class="el-icon-caret-bottom" style="color: #409eff">
			</span>
			</div>

			</el-card>
			</el-col>
			</el-row>
			<el-row>
			<el-col :span="16">
			<el-card class="box-card">
			<!-- <div slot="header">-->
			<!-- -->
			<!-- </div>-->
			<div style="height: 200px;">
			<h3>材料统计</h3>
			</div>
			</el-card>

			<el-card class="box-card">
			<div id="map_div" style="width: 100%;height: 550px;"></div>
			</el-card>

			</el-col>

			<el-col :span="8">
			<el-card class="box-card">
			<div style="width: 100%;height: 20px;">
			<h3>项目总体进度(%)</h3>
			</div>
			<div id="Chart1" style="width: 80%;height: 180px;margin-left: 10%;"></div>
			</el-card>

			<el-card class="box-card">
			<div style="width: 100%;height: 20px;">
			<h3>场地详细进度(%)</h3>
			</div>
			<div style="width: 100%;height: 500px;overflow: auto">
			<!-- <div id="Chart2" style="width: 100%;height: 1500px;"></div>-->

			<el-row class="rankrow">
			<el-col :span="2">
			<div class="active-red">1</div>
			</el-col>

			<el-col :span="4">
			<div style="font-size: 16px">场地001</div>
			</el-col >

			<el-col :span="4">
			<div style="font-size: 16px">协调中</div>
			</el-col>

			<el-col :span="12">
			<div><el-progress :stroke-width="12" :percentage="50"></el-progress></div>
			</el-col>
			</el-row>
			<el-row class="rankrow">
			<el-col :span="2">
			<div class="active-red">1</div>
			</el-col>

			<el-col :span="4">
			<div style="font-size: 16px">场地002</div>
			</el-col >

			<el-col :span="4">
			<div style="font-size: 16px">协调中</div>
			</el-col>

			<el-col :span="12">
			<div><el-progress :stroke-width="12" :percentage="50"></el-progress></div>
			</el-col>
			</el-row>
			<el-row class="rankrow">
			<el-col :span="2">
			<div class="active-red">1</div>
			</el-col>

			<el-col :span="4">
			<div style="font-size: 16px">场地003</div>
			</el-col >

			<el-col :span="4">
			<div style="font-size: 16px">协调中</div>
			</el-col>

			<el-col :span="12">
			<div><el-progress :stroke-width="12" :percentage="50"></el-progress></div>
			</el-col>
			</el-row>

			</div>

			</el-card>

			</el-col>

			</el-row>

			</div>

			@@ -68,19 +272,29 @@
			<script src="http://lbs.tianditu.gov.cn/js/lib/d3/d3.min.js" type="text/javascript"></script>
			<script src="http://lbs.tianditu.gov.cn/api/js4.0/opensource/openlibrary/D3SvgOverlay.js" type="text/javascript"></script>
			<script th:src="@{/js/custom/main.js}"></script>

			<script th:src="@{/js/vue.min.js}"></script>
			<script th:src="@{/js/elementUI/index.js}"></script>

			<th:block th:include="include :: sparkline-js" />
			<th:block th:include="include :: footer" />

			<script type="text/javascript">
			<script th:inline="javascript">

			$(function() {
			loadMap();
			getReallyData();
			totalProcess();
			stationProcess();
			//getRegulatoryUnitChartData("","");
			//bindEvent();
			})
			var vm = new Vue({
			el: "#app",
			data() {
			return {};
			},
			methods: {
			}
			});
			// 加载地图
			let map=null;
			var countries = [];
			@@ -169,17 +383,23 @@
			}

			function infoWindowProject(e){

			let ids = e.ids + "";
			var sContent =
			"<div style='margin:0px;'>" +
			"<div>" +
			"<div style='margin:5px 0px 5px 5px;'>" +
			"<div style='margin:1px 0px 1px 2px;width: 200px;'>" +
			"<font style='font-weight: bolder;'>场地编号 :</font>" + e.code + "<br>" +
			"<font style='font-weight: bolder;'>场地名字 :</font>" + e.fullName + "<br>" +
			"<font style='font-weight: bolder;'>负责人 :</font>" + e.leader + "<br>" +
			"<a class='btn' onclick=viewdata(" +"'" + ids+ "'" + ")>场地数据</a>" +
			"</div>" +
			"</div>" +
			"</div>";
			return sContent;
			}
			function viewdata (id) {
			$.modal.openTab("场地导航",ctx+ "/geo/project/navigate?ids="+id);
			}

			function addClickHandler(content, marker) {
			@@ -194,47 +414,23 @@
			map.openInfoWindow(markerInfoWin, point); //开启信息窗口
			}


			// 页面数据赋值
			function pageAssignment(reallyData) {
			for ( let key in reallyData) {
			let className = "." + key;
			$(className).text(reallyData[key]);
			}
			}

			//查询监管单位项目统计图表数据
			function getRegulatoryUnitChartData(startTime,endTime){
			let url = window.location.protocol + "//" + window.location.host + "/bjfw/geotdp/index/indexProjectNumsCollect";
			$.get(url,{
			startTime: startTime,
			endTime: endTime
			},function(res){
			if(res.status && res.message === "操作成功"){
			let chartData = {};
			chartData.yData = res.result.map((item)=>{
			return item.fullName;
			})
			chartData.xData = res.result.map((item)=>{
			return item.projectNums;
			})
			loadRegulatoryUnitChart(chartData);
			}else{
			$.modal.alertError("请求出错");
			}

			})
			}

			//总进度仪表盘
			function totalProcess() {
			var Chart1 = echarts.init(document.getElementById('Chart1'));
			var pointerData = 36; // 仪表指针数据
			var pointerData = 0; // 仪表指针数据
			let url = ctx + "/system/totalProcess";
			$.ajaxSettings.async = false;
			$.get(url,{},function(res){
			pointerData = res.pointerData;
			pointerData = (pointerData*100).toFixed(0);
			})
			$.ajaxSettings.async = false;
			var option = {
			backgroundColor: "#fff",
			series: [
			{
			type: "gauge",
			radius: 120,
			radius: 80,
			z: 1,
			startAngle: 225,
			endAngle: -45,
			@@ -370,8 +566,8 @@
			}

			var datas = [
			{ ranking: 1, station: '场地001', value: 85 },
			{ ranking: 2, station: '场地002', value: 22 },
			{ ranking: 1, station: '场地001 协调中', value: 85 },
			{ ranking: 2, station: '场地002 协调中', value: 22 },
			{ ranking: 3, station: '场地003', value: 33 },
			{ ranking: 4, station: '场地004', value: 40 },
			{ ranking: 5, station: '场地005', value: 33 },
			@@ -410,12 +606,10 @@
			{ ranking: 32, station: '场地032', value: 18.48 },
			{ ranking: 33, station: '场地033', value: 13.03 },
			{ ranking: 34, station: '场地034', value: 18.48 },


			];


			var seriesName = ['',''];
			var seriesName = ['已完成进度','总进度'];
			var attackSourcesColor1 = ['#FF557F','#FFAA00','#5470C6','#1E9FFF'];

			var attackSourcesColor = [
			@@ -438,9 +632,17 @@
			];

			function stationProcess() {

			let url = ctx + "/system/projectProcess";
			$.ajaxSettings.async = false;
			$.get(url,{},function(res){
			console.log(res.projectData);
			datas = res.projectData;
			})
			$.ajaxSettings.async = false;


			var Chart2 = echarts.init(document.getElementById('Chart2'));


			var rankings = [];
			var stationData = [];
			var values = [];
			@@ -450,7 +652,6 @@
			stationData.push(it.station);
			values.push(it.value);
			});


			option = {
			// backgroundColor: '#000',
			@@ -657,192 +858,8 @@
			return false;
			}

			//加载监管单位项目统计图表
			function loadRegulatoryUnitChart(chartData){
			var myChart = echarts.init(document.getElementById('rank_chart'));

			let beginColor = "rgb(255,140,0,0.1)",
			endColor = "rgb(255,140,0,1)",
			endPix = "";
			//let endZom = 50;

			let option = {
			title: {
			show: false,
			},
			dataZoom: [
			{
			type: "inside",
			start: 0,
			// end: endZom,
			orient: "vertical",
			zoomOnMouseWheel: false, ////滚轮是否触发缩放
			},
			],
			tooltip: {
			trigger: "axis",
			axisPointer: {
			type: "shadow",
			},
			},
			legend: {
			bottom: 20,
			right: 0,
			textStyle: {
			color: "#666",
			fontSize: 18,
			},
			orient: "vertical",
			},
			grid: {
			borderWidth: 0,
			top: "8%",
			left: "1%",
			right: "8%",
			bottom: "2%",
			},
			color: "#fff",
			yAxis: [
			{
			type: "category",
			inverse: true,
			axisLine: {
			show: false,
			},
			splitLine: {
			show: false,
			},
			axisTick: {
			show: false,
			},
			axisLabel: {
			show: false,
			},
			data: chartData.yData,
			},
			],
			xAxis: {
			type: "value",
			axisTick: {
			show: false,
			},
			axisLine: {
			show: false,
			},
			splitLine: {
			show: false,
			},
			axisLabel: {
			show: false,
			},
			},
			series: [
			{
			name: "累计",
			type: "bar",
			barWidth: "10px",
			itemStyle: {
			normal: {
			show: true,
			color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
			{
			offset: 0,
			color: beginColor,
			},
			{
			offset: 1,
			color: endColor,
			},
			]),
			barBorderRadius: [0, 5, 5, 0],
			},
			emphasis: {
			shadowBlur: 15,
			shadowColor: "rgba(0, 0, 0, 0.1)",
			},
			},
			data: chartData.xData,
			animationDuration: 1500,
			label: {
			normal: {
			color: "black",
			show: true,
			position: "right",
			fontSize: 18,
			fontStyle: "italic",
			formatter: function (para) {
			return para.data + endPix;
			},
			},
			},
			},
			{
			type: "bar",
			barGap: "0",
			barWidth: 10,
			animation: false,
			itemStyle: {
			color: "transparent",
			},
			tooltip: {
			show: false,
			},
			label: {
			show: true,
			position: ["0", "-35"],
			fontSize: 13,
			color: "rgb(0,0,0,0.7)",
			formatter: function (param) {
			return param.dataIndex + 1 + " " + param.name;
			},
			},
			data: chartData.xData,
			},

			],
			animationEasing: "cubicOut",
			};

			myChart.setOption(option);
			}

			//绑定事件
			function bindEvent(){
			$(".statistic-btn .btn").on("click",function(){
			if(this.innerText === "总计"){
			getRegulatoryUnitChartData("","");
			}else if(this.innerText === "本年度"){
			let d = new Date();
			let n = d.getFullYear();
			let startTime = n + "-01-01 00:00:00";
			let endTime = n + "-12-31 23:59:59";
			getRegulatoryUnitChartData(startTime,endTime);
			}else{
			let startTime = getFirstDay() + " 00:00:00";
			let endTime = getLastDay() + " 23:59:59";
			getRegulatoryUnitChartData(startTime,endTime);
			}
			})
			}

			//获取本月第一天
			function getFirstDay(){
			var y = new Date().getFullYear(); //获取年份
			var m = new Date().getMonth() + 1; //获取月份
			var d = '01'
			m = m < 10 ? '0' + m : m; //月份补 0

			return [y,m,d].join("-")
			}
			//获取本月最后一天
			function getLastDay(){
			var y = new Date().getFullYear(); //获取年份
			var m = new Date().getMonth() + 1; //获取月份
			var d = new Date(y, m, 0).getDate(); //获取当月最后一日
			m = m < 10 ? '0' + m : m; //月份补 0
			d = d < 10 ? '0' + d : d; //日数补 0
			return [y,m,d].join("-");
			}

			</script>