上传

pages/index/board/safe/educationCard.vue

@@ -1,15 +1,22 @@
 <template>
 	<ChartCard margin="0 0 30rpx 0" title="培训数据">
-		<view class="charts-box">
-			<qiun-data-charts type="area" :opts="opts" :canvas2d="false"  :chartData="chartData" @getIndex="handleTap" />
+		<view class="charts-box" @click="router.push('/pages/index/training/index')">
+			<qiun-data-charts type="area" :opts="opts" :canvas2d="false" :chartData="chartData" @getIndex="handleTap" />
 		</view>
 	</ChartCard>
 </template>
 
 <script setup>
 import ChartCard from '@/components/chartCard.vue';
-import { ref ,onMounted} from 'vue';
+import { ref, onMounted, watch } from 'vue';
+import { router } from '@/utils';
 
+let props = defineProps({
+	educationData: {
+		type: Array,
+		default: () => []
+	}
+});
 const opts = ref({
 	padding: [15, 15, 0, 15],
 	enableScroll: false,
@@ -20,7 +27,7 @@ const opts = ref({
 		disableGrid: true,
 		rotateLabel: true,
 		rotateAngle: -30,
-		fontSize: 10
+		fontSize: 9
 	},
 	yAxis: {
 		gridType: 'dash',
@@ -46,18 +53,24 @@ const chartData = ref({});
 const handleTap = (e) => {
 	console.log(e);
 };
-
-onMounted(() => {
-	let res = {
-		categories: ['专项培训', '三级安全教育\n培训人次', '特种作业\n培训人次', '安全技术\n交底人次'],
-		series: [
-			{
-				data: [302265, 70770, 399175, 14851]
-			}
-		]
-	};
-	chartData.value = JSON.parse(JSON.stringify(res));
-});
+watch(
+	() => props.educationData,
+	(newVal) => {
+		if (newVal && newVal.length) {
+			// 只有当数据存在时才赋值
+			let res = {
+				categories: ['专项培训', '三级安全教育\n培训人次', '特种作业\n培训人次', '安全技术\n交底人次'],
+				series: [
+					{
+						data: newVal
+					}
+				]
+			};
+			chartData.value = JSON.parse(JSON.stringify(res));
+		}
+	},
+	{ deep: true, immediate: true }
+);
 </script>
 
 <style scoped>