feat: 喜好分析页面

src/pages/tabbar/canteenAnalyse.vue

@@ -1,17 +1,20 @@
 <template>
 	<crud-layout title="详情" mainIsScroll bg="/static/page/blue-bg.png">
 		<tm-sheet :margin="[0, 20]">
-			<tm-text font-size="36">开发中</tm-text>
-			<tm-text color="#999999">1111</tm-text>
-		</tm-sheet>
-
-		<tm-sheet :margin="[0, 20]">
+			<view class="prefix_title mb-15rpx">菜品分类购买次数占比图</view>
 			<view class="w-full h-600rpx">
-				<qiun-data-charts type="column" :chartData="chartData" />
+				<qiun-data-charts type="pie" :opts="pieChartOpts" :chartData="pieChartData" />
 			</view>
 		</tm-sheet>
 
-		<view class="h-40rpx" />
+		<tm-sheet :margin="[0, 20]">
+			<view class="prefix_title mb-15rpx">近一周食堂购买次数趋势图</view>
+			<view class="w-full h-600rpx">
+				<qiun-data-charts type="area" :opts="areaChartOpts" :chartData="areaChartData" />
+			</view>
+		</tm-sheet>
+
+		<view class="h-80rpx" />
 	</crud-layout>
 </template>
 
@@ -19,31 +22,102 @@
 import { onLoad } from "@dcloudio/uni-app"
 import { ref } from "vue"
 import qiunDataCharts from "@/components/qiun-data-charts/qiun-data-charts.vue"
-const chartData = ref({})
+import { totalApi } from "@/sheep/api"
+
+const pieChartData = ref({})
+const areaChartData = ref({})
+
+const pieChartOpts = {
+	color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4", "#ea7ccc"],
+	padding: [5, 5, 5, 5],
+	enableScroll: false,
+	extra: {
+		pie: {
+			activeOpacity: 0.5,
+			activeRadius: 10,
+			offsetAngle: 0,
+			labelWidth: 15,
+			border: true,
+			borderWidth: 3,
+			borderColor: "#FFFFFF",
+			linearType: "custom",
+		},
+	},
+}
+
+const areaChartOpts = {
+	color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4", "#ea7ccc"],
+	padding: [15, -8, 0, -5],
+	enableScroll: false,
+	legend: {},
+	xAxis: {
+		disableGrid: true,
+	},
+	yAxis: {
+		gridType: "dash",
+		dashLength: 2,
+	},
+	extra: {
+		area: {
+			type: "curve",
+			opacity: 0.2,
+			addLine: true,
+			width: 2,
+			gradient: false,
+			activeType: "hollow",
+		},
+	},
+}
 
 onLoad(() => {
 	const app = getApp()
 	app._initTabbar()
 
-	getChartData()
+	getPieChartData()
+	getAreaChartData()
 })
 
-const getChartData = () => {
-	setTimeout(() => {
-		let res = {
-			categories: ["2016", "2017", "2018", "2019", "2020", "2021"],
-			series: [
-				{
-					name: "目标值",
-					data: [35, 36, 31, 33, 13, 34],
-				},
-				{
-					name: "完成量",
-					data: [18, 27, 21, 24, 6, 28],
-				},
-			],
+const getPieChartData = async () => {
+	const { code, data, msg } = await totalApi.productByClassify({})
+	if (code != 0) return uni.showToast({ title: msg || "数据获取失败", icon: "none" })
+	const seriesData = data.map((item: any) => {
+		return {
+			name: item.classifyName,
+			value: Number(item.payUserCount),
+			labelText: "总金额：" + item.totalPrice + "元",
 		}
-		chartData.value = JSON.parse(JSON.stringify(res))
-	}, 500)
+	})
+
+	pieChartData.value = {
+		series: [
+			{
+				data: seriesData,
+			},
+		],
+	}
+}
+
+const getAreaChartData = async () => {
+	const { code, data, msg } = await totalApi.productByCanteen({})
+	if (code != 0) return uni.showToast({ title: msg || "数据获取失败", icon: "none" })
+	const categories = data.map((item: any) => item.weekStr)
+
+	areaChartData.value = {
+		categories,
+		series: [
+			{
+				name: "1",
+				data: data.map((item: any) => Number(item.payUserCount)),
+			},
+			{
+				name: "2",
+				data: [35, 8, 25, 37, 4, 20, 13],
+			},
+			{
+				name: "3",
+				data: [70, 40, 65, 100, 44, 68, 10],
+			},
+		],
+	}
 }
 </script>

src/sheep/api/total.ts

@@ -1,22 +1,22 @@
 import request from "@/sheep/utils/request"
 
 export default {
-    /**
-     * 菜品销量按照分类查询
-     */
-    productByClassify: (data: any) =>
-        request({
-            url: `/hard/hard-canteen-total-log/app/product-by-classify`,
-            method: "POST",
-            data,
-        }),
-    /**
-     * 近一周各个食堂菜品购买统计
-     */
-    productByCanteen: (data: any) =>
-        request({
-            url: `/hard/hard-canteen-total-log/app/product-by-canteen`,
-            method: "POST",
-            data,
-        }),
-}
+	/**
+	 * 菜品销量按照分类查询
+	 */
+	productByClassify: (data: any): any =>
+		request({
+			url: `/hard/hard-canteen-total-log/app/product-by-classify`,
+			method: "POST",
+			data,
+		}),
+	/**
+	 * 近一周各个食堂菜品购买统计
+	 */
+	productByCanteen: (data: any): any =>
+		request({
+			url: `/hard/hard-canteen-total-log/app/product-by-canteen`,
+			method: "POST",
+			data,
+		}),
+}