dkyChenJiang.git

			@@ -13,239 +13,45 @@
			.content {
			width: 100%;
			background-color: rgba(0,0,0,0.01) !important;
			padding:10px;
			}
			[v-cloak]{
			display: none;
			}
			.el-card__header{
			height: 40px;
			padding: 8px 20px;
			.ilblock>span{
			display: block;
			line-height: 30px;
			}
			.active-red{
			width: 20px;
			height: 20px;
			border-radius: 50%;
			font-size: 14px;
			color: white;
			background: #F56C6C;
			text-align: center;
			line-height: 20px;
			float: left;
			.el-table th,
			.el-table tr,
			.el-table td {
			background-color: transparent;
			border: 0px;
			color: #4D4D4D;
			font-size: 13px;
			font-family: Source Han Sans CN Normal, Source Han Sans CN Normal-Normal;
			font-weight: Normal;
			}

			.active-yellow{
			width: 20px;
			height: 20px;
			border-radius: 50%;
			font-size: 14px;
			color: white;
			background: #E6A23C;
			text-align: center;
			line-height: 20px;
			float: left;
			.el-table__body tr,
			.el-table__body td {
			padding: 0;
			height: 22px;
			}

			.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;
			.custom-icon:hover {
			color: #0981ea;
			cursor: pointer;
			}

			</style>
			</head>

			<body class="gray-bg">
			<div class="content" id="app" v-cloak>
			<el-row style="height: 127px;">
			<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>
			<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;">
			协调中 {{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>
			<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>
			<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>
			<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>
			<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>
			<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>
			<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 id="map_div" style="position:fixed;width: 100%;height: 100vh;margin-top: -5px"></div>
			<div style="position:fixed;top: 5px">
			<li onclick="careraFunction()" class="el-icon-video-camera custom-icon" style="font-size: 100px;margin-right: 5px;margin-left: -5px;"></li>
			<li onclick="tubFunction()" class="el-icon-user custom-icon" style="font-size: 100px;margin-right: 5px;margin-left: -5px;"></li>
			</div>
			<div id="Chart1" style="position:fixed;width: 300px;height: 300px;bottom: -60px;right: -40px"></div>

			</div>

			@@ -270,34 +76,126 @@
			loadMap();
			getReallyData();
			totalProcess();
			stationProcess();
			indexCount();
			//stationProcess();
			//indexCount();
			//tubLogs();
			})
			//场地和地图点击联动
			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";
			function tubLogs() {

			const chart = echarts.init(document.getElementById("column-chart"));
			const option = {
			tooltip: {
			trigger: 'axis',
			axisPointer: {
			type: 'shadow'
			}
			},
			legend: {},
			grid: {
			left: '3%',
			right: '4%',
			bottom: '3%',
			containLabel: true
			},
			xAxis: [
			{
			type: 'category',
			data: []
			}
			],
			yAxis: [
			{
			type: 'value'
			}
			],
			series: [
			{
			name: '出库',
			type: 'bar',
			emphasis: {
			focus: 'series'
			},
			data: [],
			itemStyle: {
			// 修改柱子的颜色
			color: '#e2b507'
			}
			},
			{
			name: '入库',
			type: 'bar',
			stack: 'Ad',
			emphasis: {
			focus: 'series'
			},
			data: [],
			itemStyle: {
			// 修改柱子的颜色
			color: '#2992c6'
			}
			},

			]
			};

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

			res.tubLogs.forEach(function(value, index, array) {
			const tubName = value.tubName;
			const inboundNumber = value.inboundNumber;
			const outboundNumber = value.outboundNumber;
			const unit = value.unit;
			option.xAxis[0].data[index] = tubName;
			option.series[0].data[index] = outboundNumber;
			option.series[1].data[index] = inboundNumber;
			});
			chart.setOption(option, true);
			})
			$.ajaxSettings.async = false;
			}

			//首页第一行个数统计
			function indexCount() {
			let url = ctx + "/system/stat/indexDataCount";
			$.ajaxSettings.async = false;
			$.get(url,{},function(res){
			vm.indexDataCount = res.data;
			vm.indexDataCount.cameraCountNaN = 68 -vm.indexDataCount.cameraCount;
			})
			$.ajaxSettings.async = false;

			}

			//摄像头列表
			function careraFunction() {
			let url = ctx + "/system/camera";
			$.modal.openTab("摄像头列表",url);
			}

			//管材统计
			function tubFunction() {
			let url = ctx + "/system/tub";
			$.modal.openTab("管材统计",url);
			}

			//场地进度
			function stationProcess() {
			let url = ctx + "/system/projectProcess";
			let url = ctx + "/system/stat/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",
			@@ -305,9 +203,17 @@
			return {
			stationProcessData: [],
			indexDataCount :"",
			tubLogs:[],
			};
			},
			methods: {
			tableRowClassName({ row, rowIndex }) {
			if (rowIndex % 2 == 0) {
			return "";
			} else {
			return "warning-row";
			}
			},
			}
			});
			// 加载地图
			@@ -330,6 +236,8 @@
			map.addOverLay(countriesOverlay1)
			countriesOverlay.bringToBack();
			});

			//map.setStyle("indigo");
			}

			function init(sel, transform) {
			@@ -373,7 +281,7 @@

			// 获取数据库真实数据
			function getReallyData() {
			let url = window.location.protocol + "//" + window.location.host + "/bjfw/system/project";
			let url = window.location.protocol + "//" + window.location.host + "/bjfw/system/stat/project";
			$.get(url,function(res){
			var data = res.projects;
			showProjectPoint(data);
			@@ -381,17 +289,35 @@
			}
			//地图上展示项目点
			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),
			});
			var projectIcon;
			for(let i =0;i<data.length;i++){

			if (data[i].status === '1'){
			projectIcon = new T.Icon({
			iconUrl: '/bjfw/images/icon/yellow.png',
			iconSize: new T.Point(30, 30),
			iconAnchor: new T.Point(6, 40),
			});
			}else if (data[i].status === '2'){
			projectIcon = new T.Icon({
			iconUrl: '/bjfw/images/icon/blue.png',
			iconSize: new T.Point(30, 30),
			iconAnchor: new T.Point(6, 40),
			});
			}else {
			projectIcon = new T.Icon({
			iconUrl: '/bjfw/images/icon/red.png',
			iconSize: new T.Point(30, 30),
			iconAnchor: new T.Point(6, 40),
			});
			}

			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);
			}

			@@ -407,7 +333,7 @@
			"<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>" +
			"<a class='btn' onclick=viewdata(" +"'" + ids+ "'" + ")>场地数据</a>" + "<br>" +
			"</div>" +
			"</div>" +
			"</div>";
			@@ -419,6 +345,7 @@

			function addClickHandler(content, marker) {
			marker.addEventListener("click", function (e) {
			console.log("你点击了",content);
			openInfo(content, e)
			});
			}
			@@ -429,19 +356,21 @@
			map.openInfoWindow(markerInfoWin, point); //开启信息窗口
			}


			//总进度仪表盘
			function totalProcess() {
			var Chart1 = echarts.init(document.getElementById('Chart1'));
			var pointerData = 0; // 仪表指针数据
			let url = ctx + "/system/totalProcess";
			let url = ctx + "/system/stat/totalProcess";
			$.ajaxSettings.async = false;
			$.get(url,{},function(res){
			pointerData = res.pointerData;
			pointerData = (pointerData*100).toFixed(0);
			})
			});

			$.ajaxSettings.async = false;
			var option = {
			backgroundColor: "#fff",
			backgroundColor: "transparent",
			series: [
			{
			type: "gauge",
			@@ -580,11 +509,6 @@
			Chart1.setOption(option);
			}





			</script>

			</body>
			</html>