CNCEC_APP/pages/index/board/qms/acceptanceData.vue

<template>
	<ChartCard margin="30rpx 0 0 0" title="控制点验收数">
		<view class="ys" @click="router.push('/pages/quality/controlPoint/index')">
			<qiun-data-charts type="mix" :canvas2d="false" :opts="opts" :chartData="chartData" @getIndex="handleTap" />
		</view>
		<view class="ys u-margin-top-30" @click="router.push('/pages/quality/controlPoint/index')">
			<qiun-data-charts type="mix" :canvas2d="false" :opts="opts" :chartData="chartData1" @getIndex="handleTap" />
		</view>
	</ChartCard>
</template>

<script setup>
import ChartCard from '@/components/chartCard.vue';
import { ref, watch } from 'vue';
import {router} from '@/utils'
let props = defineProps({
	controlPointAcceptanceData: {
		type: Array,
		default: () => []
	}
});
const opts = ref({
	color: ['#1890FF', '#91CB74', '#FAC858', '#EE6666', '#73C0DE', '#3CA272', '#FC8452', '#9A60B4', '#ea7ccc'],
	padding: [15, 15, 0, 15],
	enableScroll: false,
	legend: { fontSize: 10 },
	xAxis: {
		disableGrid: true
	},
	yAxis: {
		disabled: false,
		disableGrid: false,
		splitNumber: 5,
		gridType: 'dash',
		dashLength: 4,
		gridColor: '#CCCCCC',
		padding: 10,
		showTitle: true,
		data: [
			{
				position: 'right',
				min: 0,
				max: 100,
				title: '百分比'
			},
			{
				position: 'left',
				title: '数量',
				textAlign: 'left'
			}
		]
	},
	extra: {
		mix: {
			column: {
				width: 20,
				seriesGap: 8
			}
		}
	}
});

const chartData = ref({});
const chartData1 = ref({});
const handleTap = (e) => {
	console.log(e);
};
watch(
	() => props.controlPointAcceptanceData,
	(newVal) => {
		if (newVal && newVal.QualifiedRateList) {
			console.log("}}}}}}}}}",newVal);
			// 只有当数据存在时才赋值
			let res = {
				categories: ['关键工序验收', '特殊工程验收', '隐藏工程验收'],
				series: [
					{
						name: '合格率',
						type: 'line',
						style: 'curve',
						color: '#ffe200',
						disableLegend: true,
						data: newVal.QualifiedRateList
					},
					{
						name: '验收数',
						index: 1,
						type: 'column',
						data: newVal.AcceptNumList
					},
					{
						name: '合格数',
						index: 1,
						type: 'column',
						data: newVal.QualifiedList
					}
				]
			};
			let res1 = {
				categories: ['单位工程', '分部工程', '分项工程'],
				series: [
					{
						name: '合格率',
						type: 'line',
						style: 'curve',
						color: '#ffe200',
						disableLegend: true,
						data: newVal.EngineerQualifiedRateList
					},
					{
						name: '验收数',
						index: 1,
						type: 'column',
						data: newVal.EngineerAcceptNumList
					},
					{
						name: '合格数',
						index: 1,
						type: 'column',
						data: newVal.EngineerQualifiedList
					}
				]
			};
			chartData.value = JSON.parse(JSON.stringify(res));
			chartData1.value = JSON.parse(JSON.stringify(res1));
		}
	},
	{ deep: true, immediate: true }
);
</script>

<style lang="scss">
.ys {
	height: 300rpx;
}
</style>