dkyChenJiang.git

			@@ -2,57 +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;
			}
			[v-cloak]{
			display: none;
			}
			.el-card__header{
			height: 40px;
			padding: 8px 20px;
			}
			.active-red{
			width: 20px;
			height: 20px;
			border-radius: 50%;
			font-size: 14px;
			color: white;
			background: #F56C6C;
			text-align: center;
			line-height: 20px;
			float: left;
			}

			.active-yellow{
			width: 20px;
			height: 20px;
			border-radius: 50%;
			font-size: 14px;
			color: white;
			background: #E6A23C;
			text-align: center;
			line-height: 20px;
			float: left;
			}

			.active-blue{
			width: 20px;
			height: 20px;
			border-radius: 50%;
			font-size: 14px;
			color: white;
			background: #67C23A;
			text-align: center;
			line-height: 20px;
			float: left;
			}
			.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: 12px;
			cursor: pointer;
			}

			</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 class="content" id="app" v-cloak>
			<el-row style="height: 127px;">
			<el-col :span="6">
			<el-card class="box-card">
			<div style="flex:4;">
			<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 class="col-sm-4">
			<div>
			<div class="col-md-6">
			<span style="font-size:16px;font-weight: bold;line-height: 40px;">监管单位项目统计</span>
			</div>
			<div class="col-md-6" style="z-index:1;">
			<div class="btn-group statistic-btn" style="float: right">
			<button class="btn btn-white" type="button">总计</button>
			<button class="btn btn-white" type="button">本年度</button>
			<button class="btn btn-white" type="button">本月度</button>
			</div>
			</div>
			</div>
			<div id="rank_chart" style="width: 100%;height: 600px;margin-top: 10px"></div>
			<div>
			<span style="color:#000;font-size: 26px;word-break: break-all;line-height: 38px">34个
			</span>
			</div>
			</div>
			</div>
			</div>
			</div>

			<div style="flex:6;">
			<span style="color:rgba(0,0,0,.65);font-size: 15px;">
			协调中 {{indexDataCount.projectStatus0}}
			<li class="el-icon-caret-bottom" style="color: #f56c6c">
			</span>
			<span style="color:rgba(0,0,0,.65);font-size: 15px;">
			待开工 {{indexDataCount.projectStatus1}}
			<li class="el-icon-caret-bottom" style="color: #e6a23c">
			</span>
			<span style="color:rgba(0,0,0,.65);font-size: 15px;">
			进行中 {{indexDataCount.projectStatus2}}
			<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 style="flex:4;">
			<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">647个
			</span>
			</div>
			</div>

			<div style="flex:6;">
			<span style="color:rgba(0,0,0,.65);font-size: 15px;">
			总进尺 {{indexDataCount.footageCount}}m
			<li class="el-icon-caret-bottom" style="color: #f56c6c">
			</span>
			<span style="color:rgba(0,0,0,.65);font-size: 15px;">
			已完成 {{indexDataCount.footageCplCount}}m
			<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 style="flex:4;">
			<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">68个
			</span>
			</div>
			</div>

			<div style="flex:6;">
			<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;">
			未安装 68
			<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 style="flex:4;">
			<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">
			{{indexDataCount.fileCount}}件
			</span>
			</div>
			</div>

			<div style="flex:6;">
			<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;">
			安全资料 0
			<li class="el-icon-caret-bottom" style="color: #409eff">
			</span>
			<span style="color:rgba(0,0,0,.65);font-size: 15px;">
			质量资料 0
			<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 style="height: 200px;">
			<h3>材料统计</h3>
			</div>
			</el-card>

			<el-card class="box-card" style="margin-top: 4px;">
			<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" style="margin-top: 4px;">
			<div style="width: 100%;height: 20px;margin-bottom: 10px;text-align: center;">
			<h3>场地详细进度(%)</h3>
			</div>
			<div style="width: 100%;height: 500px;overflow: auto">

			<el-row class="rankrow" v-for='entity in stationProcessData' @click.native='viewStation(entity)'>
			<el-col :span="2" >
			<div v-if="entity.status=='协调中'" class="active-red">{{entity.ranking}}</div>
			<div v-if="entity.status=='待开工'" class="active-yellow">{{entity.ranking}}</div>
			<div v-if="entity.status=='进行中'" class="active-blue">{{entity.ranking}}</div>

			</el-col>

			<el-col :span="7">
			<div style="font-size: 16px">{{entity.station}}</div>
			</el-col >

			<el-col :span="5">
			<div style="font-size: 16px">{{entity.status}}</div>
			</el-col>

			<el-col :span="8">
			<div>
			<el-progress :stroke-width="10" :percentage="entity.value"></el-progress>
			</div>
			</el-col>
			</el-row>

			</div>

			</el-card>

			</el-col>

			</el-row>

			</div>

			@@ -61,15 +269,337 @@
			<script th:src="@{/ajax/libs/flot/jquery.flot.js}"></script>
			<script th:src="@{/ajax/libs/report/echarts/echarts-all.js}"></script>
			<script th:src="@{/js/tdt.js}" type="text/javascript"></script>

			<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 th:inline="javascript">

			$(function() {
			loadMap();
			getReallyData();
			totalProcess();
			stationProcess();
			indexCount();
			})
			function viewStation(station) {
			var lng = station.lng;
			var lat = station.lat;
			map.centerAndZoom(new T.LngLat(lng, lat), 13);
			// $.modal.openTab("场地导航",ctx+"/geo/project/navigate?ids="+id);
			}

			function indexCount() {
			let url = ctx + "/system/indexDataCount";
			$.ajaxSettings.async = false;
			$.get(url,{},function(res){
			vm.indexDataCount = res.data;
			})
			$.ajaxSettings.async = false;
			}

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

			}
			var vm = new Vue({
			el: "#app",
			data() {
			return {
			stationProcessData: [],
			indexDataCount :"",
			};
			},
			methods: {
			}
			});
			// 加载地图
			let map=null;
			var countries = [];
			var countriesOverlay = new T.D3Overlay(init,redraw);
			var countriesOverlay1 = new T.D3Overlay(init1,redraw1);
			function loadMap() {
			map = new T.Map('map_div');
			map.centerAndZoom(new T.LngLat(116.38, 40.2), 9);

			var control = new T.Control.Zoom();
			control.setPosition(T_ANCHOR_TOP_RIGHT);
			map.addControl(control);// 添加缩放平移控件
			var scale = new T.Control.Scale();// 创建比例尺控件对象
			d3.json("/bjfw/js/custom/beijing.json", function (data) {
			countries = data.features;
			map.addOverLay(countriesOverlay)
			countriesOverlay.bringToBack();
			map.addOverLay(countriesOverlay1)
			countriesOverlay.bringToBack();
			});
			}

			function init(sel, transform) {
			var upd = sel.selectAll('path.geojson').data(countries);
			upd.enter()
			.append('path')
			.attr("class", "geojson")
			.attr('stroke', 'grey')
			.attr('fill', function (d, i) {
			//return d3.hsl(Math.random() * 360, 0.9, 0.5)
			return "transparent"
			})
			.attr('fill-opacity', '0')
			}
			function redraw(sel, transform) {
			sel.selectAll('path.geojson').each(
			function (d, i) {
			d3.select(this).attr('d', transform.pathFromGeojson)
			}
			)
			}
			function init1(sel, transform) {
			var upd = sel.selectAll('path.geojson1').data(countries);
			upd.enter()
			.append('path')
			.attr("class", "geojson1")
			.attr('stroke', 'grey')
			.attr('fill', function (d, i) {
			return d3.hsl(Math.random() * 360, 0.9, 0.5)
			})
			.attr('fill-opacity', '0.1')
			}

			function redraw1(sel, transform) {
			sel.selectAll('path.geojson1').each(
			function (d, i) {
			d3.select(this).attr('d', transform.pathFromGeojson)
			}
			)
			}

			// 获取数据库真实数据
			function getReallyData() {
			let url = window.location.protocol + "//" + window.location.host + "/bjfw/system/project";
			$.get(url,function(res){
			var data = res.projects;
			showProjectPoint(data);
			})
			}
			//地图上展示项目点
			function showProjectPoint(data){
			var projectIcon = new T.Icon({
			iconUrl: '/bjfw/images/icon/6.png',
			iconSize: new T.Point(30, 30),
			iconAnchor: new T.Point(6, 40),
			});
			for(let i =0;i<data.length;i++){
			let lng = data[i].lng;
			let lat = data[i].lat;
			let marker = new T.Marker(new T.LngLat(lng, lat), { title: "场地位置",icon:projectIcon});
			let proj = infoWindowProject(data[i]);
			addClickHandler(proj, marker);
			map.addOverLay(marker);
			}

			}

			function infoWindowProject(e){

			let ids = e.ids + "";
			var sContent =
			"<div style='margin:0px;'>" +
			"<div>" +
			"<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) {
			marker.addEventListener("click", function (e) {
			openInfo(content, e)
			});
			}

			function openInfo(content, e) {
			var point = e.lnglat;
			var markerInfoWin = new T.InfoWindow(content, { offset: new T.Point(0, -30) }); // 创建信息窗口对象
			map.openInfoWindow(markerInfoWin, point); //开启信息窗口
			}

			//总进度仪表盘
			function totalProcess() {
			var Chart1 = echarts.init(document.getElementById('Chart1'));
			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: 80,
			z: 1,
			startAngle: 225,
			endAngle: -45,
			splitNumber: 50,
			title: {
			color: "red",
			},
			splitLine: {
			show: true,
			length: 15,
			distance: -10,
			lineStyle: {
			color: "#fff",
			width: 1,
			},
			},
			detail: {
			show: true,
			offsetCenter: [0, 60],
			fontSize: 22,
			formatter: (val) => [`{a\|${val}}`, `{b\|%}`].join(""),
			rich: {
			a: {
			fontSize: 20,
			color: "rgba(84, 108, 198, 0.65)",
			},
			b: {
			fontSize: 24,
			color: "rgba(84, 108, 198, 0.65)",
			},
			},
			},
			// 仪表盘的线，颜色值为一个数组
			axisLine: {
			show: true,
			// 两端是否设置为圆角；在5.0之后的版本有效
			roundCap: false,
			lineStyle: {
			width: 15,
			shadowColor: "#0093ee", //默认透明
			shadowOffsetX: 0,
			shadowOffsetY: 0,
			shadowBlur: 20,
			opacity: 1,
			color: [
			[
			pointerData / 100,
			{
			x: 0,
			y: 0,
			x1: 1,
			y1: 0,
			colorStops: [
			{
			offset: 0,
			color: "rgba(0, 255, 255, 0.6)",
			},
			{
			offset: 1,
			color: "rgba(0, 0, 255, .6)",
			},
			],
			},
			],
			[1, "rgba(0,0,0,0.15)"],
			],
			},
			},
			// 仪表盘刻度标签
			axisLabel: {
			show: true,
			color: "rgba(84, 108, 198, 0.65)",
			fontSize: 14,
			distance: 20,
			formatter: (val) => {
			const num = Math.floor(val);
			return num % 20 === 0 ? num : "";
			},
			},
			// 刻度
			axisTick: {
			show: false,
			},
			// 指针，此设置仅对5.0以上的版本生效
			anchor: {
			show: true,
			icon: "circle",
			showAbove: true,
			size: 20,
			itemStyle: {
			borderWidth: 6,
			borderColor: "rgba(84, 108, 198, 0.85)",
			},
			},
			data: [pointerData],
			},
			{
			// 背景渐变色
			type: "pie",
			radius: "80%",
			// 不响应及触发鼠标事件
			silent: true,
			// 关闭背景动画
			animation: false,
			z: 0,
			itemStyle: {
			color: {
			type: "radial", // 径向渐变
			x: 0.5,
			y: 0.5,
			r: 0.25,
			colorStops: [
			{
			offset: 0,
			color: "rgba(84, 103, 198, 0.6)",
			},
			{
			offset: 0.1,
			color: "rgba(84, 103, 198, 0.35)",
			},
			{
			offset: 1,
			color: "rgba(84, 103, 198, 0)",
			},
			],
			},
			},
			data: [pointerData],
			},
			],
			};
			Chart1.setOption(option);
			}





			</script>

			</body>
			</html>