feats

resources/static/css/common.css

@@ -65,16 +65,30 @@
 .chart-card,
 .chart-card::before,
 .chart-card::after {
+  overflow: hidden;
   box-sizing: border-box;
 }
 .chart-card.panel .panel-heading {
+  box-sizing: border-box;
+  padding: 1em;
+}
+.chart-card.panel .panel-heading img {
+  width: 28px;
+  height: 28px;
+  vertical-align: middle;
+  display: inline-block;
+  margin-right: 0.5em;
+}
+.chart-card.panel .panel-heading span {
   font-size: 22px;
   font-weight: 500;
   color: transparent;
   background-clip: text;
-  background-image: linear-gradient(180deg, #6F39B9 0%, #1EAED1 100%);
+  background-image: linear-gradient(0deg, #6F39B9 0%, #1EAED1 100%);
+  vertical-align: middle;
 }
 .chart-card.panel .panel-body {
+  padding: 0;
   background: #071C51;
 }
 @keyframes chart-card-rotate {

resources/static/js/chart/chart.js

@@ -38,6 +38,12 @@ function getBar1Option(xAxisData, seriesData) {
       },
       type: 'value'
     },
+    grid: {
+      top: 20,
+      left: 50,
+      right: 20,
+      bottom: 50,
+    },
     series: [
       {
         data: seriesData,
@@ -299,11 +305,17 @@ function getPie2Option(seriesData) {
       {
         type: 'pie',
         top: '10%',
-        radius: ['50%', '60%'],
+        radius: ['60%', '70%'],
         label: {
           show: false,
           position: 'center',
           lineHeight: 28,
+          borderRadius: [100, 100, 100, 100],
+          borderColor: '#FD8F00',
+          borderWidth: 2,
+          padding: 16,
+          width: 100,
+          height: 100,
           formatter: [
             '{s1|{d}%}',
             '{s2|{b}}',
@@ -334,7 +346,7 @@ function getPie2Option(seriesData) {
           show: false
         },
         data: data,
-      }
+      },
     ]
   };
 }

resources/static/less/chart-card.less

@@ -16,19 +16,34 @@
 	padding: 1rem;
 
   &, &::before, &::after {
+    overflow: hidden;
     box-sizing: border-box;
   }
 
   &.panel {
     .panel-heading {
-      font-size: 22px;
-      font-weight: 500;
-      color: transparent;
-      background-clip: text;
-      background-image: linear-gradient(180deg, #6F39B9 0%, #1EAED1 100%);
+      box-sizing: border-box;
+      padding: 1em 1em 0 1em;
+
+      img {
+        width: 28px;
+        height: 28px;
+        vertical-align: middle;
+        display: inline-block;
+        margin-right: .5em;
+      }
+      span {
+        font-size: 22px;
+        font-weight: 500;
+        color: transparent;
+        background-clip: text;
+        background-image: linear-gradient(0deg, #6F39B9 0%, #1EAED1 100%);
+        vertical-align: middle;
+      }
     }
 
     .panel-body {
+      padding: 0;
       background: @chart-card-bg;
     }
   }

resources/templates/main.html

@@ -39,29 +39,38 @@
 	</div>
 
 	<div class="panelGroup" style="padding-bottom:0;">
-		<div class="panel panel-row-2">
-			<div class="panel-heading">任务统计</div>
-			<div class="panel-body chart-card">
+		<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" style="height:240px;overflow: hidden;">
-					<div class="text-center" style="height:300px;margin-top: -30px;" id="taskChart"></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">
-				<div class="panel-heading">设备分类统计</div>
-				<div class="panel-body chart-card">
+			<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" style="height:260px;" id="devChart"></div>
 				</div>
 			</div>
-			<div class="panel panel-row-2">
-				<div class="panel-heading">军供保障能力</div>
-				<div class="panel-body chart-card" style="overflow-y: auto;">
+			<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>
@@ -78,14 +87,20 @@
 		</div>
 	</div>
 	<div class="panelGroup">
-		<div class="panel panel-row-2">
-			<div class="panel-heading">社会保障机构分类统计</div>
-			<div class="panel-body chart-card">
+		<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;margin-top: -40px;"></div>
 			</div>
 		</div>
 		<div class="panel panel-row-2 chart-card">
-			<div class="panel-heading">人员统计</div>
+			<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;margin-top: -15px;">
 				</div>