上传

pages/index/board/qms/projectItemCard.vue

@@ -1,63 +1,75 @@
 <template>
 	<ChartCard margin="30rpx 0 0 0" title="工程划分数">
-		<view class="inspection ">
+		<view class="inspection" @click="router.push('/pages/quality/engineeringDivision/index')">
 			<qiun-data-charts type="column" :canvas2d="false" :opts="opts" :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
-		},
-		yAxis: {
-			showTitle: true,
-			data: [{
-				title: "单位：个"
-			}]
-		},
-		extra: {
-			column: {
-				type: "group",
-				width: 30,
-				activeBgColor: "#000000",
-				activeBgOpacity: 0.08,
-			}
-		}
-	})
-
-	const chartData = ref({})
-
-	const handleTap = (e) => {
-		console.log(e)
+import ChartCard from '@/components/chartCard.vue';
+import { ref, watch } from 'vue';
+import {router} from '@/utils'
+let props = defineProps({
+	projectDivisionData: {
+		type: Array,
+		default: () => []
 	}
+});
+const opts = ref({
+	padding: [15, 15, 0, 5],
+	enableScroll: false,
+	legend: { show: false },
+	xAxis: {
+		disableGrid: true
+	},
+	yAxis: {
+		showTitle: true,
+		data: [
+			{
+				title: '单位：个'
+			}
+		]
+	},
+	extra: {
+		column: {
+			type: 'group',
+			width: 30,
+			activeBgColor: '#000000',
+			activeBgOpacity: 0.08
+		}
+	}
+});
 
+const chartData = ref({});
 
-	onMounted(() => {
-		let res = {
-			categories: ["单位工程数", "分部工程数", "分项工程数"],
-			series: [{
-					name: '',
-					data: [10000, 5428, 6852]
-				},
-			]
-		};
-		chartData.value = JSON.parse(JSON.stringify(res));
-	})
+const handleTap = (e) => {
+	console.log(e);
+};
+
+watch(
+	() => props.projectDivisionData,
+	(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">
-	.inspection {
-		width: 100%;
-		height: 300rpx;
-	}
-</style>
+.inspection {
+	width: 100%;
+	height: 300rpx;
+}
+</style>