上传

pages/index/board/safe/bigCrisisCard.vue

@@ -1,62 +1,73 @@
 <template>
 	<ChartCard margin="0 0 30rpx 0" title="危大工程数">
-		<view class="big-crisis">
+		<view class="big-crisis" @click="router.push('/pages/index/dangerousProject/index')">
 			<qiun-data-charts type="column" :opts="opts" :canvas2d="false" :chartData="chartData" @getIndex="handleTap" />
 		</view>
 	</ChartCard>
 </template>
 
 <script setup>
-	import ChartCard from '@/components/chartCard.vue'
-	import {
-		ref,onMounted
-	} from 'vue';
-	const opts = ref({
-		padding: [15, 15, 0, 5],
-		enableScroll: false,
-		legend: {
-			show: false
-		},
-		xAxis: {
-			disableGrid: true,
-			fontSize:12
-		},
-		yAxis: {
-			data: [{
-				min: 0
-			}]
-		},
-		extra: {
-			column: {
-				type: "group",
-				width: 20,
-				activeBgColor: "#000000",
-				activeBgOpacity: 0.08
-			}
-		}
-	})
+import ChartCard from '@/components/chartCard.vue';
+import { ref, watch } from 'vue';
+import {router} from '@/utils'
 
-	const chartData = ref({})
-
-	const handleTap = (e) => {
-		console.log(e)
+let props = defineProps({
+	dangerousProjectData: {
+		type: Array,
+		default: () => []
 	}
+});
+const opts = ref({
+	padding: [15, 15, 0, 5],
+	enableScroll: false,
+	legend: {
+		show: false
+	},
+	xAxis: {
+		disableGrid: true,
+		fontSize: 12
+	},
+	yAxis: {
+		data: [
+			{
+				min: 0
+			}
+		]
+	},
+	extra: {
+		column: {
+			type: 'group',
+			width: 20,
+			activeBgColor: '#000000',
+			activeBgOpacity: 0.08
+		}
+	}
+});
 
+const chartData = ref({});
 
-	onMounted(() => {
-		let res = {
-			categories: ["已完成个数", "进行中个数", "作业人数", "培训人次数"],
-			series: [{
-				data: [35, 36, 31, 33]
-			}]
-		};
-		chartData.value = JSON.parse(JSON.stringify(res));
-	})
+const handleTap = (e) => {
+	console.log(e);
+};
+watch(
+	() => props.dangerousProjectData,
+	(newVal) => {
+		if (newVal && newVal.length) {
+			// 只有当数据存在时才赋值
+			let res = {
+				categories: ['已完成个数', '进行中个数', '作业人数', '培训人次数'],
+				series: [{ data: newVal }]
+			};
+			chartData.value = JSON.parse(JSON.stringify(res));
+		}
+	},
+	{ deep: true, immediate: true }
+);
 </script>
 
 <style lang="scss">
-	.big-crisis {
-		width: 100%;
-		height: 400rpx;
-	}
-</style>
+.big-crisis {
+	width: 100%;
+	height: 400rpx;
+}
+</style>