feats

resources/static/css/common.css

@@ -24,22 +24,23 @@
   margin: 0 1em;
   border-bottom: 4px solid rgba(0, 0, 0, 0);
 }
-.nav-menu .nav-menu-item + .nav-menu-item::before {
-  content: '';
-  height: 0.8em;
-  border-left: 2px solid #547EF5;
-  transform: rotate(20deg);
-  display: block;
-  position: absolute;
-  top: calc(50% - 0.4em);
-}
 .nav-menu .nav-menu-item span {
   font-size: 20px;
   color: rgba(255, 255, 255, 0.8);
 }
 .nav-menu .nav-menu-item.active div {
+  position: relative;
   border-bottom: 4px solid #3CBAF5;
-  background: linear-gradient(rgba(36, 103, 176, 0), #2467b0);
+}
+.nav-menu .nav-menu-item.active div::after {
+  content: "";
+  width: 0;
+  height: 0;
+  border: 8px solid transparent;
+  border-bottom-color: #3CBAF5;
+  position: absolute;
+  left: calc(50% - 8px);
+  bottom: 0;
 }
 .nav-menu .nav-menu-item.active span {
   color: #fff;
@@ -53,8 +54,77 @@
 .chart-page {
   width: 100%;
   height: 100%;
+  overflow-y: auto;
   background: #071C51;
 }
+.chart-page .flex-part {
+  display: flex;
+  justify-content: space-between;
+}
+.chart-page .flex-part .flex-part-3 {
+  flex: 3;
+}
+.chart-page .flex-part .flex-part-2 {
+  flex: 3;
+}
+.chart-page .flex-part .flex-part-1 {
+  flex: 1;
+}
+.chart-page .count {
+  border-radius: 20px;
+}
+.chart-page .count dl {
+  overflow: hidden;
+  position: relative;
+  box-sizing: border-box;
+  padding-left: 150px;
+}
+.chart-page .count dl dt,
+.chart-page .count dl dd {
+  padding: 0;
+}
+.chart-page .count dl img {
+  position: absolute;
+  display: block;
+  top: 24px;
+  left: 30px;
+  width: 88px;
+  height: 88px;
+}
+.chart-page .count dl::before,
+.chart-page .count dl::after {
+  content: "";
+  position: absolute;
+  background: #FFFFFF;
+  opacity: 0.1;
+  border-radius: 50%;
+  font-size: 0;
+}
+.chart-page .count dl::before {
+  width: 166px;
+  height: 140px;
+  left: calc(100% - 88px);
+  top: -40px;
+}
+.chart-page .count dl::after {
+  width: 281px;
+  height: 177px;
+  border-radius: 50%;
+  left: calc(100% - 160px);
+  top: 81px;
+}
+.chart-page .count dl:nth-child(1) {
+  background: linear-gradient(90deg, #3886D6, #003789);
+}
+.chart-page .count dl:nth-child(2) {
+  background: linear-gradient(90deg, #29A0B1, #3C1A63);
+}
+.chart-page .count dl:nth-child(3) {
+  background: linear-gradient(90deg, #1570AB, #343894);
+}
+.chart-page .count dl:nth-child(4) {
+  background: linear-gradient(90deg, #2788B6, #083A8C);
+}
 .chart-card {
   position: relative;
   z-index: 0;
@@ -69,8 +139,19 @@
   box-sizing: border-box;
 }
 .chart-card.panel .panel-heading {
+  position: relative;
   box-sizing: border-box;
-  padding: 1em;
+  padding: 1em 1em 0 1em;
+}
+.chart-card.panel .panel-heading .selectGroup {
+  position: absolute;
+  top: 1em;
+  right: 1em;
+}
+.chart-card.panel .panel-heading .selectGroup select {
+  background: transparent;
+  border: 0;
+  color: #FFFFFF;
 }
 .chart-card.panel .panel-heading img {
   width: 28px;
@@ -83,14 +164,43 @@
   font-size: 22px;
   font-weight: 500;
   color: transparent;
-  background-clip: text;
   background-image: linear-gradient(0deg, #6F39B9 0%, #1EAED1 100%);
   vertical-align: middle;
+  background-clip: text;
+  -webkit-background-clip: text;
 }
 .chart-card.panel .panel-body {
   padding: 0;
   background: #071C51;
 }
+.chart-card.panel .panel-body .info-list li {
+  color: rgba(255, 255, 255, 0.6);
+  background: transparent;
+  height: 45px;
+  line-height: 45px;
+  font-size: 16px;
+  padding: 0 1em;
+  margin: 0 1em;
+  width: calc(100% - 2em);
+  box-sizing: border-box;
+}
+.chart-card.panel .panel-body .info-list li span {
+  color: #fff;
+}
+.chart-card.panel .panel-body .info-list li:nth-child(odd) {
+  color: #fff;
+  background-color: rgba(255, 255, 255, 0.05);
+}
+.chart-card.panel .panel-body .info-list li::before {
+  content: '';
+  display: inline-block;
+  width: 4px;
+  height: 4px;
+  border-radius: 50%;
+  background-color: rgba(255, 255, 255, 0.5);
+  vertical-align: middle;
+  margin-right: 1em;
+}
 @keyframes chart-card-rotate {
   100% {
     transform: rotate(1turn);

resources/static/css/public.css

@@ -22,7 +22,7 @@ img{border: 0;}
 
 .header{position:absolute;z-index:100;top:0;left:0;width:100%;}
 .left{position:absolute;z-index:98;top:98px;bottom:40px;left:0;}
-.layout-content{position:absolute;z-index:97;top:98px;bottom:40px;left:240px;right:0;}
+.layout-content{position:absolute;z-index:97;top:74px;bottom:40px;left:240px;right:0;}
 
 .footer{background:var(--main-bg);text-align:center;height:40px;line-height:40px;color:#FFF;position:absolute;left:0;right:0;bottom:0;}
 

resources/static/js/chart/chart.js

@@ -95,6 +95,12 @@ function getBar2Option(xAxisData, seriesData) {
       },
       type: 'value'
     },
+    grid: {
+      top: 20,
+      left: 50,
+      right: 20,
+      bottom: 70,
+    },
     color: ['#9242D1'],
     animationEasing: 'elasticOut',
     series: [

resources/templates/common/common_menu.html

@@ -20,7 +20,7 @@
       }
     }
   </script>
-  <a class="help-doc" download="操作手册.pdf" th:href="@{/js/操作手册.pdf}" target="_blank" style="width: 0"></a>
+  <a class="help-doc" th:href="@{/js/操作手册.pdf}" target="_blank" style="width: 0"></a>
   <div class="nav-menu-item active" onclick="onNavMenuClick(this, 'nav-menu-index')">
     <div><span>首页</span></div>
   </div>

resources/templates/main.html

@@ -19,73 +19,94 @@
 
 <body>
 	<div class="chart-page">
-	<div class="count">
-		<dl>
-			<dt id="totalTask">0</dt>
-			<dd>任务总数</dd>
-		</dl>
-		<dl>
-			<dt id="totalPerson">0</dt>
-			<dd>接待军人总数</dd>
-		</dl>
-		<dl>
-			<dt id="totalOrg">0</dt>
-			<dd>保障机构数</dd>
-		</dl>
-		<dl>
-			<dt id="totalEquipment">0</dt>
-			<dd>设备数量</dd>
-		</dl>
-	</div>
+		<div class="flex-part">
+			<div class="flex-part-3">
 
-	<div class="panelGroup" style="padding-bottom:0;">
-		<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="selectGroup">
-					<label>选择年份</label>
-					<select class="" id="selYear" onchange="taskTimeReport()">
-			        </select>
-				</div>
-				<div class="text-center">
-					<div class="text-center" style="height:300px;" id="taskChart"></div>
-				</div>
-			</div>
-		</div>
-		<div class="panel-row-2" style="width: 50%;">
-			<div class="panel panel-row-2 chart-card">
-				<div class="panel-heading">
-					<img th:src="@{/images/statistic/设备分类统计.png}" />
-					<span>设备分类统计</span>
+				<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="panel-body">
-					<div class="text-center" style="height:260px;" id="devChart"></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="panel panel-row-2 chart-card">
-				<div class="panel-heading">
-					<img th:src="@{/images/statistic/军供保障能力.png}" />
-					<span>军供保障能力</span>
-				</div>
-				<div class="panel-body" style="overflow-y: auto;">
-					<div class="info-text">
-						
+			<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>
-					<ul class="info-list">
-						<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">
@@ -93,7 +114,7 @@
 				<span>社会保障机构分类统计</span>
 			</div>
 			<div class="panel-body">
-				<div class="text-center" id="guaChart" style="height:320px;margin-top: -40px;"></div>
+				<div class="text-center" id="guaChart" style="height:320px"></div>
 			</div>
 		</div>
 		<div class="panel panel-row-2 chart-card">
@@ -102,9 +123,9 @@
 				<span>人员统计</span>
 			</div>
 			<div class="panel-body">
-				<div class="col-sm-6 text-center" id="eduChart" style="height:300px;margin-top: -15px;">
+				<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;margin-top: -15px;">
+				<div class="col-sm-6 text-center" id="ageChart" style="height:270px;">
 				</div>
 			</div>
 		</div>