From 2322b52676ebc34599a0cf38c031319353a2de40 Mon Sep 17 00:00:00 2001
From: mkm <727897186@qq.com>
Date: Fri, 10 Feb 2023 17:41:33 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=96=B03?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/admin/view/index/main.html | 465 +++++++++++++++++++++++++++++++++
 1 file changed, 465 insertions(+)
 create mode 100644 app/admin/view/index/main.html

diff --git a/app/admin/view/index/main.html b/app/admin/view/index/main.html
new file mode 100644
index 0000000..8db5333
--- /dev/null
+++ b/app/admin/view/index/main.html
@@ -0,0 +1,465 @@
+{extend name="common/base"/}
+{block name="style"}
+<style type="text/css">
+	.dashboard-num table {width: 100%;}
+	.dashboard-num td {text-align: center; padding: 16px 0; width: 20%;border-left: 1px solid #f1f1f1; position: relative;}
+	.dashboard-num td:nth-child(1) { border-left: none}
+	.dashboard-num .num-title { padding-bottom: 10px; color: #999;}
+	.dashboard-num .blue {font-size: 20px; font-weight: 300;}
+	.dashboard-num td .badge {position: absolute;top: 0; right: 0;}
+	.dashboard-num td .badge span { padding: 2px 4px; font-size: 12px; border-radius: 0 0 0 4px;}
+	.dashboard-total td {border-top: 1px solid #f1f1f1}
+	.dashboard-logs .layui-timeline-item {padding-bottom: 1px;}
+	.info-td { width: 90px; text-align: right;background-color: #fafafa; color: #999; padding: 5px 3px;}
+	.info-td {width: 90px; text-align: right;background-color: #fafafa; color: #999; padding: 5px 3px;}
+	.layui-card-body .layui-timeline-title {
+		padding-bottom: 0;
+		font-size: 14px;
+	}
+	.layui-card-body .layui-timeline-item {
+		padding-bottom: 5px;
+	}
+</style>
+{/block}
+<!-- 主体 -->
+{block name="body"}
+<div class="p-3">
+	<div class="layui-row layui-col-space12">
+		<div class="">
+			<div class="layui-row layui-col-space12">
+				<div class="layui-col-md12">
+					<div class="layui-card dashboard-num">
+						<table>
+							<tr>
+								<td>
+									<div class="num-title">总会员数</div>
+									<div class="blue">{$totaluser}</div>
+								</td>
+								<td>
+									<div class="num-title">老人人数</div>
+									<div class="blue">{$old_num}</div>
+								</td>
+								<td>
+									<div class="num-title">儿童人数</div>
+									<div class="blue">{$children_num}</div>
+								</td>
+								<td>
+									<div class="num-title">未婚男</div>
+									<div class="blue">{$unmarried_man_num}</div>
+								</td>
+								<td>
+									<div class="num-title">未婚女</div>
+									<div class="blue">{$unmarried_woman_num}</div>
+								</td>
+							</tr>
+							<tr>
+
+								<td>
+									<div class="num-title">残疾人数</div>
+									<div class="blue">{$whether_disabled_num}</div>
+								</td>
+								<td>
+									<div class="num-title">参保人数</div>
+									<div class="blue">{$insurance_type_num}</div>
+								</td>
+								<td>
+									<div class="num-title">少数名族人数</div>
+									<div class="blue">{$nation_s_num}</div>
+								</td>
+								<td>
+									<div class="num-title">汉族人数</div>
+									<div class="blue">{$nation_h_num}</div>
+								</td>
+								<td>
+									<div class="num-title">工作人员数</div>
+									<div class="blue">{$work_num}</div>
+								</td>
+							</tr>
+						</table>
+					</div>
+
+					<div class="layui-card dashboard-num">
+						<table>
+							<tr>
+								<td>
+									<div class="num-title">土地总面积</div>
+									<div class="blue">{$land_area_num}</div>
+								</td>
+								<td>
+									<div class="num-title">荒地</div>
+									<div class="blue">{$waste_land_area}</div>
+								</td>
+								<td>
+									<div class="num-title">农田水利</div>
+									<div class="blue">{$sum_218}</div>
+								</td>
+								<td>
+									<div class="num-title">坑塘</div>
+									<div class="blue">{$sum_217}</div>
+								</td>
+								<td>
+									<div class="num-title">养殖</div>
+									<div class="blue">{$sum_216}</div>
+								</td>
+							</tr>
+							<tr>
+								<td>
+									<div class="num-title">牧草地</div>
+									<div class="blue">{$sum_215}</div>
+								</td>
+								<td>
+									<div class="num-title">林地</div>
+									<div class="blue">{$sum_214}</div>
+								</td>
+								<td>
+									<div class="num-title">耕地</div>
+									<div class="blue">{$sum_70}</div>
+								</td>
+								<td>
+									<div class="num-title">园地</div>
+									<div class="blue">{$sum_69}</div>
+								</td>
+							</tr>
+						</table>
+					</div>
+					<div class="layui-card">
+						<div id="chartYear" style="width: 100%;height:240px;"></div>
+					</div>
+
+				</div>
+			</div>
+		</div>
+	</div>
+</div>
+{/block}
+<!-- /主体 -->
+
+<!-- 脚本 -->
+{block name="script"}
+<script src="https://cdn.staticfile.org/echarts/5.3.0/echarts.min.js"></script>
+<script>
+	function getLogs() {
+		$.ajax({
+			url: "/admin/api/get_log_list",
+			type: 'post',
+			data: {
+				page: 1,
+				limit: 20
+			},
+			success: function (e) {
+				if (e.code == 0) {
+					var html = '';
+					$.each(e.data, function (key, value) {
+						html += '<li class="layui-timeline-item">\
+										<i class="layui-icon layui-timeline-axis"></i>\
+										<div class="layui-timeline-content layui-text">\
+										  <div class="layui-timeline-title"><span title="'+ value.id + '">' + value.times + '</span>，' + value.content + '</div>\
+										</div>\
+									  </li>';
+					});
+					$('#logs').html(html);
+				}
+			}
+		})
+	}
+
+	const moduleInit = ['tool'];
+	function gouguInit() {
+		var table = layui.table;
+		$('body').on('click','[data-event="pay"]',function(){
+			var src=$(this).attr('src');
+			layer.open({
+				type:1,
+				title:'感谢您给作者加鸡腿🍗🍗',
+				content:'<img src="'+src+'" style="width:100%" align=center />',
+			});
+		})
+		// getLogs();
+		//注册用户
+		table.render({
+			elem: '#UserList'
+			, url: '/admin/api/get_user_list' //数据接口
+			, page: false //开启分页
+			, cols: [[ //表头
+				{ field: 'username', title: '用户名'}
+				,{ field: 'username', title: '昵称', align: 'center', 'width': 120}
+				,{ field: 'sex', title: '性别','width': 60, align: 'center', templet: function (d) {
+						let str='-';
+						if(d.sex==1){
+							str='男';
+						}
+						else if(d.sex==2){
+							str='女';
+						}
+						return str;
+					}}
+				, {
+					field: 'headimgurl', title: '头像', align: 'center','width': 60, templet: function (d) {
+						return '<img src="' + d.headimgurl + '" width="20" height="20" />';
+					}
+				}
+				, { field: 'login_num', title: '登录次数', align: 'center','width': 100}
+				, { field: 'last_login_time', title: '最后登录时间', align: 'center','width': 168}
+			]]
+		});
+
+		//文章
+		table.render({
+			elem: '#Article'
+			, url: '/admin/api/get_article_list' //数据接口
+			, page: false //开启分页
+			, cols: [[ //表头
+				{ field: 'title', title: '文章标题'}
+				, { field: 'cate_title', title: '文章分类', align: 'center','width': 150 }
+				, { field: 'read', title: '访问量', align: 'center','width': 100 }
+				, { field: 'create_time', title: '发布时间', align: 'center','width': 168}
+			]]
+		});
+		// get_view_data();
+	}
+
+
+	function setHour(num) {
+		var str = num + ':00';
+		if (num < 10) {
+			str = '0' + num + ':00';
+		}
+		return str;
+	}
+	var chartView = echarts.init(document.getElementById('chartView'));
+	function get_view_data() {
+		$.ajax({
+			url: "/admin/api/get_view_data",
+			type: 'post',
+			data: {},
+			success: function (e) {
+				if (e.code == 0) {
+					var data_first = e.data.data_first;
+					var data_second = e.data.data_second;
+					archiveCalendar = e.data.data_three;
+					var myDate = new Date();
+					var nowHour = myDate.getHours(); //获取当前小时数(0-23)
+					var xData = [];
+					var yData1 = [];
+					var yData2 = [];
+					$.each(data_first, function (key, value) {
+						if (key <= nowHour) {
+							yData1.push(value);
+						}
+					});
+					$.each(data_second, function (key, value) {
+						xData.push(setHour(key));
+						yData2.push(value);
+					});
+					var ops = {
+						title: {
+							top: '12px',
+							text: '今日与昨日访问统计',
+							left: '10px',
+							textStyle: {
+								fontSize: '18',
+								color: '#333',
+							}
+						},
+						color: ["#1AAD19", "#1890FF"],
+						grid: {
+							left: '16px',
+							right: '30px',
+							bottom: '12px',
+							top: '60px',
+							containLabel: true
+						},
+						tooltip: {
+							trigger: 'axis',
+							axisPointer: {
+								type: 'cross',
+								crossStyle: {
+									color: '#999'
+								}
+							}
+						},
+						toolbox: {
+							show: true,
+						},
+						legend: {
+							data: ["今日", "昨日"],
+							top: '16px',
+						},
+						xAxis: [{
+							type: "category",
+							boundaryGap: !1,
+							data: xData,
+							axisLine: {
+								lineStyle: {
+									color: '#999999',
+									width: 1,
+								}
+							},
+						}],
+						yAxis: [{
+							type: "value",
+							axisLine: {
+								show: true,
+								lineStyle: {
+									color: '#999999',
+									width: 1,
+								}
+							},
+						}],
+						series: [{
+							name: "今日",
+							type: "line",
+							smooth: !0,
+							itemStyle: {
+								normal: {
+									areaStyle: {
+										type: "default",
+										opacity: 0.2
+									}
+								}
+							},
+							data: yData1
+						}, {
+							name: "昨日",
+							type: "line",
+							smooth: !0,
+							itemStyle: {
+								normal: {
+									areaStyle: {
+										type: "default",
+										opacity: 0.2
+									}
+								}
+							},
+							data: yData2
+						}]
+					}
+					chartView.setOption(ops);
+
+
+					let myChart = echarts.init(document.getElementById('chartYear'));
+					let option = {
+						title: {
+							top: '12px',
+							text: '近一年访问统计',
+							left: '10px',
+							textStyle: {
+								fontSize: '18',
+								color: '#333',
+							}
+						},
+						tooltip: {
+							padding: 6,
+							formatter: function (obj) {
+								var value = obj.value;
+								return '<div style="font-size: 12px;">' + value[0] + '：' + value[1] + ' 个访客</div>';
+							}
+						},
+						visualMap: {
+							min: 0,
+							max: 300,
+							show: false,
+							inRange: {
+								color: ['#fafafa', '#1AAD19']
+							}
+						},
+						calendar: {
+							top: 75,
+							left: 50,
+							right: 20,
+							range: getRange(),
+							cellSize: ['auto', 21],
+							splitLine: {
+								lineStyle: {
+									color: '#aaa',
+									type: 'dashed'
+								}
+							},
+							itemStyle: {
+								borderWidth: 0.5
+							},
+							yearLabel: { show: false },
+							monthLabel: {
+								nameMap: 'cn',
+								fontSize: 12
+							},
+							dayLabel: {
+								show: true,
+								formatter: '{start}  1st',
+								fontWeight: 'lighter',
+								nameMap: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
+								fontSize: 12
+							}
+						},
+						series: [{
+							type: 'heatmap',
+							coordinateSystem: 'calendar',
+							calendarIndex: 0,
+							data: getDay()
+						}]
+					};
+					myChart.setOption(option);
+
+					setTimeout(function () {
+						window.onresize = function () {
+							chartView.resize();
+							myChart.resize();
+						}
+					})
+					console.log(e.data);
+				}
+			}
+		})
+
+		var archiveCalendar = {};
+		function getRange() {
+			let today = new Date();
+			let tYear = today.getFullYear();
+			let tMonth = today.getMonth() + 1;
+			let tDate = today.getDate();
+			let dateFirst = tYear + "-" + tMonth + "-" + tDate;
+			let datelast = (tYear - 1) + "-" + tMonth + "-" + tDate;
+			let dataRange = [];
+			dataRange.push(dateFirst);
+			dataRange.push(datelast);
+			return dataRange;
+		}
+
+		function getDay() {
+			var today = new Date();
+			var dayArray = [];
+			for (var i = 0; i < 366; i++) {
+				var targetday_milliseconds = today.getTime() - 1000 * 60 * 60 * 24 * i;
+				var date = new Date(targetday_milliseconds);
+				dayArray.push(retunDay(date));
+			}
+			return dayArray;
+		}
+
+		function retunDay(day) {
+			var tYear = day.getFullYear();
+			var tMonth = day.getMonth();
+			var tDate = day.getDate();
+			tMonth = tMonth + 1;
+			if (tMonth.toString().length == 1) {
+				tMonth = "0" + tMonth;
+			}
+			if (tDate.toString().length == 1) {
+				tDate = "0" + tDate;
+			}
+			var dateStr = tYear + "-" + tMonth + "-" + tDate;
+			var dateArray = [];
+			dateArray.push(dateStr);
+			if (archiveCalendar[dateStr]) {
+				dateArray.push(archiveCalendar[dateStr]);
+			}
+			else {
+				dateArray.push(0);
+			}
+			return dateArray;
+		}
+	}
+
+</script>
+{/block}
+<!-- /脚本 -->
\ No newline at end of file