codegenerator.git

			@@ -15,7 +15,7 @@

			<!-- <link rel="stylesheet" href="./css/theme5.css"> -->

			<script type="text/javascript" src="js/xadmin.js"></script>

			<script src="js/vue.min.js" type="text/javascript" charset="utf-8"></script>
			<script src="js/http.js" type="text/javascript" charset="utf-8"></script>
			<script src="lib/layui/layui.js" charset="utf-8"></script>
			@@ -23,6 +23,7 @@
			<!--[if lt IE 9]>
			<script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
			<script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
			<script type="text/javascript" src="js/xadmin.js"></script>
			<![endif]-->
			<script>
			// 是否开启刷新记忆tab功能
			@@ -41,33 +42,33 @@
			border-left: none;
			}

			.time-psan {
			.time-span {
			height: 25px;
			display: flex;
			margin: 20px 0;
			}

			.time-psan div {
			.time-span div {
			width: 50px;
			height: 100%;
			text-align: center;
			line-height:25px;
			line-height: 25px;
			font-size: 12px;
			background: #F5F5F5;
			color: #666;
			cursor: pointer;
			}

			.time-psan .active {
			.time-span .active {
			background: #DDDDDD;
			}

			.time-psan :first-child {
			.time-span :first-child {
			border-top-left-radius: 8px;
			border-bottom-left-radius: 8px;
			}

			.time-psan :last-child {
			.time-span :last-child {
			border-top-right-radius: 8px;
			border-bottom-right-radius: 8px;
			}
			@@ -78,140 +79,183 @@
			</head>

			<body>
			<div class="layui-card">
			<div class="layui-card-body">
			<blockquote class="layui-elem-quote">
			新增用户统计
			</blockquote>
			<form class="layui-form layui-col-space5">
			<div class="layui-inline layui-show-xs-block">
			<input type="text" name="date" lay-verify="" placeholder="" autocomplete="off"
			class="layui-input">
			</div>
			<div class="layui-inline layui-show-xs-block">
			<button id="search" class="layui-btn" lay-submit="" lay-filter="search">
			<i class="layui-icon"></i></button>
			</div>
			</form>

			<div class="time-psan">
			<div key="hour">小时</div>
			<div key="day" class="active">天</div>
			<div key="month">月</div>
			<div id="content">
			<div class="layui-card" v-for="item,index in charts" :id="item.type" :data-index="index">
			<div class="layui-card-body">
			<blockquote class="layui-elem-quote">
			{{item.title}}
			</blockquote>
			<form class="layui-form layui-col-space5">
			<div class="layui-inline layui-show-xs-block">
			<input type="text" name="date" lay-verify="" placeholder="" autocomplete="off"
			class="layui-input">
			</div>
			<div class="layui-inline layui-show-xs-block">
			<!-- :lay-filter="'search-'+item.type" -->
			<button class="search" class="layui-btn" lay-submit="" :lay-filter="'search-'+item.type">
			<i class="layui-icon"></i></button>
			</div>

			<input type="hidden" :value="index" name="index">
			</form>

			<div class="time-span">
			<div data-key="hour" @click="changeSpan(index,$event)">小时</div>
			<div data-key="day" class="active" @click="changeSpan(index,$event)">天</div>
			<div data-key="month" @click="changeSpan(index,$event)">月</div>
			</div>
			<canvas :id="'chart-'+item.type" width="100%" height="25"></canvas>
			</div>
			<canvas id="myChart" width="100%" height="25"></canvas>
			</div>
			</div>

			</body>


			<script>
			$(function () {
			var app = new Vue({
			el: "#content",
			data: {
			charts: [
			{
			type: 'user',
			url: '/admin/api/user/statisticRegisterUser',
			title: '新增用户统计'
			}
			],
			chartsCanvas: {}
			},
			mounted: function () {
			setTimeout(function () {
			app.init();
			}, 10);

			//时间间隔点击事件
			$(".time-psan div").click(function () {
			if (!$(this).hasClass("active")) {
			$(".time-psan div").removeClass("active");
			$(this).addClass("active");
			$("#search").click();
			},
			methods: {
			init: function () {
			var $this = this;
			layui.use(['laydate', 'form'], function () {
			var laydate = layui.laydate,
			form = layui.form;
			for (var i = 0; i < $this.charts.length; i++) {
			var chartConfig = $this.charts[i];
			console.log("初始化 ", chartConfig.type, i);
			//渲染日期输入框
			var d = new Date();
			var nowDay = d.format('yyyy-MM-dd');
			laydate.render({
			elem: "#" + chartConfig.type + " input[name=date]" //指定元素
			,
			index: i,
			type: 'date'
			,
			trigger: 'click'
			//,lang: 'en'
			//,theme: 'grid'
			,
			range: true //开启日期范围，默认使用“-”分割
			// ,min: '2020-01-01'
			//,max: '2021-5-9'
			//,value: '2021-05-09 12:06:09'
			,
			value: new Date(d.getTime() - 1000 * 60 * 60 * 24 * 7).format('yyyy-MM-dd') + " - " + nowDay
			,
			done: function (value, date, endDate) {
			console.log(value, date, endDate, this.index);

			$("#" + $this.charts[this.index].type + " .search").click();
			},
			change: function (value, date, endDate) {
			}
			});
			//搜索条件
			form.on("submit(search-" + chartConfig.type + ")", function (data) {
			var index = parseInt(data.field.index);
			var span = $("#" + $this.charts[index].type + " .time-span .active").attr("data-key");
			var config = $this.charts[index];
			app.requestData(config.url, data.field.date, span, function (labels, values) {
			$this.draw(labels, values, $this.getLineChart(config));
			});
			return false;
			});

			//查询
			$("#" + chartConfig.type + " .search").click();
			}

			// $("#search-user").click();
			});
			},
			requestData: function (url, dateValue, span, callback) {
			var date = dateValue.split(" - ");
			//"/admin/api/user/statisticRegisterUser"
			ksapp.post(url, {
			startTime: new Date(date[0]).getTime() - 1000 * 60 * 60 * 8,
			endTime: new Date(date[1]).getTime() - 1000 * 60 * 60 * 8 + 1000 * 60 * 60 * 24 - 1,
			span: span
			}, function (res) {
			if (res.code == 0) {
			var labels = new Array();
			var values = new Array();
			for (var i = 0; i < res.data.list.length; i++) {
			labels.push(res.data.list[i].time);
			values.push(res.data.list[i].number);
			}
			callback(labels, values);
			} else {
			layer.msg(res.msg);
			}
			}, function (res) {
			});
			},
			getLineChart: function (config) {
			if (this.chartsCanvas[config.type] == null) {
			var ctx = document.getElementById("chart-" + config.type).getContext('2d');
			this.chartsCanvas[config.type] = new Chart(ctx, {
			type: 'line',
			data: {
			labels: [],
			datasets: [{
			label: config.title,
			data: [],
			backgroundColor: 'rgba(255, 99, 132, 0.2)',
			borderColor: 'rgba(54, 162, 235, 1)',
			borderWidth: 3
			}]
			},
			options: {
			scales: {
			yAxes: [{
			ticks: {
			beginAtZero: true
			}
			}]
			}
			}
			});
			}
			return this.chartsCanvas[config.type];
			},
			draw: function (labels, data, chart) {
			console.log("绘图", chart);
			chart.data.labels = labels;
			chart.data.datasets[0].data = data;
			chart.update();
			},
			changeSpan: function (index, event) {
			var el = event.currentTarget;
			if (!$(el).hasClass("active")) {
			$(el).parent().find("div").removeClass("active");
			$(el).addClass("active");
			console.log("点击：" + ("#" + this.charts[index].type + " .search"));
			$("#" + this.charts[index].type + " .search").click();
			}
			}
			}
			});


			layui.use(['laydate', 'form'], function () {
			var laydate = layui.laydate,
			form = layui.form;
			//渲染日期输入框
			var d = new Date();
			var nowDay = d.format('yyyy-MM-dd');
			laydate.render({
			elem: 'input[name=date]' //指定元素
			, type: 'date'
			, trigger: 'click'
			//,lang: 'en'
			//,theme: 'grid'
			, range: true //开启日期范围，默认使用“-”分割
			// ,min: '2020-01-01'
			//,max: '2021-5-9'
			//,value: '2021-05-09 12:06:09'
			, value: nowDay + " - " + nowDay
			, done: function (value, date, endDate) {
			console.log(value, date, endDate);
			requestData(value);
			}
			, change: function (value, date, endDate) {
			}
			});
			//搜索条件
			form.on('submit(search)', function (data) {
			requestData(data.field.date);
			return false;
			});

			$("#search").click();
			});


			function requestData(value) {
			var date = value.split(" - ");
			ksapp.post("/admin/api/user/statisticRegisterUser", {
			startTime: new Date(date[0]).getTime()-10006060*8,
			endTime: new Date(date[1]).getTime()-100060608+1000606024-1,
			span: $(".time-psan .active").attr("key")
			}, function (res) {
			if (res.code == 0) {
			var labels = new Array();
			var values = new Array();
			for (var i = 0; i < res.data.list.length; i++) {
			labels.push(res.data.list[i].time);
			values.push(res.data.list[i].number);
			}
			draw(labels, values);
			} else {
			layer.msg(res.msg);
			}
			}, function (res) {
			});

			}
			});
			</script>

			<script>
			var ctx = document.getElementById("myChart").getContext('2d');
			var myChar = null;

			function draw(labels, data) {
			if (myChar == null) {
			myChar = new Chart(ctx, {
			type: 'line',
			data: {
			labels: labels,
			datasets: [{
			label: '新增用户数',
			data: data,
			backgroundColor: 'rgba(255, 99, 132, 0.2)',
			borderColor: 'rgba(54, 162, 235, 1)',
			borderWidth: 3
			}]
			},
			options: {
			scales: {
			yAxes: [{
			ticks: {
			beginAtZero: true
			}
			}]
			}
			}
			});
			} else {
			myChar.data.labels = labels;
			myChar.data.datasets[0].data = data;
			myChar.update();
			}
			}
			</script>