后台首页统计

sa-view-sp/console/com-chart-1.vue

@@ -1,108 +1,147 @@
 <!-- 统计图1 -->
 <template>
-	<div class="echarts-div" id='bar-chart' ref="bar-chart"></div>
+	<div class="echarts-div" id="bar-chart" ref="bar-chart" style="height: 220px;"></div>
 </template>
 
 <script>
-	module.exports = {
-		data() {
-			return {
-				
+module.exports = {
+	props: {
+		chartData: {
+			type: Array,
+			required: true
+		},
+		type: {
+			type: String,
+			default: 'bar'
+		}
+	},
+	data() {
+		return {};
+	},
+	watch: {
+		chartData: {
+			deep: true,
+			handler(val) {
+				this.setOptions(val);
 			}
 		},
-		methods: {
-			// 刷新柱状图
-			f5BarChart: function() {
-				// ===========================================  定义数据 
-				var x_name = '';	// new Date().getFullYear() + "年"; // x轴名称
-				var y_name = "注册数量"; // y轴名称
-				var dataArray = []; // 坐标X轴数据
-				var valueArray = []; //  坐标Y轴数据
-			
-				var arr = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11];
-				for (var i in arr) {
-					i = parseInt(i) + 1;
-					dataArray.push(i + '月');
-					if (i < 10) {
-						i = "0" + i;
+		type: {
+			deep: true,
+			handler(val) {
+				this.setOptions(this.chartData);
+			}
+		}
+	},
+	created() {
+		// 刷新所有图标数据
+		this.$nextTick(() => {
+			this.setOptions(this.chartData);
+		});
+	},
+	methods: {
+		// 刷新柱状图
+		setOptions: function (chartData) {
+			let xAxisData = [];
+			let seriesData = [];
+			if (chartData) {
+				chartData.forEach((item, index) => {
+					xAxisData.push(item.name + '月份');
+					seriesData.push(item.value);
+				});
+			}
+			//开始渲染
+			var ele = this.$refs['bar-chart'];
+			var myChart = echarts.init(ele);
+			var option = {
+				color: ['rgba(37, 97, 239, 1)'],
+				tooltip: {
+					trigger: 'axis',
+					formatter: '{b} 交易额：{c}',
+					axisPointer: {
+						type: 'shadow'
 					}
-					i = i + "";
-					valueArray.push(sa.randomNum(100, 1000) || 0);
-				}
-				
-				// ===========================================  开始渲染
-			
-				var ele = this.$refs['bar-chart'];
-				var myChart = echarts.init(ele);
-				var option = {
-					tooltip: {
-						trigger: 'axis',
-						formatter: '{b}<br/> ' + y_name + '：{c}',
-						axisPointer: {
-							type: 'shadow'
-						}
-					},
-					grid:{x: 50, y: 30, x2: 25, y2: 25},	//设置canvas内部表格的内距
-					toolbox: {
-						show: true,
-						top: 0,
-						feature: {
-							saveAsImage: {
-								show: true
+				},
+				grid: { x: 50, y: 30, x2: 25, y2: 25 }, //设置canvas内部表格的内距
+				xAxis: [
+					{
+						type: 'category',
+						data: xAxisData,
+						axisTick: {
+							show: false
+						},
+						axisLine: {
+							lineStyle: {
+								color: '#e6e6e6'
+							}
+						},
+						axisLabel: {
+							show: true,
+							textStyle: {
+								color: '#545555',
+								fontSize: '14'
 							}
 						}
-					},
-					xAxis: {
-						name: x_name,
-						type: 'category',
-						// axisLabel: {
-						// 	'interval': 0
-						// }, //强制不缩略x轴刻度,
-						data: dataArray
-					},
-					yAxis: {
-						name: y_name,
-						type: 'value'
-					},
-					series: [{
-						name: y_name,
-						data: valueArray,
-						type: 'bar',
-						label: {
-							normal: {
-								show: true,
-								position: 'top',
-								formatter: '{c}'
+					}
+				],
+				yAxis: [
+					{
+						type: 'value',
+						minInterval: 1,
+						axisTick: {
+							show: false
+						},
+						splitArea: {
+							show: false
+						},
+						splitLine: {
+							lineStyle: {
+								color: '#e6e6e6',
+								width: 0.7
+							}
+						},
+						axisLine: {
+							lineStyle: {
+								color: '#e6e6e6'
 							}
 						},
+						axisLabel: {
+							textStyle: {
+								color: '#545555'
+							}
+						}
+					}
+				],
+				series: [
+					{
+						type: this.type,
+						barWidth: '40%',
+						data: seriesData,
+						smooth: true,
 						itemStyle: {
 							normal: {
-								color: '#5DB1FF',
+								opacity: 1,
+								barBorderRadius: [3, 3, 0, 0],
+								areaStyle: {
+									color: '#8fc3f8'
+								},
 								label: {
 									show: true,
+									position: 'top',
 									textStyle: {
-										color: 'black'
+										color: '#545555',
+										fontSize: 14
 									}
 								}
 							}
 						}
-					}]
-				};
-				myChart.setOption(option);
-				window.myChartList.push(myChart);
-				// window.myChartList[0] = myChart;
-				// myChartList[1] = myChart;
-			},
-		},
-		created() {
-			// 刷新所有图标数据
-			this.$nextTick(function() {
-				this.f5BarChart();
-			});
+					}
+				]
+			};
+			myChart.setOption(option);
+			window.myChartList.push(myChart);
 		}
 	}
+};
 </script>
 
-<style scoped>
-	
-</style>
+<style scoped></style>

sa-view-sp/console/com-sta-data.vue

@@ -3,55 +3,55 @@
 	<el-row :gutter="14">
 		<el-col :lg="4" :sm="8" :xs="24">
 			<div class="sa-wnk">
-				<img src="../../static/icon/icon-user.png" >
+				<img src="../../static/icon/icon-user.png" />
 				<div class="sa-wnk-tv">
-					<p class="sa-wnk-title">用户</p>
-					<p class="sa-wnk-value">{{sta.userCount}}</p>
+					<p class="sa-wnk-title">边民数量</p>
+					<p class="sa-wnk-value">{{ sta.bm }}</p>
 				</div>
 			</div>
 		</el-col>
 		<el-col :lg="4" :sm="8" :xs="24">
 			<div class="sa-wnk">
-				<img src="../../static/icon/icon-goods.png" >
+				<img src="../../static/icon/icon-goods.png" />
 				<div class="sa-wnk-tv">
-					<p class="sa-wnk-title">商品</p>
-					<p class="sa-wnk-value">{{sta.goodsCount}}</p>
+					<p class="sa-wnk-title">收购商数量</p>
+					<p class="sa-wnk-value">{{ sta.purchaser }}</p>
 				</div>
 			</div>
 		</el-col>
 		<el-col :lg="4" :sm="8" :xs="24">
 			<div class="sa-wnk">
-				<img src="../../static/icon/icon-order.png" >
+				<img src="../../static/icon/icon-order.png" />
 				<div class="sa-wnk-tv">
-					<p class="sa-wnk-title">订单</p>
-					<p class="sa-wnk-value">{{sta.orderCount}}</p>
+					<p class="sa-wnk-title">全部订单</p>
+					<p class="sa-wnk-value">{{ sta.orders }}</p>
 				</div>
 			</div>
 		</el-col>
 		<el-col :lg="4" :sm="8" :xs="24">
 			<div class="sa-wnk">
-				<img src="../../static/icon/icon-article.png" >
+				<img src="../../static/icon/jyz.png" />
 				<div class="sa-wnk-tv">
-					<p class="sa-wnk-title">文章</p>
-					<p class="sa-wnk-value">{{sta.articleCount}}</p>
+					<p class="sa-wnk-title">交易中</p>
+					<p class="sa-wnk-value">{{ sta.totalMoney-sta.finishMoney }}</p>
 				</div>
 			</div>
 		</el-col>
 		<el-col :lg="4" :sm="8" :xs="24">
 			<div class="sa-wnk">
-				<img src="../../static/icon/icon-comment.png" >
+				<img src="../../static/icon/finishMoney.png" />
 				<div class="sa-wnk-tv">
-					<p class="sa-wnk-title">评论</p>
-					<p class="sa-wnk-value">{{sta.commentCount}}</p>
+					<p class="sa-wnk-title">完成交易额</p>
+					<p class="sa-wnk-value">{{ sta.finishMoney }}</p>
 				</div>
 			</div>
 		</el-col>
 		<el-col :lg="4" :sm="8" :xs="24">
 			<div class="sa-wnk">
-				<img src="../../static/icon/icon-money.png" >
+				<img src="../../static/icon/icon-money.png" />
 				<div class="sa-wnk-tv">
-					<p class="sa-wnk-title">余额</p>
-					<p class="sa-wnk-value">{{sta.moneyCount}}</p>
+					<p class="sa-wnk-title">累计交易额</p>
+					<p class="sa-wnk-value">{{ sta.totalMoney }}</p>
 				</div>
 			</div>
 		</el-col>
@@ -59,71 +59,59 @@
 </template>
 
 <script>
-	module.exports = {
-		data() {
-			return {
-				// 统计数据 
-				sta: {
-					userCount: 0,
-					goodsCount: 0,
-					orderCount: 0,
-					articleCount: 0,
-					commentCount: 0,
-					moneyCount: 0,
-				},
-			}
-		},
-		methods: {
-			// 数值跳动 
-			// 对象、属性、结束值、所用时间 
-			slowMotion: function(obj, prop, endValue, time) {
-				let timeNow = 0; 
-				let fn = function() {
-					// 如果已经接近 or 时间已到，则立即结束 
-					var jdz = Math.abs(obj[prop] - endValue);
-					if(jdz < 2 || timeNow >= time) {
-						// console.log('到点了');
-						obj[prop] = endValue;
-					} else {
-						if(jdz < 100) {
-							obj[prop] += 1;
-						} else {
-							obj[prop] += parseInt((endValue - obj[prop]) / 10);		 // 平均一下 
-						}
-						timeNow += 30;
-						setTimeout(fn, 30);
-					}
-				}
-				fn();
-			},
-			// 设置统计数据的数值 
-			setStaDataValue: function(staData) {
-				for (let key in staData) {
-					this.slowMotion(this.sta, key, staData[key], 3000);
-				}
-			},
-		},
-		created() {
-			// 写入数据
-			this.setStaDataValue({
-				userCount: 12361,
-				goodsCount: 12541,
-				orderCount: 63222,
-				articleCount: 10368,
-				commentCount: 2048,
-				moneyCount: 13654.32,
-			});
+module.exports = {
+	props: {
+		sta: {
+			type: Object,
+			default:{}
 		}
+	},
+	data() {
+		return {};
+	},
+	methods: {
+
+	},
+	created() {
+		
 	}
+};
 </script>
 
 <style scoped>
-	/* 第一行 */
-	.sa-wnk{background-color: #FFF; border: 1px #ddd solid; margin-bottom: 14px; min-height: 100px; 
-		cursor: pointer; transition: all 0.3s; overflow: hidden;}
-	.sa-wnk:hover{box-shadow: 0 0 20px #999;}
-	.sa-wnk img{float: left; line-height: 100px; margin: 25px 0px 0 20px; width: 50px; height: 50px; vertical-align: middle;}
-	.sa-wnk .sa-wnk-tv{float: left; margin-left: 10px; max-width: calc(100% - 100px);}
-	.sa-wnk-title{margin-top: 25px; font-size: 16px;}
-	.sa-wnk-value{margin-top: 4px; font-size: 24px; padding-bottom: 20px;}
+/* 第一行 */
+.sa-wnk {
+	background-color: #fff;
+	border: 1px #ddd solid;
+	margin-bottom: 14px;
+	min-height: 100px;
+	cursor: pointer;
+	transition: all 0.3s;
+	overflow: hidden;
+}
+.sa-wnk:hover {
+	box-shadow: 0 0 20px #999;
+}
+.sa-wnk img {
+	float: left;
+	line-height: 100px;
+	margin: 25px 0px 0 20px;
+	width: 50px;
+	height: 50px;
+	vertical-align: middle;
+}
+.sa-wnk .sa-wnk-tv {
+	float: left;
+	margin-left: 10px;
+	max-width: calc(100% - 100px);
+}
+.sa-wnk-title {
+	margin-top: 25px;
+	font-size: 16px;
+}
+.sa-wnk-value {
+	margin-top: 4px;
+	font-size: 24px;
+	padding-bottom: 20px;
+}
 </style>

sa-view-sp/console/console-main.html

@@ -13,40 +13,36 @@
 			.s-row{/* background-color: antiquewhite; */ padding: 0 14px; padding-bottom: 0px;}
 			.s-row-1{padding-top: 14px;}
 			.s-row-2{/* margin-top: -10px; */}
-			.s-row-2 .el-card .el-card__body{height: 250px;}
+			.s-row-2 .el-card .el-card__body{height: 230px;}
 			.s-row-3 .el-card{/* height: 100%; */}
-
 			.echarts-div{height: 100%;}
 			.s-row-3 .el-alert{margin-bottom: 14px;}
+			.years {float: right;margin-top: -63px;overflow: hidden;}
+			.ctype {float: left;margin-right: 30px;}
+			.year {float: left;padding: 5px 10px;background-color: #f6f6f6;cursor: pointer;font-size: 14px;color: #545555;}
+			.year.active{background-color: rgba(37, 97, 239, 1);color: white;}
 		</style>
 	</head>
 	<body>
 		<div class="vue-box" style="display: none;" :style="'display: block;'">
-
 			<!-- ------------ 第一栏 - 统计数据 ------------- -->
 			<div class="s-row s-row-1">
-				<com-sta-data></com-sta-data>
+				<com-sta-data :sta="sta"></com-sta-data>
 			</div>
-
 			<!-- ------------ 第二栏 - 图表 ------------- -->
 			<div class="s-row s-row-2">
-				<el-row :gutter="14">
-					<el-col :lg="8" :xs="24">
-						<el-card shadow="never" header="柱状图">
-							<com-chart-1></com-chart-1>
-						</el-card>
-					</el-col>
-					<el-col :lg="8" :xs="24">
-						<el-card shadow="never" header="饼图">
-							<com-chart-2></com-chart-2>
-						</el-card>
-					</el-col>
-					<el-col :lg="8" :xs="24">
-						<el-card shadow="never" header="折线图">
-							<com-chart-3></com-chart-3>
-						</el-card>
-					</el-col>
-				</el-row>
+				<el-card shadow="never" header="订单交易额">
+					<div class="years">
+						<div class="ctype">
+							<div class="year" :class="{ active: currentType == index }" @click="currentType = index" v-for="(item, index) in types" :key="index">{{ item.name }}</div>
+						</div>
+						<div class="year" :class="{ active: currentYear == index }" v-for="(item, index) in year" :key="index" @click="selectYear(index)">{{ item.year}}年</div>
+					</div>
+					<com-chart-1 :chart-data="chartData.money" :type="types[currentType].value"></com-chart-1>
+				</el-card>
+				<el-card shadow="never" header="订单交易量">
+					<com-chart-1 :chart-data="chartData.count" :type="types[currentType].value"></com-chart-1>
+				</el-card>
 			</div>
 		</div>
 		<script src="https://unpkg.com/vue@2.6.10/dist/vue.js"></script>
@@ -57,7 +53,7 @@
 		<script src="https://unpkg.com/echarts@4.6.0/dist/echarts-en.min.js"></script>
 		<script src="../../static/sa.js"></script>
 		<script type="text/javascript">
-			var app = new Vue({
+			new Vue({
 				components: {
 					'com-sta-data': httpVueLoader('com-sta-data.vue'),
 					'com-chart-1': httpVueLoader('com-chart-1.vue'),
@@ -66,14 +62,46 @@
 					'com-stack': httpVueLoader('com-stack.vue'),
 					'com-update-log': httpVueLoader('com-update-log.vue'),
 					'com-origin': httpVueLoader('com-origin.vue'),
-					// 'com-intro': httpVueLoader('com-intro.vue'),
 				},
 				el: '.vue-box',
 				data: {
-				},
-				methods: {
+					sta: {bm: 0,purchaser: 0,orderCount: 0,totalMoney: 0,orders: 0,finishMoney: 0,},
+					chartData: {money: [],count: []},
+					year: [], //订单所有年份
+					currentType: 0, //当前图表类型
+					currentYear: 0, //当前年份
+					types: [{name: '柱状图',value: 'bar'}, {name: '折线图',value: 'line'}],
 				},
 				mounted: function() {
+					this.getYear();
+					this.getUsers();
+				},
+				methods: {
+					getOrderStatistics() {
+						sa.ajax('/level-two-server/TbOrders/orderStatistics', {year: this.year[this.currentYear].year}, res => {
+							this.chartData = res.data;
+						});
+					},
+					getUsers() {
+						sa.ajax('/sp-admin/AppUser/selectUsers', res => {
+							this.sta.bm=parseInt(res.data.bmzz)+parseInt(res.data.bm);
+							this.sta.purchaser=res.data.purchaser;
+						});
+					},
+					getYear() {
+						sa.ajax('/level-two-server/TbOrders/selectYear', res => {
+							this.year = res.data.year;
+							this.currentYear = this.year.length - 1;
+							this.sta.totalMoney = res.data.count.totalMoney;
+							this.sta.finishMoney = res.data.count.finishMoney;
+							this.sta.orders = res.data.count.orders;
+							this.getOrderStatistics();
+						});
+					},
+					selectYear(index) {
+						this.currentYear = index;
+						this.getOrderStatistics();
+					}
 				}
 			})
 
@@ -87,7 +115,8 @@
 		</script>
 		<!-- 百度统计（下载到本地后请删除） -->
 		<div style="height: 0px; overflow: hidden;">
-			<script type="text/javascript" src="https://v1.cnzz.com/z_stat.php?id=1279021391&web_id=1279021391"></script>
+			<script type="text/javascript" src="https://v1.cnzz.com/z_stat.php?id=1279021391&web_id=1279021391">
+			</script>
 		</div>
 	</body>
-</html>
+</html>