feats

resources/static/css/common.css

@@ -26,7 +26,7 @@
 .nav-menu {
   display: flex;
   justify-content: center;
-  max-width: 600px;
+  max-width: 800px;
   height: 100%;
   margin: 0 auto;
 }
@@ -330,3 +330,99 @@
 .table tbody tr:hover {
   background: rgba(66, 118, 245, 0.2);
 }
+.dashboard-page {
+  height: 100%;
+  background-color: #081A48;
+}
+.dashboard-page > div {
+  height: 50%;
+  overflow: hidden;
+}
+.dashboard-page .act-list .row {
+  height: calc(50% - 64px);
+  padding: 0 80px;
+}
+.dashboard-page .act-list .row + .row {
+  margin-top: 64px;
+}
+.dashboard-page .act-list div[class^="col"] {
+  min-width: 280px;
+  width: calc(25% - 48px);
+  height: 100%;
+  position: relative;
+}
+.dashboard-page .act-list div[class^="col"] + div {
+  margin-left: 64px;
+}
+.dashboard-page .act-list div[class^="col"] .act-body {
+  z-index: 1;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+.dashboard-page .act-list div[class^="col"] .act-body .act-icon {
+  position: relative;
+  width: 64px;
+  height: 64px;
+  min-height: 64px;
+  flex: 0;
+}
+.dashboard-page .act-list div[class^="col"] .act-body .act-icon img {
+  position: absolute;
+  left: calc(50% - 32px);
+  top: 0;
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+}
+.dashboard-page .act-list div[class^="col"] .act-body .act-icon img:nth-child(2) {
+  display: none;
+}
+.dashboard-page .act-list div[class^="col"] .act-body .act-content {
+  flex: 0;
+  text-align: center;
+}
+.dashboard-page .act-list div[class^="col"] .act-body .act-content span {
+  display: inline-block;
+  padding: 0 1em;
+  font-size: 24px;
+  font-weight: 500;
+  color: transparent;
+  background: linear-gradient(0deg, #2362E4 0%, #00D5FB 100%);
+  vertical-align: middle;
+  background-clip: text;
+  -webkit-background-clip: text;
+}
+.dashboard-page .act-list div[class^="col"] .act-bg {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  z-index: 0;
+  left: 0;
+  top: 0;
+}
+.dashboard-page .act-list div[class^="col"] .act-bg img {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+}
+.dashboard-page .act-list div[class^="col"] .act-bg img:nth-child(2) {
+  display: none;
+}
+.dashboard-page .act-list div[class^="col"]:hover .act-bg img:nth-child(1),
+.dashboard-page .act-list div[class^="col"]:hover .act-icon img:nth-child(1) {
+  display: none;
+}
+.dashboard-page .act-list div[class^="col"]:hover .act-bg img:nth-child(2),
+.dashboard-page .act-list div[class^="col"]:hover .act-icon img:nth-child(2) {
+  display: block;
+}
+.dashboard-page .act-list div[class^="col"]:hover .act-content span {
+  color: #ffffff;
+  background: transparent;
+}

resources/static/less/ext-page.less

@@ -107,4 +107,127 @@
       }
     }
   }
-}
+}
+
+.dashboard-page {
+  height: 100%;
+  background-color: #081A48;
+
+  & > div {
+    height: 50%;
+    overflow: hidden;
+  }
+
+  .act-list {
+    .row {
+      height: calc(50% - 64px);
+      padding: 0 80px;
+
+      & + .row {
+        margin-top: 64px;
+      }
+    }
+
+    div[class^="col"] {
+      min-width: 280px;
+      // 每行 4 个, 间距 64
+      width: calc(25% - 48px);
+      height: 100%;
+      position: relative;
+      
+      & + div {
+        margin-left: 64px;
+      }
+
+      .act-body {
+        z-index: 1;
+        width: 100%;
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+
+        .act-icon {
+          position: relative;
+          width: 64px;
+          height: 64px;
+          min-height: 64px;
+          flex: 0;
+
+          img {
+            position: absolute;
+            left: calc(50% - 32px);
+            top: 0;
+            display: block;
+            width: 100%;
+            height: 100%;
+            object-fit: contain;
+  
+            &:nth-child(2) {
+              display: none;
+            }
+          }
+        }
+
+        .act-content {
+          flex: 0;
+          text-align: center;
+
+          span {
+            display: inline-block;
+            padding: 0 1em;
+            font-size: 24px;
+            font-weight: 500;
+            color: transparent;
+            background: linear-gradient(0deg, #2362E4 0%, #00D5FB 100%);
+            vertical-align: middle;
+            background-clip: text;
+            -webkit-background-clip: text;
+          }
+        }
+
+      }
+
+      .act-bg {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        z-index: 0;
+        left: 0;
+        top: 0;
+
+        img {
+          display: block;
+          width: 100%;
+          height: 100%;
+          object-fit: contain;
+
+          &:nth-child(2) {
+            display: none;
+          }
+        }
+      }
+
+      &:hover {
+        .act-bg, .act-icon {
+          img {
+            &:nth-child(1) {
+              display: none;
+            }
+            &:nth-child(2) {
+              display: block;
+            }
+          }
+        }
+
+        .act-content {
+          span {
+            color: #ffffff;
+            background: transparent;
+          }
+        }
+      }
+    }
+  }
+}

resources/static/less/nav-menu.less

@@ -1,7 +1,7 @@
 .nav-menu {
   display: flex;
   justify-content: center;
-  max-width: 600px;
+  max-width: 800px;
   height: 100%;
   margin: 0 auto;
 

resources/templates/common/common_menu.html

@@ -8,8 +8,11 @@
       $('.layout .left').attr("style","display: block");
 
       if (menuId == 'nav-menu-index') {
+        toPage(ctxPath +"main?t=1");
         $('.layout .left').attr("style","display: none");
-        toPage(ctxPath +"main");
+      } else if (menuId == 'nav-menu-data') {
+        $('.layout .left').attr("style","display: none");
+        toPage(ctxPath +"main?t=2");
       } else if (menuId == 'nav-menu-doc') {
         $(".help-doc").get(0).click()
       } else {
@@ -26,6 +29,9 @@
   <div class="nav-menu-item active" onclick="onNavMenuClick(this, 'nav-menu-index')">
     <div><span>首页</span></div>
   </div>
+  <div class="nav-menu-item" onclick="onNavMenuClick(this, 'nav-menu-data')">
+    <div><span>数据统计</span></div>
+  </div>
   <div class="nav-menu-item" onclick="onNavMenuClick(this, 'nav-menu-report')">
     <div><span>数据上报</span></div>
   </div>

resources/templates/main.html

@@ -16,365 +16,21 @@
 }
 </style>
 </head>
-
 <body>
-	<div class="chart-page">
-		<div class="flex-part">
-			<div class="flex-part-3">
-
-				<div class="count">
-					<dl>
-						<dt id="totalTask">0</dt>
-						<dd>任务总数</dd>
-						<img th:src="@{/images/statistic/数字统计.png}" alt="">
-					</dl>
-					<dl>
-						<dt id="totalPerson">0</dt>
-						<dd>接待军人总数</dd>
-						<img th:src="@{/images/statistic/接待军人总数.png}" alt="">
-					</dl>
-					<dl>
-						<dt id="totalOrg">0</dt>
-						<dd>保障机构数</dd>
-						<img th:src="@{/images/statistic/保障机构数.png}" alt="">
-					</dl>
-					<dl>
-						<dt id="totalEquipment">0</dt>
-						<dd>设备数量</dd>
-						<img th:src="@{/images/statistic/设备数量.png}" alt="">
-					</dl>
-				</div>
-			
-				<div class="panelGroup flex-part" style="padding-bottom:0;">
-					<div class="panel flex-part-2 chart-card">
-						<div class="panel-heading">
-							<img th:src="@{/images/statistic/任务统计.png}" />
-							<span>任务统计</span>
-							<!-- <svg>
-								<defs>
-										<linearGradient id="grad" x1="0" y1="100%" x2="0" y2="0">
-												<stop offset="0%" style="stop-color:#6F39B9; stop-opacity:1" />
-												<stop offset="100%" style="stop-color:#1EAED1; stop-opacity:1" />
-										</linearGradient>
-								</defs>
-								<text x="0" y="22" fill="url(#grad)" style="font-size:22px">任务统计</text>
-							</svg> -->
-							<div class="selectGroup">
-								<select class="" id="selYear" onchange="taskTimeReport()">
-										</select>
-							</div>
-						</div>
-						<div class="panel-body">
-							<div class="text-center">
-								<div class="text-center" style="height:300px;" id="taskChart"></div>
-							</div>
-						</div>
-					</div>
-					<div class="flex-part-1">
-						<div class="panel chart-card">
-							<div class="panel-heading">
-								<img th:src="@{/images/statistic/设备分类统计.png}" />
-								<span>设备分类统计</span>
-							</div>
-							<div class="panel-body">
-								<div class="text-center" style="height:260px;" id="devChart"></div>
-							</div>
-						</div>
-					</div>
-				</div>
-
-
-			</div>
-			<div class="flex-part-1">
-				<div class="panel chart-card" style="margin: 15px 30px 0 0; height: calc(100% - 15px)">
-					<div class="panel-heading">
-						<img th:src="@{/images/statistic/军供保障能力.png}" />
-						<span>军供保障能力</span>
-					</div>
-					<div class="panel-body" style="height: calc(100% - 60px);">
-						<div class="info-text">
-							
-						</div>
-						<ul class="info-list" style="overflow-y: auto; height: 100%;">
-							<li title="常规单日整体膳食供应能力(人次)"><span id="ztssgynl">0</span>常规单日整体膳食供应能力(人次)：</li>
-							<li title="常规单次整体膳食供应能力(人)"><span id="dcztssgynl">0</span>常规单次整体膳食供应能力(人)：</li>
-							<li title="应急单日整体膳食供应能力(人次)"><span id="yjztssgynl">0</span>应急单日整体膳食供应能力(人次)：</li>
-							<li title="应急单次整体膳食供应能力(人)"><span id="yjdcztssgynl">0</span>应急单次整体膳食供应能力(人)：</li>
-							<li title="常规整体住宿供应能力(人)"><span id="ztzsgynl">0</span>常规整体住宿供应能力(人)：</li>
-							<li title="应急整体住宿供应能力(人)"><span id="yjztzsgynl">0</span>应急整体住宿供应能力(人)：</li>
-						</ul>
-					</div>
-				</div>
-			</div>
-		</div>
-	<div class="panelGroup">
-		<div class="panel panel-row-2 chart-card">
-			<div class="panel-heading">
-				<img th:src="@{/images/statistic/社会保障机构分类统计.png}" />
-				<span>社会保障机构分类统计</span>
-			</div>
-			<div class="panel-body">
-				<div class="text-center" id="guaChart" style="height:320px"></div>
-			</div>
-		</div>
-		<div class="panel panel-row-2 chart-card">
-			<div class="panel-heading">
-				<img th:src="@{/images/statistic/人员统计.png}" />
-				<span>人员统计</span>
-			</div>
-			<div class="panel-body">
-				<div class="col-sm-6 text-center" id="eduChart" style="height:300px;">
-				</div>
-				<div class="col-sm-6 text-center" id="ageChart" style="height:270px;">
-				</div>
-			</div>
-		</div>
-	</div>
-	
-
-		
-</div>
+	<div th:replace="main/data::main-data"></div>
+	<div th:replace="main/dashboard::main-dashboard"></div>
 </body>
- <script>
-	function loadPage() {
-		let colArr = commentReport();
-		$
-				.ajax({
-					url : urlPre + "getMainData",
-					dataType : 'json',
- 					success : function(data) {
-
-						(function mockData(dt) {
-							function rand() {
-								return Math.floor(100 * Math.random() + 10);
-							}
-
-							dt.countData.ageArrNum = dt.countData.ageArrNum.split(',').map(rand).join(',')
-							dt.countData.devArrNum = dt.countData.devArrNum.split(',').map(rand).join(',')
-							dt.countData.guaArrNum = dt.countData.guaArrNum.split(',').map(rand).join(',')
-							dt.countData.eduNum = dt.countData.eduNum.split(',').map(rand).join(',')
-							dt.countData.guaAbiJson.clzs = rand()
-							dt.countData.guaAbiJson.dcztssgynl = rand()
-							dt.countData.guaAbiJson.yjdcztssgynl = rand()
-							dt.countData.guaAbiJson.yjztssgynl = rand()
-							dt.countData.guaAbiJson.ztssgynl = rand()
-							dt.countData.guaAbiJson.ztzsgynl = rand()
-							dt.yearTask = Object.keys(dt.yearTask).map((key) => {
-								return {[key]: rand()}
-							}).reduce((acc, item) => ({ ...acc, ...item }), {})
-						})(data)
-
-						console.log(data)
-
- 						$("#totalTask").text(data.totalTask);
- 						$("#totalOrg").text(data.totalOrg);
- 						$("#totalPerson").text(data.totalPerson);
- 						$("#totalEquipment").text(data.totalEquipment);
- 						//选择年份 按月统计任务
- 						var myDate = new Date();
-                        var tYear = myDate.getFullYear();
-                        var lasYear = tYear - 1;
-                        $("#selYear").html("<option value='"+tYear+"'>"+tYear+"年</option><option value='"+lasYear+"'>"+lasYear+"年</option>");
- 						var chartData = {};
-                        let yearTask = data.yearTask
-                        let xAxisData = []
-                        let datas = []
-                        for(let key in yearTask){
-                        	xAxisData[xAxisData.length] = key
-                        	datas[datas.length] = yearTask[key]
-                        }                      
- 						chartData.datas = datas;
- 						chartData.xAxisData = xAxisData;
- 						// setLine("taskChart", chartData);
-
-						setChart("#taskChart", getBar1Option(xAxisData, datas))
-                        
- 						var comments = data.comments;
- 						var commentUl = "";
- 						for (var key in comments) {
- 							var tmpData = comments[key];
- 							commentUl += '<li><a href="###"><h2>'+tmpData.taskNumber+'</h2>'
- 							let config_evaluate_item = tmpData.config_evaluate_item.split(",")
- 							for(var ky in colArr){
- 								if(config_evaluate_item.indexOf(colArr[ky].substring(0,2)) !=-1){
- 									if(tmpData[colArr[ky]] != null){
- 	 									let num = tmpData[colArr[ky]];
- 	 	 								let total = tmpData[colArr[ky].substring(0,2)]
- 	 	 								let addNum = (num/total*100).toFixed() + "%"
- 	 	 								commentUl += '<span>'+addNum+'</span>'
- 	 								}else{
- 	 									commentUl += '<span>0%</span>'
- 	 								}
- 								}else{
- 									commentUl += '<span>未选择</span>'
- 								}
- 							
- 								
- 							}
- 							commentUl += '</li>';		
- 						}
- 						$("#commentUl").html(commentUl);
- 						
- 						var taskInfos = data.taskInfos;
- 						var taskInfoUl = "";
- 						for (var key in taskInfos) {
- 							var tmpData = taskInfos[key];
- 							taskInfoUl += '<li><a href="###"><h2>'+tmpData.taskNumber+'</h2><span>'+tmpData.data_date.substring(0,10)+'</span><span>'
- 							               +tmpData.config_supply_main+'</span></a></li>';
- 						}
- 						$("#taskInfoUl").html(taskInfoUl);
- 						//人员学历统计
- 						
- 						chartData = {};
- 						let eduArrNameArr = data.countData.eduArrName.split(",")
- 						let eduNumArr = data.countData.eduNum.split(",")
-  						datas = {};
- 						datas[eduArrNameArr[0]] = eduNumArr[0];
- 						datas[eduArrNameArr[1]] = eduNumArr[1];
- 						datas[eduArrNameArr[2]] = eduNumArr[2];
-						chartData.datas = datas;
-						chartData.subtext = '人员学历统计';
-						chartData.seriesName = "学历";
-						chartData.addNum = 2
-						// setBar("eduChart", chartData);
-						setChart("#eduChart", getBar3Option(eduArrNameArr, eduNumArr))
-
-						
-						//人员年龄统计
-						let ageArrNameArr = data.countData.ageArrName.split(",")
-						let ageArrNum = data.countData.ageArrNum.split(",")
-						datas = {};
-						datas[ageArrNameArr[0]] = ageArrNum[0];
- 						datas[ageArrNameArr[1]] = ageArrNum[1];
- 						datas[ageArrNameArr[2]] = ageArrNum[2];
- 						datas[ageArrNameArr[3]] = ageArrNum[3];
-  					    chartData = {};
-					 	chartData.datas = datas;
-					 	chartData.subtext = '人员年龄统计';
-					 	chartData.seriesName = "年龄";
-					 	chartData.isShowLine= false
-					 	chartData.isShowTooltip = false
-					 	// setPie("ageChart", chartData);	
-						 var pie2 = setChart("#ageChart", getPie2Option(datas))
-						// 默认选中第一个, 并处理选中逻辑
-						var pie2DataIndex = 0
-						pie2.on('mousemove', function(e) {
-							pie2.dispatchAction({ type: 'downplay', dataIndex: pie2DataIndex });
-							pie2.dispatchAction({ type: 'highlight', dataIndex: e.dataIndex });
-							pie2DataIndex = e.dataIndex
-						});
-						pie2.dispatchAction({ type: 'highlight', dataIndex: pie2DataIndex });
-
-					 	//机构分类统计
-					 	let guaArrNameArr = data.countData.guaArrName.split(",");
-					 	let guaArrNumArr = data.countData.guaArrNum.split(",");
-					 	datas = {};						
-					 	for(var i=0;i<guaArrNameArr.length;i++){
-					 		datas[guaArrNameArr[i]] = guaArrNumArr[i];
-					 	}
-					 	chartData = {};
-					 	chartData.datas = datas;
-					 	chartData.subtext = '';
-					 	chartData.seriesName = "保障机构类别";
-					 	chartData.isShowLine= false
-					 	chartData.isShowTooltip = false
-					 	// setBar("guaChart", chartData);
-						setChart("#guaChart", getBar2Option(guaArrNameArr, guaArrNumArr))
-
-					 	//供应设备分类统计
-					 	let devArrName = data.countData.devArrName.split(",");
-					 	let devArrNum = data.countData.devArrNum.split(",");
-					 	datas = {};						
-					 	for(var i=0;i<devArrName.length;i++){
-					 		datas[devArrName[i]] = devArrNum[i];
-					 	}
-					 	chartData = {};
-					 	chartData.datas = datas;
-					 	chartData.subtext = '';
-					 	chartData.seriesName = "设备类别";
-					 	chartData.isShowLine= false
-					 	chartData.isShowTooltip = false
-					 	// setPie("devChart", chartData);
-						var pie1 = setChart("#devChart", getPie1Option(datas));
-						// 默认选中第一个, 并处理选中逻辑
-						var pie1DataIndex = 0
-						pie1.on('mousemove', function(e) {
-							pie1.dispatchAction({ type: 'downplay', dataIndex: pie1DataIndex });
-							pie1.dispatchAction({ type: 'highlight', dataIndex: e.dataIndex });
-							pie1DataIndex = e.dataIndex
-						});
-						pie1.dispatchAction({ type: 'highlight', dataIndex: pie1DataIndex });
-
-					 	let guaAbiJson = data.countData.guaAbiJson
-					 	$(".info-list").find("span").each(function(){
-					 		let objId = $(this).attr("id")
-					 		if(guaAbiJson[objId] != null){
-					 			$(this).text(guaAbiJson[objId]);
-					 		}					 		
-					 	})
-					 	let config_service_ability = guaAbiJson.config_service_ability
-					 	let serviceArr = config_service_ability.split(",")
-					 	for(let key in serviceArr){
-					 		if(serviceArr[key] != null && serviceArr[key] != ""){
-						 		$(".info-text").append('<span class="label">'+serviceArr[key]+'</span>')
-
-					 		}
-					 	}
- 					}
- 				});
-		        
-	}
-	function taskTimeReport() {
-		let year = $("#selYear").val()
-		$
-		.ajax({
-			url : urlPre + "taskTimeReport?yearTime="+year,
-			dataType : 'json',
-				success : function(yearTask) {
-					var chartData = {};
-                    let xAxisData = []
-                    let datas = []
-                    for(let key in yearTask){
-                    	xAxisData[xAxisData.length] = key
-                    	datas[datas.length] = yearTask[key]
-                    }                      
-                    chartData.datas = datas;
-					chartData.xAxisData = xAxisData;
-					chartData.addNum = 2;
-					setLine("taskChart", chartData);	
-				}
-		})
-	}
-	function commentReport(){
-		let queryParams = {};
-		queryParams.schCols = 'itemCode,itemName';
-		queryParams.limit = 200
-		queryParams["sorts[0].field"] = 'sort';
-		queryParams["sorts[0].order"] = 'asc';
-		queryParams.search_LENGTH_itemCode = 2;
-		let colArr = []
-		$.ajax({
-			type : 'post',
-			async : false,
-			url : urlPre + 'api/commentItem/page',
-			data:queryParams,
-			dataType : 'json',
-			success : function(data) {
-				var rows = data.rows;
-				for(var m = 0; m < rows.length; m++){
-					if(m<3){
-						let row = rows[m]
-						let str = '<span>'+row.itemName+'(优)</span>'
-	                    $("#commentLi").append(str)
-	                    colArr[colArr.length] = row.itemCode + "_1"
-					}
-				
-				}
-			}
-		});	
-		return colArr;
+<script>
+	var paramT = '1';
+	var matched = /t=(\d)/.exec(location.search);
+	if (matched) {
+		paramT = matched[1] || '1';
 	}
 
-	console.log('-------->', window)
-</script> 
+	if (paramT == '2') {
+		document.querySelector('#t2').style.display="block"
+	} else {
+		document.querySelector('#t1').style.display="block"
+	}
+</script>
 </html>

resources/templates/main/dashboard.html

@@ -0,0 +1,155 @@
+<!DOCTYPE html>
+<html lang="zh-CN" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity5">
+<div id="t1" th:fragment="main-dashboard" class="dashboard-page" style="display: none;">
+  <div></div>
+  <div class="act-list">
+    <div class="row">
+      <div class="col-md-3">
+        <div class="act-bg">
+          <img th:src="@{/images/dashboard/menu_bg.png}" alt="">
+          <img th:src="@{/images/dashboard/menu_bg_active.png}" alt="">
+        </div>
+
+        <div class="act-body">
+          <div class="act-icon">
+            <img th:src="@{/images/dashboard/年度任务汇总.png}" alt="">
+            <img th:src="@{/images/dashboard/年度任务汇总click.png}" alt="">
+          </div>
+          <div class="act-content">
+            <img th:src="@{/images/dashboard/left.png}" alt="">
+            <span>年度任务汇总</span>
+            <img th:src="@{/images/dashboard/right.png}" alt="">
+          </div>
+        </div>
+      </div>
+      <div class="col-md-3">
+        <div class="act-bg">
+          <img th:src="@{/images/dashboard/menu_bg.png}" alt="">
+          <img th:src="@{/images/dashboard/menu_bg_active.png}" alt="">
+        </div>
+
+        <div class="act-body">
+          <div class="act-icon">
+            <img th:src="@{/images/dashboard/军供任务明细.png}" alt="">
+            <img th:src="@{/images/dashboard/军供任务明细click.png}" alt="">
+          </div>
+          <div class="act-content">
+            <img th:src="@{/images/dashboard/left.png}" alt="">
+            <span>军供任务明细</span>
+            <img th:src="@{/images/dashboard/right.png}" alt="">
+          </div>
+        </div>
+      </div>
+      <div class="col-md-3">
+        <div class="act-bg">
+          <img th:src="@{/images/dashboard/menu_bg.png}" alt="">
+          <img th:src="@{/images/dashboard/menu_bg_active.png}" alt="">
+        </div>
+
+        <div class="act-body">
+          <div class="act-icon">
+            <img th:src="@{/images/dashboard/军供保障能力.png}" alt="">
+            <img th:src="@{/images/dashboard/军供保障能力click.png}" alt="">
+          </div>
+          <div class="act-content">
+            <img th:src="@{/images/dashboard/left.png}" alt="">
+            <span>军供保障能力</span>
+            <img th:src="@{/images/dashboard/right.png}" alt="">
+          </div>
+        </div>
+      </div>
+      <div class="col-md-3">
+        <div class="act-bg">
+          <img th:src="@{/images/dashboard/menu_bg.png}" alt="">
+          <img th:src="@{/images/dashboard/menu_bg_active.png}" alt="">
+        </div>
+
+        <div class="act-body">
+          <div class="act-icon">
+            <img th:src="@{/images/dashboard/社会保障预案.png}" alt="">
+            <img th:src="@{/images/dashboard/社会保障预案click.png}" alt="">
+          </div>
+          <div class="act-content">
+            <img th:src="@{/images/dashboard/left.png}" alt="">
+            <span>社会保障预案</span>
+            <img th:src="@{/images/dashboard/right.png}" alt="">
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="row">
+      <div class="col-md-3">
+        <div class="act-bg">
+          <img th:src="@{/images/dashboard/menu_bg.png}" alt="">
+          <img th:src="@{/images/dashboard/menu_bg_active.png}" alt="">
+        </div>
+
+        <div class="act-body">
+          <div class="act-icon">
+            <img th:src="@{/images/dashboard/社会保障机构.png}" alt="">
+            <img th:src="@{/images/dashboard/社会保障机构click.png}" alt="">
+          </div>
+          <div class="act-content">
+            <img th:src="@{/images/dashboard/left.png}" alt="">
+            <span>社会保障机构</span>
+            <img th:src="@{/images/dashboard/right.png}" alt="">
+          </div>
+        </div>
+      </div>
+      <div class="col-md-3">
+        <div class="act-bg">
+          <img th:src="@{/images/dashboard/menu_bg.png}" alt="">
+          <img th:src="@{/images/dashboard/menu_bg_active.png}" alt="">
+        </div>
+
+        <div class="act-body">
+          <div class="act-icon">
+            <img th:src="@{/images/dashboard/军供供应设备.png}" alt="">
+            <img th:src="@{/images/dashboard/军供供应设备click.png}" alt="">
+          </div>
+          <div class="act-content">
+            <img th:src="@{/images/dashboard/left.png}" alt="">
+            <span>军供供应设备</span>
+            <img th:src="@{/images/dashboard/right.png}" alt="">
+          </div>
+        </div>
+      </div>
+      <div class="col-md-3">
+        <div class="act-bg">
+          <img th:src="@{/images/dashboard/menu_bg.png}" alt="">
+          <img th:src="@{/images/dashboard/menu_bg_active.png}" alt="">
+        </div>
+
+        <div class="act-body">
+          <div class="act-icon">
+            <img th:src="@{/images/dashboard/军供站简介.png}" alt="">
+            <img th:src="@{/images/dashboard/军供站简介click.png}" alt="">
+          </div>
+          <div class="act-content">
+            <img th:src="@{/images/dashboard/left.png}" alt="">
+            <span>军供站简介</span>
+            <img th:src="@{/images/dashboard/right.png}" alt="">
+          </div>
+        </div>
+      </div>
+      <div class="col-md-3">
+        <div class="act-bg">
+          <img th:src="@{/images/dashboard/menu_bg.png}" alt="">
+          <img th:src="@{/images/dashboard/menu_bg_active.png}" alt="">
+        </div>
+
+        <div class="act-body">
+          <div class="act-icon">
+            <img th:src="@{/images/dashboard/安防管理.png}" alt="">
+            <img th:src="@{/images/dashboard/安防管理click.png}" alt="">
+          </div>
+          <div class="act-content">
+            <img th:src="@{/images/dashboard/left.png}" alt="">
+            <span>安防管理</span>
+            <img th:src="@{/images/dashboard/right.png}" alt="">
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

resources/templates/main/data.html

@@ -0,0 +1,355 @@
+<!DOCTYPE html>
+<html lang="zh-CN" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity5">
+<div id="t2" th:fragment="main-data" class="chart-page" style="display: none;">
+  <div class="flex-part">
+    <div class="flex-part-3">
+      <div class="count">
+        <dl>
+          <dt id="totalTask">0</dt>
+          <dd>任务总数</dd>
+          <img th:src="@{/images/statistic/数字统计.png}" alt="">
+        </dl>
+        <dl>
+          <dt id="totalPerson">0</dt>
+          <dd>接待军人总数</dd>
+          <img th:src="@{/images/statistic/接待军人总数.png}" alt="">
+        </dl>
+        <dl>
+          <dt id="totalOrg">0</dt>
+          <dd>保障机构数</dd>
+          <img th:src="@{/images/statistic/保障机构数.png}" alt="">
+        </dl>
+        <dl>
+          <dt id="totalEquipment">0</dt>
+          <dd>设备数量</dd>
+          <img th:src="@{/images/statistic/设备数量.png}" alt="">
+        </dl>
+      </div>
+    
+      <div class="panelGroup flex-part" style="padding-bottom:0;">
+        <div class="panel flex-part-2 chart-card">
+          <div class="panel-heading">
+            <img th:src="@{/images/statistic/任务统计.png}" />
+            <span>任务统计</span>
+            <!-- <svg>
+              <defs>
+                  <linearGradient id="grad" x1="0" y1="100%" x2="0" y2="0">
+                      <stop offset="0%" style="stop-color:#6F39B9; stop-opacity:1" />
+                      <stop offset="100%" style="stop-color:#1EAED1; stop-opacity:1" />
+                  </linearGradient>
+              </defs>
+              <text x="0" y="22" fill="url(#grad)" style="font-size:22px">任务统计</text>
+            </svg> -->
+            <div class="selectGroup">
+              <select class="" id="selYear" onchange="taskTimeReport()">
+                  </select>
+            </div>
+          </div>
+          <div class="panel-body">
+            <div class="text-center">
+              <div class="text-center" style="height:300px;" id="taskChart"></div>
+            </div>
+          </div>
+        </div>
+        <div class="flex-part-1">
+          <div class="panel chart-card">
+            <div class="panel-heading">
+              <img th:src="@{/images/statistic/设备分类统计.png}" />
+              <span>设备分类统计</span>
+            </div>
+            <div class="panel-body">
+              <div class="text-center" style="height:260px;" id="devChart"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+
+    </div>
+    <div class="flex-part-1">
+      <div class="panel chart-card" style="margin: 15px 30px 0 0; height: calc(100% - 15px)">
+        <div class="panel-heading">
+          <img th:src="@{/images/statistic/军供保障能力.png}" />
+          <span>军供保障能力</span>
+        </div>
+        <div class="panel-body" style="height: calc(100% - 60px);">
+          <div class="info-text">
+            
+          </div>
+          <ul class="info-list" style="overflow-y: auto; height: 100%;">
+            <li title="常规单日整体膳食供应能力(人次)"><span id="ztssgynl">0</span>常规单日整体膳食供应能力(人次)：</li>
+            <li title="常规单次整体膳食供应能力(人)"><span id="dcztssgynl">0</span>常规单次整体膳食供应能力(人)：</li>
+            <li title="应急单日整体膳食供应能力(人次)"><span id="yjztssgynl">0</span>应急单日整体膳食供应能力(人次)：</li>
+            <li title="应急单次整体膳食供应能力(人)"><span id="yjdcztssgynl">0</span>应急单次整体膳食供应能力(人)：</li>
+            <li title="常规整体住宿供应能力(人)"><span id="ztzsgynl">0</span>常规整体住宿供应能力(人)：</li>
+            <li title="应急整体住宿供应能力(人)"><span id="yjztzsgynl">0</span>应急整体住宿供应能力(人)：</li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="panelGroup">
+    <div class="panel panel-row-2 chart-card">
+      <div class="panel-heading">
+        <img th:src="@{/images/statistic/社会保障机构分类统计.png}" />
+        <span>社会保障机构分类统计</span>
+      </div>
+      <div class="panel-body">
+        <div class="text-center" id="guaChart" style="height:320px"></div>
+      </div>
+    </div>
+    <div class="panel panel-row-2 chart-card">
+      <div class="panel-heading">
+        <img th:src="@{/images/statistic/人员统计.png}" />
+        <span>人员统计</span>
+      </div>
+      <div class="panel-body">
+        <div class="col-sm-6 text-center" id="eduChart" style="height:300px;">
+        </div>
+        <div class="col-sm-6 text-center" id="ageChart" style="height:270px;">
+        </div>
+      </div>
+    </div>
+  </div>
+  <script>
+   function loadPage() {
+     let colArr = commentReport();
+     $
+         .ajax({
+           url : urlPre + "getMainData",
+           dataType : 'json',
+            success : function(data) {
+ 
+             (function mockData(dt) {
+               function rand() {
+                 return Math.floor(100 * Math.random() + 10);
+               }
+ 
+               dt.countData.ageArrNum = dt.countData.ageArrNum.split(',').map(rand).join(',')
+               dt.countData.devArrNum = dt.countData.devArrNum.split(',').map(rand).join(',')
+               dt.countData.guaArrNum = dt.countData.guaArrNum.split(',').map(rand).join(',')
+               dt.countData.eduNum = dt.countData.eduNum.split(',').map(rand).join(',')
+               dt.countData.guaAbiJson.clzs = rand()
+               dt.countData.guaAbiJson.dcztssgynl = rand()
+               dt.countData.guaAbiJson.yjdcztssgynl = rand()
+               dt.countData.guaAbiJson.yjztssgynl = rand()
+               dt.countData.guaAbiJson.ztssgynl = rand()
+               dt.countData.guaAbiJson.ztzsgynl = rand()
+               dt.yearTask = Object.keys(dt.yearTask).map((key) => {
+                 return {[key]: rand()}
+               }).reduce((acc, item) => ({ ...acc, ...item }), {})
+             })(data)
+ 
+             console.log(data)
+ 
+              $("#totalTask").text(data.totalTask);
+              $("#totalOrg").text(data.totalOrg);
+              $("#totalPerson").text(data.totalPerson);
+              $("#totalEquipment").text(data.totalEquipment);
+              //选择年份 按月统计任务
+              var myDate = new Date();
+                         var tYear = myDate.getFullYear();
+                         var lasYear = tYear - 1;
+                         $("#selYear").html("<option value='"+tYear+"'>"+tYear+"年</option><option value='"+lasYear+"'>"+lasYear+"年</option>");
+              var chartData = {};
+                         let yearTask = data.yearTask
+                         let xAxisData = []
+                         let datas = []
+                         for(let key in yearTask){
+                           xAxisData[xAxisData.length] = key
+                           datas[datas.length] = yearTask[key]
+                         }                      
+              chartData.datas = datas;
+              chartData.xAxisData = xAxisData;
+              // setLine("taskChart", chartData);
+ 
+             setChart("#taskChart", getBar1Option(xAxisData, datas))
+                         
+              var comments = data.comments;
+              var commentUl = "";
+              for (var key in comments) {
+                var tmpData = comments[key];
+                commentUl += '<li><a href="###"><h2>'+tmpData.taskNumber+'</h2>'
+                let config_evaluate_item = tmpData.config_evaluate_item.split(",")
+                for(var ky in colArr){
+                  if(config_evaluate_item.indexOf(colArr[ky].substring(0,2)) !=-1){
+                    if(tmpData[colArr[ky]] != null){
+                       let num = tmpData[colArr[ky]];
+                        let total = tmpData[colArr[ky].substring(0,2)]
+                        let addNum = (num/total*100).toFixed() + "%"
+                        commentUl += '<span>'+addNum+'</span>'
+                     }else{
+                       commentUl += '<span>0%</span>'
+                     }
+                  }else{
+                    commentUl += '<span>未选择</span>'
+                  }
+                
+                  
+                }
+                commentUl += '</li>';		
+              }
+              $("#commentUl").html(commentUl);
+              
+              var taskInfos = data.taskInfos;
+              var taskInfoUl = "";
+              for (var key in taskInfos) {
+                var tmpData = taskInfos[key];
+                taskInfoUl += '<li><a href="###"><h2>'+tmpData.taskNumber+'</h2><span>'+tmpData.data_date.substring(0,10)+'</span><span>'
+                               +tmpData.config_supply_main+'</span></a></li>';
+              }
+              $("#taskInfoUl").html(taskInfoUl);
+              //人员学历统计
+              
+              chartData = {};
+              let eduArrNameArr = data.countData.eduArrName.split(",")
+              let eduNumArr = data.countData.eduNum.split(",")
+               datas = {};
+              datas[eduArrNameArr[0]] = eduNumArr[0];
+              datas[eduArrNameArr[1]] = eduNumArr[1];
+              datas[eduArrNameArr[2]] = eduNumArr[2];
+             chartData.datas = datas;
+             chartData.subtext = '人员学历统计';
+             chartData.seriesName = "学历";
+             chartData.addNum = 2
+             // setBar("eduChart", chartData);
+             setChart("#eduChart", getBar3Option(eduArrNameArr, eduNumArr))
+ 
+             
+             //人员年龄统计
+             let ageArrNameArr = data.countData.ageArrName.split(",")
+             let ageArrNum = data.countData.ageArrNum.split(",")
+             datas = {};
+             datas[ageArrNameArr[0]] = ageArrNum[0];
+              datas[ageArrNameArr[1]] = ageArrNum[1];
+              datas[ageArrNameArr[2]] = ageArrNum[2];
+              datas[ageArrNameArr[3]] = ageArrNum[3];
+                 chartData = {};
+              chartData.datas = datas;
+              chartData.subtext = '人员年龄统计';
+              chartData.seriesName = "年龄";
+              chartData.isShowLine= false
+              chartData.isShowTooltip = false
+              // setPie("ageChart", chartData);	
+              var pie2 = setChart("#ageChart", getPie2Option(datas))
+             // 默认选中第一个, 并处理选中逻辑
+             var pie2DataIndex = 0
+             pie2.on('mousemove', function(e) {
+               pie2.dispatchAction({ type: 'downplay', dataIndex: pie2DataIndex });
+               pie2.dispatchAction({ type: 'highlight', dataIndex: e.dataIndex });
+               pie2DataIndex = e.dataIndex
+             });
+             pie2.dispatchAction({ type: 'highlight', dataIndex: pie2DataIndex });
+ 
+              //机构分类统计
+              let guaArrNameArr = data.countData.guaArrName.split(",");
+              let guaArrNumArr = data.countData.guaArrNum.split(",");
+              datas = {};						
+              for(var i=0;i<guaArrNameArr.length;i++){
+                datas[guaArrNameArr[i]] = guaArrNumArr[i];
+              }
+              chartData = {};
+              chartData.datas = datas;
+              chartData.subtext = '';
+              chartData.seriesName = "保障机构类别";
+              chartData.isShowLine= false
+              chartData.isShowTooltip = false
+              // setBar("guaChart", chartData);
+             setChart("#guaChart", getBar2Option(guaArrNameArr, guaArrNumArr))
+ 
+              //供应设备分类统计
+              let devArrName = data.countData.devArrName.split(",");
+              let devArrNum = data.countData.devArrNum.split(",");
+              datas = {};						
+              for(var i=0;i<devArrName.length;i++){
+                datas[devArrName[i]] = devArrNum[i];
+              }
+              chartData = {};
+              chartData.datas = datas;
+              chartData.subtext = '';
+              chartData.seriesName = "设备类别";
+              chartData.isShowLine= false
+              chartData.isShowTooltip = false
+              // setPie("devChart", chartData);
+             var pie1 = setChart("#devChart", getPie1Option(datas));
+             // 默认选中第一个, 并处理选中逻辑
+             var pie1DataIndex = 0
+             pie1.on('mousemove', function(e) {
+               pie1.dispatchAction({ type: 'downplay', dataIndex: pie1DataIndex });
+               pie1.dispatchAction({ type: 'highlight', dataIndex: e.dataIndex });
+               pie1DataIndex = e.dataIndex
+             });
+             pie1.dispatchAction({ type: 'highlight', dataIndex: pie1DataIndex });
+ 
+              let guaAbiJson = data.countData.guaAbiJson
+              $(".info-list").find("span").each(function(){
+                let objId = $(this).attr("id")
+                if(guaAbiJson[objId] != null){
+                  $(this).text(guaAbiJson[objId]);
+                }					 		
+              })
+              let config_service_ability = guaAbiJson.config_service_ability
+              let serviceArr = config_service_ability.split(",")
+              for(let key in serviceArr){
+                if(serviceArr[key] != null && serviceArr[key] != ""){
+                  $(".info-text").append('<span class="label">'+serviceArr[key]+'</span>')
+ 
+                }
+              }
+            }
+          });
+             
+   }
+   function taskTimeReport() {
+     let year = $("#selYear").val()
+     $
+     .ajax({
+       url : urlPre + "taskTimeReport?yearTime="+year,
+       dataType : 'json',
+         success : function(yearTask) {
+           var chartData = {};
+                     let xAxisData = []
+                     let datas = []
+                     for(let key in yearTask){
+                       xAxisData[xAxisData.length] = key
+                       datas[datas.length] = yearTask[key]
+                     }                      
+                     chartData.datas = datas;
+           chartData.xAxisData = xAxisData;
+           chartData.addNum = 2;
+           setLine("taskChart", chartData);	
+         }
+     })
+   }
+   function commentReport(){
+     let queryParams = {};
+     queryParams.schCols = 'itemCode,itemName';
+     queryParams.limit = 200
+     queryParams["sorts[0].field"] = 'sort';
+     queryParams["sorts[0].order"] = 'asc';
+     queryParams.search_LENGTH_itemCode = 2;
+     let colArr = []
+     $.ajax({
+       type : 'post',
+       async : false,
+       url : urlPre + 'api/commentItem/page',
+       data:queryParams,
+       dataType : 'json',
+       success : function(data) {
+         var rows = data.rows;
+         for(var m = 0; m < rows.length; m++){
+           if(m<3){
+             let row = rows[m]
+             let str = '<span>'+row.itemName+'(优)</span>'
+                       $("#commentLi").append(str)
+                       colArr[colArr.length] = row.itemCode + "_1"
+           }
+         
+         }
+       }
+     });	
+     return colArr;
+   }
+ 
+ </script> 
+</div>