2024-10-31 安全教育-api补齐调用

src/api/modules/safeEdgeProtection.ts

@@ -0,0 +1,27 @@
+import http from "@/api";
+const BASEURL = import.meta.env.VITE_API_URL;
+
+// 培训概况
+export const safecationOverview = (params: {}) => {
+	return http.post(BASEURL + `/xmgl/workerSafeEducationWorker/selectWorkerEducationOverview`, params);
+};
+
+// 班前教育人数统计（近七日）
+export const safecationByWeek = (params: {}) => {
+	return http.post(BASEURL + `/xmgl/workerSafeEducationWorker/selectWorkerEducationByWeek`, params);
+};
+
+// 教育类型分析
+export const safecationByType = (params: {}) => {
+	return http.post(BASEURL + `/xmgl/workerSafeEducationWorker/selectWorkerEducationByType`, params);
+};
+
+// 近七日人员培训记录
+export const safeWorkerPage = (params: {}) => {
+	return http.post(BASEURL + `/xmgl/workerSafeEducationWorker/selectSafeEducationWorkerPage`, params);
+};
+
+// 培训统计（近一个月内） 培训人员班组统计（近一个月内）
+export const safecationByMonth = (params: {}) => {
+	return http.post(BASEURL + `/xmgl/workerSafeEducationWorker/selectWorkerEducationByMonth`, params);
+};

src/views/sevenLargeScreen/safetyManagement/safeEducation/bottomLeft.vue

@@ -4,19 +4,19 @@
 			<div class="total-bg">
 				<div class="worker-total">
 					<div class="text">工人总数</div>
-					<div class="number">4098</div>
+					<div class="number">{{ByMonthdata.workerNum || "0"}}</div>
 				</div>
 				<div class="train-num">
 					<div class="text">培训人数</div>
-					<div class="number">3827</div>
+					<div class="number">{{ByMonthdata.educationNum || "0"}}</div>
 				</div>
 				<div class="pass-num">
 					<div class="text">合格人数</div>
-					<div class="number">2098</div>
+					<div class="number">{{ByMonthdata.passNum || "0"}}</div>
 				</div>
 				<div class="unqualified-num">
 					<div class="text">不合格人数</div>
-					<div class="number">1729</div>
+					<div class="number">{{ByMonthdata.unPassNum || "0"}}</div>
 				</div>
 			</div>
 		</div>
@@ -26,6 +26,28 @@
 <script setup lang="ts">
 import Card from "@/components/card.vue";
 import { reactive, ref, onMounted } from "vue";
+
+// api
+import { safecationByMonth } from "@/api/modules/safeEdgeProtection";
+
+// sn
+import { GlobalStore } from "@/stores";
+const store = GlobalStore();
+
+onMounted(() => {
+	getlist();
+});
+
+const ByMonthdata = ref({});
+
+const getlist = async () => {
+	const res: any = await safecationByMonth({
+		projectSn: store.sn
+	});
+	console.log("训统计（近一个月内） 培训人员班组统计（近一个月内", res);
+	// overviewdata.value = res.result;
+	ByMonthdata.value = res.result.workerStat;
+};
 </script>
 
 <style scoped lang="scss">

src/views/sevenLargeScreen/safetyManagement/safeEducation/bottomRight.vue

@@ -8,10 +8,17 @@
 
 <script setup lang="ts">
 import Card from "@/components/card.vue";
-import { onMounted } from "vue";
+import { onMounted, ref } from "vue";
 import * as echarts from "echarts";
 import symbolIcon from "@/assets/images/lineSymbol.png";
 
+// api
+import { safecationByMonth } from "@/api/modules/safeEdgeProtection";
+
+// sn
+import { GlobalStore } from "@/stores";
+const store = GlobalStore();
+
 function draw() {
 	let chartDom = document.getElementById("educationBottomRight");
 	if (chartDom) {
@@ -42,7 +49,8 @@ function draw() {
 		},
 		xAxis: {
 			show: true,
-			data: ["外墙施工人员", "机电安装工", "司机", "油漆工", "木工", "园林工"],
+			// data: ["外墙施工人员", "机电安装工", "司机", "油漆工", "木工", "园林工"],
+			data: xdata.value,
 			triggerEvent: true,
 			axisTick: {
 				show: false,
@@ -67,6 +75,26 @@ function draw() {
 				}
 			}
 		},
+		dataZoom: {
+			type: "slider", // 滑动条类型
+			show: xdata.value.length > 7 ? true : false, // 是否显示滑动条,在这里可以根据自己的需求做判断，超过时显示进度条
+			startValue: 0, // 展示区域内容的起始数值
+			endValue: 6, // 展示区域内容的结束数值
+			height: 6, // 滑动条组件高度
+			bottom: 0, // 距离图表区域下边的距离
+			showDetail: false, // 拖拽时是否显示详情
+			showDataShadow: false, // 是否在组件中显示数据阴影
+			fillerColor: "#2493f4", // 平移条的填充颜色
+			borderColor: "transparent", // 边框颜色
+			zoomLock: true, // 锁定视图
+			brushSelect: false, // 不可缩放 滑动条默认是有手柄可以进行展示的内容区域缩放的，不太美观
+			// 通过该属性可以只滑动，不显示缩放功能
+			handleStyle: {
+				// 手柄样式
+				opacity: 0,
+				// borderRadius: 20
+			}
+		},
 		yAxis: {
 			triggerEvent: true,
 			nameTextStyle: {
@@ -133,7 +161,8 @@ function draw() {
 						}
 					}
 				},
-				data: [100, 200, 300, 100, 20, 60, 120],
+				// data: [100, 200, 300, 100, 20, 60, 120],
+				data: servedata.value,
 				z: 10
 			},
 			{
@@ -147,16 +176,33 @@ function draw() {
 						// color: "rgba(11,47,68,.8)"
 					}
 				},
-				data: [100, 200, 300, 100, 20, 60, 120],
+				// data: [100, 200, 300, 100, 20, 60, 120],
+				data: servedata.value,
 				z: 9
 			}
 		]
 	};
 	echartsTest.setOption(option);
 }
-onMounted(() => {
+
-	draw();
+onMounted(async () => {
+	await getTypelist();
+	await draw();
 });
+
+const xdata = ref([]);
+const servedata = ref([]);
+
+const getTypelist = async () => {
+	const res: any = await safecationByMonth({
+		projectSn: store.sn
+	});
+	console.log("教育类型分析", res);
+	if (res.result) {
+		xdata.value = res.result.teamStat.map(obj => obj.name);
+		servedata.value = res.result.teamStat.map(obj => obj.num);
+	}
+};
 </script>
 
 <style scoped lang="scss">

src/views/sevenLargeScreen/safetyManagement/safeEducation/centerBottom.vue

@@ -10,12 +10,18 @@
 import { onMounted, ref } from "vue";
 import * as echarts from "echarts";
 import Card from "@/components/card.vue";
-import { GlobalStore } from "@/stores";
 // const store = GlobalStore();
 // const airType = ref(1);
 // let gasName = ref(1 as any);
 let selectDay = ref(1 as any);
 
+// api
+import { safecationByType } from "@/api/modules/safeEdgeProtection";
+
+// sn
+import { GlobalStore } from "@/stores";
+const store = GlobalStore();
+
 // let noiseList = ref([
 // 	{
 // 		value: 1,
@@ -54,78 +60,78 @@ let dayList = ref([
 	}
 ]);
 let dataList = ref([
-	{
+	// {
-		value: 37,
+	// 	value: 37,
-		show: true,
+	// 	show: true,
-		name: "入场安全教育",
+	// 	name: "入场安全教育",
-		itemStyle: {
+	// 	itemStyle: {
-			normal: {
+	// 		normal: {
-				color: "#82FBEA",
+	// 			color: "#82FBEA",
-				borderWidth: 20
+	// 			borderWidth: 20
-			}
+	// 		}
-		}
+	// 	}
-	},
+	// },
-	{
+	// {
-		value: 46,
+	// 	value: 46,
-		show: true,
+	// 	show: true,
-		name: "日常安全教育",
+	// 	name: "日常安全教育",
-		itemStyle: {
+	// 	itemStyle: {
-			normal: {
+	// 		normal: {
-				color: "#EEA959",
+	// 			color: "#EEA959",
-				borderWidth: 20
+	// 			borderWidth: 20
-			}
+	// 		}
-		}
+	// 	}
-	},
+	// },
-	{
+	// {
-		value: 30,
+	// 	value: 30,
-		show: true,
+	// 	show: true,
-		name: "每日安全交底",
+	// 	name: "每日安全交底",
-		itemStyle: {
+	// 	itemStyle: {
-			normal: {
+	// 		normal: {
-				color: "#4CC4F8"
+	// 			color: "#4CC4F8"
-			}
+	// 		}
-		}
+	// 	}
-	},
+	// },
-	{
+	// {
-		value: 30,
+	// 	value: 30,
-		show: true,
+	// 	show: true,
-		name: "VR安全教育",
+	// 	name: "VR安全教育",
-		itemStyle: {
+	// 	itemStyle: {
-			normal: {
+	// 		normal: {
-				color: "#E0D838"
+	// 			color: "#E0D838"
-			}
+	// 		}
-		}
+	// 	}
-	},
+	// },
-	{
+	// {
-		value: 8,
+	// 	value: 8,
-		show: true,
+	// 	show: true,
-		name: "班前教育",
+	// 	name: "班前教育",
-		itemStyle: {
+	// 	itemStyle: {
-			normal: {
+	// 		normal: {
-				color: "#EC6266"
+	// 			color: "#EC6266"
-			}
+	// 		}
-		}
+	// 	}
-	},
+	// },
-	{
+	// {
-		value: 32,
+	// 	value: 32,
-		show: true,
+	// 	show: true,
-		name: "日常教育(日常违规教育)",
+	// 	name: "日常教育(日常违规教育)",
-		itemStyle: {
+	// 	itemStyle: {
-			normal: {
+	// 		normal: {
-				color: "#6375C7"
+	// 			color: "#6375C7"
-			}
+	// 		}
-		}
+	// 	}
-	},
+	// },
-	{
+	// {
-		value: 15,
+	// 	value: 15,
-		show: true,
+	// 	show: true,
-		name: "每日交底(专项方案交底)",
+	// 	name: "每日交底(专项方案交底)",
-		itemStyle: {
+	// 	itemStyle: {
-			normal: {
+	// 		normal: {
-				color: "#81F279"
+	// 			color: "#81F279"
-			}
+	// 		}
-		}
+	// 	}
-	}
+	// }
 ]);
 function Pie() {
 	let dataArr = [];
@@ -159,8 +165,9 @@ function Pie() {
 	return dataArr;
 }
 
-onMounted(() => {
+onMounted(async () => {
-	drawEchart();
+	await getTypelist();
+	await drawEchart();
 });
 
 function drawEchart() {
@@ -201,13 +208,13 @@ function drawEchart() {
 			subtextStyle: {
 				color: "#ccc",
 				fontSize: 14,
-				fontWeight: "normal",
+				fontWeight: "normal"
 			}
 		},
 		legend: {
 			selectedMode: false, // 取消图例上的点击事件
 			icon: "rect",
-			type: "plain",
+			type: "scroll", // 设置为滚动类型
 			orient: "vertical",
 			left: "52%",
 			top: "8%",
@@ -249,6 +256,7 @@ function drawEchart() {
 				}
 			}
 		},
+		color:['#82FBEA','#EEA959','#4CC4F8','#E0D838','#EC6266','#6375C7','#81F279'],
 		series: [
 			// 外侧光线
 			{
@@ -394,6 +402,22 @@ function drawEchart() {
 	};
 	echartsTest.setOption(option, true);
 }
+
+const getTypelist = async () => {
+	const res: any = await safecationByType({
+		projectSn: store.sn
+	});
+	console.log("教育类型分析", res);
+	if (res.result) {
+		dataList.value = res.result.map(item => {
+			return {
+				value:item.num,
+				name:item.type,
+				show: true,
+			}
+		})
+	}
+};
 </script>
 
 <style lang="scss" scoped>

src/views/sevenLargeScreen/safetyManagement/safeEducation/centerTop.vue

@@ -8,10 +8,17 @@
 
 <script setup lang="ts">
 import Card from "@/components/card.vue";
-import { onMounted } from "vue";
+import { onMounted, ref } from "vue";
 import * as echarts from "echarts";
 import symbolIcon from "@/assets/images/lineSymbol.png";
 
+// api
+import { safecationByWeek } from "@/api/modules/safeEdgeProtection";
+
+// sn
+import { GlobalStore } from "@/stores";
+const store = GlobalStore();
+
 function draw() {
 	let chartDom = document.getElementById("educationCenterTop");
 	if (chartDom) {
@@ -42,7 +49,8 @@ function draw() {
 		},
 		xAxis: {
 			show: true,
-			data: ["8.30", "8.31", "9.1", "9.2", "9.4", "9.5", "9.6"],
+			// data: ["8.30", "8.31", "9.1", "9.2", "9.4", "9.5", "9.6"],
+			data: xdata.value,
 			triggerEvent: true,
 			axisTick: {
 				show: false,
@@ -132,7 +140,8 @@ function draw() {
 						}
 					}
 				},
-				data: [100, 200, 300, 100, 20, 60, 120],
+				// data: [100, 200, 300, 100, 20, 60, 120],
+				data: servedata.value,
 				z: 10
 			},
 			{
@@ -146,15 +155,33 @@ function draw() {
 						// color: "rgba(11,47,68,.8)"
 					}
 				},
-				data: [100, 200, 300, 100, 20, 60, 120],
+				data: servedata.value,
 				z: 9
 			}
 		]
 	};
 	echartsTest.setOption(option);
 }
-onMounted(() => {
+
-	draw();
+const xdata = ref([]);
+const servedata = ref([]);
+
+const getctlist = async () => {
+	const res: any = await safecationByWeek({
+		projectSn: store.sn
+	});
+	console.log("班前教育人数统计", res);
+	if (res.result) {
+		xdata.value = res.result.map(obj => obj.time);
+		servedata.value = res.result.map(obj => obj.num);
+		console.log("xdata.value", xdata.value);
+		console.log("servedata.value", servedata.value);
+	}
+};
+
+onMounted(async () => {
+	await getctlist();
+	await draw();
 });
 </script>
 

src/views/sevenLargeScreen/safetyManagement/safeEducation/topLeft.vue

@@ -4,7 +4,7 @@
 			<div class="trainee-number">
 				<div class="text-detail">
 					培训总人数：
-					<span>200</span>
+					<span>{{overviewdata.educationNum || '0'}}</span>
 				</div>
 				<div class="icon-detail">
 					<img :src="detailIcon1" />
@@ -13,7 +13,7 @@
 			<div class="pass-number">
 				<div class="text-detail">
 					合格人数：
-					<span>120</span>
+					<span>{{overviewdata.educationPass || '0'}}</span>
 				</div>
 				<div class="icon-detail">
 					<img :src="detailIcon2" />
@@ -22,8 +22,8 @@
 			<div class="trainee-record">
 				<div class="text-detail">
 					最新培训记录：
-					<span>20</span>
+					<span>{{overviewdata.educationNewRecord || '0'}}</span>
-					<span style="font-size: 12px; margin-top: 1%">min</span>
+					<!-- <span style="font-size: 12px; margin-top: 1%"></span> -->
 				</div>
 				<div class="icon-detail">
 					<img :src="detailIcon3" />
@@ -40,6 +40,13 @@
 import Card from "@/components/card.vue";
 import { reactive, ref, onMounted } from "vue";
 
+// api
+import { safecationOverview } from "@/api/modules/safeEdgeProtection";
+
+// sn
+import { GlobalStore } from "@/stores";
+const store = GlobalStore();
+
 import detailIcon1 from "@/assets/images/safeEducation/icon1.png";
 import detailIcon2 from "@/assets/images/safeEducation/icon2.png";
 import detailIcon3 from "@/assets/images/safeEducation/icon3.png";
@@ -72,6 +79,20 @@ const list = reactive([
 		color: "#EC6266"
 	}
 ]);
+
+onMounted(() => {
+	getlist();
+});
+
+const overviewdata = ref({});
+
+const getlist = async () => {
+	const res: any = await safecationOverview({
+		projectSn: store.sn
+	});
+	// console.log("培训概况", res);
+	overviewdata.value = res.result
+};
 </script>
 
 <style scoped lang="scss">
@@ -174,7 +195,8 @@ const list = reactive([
 		right: -3%;
 		top: 10%;
 		.text-detail {
-			height: 15%;
+			// white-space: nowrap;
+			// height: 15%;
 			display: flex;
 			justify-content: center;
 			align-items: center;
@@ -183,6 +205,8 @@ const list = reactive([
 			background-size: 100% 100%;
 			color: #ffffff;
 			font-size: 14px;
+			display: flex;
+			flex-direction: column;
 			span {
 				font-size: 16px;
 				font-family: OPPOSans-Heavy, OPPOSans;

src/views/sevenLargeScreen/safetyManagement/safeEducation/topRight.vue

@@ -11,20 +11,21 @@
 					<div>是否合格</div>
 					<div>培训得分</div>
 				</div>
-				<el-scrollbar class="list-box">
+				<el-scrollbar class="list-box" @scroll="handleScroll" ref="refScrollbarer">
 					<div v-for="(item, index) in list" class="list-style" :key="item.id">
 						<div>{{ index + 1 }}</div>
-						<div>{{ item.personName }}</div>
+						<div>{{ item.workerName }}</div>
-						<div>{{ item.personGrade }}</div>
+						<div>{{ item.sex == 1 ? '男' : '女' }}</div>
-						<div>{{ item.personAge }}</div>
+						<div>{{ item.age }}</div>
-						<div>{{ item.teamGroup }}</div>
+						<div>{{ item.teamName }}</div>
-						<div :style="{ color: item.passType == 1 ? '#EC6266' : '#FFFFFF' }">
+						<div :style="{ color: item.isQualified != 1 ? '#EC6266' : '#FFFFFF' }">
-							{{ item.passType == 0 ? "合格" : "不合格" }}
+							{{ item.isQualified
+							== 1 ? "合格" : "不合格" }}
 						</div>
-						<div>{{ item.trainScore }}</div>
+						<div>{{ item.score }}</div>
 					</div>
 					<div class="not-data" v-if="list.length == 0">
-						<img src="@/assets/images/noData.png" alt="" />
+						<img src="@/assets/images/noData.png" alt />
 						<p>暂无数据</p>
 					</div>
 				</el-scrollbar>
@@ -35,160 +36,93 @@
 
 <script lang="ts" setup>
 import Card from "@/components/card.vue";
-import { reactive, ref, onMounted } from "vue";
+import { reactive, ref, onMounted, nextTick } from "vue";
 import { GlobalStore } from "@/stores";
 const store = GlobalStore();
+
+import { safeWorkerPage } from "@/api/modules/safeEdgeProtection";
+
 let showDialog = ref(false as any);
 let rangeTime = ref("" as any);
-const list = reactive([
+const list = ref([
-	{
+	// {
-		id: 1,
+	// 	id: 1,
-		personName: "梁雷",
+	// 	personName: "梁雷",
-		personGrade: "女",
+	// 	personGrade: "女",
-		personAge: "54",
+	// 	personAge: "54",
-		teamGroup: "木工班组",
+	// 	teamGroup: "木工班组",
-		passType: 0,
+	// 	passType: 0,
-		trainScore: 78
+	// 	trainScore: 78
-	},
+	// },
-	{
-		id: 2,
-		personName: "梁雷",
-		personGrade: "女",
-		personAge: "54",
-		teamGroup: "木工班组",
-		passType: 1,
-		trainScore: 78
-	},
-	{
-		id: 3,
-		personName: "梁雷",
-		personGrade: "女",
-		personAge: "54",
-		teamGroup: "木工班组",
-		passType: 0,
-		trainScore: 78
-	},
-	{
-		id: 4,
-		personName: "梁雷",
-		personGrade: "女",
-		personAge: "54",
-		teamGroup: "木工班组",
-		passType: 1,
-		trainScore: 78
-	},
-	{
-		id: 5,
-		personName: "梁雷",
-		personGrade: "女",
-		personAge: "54",
-		teamGroup: "木工班组",
-		passType: 0,
-		trainScore: 78
-	},
-	{
-		id: 6,
-		personName: "梁雷",
-		personGrade: "女",
-		personAge: "54",
-		teamGroup: "木工班组",
-		passType: 1,
-		trainScore: 78
-	},
-	{
-		id: 7,
-		personName: "梁雷",
-		personGrade: "女",
-		personAge: "54",
-		teamGroup: "木工班组",
-		passType: 0,
-		trainScore: 78
-	},
-
-	{
-		id: 8,
-		personName: "梁雷",
-		personGrade: "女",
-		personAge: "54",
-		teamGroup: "木工班组",
-		passType: 0,
-		trainScore: 78
-	},
-	{
-		id: 9,
-		personName: "梁雷",
-		personGrade: "女",
-		personAge: "54",
-		teamGroup: "木工班组",
-		passType: 0,
-		trainScore: 78
-	},
-	{
-		id: 10,
-		personName: "梁雷",
-		personGrade: "女",
-		personAge: "54",
-		teamGroup: "木工班组",
-		passType: 0,
-		trainScore: 78
-	},
-	{
-		id: 11,
-		personName: "梁雷",
-		personGrade: "女",
-		personAge: "54",
-		teamGroup: "木工班组",
-		passType: 0,
-		trainScore: 78
-	},
-	{
-		id: 12,
-		personName: "梁雷",
-		personGrade: "女",
-		personAge: "54",
-		teamGroup: "木工班组",
-		passType: 0,
-		trainScore: 78
-	},
-	{
-		id: 13,
-		personName: "梁雷",
-		personGrade: "女",
-		personAge: "54",
-		teamGroup: "木工班组",
-		passType: 0,
-		trainScore: 78
-	},
-	{
-		id: 14,
-		personName: "梁雷",
-		personGrade: "女",
-		personAge: "54",
-		teamGroup: "木工班组",
-		passType: 0,
-		trainScore: 78
-	},
-	{
-		id: 15,
-		personName: "梁雷",
-		personGrade: "女",
-		personAge: "54",
-		teamGroup: "木工班组",
-		passType: 0,
-		trainScore: 78
-	},
-	{
-		id: 16,
-		personName: "梁雷",
-		personGrade: "女",
-		personAge: "54",
-		teamGroup: "木工班组",
-		passType: 0,
-		trainScore: 78
-	}
 ]);
 
-onMounted(async () => {});
+onMounted(async () => {
+	getProgressListData();
+});
+
+const refScrollbarer = ref(null as any); // 绑定到滚动的盒子上
+const moreScroll = ref(true as any);
+
+const pagInfo = ref({
+	pageNo: 1, //页数
+	pageSize: 30, //条数
+	total: 0 //总条数
+});
+
+// 智能安全帽--查询报警信息
+function getProgressListData() {
+	let data = {
+		pageNo: pagInfo.value.pageNo,
+		pageSize: pagInfo.value.pageSize,
+		projectSn: store.sn,
+		videoType: 1
+	};
+	safeWorkerPage(data).then(res => {
+		moreScroll.value = false;
+		if (res.code == 200 && res.result.records.length > 0) {
+			console.log("========近七日人员培训记录======", res.result.records);
+			list.value = list.value.concat(res.result.records);
+			// listData.value = res.result.records
+			// console.log("listData.value=============", listData.value);
+
+			pagInfo.value.total = res.result.total;
+			nextTick(() => {
+				moreScroll.value = true;
+			});
+		}
+	});
+}
+
+// 新智能安全帽-分页
+function handleScroll(event) {
+	// console.log("event", event);
+
+	refScrollbarer.value.wrapRef.addEventListener("scroll", (e: any) => {
+		const scrollTop = e.target.scrollTop;
+		const scrollHeight = e.target.scrollHeight;
+		const clientHeight = e.target.clientHeight;
+
+		// console.log("event", event);
+
+		// 向上加载更多
+		if (scrollTop >= scrollHeight - clientHeight - 1) {
+			if (moreScroll.value) {
+				console.log("===================加载第二页===================");
+				pagInfo.value.pageNo += 1;
+				console.log("pagInfo.value.pageNo", pagInfo.value.pageNo);
+				moreScroll.value = false;
+				getProgressListData();
+			}
+		}
+	});
+
+	// const { scrollTop, scrollHeight, clientHeight } = event.target;
+	// // 判断是否滚动到底部
+	// if (scrollTop + clientHeight >= scrollHeight) {
+	// 	// 触发滚动到底部的事件
+	// 	console.log("===================加载第二页===================");
+	// }
+}
 </script>
 
 <style lang="scss" scoped>
@@ -269,6 +203,9 @@ onMounted(async () => {});
 					text-align: center;
 					white-space: nowrap;
 					width: 14%;
+					white-space: nowrap; /* 强制文本在一行内显示 */
+					overflow: hidden; /* 超出部分隐藏 */
+					text-overflow: ellipsis; /* 超出部分显示省略号 */
 				}
 			}
 			.list-style:hover {
@@ -278,9 +215,10 @@ onMounted(async () => {});
 	}
 }
 .not-data {
-	top: 73%;
+	top: 50%;
-	width: 12%;
+	// width: 12%;
-	left: 44%;
+	left: 50%;
+	transform: translate(-50%, -50%);
 	position: absolute;
 	img {
 		width: 40%;
@@ -293,3 +231,5 @@ onMounted(async () => {});
 	}
 }
 </style>
+
+