feat: 统计

components/Charts/LineOne.vue

@@ -50,23 +50,27 @@
 					dateDay: '2024-01',
 					homestayId: '1744620500506251265'
 				},
+				objList: {}
 			}
 		},
 		onReady() {
-			let obj = wx.getStorageSync('fromData')
-			this.fromData.dateDay = obj.dateDay
-			this.fromData.homestayId = obj.homestayId
-			this.drawRevenueCharts();
+			this.objList = wx.getStorageSync('fromData')
+			console.log('交易趋势33333333', this.objList);
+			this.fromData.dateDay = this.objList.dateDay
+			this.fromData.homestayId = this.objList.homestayId
+			// this.drawRevenueCharts();
 
 		},
 		methods: {
 			// 交易趋势
 			drawRevenueCharts() {
-				let obj = wx.getStorageSync('fromData')
-				this.list = obj
-				this.list.dealLineChant.forEach(item => {
-					this.dataList.push(item.orderAmount)
-				})
+				this.list = this.objList
+				console.log('交易趋势33333333', this.list);
+				if (this.list != {}) {
+					this.list.checkedInChant.forEach(item => {
+						this.dataList.push(item.checkedInRatio)
+					})
+				}
 				let list1 = {
 					categories: [
 						"01-01", "", "", "", "", "", "",

components/Charts/LineTwo.vue

@@ -51,19 +51,23 @@
 					dateDay: '2024-01',
 					homestayId: '1744620500506251265'
 				},
+				objList: {}
 			}
 		},
 		onReady() {
-			this.drawRevenueCharts();
+			this.objList = wx.getStorageSync('fromData')
+			console.log('折线图11111', this.objList);
+			this.fromData.dateDay = this.objList.dateDay
+			this.fromData.homestayId = this.objList.homestayId
+			// this.drawRevenueCharts();
 		},
 		methods: {
 			// 交易趋势
 			drawRevenueCharts() {
-				let obj = wx.getStorageSync('fromData')
-				this.list = obj
 				this.list.checkedInChant.forEach(item => {
 					this.dataList.push(item.checkedInRatio)
 				})
+
 				let list1 = {
 					categories: ["01-01", "", "", "", "", "", "", "01-08", "", "", "", "", "", "", "01-15",
 						"", "", "", "", "", "", "01-22", "", "", "", "", "", "", "01-29", "", "",

components/Charts/PieCharts.vue

@@ -1,6 +1,6 @@
 <template>
 	<view class="charts-box" style="min-height: 580rpx;">
-		<qiun-data-charts type="ring" :opts="optsPie" :chartData="chartDataPie" />
+		<qiun-data-charts type="ring" :opts="optsPied" :chartData="chartDataPied" />
 	</view>
 </template>
 
@@ -8,8 +8,8 @@
 	export default {
 		data() {
 			return {
-				chartDataPie: {},
-				optsPie: {
+				chartDataPied: {},
+				optsPied: {
 					rotate: false,
 					rotateLock: false,
 					color: ['#1372FF', '#F89F2A', '#02C493'],
@@ -48,41 +48,52 @@
 					dateDay: '2024-01',
 					homestayId: '1744620500506251265'
 				},
-				list: {}
+				PieChartsList: {},
+				objList: {}
 			};
 		},
 		onReady() {
+			setTimeout(() => {
+				this.objList = wx.getStorageSync('fromData')
+				this.fromData.dateDay = this.objList.dateDay
+				this.fromData.homestayId = this.objList.homestayId
+				console.log('环图0000', this.objList);
+			}, 2000);
+			console.log('789465');
+			setTimeout(() => {
+				this.getServerData();
+			}, 3000);
 
-			this.getServerData();
 		},
 		methods: {
 			getServerData() {
-				let obj = wx.getStorageSync('fromData')
-				this.list = obj
-				this.list = {
+				this.PieChartsList = this.objList
+				console.log('环图2222', this.PieChartsList);
+				this.PieChartsList = {
 					series: [{
 						data: [{
 								"name": "房费",
-								"value": this.list.roomAmount,
-								"labelText": "房费" + this.list.roomRatio + '%'
+								"value": this.PieChartsList.roomAmount,
+								"labelText": "房费" + this.PieChartsList.roomRatio + '%'
 							},
 							{
 								"name": "商品",
-								"value": this.list.othersAmount,
-								"labelText": "商品" + this.list.othersRatio + '%'
+								"value": this.PieChartsList.othersAmount,
+								"labelText": "商品" + this.PieChartsList.othersRatio + '%'
 							},
 							{
 								"name": "其他",
-								"value": this.list.breakfastAmount,
-								"labelText": "其他" + this.list.breakfastRatio + '%',
+								"value": this.PieChartsList.breakfastAmount,
+								"labelText": "其他" + this.PieChartsList.breakfastRatio + '%',
 							},
 
 						],
 
 					}],
 				}
-				this.chartDataPie = JSON.parse(JSON.stringify(this.list));
+				this.chartDataPied = JSON.parse(JSON.stringify(this.PieChartsList));
 			},
+
 		}
 	};
 </script>

pages/statistics/index.vue

@@ -62,8 +62,9 @@
 				</view>
 
 			</view>
-			<view class="Pie_charts">
-				<PieCharts></PieCharts>
+			<view class="Pie_charts" style="min-height: 580rpx;">
+				<!-- <PieCharts></PieCharts> -->
+				<qiun-data-charts type="ring" :opts="optsPied" :chartData="chartDataPied" />
 			</view>
 		</view>
 		<view class="echarts-two">
@@ -75,8 +76,7 @@
 				单位：元
 			</view>
 			<view class="line_charts_one">
-				<LineOne />
-
+				<qiun-data-charts type="area" :opts="revenueOptsone" :chartData="revenueChartDataOne" />
 			</view>
 		</view>
 		<view class="echarts-three">
@@ -90,7 +90,7 @@
 				</view>
 			</view>
 			<view class="line_charts_two">
-				<LineTwo />
+				<qiun-data-charts type="area" :opts="revenueOptstwo" :chartData="revenueChartDataTwo" />
 			</view>
 		</view>
 		<Tabbar :tabbarIndex="2"></Tabbar>
@@ -115,13 +115,136 @@
 				date: '2024-01',
 				fromData: {
 					dateDay: '2024-01',
-					homestayId: '1744620500506251265'
+					homestayId: ''
+				},
+
+				chartDataPied: {},
+				optsPied: {
+					rotate: false,
+					rotateLock: false,
+					color: ['#1372FF', '#F89F2A', '#02C493'],
+					padding: [30, 30, 30, 35],
+					dataLabel: true,
+					enableScroll: false,
+					legend: {
+						show: true,
+						position: "bottom",
+						lineHeight: 25
+					},
+					title: {
+						name: "",
+						fontSize: 15,
+						color: "#666666"
+					},
+					subtitle: {
+						name: "",
+						fontSize: 25,
+						color: "#7cb5ec"
+					},
+					extra: {
+						ring: {
+							ringWidth: 25,
+							activeOpacity: 0.5,
+							activeRadius: 10,
+							offsetAngle: 0,
+							labelWidth: 10,
+							border: false,
+							borderWidth: 3,
+							borderColor: "#FFFFFF"
+						}
+					},
+				},
+				PieChartsList: {},
+
+				// 公司营收
+				revenueChartDataOne: {},
+				revenueOptsone: {
+					color: ["#4B98FE"],
+					padding: [15, 15],
+					dataLabel: false,
+					xAxis: {
+						disableGrid: true,
+					},
+					yAxis: {
+						// gridColor: "rgba(230,230,230,0.6)",
+						gridColor: "rgba(200,200,200,0.6)",
+						disabled: false,
+						disableGrid: false,
+						gridType: 'dash',
+						dashLength: '4',
+						data: [{
+							axisLineColor: "#FFFFFF",
+							min: 0,
+						}],
+					},
+					legend: {
+						show: false,
+						position: "top",
+						float: "right",
+					},
+					extra: {
+						area: {
+							type: "curve",
+							opacity: 0.8,
+							addLine: true,
+							width: 1,
+							gradient: true,
+						},
+					},
 				},
+				dataListOne: [],
+
+
+				// 公司营收
+				revenueChartDataTwo: {},
+				revenueOptstwo: {
+					color: ["#4B98FE"],
+					padding: [15, 15],
+					dataLabel: false,
+					xAxis: {
+						disableGrid: true,
+					},
+					yAxis: {
+						// gridColor: "rgba(230,230,230,0.6)",
+						gridColor: "rgba(200,200,200,0.6)",
+						disabled: false,
+						disableGrid: false,
+						gridType: 'dash',
+						dashLength: '4',
+						data: [{
+							axisLineColor: "#FFFFFF",
+							min: 0,
+							max: 1
+						}],
+					},
+					legend: {
+						show: false,
+						position: "top",
+						float: "right",
+					},
+					extra: {
+						area: {
+							type: "curve",
+							opacity: 0.8,
+							addLine: true,
+							width: 1,
+							gradient: true,
+						},
+					},
+				},
+				dataListTwo: [],
+
+
 				list: {}
 			}
 		},
 		onReady() {
-			this.getList()
+			// this.fromData.dateDay = e.detail.value
+			this.fromData.homestayId = wx.getStorageSync('homestayId')
+			if (this.fromData.homestayId !== '') {
+				this.getList()
+			}
+
 		},
 		methods: {
 			bindDateChange(e) {
@@ -136,13 +259,99 @@
 			endDate() {
 				return this.getDate('end')
 			},
+
 			getList() {
 				this.$api.get('/merchant/hotel/mine/getHotelCountInfo', this.fromData).then(res => {
 					console.log(res);
 					this.list = res.data.data
-					// wx.setStorageSync('fromData', this.list)
+					// 环图 营业概况
+					this.getServerData();
+					// 交易趋势
+					this.drawRevenueChartsOne()
+					// 入住率
+					this.drawRevenueChartstwo()
 				})
 			},
+
+
+			// 环图 营业概况
+			getServerData() {
+				this.PieChartsList = this.list
+				console.log('环图2222', this.PieChartsList);
+				this.PieChartsList = {
+					series: [{
+						data: [{
+								"name": "房费",
+								"value": this.PieChartsList.roomAmount,
+								"labelText": "房费" + this.PieChartsList.roomRatio + '%'
+							},
+							{
+								"name": "商品",
+								"value": this.PieChartsList.othersAmount,
+								"labelText": "商品" + this.PieChartsList.othersRatio + '%'
+							},
+							{
+								"name": "其他",
+								"value": this.PieChartsList.breakfastAmount,
+								"labelText": "其他" + this.PieChartsList.breakfastRatio + '%',
+							},
+
+						],
+
+					}],
+				}
+				this.chartDataPied = JSON.parse(JSON.stringify(this.PieChartsList));
+			},
+
+			// 交易趋势
+			drawRevenueChartsOne() {
+				// this.list = this.objList
+				// console.log('交易趋势33333333', this.list);
+				this.list.checkedInChant.forEach(item => {
+					this.dataListOne.push(item.checkedInRatio)
+				})
+				let list1 = {
+					categories: [
+						"01-01", "", "", "", "", "", "",
+						"01-08", "", "", "", "", "", "",
+						"01-15", "", "", "", "", "", "",
+						"01-22", "", "", "", "", "", "",
+						"01-29", "", ""
+					],
+					series: [{
+						name: "收入",
+						data: this.dataListOne,
+						legendShape: "circle",
+						color: "#4088FE",
+						pointShape: "none",
+					}, ],
+				}
+				this.revenueChartDataOne = JSON.parse(JSON.stringify(list1));
+			},
+
+			// 入住率
+			drawRevenueChartstwo() {
+				this.list.checkedInChant.forEach(item => {
+					this.dataListTwo.push(item.checkedInRatio)
+				})
+
+				let list2 = {
+					categories: ["01-01", "", "", "", "", "", "", "01-08", "", "", "", "", "", "", "01-15",
+						"", "", "", "", "", "", "01-22", "", "", "", "", "", "", "01-29", "", "",
+					],
+					series: [{
+						name: "入住率",
+						data: this.dataListTwo,
+						legendShape: "circle",
+						color: "#600EFF",
+						pointShape: "none",
+					}, ],
+				}
+				this.revenueChartDataTwo = JSON.parse(JSON.stringify(list2));
+			},
+
+
+
 		}
 	}
 </script>
@@ -251,9 +460,10 @@
 		}
 
 		.Pie_charts {
-			height: 600rpx;
-			width: 630rpx;
+			width: 600rpx !important;
+			height: 560rpx !important;
 			// background-color: aqua;
+
 		}
 
 	}
@@ -286,6 +496,7 @@
 		.line_charts_one {
 			width: 630rpx;
 			height: 388rpx;
+
 			// background-color: aqua;
 		}