qzyReal
/
market-admin-ui


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122
							<!DOCTYPE html>
<html>
	<head>
		<title>Sa-Admin 控制台</title>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<!-- 所有的 css & js 资源 -->
		<link rel="stylesheet" href="../../static/kj/element-ui/theme-chalk/index.css">
		<link rel="stylesheet" href="../../static/sa.css">
		<style type="text/css">
			.vue-box{margin: 0; padding: 0; height: 100%;}
			.el-card{border-radius: 0px; border: 1px #ddd solid ; margin-bottom: 14px;}
			.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: 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 :sta="sta"></com-sta-data>
			</div>
			<!-- ------------ 第二栏 - 图表 ------------- -->
			<div class="s-row s-row-2">
				<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>
		<script src="https://unpkg.com/element-ui@2.13.0/lib/index.js"></script>
		<script src="https://unpkg.com/http-vue-loader@1.4.2/src/httpVueLoader.js"></script>
		<script src="https://unpkg.com/jquery@3.4.1/dist/jquery.js"></script>
		<script src="https://www.layuicdn.com/layer-v3.1.1/layer.js"></script>
		<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">
			new Vue({
				components: {
					'com-sta-data': httpVueLoader('com-sta-data.vue'),
					'com-chart-1': httpVueLoader('com-chart-1.vue'),
					'com-chart-2': httpVueLoader('com-chart-2.vue'),
					'com-chart-3': httpVueLoader('com-chart-3.vue'),
					'com-stack': httpVueLoader('com-stack.vue'),
					'com-update-log': httpVueLoader('com-update-log.vue'),
					'com-origin': httpVueLoader('com-origin.vue'),
				},
				el: '.vue-box',
				data: {
					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();
					}
				}
			})

			// 设置监听，改变窗口大小时重绘图表
			window.myChartList = [];
			window.onresize = function() {
				myChartList.forEach(function(myChart) {
					myChart.resize();
				})
			}
		</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>
		</div>
	</body>
</html>