Homestay_gongzhonghao/pages/index/index.vue

<template>
	<view class="container">
		<!-- 上层部分 -->
		<view class="top-bg">
			<view class="top-title">靖安县乡村民宿</view>
			<!-- 具体数据 -->
			<view class="top-list-bg">
				<view class="minsuxinsi" v-for="(item,index) in minsu" :key="index">
					<view class="list-num">{{item.num}}</view>
					<view class="list-txt">{{item.name}}</view>
				</view>
			</view>
		</view>
		<!-- 订单状态占比图 -->
		<uni-section title="订单状态占比">
			<template v-slot:decoration>
				<view class="decoration"></view>
			</template>
			<dingdanzhuangtai class="echarts" :dinglength="dinglength" :dingzhuang="dingzhuang" :dingnum="dingnum">
			</dingdanzhuangtai>
		</uni-section>
		<!-- 民宿统计图 -->
		<uni-section title="民宿统计">
			<template v-slot:decoration>
				<view class="decoration"></view>
			</template>
			<minsutongji class="echarts2" :xianmin="xianmin" :hotelnum="hotelnum">
			</minsutongji>
		</uni-section>
		<!-- 访问量趋势图 -->
		<uni-section title="访问量趋势">
			<template v-slot:decoration>
				<view class="decoration"></view>
			</template>
			<!-- 切换 -->
			<view class="qiehuankuang">
				<view :class="{'xuanzhong':fangtype==1,'list':fangtype!=1}" @click="fangwen(1)">今日</view>
				<view :class="{'xuanzhong':fangtype==2,'list':fangtype!=2}" @click="fangwen(2)">本周</view>
				<view :class="{'xuanzhong':fangtype==3,'list':fangtype!=3}" @click="fangwen(3)">本月</view>
				<view :class="{'xuanzhong':fangtype==4,'list':fangtype!=4}" @click="fangwen(4)">本年</view>
			</view>
			<fangwenliang class="echarts3" :fangQu="fangQu" :fangquTime="fangquTime">
			</fangwenliang>
		</uni-section>
		<!-- 性别占比图 -->
		<uni-section title="性别占比">
			<template v-slot:decoration>
				<view class="decoration"></view>
			</template>
			<!-- 切换 -->
			<view class="qiehuankuang">
				<view :class="{'xuanzhong3':xuanzhong==true,'list3':xuanzhong==false}">今天</view>
				<view class="list3">本月</view>
				<view class="list3">本年</view>
			</view>
			<xingbiezhanbi class="echarts4">
			</xingbiezhanbi>
		</uni-section>
		<!-- 年龄占比图 -->
		<uni-section title="年龄占比">
			<template v-slot:decoration>
				<view class="decoration"></view>
			</template>
			<!-- 切换 -->
			<view class="qiehuankuang">
				<view :class="{'xuanzhong3':xuanzhong==true,'list3':xuanzhong==false}">今天</view>
				<view class="list3">本月</view>
				<view class="list3">本年</view>
			</view>
			<nianlingzhanbi class="echarts5">
			</nianlingzhanbi>
		</uni-section>
		<!-- 订单量排行 -->
		<view class="dingdan">
			<!-- 订单量排行图 -->
			<uni-section title="订单量排行">
				<template v-slot:decoration>
					<view class="decoration"></view>
				</template>
				<!-- 切换 -->
				<view class="qiehuankuang">
					<view :class="{'xuanzhong3':dingtype==1,'list3':dingtype!=1}" @click="dingqie(1)">今天</view>
					<view :class="{'xuanzhong3':dingtype==2,'list3':dingtype!=2}" @click="dingqie(2)">本月</view>
					<view :class="{'xuanzhong3':dingtype==3,'list3':dingtype!=3}" @click="dingqie(3)">本年</view>
				</view>
				<dingdanliang class="dingdanliang" :dingPai="dingPai">
				</dingdanliang>
			</uni-section>
			<view style="width:100%;height:20px"></view>
			<!-- 销售额排行图 -->
			<uni-section title="销售额排行">
				<template v-slot:decoration>
					<view class="decoration"></view>
				</template>
				<!-- 切换 -->
				<view class="qiehuankuang">
					<view :class="{'xuanzhong3':xiaotype==1,'list3':xiaotype!=1}" @click="xiaoqie(1)">今天</view>
					<view :class="{'xuanzhong3':xiaotype==2,'list3':xiaotype!=2}" @click="xiaoqie(2)">本月</view>
					<view :class="{'xuanzhong3':xiaotype==3,'list3':xiaotype!=3}" @click="xiaoqie(3)">本年</view>
				</view>
				<xiaoshoue class="xiaoshoue" :xiaoshou="xiaoshou">
				</xiaoshoue>
			</uni-section>
		</view>
	</view>
</template>

<script>
	import dingdanzhuangtai from '@/components/echarts/dingdanzhuangtai.vue'
	import minsutongji from '@/components/echarts/minsutongji.vue'
	import fangwenliang from '@/components/echarts/fangwenliang.vue'
	import xingbiezhanbi from '@/components/echarts/xingbiezhanbi.vue'
	import nianlingzhanbi from '@/components/echarts/nianlingzhanbi.vue'
	import dingdanliang from '@/components/liebiao/dingdanliang.vue'
	import xiaoshoue from '@/components/liebiao/xiaoshoue.vue'
	export default {
		components:{
			dingdanzhuangtai,
			minsutongji,
			fangwenliang,
			xingbiezhanbi,
			nianlingzhanbi,
			dingdanliang,
			xiaoshoue
		},
		data() {
			return {
				minsu:[
					{num:0,name:'民宿'},
					{num:0,name:'今日访问量'},
					{num:0,name:'今日销售额'},
					{num:0,name:'今日订单量'},
				],//民宿信息
				xuanzhong:true,
				// 订单状态
				dinglength:0,//订单长度
				dingzhuang:[],// 订单状态
				dingnum:[],// 订单状态数量
				// 民宿统计
				xianmin:[],//县名
				hotelnum:[],//民宿数量
				// 访问量趋势
				fangQu:[],
				fangquTime:[],
				fangStart:new Date().toISOString().slice(0, 10).replace(/-/g,'/'),//2023/08/24 当天
				fangEnd:new Date(new Date().setDate(new Date().getDate()+1)).toISOString().slice(0, 10).replace(/-/g,'/'),//后一天
				fangtype:1,//筛选条件1今日2本周3本月4本年
				// 订单量排行
				dingPai:[],
				dingtype:1,//筛选条件1今日2本月3本年
				// 销售额排行
				xiaoshou:[],
				xiaotype:1,
			}
		},
		onLoad() {
			this.getShuju()
			this.getFangwen()
			this.getZhuangtai()
			this.getMinsuliang()
			this.getFangQu()
			this.getDingPai()
			this.getXiaoshou()
			this.t1 = setInterval(function() {
			  this.getShuju()
			  this.getFangwen()
			  this.getZhuangtai()
			  this.getMinsuliang()
			  this.getFangQu()
			  this.getDingPai()
			  this.getXiaoshou()
			}, 86400000);//一天刷新
		},
		beforeDestroy() {
		    // 页面关闭清除定时器
		    clearInterval(this.t1)
		  },
		methods: {
			//中台数据
			getShuju(){
				this.minsu[0].num=0
				this.minsu[2].num=0
				this.minsu[3].num=0
				this.$axios.get("/hotelReservation/mhotel/idcgetSumData.action",
				{
				}).then(res => {
					if (res.data.code==200) {
						this.minsu[0].num=res.data.data.hotelSum
						this.minsu[2].num=res.data.data.salesAmountDay
						this.minsu[3].num=res.data.data.bookNumDay
					} else {
					  console.log('获取中台数据失败')
					}
				});
			},
			//今日访问量
			getFangwen(){
				this.minsu[1].num=0
				this.$axios.get("/hotelReservation/mhotel/idcvisitsToday.action",
				{
				}).then(res => {
					if (res.data.code==200) {
						this.minsu[1].num=res.data.data.todayCount
					} else {
					  console.log('获取今日访问量失败')
					}
				});
			},
			//订单状态占比
			getZhuangtai(){
				this.dingzhuang=[]
				this.dingnum=[]
				this.$axios.get("/hotelReservation/mhotel/idcgetBookStatusData.action",
				{
				}).then(res => {
					if (res.data.code==200) {
						this.dinglength=res.data.data.length
						res.data.data.forEach(data => {
							// 订单状态
							this.dingzhuang.push(data.orderStatusName)
							// 数量
							this.dingnum.push(data.statusNum)
						})
					} else {
					  console.log('获取订单状态失败')
					}
				});
			},
			//各县民宿数量
			getMinsuliang(){
				this.xianmin=[]
				this.hotelnum=[]
				this.$axios.get("/hotelReservation/mhotel/idcgetHotelData.action",
				{
				}).then(res => {
					if (res.data.code==200) {
						res.data.data.forEach(data => {
							// 县名字
							this.xianmin.push(data.hposition.slice(-7))
							// 民宿数量
							this.hotelnum.push(data.hotelNum)
						})
					} else {
					  console.log('获取民宿失败')
					}
				});
			},
			//获得本周的开始时间：
			getStartDayOfWeek(time) {
				let now = new Date(time); // 当前日期
				let nowDayOfWeek = now.getDay(); // 今天本周的第几天
				let day = nowDayOfWeek || 7;
				let nowDay = now.getDate(); // 当前日
				let nowMonth = now.getMonth(); // 当前月
				return this.formatDate(new Date(now.getFullYear(), nowMonth, nowDay + 1 - day));
			},
			// 日期格式化
			formatDate(date) {
				let myyear = date.getFullYear();
				let mymonth = date.getMonth() + 1;
				let myweekday = date.getDate();
				if (mymonth < 10) {
					mymonth = '0' + mymonth;
				}
				if (myweekday < 10) {
					myweekday = '0' + myweekday;
				}
				return (myyear + '/' + mymonth + '/' + myweekday);
			},
			//访问量切换条件
			fangwen(e){
				if(e==1){
					this.fangtype=1
					this.fangStart=new Date().toISOString().slice(0, 10).replace(/-/g,'/')
					this.fangEnd=new Date(new Date().setDate(new Date().getDate()+1)).toISOString().slice(0, 10).replace(/-/g,'/')
				}else if(e==2){
					this.fangtype=2
					this.fangStart=this.getStartDayOfWeek(new Date().toLocaleDateString())
					this.fangEnd=new Date(new Date().setDate(new Date().getDate()+1)).toISOString().slice(0, 10).replace(/-/g,'/')
				}else if(e==3){
					this.fangtype=3
					this.fangStart=new Date(new Date().getFullYear(), new Date().getMonth(),2).toISOString().slice(0, 10).replace(/-/g,'/')
					this.fangEnd=new Date(new Date().setDate(new Date().getDate()+1)).toISOString().slice(0, 10).replace(/-/g,'/')
				}else if(e==4){
					this.fangtype=4
					this.fangStart=new Date(new Date().getFullYear(), 0,2).toISOString().slice(0, 10).replace(/-/g,'/')
					this.fangEnd=new Date(new Date().setDate(new Date().getDate()+1)).toISOString().slice(0, 10).replace(/-/g,'/')
				}
				this.getFangQu()
			},
			//访问量趋势
			getFangQu(){
				this.fangQu=[]
				this.fangquTime=[]
				this.$axios.post("/hotelReservation/mhotel/idcvisitsDiyQuery.action?type=4&startTime="+this.fangStart+"&endTime="+this.fangEnd,
				{
				},).then(res => {
					if (res.data.code==200) {
						res.data.data.forEach(data => {
							// 访问量
							this.fangQu.push(data.visitNumber)
							// 访问量时间
							this.fangquTime.push(data.day)
						})
					} else {
					  console.log('获取访问量失败')
					}
				});
			},
			//订单量切换条件
			dingqie(e){
				if(e==1){
					this.dingtype=1
				}else if(e==2){
					this.dingtype=2
				}else if(e==3){
					this.dingtype=3
				}
				this.getDingPai()
			},
			//订单量排行
			getDingPai(){
				this.dingPai=[]
				// type  1今日2本月3本年
				this.$axios.get("/hotelReservation/mhotel/idcgetRankBookNumData.action?type="+this.dingtype,
				{
				}).then(res => {
					if (res.data.code==200) {
						res.data.data.forEach(data => {
							this.dingPai.push(data)
						})
					} else {
					  console.log('获取订单量排行数据失败')
					}
				});
			},
			//销售额切换条件
			xiaoqie(e){
				if(e==1){
					this.xiaotype=1
				}else if(e==2){
					this.xiaotype=2
				}else if(e==3){
					this.xiaotype=3
				}
				this.getXiaoshou()
			},
			//销售额排行
			getXiaoshou(){
				this.xiaoshou=[]
				// type  1今日2本月3本年
				this.$axios.get("/hotelReservation/mhotel/idcgetRankSalesAmountData.action?type="+this.xiaotype,
				{
				}).then(res => {
					if (res.data.code==200) {
						res.data.data.forEach(data => {
							this.xiaoshou.push(data)
						})
					} else {
					  console.log('获取销售额排行数据失败')
					}
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		width:100%;
		font-size: 14px;
		line-height: 24px;
		overflow-x:hidden;
	}
	/* 上层 */
	.top-bg{
		height:200px;
		width:100%;
		background-image: url('../../static/bg-top.png');
		background-size: 100%;
		// background:linear-gradient(-61.2185deg, rgb(75, 152, 237) 0%, rgb(72, 198, 239) 100%);;
	}
	.top-title{
		color:#FFFFFF;
		font-size:18px;
		padding-top:30px;
		text-align:center;
	}
	/* 具体数据 */
	.top-list-bg{
		width:90%;
		height:80px;
		background:#FFFFFF;
		margin:30px 0 0 20px;
		border-radius:5px;
		display:flex;
	}
	.minsuxinsi{
		position: relative;
		// margin-top: 328rpx;
		display: inline-block;
		width:25%;
		text-align: center;
		font-size:24rpx;
	}
	.list-num{
		// color:rgb(77, 139, 255);
		color:rgba(9, 101, 98, 1);
		margin-top: 10px;
		font-size: 18px;
		font-weight: 600;
	}
	.list-txt{
		margin-top: 5px;
		color:rgb(51, 51, 51);
	}
	// uni-section样式
	.uni-section[data-v-f7ca1098] {
	    background-color: #fff;
		margin-top: 10px;
		height:280px;
	}
	.uni-section .uni-section-header__content[data-v-f7ca1098] {
	    display: flex;
	    flex-direction: column;
	    flex: 1;
	    color: #333;
	    font-weight: 700;
	}
	.uni-section .uni-section-content[data-v-f7ca1098] {
	    font-size: 14px;
	    z-index: 1;
	    position: absolute;
	}
	// 竖线颜色
	.decoration{
		width: 4px;
		height: 12px;
		border-radius: 10px;
		margin-right: 6px;
		background-color: rgba(9, 101, 98, 1);
	}
	// 订单状态图
	.echarts{
		width:100%;
		height:200px;
	}
	//民宿统计图
	.echarts2{
		width:100%;
		height:280px;
	}
	//访问量趋势图
	.qiehuankuang{
		width:225px;
		height:30px;
		margin:-30px 0 0 37%;
		line-height:30px;
		display: flex;
		font-size:28rpx;
		position: relative;
		z-index: 5;
	}
	.list{
		width:25%;
		height:100%;
		border:1px solid rgba(175, 175, 175, 0.7);
		text-align:center;
		color: rgb(119, 119, 119)
	}
	.xuanzhong{
		width:25%;
		height:100%;
		border:1px solid rgba(9, 101, 98, 1);
		text-align:center;
		background-color:rgba(9, 101, 98, 1);
		color:#FFFFFF;
	}
	// 三等份
	.list3{
		width:33%;
		height:100%;
		border:1px solid rgba(175, 175, 175, 0.7);
		text-align:center;
		color: rgb(119, 119, 119)
	}
	.xuanzhong3{
		width:33%;
		height:100%;
		border:1px solid rgba(9, 101, 98, 1);
		text-align:center;
		background-color:rgba(9, 101, 98, 1);
		color:#FFFFFF;
	}
	.echarts3{
		width:100%;
		height:230px;
	}
	//性别占比图
	.echarts4{
		width:100%;
		height:230px;
	}
	//年龄占比图
	.echarts5{
		width:100%;
		height:230px;
	}
	// 订单量排行
	.dingdan{
		background-color: #fff;
		margin-top: 20px;
		height:150%;
	}
	//订单量排行图
	.dingdanliang{
		width:100%;
		height: 260px;
		margin-top: 10px;
		overflow-y: auto;
	}
	// 销售额排行图
	.xiaoshoue{
		width:100%;
		height: 260px;
		margin-top: 10px;
		overflow-y: auto;
	}
</style>