上传

pages/index/board/qms/safetyCard.vue

@@ -1,6 +1,6 @@
 <template>
 	<ChartCard margin="30rpx 0 30rpx 0" title="领导级安全检查数">
-		<view class="big-crisis">
+		<view class="big-crisis" @click="router.push('/pages/quality/leader/index')">
 			<qiun-data-charts type="column" :opts="opts" :canvas2d="false" :chartData="chartData" @getIndex="handleTap" />
 		</view>
 	</ChartCard>
@@ -8,12 +8,24 @@
 
 <script setup>
 import ChartCard from '@/components/chartCard.vue';
-import { ref, onMounted } from 'vue';
+import { ref, watch } from 'vue';
+import { router } from '@/utils';
+let props = defineProps({
+	qualityProblemData: {
+		type: Array,
+		default: () => []
+	},
+	qualityProblemDatas: {
+		type: Array,
+		default: () => []
+	}
+});
+
 const opts = ref({
 	padding: [15, 15, 0, 5],
 	enableScroll: false,
 	legend: {
-		show: false
+		show: true
 	},
 	xAxis: {
 		disableGrid: true
@@ -30,7 +42,8 @@ const opts = ref({
 			type: 'group',
 			width: 20,
 			activeBgColor: '#000000',
-			activeBgOpacity: 0.08
+			activeBgOpacity: 0.08,
+			seriesGap:3
 		}
 	}
 });
@@ -40,18 +53,29 @@ const chartData = ref({});
 const handleTap = (e) => {
 	console.log(e);
 };
-
-onMounted(() => {
-	let res = {
-		categories: ['集团检查数', '企业检查数', '分支机构检查数'],
-		series: [
-			{
-				data: [35, 36,50]
-			}
-		]
-	};
-	chartData.value = JSON.parse(JSON.stringify(res));
-});
+watch(
+	() => props.qualityProblemData,
+	(newVal) => {
+		if (newVal && newVal.length) {
+			// 只有当数据存在时才赋值
+			let res = {
+				categories: ['集团检查数', '企业检查数', '分支机构检查数'],
+				series: [
+					{
+						name: '总数',
+						data: newVal
+					},
+					{
+						name: '未完成',
+						data: props.qualityProblemDatas
+					}
+				]
+			};
+			chartData.value = JSON.parse(JSON.stringify(res));
+		}
+	},
+	{ deep: true, immediate: true }
+);
 </script>
 
 <style lang="scss">